From 351669a4f305c957083ca054a75e35928827a1ba Mon Sep 17 00:00:00 2001
From: lijiahang <ljh1553488six@139.com>
Date: Fri, 1 Dec 2023 15:07:39 +0800
Subject: [PATCH] review code.

---
 orion-ops-ui/src/assets/style/global.less     |  15 +
 .../asset/host-group/host-group-tree.vue      | 148 ++++---
 .../src/components/view/tab-router/index.vue  |   9 +-
 ...le-grant.vue => host-group-role-grant.vue} | 117 ++---
 .../grant/components/host-group-tree.vue      | 412 ------------------
 ...er-grant.vue => host-group-user-grant.vue} | 113 ++---
 .../asset/grant/components/host-list.vue      |  37 +-
 .../asset/grant/components/router-roles.vue   |  91 ++++
 .../asset/grant/components/router-users.vue   |  90 ++++
 orion-ops-ui/src/views/asset/grant/index.vue  |  88 +---
 .../components/group/host-group-drawer.vue    |  15 +-
 11 files changed, 411 insertions(+), 724 deletions(-)
 rename orion-ops-ui/src/views/asset/grant/components/{host-group-view-role-grant.vue => host-group-role-grant.vue} (55%)
 delete mode 100644 orion-ops-ui/src/views/asset/grant/components/host-group-tree.vue
 rename orion-ops-ui/src/views/asset/grant/components/{host-group-view-user-grant.vue => host-group-user-grant.vue} (55%)
 create mode 100644 orion-ops-ui/src/views/asset/grant/components/router-roles.vue
 create mode 100644 orion-ops-ui/src/views/asset/grant/components/router-users.vue

diff --git a/orion-ops-ui/src/assets/style/global.less b/orion-ops-ui/src/assets/style/global.less
index 1531c735..d8e5457e 100644
--- a/orion-ops-ui/src/assets/style/global.less
+++ b/orion-ops-ui/src/assets/style/global.less
@@ -112,6 +112,21 @@ body {
   }
 }
 
