用户端小程序修改

apps/mini-user/src/components/PageNavBar.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import { View, Text } from '@tarojs/components';
-import { subPageNavBarStyle, useNavBarMetrics } from '../lib/nav-bar';
+import { subPageNavBarStyle, subPageNavContentStyle, useNavBarMetrics } from '../lib/nav-bar';
 
 type PageNavBarProps = {
   title: string;
@@ -25,23 +25,25 @@ export default function PageNavBar({
       className={`page-nav-bar${solid ? ' page-nav-bar--solid' : ''}`}
       style={subPageNavBarStyle(metrics)}
     >
+      <Text
+        className={`page-nav-bar__title${titleVisible ? ' page-nav-bar__title--visible' : ''}`}
+      >
+        {title}
+      </Text>
       <View
         className="page-nav-bar__content"
-        style={{ height: `${metrics.navContentHeight}px` }}
+        style={subPageNavContentStyle(metrics)}
       >
         {onBack ? (
-          <View className="page-nav-bar__btn" onClick={onBack}>
+          <View className="page-nav-bar__btn page-nav-bar__btn--back" onClick={onBack}>
             <Text className="page-nav-bar__icon">‹</Text>
           </View>
         ) : (
-          <View className="page-nav-bar__btn page-nav-bar__btn--placeholder" />
+          <View className="page-nav-bar__btn page-nav-bar__btn--back page-nav-bar__btn--placeholder" />
+        )}
+        {right ?? (
+          <View className="page-nav-bar__btn page-nav-bar__btn--right page-nav-bar__btn--placeholder" />
         )}
-        <Text
-          className={`page-nav-bar__title${titleVisible ? ' page-nav-bar__title--visible' : ''}`}
-        >
-          {title}
-        </Text>
-        {right ?? <View className="page-nav-bar__btn page-nav-bar__btn--placeholder" />}
       </View>
     </View>
   );

apps/mini-user/src/components/SubPageHeader.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import { View, Text } from '@tarojs/components';
 import Taro from '@tarojs/taro';
-import { subPageNavBarStyle, useNavBarMetrics } from '../lib/nav-bar';
+import { subPageNavBarStyle, subPageNavContentStyle, useNavBarMetrics } from '../lib/nav-bar';
 
 type SubPageHeaderProps = {
   title: string;
@@ -28,14 +28,14 @@ export default function SubPageHeader({ title, onBack, right }: SubPageHeaderPro
 
   return (
     <View className="sub-page-header" style={subPageNavBarStyle(metrics)}>
+      <Text className="sub-page-header__title">{title}</Text>
       <View
         className="sub-page-header__content"
-        style={{ height: `${metrics.navContentHeight}px` }}
+        style={subPageNavContentStyle(metrics)}
       >
         <View className="sub-page-header__back" onClick={handleBack}>
           <Text className="sub-page-header__back-icon">‹</Text>
         </View>
-        <Text className="sub-page-header__title">{title}</Text>
         {right ? <View className="sub-page-header__right">{right}</View> : null}
       </View>
     </View>

apps/mini-user/src/components/TabMainHeader.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import { View, Text } from '@tarojs/components';
-import { navBarStyle, useNavBarMetrics } from '../lib/nav-bar';
+import { navBarStyle, tabNavContentStyle, useNavBarMetrics } from '../lib/nav-bar';
 
 type TabMainHeaderProps = {
   title: string;
@@ -13,11 +13,11 @@ export default function TabMainHeader({ title, extra }: TabMainHeaderProps) {
 
   return (
     <View className="tab-main-header" style={navBarStyle(metrics)}>
+      <Text className="tab-main-header__title">{title}</Text>
       <View
         className="tab-main-header__content"
-        style={{ height: `${metrics.navContentHeight}px` }}
+        style={tabNavContentStyle(metrics)}
       >
-        <Text className="tab-main-header__title">{title}</Text>
         {extra ? <View className="tab-main-header__extra">{extra}</View> : null}
       </View>
     </View>