|
@@ -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
|