fix: unable to switch current language

#26
ikxin · Aug 21, 2024 · bc6077d · bc6077d
1 parent 0cb4d53
commit bc6077d
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 50 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -15,45 +15,45 @@
     "migrate": "drizzle-kit migrate"
   },
   "dependencies": {
-    "@arco-design/web-vue": "^2.55.2",
-    "@elysiajs/cors": "^1.0.2",
+    "@arco-design/web-vue": "^2.56.0",
+    "@elysiajs/cors": "^1.1.0",
     "@elysiajs/cron": "^1.1.0",
-    "@elysiajs/static": "^1.0.3",
-    "@vueuse/core": "^10.10.0",
-    "@vueuse/integrations": "^10.10.0",
-    "axios": "^1.7.2",
+    "@elysiajs/static": "^1.1.0",
+    "@vueuse/core": "^11.0.1",
+    "@vueuse/integrations": "^11.0.1",
+    "axios": "^1.7.4",
     "dayjs": "^1.11.12",
-    "echarts": "^5.5.0",
-    "elysia": "^1.0.22",
+    "echarts": "^5.5.1",
+    "elysia": "^1.1.7",
     "less": "^4.2.0",
     "markdown-it-shiki": "^0.9.0",
     "mysql2": "^3.11.0",
-    "pinia": "^2.1.7",
-    "unocss": "^0.60.3",
-    "vue": "^3.4.27",
-    "vue-i18n": "^9.13.1",
-    "vue-router": "^4.3.2"
+    "pinia": "^2.2.2",
+    "unocss": "^0.62.2",
+    "vue": "^3.4.38",
+    "vue-i18n": "^9.14.0",
+    "vue-router": "^4.4.3"
   },
   "devDependencies": {
     "@intlify/unplugin-vue-i18n": "^4.0.0",
-    "@types/bun": "^1.1.3",
-    "@typescript-eslint/eslint-plugin": "^7.11.0",
-    "@typescript-eslint/parser": "^7.11.0",
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@types/bun": "^1.1.6",
+    "@typescript-eslint/eslint-plugin": "^8.2.0",
+    "@typescript-eslint/parser": "^8.2.0",
+    "@vitejs/plugin-vue": "^5.1.2",
     "drizzle-kit": "^0.24.0",
     "drizzle-orm": "^0.33.0",
-    "eslint": "^9.3.0",
+    "eslint": "^9.9.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-vue": "^9.26.0",
-    "prettier": "^3.2.5",
-    "typescript": "^5.4.5",
-    "unplugin-auto-import": "^0.17.5",
-    "unplugin-vue-components": "^0.27.0",
+    "eslint-plugin-vue": "^9.27.0",
+    "prettier": "^3.3.3",
+    "typescript": "^5.5.4",
+    "unplugin-auto-import": "^0.18.2",
+    "unplugin-vue-components": "^0.27.4",
     "unplugin-vue-markdown": "^0.26.2",
-    "unplugin-vue-router": "^0.8.8",
-    "vite": "^5.2.11",
-    "vite-plugin-vue-devtools": "^7.2.1",
-    "vue-eslint-parser": "^9.4.2",
-    "vue-tsc": "^2.0.19"
+    "unplugin-vue-router": "^0.10.7",
+    "vite": "^5.4.1",
+    "vite-plugin-vue-devtools": "^7.3.8",
+    "vue-eslint-parser": "^9.4.3",
+    "vue-tsc": "^2.0.29"
   }
 }
diff --git a/src/components/custom-header.vue b/src/components/custom-header.vue
@@ -71,7 +71,7 @@ const languagesItems = computed(() => [
   },
 ])
 
-const languagesChange = val => (appStore.languages = val)
+const languagesChange = (val: string) => (appStore.locale = val)
 </script>
 
 <template>

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -1,11 +1,13 @@
-import { createRouter, createWebHistory } from 'vue-router/auto'
+import { createWebHistory, createRouter } from 'vue-router'
+import { routes } from 'vue-router/auto-routes'
+
+for (const route of routes) {
+  if (route.name === '/activate') {
+    route.redirect = '/activate/windows'
+  }
+}
 
 export const router = createRouter({
   history: createWebHistory(),
-  extendRoutes: routes => {
-    routes.find(route => {
-      return route.name === '/activate'
-    }).redirect = '/activate/windows'
-    return routes
-  },
+  routes,
 })
diff --git a/src/store/app.ts b/src/store/app.ts
@@ -1,18 +1,21 @@
 export const useAppStore = defineStore('app', () => {
-  const { locale } = useI18n()
-
   const theme = useColorMode({
     attribute: 'arco-theme',
     emitAuto: true,
     selector: 'body',
-    storageKey: 'theme'
+    storageKey: 'theme',
   })
 
-  const { language: _language } = useNavigatorLanguage()
+  const { locale } = useI18n()
+
+  const { language } = useNavigatorLanguage()
 
-  const languages = useStorage('languages', _language.value.toLocaleLowerCase())
+  const _locale = useStorage(
+    'locale',
+    language.value?.toLocaleLowerCase() || 'zh-cn',
+  )
 
-  watch(languages, value => (locale.value = value))
+  watchEffect(() => (locale.value = _locale.value))
 
-  return { theme, languages }
+  return { theme, locale }
 })
diff --git a/src/typings/imports.d.ts b/src/typings/imports.d.ts
@@ -59,8 +59,8 @@ declare global {
   const nextTick: typeof import('vue')['nextTick']
   const onActivated: typeof import('vue')['onActivated']
   const onBeforeMount: typeof import('vue')['onBeforeMount']
-  const onBeforeRouteLeave: typeof import('vue-router/auto')['onBeforeRouteLeave']
-  const onBeforeRouteUpdate: typeof import('vue-router/auto')['onBeforeRouteUpdate']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
   const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
   const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
   const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
@@ -231,8 +231,8 @@ declare global {
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
-  const useRoute: typeof import('vue-router/auto')['useRoute']
-  const useRouter: typeof import('vue-router/auto')['useRouter']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
   const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
   const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']

diff --git a/src/typings/vue-router.d.ts b/src/typings/vue-router.d.ts
@@ -12,7 +12,7 @@ declare module 'vue-router/auto-routes' {
     ParamValueOneOrMore,
     ParamValueZeroOrMore,
     ParamValueZeroOrOne,
-  } from 'unplugin-vue-router/types'
+  } from 'vue-router'
 
   /**
    * Route name map generated by unplugin-vue-router

diff --git a/tsconfig.json b/tsconfig.json
@@ -7,7 +7,8 @@
     "noEmit": true,
     "paths": { "@/*": ["src/*"] },
     "skipLibCheck": true,
-    "strict": true
+    "strict": true,
+    "types": ["unplugin-vue-router/client"]
   },
   "include": ["**/*.vue", "**/*.ts", "**/*.d.ts"]
 }
diff --git a/vite.config.ts b/vite.config.ts
@@ -17,7 +17,11 @@ export default defineConfig({
     VueRouter({
       dts: './src/typings/vue-router.d.ts',
       extensions: ['.vue'],
-      routesFolder: './src/views',
+      routesFolder: [
+        {
+          src: './src/views',
+        },
+      ],
     }),
     Vue({
       include: [/\.vue$/, /\.md$/],