feat: 同步dev分支并保留当前修改

2026-03-21 03:22:28 +08:00
parent 2c65330837
commit a8c78f0c3f
16 changed files with 461 additions and 128 deletions
--- a/src/screens/home/HomeScreen.tsx
+++ b/src/screens/home/HomeScreen.tsx
@@ -179,8 +179,9 @@ export const HomeScreen: React.FC = () => {
    if (!isMobile) {
      return undefined;
    }
-    // 往底部导航栏靠近一个按钮的位置
-    return insets.bottom + MOBILE_TAB_BAR_HEIGHT + MOBILE_TAB_FLOATING_MARGIN + MOBILE_FAB_GAP - MOBILE_TAB_BAR_HEIGHT;
+    // 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]);

  // 切换视图模式
@@ -375,6 +376,11 @@ export const HomeScreen: React.FC = () => {
    const columns: Post[][] = Array.from({ length: gridColumns }, () => []);
    const columnHeights: number[] = Array(gridColumns).fill(0);
    
+    // 防御性检查：确保 posts 存在且是数组
+    if (!posts || !Array.isArray(posts) || posts.length === 0) {
+      return columns;
+    }
+    
    // 计算单列宽度
    const totalGap = (gridColumns - 1) * responsiveGap;
    const columnWidth = (width - responsivePadding * 2 - totalGap) / gridColumns;
--- a/src/screens/message/MessageListScreen.tsx
+++ b/src/screens/message/MessageListScreen.tsx
@@ -249,10 +249,12 @@ export const MessageListScreen: React.FC = () => {
  }, [width]);

  // 给底部列表预留安全空间，避免被 TabBar 遮挡导致最后几项无法完整滑出
+  // TabBar 悬浮：高度 64 + 浮动间距 12*2 = 88
  const listBottomInset = useMemo(() => {
    if (isWideScreen) return spacing.lg;
-    return tabBarHeight + insets.bottom + spacing.md;
-  }, [isWideScreen, tabBarHeight, insets.bottom]);
+    const FLOATING_TAB_BAR_HEIGHT = 64 + 24; // TabBar高度 + 上下浮动间距
+    return FLOATING_TAB_BAR_HEIGHT + insets.bottom + spacing.md;
+  }, [isWideScreen, insets.bottom]);

  // 【新架构】页面获得焦点时初始化MessageManager
  useEffect(() => {
--- a/src/screens/message/NotificationsScreen.tsx
+++ b/src/screens/message/NotificationsScreen.tsx
@@ -5,7 +5,7 @@
 * 支持响应式布局
 */

-import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import React, { useState, useCallback, useEffect, useMemo, useRef } from 'react';
 import {
  View,
  FlatList,
@@ -20,7 +20,7 @@ import { useIsFocused } from '@react-navigation/native';
 import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { colors, spacing } from '../../theme';
+import { colors, spacing, borderRadius } from '../../theme';
 import { SystemMessageResponse } from '../../types/dto';
 import { messageService } from '../../services/messageService';
 import { commentService } from '../../services/commentService';
@@ -75,6 +75,17 @@ export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack
  const [unreadCount, setUnreadCount] = useState(0);

  // 【游标分页】使用 useCursorPagination hook 获取系统消息列表
+  // 使用 useCallback 包裹 fetchFunction，避免无限重新创建导致循环
+  const fetchSystemMessages = useCallback(
+    async ({ cursor, pageSize }: { cursor?: string; pageSize: number }) => {
+      return await messageService.getSystemMessagesCursor({
+        cursor,
+        page_size: pageSize,
+      });
+    },
+    []
+  );
+
  const {
    items: messages,
    isLoading,
@@ -83,15 +94,7 @@ export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack
    loadMore,
    refresh,
    error: paginationError,
-  } = useCursorPagination(
-    async ({ cursor, pageSize }) => {
-      return await messageService.getSystemMessagesCursor({
-        cursor,
-        page_size: pageSize,
-      });
-    },
-    { pageSize: 20 }
-  );
+  } = useCursorPagination(fetchSystemMessages, { pageSize: 20 });

  // 本地刷新状态（仅用于下拉刷新的UI显示）
  const [refreshing, setRefreshing] = useState(false);
@@ -161,13 +164,16 @@ export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack
  }, [refresh, fetchMessageUnreadCount, setSystemUnreadCount]);

  // 页面加载和获得焦点时刷新，并自动标记所有消息为已读
