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

feat: 更新统计页面，优化HRV数据展示和逻辑

Browse Source 
- 移除模拟HRV数据，改为从健康数据中获取实际HRV值
- 新增HRV更新时间显示，提升用户信息获取体验
- 优化日期推导逻辑，确保数据加载一致性
- 更新BMI卡片和营养雷达图组件，支持紧凑模式展示
- 移除不再使用的图片资源，简化项目结构
This commit is contained in:
richarjiang
2025-08-19 22:04:39 +08:00
parent 63b1c52909
commit 7d7d233bbb
10 changed files with 445 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
app/(tabs)/statistics.tsx
View File

@@ -73,8 +73,8 @@ export default function ExploreScreen() {
// 睡眠时长（分钟）
const [sleepDuration, setSleepDuration] = useState<number | null>(null);
// HRV数据
const [hrvValue, setHrvValue] = useState<number>(69);
const [hrvStatus, setHrvStatus] = useState<'放松' | '正常' | '紧张'>('正常');
const [hrvValue, setHrvValue] = useState<number>(0);
const [hrvUpdateTime, setHrvUpdateTime] = useState<Date>(new Date());
const [isLoading, setIsLoading] = useState(false);
// 用于触发动画重置的 token（当日期或数据变化时更新）
@@ -103,8 +103,14 @@ export default function ExploreScreen() {
return;
}
// 若未显式传入日期，按当前选中索引推导日期
const derivedDate = targetDate ?? days[selectedIndex]?.date?.toDate() ?? new Date();
// 确定要查询的日期：优先使用传入的日期，否则使用当前选中索引对应的日期
let derivedDate: Date;
if (targetDate) {
derivedDate = targetDate;
} else {
derivedDate = days[selectedIndex]?.date?.toDate() ?? new Date();
}
const requestKey = getDateKey(derivedDate);
latestRequestKeyRef.current = requestKey;
@@ -118,18 +124,11 @@ export default function ExploreScreen() {
setActiveCalories(Math.round(data.activeEnergyBurned));
setSleepDuration(data.sleepDuration);
// 模拟HRV数据（实际应用中应从HealthKit获取）
const simulatedHrv = Math.floor(Math.random() * 80) + 30; // 30-110ms范围
setHrvValue(simulatedHrv);
const hrv = data.hrv ?? 0;
setHrvValue(hrv);
// 根据HRV值判断状态
if (simulatedHrv >= 70) {
setHrvStatus('放松');
} else if (simulatedHrv >= 40) {
setHrvStatus('正常');
} else {
setHrvStatus('紧张');
}
// 更新HRV数据时间
setHrvUpdateTime(new Date());
setAnimToken((t) => t + 1);
} else {
@@ -149,8 +148,13 @@ export default function ExploreScreen() {
try {
setIsNutritionLoading(true);
// 若未显式传入日期，按当前选中索引推导日期
const derivedDate = targetDate ?? days[selectedIndex]?.date?.toDate() ?? new Date();
// 确定要查询的日期：优先使用传入的日期，否则使用当前选中索引对应的日期
let derivedDate: Date;
if (targetDate) {
derivedDate = targetDate;
} else {
derivedDate = days[selectedIndex]?.date?.toDate() ?? new Date();
}
console.log('加载营养数据...', derivedDate);
const data = await getDietRecords({
@@ -177,11 +181,14 @@ export default function ExploreScreen() {
useFocusEffect(
React.useCallback(() => {
// 聚焦时按当前选中的日期加载，避免与用户手动选择的日期不一致
loadHealthData();
if (isLoggedIn) {
loadNutritionData();
const currentDate = days[selectedIndex]?.date?.toDate();
if (currentDate) {
loadHealthData(currentDate);
if (isLoggedIn) {
loadNutritionData(currentDate);
}
}
}, [])
}, [selectedIndex])
);
// 日期点击时，加载对应日期数据
@@ -210,15 +217,6 @@ export default function ExploreScreen() {
<Text style={styles.sectionTitle}>健康数据</Text>
<WeightHistoryCard />
{/* HRV压力监测卡片 */}
<StressMeter value={hrvValue} status={hrvStatus} />
{/* 查看更多 */}
<View style={styles.viewMoreContainer}>
<Text style={styles.viewMoreText}>查看更多</Text>
<Ionicons name="chevron-forward" size={16} color="#192126" style={styles.viewMoreIcon} />
</View>
{/* 标题与日期选择 */}
<Text style={styles.monthTitle}>{monthTitle}</Text>
<ScrollView
@@ -252,23 +250,17 @@ export default function ExploreScreen() {
isLoading={isNutritionLoading}
/>
{/* 指标行：左大卡（训练时间），右两小卡（消耗卡路里、步数） */}
<View style={styles.metricsRow}>
<View style={[styles.trainingCard, styles.metricsLeft]}>
<Text style={styles.cardTitleSecondary}>训练时间</Text>
<View style={styles.trainingContent}>
<CircularRing
size={120}
strokeWidth={12}
trackColor="#E2D9FD"
progressColor="#8B74F3"
progress={trainingProgress}
resetToken={animToken}
/>
</View>
</View>
<View style={styles.metricsRight}>
<View style={[styles.metricsRightCard, styles.caloriesCard, { minHeight: 88 }]}>
{/* 真正瀑布流布局 */}
<View style={styles.masonryContainer}>
{/* 左列 */}
<View style={styles.masonryColumn}>
<StressMeter
value={hrvValue}
updateTime={hrvUpdateTime}
style={styles.masonryCard}
/>
<View style={[styles.masonryCard, styles.caloriesCard]}>
<Text style={styles.cardTitleSecondary}>消耗卡路里</Text>
{activeCalories != null ? (
<AnimatedNumber
@@ -281,9 +273,12 @@ export default function ExploreScreen() {
<Text style={styles.caloriesValue}>——</Text>
)}
</View>
<View style={[styles.metricsRightCard, styles.stepsCard, { minHeight: 88 }]}>
<View style={[styles.masonryCard, styles.stepsCard]}>
<View style={styles.cardHeaderRow}>
<View style={styles.iconSquare}><Ionicons name="footsteps-outline" size={18} color="#192126" /></View>
<View style={styles.iconSquare}>
<Ionicons name="footsteps-outline" size={18} color="#192126" />
</View>
<Text style={styles.cardTitle}>步数</Text>
</View>
{stepCount != null ? (
@@ -298,20 +293,56 @@ export default function ExploreScreen() {
)}
<ProgressBar
progress={Math.min(1, Math.max(0, (stepCount ?? 0) / stepGoal))}
height={18}
height={16}
trackColor="#FFEBCB"
fillColor="#FFC365"
showLabel={false}
/>
</View>
</View>
{/* 右列 */}
<View style={styles.masonryColumn}>
<BMICard
weight={userProfile?.weight ? parseFloat(userProfile.weight) : undefined}
height={userProfile?.height ? parseFloat(userProfile.height) : undefined}
style={styles.masonryCardNoBg}
compact={true}
/>
<View style={[styles.masonryCard, styles.trainingCard]}>
<Text style={styles.cardTitleSecondary}>训练时间</Text>
<View style={styles.trainingContent}>
<CircularRing
size={120}
strokeWidth={12}
trackColor="#E2D9FD"
progressColor="#8B74F3"
progress={trainingProgress}
resetToken={animToken}
/>
</View>
</View>
<View style={[styles.masonryCard, styles.sleepCard]}>
<View style={styles.cardHeaderRow}>
<View style={styles.iconSquare}>
<Ionicons name="moon-outline" size={18} color="#192126" />
</View>
<Text style={styles.cardTitle}>睡眠</Text>
</View>
{sleepDuration != null ? (
<Text style={styles.sleepValue}>
{Math.floor(sleepDuration / 60)}小时{Math.floor(sleepDuration % 60)}分钟
</Text>
) : (
<Text style={styles.sleepValue}>——</Text>
)}
</View>
</View>
</View>
{/* BMI 指数卡片 */}
<BMICard
weight={userProfile?.weight ? parseFloat(userProfile.weight) : undefined}
height={userProfile?.height ? parseFloat(userProfile.height) : undefined}
/>
@@ -596,4 +627,77 @@ const styles = StyleSheet.create({
color: '#192126',
marginLeft: 4,
},
stressCardRow: {
flexDirection: 'row',
justifyContent: 'flex-start',
marginBottom: 16,
},
healthCardsRow: {
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: 16,
},
compactBMICard: {
width: 140,
minHeight: 110,
},
healthMetricsContainer: {
marginBottom: 16,
},
masonryContainer: {
marginBottom: 16,
flexDirection: 'row',
justifyContent: 'space-between',
},
masonryColumn: {
flex: 1,
marginHorizontal: 3,
},
masonryCard: {
width: '100%',
backgroundColor: '#FFFFFF',
borderRadius: 16,
padding: 16,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.08,
shadowRadius: 8,
elevation: 3,
marginBottom: 8,
},
masonryCardNoBg: {
width: '100%',
borderRadius: 16,
padding: 16,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.08,
shadowRadius: 8,
elevation: 3,
marginBottom: 8,
},
compactStepsCard: {
minHeight: 100,
},
stepsContent: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginTop: 8,
},
sleepCard: {
backgroundColor: '#E8F4FD',
},
sleepValue: {
fontSize: 16,
color: '#1E40AF',
fontWeight: '700',
marginTop: 8,
},
});

BIN
assets/images/react-logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.2 KiB

BIN
assets/images/react-logo@2x.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

BIN
assets/images/react-logo@3x.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 21 KiB

213
components/BMICard.tsx
View File

@@ -1,20 +1,20 @@
import { useAuthGuard } from '@/hooks/useAuthGuard';
import {
BMI_CATEGORIES,
canCalculateBMI,
getBMIResult,
type BMIResult
BMI_CATEGORIES,
canCalculateBMI,
getBMIResult,
type BMIResult
} from '@/utils/bmi';
import { Ionicons } from '@expo/vector-icons';
import React, { useState } from 'react';
import {
Dimensions,
Modal,
Pressable,
StyleSheet,
Text,
TouchableOpacity,
View
Dimensions,
Modal,
Pressable,
StyleSheet,
Text,
TouchableOpacity,
View
} from 'react-native';
import Toast from 'react-native-toast-message';
@@ -24,9 +24,10 @@ interface BMICardProps {
weight?: number;
height?: number;
style?: any;
compact?: boolean;
}
export function BMICard({ weight, height, style }: BMICardProps) {
export function BMICard({ weight, height, style, compact = false }: BMICardProps) {
const { pushIfAuthedElseLogin } = useAuthGuard();
const [showInfoModal, setShowInfoModal] = useState(false);
@@ -61,14 +62,75 @@ export function BMICard({ weight, height, style }: BMICardProps) {
if (!canCalculate) {
// 缺少数据的情况
return (
<View style={styles.incompleteContent}>
<TouchableOpacity
style={[styles.incompleteContent, compact && styles.compactIncompleteContent]}
onPress={handleShowInfoModal}
activeOpacity={0.8}
>
<View style={styles.cardHeader}>
<View style={styles.titleRow}>
<View style={styles.iconSquare}>
<Ionicons name="fitness-outline" size={18} color="#192126" />
<Ionicons name="fitness-outline" size={16} color="#192126" />
</View>
<Text style={styles.cardTitle}>BMI 指数</Text>
<Text style={[styles.cardTitle, compact && styles.compactTitle]}>BMI</Text>
</View>
{!compact && (
<TouchableOpacity
onPress={handleShowInfoModal}
style={styles.infoButton}
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
>
<Ionicons name="information-circle-outline" size={20} color="#9AA3AE" />
</TouchableOpacity>
)}
</View>
{compact ? (
<View style={styles.compactMissingData}>
<Text style={styles.compactMissingText}>
{!weight && !height ? '完善身高体重' :
!weight ? '完善体重' : '完善身高'}
</Text>
</View>
) : (
<>
<View style={styles.missingDataContainer}>
<Ionicons name="alert-circle-outline" size={24} color="#F59E0B" />
<Text style={styles.missingDataText}>
{!weight && !height ? '请完善身高和体重信息' :
!weight ? '请完善体重信息' : '请完善身高信息'}
</Text>
</View>
<TouchableOpacity
onPress={handleGoToProfile}
style={styles.completeButton}
activeOpacity={0.8}
>
<Text style={styles.completeButtonText}>前往完善</Text>
<Ionicons name="chevron-forward" size={16} color="#6B7280" />
</TouchableOpacity>
</>
)}
</TouchableOpacity>
);
}
// 有完整数据的情况
return (
<TouchableOpacity
style={[styles.completeContent, { backgroundColor: bmiResult?.backgroundColor }, compact && styles.compactCompleteContent]}
onPress={handleShowInfoModal}
activeOpacity={0.8}
>
<View style={styles.cardHeader}>
<View style={styles.titleRow}>
<View style={styles.iconSquare}>
<Ionicons name="fitness-outline" size={16} color="#192126" />
</View>
<Text style={[styles.cardTitle, compact && styles.compactTitle]}>BMI</Text>
</View>
{!compact && (
<TouchableOpacity
onPress={handleShowInfoModal}
style={styles.infoButton}
@@ -76,66 +138,41 @@ export function BMICard({ weight, height, style }: BMICardProps) {
>
<Ionicons name="information-circle-outline" size={20} color="#9AA3AE" />
</TouchableOpacity>
</View>
)}
</View>
<View style={styles.missingDataContainer}>
<Ionicons name="alert-circle-outline" size={24} color="#F59E0B" />
<Text style={styles.missingDataText}>
{!weight && !height ? '请完善身高和体重信息' :
!weight ? '请完善体重信息' : '请完善身高信息'}
{compact ? (
<View style={styles.compactBMIContent}>
<Text style={[styles.compactBMIValue, { color: bmiResult?.color }]}>
{bmiResult?.value}
</Text>
</View>
<TouchableOpacity
onPress={handleGoToProfile}
style={styles.completeButton}
activeOpacity={0.8}
>
<Text style={styles.completeButtonText}>前往完善</Text>
<Ionicons name="chevron-forward" size={16} color="#6B7280" />
</TouchableOpacity>
</View>
);
}
// 有完整数据的情况
return (
<View style={[styles.completeContent, { backgroundColor: bmiResult?.backgroundColor }]}>
<View style={styles.cardHeader}>
<View style={styles.titleRow}>
<View style={styles.iconSquare}>
<Ionicons name="fitness-outline" size={18} color="#192126" />
</View>
<Text style={styles.cardTitle}>BMI 指数</Text>
</View>
<TouchableOpacity
onPress={handleShowInfoModal}
style={styles.infoButton}
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
>
<Ionicons name="information-circle-outline" size={20} color="#9AA3AE" />
</TouchableOpacity>
</View>
<View style={styles.bmiValueContainer}>
<Text style={[styles.bmiValue, { color: bmiResult?.color }]}>
{bmiResult?.value}
</Text>
<View style={[styles.categoryBadge, { backgroundColor: bmiResult?.color + '20' }]}>
<Text style={[styles.categoryText, { color: bmiResult?.color }]}>
<Text style={[styles.compactBMICategory, { color: bmiResult?.color }]}>
{bmiResult?.category.name}
</Text>
</View>
</View>
) : (
<>
<View style={styles.bmiValueContainer}>
<Text style={[styles.bmiValue, { color: bmiResult?.color }]}>
{bmiResult?.value}
</Text>
<View style={[styles.categoryBadge, { backgroundColor: bmiResult?.color + '20' }]}>
<Text style={[styles.categoryText, { color: bmiResult?.color }]}>
{bmiResult?.category.name}
</Text>
</View>
</View>
<Text style={[styles.bmiDescription, { color: bmiResult?.color }]}>
{bmiResult?.description}
</Text>
<Text style={[styles.bmiDescription, { color: bmiResult?.color }]}>
{bmiResult?.description}
</Text>
<Text style={styles.encouragementText}>
{bmiResult?.category.encouragement}
</Text>
</View>
<Text style={styles.encouragementText}>
{bmiResult?.category.encouragement}
</Text>
</>
)}
</TouchableOpacity>
);
};
@@ -359,6 +396,46 @@ const styles = StyleSheet.create({
fontStyle: 'italic',
},
// 紧凑模式样式
compactIncompleteContent: {
minHeight: 110,
padding: 14,
margin: -14,
},
compactCompleteContent: {
minHeight: 110,
padding: 14,
margin: -14,
},
compactTitle: {
fontSize: 14,
},
compactMissingData: {
alignItems: 'center',
justifyContent: 'center',
flex: 1,
},
compactMissingText: {
fontSize: 12,
color: '#9AA3AE',
fontWeight: '500',
textAlign: 'center',
},
compactBMIContent: {
alignItems: 'center',
justifyContent: 'center',
flex: 1,
},
compactBMIValue: {
fontSize: 28,
fontWeight: '800',
marginBottom: 4,
},
compactBMICategory: {
fontSize: 12,
fontWeight: '700',
},
// 弹窗样式
modalBackdrop: {
flex: 1,

54
components/NutritionRadarCard.tsx
View File

@@ -9,7 +9,6 @@ import { RadarCategory, RadarChart } from './RadarChart';
export type NutritionRadarCardProps = {
nutritionSummary: NutritionSummary | null;
isLoading?: boolean;
};
// 营养维度定义
@@ -22,7 +21,7 @@ const NUTRITION_DIMENSIONS: RadarCategory[] = [
{ key: 'sodium', label: '钠' },
];
export function NutritionRadarCard({ nutritionSummary, isLoading = false }: NutritionRadarCardProps) {
export function NutritionRadarCard({ nutritionSummary }: NutritionRadarCardProps) {
const radarValues = useMemo(() => {
// 基于推荐日摄入量计算分数
const recommendations = {
@@ -71,33 +70,26 @@ export function NutritionRadarCard({ nutritionSummary, isLoading = false }: Nutr
</View>
</View>
{isLoading ? (
<View style={styles.loadingContainer}>
<Text style={styles.loadingText}>加载中...</Text>
<View style={styles.contentContainer}>
<View style={styles.radarContainer}>
<RadarChart
categories={NUTRITION_DIMENSIONS}
values={radarValues}
size="small"
maxValue={5}
/>
</View>
) : (
<View style={styles.contentContainer}>
<View style={styles.radarContainer}>
<RadarChart
categories={NUTRITION_DIMENSIONS}
values={radarValues}
size="small"
maxValue={5}
/>
</View>
<View style={styles.statsContainer}>
{nutritionStats.map((stat, index) => (
<View key={stat.label} style={styles.statItem}>
<View style={[styles.statDot, { backgroundColor: stat.color }]} />
<Text style={styles.statLabel}>{stat.label}</Text>
<Text style={styles.statValue}>{stat.value}</Text>
</View>
))}
</View>
<View style={styles.statsContainer}>
{nutritionStats.map((stat, index) => (
<View key={stat.label} style={styles.statItem}>
<View style={[styles.statDot, { backgroundColor: stat.color }]} />
<Text style={styles.statLabel}>{stat.label}</Text>
<Text style={styles.statValue}>{stat.value}</Text>
</View>
))}
</View>
)}
</View>
</TouchableOpacity>
);
}
@@ -176,14 +168,4 @@ const styles = StyleSheet.create({
color: '#192126',
fontWeight: '700',
},
loadingContainer: {
alignItems: 'center',
justifyContent: 'center',
height: 80,
},
loadingText: {
fontSize: 16,
color: '#9AA3AE',
fontWeight: '600',
},
});

158
components/StressMeter.tsx
View File

@@ -5,25 +5,35 @@ import { StyleSheet, Text, View } from 'react-native';
interface StressMeterProps {
value: number;
status: '放松' | '正常' | '紧张';
updateTime?: Date;
style?: any;
}
export function StressMeter({ value, status }: StressMeterProps) {
// 计算进度条位置（0-100%）
const progressPercentage = Math.min(100, Math.max(0, (value / 150) * 100));
export function StressMeter({ value, updateTime, style }: StressMeterProps) {
// 根据状态获取颜色
const getStatusColor = () => {
switch (status) {
case '放松': return '#10B981';
case '正常': return '#F59E0B';
case '紧张': return '#EF4444';
default: return '#F59E0B';
// 计算进度条位置（0-100%）
// HRV值范围：30-110ms，对应进度条0-100%
const progressPercentage = Math.min(100, Math.max(0, ((value - 30) / 80) * 100));
// 根据HRV值计算状态
const getHrvStatus = () => {
if (value >= 70) {
return '放松';
} else if (value >= 50) {
return '正常';
} else {
return '紧张';
}
};
// 根据状态获取表情
const getStatusEmoji = () => {
// 当HRV值为0时，不展示表情
if (value === 0) {
return '';
}
const status = getHrvStatus();
switch (status) {
case '放松': return '😌';
case '正常': return '😊';
@@ -32,13 +42,29 @@ export function StressMeter({ value, status }: StressMeterProps) {
}
};
// 格式化更新时间
const formatUpdateTime = (date?: Date) => {
if (!date) return '';
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
return `${hours}:${minutes}`;
};
return (
<View style={styles.container}>
<View style={[styles.container, style]}>
{/* 渐变背景 */}
<LinearGradient
colors={['#F8F9FF', '#F0F4FF']}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
style={styles.gradientBackground}
/>
{/* 头部区域 */}
<View style={styles.header}>
<View style={styles.leftSection}>
<View style={styles.iconContainer}>
<Ionicons name="heart" size={20} color="#3B82F6" />
<Ionicons name="heart" size={16} color="#3B82F6" />
</View>
<Text style={styles.title}>压力</Text>
</View>
@@ -55,18 +81,21 @@ export function StressMeter({ value, status }: StressMeterProps) {
<View style={styles.progressContainer}>
<View style={styles.progressTrack}>
{/* 渐变背景进度条 */}
<View style={[styles.progressBar, { width: `${progressPercentage}%` }]}>
<LinearGradient
colors={['#F97316', '#FCD34D', '#84CC16', '#10B981']}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
style={styles.gradientBar}
/>
</View>
<LinearGradient
colors={['#FFD700', '#87CEEB', '#98FB98']}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
style={styles.gradientTrack}
/>
{/* 白色圆形指示器 */}
<View style={[styles.indicator, { left: `${Math.max(0, progressPercentage - 2)}%` }]} />
<View style={[styles.indicator, { left: `${Math.max(0, Math.min(100, progressPercentage - 2))}%` }]} />
</View>
</View>
{/* 更新时间 */}
{updateTime && (
<Text style={styles.updateTime}>{formatUpdateTime(updateTime)}</Text>
)}
</View>
);
}
@@ -74,8 +103,8 @@ export function StressMeter({ value, status }: StressMeterProps) {
const styles = StyleSheet.create({
container: {
backgroundColor: '#FFFFFF',
borderRadius: 20,
padding: 16,
borderRadius: 16,
padding: 14,
marginBottom: 12,
shadowColor: '#000',
shadowOffset: {
@@ -83,88 +112,101 @@ const styles = StyleSheet.create({
height: 2,
},
shadowOpacity: 0.08,
shadowRadius: 12,
shadowRadius: 8,
elevation: 3,
position: 'relative',
overflow: 'hidden',
minHeight: 110,
width: 140,
},
gradientBackground: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
borderRadius: 16,
},
header: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: 12,
marginBottom: 8,
},
leftSection: {
flexDirection: 'row',
alignItems: 'center',
},
iconContainer: {
width: 28,
height: 28,
borderRadius: 8,
width: 24,
height: 24,
borderRadius: 6,
backgroundColor: '#EBF4FF',
alignItems: 'center',
justifyContent: 'center',
marginRight: 8,
marginRight: 6,
},
title: {
fontSize: 16,
fontSize: 14,
fontWeight: '700',
color: '#1F2937',
color: '#192126',
},
emoji: {
fontSize: 24,
fontSize: 16,
},
valueSection: {
flexDirection: 'row',
alignItems: 'baseline',
marginBottom: 16,
marginBottom: 12,
},
value: {
fontSize: 42,
fontSize: 28,
fontWeight: '800',
color: '#1F2937',
lineHeight: 46,
color: '#192126',
lineHeight: 32,
},
unit: {
fontSize: 14,
fontSize: 12,
fontWeight: '500',
color: '#6B7280',
color: '#9AA3AE',
marginLeft: 4,
},
progressContainer: {
height: 20,
height: 16,
marginBottom: 4,
},
progressTrack: {
height: 12,
backgroundColor: '#F3F4F6',
borderRadius: 6,
height: 8,
borderRadius: 4,
position: 'relative',
overflow: 'visible',
},
progressBar: {
gradientTrack: {
height: '100%',
borderRadius: 6,
overflow: 'hidden',
},
gradientBar: {
height: '100%',
borderRadius: 6,
borderRadius: 4,
},
indicator: {
position: 'absolute',
top: -4,
width: 20,
height: 20,
borderRadius: 10,
width: 16,
height: 16,
borderRadius: 8,
backgroundColor: '#FFFFFF',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
height: 1,
},
shadowOpacity: 0.15,
shadowRadius: 4,
elevation: 4,
borderWidth: 2,
shadowOpacity: 0.1,
shadowRadius: 2,
elevation: 2,
borderWidth: 1.5,
borderColor: '#E5E7EB',
},
updateTime: {
fontSize: 10,
color: '#9AA3AE',
textAlign: 'right',
marginTop: 2,
},
});

10
ios/digitalpilates.xcodeproj/project.pbxproj
View File

@@ -449,7 +449,10 @@
LIBRARY_SEARCH_PATHS = "$(SDKROOT)/usr/lib/swift\"$(inherited)\"";
MTL_ENABLE_DEBUG_INFO = YES;
ONLY_ACTIVE_ARCH = YES;
OTHER_LDFLAGS = "$(inherited) ";
OTHER_LDFLAGS = (
"$(inherited)",
" ",
);
REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
SDKROOT = iphoneos;
SWIFT_ACTIVE_COMPILATION_CONDITIONS = "$(inherited) DEBUG";
@@ -504,7 +507,10 @@
);
LIBRARY_SEARCH_PATHS = "$(SDKROOT)/usr/lib/swift\"$(inherited)\"";
MTL_ENABLE_DEBUG_INFO = NO;
OTHER_LDFLAGS = "$(inherited) ";
OTHER_LDFLAGS = (
"$(inherited)",
" ",
);
REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
SDKROOT = iphoneos;
USE_HERMES = false;

23
ios/digitalpilates/SplashScreen.storyboard
View File

@@ -1,14 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="32700.99.1234" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="EXPO-VIEWCONTROLLER-1">
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="23727" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="EXPO-VIEWCONTROLLER-1">
<device id="retina6_12" orientation="portrait" appearance="light"/>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="22685"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="23721"/>
<capability name="Named colors" minToolsVersion="9.0"/>
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--View Controller-->
<scene sceneID="EXPO-SCENE-1">
<objects>
<viewController storyboardIdentifier="SplashScreenViewController" id="EXPO-VIEWCONTROLLER-1" sceneMemberID="viewController">
@@ -16,27 +17,27 @@
<rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<subviews>
<imageView id="EXPO-SplashScreen" userLabel="SplashScreenLogo" image="SplashScreenLogo" contentMode="scaleAspectFit" clipsSubviews="true" userInteractionEnabled="false" translatesAutoresizingMaskIntoConstraints="false">
<rect key="frame" x="96.5" y="326" width="200" height="200"/>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" misplaced="YES" image="SplashScreenLogo" translatesAutoresizingMaskIntoConstraints="NO" id="EXPO-SplashScreen" userLabel="SplashScreenLogo">
<rect key="frame" x="66" y="207" width="260" height="367"/>
</imageView>
</subviews>
<viewLayoutGuide key="safeArea" id="Rmq-lb-GrQ"/>
<constraints>
<constraint firstItem="EXPO-SplashScreen" firstAttribute="centerX" secondItem="EXPO-ContainerView" secondAttribute="centerX" id="cad2ab56f97c5429bf29decf850647a4216861d4"/>
<constraint firstItem="EXPO-SplashScreen" firstAttribute="centerY" secondItem="EXPO-ContainerView" secondAttribute="centerY" id="1a145271b085b6ce89b1405a310f5b1bb7656595"/>
</constraints>
<color key="backgroundColor" name="SplashScreenBackground"/>
<constraints>
<constraint firstItem="EXPO-SplashScreen" firstAttribute="centerY" secondItem="EXPO-ContainerView" secondAttribute="centerY" id="1a145271b085b6ce89b1405a310f5b1bb7656595"/>
<constraint firstItem="EXPO-SplashScreen" firstAttribute="centerX" secondItem="EXPO-ContainerView" secondAttribute="centerX" id="cad2ab56f97c5429bf29decf850647a4216861d4"/>
</constraints>
</view>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="EXPO-PLACEHOLDER-1" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="0.0" y="0.0"/>
<point key="canvasLocation" x="-0.76335877862595414" y="0.0"/>
</scene>
</scenes>
<resources>
<image name="SplashScreenLogo" width="200" height="200"/>
<image name="SplashScreenLogo" width="682.66668701171875" height="682.66668701171875"/>
<namedColor name="SplashScreenBackground">
<color alpha="1.000" blue="1.00000000000000" green="1.00000000000000" red="1.00000000000000" customColorSpace="sRGB" colorSpace="custom"/>
<color red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
</namedColor>
</resources>
</document>

7
utils/health.ts
View File

@@ -1,3 +1,4 @@
import dayjs from 'dayjs';
import type { HealthKitPermissions } from 'react-native-health';
import AppleHealthKit from 'react-native-health';
@@ -45,10 +46,8 @@ export async function ensureHealthPermissions(): Promise<boolean> {
export async function fetchHealthDataForDate(date: Date): Promise<TodayHealthData> {
console.log('开始获取指定日期健康数据...', date);
const start = new Date(date);
start.setHours(0, 0, 0, 0);
const end = new Date(date);
end.setHours(23, 59, 59, 999);
const start = dayjs(date).startOf('day').toDate();
const end = dayjs(date).endOf('day').toDate();
const options = {
startDate: start.toISOString(),