Merge remote-tracking branch 'origin/master' into feature/adap-pc

2026-03-16 19:27:05 +08:00
parent cb2087f779 eb24a3bbdf
commit 582589d252
10 changed files with 679 additions and 79 deletions
--- a/src/components/business/PostCard.tsx
+++ b/src/components/business/PostCard.tsx
@@ -20,6 +20,7 @@ import Avatar from '../common/Avatar';
 import { ImageGrid, ImageGridItem, SmartImage } from '../common';
 import VotePreview from './VotePreview';
 import { useResponsive, useResponsiveValue } from '../../hooks/useResponsive';
+import { getPreviewImageUrl, ImageDisplayMode } from '../../utils/imageHelper';

 interface PostCardProps {
  post: Post;
@@ -206,6 +207,8 @@ const PostCard: React.FC<PostCardProps> = ({
      id: img.id,
      url: img.url,
      thumbnail_url: img.thumbnail_url,
+      preview_url: img.preview_url,
+      preview_url_large: img.preview_url_large,
      width: img.width,
      height: img.height,
    }));
@@ -224,6 +227,8 @@ const PostCard: React.FC<PostCardProps> = ({
          borderRadius={imageBorderRadius}
          showMoreOverlay={true}
          onImagePress={onImagePress}
+          displayMode={variant === 'grid' ? 'grid' : 'list'}
+          usePreview={true}
        />
      </View>
    );
@@ -335,6 +340,11 @@ const PostCard: React.FC<PostCardProps> = ({
    const aspectRatios = [0.7, 0.75, 0.8, 0.85, 0.9, 1, 1.1, 1.2];
    const aspectRatio = aspectRatios[hash % aspectRatios.length];

+    // 获取封面图预览 URL
+    const coverUrl = hasImage
+      ? getPreviewImageUrl(coverImage, 'grid')
+      : '';
+
    // 获取正文预览（无图时显示）
    const getContentPreview = (content: string | undefined | null): string => {
      if (!content) return '';
@@ -369,9 +379,10 @@ const PostCard: React.FC<PostCardProps> = ({
            onPress={() => onImagePress?.(post.images || [], 0)}
          >
            <SmartImage
-              source={{ uri: coverImage.thumbnail_url || coverImage.url || '' }}
+              source={{ uri: coverUrl }}
              style={[styles.gridCoverImage, { aspectRatio }]}
              resizeMode="cover"
+              usePreview={true}
            />
          </TouchableOpacity>
        )}
--- a/src/components/common/ImageGrid.tsx
+++ b/src/components/common/ImageGrid.tsx
@@ -2,6 +2,7 @@
 * ImageGrid 图片网格组件
 * 支持 1-9 张图片的智能布局
 * 根据图片数量自动选择最佳展示方式
+ * 支持预览图优化
 */

 import React, { useMemo, useCallback, useState, useEffect } from 'react';
@@ -16,6 +17,7 @@ import {
 } from 'react-native';
 import { SmartImage, ImageSource } from './SmartImage';
 import { colors, spacing, borderRadius } from '../../theme';
+import { getPreviewImageUrl, ImageDisplayMode } from '../../utils/imageHelper';

 const { width: SCREEN_WIDTH } = Dimensions.get('window');

@@ -69,6 +71,10 @@ export interface ImageGridProps {
  onImagePress?: (images: ImageGridItem[], index: number) => void;
  /** 测试ID */
  testID?: string;
+  /** 显示模式 */
+  displayMode?: ImageDisplayMode;
+  /** 是否使用预览图 */
+  usePreview?: boolean;
 }

 /**
@@ -201,6 +207,7 @@ const SingleImageItem: React.FC<SingleImageItemProps> = ({
 /**
 * 图片网格组件
 * 智能布局：根据图片数量自动选择最佳展示方式
+ * 支持预览图优化
 */
 export const ImageGrid: React.FC<ImageGridProps> = ({
  images,
@@ -214,6 +221,8 @@ export const ImageGrid: React.FC<ImageGridProps> = ({
  gridColumns = 3,
  onImagePress,
  testID,
+  displayMode = 'list',
+  usePreview = true,
 }) => {
  // 通过 onLayout 拿到容器实际宽度
  const [containerWidth, setContainerWidth] = useState(0);
@@ -256,6 +265,12 @@ export const ImageGrid: React.FC<ImageGridProps> = ({
  const renderSingleImage = () => {
    const image = displayImages[0];
    if (!image) return null;
+    
+    // 获取预览图 URL
+    const previewUrl = usePreview && displayMode
+      ? getPreviewImageUrl(image as any, displayMode)
+      : (image.uri || image.url || '');
+    
    return (
      <SingleImageItem
        image={image}
@@ -271,27 +286,33 @@ export const ImageGrid: React.FC<ImageGridProps> = ({
  const renderHorizontal = () => {
    return (
      <View style={[styles.horizontalContainer, { gap }]}>
-        {displayImages.map((image, index) => (
-          <Pressable
-            key={image.id || index}
-            onPress={() => handleImagePress(index)}
-            style={[
-              styles.horizontalItem,
-              {
-                flex: 1,
-                aspectRatio: 1,
-                borderRadius: borderRadiusValue,
-              },
-            ]}
-          >
-            <SmartImage
-              source={{ uri: image.uri || image.url, width: image.width, height: image.height }}
-              style={styles.fullSize}
-              resizeMode="cover"
-              borderRadius={borderRadiusValue}
-            />
-          </Pressable>
-        ))}
+        {displayImages.map((image, index) => {
+          const previewUrl = usePreview && displayMode
+            ? getPreviewImageUrl(image as any, displayMode)
+            : (image.uri || image.url || '');
+          
+          return (
+            <Pressable
+              key={image.id || index}
+              onPress={() => handleImagePress(index)}
+              style={[
+                styles.horizontalItem,
+                {
+                  flex: 1,
+                  aspectRatio: 1,
+                  borderRadius: borderRadiusValue,
+                },
+              ]}
+            >
+              <SmartImage
+                source={{ uri: previewUrl }}
+                style={styles.fullSize}
+                resizeMode="cover"
+                borderRadius={borderRadiusValue}
+              />
+            </Pressable>
+          );
+        })}
      </View>
    );
  };
@@ -303,6 +324,10 @@ export const ImageGrid: React.FC<ImageGridProps> = ({
        {displayImages.map((image, index) => {
          const isLastVisible = index === displayImages.length - 1;
          const showOverlay = isLastVisible && remainingCount > 0 && showMoreOverlay;
+          
+          const previewUrl = usePreview && displayMode
+            ? getPreviewImageUrl(image as any, displayMode)
+            : (image.uri || image.url || '');

          return (
            <Pressable
@@ -317,7 +342,7 @@ export const ImageGrid: React.FC<ImageGridProps> = ({
              ]}
            >
              <SmartImage
-                source={{ uri: image.uri || image.url, width: image.width, height: image.height }}
+                source={{ uri: previewUrl }}
                style={styles.fullSize}
                resizeMode="cover"
                borderRadius={borderRadiusValue}
@@ -361,6 +386,10 @@ export const ImageGrid: React.FC<ImageGridProps> = ({
              ? image.width / image.height
              : 1;
            const height = itemWidth / aspectRatio;
+            
+            const previewUrl = usePreview && displayMode
+              ? getPreviewImageUrl(image as any, displayMode)
+              : (image.uri || image.url || '');

            return (
              <Pressable
@@ -376,7 +405,7 @@ export const ImageGrid: React.FC<ImageGridProps> = ({
                ]}
              >
                <SmartImage
-                  source={{ uri: image.uri || image.url, width: image.width, height: image.height }}
+                  source={{ uri: previewUrl }}
                  style={styles.fullSize}
                  resizeMode="cover"
                  borderRadius={borderRadiusValue}
--- a/src/components/common/SmartImage.tsx
+++ b/src/components/common/SmartImage.tsx
@@ -4,7 +4,7 @@
 * 基于 expo-image 封装，原生支持 GIF/WebP 动图
 */

-import React, { useState, useCallback, useRef } from 'react';
+import React, { useState, useCallback, useRef, useEffect } from 'react';
 import {
  View,
  StyleSheet,
@@ -55,6 +55,14 @@ export interface SmartImageProps {
  onError?: (error: any) => void;
  /** 测试ID */
  testID?: string;
+  /** 预览图 URL */
+  previewUrl?: string;
+  /** 是否使用预览图（优先加载预览图） */
+  usePreview?: boolean;
+  /** 是否懒加载 */
+  lazyLoad?: boolean;
+  /** 缓存策略 */
+  cachePolicy?: 'memory' | 'disk' | 'memory-disk' | 'none';
 }

 /**
@@ -74,14 +82,33 @@ export const SmartImage: React.FC<SmartImageProps> = ({
  onLoad,
  onError,
  testID,
+  previewUrl,
+  usePreview = false,
+  lazyLoad = false,
+  cachePolicy = 'memory-disk',
 }) => {
  const [loadState, setLoadState] = useState<ImageLoadState>('loading');
+  const [isVisible, setIsVisible] = useState(!lazyLoad);
+  const [shouldLoadOriginal, setShouldLoadOriginal] = useState(false);

  // 解析图片源 - 支持 uri 或 url 字段
-  const imageUri = typeof source === 'string' 
-    ? source 
+  const imageUri = typeof source === 'string'
+    ? source
    : (source.uri || source.url || '');

+  // 解析预览图 URL
+  const previewUri = typeof previewUrl === 'string' ? previewUrl : '';
+
+  // 智能选择图片 URL
+  const getImageUrl = useCallback((): string => {
+    // 如果应该加载原图（预览图已加载完成或没有预览图）
+    if (shouldLoadOriginal || !usePreview || !previewUri) {
+      return imageUri;
+    }
+    // 否则使用预览图
+    return previewUri;
+  }, [imageUri, previewUri, usePreview, shouldLoadOriginal]);
+
  // 处理加载开始
  const handleLoadStart = useCallback(() => {
    setLoadState('loading');
@@ -90,16 +117,25 @@ export const SmartImage: React.FC<SmartImageProps> = ({
  // 处理加载完成
  const handleLoad = useCallback(() => {
    setLoadState('success');
+    // 如果正在加载预览图，切换到原图
+    if (usePreview && !shouldLoadOriginal && previewUri && getImageUrl() === previewUri) {
+      setShouldLoadOriginal(true);
+    }
    onLoad?.();
-  }, [onLoad]);
+  }, [onLoad, usePreview, shouldLoadOriginal, previewUri, getImageUrl]);

  // 处理加载错误
  const handleError = useCallback(
    (error: any) => {
+      // 如果预览图加载失败，尝试加载原图
+      if (usePreview && !shouldLoadOriginal && getImageUrl() === previewUri && imageUri) {
+        setShouldLoadOriginal(true);
+        return;
+      }
      setLoadState('error');
      onError?.(error);
    },
-    [onError]
+    [onError, usePreview, shouldLoadOriginal, getImageUrl, previewUri, imageUri]
  );

  // 重试加载
@@ -144,7 +180,7 @@ export const SmartImage: React.FC<SmartImageProps> = ({
  };

  // 图片源配置
-  const imageSource = imageUri && imageUri.trim() !== '' ? { uri: imageUri } : undefined;
+  const imageSource = imageUri && imageUri.trim() !== '' ? { uri: getImageUrl() } : undefined;

  // 如果没有有效的图片源，显示错误占位
  if (!imageSource) {
@@ -164,6 +200,16 @@ export const SmartImage: React.FC<SmartImageProps> = ({
    );
  }

+  // 如果是懒加载且不可见，显示占位
+  if (lazyLoad && !isVisible) {
+    return (
+      <View
+        style={[containerStyle, style as ViewStyle, { backgroundColor: '#F5F5F5' }]}
+        testID={testID}
+      />
+    );
+  }
+
  return (
    <Pressable
      style={[containerStyle, style as ViewStyle]}
@@ -181,7 +227,7 @@ export const SmartImage: React.FC<SmartImageProps> = ({
          resizeMode === 'center' ? 'scale-down' :
          resizeMode
        }
-        cachePolicy="memory-disk"
+        cachePolicy={cachePolicy}
        onLoadStart={handleLoadStart}
        onLoad={handleLoad}
        onError={handleError}
--- a/src/screens/message/components/ChatScreen/SegmentRenderer.tsx
+++ b/src/screens/message/components/ChatScreen/SegmentRenderer.tsx
@@ -483,11 +483,20 @@ const renderLinkSegment = (
 ): React.ReactNode => {
  const { onLinkPress, isMe } = props;
  
-  const handlePress = () => {
+  const handlePress = async () => {
    if (onLinkPress) {
      onLinkPress(data.url);
    } else {
-      Linking.openURL(data.url).catch(() => {});
+      try {
+        const supported = await Linking.canOpenURL(data.url);
+        if (supported) {
+          await Linking.openURL(data.url);
+        } else {
+          console.warn('无法打开链接:', data.url);
+        }
+      } catch (error) {
+        console.warn('打开链接失败:', error);
+      }
    }
  };
  
@@ -511,7 +520,13 @@ const renderLinkSegment = (
          </Text>
        )}
        <Text style={styles.linkUrl} numberOfLines={1}>
-          {new URL(data.url).hostname}
+          {(() => {
+            try {
+              return new URL(data.url).hostname;
+            } catch {
+              return data.url;
+            }
+          })()}
        </Text>
      </View>
    </TouchableOpacity>
--- a/src/screens/schedule/CourseDetailScreen.tsx
+++ b/src/screens/schedule/CourseDetailScreen.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, Alert } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, Alert, ScrollView, Pressable } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
@@ -64,8 +64,9 @@ const CourseDetailScreen: React.FC = () => {

  return (
    <SafeAreaView style={styles.container}>
-      <TouchableOpacity style={styles.mask} activeOpacity={1} onPress={() => navigation.goBack()}>
-        <TouchableOpacity activeOpacity={1} style={styles.card} onPress={e => e.stopPropagation()}>
+      <View style={styles.mask}>
+        <Pressable style={StyleSheet.absoluteFillObject} onPress={() => navigation.goBack()} />
+        <View style={styles.card}>
          <View style={styles.header}>
            <View style={styles.headerLeft}>
              <View style={styles.iconBadge}>
@@ -78,39 +79,44 @@ const CourseDetailScreen: React.FC = () => {
            </TouchableOpacity>
          </View>

-          <View style={styles.row}>
-            <Text style={styles.label}>课程名称</Text>
-            <Text style={styles.value} numberOfLines={2}>{course.name}</Text>
-          </View>
-
-          <View style={styles.row}>
-            <Text style={styles.label}>教师</Text>
-            <Text style={styles.value}>{course.teacher || '未填写'}</Text>
-          </View>
-
-          <View style={[styles.row, styles.rowLast]}>
-            <Text style={styles.label}>上课时间</Text>
-            <View style={styles.timeList}>
-              {timeLines.map((item, index) => (
-                <View key={`${item.id}-${index}`} style={styles.timeItemCard}>
-                  <Text style={styles.timeItemMain}>
-                    第{formatWeekRanges(item.weeks)}周 · {WEEKDAY_NAMES[item.dayOfWeek]} 第
-                    {getMergedSectionIndex(item.startSection)}节
-                  </Text>
-                  {item.location ? <Text style={styles.timeItemSub}>{item.location}</Text> : null}
-                </View>
-              ))}
+          <ScrollView
+            style={styles.contentScroll}
+            contentContainerStyle={styles.contentScrollContainer}
+            nestedScrollEnabled
+            showsVerticalScrollIndicator={false}
+          >
+            <View style={styles.row}>
+              <Text style={styles.label}>课程名称</Text>
+              <Text style={styles.value} numberOfLines={2}>{course.name}</Text>
            </View>
-          </View>

-          <View style={styles.actionRow}>
-            <TouchableOpacity style={styles.deleteButton} onPress={handleDeleteCourse} activeOpacity={0.85}>
-              <MaterialCommunityIcons name="delete-outline" size={16} color={colors.error.main} />
-              <Text style={styles.deleteButtonText}>删除本条课程</Text>
-            </TouchableOpacity>
-          </View>
-        </TouchableOpacity>
-      </TouchableOpacity>
+            <View style={[styles.row, styles.rowLast]}>
+              <Text style={styles.label}>上课时间</Text>
+              <View style={styles.timeList}>
+                {timeLines.map((item, index) => (
+                  <View key={`${item.id}-${index}`} style={styles.timeItemCard}>
+                    <Text style={styles.timeItemMain}>
+                      第{formatWeekRanges(item.weeks)}周 · {WEEKDAY_NAMES[item.dayOfWeek]} 第
+                      {getMergedSectionIndex(item.startSection)}节
+                    </Text>
+                    <Text style={styles.timeItemSub}>
+                      任课教师：{item.teacher || '未填写'}
+                    </Text>
+                    {item.location ? <Text style={styles.timeItemSub}>{item.location}</Text> : null}
+                  </View>
+                ))}
+              </View>
+            </View>
+
+            <View style={styles.actionRow}>
+              <TouchableOpacity style={styles.deleteButton} onPress={handleDeleteCourse} activeOpacity={0.85}>
+                <MaterialCommunityIcons name="delete-outline" size={16} color={colors.error.main} />
+                <Text style={styles.deleteButtonText}>删除本条课程</Text>
+              </TouchableOpacity>
+            </View>
+          </ScrollView>
+        </View>
+      </View>
    </SafeAreaView>
  );
 };
@@ -130,8 +136,15 @@ const styles = StyleSheet.create({
    borderRadius: borderRadius.xl,
    paddingVertical: spacing.lg,
    paddingHorizontal: spacing.lg,
+    maxHeight: '82%',
    ...shadows.lg,
  },
+  contentScroll: {
+    maxHeight: '100%',
+  },
+  contentScrollContainer: {
+    paddingBottom: spacing.xs,
+  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
--- a/src/screens/schedule/ScheduleScreen.tsx
+++ b/src/screens/schedule/ScheduleScreen.tsx
@@ -15,6 +15,7 @@ import {
  Modal,
  TextInput,
  Alert,
+  ActivityIndicator,
 } from 'react-native';
 import { PanGestureHandler, State } from 'react-native-gesture-handler';
 import type { PanGestureHandlerStateChangeEvent } from 'react-native-gesture-handler';
@@ -71,6 +72,13 @@ const getMergedSectionEnd = (mergedSection: number) => mergedSection * 2;
 const SWIPE_THRESHOLD = 18;

 type RepeatMode = 'single' | 'weekly' | 'odd' | 'even';
+type CourseDisplayItem = {
+  key: string;
+  course: Course;
+  locationText: string;
+  laneIndex: number;
+  laneCount: number;
+};
 const TOTAL_WEEKS = 20;
 const HEX_COLOR_REGEX = /^#?[0-9A-Fa-f]{6}$/;
 const parseWeekInput = (value: string, fallback: number) => {
@@ -137,6 +145,23 @@ export const ScheduleScreen: React.FC = () => {
  const [startWeekInput, setStartWeekInput] = useState(String(currentWeek));
  const [endWeekInput, setEndWeekInput] = useState(String(TOTAL_WEEKS));
  const weekScrollRef = useRef<ScrollView | null>(null);
+  // 组件卸载状态标记，用于防止组件卸载后仍调用 setState
+  const isMountedRef = useRef(true);
+
+  // 设置弹窗状态
+  const [isSettingsModalVisible, setIsSettingsModalVisible] = useState(false);
+  // 同步教务系统弹窗状态
+  const [isSyncModalVisible, setIsSyncModalVisible] = useState(false);
+  const [syncUsername, setSyncUsername] = useState('');
+  const [syncPassword, setSyncPassword] = useState('');
+  const [isSyncing, setIsSyncing] = useState(false);
+
+  // 组件卸载时设置标记
+  useEffect(() => {
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
  const todayColumnIndex = getTodayColumnIndex();
  // currentWeek === 1 对应今天所在的真实周（offset 0），其他周不高亮今日列
  const isViewingCurrentWeek = currentWeek === 1;
@@ -308,7 +333,10 @@ export const ScheduleScreen: React.FC = () => {
  // 渲染周选择器
  const renderWeekSelector = () => (
    <View style={styles.weekSelector}>
-      <TouchableOpacity style={styles.settingsButton}>
+      <TouchableOpacity
+        style={styles.settingsButton}
+        onPress={() => setIsSettingsModalVisible(true)}
+      >
        <MaterialCommunityIcons name="cog" size={24} color="#FFFFFF" />
      </TouchableOpacity>
      <ScrollView
@@ -410,26 +438,137 @@ export const ScheduleScreen: React.FC = () => {
    </View>
  );

+  // 处理长按课程删除
+  const handleCourseLongPress = useCallback((course: Course) => {
+    const relatedCourses = getRelatedCourses(course);
+    const hasMultiple = relatedCourses.length > 1;
+
+    Alert.alert(
+      '删除课程',
+      `课程：${course.name}`,
+      [
+        {
+          text: '取消',
+          style: 'cancel',
+        },
+        {
+          text: '删除本节',
+          style: 'destructive',
+          onPress: async () => {
+            try {
+              await scheduleService.deleteCourse(course.id);
+              setCourses(prev => prev.filter(c => c.id !== course.id));
+              Alert.alert('成功', '已删除本节课程');
+            } catch (error) {
+              console.error('删除课程失败:', error);
+              Alert.alert('删除失败', '请稍后重试');
+            }
+          },
+        },
+        ...(hasMultiple
+          ? [
+              {
+                text: '删除全部',
+                style: 'destructive' as const,
+                onPress: async () => {
+                  try {
+                    // 使用 Promise.allSettled 批量删除，即使部分失败也能继续
+                    const results = await Promise.allSettled(
+                      relatedCourses.map(course => scheduleService.deleteCourse(course.id))
+                    );
+                    
+                    // 统计成功和失败的数量
+                    const fulfilledCount = results.filter(r => r.status === 'fulfilled').length;
+                    const rejectedCount = results.filter(r => r.status === 'rejected').length;
+                    
+                    // 只移除成功删除的课程
+                    const successfullyDeletedIds = new Set(
+                      relatedCourses
+                        .filter((_, index) => results[index].status === 'fulfilled')
+                        .map(c => c.id)
+                    );
+                    setCourses(prev => prev.filter(c => !successfullyDeletedIds.has(c.id)));
+                    
+                    if (rejectedCount > 0) {
+                      Alert.alert(
+                        '部分删除成功',
+                        `成功删除 ${fulfilledCount} 节课程，${rejectedCount} 节删除失败，请重试`
+                      );
+                    } else {
+                      Alert.alert('成功', `已删除 ${fulfilledCount} 节课程`);
+                    }
+                  } catch (error) {
+                    console.error('批量删除课程失败:', error);
+                    Alert.alert('删除失败', '请稍后重试');
+                  }
+                },
+              },
+            ]
+          : []),
+      ],
+      { cancelable: true }
+    );
+  }, [getRelatedCourses]);
+
+  const buildDayDisplayCourses = useCallback((dayCourses: Course[]): CourseDisplayItem[] => {
+    const groupedByNameAndSlot = new Map<string, Course[]>();
+
+    dayCourses.forEach(course => {
+      // 同名 + 同时间段分组；若出现多条记录，则拆分并排展示
+      const key = `${course.name}|${course.dayOfWeek}|${course.startSection}|${course.endSection}`;
+      const group = groupedByNameAndSlot.get(key);
+      if (group) {
+        group.push(course);
+      } else {
+        groupedByNameAndSlot.set(key, [course]);
+      }
+    });
+
+    const items: CourseDisplayItem[] = [];
+    groupedByNameAndSlot.forEach((groupCourses, groupKey) => {
+      groupCourses.forEach((course, index) => {
+        items.push({
+          key: `${groupKey}|${course.id}|${index}`,
+          course,
+          locationText: course.location?.trim() ?? '',
+          laneIndex: index,
+          laneCount: groupCourses.length,
+        });
+      });
+    });
+
+    return items;
+  }, []);
+
  // 渲染课程卡片
-  const renderCourseCard = (course: Course) => {
-    const color = getCourseColor(course.id, course.color);
+  const renderCourseCard = ({ key, course, locationText, laneIndex, laneCount }: CourseDisplayItem) => {
+    // 颜色仅按课程名计算，确保同名课在 UI 上颜色一致
+    const color = getCourseColor(course.name);
    const startMergedSection = getMergedSectionIndex(course.startSection);
    const endMergedSection = getMergedSectionIndex(course.endSection);
    const duration = endMergedSection - startMergedSection + 1;
    const top = (startMergedSection - 1) * SECTION_HEIGHT;
    const height = duration * SECTION_HEIGHT - 4;
+    const laneGap = 2;
+    const baseLeft = 2;
+    const availableWidth = dayColumnWidth - baseLeft * 2;
+    const cardWidth =
+      laneCount > 1
+        ? (availableWidth - laneGap * (laneCount - 1)) / laneCount
+        : availableWidth;
+    const left = baseLeft + laneIndex * (cardWidth + laneGap);

    return (
      <TouchableOpacity
-        key={course.id}
+        key={key}
        style={[
          styles.courseCard,
          {
            top,
            height,
            backgroundColor: color,
-            left: 2,
-            right: 2,
+            left,
+            width: cardWidth,
          },
        ]}
        onPress={() =>
@@ -438,14 +577,16 @@ export const ScheduleScreen: React.FC = () => {
            relatedCourses: getRelatedCourses(course),
          })
        }
+        onLongPress={() => handleCourseLongPress(course)}
+        delayLongPress={500}
        activeOpacity={0.82}
      >
        <Text style={styles.courseName} numberOfLines={3}>
          {formatCourseName(course.name)}
        </Text>
-        {course.location ? (
+        {locationText ? (
          <Text style={styles.courseLocation}>
-            @{course.location}
+            @{locationText}
          </Text>
        ) : null}
      </TouchableOpacity>
@@ -458,6 +599,7 @@ export const ScheduleScreen: React.FC = () => {
    const dayCourses = currentWeekCourses.filter(
      course => course.dayOfWeek === dayOfWeek
    );
+    const displayCourses = buildDayDisplayCourses(dayCourses);

    return (
      <View
@@ -493,7 +635,7 @@ export const ScheduleScreen: React.FC = () => {
          );
        })}
        {/* 课程卡片 */}
-        {dayCourses.map(renderCourseCard)}
+        {displayCourses.map(renderCourseCard)}
      </View>
    );
  };
@@ -540,6 +682,163 @@ export const ScheduleScreen: React.FC = () => {
      {/* 课程表主体 */}
      {renderScheduleBody()}

+      {/* 设置弹窗 */}
+      <Modal
+        visible={isSettingsModalVisible}
+        transparent
+        animationType="fade"
+        onRequestClose={() => setIsSettingsModalVisible(false)}
+      >
+        <View style={styles.addModalMask}>
+          <View style={styles.settingsModalCard}>
+            <Text style={styles.addModalTitle}>设置</Text>
+
+            <TouchableOpacity
+              style={styles.settingsItem}
+              onPress={() => {
+                setIsSettingsModalVisible(false);
+                setIsSyncModalVisible(true);
+              }}
+            >
+              <MaterialCommunityIcons name="cloud-sync" size={22} color={colors.primary.main} />
+              <Text style={styles.settingsItemText}>同步教务系统</Text>
+              <MaterialCommunityIcons name="chevron-right" size={20} color={colors.text.hint} />
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={styles.settingsCloseBtn}
+              onPress={() => setIsSettingsModalVisible(false)}
+            >
+              <Text style={styles.settingsCloseText}>关闭</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </Modal>
+
+      {/* 同步教务系统弹窗 */}
+      <Modal
+        visible={isSyncModalVisible}
+        transparent
+        animationType="fade"
+        onRequestClose={() => {
+          if (!isSyncing) {
+            setIsSyncModalVisible(false);
+          }
+        }}
+      >
+        <View style={styles.addModalMask}>
+          <View style={styles.addModalCard}>
+            <Text style={styles.addModalTitle}>同步教务系统</Text>
+            <Text style={styles.addModalDesc}>
+              输入教务系统账号密码，自动同步课表数据
+            </Text>
+
+            <TextInput
+              value={syncUsername}
+              onChangeText={setSyncUsername}
+              placeholder="学号/工号"
+              placeholderTextColor={colors.text.hint}
+              style={styles.addInput}
+              autoCapitalize="none"
+              editable={!isSyncing}
+            />
+            <TextInput
+              value={syncPassword}
+              onChangeText={setSyncPassword}
+              placeholder="密码"
+              placeholderTextColor={colors.text.hint}
+              style={styles.addInput}
+              secureTextEntry
+              editable={!isSyncing}
+            />
+
+            {isSyncing && (
+              <View style={styles.syncingContainer}>
+                <ActivityIndicator size="small" color={colors.primary.main} />
+                <Text style={styles.syncingText}>正在同步课表数据...</Text>
+              </View>
+            )}
+
+            <View style={styles.addActions}>
+              <TouchableOpacity
+                style={[styles.addCancelBtn, isSyncing && styles.addConfirmBtnDisabled]}
+                onPress={() => {
+                  if (!isSyncing) {
+                    setIsSyncModalVisible(false);
+                    setSyncUsername('');
+                    setSyncPassword('');
+                  }
+                }}
+                activeOpacity={0.8}
+                disabled={isSyncing}
+              >
+                <Text style={styles.addCancelText}>取消</Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={[
+                  styles.addConfirmBtn,
+                  (!syncUsername.trim() || !syncPassword.trim() || isSyncing) && styles.addConfirmBtnDisabled,
+                ]}
+                onPress={async () => {
+                  if (!syncUsername.trim() || !syncPassword.trim()) return;
+  
+                  setIsSyncing(true);
+                  try {
+                    const result = await scheduleService.syncSchedule({
+                      username: syncUsername.trim(),
+                      password: syncPassword.trim(),
+                    });
+  
+                    // 检查组件是否已卸载
+                    if (!isMountedRef.current) return;
+  
+                    if (result.success) {
+                      Alert.alert(
+                        '同步成功',
+                        `成功同步 ${result.synced_count} 门课程`,
+                        [
+                          {
+                            text: '确定',
+                            onPress: () => {
+                              setIsSyncModalVisible(false);
+                              setSyncUsername('');
+                              setSyncPassword('');
+                              loadCourses(); // 刷新课表
+                            },
+                          },
+                        ]
+                      );
+                    } else {
+                      Alert.alert(
+                        '同步失败',
+                        result.error_message || result.message || '请检查账号密码是否正确'
+                      );
+                    }
+                  } catch (error) {
+                    console.error('同步课表失败:', error);
+                    // 检查组件是否已卸载
+                    if (isMountedRef.current) {
+                      Alert.alert('同步失败', '网络错误，请稍后重试');
+                    }
+                  } finally {
+                    // 检查组件是否已卸载
+                    if (isMountedRef.current) {
+                      setIsSyncing(false);
+                    }
+                  }
+                }}
+                activeOpacity={0.8}
+                disabled={!syncUsername.trim() || !syncPassword.trim() || isSyncing}
+              >
+                <Text style={styles.addConfirmText}>
+                  {isSyncing ? '同步中...' : '开始同步'}
+                </Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+      </Modal>
+
      <Modal
        visible={isAddModalVisible}
        transparent
@@ -1060,6 +1359,58 @@ const styles = StyleSheet.create({
    color: colors.text.primary,
    backgroundColor: colors.background.default,
  },
+
+  // ── 设置弹窗 ──────────────────────────────────────────
+  settingsModalCard: {
+    backgroundColor: colors.background.paper,
+    borderRadius: borderRadius['2xl'],
+    padding: spacing.xl,
+    ...shadows.lg,
+    minWidth: 280,
+  },
+  settingsItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: spacing.md,
+    paddingHorizontal: spacing.sm,
+    borderRadius: borderRadius.lg,
+    backgroundColor: colors.background.default,
+    marginTop: spacing.md,
+  },
+  settingsItemText: {
+    flex: 1,
+    fontSize: fontSizes.md,
+    fontWeight: '600',
+    color: colors.text.primary,
+    marginLeft: spacing.md,
+  },
+  settingsCloseBtn: {
+    marginTop: spacing.lg,
+    height: 46,
+    borderRadius: borderRadius.full,
+    backgroundColor: colors.background.default,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  settingsCloseText: {
+    fontSize: fontSizes.md,
+    fontWeight: '600',
+    color: colors.text.secondary,
+  },
+
+  // ── 同步状态 ──────────────────────────────────────────
+  syncingContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: spacing.md,
+    gap: spacing.sm,
+  },
+  syncingText: {
+    fontSize: fontSizes.sm,
+    color: colors.text.secondary,
+    fontWeight: '500',
+  },
 });

 export default ScheduleScreen;
--- a/src/services/scheduleService.ts
+++ b/src/services/scheduleService.ts
@@ -32,6 +32,19 @@ interface CreateScheduleCourseResponse {
  course: ScheduleCourseDTO;
 }

+interface SyncScheduleRequest {
+  username: string;
+  password: string;
+  semester?: string;
+}
+
+interface SyncScheduleResponse {
+  success: boolean;
+  message: string;
+  synced_count: number;
+  error_message?: string;
+}
+
 const toCourse = (dto: ScheduleCourseDTO): Course => ({
  id: dto.id,
  name: dto.name,
@@ -64,7 +77,12 @@ class ScheduleService {
  async deleteCourse(courseId: string): Promise<void> {
    await api.delete(`/schedule/courses/${courseId}`);
  }
+
+  async syncSchedule(req: SyncScheduleRequest): Promise<SyncScheduleResponse> {
+    const response = await api.post<SyncScheduleResponse>('/schedule/sync', req);
+    return response.data;
+  }
 }

 export const scheduleService = new ScheduleService();
-export type { CreateScheduleCourseRequest };
+export type { CreateScheduleCourseRequest, SyncScheduleRequest };
--- a/src/services/uploadService.ts
+++ b/src/services/uploadService.ts
@@ -35,6 +35,8 @@ function resolveFileInfo(uri: string, providedType?: string): { name: string; ty
 // 上传响应
 export interface UploadResponse {
  url: string;
+  preview_url?: string;       // 列表/网格预览图
+  preview_url_large?: string;  // 详情页预览图
  width?: number;
  height?: number;
  size?: number;
@@ -162,7 +164,19 @@ class UploadService {
    for (const file of files) {
      const result = await this.uploadImage(file);
      if (result) {
-        urls.push(result.url);
+        // 将预览图信息合并到 URL 中：url|preview_url|preview_url_large
+        const parts = [result.url];
+        if (result.preview_url) {
+          parts.push(result.preview_url);
+        } else {
+          parts.push(''); // 空占位
+        }
+        if (result.preview_url_large) {
+          parts.push(result.preview_url_large);
+        } else {
+          parts.push(''); // 空占位
+        }
+        urls.push(parts.join('|'));
      }
    }
    
--- a/src/types/dto.ts
+++ b/src/types/dto.ts
@@ -52,6 +52,8 @@ export interface PostImageDTO {
  id: string;
  url: string;
  thumbnail_url: string;
+  preview_url: string;        // 列表/网格预览图
+  preview_url_large: string;  // 详情页预览图
  width: number;
  height: number;
 }
--- a/src/utils/imageHelper.ts
+++ b/src/utils/imageHelper.ts
@@ -0,0 +1,101 @@
+/**
+ * 图片工具函数
+ * 提供图片 URL 选择、格式检测等实用功能
+ */
+
+import { PostImageDTO } from '../types';
+
+/**
+ * 图片显示模式
+ */
+export type ImageDisplayMode = 'list' | 'grid' | 'detail';
+
+/**
+ * 根据显示模式获取预览图 URL
+ * @param image 图片对象
+ * @param mode 显示模式
+ * @returns 图片 URL
+ */
+export function getPreviewImageUrl(image: PostImageDTO, mode: ImageDisplayMode): string {
+  // 如果没有预览图，返回原图
+  if (!image) {
+    return '';
+  }
+
+  switch (mode) {
+    case 'list':
+    case 'grid':
+      // 列表和网格模式使用普通预览图
+      return image.preview_url || image.url || '';
+    case 'detail':
+      // 详情页使用大预览图
+      return image.preview_url_large || image.preview_url || image.url || '';
+    default:
+      return image.url || '';
+  }
+}
+
+/**
+ * 检测 WebP 支持并构建 Accept header
+ * @returns Accept header 字符串
+ */
+export function getImageAcceptHeader(): string {
+  // 检测浏览器是否支持 WebP
+  // 如果支持，优先请求 WebP
+  return 'image/webp,image/apng,image/*,*/*;q=0.8';
+}
+
+/**
+ * 判断是否应该使用预览图
+ * @param mode 显示模式
+ * @param hasPreview 是否有预览图
+ * @returns 是否使用预览图
+ */
+export function shouldUsePreview(mode: ImageDisplayMode, hasPreview: boolean): boolean {
+  // 列表和网格模式优先使用预览图
+  if (mode === 'list' || mode === 'grid') {
+    return hasPreview;
+  }
+  // 详情页也使用预览图，但点击后加载原图
+  if (mode === 'detail') {
+    return hasPreview;
+  }
+  return false;
+}
+
+/**
+ * 从图片 URL 提取文件扩展名
+ * @param url 图片 URL
+ * @returns 文件扩展名（如 '.jpg'）
+ */
+export function getImageExtension(url: string): string {
+  if (!url) return '';
+  try {
+    const urlObj = new URL(url);
+    const pathname = urlObj.pathname;
+    const ext = pathname.match(/\.[0-9a-z]+$/i);
+    return ext ? ext[0].toLowerCase() : '';
+  } catch {
+    // 如果 URL 解析失败，直接从字符串匹配
+    const match = url.match(/\.[0-9a-z]+$/i);
+    return match ? match[0].toLowerCase() : '';
+  }
+}
+
+/**
+ * 判断是否是 GIF 图片
+ * @param url 图片 URL
+ * @returns 是否是 GIF
+ */
+export function isGifImage(url: string): boolean {
+  return getImageExtension(url) === '.gif';
+}
+
+/**
+ * 判断是否是 WebP 图片
+ * @param url 图片 URL
+ * @returns 是否是 WebP
+ */
+export function isWebPImage(url: string): boolean {
+  return getImageExtension(url) === '.webp';
+}