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/agent/index.tsx

@@ -0,0 +1,3 @@
+export default function Agent() {
+  return <div>Agent</div>;
+}

web/src/pages/file-manager/connect-to-knowledge-modal/index.tsx

@@ -1,5 +1,5 @@
 import { useTranslate } from '@/hooks/common-hooks';
-import { useNextFetchKnowledgeList } from '@/hooks/knowledge-hooks';
+import { useFetchKnowledgeList } from '@/hooks/knowledge-hooks';
 import { IModalProps } from '@/interfaces/common';
 import { filterOptionsByInput } from '@/utils/common-util';
 import { Form, Modal, Select } from 'antd';
@@ -13,7 +13,7 @@ const ConnectToKnowledgeModal = ({
   loading,
 }: IModalProps<string[]> & { initialValue: string[] }) => {
   const [form] = Form.useForm();
-  const { list } = useNextFetchKnowledgeList();
+  const { list } = useFetchKnowledgeList();
   const { t } = useTranslate('fileManager');
 
   const options = list?.map((item) => ({

web/src/pages/flow/canvas/node/retrieval-node.tsx

@@ -1,4 +1,4 @@
-import { useNextFetchKnowledgeList } from '@/hooks/knowledge-hooks';
+import { useFetchKnowledgeList } from '@/hooks/knowledge-hooks';
 import { UserOutlined } from '@ant-design/icons';
 import { Avatar, Flex } from 'antd';
 import classNames from 'classnames';
@@ -17,7 +17,7 @@ export function RetrievalNode({
   selected,
 }: NodeProps<NodeData>) {
   const knowledgeBaseIds: string[] = get(data, 'form.kb_ids', []);
-  const { list: knowledgeList } = useNextFetchKnowledgeList(true);
+  const { list: knowledgeList } = useFetchKnowledgeList(true);
   const knowledgeBases = useMemo(() => {
     return knowledgeBaseIds.map((x) => {
       const item = knowledgeList.find((y) => x === y.id);

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>

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

@@ -0,0 +1,3 @@
+export default function Chat() {
+  return <div>chat</div>;
+}

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

@@ -0,0 +1,3 @@
+export default function Search() {
+  return <div>Search</div>;
+}

web/src/pages/search/index.tsx

@@ -6,7 +6,7 @@ import { useClickDrawer } from '@/components/pdf-drawer/hooks';
 import RetrievalDocuments from '@/components/retrieval-documents';
 import SvgIcon from '@/components/svg-icon';
 import {
-  useNextFetchKnowledgeList,
+  useFetchKnowledgeList,
   useSelectTestingResult,
 } from '@/hooks/knowledge-hooks';
 import { useGetPaginationWithRouter } from '@/hooks/logic-hooks';
@@ -45,7 +45,7 @@ const SearchPage = () => {
   const { t } = useTranslation();
   const [checkedList, setCheckedList] = useState<string[]>([]);
   const { chunks, total } = useSelectTestingResult();
-  const { list: knowledgeList } = useNextFetchKnowledgeList();
+  const { list: knowledgeList } = useFetchKnowledgeList();
   const checkedWithoutEmbeddingIdList = useMemo(() => {
     return checkedList.filter((x) => knowledgeList.some((y) => y.id === x));
   }, [checkedList, knowledgeList]);

web/src/pages/search/sidebar.tsx

@@ -1,4 +1,4 @@
-import { useNextFetchKnowledgeList } from '@/hooks/knowledge-hooks';
+import { useFetchKnowledgeList } from '@/hooks/knowledge-hooks';
 import { UserOutlined } from '@ant-design/icons';
 import type { TreeDataNode, TreeProps } from 'antd';
 import { Avatar, Layout, Space, Spin, Tree, Typography } from 'antd';
@@ -27,7 +27,7 @@ const SearchSidebar = ({
   checkedList,
   setCheckedList,
 }: IProps) => {
-  const { list, loading } = useNextFetchKnowledgeList();
+  const { list, loading } = useFetchKnowledgeList();
 
   const groupedList = useMemo(() => {
     return list.reduce((pre: TreeDataNode[], cur) => {