# 目标列表功能实现文档

## 功能概述

基于图片中的习惯列表样式，我们创建了一个全新的目标列表页面，高保真还原了设计稿的视觉效果，并将内容替换为目标相关的内容。

## 新增文件

### 1. 目标列表页面 (`app/goals-list.tsx`)
- 完整的目标列表展示
- 支持筛选不同状态的目标
- 下拉刷新和加载更多功能
- 响应式设计和主题适配

### 2. 目标卡片组件 (`components/GoalCard.tsx`)
- 可复用的目标卡片组件
- 支持显示目标状态、重复类型、提醒等信息
- 智能图标选择（根据目标内容自动选择合适图标）
- 支持点击事件和状态显示控制

### 3. 目标筛选组件 (`components/GoalFilterTabs.tsx`)
- 支持按状态筛选目标（全部、进行中、已暂停、已完成、已取消）
- 显示各状态的目标数量
- 美观的标签式设计

### 4. 目标详情页面 (`app/goal-detail.tsx`)
- 显示单个目标的详细信息
- 目标统计信息（已完成、目标、进度）
- 目标属性信息（状态、重复类型、时间等）
- 完成记录列表

## 设计特点

### 视觉设计
- **高保真还原**: 完全按照图片中的习惯列表样式设计
- **卡片式布局**: 白色圆角卡片，带有阴影效果
- **图标设计**: 紫色主题图标，带有白色星星装饰
- **信息层次**: 清晰的信息层次结构，主标题 + 详细信息行

### 交互设计
- **点击反馈**: 卡片点击有视觉反馈
- **筛选功能**: 支持按状态筛选目标
- **导航流畅**: 支持导航到目标详情页面
- **下拉刷新**: 支持下拉刷新数据

## 数据结构映射

### 图片中的习惯信息 → 目标信息
| 图片元素 | 目标对应 | 说明 |
|---------|---------|------|
| 习惯标题 | 目标标题 | 显示目标名称 |
| +1 | 积分 | 显示目标完成获得的积分 |
| 目标数量 | 目标数量/频率 | 显示目标的目标数量或频率 |
| 提醒图标 | 提醒设置 | 如果目标有提醒则显示 |
| 提醒时间 | 提醒时间 | 显示具体的提醒时间 |
| 重复图标 | 重复类型 | 显示循环图标 |
| 重复类型 | 重复类型 | 显示"每日"、"每周"、"每月" |

## 功能特性

### 1. 智能图标选择
根据目标标题和类别自动选择合适图标：
- 运动相关：`fitness-center`
- 饮水相关：`local-drink`
- 睡眠相关：`bedtime`
- 学习相关：`school`
- 冥想相关：`self-improvement`
- 饮食相关：`restaurant`
- 默认：`flag`

### 2. 状态管理
- 使用Redux进行状态管理
- 支持分页加载
- 错误处理和加载状态
- 筛选状态保持

### 3. 响应式设计
- 适配不同屏幕尺寸
- 支持浅色/深色主题
- 流畅的动画效果

## 使用方式

### 1. 访问目标列表
在目标页面点击"列表"按钮，或直接访问 `/goals-list` 路由。

### 2. 筛选目标
使用顶部的筛选标签，可以按状态筛选目标：
- 全部：显示所有目标
- 进行中：显示正在进行的目标
- 已暂停：显示已暂停的目标
- 已完成：显示已完成的目标
- 已取消：显示已取消的目标

### 3. 查看目标详情
点击任意目标卡片，可以查看目标的详细信息。

### 4. 刷新数据
下拉列表可以刷新目标数据。

## 技术实现

### 组件架构
```
GoalsListScreen
├── GoalFilterTabs (筛选标签)
└── FlatList
    └── GoalCard (目标卡片)
        ├── 图标区域
        ├── 内容区域
        └── 状态指示器
```

### 状态管理
- 使用Redux Toolkit管理目标数据
- 支持分页和筛选状态
- 错误处理和加载状态

### 样式系统
- 使用StyleSheet进行样式管理
- 支持主题切换
- 响应式设计

## 扩展功能

### 1. 搜索功能
可以添加搜索框，支持按标题搜索目标。

### 2. 排序功能
可以添加排序选项，按创建时间、优先级等排序。

### 3. 批量操作
可以添加批量选择、批量操作功能。

### 4. 统计图表
可以添加目标完成情况的统计图表。

## 测试建议

### 1. 功能测试
- 测试目标列表加载
- 测试筛选功能
- 测试点击导航
- 测试下拉刷新

### 2. 样式测试
- 测试不同屏幕尺寸
- 测试主题切换
- 测试长文本显示

### 3. 性能测试
- 测试大量数据加载
- 测试内存使用情况
- 测试滚动性能

## 总结

新创建的目标列表功能完全按照设计稿实现，提供了良好的用户体验和完整的功能支持。通过模块化的组件设计，代码具有良好的可维护性和可扩展性。