# **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\. 视觉优化细节**

1. **平滑过渡**：当从阶段 A 切换到阶段 B 时，使用 CSS transition 让分界线平滑移动，而不是突变。  
2. **折叠按钮**：允许用户完全折叠左侧 Chat，进入 **“全屏沉浸阅读模式”** (100% Doc)。

## **4\. 结论**

**不要统一。**

请采用 **“模式驱动的默认比例 \+ 手动拖拽”** 的策略。

* 默认：**PICO 模式 (60/40)** \-\> **生成模式 (35/65)**。