feat(background-task): 完善iOS后台任务系统并优化断食通知和UI体验

- 修复iOS后台任务注册时机问题，确保任务能正常触发 - 添加后台任务调试辅助工具和完整测试指南 - 优化断食通知系统，增加防抖机制避免频繁重调度 - 改进断食自动续订逻辑，使用固定时间而非相对时间计算 - 优化统计页面布局，添加身体指标section标题 - 增强饮水详情页面视觉效果，改进卡片样式和配色 - 添加用户反馈入口到个人设置页面 - 完善锻炼摘要卡片条件渲染逻辑 - 增强日志记录和错误处理机制这些改进显著提升了应用的稳定性、性能和用户体验，特别是在iOS后台任务执行和断食功能方面。
2025-11-05 11:23:33 +08:00
parent d74046498d
commit ea22901553
12 changed files with 1060 additions and 171 deletions
--- a/app/(tabs)/fasting.tsx
+++ b/app/(tabs)/fasting.tsx
@@ -8,23 +8,23 @@ import { useAppDispatch, useAppSelector } from '@/hooks/redux';
 import { useCountdown } from '@/hooks/useCountdown';
 import { useFastingNotifications } from '@/hooks/useFastingNotifications';
 import {
-  clearActiveSchedule,
-  rescheduleActivePlan,
-  scheduleFastingPlan,
-  selectActiveFastingPlan,
-  selectActiveFastingSchedule,
+    clearActiveSchedule,
+    rescheduleActivePlan,
+    scheduleFastingPlan,
+    selectActiveFastingPlan,
+    selectActiveFastingSchedule,
 } from '@/store/fastingSlice';
 import {
-  buildDisplayWindow,
-  calculateFastingWindow,
-  getFastingPhase,
-  getPhaseLabel,
-  loadPreferredPlanId,
-  savePreferredPlanId
+    buildDisplayWindow,
+    calculateFastingWindow,
+    getFastingPhase,
+    getPhaseLabel,
+    loadPreferredPlanId,
+    savePreferredPlanId
 } from '@/utils/fasting';
 import { useFocusEffect } from '@react-navigation/native';
-import { useRouter } from 'expo-router';
 import dayjs from 'dayjs';
+import { useRouter } from 'expo-router';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { ScrollView, StyleSheet, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -87,8 +87,19 @@ export default function FastingTabScreen() {
  } = useFastingNotifications(activeSchedule, currentPlan);

  // 每次进入页面时验证通知
+  // 添加节流机制，避免频繁触发验证
+  const lastVerifyTimeRef = React.useRef<number>(0);
  useFocusEffect(
    useCallback(() => {
+      const now = Date.now();
+      const timeSinceLastVerify = now - lastVerifyTimeRef.current;
+      
+      // 如果距离上次验证不足 30 秒，跳过本次验证
+      if (timeSinceLastVerify < 30000) {
+        return;
+      }
+      
+      lastVerifyTimeRef.current = now;
      verifyAndSync();
    }, [verifyAndSync])
  );
@@ -155,6 +166,8 @@ export default function FastingTabScreen() {
    }
  }, [notificationsReady, notificationsLoading, notificationError, notificationIds, lastSyncTime, activeSchedule?.startISO, currentPlan?.id]);

