updata:admin.css替用

frontend/app/features/admin/ProjectManagementPage.tsx

@@ -17,8 +17,20 @@ import { AdminColgroup, USER_PROJECT_COL_WIDTHS } from "./AdminTable";
 import { ProjectEditDialog } from "./ProjectEditDialog";
 import { ImportMemberDialog } from "./ImportMemberDialog";
 import { ProjectMembersDrawer } from "./ProjectMembersDrawer";
-
-import "../../styles/admin.css";
+import {
+  adminEmptyClass,
+  adminPageClass,
+  adminReadonlyClass,
+  adminToolbarClass,
+  adminToolbarInputClass,
+  adminToolbarSearchClass,
+  employeeActionsClass,
+  employeeAvatarClass,
+  employeeNameClass,
+  rowButtonClass,
+  rowDangerButtonClass,
+  statusPillClass,
+} from "./adminUi";
 
 const EMPTY_PROJECT_FORM = {
   workspace_code: "",
@@ -242,14 +254,14 @@ export function ProjectManagementPage({
   };
 
   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={projectSearchTerm}
             onChange={(event) => setProjectSearchTerm(event.target.value)}
           />
@@ -267,7 +279,7 @@ export function ProjectManagementPage({
         </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]">
@@ -283,13 +295,13 @@ export function ProjectManagementPage({
           {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>
+                <p className={adminEmptyClass}>正在加载项目…</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>
+                <p className={adminEmptyClass}>暂无项目</p>
               </TableCell>
             </TableRow>
           ) : (
@@ -306,8 +318,8 @@ export function ProjectManagementPage({
               .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 className={employeeNameClass}>
+                      <b className={employeeAvatarClass}>{project.workspace_name.slice(0, 1)}</b>
                       <span>
                         <strong>{project.workspace_name}</strong>
                         <small>{project.description ?? "无描述"}</small>
@@ -317,26 +329,45 @@ export function ProjectManagementPage({
                   <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}`}>
+                      <span className={statusPillClass(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
+                    <span className={employeeActionsClass}>
+                      <Button
+                        variant="outline"
+                        size="xs"
+                        type="button"
+                        disabled={!canManage}
+                        onClick={() => openMembersDrawer(project)}
+                        className={rowButtonClass}
+                      >
+                        成员
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="xs"
+                        type="button"
+                        disabled={!canManage}
+                        onClick={() => openEditProject(project)}
+                        className={rowButtonClass}
+                      >
+                        编辑
+                      </Button>
+                      <Button
+                        variant="destructive"
+                        size="xs"
                         type="button"
-                        className="is-danger"
                         disabled={!canManage || project.status === "disabled"}
                         title={project.status === "disabled" ? "已删除的项目不能操作" : "删除项目"}
                         onClick={() => setDeleteTarget(project)}
+                        className={rowDangerButtonClass}
                       >
                         删除
-                      </button>
+                      </Button>
                     </span>
                   </TableCell>
                 </TableRow>