From 32d3309ecfb8e959eb60b085a221d811242aff7f Mon Sep 17 00:00:00 2001 From: "tao.chen" <93983997+taochen-ct@users.noreply.github.com> Date: Wed, 26 Aug 2026 10:47:54 +0800 Subject: [PATCH] update: replace table component --- .../features/admin/ProjectManagementPage.tsx | 147 +++++++++++------- .../app/features/admin/RoleManagementPage.tsx | 147 +++++++++++------- .../app/features/admin/UserManagementPage.tsx | 131 ++++++++++------ 3 files changed, 259 insertions(+), 166 deletions(-) diff --git a/frontend/app/features/admin/ProjectManagementPage.tsx b/frontend/app/features/admin/ProjectManagementPage.tsx index a0a1119..c8283ac 100644 --- a/frontend/app/features/admin/ProjectManagementPage.tsx +++ b/frontend/app/features/admin/ProjectManagementPage.tsx @@ -8,6 +8,14 @@ import Icon from "../../components/common/Icon"; import { Button } from "~/components/ui/button"; import { Input } from "~/components/ui/input"; import { Textarea } from "~/components/ui/textarea"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "~/components/ui/table"; import { UserMultiSelect } from "./UserMultiSelect"; import { formFieldClass, @@ -278,63 +286,88 @@ export function ProjectManagementPage({ {!canManage &&
当前为开发人员,只能查看项目列表。
} -
-
- 项目名称 - 项目编码 - 状态 - 配额 - 操作 -
- {projectLoading ? ( -

正在加载项目…

- ) : projects.length === 0 ? ( -

暂无项目

- ) : ( - projects - .filter((project) => { - const term = projectSearchTerm.toLowerCase().trim(); - if (!term) return true; - return ( - project.workspace_name.toLowerCase().includes(term) || - project.workspace_code.toLowerCase().includes(term) || - (project.description && project.description.toLowerCase().includes(term)) - ); - }) - .map((project) => ( -
- - {project.workspace_name.slice(0, 1)} - - {project.workspace_name} - {project.description ?? "无描述"} - - - {project.workspace_code} - - - {project.status === "active" ? "正常" : project.status === "archived" ? "已归档" : "已删除"} - - - {project.quota_bytes > 0 ? `${(project.quota_bytes / 1024 / 1024 / 1024).toFixed(1)} GB` : "无限制"} - - - - {/* */} - - -
- )) - )} -
+ + + + + + + + + + + 项目名称 + 项目编码 + 状态 + 配额 + 操作 + + + + {projectLoading ? ( + + +

正在加载项目…

+
+
+ ) : projects.length === 0 ? ( + + +

暂无项目

+
+
+ ) : ( + projects + .filter((project) => { + const term = projectSearchTerm.toLowerCase().trim(); + if (!term) return true; + return ( + project.workspace_name.toLowerCase().includes(term) || + project.workspace_code.toLowerCase().includes(term) || + (project.description && project.description.toLowerCase().includes(term)) + ); + }) + .map((project) => ( + + + + {project.workspace_name.slice(0, 1)} + + {project.workspace_name} + {project.description ?? "无描述"} + + + + {project.workspace_code} + + + + {project.status === "active" ? "正常" : project.status === "archived" ? "已归档" : "已删除"} + + + + {project.quota_bytes > 0 ? `${(project.quota_bytes / 1024 / 1024 / 1024).toFixed(1)} GB` : "无限制"} + + + + + {/* */} + + + + + )) + )} +
+
{projectDialogOpen && (
diff --git a/frontend/app/features/admin/RoleManagementPage.tsx b/frontend/app/features/admin/RoleManagementPage.tsx index f64d145..06eb615 100644 --- a/frontend/app/features/admin/RoleManagementPage.tsx +++ b/frontend/app/features/admin/RoleManagementPage.tsx @@ -12,6 +12,14 @@ import { useApi, useAuth } from "../../context/AuthContext"; import { Button } from "~/components/ui/button"; import { PermissionEditDialog } from "./PermissionEditDialog"; import { RoleEditDialog } from "./RoleEditDialog"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "~/components/ui/table"; import "../../styles/admin.css"; @@ -195,64 +203,87 @@ export function RoleManagementPage({ )} {loadError &&
{loadError}
} -
-
- 角色编码角色名称类型权限操作 -
- {loading ? ( -

正在加载角色…

- ) : filteredRoles.length === 0 ? ( -

- {roles.length === 0 ? "暂无角色" : "没有匹配的角色"} -

- ) : ( - filteredRoles.map((role) => ( -
- {role.role_code} - {role.role_name} - - {role.is_builtin ? "内置" : "自定义"} - - - {role.permission_codes.length} 项权限 - - - - - - -
- )) - )} -
+ + + + + + + + + + + 角色编码 + 角色名称 + 类型 + 权限 + 操作 + + + + {loading ? ( + + +

正在加载角色…

+
+
+ ) : filteredRoles.length === 0 ? ( + + +

+ {roles.length === 0 ? "暂无角色" : "没有匹配的角色"} +

+
+
+ ) : ( + filteredRoles.map((role) => ( + + {role.role_code} + {role.role_name} + + {role.is_builtin ? "内置" : "自定义"} + + + {role.permission_codes.length} 项权限 + + + + + + + + )) + )} +
+
{dialogOpen && ( {!canManage &&
当前为开发人员,只能查看用户列表。
} -
-
用户账号角色状态操作
- {loading ? ( -

正在加载用户…

- ) : ( - employees - .filter((employee) => { - const term = userSearchTerm.toLowerCase().trim(); - if (!term) return true; - return ( - employee.display_name.toLowerCase().includes(term) || - employee.username.toLowerCase().includes(term) || - (employee.email && employee.email.toLowerCase().includes(term)) - ); - }) - .map((employee) => { - const isProtectedAdmin = employee.role_code === "admin"; - return ( -
- {employee.display_name.slice(0, 1)}{employee.display_name}{employee.email ?? "未设置邮箱"} - {employee.username} - {employee.role_code ? ({employee.role_name}) : (-)} - {employee.status === "active" ? "正常" : employee.status === "disabled" ? "已停用" : "已锁定"} - - - - -
- ); - }) - )} -
+ + + + + + + + + + + 用户 + 账号 + 角色 + 状态 + 操作 + + + + {loading ? ( + + +

正在加载用户…

+
+
+ ) : ( + employees + .filter((employee) => { + const term = userSearchTerm.toLowerCase().trim(); + if (!term) return true; + return ( + employee.display_name.toLowerCase().includes(term) || + employee.username.toLowerCase().includes(term) || + (employee.email && employee.email.toLowerCase().includes(term)) + ); + }) + .map((employee) => { + const isProtectedAdmin = employee.role_code === "admin"; + return ( + + {employee.display_name.slice(0, 1)}{employee.display_name}{employee.email ?? "未设置邮箱"} + {employee.username} + {employee.role_code ? ({employee.role_name}) : (-)} + {employee.status === "active" ? "正常" : employee.status === "disabled" ? "已停用" : "已锁定"} + + + + + + ); + }) + )} +
+
{dialogOpen && (