fix:优化项目内容

frontend_spa/src/pages/workspace.tsx

@@ -0,0 +1,522 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import ReactMarkdown from "react-markdown";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Progress } from "@/components/ui/progress";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Wand2,
+  Save,
+  FileSpreadsheet,
+  FileDown,
+  Loader2,
+  Plus,
+  Search,
+  CloudUpload,
+} from "lucide-react";
+import { toast } from "sonner";
+import {
+  apiBase,
+  customersApi,
+  projectsApi,
+  templatesApi,
+  pushProjectToCloud,
+  downloadFile,
+  downloadFileAsBlob,
+  type CustomerRead,
+  type QuoteGenerateResponse,
+  type TemplateInfo,
+} from "@/lib/api/client";
+
+export default function WorkspacePage() {
+  const [customers, setCustomers] = useState<CustomerRead[]>([]);
+  const [customerId, setCustomerId] = useState<string>("");
+  const [rawText, setRawText] = useState("");
+  const [solutionMd, setSolutionMd] = useState("");
+  const [projectId, setProjectId] = useState<number | null>(null);
+  const [lastQuote, setLastQuote] = useState<QuoteGenerateResponse | null>(null);
+  const [analyzing, setAnalyzing] = useState(false);
+  const [analyzeProgress, setAnalyzeProgress] = useState(0);
+  const [saving, setSaving] = useState(false);
+  const [generatingQuote, setGeneratingQuote] = useState(false);
+  const [addCustomerOpen, setAddCustomerOpen] = useState(false);
+  const [newCustomerName, setNewCustomerName] = useState("");
+  const [newCustomerContact, setNewCustomerContact] = useState("");
+  const [newCustomerTags, setNewCustomerTags] = useState("");
+  const [addingCustomer, setAddingCustomer] = useState(false);
+  const [quoteTemplates, setQuoteTemplates] = useState<TemplateInfo[]>([]);
+  const [selectedQuoteTemplate, setSelectedQuoteTemplate] = useState<string>("");
+  const [customerSearch, setCustomerSearch] = useState("");
+  const [pushToCloudLoading, setPushToCloudLoading] = useState(false);
+  const didInitRef = useRef(false);
+
+  const loadCustomers = useCallback(
+    async (search?: string) => {
+      try {
+        const list = await customersApi.list(search?.trim() ? { q: search.trim() } : undefined);
+        setCustomers(list);
+        if (list.length > 0 && !customerId) setCustomerId(String(list[0].id));
+        if (!search?.trim()) {
+          try {
+            sessionStorage.setItem("opc_customers", JSON.stringify({ t: Date.now(), v: list }));
+          } catch {}
+        }
+      } catch {
+        toast.error("加载客户列表失败");
+      }
+    },
+    [customerId],
+  );
+
+  useEffect(() => {
+    if (!customerSearch.trim()) {
+      if (!didInitRef.current) {
+        didInitRef.current = true;
+        try {
+          const raw = sessionStorage.getItem("opc_customers");
+          if (raw) {
+            const parsed = JSON.parse(raw);
+            if (parsed?.v && Date.now() - (parsed.t || 0) < 60_000) setCustomers(parsed.v);
+          }
+        } catch {}
+        void loadCustomers("");
+        return;
+      }
+    }
+    void loadCustomers(customerSearch);
+  }, [loadCustomers, customerSearch]);
+
+  const loadQuoteTemplates = useCallback(async () => {
+    try {
+      const list = await templatesApi.list();
+      setQuoteTemplates(list.filter((t) => t.type === "excel"));
+      try {
+        sessionStorage.setItem("opc_templates", JSON.stringify({ t: Date.now(), v: list }));
+      } catch {}
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  useEffect(() => {
+    try {
+      const raw = sessionStorage.getItem("opc_templates");
+      if (raw) {
+        const parsed = JSON.parse(raw);
+        if (parsed?.v && Date.now() - (parsed.t || 0) < 60_000) {
+          setQuoteTemplates((parsed.v as TemplateInfo[]).filter((t) => t.type === "excel"));
+        }
+      }
+    } catch {}
+    void loadQuoteTemplates();
+  }, [loadQuoteTemplates]);
+
+  const handleAddCustomer = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const name = newCustomerName.trim();
+    if (!name) {
+      toast.error("请填写客户名称");
+      return;
+    }
+    setAddingCustomer(true);
+    try {
+      const created = await customersApi.create({
+        name,
+        contact_info: newCustomerContact.trim() || null,
+        tags: newCustomerTags.trim() || null,
+      });
+      toast.success("客户已添加");
+      setAddCustomerOpen(false);
+      setNewCustomerName("");
+      setNewCustomerContact("");
+      setNewCustomerTags("");
+      await loadCustomers(customerSearch);
+      setCustomerId(String(created.id));
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "添加失败";
+      toast.error(msg);
+    } finally {
+      setAddingCustomer(false);
+    }
+  };
+
+  const handleAnalyze = async () => {
+    if (!customerId || !rawText.trim()) {
+      toast.error("请选择客户并输入原始需求");
+      return;
+    }
+    setAnalyzing(true);
+    setAnalyzeProgress(8);
+    setSolutionMd("");
+    try {
+      const base = apiBase();
+      const res = await fetch(`${base}/projects/analyze_stream`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          customer_id: Number(customerId),
+          raw_text: rawText.trim(),
+        }),
+      });
+      if (!res.ok || !res.body) {
+        const text = await res.text();
+        throw new Error(text || "AI 解析失败");
+      }
+
+      let buf = "";
+      const reader = res.body.getReader();
+      const decoder = new TextDecoder("utf-8");
+
+      const progressTimer = window.setInterval(() => {
+        setAnalyzeProgress((p) => (p < 90 ? p + Math.max(1, Math.round((90 - p) / 10)) : p));
+      }, 400);
+
+      try {
+        while (true) {
+          const { value, done } = await reader.read();
+          if (done) break;
+          buf += decoder.decode(value, { stream: true });
+
+          const parts = buf.split("\n\n");
+          buf = parts.pop() || "";
+          for (const chunk of parts) {
+            const line = chunk.split("\n").find((l) => l.startsWith("data: "));
+            if (!line) continue;
+            const payload = line.slice(6);
+            let evt: any;
+            try {
+              evt = JSON.parse(payload);
+            } catch {
+              continue;
+            }
+            if (evt.type === "delta" && typeof evt.content === "string") {
+              setSolutionMd((prev) => prev + evt.content);
+            } else if (evt.type === "done" && typeof evt.project_id === "number") {
+              setProjectId(evt.project_id);
+              setLastQuote(null);
+              setAnalyzeProgress(100);
+            } else if (evt.type === "error") {
+              throw new Error(evt.message || "AI 解析失败");
+            }
+          }
+        }
+      } finally {
+        window.clearInterval(progressTimer);
+      }
+      toast.success("方案已生成（流式），可在右侧编辑");
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : "AI 解析失败";
+      toast.error(msg);
+    } finally {
+      setAnalyzing(false);
+    }
+  };
+
+  const handlePushToCloud = async (platform: "feishu" | "yuque" | "tencent") => {
+    if (projectId == null) return;
+    const md = solutionMd?.trim() || "";
+    if (!md) {
+      toast.error("请先在编辑器中填写方案内容后再推送");
+      return;
+    }
+    setPushToCloudLoading(true);
+    try {
+      const res = await pushProjectToCloud(projectId, { platform, body_md: md });
+      toast.success("已推送到云文档", {
+        action: res.url
+          ? {
+              label: "打开链接",
+              onClick: () => window.open(res.url, "_blank"),
+            }
+          : undefined,
+      });
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "推送失败");
+    } finally {
+      setPushToCloudLoading(false);
+    }
+  };
+
+  const handleSaveToArchive = async () => {
+    if (projectId == null) {
+      toast.error("请先进行 AI 解析");
+      return;
+    }
+    setSaving(true);
+    try {
+      await projectsApi.update(projectId, { ai_solution_md: solutionMd });
+      toast.success("已保存到项目档案");
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : "保存失败";
+      toast.error(msg);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDraftQuote = async () => {
+    if (projectId == null) {
+      toast.error("请先进行 AI 解析并保存");
+      return;
+    }
+    setGeneratingQuote(true);
+    try {
+      const res = await projectsApi.generateQuote(projectId, selectedQuoteTemplate || undefined);
+      setLastQuote(res);
+      toast.success("报价单已生成");
+      downloadFile(res.excel_path, `quote_project_${projectId}.xlsx`);
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : "生成报价失败";
+      toast.error(msg);
+    } finally {
+      setGeneratingQuote(false);
+    }
+  };
+
+  const handleExportPdf = async () => {
+    if (lastQuote?.pdf_path) {
+      downloadFile(lastQuote.pdf_path, `quote_project_${projectId}.pdf`);
+      toast.success("PDF 已下载");
+      return;
+    }
+    if (projectId == null) {
+      toast.error("请先进行 AI 解析");
+      return;
+    }
+    setGeneratingQuote(true);
+    try {
+      const res = await projectsApi.generateQuote(projectId, selectedQuoteTemplate || undefined);
+      setLastQuote(res);
+      await downloadFileAsBlob(res.pdf_path, `quote_project_${projectId}.pdf`);
+      toast.success("PDF 已下载");
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : "生成 PDF 失败";
+      toast.error(msg);
+    } finally {
+      setGeneratingQuote(false);
+    }
+  };
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex flex-1 min-h-0">
+        <div className="flex w-[40%] flex-col border-r">
+          <Card className="rounded-none border-0 border-b h-full flex flex-col">
+            <CardHeader className="py-3">
+              <CardTitle className="text-base flex items-center justify-between">
+                原始需求
+                <Button size="sm" onClick={handleAnalyze} disabled={analyzing || !rawText.trim() || !customerId}>
+                  {analyzing ? (
+                    <span className="w-[160px]">
+                      <Progress value={analyzeProgress} />
+                    </span>
+                  ) : (
+                    <>
+                      <Wand2 className="h-4 w-4" />
+                      <span className="ml-1.5">AI 解析</span>
+                    </>
+                  )}
+                </Button>
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="flex-1 flex flex-col gap-2 min-h-0 pt-0">
+              <div className="space-y-1.5">
+                <Label>客户</Label>
+                <div className="flex gap-1 items-center">
+                  <div className="relative flex-1">
+                    <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                    <Input
+                      placeholder="搜索客户名称/联系方式"
+                      value={customerSearch}
+                      onChange={(e) => setCustomerSearch(e.target.value)}
+                      className="pl-8 h-9"
+                    />
+                  </div>
+                </div>
+                <div className="flex gap-1">
+                  <Select value={customerId} onValueChange={setCustomerId}>
+                    <SelectTrigger className="flex-1">
+                      <SelectValue placeholder="选择客户" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {customers.map((c) => (
+                        <SelectItem key={c.id} value={String(c.id)}>
+                          <span className="flex items-center gap-2">
+                            {c.name}
+                            {c.tags && <span className="text-muted-foreground text-xs">({c.tags})</span>}
+                          </span>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <Dialog open={addCustomerOpen} onOpenChange={setAddCustomerOpen}>
+                    <DialogTrigger asChild>
+                      <Button type="button" size="icon" variant="outline" title="新建客户">
+                        <Plus className="h-4 w-4" />
+                      </Button>
+                    </DialogTrigger>
+                    <DialogContent className="sm:max-w-sm">
+                      <DialogHeader>
+                        <DialogTitle>新建客户</DialogTitle>
+                      </DialogHeader>
+                      <form onSubmit={handleAddCustomer}>
+                        <div className="grid gap-4 py-4">
+                          <div className="grid gap-2">
+                            <Label htmlFor="customer-name">客户名称</Label>
+                            <Input
+                              id="customer-name"
+                              value={newCustomerName}
+                              onChange={(e) => setNewCustomerName(e.target.value)}
+                              placeholder="必填"
+                            />
+                          </div>
+                          <div className="grid gap-2">
+                            <Label htmlFor="customer-contact">联系方式</Label>
+                            <Input
+                              id="customer-contact"
+                              value={newCustomerContact}
+                              onChange={(e) => setNewCustomerContact(e.target.value)}
+                              placeholder="选填"
+                            />
+                          </div>
+                          <div className="grid gap-2">
+                            <Label htmlFor="customer-tags">标签（逗号分隔，用于收纳筛选）</Label>
+                            <Input
+                              id="customer-tags"
+                              value={newCustomerTags}
+                              onChange={(e) => setNewCustomerTags(e.target.value)}
+                              placeholder="如：重点客户, 已签约"
+                            />
+                          </div>
+                        </div>
+                        <DialogFooter>
+                          <Button type="button" variant="outline" onClick={() => setAddCustomerOpen(false)}>
+                            取消
+                          </Button>
+                          <Button type="submit" disabled={addingCustomer}>
+                            {addingCustomer ? <Loader2 className="h-4 w-4 animate-spin" /> : "添加"}
+                          </Button>
+                        </DialogFooter>
+                      </form>
+                    </DialogContent>
+                  </Dialog>
+                </div>
+              </div>
+              <div className="flex-1 flex flex-col min-h-0">
+                <Label>微信/客户需求文本</Label>
+                <textarea
+                  className="mt-1.5 flex-1 min-h-[200px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 resize-none"
+                  placeholder="粘贴或输入客户原始需求..."
+                  value={rawText}
+                  onChange={(e) => setRawText(e.target.value)}
+                />
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="flex flex-1 flex-col min-w-0">
+          <Card className="rounded-none border-0 h-full flex flex-col">
+            <CardHeader className="py-3">
+              <CardTitle className="text-base">方案草稿（可编辑）</CardTitle>
+            </CardHeader>
+            <CardContent className="flex-1 flex flex-col min-h-0 pt-0">
+              <Tabs defaultValue="edit" className="flex-1 flex flex-col min-h-0">
+                <TabsList>
+                  <TabsTrigger value="edit">编辑</TabsTrigger>
+                  <TabsTrigger value="preview">预览</TabsTrigger>
+                </TabsList>
+                <TabsContent value="edit" className="flex-1 min-h-0 mt-2">
+                  <textarea
+                    className="h-full min-h-[320px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm font-mono ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 resize-none"
+                    placeholder="AI 解析后将在此显示 Markdown，可直接修改..."
+                    value={solutionMd}
+                    onChange={(e) => setSolutionMd(e.target.value)}
+                  />
+                </TabsContent>
+                <TabsContent value="preview" className="flex-1 min-h-0 mt-2 overflow-auto">
+                  <div className="prose prose-sm dark:prose-invert max-w-none p-2">
+                    {solutionMd ? <ReactMarkdown>{solutionMd}</ReactMarkdown> : <p className="text-muted-foreground">暂无内容</p>}
+                  </div>
+                </TabsContent>
+              </Tabs>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-3 border-t bg-card px-4 py-3 shadow-[0_-2px 10px rgba(0,0,0,0.05)] flex-wrap">
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-muted-foreground whitespace-nowrap">报价模板</span>
+          <Select value={selectedQuoteTemplate || "__latest__"} onValueChange={(v) => setSelectedQuoteTemplate(v === "__latest__" ? "" : v)}>
+            <SelectTrigger className="w-[180px] h-8">
+              <SelectValue placeholder="使用最新上传" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="__latest__">使用最新上传</SelectItem>
+              {quoteTemplates.map((t) => (
+                <SelectItem key={t.name} value={t.name}>
+                  {t.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <Button variant="outline" size="sm" onClick={handleSaveToArchive} disabled={saving || projectId == null}>
+          {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
+          <span className="ml-1.5">保存到档案</span>
+        </Button>
+        <Button variant="outline" size="sm" onClick={handleDraftQuote} disabled={generatingQuote || projectId == null}>
+          {generatingQuote ? <Loader2 className="h-4 w-4 animate-spin" /> : <FileSpreadsheet className="h-4 w-4" />}
+          <span className="ml-1.5">生成报价单 (Excel)</span>
+        </Button>
+        <Button variant="outline" size="sm" onClick={handleExportPdf} disabled={generatingQuote || projectId == null}>
+          {generatingQuote ? <Loader2 className="h-4 w-4 animate-spin" /> : <FileDown className="h-4 w-4" />}
+          <span className="ml-1.5">导出 PDF</span>
+        </Button>
+        <Select
+          value="__none__"
+          onValueChange={(v) => {
+            if (v === "feishu" || v === "yuque" || v === "tencent") void handlePushToCloud(v);
+          }}
+          disabled={pushToCloudLoading || projectId == null}
+        >
+          <SelectTrigger className="w-[140px] h-8">
+            {pushToCloudLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : <CloudUpload className="h-4 w-4 mr-1" />}
+            <SelectValue placeholder="推送到云文档" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="__none__" disabled>
+              推送到云文档
+            </SelectItem>
+            <SelectItem value="feishu">飞书文档</SelectItem>
+            <SelectItem value="yuque">语雀</SelectItem>
+            <SelectItem value="tencent">腾讯文档</SelectItem>
+          </SelectContent>
+        </Select>
+        {projectId != null && <span className="text-xs text-muted-foreground ml-2">当前项目 #{projectId}</span>}
+      </div>
+    </div>
+  );
+}
+