# 系统架构

## 整体架构概览

Out Live 采用典型的 React Native 应用架构，基于 Expo Prebuild 构建原生 iOS 应用。应用采用分层架构设计，包含表现层、业务逻辑层、数据访问层和基础设施层。

```mermaid
graph TB
    A[用户界面层] --> B[业务逻辑层]
    B --> C[数据访问层]
    C --> D[基础设施层]
    
    A1[React Components] --> A
    A2[Expo Router] --> A
    A3[Liquid Glass UI] --> A
    
    B1[Redux Store] --> B
    B2[Business Services] --> B
    B3[Hooks] --> B
    
    C1[API Services] --> C
    C2[HealthKit Bridge] --> C
    C3[Local Storage] --> C
    
    D1[Expo SDK] --> D
    D2[Native Modules] --> D
    D3[Third-party SDKs] --> D
```

## 目录结构

```
digital-pilates/
├── app/                    # Expo Router 页面和路由
│   ├── (tabs)/            # 标签页路由
│   ├── auth/              # 认证相关页面
│   ├── challenges/        # 挑战页面
│   ├── fasting/           # 轻断食页面
│   ├── food/              # 营养相关页面
│   ├── profile/           # 用户资料页面
│   ├── workout/           # 训练页面
│   └── _layout.tsx        # 根布局组件
├── components/            # 可复用组件
│   ├── ui/                # 基础 UI 组件
│   ├── cards/             # 卡片组件
│   └── forms/             # 表单组件
├── services/              # 业务服务层
│   ├── api.ts             # API 基础服务
│   ├── healthKit/         # HealthKit 集成
│   ├── notifications/     # 通知服务
│   └── aiCoach/           # AI 教练服务
├── store/                 # Redux 状态管理
│   ├── slices/            # Redux Toolkit slices
│   └── index.ts           # Store 配置
├── utils/                 # 工具函数
│   ├── health.ts          # 健康数据处理
│   ├── kvStore.ts         # 本地存储
│   └── notificationHelpers.ts
├── constants/             # 常量定义
│   ├── Colors.ts          # 颜色主题
│   ├── Routes.ts          # 路由常量
│   └── Api.ts             # API 配置
├── hooks/                 # 自定义 Hooks
├── types/                 # TypeScript 类型定义
├── assets/                # 静态资源
└── ios/                   # iOS 原生代码
```

## 核心架构组件

### 1. 路由架构 (Expo Router)

采用 Expo Router 6.0 实现文件系统路由：

- **标签页导航**: 5个主要标签页（健康、断食、习惯、挑战、个人）
- **模态页面**: 认证、目标详情、设置等页面
- **嵌套路由**: 支持复杂的页面层级结构
- **类型安全**: 完全的 TypeScript 路由类型支持

### 2. 状态管理架构 (Redux Toolkit)

使用 Redux Toolkit 进行应用状态管理：

```mermaid
graph LR
    A[UI Components] --> B[Redux Actions]
    B --> C[Redux Slices]
    C --> D[Redux Store]
    D --> A
    
    E[Async Thunks] --> C
    F[Middleware] --> C
    G[Selectors] --> A
```

**核心 Slices**:
- `userSlice`: 用户信息和认证状态
- `healthSlice`: 健康数据（步数、心率、HRV等）
- `nutritionSlice`: 营养数据和饮食记录
- `goalsSlice`: 目标和任务管理
- `fastingSlice`: 轻断食状态和计划
- `moodSlice`: 心情记录和分析
- `workoutSlice`: 训练数据和计划

### 3. 组件架构

采用组件化设计，按功能域组织：

```mermaid
graph TD
    A[页面组件] --> B[容器组件]
    B --> C[业务组件]
    C --> D[UI 组件]
    
    E[Hooks] --> B
    F[Redux Selectors] --> B
    G[Services] --> C
```

**组件层次**:
- **页面组件**: 路由对应的顶级组件
- **容器组件**: 处理数据获取和状态管理
- **业务组件**: 封装特定业务逻辑的组件
- **UI 组件**: 纯展示的可复用组件

### 4. 服务层架构

服务层负责业务逻辑和外部系统集成：

