登录页面

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

@@ -1,16 +1,25 @@
 import type { ReactNode } from 'react';
 import { View, Text } from '@tarojs/components';
+import { navBarStyle, useNavBarMetrics } from '../lib/nav-bar';
 
 type TabMainHeaderProps = {
   title: string;
   extra?: ReactNode;
 };
 
+/** Tab 页顶栏：适配刘海屏 + 微信胶囊避让 */
 export default function TabMainHeader({ title, extra }: TabMainHeaderProps) {
+  const metrics = useNavBarMetrics();
+
   return (
-    <View className="tab-main-header">
-      <Text className="tab-main-header__title">{title}</Text>
-      {extra ? <View className="tab-main-header__extra">{extra}</View> : null}
+    <View className="tab-main-header" style={navBarStyle(metrics)}>
+      <View
+        className="tab-main-header__content"
+        style={{ height: `${metrics.navContentHeight}px` }}
+      >
+        <Text className="tab-main-header__title">{title}</Text>
+        {extra ? <View className="tab-main-header__extra">{extra}</View> : null}
+      </View>
     </View>
   );
 }