From 2170937d88fac7d8de020366b2f375da0d0f4b96 Mon Sep 17 00:00:00 2001
From: iSecloud <869820505@qq.com>
Date: Fri, 15 Mar 2024 17:56:24 +0800
Subject: [PATCH] refactor(other): merge v1.3.0 to v1.4.0 #3564

---
 .../db_services/mysql/open_area/handlers.py   |   6 +-
 .../mysql/permission/db_account/handlers.py   |   1 +
 .../backend/flow/utils/mysql/mysql_db_meta.py |   1 +
 .../instance-selector-new/Index.vue           | 514 ------------------
 .../components/instance-selector/Index.vue    |  67 ++-
 .../components/CollapseMini.vue               | 101 ----
 .../instance-selector/components/PanelTab.vue |  98 ----
 .../components/PreviewResult.vue              | 214 --------
 .../components/RenderManualHost.vue           | 253 ---------
 .../components/RenderTopoHost.vue             | 339 ------------
 .../components/mongo/Index.vue                |   2 +-
 .../components/mongo/table/Index.vue          |   4 +-
 .../components/mongo/table/useTableData.ts    |   0
 .../components/mongo/useTopoData.ts           |   0
 .../db-replace/pages/page1/Index.vue          |   2 +-
 .../components/RenderData/RenderHost.vue      |   2 +-
 16 files changed, 68 insertions(+), 1536 deletions(-)
 delete mode 100644 dbm-ui/frontend/src/components/instance-selector-new/Index.vue
 delete mode 100644 dbm-ui/frontend/src/components/instance-selector/components/CollapseMini.vue
 delete mode 100644 dbm-ui/frontend/src/components/instance-selector/components/PanelTab.vue
 delete mode 100644 dbm-ui/frontend/src/components/instance-selector/components/PreviewResult.vue
 delete mode 100644 dbm-ui/frontend/src/components/instance-selector/components/RenderManualHost.vue
 delete mode 100644 dbm-ui/frontend/src/components/instance-selector/components/RenderTopoHost.vue
 rename dbm-ui/frontend/src/components/{instance-selector-new => instance-selector}/components/mongo/Index.vue (99%)
 rename dbm-ui/frontend/src/components/{instance-selector-new => instance-selector}/components/mongo/table/Index.vue (99%)
 rename dbm-ui/frontend/src/components/{instance-selector-new => instance-selector}/components/mongo/table/useTableData.ts (100%)
 rename dbm-ui/frontend/src/components/{instance-selector-new => instance-selector}/components/mongo/useTopoData.ts (100%)

diff --git a/dbm-ui/backend/db_services/mysql/open_area/handlers.py b/dbm-ui/backend/db_services/mysql/open_area/handlers.py
index aad5bbfd44..dba8ba232b 100644
--- a/dbm-ui/backend/db_services/mysql/open_area/handlers.py
+++ b/dbm-ui/backend/db_services/mysql/open_area/handlers.py
@@ -18,8 +18,8 @@
 from backend.components import DBPrivManagerApi
 from backend.db_meta.enums import ClusterType
 from backend.db_meta.models import Cluster
+from backend.db_services.dbpermission.constants import AccountType
 from backend.db_services.mysql.open_area.models import TendbOpenAreaConfig
-from backend.db_services.mysql.permission.constants import AccountType
 from backend.db_services.mysql.remote_service.handlers import RemoteServiceHandler
 
 
