HaHafeng
303dd78c54
- Add one-click research protocol generation with streaming output - Implement Word document export via Pandoc integration - Add dynamic dual-panel layout with resizable split pane - Implement collapsible content for StatePanel stages - Add conversation history management with title auto-update - Fix scroll behavior, markdown rendering, and UI layout issues - Simplify conversation creation logic for reliability
2.2 KiB
2.2 KiB
UI 布局深度分析：Chat vs. Document 比例问题
核心冲突：
- Chat: 主要是控制台，指令短，但历史记录长。
- Document: 是交付物，内容宽，需要沉浸式阅读。
- Context Panel: 是辅助信息，卡片式，不需要太宽。
1. 为什么“固定比例”不是最优解？
如果强行统一比例，两头都不讨好：
- 如果统一为 70% (Chat) : 30% (Right)
- 问题: 右侧只能放 PICO 卡片。一旦开始生成文档，A4 纸被挤成“长条”，用户必须横向滚动或者字变得极小，根本没法阅读。
- 如果统一为 40% (Chat) : 60% (Right)
- 问题: 在前期的 PICO 收集阶段，右侧面板（只有几个卡片）会留出大片空白，显得界面空旷、重心失衡。
2. 推荐方案：动态自适应布局 (Dynamic Split View)
我们要根据 “用户当前的注意力焦点” 自动调整比例。
阶段 A：要素收集期 (Focus on Chat)
- 状态：AI 在问，用户在答。右侧只是辅助展示“已提取的 PICO”。
- 比例：Chat 65% : Context 35%
- 理由：此时用户的视线主要在聊天流上，右侧只是个“仪表盘”。
阶段 B：方案生成期 (Focus on Document)
- 状态：AI 在写长文，用户在审阅。聊天框只用来发简单的修改指令。
- 比例：Chat 35% : Document 65%
- 理由：此时右侧的 A4 纸是主角。A4 纸的最佳阅读宽度通常需要 800px+，否则排版会乱（尤其是表格）。
阶段 C：终极自由 (User Control)
- 功能：在两栏中间加一个 Drag Handle (拖拽手柄)，允许用户自己拖动宽度。
- 记忆：记住用户的最后设置。
3. 视觉优化细节
- 平滑过渡：当从阶段 A 切换到阶段 B 时，使用 CSS transition 让分界线平滑移动，而不是突变。
- 折叠按钮：允许用户完全折叠左侧 Chat，进入 “全屏沉浸阅读模式” (100% Doc)。
4. 结论
不要统一。
请采用 “模式驱动的默认比例 + 手动拖拽” 的策略。
- 默认：PICO 模式 (60/40) -> 生成模式 (35/65)。