digital-pilates/.kilocode/rules/memory-bank/architecture.md

系统架构

整体架构概览

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

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 进行应用状态管理：

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. 组件架构

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

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

组件层次:

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

4. 服务层架构

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

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. 数据流架构

采用单向数据流设计：

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 模式抽象数据源：

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

2. Observer 模式

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

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

3. Strategy 模式

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

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

4. Factory 模式

组件创建使用工厂模式：

// 卡片组件工厂
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: 性能分析工具