digital-pilates/docs/goals-list-implementation.md

目标列表功能实现文档

功能概述

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

新增文件

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. 性能测试

• 测试大量数据加载
• 测试内存使用情况
• 测试滚动性能

总结

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