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

updata:admin.css替用

Browse Source
This commit is contained in:
xiaozhu
2026-08-27 15:07:25 +08:00
parent 213490f8ac
commit 433c68998e
9 changed files with 226 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/features/admin/UserManagementPage.tsx
+27 -19
View File
@@ -25,8 +25,21 @@ import {
formInputClass,
modalFormClass,
} from "../platform/modalUi";
import "../../styles/admin.css";
import {
adminEmptyClass,
adminPageClass,
adminReadonlyClass,
adminToolbarClass,
adminToolbarInputClass,
adminToolbarSearchClass,
employeeActionsClass,
employeeAvatarClass,
employeeNameClass,
rolePillClass,
rowButtonClass,
rowDangerButtonClass,
statusPillClass,
} from "./adminUi";
const EMPTY_FORM = {
username: "",
@@ -41,11 +54,6 @@ const PRIMARY_BUTTON_CLASS =
"h-[37px] gap-[7px] rounded-md border border-[#126ac3] bg-gradient-to-br from-[#1881e7] to-[#1268c9] px-[15px] text-xs font-[650] text-white shadow-[0_6px_15px_rgb(20_111_202/18%)] enabled:hover:from-[#1175d8] enabled:hover:to-[#0e5bad]";
const FORM_INPUT_CLASS =
"h-[39px] w-full rounded-md border border-[#d6e0e9] bg-white px-[11px] text-xs text-[#283a4e] outline-none focus:border-[#5b9ddb] focus:shadow-[0_0_0_3px_rgb(38_125_207/8%)] disabled:cursor-not-allowed disabled:opacity-50";
const ROW_BUTTON_CLASS =
"h-6 gap-1 rounded-[4px] border-[#d9e3ec] bg-white px-[9px] text-[11px] text-[#4c6c88] hover:bg-[#f7fafc] disabled:cursor-not-allowed disabled:opacity-[0.45]";
const ROW_DANGER_BUTTON_CLASS =
"h-6 gap-1 rounded-[4px] border-[#d9e3ec] bg-white px-[9px] text-[11px] text-[#c14a4a] hover:bg-[#fdf2f2] disabled:cursor-not-allowed disabled:opacity-[0.45]";
export function UserManagementPage({
onNotify,
onConnectionChange,
@@ -190,14 +198,14 @@ export function UserManagementPage({
};
return (
<section className="admin-page">
<div className="admin-toolbar">
<div className="admin-toolbar__search">
<section className={adminPageClass}>
<div className={adminToolbarClass}>
<div className={adminToolbarSearchClass}>
<Search size={14} />
<input
type="text"
placeholder="请输入用户名"
className="admin-toolbar__input"
className={adminToolbarInputClass}
value={userSearchTerm}
onChange={(event) => setUserSearchTerm(event.target.value)}
/>
@@ -215,7 +223,7 @@ export function UserManagementPage({
</Button>
</div>
{!canManage && <div className="admin-readonly">当前为开发人员，只能查看用户列表。</div>}
{!canManage && <div className={adminReadonlyClass}>当前为开发人员，只能查看用户列表。</div>}
<Table className="rounded-[9px] border border-[#dfe7ef] overflow-hidden text-[11px] text-[#44576a] [--border-color:#dfe7ef] table-fixed bg-white">
<AdminColgroup widths={USER_PROJECT_COL_WIDTHS} />
<TableHeader className="bg-[#f5f8fb] text-[#748598]">
@@ -231,7 +239,7 @@ export function UserManagementPage({
{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>
<p className={adminEmptyClass}>正在加载用户…</p>
</TableCell>
</TableRow>
) : (
@@ -249,18 +257,18 @@ export function UserManagementPage({
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"><span className={employeeNameClass}><b className={employeeAvatarClass}>{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">
<TableCell className="p-3 px-4 align-middle">{employee.role_code ? (<span className={rolePillClass(employee.role_code)}>{employee.role_name}</span>) : (<span>-</span>)}</TableCell>
<TableCell className="p-3 px-4 align-middle"><span className={statusPillClass(employee.status)}>{employee.status === "active" ? "正常" : employee.status === "disabled" ? "已停用" : "已锁定"}</span></TableCell>
<TableCell className="p-3 px-4 align-middle"><span className={employeeActionsClass}>
<Button
variant="outline"
size="xs"
type="button"
disabled={!canManage}
onClick={() => openEdit(employee)}
className={ROW_BUTTON_CLASS}
className={rowButtonClass}
>
编辑
</Button>
@@ -271,7 +279,7 @@ export function UserManagementPage({
disabled={!canManage || isProtectedAdmin}
title={isProtectedAdmin ? "管理员账号不能删除" : "删除"}
onClick={() => setDeleteTarget(employee)}
className={ROW_DANGER_BUTTON_CLASS}
className={rowDangerButtonClass}
>
删除
</Button>