Home Explore Help
Register Sign In
186-template-175
/
mini-starter
forked from 155-template-138/mini-starter
2
0
Fork 0
Files
Tree: 3eeaefc94a
Branches Tags
mini-starter
/
docs
/
stories
/
006.003.child-goods-inline-edit.story.md

006.003.child-goods-inline-edit.story.md 8.0 KB
History Raw

Story 006.003: 子商品行内编辑功能

Status

Ready for Review

Story

As a 商品管理员 I want 在父子商品管理面板中直接编辑子商品信息 so that 无需跳转到其他页面就能快速修改子商品的基本信息，提高工作效率

Acceptance Criteria

  1. 管理员能在父子商品管理面板中直接编辑子商品信息，无需跳转到其他页面
  2. 编辑体验流畅自然，点击编辑按钮时当前行切换为表单输入模式
  3. 支持编辑子商品的基本信息：名称、价格、成本价、库存、排序、状态
  4. 提供保存和取消按钮，保存时调用更新API
  5. 编辑完成后自动刷新子商品列表

Tasks / Subtasks

  • 扩展ChildGoodsList组件，支持行内编辑模式 (AC: 1, 2)
    • 添加editingChildId状态管理，跟踪当前正在编辑的子商品ID
    • 修改编辑按钮点击逻辑，触发行内编辑模式
    • 添加行内编辑表单组件，复用现有商品表单验证逻辑
    • 实现保存和取消按钮功能
  • 实现行内编辑表单组件 (AC: 3)
    • 创建ChildGoodsInlineEditForm.tsx组件
    • 支持编辑字段：名称、价格、成本价、库存、排序、状态
    • 复用AdminUpdateGoodsDtoSchema验证逻辑
    • 集成到ChildGoodsList表格行中
  • 集成商品更新API调用 (AC: 4)
    • 在行内编辑表单中添加更新API调用逻辑
    • 使用goodsClientManager.get().api[':id'].$put()方法
    • 处理API响应和错误状态
    • 添加加载状态和成功/失败提示
  • 实现编辑完成后的自动刷新逻辑 (AC: 5)
    • 编辑成功后自动刷新子商品列表
    • 使用React Query的refetch方法
    • 保持与现有父子商品管理面板的集成
  • 添加单元测试 (AC: 1-5)
    • 为ChildGoodsList组件的行内编辑功能添加测试
    • 测试编辑模式切换逻辑
    • 测试表单验证和提交逻辑
    • 测试API调用和错误处理
  • 更新现有测试 (AC: 1-5)
    • 更新ChildGoodsList.test.tsx测试文件
    • 确保现有功能不受影响
    • 添加行内编辑功能的相关测试用例

Dev Notes

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

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

组件架构信息 [Source: architecture/component-architecture.md]

  • 前端组件组织: src/client/admin/components/ - 管理后台专用组件
  • 技术栈配置: React Router v7, @tanstack/react-query, shadcn/ui
  • 现有组件: ChildGoodsList.tsx已存在，位于packages/goods-management-ui-mt/src/components/
  • 组件交互: 前端React组件 → Hono API路由 → 通用CRUD服务 → TypeORM实体

源码树信息 [Source: architecture/source-tree.md]

  • 项目结构: monorepo模式，包含小程序(mini)、Web应用(web)和模块化包架构
  • 包管理: 使用pnpm workspace管理多包依赖关系
  • 商品管理UI包: @d8d/goods-management-ui-mt - 多租户商品管理界面包
  • 组件位置: packages/goods-management-ui-mt/src/components/ChildGoodsList.tsx
  • API客户端: packages/goods-management-ui-mt/src/api/goodsClient.ts

数据模型信息 [Source: architecture/data-model-schema-changes.md]

  • 商品实体字段:
    • name: string - 商品名称 (必填，1-255字符)
    • price: number - 售卖价 (非负数，最多两位小数)
    • costPrice: number - 成本价 (非负数，最多两位小数)
    • stock: number - 库存 (非负整数)
    • sort: number - 排序值 (非负整数)
    • state: number - 状态 (1可用，2不可用)
  • 更新Schema: AdminUpdateGoodsDto包含所有可更新字段
  • 验证规则: 使用Zod schema验证，已在admin-goods.schema.mt.ts中定义

