feat(message): add conversation notification mute feature

Add notification mute functionality for conversations with the following changes: - Add notification_muted field to ConversationResponse and related DTOs - Add notificationMutedMap to message store for tracking mute state - Add setConversationNotificationMuted API method - Integrate mute toggle in GroupInfoScreen and PrivateChatInfoScreen - Skip system notifications for muted conversations - Suppress vibration for muted conversations in WS handler - Clean up selected mentions when @mentions are removed from text Chore changes: - Update PostCard bookmark icon from 'bookmark' to 'star' - Refine card styles across AppsScreen, MaterialsScreen, and SubjectMaterialsScreen - Improve week selector scrolling to center selected week in ScheduleScreen
2026-04-25 21:23:22 +08:00
parent de0afa93a1
commit 5fa5403d6a
15 changed files with 252 additions and 101 deletions
--- a/src/screens/apps/AppsScreen.tsx
+++ b/src/screens/apps/AppsScreen.tsx
@@ -59,13 +59,13 @@ export const AppsScreen: React.FC = () => {
    () => ({
      marginBottom: spacing.md,
      backgroundColor: colors.background.paper,
-      borderRadius: 16,
+      borderRadius: borderRadius.lg,
      overflow: 'hidden' as const,
      shadowColor: '#000',
-      shadowOffset: { width: 0, height: 2 },
-      shadowOpacity: 0.06,
-      shadowRadius: 8,
-      elevation: 2,
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.04,
+      shadowRadius: 4,
+      elevation: 1,
      maxWidth: APP_CARD_MAX_WIDTH,
      alignSelf: 'center' as const,
      width: '100%' as const,
@@ -102,7 +102,7 @@ export const AppsScreen: React.FC = () => {
        >
          <View style={styles.appCardInner}>
            <View style={styles.appIconCircle}>
-              <MaterialCommunityIcons name={item.icon} size={26} color={colors.primary.contrast} />
+              <MaterialCommunityIcons name={item.icon} size={24} color={colors.primary.main} />
            </View>
            <View style={styles.appCardText}>
              <Text variant="body" color={colors.text.primary} style={styles.appTitle}>
@@ -112,7 +112,7 @@ export const AppsScreen: React.FC = () => {
                {item.subtitle}
              </Text>
            </View>
-            <MaterialCommunityIcons name="chevron-right" size={22} color={colors.primary.main} />
+            <MaterialCommunityIcons name="chevron-right" size={22} color={colors.text.hint} />
          </View>
        </TouchableOpacity>
      ))}
@@ -223,12 +223,12 @@ function createAppsStyles(colors: AppColors) {
      paddingVertical: spacing.lg,
      paddingHorizontal: spacing.lg,
    },
-    /** 与首页发帖 FAB 同主色实心圆 */
+    /** 扁平化主色图标背景 */
    appIconCircle: {
-      width: 52,
-      height: 52,
-      borderRadius: borderRadius.full,
-      backgroundColor: colors.primary.main,
+      width: 48,
+      height: 48,
+      borderRadius: borderRadius.lg,
+      backgroundColor: `${colors.primary.main}14`,
      alignItems: 'center',
      justifyContent: 'center',
    },
--- a/src/screens/material/MaterialDetailScreen.tsx
+++ b/src/screens/material/MaterialDetailScreen.tsx
@@ -117,13 +117,13 @@ export const MaterialDetailScreen: React.FC = () => {
  const cardStyle = useMemo(
    () => ({
      backgroundColor: colors.background.paper,
-      borderRadius: 16,
+      borderRadius: borderRadius.lg,
      overflow: 'hidden' as const,
      shadowColor: '#000',
-      shadowOffset: { width: 0, height: 2 },
-      shadowOpacity: 0.06,
-      shadowRadius: 8,
-      elevation: 2,
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.04,
+      shadowRadius: 4,
+      elevation: 1,
    }),
    [colors]
  );
@@ -390,7 +390,7 @@ function createMaterialDetailStyles(colors: AppColors) {
      marginBottom: spacing.md,
    },
    fileTypeBanner: {
-      height: 100,
+      height: 88,
      alignItems: 'center',
      justifyContent: 'center',
    },
@@ -461,10 +461,9 @@ function createMaterialDetailStyles(colors: AppColors) {
    tag: {
      paddingVertical: spacing.xs,
      paddingHorizontal: spacing.sm,
-      backgroundColor: colors.background.paper,
-      borderRadius: borderRadius.sm,
-      borderWidth: 1,
-      borderColor: colors.primary.main,
+      backgroundColor: `${colors.primary.main}10`,
+      borderRadius: borderRadius.md,
+      borderWidth: 0,
    },
    actionButtons: {
      flexDirection: 'row',
@@ -477,8 +476,10 @@ function createMaterialDetailStyles(colors: AppColors) {
      alignItems: 'center',
      justifyContent: 'center',
      paddingVertical: spacing.md,
-      borderRadius: borderRadius.lg,
+      borderRadius: borderRadius.md,
      gap: spacing.xs,
+      borderWidth: StyleSheet.hairlineWidth,
+      borderColor: colors.divider,
    },
    downloadButton: {
      flex: 1,
@@ -486,7 +487,7 @@ function createMaterialDetailStyles(colors: AppColors) {
      alignItems: 'center',
      justifyContent: 'center',
      paddingVertical: spacing.md,
-      borderRadius: borderRadius.lg,
+      borderRadius: borderRadius.md,
      gap: spacing.xs,
    },
    actionButtonText: {
--- a/src/screens/material/MaterialsScreen.tsx
+++ b/src/screens/material/MaterialsScreen.tsx
@@ -84,13 +84,13 @@ export const MaterialsScreen: React.FC = () => {
  const cardStyle = useMemo(
    () => ({
      backgroundColor: colors.background.paper,
-      borderRadius: 16,
+      borderRadius: borderRadius.lg,
      overflow: 'hidden' as const,
      shadowColor: '#000',
-      shadowOffset: { width: 0, height: 2 },
-      shadowOpacity: 0.06,
-      shadowRadius: 8,
-      elevation: 2,
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.04,
+      shadowRadius: 4,
+      elevation: 1,
      maxWidth: SUBJECT_CARD_MAX_WIDTH,
      alignSelf: 'center' as const,
      width: '100%' as const,
@@ -117,9 +117,6 @@ export const MaterialsScreen: React.FC = () => {
        </Text>
      </View>
      <View style={styles.subjectMeta}>
-        <Text variant="caption" color={colors.text.hint}>
-          {subject.material_count}
-        </Text>
        <MaterialCommunityIcons name="chevron-right" size={20} color={colors.text.hint} />
      </View>
    </TouchableOpacity>
@@ -271,9 +268,9 @@ function createMaterialsStyles(colors: AppColors) {
      paddingHorizontal: spacing.lg,
    },
    subjectIconCircle: {
-      width: 56,
-      height: 56,
-      borderRadius: borderRadius.full,
+      width: 48,
+      height: 48,
+      borderRadius: borderRadius.lg,
      alignItems: 'center',
      justifyContent: 'center',
    },
--- a/src/screens/material/SubjectMaterialsScreen.tsx
+++ b/src/screens/material/SubjectMaterialsScreen.tsx
@@ -117,11 +117,11 @@ export const SubjectMaterialsScreen: React.FC = () => {
  const cardStyle = useMemo(
    () => ({
      backgroundColor: colors.background.paper,
-      borderRadius: 12,
+      borderRadius: borderRadius.lg,
      overflow: 'hidden' as const,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 1 },
-      shadowOpacity: 0.05,
+      shadowOpacity: 0.04,
      shadowRadius: 4,
      elevation: 1,
      maxWidth: MATERIAL_CARD_MAX_WIDTH,
@@ -178,14 +178,14 @@ export const SubjectMaterialsScreen: React.FC = () => {
          style={[
            styles.filterTab,
            selectedFileType === type && styles.filterTabActive,
-            selectedFileType === type && { backgroundColor: colors.primary.main },
+            selectedFileType === type && { backgroundColor: `${colors.primary.main}14` },
          ]}
          onPress={() => setSelectedFileType(type)}
          activeOpacity={0.7}
        >
          <Text
            variant="caption"
-            color={selectedFileType === type ? colors.primary.contrast : colors.text.secondary}
+            color={selectedFileType === type ? colors.primary.main : colors.text.secondary}
            style={styles.filterTabText}
          >
            {label}
@@ -337,11 +337,13 @@ function createSubjectMaterialsStyles(colors: AppColors) {
    filterTab: {
      paddingVertical: spacing.sm,
      paddingHorizontal: spacing.md,
-      borderRadius: borderRadius.full,
+      borderRadius: borderRadius.md,
      backgroundColor: colors.background.paper,
+      borderWidth: StyleSheet.hairlineWidth,
+      borderColor: colors.divider,
    },
    filterTabActive: {
-      // backgroundColor set inline
+      borderColor: colors.primary.main,
    },
    filterTabText: {
      fontWeight: '600',
@@ -354,8 +356,8 @@ function createSubjectMaterialsStyles(colors: AppColors) {
      marginBottom: spacing.sm,
    },
    fileTypeIcon: {
-      width: 44,
-      height: 44,
+      width: 40,
+      height: 40,
      borderRadius: borderRadius.md,
      alignItems: 'center',
      justifyContent: 'center',
--- a/src/screens/message/GroupInfoScreen.tsx
+++ b/src/screens/message/GroupInfoScreen.tsx
@@ -50,6 +50,7 @@ import { blurActiveElement } from '../../infrastructure/platform';
 import { firstRouteParam } from '../../navigation/paramUtils';
 import * as hrefs from '../../navigation/hrefs';
 import { messageManager } from '../../stores/message';
+import { useMessageStore } from '../../stores/message/store';
 import { groupManager } from '../../stores/group';
 import MutualFollowSelectorModal from './components/MutualFollowSelectorModal';
 import { AppBackButton } from '../../components/common';
@@ -95,6 +96,9 @@ const GroupInfoScreen: React.FC = () => {
  const [loading, setLoading] = useState(true);
  const [isPinned, setIsPinned] = useState(false);
  const [pinLoading, setPinLoading] = useState(false);
+  const isNotificationMuted = useMessageStore(state =>
+    conversationId ? (state.notificationMutedMap.get(conversationId) || false) : false
+  );

  // 编辑模态框状态
  const [editModalVisible, setEditModalVisible] = useState(false);
@@ -212,6 +216,16 @@ const GroupInfoScreen: React.FC = () => {
    }
  };

+  // 设置会话免打扰
+  const handleToggleNotificationMuted = async () => {
+    if (!conversationId) return;
+    try {
+      await messageManager.toggleNotificationMuted(conversationId, !isNotificationMuted);
+    } catch (error: any) {
+      Alert.alert('错误', error?.message || '设置免打扰失败');
+    }
+  };
+
  // 打开编辑模态框
  const openEditModal = () => {
    if (group) {
@@ -799,6 +813,24 @@ const GroupInfoScreen: React.FC = () => {
                thumbColor={isPinned ? colors.primary.main : colors.background.paper}
              />
            </View>
+            <View style={styles.settingItem}>
+              <View style={styles.settingIconContainer}>
+                <MaterialCommunityIcons name="bell-off-outline" size={20} color={colors.primary.main} />
+              </View>
+              <View style={styles.settingContent}>
+                <Text variant="body">消息免打扰</Text>
+                <Text variant="caption" color={colors.text.secondary}>
+                  {conversationId ? (isNotificationMuted ? '已开启' : '未开启') : '请从聊天页面进入后设置'}
+                </Text>
+              </View>
+              <Switch
+                value={isNotificationMuted}
+                onValueChange={handleToggleNotificationMuted}
+                disabled={!conversationId}
+                trackColor={{ false: colors.divider, true: colors.primary.light }}
+                thumbColor={isNotificationMuted ? colors.primary.main : colors.background.paper}
+              />
+            </View>
          </View>
        </View>

--- a/src/screens/message/PrivateChatInfoScreen.tsx
+++ b/src/screens/message/PrivateChatInfoScreen.tsx
@@ -23,6 +23,7 @@ import { messageService } from '@/services/message';
 import { ApiError } from '@/services/core';
 import { messageRepository, conversationRepository } from '@/database';
 import { messageManager } from '../../stores/message';
+import { useMessageStore } from '../../stores/message/store';
 import { userManager } from '../../stores/user';
 import { Avatar, Text, Button, Loading, Divider } from '../../components/common';
 import { User } from '../../types';
@@ -51,7 +52,7 @@ const PrivateChatInfoScreen: React.FC = () => {
  const [isBlocked, setIsBlocked] = useState(false);

  // 聊天设置状态
-  const [isMuted, setIsMuted] = useState(false);
+  const isMuted = useMessageStore(state => state.notificationMutedMap.get(conversationId) || false);
  const [isPinned, setIsPinned] = useState(false);

  // 加载用户信息
@@ -96,15 +97,12 @@ const PrivateChatInfoScreen: React.FC = () => {
    loadChatSettings();
  }, [loadUserInfo, loadChatSettings]);

-  // 切换免打扰（仅本地状态，实际需要API支持）
+  // 切换免打扰
  const toggleMute = async () => {
    try {
      const newValue = !isMuted;
-      setIsMuted(newValue);
-      // TODO: 调用API更新免打扰状态
-      // await conversationService.updateConversationMute(conversationId, newValue);
+      await messageManager.toggleNotificationMuted(conversationId, newValue);
    } catch (error) {
-      setIsMuted(!isMuted);
      Alert.alert('错误', '设置免打扰失败');
    }
  };
--- a/src/screens/message/components/ChatScreen/useChatScreen.ts
+++ b/src/screens/message/components/ChatScreen/useChatScreen.ts
@@ -705,8 +705,25 @@ export const useChatScreen = (props?: ChatScreenProps) => {
      } else {
        setActivePanel('none');
      }
+
+      if (selectedMentions.length > 0) {
+        const stillPresent = selectedMentions.filter(userId => {
+          const member = groupMembers.find(m => m.user_id === userId);
+          const nickname = member?.nickname || member?.user?.nickname;
+          if (!nickname) return false;
+          const escapedName = nickname.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+          return new RegExp(`@${escapedName}(\\s|$)`, 'g').test(text);
+        });
+        if (stillPresent.length !== selectedMentions.length) {
+          setSelectedMentions(stillPresent);
+        }
+      }
+
+      if (mentionAll && !text.includes('@所有人')) {
+        setMentionAll(false);
+      }
    }
-  }, [isGroupChat]);
+  }, [isGroupChat, selectedMentions, mentionAll, groupMembers]);

  // 【改造】获取发送者信息（群聊）- 优先从消息的 sender 字段获取
  const getSenderInfo = useCallback((senderId: string): SenderInfo => {
--- a/src/screens/schedule/ScheduleScreen.tsx
+++ b/src/screens/schedule/ScheduleScreen.tsx
@@ -47,6 +47,12 @@ import { scheduleService } from '@/services/platform';

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

+// 周选择器固定宽度常量（用于精确计算滚动位置，确保选中周始终居中）
+const WEEK_ITEM_WIDTH = 64;                    // 固定宽度，确保"第20周"能放下
+const WEEK_ITEM_MARGIN_HORIZONTAL = 3;         // marginHorizontal 单侧值
+const WEEK_LIST_PADDING = 12;                  // contentContainer paddingHorizontal = spacing.sm
+const SCROLL_VIEW_VISIBLE_WIDTH = SCREEN_WIDTH - 40 - 40; // 扣除返回按钮(40)和设置按钮(40)
+
 // 时间段列宽度（按需求缩短）
 const TIME_COLUMN_WIDTH = 38;
 const VISIBLE_DAY_VALUES = [0, 1, 2, 3, 4, 5, 6]; // 周一到周日（0=周一）
@@ -183,8 +189,8 @@ export const ScheduleScreen: React.FC = () => {
  // 电脑端：第六节课刚好填到底部（可用高度 = 屏幕高度 - 周选择器 - 星期标题）
  const sectionHeight = useMemo((): number => {
    const totalHeaderHeight = WEEK_SELECTOR_HEIGHT + HEADER_HEIGHT;
-    // 悬浮TabBar高度 + 安全区域底部
-    const bottomOffset = isMobile ? FLOATING_TAB_BAR_HEIGHT + insets.bottom : 0;
+    // 悬浮TabBar高度 + 安全区域底部 + 额外底部padding避免遮挡
+    const bottomOffset = isMobile ? FLOATING_TAB_BAR_HEIGHT + insets.bottom + 8 : 0;
    // 可用高度 = 屏幕高度 - 顶部区域 - 底部偏移
    const availableHeight = screenHeight - totalHeaderHeight - bottomOffset;
    // 6节课，每节课高度 = 可用高度 / 6
@@ -256,11 +262,24 @@ export const ScheduleScreen: React.FC = () => {
    return Array.from({ length: TOTAL_WEEKS }, (_, i) => i + 1);
  }, []);

+  // 将当前选中周滚动到 ScrollView 可视区域正中央
  useEffect(() => {
-    const WEEK_ITEM_ESTIMATED_WIDTH = 92;
-    const centerOffset = SCREEN_WIDTH / 2 - WEEK_ITEM_ESTIMATED_WIDTH / 2 - 40;
-    const targetX = Math.max(0, (currentWeek - 1) * WEEK_ITEM_ESTIMATED_WIDTH - centerOffset);
-    weekScrollRef.current?.scrollTo({ x: targetX, animated: true });
+    // 第 N 个 item 的左边缘在内容坐标系中的位置
+    // = padding + (N-1) * (width + margin*2) + margin
+    const itemLeft = WEEK_LIST_PADDING
+      + (currentWeek - 1) * (WEEK_ITEM_WIDTH + WEEK_ITEM_MARGIN_HORIZONTAL * 2)
+      + WEEK_ITEM_MARGIN_HORIZONTAL;
+
+    // 目标滚动偏移 = item中心 - 可视区域中心
+    const targetX = itemLeft + WEEK_ITEM_WIDTH / 2 - SCROLL_VIEW_VISIBLE_WIDTH / 2;
+
+    // 限制在有效范围内（不小于0，不超过最大可滚动距离）
+    const totalContentWidth = WEEK_LIST_PADDING * 2
+      + TOTAL_WEEKS * (WEEK_ITEM_WIDTH + WEEK_ITEM_MARGIN_HORIZONTAL * 2);
+    const maxScrollX = Math.max(0, totalContentWidth - SCROLL_VIEW_VISIBLE_WIDTH);
+    const clampedX = Math.max(0, Math.min(targetX, maxScrollX));
+
+    weekScrollRef.current?.scrollTo({ x: clampedX, animated: true });
  }, [currentWeek]);

  useFocusEffect(
@@ -427,14 +446,14 @@ export const ScheduleScreen: React.FC = () => {
          accessibilityRole="button"
          accessibilityLabel="返回"
        >
-          <MaterialCommunityIcons name="chevron-left" size={28} color="#FFFFFF" />
+          <MaterialCommunityIcons name="chevron-left" size={28} color={colors.text.primary} />
        </TouchableOpacity>
      ) : null}
      <TouchableOpacity
        style={styles.settingsButton}
        onPress={() => setIsSettingsModalVisible(true)}
      >
-        <MaterialCommunityIcons name="cog" size={24} color="#FFFFFF" />
+        <MaterialCommunityIcons name="cog" size={22} color={colors.text.secondary} />
      </TouchableOpacity>
      <ScrollView
        ref={weekScrollRef}
@@ -442,25 +461,31 @@ export const ScheduleScreen: React.FC = () => {
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.weekList}
      >
-        {weeks.map(week => (
-          <TouchableOpacity
-            key={week}
-            style={[
-              styles.weekItem,
-              currentWeek === week && styles.weekItemActive,
-            ]}
-            onPress={() => setCurrentWeek(week)}
-          >
-            <Text
+        {weeks.map(week => {
+          const isCurrentRealWeek = week === INITIAL_WEEK;
+          const isSelected = currentWeek === week;
+          return (
+            <TouchableOpacity
+              key={week}
              style={[
-                styles.weekItemText,
-                currentWeek === week && styles.weekItemTextActive,
+                styles.weekItem,
+                isSelected && styles.weekItemActive,
+                isCurrentRealWeek && !isSelected && styles.weekItemCurrentWeek,
              ]}
+              onPress={() => setCurrentWeek(week)}
            >
-              第{week}周
-            </Text>
-          </TouchableOpacity>
-        ))}
+              <Text
+                style={[
+                  styles.weekItemText,
+                  isSelected && styles.weekItemTextActive,
+                  isCurrentRealWeek && !isSelected && styles.weekItemTextCurrentWeek,
+                ]}
+              >
+                第{week}周
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
      </ScrollView>
    </View>
  );
@@ -805,7 +830,7 @@ export const ScheduleScreen: React.FC = () => {

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

      {/* 周选择器 */}
      {renderWeekSelector()}
@@ -1147,20 +1172,23 @@ function createScheduleStyles(colors: AppColors) {
  // ── 周选择器 ──────────────────────────────────────────
  weekSelector: {
    height: WEEK_SELECTOR_HEIGHT,
-    backgroundColor: colors.primary.main,
+    backgroundColor: colors.background.paper,
    flexDirection: 'row',
    alignItems: 'center',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: colors.divider,
+    paddingHorizontal: spacing.sm,
  },
  weekBarIconButton: {
-    width: 40,
-    height: 40,
+    width: 36,
+    height: 36,
    justifyContent: 'center',
    alignItems: 'center',
-    marginLeft: -8,
+    marginLeft: -4,
  },
  settingsButton: {
-    width: 40,
-    height: 40,
+    width: 36,
+    height: 36,
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: spacing.xs,
@@ -1170,31 +1198,41 @@ function createScheduleStyles(colors: AppColors) {
    alignItems: 'center',
  },
  weekItem: {
-    paddingHorizontal: spacing.md,
+    width: WEEK_ITEM_WIDTH,
    paddingVertical: 5,
-    marginHorizontal: 3,
-    borderRadius: borderRadius.full,
+    marginHorizontal: WEEK_ITEM_MARGIN_HORIZONTAL,
+    borderRadius: borderRadius.md,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: colors.background.default,
  },
  weekItemActive: {
-    backgroundColor: 'rgba(255,255,255,0.28)',
+    backgroundColor: colors.primary.main,
+  },
+  weekItemCurrentWeek: {
+    backgroundColor: `${colors.primary.main}18`,
  },
  weekItemText: {
    fontSize: fontSizes.sm,
    fontWeight: '500',
-    color: 'rgba(255,255,255,0.75)',
+    color: colors.text.secondary,
    letterSpacing: 0.2,
  },
  weekItemTextActive: {
    color: colors.text.inverse,
    fontWeight: '700',
  },
+  weekItemTextCurrentWeek: {
+    color: colors.primary.main,
+    fontWeight: '600',
+  },

  // ── 星期标题行 ─────────────────────────────────────────
  header: {
    flexDirection: 'row',
    height: HEADER_HEIGHT,
    backgroundColor: colors.background.paper,
-    borderBottomWidth: 1,
+    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: colors.divider,
  },
  timeHeader: {
@@ -1268,7 +1306,7 @@ function createScheduleStyles(colors: AppColors) {
    alignItems: 'center',
    justifyContent: 'center',
    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#EBEBEB',
+    borderBottomColor: colors.divider,
    gap: 4,
  },
  timeSectionBadge: {
@@ -1303,22 +1341,22 @@ function createScheduleStyles(colors: AppColors) {
  // ── 单日列 ────────────────────────────────────────────
  dayColumn: {
    flex: 1,
-    backgroundColor: colors.background.default, // 使用主题默认背景色
-    borderRightWidth: 1,
-    borderRightColor: '#EBEBEB',
+    backgroundColor: colors.background.default,
+    borderRightWidth: StyleSheet.hairlineWidth,
+    borderRightColor: colors.divider,
  },
  gridCell: {
    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#EBEBEB',
+    borderBottomColor: colors.divider,
  },

  // ── 课程卡片 ──────────────────────────────────────────
  courseCard: {
    position: 'absolute',
-    borderRadius: borderRadius.xl,
+    borderRadius: borderRadius.lg,
    paddingVertical: spacing.xs + 2,
    paddingHorizontal: spacing.xs + 1,
-    ...shadows.md,
+    ...shadows.sm,
  },
  courseName: {
    fontSize: 10,