mini-starter/_bmad-output/implementation-artifacts/13-15-mini-ui-simplification.md

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