feat: 添加挑战页面和相关功能
- 在布局中新增挑战页面的导航 - 在首页中添加挑战计划卡片，支持用户点击跳转 - 更新登录页面的标题样式，调整字体粗细 - 集成 Redux 状态管理，新增挑战相关的 reducer
This commit is contained in:
13
app/challenge/_layout.tsx
Normal file
13
app/challenge/_layout.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import { Stack } from 'expo-router';
|
||||
import React from 'react';
|
||||
|
||||
export default function ChallengeLayout() {
|
||||
return (
|
||||
<Stack screenOptions={{ headerShown: false }}>
|
||||
<Stack.Screen name="index" />
|
||||
<Stack.Screen name="day" />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
182
app/challenge/day.tsx
Normal file
182
app/challenge/day.tsx
Normal file
@@ -0,0 +1,182 @@
|
||||
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
|
||||
import { completeDay, setCustom } from '@/store/challengeSlice';
|
||||
import type { Exercise, ExerciseCustomConfig } from '@/utils/pilatesPlan';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useLocalSearchParams, useRouter } from 'expo-router';
|
||||
import React, { useState } from 'react';
|
||||
import { FlatList, SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
|
||||
export default function ChallengeDayScreen() {
|
||||
const { day } = useLocalSearchParams<{ day: string }>();
|
||||
const router = useRouter();
|
||||
const dispatch = useAppDispatch();
|
||||
const challenge = useAppSelector((s) => (s as any).challenge);
|
||||
const dayNumber = Math.max(1, Math.min(30, parseInt(String(day || '1'), 10)));
|
||||
const dayState = challenge?.days?.[dayNumber - 1];
|
||||
const [currentSetIndexByExercise, setCurrentSetIndexByExercise] = useState<Record<string, number>>({});
|
||||
const [custom, setCustomLocal] = useState<ExerciseCustomConfig[]>(dayState?.custom || []);
|
||||
|
||||
const isLocked = dayState?.status === 'locked';
|
||||
const isCompleted = dayState?.status === 'completed';
|
||||
const plan = dayState?.plan;
|
||||
|
||||
// 不再强制所有动作完成，始终允许完成
|
||||
const canFinish = true;
|
||||
|
||||
const handleNextSet = (ex: Exercise) => {
|
||||
const curr = currentSetIndexByExercise[ex.key] ?? 0;
|
||||
if (curr < ex.sets.length) {
|
||||
setCurrentSetIndexByExercise((prev) => ({ ...prev, [ex.key]: curr + 1 }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleComplete = async () => {
|
||||
// 持久化自定义配置
|
||||
await dispatch(setCustom({ dayNumber, custom: custom }));
|
||||
await dispatch(completeDay(dayNumber));
|
||||
router.back();
|
||||
};
|
||||
|
||||
const updateCustom = (key: string, partial: Partial<ExerciseCustomConfig>) => {
|
||||
setCustomLocal((prev) => {
|
||||
const next = prev.map((c) => (c.key === key ? { ...c, ...partial } : c));
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
if (!plan) {
|
||||
return (
|
||||
<SafeAreaView style={styles.safeArea}>
|
||||
<View style={styles.container}><Text>加载中...</Text></View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.safeArea}>
|
||||
<View style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<View style={styles.headerRow}>
|
||||
<TouchableOpacity onPress={() => router.back()} style={styles.backButton} accessibilityRole="button">
|
||||
<Ionicons name="chevron-back" size={24} color="#111827" />
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.headerTitle}>第{plan.dayNumber}天</Text>
|
||||
<View style={{ width: 32 }} />
|
||||
</View>
|
||||
<Text style={styles.title}>{plan.title}</Text>
|
||||
<Text style={styles.subtitle}>{plan.focus}</Text>
|
||||
</View>
|
||||
|
||||
<FlatList
|
||||
data={plan.exercises}
|
||||
keyExtractor={(item) => item.key}
|
||||
contentContainerStyle={{ paddingHorizontal: 20, paddingBottom: 120 }}
|
||||
renderItem={({ item }) => {
|
||||
const doneSets = currentSetIndexByExercise[item.key] ?? 0;
|
||||
const conf = custom.find((c) => c.key === item.key);
|
||||
const targetSets = conf?.sets ?? item.sets.length;
|
||||
const perSetDuration = conf?.durationSec ?? item.sets[0]?.durationSec ?? 40;
|
||||
return (
|
||||
<View style={styles.exerciseCard}>
|
||||
<View style={styles.exerciseHeader}>
|
||||
<Text style={styles.exerciseName}>{item.name}</Text>
|
||||
<Text style={styles.exerciseDesc}>{item.description}</Text>
|
||||
</View>
|
||||
<View style={styles.controlsRow}>
|
||||
<TouchableOpacity style={[styles.toggleBtn, conf?.enabled === false && styles.toggleBtnOff]} onPress={() => updateCustom(item.key, { enabled: !(conf?.enabled ?? true) })}>
|
||||
<Text style={styles.toggleBtnText}>{conf?.enabled === false ? '已关闭' : '已启用'}</Text>
|
||||
</TouchableOpacity>
|
||||
<View style={styles.counterBox}>
|
||||
<Text style={styles.counterLabel}>组数</Text>
|
||||
<View style={styles.counterRow}>
|
||||
<TouchableOpacity style={styles.counterBtn} onPress={() => updateCustom(item.key, { sets: Math.max(1, (conf?.sets ?? targetSets) - 1) })}><Text style={styles.counterBtnText}>-</Text></TouchableOpacity>
|
||||
<Text style={styles.counterValue}>{conf?.sets ?? targetSets}</Text>
|
||||
<TouchableOpacity style={styles.counterBtn} onPress={() => updateCustom(item.key, { sets: Math.min(10, (conf?.sets ?? targetSets) + 1) })}><Text style={styles.counterBtnText}>+</Text></TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.counterBox}>
|
||||
<Text style={styles.counterLabel}>时长/组</Text>
|
||||
<View style={styles.counterRow}>
|
||||
<TouchableOpacity style={styles.counterBtn} onPress={() => updateCustom(item.key, { durationSec: Math.max(10, (conf?.durationSec ?? perSetDuration) - 5) })}><Text style={styles.counterBtnText}>-</Text></TouchableOpacity>
|
||||
<Text style={styles.counterValue}>{conf?.durationSec ?? perSetDuration}s</Text>
|
||||
<TouchableOpacity style={styles.counterBtn} onPress={() => updateCustom(item.key, { durationSec: Math.min(180, (conf?.durationSec ?? perSetDuration) + 5) })}><Text style={styles.counterBtnText}>+</Text></TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.setsRow}>
|
||||
{Array.from({ length: targetSets }).map((_, idx) => (
|
||||
<View key={idx} style={[styles.setPill, idx < doneSets ? styles.setPillDone : styles.setPillTodo]}>
|
||||
<Text style={[styles.setPillText, idx < doneSets ? styles.setPillTextDone : styles.setPillTextTodo]}>
|
||||
{perSetDuration}s
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
<TouchableOpacity style={styles.nextSetBtn} onPress={() => handleNextSet(item)} disabled={doneSets >= targetSets || conf?.enabled === false}>
|
||||
<Text style={styles.nextSetText}>{doneSets >= item.sets.length ? '本动作完成' : '完成一组'}</Text>
|
||||
</TouchableOpacity>
|
||||
{item.tips && (
|
||||
<View style={styles.tipsBox}>
|
||||
{item.tips.map((t: string, i: number) => (
|
||||
<Text key={i} style={styles.tipText}>• {t}</Text>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
||||
<View style={styles.bottomBar}>
|
||||
<TouchableOpacity style={[styles.finishBtn, !canFinish && { opacity: 0.5 }]} disabled={!canFinish || isLocked || isCompleted} onPress={handleComplete}>
|
||||
<Text style={styles.finishBtnText}>{isCompleted ? '已完成' : '完成今日训练'}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
safeArea: { flex: 1, backgroundColor: '#F7F8FA' },
|
||||
container: { flex: 1, backgroundColor: '#F7F8FA' },
|
||||
header: { paddingHorizontal: 20, paddingTop: 10, paddingBottom: 10 },
|
||||
headerRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
|
||||
backButton: { width: 32, height: 32, borderRadius: 16, alignItems: 'center', justifyContent: 'center', backgroundColor: '#E5E7EB' },
|
||||
headerTitle: { fontSize: 18, fontWeight: '800', color: '#1A1A1A' },
|
||||
title: { marginTop: 6, fontSize: 20, fontWeight: '800', color: '#1A1A1A' },
|
||||
subtitle: { marginTop: 6, fontSize: 12, color: '#6B7280' },
|
||||
exerciseCard: {
|
||||
backgroundColor: '#FFFFFF', borderRadius: 16, padding: 16, marginTop: 12,
|
||||
shadowColor: '#000', shadowOpacity: 0.06, shadowRadius: 12, shadowOffset: { width: 0, height: 6 }, elevation: 3,
|
||||
},
|
||||
exerciseHeader: { marginBottom: 8 },
|
||||
exerciseName: { fontSize: 16, fontWeight: '800', color: '#111827' },
|
||||
exerciseDesc: { marginTop: 4, fontSize: 12, color: '#6B7280' },
|
||||
setsRow: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginTop: 8 },
|
||||
controlsRow: { flexDirection: 'row', alignItems: 'center', gap: 12, flexWrap: 'wrap', marginTop: 8 },
|
||||
toggleBtn: { backgroundColor: '#111827', paddingHorizontal: 12, paddingVertical: 8, borderRadius: 8 },
|
||||
toggleBtnOff: { backgroundColor: '#9CA3AF' },
|
||||
toggleBtnText: { color: '#FFFFFF', fontWeight: '700' },
|
||||
counterBox: { backgroundColor: '#F3F4F6', borderRadius: 8, padding: 8 },
|
||||
counterLabel: { fontSize: 10, color: '#6B7280' },
|
||||
counterRow: { flexDirection: 'row', alignItems: 'center' },
|
||||
counterBtn: { backgroundColor: '#E5E7EB', width: 28, height: 28, borderRadius: 6, alignItems: 'center', justifyContent: 'center' },
|
||||
counterBtnText: { fontWeight: '800', color: '#111827' },
|
||||
counterValue: { minWidth: 40, textAlign: 'center', fontWeight: '700', color: '#111827' },
|
||||
setPill: { paddingHorizontal: 10, paddingVertical: 6, borderRadius: 999 },
|
||||
setPillTodo: { backgroundColor: '#F3F4F6' },
|
||||
setPillDone: { backgroundColor: '#BBF246' },
|
||||
setPillText: { fontSize: 12, fontWeight: '700' },
|
||||
setPillTextTodo: { color: '#6B7280' },
|
||||
setPillTextDone: { color: '#192126' },
|
||||
nextSetBtn: { marginTop: 10, alignSelf: 'flex-start', backgroundColor: '#111827', paddingHorizontal: 12, paddingVertical: 8, borderRadius: 8 },
|
||||
nextSetText: { color: '#FFFFFF', fontWeight: '700' },
|
||||
tipsBox: { marginTop: 10, backgroundColor: '#F9FAFB', borderRadius: 8, padding: 10 },
|
||||
tipText: { fontSize: 12, color: '#6B7280', lineHeight: 18 },
|
||||
bottomBar: { position: 'absolute', left: 0, right: 0, bottom: 0, padding: 20, backgroundColor: 'transparent' },
|
||||
finishBtn: { backgroundColor: '#BBF246', paddingVertical: 14, borderRadius: 999, alignItems: 'center' },
|
||||
finishBtnText: { color: '#192126', fontWeight: '800', fontSize: 16 },
|
||||
});
|
||||
|
||||
|
||||
139
app/challenge/index.tsx
Normal file
139
app/challenge/index.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
|
||||
import { initChallenge } from '@/store/challengeSlice';
|
||||
import { estimateSessionMinutesWithCustom } from '@/utils/pilatesPlan';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useRouter } from 'expo-router';
|
||||
import React, { useEffect, useMemo } from 'react';
|
||||
import { Dimensions, FlatList, SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
|
||||
export default function ChallengeHomeScreen() {
|
||||
const dispatch = useAppDispatch();
|
||||
const router = useRouter();
|
||||
const challenge = useAppSelector((s) => (s as any).challenge);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(initChallenge());
|
||||
}, [dispatch]);
|
||||
|
||||
const progress = useMemo(() => {
|
||||
const total = challenge?.days?.length || 30;
|
||||
const done = challenge?.days?.filter((d: any) => d.status === 'completed').length || 0;
|
||||
return total ? done / total : 0;
|
||||
}, [challenge?.days]);
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.safeArea}>
|
||||
<View style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<View style={styles.headerRow}>
|
||||
<TouchableOpacity onPress={() => router.back()} style={styles.backButton} accessibilityRole="button">
|
||||
<Ionicons name="chevron-back" size={24} color="#111827" />
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.headerTitle}>30天普拉提打卡</Text>
|
||||
<View style={{ width: 32 }} />
|
||||
</View>
|
||||
<Text style={styles.subtitle}>专注核心、体态与柔韧 · 连续完成解锁徽章</Text>
|
||||
</View>
|
||||
|
||||
{/* 进度环与统计 */}
|
||||
<View style={styles.summaryCard}>
|
||||
<View style={styles.summaryLeft}>
|
||||
<View style={styles.progressPill}>
|
||||
<View style={[styles.progressFill, { width: `${Math.round((progress || 0) * 100)}%` }]} />
|
||||
</View>
|
||||
<Text style={styles.progressText}>{Math.round((progress || 0) * 100)}%</Text>
|
||||
</View>
|
||||
<View style={styles.summaryRight}>
|
||||
<Text style={styles.summaryItem}><Text style={styles.summaryItemValue}>{challenge?.streak ?? 0}</Text> 天连续</Text>
|
||||
<Text style={styles.summaryItem}><Text style={styles.summaryItemValue}>{(challenge?.days?.filter((d: any)=>d.status==='completed').length) ?? 0}</Text> / 30 完成</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 日历格子（简单 6x5 网格） */}
|
||||
<FlatList
|
||||
data={challenge?.days || []}
|
||||
keyExtractor={(item) => String(item.plan.dayNumber)}
|
||||
numColumns={5}
|
||||
columnWrapperStyle={{ justifyContent: 'space-between', marginBottom: 12 }}
|
||||
contentContainerStyle={{ paddingHorizontal: 20, paddingTop: 10, paddingBottom: 40 }}
|
||||
renderItem={({ item }) => {
|
||||
const { plan, status } = item;
|
||||
const isLocked = status === 'locked';
|
||||
const isCompleted = status === 'completed';
|
||||
const minutes = estimateSessionMinutesWithCustom(plan, item.custom);
|
||||
return (
|
||||
<TouchableOpacity
|
||||
disabled={isLocked}
|
||||
onPress={() => router.push({ pathname: '/challenge/day', params: { day: String(plan.dayNumber) } })}
|
||||
style={[styles.dayCell, isLocked && styles.dayCellLocked, isCompleted && styles.dayCellCompleted]}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Text style={[styles.dayNumber, isLocked && styles.dayNumberLocked]}>{plan.dayNumber}</Text>
|
||||
<Text style={styles.dayMinutes}>{minutes}′</Text>
|
||||
{isCompleted && <Ionicons name="checkmark-circle" size={18} color="#10B981" style={{ position: 'absolute', top: 6, right: 6 }} />}
|
||||
{isLocked && <Ionicons name="lock-closed" size={16} color="#9CA3AF" style={{ position: 'absolute', top: 6, right: 6 }} />}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 底部 CTA */}
|
||||
<View style={styles.bottomBar}>
|
||||
<TouchableOpacity style={styles.startButton} onPress={() => router.push({ pathname: '/challenge/day', params: { day: String((challenge?.days?.find((d:any)=>d.status==='available')?.plan.dayNumber) || 1) } })}>
|
||||
<Text style={styles.startButtonText}>开始今日训练</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const { width } = Dimensions.get('window');
|
||||
const cellSize = (width - 40 - 4 * 12) / 5; // 20 padding *2, 12 spacing *4
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
safeArea: { flex: 1, backgroundColor: '#F7F8FA' },
|
||||
container: { flex: 1, backgroundColor: '#F7F8FA' },
|
||||
header: { paddingHorizontal: 20, paddingTop: 10 },
|
||||
headerRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
|
||||
backButton: { width: 32, height: 32, borderRadius: 16, alignItems: 'center', justifyContent: 'center', backgroundColor: '#E5E7EB' },
|
||||
headerTitle: { fontSize: 22, fontWeight: '800', color: '#1A1A1A' },
|
||||
subtitle: { marginTop: 6, fontSize: 12, color: '#6B7280' },
|
||||
summaryCard: {
|
||||
marginTop: 16,
|
||||
marginHorizontal: 20,
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
shadowColor: '#000', shadowOpacity: 0.06, shadowRadius: 12, shadowOffset: { width: 0, height: 6 }, elevation: 3,
|
||||
},
|
||||
summaryLeft: { flexDirection: 'row', alignItems: 'center' },
|
||||
progressPill: { width: 120, height: 10, borderRadius: 999, backgroundColor: '#E5E7EB', overflow: 'hidden' },
|
||||
progressFill: { height: '100%', backgroundColor: '#BBF246' },
|
||||
progressText: { marginLeft: 12, fontWeight: '700', color: '#111827' },
|
||||
summaryRight: {},
|
||||
summaryItem: { fontSize: 12, color: '#6B7280' },
|
||||
summaryItemValue: { fontWeight: '800', color: '#111827' },
|
||||
dayCell: {
|
||||
width: cellSize,
|
||||
height: cellSize,
|
||||
borderRadius: 16,
|
||||
backgroundColor: '#FFFFFF',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
shadowColor: '#000', shadowOpacity: 0.06, shadowRadius: 12, shadowOffset: { width: 0, height: 6 }, elevation: 3,
|
||||
},
|
||||
dayCellLocked: { backgroundColor: '#F3F4F6' },
|
||||
dayCellCompleted: { backgroundColor: '#ECFDF5', borderWidth: 1, borderColor: '#A7F3D0' },
|
||||
dayNumber: { fontWeight: '800', color: '#111827', fontSize: 16 },
|
||||
dayNumberLocked: { color: '#9CA3AF' },
|
||||
dayMinutes: { marginTop: 4, fontSize: 12, color: '#6B7280' },
|
||||
bottomBar: { padding: 20 },
|
||||
startButton: { backgroundColor: '#BBF246', paddingVertical: 14, borderRadius: 999, alignItems: 'center' },
|
||||
startButtonText: { color: '#192126', fontWeight: '800', fontSize: 16 },
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user