From f26b90ba34dfe0dc22508e03dbde650a149d11a4 Mon Sep 17 00:00:00 2001
From: lijiahangmax <ljh1553488six@139.com>
Date: Mon, 4 Dec 2023 23:06:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E8=B5=84=E4=BA=A7?=
 =?UTF-8?q?=E6=8E=88=E6=9D=83.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../asset/grant/components/grant-layout.vue   | 140 +++++++++++++++
 .../grant/components/host-group-grant.vue     |  92 ++++++++++
 .../components/host-group-role-grant.vue      | 167 ------------------
 .../components/host-group-user-grant.vue      | 165 -----------------
 .../components/host-identity-grant-table.vue  |  77 --------
 .../grant/components/host-identity-grant.vue  | 102 +++++++++++
 .../components/host-identity-role-grant.vue   | 145 ---------------
 .../components/host-identity-user-grant.vue   | 144 ---------------
 .../grant/components/host-key-grant-table.vue |  65 -------
 .../asset/grant/components/host-key-grant.vue |  89 ++++++++++
 .../grant/components/host-key-role-grant.vue  | 158 -----------------
 .../grant/components/host-key-user-grant.vue  | 157 ----------------
 orion-ops-ui/src/views/asset/grant/index.vue  |   2 +-
 .../src/views/asset/grant/types/const.ts      |  33 ++--
 14 files changed, 445 insertions(+), 1091 deletions(-)
 create mode 100644 orion-ops-ui/src/views/asset/grant/components/grant-layout.vue
 create mode 100644 orion-ops-ui/src/views/asset/grant/components/host-group-grant.vue
 delete mode 100644 orion-ops-ui/src/views/asset/grant/components/host-group-role-grant.vue
 delete mode 100644 orion-ops-ui/src/views/asset/grant/components/host-group-user-grant.vue
 delete mode 100644 orion-ops-ui/src/views/asset/grant/components/host-identity-grant-table.vue
 create mode 100644 orion-ops-ui/src/views/asset/grant/components/host-identity-grant.vue
 delete mode 100644 orion-ops-ui/src/views/asset/grant/components/host-identity-role-grant.vue
 delete mode 100644 orion-ops-ui/src/views/asset/grant/components/host-identity-user-grant.vue
 delete mode 100644 orion-ops-ui/src/views/asset/grant/components/host-key-grant-table.vue
 create mode 100644 orion-ops-ui/src/views/asset/grant/components/host-key-grant.vue
 delete mode 100644 orion-ops-ui/src/views/asset/grant/components/host-key-role-grant.vue
 delete mode 100644 orion-ops-ui/src/views/asset/grant/components/host-key-user-grant.vue

