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

components/MoodCard.tsx

@@ -1,6 +1,7 @@
 import { MoodCheckin, getMoodConfig } from '@/services/moodCheckins';
 import dayjs from 'dayjs';
-import React from 'react';
+import LottieView from 'lottie-react-native';
+import React, { useEffect, useRef } from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 interface MoodCardProps {
@@ -11,10 +12,26 @@ interface MoodCardProps {
 
 export function MoodCard({ moodCheckin, onPress, isLoading = false }: MoodCardProps) {
   const moodConfig = moodCheckin ? getMoodConfig(moodCheckin.moodType) : null;
+  const animationRef = useRef<LottieView>(null);
+
+  useEffect(() => {
+    if (animationRef.current) {
+      animationRef.current.play();
+    }
+  }, []);
 
   return (
     <TouchableOpacity onPress={onPress} style={styles.moodCardContent} disabled={isLoading}>
-      <Text style={styles.cardTitle}>心情</Text>
+      <View style={styles.moodCardHeader}>
+        <Text style={styles.cardTitle}>心情</Text>
+        <LottieView
+          ref={animationRef}
+          source={require('@/assets/lottie/mood/mood_demo.json')}
+          autoPlay
+          loop
+          style={styles.lottieAnimation}
+        />
+      </View>
       {isLoading ? (
         <View style={styles.moodPreview}>
           <Text style={styles.moodLoadingText}>加载中...</Text>
@@ -40,11 +57,22 @@ const styles = StyleSheet.create({
     width: '100%',
   },
 
+  moodCardHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+
   cardTitle: {
     fontSize: 14,
     color: '#192126',
   },
 
+  lottieAnimation: {
+    width: 40,
+    height: 40,
+  },
+
   moodPreview: {
     flexDirection: 'row',
     justifyContent: 'space-between',