# 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 (新建)