Files
wecom_it_smart_desk/docs/02-产品需求/坐席端布局优化建议.md
T
Simon bea288e414 feat: 2026-07-11 全量更新 - 代办集成+会议室预定+知识迭代修复+UI统一+Bug修复
== 已部署上线 (9项) ==
- 代办事项真实数据源集成 (企微审批API 8bug修复链)
- H5/坐席端 Logo样式统一+绿色背景
- 视频引导页修复 (localStorage key v2)
- 坐席端 v9 Vue版本修复 (ElMessage._context)
- 截图按钮 v10 修复 (getDisplayMedia user gesture)
- 扫码样式恢复+H5扫码登录跳转修复
- H5截图快捷键提示

== 代码完成待部署 (3项) ==
- 知识迭代3Bug修复 (#8 POST端点/#7 MERGE幂等/#6 过期检查)
- 会议室预定-小鱼易联终端 (40文件, 40/40测试通过)
- IT资产升级审批推送 (asset_service.py)

== 需求文档 (2项) ==
- 坐席端AI辅助消息框-PRD (4项新功能确认)
- 坐席端布局优化建议 v2.0 (7天计划)

== 新增文档 ==
- 日报-2026-07-11.md
- 知识迭代Bug修复报告-20260711.md
- 会议室预定-部署指南.md
- CHANGELOG.md 更新

== 测试 ==
- test_todo_integration.py: 40/40
- test_meetingroom.py: 40/40
- test_bugfix_ki_suggestions.py: 21/21
2026-07-11 23:13:10 +08:00

28 KiB
Raw Blame History

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

版本: 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+17 + L2 层 数字键 19
选中确认 选中条目后内容填入 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 → 260pxmin:200, max:500 不变)
  • 待办面板 max-height 260px → 220px(减少 40px,将会话用户列表滚动区域增大)

4. 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 不变,仅前端展示合并,后端数据无影响