Files

richarjiang 259f10540e feat: 新增任务管理功能及相关组件

- 将目标页面改为任务列表，支持任务的创建、完成和跳过功能
- 新增任务卡片和任务进度卡片组件，展示任务状态和进度
- 实现任务数据的获取和管理，集成Redux状态管理
- 更新API服务，支持任务相关的CRUD操作
- 编写任务管理功能实现文档，详细描述功能和组件架构

2025-08-22 17:30:14 +08:00

10 KiB

Raw Permalink Blame History

任务功能实现总结

概述

已成功将goals页面从显示目标列表改为显示任务列表，实现了完整的任务管理功能。任务系统基于目标自动生成，支持分步完成和进度追踪。同时保留了原有的目标管理功能，通过新的页面结构提供更好的用户体验。最新更新了任务统计区域和任务卡片设计，使用现代化的UI设计，完全按照设计稿实现高保真界面。

页面结构

1. 任务页面 (`app/(tabs)/goals.tsx`)

主要功能: 显示任务列表，支持完成任务和跳过任务
入口: 底部导航栏的"目标"标签
特色功能:
- 任务进度卡片（高保真设计）
- 现代化任务卡片列表
- 下拉刷新和上拉加载
- 右上角"目标"按钮导航到目标管理页面

2. 目标管理页面 (`app/goals-detail.tsx`)

主要功能: 显示原有的目标管理功能，包括滑动模块、日程表格等
入口: 任务页面右上角的"目标"按钮
特色功能:
- 今日待办事项卡片
- 时间筛选选项卡（日/周/月）
- 日期选择器
- 时间轴安排
- 创建目标功能

已完成的功能

1. 数据结构定义 (`types/goals.ts`)

✅ 任务状态类型 (TaskStatus)
✅ 任务数据结构 (Task, TaskListItem)
✅ 任务查询参数 (GetTasksQuery)
✅ 完成任务请求数据 (CompleteTaskRequest)
✅ 跳过任务请求数据 (SkipTaskRequest)
✅ 任务统计信息 (TaskStats)

2. API服务层 (`services/tasksApi.ts`)

✅ 获取任务列表 (GET /goals/tasks)
✅ 获取特定目标的任务列表 (GET /goals/:goalId/tasks)
✅ 完成任务 (POST /goals/tasks/:taskId/complete)
✅ 跳过任务 (POST /goals/tasks/:taskId/skip)
✅ 获取任务统计 (GET /goals/tasks/stats/overview)

3. Redux状态管理 (`store/tasksSlice.ts`)

✅ 完整的异步操作 (createAsyncThunk)
✅ 任务列表状态管理
✅ 任务统计状态管理
✅ 完成任务和跳过任务操作
✅ 乐观更新支持
✅ 错误处理和加载状态
✅ 分页数据管理

4. 任务卡片组件 (`components/TaskCard.tsx`)

✅ 现代化任务卡片UI设计，完全按照设计稿实现
✅ 右上角分类图标（粉色、红色、绿色、黄色、紫色等）
✅ 项目/分类标签（小写灰色文字）
✅ 任务标题（粗体黑色文字）
✅ 时间显示（紫色时钟图标 + 时间 + 日期）
✅ 状态按钮（Done紫色、In Progress橙色、To-do蓝色等）
✅ 进度条显示（仅对多步骤任务显示）
✅ 阴影效果和圆角设计
✅ 主题适配（明暗模式）

5. 任务进度卡片组件 (`components/TaskProgressCard.tsx`)

✅ 高保真设计，完全按照设计稿实现
✅ 紫色主题配色方案
✅ 圆形进度条显示今日任务完成进度
✅ 左侧文字区域："今日目标" + "加油，快完成啦!"
✅ 阴影效果和圆角设计
✅ 响应式进度计算

6. 页面集成

