🎽 feat: i18n locale optimize (#402)

README-en.md

@@ -95,6 +95,51 @@ Test code coverage.
 pnpm test:coverage
 ```
 
+## 🌍 Internationalization (i18n) Setup
+
+This project supports multi-language settings, with `English` as the default language.
+
+### Default Language Configuration
+
+
+The default language is set through the [`defaultLanguageLocale`](src/locales/index.ts#L43) constant. To change the default language, simply modify the value of this constant:
+
+```ts
+export const defaultLanguageLocale = 'en'
+```
+
+### Extending Supported Languages
+
+The project currently supports the following languages, as detailed in [src/locales/index.ts](src/locales/index.ts#L13):
+
+```ts
+export const localesMapping = [
+  {
+    localeCode: 'zh-hans',
+    localeName: '简体中文',
+    localeLang: {...}
+  },
+  {
+    localeCode: 'en',
+    localeName: 'English',
+    localeLang: {...}
+  }
+]
+```
+
+To add support for a new language:
+
+  * Add a new language object to the [`localesMapping`](src/locales/index.ts#L13) array
+  * Create a corresponding language file in the [`src/locales/lang/`](src/locales/lang/) directory (e.g., de.ts for German)
+
+    ```
+    ./lang
+    ├── en.ts
+    └── zh-hans.ts
+    ```
+  * Import and merge the `Element Plus` language pack and custom language file, ensuring both UI components and custom content are localized.
+
+
 ## 💡 Tip
 
 * If Husky is not working, it may be due to incomplete initialization. Try running the following command to initialize:

README.md

@@ -93,6 +93,52 @@ pnpm test
 pnpm test:coverage
 ```
 
+## 🌍 国际化 i18n 设置
+
+本项目支持多语言设置，默认语言为 `English`.
+
+### 默认语言配置
+
+
+默认语言通过 [`defaultLanguageLocale`](src/locales/index.ts#L43) 常量设置。要更改默认语言，只需修改此常量的值：
+
+```ts
+export const defaultLanguageLocale = 'en'
+```
+
+### 扩展支持的语言
+
+
+项目当前支持以下语言，详见代码[src/locales/index.ts](src/locales/index.ts#L13):
+
+```ts
+export const localesMapping = [
+  {
+    localeCode: 'zh-hans',
+    localeName: '简体中文',
+    localeLang: {...}
+  },
+  {
+    localeCode: 'en',
+    localeName: 'English',
+    localeLang: {...}
+  }
+]
+```
+
+要添加新的语言支持:
+
+  * 在 [`localesMapping`](src/locales/index.ts#L13) 数组中添加新的语言对象
+  * 在 [`src/locales/lang/`](src/locales/lang/) 目录下创建对应的语言文件（如 de.ts 为德语）
+
+    ```
+    ./lang
+    ├── en.ts
+    └── zh-hans.ts
+    ```
+  * 导入并合并 `Element Plus` 语言包和自定义语言文件，确保 UI 组件和自定义内容均被本地化
+
+
 ## 💡 提示
 
 * 若 Husky 未生效，可能是由于未完成初始化，尝试执行以下命令进行初始化:

src/App.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { defaultLanguageLocale } from '@/locales'
+
 
 export default defineComponent({
   name: 'App',
@@ -13,7 +15,7 @@ export default defineComponent({
         if (route.name === '404') return
 
         store.dispatch('UserAccount/setLanguage', {
-          locale: route.params.locale || 'en'
+          locale: route.params.locale || defaultLanguageLocale
         })
       }
     )
@@ -34,5 +36,5 @@ export default defineComponent({
 </template>
 
 <style lang="scss">
-@use "@/styles/index.scss";
+@use "@/styles/index";
 </style>

src/hooks/useLanguage.ts

@@ -1,29 +1,17 @@
-import zhCn from 'element-plus/es/locale/lang/zh-cn'
-import en from 'element-plus/es/locale/lang/en'
-
-import selfEn from '@/locales/lang/en'
-import selfZhHans from '@/locales/lang/zh-hans'
+import { currentLocaleMap } from '@/locales'
 
 export const useLanguage = () => {
   const store = useBaseStore()
 
   const currentLocaleLang = computed(() => {
     let locale: any = null
 
-    switch (store.state.UserAccount.locale) {
-      case 'zh-hans':
-        locale = {
-          ...zhCn,
-          ...selfZhHans
-        }
-        break
-      case 'en':
-        locale = {
-          ...en,
-          ...selfEn
-        }
-        break
+    const targetLocaleItem = currentLocaleMap(store.state.UserAccount.locale)
+
+    if (targetLocaleItem) {
+      locale = targetLocaleItem.localeLang
     }
+
     return locale
   })
 

src/locales/index.ts

@@ -1,14 +1,45 @@
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import en from 'element-plus/es/locale/lang/en'
+
+import selfEn from '@/locales/lang/en'
+import selfZhHans from '@/locales/lang/zh-hans'
+
+
+/**
+ * I18n language locale mappings
+ *
+ * 国际化语言映射表设置
+ */
 export const localesMapping = [
   {
     localeCode: 'zh-hans',
-    localeName: '简体中文'
+    localeName: '简体中文',
+    localeLang: {
+      ...zhCn,
+      ...selfZhHans
+    }
   },
   {
     localeCode: 'en',
-    localeName: 'English'
+    localeName: 'English',
+    localeLang: {
+      ...en,
+      ...selfEn
+    }
   }
-]
+] as const
 
-export const isHasLocale = (targetLocaleCode) => {
-  return localesMapping.find(localeItem => localeItem.localeCode === targetLocaleCode)
+export const currentLocaleMap = (targetLocaleCode) => {
+  return localesMapping.find(
+    localeItem => localeItem.localeCode === targetLocaleCode
+  )
 }
+
+export type LangTypes = typeof localesMapping[number]['localeCode']
+
+/**
+ * Default language locale for the application
+ *
+ * 应用程序的默认语言设置
+ */
+export const defaultLanguageLocale: LangTypes = 'en'

src/modules/UserAccount/store/index.ts

@@ -10,6 +10,7 @@ import MUTATION from '@/modules/UserAccount/store/mutations-type'
 import mixin from '@/store/utils/mixin'
 
 import type { IGlobalState } from '@/store'
+import { defaultLanguageLocale } from '@/locales'
 
 export interface IUserAccountState {
   locale: string
@@ -21,7 +22,7 @@ const UserAccountModule: Module<IUserAccountState, IGlobalState> = {
   namespaced: true,
   _name: 'UserAccount',
   state: {
-    locale: 'en',
+    locale: defaultLanguageLocale,
     demoList: {},
     userInfo: {}
   },

src/router/child-routes.ts

@@ -3,7 +3,7 @@ const Layout = () => import('@/components/Layout/index.vue')
 const LayoutView = () => import('@/components/Layout/LayoutView.vue')
 const LayoutArea = () => import('@/components/Layout/LayoutArea.vue')
 
-const childrenRoutes: Array<RouteRecordRaw> = [
+const childRoutes: Array<RouteRecordRaw> = [
   {
     path: 'test-layout',
     name: '布局测试',
@@ -85,4 +85,4 @@ const childrenRoutes: Array<RouteRecordRaw> = [
   }
 ]
 
-export default childrenRoutes
+export default childRoutes

src/router/routes.ts

@@ -1,5 +1,5 @@
-import childrenRoutes from '@/router/child-routes'
-import { isHasLocale, localesMapping } from '@/locales'
+import childRoutes from '@/router/child-routes'
+import { currentLocaleMap, localesMapping } from '@/locales'
 import { isUndefined } from '@/utils/type'
 
 const Layout = () => import('@/components/Layout/index.vue')
@@ -25,7 +25,7 @@ const routes: Array<RouteRecordRaw> = [
     component: Layout,
     beforeEnter (to, from, next) {
       console.log('beforeEnter: to ', to)
-      if (isHasLocale(to.params.locale) && !isUndefined(to.params.pathMatch)) {
+      if (currentLocaleMap(to.params.locale) && !isUndefined(to.params.pathMatch)) {
         next(`/${ to.params.locale }/project`)
         return
       }
@@ -39,7 +39,7 @@ const routes: Array<RouteRecordRaw> = [
           name: 'Project'
         }
       },
-      ...childrenRoutes
+      ...childRoutes
     ]
   },
   {