feat: 适配 headerbar ios26

2025-10-14 16:31:19 +08:00
parent cf069f3537
commit 435f5cc65c
41 changed files with 493 additions and 5445 deletions
--- a/components/WorkoutSummaryCard.tsx
+++ b/components/WorkoutSummaryCard.tsx
@@ -15,8 +15,7 @@ import {
  getWorkoutTypeDisplayName,
  HealthPermissionStatus,
  removeHealthPermissionListener,
-  WorkoutActivityType,
-  WorkoutData,
+  WorkoutData
 } from '@/utils/health';
 import { logger } from '@/utils/logger';

@@ -39,21 +38,6 @@ const DEFAULT_SUMMARY: WorkoutSummary = {
  lastWorkout: null,
 };

-const iconByWorkoutType: Partial<Record<WorkoutActivityType, keyof typeof MaterialCommunityIcons.glyphMap>> = {
-  [WorkoutActivityType.Running]: 'run',
-  [WorkoutActivityType.Walking]: 'walk',
-  [WorkoutActivityType.Cycling]: 'bike',
-  [WorkoutActivityType.Swimming]: 'swim',
-  [WorkoutActivityType.Yoga]: 'meditation',
-  [WorkoutActivityType.FunctionalStrengthTraining]: 'weight-lifter',
-  [WorkoutActivityType.TraditionalStrengthTraining]: 'dumbbell',
-  [WorkoutActivityType.CrossTraining]: 'arm-flex',
-  [WorkoutActivityType.MixedCardio]: 'heart-pulse',
-  [WorkoutActivityType.HighIntensityIntervalTraining]: 'run-fast',
-  [WorkoutActivityType.Flexibility]: 'meditation',
-  [WorkoutActivityType.Cooldown]: 'meditation',
-  [WorkoutActivityType.Other]: 'arm-flex',
-};

 export const WorkoutSummaryCard: React.FC<WorkoutSummaryCardProps> = ({ date, style }) => {
  const router = useRouter();
@@ -86,34 +70,36 @@ export const WorkoutSummaryCard: React.FC<WorkoutSummaryCardProps> = ({ date, st
        return;
      }

-      const startDate = dayjs(targetDate).startOf('day').toDate();
+      // 修改：获取从过去30天到选中日期之间的运动记录
+      const startDate = dayjs(targetDate).subtract(30, 'day').startOf('day').toDate();
      const endDate = dayjs(targetDate).endOf('day').toDate();
-      const workouts = await fetchWorkoutsForDateRange(startDate, endDate, 50);
+      const workouts = await fetchWorkoutsForDateRange(startDate, endDate, 1);

-      console.log('workouts', workouts);
-
-
-      const workoutsInRange = workouts
+      // 筛选出选中日期及以前的运动记录，并按结束时间排序（最新在前）
+      const workoutsBeforeDate = workouts
        .filter((workout) => {
-          // 额外防护：确保锻炼记录确实落在当天
+          // 确保锻炼记录在选中日期或之前
          const workoutDate = dayjs(workout.startDate);
-          return workoutDate.isSame(dayjs(targetDate), 'day');
+          return workoutDate.isSameOrBefore(dayjs(targetDate), 'day');
        })
        // 依据结束时间排序，最新在前
        .sort((a, b) => dayjs(b.endDate || b.startDate).valueOf() - dayjs(a.endDate || a.startDate).valueOf());

-      const totalCalories = workoutsInRange.reduce((total, workout) => total + (workout.totalEnergyBurned || 0), 0);
-      const totalMinutes = Math.round(
-        workoutsInRange.reduce((total, workout) => total + (workout.duration || 0), 0) / 60
-      );
+      // 只获取最近的一次运动记录
+      const lastWorkout = workoutsBeforeDate.length > 0 ? workoutsBeforeDate[0] : null;

-      const lastWorkout = workoutsInRange.length > 0 ? workoutsInRange[0] : null;
+      // 如果有最近一次运动记录，只使用这一条记录来计算总卡路里和总分钟数
+      const totalCalories = lastWorkout ? (lastWorkout.totalEnergyBurned || 0) : 0;
+      const totalMinutes = lastWorkout ? Math.round((lastWorkout.duration || 0) / 60) : 0;
+
+      // 只包含最近一次运动记录
+      const recentWorkouts = lastWorkout ? [lastWorkout] : [];

      if (isMountedRef.current) {
        setSummary({
          totalCalories,
          totalMinutes,
-          workouts: workoutsInRange,
+          workouts: recentWorkouts,
          lastWorkout,
        });
        setResetToken((token) => token + 1);
@@ -153,10 +139,6 @@ export const WorkoutSummaryCard: React.FC<WorkoutSummaryCardProps> = ({ date, st
    router.push('/workout/history');
  }, [router]);

-  const handleAddPress = useCallback(() => {
-    router.push('/workout/create-session');
-  }, [router]);
-
  const cardContent = useMemo(() => {
    const hasWorkouts = summary.workouts.length > 0;
    const lastWorkout = summary.lastWorkout;
@@ -213,7 +195,7 @@ export const WorkoutSummaryCard: React.FC<WorkoutSummaryCardProps> = ({ date, st
      <View style={styles.headerRow}>
        <View style={styles.titleRow}>
          <Image source={require('@/assets/images/icons/icon-fitness.png')} style={styles.titleIcon} />
-          <Text style={styles.titleText}>健身</Text>
+          <Text style={styles.titleText}>近期锻炼</Text>
        </View>
      </View>

--- a/components/fasting/FastingStartPickerModal.tsx
+++ b/components/fasting/FastingStartPickerModal.tsx
@@ -1,10 +1,10 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import WheelPickerExpo from 'react-native-wheel-picker-expo';
-import dayjs from 'dayjs';
 import { FloatingSelectionCard } from '@/components/ui/FloatingSelectionCard';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
+import dayjs from 'dayjs';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import WheelPickerExpo from 'react-native-wheel-picker-expo';

 type FastingStartPickerModalProps = {
  visible: boolean;
@@ -119,20 +119,17 @@ export function FastingStartPickerModal({
    lastAppliedTimestamp.current = recommendedDate.getTime();
  };

-  const pickerIndicatorStyle = useMemo(
-    () => ({
-      backgroundColor: `${colors.primary}12`,
-      borderRadius: 12,
-    }),
-    [colors.primary]
-  );
-
  const textStyle = {
    fontSize: 18,
    fontWeight: '600' as const,
    color: '#2E3142',
  };

+  // 自定义渲染函数，用于应用文本样式
+  const renderItem = ({ fontSize, label, fontColor, textAlign }: { fontSize: number; label: string; fontColor: string; textAlign: 'center' | 'auto' | 'left' | 'right' | 'justify' }) => (
+    <Text style={[textStyle, { fontSize, color: fontColor, textAlign }]}>{label}</Text>
+  );
+
  return (
    <FloatingSelectionCard
      visible={visible}
@@ -148,8 +145,7 @@ export function FastingStartPickerModal({
          items={dayOptions.map((item) => ({ label: item.label, value: item.offset }))}
          onChange={({ index }) => setIndexes((prev) => ({ ...prev, dayIndex: index }))}
          backgroundColor="transparent"
-          itemTextStyle={textStyle}
-          selectedIndicatorStyle={pickerIndicatorStyle}
+          renderItem={renderItem}
          haptics
        />
        <WheelPickerExpo
@@ -160,8 +156,7 @@ export function FastingStartPickerModal({
          items={HOURS.map((hour) => ({ label: hour.toString().padStart(2, '0'), value: hour }))}
          onChange={({ index }) => setIndexes((prev) => ({ ...prev, hourIndex: index }))}
          backgroundColor="transparent"
-          itemTextStyle={textStyle}
-          selectedIndicatorStyle={pickerIndicatorStyle}
+          renderItem={renderItem}
          haptics
        />
        <WheelPickerExpo
@@ -175,8 +170,7 @@ export function FastingStartPickerModal({
          }))}
          onChange={({ index }) => setIndexes((prev) => ({ ...prev, minuteIndex: index }))}
          backgroundColor="transparent"
-          itemTextStyle={textStyle}
-          selectedIndicatorStyle={pickerIndicatorStyle}
+          renderItem={renderItem}
          haptics
        />
      </View>
--- a/components/ui/FloatingSelectionCard.tsx
+++ b/components/ui/FloatingSelectionCard.tsx
@@ -32,10 +32,10 @@ export function FloatingSelectionCard({
  ];
  const closeWrapperProps = glassAvailable
    ? {
-        glassEffectStyle: 'regular' as const,
-        tintColor: 'rgba(255,255,255,0.45)',
-        isInteractive: true,
-      }
+      glassEffectStyle: 'regular' as const,
+      tintColor: 'rgba(255,255,255,0.45)',
+      isInteractive: true,
+    }
    : {};

  return (
@@ -136,9 +136,6 @@ const styles = StyleSheet.create({
    elevation: 3,
  },
  closeButtonInnerGlass: {
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: 'rgba(255,255,255,0.45)',
-    backgroundColor: 'rgba(255,255,255,0.35)',
  },
  closeButtonInnerFallback: {
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
--- a/components/ui/HeaderBar.tsx
+++ b/components/ui/HeaderBar.tsx
@@ -1,6 +1,7 @@
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 import { Ionicons } from '@expo/vector-icons';
+import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
 import { router } from 'expo-router';
 import React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
@@ -58,12 +59,14 @@ export function HeaderBar({
    };
  };

+  const defaultBackColor = 'rgba(0,0,0,0.8)'
+
  return (
    <View
      style={[
        styles.header,
        {
-          paddingTop: (withSafeTop ? insets.top : 0) + 8,
+          paddingTop: insets.top,
          backgroundColor: getBackgroundColor(),
          ...getBorderStyle(),
          ...(variant === 'elevated' && {
@@ -76,24 +79,51 @@ export function HeaderBar({
        },
      ]}
    >
-      <TouchableOpacity
-        accessibilityRole="button"
-        onPress={() => {
-          if (onBack) {
-            onBack();
-            return
-          }
-          router.back()
-        }}
-        style={styles.backButton}
-        activeOpacity={0.7}
-      >
-        <Ionicons
-          name="chevron-back"
-          size={24}
-          color={backColor || theme.text}
-        />
-      </TouchableOpacity>
+      {isLiquidGlassAvailable() ? (
+        <TouchableOpacity
+          accessibilityRole="button"
+          onPress={() => {
+            if (onBack) {
+              onBack();
+              return
+            }
+            router.back()
+          }}
+          activeOpacity={0.7}
+        >
+          <GlassView
+            style={styles.backButton}
+            glassEffectStyle="clear"
+            tintColor="rgba(255, 255, 255, 0.2)"
+            isInteractive={true}
+          >
+            <Ionicons
+              name="chevron-back"
+              size={24}
+              color={backColor || defaultBackColor}
+            />
+          </GlassView>
+        </TouchableOpacity>
+      ) : (
+        <TouchableOpacity
+          accessibilityRole="button"
+          onPress={() => {
+            if (onBack) {
+              onBack();
+              return
+            }
+            router.back()
+          }}
+          style={[styles.backButton, styles.fallbackBackground]}
+          activeOpacity={0.7}
+        >
+          <Ionicons
+            name="chevron-back"
+            size={24}
+            color={backColor || defaultBackColor}
+          />
+        </TouchableOpacity>
+      )}
      <View style={styles.titleContainer}>
        {typeof title === 'string' ? (
          <Text style={[
@@ -117,6 +147,11 @@ export function HeaderBar({

 const styles = StyleSheet.create({
  header: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    right: 0,
+    zIndex: 2,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
@@ -126,10 +161,15 @@ const styles = StyleSheet.create({
    width: '100%',
  },
  backButton: {
-    width: 32,
-    height: 32,
+    width: 38,
+    height: 38,
    alignItems: 'center',
    justifyContent: 'center',
+    borderRadius: 38,
+    overflow: 'hidden',
+  },
+  fallbackBackground: {
+    backgroundColor: 'rgba(255, 255, 255, 0.5)',
  },
  titleContainer: {
    flex: 1,