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/ProjectManagementPage.tsx
+90 -57
View File
@@ -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({
</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>
{projectLoading ? (
<p className="admin-empty">正在加载项目…</p>
) : projects.length === 0 ? (
<p className="admin-empty">暂无项目</p>
) : (
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) => (
<div className="employee-row" key={project.workspace_id}>
<span className="employee-name">
<b className="avatar">{project.workspace_name.slice(0, 1)}</b>
<span>
<strong>{project.workspace_name}</strong>
<small>{project.description ?? "无描述"}</small>
</span>
</span>
<code>{project.workspace_code}</code>
<span>
<span className={`status-pill is-${project.status}`}>
{project.status === "active" ? "正常" : project.status === "archived" ? "已归档" : "已删除"}
</span>
</span>
<span>{project.quota_bytes > 0 ? `${(project.quota_bytes / 1024 / 1024 / 1024).toFixed(1)} GB` : "无限制"}</span>
<span className="employee-actions">
<button type="button" disabled={!canManage} onClick={() => openMembersDrawer(project)}>成员</button>
<button type="button" disabled={!canManage} onClick={() => openEditProject(project)}>编辑</button>
{/* <button type="button" disabled={!canManage} onClick={() => openImportMemberDialog(project)}>导入成员</button> */}
<button
type="button"
className="is-danger"
disabled={!canManage || project.status === "disabled"}
title={project.status === "disabled" ? "已删除的项目不能操作" : "删除项目"}
onClick={() => void deleteProject(project)}
>
删除
</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>
{projectLoading ? (
<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>
) : projects.length === 0 ? (
<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>
) : (
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) => (
<TableRow key={project.workspace_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">{project.workspace_name.slice(0, 1)}</b>
<span>
<strong>{project.workspace_name}</strong>
<small>{project.description ?? "无描述"}</small>
</span>
</span>
</TableCell>
<TableCell className="p-3 px-4 align-middle"><code>{project.workspace_code}</code></TableCell>
<TableCell className="p-3 px-4 align-middle">
<span>
<span className={`status-pill is-${project.status}`}>
{project.status === "active" ? "正常" : project.status === "archived" ? "已归档" : "已删除"}
</span>
</span>
</TableCell>
<TableCell className="p-3 px-4 align-middle"><span>{project.quota_bytes > 0 ? `${(project.quota_bytes / 1024 / 1024 / 1024).toFixed(1)} GB` : "无限制"}</span></TableCell>
<TableCell className="p-3 px-4 align-middle">
<span className="employee-actions">
<button type="button" disabled={!canManage} onClick={() => openMembersDrawer(project)}>成员</button>
<button type="button" disabled={!canManage} onClick={() => openEditProject(project)}>编辑</button>
{/* <button type="button" disabled={!canManage} onClick={() => openImportMemberDialog(project)}>导入成员</button> */}
<button
type="button"
className="is-danger"
disabled={!canManage || project.status === "disabled"}
title={project.status === "disabled" ? "已删除的项目不能操作" : "删除项目"}
onClick={() => void deleteProject(project)}
>
删除
</button>
</span>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
{projectDialogOpen && (
<div className={modalBackdropClass} role="presentation">
frontend/app/features/admin/RoleManagementPage.tsx
+89 -58
View File
@@ -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 && <div className="admin-readonly">{loadError}</div>}
<div className="role-table">
<div className="role-table__head">
<span>角色编码</span><span>角色名称</span><span>类型</span><span>权限</span><span>操作</span>
</div>
{loading ? (
<p className="admin-empty">正在加载角色…</p>
) : filteredRoles.length === 0 ? (
<p className="admin-empty">
{roles.length === 0 ? "暂无角色" : "没有匹配的角色"}
</p>
) : (
filteredRoles.map((role) => (
<div className="role-row" key={role.role_id}>
<code className="role-code">{role.role_code}</code>
<span className="role-name">{role.role_name}</span>
<span className={`builtin-badge${role.is_builtin ? "" : " is-custom"}`}>
{role.is_builtin ? "内置" : "自定义"}
</span>
<span className="permission-count">
{role.permission_codes.length} 项权限
</span>
<span className="role-actions">
<Button
variant="outline"
size="xs"
type="button"
disabled={!canManage}
onClick={() => openEdit(role)}
className="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]"
>
编辑
</Button>
<Button
variant="outline"
size="xs"
type="button"
disabled={!canManage}
onClick={() => openPermissions(role)}
className="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]"
>
权限
</Button>
<Button
variant="destructive"
size="xs"
type="button"
disabled={!canManage || role.is_builtin}
title={role.is_builtin ? "内置角色不可删除" : "删除角色"}
onClick={() => void removeRole(role)}
className="h-6 gap-1 rounded-[4px] border-red-200 bg-white px-[9px] text-[11px] text-red-700 hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-[0.45]"
>
删除
</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: "20%" }} />
<col style={{ width: "23%" }} />
<col style={{ width: "14%" }} />
<col style={{ width: "16%" }} />
<col style={{ width: "27%" }} />
</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-[60px] 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>
) : filteredRoles.length === 0 ? (
<TableRow className="min-h-[60px] border-t border-[#edf1f5] hover:bg-[#f7fafc] data-[state=selected]:bg-transparent">
<TableCell colSpan={5} className="p-0">
<p className="admin-empty">
{roles.length === 0 ? "暂无角色" : "没有匹配的角色"}
</p>
</TableCell>
</TableRow>
) : (
filteredRoles.map((role) => (
<TableRow key={role.role_id} className="min-h-[60px] border-t border-[#edf1f5] hover:bg-[#f7fafc] data-[state=selected]:bg-transparent">
<TableCell className="p-3 px-4 align-middle"><code className="role-code">{role.role_code}</code></TableCell>
<TableCell className="p-3 px-4 align-middle"><span className="role-name">{role.role_name}</span></TableCell>
<TableCell className="p-3 px-4 align-middle"><span className={`builtin-badge${role.is_builtin ? "" : " is-custom"}`}>
{role.is_builtin ? "内置" : "自定义"}
</span></TableCell>
<TableCell className="p-3 px-4 align-middle"><span className="permission-count">
{role.permission_codes.length} 项权限
</span></TableCell>
<TableCell className="p-3 px-4 align-middle"><span className="role-actions">
<Button
variant="outline"
size="xs"
type="button"
disabled={!canManage}
onClick={() => openEdit(role)}
className="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]"
>
编辑
</Button>
<Button
variant="outline"
size="xs"
type="button"
disabled={!canManage}
onClick={() => openPermissions(role)}
className="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]"
>
权限
</Button>
<Button
variant="destructive"
size="xs"
type="button"
disabled={!canManage || role.is_builtin}
title={role.is_builtin ? "内置角色不可删除" : "删除角色"}
onClick={() => void removeRole(role)}
className="h-6 gap-1 rounded-[4px] border-red-200 bg-white px-[9px] text-[11px] text-red-700 hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-[0.45]"
>
删除
</Button>
</span></TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
{dialogOpen && (
<RoleEditDialog
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">