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

import { Platform, useWindowDimensions } from 'react-native';
import { Tabs } from 'expo-router';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

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_FLOATING_MARGIN = 12;

export default function TabsLayout() {
  const { width } = useWindowDimensions();
  const insets = useSafeAreaInsets();
  const unreadCount = useTotalUnreadCount();
  const hideTabBar = Platform.OS === 'web' && width >= BREAKPOINTS.desktop;

  return (
    <Tabs
      screenOptions={{
        headerShown: false,
        tabBarActiveTintColor: colors.primary.main,
        tabBarInactiveTintColor: colors.text.secondary,
        tabBarStyle: hideTabBar
          ? { display: 'none', height: 0, overflow: 'hidden' }
          : {
              position: 'absolute',
              left: TAB_BAR_MARGIN,
              right: TAB_BAR_MARGIN,
              bottom: TAB_BAR_FLOATING_MARGIN + insets.bottom,
              height: TAB_BAR_HEIGHT,
              borderRadius: 24,
              backgroundColor: colors.background.paper,
              ...shadows.lg,
              borderTopWidth: 0,
              elevation: 100,
              zIndex: 100,
            },
        tabBarShowLabel: true,
        tabBarLabelStyle: { fontSize: 12, fontWeight: '600', marginTop: -2 },
      }}
    >
      <Tabs.Screen
        name="home"
        options={{
          title: '首页',
          tabBarIcon: ({ color, focused }) => (
            <MaterialCommunityIcons
              name={focused ? 'home' : 'home-outline'}
              size={focused ? 26 : 24}
              color={color}
            />
          ),
        }}
      />
      <Tabs.Screen
        name="messages"
        options={{
          title: '消息',
          tabBarBadge: unreadCount > 0 ? (unreadCount > 99 ? 99 : unreadCount) : undefined,
          tabBarIcon: ({ color, focused }) => (
            <MaterialCommunityIcons
              name={focused ? 'message-text' : 'message-text-outline'}
              size={focused ? 26 : 24}
              color={color}
            />
          ),
        }}
      />
      <Tabs.Screen
        name="schedule"
        options={{
          title: '课表',
          tabBarIcon: ({ color, focused }) => (
            <MaterialCommunityIcons name="calendar-today" size={focused ? 26 : 24} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: '我的',
          tabBarIcon: ({ color, focused }) => (
            <MaterialCommunityIcons
              name={focused ? 'account' : 'account-outline'}
              size={focused ? 26 : 24}
              color={color}
            />
          ),
        }}
      />
    </Tabs>
  );
}