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>

web/src/pages/dataset/dataset-setting/configuration/common-item.tsx

@@ -144,7 +144,12 @@ export function ParseTypeItem({ line = 2 }: { line?: number }) {
             >
               <FormControl>
                 <Radio.Group {...field}>
-                  <div className="w-1/2 flex gap-2 justify-between text-muted-foreground">
+                  <div
+                    className={cn(
+                      'flex gap-2 justify-between text-muted-foreground',
+                      line === 1 ? 'w-1/2' : 'w-3/4',
+                    )}
+                  >
                     <Radio value={1}>{t('builtIn')}</Radio>
                     <Radio value={2}>{t('manualSetup')}</Radio>
                   </div>

web/src/pages/dataset/dataset/generate-button/hook.ts

@@ -6,7 +6,7 @@ import { t } from 'i18next';
 import { useEffect, useState } from 'react';
 import { useParams } from 'umi';
 import { ProcessingType } from '../../dataset-overview/dataset-common';
-import { GenerateType } from './generate';
+import { GenerateType, GenerateTypeMap } from './generate';
 export const generateStatus = {
   running: 'running',
   completed: 'completed',
@@ -103,9 +103,28 @@ export const useTraceGenerate = ({ open }: { open: boolean }) => {
     raptorRunloading,
   };
 };
+
+export const useUnBindTask = () => {
+  const { id } = useParams();
+  const { mutateAsync: handleUnbindTask } = useMutation({
+    mutationKey: [DatasetKey.pauseGenerate],
+    mutationFn: async ({ type }: { type: ProcessingType }) => {
+      const { data } = await deletePipelineTask({ kb_id: id as string, type });
+      if (data.code === 0) {
+        message.success(t('message.operated'));
+        // queryClient.invalidateQueries({
+        //   queryKey: [type],
+        // });
+      }
+      return data;
+    },
+  });
+  return { handleUnbindTask };
+};
 export const useDatasetGenerate = () => {
   const queryClient = useQueryClient();
   const { id } = useParams();
+  const { handleUnbindTask } = useUnBindTask();
   const {
     data,
     isPending: loading,
@@ -143,8 +162,12 @@ export const useDatasetGenerate = () => {
       type: GenerateType;
     }) => {
       const { data } = await agentService.cancelDataflow(task_id);
-      if (data.code === 0) {
-        message.success(t('message.operated'));
+
+      const unbindData = await handleUnbindTask({
+        type: GenerateTypeMap[type as GenerateType],
+      });
+      if (data.code === 0 && unbindData.code === 0) {
+        // message.success(t('message.operated'));
         queryClient.invalidateQueries({
           queryKey: [type],
         });
@@ -154,21 +177,3 @@ export const useDatasetGenerate = () => {
   });
   return { runGenerate: mutateAsync, pauseGenerate, data, loading };
 };
-
-export const useUnBindTask = () => {
-  const { id } = useParams();
-  const { mutateAsync: handleUnbindTask } = useMutation({
-    mutationKey: [DatasetKey.pauseGenerate],
-    mutationFn: async ({ type }: { type: ProcessingType }) => {
-      const { data } = await deletePipelineTask({ kb_id: id as string, type });
-      if (data.code === 0) {
-        message.success(t('message.operated'));
-        // queryClient.invalidateQueries({
-        //   queryKey: [type],
-        // });
-      }
-      return data;
-    },
-  });
-  return { handleUnbindTask };
-};

web/src/pages/dataset/sidebar/index.tsx

@@ -10,7 +10,7 @@ import { cn, formatBytes } from '@/lib/utils';
 import { Routes } from '@/routes';
 import { formatPureDate } from '@/utils/date';
 import { isEmpty } from 'lodash';
-import { Banknote, DatabaseZap, FileSearch2, FolderOpen } from 'lucide-react';
+import { Banknote, FileSearch2, FolderOpen, Logs } from 'lucide-react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHandleMenuClick } from './hooks';
@@ -40,7 +40,7 @@ export function SideBar({ refreshCount }: PropType) {
         key: Routes.DatasetTesting,
       },
       {
-        icon: <DatabaseZap className="size-4" />,
+        icon: <Logs className="size-4" />,
         label: t(`knowledgeDetails.overview`),
         key: Routes.DataSetOverview,
       },