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

- 在目标列表中添加左滑删除功能，用户可通过左滑手势显示删除按钮并确认删除目标
- 修改 GoalCard 组件，使用 Swipeable 组件包装卡片内容，支持删除操作
- 更新目标列表页面，集成删除目标的逻辑，确保与 Redux 状态管理一致
- 添加开发模式下的模拟数据，方便测试删除功能
- 更新相关文档，详细描述左滑删除功能的实现和使用方法

components/GoalCard.tsx

@@ -1,197 +1,289 @@
-import { Colors } from '@/constants/Colors';
-import { useColorScheme } from '@/hooks/useColorScheme';
-import { Ionicons } from '@expo/vector-icons';
-import dayjs from 'dayjs';
-import React from 'react';
-import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-
-export interface GoalItem {
-  id: string;
-  title: string;
-  description?: string;
-  time: string;
-  category: 'workout' | 'finance' | 'personal' | 'work' | 'health';
-  priority?: 'high' | 'medium' | 'low';
-}
+import { GoalListItem } from '@/types/goals';
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import React, { useRef } from 'react';
+import { Alert, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Swipeable } from 'react-native-gesture-handler';
 
 interface GoalCardProps {
-  item: GoalItem;
-  onPress?: (item: GoalItem) => void;
+  goal: GoalListItem;
+  onPress?: (goal: GoalListItem) => void;
+  onDelete?: (goalId: string) => void;
+  showStatus?: boolean;
 }
 
