feat: 新增任务详情页面及相关功能

- 创建任务详情页面，展示任务的详细信息，包括状态、描述、优先级和进度
- 实现任务完成和跳过功能，用户可通过按钮操作更新任务状态
- 添加评论功能，用户可以对任务进行评论并发送
- 优化任务卡片，点击后可跳转至任务详情页面
- 更新相关样式，确保界面一致性和美观性

components/TaskCard.tsx

@@ -5,6 +5,7 @@ import { useColorScheme } from '@/hooks/useColorScheme';
 import { completeTask, skipTask } from '@/store/tasksSlice';
 import { TaskListItem } from '@/types/goals';
 import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import { useRouter } from 'expo-router';
 import React from 'react';
 import { Alert, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
@@ -19,6 +20,7 @@ export const TaskCard: React.FC<TaskCardProps> = ({
   const colorTokens = Colors[theme];
   const dispatch = useAppDispatch();
   const { showConfirm } = useGlobalDialog();
+  const router = useRouter();
 
 
   const getStatusText = (status: string) => {
@@ -123,6 +125,10 @@ export const TaskCard: React.FC<TaskCardProps> = ({
     );
   };
 
+  const handleTaskPress = () => {
+    router.push(`/task-detail?taskId=${task.id}`);
+  };
+
   const renderActionIcons = () => {
     if (task.status === 'completed' || task.status === 'overdue' || task.status === 'skipped') {
       return null;
@@ -158,7 +164,7 @@ export const TaskCard: React.FC<TaskCardProps> = ({
   return (
     <TouchableOpacity
       style={[styles.container, { backgroundColor: colorTokens.background }]}
-      onPress={() => {}}
+      onPress={handleTaskPress}
       activeOpacity={0.7}
     >
       {/* 头部区域 */}
@@ -205,23 +211,21 @@ export const TaskCard: React.FC<TaskCardProps> = ({
         )}
         {/* 进度百分比文本 */}
         <View style={styles.progressTextContainer}>
-          <Text style={styles.progressText}>{Math.round(task.progressPercentage)}%</Text>
+          <Text style={styles.progressText}>{task.currentCount}/{task.targetCount}</Text>
         </View>
       </View>
 
       {/* 底部信息 */}
       <View style={styles.footer}>
         <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 style={styles.avatar}>
+              <Image
+                source={require('@/assets/images/Sealife.jpeg')}
+                style={styles.avatarImage}
+                resizeMode="cover"
+              />
             </View>
           </View>
         </View>
@@ -395,17 +399,15 @@ const styles = StyleSheet.create({
   avatar: {
     width: 24,
     height: 24,
-    borderRadius: 12,
-    alignItems: 'center',
-    justifyContent: 'center',
+    borderRadius: 24,
     marginRight: -8,
     borderWidth: 2,
     borderColor: '#FFFFFF',
+    overflow: 'hidden',
   },
-  avatarText: {
-    fontSize: 10,
-    fontWeight: '600',
-    color: '#FFFFFF',
+  avatarImage: {
+    width: '100%',
+    height: '100%',
   },
   infoSection: {
     flexDirection: 'row',