update:Dialog替换

frontend/app/features/platform/PublishModal.tsx

@@ -2,21 +2,18 @@ import { type FormEvent } from "react";
 import Icon from "../../components/common/Icon";
 import type { ScriptItem, Visibility } from "../../services/api";
 import { scriptIcon } from "../../features/platform/WorkspaceTree";
+import {
+  AppFormDialog,
+  dialogPrimaryButtonClass,
+  dialogSecondaryButtonClass,
+} from "~/components/common/AppFormDialog";
+import { Button } from "~/components/ui/button";
 import {
   formFieldClass,
   formHintClass,
   formInputClass,
   formTextareaClass,
-  iconButtonClass,
-  modalBackdropClass,
-  modalEyebrowClass,
-  modalFooterClass,
   modalFormClass,
-  modalHeaderClass,
-  modalPanelClass,
-  modalTitleClass,
-  primaryButtonClass,
-  secondaryButtonClass,
 } from "./modalUi";
 
 type PublishModalProps = {
@@ -40,26 +37,18 @@ export function PublishModal({
   onSubmit,
   onClose,
 }: PublishModalProps) {
-  if (!publishTarget) 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={publishTarget !== null}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) onClose();
+      }}
+      eyebrow="不可变制品"
+      title="发布稳定版本"
+      size="panel"
+    >
+      <form className={modalFormClass} onSubmit={onSubmit}>
+          {publishTarget ? (
           <div className="mb-[17px] flex items-center gap-2.5 rounded-[7px] border border-[#dce6ef] bg-[#f8fbfd] px-3 py-[11px]">
             <span
               className={`grid size-[25px] shrink-0 place-items-center rounded-[5px] ${
@@ -79,6 +68,7 @@ export function PublishModal({
               </small>
             </span>
           </div>
+          ) : null}
           <label className={formFieldClass}>
             <span>发布说明</span>
             <textarea
@@ -105,27 +95,30 @@ export function PublishModal({
               <option value="public">公开</option>
             </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={publishing}
+              className={dialogPrimaryButtonClass}
             >
               {publishing
                 ? <span className="button-spinner" />
                 : <Icon name="release" size={16} />}
               {publishing ? "正在发布…" : "确认发布"}
-            </button>
+            </Button>
           </div>
         </form>
-      </section>
-    </div>
+    </AppFormDialog>
   );
 }