feat(story-008.002): 创建渠道管理UI移植故事

创建故事008.002：移植渠道管理UI（channel → @d8d/allin-channel-management-ui）
- 吸取故事008.001的经验教训：Schema一致性、API路径、测试精度、类型推导
- 明确标注需要移植的源文件和需要对照参考的文件路径
- 详细任务分解，包含8个主要任务和子任务
- 完整的开发者笔记和技术栈规范引用
- 通过故事草稿检查清单验证（READY状态）

🤖 Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>

docs/stories/008.002.transplant-channel-management-ui.story.md

@@ -0,0 +1,178 @@
+# Story 008.002: 移植渠道管理UI（channel → @d8d/allin-channel-management-ui）
+
+## Status
+Draft
+
+## Story
+**As a** 开发者，
+**I want** 将channel管理页面从allin_system-master/client移植为独立UI包@d8d/allin-channel-management-ui，完成技术栈转换并验证功能完整性，
+**so that** 我们可以将Allin系统的渠道管理UI模块集成到当前项目中，遵循现有的UI包结构和编码标准。
+
+## Acceptance Criteria
+1. 创建`allin-packages/channel-management-ui`目录结构
+2. 完成组件转换：从Ant Design转换为@d8d/shared-ui-components组件
+3. 完成API客户端转换：从自定义fetch API转换为Hono RPC (rpcClient + ClientManager模式)
+4. 完成状态管理转换：从Jotai转换为React Query
+5. 完成表单转换：从Ant Design Form转换为React Hook Form + Zod
+6. 配置package.json：使用`@d8d/allin-channel-management-ui`包名，workspace依赖
+7. 编写组件测试：覆盖所有组件
+8. 通过类型检查和基本测试验证
+9. 与`@d8d/allin-channel-module`后端模块集成验证
+
+**组件测试要求**：
+- 测试文件：`tests/components/ChannelTable.test.tsx`等
+- 测试覆盖：表格组件、表单组件、模态框组件
+- 验证：数据渲染、用户交互、表单验证
+- 遵循现有组件测试模式
+
+## Tasks / Subtasks
+- [ ] 任务1：创建渠道管理UI包基础结构 (AC: 1, 6)
+  - [ ] 创建目录：`allin-packages/channel-management-ui/`
+  - [ ] 复制并修改package.json：参考`allin-packages/platform-management-ui/package.json`，更新包名为`@d8d/allin-channel-management-ui`
+  - [ ] 复制并修改tsconfig.json：参考`allin-packages/platform-management-ui/tsconfig.json`
+  - [ ] 复制并修改vitest.config.ts：参考`allin-packages/platform-management-ui/vitest.config.ts`
+  - [ ] 创建基础目录结构：`src/`、`src/components/`、`src/api/`、`src/hooks/`、`src/types/`、`tests/`
+
+- [ ] 任务2：移植源系统渠道管理页面 (AC: 2)
+  - [ ] 分析源文件：`allin_system-master/client/app/admin/dashboard/channel/page.tsx`
+  - [ ] 参考对照文件：`allin-packages/platform-management-ui/src/components/PlatformManagement.tsx`
+  - [ ] 创建主组件：`src/components/ChannelManagement.tsx`
+  - [ ] 转换Ant Design组件为@d8d/shared-ui-components组件
+  - [ ] 转换Jotai状态管理为React Query
+  - [ ] 转换Ant Design Form为React Hook Form + Zod
+
+- [ ] 任务3：实现RPC客户端 (AC: 3)
+  - [ ] 参考对照文件：`allin-packages/platform-management-ui/src/api/platformClient.ts`
+  - [ ] 创建RPC客户端：`src/api/channelClient.ts`
+  - [ ] 实现ClientManager单例模式
+  - [ ] 导出channelClient和channelClientManager
+  - [ ] 创建API导出文件：`src/api/index.ts`
+
+- [ ] 任务4：实现类型定义 (AC: 3, 8)
+  - [ ] 参考对照文件：`allin-packages/platform-management-ui/src/api/types.ts`
+  - [ ] 创建类型文件：`src/types/index.ts`
+  - [ ] 使用RPC推导类型：参考`typeof channelClient[':id']['$put']`语法
+  - [ ] 定义ChannelResponse、CreateChannelRequest、UpdateChannelRequest等类型
+
+- [ ] 任务5：实现表单验证Schema (AC: 5)
+  - [ ] 分析源系统表单字段
+  - [ ] 创建Zod验证Schema：`src/schemas/channel.schema.ts`
+  - [ ] 实现创建和更新表单的验证规则
+  - [ ] 集成到React Hook Form中
+
+- [ ] 任务6：编写组件测试 (AC: 7)
+  - [ ] 参考对照文件：`allin-packages/platform-management-ui/tests/integration/platform.integration.test.tsx`
+  - [ ] 创建集成测试：`tests/integration/channel.integration.test.tsx`
+  - [ ] 创建组件测试：`tests/components/ChannelManagement.test.tsx`
+  - [ ] 实现mock响应工具函数
+  - [ ] 测试完整CRUD流程和错误处理
+  - [ ] 添加test ID到所有交互元素（基于故事008.001经验）
+
+- [ ] 任务7：验证与后端模块集成 (AC: 9)
+  - [ ] 检查后端模块路由定义：`allin-packages/channel-module/src/routes/`目录
+  - [ ] 检查后端模块集成测试：`allin-packages/channel-module/tests/integration/`目录
+  - [ ] 确保API路径一致性（基于故事008.001经验：不能假设为标准CRUD模式）
+  - [ ] 验证Schema设计一致性（基于故事008.001经验：必须查看后端模块的集成测试和路由定义）
+
+- [ ] 任务8：运行测试和类型检查 (AC: 8)
+  - [ ] 运行组件测试：`pnpm test`
+  - [ ] 运行类型检查：`pnpm typecheck`
+  - [ ] 修复所有测试失败和类型错误
+  - [ ] 验证测试覆盖率
+
+## Dev Notes
+
+### 从前一个故事学到的关键经验（故事008.001）：
+1. **Schema设计一致性验证**：必须查看后端模块的集成测试和路由定义来确保Schema设计正确，不能仅凭前端使用场景假设。
+2. **API路径一致性验证**：必须根据后端实际路由设计前端API调用，不能假设为标准CRUD模式。
+3. **测试精度优化**：在测试中使用test ID比文本查找更精确可靠。
+4. **类型推导优化**：遵循现有UI包的模式，使用正确的RPC类型推导语法。
+
+### 技术栈规范 [Source: docs/architecture/ui-package-standards.md]
+- **包结构规范**：标准目录结构，包含components、api、hooks、types目录
+- **RPC客户端实现规范**：必须使用ClientManager单例模式管理RPC客户端生命周期
+- **组件开发规范**：使用@d8d/shared-ui-components组件库，React Query进行状态管理
+- **类型定义规范**：使用RPC推导类型，避免重新定义类型
+- **测试规范**：集成测试、组件测试、单元测试分层结构
+
+### 项目结构信息 [Source: docs/architecture/source-tree.md]
+- **UI包位置**：`allin-packages/channel-management-ui/`（Allin系统专属包目录）
+- **参考实现**：`allin-packages/platform-management-ui/`（已完成的平台管理UI包）
+- **后端模块**：`allin-packages/channel-module/`（对应的后端模块）
+
+### 源系统文件路径
+- **需要移植的源文件**：`allin_system-master/client/app/admin/dashboard/channel/page.tsx`
+- **需要对照参考的文件**：
+  - `allin-packages/platform-management-ui/src/components/PlatformManagement.tsx`
+  - `allin-packages/platform-management-ui/src/api/platformClient.ts`
+  - `allin-packages/platform-management-ui/src/api/types.ts`
+  - `allin-packages/platform-management-ui/tests/integration/platform.integration.test.tsx`
+
+### 后端模块集成验证点
+- **路由定义**：检查`allin-packages/channel-module/src/routes/`目录中的实际路由
+- **集成测试**：检查`allin-packages/channel-module/tests/integration/`目录中的测试用例
+- **Schema定义**：检查后端模块的Schema定义，确保前后端Schema一致
+
+### 技术栈转换要求
+1. **Ant Design组件 → @d8d/shared-ui-components组件**：重写所有UI组件
+2. **Jotai状态 → React Query + React状态**：重构状态管理
+3. **Ant Design Form → React Hook Form + Zod**：转换表单逻辑
+4. **自定义fetch API → Hono RPC (rpcClient + ClientManager模式)**：重构API客户端
+
+### 文件路径和命名规范
+- **包名**：`@d8d/allin-channel-management-ui`
+- **目录名**：`channel-management-ui`
+- **主组件**：`src/components/ChannelManagement.tsx`
+- **RPC客户端**：`src/api/channelClient.ts`
+- **类型文件**：`src/types/index.ts`
+- **测试文件**：`tests/integration/channel.integration.test.tsx`
+
+## Testing
+
+### 测试标准 [Source: docs/architecture/testing-strategy.md]
+- **测试框架**：使用 Vitest + Testing Library
+- **测试位置**：`tests/integration/`目录（集成测试），`tests/components/`目录（组件测试）
+- **测试类型**：集成测试验证完整CRUD流程和错误处理
+- **覆盖率要求**：集成测试 ≥ 60%
+
+### 本故事特定测试要求
+1. **完整CRUD流程测试**：必须验证创建 → 查询 → 更新 → 删除的完整流程
+2. **错误处理测试**：测试API错误、网络错误、验证错误的处理
+3. **搜索功能测试**：测试按名称搜索和分页查询
+4. **表单验证测试**：测试Zod验证规则和错误提示
+5. **状态管理测试**：验证React Query数据获取和更新
+6. **API集成测试**：验证RPC客户端调用正确性
+7. **用户交互测试**：测试点击、输入、表单提交等交互
+
+### 测试执行流程
+1. 设置测试环境，配置必要的mock
+2. 编写完整CRUD流程测试，模拟用户操作
+3. 编写错误处理测试，验证错误场景
+4. 编写搜索功能测试，验证筛选和分页
+5. 测试表单验证和提交逻辑
+6. 验证API调用和状态更新
+7. 检查测试覆盖率和通过率
+
+### 测试精度优化（基于故事008.001经验）
+- 在组件中添加test ID到所有交互元素
+- 测试中使用test ID而非文本查找
+- 提高测试的稳定性和可维护性
+
+## Change Log
+| Date | Version | Description | Author |
+|------|---------|-------------|--------|
+| 2025-12-03 | 1.0 | 初始故事创建 | Bob (Scrum Master) |
+
+## Dev Agent Record
+*此部分由开发代理在实现过程中填写*
+
+### Agent Model Used
+
+### 关键修复经验记录
+
+### Completion Notes List
+
+### File List
+
+## QA Results
+*此部分由QA代理在QA审查后填写*