feat(Notification): implement notification preferences management and enhance notification handling

- Introduced a new service for managing notification preferences, including push notifications, sound, and vibration settings.
- Updated the notification handling logic to respect user preferences, ensuring notifications are displayed according to user settings.
- Refactored the App and various screens to integrate the new notification preferences, improving user experience and consistency.
- Enhanced the HomeScreen and NotificationSettingsScreen to load and update notification settings seamlessly.
- Implemented a mechanism to hide the bottom tab bar based on scroll events, improving navigation usability.

src/screens/apps/AppsScreen.tsx

@@ -1,25 +1,23 @@
 /**
- * 应用中心：聚合站内轻应用入口
+ * 应用中心：与首页顶栏、个人主页帖子卡片同一套圆角 / 阴影 / 主色体系
  */
 
-import React, { useCallback, useMemo, useState } from 'react';
-import { View, StyleSheet, ScrollView, TouchableOpacity } from 'react-native';
+import React, { useCallback } from 'react';
+import { View, StyleSheet, ScrollView, TouchableOpacity, StatusBar } from 'react-native';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
-import { StatusBar } from 'expo-status-bar';
 import { useRouter } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { LinearGradient } from 'expo-linear-gradient';
 
 import { colors, spacing, fontSizes, borderRadius, shadows } from '../../theme';
 import * as hrefs from '../../navigation/hrefs';
 import { Text, ResponsiveContainer } from '../../components/common';
-import { useResponsive } from '../../hooks/useResponsive';
+import { useResponsive, useResponsiveSpacing, useBreakpointGTE } from '../../hooks/useResponsive';
+
 type AppItem = {
   id: string;
   title: string;
   subtitle: string;
   icon: React.ComponentProps<typeof MaterialCommunityIcons>['name'];
-  gradient: readonly [string, string, ...string[]];
   href: string;
 };
 
@@ -27,28 +25,32 @@ const APP_ENTRIES: AppItem[] = [
   {
     id: 'schedule',
     title: '课表',
-    subtitle: '周视图 · 教务同步',
+    subtitle: '周课表、教务同步与课程管理',
     icon: 'calendar-week',
-    gradient: [colors.primary.main, colors.primary.light],
     href: hrefs.hrefSchedule(),
   },
 ];
 
