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-*/
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 对话框消息 | "退出后会话记录会清空，当前咨询进度将丢失" | 用户反馈：需明确告知会话数据会清空 |
文档结束