+.arco-scrollbar-track-direction-vertical {
+  width: 9px;
+
+  .arco-scrollbar-thumb-bar {
+    margin: 0;
+  }
+}
+.arco-scrollbar-track-direction-horizontal{
+  height: 9px;
+
+  .arco-scrollbar-thumb-bar {
+    margin: 0;
+  }
+}
+
 .a-query-header-grid {
   .arco-grid-item {
     &:last-child {
diff --git a/orion-ops-ui/src/components/asset/host-group/host-group-tree.vue b/orion-ops-ui/src/components/asset/host-group/host-group-tree.vue
index 79632466..6b93e464 100644
--- a/orion-ops-ui/src/components/asset/host-group/host-group-tree.vue
+++ b/orion-ops-ui/src/components/asset/host-group/host-group-tree.vue
@@ -1,83 +1,85 @@
 <template>
-  <!-- 分组树 -->
-  <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">
-      <!-- 修改名称输入框 -->
-      <template v-if="node.editable">
-        <a-input size="mini"
-                 ref="renameInput"
-                 v-model="currName"
-                 style="width: 138px;"
-                 placeholder="名称"
-                 autofocus
-                 :max-length="32"
-                 :disabled="node.loading"
-                 @blur="() => saveNode(node.key)"
-                 @pressEnter="() => saveNode(node.key)"
-                 @change="() => saveNode(node.key)">
-          <template #suffix>
-            <!-- 加载中 -->
-            <icon-loading v-if="node.loading" />
-            <!-- 保存 -->
-            <icon-check v-else
-                        class="pointer"
-                        title="保存"
-                        @click="() => saveNode(node.key)" />
-          </template>
-        </a-input>
-      </template>
-      <!-- 名称 -->
-      <span v-else
-            class="node-title-wrapper"
-            @click="() => emits('selectNode', node)">
+  <a-scrollbar>
+    <!-- 分组树 -->
+    <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">
+        <!-- 修改名称输入框 -->
+        <template v-if="node.editable">
+          <a-input size="mini"
+                   ref="renameInput"
+                   v-model="currName"
+                   style="width: 138px;"
+                   placeholder="名称"
+                   autofocus
+                   :max-length="32"
+                   :disabled="node.loading"
+                   @blur="() => saveNode(node.key)"
+                   @pressEnter="() => saveNode(node.key)"
+                   @change="() => saveNode(node.key)">
+            <template #suffix>
+              <!-- 加载中 -->
+              <icon-loading v-if="node.loading" />
+              <!-- 保存 -->
+              <icon-check v-else
+                          class="pointer"
+                          title="保存"
+                          @click="() => saveNode(node.key)" />
+            </template>
+          </a-input>
+        </template>
+        <!-- 名称 -->
+        <span v-else
+              class="node-title-wrapper"
+              @click="() => emits('selectNode', node)">
         {{ node.title }}
       </span>
-    </template>
-    <!-- 操作图标 -->
-    <template #drag-icon="{ node }">
-      <a-space v-if="!node.editable">
-        <!-- 重命名 -->
-        <span v-permission="['asset:host-group:update']"
-              class="tree-icon"
-              title="重命名"
-              @click="rename(node.title, node.key)">
+      </template>
+      <!-- 操作图标 -->
+      <template #drag-icon="{ node }">
+        <a-space v-if="!node.editable">
+          <!-- 重命名 -->
+          <span v-permission="['asset:host-group:update']"
+                class="tree-icon"
+                title="重命名"
+                @click="rename(node.title, node.key)">
           <icon-edit />
         </span>
-        <!-- 删除 -->
-        <a-popconfirm content="确认删除这条记录吗?"
-                      position="left"
-                      type="warning"
-                      @ok="deleteNode(node.key)">
+          <!-- 删除 -->
+          <a-popconfirm content="确认删除这条记录吗?"
+                        position="left"
+                        type="warning"
+                        @ok="deleteNode(node.key)">
           <span v-permission="['asset:host-group:delete']"
                 class="tree-icon" title="删除">
             <icon-delete />
           </span>
-        </a-popconfirm>
-        <!-- 新增 -->
-        <span v-permission="['asset:host-group:create']"
-              class="tree-icon"
-              title="新增"
-              @click="addChildren(node)">
+          </a-popconfirm>
+          <!-- 新增 -->
+          <span v-permission="['asset:host-group:create']"
+                class="tree-icon"
+                title="新增"
+                @click="addChildren(node)">
           <icon-plus />
         </span>
-      </a-space>
-    </template>
-  </a-tree>
-  <!-- 无数据 -->
-  <div v-else-if="!loading" class="empty-container">
-    <span>暂无数据</span>
-    <span>点击上方 '<icon-plus />' 添加一个分组吧~</span>
-  </div>
+        </a-space>
+      </template>
+    </a-tree>
+    <!-- 无数据 -->
+    <div v-else-if="!loading" class="empty-container">
+      <span>暂无数据</span>
+      <span>点击上方 '<icon-plus />' 添加一个分组吧~</span>
+    </div>
+  </a-scrollbar>
 </template>
 
 <script lang="ts">
@@ -344,10 +346,16 @@
 </script>
 
 <style lang="less" scoped>
+  :deep(.arco-scrollbar-container) {
+    height: 100%;
+    overflow-y: auto;
+  }
+
   .tree-container {
     min-width: 100%;
     width: max-content;
     user-select: none;
+    overflow: hidden;
   }
 
   .empty-container {
@@ -380,7 +388,7 @@
   }
 
   :deep(.arco-tree-node-title) {
-    padding: 0 68px 0 0;
+    padding: 0 80px 0 0;
     height: 32px;
 
     &:hover {
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 538de4d5..41906683 100644
--- a/orion-ops-ui/src/components/view/tab-router/index.vue
+++ b/orion-ops-ui/src/components/view/tab-router/index.vue
@@ -36,12 +36,13 @@
   const emits = defineEmits(['update:modelValue', 'change']);
 
   // 切换 tab
-  const changeTab = ({ key, text }: TabRouterItem) => {
+  const changeTab = (item: TabRouterItem) => {
+    const key = item.key;
     if (key === props.modelValue) {
       return;
     }
     emits('update:modelValue', key);
-    emits('change', key, text);
+    emits('change', key, item);
   };
 
   onMounted(() => {
@@ -54,12 +55,12 @@
     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);
+      emits('change', item.key, item);
     } else {
       // 触发 change 事件
       const matchItem = items.find(s => s.key === props.modelValue);
       if (matchItem) {
-        emits('change', matchItem.key, matchItem.text);
+        emits('change', matchItem.key, matchItem);
       }
     }
   });
diff --git a/orion-ops-ui/src/views/asset/grant/components/host-group-view-role-grant.vue b/orion-ops-ui/src/views/asset/grant/components/host-group-role-grant.vue
similarity index 55%
rename from orion-ops-ui/src/views/asset/grant/components/host-group-view-role-grant.vue
rename to orion-ops-ui/src/views/asset/grant/components/host-group-role-grant.vue
index 5c49a660..16bc9d59 100644
--- a/orion-ops-ui/src/views/asset/grant/components/host-group-view-role-grant.vue
+++ b/orion-ops-ui/src/views/asset/grant/components/host-group-role-grant.vue
@@ -1,20 +1,8 @@
 <template>
   <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>
-    <!-- 右侧菜单列表 -->
+    <!-- 角色列表 -->
+    <router-roles v-model="roleId" @change="fetchAuthorizedGroup" />
+    <!-- 分组列表 -->
     <div class="group-container">
       <!-- 顶部 -->
       <div class="group-header">
@@ -25,28 +13,27 @@
             <span class="span-blue ml4" v-if="currentRole.code === AdminRoleCode">管理员拥有全部权限, 无需配置</span>
           </span>
         </a-alert>
-        <!-- 保存 -->
-        <a-button class="save-button"
+        <!-- 授权 -->
+        <a-button class="grant-button"
                   type="primary"
-                  @click="save">
-          保存
+                  @click="doGrant">
+          授权
           <template #icon>
-            <icon-check />
+            <icon-safe />
           </template>
         </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="e => selectedGroup = e"
-                           @update:checked-keys="updateCheckedGroups" />
-        </div>
+        <!-- 分组 -->
+        <host-group-tree outer-class="group-main-tree"
+                         :checkable="true"
+                         :checked-keys="checkedGroups"
+                         :draggable="false"
+                         :loading="loading"
+                         @loading="setLoading"
+                         @select-node="e => selectedGroup = e"
+                         @update:checked-keys="updateCheckedGroups" />
         <!-- 主机列表 -->
         <host-list class="group-main-hosts"
                    :group="selectedGroup" />
@@ -62,33 +49,28 @@
 </script>
 
 <script lang="ts" setup>
-  import type { TabRouterItem } from '@/components/view/tab-router/types';
   import type { TreeNodeData } from '@arco-design/web-vue';
-  import { ref, onMounted, watch } from 'vue';
-  import { useCacheStore } from '@/store';
+  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 './host-group-tree.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 cacheStore = useCacheStore();
 
   const roleId = ref();
   const currentRole = ref();
-  const rolesRouter = ref<Array<TabRouterItem>>([]);
   const authorizedGroups = ref<Array<number>>([]);
   const checkedGroups = ref<Array<number>>([]);
   const selectedGroup = ref<TreeNodeData>({});
 
-  // 监听角色变更 获取授权列表
-  watch(roleId, async (value) => {
-    if (!value) {
-      return;
-    }
-    currentRole.value = rolesRouter.value.find(s => s.key === value);
+  // 获取授权列表
+  const fetchAuthorizedGroup = async (id: number, role: any) => {
+    roleId.value = id;
+    currentRole.value = role;
     setLoading(true);
     try {
       const { data } = await getAuthorizedHostGroup({
@@ -100,83 +82,66 @@
     } finally {
       setLoading(false);
     }
-  });
+  };
 
   // 选择分组
   const updateCheckedGroups = (e: Array<number>) => {
     checkedGroups.value = e;
   };
 
-  // 保存
-  const save = async () => {
+  // 授权
+  const doGrant = async () => {
     setLoading(true);
     try {
       await grantHostGroup({
         roleId: roleId.value,
         idList: checkedGroups.value
       });
-      Message.success('保存成功');
+      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%;
+    height: 100%;
     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;
-      }
-    }
+    padding: 0 12px 12px 0;
 
     .group-container {
+      position: relative;
       width: 100%;
+      height: 100%;
 
       .group-header {
         display: flex;
         justify-content: space-between;
-        margin-bottom: 12px;
+        margin-bottom: 16px;
         align-items: center;
 
         .alert-wrapper {
           padding: 4px 16px;
         }
 
-        .save-button {
+        .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;
         }
 
@@ -187,8 +152,4 @@
     }
   }
 
-  :deep(.tab-item) {
-    margin-left: 0;
-  }
-
 </style>
diff --git a/orion-ops-ui/src/views/asset/grant/components/host-group-tree.vue b/orion-ops-ui/src/views/asset/grant/components/host-group-tree.vue
deleted file mode 100644
index d65ea93a..00000000
--- a/orion-ops-ui/src/views/asset/grant/components/host-group-tree.vue
+++ /dev/null
@@ -1,412 +0,0 @@
-<template>
-  <!-- 分组树 -->
-  <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">
-      <!-- 修改名称输入框 -->
-      <template v-if="node.editable">
-        <a-input size="mini"
-                 ref="renameInput"
-                 v-model="currName"
-                 style="width: 138px;"
-                 placeholder="名称"
-                 autofocus
-                 :max-length="32"
-                 :disabled="node.loading"
-                 @blur="() => saveNode(node.key)"
-                 @pressEnter="() => saveNode(node.key)"
-                 @change="() => saveNode(node.key)">
-          <template #suffix>
-            <!-- 加载中 -->
-            <icon-loading v-if="node.loading" />
-            <!-- 保存 -->
-            <icon-check v-else
-                        class="pointer"
-                        title="保存"
-                        @click="() => saveNode(node.key)" />
-          </template>
-        </a-input>
-      </template>
-      <!-- 名称 -->
-      <span v-else
-            class="node-title-wrapper"
-            @click="() => emits('selectNode', node)">
-        {{ node.title }}
-      </span>
-    </template>
-    <!-- 操作图标 -->
-    <template #drag-icon="{ node }">
-      <a-space v-if="!node.editable">
-        <!-- 重命名 -->
-        <span v-permission="['asset:host-group:update']"
-              class="tree-icon"
-              title="重命名"
-              @click="rename(node.title, node.key)">
-          <icon-edit />
-        </span>
-        <!-- 删除 -->
-        <a-popconfirm content="确认删除这条记录吗?"
-                      position="left"
-                      type="warning"
-                      @ok="deleteNode(node.key)">
-          <span v-permission="['asset:host-group:delete']"
-                class="tree-icon" title="删除">
-            <icon-delete />
-          </span>
-        </a-popconfirm>
-        <!-- 新增 -->
-        <span v-permission="['asset:host-group:create']"
-              class="tree-icon"
-              title="新增"
-              @click="addChildren(node)">
-          <icon-plus />
-        </span>
-      </a-space>
-    </template>
-  </a-tree>
-  <!-- 无数据 -->
-  <div v-else-if="!loading" class="empty-container">
-    <span>暂无数据</span>
-    <span>点击上方 '<icon-plus />' 添加一个分组吧~</span>
-  </div>
-</template>
-
-<script lang="ts">
-  export default {
-    name: 'host-group-tree'
-  };
-</script>
-
-<script lang="ts" setup>
-  import type { TreeNodeData } from '@arco-design/web-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,
-    draggable: {
-      type: Boolean,
-      default: true
-    },
-    checkable: {
-      type: Boolean,
-      default: false
-    },
-    checkedKeys: {
-      type: Array<Number>,
-      default: []
-    }
-  });
-  const emits = defineEmits(['loading', 'selectNode', 'update:checkedKeys']);
-
-  const cacheStore = useCacheStore();
-
-  const tree = ref();
-  const modCount = ref(0);
-  const renameInput = ref();
-  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);
-    if (!node) {
-      return;
-    }
-    currName.value = title;
-    node.editable = true;
-    nextTick(() => {
-      renameInput.value?.focus();
-    });
-  };
-
-  // 删除节点
-  const deleteNode = async (key: number) => {
-    try {
-      emits('loading', true);
-      // 删除
-      await deleteHostGroup(key);
-      // 页面删除
-      const parentNode = findParentNode<TreeNodeData>(key, treeData.value);
-      if (!parentNode) {
-        return;
-      }
-      const children = parentNode.root ? treeData.value : parentNode.children;
-      if (children) {
-        // 删除
-        for (let i = 0; i < children.length; i++) {
-          if (children[i].key === key) {
-            children.splice(i, 1);
-            break;
-          }
-        }
-      }
-    } catch (e) {
-    } finally {
-      emits('loading', false);
-    }
-  };
-
-  // 新增根节点
-  const addRootNode = () => {
-    const newKey = `${createGroupGroupPrefix}${Date.now()}`;
-    treeData.value.push({
-      title: '新分组',
-      key: newKey
-    });
-    // 编辑子节点
-    const newNode = findNode<TreeNodeData>(newKey, treeData.value);
-    if (newNode) {
-      newNode.editable = true;
-      currName.value = '';
-      nextTick(() => {
-        renameInput.value?.focus();
-      });
-    }
-  };
-
-  // 新增子节点
-  const addChildren = (parentNode: TreeNodeData) => {
-    const newKey = `${createGroupGroupPrefix}${Date.now()}`;
-    const children = parentNode.children || [];
-    children.push({
-      title: '新分组',
-      key: newKey
-    });
-    parentNode.children = children;
-    treeData.value = [...treeData.value];
-    nextTick(() => {
-      // 展开
-      tree.value.expandNode(parentNode.key);
-      // 编辑子节点
-      const newNode = findNode<TreeNodeData>(newKey, treeData.value);
-      if (newNode) {
-        newNode.editable = true;
-        currName.value = '';
-        nextTick(() => {
-          renameInput.value?.focus();
-        });
-      }
-    });
-  };
-
-  // 保存节点
-  const saveNode = async (key: string | number) => {
-    modCount.value++;
-    if (modCount.value !== 1) {
-      return;
-    }
-    // 寻找节点
-    const node = findNode<TreeNodeData>(key, treeData.value);
-    if (!node) {
-      return;
-    }
-    if (currName.value) {
-      node.loading = true;
-      try {
-        // 创建节点
-        if (isString(key) && key.startsWith(createGroupGroupPrefix)) {
-          const parent = findParentNode<TreeNodeData>(key, treeData.value);
-          if (parent.root) {
-            parent.key = rootId;
-          }
-          // 创建
-          const { data } = await createHostGroup({
-            parentId: parent.key as number,
-            name: currName.value
-          });
-          node.key = data;
-        } else {
-          // 重命名节点
-          await updateHostGroupName({
-            id: key as unknown as number,
-            name: currName.value
-          });
-        }
-        node.title = currName.value;
-        node.editable = false;
-      } catch (e) {
-        // 重复 重新聚焦
-        setTimeout(() => {
-          renameInput.value?.focus();
-        }, 100);
-      } finally {
-        node.loading = false;
-      }
-    } else {
-      // 未输入数据 并且为创建则移除节点
-      if (isString(key) && key.startsWith(createGroupGroupPrefix)) {
-        // 寻找父节点
-        const parent = findParentNode(key, treeData.value);
-        if (parent) {
-          // 根节点
-          if (parent.root) {
-            parent.children = treeData.value;
-          }
-          // 移除子节点
-          if (parent.children) {
-            for (let i = 0; i < parent.children.length; i++) {
-              if (parent.children[i].key === key) {
-                parent.children.splice(i, 1);
-              }
-            }
-          }
-        }
-      }
-      node.editable = false;
-    }
-    modCount.value = 0;
-  };
-
-  // 移动分组
-  const moveGroup = async (
-    {
-      dragNode, dropNode, dropPosition
-    }: {
-      dragNode: TreeNodeData,
-      dropNode: TreeNodeData,
-      dropPosition: number
-    }) => {
-    try {
-      emits('loading', true);
-      // 移动
-      await moveHostGroup({
-        id: dragNode.key as number,
-        targetId: dropNode.key as number,
-        position: dropPosition
-      });
-      // 移动分组
-      moveNode(treeData.value, dragNode, dropNode, dropPosition);
-    } catch (e) {
-    } finally {
-      emits('loading', false);
-    }
-  };
-
-  // 加载数据
-  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);
-      }
-    }
-    // 未选择则选择首个
-    if (!tree.value?.getSelectedNodes()?.length && treeData.value.length) {
-      await nextTick(() => {
-        tree.value?.selectNode(treeData.value[0].key);
-        emits('selectNode', treeData.value[0]);
-      });
-    }
-  };
-
-  defineExpose({ addRootNode, fetchTreeData });
-
-  onMounted(() => {
-    fetchTreeData();
-  });
-
-</script>
-
-<style lang="less" scoped>
-  .tree-container {
-    min-width: 100%;
-    width: max-content;
-    user-select: none;
-  }
-
-  .empty-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    height: 100%;
-    padding-top: 25px;
-    color: var(--color-text-3);
-  }
-
-  :deep(.arco-tree-node) {
-    cursor: unset;
-
-    .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);
-
-    &:hover {
-      background-color: var(--color-fill-1);
-    }
-  }
-
-  :deep(.arco-tree-node-title) {
-    padding: 0 68px 0 0;
-    height: 32px;
-
-    &:hover {
-      background-color: var(--color-fill-1);
-    }
-
-    .arco-tree-node-title-text {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-    }
-  }
-
-  .node-title-wrapper {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    padding-left: 8px;
-  }
-
-  .tree-icon {
-    font-size: 12px;
-    color: rgb(var(--primary-6));
-  }
-
-</style>
diff --git a/orion-ops-ui/src/views/asset/grant/components/host-group-view-user-grant.vue b/orion-ops-ui/src/views/asset/grant/components/host-group-user-grant.vue
similarity index 55%
rename from orion-ops-ui/src/views/asset/grant/components/host-group-view-user-grant.vue
rename to orion-ops-ui/src/views/asset/grant/components/host-group-user-grant.vue
index e6281ff0..164cfa21 100644
--- a/orion-ops-ui/src/views/asset/grant/components/host-group-view-user-grant.vue
+++ b/orion-ops-ui/src/views/asset/grant/components/host-group-user-grant.vue
@@ -1,20 +1,8 @@
 <template>
   <a-spin :loading="loading" class="grant-container">