diff --git a/orion-ops-ui/src/views/asset/grant/components/grant-layout.vue b/orion-ops-ui/src/views/asset/grant/components/grant-layout.vue
new file mode 100644
index 00000000..dcbdc955
--- /dev/null
+++ b/orion-ops-ui/src/views/asset/grant/components/grant-layout.vue
@@ -0,0 +1,140 @@
+<template>
+  <a-spin :loading="loading" class="grant-container">
+    <!-- 角色列表 -->
+    <router-roles v-if="type === GrantType.ROLE" outer-class="router-wrapper"
+                  v-model="subjectId"
+                  @change="fetchAuthorizedData" />
+    <!-- 角色列表 -->
+    <router-users v-else-if="type === GrantType.USER" outer-class="router-wrapper"
+                  v-model="subjectId"
+                  @change="fetchAuthorizedData" />
+    <!-- 数据列表 -->
+    <div class="data-container">
+      <!-- 顶部 -->
+      <div class="data-header">
+        <!-- 提示信息 -->
+        <a-alert class="alert-wrapper" :show-icon="false">
+          <span class="alert-message" v-if="currentSubject">
+            <!-- 角色提示信息 -->
+            <template v-if="type === GrantType.ROLE">
+              当前选择的角色为 <span class="span-blue mr4">{{ currentSubject.text }}</span>
+              <span class="span-blue ml4" v-if="currentSubject.code === AdminRoleCode">管理员拥有全部权限, 无需配置</span>
+            </template>
+            <!-- 用户提示信息 -->
+            <template v-else-if="type === GrantType.USER">
+              当前选择的用户为 <span class="span-blue mr4">{{ currentSubject.text }}</span>
+              <span class="ml4">若当前选择的用户角色包含管理员则无需配置 (管理员拥有全部权限)</span>
+            </template>
+          </span>
+        </a-alert>
+        <!-- 授权 -->
+        <a-button class="grant-button"
+                  type="primary"
+                  @click="doGrant">
+          授权
+          <template #icon>
+            <icon-safe />
+          </template>
+        </a-button>
+      </div>
+      <!-- 主体部分 -->
+      <div class="data-main">
+        <slot />
+      </div>
+    </div>
+  </a-spin>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'grant-layout'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { TabRouterItem } from '@/components/view/tab-router/types';
+  import type { AssetAuthorizedDataQueryRequest, AssetDataGrantRequest } from '@/api/asset/asset-data-grant';
+  import { ref } from 'vue';
+  import { AdminRoleCode } from '@/types/const';
+  import { GrantType } from '../types/const';
+  import RouterRoles from './router-roles.vue';
+  import RouterUsers from './router-users.vue';
+
+  const props = defineProps({
+    type: String,
+    loading: Boolean,
+  });
+  const emits = defineEmits(['fetch', 'grant']);
+
+  const subjectId = ref();
+  const currentSubject = ref();
+
+  // 获取授权列表
+  const fetchAuthorizedData = async (id: number, subject: TabRouterItem) => {
+    currentSubject.value = subject;
+    if (props.type === GrantType.ROLE) {
+      emits('fetch', { roleId: id } as AssetAuthorizedDataQueryRequest);
+    } else if (props.type === GrantType.USER) {
+      emits('fetch', { userId: id } as AssetAuthorizedDataQueryRequest);
+    }
+  };
+
+  // 授权
+  const doGrant = async () => {
+    if (props.type === GrantType.ROLE) {
+      emits('grant', { roleId: subjectId.value } as AssetDataGrantRequest);
+    } else if (props.type === GrantType.USER) {
+      emits('grant', { userId: subjectId.value } as AssetDataGrantRequest);
+    }
+  };
+
+</script>
+
+<style lang="less" scoped>
+  .grant-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    padding: 0 12px 12px 0;
+    position: absolute;
+
+    .router-wrapper {
+      margin-right: 16px;
+      border-right: 1px var(--color-neutral-3) solid;
+    }
+
+    .data-container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+
+      .data-header {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 16px;
+        align-items: center;
+
+        .alert-wrapper {
+          padding: 4px 16px;
+
+          .alert-message {
+            display: block;
+            height: 22px;
+          }
+        }
+
+        .grant-button {
+          margin-left: 16px;
+        }
+      }
+
+      .data-main {
+        display: flex;
+        position: absolute;
+        width: 100%;
+        height: calc(100% - 48px);
+      }
+    }
+  }
+
+</style>
diff --git a/orion-ops-ui/src/views/asset/grant/components/host-group-grant.vue b/orion-ops-ui/src/views/asset/grant/components/host-group-grant.vue
new file mode 100644
index 00000000..ad841a2c
--- /dev/null
+++ b/orion-ops-ui/src/views/asset/grant/components/host-group-grant.vue
@@ -0,0 +1,92 @@
+<template>
+  <grant-layout :type="type"
+                :loading="loading"
+                @fetch="fetchAuthorizedGroup"
+                @grant="doGrant">
+    <!-- 分组 -->
+    <host-group-tree outer-class="group-main-tree"
+                     :checkable="true"
+                     :checked-keys="checkedGroups"
+                     :editable="false"
+                     :loading="loading"
+                     @loading="setLoading"
+                     @select-node="e => selectedGroup = e"
+                     @update:checked-keys="updateCheckedGroups" />
+    <!-- 主机列表 -->
+    <host-list class="group-main-hosts sticky-list" :group="selectedGroup" />
+  </grant-layout>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'host-group-grant'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { TreeNodeData } from '@arco-design/web-vue';
+  import type { AssetAuthorizedDataQueryRequest, AssetDataGrantRequest } from '@/api/asset/asset-data-grant';
+  import { ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import { getAuthorizedHostGroup, grantHostGroup } from '@/api/asset/asset-data-grant';
+  import { Message } from '@arco-design/web-vue';
+  import HostGroupTree from '@/components/asset/host-group/host-group-tree.vue';
+  import HostList from './host-list.vue';
+  import GrantLayout from './grant-layout.vue';
+
+  const props = defineProps({
+    type: String,
+  });
+
+  const { loading, setLoading } = useLoading();
+
+  const authorizedGroups = ref<Array<number>>([]);
+  const checkedGroups = ref<Array<number>>([]);
+  const selectedGroup = ref<TreeNodeData>({});
+
+  // 选择分组
+  const updateCheckedGroups = (e: Array<number>) => {
+    checkedGroups.value = e;
+  };
+
+  // 获取授权列表
+  const fetchAuthorizedGroup = async (request: AssetAuthorizedDataQueryRequest) => {
+    setLoading(true);
+    try {
+      const { data } = await getAuthorizedHostGroup(request);
+      authorizedGroups.value = data;
+      checkedGroups.value = data;
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 授权
+  const doGrant = async (request: AssetDataGrantRequest) => {
+    setLoading(true);
+    try {
+      await grantHostGroup({
+        ...request,
+        idList: checkedGroups.value
+      });
+      Message.success('授权成功');
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+</script>
+
+<style lang="less" scoped>
+  .group-main-tree {
+    width: calc(60% - 16px);
+    height: 100%;
+    margin-right: 16px;
+  }
+
+  .group-main-hosts {
+    width: 40%;
+  }
+</style>
diff --git a/orion-ops-ui/src/views/asset/grant/components/host-group-role-grant.vue b/orion-ops-ui/src/views/asset/grant/components/host-group-role-grant.vue
deleted file mode 100644
index 5d7e7a2d..00000000
--- a/orion-ops-ui/src/views/asset/grant/components/host-group-role-grant.vue
+++ /dev/null
@@ -1,167 +0,0 @@
-<template>
-  <a-spin :loading="loading" class="grant-container">
-    <!-- 角色列表 -->
-    <router-roles outer-class="roles-router-wrapper"
-                  v-model="roleId"
-                  @change="fetchAuthorizedGroup" />
-    <!-- 分组列表 -->
-    <div class="group-container">
-      <!-- 顶部 -->
-      <div class="group-header">
-        <!-- 提示信息 -->
-        <a-alert class="alert-wrapper" :show-icon="false">
-          <span v-if="currentRole" class="alert-message">
-            当前选择的角色为 <span class="span-blue mr4">{{ currentRole?.text }}</span>
-            <span class="span-blue ml4" v-if="currentRole.code === AdminRoleCode">管理员拥有全部权限, 无需配置</span>
-          </span>
-        </a-alert>
-        <!-- 授权 -->
-        <a-button class="grant-button"
-                  type="primary"
-                  @click="doGrant">
-          授权
-          <template #icon>
-            <icon-safe />
-          </template>
-        </a-button>
-      </div>
-      <!-- 主体部分 -->
-      <div class="group-main">
-        <!-- 分组 -->
-        <host-group-tree outer-class="group-main-tree"
-                         :checkable="true"
-                         :checked-keys="checkedGroups"
-                         :editable="false"
-                         :loading="loading"
-                         @loading="setLoading"
-                         @select-node="e => selectedGroup = e"
-                         @update:checked-keys="updateCheckedGroups" />
-        <!-- 主机列表 -->
-        <host-list class="group-main-hosts sticky-list" :group="selectedGroup" />
-      </div>
-    </div>
-  </a-spin>
-</template>
-
-<script lang="ts">
-  export default {
-    name: 'host-group-role-grant'
-  };
-</script>
-
-<script lang="ts" setup>
-  import type { TreeNodeData } from '@arco-design/web-vue';
-  import { ref } from 'vue';
-  import useLoading from '@/hooks/loading';
-  import { getAuthorizedHostGroup, grantHostGroup } from '@/api/asset/asset-data-grant';
-  import { AdminRoleCode } from '@/types/const';
-  import { Message } from '@arco-design/web-vue';
-  import HostList from './host-list.vue';
-  import RouterRoles from './router-roles.vue';
-  import HostGroupTree from '@/components/asset/host-group/host-group-tree.vue';
-
-  const { loading, setLoading } = useLoading();
-
-  const roleId = ref();
-  const currentRole = ref();
-  const authorizedGroups = ref<Array<number>>([]);
-  const checkedGroups = ref<Array<number>>([]);
-  const selectedGroup = ref<TreeNodeData>({});
-
-  // 获取授权列表
-  const fetchAuthorizedGroup = async (id: number, role: any) => {
-    roleId.value = id;
-    currentRole.value = role;
-    setLoading(true);
-    try {
-      const { data } = await getAuthorizedHostGroup({
-        roleId: roleId.value
-      });
-      authorizedGroups.value = data;
-      checkedGroups.value = data;
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // 选择分组
-  const updateCheckedGroups = (e: Array<number>) => {
-    checkedGroups.value = e;
-  };
-
-  // 授权
-  const doGrant = async () => {
-    setLoading(true);
-    try {
-      await grantHostGroup({
-        roleId: roleId.value,
-        idList: checkedGroups.value
-      });
-      Message.success('授权成功');
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
-  };
-
-</script>
-
-<style lang="less" scoped>
-  .grant-container {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    padding: 0 12px 12px 0;
-    position: absolute;
-
-    .roles-router-wrapper {
-      margin-right: 16px;
-      border-right: 1px var(--color-neutral-3) solid;
-    }
-
-    .group-container {
-      position: relative;
-      width: 100%;
-      height: 100%;
-
-      .group-header {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 16px;
-        align-items: center;
-
-        .alert-wrapper {
-          padding: 4px 16px;
-
-          .alert-message {
-            display: block;
-            height: 22px;
-          }
-        }
-
-        .grant-button {
-          margin-left: 16px;
-        }
-      }
-
-      .group-main {
-        display: flex;
-        position: absolute;
-        width: 100%;
-        height: calc(100% - 48px);
-
-        &-tree {
-          width: calc(60% - 16px);
-          height: 100%;
-          margin-right: 16px;
-        }
-
-        &-hosts {
-          width: 40%;
-        }
-      }
-    }
-  }
-
-</style>
diff --git a/orion-ops-ui/src/views/asset/grant/components/host-group-user-grant.vue b/orion-ops-ui/src/views/asset/grant/components/host-group-user-grant.vue
deleted file mode 100644
index 389994cb..00000000
--- a/orion-ops-ui/src/views/asset/grant/components/host-group-user-grant.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<template>
-  <a-spin :loading="loading" class="grant-container">
-    <!-- 用户列表 -->
-    <router-users outer-class="users-router-wrapper"
-                  v-model="userId"
-                  @change="fetchAuthorizedGroup" />
-    <!-- 分组列表 -->
-    <div class="group-container">
-      <!-- 顶部 -->
-      <div class="group-header">
-        <!-- 提示信息 -->
-        <a-alert class="alert-wrapper" :show-icon="false">
-          <span v-if="currentUser" class="alert-message">
-            当前选择的用户为 <span class="span-blue mr4">{{ currentUser?.text }}</span>
-            <span class="ml4">若当前选择的用户角色包含管理员则无需配置 (管理员拥有全部权限)</span>
-          </span>
-        </a-alert>
-        <!-- 授权 -->
-        <a-button class="grant-button"
-                  type="primary"
-                  @click="doGrant">
-          授权
-          <template #icon>
-            <icon-safe />
-          </template>
-        </a-button>
-      </div>
-      <!-- 主题部分 -->
-      <div class="group-main">
-        <!-- 分组 -->
-        <host-group-tree outer-class="group-main-tree sticky-list"
-                         :checked-keys="checkedGroups"
-                         :editable="false"
-                         :loading="loading"
-                         @loading="setLoading"
-                         @select-node="e => selectedGroup = e"
-                         @update:checked-keys="updateCheckedGroups" />
-        <!-- 主机列表 -->
-        <host-list class="group-main-hosts" :group="selectedGroup" />
-      </div>
-    </div>
-  </a-spin>
-</template>
-
-<script lang="ts">
-  export default {
-    name: 'host-group-user-grant'
-  };
-</script>
-
-<script lang="ts" setup>
-  import type { TreeNodeData } from '@arco-design/web-vue';
-  import { ref } from 'vue';
-  import { getAuthorizedHostGroup, grantHostGroup } from '@/api/asset/asset-data-grant';
-  import { Message } from '@arco-design/web-vue';
-  import useLoading from '@/hooks/loading';
-  import HostList from './host-list.vue';
-  import RouterUsers from './router-users.vue';
-  import HostGroupTree from '@/components/asset/host-group/host-group-tree.vue';
-
-  const { loading, setLoading } = useLoading();
-
-  const userId = ref();
-  const currentUser = ref();
-  const authorizedGroups = ref<Array<number>>([]);
-  const checkedGroups = ref<Array<number>>([]);
-  const selectedGroup = ref<TreeNodeData>({});
-
-  // 获取授权列表
-  const fetchAuthorizedGroup = async (id: number, user: any) => {
-    userId.value = id;
-    currentUser.value = user;
-    setLoading(true);
-    try {
-      const { data } = await getAuthorizedHostGroup({
-        userId: userId.value
-      });
-      authorizedGroups.value = data;
-      checkedGroups.value = data;
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // 选择分组
-  const updateCheckedGroups = (e: Array<number>) => {
-    checkedGroups.value = e;
-  };
-
-  // 授权
-  const doGrant = async () => {
-    setLoading(true);
-    try {
-      await grantHostGroup({
-        userId: userId.value,
-        idList: checkedGroups.value
-      });
-      Message.success('授权成功');
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
-  };
-
-</script>
-
-<style lang="less" scoped>
-  .grant-container {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    padding: 0 12px 12px 0;
-    position: absolute;
-
-    .users-router-wrapper {
-      margin-right: 16px;
-      border-right: 1px var(--color-neutral-3) solid;
-    }
-
-    .group-container {
-      position: relative;
-      width: 100%;
-      height: 100%;
-
-      .group-header {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 16px;
-        align-items: center;
-
-        .alert-wrapper {
-          padding: 4px 16px;
-
-          .alert-message {
-            display: block;
-            height: 22px;
-          }
-        }
-
-        .grant-button {
-          margin-left: 16px;
-        }
-      }
-
-      .group-main {
-        display: flex;
-        position: absolute;
-        width: 100%;
-        height: calc(100% - 48px);
-
-        &-tree {
-          width: calc(60% - 16px);
-          height: 100%;
-          margin-right: 16px;
-        }
-
-        &-hosts {
-          width: 40%;
-        }
-      }
-    }
-  }
-
-</style>
diff --git a/orion-ops-ui/src/views/asset/grant/components/host-identity-grant-table.vue b/orion-ops-ui/src/views/asset/grant/components/host-identity-grant-table.vue
deleted file mode 100644
index 9082a8db..00000000
--- a/orion-ops-ui/src/views/asset/grant/components/host-identity-grant-table.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-  <a-table row-key="id"
-           class="host-identity-main-table"
-           label-align="left"
-           :columns="hostIdentityColumns"
-           v-model:selected-keys="selectedKeys"
-           :row-selection="rowSelection"
-           :sticky-header="true"
-           :data="hostIdentities"
-           :pagination="false"
-           :bordered="false">
-    <!-- 秘钥名称 -->
-    <template #keyId="{ record }">
-      <a-tag color="arcoblue" v-if="record.keyName">{{ record.keyName }}</a-tag>
-    </template>
-  </a-table>
-</template>
-
-<script lang="ts">
-  export default {
-    name: 'host-identity-grant-table'
-  };
-</script>
-
-<script lang="ts" setup>
-  import type { PropType } from 'vue';
-  import type { HostIdentityQueryResponse } from '@/api/asset/host-identity';
-  import { hostIdentityColumns } from '../types/table.columns';
-  import { useRowSelection } from '@/types/table';
-  import { computed, ref, onMounted } from 'vue';
-  import { useCacheStore } from '@/store';
-
-  const props = defineProps({
-    modelValue: {
-      type: Array as PropType<Array<number>>,
-      default: () => []
-    }
-  });
-  const emits = defineEmits(['loading', 'update:modelValue']);
-
-  const cacheStore = useCacheStore();
-  const rowSelection = useRowSelection();
-
-  const hostIdentities = ref<Array<HostIdentityQueryResponse>>([]);
-
-  const selectedKeys = computed({
-    get() {
-      return props.modelValue;
-    },
-    set(e) {
-      emits('update:modelValue', e);
-    }
-  });
-
-  // 初始化数据
-  onMounted(async () => {
-    emits('loading', true);
-    try {
-      const keys = await cacheStore.loadHostKeys();
-      const identities = await cacheStore.loadHostIdentities();
-      hostIdentities.value = identities.map(s => {
-        return {
-          ...s,
-          keyName: s.keyId ? keys.find(k => k.id === s.keyId)?.name : undefined
-        };
-      });
-    } catch (e) {
-    } finally {
-      emits('loading', false);
-    }
-  });
-
-</script>
-
-<style lang="less" scoped>
-
-</style>
diff --git a/orion-ops-ui/src/views/asset/grant/components/host-identity-grant.vue b/orion-ops-ui/src/views/asset/grant/components/host-identity-grant.vue
new file mode 100644
index 00000000..29a54b14
--- /dev/null
+++ b/orion-ops-ui/src/views/asset/grant/components/host-identity-grant.vue
@@ -0,0 +1,102 @@
+<template>
+  <grant-layout :type="type"
+                :loading="loading"
+                @fetch="fetchAuthorizedGroup"
+                @grant="doGrant">
+    <!-- 主机身份表格 -->
+    <a-table row-key="id"
+             class="host-identity-main-table"
+             label-align="left"
+             :columns="hostIdentityColumns"
+             v-model:selected-keys="selectedKeys"
+             :row-selection="rowSelection"
+             :sticky-header="true"
+             :data="hostIdentities"
+             :pagination="false"
+             :bordered="false">
+      <!-- 秘钥名称 -->
+      <template #keyId="{ record }">
+        <a-tag color="arcoblue" v-if="record.keyId">
+          {{ hostKeys.find(s => s.id === record.keyId)?.name }}
+        </a-tag>
+      </template>
+    </a-table>
+  </grant-layout>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'host-group-grant'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { AssetAuthorizedDataQueryRequest, AssetDataGrantRequest } from '@/api/asset/asset-data-grant';
+  import type { HostIdentityQueryResponse } from '@/api/asset/host-identity';
+  import type { HostKeyQueryResponse } from '@/api/asset/host-key';
+  import { ref, onMounted } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import { getAuthorizedHostIdentity, grantHostIdentity } from '@/api/asset/asset-data-grant';
+  import { Message } from '@arco-design/web-vue';
+  import { hostIdentityColumns } from '../types/table.columns';
+  import { useCacheStore } from '@/store';
+  import { useRowSelection } from '@/types/table';
+  import GrantLayout from './grant-layout.vue';
+
+  const props = defineProps({
+    type: String,
+  });
+
+  const cacheStore = useCacheStore();
+  const rowSelection = useRowSelection();
+  const { loading, setLoading } = useLoading();
+
+  const selectedKeys = ref<Array<number>>([]);
+  const hostIdentities = ref<Array<HostIdentityQueryResponse>>([]);
+  const hostKeys = ref<Array<HostKeyQueryResponse>>([]);
+
+  // 获取授权列表
+  const fetchAuthorizedGroup = async (request: AssetAuthorizedDataQueryRequest) => {
+    setLoading(true);
+    try {
+      const { data } = await getAuthorizedHostIdentity(request);
+      selectedKeys.value = data;
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 授权
+  const doGrant = async (request: AssetDataGrantRequest) => {
+    setLoading(true);
+    try {
+      await grantHostIdentity({
+        ...request,
+        idList: selectedKeys.value
+      });
+      Message.success('授权成功');
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 初始化数据
+  onMounted(async () => {
+    setLoading(true);
+    try {
+      // 加载主机秘钥
+      hostKeys.value = await cacheStore.loadHostKeys();
+      // 加载主机身份
+      hostIdentities.value = await cacheStore.loadHostIdentities();
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  });
+
+</script>
+
+<style lang="less" scoped>
+</style>
diff --git a/orion-ops-ui/src/views/asset/grant/components/host-identity-role-grant.vue b/orion-ops-ui/src/views/asset/grant/components/host-identity-role-grant.vue
deleted file mode 100644
index e020c071..00000000
--- a/orion-ops-ui/src/views/asset/grant/components/host-identity-role-grant.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<template>
-  <a-spin :loading="loading" class="grant-container">
-    <!-- 角色列表 -->
-    <router-roles outer-class="roles-router-wrapper"
-                  v-model="roleId"
-                  @change="fetchAuthorizedHostIdentity" />
-    <!-- 分组列表 -->
-    <div class="host-identity-container">
-      <!-- 顶部 -->
-      <div class="host-identity-header">
-        <!-- 提示信息 -->
-        <a-alert class="alert-wrapper" :show-icon="false">
-          <span v-if="currentRole" class="alert-message">
-            当前选择的角色为 <span class="span-blue mr4">{{ currentRole?.text }}</span>
-            <span class="span-blue ml4" v-if="currentRole.code === AdminRoleCode">管理员拥有全部权限, 无需配置</span>
-          </span>
-        </a-alert>
-        <!-- 授权 -->
-        <a-button class="grant-button"
-                  type="primary"
-                  @click="doGrant">
-          授权
-          <template #icon>
-            <icon-safe />
-          </template>
-        </a-button>
-      </div>
-      <!-- 主体部分 -->
-      <div class="host-identity-main">
-        <host-identity-grant-table v-model="selectedIdentities"
-                                   @loading="setLoading" />
-      </div>
-    </div>
-  </a-spin>
-</template>
-
-<script lang="ts">
-  export default {
-    name: 'host-identity-role-grant'
-  };
-</script>
-
-<script lang="ts" setup>
-  import { ref } from 'vue';
-  import { getAuthorizedHostIdentity, grantHostIdentity } from '@/api/asset/asset-data-grant';
-  import { AdminRoleCode } from '@/types/const';
-  import { Message } from '@arco-design/web-vue';
-  import useLoading from '@/hooks/loading';
-  import { useCacheStore } from '@/store';
-  import RouterRoles from './router-roles.vue';
-  import HostIdentityGrantTable from './host-identity-grant-table.vue';
-
-  const cacheStore = useCacheStore();
-  const { loading, setLoading } = useLoading();
-
-  const roleId = ref();
-  const currentRole = ref();
-  const selectedIdentities = ref<Array<number>>([]);
-
-  // 获取授权列表
-  const fetchAuthorizedHostIdentity = async (id: number, role: any) => {
-    roleId.value = id;
-    currentRole.value = role;
-    setLoading(true);
-    try {
-      const { data } = await getAuthorizedHostIdentity({
-        roleId: roleId.value
-      });
-      selectedIdentities.value = data;
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // 授权
-  const doGrant = async () => {
-    setLoading(true);
-    try {
-      await grantHostIdentity({
-        roleId: roleId.value,
-        idList: selectedIdentities.value
-      });
-      Message.success('授权成功');
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
-  };
-
-</script>
-
-<style lang="less" scoped>
-  .grant-container {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    padding: 0 12px 12px 0;
-    position: absolute;
-
-    .roles-router-wrapper {
-      margin-right: 16px;
-      border-right: 1px var(--color-neutral-3) solid;
-    }
-
-    .host-identity-container {
-      position: relative;
-      width: 100%;
-      height: 100%;
-
-      .host-identity-header {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 16px;
-        align-items: center;
-
-        .alert-wrapper {
-          padding: 4px 16px;
-
-          .alert-message {
-            display: block;
-            height: 22px;
-          }
-        }
-
-        .grant-button {
-          margin-left: 16px;
-        }
-      }
-
-      .host-identity-main {
-        display: flex;
-        position: absolute;
-        width: 100%;
-        height: calc(100% - 48px);
-
-        &-table {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-  }
-
-</style>
diff --git a/orion-ops-ui/src/views/asset/grant/components/host-identity-user-grant.vue b/orion-ops-ui/src/views/asset/grant/components/host-identity-user-grant.vue
deleted file mode 100644
index c70b38dc..00000000
--- a/orion-ops-ui/src/views/asset/grant/components/host-identity-user-grant.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<template>
-  <a-spin :loading="loading" class="grant-container">
-    <!-- 用户列表 -->
-    <router-users outer-class="users-router-wrapper"
-                  v-model="userId"
-                  @change="fetchAuthorizedHostIdentity" />
-    <!-- 分组列表 -->
-    <div class="host-identity-container">
-      <!-- 顶部 -->
-      <div class="host-identity-header">
-        <!-- 提示信息 -->
-        <a-alert class="alert-wrapper" :show-icon="false">
-          <span v-if="currentUser" class="alert-message">
-            当前选择的用户为 <span class="span-blue mr4">{{ currentUser?.text }}</span>
-            <span class="ml4">若当前选择的用户用户包含管理员则无需配置 (管理员拥有全部权限)</span>
-          </span>
-        </a-alert>
-        <!-- 授权 -->
-        <a-button class="grant-button"
-                  type="primary"
-                  @click="doGrant">
-          授权
-          <template #icon>
-            <icon-safe />
-          </template>
-        </a-button>
-      </div>
-      <!-- 主体部分 -->
-      <div class="host-identity-main">
-        <host-identity-grant-table v-model="selectedIdentities"
-                                   @loading="setLoading" />
-      </div>
-    </div>
-  </a-spin>
-</template>
-
-<script lang="ts">
-  export default {
-    name: 'host-identity-user-grant'
-  };
-</script>
-
-<script lang="ts" setup>
-  import { ref } from 'vue';
-  import { getAuthorizedHostIdentity, grantHostIdentity } from '@/api/asset/asset-data-grant';
-  import { Message } from '@arco-design/web-vue';
-  import useLoading from '@/hooks/loading';
-  import { useCacheStore } from '@/store';
-  import RouterUsers from './router-users.vue';
-  import HostIdentityGrantTable from '@/views/asset/grant/components/host-identity-grant-table.vue';
-
-  const cacheStore = useCacheStore();
-  const { loading, setLoading } = useLoading();
-
-  const userId = ref();
-  const currentUser = ref();
-  const selectedIdentities = ref<Array<number>>([]);
-
-  // 获取授权列表
-  const fetchAuthorizedHostIdentity = async (id: number, user: any) => {
-    userId.value = id;
-    currentUser.value = user;
-    setLoading(true);
-    try {
-      const { data } = await getAuthorizedHostIdentity({
-        userId: userId.value
-      });
-      selectedIdentities.value = data;
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // 授权
-  const doGrant = async () => {
-    setLoading(true);
-    try {
-      await grantHostIdentity({
-        userId: userId.value,
-        idList: selectedIdentities.value
-      });
-      Message.success('授权成功');
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
-  };
-
-</script>
-
-<style lang="less" scoped>
-  .grant-container {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    padding: 0 12px 12px 0;
-    position: absolute;
-
-    .users-router-wrapper {
-      margin-right: 16px;
-      border-right: 1px var(--color-neutral-3) solid;
-    }
-
-    .host-identity-container {
-      position: relative;
-      width: 100%;
-      height: 100%;
-
-      .host-identity-header {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 16px;
-        align-items: center;
-
-        .alert-wrapper {
-          padding: 4px 16px;
-
-          .alert-message {
-            display: block;
-            height: 22px;
-          }
-        }
-
-        .grant-button {
-          margin-left: 16px;
-        }
-      }
-
-      .host-identity-main {
-        display: flex;
-        position: absolute;
-        width: 100%;
-        height: calc(100% - 48px);
-
-        &-table {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-  }
-
-</style>
diff --git a/orion-ops-ui/src/views/asset/grant/components/host-key-grant-table.vue b/orion-ops-ui/src/views/asset/grant/components/host-key-grant-table.vue
deleted file mode 100644
index ed96fde5..00000000
--- a/orion-ops-ui/src/views/asset/grant/components/host-key-grant-table.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-  <a-table row-key="id"
-           class="host-key-main-table"
-           label-align="left"
-           :columns="hostKeyColumns"
-           v-model:selected-keys="selectedKeys"
-           :row-selection="rowSelection"
-           :sticky-header="true"
-           :data="hostKeys"
-           :pagination="false"
-           :bordered="false" />
-</template>
-
-<script lang="ts">
-  export default {
-    name: 'host-key-grant-table'
-  };
-</script>
-
-<script lang="ts" setup>
-  import type { PropType } from 'vue';
-  import type { HostKeyQueryResponse } from '@/api/asset/host-key';
-  import { hostKeyColumns } from '../types/table.columns';
-  import { useRowSelection } from '@/types/table';
-  import { computed, ref, onMounted } from 'vue';
-  import { useCacheStore } from '@/store';
-
-  const props = defineProps({
-    modelValue: {
-      type: Array as PropType<Array<number>>,
-      default: () => []
-    }
-  });
-  const emits = defineEmits(['loading', 'update:modelValue']);
-
-  const cacheStore = useCacheStore();
-  const rowSelection = useRowSelection();
-
-  const hostKeys = ref<Array<HostKeyQueryResponse>>([]);
-
-  const selectedKeys = computed({
-    get() {
-      return props.modelValue;
-    },
-    set(e) {
-      emits('update:modelValue', e);
-    }
-  });
-
-  // 初始化数据
-  onMounted(async () => {
-    emits('loading', true);
-    try {
-      hostKeys.value = await cacheStore.loadHostKeys();
-    } catch (e) {
-    } finally {
-      emits('loading', false);
-    }
-  });
-
-</script>
-
-<style lang="less" scoped>
-
-</style>
diff --git a/orion-ops-ui/src/views/asset/grant/components/host-key-grant.vue b/orion-ops-ui/src/views/asset/grant/components/host-key-grant.vue
new file mode 100644
index 00000000..0c01e4a2
--- /dev/null
+++ b/orion-ops-ui/src/views/asset/grant/components/host-key-grant.vue
@@ -0,0 +1,89 @@
+<template>
+  <grant-layout :type="type"
+                :loading="loading"
+                @fetch="fetchAuthorizedGroup"
+                @grant="doGrant">
+    <!-- 主机秘钥表格 -->
+    <a-table row-key="id"
+             class="host-key-main-table"
+             label-align="left"
+             :columns="hostKeyColumns"
+             v-model:selected-keys="selectedKeys"
+             :row-selection="rowSelection"
+             :sticky-header="true"
+             :data="hostKeys"
+             :pagination="false"
+             :bordered="false" />
+  </grant-layout>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'host-group-grant'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { AssetAuthorizedDataQueryRequest, AssetDataGrantRequest } from '@/api/asset/asset-data-grant';
+  import type { HostKeyQueryResponse } from '@/api/asset/host-key';
+  import { ref, onMounted } from 'vue';
+  import { getAuthorizedHostKey, grantHostKey } from '@/api/asset/asset-data-grant';
+  import useLoading from '@/hooks/loading';
+  import { useRowSelection } from '@/types/table';
+  import { useCacheStore } from '@/store';
+  import { Message } from '@arco-design/web-vue';
+  import { hostKeyColumns } from '../types/table.columns';
+  import GrantLayout from './grant-layout.vue';
+
+  const props = defineProps({
+    type: String,
+  });
+  const cacheStore = useCacheStore();
+  const rowSelection = useRowSelection();
+  const { loading, setLoading } = useLoading();
+
+  const selectedKeys = ref<Array<number>>([]);
+  const hostKeys = ref<Array<HostKeyQueryResponse>>([]);
+
+  // 获取授权列表
+  const fetchAuthorizedGroup = async (request: AssetAuthorizedDataQueryRequest) => {
+    setLoading(true);
+    try {
+      const { data } = await getAuthorizedHostKey(request);
+      selectedKeys.value = data;
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 授权
+  const doGrant = async (request: AssetDataGrantRequest) => {
+    setLoading(true);
+    try {
+      await grantHostKey({
+        ...request,
+        idList: selectedKeys.value
+      });
+      Message.success('授权成功');
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 初始化数据
+  onMounted(async () => {
+    setLoading(true);
+    try {
+      hostKeys.value = await cacheStore.loadHostKeys();
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  });
+
+</script>
+
+<style lang="less" scoped>
+</style>
diff --git a/orion-ops-ui/src/views/asset/grant/components/host-key-role-grant.vue b/orion-ops-ui/src/views/asset/grant/components/host-key-role-grant.vue
deleted file mode 100644
index 7ffa75cd..00000000
--- a/orion-ops-ui/src/views/asset/grant/components/host-key-role-grant.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<template>
-  <a-spin :loading="loading" class="grant-container">
-    <!-- 角色列表 -->
-    <router-roles outer-class="roles-router-wrapper"
-                  v-model="roleId"
-                  @change="fetchAuthorizedHostKey" />
-    <!-- 分组列表 -->
-    <div class="host-key-container">
-      <!-- 顶部 -->
-      <div class="host-key-header">
-        <!-- 提示信息 -->
-        <a-alert class="alert-wrapper" :show-icon="false">
-          <span v-if="currentRole" class="alert-message">
-            当前选择的角色为 <span class="span-blue mr4">{{ currentRole?.text }}</span>
-            <span class="span-blue ml4" v-if="currentRole.code === AdminRoleCode">管理员拥有全部权限, 无需配置</span>
-          </span>
-        </a-alert>
-        <!-- 授权 -->
-        <a-button class="grant-button"
-                  type="primary"
-                  @click="doGrant">
-          授权
-          <template #icon>
-            <icon-safe />
-          </template>
-        </a-button>
-      </div>
-      <!-- 主体部分 -->
-      <div class="host-key-main">
-        <host-key-grant-table v-model="selectedKeys"
-                              @loading="setLoading" />
-      </div>
-    </div>
-  </a-spin>
-</template>
-
-<script lang="ts">
-  export default {
-    name: 'host-key-role-grant'
-  };
-</script>
-
-<script lang="ts" setup>
-  import type { HostKeyQueryResponse } from '@/api/asset/host-key';
-  import { onMounted, ref } from 'vue';
-  import { getAuthorizedHostKey, grantHostKey } from '@/api/asset/asset-data-grant';
-  import { AdminRoleCode } from '@/types/const';
-  import { Message } from '@arco-design/web-vue';
-  import useLoading from '@/hooks/loading';
-  import { useCacheStore } from '@/store';
-  import RouterRoles from './router-roles.vue';
-  import HostKeyGrantTable from './host-key-grant-table.vue';
-
-  const cacheStore = useCacheStore();
-  const { loading, setLoading } = useLoading();
-
-  const roleId = ref();
-  const currentRole = ref();
-  const hostKeys = ref<Array<HostKeyQueryResponse>>([]);
-  const selectedKeys = ref<Array<number>>([]);
-
-  // 获取授权列表
-  const fetchAuthorizedHostKey = async (id: number, role: any) => {
-    roleId.value = id;
-    currentRole.value = role;
-    setLoading(true);
-    try {
-      const { data } = await getAuthorizedHostKey({
-        roleId: roleId.value
-      });
-      selectedKeys.value = data;
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // 授权
-  const doGrant = async () => {
-    setLoading(true);
-    try {
-      await grantHostKey({
-        roleId: roleId.value,
-        idList: selectedKeys.value
-      });
-      Message.success('授权成功');
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // 初始化数据
-  onMounted(async () => {
-    setLoading(true);
-    try {
-      hostKeys.value = await cacheStore.loadHostKeys();
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
-  });
-
-</script>
-
-<style lang="less" scoped>
-  .grant-container {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    padding: 0 12px 12px 0;
-    position: absolute;
-
-    .roles-router-wrapper {
-      margin-right: 16px;
-      border-right: 1px var(--color-neutral-3) solid;
-    }
-
-    .host-key-container {
-      position: relative;
-      width: 100%;
-      height: 100%;
-
-      .host-key-header {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 16px;
-        align-items: center;
-
-        .alert-wrapper {
-          padding: 4px 16px;
-
-          .alert-message {
-            display: block;
-            height: 22px;
-          }
-        }
-
-        .grant-button {
-          margin-left: 16px;
-        }
-      }
-
-      .host-key-main {
-        display: flex;
-        position: absolute;
-        width: 100%;
-        height: calc(100% - 48px);
-
-        &-table {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-  }
-
-</style>
diff --git a/orion-ops-ui/src/views/asset/grant/components/host-key-user-grant.vue b/orion-ops-ui/src/views/asset/grant/components/host-key-user-grant.vue
deleted file mode 100644
index 9a3f5df8..00000000
--- a/orion-ops-ui/src/views/asset/grant/components/host-key-user-grant.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<template>
-  <a-spin :loading="loading" class="grant-container">
-    <!-- 用户列表 -->
-    <router-users outer-class="users-router-wrapper"
-                  v-model="userId"
-                  @change="fetchAuthorizedHostKey" />
-    <!-- 分组列表 -->
-    <div class="host-key-container">
-      <!-- 顶部 -->
-      <div class="host-key-header">
-        <!-- 提示信息 -->
-        <a-alert class="alert-wrapper" :show-icon="false">
-          <span v-if="currentUser" class="alert-message">
-            当前选择的用户为 <span class="span-blue mr4">{{ currentUser?.text }}</span>
-            <span class="ml4">若当前选择的用户用户包含管理员则无需配置 (管理员拥有全部权限)</span>
-          </span>
-        </a-alert>
-        <!-- 授权 -->
-        <a-button class="grant-button"
-                  type="primary"
-                  @click="doGrant">
-          授权
-          <template #icon>
-            <icon-safe />
-          </template>
-        </a-button>
-      </div>
-      <!-- 主体部分 -->
-      <div class="host-key-main">
-        <host-key-grant-table v-model="selectedKeys"
-                              @loading="setLoading" />
-      </div>
-    </div>
-  </a-spin>
-</template>
-
-<script lang="ts">
-  export default {
-    name: 'host-key-user-grant'
-  };
-</script>
-
-<script lang="ts" setup>
-  import type { HostKeyQueryResponse } from '@/api/asset/host-key';
-  import { onMounted, ref } from 'vue';
-  import { getAuthorizedHostKey, grantHostKey } from '@/api/asset/asset-data-grant';
-  import { Message } from '@arco-design/web-vue';
-  import useLoading from '@/hooks/loading';
-  import { useCacheStore } from '@/store';
-  import RouterUsers from './router-users.vue';
-  import HostKeyGrantTable from './host-key-grant-table.vue';
-
-  const cacheStore = useCacheStore();
-  const { loading, setLoading } = useLoading();
-
-  const userId = ref();
-  const currentUser = ref();
-  const hostKeys = ref<Array<HostKeyQueryResponse>>([]);
-  const selectedKeys = ref<Array<number>>([]);
-
-  // 获取授权列表
-  const fetchAuthorizedHostKey = async (id: number, user: any) => {
-    userId.value = id;
-    currentUser.value = user;
-    setLoading(true);
-    try {
-      const { data } = await getAuthorizedHostKey({
-        userId: userId.value
-      });
-      selectedKeys.value = data;
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // 授权
-  const doGrant = async () => {
-    setLoading(true);
-    try {
-      await grantHostKey({
-        userId: userId.value,
-        idList: selectedKeys.value
-      });
-      Message.success('授权成功');
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // 初始化数据
-  onMounted(async () => {
-    setLoading(true);
-    try {
-      hostKeys.value = await cacheStore.loadHostKeys();
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
-  });
-
-</script>
-
-<style lang="less" scoped>
-  .grant-container {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    padding: 0 12px 12px 0;
-    position: absolute;
-
-    .users-router-wrapper {
-      margin-right: 16px;
-      border-right: 1px var(--color-neutral-3) solid;
-    }
-
-    .host-key-container {
-      position: relative;
-      width: 100%;
-      height: 100%;
-
-      .host-key-header {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 16px;
-        align-items: center;
-
-        .alert-wrapper {
-          padding: 4px 16px;
-
-          .alert-message {
-            display: block;
-            height: 22px;
-          }
-        }
-
-        .grant-button {
-          margin-left: 16px;
-        }
-      }
-
-      .host-key-main {
-        display: flex;
-        position: absolute;
-        width: 100%;
-        height: calc(100% - 48px);
-
-        &-table {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-  }
-
-</style>
diff --git a/orion-ops-ui/src/views/asset/grant/index.vue b/orion-ops-ui/src/views/asset/grant/index.vue
index f52912ac..0d468130 100644
--- a/orion-ops-ui/src/views/asset/grant/index.vue
+++ b/orion-ops-ui/src/views/asset/grant/index.vue
@@ -12,7 +12,7 @@
           <component :is="tab.icon" />
           {{ tab.title }}
         </template>
-        <component :is="tab.component" />
+        <component :is="tab.component" :type="tab.type" />
       </a-tab-pane>
     </a-tabs>
   </div>
diff --git a/orion-ops-ui/src/views/asset/grant/types/const.ts b/orion-ops-ui/src/views/asset/grant/types/const.ts
index 8ebb1482..a7cfc8cb 100644
--- a/orion-ops-ui/src/views/asset/grant/types/const.ts
+++ b/orion-ops-ui/src/views/asset/grant/types/const.ts
@@ -1,9 +1,6 @@
-import HostGroupRoleGrant from '../components/host-group-role-grant.vue';
-import HostGroupUserGrant from '../components/host-group-user-grant.vue';
-import HostKeyRoleGrant from '../components/host-key-role-grant.vue';
-import HostKeyUserGrant from '../components/host-key-user-grant.vue';
-import HostIdentityRoleGrant from '../components/host-identity-role-grant.vue';
-import HostIdentityUserGrant from '../components/host-identity-user-grant.vue';
+import HostGroupGrant from '../components/host-group-grant.vue';
+import HostKeyGrant from '../components/host-key-grant.vue';
+import HostIdentityGrant from '../components/host-identity-grant.vue';
 
 // 路由
 export const GrantRouteName = 'assetGrant';
@@ -24,6 +21,12 @@ export const GrantKey = {
   HOST_IDENTITY_USER: 6,
 };
 
+// 授权类型
+export const GrantType = {
+  ROLE: 'role',
+  USER: 'user',
+};
+
 // 授权 tab 组件
 export const GrantTabs = [
   {
@@ -31,36 +34,42 @@ export const GrantTabs = [
     permission: ['asset:host-group:grant'],
     title: '主机分组授权 - 角色',
     icon: 'icon-desktop',
-    component: HostGroupRoleGrant
+    type: GrantType.ROLE,
+    component: HostGroupGrant
   }, {
     key: GrantKey.HOST_GROUP_USER,
     permission: ['asset:host-group:grant'],
     title: '主机分组授权 - 用户',
     icon: 'icon-desktop',
-    component: HostGroupUserGrant
+    type: GrantType.USER,
+    component: HostGroupGrant
   }, {
     key: GrantKey.HOST_KEY_ROLE,
     permission: ['asset:host-key:grant'],
     title: '主机秘钥授权 - 角色',
     icon: 'icon-lock',
-    component: HostKeyRoleGrant
+    type: GrantType.ROLE,
+    component: HostKeyGrant
   }, {
     key: GrantKey.HOST_KEY_USER,
     permission: ['asset:host-key:grant'],
     title: '主机秘钥授权 - 用户',
     icon: 'icon-lock',
-    component: HostKeyUserGrant
+    type: GrantType.USER,
+    component: HostKeyGrant
   }, {
     key: GrantKey.HOST_IDENTITY_ROLE,
     permission: ['asset:host-identity:grant'],
     title: '主机身份授权 - 角色',
     icon: 'icon-idcard',
-    component: HostIdentityRoleGrant
+    type: GrantType.ROLE,
+    component: HostIdentityGrant
   }, {
     key: GrantKey.HOST_IDENTITY_USER,
     permission: ['asset:host-identity:grant'],
     title: '主机身份授权 - 用户',
     icon: 'icon-idcard',
-    component: HostIdentityUserGrant
+    type: GrantType.USER,
+    component: HostIdentityGrant
   },
 ];