+/** 与个人主页 PostCard 外层 `postWrapper` 一致 */
+const postCardShell = {
+  marginBottom: spacing.md,
+  backgroundColor: colors.background.paper,
+  borderRadius: 16,
+  overflow: 'hidden' as const,
+  shadowColor: '#000',
+  shadowOffset: { width: 0, height: 2 },
+  shadowOpacity: 0.06,
+  shadowRadius: 8,
+  elevation: 2,
+};
+
 export const AppsScreen: React.FC = () => {
   const router = useRouter();
   const insets = useSafeAreaInsets();
-  const { isMobile, isTablet, width } = useResponsive();
-
-  const columns = useMemo(() => {
-    if (width >= 900) return 4;
-    if (isTablet || width >= 600) return 3;
-    return 2;
-  }, [isTablet, width]);
-
-  const gap = spacing.md;
-  const [gridWidth, setGridWidth] = useState(0);
-  const cardWidth =
-    gridWidth > 0 ? (gridWidth - gap * (columns - 1)) / columns : undefined;
+  const { isMobile } = useResponsive();
+  /** 与 MessageListScreen 顶栏宽屏 padding 一致 */
+  const isWideScreen = useBreakpointGTE('lg');
+  const responsivePadding = useResponsiveSpacing({ xs: 8, sm: 12, md: 16, lg: 24, xl: 32 });
 
   const scrollBottomInset = isMobile ? 88 + insets.bottom + spacing.md : spacing['3xl'];
 
@@ -59,74 +61,82 @@ export const AppsScreen: React.FC = () => {
     [router]
   );
 
-  return (
-    <SafeAreaView style={styles.safe} edges={['top']}>
-      <StatusBar style="dark" />
-      <ScrollView
-        style={styles.scroll}
-        contentContainerStyle={[styles.scrollContent, { paddingBottom: scrollBottomInset }]}
-        showsVerticalScrollIndicator={false}
-      >
-        <ResponsiveContainer maxWidth={960}>
-          <LinearGradient
-            colors={[`${colors.primary.main}18`, `${colors.primary.light}10`, 'transparent']}
-            start={{ x: 0, y: 0 }}
-            end={{ x: 1, y: 1 }}
-            style={styles.hero}
-          >
-            <View style={styles.heroIconWrap}>
-              <LinearGradient
-                colors={[colors.primary.main, colors.primary.light]}
-                style={styles.heroIconGradient}
-                start={{ x: 0, y: 0 }}
-                end={{ x: 1, y: 1 }}
-              >
-                <MaterialCommunityIcons name="apps" size={28} color={colors.primary.contrast} />
-              </LinearGradient>
+  const renderTiles = () => (
+    <>
+      <Text variant="caption" color={colors.text.secondary} style={styles.pageSubtitle}>
+        与社区账号打通的轻应用入口
+      </Text>
+      {APP_ENTRIES.map(item => (
+        <TouchableOpacity
+          key={item.id}
+          style={postCardShell}
+          onPress={() => onOpenApp(item.href)}
+          activeOpacity={0.88}
+        >
+          <View style={styles.appCardInner}>
+            <View style={styles.appIconCircle}>
+              <MaterialCommunityIcons name={item.icon} size={26} color={colors.primary.contrast} />
             </View>
-            <Text style={styles.heroTitle}>应用</Text>
-            <Text style={styles.heroSubtitle}>学习与生活常用工具，持续扩充中</Text>
-          </LinearGradient>
-
-          <Text style={styles.sectionLabel}>全部应用</Text>
-          <View
-            style={[styles.grid, { gap }]}
-            onLayout={e => setGridWidth(e.nativeEvent.layout.width)}
-          >
-            {APP_ENTRIES.map(item => (
-              <TouchableOpacity
-                key={item.id}
-                style={[styles.card, cardWidth != null ? { width: cardWidth } : styles.cardFlex, shadows.md]}
-                onPress={() => onOpenApp(item.href)}
-                activeOpacity={0.88}
-              >
-                <LinearGradient
-                  colors={item.gradient}
-                  start={{ x: 0, y: 0 }}
-                  end={{ x: 1, y: 1 }}
-                  style={styles.cardIconRing}
-                >
-                  <View style={styles.cardIconInner}>
-                    <MaterialCommunityIcons name={item.icon} size={26} color={colors.primary.main} />
-                  </View>
-                </LinearGradient>
-                <Text style={styles.cardTitle} numberOfLines={1}>
-                  {item.title}
-                </Text>
-                <Text style={styles.cardSubtitle} numberOfLines={2}>
-                  {item.subtitle}
-                </Text>
-                <View style={styles.cardFooter}>
-                  <Text style={styles.cardAction}>打开</Text>
-                  <MaterialCommunityIcons name="chevron-right" size={18} color={colors.primary.main} />
-                </View>
-              </TouchableOpacity>
-            ))}
+            <View style={styles.appCardText}>
+              <Text variant="body" color={colors.text.primary} style={styles.appTitle}>
+                {item.title}
+              </Text>
+              <Text variant="caption" color={colors.text.secondary} style={styles.appSubtitle}>
+                {item.subtitle}
+              </Text>
+            </View>
+            <MaterialCommunityIcons name="chevron-right" size={22} color={colors.primary.main} />
           </View>
+        </TouchableOpacity>
+      ))}
 
-          <Text style={styles.hint}>更多应用敬请期待</Text>
+      <View style={styles.footer}>
+        <Text variant="caption" color={colors.text.hint}>
+          更多应用陆续上线
+        </Text>
+      </View>
+    </>
+  );
+
+  return (
+    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
+      <StatusBar barStyle="dark-content" backgroundColor="#FAFAFA" />
+
+      {/* 与 MessageListScreen 顶栏同一结构 / 样式 */}
+      <View style={[styles.msgHeader, isWideScreen && styles.msgHeaderWide]}>
+        <View style={styles.msgHeaderLeft} />
+        <View style={styles.msgHeaderCenter}>
+          <Text style={[styles.msgHeaderTitle, ...(isWideScreen ? [styles.msgHeaderTitleWide] : [])]}>
+            应用
+          </Text>
+        </View>
+        <View style={styles.msgHeaderRight}>
+          <View style={styles.msgHeaderRightSpacer} />
+        </View>
+      </View>
+
+      {isWideScreen ? (
+        <ResponsiveContainer maxWidth={720}>
+          <ScrollView
+            style={styles.scroll}
+            contentContainerStyle={[styles.scrollContent, { paddingBottom: scrollBottomInset }]}
+            showsVerticalScrollIndicator={false}
+          >
+            {renderTiles()}
+          </ScrollView>
         </ResponsiveContainer>
-      </ScrollView>
+      ) : (
+        <ScrollView
+          style={styles.scroll}
+          contentContainerStyle={[
+            styles.scrollContent,
+            { paddingBottom: scrollBottomInset, paddingHorizontal: responsivePadding },
+          ]}
+          showsVerticalScrollIndicator={false}
+        >
+          {renderTiles()}
+        </ScrollView>
+      )}
     </SafeAreaView>
   );
 };
@@ -134,115 +144,92 @@ export const AppsScreen: React.FC = () => {
 export default AppsScreen;
 
 const styles = StyleSheet.create({
-  safe: {
+  container: {
     flex: 1,
     backgroundColor: colors.background.default,
   },
+  msgHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.md,
+    backgroundColor: '#FAFAFA',
+    ...shadows.sm,
+  },
+  msgHeaderWide: {
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.lg,
+  },
+  msgHeaderLeft: {
+    width: 44,
+  },
+  msgHeaderCenter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+  },
+  msgHeaderTitle: {
+    fontSize: 19,
+    fontWeight: '700',
+    color: '#333',
+  },
+  msgHeaderTitleWide: {
+    fontSize: 22,
+  },
+  msgHeaderRight: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  /** 与消息页「+」按钮同占位宽度，标题视觉居中 */
+  msgHeaderRightSpacer: {
+    width: 36,
+    height: 44,
+  },
+  pageSubtitle: {
+    marginBottom: spacing.md,
+    lineHeight: fontSizes.sm * 1.45,
+  },
+  /** 与消息列表区同色，避免顶栏阴影落在灰底上像一条线 */
   scroll: {
     flex: 1,
+    backgroundColor: '#FAFAFA',
   },
   scrollContent: {
     paddingTop: spacing.md,
+    flexGrow: 1,
+    backgroundColor: '#FAFAFA',
+  },
+  appCardInner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: spacing.lg,
     paddingHorizontal: spacing.lg,
   },
-  hero: {
-    borderRadius: borderRadius['2xl'],
-    paddingVertical: spacing['2xl'],
-    paddingHorizontal: spacing.xl,
-    marginBottom: spacing['2xl'],
-    overflow: 'hidden',
-  },
-  heroIconWrap: {
-    marginBottom: spacing.md,
-  },
-  heroIconGradient: {
+  /** 与首页发帖 FAB 同主色实心圆 */
+  appIconCircle: {
     width: 52,
     height: 52,
-    borderRadius: borderRadius.xl,
-    alignItems: 'center',
-    justifyContent: 'center',
-    ...shadows.md,
-  },
-  heroTitle: {
-    fontSize: fontSizes['3xl'],
-    fontWeight: '800',
-    color: colors.text.primary,
-    letterSpacing: -0.5,
-  },
-  heroSubtitle: {
-    marginTop: spacing.xs,
-    fontSize: fontSizes.sm,
-    color: colors.text.secondary,
-    lineHeight: 20,
-    maxWidth: 320,
-  },
-  sectionLabel: {
-    fontSize: fontSizes.xs,
-    fontWeight: '700',
-    color: colors.text.secondary,
-    textTransform: 'uppercase',
-    letterSpacing: 1.2,
-    marginBottom: spacing.md,
-    marginLeft: 2,
-  },
-  grid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    width: '100%',
-  },
-  cardFlex: {
-    flex: 1,
-    minWidth: 140,
-    maxWidth: '100%',
-  },
-  card: {
-    backgroundColor: colors.background.paper,
-    borderRadius: borderRadius.xl,
-    padding: spacing.lg,
-    borderWidth: 1,
-    borderColor: `${colors.divider}99`,
-  },
-  cardIconRing: {
-    width: 52,
-    height: 52,
-    borderRadius: borderRadius.lg,
-    padding: 2,
-    marginBottom: spacing.md,
-    alignSelf: 'flex-start',
-  },
-  cardIconInner: {
-    flex: 1,
-    borderRadius: borderRadius.md,
-    backgroundColor: colors.background.paper,
+    borderRadius: borderRadius.full,
+    backgroundColor: colors.primary.main,
     alignItems: 'center',
     justifyContent: 'center',
   },
-  cardTitle: {
-    fontSize: fontSizes.lg,
+  appCardText: {
+    flex: 1,
+    marginLeft: spacing.md,
+    marginRight: spacing.sm,
+  },
+  appTitle: {
     fontWeight: '700',
-    color: colors.text.primary,
+    fontSize: fontSizes.md + 1,
   },
-  cardSubtitle: {
-    marginTop: spacing.xs,
-    fontSize: fontSizes.sm,
-    color: colors.text.secondary,
-    lineHeight: 18,
-    minHeight: 36,
+  appSubtitle: {
+    marginTop: 4,
   },
-  cardFooter: {
-    flexDirection: 'row',
+  footer: {
     alignItems: 'center',
-    marginTop: spacing.md,
-  },
-  cardAction: {
-    fontSize: fontSizes.sm,
-    fontWeight: '600',
-    color: colors.primary.main,
-  },
-  hint: {
-    marginTop: spacing['3xl'],
-    textAlign: 'center',
-    fontSize: fontSizes.sm,
-    color: colors.text.hint,
+    paddingTop: spacing.xl,
+    paddingBottom: spacing.md,
   },
 });

src/screens/home/HomeScreen.tsx

@@ -21,12 +21,12 @@ import {
   Modal,
 } from 'react-native';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useRouter } from 'expo-router';
+import { useRouter, useFocusEffect } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { colors, spacing, borderRadius, shadows } from '../../theme';
 import { Post } from '../../types';
-import { useUserStore } from '../../stores';
+import { useUserStore, useHomeTabBarVisibilityStore } from '../../stores';
 import { useCurrentUser } from '../../stores/authStore';
 import { channelService, postService } from '../../services';
 import { PostCard, TabBar, SearchBar } from '../../components/business';
@@ -47,6 +47,10 @@ const SWIPE_COOLDOWN_MS = 300;
 const MOBILE_TAB_BAR_HEIGHT = 64;
 const MOBILE_TAB_FLOATING_MARGIN = 12;
 const MOBILE_FAB_GAP = 12;
+/** 首页纵向滑动超过此阈值视为明确向下/向上划，用于隐藏或显示底部 Tab */
+const TAB_BAR_SCROLL_DELTA_Y = 10;
+/** 停止滑动多久后自动恢复底部 Tab */
+const TAB_BAR_IDLE_RESTORE_MS = 2200;
 
 type ViewMode = 'list' | 'grid';
 type PostType = 'follow' | 'hot' | 'latest';
@@ -93,6 +97,65 @@ export const HomeScreen: React.FC = () => {
   
   const isLoadingMoreRef = useRef(false);
 
+  const setBottomTabBarHiddenByScroll = useHomeTabBarVisibilityStore((s) => s.setBottomTabBarHiddenByScroll);
+  const bottomTabBarHiddenByScroll = useHomeTabBarVisibilityStore((s) => s.bottomTabBarHiddenByScroll);
+  const homeListScrollYRef = useRef(0);
+  const tabBarIdleRestoreTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearTabBarIdleRestoreTimer = useCallback(() => {
+    if (tabBarIdleRestoreTimerRef.current != null) {
+      clearTimeout(tabBarIdleRestoreTimerRef.current);
+      tabBarIdleRestoreTimerRef.current = null;
+    }
+  }, []);
+
+  const scheduleTabBarIdleRestore = useCallback(() => {
+    clearTabBarIdleRestoreTimer();
+    tabBarIdleRestoreTimerRef.current = setTimeout(() => {
+      setBottomTabBarHiddenByScroll(false);
+      tabBarIdleRestoreTimerRef.current = null;
+    }, TAB_BAR_IDLE_RESTORE_MS);
+  }, [clearTabBarIdleRestoreTimer, setBottomTabBarHiddenByScroll]);
+
+  const handleHomeVerticalScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const y = event.nativeEvent.contentOffset.y;
+      const dy = y - homeListScrollYRef.current;
+      homeListScrollYRef.current = y;
+
+      scheduleTabBarIdleRestore();
+
+      if (y <= 0) {
+        setBottomTabBarHiddenByScroll(false);
+        return;
+      }
+
+      if (dy > TAB_BAR_SCROLL_DELTA_Y) {
+        setBottomTabBarHiddenByScroll(true);
+      } else if (dy < -TAB_BAR_SCROLL_DELTA_Y) {
+        setBottomTabBarHiddenByScroll(false);
+      }
+    },
+    [scheduleTabBarIdleRestore, setBottomTabBarHiddenByScroll]
+  );
+
+  useFocusEffect(
+    useCallback(() => {
+      return () => {
+        clearTabBarIdleRestoreTimer();
+        homeListScrollYRef.current = 0;
+        setBottomTabBarHiddenByScroll(false);
+      };
+    }, [clearTabBarIdleRestoreTimer, setBottomTabBarHiddenByScroll])
+  );
+
+  useEffect(() => {
+    if (showSearch) {
+      clearTabBarIdleRestoreTimer();
+      setBottomTabBarHiddenByScroll(false);
+    }
+  }, [showSearch, clearTabBarIdleRestoreTimer, setBottomTabBarHiddenByScroll]);
+
   /** 横向胶囊条滚动位置：切换频道刷新列表时不重置 */
   const capsuleHScrollRef = useRef<ScrollView | null>(null);
   const capsuleScrollXRef = useRef(0);
@@ -133,6 +196,11 @@ export const HomeScreen: React.FC = () => {
   const isLatestTab = activeIndex === 1;
   const currentChannelId = isLatestTab && activeCapsuleId ? activeCapsuleId : undefined;
 
+  useEffect(() => {
+    homeListScrollYRef.current = 0;
+    setBottomTabBarHiddenByScroll(false);
+  }, [activeIndex, currentChannelId, viewMode, setBottomTabBarHiddenByScroll]);
+
   useLayoutEffect(() => {
     if (!isLatestTab) return;
     restoreCapsuleStripScroll();
@@ -183,18 +251,21 @@ export const HomeScreen: React.FC = () => {
     }
   }, [posts.length, listKey, hasMore, isLoadingMore]);
   
-  // 网格模式滚动处理 - 检测是否滚动到底部
-  const handleGridScroll = useCallback((event: any) => {
-    const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
-    const scrollY = contentOffset.y;
-    const visibleHeight = layoutMeasurement.height;
-    const contentHeight = contentSize.height;
-    
-    // 当滚动到距离底部 200px 时触发加载更多
-    if (scrollY + visibleHeight >= contentHeight - 200) {
-      loadMore();
-    }
-  }, [loadMore]);
+  // 网格模式滚动处理 - 检测是否滚动到底部 + 底部 Tab 显隐
+  const handleGridScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      handleHomeVerticalScroll(event);
+      const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
+      const scrollY = contentOffset.y;
+      const visibleHeight = layoutMeasurement.height;
+      const contentHeight = contentSize.height;
+
+      if (scrollY + visibleHeight >= contentHeight - 200) {
+        loadMore();
+      }
+    },
+    [handleHomeVerticalScroll, loadMore]
+  );
 
   // 刷新方法 - 先获取正确类型的帖子，再刷新
   const refresh = useCallback(async () => {
@@ -227,10 +298,13 @@ export const HomeScreen: React.FC = () => {
     return posts.map(post => {
       const storePost = postsMap.get(post.id);
       if (storePost) {
-        // 如果 store 中有这个帖子，使用 store 的最新状态
-        return storePost;
+        // store 同步点赞等状态；channel 等列表专用字段在 store 里常缺失，从列表帖合并
+        return {
+          ...post,
+          ...storePost,
+          channel: storePost.channel ?? post.channel,
+        };
       }
-      // 如果 store 中没有这个帖子，使用原始数据
       return post;
     });
   }, [posts, postsMap]);
@@ -281,10 +355,12 @@ export const HomeScreen: React.FC = () => {
     if (!isMobile) {
       return undefined;
     }
+    if (bottomTabBarHiddenByScroll) {
+      return MOBILE_TAB_FLOATING_MARGIN + MOBILE_FAB_GAP + insets.bottom;
+    }
     // TabBar 悬浮在底部，发帖按钮需要在 TabBar 上方
-    // TabBar 高度 64 + TabBar 浮动间距 12 + 按钮与 TabBar 间距 16
     return MOBILE_TAB_BAR_HEIGHT + MOBILE_TAB_FLOATING_MARGIN * 2 + MOBILE_FAB_GAP + insets.bottom;
-  }, [isMobile, insets.bottom]);
+  }, [isMobile, insets.bottom, bottomTabBarHiddenByScroll]);
 
   // 切换视图模式
   const toggleViewMode = () => {
@@ -639,7 +715,7 @@ export const HomeScreen: React.FC = () => {
             }
           ]}
           showsVerticalScrollIndicator={false}
