13-15-mini-ui-simplification.md 8.2 KB
Story 13.15: 企业小程序 UI 简化 - 删除写操作按钮
Status: done
元数据
- Epic: Epic 13 - 跨端数据同步测试
- 状态: ready-for-dev
- 优先级: P1 (UI 简化)
- 故事点: 3
用户故事
作为企业管理员， 我在企业小程序中查看订单信息时， 我希望看到简洁的只读界面，没有写操作按钮， 以便与企业小程序的只读定位保持一致，避免用户混淆。
问题背景
当前问题： 企业小程序定位为只读应用，所有写操作都应该在管理后台完成。但当前小程序中仍存在一些写操作按钮，可能导致用户混淆：
订单列表页:
- "新建订单"按钮（第 441-447 行）
- OrderCard 中的"下载视频"按钮（第 159-163 行）
订单详情页:
- "批量下载"按钮（第 701-703 行）
- 视频列表中的"下载"按钮（第 719-721 行）
- 视频列表中的"分享"按钮（第 722-724 行）
- "下载订单报告"按钮（第 736-741 行）
- "分享订单"按钮（第 742-747 行）
业务定位：
- 企业小程序是只读查看应用
- 所有写操作（创建、编辑、删除、下载、分享）应在管理后台完成
- 小程序端应该专注于查看和数据展示
影响范围： 企业用户可能误以为可以在小程序中执行写操作，导致使用体验混乱。
验收标准
AC 1: 订单列表页无写操作按钮
Given 企业用户登录企业小程序 When 进入订单列表页 Then 不应显示"新建订单"按钮 And OrderCard 中不应显示"下载视频"按钮 And 应保留"查看详情"按钮
AC 2: 订单详情页无写操作按钮
Given 企业用户进入订单详情页 When 查看订单详情 Then 视频资料卡片中不应显示"批量下载"按钮 And 视频列表中不应显示"下载"按钮 And 视频列表中不应显示"分享"按钮 And 底部操作区域不应显示"下载订单报告"按钮 And 底部操作区域不应显示"分享订单"按钮
AC 3: 只读功能保持完整
Given 企业用户在小程序中 When 查看订单数据 Then 所有只读功能应正常工作 And 订单列表应正常显示 And 订单详情应正常显示 And 统计数据应正常显示
AC 4: E2E 测试验证按钮已删除
Given E2E 测试环境 When 运行企业小程序 UI 简化测试 Then 应验证订单列表页无写操作按钮 And 应验证订单详情页无写操作按钮 And 应验证只读功能不受影响
任务 / Subtasks
任务 0: 使用 Playwright MCP 验证当前 UI 状态 (AC: #)
- 使用 Playwright MCP 导航到订单列表页
- 截图并记录当前显示的按钮
- 导航到订单详情页
- 截图并记录当前显示的按钮
- 确认需要删除的按钮列表
任务 1: 删除订单列表页写操作按钮 (AC: #1)
- 删除
OrderList.tsx中的"新建订单"按钮代码（第 441-447 行） - 删除
OrderCard组件中的"下载视频"按钮代码（第 159-163 行） - 删除相关的 handler 函数（
handleCreateOrder,handleDownloadVideo） - 删除
OrderCardprops 中的onDownloadVideo
任务 2: 删除订单详情页写操作按钮 (AC: #2)
- 删除
OrderDetail.tsx中的"批量下载"按钮代码（第 701-703 行） - 删除视频列表中的"下载"按钮代码（第 719-721 行）
- 删除视频列表中的"分享"按钮代码（第 722-724 行）
- 删除底部操作区域（第 733-749 行）或仅删除其中的按钮
- 删除相关的 handler 函数（
handleDownloadReport,handleBatchDownload,handleDownloadVideo,handleShareVideo）
任务 3: 验证只读功能不受影响 (AC: #3)
- 手动测试订单列表页显示正常
- 手动测试订单详情页显示正常
- 验证统计数据正常显示
- 验证导航功能正常
任务 4: 创建/更新 Page Object 方法 (AC: #4)
- 在
enterprise-mini.page.ts中添加验证方法：-
expectOrderListNoWriteButtons()- 验证订单列表页无写操作按钮 -
expectOrderDetailNoWriteButtons()- 验证订单详情页无写操作按钮
-
任务 5: 创建 E2E 测试文件 (AC: #4)
- 创建
web/tests/e2e/specs/cross-platform/mini-ui-simplification.spec.ts - 实现订单列表页按钮验证测试
- 实现订单详情页按钮验证测试
- 实现只读功能验证测试
任务 6: 使用 Playwright MCP 验证修复效果 (AC: #1, #2)
- 修复后使用 Playwright MCP 重新截图
- 对比修复前后的 UI 变化
- 确认所有写操作按钮已删除
- 确认只读功能正常
任务 7: 更新 sprint-status.yaml (AC: #)
- 更新 Story 13-15 状态为
done
Dev Notes
Epic 13 背景和依赖
Epic 13: 跨端数据同步测试 (Epic E)
- 目标: 验证后台操作后小程序端的数据同步，覆盖完整的业务流程
- 业务分组: Epic E（跨端数据同步测试）
- 背景: 企业小程序定位为只读应用，本 Story 进一步简化 UI
- 依赖:
- Epic 12: 已完成（小程序登录测试）
- Story 13-11: 已完成（订单详情页完整性验证）
企业小程序定位
只读应用定位：
- 企业小程序用于查看订单和人才信息
- 所有写操作（创建、编辑、删除、下载、分享）应在管理后台完成
- 小程序端应该专注于数据展示和查看
写操作按钮清单：
| 页面 | 按钮 | 代码位置 | 状态 |
|---|---|---|---|
| 订单列表页 | 新建订单 | OrderList.tsx:441-447 | 待删除 |
| 订单列表页 | 下载视频 | OrderList.tsx:159-163 | 待删除 |
| 订单详情页 | 批量下载 | OrderDetail.tsx:701-703 | 待删除 |
| 订单详情页 | 下载（视频） | OrderDetail.tsx:719-721 | 待删除 |
| 订单详情页 | 分享（视频） | OrderDetail.tsx:722-724 | 待删除 |
| 订单详情页 | 下载订单报告 | OrderDetail.tsx:736-741 | 待删除 |
| 订单详情页 | 分享订单 | OrderDetail.tsx:742-747 | 待删除 |
相关文件
前端文件（需修改）：
mini-ui-packages/yongren-order-management-ui/src/pages/OrderList/OrderList.tsxmini-ui-packages/yongren-order-management-ui/src/pages/OrderDetail/OrderDetail.tsx
E2E 测试文件（需创建）：
web/tests/e2e/specs/cross-platform/mini-ui-simplification.spec.ts
Page Object（需扩展）：
web/tests/e2e/pages/mini/enterprise-mini.page.ts
测试开发流程（Playwright MCP 持续验证）
本 Story 采用 Playwright MCP 持续验证的测试开发流程：
- 任务 0 (EXPLORE): 使用 Playwright MCP 探索当前 UI 状态
- 任务 1-2 (RED): 删除写操作按钮代码
- 任务 3 (GREEN): 验证只读功能正常
- 任务 4-5 (TEST): 创建 E2E 测试
- 任务 6 (VERIFY): 使用 Playwright MCP 验证修复效果
订单列表页 URL 参考
/mini/#/mini/pages/yongren/order/list/index
订单详情页 URL 参考
/mini/#/mini/pages/yongren/order/detail/index?id={orderId}
参考文档
相关 Story 文档：
13-11-order-detail-validation.md- 订单详情页完整性验证13-8-order-list-validation.md- 订单列表页完整验证12-5-enterprise-mini-login.md- 企业小程序登录测试
项目结构说明
前端组件位置：
mini-ui-packages/
└── yongren-order-management-ui/
└── src/
└── pages/
├── OrderList/
│ └── OrderList.tsx # 需删除"新建订单"和"下载视频"按钮
└── OrderDetail/
└── OrderDetail.tsx # 需删除多个写操作按钮
E2E 测试位置：
web/tests/e2e/
├── specs/
│ └── cross-platform/
│ └── mini-ui-simplification.spec.ts # 需创建
└── pages/
└── mini/
└── enterprise-mini.page.ts # 需扩展验证方法
Dev Agent Record
Agent Model Used
- Model: Claude (d8d-model)
- Date: 2026-01-16
Debug Log References
- 无需调试日志