Feat: Bind the route to the navigation bar in the head #3221 (#3863)

### What problem does this PR solve?
Feat: Bind the route to the navigation bar in the head #3221

### Type of change


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

web/src/pages/home/datasets.tsx

@@ -1,82 +1,78 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
-import { ChevronRight, MoreHorizontal } from 'lucide-react';
-
-const datasets = [
-  {
-    id: 1,
-    title: 'Legal knowledge base',
-    files: '1,242 files',
-    size: '152 MB',
-    created: '12.02.2024',
-    image: 'https://github.com/shadcn.png',
-  },
-  {
-    id: 2,
-    title: 'HR knowledge base',
-    files: '1,242 files',
-    size: '152 MB',
-    created: '12.02.2024',
-    image: 'https://github.com/shadcn.png',
-  },
-  {
-    id: 3,
-    title: 'IT knowledge base',
-    files: '1,242 files',
-    size: '152 MB',
-    created: '12.02.2024',
-    image: 'https://github.com/shadcn.png',
-  },
-  {
-    id: 4,
-    title: 'Legal knowledge base',
-    files: '1,242 files',
-    size: '152 MB',
-    created: '12.02.2024',
-    image: 'https://github.com/shadcn.png',
-  },
-];
+import { CardSkeleton } from '@/components/ui/skeleton';
+import { useFetchKnowledgeList } from '@/hooks/knowledge-hooks';
+import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
+import { formatDate } from '@/utils/date';
+import { ChevronRight, Trash2 } from 'lucide-react';
 
 export function Datasets() {
+  const { navigateToDatasetList, navigateToDataset } = useNavigatePage();
+  const { list, loading } = useFetchKnowledgeList();
+
   return (
     <section>
       <h2 className="text-2xl font-bold mb-6">Datasets</h2>
       <div className="flex gap-6">
-        {datasets.map((dataset) => (
-          <Card
-            key={dataset.id}
-            className="bg-colors-background-inverse-weak flex-1 border-colors-outline-neutral-standard"
-          >
-            <CardContent className="p-4">
-              <div className="flex justify-between mb-4">
-                <div
-                  className="w-[70px] h-[70px] rounded-xl bg-cover"
-                  style={{ backgroundImage: `url(${dataset.image})` }}
-                />
-                <Button variant="ghost" size="icon">
-                  <MoreHorizontal className="h-6 w-6" />
-                </Button>
-              </div>
-              <div className="flex justify-between items-end">
-                <div>
-                  <h3 className="text-lg font-semibold mb-2">
-                    {dataset.title}
-                  </h3>
-                  <p className="text-sm opacity-80">
-                    {dataset.files} | {dataset.size}
-                  </p>
-                  <p className="text-sm opacity-80">
-                    Created {dataset.created}
-                  </p>
-                </div>
-                <Button variant="icon" size="icon">
-                  <ChevronRight className="h-6 w-6" />
-                </Button>
-              </div>
-            </CardContent>
-          </Card>
-        ))}
-        <Button className="h-auto " variant={'tertiary'}>
+        {loading ? (
+          <div className="flex-1">
+            <CardSkeleton />
+          </div>
+        ) : (
+          <div className="flex gap-4 flex-1">
+            {list.slice(0, 3).map((dataset) => (
+              <Card
+                key={dataset.id}
+                className="bg-colors-background-inverse-weak flex-1 border-colors-outline-neutral-standard"
+              >
+                <CardContent className="p-4">
+                  <div className="flex justify-between mb-4">
+                    {dataset.avatar ? (
+                      <div
+                        className="w-[70px] h-[70px] rounded-xl bg-cover"
+                        style={{ backgroundImage: `url(${dataset.avatar})` }}
+                      />
+                    ) : (
+                      <Avatar>
+                        <AvatarImage src="https://github.com/shadcn.png" />
+                        <AvatarFallback>CN</AvatarFallback>
+                      </Avatar>
+                    )}
+                    <Button variant="ghost" size="icon">
+                      <Trash2 />
+                    </Button>
+                  </div>
+                  <div className="flex justify-between items-end">
+                    <div>
+                      <h3 className="text-lg font-semibold mb-2">
+                        {dataset.name}
+                      </h3>
+                      <div className="text-sm opacity-80">
+                        {dataset.doc_num} files
+                      </div>
+                      <p className="text-sm opacity-80">
+                        Created {formatDate(dataset.update_time)}
+                      </p>
+                    </div>
+                    <Button
+                      variant="icon"
+                      size="icon"
+                      onClick={navigateToDataset}
+                    >
+                      <ChevronRight className="h-6 w-6" />
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        )}
+        <Button
+          className="h-auto "
+          variant={'tertiary'}
+          onClick={navigateToDatasetList}
+        >
           See all
         </Button>
       </div>