From c5d06566082bfe4361944783c4e7f770126add2c Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 22 Jul 2022 12:49:06 +0800
Subject: [PATCH] feat: show the number of permissions under the role

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 src/modules/system/roles/RoleDetail.vue            | 12 +++++++++++-
 src/modules/system/roles/RoleList.vue              | 14 ++++++++++++--
 .../system/roles/components/RoleCreationModal.vue  |  3 ++-
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/modules/system/roles/RoleDetail.vue b/src/modules/system/roles/RoleDetail.vue
index aeb518656..56570ac21 100644
--- a/src/modules/system/roles/RoleDetail.vue
+++ b/src/modules/system/roles/RoleDetail.vue
@@ -178,7 +178,17 @@ onMounted(() => {
           <p
             class="mt-1 flex max-w-2xl items-center gap-2 text-sm text-gray-500"
           >
-            <span>包含 {{ formState.role?.rules?.length }} 个权限</span>
+            <span
+              >包含
+              {{
+                JSON.parse(
+                  formState.role.metadata.annotations?.[
+                    rbacAnnotations.DEPENDENCIES
+                  ] || "[]"
+                ).length
+              }}
+              个权限</span
+            >
           </p>
         </div>
         <div class="border-t border-gray-200">
diff --git a/src/modules/system/roles/RoleList.vue b/src/modules/system/roles/RoleList.vue
index 5e80ff717..97f2a1f8a 100644
--- a/src/modules/system/roles/RoleList.vue
+++ b/src/modules/system/roles/RoleList.vue
@@ -17,7 +17,7 @@ import { computed, onMounted, ref } from "vue";
 import type { Role } from "@halo-dev/api-client";
 import { apiClient } from "@halo-dev/admin-shared";
 import { roleLabels } from "@/constants/labels";
-import { pluginAnnotations } from "@/constants/annotations";
+import { pluginAnnotations, rbacAnnotations } from "@/constants/annotations";
 
 const createVisible = ref(false);
 const roles = ref<Role[]>([]);
@@ -187,7 +187,17 @@ onMounted(() => {
                   </span>
                 </div>
                 <div class="mt-2 flex">
-                  <span class="text-xs text-gray-500"> 包含 0 个权限 </span>
+                  <span class="text-xs text-gray-500">
+                    包含
+                    {{
+                      JSON.parse(
+                        role.metadata.annotations?.[
+                          rbacAnnotations.DEPENDENCIES
+                        ] || "[]"
+                      ).length
+                    }}
+                    个权限
+                  </span>
                 </div>
               </div>
               <div class="flex">
diff --git a/src/modules/system/roles/components/RoleCreationModal.vue b/src/modules/system/roles/components/RoleCreationModal.vue
index bfbc79a83..742b32ecc 100644
--- a/src/modules/system/roles/components/RoleCreationModal.vue
+++ b/src/modules/system/roles/components/RoleCreationModal.vue
@@ -120,7 +120,7 @@ watch(
 <template>
   <VModal
     :visible="visible"
-    :width="650"
+    :width="700"
     title="创建角色"
     @update:visible="handleVisibleChange"
   >
@@ -145,6 +145,7 @@ watch(
           ></FormKit>
           <FormKit
             v-model="creationFormState.role.metadata.name"
+            help="角色别名，用于区分角色，不能重复，创建之后不能修改"
             label="别名"
             type="text"
             validation="required"