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

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

.prettierrc

@@ -0,0 +1,9 @@
+{
+    "tabWidth": 4,
+    "singleQuote": false,
+    "trailingComma": "all",
+    "printWidth": 390,
+    "eslintIntegration": true,
+    "bracketSpacing": true,
+    "stylelintIntegration": true
+}

src/Data/index.tsx

@@ -55,7 +55,7 @@ function DataPage() {
       </Card>
 
       <Card className="section-card" title="短剧数据">
-        <Table rowKey="dramaId" loading={dramas.loading} data={dramas.data.list} pagination={{ total: dramas.data.pagination.total, pageSize: dramas.data.pagination.pageSize }} columns={[
+        <Table rowKey="dramaId" loading={dramas.loading} data={dramas.data.list} pagination={{ current: dramas.data.pagination.page, total: dramas.data.pagination.total, pageSize: dramas.data.pagination.pageSize, onChange: dramas.changePage }} columns={[
           { title: '短剧ID', dataIndex: 'dramaId', width: 100 },
           { title: '短剧名称', dataIndex: 'title' },
           { title: '播放量', dataIndex: 'plays', width: 120 },
@@ -68,7 +68,7 @@ function DataPage() {
       </Card>
 
       <Card className="section-card" title="剧集数据">
-        <Table rowKey="episodeId" loading={episodes.loading} data={episodes.data.list} pagination={{ total: episodes.data.pagination.total, pageSize: episodes.data.pagination.pageSize }} columns={[
+        <Table rowKey="episodeId" loading={episodes.loading} data={episodes.data.list} pagination={{ current: episodes.data.pagination.page, total: episodes.data.pagination.total, pageSize: episodes.data.pagination.pageSize, onChange: episodes.changePage }} columns={[
           { title: '剧集ID', dataIndex: 'episodeId', width: 100 },
           { title: '短剧ID', dataIndex: 'dramaId', width: 100 },
           { title: '集数', dataIndex: 'episodeNo', width: 90 },
@@ -81,7 +81,7 @@ function DataPage() {
       </Card>
 
       <Card className="section-card" title="同步记录">
-        <Table rowKey="id" loading={jobs.loading} data={jobs.data.list} pagination={{ total: jobs.data.pagination.total, pageSize: jobs.data.pagination.pageSize }} columns={[
+        <Table rowKey="id" loading={jobs.loading} data={jobs.data.list} pagination={{ current: jobs.data.pagination.page, total: jobs.data.pagination.total, pageSize: jobs.data.pagination.pageSize, onChange: jobs.changePage }} columns={[
           { title: '任务ID', dataIndex: 'jobId' },
           { title: '状态', dataIndex: 'status', width: 120 },
           { title: '短剧数', dataIndex: 'dramaCount', width: 120 },

src/Drama/index.tsx

@@ -17,11 +17,7 @@ import {
     Table,
     Tag,
 } from "@arco-design/web-react";
-import {
+import { IconArrowLeft, IconPlus, IconRefresh } from "@arco-design/web-react/icon";
-  IconArrowLeft,
-  IconPlus,
-  IconRefresh,
-} from "@arco-design/web-react/icon";
 import type { ApiResponse, Drama, Episode, UploadTask } from "../api/types";
 import { api } from "../api/client";
 import { usePageData } from "../hooks/usePageData";
@@ -62,7 +58,7 @@ function DramasPage() {
 
 function DramaListPage() {
     const navigate = useNavigate();
-  const { data, loading, reload } = usePageData<Drama>("/api/admin/v1/dramas");
+    const { data, loading, reload, changePage } = usePageData<Drama>("/api/admin/v1/dramas");
     const [visible, setVisible] = useState(false);
     const [creating, setCreating] = useState(false);
 
@@ -83,11 +79,7 @@ function DramaListPage() {
             className="section-card"
             title="短剧管理"
             extra={
-        <Button
+                <Button type="primary" icon={<IconPlus />} onClick={() => setVisible(true)}>
-          type="primary"
-          icon={<IconPlus />}
-          onClick={() => setVisible(true)}
-        >
                     新增短剧
                 </Button>
             }
@@ -97,8 +89,10 @@ function DramaListPage() {
                 loading={loading}
                 data={data.list}
                 pagination={{
+                    current: data.pagination.page,
                     total: data.pagination.total,
                     pageSize: data.pagination.pageSize,
+                    onChange: (page, pageSize) => changePage(page, pageSize),
                 }}
                 columns={[
                     { title: "ID", dataIndex: "id", width: 80 },
@@ -112,39 +106,27 @@ function DramaListPage() {
                         dataIndex: "status",
                         width: 120,
                         render: (status) => (
-              <Tag color={status === "published" ? "green" : "gray"}>
+                            <Tag color={status === "published" ? "green" : "gray"}>{PUBLISH_STATUS_LABEL[String(status)] || String(status)}</Tag>
-                {PUBLISH_STATUS_LABEL[String(status)] || String(status)}
-              </Tag>
                         ),
                     },
                     {
                         title: "推荐",
                         dataIndex: "isRecommended",
                         width: 100,
-            render: (value) =>
+                        render: (value) => (value ? <Tag color="arcoblue">是</Tag> : <Tag>否</Tag>),
-              value ? <Tag color="arcoblue">是</Tag> : <Tag>否</Tag>,
                     },
                     {
                         title: "操作",
                         width: 120,
                         render: (_, record) => (
-              <Button
+                            <Button type="text" onClick={() => navigate(`/dramas/${record.id}`)}>
-                type="text"
-                onClick={() => navigate(`/dramas/${record.id}`)}
-              >
                                 详情
                             </Button>
                         ),
                     },
                 ]}
             />
-      <Modal
+            <Modal title="创建短剧" visible={visible} onCancel={() => setVisible(false)} footer={null} style={{ width: 640 }}>
-        title="创建短剧"
-        visible={visible}
-        onCancel={() => setVisible(false)}
-        footer={null}
-        style={{ width: 640 }}
-      >
                 <Form
                     layout="vertical"
                     onSubmit={createDrama}
@@ -160,7 +142,7 @@ function DramaListPage() {
                     <Row gutter={16}>
                         <Col span={12}>
                             <Form.Item label="类型" field="type" rules={[{ required: true }]}>
-                <Input placeholder="请输入类型" />
+                                <Input placeholder="请输入类型，如复仇、爱情、动作等" />
                             </Form.Item>
                         </Col>
                         <Col span={12}>
@@ -175,18 +157,11 @@ function DramaListPage() {
                             </Form.Item>
                         </Col>
                     </Row>
-          <Form.Item
+                    <Form.Item label="封面地址" field="coverUrl" rules={[{ required: true }]}>
-            label="封面地址"
-            field="coverUrl"
-            rules={[{ required: true }]}
-          >
                         <Input placeholder="请输入封面图片 URL" />
                     </Form.Item>
                     <Form.Item label="简介" field="description">
-            <Input.TextArea
+                        <Input.TextArea placeholder="请输入短剧简介" autoSize={{ minRows: 2, maxRows: 4 }} />
-              placeholder="请输入短剧简介"
-              autoSize={{ minRows: 2, maxRows: 4 }}
-            />
                     </Form.Item>
                     <Form.Item label="标签" field="tags">
                         <InputTag placeholder="输入后回车添加标签" allowClear />
@@ -204,29 +179,18 @@ function DramaListPage() {
                         </Col>
                         <Col span={8}>
                             <Form.Item label="年份" field="year">
-                <InputNumber
+                                <InputNumber placeholder="如 2026" min={1900} style={{ width: "100%" }} />
-                  placeholder="如 2026"
-                  min={1900}
-                  style={{ width: "100%" }}
-                />
                             </Form.Item>
                         </Col>
                     </Row>
                     <Row gutter={16}>
                         <Col span={12}>
                             <Form.Item label="排序权重" field="sortOrder">
-                <InputNumber
+                                <InputNumber placeholder="数值越大越靠前" style={{ width: "100%" }} />
-                  placeholder="数值越大越靠前"
-                  style={{ width: "100%" }}
-                />
                             </Form.Item>
                         </Col>
                         <Col span={12}>
-              <Form.Item
+                            <Form.Item label="推荐" field="isRecommended" triggerPropName="checked">
-                label="推荐"
-                field="isRecommended"
-                triggerPropName="checked"
-              >
                                 <Switch />
                             </Form.Item>
                         </Col>
@@ -249,18 +213,14 @@ function DramaDetailPage({ dramaId }: { dramaId: number }) {
     const [episodes, setEpisodes] = useState<Episode[]>([]);
     const [loading, setLoading] = useState(false);
     const [episodeCount, setEpisodeCount] = useState(1);
-  const [uploadingEpisodeId, setUploadingEpisodeId] = useState<number | null>(
+    const [uploadingEpisodeId, setUploadingEpisodeId] = useState<number | null>(null);
-    null,
-  );
 
     const loadDetail = async () => {
         setLoading(true);
         try {
             const [dramaResponse, episodeResponse] = await Promise.all([
                 api.get<ApiResponse<Drama>>(`/api/admin/v1/dramas/${dramaId}`),
-        api.get<ApiResponse<{ list: Episode[] }>>(
+                api.get<ApiResponse<{ list: Episode[] }>>(`/api/admin/v1/dramas/${dramaId}/episodes?pageSize=200`),
-          `/api/admin/v1/dramas/${dramaId}/episodes?pageSize=200`,
-        ),
             ]);
             setDrama(dramaResponse.data.data);
             setEpisodeCount(dramaResponse.data.data.totalEpisodes || 1);
@@ -291,19 +251,13 @@ function DramaDetailPage({ dramaId }: { dramaId: number }) {
     const uploadEpisodeVideo = async (episode: Episode, file: File) => {
         setUploadingEpisodeId(episode.id);
         try {
-      const task = await api.post<ApiResponse<UploadTask>>(
+            const task = await api.post<ApiResponse<UploadTask>>("/api/admin/v1/media/upload-tasks", {
-        "/api/admin/v1/media/upload-tasks",
-        {
                 episodeId: episode.id,
                 fileName: file.name,
                 contentType: file.type || "video/mp4",
                 fileSize: file.size,
-        },
+            });
-      );
+            await api.patch(`/api/admin/v1/media/upload-tasks/${task.data.data.jobId}/complete`, {});
-      await api.patch(
-        `/api/admin/v1/media/upload-tasks/${task.data.data.jobId}/complete`,
-        {},
-      );
             await api.post("/api/admin/v1/media/review-status/sync", {});
             Message.success("视频上传并审核通过");
             await loadDetail();
@@ -328,10 +282,7 @@ function DramaDetailPage({ dramaId }: { dramaId: number }) {
                 loading={loading && !drama}
                 title={
                     <Space>
-            <Button
+                        <Button icon={<IconArrowLeft />} onClick={() => navigate("/dramas")} />
-              icon={<IconArrowLeft />}
-              onClick={() => navigate("/dramas")}
-            />
                         短剧详情
                     </Space>
                 }
@@ -341,10 +292,7 @@ function DramaDetailPage({ dramaId }: { dramaId: number }) {
                             刷新
                         </Button>
                         <Button onClick={() => updateDramaStatus("draft")}>设为草稿</Button>
-            <Button
+                        <Button type="primary" onClick={() => updateDramaStatus("published")}>
-              type="primary"
-              onClick={() => updateDramaStatus("published")}
-            >
                             上架短剧
                         </Button>
                     </Space>
@@ -376,12 +324,7 @@ function DramaDetailPage({ dramaId }: { dramaId: number }) {
                 title="剧集配置"
                 extra={
                     <Space>
-            <InputNumber
+                        <InputNumber min={1} max={500} value={episodeCount} onChange={(value) => setEpisodeCount(Number(value) || 1)} />
-              min={1}
-              max={500}
-              value={episodeCount}
-              onChange={(value) => setEpisodeCount(Number(value) || 1)}
-            />
                         <Button type="primary" onClick={configureEpisodes}>
                             保存集数
                         </Button>
@@ -405,10 +348,7 @@ function DramaDetailPage({ dramaId }: { dramaId: number }) {
                         {
                             title: "尺寸",
                             width: 120,
-              render: (_, record) =>
+                            render: (_, record) => (record.width && record.height ? `${record.width}x${record.height}` : "-"),
-                record.width && record.height
-                  ? `${record.width}x${record.height}`
-                  : "-",
                         },
                         {
                             title: "时长",
@@ -421,9 +361,7 @@ function DramaDetailPage({ dramaId }: { dramaId: number }) {
                             dataIndex: "reviewStatus",
                             width: 120,
                             render: (status) => (
-                <Tag color={status === "approved" ? "green" : "orange"}>
+                                <Tag color={status === "approved" ? "green" : "orange"}>{REVIEW_STATUS_LABEL[String(status)] || String(status)}</Tag>
-                  {REVIEW_STATUS_LABEL[String(status)] || String(status)}
-                </Tag>
                             ),
                         },
                         {
@@ -431,9 +369,7 @@ function DramaDetailPage({ dramaId }: { dramaId: number }) {
                             dataIndex: "publishStatus",
                             width: 120,
                             render: (status) => (
-                <Tag color={status === "published" ? "green" : "gray"}>
+                                <Tag color={status === "published" ? "green" : "gray"}>{PUBLISH_STATUS_LABEL[String(status)] || String(status)}</Tag>
-                  {PUBLISH_STATUS_LABEL[String(status)] || String(status)}
-                </Tag>
                             ),
                         },
                         {
@@ -458,11 +394,7 @@ function DramaDetailPage({ dramaId }: { dramaId: number }) {
                                             />
                                         </label>
                                     </Button>
-                  <Button
+                                    <Button type="text" disabled={record.reviewStatus !== "approved"} onClick={() => publishEpisode(record)}>
-                    type="text"
-                    disabled={record.reviewStatus !== "approved"}
-                    onClick={() => publishEpisode(record)}
-                  >
                                         发布
                                     </Button>
                                 </Space>

src/Personnel/index.tsx

@@ -6,7 +6,7 @@ import { api } from '../api/client';
 import { usePageData } from '../hooks/usePageData';
 
 function PersonnelPage() {
-  const { data, loading, reload } = usePageData<AdminUser>('/api/admin/v1/admin-users');
+  const { data, loading, reload, changePage } = usePageData<AdminUser>('/api/admin/v1/admin-users');
   const roles = usePageData<Role>('/api/admin/v1/roles');
   const [createForm] = Form.useForm();
   const [createVisible, setCreateVisible] = useState(false);
@@ -77,7 +77,7 @@ function PersonnelPage() {
 
   return (
     <Card className="section-card" title="人员管理" extra={<Button type="primary" icon={<IconPlus />} onClick={openCreate}>新增人员</Button>}>
-      <Table rowKey="id" loading={loading} data={data.list} pagination={{ total: data.pagination.total, pageSize: data.pagination.pageSize }} columns={[
+      <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: 'username' },
         { title: '姓名', dataIndex: 'nickname' },

src/Role/PermissionTreePicker.tsx

@@ -1,6 +1,6 @@
-import { useMemo } from 'react';
+import { useMemo } from "react";
-import { Tree } from '@arco-design/web-react';
+import { Tree } from "@arco-design/web-react";
-import type { Permission } from '../api/types';
+import type { Permission } from "../api/types";
 
 type PermissionTreeNode = {
     key: string;
@@ -15,26 +15,26 @@ type PermissionModuleConfig = {
 };
 
 const systemPermissionModules: PermissionModuleConfig[] = [
-  { prefix: 'permission', title: '权限管理', subject: '权限' },
+    { prefix: "permission", title: "权限管理", subject: "权限" },
-  { prefix: 'role', title: '角色管理', subject: '角色' },
+    { prefix: "role", title: "角色管理", subject: "角色" },
-  { prefix: 'admin-user', title: '人员管理', subject: '人员' },
+    { prefix: "admin-user", title: "人员管理", subject: "人员" },
-  { prefix: 'user', title: '用户管理', subject: '用户' },
+    { prefix: "user", title: "用户管理", subject: "用户" },
-  { prefix: 'log', title: '日志管理', subject: '日志' },
+    { prefix: "log", title: "日志管理", subject: "日志" },
 ];
 
 const businessPermissionModules: PermissionModuleConfig[] = [
-  { prefix: 'drama', title: '短剧管理', subject: '短剧' },
+    { prefix: "drama", title: "短剧管理", subject: "短剧" },
-  { prefix: 'episode', title: '剧集管理', subject: '剧集' },
+    { prefix: "episode", title: "剧集管理", subject: "剧集" },
-  { prefix: 'media', title: '媒体管理', subject: '媒体' },
+    { prefix: "media", title: "媒体管理", subject: "媒体" },
-  { prefix: 'payment', title: '支付管理', subject: '支付' },
+    { prefix: "payment", title: "支付管理", subject: "支付" },
 ];
 
 const actionNames: Record<string, string> = {
-  read: '查看',
+    read: "查看",
-  create: '创建',
+    create: "创建",
-  update: '更新',
+    update: "更新",
-  delete: '删除',
+    delete: "删除",
-  manage: '管理',
+    manage: "管理",
 };
 
 function permissionKey(id: number) {
@@ -42,26 +42,23 @@ function permissionKey(id: number) {
 }
 
 function permissionIdFromKey(key: string) {
-  const id = Number(key.replace('permission:', ''));
+    const id = Number(key.replace("permission:", ""));
     return Number.isInteger(id) ? id : null;
 }
 
 function getPermissionPrefix(code: string) {
-  return code.split(':')[0];
+    return code.split(":")[0];
 }
 
 function getPermissionAction(code: string) {
-  return code.split(':')[1] || code;
+    return code.split(":")[1] || code;
 }
 
 function getPermissionTitle(permission: Permission, module?: PermissionModuleConfig) {
     return permission.name || (module ? `${actionNames[getPermissionAction(permission.code)]}${module.subject}` : permission.code);
 }
 
-function buildPermissionModuleNode(
+function buildPermissionModuleNode(permissions: Permission[], module: PermissionModuleConfig): PermissionTreeNode | null {
-  permissions: Permission[],
-  module: PermissionModuleConfig,
-): PermissionTreeNode | null {
     const children = permissions
         .filter((permission) => getPermissionPrefix(permission.code) === module.prefix)
         .map((permission) => ({
@@ -100,15 +97,15 @@ function buildPermissionTree(permissions: Permission[]): PermissionTreeNode[] {
 
     if (otherPermissions.length) {
         businessChildren.push({
-      key: 'module:other',
+            key: "module:other",
-      title: '其他权限',
+            title: "其他权限",
             children: otherPermissions,
         });
     }
 
     return [
-    { key: 'group:system', title: '系统权限', children: systemChildren },
+        { key: "group:system", title: "系统权限", children: systemChildren },
-    { key: 'group:business', title: '业务权限', children: businessChildren },
+        { key: "group:business", title: "业务权限", children: businessChildren },
     ];
 }
 
@@ -151,11 +148,7 @@ export function PermissionTreePicker({
                 showLine
                 treeData={treeData}
                 onCheck={(keys) => {
-          onChange(
+                    onChange(keys.map((key) => permissionIdFromKey(key)).filter((id): id is number => id !== null));
-            keys
-              .map((key) => permissionIdFromKey(key))
-              .filter((id): id is number => id !== null),
-          );
                 }}
             />
         </div>

src/Role/index.css

@@ -15,6 +15,7 @@
 .permission-tree-panel {
   height: 360px;
   overflow: auto;
+  margin-bottom: 15px;
   padding: 12px 16px;
   border: 1px solid #e5e6eb;
   border-radius: 6px;

src/Role/index.tsx

@@ -1,15 +1,15 @@
-import { useState } from 'react';
+import { useState } from "react";
-import { Button, Card, Form, Input, Message, Modal, Space, Table, Tag } from '@arco-design/web-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 { IconPlus } from "@arco-design/web-react/icon";
-import type { Permission, Role } from '../api/types';
+import type { Permission, Role } from "../api/types";
-import { api } from '../api/client';
+import { api } from "../api/client";
-import { usePageData } from '../hooks/usePageData';
+import { usePageData } from "../hooks/usePageData";
-import { PermissionTreePicker } from './PermissionTreePicker';
+import { PermissionTreePicker } from "./PermissionTreePicker";
-import './index.css';
+import "./index.css";
 
 function RolesPage() {
-  const { data, loading, reload } = usePageData<Role>('/api/admin/v1/roles');
+    const { data, loading, reload, changePage } = usePageData<Role>("/api/admin/v1/roles");
-  const permissions = usePageData<Permission>('/api/admin/v1/permissions');
+    const permissions = usePageData<Permission>("/api/admin/v1/permissions");
     const [createForm] = Form.useForm();
     const [createVisible, setCreateVisible] = useState(false);
     const [creatingRole, setCreatingRole] = useState(false);
@@ -28,11 +28,11 @@ function RolesPage() {
     const createRole = async (values: { code: string; name: string; description?: string }) => {
         setCreatingRole(true);
         try {
-      await api.post('/api/admin/v1/roles', {
+            await api.post("/api/admin/v1/roles", {
                 ...values,
                 permissionIds: createPermissionIds,
             });
-      Message.success('角色创建成功');
+            Message.success("角色创建成功");
             setCreateVisible(false);
             await reload();
         } finally {
@@ -55,7 +55,7 @@ function RolesPage() {
             await api.patch(`/api/admin/v1/roles/${selectedRole.id}/permissions`, {
                 permissionIds: selectedPermissionIds,
             });
-      Message.success('角色权限已更新');
+            Message.success("角色权限已更新");
             setAssignmentVisible(false);
             await reload();
         } finally {
@@ -64,14 +64,50 @@ function RolesPage() {
     };
 
     return (
-    <Card className="section-card" title="角色管理" extra={<Button type="primary" icon={<IconPlus />} onClick={openCreateRole}>新增角色</Button>}>
+        <Card
-      <Table rowKey="id" loading={loading} data={data.list} pagination={{ total: data.pagination.total, pageSize: data.pagination.pageSize }} columns={[
+            className="section-card"
-        { title: 'ID', dataIndex: 'id', width: 80 },
+            title="角色管理"
-        { title: '编码', dataIndex: 'code' },
+            extra={
-        { title: '名称', dataIndex: 'name' },
+                <Button type="primary" icon={<IconPlus />} onClick={openCreateRole}>
-        { 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> },
+                </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 }]}>
@@ -85,30 +121,24 @@ function RolesPage() {
                         <Input.TextArea placeholder="请输入角色描述" autoSize={{ minRows: 2, maxRows: 4 }} />
                     </Form.Item>
                     <div className="form-label">权限设置</div>
-          <PermissionTreePicker
+                    <PermissionTreePicker permissions={permissions.data.list} value={createPermissionIds} onChange={setCreatePermissionIds} />
-            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>
+                        <Button type="primary" htmlType="submit" loading={creatingRole}>
+                            创建
+                        </Button>
                     </div>
                 </Form>
             </Modal>
             <Modal
-        title={`分配权限${selectedRole ? ` - ${selectedRole.name}` : ''}`}
+                title={`分配权限${selectedRole ? ` - ${selectedRole.name}` : ""}`}
                 visible={assignmentVisible}
                 confirmLoading={savingPermissions}
                 onOk={saveRolePermissions}
                 onCancel={() => setAssignmentVisible(false)}
             >
-        <PermissionTreePicker
+                <PermissionTreePicker permissions={permissions.data.list} value={selectedPermissionIds} onChange={setSelectedPermissionIds} />
-          permissions={permissions.data.list}
-          value={selectedPermissionIds}
-          onChange={setSelectedPermissionIds}
-        />
             </Modal>
         </Card>
     );

src/User/index.tsx

@@ -4,7 +4,7 @@ import { api } from '../api/client';
 import { usePageData } from '../hooks/usePageData';
 
 function UsersPage() {
-  const { data, loading, reload } = usePageData<AppUser>('/api/admin/v1/users');
+  const { data, loading, reload, changePage } = usePageData<AppUser>('/api/admin/v1/users');
   const update状态 = async (id: number, status: 'active' | 'disabled') => {
     await api.patch(`/api/admin/v1/users/${id}/status`, { status });
     Message.success('用户状态已更新');
@@ -13,7 +13,7 @@ function UsersPage() {
 
   return (
     <Card className="section-card" title="小程序用户管理">
-      <Table rowKey="id" loading={loading} data={data.list} pagination={{ total: data.pagination.total, pageSize: data.pagination.pageSize }} columns={[
+      <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: 'TikTok Open ID', dataIndex: 'tiktokOpenId' },
         { title: '昵称', dataIndex: 'nickname' },

src/api/client.ts

@@ -1,9 +1,10 @@
-import axios, { AxiosError } from 'axios';
+import axios, { AxiosError } from "axios";
-import { Message } from '@arco-design/web-react';
+import { Message } from "@arco-design/web-react";
-import type { ApiResponse, PageData } from './types';
+import type { ApiResponse, PageData } from "./types";
 
-export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000';
+export const API_BASE_URL =
-export const TOKEN_KEY = 'cth_tk_admin_token';
+  import.meta.env.VITE_API_BASE_URL || "http://localhost:3000";
+export const TOKEN_KEY = "cth_tk_admin_token";
 
 export const api = axios.create({ baseURL: API_BASE_URL });
 
@@ -18,13 +19,17 @@ api.interceptors.request.use((config) => {
 api.interceptors.response.use(
   (response) => response,
   (error: AxiosError<ApiResponse<unknown>>) => {
-    const message = error.response?.data?.message || error.message || '请求失败';
+    const message =
+      error.response?.data?.message || error.message || "请求失败";
     Message.error(message);
     return Promise.reject(error);
   },
 );
 
-export async function fetchPage<T>(url: string): Promise<PageData<T>> {
+export async function fetchPage<T>(
-  const response = await api.get<ApiResponse<PageData<T>>>(url);
+  url: string,
+  params?: { page?: number; pageSize?: number },
+): Promise<PageData<T>> {
+  const response = await api.get<ApiResponse<PageData<T>>>(url, { params });
   return response.data.data;
 }

src/hooks/pageData.ts

@@ -0,0 +1,20 @@
+import type { PageData } from '../api/types';
+
+type PageQuery = {
+  page: number;
+  pageSize: number;
+};
+
+export function resolvePageData<T>(
+  response: PageData<T>,
+  query: PageQuery,
+): PageData<T> {
+  return {
+    list: response.list,
+    pagination: {
+      ...response.pagination,
+      page: query.page,
+      pageSize: query.pageSize,
+    },
+  };
+}

src/hooks/usePageData.ts

@@ -1,31 +1,51 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
-import { fetchPage } from '../api/client';
+import { fetchPage } from "../api/client";
-import type { PageData } from '../api/types';
+import type { PageData } from "../api/types";
+import { resolvePageData } from "./pageData";
+
+type PageQuery = {
+    page: number;
+    pageSize: number;
+};
 
 export function usePageData<T>(url: string, enabled = true) {
     const [loading, setLoading] = useState(false);
+    const [pageQuery, setPageQuery] = useState<PageQuery>({
+        page: 1,
+        pageSize: 20,
+    });
     const [data, setData] = useState<PageData<T>>({
         list: [],
         pagination: { page: 1, pageSize: 20, total: 0 },
     });
 
-  const load = async () => {
+    const load = async (query = pageQuery) => {
         if (!enabled) {
             return;
         }
         setLoading(true);
         try {
-      setData(await fetchPage<T>(url));
+            const response = await fetchPage<T>(url, query);
+            setData(resolvePageData(response, query));
         } finally {
             setLoading(false);
         }
     };
 
+    const changePage = (page: number, pageSize: number) => {
+        setPageQuery({ page, pageSize });
+    };
+
     useEffect(() => {
         if (enabled) {
-      void load();
+            void load(pageQuery);
         }
-  }, [url, enabled]);
+    }, [url, enabled, pageQuery.page, pageQuery.pageSize]);
 
-  return { data, loading, reload: load };
+    return {
+        data,
+        loading,
+        reload: () => load(pageQuery),
+        changePage,
+    };
 }

src/layout/index.tsx

@@ -1,28 +1,20 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from "react";
-import {
+import { Avatar, Button, Dropdown, Layout, Menu, Space, Typography } from "@arco-design/web-react";
-  Avatar,
+import { IconMenuFold, IconMenuUnfold } from "@arco-design/web-react/icon";
-  Button,
+import { Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom";
-  Dropdown,
+import type { ApiResponse, AdminProfile } from "../api/types";
-  Layout,
+import { TOKEN_KEY, api } from "../api/client";
-  Menu,
+import { filterMenuItems, findCurrentMenu, menuItems, renderMenuItem } from "./menu";
-  Space,
+import { PermissionRoute } from "./PermissionRoute";
-  Typography,
+import DashboardPage from "../Dashboard";
-} from '@arco-design/web-react';
+import DramasPage from "../Drama";
-import { IconMenuFold, IconMenuUnfold } from '@arco-design/web-react/icon';
+import DataPage from "../Data";
-import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
+import UsersPage from "../User";
-import type { ApiResponse, AdminProfile } from '../api/types';
+import RolesPage from "../Role";
-import { API_BASE_URL, TOKEN_KEY, api } from '../api/client';
+import PersonnelPage from "../Personnel";
-import { filterMenuItems, findCurrentMenu, menuItems, renderMenuItem } from './menu';
+import ProfilePage from "../Profile";
-import { PermissionRoute } from './PermissionRoute';
+import LogsPage from "../Log";
-import DashboardPage from '../Dashboard';
+import "./layout.css";
-import DramasPage from '../Drama';
-import DataPage from '../Data';
-import UsersPage from '../User';
-import RolesPage from '../Role';
-import PersonnelPage from '../Personnel';
-import ProfilePage from '../Profile';
-import LogsPage from '../Log';
-import './layout.css';
 
 const { Header, Sider, Content } = Layout;
 const { Text } = Typography;
@@ -37,11 +29,11 @@ export function AdminLayout() {
     const [openMenuKeys, setOpenMenuKeys] = useState<string[]>(current?.parent ? [current.parent.key] : []);
 
     useEffect(() => {
-    api.get<ApiResponse<AdminProfile>>('/api/admin/v1/auth/profile')
+        api.get<ApiResponse<AdminProfile>>("/api/admin/v1/auth/profile")
             .then((response) => setProfile(response.data.data))
             .catch(() => {
                 localStorage.removeItem(TOKEN_KEY);
-        navigate('/login', { replace: true });
+                navigate("/login", { replace: true });
             });
     }, [navigate]);
 
@@ -53,7 +45,7 @@ export function AdminLayout() {
 
     const logout = () => {
         localStorage.removeItem(TOKEN_KEY);
-    navigate('/login', { replace: true });
+        navigate("/login", { replace: true });
     };
 
     return (
@@ -64,7 +56,7 @@ export function AdminLayout() {
                     {!collapsed && <span>TK短剧管理后台</span>}
                 </div>
                 <Menu
-          selectedKeys={[current?.item.key || '/dashboard']}
+                    selectedKeys={[current?.item.key || "/dashboard"]}
                     openKeys={openMenuKeys}
                     onClickMenuItem={(key) => navigate(key)}
                     onClickSubMenu={(_, openKeys) => setOpenMenuKeys(openKeys)}
@@ -77,37 +69,96 @@ export function AdminLayout() {
                     <Space>
                         <Button icon={collapsed ? <IconMenuUnfold /> : <IconMenuFold />} onClick={() => setCollapsed(!collapsed)} />
                         <div className="header-title">
-              <strong>{current?.item.label || '工作台'}</strong>
+                            <strong>{current?.item.label || "工作台"}</strong>
-              <span>后端 API： {API_BASE_URL}</span>
                         </div>
                     </Space>
                     <Dropdown
                         position="br"
                         trigger="click"
-            droplist={(
+                        droplist={
                             <Menu>
-                <Menu.Item key="profile" onClick={() => navigate('/profile')}>个人中心</Menu.Item>
+                                <Menu.Item key="profile" onClick={() => navigate("/profile")}>
-                <Menu.Item key="logout" onClick={logout}>退出登录</Menu.Item>
+                                    个人中心
+                                </Menu.Item>
+                                <Menu.Item key="logout" onClick={logout}>
+                                    退出登录
+                                </Menu.Item>
                             </Menu>
-            )}
+                        }
                     >
                         <button className="user-menu-trigger" type="button">
-              <Avatar size={28}>{profile?.username?.slice(0, 1).toUpperCase() || 'A'}</Avatar>
+                            <Avatar size={28}>{profile?.username?.slice(0, 1).toUpperCase() || "A"}</Avatar>
-              <Text>{profile?.nickname || profile?.username || '管理员'}</Text>
+                            <Text>{profile?.nickname || profile?.username || "管理员"}</Text>
                         </button>
                     </Dropdown>
                 </Header>
                 <Content className="content">
                     <Routes>
                         <Route path="/dashboard" element={<DashboardPage profile={profile} />} />
-            <Route path="/dramas" element={<PermissionRoute profile={profile} requiredPermissions={['drama:read']}><DramasPage /></PermissionRoute>} />
+                        <Route
-            <Route path="/dramas/:id" element={<PermissionRoute profile={profile} requiredPermissions={['drama:read']}><DramasPage /></PermissionRoute>} />
+                            path="/dramas"
-            <Route path="/data" element={<PermissionRoute profile={profile} requiredPermissions={['data:read']}><DataPage /></PermissionRoute>} />
+                            element={
-            <Route path="/users" element={<PermissionRoute profile={profile} requiredPermissions={['user:read']}><UsersPage /></PermissionRoute>} />
+                                <PermissionRoute profile={profile} requiredPermissions={["drama:read"]}>
-            <Route path="/roles" element={<PermissionRoute profile={profile} requiredPermissions={['role:read']}><RolesPage /></PermissionRoute>} />
+                                    <DramasPage />
-            <Route path="/personnel" element={<PermissionRoute profile={profile} requiredPermissions={['admin-user:read']}><PersonnelPage /></PermissionRoute>} />
+                                </PermissionRoute>
-            <Route path="/profile" element={<PermissionRoute profile={profile}><ProfilePage /></PermissionRoute>} />
+                            }
-            <Route path="/logs" element={<PermissionRoute profile={profile} requiredPermissions={['log:read']}><LogsPage /></PermissionRoute>} />
+                        />
+                        <Route
+                            path="/dramas/:id"
+                            element={
+                                <PermissionRoute profile={profile} requiredPermissions={["drama:read"]}>
+                                    <DramasPage />
+                                </PermissionRoute>
+                            }
+                        />
+                        <Route
+                            path="/data"
+                            element={
+                                <PermissionRoute profile={profile} requiredPermissions={["data:read"]}>
+                                    <DataPage />
+                                </PermissionRoute>
+                            }
+                        />
+                        <Route
+                            path="/users"
+                            element={
+                                <PermissionRoute profile={profile} requiredPermissions={["user:read"]}>
+                                    <UsersPage />
+                                </PermissionRoute>
+                            }
+                        />
+                        <Route
+                            path="/roles"
+                            element={
+                                <PermissionRoute profile={profile} requiredPermissions={["role:read"]}>
+                                    <RolesPage />
+                                </PermissionRoute>
+                            }
+                        />
+                        <Route
+                            path="/personnel"
+                            element={
+                                <PermissionRoute profile={profile} requiredPermissions={["admin-user:read"]}>
+                                    <PersonnelPage />
+                                </PermissionRoute>
+                            }
+                        />
+                        <Route
+                            path="/profile"
+                            element={
+                                <PermissionRoute profile={profile}>
+                                    <ProfilePage />
+                                </PermissionRoute>
+                            }
+                        />
+                        <Route
+                            path="/logs"
+                            element={
+                                <PermissionRoute profile={profile} requiredPermissions={["log:read"]}>
+                                    <LogsPage />
+                                </PermissionRoute>
+                            }
+                        />
                         <Route path="*" element={<Navigate to="/dashboard" replace />} />
                     </Routes>
                 </Content>

tests/pageData.test.ts

@@ -0,0 +1,14 @@
+import assert from 'node:assert/strict';
+import { resolvePageData } from '../src/hooks/pageData.js';
+
+const response = {
+  list: [{ id: 21 }],
+  pagination: { page: 1, pageSize: 20, total: 30 },
+};
+
+const resolved = resolvePageData(response, { page: 2, pageSize: 20 });
+
+assert.deepEqual(resolved, {
+  list: [{ id: 21 }],
+  pagination: { page: 2, pageSize: 20, total: 30 },
+});