feat(ai写作): 左侧研究栏加历史记录列表(参考会商样式)+侧栏可收起

- ResearchSidebar 底部新增「历史记录」列表，跟随侧栏自然滚动；样式对齐
  多智能体会商 HistoryDropdown（圆角卡片+divide-y+状态药丸+打开/改名/删除）
- 点历史记录在右侧区域显示历史回看，左侧栏保留(showSidebar 含历史态)
- 侧栏顶部加「收起」按钮，收起为细窄展开条(页面承载 sidebarCollapsed)
- 「挂起中」记录点击经 window 事件 ai-writing:show-progress 打开进度流程图弹窗

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

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<AIWritingSessionSummary>).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');

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<string, { label: string; className: string; spin?: boolean; dot?: boolean }> = {
+  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<HTMLInputElement>(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 (
+    <li
+      className="px-3 py-2.5 transition-colors hover:bg-slate-50"
+      style={isCurrent ? { backgroundColor: "#ecfdf5" } : undefined}
+    >
+      <div className="flex items-start gap-2">
+        <div className="min-w-0 flex-1">
+          {renaming ? (
+            <input
+              ref={inputRef}
+              value={value}
+              onChange={(e) => 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"
+            />
+          ) : (
+            <button
+              type="button"
+              onClick={open}
+              className="block w-full text-left"
+              title={isBackground ? "查看进度" : "打开历史"}
+            >
+              <span className="line-clamp-2 text-[11.5px] font-semibold leading-snug text-slate-800">
+                {session.title}
+              </span>
+              <span className="mt-0.5 flex items-center gap-1 font-mono text-[10px] text-slate-400">
+                <span className={cn("inline-flex items-center gap-1 font-semibold", pill.className)}>
+                  {pill.spin && <Loader2 className="size-3 animate-spin" />}
+                  {pill.dot && <span className="inline-block size-1.5 animate-pulse rounded-full bg-current" />}
+                  {pill.label}
+                </span>
+                <span className="text-slate-300">·</span>
+                {formatRelative(session.updated_at)}
+              </span>
+            </button>
+          )}
+        </div>
+
+        {!renaming && (
+          <div className="flex shrink-0 items-center gap-0.5">
+            <button
+              type="button"
+              onClick={open}
+              title={isBackground ? "查看进度" : "打开"}
+              className="rounded p-1 text-slate-500 transition hover:bg-slate-100 hover:text-primary"
+            >
+              <Eye className="size-3.5" />
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setValue(session.title);
+                setRenaming(true);
+              }}
+              title="重命名"
+              className="rounded p-1 text-slate-500 transition hover:bg-slate-100 hover:text-primary"
+            >
+              <Pencil className="size-3.5" />
+            </button>
+            <button
+              type="button"
+              onClick={onDelete}
+              title="删除"
+              className="rounded p-1 text-slate-500 transition hover:bg-rose-50 hover:text-rose-600"
+            >
+              <Trash2 className="size-3.5" />
+            </button>
+          </div>
+        )}
+      </div>
+    </li>
+  );
+}
+
 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 (
     <aside className="ai-research-sidebar flex h-full w-[320px] shrink-0 flex-col overflow-hidden border-r border-slate-100 bg-white text-slate-700 shadow-[1px_0_18px_rgba(15,23,42,0.03)]">
+      {onCollapse && (
+        <div className="flex shrink-0 items-center justify-between border-b border-slate-100 px-3 py-1.5">
+          <span className="text-[11px] font-semibold tracking-wide text-slate-400">课题研究</span>
+          <button
+            type="button"
+            onClick={onCollapse}
+            title="收起侧栏"
+            aria-label="收起侧栏"
+            className="rounded-md p-1 text-slate-400 transition-colors hover:bg-slate-50 hover:text-slate-700"
+          >
+            <PanelLeftClose className="size-4" />
+          </button>
+        </div>
+      )}
       <div className="flex min-h-0 flex-1 flex-col overflow-y-auto overflow-x-hidden px-3 py-4">
         <section className="mb-5">
           <div className="mb-3 flex items-center justify-between gap-3 px-1">
@@ -276,7 +453,7 @@ export function ResearchSidebar({
           )}
         </section>
 
-        <section className="flex min-h-0 flex-1 flex-col border-t border-slate-100 pt-5">
+        <section className="flex flex-col border-t border-slate-100 pt-5">
           <div className="mb-3 flex items-center justify-between px-2">
             <h2 className="text-[15px] font-bold tracking-wide text-slate-400">
               笔记本
@@ -373,6 +550,52 @@ export function ResearchSidebar({
             </button>
           </div>
         </section>
+
+        {/* 「历史记录」列表（样式参考多智能体会商）：跟随侧栏自然向下滚动、不固定在底部。
+            点击打开历史回看（显示到右侧区域），✏️/双击改名，🗑删除，「挂起中」点击看进度。 */}
+        <section className="border-t border-slate-100 pt-5">
+          <div className="mb-3 flex items-center justify-between px-2">
+            <h2 className="flex items-center gap-1.5 text-[15px] font-bold tracking-wide text-slate-400">
+              <History className="size-3.5 text-slate-400" />
+              历史记录
+              <span className="rounded bg-slate-100 px-1.5 py-0.5 font-mono text-[10px] text-slate-400">
+                {sessions.length}
+              </span>
+            </h2>
+            <button
+              type="button"
+              onClick={() => void refreshSessions()}
+              title="刷新历史记录"
+              aria-label="刷新历史记录"
+              className={cn(
+                "rounded-md p-1 text-slate-400 transition-colors hover:bg-slate-50 hover:text-slate-600",
+                sessionsLoading && "animate-spin",
+              )}
+            >
+              <RefreshCw className="size-3.5" />
+            </button>
+          </div>
+
+          {sessions.length === 0 ? (
+            <p className="rounded-xl border border-dashed border-slate-200 px-3 py-5 text-center text-xs text-slate-400">
+              {sessionsLoading ? "加载中…" : "暂无历史记录，开始写作后自动保存到这里"}
+            </p>
+          ) : (
+            <ul className="divide-y divide-slate-100 overflow-hidden rounded-xl border border-slate-200 bg-white shadow-[0_8px_24px_rgba(15,23,42,0.04)]">
+              {sessions.map((s) => (
+                <WritingHistoryItem
+                  key={s.id}
+                  session={s}
+                  isCurrent={s.id === (historySession?.id ?? null)}
+                  onSelect={() => handleSelectHistory(s)}
+                  onShowProgress={() => handleShowProgress(s)}
+                  onDelete={() => removeSession(s.id)}
+                  onRename={(title) => renameSession(s.id, title)}
+                />
+              ))}
+            </ul>
+          )}
+        </section>
       </div>
 
       <Dialog open={createOpen} onOpenChange={(v) => !creating && setCreateOpen(v)}>

frontend-web/src/open-canvas/pages/AIWritingPage.tsx

@@ -82,7 +82,7 @@
  * ──────────────────────────────────────────────────────────────────────────
  */
 import { useRef, useState } from 'react';
-import { ArrowLeft, PanelRightOpen } from 'lucide-react';
+import { ArrowLeft, History, PanelLeftOpen, PanelRightOpen } from 'lucide-react';
 import { TooltipProvider } from '@/components/ui/tooltip';
 import { cn } from '@/lib/utils';
 import type { GroupImperativeHandle } from 'react-resizable-panels';
@@ -237,19 +237,39 @@ function AIWritingBody({ hideAdvancedFields, initialNotebookId, initialDocumentI
   const overlayActive = rightView != null;
   const viewingNotebookId = rightView?.kind === 'notebook' ? rightView.id : null;
 
-  // 进入写作（开始生成 / 查看历史）后收起研究模板侧栏；嵌入态(studioToken)始终不展示。
-  const showSidebar = !studioToken && state.status === 'idle' && !isHistoryMode;
+  // 侧栏「收起」态：由页面承载，ResearchSidebar 顶部的收起按钮触发，收起后显示一条细窄展开条。
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+
+  // 研究模板侧栏在「写作配置(idle)」与「历史回看」两态都展示（点历史记录后保留侧栏、
+  // 历史内容显示到右侧区域）；写作进行中收起；嵌入态(studioToken)始终不展示。
+  const showSidebar = !studioToken && (state.status === 'idle' || isHistoryMode);
 
   return (
     <div className="flex-1 min-h-0 overflow-hidden flex">
-      {/* 需求 0616 #5：课题研究左栏（研究模板 + 笔记本）。进入写作后收起。 */}
-      {showSidebar && (
-        <ResearchSidebar
-          viewingNotebookId={viewingNotebookId}
-          onOpenNotebook={(id) => setRightView({ kind: 'notebook', id })}
-          onOpenAllSpaces={() => setRightView({ kind: 'allSpaces' })}
-        />
-      )}
+      {/* 课题研究左栏（研究模板 + 笔记本 + 历史记录）。支持收起为细窄展开条。
+          写作配置(idle) 与 历史回看 两态都显示；写作进行中整体收起。 */}
+      {showSidebar &&
+        (sidebarCollapsed ? (
+          <div className="flex h-full w-11 shrink-0 flex-col items-center gap-2 border-r border-slate-100 bg-white py-3">
+            <button
+              type="button"
+              onClick={() => setSidebarCollapsed(false)}
+              title="展开侧栏"
+              aria-label="展开侧栏"
+              className="rounded-md p-1.5 text-slate-400 transition-colors hover:bg-slate-50 hover:text-slate-700"
+            >
+              <PanelLeftOpen className="size-4" />
+            </button>
+            <History className="size-4 text-slate-300" />
+          </div>
+        ) : (
+          <ResearchSidebar
+            viewingNotebookId={viewingNotebookId}
+            onOpenNotebook={(id) => setRightView({ kind: 'notebook', id })}
+            onOpenAllSpaces={() => setRightView({ kind: 'allSpaces' })}
+            onCollapse={() => setSidebarCollapsed(true)}
+          />
+        ))}
       {/* 右侧：写作布局常驻（仅 display:none 隐藏，避免 WritingSetupChat 重挂丢线程），
           查看笔记本 / 所有空间时在其上叠加内嵌页。 */}
       <div className="relative flex-1 min-h-0 overflow-hidden">