From ba446ba50890f8d69a37d9cf16eb4435d9412957 Mon Sep 17 00:00:00 2001
From: lijiahangmax <ljh1553488six@139.com>
Date: Fri, 24 Nov 2023 02:07:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BB=E6=9C=BA=E5=88=86=E7=BB=84?=
 =?UTF-8?q?=E6=8E=88=E6=9D=83.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../infra/enums/DataPermissionTypeEnum.java   |  12 +-
 .../impl/DataPermissionServiceImpl.java       |  11 +-
 .../src/components/view/tab-router/index.vue  |  32 ++-
 .../src/components/view/tab-router/types.ts   |   8 +-
 orion-ops-ui/src/hooks/permission.ts          |   5 +-
 orion-ops-ui/src/types/const.ts               |   2 +
 .../host-group/components/host-group-tree.vue | 116 +++++++----
 .../components/host-group-view-role-grant.vue | 196 +++++++++++++++++-
 .../components/host-group-view-setting.vue    |  18 +-
 .../host-group/components/host-group-view.vue |  50 -----
 .../host-group/components/host-transfer.vue   |   2 +-
 .../src/views/asset/host-group/index.vue      |  50 ++++-
 .../views/user/role/components/role-table.vue |   9 +-
 .../src/views/user/role/types/const.ts        |   3 -
 14 files changed, 385 insertions(+), 129 deletions(-)
 create mode 100644 orion-ops-ui/src/types/const.ts
 delete mode 100644 orion-ops-ui/src/views/asset/host-group/components/host-group-view.vue

diff --git 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
index 4652ef1a..3cea4a06 100644
--- 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;
diff --git 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
index 3427b017..8e59c379 100644
--- 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()
diff --git a/orion-ops-ui/src/components/view/tab-router/index.vue b/orion-ops-ui/src/components/view/tab-router/index.vue
index 83dbdfbf..918c37a6 100644
--- 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;
diff --git a/orion-ops-ui/src/components/view/tab-router/types.ts b/orion-ops-ui/src/components/view/tab-router/types.ts
index b4c9c3e1..4ffac8e2 100644
--- 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;
 }
diff --git a/orion-ops-ui/src/hooks/permission.ts b/orion-ops-ui/src/hooks/permission.ts
index 241478d0..df5b1996 100644
--- 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;
     }
diff --git a/orion-ops-ui/src/types/const.ts b/orion-ops-ui/src/types/const.ts
new file mode 100644
index 00000000..75b97ff1
--- /dev/null
+++ b/orion-ops-ui/src/types/const.ts
@@ -0,0 +1,2 @@
+// 管理员角色编码
+export const AdminRoleCode = 'admin';
diff --git 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
index c897a0e4..d65ea93a 100644
--- 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);
     }
   }
 
diff --git 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
index 93a2bcad..be1e5bba 100644
--- 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>
diff --git 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
index db550cba..d1a486af 100644
--- 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>
diff --git 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
deleted file mode 100644
index 5c2eff82..00000000
--- a/orion-ops-ui/src/views/asset/host-group/components/host-group-view.vue
+++ /dev/null
@@ -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>
diff --git 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
index ee3f2da5..553ed706 100644
--- 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>
diff --git a/orion-ops-ui/src/views/asset/host-group/index.vue b/orion-ops-ui/src/views/asset/host-group/index.vue
index 164586c7..5d396139 100644
--- 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>
diff --git a/orion-ops-ui/src/views/user/role/components/role-table.vue b/orion-ops-ui/src/views/user/role/components/role-table.vue
index 921c655f..b7599d1c 100644
--- 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']);
 
diff --git a/orion-ops-ui/src/views/user/role/types/const.ts b/orion-ops-ui/src/views/user/role/types/const.ts
index 1d380341..8e6d9e61 100644
--- 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 = {
   // 停用