feat(navBar): 新增自定义导航栏组件，接入详细报告与我的页面

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-08-20 08:42:21 +08:00
parent 48ac39f0e0
commit f13edf31b7
16 changed files with 714 additions and 8 deletions
@@ -0,0 +1,53 @@
+/**
+ * 获取自定义导航栏布局参数，应用启动时调用一次存入 globalData，
+ * 各页面直接从 getApp().globalData.navBarLayout 取值即可。
+ *
+ * 布局示意：
+ * ┌──────────────────────────────────┐
+ * │           状态栏 (statusBar)       │  ← statusBarHeight
+ * ├──────────────────────────────────┤  ← navContentTop
+ * │  ┌─┐ ┌─────────┐     ┌──────┐   │
+ * │  │←│ │  标题    │     │ 胶囊 │   │  ← navBarHeight
+ * │  └─┘ └─────────┘     └──────┘   │
+ * └──────────────────────────────────┘
+ * |← capsuleLeft →|        |← capRight →|
+ * |←          windowWidth             →|
+ *
+ * 返回键放置示例（非 tabBar 页面）：
+ *   判断显示：getCurrentPages().length > 1
+ *   WXML:
+ *     <view class="back-btn"
+ *           style="top: {{navContentTop}}px; height: {{navBarHeight}}px;
+ *                  line-height: {{navBarHeight}}px;"
+ *           bind:tap="onBack">← 返回</view>
+ */
+export const getNavBarLayout = () => {
+	const sys = wx.getWindowInfo();
+	const capsule = wx.getMenuButtonBoundingClientRect();
+	const statusBarHeight = sys.statusBarHeight || 0;
+	const navBarHeight = capsule.height + (capsule.top - statusBarHeight) * 2;
+	return {
+		/** 状态栏高度 */
+		statusBarHeight,
+		/** 导航栏内容区高度（不含状态栏） */
+		navBarHeight,
+		/** 状态栏 + 导航栏总高度，页面顶部占位直接设这个即可 */
+		totalNavHeight: statusBarHeight + navBarHeight,
+		/** 导航栏内容区起始 Y 坐标（状态栏底部），放置返回键、标题等元素以此为 top */
+		navContentTop: statusBarHeight,
+		/** 屏幕宽度 */
+		windowWidth: sys.windowWidth,
+		/** 胶囊按钮宽度 */
+		capsuleWidth: capsule.width,
+		/** 胶囊按钮高度 */
+		capsuleHeight: capsule.height,
+		/** 胶囊按钮距屏幕顶部距离，垂直对齐自定义元素时以此为基准 */
+		capsuleTop: capsule.top,
+		/** 胶囊按钮距屏幕左侧距离 */
+		capsuleLeft: capsule.left,
+		/** 胶囊按钮距屏幕右侧距离 */
+		capsuleRight: sys.windowWidth - capsule.right,
+		/** 导航栏右侧安全内边距，避免内容被胶囊遮挡 */
+		navPaddingRight: sys.windowWidth - capsule.left,
+	};
+};