wangjunxiao/tianshu-engine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: App.vue updates

Browse Source
This commit is contained in:
cocos02
2026-06-12 21:43:53 +08:00
parent 5a4acfc6bb
commit 7a802cdb02
1 changed files with 34 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/App.vue
View File

@@ -40,6 +40,7 @@ const promptToast = ref('')
const showPromptToast = ref(false) const showPromptToast = ref(false)
const showIntro = ref(false) const showIntro = ref(false)
const introWatched = ref(false) const introWatched = ref(false)
const introStarted = ref(false)
const introVideoRef = ref<HTMLVideoElement | null>(null) const introVideoRef = ref<HTMLVideoElement | null>(null)
const menuVideoRef = ref<HTMLVideoElement | null>(null) const menuVideoRef = ref<HTMLVideoElement | null>(null)
const showTopBar = ref(true) const showTopBar = ref(true)
@@ -87,6 +88,15 @@ function onIntroEnded() {
showIntro.value = false showIntro.value = false
} }
function onIntroClick() {
if (!introStarted.value) {
introStarted.value = true
introVideoRef.value?.play().catch(() => {})
} else if (introWatched.value) {
skipIntro()
}
}
function skipIntro() { function skipIntro() {
saveSystem.markWatched('__intro__') saveSystem.markWatched('__intro__')
showIntro.value = false showIntro.value = false
@@ -292,9 +302,10 @@ init()
<div class="app-container"> <div class="app-container">
<div v-if="loading" class="loading">{{ t('ui.loading') }}</div> <div v-if="loading" class="loading">{{ t('ui.loading') }}</div>
<template v-else> <template v-else>
<div v-if="showIntro" class="intro-overlay" @click="skipIntro"> <div v-if="showIntro" class="intro-overlay" @click="onIntroClick">
<video ref="introVideoRef" :src="store.introVideo" class="intro-video" autoplay @ended="onIntroEnded"></video> <video ref="introVideoRef" :src="store.introVideo" class="intro-video" @ended="onIntroEnded"></video>
<button v-if="introWatched" class="intro-skip-btn" @click.stop="skipIntro">{{ t('ui.skip') }}</button> <div v-if="!introStarted" class="intro-start-prompt">点击开始</div>
<button v-if="introWatched && introStarted" class="intro-skip-btn" @click.stop="skipIntro">{{ t('ui.skip') }}</button>
</div> </div>
<div v-if="store.menuVideo && (!started || store.gameEnded)" class="menu-bg"> <div v-if="store.menuVideo && (!started || store.gameEnded)" class="menu-bg">
@@ -548,6 +559,26 @@ html, body {
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
} }
.intro-start-prompt {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 18px 48px;
font-size: 22px;
color: #fff;
background: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 6px;
letter-spacing: 4px;
cursor: pointer;
transition: background 0.2s;
}
.intro-start-prompt:hover {
background: rgba(0, 0, 0, 0.8);
}
.menu-bg { .menu-bg {
position: fixed; position: fixed;
inset: 0; inset: 0;