Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor(splash-screen): 移除废弃的启动屏配置系统

Browse Source 
简化启动屏组件代码，删除不再使用的splashConfig全局配置、相关工具方法和冗余的布局逻辑，统一进度条展示样式。
This commit is contained in:
ZF Sun
2026-07-13 10:22:45 +08:00
parent aa15518980
commit 3f09dca054
3 changed files with 18 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
components/splash-screen/splash-screen.vue
View File

@@ -2,10 +2,7 @@
<!-- #ifndef APP-PLUS -->
<view v-if="visible" class="splash-screen" :class="{ 'splash-screen--leaving': leaving }">
<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>
@@ -15,36 +12,17 @@
<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>
<!-- 启动期进度条 (透明悬浮, 不干扰极光视觉)
布局: showLabel 和 showPercent 可独立控制
- showLabel=true, showPercent=true: label 在上, percent 在下 (原始布局)
- showLabel=false, showPercent=true: 只有进度条 + percent 在右侧
-->
<view v-if="displayConfig.showProgress">
<!-- 1) inline 模式: showLabel=false, showPercent=true -->
<view v-if="inlineMode" class="splash-screen__progress-row">
<view class="splash-screen__progress-bar splash-screen__progress-bar--inline">
<view class="splash-screen__progress-fill" :style="{ width: percent + '%' }"></view>
</view>
<text class="splash-screen__progress-percent splash-screen__progress-percent--inline">{{ percent }}%</text>
</view>
<!-- 2) 普通模式: 进度条 + label/percent 文本 -->
<view v-else class="splash-screen__progress">
<view v-if="displayConfig.showPercent" class="splash-screen__progress-bar splash-screen__progress-bar--full">
<view class="splash-screen__progress-fill" :style="{ width: percent + '%' }"></view>
</view>
<view v-if="displayConfig.showLabel || displayConfig.showPercent" class="splash-screen__progress-text">
<text v-if="displayConfig.showLabel" class="splash-screen__progress-stage">{{ stageLabel }}</text>
<text v-if="displayConfig.showPercent" class="splash-screen__progress-percent">{{ percent }}%</text>
</view>
<!-- 进度条 + 百分比 -->
<view class="splash-screen__progress">
<text class="splash-screen__progress-percent">{{ percent }}%</text>
<view class="splash-screen__progress-bar">
<view class="splash-screen__progress-fill" :style="{ width: percent + '%' }"></view>
</view>
</view>
</view>
@@ -56,71 +34,18 @@
export default {
name: 'splash-screen',
// props 优先级: 页面级 <splash-screen :hide-label /> > splashState.getSplashConfig()
// 任何 prop 为 undefined 时回退全局, 给业务侧最大灵活性
// 注意: prop 命名前缀 'display' 避免与未来 splash-state 内部字段同名引起 Vue prop-mutation 误判
props: {
hideProgress: {
type: Boolean,
default: undefined
},
hideLabel: {
type: Boolean,
default: undefined
},
hidePercent: {
type: Boolean,
default: undefined
},
},
data() {
return {
// 默认 visible=true: 让 splash 组件一渲染就可见, 减少"白屏闪烁"
// created() 钩子会同步 splashState 状态, 如果 splashState 已 hide, 立刻设 false
// 这样既能保证首屏冷启动可见, 又避免挂载到非 splash 路径时误显示
visible: true,
leaving: false,
percent: 0,
stage: 'boot',
// 内部 showProgress 标志 (保留兼容, 由 created() 维护)
// 实际模板用 displayConfig.showProgress 决定, 这个内部标志走原逻辑
_showProgressLegacy: false,
};
},
computed: {
// 直接从 splashState.STAGES 读取文案, 避免重复维护 STAGE_LABEL
stageLabel() {
const def = splashState.getStageDef(this.stage)
return def ? def.label : this.stage
},
// 显示配置: props 优先 (hide 语义, false=show), 否则回退全局 splashConfig
// 注意: splashConfig 的 show* 是肯定语义 (true=show), 我们这里 hide* 取反
displayConfig() {
const cfg = splashState.getSplashConfig()
return {
showProgress: this.hideProgress !== undefined ? !this.hideProgress : cfg.showProgress,
showLabel: this.hideLabel !== undefined ? !this.hideLabel : cfg.showLabel,
showPercent: this.hidePercent !== undefined ? !this.hidePercent : cfg.showPercent,
}
},
// inline 布局: 只显示百分比 + 进度条 (label 隐藏)
// 此时进度条和百分比在同一水平线 (flex)
inlineMode() {
return this.displayConfig.showPercent && !this.displayConfig.showLabel
},
},
// created (而非 mounted): 提前同步 splashState 状态, 减少"白屏一帧"
created() {
try {
const init = splashState.getProgress()
this.percent = init.percent
this.stage = init.stage
// _showProgressLegacy 控制 progress-fade-in CSS 动画触发
// (true → 触发 CSS 关键帧; false → 隐藏整个进度区)
// 模板用 displayConfig.showProgress 综合 props + splashConfig 决定
this._showProgressLegacy = init.percent > 0
} catch (e) {}
// 同步 splashState 状态: 防止组件挂载在 splash 已 hide 之后误显示
if (!splashState.isShow()) {
this.visible = false
}
@@ -130,28 +55,18 @@
splashState.on('splash:show', () => {
this.visible = true;
this.leaving = false;
// 注意: 不要在这里再读 getProgress(). percent 不允许后退
// 已通过 created() 同步; emit 进来多是无变化
const init = splashState.getProgress()
if (init.percent > this.percent) this.percent = init.percent
if (init.stage !== this.stage) this.stage = init.stage
this._showProgressLegacy = true
});
splashState.on('splash:hide', (info) => {
// 进度条补完到 100% (视觉上"完成"), 立即 leave
if (this.percent < 100) {
this.percent = 100;
this.stage = 'done';
}
// mode='fast' (隐私弹窗即将出现) → 80ms 短动画让 modal 更快接管视觉
const fast = info && info.mode === 'fast'
this._leave(fast)
});
splashState.onProgress((info) => {
// 去重: percent/stage 没变化就不 setState, 避免空 re-render
if (info.percent !== this.percent) this.percent = info.percent
if (info.stage !== this.stage) this.stage = info.stage
this._showProgressLegacy = true;
});
},
beforeDestroy() {
@@ -165,12 +80,6 @@
}
},
methods: {
/**
* 离开 splash
* - 默认: 480ms fade-out 动画 (视觉柔和过渡)
* - 当 privacy 弹窗即将出现时: 用 80ms 短动画, 让 modal 更快接管视觉
* 否则弹窗与 splash 同时显示会有"双遮罩"感
*/
_leave(fast) {
this.leaving = true;
if (this._leaveTimer) clearTimeout(this._leaveTimer);
@@ -185,15 +94,8 @@
</script>
<style lang="scss" scoped>
// ============================================================
// 启动屏 — 极光脉冲
// 中心柔光球呼吸, 三圈粒子轨道旋转, 整体白底 + 蓝紫辉光
// 单一焦点 / 对称结构 / 黄金比例节奏, 跨平台一致
// ============================================================
$accent: #6366F1; // 主色: 靛蓝
$accent-light: #A5B4FC; // 亮部
$accent-deep: #4338CA; // 暗部
$accent: #6366F1;
$accent-light: #A5B4FC;
.splash-screen {
position: fixed;
@@ -216,7 +118,6 @@
}
}
// 启动期进度条 (悬浮在极光下方)
.splash-screen__progress {
position: absolute;
bottom: 120rpx;
@@ -226,79 +127,37 @@
max-width: 80vw;
display: flex;
flex-direction: column;
gap: 16rpx;
align-items: center;
gap: 8rpx;
opacity: 0;
animation: progress-fade-in 0.2s ease-out 0.1s forwards;
}
.splash-screen__progress-bar {
position: relative;
height: 6rpx;
width: 100%;
height: 4rpx;
background: rgba($accent, 0.08);
border-radius: 3rpx;
border-radius: 2rpx;
overflow: hidden;
// inline 模式 (showLabel=false, showPercent=true): 进度条占主宽, 比例调整
&--inline {
flex: 1;
min-width: 0;
}
// full 模式: 原始整条进度条
&--full {
// 默认宽度 100% 由父容器 .splash-screen__progress 提供
width: 100%;
}
}
.splash-screen__progress-fill {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
background: linear-gradient(90deg, $accent-light, $accent);
border-radius: 3rpx;
border-radius: 2rpx;
transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 0 12rpx rgba($accent, 0.4);
}
// 新增: inline row 布局 (showLabel=false + showPercent=true)
// 进度条和百分比在同一水平线: 进度条 + 右侧百分比
.splash-screen__progress-row {
display: flex;
align-items: center;
gap: 12rpx;
width: 100%;
}
.splash-screen__progress-text {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 22rpx;
color: rgba($accent-deep, 0.65);
letter-spacing: 0.5rpx;
}
.splash-screen__progress-stage {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.splash-screen__progress-percent {
font-size: 24rpx;
font-variant-numeric: tabular-nums;
font-weight: 500;
color: $accent;
// inline 模式: 字号略大, 与进度条同行
&--inline {
flex-shrink: 0;
font-size: 24rpx;
min-width: 72rpx;
text-align: right;
}
}
@keyframes progress-fade-in {
@@ -306,7 +165,6 @@
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
// 容器: 480rpx 见方, 居中
.splash-screen__field {
position: relative;
width: 480rpx;
@@ -314,11 +172,9 @@
display: flex;
align-items: center;
justify-content: center;
// 入场: 缩放 + 透明度, 弹性曲线 (优化: 0.8s -> 0.4s 减少首屏延迟)
animation: field-enter 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
// 中心大光晕: 覆盖整个 field, 营造氛围
.splash-screen__aura {
position: absolute;
width: 480rpx;
@@ -333,7 +189,6 @@
animation: aura-breathe 3.6s ease-in-out infinite;
}
// 中心星核
.splash-screen__core {
position: relative;
width: 36rpx;
@@ -345,7 +200,6 @@
animation: core-pulse 2.4s ease-in-out infinite;
}
// 星核外层光晕: 跟随呼吸
.splash-screen__core-halo {
position: absolute;
width: 120rpx;
@@ -357,7 +211,6 @@
animation: halo-expand 2.4s ease-in-out infinite;
}
// 星核本体: 渐变球体
.splash-screen__core-body {
position: relative;
width: 36rpx;
@@ -367,15 +220,14 @@
#EEF2FF 0%,
$accent-light 35%,
$accent 70%,
$accent-deep 100%);
#4338CA 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 -3rpx 6rpx rgba(#4338CA, 0.5),
inset 2rpx 2rpx 4rpx rgba(255, 255, 255, 0.5);
}
// 轨道
.splash-screen__orbit {
position: absolute;
top: 50%;
@@ -412,7 +264,6 @@
}
}
// 粒子: 沿轨道运动, 起始位置在轨道顶部
.splash-screen__particle {
position: absolute;
top: 50%;
@@ -455,11 +306,6 @@
}
}
// ============================================================
// 动画
// ============================================================
// 容器入场
@keyframes field-enter {
0% {
opacity: 0;
@@ -471,7 +317,6 @@
}
}
// 中心光晕呼吸
@keyframes aura-breathe {
0%, 100% {
transform: scale(1);
@@ -483,7 +328,6 @@
}
}
// 中心星核呼吸
@keyframes core-pulse {
0%, 100% {
transform: scale(1);
@@ -493,7 +337,6 @@
}
}
// 星核光晕扩散
@keyframes halo-expand {
0%, 100% {
transform: scale(1);
@@ -505,7 +348,6 @@
}
}
// 轨道旋转
@keyframes orbit-rotate {
from {
transform: rotate(0deg);
@@ -514,4 +356,4 @@
transform: rotate(360deg);
}
}
</style>
</style>