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 正确解析 +
+ +
+ ); +} + +/** + * 根据写作状态切换两套左右布局: + * - idle(初始问答阶段):左=「写作助手 Q&A」,右=「写作配置选项」表单; + * - 开始写作后:回到原布局——左=写作配置/时间线面板,右=草稿预览。 + */ +function AIWritingLayout({ hideAdvancedFields }: { hideAdvancedFields: boolean }) { + const layoutRef = useRef(null); const { state } = useAIWriting(); - return state.status === 'idle' ? : ; + + if (state.status === 'idle') { + return ( + + {/* 左侧:写作助手 Q&A */} + + + + + + + {/* 右侧:写作配置选项表单 */} + + + + + ); + } + + return ( + + {/* 左侧:AI 写作面板,与原画布页左侧等宽 */} + + + + + + + {/* 右侧:草稿预览面板 */} + + + + + ); } export default function AIWritingPage({ @@ -120,8 +202,6 @@ export default function AIWritingPage({ }: { hideAdvancedFields?: boolean; } = {}) { - const layoutRef = useRef(null); - return ( @@ -131,37 +211,7 @@ export default function AIWritingPage({
- - {/* 左侧:AI 写作面板,与原画布页左侧等宽 */} - - {/* 与原布局保持相同的 flex-1 min-h-0 包裹,确保内部 h-full 正确解析 */} -
- -
-
- - - - {/* 右侧:草稿预览面板 */} - - - -
+