feat: add version watermark and optimize title tap logic

1. 为diy-group组件添加loaded事件通知渲染完成 2. 调整构建时间为北京时间并格式化展示 3. 新增版本水印组件，在diy渲染完成后显示 4. 将标题连击触发版本信息的次数从5次改为3次 5. 移除旧的隐形触发区域，将触发逻辑绑定到水印
2026-07-10 09:47:17 +08:00
parent d4794a7be4
commit 08e4d866f5
4 changed files with 58 additions and 29 deletions
--- a/components-diy/diy-group.vue
+++ b/components-diy/diy-group.vue
@@ -307,6 +307,10 @@ export default {
 	created() {
 		this.processData();
 	},
+	mounted() {
+		// 通知父组件 diy-group 内容已渲染完毕
+		this.$emit('loaded');
+	},
 	computed: {
 		topNavColor() {
 			if (!this.diyData?.global) return '';
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -9,7 +9,7 @@
 						<image :src="$util.img(siteInfo.logo_square)" mode="aspectFill"></image>
 					</view>
 					<view class="info-box" :style="{ color: '#ffffff' }">
-						<text class="font-size-base" @tap="onTitleTap">{{ siteInfo.site_name }}</text>
+						<text class="font-size-base">{{ siteInfo.site_name }}</text>
 						<text>{{ followOfficialAccount.welcomeMsg }}</text>
 					</view>
 				</view>
@@ -24,7 +24,8 @@
 				:scrollTop="scrollTop" :diyGlobal="diyData.global" class="diy-index-page">
 				<template v-slot:components>
 					<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop"
-						:haveTopCategory="true" :followOfficialAccount="followOfficialAccount" />
+						:haveTopCategory="true" :followOfficialAccount="followOfficialAccount"
+						@loaded="onDiyGroupLoaded" />
 				</template>
 				<template v-slot:default>
 					<ns-copyright v-show="isShowCopyRight" />
@@ -32,10 +33,15 @@
 			</diy-index-page>

 			<view v-else class="bg-index"
-				:style="{ backgroundImage: backgroundUrl, paddingTop: paddingTop, marginTop: marginTop }">
+				:style="{ backgroundImage: backgroundUrl, paddingTop: paddingTop, marginTop: marginTop, paddingBottom: '80rpx' }">
 				<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop"
-					:followOfficialAccount="followOfficialAccount" />
+					:followOfficialAccount="followOfficialAccount" @loaded="onDiyGroupLoaded" />
 				<ns-copyright v-show="isShowCopyRight" />
+				<view class="version-watermark-wrap">
+					<view class="version-watermark" v-if="versionWatermark && diyGroupReady" @tap="onVersionTap">
+						<text>{{ versionWatermark }}</text>
+					</view>
+				</view>
 			</view>

 			<template v-if="adv.advshow != -1">
@@ -140,8 +146,6 @@
 			<privacy-popup ref="privacyPopup"></privacy-popup>
 			<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
 			<ns-login ref="login"></ns-login>
-			<!-- 版本信息触发区（固定定位，不可见，始终可点击） -->
-			<view class="version-trigger" @tap="onTitleTap"></view>
 			<!-- 启动屏: 由 splash-state 状态控制, 仅在 boot 阶段显示 -->
 			<splash-screen />
 		</view>
@@ -247,20 +251,21 @@ export default {
 	/* #endif */
 }

-.version-trigger {
-	position: fixed;
-	/* 1. 从 50rpx 上移到 130rpx:
-	 *    避开 tab-bar(z-index 998, 高度约 110-130rpx),避免被遮挡。
-	 *    H5 to-top 在 200rpx,MP to-top 在 180rpx,130+50=180rpx 不会与 to-top 冲突。
-	 * 2. 从 50rpx 加大到 80rpx 宽 / 50rpx 高:提升小屏触摸命中率
-	 * 3. z-index 从 999 升到 2147483647:必须 ≥ to-top,确保不被任何浮层拦截
-	 * 4. 加 pointer-events: auto:防止被父级样式隐式禁用 */
-	right: 0;
-	bottom: 130rpx;
-	width: 80rpx;
-	height: 50rpx;
-	z-index: 2147483647;
-	background: transparent;
-	pointer-events: auto;
+.version-watermark-wrap {
+	text-align: center;
+	padding: 18rpx 0 24rpx;
+}
+
+.version-watermark {
+	display: inline-block;
+	font-size: 12rpx;
+	line-height: 1.3;
+	letter-spacing: -0.3rpx;
+	white-space: nowrap;
+	color: rgba(226, 226, 226, 0.2);
+	text-shadow:
+		0 1rpx 0 rgba(255, 255, 255, 0.9),
+		0 -1rpx 0 rgba(0, 0, 0, 0.06);
+	user-select: none;
 }
 </style>
--- a/pages/index/public/js/index.js
+++ b/pages/index/public/js/index.js
@@ -4,9 +4,22 @@ export default {
 			minScrollTop: 100, // 设置回到顶端按钮显示要求，最小页面滚动距离
 			wechatQrcode: '', // 公众号二维码
 			diyRoute: '/pages/index/index',
-			shopInfo: null // 店铺信息
+			shopInfo: null, // 店铺信息
+			diyGroupReady: false // diy-group 内容是否已渲染完毕(用于控制版本水印显示时机)
 		};
 	},
+	computed: {
+		versionWatermark() {
+			let v = null;
+			try {
+				v = typeof __app_version !== 'undefined' ? __app_version : null;
+			} catch (e) {}
+			if (!v || !v.commitId || !v.buildTime) return '';
+			const date = String(v.buildTime).slice(0, 16).replace('T', ' ');
+			const commit = String(v.commitId);
+			return `Ver.${date} · ${commit}`;
+		}
+	},
 	// 鸿蒙元服务环境: 系统 TabBar 点击 uni.switchTab 静默失败
 	// 手动接管 onTabItemTap, 用 uni.reLaunch 兜底, 确保 TabBar 跳转在鸿蒙下也能工作
 	// #ifdef MP-HARMONY
@@ -32,6 +45,9 @@ export default {

 		// 获取店铺信息
 		this.shopInfo = uni.getStorageSync('shopInfo');
+
+		// 每次进入页面重置 diy-group 加载状态, 避免缓存的 ready 导致水印提前显示
+		this.diyGroupReady = false;
 	},
 	onShow() {
 		// 获取关注公众号二维码
@@ -107,20 +123,24 @@ export default {
 			// 阻止事件继续传播
 			return false;
 		},
+		// diy-group 渲染完毕回调, 用于触发版本水印等延后显示元素
+		onDiyGroupLoaded() {
+			this.diyGroupReady = true;
+		},
 		/**
-		 * 标题连击 5 次显示构建版本信息（供测试人员使用）
+		 * 版本连击 3 次显示构建版本信息（供测试人员使用）
 		 */
-		onTitleTap() {
+		onVersionTap() {
 			this._titleTapCount = (this._titleTapCount || 0) + 1;
 			if (this._titleTapTimer) {
 				clearTimeout(this._titleTapTimer);
 			}
-			if (this._titleTapCount >= 5) {
+			if (this._titleTapCount >= 3) {
 				this._titleTapCount = 0;
 				this._showVersionInfo();
 				return;
 			}
-			// 2 秒内未达到 5 次则重置计数
+			// 2 秒内未达到 3 次则重置计数
 			this._titleTapTimer = setTimeout(() => {
 				this._titleTapCount = 0;
 			}, 2000);
@@ -132,12 +152,12 @@ export default {
 			} catch (e) {}
 			if (v && v.commitId) {
 				uni.showModal({
-					title: '构建版本信息',
+					title: '版本信息',
 					content: `提交 ID: ${v.commitId}\n构建时间: ${v.buildTime}`,
 					showCancel: false
 				});
 			} else {
-				console.log('未获取到构建版本信息');
+				console.error('未获取到构建版本信息');
 			}
 		}
 	}
--- a/vue.config.js
+++ b/vue.config.js
@@ -207,7 +207,7 @@ class VersionInjectPlugin {
        }
      }

-      const versionData = { commitId: this._cachedCommitId, buildTime: new Date().toISOString() };
+      const versionData = { commitId: this._cachedCommitId, buildTime: new Date(new Date().getTime() + 8 * 3600 * 1000).toISOString().slice(0, 16).replace('T', ' ') };
      const inlineVersion = JSON.stringify(versionData);

      // 尝试注入到 vendor.js（mp-weixin / mp-* 等平台）