Complete lang switch
This commit is contained in:
KUN1007
parent
6cf85280bd
commit
8448e5ffeb
|
|
@ -1,5 +1,7 @@
|
|||
<!-- 设置面板组件，展示整个论坛的设置面板 -->
|
||||
<script setup lang="ts">
|
||||
// 引入 vue 函数
|
||||
import { ref, watch, onMounted } from 'vue'
|
||||
// 引入图标字体
|
||||
import { Icon } from '@iconify/vue'
|
||||
// 引入看板娘组件
|
||||
|
|
@ -9,27 +11,32 @@ import Background from './components/Background.vue'
|
|||
// 导入设置面板 store
|
||||
import { useSettingsPanelStore } from '@/store/modules/settings'
|
||||
import { storeToRefs } from 'pinia'
|
||||
// 导入语言 hook
|
||||
import { useLang } from '@/hooks/useLang'
|
||||
// 引入 i18n
|
||||
// 导入 i18n
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
// 全局切换语言
|
||||
const { kungalgameLang, setLang, initLang } = useLang()
|
||||
const { t, locale } = useI18n({ useScope: 'global' })
|
||||
const selectedLocale = ref(locale.value)
|
||||
|
||||
// 初始化语言
|
||||
initLang()
|
||||
// 监听selectedLocale的变化，并更新Vue I18n的locale
|
||||
watch(selectedLocale, (newVal) => {
|
||||
locale.value = newVal
|
||||
})
|
||||
|
||||
// 用户切换网站语言
|
||||
const changeLang = () => {
|
||||
if (kungalgameLang.value === 'en') {
|
||||
setLang('en')
|
||||
locale.value = 'en'
|
||||
} else {
|
||||
setLang('zh')
|
||||
locale.value = 'zh'
|
||||
// 在页面加载时从localStorage中读取保存的语言设置
|
||||
onMounted(() => {
|
||||
const savedLocale = localStorage.getItem('locale')
|
||||
if (savedLocale) {
|
||||
selectedLocale.value = savedLocale
|
||||
}
|
||||
})
|
||||
|
||||
// 监听语言变化，并将语言设置保存到localStorage
|
||||
watch(locale, (newVal) => {
|
||||
localStorage.setItem('locale', newVal)
|
||||
})
|
||||
|
||||
const changeLanguage = () => {
|
||||
locale.value = selectedLocale.value
|
||||
}
|
||||
|
||||
// 使用设置面板的 store
|
||||
|
|
@ -68,12 +75,23 @@ const handleClose = () => {
|
|||
</li>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fix-loli">
|
||||
<span>语言设置</span>
|
||||
<div class="set-lang">
|
||||
<span>网站语言设置</span>
|
||||
<select
|
||||
class="select"
|
||||
v-model="selectedLocale"
|
||||
@change="changeLanguage"
|
||||
>
|
||||
<option value="en">English</option>
|
||||
<option value="zh">中文</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<!-- 设置主页的宽度 -->
|
||||
<span>主页页面宽度设置</span>
|
||||
<div class="width-container">
|
||||
<span>主页页面宽度设置</span>
|
||||
<span>61.8%</span>
|
||||
</div>
|
||||
<div class="page-width">
|
||||
<span>61.8%</span><input class="main" type="range" value="0" /><span
|
||||
>90%</span
|
||||
|
|
@ -127,6 +145,7 @@ const handleClose = () => {
|
|||
}
|
||||
}
|
||||
}
|
||||
// 使设置按钮保持旋转
|
||||
.settings-icon {
|
||||
animation: settings 3s linear infinite;
|
||||
}
|
||||
|
|
@ -159,6 +178,21 @@ const handleClose = () => {
|
|||
color: @kungalgame-blue-4;
|
||||
}
|
||||
}
|
||||
// 语言设置
|
||||
.set-lang {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
// 语言的选择框
|
||||
.select {
|
||||
width: 100px;
|
||||
font-size: 16px;
|
||||
border: 1px solid @kungalgame-blue-4;
|
||||
background-color: @kungalgame-trans-white-9;
|
||||
option {
|
||||
background-color: @kungalgame-trans-white-9;
|
||||
}
|
||||
}
|
||||
.page-width {
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
|
|
@ -173,8 +207,10 @@ const handleClose = () => {
|
|||
margin: 20px 0;
|
||||
}
|
||||
/* 固定看板娘 */
|
||||
.fix-loli {
|
||||
.set-lang {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.width-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
// 钩子函数，网站显示语言
|
||||
|
||||
import { ref, watchEffect } from 'vue'
|
||||
import { getLangStatus, setLangStatus } from '@/utils/cache/local-storage'
|
||||
|
||||
// 初始化 KUNGalgame 语言设置，true 为中文
|
||||
const kungalgameLang = ref<string>(getLangStatus() || 'zh')
|
||||
|
||||
const setLang = (status: string) => {
|
||||
kungalgameLang.value = status
|
||||
}
|
||||
|
||||
const initLang = () => {
|
||||
watchEffect(() => {
|
||||
setLangStatus(kungalgameLang.value)
|
||||
})
|
||||
}
|
||||
|
||||
// 全局 hook
|
||||
export function useLang() {
|
||||
return {
|
||||
kungalgameLang,
|
||||
setLang,
|
||||
initLang,
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +1,10 @@
|
|||
import { createI18n } from 'vue-i18n'
|
||||
// 获取网站 localStorage 中的默认语言
|
||||
import { getLangStatus } from '@/utils/cache/local-storage'
|
||||
// 引入语言文件
|
||||
import zh from './zh'
|
||||
import en from './en'
|
||||
|
||||
const i18n = createI18n({
|
||||
locale: getLangStatus() || 'en',
|
||||
// locale: 'zh',
|
||||
locale: localStorage.getItem('locale') || 'en',
|
||||
// 支持 Vue3 composition API
|
||||
legacy: false,
|
||||
// 全局注册 ts 方法
|
||||
|
|
|
|||
23
src/utils/cache/cache-key.ts
vendored
23
src/utils/cache/cache-key.ts
vendored
|
|
@ -1,23 +0,0 @@
|
|||
/* KUNGalgame cache key 的名字 */
|
||||
|
||||
const KUN = 'KUNGalgame'
|
||||
|
||||
// KUNGalgame 的 cache 键
|
||||
class KUNCacheKey {
|
||||
// 中文 / 英文
|
||||
static MAIN_LANG = `${KUN}-lang`
|
||||
// 白天 / 黑夜模式
|
||||
static THEME_STATUS = `${KUN}-theme`
|
||||
// 主页的宽度
|
||||
static MAIN_PAGE_WIDTH = `${KUN}-main-page-width`
|
||||
// 背景图片
|
||||
static BACKGROUND_PICTURE = `${KUN}-background-picture`
|
||||
// 是否固定看板娘
|
||||
static LOLI_STATUS = `${KUN}-loli-status`
|
||||
// 看板娘定位 X
|
||||
static LOLI_POSITION_X = `${KUN}-loli-position-x`
|
||||
// 看板娘定位 Y
|
||||
static LOLI_POSITION_Y = `${KUN}-loli-position-y`
|
||||
}
|
||||
|
||||
export default KUNCacheKey
|
||||
17
src/utils/cache/local-storage.ts
vendored
17
src/utils/cache/local-storage.ts
vendored
|
|
@ -1,17 +0,0 @@
|
|||
// KUNGalgame localStorage
|
||||
|
||||
// 引入定义的键
|
||||
import KUNCacheKey from './cache-key'
|
||||
|
||||
/*
|
||||
* KUNGalgame 语言设置
|
||||
*/
|
||||
|
||||
export const getLangStatus = () => {
|
||||
return localStorage.getItem(KUNCacheKey.MAIN_LANG) as string
|
||||
}
|
||||
|
||||
export const setLangStatus = (lang: string) => {
|
||||
// true -> chinese, false -> english
|
||||
localStorage.setItem(KUNCacheKey.MAIN_LANG, lang)
|
||||
}
|
||||
Loading…
Reference in a new issue