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

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

app/(tabs)/goals.tsx

@@ -1,4 +1,6 @@
 import CreateGoalModal from '@/components/CreateGoalModal';
+import { GoalsPageGuide } from '@/components/GoalsPageGuide';
+import { GuideTestButton } from '@/components/GuideTestButton';
 import { TaskCard } from '@/components/TaskCard';
 import { TaskFilterTabs, TaskFilterType } from '@/components/TaskFilterTabs';
 import { TaskProgressCard } from '@/components/TaskProgressCard';
@@ -10,6 +12,7 @@ import { useColorScheme } from '@/hooks/useColorScheme';
 import { clearErrors, createGoal } from '@/store/goalsSlice';
 import { clearErrors as clearTaskErrors, fetchTasks, loadMoreTasks } from '@/store/tasksSlice';
 import { CreateGoalRequest, TaskListItem } from '@/types/goals';
+import { checkGuideCompleted, markGuideCompleted } from '@/utils/guideHelpers';
 import MaterialIcons from '@expo/vector-icons/MaterialIcons';
 import { useFocusEffect } from '@react-navigation/native';
 import dayjs from 'dayjs';
@@ -46,15 +49,32 @@ export default function GoalsScreen() {
   const [refreshing, setRefreshing] = useState(false);
   const [selectedFilter, setSelectedFilter] = useState<TaskFilterType>('all');
   const [modalKey, setModalKey] = useState(0); // 用于强制重新渲染弹窗
+  const [showGuide, setShowGuide] = useState(false); // 控制引导显示
 
   // 页面聚焦时重新加载数据
   useFocusEffect(
     useCallback(() => {
       console.log('useFocusEffect - loading tasks');
       loadTasks();
+      checkAndShowGuide();
     }, [dispatch])
   );
 
+  // 检查并显示用户引导
+  const checkAndShowGuide = async () => {
+    try {
+      const hasCompletedGuide = await checkGuideCompleted('GOALS_PAGE');
+      if (!hasCompletedGuide) {
+        // 延迟显示引导，确保页面完全加载
+        setTimeout(() => {
+          setShowGuide(true);
+        }, 1000);
+      }
+    } catch (error) {
+      console.error('检查引导状态失败:', error);
+    }
+  };
+
   // 加载任务列表
   const loadTasks = async () => {
     try {
@@ -182,6 +202,17 @@ export default function GoalsScreen() {
     setSelectedFilter(filter);
   };
 
+  // 处理引导完成
+  const handleGuideComplete = async () => {
+    try {
+      await markGuideCompleted('GOALS_PAGE');
+      setShowGuide(false);
+    } catch (error) {
+      console.error('保存引导状态失败:', error);
+      setShowGuide(false);
+    }
+  };
+
   // 渲染任务项
   const renderTaskItem = ({ item }: { item: TaskListItem }) => (
     <TaskCard
@@ -272,7 +303,7 @@ export default function GoalsScreen() {
         <View style={styles.header}>
           <View>
           <Text style={[styles.pageTitle, { color: '#FFFFFF' }]}>
-            等待完成
+            今日目标
           </Text>
           <Text style={[styles.pageTitle2, { color: '#FFFFFF' }]}>
             让我们检查你的目标！
@@ -290,6 +321,9 @@ export default function GoalsScreen() {
                   style={[styles.cardGoalsButton, { borderColor: colorTokens.primary }]}
                   onPress={handleNavigateToGoals}
                 >
+                  <Text style={[styles.cardGoalsButtonText, { color: colorTokens.primary }]}>
+                    回顾
+                  </Text>
                   <MaterialIcons name="flag" size={16} color={colorTokens.primary} />
                 </TouchableOpacity>
                 <TouchableOpacity
@@ -345,6 +379,16 @@ export default function GoalsScreen() {
           onSuccess={handleModalSuccess}
           loading={createLoading}
         />
+
+        {/* 目标页面引导 */}
+        <GoalsPageGuide
+          visible={showGuide}
+          onComplete={handleGuideComplete}
+          tasks={tasks}
+        />
+
+        {/* 开发测试按钮 */}
+        <GuideTestButton visible={__DEV__} />
       </View>
     </SafeAreaView>
   );
@@ -505,6 +549,11 @@ const styles = StyleSheet.create({
     backgroundColor: '#F3F4F6',
     borderWidth: 1,
   },
+  cardGoalsButtonText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#374151',
+  },
   cardAddButton: {
     width: 28,
     height: 28,