feat: 新增动画资源与庆祝效果，优化布局与标签页配置

components/WaterIntakeCard.tsx

@@ -2,7 +2,8 @@ import { useWaterDataByDate } from '@/hooks/useWaterData';
 import { getQuickWaterAmount } from '@/utils/userPreferences';
 import dayjs from 'dayjs';
 import * as Haptics from 'expo-haptics';
-import React, { useEffect, useMemo, useState } from 'react';
+import LottieView from 'lottie-react-native';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   Animated,
   StyleSheet,
@@ -31,6 +32,8 @@ const WaterIntakeCard: React.FC<WaterIntakeCardProps> = ({
   const currentIntake = waterStats?.totalAmount || 0;
   const targetIntake = dailyWaterGoal || 2000;
 
+  const animationRef = useRef<LottieView>(null);
+
   // 为每个时间点创建独立的动画值
   const animatedValues = useMemo(() =>
     Array.from({ length: 24 }, () => new Animated.Value(0))
@@ -119,6 +122,8 @@ const WaterIntakeCard: React.FC<WaterIntakeCardProps> = ({
       Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
     }
 
+    animationRef.current?.play();
+
     // 使用用户配置的快速添加饮水量
     const waterAmount = quickWaterAmount;
     // 如果有选中日期，则为该日期添加记录；否则为今天添加记录
@@ -156,6 +161,20 @@ const WaterIntakeCard: React.FC<WaterIntakeCardProps> = ({
         onPress={handleCardPress}
         activeOpacity={0.8}
       >
+        <LottieView
+          ref={animationRef}
+          autoPlay={false}
+          loop={false}
+          source={require('@/assets/lottie/Confetti.json')}
+          style={{
+            width: 150,
+            height: 150,
+            position: 'absolute',
+            left: '15%',
+          }}
+        />
+
+
         {/* 标题和加号按钮 */}
         <View style={styles.header}>
           <Text style={styles.title}>喝水</Text>
@@ -166,6 +185,7 @@ const WaterIntakeCard: React.FC<WaterIntakeCardProps> = ({
           )}
         </View>
 
+
         {/* 柱状图 */}
         <View style={styles.chartContainer}>
           <View style={styles.chartWrapper}>