fix:小组件- PUSH

2026-02-03 17:43:58 +08:00
parent d742b398ef
commit c1c2c6197d
66 changed files with 4888 additions and 479 deletions
--- a/client/app/(app)/_layout.tsx
+++ b/client/app/(app)/_layout.tsx
@@ -1,9 +1,22 @@
+import { useEffect } from 'react';
 import { Stack } from 'expo-router';
 import { useTranslation } from 'react-i18next';

+import { ensureDailyWidgetRecoUpToDate, syncWidgetConfig, syncWidgetUserProfileFromStorage } from '@/src/modules/dailyWidgetReco';
+
 export default function AppLayout() {
  const { t } = useTranslation();

+  useEffect(() => {
+    // 小组件数据同步（仅 iOS 生效；内部会判断原生模块是否可用）
+    // 目的：避免“仅 Onboarding 写入一次”导致老用户小组件一直显示兜底文案
+    void (async () => {
+      await syncWidgetConfig();
+      await syncWidgetUserProfileFromStorage();
+      await ensureDailyWidgetRecoUpToDate({ reason: 'app_start' });
+    })();
+  }, []);
+
  return (
    <Stack
      screenOptions={{
@@ -13,6 +26,8 @@ export default function AppLayout() {
      <Stack.Screen
        name="home"
        options={{
+          // Home 页不使用系统 Header，避免 iOS 原生导航栏自带的“毛玻璃/液玻璃”材质
+          headerShown: false,
          // 卡片页标题按设计留空（右上角为 icon 按钮）
          title: '',
          headerShadowVisible: false,
--- a/client/app/(app)/home.tsx
+++ b/client/app/(app)/home.tsx
@@ -1,7 +1,8 @@
 import { useEffect, useLayoutEffect, useMemo, useState, useCallback, useRef } from 'react';
 import { StyleSheet, View, Dimensions, Text, Pressable, PanResponder, Animated as RNAnimated, ImageBackground } from 'react-native';
 import { useTranslation } from 'react-i18next';
-import { useNavigation, useFocusEffect } from 'expo-router';
+import { useFocusEffect } from 'expo-router';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Animated, {
  Easing,
  runOnJS,
@@ -78,7 +79,7 @@ export default function HomeScreen() {
  const { t, i18n } = useTranslation();
  const isEnglish = i18n.language?.startsWith('en');
  const recoLang: 'en' | 'tc' = i18n.language?.toLowerCase().startsWith('zh') ? 'tc' : 'en';
-  const navigation = useNavigation();
+  const insets = useSafeAreaInsets();
  const [index, setIndex] = useState(0);
  const [themeMode, setThemeModeState] = useState<ThemeMode>('scenery');
  const [themeOpen, setThemeOpen] = useState(false);
@@ -210,32 +211,6 @@ export default function HomeScreen() {

  const currentNatureImage = NATURE_IMAGES[natureImageIndex];

-  useLayoutEffect(() => {
-    navigation.setOptions({
-      headerShadowVisible: false,
-      // 为了让风景/颜色两种主题下“文案的视觉居中位置”一致，统一使用透明 Header
-      // 颜色主题下 Header 透明也不会影响观感（背景就是纯色）
-      headerStyle: { backgroundColor: 'transparent' },
-      headerTransparent: true,
-      headerRight: () => (
-        <View style={styles.headerRight}>
-          <CircleIconButton
-            onPress={() => setThemeOpen(true)}
-            accessibilityLabel={t('home.theme')}
-          >
-            <ThemeIcon width={18} height={18} />
-          </CircleIconButton>
-          <CircleIconButton
-            onPress={() => setProfileOpen(true)}
-            accessibilityLabel={t('home.profile')}
-          >
-            <MyIcon width={18} height={18} />
-          </CircleIconButton>
-        </View>
-      ),
-    });
-  }, [backgroundColor, themeMode, navigation, t]);
-
  const textAnimatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateY: translateY.value }],
    opacity: opacity.value,
@@ -368,6 +343,23 @@ export default function HomeScreen() {
          resizeMode="cover"
        />
      )}
+
+      {/* 自绘顶部按钮：不使用系统 Header，彻底避免 iOS 导航栏的毛玻璃/液玻璃材质 */}
+      <View style={[styles.topRight, { top: insets.top + 8 }]}>
+        <CircleIconButton
+          onPress={() => setThemeOpen(true)}
+          accessibilityLabel={t('home.theme')}
+        >
+          <ThemeIcon width={18} height={18} />
+        </CircleIconButton>
+        <CircleIconButton
+          onPress={() => setProfileOpen(true)}
+          accessibilityLabel={t('home.profile')}
+        >
+          <MyIcon width={18} height={18} />
+        </CircleIconButton>
+      </View>
+
      <Animated.View style={[styles.card, textAnimatedStyle, themeMode === 'scenery' && styles.sceneryCard]}>
        <Text style={[styles.text, isEnglish && styles.textEnglish, themeMode === 'scenery' && styles.sceneryText]}>
          {item.text}
@@ -384,12 +376,12 @@ export default function HomeScreen() {
            style={styles.reactionInner}
          >
            {likeFilled ? (
-              <LikeFilledIcon width={35} height={36} style={{ color: '#EA6969' }} />
+              <LikeFilledIcon width={35} height={36} color="#EA6969" />
            ) : (
              <LikeIcon 
                width={35} 
                height={36} 
-                style={{ color: themeMode === 'scenery' ? '#FFFFFF' : '#5E2A28' }}
+                color={themeMode === 'scenery' ? '#FFFFFF' : '#5E2A28'}
              />
            )}
          </Pressable>
@@ -435,10 +427,12 @@ const styles = StyleSheet.create({
    justifyContent: 'center',
    alignItems: 'center',
  },
-  headerRight: {
+  topRight: {
+    position: 'absolute',
+    right: 20,
    flexDirection: 'row',
    gap: 10,
-    paddingRight: 10,
+    zIndex: 30,
  },
  circleBtn: {
    width: 34,
--- a/client/app/(onboarding)/_layout.tsx
+++ b/client/app/(onboarding)/_layout.tsx
@@ -12,7 +12,6 @@ export default function OnboardingLayout() {
      }}
    >
      <Stack.Screen name="onboarding" options={{ title: t('onboarding.title') }} />
-      <Stack.Screen name="push-prompt" options={{ title: t('push.title') }} />
    </Stack>
  );
 }
--- a/client/app/(onboarding)/onboarding.tsx
+++ b/client/app/(onboarding)/onboarding.tsx
@@ -1,13 +1,17 @@
 import { useMemo, useState } from 'react';
 import { useRouter } from 'expo-router';
-import * as Notifications from 'expo-notifications';
 import { useTranslation } from 'react-i18next';
+import { Alert } from 'react-native';
+import * as Notifications from 'expo-notifications';
+import * as Device from 'expo-device';
 import { OnboardingLayout } from '@/components/onboarding/OnboardingLayout';
 import { NameInputStep } from '@/components/onboarding/NameInputStep';
 import { SelectionStep } from '@/components/onboarding/SelectionStep';
 import { ReminderStep } from '@/components/onboarding/ReminderStep';
 import { buildUserProfileFromQuestionnaire, mapOnboardingSelectionsToQuestionnaireAnswers } from '@/src/features/userProfileScoring';
+import { ensureDailyWidgetRecoUpToDate, syncWidgetConfig, syncWidgetUserProfileFromScoring } from '@/src/modules/dailyWidgetReco';
 import { fetchRecoFeed } from '@/src/services/recoApi';
+import { getExpoPushTokenOrThrow, registerPushToken, setPushPreferences } from '@/src/services/pushApi';
 import {
  recordRecoFeedServed,
  setOnboardingCompleted,
@@ -15,6 +19,7 @@ import {
  setDailyReminderSettings,
  setUserProfileScoring,
  setRecoFeedCache,
+  setPushPromptState,
 } from '@/src/storage/appStorage';

 type Step =
@@ -50,9 +55,8 @@ export default function OnboardingScreen() {
  }, [t, currentStep]);

  async function onFinish() {
-    // 请求推送权限
-    const { status } = await Notifications.requestPermissionsAsync();
-    const pushEnabled = status === 'granted';
+    // 用户选择每日次数 > 0：在此页直接触发系统通知权限（已移除单独的 push 引导页）。
+    const wantsPush = reminderTimes > 0;

    // 将 Onboarding 选择映射为标准问卷枚举（允许跳过）
    const answers = mapOnboardingSelectionsToQuestionnaireAnswers(selections);
@@ -61,6 +65,13 @@ export default function OnboardingScreen() {
    const scoringProfile = buildUserProfileFromQuestionnaire(answers);
    await setUserProfileScoring(scoringProfile);

+    // 同步到 App Group：供 iOS Widget 拉取与展示
+    await syncWidgetConfig();
+    await syncWidgetUserProfileFromScoring(scoringProfile);
+
+    // 可选：前台辅助拉取一次“每日推荐”，提升小组件首次展示的成功率与一致性（失败不阻塞）
+    await ensureDailyWidgetRecoUpToDate({ reason: 'onboarding_finish', scoringProfile });
+
    // Onboarding 结束后预拉取一次 Feed 文案（失败不阻塞进入首页）
    try {
      const lang = i18n.language?.toLowerCase().startsWith('zh') ? 'tc' : 'en';
@@ -96,10 +107,49 @@ export default function OnboardingScreen() {
    });
    await setDailyReminderSettings({
      timesPerDay: reminderTimes,
-      pushEnabled: pushEnabled
+      // 这里表示“用户意愿”，不代表系统权限一定已 granted
+      pushEnabled: wantsPush,
    });
    await setOnboardingCompleted(true);
-    router.replace('/(app)/home');
+
+    // 用户选择 0 次（关闭）或跳过：直接进入首页
+    if (!wantsPush) {
+      await setPushPromptState('skipped');
+      router.replace('/(app)/home');
+      return;
+    }
+
+    // 用户想要 Push：请求系统权限并尽量完成 token/偏好上报（失败不阻塞进入首页）
+    await setPushPromptState('unknown');
+    try {
+      const { status } = await Notifications.requestPermissionsAsync();
+      if (status !== 'granted') {
+        await setPushPromptState('skipped');
+        return;
+      }
+
+      // iOS 模拟器通常无法获取 Expo Push Token（系统限制），此时不要提示“失败”，而是明确告知需要真机测试。
+      if (Device.osName === 'iOS' && !Device.isDevice) {
+        Alert.alert('提示', '当前为 iOS 模拟器，无法获取推送 Token。请使用真机测试推送功能。');
+        await setPushPromptState('unknown');
+        return;
+      }
+
+      // 1) 获取 Expo Push Token
+      const expoPushToken = await getExpoPushTokenOrThrow();
+      // 2) 上报 token 到后端（幂等）
+      await registerPushToken({ pushToken: expoPushToken });
+      // 3) 上报推送偏好（幂等）
+      await setPushPreferences({ enabled: wantsPush, timesPerDay: reminderTimes });
+
+      await setPushPromptState('enabled');
+    } catch (e) {
+      // 失败不阻塞进入首页；但这里给出更明确的文案（常见原因：模拟器/网络/后端异常）
+      Alert.alert(t('push.errorTitle'), t('push.errorDesc'));
+      await setPushPromptState('unknown');
+    } finally {
+      router.replace('/(app)/home');
+    }
  }

  const onNext = () => {
@@ -121,6 +171,10 @@ export default function OnboardingScreen() {
    const scoringProfile = buildUserProfileFromQuestionnaire({});
    await setUserProfileScoring(scoringProfile);

+    // 同步到 App Group：供 iOS Widget 使用（失败不阻塞）
+    await syncWidgetConfig();
+    await syncWidgetUserProfileFromScoring(scoringProfile);
+
    // 标记已完成，避免下次启动再次进入 Onboarding
    await setOnboardingCompleted(true);
    router.replace('/(app)/home');
@@ -173,6 +227,11 @@ export default function OnboardingScreen() {
          value={reminderTimes}
          onChange={setReminderTimes}
          onFinish={onFinish}
+          onSkip={() => {
+            // 跳过每日提醒：视为 0 次（关闭）
+            setReminderTimes(0);
+            onFinish();
+          }}
        />
      )}
    </OnboardingLayout>
--- a/client/app/(onboarding)/push-prompt.tsx
+++ b/client/app/(onboarding)/push-prompt.tsx
@@ -1,74 +0,0 @@
-import { useState } from 'react';
-import { Alert, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useRouter } from 'expo-router';
-import { useTranslation } from 'react-i18next';
-import * as Notifications from 'expo-notifications';
-
-import { setPushPromptState } from '@/src/storage/appStorage';
-
-export default function PushPromptScreen() {
-  const router = useRouter();
-  const { t } = useTranslation();
-  const [loading, setLoading] = useState(false);
-
-  async function goHome() {
-    router.replace('/(app)/home');
-  }
-
-  async function onLater() {
-    await setPushPromptState('skipped');
-    await goHome();
-  }
-
-  async function onEnableNow() {
-    // 触发系统权限申请（可失败，但不阻塞进入主功能）
-    setLoading(true);
-    try {
-      await Notifications.requestPermissionsAsync();
-      await setPushPromptState('enabled');
-      await goHome();
-    } catch (e) {
-      Alert.alert(t('push.errorTitle'), t('push.errorDesc'));
-      await goHome();
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.card}>
-        <Text style={styles.title}>{t('push.cardTitle')}</Text>
-        <Text style={styles.desc}>{t('push.cardDesc')}</Text>
-      </View>
-
-      <View style={styles.actions}>
-        <Pressable style={[styles.btn, styles.secondary]} onPress={onLater} disabled={loading}>
-          <Text style={[styles.btnText, styles.secondaryText]}>{t('push.later')}</Text>
-        </Pressable>
-        <Pressable style={[styles.btn, styles.primary]} onPress={onEnableNow} disabled={loading}>
-          <Text style={styles.btnText}>{loading ? t('push.loading') : t('push.enable')}</Text>
-        </Pressable>
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: { flex: 1, padding: 20, justifyContent: 'center', gap: 16 },
-  card: {
-    borderRadius: 18,
-    padding: 20,
-    backgroundColor: '#111827',
-    gap: 10
-  },
-  title: { color: 'white', fontSize: 20, fontWeight: '700' },
-  desc: { color: '#E5E7EB', fontSize: 15, lineHeight: 21 },
-  actions: { flexDirection: 'row', gap: 12 },
-  btn: { flex: 1, paddingVertical: 14, borderRadius: 14, alignItems: 'center' },
-  primary: { backgroundColor: '#16A34A' },
-  secondary: { backgroundColor: '#F3F4F6' },
-  btnText: { fontSize: 16, fontWeight: '600', color: '#FFFFFF' },
-  secondaryText: { color: '#111827' }
-});
-
--- a/client/app/(splash)/splash.tsx
+++ b/client/app/(splash)/splash.tsx
@@ -5,6 +5,7 @@ import * as WebBrowser from 'expo-web-browser';
 import { useTranslation } from 'react-i18next';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { setConsentAccepted, getConsentAccepted } from '../../src/storage/appStorage';
+import { fetchLegalLinks } from '@/src/services/legalApi';

 // 导入 SVG 组件
 import FlowersBg from '../../assets/images/index/flowers_endbg.svg';
@@ -16,6 +17,7 @@ export default function SplashScreen() {
  const router = useRouter();
  const { t } = useTranslation();
  const [showConsent, setShowConsent] = useState(false);
+  const [links, setLinks] = useState<{ privacy?: string; terms?: string }>({});

  useEffect(() => {
    checkConsent();
@@ -44,6 +46,25 @@ export default function SplashScreen() {
    }
  };

+  // 拉取协议链接（由后端按语言下发；默认 EN）
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await fetchLegalLinks();
+        if (cancelled) return;
+        setLinks({ privacy: res.privacyPolicyUrl, terms: res.termsOfUseUrl });
+      } catch (e) {
+        // 不阻塞主流程：失败时不崩溃，链接入口可不展示
+        if (__DEV__) console.log('[LegalLinks] 拉取失败（splash）:', e);
+        if (!cancelled) setLinks({});
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
  const bgDecorationTop = 363;
  const bgDecorationHeight = height * 0.6;
  const contentTop = bgDecorationTop + (bgDecorationHeight * 0.25);
@@ -81,11 +102,17 @@ export default function SplashScreen() {
            </TouchableOpacity>

            <View style={styles.linksContainer}>
-              <TouchableOpacity onPress={() => openLink('https://example.com/privacy')}>
+              <TouchableOpacity
+                disabled={!links.privacy}
+                onPress={() => (links.privacy ? openLink(links.privacy) : undefined)}
+              >
                <Text style={styles.linkText}>{t('consent.privacy')}</Text>
              </TouchableOpacity>
              <View style={styles.divider} />
-              <TouchableOpacity onPress={() => openLink('https://example.com/terms')}>
+              <TouchableOpacity
+                disabled={!links.terms}
+                onPress={() => (links.terms ? openLink(links.terms) : undefined)}
+              >
                <Text style={styles.linkText}>{t('consent.terms')}</Text>
              </TouchableOpacity>
            </View>
--- a/client/app/_layout.tsx
+++ b/client/app/_layout.tsx
@@ -6,9 +6,12 @@ import * as SplashScreen from 'expo-splash-screen';
 import * as Notifications from 'expo-notifications';
 import { useEffect, useState } from 'react';
 import 'react-native-reanimated';
+import { AppState } from 'react-native';

 import { useColorScheme } from '@/components/useColorScheme';
 import { initI18n } from '@/src/i18n';
+import { ensureDailyWidgetRecoUpToDate, syncWidgetConfig, syncWidgetUserProfileFromStorage } from '@/src/modules/dailyWidgetReco';
+import { getOrCreateClientUserId } from '@/src/storage/appStorage';

 // 配置通知处理方式（即使不发送也建议配置，以确保权限接口正常）
 Notifications.setNotificationHandler({
@@ -53,6 +56,17 @@ export default function RootLayout() {
      .finally(() => setI18nReady(true));
  }, []);

+  useEffect(() => {
+    // 尽早生成 client_user_id，便于后续任意时刻与后端建立关联（Push Token/偏好等）
+    getOrCreateClientUserId()
+      .then((id) => {
+        if (__DEV__) console.log('[client_user_id]', id);
+      })
+      .catch((e) => {
+      console.warn('[client_user_id] 生成失败（不阻塞启动）', e);
+      });
+  }, []);
+
  useEffect(() => {
    // 等字体与 i18n 都准备好后再隐藏启动页，避免文案闪烁
    if (loaded && i18nReady) {
@@ -70,6 +84,21 @@ export default function RootLayout() {
 function RootLayoutNav() {
  const colorScheme = useColorScheme();

+  useEffect(() => {
+    // iOS 小组件：启动时把必要信息写入共享区，并尽力刷新一次“每日推荐”
+    syncWidgetConfig().catch(() => {});
+    syncWidgetUserProfileFromStorage().catch(() => {});
+    ensureDailyWidgetRecoUpToDate({ reason: 'app_start' }).catch(() => {});
+
+    const sub = AppState.addEventListener('change', (state) => {
+      if (state === 'active') {
+        // App 回到前台时尝试刷新（失败不阻塞）
+        ensureDailyWidgetRecoUpToDate({ reason: 'app_active' }).catch(() => {});
+      }
+    });
+    return () => sub.remove();
+  }, []);
+
  return (
    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      <Stack screenOptions={{ headerShown: false }}>