fix: the issue that role display name (halo-dev/console#847)

#### What type of PR is this?

/kind improvement

#### What this PR does / why we need it:

为系统初始化的角色添加显示名称

#### Which issue(s) this PR fixes:

Fixes halo-dev#3257

#### Screenshots:

<img width="1668" alt="image" src="https://user-images.githubusercontent.com/21301288/218020794-696420c4-69bb-4422-9409-482bb2aff708.png">


#### Special notes for your reviewer:

测试方式：

1. Halo 需要切换到：halo-dev#3280
2. 检查 Console 端显示的系统角色是否正常。
3. 新建若干自定义角色，检查名称是否正常。

#### Does this PR introduce a user-facing change?

```release-note
优化 Console 端用户角色标识的显示名称。
```

src/layouts/BasicLayout.vue

@@ -27,6 +27,7 @@ import sortBy from "lodash.sortby";
 import { useRoleStore } from "@/stores/role";
 import { hasPermission } from "@/utils/permission";
 import { useUserStore } from "@/stores/user";
+import { rbacAnnotations } from "@/constants/annotations";
 
 const route = useRoute();
 const router = useRouter();
@@ -56,11 +57,16 @@ const handleLogout = () => {
 };
 
 const currentRole = computed(() => {
-  return JSON.parse(
-    userStore.currentUser?.metadata.annotations?.[
-      "rbac.authorization.halo.run/role-names"
-    ] || "[]"
-  )[0];
+  const names = JSON.parse(
+    userStore.currentUser?.metadata.annotations?.[rbacAnnotations.ROLE_NAMES] ||
+      "[]"
+  );
+
+  if (names.length === 0) {
+    return;
+  }
+
+  return roleStore.getRoleDisplayName(names[0]);
 });
 
 // Global Search
@@ -228,7 +234,7 @@ onMounted(generateMenus);
             <div class="flex text-sm font-medium">
               {{ userStore.currentUser?.spec.displayName }}
             </div>
-            <div class="flex">
+            <div v-if="currentRole" class="flex">
               <VTag>
                 <template #leftIcon>
                   <IconUserSettings />

src/main.ts

@@ -240,6 +240,9 @@ async function initApp() {
 
     await loadUserPermissions();
 
+    const roleStore = useRoleStore();
+    await roleStore.fetchRoles();
+
     try {
       await loadPluginModules();
     } catch (e) {

src/modules/system/roles/RoleList.vue

@@ -36,7 +36,9 @@ import Fuse from "fuse.js";
 import { usePermission } from "@/utils/permission";
 import { roleLabels } from "@/constants/labels";
 import { SUPER_ROLE_NAME } from "@/constants/constants";
+import { useRoleStore } from "@/stores/role";
 
+const roleStore = useRoleStore();
 const { currentUserHasPermission } = usePermission();
 
 const editingModal = ref<boolean>(false);
@@ -91,6 +93,7 @@ const handleOpenEditingModal = (role: Role) => {
 const onEditingModalClose = () => {
   selectedRole.value = undefined;
   handleFetchRoles();
+  roleStore.fetchRoles();
 };
 
 const handleCloneRole = async (role: Role) => {
@@ -140,6 +143,7 @@ const handleDelete = async (role: Role) => {
         console.error("Failed to delete role", e);
       } finally {
         handleFetchRoles();
+        roleStore.fetchRoles();
       }
     },
   });

src/modules/system/users/UserDetail.vue

@@ -6,13 +6,20 @@ import { useRouter } from "vue-router";
 import type { User } from "@halo-dev/api-client";
 import { rbacAnnotations } from "@/constants/annotations";
 import { formatDatetime } from "@/utils/date";
+import { useRoleStore } from "@/stores/role";
 
 const user = inject<Ref<User>>("user");
 
+const roleStore = useRoleStore();
+
 const roles = computed(() => {
-  return JSON.parse(
+  const names = JSON.parse(
     user?.value?.metadata?.annotations?.[rbacAnnotations.ROLE_NAMES] || "[]"
   );
+
+  return names.map((name: string) => {
+    return roleStore.getRoleDisplayName(name);
+  });
 });
 
 const router = useRouter();

src/modules/system/users/UserList.vue

@@ -30,6 +30,7 @@ import { useRouteQuery } from "@vueuse/router";
 import Fuse from "fuse.js";
 import { usePermission } from "@/utils/permission";
 import { useUserStore } from "@/stores/user";
+import { useRoleStore } from "@/stores/role";
 
 const { currentUserHasPermission } = usePermission();
 
@@ -55,6 +56,7 @@ const selectedUser = ref<User>();
 const refreshInterval = ref();
 
 const userStore = useUserStore();
+const roleStore = useRoleStore();
 
 let fuse: Fuse<User> | undefined = undefined;
 
@@ -209,9 +211,13 @@ const handleOpenGrantPermissionModal = (user: User) => {
 };
 
 const getRoles = (user: User) => {
-  return JSON.parse(
+  const names = JSON.parse(
     user.metadata.annotations?.[rbacAnnotations.ROLE_NAMES] || "[]"
   );
+
+  return names.map((name: string) => {
+    return roleStore.getRoleDisplayName(name);
+  });
 };
 
 onMounted(() => {

src/stores/role.ts

@@ -1,18 +1,34 @@
 import { defineStore } from "pinia";
 import type { Role, UserPermission } from "@halo-dev/api-client";
+import { ref } from "vue";
+import { apiClient } from "@/utils/api-client";
+import { roleLabels } from "@/constants/labels";
+import { rbacAnnotations } from "@/constants/annotations";
 
-interface RoleStoreState {
-  roles: Role[]; // all roles
-  permissions: UserPermission; // current user's permissions
-}
-
-export const useRoleStore = defineStore({
-  id: "role",
-  state: (): RoleStoreState => ({
+export const useRoleStore = defineStore("role", () => {
+  const roles = ref<Role[]>([]);
+  const permissions = ref<UserPermission>({
     roles: [],
-    permissions: {
-      roles: [],
-      uiPermissions: [],
-    },
-  }),
+    uiPermissions: [],
+  });
+
+  async function fetchRoles() {
+    try {
+      const { data } = await apiClient.extension.role.listv1alpha1Role({
+        page: 0,
+        size: 0,
+        labelSelector: [`!${roleLabels.TEMPLATE}`],
+      });
+      roles.value = data.items;
+    } catch (error) {
+      console.error("Failed to fetch roles", error);
+    }
+  }
+
+  function getRoleDisplayName(name: string) {
+    const role = roles.value.find((role) => role.metadata.name === name);
+    return role?.metadata.annotations?.[rbacAnnotations.DISPLAY_NAME] || name;
+  }
+
+  return { roles, permissions, fetchRoles, getRoleDisplayName };
 });