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

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

---

*文档结束*