Etusivu Tutki Apua
Rekisteröidy Kirjaudu sisään
188-template-179
/
mini-starter
haarautettu lähteestä 155-template-138/mini-starter
2
0
Haarauta 0
Tiedostot
Puu: 9a92ac6909
Haarat Tunnisteet
mini-starter
/
docs
/
stories
/
010.004.story.md

010.004.story.md 8.7 KB
Historia Raaka

Story 010.004: 修复订单状态更新

Status

Draft

Story

As a 订单管理员 I want 能够成功更新订单状态 so that 准确跟踪订单进度

Acceptance Criteria

  1. 编辑订单信息后状态能够正常更新
  2. 状态变更后页面显示正确的状态信息
  3. 状态更新历史记录完整
  4. 状态变更权限控制正确

Tasks / Subtasks

  • 分析当前订单管理UI组件的状态更新逻辑 (AC: 1-4)
    • 检查 allin-packages/order-management-ui/src/components/OrderManagement.tsx 中的状态更新相关代码
    • 分析 OrderForm 组件的状态更新逻辑
    • 检查订单更新API调用是否正确
  • 检查订单模块后端更新路由 (AC: 1)
    • 检查 allin-packages/order-module/src/routes/order-crud.routes.ts 中的更新路由
    • 验证更新路由路径映射：update[':id']['$put']
    • 检查更新请求和响应的类型定义
  • 修复订单更新mutation逻辑 (AC: 1)
    • 在 OrderManagement 组件中添加 updateMutation
    • 实现订单更新API调用
    • 处理更新成功后的状态同步
  • 修复订单表单的状态更新逻辑 (AC: 1-2)
    • 检查 OrderForm 组件的表单提交逻辑
    • 确保编辑表单正确调用更新API
    • 验证状态更新后的页面刷新
  • 添加状态更新历史记录功能 (AC: 3)
    • 检查订单实体是否有状态变更历史字段
    • 如果需要，添加状态变更历史记录逻辑
    • 在订单详情中显示状态变更历史
  • 验证状态变更权限控制 (AC: 4)
    • 检查后端路由的权限控制中间件
    • 验证前端权限控制逻辑
    • 确保只有授权用户可以更新订单状态
  • 更新测试用例，验证状态更新功能 (AC: 1-4)
    • 更新现有集成测试，包含状态更新测试
    • 添加权限控制测试用例
    • 验证状态变更历史记录功能
  • 进行功能测试和验证 (AC: 1-4)
    • 手动测试订单状态更新功能
    • 验证状态变更后的页面显示
    • 检查权限控制功能

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. 订单列表查询: 使用 useQuery 获取订单列表
  2. 订单详情获取: 使用 getOrderDetailMutation 获取单个订单详情
  3. 订单激活/关闭: 使用 activateMutation 和 closeMutation
  4. 订单删除: 使用 deleteMutation
  5. 订单编辑: 通过 handleEditOrder 函数打开编辑表单

发现问题: 当前组件缺少 updateMutation 用于更新订单信息，编辑表单可能没有正确调用更新API。

订单模块API信息 [Source: 代码分析]

  • 订单路由结构: 根据 orderClient.ts 分析，更新路由为 update[':id']['$put']
  • 更新请求类型: UpdateOrderRequest = InferRequestType<typeof orderClient.update[':id']['$put']>['json']
  • 更新响应类型: UpdateOrderResponse = InferResponseType<typeof orderClient.update[':id']['$put'], 200>
  • 其他相关路由:
    • 创建订单: create.$post
    • 获取订单列表: list.$get
    • 获取订单详情: detail[':id']['$get']
    • 删除订单: delete[':id']['$delete']
    • 激活订单: activate[':orderId']['$post']
    • 关闭订单: close[':orderId']['$post']

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/ui-package-standards.md#表单组件模式规范]

规范: 当组件需要支持创建和编辑两种表单模式时，必须使用条件渲染两个独立的Form组件，避免在单个Form组件上动态切换props。

// ✅ 正确：条件渲染两个独立的Form组件
{isCreateForm ? (
  <Form {...createForm}>
    {/* 创建表单内容 */}
  </Form>
) : (
  <Form {...updateForm}>
    {/* 编辑表单内容 */}
  </Form>
)}

类型推断最佳实践 [Source: architecture/ui-package-standards.md#类型推断最佳实践]

规范: 必须使用RPC推断类型，而不是直接导入schema类型，避免Date/string类型不匹配问题。

// ✅ 正确：使用RPC推断类型（推荐）
export type UpdateOrderRequest = InferRequestType<typeof orderClient.update[':id']['$put']>['json'];

// ❌ 错误：直接导入schema类型（可能导致Date/string不匹配）
import type { UpdateOrderSchema } from '@d8d/allin-order-module/schemas';

测试选择器优化规范 [Source: architecture/ui-package-standards.md#测试选择器优化规范]

规范: 必须为关键交互元素添加 data-testid 属性，避免使用文本查找导致的测试冲突。

需要添加的test ID:

  • data-testid="order-update-form"
  • data-testid="order-update-submit-button"
  • data-testid="order-status-select"
  • data-testid="order-work-status-select"

需要修复的具体问题

  1. 缺少updateMutation: OrderManagement 组件中没有定义 updateMutation
  2. 编辑表单逻辑: OrderForm 组件可能没有正确处理编辑模式
  3. 状态同步: 更新成功后需要刷新订单列表和更新本地状态
  4. 权限控制: 需要验证状态变更的权限控制逻辑

文件位置

  • 主要修改文件: allin-packages/order-management-ui/src/components/OrderManagement.tsx
  • 表单组件文件: allin-packages/order-management-ui/src/components/OrderForm.tsx
  • API客户端文件: allin-packages/order-management-ui/src/api/orderClient.ts
  • 类型定义文件: allin-packages/order-management-ui/src/api/types.ts
  • 测试文件: allin-packages/order-management-ui/tests/integration/order.integration.test.tsx
  • 后端路由文件: allin-packages/order-module/src/routes/order-crud.routes.ts

测试

测试标准 [Source: architecture/coding-standards.md]

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

具体测试要求

  1. 单元测试: 测试新的更新mutation逻辑
  2. 集成测试: 测试组件与更新API的完整交互
  3. 表单测试: 验证编辑表单的提交功能
  4. 状态同步测试: 验证更新后的状态同步
  5. 权限测试: 验证状态变更的权限控制

测试选择器要求

必须为新的更新相关控件添加 data-testid 属性：

  • data-testid="order-update-form"
  • data-testid="order-update-submit-button"
  • data-testid="order-status-select"
  • data-testid="order-work-status-select"
  • data-testid="order-edit-button-{id}"

Change Log

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

Dev Agent Record

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

Agent Model Used

待填写

Debug Log References

待填写

Completion Notes List

待填写

File List

待填写

QA Results

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