# 健身 App 首页

## 📋 业务与功能

### 1.1 核心目标

页面聚焦用户训练入口与每日目标反馈，帮助用户快速进入训练状态。

页面强调沉浸式视觉与高频浏览体验，适配移动端单列布局。

### 1.2 功能清单

- **页面头部**：头像、问候语、用户名、通知图标
- **运动数据统计**：卡路里消耗、运动时长、连续天数等统计卡片
- **每日目标区域**：环形进度条、目标说明、开始训练按钮
- **课程推荐**：横向滚动课程卡片列表
- **底部导航栏**：首页、计划、统计、我的四个 Tab

### 1.3 交互要点

- 点击“开始训练”：触发 `onStartWorkout` 事件
- 点击课程卡片：触发 `onCourseClick` 事件，返回课程对象
- 点击底部导航项：触发 `onTabChange` 事件，更新当前 Tab
- 统计卡片按压时显示缩放反馈
- 通过动作 `updateProgress` 动态更新进度环与百分比

---

## 📊 内容规划

### 2.1 信息架构

```
健身 App 首页
├── 头部
│   ├── 头像与问候语
│   └── 通知入口
├── 运动数据统计（横向滑动）
├── 每日目标
│   ├── 环形进度
│   ├── 目标说明
│   └── 开始训练按钮
├── 课程推荐（横向滑动）
└── 底部导航
```

### 2.2 数据来源

- **数据类型**：课程列表（`courses`）
- **数据源**：用户提供（props data）/ 内置示例
- **关键字段**：
  - `id`: 课程 ID
  - `title`: 课程标题
  - `duration`: 时长（分钟）
  - `level`: 难度等级
  - `category`: 分类标签
  - `image`: 封面图片 URL

- **数据类型**：进度与统计数据
- **数据源**：内置示例（可扩展为外部数据源）
- **关键字段**：今日进度、卡路里、时长、连续天数

### 2.3 内容示例

**课程示例**：
- HIIT 高强度燃脂 / 20 分钟 / K3 / 减脂

---

## 🎨 布局与结构

### 3.1 整体布局

- **布局模式**：单栏
- **容器宽度**：固定（最大宽度 420px，居中）
- **容器高度**：一屏高度（`100vh/100dvh`），内容区独立滚动
- **关键尺寸**：
  - 顶部区域：固定内边距与粘性定位
  - 统计卡片：横向滚动，卡片最小宽度 100px
  - 主体滚动区：允许纵向滚动，但隐藏滚动条视觉
  - 底部导航：容器底部常驻，预留安全区，避免 `fixed` 在缩放容器中的偏移

### 3.2 响应式适配

- **桌面端（≥1200px）**：保持移动端宽度居中展示
- **平板端（768-1199px）**：保持单列，内容居中
- **移动端（<768px）**：全宽展示，内容区滚动，底部导航常驻

---

## 🎨 视觉规范

### 4.1 设计规范来源

**设计依据**：
- [x] 用户提供的设计规范：`/docs/设计规范.UIGuidelines.md`

### 4.2 自定义设计要点

**自定义色彩**（如有）：
- `accentColor`：用于高亮、按钮与进度条（默认 `#a6ff00`）

**自定义尺寸**（如有）：
- 无

**其他自定义规范**（如有）：
- 深色背景与霓虹强调色对比

### 4.3 组件状态

- **默认态（default）**：深色背景、卡片悬浮层次
- **悬停/按压态（hover/active）**：卡片轻微缩放、按钮高亮
- **选中态（selected）**：底部导航高亮
- **加载态（loading）**：可用于数据刷新与进度更新

---

## ⚙️ Axure API 说明

### 5.1 事件列表（eventList）

| 事件名称 | Payload 类型 | 触发时机 | 说明 |
|---------|-------------|---------|------|
| `onCourseClick` | `Course` | 点击课程卡片时 | 返回课程对象 |
| `onStartWorkout` | `void` | 点击开始训练按钮时 | 无参数 |
| `onTabChange` | `{ index: number }` | 点击底部导航项时 | 返回选中的 Tab 索引 |

### 5.2 动作列表（actionList）

| 动作名称 | Params 类型 | 参数说明 | 功能描述 |
|---------|------------|---------|---------|
| `refreshData` | `void` | 无 | 刷新首页数据 |
| `updateProgress` | `{ progress: number }` | 进度值（0-100） | 更新今日目标进度 |

### 5.3 变量列表（varList）

| 变量名称 | 类型 | 默认值 | 说明 |
|---------|-----|-------|------|
| `currentTab` | `number` | `0` | 当前选中 Tab 索引（0-3） |
| `todayProgress` | `number` | `65` | 今日目标完成进度（0-100） |

### 5.4 配置项列表（configList）

| 配置项名称 | 类型 | 默认值 | 说明 |
|----------|-----|-------|------|
| `userName` | `string` | `Alex` | 顶部显示的用户名 |
| `accentColor` | `string` | `#a6ff00` | App 主要强调色 |
| `dailyGoal` | `number` | `500` | 每日目标（kcal） |

### 5.5 数据项列表（dataList）

**数据结构**：
```typescript
{
  courses: Array<{
    id: number;       // 课程 ID
    title: string;    // 标题
    duration: number; // 时长（分钟）
    level: string;    // 难度等级
    category: string; // 分类
    image: string;    // 封面图
  }>;
}
```

---

## 🧩 Pencil 设计稿

### 6.1 设计稿文件
- 文件路径：`/src/prototypes/ref-app-home/fitness-app-home.pen`
- 设计范围：移动端首页单屏（390 × 844）

### 6.2 页面结构映射
- 状态栏（62px）：时间与系统状态占位
- 顶部问候区：用户名、激励文案、头像
- 统计卡片区：卡路里、运动分钟、连续天数
- 今日计划区：环形进度、完成值、开始训练按钮
- 课程推荐区：横向滚动课程卡片（首屏可见 1.5 张）
- 底部导航：4 个 Tab（首页高亮）

### 6.3 视觉要点落地
- 主背景：深色 `#121212`
- 强调色：霓虹绿 `#A6FF00`
- 卡片圆角：16px/20px
- 导航与按钮：高亮态使用强调色，非高亮态使用中性灰