feat: 增强任务管理功能，新增任务筛选和状态统计组件

- 在目标页面中集成任务筛选标签，支持按状态（全部、待完成、已完成）过滤任务
- 更新任务卡片，展示任务状态和优先级信息
- 新增任务进度卡片，统计各状态任务数量
- 优化空状态展示，根据筛选条件动态显示提示信息
- 引入新图标和图片资源，提升界面视觉效果

components/TaskCard.tsx

@@ -1,8 +1,9 @@
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 import { TaskListItem } from '@/types/goals';
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
 import React from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 interface TaskCardProps {
   task: TaskListItem;
@@ -50,28 +51,39 @@ export const TaskCard: React.FC<TaskCardProps> = ({
     }
   };
 
-  const getCategoryColor = (category?: string) => {
-    if (!category) return '#6B7280';
-    if (category.includes('运动') || category.includes('健身')) return '#EF4444';
-    if (category.includes('工作')) return '#3B82F6';
-    if (category.includes('健康')) return '#10B981';
-    if (category.includes('财务')) return '#F59E0B';
-    return '#6B7280';
+  const getPriorityColor = (status: string) => {
+    switch (status) {
+      case 'overdue':
+        return '#EF4444'; // High - 过期任务
+      case 'in_progress':
+        return '#F59E0B'; // Medium - 进行中
+      case 'completed':
+        return '#10B981'; // Low - 已完成
+      default:
+        return '#6B7280'; // Default - 待开始
+    }
   };
 
+  const getPriorityText = (status: string) => {
+    switch (status) {
+      case 'overdue':
+        return '高';
+      case 'in_progress':
+        return '中';
+      case 'completed':
+        return '低';
+      default:
+        return '';
+    }
+  };
+
+
+
   const formatDate = (dateString: string) => {
     const date = new Date(dateString);
-    const today = new Date();
-    const tomorrow = new Date(today);
-    tomorrow.setDate(tomorrow.getDate() + 1);
-
-    if (date.toDateString() === today.toDateString()) {
-      return '今天';
-    } else if (date.toDateString() === tomorrow.toDateString()) {
-      return '明天';
-    } else {
-      return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' });
-    }
+    const month = date.toLocaleDateString('zh-CN', { month: 'short' });
+    const day = date.getDate();
+    return `${day} ${month}`;
   };
 
   return (
@@ -80,71 +92,74 @@ export const TaskCard: React.FC<TaskCardProps> = ({
       onPress={() => onPress?.(task)}
       activeOpacity={0.7}
     >
+      {/* 头部区域 */}
       <View style={styles.header}>
-        <View style={styles.titleContainer}>
+        <View style={styles.titleSection}>
+          <View style={styles.iconContainer}>
+            <Image
+              source={require('@/assets/images/task/iconTaskHeader.png')}
+              style={styles.taskIcon}
+              resizeMode="contain"
+            />
+          </View>
           <Text style={[styles.title, { color: colorTokens.text }]} numberOfLines={2}>
             {task.title}
           </Text>
-          {task.goal?.category && (
-            <View style={[styles.categoryTag, { backgroundColor: getCategoryColor(task.goal.category) }]}>
-              <Text style={styles.categoryText}>{task.goal?.category}</Text>
-            </View>
-          )}
-        </View>
-        <View style={[styles.statusTag, { backgroundColor: getStatusColor(task.status) }]}>
-          <Text style={styles.statusText}>{getStatusText(task.status)}</Text>
         </View>
       </View>
 
-      {task.description && (
-        <Text style={[styles.description, { color: colorTokens.textSecondary }]} numberOfLines={2}>
-          {task.description}
-        </Text>
-      )}
-
-      <View style={styles.progressContainer}>
-        <View style={styles.progressInfo}>
-          <Text style={[styles.progressText, { color: colorTokens.textSecondary }]}>
-            进度: {task.currentCount}/{task.targetCount}
-          </Text>
-          <Text style={[styles.progressText, { color: colorTokens.textSecondary }]}>
-            {task.progressPercentage}%
-          </Text>
+      {/* 状态和优先级标签 */}
+      <View style={styles.tagsContainer}>
+        <View style={styles.statusTag}>
+          <MaterialIcons name="schedule" size={12} color="#6B7280" />
+          <Text style={styles.statusTagText}>{getStatusText(task.status)}</Text>
         </View>
-        <View style={[styles.progressBar, { backgroundColor: colorTokens.border }]}>
-          <View
-            style={[
-              styles.progressFill,
-              {
-                width: `${task.progressPercentage}%`,
-                backgroundColor: getStatusColor(task.status),
-              },
-            ]}
-          />
+        <View style={[styles.priorityTag, { backgroundColor: getPriorityColor(task.status) }]}>
+          <MaterialIcons name="flag" size={12} color="#FFFFFF" />
+          <Text style={styles.priorityTagText}>{getPriorityText(task.status)}</Text>
         </View>
       </View>
 
+      {/* 进度条 */}
+      <View style={styles.progressBar}>
+        <View
+          style={[
+            styles.progressFill,
+            {
+              width: `${Math.min(task.progressPercentage, 100)}%`,
+              backgroundColor: colorTokens.primary,
+            },
+          ]}
+        />
+      </View>
+
+      {/* 底部信息 */}
       <View style={styles.footer}>
-        <Text style={[styles.dateText, { color: colorTokens.textSecondary }]}>
-          {formatDate(task.startDate)}
-        </Text>
-
-        {task.status === 'pending' || task.status === 'in_progress' ? (
-          <View style={styles.actionButtons}>
-            <TouchableOpacity
-              style={[styles.actionButton, styles.skipButton]}
-              onPress={() => onSkip?.(task)}
-            >
-              <Text style={styles.skipButtonText}>跳过</Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              style={[styles.actionButton, styles.completeButton]}
-              onPress={() => onComplete?.(task)}
-            >
-              <Text style={styles.completeButtonText}>完成</Text>
-            </TouchableOpacity>
+        <View style={styles.teamSection}>
+          {/* 模拟团队成员头像 */}
+          <View style={styles.avatars}>
+            <View style={[styles.avatar, { backgroundColor: '#FBBF24' }]}>
+              <Text style={styles.avatarText}>A</Text>
+            </View>
+            <View style={[styles.avatar, { backgroundColor: '#34D399' }]}>
+              <Text style={styles.avatarText}>B</Text>
+            </View>
+            <View style={[styles.avatar, { backgroundColor: '#60A5FA' }]}>
+              <Text style={styles.avatarText}>C</Text>
+            </View>
           </View>
-        ) : null}
+        </View>
+
+        <View style={styles.infoSection}>
+          <View style={styles.infoTag}>
+            <MaterialIcons name="event" size={12} color="#6B7280" />
+            <Text style={styles.infoTagText}>{formatDate(task.startDate)}</Text>
+          </View>
+          <View style={styles.infoTag}>
+            <MaterialIcons name="chat-bubble-outline" size={12} color="#6B7280" />
+            <Text style={styles.infoTagText}>2</Text>
+          </View>
+        </View>
       </View>
     </TouchableOpacity>
   );
@@ -162,99 +177,119 @@ const styles = StyleSheet.create({
     elevation: 3,
   },
   header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'flex-start',
-    marginBottom: 8,
+    marginBottom: 12,
   },
-  titleContainer: {
-    flex: 1,
-    marginRight: 8,
+  titleSection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  iconContainer: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: '#7A5AF8',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+  },
+  taskIcon: {
+    width: 20,
+    height: 20,
   },
   title: {
     fontSize: 16,
     fontWeight: '600',
-    marginBottom: 4,
+    lineHeight: 22,
+    flex: 1,
   },
-  categoryTag: {
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 12,
-    alignSelf: 'flex-start',
-  },
-  categoryText: {
-    color: '#FFFFFF',
-    fontSize: 12,
-    fontWeight: '500',
+  tagsContainer: {
+    flexDirection: 'row',
+    gap: 8,
+    marginBottom: 12,
   },
   statusTag: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 12,
+    backgroundColor: '#F3F4F6',
+  },
+  statusTagText: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: '#374151',
+  },
+  priorityTag: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
     paddingHorizontal: 8,
     paddingVertical: 4,
     borderRadius: 12,
   },
-  statusText: {
+  priorityTagText: {
+    fontSize: 12,
+    fontWeight: '500',
     color: '#FFFFFF',
-    fontSize: 12,
-    fontWeight: '500',
-  },
-  description: {
-    fontSize: 14,
-    marginBottom: 12,
-    lineHeight: 20,
-  },
-  progressContainer: {
-    marginBottom: 12,
-  },
-  progressInfo: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 6,
-  },
-  progressText: {
-    fontSize: 12,
-    fontWeight: '500',
   },
   progressBar: {
-    height: 6,
-    borderRadius: 3,
+    height: 2,
+    backgroundColor: '#E5E7EB',
+    borderRadius: 1,
+    marginBottom: 16,
     overflow: 'hidden',
   },
   progressFill: {
     height: '100%',
-    borderRadius: 3,
+    borderRadius: 1,
   },
   footer: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
   },
-  dateText: {
-    fontSize: 12,
-    fontWeight: '500',
+  teamSection: {
+    flexDirection: 'row',
+    alignItems: 'center',
   },
-  actionButtons: {
+  avatars: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  avatar: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: -8,
+    borderWidth: 2,
+    borderColor: '#FFFFFF',
+  },
+  avatarText: {
+    fontSize: 10,
+    fontWeight: '600',
+    color: '#FFFFFF',
+  },
+  infoSection: {
     flexDirection: 'row',
     gap: 8,
   },
-  actionButton: {
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 16,
-  },
-  skipButton: {
+  infoTag: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 12,
     backgroundColor: '#F3F4F6',
   },
-  skipButtonText: {
-    color: '#6B7280',
-    fontSize: 12,
-    fontWeight: '500',
-  },
-  completeButton: {
-    backgroundColor: '#10B981',
-  },
-  completeButtonText: {
-    color: '#FFFFFF',
+  infoTagText: {
     fontSize: 12,
     fontWeight: '500',
+    color: '#374151',
   },
 });

components/TaskFilterTabs.tsx

@@ -0,0 +1,175 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+export type TaskFilterType = 'all' | 'pending' | 'completed';
+
+interface TaskFilterTabsProps {
+  selectedFilter: TaskFilterType;
+  onFilterChange: (filter: TaskFilterType) => void;
+  taskCounts: {
+    all: number;
+    pending: number;
+    completed: number;
+  };
+}
+
+export const TaskFilterTabs: React.FC<TaskFilterTabsProps> = ({
+  selectedFilter,
+  onFilterChange,
+  taskCounts,
+}) => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.tabContainer}>
+        {/* 全部 Tab */}
+        <TouchableOpacity
+          style={[
+            styles.tab,
+            selectedFilter === 'all' && styles.activeTab
+          ]}
+          onPress={() => onFilterChange('all')}
+        >
+          <Text style={[
+            styles.tabText,
+            selectedFilter === 'all' && styles.activeTabText
+          ]}>
+            全部
+          </Text>
+          <View style={[
+            styles.badge,
+            selectedFilter === 'all' ? styles.activeBadge : styles.inactiveBadge
+          ]}>
+            <Text style={[
+              styles.badgeText,
+              selectedFilter === 'all' && styles.activeBadgeText
+            ]}>
+              {taskCounts.all}
+            </Text>
+          </View>
+        </TouchableOpacity>
+
+        {/* 待完成 Tab */}
+        <TouchableOpacity
+          style={[
+            styles.tab,
+            selectedFilter === 'pending' && styles.activeTab
+          ]}
+          onPress={() => onFilterChange('pending')}
+        >
+          <Text style={[
+            styles.tabText,
+            selectedFilter === 'pending' && styles.activeTabText
+          ]}>
+            待完成
+          </Text>
+          <View style={[
+            styles.badge,
+            selectedFilter === 'pending' ? styles.activeBadge : styles.inactiveBadge
+          ]}>
+            <Text style={[
+              styles.badgeText,
+              selectedFilter === 'pending' && styles.activeBadgeText
+            ]}>
+              {taskCounts.pending}
+            </Text>
+          </View>
+        </TouchableOpacity>
+
+        {/* 已完成 Tab */}
+        <TouchableOpacity
+          style={[
+            styles.tab,
+            selectedFilter === 'completed' && styles.activeTab
+          ]}
+          onPress={() => onFilterChange('completed')}
+        >
+          <Text style={[
+            styles.tabText,
+            selectedFilter === 'completed' && styles.activeTabText
+          ]}>
+            已完成
+          </Text>
+          <View style={[
+            styles.badge,
+            selectedFilter === 'completed' ? styles.activeBadge : styles.inactiveBadge
+          ]}>
+            <Text style={[
+              styles.badgeText,
+              selectedFilter === 'completed' && styles.activeBadgeText
+            ]}>
+              {taskCounts.completed}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 20,
+  },
+  tabContainer: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 24,
+    padding: 4,
+    flexDirection: 'row',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 1,
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+  },
+  tab: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    borderRadius: 20,
+    gap: 6,
+  },
+  activeTab: {
+    backgroundColor: '#7A5AF8',
+    shadowColor: '#7A5AF8',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  tabText: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#374151',
+  },
+  activeTabText: {
+    color: '#FFFFFF',
+    fontWeight: '600',
+  },
+  badge: {
+    minWidth: 20,
+    height: 20,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 6,
+  },
+  inactiveBadge: {
+    backgroundColor: '#E5E7EB',
+  },
+  activeBadge: {
+    backgroundColor: '#EF4444',
+  },
+  badgeText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#374151',
+  },
+  activeBadgeText: {
+    color: '#FFFFFF',
+  },
+});

