|
|
@@ -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
|
|
|
```
|