diff --git a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/service/impl/DataGroupRelServiceImpl.java b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/service/impl/DataGroupRelServiceImpl.java
index 6e30e4f4..08956199 100644
--- a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/service/impl/DataGroupRelServiceImpl.java
+++ b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/service/impl/DataGroupRelServiceImpl.java
@@ -256,18 +256,27 @@ public class DataGroupRelServiceImpl implements DataGroupRelService {
         if (Strings.isBlank(type) || Lists.isEmpty(relIdList)) {
             return 0;
         }
-        // 查询 group
-        List<Long> groupIdList = dataGroupRelDAO.of()
+        // 查询需要删除的数据
+        List<DataGroupRelDO> rows = dataGroupRelDAO.of()
                 .createWrapper()
                 .eq(DataGroupRelDO::getType, type)
                 .in(DataGroupRelDO::getRelId, relIdList)
                 .then()
-                .stream()
+                .list();
+        if (rows.isEmpty()) {
+            return 0;
+        }
+        // 需要删除的 id
+        List<Long> idList = rows.stream()
+                .map(DataGroupRelDO::getId)
+                .collect(Collectors.toList());
+        // 需要删除的 groupId
+        List<Long> groupIdList = rows.stream()
                 .map(DataGroupRelDO::getGroupId)
                 .distinct()
                 .collect(Collectors.toList());
         // 删除数据库
-        int effect = dataGroupRelDAO.deleteBatchIds(relIdList);
+        int effect = dataGroupRelDAO.deleteBatchIds(idList);
         // 删除缓存
         this.deleteCache(type, groupIdList);
         return effect;
diff --git a/orion-ops-ui/src/components/asset/host-group/host-group-tree-selector.vue b/orion-ops-ui/src/components/asset/host-group/host-group-tree-selector.vue
new file mode 100644
index 00000000..62ad26f5
--- /dev/null
+++ b/orion-ops-ui/src/components/asset/host-group/host-group-tree-selector.vue
@@ -0,0 +1,62 @@
+<template>
+  <a-tree-select v-model="value"
+                 :multiple="true"
+                 :data="treeData"
+                 placeholder="请选择主机分组"
+                 :allow-clear="true"
+                 :allow-search="true">
+  </a-tree-select>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'host-group-tree-selector'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { TreeNodeData } from '@arco-design/web-vue';
+  import type { PropType } from 'vue';
+  import { computed, onBeforeMount, ref } from 'vue';
+  import { useCacheStore } from '@/store';
+  import { getHostGroupTree } from '@/api/asset/host-group';
+
+  const props = defineProps({
+    modelValue: Array as PropType<Array<Number>>,
+  });
+
+  const emits = defineEmits(['update:modelValue']);
+
+  const cacheStore = useCacheStore();
+
+  const value = computed<Array<number>>({
+    get() {
+      return props.modelValue as Array<number>;
+    },
+    set(e) {
+      if (e) {
+        emits('update:modelValue', e);
+      } else {
+        emits('update:modelValue', null);
+      }
+    }
+  });
+  const treeData = ref<Array<TreeNodeData>>([]);
+
+  // 初始化选项
+  onBeforeMount(async () => {
+    if (cacheStore.hostGroups.length) {
+      treeData.value = cacheStore.hostGroups;
+    } else {
+      // 加载数据
+      const { data } = await getHostGroupTree();
+      treeData.value = data;
+      cacheStore.set('hostGroups', data);
+    }
+  });
+
+</script>
+
+<style lang="less" scoped>
+
+</style>
diff --git a/orion-ops-ui/src/components/asset/host-identity/host-identity-selector.vue b/orion-ops-ui/src/components/asset/host-identity/host-identity-selector.vue
index a8302287..bf0ce623 100644
--- a/orion-ops-ui/src/components/asset/host-identity/host-identity-selector.vue
+++ b/orion-ops-ui/src/components/asset/host-identity/host-identity-selector.vue
@@ -1,6 +1,6 @@
 <template>
   <a-select v-model:model-value="value"
-            :options="optionData()"
+            :options="optionData"
             placeholder="请选择主机身份"
             allow-clear />
 </template>
@@ -13,7 +13,7 @@
 
 <script lang="ts" setup>
   import type { SelectOptionData } from '@arco-design/web-vue';
-  import { computed } from 'vue';
+  import { computed, onBeforeMount, ref } from 'vue';
   import { useCacheStore } from '@/store';
 
   const props = defineProps({
@@ -22,6 +22,8 @@
 
   const emits = defineEmits(['update:modelValue']);
 
+  const cacheStore = useCacheStore();
+
   const value = computed<number>({
     get() {
       return props.modelValue as number;
@@ -34,17 +36,18 @@
       }
     }
   });
+  const optionData = ref<Array<SelectOptionData>>([]);
 
-  // 选项数据
-  const cacheStore = useCacheStore();
-  const optionData = (): SelectOptionData[] => {
-    return cacheStore.hostIdentities.map(s => {
+  // 初始化选项
+  onBeforeMount(() => {
+    optionData.value = cacheStore.hostIdentities.map(s => {
       return {
         label: `${s.name} (${s.username})`,
         value: s.id,
       };
     });
-  };
+  });
+
 </script>
 
 <style lang="less" scoped>
diff --git a/orion-ops-ui/src/components/asset/host-key/host-key-selector.vue b/orion-ops-ui/src/components/asset/host-key/host-key-selector.vue
index 059dd58b..75cb5c04 100644
--- a/orion-ops-ui/src/components/asset/host-key/host-key-selector.vue
+++ b/orion-ops-ui/src/components/asset/host-key/host-key-selector.vue
@@ -1,6 +1,6 @@
 <template>
   <a-select v-model:model-value="value"
-            :options="optionData()"
+            :options="optionData"
             placeholder="请选择主机秘钥"
             allow-clear />
 </template>
@@ -13,7 +13,7 @@
 
 <script lang="ts" setup>
   import type { SelectOptionData } from '@arco-design/web-vue';
-  import { computed } from 'vue';
+  import { computed, onBeforeMount, ref } from 'vue';
   import { useCacheStore } from '@/store';
 
   const props = defineProps({
@@ -22,6 +22,8 @@
 
   const emits = defineEmits(['update:modelValue']);
 
+  const cacheStore = useCacheStore();
+
   const value = computed<number>({
     get() {
       return props.modelValue as number;
@@ -34,17 +36,17 @@
       }
     }
   });
+  const optionData = ref<Array<SelectOptionData>>([]);
 
-  // 选项数据
-  const cacheStore = useCacheStore();
-  const optionData = (): SelectOptionData[] => {
-    return cacheStore.hostKeys.map(s => {
+  // 初始化选项
+  onBeforeMount(() => {
+    optionData.value = cacheStore.hostKeys.map(s => {
       return {
         label: s.name,
         value: s.id,
       };
     });
-  };
+  });
 </script>
 
 <style lang="less" scoped>
diff --git a/orion-ops-ui/src/components/meta/tag/tag-multi-selector.vue b/orion-ops-ui/src/components/meta/tag/tag-multi-selector.vue
index d2ce6def..54e7b6e5 100644
--- a/orion-ops-ui/src/components/meta/tag/tag-multi-selector.vue
+++ b/orion-ops-ui/src/components/meta/tag/tag-multi-selector.vue
@@ -20,7 +20,7 @@
   import type { PropType } from 'vue';
   import type { SelectOptionData } from '@arco-design/web-vue';
   import type { TagCreateRequest } from '@/api/meta/tag';
-  import { ref, computed, onMounted } from 'vue';
+  import { ref, computed, onBeforeMount } from 'vue';
   import { useCacheStore } from '@/store';
   import { Message } from '@arco-design/web-vue';
   import { createTag } from '@/api/meta/tag';
@@ -36,6 +36,8 @@
 
   const emits = defineEmits(['update:modelValue', 'onLimited']);
 
+  const cacheStore = useCacheStore();
+
   const value = computed<Array<number>>({
     get() {
       return props.modelValue as Array<number>;
@@ -45,25 +47,17 @@
       emits('update:modelValue', e);
     }
   });
-
-  // 选项数据
-  const cacheStore = useCacheStore();
   const optionData = ref<SelectOptionData[]>([]);
-  const initOptionData = () => {
+
+  // 初始化选项
+  onBeforeMount(() => {
     const tagCache = cacheStore[props.tagType as string] as Array<any>;
     optionData.value = tagCache.map(s => {
       return {
         label: s.name,
         value: s.id,
       };
-    }) as SelectOptionData[];
-  };
-
-
-  defineExpose({ initOptionData });
-
-  onMounted(() => {
-    initOptionData();
+    });
   });
 
   // 检查是否可以创建tag
diff --git a/orion-ops-ui/src/components/system/dict-key/dict-key-selector.vue b/orion-ops-ui/src/components/system/dict-key/dict-key-selector.vue
index 6b359c33..b2a50010 100644
--- a/orion-ops-ui/src/components/system/dict-key/dict-key-selector.vue
+++ b/orion-ops-ui/src/components/system/dict-key/dict-key-selector.vue
@@ -1,6 +1,6 @@
 <template>
   <a-select v-model:model-value="value as any"
-            :options="optionData()"
+            :options="optionData"
             :allow-search="true"
             :loading="loading"
             :disabled="loading"
@@ -17,7 +17,7 @@
 
 <script lang="ts" setup>
   import type { SelectOptionData } from '@arco-design/web-vue';
-  import { computed } from 'vue';
+  import { computed, onBeforeMount, ref } from 'vue';
   import { useCacheStore } from '@/store';
   import { labelFilter } from '@/types/form';
 
@@ -32,6 +32,9 @@
 
   const emits = defineEmits(['update:modelValue', 'change']);
 
+  // 选项数据
+  const cacheStore = useCacheStore();
+
   const value = computed({
     get() {
       return props.modelValue;
@@ -54,17 +57,17 @@
       }
     }
   });
+  const optionData = ref<Array<SelectOptionData>>([]);
 
-  // 选项数据
-  const cacheStore = useCacheStore();
-  const optionData = (): SelectOptionData[] => {
-    return cacheStore.dictKeys.map(s => {
+  // 初始化选项
+  onBeforeMount(() => {
+    optionData.value = cacheStore.dictKeys.map(s => {
       return {
         label: `${s.keyName} - ${s.description || ''}`,
         value: s.id,
       };
     });
-  };
+  });
 
 </script>
 
diff --git a/orion-ops-ui/src/components/user/role/user-role-selector.vue b/orion-ops-ui/src/components/user/role/user-role-selector.vue
index dfd1d859..a07db8a7 100644
--- a/orion-ops-ui/src/components/user/role/user-role-selector.vue
+++ b/orion-ops-ui/src/components/user/role/user-role-selector.vue
@@ -1,6 +1,6 @@
 <template>
   <a-select v-model:model-value="value as any"
-            :options="optionData()"
+            :options="optionData"
             :allow-search="true"
             :multiple="multiple"
             :loading="loading"
@@ -18,7 +18,7 @@
 <script lang="ts" setup>
   import type { PropType } from 'vue';
   import type { SelectOptionData } from '@arco-design/web-vue';
-  import { computed } from 'vue';
+  import { computed, onBeforeMount, ref } from 'vue';
   import { useCacheStore } from '@/store';
   import { RoleStatus } from '@/views/user/role/types/const';
   import { labelFilter } from '@/types/form';
@@ -31,6 +31,8 @@
 
   const emits = defineEmits(['update:modelValue']);
 
+  const cacheStore = useCacheStore();
+
   const value = computed({
     get() {
       return props.modelValue;
@@ -39,18 +41,18 @@
       emits('update:modelValue', e);
     }
   });
+  const optionData = ref<Array<SelectOptionData>>([]);
 
-  // 选项数据
-  const cacheStore = useCacheStore();
-  const optionData = (): SelectOptionData[] => {
-    return cacheStore.roles.map(s => {
+  // 初始化选项
+  onBeforeMount(() => {
+    optionData.value = cacheStore.roles.map(s => {
       return {
         label: `${s.name} (${s.code})`,
         disabled: s.status === RoleStatus.DISABLED,
         value: s.id,
       };
     });
-  };
+  });
 
 </script>
 
diff --git a/orion-ops-ui/src/components/user/role/user-selector.vue b/orion-ops-ui/src/components/user/role/user-selector.vue
index ce4c5364..4ed574f1 100644
--- a/orion-ops-ui/src/components/user/role/user-selector.vue
+++ b/orion-ops-ui/src/components/user/role/user-selector.vue
@@ -1,6 +1,6 @@
 <template>
   <a-select v-model:model-value="value as any"
-            :options="optionData()"
+            :options="optionData"
             :allow-search="true"
             :multiple="multiple"
             :loading="loading"
@@ -18,7 +18,7 @@
 <script lang="ts" setup>
   import type { PropType } from 'vue';
   import type { SelectOptionData } from '@arco-design/web-vue';
-  import { computed } from 'vue';
+  import { computed, ref, onBeforeMount } from 'vue';
   import { useCacheStore } from '@/store';
   import { labelFilter } from '@/types/form';
 
@@ -30,6 +30,8 @@
 
   const emits = defineEmits(['update:modelValue']);
 
+  const cacheStore = useCacheStore();
+
   const value = computed({
     get() {
       return props.modelValue;
@@ -38,16 +40,18 @@
       emits('update:modelValue', e);
     }
   });
-  // 选项数据
-  const cacheStore = useCacheStore();
-  const optionData = (): SelectOptionData[] => {
-    return cacheStore.users.map(s => {
+  const optionData = ref<Array<SelectOptionData>>([]);
+
+  // 初始化选项
+  onBeforeMount(() => {
+    optionData.value = cacheStore.users.map(s => {
       return {
         label: `${s.nickname} (${s.username})`,
         value: s.id,
       };
     });
-  };
+  });
+
 </script>
 
 <style lang="less" scoped>
diff --git a/orion-ops-ui/src/store/modules/cache/index.ts b/orion-ops-ui/src/store/modules/cache/index.ts
index fcb571ad..97519135 100644
--- a/orion-ops-ui/src/store/modules/cache/index.ts
+++ b/orion-ops-ui/src/store/modules/cache/index.ts
@@ -2,7 +2,7 @@ import type { CacheState } from './types';
 import { defineStore } from 'pinia';
 
 export type CacheType = 'users' | 'menus' | 'roles'
-  | 'host' | 'hostTags' | 'hostKeys' | 'hostIdentities'
+  | 'host' | 'hostGroups' | 'hostTags' | 'hostKeys' | 'hostIdentities'
   | 'dictKeys' | string
 
 export default defineStore('cache', {
@@ -11,6 +11,7 @@ export default defineStore('cache', {
     menus: [],
     roles: [],
     hosts: [],
+    hostGroups: [],
     hostTags: [],
     hostKeys: [],
     hostIdentities: [],
diff --git a/orion-ops-ui/src/store/modules/cache/types.ts b/orion-ops-ui/src/store/modules/cache/types.ts
index c8415a4f..e8192977 100644
--- a/orion-ops-ui/src/store/modules/cache/types.ts
+++ b/orion-ops-ui/src/store/modules/cache/types.ts
@@ -2,10 +2,11 @@ import type { UserQueryResponse } from '@/api/user/user';
 import type { MenuQueryResponse } from '@/api/system/menu';
 import type { RoleQueryResponse } from '@/api/user/role';
 import type { TagQueryResponse } from '@/api/meta/tag';
+import type { HostQueryResponse } from '@/api/asset/host';
+import type { HostGroupQueryResponse } from '@/api/asset/host-group';
 import type { HostKeyQueryResponse } from '@/api/asset/host-key';
 import type { HostIdentityQueryResponse } from '@/api/asset/host-identity';
 import type { DictKeyQueryResponse } from '@/api/system/dict-key';
-import type { HostQueryResponse } from '@/api/asset/host';
 
 export interface CacheState {
   users: UserQueryResponse[];
@@ -13,6 +14,7 @@ export interface CacheState {
   roles: RoleQueryResponse[];
   hostTags: TagQueryResponse[];
   hosts: HostQueryResponse[];
+  hostGroups: HostGroupQueryResponse[];
   hostKeys: HostKeyQueryResponse[];
   hostIdentities: HostIdentityQueryResponse[];
   dictKeys: DictKeyQueryResponse[];
diff --git a/orion-ops-ui/src/views/asset/host/components/host-card-list.vue b/orion-ops-ui/src/views/asset/host/components/host-card-list.vue
index b5f6e1e7..d7a6ea11 100644
--- a/orion-ops-ui/src/views/asset/host/components/host-card-list.vue
+++ b/orion-ops-ui/src/views/asset/host/components/host-card-list.vue
@@ -172,7 +172,7 @@
     address: undefined,
     favorite: undefined,
     tags: undefined,
-    extra: true
+    queryTag: true
   });
 
   // 条件数量
diff --git a/orion-ops-ui/src/views/asset/host/components/host-form-modal.vue b/orion-ops-ui/src/views/asset/host/components/host-form-modal.vue
index 4b7b9bbc..20ddbeeb 100644
--- a/orion-ops-ui/src/views/asset/host/components/host-form-modal.vue
+++ b/orion-ops-ui/src/views/asset/host/components/host-form-modal.vue
@@ -32,6 +32,11 @@
         <a-form-item field="address" label="主机地址">
           <a-input v-model="formModel.address" placeholder="请输入主机地址" />
         </a-form-item>
+        <!-- 主机分组 -->
+        <a-form-item field="groupIdList" label="主机分组">
+          <host-group-tree-selector v-model="formModel.groupIdList"
+                                    placeholder="请选择主机分组" />
+        </a-form-item>
         <!-- 主机标签 -->
         <a-form-item field="tags" label="主机标签">
           <tag-multi-selector v-model="formModel.tags"
@@ -61,8 +66,9 @@
   import formRules from '../types/host.form.rules';
   import { createHost, getHost, updateHost } from '@/api/asset/host';
   import { Message } from '@arco-design/web-vue';
-  import TagMultiSelector from '@/components/meta/tag/tag-multi-selector.vue';
   import { pick } from 'lodash';
+  import TagMultiSelector from '@/components/meta/tag/tag-multi-selector.vue';
+  import HostGroupTreeSelector from '@/components/asset/host-group/host-group-tree-selector.vue';
 
   const { visible, setVisible } = useVisible();
   const { loading, setLoading } = useLoading();
diff --git a/orion-ops-ui/src/views/asset/host/components/host-table.vue b/orion-ops-ui/src/views/asset/host/components/host-table.vue
index 84018d64..245c4cd6 100644
--- a/orion-ops-ui/src/views/asset/host/components/host-table.vue
+++ b/orion-ops-ui/src/views/asset/host/components/host-table.vue
@@ -192,7 +192,7 @@
     address: undefined,
     favorite: undefined,
     tags: undefined,
-    extra: true
+    queryTag: true
   });
 
   // 删除当前行
diff --git a/orion-ops-ui/src/views/asset/host/index.vue b/orion-ops-ui/src/views/asset/host/index.vue
index b5acf328..e7b469e5 100644
--- a/orion-ops-ui/src/views/asset/host/index.vue
+++ b/orion-ops-ui/src/views/asset/host/index.vue
@@ -4,13 +4,13 @@
     <host-table v-if="renderTable"
                 ref="table"
                 @openAdd="() => modal.openAdd()"
-                @openUpdate="(e) => modal.openUpdate(e)"
+                @openUpdate="(e) => modal.openUpdate(e.id)"
                 @openUpdateConfig="(e) => config.open(e)" />
     <!-- 列表-卡片 -->
     <host-card-list v-else
                     ref="card"
                     @openAdd="() => modal.openAdd()"
-                    @openUpdate="(e) => modal.openUpdate(e)"
+                    @openUpdate="(e) => modal.openUpdate(e.id)"
                     @openUpdateConfig="(e) => config.open(e)" />
     <!-- 添加修改模态框 -->
     <host-form-modal ref="modal"
@@ -89,7 +89,7 @@
 
   // 卸载时清除 cache
   onUnmounted(() => {
-    cacheStore.reset('hostTags', 'hostKeys', 'hostIdentities');
+    cacheStore.reset('hostTags', 'hostKeys', 'hostIdentities', 'hostGroups');
   });
 
 </script>