update:Dialog替换

frontend/app/features/admin/ImportMemberDialog.tsx

@@ -1,25 +1,16 @@
-import { X } from "lucide-react";
 import { type Employee, type Workspace } from "../../services/api";
+import {
+  AppFormDialog,
+  dialogPrimaryButtonClass,
+  dialogSecondaryButtonClass,
+} from "~/components/common/AppFormDialog";
 import { Button } from "~/components/ui/button";
 import {
   formFieldClass,
-  modalBackdropClass,
-  modalCompactClass,
-  modalEyebrowClass,
-  modalFooterClass,
   modalFormClass,
-  modalHeaderClass,
-  modalTitleClass,
 } from "../platform/modalUi";
 import { UserMultiSelect } from "./UserMultiSelect";
 
-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 ImportMemberDialog({
   open,
   selectedProject,
@@ -27,7 +18,6 @@ export function ImportMemberDialog({
   selectedUserIds,
   existingMemberIds,
   saving,
-  onNotify,
   onChangeSelectedUserIds,
   onSubmit,
   onClose,
@@ -43,60 +33,49 @@ export function ImportMemberDialog({
   onSubmit: () => Promise<void> | void;
   onClose: () => void;
 }) {
-  if (!open || !selectedProject) return null;
-
   return (
-    <div className={modalBackdropClass} role="presentation">
-      <section className={modalCompactClass} role="dialog" aria-modal="true">
-        <div className={modalHeaderClass}>
-          <div>
-            <span className={modalEyebrowClass}>IMPORT MEMBER</span>
-            <h2 className={modalTitleClass}>导入成员到 {selectedProject?.workspace_name ?? "项目"}</h2>
-          </div>
+    <AppFormDialog
+      open={open && selectedProject !== null}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) onClose();
+      }}
+      eyebrow="IMPORT MEMBER"
+      title={`导入成员到 ${selectedProject?.workspace_name ?? "项目"}`}
+      footer={
+        <>
           <Button
-            variant="ghost"
-            size="icon-sm"
+            variant="outline"
+            size="sm"
             type="button"
-            aria-label="关闭"
             onClick={() => onClose()}
-            className={CLOSE_BUTTON_CLASS}
+            className={dialogSecondaryButtonClass}
           >
-            <X size={16} />
+            取消
           </Button>
-        </div>
-        <form className={modalFormClass}>
-          <label className={`${formFieldClass} pb-[120px]`}>
-            <span>选择用户<span className="text-[#e74c3c]">*</span></span>
-            <UserMultiSelect
-              users={availableUsers}
-              selectedUserIds={selectedUserIds}
-              onChange={onChangeSelectedUserIds}
-              existingMemberIds={existingMemberIds}
-            />
-          </label>
-          <div className={modalFooterClass}>
-            <Button
-              variant="outline"
-              size="sm"
-              type="button"
-              onClick={() => onClose()}
-              className={SECONDARY_BUTTON_CLASS}
-            >
-              取消
-            </Button>
-            <Button
-              variant="default"
-              size="sm"
-              type="button"
-              disabled={saving || selectedUserIds.length === 0}
-              onClick={() => void onSubmit()}
-              className={PRIMARY_BUTTON_CLASS}
-            >
-              {saving ? "添加中…" : `添加 (${selectedUserIds.length})`}
-            </Button>
-          </div>
-        </form>
-      </section>
-    </div>
+          <Button
+            variant="default"
+            size="sm"
+            type="button"
+            disabled={saving || selectedUserIds.length === 0}
+            onClick={() => void onSubmit()}
+            className={dialogPrimaryButtonClass}
+          >
+            {saving ? "添加中…" : `添加 (${selectedUserIds.length})`}
+          </Button>
+        </>
+      }
+    >
+      <div className={modalFormClass}>
+        <label className={`${formFieldClass} pb-[120px]`}>
+          <span>选择用户<span className="text-[#e74c3c]">*</span></span>
+          <UserMultiSelect
+            users={availableUsers}
+            selectedUserIds={selectedUserIds}
+            onChange={onChangeSelectedUserIds}
+            existingMemberIds={existingMemberIds}
+          />
+        </label>
+      </div>
+    </AppFormDialog>
   );
 }