封装公共组件，调整样式文件的布局，修改路由页面样式

app/components/ui/Pagination.tsx

@@ -1,5 +1,4 @@
 // app/components/ui/Pagination.tsx
-import React from 'react';
 
 interface PaginationProps {
   currentPage: number;
@@ -8,6 +7,8 @@ interface PaginationProps {
   onChange: (page: number) => void;
   onPageSizeChange?: (pageSize: number) => void;
   pageSizeOptions?: number[];
+  showTotal?: boolean;
+  showPageSizeChanger?: boolean;
 }
 
 export function Pagination({
@@ -16,7 +17,9 @@ export function Pagination({
   pageSize,
   onChange,
   onPageSizeChange,
-  pageSizeOptions = [10, 20, 50]
+  pageSizeOptions = [10, 20, 50],
+  showTotal = true,
+  showPageSizeChanger = true
 }: PaginationProps) {
   const totalPages = Math.ceil(total / pageSize);
   
@@ -51,19 +54,24 @@ export function Pagination({
   };
   
   return (
-    <div className="flex justify-between items-center p-4">
-      {onPageSizeChange && (
+    <div className="flex flex-wrap justify-between items-center p-4 gap-4">
+      {showTotal && (
         <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>
+          <span className="text-sm font-normal">共 {total} 条</span>
+          {onPageSizeChange && showPageSizeChanger && (
+            <div className="flex items-center ml-3">
+              <select 
+                className="form-select ant-pagination-options-size-changer" 
+                value={pageSize}
+                onChange={(e) => onPageSizeChange(Number(e.target.value))}
+                aria-label="每页显示条数"
+              >
+                {pageSizeOptions.map(size => (
+                  <option key={size} value={size}>{size} 条/页</option>
+                ))}
+              </select>
+            </div>
+          )}
         </div>
       )}