浏览代码

docs(story-008.003): 明确直接调用现成的平台选择器组件

更新故事008.003,明确平台数据依赖处理方式:
- 任务3:明确直接调用现成的平台选择器组件,不需要创建平台数据查询Hook
- 任务6:明确集成现成的平台选择器组件到表单中
- 平台数据依赖处理:添加实现方式示例代码
- 文件路径和命名规范:删除不必要的平台数据Hook
- 开发前检查清单:更新平台数据依赖验证,明确直接调用现成组件

关键更新:公司管理UI直接导入和使用@d8d/allin-platform-management-ui中的PlatformSelector组件,避免重复开发。

🤖 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>
yourname 2 周之前
父节点
当前提交
6b4af2040f
共有 1 个文件被更改,包括 33 次插入19 次删除
  1. 33 19
      docs/stories/008.003.transplant-company-management-ui.story.md

+ 33 - 19
docs/stories/008.003.transplant-company-management-ui.story.md

@@ -59,10 +59,10 @@ Draft
 
 - [ ] 任务3:处理平台数据依赖 (AC: 3)
   - [ ] 分析源系统中的平台选择器实现
-  - [ ] 参考平台管理UI包的平台数据获取方式
-  - [ ] 创建平台数据查询Hook:`src/hooks/usePlatformsQuery.ts`
-  - [ ] 集成平台选择器组件到公司表单中
+  - [ ] **直接调用现成的平台选择器组件**:导入`@d8d/allin-platform-management-ui`中的`PlatformSelector`组件
+  - [ ] 在公司表单中集成`PlatformSelector`组件
   - [ ] 验证平台数据加载和选择功能
+  - [ ] **注意**:不需要创建平台数据查询Hook,直接使用现成的平台选择器组件
 
 - [ ] 任务4:实现RPC客户端 (AC: 4)
   - [ ] 创建RPC客户端管理器:`src/api/companyClient.ts`
@@ -80,8 +80,8 @@ Draft
   - [ ] 创建公司表单组件:`src/components/CompanyForm.tsx`
   - [ ] 使用React Hook Form + Zod进行表单验证
   - [ ] 实现创建表单和编辑表单的条件渲染(两个独立的Form组件)
-  - [ ] 集成平台选择器到表单中
-  - [ ] 实现表单验证规则和错误提示
+  - [ ] **集成平台选择器组件**:导入并使用`@d8d/allin-platform-management-ui`中的`PlatformSelector`组件
+  - [ ] 实现表单验证规则和错误提示,特别是公司名称在同一平台下的重复验证
 
 - [ ] 任务7:创建公司选择器组件(新增任务,提供其他UI包调用)
   - [ ] 创建`src/components/CompanySelector.tsx`组件
@@ -183,9 +183,21 @@ Draft
   - `CompanySchema`:`id`(公司ID)、`platformId`(平台ID)、`companyName`(公司名称)、`contactPerson`(联系人)、`contactPhone`(联系电话)、`contactEmail`(联系邮箱)、`address`(地址)、`status`(状态)、`createTime`(创建时间)、`updateTime`(更新时间)
 
 ### 平台数据依赖处理
-- **平台数据获取**:需要从平台管理UI包或平台模块获取平台列表数据
-- **平台选择器集成**:在公司表单中需要集成平台选择器组件
+- **平台数据获取**:**直接调用现成的平台选择器组件**,从`@d8d/allin-platform-management-ui`导入`PlatformSelector`组件
+- **平台选择器集成**:在公司表单中直接使用`PlatformSelector`组件,不需要重新创建平台选择器
 - **数据验证**:公司名称在同一平台下不能重复,不同平台下可以重复
+- **实现方式**:
+  ```typescript
+  // 在公司表单组件中直接导入和使用平台选择器
+  import { PlatformSelector } from '@d8d/allin-platform-management-ui';
+
+  // 在表单中使用
+  <PlatformSelector
+    value={form.watch('platformId')}
+    onChange={(value) => form.setValue('platformId', value)}
+    placeholder="选择平台"
+  />
+  ```
 
 ### 后端模块集成验证点
 - **路由定义**:检查`allin-packages/company-module/src/routes/`目录中的实际路由
@@ -210,7 +222,6 @@ Draft
 - **选择器组件**:`src/components/CompanySelector.tsx`(新增,供其他UI包调用)
 - **RPC客户端**:`src/api/companyClient.ts`
 - **类型文件**:`src/types/index.ts`
-- **平台数据Hook**:`src/hooks/usePlatformsQuery.ts`
 - **测试文件**:`tests/integration/company.integration.test.tsx`
 - **选择器测试文件**:`tests/integration/company-selector.integration.test.tsx`(新增)
 
@@ -284,19 +295,22 @@ const res = await companyClientManager.get().getCompany[':id'].$get({ param: { i
 ```
 
 ### 5. 平台数据依赖验证
-**规范**:必须验证平台数据获取方式和平台选择器集成方案。
+**规范**:必须验证平台选择器组件的集成方案,**直接调用现成的平台选择器组件**,不需要重新创建
 
 ```typescript
-// 平台数据获取示例
-const { data: platforms, isLoading: platformsLoading } = useQuery({
-  queryKey: ['platforms'],
-  queryFn: async () => {
-    // 需要确认平台数据获取方式
-    const res = await platformClientManager.get().getAllPlatforms.$get();
-    if (res.status !== 200) throw new Error('获取平台列表失败');
-    return await res.json();
-  }
-});
+// ✅ 正确:直接导入和使用现成的平台选择器组件
+import { PlatformSelector } from '@d8d/allin-platform-management-ui';
+
+// 在公司表单中使用
+<PlatformSelector
+  value={form.watch('platformId')}
+  onChange={(value) => form.setValue('platformId', value)}
+  placeholder="选择平台"
+/>
+
+// ❌ 错误:重新创建平台选择器或平台数据查询Hook(不需要)
+// 不需要创建 src/hooks/usePlatformsQuery.ts
+// 不需要重新实现平台选择器组件
 ```
 
 ### 6. 公司选择器组件验证