feat: 资产授权.

2023-12-04 18:57:15 +08:00
parent 4cfc22753b
commit 0ecbd605e9
14 changed files with 868 additions and 27 deletions
--- 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>

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

--- 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
@@ -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>
--- 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
@@ -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>
--- 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
@@ -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>
--- 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
@@ -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>
--- 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) {
--- 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
+  },
+];
--- a/orion-ops-ui/src/views/asset/grant/types/table.columns.ts
+++ 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[];
--- 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']);

--- 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']);

--- 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']);

--- 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']);