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

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

components/TimeTabSelector.tsx

@@ -0,0 +1,98 @@
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+export type TimeTabType = 'day' | 'week' | 'month';
+
+interface TimeTabSelectorProps {
+  selectedTab: TimeTabType;
+  onTabChange: (tab: TimeTabType) => void;
+}
+
+interface TabOption {
+  key: TimeTabType;
+  label: string;
+}
+
+const tabOptions: TabOption[] = [
+  { key: 'day', label: '按天' },
+  { key: 'week', label: '按周' },
+  { key: 'month', label: '按月' },
+];
+
+export function TimeTabSelector({ selectedTab, onTabChange }: TimeTabSelectorProps) {
+  const theme = useColorScheme() ?? 'light';
+  const colorTokens = Colors[theme];
+
+  return (
+    <View style={[styles.container]}>
+      <View style={[styles.tabContainer]}>
+        {tabOptions.map((option) => {
+          const isSelected = selectedTab === option.key;
+
+          return (
+            <TouchableOpacity
+              key={option.key}
+              style={[
+                styles.tab,
+                {
+                  backgroundColor: isSelected
+                    ? colorTokens.primary
+                    : 'transparent',
+                }
+              ]}
+              onPress={() => onTabChange(option.key)}
+              activeOpacity={0.7}
+            >
+              <Text
+                style={[
+                  styles.tabText,
+                  {
+                    color: isSelected
+                      ? 'white'
+                      : colorTokens.textSecondary,
+                    fontWeight: isSelected ? '700' : '500',
+                  }
+                ]}
+              >
+                {option.label}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+  },
+  tabContainer: {
+    flexDirection: 'row',
+    borderRadius: 12,
+    padding: 4,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  tab: {
+    paddingVertical: 12,
+    paddingHorizontal: 32,
+    borderRadius: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  tabText: {
+    fontSize: 14,
+    textAlign: 'center',
+  },
+});