Simon
44e77dcb0e
**重构前**（旧编号 02-11）： - docs/02-产品需求/ → 00 产品规划/PRD - docs/03-技术架构/ → 01-05 子目录散落 - docs/04-原型设计/ → 01-02 产品设计（HTML 原型） - docs/05-原型设计/ → screens/ - docs/06-测试素材/ → 02-E2E / 03-功能 / 04-版本测试 - docs/07-项目管理/ → 任务说明书/日报/计划 - docs/08-安全审计/ → 审计报告 - docs/09-堡垒运维/ → toolbox / deploy - docs/10-项目管理/ → 任务说明书（重复） - docs/11-历史归档/ → deploy-nas-archived **重构后**（新编号 00-07，语义化）： - docs/00-产品开发流程与文档管理规范.md - docs/00-版本迭代总览.md - docs/01-产品文档/ （PRD/原型/认证/会话/AI 服务/坐席/集成） - docs/02-技术文档/ （技术方案/架构图/重构记录/前端改造/实现配置） - docs/03-测试文档/ （E2E/功能用例/版本报告/缺陷单） - docs/04-运维文档/ （部署运维/运维指南） - docs/05-运营文档/ （品牌推广/用户手册） - docs/06-安全审计/ （审计报告） - docs/07-项目管理/ （任务说明书/日报/计划/看板） **净收益**： - 目录编号与产品文档管理规范对齐（按文档阶段 01-07 编号） - 消除 02-产品需求 与 10-项目管理 的编号重叠 - 子目录按文档类型分组（如 01-产品文档/00-产品规划、01-产品文档/01-认证与登录） - 把运维/安全/项目管理从 0X 散落改为 04/06/07 合计 494 文件 + 78495 行 / - 14076 行
123 lines
6.1 KiB
Markdown
123 lines
6.1 KiB
Markdown
# 任务说明书 — 员工端头像菜单退出
|
||
|
||
> **关联需求编号**: 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** 对话框消息 | "退出后会话记录会清空，当前咨询进度将丢失" | 用户反馈：需明确告知会话数据会清空 |
|
||
|
||
---
|
||
|
||
*文档结束*
|