From 0ecbd605e9134b78a31b1de3004d4c649a301b76 Mon Sep 17 00:00:00 2001
From: lijiahang <ljh1553488six@139.com>
Date: Mon, 4 Dec 2023 18:57:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B5=84=E4=BA=A7=E6=8E=88=E6=9D=83.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/host-group-role-grant.vue      |   2 +-
 .../components/host-group-user-grant.vue      |   2 +-
 .../components/host-identity-role-grant.vue   | 168 +++++++++++++++++
 .../components/host-identity-user-grant.vue   | 166 +++++++++++++++++
 .../grant/components/host-key-role-grant.vue  | 169 ++++++++++++++++++
 .../grant/components/host-key-user-grant.vue  | 166 +++++++++++++++++
 orion-ops-ui/src/views/asset/grant/index.vue  |  29 +--
 .../src/views/asset/grant/types/const.ts      |  58 +++++-
 .../views/asset/grant/types/table.columns.ts  |  34 ++++
 .../components/host-identity-card-list.vue    |  22 +++
 .../components/host-identity-table.vue        |  19 ++
 .../components/host-key-card-list.vue         |  22 +++
 .../host-key/components/host-key-table.vue    |  19 ++
 sql/init-3-data.sql                           |  19 +-
 14 files changed, 868 insertions(+), 27 deletions(-)
 create mode 100644 orion-ops-ui/src/views/asset/grant/components/host-identity-role-grant.vue
 create mode 100644 orion-ops-ui/src/views/asset/grant/components/host-identity-user-grant.vue
 create mode 100644 orion-ops-ui/src/views/asset/grant/components/host-key-role-grant.vue
 create mode 100644 orion-ops-ui/src/views/asset/grant/components/host-key-user-grant.vue
 create mode 100644 orion-ops-ui/src/views/asset/grant/types/table.columns.ts

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
index 28a20c5b..4818fd6a 100644
--- 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
@@ -46,7 +46,7 @@
 
 <script lang="ts">
   export default {
-    name: 'host-group-view-role-grant'
+    name: 'host-group-role-grant'
   };
 </script>
 
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
index 2c4daa33..78a91e25 100644
--- 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
@@ -45,7 +45,7 @@
 
 <script lang="ts">
   export default {
-    name: 'host-group-view-user-grant'
+    name: 'host-group-user-grant'
   };
 </script>
 
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
new file mode 100644
index 00000000..ca806b5c
--- /dev/null
+++ b/orion-ops-ui/src/views/asset/grant/components/host-identity-role-grant.vue
@@ -0,0 +1,168 @@
+<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"
+                   :group="selectedGroup" />
+      </div>
+    </div>
+  </a-spin>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'host-identity-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 HostGroupTree from '@/components/asset/host-group/host-group-tree.vue';
+  import HostList from './host-list.vue';
+  import RouterRoles from './router-roles.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-identity-user-grant.vue b/orion-ops-ui/src/views/asset/grant/components/host-identity-user-grant.vue
new file mode 100644
index 00000000..0f13002a
--- /dev/null
+++ b/orion-ops-ui/src/views/asset/grant/components/host-identity-user-grant.vue
@@ -0,0 +1,166 @@
+<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"
+                         :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-identity-user-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 { Message } from '@arco-design/web-vue';
+  import HostGroupTree from '@/components/asset/host-group/host-group-tree.vue';
+  import HostList from './host-list.vue';
+  import RouterUsers from './router-users.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-key-role-grant.vue b/orion-ops-ui/src/views/asset/grant/components/host-key-role-grant.vue
new file mode 100644
index 00000000..a6873a7d
--- /dev/null
+++ b/orion-ops-ui/src/views/asset/grant/components/host-key-role-grant.vue
@@ -0,0 +1,169 @@
+<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">
+        <a-table row-key="id"
+                 class="host-key-main-table"
+                 label-align="left"
+                 :loading="loading"
+                 :columns="hostKeyColumns"
+                 v-model:selected-keys="selectedKeys"
+                 :row-selection="rowSelection"
+                 :sticky-header="true"
+                 :data="hostKeys"
+                 :pagination="false"
+                 :bordered="false" />
+      </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 { hostKeyColumns } from '../types/table.columns';
+  import useLoading from '@/hooks/loading';
+  import { useRowSelection } from '@/types/table';
+  import { useCacheStore } from '@/store';
+  import RouterRoles from './router-roles.vue';
+
+  const rowSelection = useRowSelection();
+  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
new file mode 100644
index 00000000..157e44e5
--- /dev/null
+++ b/orion-ops-ui/src/views/asset/grant/components/host-key-user-grant.vue
@@ -0,0 +1,166 @@
+<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"
+                         :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-key-user-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 { Message } from '@arco-design/web-vue';
+  import HostGroupTree from '@/components/asset/host-group/host-group-tree.vue';
+  import HostList from './host-list.vue';
+  import RouterUsers from './router-users.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/index.vue b/orion-ops-ui/src/views/asset/grant/index.vue
index a6d37f8b..c405c2e6 100644
--- a/orion-ops-ui/src/views/asset/grant/index.vue
+++ b/orion-ops-ui/src/views/asset/grant/index.vue
@@ -5,17 +5,14 @@
             size="large"
             :justify="true"
             :lazy-load="true">