components/TaskProgressCard.tsx

@@ -1,140 +1,139 @@
 import { TaskListItem } from '@/types/goals';
-import React from 'react';
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import React, { ReactNode } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 interface TaskProgressCardProps {
   tasks: TaskListItem[];
+  headerButtons?: ReactNode;
 }
 
 export const TaskProgressCard: React.FC<TaskProgressCardProps> = ({
   tasks,
+  headerButtons,
 }) => {
-  // 计算今日任务完成进度
-  const todayTasks = tasks.filter(task => task.isToday);
-  const completedTodayTasks = todayTasks.filter(task => task.status === 'completed');
-  const progressPercentage = todayTasks.length > 0
-    ? Math.round((completedTodayTasks.length / todayTasks.length) * 100)
-    : 0;
-
-  // 计算进度角度
-  const progressAngle = (progressPercentage / 100) * 360;
+  // 计算各状态的任务数量
+  const pendingTasks = tasks.filter(task => task.status === 'pending');
+  const completedTasks = tasks.filter(task => task.status === 'completed');
+  const skippedTasks = tasks.filter(task => task.status === 'skipped');
 
   return (
     <View style={styles.container}>
-      {/* 左侧内容 */}
-      <View style={styles.leftContent}>
-        <View style={styles.textContainer}>
-          <Text style={styles.title}>今日目标</Text>
-          <Text style={styles.subtitle}>加油，快完成啦!</Text>
+      {/* 标题区域 */}
+      <View style={styles.header}>
+        <View style={styles.titleContainer}>
+          <Text style={styles.title}>任务状态统计</Text>
+          <Text style={styles.subtitle}>各状态任务数量分布</Text>
         </View>
-
+        {headerButtons && (
+          <View style={styles.headerButtons}>
+            {headerButtons}
+          </View>
+        )}
       </View>
 
-      {/* 右侧进度圆环 */}
-      <View style={styles.progressContainer}>
-        {/* 背景圆环 */}
-        <View style={[styles.progressCircle, styles.progressBackground]} />
-
-        {/* 进度圆环 */}
-        <View style={[styles.progressCircle, styles.progressFill]}>
-          <View
-            style={[
-              styles.progressArc,
-              {
-                width: 68,
-                height: 68,
-                borderRadius: 34,
-                borderWidth: 6,
-                borderColor: '#8B5CF6',
-                borderTopColor: progressAngle > 0 ? '#8B5CF6' : 'transparent',
-                borderRightColor: progressAngle > 90 ? '#8B5CF6' : 'transparent',
-                borderBottomColor: progressAngle > 180 ? '#8B5CF6' : 'transparent',
-                borderLeftColor: progressAngle > 270 ? '#8B5CF6' : 'transparent',
-                transform: [{ rotate: '-90deg' }],
-              },
-            ]}
-          />
+      {/* 状态卡片区域 */}
+      <View style={styles.statusCards}>
+        {/* 待完成 卡片 */}
+        <View style={styles.statusCard}>
+          <View style={styles.cardHeader}>
+            <MaterialIcons name="pending" size={16} color="#7A5AF8" />
+            <Text style={styles.cardLabel} numberOfLines={1}>待完成</Text>
+          </View>
+          <Text style={styles.cardCount}>{pendingTasks.length}</Text>
         </View>
 
-        {/* 进度文字 */}
-        <View style={styles.progressTextContainer}>
-          <Text style={styles.progressText}>{progressPercentage}%</Text>
+        {/* 已完成 卡片 */}
+        <View style={styles.statusCard}>
+          <View style={styles.cardHeader}>
+            <MaterialIcons name="check-circle" size={16} color="#10B981" />
+            <Text style={styles.cardLabel} numberOfLines={1}>已完成</Text>
+          </View>
+          <Text style={styles.cardCount}>{completedTasks.length}</Text>
+        </View>
+
+        {/* 已跳过 卡片 */}
+        <View style={styles.statusCard}>
+          <View style={styles.cardHeader}>
+            <MaterialIcons name="skip-next" size={16} color="#6B7280" />
+            <Text style={styles.cardLabel} numberOfLines={1}>已跳过</Text>
+          </View>
+          <Text style={styles.cardCount}>{skippedTasks.length}</Text>
         </View>
       </View>
-
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: '#8B5CF6',
+    backgroundColor: '#FFFFFF',
     borderRadius: 16,
     padding: 20,
     marginHorizontal: 20,
     marginBottom: 20,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  header: {
+    marginBottom: 20,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+  },
+  titleContainer: {
+    flex: 1,
+  },
+  headerButtons: {
     flexDirection: 'row',
     alignItems: 'center',
-    position: 'relative',
-    shadowColor: '#8B5CF6',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.3,
-    shadowRadius: 8,
-    elevation: 8,
-  },
-  leftContent: {
-    flex: 1,
-    marginRight: 20,
-  },
-  textContainer: {
-    marginBottom: 16,
+    gap: 8,
   },
   title: {
-    color: '#FFFFFF',
-    fontSize: 16,
-    fontWeight: '600',
-    marginBottom: 2,
+    fontSize: 20,
+    fontWeight: '700',
+    color: '#1F2937',
+    marginBottom: 4,
   },
   subtitle: {
-    color: '#FFFFFF',
     fontSize: 14,
+    color: '#6B7280',
     fontWeight: '400',
-    opacity: 0.9,
   },
-  progressContainer: {
-    width: 80,
-    height: 80,
-    justifyContent: 'center',
+  statusCards: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    gap: 12,
+  },
+  statusCard: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+    borderRadius: 12,
+    padding: 12,
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+    alignItems: 'flex-start',
+    minHeight: 80,
+  },
+  cardHeader: {
+    flexDirection: 'row',
     alignItems: 'center',
-    position: 'relative',
+    marginBottom: 8,
+    gap: 6,
+    flexWrap: 'wrap',
   },
-  progressCircle: {
-    position: 'absolute',
-    width: 80,
-    height: 80,
-    borderRadius: 40,
+  cardLabel: {
+    fontSize: 11,
+    fontWeight: '500',
+    color: '#1F2937',
+    lineHeight: 14,
   },
-  progressBackground: {
-    borderWidth: 6,
-    borderColor: 'rgba(255, 255, 255, 0.3)',
-  },
-  progressFill: {
-    borderWidth: 6,
-    borderColor: 'transparent',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  progressArc: {
-    position: 'absolute',
-  },
-  progressTextContainer: {
-    position: 'absolute',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  progressText: {
-    color: '#FFFFFF',
-    fontSize: 16,
+  cardCount: {
+    fontSize: 24,
     fontWeight: '700',
+    color: '#1F2937',
   },
 });