Refactor components and enhance background task management

- Updated font sizes and weights in BasalMetabolismCard, MoodCard, HealthDataCard, and NutritionRadarCard for improved readability. - Removed loading state from MoodCard to simplify the component. - Adjusted styles in WeightHistoryCard for better layout and spacing. - Integrated expo-background-fetch for improved background task handling. - Updated Info.plist to include background fetch capability. - Enhanced background task registration and execution logic in backgroundTaskManager. - Added debug function to manually trigger background task execution for testing purposes.
2025-09-03 16:17:29 +08:00
parent 16b4fc8816
commit 8b9689b269
17 changed files with 163 additions and 85 deletions
--- a/app.json
+++ b/app.json
@@ -18,7 +18,8 @@
        "NSPhotoLibraryUsageDescription": "应用需要访问相册以选择您的体态照片用于AI测评。",
        "NSPhotoLibraryAddUsageDescription": "应用需要写入相册以保存拍摄的体态照片（可选）。",
        "UIBackgroundModes": [
-          "processing"
+          "background-fetch",
+          "background-processing"
        ]
      }
    },
@@ -69,7 +70,12 @@
          ]
        }
      ],
-      "expo-background-task"
+      [
+        "expo-background-fetch",
+        {
+          "minimumInterval": 15
+        }
+      ]
    ],
    "experiments": {
      "typedRoutes": true
--- a/app/(tabs)/goals.tsx
+++ b/app/(tabs)/goals.tsx
@@ -23,6 +23,7 @@ import { useFocusEffect } from '@react-navigation/native';
 import dayjs from 'dayjs';
 import * as Haptics from 'expo-haptics';
 import { LinearGradient } from 'expo-linear-gradient';
+import Lottie from 'lottie-react-native';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Alert, FlatList, Image, RefreshControl, SafeAreaView, StatusBar, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

@@ -384,11 +385,12 @@ export default function GoalsScreen() {
        borderBottomLeftRadius: 24,
        borderBottomRightRadius: 24,
      }}>
-        {/* 右下角图片 */}
-        <Image
-          source={require('@/assets/images/task/imageTodo.png')}
+        {/* 右下角Lottie动画 */}
+        <Lottie
+          source={require('@/assets/lottie/Goal.json')}
          style={styles.bottomRightImage}
-          resizeMode="contain"
+          autoPlay
+          loop
        />
      </View>

@@ -716,10 +718,10 @@ const styles = StyleSheet.create({
  },
  bottomRightImage: {
    position: 'absolute',
-    top: 56,
+    top: 40,
    right: 36,
-    width: 80,
-    height: 80,
+    width: 120,
+    height: 120,
  },
  // 任务进度卡片中的按钮样式
  cardHeaderButtons: {
--- a/app/(tabs)/statistics.tsx
+++ b/app/(tabs)/statistics.tsx
@@ -149,7 +149,7 @@ export default function ExploreScreen() {
    });
  }, [userProfile]);

-  const { registerTask } = useBackgroundTasks();
+  const { registerTask, isInitialized } = useBackgroundTasks();
  // 心情相关状态
  const dispatch = useAppDispatch();
  const [isMoodLoading, setIsMoodLoading] = useState(false);