+  // 使用 ref 防止重复执行，避免无限循环
+  const hasInitializedRef = useRef(false);
  useEffect(() => {
-    if (isFocused) {
+    if (isFocused && !hasInitializedRef.current) {
+      hasInitializedRef.current = true;
      fetchUnreadCount();
      // 进入界面自动标记所有消息为已读
      handleMarkAllRead();
    }
-  }, [isFocused, fetchUnreadCount, handleMarkAllRead]);
+  }, [isFocused]); // 只依赖 isFocused，函数使用 ref 稳定引用

  // 屏幕失去焦点时，如果有 onBack 回调则调用它（用于内嵌模式）
  useEffect(() => {
@@ -328,8 +334,8 @@ export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack
    return (
      <View style={[styles.header, isWideScreen ? styles.headerWide : null]}>
        {shouldShowBackButton ? (
-          <TouchableOpacity 
-            style={styles.backButton} 
+          <TouchableOpacity
+            style={styles.backButton}
            onPress={onBack}
            activeOpacity={0.7}
          >
@@ -338,9 +344,16 @@ export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack
        ) : (
          <View style={styles.backButtonPlaceholder} />
        )}
-        <Text style={[styles.headerTitle, ...(isWideScreen ? [styles.headerTitleWide] : [])]}>
-          系统通知
-        </Text>
+        <View style={styles.headerTitleContainer}>
+          <Text style={[styles.headerTitle, ...(isWideScreen ? [styles.headerTitleWide] : [])]}>
+            系统通知
+          </Text>
+          {unreadCount > 0 && (
+            <View style={styles.unreadBadge}>
+              <Text style={styles.unreadBadgeText}>{unreadCount > 99 ? '99+' : unreadCount}</Text>
+            </View>
+          )}
+        </View>
        <View style={styles.backButtonPlaceholder} />
      </View>
    );
@@ -388,30 +401,34 @@ export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack
                    }
                    return m.system_type === type.key;
                  }).length;
+              const isActive = activeType === type.key;
              return (
                <TouchableOpacity
                  key={type.key}
                  style={[
                    styles.filterTag,
-                    activeType === type.key && styles.filterTagActive,
+                    isActive && styles.filterTagActive,
                    isWideScreen && styles.filterTagWide,
                  ]}
                  onPress={() => setActiveType(type.key)}
+                  activeOpacity={0.8}
                >
                  <Text
                    variant="body"
-                    color={activeType === type.key ? colors.primary.main : colors.text.secondary}
+                    color={isActive ? colors.text.inverse : colors.text.secondary}
+                    style={isActive ? styles.filterTagTextActive : undefined}
                  >
                    {type.title}
                  </Text>
                  {count > 0 && (
-                    <Text
-                      variant="caption"
-                      color={activeType === type.key ? colors.primary.main : colors.text.hint}
-                      style={styles.filterCount}
-                    >
-                      {count}
-                    </Text>
+                    <View style={[styles.filterCount, isActive && styles.filterCountActive]}>
+                      <Text
+                        variant="caption"
+                        color={isActive ? colors.text.inverse : colors.text.hint}
+                      >
+                        {count}
+                      </Text>
+                    </View>
                  )}
                </TouchableOpacity>
              );
@@ -463,29 +480,33 @@ export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack
                    }
                    return m.system_type === type.key;
                  }).length;
+              const isActive = activeType === type.key;
              return (
                <TouchableOpacity
                  key={type.key}
                  style={[
                    styles.filterTag,
-                    activeType === type.key && styles.filterTagActive,
+                    isActive && styles.filterTagActive,
                  ]}
                  onPress={() => setActiveType(type.key)}
+                  activeOpacity={0.8}
                >
                  <Text
                    variant="body"
-                    color={activeType === type.key ? colors.primary.main : colors.text.secondary}
+                    color={isActive ? colors.text.inverse : colors.text.secondary}
+                    style={isActive ? styles.filterTagTextActive : undefined}
                  >
                    {type.title}
                  </Text>
                  {count > 0 && (
-                    <Text
-                      variant="caption"
-                      color={activeType === type.key ? colors.primary.main : colors.text.hint}
-                      style={styles.filterCount}
-                    >
-                      {count}
-                    </Text>
+                    <View style={[styles.filterCount, isActive && styles.filterCountActive]}>
+                      <Text
+                        variant="caption"
+                        color={isActive ? colors.text.inverse : colors.text.hint}
+                      >
+                        {count}
+                      </Text>
+                    </View>
                  )}
                </TouchableOpacity>
              );
