update:Dialog替换

2026-09-02 10:10:41 +08:00
parent ed58344add
commit d0f0fd2922
16 changed files with 738 additions and 675 deletions
@@ -1,19 +1,16 @@
 import { type FormEvent } from "react";
 import Icon from "../../components/common/Icon";
+import {
+  AppFormDialog,
+  dialogPrimaryButtonClass,
+  dialogSecondaryButtonClass,
+} from "~/components/common/AppFormDialog";
+import { Button } from "~/components/ui/button";
 import {
  destinationChipClass,
  formFieldClass,
  formInputClass,
-  iconButtonClass,
-  modalBackdropClass,
-  modalCompactClass,
-  modalEyebrowClass,
-  modalFooterClass,
  modalFormClass,
-  modalHeaderClass,
-  modalTitleClass,
-  primaryButtonClass,
-  secondaryButtonClass,
 } from "./modalUi";

 type CreateFolderModalProps = {
@@ -35,26 +32,16 @@ export function CreateFolderModal({
  onSubmit,
  onClose,
 }: CreateFolderModalProps) {
-  if (!open) return null;
-
  return (
-    <div className={modalBackdropClass} role="presentation">
-      <section className={modalCompactClass} role="dialog" aria-modal="true">
-        <div className={modalHeaderClass}>
-          <div>
-            <span className={modalEyebrowClass}>WORKSPACE</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="WORKSPACE"
+      title="新建文件夹"
+    >
+      <form className={modalFormClass} onSubmit={onSubmit}>
          <div className={destinationChipClass}>
            <Icon name="folder" size={16} />
            创建到：{parentPath || "个人根目录"}
@@ -70,27 +57,30 @@ export function CreateFolderModal({
              onChange={(event) => onNameChange(event.target.value)}
            />
          </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={busy || !name.trim()}
+              className={dialogPrimaryButtonClass}
            >
              {busy
                ? <span className="button-spinner" />
                : <Icon name="folder" size={16} />}
              {busy ? "正在创建…" : "创建文件夹"}
-            </button>
+            </Button>
          </div>
        </form>
-      </section>
-    </div>
+    </AppFormDialog>
  );
 }
@@ -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>
  );
 }
@@ -1,21 +1,18 @@
 import { type FormEvent } from "react";
 import Icon from "../../components/common/Icon";
 import type { Visibility } from "../../services/api";
+import {
+  AppFormDialog,
+  dialogPrimaryButtonClass,
+  dialogSecondaryButtonClass,
+} from "~/components/common/AppFormDialog";
+import { Button } from "~/components/ui/button";
 import {
  formFieldClass,
  formHintClass,
  formInputClass,
  formTextareaClass,
-  iconButtonClass,
-  modalBackdropClass,
-  modalCompactClass,
-  modalEyebrowClass,
-  modalFooterClass,
  modalFormClass,
-  modalHeaderClass,
-  modalTitleClass,
-  primaryButtonClass,
-  secondaryButtonClass,
 } from "./modalUi";

 type DataResourceUploadModalProps = {
@@ -51,113 +48,106 @@ export function DataResourceUploadModal({
  onSubmit,
  onClose,
 }: DataResourceUploadModalProps) {
-  if (!open) return null;
-
  const finalTarget = targetPath.trim();
  const finalPath = finalTarget
    ? `${finalTarget}/${file?.name ?? ""}`
    : file?.name ?? "";

  return (
-    <div className={modalBackdropClass} role="presentation">
-      <section className={modalCompactClass} role="dialog" aria-modal="true">
-        <div className={modalHeaderClass}>
-          <div>
-            <span className={modalEyebrowClass}>数据资源</span>
-            <h2 className={modalTitleClass}>上传数据文件</h2>
+    <AppFormDialog
+      open={open}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen && !uploading) onClose();
+      }}
+      eyebrow="数据资源"
+      title="上传数据文件"
+    >
+      <form className={modalFormClass} onSubmit={onSubmit}>
+        <label className={formFieldClass}>
+          <span>已选文件</span>
+          <div className="font-normal text-[#283a4e]">
+            {file ? file.name : "未选择文件"}
          </div>
-          <button
-            className={iconButtonClass}
-            type="button"
-            aria-label="关闭"
-            onClick={onClose}
+        </label>
+        <label className={formFieldClass}>
+          <span>资源名称</span>
+          <input
+            className={formInputClass}
+            autoFocus
+            maxLength={255}
+            placeholder="例如：训练数据"
+            value={resourceName}
+            onChange={(event) => onNameChange(event.target.value)}
+            required
+          />
+        </label>
+        <label className={formFieldClass}>
+          <span>子目录</span>
+          <input
+            className={formInputClass}
+            type="text"
+            maxLength={1024}
+            placeholder="例如：train/v1（留空上传到当前目录）"
+            value={targetPath}
+            onChange={(event) => onTargetPathChange(event.target.value)}
+          />
+          <small className={formHintClass}>
+            {parentPath
+              ? `当前位于 ${parentPath || "根目录"} · 最终路径：${finalPath || "—"}`
+              : `最终路径：${finalPath || "—"}`}
+          </small>
+        </label>
+        <label className={formFieldClass}>
+          <span>可见性</span>
+          <select
+            className={formInputClass}
+            value={visibility}
+            onChange={(event) =>
+              onVisibilityChange(event.target.value as Visibility)
+            }
          >
-            <Icon name="close" />
-          </button>
+            <option value="private">私有</option>
+            <option value="workspace">工作区</option>
+            <option value="public">公开</option>
+          </select>
+        </label>
+        <label className={formFieldClass}>
+          <span>描述</span>
+          <textarea
+            className={formTextareaClass}
+            rows={3}
+            placeholder="可选描述"
+            value={description}
+            onChange={(event) => onDescriptionChange(event.target.value)}
+          />
+        </label>
+        <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}
+            disabled={uploading}
+            className={dialogSecondaryButtonClass}
+          >
+            取消
+          </Button>
+          <Button
+            variant="default"
+            size="sm"
+            type="submit"
+            disabled={uploading || !resourceName.trim()}
+            className={dialogPrimaryButtonClass}
+          >
+            {uploading ? (
+              <span className="button-spinner" />
+            ) : (
+              <Icon name="upload" size={16} />
+            )}
+            {uploading ? "上传中…" : "上传"}
+          </Button>
        </div>
