小程序修改

apps/mini-user/src/lib/nav-bar.ts

@@ -10,6 +10,8 @@ export type NavBarMetrics = {
   navContentHeight: number;
   /** 右侧留白，避免与微信胶囊按钮重叠 */
   navBarPaddingRight: number;
+  /** 左侧留白，与右侧对称以实现标题视觉居中 */
+  navBarPaddingLeft: number;
 };
 
 const H5_FALLBACK: NavBarMetrics = {
@@ -17,6 +19,7 @@ const H5_FALLBACK: NavBarMetrics = {
   navBarHeight: 56,
   navContentHeight: 56,
   navBarPaddingRight: 16,
+  navBarPaddingLeft: 16,
 };
 
 const WEAPP_FALLBACK: NavBarMetrics = {
@@ -24,6 +27,7 @@ const WEAPP_FALLBACK: NavBarMetrics = {
   navBarHeight: 64,
   navContentHeight: 44,
   navBarPaddingRight: 96,
+  navBarPaddingLeft: 96,
 };
 
 /** 计算小程序自定义导航栏尺寸（对齐微信胶囊按钮） */
@@ -51,6 +55,7 @@ export function getNavBarMetrics(): NavBarMetrics {
       navBarHeight,
       navContentHeight,
       navBarPaddingRight,
+      navBarPaddingLeft: navBarPaddingRight,
     };
   } catch {
     return WEAPP_FALLBACK;
@@ -68,15 +73,33 @@ export function pageShellCssVars(metrics: NavBarMetrics): Record<string, string>
     '--nav-content-height': `${metrics.navContentHeight}px`,
     '--nav-status-bar-height': `${metrics.statusBarHeight}px`,
     '--nav-padding-right': `${metrics.navBarPaddingRight}px`,
+    '--nav-padding-left': `${metrics.navBarPaddingLeft}px`,
   };
 }
 
-/** 顶栏自身样式：statusBar padding + 总高 + 右侧胶囊避让 */
+/** 顶栏自身样式：statusBar padding + 总高 + 左右对称胶囊避让 */
 export function navBarStyle(metrics: NavBarMetrics): Record<string, string | number> {
   return {
     paddingTop: `${metrics.statusBarHeight}px`,
     height: `${metrics.navBarHeight}px`,
+    paddingLeft: `${metrics.navBarPaddingLeft}px`,
     paddingRight: `${metrics.navBarPaddingRight}px`,
     ...pageShellCssVars(metrics),
   };
 }
+
+/** 子页顶栏：左侧为返回按钮预留与右侧胶囊等宽空间 */
+export function subPageNavBarStyle(metrics: NavBarMetrics): Record<string, string | number> {
+  const paddingSide = Math.max(48, metrics.navBarPaddingRight);
+  return {
+    paddingTop: `${metrics.statusBarHeight}px`,
+    height: `${metrics.navBarHeight}px`,
+    paddingLeft: `${paddingSide}px`,
+    paddingRight: `${paddingSide}px`,
+    '--nav-bar-height': `${metrics.navBarHeight}px`,
+    '--nav-content-height': `${metrics.navContentHeight}px`,
+    '--nav-status-bar-height': `${metrics.statusBarHeight}px`,
+    '--nav-padding-right': `${paddingSide}px`,
+    '--nav-padding-left': `${paddingSide}px`,
+  };
+}