diff --git a/ui/src/components/tag-group/index.vue b/ui/src/components/tag-group/index.vue
index cdb52d57a16..8911970e839 100644
--- a/ui/src/components/tag-group/index.vue
+++ b/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'
diff --git a/ui/src/layout/layout-header/avatar/index.vue b/ui/src/layout/layout-header/avatar/index.vue
index 24ad72fad58..811b99b4ed5 100644
--- a/ui/src/layout/layout-header/avatar/index.vue
+++ b/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' })
     }
   })
 }
diff --git a/ui/src/views/system/resource-authorization/index.vue b/ui/src/views/system/resource-authorization/index.vue
index 980a061f921..2e09668bb4c 100644
--- a/ui/src/views/system/resource-authorization/index.vue
+++ b/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,7 +193,7 @@ 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 = []
     }
@@ -196,7 +201,7 @@ const toTree = (nodeList: any, pField: any) => {
       const pNode = nodeMap[element[pField]]
       if (pNode) {
         if (!pNode.children) {
-           pNode.children = []
+          pNode.children = []
         }
         pNode.children.push(element)
       }
diff --git a/ui/src/views/system/user-manage/index.vue b/ui/src/views/system/user-manage/index.vue
index f732321ea1b..1441181c1c6 100644
--- a/ui/src/views/system/user-manage/index.vue
+++ b/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
diff --git a/ui/src/views/system/workspace/component/AddMemberDrawer.vue b/ui/src/views/system/workspace/component/AddMemberDrawer.vue
index 32891f7b774..3f27e33f11a 100644
--- a/ui/src/views/system/workspace/component/AddMemberDrawer.vue
+++ b/ui/src/views/system/workspace/component/AddMemberDrawer.vue
@@ -4,8 +4,13 @@
       <h4>{{ $t('views.role.member.add') }}</h4>
     </template>
     <template #default>
-      <MemberFormContent ref="memberFormContentRef" :models="formItemModel" v-model:form="list"
-        v-loading="memberFormContentLoading" keepOneLine />
+      <MemberFormContent
+        ref="memberFormContentRef"
+        :models="formItemModel"
+        v-model:form="list"
+        v-loading="memberFormContentLoading"
+        keepOneLine
+      />
     </template>
     <template #footer>
       <div style="flex: auto">
@@ -28,72 +33,81 @@ import { MsgSuccess } from '@/utils/message'
 import type { CreateWorkspaceMemberParamsItem, WorkspaceItem } from '@/api/type/workspace'
 import type { FormItemModel } from '@/api/type/role'
 import { RoleTypeEnum } from '@/enums/system'
-import {loadPermissionApi} from "@/utils/dynamics-api/permission-api.ts";
+import { loadPermissionApi } from '@/utils/dynamics-api/permission-api.ts'
+import { i18n_name } from '@/utils/common'
 
 const props = defineProps<{
   currentWorkspace?: WorkspaceItem
 }>()
 
 const emit = defineEmits<{
-  (e: 'refresh'): void;
-}>();
+  (e: 'refresh'): void
+}>()
 
 const loading = ref(false)
 const visible = ref(false)
-const list = ref<CreateWorkspaceMemberParamsItem[]>([]);
+const list = ref<CreateWorkspaceMemberParamsItem[]>([])
 