-      <!-- 主机分组授权(角色) -->
-      <a-tab-pane :key="GrantKey.HOST_GROUP_ROLE"
-                  v-permission="['asset:host-group:grant']"
-                  title="主机分组授权(角色)">
-        <host-group-role-grant />
-      </a-tab-pane>
-      <!-- 主机分组授权(用户) -->
-      <a-tab-pane :key="GrantKey.HOST_GROUP_USER"
-                  v-permission="['asset:host-group:grant']"
-                  title="主机分组授权(用户)">
-        <host-group-user-grant />
+      <a-tab-pane v-for="tab in GrantTabs"
+                  v-permission="tab.permission"
+                  :key="tab.key">
+        <template #title>
+          <component :is="tab.icon" />
+          {{ tab.title }}
+        </template>
+        <component :is="tab.component" />
       </a-tab-pane>
     </a-tabs>
   </div>
@@ -30,9 +27,7 @@
 <script lang="ts" setup>
   import { onBeforeMount, onUnmounted, ref } from 'vue';
   import { useCacheStore } from '@/store';
-  import HostGroupRoleGrant from './components/host-group-role-grant.vue';
-  import HostGroupUserGrant from './components/host-group-user-grant.vue';
-  import { GrantKey } from './types/const';
+  import { GrantTabs } from './types/const';
   import { useRoute } from 'vue-router';
 
   const route = useRoute();
@@ -75,8 +70,14 @@
     position: relative;
   }
 
