Fix: optimize the chunk result page (#8676)

### What problem does this PR solve?
fix: Create a new message component to replace the antd message
component, create a new Spin component to replace the antd Spin
component, optimize the original paging component style, and optimize
the chunk result page[
#3221](https://github.com/infiniflow/ragflow/issues/3221)

### Type of change

- [X] Bug Fix (non-breaking change which fixes an issue)

web/src/components/ui/message.ts

@@ -0,0 +1,29 @@
+import { toast } from 'sonner';
+
+const message = {
+  success: (msg: string) => {
+    toast.success(msg, {
+      position: 'top-center',
+      closeButton: false,
+    });
+  },
+  error: (msg: string) => {
+    toast.error(msg, {
+      position: 'top-center',
+      closeButton: false,
+    });
+  },
+  warning: (msg: string) => {
+    toast.warning(msg, {
+      position: 'top-center',
+      closeButton: false,
+    });
+  },
+  info: (msg: string) => {
+    toast.info(msg, {
+      position: 'top-center',
+      closeButton: false,
+    });
+  },
+};
+export default message;

web/src/components/ui/ragflow-pagination.tsx

@@ -97,30 +97,73 @@ export function RAGFlowPagination({
     setCurrentPageSize(pageSize.toString());
   }, [pageSize]);
 
+  // Generates an array of page numbers to display
+  const displayedPages = useMemo(() => {
+    const totalPages = pages.length;
+    const maxDisplayedPages = 5;
+
+    if (totalPages <= maxDisplayedPages) {
+      return pages;
+    }
+
+    const left = Math.max(2, currentPage - 2);
+    const right = Math.min(totalPages - 1, currentPage + 2);
+
+    const newPages = [];
+
+    newPages.push(1);
+
+    if (left > 2) {
+      newPages.push(-1); // Indicates an ellipsis
+    }
+
+    for (let i = left; i <= right; i++) {
+      newPages.push(i);
+    }
+
+    if (right < totalPages - 1) {
+      newPages.push(-1);
+    }
+
+    if (totalPages > 1) {
+      newPages.push(totalPages);
+    }
+
+    return newPages;
+  }, [pages, currentPage]);
+
   return (
-    <section className="flex items-center justify-end text-text-sub-title-invert ">
+    <section className="flex items-center justify-end text-text-sub-title-invert">
       <span className="mr-4">Total {total}</span>
       <Pagination className="w-auto mx-0 mr-4">
         <PaginationContent>
           <PaginationItem>
             <PaginationPrevious onClick={handlePreviousPageChange} />
           </PaginationItem>
-          {pages.map((x) => (
+
-            <PaginationItem
+          {displayedPages.map((page, index) =>
-              key={x}
+            page === -1 ? (
-              className={cn({
+              <PaginationItem key={`ellipsis-${index}`}>
-                ['bg-background-header-bar rounded-md text-text-title']:
+                <PaginationEllipsis />
-                  currentPage === x,
+              </PaginationItem>
-              })}
+            ) : (
-            >
+              <PaginationItem
-              <PaginationLink onClick={handlePageChange(x)} className="size-8">
+                key={page}
-                {x}
+                className={cn({
-              </PaginationLink>
+                  ['bg-background-header-bar rounded-md text-text-title']:
-            </PaginationItem>
+                    currentPage === page,
-          ))}
+                })}
-          <PaginationItem>
+              >
-            <PaginationEllipsis />
+                <PaginationLink
-          </PaginationItem>
+                  onClick={handlePageChange(page)}
+                  className="size-8"
+                >
+                  {page}
+                </PaginationLink>
+              </PaginationItem>
+            ),
+          )}
+
           <PaginationItem>
             <PaginationNext onClick={handleNextPageChange} />
           </PaginationItem>

web/src/components/ui/spin.tsx

@@ -0,0 +1,47 @@
+import { cn } from '@/lib/utils';
+import React from 'react';
+
+interface SpinProps {
+  spinning?: boolean;
+  size?: 'small' | 'default' | 'large';
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const sizeClasses = {
+  small: 'w-4 h-4',
+  default: 'w-6 h-6',
+  large: 'w-8 h-8',
+};
+
+export const Spin: React.FC<SpinProps> = ({
+  spinning = true,
+  size = 'default',
+  className,
+  children,
+}) => {
+  return (
+    <div
+      className={cn(
+        'relative',
+        {
+          'after:content-[""] after:absolute after:inset-0 after:z-10 after:bg-black/40 after:transition-all after:duration-300':
+            spinning,
+        },
+        className,
+      )}
+    >
+      {spinning && (
+        <div className="absolute inset-0 z-10 flex items-center justify-center bg-black/30 ">
+          <div
+            className={cn(
+              'rounded-full border-muted-foreground border-2 border-t-transparent animate-spin',
+              sizeClasses[size],
+            )}
+          ></div>
+        </div>
+      )}
+      {children}
+    </div>
+  );
+};

web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.tsx

@@ -1,6 +1,4 @@
 import { useFetchNextChunkList, useSwitchChunk } from '@/hooks/chunk-hooks';
-import type { PaginationProps } from 'antd';
-import { Flex, Pagination, Space, Spin, message } from 'antd';
 import classNames from 'classnames';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -19,6 +17,12 @@ import ChunkResultBar from './components/chunk-result-bar';
 import CheckboxSets from './components/chunk-result-bar/checkbox-sets';
 import DocumentHeader from './components/document-preview/document-header';
 
+import message from '@/components/ui/message';
+import {
+  RAGFlowPagination,
+  RAGFlowPaginationType,
+} from '@/components/ui/ragflow-pagination';
+import { Spin } from '@/components/ui/spin';
 import styles from './index.less';
 
 const Chunk = () => {
@@ -49,7 +53,7 @@ const Chunk = () => {
     documentId,
   } = useUpdateChunk();
 
-  const onPaginationChange: PaginationProps['onShowSizeChange'] = (
+  const onPaginationChange: RAGFlowPaginationType['onChange'] = (
     page,
     size,
   ) => {
@@ -123,21 +127,8 @@ const Chunk = () => {
   return (
     <>
       <div className={styles.chunkPage}>
-        {/* <ChunkToolBar
+        <div className="flex flex-1 gap-8">
-          selectAllChunk={selectAllChunk}
+          <div className="w-2/5">
-          createChunk={showChunkUpdatingModal}
-          removeChunk={handleRemoveChunk}
-          checked={selectedChunkIds.length === data.length}
-          switchChunk={handleSwitchChunk}
-          changeChunkTextMode={changeChunkTextMode}
-          searchString={searchString}
-          handleInputChange={handleInputChange}
-          available={available}
-          handleSetAvailable={handleSetAvailable}
-        ></ChunkToolBar> */}
-        {/* <Divider></Divider> */}
-        <Flex flex={1} gap={'middle'}>
-          <div className="w-[40%]">
             <div className="h-[100px] flex flex-col justify-end pb-[5px]">
               <DocumentHeader {...documentInfo} />
             </div>
@@ -150,9 +141,11 @@ const Chunk = () => {
               </section>
             )}
           </div>
-          <Flex
+          <div
-            vertical
+            className={classNames(
-            className={isPdf ? styles.pagePdfWrapper : styles.pageWrapper}
+              { [styles.pagePdfWrapper]: isPdf },
+              'flex flex-col w-3/5',
+            )}
           >
             <Spin spinning={loading} className={styles.spin} size="large">
               <div className="h-[100px] flex flex-col justify-end pb-[5px]">
@@ -180,12 +173,14 @@ const Chunk = () => {
                   />
                 </div>
                 <div className={styles.pageContent}>
-                  <Space
+                  <div
-                    direction="vertical"
+                    className={classNames(
-                    size={'middle'}
+                      styles.chunkContainer,
-                    className={classNames(styles.chunkContainer, {
+                      {
-                      [styles.chunkOtherContainer]: !isPdf,
+                        [styles.chunkOtherContainer]: !isPdf,
-                    })}
+                      },
+                      'flex flex-col gap-4',
+                    )}
                   >
                     {data.map((item) => (
                       <ChunkCard
@@ -202,20 +197,22 @@ const Chunk = () => {
                         textMode={textMode}
                       ></ChunkCard>
                     ))}
-                  </Space>
+                  </div>
                 </div>
               </div>
             </Spin>
             <div className={styles.pageFooter}>
-              <Pagination
+              <RAGFlowPagination
-                {...pagination}
+                pageSize={pagination.pageSize}
+                current={pagination.current}
                 total={total}
-                size={'small'}
+                onChange={(page, pageSize) => {
-                onChange={onPaginationChange}
+                  onPaginationChange(page, pageSize);
-              />
+                }}
+              ></RAGFlowPagination>
             </div>
-          </Flex>
+          </div>
-        </Flex>
+        </div>
       </div>
       {chunkUpdatingVisible && (
         <CreatingModal