2.0 KiB
2.0 KiB
体重记录编辑和删除功能
功能概述
为体重记录页面添加了编辑和删除功能,用户可以:
- 点击体重记录卡片:唤出编辑弹窗,修改体重值
- 左滑体重记录卡片:显示删除按钮,支持删除记录
实现细节
1. 新增 Redux 操作
在 store/userSlice.ts 中添加了:
deleteWeightRecord: 删除体重记录updateWeightRecord: 更新体重记录- 为
WeightHistoryItem类型添加了可选的id字段
2. 新增组件
创建了 components/WeightRecordCard.tsx 组件:
- 使用
react-native-gesture-handler的Swipeable实现左滑删除 - 支持点击编辑功能
- 显示体重变化趋势(上升/下降箭头)
- 参考
GoalCard的交互设计
3. 更新体重记录页面
在 app/weight-records.tsx 中:
- 集成新的
WeightRecordCard组件 - 添加编辑体重记录的处理逻辑
- 添加删除体重记录的处理逻辑
- 扩展弹窗支持编辑现有记录
用户交互流程
编辑体重记录
- 用户点击任意体重记录卡片
- 弹出编辑弹窗,标题显示"编辑体重记录"
- 输入框预填充当前体重值
- 用户修改体重值并确认
- 调用 API 更新记录,刷新列表
删除体重记录
- 用户左滑体重记录卡片
- 显示红色删除按钮
- 点击删除按钮,弹出确认对话框
- 用户确认后调用 API 删除记录
- 从列表中移除该记录
API 接口
需要后端支持以下接口:
DELETE /api/users/weight-history/:recordId
PUT /api/users/weight-history/:recordId
注意事项
- 由于原始数据结构中没有
id字段,目前使用createdAt作为备用标识符 - 建议后端返回的体重记录包含唯一的
id字段 - 删除和编辑操作都会重新加载体重历史数据以确保数据一致性
依赖
react-native-gesture-handler: 已安装,用于左滑手势- 现有的 Redux 状态管理
- 现有的 API 服务层