feat: show the number of permissions under the role

Signed-off-by: Ryan Wang <i@ryanc.cc>

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">

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">

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"