Story 009.001: 区域选择优化
Status
Ready for Review
Story
As a 系统管理员
I want 在薪资管理中添加薪资时,区域选择无需精确到区县
so that 简化操作流程,提高工作效率
Acceptance Criteria
- 区域选择组件支持只选择到市级
- 区县字段不再设为必选项
- 现有数据兼容性保持
Tasks / Subtasks
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包:
packages/area-management-ui [Source: architecture/ui-package-standards.md#参考实现]
- 薪资管理UI包:
allin-packages/salary-management-ui [Source: 实际项目结构检查]
- 薪资模块:
allin-packages/salary-module [Source: 实际项目结构检查]
- 地区模块:
packages/geo-areas [Source: architecture/source-tree.md#业务模块层]
组件规范
UI包开发规范:
- 必须遵循UI包开发规范 [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#关键检查点]
现有实现分析
AreaSelect组件现状:
- 文件位置:
packages/area-management-ui/src/components/AreaSelect.tsx
- 当前问题:当
required=true且选择了城市时,区县字段显示为必填(红色星号)
- 需要修改:移除区县字段的必填验证,即使
required=true且选择了城市
薪资管理表单现状:
- 文件位置:
allin-packages/salary-management-ui/src/components/SalaryManagement.tsx
- AreaSelect使用:在创建表单中传递
required={true}参数
- 表单提交:通过
handleAreaChange函数处理区域选择变化
后端schema现状:
- 创建DTO:
allin-packages/salary-module/src/schemas/salary.schema.ts:76 - districtId字段已经是.optional()
- 更新DTO:
allin-packages/salary-module/src/schemas/salary.schema.ts:112 - districtId字段已经是.optional()
- 数据库实体:
allin-packages/salary-module/src/entities/salary-level.entity.ts:37 - districtId字段为nullable: true
文件位置参考
- AreaSelect组件:
packages/area-management-ui/src/components/AreaSelect.tsx
- 薪资管理组件:
allin-packages/salary-management-ui/src/components/SalaryManagement.tsx
- 薪资schema:
allin-packages/salary-module/src/schemas/salary.schema.ts
- 薪资实体:
allin-packages/salary-module/src/entities/salary-level.entity.ts
技术约束
- 保持向后兼容性:现有数据必须能正常显示和编辑
- API兼容性:不能修改现有API的请求/响应格式
- 数据库兼容性:
districtId字段已经是nullable: true,无需修改数据库结构
测试
测试策略:
- 单元测试:使用Vitest框架 [Source: architecture/testing-strategy.md#单元测试]
- 组件测试:使用Testing Library [Source: architecture/testing-strategy.md#单元测试]
- 测试位置:
__tests__文件夹与源码并列 [Source: architecture/coding-standards.md#测试位置]
测试要求:
- 覆盖率目标:核心业务逻辑 > 80% [Source: architecture/coding-standards.md#覆盖率目标]
- 测试类型:单元测试、集成测试 [Source: architecture/coding-standards.md#测试类型]
- 错误处理:测试各种错误场景和边界条件 [Source: architecture/coding-standards.md#错误处理]
具体测试场景:
- AreaSelect组件:验证区县字段在
required=true时不为必填
- 薪资表单:验证提交时区县字段可为空
- 数据兼容性:验证现有含区县数据的显示和编辑
Testing
测试标准
- 测试框架: Vitest + Testing Library [Source: architecture/tech-stack.md#新技术添加]
- 测试位置:
__tests__文件夹与源码并列 [Source: architecture/coding-standards.md#测试位置]
- 覆盖率要求: 核心业务逻辑 > 80% [Source: architecture/coding-standards.md#覆盖率目标]
组件测试要求
- 必须为关键交互元素添加
data-testid属性 [Source: architecture/coding-standards.md#关键检查点]
- 测试AreaSelect组件在
required=true时的行为
- 验证区县字段不为必填的多种场景
集成测试要求
- 测试薪资管理表单的完整提交流程
- 验证区县字段为空的表单提交
- 测试现有数据的兼容性
测试文件位置
- AreaSelect组件测试:
packages/area-management-ui/tests/integration/area-select-form.integration.test.tsx
- 薪资管理测试:
allin-packages/salary-management-ui/tests/integration/salary.integration.test.tsx
Change Log
| Date |
Version |
Description |
Author |
| 2025-12-09 |
1.0 |
初始故事创建 |
Scrum Master Bob |
Dev Agent Record
此部分由开发代理在实施期间填写
实施进度
- 开始时间: 2025-12-09
- 开发代理: James (dev agent)
Agent Model Used
d8d-model
Debug Log References
Completion Notes List
- 修改了AreaSelect组件,移除了区县字段的必填标记显示逻辑
- 验证了薪资管理UI包中AreaSelect组件的使用正确,required参数传递正确
- 优化了薪资管理表单的地区选择实现:
- 将创建表单中的AreaSelect替换为AreaSelectForm,实现更好的表单集成
- 将编辑表单中的静态显示替换为AreaSelectForm,支持编辑时修改地区信息
- 清理了不再需要的状态同步逻辑,简化了代码
- 更新了AreaSelectForm组件,添加根元素data-testid支持
- 验证了后端schema兼容性:districtId字段已经是optional和nullable
- 添加了AreaSelect组件的单元测试,验证区县字段不为必填
- 添加了薪资管理表单的集成测试,验证区县字段可为空的表单提交
- 所有测试通过,无回归问题
File List
- packages/area-management-ui/src/components/areas/composite/AreaSelect.tsx
- packages/area-management-ui/src/components/areas/composite/AreaSelectForm.tsx
- allin-packages/salary-management-ui/src/components/SalaryManagement.tsx
- allin-packages/salary-module/src/schemas/salary.schema.ts
- allin-packages/salary-module/src/entities/salary-level.entity.ts
- packages/area-management-ui/tests/unit/AreaSelect.test.tsx
- allin-packages/salary-management-ui/tests/integration/salary.integration.test.tsx
- allin-packages/salary-management-ui/tests/integration/salary-area-select.integration.test.tsx
QA Results
此部分由QA代理在审查期间填写