refactor: combine vant i18n setup (#133)

Author: cwandev

src/utils/i18n.ts

@@ -3,10 +3,13 @@ import enUS from 'vant/es/locale/lang/en-US'
 import zhCN from 'vant/es/locale/lang/zh-CN'
 import { Locale, type PickerColumn } from 'vant'
 
-/** 默认语言包名称 */
 const FALLBACK_LOCALE = 'zh-CN'
 
-/** 多语言 picker columns */
+const vantLocales = {
+  'zh-CN': zhCN,
+  'en-US': enUS,
+}
+
 export const languageColumns: PickerColumn = [
   { text: '简体中文', value: 'zh-CN' },
   { text: 'English', value: 'en-US' },
@@ -15,7 +18,6 @@ export const languageColumns: PickerColumn = [
 export const i18n = setupI18n()
 type I18n = typeof i18n
 
-/** 当前语言 */
 export const locale = computed({
   get() {
     return i18n.global.locale.value
@@ -25,14 +27,6 @@ export const locale = computed({
   },
 })
 
-// 载入 vant 语言包
-Locale.use('zh-CN', zhCN)
-Locale.use('en-US', enUS)
-
-// 根据当前语言切换 vant 语言包
-Locale.use(locale.value)
-
-/** 初始化 i18n */
 function setupI18n() {
   const locale = getI18nLocale()
   const i18n = createI18n({
@@ -45,25 +39,32 @@ function setupI18n() {
 
 async function setLang(lang: string, i18n: I18n) {
   await loadLocaleMsg(lang, i18n)
+
   document.querySelector('html').setAttribute('lang', lang)
   localStorage.setItem('language', lang)
   i18n.global.locale.value = lang
-  Locale.use(lang)
+
+  // 设置 vant 组件语言包
+  Locale.use(lang, vantLocales[lang])
 }
 
-/** 加载语言包 */
+// 加载本地语言包
 async function loadLocaleMsg(locale: string, i18n: I18n) {
   const messages = await import(`../locales/${locale}.json`)
   i18n.global.setLocaleMessage(locale, messages.default)
 }
 
-/** 获取当前语言对应的语言包名称 */
+// 获取当前语言对应的语言包名称
 function getI18nLocale() {
   const storedLocale = localStorage.getItem('language') || navigator.language
 
   const langs = languageColumns.map(v => v.value as string)
-  const foundLocale = langs.find(v => v === storedLocale || v.indexOf(storedLocale) === 0) // 存在当前语言的语言包 或 存在当前语言的任意地区的语言包
-  const locale = foundLocale || FALLBACK_LOCALE // 若未找到，则使用 默认语言包
+
+  // 存在当前语言的语言包 或 存在当前语言的任意地区的语言包
+  const foundLocale = langs.find(v => v === storedLocale || v.indexOf(storedLocale) === 0)
+
+  // 若未找到，则使用 默认语言包
+  const locale = foundLocale || FALLBACK_LOCALE
 
   return locale
 }