From 8448e5ffebf9e54a2666ce3fe31c21d2c0d5019d Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyu_kun@sina.com>
Date: Sun, 21 May 2023 00:16:15 +0800
Subject: [PATCH] Complete lang switch

---
 .../setting-panel/KUNGalgameSettingPanel.vue  | 74 ++++++++++++++-----
 src/hooks/useLang.ts                          | 26 -------
 src/language/i18n.ts                          |  5 +-
 src/utils/cache/cache-key.ts                  | 23 ------
 src/utils/cache/local-storage.ts              | 17 -----
 5 files changed, 56 insertions(+), 89 deletions(-)
 delete mode 100644 src/hooks/useLang.ts
 delete mode 100644 src/utils/cache/cache-key.ts
 delete mode 100644 src/utils/cache/local-storage.ts

diff --git a/src/components/setting-panel/KUNGalgameSettingPanel.vue b/src/components/setting-panel/KUNGalgameSettingPanel.vue
index f0b669b6..7a39aacc 100644
--- a/src/components/setting-panel/KUNGalgameSettingPanel.vue
+++ b/src/components/setting-panel/KUNGalgameSettingPanel.vue
@@ -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;
 }
diff --git a/src/hooks/useLang.ts b/src/hooks/useLang.ts
deleted file mode 100644
index fe0fe230..00000000
--- a/src/hooks/useLang.ts
+++ /dev/null
@@ -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,
-  }
-}
diff --git a/src/language/i18n.ts b/src/language/i18n.ts
index cd8a71a2..69d52cb1 100644
--- a/src/language/i18n.ts
+++ b/src/language/i18n.ts
@@ -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 方法
diff --git a/src/utils/cache/cache-key.ts b/src/utils/cache/cache-key.ts
deleted file mode 100644
index 623d6ac8..00000000
--- a/src/utils/cache/cache-key.ts
+++ /dev/null
@@ -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
diff --git a/src/utils/cache/local-storage.ts b/src/utils/cache/local-storage.ts
deleted file mode 100644
index 2246c479..00000000
--- a/src/utils/cache/local-storage.ts
+++ /dev/null
@@ -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)
-}