Feat: Bind data to the agent module of the home page #3221 (#7385)

### What problem does this PR solve?

Feat: Bind data to the agent module of the home page #3221

### Type of change


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

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

@@ -26,17 +26,21 @@ export function DatasetCard({
   return (
     <Card
       key={dataset.id}
-      className="bg-colors-background-inverse-weak flex-1"
+      className="bg-colors-background-inverse-weak  w-40"
       onClick={navigateToDataset(dataset.id)}
     >
-      <CardContent className="p-4">
-        <section className="flex justify-between mb-4">
-          <div className="flex  gap-2">
-            <Avatar className="w-[70px] h-[70px] rounded-lg">
+      <CardContent className="p-2.5 pt-1">
+        <section className="flex justify-between mb-2">
+          <div className="flex gap-2 items-center">
+            <Avatar className="size-6 rounded-lg">
               <AvatarImage src={dataset.avatar} />
-              <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              <AvatarFallback className="rounded-lg ">CN</AvatarFallback>
             </Avatar>
-            {owner && <Badge className="h-5">{owner}</Badge>}
+            {owner && (
+              <Badge className="h-5 rounded-sm px-1 bg-background-badge text-text-badge">
+                {owner}
+              </Badge>
+            )}
           </div>
           <DatasetDropdown
             showDatasetRenameModal={showDatasetRenameModal}
@@ -48,13 +52,13 @@ export function DatasetCard({
           </DatasetDropdown>
         </section>
         <div className="flex justify-between items-end">
-          <div>
+          <div className="w-full">
             <h3 className="text-lg font-semibold mb-2 line-clamp-1">
               {dataset.name}
             </h3>
-            <p className="text-sm opacity-80">{dataset.doc_num} files</p>
-            <p className="text-sm opacity-80">
-              Created {formatDate(dataset.update_time)}
+            <p className="text-xs opacity-80">{dataset.doc_num} files</p>
+            <p className="text-xs opacity-80">
+              {formatDate(dataset.update_time)}
             </p>
           </div>
         </div>

web/src/pages/datasets/datasets-pagination.tsx

@@ -1,96 +0,0 @@
-import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from '@/components/ui/pagination';
-import { cn } from '@/lib/utils';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
-export type DatasetsPaginationType = {
-  showQuickJumper?: boolean;
-  onChange?(page: number, pageSize?: number): void;
-  total?: number;
-  current?: number;
-  pageSize?: number;
-};
-
-export function DatasetsPagination({
-  current = 1,
-  pageSize = 10,
-  total = 0,
-  onChange,
-}: DatasetsPaginationType) {
-  const [currentPage, setCurrentPage] = useState(1);
-
-  const pages = useMemo(() => {
-    const num = Math.ceil(total / pageSize);
-    console.log('🚀 ~ pages ~ num:', num);
-    return new Array(num).fill(0).map((_, idx) => idx + 1);
-  }, [pageSize, total]);
-
-  const handlePreviousPageChange = useCallback(() => {
-    setCurrentPage((page) => {
-      const previousPage = page - 1;
-      if (previousPage > 0) {
-        return previousPage;
-      }
-      return page;
-    });
-  }, []);
-
-  const handlePageChange = useCallback(
-    (page: number) => () => {
-      setCurrentPage(page);
-    },
-    [],
-  );
-
-  const handleNextPageChange = useCallback(() => {
-    setCurrentPage((page) => {
-      const nextPage = page + 1;
-      if (nextPage <= pages.length) {
-        return nextPage;
-      }
-      return page;
-    });
-  }, [pages.length]);
-
-  useEffect(() => {
-    setCurrentPage(current);
-  }, [current]);
-
-  useEffect(() => {
-    onChange?.(currentPage);
-  }, [currentPage, onChange]);
-
-  return (
-    <section className="flex  items-center justify-end">
-      <span className="mr-4">Total {total}</span>
-      <Pagination className="w-auto mx-0">
-        <PaginationContent>
-          <PaginationItem>
-            <PaginationPrevious onClick={handlePreviousPageChange} />
-          </PaginationItem>
-          {pages.map((x) => (
-            <PaginationItem
-              key={x}
-              className={cn({ ['bg-red-500']: currentPage === x })}
-            >
-              <PaginationLink onClick={handlePageChange(x)}>{x}</PaginationLink>
-            </PaginationItem>
-          ))}
-          <PaginationItem>
-            <PaginationEllipsis />
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationNext onClick={handleNextPageChange} />
-          </PaginationItem>
-        </PaginationContent>
-      </Pagination>
-    </section>
-  );
-}

web/src/pages/datasets/index.tsx

@@ -1,6 +1,7 @@
 import ListFilterBar from '@/components/list-filter-bar';
 import { RenameDialog } from '@/components/rename-dialog';
 import { Button } from '@/components/ui/button';
+import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
 import { useFetchNextKnowledgeListByPage } from '@/hooks/use-knowledge-request';
 import { pick } from 'lodash';
 import { Plus } from 'lucide-react';
@@ -8,7 +9,6 @@ import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DatasetCard } from './dataset-card';
 import { DatasetCreatingDialog } from './dataset-creating-dialog';
-import { DatasetsPagination } from './datasets-pagination';
 import { useSaveKnowledge } from './hooks';
 import { useRenameDataset } from './use-rename-dataset';
 import { useSelectOwners } from './use-select-owners';
@@ -53,7 +53,7 @@ export default function Datasets() {
   );
 
   return (
-    <section className="p-8 text-foreground">
+    <section className="py-8 text-foreground">
       <ListFilterBar
         title="Datasets"
         searchString={searchString}
@@ -61,13 +61,14 @@ export default function Datasets() {
         value={filterValue}
         filters={owners}
         onChange={handleFilterSubmit}
+        className="px-8"
       >
         <Button variant={'tertiary'} size={'sm'} onClick={showModal}>
           <Plus className="mr-2 h-4 w-4" />
           {t('knowledgeList.createKnowledgeBase')}
         </Button>
       </ListFilterBar>
-      <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">
+      <div className="flex flex-wrap gap-4 max-h-[78vh] overflow-auto px-8">
         {kbs.map((dataset) => {
           return (
             <DatasetCard
@@ -78,12 +79,12 @@ export default function Datasets() {
           );
         })}
       </div>
-      <div className="mt-8">
-        <DatasetsPagination
+      <div className="mt-8 px-8">
+        <RAGFlowPagination
           {...pick(pagination, 'current', 'pageSize')}
           total={total}
           onChange={handlePageChange}
-        ></DatasetsPagination>
+        ></RAGFlowPagination>
       </div>
       {visible && (
         <DatasetCreatingDialog