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

- 新增AI体态评估页面,包含训练内容和统计信息
- 在首页中添加AI体态评估的导航链接
- 更新package-lock.json,调整依赖项的dev标记
- 修改布局文件以支持新页面的导航
This commit is contained in:
richarjiang
2025-08-12 10:13:43 +08:00
parent 67972fa92b
commit e87dc87e1b
5 changed files with 362 additions and 5 deletions

View File

@@ -4,6 +4,7 @@ import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView'; import { ThemedView } from '@/components/ThemedView';
import { WorkoutCard } from '@/components/WorkoutCard'; import { WorkoutCard } from '@/components/WorkoutCard';
import { getChineseGreeting } from '@/utils/date'; import { getChineseGreeting } from '@/utils/date';
import { useRouter } from 'expo-router';
import React from 'react'; import React from 'react';
import { SafeAreaView, ScrollView, StyleSheet, View } from 'react-native'; import { SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
@@ -22,6 +23,7 @@ const workoutData = [
]; ];
export default function HomeScreen() { export default function HomeScreen() {
const router = useRouter();
return ( return (
<SafeAreaView style={styles.safeArea}> <SafeAreaView style={styles.safeArea}>
<ThemedView style={styles.container}> <ThemedView style={styles.container}>
@@ -51,7 +53,13 @@ export default function HomeScreen() {
title={workout.title} title={workout.title}
duration={workout.duration} duration={workout.duration}
imageSource={workout.imageSource} 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> </ScrollView>

View File

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

View File

@@ -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',
},
});

View File

@@ -21,7 +21,7 @@
13B07F961A680F5B00A75B9A /* digitalpilates.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = digitalpilates.app; sourceTree = BUILT_PRODUCTS_DIR; }; 13B07F961A680F5B00A75B9A /* digitalpilates.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = digitalpilates.app; sourceTree = BUILT_PRODUCTS_DIR; };
13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = digitalpilates/Images.xcassets; sourceTree = "<group>"; }; 13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = digitalpilates/Images.xcassets; sourceTree = "<group>"; };
13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = digitalpilates/Info.plist; sourceTree = "<group>"; }; 13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = digitalpilates/Info.plist; sourceTree = "<group>"; };
905D0A94B379FF06B1A262B2 /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; includeInIndex = 1; name = PrivacyInfo.xcprivacy; path = digitalpilates/PrivacyInfo.xcprivacy; sourceTree = "<group>"; }; 905D0A94B379FF06B1A262B2 /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xml; name = PrivacyInfo.xcprivacy; path = digitalpilates/PrivacyInfo.xcprivacy; sourceTree = "<group>"; };
951C0617485F4FEF590D4C5D /* ExpoModulesProvider.swift */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = sourcecode.swift; name = ExpoModulesProvider.swift; path = "Pods/Target Support Files/Pods-digitalpilates/ExpoModulesProvider.swift"; sourceTree = "<group>"; }; 951C0617485F4FEF590D4C5D /* ExpoModulesProvider.swift */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = sourcecode.swift; name = ExpoModulesProvider.swift; path = "Pods/Target Support Files/Pods-digitalpilates/ExpoModulesProvider.swift"; sourceTree = "<group>"; };
AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = SplashScreen.storyboard; path = digitalpilates/SplashScreen.storyboard; sourceTree = "<group>"; }; AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = SplashScreen.storyboard; path = digitalpilates/SplashScreen.storyboard; sourceTree = "<group>"; };
B8247601A9965B9A71737DFD /* Pods-digitalpilates.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-digitalpilates.debug.xcconfig"; path = "Target Support Files/Pods-digitalpilates/Pods-digitalpilates.debug.xcconfig"; sourceTree = "<group>"; }; B8247601A9965B9A71737DFD /* Pods-digitalpilates.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-digitalpilates.debug.xcconfig"; path = "Target Support Files/Pods-digitalpilates/Pods-digitalpilates.debug.xcconfig"; sourceTree = "<group>"; };
@@ -128,7 +128,6 @@
B8247601A9965B9A71737DFD /* Pods-digitalpilates.debug.xcconfig */, B8247601A9965B9A71737DFD /* Pods-digitalpilates.debug.xcconfig */,
E41FEE326E770C4798A5541A /* Pods-digitalpilates.release.xcconfig */, E41FEE326E770C4798A5541A /* Pods-digitalpilates.release.xcconfig */,
); );
name = Pods;
path = Pods; path = Pods;
sourceTree = "<group>"; sourceTree = "<group>";
}; };
@@ -336,6 +335,7 @@
CLANG_ENABLE_MODULES = YES; CLANG_ENABLE_MODULES = YES;
CODE_SIGN_ENTITLEMENTS = digitalpilates/digitalpilates.entitlements; CODE_SIGN_ENTITLEMENTS = digitalpilates/digitalpilates.entitlements;
CURRENT_PROJECT_VERSION = 1; CURRENT_PROJECT_VERSION = 1;
DEVELOPMENT_TEAM = 756WVXJ6MT;
ENABLE_BITCODE = NO; ENABLE_BITCODE = NO;
GCC_PREPROCESSOR_DEFINITIONS = ( GCC_PREPROCESSOR_DEFINITIONS = (
"$(inherited)", "$(inherited)",
@@ -372,6 +372,7 @@
CLANG_ENABLE_MODULES = YES; CLANG_ENABLE_MODULES = YES;
CODE_SIGN_ENTITLEMENTS = digitalpilates/digitalpilates.entitlements; CODE_SIGN_ENTITLEMENTS = digitalpilates/digitalpilates.entitlements;
CURRENT_PROJECT_VERSION = 1; CURRENT_PROJECT_VERSION = 1;
DEVELOPMENT_TEAM = 756WVXJ6MT;
INFOPLIST_FILE = digitalpilates/Info.plist; INFOPLIST_FILE = digitalpilates/Info.plist;
IPHONEOS_DEPLOYMENT_TARGET = 15.1; IPHONEOS_DEPLOYMENT_TARGET = 15.1;
LD_RUNPATH_SEARCH_PATHS = ( LD_RUNPATH_SEARCH_PATHS = (

4
package-lock.json generated
View File

@@ -3261,7 +3261,7 @@
"version": "19.0.14", "version": "19.0.14",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.14.tgz", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.14.tgz",
"integrity": "sha512-ixLZ7zG7j1fM0DijL9hDArwhwcCb4vqmePgwtV0GfnkHRSCUEv4LvzarcTdhoqgyMznUx/EhoTUv31CKZzkQlw==", "integrity": "sha512-ixLZ7zG7j1fM0DijL9hDArwhwcCb4vqmePgwtV0GfnkHRSCUEv4LvzarcTdhoqgyMznUx/EhoTUv31CKZzkQlw==",
"dev": true, "devOptional": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"csstype": "^3.0.2" "csstype": "^3.0.2"
@@ -5193,7 +5193,7 @@
"version": "3.1.3", "version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
"dev": true, "devOptional": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/data-view-buffer": { "node_modules/data-view-buffer": {