chore: remove IDE config files and improve web platform compatibility

- Remove `.idea/` IntelliJ configuration files from version control - Add web-specific touch handling for swipeable message bubbles and schedule screen - Fix CSS touch-action rules for better web scrolling behavior - Add nestedScrollEnabled to ScrollViews for proper gesture handling - Improve null safety checks in profile screens - Add horizontal ScrollView wrapper for notification filter tags - Add hasHeader prop support for embedded profile screens
2026-04-14 02:12:53 +08:00
parent 57d7c7405c
commit c00b915e5f
18 changed files with 262 additions and 583 deletions
--- a/src/components/common/ImageGallery.tsx
+++ b/src/components/common/ImageGallery.tsx
@@ -361,7 +361,7 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
      onRequestClose={requestClose}
      statusBarTranslucent
    >
-      <GestureHandlerRootView style={styles.root}>
+      <GestureHandlerRootView style={styles.root} data-image-viewer="true">
        <View style={[styles.container, { backgroundColor: `rgba(0, 0, 0, ${backgroundOpacity})` }]}>
          {/* 顶部控制栏 */}
          {showControls && (
--- a/src/screens/home/HomeScreen.tsx
+++ b/src/screens/home/HomeScreen.tsx
@@ -676,6 +676,7 @@ export const HomeScreen: React.FC = () => {
          ref={capsuleHScrollRef}
          horizontal
          showsHorizontalScrollIndicator={false}
+          nestedScrollEnabled
          contentContainerStyle={styles.capsuleList}
          onScroll={onCapsuleHorizontalScroll}
          scrollEventThrottle={16}
--- a/src/screens/home/PostDetailScreen.tsx
+++ b/src/screens/home/PostDetailScreen.tsx
@@ -1182,7 +1182,7 @@ export const PostDetailScreen: React.FC = () => {
            )}
          </View>

-          {currentUser?.id === post.author?.id && (
+          {!!currentUser && currentUser.id === post.author?.id && (
            <View style={styles.metaActions}>
              <TouchableOpacity
                style={styles.editButtonInline}
@@ -1214,8 +1214,8 @@ export const PostDetailScreen: React.FC = () => {
              </TouchableOpacity>
            </View>
          )}
-          {/* 举报按钮 - 只对非帖子作者显示 */}
-          {currentUser?.id !== post.author?.id && (
+          {/* 举报按钮 - 只对已登录且非帖子作者显示 */}
+          {!!currentUser && currentUser.id !== post.author?.id && (
            <TouchableOpacity
              style={styles.reportButtonInline}
              onPress={() => {
--- a/src/screens/message/ChatScreen.tsx
+++ b/src/screens/message/ChatScreen.tsx
@@ -415,7 +415,7 @@ export const ChatScreen: React.FC<ChatScreenProps> = (props) => {
  return (
    <SafeAreaView style={containerStyle} edges={props.isEmbedded ? [] : ['top']}>
      <KeyboardAvoidingView
-        style={[styles.container, { overflow: 'hidden' }]}
+        style={[styles.container, Platform.OS !== 'web' && { overflow: 'hidden' }]}
        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
        keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 0}
      >
--- a/src/screens/message/NotificationsScreen.tsx
+++ b/src/screens/message/NotificationsScreen.tsx
@@ -23,6 +23,7 @@ import {
  BackHandler,
  Animated,
  StatusBar,
+  ScrollView,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useIsFocused } from '@react-navigation/native';
@@ -444,6 +445,11 @@ export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack
            {renderHeader()}
            {/* 分类筛选 */}
              <View style={[styles.filterContainer, isWideScreen && styles.filterContainerWideWeb]}>
+              <ScrollView
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                contentContainerStyle={styles.filterList}
+              >
              {MESSAGE_TYPES.map(type => {
                const count = type.key === 'all'
                  ? displayMessages.length
@@ -469,9 +475,7 @@ export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack
                    activeOpacity={0.8}
                  >
                    <Text
-                      variant="body"
-                      color={isActive ? colors.text.inverse : colors.text.secondary}
-                      style={isActive ? styles.filterTagTextActive : undefined}
+                      style={isActive ? { ...styles.filterTagText, ...styles.filterTagTextActive } : styles.filterTagText}
                    >
                      {type.title}
                    </Text>
@@ -479,7 +483,7 @@ export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack
                      <View style={[styles.filterCount, isActive && styles.filterCountActive]}>
                        <Text
                          variant="caption"
-                          color={isActive ? colors.text.inverse : colors.text.hint}
+                          color={isActive ? colors.primary.main : colors.text.hint}
                        >
                          {count}
                        </Text>
@@ -488,6 +492,7 @@ export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack
                  </TouchableOpacity>
                );
              })}
+            </ScrollView>
            </View>

            {/* 消息列表 */}
@@ -526,6 +531,11 @@ export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack
            {renderHeader()}
            {/* 分类筛选 */}
            <View style={styles.filterContainer}>
+              <ScrollView
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                contentContainerStyle={styles.filterList}
+              >
              {MESSAGE_TYPES.map(type => {
                const count = type.key === 'all'
                  ? displayMessages.length
@@ -550,9 +560,7 @@ export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack
                    activeOpacity={0.8}
                  >
                    <Text
-                      variant="body"
-                      color={isActive ? colors.text.inverse : colors.text.secondary}
-                      style={isActive ? styles.filterTagTextActive : undefined}
+                      style={isActive ? { ...styles.filterTagText, ...styles.filterTagTextActive } : styles.filterTagText}
                    >
                      {type.title}
                    </Text>
@@ -560,7 +568,7 @@ export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack
                      <View style={[styles.filterCount, isActive && styles.filterCountActive]}>
                        <Text
                          variant="caption"
-                          color={isActive ? colors.text.inverse : colors.text.hint}
+                          color={isActive ? colors.primary.main : colors.text.hint}
                        >
                          {count}
                        </Text>
@@ -569,6 +577,7 @@ export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack
                  </TouchableOpacity>
                );
              })}
+            </ScrollView>
            </View>

            {/* 消息列表 */}
@@ -677,52 +686,51 @@ function createNotificationsStyles(colors: AppColors) {
    },
    // 分类筛选 - 扁平化风格（分段式设计）
    filterContainer: {
-      flexDirection: 'row',
-      paddingHorizontal: 16,
-      paddingVertical: 12,
      backgroundColor: colors.background.paper,
      borderBottomWidth: 1,
      borderBottomColor: colors.divider || '#E5E5EA',
    },
    filterContainerWideWeb: {
-      paddingHorizontal: 32,
-      paddingVertical: 16,
-      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    filterList: {
+      paddingVertical: spacing.md,
+      gap: spacing.xs,
+      paddingLeft: spacing.lg,
+      paddingRight: spacing.lg,
    },
    filterTag: {
      flexDirection: 'row',
      alignItems: 'center',
-      paddingHorizontal: 14,
-      paddingVertical: 8,
-      marginRight: 8,
-      borderRadius: 14,
-      backgroundColor: colors.background.default,
-      borderWidth: 1,
-      borderColor: 'transparent',
+      paddingHorizontal: spacing.md,
+      paddingVertical: spacing.xs,
+      borderRadius: borderRadius.full,
    },
    filterTagWide: {
-      paddingHorizontal: 18,
-      paddingVertical: 10,
-      marginRight: 10,
+      paddingHorizontal: spacing.lg,
+      paddingVertical: spacing.sm,
    },
    filterTagActive: {
-      backgroundColor: colors.primary.main,
-      borderColor: colors.primary.main,
+    },
+    filterTagText: {
+      fontSize: 13,
+      fontWeight: '600',
+      color: colors.text.secondary,
    },
    filterTagTextActive: {
-      fontWeight: '600',
+      color: colors.primary.main,
    },
    filterCount: {
-      marginLeft: 6,
-      backgroundColor: colors.primary.light + '40',
-      paddingHorizontal: 6,
+      marginLeft: spacing.xs,
+      backgroundColor: colors.background.default,
+      paddingHorizontal: spacing.xs,
      paddingVertical: 1,
-      borderRadius: 8,
+      borderRadius: borderRadius.full,
      minWidth: 18,
      alignItems: 'center',
    },
    filterCountActive: {
-      backgroundColor: 'rgba(255, 255, 255, 0.25)',
+      backgroundColor: colors.primary.light + '30',
    },
    listContent: {
      flexGrow: 1,
--- a/src/screens/message/components/ChatScreen/SwipeableMessageBubble.tsx
+++ b/src/screens/message/components/ChatScreen/SwipeableMessageBubble.tsx
@@ -4,13 +4,12 @@
 */

 import React, { useRef, useCallback } from 'react';
-import { View, StyleSheet, Animated } from 'react-native';
+import { View, StyleSheet, Animated, Platform } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { PanGestureHandler, State } from 'react-native-gesture-handler';
 import * as Haptics from 'expo-haptics';
 import { useAppColors } from '../../../../theme';

-// 滑动阈值
 const SWIPE_THRESHOLD = 30;
 const MAX_SWIPE_DISTANCE = 50;

@@ -31,45 +30,39 @@ export const SwipeableMessageBubble: React.FC<SwipeableMessageBubbleProps> = ({
  const translateX = useRef(new Animated.Value(0)).current;
  const hasTriggeredRef = useRef(false);

-  // 处理手势事件 - 使用原生驱动，不干预值
  const onGestureEvent = Animated.event(
    [{ nativeEvent: { translationX: translateX } }],
    { useNativeDriver: true }
  );

-  // 处理手势状态变化
  const onHandlerStateChange = useCallback((event: any) => {
    const { nativeEvent } = event;
    
    if (nativeEvent.state === State.END) {
      const translationX = nativeEvent.translationX;
      
-      // 只允许特定方向的滑动
      const shouldTrigger = isMe 
-        ? translationX < -SWIPE_THRESHOLD  // 自己消息只能向左滑
-        : translationX > SWIPE_THRESHOLD;  // 对方消息只能向右滑
+        ? translationX < -SWIPE_THRESHOLD
+        : translationX > SWIPE_THRESHOLD;
      
      if (shouldTrigger && !hasTriggeredRef.current) {
        hasTriggeredRef.current = true;
        
-        // 触觉反馈
-        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        if (Platform.OS !== 'web') {
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        }
        
-        // 立即触发回复
        onReply();
        
-        // 重置标记
        setTimeout(() => {
          hasTriggeredRef.current = false;
        }, 300);
      }
      
-      // 立即回到原位
      translateX.setValue(0);
    }
  }, [isMe, onReply]);

-  // 计算回复图标的透明度 - 只在允许的方向显示
  const iconOpacity = translateX.interpolate({
    inputRange: isMe 
      ? [-MAX_SWIPE_DISTANCE, -SWIPE_THRESHOLD, 0, 10] 
@@ -78,7 +71,6 @@ export const SwipeableMessageBubble: React.FC<SwipeableMessageBubbleProps> = ({
    extrapolate: 'clamp',
  });

-  // 计算消息的位移 - 限制在允许的方向
  const clampedTranslateX = translateX.interpolate({
    inputRange: isMe 
      ? [-MAX_SWIPE_DISTANCE - 10, -MAX_SWIPE_DISTANCE, 0, 10] 
@@ -89,21 +81,117 @@ export const SwipeableMessageBubble: React.FC<SwipeableMessageBubbleProps> = ({
    extrapolate: 'clamp',
  });

-  // 如果禁用手势，直接返回子元素
+  const webTouchStartRef = useRef<{ x: number; time: number } | null>(null);
+  const webTranslateXRef = useRef(new Animated.Value(0)).current;
+  const webIconOpacity = webTranslateXRef.interpolate({
+    inputRange: isMe 
+      ? [-MAX_SWIPE_DISTANCE, -SWIPE_THRESHOLD, 0, 10] 
+      : [-10, 0, SWIPE_THRESHOLD, MAX_SWIPE_DISTANCE],
+    outputRange: isMe ? [1, 0.8, 0, 0] : [0, 0, 0.8, 1],
+    extrapolate: 'clamp',
+  });
+  const webClampedTranslateX = webTranslateXRef.interpolate({
+    inputRange: isMe 
+      ? [-MAX_SWIPE_DISTANCE - 10, -MAX_SWIPE_DISTANCE, 0, 10] 
+      : [-10, 0, MAX_SWIPE_DISTANCE, MAX_SWIPE_DISTANCE + 10],
+    outputRange: isMe 
+      ? [-MAX_SWIPE_DISTANCE, -MAX_SWIPE_DISTANCE, 0, 0] 
+      : [0, 0, MAX_SWIPE_DISTANCE, MAX_SWIPE_DISTANCE],
+    extrapolate: 'clamp',
+  });
+  const webLastTouchRef = useRef<{ x: number } | null>(null);
+
+  const handleWebTouchStart = useCallback((e: any) => {
+    const touch = e.nativeEvent?.touches?.[0] || e.nativeEvent;
+    if (touch && touch.pageX !== undefined) {
+      webTouchStartRef.current = { x: touch.pageX, time: Date.now() };
+      webLastTouchRef.current = { x: touch.pageX };
+    }
+  }, []);
+
+  const handleWebTouchMove = useCallback((e: any) => {
+    const start = webTouchStartRef.current;
+    if (!start) return;
+    const touch = e.nativeEvent?.touches?.[0] || e.nativeEvent;
+    if (!touch || touch.pageX === undefined) return;
+    const dx = touch.pageX - start.x;
+    const allowed = isMe ? dx < 5 : dx > -5;
+    if (allowed) {
+      webTranslateXRef.setValue(dx);
+      webLastTouchRef.current = { x: touch.pageX };
+    }
+  }, [isMe]);
+
+  const handleWebTouchEnd = useCallback((e: any) => {
+    const start = webTouchStartRef.current;
+    if (!start) return;
+    webTouchStartRef.current = null;
+    const touch = e.nativeEvent?.changedTouches?.[0] || e.nativeEvent;
+    if (!touch || touch.pageX === undefined) {
+      Animated.spring(webTranslateXRef, { toValue: 0, useNativeDriver: true }).start();
+      return;
+    }
+    const dx = touch.pageX - start.x;
+    const shouldTrigger = isMe 
+      ? dx < -SWIPE_THRESHOLD
+      : dx > SWIPE_THRESHOLD;
+    
+    if (shouldTrigger && !hasTriggeredRef.current) {
+      hasTriggeredRef.current = true;
+      onReply();
+      setTimeout(() => {
+        hasTriggeredRef.current = false;
+      }, 300);
+    }
+    
+    Animated.spring(webTranslateXRef, { toValue: 0, useNativeDriver: true }).start();
+  }, [isMe, onReply]);
+
  if (!enabled) {
    return <>{children}</>;
  }

+  if (Platform.OS === 'web') {
+    return (
+      <View style={styles.container}>
+        <Animated.View
+          style={[
+            styles.replyIconContainer,
+            isMe ? styles.replyIconLeft : styles.replyIconRight,
+            { opacity: webIconOpacity },
+          ]}
+        >
+          <MaterialCommunityIcons
+            name="reply"
+            size={20}
+            color={colors.primary.main}
+          />
+        </Animated.View>
+        <View
+          data-gesture-area={true}
+          onTouchStart={handleWebTouchStart}
+          onTouchMove={handleWebTouchMove}
+          onTouchEnd={handleWebTouchEnd}
+        >
+          <Animated.View
+            style={{
+              transform: [{ translateX: webClampedTranslateX }],
+            }}
+          >
+            {children}
+          </Animated.View>
+        </View>
+      </View>
+    );
+  }
+
  return (
    <View style={styles.container}>
-      {/* 回复图标 - 在消息后面 */}
      <Animated.View
        style={[
          styles.replyIconContainer,
          isMe ? styles.replyIconLeft : styles.replyIconRight,
-          {
-            opacity: iconOpacity,
-          },
+          { opacity: iconOpacity },
        ]}
      >
        <MaterialCommunityIcons
@@ -112,8 +200,6 @@ export const SwipeableMessageBubble: React.FC<SwipeableMessageBubbleProps> = ({
          color={colors.primary.main}
        />
      </Animated.View>
-      
-      {/* 可滑动的消息内容 */}
      <PanGestureHandler
        onGestureEvent={onGestureEvent}
        onHandlerStateChange={onHandlerStateChange}
--- a/src/screens/profile/EditProfileScreen.tsx
+++ b/src/screens/profile/EditProfileScreen.tsx
@@ -586,10 +586,10 @@ export const EditProfileScreen: React.FC = () => {
          {/* 用户名和简介 */}
          <View style={styles.userInfo}>
            <Text variant="h2" style={styles.nickname}>
-              {nickname || currentUser?.nickname}
+              {nickname || currentUser?.nickname || ''}
            </Text>
            <Text variant="caption" color={colors.text.secondary} style={styles.username}>
-              @{currentUser?.username}
+              @{currentUser?.username || ''}
            </Text>

            {bio ? (
@@ -624,7 +624,7 @@ export const EditProfileScreen: React.FC = () => {
              <View style={styles.metaTag}>
                <MaterialCommunityIcons name="link-variant" size={12} color={colors.info.main} />
                <Text variant="caption" color={colors.info.main} style={styles.metaTagText}>
-                  {website.replace(/^https?:\/\//, '')}
+                  {typeof website === 'string' ? website.replace(/^https?:\/\//, '') : ''}
                </Text>
              </View>
            ) : (
@@ -638,7 +638,7 @@ export const EditProfileScreen: React.FC = () => {
            <View style={styles.metaTag}>
              <MaterialCommunityIcons name="calendar-outline" size={12} color={colors.text.secondary} />
              <Text variant="caption" color={colors.text.secondary} style={styles.metaTagText}>
-                加入于 {new Date(currentUser?.created_at || Date.now()).getFullYear()}年
+                {`加入于 ${new Date(currentUser?.created_at || Date.now()).getFullYear()}年`}
              </Text>
            </View>
          </View>
--- a/src/screens/profile/FollowListScreen.tsx
+++ b/src/screens/profile/FollowListScreen.tsx
@@ -186,7 +186,7 @@ const FollowListScreen: React.FC = () => {
            </Text>
          ) : null}
        </View>
-        {!isSelf && (
+        {isCurrentUser && !isSelf && (
          <Button
            title={buttonConfig.title}
            variant={buttonConfig.variant}
@@ -230,7 +230,7 @@ const FollowListScreen: React.FC = () => {
            </Text>
          ) : null}
        </View>
-        {!isSelf && (
+        {isCurrentUser && !isSelf && (
          <View style={styles.userCardFooter}>
            <Button
              title={buttonConfig.title}
@@ -278,7 +278,9 @@ const FollowListScreen: React.FC = () => {
        </View>
      </View>
      <Text variant="caption" color={colors.text.secondary} style={styles.headerSubtitle}>
-        {type === 'following' ? '你已关注的用户' : '关注你的用户'}
+        {type === 'following'
+          ? (isCurrentUser ? '你已关注的用户' : 'TA关注的用户')
+          : (isCurrentUser ? '关注你的用户' : 'TA的粉丝')}
      </Text>
    </View>
  );
@@ -298,7 +300,7 @@ const FollowListScreen: React.FC = () => {
  // 宽屏使用网格布局
  if (isWideScreen && columnCount > 1) {
    return (
-      <SafeAreaView style={styles.container} edges={['bottom']}>
+      <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
        <ResponsiveContainer maxWidth={1200}>
          <FlatList
            data={users}
@@ -333,7 +335,7 @@ const FollowListScreen: React.FC = () => {

  // 移动端使用列表布局
  return (
-    <SafeAreaView style={styles.container} edges={['bottom']}>
+    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
      <FlatList
        data={users}
        renderItem={renderUserListItem}
--- a/src/screens/profile/UserProfileScreen.tsx
+++ b/src/screens/profile/UserProfileScreen.tsx
@@ -21,10 +21,11 @@ import { useUserProfile, ProfileMode, TABS, TAB_ICONS, createSharedProfileStyles

 interface UserProfileScreenProps {
  mode: ProfileMode;
-  userId?: string; // 仅 other 模式需要
+  userId?: string;
+  hasHeader?: boolean;
 }

-export const UserProfileScreen: React.FC<UserProfileScreenProps> = ({ mode, userId }) => {
+export const UserProfileScreen: React.FC<UserProfileScreenProps> = ({ mode, userId, hasHeader = false }) => {
  const colors = useAppColors();
  const sharedStyles = useMemo(() => createSharedProfileStyles(colors), [colors]);
  const { isDesktop, isTablet } = useResponsive();
@@ -148,7 +149,7 @@ export const UserProfileScreen: React.FC<UserProfileScreenProps> = ({ mode, user
  // 未登录/用户不存在状态
  if (mode === 'self' && !currentUser) {
    return (
-      <SafeAreaView style={sharedStyles.container} edges={['top', 'bottom']}>
+      <SafeAreaView style={sharedStyles.container} edges={hasHeader ? ['bottom'] : ['top', 'bottom']}>
        <EmptyState
          title="未登录"
          description="请先登录"
@@ -170,10 +171,12 @@ export const UserProfileScreen: React.FC<UserProfileScreenProps> = ({ mode, user
    );
  }
  
+  const safeAreaEdges = hasHeader ? ['bottom'] : (mode === 'self' ? ['top', 'bottom'] : ['bottom']);
+  
  // 桌面端使用双栏布局
  if (isDesktop || isTablet) {
    return (
-      <SafeAreaView style={sharedStyles.container} edges={mode === 'self' ? ['top', 'bottom'] : ['bottom']}>
+      <SafeAreaView style={sharedStyles.container} edges={safeAreaEdges as any}>
        <ResponsiveContainer maxWidth={1400}>
          <View style={sharedStyles.desktopContainer}>
            {/* 左侧：用户信息 */}
@@ -211,7 +214,7 @@ export const UserProfileScreen: React.FC<UserProfileScreenProps> = ({ mode, user
  
  // 移动端使用单栏布局
  return (
-    <SafeAreaView style={sharedStyles.container} edges={mode === 'self' ? ['top', 'bottom'] : ['bottom']}>
+    <SafeAreaView style={sharedStyles.container} edges={safeAreaEdges as any}>
      <ScrollView
        showsVerticalScrollIndicator={false}
        refreshControl={
--- a/src/screens/profile/UserScreen.tsx
+++ b/src/screens/profile/UserScreen.tsx
@@ -19,6 +19,7 @@ export const UserScreen: React.FC = () => {
    <UserProfileScreen
      mode={isSelfProfile ? 'self' : 'other'}
      userId={isSelfProfile ? undefined : userId}
+      hasHeader
    />
  );
 };
--- a/src/screens/schedule/ScheduleScreen.tsx
+++ b/src/screens/schedule/ScheduleScreen.tsx
@@ -302,6 +302,30 @@ export const ScheduleScreen: React.FC = () => {
    [weeks.length]
  );

+  const webTouchStartRef = useRef<{ x: number; y: number; time: number } | null>(null);
+  const handleWebTouchStart = useCallback((e: any) => {
+    const touch = e.nativeEvent?.touches?.[0] || e.nativeEvent;
+    if (touch && touch.pageX !== undefined) {
+      webTouchStartRef.current = { x: touch.pageX, y: touch.pageY, time: Date.now() };
+    }
+  }, []);
+  const handleWebTouchEnd = useCallback((e: any) => {
+    const start = webTouchStartRef.current;
+    if (!start) return;
+    webTouchStartRef.current = null;
+    const touch = e.nativeEvent?.changedTouches?.[0] || e.nativeEvent;
+    if (!touch || touch.pageX === undefined) return;
+    const dx = touch.pageX - start.x;
+    const dy = touch.pageY - start.y;
+    if (Math.abs(dx) < SWIPE_THRESHOLD) return;
+    if (Math.abs(dx) <= Math.abs(dy) * 0.8) return;
+    if (dx < 0) {
+      setCurrentWeek(prev => Math.min(prev + 1, weeks.length));
+    } else {
+      setCurrentWeek(prev => Math.max(prev - 1, 1));
+    }
+  }, [weeks.length]);
+
  const isSlotOccupied = useCallback(
    (dayOfWeek: number, mergedSection: number, weekCourses: Course[]) => {
      return weekCourses.some(course => {
@@ -713,16 +737,20 @@ export const ScheduleScreen: React.FC = () => {

  // 渲染课程表主体
  const renderScheduleBody = () => {
-    // 移动端和电脑端都不添加额外底部间距，让内容填满整个区域
-    // 动态计算的高度已经确保第六节课显示在正确位置
-    
+    const gestureLayerProps = Platform.OS === 'web' 
+      ? {
+          onTouchStart: handleWebTouchStart,
+          onTouchEnd: handleWebTouchEnd,
+          'data-gesture-area': true,
+        }
+      : {};
+
    return (
-    <PanGestureHandler
-      activeOffsetX={[-8, 8]}
-      failOffsetY={[-80, 80]}
-      onHandlerStateChange={handleWeekSwipe}
-    >
-      <View style={styles.scheduleBodyGestureLayer}>
+    Platform.OS === 'web' ? (
+      <View 
+        style={styles.scheduleBodyGestureLayer}
+        {...gestureLayerProps}
+      >
        <ScrollView
          style={styles.scheduleBody}
          showsVerticalScrollIndicator={false}
@@ -732,6 +760,7 @@ export const ScheduleScreen: React.FC = () => {
          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
+            nestedScrollEnabled
            contentContainerStyle={{ flexGrow: 1 }}
          >
            <View style={styles.daysContainer}>
@@ -742,7 +771,35 @@ export const ScheduleScreen: React.FC = () => {
          </ScrollView>
        </ScrollView>
      </View>
-    </PanGestureHandler>
+    ) : (
+      <PanGestureHandler
+        activeOffsetX={[-8, 8]}
+        failOffsetY={[-80, 80]}
+        onHandlerStateChange={handleWeekSwipe}
+      >
+        <View style={styles.scheduleBodyGestureLayer}>
+          <ScrollView
+            style={styles.scheduleBody}
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={styles.scheduleBodyContent}
+          >
+            {renderTimeColumn()}
+            <ScrollView
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              nestedScrollEnabled
+              contentContainerStyle={{ flexGrow: 1 }}
+            >
+              <View style={styles.daysContainer}>
+                {VISIBLE_DAY_VALUES.map((dayOfWeek, index) =>
+                  renderDayColumn(dayOfWeek, index, index === VISIBLE_DAY_VALUES.length - 1)
+                )}
+              </View>
+            </ScrollView>
+          </ScrollView>
+        </View>
+      </PanGestureHandler>
+    )
    );
  };