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-08-26 10:47:54 +08:00
parent 83190ea57e
commit 32d3309ecf
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
+46 -13
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,18 +286,36 @@ 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>
<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) => {
@@ -302,7 +328,8 @@ export function ProjectManagementPage({
);
})
.map((project) => (
<div className="employee-row" key={project.workspace_id}>
<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>
@@ -310,13 +337,17 @@ export function ProjectManagementPage({
<small>{project.description ?? "无描述"}</small>
</span>
</span>
<code>{project.workspace_code}</code>
</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>
<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>{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>
@@ -331,10 +362,12 @@ export function ProjectManagementPage({
删除
</button>
</span>
</div>
</TableCell>
</TableRow>
))
)}
</div>
</TableBody>
</Table>
{projectDialogOpen && (
<div className={modalBackdropClass} role="presentation">
frontend/app/features/admin/RoleManagementPage.tsx
+46 -15
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,28 +203,50 @@ 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>
<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) => (
<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"}`}>
<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>
<span className="permission-count">
</span></TableCell>
<TableCell className="p-3 px-4 align-middle"><span className="permission-count">
{role.permission_codes.length} 项权限
</span>
<span className="role-actions">
</span></TableCell>
<TableCell className="p-3 px-4 align-middle"><span className="role-actions">
<Button
variant="outline"
size="xs"
@@ -248,11 +278,12 @@ export function RoleManagementPage({
>
删除
</Button>
</span>
</div>
</span></TableCell>
</TableRow>
))
)}
</div>
</TableBody>
</Table>
{dialogOpen && (
<RoleEditDialog
frontend/app/features/admin/UserManagementPage.tsx
+40 -11
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,10 +220,30 @@ 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>
<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) => {
@@ -230,12 +258,12 @@ export function UserManagementPage({
.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">
<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"
@@ -257,12 +285,13 @@ export function UserManagementPage({
>
删除
</Button>
</span>
</div>
</span></TableCell>
</TableRow>
);
})
)}
</div>
</TableBody>
</Table>
{dialogOpen && (
<div className={modalBackdropClass} role="presentation">