完成评查点分组列表和评查点列表的页面，封装部分组件，重新构造样式文件结构

2025-03-26 18:39:42 +08:00
parent 97ccf5a077
commit d9b9ce4676
34 changed files with 3281 additions and 3777 deletions
@@ -0,0 +1,103 @@
+// app/components/ui/Pagination.tsx
+import React from 'react';
+
+interface PaginationProps {
+  currentPage: number;
+  total: number;
+  pageSize: number;
+  onChange: (page: number) => void;
+  onPageSizeChange?: (pageSize: number) => void;
+  pageSizeOptions?: number[];
+}
+
+export function Pagination({
+  currentPage,
+  total,
+  pageSize,
+  onChange,
+  onPageSizeChange,
+  pageSizeOptions = [10, 20, 50]
+}: PaginationProps) {
+  const totalPages = Math.ceil(total / pageSize);
+  
+  // 生成页码数组
+  const getPageNumbers = () => {
+    const pages = [];
+    const maxVisiblePages = 5;
+    
+    if (totalPages <= maxVisiblePages) {
+      // 总页数小于等于最大可见页数，显示所有页码
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else if (currentPage <= 3) {
+      // 当前页靠近开始
+      for (let i = 1; i <= maxVisiblePages; i++) {
+        pages.push(i);
+      }
+    } else if (currentPage >= totalPages - 2) {
+      // 当前页靠近结尾
+      for (let i = totalPages - maxVisiblePages + 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      // 当前页在中间
+      for (let i = currentPage - 2; i <= currentPage + 2; i++) {
+        pages.push(i);
+      }
+    }
+    
+    return pages;
+  };
+  
+  return (
+    <div className="flex justify-between items-center p-4">
+      {onPageSizeChange && (
+        <div className="ant-pagination-options">
+          <span className="text-sm mr-2">共 {total} 条</span>
+          <select 
+            className="form-select ant-pagination-options-size-changer" 
+            value={pageSize}
+            onChange={(e) => onPageSizeChange(Number(e.target.value))}
+          >
+            {pageSizeOptions.map(size => (
+              <option key={size} value={size}>{size} 条/页</option>
+            ))}
+          </select>
+        </div>
+      )}
+      
+      <div className="ant-pagination">
+        <button 
+          className={`ant-pagination-item ant-pagination-prev ${currentPage <= 1 ? 'ant-pagination-disabled' : ''}`}
+          onClick={() => currentPage > 1 && onChange(currentPage - 1)}
+          disabled={currentPage <= 1}
+          aria-label="上一页"
+        >
+          <i className="ri-arrow-left-s-line"></i>
+        </button>
+        
+        {getPageNumbers().map(page => (
+          <button
+            key={page}
+            className={`ant-pagination-item ${page === currentPage ? 'ant-pagination-item-active' : ''}`}
+            onClick={() => onChange(page)}
+            aria-label={`第${page}页`}
+            aria-current={page === currentPage ? 'page' : undefined}
+          >
+            {page}
+          </button>
+        ))}
+        
+        <button 
+          className={`ant-pagination-item ant-pagination-next ${currentPage >= totalPages ? 'ant-pagination-disabled' : ''}`}
+          onClick={() => currentPage < totalPages && onChange(currentPage + 1)}
+          disabled={currentPage >= totalPages}
+          aria-label="下一页"
+        >
+          <i className="ri-arrow-right-s-line"></i>
+        </button>
+      </div>
+    </div>
+  );
+}