feat: 新增目标管理功能及相关组件

- 创建目标管理演示页面，展示高保真的目标管理界面
- 实现待办事项卡片的横向滑动展示，支持时间筛选功能
- 新增时间轴组件，展示选中日期的具体任务
- 更新底部导航，添加目标管理和演示页面的路由
- 优化个人页面菜单项，提供目标管理的快速访问
- 编写目标管理功能实现文档，详细描述功能和组件架构

app/goal-demo.tsx

@@ -0,0 +1,202 @@
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+import { Ionicons } from '@expo/vector-icons';
+import { LinearGradient } from 'expo-linear-gradient';
+import { useRouter } from 'expo-router';
+import React from 'react';
+import { SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+export default function GoalDemoScreen() {
+  const router = useRouter();
+  const theme = useColorScheme() ?? 'light';
+  const colorTokens = Colors[theme];
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <LinearGradient
+        colors={[
+          colorTokens.backgroundGradientStart,
+          colorTokens.backgroundGradientEnd,
+        ]}
+        style={styles.backgroundGradient}
+      />
+
+      <View style={styles.content}>
+        <View style={styles.header}>
+          <TouchableOpacity
+            style={[styles.backButton, { backgroundColor: colorTokens.card }]}
+            onPress={() => router.back()}
+          >
+            <Ionicons name="arrow-back" size={24} color={colorTokens.text} />
+          </TouchableOpacity>
+
+          <Text style={[styles.title, { color: colorTokens.text }]}>
+            目标管理演示
+          </Text>
+        </View>
+
+        <View style={styles.demoContainer}>
+          <View style={[styles.demoCard, { backgroundColor: colorTokens.card }]}>
+            <View style={styles.iconContainer}>
+              <Ionicons name="flag" size={48} color={colorTokens.primary} />
+            </View>
+
+            <Text style={[styles.demoTitle, { color: colorTokens.text }]}>
+              智能目标管理系统
+            </Text>
+
+            <Text style={[styles.demoDescription, { color: colorTokens.textSecondary }]}>
+              体验高保真的目标管理界面，包含待办事项卡片滑动、时间筛选器和可滚动时间轴。界面完全按照您的需求设计，支持：
+            </Text>
+
+            <View style={styles.featureList}>
+              <View style={styles.featureItem}>
+                <Ionicons name="checkmark-circle" size={16} color={colorTokens.primary} />
+                <Text style={[styles.featureText, { color: colorTokens.textSecondary }]}>
+                  横向滑动的待办事项卡片（首屏1.5张）
+                </Text>
+              </View>
+
+              <View style={styles.featureItem}>
+                <Ionicons name="checkmark-circle" size={16} color={colorTokens.primary} />
+                <Text style={[styles.featureText, { color: colorTokens.textSecondary }]}>
+                  天/周/月时间筛选选择器
+                </Text>
+              </View>
+
+              <View style={styles.featureItem}>
+                <Ionicons name="checkmark-circle" size={16} color={colorTokens.primary} />
+                <Text style={[styles.featureText, { color: colorTokens.textSecondary }]}>
+                  可滚动的时间轴和任务显示
+                </Text>
+              </View>
+
+              <View style={styles.featureItem}>
+                <Ionicons name="checkmark-circle" size={16} color={colorTokens.primary} />
+                <Text style={[styles.featureText, { color: colorTokens.textSecondary }]}>
+                  支持同一时间多任务的左右上下滑动
+                </Text>
+              </View>
+            </View>
+
+            <TouchableOpacity
+              style={[styles.enterButton, { backgroundColor: colorTokens.primary }]}
+              onPress={() => router.push('/goals')}
+            >
+              <Text style={[styles.enterButtonText, { color: colorTokens.onPrimary }]}>
+                进入目标管理页面
+              </Text>
+              <Ionicons name="arrow-forward" size={20} color={colorTokens.onPrimary} />
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  backgroundGradient: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+  },
+  content: {
+    flex: 1,
+    padding: 20,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 30,
+    marginTop: 20,
+  },
+  backButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 16,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '800',
+  },
+  demoContainer: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  demoCard: {
+    borderRadius: 24,
+    padding: 32,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.15,
+    shadowRadius: 20,
+    elevation: 10,
+    alignItems: 'center',
+  },
+  iconContainer: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: '#E6F3FF',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 24,
+  },
+  demoTitle: {
+    fontSize: 24,
+    fontWeight: '700',
+    marginBottom: 16,
+    textAlign: 'center',
+  },
+  demoDescription: {
+    fontSize: 16,
+    lineHeight: 24,
+    textAlign: 'center',
+    marginBottom: 24,
+  },
+  featureList: {
+    alignSelf: 'stretch',
+    marginBottom: 32,
+  },
+  featureItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  featureText: {
+    fontSize: 14,
+    marginLeft: 8,
+    flex: 1,
+  },
+  enterButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 32,
+    paddingVertical: 16,
+    borderRadius: 28,
+    shadowColor: '#87CEEB',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 6,
+  },
+  enterButtonText: {
+    fontSize: 16,
+    fontWeight: '700',
+    marginRight: 8,
+  },
+});