refactor(TabsLayout, ImageGallery, ChatScreen, GroupInfoScreen, PrivateChatInfoScreen): enhance UI components and improve layout structure

- Adjusted tab bar dimensions and margins in TabsLayout for better visual consistency.
- Streamlined ImageGallery by removing loading states and optimizing image transition handling.
- Updated ChatScreen to utilize SafeAreaView for improved layout on different devices.
- Enhanced GroupInfoScreen and PrivateChatInfoScreen with a consistent page header layout, including back navigation.
- Refactored ChatHeader to simplify structure and improve maintainability.

src/screens/message/GroupInfoScreen.tsx

@@ -44,6 +44,7 @@ import * as hrefs from '../../navigation/hrefs';
 import { messageManager } from '../../stores/messageManager';
 import { groupManager } from '../../stores/groupManager';
 import MutualFollowSelectorModal from './components/MutualFollowSelectorModal';
+import { AppBackButton } from '../../components/common';
 
 const { width: SCREEN_WIDTH } = Dimensions.get('window');
 
@@ -537,7 +538,12 @@ const GroupInfoScreen: React.FC = () => {
 
   if (loading) {
     return (
-      <SafeAreaView style={styles.container} edges={['bottom']}>
+      <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
+        <View style={styles.pageHeader}>
+          <AppBackButton onPress={() => router.back()} />
+          <Text variant="h3" style={styles.pageTitle}>群聊信息</Text>
+          <View style={styles.pageHeaderPlaceholder} />
+        </View>
         <Loading />
       </SafeAreaView>
     );
@@ -545,7 +551,12 @@ const GroupInfoScreen: React.FC = () => {
 
   if (!group) {
     return (
-      <SafeAreaView style={styles.container} edges={['bottom']}>
+      <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
+        <View style={styles.pageHeader}>
+          <AppBackButton onPress={() => router.back()} />
+          <Text variant="h3" style={styles.pageTitle}>群聊信息</Text>
+          <View style={styles.pageHeaderPlaceholder} />
+        </View>
         <View style={styles.errorContainer}>
           <Text variant="body" color={colors.text.secondary}>
             群组信息不存在
@@ -556,7 +567,12 @@ const GroupInfoScreen: React.FC = () => {
   }
 
   return (
-    <SafeAreaView style={styles.container} edges={['bottom']}>
+    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
+      <View style={styles.pageHeader}>
+        <AppBackButton onPress={() => router.back()} />
+        <Text variant="h3" style={styles.pageTitle}>群聊信息</Text>
+        <View style={styles.pageHeaderPlaceholder} />
+      </View>
       <ScrollView
         style={styles.scrollView}
         contentContainerStyle={styles.scrollContent}
@@ -1060,6 +1076,23 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: colors.background.default,
   },
+  pageHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    backgroundColor: colors.background.paper,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.divider,
+  },
+  pageTitle: {
+    fontWeight: '600',
+  },
+  pageHeaderPlaceholder: {
+    width: 40,
+    height: 40,
+  },
   scrollView: {
     flex: 1,
   },