From 08e4d866f5ad0a955592876c129b5ee614add769 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Fri, 10 Jul 2026 09:47:17 +0800
Subject: [PATCH] feat: add version watermark and optimize title tap logic
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
1. 为diy-group组件添加loaded事件通知渲染完成
2. 调整构建时间为北京时间并格式化展示
3. 新增版本水印组件，在diy渲染完成后显示
4. 将标题连击触发版本信息的次数从5次改为3次
5. 移除旧的隐形触发区域，将触发逻辑绑定到水印
---
components-diy/diy-group.vue | 4 +++
pages/index/index.vue | 47 +++++++++++++++++++---------------
pages/index/public/js/index.js | 34 +++++++++++++++++++-----
vue.config.js | 2 +-
4 files changed, 58 insertions(+), 29 deletions(-)
diff --git a/components-diy/diy-group.vue b/components-diy/diy-group.vue
index c303cb5..5794df5 100644
--- 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 '';
diff --git a/pages/index/index.vue b/pages/index/index.vue
index fbc0739..e5d7916 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -9,7 +9,7 @@
- {{ siteInfo.site_name }}
+ {{ siteInfo.site_name }}
{{ followOfficialAccount.welcomeMsg }}
@@ -24,7 +24,8 @@
:scrollTop="scrollTop" :diyGlobal="diyData.global" class="diy-index-page">
+ :haveTopCategory="true" :followOfficialAccount="followOfficialAccount"
+ @loaded="onDiyGroupLoaded" />
@@ -32,10 +33,15 @@
+ :style="{ backgroundImage: backgroundUrl, paddingTop: paddingTop, marginTop: marginTop, paddingBottom: '80rpx' }">
+ :followOfficialAccount="followOfficialAccount" @loaded="onDiyGroupLoaded" />
+
+
+ {{ versionWatermark }}
+
+
@@ -140,8 +146,6 @@
-
-
@@ -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;
}
\ No newline at end of file
diff --git a/pages/index/public/js/index.js b/pages/index/public/js/index.js
index 20a75be..c96c54b 100644
--- 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('未获取到构建版本信息');
}
}
}
diff --git a/vue.config.js b/vue.config.js
index 6ca8872..2fd8ffb 100644
--- 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-* 等平台）