b80af23f4f
- 替换 Image 为 expo-image 并启用缓存策略 - 调整礼物按钮尺寸与图标大小 - 加入挑战失败时弹出 Toast 提示 - 统一异步流程并移除冗余状态监听 - 清理调试日志与多余空行
1033 lines
31 KiB
TypeScript
1033 lines
31 KiB
TypeScript
import { HeaderBar } from '@/components/ui/HeaderBar';
|
||
import { Colors } from '@/constants/Colors';
|
||
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
|
||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||
import {
|
||
fetchChallengeDetail,
|
||
joinChallenge,
|
||
leaveChallenge,
|
||
reportChallengeProgress,
|
||
selectChallengeById,
|
||
selectChallengeDetailError,
|
||
selectChallengeDetailStatus,
|
||
selectJoinError,
|
||
selectJoinStatus,
|
||
selectLeaveError,
|
||
selectLeaveStatus,
|
||
selectProgressError,
|
||
selectProgressStatus,
|
||
} from '@/store/challengesSlice';
|
||
import { Toast } from '@/utils/toast.utils';
|
||
import { Ionicons } from '@expo/vector-icons';
|
||
import { BlurView } from 'expo-blur';
|
||
import { LinearGradient } from 'expo-linear-gradient';
|
||
import { useLocalSearchParams, useRouter } from 'expo-router';
|
||
import LottieView from 'lottie-react-native';
|
||
import React, { useEffect, useMemo, useState } from 'react';
|
||
import {
|
||
ActivityIndicator,
|
||
Dimensions,
|
||
Image,
|
||
Platform,
|
||
ScrollView,
|
||
Share,
|
||
StatusBar,
|
||
StyleSheet,
|
||
Text,
|
||
TouchableOpacity,
|
||
View,
|
||
} from 'react-native';
|
||
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
|
||
|
||
const { width } = Dimensions.get('window');
|
||
const HERO_HEIGHT = width * 0.86;
|
||
const CTA_GRADIENT: [string, string] = ['#5E8BFF', '#6B6CFF'];
|
||
|
||
const isHttpUrl = (value: string) => /^https?:\/\//i.test(value);
|
||
|
||
const formatMonthDay = (value?: string): string | undefined => {
|
||
if (!value) return undefined;
|
||
const date = new Date(value);
|
||
if (Number.isNaN(date.getTime())) return undefined;
|
||
return `${date.getMonth() + 1}月${date.getDate()}日`;
|
||
};
|
||
|
||
const buildDateRangeLabel = (challenge?: {
|
||
startAt?: string;
|
||
endAt?: string;
|
||
periodLabel?: string;
|
||
durationLabel?: string;
|
||
}): string => {
|
||
if (!challenge) return '';
|
||
const startLabel = formatMonthDay(challenge.startAt);
|
||
const endLabel = formatMonthDay(challenge.endAt);
|
||
if (startLabel && endLabel) {
|
||
return `${startLabel} - ${endLabel}`;
|
||
}
|
||
return challenge.periodLabel ?? challenge.durationLabel ?? '';
|
||
};
|
||
|
||
const formatParticipantsLabel = (count?: number): string => {
|
||
if (typeof count !== 'number') return '持续更新中';
|
||
return `${count.toLocaleString('zh-CN')} 人正在参与`;
|
||
};
|
||
|
||
export default function ChallengeDetailScreen() {
|
||
const { id } = useLocalSearchParams<{ id?: string }>();
|
||
const router = useRouter();
|
||
const dispatch = useAppDispatch();
|
||
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
||
const colorTokens = Colors[theme];
|
||
const insets = useSafeAreaInsets();
|
||
|
||
const challengeSelector = useMemo(() => (id ? selectChallengeById(id) : undefined), [id]);
|
||
const challenge = useAppSelector((state) => (challengeSelector ? challengeSelector(state) : undefined));
|
||
|
||
|
||
const detailStatusSelector = useMemo(() => (id ? selectChallengeDetailStatus(id) : undefined), [id]);
|
||
const detailStatus = useAppSelector((state) => (detailStatusSelector ? detailStatusSelector(state) : 'idle'));
|
||
const detailErrorSelector = useMemo(() => (id ? selectChallengeDetailError(id) : undefined), [id]);
|
||
const detailError = useAppSelector((state) => (detailErrorSelector ? detailErrorSelector(state) : undefined));
|
||
|
||
const joinStatusSelector = useMemo(() => (id ? selectJoinStatus(id) : undefined), [id]);
|
||
const joinStatus = useAppSelector((state) => (joinStatusSelector ? joinStatusSelector(state) : 'idle'));
|
||
const joinErrorSelector = useMemo(() => (id ? selectJoinError(id) : undefined), [id]);
|
||
const joinError = useAppSelector((state) => (joinErrorSelector ? joinErrorSelector(state) : undefined));
|
||
|
||
const leaveStatusSelector = useMemo(() => (id ? selectLeaveStatus(id) : undefined), [id]);
|
||
const leaveStatus = useAppSelector((state) => (leaveStatusSelector ? leaveStatusSelector(state) : 'idle'));
|
||
const leaveErrorSelector = useMemo(() => (id ? selectLeaveError(id) : undefined), [id]);
|
||
const leaveError = useAppSelector((state) => (leaveErrorSelector ? leaveErrorSelector(state) : undefined));
|
||
|
||
const progressStatusSelector = useMemo(() => (id ? selectProgressStatus(id) : undefined), [id]);
|
||
const progressStatus = useAppSelector((state) => (progressStatusSelector ? progressStatusSelector(state) : 'idle'));
|
||
const progressErrorSelector = useMemo(() => (id ? selectProgressError(id) : undefined), [id]);
|
||
const progressError = useAppSelector((state) => (progressErrorSelector ? progressErrorSelector(state) : undefined));
|
||
|
||
useEffect(() => {
|
||
const getData = async (id: string) => {
|
||
try {
|
||
await dispatch(fetchChallengeDetail(id)).unwrap;
|
||
} catch (error) {
|
||
}
|
||
}
|
||
|
||
if (id) {
|
||
getData(id);
|
||
}
|
||
|
||
}, [dispatch, id]);
|
||
|
||
|
||
const [showCelebration, setShowCelebration] = useState(false);
|
||
|
||
|
||
useEffect(() => {
|
||
if (!showCelebration) {
|
||
return;
|
||
}
|
||
const timer = setTimeout(() => {
|
||
setShowCelebration(false);
|
||
}, 2400);
|
||
return () => {
|
||
clearTimeout(timer);
|
||
};
|
||
}, [showCelebration]);
|
||
|
||
const progress = challenge?.progress;
|
||
const hasProgress = Boolean(progress);
|
||
const progressTarget = progress?.target ?? 0;
|
||
const progressCompleted = progress?.completed ?? 0;
|
||
|
||
const progressSegments = useMemo(() => {
|
||
if (!hasProgress || progressTarget <= 0) return undefined;
|
||
const segmentsCount = Math.max(1, Math.min(progressTarget, 18));
|
||
const completedSegments = Math.min(
|
||
segmentsCount,
|
||
Math.round((progressCompleted / Math.max(progressTarget, 1)) * segmentsCount),
|
||
);
|
||
return { segmentsCount, completedSegments };
|
||
}, [hasProgress, progressCompleted, progressTarget]);
|
||
|
||
const rankingData = useMemo(() => challenge?.rankings ?? [], [challenge?.rankings]);
|
||
const participantAvatars = useMemo(
|
||
() => rankingData.filter((item) => item.avatar).map((item) => item.avatar as string).slice(0, 6),
|
||
[rankingData],
|
||
);
|
||
|
||
const dateRangeLabel = useMemo(
|
||
() =>
|
||
buildDateRangeLabel({
|
||
startAt: challenge?.startAt,
|
||
endAt: challenge?.endAt,
|
||
periodLabel: challenge?.periodLabel,
|
||
durationLabel: challenge?.durationLabel,
|
||
}),
|
||
[challenge?.startAt, challenge?.endAt, challenge?.periodLabel, challenge?.durationLabel],
|
||
);
|
||
|
||
const handleShare = async () => {
|
||
if (!challenge) {
|
||
return;
|
||
}
|
||
try {
|
||
await Share.share({
|
||
title: challenge.title,
|
||
message: `我正在参与「${challenge.title}」，一起坚持吧！`,
|
||
url: challenge.image,
|
||
});
|
||
} catch (error) {
|
||
console.warn('分享失败', error);
|
||
}
|
||
};
|
||
|
||
const handleJoin = async () => {
|
||
if (!id || joinStatus === 'loading') {
|
||
return;
|
||
}
|
||
try {
|
||
await dispatch(joinChallenge(id));
|
||
setShowCelebration(true)
|
||
} catch (error) {
|
||
Toast.error('加入挑战失败')
|
||
}
|
||
};
|
||
|
||
const handleLeave = () => {
|
||
if (!id || leaveStatus === 'loading') {
|
||
return;
|
||
}
|
||
dispatch(leaveChallenge(id));
|
||
};
|
||
|
||
const handleProgressReport = () => {
|
||
if (!id || progressStatus === 'loading') {
|
||
return;
|
||
}
|
||
dispatch(reportChallengeProgress({ id }));
|
||
};
|
||
|
||
const isJoined = challenge?.isJoined ?? false;
|
||
const isLoadingInitial = detailStatus === 'loading' && !challenge;
|
||
|
||
if (!id) {
|
||
return (
|
||
<SafeAreaView style={[styles.safeArea, { backgroundColor: colorTokens.background }]}>
|
||
<HeaderBar title="挑战详情" onBack={() => router.back()} withSafeTop transparent={false} />
|
||
<View style={styles.missingContainer}>
|
||
<Text style={[styles.missingText, { color: colorTokens.textSecondary }]}>未找到该挑战，稍后再试试吧。</Text>
|
||
</View>
|
||
</SafeAreaView>
|
||
);
|
||
}
|
||
|
||
if (isLoadingInitial) {
|
||
return (
|
||
<SafeAreaView style={[styles.safeArea, { backgroundColor: colorTokens.background }]}>
|
||
<HeaderBar title="挑战详情" onBack={() => router.back()} withSafeTop transparent={false} />
|
||
<View style={styles.missingContainer}>
|
||
<ActivityIndicator color={colorTokens.primary} />
|
||
<Text style={[styles.missingText, { color: colorTokens.textSecondary, marginTop: 16 }]}>加载挑战详情中…</Text>
|
||
</View>
|
||
</SafeAreaView>
|
||
);
|
||
}
|
||
|
||
if (!challenge) {
|
||
return (
|
||
<SafeAreaView style={[styles.safeArea, { backgroundColor: colorTokens.background }]}>
|
||
<HeaderBar title="挑战详情" onBack={() => router.back()} withSafeTop transparent={false} />
|
||
<View style={styles.missingContainer}>
|
||
<Text style={[styles.missingText, { color: colorTokens.textSecondary }]}>
|
||
{detailError ?? '未找到该挑战，稍后再试试吧。'}
|
||
</Text>
|
||
<TouchableOpacity
|
||
style={[styles.retryButton, { borderColor: colorTokens.primary }]}
|
||
activeOpacity={0.9}
|
||
onPress={() => dispatch(fetchChallengeDetail(id))}
|
||
>
|
||
<Text style={[styles.retryText, { color: colorTokens.primary }]}>重新加载</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
</SafeAreaView>
|
||
);
|
||
}
|
||
|
||
const highlightTitle = challenge.highlightTitle ?? '立即加入挑战';
|
||
const highlightSubtitle = challenge.highlightSubtitle ?? '邀请好友一起坚持，更容易收获成果';
|
||
const ctaLabel = joinStatus === 'loading' ? '加入中…' : challenge.ctaLabel ?? '立即加入挑战';
|
||
const participantsLabel = formatParticipantsLabel(challenge.participantsCount);
|
||
|
||
const inlineErrorMessage = detailStatus === 'failed' && detailError ? detailError : undefined;
|
||
const progressActionError =
|
||
(progressStatus !== 'loading' && progressError) || (leaveStatus !== 'loading' && leaveError) || undefined;
|
||
|
||
return (
|
||
<View style={styles.safeArea}>
|
||
<StatusBar barStyle="light-content" />
|
||
<View style={styles.container}>
|
||
<View pointerEvents="box-none" style={[styles.headerOverlay, { paddingTop: insets.top }]}>
|
||
<HeaderBar
|
||
title=""
|
||
backColor="white"
|
||
tone="light"
|
||
transparent
|
||
withSafeTop={false}
|
||
right={
|
||
<TouchableOpacity style={styles.circularButton} activeOpacity={0.85} onPress={handleShare}>
|
||
<Ionicons name="share-social-outline" size={20} color="#ffffff" />
|
||
</TouchableOpacity>
|
||
}
|
||
/>
|
||
</View>
|
||
|
||
<ScrollView
|
||
style={styles.scrollView}
|
||
bounces
|
||
showsVerticalScrollIndicator={false}
|
||
contentContainerStyle={[
|
||
styles.scrollContent,
|
||
{ paddingBottom: (Platform.OS === 'ios' ? 180 : 160) + insets.bottom },
|
||
]}
|
||
>
|
||
<View style={styles.heroContainer}>
|
||
<Image source={{ uri: challenge.image }} style={styles.heroImage} resizeMode="cover" />
|
||
<LinearGradient
|
||
colors={['rgba(0,0,0,0.35)', 'rgba(0,0,0,0.15)', 'rgba(244, 246, 255, 1)']}
|
||
style={StyleSheet.absoluteFillObject}
|
||
/>
|
||
</View>
|
||
|
||
<View style={styles.headerTextBlock}>
|
||
<Text style={styles.periodLabel}>{challenge.periodLabel ?? dateRangeLabel}</Text>
|
||
<Text style={styles.title}>{challenge.title}</Text>
|
||
{challenge.summary ? <Text style={styles.summary}>{challenge.summary}</Text> : null}
|
||
{inlineErrorMessage ? (
|
||
<View style={styles.inlineError}>
|
||
<Ionicons name="warning-outline" size={14} color="#FF6B6B" />
|
||
<Text style={styles.inlineErrorText}>{inlineErrorMessage}</Text>
|
||
</View>
|
||
) : null}
|
||
</View>
|
||
|
||
{progress && progressSegments ? (
|
||
<View>
|
||
<View style={styles.progressCardShadow}>
|
||
<LinearGradient
|
||
colors={['#ffffff', '#ffffff']}
|
||
start={{ x: 0, y: 0 }}
|
||
end={{ x: 1, y: 1 }}
|
||
style={styles.progressCard}
|
||
>
|
||
<View style={styles.progressHeaderRow}>
|
||
<View style={styles.progressBadgeRing}>
|
||
{progress.badge ? (
|
||
isHttpUrl(progress.badge) ? (
|
||
<Image source={{ uri: progress.badge }} style={styles.progressBadge} />
|
||
) : (
|
||
<View style={styles.progressBadgeFallback}>
|
||
<Text style={styles.progressBadgeText}>{progress.badge}</Text>
|
||
</View>
|
||
)
|
||
) : (
|
||
<View style={styles.progressBadgeFallback}>
|
||
<Text style={styles.progressBadgeText}>打卡中</Text>
|
||
</View>
|
||
)}
|
||
</View>
|
||
<View style={styles.progressHeadline}>
|
||
<Text style={styles.progressTitle}>{challenge.title}</Text>
|
||
{progress.subtitle ? <Text style={styles.progressSubtitle}>{progress.subtitle}</Text> : null}
|
||
</View>
|
||
<Text style={styles.progressRemaining}>剩余 {progress.remaining} 天</Text>
|
||
</View>
|
||
|
||
<View style={styles.progressMetaRow}>
|
||
<Text style={styles.progressMetaValue}>
|
||
{progress.completed} / {progress.target}
|
||
<Text style={styles.progressMetaSuffix}> 天</Text>
|
||
</Text>
|
||
</View>
|
||
|
||
<View style={styles.progressBarTrack}>
|
||
{Array.from({ length: progressSegments.segmentsCount }).map((_, index) => {
|
||
const isComplete = index < progressSegments.completedSegments;
|
||
const isFirst = index === 0;
|
||
const isLast = index === progressSegments.segmentsCount - 1;
|
||
return (
|
||
<View
|
||
key={`progress-segment-${index}`}
|
||
style={[
|
||
styles.progressBarSegment,
|
||
isComplete && styles.progressBarSegmentActive,
|
||
isFirst && styles.progressBarSegmentFirst,
|
||
isLast && styles.progressBarSegmentLast,
|
||
]}
|
||
/>
|
||
);
|
||
})}
|
||
</View>
|
||
|
||
{isJoined ? (
|
||
<>
|
||
<View style={styles.progressActionsRow}>
|
||
<TouchableOpacity
|
||
style={[
|
||
styles.progressPrimaryAction,
|
||
progressStatus === 'loading' && styles.progressActionDisabled,
|
||
]}
|
||
activeOpacity={0.9}
|
||
onPress={handleProgressReport}
|
||
disabled={progressStatus === 'loading'}
|
||
>
|
||
<Text style={styles.progressPrimaryActionText}>
|
||
{progressStatus === 'loading' ? '打卡中…' : '打卡 +1'}
|
||
</Text>
|
||
</TouchableOpacity>
|
||
<TouchableOpacity
|
||
style={[
|
||
styles.progressSecondaryAction,
|
||
leaveStatus === 'loading' && styles.progressActionDisabled,
|
||
]}
|
||
activeOpacity={0.9}
|
||
onPress={handleLeave}
|
||
disabled={leaveStatus === 'loading'}
|
||
>
|
||
<Text style={styles.progressSecondaryActionText}>
|
||
{leaveStatus === 'loading' ? '处理中…' : '退出挑战'}
|
||
</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
{progressActionError ? (
|
||
<Text style={styles.progressErrorText}>{progressActionError}</Text>
|
||
) : null}
|
||
</>
|
||
) : null}
|
||
</LinearGradient>
|
||
</View>
|
||
</View>
|
||
) : null}
|
||
|
||
<View style={styles.detailCard}>
|
||
<View style={styles.detailRow}>
|
||
<View style={styles.detailIconWrapper}>
|
||
<Ionicons name="calendar-outline" size={20} color="#4F5BD5" />
|
||
</View>
|
||
<View style={styles.detailTextWrapper}>
|
||
<Text style={styles.detailLabel}>{dateRangeLabel}</Text>
|
||
<Text style={styles.detailMeta}>{challenge.durationLabel}</Text>
|
||
</View>
|
||
</View>
|
||
|
||
<View style={styles.detailRow}>
|
||
<View style={styles.detailIconWrapper}>
|
||
<Ionicons name="flag-outline" size={20} color="#4F5BD5" />
|
||
</View>
|
||
<View style={styles.detailTextWrapper}>
|
||
<Text style={styles.detailLabel}>{challenge.requirementLabel}</Text>
|
||
<Text style={styles.detailMeta}>按日打卡自动累计</Text>
|
||
</View>
|
||
</View>
|
||
|
||
<View style={styles.detailRow}>
|
||
<View style={styles.detailIconWrapper}>
|
||
<Ionicons name="people-outline" size={20} color="#4F5BD5" />
|
||
</View>
|
||
<View style={[styles.detailTextWrapper, { flex: 1 }]}>
|
||
<Text style={styles.detailLabel}>{participantsLabel}</Text>
|
||
{participantAvatars.length ? (
|
||
<View style={styles.avatarRow}>
|
||
{participantAvatars.map((avatar, index) => (
|
||
<Image
|
||
key={`${avatar}-${index}`}
|
||
source={{ uri: avatar }}
|
||
style={[styles.avatar, index > 0 && styles.avatarOffset]}
|
||
/>
|
||
))}
|
||
{challenge.participantsCount && challenge.participantsCount > participantAvatars.length ? (
|
||
<TouchableOpacity style={styles.moreAvatarButton}>
|
||
<Text style={styles.moreAvatarText}>更多</Text>
|
||
</TouchableOpacity>
|
||
) : null}
|
||
</View>
|
||
) : null}
|
||
</View>
|
||
</View>
|
||
</View>
|
||
|
||
<View style={styles.sectionHeader}>
|
||
<Text style={styles.sectionTitle}>排行榜</Text>
|
||
<TouchableOpacity>
|
||
<Text style={styles.sectionAction}>查看全部</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
|
||
{challenge.rankingDescription ? (
|
||
<Text style={styles.sectionSubtitle}>{challenge.rankingDescription}</Text>
|
||
) : null}
|
||
|
||
<View style={styles.rankingCard}>
|
||
{rankingData.length ? (
|
||
rankingData.map((item, index) => (
|
||
<View key={item.id} style={[styles.rankingRow, index > 0 && styles.rankingRowDivider]}>
|
||
<View style={styles.rankingOrderCircle}>
|
||
<Text style={styles.rankingOrder}>{index + 1}</Text>
|
||
</View>
|
||
{item.avatar ? (
|
||
<Image source={{ uri: item.avatar }} style={styles.rankingAvatar} />
|
||
) : (
|
||
<View style={styles.rankingAvatarPlaceholder}>
|
||
<Ionicons name="person-outline" size={20} color="#6f7ba7" />
|
||
</View>
|
||
)}
|
||
<View style={styles.rankingInfo}>
|
||
<Text style={styles.rankingName}>{item.name}</Text>
|
||
<Text style={styles.rankingMetric}>{item.metric}</Text>
|
||
</View>
|
||
{item.badge ? <Text style={styles.rankingBadge}>{item.badge}</Text> : null}
|
||
</View>
|
||
))
|
||
) : (
|
||
<View style={styles.emptyRanking}>
|
||
<Text style={styles.emptyRankingText}>榜单即将开启，快来抢占席位。</Text>
|
||
</View>
|
||
)}
|
||
</View>
|
||
</ScrollView>
|
||
|
||
{!isJoined && (
|
||
<View pointerEvents="box-none" style={[styles.floatingCTAContainer, { paddingBottom: insets.bottom }]}>
|
||
<BlurView intensity={10} tint="light" style={styles.floatingCTABlur}>
|
||
<View style={styles.floatingCTAContent}>
|
||
<View style={styles.highlightCopy}>
|
||
<Text style={styles.highlightTitle}>{highlightTitle}</Text>
|
||
<Text style={styles.highlightSubtitle}>{highlightSubtitle}</Text>
|
||
{joinError ? <Text style={styles.ctaErrorText}>{joinError}</Text> : null}
|
||
</View>
|
||
<TouchableOpacity
|
||
style={styles.highlightButton}
|
||
activeOpacity={0.9}
|
||
onPress={handleJoin}
|
||
disabled={joinStatus === 'loading'}
|
||
>
|
||
<LinearGradient
|
||
colors={CTA_GRADIENT}
|
||
start={{ x: 0, y: 0 }}
|
||
end={{ x: 1, y: 1 }}
|
||
style={styles.highlightButtonBackground}
|
||
>
|
||
<Text style={styles.highlightButtonLabel}>{ctaLabel}</Text>
|
||
</LinearGradient>
|
||
</TouchableOpacity>
|
||
</View>
|
||
</BlurView>
|
||
</View>
|
||
)}
|
||
</View>
|
||
{showCelebration && (
|
||
<View pointerEvents="none" style={styles.celebrationOverlay}>
|
||
<LottieView
|
||
autoPlay
|
||
loop={false}
|
||
source={require('@/assets/lottie/Confetti.json')}
|
||
style={styles.celebrationAnimation}
|
||
/>
|
||
</View>
|
||
)}
|
||
</View>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
flex: 1,
|
||
},
|
||
safeArea: {
|
||
flex: 1,
|
||
backgroundColor: '#f3f4fb',
|
||
},
|
||
headerOverlay: {
|
||
position: 'absolute',
|
||
left: 0,
|
||
right: 0,
|
||
top: 0,
|
||
zIndex: 20,
|
||
},
|
||
heroContainer: {
|
||
height: HERO_HEIGHT,
|
||
width: '100%',
|
||
overflow: 'hidden',
|
||
borderBottomLeftRadius: 36,
|
||
borderBottomRightRadius: 36,
|
||
},
|
||
heroImage: {
|
||
width: '100%',
|
||
height: '100%',
|
||
},
|
||
scrollView: {
|
||
flex: 1,
|
||
},
|
||
scrollContent: {
|
||
paddingBottom: Platform.select({ ios: 40, default: 28 }),
|
||
},
|
||
progressCardShadow: {
|
||
marginTop: 20,
|
||
marginHorizontal: 24,
|
||
shadowColor: 'rgba(104, 119, 255, 0.25)',
|
||
shadowOffset: { width: 0, height: 16 },
|
||
shadowOpacity: 0.24,
|
||
shadowRadius: 28,
|
||
elevation: 12,
|
||
borderRadius: 28,
|
||
},
|
||
progressCard: {
|
||
borderRadius: 28,
|
||
paddingVertical: 24,
|
||
paddingHorizontal: 22,
|
||
backgroundColor: '#ffffff',
|
||
},
|
||
progressHeaderRow: {
|
||
flexDirection: 'row',
|
||
alignItems: 'flex-start',
|
||
},
|
||
progressBadgeRing: {
|
||
width: 68,
|
||
height: 68,
|
||
borderRadius: 34,
|
||
backgroundColor: '#ffffff',
|
||
padding: 6,
|
||
shadowColor: 'rgba(67, 82, 186, 0.16)',
|
||
shadowOffset: { width: 0, height: 6 },
|
||
shadowOpacity: 0.4,
|
||
shadowRadius: 12,
|
||
elevation: 6,
|
||
marginRight: 16,
|
||
},
|
||
progressBadge: {
|
||
width: '100%',
|
||
height: '100%',
|
||
borderRadius: 28,
|
||
},
|
||
progressBadgeFallback: {
|
||
flex: 1,
|
||
height: '100%',
|
||
borderRadius: 22,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
backgroundColor: '#EEF0FF',
|
||
paddingHorizontal: 6,
|
||
},
|
||
progressBadgeText: {
|
||
fontSize: 12,
|
||
fontWeight: '700',
|
||
color: '#4F5BD5',
|
||
textAlign: 'center',
|
||
},
|
||
progressHeadline: {
|
||
flex: 1,
|
||
},
|
||
progressTitle: {
|
||
fontSize: 18,
|
||
fontWeight: '700',
|
||
color: '#1c1f3a',
|
||
},
|
||
progressSubtitle: {
|
||
marginTop: 6,
|
||
fontSize: 13,
|
||
color: '#5f6a97',
|
||
},
|
||
progressRemaining: {
|
||
fontSize: 13,
|
||
fontWeight: '600',
|
||
color: '#707baf',
|
||
marginLeft: 16,
|
||
alignSelf: 'flex-start',
|
||
},
|
||
progressMetaRow: {
|
||
marginTop: 18,
|
||
},
|
||
progressMetaValue: {
|
||
fontSize: 16,
|
||
fontWeight: '700',
|
||
color: '#4F5BD5',
|
||
},
|
||
progressMetaSuffix: {
|
||
fontSize: 13,
|
||
fontWeight: '500',
|
||
color: '#7a86bb',
|
||
},
|
||
progressBarTrack: {
|
||
marginTop: 16,
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
backgroundColor: '#eceffa',
|
||
borderRadius: 12,
|
||
paddingHorizontal: 6,
|
||
paddingVertical: 4,
|
||
},
|
||
progressBarSegment: {
|
||
flex: 1,
|
||
height: 8,
|
||
borderRadius: 4,
|
||
backgroundColor: '#dfe4f6',
|
||
marginHorizontal: 3,
|
||
},
|
||
progressBarSegmentActive: {
|
||
backgroundColor: '#5E8BFF',
|
||
},
|
||
progressBarSegmentFirst: {
|
||
marginLeft: 0,
|
||
},
|
||
progressBarSegmentLast: {
|
||
marginRight: 0,
|
||
},
|
||
progressActionsRow: {
|
||
flexDirection: 'row',
|
||
marginTop: 20,
|
||
},
|
||
progressPrimaryAction: {
|
||
flex: 1,
|
||
paddingVertical: 12,
|
||
borderRadius: 18,
|
||
backgroundColor: '#5E8BFF',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
marginRight: 12,
|
||
},
|
||
progressSecondaryAction: {
|
||
flex: 1,
|
||
paddingVertical: 12,
|
||
borderRadius: 18,
|
||
borderWidth: 1,
|
||
borderColor: '#d6dcff',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
progressActionDisabled: {
|
||
opacity: 0.6,
|
||
},
|
||
progressPrimaryActionText: {
|
||
fontSize: 14,
|
||
fontWeight: '700',
|
||
color: '#ffffff',
|
||
},
|
||
progressSecondaryActionText: {
|
||
fontSize: 14,
|
||
fontWeight: '700',
|
||
color: '#4F5BD5',
|
||
},
|
||
progressErrorText: {
|
||
marginTop: 12,
|
||
fontSize: 12,
|
||
color: '#FF6B6B',
|
||
textAlign: 'center',
|
||
},
|
||
floatingCTAContainer: {
|
||
position: 'absolute',
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
paddingHorizontal: 20,
|
||
},
|
||
floatingCTABlur: {
|
||
borderRadius: 24,
|
||
overflow: 'hidden',
|
||
borderWidth: 1,
|
||
borderColor: 'rgba(255,255,255,0.6)',
|
||
backgroundColor: 'rgba(243, 244, 251, 0.85)',
|
||
},
|
||
floatingCTAContent: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
paddingVertical: 16,
|
||
paddingHorizontal: 20,
|
||
},
|
||
highlightCopy: {
|
||
flex: 1,
|
||
marginRight: 16,
|
||
},
|
||
headerTextBlock: {
|
||
paddingHorizontal: 24,
|
||
marginTop: 24,
|
||
alignItems: 'center',
|
||
},
|
||
periodLabel: {
|
||
fontSize: 14,
|
||
color: '#596095',
|
||
letterSpacing: 0.2,
|
||
},
|
||
title: {
|
||
marginTop: 10,
|
||
fontSize: 24,
|
||
fontWeight: '800',
|
||
color: '#1c1f3a',
|
||
textAlign: 'center',
|
||
},
|
||
summary: {
|
||
marginTop: 12,
|
||
fontSize: 14,
|
||
lineHeight: 20,
|
||
color: '#7080b4',
|
||
textAlign: 'center',
|
||
},
|
||
inlineError: {
|
||
marginTop: 12,
|
||
paddingHorizontal: 12,
|
||
paddingVertical: 8,
|
||
borderRadius: 12,
|
||
backgroundColor: 'rgba(255, 107, 107, 0.12)',
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
},
|
||
inlineErrorText: {
|
||
marginLeft: 6,
|
||
fontSize: 12,
|
||
color: '#FF6B6B',
|
||
flexShrink: 1,
|
||
},
|
||
detailCard: {
|
||
marginTop: 28,
|
||
marginHorizontal: 20,
|
||
padding: 20,
|
||
borderRadius: 28,
|
||
backgroundColor: '#ffffff',
|
||
shadowColor: 'rgba(30, 41, 59, 0.18)',
|
||
shadowOpacity: 0.2,
|
||
shadowRadius: 20,
|
||
shadowOffset: { width: 0, height: 12 },
|
||
elevation: 8,
|
||
gap: 20,
|
||
},
|
||
detailRow: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
},
|
||
detailIconWrapper: {
|
||
width: 42,
|
||
height: 42,
|
||
borderRadius: 21,
|
||
backgroundColor: '#EFF1FF',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
detailTextWrapper: {
|
||
marginLeft: 14,
|
||
},
|
||
detailLabel: {
|
||
fontSize: 15,
|
||
fontWeight: '600',
|
||
color: '#1c1f3a',
|
||
},
|
||
detailMeta: {
|
||
marginTop: 4,
|
||
fontSize: 12,
|
||
color: '#6f7ba7',
|
||
},
|
||
avatarRow: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
marginTop: 12,
|
||
},
|
||
avatar: {
|
||
width: 36,
|
||
height: 36,
|
||
borderRadius: 18,
|
||
borderWidth: 2,
|
||
borderColor: '#fff',
|
||
},
|
||
avatarOffset: {
|
||
marginLeft: -12,
|
||
},
|
||
moreAvatarButton: {
|
||
marginLeft: 12,
|
||
paddingHorizontal: 12,
|
||
paddingVertical: 6,
|
||
borderRadius: 14,
|
||
backgroundColor: '#EEF0FF',
|
||
},
|
||
moreAvatarText: {
|
||
fontSize: 12,
|
||
color: '#4F5BD5',
|
||
fontWeight: '600',
|
||
},
|
||
sectionHeader: {
|
||
marginTop: 36,
|
||
marginHorizontal: 24,
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
},
|
||
sectionTitle: {
|
||
fontSize: 18,
|
||
fontWeight: '700',
|
||
color: '#1c1f3a',
|
||
},
|
||
sectionAction: {
|
||
fontSize: 13,
|
||
fontWeight: '600',
|
||
color: '#5F6BF0',
|
||
},
|
||
sectionSubtitle: {
|
||
marginTop: 8,
|
||
marginHorizontal: 24,
|
||
fontSize: 13,
|
||
color: '#6f7ba7',
|
||
lineHeight: 18,
|
||
},
|
||
rankingCard: {
|
||
marginTop: 20,
|
||
marginHorizontal: 24,
|
||
borderRadius: 24,
|
||
backgroundColor: '#ffffff',
|
||
paddingVertical: 10,
|
||
shadowColor: 'rgba(30, 41, 59, 0.12)',
|
||
shadowOpacity: 0.16,
|
||
shadowRadius: 18,
|
||
shadowOffset: { width: 0, height: 10 },
|
||
elevation: 6,
|
||
},
|
||
rankingRow: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
paddingVertical: 12,
|
||
paddingHorizontal: 18,
|
||
},
|
||
rankingRowDivider: {
|
||
borderTopWidth: StyleSheet.hairlineWidth,
|
||
borderTopColor: '#E5E7FF',
|
||
},
|
||
rankingOrderCircle: {
|
||
width: 32,
|
||
height: 32,
|
||
borderRadius: 16,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
backgroundColor: '#EEF0FF',
|
||
marginRight: 12,
|
||
},
|
||
rankingOrder: {
|
||
fontSize: 15,
|
||
fontWeight: '700',
|
||
color: '#4F5BD5',
|
||
},
|
||
rankingAvatar: {
|
||
width: 44,
|
||
height: 44,
|
||
borderRadius: 22,
|
||
marginRight: 14,
|
||
},
|
||
rankingAvatarPlaceholder: {
|
||
width: 44,
|
||
height: 44,
|
||
borderRadius: 22,
|
||
marginRight: 14,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
backgroundColor: '#EEF0FF',
|
||
},
|
||
rankingInfo: {
|
||
flex: 1,
|
||
},
|
||
rankingName: {
|
||
fontSize: 15,
|
||
fontWeight: '700',
|
||
color: '#1c1f3a',
|
||
},
|
||
rankingMetric: {
|
||
marginTop: 4,
|
||
fontSize: 13,
|
||
color: '#6f7ba7',
|
||
},
|
||
rankingBadge: {
|
||
fontSize: 12,
|
||
color: '#A67CFF',
|
||
fontWeight: '700',
|
||
},
|
||
emptyRanking: {
|
||
paddingVertical: 40,
|
||
alignItems: 'center',
|
||
},
|
||
emptyRankingText: {
|
||
fontSize: 14,
|
||
color: '#6f7ba7',
|
||
},
|
||
highlightTitle: {
|
||
fontSize: 16,
|
||
fontWeight: '700',
|
||
color: '#1c1f3a',
|
||
},
|
||
highlightSubtitle: {
|
||
marginTop: 4,
|
||
fontSize: 12,
|
||
color: '#5f6a97',
|
||
lineHeight: 18,
|
||
},
|
||
ctaErrorText: {
|
||
marginTop: 8,
|
||
fontSize: 12,
|
||
color: '#FF6B6B',
|
||
},
|
||
highlightButton: {
|
||
borderRadius: 22,
|
||
overflow: 'hidden',
|
||
},
|
||
highlightButtonBackground: {
|
||
borderRadius: 22,
|
||
paddingVertical: 10,
|
||
paddingHorizontal: 18,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
highlightButtonLabel: {
|
||
fontSize: 14,
|
||
fontWeight: '700',
|
||
color: '#ffffff',
|
||
},
|
||
circularButton: {
|
||
width: 40,
|
||
height: 40,
|
||
borderRadius: 20,
|
||
backgroundColor: 'rgba(255,255,255,0.24)',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
borderWidth: 1,
|
||
borderColor: 'rgba(255,255,255,0.45)',
|
||
},
|
||
shareIcon: {
|
||
fontSize: 18,
|
||
color: '#ffffff',
|
||
fontWeight: '700',
|
||
},
|
||
missingContainer: {
|
||
flex: 1,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
paddingHorizontal: 32,
|
||
},
|
||
missingText: {
|
||
fontSize: 16,
|
||
textAlign: 'center',
|
||
},
|
||
retryButton: {
|
||
marginTop: 18,
|
||
paddingHorizontal: 20,
|
||
paddingVertical: 10,
|
||
borderRadius: 22,
|
||
borderWidth: 1,
|
||
},
|
||
retryText: {
|
||
fontSize: 14,
|
||
fontWeight: '600',
|
||
},
|
||
celebrationOverlay: {
|
||
...StyleSheet.absoluteFillObject,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
zIndex: 40,
|
||
},
|
||
celebrationAnimation: {
|
||
width: width * 1.3,
|
||
height: width * 1.3,
|
||
},
|
||
});
|