feat: 主机分组授权.

2023-11-24 02:07:52 +08:00
parent 5fe7ce07e5
commit ba446ba508
14 changed files with 385 additions and 129 deletions
--- a/orion-ops-module-infra/orion-ops-module-infra-provider/src/main/java/com/orion/ops/module/infra/enums/DataPermissionTypeEnum.java
+++ b/orion-ops-module-infra/orion-ops-module-infra-provider/src/main/java/com/orion/ops/module/infra/enums/DataPermissionTypeEnum.java
@@ -1,5 +1,8 @@
 package com.orion.ops.module.infra.enums;

+import lombok.AllArgsConstructor;
+import lombok.Getter;
+
 /**
 * 数据权限类型
 *
@@ -7,15 +10,22 @@ package com.orion.ops.module.infra.enums;
 * @version 1.0.0
 * @since 2023/11/8 18:57
 */
+@Getter
+@AllArgsConstructor
 public enum DataPermissionTypeEnum {

    /**
     * 主机分组
     */
-    HOST_GROUP,
+    HOST_GROUP(true),

    ;

+    /**
+     * 是否会分配给角色
+     */
+    private final boolean toRole;
+
    public static DataPermissionTypeEnum of(String type) {
        if (type == null) {
            return null;
--- a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/service/impl/DataPermissionServiceImpl.java
+++ b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/service/impl/DataPermissionServiceImpl.java
@@ -2,6 +2,7 @@ package com.orion.ops.module.infra.service.impl;

 import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
 import com.orion.lang.utils.collect.Lists;
+import com.orion.ops.framework.common.utils.Valid;
 import com.orion.ops.framework.mybatis.core.query.Conditions;
 import com.orion.ops.framework.redis.core.utils.RedisLists;
 import com.orion.ops.framework.redis.core.utils.RedisUtils;
@@ -11,6 +12,7 @@ import com.orion.ops.module.infra.dao.SystemUserRoleDAO;
 import com.orion.ops.module.infra.define.cache.DataPermissionCacheKeyDefine;
 import com.orion.ops.module.infra.entity.domain.DataPermissionDO;
 import com.orion.ops.module.infra.entity.request.data.DataPermissionUpdateRequest;
+import com.orion.ops.module.infra.enums.DataPermissionTypeEnum;
 import com.orion.ops.module.infra.service.DataPermissionService;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.stereotype.Service;
@@ -131,6 +133,7 @@ public class DataPermissionServiceImpl implements DataPermissionService {

    @Override
    public List<Long> getUserAuthorizedRelIdList(String type, Long userId) {
+        DataPermissionTypeEnum dataType = Valid.valid(DataPermissionTypeEnum::of, type);
        String cacheKey = DataPermissionCacheKeyDefine.DATA_PERMISSION_USER.format(type, userId);
        // 获取缓存
        List<Long> list = RedisLists.range(cacheKey, Long::valueOf);
@@ -139,9 +142,11 @@ public class DataPermissionServiceImpl implements DataPermissionService {
                    .eq(DataPermissionDO::getType, type)
                    .eq(DataPermissionDO::getUserId, userId);
            // 查询用户角色
-            List<Long> roleIdList = systemUserRoleDAO.selectRoleIdByUserId(userId);
-            if (!roleIdList.isEmpty()) {
-                wrapper.or().in(DataPermissionDO::getRoleId, roleIdList);
+            if (dataType.isToRole()) {
+                List<Long> roleIdList = systemUserRoleDAO.selectRoleIdByUserId(userId);
+                if (!roleIdList.isEmpty()) {
+                    wrapper.or().in(DataPermissionDO::getRoleId, roleIdList);
+                }
            }
            // 查询数据库
            list = dataPermissionDAO.of()
--- a/orion-ops-ui/src/components/view/tab-router/index.vue
+++ b/orion-ops-ui/src/components/view/tab-router/index.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="simple-card tabs-container">
+  <div class="tabs-container">
    <template v-for="item in items"
              :key="item.key">
-      <span v-permission="item.permission"
+      <span v-permission="item.permission || []"
            :title="item.text"
            :class="['tab-item', item.key === modelValue ? 'tab-item-active' : '']"
-            @click="changeTab(item.key)">
+            @click="changeTab(item)">
        <component v-if="item.icon"
                   :is="item.icon" />
        {{ item.text }}
@@ -36,24 +36,31 @@
  const emits = defineEmits(['update:modelValue', 'change']);

  // 切换 tab
-  const changeTab = (key: string | number) => {
+  const changeTab = ({ key, text }: TabRouterItem) => {
    if (key === props.modelValue) {
      return;
    }
    emits('update:modelValue', key);
-    emits('change', key);
+    emits('change', key, text);
  };

  onMounted(() => {
    // 获取有权限的 key
-    const keys = props.items?.filter(s => !s.permission || !s.permission.length || permission.hasAnyPermission(s.permission))
-    .map(s => s.key) || [];
-    if (!keys.length) {
+    const items = props.items?.filter(s => !s.permission || !s.permission.length || permission.hasAnyPermission(s.permission)) || [];
+    if (!items.length) {
      return;
    }
    // 设置默认选中
-    if (keys.indexOf(props.modelValue as string | number) === -1) {
-      emits('update:modelValue', keys[0]);
+    if (items.map(s => s.key).indexOf(props.modelValue as string | number) === -1) {
+      const item = items[0];
+      emits('update:modelValue', item.key);
+      emits('change', item.key, item.text);
+    } else {
+      // 触发 change 事件
+      const matchItem = items.find(s => s.key === props.modelValue);
+      if (matchItem) {
+        emits('change', matchItem.key, matchItem.text);
+      }
    }
  });

@@ -64,6 +71,7 @@
    display: flex;
    flex-direction: column;
    user-select: none;
+    background: #FFF;
  }

  .tab-item {
@@ -77,6 +85,10 @@
    font-size: 14px;
    color: var(--color-text-2);

+    &:first-child {
+      margin-top: 0;
+    }
+
    svg {
      margin-right: 4px;
      font-size: 16px;
--- a/orion-ops-ui/src/components/view/tab-router/types.ts
+++ b/orion-ops-ui/src/components/view/tab-router/types.ts
@@ -2,8 +2,10 @@
 * tab 元素
 */
 export interface TabRouterItem {
-  key: string | number,
-  text: string,
+  key: string | number;
+  text: string;
  icon?: string;
-  permission?: string[]
+  permission?: string[];
+
+  [key: string]: unknown;
 }
--- a/orion-ops-ui/src/hooks/permission.ts
+++ b/orion-ops-ui/src/hooks/permission.ts
@@ -1,6 +1,7 @@
 import type { RouteLocationNormalized, RouteRecordNormalized, RouteRecordRaw } from 'vue-router';
 import { useMenuStore, useUserStore } from '@/store';
 import { STATUS_ROUTER_LIST, WHITE_ROUTER_LIST } from '@/router/constants';
+import { AdminRoleCode } from '@/types/const';

 export default function usePermission() {
  const menuStore = useMenuStore();
@@ -50,7 +51,7 @@ export default function usePermission() {
     * 是否有角色
     */
    hasRole(role: string) {
-      return userStore.roles?.includes('admin') ||
+      return userStore.roles?.includes(AdminRoleCode) ||
        userStore.roles?.includes(role);
    },

@@ -58,7 +59,7 @@ export default function usePermission() {
     * 是否有角色
     */
    hasAnyRole(role: string[]) {
-      return userStore.roles?.includes('admin') ||
+      return userStore.roles?.includes(AdminRoleCode) ||
        role.map(s => userStore.roles?.includes(s))
        .filter(Boolean).length > 0;
    }
--- a/orion-ops-ui/src/types/const.ts
+++ b/orion-ops-ui/src/types/const.ts
@@ -0,0 +1,2 @@
+// 管理员角色编码
+export const AdminRoleCode = 'admin';
--- a/orion-ops-ui/src/views/asset/host-group/components/host-group-tree.vue
+++ b/orion-ops-ui/src/views/asset/host-group/components/host-group-tree.vue
@@ -1,13 +1,15 @@
 <template>
  <!-- 分组树 -->
-  <a-tree
-    v-if="treeData.length"
-    ref="tree"
-    class="tree-container"
-    :blockNode="true"
-    :draggable="true"
-    :data="treeData"
-    @drop="moveGroup">
+  <a-tree v-if="treeData.length"
+          ref="tree"
+          class="tree-container"
+          :blockNode="true"
+          :draggable="draggable"
+          :data="treeData"
+          :checkable="checkable"
+          v-model:checked-keys="checkedKeys"
+          :check-strictly="true"
+          @drop="moveGroup">
    <!-- 标题 -->
    <template #title="node">
      <!-- 修改名称输入框 -->
@@ -15,6 +17,7 @@
        <a-input size="mini"
                 ref="renameInput"
                 v-model="currName"
+                 style="width: 138px;"
                 placeholder="名称"
                 autofocus
                 :max-length="32"
@@ -85,16 +88,31 @@

 <script lang="ts" setup>
  import type { TreeNodeData } from '@arco-design/web-vue';
-  import { nextTick, onMounted, ref } from 'vue';
+  import { computed, nextTick, onMounted, ref } from 'vue';
  import { createGroupGroupPrefix, rootId } from '../types/const';
  import { findNode, findParentNode, moveNode } from '@/utils/tree';
  import { createHostGroup, deleteHostGroup, getHostGroupTree, updateHostGroupName, moveHostGroup } from '@/api/asset/host-group';
  import { isString } from '@/utils/is';
+  import { useCacheStore } from '@/store';

  const props = defineProps({
-    loading: Boolean
+    loading: Boolean,
+    draggable: {
+      type: Boolean,
+      default: true
+    },
+    checkable: {
+      type: Boolean,
+      default: false
+    },
+    checkedKeys: {
+      type: Array<Number>,
+      default: []
+    }
  });
-  const emits = defineEmits(['loading', 'selectNode']);
+  const emits = defineEmits(['loading', 'selectNode', 'update:checkedKeys']);
+
+  const cacheStore = useCacheStore();

  const tree = ref();
  const modCount = ref(0);
@@ -102,6 +120,19 @@
  const currName = ref();
  const treeData = ref<Array<TreeNodeData>>([]);

+  const checkedKeys = computed<Array<number>>({
+    get() {
+      return props.checkedKeys as Array<number>;
+    },
+    set(e) {
+      if (e) {
+        emits('update:checkedKeys', e);
+      } else {
+        emits('update:checkedKeys', []);
+      }
+    }
+  });
+
  // 重命名
  const rename = (title: number, key: number) => {
    const node = findNode<TreeNodeData>(key, treeData.value);
@@ -146,7 +177,7 @@
  const addRootNode = () => {
    const newKey = `${createGroupGroupPrefix}${Date.now()}`;
    treeData.value.push({
-      title: 'new',
+      title: '新分组',
      key: newKey
    });
    // 编辑子节点
@@ -165,7 +196,7 @@
    const newKey = `${createGroupGroupPrefix}${Date.now()}`;
    const children = parentNode.children || [];
    children.push({
-      title: 'new',
+      title: '新分组',
      key: newKey
    });
    parentNode.children = children;
@@ -233,11 +264,17 @@
      if (isString(key) && key.startsWith(createGroupGroupPrefix)) {
        // 寻找父节点
        const parent = findParentNode(key, treeData.value);
-        if (parent && parent.children) {
+        if (parent) {
+          // 根节点
+          if (parent.root) {
+            parent.children = treeData.value;
+          }
          // 移除子节点
-          for (let i = 0; i < parent.children.length; i++) {
-            if (parent.children[i].key === key) {
-              parent.children.splice(i, 1);
+          if (parent.children) {
+            for (let i = 0; i < parent.children.length; i++) {
+              if (parent.children[i].key === key) {
+                parent.children.splice(i, 1);
+              }
            }
          }
        }
@@ -273,21 +310,28 @@
  };

  // 加载数据
-  const fetchTreeData = async () => {
-    try {
-      emits('loading', true);
-      const { data } = await getHostGroupTree();
-      treeData.value = data;
-      // 未选择则选择首个
-      if (!tree.value?.getSelectedNodes()?.length && data.length) {
-        await nextTick(() => {
-          tree.value?.selectNode(data[0].key);
-          emits('selectNode', data[0]);
-        });
+  const fetchTreeData = async (force = false) => {
+    if (cacheStore.hostGroups.length && !force) {
+      // 缓存有数据并且非强制加载 直接从缓存中加载
+      treeData.value = cacheStore.hostGroups;
+    } else {
+      // 无数据/强制加载
+      try {
+        emits('loading', true);
+        const { data } = await getHostGroupTree();
+        treeData.value = data;
+        cacheStore.hostGroups = data;
+      } catch (e) {
+      } finally {
+        emits('loading', false);
      }
-    } catch (e) {
-    } finally {
-      emits('loading', false);
+    }
+    // 未选择则选择首个
+    if (!tree.value?.getSelectedNodes()?.length && treeData.value.length) {
+      await nextTick(() => {
+        tree.value?.selectNode(treeData.value[0].key);
+        emits('selectNode', treeData.value[0]);
+      });
    }
  };

@@ -321,15 +365,17 @@
    .arco-tree-node-switcher {
      margin-left: 8px;
    }
+
+    &:hover {
+      background-color: var(--color-fill-1);
+    }
  }

  :deep(.arco-tree-node-selected) {
    background-color: var(--color-fill-2);

-    .arco-tree-node-title {
-      &:hover {
-        background-color: var(--color-fill-2);
-      }
+    &:hover {
+      background-color: var(--color-fill-1);
    }
  }

--- a/orion-ops-ui/src/views/asset/host-group/components/host-group-view-role-grant.vue
+++ b/orion-ops-ui/src/views/asset/host-group/components/host-group-view-role-grant.vue
@@ -1,8 +1,66 @@
 <template>
-  <div class="simple-card grant-container">
-    <div style="height: 200px;background: #00308f">
+  <a-spin :loading="loading" class="grant-container">
+    <!-- 左侧角色列表 -->
+    <div class="role-container">
+      <!-- 角色列表 -->
+      <tab-router v-if="rolesRouter.length"
+                  class="role-router"
+                  v-model="roleId"
+                  :items="rolesRouter" />
+      <!-- 暂无数据 -->
+      <a-empty v-else class="role-empty">
+        <div slot="description">
+          暂无角色数据
+        </div>
+      </a-empty>
    </div>
-  </div>
+    <!-- 右侧菜单列表 -->
+    <div class="group-container">
+      <!-- 顶部 -->
+      <div class="group-header">
+        <!-- 提示信息 -->
+        <a-alert class="alert-wrapper" :show-icon="false">
+          <span v-if="currentRole">
+            当前选择的角色为 <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="save-button"
+                  type="primary"
+                  @click="save">
+          保存
+        </a-button>
+      </div>
+      <!-- 主题部分 -->
+      <div class="group-main">
+        <!-- 菜单 -->
+        <div class="group-main-tree">
+          <host-group-tree :checkable="true"
+                           :checked-keys="checkedGroups"
+                           :draggable="false"
+                           :loading="loading"
+                           @loading="setLoading"
+                           @select-node="fetchGroupHost"
+                           @update:checked-keys="updateCheckedGroups" />
+        </div>
+        <!-- 主机列表 -->
+        <div class="group-main-hosts">
+          <a-list size="smail" :title="'组内数据'" :split="false">
+            <a-list-item v-for="idx in 4" :key="idx">
+              <a-list-item-meta
+                title="host"
+              >
+                <template #avatar>
+                  <icon-desktop />
+                </template>
+              </a-list-item-meta>
+            </a-list-item>
+          </a-list>
+        </div>
+      </div>
+    </div>
+  </a-spin>
 </template>

 <script lang="ts">
@@ -12,11 +70,143 @@
 </script>

 <script lang="ts" setup>
+  import type { TabRouterItem } from '@/components/view/tab-router/types';
+  import { ref, onMounted, watch } from 'vue';
+  import { useCacheStore } from '@/store';
+  import useLoading from '@/hooks/loading';
+  import { getAuthorizedHostGroup, grantHostGroup } from '@/api/asset/host-group';
+  import { AdminRoleCode } from '@/types/const';
+  import HostGroupTree from './host-group-tree.vue';
+  import { Message } from '@arco-design/web-vue';

+  const { loading, setLoading } = useLoading();
+  const cacheStore = useCacheStore();
+
+  const roleId = ref();
+  const currentRole = ref();
+  const rolesRouter = ref<Array<TabRouterItem>>([]);
+  const authorizedGroups = ref<Array<number>>([]);
+  const checkedGroups = ref<Array<number>>([]);
+
+  // 监听角色变更 获取授权列表
+  watch(roleId, async (value) => {
+    if (!value) {
+      return;
+    }
+    currentRole.value = rolesRouter.value.find(s => s.key === value);
+    setLoading(true);
+    try {
+      const { data } = await getAuthorizedHostGroup({
+        roleId: roleId.value
+      });
+      authorizedGroups.value = data;
+      checkedGroups.value = data;
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  });
+
+  // 加载组内数据
+  const fetchGroupHost = () => {
+  };
+
+  // 选择分组
+  const updateCheckedGroups = (e: Array<number>) => {
+    checkedGroups.value = e;
+  };
+
+  // 保存
+  const save = async () => {
+    setLoading(true);
+    try {
+      await grantHostGroup({
+        roleId: roleId.value,
+        groupIdList: checkedGroups.value
+      });
+      Message.success('保存成功');
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 加载主机
+  onMounted(() => {
+    rolesRouter.value = cacheStore.roles.map(s => {
+      return {
+        key: s.id,
+        text: `${s.name} (${s.code})`,
+        code: s.code
+      };
+    });
+  });
 </script>

 <style lang="less" scoped>
  .grant-container {
+    width: 100%;
    padding: 16px;
+    display: flex;
+
+    .role-container {
+      margin-right: 16px;
+
+      .role-router {
+        height: 100%;
+        min-width: max-content;
+        border-right: 1px var(--color-neutral-3) solid;
+      }
+
+      .role-empty {
+        width: 198px;
+      }
+    }
+
+    .group-container {
+      width: 100%;
+
+      .group-header {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 12px;
+        align-items: center;
+
+        .alert-wrapper {
+          height: 32px;
+        }
+
+        .save-button {
+          margin-left: 16px;
+        }
+      }
+
+      .group-main {
+        display: flex;
+
+        &-tree {
+          width: calc(100% - 240px - 16px);
+          margin-right: 16px;
+        }
+
+        &-hosts {
+          width: 240px;
+        }
+      }
+    }
+
+  }
+
+  :deep(.tab-item) {
+    margin-left: 0;
+  }
+
+  :deep(.arco-avatar-image) {
+    font-size: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #FFF;
+    background: rgb(var(--blue-6));
  }
 </style>
--- a/orion-ops-ui/src/views/asset/host-group/components/host-group-view-setting.vue
+++ b/orion-ops-ui/src/views/asset/host-group/components/host-group-view-setting.vue
@@ -32,7 +32,7 @@
    </div>
  </a-spin>
  <!-- 身体部分 -->
-  <a-spin class="simple-card view-body"
+  <a-spin class="simple-card transfer-body"
          :loading="dataLoading">
    <host-transfer ref="transfer"
                   :group="currentGroup"
@@ -67,7 +67,7 @@

  // 刷新树
  const refreshTree = () => {
-    tree.value.fetchTreeData();
+    tree.value.fetchTreeData(true);
  };

  // 选中分组
@@ -78,10 +78,10 @@
 </script>

 <style lang="less" scoped>
-  @tree-width: 26%;
+  @tree-width: 30%;

  .tree-card {
-    margin-right: 16px;
+    padding: 0 0 16px 8px;
    width: @tree-width;
    height: 100%;
    position: absolute;
@@ -90,7 +90,7 @@
      display: flex;
      justify-content: space-between;
      align-items: center;
-      padding: 0 8px 0 16px;
+      padding-left: 16px;
      position: relative;
      width: 100%;
      height: 44px;
@@ -131,13 +131,13 @@
    }
  }

-  .view-body {
+  .transfer-body {
    display: flex;
    height: 100%;
-    padding: 16px;
-    width: calc(100% - @tree-width - 16px);
+    padding: 12px 16px 16px 16px;
+    width: calc(100% - @tree-width);
    position: absolute;
-    left: calc(@tree-width + 16px);
+    left: @tree-width;
  }

 </style>
--- a/orion-ops-ui/src/views/asset/host-group/components/host-group-view.vue
+++ b/orion-ops-ui/src/views/asset/host-group/components/host-group-view.vue
@@ -1,50 +0,0 @@
-<template>
-  <a-tabs class="view-container"
-          :default-active-key="1"
-          :justify="true"
-          :destroy-on-hide="true"
-          :lazy-load="true">
-    <!-- 左侧导航 -->
-    <a-tab-pane :key="1">
-      <host-group-view-setting />
-      <template #title>
-        <icon-unordered-list />
-        分组配置
-      </template>
-    </a-tab-pane>
-    <!-- 角色分配 -->
-    <a-tab-pane :key="2">
-      <host-group-view-role-grant />
-      <template #title>
-        <icon-safe />
-        角色授权
-      </template>
-    </a-tab-pane>
-    <!-- 用户分配 -->
-    <a-tab-pane :key="3">
-      <host-group-view-user-grant />
-      <template #title>
-        <icon-user />
-        用户授权
-      </template>
-    </a-tab-pane>
-  </a-tabs>
-</template>
-
-<script lang="ts">
-  export default {
-    name: 'host-group-view'
-  };
-</script>
-
-<script lang="ts" setup>
-  import HostGroupViewSetting from './host-group-view-setting.vue';
-  import HostGroupViewRoleGrant from './host-group-view-role-grant.vue';
-  import HostGroupViewUserGrant from './host-group-view-user-grant.vue';
-
-</script>
-
-<style lang="less" scoped>
-
-
-</style>
--- a/orion-ops-ui/src/views/asset/host-group/components/host-transfer.vue
+++ b/orion-ops-ui/src/views/asset/host-group/components/host-transfer.vue
@@ -3,7 +3,7 @@
    <!-- 头部 -->
    <div class="transfer-header">
      <!-- 提示 -->
-      <a-alert class="alert-wrapper">
+      <a-alert class="alert-wrapper" :show-icon="false">
        <!-- 已选中分组 -->
        <template v-if="group.key">
          <span>当前编辑的分组为 <span class="span-blue">{{ group.title }}</span></span>
--- a/orion-ops-ui/src/views/asset/host-group/index.vue
+++ b/orion-ops-ui/src/views/asset/host-group/index.vue
@@ -2,6 +2,7 @@
  <div v-if="render" class="view-container">
    <a-tabs v-if="render"
            class="tabs-container"
+            size="large"
            :default-active-key="1"
            :destroy-on-hide="true"
            :justify="true"
@@ -48,9 +49,13 @@
  import HostGroupViewSetting from './components/host-group-view-setting.vue';
  import HostGroupViewRoleGrant from './components/host-group-view-role-grant.vue';
  import HostGroupViewUserGrant from './components/host-group-view-user-grant.vue';
+  import { getUserList } from '@/api/user/user';
+  import { getRoleList } from '@/api/user/role';
+  import usePermission from '@/hooks/permission';

  const render = ref(false);
  const cacheStore = useCacheStore();
+  const { hasPermission } = usePermission();

  // 加载主机列表
  const loadHostList = async () => {
@@ -59,19 +64,50 @@
      // 设置到缓存
      cacheStore.set('hosts', data);
    } catch (e) {
-      Message.error('tag加载失败');
+      Message.error('主机列表加载失败');
+    }
+  };
+
+  // 加载用户列表
+  const loadUserList = async () => {
+    try {
+      const { data } = await getUserList();
+      // 设置到缓存
+      cacheStore.set('users', data);
+    } catch (e) {
+      Message.error('用户列表加载失败');
+    }
+  };
+
+  // 加载角色列表
+  const loadRoleList = async () => {
+    try {
+      const { data } = await getRoleList();
+      // 设置到缓存
+      cacheStore.set('roles', data);
+    } catch (e) {
+      Message.error('角色列表加载失败');
    }
  };

  onBeforeMount(async () => {
-    // 加载主机列表
-    await loadHostList();
-    render.value = true;
+    if (hasPermission('asset:host-group:query')) {
+      // 加载主机列表 tab1
+      await loadHostList();
+      render.value = true;
+    }
+    if (hasPermission('asset:host-group:grant')) {
+      // 加载角色列表 tab2
+      await loadRoleList();
+      render.value = true;
+      // 加载用户列表 tab3
+      await loadUserList();
+    }
  });

  // 卸载时清除 cache
  onUnmounted(() => {
-    cacheStore.reset('user', 'roles', 'hosts');
+    cacheStore.reset('users', 'roles', 'hosts', 'hostGroups');
  });

 </script>
@@ -96,4 +132,8 @@
  :deep(.arco-tabs-content) {
    padding-top: 0;
  }
+
+  :deep(.arco-tabs-content) {
+    position: relative;
+  }
 </style>
--- a/orion-ops-ui/src/views/user/role/components/role-table.vue
+++ b/orion-ops-ui/src/views/user/role/components/role-table.vue
@@ -80,7 +80,7 @@
                        type="warning"
                        @ok="toggleRoleStatus(record)">
            <a-button v-permission="['infra:system-role:delete']"
-                      :disabled="record.code === AdminCode"
+                      :disabled="record.code === AdminRoleCode"
                      :status="toggleDictValue(roleStatusKey, record.status, 'status')"
                      type="text"
                      size="mini">
@@ -89,7 +89,7 @@
          </a-popconfirm>
          <!-- 分配菜单 -->
          <a-button v-permission="['infra:system-role:grant-menu']"
-                    :disabled="record.code === AdminCode"
+                    :disabled="record.code === AdminRoleCode"
                    type="text"
                    size="mini"
                    @click="emits('openGrant', record)">
@@ -108,7 +108,7 @@
                        type="warning"
                        @ok="deleteRow(record)">
            <a-button v-permission="['infra:system-role:delete']"
-                      :disabled="record.code === AdminCode"
+                      :disabled="record.code === AdminRoleCode"
                      type="text"
                      size="mini"
                      status="danger">
@@ -134,9 +134,10 @@
  import { Message } from '@arco-design/web-vue';
  import useLoading from '@/hooks/loading';
  import columns from '../types/table.columns';
-  import { roleStatusKey, AdminCode } from '../types/const';
+  import { roleStatusKey } from '../types/const';
  import { usePagination } from '@/types/table';
  import { useDictStore } from '@/store';
+  import { AdminRoleCode } from '@/types/const';

  const emits = defineEmits(['openAdd', 'openUpdate', 'openGrant']);

--- a/orion-ops-ui/src/views/user/role/types/const.ts
+++ b/orion-ops-ui/src/views/user/role/types/const.ts
@@ -1,6 +1,3 @@
-// 管理员角色编码
-export const AdminCode = 'admin';
-
 // 角色状态
 export const RoleStatus = {
  // 停用