Browse Source

fix(story): 更新008.006故事,完善照片上传功能分析

## 主要更新内容:
1. **状态更新**:从"Ready for Review"改为"In Progress - 需要完善照片上传功能"
2. **任务3重置**:照片上传集成任务需要完善,支持多个照片上传
3. **源系统分析**:添加UploadCover组件分析和原系统API调用方式
4. **新系统分析**:添加残疾人模块聚合API和照片验证逻辑
5. **照片上传流程对比**:
   - 原系统:UploadCover → 阿里云OSS → 聚合API(photoUrl)
   - 新系统:FileSelector → 文件模块 → 聚合API(fileId)
6. **关键发现**:原系统支持多个照片上传,每个照片包含photoType、photoUrl、canDownload字段

## 当前差距:
- ❌ 原系统支持多个照片上传,当前只支持单个
- ❌ 原系统每个照片有photoType字段,当前缺少
- ❌ 原系统每个照片有canDownload选项,当前缺少
- ✅ 已使用FileSelector组件,但需要扩展功能

🤖 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 1 day ago
parent
commit
d310a778a9
1 changed files with 103 additions and 15 deletions
  1. 103 15
      docs/stories/008.006.transplant-disability-person-management-ui.story.md

+ 103 - 15
docs/stories/008.006.transplant-disability-person-management-ui.story.md

@@ -1,7 +1,7 @@
 # Story 008.006: 移植残疾人个人管理UI(disability_person → @d8d/allin-disability-person-management-ui)
 
 ## Status
-Ready for Review
+In Progress - 需要完善照片上传功能
 
 ## Story
 **As a** 开发者,
@@ -63,23 +63,38 @@ Ready for Review
       - `allin-packages/platform-management-ui/src/api/types.ts` - 平台管理UI类型定义
       - `allin-packages/disability-management-ui/src/api/disabilityClient.ts` - 残疾人管理UI API客户端(最新实现)
 
-- [x] 任务3:实现文件上传集成 (AC: 3)
+- [ ] 任务3:实现文件上传集成 (AC: 3)
   - [x] 分析源系统照片上传逻辑:`allin_system-master/client/app/admin/dashboard/disability_person/AddDisabledPersonModal.tsx`
     - **源文件**:`allin_system-master/client/app/admin/dashboard/disability_person/AddDisabledPersonModal.tsx`
     - **查看要点**:照片上传组件、文件处理逻辑、预览功能
+    - **关键发现**:原系统支持多个照片上传,每个照片包含`photoType`、`photoUrl`、`canDownload`字段
+  - [x] 分析源系统照片上传组件:`allin_system-master/client/components/UploadCover/index.tsx`
+    - **源文件**:`allin_system-master/client/components/UploadCover/index.tsx`
+    - **查看要点**:阿里云OSS上传实现、文件类型限制、单文件上传限制
+    - **关键发现**:UploadCover组件`maxCount: 1`,原系统通过多个实例实现多个照片上传
   - [x] 查看文件管理UI包组件:`packages/file-management-ui/src/components/FileSelector.tsx`
     - **组件文件**:`packages/file-management-ui/src/components/FileSelector.tsx`
     - **查看要点**:组件API、事件处理、文件类型限制
-  - [x] 创建照片上传组件:`src/components/PhotoUploadField.tsx`
+  - [x] 分析原系统照片API调用:`allin_system-master/client/app/admin/dashboard/disability_person/disabilityPersonService.ts`
+    - **源文件**:`allin_system-master/client/app/admin/dashboard/disability_person/disabilityPersonService.ts`
+    - **查看要点**:聚合API调用方式、照片数据结构、上传流程
+    - **关键发现**:使用`POST /disability-persons/aggregated/create`聚合API,照片数据包含`photoType`、`photoUrl`、`canDownload`
+  - [x] 分析新系统照片API实现:`allin-packages/disability-module/src/routes/aggregated.routes.ts`和`src/services/aggregated.service.ts`
+    - **源文件**:`allin-packages/disability-module/src/routes/aggregated.routes.ts`、`src/services/aggregated.service.ts`
+    - **查看要点**:新系统聚合API路由、照片验证逻辑、文件ID管理
+    - **关键发现**:新系统使用`fileId`字段引用文件模块,验证文件ID有效性,自动添加`fileUrl`
+  - [ ] 创建照片上传组件:`src/components/PhotoUploadField.tsx`
     - **目标文件**:`allin-packages/disability-person-management-ui/src/components/PhotoUploadField.tsx`
-    - **功能**:集成`FileSelector`组件,支持照片上传、预览、删除
+    - **功能**:集成`FileSelector`组件,支持**多个照片上传**、照片类型选择、是否可下载选项
     - **参考文件**:`packages/file-management-ui/src/components/FileSelector.tsx`
