richard/digital-pilates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加教练功能和更新用户界面

Browse Source 
- 新增教练页面，用户可以与教练进行互动和咨询
- 更新首页，切换到教练 tab 并传递名称参数
- 优化个人信息页面，添加注销帐号和退出登录功能
- 更新隐私政策和用户协议的链接，确保用户在使用前同意相关条款
- 修改今日训练页面标题为“开始训练”，提升用户体验
- 删除不再使用的进度条组件，简化代码结构
This commit is contained in:
richarjiang
2025-08-15 21:38:19 +08:00
parent 97e89b9bf0
commit 3312250f2d
13 changed files with 1385 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/(tabs)/_layout.tsx
View File

@@ -18,6 +18,7 @@ export default function TabLayout() {
screenOptions={({ route }) => {
const routeName = route.name;
const isSelected = (routeName === 'index' && pathname === '/') ||
(routeName === 'coach' && pathname === '/coach') ||
(routeName === 'explore' && pathname === '/explore') ||
pathname.includes(routeName);
@@ -39,6 +40,8 @@ export default function TabLayout() {
switch (routeName) {
case 'index':
return { icon: 'house.fill', title: '首页' } as const;
case 'coach':
return { icon: 'person.3.fill', title: '教练' } as const;
case 'explore':
return { icon: 'paperplane.fill', title: '探索' } as const;
case 'personal':
@@ -150,6 +153,34 @@ export default function TabLayout() {
},
}}
/>
<Tabs.Screen
name="coach"
options={{
title: '教练',
tabBarIcon: ({ color }) => {
const isCoachSelected = pathname === '/coach';
return (
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<IconSymbol size={22} name="person.3.fill" color={color} />
{isCoachSelected && (
<Text
numberOfLines={1}
style={{
color: color,
fontSize: 12,
fontWeight: '600',
marginLeft: 6,
textAlign: 'center',
flexShrink: 0,
}}>
教练
</Text>
)}
</View>
);
},
}}
/>
<Tabs.Screen
name="explore"
options={{

1158
app/(tabs)/coach.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

36
app/(tabs)/index.tsx
View File

@@ -75,9 +75,8 @@ export default function HomeScreen() {
const snapX = distLeft <= distRight ? minX : maxX;
Animated.spring(pan, { toValue: { x: snapX, y: clampedY }, useNativeDriver: false, bounciness: 6 }).start(() => {
if (!dragState.current.moved) {
// Treat as tap
// @ts-ignore - expo-router string ok
router.push('/ai-coach-chat?name=Iris' as any);
// 切换到教练 tab，并传递name参数
router.push('/coach?name=Iris' as any);
}
});
},
@@ -91,7 +90,6 @@ export default function HomeScreen() {
title: string;
subtitle: string;
level?: '初学者' | '中级' | '高级';
progress: number;
onPress?: () => void;
}
| {
@@ -115,7 +113,6 @@ export default function HomeScreen() {
title: '今日训练',
subtitle: '完成一次普拉提训练，记录你的坚持',
level: '初学者',
progress: 0,
onPress: () => pushIfAuthedElseLogin('/workout/today'),
},
{
@@ -126,7 +123,6 @@ export default function HomeScreen() {
title: '体态评估',
subtitle: '评估你的体态，制定训练计划',
level: '初学者',
progress: 0,
onPress: () => router.push('/ai-posture-assessment'),
},
...listRecommendedArticles().map((a) => ({
@@ -194,7 +190,6 @@ export default function HomeScreen() {
image: 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/images/imagedemo.jpeg',
title: c.title || '今日训练',
subtitle: c.subtitle || '完成一次普拉提训练，记录你的坚持',
progress: 0,
onPress: () => pushIfAuthedElseLogin('/workout/today'),
});
}
@@ -282,6 +277,22 @@ export default function HomeScreen() {
<ThemedText style={styles.sectionTitle}>热点功能</ThemedText>
<View style={styles.featureGrid}>
<Pressable
style={[styles.featureCard, styles.featureCardQuinary]}
onPress={() => pushIfAuthedElseLogin('/workout/today')}
>
<View style={styles.featureIconWrapper}>
<View style={styles.featureIconPlaceholder}>
<Image
source={require('@/assets/images/icons/iconWorkout.png')}
style={styles.featureIconImage}
/>
</View>
</View>
<ThemedText style={styles.featureTitle}>训练</ThemedText>
</Pressable>
<Pressable
style={[styles.featureCard, styles.featureCardPrimary]}
onPress={() => router.push('/ai-posture-assessment')}
@@ -292,7 +303,7 @@ export default function HomeScreen() {
style={styles.featureIconImage}
/>
</View>
<ThemedText style={styles.featureTitle}>AI体态评估</ThemedText>
<ThemedText style={styles.featureTitle}>体态</ThemedText>
</Pressable>
<Pressable
@@ -307,8 +318,11 @@ export default function HomeScreen() {
/>
</View>
</View>
<ThemedText style={styles.featureTitle}>计划管理</ThemedText>
<ThemedText style={styles.featureTitle}>计划</ThemedText>
</Pressable>
</View>
</View>
@@ -344,7 +358,6 @@ export default function HomeScreen() {
title={item.title}
subtitle={item.subtitle}
level={item.level}
progress={item.progress}
/>
);
return item.onPress ? (
@@ -490,6 +503,9 @@ const styles = StyleSheet.create({
featureCardQuaternary: {
backgroundColor: '#fa709a',
},
featureCardQuinary: {
backgroundColor: '#f59e0b',
},
featureIconWrapper: {
width: 32,
height: 32,

111
app/(tabs)/personal.tsx
View File

@@ -1,23 +1,23 @@
import { PRIVACY_POLICY_URL, USER_AGREEMENT_URL } from '@/constants/Agree';
import { Colors } from '@/constants/Colors';
import { getTabBarBottomPadding } from '@/constants/TabBar';
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
import { useAuthGuard } from '@/hooks/useAuthGuard';
import { useColorScheme } from '@/hooks/useColorScheme';
import { api } from '@/services/api';
import { DEFAULT_MEMBER_NAME, fetchMyProfile, logout } from '@/store/userSlice';
import { DEFAULT_MEMBER_NAME, fetchMyProfile } from '@/store/userSlice';
import { Ionicons } from '@expo/vector-icons';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
import { useFocusEffect } from '@react-navigation/native';
import type { Href } from 'expo-router';
import { router } from 'expo-router';
import React, { useMemo, useState } from 'react';
import { Alert, Image, SafeAreaView, ScrollView, StatusBar, StyleSheet, Switch, Text, TouchableOpacity, View } from 'react-native';
import { Alert, Image, Linking, SafeAreaView, ScrollView, StatusBar, StyleSheet, Switch, Text, TouchableOpacity, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
const DEFAULT_AVATAR_URL = 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/images/avatar/avatarGirl01.jpeg';
export default function PersonalScreen() {
const dispatch = useAppDispatch();
const { confirmLogout, confirmDeleteAccount, isLoggedIn, pushIfAuthedElseLogin } = useAuthGuard();
const insets = useSafeAreaInsets();
const tabBarHeight = useBottomTabBarHeight();
const colorScheme = useColorScheme();
@@ -95,32 +95,7 @@ export default function PersonalScreen() {
const handleDeleteAccount = () => {
Alert.alert(
'确认注销帐号',
'此操作不可恢复，将删除您的帐号及相关数据。确定继续吗？',
[
{ text: '取消', style: 'cancel' },
{
text: '确认注销',
style: 'destructive',
onPress: async () => {
try {
await api.delete('/api/users/delete-account');
await AsyncStorage.multiRemove(['@user_personal_info']);
await dispatch(logout()).unwrap();
Alert.alert('帐号已注销', '您的帐号已成功注销');
router.replace('/auth/login');
} catch (err: any) {
const message = err?.message || '注销失败，请稍后重试';
Alert.alert('注销失败', message);
}
},
},
],
{ cancelable: true }
);
};
const UserInfoSection = () => (
<View style={[styles.userInfoCard, { backgroundColor: colorTokens.card }]}>
@@ -138,7 +113,7 @@ export default function PersonalScreen() {
</View>
{/* 编辑按钮 */}
<TouchableOpacity style={dynamicStyles.editButton} onPress={() => router.push('/profile/edit')}>
<TouchableOpacity style={dynamicStyles.editButton} onPress={() => pushIfAuthedElseLogin('/profile/edit')}>
<Text style={dynamicStyles.editButtonText}>编辑</Text>
</TouchableOpacity>
</View>
@@ -170,7 +145,8 @@ export default function PersonalScreen() {
<TouchableOpacity
key={index}
style={styles.menuItem}
onPress={item.onPress}
onPress={item.type === 'switch' ? undefined : item.onPress}
disabled={item.type === 'switch'}
>
<View style={styles.menuItemLeft}>
<View style={[
@@ -187,8 +163,14 @@ export default function PersonalScreen() {
</View>
{item.type === 'switch' ? (
<Switch
value={notificationEnabled}
onValueChange={setNotificationEnabled}
value={isLoggedIn ? notificationEnabled : false}
onValueChange={(value) => {
if (!isLoggedIn) {
pushIfAuthedElseLogin('/profile/notification-settings');
return;
}
setNotificationEnabled(value);
}}
trackColor={{ false: '#E5E5E5', true: colors.primary }}
thumbColor="#FFFFFF"
style={styles.switch}
@@ -243,12 +225,20 @@ export default function PersonalScreen() {
{
icon: 'flag-outline' as const,
title: '目标管理',
onPress: () => router.push('/profile/goals' as Href),
},
{
icon: 'stats-chart-outline' as const,
title: '训练进度',
onPress: () => pushIfAuthedElseLogin('/profile/goals'),
},
// {
// icon: 'stats-chart-outline' as const,
// title: '训练进度',
// onPress: () => {
// // 训练进度页面暂未实现，先显示提示
// if (isLoggedIn) {
// Alert.alert('提示', '训练进度功能正在开发中');
// } else {
// pushIfAuthedElseLogin('/profile/training-progress');
// }
// },
// },
],
},
{
@@ -264,42 +254,36 @@ export default function PersonalScreen() {
{
title: '其他',
items: [
{
icon: 'mail-outline' as const,
title: '联系我们',
},
{
icon: 'shield-checkmark-outline' as const,
title: '隐私政策',
onPress: () => Linking.openURL(PRIVACY_POLICY_URL),
},
{
icon: 'settings-outline' as const,
title: '设置',
icon: 'document-text-outline' as const,
title: '用户协议',
onPress: () => Linking.openURL(USER_AGREEMENT_URL),
},
],
},
{
// 只有登录用户才显示账号与安全菜单
...(isLoggedIn ? [{
title: '账号与安全',
items: [
{
icon: 'log-out-outline' as const,
title: '退出登录',
onPress: confirmLogout,
isDanger: false,
},
{
icon: 'trash-outline' as const,
title: '注销帐号',
onPress: handleDeleteAccount,
onPress: confirmDeleteAccount,
isDanger: true,
},
],
},
{
title: '开发者',
items: [
{
icon: 'refresh-outline' as const,
title: '重置引导流程',
onPress: handleResetOnboarding,
isDanger: true,
},
],
},
}] : []),
];
return (
@@ -317,12 +301,6 @@ export default function PersonalScreen() {
<MenuSection key={index} title={section.title} items={section.items} />
))}
{/* 底部浮动按钮 */}
<View style={[styles.floatingButtonContainer, { bottom: Math.max(30, tabBarHeight / 2) + (insets?.bottom ?? 0) }]}>
<TouchableOpacity style={dynamicStyles.floatingButton}>
<Ionicons name="search" size={24} color="#192126" />
</TouchableOpacity>
</View>
</ScrollView>
</SafeAreaView>
</View>
@@ -430,6 +408,7 @@ const styles = StyleSheet.create({
menuItemText: {
fontSize: 16,
flex: 1,
fontWeight: '600',
},
switch: {
transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }],

27
app/auth/login.tsx
View File

@@ -3,11 +3,12 @@ import * as AppleAuthentication from 'expo-apple-authentication';
import { LinearGradient } from 'expo-linear-gradient';
import { useLocalSearchParams, useRouter } from 'expo-router';
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Alert, Animated, Pressable, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Alert, Animated, Linking, Pressable, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { PRIVACY_POLICY_URL, USER_AGREEMENT_URL } from '@/constants/Agree';
import { Colors } from '@/constants/Colors';
import { useAppDispatch } from '@/hooks/redux';
import { useColorScheme } from '@/hooks/useColorScheme';
@@ -230,8 +231,8 @@ export default function LoginScreen() {
<ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
<View style={styles.headerWrap}>
<ThemedText style={[styles.title, { color: color.text }]}>数字普拉提</ThemedText>
<ThemedText style={[styles.subtitle, { color: color.textMuted }]}>欢迎登录</ThemedText>
<ThemedText style={[styles.title, { color: color.text }]}>普拉提助手</ThemedText>
<ThemedText style={[styles.subtitle, { color: color.textMuted }]}>欢迎登录普拉提星球</ThemedText>
</View>
{/* Apple 登录 */}
@@ -252,22 +253,6 @@ export default function LoginScreen() {
</Pressable>
)}
{/* 游客登录（弱化样式） */}
<Pressable
accessibilityRole="button"
onPress={() => guardAgreement(onGuestLogin)}
disabled={loading}
style={({ pressed }) => [
styles.guestButton,
{ borderColor: color.border, backgroundColor: color.surface },
loading && { opacity: 0.7 },
pressed && { transform: [{ scale: 0.98 }] },
]}
>
<Ionicons name="person-circle-outline" size={22} color={color.neutral200} style={{ marginRight: 8 }} />
<Text style={[styles.guestText, { color: color.neutral200 }]}>以游客身份继续</Text>
</Pressable>
{/* 协议勾选 */}
<View style={styles.agreementRow}>
<Pressable onPress={() => setHasAgreed((v) => !v)} style={styles.checkboxWrap} accessibilityRole="checkbox" accessibilityState={{ checked: hasAgreed }}>
@@ -281,11 +266,11 @@ export default function LoginScreen() {
</View>
</Pressable>
<Text style={[styles.agreementText, { color: color.textMuted }]}>我已阅读并同意</Text>
<Pressable onPress={() => router.push('/legal/privacy-policy')}>
<Pressable onPress={() => Linking.openURL(PRIVACY_POLICY_URL)}>
<Text style={[styles.link, { color: color.primary }]}>《隐私政策》</Text>
</Pressable>
<Text style={[styles.agreementText, { color: color.textMuted }]}>和</Text>
<Pressable onPress={() => router.push('/legal/user-agreement')}>
<Pressable onPress={() => Linking.openURL(USER_AGREEMENT_URL)}>
<Text style={[styles.link, { color: color.primary }]}>《用户协议》</Text>
</Pressable>
</View>

23
app/index.tsx
View File

@@ -1,6 +1,5 @@
import { ThemedView } from '@/components/ThemedView';
import { useThemeColor } from '@/hooks/useThemeColor';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { router } from 'expo-router';
import React, { useEffect, useState } from 'react';
import { ActivityIndicator, View } from 'react-native';
@@ -18,22 +17,24 @@ export default function SplashScreen() {
const checkOnboardingStatus = async () => {
try {
const onboardingCompleted = await AsyncStorage.getItem(ONBOARDING_COMPLETED_KEY);
// const onboardingCompleted = await AsyncStorage.getItem(ONBOARDING_COMPLETED_KEY);
if (onboardingCompleted === 'true') {
// if (onboardingCompleted === 'true') {
// router.replace('/(tabs)');
// } else {
// router.replace('/onboarding');
// }
// setIsLoading(false);
router.replace('/(tabs)');
} else {
router.replace('/onboarding');
}
setIsLoading(false);
} catch (error) {
console.error('检查引导状态失败:', error);
// 如果出现错误，默认显示引导页面
setTimeout(() => {
router.replace('/onboarding');
setIsLoading(false);
}, 1000);
// setTimeout(() => {
// router.replace('/onboarding');
// setIsLoading(false);
// }, 1000);
}
setIsLoading(false);
};
if (!isLoading) {

2
app/workout/today.tsx
View File

@@ -427,7 +427,7 @@ export default function TodayWorkoutScreen() {
<SafeAreaView style={styles.contentWrapper}>
<HeaderBar
title="快速训练"
title="开始训练"
onBack={() => router.back()}
withSafeTop={false}
transparent={true}

BIN
assets/images/icons/iconWorkout.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

12
components/PlanCard.tsx
View File

@@ -1,4 +1,4 @@
import { ProgressBar } from '@/components/ProgressBar';
import React from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';
@@ -9,10 +9,9 @@ type PlanCardProps = {
title: string;
subtitle: string;
level?: Level;
progress: number; // 0 - 1
};
export function PlanCard({ image, title, subtitle, level, progress }: PlanCardProps) {
export function PlanCard({ image, title, subtitle, level }: PlanCardProps) {
return (
<View style={styles.card}>
<Image source={{ uri: image }} style={styles.image} />
@@ -27,10 +26,6 @@ export function PlanCard({ image, title, subtitle, level, progress }: PlanCardPr
<Text style={styles.title}>{title}</Text>
<Text style={styles.subtitle}>{subtitle}</Text>
<View style={styles.progressWrapper}>
<ProgressBar progress={progress} showLabel={true} />
</View>
</View>
</View>
);
@@ -86,9 +81,6 @@ const styles = StyleSheet.create({
fontSize: 12,
color: '#B1B6BD',
},
progressWrapper: {
marginTop: 18,
},
});

7
components/PrivacyConsentModal.tsx
View File

@@ -1,7 +1,8 @@
import { router } from 'expo-router';
import { PRIVACY_POLICY_URL, USER_AGREEMENT_URL } from '@/constants/Agree';
import React from 'react';
import {
Dimensions,
Linking,
Modal,
StyleSheet,
Text,
@@ -23,11 +24,11 @@ export default function PrivacyConsentModal({
onDisagree,
}: PrivacyConsentModalProps) {
const handleUserAgreementPress = () => {
router.push('/legal/user-agreement');
Linking.openURL(USER_AGREEMENT_URL);
};
const handlePrivacyPolicyPress = () => {
router.push('/legal/privacy-policy');
Linking.openURL(PRIVACY_POLICY_URL);
};
return (

1
components/ui/IconSymbol.tsx
View File

@@ -19,6 +19,7 @@ const MAPPING = {
'chevron.left.forwardslash.chevron.right': 'code',
'chevron.right': 'chevron-right',
'person.fill': 'person',
'person.3.fill': 'people',
} as IconMapping;
/**

4
constants/Agree.ts Normal file
View File

@@ -0,0 +1,4 @@
// 用户协议
export const USER_AGREEMENT_URL = 'https://docs.qq.com/doc/DWkVYZ3RhRmZCaUdn?nlc=1';
// 隐私政策
export const PRIVACY_POLICY_URL = 'https://docs.qq.com/doc/DWkh2Y1Zxb21BVGNY?nlc=1';

89
hooks/useAuthGuard.ts
View File

@@ -1,7 +1,11 @@
import AsyncStorage from '@react-native-async-storage/async-storage';
import { usePathname, useRouter } from 'expo-router';
import { useCallback } from 'react';
import { Alert } from 'react-native';
import { useAppSelector } from '@/hooks/redux';
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
import { api } from '@/services/api';
import { logout as logoutAction } from '@/store/userSlice';
type RedirectParams = Record<string, string | number | boolean | undefined>;
@@ -12,6 +16,7 @@ type EnsureOptions = {
export function useAuthGuard() {
const router = useRouter();
const dispatch = useAppDispatch();
const currentPath = usePathname();
const token = useAppSelector((s) => (s as any)?.user?.token as string | null);
const isLoggedIn = !!token;
@@ -52,11 +57,93 @@ export function useAuthGuard() {
[ensureLoggedIn]
);
// 退出登录功能
const handleLogout = useCallback(async () => {
try {
// 调用 Redux action 清除本地状态和缓存
await dispatch(logoutAction()).unwrap();
// 跳转到登录页面
router.replace('/auth/login');
} catch (error) {
console.error('退出登录失败:', error);
Alert.alert('错误', '退出登录失败，请稍后重试');
}
}, [dispatch, router]);
// 带确认对话框的退出登录
const confirmLogout = useCallback(() => {
Alert.alert(
'确认退出',
'确定要退出当前账号吗？',
[
{
text: '取消',
style: 'cancel',
},
{
text: '确定',
style: 'default',
onPress: handleLogout,
},
]
);
}, [handleLogout]);
// 注销账号功能
const handleDeleteAccount = useCallback(async () => {
try {
// 调用注销账号API
await api.delete('/api/users/delete-account');
// 清除额外的本地数据
await AsyncStorage.multiRemove(['@user_personal_info', '@onboarding_completed']);
// 执行退出登录逻辑
await dispatch(logoutAction()).unwrap();
Alert.alert('账号已注销', '您的账号已成功注销', [
{
text: '确定',
onPress: () => router.replace('/auth/login'),
},
]);
} catch (error: any) {
console.error('注销账号失败:', error);
const message = error?.message || '注销失败，请稍后重试';
Alert.alert('注销失败', message);
}
}, [dispatch, router]);
// 带确认对话框的注销账号
const confirmDeleteAccount = useCallback(() => {
Alert.alert(
'确认注销账号',
'此操作不可恢复，将删除您的账号及相关数据。确定继续吗？',
[
{
text: '取消',
style: 'cancel',
},
{
text: '确认注销',
style: 'destructive',
onPress: handleDeleteAccount,
},
],
{ cancelable: true }
);
}, [handleDeleteAccount]);
return {
isLoggedIn,
ensureLoggedIn,
pushIfAuthedElseLogin,
guardHandler,
handleLogout,
confirmLogout,
handleDeleteAccount,
confirmDeleteAccount,
} as const;
}