b27099c6d9
- 移除流式分析文本显示，简化用户界面 - 修复ImagePicker媒体类型配置，使用数组格式 - 简化API响应处理逻辑，直接使用服务端返回数据 - 移除旧格式转换函数，统一使用新的API响应格式 - 清理冗余状态变量和UI组件，提升代码可维护性
304 lines
7.9 KiB
Markdown
304 lines
7.9 KiB
Markdown
# 系统架构
|
||
|
||
## 整体架构概览
|
||
|
||
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**: 性能分析工具 |