- 新增训练计划页面,允许用户制定个性化的训练计划 - 集成打卡功能,用户可以记录每日的训练情况 - 更新 Redux 状态管理,添加训练计划相关的 reducer - 在首页中添加训练计划卡片,支持用户点击跳转 - 更新样式和布局,以适应新功能的展示和交互 - 添加日期选择器和相关依赖,支持用户选择训练日期
211 lines
6.8 KiB
TypeScript
211 lines
6.8 KiB
TypeScript
import { PlanCard } from '@/components/PlanCard';
|
||
import { SearchBox } from '@/components/SearchBox';
|
||
import { ThemedText } from '@/components/ThemedText';
|
||
import { ThemedView } from '@/components/ThemedView';
|
||
import { Colors } from '@/constants/Colors';
|
||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||
// Removed WorkoutCard import since we no longer use the horizontal carousel
|
||
import { useAuthGuard } from '@/hooks/useAuthGuard';
|
||
import { getChineseGreeting } from '@/utils/date';
|
||
import { useRouter } from 'expo-router';
|
||
import React from 'react';
|
||
import { Pressable, SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
|
||
|
||
// 移除旧的“热门活动”滑动数据,改为固定的“热点功能”卡片
|
||
|
||
export default function HomeScreen() {
|
||
const router = useRouter();
|
||
const { pushIfAuthedElseLogin } = useAuthGuard();
|
||
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
||
const colorTokens = Colors[theme];
|
||
return (
|
||
<SafeAreaView style={[styles.safeArea, { backgroundColor: theme === 'light' ? colorTokens.pageBackgroundEmphasis : colorTokens.background }]}>
|
||
<ThemedView style={[styles.container, { backgroundColor: theme === 'light' ? colorTokens.pageBackgroundEmphasis : colorTokens.background }]}>
|
||
<ScrollView showsVerticalScrollIndicator={false}>
|
||
{/* Header Section */}
|
||
<View style={styles.header}>
|
||
<ThemedText style={styles.greeting}>{getChineseGreeting()} 🔥</ThemedText>
|
||
<ThemedText style={styles.userName}>新学员,欢迎你</ThemedText>
|
||
</View>
|
||
|
||
{/* Search Box */}
|
||
<SearchBox placeholder="搜索" />
|
||
|
||
{/* Hot Features Section */}
|
||
<View style={styles.sectionContainer}>
|
||
<ThemedText style={styles.sectionTitle}>热点功能</ThemedText>
|
||
|
||
<View style={styles.featureGrid}>
|
||
<Pressable
|
||
style={[styles.featureCard, styles.featureCardPrimary]}
|
||
onPress={() => router.push('/ai-posture-assessment')}
|
||
>
|
||
<ThemedText style={styles.featureTitle}>AI体态评估</ThemedText>
|
||
<ThemedText style={styles.featureSubtitle}>3分钟获取体态报告</ThemedText>
|
||
<View style={styles.featureCta}>
|
||
<ThemedText style={styles.featureCtaText}>开始评估</ThemedText>
|
||
</View>
|
||
</Pressable>
|
||
|
||
<Pressable
|
||
style={[styles.featureCard, styles.featureCardSecondary]}
|
||
onPress={() => router.push('/ai-coach-chat?name=Sarah' as any)}
|
||
>
|
||
<ThemedText style={styles.featureTitle}>在线教练</ThemedText>
|
||
<ThemedText style={styles.featureSubtitle}>认证教练 · 1对1即时解答</ThemedText>
|
||
<View style={styles.featureCta}>
|
||
<ThemedText style={styles.featureCtaText}>立即咨询</ThemedText>
|
||
</View>
|
||
</Pressable>
|
||
</View>
|
||
</View>
|
||
|
||
{/* Today Plan Section */}
|
||
<View style={styles.sectionContainer}>
|
||
<ThemedText style={styles.sectionTitle}>为你推荐</ThemedText>
|
||
|
||
<View style={styles.planList}>
|
||
<PlanCard
|
||
image={'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/images/Imagettpg.png'}
|
||
title="体态评估"
|
||
subtitle="评估你的体态,制定训练计划"
|
||
level="初学者"
|
||
progress={0}
|
||
/>
|
||
<Pressable onPress={() => pushIfAuthedElseLogin('/challenge')}>
|
||
<PlanCard
|
||
image={'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/images/Image30play@2x.png'}
|
||
title="每周打卡"
|
||
subtitle="养成训练习惯,练出好身材"
|
||
level="初学者"
|
||
progress={0.75}
|
||
/>
|
||
</Pressable>
|
||
<Pressable onPress={() => pushIfAuthedElseLogin('/training-plan')}>
|
||
<PlanCard
|
||
image={'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/images/Image30play@2x.png'}
|
||
title="训练计划制定"
|
||
subtitle="按周安排/次数·常见目标·个性化选项"
|
||
level="初学者"
|
||
progress={0}
|
||
/>
|
||
</Pressable>
|
||
<Pressable onPress={() => pushIfAuthedElseLogin('/checkin')}>
|
||
<PlanCard
|
||
image={'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/images/Image30play@2x.png'}
|
||
title="每日打卡(自选动作)"
|
||
subtitle="选择动作,设置组数/次数,记录完成"
|
||
level="初学者"
|
||
progress={0}
|
||
/>
|
||
</Pressable>
|
||
</View>
|
||
</View>
|
||
|
||
|
||
|
||
{/* Add some spacing at the bottom */}
|
||
<View style={styles.bottomSpacing} />
|
||
</ScrollView>
|
||
</ThemedView>
|
||
</SafeAreaView>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
safeArea: {
|
||
flex: 1,
|
||
backgroundColor: '#F7F8FA',
|
||
},
|
||
container: {
|
||
flex: 1,
|
||
backgroundColor: '#F7F8FA',
|
||
},
|
||
header: {
|
||
paddingHorizontal: 24,
|
||
paddingTop: 16,
|
||
paddingBottom: 8,
|
||
},
|
||
greeting: {
|
||
fontSize: 16,
|
||
color: '#8A8A8E',
|
||
fontWeight: '400',
|
||
marginBottom: 6,
|
||
},
|
||
userName: {
|
||
fontSize: 30,
|
||
fontWeight: 'bold',
|
||
color: '#1A1A1A',
|
||
lineHeight: 36,
|
||
},
|
||
sectionContainer: {
|
||
marginTop: 24,
|
||
},
|
||
sectionTitle: {
|
||
fontSize: 24,
|
||
fontWeight: 'bold',
|
||
color: '#1A1A1A',
|
||
paddingHorizontal: 24,
|
||
marginBottom: 18,
|
||
},
|
||
featureGrid: {
|
||
paddingHorizontal: 24,
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
},
|
||
featureCard: {
|
||
width: '48%',
|
||
borderRadius: 16,
|
||
padding: 16,
|
||
backgroundColor: '#FFFFFF',
|
||
// iOS shadow
|
||
shadowColor: '#000',
|
||
shadowOpacity: 0.08,
|
||
shadowRadius: 12,
|
||
shadowOffset: { width: 0, height: 6 },
|
||
// Android shadow
|
||
elevation: 4,
|
||
},
|
||
featureCardPrimary: {
|
||
backgroundColor: '#EEF2FF', // 柔和的靛蓝背景
|
||
},
|
||
featureCardSecondary: {
|
||
backgroundColor: '#F0FDFA', // 柔和的青绿背景
|
||
},
|
||
featureIcon: {
|
||
fontSize: 28,
|
||
marginBottom: 8,
|
||
},
|
||
featureTitle: {
|
||
fontSize: 18,
|
||
fontWeight: '700',
|
||
color: '#0F172A',
|
||
marginBottom: 6,
|
||
},
|
||
featureSubtitle: {
|
||
fontSize: 12,
|
||
color: '#6B7280',
|
||
lineHeight: 16,
|
||
marginBottom: 12,
|
||
},
|
||
featureCta: {
|
||
alignSelf: 'flex-start',
|
||
backgroundColor: '#0F172A',
|
||
paddingHorizontal: 10,
|
||
paddingVertical: 6,
|
||
borderRadius: 999,
|
||
},
|
||
featureCtaText: {
|
||
color: '#FFFFFF',
|
||
fontSize: 12,
|
||
fontWeight: '600',
|
||
},
|
||
planList: {
|
||
paddingHorizontal: 24,
|
||
},
|
||
// 移除旧的滑动样式
|
||
bottomSpacing: {
|
||
height: 120,
|
||
},
|
||
});
|