update:Dialog替换

frontend/app/features/platform/CreateScriptModal.tsx

@@ -1,21 +1,18 @@
 import { type FormEvent } from "react";
 import Icon from "../../components/common/Icon";
 import type { ScriptType, Visibility } from "../../services/api";
+import {
+  AppFormDialog,
+  dialogPrimaryButtonClass,
+  dialogSecondaryButtonClass,
+} from "~/components/common/AppFormDialog";
+import { Button } from "~/components/ui/button";
 import {
   destinationChipClass,
   formFieldClass,
   formHintClass,
   formInputClass,
-  iconButtonClass,
-  modalBackdropClass,
-  modalEyebrowClass,
-  modalFooterClass,
   modalFormClass,
-  modalHeaderClass,
-  modalPanelClass,
-  modalTitleClass,
-  primaryButtonClass,
-  secondaryButtonClass,
 } from "./modalUi";
 
 type NewScriptForm = {
@@ -48,26 +45,17 @@ export function CreateScriptModal({
   onSubmit,
   onClose,
 }: CreateScriptModalProps) {
-  if (!open) return null;
-
   return (
-    <div className={modalBackdropClass} role="presentation">
-      <section className={modalPanelClass} role="dialog" aria-modal="true">
-        <div className={modalHeaderClass}>
-          <div>
-            <span className={modalEyebrowClass}>工作副本</span>
-            <h2 className={modalTitleClass}>新建构建脚本</h2>
-          </div>
-          <button
-            className={iconButtonClass}
-            type="button"
-            aria-label="关闭"
-            onClick={onClose}
-          >
-            <Icon name="close" />
-          </button>
-        </div>
-        <form className={modalFormClass} onSubmit={onSubmit}>
+    <AppFormDialog
+      open={open}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) onClose();
+      }}
+      eyebrow="工作副本"
+      title="新建构建脚本"
+      size="panel"
+    >
+      <form className={modalFormClass} onSubmit={onSubmit}>
           <div className={destinationChipClass}>
             <Icon name="folder" size={16} />
             保存到：{form.parentPath || "个人根目录"}
@@ -173,25 +161,28 @@ export function CreateScriptModal({
             </select>
           </label>
 
-          <div className={modalFooterClass}>
-            <button
-              className={secondaryButtonClass}
+          <div className="mt-[3px] flex shrink-0 justify-end gap-2 border-t border-[#e8edf2] bg-white -mx-[22px] px-[22px] py-3.5">
+            <Button
+              variant="outline"
+              size="sm"
               type="button"
               onClick={onClose}
+              className={dialogSecondaryButtonClass}
             >
               取消
-            </button>
-            <button
-              className={primaryButtonClass}
+            </Button>
+            <Button
+              variant="default"
+              size="sm"
               type="submit"
               disabled={creating || !form.name.trim()}
+              className={dialogPrimaryButtonClass}
             >
               {creating ? <span className="button-spinner" /> : <Icon name="plus" size={16} />}
               {creating ? "正在创建…" : "创建脚本"}
-            </button>
+            </Button>
           </div>
         </form>
-      </section>
-    </div>
+    </AppFormDialog>
   );
 }