# Story 13.15: 企业小程序 UI 简化 - 删除写操作按钮 Status: done ## 元数据 - Epic: Epic 13 - 跨端数据同步测试 - 状态: ready-for-dev - 优先级: P1 (UI 简化) - 故事点: 3 ## 用户故事 作为企业管理员, 我在企业小程序中查看订单信息时, 我希望看到简洁的只读界面,没有写操作按钮, 以便与企业小程序的只读定位保持一致,避免用户混淆。 ## 问题背景 **当前问题:** 企业小程序定位为只读应用,所有写操作都应该在管理后台完成。但当前小程序中仍存在一些写操作按钮,可能导致用户混淆: 1. **订单列表页**: - "新建订单"按钮(第 441-447 行) - OrderCard 中的"下载视频"按钮(第 159-163 行) 2. **订单详情页**: - "批量下载"按钮(第 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`) - [ ] 删除 `OrderCard` props 中的 `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.tsx` - `mini-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 持续验证**的测试开发流程: 1. **任务 0 (EXPLORE)**: 使用 Playwright MCP 探索当前 UI 状态 2. **任务 1-2 (RED)**: 删除写操作按钮代码 3. **任务 3 (GREEN)**: 验证只读功能正常 4. **任务 4-5 (TEST)**: 创建 E2E 测试 5. **任务 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 - 无需调试日志 ### Completion Notes List ### File List