feat: add LocaleSwitcher component

apps/admin/autoResolver/components.d.ts

@@ -19,6 +19,7 @@ declare module 'vue' {
     NDivider: typeof import('@celeris/ca-components')['NDivider']
     NDrawer: typeof import('@celeris/ca-components')['NDrawer']
     NDrawerContent: typeof import('@celeris/ca-components')['NDrawerContent']
+    NDropdown: typeof import('@celeris/ca-components')['NDropdown']
     NForm: typeof import('@celeris/ca-components')['NForm']
     NFormItem: typeof import('@celeris/ca-components')['NFormItem']
     NGlobalStyle: typeof import('@celeris/ca-components')['NGlobalStyle']

apps/admin/src/AppConfiguration.ts

@@ -3,7 +3,7 @@ import { LocalesEngine } from "@celeris/locale";
 import { createDiscreteApi } from "@celeris/ca-components";
 import { field, logger } from "@celeris/utils";
 import { useUserStoreWithOut } from "~/store/modules/user";
-import { useNaiveUIConfigProvider } from "~/composables";
+import { useAppSetting, useNaiveUIConfigProvider } from "~/composables";
 
 const { configProviderProps } = useNaiveUIConfigProvider();
 
@@ -67,6 +67,7 @@ function initializeHttpRequest() {
 }
 
 function initializeI18n() {
+  const { getLocale } = useAppSetting();
   const messages = Object.fromEntries(
     Object.entries(
       import.meta.glob<{ default: any }>("./locales/*.json", { eager: true }),
@@ -75,7 +76,7 @@ function initializeI18n() {
     }),
   );
   LocalesEngine.initLocales(() => ({
-    locale: "zh",
+    locale: getLocale.value,
     fallbackLocale: "zh",
     messagesHandler: () => {
       return messages;

apps/admin/src/layouts/header/components/LocaleSwitcher.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { LocalesEngine, languagesNameList, useI18n } from "@celeris/locale";
+import IconButtonWithToolTip from "~/layouts/header/components/IconButtonWithToolTip.vue";
+
+import { useAppSetting } from "~/composables";
+
+const { getLocale, setProjectSetting } = useAppSetting();
+const { locale, availableLocales, t } = useI18n();
+
+const options = computed(
+  () => availableLocales.map(item => ({
+    label: languagesNameList.find(languagesName => languagesName.code === item)?.nativeName,
+    key: item,
+  })),
+);
+const handleSelect = (key: string) => {
+  setProjectSetting({ locale: key });
+  locale.value = key;
+  LocalesEngine.setLocale(key);
+};
+</script>
+
+<template>
+  <NDropdown :options="options" trigger="click" :value="getLocale" @select="handleSelect">
+    <IconButtonWithToolTip tooltip-text="Switch Locale" icon="i-tabler-language" color="gray" />
+  </NDropdown>
+</template>
+
+<style scoped>
+
+</style>

apps/admin/src/layouts/header/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import CollapseButton from "~/layouts/header/components/CollapseButton.vue";
 import FullScreenButton from "~/layouts/header/components/FullScreenButton.vue";
+import LocaleSwitcher from "~/layouts/header/components/LocaleSwitcher.vue";
 import UserInfoButton from "~/layouts/header/components/UserInfoButton.vue";
 import SettingButton from "~/layouts/setting/index.vue";
 
@@ -20,6 +21,9 @@ defineOptions({
         <div class="px-2">
           <FullScreenButton />
         </div>
+        <div class="px-2">
+          <LocaleSwitcher />
+        </div>
       </div>
     </div>
     <div class="hidden md:block px-4">