+  :deep(.arco-tabs-nav-type-line .arco-tabs-tab) {
+    margin: 0 12px;
+  }
+
   :deep(.arco-tabs-tab-title) {
     user-select: none;
+    font-size: 15px;
+    padding: 0 4px;
   }
 
   :deep(.arco-tabs-content) {
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 2205f66d..8ebb1482 100644
--- a/orion-ops-ui/src/views/asset/grant/types/const.ts
+++ b/orion-ops-ui/src/views/asset/grant/types/const.ts
@@ -1,3 +1,10 @@
+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';
+
 // 路由
 export const GrantRouteName = 'assetGrant';
 
@@ -6,5 +13,54 @@ export const GrantKey = {
   // 主机分组-角色
   HOST_GROUP_ROLE: 1,
   // 主机分组-用户
-  HOST_GROUP_USER: 2
+  HOST_GROUP_USER: 2,
+  // 主机秘钥-角色
+  HOST_KEY_ROLE: 3,
+  // 主机秘钥-用户
+  HOST_KEY_USER: 4,
+  // 主机身份-角色
+  HOST_IDENTITY_ROLE: 5,
+  // 主机身份-用户
+  HOST_IDENTITY_USER: 6,
 };
+
+// 授权 tab 组件
+export const GrantTabs = [
+  {
+    key: GrantKey.HOST_GROUP_ROLE,
+    permission: ['asset:host-group:grant'],
+    title: '主机分组授权 - 角色',
+    icon: 'icon-desktop',
+    component: HostGroupRoleGrant
+  }, {
+    key: GrantKey.HOST_GROUP_USER,
+    permission: ['asset:host-group:grant'],
+    title: '主机分组授权 - 用户',
+    icon: 'icon-desktop',
+    component: HostGroupUserGrant
+  }, {
+    key: GrantKey.HOST_KEY_ROLE,
+    permission: ['asset:host-key:grant'],
+    title: '主机秘钥授权 - 角色',
+    icon: 'icon-lock',
+    component: HostKeyRoleGrant
+  }, {
+    key: GrantKey.HOST_KEY_USER,
+    permission: ['asset:host-key:grant'],
+    title: '主机秘钥授权 - 用户',
+    icon: 'icon-lock',
+    component: HostKeyUserGrant
+  }, {
+    key: GrantKey.HOST_IDENTITY_ROLE,
+    permission: ['asset:host-identity:grant'],
+    title: '主机身份授权 - 角色',
+    icon: 'icon-idcard',
+    component: HostIdentityRoleGrant
+  }, {
+    key: GrantKey.HOST_IDENTITY_USER,
+    permission: ['asset:host-identity:grant'],
+    title: '主机身份授权 - 用户',
+    icon: 'icon-idcard',
+    component: HostIdentityUserGrant
+  },
+];
diff --git a/orion-ops-ui/src/views/asset/grant/types/table.columns.ts b/orion-ops-ui/src/views/asset/grant/types/table.columns.ts
new file mode 100644
index 00000000..76e50003
--- /dev/null
+++ b/orion-ops-ui/src/views/asset/grant/types/table.columns.ts
@@ -0,0 +1,34 @@
+import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
+import { dateFormat } from '@/utils';
+
+// 主机秘钥列
+export const hostKeyColumns = [
+  {
+    title: 'id',
+    dataIndex: 'id',
+    slotName: 'id',
+    width: 100,
+    align: 'left',
+    fixed: 'left',
+  }, {
+    title: '名称',
+    dataIndex: 'name',
+    slotName: 'name',
+  }, {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    slotName: 'createTime',
+    align: 'center',
+    render: ({ record }) => {
+      return dateFormat(new Date(record.createTime));
+    },
+  }, {
+    title: '修改时间',
+    dataIndex: 'updateTime',
+    slotName: 'updateTime',
+    align: 'center',
+    render: ({ record }) => {
+      return dateFormat(new Date(record.updateTime));
+    },
+  },
+] as TableColumnData[];
diff --git a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-card-list.vue b/orion-ops-ui/src/views/asset/host-identity/components/host-identity-card-list.vue
index 935a86c0..105ab269 100644
--- a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-card-list.vue
+++ b/orion-ops-ui/src/views/asset/host-identity/components/host-identity-card-list.vue
@@ -12,6 +12,27 @@
              @reset="reset"
              @search="fetchCardData"
              @page-change="fetchCardData">
+    <!-- 左侧操作 -->
+    <template #leftHandle>
+      <!-- 角色授权 -->
+      <a-button v-permission="['asset:host-identity:grant']"
+                class="card-header-icon-wrapper"
+                @click="$router.push({ name: GrantRouteName, query: { key: GrantKey.HOST_IDENTITY_ROLE }})">
+        角色授权
+        <template #icon>
+          <icon-user-group />
+        </template>
+      </a-button>
+      <!-- 用户授权 -->
+      <a-button v-permission="['asset:host-identity:grant']"
+                class="card-header-icon-wrapper"
+                @click="$router.push({ name: GrantRouteName, query: { key: GrantKey.HOST_IDENTITY_USER }})">
+        用户授权
+        <template #icon>
+          <icon-user />
+        </template>
+      </a-button>
+    </template>
     <!-- 过滤条件 -->
     <template #filterContent>
       <a-form :model="formModel"
@@ -135,6 +156,7 @@
   import usePermission from '@/hooks/permission';
   import useCopy from '@/hooks/copy';
   import HostKeySelector from '@/components/asset/host-key/host-key-selector.vue';
+  import { GrantKey, GrantRouteName } from '@/views/asset/grant/types/const';
 
   const emits = defineEmits(['openAdd', 'openUpdate', 'openKeyView']);
 
diff --git a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue b/orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue
index d87b2d4b..3d839026 100644
--- a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue
+++ b/orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue
@@ -40,6 +40,24 @@
       <!-- 右侧操作 -->
       <div class="table-right-bar-handle">
         <a-space>
+          <!-- 角色授权 -->
+          <a-button type="primary"
+                    v-permission="['asset:host-identity:grant']"
+                    @click="$router.push({ name: GrantRouteName, query: { key: GrantKey.HOST_IDENTITY_ROLE }})">
+            角色授权
+            <template #icon>
+              <icon-user-group />
+            </template>
+          </a-button>
+          <!-- 用户授权 -->
+          <a-button type="primary"
+                    v-permission="['asset:host-identity:grant']"
+                    @click="$router.push({ name: GrantRouteName, query: { key: GrantKey.HOST_IDENTITY_USER }})">
+            用户授权
+            <template #icon>
+              <icon-user />
+            </template>
+          </a-button>
           <!-- 新增 -->
           <a-button type="primary"
                     v-permission="['asset:host-identity:create']"
@@ -135,6 +153,7 @@
   import HostKeySelector from '@/components/asset/host-key/host-key-selector.vue';
   import useCopy from '@/hooks/copy';
   import usePermission from '@/hooks/permission';
+  import { GrantKey, GrantRouteName } from '@/views/asset/grant/types/const';
 
   const emits = defineEmits(['openAdd', 'openUpdate', 'openKeyView']);
 
diff --git a/orion-ops-ui/src/views/asset/host-key/components/host-key-card-list.vue b/orion-ops-ui/src/views/asset/host-key/components/host-key-card-list.vue
index 057ec66b..0904763a 100644
--- a/orion-ops-ui/src/views/asset/host-key/components/host-key-card-list.vue
+++ b/orion-ops-ui/src/views/asset/host-key/components/host-key-card-list.vue
@@ -12,6 +12,27 @@
              @reset="reset"
              @search="fetchCardData"
              @page-change="fetchCardData">
+    <!-- 左侧操作 -->
+    <template #leftHandle>
+      <!-- 角色授权 -->
+      <a-button v-permission="['asset:host-key:grant']"
+                class="card-header-icon-wrapper"
+                @click="$router.push({ name: GrantRouteName, query: { key: GrantKey.HOST_KEY_ROLE }})">
+        角色授权
+        <template #icon>
+          <icon-user-group />
+        </template>
+      </a-button>
+      <!-- 用户授权 -->
+      <a-button v-permission="['asset:host-key:grant']"
+                class="card-header-icon-wrapper"
+                @click="$router.push({ name: GrantRouteName, query: { key: GrantKey.HOST_KEY_USER }})">
+        用户授权
+        <template #icon>
+          <icon-user />
+        </template>
+      </a-button>
+    </template>
     <!-- 标题 -->
     <template #title="{ record }">
       {{ record.name }}
@@ -86,6 +107,7 @@
   import fieldConfig from '../types/card.fields';
   import { deleteHostKey, getHostKeyPage } from '@/api/asset/host-key';
   import { Message, Modal } from '@arco-design/web-vue';
+  import { GrantKey, GrantRouteName } from '@/views/asset/grant/types/const';
 
   const emits = defineEmits(['openAdd', 'openUpdate', 'openView']);
 
diff --git a/orion-ops-ui/src/views/asset/host-key/components/host-key-table.vue b/orion-ops-ui/src/views/asset/host-key/components/host-key-table.vue
index cb572389..6a80d736 100644
--- a/orion-ops-ui/src/views/asset/host-key/components/host-key-table.vue
+++ b/orion-ops-ui/src/views/asset/host-key/components/host-key-table.vue
@@ -32,6 +32,24 @@
       <!-- 右侧操作 -->
       <div class="table-right-bar-handle">
         <a-space>
+          <!-- 角色授权 -->
+          <a-button type="primary"
+                    v-permission="['asset:host-key:grant']"
+                    @click="$router.push({ name: GrantRouteName, query: { key: GrantKey.HOST_KEY_ROLE }})">
+            角色授权
+            <template #icon>
+              <icon-user-group />
+            </template>
+          </a-button>
+          <!-- 用户授权 -->
+          <a-button type="primary"
+                    v-permission="['asset:host-key:grant']"
+                    @click="$router.push({ name: GrantRouteName, query: { key: GrantKey.HOST_KEY_USER }})">
+            用户授权
+            <template #icon>
+              <icon-user />
+            </template>
+          </a-button>
           <!-- 新增 -->
           <a-button type="primary"
                     v-permission="['asset:host-key:create']"
@@ -105,6 +123,7 @@
   import useLoading from '@/hooks/loading';
   import columns from '../types/table.columns';
   import { usePagination } from '@/types/table';
+  import { GrantKey, GrantRouteName } from '@/views/asset/grant/types/const';
 
   const emits = defineEmits(['openAdd', 'openUpdate', 'openView']);
 
diff --git a/sql/init-3-data.sql b/sql/init-3-data.sql
index f78db192..574c4523 100644
--- a/sql/init-3-data.sql
+++ b/sql/init-3-data.sql
@@ -15,7 +15,7 @@ INSERT INTO `system_menu` VALUES (8, 0, '项目地址 github', NULL, 1, 1000, 1,
 INSERT INTO `system_menu` VALUES (10, 5, '角色管理', NULL, 2, 10, 1, 1, 1, 'IconUserGroup', '', 'userRole', '2023-07-28 10:55:52', '2023-10-27 01:20:46', NULL, '1', 0);
 INSERT INTO `system_menu` VALUES (11, 0, '项目地址 gitee', NULL, 1, 1010, 1, 1, 1, 'icon-gitlab', 'https://gitee.com/lijiahangmax/orion-ops-pro', '', '2023-08-02 18:08:07', '2023-08-11 18:11:34', NULL, '1', 0);
 INSERT INTO `system_menu` VALUES (12, 0, '系统设置', NULL, 1, 500, 1, 1, 1, 'icon-tool', NULL, 'system', '2023-08-02 18:24:24', '2023-10-27 01:16:10', NULL, '1', 0);
-INSERT INTO `system_menu` VALUES (13, 12, '菜单配置', '', 2, 10, 1, 1, 1, 'icon-menu', NULL, 'systemMenu', '2023-08-02 18:29:01', '2023-10-27 01:16:10', NULL, '1', 0);
+INSERT INTO `system_menu` VALUES (13, 12, '系统菜单', '', 2, 10, 1, 1, 1, 'icon-menu', NULL, 'systemMenu', '2023-08-02 18:29:01', '2023-12-04 13:00:57', NULL, '1', 0);
 INSERT INTO `system_menu` VALUES (17, 1, '操作1', '123', 3, 1, 1, 1, 1, 'IconDoubleLeft', '111', '', '2023-08-08 18:05:57', '2023-09-20 17:05:20', '1', '1', 0);
 INSERT INTO `system_menu` VALUES (20, 10, '创建角色', 'infra:system-role:create', 3, 10, 1, 1, 1, NULL, NULL, NULL, '2023-08-15 16:36:54', '2023-10-27 01:20:46', '1', '1', 0);
 INSERT INTO `system_menu` VALUES (21, 10, '修改角色', 'infra:system-role:update', 3, 10, 1, 1, 1, NULL, NULL, NULL, '2023-08-15 16:37:33', '2023-10-27 01:20:46', '1', '1', 0);
@@ -38,7 +38,7 @@ INSERT INTO `system_menu` VALUES (60, 48, '修改用户状态', 'infra:system-us
 INSERT INTO `system_menu` VALUES (61, 48, '分配用户角色', 'infra:system-user:grant-role', 3, 10, 1, 1, 1, NULL, NULL, NULL, '2023-08-16 11:49:23', '2023-10-27 01:20:46', '1', '1', 0);
 INSERT INTO `system_menu` VALUES (62, 48, '重置用户密码', 'infra:system-user:reset-password', 3, 10, 1, 1, 1, NULL, NULL, NULL, '2023-08-16 11:49:50', '2023-10-27 01:20:46', '1', '1', 0);
 INSERT INTO `system_menu` VALUES (63, 0, '资产管理', NULL, 1, 300, 1, 1, 1, 'IconStorage', NULL, 'asset', '2023-09-11 14:17:31', '2023-10-27 01:15:14', NULL, '1', 0);
-INSERT INTO `system_menu` VALUES (64, 63, '主机管理', NULL, 2, 40, 1, 1, 1, 'IconDesktop', NULL, 'assetHost', '2023-09-11 14:17:31', '2023-10-27 01:15:14', NULL, '1', 0);
+INSERT INTO `system_menu` VALUES (64, 63, '主机管理', NULL, 2, 40, 1, 1, 1, 'IconDesktop', NULL, 'assetHostList', '2023-09-11 14:17:31', '2023-11-30 23:56:21', NULL, '1', 0);
 INSERT INTO `system_menu` VALUES (65, 64, '查询主机', 'asset:host:query', 3, 10, 1, 1, 1, NULL, NULL, NULL, '2023-09-11 14:17:31', '2023-10-27 01:15:14', NULL, '1', 0);
 INSERT INTO `system_menu` VALUES (66, 64, '创建主机', 'asset:host:create', 3, 20, 1, 1, 1, NULL, NULL, NULL, '2023-09-11 14:17:31', '2023-10-27 01:15:14', NULL, '1', 0);
 INSERT INTO `system_menu` VALUES (67, 64, '修改主机', 'asset:host:update', 3, 30, 1, 1, 1, NULL, NULL, NULL, '2023-09-11 14:17:31', '2023-10-27 01:15:14', NULL, '1', 0);
@@ -73,14 +73,11 @@ INSERT INTO `system_menu` VALUES (122, 5, '操作日志', NULL, 2, 30, 1, 1, 1,
 INSERT INTO `system_menu` VALUES (123, 122, '查询操作日志', 'infra:operator-log:query', 3, 10, 1, 1, 1, NULL, NULL, NULL, '2023-11-02 11:22:54', '2023-11-02 11:22:54', '1', '1', 0);
 INSERT INTO `system_menu` VALUES (124, 48, '查询用户会话', 'infra:system-user:query-session', 3, 50, 1, 1, 1, NULL, NULL, NULL, '2023-11-02 11:24:14', '2023-11-02 11:24:14', '1', '1', 0);
 INSERT INTO `system_menu` VALUES (125, 48, '下线用户会话', 'infra:system-user:offline-session', 3, 60, 1, 1, 1, NULL, NULL, NULL, '2023-11-02 11:24:37', '2023-11-02 11:24:37', '1', '1', 0);
-INSERT INTO `system_menu` VALUES (126, 63, '主机分组', NULL, 2, 30, 1, 1, 1, 'icon-layers', NULL, 'assetHostGroup', '2023-11-09 17:42:04', '2023-11-09 17:42:04', '1', '1', 0);
-INSERT INTO `system_menu` VALUES (127, 126, '创建主机分组', 'asset:host-group:create', 3, 10, 1, 1, 1, NULL, NULL, NULL, '2023-11-13 18:15:49', '2023-11-13 18:16:18', '1', '1', 0);
-INSERT INTO `system_menu` VALUES (128, 126, '查询主机分组', 'asset:host-group:query', 3, 20, 1, 1, 1, NULL, NULL, NULL, '2023-11-13 18:16:12', '2023-11-13 18:16:12', '1', '1', 0);
-INSERT INTO `system_menu` VALUES (129, 126, '更新主机分组', 'asset:host-group:update', 3, 30, 1, 1, 1, NULL, NULL, NULL, '2023-11-13 18:16:32', '2023-11-13 18:16:32', '1', '1', 0);
-INSERT INTO `system_menu` VALUES (130, 126, '删除主机分组', 'asset:host-group:delete', 3, 40, 1, 1, 1, NULL, NULL, NULL, '2023-11-13 18:16:44', '2023-11-13 18:16:44', '1', '1', 0);
-INSERT INTO `system_menu` VALUES (131, 126, '查询分组主机', 'asset:host-group:query-rel', 3, 50, 1, 1, 1, NULL, NULL, NULL, '2023-11-13 23:49:31', '2023-11-14 15:35:27', '1', '1', 1);
-INSERT INTO `system_menu` VALUES (132, 126, '修改分组主机', 'asset:host-group:update-rel', 3, 60, 1, 1, 1, NULL, NULL, NULL, '2023-11-13 23:49:49', '2023-11-14 15:48:30', '1', '1', 1);
-INSERT INTO `system_menu` VALUES (133, 126, '主机分组授权', 'asset:host-group:grant', 3, 50, 1, 1, 1, NULL, NULL, NULL, '2023-11-23 18:08:57', '2023-11-23 18:08:57', '1', '1', 0);
+INSERT INTO `system_menu` VALUES (129, 64, '编辑主机分组', 'asset:host-group:update', 3, 100, 1, 1, 1, NULL, NULL, NULL, '2023-11-13 18:16:32', '2023-12-01 01:47:58', '1', '1', 0);
+INSERT INTO `system_menu` VALUES (133, 144, '主机分组授权', 'asset:host-group:grant', 3, 10, 1, 1, 1, NULL, NULL, NULL, '2023-11-23 18:08:57', '2023-11-30 22:39:53', '1', '1', 0);
+INSERT INTO `system_menu` VALUES (142, 144, '主机秘钥授权', 'asset:host-key:grant', 3, 20, 1, 1, 1, NULL, NULL, NULL, '2023-11-30 21:06:13', '2023-11-30 22:39:47', '1', '1', 0);
+INSERT INTO `system_menu` VALUES (143, 144, '主机身份授权', 'asset:host-identity:grant', 3, 30, 1, 1, 1, NULL, NULL, NULL, '2023-11-30 21:06:26', '2023-11-30 22:40:11', '1', '1', 0);
+INSERT INTO `system_menu` VALUES (144, 63, '资产授权', NULL, 2, 70, 1, 1, 1, 'icon-safe', NULL, 'assetGrant', '2023-11-30 22:38:57', '2023-11-30 22:39:06', '1', '1', 0);
 
 -- 字典项
 INSERT INTO `dict_key` VALUES (1, 'operatorLogModule', 'STRING', '[]', '操作日志模块', '2023-10-21 02:04:22', '2023-10-30 14:11:38', '1', '1', 0);
@@ -176,3 +173,5 @@ INSERT INTO `dict_value` VALUES (110, 2, 'operatorLogType', 'host-group:move', '
 INSERT INTO `dict_value` VALUES (111, 2, 'operatorLogType', 'host-group:delete', '删除主机分组', '{}', 40, '2023-11-13 18:28:12', '2023-11-13 18:28:12', '1', '1', 0);
 INSERT INTO `dict_value` VALUES (112, 2, 'operatorLogType', 'host-group:update-rel', '修改分组主机', '{}', 10, '2023-11-13 23:48:03', '2023-11-13 23:48:35', '1', '1', 0);
 INSERT INTO `dict_value` VALUES (113, 2, 'operatorLogType', 'host-group:grant', '主机分组授权', '{}', 50, '2023-11-23 18:10:14', '2023-11-23 18:10:14', '1', '1', 0);
+INSERT INTO `dict_value` VALUES (122, 2, 'operatorLogType', 'host-key:grant', '主机秘钥授权', '{}', 40, '2023-11-30 21:03:55', '2023-11-30 21:04:16', '1', '1', 0);
+INSERT INTO `dict_value` VALUES (123, 2, 'operatorLogType', 'host-identity:grant', '主机身份授权', '{}', 40, '2023-11-30 21:04:48', '2023-11-30 21:04:48', '1', '1', 0);