mini-starter/docs/stories/010.005.story.md

Story 010.005: 优化操作按钮文本

Status

Draft

Story

As a 订单管理员 I want 操作按钮文本准确反映功能 so that 更直观地理解按钮功能

Acceptance Criteria

1. 操作栏中"添加资产"按钮修改为"添加附件"
2. 按钮功能保持不变
3. 相关提示文本同步更新

Tasks / Subtasks

• 修改OrderManagement.tsx中的"添加资产"按钮文本 (AC: 1)
  • 定位文件：allin-packages/order-management-ui/src/components/OrderManagement.tsx:565
  • 将"添加资产"修改为"添加附件"
  • 确保按钮的data-testid属性保持不变：add-asset-button-${order.id}
• 修改OrderPersonAssetAssociation.tsx中的"添加资产"按钮文本 (AC: 1)
  • 定位文件：allin-packages/order-management-ui/src/components/OrderPersonAssetAssociation.tsx:350
  • 将"添加资产"修改为"添加附件"
  • 确保按钮功能保持不变
• 修改关闭订单确认对话框中的相关文本 (AC: 3)
  • 定位文件：allin-packages/order-management-ui/src/components/OrderManagement.tsx:707
  • 将"订单关闭后将无法再添加人员或资产"修改为"订单关闭后将无法再添加人员或附件"
  • 确保测试中的验证文本同步更新
• 更新测试文件中的相关注释文本 (AC: 3)
  • 定位文件：allin-packages/order-management-ui/tests/integration/order.integration.test.tsx
  • 将第703行的"先打开下拉菜单，然后点击添加资产按钮"修改为"先打开下拉菜单，然后点击添加附件按钮"
  • 将第708行的"等待下拉菜单打开，然后点击添加资产按钮"修改为"等待下拉菜单打开，然后点击添加附件按钮"
• 验证修改后的功能 (AC: 2)
  • 运行订单管理UI包的测试：pnpm test
  • 验证所有测试通过
  • 手动测试按钮功能是否保持不变

Dev Notes

技术栈信息 [Source: architecture/tech-stack.md]

• 前端框架: React 19.1.0 + TypeScript
• 路由: React Router v7
• 状态管理: @tanstack/react-query (服务端状态) + Context (本地状态)
• UI组件库: shadcn/ui (基于Radix UI)
• 构建工具: Vite 7.0.0
• 样式: Tailwind CSS 4.1.11
• HTTP客户端: 基于Hono Client的封装 + axios适配器

项目结构信息 [Source: architecture/source-tree.md]

• 订单管理UI包路径: allin-packages/order-management-ui/
• 订单模块路径: allin-packages/order-module/
• Web应用路径: web/src/client/admin/
• 组件位置: allin-packages/order-management-ui/src/components/OrderManagement.tsx
• API客户端位置: allin-packages/order-management-ui/src/api/orderClient.ts
• 订单表单组件: allin-packages/order-management-ui/src/components/OrderForm.tsx

需要修改的具体位置（基于代码分析）

1. OrderManagement.tsx中的"添加资产"按钮

• 文件: allin-packages/order-management-ui/src/components/OrderManagement.tsx:565
• 当前文本: 添加资产
• 修改为: 添加附件

• 相关代码:

  <DropdownMenuItem
  onClick={() => handleAddAsset(order.id)}
  data-testid={`add-asset-button-${order.id}`}
  >
  <FileText className="mr-2 h-4 w-4" />
  添加资产  // ← 修改这里
  </DropdownMenuItem>
  

2. OrderPersonAssetAssociation.tsx中的"添加资产"按钮

• 文件: allin-packages/order-management-ui/src/components/OrderPersonAssetAssociation.tsx:350
• 当前文本: 添加资产
• 修改为: 添加附件

• 相关代码:

  <Button onClick={handleAddAsset} size="sm">
  <Plus className="mr-2 h-4 w-4" />
  添加资产  // ← 修改这里
  </Button>
  

3. OrderManagement.tsx中的关闭订单确认对话框文本

• 文件: allin-packages/order-management-ui/src/components/OrderManagement.tsx:707
• 当前文本: 确定要关闭这个订单吗？订单关闭后将无法再添加人员或资产。
• 修改为: 确定要关闭这个订单吗？订单关闭后将无法再添加人员或附件。

• 相关代码:

  <AlertDialogDescription data-testid="close-confirm-dialog-description">
  确定要关闭这个订单吗？订单关闭后将无法再添加人员或资产。  // ← 修改这里
  </AlertDialogDescription>
  

4. 测试文件中的注释文本

• 文件: allin-packages/order-management-ui/tests/integration/order.integration.test.tsx
• 第703行: // 先打开下拉菜单，然后点击添加资产按钮 → // 先打开下拉菜单，然后点击添加附件按钮
• 第708行: // 等待下拉菜单打开，然后点击添加资产按钮 → // 等待下拉菜单打开，然后点击添加附件按钮

UI包开发规范要求 [Source: architecture/ui-package-standards.md]

1. 必须遵循UI包开发规范，基于史诗008经验总结
2. API路径映射验证: 开发前必须验证故事中的API路径映射与实际后端路由定义的一致性
3. 类型推断最佳实践: 必须使用RPC推断类型，而不是直接导入schema类型
4. 测试选择器优化: 必须为关键交互元素添加 data-testid 属性
5. 表单组件模式: 必须使用条件渲染两个独立的Form组件
6. API调用一致性: 必须根据实际路由名称修正API调用

编码标准要求 [Source: architecture/coding-standards.md]

1. 测试框架: 使用Vitest + Testing Library + hono/testing + Playwright
2. 测试位置: tests/ 文件夹与源码并列
3. 覆盖率目标: 核心业务逻辑 > 80%
4. 测试类型: 单元测试、集成测试、E2E测试

测试标准 [Source: architecture/testing-strategy.md]

• 测试框架: Vitest + Testing Library
• 测试位置: tests/integration/ 文件夹
• 测试类型: 集成测试验证组件与API交互
• 覆盖率要求: 核心编辑订单功能 > 80%

测试选择器要求

必须保持现有的 data-testid 属性不变：

• data-testid="add-asset-button-${order.id}" (按钮功能不变，只是文本修改)
• data-testid="close-confirm-dialog-description" (文本内容更新)

文件位置

• 主要修改文件: allin-packages/order-management-ui/src/components/OrderManagement.tsx
• 其他修改文件: allin-packages/order-management-ui/src/components/OrderPersonAssetAssociation.tsx
• 测试文件: allin-packages/order-management-ui/tests/integration/order.integration.test.tsx

测试验证

具体测试要求

1. 按钮文本验证: 验证"添加资产"按钮文本已修改为"添加附件"
2. 功能测试: 验证按钮功能保持不变，点击后仍能打开资产关联模态框
3. 对话框文本验证: 验证关闭订单确认对话框文本已更新
4. 回归测试: 确保现有功能不受影响

测试执行

• 运行订单管理UI包测试: pnpm test
• 验证所有测试通过
• 检查测试覆盖率

Change Log

Date	Version	Description	Author
2025-12-12	1.0	故事创建，基于史诗010-05需求	Scrum Master Bob

Dev Agent Record

此部分由开发代理在实施过程中填写

Agent Model Used

Debug Log References

Completion Notes List

File List

QA Results

此部分由QA代理在审查完成后填写