fix: get valid locale from url param or localstorage

Signed-off-by: Kaifuny <superbiger.github@gmail.com>

contact-frontend/packages/apps/web/src/layouts/NavLayout.vue

@@ -27,6 +27,7 @@ const dropdownMenus = [
 ]
 
 // TODO 根据 url 设置当前选中的导航
+
 const current = ref<string>(ROUTE_NAME.DASHBOARD_INDEX)
 const router = useRouter()
 </script>
@@ -63,7 +64,7 @@ const router = useRouter()
               trigger="hover"
             >
               <div class="hover: text-green-600 hover:underline cursor-pointer">
-                {{ $i18n.locale }}
+                {{ $t($i18n.locale) }}
               </div>
             </n-popselect>
           </div>

contact-frontend/packages/apps/web/src/shims-vue-global.d.ts

@@ -4,6 +4,6 @@ import { ComponentCustomProperties } from './shims-vue-global.d';
 declare module "vue" {
   export interface ComponentCustomProperties {
     $t: (key: string) => string;
-    $i18n: { locale: typeof locales };
+    $i18n: { locale: string };
   }
 }

contact-frontend/packages/modules/i18n/src/index.ts

@@ -6,9 +6,21 @@ import _ from 'lodash-es'
  * 语言支持类型
  */
 export const locales: string[] = ['zh-CN', 'en-US']
-
+export const defaultLocale = 'zh-CN'
 const localPathPrefix = './locales/'
 
+const getValidLocale = (defaults: string = defaultLocale): string => {
+  const locale = window.localStorage.getItem('locale')
+  if (locale && locales.includes(locale)) {
+    return locale
+  }
+  const param = new URLSearchParams(window.location.search).get('lang')
+  if (param && locales.includes(param)) {
+    return param
+  }
+  return defaults
+}
+
 const mergedLocalMessage = Object.entries(
   import.meta.glob('./locales/**/*.json', { eager: true })
 ).reduce(
@@ -35,10 +47,10 @@ const mergedLocalMessage = Object.entries(
 
 const i18n = createI18n({
   legacy: false,
-  locale: 'zh-CN',
+  locale: getValidLocale(defaultLocale),
   messages: mergedLocalMessage,
   globalInjection: true,
-  fallbackLocale: 'zh-CN',
+  fallbackLocale: defaultLocale,
 })
 
 const install = (app: App) => {