update:Dialog替换

frontend/app/features/admin/PermissionEditDialog.tsx

@@ -1,26 +1,15 @@
 import { useEffect, useState } from "react";
 
-import { X } from "lucide-react";
 import type { PlatformPermission, Role } from "../../services/api";
-import { Button } from "~/components/ui/button";
 import {
-  modalBackdropClass,
-  modalCompactClass,
-  modalEyebrowClass,
-  modalFooterClass,
-  modalFormClass,
-  modalHeaderClass,
-  modalTitleClass,
-} from "../platform/modalUi";
+  AppFormDialog,
+  dialogPrimaryButtonClass,
+  dialogSecondaryButtonClass,
+} from "~/components/common/AppFormDialog";
+import { Button } from "~/components/ui/button";
+import { modalFormClass } from "../platform/modalUi";
 import { PermissionCheckboxList } from "./PermissionCheckboxList";
 
-const CLOSE_BUTTON_CLASS =
-  "size-[34px] rounded-[7px] border border-[#dfe6ed] bg-white hover:bg-[#f7faff] hover:border-[#b9c9da]";
-const SECONDARY_BUTTON_CLASS =
-  "h-[37px] gap-[7px] rounded-md border-[#d8e1e9] bg-white px-[15px] text-xs font-[650] text-[#56687c]";
-const PRIMARY_BUTTON_CLASS =
-  "h-[37px] gap-[7px] rounded-md border border-[#126ac3] bg-gradient-to-br from-[#1881e7] to-[#1268c9] px-[15px] text-xs font-[650] text-white shadow-[0_6px_15px_rgb(20_111_202/18%)] enabled:hover:from-[#1175d8] enabled:hover:to-[#0e5bad]";
-
 export function PermissionEditDialog({
   open,
   target,
@@ -41,7 +30,6 @@ export function PermissionEditDialog({
   const [selectedCodes, setSelectedCodes] = useState<string[]>(() => {
     if (!open || !target) return [];
     const initial = [...currentCodes];
-    // admin 角色必须保留 system:view（后端守卫）；前端锁定勾选兜底。
     if (target.role_code === "admin" && !initial.includes("system:view")) {
       initial.push("system:view");
     }
@@ -69,45 +57,22 @@ export function PermissionEditDialog({
     );
   };
 
-  if (!open || !target) return null;
-
   return (
-    <div className={modalBackdropClass} role="presentation">
-      <section className={modalCompactClass} role="dialog" aria-modal="true">
-        <div className={modalHeaderClass}>
-          <div>
-            <span className={modalEyebrowClass}>PERMISSIONS</span>
-            <h2 className={modalTitleClass}>权限配置 · {target.role_name}</h2>
-          </div>
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            type="button"
-            aria-label="关闭"
-            onClick={onClose}
-            className={CLOSE_BUTTON_CLASS}
-          >
-            <X size={16} />
-          </Button>
-        </div>
-        <div className={modalFormClass}>
-          {target.role_code === "admin" && (
-            <p className="role-error">admin 角色必须保留 system:view 权限。</p>
-          )}
-          <PermissionCheckboxList
-            permissions={permissions}
-            selected={selectedCodes}
-            targetRoleCode={target.role_code}
-            onToggle={togglePermission}
-          />
-        </div>
-        <div className={modalFooterClass}>
+    <AppFormDialog
+      open={open && target !== null}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) onClose();
+      }}
+      eyebrow="PERMISSIONS"
+      title={target ? `权限配置 · ${target.role_name}` : "权限配置"}
+      footer={
+        <>
           <Button
             variant="outline"
             size="sm"
             type="button"
             onClick={onClose}
-            className={SECONDARY_BUTTON_CLASS}
+            className={dialogSecondaryButtonClass}
           >
             取消
           </Button>
@@ -117,12 +82,26 @@ export function PermissionEditDialog({
             type="button"
             disabled={saving}
             onClick={() => onSubmit(selectedCodes)}
-            className={PRIMARY_BUTTON_CLASS}
+            className={dialogPrimaryButtonClass}
           >
             {saving ? "保存中…" : "保存权限"}
           </Button>
-        </div>
-      </section>
-    </div>
+        </>
+      }
+    >
+      <div className={modalFormClass}>
+        {target?.role_code === "admin" && (
+          <p className="role-error">admin 角色必须保留 system:view 权限。</p>
+        )}
+        {target ? (
+          <PermissionCheckboxList
+            permissions={permissions}
+            selected={selectedCodes}
+            targetRoleCode={target.role_code}
+            onToggle={togglePermission}
+          />
+        ) : null}
+      </div>
+    </AppFormDialog>
   );
 }