Pre Merge pull request !869 from 李家辉/dev-i18n-menu

src/api/system/menu/index.ts

@@ -3,6 +3,7 @@ import request from '@/config/axios'
 export interface MenuVO {
   id: number
   name: string
+  nameEn?: string
   permission: string
   type: number
   sort: number

src/locales/en.ts

@@ -141,9 +141,9 @@ export default {
     qrcode: 'Scan the QR code to log in',
     btnRegister: 'Sign up',
     SmsSendMsg: 'code has been sent',
-    resetPassword: "Reset Password",
+    resetPassword: 'Reset Password',
-    resetPasswordSuccess: "Reset Password Success",
+    resetPasswordSuccess: 'Reset Password Success',
-    invalidTenantName:"Invalid Tenant Name"
+    invalidTenantName: 'Invalid Tenant Name'
   },
   captcha: {
     verify: 'Verify',
@@ -156,6 +156,7 @@ export default {
   },
   router: {
     login: 'Login',
+    socialLogin: 'Social Login',
     home: 'Home',
     analysis: 'Analysis',
     workplace: 'Workplace'
@@ -459,4 +460,4 @@ export default {
     btn_zoom_out: 'Zoom out',
     preview: 'Preivew'
   }
-}
+}

src/store/modules/user.ts

@@ -3,6 +3,10 @@ import { defineStore } from 'pinia'
 import { getAccessToken, removeToken } from '@/utils/auth'
 import { CACHE_KEY, useCache, deleteUserCache } from '@/hooks/web/useCache'
 import { getInfo, loginOut } from '@/api/login'
+import { eachTree } from '@/utils/tree'
+import { i18n } from '@/plugins/vueI18n'
+import { isNull } from '@/utils/is'
+import { LocaleMessages } from 'vue-i18n'
 
 const { wsCache } = useCache()
 
@@ -68,6 +72,23 @@ export const useUserStore = defineStore('admin-user', {
       this.isSetUser = true
       wsCache.set(CACHE_KEY.USER, userInfo)
       wsCache.set(CACHE_KEY.ROLE_ROUTERS, userInfo.menus)
+
+      // 设置动态翻译
+      // 兼容切换语言不刷新页面的情况，所有语言都需要设置
+      type LocaleMessageMap = LocaleMessages<Record<string, any>>
+      const routerLocaleMessage =
+        i18n.global.getLocaleMessage<LocaleMessageMap>('zh-CN')?.router ?? reactive({})
+      const routerLocaleMessageEn =
+        i18n.global.getLocaleMessage<LocaleMessageMap>('en')?.router ?? reactive({})
+      eachTree(userInfo.menus, (menuItem) => {
+        const key = menuItem.id // 不能用name，OAuth 2.0这种带特殊字符的name会难以识别
+        const zh = menuItem.name
+        const en = isNull(menuItem.nameEn) ? zh : menuItem.nameEn
+        routerLocaleMessage[key] = zh
+        routerLocaleMessageEn[key] = en
+      })
+      i18n.global.setLocaleMessage('zh-CN', { router: routerLocaleMessage })
+      i18n.global.setLocaleMessage('en', { router: routerLocaleMessageEn })
     },
     async setUserAvatarAction(avatar: string) {
       const userInfo = wsCache.get(CACHE_KEY.USER)

src/utils/routerHelper.ts

@@ -67,7 +67,7 @@ export const generateRoute = (routes: AppCustomRouteRecordRaw[]): AppRouteRecord
   for (const route of routes) {
     // 1. 生成 meta 菜单元数据
     const meta = {
-      title: route.name,
+      title: 'router.' + route.id,
       icon: route.icon,
       hidden: !route.visible,
       noCache: !route.keepAlive,

src/views/system/menu/MenuForm.vue

@@ -20,6 +20,9 @@
       <el-form-item label="菜单名称" prop="name">
         <el-input v-model="formData.name" clearable placeholder="请输入菜单名称" />
       </el-form-item>
+      <el-form-item label="英文名称" prop="nameEn">
+        <el-input v-model="formData.nameEn" clearable placeholder="请输入英文名称" />
+      </el-form-item>
       <el-form-item label="菜单类型" prop="type">
         <el-radio-group v-model="formData.type">
           <el-radio-button
@@ -132,6 +135,7 @@ const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
   id: undefined,
   name: '',
+  nameEn: '',
   permission: '',
   type: SystemMenuTypeEnum.DIR,
   sort: Number(undefined),
@@ -224,7 +228,7 @@ const menuTree = ref<Tree[]>([]) // 树形结构
 const getTree = async () => {
   menuTree.value = []
   const res = await MenuApi.getSimpleMenusList()
-  let menu: Tree = { id: 0, name: '主类目', children: [] }
+  let menu: Tree = { id: 0, name: '主类目', nameEn: 'Root', children: [] }
   menu.children = handleTree(res)
   menuTree.value.push(menu)
 }
@@ -234,6 +238,7 @@ const resetForm = () => {
   formData.value = {
     id: undefined,
     name: '',
+    nameEn: '',
     permission: '',
     type: SystemMenuTypeEnum.DIR,
     sort: Number(undefined),

src/views/system/menu/index.vue

@@ -20,6 +20,15 @@
           @keyup.enter="handleQuery"
         />
       </el-form-item>
+      <el-form-item label="英文名称" prop="nameEn">
+        <el-input
+          v-model="queryParams.nameEn"
+          class="!w-240px"
+          clearable
+          placeholder="请输入英文名称"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
       <el-form-item label="状态" prop="status">
         <el-select
           v-model="queryParams.status"
@@ -110,6 +119,12 @@ const columns = [
     width: 250,
     fixed: TableV2FixedDir.LEFT
   },
+  {
+    key: 'nameEn',
+    title: '英文名称',
+    dataKey: 'nameEn',
+    width: 250
+  },
   {
     key: 'icon',
     title: '图标',
@@ -222,6 +237,7 @@ const loading = ref(true) // 列表的加载中
 const list = ref<any[]>([]) // 列表的数据
 const queryParams = reactive({
   name: undefined,
+  nameEn: undefined,
   status: undefined
 })
 const queryFormRef = ref() // 搜索的表单

types/router.d.ts

@@ -68,6 +68,7 @@ declare global {
   }
 
   interface AppCustomRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> {
+    id: number
     icon: any
     name: string
     meta: RouteMeta