API信息

  • 更新API端点: PUT /api/v1/goods/:id (通过adminGoodsRoutesMt聚合路由)
  • 客户端调用: goodsClientManager.get().api[':id'].$put({ param: { id }, json: updateData })
  • API聚合: 通过admin-goods-aggregated.mt.ts聚合基础CRUD和父子商品管理路由
  • 租户支持: 所有API调用包含tenantId参数，支持多租户数据隔离

现有组件分析

  • ChildGoodsList.tsx当前状态:
    • 显示子商品列表表格
    • 包含编辑按钮，点击触发onEditChild回调
    • 使用goodsClientManager.get().api[':id'].children.$get()获取子商品列表
    • 使用React Query管理数据状态
  • 需要扩展的功能:
    • 行内编辑模式状态管理
    • 行内编辑表单组件
    • 更新API集成
    • 自动刷新逻辑

文件位置

  • 主组件: packages/goods-management-ui-mt/src/components/ChildGoodsList.tsx
  • 行内编辑表单组件: packages/goods-management-ui-mt/src/components/ChildGoodsInlineEditForm.tsx (新建)
  • 测试文件: packages/goods-management-ui-mt/tests/unit/ChildGoodsList.test.tsx
  • API客户端: packages/goods-management-ui-mt/src/api/goodsClient.ts
  • Schema定义: packages/goods-module-mt/src/schemas/admin-goods.schema.mt.ts

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

  • 测试框架: Vitest + Testing Library
  • 测试位置: __tests__文件夹与源码并列
  • 覆盖率目标: 核心业务逻辑 > 80%
  • 测试类型: 单元测试、集成测试、E2E测试
  • RPC客户端架构: 使用单例模式的客户端管理器，通过clientManager.get().api.$method调用

Testing

  • 测试框架: Vitest + Testing Library + React Testing Library
  • 测试文件位置: packages/goods-management-ui-mt/tests/unit/
  • 测试标准:
    • 组件渲染测试
    • 用户交互测试（点击编辑按钮、表单输入、保存/取消）
    • API调用mock测试
    • 状态管理测试
    • 错误处理测试
  • 测试模式:
    • 使用vi.mock() mock API客户端
    • 使用@testing-library/user-event模拟用户交互
    • 验证组件状态变化和API调用
  • 具体测试要求:
    • 测试编辑模式切换功能
    • 测试表单验证逻辑
    • 测试API调用成功和失败场景
    • 测试自动刷新功能
    • 确保现有功能不受影响

Change Log

Date Version Description Author
2025-12-10 1.0 初始故事创建 Bob (Scrum Master)

Dev Agent Record

Agent Model Used

  • Claude Sonnet 4.5 (claude-sonnet-4-5-20250929)

Debug Log References

  • 测试运行日志：ChildGoodsList组件测试通过，GoodsParentChildPanel.test.tsx文件引用问题（与本次实现无关）
  • 控制台日志：修复了测试中的user-event导入问题，更新了mock响应格式

Completion Notes List

  1. 成功扩展了ChildGoodsList组件，添加了行内编辑功能
  2. 实现了ChildGoodsInlineEditForm组件，支持所有必需字段的编辑
  3. 集成了商品更新API调用，包含完整的错误处理和加载状态
  4. 实现了编辑完成后的自动刷新逻辑
  5. 修改了handleEdit函数逻辑：行内编辑现在优先于onEditChild回调，确保行内编辑功能正常工作
  6. 添加了enableInlineEdit配置选项，支持灵活控制行内编辑行为
  7. 添加了完整的单元测试，覆盖编辑模式切换、表单验证、API调用等场景
  8. 更新了现有测试文件，确保向后兼容性

File List

新建文件：

  • packages/goods-management-ui-mt/src/components/ChildGoodsInlineEditForm.tsx - 行内编辑表单组件
  • packages/goods-management-ui-mt/tests/unit/ChildGoodsInlineEditForm.test.tsx - 行内编辑表单测试

修改文件：

  • packages/goods-management-ui-mt/src/components/ChildGoodsList.tsx - 扩展行内编辑功能
  • packages/goods-management-ui-mt/tests/unit/ChildGoodsList.test.tsx - 更新测试，添加行内编辑功能测试
  • docs/stories/006.003.child-goods-inline-edit.story.md - 更新任务状态和开发记录

QA Results