feat: 更新 UI 样式以及消息通知

components/weight/WeightHistoryCard.tsx

@@ -4,9 +4,8 @@ import { useAppDispatch, useAppSelector } from '@/hooks/redux';
 import { useAuthGuard } from '@/hooks/useAuthGuard';
 import { useColorScheme } from '@/hooks/useColorScheme';
 import { fetchWeightHistory } from '@/store/userSlice';
-import { BMI_CATEGORIES, canCalculateBMI, getBMIResult } from '@/utils/bmi';
+import { BMI_CATEGORIES } from '@/utils/bmi';
 import { Ionicons } from '@expo/vector-icons';
-import dayjs from 'dayjs';
 import { LinearGradient } from 'expo-linear-gradient';
 import React, { useEffect, useState } from 'react';
 import {
@@ -18,20 +17,12 @@ import {
   TouchableOpacity,
   View
 } from 'react-native';
-import Animated, {
-  Extrapolation,
-  interpolate,
-  runOnJS,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
-import Svg, { Circle, Line, Path, Text as SvgText } from 'react-native-svg';
+import Svg, { Circle, Path } from 'react-native-svg';
 
 const { width: screenWidth } = Dimensions.get('window');
 const CARD_WIDTH = screenWidth - 40; // 减去左右边距
 const CHART_WIDTH = CARD_WIDTH - 36; // 减去卡片内边距
-const CHART_HEIGHT = 100;
+const CHART_HEIGHT = 60;
 const PADDING = 10;
 
 
@@ -40,12 +31,8 @@ export function WeightHistoryCard() {
   const userProfile = useAppSelector((s) => s.user.profile);
   const weightHistory = useAppSelector((s) => s.user.weightHistory);
 
-  const [showChart, setShowChart] = useState(false);
   const [showBMIModal, setShowBMIModal] = useState(false);
 
-  // 动画相关状态
-  const animationProgress = useSharedValue(0);
-  const [isAnimating, setIsAnimating] = useState(false);
 
   const { pushIfAuthedElseLogin } = useAuthGuard();
   const colorScheme = useColorScheme();
@@ -53,15 +40,6 @@ export function WeightHistoryCard() {
 
   const hasWeight = userProfile?.weight && parseFloat(userProfile.weight) > 0;
 
-  // BMI 计算
-  const canCalculate = canCalculateBMI(
-    userProfile?.weight ? parseFloat(userProfile.weight) : undefined,
-    userProfile?.height ? parseFloat(userProfile.height) : undefined
-  );
-
-  const bmiResult = canCalculate && userProfile?.weight && userProfile?.height
-    ? getBMIResult(parseFloat(userProfile.weight), parseFloat(userProfile.height))
-    : null;
 
   useEffect(() => {
     if (hasWeight) {
@@ -81,115 +59,14 @@ export function WeightHistoryCard() {
     pushIfAuthedElseLogin(ROUTES.WEIGHT_RECORDS);
   };
 
-  const handleShowBMIModal = () => {
-    setShowBMIModal(true);
-  };
-
   const handleHideBMIModal = () => {
     setShowBMIModal(false);
   };
 
-  // 切换图表显示状态的动画函数
   const navigateToWeightRecords = () => {
     pushIfAuthedElseLogin(ROUTES.WEIGHT_RECORDS);
   };
 
-  const toggleChart = () => {
-    if (isAnimating) return; // 防止动画期间重复触发
-
-    setIsAnimating(true);
-    const newShowChart = !showChart;
-    setShowChart(newShowChart);
-
-    animationProgress.value = withTiming(
-      newShowChart ? 1 : 0,
-      {
-        duration: 350,
-      },
-      (finished) => {
-        if (finished) {
-          runOnJS(setIsAnimating)(false);
-        }
-      }
-    );
-  };
-
-  // 动画容器的高度动画
-  const containerAnimatedStyle = useAnimatedStyle(() => {
-    // 只有在展开状态时才应用固定高度
-    if (animationProgress.value === 0) {
-      return {};
-    }
-
-    const height = interpolate(
-      animationProgress.value,
-      [0, 1],
-      [80, 200], // 从摘要高度到图表高度，适应毛玻璃背景
-      Extrapolation.CLAMP
-    );
-
-    return {
-      height,
-    };
-  });
-
-  // 摘要信息的动画样式
-  const summaryAnimatedStyle = useAnimatedStyle(() => {
-    const opacity = interpolate(
-      animationProgress.value,
-      [0, 0.4, 1],
-      [1, 0.2, 0],
-      Extrapolation.CLAMP
-    );
-
-    const scale = interpolate(
-      animationProgress.value,
-      [0, 1],
-      [1, 0.9],
-      Extrapolation.CLAMP
-    );
-
-    const translateY = interpolate(
-      animationProgress.value,
-      [0, 1],
-      [0, -20],
-      Extrapolation.CLAMP
-    );
-
-    return {
-      opacity,
-      transform: [{ scale }, { translateY }],
-    };
-  });
-
-  // 图表容器的动画样式
-  const chartAnimatedStyle = useAnimatedStyle(() => {
-    const opacity = interpolate(
-      animationProgress.value,
-      [0, 0.6, 1],
-      [0, 0.2, 1],
-      Extrapolation.CLAMP
-    );
-
-    const scale = interpolate(
-      animationProgress.value,
-      [0, 1],
-      [0.9, 1],
-      Extrapolation.CLAMP
-    );
-
-    const translateY = interpolate(
-      animationProgress.value,
-      [0, 1],
-      [20, 0],
-      Extrapolation.CLAMP
-    );
-
-    return {
-      opacity,
-      transform: [{ scale }, { translateY }],
-    };
-  });
 
 
   // 如果没有体重数据，显示引导卡片
@@ -263,7 +140,7 @@ export function WeightHistoryCard() {
     const x = PADDING + (index / Math.max(sortedHistory.length - 1, 1)) * (CHART_WIDTH - 2 * PADDING);
     const normalizedWeight = (parseFloat(item.weight) - minWeight) / weightRange;
     // 减少顶部边距，压缩留白
-    const y = PADDING + 15 + (1 - normalizedWeight) * (CHART_HEIGHT - 2 * PADDING - 30);
+    const y = PADDING + 8 + (1 - normalizedWeight) * (CHART_HEIGHT - 2 * PADDING - 16);
     return { x, y, weight: item.weight, date: item.createdAt };
   });
 
@@ -282,166 +159,70 @@ export function WeightHistoryCard() {
     <TouchableOpacity style={styles.card} onPress={navigateToWeightRecords} activeOpacity={0.8}>
       <View style={styles.cardHeader}>
         <Text style={styles.cardTitle}>体重记录</Text>
-        <View style={styles.headerButtons}>
-          <TouchableOpacity
-            style={styles.chartToggleButton}
-            onPress={(e) => {
-              e.stopPropagation();
-              toggleChart();
-            }}
-            activeOpacity={0.8}
-          >
-            <Ionicons
-              name={showChart ? "chevron-up" : "chevron-down"}
-              size={16}
-              color={Colors.light.primary}
-            />
-          </TouchableOpacity>
-        </View>
+        <TouchableOpacity
+          style={styles.addButton}
+          onPress={(e) => {
+            e.stopPropagation();
+            navigateToCoach();
+          }}
+          activeOpacity={0.8}
+        >
+          <Ionicons name="add" size={18} color={Colors.light.primary} />
+        </TouchableOpacity>
       </View>
 
-      {/* 动画容器 */}
+      {/* 默认显示图表 */}
       {sortedHistory.length > 0 && (
-        <Animated.View style={[styles.animationContainer, containerAnimatedStyle]}>
-          {/* 默认信息显示 - 带动画 */}
-          <Animated.View style={[styles.summaryInfo, summaryAnimatedStyle]}>
-            <View style={styles.summaryBackground}>
-              <View style={styles.summaryRow}>
-                <View style={styles.summaryItem}>
-                  <Text style={styles.summaryLabel}>当前体重</Text>
-                  <Text style={styles.summaryValue}>{userProfile.weight}kg</Text>
-                </View>
-                <View style={styles.summaryItem}>
-                  <Text style={styles.summaryLabel}>记录天数</Text>
-                  <Text style={styles.summaryValue}>{sortedHistory.length}天</Text>
-                </View>
-                <View style={styles.summaryItem}>
-                  <Text style={styles.summaryLabel}>变化范围</Text>
-                  <Text style={styles.summaryValue}>
-                    {minWeight.toFixed(1)}-{maxWeight.toFixed(1)}
-                  </Text>
-                </View>
-                {bmiResult && (
-                  <View style={styles.summaryItem}>
-                    <Text style={styles.summaryLabel}>BMI</Text>
-                    <View style={styles.bmiValueContainer}>
-                      <Text style={[styles.bmiValue, { color: bmiResult.color }]}>
-                        {bmiResult.value}
-                      </Text>
-                      <TouchableOpacity
-                        onPress={(e) => {
-                          e.stopPropagation();
-                          handleShowBMIModal();
-                        }}
-                        style={styles.bmiInfoButton}
-                        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-                      >
-                        <Ionicons name="information-circle-outline" size={12} color="#9AA3AE" />
-                      </TouchableOpacity>
-                    </View>
-                  </View>
-                )}
-              </View>
+        <View style={styles.chartContainer}>
+          <Svg width={CHART_WIDTH} height={CHART_HEIGHT + 15}>
+            {/* 背景网格线 */}
+
+            {/* 更抽象的折线 - 减小线宽和显示的细节 */}
+            <Path
+              d={singlePointPath}
+              stroke={Colors.light.accentGreen}
+              strokeWidth={2}
+              fill="none"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              opacity={0.8}
+            />
+
+            {/* 简化的数据点 - 更小更精致 */}
+            {points.map((point, index) => {
+              const isLastPoint = index === points.length - 1;
+
+              return (
+                <React.Fragment key={index}>
+                  <Circle
+                    cx={point.x}
+                    cy={point.y}
+                    r={isLastPoint ? 3 : 2}
+                    fill={Colors.light.accentGreen}
+                    opacity={0.9}
+                  />
+                </React.Fragment>
+              );
+            })}
+
+
+          </Svg>
+
+          {/* 精简的图表信息 */}
+          <View style={styles.chartInfo}>
+            <View style={styles.infoItem}>
+              <Text style={styles.infoLabel}>{userProfile.weight}kg</Text>
             </View>
-          </Animated.View>
-
-          {/* 图表容器 - 带动画 */}
-          <Animated.View style={[styles.chartContainer, chartAnimatedStyle]}>
-            <Svg width={CHART_WIDTH} height={CHART_HEIGHT + 15}>
-              {/* 背景网格线 */}
-              {[0, 1, 2, 3, 4].map(i => (
-                <Line
-                  key={`grid-${i}`}
-                  x1={PADDING}
-                  y1={PADDING + 15 + i * (CHART_HEIGHT - 2 * PADDING - 30) / 4}
-                  x2={CHART_WIDTH - PADDING}
-                  y2={PADDING + 15 + i * (CHART_HEIGHT - 2 * PADDING - 30) / 4}
-                  stroke="#F0F0F0"
-                  strokeWidth={1}
-                />
-              ))}
-
-              {/* 折线 */}
-              <Path
-                d={singlePointPath}
-                stroke={Colors.light.accentGreen}
-                strokeWidth={3}
-                fill="none"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-
-              {/* 数据点和标签 */}
-              {points.map((point, index) => {
-                const isLastPoint = index === points.length - 1;
-                const isFirstPoint = index === 0;
-                const showLabel = isFirstPoint || isLastPoint || points.length <= 3 || points.length === 1;
-
-                return (
-                  <React.Fragment key={index}>
-                    <Circle
-                      cx={point.x}
-                      cy={point.y}
-                      r={isLastPoint ? 6 : 4}
-                      fill={Colors.light.accentGreen}
-                      stroke="#FFFFFF"
-                      strokeWidth={2}
-                    />
-                    {/* 体重标签 - 只在关键点显示 */}
-                    {showLabel && (
-                      <>
-                        <Circle
-                          cx={point.x}
-                          cy={point.y - 15}
-                          r={10}
-                          fill="rgba(255,255,255,0.9)"
-                          stroke={Colors.light.accentGreen}
-                          strokeWidth={1}
-                        />
-                        <SvgText
-                          x={point.x}
-                          y={point.y - 12}
-                          fontSize="9"
-                          fill="#192126"
-                          textAnchor="middle"
-                        >
-                          {point.weight}
-                        </SvgText>
-                      </>
-                    )}
-                  </React.Fragment>
-                );
-              })}
-
-
-            </Svg>
-
-            {/* 图表底部信息 */}
-            <View style={styles.chartInfo}>
-              <View style={styles.infoItem}>
-                <Text style={styles.infoLabel}>当前体重</Text>
-                <Text style={styles.infoValue}>{userProfile.weight}kg</Text>
-              </View>
-              <View style={styles.infoItem}>
-                <Text style={styles.infoLabel}>记录天数</Text>
-                <Text style={styles.infoValue}>{sortedHistory.length}天</Text>
-              </View>
-              <View style={styles.infoItem}>
-                <Text style={styles.infoLabel}>变化范围</Text>
-                <Text style={styles.infoValue}>
-                  {minWeight.toFixed(1)}-{maxWeight.toFixed(1)}kg
-                </Text>
-              </View>
+            <View style={styles.infoItem}>
+              <Text style={styles.infoLabel}>{sortedHistory.length}天</Text>
             </View>
-
-            {/* 最近记录时间 */}
-            {sortedHistory.length > 0 && (
-              <Text style={styles.lastRecordText}>
-                最近记录：{dayjs(sortedHistory[sortedHistory.length - 1].createdAt).format('MM/DD HH:mm')}
+            <View style={styles.infoItem}>
+              <Text style={styles.infoLabel}>
+                {minWeight.toFixed(1)}-{maxWeight.toFixed(1)}kg
               </Text>
-            )}
-          </Animated.View>
-        </Animated.View>
+            </View>
+          </View>
+        </View>
       )}
 
       {/* BMI 信息弹窗 */}
@@ -627,37 +408,10 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: '700',
   },
-  animationContainer: {
-    position: 'relative',
-    overflow: 'hidden',
-    minHeight: 80, // 增加最小高度以容纳毛玻璃背景
-  },
-  summaryInfo: {
-    position: 'absolute',
-    width: '100%',
-    marginTop: 8,
-  },
-  summaryBackground: {
-    backgroundColor: 'rgba(248, 250, 252, 0.8)', // 毛玻璃背景色
-    borderRadius: 12,
-    padding: 12,
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 1,
-    },
-    shadowOpacity: 0.06,
-    shadowRadius: 3,
-    elevation: 1,
-    // 添加边框增强毛玻璃效果
-    borderWidth: 0.5,
-    borderColor: 'rgba(255, 255, 255, 0.8)',
-  },
   chartContainer: {
-    position: 'absolute',
     width: '100%',
     alignItems: 'center',
-    minHeight: 100,
+    marginTop: 12,
   },
   chartInfo: {
     flexDirection: 'row',
@@ -668,67 +422,15 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   infoLabel: {
-    fontSize: 12,
+    fontSize: 11,
     color: '#687076',
-    marginBottom: 4,
+    fontWeight: '500',
   },
   infoValue: {
     fontSize: 14,
     fontWeight: '700',
     color: '#192126',
   },
-  lastRecordText: {
-    fontSize: 12,
-    color: '#687076',
-    textAlign: 'center',
-    marginTop: 4,
-  },
-  summaryRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 0,
-    flexWrap: 'wrap',
-    gap: 8,
-  },
-  summaryItem: {
-    alignItems: 'center',
-    flex: 1,
-    minWidth: 0,
-  },
-  summaryLabel: {
-    fontSize: 12,
-    color: '#687076',
-    marginBottom: 3,
-  },
-  summaryValue: {
-    fontSize: 14,
-    marginTop: 2,
-    fontWeight: '600',
-    color: '#192126',
-  },
-
-  // BMI 相关样式
-  bmiValueContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 1,
-  },
-  bmiValue: {
-    fontSize: 12,
-    fontWeight: '700',
-  },
-  bmiInfoButton: {
-    padding: 0,
-  },
-  bmiStatusBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 8,
-  },
-  bmiStatusText: {
-    fontSize: 10,
-    fontWeight: '700',
-  },
 
   // BMI 弹窗样式
   bmiModalContainer: {