**重构前**(旧编号 02-11): - docs/02-产品需求/ → 00 产品规划/PRD - docs/03-技术架构/ → 01-05 子目录散落 - docs/04-原型设计/ → 01-02 产品设计(HTML 原型) - docs/05-原型设计/ → screens/ - docs/06-测试素材/ → 02-E2E / 03-功能 / 04-版本测试 - docs/07-项目管理/ → 任务说明书/日报/计划 - docs/08-安全审计/ → 审计报告 - docs/09-堡垒运维/ → toolbox / deploy - docs/10-项目管理/ → 任务说明书(重复) - docs/11-历史归档/ → deploy-nas-archived **重构后**(新编号 00-07,语义化): - docs/00-产品开发流程与文档管理规范.md - docs/00-版本迭代总览.md - docs/01-产品文档/ (PRD/原型/认证/会话/AI 服务/坐席/集成) - docs/02-技术文档/ (技术方案/架构图/重构记录/前端改造/实现配置) - docs/03-测试文档/ (E2E/功能用例/版本报告/缺陷单) - docs/04-运维文档/ (部署运维/运维指南) - docs/05-运营文档/ (品牌推广/用户手册) - docs/06-安全审计/ (审计报告) - docs/07-项目管理/ (任务说明书/日报/计划/看板) **净收益**: - 目录编号与产品文档管理规范对齐(按文档阶段 01-07 编号) - 消除 02-产品需求 与 10-项目管理 的编号重叠 - 子目录按文档类型分组(如 01-产品文档/00-产品规划、01-产品文档/01-认证与登录) - 把运维/安全/项目管理从 0X 散落改为 04/06/07 合计 494 文件 + 78495 行 / - 14076 行
28 KiB
坐席端布局优化建议 — 专业方案
版本: v2.0 日期: 2026-07-11 作者: 宋献 状态: 方案已确认,待开发 关联:
坐席端AI辅助消息框-PRD.mdv2.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 |
| 选中确认 | 选中条目后内容填入 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 变量调整
: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 不变,仅前端展示合并,后端数据无影响 |