142 lines
4.2 KiB
TypeScript
142 lines
4.2 KiB
TypeScript
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>
|
|
);
|
|
}
|