微信小程序页面迁移校验之前 P5任务处理之前

docs/h5_ui/interactions/performance-records.md

@@ -0,0 +1,64 @@
+# 页面名：performance-records（业绩明细 / 服务记录）
+
+> PRD 参考：P7 `docs/prd/specs/P7-miniapp-fe-performance.md`
+> 已实现：否
+
+## 页面说明
+展示按月份切换的服务记录明细列表。顶部有统计概览（总记录/总时长/收入），下方按日期分组展示服务记录。
+
+## 状态变量
+| 变量名 | 类型 | 初始值 | 说明 |
+|--------|------|--------|------|
+| records | array | [] | 服务记录列表 |
+| currentMonth | number | 当前月 | 当前显示月份 |
+| loading | boolean | true | 数据加载中 |
+| error | boolean | false | 加载失败 |
+
+## 用户操作 → 响应
+| 操作 | 触发条件 | 响应行为 | 目标状态 |
+|------|----------|----------|----------|
+| 页面加载 | 进入页面 | GET /api/performance/records | loading→false |
+| 点击"←"（上月） | currentMonth > 最小月 | 切换到上一月，更新月份标签，重新请求数据 | currentMonth-- |
+| 点击"→"（下月） | currentMonth < 最大月 | 切换到下一月，更新月份标签，重新请求数据 | currentMonth++ |
+| 点击返回 | 顶部导航栏 | navigateBack / history.back() | — |
+| 点击"重试" | error=true | 重新请求数据 | loading=true |
+
+## 月份切换器（忠于原型 HTML）
+- 样式：← 2026年X月 →
+- 到达边界时对应箭头按钮变灰禁用（opacity 0.3）
+- 由 `customer-service-records.js` 的 `switchMonth(direction)` 控制
+
+## 统计概览
+- 总记录数 / 总时长 / 收入合计
+- 当月数据标记"预估"
+
+## 记录展示规则
+- 按日期分组，每组显示日期标题
+- 每条记录：服务时间、课程类型、台桌/房间、会员昵称、开始/结束时间、业绩分钟
+- 有定档折算惩罚时展示：「120分钟（定档折算30分钟）」格式
+- 营业日以 08:00 为分割点
+
+## 记录点击交互
+- 原型 HTML 中记录条目无 onclick 跳转
+- 产品意图：点击记录可跳转对应任务详情页（需后续确认是否实现）
+
+## 页面状态枚举
+| 状态名 | 视觉表现 | 触发条件 |
+|--------|----------|----------|
+| 加载中 | 区域文案"加载中..." | loading=true |
+| 正常态 | 统计概览 + 明细列表 | 有数据 |
+| 空数据态 | "暂无数据" | records 为空 |
+| 错误态 | "加载失败，请点击重试" + 重试按钮 | error=true |
+
+## 后端 API 依赖
+| API | 方法 | 说明 |
+|-----|------|------|
+| `GET /api/performance/records` | GET | 业绩明细（支持月份参数） |
+
+## 页面导航
+- 来源：performance（点击"查看全部"）
+- 去向：无（末端页面，原型中无跳转）
+
+## 全局组件
+- 自定义顶部导航栏（返回按钮 + "服务记录"）
+- AI 悬浮按钮