✅ 任务页面 (app/(tabs)/goals.tsx)
- Redux状态集成
- 任务进度卡片展示
- 现代化任务卡片列表展示
- 下拉刷新功能
- 上拉加载更多
- 完成任务功能
- 跳过任务功能
- 创建目标功能（保留原有功能）
- 错误提示和加载状态
- 空状态处理
- 目标管理页面导航
✅ 目标管理页面 (app/goals-detail.tsx)
- 保留原有的所有目标管理功能
- 今日待办事项卡片
- 时间筛选选项卡
- 日期选择器
- 时间轴安排
- 创建目标功能
- 返回导航功能

核心功能特性

任务状态管理

pending: 待开始 (To-do - 蓝色)
in_progress: 进行中 (In Progress - 橙色)
completed: 已完成 (Done - 紫色)
overdue: 已过期 (Overdue - 红色)
skipped: 已跳过 (Skipped - 灰色)

进度追踪

支持分步完成（如一天要喝8杯水，可以分8次上报）
自动计算完成进度百分比
当完成次数达到目标次数时自动标记为完成
实时更新任务进度卡片

数据流程

获取任务: 页面加载 → 调用API → 更新Redux状态 → 渲染列表
完成任务: 用户点击完成 → 调用API → 乐观更新 → 更新进度
跳过任务: 用户点击跳过 → 调用API → 更新任务状态
创建目标: 用户创建目标 → 系统自动生成任务 → 刷新任务列表
页面导航: 任务页面 ↔ 目标管理页面
进度更新: 任务状态变化 → 自动更新进度卡片

API接口对应

功能	API接口	实现状态
获取任务列表	GET /goals/tasks	✅
获取特定目标任务	GET /goals/:goalId/tasks	✅
完成任务	POST /goals/tasks/:taskId/complete	✅
跳过任务	POST /goals/tasks/:taskId/skip	✅
获取任务统计	GET /goals/tasks/stats/overview	✅

使用方式

查看任务

进入goals页面，自动显示任务进度卡片和任务列表
查看今日任务完成进度（圆形进度条显示）
下拉刷新获取最新任务
上拉加载更多历史任务

完成任务

在任务卡片中点击"完成"按钮
系统自动记录完成次数
更新任务进度和状态
进度卡片实时更新完成百分比

跳过任务

在任务卡片中点击"跳过"按钮
系统记录跳过原因
更新任务状态为已跳过

创建目标

点击页面右上角的"+"按钮
填写目标信息
系统自动生成相应的任务

访问目标管理

点击页面右上角的"目标"按钮
进入目标管理页面
查看原有的滑动模块、日程表格等功能

任务进度卡片交互

进度条实时显示今日任务完成情况
简洁的设计，专注于进度展示

技术特点

类型安全: 完整的TypeScript类型定义
状态管理: Redux Toolkit + RTK Query模式
乐观更新: 提升用户体验
错误处理: 完整的错误提示和恢复机制
响应式设计: 适配不同屏幕尺寸
主题适配: 支持明暗模式切换
性能优化: 分页加载，避免一次性加载过多数据
页面导航: 使用expo-router实现页面间导航
高保真UI: 完全按照设计稿实现，包括颜色、字体、阴影等细节
现代化设计: 采用最新的UI设计趋势和最佳实践

页面布局

任务页面布局

顶部区域

页面标题："任务"
目标管理按钮（带图标）
创建目标按钮（+）

任务进度卡片区域

紫色背景卡片
左侧文字："今日目标" + "加油，快完成啦!"
右侧圆形进度条（显示完成百分比）

任务列表区域

现代化任务卡片列表
下拉刷新
上拉加载更多
空状态提示

目标管理页面布局

顶部区域

返回按钮
页面标题："目标管理"
创建目标按钮（+）

内容区域

今日待办事项卡片
时间筛选选项卡
日期选择器（周/月模式）
时间轴安排

设计亮点

任务卡片设计

现代化布局: 右上角图标 + 主要内容区域 + 右下角状态按钮
分类图标: 根据任务分类显示不同颜色的图标（粉色、红色、绿色、黄色、紫色）
时间显示: 紫色时钟图标 + 时间 + 日期，信息层次清晰
状态按钮: 不同状态使用不同颜色（Done紫色、In Progress橙色、To-do蓝色等）
进度条: 仅对多步骤任务显示，避免界面冗余
阴影效果: 轻微的阴影增强立体感
圆角设计: 统一的圆角半径，保持设计一致性

