From 7a802cdb02508fce5954f7479c3212eace2a0aad Mon Sep 17 00:00:00 2001
From: cocos02 <cocos02@163.com>
Date: Fri, 12 Jun 2026 21:43:53 +0800
Subject: [PATCH] chore: App.vue updates

---
 src/App.vue | 37 ++++++++++++++++++++++++++++++++++---
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 91250c6..41bd051 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -40,6 +40,7 @@ const promptToast = ref('')
 const showPromptToast = ref(false)
 const showIntro = ref(false)
 const introWatched = ref(false)
+const introStarted = ref(false)
 const introVideoRef = ref<HTMLVideoElement | null>(null)
 const menuVideoRef = ref<HTMLVideoElement | null>(null)
 const showTopBar = ref(true)
@@ -87,6 +88,15 @@ function onIntroEnded() {
   showIntro.value = false
 }
 
+function onIntroClick() {
+  if (!introStarted.value) {
+    introStarted.value = true
+    introVideoRef.value?.play().catch(() => {})
+  } else if (introWatched.value) {
+    skipIntro()
+  }
+}
+
 function skipIntro() {
   saveSystem.markWatched('__intro__')
   showIntro.value = false
@@ -292,9 +302,10 @@ init()
   <div class="app-container">
     <div v-if="loading" class="loading">{{ t('ui.loading') }}</div>
     <template v-else>
-      <div v-if="showIntro" class="intro-overlay" @click="skipIntro">
-        <video ref="introVideoRef" :src="store.introVideo" class="intro-video" autoplay @ended="onIntroEnded"></video>
-        <button v-if="introWatched" class="intro-skip-btn" @click.stop="skipIntro">{{ t('ui.skip') }}</button>
+      <div v-if="showIntro" class="intro-overlay" @click="onIntroClick">
+        <video ref="introVideoRef" :src="store.introVideo" class="intro-video" @ended="onIntroEnded"></video>
+        <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 v-if="store.menuVideo && (!started || store.gameEnded)" class="menu-bg">
@@ -548,6 +559,26 @@ html, body {
   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 {
   position: fixed;
   inset: 0;