refactor: update the value of locale

Author: cwandev

package.json

@@ -2,7 +2,7 @@
   "name": "vue3-varlet-mobile",
   "type": "module",
   "version": "1.0.0",
-  "packageManager": "pnpm@9.1.1",
+  "packageManager": "pnpm@9.1.2",
   "description": "Vue + Vite H5 Starter Template",
   "license": "MIT",
   "scripts": {

src/utils/i18n.ts

@@ -8,26 +8,42 @@ import messages from '@intlify/unplugin-vue-i18n/messages'
 import { Locale } from '@varlet/ui'
 import type { PickerColumnOption } from '@varlet/ui'
 
-export const i18n = createI18n({
-  locale: localStorage.getItem('language') || navigator.language,
-  fallbackLocale: 'zhCN',
-  messages,
-})
+/** Default language pack name */
+const FALLBACK_LOCALE = 'zh-CN'
 
 /** i18n picker columns */
 export const languageColumns: PickerColumnOption[] = [
   { text: '简体中文', value: 'zh-CN' },
   { text: 'English', value: 'en-US' },
 ]
 
+/** Gets the language pack name for the current language */
+function getI18nLocale() {
+  const locale = localStorage.getItem('language') || navigator.language
+  for (const l of languageColumns) {
+    const value = l.value as string
+    if (value === locale)
+      return locale // A language pack for the current language exists
+    else if (value.indexOf(locale) === 0)
+      return value // A language pack that exists in any locale of the current language
+  }
+  return FALLBACK_LOCALE // Use the default language pack
+}
+
+export const i18n = createI18n({
+  locale: getI18nLocale(),
+  legacy: false,
+  messages,
+})
+
 /** Current language */
 export const locale = computed({
   get() {
-    return (i18n.global.locale as unknown as Ref<string>).value
+    return i18n.global.locale.value
   },
   set(language: string) {
-    localStorage.setItem('language', language);
-    (i18n.global.locale as unknown as Ref<string>).value = language
+    localStorage.setItem('language', language)
+    i18n.global.locale.value = language
     Locale.use(language)
   },
 })