add: i18n

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

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

@@ -3,11 +3,11 @@ import { ref } from 'vue'
 import { RouterLink, RouterView, useRouter } from 'vue-router'
 
 import { Nav } from '@cskefu/shared-ui'
-
-import { NSwitch, NIcon, NAlert } from 'naive-ui'
-import { SunnyOutline, Moon, Earth } from '@vicons/ionicons5'
 import { ROUTE_NAME } from '@cskefu/models'
 
+import { NSwitch, NIcon, NAlert, NPopselect } from 'naive-ui'
+import { SunnyOutline, Moon, Earth } from '@vicons/ionicons5'
+
 const navigations = [
   { label: '首页', value: ROUTE_NAME.DASHBOARD_INDEX },
   { label: '对话', value: ROUTE_NAME.CHAT_INDEX },
@@ -48,13 +48,24 @@ const router = useRouter()
       "
     >
       <RouterLink class="text-sm text-green-600" to="/index">
-        使用指南
+        {{ $t('message.hello') }}
       </RouterLink>
       <template #dropMenuAppend>
         <div class="flex justify-between items-center">
           <div class="flex justify-between items-center space-x-2">
             <n-icon :component="Earth" />
-            <span>中文</span>
+            <n-popselect
+              v-model:value="$i18n.locale"
+              :options="[
+                { label: 'English', value: 'en-US' },
+                { label: 'Chinese', value: 'zh-CN' },
+              ]"
+              trigger="hover"
+            >
+              <div class="hover: text-green-600 hover:underline cursor-pointer">
+                {{ $i18n.locale }}
+              </div>
+            </n-popselect>
           </div>
           <n-switch size="medium">
             <template #checked-icon>

contact-frontend/packages/apps/web/src/router/index.ts

@@ -1,4 +1,4 @@
-import { RouteRecordRaw, createRouter, createWebHashHistory } from 'vue-router'
+import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router'
 
 import { ROUTE_NAME } from '@cskefu/models'
 
@@ -41,7 +41,7 @@ const routes: RouteRecordRaw[] = [
 ]
 
 const router = createRouter({
-  history: createWebHashHistory(),
+  history: createWebHistory(),
   routes,
 })
 

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

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

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

@@ -1,23 +1,42 @@
 import { App } from 'vue'
 import { createI18n } from 'vue-i18n'
+import _ from 'lodash-es'
 
-const messages = {
-  'en-US': {
-    message: {
-      hello: 'hello world',
-    },
+/**
+ * 语言支持类型
+ */
+export const locales: string[] = ['zh-CN', 'en-US']
+
+const localPathPrefix = './locales/'
+
+const mergedLocalMessage = Object.entries(
+  import.meta.glob('./locales/**/*.json', { eager: true })
+).reduce(
+  (map, [key, value]: [string, any]) => {
+    const name = key.slice(localPathPrefix.length, -5)
+    const sections = name.split('/')
+
+    if (sections.length === 1) {
+      map[name] = _.merge(value.default, map[name] || {})
+    } else {
+      const file = sections.slice(-1)[0]
+      const sectionsName = sections[0]
+      const existed = map[file] || {}
+      map[file] = {
+        ...existed,
+        [sectionsName]: _.merge(value.default, existed[sectionsName] || {}),
+      }
+    }
+
+    return map
   },
-  'zh-CN': {
-    message: {
-      hello: '你好',
-    },
-  },
-}
+  {} as { [k: string]: any }
+)
 
 const i18n = createI18n({
   legacy: false,
   locale: 'zh-CN',
-  messages,
+  messages: mergedLocalMessage,
   globalInjection: true,
   fallbackLocale: 'zh-CN',
 })

contact-frontend/packages/modules/i18n/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "../../../tsconfig.json",
   "include": ["src/**/*.ts"],
   "compilerOptions": {
+    "types": ["vite/client"],
     "composite": true,
     "skipLibCheck": true,
     "module": "ESNext",