|
|
@@ -0,0 +1,206 @@
|
|
|
+# Story 009.003: 照片上传优化
|
|
|
+
|
|
|
+## Status
|
|
|
+Draft
|
|
|
+
|
|
|
+## Story
|
|
|
+**As a** 残疾人信息管理员
|
|
|
+**I want** 取消照片上传的各种限制
|
|
|
+**so that** 更灵活地上传残疾人照片
|
|
|
+
|
|
|
+## Acceptance Criteria
|
|
|
+1. 取消最多5张照片的限制
|
|
|
+2. 取消必须选择照片类型的限制
|
|
|
+3. 取消指定格式的限制(支持常见图片格式)
|
|
|
+4. 取消10MB大小限制
|
|
|
+5. 照片上传功能正常可用
|
|
|
+
|
|
|
+## Tasks / Subtasks
|
|
|
+- [ ] 修改 PhotoUploadField 组件配置 (AC: 1, 2, 3, 4)
|
|
|
+ - [ ] 移除 maxPhotos 限制(默认值从 5 改为 undefined 或足够大的值)
|
|
|
+ - [ ] 移除照片类型必填验证(移除红色星号标记)
|
|
|
+ - [ ] 移除照片类型选择组件或改为可选
|
|
|
+ - [ ] 更新文件格式限制(移除或放宽 accept 和 filterType 限制)
|
|
|
+ - [ ] 更新文件大小限制提示(移除10MB限制提示)
|
|
|
+- [ ] 修改 FileSelector 组件配置 (AC: 3, 4)
|
|
|
+ - [ ] 更新 maxSize 配置(从 10MB 改为更大的值或移除限制)
|
|
|
+ - [ ] 更新 accept 配置支持更多图片格式
|
|
|
+- [ ] 修改 MinioUploader 组件配置 (AC: 4)
|
|
|
+ - [ ] 更新 maxSize 配置(从 500MB 确认是否满足需求)
|
|
|
+ - [ ] 验证大文件上传功能正常
|
|
|
+- [ ] 更新残疾人管理表单中的照片上传配置 (AC: 1, 2, 3, 4)
|
|
|
+ - [ ] 更新 DisabilityPersonManagement.tsx 中的 PhotoUploadField 组件配置
|
|
|
+ - [ ] 移除或更新照片类型必填验证
|
|
|
+ - [ ] 更新文件大小和格式限制配置
|
|
|
+- [ ] 验证照片上传功能正常 (AC: 5)
|
|
|
+ - [ ] 测试上传多张照片(超过5张)
|
|
|
+ - [ ] 测试不选择照片类型上传
|
|
|
+ - [ ] 测试上传不同格式的图片文件
|
|
|
+ - [ ] 测试上传大文件(超过10MB)
|
|
|
+ - [ ] 验证照片保存和显示功能正常
|
|
|
+- [ ] 编写单元测试和集成测试 (AC: 1, 2, 3, 4, 5)
|
|
|
+ - [ ] 为 PhotoUploadField 组件添加测试
|
|
|
+ - [ ] 为残疾人管理表单添加照片上传测试
|
|
|
+ - [ ] 验证所有修改不影响现有功能
|
|
|
+
|
|
|
+## Dev Notes
|
|
|
+
|
|
|
+### 技术架构信息
|
|
|
+**前端技术栈**:
|
|
|
+- React 19.1.0 + TypeScript [Source: architecture/tech-stack.md#前端框架]
|
|
|
+- UI组件库: shadcn/ui (基于Radix UI) [Source: architecture/component-architecture.md#技术栈配置]
|
|
|
+- 状态管理: @tanstack/react-query (服务端状态) + Context (本地状态) [Source: architecture/component-architecture.md#技术栈配置]
|
|
|
+- 构建工具: Vite 7.0.0 [Source: architecture/tech-stack.md#构建工具]
|
|
|
+
|
|
|
+**项目结构**:
|
|
|
+- 残疾人个人管理UI包: `allin-packages/disability-person-management-ui` [Source: 实际项目结构检查]
|
|
|
+- 文件管理UI包: `packages/file-management-ui` [Source: 实际项目结构检查]
|
|
|
+- 残疾人模块: `allin-packages/disability-module` [Source: 实际项目结构检查]
|
|
|
+
|
|
|
+### 组件规范
|
|
|
+**UI包开发规范**:
|
|
|
+- 必须遵循[UI包开发规范](./ui-package-standards.md) [Source: architecture/coding-standards.md#UI包开发提示]
|
|
|
+- API路径映射验证:开发前必须验证故事中的API路径映射与实际后端路由定义的一致性 [Source: architecture/coding-standards.md#关键检查点]
|
|
|
+- 类型推断最佳实践:必须使用RPC推断类型,而不是直接导入schema类型 [Source: architecture/coding-standards.md#关键检查点]
|
|
|
+- 测试选择器优化:必须为关键交互元素添加`data-testid`属性 [Source: architecture/coding-standards.md#关键检查点]
|
|
|
+
|
|
|
+### 现有实现分析
|
|
|
+**PhotoUploadField 组件现状**:
|
|
|
+- 文件位置: `allin-packages/disability-person-management-ui/src/components/PhotoUploadField.tsx`
|
|
|
+- 当前限制配置:
|
|
|
+ - `maxPhotos = 5` (第29行) - 最多5张照片限制
|
|
|
+ - 照片类型选择为必填项(第142行有红色星号标记)
|
|
|
+ - `accept="image/*"` 和 `filterType="image"` (第166-167行) - 限制图片格式
|
|
|
+ - 提示信息:"文件大小限制:10MB" (第215行)
|
|
|
+
|
|
|
+**FileSelector 组件现状**:
|
|
|
+- 文件位置: `packages/file-management-ui/src/components/FileSelector.tsx`
|
|
|
+- 当前限制配置:
|
|
|
+ - `maxSize = 10` (第34行) - 10MB大小限制
|
|
|
+ - `accept = '*/*'` (第33行) - 接受所有文件类型
|
|
|
+
|
|
|
+**MinioUploader 组件现状**:
|
|
|
+- 文件位置: `packages/file-management-ui/src/components/MinioUploader.tsx`
|
|
|
+- 当前限制配置:
|
|
|
+ - `maxSize = 500` (第54行) - 500MB大小限制(实际支持更大)
|
|
|
+
|
|
|
+**残疾人管理表单现状**:
|
|
|
+- 文件位置: `allin-packages/disability-person-management-ui/src/components/DisabilityPersonManagement.tsx`
|
|
|
+- 照片上传使用: 第896行和第1278行使用 PhotoUploadField 组件
|
|
|
+- 当前配置: 使用默认配置,包含所有限制
|
|
|
+
|
|
|
+**数据模型现状**:
|
|
|
+- 照片实体Schema: `allin-packages/disability-module/src/schemas/disabled-person.schema.ts:322-364`
|
|
|
+- `DisabledPhotoSchema` 定义照片类型、文件ID等字段
|
|
|
+- 照片类型字段: `photoType: z.string().max(50)` - 字符串类型,最大50字符
|
|
|
+- 文件ID字段: `fileId: z.number().int().positive()` - 必须为正整数
|
|
|
+
|
|
|
+### 技术细节
|
|
|
+**需要修改的配置**:
|
|
|
+1. **移除照片数量限制**:
|
|
|
+ - 将 `maxPhotos` 从 5 改为 `undefined` 或足够大的值(如 100)
|
|
|
+ - 移除 "最多可上传 {maxPhotos} 张照片" 提示
|
|
|
+
|
|
|
+2. **移除照片类型必填限制**:
|
|
|
+ - 移除照片类型标签的红色星号标记
|
|
|
+ - 将照片类型选择改为可选(或提供默认值如"未指定")
|
|
|
+ - 更新表单验证逻辑
|
|
|
+
|
|
|
+3. **放宽文件格式限制**:
|
|
|
+ - 将 `accept="image/*"` 改为更宽松的配置(如 `accept="image/*,.jpg,.jpeg,.png,.gif,.bmp,.webp"`)
|
|
|
+ - 将 `filterType="image"` 改为 `filterType="all"` 或移除
|
|
|
+ - 更新提示信息
|
|
|
+
|
|
|
+4. **移除文件大小限制**:
|
|
|
+ - 将 `maxSize = 10` 改为更大的值(如 500)或移除限制
|
|
|
+ - 移除 "文件大小限制:10MB" 提示
|
|
|
+ - 确保 MinioUploader 的 `maxSize` 配置足够大
|
|
|
+
|
|
|
+**向后兼容性考虑**:
|
|
|
+- 现有数据中的照片类型字段可能为空,需要处理空值情况
|
|
|
+- 现有照片数据应能正常显示和编辑
|
|
|
+- API接口不应改变,只修改前端验证逻辑
|
|
|
+
|
|
|
+### 文件位置参考
|
|
|
+1. **PhotoUploadField 组件**: `allin-packages/disability-person-management-ui/src/components/PhotoUploadField.tsx`
|
|
|
+2. **FileSelector 组件**: `packages/file-management-ui/src/components/FileSelector.tsx`
|
|
|
+3. **MinioUploader 组件**: `packages/file-management-ui/src/components/MinioUploader.tsx`
|
|
|
+4. **残疾人管理组件**: `allin-packages/disability-person-management-ui/src/components/DisabilityPersonManagement.tsx`
|
|
|
+5. **残疾人Schema**: `allin-packages/disability-module/src/schemas/disabled-person.schema.ts`
|
|
|
+
|
|
|
+### 技术约束
|
|
|
+- 保持向后兼容性:现有照片数据必须能正常显示和编辑
|
|
|
+- API兼容性:不能修改现有API的请求/响应格式
|
|
|
+- 数据库兼容性:照片相关字段已经是可选或可为空,无需修改数据库结构
|
|
|
+- 性能考虑:上传大量照片或大文件时需要考虑性能影响
|
|
|
+
|
|
|
+### 测试
|
|
|
+**测试策略**:
|
|
|
+- 单元测试:使用Vitest框架 [Source: architecture/testing-strategy.md#单元测试]
|
|
|
+- 组件测试:使用Testing Library [Source: architecture/testing-strategy.md#单元测试]
|
|
|
+- 测试位置:`tests/`文件夹与源码并列 [Source: 实际项目结构检查]
|
|
|
+
|
|
|
+**测试要求**:
|
|
|
+- 覆盖率目标:核心业务逻辑 > 80% [Source: architecture/coding-standards.md#覆盖率目标]
|
|
|
+- 测试类型:单元测试、集成测试 [Source: architecture/coding-standards.md#测试类型]
|
|
|
+- 错误处理:测试各种错误场景和边界条件 [Source: architecture/coding-standards.md#错误处理]
|
|
|
+
|
|
|
+**具体测试场景**:
|
|
|
+1. 照片上传:测试上传超过5张照片
|
|
|
+2. 照片上传:测试不选择照片类型上传照片
|
|
|
+3. 照片上传:测试上传不同格式的图片文件(JPG、PNG、GIF、BMP、WebP等)
|
|
|
+4. 照片上传:测试上传大文件(超过10MB,如20MB、50MB图片)
|
|
|
+5. 功能验证:测试照片保存、显示、编辑功能正常
|
|
|
+6. 兼容性测试:验证现有照片数据能正常显示和编辑
|
|
|
+7. 性能测试:测试上传多张大文件时的性能表现
|
|
|
+
|
|
|
+## Testing
|
|
|
+### 测试标准
|
|
|
+- **测试框架**: Vitest + Testing Library [Source: architecture/tech-stack.md#新技术添加]
|
|
|
+- **测试位置**: `tests/`文件夹与源码并列 [Source: 实际项目结构检查]
|
|
|
+- **覆盖率要求**: 核心业务逻辑 > 80% [Source: architecture/coding-standards.md#覆盖率目标]
|
|
|
+
|
|
|
+### 组件测试要求
|
|
|
+- 必须为关键交互元素添加`data-testid`属性 [Source: architecture/coding-standards.md#关键检查点]
|
|
|
+- 测试 PhotoUploadField 组件在移除限制后的行为
|
|
|
+- 测试残疾人管理表单中的照片上传功能
|
|
|
+
|
|
|
+### 集成测试要求
|
|
|
+- 测试残疾人管理表单的完整照片上传流程
|
|
|
+- 验证上传多张照片功能正常
|
|
|
+- 验证不选择照片类型上传功能正常
|
|
|
+- 验证上传不同格式图片文件功能正常
|
|
|
+- 验证上传大文件功能正常
|
|
|
+- 测试现有数据的兼容性
|
|
|
+
|
|
|
+### 测试文件位置
|
|
|
+1. PhotoUploadField 测试: `allin-packages/disability-person-management-ui/tests/integration/photo-upload.integration.test.tsx`
|
|
|
+2. 残疾人管理测试: `allin-packages/disability-person-management-ui/tests/integration/disability-person.integration.test.tsx`
|
|
|
+
|
|
|
+## Change Log
|
|
|
+| Date | Version | Description | Author |
|
|
|
+|------|---------|-------------|--------|
|
|
|
+| 2025-12-10 | 1.0 | 初始故事创建 | Scrum Master Bob |
|
|
|
+
|
|
|
+## Dev Agent Record
|
|
|
+*此部分由开发代理在实施期间填写*
|
|
|
+
|
|
|
+### 实施详情
|
|
|
+**实施时间**:
|
|
|
+**开发人员**:
|
|
|
+
|
|
|
+### 已完成的工作
|
|
|
+
|
|
|
+### 技术决策
|
|
|
+
|
|
|
+### 文件列表
|
|
|
+**修改的文件**:
|
|
|
+
|
|
|
+**新增的文件**:
|
|
|
+
|
|
|
+### 验证结果
|
|
|
+
|
|
|
+### Agent Model Used
|
|
|
+
|
|
|
+## QA Results
|
|
|
+*此部分由QA代理在审查期间填写*
|