chore:platform文件拆分

2026-08-04 18:46:18 +08:00
parent 87382d7bda
commit 4e95399d4f
17 changed files with 2701 additions and 793 deletions
@@ -0,0 +1,165 @@
+import { type FormEvent } from "react";
+import Icon from "../common/Icon";
+import type { ScriptType, Visibility } from "../../services/api";
+
+type NewScriptForm = {
+  name: string;
+  scriptType: ScriptType;
+  visibility: Visibility;
+  parentPath: string;
+};
+
+type CreateScriptModalProps = {
+  open: boolean;
+  creating: boolean;
+  form: NewScriptForm;
+  scripts: Array<{ script_type: ScriptType; script_name: string }>;
+  onFormChange: (form: NewScriptForm) => void;
+  onSubmit: (event: FormEvent) => void;
+  onClose: () => void;
+};
+
+export function CreateScriptModal({
+  open,
+  creating,
+  form,
+  scripts,
+  onFormChange,
+  onSubmit,
+  onClose,
+}: CreateScriptModalProps) {
+  if (!open) return null;
+
+  const suffix = form.scriptType === "notebook" ? ".ipynb" : ".py";
+  const requestedName = form.name.trim();
+  const normalizedName = requestedName.toLocaleLowerCase().endsWith(suffix)
+    ? requestedName
+    : `${requestedName}${suffix}`;
+  const duplicate = scripts.some((script) =>
+    script.script_type === form.scriptType
+    && script.script_name.toLocaleLowerCase() === normalizedName.toLocaleLowerCase()
+  );
+
+  return (
+    <div className="modal-backdrop" role="presentation">
+      <section className="modal" 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}>
+          <div className="destination-chip">
+            <Icon name="folder" size={16} />
+            保存到：{form.parentPath || "个人根目录"}
+          </div>
+          <label className="form-field">
+            <span>脚本名称</span>
+            <input
+              autoFocus
+              maxLength={255}
+              placeholder={form.scriptType === "notebook"
+                ? "例如：数据探索"
+                : "例如：data_process"}
+              value={form.name}
+              onChange={(event) =>
+                onFormChange({
+                  ...form,
+                  name: event.target.value,
+                })}
+            />
+            <small>
+              系统会自动补充
+              {form.scriptType === "notebook" ? " .ipynb" : " .py"} 后缀
+            </small>
+          </label>
+
+          <fieldset className="type-picker">
+            <legend>脚本类型</legend>
+            <button
+              className={form.scriptType === "notebook" ? "is-selected" : ""}
+              type="button"
+              onClick={() => onFormChange({
+                ...form,
+                scriptType: "notebook",
+              })}
+            >
+              <span className="type-picker__icon type-picker__icon--notebook">
+                <Icon name="notebook" size={22} />
+              </span>
+              <span>
+                <strong>Jupyter Notebook</strong>
+                <small>交互式数据探索与模型实验</small>
+              </span>
+              <span className="type-picker__check">
+                <Icon name="check" size={14} />
+              </span>
+            </button>
+            <button
+              className={form.scriptType === "python" ? "is-selected" : ""}
+              type="button"
+              onClick={() => onFormChange({
+                ...form,
+                scriptType: "python",
+              })}
+            >
+              <span className="type-picker__icon type-picker__icon--python">
+                <Icon name="python" size={23} />
+              </span>
+              <span>
+                <strong>Python 脚本</strong>
+                <small>批处理、训练和模型调用任务</small>
+              </span>
+              <span className="type-picker__check">
+                <Icon name="check" size={14} />
+              </span>
+            </button>
+          </fieldset>
+
+          <label className="form-field">
+            <span>可见范围</span>
+            <select
+              value={form.visibility}
+              onChange={(event) =>
+                onFormChange({
+                  ...form,
+                  visibility: event.target.value as Visibility,
+                })}
+            >
+              <option value="private">仅自己可见</option>
+              <option value="workspace">Workspace 成员可见</option>
+              <option value="public">公开</option>
+            </select>
+          </label>
+
+          <div className="modal__footer">
+            <button
+              className="secondary-button"
+              type="button"
+              onClick={onClose}
+            >
+              取消
+            </button>
+            <button
+              className="primary-button"
+              type="submit"
+              disabled={creating || !form.name.trim()}
+            >
+              {creating ? <span className="button-spinner" /> : <Icon name="plus" size={16} />}
+              {creating ? "正在创建…" : "创建脚本"}
+            </button>
+          </div>
+        </form>
+      </section>
+    </div>
+  );
+}