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