From e6f878338990dafe2fb25c8045991ee2da4e30fc Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Sun, 17 Aug 2025 23:41:11 +0800
Subject: [PATCH] Fix role dependency handling in role editing form (#7684)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area ui
/kind bug
/milestone 2.21.x

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

See #7676

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

Fixes #7676

#### Special notes for your reviewer:

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

```release-note
修复角色修改表单中，所选权限可能出现不完整的问题。
```
---
 .../roles/components/RoleEditingModal.vue     | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/ui/console-src/modules/system/roles/components/RoleEditingModal.vue b/ui/console-src/modules/system/roles/components/RoleEditingModal.vue
index 324e9f1b4..b2ca00d50 100644
--- a/ui/console-src/modules/system/roles/components/RoleEditingModal.vue
+++ b/ui/console-src/modules/system/roles/components/RoleEditingModal.vue
@@ -4,6 +4,7 @@ import { useRoleForm, useRoleTemplateSelection } from "@/composables/use-role";
 import { rbacAnnotations } from "@/constants/annotations";
 import { pluginLabels, roleLabels } from "@/constants/labels";
 import { setFocus } from "@/formkit/utils/focus";
+import { resolveDeepDependencies } from "@/utils/role";
 import type { Role } from "@halo-dev/api-client";
 import { coreApiClient } from "@halo-dev/api-client";
 import { VButton, VModal, VSpace } from "@halo-dev/components";
@@ -61,11 +62,9 @@ onMounted(() => {
 
   if (props.role) {
     formState.value = cloneDeep(props.role);
-    const dependencies =
-      props.role.metadata.annotations?.[rbacAnnotations.DEPENDENCIES];
-    if (dependencies) {
-      selectedRoleTemplates.value = new Set(JSON.parse(dependencies));
-    }
+    selectedRoleTemplates.value = new Set<string>(
+      resolveDeepDependencies(props.role, roleTemplates.value || [])
+    );
   }
 });
 
@@ -74,13 +73,8 @@ const editingModalTitle = props.role
   : t("core.role.editing_modal.titles.create");
 
 const handleCreateOrUpdateRole = async () => {
-  try {
-    await handleCreateOrUpdate();
-
-    modal.value?.close();
-  } catch (e) {
-    console.error(e);
-  }
+  await handleCreateOrUpdate();
+  modal.value?.close();
 };
 </script>
 <template>
@@ -196,7 +190,10 @@ const handleCreateOrUpdateRole = async () => {
               </dt>
               <dd class="text-sm text-gray-900">
                 <ul class="space-y-2">
-                  <li v-for="(roleTemplate, index) in group.roles" :key="index">
+                  <li
+                    v-for="roleTemplate in group.roles"
+                    :key="roleTemplate.metadata.name"
+                  >
                     <label
                       class="inline-flex w-full cursor-pointer flex-row items-center gap-4 rounded-base border p-5 hover:border-primary"
                     >