refactor: set locale function

#26

package.json

@@ -19,6 +19,7 @@
     "@elysiajs/cors": "^1.1.0",
     "@elysiajs/cron": "^1.1.0",
     "@elysiajs/static": "^1.1.0",
+    "@iconify-json/flag": "^1.1.54",
     "@vueuse/core": "^11.0.1",
     "@vueuse/integrations": "^11.0.1",
     "axios": "^1.7.4",

src/components/custom-header.vue

@@ -5,6 +5,8 @@ const { t } = useI18n()
 
 const appStore = useAppStore()
 
+const { setLocale } = useAppStore()
+
 const navItems = computed(() => [
   {
     name: 'activate',
@@ -58,20 +60,18 @@ const themeIcon = computed(() => {
 
 const themeChange = val => (appStore.theme = val)
 
-const languagesItems = computed(() => [
+const locales: LocaleItem[] = [
   {
-    lable: t('label.zh-cn'),
+    lable: '简体中文',
     value: 'zh-cn',
-    icon: 'i-languages:zh',
+    icon: 'i-flag:cn-4x3',
   },
   {
-    lable: t('label.en'),
+    lable: 'English',
     value: 'en',
-    icon: 'i-languages:en',
+    icon: 'i-flag:us-4x3',
   },
-])
-
-const languagesChange = (val: string) => (appStore.locale = val)
+]
 </script>
 
 <template>
@@ -118,12 +118,12 @@ const languagesChange = (val: string) => (appStore.locale = val)
           </AButton>
           <template #content>
             <ADoption
-              v-for="item in languagesItems"
-              :key="item.value"
-              @click="languagesChange(item.value)"
+              v-for="locale in locales"
+              :key="locale.value"
+              @click="setLocale(locale.value)"
             >
-              <template #icon><i :class="item.icon" /></template>
-              <template #default>{{ item.lable }}</template>
+              <template #icon><i :class="locale.icon" /></template>
+              <template #default>{{ locale.lable }}</template>
             </ADoption>
           </template>
         </ADropdown>

src/store/app.ts

@@ -6,16 +6,24 @@ export const useAppStore = defineStore('app', () => {
     storageKey: 'theme',
   })
 
-  const { locale } = useI18n()
+  const { locale: _locale } = useI18n()
 
   const { language } = useNavigatorLanguage()
 
-  const _locale = useStorage(
+  const locale = useStorage(
     'locale',
     language.value?.toLocaleLowerCase() || 'zh-cn',
   )
 
-  watchEffect(() => (locale.value = _locale.value))
+  function setLocale(val: LocaleValue) {
+    locale.value = val
+  }
 
-  return { theme, locale }
+  watchEffect(() => (_locale.value = locale.value))
+
+  return {
+    locale,
+    theme,
+    setLocale,
+  }
 })

src/typings/custom.d.ts

@@ -1,7 +1,3 @@
-/// <reference types="vite/client" />
-/// <reference lib="dom" />
-/// <reference lib="dom.iterable" />
-
 declare module '*.vue' {
   import type { ComponentOptions } from 'vue'
   const Component: ComponentOptions
@@ -13,3 +9,11 @@ declare module '*.md' {
   const Component: ComponentOptions
   export default Component
 }
+
+type LocaleValue = 'zh-cn' | 'en'
+
+interface LocaleItem {
+  lable: string
+  icon?: string
+  value: LocaleValue
+}

tsconfig.json

@@ -8,7 +8,7 @@
     "paths": { "@/*": ["src/*"] },
     "skipLibCheck": true,
     "strict": true,
-    "types": ["unplugin-vue-router/client"]
+    "types": ["unplugin-vue-router/client", "vite/client"]
   },
   "include": ["**/*.vue", "**/*.ts", "**/*.d.ts"]
 }