75 lines
2.0 KiB
Markdown
75 lines
2.0 KiB
Markdown
# 体重记录编辑和删除功能
|
|
|
|
## 功能概述
|
|
|
|
为体重记录页面添加了编辑和删除功能，用户可以：
|
|
|
|
1. **点击体重记录卡片**：唤出编辑弹窗，修改体重值
|
|
2. **左滑体重记录卡片**：显示删除按钮，支持删除记录
|
|
|
|
## 实现细节
|
|
|
|
### 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` 组件
|
|
- 添加编辑体重记录的处理逻辑
|
|
- 添加删除体重记录的处理逻辑
|
|
- 扩展弹窗支持编辑现有记录
|
|
|
|
## 用户交互流程
|
|
|
|
### 编辑体重记录
|
|
|
|
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 服务层 |