From 5cfee417be48b012d8556059a8eea9a5caa88934 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Wed, 1 Jul 2026 15:43:41 +0800
Subject: [PATCH] =?UTF-8?q?refactor(splash-screen):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E5=90=AF=E5=8A=A8=E5=B1=8FUI=E4=B8=8E=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重写启动屏的模板结构与样式，替换原有简单logo加载动画为带光晕、轨道粒子的全新动效，优化过渡动画时长与曲线，简化冗余的生命周期注释代码
---
 components/splash-screen/splash-screen.vue | 294 +++++++++++++++------
 1 file changed, 215 insertions(+), 79 deletions(-)

diff --git a/components/splash-screen/splash-screen.vue b/components/splash-screen/splash-screen.vue
index cbfb52e..1dc1f60 100644
--- a/components/splash-screen/splash-screen.vue
+++ b/components/splash-screen/splash-screen.vue
@@ -1,16 +1,25 @@
 <template>
 	<!-- #ifndef APP-PLUS -->
 	<view v-if="visible" class="splash-screen" :class="{ 'splash-screen--leaving': leaving }">
-		<view class="splash-screen__bg"></view>
-		<view class="splash-screen__content">
-			<view class="splash-screen__logo">
-				<view class="splash-screen__logo-inner">S</view>
+		<view class="splash-screen__field">
+			<!-- 中心大光晕: 整片柔光铺底 -->
+			<view class="splash-screen__aura"></view>
+
+			<!-- 三圈轨道: 由内到外, 描边极淡 -->
+			<view class="splash-screen__orbit splash-screen__orbit--1">
+				<view class="splash-screen__particle splash-screen__particle--1"></view>
 			</view>
-			<view class="splash-screen__name">Shop</view>
-			<view class="splash-screen__loader">
-				<view class="splash-screen__dot"></view>
-				<view class="splash-screen__dot"></view>
-				<view class="splash-screen__dot"></view>
+			<view class="splash-screen__orbit splash-screen__orbit--2">
+				<view class="splash-screen__particle splash-screen__particle--2"></view>
+			</view>
+			<view class="splash-screen__orbit splash-screen__orbit--3">
+				<view class="splash-screen__particle splash-screen__particle--3"></view>
+			</view>
+
+			<!-- 中心星核: 渐变球体 + 内反光 + 外发光 -->
+			<view class="splash-screen__core">
+				<view class="splash-screen__core-halo"></view>
+				<view class="splash-screen__core-body"></view>
 			</view>
 		</view>
 	</view>
@@ -29,14 +38,10 @@
 			};
 		},
 		mounted() {
-			// 1) 启动时同步读取状态 (防止 mount 前已经 hide 的情况)
 			if (splashState.isShow()) {
 				this.visible = true;
 			}
-			// 2) 通知 state 模块: 组件已 mount
-			//    如果此时 splashState 有 _pendingHide (软隐藏), 会触发真关
 			splashState.notifyMounted();
-			// 3) 监听后续事件
 			splashState.on('splash:show', () => {
 				this.visible = true;
 				this.leaving = false;
@@ -56,19 +61,28 @@
 		},
 		methods: {
 			_leave() {
-				// 触发淡出动画,动画结束再 unmount
 				this.leaving = true;
 				if (this._leaveTimer) clearTimeout(this._leaveTimer);
 				this._leaveTimer = setTimeout(() => {
 					this.visible = false;
 					this.leaving = false;
-				}, 320);
+				}, 480);
 			}
 		}
 	};
 </script>
 
 <style lang="scss" scoped>
+	// ============================================================
+	// 启动屏 — 极光脉冲
+	//   中心柔光球呼吸, 三圈粒子轨道旋转, 整体白底 + 蓝紫辉光
+	//   单一焦点 / 对称结构 / 黄金比例节奏, 跨平台一致
+	// ============================================================
+
+	$accent: #6366F1;          // 主色: 靛蓝
+	$accent-light: #A5B4FC;    // 亮部
+	$accent-deep: #4338CA;     // 暗部
+
 	.splash-screen {
 		position: fixed;
 		top: 0;
@@ -79,100 +93,222 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		background: #ffffff;
+		overflow: hidden;
 		opacity: 1;
-		transition: opacity 0.3s ease;
+		transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
 
 		&--leaving {
 			opacity: 0;
 		}
 	}
 
