Files
digital-pilates/docs/weight-records-edit-delete.md

2.0 KiB

体重记录编辑和删除功能

功能概述

为体重记录页面添加了编辑和删除功能,用户可以:

  1. 点击体重记录卡片:唤出编辑弹窗,修改体重值
  2. 左滑体重记录卡片:显示删除按钮,支持删除记录

实现细节

1. 新增 Redux 操作

store/userSlice.ts 中添加了:

  • deleteWeightRecord: 删除体重记录
  • updateWeightRecord: 更新体重记录
  • WeightHistoryItem 类型添加了可选的 id 字段

2. 新增组件

创建了 components/WeightRecordCard.tsx 组件:

  • 使用 react-native-gesture-handlerSwipeable 实现左滑删除
  • 支持点击编辑功能
  • 显示体重变化趋势(上升/下降箭头)
  • 参考 GoalCard 的交互设计

3. 更新体重记录页面

app/weight-records.tsx 中:

  • 集成新的 WeightRecordCard 组件
  • 添加编辑体重记录的处理逻辑
  • 添加删除体重记录的处理逻辑
  • 扩展弹窗支持编辑现有记录

用户交互流程

编辑体重记录

  1. 用户点击任意体重记录卡片
  2. 弹出编辑弹窗,标题显示"编辑体重记录"
  3. 输入框预填充当前体重值
  4. 用户修改体重值并确认
  5. 调用 API 更新记录,刷新列表

删除体重记录

  1. 用户左滑体重记录卡片
  2. 显示红色删除按钮
  3. 点击删除按钮,弹出确认对话框
  4. 用户确认后调用 API 删除记录
  5. 从列表中移除该记录

API 接口

需要后端支持以下接口:

DELETE /api/users/weight-history/:recordId
PUT /api/users/weight-history/:recordId

注意事项

  1. 由于原始数据结构中没有 id 字段,目前使用 createdAt 作为备用标识符
  2. 建议后端返回的体重记录包含唯一的 id 字段
  3. 删除和编辑操作都会重新加载体重历史数据以确保数据一致性

依赖

  • react-native-gesture-handler: 已安装,用于左滑手势
  • 现有的 Redux 状态管理
  • 现有的 API 服务层