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-*/
123 lines
6.1 KiB
Markdown
123 lines
6.1 KiB
Markdown
# 任务说明书 — 员工端头像菜单退出
|
||
|
||
> **关联需求编号**: 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）**：
|
||
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** 对话框消息 | "退出后会话记录会清空，当前咨询进度将丢失" | 用户反馈：需明确告知会话数据会清空 |
|
||
|
||
---
|
||
|
||
*文档结束*
|