-  - [x] 集成照片上传到表单:在残疾人个人表单中添加照片上传字段
-    - **字段**:`photoFileId`(文件ID字段)
-    - **表单集成**:使用`PhotoUploadField`组件,表单接收`fileId`参数
-  - [x] 创建照片预览组件:`src/components/PhotoPreview.tsx`
+    - **关键功能**:支持动态添加/移除照片,每个照片独立管理
+  - [ ] 集成照片上传到表单:在残疾人个人表单中添加照片上传字段
+    - **字段**:`photos`(照片数组字段)
+    - **表单集成**:使用`PhotoUploadField`组件,表单接收照片数组参数
+    - **数据结构**:每个照片包含`photoType`、`fileId`、`canDownload`字段
+  - [ ] 创建照片预览组件:`src/components/PhotoPreview.tsx`
     - **目标文件**:`allin-packages/disability-person-management-ui/src/components/PhotoPreview.tsx`
-    - **功能**:使用`FilePreview`组件显示照片
+    - **功能**:使用`FilePreview`组件显示多个照片
     - **参考文件**:`packages/file-management-ui/src/components/FilePreview.tsx`
 
 - [x] 任务4:实现区域选择器集成 (AC: 4)
@@ -199,11 +214,21 @@ Ready for Review
 
 ### 源系统文件路径
 - **需要移植的源文件**:
-  - `allin_system-master/client/app/admin/dashboard/disability_person/page.tsx`
-  - `allin_system-master/client/app/admin/dashboard/disability_person/AddDisabledPersonModal.tsx`
-  - `allin_system-master/client/app/admin/dashboard/disability_person/DisabledPersonDetailModal.tsx`
-  - `allin_system-master/client/app/admin/dashboard/disability_person/disabilityPersonService.ts`
-  - `allin_system-master/client/app/admin/dashboard/disability_person/constant.ts`
+  - `allin_system-master/client/app/admin/dashboard/disability_person/page.tsx` - 主页面
+  - `allin_system-master/client/app/admin/dashboard/disability_person/AddDisabledPersonModal.tsx` - **关键文件:包含多个照片上传实现**
+  - `allin_system-master/client/app/admin/dashboard/disability_person/DisabledPersonDetailModal.tsx` - 详情模态框
+  - `allin_system-master/client/app/admin/dashboard/disability_person/disabilityPersonService.ts` - 服务层
+  - `allin_system-master/client/app/admin/dashboard/disability_person/constant.ts` - 常量定义
+- **照片上传相关源文件**:
+  - `allin_system-master/client/components/UploadCover/index.tsx` - **照片上传组件**(使用阿里云OSS上传)
+  - `allin_system-master/client/lib/api.ts` - API调用工具
+  - `allin_system-master/client/store/disabilityPerson.ts` - 状态管理(包含photosAtom)
+- **UploadCover组件分析**:
+  - **功能**:基于Ant Design Upload组件的阿里云OSS上传
+  - **限制**:`maxCount: 1`(每个UploadCover实例只支持单文件上传)
+  - **文件类型**:仅支持JPG/PNG,大小限制2MB
+  - **上传路径**:`/disablity_system/disability_people/${fileName}`
+  - **关键发现**:原系统通过多个UploadCover实例实现多个照片上传
 - **需要对照参考的文件**:
   - `allin-packages/platform-management-ui/src/components/PlatformManagement.tsx`
   - `allin-packages/platform-management-ui/src/api/platformClient.ts`
@@ -222,6 +247,57 @@ Ready for Review
 - **枚举常量文件**:
   - `allin-packages/enums/src/index.ts`
 