-    <!-- 左侧用户列表 -->
-    <div class="user-container">
-      <!-- 用户列表 -->
-      <tab-router v-if="usersRouter.length"
-                  class="user-router"
-                  v-model="userId"
-                  :items="usersRouter" />
-      <!-- 暂无数据 -->
-      <a-empty v-else class="user-empty">
-        <div slot="description">
-          暂无用户数据
-        </div>
-      </a-empty>
-    </div>
-    <!-- 右侧菜单列表 -->
+    <!-- 用户列表 -->
+    <router-users v-model="userId" @change="fetchAuthorizedGroup" />
+    <!-- 分组列表 -->
     <div class="group-container">
       <!-- 顶部 -->
       <div class="group-header">
@@ -25,28 +13,26 @@
             <span class="ml4">若当前选择的用户角色包含管理员则无需配置 (管理员拥有全部权限)</span>
           </span>
         </a-alert>
-        <!-- 保存 -->
-        <a-button class="save-button"
+        <!-- 授权 -->
+        <a-button class="grant-button"
                   type="primary"
-                  @click="save">
-          保存
+                  @click="doGrant">
+          授权
           <template #icon>
-            <icon-check />
+            <icon-safe />
           </template>
         </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="e => selectedGroup = e"
-                           @update:checked-keys="updateCheckedGroups" />
-        </div>
+        <!-- 分组 -->
+        <host-group-tree outer-class="group-main-tree"
+                         :checked-keys="checkedGroups"
+                         :draggable="false"
+                         :loading="loading"
+                         @loading="setLoading"
+                         @select-node="e => selectedGroup = e"
+                         @update:checked-keys="updateCheckedGroups" />
         <!-- 主机列表 -->
         <host-list class="group-main-hosts"
                    :group="selectedGroup" />
