update:Dialog替换

frontend/app/features/schedules/SchedulePage.tsx

@@ -31,14 +31,13 @@ import { useApi, useAuth } from "~/context/AuthContext";
 import {
   formFieldClass,
   formInputClass,
-  modalBackdropClass,
-  modalCompactClass,
-  modalEyebrowClass,
-  modalFooterClass,
   modalFormClass,
-  modalHeaderClass,
-  modalTitleClass,
 } from "~/features/platform/modalUi";
+import {
+  AppFormDialog,
+  dialogPrimaryButtonClass,
+  dialogSecondaryButtonClass,
+} from "~/components/common/AppFormDialog";
 import { NodeInspector } from "./NodeInspector";
 import { RunHistory } from "./RunHistory";
 import { ScheduleInspector } from "./ScheduleInspector";
@@ -762,34 +761,16 @@ export default function SchedulePage({
         </div>
       )}
 
-      {createDialogOpen && (
-        <div className={modalBackdropClass} role="presentation">
-          <section
-            className={modalCompactClass}
-            role="dialog"
-            aria-modal="true"
-            aria-labelledby="create-schedule-title"
-          >
-            <div className={modalHeaderClass}>
-              <div>
-                <span className={modalEyebrowClass}>SCHEDULE</span>
-                <h2 id="create-schedule-title" className={modalTitleClass}>
-                  新建调度方案
-                </h2>
-              </div>
-              <Button
-                className="size-[34px] rounded-[7px] border-[#dfe6ed] bg-white hover:border-[#b9c9da] hover:bg-[#f7faff]"
-                type="button"
-                variant="ghost"
-                size="icon-lg"
-                aria-label="关闭"
-                disabled={Boolean(busy)}
-                onClick={() => setCreateDialogOpen(false)}
-              >
-                <X size={14} />
-              </Button>
-            </div>
-            <form className={modalFormClass} onSubmit={handleCreateScheduleSubmit}>
+      <AppFormDialog
+        open={createDialogOpen}
+        onOpenChange={(nextOpen) => {
+          if (!nextOpen && !busy) setCreateDialogOpen(false);
+        }}
+        eyebrow="SCHEDULE"
+        title="新建调度方案"
+        titleId="create-schedule-title"
+      >
+        <form className={modalFormClass} onSubmit={handleCreateScheduleSubmit}>
               <label className={formFieldClass}>
                 <span>调度方案名称</span>
                 <input
@@ -802,19 +783,23 @@ export default function SchedulePage({
                   onFocus={(event) => event.currentTarget.select()}
                 />
               </label>
-              <div className={modalFooterClass}>
+              <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
                   type="button"
-                  variant="secondary"
+                  variant="outline"
+                  size="sm"
                   disabled={Boolean(busy)}
                   onClick={() => setCreateDialogOpen(false)}
+                  className={dialogSecondaryButtonClass}
                 >
                   取消
                 </Button>
                 <Button
                   type="submit"
                   variant="default"
+                  size="sm"
                   disabled={Boolean(busy) || !newScheduleName.trim()}
+                  className={dialogPrimaryButtonClass}
                 >
                   {busy === "create-schedule"
                     ? <span className="button-spinner" />
@@ -823,9 +808,7 @@ export default function SchedulePage({
                 </Button>
               </div>
             </form>
-          </section>
-        </div>
-      )}
+      </AppFormDialog>
 
       {busy && (
         <div