From 1c44c3083b6cc164007c008628c8a0b22d00cf9f Mon Sep 17 00:00:00 2001
From: richarjiang <richarjiang@tencent.com>
Date: Wed, 20 Aug 2025 17:25:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E7=BB=9F=E8=AE=A1?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=92=8CBMI=E5=8D=A1=E7=89=87=EF=BC=8C?=
 =?UTF-8?q?=E7=A7=BB=E9=99=A4=E5=8E=8B=E5=8A=9B=E5=88=86=E6=9E=90=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在统计页面中移除压力分析模态框及相关状态管理，简化组件逻辑
- 更新BMI卡片，改进弹窗展示方式，增加渐变背景和健康建议
- 新增更新体重的功能，支持将体重数据写入健康数据中
- 优化压力计组件，调整数据展示逻辑，提升用户体验
---
 app/(tabs)/statistics.tsx  |  23 +--
 components/BMICard.tsx     | 337 +++++++++++++++++++++++++++----------
 components/StressMeter.tsx | 108 +++++++-----
 utils/health.ts            |  23 ++-
 4 files changed, 334 insertions(+), 157 deletions(-)

diff --git a/app/(tabs)/statistics.tsx b/app/(tabs)/statistics.tsx
index 0b8f93d..b38e6d6 100644
--- a/app/(tabs)/statistics.tsx
+++ b/app/(tabs)/statistics.tsx
@@ -3,7 +3,6 @@ import { BMICard } from '@/components/BMICard';
 import { CircularRing } from '@/components/CircularRing';
 import { NutritionRadarCard } from '@/components/NutritionRadarCard';
 import { ProgressBar } from '@/components/ProgressBar';
-import { StressAnalysisModal } from '@/components/StressAnalysisModal';
 import { StressMeter } from '@/components/StressMeter';
 import { WeightHistoryCard } from '@/components/WeightHistoryCard';
 import { Colors } from '@/constants/Colors';
@@ -87,9 +86,6 @@ export default function ExploreScreen() {
   const [nutritionSummary, setNutritionSummary] = useState<NutritionSummary | null>(null);
   const [isNutritionLoading, setIsNutritionLoading] = useState(false);
 
-  // 压力分析浮窗状态
-  const [showStressModal, setShowStressModal] = useState(false);
-
   // 记录最近一次请求的“日期键”，避免旧请求覆盖新结果
   const latestRequestKeyRef = useRef<string | null>(null);
 
@@ -209,15 +205,6 @@ export default function ExploreScreen() {
     }
   };
 
-  // 处理压力卡片点击
-  const handleStressCardPress = () => {
-    setShowStressModal(true);
-  };
-
-  // 关闭压力分析浮窗
-  const handleCloseStressModal = () => {
-    setShowStressModal(false);
-  };
 
   // 使用统一的渐变背景色
   const backgroundGradientColors = [colorTokens.backgroundGradientStart, colorTokens.backgroundGradientEnd] as const;
@@ -280,7 +267,7 @@ export default function ExploreScreen() {
                 value={hrvValue}
                 updateTime={hrvUpdateTime}
                 style={styles.masonryCard}
-                onPress={handleStressCardPress}
+                hrvValue={hrvValue}
               />
 
               <View style={[styles.masonryCard, styles.caloriesCard]}>
@@ -371,14 +358,6 @@ export default function ExploreScreen() {
 
         </ScrollView>
       </SafeAreaView>
-
-      {/* 压力分析浮窗 */}
-      <StressAnalysisModal
-        visible={showStressModal}
-        onClose={handleCloseStressModal}
-        hrvValue={hrvValue}
-        updateTime={hrvUpdateTime}
-      />
     </View>
   );
 }
diff --git a/components/BMICard.tsx b/components/BMICard.tsx
index 37aec24..8c60cd7 100644
--- a/components/BMICard.tsx
+++ b/components/BMICard.tsx
@@ -1,5 +1,6 @@
 import { Colors } from '@/constants/Colors';
 import { useAuthGuard } from '@/hooks/useAuthGuard';