+### 原系统API调用信息(基于disabilityPersonService.ts分析)
+- **原系统API调用方式**(来自`allin_system-master/client/app/admin/dashboard/disability_person/disabilityPersonService.ts`):
+  - `POST /disability-persons/aggregated/create` - **聚合创建残疾人所有信息**(包含照片)
+  - `GET /disability-persons/aggregated/:personId` - **聚合查询残疾人所有信息**(包含照片)
+  - `GET /disability-persons` - 获取残疾人列表
+  - `DELETE /disability-persons/:personId` - 删除残疾人
+  - `PUT /disability-persons/:personId` - 更新残疾人信息
+
+- **照片数据结构**(来自`CreateDisabledPersonData`接口):
+  ```typescript
+  photos?: Array<{
+    photoType: string;      // 照片类型
+    photoUrl: string;       // 照片URL(阿里云OSS URL)
+    canDownload: number;    // 是否可下载:1-是,0-否
+  }>;
+  ```
+
+- **照片上传流程**:
+  1. 通过`UploadCover`组件上传到阿里云OSS,获取`photoUrl`
+  2. 通过聚合API一次性提交所有数据(包含照片URL数组)
+  3. 后端处理照片URL,转换为文件ID存储
+
+### 新系统残疾人模块API信息(基于disability-module分析)
+- **聚合API路由**(来自`allin-packages/disability-module/src/routes/aggregated.routes.ts`):
+  - `POST /createAggregatedDisabledPerson` - **聚合创建残疾人所有信息**(包含照片)
+  - `GET /getAggregatedDisabledPerson/{id}` - **聚合查询残疾人所有信息**(包含照片)
+  - `PUT /updateAggregatedDisabledPerson/{id}` - **聚合更新残疾人所有信息**(包含照片)
+
+- **照片数据结构**(来自`DisabledPhotoSchema`):
+  ```typescript
+  {
+    id?: number;           // 照片ID(创建时可选)
+    personId?: number;     // 残疾人ID(创建时可选)
+    photoType: string;     // 照片类型
+    fileId: number;        // **文件ID**(引用@d8d/file-module)
+    uploadTime?: Date;     // 上传时间(创建时自动生成)
+    canDownload: number;   // 是否可下载:1-是,0-否
+  }
+  ```
+
+- **照片验证逻辑**(来自`AggregatedService`):
+  - 验证`fileId`的有效性(检查文件是否存在)
+  - 照片必须包含有效的文件ID
+  - 自动为照片添加`fileUrl`字段(从文件模块获取)
+
+- **照片上传流程**(新系统):
+  1. 通过`FileSelector`上传到文件模块,获取`fileId`
+  2. 通过聚合API提交照片数据(包含`fileId`)
+  3. 后端验证`fileId`并关联文件实体
+  4. 响应中包含`fileUrl`(从文件模块获取)
+
 ### 残疾人模块RPC API调用信息(基于集成测试和路由定义)
 - **RPC客户端调用方式**(来自`allin-packages/disability-module/tests/integration/disability.integration.test.ts`和`allin-packages/disability-module/src/routes/disabled-person-custom.routes.ts`):
   - `disabilityClientManager.get().createDisabledPerson.$post({ json: personData })` - 创建残疾人记录
@@ -319,18 +395,25 @@ Claude Code (d8d-model)
 - 类型检查错误修复:API客户端类型推导语法修正(`findByIdCard[':idCard'].$get` → `findByIdCard[':idCard']['$get']`)
 - 依赖安装:成功安装所有依赖包
 - 组件集成:成功集成文件上传、区域选择器、枚举常量组件
+- **照片上传功能分析**:发现原系统支持多个照片上传,每个照片包含photoType、photoUrl、canDownload字段
+- **当前实现差距**:当前移植版本只支持单个照片上传,缺少照片类型和是否可下载字段
 
 ### Completion Notes List
 1. **基础结构创建成功**:完整创建了残疾人个人管理UI包的基础结构,包括package.json、tsconfig.json、vitest.config.ts等配置文件
 2. **API客户端实现**:基于残疾人模块的路由定义创建了完整的API客户端,使用ClientManager单例模式管理RPC客户端生命周期
 3. **组件集成优化**:
-   - 文件上传:直接集成`@d8d/file-management-ui`的FileSelector组件,无需重复创建
+   - 文件上传:直接集成`@d8d/file-management-ui`的FileSelector组件,但**需要改进以支持多个照片上传**
    - 区域选择器:直接集成`@d8d/area-management-ui`的AreaSelect组件,支持三级联动
    - 枚举常量:直接使用`@d8d/allin-enums`包的残疾类型和残疾等级枚举
 4. **复杂表单组件实现**:创建了完整的残疾人个人管理主组件,包含CRUD操作、搜索、分页等功能
 5. **集成测试编写**:编写了完整的集成测试,覆盖CRUD流程、文件上传集成、区域选择器集成、枚举选择器集成等场景
 6. **类型推导最佳实践**:遵循史诗008经验总结,使用RPC推断类型(`InferRequestType`和`InferResponseType`),避免直接导入schema类型
 7. **测试验证完成**:所有集成测试通过,类型检查完成,组件集成功能验证正常
+8. **照片上传功能差距**:发现当前实现与原系统的差距:
+   - ❌ 原系统支持**多个照片上传**,当前只支持单个
+   - ❌ 原系统每个照片有`photoType`字段,当前缺少
+   - ❌ 原系统每个照片有`canDownload`选项,当前缺少
+   - ✅ 已使用FileSelector组件,但需要扩展功能
 
 ### File List
 **新创建的文件:**
@@ -345,8 +428,13 @@ Claude Code (d8d-model)
 - `allin-packages/disability-person-management-ui/src/components/DisabilityPersonManagement.tsx` - 主管理组件
 - `allin-packages/disability-person-management-ui/tests/integration/disability-person.integration.test.tsx` - 集成测试文件
 
+**需要创建的文件:**
+- `allin-packages/disability-person-management-ui/src/components/PhotoUploadField.tsx` - 多个照片上传组件(待创建)
+- `allin-packages/disability-person-management-ui/src/components/PhotoPreview.tsx` - 多个照片预览组件(待创建)
+
 **修改的文件:**
 - `docs/stories/008.006.transplant-disability-person-management-ui.story.md` - 更新任务完成状态和开发记录
+- `allin-packages/disability-person-management-ui/src/components/DisabilityPersonManagement.tsx` - 需要更新以支持多个照片上传
 
 ## QA Results
 *Results from QA Agent QA review of the completed story implementation*