feat: 添加用户活动热力图组件

在个人页面新增活动热力图展示组件，并实现浮动动画效果优化统计卡片交互体验。
2025-08-21 15:22:16 +08:00
parent b396a7d101
commit b93a863e25
4 changed files with 454 additions and 90 deletions
--- a/app/(tabs)/personal.tsx
+++ b/app/(tabs)/personal.tsx
@@ -1,17 +1,17 @@
+import ActivityHeatMap from '@/components/ActivityHeatMap';
 import { PRIVACY_POLICY_URL, USER_AGREEMENT_URL } from '@/constants/Agree';
 import { Colors } from '@/constants/Colors';
 import { getTabBarBottomPadding } from '@/constants/TabBar';
 import { useAppDispatch, useAppSelector } from '@/hooks/redux';
 import { useAuthGuard } from '@/hooks/useAuthGuard';
 import { useColorScheme } from '@/hooks/useColorScheme';
-import { DEFAULT_MEMBER_NAME, fetchMyProfile } from '@/store/userSlice';
+import { DEFAULT_MEMBER_NAME, fetchActivityHistory, fetchMyProfile } from '@/store/userSlice';
 import { Ionicons } from '@expo/vector-icons';
-import AsyncStorage from '@react-native-async-storage/async-storage';
 import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
 import { useFocusEffect } from '@react-navigation/native';
 import { LinearGradient } from 'expo-linear-gradient';
 import React, { useMemo, useState } from 'react';
