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

## Status
Ready for Review

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

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

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

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