feat(story-008.001): 创建平台管理UI移植故事

- 创建故事008.001：移植平台管理UI为独立UI包
- 参考故事007系列写法，标注迁移文件和参考文件路径
- 更新测试要求：使用集成测试而非重复的单元测试
- 遵循UI包开发规范，使用rpcClient + ClientManager模式
- 技术栈转换：Ant Design → @d8d/shared-ui-components

🤖 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.001.transplant-platform-management-ui.story.md

@@ -0,0 +1,247 @@
+# Story 008.001: 移植平台管理UI（platform → @d8d/allin-platform-management-ui）
+
+## Status
+Draft
+
+## Story
+**As a** 开发者，
+**I want** 将platform管理页面从allin_system-master/client移植为独立UI包@d8d/allin-platform-management-ui，完成技术栈转换并验证功能完整性，
+**so that** 我们可以将Allin系统的平台管理UI模块集成到当前项目中，遵循现有的UI包结构和编码标准。
+
+## Acceptance Criteria
+1. 创建`allin-packages/platform-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-platform-management-ui`包名，workspace依赖
+7. 编写集成测试：验证完整CRUD流程和错误处理
+8. 通过类型检查和基本测试验证
+9. 与`@d8d/allin-platform-module`后端模块集成验证
+
+## Tasks / Subtasks
+- [ ] 创建`allin-packages/platform-management-ui`目录结构 (AC: 1)
+  - [ ] 创建`allin-packages/platform-management-ui/`目录
+  - [ ] 创建`package.json`文件，配置包名`@d8d/allin-platform-management-ui`和workspace依赖
+    - **参考文件**: `packages/advertisement-management-ui/package.json`
+    - **修改点**: 包名改为`@d8d/allin-platform-management-ui`，依赖调整
+  - [ ] 创建`tsconfig.json`文件，配置TypeScript编译选项
+    - **参考文件**: `packages/advertisement-management-ui/tsconfig.json`
+  - [ ] 创建`vitest.config.ts`文件，配置测试环境
+    - **参考文件**: `packages/advertisement-management-ui/vitest.config.ts`
+  - [ ] 创建`src/`目录结构：`components/`, `hooks/`, `api/`, `utils/`
+    - **参考结构**: `packages/advertisement-management-ui/src/`目录结构
+- [ ] 分析源UI页面结构 (AC: 2)
+  - [ ] 分析源页面`allin_system-master/client/app/admin/dashboard/platform/page.tsx`
+    - **源文件**: `allin_system-master/client/app/admin/dashboard/platform/page.tsx`
+  - [ ] 分析页面依赖的组件和状态管理
+  - [ ] 分析API调用方式和数据流
+  - [ ] 分析表单验证逻辑
+- [ ] 完成组件转换：平台管理组件从Ant Design转换为@d8d/shared-ui-components组件 (AC: 2)
+  - [ ] 创建`src/components/PlatformTable.tsx`表格组件
+    - **参考文件**: `packages/advertisement-management-ui/src/components/AdvertisementTable.tsx`
+    - **转换要点**: Ant Design Table → @d8d/shared-ui-components Table组件
+    - **需迁移文件**: `allin_system-master/client/app/admin/dashboard/platform/page.tsx`中的表格部分
+  - [ ] 创建`src/components/PlatformForm.tsx`表单组件
+    - **参考文件**: `packages/advertisement-management-ui/src/components/AdvertisementForm.tsx`
+    - **转换要点**: Ant Design Form → React Hook Form + Zod
+    - **需迁移文件**: `allin_system-master/client/app/admin/dashboard/platform/page.tsx`中的表单部分
+  - [ ] 创建`src/components/PlatformModal.tsx`模态框组件
+    - **参考文件**: `packages/advertisement-management-ui/src/components/AdvertisementModal.tsx`
+    - **转换要点**: Ant Design Modal → @d8d/shared-ui-components Dialog组件
+  - [ ] 创建`src/components/PlatformFilter.tsx`筛选组件
+    - **参考文件**: `packages/advertisement-management-ui/src/components/AdvertisementFilter.tsx`
+    - **转换要点**: Ant Design Form筛选 → @d8d/shared-ui-components Input/Select组件
+  - [ ] 创建`src/components/PlatformManagement.tsx`主管理组件
+    - **参考文件**: `packages/advertisement-management-ui/src/components/AdvertisementManagement.tsx`
+    - **转换要点**: 整合所有子组件，管理页面状态
+- [ ] 完成API客户端转换：从自定义fetch API转换为Hono RPC (rpcClient + ClientManager模式) (AC: 3)
+  - [ ] 分析源API调用方式
+    - **需迁移文件**: `allin_system-master/client/app/admin/dashboard/platform/page.tsx`中的API调用逻辑
+  - [ ] 创建`src/api/platformClient.ts` RPC客户端
+    - **参考文件**: `packages/advertisement-management-ui/src/api/advertisementClient.ts`
+    - **架构**: 使用rpcClient + ClientManager单例模式
+    - **参考文件**: `packages/shared-ui-components/utils/hc.ts`中的rpcClient工具
+  - [ ] 实现`PlatformClientManager`类
+    - **模式**: 单例模式，延迟初始化
+    - **方法**: `getInstance()`, `init()`, `get()`, `reset()`
+  - [ ] 导出`platformClientManager`单例实例
+  - [ ] 导出`platformClient`默认客户端实例
+  - [ ] 创建`src/api/types.ts`类型定义文件
+    - **参考文件**: `packages/advertisement-management-ui/src/api/types.ts`
+    - **类型**: 使用`InferResponseType`, `InferRequestType`推导类型
+- [ ] 完成状态管理转换：从Jotai转换为React Query (AC: 4)
+  - [ ] 创建`src/hooks/usePlatformQuery.ts`数据查询Hook
+    - **参考文件**: `packages/advertisement-management-ui/src/hooks/useAdvertisementQuery.ts`
+    - **架构**: 使用`useQuery`管理平台列表查询
+    - **需迁移文件**: `allin_system-master/client/app/admin/dashboard/platform/page.tsx`中的Jotai状态逻辑
+  - [ ] 创建`src/hooks/usePlatformMutation.ts`数据变更Hook
+    - **参考文件**: `packages/advertisement-management-ui/src/hooks/useAdvertisementMutation.ts`
+    - **架构**: 使用`useMutation`管理创建、更新、删除操作
+  - [ ] 创建`src/hooks/usePlatformManagement.ts`综合管理Hook
+    - **参考文件**: `packages/advertisement-management-ui/src/hooks/useAdvertisementManagement.ts`
+    - **架构**: 整合查询和变更操作，提供统一接口
+- [ ] 完成表单转换：从Ant Design Form转换为React Hook Form + Zod (AC: 5)
+  - [ ] 创建`src/schemas/platform.schema.ts`验证Schema
+    - **参考文件**: `packages/advertisement-management-ui/src/schemas/advertisement.schema.ts`
+    - **架构**: 使用`z.object()`定义创建和更新Schema
+    - **需迁移文件**: 分析源页面中的表单验证规则
+  - [ ] 创建`CreatePlatformSchema`和`UpdatePlatformSchema`
+    - **验证规则**: 必填字段、字符串长度、数据类型验证
+  - [ ] 创建对应的TypeScript类型定义
+  - [ ] 在`PlatformForm`组件中集成React Hook Form + Zod
+- [ ] 配置package.json：使用`@d8d/allin-platform-management-ui`包名，workspace依赖 (AC: 6)
+  - [ ] 配置`package.json`中的`name`字段为`@d8d/allin-platform-management-ui`
+    - **参考文件**: `packages/advertisement-management-ui/package.json`
+  - [ ] 设置`type: "module"`和主入口`src/index.ts`
+  - [ ] 添加workspace依赖：`@d8d/allin-platform-module`, `@d8d/shared-ui-components`, `@tanstack/react-query`
+  - [ ] 添加外部依赖：`react-hook-form`, `@hookform/resolvers/zod`, `zod`, `hono`
+  - [ ] 配置导出路径：`components`, `hooks`, `api`, `schemas`
+- [ ] 编写集成测试：验证完整CRUD流程和错误处理 (AC: 7)
+  - [ ] 创建测试文件`tests/integration/platform-management.integration.test.tsx`
+    - **参考文件**: `packages/advertisement-management-ui/tests/integration/advertisement-management.integration.test.tsx`
+    - **测试内容**: 完整CRUD流程、错误处理、搜索功能
+  - [ ] 实现完整的CRUD流程测试
+    - **测试场景**: 创建平台 → 查询平台列表 → 更新平台 → 删除平台
+    - **参考模式**: 广告管理集成测试中的完整流程
+  - [ ] 实现错误处理测试
+    - **测试场景**: API错误、网络错误、验证错误
+    - **参考模式**: 广告管理集成测试中的错误处理
+  - [ ] 实现搜索功能测试
+    - **测试场景**: 按名称搜索、分页查询
+    - **参考模式**: 广告管理集成测试中的搜索测试
+- [ ] 通过类型检查和基本测试验证 (AC: 8)
+  - [ ] 运行`pnpm typecheck`确保无类型错误
+  - [ ] 运行`pnpm test`确保所有集成测试通过
+  - [ ] 检查测试覆盖率是否满足要求
+    - **标准**: 集成测试 ≥ 60% [Source: architecture/testing-strategy.md#测试覆盖率标准]
+  - [ ] 验证模块可以正确导入和使用
+- [ ] 与`@d8d/allin-platform-module`后端模块集成验证 (AC: 9)
+  - [ ] 验证API客户端能正确调用后端路由
+  - [ ] 测试完整的数据流：创建 → 查询 → 更新 → 删除
+  - [ ] 验证错误处理和边界条件
+  - [ ] 确保UI包与后端模块的类型兼容性
+
+## Dev Notes
+
+### 先前故事洞察
+- **故事007.006**：已移植platform后端模块为`@d8d/allin-platform-module` [Source: docs/stories/007.006.transplant-platform-management-module.story.md]
+- **技术栈转换经验**：从Ant Design到@d8d/shared-ui-components的转换需要完整的组件重构，包括表格、表单、模态框等
+- **UI包开发规范**：必须严格遵循[UI包开发规范](../architecture/ui-package-standards.md) [Source: docs/prd/epic-008-allin-ui-modules-transplant.md#参考文档]
+
+### 数据模型
+- **平台实体结构**：`Platform`实体包含以下字段 [Source: allin_system-master/server/src/platform_info/platform.entity.ts]:
+  - `platform_id: number` (主键，自增)
+  - `platform_name: string` (平台名称)
+  - `platform_type: string` (平台类型)
+  - `description?: string` (描述，可选)
+  - `status: number` (状态，默认1)
+  - `create_time: Date` (创建时间)
+  - `update_time: Date` (更新时间)
+- **UI显示需求**：需要显示平台列表、支持搜索、分页、CRUD操作
+- **表单字段**：平台名称、平台类型、描述
+
+### API规范
+- **现有API端点** [Source: allin_system-master/server/src/platform_info/platform.controller.ts]:
+  - `POST /platform/createPlatform` - 创建平台
+  - `POST /platform/deletePlatform` - 删除平台
+  - `POST /platform/updatePlatform` - 更新平台
+  - `GET /platform/getAllPlatforms` - 获取所有平台（分页）
+  - `GET /platform/searchPlatforms` - 搜索平台（按名称）
+  - `GET /platform/getPlatform/:id` - 获取单个平台详情
+- **认证要求**：所有端点需要JWT认证
+- **转换策略**：自定义fetch API → Hono RPC (rpcClient + ClientManager模式) [Source: docs/prd/epic-008-allin-ui-modules-transplant.md#技术栈差异分析与移植方案]
+
+### 组件规范
+- **UI包开发规范**：必须遵循[UI包开发规范](../architecture/ui-package-standards.md) [Source: docs/prd/epic-008-allin-ui-modules-transplant.md#参考文档]
+- **组件架构**：参考现有`advertisement-management-ui`的组件模式
+- **状态管理规范**：使用React Query管理服务端状态，React状态管理本地状态 [Source: docs/prd/epic-008-allin-ui-modules-transplant.md#技术栈差异分析与移植方案]
+- **表单处理规范**：使用React Hook Form + Zod进行表单验证 [Source: docs/prd/epic-008-allin-ui-modules-transplant.md#技术栈差异分析与移植方案]
+- **RPC客户端规范**：使用rpcClient + ClientManager单例模式 [Source: docs/prd/epic-008-allin-ui-modules-transplant.md#技术栈差异分析与移植方案]
+
+### 文件位置
+- **包目录**：`allin-packages/platform-management-ui/` (根据史诗008的目录结构决策)
+- **源文件位置**：
+  - **UI页面源文件**: `allin_system-master/client/app/admin/dashboard/platform/page.tsx`
+- **目标文件位置**：
+  - **组件文件**: `src/components/`目录下的各个组件文件
+    - **参考文件**: `packages/advertisement-management-ui/src/components/`目录结构
+  - **Hook文件**: `src/hooks/`目录下的自定义Hook
+    - **参考文件**: `packages/advertisement-management-ui/src/hooks/`目录结构
+  - **API客户端文件**: `src/api/platformClient.ts`
+    - **参考文件**: `packages/advertisement-management-ui/src/api/advertisementClient.ts`
+  - **Schema文件**: `src/schemas/platform.schema.ts`
+    - **参考文件**: `packages/advertisement-management-ui/src/schemas/advertisement.schema.ts`
+  - **测试文件**: `tests/components/`目录下的组件测试
+    - **参考文件**: `packages/advertisement-management-ui/tests/components/`目录结构
+  - **包配置**: `package.json`, `tsconfig.json`, `vitest.config.ts`
+    - **参考文件**: `packages/advertisement-management-ui/`中的对应配置文件
+
+### 测试要求
+- **测试框架**：Vitest + Testing Library [Source: architecture/testing-strategy.md#单元测试]
+- **测试位置**：`tests/integration/`目录 [Source: architecture/testing-strategy.md#测试金字塔策略]
+- **测试类型**：集成测试，验证完整CRUD流程和错误处理 [Source: architecture/testing-strategy.md#集成测试]
+- **覆盖率目标**：集成测试 ≥ 60% [Source: architecture/testing-strategy.md#测试覆盖率标准]
+- **测试模式**：参考`advertisement-management-ui`的集成测试模式
+- **测试工具**：使用`@testing-library/react`进行集成测试
+
+### 技术约束
+- **技术栈**：React 19, @d8d/shared-ui-components, React Query, React Hook Form, Zod, Hono RPC [Source: architecture/tech-stack.md]
+- **编码标准**：TypeScript严格模式，一致的缩进和命名 [Source: architecture/coding-standards.md]
+- **UI包规范**：严格遵循[UI包开发规范](../architecture/ui-package-standards.md)
+- **包管理**：使用pnpm workspace管理依赖 [Source: architecture/source-tree.md#集成指南]
+- **模块导出**：通过`src/index.ts`统一导出 [Source: architecture/source-tree.md#包结构规范]
+
+### 项目结构注意事项
+- **目录结构**：根据史诗008决策，Allin系统专属UI包放在`allin-packages/`目录
+- **命名规范**：使用`@d8d/allin-`前缀，`-management-ui`后缀，非多租户版本
+- **依赖管理**：通过workspace依赖引用`@d8d/allin-platform-module`和其他共享包
+- **RPC客户端模式**：必须使用rpcClient + ClientManager单例模式 [Source: docs/prd/epic-008-allin-ui-modules-transplant.md#技术栈差异分析与移植方案]
+
+## Testing
+### 测试标准
+- **测试框架**：使用 Vitest + Testing Library [Source: architecture/testing-strategy.md#单元测试]
+- **测试位置**：`tests/integration/`目录 [Source: architecture/testing-strategy.md#集成测试]
+- **测试类型**：集成测试，验证完整CRUD流程和错误处理 [Source: architecture/testing-strategy.md#集成测试]
+- **覆盖率要求**：集成测试 ≥ 60% [Source: architecture/testing-strategy.md#测试覆盖率标准]
+
+### 本故事特定测试要求
+1. **完整CRUD流程测试**：必须验证创建 → 查询 → 更新 → 删除的完整流程
+2. **错误处理测试**：测试API错误、网络错误、验证错误的处理
+3. **搜索功能测试**：测试按名称搜索和分页查询
+4. **表单验证测试**：测试Zod验证规则和错误提示
+5. **状态管理测试**：验证React Query数据获取和更新
+6. **API集成测试**：验证RPC客户端调用正确性
+7. **用户交互测试**：测试点击、输入、表单提交等交互
+
+### 测试执行流程
+1. 设置测试环境，配置必要的mock
+2. 编写完整CRUD流程测试，模拟用户操作
+3. 编写错误处理测试，验证错误场景
+4. 编写搜索功能测试，验证筛选和分页
+5. 测试表单验证和提交逻辑
+6. 验证API调用和状态更新
+7. 检查测试覆盖率和通过率
+
+## Change Log
+| Date | Version | Description | Author |
+|------|---------|-------------|--------|
+| 2025-12-03 | 1.0 | 初始故事创建 | Bob (Scrum Master) |
+
+## Dev Agent Record
+*此部分由开发代理在实现过程中填写*
+
+### Agent Model Used
+Claude Code (d8d-model)
+
+### Debug Log References
+*待实现时填写*
+
+### Completion Notes List
+*待实现时填写*
+
+### File List
+*待实现时填写*
+
+## QA Results
+Results from QA Agent QA review of the completed story implementation