feat: 添加AI体态评估页面及相关功能

- 新增AI体态评估页面，包含训练内容和统计信息
- 在首页中添加AI体态评估的导航链接
- 更新package-lock.json，调整依赖项的dev标记
- 修改布局文件以支持新页面的导航

app/(tabs)/index.tsx

@@ -4,6 +4,7 @@ import { ThemedText } from '@/components/ThemedText';
 import { ThemedView } from '@/components/ThemedView';
 import { WorkoutCard } from '@/components/WorkoutCard';
 import { getChineseGreeting } from '@/utils/date';
+import { useRouter } from 'expo-router';
 import React from 'react';
 import { SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
 
@@ -22,6 +23,7 @@ const workoutData = [
 ];
 
 export default function HomeScreen() {
+  const router = useRouter();
   return (
     <SafeAreaView style={styles.safeArea}>
       <ThemedView style={styles.container}>
@@ -51,7 +53,13 @@ export default function HomeScreen() {
                   title={workout.title}
                   duration={workout.duration}
                   imageSource={workout.imageSource}
-                  onPress={() => console.log(`Pressed ${workout.title}`)}
+                  onPress={() => {
+                    if (workout.title === 'AI体态评估') {
+                      router.push('/ai-posture-assessment');
+                    } else {
+                      console.log(`Pressed ${workout.title}`);
+                    }
+                  }}
                 />
               ))}
             </ScrollView>

app/_layout.tsx

@@ -21,6 +21,7 @@ export default function RootLayout() {
     <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
       <Stack>
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        <Stack.Screen name="ai-posture-assessment" options={{ headerShown: false }} />
         <Stack.Screen name="+not-found" />
       </Stack>
       <StatusBar style="auto" />

app/ai-posture-assessment.tsx

@@ -0,0 +1,347 @@
+import { Ionicons } from '@expo/vector-icons';
+import { useRouter } from 'expo-router';
+import React from 'react';
+import {
+  Image,
+  ImageBackground,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Colors } from '@/constants/Colors';
+
+type Exercise = {
+  id: string;
+  title: string;
+  duration: string;
+  imageUri: string;
+};
+
+const EXERCISES: Exercise[] = [
+  {
+    id: '1',
+    title: 'Jumping Jacks',
+    duration: '00:30',
+    imageUri:
+      'https://images.unsplash.com/photo-1546483875-ad9014c88eba?q=80&w=400&auto=format&fit=crop',
+  },
+  {
+    id: '2',
+    title: 'Squats',
+    duration: '00:45',
+    imageUri:
+      'https://images.unsplash.com/photo-1583454110551-21f2fa2f36f0?q=80&w=400&auto=format&fit=crop',
+  },
+  {
+    id: '3',
+    title: 'Backward Lunge',
+    duration: '00:40',
+    imageUri:
+      'https://images.unsplash.com/photo-1597074866923-5c3bfa3b6c46?q=80&w=400&auto=format&fit=crop',
+  },
+  {
+    id: '4',
+    title: 'High Knees',
+    duration: '00:30',
+    imageUri:
+      'https://images.unsplash.com/photo-1596357395104-5bcae0b1a5eb?q=80&w=400&auto=format&fit=crop',
+  },
+];
+
+export default function AIPostureAssessmentScreen() {
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+
+  const theme = Colors.dark; // 该页面采用深色视觉
+
+  return (
+    <View style={[styles.screen, { backgroundColor: theme.background }]}>
+      {/* Header */}
+      <View style={[styles.header, { paddingTop: insets.top + 8 }]}>
+        <TouchableOpacity
+          accessibilityRole="button"
+          onPress={() => router.back()}
+          style={styles.backButton}
+        >
+          <Ionicons name="chevron-back" size={24} color="#ECEDEE" />
+        </TouchableOpacity>
+        <Text style={styles.headerTitle}>AI体态评估</Text>
+        <View style={{ width: 32 }} />
+      </View>
+
+      <ScrollView
+        contentContainerStyle={{ paddingBottom: insets.bottom + 120 }}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* Hero */}
+        <View style={styles.heroContainer}>
+          <ImageBackground
+            source={{
+              uri:
+                'https://images.unsplash.com/photo-1594737625785-c6683fc87c73?q=80&w=1200&auto=format&fit=crop',
+            }}
+            style={styles.heroImage}
+            imageStyle={{ borderRadius: 28 }}
+          >
+            <View style={styles.heroOverlay} />
+          </ImageBackground>
+
+          {/* Floating stats */}
+          <View style={styles.statsFloating}>
+            <StatCard
+              icon={<Ionicons name="time-outline" size={18} color="#192126" />}
+              label="Time"
+              value="20 min"
+            />
+            <View style={styles.divider} />
+            <StatCard
+              icon={<Ionicons name="flame-outline" size={18} color="#192126" />}
+              label="Burn"
+              value="95 kcal"
+            />
+          </View>
+        </View>
+
+        {/* Title & description */}
+        <View style={styles.contentSection}>
+          <Text style={styles.title}>Lower Body Training</Text>
+          <Text style={styles.description}>
+            The lower abdomen and hips are the most difficult areas of the body to reduce when we are on
+            a diet. Even so, in this area, especially the legs as a whole, you can reduce weight even if
+            you don't use tools.
+          </Text>
+        </View>
+
+        {/* Rounds header */}
+        <View style={styles.roundsHeader}>
+          <Text style={styles.roundsTitle}>Rounds</Text>
+          <Text style={styles.roundsCount}>1/8</Text>
+        </View>
+
+        {/* Exercise list */}
+        <View style={{ gap: 14, marginHorizontal: 20 }}>
+          {EXERCISES.map((item) => (
+            <ExerciseItem key={item.id} exercise={item} />)
+          )}
+        </View>
+      </ScrollView>
+
+      {/* Bottom CTA */}
+      <View style={[styles.bottomCtaWrap, { paddingBottom: insets.bottom + 10 }]}>
+        <TouchableOpacity
+          activeOpacity={0.9}
+          onPress={() => { }}
+          style={[styles.bottomCta, { backgroundColor: theme.primary }]}
+        >
+          <Text style={styles.bottomCtaText}>Lets Workout</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+function StatCard({
+  icon,
+  label,
+  value,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+}) {
+  return (
+    <View style={styles.statCard}>
+      <View style={styles.statIconWrap}>{icon}</View>
+      <View style={{ marginLeft: 8 }}>
+        <Text style={styles.statLabel}>{label}</Text>
+        <Text style={styles.statValue}>{value}</Text>
+      </View>
+    </View>
+  );
+}
+
+function ExerciseItem({ exercise }: { exercise: Exercise }) {
+  return (
+    <View style={styles.exerciseItem}>
+      <Image source={{ uri: exercise.imageUri }} style={styles.exerciseThumb} />
+      <View style={{ flex: 1, marginHorizontal: 12 }}>
+        <Text style={styles.exerciseTitle}>{exercise.title}</Text>
+        <Text style={styles.exerciseDuration}>{exercise.duration}</Text>
+      </View>
+      <TouchableOpacity style={styles.exercisePlayButton}>
+        <Ionicons name="play" size={18} color="#BBF246" />
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+  },
+  backButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(255,255,255,0.06)',
+  },
+  headerTitle: {
+    fontSize: 22,
+    color: '#ECEDEE',
+    fontWeight: '700',
+  },
+  heroContainer: {
+    marginTop: 14,
+    marginHorizontal: 16,
+  },
+  heroImage: {
+    height: 260,
+    borderRadius: 28,
+    overflow: 'hidden',
+    justifyContent: 'flex-end',
+  },
+  heroOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.18)',
+    borderRadius: 28,
+  },
+  statsFloating: {
+    position: 'absolute',
+    left: 22,
+    right: 22,
+    bottom: -26,
+    height: 72,
+    borderRadius: 20,
+    backgroundColor: '#1E262C',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    paddingHorizontal: 14,
+    shadowColor: '#000',
+    shadowOpacity: 0.3,
+    shadowRadius: 10,
+    shadowOffset: { width: 0, height: 6 },
+    elevation: 6,
+  },
+  divider: {
+    width: 1,
+    height: 36,
+    backgroundColor: 'rgba(255,255,255,0.08)',
+  },
+  statCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  statIconWrap: {
+    width: 36,
+    height: 36,
+    borderRadius: 12,
+    backgroundColor: '#BBF246',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  statLabel: {
+    color: 'rgba(255,255,255,0.75)',
+    fontSize: 12,
+    marginBottom: 2,
+  },
+  statValue: {
+    color: '#ECEDEE',
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  contentSection: {
+    marginTop: 46,
+    paddingHorizontal: 20,
+    gap: 12,
+  },
+  title: {
+    fontSize: 28,
+    color: '#ECEDEE',
+    fontWeight: '800',
+  },
+  description: {
+    fontSize: 15,
+    lineHeight: 22,
+    color: 'rgba(255,255,255,0.75)',
+  },
+  roundsHeader: {
+    marginTop: 18,
+    paddingHorizontal: 20,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  roundsTitle: {
+    color: '#ECEDEE',
+    fontSize: 22,
+    fontWeight: '700',
+  },
+  roundsCount: {
+    color: 'rgba(255,255,255,0.6)',
+    fontSize: 16,
+  },
+  exerciseItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#1E262C',
+    padding: 12,
+    borderRadius: 18,
+  },
+  exerciseThumb: {
+    width: 56,
+    height: 56,
+    borderRadius: 12,
+  },
+  exerciseTitle: {
+    color: '#ECEDEE',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  exerciseDuration: {
+    color: 'rgba(255,255,255,0.6)',
+    marginTop: 4,
+    fontSize: 13,
+  },
+  exercisePlayButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.2)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#192126',
+  },
+  bottomCtaWrap: {
+    position: 'absolute',
+    left: 16,
+    right: 16,
+    bottom: 0,
+  },
+  bottomCta: {
+    height: 64,
+    borderRadius: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  bottomCtaText: {
+    color: '#192126',
+    fontSize: 18,
+    fontWeight: '800',
+  },
+});
+
+