feat(nutrition): 优化营养成分表分析功能并移除流式显示
- 移除流式分析文本显示，简化用户界面 - 修复ImagePicker媒体类型配置，使用数组格式 - 简化API响应处理逻辑，直接使用服务端返回数据 - 移除旧格式转换函数，统一使用新的API响应格式 - 清理冗余状态变量和UI组件，提升代码可维护性
This commit is contained in:
richarjiang
304
.kilocode/rules/memory-bank/architecture.md
Normal file
304
.kilocode/rules/memory-bank/architecture.md
Normal file
@@ -0,0 +1,304 @@
|
||||
# 系统架构
|
||||
|
||||
## 整体架构概览
|
||||
|
||||
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**: 性能分析工具
|
||||
Reference in New Issue
Block a user