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.

app/(app)/(tabs)/_layout.tsx

@@ -7,9 +7,9 @@ import { colors, shadows } from '../../../src/theme';
 import { BREAKPOINTS } from '../../../src/hooks/useResponsive';
 import { useTotalUnreadCount } from '../../../src/stores';
 
-const TAB_BAR_HEIGHT = 64;
-const TAB_BAR_MARGIN = 14;
+const TAB_BAR_HEIGHT = 56;
 const TAB_BAR_FLOATING_MARGIN = 12;
+const TAB_BAR_MARGIN = 24;
 
 export default function TabsLayout() {
   const { width } = useWindowDimensions();
@@ -27,19 +27,25 @@ export default function TabsLayout() {
           ? { display: 'none', height: 0, overflow: 'hidden' }
           : {
               position: 'absolute',
-              left: TAB_BAR_MARGIN,
-              right: TAB_BAR_MARGIN,
+              left: 0,
+              right: 0,
+              marginHorizontal: TAB_BAR_MARGIN,
               bottom: TAB_BAR_FLOATING_MARGIN + insets.bottom,
               height: TAB_BAR_HEIGHT,
-              borderRadius: 24,
+              borderRadius: 22,
               backgroundColor: colors.background.paper,
               ...shadows.lg,
               borderTopWidth: 0,
               elevation: 100,
               zIndex: 100,
             },
+        tabBarItemStyle: {
+          borderRadius: 16,
+          marginHorizontal: 2,
+          paddingVertical: 1,
+        },
         tabBarShowLabel: true,
-        tabBarLabelStyle: { fontSize: 12, fontWeight: '600', marginTop: -2 },
+        tabBarLabelStyle: { fontSize: 11, fontWeight: '600', marginTop: -1 },
       }}
     >
       <Tabs.Screen
@@ -49,7 +55,7 @@ export default function TabsLayout() {
           tabBarIcon: ({ color, focused }) => (
             <MaterialCommunityIcons
               name={focused ? 'home' : 'home-outline'}
-              size={focused ? 26 : 24}
+              size={focused ? 24 : 22}
               color={color}
             />
           ),
@@ -63,7 +69,7 @@ export default function TabsLayout() {
           tabBarIcon: ({ color, focused }) => (
             <MaterialCommunityIcons
               name={focused ? 'message-text' : 'message-text-outline'}
-              size={focused ? 26 : 24}
+              size={focused ? 24 : 22}
               color={color}
             />
           ),
@@ -74,7 +80,7 @@ export default function TabsLayout() {
         options={{
           title: '课表',
           tabBarIcon: ({ color, focused }) => (
-            <MaterialCommunityIcons name="calendar-today" size={focused ? 26 : 24} color={color} />
+            <MaterialCommunityIcons name="calendar-today" size={focused ? 24 : 22} color={color} />
           ),
         }}
       />
@@ -85,7 +91,7 @@ export default function TabsLayout() {
           tabBarIcon: ({ color, focused }) => (
             <MaterialCommunityIcons
               name={focused ? 'account' : 'account-outline'}
-              size={focused ? 26 : 24}
+              size={focused ? 24 : 22}
               color={color}
             />
           ),