Feat: Modify the style of the dataset page #3221 (#7446)

### What problem does this PR solve?

Feat:  Modify the style of the dataset page #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

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

@@ -1,55 +1,78 @@
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { RAGFlowAvatar } from '@/components/ragflow-avatar';
 import { Button } from '@/components/ui/button';
 import { useSecondPathName } from '@/hooks/route-hook';
 import { useFetchKnowledgeBaseConfiguration } from '@/hooks/use-knowledge-request';
-import { cn } from '@/lib/utils';
+import { cn, formatBytes } from '@/lib/utils';
 import { Routes } from '@/routes';
-import { formatDate } from '@/utils/date';
-import { Banknote, LayoutGrid, User } from 'lucide-react';
+import { formatPureDate } from '@/utils/date';
+import { Banknote, Database, FileSearch2 } from 'lucide-react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useHandleMenuClick } from './hooks';
 
-const items = [
-  { icon: User, label: 'Dataset', key: Routes.DatasetBase },
-  {
-    icon: LayoutGrid,
-    label: 'Retrieval testing',
-    key: Routes.DatasetTesting,
-  },
-  { icon: Banknote, label: 'Settings', key: Routes.DatasetSetting },
-];
-
 export function SideBar() {
   const pathName = useSecondPathName();
   const { handleMenuClick } = useHandleMenuClick();
   const { data } = useFetchKnowledgeBaseConfiguration();
+  const { t } = useTranslation();
+
+  const items = useMemo(() => {
+    return [
+      {
+        icon: Database,
+        label: t(`knowledgeDetails.dataset`),
+        key: Routes.DatasetBase,
+      },
+      {
+        icon: FileSearch2,
+        label: t(`knowledgeDetails.testing`),
+        key: Routes.DatasetTesting,
+      },
+      {
+        icon: Banknote,
+        label: t(`knowledgeDetails.configuration`),
+        key: Routes.DatasetSetting,
+      },
+    ];
+  }, [t]);
 
   return (
-    <aside className="w-60 relative border-r ">
-      <div className="p-6 space-y-2 border-b">
-        <Avatar className="size-20 rounded-lg">
-          <AvatarImage src={data.avatar} />
-          <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-        </Avatar>
-
-        <h3 className="text-lg font-semibold mb-2 line-clamp-1">{data.name}</h3>
-        <div className="text-sm opacity-80">
-          {data.doc_num} files | {data.chunk_num} chunks
-        </div>
-        <div className="text-sm opacity-80">
-          Created {formatDate(data.create_time)}
+    <aside className="relative p-5 space-y-8">
+      <div className="flex gap-2.5 max-w-[200px] items-center">
+        <RAGFlowAvatar
+          avatar={data.avatar}
+          name={data.name}
+          className="size-16"
+        ></RAGFlowAvatar>
+        <div className=" text-text-sub-title text-xs space-y-1">
+          <h3 className="text-lg font-semibold line-clamp-1 text-text-title">
+            {data.name}
+          </h3>
+          <div className="flex justify-between">
+            <span>{data.doc_num} files</span>
+            <span>{formatBytes(data.size)}</span>
+          </div>
+          <div>Created {formatPureDate(data.create_time)}</div>
         </div>
       </div>
-      <div className="mt-4">
+
+      <div className="w-[200px] flex flex-col gap-5">
         {items.map((item, itemIdx) => {
           const active = '/' + pathName === item.key;
           return (
             <Button
               key={itemIdx}
               variant={active ? 'secondary' : 'ghost'}
-              className={cn('w-full justify-start gap-2.5 p-6 relative')}
+              className={cn(
+                'w-full justify-start gap-2.5 px-3 relative h-10 text-text-sub-title-invert',
+                {
+                  'bg-background-card': active,
+                  'text-text-title': active,
+                },
+              )}
               onClick={handleMenuClick(item.key)}
             >
-              <item.icon className="w-6 h-6" />
+              <item.icon className="size-4" />
               <span>{item.label}</span>
             </Button>
           );