@@ -529,13 +550,70 @@ const styles = StyleSheet.create({
    flex: 1,
    backgroundColor: colors.background.default,
  },
+  // Header 样式 - 美化版
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.md,
+    backgroundColor: colors.background.paper,
+    // 移除底部边框，使用更柔和的分隔方式
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  headerWide: {
+    paddingHorizontal: spacing.xl,
+    paddingVertical: spacing.lg,
+  },
+  headerTitleContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: colors.text.primary,
+  },
+  headerTitleWide: {
+    fontSize: 20,
+  },
+  unreadBadge: {
+    backgroundColor: colors.primary.main,
+    borderRadius: 10,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    marginLeft: spacing.sm,
+    minWidth: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  unreadBadgeText: {
+    color: colors.text.inverse,
+    fontSize: 11,
+    fontWeight: '600',
+  },
+  backButton: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+  },
+  backButtonPlaceholder: {
+    width: 40,
+  },
+  // 分类筛选 - 美化版（使用分段式设计）
  filterContainer: {
    flexDirection: 'row',
-    paddingHorizontal: spacing.lg,
+    paddingHorizontal: spacing.md,
    paddingVertical: spacing.sm,
    backgroundColor: colors.background.paper,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.divider,
+    // 移除底部边框，让界面更简洁
  },
  filterContainerWideWeb: {
    paddingHorizontal: spacing.xl,
@@ -548,55 +626,36 @@ const styles = StyleSheet.create({
    alignItems: 'center',
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.sm,
-    marginRight: spacing.sm,
-    borderRadius: 16,
+    marginRight: spacing.xs,
+    borderRadius: borderRadius.lg,
    backgroundColor: colors.background.default,
  },
  filterTagWide: {
    paddingHorizontal: spacing.lg,
    paddingVertical: spacing.md,
-    marginRight: spacing.md,
+    marginRight: spacing.sm,
  },
  filterTagActive: {
-    backgroundColor: colors.primary.light + '30',
+    backgroundColor: colors.primary.main,
+  },
+  filterTagTextActive: {
+    fontWeight: '600',
  },
  filterCount: {
    marginLeft: spacing.xs,
-  },
-  // Header 样式
-  header: {
-    flexDirection: 'row',
+    backgroundColor: colors.primary.light + '40',
+    paddingHorizontal: 6,
+    paddingVertical: 1,
+    borderRadius: 8,
+    minWidth: 18,
    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: spacing.lg,
-    paddingVertical: spacing.md,
-    backgroundColor: colors.background.paper,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.divider,
  },
-  headerWide: {
-    paddingHorizontal: spacing.xl,
-    paddingVertical: spacing.lg,
-  },
-  backButton: {
-    width: 40,
-    height: 40,
-    justifyContent: 'center',
-    alignItems: 'flex-start',
-  },
-  backButtonPlaceholder: {
-    width: 40,
-  },
-  headerTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: colors.text.primary,
-  },
-  headerTitleWide: {
-    fontSize: 20,
+  filterCountActive: {
+    backgroundColor: 'rgba(255, 255, 255, 0.25)',
  },
  listContent: {
    flexGrow: 1,
+    paddingTop: spacing.sm,
  },
  listContentWide: {
    paddingHorizontal: spacing.xl,
--- a/src/screens/profile/AccountSecurityScreen.tsx
+++ b/src/screens/profile/AccountSecurityScreen.tsx
@@ -7,7 +7,7 @@ import {
  ActivityIndicator,
  ScrollView,
 } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { colors, spacing, fontSizes, borderRadius } from '../../theme';
 import { Text, ResponsiveContainer } from '../../components/common';
@@ -17,9 +17,13 @@ import { showPrompt } from '../../services/promptService';
 import { useAuthStore } from '../../stores';

 export const AccountSecurityScreen: React.FC = () => {
-  const { isWideScreen } = useResponsive();
+  const { isWideScreen, isMobile } = useResponsive();
+  const insets = useSafeAreaInsets();
  const currentUser = useAuthStore((state) => state.currentUser);
  const fetchCurrentUser = useAuthStore((state) => state.fetchCurrentUser);
+  
+  // 底部间距，避免被 TabBar 遮挡
+  const scrollBottomInset = isMobile ? 64 + 24 + insets.bottom + spacing.md : spacing.md;

  const [email, setEmail] = useState(currentUser?.email || '');
  const [verificationCode, setVerificationCode] = useState('');
@@ -330,10 +334,10 @@ export const AccountSecurityScreen: React.FC = () => {
    <SafeAreaView style={styles.container} edges={['bottom']}>
      {isWideScreen ? (
        <ResponsiveContainer maxWidth={800}>
-          <ScrollView contentContainerStyle={styles.scrollContent}>{content}</ScrollView>
+          <ScrollView contentContainerStyle={[styles.scrollContent, { paddingBottom: scrollBottomInset }]}>{content}</ScrollView>
        </ResponsiveContainer>
      ) : (
-        <ScrollView contentContainerStyle={styles.scrollContent}>{content}</ScrollView>
+        <ScrollView contentContainerStyle={[styles.scrollContent, { paddingBottom: scrollBottomInset }]}>{content}</ScrollView>
      )}
    </SafeAreaView>
  );
--- a/src/screens/profile/BlockedUsersScreen.tsx
+++ b/src/screens/profile/BlockedUsersScreen.tsx
@@ -8,7 +8,7 @@ import {
  View,
  Alert,
 } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { Avatar, Button, EmptyState, ResponsiveContainer, Text } from '../../components/common';
@@ -16,15 +16,21 @@ import { authService } from '../../services';
 import { colors, spacing, borderRadius, shadows } from '../../theme';
 import { User } from '../../types';
 import { RootStackParamList } from '../../navigation/types';
+import { useResponsive } from '../../hooks';

 type NavigationProp = NativeStackNavigationProp<RootStackParamList>;

 export const BlockedUsersScreen: React.FC = () => {
  const navigation = useNavigation<NavigationProp>();
+  const { isMobile } = useResponsive();
+  const insets = useSafeAreaInsets();
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [processingUserId, setProcessingUserId] = useState<string | null>(null);
+  
+  // 底部间距，避免被 TabBar 遮挡
+  const listBottomInset = isMobile ? 64 + 24 + insets.bottom + spacing.md : spacing.md;

  const loadBlockedUsers = useCallback(async () => {
    try {
@@ -115,7 +121,7 @@ export const BlockedUsersScreen: React.FC = () => {
          data={users}
          keyExtractor={item => item.id}
          renderItem={renderItem}
-          contentContainerStyle={[styles.listContent, users.length === 0 && styles.emptyContent]}
+          contentContainerStyle={[styles.listContent, users.length === 0 && styles.emptyContent, { paddingBottom: listBottomInset }]}
          refreshControl={
            <RefreshControl
              refreshing={refreshing}
--- a/src/screens/profile/EditProfileScreen.tsx
+++ b/src/screens/profile/EditProfileScreen.tsx
@@ -102,7 +102,8 @@ export const EditProfileScreen: React.FC = () => {
  const [uploadingAvatar, setUploadingAvatar] = useState(false);
  const [uploadingCover, setUploadingCover] = useState(false);
  const [saving, setSaving] = useState(false);
-  const bottomSafeDistance = isMobile ? insets.bottom + 92 : spacing.xl;
+  // 底部间距，避免被 TabBar 遮挡
+  const scrollBottomInset = isMobile ? 64 + 24 + insets.bottom + spacing.md : spacing.lg;

  // 根据屏幕宽度计算封面高度
  const coverHeight = isWideScreen ? Math.min((width * 9) / 16, 300) : (width * 9) / 16;
@@ -471,7 +472,7 @@ export const EditProfileScreen: React.FC = () => {
      </View>

      {/* 保存按钮 */}
-      <View style={[styles.buttonContainer, { marginBottom: bottomSafeDistance }]}>
+      <View style={[styles.buttonContainer, { marginBottom: scrollBottomInset }]}>
        <TouchableOpacity
          style={[
            styles.saveButton,
--- a/src/screens/profile/NotificationSettingsScreen.tsx
+++ b/src/screens/profile/NotificationSettingsScreen.tsx
@@ -11,7 +11,7 @@ import {
  Switch,
  ScrollView,
 } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+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';
@@ -34,7 +34,11 @@ export const NotificationSettingsScreen: React.FC = () => {
  const [vibrationEnabled, setVibrationEnabledState] = useState(true);
  const [pushEnabled, setPushEnabled] = useState(true);
  const [soundEnabled, setSoundEnabled] = useState(true);
-  const { isWideScreen } = useResponsive();
+  const { isWideScreen, isMobile } = useResponsive();
+  const insets = useSafeAreaInsets();
+  
+  // 底部间距，避免被 TabBar 遮挡
+  const scrollBottomInset = isMobile ? 64 + 24 + insets.bottom + spacing.md : spacing.md;

  // 加载设置
  useEffect(() => {
@@ -150,12 +154,12 @@ export const NotificationSettingsScreen: React.FC = () => {
    <SafeAreaView style={styles.container} edges={['bottom']}>
      {isWideScreen ? (
        <ResponsiveContainer maxWidth={800}>
-          <ScrollView contentContainerStyle={styles.scrollContent}>
+          <ScrollView contentContainerStyle={[styles.scrollContent, { paddingBottom: scrollBottomInset }]}>
            {renderContent()}
          </ScrollView>
        </ResponsiveContainer>
      ) : (
-        <ScrollView contentContainerStyle={styles.scrollContent}>
+        <ScrollView contentContainerStyle={[styles.scrollContent, { paddingBottom: scrollBottomInset }]}>
          {renderContent()}
        </ScrollView>
      )}
--- a/src/screens/profile/ProfileScreen.tsx
+++ b/src/screens/profile/ProfileScreen.tsx
@@ -55,10 +55,12 @@ export const ProfileScreen: React.FC = () => {
  const { isDesktop, isTablet, width } = useResponsive();

  // 页面滚动底部安全间距，避免内容被底部 TabBar 遮挡
+  // TabBar 悬浮：高度 64 + 浮动间距 12*2 = 88
  const scrollBottomInset = useMemo(() => {
    if (isDesktop) return spacing.lg;
-    return tabBarHeight + insets.bottom + spacing.md;
-  }, [isDesktop, tabBarHeight, insets.bottom]);
+    const FLOATING_TAB_BAR_HEIGHT = 64 + 24; // TabBar高度 + 上下浮动间距
+    return FLOATING_TAB_BAR_HEIGHT + insets.bottom + spacing.md;
+  }, [isDesktop, insets.bottom]);
  
  const [activeTab, setActiveTab] = useState(0);
  const [posts, setPosts] = useState<Post[]>([]);
--- a/src/screens/profile/SettingsScreen.tsx
+++ b/src/screens/profile/SettingsScreen.tsx
@@ -20,6 +20,7 @@ import { colors, spacing, fontSizes, borderRadius } from '../../theme';
 import { useAuthStore } from '../../stores';
 import { Text, ResponsiveContainer } from '../../components/common';
 import { useResponsive } from '../../hooks';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';

 interface SettingsItem {
  key: string;
@@ -67,6 +68,11 @@ export const SettingsScreen: React.FC = () => {
  const navigation = useNavigation();
  const { logout } = useAuthStore();
  const { isWideScreen } = useResponsive();
+  const insets = useSafeAreaInsets();
+  const { isMobile } = useResponsive();
+  
+  // 底部间距，避免被 TabBar 遮挡
+  const scrollBottomInset = isMobile ? 64 + 24 + insets.bottom + spacing.md : spacing.md;

  // 处理设置项点击
  const handleItemPress = (key: string) => {
@@ -200,12 +206,12 @@ export const SettingsScreen: React.FC = () => {
    <SafeAreaView style={styles.container} edges={['bottom']}>
      {isWideScreen ? (
        <ResponsiveContainer maxWidth={800}>
-          <ScrollView contentContainerStyle={styles.scrollContent}>
+          <ScrollView contentContainerStyle={[styles.scrollContent, { paddingBottom: scrollBottomInset }]}>
            {renderContent()}
          </ScrollView>
        </ResponsiveContainer>
      ) : (
-        <ScrollView contentContainerStyle={styles.scrollContent}>
+        <ScrollView contentContainerStyle={[styles.scrollContent, { paddingBottom: scrollBottomInset }]}>
          {renderContent()}
        </ScrollView>
      )}
--- a/src/screens/schedule/ScheduleScreen.tsx
+++ b/src/screens/schedule/ScheduleScreen.tsx
@@ -19,7 +19,7 @@ import {
 } from 'react-native';
 import { PanGestureHandler, State } from 'react-native-gesture-handler';
 import type { PanGestureHandlerStateChangeEvent } from 'react-native-gesture-handler';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { useFocusEffect, useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
@@ -50,8 +50,8 @@ const DEFAULT_SECTION_HEIGHT = 105;
 const WEEK_SELECTOR_HEIGHT = 44;
 // 星期标题行高度
 const HEADER_HEIGHT = 40;
-// 底部Tab栏高度（用于避让）
-const TAB_BAR_HEIGHT = 80;
+// 悬浮TabBar高度（TabBar高度64 + 浮动间距12*2 = 88）
+const FLOATING_TAB_BAR_HEIGHT = 88;

 // 大节时间配置（左侧显示 1-6）
 const GROUPED_TIME_SLOTS: TimeSlot[] = [
@@ -150,6 +150,7 @@ export const ScheduleScreen: React.FC = () => {
  const navigation = useNavigation<NativeStackNavigationProp<ScheduleStackParamList>>();
  // 使用响应式 hook 检测屏幕尺寸
  const { width: screenWidth, height: screenHeight, isMobile, platform } = useResponsive();
+  const insets = useSafeAreaInsets();
  const isWeb = platform.isWeb;
  const [currentWeek, setCurrentWeek] = useState(INITIAL_WEEK);
  const [courses, setCourses] = useState<Course[]>([]);
@@ -166,18 +167,19 @@ export const ScheduleScreen: React.FC = () => {
  }, [screenWidth, isWeb]);
  
  // 动态计算每节课的高度
-  // 手机端：第六节课底部刚好跟底部导航栏持平（可用高度 = 屏幕高度 - 周选择器 - 星期标题 - 底部Tab栏）
+  // 手机端：第六节课底部刚好在悬浮TabBar上方（可用高度 = 屏幕高度 - 周选择器 - 星期标题 - 悬浮TabBar - 安全区域）
  // 电脑端：第六节课刚好填到底部（可用高度 = 屏幕高度 - 周选择器 - 星期标题）
  const sectionHeight = useMemo((): number => {
    const totalHeaderHeight = WEEK_SELECTOR_HEIGHT + HEADER_HEIGHT;
-    const bottomOffset = isMobile ? TAB_BAR_HEIGHT : 0;
+    // 悬浮TabBar高度 + 安全区域底部
+    const bottomOffset = isMobile ? FLOATING_TAB_BAR_HEIGHT + insets.bottom : 0;
    // 可用高度 = 屏幕高度 - 顶部区域 - 底部偏移
    const availableHeight = screenHeight - totalHeaderHeight - bottomOffset;
    // 6节课，每节课高度 = 可用高度 / 6
    const calculatedHeight = Math.floor(availableHeight / 6);
    // 确保高度不低于默认值
    return Math.max(DEFAULT_SECTION_HEIGHT, calculatedHeight);
-  }, [screenHeight, isMobile]);
+  }, [screenHeight, isMobile, insets.bottom]);
  const [isAddModalVisible, setIsAddModalVisible] = useState(false);
  const [pendingDay, setPendingDay] = useState<number>(0);
  const [pendingMergedSection, setPendingMergedSection] = useState<number>(1);
@@ -718,7 +720,7 @@ export const ScheduleScreen: React.FC = () => {
  };

  return (
-    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
+    <SafeAreaView style={styles.container} edges={['top']}>
      <StatusBar barStyle="light-content" backgroundColor={colors.primary.main} />

      {/* 周选择器 */}