feat: 新增目标页面引导功能及相关组件

- 在目标页面中集成用户引导功能，帮助用户了解页面各项功能
- 创建 GoalsPageGuide 组件，支持多步骤引导和动态高亮功能区域
- 实现引导状态的检查、标记和重置功能，确保用户体验
- 添加开发测试按钮，方便开发者重置引导状态
- 更新相关文档，详细描述引导功能的实现和使用方法

components/TaskCard.tsx

@@ -7,7 +7,7 @@ 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';
+import { Alert, Animated, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 interface TaskCardProps {
   task: TaskListItem;
@@ -21,6 +21,20 @@ export const TaskCard: React.FC<TaskCardProps> = ({
   const dispatch = useAppDispatch();
   const { showConfirm } = useGlobalDialog();
   const router = useRouter();
+  
+  // 创建进度条动画值
+  const progressAnimation = React.useRef(new Animated.Value(0)).current;
+  
+  // 当任务进度变化时，启动动画
+  React.useEffect(() => {
+    const targetProgress = task.progressPercentage > 0 ? Math.min(task.progressPercentage, 100) : 2;
+    
+    Animated.timing(progressAnimation, {
+      toValue: targetProgress,
+      duration: 800, // 动画持续时间800毫秒
+      useNativeDriver: false, // 因为我们要动画width属性，所以不能使用原生驱动
+    }).start();
+  }, [task.progressPercentage, progressAnimation]);
 
 
   const getStatusText = (status: string) => {
@@ -191,18 +205,15 @@ export const TaskCard: React.FC<TaskCardProps> = ({
 
       {/* 进度条 */}
       <View style={styles.progressBar}>
-        <View
+        <Animated.View
           style={[
             styles.progressFill,
             {
-              width: task.progressPercentage > 0 ? `${Math.min(task.progressPercentage, 100)}%` : '2%',
-              backgroundColor: task.progressPercentage >= 100 
-                ? '#10B981' 
-                : task.progressPercentage >= 50 
-                ? '#F59E0B' 
-                : task.progressPercentage > 0
-                ? colorTokens.primary
-                : '#E5E7EB',
+              width: progressAnimation.interpolate({
+                inputRange: [0, 100],
+                outputRange: ['0%', '100%'],
+              }),
+              backgroundColor: task.progressPercentage > 0 ? colorTokens.primary : '#E5E7EB',
             },
           ]}
         />