-const { width: screenWidth } = Dimensions.get('window');
-const CARD_WIDTH = (screenWidth - 60) * 0.65; // 显示1.5张卡片
+export const GoalCard: React.FC<GoalCardProps> = ({ 
+  goal, 
+  onPress, 
+  onDelete,
+  showStatus = true 
+}) => {
+  const swipeableRef = useRef<Swipeable>(null);
 
-const getCategoryIcon = (category: GoalItem['category']) => {
-  switch (category) {
-    case 'workout':
-      return 'fitness-outline';
-    case 'finance':
-      return 'card-outline';
-    case 'personal':
-      return 'person-outline';
-    case 'work':
-      return 'briefcase-outline';
-    case 'health':
-      return 'heart-outline';
-    default:
-      return 'checkmark-circle-outline';
-  }
-};
+  // 获取重复类型显示文本
+  const getRepeatTypeText = (goal: GoalListItem) => {
+    switch (goal.repeatType) {
+      case 'daily':
+        return '每日';
+      case 'weekly':
+        return '每周';
+      case 'monthly':
+        return '每月';
+      default:
+        return '每日';
+    }
+  };
 
-const getCategoryColor = (category: GoalItem['category']) => {
-  switch (category) {
-    case 'workout':
-      return '#FF6B6B';
-    case 'finance':
-      return '#4ECDC4';
-    case 'personal':
-      return '#45B7D1';
-    case 'work':
-      return '#96CEB4';
-    case 'health':
-      return '#FFEAA7';
-    default:
-      return '#DDA0DD';
-  }
-};
+  // 获取目标状态显示文本
+  const getStatusText = (goal: GoalListItem) => {
+    switch (goal.status) {
+      case 'active':
+        return '进行中';
+      case 'paused':
+        return '已暂停';
+      case 'completed':
+        return '已完成';
+      case 'cancelled':
+        return '已取消';
+      default:
+        return '进行中';
+    }
+  };
 
-const getPriorityColor = (priority: GoalItem['priority']) => {
-  switch (priority) {
-    case 'high':
-      return '#FF4757';
-    case 'medium':
-      return '#FFA502';
-    case 'low':
-      return '#2ED573';
-    default:
-      return '#747D8C';
-  }
-};
+  // 获取目标状态颜色
+  const getStatusColor = (goal: GoalListItem) => {
+    switch (goal.status) {
+      case 'active':
+        return '#10B981';
+      case 'paused':
+        return '#F59E0B';
+      case 'completed':
+        return '#3B82F6';
+      case 'cancelled':
+        return '#EF4444';
+      default:
+        return '#10B981';
+    }
+  };
 
-export function GoalCard({ item, onPress }: GoalCardProps) {
-  const theme = useColorScheme() ?? 'light';
-  const colorTokens = Colors[theme];
+  // 获取目标图标
+  const getGoalIcon = (goal: GoalListItem) => {
+    // 根据目标类别或标题返回不同的图标
+    const title = goal.title.toLowerCase();
+    const category = goal.category?.toLowerCase();
+    
+    if (title.includes('运动') || title.includes('健身') || title.includes('跑步')) {
+      return 'fitness-center';
+    } else if (title.includes('喝水') || title.includes('饮水')) {
+      return 'local-drink';
+    } else if (title.includes('睡眠') || title.includes('睡觉')) {
+      return 'bedtime';
+    } else if (title.includes('学习') || title.includes('读书')) {
+      return 'school';
+    } else if (title.includes('冥想') || title.includes('放松')) {
+      return 'self-improvement';
+    } else if (title.includes('早餐') || title.includes('午餐') || title.includes('晚餐')) {
+      return 'restaurant';
+    } else {
+      return 'flag';
+    }
+  };
 
-  const categoryColor = getCategoryColor(item.category);
-  const categoryIcon = getCategoryIcon(item.category);
-  const priorityColor = getPriorityColor(item.priority);
+  // 处理删除操作
+  const handleDelete = () => {
+    Alert.alert(
+      '确认删除',
+      `确定要删除目标"${goal.title}"吗？此操作无法撤销。`,
+      [
+        {
+          text: '取消',
+          style: 'cancel',
+        },
+        {
+          text: '删除',
+          style: 'destructive',
+          onPress: () => {
+            onDelete?.(goal.id);
+            swipeableRef.current?.close();
+          },
+        },
+      ]
+    );
+  };
 
-  const timeFormatted = dayjs(item.time).format('HH:mm');
+  // 渲染删除按钮
+  const renderRightActions = () => {
+    return (
+      <TouchableOpacity
+        style={styles.deleteButton}
+        onPress={handleDelete}
+        activeOpacity={0.8}
+      >
+        <MaterialIcons name="delete" size={24} color="#EF4444" />
+      </TouchableOpacity>
+    );
+  };
 
   return (
-    <TouchableOpacity
-      style={[styles.container, { backgroundColor: colorTokens.card }]}
-      onPress={() => onPress?.(item)}
-      activeOpacity={0.8}
+    <Swipeable
+      ref={swipeableRef}
+      renderRightActions={renderRightActions}
+      rightThreshold={40}
+      overshootRight={false}
     >
-      {/* 顶部标签和优先级 */}
-      <View style={styles.header}>
-        <View style={[styles.categoryBadge, { backgroundColor: categoryColor }]}>
-          <Ionicons name={categoryIcon as any} size={12} color="#fff" />
-          <Text style={styles.categoryText}>{item.category}</Text>
+      <TouchableOpacity
+        style={styles.goalCard}
+        onPress={() => onPress?.(goal)}
+        activeOpacity={0.7}
+      >
+        {/* 左侧图标 */}
+        <View style={styles.goalIcon}>
+          <MaterialIcons name={getGoalIcon(goal)} size={20} color="#7A5AF8" />
+          <View style={styles.iconStars}>
+            <View style={styles.star} />
+            <View style={styles.star} />
+          </View>
         </View>
 
-        {item.priority && (
-          <View style={[styles.priorityDot, { backgroundColor: priorityColor }]} />
-        )}
-      </View>
-
-      {/* 主要内容 */}
-      <View style={styles.content}>
-        <Text style={[styles.title, { color: colorTokens.text }]} numberOfLines={2}>
-          {item.title}
-        </Text>
-
-        {item.description && (
-          <Text style={[styles.description, { color: colorTokens.textSecondary }]} numberOfLines={2}>
-            {item.description}
+        {/* 中间内容 */}
+        <View style={styles.goalContent}>
+          <Text style={styles.goalTitle} numberOfLines={1}>
+            {goal.title}
           </Text>
-        )}
-      </View>
+          
+          {/* 底部信息行 */}
+          <View style={styles.goalInfo}>
+            {/* 积分 */}
+            <View style={styles.infoItem}>
+              <Text style={styles.infoText}>+1</Text>
+            </View>
 
-      {/* 底部时间 */}
-      <View style={styles.footer}>
-        <View style={styles.timeContainer}>
-          <Ionicons
-            name='time-outline'
-            size={14}
-            color={colorTokens.textMuted}
-          />
-          <Text style={[styles.timeText, { color: colorTokens.textMuted }]}>
-            {timeFormatted}
-          </Text>
+            {/* 目标数量 */}
+            <View style={styles.infoItem}>
+              <Text style={styles.infoText}>
+                {goal.targetCount || goal.frequency}
+              </Text>
+            </View>
+
+            {/* 提醒图标（如果有提醒） */}
+            {goal.hasReminder && (
+              <View style={styles.infoItem}>
+                <MaterialIcons name="notifications" size={12} color="#9CA3AF" />
+              </View>
+            )}
+
+            {/* 提醒时间（如果有提醒） */}
+            {goal.hasReminder && goal.reminderTime && (
+              <View style={styles.infoItem}>
+                <Text style={styles.infoText}>{goal.reminderTime}</Text>
+              </View>
+            )}
+
+            {/* 重复图标 */}
+            <View style={styles.infoItem}>
+              <MaterialIcons name="loop" size={12} color="#9CA3AF" />
+            </View>
+
+            {/* 重复类型 */}
+            <View style={styles.infoItem}>
+              <Text style={styles.infoText}>{getRepeatTypeText(goal)}</Text>
+            </View>
+          </View>
         </View>
-      </View>
-    </TouchableOpacity>
+
+        {/* 右侧状态指示器 */}
+        {showStatus && (
+          <View style={[styles.statusIndicator, { backgroundColor: getStatusColor(goal) }]}>
+            <Text style={styles.statusText}>{getStatusText(goal)}</Text>
+          </View>
+        )}
+      </TouchableOpacity>
+    </Swipeable>
   );
-}
+};
 
 const styles = StyleSheet.create({
-  container: {
-    width: CARD_WIDTH,
-    height: 140,
-    marginHorizontal: 8,
-    borderRadius: 20,
+  goalCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#FFFFFF',
+    borderRadius: 16,
     padding: 16,
-    elevation: 6,
+    marginBottom: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 8,
+    elevation: 2,
+  },
+  goalIcon: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: '#F3F4F6',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12,
     position: 'relative',
   },
-  header: {
+  iconStars: {
+    position: 'absolute',
+    top: -2,
+    right: -2,
     flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 12,
+    gap: 1,
   },
-  categoryBadge: {
+  star: {
+    width: 4,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: '#FFFFFF',
+  },
+  goalContent: {
+    flex: 1,
+    marginRight: 12,
+  },
+  goalTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#1F2937',
+    marginBottom: 8,
+  },
+  goalInfo: {
     flexDirection: 'row',
     alignItems: 'center',
+    gap: 8,
+  },
+  infoItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  infoText: {
+    fontSize: 12,
+    color: '#9CA3AF',
+    fontWeight: '500',
+  },
+  statusIndicator: {
     paddingHorizontal: 8,
     paddingVertical: 4,
     borderRadius: 12,
-    backgroundColor: '#4ECDC4',
+    minWidth: 60,
+    alignItems: 'center',
   },
-  categoryText: {
+  statusText: {
     fontSize: 10,
+    color: '#FFFFFF',
     fontWeight: '600',
-    color: '#fff',
-    marginLeft: 4,
-    textTransform: 'capitalize',
   },
-  priorityDot: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    backgroundColor: '#FF4757',
-  },
-  content: {
-    flex: 1,
+  deleteButton: {
+    width: 60,
+    height: '100%',
     justifyContent: 'center',
-  },
-  title: {
-    fontSize: 16,
-    fontWeight: '700',
-    lineHeight: 20,
-    marginBottom: 4,
-  },
-  description: {
-    fontSize: 12,
-    lineHeight: 16,
-    opacity: 0.7,
-  },
-  footer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginTop: 12,
-  },
-  timeContainer: {
-    flexDirection: 'row',
     alignItems: 'center',
   },
-  timeText: {
+  deleteButtonText: {
+    color: '#FFFFFF',
     fontSize: 12,
-    fontWeight: '500',
-    marginLeft: 4,
+    fontWeight: '600',
+    marginTop: 4,
   },
 });