Files
Starlight_Lancher/apps/app-frontend/src/components/ui/AboutScene.vue
T
Disy 5d473ebfbc
Axolotl desktop CI / guardrails (push) Has been cancelled
Axolotl desktop CI / desktop (macos-latest) (push) Has been cancelled
Axolotl desktop CI / desktop (ubuntu-latest) (push) Has been cancelled
Axolotl desktop CI / desktop (windows-latest) (push) Has been cancelled
Axolotl desktop CI / website (push) Has been cancelled
Repository checks / typos (push) Has been cancelled
Repository checks / tombi (push) Has been cancelled
Rust checks / shear (push) Has been cancelled
Sync source to CNB / Sync Git ref (push) Has been cancelled
Sync LobeHub models / sync (push) Has been cancelled
feat: 关于页接入凋灵胜利循环动画
将关于页顶部的旧展示替换为已确认的凋灵胜利场景,加入像素月亮、方块云、下界之星浮动旋转、附魔闪光、护盾闪烁和消散粒子。

素材随启动器本地打包,保持 3:1 构图;页面隐藏、切换或场景彩蛋覆盖时暂停渲染,退出后释放绘图资源,并兼容系统减少动态效果设置。

验证:前端构建、组件类型检查、动画暂停恢复及尺寸适配检查通过;本地启动器编译通过,并确认可执行文件已包含新场景素材和页面代码。
2026-09-15 00:11:59 +08:00

45 lines
1.1 KiB
Vue

<template>
<canvas ref="canvas" class="about-scene" aria-hidden="true" />
</template>
<script setup lang="ts">
import { onActivated, onDeactivated, onMounted, onScopeDispose, useTemplateRef, watch } from 'vue'
import { createWitherVictoryScene } from './about-scene/wither-victory'
const props = defineProps<{ paused?: boolean }>()
const canvas = useTemplateRef<HTMLCanvasElement>('canvas')
let scene: ReturnType<typeof createWitherVictoryScene> | undefined
let active = true
function updatePlayback() {
scene?.setPaused(!active || Boolean(props.paused))
}
onMounted(() => {
if (!canvas.value) return
scene = createWitherVictoryScene(canvas.value)
updatePlayback()
scene.ready.catch((error: unknown) => console.warn('Unable to load about-page scene', error))
})
watch(() => props.paused, updatePlayback)
onActivated(() => {
active = true
updatePlayback()
})
onDeactivated(() => {
active = false
updatePlayback()
})
onScopeDispose(() => scene?.dispose())
</script>
<style scoped>
.about-scene {
display: block;
width: 100%;
height: 100%;
background: #0c1729;
}
</style>