updata:admin.css替用

frontend/app/features/admin/PermissionCheckboxList.tsx

@@ -1,6 +1,13 @@
 import type { PlatformPermission } from "../../services/api";
 
 import { Checkbox } from "~/components/ui/checkbox";
+import {
+  adminEmptyClass,
+  permissionGroupClass,
+  permissionGroupTitleClass,
+  permissionGroupsClass,
+  permissionItemClassName,
+} from "./adminUi";
 
 /** 模块编码 → 展示名（用于权限分组标题）。 */
 const MODULE_LABELS: Record<string, string> = {
@@ -10,7 +17,7 @@ const MODULE_LABELS: Record<string, string> = {
   system: "系统管理",
 };
 
-/** 勾选框样式：复刻原生 checkbox 外观（白底、灰边、蓝色勾选），并对齐 `.permission-item input` 的 3px 顶部偏移。 */
+/** 勾选框样式：复刻原生 checkbox 外观（白底、灰边、蓝色勾选），并对齐 permission item 的 3px 顶部偏移。 */
 const CHECKBOX_CLASS =
   "mt-[3px] size-[16px] rounded-[3px] border-[#cdd9e4] bg-white disabled:opacity-100 data-checked:border-[#1277d3] data-checked:bg-[#1277d3] data-checked:text-white";
 
@@ -41,16 +48,16 @@ export function PermissionCheckboxList({
   );
 
   if (permissions.length === 0) {
-    return <p className="admin-empty">暂无可用权限</p>;
+    return <p className={adminEmptyClass}>暂无可用权限</p>;
   }
 
   const isAdmin = targetRoleCode === "admin";
 
   return (
-    <div className="permission-groups">
+    <div className={permissionGroupsClass}>
       {Object.entries(groups).map(([module, items]) => (
-        <div className="permission-group" key={module}>
-          <div className="permission-group__title">
+        <div className={permissionGroupClass} key={module}>
+          <div className={permissionGroupTitleClass}>
             {MODULE_LABELS[module] ?? module}
           </div>
           {items.map((permission) => {
@@ -61,7 +68,7 @@ export function PermissionCheckboxList({
             const checked = selected.includes(code);
             return (
               <label
-                className={`permission-item${locked ? " is-locked" : ""}`}
+                className={permissionItemClassName(locked)}
                 key={code}
               >
                 <Checkbox