Fix: Optimized the login page and fixed some known issues. #9869 (#10514)

### What problem does this PR solve?

Fix: Optimized the login page and fixed some known issues. #9869

- Added the FlipCard3D component to implement a 3D flip effect on the
login/registration forms.
- Adjusted the Spotlight component to support custom positioning and
color configurations.
- Updated the route to point to the new login page /login-next.
- Added a cancel interface to the auto-generate function.
- Fixed scroll bar issues in PDF preview.

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/dataset/dataset-overview/index.tsx

@@ -24,6 +24,8 @@ interface StatCardProps {
 interface CardFooterProcessProps {
   success: number;
   failed: number;
+  successTip?: string;
+  failedTip?: string;
 }
 
 const StatCard: FC<StatCardProps> = ({
@@ -56,7 +58,9 @@ const StatCard: FC<StatCardProps> = ({
 
 const CardFooterProcess: FC<CardFooterProcessProps> = ({
   success = 0,
+  successTip,
   failed = 0,
+  failedTip,
 }) => {
   const { t } = useTranslation();
   return (
@@ -65,8 +69,13 @@ const CardFooterProcess: FC<CardFooterProcessProps> = ({
         <div className="flex items-center justify-between  rounded-md w-1/2 p-2 bg-state-success-5">
           <div className="flex items-center rounded-lg gap-1">
             <div className="w-2 h-2 rounded-full bg-state-success "></div>
-            <div className="font-normal text-text-secondary text-xs">
+            <div className="font-normal text-text-secondary text-xs flex items-center gap-1">
               {t('knowledgeDetails.success')}
+              {successTip && (
+                <AntToolTip title={successTip} trigger="hover">
+                  <CircleQuestionMark size={12} />
+                </AntToolTip>
+              )}
             </div>
           </div>
           <div>{success || 0}</div>
@@ -74,8 +83,13 @@ const CardFooterProcess: FC<CardFooterProcessProps> = ({
         <div className="flex items-center justify-between rounded-md w-1/2 bg-state-error-5 p-2">
           <div className="flex items-center rounded-lg gap-1">
             <div className="w-2 h-2 rounded-full bg-state-error"></div>
-            <div className="font-normal text-text-secondary text-xs">
+            <div className="font-normal text-text-secondary text-xs flex items-center gap-1">
               {t('knowledgeDetails.failed')}
+              {failedTip && (
+                <AntToolTip title={failedTip} trigger="hover">
+                  <CircleQuestionMark size={12} />
+                </AntToolTip>
+              )}
             </div>
           </div>
           <div>{failed || 0}</div>
@@ -259,7 +273,9 @@ const FileLogsPage: FC = () => {
         >
           <CardFooterProcess
             success={topAllData.downloads.success}
+            successTip={t('datasetOverview.downloadSuccessTip')}
             failed={topAllData.downloads.failed}
+            failedTip={t('datasetOverview.downloadFailedTip')}
           />
         </StatCard>
         <StatCard
@@ -276,7 +292,9 @@ const FileLogsPage: FC = () => {
         >
           <CardFooterProcess
             success={topAllData.processing.success}
+            successTip={t('datasetOverview.processingSuccessTip')}
             failed={topAllData.processing.failed}
+            failedTip={t('datasetOverview.processingFailedTip')}
           />
         </StatCard>
       </div>