From 2097587b421670556df562d56beabeca1693ff07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=91=A3=E5=AE=8F=E5=87=AF?= Date: Fri, 26 Jun 2026 22:54:10 +0800 Subject: [PATCH] =?UTF-8?q?feat(ai=E5=86=99=E4=BD=9C):=20=E5=B7=A6?= =?UTF-8?q?=E4=BE=A7=E7=A0=94=E7=A9=B6=E6=A0=8F=E5=8A=A0=E5=8E=86=E5=8F=B2?= =?UTF-8?q?=E8=AE=B0=E5=BD=95=E5=88=97=E8=A1=A8(=E5=8F=82=E8=80=83?= =?UTF-8?q?=E4=BC=9A=E5=95=86=E6=A0=B7=E5=BC=8F)+=E4=BE=A7=E6=A0=8F?= =?UTF-8?q?=E5=8F=AF=E6=94=B6=E8=B5=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - ResearchSidebar 底部新增「历史记录」列表，跟随侧栏自然滚动；样式对齐 多智能体会商 HistoryDropdown（圆角卡片+divide-y+状态药丸+打开/改名/删除） - 点历史记录在右侧区域显示历史回看，左侧栏保留(showSidebar 含历史态) - 侧栏顶部加「收起」按钮，收起为细窄展开条(页面承载 sidebarCollapsed) - 「挂起中」记录点击经 window 事件 ai-writing:show-progress 打开进度流程图弹窗 Co-Authored-By: Claude Opus 4.8 (1M context) --- .../components/ai-writing/AIWritingPanel.tsx | 10 + .../components/ai-writing/ResearchSidebar.tsx | 227 +++++++++++++++++- .../src/open-canvas/pages/AIWritingPage.tsx | 42 +++- 3 files changed, 266 insertions(+), 13 deletions(-) diff --git a/frontend-web/src/open-canvas/components/ai-writing/AIWritingPanel.tsx b/frontend-web/src/open-canvas/components/ai-writing/AIWritingPanel.tsx index 8dc166b8..a80bb281 100644 --- a/frontend-web/src/open-canvas/components/ai-writing/AIWritingPanel.tsx +++ b/frontend-web/src/open-canvas/components/ai-writing/AIWritingPanel.tsx @@ -284,6 +284,16 @@ export function AIWritingPanel({ return () => window.removeEventListener('ai-writing:open-session', onOpenSession); }, []); + // 路径4：左侧研究栏「历史记录」点「挂起中」记录 → 打开进度流程图弹窗（与下拉历史一致）。 + useEffect(() => { + function onShowProgress(e: Event) { + const session = (e as CustomEvent).detail; + if (session) setProgressSession(session); + } + window.addEventListener('ai-writing:show-progress', onShowProgress); + return () => window.removeEventListener('ai-writing:show-progress', onShowProgress); + }, []); + // 路径3：URL ?session=xxx 直接定位到指定会话 useEffect(() => { const sessionId = searchParams.get('session'); diff --git a/frontend-web/src/open-canvas/components/ai-writing/ResearchSidebar.tsx b/frontend-web/src/open-canvas/components/ai-writing/ResearchSidebar.tsx index f161a0dd..dbccda73 100644 --- a/frontend-web/src/open-canvas/components/ai-writing/ResearchSidebar.tsx +++ b/frontend-web/src/open-canvas/components/ai-writing/ResearchSidebar.tsx @@ -3,20 +3,26 @@ import { BarChart3, BookOpen, + Eye, FileText, Globe2, + History, LayoutGrid, Loader2, Newspaper, + PanelLeftClose, + Pencil, Plus, + RefreshCw, Search, Settings2, SlidersHorizontal, Sparkles, + Trash2, TrendingUp, } from "lucide-react"; import type { LucideIcon } from "lucide-react"; -import { useEffect, useMemo, useState } from "react"; +import { useEffect, useMemo, useRef, useState } from "react"; import { useNavigate } from "react-router-dom"; import { useQueryClient } from "@tanstack/react-query"; @@ -33,9 +39,13 @@ import { useStudioNotebooks } from "@/core/studio/hooks"; import { cn } from "@/lib/utils"; import { useResearchTemplates } from "../../hooks/useResearchTemplates"; +import { useAIWritingSessions } from "../../hooks/useAIWritingSessions"; import type { ResearchTemplate } from "../../api/ai-writing-research-templates"; +import type { AIWritingSessionSummary } from "../../api/ai-writing-sessions"; import { useWritingForm } from "../../contexts/WritingFormContext"; import { useAIWriting } from "../../contexts/AIWritingContext"; +import { useAIWritingHistory } from "../../contexts/AIWritingHistoryContext"; +import { formatRelative } from "./AIWritingHistoryDropdown"; type TemplateVisual = { Icon: LucideIcon; @@ -86,14 +96,142 @@ function getTemplateVisual(tpl: ResearchTemplate, index: number): TemplateVisual return TEMPLATE_VISUALS[index % TEMPLATE_VISUALS.length]; } +// 历史记录状态药丸样式（对齐多智能体会商的历史记录观感）。 +const WRITING_STATUS_PILL: Record = { + in_progress: { label: "进行中", className: "text-primary", spin: true }, + background: { label: "挂起中", className: "text-sky-500", spin: true }, + draft_ready: { label: "草稿", className: "text-amber-500" }, + review_ready: { label: "审核", className: "text-purple-500", dot: true }, + done: { label: "完成", className: "text-emerald-500" }, + error: { label: "出错", className: "text-rose-500" }, +}; + +/** 单条历史记录项 —— 样式参考多智能体会商的 HistoryDropdown 列表项（圆角卡片 + 状态药丸 + 操作按钮）。 */ +function WritingHistoryItem({ + session, + isCurrent, + onSelect, + onShowProgress, + onDelete, + onRename, +}: { + session: AIWritingSessionSummary; + isCurrent: boolean; + onSelect: () => void; + onShowProgress?: () => void; + onDelete: () => void; + onRename: (title: string) => void; +}) { + const [renaming, setRenaming] = useState(false); + const [value, setValue] = useState(session.title); + const inputRef = useRef(null); + const isBackground = session.status === "background"; + // 「挂起中」点击看进度（流程图弹窗），其余打开历史回看。 + const open = isBackground && onShowProgress ? onShowProgress : onSelect; + const pill = WRITING_STATUS_PILL[session.status] ?? { label: session.status, className: "text-slate-400" }; + + useEffect(() => { + if (renaming) inputRef.current?.focus(); + }, [renaming]); + + const commit = () => { + const t = value.trim(); + if (t && t !== session.title) onRename(t); + setRenaming(false); + }; + + return ( +
  • +
    +
    + {renaming ? ( + setValue(e.target.value)} + onKeyDown={(e) => { + if (e.key === "Enter") commit(); + if (e.key === "Escape") { + setValue(session.title); + setRenaming(false); + } + }} + onBlur={commit} + className="w-full rounded border border-slate-300 px-2 py-1 text-[11.5px] font-semibold text-slate-800 outline-none focus:border-primary" + /> + ) : ( + + )} +
    + + {!renaming && ( +
    + + + +
    + )} +
    +
    • + ); +} + export function ResearchSidebar({ viewingNotebookId, onOpenNotebook, onOpenAllSpaces, + onCollapse, }: { viewingNotebookId?: number | null; onOpenNotebook: (notebookId: number) => void; onOpenAllSpaces: () => void; + /** 收起侧栏（由页面承载收起态）。 */ + onCollapse?: () => void; }) { const navigate = useNavigate(); const { templates, refresh } = useResearchTemplates(); @@ -116,6 +254,31 @@ export function ResearchSidebar({ } = useWritingForm(); const queryClient = useQueryClient(); + // 「历史记录」列表（左下角，样式参考多智能体会商的历史记录）：自带一份会话列表， + // 点击打开「历史回看」（openHistory，全局共享上下文，打开后本侧栏随写作进入历史态而隐藏）。 + const { + sessions, + loading: sessionsLoading, + refresh: refreshSessions, + rename: renameSession, + remove: removeSession, + } = useAIWritingSessions(); + const { openHistory, historySession } = useAIWritingHistory(); + + // 进入/返回写作配置页时刷新一次历史（本侧栏仅在 idle 态挂载，故等同每次回到表单刷新）。 + useEffect(() => { + void refreshSessions(); + }, [refreshSessions]); + + const handleSelectHistory = (session: AIWritingSessionSummary) => { + void openHistory(session); + }; + // 「挂起中」记录：交给右侧面板打开进度流程图弹窗（沿用面板已有的 window 事件解耦模式， + // 与 ai-writing:open-session 一致），本侧栏不直接持有弹窗状态。 + const handleShowProgress = (session: AIWritingSessionSummary) => { + window.dispatchEvent(new CustomEvent("ai-writing:show-progress", { detail: session })); + }; + const [templateSearch, setTemplateSearch] = useState(""); const [createOpen, setCreateOpen] = useState(false); const [name, setName] = useState(""); @@ -191,6 +354,20 @@ export function ResearchSidebar({ return (