feat: Implement mobile tab navigation and enhance responsive layout for better user experience

.claude/settings.local.json

@@ -8,7 +8,10 @@
       "Bash(yarn prebuild-tv:*)",
       "Bash(mkdir:*)",
       "Bash(yarn lint:*)",
-      "Bash(yarn add:*)"
+      "Bash(yarn add:*)",
+      "Bash(git reset:*)",
+      "Bash(git add:*)",
+      "Bash(git commit:*)"
     ],
     "deny": []
   }

app/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useCallback, useRef, useState } from "react";
-import { View, StyleSheet, ActivityIndicator, FlatList, Pressable, Animated } from "react-native";
+import { View, StyleSheet, ActivityIndicator, FlatList, Pressable, Animated, StatusBar } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ThemedView } from "@/components/ThemedView";
 import { ThemedText } from "@/components/ThemedText";
 import { api } from "@/services/api";
@@ -21,6 +22,7 @@ export default function HomeScreen() {
   const colorScheme = "dark";
   const [selectedTag, setSelectedTag] = useState<string | null>(null);
   const fadeAnim = useRef(new Animated.Value(0)).current;
+  const insets = useSafeAreaInsets();
 
   // 响应式布局配置
   const responsiveConfig = useResponsiveLayout();
@@ -169,7 +171,7 @@ export default function HomeScreen() {
   const dynamicStyles = StyleSheet.create({
     container: {
       flex: 1,
-      paddingTop: deviceType === 'mobile' ? 0 : 40,
+      paddingTop: deviceType === 'mobile' ? insets.top : 40,
     },
     headerContainer: {
       flexDirection: "row",
@@ -198,10 +200,10 @@ export default function HomeScreen() {
       paddingHorizontal: spacing,
     },
     categoryButton: {
-      paddingHorizontal: spacing / 2,
+      paddingHorizontal: deviceType === 'tv' ? spacing / 4 : spacing / 2,
-      paddingVertical: spacing / 2,
+      paddingVertical: deviceType === 'tv' ? spacing / 4 : spacing / 2,
       borderRadius: deviceType === 'mobile' ? 6 : 8,
-      marginHorizontal: spacing / 2,
+      marginHorizontal: deviceType === 'tv' ? spacing / 4 : spacing / 2,
     },
     categoryText: {
       fontSize: deviceType === 'mobile' ? 14 : 16,
@@ -214,6 +216,9 @@ export default function HomeScreen() {
 
   const content = (
     <ThemedView style={[commonStyles.container, dynamicStyles.container]}>
+      {/* 状态栏 */}
+      {deviceType === 'mobile' && <StatusBar barStyle="light-content" />}
+      
       {/* 顶部导航 */}
       {renderHeader()}
 

components/CustomScrollView.tsx

@@ -93,38 +93,35 @@ const CustomScrollView: React.FC<CustomScrollViewProps> = ({
   const dynamicStyles = StyleSheet.create({
     listContent: {
       paddingBottom: responsiveConfig.spacing * 2,
+      paddingHorizontal: responsiveConfig.spacing / 2,
     },
-    rowContainer: {
+    gridContainer: {
       flexDirection: "row",
-      justifyContent: responsiveConfig.deviceType === 'mobile' ? "space-around" : "flex-start",
       flexWrap: "wrap",
-      marginBottom: responsiveConfig.spacing / 2,
+      justifyContent: "space-evenly",
     },
     itemContainer: {
-      marginHorizontal: responsiveConfig.spacing / 2,
+      width: responsiveConfig.cardWidth,
-      alignItems: "center",
+      marginBottom: responsiveConfig.spacing,
     },
   });
 
   return (
     <ScrollView 
-      contentContainerStyle={[commonStyles.gridContainer, dynamicStyles.listContent]} 
+      contentContainerStyle={dynamicStyles.listContent} 
       onScroll={handleScroll} 
       scrollEventThrottle={16}
       showsVerticalScrollIndicator={responsiveConfig.deviceType !== 'tv'}
     >
       {data.length > 0 ? (
         <>
-          {/* Render content in a responsive grid layout */}
+          <View style={dynamicStyles.gridContainer}>
-          {Array.from({ length: Math.ceil(data.length / effectiveColumns) }).map((_, rowIndex) => (
+            {data.map((item, index) => (
-            <View key={rowIndex} style={dynamicStyles.rowContainer}>
+              <View key={index} style={dynamicStyles.itemContainer}>
-              {data.slice(rowIndex * effectiveColumns, (rowIndex + 1) * effectiveColumns).map((item, index) => (
+                {renderItem({ item, index })}
-                <View key={index} style={dynamicStyles.itemContainer}>
+              </View>
-                  {renderItem({ item, index: rowIndex * effectiveColumns + index })}
+            ))}
-                </View>
+          </View>
-              ))}
-            </View>
-          ))}
           {renderFooter()}
         </>
       ) : (

components/VideoCard.mobile.tsx

@@ -179,7 +179,6 @@ const createMobileStyles = (cardWidth: number, cardHeight: number, spacing: numb
   return StyleSheet.create({
     wrapper: {
       width: cardWidth,
-      marginHorizontal: spacing / 2,
       marginBottom: spacing,
     },
     pressable: {

components/navigation/MobileTabContainer.tsx

@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import { View, StyleSheet, TouchableOpacity, Text, Platform } from 'react-native';
+import { useRouter, usePathname } from 'expo-router';
+import { Home, Search, Heart, Settings, Tv } from 'lucide-react-native';
+import { Colors } from '@/constants/Colors';
+import { useResponsiveLayout } from '@/hooks/useResponsiveLayout';
+import { DeviceUtils } from '@/utils/DeviceUtils';
+
+interface TabItem {
+  key: string;
+  label: string;
+  icon: React.ComponentType<any>;
+  route: string;
+}
+
+const tabs: TabItem[] = [
+  { key: 'home', label: '首页', icon: Home, route: '/' },
+  { key: 'search', label: '搜索', icon: Search, route: '/search' },
+  { key: 'live', label: '直播', icon: Tv, route: '/live' },
+  { key: 'favorites', label: '收藏', icon: Heart, route: '/favorites' },
+  { key: 'settings', label: '设置', icon: Settings, route: '/settings' },
+];
+
+interface MobileTabContainerProps {
+  children: React.ReactNode;
+}
+
+const MobileTabContainer: React.FC<MobileTabContainerProps> = ({ children }) => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const { spacing } = useResponsiveLayout();
+  
+  const handleTabPress = (route: string) => {
+    if (route === '/') {
+      router.push('/');
+    } else {
+      router.push(route as any);
+    }
+  };
+
+  const isTabActive = (route: string) => {
+    if (route === '/' && pathname === '/') return true;
+    if (route !== '/' && pathname === route) return true;
+    return false;
+  };
+
+  const dynamicStyles = createStyles(spacing);
+
+  return (
+    <View style={dynamicStyles.container}>
+      {/* 内容区域 */}
+      <View style={dynamicStyles.content}>
+        {children}
+      </View>
+      
+      {/* 底部导航栏 */}
+      <View style={dynamicStyles.tabBar}>
+        {tabs.map((tab) => {
+          const isActive = isTabActive(tab.route);
+          const IconComponent = tab.icon;
+          
+          return (
+            <TouchableOpacity
+              key={tab.key}
+              style={[dynamicStyles.tab, isActive && dynamicStyles.activeTab]}
+              onPress={() => handleTabPress(tab.route)}
+              activeOpacity={0.7}
+            >
+              <IconComponent
+                size={20}
+                color={isActive ? Colors.dark.primary : '#888'}
+                strokeWidth={isActive ? 2.5 : 2}
+              />
+              <Text style={[
+                dynamicStyles.tabLabel,
+                isActive && dynamicStyles.activeTabLabel
+              ]}>
+                {tab.label}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    </View>
+  );
+};
+
+const createStyles = (spacing: number) => {
+  const minTouchTarget = DeviceUtils.getMinTouchTargetSize();
+  
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    content: {
+      flex: 1,
+    },
+    tabBar: {
+      flexDirection: 'row',
+      backgroundColor: '#1c1c1e',
+      borderTopWidth: 1,
+      borderTopColor: '#333',
+      paddingTop: spacing / 2,
+      paddingBottom: Platform.OS === 'ios' ? spacing * 2 : spacing,
+      paddingHorizontal: spacing,
+      shadowColor: '#000',
+      shadowOffset: {
+        width: 0,
+        height: -2,
+      },
+      shadowOpacity: 0.1,
+      shadowRadius: 4,
+      elevation: 10,
+    },
+    tab: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: minTouchTarget,
+      paddingVertical: spacing / 2,
+      borderRadius: 8,
+    },
+    activeTab: {
+      backgroundColor: 'rgba(64, 156, 255, 0.1)',
+    },
+    tabLabel: {
+      fontSize: 11,
+      color: '#888',
+      marginTop: 2,
+      fontWeight: '500',
+    },
+    activeTabLabel: {
+      color: Colors.dark.primary,
+      fontWeight: '600',
+    },
+  });
+};
+
+export default MobileTabContainer;

components/navigation/ResponsiveNavigation.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useResponsiveLayout } from '@/hooks/useResponsiveLayout';
-import MobileBottomTabNavigator from './MobileBottomTabNavigator';
+import MobileTabContainer from './MobileTabContainer';
 import TabletSidebarNavigator from './TabletSidebarNavigator';
 
 interface ResponsiveNavigationProps {
@@ -13,14 +13,8 @@ const ResponsiveNavigation: React.FC<ResponsiveNavigationProps> = ({ children })
 
   switch (deviceType) {
     case 'mobile':
-      return (
+      // 移动端使用Tab容器包装children
-        <View style={styles.container}>
+      return <MobileTabContainer>{children}</MobileTabContainer>;
-          <View style={styles.content}>
-            {children}
-          </View>
-          <MobileBottomTabNavigator />
-        </View>
-      );
     
     case 'tablet':
       return (

hooks/useResponsiveLayout.ts

@@ -38,14 +38,15 @@ const getLayoutConfig = (deviceType: DeviceType, width: number, height: number,
 
   switch (deviceType) {
     case 'mobile':
-      columns = isPortrait ? 2 : 3;
+      columns = isPortrait ? 3 : 4;
-      cardWidth = (width - spacing * (columns + 1)) / columns;
+      // 使用flex布局，卡片可以更大一些来填充空间
-      cardHeight = cardWidth * 1.5; // 2:3 aspect ratio
+      cardWidth = (width - spacing) / columns * 0.85; // 增大到85%
+      cardHeight = cardWidth * 1.2; // 5:6 aspect ratio (reduced from 2:3)
       break;
     
     case 'tablet':
       columns = isPortrait ? 3 : 4;
-      cardWidth = (width - spacing * (columns + 1)) / columns;
+      cardWidth = (width - spacing) / columns * 0.85; // 增大到85%
       cardHeight = cardWidth * 1.4; // slightly less tall ratio
       break;