diff --git a/memory/2026-05-02.md b/memory/2026-05-02.md index 86df2d1..f92ec44 100644 --- a/memory/2026-05-02.md +++ b/memory/2026-05-02.md @@ -215,3 +215,28 @@ - 风险与影响: - 影响范围仅 `syslog` 页面前端展示层。 - 接口请求、权限判断、筛选参数、分页逻辑保持不变。 + +## Work Log - 用户管理页面布局样式对齐菜单管理(2026-05-02) + +- 背景: + - Issue `FL-167` 要求“参考菜单管理页面,调整用户管理页面样式和布局”。 + - `web/src/app/admin/users/page.tsx` 原为“用户检索卡 + 用户列表卡”双卡结构,和菜单管理页不一致。 + +- 本次改动(最小闭环): + - 文件:`web/src/app/admin/users/page.tsx` + - 将用户管理主内容收敛为单卡布局(标题“用户列表”): + - 将筛选区合并进列表卡顶部,使用 `Form layout="inline"`。 + - 筛选项统一为“关键词 + 状态 + 搜索 + 重置筛选”。 + - 统一反馈样式: + - 错误提示改为 closable `Alert`,并使用 `pre` 保留换行。 + - 成功提示改为 closable `Alert`。 + - 空状态文案改为“未找到符合筛选条件的用户。”。 + - 统一加载与权限态样式: + - 加载态调整为 `Spin tip="用户数据加载中..."` + `min-h-[240px]`。 + - 未登录/无权限态改为 `p + Link` 样式,和菜单管理页一致。 + - 分页与间距细节对齐: + - 增加 `pageSizeOptions: [10, 20, 50, 100]`。 + - 表格增加 `className="mt-4"`,统一筛选区与表格间距。 + +- 风险与影响: + - 影响面仅 `web/src/app/admin/users/page.tsx` 前端展示层,不涉及后端接口、权限和数据结构。 diff --git a/web/src/app/admin/users/page.tsx b/web/src/app/admin/users/page.tsx index 62badc7..fe35d29 100644 --- a/web/src/app/admin/users/page.tsx +++ b/web/src/app/admin/users/page.tsx @@ -553,11 +553,8 @@ export default function AdminUsersPage() { if (initializing || usersQuery.isLoading || rolesQuery.isLoading) { return ( -
- - - 正在加载用户数据... - +
+
); } @@ -565,10 +562,13 @@ export default function AdminUsersPage() { if (!user) { return (
- 请先登录后再访问用户管理页面。 - +

请先登录后再访问用户管理页面。

+ + 返回首页 +
); } @@ -576,48 +576,30 @@ export default function AdminUsersPage() { if (!canManage) { return (
- 你没有访问该页面的权限(需要 `user.manage`)。 - +

你没有访问该页面的权限(需要 `user.manage`)。

+ + 返回首页 +
); } return (
- {anyError && } - {success && } - - - - setKeywordInput(event.target.value)} - onPressEnter={handleSearch} - style={{ width: 320 }} - /> - - value={statusFilter} - style={{ width: 160 }} - options={[ - { label: "全部状态", value: "all" }, - { label: "启用", value: "active" }, - { label: "禁用", value: "disabled" }, - ]} - onChange={(value) => { - setStatusFilter(value); - setPagination((prev) => ({ ...prev, current: 1 })); - }} - /> - - - - + {anyError && ( + {anyError}} + onClose={() => setError("")} + /> + )} + {success && setSuccess("")} />} )} > +
+ + setKeywordInput(event.target.value)} + onPressEnter={handleSearch} + /> + + + + + value={statusFilter} + options={[ + { value: "all", label: "全部" }, + { value: "active", label: "已启用" }, + { value: "disabled", label: "已禁用" }, + ]} + onChange={(value) => { + setStatusFilter(value); + setPagination((prev) => ({ ...prev, current: 1 })); + }} + /> + + + + + + + + + +
+ + className="mt-4" rowKey="id" dataSource={users} columns={columns} @@ -640,18 +660,18 @@ export default function AdminUsersPage() { pageSize: pagination.pageSize, total: usersQuery.data?.total ?? 0, showSizeChanger: true, + pageSizeOptions: [10, 20, 50, 100], showTotal: (total) => `共 ${total} 条`, onChange: (page, pageSize) => { setPagination({ current: page, pageSize }); }, }} - size="middle" scroll={{ x: 1500 }} locale={{ emptyText: ( ), }}