refactor: 重构workspaces页面UI，使用组件化设计和Tailwind样式

src/pages/workspaces/components/CreateDialog.tsx

@@ -0,0 +1,105 @@
+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>
+  );
+}