fix: The system default roles are not internationalized

Author: zhanweizhang7

ui/src/components/tag-group/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tag-group" v-if="props.tags.length">
     <el-tag :size="props.size" class="default-tag tag-ellipsis" :title="props.tags[0]">
-      {{ props.tags[0] }}
+      {{ i18n_name(props.tags[0]) }}
     </el-tag>
     <el-tooltip effect="light" :disabled="tooltipDisabled">
       <el-tag :size="props.size" class="info-tag ml-4 cursor" v-if="props.tags?.length > 1">
@@ -21,6 +21,8 @@
   </div>
 </template>
 <script setup lang="ts">
+import { i18n_name } from '@/utils/common'
+
 const props = defineProps<{
   tags: string[]
   size?: 'large' | 'default' | 'small'

ui/src/layout/layout-header/avatar/index.vue

@@ -2,7 +2,7 @@
   <el-dropdown trigger="click" type="primary">
     <div class="flex-center cursor">
       <el-avatar :size="30">
-        <img src="@/assets/user-icon.svg" style="width: 54%" alt=""/>
+        <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
       </el-avatar>
       <!-- <span class="ml-8 color-text-primary ellipsis"
             :title="user.userInfo?.nick_name">{{ user.userInfo?.nick_name }}</span>
@@ -16,12 +16,14 @@
         <div class="userInfo flex align-center">
           <div class="mr-12 flex align-center">
             <el-avatar :size="30">
-              <img src="@/assets/user-icon.svg" style="width: 54%" alt=""/>
+              <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
             </el-avatar>
           </div>
           <div style="width: 90%">
-            <p class="bold mb-4" style="font-size: 14px">{{ user.userInfo?.nick_name }} <span
-              class="color-secondary lighter">({{ user.userInfo?.username }})</span></p>
+            <p class="bold mb-4" style="font-size: 14px">
+              {{ i18n_name(user.userInfo?.nick_name as string) }}
+              <span class="color-secondary lighter">({{ user.userInfo?.username }})</span>
+            </p>
             <template v-if="user.userInfo?.role_name && user.userInfo.role_name.length > 0">
               <TagGroup
                 size="small"
@@ -73,7 +75,7 @@
             v-if="
               hasPermission(
                 new ComplexPermission(
-                  [RoleConst.ADMIN,RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE, RoleConst.USER],
+                  [RoleConst.ADMIN, RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE, RoleConst.USER],
                   [PermissionConst.SYSTEM_API_KEY_EDIT],
                   [EditionConst.IS_EE, EditionConst.IS_PE],
                   'OR',
@@ -104,7 +106,7 @@
             <div class="flex-between w-full" style="line-height: 22px; padding: 12px 11px">
               <span> {{ $t('layout.language') }}</span>
               <el-icon>
-                <ArrowRight/>
+                <ArrowRight />
               </el-icon>
             </div>
 
@@ -118,14 +120,14 @@
                   class="flex-between"
                 >
                   <span :class="lang.value === user.userInfo?.language ? 'primary' : ''">{{
-                      lang.label
-                    }}</span>
+                    lang.label
+                  }}</span>
 
                   <el-icon
                     :class="lang.value === user.userInfo?.language ? 'primary' : ''"
                     v-if="lang.value === user.userInfo?.language"
                   >
-                    <Check/>
+                    <Check />
                   </el-icon>
                 </el-dropdown-item>
               </el-dropdown-menu>
@@ -135,16 +137,16 @@
         <el-dropdown-item
           @click="openAbout"
           v-if="
-              hasPermission(
-                new ComplexPermission(
-                  [RoleConst.ADMIN, RoleConst.USER, RoleConst.WORKSPACE_MANAGE],
-                  [PermissionConst.ABOUT_READ],
-                  [],
-                  'OR',
-                ),
+            hasPermission(
+              new ComplexPermission(
+                [RoleConst.ADMIN, RoleConst.USER, RoleConst.WORKSPACE_MANAGE],
+                [PermissionConst.ABOUT_READ],
+                [],
                 'OR',
-              )
-            "
+              ),
+              'OR',
+            )
+          "
         >
           {{ $t('layout.about.title') }}
         </el-dropdown-item>
@@ -155,27 +157,28 @@
       </el-dropdown-menu>
     </template>
   </el-dropdown>
-  <APIKeyDialog :user-id="user.userInfo?.id" ref="APIKeyDialogRef"/>
+  <APIKeyDialog :user-id="user.userInfo?.id" ref="APIKeyDialogRef" />
   <ResetPassword ref="resetPasswordRef"></ResetPassword>
   <AboutDialog ref="AboutDialogRef"></AboutDialog>
 
   <!-- <UserPwdDialog ref="UserPwdDialogRef" /> -->
 </template>
 <script setup lang="ts">
-import {ref, onMounted, computed} from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import useStore from '@/stores'
-import {useRouter} from 'vue-router'
-import {t} from "@/locales"
+import { useRouter } from 'vue-router'
+import { t } from '@/locales'
 import ResetPassword from './ResetPassword.vue'
 import AboutDialog from './AboutDialog.vue'
 // import UserPwdDialog from '@/views/user-manage/component/UserPwdDialog.vue'
 import APIKeyDialog from './APIKeyDialog.vue'
-import {ComplexPermission} from '@/utils/permission/type'
-import {langList} from '@/locales/index'
-import {hasPermission} from '@/utils/permission'
-import {PermissionConst, RoleConst, EditionConst} from '@/utils/permission/data'
+import { ComplexPermission } from '@/utils/permission/type'
+import { langList } from '@/locales/index'
+import { hasPermission } from '@/utils/permission'
+import { PermissionConst, RoleConst, EditionConst } from '@/utils/permission/data'
+import { i18n_name } from '@/utils/common'
 
-const {user, login} = useStore()
+const { user, login } = useStore()
 const router = useRouter()
 
 const AboutDialogRef = ref()
@@ -199,15 +202,15 @@ const openResetPassword = () => {
   resetPasswordRef.value?.open()
 }
 const m: any = {
-  "系统管理员": 'layout.about.inner_admin',
-  "工作空间管理员": 'layout.about.inner_wsm',
-  "普通用户": 'layout.about.inner_user'
+  系统管理员: 'layout.about.inner_admin',
+  工作空间管理员: 'layout.about.inner_wsm',
+  普通用户: 'layout.about.inner_user',
 }
 const role_list = computed(() => {
   if (!user.userInfo) {
     return []
   }
-  return user.userInfo?.role_name?.map(name => {
+  return user.userInfo?.role_name?.map((name) => {
     const inner = m[name]
     if (inner) {
       return t(inner)
@@ -218,9 +221,9 @@ const role_list = computed(() => {
 const logout = () => {
   login.logout().then(() => {
     if (user?.userInfo?.source && ['CAS', 'OIDC', 'OAuth2'].includes(user.userInfo.source)) {
-      router.push({name: 'login', query: {login_mode: 'manual'}})
+      router.push({ name: 'login', query: { login_mode: 'manual' } })
     } else {
-      router.push({name: 'login'})
+      router.push({ name: 'login' })
     }
   })
 }

ui/src/views/system/resource-authorization/index.vue

@@ -46,13 +46,15 @@
                     <div class="flex-between">
                       <div class="flex">
                         <span class="mr-8 ellipsis-1" :title="row.nick_name">{{
-                          row.nick_name
+                          i18n_name(row.nick_name)
                         }}</span>
                         <el-text
                           class="color-input-placeholder ellipsis-1"
                           :title="row.roles.join('，')"
                           v-if="hasPermission([EditionConst.IS_EE, EditionConst.IS_PE], 'OR')"
-                          >({{ row.roles?.join('，') }})</el-text
+                          >({{
+                            row.roles.map((item: any) => i18n_name(item))?.join('，')
+                          }})</el-text
                         >
                       </div>
                     </div>
@@ -88,6 +90,7 @@ import type { WorkspaceItem } from '@/api/type/workspace'
 import { loadPermissionApi } from '@/utils/dynamics-api/permission-api.ts'
 
 import useStore from '@/stores'
+import { i18n_name } from '@/utils/common'
 
 const route = useRoute()
 const { user } = useStore()
@@ -168,11 +171,13 @@ const getPermissionList = () => {
     if (resourceType === 'MODEL') {
       permissionData.value = res.data || []
     } else {
-      permissionData.value = res.data.map((item: any) => {
-      if (!item.folder_id && item.permission === 'NOT_AUTH') {
-        return {...item, permission: 'VIEW'}
-      }
-      return item}) || []
+      permissionData.value =
+        res.data.map((item: any) => {
+          if (!item.folder_id && item.permission === 'NOT_AUTH') {
+            return { ...item, permission: 'VIEW' }
+          }
+          return item
+        }) || []
     }
   })
 }
@@ -188,15 +193,15 @@ const toTree = (nodeList: any, pField: any) => {
   const nodeMap = Object.fromEntries(list.map((item: any) => [item.id, item]))
 
   for (let index = 0; index < nodeList.length; index++) {
-    const element = list[index];
+    const element = list[index]
     if (!element.children) {
       element.children = []
     }
     if (element[pField]) {
       const pNode = nodeMap[element[pField]]
       if (pNode) {
         if (!pNode.children) {
-           pNode.children = []
+          pNode.children = []
         }
         pNode.children.push(element)
       }

ui/src/views/system/user-manage/index.vue

@@ -292,6 +292,7 @@ import { t } from '@/locales'
 import useStore from '@/stores'
 import { PermissionConst, RoleConst } from '@/utils/permission/data'
 import { hasPermission } from '@/utils/permission/index'
+import { i18n_name } from '@/utils/common'
 
 const { user, common } = useStore()
 const search_type = ref('username')
@@ -338,10 +339,13 @@ function getList() {
   return userManageApi.getUserManage(paginationConfig, params, loading).then((res) => {
     userTableData.value = res.data.records.map((item: any) => ({
       ...item,
+      nick_name: i18n_name(item.nick_name),
       role_workspace: Object.entries(item.role_workspace ?? {}).map(([role, workspaces]) => ({
-        role,
+        role: i18n_name(role),
         workspace:
-          (workspaces as string[])?.[0] === 'None' ? '-' : (workspaces as string[])?.join(', '),
+          (workspaces as string[])?.[0] === 'None'
+            ? '-'
+            : (workspaces as string[])?.map((ws) => i18n_name(ws)).join(', '),
       })),
     }))
     paginationConfig.total = res.data.total