# 坐席端布局优化建议 — 专业方案

> **版本**: v2.0
> **日期**: 2026-07-11
> **作者**: 宋献
> **状态**: 方案已确认，待开发
> **关联**: `坐席端AI辅助消息框-PRD.md`
>
> **v2.0 变更**: 新增功能重复诊断与清理方案；按"回复前/回复后"重新分类所有 AI 功能；右栏新增放大/缩小开关机制

---

## 1. 当前布局问题诊断

### 1.1 四个核心矛盾

| 编号 | 问题 | 影响 |
|------|------|------|
| P1 | ReplyBox 工具栏单行 6 按钮，新增 4 个 AI 按钮后达 10 个，拥挤且无层次 | 按钮缩小到 24px 难以点击；常规工具与 AI 工具混在一起视觉无区分 |
| P2 | 右栏 320px 承载 5 个功能区（Wingman/结果/推荐/标注/快回），信息密度过载 | 快速回复列表被压缩到 ~2/3，浏览体验差；坐席视线频繁左右切换 |
| P3 | 中栏固定高度层过多：UserInfoBar(~50px) + TroubleshootBar(~36px) + ReplyBox(~120px) | 1080p 屏幕下消息区仅剩 ~400px 可视高度，展开详情后更严重 |
| P4 | AI 交互入口分散在 3 个位置（右栏/输入框/消息流），共 9+ 个入口 | 认知负荷过重，坐席不知道何时该用哪个功能 |

### 1.2 当前布局参数

```
顶栏: 56px (固定)
左栏: 280px (min:200, max:500, 可拖拽)
中栏: flex:1 (弹性)
右栏: 320px (min:220, max:500, 可拖拽, 可隐藏)

中栏纵向:
  UserInfoBar      ~50px (展开详情 ~200px)
  TroubleshootBar  ~36px (展开流程图 ~800px)
  消息列表          flex:1 (min:200px)
  ReplyBox         ~120px (textarea 60~300px, 可拖拽)
```

### 1.3 功能重复诊断与清理方案

代码审查发现当前存在 **5 处功能重复/混淆**，必须在布局重构时一并清理：

| 编号 | 重复类型 | 涉及位置 | 严重度 | 清理方案 |
|------|---------|---------|--------|---------|
| R1 | AI草稿双展示 | 中栏 AiDraftBubble + 右栏 Wingman草稿结果 | 高度重复 | 统一到中栏回复建议区；右栏不再展示草稿内容，仅保留触发按钮 |
| R2 | AI推荐回复三处展示 | 右栏AI智能推荐区 + 右栏Wingman草稿 + 中栏AiRecommendInline(孤儿) | 中度重复 | 合并到中栏 AiRecommendBar.vue；删除 AiSuggestReply.vue 和 AiRecommendInline.vue |
| R3 | 排查流程命名混淆 | 中栏 TroubleshootBar(完整步骤导航) vs 右栏"推荐排查流程"按钮(实际返回标签) | 命名错误 | 右栏按钮重命名为"智能标注"，与标注区合并；TroubleshootBar 保持中栏独占 |
| R4 | 标签建议双入口 | 右栏"推荐排查流程" + 右栏"智能标注" → 同一 API `suggestTags()` | 功能重叠 | 合并为单一"智能标注"功能，一个按钮一个展示区 |
| R5 | 孤儿组件 | AiRecommendInline.vue 完整编写但未被引用 | 技术债务 | 删除文件，功能已被 AiRecommendBar.vue 替代 |

**排查流程与 TroubleshootBar 的关系澄清**：

| 维度 | TroubleshootBar（中栏） | 右栏原"推荐排查流程" |
|------|----------------------|-------------------|
| 数据 API | `GET /troubleshooting-templates` | `POST /conversations/{id}/wingman/tags` |
| 数据结构 | `path_steps[]` + 递归 `flowchart` 决策树 | `suggested_tags: string[]` + category + priority |
| 内容深度 | 完整步骤路径 + 是/否分支决策树 | 仅字符串标签列表 |
| 展示形式 | 持久横向路径条 + 可展开流程图 | 临时卡片，可关闭 |
| 交互能力 | 可选模板、推进步骤、展开决策树 | 仅展示，无交互 |
| 实际功能 | **排查流程导航**（操作指引） | **问题分类与标签建议**（智能标注） |

