# 页面名：customer-service-records（客户服务记录）

> PRD 参考：P9 `docs/prd/specs/P9-miniapp-fe-details.md`
> 已实现：否

## 页面说明
展示某客户的服务记录列表，支持月份前后切换。

## 状态变量
| 变量名 | 类型 | 初始值 | 说明 |
|--------|------|--------|------|
| records | array | [] | 服务记录列表 |
| currentMonth | number | 当前月 | 当前显示月份 |
| loading | boolean | true | 数据加载中 |
| error | boolean | false | 加载失败 |

## 用户操作 → 响应
| 操作 | 触发条件 | 响应行为 | 目标状态 |
|------|----------|----------|----------|
| 页面加载 | 进入页面 | GET /api/customers/:id/service-records | loading→false |
| 点击"←"（上月） | currentMonth > 最小月 | 切换到上一月，更新月份标签 | currentMonth-- |
| 点击"→"（下月） | currentMonth < 最大月 | 切换到下一月，更新月份标签 | currentMonth++ |
| 点击返回 | 顶部导航栏 | navigateBack | — |
| 点击"重试" | error=true | 重新请求数据 | loading=true |

## 月份切换器（忠于原型 HTML）
- 样式：← 2026年X月 →
- 到达边界时对应箭头按钮变灰禁用（opacity 0.3）
- 由 `customer-service-records.js` 的 `switchMonth(direction)` 控制

## 记录展示
- 每条记录：服务时间 + 持续时长
- 按时间倒序排列

## 页面状态枚举
| 状态名 | 视觉表现 | 触发条件 |
|--------|----------|----------|
| 加载中 | 区域文案"加载中..." | loading=true |
| 正常态 | 服务记录列表 | 有数据 |
| 空数据态 | "暂无数据" | records 为空 |
| 错误态 | "加载失败，请点击重试" + 重试按钮 | error=true |

## 后端 API 依赖
| API | 方法 | 说明 |
|-----|------|------|
| `GET /api/customers/:id/service-records` | GET | 客户服务记录（支持月份参数） |

## 页面导航
- 来源：customer-detail / task-detail
- 去向：无（末端页面）

## 全局组件
- 自定义顶部导航栏（返回按钮 + "服务记录"）
- AI 悬浮按钮