From 062f9842621836dfe8d55051d49dc429eb898a5e Mon Sep 17 00:00:00 2001
From: fengxiangdebaozi <10845145+fengxiangdebaozi@user.noreply.gitee.com>
Date: Thu, 4 Jun 2026 10:40:16 +0800
Subject: [PATCH] =?UTF-8?q?ai=E5=86=99=E4=BD=9C=E4=BD=8D=E7=BD=AE=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/open-canvas/pages/AIWritingPage.tsx   | 124 ++++++++++++------
 1 file changed, 87 insertions(+), 37 deletions(-)

diff --git a/frontend-web/src/open-canvas/pages/AIWritingPage.tsx b/frontend-web/src/open-canvas/pages/AIWritingPage.tsx
index cd96dc1a..d4ab02b9 100644
--- a/frontend-web/src/open-canvas/pages/AIWritingPage.tsx
+++ b/frontend-web/src/open-canvas/pages/AIWritingPage.tsx
@@ -102,17 +102,99 @@ import {
 // Panel IDs used as keys in the v4 Layout map
 const WRITING_ID = 'aw-writing';
 const DRAFT_ID   = 'aw-draft';
+// 初始问答阶段（idle）专用的两栏 ID：左=问答助手，右=写作配置表单
+const SETUP_CHAT_ID = 'aw-setup-chat';
+const SETUP_FORM_ID = 'aw-setup-form';
 
 // Match the original canvas page proportions (chat=35, artifact=65)
 const DEFAULT_LAYOUT = { [WRITING_ID]: 35, [DRAFT_ID]: 65 };
+// idle 阶段镜像原比例：问答框在左占大头(65)，配置表单在右占小头(35)
+const SETUP_LAYOUT = { [SETUP_CHAT_ID]: 65, [SETUP_FORM_ID]: 35 };
 
 /**
- * 右侧面板：未开始写作（idle）时显示「写作助手 Q&A」，帮用户聊清并回填左侧表单；
- * 一旦开始写作（status !== idle）就切回草稿预览。
+ * 写作配置表单面板（写作助手回填的目标），抽出复用：idle 时在右栏，开始写作后在左栏。
  */
-function AIWritingRightPanel() {
+function WritingFormPanel({ hideAdvancedFields }: { hideAdvancedFields: boolean }) {
+  return (
+    // 与原布局保持相同的 flex-1 min-h-0 包裹，确保内部 h-full 正确解析
+    <div className="flex-1 min-h-0 overflow-hidden">
+      <AIWritingPanel hideAdvancedFields={hideAdvancedFields} />
+    </div>
+  );
+}
+
+/**
+ * 根据写作状态切换两套左右布局：
+ *  - idle（初始问答阶段）：左=「写作助手 Q&A」，右=「写作配置选项」表单；
+ *  - 开始写作后：回到原布局——左=写作配置/时间线面板，右=草稿预览。
+ */
+function AIWritingLayout({ hideAdvancedFields }: { hideAdvancedFields: boolean }) {
+  const layoutRef = useRef<GroupImperativeHandle>(null);
   const { state } = useAIWriting();
-  return state.status === 'idle' ? <WritingSetupChat /> : <AIWritingDraftPanel />;
+
+  if (state.status === 'idle') {
+    return (
+      <ResizablePanelGroup
+        orientation="horizontal"
+        groupRef={layoutRef}
+        defaultLayout={SETUP_LAYOUT}
+        className="h-full"
+      >
+        {/* 左侧：写作助手 Q&A */}
+        <ResizablePanel
+          id={SETUP_CHAT_ID}
+          defaultSize={65}
+          minSize={40}
+          className="overflow-hidden"
+        >
+          <WritingSetupChat />
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 右侧：写作配置选项表单 */}
+        <ResizablePanel
+          id={SETUP_FORM_ID}
+          defaultSize={35}
+          minSize={20}
+          className="overflow-hidden flex flex-col"
+        >
+          <WritingFormPanel hideAdvancedFields={hideAdvancedFields} />
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    );
+  }
+
+  return (
+    <ResizablePanelGroup
+      orientation="horizontal"
+      groupRef={layoutRef}
+      defaultLayout={DEFAULT_LAYOUT}
+      className="h-full"
+    >
+      {/* 左侧：AI 写作面板，与原画布页左侧等宽 */}
+      <ResizablePanel
+        id={WRITING_ID}
+        defaultSize={35}
+        minSize={20}
+        className="overflow-hidden flex flex-col"
+      >
+        <WritingFormPanel hideAdvancedFields={hideAdvancedFields} />
+      </ResizablePanel>
+
+      <ResizableHandle withHandle />
+
+      {/* 右侧：草稿预览面板 */}
+      <ResizablePanel
+        id={DRAFT_ID}
+        defaultSize={65}
+        minSize={40}
+        className="overflow-hidden"
+      >
+        <AIWritingDraftPanel />
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  );
 }
 
 export default function AIWritingPage({
@@ -120,8 +202,6 @@ export default function AIWritingPage({
 }: {
   hideAdvancedFields?: boolean;
 } = {}) {
-  const layoutRef = useRef<GroupImperativeHandle>(null);
-
   return (
     <CanvasThreadProvider>
     <CanvasGraphProvider>
@@ -131,37 +211,7 @@ export default function AIWritingPage({
       <TooltipProvider delayDuration={300}>
         <div className="h-full flex flex-col overflow-hidden bg-background">
           <div className="flex-1 min-h-0 overflow-hidden">
-            <ResizablePanelGroup
-              orientation="horizontal"
-              groupRef={layoutRef}
-              defaultLayout={DEFAULT_LAYOUT}
-              className="h-full"
-            >
-              {/* 左侧：AI 写作面板，与原画布页左侧等宽 */}
-              <ResizablePanel
-                id={WRITING_ID}
-                defaultSize={35}
-                minSize={20}
-                className="overflow-hidden flex flex-col"
-              >
-                {/* 与原布局保持相同的 flex-1 min-h-0 包裹，确保内部 h-full 正确解析 */}
-                <div className="flex-1 min-h-0 overflow-hidden">
-                  <AIWritingPanel hideAdvancedFields={hideAdvancedFields} />
-                </div>
-              </ResizablePanel>
-
-              <ResizableHandle withHandle />
-
-              {/* 右侧：草稿预览面板 */}
-              <ResizablePanel
-                id={DRAFT_ID}
-                defaultSize={65}
-                minSize={40}
-                className="overflow-hidden"
-              >
-                <AIWritingRightPanel />
-              </ResizablePanel>
-            </ResizablePanelGroup>
+            <AIWritingLayout hideAdvancedFields={hideAdvancedFields} />
           </div>
         </div>
       </TooltipProvider>