@@ -3,7 +3,7 @@ import { useGameStore } from '@/stores/gameStore'
import { useI18n } from '@/composables/useI18n'
const store = useGameStore ( )
const { currentLang , setLang } = useI18n ( )
const { t , currentLang, setLang } = useI18n ( )
const emit = defineEmits < {
close : [ ]
@@ -11,38 +11,51 @@ const emit = defineEmits<{
const fontSizeOptions = [ 20 , 24 , 28 , 32 ]
const bgAlphaOptions = [ 0 , 0.3 , 0.5 , 0.7 , 0.9 ]
const langLabels : Record < string , string > = {
zh : '中文' ,
en : 'English' ,
ja : '日本語' ,
ko : '한국어' ,
fr : 'Français' ,
de : 'Deutsch' ,
es : 'Español' ,
pt : 'Português' ,
}
< / script >
< template >
< div class = "settings-overlay" @click.self ="emit('close')" @keydown.escape ="emit('close')" >
< div class = "settings-panel" >
< h2 class = "settings-title" > 设置 < / h2 >
< h2 class = "settings-title" > { { t ( 'ui.settings' ) } } < / 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 >
< div class = "setting-row" v-if = "store.storyLocales.languages.length > 1" >
< span class = "setting-label" > { { t ( 'ui.language' ) } } < / span >
< select :value = "currentLang" @change ="setLang(($event.target as HTMLSelectElement).value)" >
< option v-for = "lang in store.storyLocales.languages" :key="lang" :value="lang" >
{{ langLabels [ lang ] | | lang.toUpperCase ( ) }}
< / option >
< / select >
< / div >
< div class = "setting-row" >
< span class = "setting-label" > 字幕字号 < / span >
< span class = "setting-label" > { { t ( 'ui.subtitleSize' ) } } < / span >
< select :value = "store.subFontSize" @change ="store.setSubFontSize(+($event.target as HTMLSelectElement).value)" >
< option v-for = "s in fontSizeOptions" :key="s" :value="s" > {{ s }} px < / option >
< / select >
< / div >
< div class = "setting-row" >
< span class = "setting-label" > 字幕背景 < / span >
< span class = "setting-label" > { { t ( 'ui.subtitleBg' ) } } < / span >
< select :value = "store.subBgAlpha" @change ="store.setSubBgAlpha(+($event.target as HTMLSelectElement).value)" >
< option :value = "0" > 无 < / option >
< option :value = "0" > { { t ( 'ui.none' ) } } < / option >
< option v-for = "a in bgAlphaOptions.filter(v => v > 0)" :key="a" :value="a" > {{ ( a * 100 ) + ' % ' }} < / option >
< / select >
< / div >
< div class = "setting-row" >
< span class = "setting-label" > QTE 时限放宽 ( × 1.5 ) < / span >
< span class = "setting-label" > { { t ( 'ui.qteTimeRelax' ) } } < / span >
< label class = "toggle" >
< input type = "checkbox" :checked = "store.qteTimeRelax" @change ="store.setQteTimeRelax(($event.target as HTMLInputElement).checked)" / >
< span class = "toggle-slider" > < / span >
@@ -50,7 +63,7 @@ const bgAlphaOptions = [0, 0.3, 0.5, 0.7, 0.9]
< / div >
< div class = "setting-row" >
< span class = "setting-label" > QTE 按键简化 ( 仅空格 ) < / span >
< span class = "setting-label" > { { t ( 'ui.qteSingleKey' ) } } < / span >
< label class = "toggle" >
< input type = "checkbox" :checked = "store.qteSingleKey" @change ="store.setQteSingleKey(($event.target as HTMLInputElement).checked)" / >
< span class = "toggle-slider" > < / span >
@@ -58,7 +71,7 @@ const bgAlphaOptions = [0, 0.3, 0.5, 0.7, 0.9]
< / div >
< div class = "setting-row" >
< span class = "setting-label" > 防误触延迟 ( 0.5 s ) < / span >
< span class = "setting-label" > { { t ( 'ui.antiMistap' ) } } < / span >
< label class = "toggle" >
< input type = "checkbox" :checked = "store.antiMistap" @change ="store.setAntiMistap(($event.target as HTMLInputElement).checked)" / >
< span class = "toggle-slider" > < / span >
@@ -66,7 +79,7 @@ const bgAlphaOptions = [0, 0.3, 0.5, 0.7, 0.9]
< / div >
< div class = "setting-row" >
< span class = "setting-label" > 可暂停 ( P ) < / span >
< span class = "setting-label" > { { t ( 'ui.pauseEnabled' ) } } < / span >
< label class = "toggle" >
< input type = "checkbox" :checked = "store.pauseEnabled" @change ="store.setPauseEnabled(($event.target as HTMLInputElement).checked)" / >
< span class = "toggle-slider" > < / span >
@@ -74,7 +87,7 @@ const bgAlphaOptions = [0, 0.3, 0.5, 0.7, 0.9]
< / div >
< / div >
< button class = "settings-close" @click ="emit('close')" > 关闭 < / button >
< button class = "settings-close" @click ="emit('close')" > {{ t ( ' ui.close ' ) }} < / button >
< / div >
< / div >
< / template >