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,
   },
 });