feat: 修改主机分组配置.

2023-12-01 01:54:50 +08:00
parent 875c873622
commit a76bc1ef54
31 changed files with 9003 additions and 7797 deletions
--- a/orion-ops-ui/src/assets/style/global.less
+++ b/orion-ops-ui/src/assets/style/global.less
@@ -98,6 +98,14 @@ body {
  user-select: none;
 }

+.arco-drawer-header {
+  border-bottom: unset;
+}
+
+.arco-drawer-footer {
+  border-top: unset;
+}
+
 .arco-drawer-container.drawer-body-padding-0 {
  .arco-drawer-body {
    padding: 0 !important;
--- a/orion-ops-ui/src/assets/style/layout.less
+++ b/orion-ops-ui/src/assets/style/layout.less
@@ -1,6 +1,5 @@
 // -- container
 .layout-container {
-  background-color: var(--color-fill-2);
  padding: 16px;
  display: flex;
  flex-direction: column;
@@ -114,6 +113,12 @@
  padding: 0 4px;
 }

+.card-header-icon-wrapper {
+  height: 27px;
+  padding: 6px;
+  user-select: none;
+}
+
 // -- card
 .simple-card {
  background: var(--color-bg-2);
--- 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
@@ -0,0 +1,412 @@
+<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>
--- a/orion-ops-ui/src/components/asset/host-group/types/const.ts
+++ b/orion-ops-ui/src/components/asset/host-group/types/const.ts
@@ -0,0 +1,5 @@
+// 创建前缀
+export const createGroupGroupPrefix = 'create-';
+
+// 根id
+export const rootId = 0;
--- a/orion-ops-ui/src/components/view/card-list/index.vue
+++ b/orion-ops-ui/src/components/view/card-list/index.vue
@@ -26,8 +26,8 @@
            <a-space>
              <!-- 创建 -->
              <div v-permission="addPermission"
-                   v-show="!handleVisible.disableAdd"
-                   class="click-icon-wrapper header-icon-wrapper"
+                   v-if="!handleVisible.disableAdd"
+                   class="click-icon-wrapper card-header-icon-wrapper"
                   title="创建"
                   @click="emits('add')">
                <icon-plus />
@@ -57,7 +57,7 @@
              <a-popover position="br" trigger="click" content-class="card-filter-wrapper">
                <div v-if="!handleVisible.disableFilter"
                     ref="filterRef"
-                     class="click-icon-wrapper header-icon-wrapper"
+                     class="click-icon-wrapper card-header-icon-wrapper"
                     title="选择过滤条件">
                  <a-badge :count="filterCount" :dot-style="{zoom: '.75'}" :offset="[9, -6]">
                    <icon-filter />
@@ -77,14 +77,14 @@
              </a-popover>
              <!-- 搜索 -->
              <div v-if="!handleVisible.disableSearch"
-                   class="click-icon-wrapper header-icon-wrapper"
+                   class="click-icon-wrapper card-header-icon-wrapper"
                   title="搜索"
                   @click="emits('search')">
                <icon-search />
              </div>
              <!-- 重置 -->
              <div v-if="!handleVisible.disableReset"
-                   class="click-icon-wrapper header-icon-wrapper"
+                   class="click-icon-wrapper card-header-icon-wrapper"
                   title="重置"
                   @click="emits('reset')">
                <icon-refresh />
@@ -377,6 +377,8 @@
      margin: -16px -16px 0 -16px;
      padding: 16px 16px 12px 16px;
      position: fixed;
+      // FIXME 颜色不对   文件拆了
+      background: var(--color-fill-2);
      z-index: 999;
      height: @top-height;
      transition: none;
@@ -430,11 +432,6 @@
    }
  }

-  .header-icon-wrapper {
-    height: 27px;
-    padding: 6px;
-  }
-
  .filter-bottom-container {
    display: flex;
    justify-content: flex-end;
--- a/orion-ops-ui/src/layout/default-layout.vue
+++ b/orion-ops-ui/src/layout/default-layout.vue
@@ -36,7 +36,7 @@
        <!-- 页签 -->
        <TabBar v-if="appStore.tabBar" />
        <!-- 页面 -->
-        <a-layout-content>
+        <a-layout-content style="height: 100%; width: 100%;">
          <!-- 水印 -->
          <a-watermark :grayscale="true"
                       :alpha=".6"
@@ -47,7 +47,7 @@
          </a-watermark>
        </a-layout-content>
        <!-- 页脚 -->
-        <Footer v-if="footer" />
+        <Footer v-if="visibleFooter" />
      </a-layout>
    </a-layout>
  </a-layout>
@@ -75,7 +75,7 @@
  const navbar = computed(() => appStore.navbar);
  const renderMenu = computed(() => appStore.menu && !appStore.topMenu);
  const hideMenu = computed(() => appStore.hideMenu);
-  const footer = computed(() => appStore.footer);
+  const visibleFooter = computed(() => appStore.footer);
  const menuWidth = computed(() => {
    return appStore.menuCollapse ? 48 : appStore.menuWidth;
  });
--- a/orion-ops-ui/src/router/routes/modules/asset.ts
+++ b/orion-ops-ui/src/router/routes/modules/asset.ts
@@ -7,13 +7,9 @@ const ASSET: AppRouteRecordRaw = {
  component: DEFAULT_LAYOUT,
  children: [
    {
-      name: 'assetHostGroup',
-      path: '/asset/host-group',
-      component: () => import('@/views/asset/host-group/index.vue'),
-    }, {
-      name: 'assetHost',
-      path: '/asset/host',
-      component: () => import('@/views/asset/host/index.vue'),
+      name: 'assetHostList',
+      path: '/asset/host-list',
+      component: () => import('@/views/asset/host-list/index.vue'),
    }, {
      name: 'assetHostKey',
      path: '/asset/host-key',
@@ -22,6 +18,10 @@ const ASSET: AppRouteRecordRaw = {
      name: 'assetHostIdentity',
      path: '/asset/host-identity',
      component: () => import('@/views/asset/host-identity/index.vue'),
+    }, {
+      name: 'assetGrant',
+      path: '/asset/grant',
+      component: () => import('@/views/asset/grant/index.vue'),
    },
  ],
 };
--- a/orion-ops-ui/src/views/asset/host-group/index.vue
+++ b/orion-ops-ui/src/views/asset/host-group/index.vue
@@ -2,17 +2,18 @@
  <div v-if="render" class="view-container">
    <a-tabs v-if="render"
            class="tabs-container"
-            size="large"
-            :default-active-key="1"
+            position="left"
            :destroy-on-hide="true"
            :justify="true"
            :lazy-load="true">
      <!-- 左侧导航 -->
-      <a-tab-pane :key="1" v-permission="['asset:host-group:query']">
+      <a-tab-pane :key="1"
+                  title="分组配置"
+                  v-permission="['asset:host-group:query']">
        <host-group-view-setting />
        <template #title>
          <icon-unordered-list />
-          分组配置
+
        </template>
      </a-tab-pane>
      <!-- 角色分配 -->
@@ -28,7 +29,7 @@
        <host-group-view-user-grant />
        <template #title>
          <icon-user />
-          用户授权
+          用户授权2323
        </template>
      </a-tab-pane>
    </a-tabs>
@@ -37,7 +38,7 @@

 <script lang="ts">
  export default {
-    name: 'assetHostGroup'
+    name: 'assetGrant'
  };
 </script>

@@ -129,7 +130,7 @@
    background: var(--color-bg-2);
  }

-  :deep(.arco-tabs-tab-title){
+  :deep(.arco-tabs-tab-title) {
    user-select: none;
  }

--- a/orion-ops-ui/src/views/asset/grant/types/const.ts
+++ b/orion-ops-ui/src/views/asset/grant/types/const.ts
--- 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
@@ -67,7 +67,7 @@
  import { ref, onMounted, watch } from 'vue';
  import { useCacheStore } from '@/store';
  import useLoading from '@/hooks/loading';
-  import { getAuthorizedHostGroup, grantHostGroup } from '@/api/asset/host-group';
+  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';
@@ -113,7 +113,7 @@
    try {
      await grantHostGroup({
        roleId: roleId.value,
-        groupIdList: checkedGroups.value
+        idList: checkedGroups.value
      });
      Message.success('保存成功');
    } catch (e) {
--- 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
@@ -1,143 +0,0 @@
-<template>
-  <!-- 左侧菜单 -->
-  <a-spin class="simple-card tree-card"
-          :loading="treeLoading">
-    <!-- 主机分组头部 -->
-    <div class="tree-card-header">
-      <!-- 标题 -->
-      <div class="tree-card-title">
-        主机菜单
-      </div>
-      <!-- 操作 -->
-      <div class="tree-card-handler">
-        <div v-permission="['asset:host-group:create']"
-             class="click-icon-wrapper handler-icon-wrapper"
-             title="根节点添加"
-             @click="addRootNode">
-          <icon-plus />
-        </div>
-        <div class="click-icon-wrapper handler-icon-wrapper"
-             title="刷新"
-             @click="refreshTree">
-          <icon-refresh />
-        </div>
-      </div>
-    </div>
-    <!-- 主机分组树 -->
-    <div class="tree-card-main">
-      <host-group-tree ref="tree"
-                       :loading="treeLoading"
-                       @loading="setTreeLoading"
-                       @select-node="selectGroup" />
-    </div>
-  </a-spin>
-  <!-- 身体部分 -->
-  <a-spin class="simple-card transfer-body"
-          :loading="dataLoading">
-    <host-transfer ref="transfer"
-                   :group="currentGroup"
-                   @loading="setDataLoading" />
-  </a-spin>
-</template>
-
-<script lang="ts">
-  export default {
-    name: 'host-group-view-setting'
-  };
-</script>
-
-<script lang="ts" setup>
-  import type { TreeNodeData } from '@arco-design/web-vue';
-  import { ref } from 'vue';
-  import useLoading from '@/hooks/loading';
-  import HostGroupTree from './host-group-tree.vue';
-  import HostTransfer from './host-transfer.vue';
-
-  const { loading: treeLoading, setLoading: setTreeLoading } = useLoading();
-  const { loading: dataLoading, setLoading: setDataLoading } = useLoading();
-
-  const tree = ref();
-  const transfer = ref();
-  const currentGroup = ref();
-
-  // 添加根节点
-  const addRootNode = () => {
-    tree.value.addRootNode();
-  };
-
-  // 刷新树
-  const refreshTree = () => {
-    tree.value.fetchTreeData(true);
-  };
-
-  // 选中分组
-  const selectGroup = (group: TreeNodeData) => {
-    currentGroup.value = group;
-  };
-
-</script>
-
-<style lang="less" scoped>
-  @tree-width: 30%;
-
-  .tree-card {
-    padding: 0 0 16px 8px;
-    width: @tree-width;
-    height: 100%;
-    position: absolute;
-
-    &-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding-left: 16px;
-      position: relative;
-      width: 100%;
-      height: 44px;
-      border-bottom: 1px var(--color-border-2) solid;
-      user-select: none;
-    }
-
-    &-title {
-      color: rgba(var(--gray-10), .95);
-      font-size: 16px;
-      font-weight: 600;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    &-handler {
-      display: flex;
-
-      .handler-icon-wrapper {
-        margin-left: 2px;
-        padding: 4px;
-        font-size: 16px;
-        background: unset;
-
-        &:hover {
-          background: var(--color-fill-3);
-        }
-      }
-    }
-
-    &-main {
-      padding: 8px 8px 8px 16px;
-      position: relative;
-      width: 100%;
-      height: calc(100% - 48px);
-      overflow: auto;
-    }
-  }
-
-  .transfer-body {
-    display: flex;
-    height: 100%;
-    padding: 12px 16px 16px 16px;
-    width: calc(100% - @tree-width);
-    position: absolute;
-    left: @tree-width;
-  }
-
-</style>
--- a/orion-ops-ui/src/views/asset/host-group/components/host-group-view-user-grant.vue
+++ b/orion-ops-ui/src/views/asset/host-group/components/host-group-view-user-grant.vue
@@ -67,7 +67,7 @@
  import { ref, onMounted, watch } from 'vue';
  import { useCacheStore } from '@/store';
  import useLoading from '@/hooks/loading';
-  import { getAuthorizedHostGroup, grantHostGroup } from '@/api/asset/host-group';
+  import { getAuthorizedHostGroup, grantHostGroup } from '@/api/asset/asset-data-grant';
  import { Message } from '@arco-design/web-vue';
  import HostGroupTree from './host-group-tree.vue';
  import HostList from './host-list.vue';
@@ -112,7 +112,7 @@
    try {
      await grantHostGroup({
        userId: userId.value,
-        groupIdList: checkedGroups.value
+        idList: checkedGroups.value
      });
      Message.success('保存成功');
    } catch (e) {
--- a/orion-ops-ui/src/views/asset/host-list/components/config/host-config-drawer.vue
+++ b/orion-ops-ui/src/views/asset/host-list/components/config/host-config-drawer.vue
@@ -17,7 +17,7 @@
    </template>
    <a-spin :loading="loading" class="host-config-container">
      <!-- SSH 配置 -->
-      <host-config-ssh-form :content="config.SSH" @submitted="(e) => config.SSH.config = e" />
+      <ssh-config-form :content="config.SSH" @submitted="(e) => config.SSH.config = e" />
    </a-spin>
  </a-drawer>
 </template>
@@ -29,16 +29,16 @@
 </script>

 <script lang="ts" setup>
+  import type { HostConfigWrapper } from '../../types/const';
  import { ref, onBeforeMount } from 'vue';
  import useVisible from '@/hooks/visible';
  import useLoading from '@/hooks/loading';
  import { Message } from '@arco-design/web-vue';
  import { getHostConfigAll } from '@/api/asset/host';
-  import HostConfigSshForm from './host-config-ssh-form.vue';
  import { useCacheStore } from '@/store';
  import { getHostKeyList } from '@/api/asset/host-key';
  import { getHostIdentityList } from '@/api/asset/host-identity';
-  import { HostConfigWrapper } from '@/views/asset/host/types/host-config.types';
+  import SshConfigForm from './ssh/ssh-config-form.vue';

  const { visible, setVisible } = useVisible();
  const { loading, setLoading } = useLoading();
--- a/orion-ops-ui/src/views/asset/host-list/components/config/ssh/ssh-config-form.vue
+++ b/orion-ops-ui/src/views/asset/host-list/components/config/ssh/ssh-config-form.vue
@@ -1,6 +1,6 @@
 <template>
  <a-card class="general-card"
-          :body-style="{padding: config.status === 1 ? '' : '0'}">
+          :body-style="{ padding: config.status === 1 ? '' : '0' }">
    <!-- 标题 -->
    <template #title>
      <div class="config-title-wrapper">
@@ -20,7 +20,7 @@
              label-align="right"
              :label-col-props="{ span: 6 }"
              :wrapper-col-props="{ span: 18 }"
-              :rules="sshRules">
+              :rules="rules">
        <!-- 用户名 -->
        <a-form-item field="username"
                     label="用户名"
@@ -133,22 +133,22 @@

 <script lang="ts">
  export default {
-    name: 'host-config-ssh-form'
+    name: 'ssh-config-form'
  };
 </script>

 <script lang="ts" setup>
  import type { FieldRule } from '@arco-design/web-vue';
-  import type { HostSshConfig } from '../types/host-config.types';
+  import type { HostSshConfig } from './types/const';
  import { ref, watch } from 'vue';
  import { updateHostConfigStatus, updateHostConfig } from '@/api/asset/host';
-  import { authTypeKey, AuthType } from '../types/const';
-  import { sshRules } from '../types/host-config.form.rules';
-  import HostKeySelector from '@/components/asset/host-key/host-key-selector.vue';
-  import HostIdentitySelector from '@/components/asset/host-identity/host-identity-selector.vue';
+  import { authTypeKey, AuthType } from './types/const';
+  import rules from './types/form.rules';
  import { Message } from '@arco-design/web-vue';
  import useLoading from '@/hooks/loading';
  import { useDictStore } from '@/store';
+  import HostKeySelector from '@/components/asset/host-key/host-key-selector.vue';
+  import HostIdentitySelector from '@/components/asset/host-identity/host-identity-selector.vue';

  const { loading, setLoading } = useLoading();
  const { toOptions } = useDictStore();
--- a/orion-ops-ui/src/views/asset/host-list/components/config/ssh/types/const.ts
+++ b/orion-ops-ui/src/views/asset/host-list/components/config/ssh/types/const.ts
@@ -1,15 +1,4 @@
-/**
- * 主机所有配置
- */
-export interface HostConfigWrapper {
-  SSH: HostSshConfig | unknown;
-
-  [key: string]: unknown;
-}
-
-/**
- * 主机 SSH 配置
- */
+// 主机 SSH 配置
 export interface HostSshConfig {
  port?: number;
  username?: string;
@@ -24,3 +13,16 @@ export interface HostSshConfig {
  useNewPassword?: boolean;
  hasPassword?: boolean;
 }
+
+// 主机验证方式
+export const AuthType = {
+  // 密码验证
+  PASSWORD: 'PASSWORD',
+  // 秘钥验证
+  KEY: 'KEY',
+  // 身份验证
+  IDENTITY: 'IDENTITY'
+};
+
+// 主机验证方式 字典项
+export const authTypeKey = 'hostAuthTypeType';
--- a/orion-ops-ui/src/views/asset/host-list/components/config/ssh/types/form.rules.ts
+++ b/orion-ops-ui/src/views/asset/host-list/components/config/ssh/types/form.rules.ts
@@ -59,7 +59,7 @@ export const fileContentCharset = [{
  message: '文件内容编码长度不能超过12位'
 }] as FieldRule[];

-export const sshRules = {
+export default {
  port,
  authType,
  keyId,
--- 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
@@ -0,0 +1,221 @@
+<template>
+  <a-drawer v-model:visible="visible"
+            class="host-group-drawer"
+            width="70%"
+            title="主机分组配置"
+            :esc-to-close="false"
+            :mask-closable="false"
+            :unmount-on-close="true"
+            ok-text="保存"
+            cancel-text="关闭"
+            :ok-button-props="{ disabled: loading }"
+            :cancel-button-props="{ disabled: loading }"
+            :on-before-ok="saveHost"
+            @cancel="handleCancel">
+    <a-spin :loading="loading"
+            class="host-group-container">
+      <div class="host-group-wrapper">
+        <!-- 左侧菜单 -->
+        <div class="simple-card tree-card">
+          <!-- 主机分组头部 -->
+          <div class="tree-card-header">
+            <!-- 标题 -->
+            <div class="tree-card-title">
+              主机分组
+            </div>
+            <!-- 操作 -->
+            <div class="tree-card-handler">
+              <div v-permission="['asset:host-group:create']"
+                   class="click-icon-wrapper handler-icon-wrapper"
+                   title="根节点添加"
+                   @click="addRootNode">
+                <icon-plus />
+              </div>
+              <div class="click-icon-wrapper handler-icon-wrapper"
+                   title="刷新"
+                   @click="refreshTree">
+                <icon-refresh />
+              </div>
+            </div>
+          </div>
+          <!-- 主机分组树 -->
+          <div class="tree-card-main">
+            <host-group-tree ref="tree"
+                             :loading="loading"
+                             @loading="setLoading"
+                             @select-node="selectGroup" />
+          </div>
+        </div>
+        <!-- 身体部分 -->
+        <a-spin class="simple-card transfer-body"
+                :loading="hostLoading">
+          <host-transfer v-model="currentGroupHost"
+                         :group="currentGroup"
+                         @loading="setHostLoading" />
+        </a-spin>
+      </div>
+    </a-spin>
+  </a-drawer>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'host-group-drawer'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { TreeNodeData } from '@arco-design/web-vue';
+  import { ref } from 'vue';
+  import useVisible from '@/hooks/visible';
+  import useLoading from '@/hooks/loading';
+  import { useCacheStore } from '@/store';
+  import { Message } from '@arco-design/web-vue';
+  import { updateHostGroupRel } from '@/api/asset/host-group';
+  import HostTransfer from './host-transfer.vue';
+  import HostGroupTree from '@/components/asset/host-group/host-group-tree.vue';
+
+  const { visible, setVisible } = useVisible();
+  const { loading, setLoading } = useLoading();
+  const { loading: hostLoading, setLoading: setHostLoading } = useLoading();
+
+  const cacheStore = useCacheStore();
+
+  const tree = ref();
+  const currentGroup = ref();
+  const currentGroupHost = ref<Array<string>>([]);
+
+  // 打开
+  const open = async () => {
+    setVisible(true);
+  };
+
+  defineExpose({ open });
+
+  // 添加根节点
+  const addRootNode = () => {
+    tree.value.addRootNode();
+  };
+
+  // 刷新树
+  const refreshTree = () => {
+    tree.value.fetchTreeData(true);
+  };
+
+  // 选中分组
+  const selectGroup = (group: TreeNodeData) => {
+    currentGroup.value = group;
+  };
+
+  // 保存主机
+  const saveHost = async () => {
+    setLoading(true);
+    try {
+      await updateHostGroupRel({
+        groupId: currentGroup.value?.key as number,
+        hostIdList: currentGroupHost.value
+      });
+      Message.success('保存成功');
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+    return false;
+  };
+
+  // 关闭
+  const handleCancel = () => {
+    setLoading(false);
+    setVisible(false);
+  };
+
+</script>
+
+<style lang="less" scoped>
+  @tree-width: 30%;
+
+  .host-group-container {
+    width: 100%;
+    height: 100%;
+    background-color: var(--color-fill-2);
+    padding: 16px;
+
+    .host-group-wrapper {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .tree-card {
+    width: @tree-width;
+    height: 100%;
+    position: absolute;
+
+    &-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 8px 0 16px;
+      position: relative;
+      width: 100%;
+      height: 44px;
+      border-bottom: 1px var(--color-border-2) solid;
+      user-select: none;
+    }
+
+    &-title {
+      color: rgba(var(--gray-10), .95);
+      font-size: 16px;
+      font-weight: 600;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    &-handler {
+      display: flex;
+
+      .handler-icon-wrapper {
+        margin-left: 2px;
+        padding: 4px;
+        font-size: 16px;
+        background: unset;
+
+        &:hover {
+          background: var(--color-fill-3);
+        }
+      }
+    }
+
+    &-main {
+      padding: 8px 8px 8px 16px;
+      position: relative;
+      width: 100%;
+      height: calc(100% - 48px);
+      overflow: auto;
+    }
+  }
+
+  .transfer-body {
+    display: flex;
+    height: 100%;
+    padding: 12px 16px 16px 16px;
+    width: calc(100% - @tree-width - 16px);
+    position: absolute;
+    left: calc(@tree-width + 16px);
+  }
+</style>
+
+<style lang="less">
+  .host-group-drawer {
+    .arco-drawer-footer {
+      padding: 8px;
+    }
+
+    .arco-drawer-body {
+      padding: 0;
+      overflow: hidden;
+    }
+  }
+</style>
--- a/orion-ops-ui/src/views/asset/host-list/components/group/host-transfer.vue
+++ b/orion-ops-ui/src/views/asset/host-list/components/group/host-transfer.vue
@@ -1,30 +1,5 @@
 <template>
  <div class="transfer-container">
-    <!-- 头部 -->
-    <div class="transfer-header">
-      <!-- 提示 -->
-      <a-alert class="alert-wrapper" :show-icon="false">
-        <!-- 已选中分组 -->
-        <template v-if="group.key">
-          <span>当前编辑的分组为 <span class="span-blue">{{ group.title }}</span></span>
-        </template>
-        <!-- 未选中分组 -->
-        <template v-else>
-          <span>点击左侧分组即可加载组内数据</span>
-        </template>
-      </a-alert>
-      <!-- 保存按钮 -->
-      <a-button v-permission="['asset:host:update']"
-                class="save-button"
-                type="primary"
-                :disabled="!group.key"
-                @click="save">
-        保存
-        <template #icon>
-          <icon-check />
-        </template>
-      </a-button>
-    </div>
    <!-- 传输框 -->
    <a-transfer v-model="value"
                :data="data"
@@ -75,12 +50,17 @@
  import type { TransferItem } from '@arco-design/web-vue/es/transfer/interface';
  import type { TreeNodeData } from '@arco-design/web-vue';
  import type { PropType } from 'vue';
-  import { onMounted, ref, watch } from 'vue';
+  import { onMounted, ref, watch, computed } from 'vue';
  import { useCacheStore } from '@/store';
  import { getHostGroupRelList, updateHostGroupRel } from '@/api/asset/host-group';
  import { Message } from '@arco-design/web-vue';
+  import { getHostList } from '@/api/asset/host';

  const props = defineProps({
+    modelValue: {
+      type: Array<string>,
+      default: []
+    },
    group: {
      type: Object as PropType<TreeNodeData>,
      default: () => {
@@ -89,12 +69,24 @@
    }
  });

-  const emits = defineEmits(['loading']);
+  const emits = defineEmits(['loading', 'update:modelValue']);

  const cacheStore = useCacheStore();

  const data = ref<Array<TransferItem>>([]);
-  const value = ref<Array<string>>([]);
+
+  const value = computed<Array<string>>({
+    get() {
+      return props.modelValue as Array<string>;
+    },
+    set(e) {
+      if (e) {
+        emits('update:modelValue', e);
+      } else {
+        emits('update:modelValue', []);
+      }
+    }
+  });

  // 渲染 label
  const renderLabel = (label: string) => {
@@ -104,21 +96,6 @@
    return `${prefix} - <span class="span-blue">${ip}</span>`;
  };

-  // 保存
-  const save = async () => {
-    try {
-      emits('loading', true);
-      await updateHostGroupRel({
-        groupId: props.group?.key as number,
-        hostIdList: value.value
-      });
-      Message.success('保存成功');
-    } catch (e) {
-    } finally {
-      emits('loading', false);
-    }
-  };
-
  // 查询组内数据
  watch(() => props.group?.key, async (groupId) => {
    if (groupId) {
@@ -137,8 +114,25 @@
    }
  });

-  // 加载主机
-  onMounted(() => {
+  // 加载主机列表
+  const loadHostList = async () => {
+    emits('loading', true);
+    try {
+      const { data } = await getHostList();
+      // 设置到缓存
+      cacheStore.set('hosts', data);
+    } catch (e) {
+      Message.error('主机列表加载失败');
+    } finally {
+      emits('loading', false);
+    }
+  };
+
+  onMounted(async () => {
+    if (!cacheStore.hosts.length) {
+      // 加载主机列表
+      await loadHostList();
+    }
    data.value = cacheStore.hosts.map(s => {
      return {
        value: String(s.id),
@@ -154,24 +148,10 @@
  .transfer-container {
    width: 100%;
    height: 100%;
-
-    .transfer-header {
-      margin-bottom: 12px;
-      display: flex;
-      align-items: center;
-
-      .alert-wrapper {
-        padding: 4px 16px;
-      }
-
-      .save-button {
-        margin-left: 16px;
-      }
-    }
  }

  :deep(.arco-transfer) {
-    height: calc(100% - 44px);
+    height: 100%;

    .arco-transfer-view {
      width: 100%;
--- a/orion-ops-ui/src/views/asset/host-list/components/host-card-list.vue
+++ b/orion-ops-ui/src/views/asset/host-list/components/host-card-list.vue
@@ -8,11 +8,31 @@
             :pagination="pagination"
             :card-layout-cols="cardColLayout"
             :filter-count="filterCount"
-             :add-permission="['asset:host:create']"
-             @add="emits('openAdd')"
+             :handle-visible="{ disableAdd: true }"
             @reset="reset"
             @search="fetchCardData"
             @page-change="fetchCardData">
+    <!-- 左侧操作 -->
+    <template #leftHandle>
+      <!-- 主机分组 -->
+      <a-button v-permission="['asset:host-group:update']"
+                class="click-icon-wrapper card-header-icon-wrapper"
+                type="primary"
+                title="分组配置"
+                @click="emits('openHostGroup')">
+        主机分组
+        <template #icon>
+          <icon-layers />
+        </template>
+      </a-button>
+      <!-- 创建 -->
+      <div v-permission="['asset:host:create']"
+           class="click-icon-wrapper card-header-icon-wrapper"
+           title="创建"
+           @click="emits('openAdd')">
+        <icon-plus />
+      </div>
+    </template>
    <!-- 过滤条件 -->
    <template #filterContent>
      <a-form :model="formModel"
@@ -150,11 +170,11 @@
  import fieldConfig from '../types/host.card.fields';
  import { deleteHost, getHostPage } from '@/api/asset/host';
  import { Message, Modal } from '@arco-design/web-vue';
-  import { tagColor } from '@/views/asset/host/types/const';
+  import { tagColor } from '../types/const';
  import TagMultiSelector from '@/components/meta/tag/tag-multi-selector.vue';
  import useCopy from '@/hooks/copy';

-  const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig']);
+  const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig', 'openHostGroup']);

  const list = ref<HostQueryResponse[]>([]);

--- a/orion-ops-ui/src/views/asset/host-list/components/host-form-modal.vue
+++ b/orion-ops-ui/src/views/asset/host-list/components/host-form-modal.vue
--- a/orion-ops-ui/src/views/asset/host-list/components/host-table.vue
+++ b/orion-ops-ui/src/views/asset/host-list/components/host-table.vue
@@ -62,6 +62,15 @@
              </a-tag>
            </template>
          </a-checkbox>
+          <!-- 主机分组 -->
+          <a-button type="primary"
+                    v-permission="['asset:host-group:update']"
+                    @click="emits('openHostGroup')">
+            主机分组
+            <template #icon>
+              <icon-layers />
+            </template>
+          </a-button>
          <!-- 新增 -->
          <a-button type="primary"
                    v-permission="['asset:host:create']"
@@ -178,7 +187,7 @@
  const tagSelector = ref();
  const tableRenderData = ref<HostQueryResponse[]>([]);
  const { loading, setLoading } = useLoading();
-  const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig']);
+  const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig', 'openHostGroup']);

  const { copy } = useCopy();
  const { toggle: toggleFavorite } = useFavorite('HOST');
--- a/orion-ops-ui/src/views/asset/host-list/index.vue
+++ b/orion-ops-ui/src/views/asset/host-list/index.vue
@@ -3,47 +3,53 @@
    <!-- 列表-表格 -->
    <host-table v-if="renderTable"
                ref="table"
+                @openHostGroup="() => hostGroup.open()"
                @openAdd="() => modal.openAdd()"
                @openUpdate="(e) => modal.openUpdate(e.id)"
-                @openUpdateConfig="(e) => config.open(e)" />
+                @openUpdateConfig="(e) => hostConfig.open(e)" />
    <!-- 列表-卡片 -->
    <host-card-list v-else
                    ref="card"
+                    @openHostGroup="() => hostGroup.open()"
                    @openAdd="() => modal.openAdd()"
                    @openUpdate="(e) => modal.openUpdate(e.id)"
-                    @openUpdateConfig="(e) => config.open(e)" />
+                    @openUpdateConfig="(e) => hostConfig.open(e)" />
    <!-- 添加修改模态框 -->
    <host-form-modal ref="modal"
                     @added="modalAddCallback"
                     @updated="modalUpdateCallback" />
    <!-- 配置面板 -->
-    <host-config-drawer ref="config" />
+    <host-config-drawer ref="hostConfig" />
+    <!-- 分组配置 -->
+    <host-group-drawer ref="hostGroup" />
  </div>
 </template>

 <script lang="ts">
  export default {
-    name: 'assetHost'
+    name: 'assetHostList'
  };
 </script>

 <script lang="ts" setup>
-  import HostTable from './components/host-table.vue';
-  import HostCardList from '@/views/asset/host/components/host-card-list.vue';
-  import HostFormModal from './components/host-form-modal.vue';
-  import HostConfigDrawer from '@/views/asset/host/components/host-config-drawer.vue';
+  import { computed, ref, onBeforeMount, onUnmounted } from 'vue';
+  import { useAppStore, useCacheStore, useDictStore } from '@/store';
  import { getTagList } from '@/api/meta/tag';
  import { dictKeys } from './types/const';
  import { Message } from '@arco-design/web-vue';
-
-  import { computed, ref, onBeforeMount, onUnmounted } from 'vue';
-  import { useAppStore, useCacheStore, useDictStore } from '@/store';
+  import HostTable from './components/host-table.vue';
+  import HostCardList from './components/host-card-list.vue';
+  import HostFormModal from './components/host-form-modal.vue';
+  import HostConfigDrawer from './components/config/host-config-drawer.vue';
+  import HostGroupDrawer from './components/group/host-group-drawer.vue';

  const render = ref(false);
  const table = ref();
  const card = ref();
  const modal = ref();
-  const config = ref();
+  const hostConfig = ref();
+  const hostGroup = ref();
+
  const appStore = useAppStore();
  const cacheStore = useCacheStore();

@@ -89,7 +95,7 @@

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

 </script>
--- a/orion-ops-ui/src/views/asset/host-list/types/const.ts
+++ b/orion-ops-ui/src/views/asset/host-list/types/const.ts
@@ -0,0 +1,20 @@
+import type { HostSshConfig } from '../components/config/ssh/types/const';
+
+// 主机所有配置
+export interface HostConfigWrapper {
+  SSH: HostSshConfig | unknown;
+
+  [key: string]: unknown;
+}
+
+// tag 颜色
+export const tagColor = [
+  'arcoblue',
+  'green',
+  'purple',
+  'pinkpurple',
+  'magenta'
+];
+
+// 加载的字典值
+export const dictKeys = ['hostAuthTypeType'];
--- a/orion-ops-ui/src/views/asset/host-list/types/host.card.fields.ts
+++ b/orion-ops-ui/src/views/asset/host-list/types/host.card.fields.ts
--- a/orion-ops-ui/src/views/asset/host-list/types/host.form.rules.ts
+++ b/orion-ops-ui/src/views/asset/host-list/types/host.form.rules.ts
--- a/orion-ops-ui/src/views/asset/host-list/types/host.table.columns.ts
+++ b/orion-ops-ui/src/views/asset/host-list/types/host.table.columns.ts
--- a/orion-ops-ui/src/views/asset/host/types/const.ts
+++ b/orion-ops-ui/src/views/asset/host/types/const.ts
@@ -1,24 +0,0 @@
-// tag 颜色
-export const tagColor = [
-  'arcoblue',
-  'green',
-  'purple',
-  'pinkpurple',
-  'magenta'
-];
-
-// 主机验证方式
-export const AuthType = {
-  // 密码验证
-  PASSWORD: 'PASSWORD',
-  // 秘钥验证
-  KEY: 'KEY',
-  // 身份验证
-  IDENTITY: 'IDENTITY'
-};
-
-// 主机验证方式 字典项
-export const authTypeKey = 'hostAuthTypeType';
-
-// 加载的字典值
-export const dictKeys = [authTypeKey];
--- a/orion-ops-ui/src/views/system/menu/types/table.columns.ts
+++ b/orion-ops-ui/src/views/system/menu/types/table.columns.ts
@@ -49,7 +49,7 @@ const columns = [
  }, {
    title: '操作',
    slotName: 'handle',
-    width: 158,
+    width: 162,
    fixed: 'right',
  }
 ] as TableColumnData[];