Explorar o código

docs(story-008.003): 补充公司选择器组件任务

更新故事008.003,添加公司选择器组件任务:
- 新增任务7:创建公司选择器组件,作为可复用组件供其他UI包调用
- 支持按平台ID过滤公司列表功能
- 参考平台管理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 hai 2 semanas
pai
achega
0f7350ca58

+ 59 - 7
docs/stories/008.003.transplant-company-management-ui.story.md

@@ -6,7 +6,7 @@ Draft
 ## Story
 **As a** 开发者,
 **I want** 将company管理页面从allin_system-master/client移植为独立UI包@d8d/allin-company-management-ui,完成技术栈转换并处理对platform数据的依赖,
-**so that** 我们可以将Allin系统的公司管理UI模块集成到当前项目中,遵循现有的UI包结构和编码标准,并正确集成平台数据选择器。
+**so that** 我们可以将Allin系统的公司管理UI模块集成到当前项目中,遵循现有的UI包结构和编码标准,并正确集成平台数据选择器,同时提供公司选择器组件供其他UI包调用
 
 ## Acceptance Criteria
 1. 创建`allin-packages/company-management-ui`目录结构
@@ -16,9 +16,10 @@ Draft
 5. 完成状态管理转换:从Jotai转换为React Query
 6. 完成表单转换:从Ant Design Form转换为React Hook Form + Zod
 7. 配置package.json:使用`@d8d/allin-company-management-ui`包名,workspace依赖,依赖`@d8d/allin-platform-management-ui`
-8. 编写集成测试:覆盖完整CRUD流程和跨模块数据集成
-9. 通过类型检查和基本测试验证
-10. 与`@d8d/allin-company-module`后端模块集成验证
+8. **创建公司选择器组件**:作为可复用组件供其他UI包调用,支持按平台ID过滤
+9. 编写集成测试:覆盖完整CRUD流程和跨模块数据集成
+10. 通过类型检查和基本测试验证
+11. 与`@d8d/allin-company-module`后端模块集成验证
 
 **集成测试要求**:
 - 测试文件:`tests/integration/company.integration.test.tsx`
@@ -26,6 +27,12 @@ Draft
 - 验证:数据渲染、用户交互、API调用、状态管理、跨模块数据选择
 - 遵循现有集成测试模式
 
+**公司选择器组件测试要求**:
+- 测试文件:`tests/integration/company-selector.integration.test.tsx`
+- 测试覆盖:数据加载、选择功能、错误处理、平台过滤功能
+- 验证:组件渲染、用户交互、数据过滤、错误处理
+- 参考:`allin-packages/platform-management-ui/tests/integration/platform-selector.integration.test.tsx`
+
 ## Tasks / Subtasks
 - [ ] 任务1:创建公司管理UI包基础结构 (AC: 1, 7)
   - [ ] 创建目录:`allin-packages/company-management-ui/`
@@ -76,14 +83,28 @@ Draft
   - [ ] 集成平台选择器到表单中
   - [ ] 实现表单验证规则和错误提示
 
-- [ ] 任务7:实现表格组件 (AC: 2)
+- [ ] 任务7:创建公司选择器组件(新增任务,提供其他UI包调用)
+  - [ ] 创建`src/components/CompanySelector.tsx`组件
+    - **参考文件**:`allin-packages/platform-management-ui/src/components/PlatformSelector.tsx`
+    - **架构**:使用React Query获取公司列表,使用@d8d/shared-ui-components的Select组件
+    - **功能**:公司选择器,支持value/onChange等标准props,显示公司名称
+    - **平台过滤**:支持按平台ID过滤公司列表(可选参数)
+    - **用途**:作为可复用组件供其他UI包使用(如订单管理、残疾人管理等需要选择公司的场景)
+  - [ ] 创建公司选择器集成测试
+    - **参考文件**:`allin-packages/platform-management-ui/tests/integration/platform-selector.integration.test.tsx`
+    - **测试内容**:数据加载、选择功能、错误处理、禁用状态、平台过滤功能
+  - [ ] 更新package.json导出配置
+    - **导出**:在`src/index.ts`中导出CompanySelector组件
+    - **依赖**:确保组件可被其他模块导入使用
+
+- [ ] 任务8:实现表格组件 (AC: 2)
   - [ ] 创建公司表格组件:`src/components/CompanyTable.tsx`
   - [ ] 使用@d8d/shared-ui-components的Table组件
   - [ ] 实现分页、排序、筛选功能
   - [ ] 添加操作列:编辑、删除按钮
   - [ ] 添加test ID属性用于测试选择器
 