-	.splash-screen__bg {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
-	}
-
-	.splash-screen__content {
+	// 容器: 480rpx 见方, 居中
+	.splash-screen__field {
 		position: relative;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.splash-screen__logo {
-		width: 96rpx;
-		height: 96rpx;
-		border-radius: 24rpx;
-		background: #FF0036;
+		width: 480rpx;
+		height: 480rpx;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		box-shadow: 0 8rpx 24rpx rgba(255, 0, 54, 0.18);
-		animation: splash-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+		// 入场: 缩放 + 透明度, 弹性曲线
+		animation: field-enter 0.8s cubic-bezier(0.34, 1.4, 0.64, 1) both;
 	}
 
-	.splash-screen__logo-inner {
-		color: #fff;
-		font-size: 56rpx;
-		font-weight: 700;
-		font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
-	}
-
-	.splash-screen__name {
-		margin-top: 28rpx;
-		font-size: 32rpx;
-		font-weight: 600;
-		color: #333;
-		letter-spacing: 1rpx;
-	}
-
-	.splash-screen__loader {
-		margin-top: 48rpx;
-		display: flex;
-		gap: 12rpx;
-	}
-
-	.splash-screen__dot {
-		width: 12rpx;
-		height: 12rpx;
+	// 中心大光晕: 覆盖整个 field, 营造氛围
+	.splash-screen__aura {
+		position: absolute;
+		width: 480rpx;
+		height: 480rpx;
 		border-radius: 50%;
-		background: #FF0036;
-		opacity: 0.4;
-		animation: splash-bounce 1.2s ease-in-out infinite;
+		background: radial-gradient(circle,
+			rgba($accent-light, 0.35) 0%,
+			rgba($accent, 0.18) 25%,
+			rgba($accent, 0.05) 50%,
+			rgba($accent, 0) 75%);
+		box-shadow: 0 0 200rpx rgba($accent, 0.15);
+		animation: aura-breathe 3.6s ease-in-out infinite;
+	}
 
-		&:nth-child(2) {
-			animation-delay: 0.15s;
+	// 中心星核
+	.splash-screen__core {
+		position: relative;
+		width: 36rpx;
+		height: 36rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 2;
+		animation: core-pulse 2.4s ease-in-out infinite;
+	}
+
+	// 星核外层光晕: 跟随呼吸
+	.splash-screen__core-halo {
+		position: absolute;
+		width: 120rpx;
+		height: 120rpx;
+		border-radius: 50%;
+		background: radial-gradient(circle,
+			rgba($accent, 0.5) 0%,
+			rgba($accent, 0) 60%);
+		animation: halo-expand 2.4s ease-in-out infinite;
+	}
+
+	// 星核本体: 渐变球体
+	.splash-screen__core-body {
+		position: relative;
+		width: 36rpx;
+		height: 36rpx;
+		border-radius: 50%;
+		background: radial-gradient(circle at 35% 30%,
+			#EEF2FF 0%,
+			$accent-light 35%,
+			$accent 70%,
+			$accent-deep 100%);
+		box-shadow:
+			0 0 24rpx rgba($accent, 0.6),
+			0 0 48rpx rgba($accent, 0.3),
+			inset -2rpx -3rpx 6rpx rgba($accent-deep, 0.5),
+			inset 2rpx 2rpx 4rpx rgba(255, 255, 255, 0.5);
+	}
+
+	// 轨道
+	.splash-screen__orbit {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		border-radius: 50%;
+		pointer-events: none;
+		transform-origin: center;
+
+		&--1 {
+			width: 160rpx;
+			height: 160rpx;
+			margin-top: -80rpx;
+			margin-left: -80rpx;
+			border: 1rpx solid rgba($accent, 0.18);
+			animation: orbit-rotate 6s linear infinite;
 		}
 
-		&:nth-child(3) {
-			animation-delay: 0.3s;
+		&--2 {
+			width: 260rpx;
+			height: 260rpx;
+			margin-top: -130rpx;
+			margin-left: -130rpx;
+			border: 1rpx solid rgba($accent, 0.1);
+			animation: orbit-rotate 10s linear infinite reverse;
+		}
+
+		&--3 {
+			width: 360rpx;
+			height: 360rpx;
+			margin-top: -180rpx;
+			margin-left: -180rpx;
+			border: 1rpx solid rgba($accent, 0.06);
+			animation: orbit-rotate 16s linear infinite;
 		}
 	}
 
-	@keyframes splash-pop {
+	// 粒子: 沿轨道运动, 起始位置在轨道顶部
+	.splash-screen__particle {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		border-radius: 50%;
+		background: radial-gradient(circle at 30% 30%,
+			#EEF2FF 0%,
+			$accent-light 40%,
+			$accent 100%);
+
+		&--1 {
+			width: 18rpx;
+			height: 18rpx;
+			margin-top: -9rpx;
+			margin-left: -9rpx;
+			transform: translateY(-80rpx);
+			box-shadow:
+				0 0 24rpx rgba($accent, 0.7),
+				0 0 8rpx rgba(255, 255, 255, 0.6);
+		}
+
+		&--2 {
+			width: 14rpx;
+			height: 14rpx;
+			margin-top: -7rpx;
+			margin-left: -7rpx;
+			transform: translateY(-130rpx);
+			box-shadow:
+				0 0 18rpx rgba($accent, 0.5),
+				0 0 4rpx rgba(255, 255, 255, 0.5);
+		}
+
+		&--3 {
+			width: 10rpx;
+			height: 10rpx;
+			margin-top: -5rpx;
+			margin-left: -5rpx;
+			transform: translateY(-180rpx);
+			box-shadow: 0 0 14rpx rgba($accent, 0.4);
+		}
+	}
+
+	// ============================================================
+	// 动画
+	// ============================================================
+
+	// 容器入场
+	@keyframes field-enter {
 		0% {
-			transform: scale(0.6);
 			opacity: 0;
+			transform: scale(0.85);
 		}
 		100% {
+			opacity: 1;
 			transform: scale(1);
+		}
+	}
+
+	// 中心光晕呼吸
+	@keyframes aura-breathe {
+		0%, 100% {
+			transform: scale(1);
+			opacity: 0.85;
+		}
+		50% {
+			transform: scale(1.08);
 			opacity: 1;
 		}
 	}
 
-	@keyframes splash-bounce {
-		0%, 80%, 100% {
-			transform: scale(0.7);
-			opacity: 0.4;
-		}
-		40% {
+	// 中心星核呼吸
+	@keyframes core-pulse {
+		0%, 100% {
 			transform: scale(1);
-			opacity: 1;
+		}
+		50% {
+			transform: scale(1.1);
+		}
+	}
+
+	// 星核光晕扩散
+	@keyframes halo-expand {
+		0%, 100% {
+			transform: scale(1);
+			opacity: 0.7;
+		}
+		50% {
+			transform: scale(1.5);
+			opacity: 0.3;
+		}
+	}
+
+	// 轨道旋转
+	@keyframes orbit-rotate {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
 		}
 	}
 </style>