✨ feat(admin): 为权限和角色管理页面添加分页和搜索功能

- 权限管理页面:
  - 添加分页功能，支持页码和每页条数调整
  - 实现按名称、编码或描述搜索权限
  - 增加权限类型筛选功能

- 角色管理页面:
  - 添加分页功能，支持页码和每页条数调整
  - 实现按角色名称搜索功能
  - 优化数据加载逻辑，支持分页参数传递

- 统一处理分页和搜索状态，优化用户体验

src/client/admin/pages/Permissions.tsx

@@ -19,6 +19,13 @@ const Permissions: React.FC = () => {
   const [modalVisible, setModalVisible] = useState(false);
   const [editingPermission, setEditingPermission] = useState<PermissionItem | null>(null);
   const [form] = Form.useForm();
+  const [pagination, setPagination] = useState({
+    current: 1,
+    pageSize: 10,
+    total: 0
+  });
+  const [searchKeyword, setSearchKeyword] = useState('');
+  const [searchType, setSearchType] = useState<string | undefined>();
 
   // 权限类型映射
   const permissionTypeMap = {
@@ -28,13 +35,25 @@ const Permissions: React.FC = () => {
   };
 
   // 获取权限列表
-  const fetchPermissions = async () => {
+  const fetchPermissions = async (params?: { page?: number; pageSize?: number; keyword?: string; type?: string }) => {
     setLoading(true);
     try {
-      const response = await permissionClient.$get({ query: {} });
+      const response = await permissionClient.$get({
+        query: {
+          page: params?.page || 1,
+          pageSize: params?.pageSize || 10,
+          keyword: params?.keyword || undefined,
+          filters: params?.type ? JSON.stringify({ type: params.type }) : undefined
+        }
+      });
       if (response.status === 200) {
         const data = await response.json();
         setPermissions(data.data);
+        setPagination({
+          current: data.pagination.current,
+          pageSize: data.pagination.pageSize,
+          total: data.pagination.total
+        });
       }
     } catch (error) {
       message.error('获取权限列表失败');
@@ -47,6 +66,38 @@ const Permissions: React.FC = () => {
     fetchPermissions();
   }, []);
 
+  // 处理表格分页变化
+  const handleTableChange = (newPagination: any) => {
+    fetchPermissions({
+      page: newPagination.current,
+      pageSize: newPagination.pageSize,
+      keyword: searchKeyword,
+      type: searchType
+    });
+  };
+
+  // 处理搜索
+  const handleSearch = () => {
+    setPagination(prev => ({ ...prev, current: 1 }));
+    fetchPermissions({
+      page: 1,
+      pageSize: pagination.pageSize,
+      keyword: searchKeyword,
+      type: searchType
+    });
+  };
+
+  // 重置搜索
+  const handleReset = () => {
+    setSearchKeyword('');
+    setSearchType(undefined);
+    setPagination(prev => ({ ...prev, current: 1 }));
+    fetchPermissions({
+      page: 1,
+      pageSize: pagination.pageSize
+    });
+  };
+
   // 打开编辑模态框
   const handleEdit = (record: PermissionItem) => {
     setEditingPermission(record);
@@ -193,11 +244,38 @@ const Permissions: React.FC = () => {
       <Card
         title="权限管理"
         extra={
-          <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
-            新建权限
-          </Button>
+          <Space>
+            <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
+              新建权限
+            </Button>
+          </Space>
         }
       >
+        <div className="mb-4 flex gap-4">
+          <Input.Search
+            placeholder="搜索权限名称、编码或描述"
+            allowClear
+            value={searchKeyword}
+            onChange={(e) => setSearchKeyword(e.target.value)}
+            onSearch={handleSearch}
+            style={{ width: 300 }}
+          />
+          <Select
+            placeholder="按类型筛选"
+            allowClear
+            value={searchType}
+            onChange={setSearchType}
+            style={{ width: 150 }}
+            onSelect={handleSearch}
+            onClear={handleReset}
+          >
+            <Option value="module">模块权限</Option>
+            <Option value="operation">操作权限</Option>
+            <Option value="data">数据权限</Option>
+          </Select>
+          <Button onClick={handleReset}>重置</Button>
+        </div>
+        
         <Table
           columns={columns}
           dataSource={permissions}
@@ -205,10 +283,12 @@ const Permissions: React.FC = () => {
           rowKey="id"
           scroll={{ x: 1200 }}
           pagination={{
+            ...pagination,
             showSizeChanger: true,
             showQuickJumper: true,
             showTotal: (total: number) => `共 ${total} 条记录`,
           }}
+          onChange={handleTableChange}
         />
       </Card>
 

src/client/admin/pages/Roles.tsx

@@ -17,14 +17,19 @@ type PermissionListResponse = InferResponseType<typeof permissionClient.$get, 20
 type PermissionItem = PermissionListResponse['data'][0];
 
 // React Query hooks
-const useRoles = () => {
+const useRoles = (params?: { page?: number; pageSize?: number; keyword?: string }) => {
   return useQuery({
-    queryKey: ['roles'],
+    queryKey: ['roles', params],
     queryFn: async () => {
-      const response = await roleClient.$get({ query: {} });
+      const response = await roleClient.$get({
+        query: {
+          page: params?.page || 1,
+          pageSize: params?.pageSize || 10,
+          keyword: params?.keyword || undefined
+        }
+      });
       if (!response.ok) throw new Error('获取角色列表失败');
-      const data = await response.json();
-      return data.data;
+      return response.json();
     },
   });
 };
@@ -144,18 +149,41 @@ const useUpdateRolePermissions = () => {
 };
 
 const Roles: React.FC = () => {
-  const queryClient = useQueryClient();
-  const [modalVisible, setModalVisible] = useState(false);
-  const [permissionModalVisible, setPermissionModalVisible] = useState(false);
-  const [editingRole, setEditingRole] = useState<RoleItem | null>(null);
-  const [selectedRole, setSelectedRole] = useState<RoleItem | null>(null);
-  const [form] = Form.useForm();
-  const [selectedPermissionIds, setSelectedPermissionIds] = useState<number[]>([]);
-
-  // React Query hooks
-  const { data: roles = [], isLoading: rolesLoading } = useRoles();
-  const { data: permissions = [], isLoading: permissionsLoading } = usePermissions();
-  const { data: rolePermissions = [], isLoading: rolePermissionsLoading } = useRolePermissions(selectedRole?.id ?? null);
+const queryClient = useQueryClient();
+const [modalVisible, setModalVisible] = useState(false);
+const [permissionModalVisible, setPermissionModalVisible] = useState(false);
+const [editingRole, setEditingRole] = useState<RoleItem | null>(null);
+const [selectedRole, setSelectedRole] = useState<RoleItem | null>(null);
+const [form] = Form.useForm();
+const [selectedPermissionIds, setSelectedPermissionIds] = useState<number[]>([]);
+const [searchKeyword, setSearchKeyword] = useState('');
+const [pagination, setPagination] = useState({
+  current: 1,
+  pageSize: 10,
+  total: 0
+});
+
+// React Query hooks
+const { data: rolesData, isLoading: rolesLoading } = useRoles({
+  page: pagination.current,
+  pageSize: pagination.pageSize,
+  keyword: searchKeyword
+});
+const roles = rolesData?.data || [];
+const { data: permissions = [], isLoading: permissionsLoading } = usePermissions();
+const { data: rolePermissions = [], isLoading: rolePermissionsLoading } = useRolePermissions(selectedRole?.id ?? null);
+
+// 更新分页信息
+React.useEffect(() => {
+  if (rolesData?.pagination) {
+    setPagination(prev => ({
+      ...prev,
+      current: rolesData.pagination.current,
+      pageSize: rolesData.pagination.pageSize,
+      total: rolesData.pagination.total
+    }));
+  }
+}, [rolesData?.pagination]);
 
   // Mutations
   const createRoleMutation = useCreateRole();
@@ -208,6 +236,27 @@ const Roles: React.FC = () => {
     });
   };
 
+  // 处理表格分页变化
+  const handleTableChange = (newPagination: any) => {
+    setPagination(prev => ({
+      ...prev,
+      current: newPagination.current,
+      pageSize: newPagination.pageSize
+    }));
+  };
+
+  // 处理搜索
+  const handleSearch = (value: string) => {
+    setSearchKeyword(value);
+    setPagination(prev => ({ ...prev, current: 1 }));
+  };
+
+  // 重置搜索
+  const handleReset = () => {
+    setSearchKeyword('');
+    setPagination(prev => ({ ...prev, current: 1 }));
+  };
+
   // 保存角色权限
   const handleSavePermissions = () => {
     if (!selectedRole) return;