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
-              key={x}
-              className={cn({
-                ['bg-background-header-bar rounded-md text-text-title']:
-                  currentPage === x,
-              })}
-            >
-              <PaginationLink onClick={handlePageChange(x)} className="size-8">
-                {x}
-              </PaginationLink>
-            </PaginationItem>
-          ))}
-          <PaginationItem>
-            <PaginationEllipsis />
-          </PaginationItem>
+
+          {displayedPages.map((page, index) =>
+            page === -1 ? (
+              <PaginationItem key={`ellipsis-${index}`}>
+                <PaginationEllipsis />
+              </PaginationItem>
+            ) : (
+              <PaginationItem
+                key={page}
+                className={cn({
+                  ['bg-background-header-bar rounded-md text-text-title']:
+                    currentPage === page,
+                })}
+              >
+                <PaginationLink
+                  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>
+  );
+};