@@ -416,7 +416,9 @@ export default function ExploreScreen() {
  }, [loadAllData, currentSelectedDate]);

  useEffect(() => {
-    // 注册后台任务 - 只处理健康数据和压力检查
+    // 只有在后台任务管理器初始化完成后才注册任务
+    if (isInitialized) {
+      console.log('后台任务管理器已初始化，开始注册健康数据任务...');
      registerTask({
        id: 'health-data-task',
        name: 'health-data-task',
@@ -435,8 +437,13 @@ export default function ExploreScreen() {
            console.error('健康数据任务执行失败:', error);
          }
        },
+      }).then(() => {
+        console.log('健康数据任务注册成功');
+      }).catch((error) => {
+        console.error('健康数据任务注册失败:', error);
      });
-  }, []);
+    }
+  }, [isInitialized]);

  // 检查压力水平并发送通知
  const checkStressLevelAndNotify = React.useCallback(async () => {
@@ -599,16 +606,18 @@ export default function ExploreScreen() {
            </View>
          </View>

-          <WeightHistoryCard />
+

          {/* 日期选择器 */}
          <DateSelector
            selectedIndex={selectedIndex}
            onDateSelect={onSelectDate}
-            showMonthTitle={true}
+            showMonthTitle={false}
            disableFutureDates={true}
          />

+
+
          {/* 营养摄入雷达图卡片 */}
          <NutritionRadarCard
            nutritionSummary={nutritionSummary}
@@ -624,6 +633,8 @@ export default function ExploreScreen() {
            }}
          />

+          <WeightHistoryCard />
+
          {/* 真正瀑布流布局 */}
          <View style={styles.masonryContainer}>
            {/* 左列 */}
@@ -768,7 +779,7 @@ const styles = StyleSheet.create({
    paddingHorizontal: 20,
  },
  headerContainer: {
-    marginBottom: 20,
+    marginBottom: 10,
  },
  headerContent: {
    flexDirection: 'row',
@@ -1002,8 +1013,8 @@ const styles = StyleSheet.create({
  masonryContainer: {
    marginBottom: 16,
    flexDirection: 'row',
-    gap: 12,
-    marginTop: 16,
+    gap: 16,
+    marginTop: 6,
  },
  masonryColumn: {
    flex: 1,
@@ -1023,6 +1034,7 @@ const styles = StyleSheet.create({
    elevation: 6,
    minHeight: 100,
    justifyContent: 'center',
+    marginTop: 6
  },
  basalMetabolismCardOverride: {
    margin: -16, // 抵消 masonryCard 的 padding
--- a/app/food-library.tsx
+++ b/app/food-library.tsx
@@ -527,7 +527,7 @@ export default function FoodLibraryScreen() {
 const styles = StyleSheet.create({
  container: {
    flex: 1,
-    backgroundColor: '#F8F9FA',
+    backgroundColor: Colors.light.pageBackgroundEmphasis,
  },
  customButton: {
    paddingHorizontal: 8,
--- a/assets/lottie/Goal.json
+++ b/assets/lottie/Goal.json
--- a/components/BasalMetabolismCard.tsx
+++ b/components/BasalMetabolismCard.tsx
@@ -133,14 +133,13 @@ const styles = StyleSheet.create({
    zIndex: 1,
  },
  value: {
-    fontSize: 24,
-    fontWeight: '800',
+    fontSize: 16,
+    fontWeight: '600',
    color: '#0F172A',
    lineHeight: 28,
  },
  unit: {
-    fontSize: 14,
-    fontWeight: '500',
+    fontSize: 12,
    color: '#64748B',
    marginLeft: 6,
  },
--- a/components/DateSelector.tsx
+++ b/components/DateSelector.tsx
@@ -182,7 +182,7 @@ export const DateSelector: React.FC<DateSelectorProps> = ({

 const styles = StyleSheet.create({
  container: {
-    paddingVertical: 8,
+
  },
  monthTitle: {
    fontSize: 18,
--- a/components/MoodCard.tsx
+++ b/components/MoodCard.tsx
@@ -10,7 +10,7 @@ interface MoodCardProps {
  isLoading?: boolean;
 }

-export function MoodCard({ moodCheckin, onPress, isLoading = false }: MoodCardProps) {
+export function MoodCard({ moodCheckin, onPress }: MoodCardProps) {
  const moodConfig = moodCheckin ? getMoodConfig(moodCheckin.moodType) : null;
  const animationRef = useRef<LottieView>(null);

@@ -21,7 +21,7 @@ export function MoodCard({ moodCheckin, onPress, isLoading = false }: MoodCardPr
  }, []);

  return (
-    <TouchableOpacity onPress={onPress} style={styles.moodCardContent} disabled={isLoading}>
+    <TouchableOpacity onPress={onPress} style={styles.moodCardContent} >
      <View style={styles.moodCardHeader}>
        <Text style={styles.cardTitle}>心情</Text>
        <LottieView
@@ -32,11 +32,7 @@ export function MoodCard({ moodCheckin, onPress, isLoading = false }: MoodCardPr
          style={styles.lottieAnimation}
        />
      </View>
-      {isLoading ? (
-        <View style={styles.moodPreview}>
-          <Text style={styles.moodLoadingText}>加载中...</Text>
-        </View>
-      ) : moodCheckin ? (
+      {moodCheckin ? (
        <View style={styles.moodPreview}>
          <Text style={styles.moodPreviewText}>
            {moodConfig?.label || moodCheckin.moodType}
@@ -69,8 +65,8 @@ const styles = StyleSheet.create({
  },

  lottieAnimation: {
-    width: 40,
-    height: 40,
+    width: 30,
+    height: 30,
  },

  moodPreview: {
--- a/components/NutritionRadarCard.tsx
+++ b/components/NutritionRadarCard.tsx
@@ -210,6 +210,7 @@ const styles = StyleSheet.create({
    shadowOpacity: 0.1,
    shadowRadius: 3.84,
    elevation: 5,
+    marginTop: 12
  },
  cardHeader: {
    flexDirection: 'row',
@@ -300,7 +301,7 @@ const styles = StyleSheet.create({
    gap: 4,
  },
  mainValue: {
-    fontSize: 12,
+    fontSize: 14,
    fontWeight: '600',
    color: '#192126',
  },
@@ -320,7 +321,7 @@ const styles = StyleSheet.create({
    fontWeight: '500',
  },
  calculationValue: {
-    fontSize: 9,
+    fontSize: 11,
    fontWeight: '700',
    color: '#192126',
  },
--- a/components/statistic/HealthDataCard.tsx
+++ b/components/statistic/HealthDataCard.tsx
@@ -61,12 +61,12 @@ const styles = StyleSheet.create({
    alignItems: 'flex-end',
  },
  value: {
-    fontSize: 20,
+    fontSize: 16,
    fontWeight: '600',
    color: '#192126',
  },
  unit: {
-    fontSize: 14,
+    fontSize: 12,
    color: '#666',
    marginLeft: 4,
    marginBottom: 2,
--- a/components/weight/WeightHistoryCard.tsx
+++ b/components/weight/WeightHistoryCard.tsx
@@ -195,19 +195,6 @@ export function WeightHistoryCard() {
    };
  });

-  // 如果正在加载，显示加载状态
-  if (isLoading) {
-    return (
-      <TouchableOpacity style={styles.card} onPress={navigateToWeightRecords} activeOpacity={0.8}>
-        <View style={styles.cardHeader}>
-          <Text style={styles.cardTitle}>体重记录</Text>
-        </View>
-        <View style={styles.emptyContent}>
-          <Text style={styles.emptyDescription}>加载中...</Text>
-        </View>
-      </TouchableOpacity>
-    );
-  }

  // 如果没有体重数据，显示引导卡片
  if (!hasWeight) {
@@ -574,6 +561,7 @@ const styles = StyleSheet.create({
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 3,
+    marginTop: 16
  },
  cardHeader: {
    flexDirection: 'row',
@@ -649,6 +637,7 @@ const styles = StyleSheet.create({
  summaryInfo: {
    position: 'absolute',
    width: '100%',
+    marginTop: 10,
  },
  chartContainer: {
    position: 'absolute',
--- a/hooks/useBackgroundTasks.ts
+++ b/hooks/useBackgroundTasks.ts
@@ -1,4 +1,5 @@
 import { BackgroundTaskType as BackgroundTask, backgroundTaskManager, TaskStatusType as TaskStatus } from '@/services/backgroundTaskManager';
+import * as BackgroundFetch from 'expo-background-fetch';
 import { useCallback, useEffect, useState } from 'react';

 export interface UseBackgroundTasksReturn {
@@ -16,7 +17,7 @@ export interface UseBackgroundTasksReturn {
  cleanupTaskStatuses: () => Promise<void>;
  
  // 后台任务状态
-  backgroundTaskStatus: string | null;
+  backgroundTaskStatus: BackgroundFetch.BackgroundFetchStatus | null;
  getBackgroundTaskStatus: () => Promise<void>;
 }

@@ -24,7 +25,7 @@ export const useBackgroundTasks = (): UseBackgroundTasksReturn => {
  const [isInitialized, setIsInitialized] = useState(false);
  const [taskStatuses, setTaskStatuses] = useState<TaskStatus[]>([]);
  const [registeredTasks, setRegisteredTasks] = useState<BackgroundTask[]>([]);
-  const [backgroundTaskStatus, setBackgroundTaskStatus] = useState<string | null>(null);
+  const [backgroundTaskStatus, setBackgroundTaskStatus] = useState<BackgroundFetch.BackgroundFetchStatus | null>(null);

  // 初始化
  useEffect(() => {
@@ -87,7 +88,7 @@ export const useBackgroundTasks = (): UseBackgroundTasksReturn => {
  const getBackgroundTaskStatus = useCallback(async () => {
    try {
      const status = await backgroundTaskManager.getBackgroundTaskStatus();
-      setBackgroundTaskStatus(status ? status.toString() : null);
+      setBackgroundTaskStatus(status);
    } catch (error) {
      console.error('获取后台任务状态失败:', error);
    }
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -40,6 +40,8 @@ PODS:
    - ExpoModulesCore
  - ExpoAsset (11.1.7):
    - ExpoModulesCore
+  - ExpoBackgroundFetch (13.1.6):
+    - ExpoModulesCore
  - ExpoBackgroundTask (0.2.8):
    - ExpoModulesCore
  - ExpoBlur (14.1.5):
@@ -1994,6 +1996,7 @@ DEPENDENCIES:
  - Expo (from `../node_modules/expo`)
  - ExpoAppleAuthentication (from `../node_modules/expo-apple-authentication/ios`)
  - ExpoAsset (from `../node_modules/expo-asset/ios`)
+  - ExpoBackgroundFetch (from `../node_modules/expo-background-fetch/ios`)
  - ExpoBackgroundTask (from `../node_modules/expo-background-task/ios`)
  - ExpoBlur (from `../node_modules/expo-blur/ios`)
  - ExpoFileSystem (from `../node_modules/expo-file-system/ios`)
@@ -2136,6 +2139,8 @@ EXTERNAL SOURCES:
    :path: "../node_modules/expo-apple-authentication/ios"
  ExpoAsset:
    :path: "../node_modules/expo-asset/ios"
+  ExpoBackgroundFetch:
+    :path: "../node_modules/expo-background-fetch/ios"
  ExpoBackgroundTask:
    :path: "../node_modules/expo-background-task/ios"
  ExpoBlur:
@@ -2351,6 +2356,7 @@ SPEC CHECKSUMS:
  Expo: 8685113c16058e8b3eb101dd52d6c8bca260bbea
  ExpoAppleAuthentication: 8a661b6f4936affafd830f983ac22463c936dad5
  ExpoAsset: ef06e880126c375f580d4923fdd1cdf4ee6ee7d6
+  ExpoBackgroundFetch: 6dcade705c90ae5b7e2d0836b9145cae8f5f3070
  ExpoBackgroundTask: 6c1990438e45b5c4bbbc7d75aa6b688d53602fe8
  ExpoBlur: 3c8885b9bf9eef4309041ec87adec48b5f1986a9
  ExpoFileSystem: 7f92f7be2f5c5ed40a7c9efc8fa30821181d9d63
--- a/ios/digitalpilates/Info.plist
+++ b/ios/digitalpilates/Info.plist
@@ -68,6 +68,7 @@
 	<key>UIBackgroundModes</key>
 	<array>
 		<string>processing</string>
+    <string>fetch</string>
 	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>SplashScreen</string>
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
        "dayjs": "^1.11.13",
        "expo": "~53.0.20",
        "expo-apple-authentication": "6.4.2",
+        "expo-background-fetch": "^13.1.6",
        "expo-background-task": "~0.2.8",
        "expo-blur": "~14.1.5",
        "expo-constants": "~17.1.7",
@@ -7073,6 +7074,18 @@
        "react-native": "*"
      }
    },
+    "node_modules/expo-background-fetch": {
+      "version": "13.1.6",
+      "resolved": "https://mirrors.tencent.com/npm/expo-background-fetch/-/expo-background-fetch-13.1.6.tgz",
+      "integrity": "sha512-hl4kR32DaxoHFYqNsILLZG2mWssCkUb4wnEAHtDGmpxUP4SCnJILcAn99J6AGDFUw5lF6FXNZZCXNfcrFioO4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "expo-task-manager": "~13.1.6"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
    "node_modules/expo-background-task": {
      "version": "0.2.8",
      "resolved": "https://registry.npmjs.org/expo-background-task/-/expo-background-task-0.2.8.tgz",
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
    "dayjs": "^1.11.13",
    "expo": "~53.0.20",
    "expo-apple-authentication": "6.4.2",
+    "expo-background-fetch": "^13.1.6",
    "expo-background-task": "~0.2.8",
    "expo-blur": "~14.1.5",
    "expo-constants": "~17.1.7",
--- a/services/backgroundTaskManager.ts
+++ b/services/backgroundTaskManager.ts
@@ -1,5 +1,5 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import * as ExpoBackgroundTask from 'expo-background-task';
+import * as BackgroundFetch from 'expo-background-fetch';
 import * as TaskManager from 'expo-task-manager';

 // 任务类型定义
@@ -63,13 +63,17 @@ class BackgroundTaskManager {

  // 注册后台任务
  private async registerBackgroundTask(): Promise<void> {
-    const BACKGROUND_TASK = 'background-task';
+    const BACKGROUND_FETCH_TASK = 'background-fetch-task';
+
+    console.log('注册后台获取任务');
+    
+    // 定义后台获取任务
+    TaskManager.defineTask(BACKGROUND_FETCH_TASK, async () => {
+      console.log('后台获取任务被系统调用');
+      const now = new Date();
      
-    console.log('注册后台任务');
-    // 定义后台任务
-    TaskManager.defineTask(BACKGROUND_TASK, async () => {
      try {
-        console.log('开始执行后台任务');
+        console.log(`开始执行后台任务 - ${now.toISOString()}`);
        
        // 执行所有注册的任务
        const results = await this.executeAllTasks();
@@ -77,19 +81,29 @@ class BackgroundTaskManager {
        console.log('后台任务执行完成:', results);
        
        // 返回成功状态
-        return ExpoBackgroundTask.BackgroundTaskResult.Success;
+        return BackgroundFetch.BackgroundFetchResult.NewData;
      } catch (error) {
        console.error('后台任务执行失败:', error);
-        return ExpoBackgroundTask.BackgroundTaskResult.Failed;
+        return BackgroundFetch.BackgroundFetchResult.Failed;
      }
    });

-    // 注册后台任务
-    await ExpoBackgroundTask.registerTaskAsync(BACKGROUND_TASK, {
-      minimumInterval: 15, // 最小间隔60分钟
+    // 注册后台获取任务
+    try {
+      const status = await BackgroundFetch.getStatusAsync();
+      if (status === BackgroundFetch.BackgroundFetchStatus.Available) {
+        await BackgroundFetch.registerTaskAsync(BACKGROUND_FETCH_TASK, {
+          minimumInterval: 15 * 60, // 15分钟（以秒为单位）
+          stopOnTerminate: false,
+          startOnBoot: true,
        });
-
-    console.log('后台任务注册成功');
+        console.log('后台获取任务注册成功');
+      } else {
+        console.warn('后台获取不可用，状态:', status);
+      }
+    } catch (error) {
+      console.error('注册后台获取任务失败:', error);
+    }
  }

  // 注册自定义任务
@@ -212,8 +226,8 @@ class BackgroundTaskManager {
  }

  // 检查后台任务状态
-  public async getBackgroundTaskStatus(): Promise<ExpoBackgroundTask.BackgroundTaskStatus | null> {
-    return await ExpoBackgroundTask.getStatusAsync();
+  public async getBackgroundTaskStatus(): Promise<BackgroundFetch.BackgroundFetchStatus | null> {
+    return await BackgroundFetch.getStatusAsync();
  }

  // 保存任务状态到本地存储
@@ -254,6 +268,42 @@ class BackgroundTaskManager {
    
    await this.saveTaskStatuses();
  }
+
+  // 调试函数：强制触发后台任务执行
+  public async debugExecuteBackgroundTask(): Promise<void> {
+    console.log('=== 调试：手动触发后台任务执行 ===');
+    
+    try {
+      // 获取后台任务状态
+      const status = await this.getBackgroundTaskStatus();
+      console.log('后台获取状态:', status);
+      
+      // 执行所有注册的任务
+      console.log('当前注册的任务数量:', this.tasks.size);
+      this.tasks.forEach((task, id) => {
+        console.log(`- 任务ID: ${id}, 名称: ${task.name}`);
+      });
+      
+      const results = await this.executeAllTasks();
+      console.log('任务执行结果:', results);
+      
+      // 显示任务状态
+      const taskStatuses = this.getAllTaskStatuses();
+      taskStatuses.forEach(status => {
+        console.log(`任务 ${status.id} 状态:`, {
+          isRegistered: status.isRegistered,
+          executionCount: status.executionCount,
+          lastExecution: status.lastExecution?.toISOString(),
+          lastError: status.lastError
+        });
+      });
+      
+    } catch (error) {
+      console.error('调试执行失败:', error);
+    }
+    
+    console.log('=== 调试执行完成 ===');
+  }
 }

 // 导出单例实例