generated from kevisual/vite-react-template
106 lines
3.4 KiB
TypeScript
106 lines
3.4 KiB
TypeScript
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { TagInput } from "./TagInput";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
|
|
export function CreateDialog({ open, onClose, onSubmit }: {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
onSubmit: (data: { title: string, tags?: string[], link?: string, summary?: string, description?: string }) => Promise<void>;
|
|
}) {
|
|
const [title, setTitle] = useState('');
|
|
const [tags, setTags] = useState<string[]>([]);
|
|
const [link, setLink] = useState('');
|
|
const [summary, setSummary] = useState('');
|
|
const [description, setDescription] = useState('');
|
|
const [submitting, setSubmitting] = useState(false);
|
|
|
|
const handleSubmit = async () => {
|
|
if (!title.trim()) {
|
|
alert('请输入标题');
|
|
return;
|
|
}
|
|
setSubmitting(true);
|
|
try {
|
|
await onSubmit({
|
|
title: title.trim(),
|
|
tags,
|
|
link: link.trim(),
|
|
summary: summary.trim(),
|
|
description: description.trim(),
|
|
});
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={(open) => !open && onClose()}>
|
|
<DialogContent className="max-w-lg!">
|
|
<DialogHeader>
|
|
<DialogTitle>创建制品</DialogTitle>
|
|
<DialogDescription>填写以下信息创建一个新的制品</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="create-title">标题</Label>
|
|
<Input
|
|
id="create-title"
|
|
value={title}
|
|
onChange={e => setTitle(e.target.value)}
|
|
placeholder="请输入标题"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>标签</Label>
|
|
<TagInput value={tags} onChange={setTags} placeholder="输入标签后按回车添加" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="create-link">链接</Label>
|
|
<Input
|
|
id="create-link"
|
|
value={link}
|
|
onChange={e => setLink(e.target.value)}
|
|
placeholder="https://..."
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="create-summary">摘要</Label>
|
|
<Input
|
|
id="create-summary"
|
|
value={summary}
|
|
onChange={e => setSummary(e.target.value)}
|
|
placeholder="简要描述"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="create-description">描述</Label>
|
|
<Textarea
|
|
id="create-description"
|
|
value={description}
|
|
onChange={e => setDescription(e.target.value)}
|
|
placeholder="详细描述..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={onClose} disabled={submitting}>取消</Button>
|
|
<Button variant="outline" onClick={handleSubmit} disabled={submitting}>
|
|
{submitting ? '创建中...' : '创建'}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|