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

- 在个人页面中新增鱼干记录展示，优化用户界面 - 修改活动热图组件，增加信息弹窗，提供小鱼干使用说明 - 调整样式，提升整体视觉效果和用户体验 - 更新颜色常量，确保一致性
2025-08-27 12:48:43 +08:00
parent 9bb924202f
commit aaa462d476
5 changed files with 125 additions and 21 deletions
--- a/app/(tabs)/personal.tsx
+++ b/app/(tabs)/personal.tsx
@@ -264,6 +264,16 @@ export default function PersonalScreen() {
        >
          <UserHeader />
          <StatsSection />
+          <View style={styles.fishRecordContainer}>
+            {/* <Image
+              source={{ uri: 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/images/icons/icon-profile-fish.png' }}
+              contentFit="cover"
+              style={{ width: 16, height: 16, marginLeft: 6 }}
+              transition={200}
+              cachePolicy="memory-disk"
+            /> */}
+            <Text style={styles.fishRecordText}>鱼干记录</Text>
+          </View>
          <ActivityHeatMap />
          {menuSections.map((section, index) => (
            <MenuSection key={index} title={section.title} items={section.items} />
@@ -277,7 +287,7 @@ export default function PersonalScreen() {
 const styles = StyleSheet.create({
  container: {
    flex: 1,
-    backgroundColor: '#FAFAFA',
+    backgroundColor: '#F0F9FF',
  },
  safeArea: {
    flex: 1,
@@ -402,4 +412,16 @@ const styles = StyleSheet.create({
  switch: {
    transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }],
  },
+  fishRecordContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    marginBottom: 10,
+  },
+  fishRecordText: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: '#2C3E50',
+    marginLeft: 4,
+  },
 });
--- a/components/ActivityHeatMap.tsx
+++ b/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;
--- a/components/TaskProgressCard.tsx
+++ b/components/TaskProgressCard.tsx
@@ -122,8 +122,8 @@ const styles = StyleSheet.create({
    gap: 8,
  },
  goalsIconButton: {
-    width: 24,
-    height: 24,
+    width: 18,
+    height: 18,
  },
  title: {
    fontSize: 20,
--- a/components/ui/IconSymbol.tsx
+++ b/components/ui/IconSymbol.tsx
@@ -21,6 +21,7 @@ const MAPPING = {
  'person.fill': 'person',
  'person.3.fill': 'people',
  'message.fill': 'message',
+  'info.circle': 'info',
 } as IconMapping;

 /**
--- a/constants/Colors.ts
+++ b/constants/Colors.ts
@@ -8,7 +8,7 @@ export const palette = {
  // 灰色系统 - 中性色，UI设计的基础
  gray: {
    25: '#fcfcfd',
-    50: '#ebecee', 
+    50: '#ebecee',
    100: '#c0c4ca',
    200: '#a2a7b0',
    300: '#777f8c',
@@ -19,7 +19,7 @@ export const palette = {
    800: '#1d232e',
    900: '#161b23',
  },
-  
+
  // 紫色系统 - 品牌主色，用于交互元素
  purple: {
    25: '#fafaff',
@@ -34,7 +34,7 @@ export const palette = {
    800: '#4a1fb8',
    900: '#3e1c96',
  },
-  
+
  // 成功色系统 - 绿色，用于正面反馈
  success: {
    25: '#f6fef9',
@@ -49,7 +49,7 @@ export const palette = {
    800: '#0e623d',
    900: '#0b4b2e',
  },
-  
+
  // 错误色系统 - 红色，用于错误状态和破坏性操作
  error: {
    25: '#fffbfa',
@@ -64,7 +64,7 @@ export const palette = {
    800: '#892f2f',
    900: '#692424',
  },
-  
+
  // 警告色系统 - 黄色/橙色，用于警告和确认
  warning: {
    25: '#fff7ec',
@@ -79,7 +79,7 @@ export const palette = {
    800: '#8c5f24',
    900: '#6b491c',
  },
-  
+
  // 基础色
  base: {
    white: '#ffffff',
@@ -100,7 +100,7 @@ export const Colors = {
    textMuted: palette.gray[400],      // 浅灰色用于静音文本
    background: palette.base.white,
    surface: palette.base.white,
-    card: palette.gray[25],            // 最浅灰色用于卡片背景
+    card: '#ffffff',            // 最浅灰色用于卡片背景

    // 品牌与可交互主色
    tint: tintColorLight,