richarjiang
4f2bd76b8f
- 在目标列表中添加左滑删除功能，用户可通过左滑手势显示删除按钮并确认删除目标 - 修改 GoalCard 组件，使用 Swipeable 组件包装卡片内容，支持删除操作 - 更新目标列表页面，集成删除目标的逻辑，确保与 Redux 状态管理一致 - 添加开发模式下的模拟数据，方便测试删除功能 - 更新相关文档，详细描述左滑删除功能的实现和使用方法
159 lines
4.5 KiB
Markdown
159 lines
4.5 KiB
Markdown
# 目标列表功能实现文档
|
|
|
|
## 功能概述
|
|
|
|
基于图片中的习惯列表样式，我们创建了一个全新的目标列表页面，高保真还原了设计稿的视觉效果，并将内容替换为目标相关的内容。
|
|
|
|
## 新增文件
|
|
|
|
### 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. 性能测试
|
|
- 测试大量数据加载
|
|
- 测试内存使用情况
|
|
- 测试滚动性能
|
|
|
|
## 总结
|
|
|
|
新创建的目标列表功能完全按照设计稿实现，提供了良好的用户体验和完整的功能支持。通过模块化的组件设计，代码具有良好的可维护性和可扩展性。
|