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

feat(app): add version check system and enhance internationalization support

Browse Source 
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:
richarjiang
2025-11-29 20:47:16 +08:00
parent 83b77615cf
commit a309123b35
19 changed files with 1132 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
components/workout/WorkoutDetailModal.tsx
View File

@@ -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,
},
});