feat: 优化统计页面和BMI卡片，移除压力分析相关代码
- 在统计页面中移除压力分析模态框及相关状态管理，简化组件逻辑 - 更新BMI卡片，改进弹窗展示方式，增加渐变背景和健康建议 - 新增更新体重的功能，支持将体重数据写入健康数据中 - 优化压力计组件，调整数据展示逻辑，提升用户体验
This commit is contained in:
richarjiang
@@ -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',
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user