-        <form className={modalFormClass} onSubmit={onSubmit}>
-          <label className={formFieldClass}>
-            <span>已选文件</span>
-            <div className="font-normal text-[#283a4e]">
-              {file ? file.name : "未选择文件"}
-            </div>
-          </label>
-          <label className={formFieldClass}>
-            <span>资源名称</span>
-            <input
-              className={formInputClass}
-              autoFocus
-              maxLength={255}
-              placeholder="例如：训练数据"
-              value={resourceName}
-              onChange={(event) => onNameChange(event.target.value)}
-              required
-            />
-          </label>
-          <label className={formFieldClass}>
-            <span>子目录</span>
-            <input
-              className={formInputClass}
-              type="text"
-              maxLength={1024}
-              placeholder="例如：train/v1（留空上传到当前目录）"
-              value={targetPath}
-              onChange={(event) => onTargetPathChange(event.target.value)}
-            />
-            <small className={formHintClass}>
-              {parentPath
-                ? `当前位于 ${parentPath || "根目录"} · 最终路径：${finalPath || "—"}`
-                : `最终路径：${finalPath || "—"}`}
-            </small>
-          </label>
-          <label className={formFieldClass}>
-            <span>可见性</span>
-            <select
-              className={formInputClass}
-              value={visibility}
-              onChange={(event) =>
-                onVisibilityChange(event.target.value as Visibility)
-              }
-            >
-              <option value="private">私有</option>
-              <option value="workspace">工作区</option>
-              <option value="public">公开</option>
-            </select>
-          </label>
-          <label className={formFieldClass}>
-            <span>描述</span>
-            <textarea
-              className={formTextareaClass}
-              rows={3}
-              placeholder="可选描述"
-              value={description}
-              onChange={(event) => onDescriptionChange(event.target.value)}
-            />
-          </label>
-          <div className={modalFooterClass}>
-            <button
-              className={secondaryButtonClass}
-              type="button"
-              onClick={onClose}
-              disabled={uploading}
-            >
-              取消
-            </button>
-            <button
-              className={primaryButtonClass}
-              type="submit"
-              disabled={uploading || !resourceName.trim()}
-            >
-              {uploading ? (
-                <span className="button-spinner" />
-              ) : (
-                <Icon name="upload" size={16} />
-              )}
-              {uploading ? "上传中…" : "上传"}
-            </button>
-          </div>
-        </form>
-      </section>
-    </div>
+      </form>
+    </AppFormDialog>
  );
 }
@@ -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>
  );
 }
