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

- 移除模拟HRV数据，改为从健康数据中获取实际HRV值
- 新增HRV更新时间显示，提升用户信息获取体验
- 优化日期推导逻辑，确保数据加载一致性
- 更新BMI卡片和营养雷达图组件，支持紧凑模式展示
- 移除不再使用的图片资源，简化项目结构

app/(tabs)/statistics.tsx

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