Improve user permission readability

apps/vue/src/components/Permission/src/PermissionModal.vue

@@ -2,7 +2,7 @@
   <BasicModal
     v-bind="$attrs"
     @register="registerModal"
-    :title="title"
+    :title="getIdentity"
     :width="800"
     :min-height="600"
     @ok="handleSubmit"
@@ -57,7 +57,7 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, ref } from 'vue';
+  import { computed, defineComponent, ref } from 'vue';
   import { message } from 'ant-design-vue';
   import { Card, Checkbox, Col, Divider, Row, Tabs } from 'ant-design-vue';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
@@ -70,6 +70,7 @@
     providerName: 'G',
     providerKey: '',
     readonly: false,
+    identity: '',
   };
 
   export default defineComponent({
@@ -107,6 +108,12 @@
       const [registerModal, { closeModal, changeOkLoading }] = useModalInner((val) => {
         model.value = val;
       });
+      const getIdentity = computed(() => {
+        if (model.value.identity) {
+          return `${L('Permissions')} - ${model.value.identity}`;
+        }
+        return title.value;
+      })
 
       function handleVisibleChange(visible: boolean) {
         if (!visible) {
@@ -130,6 +137,7 @@
         L,
         activeKey,
         title,
+        getIdentity,
         permissionTab,
         permissionTree,
         permissionGrantKeys,

apps/vue/src/components/Permission/src/types/permission.ts

@@ -2,6 +2,7 @@ export interface PermissionProps {
   providerName: string;
   providerKey?: string;
   readonly: boolean;
+  identity?: string;
 }
 
 export interface PermissionTree {

apps/vue/src/views/identity/user/components/UserTable.vue

@@ -58,7 +58,7 @@
             {
               auth: 'AbpIdentity.Users.ManagePermissions',
               label: L('Permissions'),
-              onClick: showPermissionModal.bind(null, record.id),
+              onClick: showPermissionModal.bind(null, record.id, record.userName),
             },
             {
               auth: 'AbpIdentity.Users.ManageClaims',

apps/vue/src/views/identity/user/hooks/usePermission.ts

@@ -4,12 +4,13 @@ import { useUserStoreWithOut } from '/@/store/modules/user';
 export function usePermission() {
   const [registerModel, { openModal }] = useModal();
 
-  function showPermissionModal(userId: string) {
+  function showPermissionModal(userId: string, userName: string) {
     const userStore = useUserStoreWithOut();
     const props = {
       providerName: 'U',
       providerKey: userId,
       readonly: userStore.getUserInfo.userId === userId,
+      identity: userName,
     };
     openModal(true, props, true);
   }