**结论**：两者数据源、数据结构、功能完全不同，不存在真正的内容重复。问题在于右栏按钮命名错误——它叫"推荐排查流程"但实际做的是"智能标注"。清理方案是将右栏按钮重命名为"智能标注"并合并到标注区。

### 1.4 功能重新分类：回复前 vs 回复后/训练

按用户提出的核心原则——"回复消息前用的放中栏，回复消息后用的放右栏"——将所有 AI 辅助功能重新分类：

**回复前用（放中栏）— 帮助坐席写好这条回复**：

| 功能 | 原位置 | 新位置 | 说明 |
|------|--------|--------|------|
| 草稿生成/展示/采纳 | 右栏 Wingman + 中栏 AiDraftBubble | 中栏回复建议区 | 统一入口，删除右栏重复展示 |
| 知识库引用 | 右栏 Wingman 结果 | 中栏回复建议区 | 方案填入输入框，属回复前参考 |
| AI推荐回复 | 右栏 AI推荐区 + 孤儿组件 | 中栏回复建议区 | 合并为 AiRecommendBar |
| 快速回复 | 右栏 QuickReplyPanel | 中栏回复建议区 | 横向 2 层布局 |
| TroubleshootBar 排查导航 | 中栏 | 中栏（保持） | 回复过程中随时参考，折叠为步骤条 |
| 自动补齐/语气/润色/改写 | 无（新增） | 中栏工具栏 + 输入框 | 输入过程中实时辅助 |

**回复后用/训练用（放右栏）— 帮助 AI 变得更聪明**：

| 功能 | 原位置 | 新位置 | 说明 |
|------|--------|--------|------|
| 智能标注/标签建议 | 右栏(双入口) | 右栏(合并为单一功能) | 合并"推荐排查流程"按钮+标注区 |
| 质量反馈 | 无（新增） | 右栏 | 对AI草稿/推荐打分 |
| 知识贡献 | 无（新增） | 右栏 | 坐席提交新话术/解决方案 |
| 使用统计 | 无（新增） | 右栏 | AI辅助采纳率、节省时间看板 |

**Wingman 按钮组拆分**：

| 按钮 | 原位置 | 分类 | 新位置 |
|------|--------|------|--------|
| 生成回复建议(草稿) | 右栏 Wingman | 回复前 | 中栏回复建议区触发 |
| 获取知识库引用 | 右栏 Wingman | 回复前 | 中栏回复建议区触发 |
| 推荐排查流程(实为标签) | 右栏 Wingman | 回复后 | 右栏智能标注区触发 |
| 草稿展示+采纳 | 右栏结果区 | 回复前 | 中栏回复建议区展示 |
| 知识库引用展示 | 右栏结果区 | 回复前 | 中栏回复建议区展示 |

---

## 2. 优化方案总览

### 2.1 确认的布局决策

| 区域 | 决策 | 说明 |
|------|------|------|
| 左栏 | 280px → 260px | 瘦身 20px 释放给中栏 |
| 右栏 | 320px → 260px(正常)/560px(放大) | 瘦身+放大缩小开关，正常模式释放空间给中栏 |
| 中栏 | +40px 宽度 | 消息列表可视区域增宽 |
| UserInfoBar | 详情默认折叠 | 仅显示头像+姓名+chips+操作按钮，释放 ~150px |
| TroubleshootBar | 默认折叠为图标条 | 仅显示当前步骤编号，释放 ~36px |
| 消息列表 | +100px 垂直空间 | 折叠释放的垂直空间全给消息列表 |
| 回复建议区 | 新增，位于工具栏上方 | AI推荐 + 快速回复，分色区分，选中后缩回 |
| ReplyBox 工具栏 | 单行左右分区 | 常规工具左对齐 + AI工具右对齐 |
| 右栏快速回复 | 移至中栏回复建议区 | 原位置改为 AI 训练区 |
| 右栏 Wingman 按钮拆分 | 草稿/知识→中栏，标签→标注区 | 回复前功能归中栏，回复后功能归右栏 |
| 右栏放大/缩小开关 | 新增 | 正常模式260px(中栏完整)；放大模式560px(中栏隐藏，专注训练) |

### 2.2 空间净变化

