mini-starter/_bmad-output/implementation-artifacts/15-6-guardian-phone-layout-optimization.md

Story 15.6: 监护人电话布局优化

Status: ready-for-dev

Story

作为用户，我希望"残疾人本人电话"和"监护人电话"在表单中相邻显示，且都支持"+"号动态添加多个号码，以便更直观地管理联系电话信息。

业务背景

通过生产环境验证发现：

• 当前残疾人表单中，联系电话字段在表单上半部分（单个输入框）
• 监护人电话管理在表单最下方，与联系电话分离
• 用户反馈希望两者相邻显示，且都支持动态添加多个号码
• 功能已存在（Story 13.17 已实现监护人电话动态添加），仅需优化布局

Acceptance Criteria

AC1: 联系电话区域布局优化

1. Given 用户在残疾人管理表单页面
2. When 用户查看联系电话区域
3. Then 残疾人本人电话和监护人电话相邻显示
4. And 两者使用相同的 UI 组件和交互方式

AC2: 本人电话支持动态添加

1. Given 用户在残疾人管理表单页面
2. When 用户点击本人电话区域的+按钮
3. Then 可以添加多个本人电话号码
4. And 数据结构支持存储多个电话号码

AC3: 监护人电话保持现有功能

1. Given 用户在残疾人管理表单页面
2. When 用户查看监护人电话区域
3. Then 现有功能正常工作（最多5个、设置主要联系人）
4. And UI 与本人电话保持一致

AC4: 数据库支持

1. Given 用户添加多个本人电话号码
2. When 用户保存表单
3. Then 数据库正确存储所有电话号码
4. And 与监护人电话使用相同的数据结构

AC5: 编辑模式兼容

1. Given 用户编辑已有残疾人信息
2. When 用户打开表单
3. Then 所有已添加的电话号码正确显示
4. And 可以继续添加、编辑或删除

Tasks / Subtasks

• [ ] Task 1: 分析现有电话管理实现

  • Subtask 1.1: 阅读 Story 13.17 中的监护人电话实现
  • Subtask 1.2: 分析 DisabilityPersonManagement 组件的电话部分
  • Subtask 1.3: 确认数据库表结构（guardian_phone 相关字段）

• [ ] Task 2: 修改数据库结构支持本人电话

  • Subtask 2.1: 分析当前 phone 字段的使用
  • Subtask 2.2: 如需要，添加本人电话表或字段（复用监护人电话结构）
  • Subtask 2.3: 更新 Entity 和 Schema

• [ ] Task 3: 前端 - UI 布局调整

  • Subtask 3.1: 创建统一的电话管理组件
  • Subtask 3.2: 将联系电话区域改造为支持动态添加
  • Subtask 3.3: 调整布局使本人电话和监护人电话相邻显示

• [ ] Task 4: 前端 - 数据处理逻辑

  • Subtask 4.1: 实现本人电话的添加、编辑、删除逻辑
  • Subtask 4.2: 确保与监护人电话使用相同的 API 接口
  • Subtask 4.3: 表单提交时正确处理两组电话数据

• [ ] Task 5: E2E 测试

  • Subtask 5.1: 创建测试文件 disability-person-phone-layout.spec.ts
  • Subtask 5.2: 测试本人电话动态添加功能
  • Subtask 5.3: 测试监护人电话功能不受影响
  • Subtask 5.4: 测试表单保存和数据回显

Dev Notes

相关文件位置

前端组件:

• allin-packages/disability-person-management-ui/src/components/DisabilityPersonManagement.tsx

相关 Story:

• Story 13.17: 已实现监护人电话动态添加功能

E2E 测试策略

测试文件: disability-person-phone-layout.spec.ts

test("本人电话应该支持动态添加多个号码") test("监护人电话功能不受影响") test("本人电话和监护人电话应该相邻显示")

References

• 用户反馈: web/public/问题反映/网页端故障20260120.jpg（问题3）
• Story 13.17: _bmad-output/implementation-artifacts/13-17-disability-person-form-optimization.md

Dev Agent Record

Agent Model Used

Claude Opus 4.5 (2025-01-20)

File List

• allin-packages/disability-module/src/entities/disabled-person.entity.ts
• allin-packages/disability-module/src/schemas/disabled-person.schema.ts
• allin-packages/disability-person-management-ui/src/components/DisabilityPersonManagement.tsx
• web/tests/e2e/specs/admin/disability-person-phone-layout.spec.ts (新建)