refactor: 重构分页逻辑并统一代码风格

1. 新增分页数据处理hook和工具函数，实现分页状态统一管理
2. 替换所有页面的表格分页配置为标准current/page模式
3. 统一项目内字符串引号风格为双引号
4. 调整权限树面板样式和布局代码格式

src/Role/index.tsx

@@ -1,117 +1,147 @@
-import { useState } from 'react';
-import { Button, Card, Form, Input, Message, Modal, Space, Table, Tag } from '@arco-design/web-react';
-import { IconPlus } from '@arco-design/web-react/icon';
-import type { Permission, Role } from '../api/types';
-import { api } from '../api/client';
-import { usePageData } from '../hooks/usePageData';
-import { PermissionTreePicker } from './PermissionTreePicker';
-import './index.css';
+import { useState } from "react";
+import { Button, Card, Form, Input, Message, Modal, Space, Table, Tag } from "@arco-design/web-react";
+import { IconPlus } from "@arco-design/web-react/icon";
+import type { Permission, Role } from "../api/types";
+import { api } from "../api/client";
+import { usePageData } from "../hooks/usePageData";
+import { PermissionTreePicker } from "./PermissionTreePicker";
+import "./index.css";
 
 function RolesPage() {
-  const { data, loading, reload } = usePageData<Role>('/api/admin/v1/roles');
-  const permissions = usePageData<Permission>('/api/admin/v1/permissions');
-  const [createForm] = Form.useForm();
-  const [createVisible, setCreateVisible] = useState(false);
-  const [creatingRole, setCreatingRole] = useState(false);
-  const [createPermissionIds, setCreatePermissionIds] = useState<number[]>([]);
-  const [assignmentVisible, setAssignmentVisible] = useState(false);
-  const [selectedRole, setSelectedRole] = useState<Role | null>(null);
-  const [selectedPermissionIds, setSelectedPermissionIds] = useState<number[]>([]);
-  const [savingPermissions, setSavingPermissions] = useState(false);
+    const { data, loading, reload, changePage } = usePageData<Role>("/api/admin/v1/roles");
+    const permissions = usePageData<Permission>("/api/admin/v1/permissions");
+    const [createForm] = Form.useForm();
+    const [createVisible, setCreateVisible] = useState(false);
+    const [creatingRole, setCreatingRole] = useState(false);
+    const [createPermissionIds, setCreatePermissionIds] = useState<number[]>([]);
+    const [assignmentVisible, setAssignmentVisible] = useState(false);
+    const [selectedRole, setSelectedRole] = useState<Role | null>(null);
+    const [selectedPermissionIds, setSelectedPermissionIds] = useState<number[]>([]);
+    const [savingPermissions, setSavingPermissions] = useState(false);
 
-  const openCreateRole = () => {
-    createForm.resetFields();
-    setCreatePermissionIds([]);
-    setCreateVisible(true);
-  };
+    const openCreateRole = () => {
+        createForm.resetFields();
+        setCreatePermissionIds([]);
+        setCreateVisible(true);
+    };
 
-  const createRole = async (values: { code: string; name: string; description?: string }) => {
-    setCreatingRole(true);
-    try {
-      await api.post('/api/admin/v1/roles', {
-        ...values,
-        permissionIds: createPermissionIds,
-      });
-      Message.success('角色创建成功');
-      setCreateVisible(false);
-      await reload();
-    } finally {
-      setCreatingRole(false);
-    }
-  };
+    const createRole = async (values: { code: string; name: string; description?: string }) => {
+        setCreatingRole(true);
+        try {
+            await api.post("/api/admin/v1/roles", {
+                ...values,
+                permissionIds: createPermissionIds,
+            });
+            Message.success("角色创建成功");
+            setCreateVisible(false);
+            await reload();
+        } finally {
+            setCreatingRole(false);
+        }
+    };
 
-  const openAssignPermissions = (role: Role) => {
-    setSelectedRole(role);
-    setSelectedPermissionIds(role.permissions.map((permission) => permission.id));
-    setAssignmentVisible(true);
-  };
+    const openAssignPermissions = (role: Role) => {
+        setSelectedRole(role);
+        setSelectedPermissionIds(role.permissions.map((permission) => permission.id));
+        setAssignmentVisible(true);
+    };
 
-  const saveRolePermissions = async () => {
-    if (!selectedRole) {
-      return;
-    }
-    setSavingPermissions(true);
-    try {
-      await api.patch(`/api/admin/v1/roles/${selectedRole.id}/permissions`, {
-        permissionIds: selectedPermissionIds,
-      });
-      Message.success('角色权限已更新');
-      setAssignmentVisible(false);
-      await reload();
-    } finally {
-      setSavingPermissions(false);
-    }
-  };
+    const saveRolePermissions = async () => {
+        if (!selectedRole) {
+            return;
+        }
+        setSavingPermissions(true);
+        try {
+            await api.patch(`/api/admin/v1/roles/${selectedRole.id}/permissions`, {
+                permissionIds: selectedPermissionIds,
+            });
+            Message.success("角色权限已更新");
+            setAssignmentVisible(false);
+            await reload();
+        } finally {
+            setSavingPermissions(false);
+        }
+    };
 
-  return (
-    <Card className="section-card" title="角色管理" extra={<Button type="primary" icon={<IconPlus />} onClick={openCreateRole}>新增角色</Button>}>
-      <Table rowKey="id" loading={loading} data={data.list} pagination={{ total: data.pagination.total, pageSize: data.pagination.pageSize }} columns={[
-        { title: 'ID', dataIndex: 'id', width: 80 },
-        { title: '编码', dataIndex: 'code' },
-        { title: '名称', dataIndex: 'name' },
-        { title: '权限列表', render: (_, record: Role) => <Space wrap>{record.permissions.map((item) => <Tag key={item.id}>{item.name}</Tag>)}</Space> },
-        { title: '操作', width: 140, render: (_, record: Role) => <Button size="small" onClick={() => openAssignPermissions(record)}>分配权限</Button> },
-      ]} />
-      <Modal title="新增角色" visible={createVisible} onCancel={() => setCreateVisible(false)} footer={null}>
-        <Form form={createForm} layout="vertical" onSubmit={createRole}>
-          <Form.Item label="角色编码" field="code" rules={[{ required: true }]}>
-            <Input placeholder="请输入角色编码，例如 drama_operator" />
-          </Form.Item>
-          <div className="form-help">角色的唯一标识，创建后不可修改</div>
-          <Form.Item label="角色名称" field="name" rules={[{ required: true }]}>
-            <Input placeholder="请输入角色名称" />
-          </Form.Item>
-          <Form.Item label="角色描述" field="description">
-            <Input.TextArea placeholder="请输入角色描述" autoSize={{ minRows: 2, maxRows: 4 }} />
-          </Form.Item>
-          <div className="form-label">权限设置</div>
-          <PermissionTreePicker
-            permissions={permissions.data.list}
-            value={createPermissionIds}
-            onChange={setCreatePermissionIds}
-          />
-          <div className="form-help">为角色分配系统权限，决定拥有此角色的用户可以进行的操作</div>
-          <div className="modal-actions">
-            <Button onClick={() => setCreateVisible(false)}>取消</Button>
-            <Button type="primary" htmlType="submit" loading={creatingRole}>创建</Button>
-          </div>
-        </Form>
-      </Modal>
-      <Modal
-        title={`分配权限${selectedRole ? ` - ${selectedRole.name}` : ''}`}
-        visible={assignmentVisible}
-        confirmLoading={savingPermissions}
-        onOk={saveRolePermissions}
-        onCancel={() => setAssignmentVisible(false)}
-      >
-        <PermissionTreePicker
-          permissions={permissions.data.list}
-          value={selectedPermissionIds}
-          onChange={setSelectedPermissionIds}
-        />
-      </Modal>
-    </Card>
-  );
+    return (
+        <Card
+            className="section-card"
+            title="角色管理"
+            extra={
+                <Button type="primary" icon={<IconPlus />} onClick={openCreateRole}>
+                    新增角色
+                </Button>
+            }
+        >
+            <Table
+                rowKey="id"
+                loading={loading}
+                data={data.list}
+                pagination={{
+                    current: data.pagination.page,
+                    total: data.pagination.total,
+                    pageSize: data.pagination.pageSize,
+                    onChange: changePage,
+                }}
+                columns={[
+                    { title: "ID", dataIndex: "id", width: 80 },
+                    { title: "编码", dataIndex: "code" },
+                    { title: "名称", dataIndex: "name" },
+                    {
+                        title: "权限列表",
+                        render: (_, record: Role) => (
+                            <Space wrap>
+                                {record.permissions.map((item) => (
+                                    <Tag key={item.id}>{item.name}</Tag>
+                                ))}
+                            </Space>
+                        ),
+                    },
+                    {
+                        title: "操作",
+                        width: 140,
+                        render: (_, record: Role) => (
+                            <Button size="small" onClick={() => openAssignPermissions(record)}>
+                                分配权限
+                            </Button>
+                        ),
+                    },
+                ]}
+            />
+            <Modal title="新增角色" visible={createVisible} onCancel={() => setCreateVisible(false)} footer={null}>
+                <Form form={createForm} layout="vertical" onSubmit={createRole}>
+                    <Form.Item label="角色编码" field="code" rules={[{ required: true }]}>
+                        <Input placeholder="请输入角色编码，例如 drama_operator" />
+                    </Form.Item>
+                    <div className="form-help">角色的唯一标识，创建后不可修改</div>
+                    <Form.Item label="角色名称" field="name" rules={[{ required: true }]}>
+                        <Input placeholder="请输入角色名称" />
+                    </Form.Item>
+                    <Form.Item label="角色描述" field="description">
+                        <Input.TextArea placeholder="请输入角色描述" autoSize={{ minRows: 2, maxRows: 4 }} />
+                    </Form.Item>
+                    <div className="form-label">权限设置</div>
+                    <PermissionTreePicker permissions={permissions.data.list} value={createPermissionIds} onChange={setCreatePermissionIds} />
+                    <div className="form-help">为角色分配系统权限，决定拥有此角色的用户可以进行的操作</div>
+                    <div className="modal-actions">
+                        <Button onClick={() => setCreateVisible(false)}>取消</Button>
+                        <Button type="primary" htmlType="submit" loading={creatingRole}>
+                            创建
+                        </Button>
+                    </div>
+                </Form>
+            </Modal>
+            <Modal
+                title={`分配权限${selectedRole ? ` - ${selectedRole.name}` : ""}`}
+                visible={assignmentVisible}
+                confirmLoading={savingPermissions}
+                onOk={saveRolePermissions}
+                onCancel={() => setAssignmentVisible(false)}
+            >
+                <PermissionTreePicker permissions={permissions.data.list} value={selectedPermissionIds} onChange={setSelectedPermissionIds} />
+            </Modal>
+        </Card>
+    );
 }
 
 export default RolesPage;