feat: 新增任务管理功能及相关组件

- 将目标页面改为任务列表，支持任务的创建、完成和跳过功能
- 新增任务卡片和任务进度卡片组件，展示任务状态和进度
- 实现任务数据的获取和管理，集成Redux状态管理
- 更新API服务，支持任务相关的CRUD操作
- 编写任务管理功能实现文档，详细描述功能和组件架构

components/TimelineSchedule.tsx

@@ -111,9 +111,7 @@ export function TimelineSchedule({ events, selectedDate, onEventPress }: Timelin
             height,
             left: TIME_LABEL_WIDTH + 24 + leftOffset, // 调整左偏移对齐
             width: eventWidth - 8, // 增加卡片间距
-            backgroundColor: event.isCompleted
-              ? `${categoryColor}40`
-              : `${categoryColor}80`,
+            backgroundColor: '#FFFFFF', // 白色背景
             borderLeftColor: categoryColor,
           }
         ]}
@@ -121,29 +119,57 @@ export function TimelineSchedule({ events, selectedDate, onEventPress }: Timelin
         activeOpacity={0.7}
       >
         <View style={styles.eventContent}>
-          <Text
-            style={[
-              styles.eventTitle,
-              {
-                color: event.isCompleted ? colorTokens.textMuted : colorTokens.text,
-                textDecorationLine: event.isCompleted ? 'line-through' : 'none'
-              }
-            ]}
-            numberOfLines={shouldShowTimeRange ? 1 : 2} // 当显示时间时，标题只显示1行
-          >
-            {event.title}
-          </Text>
-
-          {shouldShowTimeRange && (
-            <Text style={[styles.eventTime, { color: colorTokens.textSecondary }]}>
-              {dayjs(event.startTime).format('HH:mm')}
-              {event.endTime && ` - ${dayjs(event.endTime).format('HH:mm')}`}
+          {/* 顶部行：标题和分类标签 */}
+          <View style={styles.eventHeader}>
+            <Text
+              style={[
+                styles.eventTitle,
+                {
+                  color: event.isCompleted ? colorTokens.textMuted : '#2C3E50',
+                  textDecorationLine: event.isCompleted ? 'line-through' : 'none',
+                  flex: 1,
+                }
+              ]}
+              numberOfLines={1}
+            >
+              {event.title}
             </Text>
+            <View style={[styles.categoryTag, { backgroundColor: `${categoryColor}20` }]}>
+              <Text style={[styles.categoryText, { color: categoryColor }]}>
+                {event.category === 'workout' ? '运动' :
+                  event.category === 'finance' ? '财务' :
+                    event.category === 'personal' ? '个人' :
+                      event.category === 'work' ? '工作' :
+                        event.category === 'health' ? '健康' : '其他'}
+              </Text>
+            </View>
+          </View>
+
+          {/* 底部行：时间和图标 */}
+          {shouldShowTimeRange && (
+            <View style={styles.eventFooter}>
+              <View style={styles.timeContainer}>
+                <Ionicons name="time-outline" size={14} color="#8E8E93" />
+                <Text style={styles.eventTime}>
+                  {dayjs(event.startTime).format('HH:mm A')}
+                </Text>
+              </View>
+
+              <View style={styles.iconContainer}>
+                {event.isCompleted ? (
+                  <Ionicons name="checkmark-circle" size={16} color="#34C759" />
+                ) : (
+                  <Ionicons name="star" size={16} color="#FF9500" />
+                )}
+                <Ionicons name="attach" size={16} color="#8E8E93" />
+              </View>
+            </View>
           )}
 
-          {event.isCompleted && (
+          {/* 完成状态指示 */}
+          {event.isCompleted && !shouldShowTimeRange && (
             <View style={styles.completedIcon}>
-              <Ionicons name="checkmark-circle" size={16} color={categoryColor} />
+              <Ionicons name="checkmark-circle" size={16} color="#34C759" />
             </View>
           )}
         </View>
@@ -301,32 +327,62 @@ const styles = StyleSheet.create({
   },
   eventContainer: {
     position: 'absolute',
-    borderRadius: 8,
-    borderLeftWidth: 4,
+    borderRadius: 12,
+    borderLeftWidth: 0,
     shadowColor: '#000',
     shadowOffset: {
       width: 0,
       height: 2,
     },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 3,
+    shadowOpacity: 0.08,
+    shadowRadius: 6,
+    elevation: 4,
   },
   eventContent: {
     flex: 1,
-    padding: 8,
+    padding: 12,
     justifyContent: 'space-between',
-
+  },
+  eventHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 8,
   },
   eventTitle: {
-    fontSize: 12,
+    fontSize: 14,
+    fontWeight: '700',
+    lineHeight: 18,
+    flex: 1,
+  },
+  categoryTag: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 12,
+  },
+  categoryText: {
+    fontSize: 11,
     fontWeight: '600',
-    lineHeight: 16,
+  },
+  eventFooter: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  timeContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
   },
   eventTime: {
-    fontSize: 10,
+    fontSize: 12,
     fontWeight: '500',
-    marginTop: 2,
+    marginLeft: 6,
+    color: '#8E8E93',
+  },
+  iconContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
   },
   completedIcon: {
     position: 'absolute',