generated from kevisual/vite-react-template
105 lines
3.4 KiB
TypeScript
105 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>创建Workspace</DialogTitle>
|
||
<DialogDescription>填写以下信息创建一个新的Workspace</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>
|
||
);
|
||
} |