feat(vr page): 优化VR页面导航体验，添加返回主页按钮并修复返回逻辑

1. 移除旧的自定义返回图标，改用cover-view兼容web-view层级问题
2. 新增主页导航按钮，支持一键返回首页
3. 完善返回逻辑，处理页面栈仅当前页的异常返回场景
4. 调整导航按钮样式，添加半透明背景和圆形布局

pages_tool/vr/index.vue

@@ -1,53 +1,82 @@
-<template>
-	<view :style="themeColor">
-		<view class="iconfont iconshang navigate-back" @click="navigateBack"></view>
-		<web-view :src="src"></web-view>
-		<!-- 底部tabBar -->
-		<!-- <view id="tab-bar">
-			<diy-bottom-nav></diy-bottom-nav>
-		</view>			 -->
-	</view>
-</template>
-
-<script>
-export default {
-	data() {
-		return {
-			src: ''
-		};
-	},
-	onLoad(option) {
-		// this.src = decodeURIComponent(option.src);
-		this.$api.sendRequest({
-			url: '/api/config/defaultvr',
-			success: res => {
-				if (res.code == 0) {
-					uni.setNavigationBarTitle({
-						title:res.data.title
-					})
-					this.src = res.data.url
-				}
-			},
-			fail: res => {
-			}
-		});
-	},
-	methods: {
-		navigateBack() {
-			uni.navigateBack({
-				delta: 1
-			});
-		}
-	}
-};
-</script>
-
-<style lang="scss">
-.navigate-back {
-	position: absolute;
-	top: 34rpx;
-	left: 34rpx;
-	z-index: 5;
-	font-size: $font-size-toolbar;
-}
-</style>
+<template>
+	<view :style="themeColor">
+		<web-view :src="src"></web-view>
+		<!-- 顶部导航覆盖层:使用 cover-view 兼容微信小程序的 web-view 原生组件 -->
+		<cover-view class="vr-nav-back icondiy icon-system-arrow-go-back-line" @click="navigateBack"></cover-view>
+		<cover-view class="vr-nav-home icondiy icon-system-home-2-line" @click="goHome"></cover-view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			src: ''
+		};
+	},
+	onLoad(option) {
+		// this.src = decodeURIComponent(option.src);
+		this.$api.sendRequest({
+			url: '/api/config/defaultvr',
+			success: res => {
+				if (res.code == 0) {
+					uni.setNavigationBarTitle({
+						title:res.data.title
+					})
+					this.src = res.data.url
+				}
+			},
+			fail: res => {
+			}
+		});
+	},
+	methods: {
+		navigateBack() {
+			const pages = getCurrentPages();
+			if (pages.length > 1) {
+				uni.navigateBack({
+					delta: 1
+				});
+			} else {
+				// 直接进入的场景(分享链接 / 外部链接 / 扫码等),页面栈只有当前页,
+				// navigateBack 会失败。重定向到首页,保证用户能离开 VR 页面。
+				uni.reLaunch({
+					url: this.$util.PAGE_KEY_MAP.PAGE_INDEX
+				});
+			}
+		},
+		goHome() {
+			uni.reLaunch({
+				url: this.$util.PAGE_KEY_MAP.PAGE_INDEX
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.vr-nav-back,
+.vr-nav-home {
+	position: absolute;
+	top: 34rpx;
+	z-index: 5;
+	width: 72rpx;
+	height: 72rpx;
+	background-color: rgba(0, 0, 0, 0.5);
+	color: #fff;
+	border-radius: 50%;
+	text-align: center;
+	box-sizing: border-box;
+}
+
+.vr-nav-back {
+	left: 34rpx;
+	line-height: 60rpx;
+}
+
+.vr-nav-home {
+	right: 34rpx;
+	font-size: 40rpx;
+	line-height: 72rpx;
+}
+</style>