-import { Alert, Image, Linking, SafeAreaView, ScrollView, StatusBar, StyleSheet, Switch, Text, TouchableOpacity, View } from 'react-native';
+import { Image, Linking, SafeAreaView, ScrollView, StatusBar, StyleSheet, Switch, Text, TouchableOpacity, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';

 const DEFAULT_AVATAR_URL = 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/images/avatar/avatarGirl01.jpeg';
@@ -40,6 +40,7 @@ export default function PersonalScreen() {
  useFocusEffect(
    React.useCallback(() => {
      dispatch(fetchMyProfile());
+      dispatch(fetchActivityHistory())
    }, [dispatch])
  );

@@ -68,36 +69,6 @@ export default function PersonalScreen() {
  // 颜色令牌
  const colorTokens = colors;

-  const handleResetOnboarding = () => {
-    Alert.alert(
-      '重置引导',
-      '确定要重置引导流程吗？下次启动应用时将重新显示引导页面。',
-      [
-        {
-          text: '取消',
-          style: 'cancel',
-        },
-        {
-          text: '确定',
-          style: 'destructive',
-          onPress: async () => {
-            try {
-              await AsyncStorage.multiRemove(['@onboarding_completed', '@user_personal_info']);
-              Alert.alert('成功', '引导状态已重置，请重启应用查看效果。');
-            } catch (error) {
-              console.error('重置引导状态失败:', error);
-              Alert.alert('错误', '重置失败，请稍后重试。');
-            }
-          },
-        },
-      ]
-    );
-  };
-
-
-
-
-
  const UserInfoSection = () => (
    <View style={[styles.userInfoCard, { backgroundColor: colorTokens.card }]}>
      <View style={styles.userInfoContainer}>
@@ -304,6 +275,7 @@ export default function PersonalScreen() {
        >
          <UserInfoSection />
          <StatsSection />
+          <ActivityHeatMap />
          {menuSections.map((section, index) => (
            <MenuSection key={index} title={section.title} items={section.items} />
          ))}
--- a/app/(tabs)/statistics.tsx
+++ b/app/(tabs)/statistics.tsx
@@ -19,6 +19,7 @@ import dayjs from 'dayjs';
 import { LinearGradient } from 'expo-linear-gradient';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
+  Animated,
  SafeAreaView,
  ScrollView,
  StyleSheet,
@@ -28,6 +29,56 @@ import {
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';

+// 浮动动画组件
+const FloatingCard = ({ children, delay = 0, style }: {
+  children: React.ReactNode;
+  delay?: number;
+  style?: any;
+}) => {
+  const floatAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const startAnimation = () => {
+      Animated.loop(
+        Animated.sequence([
+          Animated.timing(floatAnim, {
+            toValue: 1,
+            duration: 3000,
+            delay: delay,
+            useNativeDriver: true,
+          }),
+          Animated.timing(floatAnim, {
+            toValue: 0,
+            duration: 3000,
+            useNativeDriver: true,
+          }),
+        ])
+      ).start();
+    };
+
+    startAnimation();
+  }, [floatAnim, delay]);
+
+  const translateY = floatAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-2, -6],
+  });
+
+  return (
+    <Animated.View
+      style={[
+        style,
+        {
+          transform: [{ translateY }],
+          marginBottom: 8,
+        },
+      ]}
+    >
+      {children}
+    </Animated.View>
+  );
+};
+
 export default function ExploreScreen() {
  const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
  const colorTokens = Colors[theme];
@@ -309,14 +360,15 @@ export default function ExploreScreen() {
          <View style={styles.masonryContainer}>
            {/* 左列 */}
            <View style={styles.masonryColumn}>
-              <StressMeter
-                value={hrvValue}
-                updateTime={hrvUpdateTime}
-                style={styles.masonryCard}
-                hrvValue={hrvValue}
-              />
+              <FloatingCard style={styles.masonryCard} delay={0}>
+                <StressMeter
+                  value={hrvValue}
+                  updateTime={hrvUpdateTime}
+                  hrvValue={hrvValue}
+                />
+              </FloatingCard>

-              <View style={[styles.masonryCard, styles.caloriesCard]}>
+              <FloatingCard style={[styles.masonryCard, styles.caloriesCard]} delay={500}>
                <Text style={styles.cardTitleSecondary}>消耗卡路里</Text>
                {activeCalories != null ? (
                  <AnimatedNumber
@@ -328,9 +380,9 @@ export default function ExploreScreen() {
                ) : (
                  <Text style={styles.caloriesValue}>——</Text>
                )}
-              </View>
+              </FloatingCard>

-              <View style={[styles.masonryCard, styles.stepsCard]}>
+              <FloatingCard style={[styles.masonryCard, styles.stepsCard]} delay={1000}>
                <View style={styles.cardHeaderRow}>
                  <Text style={styles.cardTitle}>步数</Text>
                </View>
@@ -351,31 +403,33 @@ export default function ExploreScreen() {
                  fillColor="#FFC365"
                  showLabel={false}
                />
-              </View>
+              </FloatingCard>
            </View>

            {/* 右列 */}
            <View style={styles.masonryColumn}>
-              <BMICard
-                weight={userProfile?.weight ? parseFloat(userProfile.weight) : undefined}
-                height={userProfile?.height ? parseFloat(userProfile.height) : undefined}
-                style={styles.masonryCardNoBg}
-              // compact={true}
-              />
+              <FloatingCard style={styles.masonryCard} delay={250}>
+                <BMICard
+                  weight={userProfile?.weight ? parseFloat(userProfile.weight) : undefined}
+                  height={userProfile?.height ? parseFloat(userProfile.height) : undefined}
+                  style={styles.bmiCardOverride}
+                // compact={true}
+                />
+              </FloatingCard>

-              <FitnessRingsCard
-                activeCalories={fitnessRingsData.activeCalories}
-                activeCaloriesGoal={fitnessRingsData.activeCaloriesGoal}
-                exerciseMinutes={fitnessRingsData.exerciseMinutes}
-                exerciseMinutesGoal={fitnessRingsData.exerciseMinutesGoal}
-                standHours={fitnessRingsData.standHours}
-                standHoursGoal={fitnessRingsData.standHoursGoal}
-                resetToken={animToken}
-                style={styles.masonryCard}
-              />
+              <FloatingCard style={styles.masonryCard} delay={750}>
+                <FitnessRingsCard
+                  activeCalories={fitnessRingsData.activeCalories}
+                  activeCaloriesGoal={fitnessRingsData.activeCaloriesGoal}
+                  exerciseMinutes={fitnessRingsData.exerciseMinutes}
+                  exerciseMinutesGoal={fitnessRingsData.exerciseMinutesGoal}
+                  standHours={fitnessRingsData.standHours}
+                  standHoursGoal={fitnessRingsData.standHoursGoal}
+                  resetToken={animToken}
+                />
+              </FloatingCard>

-
-              <View style={[styles.masonryCard, styles.sleepCard]}>
+              <FloatingCard style={[styles.masonryCard, styles.sleepCard]} delay={1250}>
                <View style={styles.cardHeaderRow}>
                  <Text style={styles.cardTitle}>睡眠</Text>
                </View>
@@ -386,7 +440,7 @@ export default function ExploreScreen() {
                ) : (
                  <Text style={styles.sleepValue}>——</Text>
                )}
-              </View>
+              </FloatingCard>
            </View>
          </View>

@@ -713,11 +767,10 @@ const styles = StyleSheet.create({
  masonryContainer: {
    marginBottom: 16,
    flexDirection: 'row',
-    justifyContent: 'space-between',
+    gap: 12,
  },
  masonryColumn: {
    flex: 1,
-    marginHorizontal: 3,
  },
  masonryCard: {
    width: '100%',
@@ -727,26 +780,15 @@ const styles = StyleSheet.create({
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
-      height: 2,
+      height: 4,
    },
-    shadowOpacity: 0.08,
-    shadowRadius: 8,
-    elevation: 3,
-    marginBottom: 8,
+    shadowOpacity: 0.12,
+    shadowRadius: 12,
+    elevation: 6,
  },
-  masonryCardNoBg: {
-    width: '100%',
+  bmiCardOverride: {
+    margin: -16, // 抵消 masonryCard 的 padding
    borderRadius: 16,
-    padding: 16,
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.08,
-    shadowRadius: 8,
-    elevation: 3,
-    marginBottom: 8,
  },
  compactStepsCard: {
    minHeight: 100,