PC端的部分适配

src/screens/message/NotificationsScreen.tsx

@@ -14,10 +14,11 @@ import {
   RefreshControl,
   ActivityIndicator,
 } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 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 { SystemMessageResponse } from '../../types/dto';
 import { messageService } from '../../services/messageService';
@@ -41,7 +42,7 @@ const MESSAGE_TYPES = [
 const LIKE_SYSTEM_TYPES = new Set(['like_post', 'like_comment', 'like_reply', 'favorite_post']);
 const GROUP_SYSTEM_TYPES = new Set(['group_invite', 'group_join_apply', 'group_join_approved', 'group_join_rejected']);
 
-export const NotificationsScreen: React.FC = () => {
+export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack }) => {
   const isFocused = useIsFocused();
   const fetchMessageUnreadCount = useUserStore(state => state.fetchMessageUnreadCount);
   const { setSystemUnreadCount, decrementSystemUnreadCount } = useMessageManagerSystemUnreadCount();
@@ -148,16 +149,12 @@ export const NotificationsScreen: React.FC = () => {
     }
   }, [isFocused, fetchMessages, fetchUnreadCount, handleMarkAllRead]);
 
-  // 屏幕失去焦点时返回消息列表
+  // 屏幕失去焦点时，如果有 onBack 回调则调用它（用于内嵌模式）
   useEffect(() => {
-    if (!isFocused) {
-      // 使用 setTimeout 确保在导航状态稳定后再执行
-      const timer = setTimeout(() => {
-        navigation.goBack();
-      }, 0);
-      return () => clearTimeout(timer);
+    if (!isFocused && onBack) {
+      onBack();
     }
-  }, [isFocused, navigation]);
+  }, [isFocused, onBack]);
 
   // 筛选消息
   const filteredMessages = activeType === 'all'
@@ -317,6 +314,32 @@ export const NotificationsScreen: React.FC = () => {
     );
   };
 
+  // 渲染头部（包含返回按钮）
+  const renderHeader = () => {
+    // 大屏模式（>= lg 断点）隐藏返回按钮
+    const shouldShowBackButton = onBack && !isWideScreen;
+
+    return (
+      <View style={[styles.header, isWideScreen && styles.headerWide]}>
+        {shouldShowBackButton ? (
+          <TouchableOpacity 
+            style={styles.backButton} 
+            onPress={onBack}
+            activeOpacity={0.7}
+          >
+            <MaterialCommunityIcons name="arrow-left" size={24} color={colors.text.primary} />
+          </TouchableOpacity>
+        ) : (
+          <View style={styles.backButtonPlaceholder} />
+        )}
+        <Text style={[styles.headerTitle, ...(isWideScreen ? [styles.headerTitleWide] : [])]}>
+          系统通知
+        </Text>
+        <View style={styles.backButtonPlaceholder} />
+      </View>
+    );
+  };
+
   // 渲染空状态
   const renderEmpty = () => (
     <EmptyState
@@ -330,6 +353,8 @@ export const NotificationsScreen: React.FC = () => {
     <SafeAreaView style={styles.container} edges={[]}>
       {isWideScreen ? (
         <ResponsiveContainer maxWidth={900}>
+          {/* 头部 - 大屏模式下隐藏返回按钮 */}
+          {renderHeader()}
           {/* 分类筛选 */}
           <View style={[styles.filterContainer, isWideScreen && styles.filterContainerWide]}>
             {MESSAGE_TYPES.map(type => {
@@ -403,6 +428,8 @@ export const NotificationsScreen: React.FC = () => {
         </ResponsiveContainer>
       ) : (
         <>
+          {/* 头部 - 小屏模式下显示返回按钮 */}
+          {renderHeader()}
           {/* 分类筛选 */}
           <View style={styles.filterContainer}>
             {MESSAGE_TYPES.map(type => {
@@ -516,6 +543,38 @@ const styles = StyleSheet.create({
   filterCount: {
     marginLeft: spacing.xs,
   },
+  // Header 样式
+  header: {
+    flexDirection: 'row',
+    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,
+  },
   listContent: {
     flexGrow: 1,
   },