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

components/NotificationTest.tsx

@@ -10,6 +10,7 @@ import {
 import { useNotifications } from '../hooks/useNotifications';
 import { ThemedText } from './ThemedText';
 import { ThemedView } from './ThemedView';
+import { DailySummaryTest } from './DailySummaryTest';
 
 export const NotificationTest: React.FC = () => {
   const {
@@ -246,6 +247,9 @@ export const NotificationTest: React.FC = () => {
             ))}
           </View>
         )}
+
+        {/* 每日总结推送测试 */}
+        <DailySummaryTest userName="测试用户" />
       </ScrollView>
     </ThemedView>
   );

components/NutritionRadarCard.tsx

@@ -1,5 +1,4 @@
 import { AnimatedNumber } from '@/components/AnimatedNumber';
-import { FloatingFoodOverlay } from '@/components/FloatingFoodOverlay';
 import { ROUTES } from '@/constants/Routes';
 import { NutritionSummary } from '@/services/dietRecords';
 import { triggerLightHaptic } from '@/utils/haptics';
@@ -7,7 +6,7 @@ import { NutritionGoals, calculateRemainingCalories } from '@/utils/nutrition';
 import dayjs from 'dayjs';
 import { router } from 'expo-router';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Animated, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Animated, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import Svg, { Circle } from 'react-native-svg';
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
@@ -107,7 +106,6 @@ export function NutritionRadarCard({
   onMealPress
 }: NutritionRadarCardProps) {
   const [currentMealType] = useState<'breakfast' | 'lunch' | 'dinner' | 'snack'>('breakfast');
-  const [showFoodOverlay, setShowFoodOverlay] = useState(false);
 
   const nutritionStats = useMemo(() => {
     return [
@@ -138,25 +136,12 @@ export function NutritionRadarCard({
     router.push(ROUTES.NUTRITION_RECORDS);
   };
 
-  const handleAddFood = () => {
-    triggerLightHaptic();
-    setShowFoodOverlay(true);
-  };
 
   return (
     <TouchableOpacity style={styles.card} onPress={handleNavigateToRecords} activeOpacity={0.8}>
       <View style={styles.cardHeader}>
         <Text style={styles.cardTitle}>饮食分析</Text>
-        <View style={styles.cardRightContainer}>
-          <Text style={styles.cardSubtitle}>更新: {dayjs(nutritionSummary?.updatedAt).format('MM-DD HH:mm')}</Text>
-          <TouchableOpacity style={styles.addButton} onPress={handleAddFood}>
-            {/* <Ionicons name="add" size={16} color="#514b4bff" /> */}
-            <Text style={{
-              fontSize: 12,
-              color: 'white'
-            }}>添加+</Text>
-          </TouchableOpacity>
-        </View>
+        <Text style={styles.cardSubtitle}>更新: {dayjs(nutritionSummary?.updatedAt).format('MM-DD HH:mm')}</Text>
       </View>
 
       <View style={styles.contentContainer}>
@@ -228,12 +213,59 @@ export function NutritionRadarCard({
         </View>
       </View>
 
-      {/* 食物添加悬浮窗 */}
-      <FloatingFoodOverlay
-        visible={showFoodOverlay}
-        onClose={() => setShowFoodOverlay(false)}
-        mealType={currentMealType}
-      />
+      {/* 添加食物选项 */}
+      <View style={styles.foodOptionsContainer}>
+        <TouchableOpacity
+          style={styles.foodOptionItem}
+          onPress={() => {
+            triggerLightHaptic();
+            router.push(`/food/camera?mealType=${currentMealType}`);
+          }}
+          activeOpacity={0.7}
+        >
+          <View style={[styles.foodOptionIcon]}>
+            <Image
+              source={require('@/assets/images/icons/icon-camera.png')}
+              style={styles.foodOptionImage}
+            />
+          </View>
+          <Text style={styles.foodOptionText}>AI识别</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={styles.foodOptionItem}
+          onPress={() => {
+            triggerLightHaptic();
+            router.push(`${ROUTES.FOOD_LIBRARY}?mealType=${currentMealType}`);
+          }}
+          activeOpacity={0.7}
+        >
+          <View style={[styles.foodOptionIcon]}>
+            <Image
+              source={require('@/assets/images/icons/icon-food.png')}
+              style={styles.foodOptionImage}
+            />
+          </View>
+          <Text style={styles.foodOptionText}>食物库</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={styles.foodOptionItem}
+          onPress={() => {
+            triggerLightHaptic();
+            router.push(`${ROUTES.VOICE_RECORD}?mealType=${currentMealType}`);
+          }}
+          activeOpacity={0.7}
+        >
+          <View style={[styles.foodOptionIcon]}>
+            <Image
+              source={require('@/assets/images/icons/icon-broadcast.png')}
+              style={styles.foodOptionImage}
+            />
+          </View>
+          <Text style={styles.foodOptionText}>一句话记录</Text>
+        </TouchableOpacity>
+      </View>
 
     </TouchableOpacity>
   );
@@ -264,11 +296,6 @@ const styles = StyleSheet.create({
     fontSize: 14,
     color: '#192126',
   },
-  cardRightContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4,
-  },
   cardSubtitle: {
     fontSize: 10,
     color: '#9AA3AE',
@@ -416,26 +443,53 @@ const styles = StyleSheet.create({
   mealEmoji: {
     fontSize: 24,
   },
-  addButton: {
-    width: 52,
-    height: 26,
-    borderRadius: 16,
-    backgroundColor: '#7b7be2ff',
-    marginLeft: 8,
-    alignItems: 'center',
-    justifyContent: 'center',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 2,
-  },
   mealName: {
     fontSize: 10,
     color: '#64748B',
     fontWeight: '600',
   },
+  // 食物选项样式
+  foodOptionsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    marginTop: 12,
+    paddingTop: 12,
+    borderTopWidth: 1,
+    borderTopColor: '#F1F5F9',
+    gap: 16,
+  },
+  foodOptionItem: {
+    alignItems: 'center',
+    flex: 1,
+  },
+  foodOptionIcon: {
+    width: 24,
+    height: 24,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 6,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.15,
+    shadowRadius: 4,
+    elevation: 4,
+  },
+  foodOptionEmoji: {
+    fontSize: 14,
+  },
+  foodOptionImage: {
+    width: 20,
+    height: 20,
+    resizeMode: 'contain',
+  },
+  foodOptionText: {
+    fontSize: 10,
+    fontWeight: '500',
+    color: '#192126',
+    textAlign: 'center',
+  },
 });

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: {