Simon
facc04aa65
本提交为 .git 对象库损坏后的重建提交，内容等价于原先三个本地提交 （5e2fd4c2 / 57a53c98 / 5d7e1873）的累积结果，未做任何额外改动。 一、docs 结构整改（整改 #14） 根因：重构时新结构为 untracked 文件，执行 git stash（未带 -u）未纳入， 随后 git reset 拉回 HEAD 旧 tracked 树，导致旧树复活、新旧两棵目录 树并存于 docs/，共 791 文件、双分类体系冲突。 修复动作： - b2 同名异主题文件改名迁移保全 9 个 - C 类 39 个孤立文件按主题正确归类 - A/B1 类 222 个重复文件删除（新结构已有内容副本） - 9 个旧独有空目录删除 - 270 处内部引用按 verified 映射改写 - 整改记录 #14 登记于 04-运维文档/部署运维 结果：docs 791 → 569 文件，顶层仅规范 8 类 + 治理文件，单树恢复。 残留：约 20 处指向从未存在文件的陈旧死链，归入独立文档卫生任务。 二、compose 双目录对齐（消除踩坑 A） - docker-compose.yml：nginx 前端挂载全部由根目录 frontend-*/dist 改为 src/frontend-*/dist（h5 / agent / admin / terminal） - docker-compose.dev.yml：dev 服务 build context 与卷同步改 src/ - 效果：本地 docker compose up 不再把根目录 stale dist 挂回， 与线上一致，分叉隐患消除（已 docker compose config 校验通过） 防复发铁律： - 重构须提交；仓库修复须 git stash -u 或先 commit - 新结构须 git add 并提交，避免再次 untracked 复活 - H5 改动只动 src/frontend-h5/，禁改根目录遗留 frontend-*/
539 lines
28 KiB
Markdown
539 lines
28 KiB
Markdown
# 坐席端布局优化建议 — 专业方案
|
||
|
||
> **版本**: 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 不变，仅前端展示合并，后端数据无影响 |
|