feat: 更新心情记录功能和界面

- 调整启动画面中的图片宽度，提升视觉效果
- 移除引导页面相关组件，简化应用结构
- 新增心情统计页面，支持用户查看和分析心情数据
- 优化心情卡片组件，增强用户交互体验
- 更新登录页面标题，提升品牌一致性
- 新增心情日历和编辑功能，支持用户记录和管理心情

components/MoodCard.tsx

@@ -1,76 +1,111 @@
+import { MoodCheckin, getMoodConfig } from '@/services/moodCheckins';
+import dayjs from 'dayjs';
 import React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { ThemedText } from './ThemedText';
-import { ThemedView } from './ThemedView';
 
 interface MoodCardProps {
+  moodCheckin: MoodCheckin | null;
   onPress: () => void;
+  isLoading?: boolean;
 }
 
-export function MoodCard({ onPress }: MoodCardProps) {
+export function MoodCard({ moodCheckin, onPress, isLoading = false }: MoodCardProps) {
+  const moodConfig = moodCheckin ? getMoodConfig(moodCheckin.moodType) : null;
+
   return (
-    <ThemedView style={styles.container}>
-      <View style={styles.header}>
-        <ThemedText style={styles.title}>心情</ThemedText>
-        <ThemedText style={styles.subtitle}>记录你的每日心情</ThemedText>
+    <TouchableOpacity onPress={onPress} style={styles.moodCardContent} disabled={isLoading}>
+      <View style={styles.cardHeaderRow}>
+        <View style={styles.moodIconContainer}>
+          {moodCheckin ? (
+            <Text style={styles.moodIcon}>
+              {moodConfig?.emoji || '😊'}
+            </Text>
+          ) : (
+            <Text style={styles.moodIcon}>😊</Text>
+          )}
+        </View>
+        <Text style={styles.cardTitle}>心情</Text>
       </View>
 
-      <TouchableOpacity style={styles.content} onPress={onPress}>
-        <View style={styles.moodIcon}>
-          <Text style={styles.emoji}>😊</Text>
+      <Text style={styles.moodSubtitle}>记录你的每日心情</Text>
+
+      {isLoading ? (
+        <View style={styles.moodPreview}>
+          <Text style={styles.moodLoadingText}>加载中...</Text>
         </View>
-        <ThemedText style={styles.moodText}>点击记录今日心情</ThemedText>
-      </TouchableOpacity>
-    </ThemedView>
+      ) : moodCheckin ? (
+        <View style={styles.moodPreview}>
+          <Text style={styles.moodPreviewText}>
+            {moodConfig?.label || moodCheckin.moodType}
+          </Text>
+          <Text style={styles.moodPreviewTime}>
+            {dayjs(moodCheckin.createdAt).format('HH:mm')}
+          </Text>
+        </View>
+      ) : (
+        <Text style={styles.moodEmptyText}>点击记录心情</Text>
+      )}
+    </TouchableOpacity>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    backgroundColor: '#fff',
-    borderRadius: 16,
-    padding: 16,
-    marginBottom: 16,
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 3.84,
-    elevation: 5,
+  moodCardContent: {
+    width: '100%',
   },
-  header: {
-    marginBottom: 12,
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: '600',
-    marginBottom: 4,
-  },
-  subtitle: {
-    fontSize: 14,
-    opacity: 0.6,
-  },
-  content: {
+  cardHeaderRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 8,
+    marginBottom: 12,
+  },
+  moodIconContainer: {
+    width: 24,
+    height: 24,
+    borderRadius: 8,
+    backgroundColor: '#DCFCE7',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 10,
   },
   moodIcon: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    backgroundColor: '#f0f0f0',
-    justifyContent: 'center',
+    fontSize: 14,
+  },
+  cardTitle: {
+    fontSize: 14,
+    fontWeight: '800',
+    color: '#192126',
+  },
+  moodSubtitle: {
+    fontSize: 12,
+    color: '#6B7280',
+    marginTop: 4,
+    marginBottom: 8,
+  },
+  moodPreview: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
     alignItems: 'center',
-    marginRight: 12,
+    marginTop: 4,
   },
-  emoji: {
-    fontSize: 20,
+  moodPreviewText: {
+    fontSize: 14,
+    color: '#059669',
+    fontWeight: '600',
   },
-  moodText: {
-    fontSize: 16,
-    flex: 1,
+  moodPreviewTime: {
+    fontSize: 12,
+    color: '#6B7280',
+  },
+  moodEmptyText: {
+    fontSize: 12,
+    color: '#9CA3AF',
+    fontStyle: 'italic',
+    marginTop: 4,
+  },
+  moodLoadingText: {
+    fontSize: 12,
+    color: '#9CA3AF',
+    fontStyle: 'italic',
+    marginTop: 4,
   },
 });