+import { useColorScheme } from '@/hooks/useColorScheme';
 import {
   BMI_CATEGORIES,
   canCalculateBMI,
@@ -7,11 +8,12 @@ import {
   type BMIResult
 } from '@/utils/bmi';
 import { Ionicons } from '@expo/vector-icons';
+import { LinearGradient } from 'expo-linear-gradient';
 import React, { useState } from 'react';
 import {
   Dimensions,
   Modal,
-  Pressable,
+  ScrollView,
   StyleSheet,
   Text,
   TouchableOpacity,
@@ -177,6 +179,9 @@ export function BMICard({ weight, height, style, compact = false }: BMICardProps
     );
   };
 
+  const colorScheme = useColorScheme();
+  const themeColors = Colors[colorScheme ?? 'light'];
+
   return (
     <>
       <View style={[styles.card, style]}>
@@ -186,99 +191,102 @@ export function BMICard({ weight, height, style, compact = false }: BMICardProps
       {/* BMI 信息弹窗 */}
       <Modal
         visible={showInfoModal}
-        transparent
-        animationType="fade"
+        animationType="slide"
+        presentationStyle="pageSheet"
         onRequestClose={handleHideInfoModal}
       >
-        <Pressable
-          style={styles.modalBackdrop}
-          onPress={handleHideInfoModal}
+        <LinearGradient
+          colors={[themeColors.backgroundGradientStart, themeColors.backgroundGradientEnd]}
+          style={styles.newModalContainer}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 0, y: 1 }}
         >
-          <Pressable
-            style={styles.modalContainer}
-            onPress={(e) => e.stopPropagation()}
-          >
-            {/* 弹窗头部 */}
-            <View style={styles.modalHeader}>
-              <View style={styles.modalTitleContainer}>
-                <View style={styles.modalIconContainer}>
-                  <Ionicons name="fitness" size={24} color="#3B82F6" />
-                </View>
-                <Text style={styles.modalTitle}>BMI 指数说明</Text>
-              </View>
-              <TouchableOpacity
-                onPress={handleHideInfoModal}
-                style={styles.closeButton}
-                activeOpacity={0.7}
-              >
-                <Ionicons name="close" size={20} color="#6B7280" />
-              </TouchableOpacity>
-            </View>
+          <ScrollView style={styles.newContent} showsVerticalScrollIndicator={false}>
+            {/* 标题 */}
+            <Text style={styles.newTitle}>BMI 指数说明</Text>
 
-            {/* 内容区域 - 去除滚动，精简设计 */}
-            <View style={styles.modalContent}>
-              {/* 介绍部分 */}
-              <View style={styles.introSection}>
-                <Text style={styles.modalDescription}>
-                  BMI 是评估体重与身高关系的健康指标
-                </Text>
-                <View style={styles.formulaContainer}>
-                  <Text style={styles.formulaText}>
-                    计算公式：体重(kg) ÷ 身高²(m)
-                  </Text>
-                </View>
-              </View>
-
-              {/* BMI 分类标准 - 紧凑设计 */}
-              <View style={styles.categoriesSection}>
-                <Text style={styles.sectionTitle}>分类标准</Text>
-                <View style={styles.categoriesGrid}>
-                  {BMI_CATEGORIES.map((category, index) => {
-                    const colors = index === 0 ? { bg: '#FEF3C7', text: '#B45309' } :
-                      index === 1 ? { bg: '#E8F5E8', text: Colors.light.accentGreenDark } :
-                        index === 2 ? { bg: '#FEF3C7', text: '#B45309' } :
-                          { bg: '#FEE2E2', text: '#B91C1C' };
-
-                    return (
-                      <View key={index} style={[styles.categoryCompact, { backgroundColor: colors.bg }]}>
-                        <View style={styles.categoryCompactHeader}>
-                          <Text style={[styles.categoryCompactName, { color: colors.text }]}>
-                            {category.name}
-                          </Text>
-                          <Text style={[styles.categoryCompactRange, { color: colors.text }]}>
-                            {category.range}
-                          </Text>
-                        </View>
-                        <Text style={[styles.categoryCompactAdvice, { color: colors.text }]} numberOfLines={2}>
-                          {category.advice}
-                        </Text>
-                      </View>
-                    );
-                  })}
-                </View>
-              </View>
-
-              {/* 健康提示 - 简化版 */}
-              <View style={styles.healthTips}>
-                <View style={styles.tipsHeader}>
-                  <Ionicons name="heart" size={16} color="#EF4444" />
-                  <Text style={styles.tipsTitle}>健康建议</Text>
-                </View>
-                <Text style={styles.tipsContent}>
-                  保持均衡饮食、规律运动、充足睡眠，定期监测体重变化
-                </Text>
-              </View>
-
-              {/* 免责声明 - 精简版 */}
-              <View style={styles.disclaimerCompact}>
-                <Ionicons name="information-circle" size={14} color="#6B7280" />
-                <Text style={styles.disclaimerCompactText}>
-                  BMI 仅供参考，如有疑问请咨询专业医生
+            {/* 介绍部分 */}
+            <View style={styles.newIntroSection}>
+              <Text style={styles.newDescription}>
+                BMI（身体质量指数）是评估体重与身高关系的国际通用健康指标
+              </Text>
+              <View style={styles.newFormulaContainer}>
+                <Text style={styles.newFormulaText}>
+                  计算公式：体重(kg) ÷ 身高²(m)
                 </Text>
               </View>
             </View>
-          </Pressable>
-        </Pressable>
+
+            {/* BMI 分类标准 */}
+            <Text style={styles.newSectionTitle}>BMI 分类标准</Text>
+            
+            <View style={styles.newStatsCard}>
+              {BMI_CATEGORIES.map((category, index) => {
+                const colors = [
+                  { bg: '#FEF3C7', text: '#B45309', border: '#F59E0B' }, // 偏瘦
+                  { bg: '#E8F5E8', text: Colors.light.accentGreenDark, border: Colors.light.accentGreen }, // 正常
+                  { bg: '#FEF3C7', text: '#B45309', border: '#F59E0B' }, // 超重
+                  { bg: '#FEE2E2', text: '#B91C1C', border: '#EF4444' }  // 肥胖
+                ][index];
+
+                return (
+                  <View key={index} style={[styles.newStatItem, { backgroundColor: colors.bg, borderColor: colors.border }]}>
+                    <View style={styles.newStatHeader}>
+                      <Text style={[styles.newStatTitle, { color: colors.text }]}>
+                        {category.name}
+                      </Text>
+                      <Text style={[styles.newStatRange, { color: colors.text }]}>
+                        {category.range}
+                      </Text>
+                    </View>
+                    <Text style={[styles.newStatAdvice, { color: colors.text }]}>
+                      {category.advice}
+                    </Text>
+                  </View>
+                );
+              })}
+            </View>
+
+            {/* 健康建议 */}
+            <Text style={styles.newSectionTitle}>健康建议</Text>
+            <View style={styles.newHealthTips}>
+              <View style={styles.newTipsItem}>
+                <Ionicons name="nutrition-outline" size={20} color="#3B82F6" />
+                <Text style={styles.newTipsText}>保持均衡饮食，控制热量摄入</Text>
+              </View>
+              <View style={styles.newTipsItem}>
+                <Ionicons name="walk-outline" size={20} color="#3B82F6" />
+                <Text style={styles.newTipsText}>每周至少150分钟中等强度运动</Text>
+              </View>
+              <View style={styles.newTipsItem}>
+                <Ionicons name="moon-outline" size={20} color="#3B82F6" />
+                <Text style={styles.newTipsText}>保证7-9小时充足睡眠</Text>
+              </View>
+              <View style={styles.newTipsItem}>
+                <Ionicons name="calendar-outline" size={20} color="#3B82F6" />
+                <Text style={styles.newTipsText}>定期监测体重变化，及时调整</Text>
+              </View>
+            </View>
+
+            {/* 免责声明 */}
+            <View style={styles.newDisclaimer}>
+              <Ionicons name="information-circle-outline" size={16} color="#6B7280" />
+              <Text style={styles.newDisclaimerText}>
+                BMI 仅供参考，不能反映肌肉量、骨密度等指标。如有健康疑问，请咨询专业医生。
+              </Text>
+            </View>
+          </ScrollView>
+
+          {/* 底部继续按钮 */}
+          <View style={styles.newBottomContainer}>
+            <TouchableOpacity style={styles.newContinueButton} onPress={handleHideInfoModal}>
+              <View style={styles.newButtonBackground}>
+                <Text style={styles.newButtonText}>继续</Text>
+              </View>
+            </TouchableOpacity>
+            <View style={styles.newHomeIndicator} />
+          </View>
+        </LinearGradient>
       </Modal>
     </>
   );