+  // 自动续订断食周期
+  // 修改为使用每日固定时间，而非相对时间计算
  useEffect(() => {
    if (!activeSchedule || !currentPlan) return;
    if (phase !== 'completed') return;
@@ -166,38 +179,42 @@ export default function FastingTabScreen() {
    const now = dayjs();
    if (now.isBefore(end)) return;

-    const fastingHours = currentPlan.fastingHours;
-    const eatingHours = currentPlan.eatingHours;
-    const cycleHours = fastingHours + eatingHours;
-
-    if (fastingHours <= 0 || cycleHours <= 0) return;
-
-    let nextStart = start;
-    let nextEnd = end;
-    let iterations = 0;
-    const maxIterations = 60;
-
-    while (!now.isBefore(nextEnd)) {
-      nextStart = nextStart.add(cycleHours, 'hour');
-      nextEnd = nextStart.add(fastingHours, 'hour');
-      iterations += 1;
-
-      if (iterations >= maxIterations) {
-        if (__DEV__) {
-          console.warn('自动续订断食周期失败: 超出最大迭代次数', {
-            start: activeSchedule.startISO,
-            end: activeSchedule.endISO,
-            planId: currentPlan.id,
-          });
-        }
-        return;
+    // 检查是否在短时间内已经续订过，避免重复续订
+    const timeSinceEnd = now.diff(end, 'minute');
+    if (timeSinceEnd > 60) {
+      // 如果周期结束超过1小时，说明用户可能不再需要自动续订
+      if (__DEV__) {
+        console.log('断食周期结束超过1小时，不自动续订');
      }
+      return;
    }

-    if (iterations === 0) return;
+    // 使用每日固定时间计算下一个周期
+    // 保持原始的开始时间（小时和分钟），只增加日期
+    const originalStartHour = start.hour();
+    const originalStartMinute = start.minute();
+    
+    // 计算下一个开始时间：明天的同一时刻
+    let nextStart = now.startOf('day').hour(originalStartHour).minute(originalStartMinute);
+    
+    // 如果计算出的时间在当前时间之前，则使用后天的同一时刻
+    if (nextStart.isBefore(now)) {
+      nextStart = nextStart.add(1, 'day');
+    }
+
+    const nextEnd = nextStart.add(currentPlan.fastingHours, 'hour');
+
+    if (__DEV__) {
+      console.log('自动续订断食周期:', {
+        oldStart: start.format('YYYY-MM-DD HH:mm'),
+        oldEnd: end.format('YYYY-MM-DD HH:mm'),
+        nextStart: nextStart.format('YYYY-MM-DD HH:mm'),
+        nextEnd: nextEnd.format('YYYY-MM-DD HH:mm'),
+      });
+    }

    dispatch(rescheduleActivePlan({
-      start: nextStart.toDate().toISOString(),
+      start: nextStart.toISOString(),
      origin: 'auto',
    }));
  }, [dispatch, activeSchedule, currentPlan, phase]);
--- a/app/(tabs)/personal.tsx
+++ b/app/(tabs)/personal.tsx
@@ -443,6 +443,11 @@ export default function PersonalScreen() {
          title: '隐私政策',
          onPress: () => Linking.openURL(PRIVACY_POLICY_URL),
        },
+        {
+          icon: 'chatbubble-ellipses-outline' as const,
+          title: '意见反馈',
+          onPress: () => Linking.openURL('mailto:richardwei1995@gmail.com'),
+        },
        {
          icon: 'document-text-outline' as const,
          title: '用户协议',
--- a/app/(tabs)/statistics.tsx
+++ b/app/(tabs)/statistics.tsx
@@ -320,7 +320,7 @@ export default function ExploreScreen() {
    <View style={styles.container}>
      {/* 背景渐变 */}
      <LinearGradient
-        colors={['#f5e5fbff', '#e5fcfeff', '#eefdffff', '#e6f6fcff']}
+        colors={['#f5e5fbff', '#edf4f4ff', '#f7f8f8ff']}
        style={styles.gradientBackground}
        start={{ x: 0, y: 0 }}
        end={{ x: 0, y: 1 }}
@@ -399,13 +399,17 @@ export default function ExploreScreen() {
          resetToken={animToken}
        />

-        <WeightHistoryCard />

        <WorkoutSummaryCard
          date={currentSelectedDate}
          style={styles.workoutCardOverride}
        />

+        {/* 身体指标section标题 */}
+        <View style={styles.sectionHeader}>
+          <Text style={styles.sectionTitle}>身体指标</Text>
+        </View>
+
        {/* 真正瀑布流布局 */}
        <View style={styles.masonryContainer}>
          {/* 左列 */}
@@ -485,6 +489,7 @@ export default function ExploreScreen() {

          </View>
        </View>
+        <WeightHistoryCard />

        {/* 围度数据卡片 - 占满底部一行 */}
        <CircumferenceCard style={styles.circumferenceCard} />
@@ -578,15 +583,6 @@ const styles = StyleSheet.create({
  debugButtonText: {
    fontSize: 12,
  },
-
-
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '800',
-    color: '#192126',
-    marginTop: 24,
-    marginBottom: 14,
-  },
  metricsRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
@@ -856,7 +852,17 @@ const styles = StyleSheet.create({
  },
  circumferenceCard: {
    marginBottom: 36,
-    marginTop: 10,
+    marginTop: 16
+  },
+  sectionHeader: {
+    marginTop: 24,
+    paddingHorizontal: 4,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#192126',
+    textAlign: 'left',
  },


--- a/app/water/detail.tsx
+++ b/app/water/detail.tsx
@@ -243,6 +243,7 @@ const WaterDetail: React.FC<WaterDetailProps> = () => {
 const styles = StyleSheet.create({
  container: {
    flex: 1,
+    backgroundColor: '#f3f4fb',
  },
  gradientBackground: {
    position: 'absolute',
@@ -253,23 +254,23 @@ const styles = StyleSheet.create({
  },
  decorativeCircle1: {
    position: 'absolute',
-    top: 40,
-    right: 20,
-    width: 60,
-    height: 60,
-    borderRadius: 30,
-    backgroundColor: '#0EA5E9',
-    opacity: 0.1,
+    top: 80,
+    right: 30,
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: '#4F5BD5',
+    opacity: 0.08,
  },
  decorativeCircle2: {
    position: 'absolute',
-    bottom: -15,
-    left: -15,
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    backgroundColor: '#0EA5E9',
-    opacity: 0.05,
+    bottom: 100,
+    left: -20,
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: '#4F5BD5',
+    opacity: 0.06,
  },
  keyboardAvoidingView: {
    flex: 1,
@@ -278,44 +279,49 @@ const styles = StyleSheet.create({
    flex: 1,
  },
  scrollContent: {
-    padding: 20,
+    paddingHorizontal: 24,
+    paddingTop: 20,
  },
  section: {
-    marginBottom: 32,
+    marginBottom: 36,
  },
  sectionTitle: {
-    fontSize: 16,
-    fontWeight: '500',
-    marginBottom: 20,
+    fontSize: 20,
+    fontWeight: '700',
+    marginBottom: 24,
    letterSpacing: -0.5,
+    color: '#1c1f3a',
  },
  subsectionTitle: {
-    fontSize: 14,
-    fontWeight: '500',
-    marginBottom: 12,
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 16,
    letterSpacing: -0.3,
+    color: '#1c1f3a',
  },
  sectionSubtitle: {
-    fontSize: 12,
-    fontWeight: '400',
-    lineHeight: 18,
+    fontSize: 14,
+    fontWeight: '500',
+    lineHeight: 20,
+    color: '#6f7ba7',
  },
  // 饮水记录相关样式
  recordsList: {
-    gap: 12,
+    gap: 16,
  },
  recordCardContainer: {
-    // iOS 阴影效果
-    shadowColor: '#000000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.08,
-    shadowRadius: 4,
+    // iOS 阴影效果 - 增强阴影效果
+    shadowColor: 'rgba(30, 41, 59, 0.18)',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.16,
+    shadowRadius: 16,
    // Android 阴影效果
-    elevation: 2,
+    elevation: 6,
  },
  recordCard: {
-    borderRadius: 12,
-    padding: 10,
+    borderRadius: 20,
+    padding: 18,
+    backgroundColor: '#ffffff',
  },
  recordMainContent: {
    flexDirection: 'row',
@@ -323,44 +329,47 @@ const styles = StyleSheet.create({
    justifyContent: 'space-between',
  },
  recordIconContainer: {
-    width: 40,
-    height: 40,
-    borderRadius: 10,
+    width: 48,
+    height: 48,
+    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
+    backgroundColor: 'rgba(79, 91, 213, 0.08)',
  },
  recordIcon: {
-    width: 20,
-    height: 20,
+    width: 24,
+    height: 24,
  },
  recordInfo: {
    flex: 1,
-    marginLeft: 12,
+    marginLeft: 16,
  },
  recordLabel: {
-    fontSize: 16,
-    fontWeight: '600',
-    marginBottom: 8,
+    fontSize: 17,
+    fontWeight: '700',
+    color: '#1c1f3a',
+    marginBottom: 6,
  },
  recordTimeContainer: {
    flexDirection: 'row',
    alignItems: 'center',
-    gap: 4,
+    gap: 6,
  },
  recordAmountContainer: {
    alignItems: 'flex-end',
  },
  recordAmount: {
-    fontSize: 14,
-    fontWeight: '500',
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#4F5BD5',
  },
  deleteSwipeButton: {
    backgroundColor: '#EF4444',
    justifyContent: 'center',
    alignItems: 'center',
    width: 80,
-    borderRadius: 12,
-    marginLeft: 8,
+    borderRadius: 16,
+    marginLeft: 12,
  },
  deleteSwipeButtonText: {
    color: '#FFFFFF',
@@ -369,47 +378,61 @@ const styles = StyleSheet.create({
    marginTop: 4,
  },
  recordTimeText: {
-    fontSize: 12,
-    fontWeight: '400',
+    fontSize: 13,
+    fontWeight: '500',
+    color: '#6f7ba7',
  },
  recordNote: {
-    marginTop: 8,
+    marginTop: 12,
+    padding: 12,
+    backgroundColor: 'rgba(79, 91, 213, 0.04)',
+    borderRadius: 12,
    fontSize: 14,
-    fontStyle: 'italic',
+    fontStyle: 'normal',
    lineHeight: 20,
+    color: '#5f6a97',
  },
  recordsSummary: {
-    marginTop: 20,
-    padding: 16,
-    borderRadius: 12,
+    marginTop: 24,
+    padding: 20,
+    borderRadius: 20,
+    backgroundColor: '#ffffff',
+    shadowColor: 'rgba(30, 41, 59, 0.12)',
+    shadowOpacity: 0.16,
+    shadowRadius: 18,
+    shadowOffset: { width: 0, height: 10 },
+    elevation: 6,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  summaryText: {
-    fontSize: 12,
-    fontWeight: '500',
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#1c1f3a',
  },
  summaryGoal: {
-    fontSize: 12,
-    fontWeight: '500',
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#6f7ba7',
  },
  noRecordsContainer: {
    alignItems: 'center',
    justifyContent: 'center',
-    paddingVertical: 40,
-    gap: 16,
+    paddingVertical: 60,
+    gap: 20,
  },
  noRecordsText: {
-    fontSize: 15,
-    fontWeight: '500',
-    lineHeight: 20,
+    fontSize: 17,
+    fontWeight: '600',
+    lineHeight: 24,
+    color: '#6f7ba7',
  },
  noRecordsSubText: {
-    fontSize: 13,
+    fontSize: 14,
    textAlign: 'center',
-    lineHeight: 18,
-    opacity: 0.7,
+    lineHeight: 20,
+    color: '#9ba3c7',
  },
  modalBackdrop: {
    ...StyleSheet.absoluteFillObject,
@@ -476,10 +499,14 @@ const styles = StyleSheet.create({
    // color will be set dynamically
  },
  settingsButton: {
-    width: 32,
-    height: 32,
+    width: 40,
+    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
+    borderRadius: 20,
+    backgroundColor: 'rgba(255, 255, 255, 0.24)',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.45)',
  },
  settingsModalSheet: {
    position: 'absolute',