feat: 移除目标管理演示页面并优化相关组件

- 删除目标管理演示页面的代码，简化项目结构
- 更新底部导航，移除目标管理演示页面的路由
- 调整相关组件的样式和逻辑，确保界面一致性
- 优化颜色常量的使用，提升视觉效果

components/ActivityHeatMap.tsx

@@ -59,19 +59,24 @@ const ActivityHeatMap = () => {
   console.log('generateActivityData', generateActivityData);
 
 
-  // 根据活跃度计算颜色
+  // 根据活跃度计算颜色 - 优化配色方案
   const getActivityColor = (level: number): string => {
-    // 由于useColorScheme总是返回'light'，我们直接使用浅色主题的颜色
     switch (level) {
       case 0:
-        return colors.separator; // 使用主题分隔线色
+        // 无活动：使用主题适配的背景色
+        return colors.separator;
       case 1:
+        // 低活动：使用主题主色的浅色版本
+        return 'rgba(122, 90, 248, 0.15)'; // 浅色模式下的浅紫色
       case 2:
-        return 'rgba(135,206,235,0.4)';
+        // 中等活动：使用主题主色的中等透明度
+        return 'rgba(122, 90, 248, 0.35)'; // 浅色模式下的中等紫色
       case 3:
-        return 'rgba(135,206,235,0.65)';
+        // 高活动：使用主题主色的较高透明度
+        return 'rgba(122, 90, 248, 0.55)'; // 浅色模式下的较深紫色
       case 4:
       default:
+        // 最高活动：使用主题主色
         return colors.primary;
     }
   };
@@ -143,14 +148,20 @@ const ActivityHeatMap = () => {
   }, [generateActivityData]);
 
   return (
-    <View style={[styles.container, { backgroundColor: colors.card }]}>
+    <View style={[styles.container, { 
+      backgroundColor: colors.card,
+      borderColor: colors.border,
+      shadowColor: 'rgba(122, 90, 248, 0.08)',
+    }]}>
       {/* 标题和统计 */}
       <View style={styles.header}>
         <View style={styles.titleRow}>
           <Text style={[styles.subtitle, { color: colors.textMuted }]}>
             最近6个月活跃 {activityStats.activeDays} 天
           </Text>
-          <View style={[styles.statsBadge, { backgroundColor: colors.ornamentPrimary }]}>
+          <View style={[styles.statsBadge, { 
+            backgroundColor: 'rgba(122, 90, 248, 0.1)' 
+          }]}>
             <Text style={[styles.statsText, { color: colors.primary }]}>
               {activityStats.activeRate}%
             </Text>
@@ -238,13 +249,10 @@ const styles = StyleSheet.create({
     borderRadius: 16,
     padding: 20,
     marginBottom: 20,
-    shadowColor: 'rgba(135,206,235,0.25)',
     shadowOffset: { width: 0, height: 3 },
     shadowOpacity: 0.12,
     shadowRadius: 6,
     elevation: 3,
-    borderWidth: 1,
-    borderColor: 'rgba(135,206,235,0.08)',
   },
   header: {
     marginBottom: 8,

components/statistic/HealthDataCard.tsx

@@ -24,6 +24,9 @@ const HealthDataCard: React.FC<HealthDataCardProps> = ({
       style={[styles.card, style]}
     >
 
+      <View style={styles.iconContainer}>
+        {icon}
+      </View>
       <View style={styles.content}>
         <Text style={styles.title}>{title}</Text>
         <View style={styles.valueContainer}>
@@ -53,14 +56,18 @@ const styles = StyleSheet.create({
   },
   iconContainer: {
     marginRight: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   content: {
     flex: 1,
+    justifyContent: 'center',
   },
   title: {
     fontSize: 14,
     color: '#666',
     marginBottom: 4,
+    fontWeight: '600',
   },
   valueContainer: {
     flexDirection: 'row',
@@ -68,14 +75,15 @@ const styles = StyleSheet.create({
   },
   value: {
     fontSize: 24,
-    fontWeight: 'bold',
-    color: '#333',
+    fontWeight: '800',
+    color: '#192126',
   },
   unit: {
     fontSize: 14,
     color: '#666',
     marginLeft: 4,
     marginBottom: 2,
+    fontWeight: '500',
   },
 });
 

components/statistic/HeartRateCard.tsx

@@ -1,29 +1,19 @@
 import { Ionicons } from '@expo/vector-icons';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { StyleSheet } from 'react-native';
-import HealthDataService from '../../services/healthData';
 import HealthDataCard from './HealthDataCard';
 
 interface HeartRateCardProps {
   resetToken: number;
   style?: object;
+  heartRate?: number | null;
 }
 
 const HeartRateCard: React.FC<HeartRateCardProps> = ({
   resetToken,
-  style
+  style,
+  heartRate
 }) => {
-  const [heartRate, setHeartRate] = useState<number | null>(null);
-
-  useEffect(() => {
-    const fetchHeartRate = async () => {
-      const data = await HealthDataService.getHeartRate();
-      setHeartRate(data);
-    };
-
-    fetchHeartRate();
-  }, [resetToken]);
-
   const heartIcon = (
     <Ionicons name="heart" size={24} color="#EF4444" />
   );
@@ -31,7 +21,7 @@ const HeartRateCard: React.FC<HeartRateCardProps> = ({
   return (
     <HealthDataCard
       title="心率"
-      value={heartRate !== null ? heartRate.toString() : '--'}
+      value={heartRate !== null && heartRate !== undefined ? Math.round(heartRate).toString() : '--'}
       unit="bpm"
       icon={heartIcon}
       style={style}

components/statistic/OxygenSaturationCard.tsx

@@ -1,29 +1,19 @@
 import { Ionicons } from '@expo/vector-icons';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { StyleSheet } from 'react-native';
-import HealthDataService from '../../services/healthData';
 import HealthDataCard from './HealthDataCard';
 
 interface OxygenSaturationCardProps {
   resetToken: number;
   style?: object;
+  oxygenSaturation?: number | null;
 }
 
 const OxygenSaturationCard: React.FC<OxygenSaturationCardProps> = ({
   resetToken,
-  style
+  style,
+  oxygenSaturation
 }) => {
-  const [oxygenSaturation, setOxygenSaturation] = useState<number | null>(null);
-
-  useEffect(() => {
-    const fetchOxygenSaturation = async () => {
-      const data = await HealthDataService.getOxygenSaturation();
-      setOxygenSaturation(data);
-    };
-
-    fetchOxygenSaturation();
-  }, [resetToken]);
-
   const oxygenIcon = (
     <Ionicons name="water" size={24} color="#3B82F6" />
   );
@@ -31,7 +21,7 @@ const OxygenSaturationCard: React.FC<OxygenSaturationCardProps> = ({
   return (
     <HealthDataCard
       title="血氧饱和度"
-      value={oxygenSaturation !== null ? oxygenSaturation.toString() : '--'}
+      value={oxygenSaturation !== null && oxygenSaturation !== undefined ? oxygenSaturation.toFixed(1) : '--'}
       unit="%"
       icon={oxygenIcon}
       style={style}

components/ui/HeaderBar.tsx

@@ -14,6 +14,7 @@ export type HeaderBarProps = {
   showBottomBorder?: boolean;
   withSafeTop?: boolean;
   transparent?: boolean;
+  variant?: 'default' | 'elevated' | 'minimal';
 };
 
 export function HeaderBar({
@@ -24,34 +25,115 @@ export function HeaderBar({
   showBottomBorder = false,
   withSafeTop = true,
   transparent = true,
+  variant = 'default',
 }: HeaderBarProps) {
   const insets = useSafeAreaInsets();
   const colorScheme = useColorScheme() ?? 'light';
   const theme = Colors[tone ?? colorScheme];
 
+  // 根据变体确定背景色和样式
+  const getBackgroundColor = () => {
+    if (transparent) return 'transparent';
+    
+    switch (variant) {
+      case 'elevated':
+        return theme.background;
+      case 'minimal':
+        return theme.background;
+      default:
+        return theme.card;
+    }
+  };
+
+  const getBackButtonStyle = () => {
+    const baseStyle = [styles.backButton];
+    
+    switch (variant) {
+      case 'elevated':
+        return [...baseStyle, { 
+          backgroundColor: `${theme.primary}15`, // 15% 透明度
+          borderWidth: 1,
+          borderColor: `${theme.primary}20`, // 20% 透明度
+        }];
+      case 'minimal':
+        return [...baseStyle, { 
+          backgroundColor: `${theme.neutral100}80`, // 80% 透明度
+        }];
+      default:
+        return [...baseStyle, { 
+          backgroundColor: `${theme.accentGreen}20`, // 20% 透明度
+        }];
+    }
+  };
+
+  const getBackButtonIconColor = () => {
+    switch (variant) {
+      case 'elevated':
+        return theme.primary;
+      case 'minimal':
+        return theme.textSecondary;
+      default:
+        return theme.onPrimary;
+    }
+  };
+
+  const getBorderStyle = () => {
+    if (!showBottomBorder) return {};
+    
+    return {
+      borderBottomWidth: 1,
+      borderBottomColor: variant === 'elevated' 
+        ? theme.border 
+        : `${theme.border}40`, // 40% 透明度
+    };
+  };
+
   return (
     <View
       style={[
         styles.header,
         {
           paddingTop: (withSafeTop ? insets.top : 0) + 8,
-          backgroundColor: transparent ? 'transparent' : theme.card,
-          borderBottomWidth: showBottomBorder ? 1 : 0,
-          borderBottomColor: theme.border,
+          backgroundColor: getBackgroundColor(),
+          ...getBorderStyle(),
+          ...(variant === 'elevated' && {
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 1 },
+            shadowOpacity: 0.05,
+            shadowRadius: 3,
+            elevation: 2,
+          }),
         },
       ]}
     >
       {onBack ? (
-        <TouchableOpacity accessibilityRole="button" onPress={onBack} style={[styles.backButton, { backgroundColor: `${Colors.light.accentGreen}33` }]}>
-          <Ionicons name="chevron-back" size={20} color={theme.onPrimary} />
+        <TouchableOpacity 
+          accessibilityRole="button" 
+          onPress={onBack} 
+          style={getBackButtonStyle()}
+          activeOpacity={0.7}
+        >
+          <Ionicons 
+            name="chevron-back" 
+            size={20} 
+            color={getBackButtonIconColor()} 
+          />
         </TouchableOpacity>
       ) : (
         <View style={{ width: 32 }} />
       )}
 
-      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+      <View style={styles.titleContainer}>
         {typeof title === 'string' ? (
-          <Text style={[styles.title, { color: theme.text }]}>{title}</Text>
+          <Text style={[
+            styles.title, 
+            { 
+              color: theme.text,
+              fontWeight: variant === 'elevated' ? '700' : '800',
+            }
+          ]}>
+            {title}
+          </Text>
         ) : (
           title
         )}
@@ -68,7 +150,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-between',
     paddingHorizontal: 16,
-    paddingBottom: 10,
+    paddingBottom: 12,
+    minHeight: 44,
+    width: '100%',
   },
   backButton: {
     width: 32,
@@ -76,10 +160,25 @@ const styles = StyleSheet.create({
     borderRadius: 16,
     alignItems: 'center',
     justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  titleContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 8,
   },
   title: {
-    fontSize: 20,
-    fontWeight: '800',
+    fontSize: 18,
+    textAlign: 'center',
+    letterSpacing: -0.3,
   },
 });