```
宽度:  左栏 -20px + 右栏 -60px(正常模式) = 中栏 +80px
高度:  UserInfoBar详情折叠 -150px + TroubleshootBar折叠 -36px = 消息列表 +186px
       (实际约 +100px，因部分区域本就折叠状态)
右栏:  正常模式260px(快速回复+Wingman草稿移出→训练区摘要)
       放大模式560px(中栏隐藏→训练区完整编辑面板)
```

---

## 3. 区域详细设计

### 3.1 中栏 — 核心重构区

中栏是从上到下 6 层纵向 flex 布局：

```
┌──────────────────────────────────────────────┐
│ 1. UserInfoBar (28px, 详情默认折叠)            │  ← 精简
├──────────────────────────────────────────────┤
│ 2. TroubleshootBar (20px, 图标条)              │  ← 折叠
├──────────────────────────────────────────────┤
│ 3. 消息列表 (flex: 1)                         │  ← +100px
│    消息气泡 + AI草稿气泡 + AI推荐卡片           │
├──────────────────────────────────────────────┤
│ 4. 回复建议区 (动态高度, 选中后缩回)             │  ← 新增
│    ├─ AI推荐 (珊瑚色, 按命中率排序)             │
│    └─ 快速回复 (绿色, 数字键2层固定)            │
├──────────────────────────────────────────────┤
│ 5. 工具栏 (单行, 左右分区)                     │  ← 重构
├──────────────────────────────────────────────┤
│ 6. textarea + 发送 (60~300px, 可拖拽)         │
└──────────────────────────────────────────────┘
```

#### 3.1.1 UserInfoBar 精简

- **默认状态**：仅显示头像(36px) + 姓名 + IT等级徽标 + 信息chips(横向滚动) + 操作按钮组
- **详情折叠**：6 卡片详情区域默认 `max-height: 0`，点击展开箭头才展开
- **节省空间**：~150px（展开态 → 折叠态）

#### 3.1.2 TroubleshootBar 折叠

- **默认状态**：单行图标条，仅显示 `③ 当前步骤名称 ▶`
- **展开方式**：点击展开箭头显示完整流程图
- **节省空间**：~36px

#### 3.1.3 回复建议区（新增核心区域）

位于消息列表与工具栏之间，是快速回复和 AI 推荐的统一入口。

**结构**：
```
┌──────────────────────────────────────────────┐
│  AI推荐 (珊瑚色背景 #FAECE7)                   │
│  按命中率由高到低排序                          │
│  ┌─────────┐ ┌─────────┐ ┌─────────┐         │
│  │1. 推荐1  │ │2. 推荐2  │ │3. 推荐3  │ Ctrl+1/2/3│
│  └─────────┘ └─────────┘ └─────────┘         │
├──────────────────────────────────────────────┤
│  快速回复 (绿色背景 #EAF3DE)                   │
│  三层渐进导航, 数字快捷键固定2层               │
│  L1: [1 VPN] [2 账号] [3 软件] [4 网络] ...   │
│  L2: [1.1 重连] [1.2 DNS] [1.3 配置] ...      │
│  L3: 条目列表 (选中后填入输入框)               │
└──────────────────────────────────────────────┘
```

**交互规则**：

