145 lines
4.7 KiB
Markdown
145 lines
4.7 KiB
Markdown
|
# 任务说明书：H5右侧栏布局调整
|
||
|
|
|
||
|
|
> **版本**: v1.0 | **日期**: 2026-07-17
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 📋 基本信息
|
||
|
|
|
||
|
|
| 项目 | 内容 |
|
||
|
|
|------|------|
|
||
|
|
| **任务名称** | H5右侧栏布局调整 |
|
||
|
|
| **任务ID** | #82 |
|
||
|
|
| **优先级** | 🟡 P2 |
|
||
|
|
| **类型** | 功能开发 |
|
||
|
|
| **状态** | ✅ 已完成 |
|
||
|
|
| **负责人** | 宋献 |
|
||
|
|
| **创建日期** | 2026-07-17 |
|
||
|
|
| **计划完成日期** | 2026-07-17 |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 📥 输入项来源
|
||
|
|
|
||
|
|
### 产品需求
|
||
|
|
| 来源文档 | 相关章节 | 说明 |
|
||
|
|
|----------|----------|------|
|
||
|
|
| `01-产品文档/01-02产品设计/H5用户端原型图实现概览.md` | §右侧面板 | 现有右侧栏设计 |
|
||
|
|
| 本需求 | 原型图v3 | 调整后的布局要求 |
|
||
|
|
|
||
|
|
### 原型设计
|
||
|
|
| 来源文档 | 页面 | 说明 |
|
||
|
|
|----------|------|------|
|
||
|
|
| 会话页面右侧面板 | 右侧栏 | 新布局原型图 |
|
||
|
|
| `01-产品文档/05-用户端H5/原型-REQ-用户-000-H5用户端-v2.0.html` | 完整页面 | **v2.0 更新**：输入栏重构(人工坐席+语音输入)、右边栏布局(排队到底部) |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 📤 输出成果要求
|
||
|
|
|
||
|
|
### 交付物清单
|
||
|
|
|
||
|
|
| # | 交付物 | 类型 | 说明 |
|
||
|
|
|---|--------|------|------|
|
||
|
|
| 1 | `frontend-h5/src/components/assistant/RightPanel.vue` | 代码 | 调整布局结构 |
|
||
|
|
| 2 | `frontend-h5/src/components/assistant/DynamicRecommend.vue` | 代码 | 移除分类标签，仅用颜色区分 |
|
||
|
|
| 3 | `frontend-h5/src/components/assistant/QueueWaiting.vue` | 代码 | 压缩高度，新增答题开关 |
|
||
|
|
| 4 | 部署验证 | 部署测试 | H5构建并部署到测试环境 |
|
||
|
|
|
||
|
|
### 代码要求
|
||
|
|
- 遵循项目代码规范
|
||
|
|
- 所有新增代码通过 ESLint 检查
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🔧 验证方式
|
||
|
|
|
||
|
|
### 功能验证
|
||
|
|
| 验证项 | 验证方法 | 预期结果 |
|
||
|
|
|--------|----------|-----------|
|
||
|
|
| 智能推荐区域显示正常 | 浏览器访问H5 | 3张推荐卡片显示，颜色边框正确 |
|
||
|
|
| 自助诊断标题样式统一 | 浏览器访问H5 | 与设备信息、智能推荐标题样式一致 |
|
||
|
|
| 排队卡片高度压缩 | 浏览器访问H5 | 高度约为原来50% |
|
||
|
|
| 答题开关功能 | 点击答题挑战按钮 | 答题区域展开/折叠 |
|
||
|
|
| 答题默认不显示 | 刷新H5页面 | 答题区域默认折叠，不显示 |
|
||
|
|
| 无重复答题内容 | 点击答题挑战按钮 | 答题区域只显示一次，无重复 |
|
||
|
|
| 平台统计已移除 | 浏览器访问H5 | 四宫格统计不显示 |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## ✅ 完成标准
|
||
|
|
|
||
|
|
### 验收条件
|
||
|
|
- [x] 代码已提交
|
||
|
|
- [x] H5构建成功
|
||
|
|
- [x] 部署到测试环境
|
||
|
|
- [x] 功能验证通过
|
||
|
|
- [x] Bug修复验证通过（答题默认不显示、无重复内容）
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 📊 工作分解
|
||
|
|
|
||
|
|
### 子任务
|
||
|
|
|
||
|
|
| 子任务 | 负责人 | 预估工时 | 状态 |
|
||
|
|
|--------|--------|----------|------|
|
||
|
|
| 调整RightPanel.vue布局结构 | 宋献 | 1h | ✅ 已完成 |
|
||
|
|
| 修改DynamicRecommend.vue移除分类标签 | 宋献 | 0.5h | ✅ 已完成 |
|
||
|
|
| 修改QueueWaiting.vue压缩高度+答题开关 | 宋献 | 1h | ✅ 已完成 |
|
||
|
|
| 构建并部署H5 | 宋献 | 0.5h | ✅ 已完成 |
|
||
|
|
| 功能验证 | 宋献 | 0.5h | ✅ 已完成 |
|
||
|
|
| Bug修复：答题默认显示+重复内容 | 宋献 | 0.5h | ✅ 已完成 |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 📞 依赖与阻塞
|
||
|
|
|
||
|
|
### 前置依赖
|
||
|
|
| 依赖任务 | 依赖说明 | 状态 |
|
||
|
|
|----------|----------|------|
|
||
|
|
| 无 | 独立任务 | - |
|
||
|
|
|
||
|
|
### 阻塞因素
|
||
|
|
| 阻塞项 | 影响范围 | 解决方案 |
|
||
|
|
|--------|----------|-----------|
|
||
|
|
| 无 | - | - |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 📈 变更记录
|
||
|
|
|
||
|
|
| 日期 | 变更内容 | 变更人 | 说明 |
|
||
|
|
|------|----------|--------|------|
|
||
|
|
| 2026-07-17 | 创建任务 | 宋献 | 初始版本 |
|
||
|
|
| 2026-07-17 | Bug修复 | 宋献 | 修复答题默认显示、重复内容问题；按钮改名"答题挑战" |
|
||
|
|
| 2026-07-17 | 任务完成 | 宋献 | 功能开发 + Bug修复已完成并部署 |
|
||
|
|
| 2026-07-24 | 原型图更新 | 宋献 | H5用户端原型图更新至 v2.0：输入栏重构(人工坐席+语音输入)、右边栏布局(排队到底部) |
|
||
|
|
| 2026-07-24 | 部署修复 | 宋献 | 修复排队等待位置：使用 flex:1 让智能推荐占据主空间，排队固定底部；部署后企微内用 Ctrl+Shift+R 强制刷新 |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 📎 调整需求说明
|
||
|
|
|
||
|
|
### 需求概述
|
||
|
|
调整 H5 员工端右侧栏布局和功能：
|
||
|
|
|
||
|
|
1. **智能推荐位置调整**
|
||
|
|
- 标题位于自助诊断下方
|
||
|
|
- 保持一直显示状态
|
||
|
|
- 预留2-3张卡片高度
|
||
|
|
|
||
|
|
2. **推荐内容分区调整**
|
||
|
|
- 取消 L1/L2/L3 分区标题显示（相关推荐/运维提醒/常用资源）
|
||
|
|
- 颜色边框保留（绿/橙/灰）
|
||
|
|
- 无分类标签
|
||
|
|
|
||
|
|
3. **排队卡片压缩**
|
||
|
|
- 高度压缩50%
|
||
|
|
- 取消平台实时统计（四宫格）
|
||
|
|
- 保留：排队位置、前面人数、预计等待时间、积分等级
|
||
|
|
|
||
|
|
4. **答题功能**
|
||
|
|
- 答题开关放在排队卡片标题栏右侧
|
||
|
|
- 点击才展开答题区域，默认折叠
|