feat: 更新个人页面和活动热图组件

- 在个人页面中新增鱼干记录展示，优化用户界面
- 修改活动热图组件，增加信息弹窗，提供小鱼干使用说明
- 调整样式，提升整体视觉效果和用户体验
- 更新颜色常量，确保一致性

components/ActivityHeatMap.tsx

@@ -1,14 +1,17 @@
+import { IconSymbol } from '@/components/ui/IconSymbol';
 import { Colors } from '@/constants/Colors';
 import { useAppSelector } from '@/hooks/redux';
 import { useColorScheme } from '@/hooks/useColorScheme';
 import dayjs from 'dayjs';
-import React, { useMemo } from 'react';
-import { Dimensions, StyleSheet, Text, View } from 'react-native';
+import React, { useMemo, useState } from 'react';
+import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import Popover from 'react-native-popover-view';
 
 
 const ActivityHeatMap = () => {
   const colorScheme = useColorScheme();
   const colors = Colors[colorScheme ?? 'light'];
+  const [showPopover, setShowPopover] = useState(false);
 
   const activityData = useAppSelector(stat => stat.user.activityHistory);
 
@@ -63,8 +66,8 @@ const ActivityHeatMap = () => {
   const getActivityColor = (level: number): string => {
     switch (level) {
       case 0:
-        // 无活动：使用主题适配的背景色
-        return colors.separator;
+        // 无活动：使用淡蓝色，更有活力
+        return 'rgba(173, 216, 230, 0.3)'; // 淡蓝色，有活力但不突兀
       case 1:
         // 低活动：使用主题主色的浅色版本
         return 'rgba(122, 90, 248, 0.15)'; // 浅色模式下的浅紫色
@@ -148,7 +151,7 @@ const ActivityHeatMap = () => {
   }, [generateActivityData]);
 
   return (
-    <View style={[styles.container, { 
+    <View style={[styles.container, {
       backgroundColor: colors.card,
       borderColor: colors.border,
       shadowColor: 'rgba(122, 90, 248, 0.08)',
@@ -159,12 +162,53 @@ const ActivityHeatMap = () => {
           <Text style={[styles.subtitle, { color: colors.textMuted }]}>
             最近6个月活跃 {activityStats.activeDays} 天
           </Text>
-          <View style={[styles.statsBadge, { 
-            backgroundColor: 'rgba(122, 90, 248, 0.1)' 
-          }]}>
-            <Text style={[styles.statsText, { color: colors.primary }]}>
-              {activityStats.activeRate}%
-            </Text>
+          <View style={styles.rightSection}>
+            <View style={[styles.statsBadge, {
+              backgroundColor: 'rgba(122, 90, 248, 0.1)'
+            }]}>
+              <Text style={[styles.statsText, { color: colors.primary }]}>
+                {activityStats.activeRate}%
+              </Text>
+            </View>
+            <Popover
+              isVisible={showPopover}
+              onRequestClose={() => setShowPopover(false)}
+              from={(
+                <TouchableOpacity
+                  style={styles.infoButton}
+                  onPress={() => setShowPopover(true)}
+                >
+                  <IconSymbol
+                    name="info.circle"
+                    size={16}
+                    color={colors.textMuted}
+                  />
+                </TouchableOpacity>
+              )}
+            >
+              <View style={[styles.popoverContent, { backgroundColor: colors.card }]}>
+                <Text style={[styles.popoverTitle, { color: colors.text }]}>
+                  小鱼干可以用来与小海豹进行对话
+                </Text>
+                <Text style={[styles.popoverSubtitle, { color: colors.text }]}>
+                  获取说明
+                </Text>
+                <View style={styles.popoverList}>
+                  <Text style={[styles.popoverItem, { color: colors.textMuted }]}>
+                    1. 每日登录获得小鱼干+1
+                  </Text>
+                  <Text style={[styles.popoverItem, { color: colors.textMuted }]}>
+                    2. 每日记录心情获得小鱼干+1
+                  </Text>
+                  <Text style={[styles.popoverItem, { color: colors.textMuted }]}>
+                    3. 记饮食获得小鱼干+1
+                  </Text>
+                  <Text style={[styles.popoverItem, { color: colors.textMuted }]}>
+                    4. 完成一次目标获得小鱼干+1
+                  </Text>
+                </View>
+              </View>
+            </Popover>
           </View>
         </View>
 
@@ -263,6 +307,15 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     marginBottom: 6,
   },
+  rightSection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  infoButton: {
+    padding: 4,
+    borderRadius: 8,
+  },
   title: {
     fontSize: 18,
     fontWeight: 'bold',
@@ -332,6 +385,34 @@ const styles = StyleSheet.create({
     borderRadius: 2.5,
     borderWidth: 0.5,
   },
+  popoverContent: {
+    padding: 16,
+    borderRadius: 12,
+    maxWidth: 280,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 5,
+  },
+  popoverTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 12,
+    textAlign: 'center',
+  },
+  popoverSubtitle: {
+    fontSize: 14,
+    fontWeight: '600',
+    marginBottom: 8,
+  },
+  popoverList: {
+    gap: 6,
+  },
+  popoverItem: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
 });
 
 export default ActivityHeatMap;