任务进度卡片设计

配色方案: 使用紫色主题（#8B5CF6），符合现代设计趋势
圆形进度条: 使用border和transform实现，性能优秀
文字层次: 主标题和副标题的字体大小和权重区分
阴影效果: 添加适当的阴影，增强立体感
圆角设计: 统一的圆角半径，保持设计一致性

交互体验

实时更新: 任务状态变化时进度卡片立即更新
视觉反馈: 按钮点击有透明度变化
流畅动画: 进度条变化平滑自然
信息层次: 清晰的信息架构，重要信息突出显示

后续优化建议

任务筛选: 添加按状态、日期范围筛选功能
任务搜索: 支持按标题搜索任务
任务详情: 添加任务详情页面
批量操作: 支持批量完成任务
推送通知: 集成推送服务，实现任务提醒
数据同步: 实现多设备数据同步
统计分析: 添加更详细的任务完成统计和分析
离线支持: 支持离线完成任务，网络恢复后同步
页面动画: 添加页面切换动画效果
手势操作: 支持滑动完成任务等手势操作
进度动画: 为进度条添加平滑的动画效果
主题切换: 支持多种颜色主题选择
卡片动画: 为任务卡片添加进入和退出动画
拖拽排序: 支持拖拽重新排序任务

测试建议

单元测试: 测试Redux reducers和API服务
集成测试: 测试完整的数据流程
UI测试: 测试组件交互和状态变化
端到端测试: 测试完整的用户流程
性能测试: 测试大量任务时的性能表现
导航测试: 测试页面间导航功能
进度计算测试: 测试进度条计算的准确性
响应式测试: 测试不同屏幕尺寸下的显示效果
主题测试: 测试明暗模式切换效果
可访问性测试: 测试色盲用户的可访问性

注意事项

API兼容性: 确保后端API接口与前端调用一致
错误处理: 网络异常时的用户提示和恢复机制
数据一致性: 乐观更新失败时的回滚机制
用户体验: 加载状态和空状态的友好提示
性能考虑: 大量任务时的分页和虚拟化处理
导航体验: 确保页面间导航流畅自然
状态保持: 页面切换时保持用户操作状态
设计一致性: 确保所有UI组件遵循统一的设计规范
进度准确性: 确保进度计算逻辑正确，避免显示错误
可访问性: 考虑色盲用户的可访问性需求
国际化: 考虑多语言支持的需求
性能优化: 大量任务时的渲染性能优化

10 KiB Raw Permalink Blame History Unescape Escape

任务功能实现总结

概述

页面结构

1. 任务页面 (app/(tabs)/goals.tsx)

2. 目标管理页面 (app/goals-detail.tsx)

已完成的功能

1. 数据结构定义 (types/goals.ts)

2. API服务层 (services/tasksApi.ts)

3. Redux状态管理 (store/tasksSlice.ts)

4. 任务卡片组件 (components/TaskCard.tsx)

5. 任务进度卡片组件 (components/TaskProgressCard.tsx)

6. 页面集成

核心功能特性

任务状态管理

进度追踪

数据流程

API接口对应

使用方式

查看任务

完成任务

跳过任务

创建目标

访问目标管理

任务进度卡片交互

技术特点

页面布局

任务页面布局

顶部区域

任务进度卡片区域

任务列表区域

目标管理页面布局

顶部区域

内容区域

设计亮点

任务卡片设计

任务进度卡片设计

交互体验

后续优化建议

测试建议

注意事项

10 KiB

Raw Permalink Blame History

1. 任务页面 (`app/(tabs)/goals.tsx`)

2. 目标管理页面 (`app/goals-detail.tsx`)

1. 数据结构定义 (`types/goals.ts`)

2. API服务层 (`services/tasksApi.ts`)

3. Redux状态管理 (`store/tasksSlice.ts`)

4. 任务卡片组件 (`components/TaskCard.tsx`)

5. 任务进度卡片组件 (`components/TaskProgressCard.tsx`)