登录页面

2026-07-12 15:17:54 +08:00
parent becf91da52
commit bfac6c6663
63 changed files with 4662 additions and 431 deletions
@@ -0,0 +1,82 @@
+import { useMemo } from 'react';
+import Taro from '@tarojs/taro';
+
+export type NavBarMetrics = {
+  /** 状态栏高度（刘海/灵动岛上方） */
+  statusBarHeight: number;
+  /** 导航栏总高度 = 状态栏 + 内容区 */
+  navBarHeight: number;
+  /** 标题栏内容区高度（与胶囊对齐） */
+  navContentHeight: number;
+  /** 右侧留白，避免与微信胶囊按钮重叠 */
+  navBarPaddingRight: number;
+};
+
+const H5_FALLBACK: NavBarMetrics = {
+  statusBarHeight: 0,
+  navBarHeight: 56,
+  navContentHeight: 56,
+  navBarPaddingRight: 16,
+};
+
+const WEAPP_FALLBACK: NavBarMetrics = {
+  statusBarHeight: 20,
+  navBarHeight: 64,
+  navContentHeight: 44,
+  navBarPaddingRight: 96,
+};
+
+/** 计算小程序自定义导航栏尺寸（对齐微信胶囊按钮） */
+export function getNavBarMetrics(): NavBarMetrics {
+  if (process.env.TARO_ENV === 'h5') {
+    return H5_FALLBACK;
+  }
+
+  try {
+    const win = Taro.getWindowInfo?.() ?? Taro.getSystemInfoSync();
+    const menu = Taro.getMenuButtonBoundingClientRect();
+    const statusBarHeight = win.statusBarHeight ?? WEAPP_FALLBACK.statusBarHeight;
+    const navContentHeight =
+      menu.height > 0
+        ? (menu.top - statusBarHeight) * 2 + menu.height
+        : WEAPP_FALLBACK.navContentHeight;
+    const navBarHeight = statusBarHeight + navContentHeight;
+    const navBarPaddingRight =
+      menu.width > 0
+        ? Math.max(win.windowWidth - menu.left + 8, 16)
+        : WEAPP_FALLBACK.navBarPaddingRight;
+
+    return {
+      statusBarHeight,
+      navBarHeight,
+      navContentHeight,
+      navBarPaddingRight,
+    };
+  } catch {
+    return WEAPP_FALLBACK;
+  }
+}
+
+export function useNavBarMetrics(): NavBarMetrics {
+  return useMemo(() => getNavBarMetrics(), []);
+}
+
+/** 仅注入 CSS 变量，供 PageShell / sticky 子元素使用（不加 height/padding） */
+export function pageShellCssVars(metrics: NavBarMetrics): Record<string, string> {
+  return {
+    '--nav-bar-height': `${metrics.navBarHeight}px`,
+    '--nav-content-height': `${metrics.navContentHeight}px`,
+    '--nav-status-bar-height': `${metrics.statusBarHeight}px`,
+    '--nav-padding-right': `${metrics.navBarPaddingRight}px`,
+  };
+}
+
+/** 顶栏自身样式：statusBar padding + 总高 + 右侧胶囊避让 */
+export function navBarStyle(metrics: NavBarMetrics): Record<string, string | number> {
+  return {
+    paddingTop: `${metrics.statusBarHeight}px`,
+    height: `${metrics.navBarHeight}px`,
+    paddingRight: `${metrics.navBarPaddingRight}px`,
+    ...pageShellCssVars(metrics),
+  };
+}