-- [ ] 任务8:编写集成测试 (AC: 8)
+- [ ] 任务9:编写集成测试 (AC: 8)
   - [ ] 创建集成测试文件:`tests/integration/company.integration.test.tsx`
   - [ ] 参考现有集成测试模式:`allin-packages/platform-management-ui/tests/integration/platform.integration.test.tsx`
   - [ ] 测试完整CRUD流程:创建 → 查询 → 更新 → 删除
@@ -92,7 +113,7 @@ Draft
   - [ ] 测试平台数据集成:平台选择器功能
   - [ ] 使用test ID选择器避免文本查找冲突
 
-- [ ] 任务9:运行测试和类型检查 (AC: 9, 10)
+- [ ] 任务10:运行测试和类型检查 (AC: 9, 10)
   - [ ] 运行组件测试:`pnpm test`
   - [ ] 运行类型检查:`pnpm typecheck`
   - [ ] 修复测试失败和类型错误
@@ -178,6 +199,7 @@ Draft
 3. **Ant Design Form → React Hook Form + Zod**:转换表单逻辑
 4. **自定义fetch API → Hono RPC (rpcClient + ClientManager模式)**:重构API客户端
 5. **平台数据集成**:正确处理对平台数据的依赖关系
+6. **公司选择器组件**:创建可复用的公司选择器组件,供其他UI包调用
 
 ### 文件路径和命名规范
 - **包名**:`@d8d/allin-company-management-ui`
@@ -185,10 +207,12 @@ Draft
 - **主组件**:`src/components/CompanyManagement.tsx`
 - **表单组件**:`src/components/CompanyForm.tsx`
 - **表格组件**:`src/components/CompanyTable.tsx`
+- **选择器组件**:`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`(新增)
 
 ## Testing
 
@@ -206,6 +230,7 @@ Draft
 5. **状态管理测试**:验证React Query数据获取和更新
 6. **平台数据集成测试**:测试平台选择器功能和数据加载
 7. **跨模块数据测试**:验证公司数据与平台数据的关联关系
+8. **公司选择器组件测试**:测试公司选择器组件的功能,包括数据加载、选择功能、平台过滤等
 
 ### 测试选择器优化规范 [Source: docs/architecture/ui-package-standards.md#测试选择器优化规范]
 1. **优先使用test ID**:必须为关键交互元素添加`data-testid`属性
@@ -214,6 +239,7 @@ Draft
    - `data-testid="create-company-modal-title"`
    - `data-testid="edit-company-button-1"`
    - `data-testid="platform-selector"`
+   - `data-testid="company-selector"`
    - `data-testid="search-company-input"`
 
 ### 表单组件测试规范 [Source: docs/architecture/ui-package-standards.md#表单组件模式规范]
@@ -271,4 +297,30 @@ const { data: platforms, isLoading: platformsLoading } = useQuery({
     return await res.json();
   }
 });
+```
+
+### 6. 公司选择器组件验证
+**规范**:必须验证公司选择器组件的实现方案,确保可以作为可复用组件供其他UI包调用。
+
+```typescript
+// 公司选择器组件使用示例(在其他UI包中)
+import { CompanySelector } from '@d8d/allin-company-management-ui';
+
+// 基本使用
+<CompanySelector
+  value={selectedCompanyId}
+  onChange={(value) => setSelectedCompanyId(value)}
+  placeholder="选择公司"
+/>
+
+// 按平台过滤
+<CompanySelector
+  value={selectedCompanyId}
+  onChange={(value) => setSelectedCompanyId(value)}
+  platformId={selectedPlatformId} // 可选:按平台ID过滤公司
+  placeholder="选择公司"
+/>
+
+// 公司选择器组件实现参考(在company-management-ui中)
+// 参考:allin-packages/platform-management-ui/src/components/PlatformSelector.tsx
 ```