113 lines
4.1 KiB
TypeScript
113 lines
4.1 KiB
TypeScript
import { type Workspace } from "../../services/api";
|
|
import {
|
|
AppFormDialog,
|
|
dialogPrimaryButtonClass,
|
|
dialogSecondaryButtonClass,
|
|
} from "~/components/common/AppFormDialog";
|
|
import { Button } from "~/components/ui/button";
|
|
import { Input } from "~/components/ui/input";
|
|
import { Textarea } from "~/components/ui/textarea";
|
|
import {
|
|
formFieldClass,
|
|
modalFormClass,
|
|
} from "../platform/modalUi";
|
|
|
|
const FORM_INPUT_CLASS =
|
|
"h-[39px] w-full rounded-md border border-[#d6e0e9] bg-white px-[11px] text-xs text-[#283a4e] outline-none focus:border-[#5b9ddb] focus:ring-3 focus:ring-brand/10 disabled:cursor-not-allowed disabled:opacity-50";
|
|
const FORM_TEXTAREA_CLASS =
|
|
"min-h-[92px] w-full resize-y rounded-md border border-[#d6e0e9] bg-white px-[11px] py-2.5 text-xs leading-[1.55] text-[#283a4e] outline-none focus:border-[#5b9ddb] focus:ring-3 focus:ring-brand/10";
|
|
|
|
export function ProjectEditDialog({
|
|
open,
|
|
editingProject,
|
|
projectForm,
|
|
saving,
|
|
onChangeForm,
|
|
onSubmit,
|
|
onClose,
|
|
}: {
|
|
open: boolean;
|
|
editingProject: Workspace | null;
|
|
projectForm: { workspace_code: string; workspace_name: string; quota_bytes: number; description: string };
|
|
saving: boolean;
|
|
onNotify: (notice: { tone: "success" | "error" | "info"; message: string }) => void;
|
|
onChangeForm: (next: { workspace_code: string; workspace_name: string; quota_bytes: number; description: string }) => void;
|
|
onSubmit: (event: React.FormEvent) => Promise<void> | void;
|
|
onClose: () => void;
|
|
}) {
|
|
return (
|
|
<AppFormDialog
|
|
open={open}
|
|
onOpenChange={(nextOpen) => {
|
|
if (!nextOpen) onClose();
|
|
}}
|
|
eyebrow="PROJECT"
|
|
title={editingProject ? "编辑项目" : "新建项目"}
|
|
>
|
|
<form className={modalFormClass} onSubmit={(event) => void onSubmit(event)}>
|
|
{!editingProject && (
|
|
<label className={formFieldClass}>
|
|
<span>项目编码<span className="text-danger">*</span></span>
|
|
<Input
|
|
className={FORM_INPUT_CLASS}
|
|
autoFocus
|
|
value={projectForm.workspace_code}
|
|
onChange={(event) => onChangeForm({ ...projectForm, workspace_code: event.target.value })}
|
|
placeholder="例如：model-development（小写字母、数字、连字符，3-32 字符）"
|
|
/>
|
|
</label>
|
|
)}
|
|
<label className={formFieldClass}>
|
|
<span>项目名称<span className="text-danger">*</span></span>
|
|
<Input
|
|
className={FORM_INPUT_CLASS}
|
|
value={projectForm.workspace_name}
|
|
onChange={(event) => onChangeForm({ ...projectForm, workspace_name: event.target.value })}
|
|
placeholder="请输入项目名称"
|
|
/>
|
|
</label>
|
|
<label className={formFieldClass}>
|
|
<span>配额（字节）</span>
|
|
<Input
|
|
className={FORM_INPUT_CLASS}
|
|
type="number"
|
|
value={projectForm.quota_bytes}
|
|
onChange={(event) => onChangeForm({ ...projectForm, quota_bytes: parseInt(event.target.value) || 0 })}
|
|
placeholder="0 表示无配额限制"
|
|
/>
|
|
</label>
|
|
<label className={formFieldClass}>
|
|
<span>项目描述</span>
|
|
<Textarea
|
|
className={FORM_TEXTAREA_CLASS}
|
|
value={projectForm.description}
|
|
onChange={(event) => onChangeForm({ ...projectForm, description: event.target.value })}
|
|
placeholder="请输入项目描述（可选）"
|
|
rows={4}
|
|
/>
|
|
</label>
|
|
<div className="mt-[3px] flex shrink-0 justify-end gap-2 border-t border-line bg-white -mx-[22px] px-[22px] py-3.5">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
type="button"
|
|
onClick={() => onClose()}
|
|
className={dialogSecondaryButtonClass}
|
|
>
|
|
取消
|
|
</Button>
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
type="submit"
|
|
disabled={saving}
|
|
className={dialogPrimaryButtonClass}
|
|
>
|
|
{saving ? "保存中…" : "保存"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</AppFormDialog>
|
|
);
|
|
}
|