Fix (style): Optimized Datasets color scheme and layout #3221 (#9620)

### What problem does this PR solve?


Fix (style): Optimized Datasets color scheme and layout #3221

- Updated background and text colors for multiple components

- Adjusted some layout structures, such as the paging position of
dataset tables

- Unified status icons and color mapping

- Optimized responsive layout to improve compatibility across different
screen sizes

### Type of change

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

web/src/components/ui/progress.tsx

@@ -12,13 +12,13 @@ const Progress = React.forwardRef<
   <ProgressPrimitive.Root
     ref={ref}
     className={cn(
-      'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
+      'relative h-4 w-full overflow-hidden rounded-full bg-bg-accent',
       className,
     )}
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
+      className="h-full w-full flex-1 bg-accent-primary transition-all"
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>

web/src/pages/dataset/dataset/constant.ts

@@ -3,15 +3,15 @@ import { RunningStatus } from '@/constants/knowledge';
 export const RunningStatusMap = {
   [RunningStatus.UNSTART]: {
     label: 'UNSTART',
-    color: 'cyan',
+    color: 'var(--accent-primary)',
   },
   [RunningStatus.RUNNING]: {
     label: 'Parsing',
-    color: 'blue',
+    color: 'var(--team-member)',
   },
-  [RunningStatus.CANCEL]: { label: 'CANCEL', color: 'orange' },
-  [RunningStatus.DONE]: { label: 'SUCCESS', color: 'blue' },
-  [RunningStatus.FAIL]: { label: 'FAIL', color: 'red' },
+  [RunningStatus.CANCEL]: { label: 'CANCEL', color: 'var(--state-warning)' },
+  [RunningStatus.DONE]: { label: 'SUCCESS', color: 'var(--state-success)' },
+  [RunningStatus.FAIL]: { label: 'FAIL', color: 'var(--state-error' },
 };
 
 export * from '@/constants/knowledge';

web/src/pages/dataset/dataset/dataset-table.tsx

@@ -164,7 +164,7 @@ export function DatasetTable({
           )}
         </TableBody>
       </Table>
-      <div className="flex items-center justify-end  py-4">
+      <div className="flex items-center justify-end  py-4 absolute bottom-3 right-3">
         <div className="space-x-2">
           <RAGFlowPagination
             {...pick(pagination, 'current', 'pageSize')}

web/src/pages/dataset/dataset/parsing-card.tsx

@@ -17,7 +17,7 @@ function Dot({ run }: { run: RunningStatus }) {
   const runningStatus = RunningStatusMap[run];
   return (
     <span
-      className={'size-2 inline-block rounded'}
+      className={'size-1 inline-block rounded'}
       style={{ backgroundColor: runningStatus.color }}
     ></span>
   );
@@ -89,7 +89,7 @@ export function ParsingCard({ record }: IProps) {
   return (
     <HoverCard>
       <HoverCardTrigger asChild>
-        <Button variant={'ghost'} size={'sm'}>
+        <Button variant={'transparent'} className="border-none" size={'sm'}>
           <Dot run={record.run}></Dot>
         </Button>
       </HoverCardTrigger>

web/src/pages/dataset/dataset/parsing-status-cell.tsx

@@ -14,7 +14,7 @@ import {
 import { Progress } from '@/components/ui/progress';
 import { Separator } from '@/components/ui/separator';
 import { IDocumentInfo } from '@/interfaces/database/document';
-import { CircleX, Play, RefreshCw } from 'lucide-react';
+import { CircleX, RefreshCw } from 'lucide-react';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { RunningStatus } from './constant';
@@ -24,11 +24,13 @@ import { useHandleRunDocumentByIds } from './use-run-document';
 import { UseSaveMetaShowType } from './use-save-meta';
 import { isParserRunning } from './utils';
 const IconMap = {
-  [RunningStatus.UNSTART]: <Play />,
-  [RunningStatus.RUNNING]: <CircleX />,
-  [RunningStatus.CANCEL]: <RefreshCw />,
-  [RunningStatus.DONE]: <RefreshCw />,
-  [RunningStatus.FAIL]: <RefreshCw />,
+  [RunningStatus.UNSTART]: (
+    <div className="w-0 h-0 border-l-[10px] border-l-accent-primary border-t-8 border-r-4 border-b-8 border-transparent"></div>
+  ),
+  [RunningStatus.RUNNING]: <CircleX size={14} />,
+  [RunningStatus.CANCEL]: <RefreshCw size={14} color="var(--accent-primary)" />,
+  [RunningStatus.DONE]: <RefreshCw size={14} color="var(--accent-primary)" />,
+  [RunningStatus.FAIL]: <RefreshCw size={14} color="var(--accent-primary)" />,
 };
 
 export function ParsingStatusCell({
@@ -60,11 +62,11 @@ export function ParsingStatusCell({
   }, [record, showSetMetaModal]);
 
   return (
-    <section className="flex gap-2 items-center">
-      <div className="w-28 flex items-center justify-between">
+    <section className="flex gap-8 items-center">
+      <div className="w-fit flex items-center justify-between">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant={'ghost'} size={'sm'}>
+            <Button variant={'transparent'} className="border-none" size={'sm'}>
               {parser_id === 'naive' ? 'general' : parser_id}
             </Button>
           </DropdownMenuTrigger>
@@ -77,7 +79,6 @@ export function ParsingStatusCell({
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
-        <Separator orientation="vertical" className="h-2.5" />
       </div>
       <ConfirmDeleteDialog
         title={t(`knowledgeDetails.redo`, { chunkNum: chunk_num })}
@@ -85,17 +86,17 @@ export function ParsingStatusCell({
         onOk={handleOperationIconClick(true)}
         onCancel={handleOperationIconClick(false)}
       >
-        <Button
-          variant={'ghost'}
-          size={'sm'}
+        <div
+          className="cursor-pointer flex items-center gap-3"
           onClick={
             isZeroChunk || isRunning
               ? handleOperationIconClick(false)
               : () => {}
           }
         >
+          <Separator orientation="vertical" className="h-2.5" />
           {operationIcon}
-        </Button>
+        </div>
       </ConfirmDeleteDialog>
       {isParserRunning(run) ? (
         <HoverCard>

web/src/pages/datasets/dataset-card.tsx

@@ -41,7 +41,7 @@ export function SeeAllCard() {
   const { navigateToDatasetList } = useNavigatePage();
 
   return (
-    <Card className="w-40" onClick={navigateToDatasetList}>
+    <Card className="w-40 flex-none" onClick={navigateToDatasetList}>
       <CardContent className="p-2.5 pt-1 w-full h-full flex items-center justify-center gap-1.5 text-text-secondary">
         See All <ChevronRight className="size-4" />
       </CardContent>

web/src/pages/home/datasets.tsx

@@ -30,7 +30,7 @@ export function Datasets() {
             <CardSkeleton />
           </div>
         ) : (
-          <div className="flex gap-4 flex-1">
+          <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 max-h-[78vh] overflow-auto">
             {kbs.slice(0, 6).map((dataset) => (
               <DatasetCard
                 key={dataset.id}

web/src/pages/next-search/index.tsx

@@ -128,7 +128,7 @@ export default function SearchPage() {
       </div>
       <div className="absolute right-5 top-4 ">
         <Button
-          className="bg-text-primary  text-bg-base border-b-[#00BEB4] border-b-2"
+          className="bg-text-primary  text-bg-base border-b-accent-primary border-b-2"
           onClick={() => {
             handleOperate().then((res) => {
               console.log(res, 'res');