fix: polish compact workspace controls

frontend-web/src/components/workspace/agents/agent-detail-panel.tsx

@@ -138,6 +138,7 @@ export function AgentDetailPanel({
   disabled,
   defaultCollapsed,
   showRecentChats,
+  compactAppearanceActions,
 }: {
   agent: Agent | null | undefined;
   agentName: string;
@@ -147,6 +148,8 @@ export function AgentDetailPanel({
   defaultCollapsed?: boolean;
   /** 在面板底部展示「有关此智能体的最近对话」（仅智能体问答页开启，任务工作区不展示）。 */
   showRecentChats?: boolean;
+  /** 简洁模式下挂在右上角收起/展开按钮左侧的外观控件。 */
+  compactAppearanceActions?: ReactNode;
 }) {
   const router = useRouter();
   const [collapsed, setCollapsed] = useState(defaultCollapsed ?? false);
@@ -830,6 +833,7 @@ export function AgentDetailPanel({
         <span className="text-sm font-semibold">智能体信息</span>
         <div className="flex items-center gap-1">
           {headerActions}
+          {compactAppearanceActions}
           {collapseButton}
         </div>
       </div>
@@ -841,17 +845,20 @@ export function AgentDetailPanel({
     <>
       {/* ── Desktop (lg+): inline aside, collapsible to a rail ───────────── */}
       {collapsed ? (
-        <div className="hidden shrink-0 flex-col items-center border-l pt-3 lg:flex">
+        <div className="hidden shrink-0 items-start border-l px-2 pt-3 lg:flex">
-          <Tooltip content="智能体信息">
+          <div className="flex items-center gap-1">
-            <Button
+            {compactAppearanceActions}
-              variant="ghost"
+            <Tooltip content="智能体信息">
-              size="icon-sm"
+              <Button
-              onClick={() => setCollapsed(false)}
+                variant="ghost"
-              aria-label="展开智能体信息"
+                size="icon-sm"
-            >
+                onClick={() => setCollapsed(false)}
-              <PanelRightOpenIcon className="size-4" />
+                aria-label="展开智能体信息"
-            </Button>
+              >
-          </Tooltip>
+                <PanelRightOpenIcon className="size-4" />
+              </Button>
+            </Tooltip>
+          </div>
         </div>
       ) : (
         <aside className="bg-card/40 hidden h-full w-[360px] shrink-0 flex-col border-l lg:flex">

frontend-web/src/components/workspace/appearance-controls.tsx

@@ -136,9 +136,11 @@ const LAYOUT_OPTIONS = [
 export function LayoutModeSwitcher({
   tone,
   fallback = "compact",
+  navigateTo = "/page/workspace/chats/new",
 }: {
   tone: AppearanceControlTone;
   fallback?: "full" | "compact";
+  navigateTo?: string | null;
 }) {
   const [mode, setLayoutMode] = useLayoutMode();
   const navigate = useNavigate();
@@ -170,7 +172,9 @@ export function LayoutModeSwitcher({
               key={option.id}
               onClick={() => {
                 setLayoutMode(option.id);
-                navigate("/page/workspace/chats/new");
+                if (navigateTo) {
+                  navigate(navigateTo);
+                }
               }}
               className="gap-2"
             >

frontend-web/src/components/workspace/workspace-container.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useMemo } from "react";
+import { type ReactNode, useMemo } from "react";
 
 import {
   Breadcrumb,
@@ -33,8 +33,11 @@ export function WorkspaceContainer({
 export function WorkspaceHeader({
   className,
   children,
+  rightActions,
   ...props
-}: React.ComponentProps<"header">) {
+}: React.ComponentProps<"header"> & {
+  rightActions?: ReactNode;
+}) {
   const { t } = useI18n();
   const pathname = usePathname();
   const segments = useMemo(() => {
@@ -90,6 +93,9 @@ export function WorkspaceHeader({
           </BreadcrumbList>
         </Breadcrumb>
       </div>
+      {rightActions ? (
+        <div className="flex items-center gap-2 px-4">{rightActions}</div>
+      ) : null}
     </header>
   );
 }

frontend-web/src/open-canvas/components/ai-writing/AIWritingForm.tsx

@@ -17,6 +17,7 @@ import { useStudioNotebooks, useNotebookSources } from '@/core/studio/hooks';
 import type { AIWritingRequest } from '../../types/ai-writing';
 import { useArticleTypes } from '../../hooks/useArticleTypes';
 import { useWritingForm } from '../../contexts/WritingFormContext';
+import { ResearchTemplatesPanel } from './ResearchTemplatesPanel';
 
 interface AIWritingFormProps {
   onSubmit: (req: AIWritingRequest) => void;
@@ -436,6 +437,8 @@ export function AIWritingForm({
         </Button>
       </div>
 
+      <ResearchTemplatesPanel />
+
       {!hideAdvancedFields && (
         <>
           <div className="flex items-start gap-2 rounded-xl border border-[#e8dedd] bg-[#f9f5f5] px-3 py-3">

frontend-web/src/open-canvas/components/ai-writing/AIWritingPanel.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { ChevronsDown, CloudUpload, PanelRightClose, Pause, Play, Plus, RotateCcw, Settings2, Trash2 } from 'lucide-react';
 import { toast } from 'sonner';
@@ -73,11 +73,13 @@ export function AIWritingPanel({
   initialNotebookId,
   initialDocumentIds,
   studioToken,
+  headerActionsBeforeCollapse,
 }: {
   hideAdvancedFields?: boolean;
   initialNotebookId?: number;
   initialDocumentIds?: number[];
   studioToken?: string;
+  headerActionsBeforeCollapse?: ReactNode;
 } = {}) {
   const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -429,6 +431,7 @@ export function AIWritingPanel({
             onRename={rename}
             onRefresh={refresh}
           />
+          {headerActionsBeforeCollapse}
           {/* 收起写作配置：仅在 idle 配置阶段、表单展开时出现（与 AIWritingPage 的整块收起联动） */}
           {writingForm && isIdle && !isHistoryMode && writingForm.formExpanded && (
             <Button

frontend-web/src/open-canvas/components/ai-writing/ResearchSidebar.tsx

@@ -1,29 +1,19 @@
 "use client";
 
 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, useRef, useState } from "react";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { useNavigate } from "react-router-dom";
 import { useQueryClient } from "@tanstack/react-query";
 
 import { Button } from "@/components/ui/button";
@@ -38,64 +28,11 @@ import { createSearchSpace } from "@/core/studio/api";
 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;
-  iconClass: string;
-  accentClass: string;
-};
-
-const TEMPLATE_VISUALS: TemplateVisual[] = [
-  {
-    Icon: Globe2,
-    iconClass: "bg-blue-50 text-blue-600",
-    accentClass: "bg-blue-500",
-  },
-  {
-    Icon: Newspaper,
-    iconClass: "bg-amber-50 text-amber-600",
-    accentClass: "bg-amber-500",
-  },
-  {
-    Icon: Sparkles,
-    iconClass: "bg-violet-50 text-violet-600",
-    accentClass: "bg-violet-500",
-  },
-  {
-    Icon: TrendingUp,
-    iconClass: "bg-rose-50 text-rose-600",
-    accentClass: "bg-rose-500",
-  },
-  {
-    Icon: BookOpen,
-    iconClass: "bg-emerald-50 text-emerald-600",
-    accentClass: "bg-emerald-500",
-  },
-  {
-    Icon: BarChart3,
-    iconClass: "bg-cyan-50 text-cyan-600",
-    accentClass: "bg-cyan-500",
-  },
-];
-
-function getTemplateVisual(tpl: ResearchTemplate, index: number): TemplateVisual {
-  const text = `${tpl.name} ${tpl.description ?? ""} ${tpl.article_type_key ?? ""}`;
-  if (/网摘|网络|热点|摘/.test(text)) return TEMPLATE_VISUALS[0];
-  if (/周报|周刊|日报|月报/.test(text)) return TEMPLATE_VISUALS[1];
-  if (/要讯|资讯|快讯|简报/.test(text)) return TEMPLATE_VISUALS[2];
-  if (/行业|分析|市场|竞争/.test(text)) return TEMPLATE_VISUALS[3];
-  if (/政策|解读|法规/.test(text)) return TEMPLATE_VISUALS[4];
-  return TEMPLATE_VISUALS[index % TEMPLATE_VISUALS.length];
-}
-
 // 历史记录状态药丸样式（对齐多智能体会商的历史记录观感）。
 // 注：`in_progress` 不再转圈显示「进行中」——刷新=重置后这些会话已无任何活进程，
 // 转圈会误导用户以为还在跑；统一显示为中性、不动的「未完成」。真正还在跑的是 `background`
@@ -237,25 +174,11 @@ export function ResearchSidebar({
   /** 收起侧栏（由页面承载收起态）。 */
   onCollapse?: () => void;
 }) {
-  const navigate = useNavigate();
-  const { templates, refresh } = useResearchTemplates();
-  const { startWriting } = useAIWriting();
   const {
     notebooks,
     isLoading: notebooksLoading,
     isError: notebooksError,
   } = useStudioNotebooks();
-  const {
-    setIntent,
-    setArticleType,
-    setOutlineText,
-    setShowOutline,
-    setMaterialSource,
-    setWordCountInput,
-    setAudience,
-    setStrictMode,
-    setFormExpanded,
-  } = useWritingForm();
   const queryClient = useQueryClient();
 
   // 「历史记录」列表（左下角，样式参考多智能体会商的历史记录）：自带一份会话列表，
@@ -283,26 +206,11 @@ export function ResearchSidebar({
     window.dispatchEvent(new CustomEvent("ai-writing:show-progress", { detail: session }));
   };
 
-  const [templateSearch, setTemplateSearch] = useState("");
   const [createOpen, setCreateOpen] = useState(false);
   const [name, setName] = useState("");
   const [creating, setCreating] = useState(false);
   const [createError, setCreateError] = useState("");
 
-  useEffect(() => {
-    void refresh();
-  }, [refresh]);
-
-  const filteredTemplates = useMemo(() => {
-    const keyword = templateSearch.trim().toLowerCase();
-    if (!keyword) return templates;
-    return templates.filter((tpl) =>
-      [tpl.name, tpl.description, tpl.article_type_key]
-        .filter(Boolean)
-        .some((value) => String(value).toLowerCase().includes(keyword)),
-    );
-  }, [templates, templateSearch]);
-
   const handleCreate = async () => {
     const trimmed = name.trim();
     if (!trimmed) return;
@@ -323,39 +231,6 @@ export function ResearchSidebar({
     }
   };
 
-  const handleTemplateClick = (tpl: ResearchTemplate) => {
-    const intent = tpl.topic?.trim() ?? "";
-    const articleType = tpl.article_type_key || "analysis";
-    const outline = tpl.outline?.trim() || "";
-    const audience = tpl.audience?.trim() || "普通读者";
-    const wordCount = tpl.word_count > 0 ? tpl.word_count : 800;
-    const writingMode = tpl.strict_mode ? "strict" : "loose";
-
-    if (intent) setIntent(intent);
-    if (tpl.article_type_key) setArticleType(tpl.article_type_key);
-    if (outline) {
-      setOutlineText(outline);
-      setShowOutline(true);
-    }
-    setMaterialSource(tpl.material_source);
-    setWordCountInput(String(wordCount));
-    if (tpl.audience?.trim()) setAudience(audience);
-    setStrictMode(tpl.strict_mode);
-    setFormExpanded(true);
-
-    if (!intent) return;
-    void startWriting({
-      userIntent: intent,
-      userOutline: outline || undefined,
-      articleType,
-      targetAudience: audience,
-      wordCountTarget: wordCount,
-      keywordCount: 1,
-      writingMode,
-      materialSource: tpl.material_source,
-    });
-  };
-
   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 && (
@@ -373,91 +248,7 @@ export function ResearchSidebar({
         </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">
+        <section className="flex flex-col">
-          <div className="mb-3 flex items-center justify-between gap-3 px-1">
-            <button
-              type="button"
-              onClick={() => navigate("/page/canvas/research-templates")}
-              title="配置研究模板"
-              aria-label="配置研究模板"
-              className="group flex items-center gap-2 rounded-lg text-[16px] font-bold text-slate-500 transition-colors hover:text-slate-800"
-            >
-              <SlidersHorizontal className="size-4 text-slate-400" />
-              <span>研究模板</span>
-              <Settings2 className="size-3.5 text-slate-300 opacity-0 transition-opacity group-hover:opacity-100" />
-            </button>
-            <div className="relative w-[150px]">
-              <Search className="pointer-events-none absolute left-3 top-1/2 size-3.5 -translate-y-1/2 text-slate-400" />
-              <input
-                type="text"
-                value={templateSearch}
-                onChange={(event) => setTemplateSearch(event.target.value)}
-                placeholder="搜索写作模板..."
-                className="h-8 w-full rounded-lg border border-slate-200 bg-slate-50/80 pl-8 pr-3 text-[12px] text-slate-600 outline-none transition focus:border-blue-200 focus:bg-white focus:ring-2 focus:ring-blue-100"
-              />
-            </div>
-          </div>
-
-          {templates.length === 0 ? (
-            <p className="rounded-xl border border-dashed border-slate-200 px-3 py-5 text-center text-xs text-slate-400">
-              暂无研究模板，点击标题配置
-            </p>
-          ) : filteredTemplates.length === 0 ? (
-            <p className="rounded-xl border border-dashed border-slate-200 px-3 py-5 text-center text-xs text-slate-400">
-              暂无匹配模板
-            </p>
-          ) : (
-            <div className="space-y-3">
-              {filteredTemplates.map((tpl, index) => {
-                const visual = getTemplateVisual(tpl, index);
-                const Icon = visual.Icon;
-                return (
-                  <button
-                    key={tpl.id}
-                    type="button"
-                    onClick={() => handleTemplateClick(tpl)}
-                    title={tpl.description ?? tpl.name}
-                    className="group relative flex w-full items-start gap-3 overflow-hidden rounded-[5px] bg-white px-4 py-4 text-left shadow-[0_8px_24px_rgba(15,23,42,0.04)] transition-all hover:-translate-y-0.5 hover:shadow-[0_14px_30px_rgba(30,64,175,0.08)] active:translate-y-0"
-                  >
-                    <span
-                      className={cn(
-                        "flex size-12 shrink-0 items-center justify-center rounded-xl transition-colors",
-                        visual.iconClass,
-                      )}
-                    >
-                      <Icon className="size-6 stroke-[2.2]" />
-                    </span>
-                    <span className="min-w-0 flex-1 pt-0.5">
-                      <span className="block truncate text-[16px] font-bold leading-5 text-slate-900 transition-colors group-hover:text-blue-700">
-                        {tpl.name}
-                      </span>
-                      {tpl.description && (
-                        <span
-                          className="mt-1.5 overflow-hidden text-[13px] leading-6 text-slate-500"
-                          style={{
-                            display: "-webkit-box",
-                            WebkitBoxOrient: "vertical",
-                            WebkitLineClamp: 2,
-                          }}
-                        >
-                          {tpl.description}
-                        </span>
-                      )}
-                    </span>
-                    <span
-                      className={cn(
-                        "absolute bottom-4 left-0 top-4 w-1 rounded-r-full opacity-0 transition-opacity group-hover:opacity-100",
-                        visual.accentClass,
-                      )}
-                    />
-                  </button>
-                );
-              })}
-            </div>
-          )}
-        </section>
-
-        <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">
               笔记本

frontend-web/src/open-canvas/components/ai-writing/ResearchTemplatesPanel.tsx

@@ -0,0 +1,238 @@
+"use client";
+
+import {
+  BarChart3,
+  BookOpen,
+  Globe2,
+  Newspaper,
+  Search,
+  Settings2,
+  SlidersHorizontal,
+  Sparkles,
+  TrendingUp,
+} from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { cn } from "@/lib/utils";
+
+import type { ResearchTemplate } from "../../api/ai-writing-research-templates";
+import { useAIWriting } from "../../contexts/AIWritingContext";
+import { useWritingForm } from "../../contexts/WritingFormContext";
+import { useResearchTemplates } from "../../hooks/useResearchTemplates";
+
+type TemplateVisual = {
+  Icon: LucideIcon;
+  iconClass: string;
+  accentClass: string;
+};
+
+const TEMPLATE_VISUALS: TemplateVisual[] = [
+  {
+    Icon: Globe2,
+    iconClass: "bg-blue-50 text-blue-600",
+    accentClass: "bg-blue-500",
+  },
+  {
+    Icon: Newspaper,
+    iconClass: "bg-amber-50 text-amber-600",
+    accentClass: "bg-amber-500",
+  },
+  {
+    Icon: Sparkles,
+    iconClass: "bg-violet-50 text-violet-600",
+    accentClass: "bg-violet-500",
+  },
+  {
+    Icon: TrendingUp,
+    iconClass: "bg-rose-50 text-rose-600",
+    accentClass: "bg-rose-500",
+  },
+  {
+    Icon: BookOpen,
+    iconClass: "bg-emerald-50 text-emerald-600",
+    accentClass: "bg-emerald-500",
+  },
+  {
+    Icon: BarChart3,
+    iconClass: "bg-cyan-50 text-cyan-600",
+    accentClass: "bg-cyan-500",
+  },
+];
+
+function getTemplateVisual(
+  tpl: ResearchTemplate,
+  index: number,
+): TemplateVisual {
+  const text = `${tpl.name} ${tpl.description ?? ""} ${tpl.article_type_key ?? ""}`;
+  if (/网摘|网络|热点|摘/.test(text)) return TEMPLATE_VISUALS[0];
+  if (/周报|周刊|日报|月报/.test(text)) return TEMPLATE_VISUALS[1];
+  if (/要讯|资讯|快讯|简报/.test(text)) return TEMPLATE_VISUALS[2];
+  if (/行业|分析|市场|竞争/.test(text)) return TEMPLATE_VISUALS[3];
+  if (/政策|解读|法规/.test(text)) return TEMPLATE_VISUALS[4];
+  return TEMPLATE_VISUALS[index % TEMPLATE_VISUALS.length];
+}
+
+export function ResearchTemplatesPanel({
+  className,
+}: {
+  className?: string;
+}) {
+  const navigate = useNavigate();
+  const { templates, refresh } = useResearchTemplates();
+  const { startWriting } = useAIWriting();
+  const {
+    setIntent,
+    setArticleType,
+    setOutlineText,
+    setShowOutline,
+    setMaterialSource,
+    setWordCountInput,
+    setAudience,
+    setStrictMode,
+    setFormExpanded,
+  } = useWritingForm();
+  const [templateSearch, setTemplateSearch] = useState("");
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  const filteredTemplates = useMemo(() => {
+    const keyword = templateSearch.trim().toLowerCase();
+    if (!keyword) return templates;
+    return templates.filter((tpl) =>
+      [tpl.name, tpl.description, tpl.article_type_key]
+        .filter(Boolean)
+        .some((value) => String(value).toLowerCase().includes(keyword)),
+    );
+  }, [templates, templateSearch]);
+
+  const handleTemplateClick = (tpl: ResearchTemplate) => {
+    const intent = tpl.topic?.trim() ?? "";
+    const articleType = tpl.article_type_key || "analysis";
+    const outline = tpl.outline?.trim() || "";
+    const audience = tpl.audience?.trim() || "普通读者";
+    const wordCount = tpl.word_count > 0 ? tpl.word_count : 800;
+    const writingMode = tpl.strict_mode ? "strict" : "loose";
+
+    if (intent) setIntent(intent);
+    if (tpl.article_type_key) setArticleType(tpl.article_type_key);
+    if (outline) {
+      setOutlineText(outline);
+      setShowOutline(true);
+    }
+    setMaterialSource(tpl.material_source);
+    setWordCountInput(String(wordCount));
+    if (tpl.audience?.trim()) setAudience(audience);
+    setStrictMode(tpl.strict_mode);
+    setFormExpanded(true);
+
+    if (!intent) return;
+    void startWriting({
+      userIntent: intent,
+      userOutline: outline || undefined,
+      articleType,
+      targetAudience: audience,
+      wordCountTarget: wordCount,
+      keywordCount: 1,
+      writingMode,
+      materialSource: tpl.material_source,
+    });
+  };
+
+  return (
+    <section
+      className={cn(
+        "rounded-2xl border border-[#ece5e4] bg-card p-5 shadow-sm dark:border-[#213D5E] dark:bg-[#02244C]",
+        className,
+      )}
+    >
+      <div className="mb-4 flex items-center justify-between gap-3">
+        <button
+          type="button"
+          onClick={() => navigate("/page/canvas/research-templates")}
+          title="配置研究模板"
+          aria-label="配置研究模板"
+          className="group flex items-center gap-2 rounded-lg text-[16px] font-bold text-slate-600 transition-colors hover:text-slate-900 dark:text-white"
+        >
+          <SlidersHorizontal className="size-4 text-slate-400 dark:text-white/70" />
+          <span>研究模板</span>
+          <Settings2 className="size-3.5 text-slate-300 opacity-0 transition-opacity group-hover:opacity-100 dark:text-white/60" />
+        </button>
+        <div className="relative min-w-0 flex-1 sm:max-w-[180px]">
+          <Search className="pointer-events-none absolute left-3 top-1/2 size-3.5 -translate-y-1/2 text-slate-400" />
+          <input
+            type="text"
+            value={templateSearch}
+            onChange={(event) => setTemplateSearch(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") event.preventDefault();
+            }}
+            placeholder="搜索写作模板..."
+            className="h-8 w-full rounded-lg border border-slate-200 bg-slate-50/80 pl-8 pr-3 text-[12px] text-slate-600 outline-none transition focus:border-blue-200 focus:bg-white focus:ring-2 focus:ring-blue-100 dark:border-[#1B477E] dark:bg-[#022248] dark:text-[#AACEFF]"
+          />
+        </div>
+      </div>
+
+      {templates.length === 0 ? (
+        <p className="rounded-xl border border-dashed border-slate-200 px-3 py-5 text-center text-xs text-slate-400">
+          暂无研究模板，点击标题配置
+        </p>
+      ) : filteredTemplates.length === 0 ? (
+        <p className="rounded-xl border border-dashed border-slate-200 px-3 py-5 text-center text-xs text-slate-400">
+          暂无匹配模板
+        </p>
+      ) : (
+        <div className="space-y-3">
+          {filteredTemplates.map((tpl, index) => {
+            const visual = getTemplateVisual(tpl, index);
+            const Icon = visual.Icon;
+            return (
+              <button
+                key={tpl.id}
+                type="button"
+                onClick={() => handleTemplateClick(tpl)}
+                title={tpl.description ?? tpl.name}
+                className="group relative flex w-full items-start gap-3 overflow-hidden rounded-[5px] bg-white px-4 py-4 text-left shadow-[0_8px_24px_rgba(15,23,42,0.04)] transition-all hover:-translate-y-0.5 hover:shadow-[0_14px_30px_rgba(30,64,175,0.08)] active:translate-y-0 dark:bg-[#032650]"
+              >
+                <span
+                  className={cn(
+                    "flex size-12 shrink-0 items-center justify-center rounded-xl transition-colors",
+                    visual.iconClass,
+                  )}
+                >
+                  <Icon className="size-6 stroke-[2.2]" />
+                </span>
+                <span className="min-w-0 flex-1 pt-0.5">
+                  <span className="block truncate text-[16px] font-bold leading-5 text-slate-900 transition-colors group-hover:text-blue-700 dark:text-white">
+                    {tpl.name}
+                  </span>
+                  {tpl.description && (
+                    <span
+                      className="mt-1.5 overflow-hidden text-[13px] leading-6 text-slate-500 dark:text-[#AACEFF]/75"
+                      style={{
+                        display: "-webkit-box",
+                        WebkitBoxOrient: "vertical",
+                        WebkitLineClamp: 2,
+                      }}
+                    >
+                      {tpl.description}
+                    </span>
+                  )}
+                </span>
+                <span
+                  className={cn(
+                    "absolute bottom-4 left-0 top-4 w-1 rounded-r-full opacity-0 transition-opacity group-hover:opacity-100",
+                    visual.accentClass,
+                  )}
+                />
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </section>
+  );
+}

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

@@ -81,7 +81,7 @@
  *         -d '{"retention_days": 0}'
  * ──────────────────────────────────────────────────────────────────────────
  */
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import {
   ArrowLeft,
   History,
@@ -113,6 +113,10 @@ import StudioNotebookDetailPage from '@/pages/StudioNotebookDetailPage';
 import StudioNotebooksPage from '@/pages/StudioNotebooksPage';
 import AgentChatPage from '@/pages/AgentChatPage';
 import { ChatRuntime } from '@/pages/WorkspaceRoutes';
+import {
+  LayoutModeSwitcher,
+  ThemeSwitcher,
+} from '@/components/workspace/appearance-controls';
 import {
   AgentModuleSidebar,
   useAgentModuleSidebarData,
@@ -137,10 +141,20 @@ const WRITING_ID = 'aw-writing';
 const DRAFT_ID = 'aw-draft';
 const AI_WRITING_AGENT_MODULE_KEY = 'ai-writing';
 const AI_WRITING_AGENT_MODULE_TITLE = 'AI 写作智能体';
+const AI_WRITING_LAST_AGENT_KEY = `agent-module:${AI_WRITING_AGENT_MODULE_KEY}:last-agent`;
 
 // Match the original canvas page proportions (chat=35, artifact=65)
 const DEFAULT_LAYOUT = { [WRITING_ID]: 35, [DRAFT_ID]: 65 };
 
+function AIWritingCompactAppearanceActions() {
+  return (
+    <div className="flex items-center gap-1">
+      <ThemeSwitcher tone="content" />
+      <LayoutModeSwitcher tone="content" />
+    </div>
+  );
+}
+
 function useAIWritingRouteBase() {
   const { pathname } = useLocation();
   return useMemo(() => {
@@ -170,7 +184,15 @@ function useAIWritingAgentRouteState(base: string) {
 
 function AIWritingAgentDefaultRedirect() {
   const { groups, isLoading } = useAgentModuleSidebarData(AI_WRITING_AGENT_MODULE_KEY);
-  const firstAgent = groups.flatMap((group) => group.agents)[0];
+  const agents = groups.flatMap((group) => group.agents);
+  const lastAgentId = (() => {
+    try {
+      return sessionStorage.getItem(AI_WRITING_LAST_AGENT_KEY);
+    } catch {
+      return null;
+    }
+  })();
+  const targetAgent = agents.find((agent) => agent.id === lastAgentId) ?? agents[0];
 
   if (isLoading) {
     return (
@@ -180,7 +202,7 @@ function AIWritingAgentDefaultRedirect() {
     );
   }
 
-  if (!firstAgent) {
+  if (!targetAgent) {
     return (
       <div className="flex size-full items-center justify-center px-6 text-center text-sm text-muted-foreground">
         暂无可用智能体，请先在模块设置中配置或创建智能体。
@@ -188,24 +210,44 @@ function AIWritingAgentDefaultRedirect() {
     );
   }
 
-  return <Navigate to={`agents/${firstAgent.id}/chats/new`} replace />;
+  return <Navigate to={`agents/${targetAgent.id}/chats/new`} replace />;
 }
 
-function AIWritingAgentChatRoute() {
+function AIWritingAgentChatRoute({
+  compactAppearanceActions,
+}: {
+  compactAppearanceActions?: ReactNode;
+}) {
   const { agent_id } = useParams<{ agent_id: string }>();
   return (
     <ChatRuntime>
-      <AgentChatPage key={agent_id} />
+      <AgentChatPage
+        key={agent_id}
+        compactAppearanceActions={compactAppearanceActions}
+      />
     </ChatRuntime>
   );
 }
 
-function AIWritingAgentRoutes({ base }: { base: string }) {
+function AIWritingAgentRoutes({
+  base,
+  compactAppearanceActions,
+}: {
+  base: string;
+  compactAppearanceActions?: ReactNode;
+}) {
   return (
     <RouteBaseProvider value={base}>
       <Routes>
         <Route index element={<AIWritingAgentDefaultRedirect />} />
-        <Route path="agents/:agent_id/chats/:thread_id" element={<AIWritingAgentChatRoute />} />
+        <Route
+          path="agents/:agent_id/chats/:thread_id"
+          element={
+            <AIWritingAgentChatRoute
+              compactAppearanceActions={compactAppearanceActions}
+            />
+          }
+        />
       </Routes>
     </RouteBaseProvider>
   );
@@ -220,11 +262,26 @@ interface NotebookProps {
   studioToken?: string;
 }
 
-function WritingFormPanel({ hideAdvancedFields, initialNotebookId, initialDocumentIds, studioToken }: { hideAdvancedFields: boolean } & NotebookProps) {
+function WritingFormPanel({
+  hideAdvancedFields,
+  initialNotebookId,
+  initialDocumentIds,
+  studioToken,
+  headerActionsBeforeCollapse,
+}: {
+  hideAdvancedFields: boolean;
+  headerActionsBeforeCollapse?: ReactNode;
+} & NotebookProps) {
   return (
     // 与原布局保持相同的 flex-1 min-h-0 包裹，确保内部 h-full 正确解析
     <div className="flex-1 min-h-0 overflow-hidden">
-      <AIWritingPanel hideAdvancedFields={hideAdvancedFields} initialNotebookId={initialNotebookId} initialDocumentIds={initialDocumentIds} studioToken={studioToken} />
+      <AIWritingPanel
+        hideAdvancedFields={hideAdvancedFields}
+        initialNotebookId={initialNotebookId}
+        initialDocumentIds={initialDocumentIds}
+        studioToken={studioToken}
+        headerActionsBeforeCollapse={headerActionsBeforeCollapse}
+      />
     </div>
   );
 }
@@ -234,7 +291,16 @@ function WritingFormPanel({ hideAdvancedFields, initialNotebookId, initialDocume
  *  - idle（初始问答阶段）：左=「写作助手 Q&A」，右=「写作配置选项」表单；
  *  - 开始写作后：回到原布局——左=写作配置/时间线面板，右=草稿预览。
  */
-function AIWritingLayout({ hideAdvancedFields, initialNotebookId, initialDocumentIds, studioToken }: { hideAdvancedFields: boolean } & NotebookProps) {
+function AIWritingLayout({
+  hideAdvancedFields,
+  initialNotebookId,
+  initialDocumentIds,
+  studioToken,
+  compactAppearanceActions,
+}: {
+  hideAdvancedFields: boolean;
+  compactAppearanceActions?: ReactNode;
+} & NotebookProps) {
   const layoutRef = useRef<GroupImperativeHandle>(null);
   const { state } = useAIWriting();
   const { isHistoryMode } = useAIWritingHistory();
@@ -262,19 +328,28 @@ function AIWritingLayout({ hideAdvancedFields, initialNotebookId, initialDocumen
             formExpanded ? 'w-[36%] min-w-[340px] max-w-[600px] border-l' : 'w-0 min-w-0',
           )}
         >
-          <WritingFormPanel hideAdvancedFields={hideAdvancedFields} initialNotebookId={initialNotebookId} initialDocumentIds={initialDocumentIds} studioToken={studioToken} />
+          <WritingFormPanel
+            hideAdvancedFields={hideAdvancedFields}
+            initialNotebookId={initialNotebookId}
+            initialDocumentIds={initialDocumentIds}
+            studioToken={studioToken}
+            headerActionsBeforeCollapse={compactAppearanceActions}
+          />
         </div>
 
         {/* 收起态：右上角浮动展开图标按钮（与展开态头部的收起按钮位置呼应） */}
         {!formExpanded && (
-          <button
+          <div className="absolute right-3 top-2 z-10 flex items-center gap-1">
-            type="button"
+            {compactAppearanceActions}
-            onClick={() => setFormExpanded(true)}
+            <button
-            title="展开写作配置"
+              type="button"
-            className="absolute right-3 top-2 z-10 flex h-7 w-7 items-center justify-center rounded-md border bg-background text-muted-foreground shadow-sm transition-colors hover:bg-muted hover:text-foreground"
+              onClick={() => setFormExpanded(true)}
-          >
+              title="展开写作配置"
-            <PanelRightOpen className="size-4" />
+              className="flex h-7 w-7 items-center justify-center rounded-md border bg-background text-muted-foreground shadow-sm transition-colors hover:bg-muted hover:text-foreground"
-          </button>
+            >
+              <PanelRightOpen className="size-4" />
+            </button>
+          </div>
         )}
       </div>
     );
@@ -322,7 +397,16 @@ function AIWritingLayout({ hideAdvancedFields, initialNotebookId, initialDocumen
  * 写作页主体（侧栏 + 内容区）。放在 Provider 内部，以便读 useAIWriting 状态：
  * 进入写作（status !== idle 或查看历史）后自动收起左侧研究模板栏，让写作区更宽。
  */
-function AIWritingBody({ hideAdvancedFields, initialNotebookId, initialDocumentIds, studioToken }: { hideAdvancedFields: boolean } & NotebookProps) {
+function AIWritingBody({
+  hideAdvancedFields,
+  initialNotebookId,
+  initialDocumentIds,
+  studioToken,
+  compactChrome = false,
+}: {
+  hideAdvancedFields: boolean;
+  compactChrome?: boolean;
+} & NotebookProps) {
   const { state } = useAIWriting();
   const { isHistoryMode } = useAIWritingHistory();
   const location = useLocation();
@@ -354,6 +438,9 @@ function AIWritingBody({ hideAdvancedFields, initialNotebookId, initialDocumentI
   // 历史内容显示到右侧区域）；写作进行中收起；嵌入态(studioToken)始终不展示。
   const showSidebar =
     !studioToken && (state.status === 'idle' || isHistoryMode || agentsActive);
+  const compactAppearanceActions = compactChrome ? (
+    <AIWritingCompactAppearanceActions />
+  ) : null;
 
   return (
     <div className="flex-1 min-h-0 overflow-hidden flex">
@@ -459,7 +546,13 @@ function AIWritingBody({ hideAdvancedFields, initialNotebookId, initialDocumentI
           查看笔记本 / 所有空间时在其上叠加内嵌页。 */}
       <div className="relative flex-1 min-h-0 overflow-hidden">
         <div className={cn('absolute inset-0', (overlayActive || agentsActive) && 'hidden')}>
-          <AIWritingLayout hideAdvancedFields={hideAdvancedFields} initialNotebookId={initialNotebookId} initialDocumentIds={initialDocumentIds} studioToken={studioToken} />
+          <AIWritingLayout
+            hideAdvancedFields={hideAdvancedFields}
+            initialNotebookId={initialNotebookId}
+            initialDocumentIds={initialDocumentIds}
+            studioToken={studioToken}
+            compactAppearanceActions={compactAppearanceActions}
+          />
         </div>
         {overlayActive && !agentsActive && (
           <div className="absolute inset-0 flex flex-col bg-background">
@@ -500,7 +593,10 @@ function AIWritingBody({ hideAdvancedFields, initialNotebookId, initialDocumentI
         )}
         {agentsActive && (
           <div className="absolute inset-0 bg-background">
-            <AIWritingAgentRoutes base={routeBase} />
+            <AIWritingAgentRoutes
+              base={routeBase}
+              compactAppearanceActions={compactAppearanceActions}
+            />
           </div>
         )}
       </div>
@@ -521,11 +617,13 @@ export default function AIWritingPage({
   initialNotebookId,
   initialDocumentIds,
   studioToken,
+  compactChrome = false,
 }: {
   hideAdvancedFields?: boolean;
   initialNotebookId?: number;
   initialDocumentIds?: number[];
   studioToken?: string;
+  compactChrome?: boolean;
 } = {}) {
   return (
     <CanvasThreadProvider>
@@ -545,6 +643,7 @@ export default function AIWritingPage({
                       initialNotebookId={initialNotebookId}
                       initialDocumentIds={initialDocumentIds}
                       studioToken={studioToken}
+                      compactChrome={compactChrome}
                     />
                   </div>
                 </TooltipProvider>

frontend-web/src/pages/AgentChatPage.tsx

@@ -4,7 +4,7 @@ import { BotIcon, PlusSquare } from "lucide-react";
 import { useParams, useRouter } from "next/navigation";
 import { useLocation } from "react-router-dom";
 import { useRouteBase } from "@/core/route-base";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 
 import type { PromptInputMessage } from "@/components/ai-elements/prompt-input";
 import { Button } from "@/components/ui/button";
@@ -65,6 +65,7 @@ export default function AgentChatPage({
   taskBind,
   autoStartWhenPurposeEmpty,
   showAgentList,
+  compactAppearanceActions,
 }: {
   /** 当作为「通用问答右侧嵌入」渲染时由父组件传入的 agent id（替代路由参数）。
    *  传入即视为嵌入态：路由仍停留在 /chats/new，仅右侧问答区换成该智能体的对话。 */
@@ -85,6 +86,8 @@ export default function AgentChatPage({
   /** 是否在最左侧展示「智能体列表」栏（顶部下拉切换 我的/广场，点击进入该智能体对话）。
    *  仅独立的智能体问答整页开启；任务工作区 / 模块页 / 嵌入态不传（各有自己的左栏）。 */
   showAgentList?: boolean;
+  /** 简洁模式下，挂到右侧智能体信息面板收起按钮左侧的外观控件。 */
+  compactAppearanceActions?: ReactNode;
 } = {}) {
   const routeBase = useRouteBase();
   const { t } = useI18n();
@@ -589,6 +592,7 @@ export default function AgentChatPage({
           onAskQuestion={(text) => handleSubmit({ text, files: [] })}
           defaultCollapsed={taskCtxOn}
           showRecentChats={!taskCtxOn}
+          compactAppearanceActions={compactAppearanceActions}
         />
       </div>
 

frontend-web/src/pages/ChatsPage.tsx

@@ -15,6 +15,10 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { ImportConversationsDialog } from "@/components/workspace/thread-share-dialogs";
+import {
+  LayoutModeSwitcher,
+  ThemeSwitcher,
+} from "@/components/workspace/appearance-controls";
 import {
   WorkspaceBody,
   WorkspaceContainer,
@@ -40,7 +44,11 @@ import { cn } from "@/lib/utils";
 
 const PAGE_SIZE = 20;
 
-export default function ChatsPage() {
+export default function ChatsPage({
+  compactChrome = false,
+}: {
+  compactChrome?: boolean;
+}) {
   const pathOfThread = usePathOfThread();
   const { t } = useI18n();
   const { toggle: togglePin } = useToggleThreadPin();
@@ -171,7 +179,16 @@ export default function ChatsPage() {
 
   return (
     <WorkspaceContainer>
-      <WorkspaceHeader></WorkspaceHeader>
+      <WorkspaceHeader
+        rightActions={
+          compactChrome ? (
+            <div className="flex items-center gap-1">
+              <ThemeSwitcher tone="content" />
+              <LayoutModeSwitcher tone="content" />
+            </div>
+          ) : null
+        }
+      />
       <WorkspaceBody>
         <div className="flex size-full flex-col">
           <header className="flex shrink-0 flex-col items-center gap-3 pt-8">

frontend-web/src/pages/ScheduledTasksPage.tsx

@@ -43,6 +43,10 @@ import {
   WorkspaceContainer,
   WorkspaceHeader,
 } from "@/components/workspace/workspace-container";
+import {
+  LayoutModeSwitcher,
+  ThemeSwitcher,
+} from "@/components/workspace/appearance-controls";
 import { TagChipList } from "@/components/workspace/tags/tag-chip";
 import { TagPickerDialog } from "@/components/workspace/tags/tag-picker-dialog";
 import { TagSearchBar } from "@/components/workspace/tags/tag-search-bar";
@@ -144,7 +148,11 @@ const SCHEDULED_TASK_TEXTAREA_CLASS =
 const DESCRIPTION_TEXTAREA_ROWS = 4;
 const PROMPT_TEXTAREA_ROWS = 10;
 
-export default function ScheduledTasksPage() {
+export default function ScheduledTasksPage({
+  compactChrome = false,
+}: {
+  compactChrome?: boolean;
+}) {
   const queryClient = useQueryClient();
   const { theme } = useTheme();
   const darkToastOpts =
@@ -490,7 +498,16 @@ export default function ScheduledTasksPage() {
 
   return (
     <WorkspaceContainer>
-      <WorkspaceHeader />
+      <WorkspaceHeader
+        rightActions={
+          compactChrome ? (
+            <div className="flex items-center gap-1">
+              <ThemeSwitcher tone="content" />
+              <LayoutModeSwitcher tone="content" />
+            </div>
+          ) : null
+        }
+      />
       <WorkspaceBody>
         <div className="grid size-full min-h-0 grid-cols-1 grid-rows-[minmax(0,1fr)_minmax(0,1fr)] gap-4 p-4 xl:grid-cols-[420px_minmax(0,1fr)] xl:grid-rows-1">
           <Card className="flex min-h-0 min-w-0 flex-col">

frontend-web/src/pages/WorkspaceRoutes.tsx

@@ -5,7 +5,12 @@ import { getStoredAuth } from '@/core/auth';
 
 import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
 import { PromptInputProvider } from '@/components/ai-elements/prompt-input';
+import {
+  LayoutModeSwitcher,
+  ThemeSwitcher,
+} from '@/components/workspace/appearance-controls';
 import { WorkspaceSidebar } from '@/components/workspace/workspace-sidebar';
+import { UserIdentityBadge } from '@/components/workspace/user-identity-badge';
 import { CommandPalette } from '@/components/workspace/command-palette';
 import { Toaster } from 'sonner';
 import { SubtasksProvider } from '@/core/tasks/context';
@@ -72,6 +77,27 @@ function isInIframe(): boolean {
   }
 }
 
+function shouldShowCompactTopActions(pathname: string): boolean {
+  return (
+    pathname === '/page/workspace/agents' ||
+    pathname === '/page/workspace/skills' ||
+    pathname === '/page/workspace/memory' ||
+    pathname === '/page/workspace/knowledge' ||
+    pathname.startsWith('/page/workspace/knowledge/')
+  );
+}
+
+function CompactWorkspaceTopActions() {
+  return (
+    <div className="z-[60] flex h-12 shrink-0 items-center justify-end gap-2 border-b border-border/70 bg-card/90 px-4 shadow-sm backdrop-blur-md">
+      <ThemeSwitcher tone="content" />
+      <LayoutModeSwitcher tone="content" />
+      <div className="bg-border/70 mx-1 h-6 w-px shrink-0" aria-hidden />
+      <UserIdentityBadge />
+    </div>
+  );
+}
+
 export function WorkspaceLayout({
   children,
   pageSidebarCollapsed,
@@ -98,7 +124,10 @@ export function WorkspaceLayout({
 }) {
   // 全量模式下通用问答（/page/workspace/chats*）的历史侧栏默认展开；其余紧凑页
   // （如智能体对话，为聊天区更宽而默认收起）维持原默认。
-  const isGeneralQa = useLocation().pathname.startsWith("/page/workspace/chats");
+  const pathname = useLocation().pathname;
+  const isGeneralQa = pathname.startsWith('/page/workspace/chats');
+  const showCompactTopActions =
+    headerHidden && shouldShowCompactTopActions(pathname);
 
   const pageSidebarWidth = pageSidebarHidden
     ? '0rem'
@@ -136,7 +165,14 @@ export function WorkspaceLayout({
       <SidebarInset
         className={cn('min-w-0', insetOverflowHidden && 'overflow-hidden')}
       >
-        {children}
+        {showCompactTopActions ? (
+          <>
+            <CompactWorkspaceTopActions />
+            <div className="min-h-0 flex-1">{children}</div>
+          </>
+        ) : (
+          children
+        )}
       </SidebarInset>
       <CommandPalette />
       <Toaster position="top-center" />
@@ -222,7 +258,7 @@ export default function WorkspaceRoutes({
           path="chats"
           element={
             <WorkspaceLayout {...layoutProps}>
-              <ChatsPage />
+              <ChatsPage compactChrome={headerHidden} />
             </WorkspaceLayout>
           }
         />
@@ -338,7 +374,10 @@ export default function WorkspaceRoutes({
           path="ai-writing/*"
           element={
             <WorkspaceLayout {...layoutProps}>
-              <AIWritingPage hideAdvancedFields />
+              <AIWritingPage
+                hideAdvancedFields
+                compactChrome={headerHidden}
+              />
             </WorkspaceLayout>
           }
         />
@@ -371,7 +410,7 @@ export default function WorkspaceRoutes({
           element={
             <WorkspaceLayout {...layoutProps}>
               <ChatRuntime>
-                <RoundtablePlanningPage />
+                <RoundtablePlanningPage compactChrome={headerHidden} />
               </ChatRuntime>
             </WorkspaceLayout>
           }
@@ -433,7 +472,7 @@ export default function WorkspaceRoutes({
           path="scheduled/tasks"
           element={
             <WorkspaceLayout {...layoutProps}>
-              <ScheduledTasksPage />
+              <ScheduledTasksPage compactChrome={headerHidden} />
             </WorkspaceLayout>
           }
         />

frontend-web/src/roundtable-planning/pages/RoundtablePlanningPage.tsx

@@ -61,6 +61,10 @@ import {
 
 import { useTheme } from "@/contexts/ThemeContext";
 import { useArtifacts } from "@/components/workspace/artifacts";
+import {
+  LayoutModeSwitcher,
+  ThemeSwitcher,
+} from "@/components/workspace/appearance-controls";
 import { useSidebarSafe } from "@/components/ui/sidebar";
 import {
   DropdownMenu,
@@ -282,7 +286,11 @@ function readEmbedHashQueryPrefill(): RoundtablePrefill | null {
 }
 
 
-export default function RoundtablePlanningPage() {
+export default function RoundtablePlanningPage({
+  compactChrome = false,
+}: {
+  compactChrome?: boolean;
+}) {
   const { theme } = useTheme();
   // 全工作区跨页的后台作业完成通知器（Provider 挂在 PageLayout 常驻层）。
   const { watchJob } = useRoundtableJobNotifier();
@@ -2075,6 +2083,12 @@ export default function RoundtablePlanningPage() {
           >
             <Settings className="w-4 h-4" />
           </button>
+          {compactChrome && (
+            <>
+              <ThemeSwitcher tone="content" />
+              <LayoutModeSwitcher tone="content" />
+            </>
+          )}
         </div>
       </header>