| 规则 | 说明 |
|------|------|
| 分色区分 | AI推荐=珊瑚色系(#FAECE7/#F0997B)；快速回复=绿色系(#EAF3DE/#97C459) |
| 命中率排序 | AI推荐按历史采纳率由高到低排序，最高命中率在最上方 |
| 数字快捷键 | 固定 2 层高度：L1 层 Alt+1~7 + L2 层 数字键 1~9 |
| 选中确认 | 选中条目后内容填入 textarea，回复建议区自动缩回（高度归零） |
| 重新展开 | 点击工具栏"快回"按钮或输入框为空时自动展开 |
| 空输入框时 | 回复建议区默认展开，显示推荐和快速回复 |
| 有输入内容时 | 回复建议区自动缩回，为消息列表释放空间 |

**与现有功能的关系**：

| 现有功能 | 变化 |
|----------|------|
| AiRecommendInline.vue (消息流内联 Mock) | 移至回复建议区，对接真实 API |
| AiSuggestReply.vue (右栏 AI 推荐卡片) | 移至回复建议区上半部分 |
| QuickReplyPanel.vue (右栏快速回复) | 移至回复建议区下半部分 |
| 右栏快速回复区域 | 释放为 AI 训练区 |

#### 3.1.4 ReplyBox 工具栏重构

**单行左右分区布局**：

```
┌──────────────────────────────────────────────────────┐
│ [截图][拍照]│[表情][文件][邀请]     [补齐][语气][润色][改写] │
│  ← 常规工具 (左对齐, 绿色系)    AI工具 (右对齐, 琥珀色系) →  │
└──────────────────────────────────────────────────────┘
```

| 区域 | 按钮 | 颜色系 | 对齐 |
|------|------|--------|------|
| 常规工具 | 截图、拍照、表情、文件、邀请 | 绿色系 (#E1F5EE/#5DCAA5) | 左对齐 |
| AI 工具 | 补齐(开关)、语气、润色、改写 | 琥珀色系 (#FAEEDA/#FAC775) | 右对齐 |
| 发送按钮 | 发送 | 绿色强调 (#EAF3DE/#97C459) | 最右侧 |

**补齐按钮**：设计为开关式 toggle 按钮
- 激活状态：按钮高亮，输入停顿 > 0.8s 时自动显示幽灵文字
- 关闭状态：按钮灰显，不触发自动补齐
- 默认状态：激活

**移除的按钮**：
- "快速回复"（闪电按钮）：快速回复已移至回复建议区，不需要工具栏入口

---

### 3.2 右栏 — AI 训练区（带放大/缩小开关）

快速回复和 Wingman 草稿/知识功能移至中栏后，右栏全面改造为"回复后/训练"功能区，并新增放大/缩小开关。

#### 3.2.1 双模式切换机制

右栏顶部新增模式切换按钮组，支持两种模式：

| 模式 | 右栏宽度 | 中栏状态 | 适用场景 |
|------|---------|---------|---------|
| 正常模式（回复中） | 260px | 完整可见 | 坐席正在处理工单、写回复 |
| 放大模式（训练/复盘） | 560px | 压缩隐藏 | 工单完结后复盘标注、空闲时段知识贡献 |

**切换交互**：
- 切换按钮位于右栏顶部，样式为 toggle 按钮组
- 切换时使用 CSS transition 0.3s 平滑动画
- 放大模式下中栏 `flex: 0; width: 0; overflow: hidden`
- 切回正常模式一键恢复三栏布局
- 左栏在两种模式下都保持可见

#### 3.2.2 正常模式结构（260px）

```
┌──────────────────────────┐
│ [正常] [放大]      260px  │  ← 模式切换
├──────────────────────────┤
│ 智能标注 (摘要卡片)       │  ← 合并原"推荐排查流程"+"标注"
│ 分类: 邮箱登录 | 标签: 密码 │
├──────────────────────────┤
│ 质量反馈 (摘要卡片)       │  ← 新增
│ 有用 12 / 无用 3           │
├──────────────────────────┤
│ 知识贡献 (摘要卡片)       │  ← 新增
│ 提交新话术 / 补充方案      │
├──────────────────────────┤
│ 使用统计 (摘要卡片)       │  ← 新增
│ 采纳率78% | 节省23min      │
├──────────────────────────┤
│ (虚线提示区)               │
│ 点击"放大"展开训练面板     │
└──────────────────────────┘
```

正常模式下各功能以**摘要卡片**形式展示，仅显示关键数据和一行描述，不提供编辑功能。坐席可快速浏览训练数据，不打断回复流程。

#### 3.2.3 放大模式结构（560px）

```
┌──────────────────────────────────────────────┐
│ [正常] [放大]                          560px  │
├──────────────────────────────────────────────┤
│ 智能标注 — 完整编辑面板                       │
│ 问题分类: [邮箱登录故障 ▾]  自动建议: 密码过期  │
│ 优先级: [中 ▾]  紧急/高/中/低                  │
│ 标签: [密码过期] [AD同步] [+ 添加]             │
│ 关联排查模板: [邮箱登录标准流程 ▾]             │
│ [保存标注]  [跳过]                            │
├──────────────────────────────────────────────┤
│ 质量反馈 — 详细评估                           │
│ AI草稿准确性: ★★★★☆ (4/5)                    │
│ 推荐命中率: 3/5 条有效                        │
│ 知识库引用: ○准确 ○过时 ○无关                 │
│ 补充说明: [_______________________]           │
├──────────────────────────────────────────────┤
│ 知识贡献 — 提交新内容                         │
│ 场景: 邮箱密码过期后无法登录                   │
│ 解决方案: [多行文本框________________]         │
│ 适用条件: AD域用户/密码90天过期策略            │
│ [提交审核]                                    │
├──────────────────────────────────────────────┤
│ 使用统计 — 本周数据                           │
│ ┌────────┐ ┌────────┐ ┌────────┐             │
│ │  78%   │ │ 156min │ │   42   │             │
│ │ 采纳率  │ │ 节省时间│ │ 辅助次数│             │
│ └────────┘ └────────┘ └────────┘             │
└──────────────────────────────────────────────┘
```

放大模式下各功能展开为**完整编辑表单**，支持坐席进行详细的标注、反馈和知识贡献操作。

#### 3.2.4 删除的右栏功能

以下功能从右栏移除（迁移到中栏或合并）：

| 功能 | 去向 | 原因 |
|------|------|------|
| Wingman 按钮组（草稿/知识） | 中栏回复建议区 | 回复前功能，归中栏 |
| Wingman 结果展示区 | 中栏回复建议区 | 草稿/知识展示归中栏 |
| "推荐排查流程"按钮 | 合并到智能标注 | 命名错误，实际是标签建议 |
| 快速回复面板 | 中栏回复建议区 | 回复前功能，归中栏 |
| AI 智能推荐区 | 中栏回复建议区 | 回复前功能，归中栏 |

---

### 3.3 左栏 — 会话用户列表（微调）

左栏仅做宽度微调（280px → 260px），结构不变。核心功能为会话用户列表，展示当前接待中的用户会话：

```
┌──────────────────────────┐
│ 搜索 + 筛选标签 (28px)    │
├──────────────────────────┤
│ 会话用户列表 (flex: 1)    │  ← 弹性扩大
│ 扁平列表: 我的/同事/历史   │
├──────────────────────────┤
│ 待办面板 (max: 220px)     │  ← 高度 -40px
│ 审批/工单 Tab             │
├──────────────────────────┤
│ 坐席统计 (24px)           │
└──────────────────────────┘
```

调整项：
- 宽度 280px → 260px（min:200, max:500 不变）
- 待办面板 max-height 260px → 220px（减少 40px，将会话用户列表滚动区域增大）

---

## 4. CSS 变量调整

```css
:root {
  /* 布局尺寸调整 */
  --sidebar-width: 260px;           /* 280px → 260px */
  --assistant-panel-width: 260px;   /* 320px → 260px (正常模式) */
  --assistant-panel-expanded: 560px; /* 放大模式宽度 (新增) */

  /* 右栏模式切换 */
  --center-col-flex: 1;             /* 正常模式: 中栏弹性 */
  --center-col-hidden: 0;           /* 放大模式: 中栏隐藏 */

  /* 回复建议区颜色 */
  --suggest-ai-bg: #FAECE7;         /* AI推荐背景 - 珊瑚色 */
  --suggest-ai-border: #F0997B;     /* AI推荐边框 */
  --suggest-ai-text: #993C1D;       /* AI推荐文字 */
  --suggest-quick-bg: #EAF3DE;      /* 快速回复背景 - 绿色 */
  --suggest-quick-border: #97C459;  /* 快速回复边框 */
  --suggest-quick-text: #27500A;    /* 快速回复文字 */

  /* 工具栏分组颜色 */
  --toolbar-conv-bg: #E1F5EE;       /* 常规工具背景 - 绿色系 */
  --toolbar-ai-bg: #FAEEDA;         /* AI工具背景 - 琥珀色系 */

  /* 回复建议区高度 */
  --suggest-area-height: auto;      /* 动态高度，选中后 0 */
  --suggest-ai-height: 44px;        /* AI推荐区固定高度 */
  --suggest-quick-height: 56px;     /* 快速回复区固定2层高度 */
}
```

---

## 5. 组件改动清单

### 5.1 修改的组件

| 组件 | 文件路径 | 改动内容 |
|------|---------|---------|
| Workspace.vue | `views/Workspace.vue` | 左右栏默认宽度调整 |
| global.css | `styles/global.css` | CSS 变量调整 + 回复建议区样式 |
| ChatArea.vue | `components/chat/ChatArea.vue` | 新增回复建议区层；TroubleshootBar 默认折叠 |
| UserInfoBar.vue | `components/chat/UserInfoBar.vue` | 详情默认折叠 |
| TroubleshootBar.vue | `components/chat/TroubleshootBar.vue` | 默认收起为图标条 |
| ReplyBox.vue | `components/chat/ReplyBox.vue` | 工具栏重构为左右分区；移除快速回复按钮 |
| AiAssistantPanel.vue | `components/assistant/AiAssistantPanel.vue` | 全面重构：移除Wingman按钮组/结果区/推荐区/快速回复；改为训练区(智能标注+质量反馈+知识贡献+使用统计)+放大缩小开关 |
| AiSuggestReply.vue | `components/assistant/AiSuggestReply.vue` | **删除**，功能合并到 AiRecommendBar.vue |
| AiRecommendInline.vue | `components/chat/AiRecommendInline.vue` | **删除**，功能已被 AiRecommendBar.vue 替代 |
| ConversationList.vue | `components/conversation/ConversationList.vue` | 待办面板 max-height 调整 |
| TodoPanel.vue | `components/conversation/TodoPanel.vue` | max-height 260px → 220px |

### 5.2 新增的组件

| 组件 | 文件路径 | 功能 |
|------|---------|------|
| ReplySuggestArea.vue | `components/chat/ReplySuggestArea.vue` | 回复建议区容器：AI推荐 + 快速回复 |
| AiRecommendBar.vue | `components/chat/AiRecommendBar.vue` | AI推荐条（从 AiRecommendInline + AiSuggestReply 合并） |
| QuickReplyBar.vue | `components/chat/QuickReplyBar.vue` | 快速回复条（从 QuickReplyPanel 改造，适配横向布局） |
| AiTrainingPanel.vue | `components/assistant/AiTrainingPanel.vue` | 右栏 AI 训练区主体（智能标注+质量反馈+知识贡献+统计） |
| PanelModeToggle.vue | `components/assistant/PanelModeToggle.vue` | 右栏放大/缩小模式切换按钮组 |
| SmartTagEditor.vue | `components/assistant/SmartTagEditor.vue` | 智能标注编辑面板（放大模式完整表单） |
| QualityFeedback.vue | `components/assistant/QualityFeedback.vue` | 质量反馈面板（AI草稿/推荐评分） |
| KnowledgeContribute.vue | `components/assistant/KnowledgeContribute.vue` | 知识贡献面板（提交新话术/方案） |

### 5.3 移除/弃用的组件

| 组件 | 处理方式 |
|------|---------|
| AiRecommendInline.vue | **删除**，功能已被 AiRecommendBar.vue 替代 |
| AiSuggestReply.vue | **删除**，功能合并到 AiRecommendBar.vue |
| QuickReplyPanel.vue | 改造为 QuickReplyBar.vue（从右栏竖向改为中栏横向） |

---

## 6. 交互流程

### 6.1 回复建议区交互

```
状态1: 输入框为空
  → 回复建议区展开
  → AI推荐(上, 珊瑚色) + 快速回复(下, 绿色)
  → 坐席可按 Ctrl+1/2/3 选AI推荐, 或 Alt+1~7 进快速回复L1

状态2: 坐席选中一条推荐/快速回复
  → 内容填入 textarea
  → 回复建议区自动缩回 (height: 0, transition: 0.3s)
  → textarea 聚焦，光标在末尾

状态3: 坐席正在输入
  → 回复建议区保持缩回
  → 补齐功能激活(若开关打开): 停顿>0.8s → 幽灵文字

状态4: 坐席清空输入框
  → 回复建议区自动重新展开

状态5: 坐席点击工具栏"语气/润色/改写"
  → 弹出对应浮层/面板
  → 操作完成后内容更新到 textarea
  → 回复建议区保持缩回
```

### 6.2 快速回复数字快捷键

固定 2 层：

| 层级 | 快捷键 | 功能 |
|------|--------|------|
| L1 分类 | Alt+1 ~ Alt+7 | 切换到对应一级分类 |
| L2 子项 | 1 ~ 9 | 选择当前分类下的子项（直接填入输入框） |
| 返回 | Backspace / Esc | 返回 L1 层 / 关闭回复建议区 |

**固定 2 层高度**：L1 分类行(~28px) + L2 子项行(~28px) = 56px，不随层级变化。

---

## 7. 响应式适配

| 屏幕宽度 | 布局调整 |
|----------|---------|
| ≥ 1280px | 三栏完整显示，回复建议区正常展开 |
| 1024~1279px | 左栏缩至 min:200px，右栏可隐藏（TopBar 切换按钮） |
| < 1024px | 右栏滑出式覆盖；回复建议区宽度跟随中栏 |

> 坐席端主要面向 PC 桌面端（企微内置浏览器），不专门适配移动端。最小舒适使用宽度 1280px。

---

## 8. 开发优先级

### Phase 1: 功能重复清理 + 布局骨架调整（预计 1.5 天）
- [ ] 删除 AiRecommendInline.vue（孤儿组件）
- [ ] 删除 AiSuggestReply.vue（功能合并到 AiRecommendBar）
- [ ] 右栏"推荐排查流程"按钮重命名为"智能标注"，合并到标注区
- [ ] CSS 变量调整（左右栏宽度 + 右栏放大模式变量）
- [ ] UserInfoBar 详情默认折叠
- [ ] TroubleshootBar 默认折叠为图标条
- [ ] TodoPanel max-height 调整

### Phase 2: ReplyBox 工具栏重构（预计 0.5 天）
- [ ] 工具栏单行左右分区
- [ ] 常规工具组（左对齐）+ AI 工具组（右对齐）
- [ ] 补齐开关按钮

### Phase 3: 回复建议区（预计 2 天）
- [ ] ReplySuggestArea.vue 容器组件
- [ ] AiRecommendBar.vue（合并现有推荐功能，对接真实 API）
- [ ] QuickReplyBar.vue（从 QuickReplyPanel 改造为横向 2 层）
- [ ] Wingman 草稿生成/知识库引用触发移入回复建议区
- [ ] 选中自动缩回交互
- [ ] 数字快捷键 2 层固定

### Phase 4: 右栏训练区 + 放大缩小开关（预计 2 天）
- [ ] PanelModeToggle.vue 模式切换组件
- [ ] AiTrainingPanel.vue 训练区主体
- [ ] SmartTagEditor.vue 智能标注（合并 suggestTags 双入口）
- [ ] QualityFeedback.vue 质量反馈面板
- [ ] KnowledgeContribute.vue 知识贡献面板
- [ ] 使用统计看板
- [ ] 正常模式摘要卡片 ↔ 放大模式完整表单切换
- [ ] 中栏显示/隐藏过渡动画

### Phase 5: 联调测试（预计 1 天）
- [ ] 端到端交互测试
- [ ] 放大/缩小模式切换测试
- [ ] 响应式断点验证
- [ ] 键盘快捷键全量测试
- [ ] 功能重复清理验证（确认无残留重复入口）

**总预估**: 7 天

---

## 9. 风险与缓解

| 风险 | 概率 | 影响 | 缓解 |
|------|------|------|------|
| 快速回复从竖向改为横向，三层导航体验下降 | 中 | 中 | 数字快捷键固定 2 层，键盘操作不依赖鼠标 |
| 回复建议区展开/缩回动画影响输入流畅度 | 低 | 中 | 使用 CSS transition 0.3s，不影响 textarea 焦点 |
| 坐席习惯右栏快速回复/Wingman按钮，移位后找不到 | 中 | 低 | 中栏回复建议区统一入口，工具栏保留"快回"按钮 |
| 放大模式下中栏隐藏，坐席可能需要同时看消息和标注 | 中 | 中 | 放大模式为可选操作，默认正常模式；左栏会话用户列表保持可见可切换 |
| Wingman 草稿/知识从右栏移到中栏，API 调用路径变化 | 低 | 低 | 后端 API 不变，仅前端调用位置从 AiAssistantPanel 移到 ReplySuggestArea |
| 功能重复清理后旧代码残留导致冲突 | 低 | 中 | Phase 1 统一清理，删除文件而非注释；Git 版本控制可回滚 |
| 智能标注合并后 API 调用合并，可能影响已有标注数据 | 低 | 低 | suggestTags API 不变，仅前端展示合并，后端数据无影响 |