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

feat: pause menu, accessibility improvements, main menu polish, roadmap update

Browse Source
This commit is contained in:
cocos02
2026-06-10 15:18:39 +08:00
parent e7ed52d89b
commit bf4b09f4e0
7 changed files with 292 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/AccessibilitySettings.vue
View File

@@ -1,7 +1,9 @@
<script setup lang="ts">
import { useGameStore } from '@/stores/gameStore'
import { useI18n } from '@/composables/useI18n'
const store = useGameStore()
const { currentLang, setLang } = useI18n()
const emit = defineEmits<{
close: []
@@ -17,6 +19,13 @@ const bgAlphaOptions = [0, 0.3, 0.5, 0.7, 0.9]
<h2 class="settings-title">设置</h2>
<div class="settings-body">
<div class="setting-row">
<span class="setting-label">语言</span>
<select :value="currentLang" @change="setLang(($event.target as HTMLSelectElement).value as 'zh' | 'en')">
<option value="zh">中文</option>
<option value="en">English</option>
</select>
</div>
<div class="setting-row">
<span class="setting-label">字幕字号</span>
<select :value="store.subFontSize" @change="store.setSubFontSize(+($event.target as HTMLSelectElement).value)">

95
src/components/MainMenu.vue
View File

@@ -1,6 +1,5 @@
<script setup lang="ts">
import { useI18n } from '@/composables/useI18n'
import LangSwitch from '@/components/LangSwitch.vue'
defineProps<{
showResume: boolean
@@ -25,22 +24,20 @@ const { t } = useI18n()
<template>
<div class="main-menu-overlay">
<div class="main-menu">
<div class="menu-top-bar">
<LangSwitch />
</div>
<h1 v-if="isGameEnd" class="menu-title">{{ t('ui.gameEnd') }}</h1>
<div class="menu-row primary-row">
<button class="menu-btn primary" @click="emit('start')">{{ t('ui.start') }}</button>
<button v-if="showResume" class="menu-btn secondary" @click="emit('resume')">{{ t('ui.resume') }}</button>
</div>
<button class="menu-btn primary" @click="emit('start')">{{ t('ui.start') }}</button>
<div class="menu-row secondary-row">
<button v-if="showChapters" class="menu-btn tertiary" @click="emit('chapters')">{{ t('ui.chapters') }}</button>
<button v-if="showAchievements" class="menu-btn tertiary" @click="emit('achievements')">成就</button>
<button v-if="showGallery" class="menu-btn tertiary" @click="emit('gallery')">画廊</button>
<button class="menu-btn tertiary" @click="emit('settings')">设置</button>
<button v-if="showResume" class="menu-btn secondary" @click="emit('resume')">{{ t('ui.resume') }}</button>
<div class="menu-sub-row">
<button v-if="showChapters" class="menu-sub" @click="emit('chapters')">{{ t('ui.chapters') }}</button>
<span v-if="showChapters" class="sub-sep">·</span>
<button v-if="showAchievements" class="menu-sub" @click="emit('achievements')">{{ t('ui.achievements') }}</button>
<span v-if="showAchievements" class="sub-sep">·</span>
<button v-if="showGallery" class="menu-sub" @click="emit('gallery')">{{ t('ui.gallery') }}</button>
<span v-if="showGallery" class="sub-sep">·</span>
<button class="menu-sub" @click="emit('settings')">{{ t('ui.settings') }}</button>
</div>
</div>
</div>
@@ -50,7 +47,7 @@ const { t } = useI18n()
.main-menu-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
@@ -61,11 +58,7 @@ const { t } = useI18n()
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.menu-top-bar {
margin-bottom: 8px;
gap: 14px;
}
.menu-title {
@@ -73,22 +66,17 @@ const { t } = useI18n()
font-weight: 400;
letter-spacing: 6px;
color: #ddd;
margin-bottom: 8px;
}
.menu-row {
display: flex;
gap: 12px;
margin-bottom: 12px;
}
.menu-btn {
padding: 16px 40px;
padding: 16px 56px;
font-size: 18px;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 4px;
cursor: pointer;
letter-spacing: 2px;
letter-spacing: 3px;
transition: background 0.2s;
}
@@ -98,9 +86,9 @@ const { t } = useI18n()
.menu-btn.primary {
background: rgba(255, 255, 255, 0.1);
padding: 18px 56px;
font-size: 22px;
letter-spacing: 4px;
padding: 20px 72px;
font-size: 24px;
letter-spacing: 6px;
}
.menu-btn.primary:hover {
@@ -108,28 +96,41 @@ const { t } = useI18n()
}
.menu-btn.secondary {
background: rgba(100, 200, 255, 0.08);
border-color: rgba(100, 200, 255, 0.3);
color: #8cf;
font-size: 16px;
padding: 16px 36px;
background: rgba(100, 200, 255, 0.06);
border-color: rgba(100, 200, 255, 0.2);
color: #7cb8e4;
font-size: 14px;
padding: 12px 40px;
letter-spacing: 2px;
}
.menu-btn.secondary:hover {
background: rgba(100, 200, 255, 0.15);
background: rgba(100, 200, 255, 0.12);
}
.menu-btn.tertiary {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.15);
color: #aaa;
font-size: 14px;
padding: 12px 28px;
letter-spacing: 1px;
.menu-sub-row {
display: flex;
align-items: center;
gap: 6px;
margin-top: 10px;
}
.menu-btn.tertiary:hover {
background: rgba(255, 255, 255, 0.1);
color: #ddd;
.menu-sub {
background: none;
border: none;
color: #777;
font-size: 13px;
cursor: pointer;
padding: 4px 8px;
transition: color 0.15s;
}
.menu-sub:hover {
color: #ccc;
}
.sub-sep {
color: #444;
font-size: 12px;
}
</style>

100
src/components/PauseMenu.vue Normal file
View File

@@ -0,0 +1,100 @@
<script setup lang="ts">
import { useI18n } from '@/composables/useI18n'
const emit = defineEmits<{
resume: []
saveLoad: []
settings: []
quitToMenu: []
}>()
const { t } = useI18n()
</script>
<template>
<div class="pause-overlay" @click.self="emit('resume')" @keydown.escape="emit('resume')">
<div class="pause-menu">
<h2 class="pause-title">{{ t('ui.paused') }}</h2>
<div class="pause-actions">
<button class="pause-btn primary" @click="emit('resume')">{{ t('ui.resume') }}</button>
<button class="pause-btn" @click="emit('saveLoad')">{{ t('ui.saveLoad') }}</button>
<button class="pause-btn" @click="emit('settings')">{{ t('ui.settings') }}</button>
<button class="pause-btn danger" @click="emit('quitToMenu')">{{ t('ui.quitToMenu') }}</button>
</div>
<div class="pause-hint">{{ t('ui.pauseHint') }}</div>
</div>
</div>
</template>
<style scoped>
.pause-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.75);
display: flex;
align-items: center;
justify-content: center;
z-index: 200;
}
.pause-menu {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.pause-title {
font-size: 32px;
font-weight: 400;
letter-spacing: 6px;
color: #ddd;
}
.pause-actions {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 280px;
}
.pause-btn {
padding: 14px 32px;
font-size: 16px;
color: #ccc;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 4px;
cursor: pointer;
letter-spacing: 2px;
transition: background 0.15s, color 0.15s;
}
.pause-btn:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.pause-btn.primary {
color: #fff;
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.25);
}
.pause-btn.danger {
color: #e57373;
border-color: rgba(229, 115, 115, 0.2);
margin-top: 12px;
}
.pause-btn.danger:hover {
background: rgba(229, 115, 115, 0.1);
}
.pause-hint {
font-size: 12px;
color: #666;
}
</style>