feat: 实现目标列表左滑删除功能及相关组件

- 在目标列表中添加左滑删除功能,用户可通过左滑手势显示删除按钮并确认删除目标
- 修改 GoalCard 组件,使用 Swipeable 组件包装卡片内容,支持删除操作
- 更新目标列表页面,集成删除目标的逻辑,确保与 Redux 状态管理一致
- 添加开发模式下的模拟数据,方便测试删除功能
- 更新相关文档,详细描述左滑删除功能的实现和使用方法
This commit is contained in:
2025-08-23 17:58:39 +08:00
parent 20a244e375
commit 4f2bd76b8f
14 changed files with 1592 additions and 732 deletions

View File

@@ -0,0 +1,131 @@
# 目标列表左滑删除功能实现
## 功能概述
为目标列表的卡片添加了左滑删除功能,用户可以通过左滑手势显示删除按钮,点击后确认删除目标。
## 技术实现
### 1. 依赖库
- `react-native-gesture-handler`: 提供手势处理功能
- `@expo/vector-icons`: 提供删除图标
### 2. 核心组件修改
#### GoalCard 组件 (`components/GoalCard.tsx`)
- 使用 `Swipeable` 组件包装原有的卡片内容
- 添加 `renderRightActions` 方法渲染删除按钮
- 添加删除确认对话框
- 支持删除回调函数
#### 应用根布局 (`app/_layout.tsx`)
- 添加 `GestureHandlerRootView` 包装器
- 确保手势处理功能正常工作
#### 目标列表页面 (`app/goals-list.tsx`)
- 添加删除目标的处理逻辑
- 集成 Redux 删除 action
- 添加开发模式下的模拟数据用于测试
### 3. 功能特性
#### 左滑手势
- 支持左滑显示删除按钮
- 设置合适的滑动阈值和边界
- 自动关闭滑动状态
#### 删除确认
- 显示确认对话框
- 包含目标标题信息
- 提供取消和确认选项
#### 视觉反馈
- 红色删除按钮背景
- 删除图标和文字
- 圆角设计保持一致性
#### 状态管理
- 集成 Redux 删除 action
- 自动更新列表状态
- 错误处理和提示
## 使用方法
### 用户操作流程
1. 在目标列表中,向左滑动任意目标卡片
2. 删除按钮会从右侧滑出
3. 点击删除按钮
4. 确认删除对话框出现
5. 选择"删除"确认或"取消"放弃
### 开发测试
在开发模式下,如果 API 调用失败,会自动加载模拟数据进行测试:
- 每日运动30分钟
- 每天喝8杯水
- 每周读书2小时
## 代码结构
```typescript
// GoalCard 组件结构
<Swipeable
ref={swipeableRef}
renderRightActions={renderRightActions}
rightThreshold={40}
overshootRight={false}
>
<TouchableOpacity>
{/* 原有的卡片内容 */}
</TouchableOpacity>
</Swipeable>
```
## 样式设计
### 删除按钮样式
```typescript
deleteButton: {
backgroundColor: '#EF4444',
justifyContent: 'center',
alignItems: 'center',
width: 80,
height: '100%',
borderTopRightRadius: 16,
borderBottomRightRadius: 16,
marginBottom: 12,
}
```
### 删除按钮文字样式
```typescript
deleteButtonText: {
color: '#FFFFFF',
fontSize: 12,
fontWeight: '600',
marginTop: 4,
}
```
## 注意事项
1. **手势处理**: 必须使用 `GestureHandlerRootView` 包装应用
2. **类型安全**: 确保所有必要的字段都正确设置
3. **错误处理**: 删除失败时显示错误提示
4. **用户体验**: 提供确认对话框防止误删
5. **性能优化**: 使用 `useRef` 管理 Swipeable 引用
## 扩展功能
可以考虑添加的其他功能:
- 批量删除
- 撤销删除
- 删除动画效果
- 更多操作按钮(编辑、暂停等)
## 测试建议
1. **手势测试**: 测试不同滑动距离和速度
2. **边界测试**: 测试快速连续滑动
3. **状态测试**: 测试删除后的列表更新
4. **错误测试**: 测试网络错误时的处理
5. **UI测试**: 测试不同屏幕尺寸下的显示效果