Simon
a8da4da0db
REQ-会话-001 员工结束会话: - PRD/原型 v1.0/v1.1/v1.2 归档为 .archive，现行收敛至单一 v1.3 - 技术方案 v1.2 归档，v1.3 为现行版本(位于 docs/02-技术文档/) - PRD v1.3 §六 关联文档表指向 v1.3 原型与技术方案实际路径 - 三份任务说明书 + BUG-003 + TC-用户-008 引用同步至 .archive/v1.3 REQ-用户-005 头像菜单退出: - PRD/原型/技术方案文件名 v1.0 -> v1.1，追平内容版本(铁律2) - 三件套 + 任务说明书 + TC 互引版本对齐，相关 PRD 指向会话-001 v1.3 其他: - 修复 4 处 UTF-8 乱码(U+FFFD) - 新增 TR-会话-001-结束会话-v1.3.2 端到端测试报告(单测 75/75 + 生产构建通过) - 整改记录 #9 写入 00-文档规范化整改记录.md 遗留: PRD v1.3「状态条永久显示」与代码 v1.3.5「状态条已删除」存在分歧，待产品拍板
6.1 KiB
6.1 KiB
任务说明书 — 员工端头像菜单退出
关联需求编号: REQ-用户-005 关联PRD:
01-产品文档/05-用户端H5/PRD-REQ-用户-005-头像菜单退出-v1.1.md关联技术方案:02-技术文档/技术方案-REQ-用户-005-头像菜单退出-v1.1.md需求类型: [x] 新增 [ ] 变更 [ ] 废弃 日期: 2026-07-26 作者: Simon
📥 输入项来源
产品需求来源
- PRD:
docs/01-产品文档/05-用户端H5/PRD-REQ-用户-005-头像菜单退出-v1.1.md - 原型:
docs/01-产品文档/05-用户端H5/原型-REQ-用户-005-头像菜单退出-v1.1.html
技术方案来源
- 技术方案:
docs/02-技术文档/技术方案-REQ-用户-005-头像菜单退出-v1.1.md
原型设计来源
docs/01-产品文档/05-用户端H5/原型-REQ-用户-005-头像菜单退出-v1.1.html- 参考原型:
docs/01-产品文档/05-用户端H5/原型-REQ-用户-000-H5用户端-v2.0.html
需了解的现有代码
| 文件 | 关注内容 | 原因 |
|---|---|---|
frontend-h5/src/components/chat/ChatPanel.vue |
第 44-56 行（头像模板），第 147-164 行（现有 import），第 166-178 行（头像 fallback 逻辑） | 唯一改动文件，需在现有模板和 script 中插入新逻辑 |
frontend-h5/src/stores/employee.ts |
第 391-397 行 logout() 方法 |
复用，登出后清 token / employeeInfo / localStorage |
frontend-h5/src/api/closing.ts |
第 80-84 行 employeeClose() 函数 |
复用，调用 POST /h5/conversations/current/close |
frontend-h5/src/api/auth.ts |
第 134-136 行 logout() 函数 |
复用，调用 POST /api/auth/logout |
frontend-h5/src/stores/conversation.ts |
currentConversation 状态（含 status 字段） |
判断是否有活跃会话，决定是否先 close |
frontend-h5/src/App.vue |
路由结构（/h5/login 登录页路由） |
退出的兜底跳转目标 |
📤 输出成果要求
代码改动
| 文件 | 操作 | 改动量 |
|---|---|---|
frontend-h5/src/components/chat/ChatPanel.vue |
修改 | 模板 +60 行，script +80 行，style +40 行 |
无新增文件，无其他文件改动。
改动内容清单
模板（template）：
- 头像
div.chat-panel__user-info改为纯展示（去掉@click、role="button"、箭头等） - 头像右侧新增
<button class="chat-panel__exit-btn">结束会话</button>固定按钮 - 移除下拉菜单
div.user-dropdown及其内部菜单项 - 保留
<van-dialog>退出确认对话框，更新标题为"结束会话"，消息含"退出后会话记录会清空"
逻辑（script setup）：
- 移除：
showUserMenuref、toggleUserMenu()、closeUserMenu()、handleExitClick() - 保留：
showExitConfirm、isExitingrefs、executeExit()、closeWindowOrRedirect() - 按钮点击直接
@click="showExitConfirm = true"，无需中间函数 - 核心退出流程不变（close → logout → clear state → redirect）
样式（style scoped）：
- 移除所有下拉菜单样式（
user-dropdown/user-menu-*/user-infohover 态/箭头旋转 等 80+ 行） - 新增
.chat-panel__exit-btn— 红色边框圆角按钮，hover 填充红色白字
🔧 验证方式
| # | 验证项 | 验证方法 | 验证环境 |
|---|---|---|---|
| 1 | 「结束会话」按钮可见 | 浏览器手动测试，按钮显示在头像右侧 | 本地 dev server |
| 2 | 点击按钮弹出确认框 | 点击「结束会话」按钮 | 本地 dev server |
| 3 | 确认退出全流程 | 有活跃会话 → 点击确定 → 跳转 /h5/login |
本地 dev server |
| 4 | 无活跃会话退出不报错 | 新登录直接退出 | 本地 dev server |
| 5 | close API 失败不阻塞 | 浏览器 DevTools → Network → 阻断 close 请求 |
本地 dev server |
| 6 | logout API 失败留在当前页 | 阻断 logout 请求 |
本地 dev server |
| 7 | 企微真实环境 | 企微打开 H5 → 确认能关闭窗口或跳转 | 企微手机端 |
| 8 | 暗黑模式样式 | 切换深色主题后重测按钮和对话框 | 本地 dev server |
| 9 | 退出后 Token 失效 | 退出后直接访问 /h5/ → 应重定向 login |
本地 dev server |
| 10 | 防重复点击 | 快速双击「确定退出」→ 不会发起两次请求 | 本地 dev server |
✅ 完成标准
| # | 标准 | 判定方式 |
|---|---|---|
| S1 | 所有 10 项验证全部通过 | 逐项打勾 |
| S2 | ESLint/TypeScript 编译零错误 | npm run build 成功 |
| S3 | ChatPanel.vue 以外的文件无改动 | git diff --stat 仅显示 ChatPanel.vue |
| S4 | 已有功能不受影响（InputBar 结束咨询按钮仍正常） | 人工服务态测试回归 |
| S5 | 菜单出入动画无卡顿（<200ms） | 感知测试 |
| S6 | commit message 含 [REQ-用户-005] |
git log 检查 |
📊 开发完成记录
| 阶段 | 完成日期 | 结果 |
|---|---|---|
| vue-tsc 类型检查 | 2026-07-26 | ChatPanel.vue 零 TS 错误 |
| vite build | 2026-07-26 | ✅ 3.65s |
| 生产部署 | 2026-07-26 | itsupport.servyou.com.cn/h5/ HTTP 200 |
| 功能测试 | 2026-07-26 | ✅ 通过 |
| 样式调整（弹出→下拉） | 2026-07-26 | ✅ 通过 |
| 文案修正（扫码→进入应用） | 2026-07-26 | ✅ 通过 |
| 交互调整（下拉菜单→固定按钮） | 2026-07-26 | ✅ 通过，部署验证已确认 |
实现差异记录
| 设计 | 实现 | 原因 |
|---|---|---|
<teleport to="body"> 浮动弹出卡片 |
内嵌 user-dropdown 绝对定位下拉 |
用户反馈：下拉式更自然 |
| 透明 overlay 遮罩关闭 | document click 事件监听关闭 |
下拉式不需要 overlay |
| 文案"退出后需重新扫码登录" | "退出后需重新进入应用" | 员工端走企微 OAuth，非扫码 |
| v1.1 下拉菜单「结束会话并退出」 | 头像右侧固定按钮「结束会话」 | 用户反馈：固定按钮更直观，去掉中间步骤 |
| v1.1 对话框消息 | "退出后会话记录会清空，当前咨询进度将丢失" | 用户反馈：需明确告知会话数据会清空 |
文档结束