digital-pilates/docs/goal-management-implementation.md

目标管理功能实现文档

功能概述

根据用户需求，实现了一个高保真的目标管理页面，包含以下主要功能：

1. 横向滑动的待办事项卡片 - 首屏展示1.5张卡片
2. 时间筛选选择器 - 支持按天/周/月筛选
3. 可滚动的时间轴 - 展示选中日期的具体任务，支持上下左右滑动

组件架构

核心组件

1. TodoCard.tsx

• 功能: 单个待办事项卡片组件
• 特性:
  • 支持多种任务分类（workout, finance, personal, work, health）
  • 优先级显示（高/中/低）
  • 完成状态切换
  • 时间显示和格式化
  • 响应式设计，适配不同屏幕尺寸

2. TodoCarousel.tsx

• 功能: 横向滑动的待办事项列表
• 特性:
  • 使用ScrollView实现横向滑动
  • 设置snapToInterval实现卡片对齐
  • 底部指示器显示当前位置
  • 空状态处理
  • 首屏显示1.5张卡片的设计

3. TimeTabSelector.tsx

• 功能: 时间筛选选择器
• 特性:
  • 支持天/周/月三种筛选模式
  • 平滑的选择动画
  • 符合设计系统的UI风格

4. TimelineSchedule.tsx

• 功能: 可滚动的时间轴组件
• 特性:
  • 24小时时间轴显示
  • 支持同一时间段多个事件的并排显示
  • 当前时间指示线
  • 事件完成状态显示
  • 上下左右滑动支持
  • 事件时长可视化

主页面

(tabs)/goals.tsx

• 功能: 作为底部Tab第三个位置的目标管理页面
• 特性:
  • 响应式布局
  • 状态管理
  • 数据筛选逻辑
  • 渐变背景
  • 安全区域适配
  • 集成到底部导航栏中

技术实现

数据结构

interface TodoItem {
  id: string;
  title: string;
  description?: string;
  time: string;
  category: 'workout' | 'finance' | 'personal' | 'work' | 'health';
  isCompleted?: boolean;
  priority?: 'high' | 'medium' | 'low';
}

interface TimelineEvent {
  id: string;
  title: string;
  startTime: string;
  endTime?: string;
  category: TodoItem['category'];
  isCompleted?: boolean;
}

核心功能

1. 横向滑动实现:

   • 使用ScrollView的horizontal属性
   • 通过snapToInterval实现卡片对齐
   • 计算卡片宽度确保首屏显示1.5张

2. 时间轴布局:

   • 使用绝对定位实现事件在时间轴上的精确定位
   • 计算事件高度和位置基于开始/结束时间
   • 处理同一时间段的多个事件并排显示

3. 响应式设计:

   • 基于屏幕宽度动态计算组件尺寸
   • 适配不同设备的安全区域
   • 使用Dimensions API获取屏幕信息

UI设计特点

设计原则

• 高保真还原: 严格按照用户提供的设计图实现
• 符合项目风格: 使用项目现有的颜色系统和组件风格
• 无表情符号: 根据用户记忆偏好，界面中不使用表情符号memory:6035831

颜色系统

• 使用项目统一的Colors常量
• 支持浅色/深色主题切换
• 每个分类使用不同的主题色

交互体验

• 平滑的滑动动画
• 触觉反馈支持
• 加载状态处理
• 错误状态处理

使用方法

1. 访问页面:

   • 直接点击底部导航栏第三个位置的"目标"tab
   • 或通过个人页面的"目标管理"菜单项
   • 或访问"目标管理演示"查看功能介绍

2. 基本操作:

   • 左右滑动查看不同的待办事项
   • 点击天/周/月切换时间筛选
   • 上下滑动查看时间轴
   • 点击待办事项可查看详情（可扩展）
   • 点击完成按钮切换任务状态

扩展性

该实现具有良好的扩展性：

1. 数据源: 可以轻松接入真实的API数据
2. 功能扩展: 可以添加新增/编辑/删除任务功能
3. 样式定制: 基于设计系统，可以轻松调整样式
4. 组件复用: 各个组件都可以在其他页面中复用

文件结构

components/
├── TodoCard.tsx          # 待办事项卡片
├── TodoCarousel.tsx      # 横向滑动列表
├── TimeTabSelector.tsx   # 时间筛选器
└── TimelineSchedule.tsx  # 时间轴组件

app/
├── (tabs)/
│   └── goals.tsx        # 目标管理tab页面（第三个位置）
└── goal-demo.tsx        # 演示页面

constants/
└── Routes.ts            # 路由配置（已更新）

总结

该目标管理功能完全按照用户需求实现，提供了高保真的用户界面和流畅的交互体验。代码结构清晰，易于维护和扩展。所有组件都遵循项目的设计规范，确保了一致的用户体验。