fix: themeChange

Bronya0 · Dec 14, 2024 · b0f6b29 · b0f6b29
1 parent 38f0e6a
commit b0f6b29
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 19 deletions.
diff --git a/app/backend/config/app.go b/app/backend/config/app.go
@@ -39,6 +39,7 @@ func (a *AppConfig) GetConfig() *types.Config {
 	if err != nil {
 		return defaultConfig
 	}
+	fmt.Println("config", defaultConfig)
 	return defaultConfig
 }
 

diff --git a/app/frontend/src/App.vue b/app/frontend/src/App.vue
@@ -45,7 +45,7 @@
 </template>
 
 <script setup>
-import {onMounted, shallowRef} from 'vue'
+import {computed, onMounted, shallowRef} from 'vue'
 import {
   darkTheme,
   enUS,
@@ -97,13 +97,6 @@ let Theme = shallowRef(lightTheme)
 
 onMounted(async () => {
 
-  // =====================注册事件监听=====================
-  // 主题切换
-  emitter.on('update_theme', themeChange)
-  // 菜单切换
-  emitter.on('menu_select', handleMenuSelect)
-  // 语言切换
-  emitter.on('language_change', handleLanguageChange)
 
   // 从后端加载配置
   const loadedConfig = await GetConfig()
@@ -115,11 +108,18 @@ onMounted(async () => {
     // 语言切换
     handleLanguageChange(loadedConfig.language)
   }
+  // =====================注册事件监听=====================
+  // 主题切换
+  emitter.on('update_theme', themeChange)
+  // 菜单切换
+  emitter.on('menu_select', handleMenuSelect)
+  // 语言切换
+  emitter.on('language_change', handleLanguageChange)
 
 })
 
 // 左侧菜单
-const sideMenuOptions = shallowRef([
+const sideMenuOptions = computed(() =>[
   {
     label: t('aside.cluster'),
     key: 'cluster',

diff --git a/app/frontend/src/components/Header.vue b/app/frontend/src/components/Header.vue
@@ -10,7 +10,7 @@
       <n-tooltip>
         <template #trigger>
           <n-tag :type=title_tag v-if="subtitle">{{subtitle}}</n-tag>
-          <n-p v-else>{{desc}}</n-p>
+          <n-p v-else>{{t('header.desc')}}</n-p>
         </template>
       </n-tooltip>
     </template>
@@ -69,7 +69,6 @@ const app_name = ref("");
 const title_tag = ref("success");
 const MaxMinIcon = shallowRef(CropSquareFilled)
 const update_url = "https://github.com/Bronya0/Kafka-King/releases"
-const qq_url = "https://qm.qq.com/cgi-bin/qm/qr?k=pDqlVFyLMYEEw8DPJlRSBN27lF8qHV2v&jump_from=webapi&authKey=Wle/K0ARM1YQWlpn6vvfiZuMedy2tT9BI73mUvXVvCuktvi0fNfmNR19Jhyrf2Nz"
 const update_loading = ref(false)
 // let theme = lightTheme
 
@@ -78,7 +77,6 @@ let version = ref({
   body: "",
 })
 
-let desc = `${t('header.desc')}`
 const subtitle = ref("")
 
 const notification = useNotification()
@@ -94,7 +92,7 @@ onMounted(async () => {
   // MoonOrSunnyOutline.value = config.theme === lightTheme.name ? WbSunnyOutlined : NightlightRoundFilled
   const v = await GetVersion()
   version.value.tag_name = v
-  subtitle.value = desc + v
+  subtitle.value = t('header.desc') + v
   await checkForUpdates()
 })
 

diff --git a/app/frontend/src/components/Settings.vue b/app/frontend/src/components/Settings.vue
@@ -15,7 +15,7 @@
         <n-input-number v-model:value="config.height" :min="600" :max="1080" :style="{ maxWidth: '120px' }"/>
       </n-form-item>
       <n-form-item :label="t('settings.lang')">
-        <n-select v-model:value="config.language" :options="languageOptions" @update:value="changeLang"
+        <n-select v-model:value="config.language" :options="languageOptions"
                   :style="{ maxWidth: '120px' }"/>
       </n-form-item>
 
@@ -103,9 +103,9 @@ const saveConfig = async () => {
 }
 
 // 语言变更
-const changeLang = (value) => {
-  emitter.emit('language_change', value)
-}
+// const changeLang = (value) => {
+//   emitter.emit('language_change', value)
+// }
 
 const changeTheme = () => {
   MoonOrSunnyOutline.value = MoonOrSunnyOutline.value === NightlightRoundFilled ? WbSunnyOutlined : NightlightRoundFilled;

diff --git a/app/frontend/src/i18n/index.js → app/frontend/src/i18n/init.js b/app/frontend/src/i18n/index.js → app/frontend/src/i18n/init.js
diff --git a/app/frontend/src/main.js b/app/frontend/src/main.js
@@ -1,12 +1,29 @@
 import {createApp} from 'vue'
 import naive from 'naive-ui'
 import App from './App.vue'
-import i18n from './i18n'
+import {createI18n} from "vue-i18n";
+import zhCN from "./i18n/zh-CN";
+import enUS from "./i18n/en-US";
+import jaJP from "./i18n/ja-JP";
+import koKR from "./i18n/ko-KR";
+import ruRU from "./i18n/ru-RU";
 
+const i18n = createI18n({
+    legacy: false, // 使用Composition API
+    locale: 'zh-CN', // 默认语言
+    fallbackLocale: 'en-US', // 备用语言
+    messages: {
+        'zh-CN': zhCN,
+        'en-US': enUS,
+        'ja-JP': jaJP,
+        'ko-KR': koKR,
+        'ru-RU': ruRU,
+    }
+})
 
 const app = createApp(App)
 
-app.use(naive)
 app.use(i18n)
+app.use(naive)
 
 app.mount('#app')