@@ -122,7 +122,9 @@ def __get_openarea_rules_set(cls, config, config_data, operator, cluster_id__clu
         if not priv_ids:
             return []
 
-        account_type = AccountType.TENDB if config.cluster_type == ClusterType.TenDBCluster else AccountType.MYSQL
+        account_type = (
+            AccountType.TENDBCLUSTER if config.cluster_type == ClusterType.TenDBCluster else AccountType.MYSQL
+        )
         authorize_rules = DBPrivManagerApi.list_account_rules(
             {"bk_biz_id": config.bk_biz_id, "ids": priv_ids, "cluster_type": account_type}
         )
diff --git a/dbm-ui/backend/db_services/mysql/permission/db_account/handlers.py b/dbm-ui/backend/db_services/mysql/permission/db_account/handlers.py
index d7bb4fe785..bdc5d8d8f2 100644
--- a/dbm-ui/backend/db_services/mysql/permission/db_account/handlers.py
+++ b/dbm-ui/backend/db_services/mysql/permission/db_account/handlers.py
@@ -24,6 +24,7 @@ class MySQLAccountHandler(AccountHandler):
     """
     封装账号相关的处理操作
     """
+
     def has_high_risk_privileges(self, rule_sets):
         """
         - 判断是否有高危权限
diff --git a/dbm-ui/backend/flow/utils/mysql/mysql_db_meta.py b/dbm-ui/backend/flow/utils/mysql/mysql_db_meta.py
index ee075391d4..286c1fe1d6 100644
--- a/dbm-ui/backend/flow/utils/mysql/mysql_db_meta.py
+++ b/dbm-ui/backend/flow/utils/mysql/mysql_db_meta.py
@@ -13,6 +13,7 @@
 
 from django.db.transaction import atomic
 
+from backend.components import DBPrivManagerApi
 from backend.components.mysql_partition.client import DBPartitionApi
 from backend.configuration.constants import DBType
 from backend.db_meta import api
diff --git a/dbm-ui/frontend/src/components/instance-selector-new/Index.vue b/dbm-ui/frontend/src/components/instance-selector-new/Index.vue
deleted file mode 100644
index 8d18dc9a30..0000000000
--- a/dbm-ui/frontend/src/components/instance-selector-new/Index.vue
+++ /dev/null
@@ -1,514 +0,0 @@
-<!--
- * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
- *
- * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
- *
- * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
- * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
- * the specific language governing permissions and limitations under the License.
--->
-
-<template>
-  <BkDialog
-    class="spider-instance-selector"
-    :close-icon="false"
-    :draggable="false"
-    :esc-close="false"
-    :is-show="isShow"
-    :quick-close="false"
-    @closed="handleClose">
-    <BkResizeLayout
-      :border="false"
-      collapsible
-      initial-divide="320px"
-      :max="360"
-      :min="320"
-      placement="right">
-      <template #main>
-        <PanelTab
-          v-model="panelTabActive"
-          :panel-list="panelList"
-          @change="handleChangePanel" />
-        <Component
-          :is="renderCom"
-          :key="panelTabActive"
-          :active-panel-id="panelTabActive"
-          :check-instances="activePanelObj?.manualConfig?.checkInstances"
-          :count-func="activePanelObj?.topoConfig?.countFunc"
-          :disabled-row-config="activePanelObj?.tableConfig?.disabledRowConfig"
-          :filter-cluster-id="activePanelObj?.topoConfig?.filterClusterId"
-          :firsr-column="activePanelObj?.tableConfig?.firsrColumn"
-          :get-table-list="activePanelObj?.tableConfig?.getTableList"
-          :get-topo-list="activePanelObj?.topoConfig?.getTopoList"
-          :is-remote-pagination="activePanelObj?.tableConfig?.isRemotePagination"
-          :last-values="lastValues"
-          :manual-config="activePanelObj?.manualConfig"
-          :multiple="activePanelObj?.tableConfig?.multiple"
-          :role-filter-list="activePanelObj?.tableConfig?.roleFilterList"
-          :status-filter="activePanelObj?.tableConfig?.statusFilter"
-          :table-setting="tableSettings"
-          :topo-alert-content="activePanelObj?.topoConfig?.topoAlertContent"
-          @change="handleChange" />
-      </template>
-      <template #aside>
-        <PreviewResult
-          :active-panel-id="panelTabActive"
-          :display-key="activePanelObj?.previewConfig?.displayKey"
-          :get-table-list="activePanelObj?.tableConfig?.getTableList"
-          :last-values="lastValues"
-          :show-title="activePanelObj?.previewConfig?.showTitle"
-          :title="activePanelObj?.previewConfig?.title"
-          @change="handleChange" />
-      </template>
-    </BkResizeLayout>
-    <template #footer>
-      <span
-        v-bk-tooltips="{
-          content: t('请选择实例'),
-          disabled: !isEmpty,
-        }"
-        class="inline-block">
-        <BkButton
-          class="w-88"
-          :disabled="isEmpty"
-          theme="primary"
-          @click="handleSubmit">
-          {{ t('确定') }}
-        </BkButton>
-      </span>
-      <BkButton
-        class="ml8 w-88"
-        @click="handleClose">
-        {{ t('取消') }}
-      </BkButton>
-    </template>
-  </BkDialog>
-</template>
-<script lang="ts" generic="T extends IValue">
-  import { t } from '@locales/index';
-
-  export default { name: 'InstanceSelector' };
-
-  export interface IValue {
-    bk_host_id: number;
-    bk_cloud_id: number;
-    ip: string;
-    port: number;
-    instance_address: string;
-    cluster_id: number;
-    cluster_type: string;
-  }
-
-  export type InstanceSelectorValues<T> = Record<string, T[]>;
-
-  export const activePanelInjectionKey = Symbol('activePanel');
-
-  const getSettings = (role?: string) => ({
-    fields: [
-      {
-        label: role ? role.charAt(0).toUpperCase() + role.slice(1) : t('实例'),
-        field: 'instance_address',
-        disabled: true,
-      },
-      {
-        label: t('角色'),
-        field: 'role',
-      },
-      {
-        label: t('实例状态'),
-        field: 'status',
-      },
-      {
-        label: t('管控区域'),
-        field: 'cloud_area',
-      },
-      {
-        label: t('Agent状态'),
-        field: 'alive',
-      },
-      {
-        label: t('主机名称'),
-        field: 'host_name',
-      },
-      {
-        label: t('OS名称'),
-        field: 'os_name',
-      },
-      {
-        label: t('所属云厂商'),
-        field: 'cloud_vendor',
-      },
-      {
-        label: t('OS类型'),
-        field: 'os_type',
-      },
-      {
-        label: t('主机ID'),
-        field: 'host_id',
-      },
-      {
-        label: 'Agent ID',
-        field: 'agent_id',
-      },
-    ],
-    checked: ['instance_address', 'role', 'status', 'cloud_area', 'alive', 'host_name', 'os_name'],
-  });
-</script>
-
-<script setup lang="ts" generic="T extends IValue">
-  import _ from 'lodash';
-
-  import {
-    listClusterHostsMasterFailoverProxy,
-    listClustersMasterFailoverProxy,
-  } from '@services/redis/toolbox';
-  import {
-    checkMongoInstances,
-    checkMysqlInstances,
-    checkRedisInstances,
-  } from '@services/source/instances';
-  import { getMongoInstancesList, getMongoTopoList } from '@services/source/mongodb';
-  import { queryClusters } from '@services/source/mysqlCluster';
-  import { getSpiderInstanceList } from '@services/source/spider';
-
-  import { ClusterTypes } from '@common/const';
-
-  import ManualInputContent from './components/common/manual-content/Index.vue';
-  import PanelTab  from './components/common/PanelTab.vue';
-  import PreviewResult from './components/common/preview-result/Index.vue';
-  import MongoClusterContent from './components/mongo/Index.vue';
-  import RedisContent from './components/redis/Index.vue';
-  import TendbClusterContent from './components/tendb-cluster/Index.vue';
-
-  export type TableSetting = ReturnType<typeof getSettings>;
-
-  export type PanelListType = {
-    name: string,
-    id: string,
-    topoConfig?: {
-      topoAlertContent?: Element,
-      filterClusterId?: number,
-      getTopoList?: (params: any) => Promise<any[]>,
-      countFunc?: (data: any) => number,
-    }
-    tableConfig?: {
-      isRemotePagination?: boolean,
-      columnsChecked?: string[],
-      // 多选模式
-      multiple?: boolean,
-      firsrColumn?: {
-        label: string,
-        field: string,
-        // 接口过滤
-        role?: string,
-      },
-      roleFilterList?: {
-        list: { text: string, value: string }[],
-      }
-      disabledRowConfig?: {
-        handler: (data: any) => boolean,
-        tip?: string,
-      },
-      getTableList?: (params: any) => Promise<any>,
-      statusFilter?: (data: any) => boolean,
-    },
-    manualConfig?: {
-      checkType: 'ip' | 'instance',
-      checkKey: keyof IValue,
-      activePanelId?: string
-      checkInstances?: (params: any) => Promise<any[]>,
-    },
-    previewConfig?: {
-      displayKey?: keyof IValue,
-      showTitle?: boolean,
-      title?: string,
-    },
-    content?: any,
-  }[]
-
-  type PanelListItem = PanelListType[number];
-
-  type RedisModel = ServiceReturnType<typeof listClustersMasterFailoverProxy>[number]
-  type RedisHostModel = ServiceReturnType<typeof listClusterHostsMasterFailoverProxy>['results'][number]
-  type MongodbModel = ServiceReturnType<typeof getMongoTopoList>[number]
-
-  interface Props {
-    clusterTypes: ClusterTypes[],
-    tabListConfig?: Record<string, PanelListType>,
-    selected?: InstanceSelectorValues<T>,
-  }
-
-  interface Emits {
-    (e: 'change', value: InstanceSelectorValues<T>): void
-  }
-
-  const props = withDefaults(defineProps<Props>(), {
-    tabListConfig: undefined,
-    selected: undefined,
-  });
-
-  const emits = defineEmits<Emits>();
-
-  const isShow = defineModel<boolean>('isShow', {
-    default: false,
-  });
-
-  const tabListMap: Record<string, PanelListType> = {
-    [ClusterTypes.REDIS]: [
-      {
-        id: 'redis',
-        name: t('主库主机'),
-        topoConfig: {
-          getTopoList: listClustersMasterFailoverProxy,
-          countFunc: (item: RedisModel) => item.redisMasterCount,
-        },
-        tableConfig: {
-          getTableList: listClusterHostsMasterFailoverProxy,
-          firsrColumn: {
-            label: 'master Ip',
-            role: 'redis_master',
-            field: 'ip',
-          },
-          columnsChecked: ['ip', 'cloud_area', 'status', 'host_name', 'os_name'],
-          statusFilter: (data: RedisHostModel) => !data.isMasterFailover,
-          isRemotePagination: false,
-        },
-        previewConfig: {
-          displayKey: 'ip',
-          showTitle: false,
-        },
-        content: RedisContent,
-      },
-      {
-        id: 'manualInput',
-        name: t('手动输入'),
-        tableConfig: {
-          getTableList: listClusterHostsMasterFailoverProxy,
-          firsrColumn: {
-            label: 'master Ip',
-            role: 'redis_master',
-            field: 'ip',
-          },
-          columnsChecked: ['ip', 'cloud_area', 'status', 'host_name', 'os_name'],
-          statusFilter: (data: RedisHostModel) => !data.isMasterFailover,
-          isRemotePagination: false,
-        },
-        manualConfig: {
-          checkInstances: checkRedisInstances,
-          checkType: 'ip',
-          checkKey: 'ip',
-          activePanelId: 'redis',
-        },
-        previewConfig: {
-          displayKey: 'ip',
-          showTitle: false,
-        },
-        content: ManualInputContent,
-      },
-    ],
-    [ClusterTypes.TENDBCLUSTER]: [
-      {
-        id: 'tendbcluster',
-        name: t('主库主机'),
-        topoConfig: {
-          getTopoList: queryClusters,
-        },
-        tableConfig: {
-          getTableList: getSpiderInstanceList,
-          firsrColumn: {
-            label: 'remote_master',
-            field: 'instance_address',
-            role: 'remote_master',
-          },
-        },
-        content: TendbClusterContent,
-      },
-      {
-        id: 'manualInput',
-        name: t('手动输入'),
-        tableConfig: {
-          getTableList: getSpiderInstanceList,
-          firsrColumn: {
-            label: 'remote_master',
-            field: 'instance_address',
-            role: 'remote_master',
-          },
-        },
-        manualConfig: {
-          checkInstances: checkMysqlInstances,
-          checkType: 'instance',
-          checkKey: 'instance_address',
-          activePanelId: 'tendbcluster',
-        },
-        content: ManualInputContent,
-      },
-    ],
-    [ClusterTypes.MONGOCLUSTER]: [
-      {
-        id: 'mongocluster',
-        name: t('主库主机'),
-        topoConfig: {
-          getTopoList: getMongoTopoList,
-          countFunc: (item: MongodbModel) => item.instanceCount,
-        },
-        tableConfig: {
-          getTableList: getMongoInstancesList,
-          multiple: true,
-          firsrColumn: {
-            label: 'IP',
-            field: 'ip',
-          },
-        },
-        previewConfig: {
-          displayKey: 'ip',
-        },
-        content: MongoClusterContent,
-      },
-      {
-        id: 'manualInput',
-        name: t('手动输入'),
-        tableConfig: {
-          getTableList: getSpiderInstanceList,
-          firsrColumn: {
-            label: 'IP',
-            field: 'ip',
-          },
-        },
-        manualConfig: {
-          checkInstances: checkMongoInstances,
-          checkType: 'instance',
-          checkKey: 'instance_address',
-          activePanelId: 'mongocluster',
-        },
-        previewConfig: {
-          displayKey: 'ip',
-        },
-        content: ManualInputContent,
-      },
-    ],
-  };
-
-  const diffComposeObjs = (objA: Record<string, any>, objB: Record<string, any>) => {
-    const obj: Record<string, any> = {};
-    Object.keys(objA).forEach((key) => {
-      if (Object.prototype.toString.call(objB[key]) === '[object Object]') {
-        obj[key] = diffComposeObjs(_.cloneDeep(objA[key]), _.cloneDeep(objB[key]));
-        return;
-      }
-      if (objB[key] !== undefined) {
-        obj[key] = objB[key];
-        // eslint-disable-next-line no-param-reassign
-        delete objB[key];
-      } else {
-        obj[key] = objA[key];
-      }
-    });
-    if (Object.keys(objB).length > 0) {
-      Object.keys(objB).forEach((key) => {
-        if (obj[key] === undefined) {
-          obj[key] = objB[key];
-        }
-      });
-    }
-    return obj;
-  };
-
-  const panelTabActive = ref<string>('');
-  const activePanelObj = ref<PanelListItem>();
-
-  const lastValues = reactive<InstanceSelectorValues<T>>({});
-
-  provide(activePanelInjectionKey, panelTabActive);
-
-  const clusterTabListMap = computed<Record<string, PanelListType>>(() => {
-    if (props.tabListConfig) {
-      Object.keys(props.tabListConfig).forEach((type) => {
-        const configArr = props.tabListConfig?.[type];
-        if (configArr) {
-          configArr.forEach((config, index) => {
-            let objItem = {};
-            const baseObj = tabListMap[type][index] as Record<string, any>;
-            if (baseObj) {
-              objItem = {
-                ...diffComposeObjs(_.cloneDeep(baseObj), _.cloneDeep(config)),
-              };
-            } else {
-              objItem = baseObj;
-            }
-            tabListMap[type][index] = objItem as PanelListItem;
-          });
-        }
-      });
-    }
-    return tabListMap;
-  });
-
-  const panelList = computed<PanelListType>(() => _.flatMap(props.clusterTypes.map(type => tabListMap[type])));
-
-  const tableSettings = computed(() => {
-    const setting = getSettings(activePanelObj.value?.tableConfig?.firsrColumn?.label);
-    const checked = activePanelObj?.value?.tableConfig?.columnsChecked;
-    if (checked) {
-      // 自定义列项
-      setting.checked = checked;
-    }
-    return setting;
-  });
-
-  const isEmpty = computed(() => !Object.values(lastValues).some(values => values.length > 0));
-  const renderCom = computed(() => activePanelObj.value?.content);
-
-  watch(() => props.clusterTypes, (types) => {
-    if (types) {
-      const activeObj = clusterTabListMap.value[types[0]];
-      [activePanelObj.value] = activeObj;
-      panelTabActive.value = activeObj[0].id;
-    }
-  }, {
-    immediate: true,
-    deep: true,
-  });
-
-  watch(() => isShow, (show) => {
-    if (show && props.selected) {
-      Object.assign(lastValues, props.selected);
-    }
-  });
-
-  const handleChangePanel = (obj: PanelListItem) => {
-    activePanelObj.value = obj;
-  };
-
-  const handleChange = (values: InstanceSelectorValues<T>) => {
-    Object.assign(lastValues, values);
-  };
-
-  const handleSubmit = () => {
-    emits('change', lastValues);
-    handleClose();
-  };
-
-  const handleClose = () => {
-    isShow.value = false;
-  };
-</script>
-<style lang="less">
-  .spider-instance-selector {
-    display: block;
-    width: 80%;
-    max-width: 1600px;
-    min-width: 1200px;
-
-    .bk-modal-header {
-      display: none;
-    }
-
-    .bk-modal-content {
-      padding: 0 !important;
-      overflow-y: hidden !important;
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/components/instance-selector/Index.vue b/dbm-ui/frontend/src/components/instance-selector/Index.vue
index d17164f42e..ce0c38bf53 100644
--- a/dbm-ui/frontend/src/components/instance-selector/Index.vue
+++ b/dbm-ui/frontend/src/components/instance-selector/Index.vue
@@ -67,7 +67,7 @@
       <span
         v-bk-tooltips="{
           content: t('请选择实例'),
-          disabled: !isEmpty
+          disabled: !isEmpty,
         }"
         class="inline-block">
         <BkButton
@@ -88,21 +88,22 @@
 </template>
 <script lang="ts" generic="T extends IValue">
   import { t } from '@locales/index';
+
   export default { name: 'InstanceSelector' };
 
   export interface IValue {
-    bk_host_id: number,
-    bk_cloud_id: number,
-    ip: string,
-    port: number,
-    instance_address: string,
-    cluster_id: number,
-    cluster_type: string,
-    status?: string,
+    bk_host_id: number;
+    bk_cloud_id: number;
+    ip: string;
+    port: number;
+    instance_address: string;
+    cluster_id: number;
+    cluster_type: string;
+    status?: string;
     host_info?: any;
   }
 
-  export type InstanceSelectorValues<T> = Record<string, T[]>
+  export type InstanceSelectorValues<T> = Record<string, T[]>;
 
   export const activePanelInjectionKey = Symbol('activePanel');
 
@@ -166,9 +167,11 @@
     listClustersMasterFailoverProxy,
   } from '@services/redis/toolbox';
   import {
+    checkMongoInstances,
     checkMysqlInstances,
     checkRedisInstances,
   } from '@services/source/instances';
+  import { getMongoInstancesList, getMongoTopoList } from '@services/source/mongodb';
   import { queryClusters as queryMysqlCluster } from '@services/source/mysqlCluster';
   import { getSpiderInstanceList } from '@services/source/spider';
   import { getTendbhaInstanceList } from '@services/source/tendbha';
@@ -179,6 +182,7 @@
   import ManualInputContent from './components/common/manual-content/Index.vue';
   import PanelTab  from './components/common/PanelTab.vue';
   import PreviewResult from './components/common/preview-result/Index.vue';
+  import MongoClusterContent from './components/mongo/Index.vue';
   import MysqlContent from './components/mysql/Index.vue';
   import RedisContent from './components/redis/Index.vue';
   import TendbClusterContent from './components/tendb-cluster/Index.vue';
@@ -416,6 +420,49 @@
         content: ManualInputContent,
       },
     ],
+    [ClusterTypes.MONGOCLUSTER]: [
+      {
+        id: 'mongocluster',
+        name: t('主库主机'),
+        topoConfig: {
+          getTopoList: getMongoTopoList,
+          countFunc: (item: MongodbModel) => item.instanceCount,
+        },
+        tableConfig: {
+          getTableList: getMongoInstancesList,
+          multiple: true,
+          firsrColumn: {
+            label: 'IP',
+            field: 'ip',
+          },
+        },
+        previewConfig: {
+          displayKey: 'ip',
+        },
+        content: MongoClusterContent,
+      },
+      {
+        id: 'manualInput',
+        name: t('手动输入'),
+        tableConfig: {
+          getTableList: getSpiderInstanceList,
+          firsrColumn: {
+            label: 'IP',
+            field: 'ip',
+          },
+        },
+        manualConfig: {
+          checkInstances: checkMongoInstances,
+          checkType: 'instance',
+          checkKey: 'instance_address',
+          activePanelId: 'mongocluster',
+        },
+        previewConfig: {
+          displayKey: 'ip',
+        },
+        content: ManualInputContent,
+      },
+    ],
   };
 
   const diffComposeObjs = (objA: Record<string, any>, objB: Record<string, any>) => {
diff --git a/dbm-ui/frontend/src/components/instance-selector/components/CollapseMini.vue b/dbm-ui/frontend/src/components/instance-selector/components/CollapseMini.vue
deleted file mode 100644
index 6946563b0c..0000000000
--- a/dbm-ui/frontend/src/components/instance-selector/components/CollapseMini.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<!--
- * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
- *
- * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
- *
- * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
- * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
- * the specific language governing permissions and limitations under the License.
--->
-
-<template>
-  <div
-    class="collapse-mini"
-    :class="[{ 'collapse-mini--collapse': state.collapse }]">
-    <div
-      class="collapse-mini__header"
-      @click="handleToggle">
-      <i class="db-icon-down-big collapse-mini__icon" />
-      <slot name="title">
-        <p>
-          <strong>【{{ title }}】</strong>
-          -
-        </p>
-        <I18nT
-          keypath="共n条"
-          tag="span">
-          <template #n>
-            <strong style="color: #3a84ff">{{ count }}</strong>
-          </template>
-        </I18nT>
-      </slot>
-    </div>
-
-    <Transition mode="in-out">
-      <div
-        v-show="state.collapse"
-        class="collapse-mini__content">
-        <slot />
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<script setup lang="ts">
-  interface Props {
-    collapse: boolean;
-    title: string;
-    count: number;
-  }
-
-  const props = defineProps<Props>();
-
-  const state = reactive({
-    collapse: props.collapse,
-  });
-
-  watch(
-    () => props.collapse,
-    () => {
-      state.collapse = props.collapse;
-    },
-  );
-
-  function handleToggle() {
-    state.collapse = !state.collapse;
-  }
-</script>
-
-<style lang="less" scoped>
-  @import '@styles/mixins.less';
-
-  .collapse-mini {
-    margin-top: 16px;
-
-    &:first-child {
-      margin-top: 0;
-    }
-
-    &__header {
-      height: 24px;
-      padding-bottom: 4px;
-      cursor: pointer;
-      .flex-center();
-    }
-
-    &__icon {
-      font-size: @font-size-normal;
-      transform: rotate(-90deg);
-      transition: all 0.2s;
-    }
-
-    &--collapse {
-      .collapse-mini__icon {
-        transform: rotate(0);
-      }
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/components/instance-selector/components/PanelTab.vue b/dbm-ui/frontend/src/components/instance-selector/components/PanelTab.vue
deleted file mode 100644
index 62ba70b237..0000000000
--- a/dbm-ui/frontend/src/components/instance-selector/components/PanelTab.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<!--
- * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
- *
- * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
- *
- * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
- * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
- * the specific language governing permissions and limitations under the License.
--->
-
-<template>
-  <div class="instance-selector-panel-tab">
-    <div
-      v-for="item in panelList"
-      :key="item.id"
-      class="tab-item"
-      :class="{
-        active: modelValue === item.id,
-      }"
-      @click="handleClick(item.id)">
-      {{ item.title }}
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-  import type { InjectionKey, Ref } from 'vue';
-
-  import { t } from '@locales/index';
-
-  export const defaultPanelList = [
-    {
-      id: 'tendbha',
-      title: t('主从'),
-    },
-    {
-      id: 'tendbsingle',
-      title: t('单节点'),
-    },
-    {
-      id: 'manualInput',
-      title: t('手动输入'),
-    },
-  ];
-  export type PanelTypes = {
-    id: string;
-    title: string;
-  };
-  export const activePanelInjectionKey: InjectionKey<Ref<PanelTypes['id']>> = Symbol('activePanel');
-</script>
-
-<script setup lang="ts">
-  interface Props {
-    modelValue: string;
-    panelList?: Array<PanelTypes>;
-  }
-  interface Emits {
-    (e: 'update:modelValue', value: string): void;
-  }
-
-  const props = defineProps<Props>();
-  const emits = defineEmits<Emits>();
-
-  const handleClick = (tab: string) => {
-    if (props.modelValue === tab) {
-      return;
-    }
-    emits('update:modelValue', tab);
-  };
-</script>
-<style lang="less">
-  .instance-selector-panel-tab {
-    display: flex;
-
-    .tab-item {
-      display: flex;
-      height: 40px;
-      cursor: pointer;
-      background-color: #fafbfd;
-      border-bottom: 1px solid #dcdee5;
-      justify-content: center;
-      align-items: center;
-      flex: 1;
-
-      &.active {
-        background-color: #fff;
-        border-bottom-color: transparent;
-      }
-
-      & ~ .tab-item {
-        border-left: 1px solid #dcdee5;
-      }
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/components/instance-selector/components/PreviewResult.vue b/dbm-ui/frontend/src/components/instance-selector/components/PreviewResult.vue
deleted file mode 100644
index fd042f0063..0000000000
--- a/dbm-ui/frontend/src/components/instance-selector/components/PreviewResult.vue
+++ /dev/null
@@ -1,214 +0,0 @@
-<!--
- * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
- *
- * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
- *
- * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
- * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
- * the specific language governing permissions and limitations under the License.
--->
-
-<template>
-  <div class="instance-selector-preview-result">
-    <div class="header">
-      <span>{{ $t('结果预览') }}</span>
-      <BkDropdown class="result__dropdown">
-        <i class="db-icon-more result__trigger" />
-        <template #content>
-          <BkDropdownMenu>
-            <BkDropdownItem @click="handleClear">
-              {{ $t('清空所有') }}
-            </BkDropdownItem>
-            <BkDropdownItem @click="handleCopyInstances">
-              {{ $t('复制所有实例') }}
-            </BkDropdownItem>
-          </BkDropdownMenu>
-        </template>
-      </BkDropdown>
-    </div>
-    <BkException
-      v-if="isEmpty"
-      class="mt-50"
-      :description="$t('暂无数据_请从左侧添加对象')"
-      scene="part"
-      type="empty" />
-    <div
-      v-else
-      class="result-wrapper db-scroll-y">
-      <template
-        v-for="key in keys"
-        :key="key">
-        <CollapseMini
-          v-if="lastValues[key].length > 0"
-          collapse
-          :count="lastValues[key].length"
-          :title="textMap[key]">
-          <div
-            v-for="(item, index) of lastValues[key]"
-            :key="item.instance_address"
-            class="result-item">
-            <span
-              v-overflow-tips
-              class="text-overflow">
-              {{ item.instance_address }}
-            </span>
-            <DbIcon
-              type="close result-item-remove"
-              @click="handleRemove(key, index)" />
-          </div>
-        </CollapseMini>
-      </template>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-  import { useI18n } from 'vue-i18n';
-
-  import { useCopy } from '@hooks';
-
-  import { messageWarn } from '@utils';
-
-  import type { IValue } from '../common/types';
-  import CollapseMini from '../components/CollapseMini.vue';
-  import type { InstanceSelectorValues } from '../Index.vue';
-
-  import type { PanelTypes } from './PanelTab.vue';
-
-  interface Props {
-    lastValues: InstanceSelectorValues;
-    panelList: Array<PanelTypes>;
-  }
-
-  type Keys = keyof InstanceSelectorValues;
-
-  interface Emits {
-    (e: 'change', value: InstanceSelectorValues): void;
-  }
-
-  const props = defineProps<Props>();
-  const emits = defineEmits<Emits>();
-
-  const { t } = useI18n();
-  const copy = useCopy();
-
-  const keys = computed(() => Object.keys(props.lastValues) as Keys[]);
-  const isEmpty = computed(() => !keys.value.some((key) => props.lastValues[key].length > 0));
-  const textMap = computed(() =>
-    props.panelList.reduce(
-      (results, item) => {
-        // eslint-disable-next-line no-param-reassign
-        results[item.id] = item.title;
-        return results;
-      },
-      {} as Record<string, string>,
-    ),
-  );
-
-  const handleClear = () => {
-    emits('change', {
-      tendbha: [],
-      tendbsingle: [],
-    });
-  };
-
-  const handleRemove = (key: Keys, index: number) => {
-    const target = props.lastValues[key];
-    target.splice(index, 1);
-    emits('change', {
-      ...props.lastValues,
-      [key]: target,
-    });
-  };
-
-  /**
-   * 复制集群域名
-   */
-  const handleCopyInstances = () => {
-    if (isEmpty.value) {
-      messageWarn(t('没有可复制实例'));
-      return;
-    }
-
-    const instances: IValue[] = [];
-    for (const key of keys.value) {
-      instances.push(...props.lastValues[key]);
-    }
-    copy(instances.map((item) => item.instance_address).join('\n'));
-  };
-</script>
-<style lang="less">
-  .instance-selector-preview-result {
-    height: 100%;
-    max-height: 640px;
-    padding: 12px 24px;
-    font-size: @font-size-mini;
-    background-color: #f5f6fa;
-
-    .header {
-      display: flex;
-      padding-bottom: 16px;
-      align-items: center;
-
-      > span {
-        flex: 1;
-        font-size: @font-size-normal;
-        color: @title-color;
-      }
-
-      .result__dropdown {
-        font-size: 0;
-        line-height: 20px;
-      }
-
-      .result__trigger {
-        display: block;
-        font-size: 18px;
-        color: @gray-color;
-        cursor: pointer;
-
-        &:hover {
-          background-color: @bg-disable;
-          border-radius: 2px;
-        }
-      }
-    }
-
-    .result-wrapper {
-      display: flex;
-      flex-direction: column;
-      height: calc(100% - 38px);
-
-      .result-item {
-        display: flex;
-        padding: 0 12px;
-        margin-bottom: 2px;
-        line-height: 32px;
-        background-color: @bg-white;
-        border-radius: 2px;
-        justify-content: space-between;
-        align-items: center;
-
-        .result-item-remove {
-          display: none;
-          font-size: @font-size-large;
-          font-weight: bold;
-          color: @gray-color;
-          cursor: pointer;
-
-          &:hover {
-            color: @default-color;
-          }
-        }
-
-        &:hover {
-          .result-item-remove {
-            display: block;
-          }
-        }
-      }
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/components/instance-selector/components/RenderManualHost.vue b/dbm-ui/frontend/src/components/instance-selector/components/RenderManualHost.vue
deleted file mode 100644
index d5a0d61c2f..0000000000
--- a/dbm-ui/frontend/src/components/instance-selector/components/RenderManualHost.vue
+++ /dev/null
@@ -1,253 +0,0 @@
-<!--
- * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
- *
- * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
- *
- * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
- * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
- * the specific language governing permissions and limitations under the License.
--->
-
-<template>
-  <div class="instance-selector-render-manual-host">
-    <BkInput
-      v-model.trim="search"
-      clearable
-      :placeholder="$t('请输入实例')" />
-    <DbOriginalTable
-      :columns="columns"
-      :data="renderData"
-      :height="505"
-      :is-searching="!!search"
-      :settings="tableSettings"
-      style="margin-top: 12px"
-      @clear-search="handleClearSearch"
-      @row-click.stop.prevent="handleRowClick" />
-  </div>
-</template>
-
-<script setup lang="tsx">
-  import {
-    ref,
-  } from 'vue';
-  import { useI18n } from 'vue-i18n';
-
-  import TendbhaInstanceModel from '@services/model/mysql/tendbha-instance';
-
-  import DbStatus from '@components/db-status/index.vue';
-
-  import getSettings from '../common/tableSettings';
-  import type { IValue, MySQLClusterTypes } from '../common/types';
-  import type { InstanceSelectorValues } from '../Index.vue';
-
-  import { ClusterTypes } from '@/common/const';
-
-  interface TableItem {
-    data: TendbhaInstanceModel
-  }
-
-  interface Props {
-    role?: string,
-    lastValues: InstanceSelectorValues,
-    tableData: TendbhaInstanceModel[],
-  }
-
-  interface Emits {
-    (e: 'change', value: InstanceSelectorValues): void;
-  }
-
-  const props = defineProps<Props>();
-  const emits = defineEmits<Emits>();
-
-  const { t } = useI18n();
-  const tableSettings = getSettings(props.role);
-
-  const formatValue = (data: TendbhaInstanceModel) => ({
-    bk_host_id: data.bk_host_id,
-    instance_address: data.instance_address,
-    cluster_id: data.cluster_id,
-    cluster_type: data.cluster_type as MySQLClusterTypes,
-    bk_cloud_id: data.host_info.cloud_id,
-    port: data.port,
-    ip: data.ip,
-  });
-
-  const search = ref('');
-
-  const checkedMap = shallowRef({} as Record<string, IValue>);
-
-  watch(() => props.lastValues, () => {
-    checkedMap.value = {};
-    for (const checkedList of Object.values(props.lastValues)) {
-      for (const item of checkedList) {
-        checkedMap.value[item.instance_address] = item;
-      }
-    }
-  }, { immediate: true, deep: true });
-
-  const renderData = computed(() => {
-    if (search.value === '') return props.tableData;
-
-    return props.tableData.filter(item => (
-      item.instance_address.includes(search.value)
-    ));
-  });
-  const isSelectedAll = computed(() => (
-    renderData.value.length > 0
-    && renderData.value.length === renderData.value.filter(item => checkedMap.value[item.instance_address]).length
-  ));
-
-  const columns = [
-    {
-      width: 60,
-      fixed: 'left',
-      label: () => (
-        <bk-checkbox
-          label={true}
-          model-value={isSelectedAll.value}
-          onChange={handleSelectPageAll}
-        />
-      ),
-      render: ({ data }: TableItem) => (
-        <bk-checkbox
-          style="vertical-align: middle;"
-          label={true}
-          model-value={Boolean(checkedMap.value[data.instance_address])}
-          onChange={(value: boolean) => handleTableSelectOne(value, data)}
-        />
-      ),
-    },
-    {
-      fixed: 'left',
-      minWidth: 160,
-      label: props.role ? props.role.charAt(0).toUpperCase() + props.role.slice(1) : t('实例'),
-      field: 'instance_address',
-    },
-    {
-      label: t('角色'),
-      field: 'role',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('实例状态'),
-      field: 'status',
-      render: ({ data }: TableItem) => {
-        const info = data.status === 'running' ? { theme: 'success', text: t('正常') } : { theme: 'danger', text: t('异常') };
-        return <DbStatus theme={info.theme}>{info.text}</DbStatus>;
-      },
-    },
-    {
-      minWidth: 100,
-      label: t('管控区域'),
-      field: 'bk_cloud_name',
-    },
-    {
-      minWidth: 100,
-      label: t('Agent状态'),
-      field: 'alive',
-      render: ({ data }: TableItem) => {
-        const info = data.host_info.alive === 1 ? { theme: 'success', text: t('正常') } : { theme: 'danger', text: t('异常') };
-        return <DbStatus theme={info.theme}>{info.text}</DbStatus>;
-      },
-    },
-    {
-      label: t('主机名称'),
-      field: 'host_name',
-      showOverflowTooltip: true,
-      render: ({ data }: TableItem) => data.host_info.host_name || '--',
-    },
-    {
-      label: t('OS名称'),
-      field: 'os_name',
-      showOverflowTooltip: true,
-      render: ({ data }: TableItem) => data.host_info.os_name || '--',
-    },
-    {
-      label: t('所属云厂商'),
-      field: 'cloud_vendor',
-      showOverflowTooltip: true,
-      render: ({ data }: TableItem) => data.host_info.cloud_vendor || '--',
-    },
-    {
-      label: t('OS类型'),
-      field: 'os_type',
-      showOverflowTooltip: true,
-      render: ({ data }: TableItem) => data.host_info.os_type || '--',
-    },
-    {
-      label: t('主机ID'),
-      field: 'host_id',
-      showOverflowTooltip: true,
-      render: ({ data }: TableItem) => data.host_info.host_id || '--',
-    },
-    {
-      label: 'Agent ID',
-      field: 'agent_id',
-      showOverflowTooltip: true,
-      render: ({ data }: TableItem) => data.host_info.agent_id || '--',
-    },
-  ];
-
-  const triggerChange = () => {
-    const lastValues: InstanceSelectorValues = {
-      [ClusterTypes.TENDBHA]: [],
-      [ClusterTypes.TENDBSINGLE]: [],
-    };
-    for (const item of Object.values(checkedMap.value)) {
-      lastValues[item.cluster_type].push(item);
-    }
-
-    emits('change', {
-      ...props.lastValues,
-      ...lastValues,
-    });
-  };
-
-  const handleSelectPageAll = (checked: boolean) => {
-    const lastCheckMap = { ...checkedMap.value };
-    for (const item of renderData.value) {
-      if (checked) {
-        lastCheckMap[item.instance_address] = formatValue(item);
-      } else {
-        delete lastCheckMap[item.instance_address];
-      }
-    }
-    checkedMap.value = lastCheckMap;
-    triggerChange();
-  };
-
-  const handleTableSelectOne = (checked: boolean, data: TendbhaInstanceModel) => {
-    const lastCheckMap = { ...checkedMap.value };
-    if (checked) {
-      lastCheckMap[data.instance_address] = formatValue(data);
-    } else {
-      delete lastCheckMap[data.instance_address];
-    }
-    checkedMap.value = lastCheckMap;
-    triggerChange();
-  };
-
-  const handleRowClick = (e: Event, data: TendbhaInstanceModel) => {
-    const checked = checkedMap.value[data.instance_address];
-    handleTableSelectOne(!checked, data);
-  };
-
-  const handleClearSearch = () => {
-    search.value = '';
-  };
-</script>
-
-<style lang="less">
-  .instance-selector-render-manual-host {
-    padding: 0 24px;
-
-    .bk-table-body {
-      tr {
-        cursor: pointer;
-      }
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/components/instance-selector/components/RenderTopoHost.vue b/dbm-ui/frontend/src/components/instance-selector/components/RenderTopoHost.vue
deleted file mode 100644
index 3a94832c53..0000000000
--- a/dbm-ui/frontend/src/components/instance-selector/components/RenderTopoHost.vue
+++ /dev/null
@@ -1,339 +0,0 @@
-<!--
- * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
- *
- * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
- *
- * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
- * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
- * the specific language governing permissions and limitations under the License.
--->
-
-<template>
-  <div class="instance-selector-render-topo-host">
-    <BkInput
-      v-model="search"
-      clearable
-      :placeholder="$t('请输入实例')"
-      @clear="handlePageValueChange(1)"
-      @enter="handlePageValueChange(1)" />
-    <BkLoading
-      :loading="isTableDataLoading"
-      :z-index="2">
-      <DbOriginalTable
-        :columns="columns"
-        :data="tableData"
-        :is-anomalies="isAnomalies"
-        :is-searching="!!search"
-        :max-height="485"
-        :pagination="pagination.count < 10 ? false : pagination"
-        remote-pagination
-        :settings="tableSettings"
-        style="margin-top: 12px"
-        @clear-search="handleClearSearch"
-        @page-limit-change="handlePageLimitChange"
-        @page-value-change="handlePageValueChange"
-        @refresh="fetchData"
-        @row-click.stop.prevent="handleRowClick" />
-    </BkLoading>
-  </div>
-</template>
-<script setup lang="tsx">
-  import { useI18n } from 'vue-i18n';
-
-  import TendbhaInstanceModel from '@services/model/mysql/tendbha-instance';
-  import { getTendbhaInstanceList } from '@services/source/tendbha';
-  import { getTendbsingleInstanceList } from '@services/source/tendbsingle';
-  import type { ResourceInstance } from '@services/types';
-
-  import { useGlobalBizs } from '@stores';
-
-  import { ClusterTypes } from '@common/const';
-
-  import DbStatus from '@components/db-status/index.vue';
-
-  import getSettings from '../common/tableSettings';
-  import type { IValue, MySQLClusterTypes } from '../common/types';
-  import type { InstanceSelectorValues } from '../Index.vue';
-
-  import { activePanelInjectionKey } from './PanelTab.vue';
-
-  interface TableItem {
-    data: TendbhaInstanceModel
-  }
-
-  interface Props {
-    node?: {
-      id: number,
-      name: string
-    },
-    role?: string
-    lastValues: InstanceSelectorValues
-  }
-
-  interface Emits {
-    (e: 'change', value: InstanceSelectorValues): void;
-  }
-
-  const props = defineProps<Props>();
-  const emits = defineEmits<Emits>();
-
-  const apiMap: Record<string, (params: any) => ReturnType<typeof getTendbsingleInstanceList>> = {
-    [ClusterTypes.TENDBSINGLE]: getTendbsingleInstanceList,
-    [ClusterTypes.TENDBHA]: getTendbhaInstanceList,
-  };
-
-  const formatValue = (data: ResourceInstance) => ({
-    bk_host_id: data.bk_host_id,
-    instance_address: data.instance_address,
-    cluster_id: data.cluster_id,
-    bk_cloud_id: data.bk_cloud_id,
-    bk_cloud_name: data.bk_cloud_name,
-    ip: data.ip || '',
-    port: data.port,
-    cluster_type: data.cluster_type as MySQLClusterTypes,
-  });
-
-  const { t } = useI18n();
-  const { currentBizId } = useGlobalBizs();
-  const activePanel = inject(activePanelInjectionKey);
-
-  const tableSettings = getSettings(props.role);
-
-  const search = ref('');
-  const isAnomalies = ref(false);
-
-  const checkedMap = shallowRef({} as Record<string, IValue>);
-
-  watch(() => props.lastValues, () => {
-    // 切换 tab 回显选中状态 \ 预览结果操作选中状态
-    if (activePanel?.value && activePanel.value !== 'manualInput') {
-      checkedMap.value = {};
-      const checkedList = props.lastValues[activePanel.value as keyof InstanceSelectorValues];
-      for (const item of checkedList) {
-        checkedMap.value[item.instance_address] = item;
-      }
-    }
-  }, { immediate: true, deep: true });
-
-  const pagination = reactive({
-    count: 0,
-    current: 1,
-    limit: 10,
-    limitList: [10, 20, 50, 100],
-    align: 'right',
-    layout: ['total', 'limit', 'list'],
-  });
-  const isTableDataLoading = ref(false);
-  const tableData = shallowRef<ResourceInstance []>([]);
-  const isSelectedAll = computed(() => (
-    tableData.value.length > 0
-    && tableData.value.length === tableData.value.filter(item => checkedMap.value[item.instance_address]).length
-  ));
-
-  const columns = [
-    {
-      width: 60,
-      minWidth: 60,
-      fixed: 'left',
-      label: () => (
-        <bk-checkbox
-          label={true}
-          model-value={isSelectedAll.value}
-          onChange={handleSelectPageAll}
-        />
-      ),
-      render: ({ data }: {data: ResourceInstance}) => (
-        <bk-checkbox
-          style="vertical-align: middle;"
-          label={true}
-          model-value={Boolean(checkedMap.value[data.instance_address])}
-          onChange={(value: boolean) => handleTableSelectOne(value, data)}
-        />
-      ),
-    },
-    {
-      fixed: 'left',
-      minWidth: 160,
-      label: props.role ? props.role.charAt(0).toUpperCase() + props.role.slice(1) : t('实例'),
-      field: 'instance_address',
-    },
-    {
-      label: t('角色'),
-      field: 'role',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('实例状态'),
-      field: 'status',
-      render: ({ data }: TableItem) => {
-        const info = data.status === 'running' ? { theme: 'success', text: t('正常') } : { theme: 'danger', text: t('异常') };
-        return <DbStatus theme={info.theme}>{info.text}</DbStatus>;
-      },
-    },
-    {
-      minWidth: 100,
-      label: t('管控区域'),
-      field: 'bk_cloud_name',
-    },
-    {
-      minWidth: 100,
-      label: t('Agent状态'),
-      field: 'alive',
-      render: ({ data }: TableItem) => {
-        const info = data.host_info.alive === 1 ? { theme: 'success', text: t('正常') } : { theme: 'danger', text: t('异常') };
-        return <DbStatus theme={info.theme}>{info.text}</DbStatus>;
-      },
-    },
-    {
-      label: t('主机名称'),
-      field: 'host_name',
-      showOverflowTooltip: true,
-      render: ({ data }: TableItem) => data.host_info.host_name || '--',
-    },
-    {
-      label: t('OS名称'),
-      field: 'os_name',
-      showOverflowTooltip: true,
-      render: ({ data }: TableItem) => data.host_info.os_name || '--',
-    },
-    {
-      label: t('所属云厂商'),
-      field: 'cloud_vendor',
-      showOverflowTooltip: true,
-      render: ({ data }: TableItem) => data.host_info.cloud_vendor || '--',
-    },
-    {
-      label: t('OS类型'),
-      field: 'os_type',
-      showOverflowTooltip: true,
-      render: ({ data }: TableItem) => data.host_info.os_type || '--',
-    },
-    {
-      label: t('主机ID'),
-      field: 'host_id',
-      showOverflowTooltip: true,
-      render: ({ data }: TableItem) => data.host_info.host_id || '--',
-    },
-    {
-      label: 'Agent ID',
-      field: 'agent_id',
-      showOverflowTooltip: true,
-      render: ({ data }: TableItem) => data.host_info.agent_id || '--',
-    },
-  ];
-
-  const fetchData = () => {
-    isTableDataLoading.value = true;
-    const params = {
-      db_type: 'mysql',
-      bk_biz_id: currentBizId,
-      instance_address: search.value,
-      limit: pagination.limit,
-      offset: (pagination.current - 1) * pagination.limit,
-      type: activePanel?.value === 'manualInput' ? undefined : activePanel?.value,
-      role: props.role,
-      extra: 1,
-    };
-    if (props.node && props.node.id !== currentBizId) {
-      Object.assign(params, {
-        cluster_id: props.node.id,
-      });
-    }
-    apiMap[activePanel?.value || 'tendbsingle'](params)
-      .then((data) => {
-        tableData.value = data.results;
-        pagination.count = data.count;
-        isAnomalies.value = false;
-      })
-      .catch(() => {
-        tableData.value = [];
-        pagination.count = 0;
-        isAnomalies.value = true;
-      })
-      .finally(() => {
-        isTableDataLoading.value = false;
-      });
-  };
-
-  watch(() => props.node, () => {
-    if (props.node) {
-      fetchData();
-    }
-  });
-
-  const triggerChange = () => {
-    const result = Object.values(checkedMap.value).reduce((result, item) => {
-      result.push({
-        ...item,
-      });
-      return result;
-    }, [] as IValue[]);[];
-
-    if (activePanel?.value) {
-      emits('change', {
-        ...props.lastValues,
-        [activePanel.value]: result,
-      });
-    }
-  };
-
-  const handleSelectPageAll = (checked: boolean) => {
-    const lastCheckMap = { ...checkedMap.value };
-    for (const item of tableData.value) {
-      if (checked) {
-        lastCheckMap[item.instance_address] = formatValue(item);
-      } else {
-        delete lastCheckMap[item.instance_address];
-      }
-    }
-    checkedMap.value = lastCheckMap;
-    triggerChange();
-  };
-
-  const handleTableSelectOne = (checked: boolean, data: ResourceInstance) => {
-    const lastCheckMap = { ...checkedMap.value };
-    if (checked) {
-      lastCheckMap[data.instance_address] = formatValue(data);
-    } else {
-      delete lastCheckMap[data.instance_address];
-    }
-    checkedMap.value = lastCheckMap;
-    triggerChange();
-  };
-
-  const handleRowClick = (key: number, data: ResourceInstance) => {
-    const checked = checkedMap.value[data.instance_address];
-    handleTableSelectOne(!checked, data);
-  };
-
-  // 切换每页条数
-  const handlePageLimitChange = (pageLimit: number) => {
-    pagination.limit = pageLimit;
-    fetchData();
-  };
-  // 切换页码
-  const handlePageValueChange = (pageValue:number) => {
-    pagination.current = pageValue;
-    fetchData();
-  };
-  // 清空搜索
-  const handleClearSearch = () => {
-    search.value = '';
-    handlePageValueChange(1);
-  };
-</script>
-
-<style lang="less">
-  .instance-selector-render-topo-host {
-    padding: 0 24px;
-
-    .bk-table-body {
-      tr {
-        cursor: pointer;
-      }
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/components/instance-selector-new/components/mongo/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/mongo/Index.vue
similarity index 99%
rename from dbm-ui/frontend/src/components/instance-selector-new/components/mongo/Index.vue
rename to dbm-ui/frontend/src/components/instance-selector/components/mongo/Index.vue
index 3382707ff3..dcdf61b1ca 100644
--- a/dbm-ui/frontend/src/components/instance-selector-new/components/mongo/Index.vue
+++ b/dbm-ui/frontend/src/components/instance-selector/components/mongo/Index.vue
@@ -79,7 +79,7 @@
   </BkLoading>
 </template>
 <script setup lang="ts" generic="T extends IValue">
-  import type { TableSetting } from '@components/instance-selector-new/Index.vue';
+  import type { TableSetting } from '@components/instance-selector/Index.vue';
 
   import type { InstanceSelectorValues, IValue, PanelListType } from '../../Index.vue';
 
diff --git a/dbm-ui/frontend/src/components/instance-selector-new/components/mongo/table/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/mongo/table/Index.vue
similarity index 99%
rename from dbm-ui/frontend/src/components/instance-selector-new/components/mongo/table/Index.vue
rename to dbm-ui/frontend/src/components/instance-selector/components/mongo/table/Index.vue
index feed38aa61..549055145c 100644
--- a/dbm-ui/frontend/src/components/instance-selector-new/components/mongo/table/Index.vue
+++ b/dbm-ui/frontend/src/components/instance-selector/components/mongo/table/Index.vue
@@ -45,8 +45,8 @@
     IValue,
     PanelListType,
     TableSetting,
-  } from '@components/instance-selector-new/Index.vue';
-  import { activePanelInjectionKey } from '@components/instance-selector-new/Index.vue';
+  } from '@components/instance-selector/Index.vue';
+  import { activePanelInjectionKey } from '@components/instance-selector/Index.vue';
 
   import { firstLetterToUpper } from '@utils';
 
diff --git a/dbm-ui/frontend/src/components/instance-selector-new/components/mongo/table/useTableData.ts b/dbm-ui/frontend/src/components/instance-selector/components/mongo/table/useTableData.ts
similarity index 100%
rename from dbm-ui/frontend/src/components/instance-selector-new/components/mongo/table/useTableData.ts
rename to dbm-ui/frontend/src/components/instance-selector/components/mongo/table/useTableData.ts
diff --git a/dbm-ui/frontend/src/components/instance-selector-new/components/mongo/useTopoData.ts b/dbm-ui/frontend/src/components/instance-selector/components/mongo/useTopoData.ts
similarity index 100%
rename from dbm-ui/frontend/src/components/instance-selector-new/components/mongo/useTopoData.ts
rename to dbm-ui/frontend/src/components/instance-selector/components/mongo/useTopoData.ts
diff --git a/dbm-ui/frontend/src/views/mongodb-manage/db-replace/pages/page1/Index.vue b/dbm-ui/frontend/src/views/mongodb-manage/db-replace/pages/page1/Index.vue
index 2593017b8a..0a46a8e684 100644
--- a/dbm-ui/frontend/src/views/mongodb-manage/db-replace/pages/page1/Index.vue
+++ b/dbm-ui/frontend/src/views/mongodb-manage/db-replace/pages/page1/Index.vue
@@ -75,7 +75,7 @@
 
   import InstanceSelector, {
     type InstanceSelectorValues,
-  } from '@components/instance-selector-new/Index.vue';
+  } from '@components/instance-selector/Index.vue';
 
   import RenderData from './components/Index.vue';
   import RenderDataRow, {
diff --git a/dbm-ui/frontend/src/views/mongodb-manage/db-table-backup/pages/page1/components/RenderData/RenderHost.vue b/dbm-ui/frontend/src/views/mongodb-manage/db-table-backup/pages/page1/components/RenderData/RenderHost.vue
index 517fa7b995..84e9c7a732 100644
--- a/dbm-ui/frontend/src/views/mongodb-manage/db-table-backup/pages/page1/components/RenderData/RenderHost.vue
+++ b/dbm-ui/frontend/src/views/mongodb-manage/db-table-backup/pages/page1/components/RenderData/RenderHost.vue
@@ -70,7 +70,7 @@
   import InstanceSelector, {
     type InstanceSelectorValues,
     type PanelListType,
-  } from '@components/instance-selector-new/Index.vue';
+  } from '@components/instance-selector/Index.vue';
   import useValidtor from '@components/render-table/hooks/useValidtor';
 
   interface Props {