Browse Source

💄 style(layout): update layout flex styles

- add flex flex-col to main layout containers for better vertical alignment

💄 style(navbar): standardize navbar left icon

- set leftIcon="" for explore, home and profile pages to remove default back button
- maintain consistent navbar appearance across different pages
yourname 4 months ago
parent
commit
7b3858f684

+ 2 - 2
mini/src/layouts/tab-bar-layout.tsx

@@ -48,8 +48,8 @@ export const TabBarLayout: React.FC<TabBarLayoutProps> = ({ children, activeKey
   }
 
   return (
-    <View className="min-h-screen bg-gray-50">
-      <View className="flex-1">
+    <View className="min-h-screen bg-gray-50 flex flex-col">
+      <View className="flex-1 flex flex-col">
         {children}
       </View>
       <TabBar

+ 1 - 0
mini/src/pages/explore/index.tsx

@@ -10,6 +10,7 @@ const ExplorePage: React.FC = () => {
         title="发现"
         rightIcon="i-heroicons-magnifying-glass-20-solid"
         onClickRight={() => console.log('点击搜索')}
+        leftIcon=""
       />
       <View className="px-4 py-4">
         <Text className="text-2xl font-bold text-gray-900">发现页面</Text>

+ 1 - 0
mini/src/pages/index/index.tsx

@@ -13,6 +13,7 @@ const HomePage: React.FC = () => {
         title="首页"
         rightIcon="i-heroicons-bell-20-solid"
         onClickRight={() => console.log('点击通知')}
+        leftIcon=""
       />
       <View className="px-4 py-4">
         <Text className="text-2xl font-bold text-gray-900">欢迎使用</Text>

+ 3 - 3
mini/src/pages/profile/index.tsx

@@ -109,10 +109,9 @@ const ProfilePage: React.FC = () => {
       <TabBarLayout activeKey="profile">
         <Navbar
           title="个人中心"
-          rightIcon="i-heroicons-cog-6-tooth-20-solid"
-          onClickRight={handleSettings}
+          leftIcon=""
         />
-        <View className="flex-1 flex items-center justify-center">
+        <View className="flex-1 flex flex-col items-center justify-center">
           <View className="flex flex-col items-center">
             <View className="i-heroicons-exclamation-circle-20-solid w-12 h-12 text-gray-400 mx-auto mb-4" />
             <Text className="text-gray-600 mb-4">请先登录</Text>
@@ -135,6 +134,7 @@ const ProfilePage: React.FC = () => {
         title="个人中心"
         rightIcon="i-heroicons-cog-6-tooth-20-solid"
         onClickRight={handleSettings}
+        leftIcon=""
       />
       <ScrollView className="flex-1 bg-gray-50">
         {/* 用户信息卡片 */}