@@ -2,11 +2,11 @@ import Icon from "../../components/common/Icon";
 import type { StableVersion } from "../../services/api";
 import { copyToClipboard } from "../../lib/clipboard";
 import {
-  modalBackdropClass,
-  modalEyebrowClass,
-  modalPanelClass,
-  primaryButtonClass,
-} from "./modalUi";
+  AppFormDialog,
+  dialogPrimaryButtonClass,
+} from "~/components/common/AppFormDialog";
+import { Button } from "~/components/ui/button";
+import { modalEyebrowClass } from "./modalUi";

 type VersionReceiptModalProps = {
  publishedVersion: StableVersion | null;
@@ -19,50 +19,51 @@ export function VersionReceiptModal({
  onClose,
  onCopy,
 }: VersionReceiptModalProps) {
-  if (!publishedVersion) return null;
-
  return (
-    <div className={modalBackdropClass} role="presentation">
-      <section
-        className={`${modalPanelClass} w-[min(470px,calc(100vw-40px))] px-7 py-[30px] pb-[25px] text-center`}
-        role="dialog"
-        aria-modal="true"
-      >
-        <div className="mx-auto mb-3.5 grid size-[58px] place-items-center rounded-full bg-gradient-to-br from-[#24b67d] to-[#149566] text-white shadow-[0_9px_24px_rgb(25_157_104/25%)]">
-          <Icon name="check" size={28} />
-        </div>
-        <span className={modalEyebrowClass}>STABLE VERSION</span>
-        <h2 className="mb-2 mt-[5px] text-xl text-[#24374a]">
-          稳定版本发布成功
-        </h2>
-        <p className="mx-auto mb-5 max-w-[360px] text-[11px] leading-[1.65] text-[#718093]">
-          {publishedVersion.version_label} 已成为不可变制品，
-          后续调度将通过 versions_id 引用它。
-        </p>
-        <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-[9px] rounded-[7px] border border-[#dce6ee] bg-[#f7fafc] px-3 py-[11px] text-left">
-          <span className="text-[9px] text-[#8795a4]">versions_id</span>
-          <code className="truncate text-[10px] text-[#275271]">
-            {publishedVersion.versions_id}
-          </code>
-          <button
-            type="button"
-            className="cursor-pointer rounded border border-[#bad3e8] bg-white px-2 py-1 text-[9px] text-[#2475b7]"
-            onClick={async () => {
-              await copyToClipboard(publishedVersion.versions_id);
-              onCopy("versions_id 已复制");
-            }}
-          >
-            复制
-          </button>
-        </div>
+    <AppFormDialog
+      open={publishedVersion !== null}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) onClose();
+      }}
+      showCloseButton={false}
+      contentClassName="sm:max-w-[min(470px,calc(100vw-40px))] px-7 py-[30px] pb-[25px] text-center"
+      bodyClassName="overflow-visible"
+    >
+      <div className="mx-auto mb-3.5 grid size-[58px] place-items-center rounded-full bg-gradient-to-br from-[#24b67d] to-[#149566] text-white shadow-[0_9px_24px_rgb(25_157_104/25%)]">
+        <Icon name="check" size={28} />
+      </div>
+      <span className={modalEyebrowClass}>STABLE VERSION</span>
+      <h2 className="mb-2 mt-[5px] text-xl text-[#24374a]">
+        稳定版本发布成功
+      </h2>
+      <p className="mx-auto mb-5 max-w-[360px] text-[11px] leading-[1.65] text-[#718093]">
+        {publishedVersion?.version_label} 已成为不可变制品，
+        后续调度将通过 versions_id 引用它。
+      </p>
+      <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-[9px] rounded-[7px] border border-[#dce6ee] bg-[#f7fafc] px-3 py-[11px] text-left">
+        <span className="text-[9px] text-[#8795a4]">versions_id</span>
+        <code className="truncate text-[10px] text-[#275271]">
+          {publishedVersion?.versions_id}
+        </code>
        <button
-          className={`${primaryButtonClass} mt-[17px] h-[39px] w-full border-0 bg-[#1976cf] shadow-none`}
          type="button"
-          onClick={onClose}
+          className="cursor-pointer rounded border border-[#bad3e8] bg-white px-2 py-1 text-[9px] text-[#2475b7]"
+          onClick={async () => {
+            if (!publishedVersion) return;
+            await copyToClipboard(publishedVersion.versions_id);
+            onCopy("versions_id 已复制");
+          }}
        >
-          完成
+          复制
        </button>
-      </section>
-    </div>
+      </div>
+      <Button
+        className={`${dialogPrimaryButtonClass} mt-[17px] h-[39px] w-full border-0 bg-[#1976cf] shadow-none`}
+        type="button"
+        onClick={onClose}
+      >
+        完成
+      </Button>
+    </AppFormDialog>
  );
 }
@@ -20,7 +20,7 @@ export const modalTitleClass = "mt-1 text-[19px] text-[#1c2d42]";
 export const modalFormClass = "flex-1 overflow-y-auto px-[22px] pt-[19px]";

 export const modalFooterClass =
-  "mt-[3px] flex shrink-0 justify-end gap-2 border-t border-[#e8edf2] bg-[#fafbfc] rounded-b-[11px] px-[22px] py-3.5";
+  "mt-[3px] flex shrink-0 justify-end gap-2 border-t border-[#e8edf2] bg-white rounded-b-[11px] px-[22px] py-3.5";

 export const iconButtonClass =
  "grid size-[34px] cursor-pointer place-items-center rounded-[7px] border border-[#dfe6ed] bg-white hover:border-[#b9c9da] hover:bg-[#f7faff]";