-          scrollEventThrottle={100}
+          scrollEventThrottle={16}
           onScroll={handleGridScroll}
           refreshControl={
             <RefreshControl
@@ -734,6 +810,7 @@ export const HomeScreen: React.FC = () => {
         }
         onEndReached={loadMore}
         onEndReachedThreshold={0.3}
+        onScroll={handleHomeVerticalScroll}
         scrollEventThrottle={16}
         ListEmptyComponent={renderEmpty}
         ListFooterComponent={isLoadingMore ? <Loading size="sm" /> : null}
@@ -783,6 +860,7 @@ export const HomeScreen: React.FC = () => {
           activeIndex={activeIndex}
           onTabChange={changeTab}
           variant="modern"
+          style={styles.homeTabBar}
           rightContent={
             <TouchableOpacity onPress={toggleViewMode} style={styles.viewToggleBtn}>
               <MaterialCommunityIcons
@@ -874,7 +952,8 @@ const styles = StyleSheet.create({
     backgroundColor: colors.background.paper,
   },
   searchWrapper: {
-    paddingBottom: spacing.sm,
+    paddingTop: spacing.lg,
+    paddingBottom: spacing.xs,
     // 移除阴影效果
     shadowColor: 'transparent',
     shadowOffset: { width: 0, height: 0 },
@@ -882,6 +961,10 @@ const styles = StyleSheet.create({
     shadowRadius: 0,
     elevation: 0,
   },
+  homeTabBar: {
+    marginTop: 0,
+    marginBottom: spacing.sm,
+  },
   viewToggleBtn: {
     width: 44,
     height: 44,

src/screens/profile/EditProfileScreen.tsx

@@ -575,11 +575,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   coverEditOverlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    height: '60%',
+    ...StyleSheet.absoluteFillObject,
     backgroundColor: 'rgba(0, 0, 0, 0.3)',
     justifyContent: 'center',
     alignItems: 'center',

src/screens/profile/NotificationSettingsScreen.tsx

@@ -13,14 +13,16 @@ import {
 } from 'react-native';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import AsyncStorage from '@react-native-async-storage/async-storage';
 import { colors, spacing, fontSizes, borderRadius } from '../../theme';
 import { Text, ResponsiveContainer } from '../../components/common';
-import { setVibrationEnabled } from '../../services/backgroundService';
+import {
+  loadNotificationPreferences,
+  setPushNotificationsPreference,
+  setSoundPreference,
+  setVibrationPreference,
+} from '../../services/notificationPreferences';
 import { useResponsive } from '../../hooks';
 
-const VIBRATION_ENABLED_KEY = 'vibration_enabled';
-
 interface NotificationSettingItem {
   key: string;
   title: string;
@@ -40,34 +42,48 @@ export const NotificationSettingsScreen: React.FC = () => {
   // 底部间距，避免被 TabBar 遮挡
   const scrollBottomInset = isMobile ? 64 + 24 + insets.bottom + spacing.md : spacing.md;
 
-  // 加载设置
+  // 加载设置（与启动时 hydrate 一致，避免从其它入口进页时 UI 与内存不一致）
   useEffect(() => {
     const loadSettings = async () => {
       try {
-        const vibrationStored = await AsyncStorage.getItem(VIBRATION_ENABLED_KEY);
-        if (vibrationStored !== null) {
-          const enabled = JSON.parse(vibrationStored);
-          setVibrationEnabledState(enabled);
-          setVibrationEnabled(enabled);
-        }
+        const prefs = await loadNotificationPreferences();
+        setVibrationEnabledState(prefs.vibrationEnabled);
+        setPushEnabled(prefs.pushEnabled);
+        setSoundEnabled(prefs.soundEnabled);
       } catch (error) {
-        console.error('加载震动设置失败:', error);
+        console.error('加载通知设置失败:', error);
       }
     };
     loadSettings();
   }, []);
 
-  // 切换震动
   const toggleVibration = async (value: boolean) => {
     try {
       setVibrationEnabledState(value);
-      setVibrationEnabled(value);
-      await AsyncStorage.setItem(VIBRATION_ENABLED_KEY, JSON.stringify(value));
+      await setVibrationPreference(value);
     } catch (error) {
       console.error('保存震动设置失败:', error);
     }
   };
 
+  const togglePush = async (value: boolean) => {
+    try {
+      setPushEnabled(value);
+      await setPushNotificationsPreference(value);
+    } catch (error) {
+      console.error('保存推送开关失败:', error);
+    }
+  };
+
+  const toggleSound = async (value: boolean) => {
+    try {
+      setSoundEnabled(value);
+      await setSoundPreference(value);
+    } catch (error) {
+      console.error('保存提示音设置失败:', error);
+    }
+  };
+
   const settings: NotificationSettingItem[] = [
     {
       key: 'push',
@@ -75,7 +91,7 @@ export const NotificationSettingsScreen: React.FC = () => {
       subtitle: '接收新消息、点赞、评论等推送',
       icon: 'bell-outline',
       value: pushEnabled,
-      onValueChange: setPushEnabled,
+      onValueChange: togglePush,
     },
     {
       key: 'vibration',
@@ -91,7 +107,7 @@ export const NotificationSettingsScreen: React.FC = () => {
       subtitle: '收到新消息时播放提示音',
       icon: 'volume-high',
       value: soundEnabled,
-      onValueChange: setSoundEnabled,
+      onValueChange: toggleSound,
     },
   ];