```mermaid
graph TB
    A[Components] --> B[Service Layer]
    B --> C[API Services]
    B --> D[HealthKit Services]
    B --> E[Notification Services]
    B --> F[Storage Services]
    
    C --> G[Remote API]
    D --> H[Native HealthKit]
    E --> I[Expo Notifications]
    F --> J[Local Storage]
```

**核心服务**:
- `api.ts`: RESTful API 客户端
- `health.ts`: HealthKit 数据处理
- `notifications.ts`: 通知管理
- `aiCoach.ts`: AI 教练集成
- `waterRecords.ts`: 饮水记录管理

### 5. 数据流架构

采用单向数据流设计：

```mermaid
graph LR
    A[User Action] --> B[Component Event]
    B --> C[Redux Action]
    C --> D[Service Call]
    D --> E[API/HealthKit]
    E --> F[Data Update]
    F --> G[Redux State]
    G --> H[Component Re-render]
```

## 关键设计模式

### 1. Repository 模式

数据访问层使用 Repository 模式抽象数据源：

```typescript
// 示例：健康数据 Repository
class HealthRepository {
  async getSteps(date: Date): Promise<number> {
    return fetchStepCount(date);
  }
  
  async getHeartRate(date: Date): Promise<number | null> {
    return fetchHeartRate(date);
  }
}
```

### 2. Observer 模式

通知系统使用观察者模式：

```typescript
// 权限状态监听
healthPermissionManager.on('permissionStatusChanged', (status) => {
  // 处理权限状态变化
});
```

### 3. Strategy 模式

不同类型的数据处理使用策略模式：

```typescript
// 营养数据计算策略
interface NutritionStrategy {
  calculate(records: DietRecord[]): NutritionSummary;
}
```

### 4. Factory 模式

组件创建使用工厂模式：

```typescript
// 卡片组件工厂
const CardFactory = {
  createHealthCard: (props) => <HealthCard {...props} />,
  createNutritionCard: (props) => <NutritionCard {...props} />,
};
```

## 性能优化架构

### 1. 组件优化

- **React.memo**: 防止不必要的重渲染
- **useMemo/useCallback**: 缓存计算结果和函数
- **FlatList**: 大列表虚拟化
- **InteractionManager**: 延迟非关键渲染

### 2. 数据优化

- **Redux Toolkit**: 自动化的状态优化
- **数据分页**: 大数据集分页加载
- **缓存策略**: 智能数据缓存
- **后台同步**: 异步数据同步

### 3. 资源优化

- **图片优化**: WebP 格式和懒加载
- **Bundle 分割**: 按需加载代码
- **内存管理**: 及时释放资源
- **网络优化**: 请求合并和缓存

## 安全架构

### 1. 数据安全

- **Token 管理**: JWT Token 安全存储
- **API 加密**: HTTPS 通信
- **数据脱敏**: 敏感数据处理
- **权限控制**: 细粒度权限管理

### 2. 隐私保护

- **本地加密**: 敏感数据本地加密存储
- **权限最小化**: 只请求必要的系统权限
- **数据匿名化**: 统计数据匿名化处理
- **用户控制**: 用户数据删除和导出

## 扩展性设计

### 1. 模块化架构

- **功能模块**: 独立的功能模块设计
- **插件系统**: 支持功能插件扩展
- **配置驱动**: 配置化的功能开关
- **版本兼容**: 向后兼容的 API 设计

### 2. 多端支持

- **跨平台**: React Native 跨平台能力
- **响应式**: 适配不同屏幕尺寸
- **主题系统**: 可切换的主题设计
- **国际化**: 多语言支持框架

## 监控和诊断

### 1. 错误监控

- **Sentry 集成**: 错误收集和分析
- **崩溃报告**: 自动崩溃报告
- **性能监控**: 应用性能指标
- **用户反馈**: 内置反馈系统

### 2. 日志系统

- **分级日志**: 不同级别的日志记录
- **结构化日志**: 便于分析的日志格式
- **远程日志**: 日志远程收集
- **隐私保护**: 敏感信息过滤

## 测试架构

### 1. 测试策略

- **单元测试**: 核心逻辑单元测试
- **集成测试**: 组件集成测试
- **端到端测试**: 关键流程 E2E 测试
- **性能测试**: 性能基准测试

### 2. 测试工具

- **Jest**: 单元测试框架
- **React Native Testing Library**: 组件测试
- **Detox**: E2E 测试框架
- **Flamegraph**: 性能分析工具