feat(tabs): 添加个人页面标签并重构标签栏布局

- 新增个人页面标签和对应的页面文件
- 将标签栏布局从垂直改为水平排列
- 隐藏顶部标题栏以提供更简洁的界面
- 调整选中状态下的内边距和间距
- 将界面文本本地化为中文
- 在图标映射中添加person图标支持

app/(tabs)/_layout.tsx

@@ -17,6 +17,7 @@ export default function TabLayout() {
           pathname.includes(routeName);
 
         return {
+          headerShown: false,
           tabBarActiveTintColor: '#192126',
           tabBarButton: (props) => {
             const { children, onPress } = props;
@@ -35,14 +36,13 @@ export default function TabLayout() {
                   flex: 1,
                   alignItems: 'center',
                   justifyContent: 'center',
-                  flexDirection: 'column',
+                  flexDirection: 'row',
                   marginHorizontal: 6,
                   marginVertical: 10,
                   borderRadius: 25,
                   backgroundColor: isSelected ? '#BBF246' : 'transparent',
-                  paddingHorizontal: isSelected ? 24 : 12,
+                  paddingHorizontal: isSelected ? 16 : 8,
                   paddingVertical: 8,
-                  minWidth: isSelected ? 140 : 48,
                 }}
               >
                 {children}
@@ -81,11 +81,11 @@ export default function TabLayout() {
       <Tabs.Screen
         name="index"
         options={{
-          title: 'Home',
+          title: '首页',
           tabBarIcon: ({ color }) => {
             const isHomeSelected = pathname === '/' || pathname === '/index';
             return (
-              <View style={{ flexDirection: 'column', alignItems: 'center' }}>
+              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                 <IconSymbol size={22} name="house.fill" color={color} />
                 {isHomeSelected && (
                   <Text
@@ -94,12 +94,11 @@ export default function TabLayout() {
                       color: color,
                       fontSize: 12,
                       fontWeight: '600',
-                      marginTop: 4,
+                      marginLeft: 6,
                       textAlign: 'center',
                       flexShrink: 0,
-                      minWidth: 60,
                     }}>
-                    Home
+                    首页
                   </Text>
                 )}
               </View>
@@ -110,11 +109,11 @@ export default function TabLayout() {
       <Tabs.Screen
         name="explore"
         options={{
-          title: 'Explore',
+          title: '探索',
           tabBarIcon: ({ color }) => {
             const isExploreSelected = pathname === '/explore';
             return (
-              <View style={{ flexDirection: 'column', alignItems: 'center' }}>
+              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                 <IconSymbol size={22} name="paperplane.fill" color={color} />
                 {isExploreSelected && (
                   <Text
@@ -123,12 +122,40 @@ export default function TabLayout() {
                       color: color,
                       fontSize: 12,
                       fontWeight: '600',
-                      marginTop: 4,
+                      marginLeft: 6,
                       textAlign: 'center',
                       flexShrink: 0,
-                      minWidth: 60,
                     }}>
-                    Explore
+                    探索
+                  </Text>
+                )}
+              </View>
+            );
+          },
+        }}
+      />
+
+      <Tabs.Screen
+        name="personal"
+        options={{
+          title: '个人',
+          tabBarIcon: ({ color }) => {
+            const isPersonalSelected = pathname === '/personal';
+            return (
+              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                <IconSymbol size={22} name="person.fill" color={color} />
+                {isPersonalSelected && (
+                  <Text
+                    numberOfLines={1}
+                    style={{
+                      color: color,
+                      fontSize: 12,
+                      fontWeight: '600',
+                      marginLeft: 6,
+                      textAlign: 'center',
+                      flexShrink: 0,
+                    }}>
+                    个人
                   </Text>
                 )}
               </View>