update:Dialog替换

2026-08-26 16:48:19 +08:00
parent d7f3db1cc4
commit e326cc1a93
16 changed files with 738 additions and 675 deletions
@@ -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>
  );
 }