154 lines
4.4 KiB
TypeScript
154 lines
4.4 KiB
TypeScript
import { type FormEvent } from "react";
|
|
import { Upload } from "lucide-react";
|
|
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,
|
|
modalFormClass,
|
|
} from "./modalUi";
|
|
|
|
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) {
|
|
const finalTarget = targetPath.trim();
|
|
const finalPath = finalTarget
|
|
? `${finalTarget}/${file?.name ?? ""}`
|
|
: file?.name ?? "";
|
|
|
|
return (
|
|
<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>
|
|
</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="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" />
|
|
) : (
|
|
<Upload size={16} />
|
|
)}
|
|
{uploading ? "上传中…" : "上传"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</AppFormDialog>
|
|
);
|
|
}
|