fix: DataResourceUploadModal.tsx

2026-08-14 12:28:22 +08:00
parent 480e1cc638
commit 604e66ffe0
1 changed files with 141 additions and 0 deletions
@@ -0,0 +1,141 @@
+import { type FormEvent } from "react";
+import Icon from "../common/Icon";
+import type { Visibility } from "../../services/api";
+
+type DataResourceUploadModalProps = {
+  open: boolean;
+  file: File | null;
+  resourceName: string;
+  visibility: Visibility;
+  description: string;
+  uploading: boolean;
+  parentPath: string;
+  targetPath: string;
+  onNameChange: (name: string) => void;
+  onVisibilityChange: (visibility: Visibility) => void;
+  onDescriptionChange: (description: string) => void;
+  onTargetPathChange: (path: string) => void;
+  onSubmit: (event: FormEvent) => void;
+  onClose: () => void;
+};
+
+export function DataResourceUploadModal({
+  open,
+  file,
+  resourceName,
+  visibility,
+  description,
+  uploading,
+  parentPath,
+  targetPath,
+  onNameChange,
+  onVisibilityChange,
+  onDescriptionChange,
+  onTargetPathChange,
+  onSubmit,
+  onClose,
+}: DataResourceUploadModalProps) {
+  if (!open) return null;
+
+  const finalTarget = targetPath.trim();
+  const finalPath = finalTarget
+    ? `${finalTarget}/${file?.name ?? ""}`
+    : file?.name ?? "";
+
+  return (
+    <div className="modal-backdrop" role="presentation">
+      <section className="modal modal--compact" role="dialog" aria-modal="true">
+        <div className="modal__header">
+          <div>
+            <span className="modal__eyebrow">数据资源</span>
+            <h2>上传数据文件</h2>
+          </div>
+          <button
+            className="icon-button"
+            type="button"
+            aria-label="关闭"
+            onClick={onClose}
+          >
+            <Icon name="close" />
+          </button>
+        </div>
+        <form onSubmit={onSubmit}>
+          <label className="form-field">
+            <span>已选文件</span>
+            <div>{file ? file.name : "未选择文件"}</div>
+          </label>
+          <label className="form-field">
+            <span>资源名称</span>
+            <input
+              autoFocus
+              maxLength={255}
+              placeholder="例如：训练数据"
+              value={resourceName}
+              onChange={(event) => onNameChange(event.target.value)}
+              required
+            />
+          </label>
+          <label className="form-field">
+            <span>子目录</span>
+            <input
+              type="text"
+              maxLength={1024}
+              placeholder="例如：train/v1（留空上传到当前目录）"
+              value={targetPath}
+              onChange={(event) => onTargetPathChange(event.target.value)}
+            />
+            <small className="form-field__hint">
+              {parentPath
+                ? `当前位于 ${parentPath || "根目录"} · 最终路径：${finalPath || "—"}`
+                : `最终路径：${finalPath || "—"}`}
+            </small>
+          </label>
+          <label className="form-field">
+            <span>可见性</span>
+            <select
+              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="form-field">
+            <span>描述</span>
+            <textarea
+              rows={3}
+              placeholder="可选描述"
+              value={description}
+              onChange={(event) => onDescriptionChange(event.target.value)}
+            />
+          </label>
+          <div className="modal__footer">
+            <button
+              className="secondary-button"
+              type="button"
+              onClick={onClose}
+              disabled={uploading}
+            >
+              取消
+            </button>
+            <button
+              className="primary-button"
+              type="submit"
+              disabled={uploading || !resourceName.trim()}
+            >
+              {uploading ? (
+                <span className="button-spinner" />
+              ) : (
+                <Icon name="upload" size={16} />
+              )}
+              {uploading ? "上传中…" : "上传"}
+            </button>
+          </div>
+        </form>
+      </section>
+    </div>
+  );
+}