Bladeren bron

📝 docs(story): 新增子商品行内编辑功能故事文档

- 创建故事文档 006.003.child-goods-inline-edit.story.md
- 详细描述子商品行内编辑功能的用户故事和验收标准
- 包含技术栈、组件架构、数据模型和API信息等开发说明
- 提供完整的任务分解和测试要求
- 记录开发代理信息和文件列表
yourname 1 maand geleden
bovenliggende
commit
87999aa271
1 gewijzigde bestanden met toevoegingen van 149 en 0 verwijderingen
  1. 149 0
      docs/stories/006.003.child-goods-inline-edit.story.md

+ 149 - 0
docs/stories/006.003.child-goods-inline-edit.story.md

@@ -0,0 +1,149 @@
+# Story 006.003: 子商品行内编辑功能
+
+## Status
+Draft
+
+## 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`组件
+  - [ ] 支持编辑字段:名称、价格、成本价、库存、排序、状态
+  - [ ] 复用`AdminUpdateGoodsDto`Schema验证逻辑
+  - [ ] 集成到`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
+
+### Debug Log References
+
+### Completion Notes List
+
+### File List
+
+## QA Results