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/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