tao.chen/model-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: replace table component

Browse Source
This commit is contained in:
tao.chen
2026-09-02 10:10:41 +08:00
committed by tao.chen
parent bc617b6ade
commit c2f153cabd
3 changed files with 259 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/features/admin/UserManagementPage.tsx
+80 -51
View File
@@ -6,6 +6,14 @@ import { useApi, useAuth } from "../../context/AuthContext";
import Icon from "../../components/common/Icon";
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "~/components/ui/table";
import {
formFieldClass,
formInputClass,
@@ -212,57 +220,78 @@ export function UserManagementPage({
</div>
{!canManage && <div className="admin-readonly">当前为开发人员，只能查看用户列表。</div>}
<div className="employee-table">
<div className="employee-table__head"><span>用户</span><span>账号</span><span>角色</span><span>状态</span><span>操作</span></div>
{loading ? (
<p className="admin-empty">正在加载用户…</p>
) : (
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 (
<div className="employee-row" key={employee.user_id}>
<span className="employee-name"><b className="avatar">{employee.display_name.slice(0, 1)}</b><span><strong>{employee.display_name}</strong><small>{employee.email ?? "未设置邮箱"}</small></span></span>
<code>{employee.username}</code>
{employee.role_code ? (<span className={`role-pill is-${employee.role_code}`}>{employee.role_name}</span>) : (<span>-</span>)}
<span className={`status-pill is-${employee.status}`}>{employee.status === "active" ? "正常" : employee.status === "disabled" ? "已停用" : "已锁定"}</span>
<span className="employee-actions">
<Button
variant="outline"
size="xs"
type="button"
disabled={!canManage}
onClick={() => openEdit(employee)}
className={ROW_BUTTON_CLASS}
>
编辑
</Button>
<Button
variant="destructive"
size="xs"
type="button"
disabled={!canManage || isProtectedAdmin}
title={isProtectedAdmin ? "管理员账号不能删除" : "删除"}
onClick={() => void remove(employee)}
className={ROW_DANGER_BUTTON_CLASS}
>
删除
</Button>
</span>
</div>
);
})
)}
</div>
<Table className="rounded-[9px] border border-[#dfe7ef] overflow-hidden text-[11px] text-[#44576a] [--border-color:#dfe7ef] table-fixed bg-white">
<colgroup>
<col style={{ width: "32%" }} />
<col style={{ width: "22%" }} />
<col style={{ width: "15%" }} />
<col style={{ width: "14%" }} />
<col style={{ width: "17%" }} />
</colgroup>
<TableHeader className="bg-[#f5f8fb] text-[#748598]">
<TableRow className="hover:bg-transparent border-b border-[#edf1f5]">
<TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">用户</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">账号</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">角色</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">状态</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">操作</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{loading ? (
<TableRow className="min-h-[64px] border-t border-[#edf1f5] hover:bg-[#f7fafc] data-[state=selected]:bg-transparent">
<TableCell colSpan={5} className="p-0">
<p className="admin-empty">正在加载用户…</p>
</TableCell>
</TableRow>
) : (
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 (
<TableRow key={employee.user_id} className="min-h-[64px] border-t border-[#edf1f5] hover:bg-[#f7fafc] data-[state=selected]:bg-transparent">
<TableCell className="p-3 px-4 align-middle"><span className="employee-name"><b className="avatar">{employee.display_name.slice(0, 1)}</b><span><strong>{employee.display_name}</strong><small>{employee.email ?? "未设置邮箱"}</small></span></span></TableCell>
<TableCell className="p-3 px-4 align-middle"><code>{employee.username}</code></TableCell>
<TableCell className="p-3 px-4 align-middle">{employee.role_code ? (<span className={`role-pill is-${employee.role_code}`}>{employee.role_name}</span>) : (<span>-</span>)}</TableCell>
<TableCell className="p-3 px-4 align-middle"><span className={`status-pill is-${employee.status}`}>{employee.status === "active" ? "正常" : employee.status === "disabled" ? "已停用" : "已锁定"}</span></TableCell>
<TableCell className="p-3 px-4 align-middle"><span className="employee-actions">
<Button
variant="outline"
size="xs"
type="button"
disabled={!canManage}
onClick={() => openEdit(employee)}
className={ROW_BUTTON_CLASS}
>
编辑
</Button>
<Button
variant="destructive"
size="xs"
type="button"
disabled={!canManage || isProtectedAdmin}
title={isProtectedAdmin ? "管理员账号不能删除" : "删除"}
onClick={() => void remove(employee)}
className={ROW_DANGER_BUTTON_CLASS}
>
删除
</Button>
</span></TableCell>
</TableRow>
);
})
)}
</TableBody>
</Table>
{dialogOpen && (
<div className={modalBackdropClass} role="presentation">