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,5 @@
+{
+	"component": true,
+	"usingComponents": {},
+	"multipleSlots": true
+}
@@ -0,0 +1,60 @@
+.nav-spacer {
+	width: 100%;
+}
+
+.nav-wrap {
+	width: 100%;
+}
+
+.nav-content {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	position: relative;
+	box-sizing: border-box;
+}
+
+.nav-left {
+	height: 100%;
+	flex-shrink: 0;
+	z-index: 1;
+	display: flex;
+	align-items: center;
+}
+
+.back-btn {
+	width: 60rpx;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.back-arrow {
+	width: 18rpx;
+	height: 18rpx;
+	border-left: 4rpx solid #252535;
+	border-bottom: 4rpx solid #252535;
+	transform: rotate(45deg);
+}
+
+.nav-center {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 0;
+	pointer-events: none;
+}
+
+.nav-title {
+	color: #252535;
+	font-size: 16px;
+	font-weight: bold;
+	line-height: 1;
+	pointer-events: auto;
+}
@@ -0,0 +1,61 @@
+import { getNavBarLayout } from '../../utils/navBar/index';
+
+Component({
+	options: {
+		multipleSlots: true,
+	},
+
+	properties: {
+		title: { type: String, value: '' },
+		back: { type: String, value: 'auto' },
+		fixed: { type: Boolean, value: false },
+		zIndex: { type: Number, value: 100 },
+		bgColor: { type: String, value: 'transparent' },
+		color: { type: String, value: '#252535' },
+		arrowColor: { type: String, value: '#252535' },
+	},
+
+	data: {
+		statusBarHeight: 0,
+		navBarHeight: 44,
+		totalNavHeight: 0,
+		navPaddingRight: 0,
+		_showBack: false,
+		_spacerHeight: 'auto',
+		_navStyle: '',
+	},
+
+	lifetimes: {
+		attached() {
+			const layout = getApp<IAppOption>().globalData.navBarLayout || getNavBarLayout();
+			this._applyLayout(layout);
+		},
+	},
+
+	observers: {
+		'fixed, back, zIndex'(_fixed: boolean, _back: string, _zIndex: number) {
+			const layout = getApp<IAppOption>().globalData.navBarLayout || getNavBarLayout();
+			this._applyLayout(layout);
+		},
+	},
+
+	methods: {
+		_applyLayout(layout: ReturnType<typeof getNavBarLayout>) {
+			const { fixed, back, zIndex } = this.properties;
+			const _showBack = back === 'show' || (back === 'auto' && getCurrentPages().length > 1);
+
+			this.setData({
+				...layout,
+				_showBack,
+				_spacerHeight: fixed ? layout.totalNavHeight + 'px' : 'auto',
+				_navStyle: fixed
+					? `position: fixed; top: 0; left: 0; right: 0; z-index: ${zIndex};`
+					: '',
+			});
+		},
+
+		onBack() {
+			wx.navigateBack({ delta: 1 });
+		},
+	},
+});
@@ -0,0 +1,18 @@
+<view class="nav-spacer" style="height: {{_spacerHeight}}; {{_navStyle}}">
+	<view class="nav-wrap" style="background-color: {{bgColor}};">
+		<view style="height: {{statusBarHeight}}px;"></view>
+		<view class="nav-content" style="height: {{navBarHeight}}px; padding-right: {{navPaddingRight}}px;">
+			<view class="nav-left">
+				<block wx:if="{{_showBack}}">
+					<view class="back-btn" bind:tap="onBack">
+						<view class="back-arrow" style="border-left-color: {{arrowColor}}; border-bottom-color: {{arrowColor}};"></view>
+					</view>
+				</block>
+				<slot name="left" />
+			</view>
+			<view class="nav-center">
+				<text class="nav-title" style="color: {{color}};">{{title}}</text>
+			</view>
+		</view>
+	</view>
+</view>