update: replace table component
This commit is contained in:
tao.chen
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user