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

feat(badges): 添加勋章系统和展示功能

Browse Source 
实现完整的勋章系统，包括勋章列表展示、自动弹窗展示和分享功能。

- 新增勋章列表页面，支持已获得和待解锁勋章的分类展示
- 在个人中心添加勋章预览模块，显示前3个勋章和总数统计
- 实现勋章展示弹窗，支持动画效果和玻璃态UI
- 添加勋章分享功能，可生成分享卡片
- 新增 badgesSlice 管理勋章状态，包括获取、排序和计数逻辑
- 添加勋章服务 API 封装，支持获取勋章列表和标记已展示
- 完善中英文国际化文案
This commit is contained in:
richarjiang
2025-11-14 17:17:17 +08:00
parent 8cffbb990a
commit 705d921c14
10 changed files with 1125 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,14 @@
import ActivityHeatMap from '@/components/ActivityHeatMap';
import { BadgeShowcaseModal } from '@/components/badges/BadgeShowcaseModal';
import { PRIVACY_POLICY_URL, USER_AGREEMENT_URL } from '@/constants/Agree';
import { ROUTES } from '@/constants/Routes';
import { getTabBarBottomPadding } from '@/constants/TabBar';
import { useMembershipModal } from '@/contexts/MembershipModalContext';
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
import { useAuthGuard } from '@/hooks/useAuthGuard';
import type { BadgeDto } from '@/services/badges';
import { reportBadgeShowcaseDisplayed } from '@/services/badges';
import { fetchAvailableBadges, selectBadgeCounts, selectBadgePreview, selectSortedBadges } from '@/store/badgesSlice';
import { selectActiveMembershipPlanName } from '@/store/membershipSlice';
import { DEFAULT_MEMBER_NAME, fetchActivityHistory, fetchMyProfile } from '@/store/userSlice';
import { getItem, setItem } from '@/utils/kvStore';
@@ -105,6 +109,10 @@ export default function PersonalScreen() {
openMembershipModal();
}, [ensureLoggedIn, openMembershipModal]);
const handleBadgesPress = useCallback(() => {
router.push(ROUTES.BADGES);
}, [router]);
// 计算底部间距
const bottomPadding = useMemo(() => {
return getTabBarBottomPadding(60) + (insets?.bottom ?? 0);
@@ -113,6 +121,48 @@ export default function PersonalScreen() {
// 直接使用 Redux 中的用户信息，避免重复状态管理
const userProfile = useAppSelector((state) => state.user.profile);
const activeMembershipPlanName = useAppSelector(selectActiveMembershipPlanName);
const badgePreview = useAppSelector(selectBadgePreview);
const badgeCounts = useAppSelector(selectBadgeCounts);
const sortedBadges = useAppSelector(selectSortedBadges);
const [showcaseBadge, setShowcaseBadge] = useState<BadgeDto | null>(null);
const autoShownBadgeCodes = useRef<Set<string>>(new Set());
const openBadgeShowcase = useCallback((badge: BadgeDto) => {
autoShownBadgeCodes.current.add(badge.code);
setShowcaseBadge(badge);
}, []);
useEffect(() => {
if (showcaseBadge) {
return;
}
const nextBadgeToShow = sortedBadges.find(
(badge) => badge.isAwarded && badge.isShow === false && !autoShownBadgeCodes.current.has(badge.code)
);
if (nextBadgeToShow) {
openBadgeShowcase(nextBadgeToShow);
}
}, [openBadgeShowcase, showcaseBadge, sortedBadges]);
const handleBadgeShowcaseClose = useCallback(async () => {
if (!showcaseBadge) {
return;
}
const badgeCode = showcaseBadge.code;
setShowcaseBadge(null);
try {
await reportBadgeShowcaseDisplayed(badgeCode);
} catch (error) {
log.warn('report-badge-showcase-failed', error);
}
}, [showcaseBadge]);
console.log('badgePreview', badgePreview);
// 页面聚焦时获取最新用户信息
@@ -120,6 +170,7 @@ export default function PersonalScreen() {
React.useCallback(() => {
dispatch(fetchMyProfile());
dispatch(fetchActivityHistory());
dispatch(fetchAvailableBadges());
// 不再需要在这里加载推送偏好设置，因为已移到通知设置页面
// 加载开发者模式状态
loadDeveloperModeState();
@@ -367,6 +418,64 @@ export default function PersonalScreen() {
</View>
);
const BadgesPreviewSection = () => {
const previewBadges = badgePreview.slice(0, 3);
const hasBadges = previewBadges.length > 0;
const extraCount = Math.max(0, badgeCounts.total - previewBadges.length);
return (
<View style={styles.sectionContainer}>
<TouchableOpacity style={[styles.cardContainer, styles.badgesRowCard]} onPress={handleBadgesPress} activeOpacity={0.85}>
<Text style={styles.badgesRowTitle}>{t('personal.badgesPreview.title')}</Text>
{hasBadges ? (
<View style={styles.badgesRowContent}>
<View style={styles.badgesStack}>
{previewBadges.map((badge, index) => (
<View
key={badge.code}
style={[
styles.badgeCompactBubble,
badge.isAwarded ? styles.badgeCompactBubbleEarned : styles.badgeCompactBubbleLocked,
{
marginLeft: index === 0 ? 0 : -12,
zIndex: previewBadges.length - index,
},
]}
>
{badge.imageUrl ? (
<Image
source={{ uri: badge.imageUrl }}
style={styles.badgeCompactImage}
contentFit="cover"
transition={200}
/>
) : (
<View style={styles.badgeCompactFallback}>
<Text style={styles.badgeCompactFallbackText}>{badge.icon ?? '🏅'}</Text>
</View>
)}
{!badge.isAwarded && (
<View style={styles.badgeCompactOverlay}>
<Ionicons name="lock-closed" as any size={16} color="#FFFFFF" />
</View>
)}
</View>
))}
</View>
{extraCount > 0 && (
<View style={[styles.badgeCompactBubble, styles.badgeExtraBubble, styles.badgeExtraBubbleInline]}>
<Text style={styles.badgeExtraText}>+{extraCount}</Text>
</View>
)}
</View>
) : (
<Text style={styles.badgesRowEmpty}>{t('personal.badgesPreview.empty')}</Text>
)}
</TouchableOpacity>
</View>
);
};
// 菜单项组件
const MenuSection = ({ title, items }: { title: string; items: MenuItem[] }) => (
<View style={styles.sectionContainer}>
@@ -590,6 +699,7 @@ export default function PersonalScreen() {
<UserHeader />
{userProfile.isVip ? <VipMembershipCard /> : <MembershipBanner />}
<StatsSection />
<BadgesPreviewSection />
<View style={styles.fishRecordContainer}>
{/* <Image
source={{ uri: 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/images/icons/icon-profile-fish.png' }}
@@ -605,6 +715,12 @@ export default function PersonalScreen() {
<MenuSection key={index} title={section.title} items={section.items} />
))}
</ScrollView>
<BadgeShowcaseModal
badge={showcaseBadge}
onClose={handleBadgeShowcaseClose}
username={displayName}
appName="Out Live"
/>
<LanguageSelectorModal />
</View>
);
@@ -871,6 +987,87 @@ const styles = StyleSheet.create({
color: '#6C757D',
fontWeight: '500',
},
badgesRowCard: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: 20,
paddingVertical: 16,
borderRadius: 16,
backgroundColor: '#FFFFFF',
shadowColor: '#000',
shadowOffset: { width: 0, height: 6 },
shadowOpacity: 0.05,
shadowRadius: 10,
elevation: 2,
},
badgesRowTitle: {
fontSize: 16,
fontWeight: '700',
color: '#111827',
},
badgesRowContent: {
flexDirection: 'row',
alignItems: 'center',
},
badgesStack: {
flexDirection: 'row',
alignItems: 'center',
},
badgeCompactBubble: {
width: 32,
height: 32,
borderRadius: 22,
alignItems: 'center',
justifyContent: 'center',
marginLeft: 8,
overflow: 'hidden',
position: 'relative',
},
badgeCompactBubbleEarned: {
backgroundColor: 'rgba(16, 185, 129, 0.18)',
},
badgeCompactBubbleLocked: {
backgroundColor: 'rgba(226, 232, 240, 0.9)',
},
badgeCompactImage: {
width: '100%',
height: '100%',
},
badgeCompactFallback: {
...StyleSheet.absoluteFillObject,
alignItems: 'center',
justifyContent: 'center',
},
badgeCompactFallbackText: {
fontSize: 18,
fontWeight: '600',
color: '#475467',
},
badgeCompactOverlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'rgba(15, 23, 42, 0.45)',
alignItems: 'center',
justifyContent: 'center',
},
badgeExtraBubble: {
backgroundColor: 'rgba(124, 58, 237, 0.12)',
borderWidth: 1,
borderColor: 'rgba(124, 58, 237, 0.35)',
},
badgeExtraBubbleInline: {
marginLeft: 12,
},
badgeExtraText: {
fontSize: 14,
fontWeight: '700',
color: '#5B21B6',
},
badgesRowEmpty: {
fontSize: 13,
color: '#6B7280',
fontWeight: '500',
},
// 菜单项
menuItem: {
flexDirection: 'row',

1
app/_layout.tsx
View File

@@ -440,6 +440,7 @@ export default function RootLayout() {
name="health-data-permissions"
options={{ headerShown: false }}
/>
<Stack.Screen name="badges/index" options={{ headerShown: false }} />
<Stack.Screen name="+not-found" />
</Stack>
<StatusBar style="dark" />

242
app/badges/index.tsx Normal file
View File

@@ -0,0 +1,242 @@
import { HeaderBar } from '@/components/ui/HeaderBar';
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
import type { BadgeDto } from '@/services/badges';
import { fetchAvailableBadges, selectBadgesLoading, selectSortedBadges } from '@/store/badgesSlice';
import { DEFAULT_MEMBER_NAME, selectUserProfile } from '@/store/userSlice';
import { BadgeShowcaseModal } from '@/components/badges/BadgeShowcaseModal';
import { Toast } from '@/utils/toast.utils';
import { Ionicons } from '@expo/vector-icons';
import { useFocusEffect } from '@react-navigation/native';
import * as Haptics from 'expo-haptics';
import { Image } from 'expo-image';
import React, { useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { FlatList, Pressable, RefreshControl, StyleSheet, Text, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
export default function BadgesScreen() {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const insets = useSafeAreaInsets();
const badges = useAppSelector(selectSortedBadges);
const loading = useAppSelector(selectBadgesLoading);
const userProfile = useAppSelector(selectUserProfile);
const [refreshing, setRefreshing] = useState(false);
const [showcaseBadge, setShowcaseBadge] = useState<BadgeDto | null>(null);
useFocusEffect(
useCallback(() => {
dispatch(fetchAvailableBadges());
}, [dispatch])
);
const handleRefresh = useCallback(async () => {
setRefreshing(true);
try {
await dispatch(fetchAvailableBadges()).unwrap();
} catch (error: any) {
const message = typeof error === 'string' ? error : error?.message ?? 'Failed to refresh badges';
Toast.error(message);
} finally {
setRefreshing(false);
}
}, [dispatch]);
const gridData = useMemo(() => badges, [badges]);
const handleBadgePress = useCallback(async (badge: BadgeDto) => {
try {
await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
} catch {
// Best-effort haptics; ignore if unavailable
}
setShowcaseBadge(badge);
}, []);
const renderBadgeTile = ({ item }: { item: BadgeDto }) => {
const isAwarded = item.isAwarded;
return (
<Pressable
style={({ pressed }) => [styles.badgeTile, pressed && styles.badgeTilePressed]}
onPress={() => handleBadgePress(item)}
accessibilityRole="button"
>
<View style={[styles.badgeImageContainer, isAwarded ? styles.badgeImageEarned : styles.badgeImageLocked]}>
{item.imageUrl ? (
<Image source={{ uri: item.imageUrl }} style={styles.badgeImage} contentFit="cover" transition={200} />
) : (
<View style={styles.badgeImageFallback}>
<Text style={styles.badgeImageFallbackText}>{item.icon ?? '🏅'}</Text>
</View>
)}
{!isAwarded && (
<View style={styles.badgeOverlay}>
<Ionicons name="lock-closed" size={16} color="#FFFFFF" />
</View>
)}
</View>
<Text style={styles.badgeTitle} numberOfLines={1}>{item.name}</Text>
<Text style={styles.badgeDescription} numberOfLines={2}>{item.description}</Text>
<Text style={[styles.badgeStatus, isAwarded ? styles.badgeStatusEarned : styles.badgeStatusLocked]}>
{isAwarded
? t('badges.status.earned')
: t('badges.status.locked')}
</Text>
</Pressable>
);
};
const headerOffset = insets.top + 64;
return (
<View style={styles.container}>
<HeaderBar
title={t('badges.title')}
/>
<FlatList
data={gridData}
keyExtractor={(item) => item.code}
numColumns={3}
contentContainerStyle={[
styles.listContent,
{ paddingTop: headerOffset, paddingBottom: insets.bottom + 24 },
]}
columnWrapperStyle={styles.columnWrapper}
renderItem={renderBadgeTile}
ListHeaderComponent={null}
ListEmptyComponent={
<View style={styles.emptyState}>
<Text style={styles.emptyStateTitle}>{t('badges.empty.title')}</Text>
<Text style={styles.emptyStateDescription}>{t('badges.empty.description')}</Text>
</View>
}
refreshControl={
<RefreshControl refreshing={refreshing || loading} onRefresh={handleRefresh} tintColor="#7C3AED" />
}
showsVerticalScrollIndicator={false}
/>
<BadgeShowcaseModal
badge={showcaseBadge}
onClose={() => setShowcaseBadge(null)}
username={userProfile?.name && userProfile.name.trim() ? userProfile.name : DEFAULT_MEMBER_NAME}
appName="Out Live"
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff',
},
listContent: {
paddingHorizontal: 16,
minHeight: '100%',
backgroundColor: '#ffffff'
},
columnWrapper: {
justifyContent: 'space-between',
marginBottom: 16,
},
badgeTile: {
flex: 1,
marginHorizontal: 4,
padding: 12,
alignItems: 'center',
borderRadius: 16,
backgroundColor: '#FFFFFF',
shadowColor: '#0F172A',
shadowOffset: { width: 0, height: 8 },
shadowOpacity: 0.06,
shadowRadius: 12,
elevation: 2,
},
badgeTilePressed: {
transform: [{ scale: 0.97 }],
shadowOpacity: 0.02,
},
badgeImageContainer: {
width: 88,
height: 88,
borderRadius: 28,
overflow: 'hidden',
marginBottom: 10,
position: 'relative',
},
badgeImageEarned: {
borderWidth: 1.5,
borderColor: 'rgba(16,185,129,0.6)',
},
badgeImageLocked: {
borderWidth: 1.5,
borderColor: 'rgba(148,163,184,0.5)',
},
badgeImage: {
width: '100%',
height: '100%',
},
badgeOverlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'rgba(15,23,42,0.45)',
alignItems: 'center',
justifyContent: 'center',
},
badgeImageFallback: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#F3F4F6',
},
badgeImageFallbackText: {
fontSize: 36,
},
badgeTitle: {
fontSize: 14,
fontWeight: '700',
color: '#111827',
},
badgeDescription: {
fontSize: 12,
color: '#6B7280',
textAlign: 'center',
marginTop: 4,
},
badgeStatus: {
fontSize: 11,
fontWeight: '600',
marginTop: 6,
},
badgeStatusEarned: {
color: '#0F766E',
},
badgeStatusLocked: {
color: '#9CA3AF',
},
emptyState: {
alignItems: 'center',
padding: 32,
borderRadius: 24,
backgroundColor: '#FFFFFF',
marginTop: 24,
shadowColor: '#000',
shadowOffset: { width: 0, height: 6 },
shadowOpacity: 0.08,
shadowRadius: 12,
elevation: 3,
},
emptyStateTitle: {
fontSize: 18,
fontWeight: '700',
color: '#0F172A',
},
emptyStateDescription: {
fontSize: 14,
color: '#475467',
textAlign: 'center',
marginTop: 8,
lineHeight: 20,
},
});

1
app/challenges/[id]/index.tsx
View File

@@ -1084,3 +1084,4 @@ const styles = StyleSheet.create({
fontWeight: '600',
},
});

434
components/badges/BadgeShowcaseModal.tsx Normal file
View File

@@ -0,0 +1,434 @@
import { Toast } from '@/utils/toast.utils';
import { Ionicons } from '@expo/vector-icons';
import { BlurView } from 'expo-blur';
import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
import { Image } from 'expo-image';
import { LinearGradient } from 'expo-linear-gradient';
import dayjs from 'dayjs';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Animated, Modal, Platform, Pressable, Share, StyleSheet, Text, View } from 'react-native';
import { captureRef } from 'react-native-view-shot';
import type { BadgeDto } from '@/services/badges';
export type BadgeShowcaseModalProps = {
badge: BadgeDto | null;
onClose: () => void;
username: string;
appName: string;
visible?: boolean;
};
export const BadgeShowcaseModal = ({ badge, onClose, username, appName, visible }: BadgeShowcaseModalProps) => {
const { t } = useTranslation();
const isVisible = visible ?? Boolean(badge);
const scaleAnim = useRef(new Animated.Value(0.8)).current;
const glowAnim = useRef(new Animated.Value(0)).current;
const pulseAnim = useRef<Animated.CompositeAnimation | null>(null);
const shareCardRef = useRef<View>(null);
const [sharing, setSharing] = useState(false);
useEffect(() => {
if (!isVisible) {
scaleAnim.setValue(0.8);
glowAnim.setValue(0);
pulseAnim.current?.stop();
return;
}
Animated.spring(scaleAnim, {
toValue: 1,
stiffness: 220,
damping: 18,
mass: 0.8,
useNativeDriver: true,
}).start();
pulseAnim.current = Animated.loop(
Animated.sequence([
Animated.timing(glowAnim, {
toValue: 1,
duration: 1600,
useNativeDriver: true,
}),
Animated.timing(glowAnim, {
toValue: 0,
duration: 1400,
useNativeDriver: true,
}),
])
);
pulseAnim.current.start();
return () => {
pulseAnim.current?.stop();
};
}, [glowAnim, isVisible, scaleAnim]);
const glowScale = glowAnim.interpolate({
inputRange: [0, 1],
outputRange: [1, 1.25],
});
const glowOpacity = glowAnim.interpolate({
inputRange: [0, 1],
outputRange: [0.45, 0.9],
});
const handleShareBadge = useCallback(async () => {
if (!badge?.isAwarded || !shareCardRef.current) {
return;
}
setSharing(true);
try {
Toast.show({ type: 'info', text1: t('badges.share.generating', '正在生成分享卡片…') });
const uri = await captureRef(shareCardRef, {
format: 'png',
quality: 0.95,
});
const shareMessage = t('badges.share.message', {
badgeName: badge.name,
defaultValue: `我刚刚在 Digital Pilates 解锁了「${badge.name}」勋章！`,
});
await Share.share({
title: badge.name,
message: shareMessage,
url: Platform.OS === 'ios' ? uri : `file://${uri}`,
});
} catch (error) {
console.warn('badge-share-failed', error);
Toast.error(t('badges.share.failed', '分享失败，请稍后再试'));
} finally {
setSharing(false);
}
}, [badge, t]);
if (!badge) {
return null;
}
return (
<Modal transparent animationType="fade" visible={isVisible} onRequestClose={onClose} statusBarTranslucent>
<View style={styles.modalBackdrop}>
<BlurView intensity={50} tint="dark" style={StyleSheet.absoluteFill}>
<Pressable style={StyleSheet.absoluteFill} onPress={onClose} />
</BlurView>
<Animated.View
style={[styles.showcaseCard, { transform: [{ scale: scaleAnim }] }]}
accessibilityRole="image"
accessibilityLabel={badge.name}
accessibilityHint={badge.description}
>
<BadgeShowcaseContent
badge={badge}
glowOpacity={glowOpacity}
glowScale={glowScale}
username={username}
appName={appName}
statusText={badge.isAwarded ? t('badges.status.earned') : t('badges.status.locked')}
/>
{badge.isAwarded ? (
isLiquidGlassAvailable() ? (
<Pressable
style={({ pressed }) => [styles.shareCta, pressed && styles.shareCtaPressed]}
onPress={handleShareBadge}
accessibilityRole="button"
>
<GlassView glassEffectStyle="regular" tintColor="rgba(255, 255, 255, 1)" isInteractive>
<View style={[styles.shareCtaContent, styles.shareCtaGlassInner]}>
<Ionicons name="share-social" size={18} color="#0F172A" />
<Text style={styles.shareCtaLabel}>
{sharing ? t('badges.share.processing', '生成中…') : t('badges.share.cta', '分享')}
</Text>
</View>
</GlassView>
</Pressable>
) : (
<Pressable
style={({ pressed }) => [styles.shareCta, pressed && styles.shareCtaPressed]}
onPress={handleShareBadge}
accessibilityRole="button"
>
<LinearGradient
colors={['#FCD34D', '#F97316']}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
style={[styles.shareCtaGradient, styles.shareCtaContent]}
>
<Ionicons name="share-social" size={18} color="#1C1917" />
<Text style={styles.shareCtaLabel}>
{sharing ? t('badges.share.processing', '生成中…') : t('badges.share.cta', '分享')}
</Text>
</LinearGradient>
</Pressable>
)
) : null}
<Pressable style={styles.closeButton} onPress={onClose} accessibilityRole="button">
<Ionicons name="close" size={20} color="#0F172A" />
</Pressable>
</Animated.View>
<View style={styles.shareCardOffscreen}>
<View ref={shareCardRef} collapsable={false}>
<BadgeShowcaseContent
badge={badge}
glowOpacity={glowOpacity}
glowScale={glowScale}
username={username}
appName={appName}
statusText={badge.isAwarded ? t('badges.status.earned') : t('badges.status.locked')}
/>
</View>
</View>
</View>
</Modal>
);
};
type BadgeShowcaseContentProps = {
badge: BadgeDto;
glowOpacity: Animated.AnimatedInterpolation<string | number>;
glowScale: Animated.AnimatedInterpolation<string | number>;
username: string;
appName: string;
statusText: string;
};
const BadgeShowcaseContent = ({ badge, glowOpacity, glowScale, username, appName, statusText }: BadgeShowcaseContentProps) => {
const awardDate = badge.earnedAt ?? badge.awardedAt;
const formattedAwardDate = badge.isAwarded && awardDate ? dayjs(awardDate).format('YYYY-MM-DD') : null;
return (
<View>
<LinearGradient
colors={badge.isAwarded ? ['#34D399', '#059669'] : ['#6366F1', '#312E81']}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
style={styles.showcaseGradient}
>
<View style={styles.showcaseGlowWrapper}>
<Animated.View pointerEvents="none" style={[styles.glowRing, { opacity: glowOpacity, transform: [{ scale: glowScale }] }]} />
<View style={styles.showcaseImageShell}>
{badge.imageUrl ? (
<Image source={{ uri: badge.imageUrl }} style={styles.showcaseImage} contentFit="contain" />
) : (
<View style={styles.showcaseImageFallback}>
<Text style={styles.showcaseImageFallbackText}>{badge.icon ?? '🏅'}</Text>
</View>
)}
</View>
</View>
</LinearGradient>
<View style={styles.showcaseTextBlock}>
<View style={styles.showcaseMetaRow}>
<Text style={styles.showcaseUsername}>@{username}</Text>
<View style={styles.showcaseAppPill}>
<Ionicons name="planet" size={12} color="#0F172A" />
<Text style={styles.showcaseAppText}>{appName}</Text>
</View>
</View>
<Text style={styles.showcaseTitle}>{badge.name}</Text>
<Text style={styles.showcaseDescription}>{badge.description}</Text>
<View style={styles.statusRow}>
<View style={[styles.statusPill, badge.isAwarded ? styles.statusPillEarned : styles.statusPillLocked]}>
<Ionicons name={badge.isAwarded ? 'sparkles' : 'lock-closed'} size={14} color={badge.isAwarded ? '#064E3B' : '#1E1B4B'} />
<Text style={[styles.statusPillText, badge.isAwarded ? styles.statusPillTextEarned : styles.statusPillTextLocked]}>
{statusText}
</Text>
</View>
{formattedAwardDate ? (
<Text style={styles.awardDateLabel}>{formattedAwardDate}</Text>
) : null}
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
modalBackdrop: {
flex: 1,
backgroundColor: 'rgba(3,7,18,0.75)',
justifyContent: 'center',
alignItems: 'center',
padding: 24,
},
showcaseCard: {
width: '90%',
maxWidth: 360,
borderRadius: 28,
overflow: 'hidden',
backgroundColor: '#F8FAFC',
paddingBottom: 24,
},
showcaseGradient: {
height: 280,
borderBottomLeftRadius: 32,
borderBottomRightRadius: 32,
justifyContent: 'center',
alignItems: 'center',
padding: 24,
},
showcaseGlowWrapper: {
width: 220,
height: 220,
justifyContent: 'center',
alignItems: 'center',
},
glowRing: {
position: 'absolute',
width: 240,
height: 240,
borderRadius: 120,
backgroundColor: 'rgba(255,255,255,0.35)',
shadowColor: '#FFFFFF',
shadowOpacity: 0.9,
shadowRadius: 20,
},
showcaseImageShell: {
width: 180,
height: 180,
borderRadius: 90,
backgroundColor: 'rgba(255,255,255,0.2)',
borderWidth: 1.5,
borderColor: 'rgba(255,255,255,0.45)',
overflow: 'hidden',
},
showcaseImage: {
width: '100%',
height: '100%',
},
showcaseImageFallback: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(255,255,255,0.15)',
},
showcaseImageFallbackText: {
fontSize: 74,
},
showcaseTextBlock: {
paddingHorizontal: 24,
paddingTop: 24,
},
showcaseMetaRow: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 12,
},
showcaseUsername: {
fontSize: 14,
fontWeight: '600',
color: '#0F172A',
},
showcaseAppPill: {
flexDirection: 'row',
alignItems: 'center',
columnGap: 4,
paddingHorizontal: 12,
paddingVertical: 6,
borderRadius: 999,
backgroundColor: '#FDE68A',
},
showcaseAppText: {
fontSize: 12,
fontWeight: '600',
color: '#0F172A',
},
showcaseTitle: {
fontSize: 24,
fontWeight: '700',
color: '#0F172A',
textAlign: 'center',
},
showcaseDescription: {
marginTop: 12,
fontSize: 14,
lineHeight: 20,
color: '#475467',
textAlign: 'center',
},
statusPill: {
flexDirection: 'row',
alignItems: 'center',
columnGap: 6,
paddingHorizontal: 16,
paddingVertical: 8,
borderRadius: 999,
},
statusPillEarned: {
backgroundColor: 'rgba(16,185,129,0.18)',
},
statusPillLocked: {
backgroundColor: 'rgba(129,140,248,0.18)',
},
statusPillText: {
fontSize: 13,
fontWeight: '600',
},
statusPillTextEarned: {
color: '#047857',
},
statusPillTextLocked: {
color: '#312E81',
},
statusRow: {
marginTop: 18,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
columnGap: 12,
},
awardDateLabel: {
fontSize: 13,
color: '#475467',
fontWeight: '600',
},
closeButton: {
position: 'absolute',
top: 18,
right: 18,
width: 36,
height: 36,
borderRadius: 18,
backgroundColor: 'rgba(255,255,255,0.9)',
alignItems: 'center',
justifyContent: 'center',
},
shareCta: {
marginTop: 16,
marginHorizontal: 24,
borderRadius: 999,
overflow: 'hidden',
},
shareCtaGradient: {
paddingVertical: 14,
paddingHorizontal: 20,
borderRadius: 999,
},
shareCtaContent: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
columnGap: 10,
},
shareCtaLabel: {
fontSize: 15,
fontWeight: '700',
color: '#1C1917',
},
shareCtaPressed: {
opacity: 0.85,
},
shareCtaGlassInner: {
paddingVertical: 14,
paddingHorizontal: 20,
},
shareCardOffscreen: {
position: 'absolute',
opacity: 0,
top: -10000,
left: 0,
right: 0,
},
});

3
constants/Routes.ts
View File

@@ -65,6 +65,9 @@ export const ROUTES = {
// 健康权限披露
HEALTH_DATA_PERMISSIONS: '/health-data-permissions',
// 勋章
BADGES: '/badges',
// 目标管理路由 (已移至tab中)
// GOAL_MANAGEMENT: '/goal-management',

96
i18n/index.ts
View File

@@ -17,6 +17,14 @@ const personalScreenResources = {
aiUsage: '免费AI次数: {{value}}',
aiUsageUnlimited: '无限',
fishRecord: '能量记录',
badgesPreview: {
title: '我的勋章',
subtitle: '记录你的荣耀时刻',
cta: '查看全部',
loading: '正在同步勋章...',
empty: '完成睡眠或挑战任务即可解锁首枚勋章',
lockedHint: '坚持训练即可点亮更多勋章',
},
stats: {
height: '身高',
weight: '体重',
@@ -71,6 +79,84 @@ const personalScreenResources = {
},
};
const badgesScreenResources = {
title: '勋章馆',
subtitle: '点亮每一次坚持',
hero: {
highlight: '保持连续打卡即可解锁更多稀有勋章',
earnedLabel: '已获得',
totalLabel: '总数',
progressLabel: '解锁进度',
},
categories: {
all: '全部',
sleep: '睡眠',
exercise: '运动',
diet: '饮食',
challenge: '挑战',
social: '社交',
special: '特别',
},
rarities: {
common: '普通',
uncommon: '少见',
rare: '稀有',
epic: '史诗',
legendary: '传说',
},
status: {
earned: '已获得',
locked: '待解锁',
earnedAt: '{{date}} 获得',
},
legend: '稀有度说明',
filterLabel: '勋章分类',
empty: {
title: '还没有勋章',
description: '完成睡眠、运动、挑战等任务即可点亮你的第一枚勋章。',
action: '去探索计划',
},
};
const badgesScreenResourcesEn = {
title: 'Badge Gallery',
subtitle: 'Celebrate every effort',
hero: {
highlight: 'Keep checking in to unlock rarer badges.',
earnedLabel: 'Earned',
totalLabel: 'Total',
progressLabel: 'Progress',
},
categories: {
all: 'All',
sleep: 'Sleep',
exercise: 'Exercise',
diet: 'Nutrition',
challenge: 'Challenge',
social: 'Social',
special: 'Special',
},
rarities: {
common: 'Common',
uncommon: 'Uncommon',
rare: 'Rare',
epic: 'Epic',
legendary: 'Legendary',
},
status: {
earned: 'Unlocked',
locked: 'Locked',
earnedAt: 'Unlocked on {{date}}',
},
legend: 'Rarity legend',
filterLabel: 'Badge categories',
empty: {
title: 'No badges yet',
description: 'Complete sleep, workout, or challenge tasks to earn your first badge.',
action: 'Explore plans',
},
};
const editProfileResources = {
title: '编辑资料',
fields: {
@@ -748,6 +834,7 @@ const resources = {
zh: {
translation: {
personal: personalScreenResources,
badges: badgesScreenResources,
editProfile: editProfileResources,
healthPermissions: healthPermissionsResources,
statistics: statisticsResources,
@@ -764,6 +851,14 @@ const resources = {
aiUsage: 'Free AI credits: {{value}}',
aiUsageUnlimited: 'Unlimited',
fishRecord: 'Energy log',
badgesPreview: {
title: 'My badges',
subtitle: 'Celebrate every milestone',
cta: 'View all',
loading: 'Syncing your badges…',
empty: 'Complete sleep or challenge tasks to unlock your first badge.',
lockedHint: 'Keep building the habit to unlock more.',
},
stats: {
height: 'Height',
weight: 'Weight',
@@ -817,6 +912,7 @@ const resources = {
},
},
},
badges: badgesScreenResourcesEn,
editProfile: {
title: 'Edit Profile',
fields: {

29
services/badges.ts Normal file
View File

@@ -0,0 +1,29 @@
import { api } from './api';
export type BadgeCategory = 'sleep' | 'exercise' | 'diet' | 'challenge' | 'social' | 'special';
export type BadgeRarity = 'common' | 'uncommon' | 'rare' | 'epic' | 'legendary';
export interface BadgeDto {
code: string;
name: string;
description: string;
category: BadgeCategory;
rarity?: BadgeRarity;
imageUrl: string;
icon?: string;
sortOrder?: number;
earnedAt?: string | null;
awardedAt?: string | null;
isAwarded: boolean;
isShow?: boolean;
}
export async function getAvailableBadges(): Promise<BadgeDto[]> {
return api.get<BadgeDto[]>('/api/users/badges/available');
}
export async function reportBadgeShowcaseDisplayed(badgeCode: string): Promise<boolean> {
const response = await api.post<{ success: boolean }>('/users/badges/mark-shown', { badgeCode });
return Boolean(response?.success);
}

120
store/badgesSlice.ts Normal file
View File

@@ -0,0 +1,120 @@
import type { BadgeDto, BadgeRarity } from '@/services/badges';
import { getAvailableBadges } from '@/services/badges';
import { createAsyncThunk, createSelector, createSlice } from '@reduxjs/toolkit';
import dayjs from 'dayjs';
import type { RootState } from './index';
export interface BadgesState {
items: BadgeDto[];
loading: boolean;
error: string | null;
lastFetched: string | null;
}
const initialState: BadgesState = {
items: [],
loading: false,
error: null,
lastFetched: null,
};
export const fetchAvailableBadges = createAsyncThunk<BadgeDto[], void, { rejectValue: string }>(
'badges/fetchAvailable',
async (_, { rejectWithValue }) => {
try {
return await getAvailableBadges();
} catch (error: any) {
const message = error?.message ?? '获取勋章列表失败';
return rejectWithValue(message);
}
},
{
condition: (_, { getState }) => {
const state = getState() as RootState;
const { loading } = state.badges ?? {};
return !loading;
},
}
);
const badgesSlice = createSlice({
name: 'badges',
initialState,
reducers: {},
extraReducers: (builder) => {
builder
.addCase(fetchAvailableBadges.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(fetchAvailableBadges.fulfilled, (state, action) => {
state.loading = false;
state.items = action.payload;
state.lastFetched = new Date().toISOString();
})
.addCase(fetchAvailableBadges.rejected, (state, action) => {
state.loading = false;
state.error = typeof action.payload === 'string' ? action.payload : action.error.message ?? '加载勋章失败';
});
},
});
export default badgesSlice.reducer;
const selectBadgesSlice = (state: RootState) => state.badges;
export const selectBadgesState = selectBadgesSlice;
export const selectBadgesLoading = (state: RootState) => state.badges.loading;
export const selectBadgesError = (state: RootState) => state.badges.error;
export const selectBadges = (state: RootState) => state.badges.items;
const rarityPriority: Record<BadgeRarity, number> = {
common: 0,
uncommon: 1,
rare: 2,
epic: 3,
legendary: 4,
};
const compareBadges = (a: BadgeDto, b: BadgeDto) => {
if (a.isAwarded !== b.isAwarded) {
return a.isAwarded ? -1 : 1;
}
const sortOrderA = a.sortOrder ?? Number.MAX_SAFE_INTEGER;
const sortOrderB = b.sortOrder ?? Number.MAX_SAFE_INTEGER;
if (sortOrderA !== sortOrderB) {
return sortOrderA - sortOrderB;
}
if (a.isAwarded && b.isAwarded) {
const earnedDiff = (b.earnedAt ? dayjs(b.earnedAt).valueOf() : 0) - (a.earnedAt ? dayjs(a.earnedAt).valueOf() : 0);
if (earnedDiff !== 0) {
return earnedDiff;
}
}
const rarityKeyA = a.rarity ?? 'common';
const rarityKeyB = b.rarity ?? 'common';
const rarityDiff = rarityPriority[rarityKeyB] - rarityPriority[rarityKeyA];
if (rarityDiff !== 0) {
return rarityDiff;
}
return a.name.localeCompare(b.name);
};
export const selectSortedBadges = createSelector([selectBadges], (items) => {
return [...items].sort(compareBadges);
});
export const selectBadgeCounts = createSelector([selectBadges], (items) => {
const earned = items.filter((badge) => badge.isAwarded).length;
return {
earned,
total: items.length,
};
});
export const selectBadgePreview = createSelector([selectSortedBadges], (items) => items.slice(0, 3));

2
store/index.ts
View File

@@ -1,5 +1,6 @@
import { persistActiveFastingSchedule } from '@/utils/fasting';
import { configureStore, createListenerMiddleware } from '@reduxjs/toolkit';
import badgesReducer from './badgesSlice';
import challengesReducer from './challengesSlice';
import checkinReducer, { addExercise, autoSyncCheckin, removeExercise, replaceExercises, setNote, toggleExerciseCompleted } from './checkinSlice';
import circumferenceReducer from './circumferenceSlice';
@@ -111,6 +112,7 @@ export const store = configureStore({
water: waterReducer,
fasting: fastingReducer,
medications: medicationsReducer,
badges: badgesReducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().prepend(listenerMiddleware.middleware),