-const memberFormContentLoading = ref(false);
-const formItemModel = ref<FormItemModel[]>([]);
-const userFormItem = ref<FormItemModel[]>([]);
-const roleFormItem = ref<FormItemModel[]>([]);
+const memberFormContentLoading = ref(false)
+const formItemModel = ref<FormItemModel[]>([])
+const userFormItem = ref<FormItemModel[]>([])
+const roleFormItem = ref<FormItemModel[]>([])
 
 async function getUserFormItem() {
   try {
-    const res = await UserApi.getUserList(memberFormContentLoading);
-    userFormItem.value = [{
-      path: 'user_ids',
-      label: t('views.role.member.title'),
-      rules: [
-        {
-          required: true,
-          message: `${t('common.selectPlaceholder')}${t('views.role.member.title')}`,
+    const res = await UserApi.getUserList(memberFormContentLoading)
+    userFormItem.value = [
+      {
+        path: 'user_ids',
+        label: t('views.role.member.title'),
+        rules: [
+          {
+            required: true,
+            message: `${t('common.selectPlaceholder')}${t('views.role.member.title')}`,
+          },
+        ],
+        selectProps: {
+          options:
+            res.data?.map((item) => ({
+              label: item.nick_name,
+              value: item.id,
+            })) || [],
+          placeholder: `${t('common.selectPlaceholder')}${t('views.role.member.title')}`,
         },
-      ],
-      selectProps: {
-        options: res.data?.map(item => ({
-          label: item.nick_name,
-          value: item.id
-        })) || [],
-        placeholder: `${t('common.selectPlaceholder')}${t('views.role.member.title')}`
-      }
-    }];
+      },
+    ]
   } catch (e) {
-    console.error(e);
+    console.error(e)
   }
 }
 
 async function getRoleFormItem() {
   try {
-    const res = await loadPermissionApi('workspace').getWorkspaceRoleList(memberFormContentLoading);
-    roleFormItem.value = [{
-      path: 'role_ids',
-      label: t('views.role.member.role'),
-      rules: [
-        {
-          required: true,
-          message: `${t('common.selectPlaceholder')}${t('views.role.member.role')}`,
+    const res = await loadPermissionApi('workspace').getWorkspaceRoleList(memberFormContentLoading)
+    roleFormItem.value = [
+      {
+        path: 'role_ids',
+        label: t('views.role.member.role'),
+        rules: [
+          {
+            required: true,
+            message: `${t('common.selectPlaceholder')}${t('views.role.member.role')}`,
+          },
+        ],
+        selectProps: {
+          options:
+            res.data
+              .filter((item: any) => item.type !== RoleTypeEnum.ADMIN)
+              ?.map((item: any) => ({
+                label: i18n_name(item.name),
+                value: item.id,
+              })) || [],
+          placeholder: `${t('common.selectPlaceholder')}${t('views.role.member.role')}`,
         },
-      ],
-      selectProps: {
-        options: res.data.filter((item: any) => item.type !== RoleTypeEnum.ADMIN)?.map((item: any) => ({
-          label: item.name,
-          value: item.id
-        })) || [],
-        placeholder: `${t('common.selectPlaceholder')}${t('views.role.member.role')}`
-      }
-    }]
+      },
+    ]
   } catch (e) {
-    console.error(e);
+    console.error(e)
   }
 }
 
@@ -103,13 +117,13 @@ function init() {
 }
 
 onBeforeMount(async () => {
-  await getUserFormItem();
-  await getRoleFormItem();
+  await getUserFormItem()
+  await getRoleFormItem()
   init()
 })
 
 function open() {
-  init();
+  init()
   visible.value = true
 }
 
@@ -121,9 +135,13 @@ const memberFormContentRef = ref<InstanceType<typeof MemberFormContent>>()
 function handleAdd() {
   memberFormContentRef.value?.validate().then(async (valid: any) => {
     if (valid) {
-      await loadPermissionApi('workspace').CreateWorkspaceMember(props.currentWorkspace?.id as string, list.value, loading)
+      await loadPermissionApi('workspace').CreateWorkspaceMember(
+        props.currentWorkspace?.id as string,
+        list.value,
+        loading,
+      )
       MsgSuccess(t('common.addSuccess'))
-      handleCancel();
+      handleCancel()
       emit('refresh')
     }
   })
diff --git a/ui/src/views/system/workspace/component/Member.vue b/ui/src/views/system/workspace/component/Member.vue
index ee7266b6401..46348ad0574 100644
--- a/ui/src/views/system/workspace/component/Member.vue
+++ b/ui/src/views/system/workspace/component/Member.vue
@@ -6,16 +6,22 @@
       v-hasPermission="
         new ComplexPermission(
           [RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
-          [PermissionConst.WORKSPACE_ADD_MEMBER, PermissionConst.WORKSPACE_WORKSPACE_ADD_MEMBER.getWorkspacePermissionWorkspaceManageRole],
+          [
+            PermissionConst.WORKSPACE_ADD_MEMBER,
+            PermissionConst.WORKSPACE_WORKSPACE_ADD_MEMBER
+              .getWorkspacePermissionWorkspaceManageRole,
+          ],
           [],
-            'OR',)"
+          'OR',
+        )
+      "
     >
       {{ $t('views.role.member.add') }}
     </el-button>
     <div class="flex complex-search">
       <el-select class="complex-search__left" v-model="searchType" style="width: 120px">
-        <el-option :label="$t('views.login.loginForm.username.label')" value="username"/>
-        <el-option :label="$t('views.userManage.userForm.nick_name.label')" value="nick_name"/>
+        <el-option :label="$t('views.login.loginForm.username.label')" value="username" />
+        <el-option :label="$t('views.userManage.userForm.nick_name.label')" value="nick_name" />
       </el-select>
       <el-input
         v-if="searchType === 'username'"
@@ -31,7 +37,8 @@
         @change="getList"
         :placeholder="$t('common.inputPlaceholder')"
         style="width: 220px"
-        clearable/>
+        clearable
+      />
     </div>
   </div>
   <app-table
@@ -44,9 +51,9 @@
     :span-method="objectSpanMethod"
     :maxTableHeight="320"
   >
-    <el-table-column prop="nick_name" :label="$t('views.userManage.userForm.nick_name.label')"/>
-    <el-table-column prop="username" :label="$t('views.login.loginForm.username.label')"/>
-    <el-table-column prop="role_name" :label="$t('views.role.member.role')"/>
+    <el-table-column prop="nick_name" :label="$t('views.userManage.userForm.nick_name.label')" />
+    <el-table-column prop="username" :label="$t('views.login.loginForm.username.label')" />
+    <el-table-column prop="role_name" :label="$t('views.role.member.role')" />
     <el-table-column :label="$t('common.operation')" width="100" fixed="right">
       <template #default="{ row }">
         <el-tooltip
@@ -60,10 +67,16 @@
             @click.stop="handleDelete(row)"
             v-hasPermission="
               new ComplexPermission(
-              [RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
-              [PermissionConst.WORKSPACE_REMOVE_MEMBER, PermissionConst.WORKSPACE_WORKSPACE_REMOVE_MEMBER.getWorkspacePermissionWorkspaceManageRole],
-              [],
-                'OR',)"
+                [RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole],
+                [
+                  PermissionConst.WORKSPACE_REMOVE_MEMBER,
+                  PermissionConst.WORKSPACE_WORKSPACE_REMOVE_MEMBER
+                    .getWorkspacePermissionWorkspaceManageRole,
+                ],
+                [],
+                'OR',
+              )
+            "
           >
             <AppIcon iconName="app-delete-users"></AppIcon>
           </el-button>
@@ -79,15 +92,15 @@
 </template>
 
 <script setup lang="ts">
-import {onMounted, ref, reactive, watch} from 'vue'
-import {MsgSuccess, MsgConfirm} from '@/utils/message'
-import {t} from '@/locales'
+import { onMounted, ref, reactive, watch } from 'vue'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import { t } from '@/locales'
 import AddMemberDrawer from './AddMemberDrawer.vue'
-import type {WorkspaceMemberItem, WorkspaceItem} from '@/api/type/workspace'
-import {PermissionConst, RoleConst} from '@/utils/permission/data'
-import {ComplexPermission} from '@/utils/permission/type'
-import {loadPermissionApi} from "@/utils/dynamics-api/permission-api.ts";
-
+import type { WorkspaceMemberItem, WorkspaceItem } from '@/api/type/workspace'
+import { PermissionConst, RoleConst } from '@/utils/permission/data'
+import { ComplexPermission } from '@/utils/permission/type'
+import { loadPermissionApi } from '@/utils/dynamics-api/permission-api.ts'
+import { i18n_name } from '@/utils/common'
 
 const props = defineProps<{
   currentWorkspace?: WorkspaceItem
@@ -120,7 +133,11 @@ async function getList() {
       params,
       loading,
     )
-    tableData.value = res.data.records
+    tableData.value = res.data.records.map((item: any) => ({
+      ...item,
+      nick_name: i18n_name(item.nick_name),
+      role_name: i18n_name(item.role_name),
+    }))
     paginationConfig.total = res.data.total
   } catch (error) {
     console.error(error)
@@ -143,22 +160,22 @@ watch(
   },
 )
 
-const objectSpanMethod = ({row, column, rowIndex, columnIndex}: any) => {
+const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
   if (column.property === 'nick_name' || column.property === 'username') {
-    const sameUserRows = tableData.value.filter(item => item.user_id === row.user_id);
-    if (rowIndex === tableData.value.findIndex(item => item.user_id === row.user_id)) {
+    const sameUserRows = tableData.value.filter((item) => item.user_id === row.user_id)
+    if (rowIndex === tableData.value.findIndex((item) => item.user_id === row.user_id)) {
       return {
         rowspan: sameUserRows.length,
-        colspan: 1
-      };
+        colspan: 1,
+      }
     } else {
       return {
         rowspan: 0,
-        colspan: 0
-      };
+        colspan: 0,
+      }
     }
   }
-};
+}
 
 const addMemberDrawerRef = ref<InstanceType<typeof AddMemberDrawer>>()
 
@@ -173,17 +190,14 @@ function handleDelete(row: WorkspaceMemberItem) {
   })
     .then(() => {
       loading.value = true
-      loadPermissionApi('workspace').deleteWorkspaceMember(
-        props.currentWorkspace?.id as string,
-        row.user_relation_id,
-        loading,
-      ).then(() => {
-        MsgSuccess(t('common.deleteSuccess'))
-        getList()
-      })
-    })
-    .catch(() => {
+      loadPermissionApi('workspace')
+        .deleteWorkspaceMember(props.currentWorkspace?.id as string, row.user_relation_id, loading)
+        .then(() => {
+          MsgSuccess(t('common.deleteSuccess'))
+          getList()
+        })
     })
+    .catch(() => {})
 }
 </script>
 
@@ -192,4 +206,3 @@ function handleDelete(row: WorkspaceMemberItem) {
   border-right: 1px solid var(--el-table-border-color);
 }
 </style>
-