@@ -614,4 +622,159 @@ const styles = StyleSheet.create({
     flex: 1,
   },
 
+  // 新样式 - 与StressAnalysisModal保持一致
+  newModalContainer: {
+    flex: 1,
+  },
+  newContent: {
+    flex: 1,
+    paddingHorizontal: 20,
+  },
+  newTitle: {
+    fontSize: 24,
+    fontWeight: '800',
+    color: '#111827',
+    textAlign: 'center',
+    marginTop: 20,
+    marginBottom: 32,
+  },
+  newIntroSection: {
+    marginBottom: 32,
+  },
+  newDescription: {
+    fontSize: 16,
+    color: '#374151',
+    lineHeight: 24,
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+  newFormulaContainer: {
+    backgroundColor: '#F8FAFC',
+    borderRadius: 12,
+    padding: 16,
+    borderLeftWidth: 4,
+    borderLeftColor: '#3B82F6',
+  },
+  newFormulaText: {
+    fontSize: 15,
+    color: '#1F2937',
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  newSectionTitle: {
+    fontSize: 22,
+    fontWeight: '800',
+    color: '#111827',
+    marginBottom: 20,
+  },
+  newStatsCard: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 16,
+    padding: 20,
+    marginBottom: 32,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.05,
+    shadowRadius: 8,
+    elevation: 2,
+  },
+  newStatItem: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 12,
+    borderLeftWidth: 4,
+  },
+  newStatHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  newStatTitle: {
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  newStatRange: {
+    fontSize: 14,
+    fontWeight: '600',
+    opacity: 0.8,
+  },
+  newStatAdvice: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: '500',
+    opacity: 0.9,
+  },
+  newHealthTips: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 16,
+    padding: 20,
+    marginBottom: 32,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.05,
+    shadowRadius: 8,
+    elevation: 2,
+  },
+  newTipsItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  newTipsText: {
+    fontSize: 15,
+    color: '#374151',
+    marginLeft: 12,
+    flex: 1,
+  },
+  newDisclaimer: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    backgroundColor: '#F9FAFB',
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 32,
+  },
+  newDisclaimerText: {
+    fontSize: 13,
+    color: '#6B7280',
+    lineHeight: 18,
+    marginLeft: 8,
+    flex: 1,
+  },
+  newBottomContainer: {
+    paddingHorizontal: 20,
+    paddingBottom: 34,
+  },
+  newContinueButton: {
+    borderRadius: 25,
+    overflow: 'hidden',
+    marginBottom: 8,
+  },
+  newButtonBackground: {
+    backgroundColor: Colors.light.accentGreen,
+    paddingVertical: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  newButtonText: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#192126',
+  },
+  newHomeIndicator: {
+    width: 134,
+    height: 5,
+    backgroundColor: '#000',
+    borderRadius: 3,
+    alignSelf: 'center',
+  },
+
 });