@@ -62,32 +48,27 @@
 </script>
 
 <script lang="ts" setup>
-  import type { TabRouterItem } from '@/components/view/tab-router/types';
   import type { TreeNodeData } from '@arco-design/web-vue';
-  import { ref, onMounted, watch } from 'vue';
-  import { useCacheStore } from '@/store';
+  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 './host-group-tree.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 cacheStore = useCacheStore();
 
   const userId = ref();
   const currentUser = ref();
-  const usersRouter = ref<Array<TabRouterItem>>([]);
   const authorizedGroups = ref<Array<number>>([]);
   const checkedGroups = ref<Array<number>>([]);
   const selectedGroup = ref<TreeNodeData>({});
 
-  // 监听用户变更 获取授权列表
-  watch(userId, async (value) => {
-    if (!value) {
-      return;
-    }
-    currentUser.value = usersRouter.value.find(s => s.key === value);
+  // 获取授权列表
+  const fetchAuthorizedGroup = async (id: number, user: any) => {
+    userId.value = id;
+    currentUser.value = user;
     setLoading(true);
     try {
       const { data } = await getAuthorizedHostGroup({
@@ -99,82 +80,66 @@
     } finally {
       setLoading(false);
     }
-  });
+  };
 
   // 选择分组
   const updateCheckedGroups = (e: Array<number>) => {
     checkedGroups.value = e;
   };
 
-  // 保存
-  const save = async () => {
+  // 授权
+  const doGrant = async () => {
     setLoading(true);
     try {
       await grantHostGroup({
         userId: userId.value,
         idList: checkedGroups.value
       });
-      Message.success('保存成功');
+      Message.success('授权成功');
     } catch (e) {
     } finally {
       setLoading(false);
     }
   };
 
-  // 加载主机
-  onMounted(() => {
-    usersRouter.value = cacheStore.users.map(s => {
-      return {
-        key: s.id,
-        text: `${s.nickname} (${s.username})`
-      };
-    });
-  });
-
 </script>
 
 <style lang="less" scoped>
   .grant-container {
     width: 100%;
+    height: 100%;
     display: flex;
-
-    .user-container {
-      margin-right: 16px;
-
-      .user-router {
-        height: 100%;
-        min-width: max-content;
-        border-right: 1px var(--color-neutral-3) solid;
-      }
-
-      .user-empty {
-        width: 198px;
-      }
-    }
+    padding: 0 12px 12px 0;
 
     .group-container {
+      position: relative;
       width: 100%;
+      height: 100%;
 
       .group-header {
         display: flex;
         justify-content: space-between;
-        margin-bottom: 12px;
+        margin-bottom: 16px;
         align-items: center;
 
         .alert-wrapper {
           padding: 4px 16px;
         }
 
-        .save-button {
+        .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;
         }
 
@@ -185,8 +150,4 @@
     }
   }
 
-  :deep(.tab-item) {
-    margin-left: 0;
-  }
-
 </style>
diff --git a/orion-ops-ui/src/views/asset/grant/components/host-list.vue b/orion-ops-ui/src/views/asset/grant/components/host-list.vue
index 4aa3ffcc..ba475dc1 100644
--- a/orion-ops-ui/src/views/asset/grant/components/host-list.vue
+++ b/orion-ops-ui/src/views/asset/grant/components/host-list.vue
@@ -1,5 +1,6 @@
 <template>
   <a-list size="small"
+          max-height="100%"
           :hoverable="true"
           :data="selectedGroupHosts"
           :loading="loading">
@@ -35,8 +36,10 @@
   import type { PropType } from 'vue';
   import useLoading from '@/hooks/loading';
   import { useCacheStore } from '@/store';
-  import { ref, watch } from 'vue';
+  import { onBeforeMount, ref, watch } from 'vue';
   import { getHostGroupRelList } from '@/api/asset/host-group';
+  import { getHostList } from '@/api/asset/host';
+  import { Message } from '@arco-design/web-vue';
 
   const props = defineProps({
     group: {
@@ -63,12 +66,37 @@
       const { data } = await getHostGroupRelList(groupId as number);
       selectedGroupHosts.value = data.map(s => cacheStore.hosts.find(h => h.id === s) as HostQueryResponse)
         .filter(Boolean);
+      for (let i = 1800; i < 2000; i++) {
+        selectedGroupHosts.value.push({
+          id: i,
+          name: i + '',
+          code: i + '',
+        } as any);
+      }
     } catch (e) {
     } finally {
       setLoading(false);
     }
   });
 
+  // 加载主机列表
+  const loadHostList = async () => {
+    try {
+      const { data } = await getHostList();
+      // 设置到缓存
+      cacheStore.set('hosts', data);
+    } catch (e) {
+      Message.error('主机列表加载失败');
+    }
+  };
+
+  onBeforeMount(async () => {
+    if (!cacheStore.hosts.length) {
+      // 加载用户列表
+      await loadHostList();
+    }
+  });
+
 </script>
 
 <style lang="less" scoped>
@@ -80,14 +108,15 @@
   }
 
   .host-list-empty {
-    padding: 24px;
+    padding: 16px 24px;
     text-align: center;
     color: var(--color-text-2);
     display: block;
   }
 
-  :deep(.arco-list-wrapper .arco-list-spin) {
-    height: unset;
+  :deep(.arco-scrollbar) {
+    width: 100%;
+    height: 100%;
   }
 
   :deep(.arco-list-item-content) {
diff --git a/orion-ops-ui/src/views/asset/grant/components/router-roles.vue b/orion-ops-ui/src/views/asset/grant/components/router-roles.vue
new file mode 100644
index 00000000..45e33970
--- /dev/null
+++ b/orion-ops-ui/src/views/asset/grant/components/router-roles.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="role-container">
+    <!-- 角色列表 -->
+    <tab-router v-if="rolesRouter.length"
+                class="role-router"
+                v-model="value"
+                :items="rolesRouter"
+                @change="(key, item) => emits('change', key, item)" />
+    <!-- 暂无数据 -->
+    <a-empty v-else class="role-empty">
+      <div slot="description">
+        暂无角色数据
+      </div>
+    </a-empty>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'router-roles'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { TabRouterItem } from '@/components/view/tab-router/types';
+  import { computed, onMounted, ref } from 'vue';
+  import { useCacheStore } from '@/store';
+  import { getRoleList } from '@/api/user/role';
+  import { Message } from '@arco-design/web-vue';
+
+  const props = defineProps({
+    modelValue: Number
+  });
+
+  const emits = defineEmits(['update:modelValue', 'change']);
+
+  const cacheStore = useCacheStore();
+
+  const rolesRouter = ref<Array<TabRouterItem>>([]);
+
+  const value = computed({
+    get() {
+      return props.modelValue;
+    },
+    set(e) {
+      emits('update:modelValue', e);
+    }
+  });
+
+  // 加载角色列表
+  const loadRoleList = async () => {
+    try {
+      const { data } = await getRoleList();
+      // 设置到缓存
+      cacheStore.set('roles', data);
+    } catch (e) {
+      Message.error('角色列表加载失败');
+    }
+  };
+
+  // 加载主机
+  onMounted(async () => {
+    if (!cacheStore.roles.length) {
+      await loadRoleList();
+    }
+    rolesRouter.value = cacheStore.roles.map(s => {
+      return {
+        key: s.id,
+        text: `${s.name} (${s.code})`,
+        code: s.code
+      };
+    });
+  });
+
+</script>
+
+<style lang="less" scoped>
+  .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;
+    }
+  }
+</style>
diff --git a/orion-ops-ui/src/views/asset/grant/components/router-users.vue b/orion-ops-ui/src/views/asset/grant/components/router-users.vue
new file mode 100644
index 00000000..e717be19
--- /dev/null
+++ b/orion-ops-ui/src/views/asset/grant/components/router-users.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="user-container">
+    <!-- 用户列表 -->
+    <tab-router v-if="usersRouter.length"
+                class="user-router"
+                v-model="value"
+                :items="usersRouter"
+                @change="(key, item) => emits('change', key, item)" />
+    <!-- 暂无数据 -->
+    <a-empty v-else class="user-empty">
+      <div slot="description">
+        暂无用户数据
+      </div>
+    </a-empty>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'router-users'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { TabRouterItem } from '@/components/view/tab-router/types';
+  import { computed, onMounted, ref } from 'vue';
+  import { useCacheStore } from '@/store';
+  import { getUserList } from '@/api/user/user';
+  import { Message } from '@arco-design/web-vue';
+
+  const props = defineProps({
+    modelValue: Number
+  });
+
+  const emits = defineEmits(['update:modelValue', 'change']);
+
+  const cacheStore = useCacheStore();
+
+  const usersRouter = ref<Array<TabRouterItem>>([]);
+
+  const value = computed({
+    get() {
+      return props.modelValue;
+    },
+    set(e) {
+      emits('update:modelValue', e);
+    }
+  });
+
+  // 加载用户列表
+  const loadUserList = async () => {
+    try {
+      const { data } = await getUserList();
+      // 设置到缓存
+      cacheStore.set('users', data);
+    } catch (e) {
+      Message.error('用户列表加载失败');
+    }
+  };
+
+  // 加载主机
+  onMounted(async () => {
+    if (!cacheStore.users.length) {
+      await loadUserList();
+    }
+    usersRouter.value = cacheStore.users.map(s => {
+      return {
+        key: s.id,
+        text: `${s.nickname} (${s.username})`
+      };
+    });
+  });
+
+</script>
+
+<style lang="less" scoped>
+  .user-container {
+    margin-right: 16px;
+
+    .user-router {
+      height: 100%;
+      min-width: max-content;
+      border-right: 1px var(--color-neutral-3) solid;
+    }
+
+    .user-empty {
+      width: 198px;
+    }
+  }
+</style>
diff --git a/orion-ops-ui/src/views/asset/grant/index.vue b/orion-ops-ui/src/views/asset/grant/index.vue
index 9b0d86a1..46e9beba 100644
--- a/orion-ops-ui/src/views/asset/grant/index.vue
+++ b/orion-ops-ui/src/views/asset/grant/index.vue
@@ -1,28 +1,21 @@
 <template>
-  <div v-if="render" class="view-container">
-    <a-tabs v-if="render"
-            class="tabs-container"
-            position="left"
-            type="rounded"
+  <div class="view-container">
+    <a-tabs class="tabs-container simple-card"
             size="large"
             :destroy-on-hide="true"
             :justify="true"
             :lazy-load="true">
-      <!-- 角色分配 -->
-      <a-tab-pane :key="1" v-permission="['asset:host-group:grant']">
-        <host-group-view-role-grant />
-        <template #title>
-          <icon-safe />
-          角色授权
-        </template>
+      <!-- 主机分组授权(角色) -->
+      <a-tab-pane :key="1"
+                  v-permission="['asset:host-group:grant']"
+                  title="主机分组授权(角色)">
+        <host-group-role-grant />
       </a-tab-pane>
-      <!-- 用户分配 -->
-      <a-tab-pane :key="2" v-permission="['asset:host-group:grant']">
-        <host-group-view-user-grant />
-        <template #title>
-          <icon-user />
-          用户授权2323
-        </template>
+      <!-- 主机分组授权(用户) -->
+      <a-tab-pane :key="2"
+                  v-permission="['asset:host-group:grant']"
+                  title="主机分组授权(用户)">
+        <host-group-user-grant />
       </a-tab-pane>
     </a-tabs>
   </div>
@@ -37,28 +30,14 @@
 <script lang="ts" setup>
   import { ref, onBeforeMount, onUnmounted } from 'vue';
   import { useCacheStore } from '@/store';
-  import { getHostList } from '@/api/asset/host';
   import { Message } from '@arco-design/web-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';
+  import HostGroupRoleGrant from './components/host-group-role-grant.vue';
+  import HostGroupUserGrant from './components/host-group-user-grant.vue';
 
   const render = ref(false);
   const cacheStore = useCacheStore();
-  const { hasPermission } = usePermission();
-
-  // 加载主机列表
-  const loadHostList = async () => {
-    try {
-      const { data } = await getHostList();
-      // 设置到缓存
-      cacheStore.set('hosts', data);
-    } catch (e) {
-      Message.error('主机列表加载失败');
-    }
-  };
 
   // 加载用户列表
   const loadUserList = async () => {
@@ -71,32 +50,6 @@
     }
   };
 
-  // 加载角色列表
-  const loadRoleList = async () => {
-    try {
-      const { data } = await getRoleList();
-      // 设置到缓存
-      cacheStore.set('roles', data);
-    } catch (e) {
-      Message.error('角色列表加载失败');
-    }
-  };
-
-  onBeforeMount(async () => {
-    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('users', 'roles', 'hosts', 'hostGroups');
@@ -114,17 +67,8 @@
   }
 
   .tabs-container {
-    display: flex;
-    width: calc(100% - 32px);
-    max-height: calc(100% - 32px);
-    position: absolute;
-    background: var(--color-bg-2);
-    padding: 16px;
-  }
-
-  :deep(.arco-tabs-nav-tab) {
-    border-right: 1px var(--color-neutral-3) solid;
-    padding-right: 16px;
+    width: 100%;
+    height: 100%;
   }
 
   :deep(.arco-tabs-tab-title) {
diff --git a/orion-ops-ui/src/views/asset/host-list/components/group/host-group-drawer.vue b/orion-ops-ui/src/views/asset/host-list/components/group/host-group-drawer.vue
index f6b3aa74..b7975c02 100644
--- a/orion-ops-ui/src/views/asset/host-list/components/group/host-group-drawer.vue
+++ b/orion-ops-ui/src/views/asset/host-list/components/group/host-group-drawer.vue
@@ -39,12 +39,11 @@
             </div>
           </div>
           <!-- 主机分组树 -->
-          <div class="tree-card-main">
-            <host-group-tree ref="tree"
-                             :loading="loading"
-                             @loading="setLoading"
-                             @select-node="selectGroup" />
-          </div>
+          <host-group-tree outer-class="tree-card-main"
+                           ref="tree"
+                           :loading="loading"
+                           @loading="setLoading"
+                           @select-node="selectGroup" />
         </div>
         <!-- 身体部分 -->
         <a-spin class="simple-card transfer-body"
@@ -189,10 +188,10 @@
     }
 
     &-main {
-      padding: 8px 8px 8px 16px;
+      padding: 8px;
       position: relative;
       width: 100%;
-      height: calc(100% - 48px);
+      height: calc(100% - 44px);
       overflow: auto;
     }
   }