feat: Header 顶部二三级菜单与 AI 写作表单收起优化

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

@@ -82,7 +82,7 @@
  * ──────────────────────────────────────────────────────────────────────────
  */
 import { useRef } from 'react';
-import { ChevronLeft } from 'lucide-react';
+import { PanelRightOpen } from 'lucide-react';
 import { TooltipProvider } from '@/components/ui/tooltip';
 import { cn } from '@/lib/utils';
 import type { GroupImperativeHandle } from 'react-resizable-panels';
@@ -146,34 +146,34 @@ function AIWritingLayout({ hideAdvancedFields, initialNotebookId, initialDocumen
   // 竖向展开栏；问答侧点「应用到表单」(applyProposal) 会自动把 formExpanded 置 true 展开。
   if (state.status === 'idle' && !isHistoryMode) {
     return (
-      <div className="flex h-full">
+      <div className="relative flex h-full">
         {/* 左侧：写作助手 Q&A —— 恒为第一个子节点，位置稳定不重挂 */}
         <div className="min-h-0 flex-1 overflow-hidden">
           <WritingSetupChat />
         </div>
 
-        {/* 右侧：写作配置表单整块。容器持久存在，宽度随 formExpanded 平滑过渡（展开/收起
-            都有动画）；收起时只剩一条竖向「展开」栏，收起按钮则在表单头部右上角。 */}
+        {/* 右侧：写作配置表单整块。容器持久存在（表单始终挂载、保留状态），宽度随 formExpanded
+            平滑过渡——收起时宽度归零、整块滑出，右侧完全让给问答区。 */}
         <div
           className={cn(
-            'relative flex min-h-0 shrink-0 flex-col overflow-hidden border-l transition-[width,min-width] duration-300 ease-in-out',
-            formExpanded ? 'w-[36%] min-w-[340px] max-w-[600px]' : 'w-10 min-w-10',
+            'flex min-h-0 shrink-0 flex-col overflow-hidden transition-[width,min-width] duration-300 ease-in-out',
+            formExpanded ? 'w-[36%] min-w-[340px] max-w-[600px] border-l' : 'w-0 min-w-0',
           )}
         >
-          {formExpanded ? (
-            <WritingFormPanel hideAdvancedFields={hideAdvancedFields} initialNotebookId={initialNotebookId} initialDocumentIds={initialDocumentIds} studioToken={studioToken} />
-          ) : (
-            <button
-              type="button"
-              onClick={() => setFormExpanded(true)}
-              title="展开写作配置"
-              className="flex h-full w-full flex-col items-center justify-center gap-3 bg-muted/30 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-            >
-              <ChevronLeft className="size-4" />
-              <span className="[writing-mode:vertical-rl] text-xs tracking-widest">写作配置</span>
-            </button>
-          )}
+          <WritingFormPanel hideAdvancedFields={hideAdvancedFields} initialNotebookId={initialNotebookId} initialDocumentIds={initialDocumentIds} studioToken={studioToken} />
         </div>
+
+        {/* 收起态：右上角浮动展开图标按钮（与展开态头部的收起按钮位置呼应） */}
+        {!formExpanded && (
+          <button
+            type="button"
+            onClick={() => setFormExpanded(true)}
+            title="展开写作配置"
+            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"
+          >
+            <PanelRightOpen className="size-4" />
+          </button>
+        )}
       </div>
     );
   }