diff --git a/components/StressMeter.tsx b/components/StressMeter.tsx
index 5c8cbed..f3b83f2 100644
--- a/components/StressMeter.tsx
+++ b/components/StressMeter.tsx
@@ -1,27 +1,27 @@
 import { Ionicons } from '@expo/vector-icons';
 import { LinearGradient } from 'expo-linear-gradient';
-import React from 'react';
+import React, { useState } from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { StressAnalysisModal } from './StressAnalysisModal';
 
 interface StressMeterProps {
   value: number | null;
   updateTime?: Date;
   style?: any;
-  onPress?: () => void;
+  hrvValue: number;
 }
 
-export function StressMeter({ value, updateTime, style, onPress }: StressMeterProps) {
+export function StressMeter({ value, updateTime, style, hrvValue }: StressMeterProps) {
   // 将HRV值转换为压力指数（0-100）
   // HRV值范围：30-110ms，映射到压力指数100-0
   // HRV值越高，压力越小；HRV值越低，压力越大
-  const stressIndex = value ? Math.round(Math.min(100, Math.max(0, 100 - ((value - 30) / 80) * 100))) : null;
   // 根据压力指数计算状态
   const getStressStatus = () => {
-    if (stressIndex === null) {
+    if (value === null) {
       return '未知';
-    } else if (stressIndex <= 30) {
+    } else if (value <= 30) {
       return '放松';
-    } else if (stressIndex <= 70) {
+    } else if (value <= 70) {
       return '正常';
     } else {
       return '紧张';
@@ -47,55 +47,71 @@ export function StressMeter({ value, updateTime, style, onPress }: StressMeterPr
 
   // 计算进度条位置（0-100%）
   // 压力指数越高，进度条越满
-  const progressPercentage = stressIndex === null ? 0 : stressIndex;
+  const progressPercentage = value === null ? 0 : value;
 
+  // 在组件内部添加状态
+  const [showStressModal, setShowStressModal] = useState(false);
+
+  // 修改 onPress 处理函数
+  const handlePress = () => {
+    setShowStressModal(true);
+  };
 
   return (
-    <TouchableOpacity
-      style={[styles.container, style]}
-      onPress={onPress}
-      activeOpacity={0.8}
-    >
-
-      {/* 头部区域 */}
-      <View style={styles.header}>
-        <View style={styles.leftSection}>
-          <View style={styles.iconContainer}>
-            <Ionicons name="heart" size={16} color="#3B82F6" />
+    <>
+      <TouchableOpacity
+        style={[styles.container, style]}
+        onPress={handlePress}
+        activeOpacity={0.8}
+      >
+        {/* 头部区域 */}
+        <View style={styles.header}>
+          <View style={styles.leftSection}>
+            <View style={styles.iconContainer}>
+              <Ionicons name="heart" size={16} color="#3B82F6" />
+            </View>
+            <Text style={styles.title}>压力</Text>
           </View>
-          <Text style={styles.title}>压力</Text>
+          <Text style={styles.emoji}>{getStatusEmoji()}</Text>
         </View>
-        <Text style={styles.emoji}>{getStatusEmoji()}</Text>
-      </View>
 
-      {/* 数值显示区域 */}
-      <View style={styles.valueSection}>
-        <Text style={styles.value}>{stressIndex === null ? '--' : stressIndex}</Text>
-        <Text style={styles.unit}>指数</Text>
-      </View>
+        {/* 数值显示区域 */}
+        <View style={styles.valueSection}>
+          <Text style={styles.value}>{value === null ? '--' : value}</Text>
+          <Text style={styles.unit}>指数</Text>
+        </View>
 
-      {/* 进度条区域 */}
-      <View style={styles.progressContainer}>
-        <View style={styles.progressTrack}>
-          {/* 渐变背景进度条 */}
-          <View style={[styles.progressBar, { width: `${progressPercentage}%` }]}>
-            <LinearGradient
-              colors={['#10B981', '#FCD34D', '#F97316']}
-              start={{ x: 0, y: 0 }}
-              end={{ x: 1, y: 0 }}
-              style={styles.gradientBar}
-            />
+        {/* 进度条区域 */}
+        <View style={styles.progressContainer}>
+          <View style={styles.progressTrack}>
+            {/* 渐变背景进度条 */}
+            <View style={[styles.progressBar, { width: `${progressPercentage}%` }]}>
+              <LinearGradient
+                colors={['#10B981', '#FCD34D', '#F97316']}
+                start={{ x: 0, y: 0 }}
+                end={{ x: 1, y: 0 }}
+                style={styles.gradientBar}
+              />
+            </View>
+            {/* 白色圆形指示器 */}
+            <View style={[styles.indicator, { left: `${Math.max(0, Math.min(100, progressPercentage - 2))}%` }]} />
           </View>
-          {/* 白色圆形指示器 */}
-          <View style={[styles.indicator, { left: `${Math.max(0, Math.min(100, progressPercentage - 2))}%` }]} />
         </View>
-      </View>
 
-      {/* 更新时间
-      {updateTime && (
-        <Text style={styles.updateTime}>{formatUpdateTime(updateTime)}</Text>
-      )} */}
-    </TouchableOpacity>
+        {/* 更新时间
+        {updateTime && (
+          <Text style={styles.updateTime}>{formatUpdateTime(updateTime)}</Text>
+        )} */}
+      </TouchableOpacity>
+
+      {/* 压力分析浮窗 */}
+      <StressAnalysisModal
+        visible={showStressModal}
+        onClose={() => setShowStressModal(false)}
+        hrvValue={hrvValue}
+        updateTime={updateTime || new Date()}
+      />
+    </>
   );
 }
 
diff --git a/utils/health.ts b/utils/health.ts
index 37555a5..8b3c8dd 100644
--- a/utils/health.ts
+++ b/utils/health.ts
@@ -10,7 +10,10 @@ const PERMISSIONS: HealthKitPermissions = {
       AppleHealthKit.Constants.Permissions.SleepAnalysis,
       AppleHealthKit.Constants.Permissions.HeartRateVariability,
     ],
-    write: [],
+    write: [
+      // 支持体重写入
+      AppleHealthKit.Constants.Permissions.Weight,
+    ],
   },
 };
 
@@ -192,4 +195,20 @@ export async function fetchHRVForDate(date: Date): Promise<number | null> {
 // 新增：获取今日HRV数据
 export async function fetchTodayHRV(): Promise<number | null> {
   return fetchHRVForDate(new Date());
-}
\ No newline at end of file
+}
+
+// 更新healthkit中的体重
+export async function updateWeight(weight: number) {
+  return new Promise((resolve) => {
+    AppleHealthKit.saveWeight({
+      value: weight,
+    }, (err, res) => {
+      if (err) {
+        console.error('更新体重失败:', err);
+        return resolve(false);
+      }
+      console.log('体重更新成功:', res);
+      resolve(true);
+    });
+  });
+}