wecom_it_smart_desk/docs/07-项目管理/任务说明书/任务说明书-REQ-用户-005-头像菜单退出.md

任务说明书 — 员工端头像菜单退出

关联需求编号: REQ-用户-005 关联PRD: 01-产品文档/05-用户端H5/PRD-REQ-用户-005-头像菜单退出-v1.0.md 关联技术方案: 02-技术文档/技术方案-REQ-用户-005-头像菜单退出-v1.0.md 需求类型: [x] 新增 [ ] 变更 [ ] 废弃 日期: 2026-07-26 作者: Simon

---

📥 输入项来源

产品需求来源

• PRD: docs/01-产品文档/05-用户端H5/PRD-REQ-用户-005-头像菜单��出-v1.0.md
• 原型: docs/01-产品文档/05-用户端H5/原型-REQ-用户-005-头像菜单退出-v1.0.html

技术方案来源

• 技术方案: docs/02-技术文档/技术方案-REQ-用户-005-头像菜单退出-v1.0.md

原型设计来源

• docs/01-产品文档/05-用户端H5/原型-REQ-用户-005-头像菜单退出-v1.0.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）：

1. 头像 div.chat-panel__user-info 改为纯展示（去掉 @click、role="button"、箭头等）
2. 头像右侧新增 <button class="chat-panel__exit-btn">结束会话</button> 固定按钮
3. 移除下拉菜单 div.user-dropdown 及其内部菜单项
4. 保留 <van-dialog> 退出确认对话框，更新标题为"结束会话"，消息含"退出后会话记录会清空"

逻辑（script setup）：

1. 移除：showUserMenu ref、toggleUserMenu()、closeUserMenu()、handleExitClick()
2. 保留：showExitConfirm、isExiting refs、executeExit()、closeWindowOrRedirect()
3. 按钮点击直接 @click="showExitConfirm = true"，无需中间函数
4. 核心退出流程不变（close → logout → clear state → redirect）

样式（style scoped）：

1. 移除所有下拉菜单样式（user-dropdown/user-menu-*/user-info hover 态/箭头旋转 等 80+ 行）
2. 新增 .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 对话框消息	"退出后会话记录会清空，当前咨询进度将丢失"	用户反馈：需明确告知会话数据会清空

---

文档结束