feat(app): add version check system and enhance internationalization support
Add comprehensive app update checking functionality with: - New VersionCheckContext for managing update detection and notifications - VersionUpdateModal UI component for presenting update information - Version service API integration with platform-specific update URLs - Version check menu item in personal settings with manual/automatic checking Enhance internationalization across workout features: - Complete workout type translations for English and Chinese - Localized workout detail modal with proper date/time formatting - Locale-aware date formatting in fitness rings detail - Workout notification improvements with deep linking to specific workout details Improve UI/UX with better chart rendering, sizing fixes, and enhanced navigation flow. Update app version to 1.1.3 and include app version in API headers for better tracking.
This commit is contained in:
343
components/VersionUpdateModal.tsx
Normal file
343
components/VersionUpdateModal.tsx
Normal file
@@ -0,0 +1,343 @@
|
||||
import type { VersionInfo } from '@/services/version';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import React, { useMemo } from 'react';
|
||||
import {
|
||||
Modal,
|
||||
Pressable,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
|
||||
type VersionUpdateModalProps = {
|
||||
visible: boolean;
|
||||
info: VersionInfo | null;
|
||||
currentVersion: string;
|
||||
onClose: () => void;
|
||||
onUpdate: () => void;
|
||||
strings: {
|
||||
title: string;
|
||||
tag: string;
|
||||
currentVersionLabel: string;
|
||||
latestVersionLabel: string;
|
||||
updatesTitle: string;
|
||||
fallbackNote: string;
|
||||
remindLater: string;
|
||||
updateCta: string;
|
||||
};
|
||||
};
|
||||
|
||||
export function VersionUpdateModal({
|
||||
visible,
|
||||
info,
|
||||
currentVersion,
|
||||
onClose,
|
||||
onUpdate,
|
||||
strings,
|
||||
}: VersionUpdateModalProps) {
|
||||
const notes = useMemo(() => {
|
||||
if (!info) return [];
|
||||
|
||||
if (info.releaseNotes && info.releaseNotes.trim().length > 0) {
|
||||
return info.releaseNotes
|
||||
.split(/\r?\n+/)
|
||||
.map((line) => line.trim())
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
if (info.updateMessage && info.updateMessage.trim().length > 0) {
|
||||
return [info.updateMessage.trim()];
|
||||
}
|
||||
|
||||
return [];
|
||||
}, [info]);
|
||||
|
||||
if (!info) return null;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
animationType="fade"
|
||||
transparent
|
||||
visible={visible}
|
||||
onRequestClose={onClose}
|
||||
>
|
||||
<View style={styles.overlay}>
|
||||
<Pressable style={StyleSheet.absoluteFill} onPress={onClose} />
|
||||
<View style={styles.cardShadow}>
|
||||
<LinearGradient
|
||||
colors={['#0F1B61', '#0F274A', '#0A1A3A']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.card}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={['rgba(255,255,255,0.18)', 'rgba(255,255,255,0.03)']}
|
||||
style={styles.glowOrb}
|
||||
/>
|
||||
<LinearGradient
|
||||
colors={['rgba(255,255,255,0.08)', 'transparent']}
|
||||
style={styles.ribbon}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
/>
|
||||
<View style={styles.headerRow}>
|
||||
<View style={styles.tag}>
|
||||
<Ionicons name="sparkles" size={14} color="#0F1B61" />
|
||||
<Text style={styles.tagText}>{strings.tag}</Text>
|
||||
</View>
|
||||
<TouchableOpacity onPress={onClose} style={styles.closeButton}>
|
||||
<Ionicons name="close" size={18} color="#E5E7EB" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={styles.titleBlock}>
|
||||
<Text style={styles.title}>{strings.title}</Text>
|
||||
<Text style={styles.subtitle}>
|
||||
{info.latestVersion ? `v${info.latestVersion}` : ''}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.metaRow}>
|
||||
<View style={styles.metaChip}>
|
||||
<Ionicons name="time-outline" size={14} color="#C7D2FE" />
|
||||
<Text style={styles.metaText}>
|
||||
{strings.currentVersionLabel} v{currentVersion}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.metaChip}>
|
||||
<Ionicons name="arrow-up-circle-outline" size={14} color="#C7D2FE" />
|
||||
<Text style={styles.metaText}>
|
||||
{strings.latestVersionLabel} v{info.latestVersion}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.noteCard}>
|
||||
<Text style={styles.noteTitle}>{strings.updatesTitle}</Text>
|
||||
{notes.length > 0 ? (
|
||||
notes.map((line, idx) => (
|
||||
<View key={`${idx}-${line}`} style={styles.noteItem}>
|
||||
<View style={styles.bullet}>
|
||||
<Ionicons name="ellipse" size={6} color="#6EE7B7" />
|
||||
</View>
|
||||
<Text style={styles.noteText}>{line}</Text>
|
||||
</View>
|
||||
))
|
||||
) : (
|
||||
<Text style={styles.noteText}>{strings.fallbackNote}</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={styles.actions}>
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.85}
|
||||
onPress={onClose}
|
||||
style={styles.secondaryButton}
|
||||
>
|
||||
<Text style={styles.secondaryText}>{strings.remindLater}</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.9}
|
||||
onPress={onUpdate}
|
||||
style={styles.primaryButtonShadow}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={['#6EE7B7', '#3B82F6']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.primaryButton}
|
||||
>
|
||||
<Ionicons name="cloud-download-outline" size={18} color="#0B1236" />
|
||||
<Text style={styles.primaryText}>{strings.updateCta}</Text>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</LinearGradient>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
overlay: {
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(7, 11, 34, 0.65)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 20,
|
||||
},
|
||||
cardShadow: {
|
||||
width: '100%',
|
||||
maxWidth: 420,
|
||||
shadowColor: '#0B1236',
|
||||
shadowOpacity: 0.35,
|
||||
shadowOffset: { width: 0, height: 16 },
|
||||
shadowRadius: 30,
|
||||
elevation: 8,
|
||||
},
|
||||
card: {
|
||||
borderRadius: 24,
|
||||
padding: 20,
|
||||
overflow: 'hidden',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.08)',
|
||||
},
|
||||
glowOrb: {
|
||||
position: 'absolute',
|
||||
width: 220,
|
||||
height: 220,
|
||||
borderRadius: 110,
|
||||
right: -60,
|
||||
top: -80,
|
||||
opacity: 0.8,
|
||||
},
|
||||
ribbon: {
|
||||
position: 'absolute',
|
||||
left: -120,
|
||||
bottom: -120,
|
||||
width: 260,
|
||||
height: 260,
|
||||
transform: [{ rotate: '-8deg' }],
|
||||
opacity: 0.6,
|
||||
},
|
||||
headerRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
tag: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 14,
|
||||
backgroundColor: '#A5B4FC',
|
||||
},
|
||||
tagText: {
|
||||
color: '#0F1B61',
|
||||
fontWeight: '700',
|
||||
marginLeft: 6,
|
||||
fontSize: 12,
|
||||
letterSpacing: 0.3,
|
||||
},
|
||||
closeButton: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 16,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'rgba(255,255,255,0.06)',
|
||||
},
|
||||
titleBlock: {
|
||||
marginTop: 14,
|
||||
marginBottom: 8,
|
||||
},
|
||||
title: {
|
||||
fontSize: 24,
|
||||
fontWeight: '800',
|
||||
color: '#F9FAFB',
|
||||
letterSpacing: 0.2,
|
||||
},
|
||||
subtitle: {
|
||||
color: '#C7D2FE',
|
||||
marginTop: 6,
|
||||
fontSize: 15,
|
||||
},
|
||||
metaRow: {
|
||||
flexDirection: 'row',
|
||||
marginTop: 10,
|
||||
gap: 8,
|
||||
flexWrap: 'wrap',
|
||||
},
|
||||
metaChip: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(255,255,255,0.08)',
|
||||
borderRadius: 12,
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 8,
|
||||
},
|
||||
metaText: {
|
||||
color: '#E5E7EB',
|
||||
marginLeft: 6,
|
||||
fontSize: 12,
|
||||
},
|
||||
noteCard: {
|
||||
marginTop: 16,
|
||||
borderRadius: 16,
|
||||
padding: 14,
|
||||
backgroundColor: 'rgba(255,255,255,0.06)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.04)',
|
||||
},
|
||||
noteTitle: {
|
||||
color: '#F9FAFB',
|
||||
fontWeight: '700',
|
||||
fontSize: 15,
|
||||
marginBottom: 8,
|
||||
},
|
||||
noteItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-start',
|
||||
marginTop: 8,
|
||||
},
|
||||
bullet: {
|
||||
width: 18,
|
||||
alignItems: 'center',
|
||||
marginTop: 6,
|
||||
},
|
||||
noteText: {
|
||||
flex: 1,
|
||||
color: '#E5E7EB',
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
},
|
||||
actions: {
|
||||
marginTop: 18,
|
||||
flexDirection: 'row',
|
||||
gap: 10,
|
||||
},
|
||||
secondaryButton: {
|
||||
flex: 1,
|
||||
height: 48,
|
||||
borderRadius: 14,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.16)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'rgba(255,255,255,0.08)',
|
||||
},
|
||||
secondaryText: {
|
||||
color: '#E5E7EB',
|
||||
fontWeight: '600',
|
||||
fontSize: 14,
|
||||
},
|
||||
primaryButtonShadow: {
|
||||
flex: 1,
|
||||
height: 48,
|
||||
borderRadius: 14,
|
||||
overflow: 'hidden',
|
||||
shadowColor: '#1E40AF',
|
||||
shadowOpacity: 0.4,
|
||||
shadowOffset: { width: 0, height: 12 },
|
||||
shadowRadius: 14,
|
||||
elevation: 6,
|
||||
},
|
||||
primaryButton: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
primaryText: {
|
||||
color: '#0B1236',
|
||||
fontWeight: '800',
|
||||
fontSize: 15,
|
||||
},
|
||||
});
|
||||
|
||||
export default VersionUpdateModal;
|
||||
@@ -1,10 +1,11 @@
|
||||
import { MaterialCommunityIcons } from '@expo/vector-icons';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/en';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Animated,
|
||||
Dimensions,
|
||||
Modal,
|
||||
ScrollView,
|
||||
@@ -60,63 +61,49 @@ export function WorkoutDetailModal({
|
||||
onRetry,
|
||||
errorMessage,
|
||||
}: WorkoutDetailModalProps) {
|
||||
const { t } = useI18n();
|
||||
const animation = useRef(new Animated.Value(visible ? 1 : 0)).current;
|
||||
const { t, i18n } = useI18n();
|
||||
const [isMounted, setIsMounted] = useState(visible);
|
||||
const [shouldRenderChart, setShouldRenderChart] = useState(visible);
|
||||
const [showIntensityInfo, setShowIntensityInfo] = useState(false);
|
||||
|
||||
const locale = useMemo(() => (i18n.language?.startsWith('en') ? 'en' : 'zh-cn'), [i18n.language]);
|
||||
|
||||
useEffect(() => {
|
||||
if (visible) {
|
||||
setIsMounted(true);
|
||||
Animated.timing(animation, {
|
||||
toValue: 1,
|
||||
duration: 280,
|
||||
useNativeDriver: true,
|
||||
}).start();
|
||||
setShouldRenderChart(true);
|
||||
} else {
|
||||
Animated.timing(animation, {
|
||||
toValue: 0,
|
||||
duration: 240,
|
||||
useNativeDriver: true,
|
||||
}).start(({ finished }) => {
|
||||
if (finished) {
|
||||
setIsMounted(false);
|
||||
}
|
||||
});
|
||||
|
||||
setShouldRenderChart(false);
|
||||
setIsMounted(false);
|
||||
setShowIntensityInfo(false);
|
||||
}
|
||||
}, [visible, animation]);
|
||||
|
||||
const translateY = animation.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [SHEET_MAX_HEIGHT, 0],
|
||||
});
|
||||
|
||||
const backdropOpacity = animation.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [0, 1],
|
||||
});
|
||||
}, [visible]);
|
||||
|
||||
const activityName = workout
|
||||
? getWorkoutTypeDisplayName(workout.workoutActivityType as WorkoutActivityType)
|
||||
: '';
|
||||
const chartWidth = useMemo(
|
||||
() => Math.max(Dimensions.get('window').width - 96, 240),
|
||||
[]
|
||||
);
|
||||
|
||||
const dateInfo = useMemo(() => {
|
||||
if (!workout) {
|
||||
return { title: '', subtitle: '' };
|
||||
}
|
||||
|
||||
const date = dayjs(workout.startDate || workout.endDate);
|
||||
const date = dayjs(workout.startDate || workout.endDate).locale(locale);
|
||||
if (!date.isValid()) {
|
||||
return { title: '', subtitle: '' };
|
||||
}
|
||||
|
||||
return {
|
||||
title: date.format('M月D日'),
|
||||
subtitle: date.format('YYYY年M月D日 dddd HH:mm'),
|
||||
title: locale === 'en' ? date.format('MMM D') : date.format('M月D日'),
|
||||
subtitle: locale === 'en'
|
||||
? date.format('dddd, MMM D, YYYY HH:mm')
|
||||
: date.format('YYYY年M月D日 dddd HH:mm'),
|
||||
};
|
||||
}, [workout]);
|
||||
}, [locale, workout]);
|
||||
|
||||
const heartRateChart = useMemo(() => {
|
||||
if (!metrics?.heartRateSeries?.length) {
|
||||
@@ -158,23 +145,16 @@ export function WorkoutDetailModal({
|
||||
return (
|
||||
<Modal
|
||||
transparent
|
||||
visible={isMounted}
|
||||
animationType="none"
|
||||
visible={visible}
|
||||
animationType='slide'
|
||||
onRequestClose={onClose}
|
||||
>
|
||||
<View style={styles.modalContainer}>
|
||||
<TouchableWithoutFeedback onPress={handleBackdropPress}>
|
||||
<Animated.View style={[styles.backdrop, { opacity: backdropOpacity }]} />
|
||||
<View style={styles.backdrop} />
|
||||
</TouchableWithoutFeedback>
|
||||
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.sheetContainer,
|
||||
{
|
||||
transform: [{ translateY }],
|
||||
},
|
||||
]}
|
||||
>
|
||||
<View style={styles.sheetContainer}>
|
||||
<LinearGradient
|
||||
colors={['#FFFFFF', '#F3F5FF']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
@@ -208,7 +188,7 @@ export function WorkoutDetailModal({
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={styles.contentContainer}
|
||||
>
|
||||
<View style={styles.summaryCard}>
|
||||
<View style={[styles.summaryCard, loading ? styles.summaryCardLoading : null]}>
|
||||
<View style={styles.summaryHeader}>
|
||||
<Text style={styles.activityName}>{activityName}</Text>
|
||||
{intensityBadge ? (
|
||||
@@ -225,7 +205,9 @@ export function WorkoutDetailModal({
|
||||
) : null}
|
||||
</View>
|
||||
<Text style={styles.summarySubtitle}>
|
||||
{dayjs(workout?.startDate || workout?.endDate).format('YYYY年M月D日 dddd HH:mm')}
|
||||
{dayjs(workout?.startDate || workout?.endDate)
|
||||
.locale(locale)
|
||||
.format(locale === 'en' ? 'dddd, MMM D, YYYY HH:mm' : 'YYYY年M月D日 dddd HH:mm')}
|
||||
</Text>
|
||||
|
||||
{loading ? (
|
||||
@@ -288,7 +270,7 @@ export function WorkoutDetailModal({
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={styles.section}>
|
||||
<View style={[styles.section, loading ? styles.sectionHeartRateLoading : null]}>
|
||||
<View style={styles.sectionHeader}>
|
||||
<Text style={styles.sectionTitle}>{t('workoutDetail.sections.heartRateRange')}</Text>
|
||||
</View>
|
||||
@@ -323,41 +305,49 @@ export function WorkoutDetailModal({
|
||||
{heartRateChart ? (
|
||||
LineChart ? (
|
||||
<View style={styles.chartWrapper}>
|
||||
{/* @ts-ignore - react-native-chart-kit types are outdated */}
|
||||
<LineChart
|
||||
data={{
|
||||
labels: heartRateChart.labels,
|
||||
datasets: [
|
||||
{
|
||||
data: heartRateChart.data,
|
||||
color: () => '#5C55FF',
|
||||
strokeWidth: 2,
|
||||
{shouldRenderChart ? (
|
||||
/* @ts-ignore - react-native-chart-kit types are outdated */
|
||||
<LineChart
|
||||
data={{
|
||||
labels: heartRateChart.labels,
|
||||
datasets: [
|
||||
{
|
||||
data: heartRateChart.data,
|
||||
color: () => '#5C55FF',
|
||||
strokeWidth: 2,
|
||||
},
|
||||
],
|
||||
}}
|
||||
width={chartWidth}
|
||||
height={220}
|
||||
fromZero={false}
|
||||
yAxisSuffix={t('workoutDetail.sections.heartRateUnit')}
|
||||
withInnerLines={false}
|
||||
bezier
|
||||
paddingRight={48}
|
||||
chartConfig={{
|
||||
backgroundColor: '#FFFFFF',
|
||||
backgroundGradientFrom: '#FFFFFF',
|
||||
backgroundGradientTo: '#FFFFFF',
|
||||
decimalPlaces: 0,
|
||||
color: (opacity = 1) => `rgba(92, 85, 255, ${opacity})`,
|
||||
labelColor: (opacity = 1) => `rgba(98, 105, 138, ${opacity})`,
|
||||
propsForDots: {
|
||||
r: '3',
|
||||
strokeWidth: '2',
|
||||
stroke: '#FFFFFF',
|
||||
},
|
||||
],
|
||||
}}
|
||||
width={Dimensions.get('window').width - 72}
|
||||
height={220}
|
||||
fromZero={false}
|
||||
yAxisSuffix={t('workoutDetail.sections.heartRateUnit')}
|
||||
withInnerLines={false}
|
||||
bezier
|
||||
chartConfig={{
|
||||
backgroundColor: '#FFFFFF',
|
||||
backgroundGradientFrom: '#FFFFFF',
|
||||
backgroundGradientTo: '#FFFFFF',
|
||||
decimalPlaces: 0,
|
||||
color: (opacity = 1) => `rgba(92, 85, 255, ${opacity})`,
|
||||
labelColor: (opacity = 1) => `rgba(98, 105, 138, ${opacity})`,
|
||||
propsForDots: {
|
||||
r: '3',
|
||||
strokeWidth: '2',
|
||||
stroke: '#FFFFFF',
|
||||
},
|
||||
fillShadowGradientFromOpacity: 0.1,
|
||||
fillShadowGradientToOpacity: 0.02,
|
||||
}}
|
||||
style={styles.chartStyle}
|
||||
/>
|
||||
fillShadowGradientFromOpacity: 0.1,
|
||||
fillShadowGradientToOpacity: 0.02,
|
||||
}}
|
||||
style={styles.chartStyle}
|
||||
/>
|
||||
) : (
|
||||
<View style={[styles.chartLoading, { width: chartWidth }]}>
|
||||
<ActivityIndicator color="#5C55FF" />
|
||||
<Text style={styles.chartLoadingText}>{t('workoutDetail.loading')}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.chartEmpty}>
|
||||
@@ -381,7 +371,7 @@ export function WorkoutDetailModal({
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={styles.section}>
|
||||
<View style={[styles.section, loading ? styles.sectionZonesLoading : null]}>
|
||||
<View style={styles.sectionHeader}>
|
||||
<Text style={styles.sectionTitle}>{t('workoutDetail.sections.heartRateZones')}</Text>
|
||||
</View>
|
||||
@@ -391,7 +381,7 @@ export function WorkoutDetailModal({
|
||||
<ActivityIndicator color="#5C55FF" />
|
||||
</View>
|
||||
) : metrics ? (
|
||||
metrics.heartRateZones.map(renderHeartRateZone)
|
||||
metrics.heartRateZones.map((zone) => renderHeartRateZone(zone, t))
|
||||
) : (
|
||||
<Text style={styles.errorTextSmall}>{t('workoutDetail.errors.noZoneStats')}</Text>
|
||||
)}
|
||||
@@ -399,7 +389,7 @@ export function WorkoutDetailModal({
|
||||
|
||||
<View style={styles.homeIndicatorSpacer} />
|
||||
</ScrollView>
|
||||
</Animated.View>
|
||||
</View>
|
||||
{showIntensityInfo ? (
|
||||
<Modal
|
||||
transparent
|
||||
@@ -513,6 +503,7 @@ function trimHeartRateSeries(series: WorkoutDetailMetrics['heartRateSeries']) {
|
||||
|
||||
// 遍历所有点，选择重要点
|
||||
let minDistance = Math.max(1, Math.floor(n / HEART_RATE_CHART_MAX_POINTS));
|
||||
let lastSelectedIndex = 0;
|
||||
|
||||
for (let i = 1; i < n - 1; i++) {
|
||||
const shouldKeep =
|
||||
@@ -525,11 +516,9 @@ function trimHeartRateSeries(series: WorkoutDetailMetrics['heartRateSeries']) {
|
||||
|
||||
if (shouldKeep) {
|
||||
// 检查与上一个选中点的距离，避免过于密集
|
||||
const lastSelectedIndex = result.length > 0 ?
|
||||
series.findIndex(p => p.timestamp === result[result.length - 1].timestamp) : 0;
|
||||
|
||||
if (i - lastSelectedIndex >= minDistance || isLocalExtremum(i)) {
|
||||
result.push(series[i]);
|
||||
lastSelectedIndex = i;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -555,7 +544,21 @@ function trimHeartRateSeries(series: WorkoutDetailMetrics['heartRateSeries']) {
|
||||
return result;
|
||||
}
|
||||
|
||||
function renderHeartRateZone(zone: HeartRateZoneStat) {
|
||||
function renderHeartRateZone(
|
||||
zone: HeartRateZoneStat,
|
||||
t: (key: string, options?: Record<string, any>) => string
|
||||
) {
|
||||
const label = t(`workoutDetail.zones.labels.${zone.key}`, {
|
||||
defaultValue: zone.label,
|
||||
});
|
||||
const range = t(`workoutDetail.zones.ranges.${zone.key}`, {
|
||||
defaultValue: zone.rangeText,
|
||||
});
|
||||
const meta = t('workoutDetail.zones.summary', {
|
||||
minutes: zone.durationMinutes,
|
||||
range,
|
||||
});
|
||||
|
||||
return (
|
||||
<View key={zone.key} style={styles.zoneRow}>
|
||||
<View style={[styles.zoneBar, { backgroundColor: `${zone.color}33` }]}>
|
||||
@@ -570,10 +573,8 @@ function renderHeartRateZone(zone: HeartRateZoneStat) {
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.zoneInfo}>
|
||||
<Text style={styles.zoneLabel}>{zone.label}</Text>
|
||||
<Text style={styles.zoneMeta}>
|
||||
{zone.durationMinutes} 分钟 · {zone.rangeText}
|
||||
</Text>
|
||||
<Text style={styles.zoneLabel}>{label}</Text>
|
||||
<Text style={styles.zoneMeta}>{meta}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
@@ -668,20 +669,28 @@ const styles = StyleSheet.create({
|
||||
shadowRadius: 22,
|
||||
elevation: 8,
|
||||
},
|
||||
summaryCardLoading: {
|
||||
minHeight: 240,
|
||||
},
|
||||
summaryHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-start',
|
||||
flexWrap: 'wrap',
|
||||
gap: 10,
|
||||
},
|
||||
activityName: {
|
||||
fontSize: 24,
|
||||
fontWeight: '700',
|
||||
color: '#1E2148',
|
||||
flex: 1,
|
||||
flexShrink: 1,
|
||||
lineHeight: 30,
|
||||
},
|
||||
intensityPill: {
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 999,
|
||||
alignSelf: 'flex-start',
|
||||
},
|
||||
intensityPillText: {
|
||||
fontSize: 12,
|
||||
@@ -768,6 +777,12 @@ const styles = StyleSheet.create({
|
||||
shadowRadius: 20,
|
||||
elevation: 4,
|
||||
},
|
||||
sectionHeartRateLoading: {
|
||||
minHeight: 360,
|
||||
},
|
||||
sectionZonesLoading: {
|
||||
minHeight: 200,
|
||||
},
|
||||
sectionHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
@@ -811,11 +826,22 @@ const styles = StyleSheet.create({
|
||||
color: '#1E2148',
|
||||
},
|
||||
chartWrapper: {
|
||||
alignItems: 'flex-start',
|
||||
overflow: 'visible',
|
||||
},
|
||||
chartLoading: {
|
||||
height: 220,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
chartLoadingText: {
|
||||
marginTop: 8,
|
||||
fontSize: 12,
|
||||
color: '#7E86A7',
|
||||
},
|
||||
chartStyle: {
|
||||
marginLeft: -10,
|
||||
marginRight: -10,
|
||||
marginLeft: 0,
|
||||
marginRight: 0,
|
||||
},
|
||||
chartEmpty: {
|
||||
paddingVertical: 32,
|
||||
@@ -949,4 +975,3 @@ const styles = StyleSheet.create({
|
||||
height: 40,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user