From 88921e61d22e29a0211e7722c49fa039f4750b64 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Mon, 13 Jul 2026 10:54:17 +0800
Subject: [PATCH] =?UTF-8?q?fix(splash-screen):=20=E4=BF=AE=E5=A4=8DH5?=
 =?UTF-8?q?=E7=8E=AF=E5=A2=83=E4=B8=8B=E5=90=AF=E5=8A=A8=E5=B1=8F=E5=85=B3?=
 =?UTF-8?q?=E9=97=AD=E5=90=8E=E9=A1=B5=E9=9D=A2=E7=A9=BA=E7=99=BD=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题根源分析:
1. diy-group 的 mounted() 在组件挂载时就触发了，但此时 diyData 还没有数据
2.
otifyMounted() 在组件 mount 时立即关闭了 H5 的 uni.showLoading()，但页面内容还没就绪
3. 导致启动屏关闭后，首页内容还是空白的

修复方案:
1. 在 diy-group.vue 中，将 loaded 事件的触发时机改为 diyData watch 中，确保数据加载完成后再通知
2. 在 splash-state.js 中，
otifyMounted() 不再立即关闭 H5 原生 loading，等待页面就绪后由 _doHide() 统一关闭
3. 在 index.js 中，onDiyGroupLoaded() 延迟 500ms 再通知页面就绪，确保内容渲染完成
---
 common/js/splash-state.js      |  7 +------
 components-diy/diy-group.vue   | 13 ++++++++++---
 pages/index/public/js/index.js |  5 ++++-
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/common/js/splash-state.js b/common/js/splash-state.js
index 10fb2aa..b34a6d9 100644
--- a/common/js/splash-state.js
+++ b/common/js/splash-state.js
@@ -231,17 +231,12 @@ class SplashState {
 	 * 组件 mount 后通知 state 模块
 	 * - 标记 _hasMounted
 	 * - 如果有 _pendingHide, 触发真关
-	 * - H5 降级场景: 立即关掉原生 loading, 让 splash 组件接管视觉
+	 * - H5 降级场景: 不再立即关掉原生 loading, 等待页面就绪后再关
 	 */
 	notifyMounted() {
 		if (this._hasMounted) return;
 		this._hasMounted = true;
-		// H5 降级: 立即关掉原生 loading, 避免和 splash 组件重叠
-		if (useNativeLoading()) {
-			try { uni.hideLoading(); } catch (e) {}
-		}
 		if (this._pendingHide) {
-			// 给组件一帧时间渲染, 再隐藏 (避免一帧闪烁)
 			setTimeout(() => this._flushPendingHide(), 50);
 		}
 	}
diff --git a/components-diy/diy-group.vue b/components-diy/diy-group.vue
index 5794df5..edc192d 100644
--- a/components-diy/diy-group.vue
+++ b/components-diy/diy-group.vue
@@ -300,6 +300,7 @@ export default {
 			handler() {
 				this.diyGlobalData = this.diyData ? this.$util.deepClone(this.diyData) : null;
 				this.processData();
+				this._notifyLoaded();
 			},
 			deep: true
 		}
@@ -308,8 +309,9 @@ export default {
 		this.processData();
 	},
 	mounted() {
-		// 通知父组件 diy-group 内容已渲染完毕
-		this.$emit('loaded');
+		if (this.diyData && this.diyData.value) {
+			this._notifyLoaded();
+		}
 	},
 	computed: {
 		topNavColor() {
@@ -323,7 +325,6 @@ export default {
 			
 			return topNavColor;
 		},
-		// 过滤组件的渲染
 		diyDataArray() {
 			if (!this.processedData) {
 				this.processData();
@@ -347,6 +348,12 @@ export default {
 		}
 	},
 	methods: {
+		_notifyLoaded() {
+			if (this._loadedTimer) clearTimeout(this._loadedTimer);
+			this._loadedTimer = setTimeout(() => {
+				this.$emit('loaded');
+			}, 300);
+		},
 		processData() {
 			if (!this.diyGlobalData || !this.diyGlobalData.value) {
 				this.processedData = [];
diff --git a/pages/index/public/js/index.js b/pages/index/public/js/index.js
index 3fef1eb..b15c395 100644
--- a/pages/index/public/js/index.js
+++ b/pages/index/public/js/index.js
@@ -127,9 +127,12 @@ export default {
 		},
 		// diy-group 渲染完毕回调, 用于触发版本水印等延后显示元素
 		// 同时通知 splash-state 页面就绪, 启动屏可以关闭
+		// 延迟 500ms 是为了确保页面内容有足够时间渲染
 		onDiyGroupLoaded() {
 			this.diyGroupReady = true;
-			try { splashState.notifyPageReady(); } catch (e) {}
+			setTimeout(() => {
+				try { splashState.notifyPageReady(); } catch (e) {}
+			}, 500);
 		},
 		/**
 		 * 版本连击 3 次以上显示构建版本信息（供测试人员使用）