From 71b665a183305698c19e68e019a9625fd72bd2b8 Mon Sep 17 00:00:00 2001
From: Austin <1344583166@qq.com>
Date: Fri, 20 Sep 2024 15:03:04 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20mysql=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E7=AE=B1=E6=94=AF=E6=8C=81=E6=A0=BC=E5=AD=90=E5=86=85=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E9=9B=86=E7=BE=A4/=E5=AE=9E=E4=BE=8B/IP=20#6997?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/tendb-cluster/Index.vue        |   5 +
 .../components/tendb-single/Index.vue         |   5 +
 .../components/tendbha/Index.vue              |   5 +
 .../components/instance-selector/Index.vue    |   3 +-
 .../components/mysql/Index.vue                |   3 +
 .../components/mysql/table/Index.vue          |  20 +-
 .../render-table/columns/input/index.vue      | 137 +++---
 .../generateCloneData/mysql/instanceClone.ts  |  19 +-
 .../mysql/masterSlaveSwitch.ts                |  25 +-
 .../mysql/restoreLocalSlave.ts                |   8 +-
 .../generateCloneData/mysql/restoreSlave.ts   |  45 +-
 .../mysql/versionMigrateUpgrade.ts            |   1 +
 dbm-ui/frontend/src/services/source/dbbase.ts |   2 +
 .../frontend/src/services/source/tendbha.ts   |   3 +-
 .../src/services/source/tendbsingle.ts        |   7 +-
 .../components/edit-field/ClusterName.vue     |   2 +-
 .../mysql/checksum/pages/page1/Index.vue      |   2 +-
 .../pages/page1/components/RenderData/Row.vue |  10 +-
 .../edit-field/ClusterNameWithSelector.vue    | 345 +++++++++++++
 .../edit-field/ClusterWithRelateCluster.vue   | 142 ++----
 .../edit-field/InstanceWithSelector.vue       | 297 +++++++++++
 .../edit-field/IpInputWithIpSelector.vue      | 269 ++++++++++
 .../pages/page1/components/Index.vue          |  10 +-
 .../pages/page1/components/Row.vue            |   8 +-
 .../render-target-clusters/Index.vue          |  87 +---
 .../render-target-clusters/Input.vue          | 463 ++++--------------
 .../pages/page1/components/RenderData/Row.vue |  10 +-
 .../pages/page1/components/RenderData/Row.vue |  11 +-
 .../pages/page1/components/RenderData/Row.vue |  11 +-
 .../pages/page1/components/RenderData/Row.vue |   9 +-
 .../pages/page1/components/RenderData/Row.vue |  23 +-
 .../pages/page1/components/RenderData/Row.vue |  42 +-
 .../pages/page1/components/BatchEntry.vue     |  20 +-
 .../components/RenderData/RenderSlave.vue     |   6 +-
 .../pages/page1/components/RenderData/Row.vue |  47 +-
 .../components/target-cluster/Index.vue       |  37 +-
 .../target-cluster/components/Row.vue         |  29 +-
 .../pages/page1/components/RenderData/Row.vue |   9 +-
 .../pages/page1/Index.vue                     |  22 +-
 .../components/RenderData/RenderSource.vue    | 163 ------
 .../components/RenderData/RenderTarget.vue    |   2 +-
 .../pages/page1/components/RenderData/Row.vue |  50 +-
 .../render-cluster/ClusterRelatedInput.vue    |   8 +-
 .../RenderData/render-cluster/Index.vue       | 111 ++---
 .../pages/page1/components/new-host/Index.vue |  10 +-
 .../components/RenderData/RenderNewSlave.vue  |  14 +-
 .../components/RenderData/RenderOldSlave.vue  |  26 +-
 .../new-host/components/RenderData/Row.vue    |  69 ++-
 .../page1/components/original-host/Index.vue  |  10 +-
 .../components/RenderData/RenderCluster.vue   |   2 +-
 .../components/RenderData/Row.vue             |  65 ++-
 .../RenderClusterWithRelateCluster.vue        | 132 ++---
 .../components/ha-access-layer/Index.vue      |  12 +-
 .../page1/components/ha-access-layer/Row.vue  |   8 +-
 .../ha-storage-layer-local/Index.vue          |  12 +-
 .../components/ha-storage-layer-local/Row.vue |   8 +-
 .../ha-storage-layer-remote/Index.vue         |  12 +-
 .../ha-storage-layer-remote/Row.vue           |   8 +-
 .../components/single-storage-layer/Index.vue |  12 +-
 .../components/single-storage-layer/Row.vue   |  17 +-
 60 files changed, 1691 insertions(+), 1259 deletions(-)
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/ClusterNameWithSelector.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/InstanceWithSelector.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/IpInputWithIpSelector.vue
 delete mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/privilege-clone-inst/pages/page1/components/RenderData/RenderSource.vue

diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/tendb-cluster/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/tendb-cluster/Index.vue
index 66157f0f96..2efafb84a0 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/components/tendb-cluster/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/components/tendb-cluster/Index.vue
@@ -385,6 +385,11 @@
     }
     const currentSelected = selectedMap.value[activeTab.value];
     const isChecked = !!(currentSelected && currentSelected[data.id]);
+    if (isChecked && !props.multiple) {
+      // 单选不允许取消
+      return;
+    }
+
     handleSelecteRow(data, !isChecked);
   };
 
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/tendb-single/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/tendb-single/Index.vue
index d5f73f0482..0d72465afb 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/components/tendb-single/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/components/tendb-single/Index.vue
@@ -408,6 +408,11 @@
     }
     const currentSelected = selectedMap.value[activeTab.value];
     const isChecked = !!(currentSelected && currentSelected[data.id]);
+    if (isChecked && !props.multiple) {
+      // 单选不允许取消
+      return;
+    }
+
     handleSelecteRow(data, !isChecked);
   };
 
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue
index 47a369866d..f0ccc35cbc 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue
@@ -396,6 +396,11 @@
     }
     const currentSelected = selectedMap.value[activeTab.value];
     const isChecked = !!(currentSelected && currentSelected[data.id]);
+    if (isChecked && !props.multiple) {
+      // 单选不允许取消
+      return;
+    }
+
     handleSelecteRow(data, !isChecked);
   };
 
diff --git a/dbm-ui/frontend/src/components/instance-selector/Index.vue b/dbm-ui/frontend/src/components/instance-selector/Index.vue
index c7d806085e..bc8ba873e5 100644
--- a/dbm-ui/frontend/src/components/instance-selector/Index.vue
+++ b/dbm-ui/frontend/src/components/instance-selector/Index.vue
@@ -50,6 +50,7 @@
           :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"
@@ -292,7 +293,7 @@
   type RedisHostModel = ServiceReturnType<typeof getRedisMachineList>['results'][number];
 
   interface Props {
-    clusterTypes: (ClusterTypes | 'TendbhaHost' | 'TendbClusterHost' | 'RedisHost' | 'mongoCluster')[];
+    clusterTypes: string[];
     tabListConfig?: Record<string, PanelListType>;
     selected?: InstanceSelectorValues<T>;
     unqiuePanelValue?: boolean;
diff --git a/dbm-ui/frontend/src/components/instance-selector/components/mysql/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/mysql/Index.vue
index 126de05dfb..bba120c16f 100644
--- a/dbm-ui/frontend/src/components/instance-selector/components/mysql/Index.vue
+++ b/dbm-ui/frontend/src/components/instance-selector/components/mysql/Index.vue
@@ -69,6 +69,7 @@
               :get-table-list="getTableList"
               :is-remote-pagination="isRemotePagination"
               :last-values="lastValues"
+              :multiple="multiple"
               :role-filter-list="roleFilterList"
               :status-filter="statusFilter"
               :table-setting="tableSetting"
@@ -99,6 +100,7 @@
   interface Props {
     lastValues: InstanceSelectorValues<T>;
     tableSetting: TableSetting;
+    multiple?: NonNullable<TableConfigType['multiple']>;
     firsrColumn?: TableConfigType['firsrColumn'];
     roleFilterList?: TableConfigType['roleFilterList'];
     isRemotePagination?: TableConfigType['isRemotePagination'];
@@ -127,6 +129,7 @@
     topoAlertContent: undefined,
     roleFilterList: undefined,
     filterClusterId: undefined,
+    multiple: true,
   });
   const emits = defineEmits<Emits>();
 
diff --git a/dbm-ui/frontend/src/components/instance-selector/components/mysql/table/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/mysql/table/Index.vue
index 98d397265c..8f69603348 100644
--- a/dbm-ui/frontend/src/components/instance-selector/components/mysql/table/Index.vue
+++ b/dbm-ui/frontend/src/components/instance-selector/components/mysql/table/Index.vue
@@ -69,6 +69,7 @@
   interface Props {
     lastValues: InstanceSelectorValues<T>,
     tableSetting: TableSetting,
+    multiple?: boolean,
     clusterId?: number,
     isRemotePagination?: TableConfigType['isRemotePagination'],
     firsrColumn?: TableConfigType['firsrColumn'],
@@ -92,6 +93,7 @@
     activePanelId: 'tendbcluster',
     disabledRowConfig: undefined,
     roleFilterList: undefined,
+    multiple: true,
   });
 
   const emits = defineEmits<Emits>();
@@ -165,7 +167,7 @@
     {
       minWidth: 70,
       fixed: 'left',
-      label: () => (
+      label: () => props.multiple && (
         <div style="display:flex;align-items:center">
           <bk-checkbox
             label={true}
@@ -202,13 +204,20 @@
             </bk-popover>
           );
         }
-        return (
+        return props.multiple ? (
           <bk-checkbox
             style="vertical-align: middle;"
             label={true}
             model-value={Boolean(checkedMap.value[data[firstColumnFieldId.value]])}
             onChange={(value: boolean) => handleTableSelectOne(value, data)}
           />
+        ) : (
+          <bk-radio
+            style="vertical-align: middle;"
+            model-value={Boolean(checkedMap.value[data[firstColumnFieldId.value]])}
+            label={true}
+            onChange={(value: boolean) => handleTableSelectOne(value, data)}
+          />
         );
       },
     },
@@ -380,11 +389,16 @@
     }
 
     const isChecked = !!checkedMap.value[data[firstColumnFieldId.value]];
+    if (isChecked && !props.multiple) {
+      // 单选不允许取消
+      return;
+    }
+
     handleTableSelectOne(!isChecked, data);
   };
 
   const handleTableSelectOne = (checked: boolean, data: T) => {
-    const lastCheckMap = { ...checkedMap.value };
+    const lastCheckMap = props.multiple ? { ...checkedMap.value } : {};
     if (checked) {
       lastCheckMap[data[firstColumnFieldId.value]] = formatValue(data) as T;
     } else {
diff --git a/dbm-ui/frontend/src/components/render-table/columns/input/index.vue b/dbm-ui/frontend/src/components/render-table/columns/input/index.vue
index 82d9bf4ff5..7736979e9f 100644
--- a/dbm-ui/frontend/src/components/render-table/columns/input/index.vue
+++ b/dbm-ui/frontend/src/components/render-table/columns/input/index.vue
@@ -19,9 +19,9 @@
       'is-error': Boolean(errorMessage),
       'is-disabled': disabled,
       'is-password': isPassword,
-      'is-clearable': clearable,
     }">
     <BkInput
+      ref="inputRef"
       class="input-box"
       :disabled="disabled"
       :max="max"
@@ -37,20 +37,18 @@
       @keydown="handleKeydown"
       @paste="handlePaste">
     </BkInput>
-    <DbIcon
-      v-if="clearable && modelValue"
-      class="clear-icon"
-      type="close-circle-shape"
-      @click="handleClear" />
-    <DbIcon
-      v-if="errorMessage"
-      v-bk-tooltips="errorMessage"
-      class="error-icon"
-      type="exclamation-fill" />
-    <div
-      v-if="isShowBlur && isBlur"
-      class="blur-dispaly-main">
-      <slot name="blur" />
+    <div class="suspend-main">
+      <DbIcon
+        v-if="clearable && modelValue"
+        class="clear-icon"
+        type="close-circle-shape"
+        @click="handleClear" />
+      <slot name="suspend" />
+      <DbIcon
+        v-if="errorMessage"
+        v-bk-tooltips="errorMessage"
+        class="error-icon"
+        type="exclamation-fill" />
     </div>
   </div>
 </template>
@@ -66,7 +64,6 @@
     type?: string;
     min?: number;
     max?: number;
-    isShowBlur?: boolean;
     clearable?: boolean;
     ignoreSameInput?: boolean;
     pasteFn?: (value: string) => string;
@@ -94,7 +91,6 @@
     type: 'text',
     min: Number.MIN_SAFE_INTEGER,
     max: Number.MAX_SAFE_INTEGER,
-    isShowBlur: false,
     clearable: true,
     ignoreSameInput: false,
     pasteFn: undefined,
@@ -106,8 +102,12 @@
     default: '',
   });
 
+  defineSlots<{
+    suspend: any;
+    default: any;
+  }>();
+
   const rootRef = ref<HTMLElement>();
-  const isBlur = ref(true);
 
   const isPassword = computed(() => props.type === 'password');
 
@@ -129,14 +129,12 @@
 
   // 响应输入
   const handleInput = (value: string) => {
-    isBlur.value = false;
     window.changeConfirm = true;
     modelValue.value = value;
     emits('input', value);
   };
 
   const handleFocus = () => {
-    isBlur.value = false;
     emits('focus');
   };
 
@@ -153,7 +151,6 @@
   const handleBlur = (event: FocusEvent) => {
     setTimeout(() => {
       emits('blur', modelValue.value);
-      isBlur.value = true;
       if (props.disabled) {
         event.preventDefault();
         return;
@@ -182,7 +179,7 @@
       event.preventDefault();
       return;
     }
-    if (event.isComposing) {
+    if (event.isComposing || props.type === 'textarea') {
       // 跳过输入法复合事件
       return;
     }
@@ -205,12 +202,15 @@
   };
 
   // 粘贴
-  const handlePaste = (value: string, event: ClipboardEvent) => {
+  const handlePaste = (value: string, event: any) => {
     event.preventDefault();
+    // 获取光标位置
+    const cursorPosition = event.target.selectionStart;
     let paste = (event.clipboardData || window.clipboardData).getData('text');
     paste = encodeMult(paste);
     paste = paste.replace(/^\s+|\s+$/g, '');
-    modelValue.value = props.pasteFn ? props.pasteFn(paste) : paste;
+    paste = props.pasteFn ? props.pasteFn(paste) : paste;
+    modelValue.value = modelValue.value.slice(0, cursorPosition) + paste + modelValue.value.slice(cursorPosition);
     window.changeConfirm = true;
   };
 
@@ -233,12 +233,6 @@
 </script>
 <style lang="less" scoped>
   .is-error {
-    &.is-clearable {
-      :deep(input) {
-        padding-right: 45px;
-      }
-    }
-
     :deep(input) {
       padding: 0 16px;
       background-color: #fff0f1;
@@ -256,6 +250,24 @@
       }
     }
 
+    :deep(textarea) {
+      background-color: #fff0f1 !important;
+
+      &:hover {
+        cursor: pointer;
+        background-color: #fafbfd;
+        border: 1px solid #a3c5fd;
+      }
+
+      &:focus {
+        border-color: #3a84ff;
+      }
+
+      textarea {
+        background-color: #fff0f1;
+      }
+    }
+
     :deep(.bk-input--number-control) {
       display: none !important;
     }
@@ -263,10 +275,6 @@
     :deep(.bk-input--suffix-icon) {
       display: none !important;
     }
-
-    .clear-icon {
-      right: 28px !important;
-    }
   }
 
   .is-disabled {
@@ -296,12 +304,6 @@
     }
   }
 
-  .is-clearable {
-    :deep(input) {
-      padding-right: 25px;
-    }
-  }
-
   .table-edit-input {
     position: relative;
     min-height: 42px;
@@ -310,18 +312,35 @@
 
     &:hover {
       .clear-icon {
-        display: block;
+        display: block !important;
       }
     }
 
     .input-box {
       width: 100%;
-      height: 42px;
+      min-height: 42px;
       padding: 0;
       background: inherit;
       border: none;
       outline: none;
 
+      :deep(textarea) {
+        min-height: 42px !important;
+        line-height: 2.5 !important;
+        border: 1px solid transparent;
+        border-radius: 0;
+
+        &:hover {
+          cursor: pointer;
+          background-color: #fafbfd;
+          border: 1px solid #a3c5fd;
+        }
+
+        &:focus {
+          border-color: #3a84ff;
+        }
+      }
+
       :deep(input) {
         padding-left: 16px;
         border: 1px solid transparent;
@@ -345,30 +364,28 @@
       }
     }
 
-    .clear-icon {
+    .suspend-main {
       position: absolute;
-      top: 14px;
+      top: 50%;
       right: 10px;
-      display: none;
+      display: flex;
       font-size: 14px;
-      color: #c4c6cc;
+      transform: translateY(-50%);
+      align-items: center;
+      gap: 8px;
 
-      &:hover {
-        color: #979ba5;
-      }
-    }
+      .clear-icon {
+        display: none;
+        color: #c4c6cc;
 
-    .error-icon {
-      position: absolute;
-      top: 14px;
-      right: 10px;
-      display: flex;
-      font-size: 14px;
-      color: #ea3636;
-    }
+        &:hover {
+          color: #979ba5;
+        }
+      }
 
-    .blur-dispaly-main {
-      padding: 0 16px;
+      .error-icon {
+        color: #ea3636;
+      }
     }
   }
 </style>
diff --git a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/instanceClone.ts b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/instanceClone.ts
index 7ee7759dac..ca7691e0e9 100644
--- a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/instanceClone.ts
+++ b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/instanceClone.ts
@@ -39,23 +39,8 @@ export async function generateMysqlInstanceCloneData(ticketData: TicketModel<MyS
     const targetInstance = instanceInfoMap[item.target];
     return {
       rowKey: random(),
-      source: {
-        bkCloudId: sourceInstance.bk_cloud_id,
-        clusterId: sourceInstance.cluster_id,
-        dbModuleId: sourceInstance.db_module_id,
-        dbModuleName: sourceInstance.db_module_name,
-        instanceAddress: sourceInstance.instance_address,
-        masterDomain: sourceInstance.master_domain,
-        clusterType: sourceInstance.cluster_type,
-      },
-      target: {
-        cluster_id: targetInstance.cluster_id,
-        bk_host_id: targetInstance.bk_host_id,
-        bk_cloud_id: targetInstance.bk_cloud_id,
-        port: targetInstance.port,
-        ip: targetInstance.ip,
-        instance_address: targetInstance.instance_address,
-      },
+      source: sourceInstance,
+      target: targetInstance,
     };
   });
   return Promise.resolve({
diff --git a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/masterSlaveSwitch.ts b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/masterSlaveSwitch.ts
index 7ac5ddb155..13d9c0e036 100644
--- a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/masterSlaveSwitch.ts
+++ b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/masterSlaveSwitch.ts
@@ -10,8 +10,6 @@
  * 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.
  */
-import _ from 'lodash';
-
 import type { MySQLMasterSlaveDetails } from '@services/model/ticket/details/mysql';
 import TicketModel from '@services/model/ticket/ticket';
 
@@ -26,20 +24,15 @@ export function generateMysqlMasterSlaveSwicthCloneData(ticketData: TicketModel<
     is_check_process: isCheckProcess,
     is_verify_checksum: isVerifyChecksum,
   } = ticketData.details;
-  const tableDataList = _.flatMap(
-    infos.map((item) => {
-      const clusterId = item.cluster_ids[0];
-      return {
-        rowKey: random(),
-        clusterData: {
-          id: clusterId,
-          domain: clusters[clusterId].immute_domain,
-        },
-        masterData: item.master_ip,
-        slaveData: item.slave_ip,
-      };
-    }),
-  );
+  const tableDataList = infos.map((item) => ({
+    rowKey: random(),
+    clusterData: {
+      id: item.cluster_ids[0],
+      domain: clusters[item.cluster_ids[0]].immute_domain,
+    },
+    masterData: item.master_ip,
+    slaveData: item.slave_ip,
+  }));
 
   return Promise.resolve({
     isCheckDelay,
diff --git a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/restoreLocalSlave.ts b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/restoreLocalSlave.ts
index f2fba038f8..1fdf74d3f3 100644
--- a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/restoreLocalSlave.ts
+++ b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/restoreLocalSlave.ts
@@ -21,12 +21,12 @@ export function generateMysqlRestoreLocalSlaveCloneData(ticketData: TicketModel<
   const tableDataList = infos.map((item) => ({
     rowKey: random(),
     slave: {
-      bkCloudId: item.slave.bk_cloud_id,
-      bkHostId: item.slave.bk_host_id,
+      bk_cloud_id: item.slave.bk_cloud_id,
+      bk_host_id: item.slave.bk_host_id,
       ip: item.slave.ip,
       port: item.slave.port,
-      instanceAddress: `${item.slave.ip}:${item.slave.port}`,
-      clusterId: item.cluster_id,
+      instance_address: `${item.slave.ip}:${item.slave.port}`,
+      cluster_id: item.cluster_id,
     },
   }));
   return Promise.resolve({
diff --git a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/restoreSlave.ts b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/restoreSlave.ts
index 8f253983af..1611e5faee 100644
--- a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/restoreSlave.ts
+++ b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/restoreSlave.ts
@@ -10,8 +10,6 @@
  * 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.
  */
-import _ from 'lodash';
-
 import type { MySQLRestoreSlaveDetails } from '@services/model/ticket/details/mysql';
 import TicketModel from '@services/model/ticket/ticket';
 
@@ -20,30 +18,25 @@ import { random } from '@utils';
 // MySQL 重建从库-新机重建
 export function generateMysqlRestoreSlaveCloneData(ticketData: TicketModel<MySQLRestoreSlaveDetails>) {
   const { infos } = ticketData.details;
-  const tableDataList = _.flatMap(
-    infos.map((item) => {
-      const clusterId = item.cluster_ids[0];
-      return {
-        rowKey: random(),
-        oldSlave: {
-          bkCloudId: item.old_slave.bk_cloud_id,
-          bkCloudName: '',
-          bkHostId: item.old_slave.bk_host_id,
-          ip: item.old_slave.ip,
-          port: item.old_slave.port,
-          instanceAddress: `${item.old_slave.ip}:${item.old_slave.port}`,
-          clusterId,
-        },
-        newSlave: {
-          bkBizId: item.new_slave.bk_biz_id,
-          bkCloudId: item.new_slave.bk_cloud_id,
-          bkHostId: item.new_slave.bk_host_id,
-          ip: item.new_slave.ip,
-          port: item.new_slave.port,
-        },
-      };
-    }),
-  );
+  const tableDataList = infos.map((item) => ({
+    rowKey: random(),
+    oldSlave: {
+      bk_cloud_id: item.old_slave.bk_cloud_id,
+      bk_cloud_name: '',
+      bk_host_id: item.old_slave.bk_host_id,
+      ip: item.old_slave.ip,
+      port: item.old_slave.port,
+      instance_address: `${item.old_slave.ip}:${item.old_slave.port}`,
+      cluster_id: item.cluster_ids[0],
+    },
+    newSlave: {
+      bk_biz_id: item.new_slave.bk_biz_id,
+      bk_cloud_id: item.new_slave.bk_cloud_id,
+      bk_host_id: item.new_slave.bk_host_id,
+      ip: item.new_slave.ip,
+      port: item.new_slave.port,
+    },
+  }));
 
   return Promise.resolve({
     tableDataList,
diff --git a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/versionMigrateUpgrade.ts b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/versionMigrateUpgrade.ts
index 55719d9caa..a0b84a2237 100644
--- a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/versionMigrateUpgrade.ts
+++ b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/versionMigrateUpgrade.ts
@@ -24,6 +24,7 @@ export async function generateMysqlVersionMigrateUpgradeCloneData(ticketData: Ti
   const clusterListResult = await getTendbhaList({
     id: infos.map((item) => item.cluster_ids[0]).join(','),
   });
+
   const clusterListMap = clusterListResult.results.reduce(
     (obj, item) => {
       Object.assign(obj, {
diff --git a/dbm-ui/frontend/src/services/source/dbbase.ts b/dbm-ui/frontend/src/services/source/dbbase.ts
index 6d4b79e22a..aa3b776dfc 100644
--- a/dbm-ui/frontend/src/services/source/dbbase.ts
+++ b/dbm-ui/frontend/src/services/source/dbbase.ts
@@ -34,6 +34,8 @@ export function filterClusters<
     bk_cloud_name: string;
     cluster_name: string;
     cluster_type: string;
+    master_domain: string;
+    id: number;
   },
 >(params: { bk_biz_id: number; exact_domain?: string; cluster_ids?: string }) {
   return http.get<T[]>(`${path}/filter_clusters/`, params);
diff --git a/dbm-ui/frontend/src/services/source/tendbha.ts b/dbm-ui/frontend/src/services/source/tendbha.ts
index 6763da7055..d095f17550 100644
--- a/dbm-ui/frontend/src/services/source/tendbha.ts
+++ b/dbm-ui/frontend/src/services/source/tendbha.ts
@@ -34,7 +34,8 @@ export function getTendbhaList(params: {
   exact_domain?: string;
   master_domain?: string;
   slave_domain?: string;
-  id?: string;
+  exact_domain?: string;
+  id?: string | number;
 }) {
   return http.get<ListBase<TendbhaModel[]>>(`${getRootPath()}/`, params).then((data) => ({
     ...data,
diff --git a/dbm-ui/frontend/src/services/source/tendbsingle.ts b/dbm-ui/frontend/src/services/source/tendbsingle.ts
index c8165af5f5..a2a295cb1e 100644
--- a/dbm-ui/frontend/src/services/source/tendbsingle.ts
+++ b/dbm-ui/frontend/src/services/source/tendbsingle.ts
@@ -21,7 +21,12 @@ const getRootPath = () => `/apis/mysql/bizs/${window.PROJECT_CONFIG.BIZ_ID}/tend
 /**
  * 查询资源列表
  */
-export function getTendbsingleList(params: { limit?: number; offset?: number; cluster_ids?: number[] | number }) {
+export function getTendbsingleList(params: {
+  cluster_ids?: string;
+  id?: string | number;
+  limit?: number;
+  offset?: number;
+}) {
   return http.get<ListBase<TendbsingleModel[]>>(`${getRootPath()}/`, params).then((data) => ({
     ...data,
     results: data.results.map(
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/components/edit-field/ClusterName.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/components/edit-field/ClusterName.vue
index aaf2a18b15..a13c855ddf 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/components/edit-field/ClusterName.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/components/edit-field/ClusterName.vue
@@ -19,7 +19,7 @@
     :placeholder="t('请输入或选择集群')"
     :rules="rules"
     @submit="handleInputFinish">
-    <template #blur>
+    <template #suspend>
       <slot name="blur" />
     </template>
   </TableEditInput>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/checksum/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/checksum/pages/page1/Index.vue
index 48320ec8a0..0159129780 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/checksum/pages/page1/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/checksum/pages/page1/Index.vue
@@ -396,7 +396,7 @@
         return createTicket(params).then((data) => {
           window.changeConfirm = false;
           router.push({
-            name: 'spiderChecksum',
+            name: 'MySQLChecksum',
             params: {
               page: 'success',
             },
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/checksum/pages/page1/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/checksum/pages/page1/components/RenderData/Row.vue
index a08c715fc2..d087f3f32d 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/checksum/pages/page1/components/RenderData/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/checksum/pages/page1/components/RenderData/Row.vue
@@ -17,7 +17,7 @@
       <RenderCluster
         ref="clusterRef"
         :model-value="data.clusterData"
-        @id-change="handleClusterIdChange" />
+        @cluster-change="handleClusterIdChange" />
     </FixedColumn>
     <td style="padding: 0">
       <RenderText
@@ -133,7 +133,7 @@
 
   import RenderText from '@components/render-table/columns/text-plain/index.vue';
 
-  import RenderCluster from '@views/db-manage/mysql/common/edit-field/ClusterName.vue';
+  import RenderCluster from '@views/db-manage/mysql/common/edit-field/ClusterNameWithSelector.vue';
   import RenderDbName from '@views/db-manage/mysql/common/edit-field/DbName.vue';
   import RenderTableName from '@views/db-manage/mysql/common/edit-field/TableName.vue';
 
@@ -188,9 +188,9 @@
     localRowData.value.ignoreDbs = value;
   };
 
-  const handleClusterIdChange = (clusterId: number) => {
-    emits('clusterInputFinish', clusterId);
-    localClusterId.value = clusterId;
+  const handleClusterIdChange = (info: { id: number }) => {
+    emits('clusterInputFinish', info.id);
+    localClusterId.value = info.id;
   };
 
   const handleRemove = () => {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/ClusterNameWithSelector.vue b/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/ClusterNameWithSelector.vue
new file mode 100644
index 0000000000..8579c9ac34
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/ClusterNameWithSelector.vue
@@ -0,0 +1,345 @@
+<!--
+ * 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>
+  <TableEditInput
+    ref="inputRef"
+    v-model="localDomain"
+    class="cluster-name-with-selector"
+    :placeholder="t('请输入集群域名或从表头批量选择')"
+    :rules="rules"
+    @blur="() => (isFocused = false)"
+    @error="handleInputError"
+    @focus="() => (isFocused = true)"
+    @submit="handleInputChange">
+    <template #suspend>
+      <BkPopover
+        v-if="!isFocused"
+        :content="t('选择集群')"
+        placement="top"
+        :popover-delay="0">
+        <div class="edit-btn-wraper">
+          <div
+            class="edit-btn"
+            @click="handleClickSeletor">
+            <div class="edit-btn-inner">
+              <DbIcon
+                class="select-icon"
+                type="host-select" />
+            </div>
+          </div>
+        </div>
+      </BkPopover>
+    </template>
+  </TableEditInput>
+  <ClusterSelector
+    v-model:is-show="isShowSelector"
+    :cluster-types="tabList"
+    only-one-type
+    :selected="selectedClusters"
+    :tab-list-config="tabListConfig"
+    @change="handelClusterChange" />
+</template>
+<script lang="ts">
+  const clusterIdMemo: { [key: string]: Record<string, boolean> } = {};
+</script>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import TendbhaModel from '@services/model/mysql/tendbha';
+  import { queryClusters } from '@services/source/mysqlCluster';
+
+  import { ClusterTypes } from '@common/const';
+
+  import ClusterSelector, { type TabConfig } from '@components/cluster-selector/Index.vue';
+  import TableEditInput from '@components/render-table/columns/input/index.vue';
+
+  import { random } from '@utils';
+
+  export interface ClusterBasicInfo {
+    id: number;
+    domain: string;
+    bizId: number;
+    cloudId: number;
+    cloudName: string;
+    clusterType: string;
+  }
+
+  interface Props {
+    modelValue?: {
+      id: number;
+      domain: string;
+      type?: string;
+    };
+    onlyOneType?: boolean;
+    clusterTypes?: string[];
+    tabs?: 'tendbha' | 'tendbsingle' | 'both';
+  }
+
+  interface Emits {
+    (e: 'clusterChange', info: ClusterBasicInfo): void;
+    (e: 'error', value: boolean): void;
+  }
+
+  interface Exposes {
+    getValue: () => Promise<{ cluster_id: number }>;
+    focus: () => void;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    modelValue: undefined,
+    odelValue: undefined,
+    onlyOneType: false,
+    clusterTypes: () => [],
+    tabs: 'tendbha',
+  });
+
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+
+  const inputRef = ref();
+  const isFocused = ref(false);
+  const isShowSelector = ref(false);
+  const selectedClusters = shallowRef<{ [key: string]: Array<any> }>({
+    [ClusterTypes.TENDBHA]: [],
+    [ClusterTypes.TENDBSINGLE]: [],
+  });
+
+  const instanceKey = `render_cluster_${random()}`;
+  clusterIdMemo[instanceKey] = {};
+
+  const tabListConfig = {
+    [ClusterTypes.TENDBHA]: {
+      multiple: false,
+    },
+    [ClusterTypes.TENDBSINGLE]: {
+      multiple: false,
+    },
+  } as unknown as Record<string, TabConfig>;
+
+  const localClusterId = ref(0);
+  const localDomain = ref('');
+
+  const tabList = computed(() => {
+    if (props.tabs === 'tendbha') {
+      return [ClusterTypes.TENDBHA];
+    }
+    if (props.tabs === 'tendbsingle') {
+      return [ClusterTypes.TENDBSINGLE];
+    }
+    return [ClusterTypes.TENDBHA, ClusterTypes.TENDBSINGLE];
+  });
+
+  let isSkipInputFinish = false;
+
+  const rules = [
+    {
+      validator: (value: string) => {
+        if (value) {
+          return true;
+        }
+        return false;
+      },
+      message: t('目标集群不能为空'),
+    },
+    {
+      validator: (value: string) =>
+        queryClusters({
+          cluster_filters: [
+            {
+              immute_domain: value,
+            },
+          ],
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        }).then((data) => {
+          if (data.length > 0) {
+            const {
+              id,
+              master_domain: domain,
+              bk_biz_id: bizId,
+              bk_cloud_id: cloudId,
+              bk_cloud_name: cloudName,
+              cluster_type: clusterType,
+            } = data[0];
+            localClusterId.value = id;
+            if (!isSkipInputFinish) {
+              emits('clusterChange', {
+                id,
+                domain,
+                bizId,
+                cloudId,
+                cloudName,
+                clusterType,
+              });
+            }
+            return true;
+          }
+          return false;
+        }),
+      message: t('目标集群不存在'),
+    },
+    {
+      validator: () => {
+        if (!props.onlyOneType) {
+          return true;
+        }
+        const types = new Set(props.clusterTypes.filter((item) => !!item));
+        return types.size === 1;
+      },
+      message: t('只允许提交一种集群类型'),
+    },
+    {
+      validator: () => {
+        const currentClusterSelectMap = clusterIdMemo[instanceKey];
+        const otherClusterMemoMap = { ...clusterIdMemo };
+        delete otherClusterMemoMap[instanceKey];
+
+        const otherClusterIdMap = Object.values(otherClusterMemoMap).reduce(
+          (result, item) => ({
+            ...result,
+            ...item,
+          }),
+          {} as Record<string, boolean>,
+        );
+
+        const currentSelectClusterIdList = Object.keys(currentClusterSelectMap);
+        for (let i = 0; i < currentSelectClusterIdList.length; i++) {
+          if (otherClusterIdMap[currentSelectClusterIdList[i]]) {
+            return false;
+          }
+        }
+        return true;
+      },
+      message: t('目标集群重复'),
+    },
+  ];
+
+  // 同步外部值
+  watch(
+    () => props.modelValue,
+    () => {
+      if (props.modelValue) {
+        localClusterId.value = props.modelValue.id;
+        localDomain.value = props.modelValue.domain;
+      }
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
+
+  // 获取关联集群
+  watch(
+    localClusterId,
+    () => {
+      if (!localClusterId.value) {
+        return;
+      }
+      clusterIdMemo[instanceKey][localClusterId.value] = true;
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  const handleClickSeletor = () => {
+    isShowSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    if (value === '') {
+      clusterIdMemo[instanceKey] = {};
+    }
+  };
+
+  // 批量选择
+  const handelClusterChange = (selected: { [key: string]: TendbhaModel[] }) => {
+    selectedClusters.value = selected;
+    const list = Object.keys(selected).reduce((list: TendbhaModel[], key) => list.concat(...selected[key]), []);
+    localDomain.value = list[0].master_domain;
+    window.changeConfirm = true;
+    setTimeout(() => {
+      inputRef.value.getValue();
+    });
+  };
+
+  const handleInputError = (value: boolean) => {
+    emits('error', value);
+  };
+
+  onBeforeUnmount(() => {
+    delete clusterIdMemo[instanceKey];
+  });
+
+  defineExpose<Exposes>({
+    getValue() {
+      isSkipInputFinish = true;
+      return inputRef.value
+        .getValue()
+        .then(() => ({
+          cluster_id: localClusterId.value,
+        }))
+        .finally(() => {
+          isSkipInputFinish = false;
+        });
+    },
+    focus() {
+      inputRef.value.focus();
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .cluster-name-with-selector {
+    &:hover {
+      :deep(.edit-btn-wraper) {
+        display: block;
+      }
+    }
+  }
+
+  .edit-btn-wraper {
+    display: none;
+
+    .edit-btn {
+      display: flex;
+      width: 24px;
+      height: 40px;
+      align-items: center;
+
+      .edit-btn-inner {
+        display: flex;
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+        border-radius: 2px;
+        align-items: center;
+        justify-content: center;
+
+        .select-icon {
+          font-size: 16px;
+          color: #979ba5;
+        }
+
+        &:hover {
+          background: #f0f1f5;
+
+          .select-icon {
+            color: #3a84ff;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/ClusterWithRelateCluster.vue b/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/ClusterWithRelateCluster.vue
index 7b541422cc..d5ad69b0c1 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/ClusterWithRelateCluster.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/ClusterWithRelateCluster.vue
@@ -18,17 +18,15 @@
       'is-editing': isShowEdit,
     }">
     <TableEditInput
-      v-show="isShowEdit"
+      v-if="isShowEdit"
       ref="editRef"
-      v-model="localDomain"
-      :placeholder="t('请输入集群域名或从表头批量选择')"
-      :rules="rules"
-      @submit="handleEditSubmit" />
-    <div v-show="!isShowEdit">
+      :model-value="localClusterInfo"
+      @cluster-change="handleEditSubmit" />
+    <div v-else>
       <div
         class="render-cluster-domain"
         @click="handleShowEdit">
-        <span>{{ localDomain }}</span>
+        <span>{{ localClusterInfo.domain }}</span>
         <div
           v-if="isRelateLoading"
           class="relate-loading">
@@ -63,7 +61,9 @@
             <span style="font-weight: bold; color: #313238">
               {{ t('同机关联集群') }}
             </span>
-            <span style="color: #63656e">（{{ relateClusterTips }}）</span>
+            <span style="color: #63656e"
+              >（{{ relateClusterTips ? relateClusterTips : t('同主机关联的其他集群，勾选后一同克隆') }}）</span
+            >
           </div>
           <div style="max-height: 300px; overflow: auto">
             <template v-if="relatedClusterList.length > 0">
@@ -99,11 +99,11 @@
   import { onBeforeUnmount, ref, shallowRef, watch } from 'vue';
   import { useI18n } from 'vue-i18n';
 
-  import { findRelatedClustersByClusterIds, queryClusters } from '@services/source/mysqlCluster';
+  import { findRelatedClustersByClusterIds } from '@services/source/mysqlCluster';
 
   import { useGlobalBizs } from '@stores';
 
-  import TableEditInput from '@components/render-table/columns/input/index.vue';
+  import TableEditInput from '@views/db-manage/mysql/common/edit-field/ClusterNameWithSelector.vue';
 
   import { random } from '@utils';
 
@@ -131,7 +131,7 @@
 
   const props = withDefaults(defineProps<Props>(), {
     modelValue: undefined,
-    relateClusterTips: '同主机关联的其他集群，勾选后一同克隆',
+    relateClusterTips: '',
   });
   const emits = defineEmits<Emits>();
 
@@ -147,97 +147,23 @@
   const handlerRef = ref();
   const popRef = ref();
 
-  const localClusterId = ref(0);
-  const localDomain = ref('');
+  const localClusterInfo = ref({
+    id: 0,
+    domain: '',
+  });
   const isShowEdit = ref(true);
   const isShowRelateMemo = ref(false);
   const isRelateLoading = ref(false);
+
   const relatedClusterList = shallowRef<Array<IClusterData>>([]);
   const realateCheckedMap = shallowRef<Record<number, IClusterData>>({});
   const selectRelateClusterList = shallowRef<Array<IClusterData>>([]);
 
-  const rules = [
-    {
-      validator: (value: string) => {
-        if (value) {
-          return true;
-        }
-        emits('idChange', {
-          id: 0,
-          cloudId: null,
-        });
-        return false;
-      },
-      message: '目标集群不能为空',
-    },
-    {
-      validator: (value: string) =>
-        queryClusters({
-          cluster_filters: [
-            {
-              immute_domain: value,
-            },
-          ],
-          bk_biz_id: currentBizId,
-        }).then((data) => {
-          if (data.length > 0) {
-            localClusterId.value = data[0].id;
-            emits('idChange', {
-              id: localClusterId.value,
-              cloudId: data[0].bk_cloud_id,
-            });
-            return true;
-          }
-          emits('idChange', {
-            id: 0,
-            cloudId: null,
-          });
-          return false;
-        }),
-      message: '目标集群不存在',
-    },
-    {
-      validator: () => {
-        const currentClusterSelectMap = clusterIdMemo[instanceKey];
-        const otherClusterMemoMap = { ...clusterIdMemo };
-        delete otherClusterMemoMap[instanceKey];
-
-        const otherClusterIdMap = Object.values(otherClusterMemoMap).reduce(
-          (result, item) => ({
-            ...result,
-            ...item,
-          }),
-          {} as Record<string, boolean>,
-        );
-
-        const currentSelectClusterIdList = Object.keys(currentClusterSelectMap);
-        for (let i = 0; i < currentSelectClusterIdList.length; i++) {
-          if (otherClusterIdMap[currentSelectClusterIdList[i]]) {
-            return false;
-          }
-        }
-        return true;
-      },
-      message: '目标集群重复',
-    },
-  ];
-
-  // const checkRelateDisable = (clusterData: IClusterData) => {
-  //   const otherClusterMemoMap = { ...clusterIdMemo };
-  //   delete otherClusterMemoMap[instanceKey];
-  //   const otherClusterIdMap = Object.values(otherClusterMemoMap).reduce((result, item) => ({
-  //     ...result,
-  //     ...item,
-  //   }), {} as Record<string, boolean>);
-  //   console.log(otherClusterMemoMap, clusterData);
-  //   return otherClusterIdMap[clusterData.id];
-  // };
-
   // 通过 ID 获取关联集群
   const fetchRelatedClustersByClusterIds = () => {
     isRelateLoading.value = true;
     findRelatedClustersByClusterIds({
-      cluster_ids: [localClusterId.value],
+      cluster_ids: [localClusterInfo.value.id],
       bk_biz_id: currentBizId,
     })
       .then((data) => {
@@ -300,8 +226,10 @@
     () => props.modelValue,
     () => {
       const { id = 0, domain = '' } = props.modelValue || {};
-      localClusterId.value = id;
-      localDomain.value = domain;
+      localClusterInfo.value = {
+        id,
+        domain,
+      };
       isShowEdit.value = !id;
     },
     {
@@ -311,13 +239,13 @@
 
   // 获取关联集群
   watch(
-    localClusterId,
-    () => {
-      if (!localClusterId.value) {
+    () => localClusterInfo.value.id,
+    (clusterId) => {
+      if (!clusterId) {
         clusterIdMemo[instanceKey] = {};
         return;
       }
-      clusterIdMemo[instanceKey] = { [localClusterId.value]: true };
+      clusterIdMemo[instanceKey][clusterId] = true;
       fetchRelatedClustersByClusterIds();
     },
     {
@@ -334,12 +262,21 @@
   };
 
   // 提交编辑
-  const handleEditSubmit = (value: string) => {
-    if (!value) {
+  const handleEditSubmit = (info: { id: number; domain: string; cloudId: number }) => {
+    if (!info.domain) {
       return;
     }
 
+    const { id, domain, cloudId } = info;
+    localClusterInfo.value = {
+      id,
+      domain,
+    };
     isShowEdit.value = false;
+    emits('idChange', {
+      id,
+      cloudId,
+    });
     nextTick(() => {
       initRelateClusterPopover();
     });
@@ -376,14 +313,17 @@
   defineExpose<Exposes>({
     getValue() {
       const result = {
-        cluster_ids: _.uniq([localClusterId.value, ...Object.values(realateCheckedMap.value).map((item) => item.id)]),
+        cluster_ids: _.uniq([
+          localClusterInfo.value.id,
+          ...Object.values(realateCheckedMap.value).map((item) => item.id),
+        ]),
       };
       // 用户输入未完成验证
       if (editRef.value) {
         return editRef.value.getValue().then(() => result);
       }
       // 用户输入错误
-      if (!localClusterId.value) {
+      if (!localClusterInfo.value.id) {
         return Promise.reject();
       }
       return Promise.resolve(result);
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/InstanceWithSelector.vue b/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/InstanceWithSelector.vue
new file mode 100644
index 0000000000..4d5313afda
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/InstanceWithSelector.vue
@@ -0,0 +1,297 @@
+<!--
+ * 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>
+  <TableEditInput
+    ref="inputRef"
+    v-model="localValue"
+    class="cluster-name-with-selector"
+    :placeholder="placeholder ? placeholder : t('请输入IP:Port或从表头批量选择')"
+    :rules="rules"
+    @blur="() => (isFocused = false)"
+    @error="handleInputError"
+    @focus="() => (isFocused = true)">
+    <template #suspend>
+      <BkPopover
+        v-if="!isFocused"
+        :content="t('选择实例')"
+        placement="top"
+        :popover-delay="0">
+        <div class="edit-btn-wraper">
+          <div
+            class="edit-btn"
+            @click="handleClickSeletor">
+            <div class="edit-btn-inner">
+              <DbIcon
+                class="select-icon"
+                type="host-select" />
+            </div>
+          </div>
+        </div>
+      </BkPopover>
+    </template>
+  </TableEditInput>
+  <InstanceSelector
+    v-model:is-show="isShowInstanceSelecotr"
+    :cluster-types="clusterTypes"
+    :selected="selectedIntances"
+    :tab-list-config="tabListConfig"
+    @change="handleInstancesChange" />
+</template>
+<script lang="ts">
+  const instanceWithSelectorMemo: { [key: string]: Record<string, boolean> } = {};
+</script>
+<script setup lang="ts">
+  import _ from 'lodash';
+  import { useI18n } from 'vue-i18n';
+
+  import TendbhaInstanceModel from '@services/model/mysql/tendbha-instance';
+  import { checkMysqlInstances } from '@services/source/instances';
+
+  import { ClusterTypes } from '@common/const';
+  import { ipPort, ipv4 } from '@common/regex';
+
+  import InstanceSelector, {
+    type InstanceSelectorValues,
+    type PanelListType,
+  } from '@components/instance-selector/Index.vue';
+  import TableEditInput from '@components/render-table/columns/input/index.vue';
+
+  import { random } from '@utils';
+
+  export interface InstanceBasicInfo {
+    ip: string;
+    port?: number;
+    instance_address?: string;
+    bk_cloud_id?: number;
+    bk_cloud_name?: string;
+    bk_host_id?: number;
+    cluster_id?: number;
+    db_module_id?: number;
+    db_module_name?: string;
+    master_domain?: string;
+    cluster_type?: string;
+  }
+
+  interface Props {
+    type?: 'instance' | 'cloud-instance' | 'ip'; // instance: ip:port, cloud-instance: cloudId:ip:ipPort, ip: ip
+    clusterTypes?: string[];
+    placeholder?: string;
+    tabListConfig?: Record<ClusterTypes, PanelListType>;
+    checkDuplicate?: boolean;
+  }
+
+  interface Emits {
+    (e: 'instanceChange', value: Required<InstanceBasicInfo>): void;
+    (e: 'error', value: boolean): void;
+  }
+
+  interface Exposes {
+    getValue: () => Promise<InstanceBasicInfo>;
+    focus: () => void;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    clusterTypes: () => [ClusterTypes.TENDBHA],
+    placeholder: '',
+    type: 'instance',
+    checkDuplicate: true,
+    tabListConfig: undefined,
+  });
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<InstanceBasicInfo>();
+
+  const { t } = useI18n();
+
+  const inputRef = ref();
+  const isFocused = ref(false);
+  const isShowInstanceSelecotr = ref(false);
+  const localValue = ref('');
+  const selectedIntances = shallowRef<InstanceSelectorValues<TendbhaInstanceModel>>({ [ClusterTypes.TENDBHA]: [] });
+
+  const instanceKey = `instance_${random()}`;
+  instanceWithSelectorMemo[instanceKey] = {};
+
+  const rules = [
+    {
+      validator: (value: string) => Boolean(_.trim(value)),
+      message: t('不能为空'),
+    },
+    {
+      validator: (value: string) => {
+        if (props.type === 'instance') {
+          return ipPort.test(value);
+        }
+        if (props.type === 'ip') {
+          return ipv4.test(value);
+        }
+        return true;
+      },
+      message: t('格式不正确'),
+    },
+    {
+      validator: (value: string) =>
+        checkMysqlInstances({
+          bizId: window.PROJECT_CONFIG.BIZ_ID,
+          instance_addresses: [value],
+        }).then((data) => {
+          if (data.length < 1) {
+            return false;
+          }
+
+          const [instanceData] = data;
+          instanceWithSelectorMemo[instanceKey][instanceData.instance_address] = true;
+          if (
+            !modelValue.value?.instance_address ||
+            modelValue.value.instance_address !== instanceData.instance_address
+          ) {
+            modelValue.value = instanceData;
+            emits('instanceChange', instanceData);
+          }
+          return true;
+        }),
+      message: t('实例不存在'),
+    },
+    {
+      validator: () => {
+        if (!props.checkDuplicate) {
+          return true;
+        }
+        const currentClusterSelectMap = instanceWithSelectorMemo[instanceKey];
+        const otherClusterMemoMap = { ...instanceWithSelectorMemo };
+        delete otherClusterMemoMap[instanceKey];
+
+        const otherClusterIdMap = Object.values(otherClusterMemoMap).reduce(
+          (result, item) => ({
+            ...result,
+            ...item,
+          }),
+          {} as Record<string, boolean>,
+        );
+
+        const currentSelectClusterIdList = Object.keys(currentClusterSelectMap);
+        for (let i = 0; i < currentSelectClusterIdList.length; i++) {
+          if (otherClusterIdMap[currentSelectClusterIdList[i]]) {
+            return false;
+          }
+        }
+        return true;
+      },
+      message: t('实例/IP重复'),
+    },
+  ];
+
+  watch(
+    () => modelValue.value,
+    () => {
+      if (!modelValue.value || !modelValue.value.ip) {
+        return;
+      }
+
+      if (props.type === 'instance') {
+        localValue.value = `${modelValue.value.ip}:${modelValue.value.port}`;
+      } else if (props.type === 'ip') {
+        localValue.value = modelValue.value.ip;
+      } else {
+        localValue.value = `${modelValue.value.bk_cloud_id}:${modelValue.value.ip}:${modelValue.value.port}`;
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  const handleClickSeletor = () => {
+    isShowInstanceSelecotr.value = true;
+  };
+
+  // 批量选择
+  const handleInstancesChange = (selected: InstanceSelectorValues<TendbhaInstanceModel>) => {
+    selectedIntances.value = selected;
+    const list = selected[ClusterTypes.TENDBHA];
+    if (props.type === 'instance') {
+      localValue.value = list[0].instance_address;
+    } else if (props.type === 'ip') {
+      localValue.value = list[0].ip;
+    } else {
+      localValue.value = list[0].instance_address;
+    }
+
+    window.changeConfirm = true;
+    setTimeout(() => {
+      inputRef.value.getValue();
+    });
+  };
+
+  const handleInputError = (value: boolean) => {
+    emits('error', value);
+  };
+
+  onBeforeUnmount(() => {
+    delete instanceWithSelectorMemo[instanceKey];
+  });
+
+  defineExpose<Exposes>({
+    getValue() {
+      return inputRef.value.getValue().then(() => modelValue.value);
+    },
+    focus() {
+      inputRef.value.focus();
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .cluster-name-with-selector {
+    &:hover {
+      :deep(.edit-btn-wraper) {
+        display: block;
+      }
+    }
+  }
+
+  .edit-btn-wraper {
+    display: none;
+
+    .edit-btn {
+      display: flex;
+      width: 24px;
+      height: 40px;
+      align-items: center;
+
+      .edit-btn-inner {
+        display: flex;
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+        border-radius: 2px;
+        align-items: center;
+        justify-content: center;
+
+        .select-icon {
+          font-size: 16px;
+          color: #979ba5;
+        }
+
+        &:hover {
+          background: #f0f1f5;
+
+          .select-icon {
+            color: #3a84ff;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/IpInputWithIpSelector.vue b/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/IpInputWithIpSelector.vue
new file mode 100644
index 0000000000..bf26b98745
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/IpInputWithIpSelector.vue
@@ -0,0 +1,269 @@
+<!--
+ * 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>
+  <TableEditInput
+    ref="inputRef"
+    v-model="localValue"
+    class="cluster-name-with-selector"
+    :placeholder="t('请输入或选择主机')"
+    :rules="rules"
+    @blur="() => (isFocused = false)"
+    @error="handleInputError"
+    @focus="() => (isFocused = true)">
+    <template #suspend>
+      <BkPopover
+        v-if="!isFocused"
+        :content="t('从业务拓扑选择')"
+        placement="top"
+        :popover-delay="0">
+        <div class="edit-btn-wraper">
+          <div
+            class="edit-btn"
+            @click="handleClickSeletor">
+            <div class="edit-btn-inner">
+              <DbIcon
+                class="select-icon"
+                type="host-select" />
+            </div>
+          </div>
+        </div>
+      </BkPopover>
+    </template>
+  </TableEditInput>
+  <IpSelector
+    v-model:show-dialog="isShowSelecotr"
+    :biz-id="currentBizId"
+    button-text=""
+    :cloud-info="{
+      id: cloudInfo?.cloudId,
+      name: cloudInfo?.cloudName,
+    }"
+    :os-types="[OSTypes.Linux]"
+    service-mode="all"
+    :show-view="false"
+    :single-host-select="!multiple"
+    @change="handleHostChange" />
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import { checkMysqlInstances } from '@services/source/instances';
+  import type { HostDetails } from '@services/types';
+
+  import { OSTypes } from '@common/const';
+  import { ipv4 } from '@common/regex';
+
+  import IpSelector from '@components/ip-selector/IpSelector.vue';
+  import TableEditInput from '@components/render-table/columns/input/index.vue';
+
+  export interface IpBasicInfo {
+    bk_biz_id?: number;
+    bk_cloud_id: number;
+    bk_host_id?: number;
+    ip: string;
+  }
+
+  interface Props {
+    cloudInfo?: {
+      cloudId: number;
+      cloudName: string;
+    };
+    multiple?: boolean;
+    type?: 'ip' | 'cloud-ip'; // ip: ip; cloud-ip: cloud:ip
+  }
+
+  interface Emits {
+    (e: 'ipChange', value: IpBasicInfo): void;
+    (e: 'error', value: boolean): void;
+  }
+
+  interface Exposes {
+    getValue: () => Promise<IpBasicInfo>;
+    focus: () => void;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    multiple: false,
+    type: 'ip',
+    cloudInfo: undefined,
+  });
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<IpBasicInfo>({
+    default: {
+      bk_cloud_id: 0,
+      ip: '',
+    },
+  });
+
+  const { t } = useI18n();
+
+  const inputRef = ref();
+  const isFocused = ref(false);
+  const isShowSelecotr = ref(false);
+  const localValue = ref('');
+
+  const currentBizId = window.PROJECT_CONFIG.BIZ_ID;
+
+  const rules = [
+    {
+      validator: (value: string) => !!value,
+      message: t('不能为空'),
+    },
+    {
+      validator: (ip: string) => {
+        if (props.type === 'ip') {
+          return true;
+        }
+
+        const items = ip.split(':');
+        return items.length === 2 && /^\d+$/.test(items[0]);
+      },
+      message: t('请输入xx', [t('管控区域')]),
+      trigger: 'blur',
+    },
+    {
+      validator: (value: string) => {
+        let ip = value;
+        if (props.type === 'cloud-ip') {
+          ip = value.split(':')[1];
+        }
+        return ipv4.test(ip);
+      },
+      message: t('IP格式不正确'),
+    },
+    {
+      validator: (value: string) => {
+        let ip = value;
+        if (props.type === 'cloud-ip') {
+          ip = value.split(':')[1];
+        }
+        return checkMysqlInstances({
+          bizId: window.PROJECT_CONFIG.BIZ_ID,
+          instance_addresses: [ip],
+        }).then((data) => {
+          if (data.length < 1) {
+            return false;
+          }
+          const [instanceData] = data;
+          if (!modelValue.value?.ip || modelValue.value.ip !== instanceData.ip) {
+            modelValue.value = {
+              bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+              bk_cloud_id: instanceData.bk_cloud_id,
+              bk_host_id: instanceData.bk_host_id,
+              ip: instanceData.ip,
+            };
+            emits('ipChange', modelValue.value);
+          }
+          return true;
+        });
+      },
+      message: t('IP不存在'),
+    },
+  ];
+
+  watch(
+    () => modelValue.value,
+    () => {
+      if (!modelValue.value) {
+        return;
+      }
+
+      if (props.type === 'cloud-ip' && modelValue.value.ip) {
+        localValue.value = `${modelValue.value.bk_cloud_id}:${modelValue.value.ip}`;
+      } else {
+        localValue.value = modelValue.value.ip;
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  const handleClickSeletor = () => {
+    isShowSelecotr.value = true;
+  };
+
+  const handleHostChange = (hostList: HostDetails[]) => {
+    const host = hostList[0];
+    localValue.value = host.ip;
+    modelValue.value = {
+      bk_biz_id: host.biz.id,
+      bk_cloud_id: host.cloud_id,
+      bk_host_id: host.host_id,
+      ip: host.ip,
+    };
+    emits('ipChange', modelValue.value);
+    nextTick(() => {
+      inputRef.value.getValue();
+    });
+  };
+
+  const handleInputError = (value: boolean) => {
+    emits('error', value);
+  };
+
+  defineExpose<Exposes>({
+    getValue() {
+      return inputRef.value.getValue().then(() => modelValue.value);
+    },
+    focus() {
+      inputRef.value.focus();
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .cluster-name-with-selector {
+    &:hover {
+      :deep(.edit-btn-wraper) {
+        display: block;
+      }
+    }
+  }
+
+  .edit-btn-wraper {
+    display: none;
+
+    .edit-btn {
+      display: flex;
+      width: 24px;
+      height: 40px;
+      align-items: center;
+
+      .edit-btn-inner {
+        display: flex;
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+        border-radius: 2px;
+        align-items: center;
+        justify-content: center;
+
+        .select-icon {
+          font-size: 16px;
+          color: #979ba5;
+        }
+
+        &:hover {
+          background: #f0f1f5;
+
+          .select-icon {
+            color: #3a84ff;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/data-migrate/pages/page1/components/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/data-migrate/pages/page1/components/Index.vue
index fe93cf49f2..6b3e549c2c 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/data-migrate/pages/page1/components/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/data-migrate/pages/page1/components/Index.vue
@@ -26,8 +26,8 @@
         </template>
       </RenderTableHeadColumn>
       <RenderTableHeadColumn
-        :min-width="180"
-        :width="220">
+        :min-width="250"
+        :width="300">
         {{ t('目标集群') }}
       </RenderTableHeadColumn>
       <RenderTableHeadColumn
@@ -36,18 +36,18 @@
         {{ t('克隆类型') }}
       </RenderTableHeadColumn>
       <RenderTableHeadColumn
-        :min-width="90"
+        :min-width="150"
         :width="210">
         {{ t('克隆DB名') }}
       </RenderTableHeadColumn>
       <RenderTableHeadColumn
-        :min-width="90"
+        :min-width="150"
         :required="false"
         :width="210">
         {{ t('忽略DB名') }}
       </RenderTableHeadColumn>
       <RenderTableHeadColumn
-        :min-width="90"
+        :min-width="150"
         :width="210">
         {{ t('最终DB') }}
       </RenderTableHeadColumn>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/data-migrate/pages/page1/components/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/data-migrate/pages/page1/components/Row.vue
index c19963d897..6811f1f329 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/data-migrate/pages/page1/components/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/data-migrate/pages/page1/components/Row.vue
@@ -17,7 +17,7 @@
       <RenderCluster
         ref="sourceClusterRef"
         :model-value="data.clusterData"
-        @id-change="handleClusterIdChange" />
+        @cluster-change="handleClusterIdChange" />
     </FixedColumn>
     <td style="padding: 0">
       <RenderClusterNameWithSelector
@@ -100,7 +100,7 @@
   });
 </script>
 <script setup lang="ts">
-  import RenderCluster from '@views/db-manage/mysql/common/edit-field/ClusterName.vue';
+  import RenderCluster from '@views/db-manage/mysql/common/edit-field/ClusterNameWithSelector.vue';
   import RenderDbName from '@views/db-manage/mysql/common/edit-field/DbName.vue';
 
   import RenderClusterNameWithSelector from './render-target-clusters/Index.vue';
@@ -174,8 +174,8 @@
     rowInfo.targetClusters = list.map((item) => item.id);
   };
 
-  const handleClusterIdChange = (clusterId: number) => {
-    emits('clusterInputFinish', clusterId);
+  const handleClusterIdChange = (info: { id: number }) => {
+    emits('clusterInputFinish', info.id);
   };
 
   const handleAppend = () => {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/data-migrate/pages/page1/components/render-target-clusters/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/data-migrate/pages/page1/components/render-target-clusters/Index.vue
index 18e7210bbb..a76100e23e 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/data-migrate/pages/page1/components/render-target-clusters/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/data-migrate/pages/page1/components/render-target-clusters/Index.vue
@@ -12,20 +12,11 @@
 -->
 
 <template>
-  <div class="render-host-box">
-    <TableEditInput
-      ref="editRef"
-      v-model="localValue"
-      :placeholder="t('请选择或输入')"
-      :rules="rules"
-      @click-seletor="handleOpenSeletor" />
-  </div>
-  <ClusterSelector
-    v-model:is-show="isShowSelector"
-    :cluster-types="[ClusterTypes.TENDBHA, ClusterTypes.TENDBSINGLE]"
-    :selected="selectedClusters"
-    :tab-list-config="tabListConfig"
-    @change="handelClusterChange" />
+  <TableEditInput
+    ref="editRef"
+    v-model="localValue"
+    :rules="rules"
+    :source-cluster-id="sourceClusterId" />
 </template>
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n';
@@ -35,11 +26,8 @@
 
   import { useGlobalBizs } from '@stores';
 
-  import { ClusterTypes } from '@common/const';
   import { batchSplitRegex, domainRegex } from '@common/regex';
 
-  import ClusterSelector, { type TabConfig } from '@components/cluster-selector/Index.vue';
-
   import TableEditInput from './Input.vue';
 
   interface Props {
@@ -82,46 +70,23 @@
   const { t } = useI18n();
   const { currentBizId } = useGlobalBizs();
 
-  const isShowSelector = ref(false);
   const localValue = ref(props.data);
   const editRef = ref();
   const localClusterIds = ref<number[]>([]);
 
-  const selectedClusters = shallowRef<{ [key: string]: Array<any> }>({
-    [ClusterTypes.TENDBHA]: [],
-    [ClusterTypes.TENDBSINGLE]: [],
-  });
-
-  const tabListConfig = {
-    [ClusterTypes.TENDBHA]: {
-      showPreviewResultTitle: true,
-      disabledRowConfig: [
-        {
-          handler: (data: TendbhaModel) => data.id === props.sourceClusterId,
-          tip: t('不能选择源集群'),
-        },
-      ],
-    },
-    [ClusterTypes.TENDBSINGLE]: {
-      showPreviewResultTitle: true,
-      disabledRowConfig: [
-        {
-          handler: (data: TendbhaModel) => data.id === props.sourceClusterId,
-          tip: t('不能选择源集群'),
-        },
-      ],
-    },
-  } as unknown as Record<string, TabConfig>;
-
   let ignoreEmitChange = false;
 
   const rules = [
     {
-      validator: (value: string) => value.split(',').every((domain) => Boolean(domain)),
+      validator: (value: string) =>
+        value
+          .trim()
+          .split('\n')
+          .every((domain) => Boolean(domain)),
       message: t('目标集群不能为空'),
     },
     {
-      validator: (value: string) => value.split(',').every((domain) => domainRegex.test(domain)),
+      validator: (value: string) => value.split('\n').every((domain) => domainRegex.test(domain)),
       message: t('目标集群输入格式有误'),
     },
     {
@@ -145,21 +110,6 @@
     },
   );
 
-  const handleOpenSeletor = () => {
-    isShowSelector.value = true;
-  };
-
-  // 批量选择
-  const handelClusterChange = (selected: { [key: string]: TendbhaModel[] }) => {
-    selectedClusters.value = selected;
-    const list = Object.keys(selected).reduce((list: TendbhaModel[], key) => list.concat(...selected[key]), []);
-    localValue.value = list.map((item) => item.master_domain).join(',');
-    window.changeConfirm = true;
-    setTimeout(() => {
-      editRef.value.getValue();
-    });
-  };
-
   defineExpose<Exposes>({
     getValue() {
       ignoreEmitChange = true;
@@ -170,18 +120,3 @@
     },
   });
 </script>
-<style lang="less" scoped>
-  .render-host-box {
-    position: relative;
-
-    // :deep(.is-error) {
-    //   .error-icon {
-    //     top: auto;
-    //     top: 50%;
-    //     right: auto;
-    //     // left: 50%;
-    //     transform: translate(-50%, -50%);
-    //   }
-    // }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/data-migrate/pages/page1/components/render-target-clusters/Input.vue b/dbm-ui/frontend/src/views/db-manage/mysql/data-migrate/pages/page1/components/render-target-clusters/Input.vue
index c0d9968f2c..cc63c5c121 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/data-migrate/pages/page1/components/render-target-clusters/Input.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/data-migrate/pages/page1/components/render-target-clusters/Input.vue
@@ -12,102 +12,65 @@
 -->
 
 <template>
-  <div
-    class="table-edit-input"
-    :class="{
-      'is-focused': isFocused,
-      'is-disabled': disabled,
-      'is-readonly': readonly,
-      'is-error': Boolean(errorMessage),
-    }">
-    <div
-      ref="inputRef"
-      class="inner-input"
-      :class="{
-        'is-error': Boolean(errorMessage),
-        'is-single': !isFocused,
-        'is-empty': isEmpty,
-      }"
-      contenteditable="true"
-      :spellcheck="false"
-      :style="inputStyles"
-      @blur="handleBlur"
-      @focus="handleFocus"
-      @input="handleInput"
-      @keydown="handleKeydown"
-      @paste="handlePaste" />
-    <div
-      v-if="localValue && !isFocused && isOverflow"
-      class="count-tag">
-      <MiniTag :content="countText" />
-    </div>
-    <div
-      v-if="!localValue"
-      class="input-placeholder">
-      {{ placeholder }}
-    </div>
-    <div
-      v-if="errorMessage"
-      class="input-error">
-      <DbIcon
-        v-bk-tooltips="errorMessage"
-        type="exclamation-fill" />
-    </div>
-    <BkPopover
-      v-if="!isFocused"
-      :content="t('选择集群')"
-      placement="top"
-      :popover-delay="0">
-      <div
-        class="edit-btn"
-        @click="handleClickSeletor">
-        <div class="edit-btn-inner">
-          <DbIcon
-            class="select-icon"
-            type="host-select" />
+  <TableEditInput
+    ref="inputRef"
+    v-model="modelValue"
+    :autosize="{
+      minRows: 1,
+      maxRows: 6,
+    }"
+    :placeholder="t('请选择或输入')"
+    :resize="false"
+    :rules="rules"
+    type="textarea"
+    @blur="() => (isFocused = false)"
+    @focus="() => (isFocused = true)">
+    <template #suspend>
+      <BkPopover
+        v-if="!isFocused"
+        :content="t('选择集群')"
+        placement="top"
+        :popover-delay="0">
+        <div
+          class="edit-btn"
+          @click="handleClickSeletor">
+          <div class="edit-btn-inner">
+            <DbIcon
+              class="select-icon"
+              type="host-select" />
+          </div>
         </div>
-      </div>
-    </BkPopover>
-  </div>
+      </BkPopover>
+    </template>
+  </TableEditInput>
+  <ClusterSelector
+    v-model:is-show="isShowSelector"
+    :cluster-types="[ClusterTypes.TENDBHA, ClusterTypes.TENDBSINGLE]"
+    :selected="selectedClusters"
+    :tab-list-config="tabListConfig"
+    @change="handelClusterChange" />
 </template>
 <script setup lang="ts">
-  import _ from 'lodash';
   import { useI18n } from 'vue-i18n';
 
-  import MiniTag from '@components/mini-tag/index.vue';
-  import useValidtor, { type Rules } from '@components/render-table/hooks/useValidtor';
+  import TendbhaModel from '@services/model/mysql/tendbha';
 
-  import { encodeMult } from '@utils';
+  import { ClusterTypes } from '@common/const';
 
-  import { useResizeObserver } from '@vueuse/core';
+  import ClusterSelector, { type TabConfig } from '@components/cluster-selector/Index.vue';
+  import TableEditInput from '@components/render-table/columns/input/index.vue';
+  import { type Rules } from '@components/render-table/hooks/useValidtor';
 
   interface Props {
-    placeholder?: string;
+    sourceClusterId: number;
     rules?: Rules;
-    disabled?: boolean;
-    readonly?: boolean;
-  }
-
-  interface Emits {
-    (e: 'submit', value: string): void;
-    (e: 'input', value: string): void;
-    (e: 'click-seletor'): void;
   }
 
   interface Exposes {
     getValue: () => Promise<string>;
-    focus: () => void;
   }
 
-  const props = withDefaults(defineProps<Props>(), {
-    placeholder: '请输入',
-    rules: undefined,
-    multiInput: true,
-    disabled: false,
-    readonly: false,
-  });
-
-  const emits = defineEmits<Emits>();
+  const props = defineProps<Props>();
 
   const modelValue = defineModel<string>({
     default: '',
@@ -117,322 +80,82 @@
 
   const inputRef = ref();
   const isFocused = ref(false);
-  const localValue = ref('');
-  const isOverflow = ref(false);
-
-  const countText = computed(() => t('共n个', [localValue.value.split(',').length]));
-  const isEmpty = computed(() => !modelValue.value);
-  const inputStyles = computed<any>(() => {
-    if (isFocused.value) {
-      return {};
-    }
-    return {
-      height: '40px',
-      overflow: 'hidden',
-      'text-overflow': 'ellipsis',
-      'white-space': 'nowrap',
-    };
+  const isShowSelector = ref(false);
+  const selectedClusters = shallowRef<{ [key: string]: Array<any> }>({
+    [ClusterTypes.TENDBHA]: [],
+    [ClusterTypes.TENDBSINGLE]: [],
   });
 
-  const { message: errorMessage, validator } = useValidtor(props.rules);
-
-  watch(
-    modelValue,
-    (value) => {
-      if (value) {
-        setTimeout(() => {
-          checkOverflow();
-        });
-      }
-      nextTick(() => {
-        if (localValue.value !== value) {
-          localValue.value = value;
-          inputRef.value.innerText = localValue.value;
-          window.changeConfirm = true;
-        }
-      });
+  const tabListConfig = {
+    [ClusterTypes.TENDBHA]: {
+      showPreviewResultTitle: true,
+      disabledRowConfig: [
+        {
+          handler: (data: TendbhaModel) => data.id === props.sourceClusterId,
+          tip: t('不能选择源集群'),
+        },
+      ],
     },
-    {
-      immediate: true,
+    [ClusterTypes.TENDBSINGLE]: {
+      showPreviewResultTitle: true,
+      disabledRowConfig: [
+        {
+          handler: (data: TendbhaModel) => data.id === props.sourceClusterId,
+          tip: t('不能选择源集群'),
+        },
+      ],
     },
-  );
-
-  const checkOverflow = () => {
-    isOverflow.value = inputRef.value.clientWidth < inputRef.value.scrollWidth;
-  };
-
-  useResizeObserver(inputRef, checkOverflow);
+  } as unknown as Record<string, TabConfig>;
 
   const handleClickSeletor = () => {
-    emits('click-seletor');
-  };
-
-  // 获取焦点
-  const handleFocus = () => {
-    isFocused.value = true;
-  };
-
-  // 响应输入
-  const handleInput = (event: Event) => {
-    if (props.disabled) {
-      event.preventDefault();
-      return;
-    }
-    nextTick(() => {
-      const target = event.target as HTMLElement;
-      localValue.value = _.trim(target.outerText);
-      emits('input', localValue.value);
-      window.changeConfirm = true;
-      modelValue.value = localValue.value;
-    });
-  };
-
-  // 失去焦点
-  const handleBlur = (event: FocusEvent) => {
-    if (props.disabled) {
-      event.preventDefault();
-      return;
-    }
-    isFocused.value = false;
-    checkOverflow();
-    validator(localValue.value).then(() => {
-      window.changeConfirm = true;
-      emits('submit', localValue.value);
-    });
-  };
-
-  // enter键提交
-  const handleKeydown = (event: KeyboardEvent) => {
-    if (props.disabled) {
-      event.preventDefault();
-      return;
-    }
-    if (event.isComposing) {
-      // 跳过输入法复合事件
-      return;
-    }
-    if (event.which === 13 || event.key === 'Enter') {
-      event.preventDefault();
-      validator(localValue.value).then((result) => {
-        if (result) {
-          isFocused.value = false;
-          window.changeConfirm = true;
-          emits('submit', localValue.value);
-        }
-      });
-    }
+    isShowSelector.value = true;
   };
 
-  // 粘贴
-  const handlePaste = (event: ClipboardEvent) => {
-    let paste = (event.clipboardData || window.clipboardData).getData('text');
-    paste = encodeMult(paste);
-
-    const selection = window.getSelection();
-
-    if (!selection || !selection.rangeCount) {
-      return false;
-    }
-    selection.deleteFromDocument();
-    selection.getRangeAt(0).insertNode(document.createTextNode(paste));
-    localValue.value = paste;
-    event.preventDefault();
+  // 批量选择
+  const handelClusterChange = (selected: { [key: string]: TendbhaModel[] }) => {
+    selectedClusters.value = selected;
+    const list = Object.keys(selected).reduce((list: TendbhaModel[], key) => list.concat(...selected[key]), []);
+    modelValue.value = list.map((item) => item.master_domain).join('\n');
     window.changeConfirm = true;
-    modelValue.value = paste;
+    setTimeout(() => {
+      inputRef.value.getValue();
+    });
   };
 
   defineExpose<Exposes>({
     // 获取值
     getValue() {
-      return validator(localValue.value).then(() => localValue.value);
-    },
-    // 编辑框获取焦点
-    focus() {
-      inputRef.value.focus();
-      setTimeout(() => {
-        inputRef.value.selectionStart = localValue.value.length;
-        inputRef.value.selectionEnd = localValue.value.length;
-      });
+      return inputRef.value.getValue().then(() => modelValue.value);
     },
   });
 </script>
 <style lang="less" scoped>
-  .table-edit-input {
-    position: relative;
-    display: block;
-    width: 100%;
-    height: 42px;
-    cursor: pointer;
-    background: #fff;
-
-    &:hover {
-      .count-tag {
-        display: none;
-      }
-
-      .edit-btn {
-        z-index: 999;
-      }
-    }
-
-    &.is-focused {
-      z-index: 99;
-
-      .inner-input {
-        padding-right: 25px;
-      }
-    }
-
-    &.is-disabled {
-      cursor: not-allowed;
-
-      .inner-input {
-        pointer-events: none;
-        background-color: #fafbfd;
-      }
-    }
+  .edit-btn {
+    display: flex;
+    width: 24px;
+    height: 40px;
+    align-items: center;
 
-    &.is-readonly {
-      cursor: default;
-
-      .inner-input {
-        pointer-events: none;
-      }
-
-      .is-empty {
-        pointer-events: none;
-        background-color: #fafbfd;
-      }
-    }
-
-    &.is-error {
-      .inner-input {
-        background-color: #fff1f1;
-      }
-
-      .edit-btn {
-        right: 25px;
-      }
-    }
-
-    .inner-input {
-      position: absolute;
-      top: 0;
-      right: 0;
-      left: 0;
-      max-height: 300px;
-      min-height: 42px;
-      padding: 10px 16px;
-      overflow-y: auto;
-      font-size: 12px;
-      line-height: 20px;
-      color: #63656e;
-      word-break: break-all;
-      background: inherit;
-      border: 1px solid transparent;
-      outline: none;
-      box-sizing: border-box;
-
-      &:hover {
-        background-color: #fafbfd;
-        border-color: #a3c5fd;
-      }
-
-      &:focus {
-        border-color: #3a84ff;
-      }
-
-      &.is-single {
-        & > * {
-          display: inline;
-        }
-
-        br {
-          white-space: nowrap;
-          content: '\A';
-        }
-      }
-    }
-
-    .input-placeholder {
-      position: absolute;
-      top: 10px;
-      right: 20px;
-      left: 18px;
-      z-index: 1;
-      height: 20px;
-      overflow: hidden;
-      font-size: 12px;
-      line-height: 20px;
-      color: #c4c6cc;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      pointer-events: none;
-    }
-
-    .input-error {
-      position: absolute;
-      right: 10px;
-      top: -2px;
-      z-index: 99;
-      padding-bottom: 3px;
-      font-size: 14px;
-      color: #ea3636;
-    }
-
-    .count-tag {
-      position: absolute;
-      right: 16px;
-      display: block;
-    }
-
-    .edit-btn {
-      position: absolute;
-      top: 0;
-      right: 5px;
-      z-index: -1;
+    .edit-btn-inner {
       display: flex;
       width: 24px;
-      height: 40px;
+      height: 24px;
+      cursor: pointer;
+      border-radius: 2px;
       align-items: center;
+      justify-content: center;
 
-      .edit-btn-inner {
-        display: flex;
-        width: 24px;
-        height: 24px;
-        cursor: pointer;
-        border-radius: 2px;
-        align-items: center;
-        justify-content: center;
-
-        .select-icon {
-          font-size: 16px;
-          color: #979ba5;
-        }
-
-        &:hover {
-          background: #f0f1f5;
-
-          .select-icon {
-            color: #3a84ff;
-          }
-        }
+      .select-icon {
+        font-size: 16px;
+        color: #979ba5;
       }
-    }
 
-    .down-icon-main {
-      position: absolute;
-      top: 0;
-      right: 0;
-      display: flex;
-      width: 30px;
-      height: 40px;
-      align-items: center;
-      justify-content: center;
+      &:hover {
+        background: #f0f1f5;
 
-      .down-icon {
-        font-size: 16px;
-        background-color: #fff;
+        .select-icon {
+          color: #3a84ff;
+        }
       }
     }
   }
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/db-backup/pages/page1/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/db-backup/pages/page1/components/RenderData/Row.vue
index e72d614f08..96eda36665 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/db-backup/pages/page1/components/RenderData/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/db-backup/pages/page1/components/RenderData/Row.vue
@@ -17,7 +17,7 @@
       <RenderCluster
         ref="clusterRef"
         :model-value="data.clusterData"
-        @input-cluster-finish="handleInputFinish" />
+        @cluster-change="handleInputFinish" />
     </FixedColumn>
     <td style="padding: 0">
       <RenderBackupLocal
@@ -56,8 +56,9 @@
   });
 </script>
 <script setup lang="ts">
+  import RenderCluster from '@views/db-manage/mysql/common/edit-field/ClusterNameWithSelector.vue';
+
   import RenderBackupLocal from './RenderBackupLocal.vue';
-  import RenderCluster from './RenderCluster.vue';
 
   interface Props {
     data: IDataRow;
@@ -81,12 +82,13 @@
   const clusterRef = ref();
   const backupLocalRef = ref();
 
-  const handleInputFinish = (domain: string) => {
+  const handleInputFinish = (info: { id: number; domain: string }) => {
+    const { id, domain } = info;
     emits(
       'inputClusterFinish',
       createRowData({
         clusterData: {
-          id: 0,
+          id,
           domain,
         },
       }),
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/db-clear/pages/page1/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/db-clear/pages/page1/components/RenderData/Row.vue
index d0d7365e72..6abf9c456b 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/db-clear/pages/page1/components/RenderData/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/db-clear/pages/page1/components/RenderData/Row.vue
@@ -19,7 +19,8 @@
         :cluster-types="clusterTypes"
         :model-value="data.clusterData"
         only-one-type
-        @id-change="handleClusterIdChange" />
+        tabs="both"
+        @cluster-change="handleClusterIdChange" />
     </FixedColumn>
     <td style="padding: 0">
       <RenderTruncateDataType
@@ -102,7 +103,7 @@
 <script setup lang="ts">
   import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
 
-  import RenderCluster from '@views/db-manage/mysql/common/edit-field/ClusterName.vue';
+  import RenderCluster from '@views/db-manage/mysql/common/edit-field/ClusterNameWithSelector.vue';
   import RenderDbName from '@views/db-manage/mysql/common/edit-field/DbName.vue';
   import RenderTableName from '@views/db-manage/mysql/common/edit-field/TableName.vue';
 
@@ -161,9 +162,9 @@
     ignoreTables.value = props.data.ignoreTables ?? [];
   });
 
-  const handleClusterIdChange = (clusterId: number) => {
-    localClusterId.value = clusterId;
-    emits('clusterInputFinish', clusterId);
+  const handleClusterIdChange = (info: { id: number }) => {
+    localClusterId.value = info.id;
+    emits('clusterInputFinish', info.id);
   };
 
   const handleTruncateDataTypeChange = (value: string) => {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/db-rename/pages/page1/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/db-rename/pages/page1/components/RenderData/Row.vue
index da162364db..4c757aacf8 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/db-rename/pages/page1/components/RenderData/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/db-rename/pages/page1/components/RenderData/Row.vue
@@ -19,7 +19,8 @@
         :cluster-types="clusterTypes"
         :model-value="data.clusterData"
         only-one-type
-        @id-change="handleClusterIdChange" />
+        tabs="both"
+        @cluster-change="handleClusterIdChange" />
     </FixedColumn>
     <td style="padding: 0">
       <RenderDbName
@@ -77,7 +78,7 @@
   import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
   import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
 
-  import RenderCluster from '@views/db-manage/mysql/common/edit-field/ClusterName.vue';
+  import RenderCluster from '@views/db-manage/mysql/common/edit-field/ClusterNameWithSelector.vue';
 
   import RenderDbName from './RenderDbName.vue';
 
@@ -121,9 +122,9 @@
     },
   );
 
-  const handleClusterIdChange = (clusterId: number) => {
-    localClusterId.value = clusterId;
-    emits('clusterInputFinish', clusterId);
+  const handleClusterIdChange = (info: { id: number }) => {
+    localClusterId.value = info.id;
+    emits('clusterInputFinish', info.id);
   };
 
   const handleAppend = () => {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/db-table-backup/pages/page1/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/db-table-backup/pages/page1/components/RenderData/Row.vue
index 6e6e4eb773..0521dfc43e 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/db-table-backup/pages/page1/components/RenderData/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/db-table-backup/pages/page1/components/RenderData/Row.vue
@@ -17,7 +17,7 @@
       <RenderCluster
         ref="clusterRef"
         :model-value="data.clusterData"
-        @id-change="handleClusterIdChange" />
+        @cluster-change="handleClusterIdChange" />
     </FixedColumn>
     <td style="padding: 0">
       <RenderDbName
@@ -91,11 +91,10 @@
   import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
   import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
 
+  import RenderCluster from '@views/db-manage/mysql/common/edit-field/ClusterNameWithSelector.vue';
   import RenderDbName from '@views/db-manage/mysql/common/edit-field/DbName.vue';
   import RenderTableName from '@views/db-manage/mysql/common/edit-field/TableName.vue';
 
-  import RenderCluster from './RenderCluster.vue';
-
   interface Props {
     data: IDataRow;
     removeable: boolean;
@@ -135,8 +134,8 @@
     },
   );
 
-  const handleClusterIdChange = (clusterId: number) => {
-    localClusterId.value = clusterId;
+  const handleClusterIdChange = (info: { id: number }) => {
+    localClusterId.value = info.id;
   };
 
   const handleAppend = () => {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/flashback/pages/page1/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/flashback/pages/page1/components/RenderData/Row.vue
index eee2ced26c..ca71b1e388 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/flashback/pages/page1/components/RenderData/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/flashback/pages/page1/components/RenderData/Row.vue
@@ -17,8 +17,7 @@
       <RenderCluster
         ref="clusterRef"
         :model-value="data.clusterData"
-        @id-change="handleClusterIdChange"
-        @input-create="handleCreate" />
+        @cluster-change="handleClusterIdChange" />
     </FixedColumn>
     <td style="padding: 0">
       <RenderStartTime
@@ -104,10 +103,10 @@
   import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
   import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
 
+  import RenderCluster from '@views/db-manage/mysql/common/edit-field/ClusterNameWithSelector.vue';
   import RenderDbName from '@views/db-manage/mysql/common/edit-field/DbName.vue';
   import RenderTableName from '@views/db-manage/mysql/common/edit-field/TableName.vue';
 
-  import RenderCluster from './RenderCluster.vue';
   import RenderEndTime from './RenderEndTime.vue';
   import RenderStartTime from './RenderStartTime.vue';
 
@@ -160,22 +159,8 @@
     localEndTime.value = props.data.endTime;
   });
 
-  const handleClusterIdChange = (id: number) => {
-    localClusterId.value = id;
-  };
-
-  const handleCreate = (list: Array<string>) => {
-    emits(
-      'add',
-      list.map((domain) =>
-        createRowData({
-          clusterData: {
-            id: 0,
-            domain,
-          },
-        }),
-      ),
-    );
+  const handleClusterIdChange = (info: { id: number }) => {
+    localClusterId.value = info.id;
   };
 
   const handleAppend = () => {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/master-failover/pages/page1/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/master-failover/pages/page1/components/RenderData/Row.vue
index 0299cb1f09..9dae7e3598 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/master-failover/pages/page1/components/RenderData/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/master-failover/pages/page1/components/RenderData/Row.vue
@@ -17,7 +17,9 @@
       <RenderMaster
         ref="masterHostRef"
         :model-value="data.masterData"
-        @change="handleMasterDataChange" />
+        :tab-list-config="tabListConfig"
+        type="ip"
+        @instance-change="handleMasterDataChange" />
     </FixedColumn>
     <td style="padding: 0">
       <RenderSlave
@@ -41,14 +43,18 @@
 </template>
 <script lang="ts">
   import { ref, shallowRef, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import { ClusterTypes } from '@common/const';
 
   import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
   import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
 
+  import RenderMaster from '@views/db-manage/mysql/common/edit-field/InstanceWithSelector.vue';
+
   import { random } from '@utils';
 
   import RenderCluster from './RenderCluster.vue';
-  import RenderMaster from './RenderMaster.vue';
   import RenderSlave from './RenderSlave.vue';
 
   export type IHostData = {
@@ -94,6 +100,8 @@
 
   const emits = defineEmits<Emits>();
 
+  const { t } = useI18n();
+
   const masterHostRef = ref();
   const slaveHostRef = ref();
   const clusterRef = ref();
@@ -102,6 +110,17 @@
 
   const relatedClusterList = shallowRef<number[]>([]);
 
+  const tabListConfig = {
+    [ClusterTypes.TENDBHA]: [
+      {
+        name: t('故障主库主机'),
+        tableConfig: {
+          multiple: false,
+        },
+      },
+    ],
+  } as any;
+
   watch(
     () => props.data,
     () => {
@@ -131,11 +150,7 @@
     emits('remove');
   };
 
-  const getRowData = () => [
-    masterHostRef.value.getValue('master_ip'),
-    slaveHostRef.value.getValue(),
-    clusterRef.value.getValue(),
-  ];
+  const getRowData = () => [masterHostRef.value.getValue(), slaveHostRef.value.getValue(), clusterRef.value.getValue()];
 
   const handleClone = () => {
     Promise.allSettled(getRowData()).then((rowData) => {
@@ -152,8 +167,17 @@
 
   defineExpose<Exposes>({
     getValue() {
-      return Promise.all(getRowData()).then(([masterHostData, slaveHostData, clusterData]) => ({
-        ...masterHostData,
+      return Promise.all([
+        masterHostRef.value.getValue(),
+        slaveHostRef.value.getValue(),
+        clusterRef.value.getValue(),
+      ]).then(([masterHostData, slaveHostData, clusterData]) => ({
+        master_ip: {
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          bk_host_id: masterHostData.bk_host_id,
+          ip: masterHostData.ip,
+          bk_cloud_id: masterHostData.bk_cloud_id,
+        },
         ...slaveHostData,
         ...clusterData,
       }));
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/master-slave-swap/pages/page1/components/BatchEntry.vue b/dbm-ui/frontend/src/views/db-manage/mysql/master-slave-swap/pages/page1/components/BatchEntry.vue
index 158d6eaa92..dba4d527df 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/master-slave-swap/pages/page1/components/BatchEntry.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/master-slave-swap/pages/page1/components/BatchEntry.vue
@@ -14,7 +14,7 @@
 <template>
   <BkDialog
     :is-show="isShow"
-    :title="$t('添加从库_批量录入')"
+    :title="t('添加从库_批量录入')"
     :width="705"
     @closed="handleClosed">
     <div class="master-slave-swap-batch-entry">
@@ -22,8 +22,8 @@
         <table>
           <thead>
             <tr>
-              <th>{{ $t('主库主机') }}</th>
-              <th>{{ $t('从库主机') }}</th>
+              <th>{{ t('主库主机') }}</th>
+              <th>{{ t('从库主机') }}</th>
             </tr>
           </thead>
           <tbody>
@@ -32,7 +32,7 @@
               <td>
                 <span>127.0.0.1</span>
                 <span
-                  v-bk-tooltips="$t('复制')"
+                  v-bk-tooltips="t('复制')"
                   class="copy-btn"
                   @click="handleCopy">
                   <DbIcon type="copy" />
@@ -53,7 +53,7 @@
       </div>
       <div class="error-box">
         <span v-if="inputInvalidStack.length > 0">
-          <span>{{ $t('n处格式错误', [inputInvalidStack.length]) }}</span>
+          <span>{{ t('n处格式错误', [inputInvalidStack.length]) }}</span>
           <DbIcon
             class="action-btn"
             type="audit"
@@ -61,7 +61,7 @@
         </span>
         <span v-if="inputErrorStack.length > 0">
           <span v-if="inputInvalidStack.length > 0">；</span>
-          <span>{{ $t('n处缺少匹配对象', [inputErrorStack.length]) }}</span>
+          <span>{{ t('n处缺少匹配对象', [inputErrorStack.length]) }}</span>
           <DbIcon
             class="action-btn"
             type="audit"
@@ -69,7 +69,7 @@
         </span>
         <span v-if="inputHostErrorStack.length > 0">
           <span v-if="inputInvalidStack.length > 0">；</span>
-          <span>{{ $t('n处主机IP不存在', [inputHostErrorStack.length]) }}</span>
+          <span>{{ t('n处主机IP不存在', [inputHostErrorStack.length]) }}</span>
           <DbIcon
             class="action-btn"
             type="audit"
@@ -82,12 +82,12 @@
         :loading="isChecking"
         theme="primary"
         @click="handleSubmit">
-        {{ $t('确定') }}
+        {{ t('确定') }}
       </BkButton>
       <BkButton
         class="ml8"
         @click="handleClosed">
-        {{ $t('取消') }}
+        {{ t('取消') }}
       </BkButton>
     </template>
   </BkDialog>
@@ -100,8 +100,8 @@
       ip: string;
     };
     slaveData: {
-      bk_cloud_id: number;
       bk_host_id: number;
+      bk_cloud_id: number;
       ip: string;
     };
   }
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/master-slave-swap/pages/page1/components/RenderData/RenderSlave.vue b/dbm-ui/frontend/src/views/db-manage/mysql/master-slave-swap/pages/page1/components/RenderData/RenderSlave.vue
index 9c14232c36..16df73200a 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/master-slave-swap/pages/page1/components/RenderData/RenderSlave.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/master-slave-swap/pages/page1/components/RenderData/RenderSlave.vue
@@ -47,7 +47,7 @@
   }
 
   interface Exposes {
-    getValue: (field: string) => Promise<string>;
+    getValue: () => Promise<{ slave_ip: ISlaveHost }>;
   }
 
   interface ISlaveHost {
@@ -59,7 +59,7 @@
 
   const props = defineProps<Props>();
 
-  const genHostKey = (hostData: any) => `${hostData.bk_cloud_id}:${hostData.ip}`;
+  const genHostKey = (hostData: ISlaveHost) => `${hostData.bk_cloud_id}:${hostData.ip}`;
 
   const instanceKey = `render_slave_${random()}`;
   singleHostSelectMemo[instanceKey] = {};
@@ -86,7 +86,7 @@
     () => props.clusterList,
     () => {
       if (props.data) {
-        localValue.value = genHostKey(props.data);
+        localValue.value = `${props.data.bk_cloud_id}:${props.data.ip}`;
       } else {
         localValue.value = '';
       }
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/master-slave-swap/pages/page1/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/master-slave-swap/pages/page1/components/RenderData/Row.vue
index bf23e5753b..364962cbb7 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/master-slave-swap/pages/page1/components/RenderData/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/master-slave-swap/pages/page1/components/RenderData/Row.vue
@@ -16,8 +16,11 @@
     <FixedColumn fixed="left">
       <RenderMaster
         ref="masterHostRef"
-        :model-value="data.masterData"
-        @change="handleMasterHostChange" />
+        v-model="localMasterData"
+        :placeholder="t('请输入IP或从表头批量选择')"
+        :tab-list-config="tabListConfig"
+        type="ip"
+        @instance-change="handleMasterHostChange" />
     </FixedColumn>
     <td style="padding: 0">
       <RenderHost
@@ -41,14 +44,18 @@
 </template>
 <script lang="ts">
   import { ref, shallowRef, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import { ClusterTypes } from '@common/const';
 
   import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
   import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
 
+  import RenderMaster from '@views/db-manage/mysql/common/edit-field/InstanceWithSelector.vue';
+
   import { random } from '@utils';
 
   import RenderCluster from './RenderCluster.vue';
-  import RenderMaster from './RenderMaster.vue';
   import RenderHost from './RenderSlave.vue';
 
   export type IHostData = {
@@ -94,15 +101,27 @@
 
   const emits = defineEmits<Emits>();
 
-  const masterHostRef = ref();
-  const slaveHostRef = ref();
-  const clusterRef = ref();
+  const { t } = useI18n();
 
+  const masterHostRef = ref<InstanceType<typeof RenderMaster>>();
+  const slaveHostRef = ref<InstanceType<typeof RenderHost>>();
+  const clusterRef = ref<InstanceType<typeof RenderCluster>>();
   const localMasterData = ref<IHostData>();
   const localSlaveData = ref<IHostData>();
 
   const relatedClusterList = shallowRef<number[]>([]);
 
+  const tabListConfig = {
+    [ClusterTypes.TENDBHA]: [
+      {
+        name: t('故障主库主机'),
+        tableConfig: {
+          multiple: false,
+        },
+      },
+    ],
+  } as any;
+
   watch(
     () => props.data,
     () => {
@@ -114,8 +133,7 @@
     },
   );
 
-  const handleMasterHostChange = (data: IHostData) => {
-    localMasterData.value = data;
+  const handleMasterHostChange = () => {
     localSlaveData.value = undefined;
   };
 
@@ -156,11 +174,16 @@
   defineExpose<Exposes>({
     getValue() {
       return Promise.all([
-        masterHostRef.value.getValue('master_ip'),
-        slaveHostRef.value.getValue(),
-        clusterRef.value.getValue(),
+        masterHostRef.value!.getValue(),
+        slaveHostRef.value!.getValue(),
+        clusterRef.value!.getValue(),
       ]).then(([masterHostData, slaveHostData, clusterData]) => ({
-        ...masterHostData,
+        master_ip: {
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          bk_host_id: masterHostData.bk_host_id,
+          ip: masterHostData.ip,
+          bk_cloud_id: masterHostData.bk_cloud_id,
+        },
         ...slaveHostData,
         ...clusterData,
       }));
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/openarea/create/components/target-cluster/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/openarea/create/components/target-cluster/Index.vue
index d05cc0e2b4..f29b3a5910 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/openarea/create/components/target-cluster/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/openarea/create/components/target-cluster/Index.vue
@@ -17,6 +17,7 @@
         v-for="(item, index) in tableData"
         :key="item.rowKey"
         ref="rowRefs"
+        :cluster-type="clusterType"
         :data="item"
         :removeable="tableData.length < 2"
         :show-ip-cloumn="showIpCloumn"
@@ -53,6 +54,7 @@
   import { useI18n } from 'vue-i18n';
 
   import TendbhaModel from '@services/model/mysql/tendbha';
+  import { queryClusters } from '@services/source/mysqlCluster';
   import type { HostDetails } from '@services/types/ip';
 
   import { ClusterTypes, OSTypes } from '@common/const';
@@ -155,19 +157,30 @@
   };
 
   // 输入集群后查询集群信息并填充到table
-  const handleInputCluster = async (index: number, item: TendbhaModel) => {
-    const row = createRowData({
-      clusterData: {
-        id: item.id,
-        master_domain: item.master_domain,
-        bk_biz_id: item.bk_biz_id,
-        bk_cloud_id: item.bk_cloud_id,
-        bk_cloud_name: item.bk_cloud_name,
-      },
+  const handleInputCluster = async (index: number, id: number) => {
+    const result = await queryClusters({
+      cluster_filters: [
+        {
+          id,
+        },
+      ],
+      bk_biz_id: currentBizId,
     });
-    tableData.value[index] = row;
-    domainMemo[item.master_domain] = true;
-    selectedClusters.value[props.clusterType].push(item);
+    if (result.length > 0) {
+      const item = result[0];
+      const row = createRowData({
+        clusterData: {
+          id: item.id,
+          master_domain: item.master_domain,
+          bk_biz_id: item.bk_biz_id,
+          bk_cloud_id: item.bk_cloud_id,
+          bk_cloud_name: item.bk_cloud_name,
+        },
+      });
+      tableData.value[index] = row;
+      domainMemo[item.master_domain] = true;
+      selectedClusters.value[props.clusterType].push(item);
+    }
   };
 
   // 批量选择
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/openarea/create/components/target-cluster/components/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/openarea/create/components/target-cluster/components/Row.vue
index a4d5726b76..e00c60a0ed 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/openarea/create/components/target-cluster/components/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/openarea/create/components/target-cluster/components/Row.vue
@@ -17,7 +17,8 @@
       <ColumnCluster
         ref="clusterRef"
         :model-value="localClusterData"
-        @cluster-input-finish="handleClusterInputFinish" />
+        :tabs="tabs"
+        @cluster-change="handleClusterInputFinish" />
     </td>
     <td
       v-for="variableName in variableList"
@@ -60,9 +61,10 @@
 <script setup lang="ts">
   import { watch } from 'vue';
 
-  import TendbhaModel from '@services/model/mysql/tendbha';
+  import { ClusterTypes } from '@common/const';
+
+  import ColumnCluster from '@views/db-manage/mysql/common/edit-field/ClusterNameWithSelector.vue';
 
-  import ColumnCluster from './ColumnCluster.vue';
   import ColumnHost from './ColumnHost.vue';
   import ColumnVariable from './ColumnVariable.vue';
 
@@ -87,13 +89,14 @@
     removeable: boolean;
     variableList: string[];
     showIpCloumn: boolean;
+    clusterType: ClusterTypes;
   }
 
   interface Emits {
     (e: 'add', params: Array<IDataRow>): void;
     (e: 'remove'): void;
     (e: 'clone', value: IDataRow): void;
-    (e: 'clusterInputFinish', value: TendbhaModel): void;
+    (e: 'clusterInputFinish', clusterId: number): void;
   }
 
   interface Exposes {
@@ -107,21 +110,27 @@
   const clusterRef = ref<InstanceType<typeof ColumnCluster>>();
   const variableRefs = ref<InstanceType<typeof ColumnVariable>[]>([]);
   const hostRef = ref<InstanceType<typeof ColumnHost>>();
+  const localClusterData = ref<IData['clusterData'] & { domain: string }>();
 
-  const localClusterData = ref<IData['clusterData']>();
+  const tabs = computed(() => (props.clusterType === ClusterTypes.TENDBHA ? 'tendbha' : 'tendbsingle'));
 
   watch(
     () => props.data,
     () => {
-      localClusterData.value = props.data.clusterData;
+      if (props.data.clusterData) {
+        localClusterData.value = {
+          domain: props.data.clusterData.master_domain,
+          ...props.data.clusterData,
+        };
+      }
     },
     {
       immediate: true,
     },
   );
 
-  const handleClusterInputFinish = (value: TendbhaModel) => {
-    emits('clusterInputFinish', value);
+  const handleClusterInputFinish = (info: { id: number }) => {
+    emits('clusterInputFinish', info.id);
   };
 
   const handleAppend = () => {
@@ -137,7 +146,7 @@
 
   const handleClone = () => {
     Promise.allSettled([
-      clusterRef.value!.getValue(true),
+      clusterRef.value!.getValue(),
       Promise.allSettled(variableRefs.value.map((item) => item.getValue())),
       hostRef.value?.getValue(),
     ]).then((rowData) => {
@@ -158,7 +167,7 @@
   defineExpose<Exposes>({
     getValue() {
       return Promise.all([
-        clusterRef.value!.getValue(true),
+        clusterRef.value!.getValue(),
         Promise.all(variableRefs.value.map((item) => item.getValue())),
         hostRef.value?.getValue(),
       ]).then(([clusterData, variableData, hostData]) =>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/privilege-clone-client/pages/page1/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/privilege-clone-client/pages/page1/components/RenderData/Row.vue
index f7fdffd1e5..36d905c02d 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/privilege-clone-client/pages/page1/components/RenderData/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/privilege-clone-client/pages/page1/components/RenderData/Row.vue
@@ -16,7 +16,8 @@
     <FixedColumn fixed="left">
       <RenderSource
         ref="sourceRef"
-        v-model="localSource" />
+        v-model="localSource"
+        type="cloud-ip" />
     </FixedColumn>
     <td style="padding: 0">
       <RenderModule
@@ -42,10 +43,11 @@
   import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
   import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
 
+  import RenderSource from '@views/db-manage/mysql/common/edit-field/IpInputWithIpSelector.vue';
+
   import { random } from '@utils';
 
   import RenderModule from './RenderModule.vue';
-  import RenderSource from './RenderSource.vue';
   import RenderTarget from './RenderTarget.vue';
 
   export interface IDataRow {
@@ -134,7 +136,8 @@
     getValue() {
       return Promise.all([sourceRef.value!.getValue(), moduleRef.value!.getValue(), targetRef.value!.getValue()]).then(
         ([sourceData, moduleData, targetData]) => ({
-          ...sourceData,
+          source: sourceData.ip,
+          bk_cloud_id: sourceData.bk_cloud_id,
           ...moduleData,
           ...targetData,
         }),
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/privilege-clone-inst/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/privilege-clone-inst/pages/page1/Index.vue
index b598c0730a..6ebae5f52a 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/privilege-clone-inst/pages/page1/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/privilege-clone-inst/pages/page1/Index.vue
@@ -191,15 +191,7 @@
       const targetInstance = instanceInfoMap[item.target];
       return {
         ...createRowData(),
-        source: {
-          bkCloudId: sourceInstance.bk_cloud_id,
-          clusterId: sourceInstance.cluster_id,
-          dbModuleId: sourceInstance.db_module_id,
-          dbModuleName: sourceInstance.db_module_name,
-          instanceAddress: sourceInstance.instance_address,
-          masterDomain: sourceInstance.master_domain,
-          clusterType: sourceInstance.cluster_type,
-        },
+        source: sourceInstance,
         target: {
           cluster_id: targetInstance.cluster_id,
           bk_host_id: targetInstance.bk_host_id,
@@ -231,15 +223,7 @@
       const { instance_address: ip } = item;
       if (!instanceMemo[ip]) {
         const row = createRowData({
-          source: {
-            clusterId: item.cluster_id,
-            clusterType: item.cluster_type,
-            masterDomain: item.master_domain,
-            dbModuleId: item.db_module_id,
-            dbModuleName: item.db_module_name,
-            instanceAddress: item.instance_address,
-            bkCloudId: item.bk_cloud_id,
-          },
+          source: item,
         });
         results.push(row);
         instanceMemo[ip] = true;
@@ -264,7 +248,7 @@
   // 删除一个集群
   const handleRemove = (index: number) => {
     const dataList = [...tableData.value];
-    const { instanceAddress, clusterType } = dataList[index].source!;
+    const { instance_address: instanceAddress, cluster_type: clusterType } = dataList[index].source!;
     dataList.splice(index, 1);
     tableData.value = dataList;
     if (instanceAddress) {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/privilege-clone-inst/pages/page1/components/RenderData/RenderSource.vue b/dbm-ui/frontend/src/views/db-manage/mysql/privilege-clone-inst/pages/page1/components/RenderData/RenderSource.vue
deleted file mode 100644
index cde71fdda1..0000000000
--- a/dbm-ui/frontend/src/views/db-manage/mysql/privilege-clone-inst/pages/page1/components/RenderData/RenderSource.vue
+++ /dev/null
@@ -1,163 +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>
-  <TableEditInput
-    ref="editRef"
-    v-model="localInstanceAddress"
-    :placeholder="t('请输入IP:Port或从表头批量选择')"
-    :rules="rules" />
-</template>
-<script lang="ts">
-  const instanceAddreddMemo: { [key: string]: Record<string, boolean> } = {};
-</script>
-<script setup lang="ts">
-  import { useI18n } from 'vue-i18n';
-
-  import { checkMysqlInstances } from '@services/source/instances';
-
-  import { useGlobalBizs } from '@stores';
-
-  import { ipPort } from '@common/regex';
-
-  import TableEditInput from '@components/render-table/columns/input/index.vue';
-
-  import { random } from '@utils';
-
-  import type { IDataRow } from './Row.vue';
-
-  interface Exposes {
-    getValue: () => Array<number>;
-  }
-
-  const instanceKey = `render_source_${random()}`;
-  instanceAddreddMemo[instanceKey] = {};
-
-  const { currentBizId } = useGlobalBizs();
-  const { t } = useI18n();
-
-  const modelValue = defineModel<IDataRow['source']>();
-  const editRef = ref();
-
-  const localInstanceAddress = ref('');
-
-  const rules = [
-    {
-      validator: (value: string) => Boolean(value),
-      message: t('源实例不能为空'),
-    },
-    {
-      validator: (value: string) => {
-        const infos = value.split(':');
-        if (infos.length !== 2) {
-          return false;
-        }
-
-        // 判断是否为合法实例
-        if (ipPort.test(`${infos[0]}:${infos[1]}`) === false) {
-          return false;
-        }
-
-        return true;
-      },
-      message: t('请输入合法管控区域_IP_Port'),
-      trigger: 'blur',
-    },
-    {
-      validator: (value: string) =>
-        checkMysqlInstances({
-          bizId: currentBizId,
-          instance_addresses: [value],
-        }).then((data) => {
-          if (data.length < 1) {
-            return false;
-          }
-          instanceAddreddMemo[instanceKey] = { [value]: true };
-
-          const [currentInstanceData] = data;
-
-          modelValue.value = {
-            bkCloudId: currentInstanceData.bk_cloud_id,
-            clusterId: currentInstanceData.cluster_id,
-            dbModuleId: currentInstanceData.db_module_id,
-            dbModuleName: currentInstanceData.db_module_name,
-            instanceAddress: currentInstanceData.instance_address,
-            masterDomain: currentInstanceData.master_domain,
-            clusterType: currentInstanceData.cluster_type,
-          };
-          return true;
-        }),
-      message: t('源实例不存在'),
-    },
-    {
-      validator: () => {
-        const currentClusterSelectMap = instanceAddreddMemo[instanceKey];
-        const otherClusterMemoMap = { ...instanceAddreddMemo };
-        delete otherClusterMemoMap[instanceKey];
-
-        const otherClusterIdMap = Object.values(otherClusterMemoMap).reduce(
-          (result, item) => ({
-            ...result,
-            ...item,
-          }),
-          {} as Record<string, boolean>,
-        );
-
-        const currentSelectClusterIdList = Object.keys(currentClusterSelectMap);
-        for (let i = 0; i < currentSelectClusterIdList.length; i++) {
-          if (otherClusterIdMap[currentSelectClusterIdList[i]]) {
-            return false;
-          }
-        }
-        return true;
-      },
-      message: t('源实例重复'),
-    },
-  ];
-
-  // 同步外部值
-  watch(
-    modelValue,
-    () => {
-      if (modelValue.value) {
-        localInstanceAddress.value = modelValue.value.instanceAddress;
-
-        instanceAddreddMemo[instanceKey] = { [localInstanceAddress.value]: true };
-      } else {
-        instanceAddreddMemo[instanceKey] = {};
-      }
-    },
-    {
-      immediate: true,
-    },
-  );
-
-  onBeforeUnmount(() => {
-    delete instanceAddreddMemo[instanceKey];
-  });
-
-  defineExpose<Exposes>({
-    getValue() {
-      // 用户输入未完成验证
-      return editRef.value.getValue().then(() => {
-        if (!localInstanceAddress.value) {
-          return Promise.reject();
-        }
-
-        return {
-          source: localInstanceAddress.value,
-        };
-      });
-    },
-  });
-</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/privilege-clone-inst/pages/page1/components/RenderData/RenderTarget.vue b/dbm-ui/frontend/src/views/db-manage/mysql/privilege-clone-inst/pages/page1/components/RenderData/RenderTarget.vue
index e6c63b6603..65d61a5b3e 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/privilege-clone-inst/pages/page1/components/RenderData/RenderTarget.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/privilege-clone-inst/pages/page1/components/RenderData/RenderTarget.vue
@@ -80,7 +80,7 @@
       message: t('新实例不存在'),
     },
     {
-      validator: () => !!props.source && props.source.bkCloudId === localInstanceData.bk_cloud_id,
+      validator: () => !!props.source && props.source.bk_cloud_id === localInstanceData.bk_cloud_id,
       message: t('新实例和源实例的管控区域不一致'),
     },
     {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/privilege-clone-inst/pages/page1/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/privilege-clone-inst/pages/page1/components/RenderData/Row.vue
index e723a36e53..4f59496b44 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/privilege-clone-inst/pages/page1/components/RenderData/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/privilege-clone-inst/pages/page1/components/RenderData/Row.vue
@@ -16,11 +16,13 @@
     <FixedColumn fixed="left">
       <RenderSource
         ref="sourceRef"
-        v-model="localSource" />
+        v-model="localSource"
+        :cluster-types="[ClusterTypes.TENDBHA, ClusterTypes.TENDBSINGLE]"
+        :tab-list-config="tabListConfig" />
     </FixedColumn>
     <td style="padding: 0">
       <RenderText
-        :data="localSource?.masterDomain"
+        :data="localSource?.master_domain"
         :placeholder="t('输入源实例后自动生成')" />
     </td>
     <td style="padding: 0">
@@ -52,13 +54,15 @@
   export interface IDataRow {
     rowKey: string;
     source?: {
-      bkCloudId: number;
-      clusterId: number;
-      clusterType: string;
-      dbModuleId: number;
-      dbModuleName: string;
-      instanceAddress: string;
-      masterDomain: string;
+      bk_cloud_id: number;
+      cluster_id: number;
+      cluster_type: string;
+      db_module_id: number;
+      db_module_name: string;
+      instance_address: string;
+      master_domain: string;
+      ip: string;
+      port: number;
     };
     target?: IProxyData;
   }
@@ -73,11 +77,14 @@
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n';
 
+  import { ClusterTypes } from '@common/const';
+
   import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
   import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
   import RenderText from '@components/render-table/columns/text-plain/index.vue';
 
-  import RenderSource from './RenderSource.vue';
+  import RenderSource from '@views/db-manage/mysql/common/edit-field/InstanceWithSelector.vue';
+
   import RenderTarget from './RenderTarget.vue';
 
   interface Props {
@@ -105,6 +112,23 @@
 
   const localSource = ref<IDataRow['source']>();
 
+  const tabListConfig = {
+    [ClusterTypes.TENDBHA]: [
+      {
+        tableConfig: {
+          multiple: false,
+        },
+      },
+    ],
+    [ClusterTypes.TENDBSINGLE]: [
+      {
+        tableConfig: {
+          multiple: false,
+        },
+      },
+    ],
+  } as any;
+
   watch(
     () => props.data,
     () => {
@@ -153,10 +177,10 @@
     getValue() {
       return Promise.all([sourceRef.value!.getValue(), targetRef.value!.getValue()]).then(
         ([sourceData, targetData]) => ({
-          ...sourceData,
+          source: sourceData.instance_address,
           ...targetData,
-          cluster_domain: localSource.value!.masterDomain,
-          bk_cloud_id: localSource.value!.bkCloudId,
+          cluster_domain: localSource.value!.master_domain,
+          bk_cloud_id: localSource.value!.bk_cloud_id,
         }),
       );
     },
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/slave-add/pages/page1/components/RenderData/render-cluster/ClusterRelatedInput.vue b/dbm-ui/frontend/src/views/db-manage/mysql/slave-add/pages/page1/components/RenderData/render-cluster/ClusterRelatedInput.vue
index b395e8f1d5..c2185409ba 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/slave-add/pages/page1/components/RenderData/render-cluster/ClusterRelatedInput.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/slave-add/pages/page1/components/RenderData/render-cluster/ClusterRelatedInput.vue
@@ -19,7 +19,7 @@
       <span
         v-overflow-tips
         class="text-overflow">
-        {{ data.cluster_domain }}
+        {{ data.domain }}
       </span>
       <DbIcon
         ref="iconRef"
@@ -72,8 +72,8 @@
 
   export interface Props {
     data: {
-      cluster_domain: string;
-      cluster_id: number;
+      domain: string;
+      id: number;
       cluster_related: TendbhaModel[];
       checked_related: TendbhaModel[];
     };
@@ -102,7 +102,7 @@
   watch(
     () => props.data,
     () => {
-      isEdit.value = !props.data.cluster_id;
+      isEdit.value = !props.data.id;
     },
     { immediate: true, deep: true },
   );
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/slave-add/pages/page1/components/RenderData/render-cluster/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/slave-add/pages/page1/components/RenderData/render-cluster/Index.vue
index d6983eddd7..ea25929dae 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/slave-add/pages/page1/components/RenderData/render-cluster/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/slave-add/pages/page1/components/RenderData/render-cluster/Index.vue
@@ -12,15 +12,14 @@
 -->
 
 <template>
-  <TableEditInput
-    v-if="isEdit"
-    ref="editRef"
-    v-model="relatedClusterDisplayInfo.cluster_domain"
-    :placeholder="t('请输入集群域名或从表头批量选择')"
-    :rules="rules"
-    @submit="handleInputFinish" />
+  <span v-show="isEdit">
+    <TableEditInput
+      ref="editRef"
+      :model-value="relatedClusterDisplayInfo"
+      @cluster-change="handleInputFinish" />
+  </span>
   <ClusterRelatedInput
-    v-else
+    v-if="!isEdit"
     v-model="isEdit"
     :data="relatedClusterDisplayInfo"
     :placeholder="t('请输入集群域名')"
@@ -33,10 +32,9 @@
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
 
-  import { filterClusters } from '@services/source/dbbase';
   import { findRelatedClustersByClusterIds } from '@services/source/mysqlCluster';
 
-  import TableEditInput from '@components/render-table/columns/input/index.vue';
+  import TableEditInput from '@views/db-manage/mysql/common/edit-field/ClusterNameWithSelector.vue';
 
   import { random } from '@utils';
 
@@ -53,7 +51,7 @@
   }
 
   interface Exposes {
-    getValue: () => Record<'cluster_ids', Array<number>>;
+    getValue: () => Promise<Record<'cluster_ids', Array<number>>>;
   }
 
   const props = defineProps<Props>();
@@ -69,8 +67,8 @@
   const isShowEdit = ref(true);
 
   const relatedClusterDisplayInfo = reactive<ClusterRelatedInputProps['data']>({
-    cluster_id: 0,
-    cluster_domain: '',
+    id: 0,
+    domain: '',
     cluster_related: [],
     checked_related: [],
   });
@@ -85,68 +83,13 @@
     },
   });
 
-  const rules = [
-    {
-      validator: (value: string) => {
-        if (value) {
-          return true;
-        }
-        return false;
-      },
-      message: t('目标集群不能为空'),
-    },
-    {
-      validator: (value: string) =>
-        filterClusters({
-          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
-          exact_domain: value,
-        }).then((data) => {
-          if (data.length > 0) {
-            relatedClusterDisplayInfo.cluster_domain = data[0].master_domain;
-            relatedClusterDisplayInfo.cluster_id = data[0].id;
-            emits('idChange', {
-              id: data[0].id,
-              cloudId: data[0].bk_cloud_id,
-            });
-            return true;
-          }
-          return false;
-        }),
-      message: t('目标集群不存在'),
-    },
-    {
-      validator: () => {
-        const currentClusterSelectMap = clusterIdMemo[instanceKey];
-        const otherClusterMemoMap = { ...clusterIdMemo };
-        delete otherClusterMemoMap[instanceKey];
-
-        const otherClusterIdMap = Object.values(otherClusterMemoMap).reduce(
-          (result, item) => ({
-            ...result,
-            ...item,
-          }),
-          {} as Record<string, boolean>,
-        );
-
-        const currentSelectClusterIdList = Object.keys(currentClusterSelectMap);
-        for (let i = 0; i < currentSelectClusterIdList.length; i++) {
-          if (otherClusterIdMap[currentSelectClusterIdList[i]]) {
-            return false;
-          }
-        }
-        return true;
-      },
-      message: t('目标集群重复'),
-    },
-  ];
-
   // 同步外部值
   watch(
     () => props.modelValue,
     () => {
       if (props.modelValue.clusterData) {
-        relatedClusterDisplayInfo.cluster_id = props.modelValue.clusterData.id;
-        relatedClusterDisplayInfo.cluster_domain = props.modelValue.clusterData.domain;
+        relatedClusterDisplayInfo.id = props.modelValue.clusterData.id;
+        relatedClusterDisplayInfo.domain = props.modelValue.clusterData.domain;
         isShowEdit.value = false;
       } else {
         isShowEdit.value = true;
@@ -159,9 +102,9 @@
 
   // 获取关联集群
   watch(
-    () => relatedClusterDisplayInfo.cluster_id,
+    () => relatedClusterDisplayInfo.id,
     () => {
-      const clusterId = relatedClusterDisplayInfo.cluster_id;
+      const clusterId = relatedClusterDisplayInfo.id;
       if (!clusterId) {
         return;
       }
@@ -185,12 +128,20 @@
     }
   });
 
-  const handleInputFinish = () => {
-    nextTick(() => {
-      if (relatedClusterDisplayInfo.cluster_domain) {
+  const handleInputFinish = (info: { id: number; domain: string; cloudId: number }) => {
+    console.log('info: ', info);
+    if (info.domain) {
+      relatedClusterDisplayInfo.domain = info.domain;
+      relatedClusterDisplayInfo.id = info.id;
+
+      emits('idChange', {
+        id: info.id,
+        cloudId: info.cloudId,
+      });
+      nextTick(() => {
         isEdit.value = false;
-      }
-    });
+      });
+    }
   };
 
   /**
@@ -208,12 +159,12 @@
 
   defineExpose<Exposes>({
     getValue() {
-      return {
+      return editRef.value!.getValue().then(() => ({
         cluster_ids: [
-          relatedClusterDisplayInfo.cluster_id,
+          relatedClusterDisplayInfo.id,
           ...relatedClusterDisplayInfo.checked_related.map((item) => item.id),
         ],
-      };
+      }));
     },
   });
 </script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/new-host/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/new-host/Index.vue
index 3e8d828a17..883cbb1358 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/new-host/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/new-host/Index.vue
@@ -164,13 +164,13 @@
       if (!ipMemo[ip]) {
         const row = createRowData({
           oldSlave: {
-            bkCloudId: instanceData.bk_cloud_id,
-            bkCloudName: instanceData.bk_cloud_name,
-            bkHostId: instanceData.bk_host_id,
+            bk_cloud_id: instanceData.bk_cloud_id,
+            bk_cloud_name: instanceData.bk_cloud_name,
+            bk_host_id: instanceData.bk_host_id,
             ip,
             port: instanceData.port,
-            instanceAddress: instanceData.instance_address,
-            clusterId: instanceData.cluster_id,
+            instance_address: instanceData.instance_address,
+            cluster_id: instanceData.cluster_id,
           },
         });
         newList.push(row);
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/new-host/components/RenderData/RenderNewSlave.vue b/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/new-host/components/RenderData/RenderNewSlave.vue
index 28aecbfc7a..7a52781aba 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/new-host/components/RenderData/RenderNewSlave.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/new-host/components/RenderData/RenderNewSlave.vue
@@ -62,7 +62,7 @@
             type="exclamation-fill" />
         </div>
       </div>
-      <template #content> {{ localHostData?.ip }}} </template>
+      <template #content> {{ localHostData?.ip }} </template>
     </BkPopover>
   </div>
   <IpSelector
@@ -71,8 +71,8 @@
     :biz-id="currentBizId"
     button-text=""
     :cloud-info="{
-      id: oldSlave.bkCloudId,
-      name: oldSlave.bkCloudName,
+      id: oldSlave.bk_cloud_id,
+      name: oldSlave.bk_cloud_name,
     }"
     :os-types="[OSTypes.Linux]"
     service-mode="all"
@@ -138,10 +138,10 @@
       if (props.newSlave) {
         localHostData.value = {
           biz: {
-            id: props.newSlave.bkBizId,
+            id: props.newSlave.bk_biz_id,
           },
-          cloud_id: props.newSlave.bkCloudId,
-          host_id: props.newSlave.bkHostId,
+          cloud_id: props.newSlave.bk_cloud_id,
+          host_id: props.newSlave.bk_host_id,
           ip: props.newSlave.ip,
         } as HostDetails;
       }
@@ -285,11 +285,11 @@
         position: absolute;
         top: 50%;
         left: 50%;
-        transform: translateY(-50%);
         display: flex;
         padding-right: 35px;
         font-size: 14px;
         color: #ea3636;
+        transform: translateY(-50%);
         align-items: center;
         justify-content: flex-end;
       }
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/new-host/components/RenderData/RenderOldSlave.vue b/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/new-host/components/RenderData/RenderOldSlave.vue
index b6b1fefe36..8ea85c7e26 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/new-host/components/RenderData/RenderOldSlave.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/new-host/components/RenderData/RenderOldSlave.vue
@@ -85,17 +85,17 @@
           instanceAddreddMemo[instanceKey] = { [localValue.value]: true };
           const [instanceData] = data;
           if (
-            !modelValue.value?.instanceAddress ||
-            modelValue.value.instanceAddress !== instanceData.instance_address
+            !modelValue.value?.instance_address ||
+            modelValue.value.instance_address !== instanceData.instance_address
           ) {
             modelValue.value = {
-              bkCloudId: instanceData.bk_cloud_id,
-              bkCloudName: instanceData.bk_cloud_name,
-              bkHostId: instanceData.bk_host_id,
+              bk_cloud_id: instanceData.bk_cloud_id,
+              bk_cloud_name: instanceData.bk_cloud_name,
+              bk_host_id: instanceData.bk_host_id,
               ip: instanceData.ip,
               port: instanceData.port,
-              instanceAddress: instanceData.instance_address,
-              clusterId: instanceData.cluster_id,
+              instance_address: instanceData.instance_address,
+              cluster_id: instanceData.cluster_id,
             };
           }
           return true;
@@ -162,11 +162,11 @@
           return {
             old_slave: {
               bk_biz_id: currentBizId,
-              bk_cloud_id: modelValue.value.bkCloudId,
+              bk_cloud_id: modelValue.value.bk_cloud_id,
               ip: modelValue.value.ip,
-              bk_host_id: modelValue.value.bkHostId,
+              bk_host_id: modelValue.value.bk_host_id,
               port: modelValue.value.port,
-              instance_address: modelValue.value.instanceAddress,
+              instance_address: modelValue.value.instance_address,
             },
           };
         })
@@ -176,11 +176,11 @@
               ? {
                   old_slave: {
                     bk_biz_id: currentBizId,
-                    bk_cloud_id: modelValue.value.bkCloudId,
+                    bk_cloud_id: modelValue.value.bk_cloud_id,
                     ip: modelValue.value.ip,
-                    bk_host_id: modelValue.value.bkHostId,
+                    bk_host_id: modelValue.value.bk_host_id,
                     port: modelValue.value.port,
-                    instance_address: modelValue.value.instanceAddress,
+                    instance_address: modelValue.value.instance_address,
                   },
                 }
               : undefined,
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/new-host/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/new-host/components/RenderData/Row.vue
index 01b3b84d49..2b400b632e 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/new-host/components/RenderData/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/new-host/components/RenderData/Row.vue
@@ -16,7 +16,10 @@
     <FixedColumn fixed="left">
       <RenderOldSlave
         ref="slaveRef"
-        v-model="localOldSlave" />
+        v-model="localOldSlave"
+        :placeholder="t('请输入IP或从表头批量选择')"
+        :tab-list-config="tabListConfig"
+        type="ip" />
     </FixedColumn>
     <td style="padding: 0">
       <RenderCluster
@@ -38,31 +41,36 @@
   </tr>
 </template>
 <script lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import { ClusterTypes } from '@common/const';
+
   import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
   import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
 
+  import RenderOldSlave from '@views/db-manage/mysql/common/edit-field/InstanceWithSelector.vue';
+
   import { random } from '@utils';
 
   import RenderCluster from './RenderCluster.vue';
   import RenderNewSlave from './RenderNewSlave.vue';
-  import RenderOldSlave from './RenderOldSlave.vue';
 
   export interface IDataRow {
     rowKey: string;
     oldSlave?: {
-      bkCloudId: number;
-      bkCloudName: string;
-      bkHostId: number;
+      bk_cloud_id: number;
+      bk_cloud_name: string;
+      bk_host_id: number;
       ip: string;
       port: number;
-      instanceAddress: string;
-      clusterId: number;
+      instance_address: string;
+      cluster_id: number;
     };
     clusterId?: number;
     newSlave?: {
-      bkBizId: number;
-      bkCloudId: number;
-      bkHostId: number;
+      bk_biz_id: number;
+      bk_cloud_id: number;
+      bk_host_id: number;
       ip: string;
       // port: number;
     };
@@ -95,13 +103,29 @@
 
   const emits = defineEmits<Emits>();
 
+  const { t } = useI18n();
+
   const slaveRef = ref<InstanceType<typeof RenderOldSlave>>();
   const clusterRef = ref<InstanceType<typeof RenderCluster>>();
   const newSlaveRef = ref<InstanceType<typeof RenderNewSlave>>();
-
   const localOldSlave = ref<IDataRow['oldSlave']>();
   const localNewSlave = ref<IDataRow['newSlave']>();
 
+  const tabListConfig = {
+    [ClusterTypes.TENDBHA]: [
+      {
+        name: t('待重建从库主机'),
+        tableConfig: {
+          firsrColumn: {
+            label: 'slave',
+            role: 'slave',
+          },
+          multiple: false,
+        },
+      },
+    ],
+  } as any;
+
   watch(
     () => props.data,
     () => {
@@ -138,9 +162,9 @@
           clusterId: rowInfo[0]?.old_slave.cluster_id,
           newSlave: newSlaveData
             ? {
-                bkBizId: newSlaveData.new_slave.bk_biz_id,
-                bkCloudId: newSlaveData.new_slave.bk_cloud_id,
-                bkHostId: newSlaveData.new_slave.bk_host_id,
+                bk_biz_id: newSlaveData.new_slave.bk_biz_id,
+                bk_cloud_id: newSlaveData.new_slave.bk_cloud_id,
+                bk_host_id: newSlaveData.new_slave.bk_host_id,
                 ip: newSlaveData.new_slave.ip,
               }
             : undefined,
@@ -151,10 +175,21 @@
 
   defineExpose<Exposes>({
     getValue() {
-      return Promise.all(getRowData()).then(([sourceData, clusterData, newSlaveData]) => ({
-        ...sourceData,
-        ...clusterData,
+      return Promise.all([
+        slaveRef.value!.getValue(),
+        clusterRef.value!.getValue(),
+        newSlaveRef.value!.getValue(),
+      ]).then(([sourceData, moduleData, newSlaveData]) => ({
+        old_slave: {
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          bk_cloud_id: sourceData.bk_cloud_id,
+          ip: sourceData.ip,
+          bk_host_id: sourceData.bk_host_id,
+          port: sourceData.port,
+          instance_address: sourceData.instance_address,
+        },
         ...newSlaveData,
+        ...moduleData,
       }));
     },
   });
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/original-host/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/original-host/Index.vue
index bf2fe0e4a3..4d973252a1 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/original-host/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/original-host/Index.vue
@@ -166,12 +166,12 @@
       if (!instanceMemo[instance]) {
         const row = createRowData({
           slave: {
-            bkCloudId: instanceData.bk_cloud_id,
-            bkHostId: instanceData.bk_host_id,
+            bk_cloud_id: instanceData.bk_cloud_id,
+            bk_host_id: instanceData.bk_host_id,
             ip: instanceData.ip,
             port: instanceData.port,
-            instanceAddress: instanceData.instance_address,
-            clusterId: instanceData.cluster_id,
+            instance_address: instanceData.instance_address,
+            cluster_id: instanceData.cluster_id,
           },
         });
         newList.push(row);
@@ -196,7 +196,7 @@
 
   // 删除一个行
   const handleRemove = (index: number) => {
-    const instanceAddress = tableData.value[index].slave?.instanceAddress;
+    const instanceAddress = tableData.value[index].slave?.instance_address;
     if (instanceAddress) {
       delete instanceMemo[instanceAddress];
       const clustersArr = selectedIntances.value[ClusterTypes.TENDBHA];
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/original-host/components/RenderData/RenderCluster.vue b/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/original-host/components/RenderData/RenderCluster.vue
index 1753f4fa65..4620b5e5d2 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/original-host/components/RenderData/RenderCluster.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/original-host/components/RenderData/RenderCluster.vue
@@ -65,7 +65,7 @@
       }
       fetchCheckMysqlInstances({
         bizId: currentBizId,
-        instance_addresses: [props.slave.instanceAddress],
+        instance_addresses: [props.slave.instance_address],
       });
     },
     {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/original-host/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/original-host/components/RenderData/Row.vue
index 7c18bd4168..34d8f6d25d 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/original-host/components/RenderData/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/slave-rebuild/pages/page1/components/original-host/components/RenderData/Row.vue
@@ -16,7 +16,8 @@
     <FixedColumn fixed="left">
       <RenderSlave
         ref="slaveRef"
-        v-model="localSlave" />
+        v-model="localSlave"
+        :tab-list-config="tabListConfig" />
     </FixedColumn>
     <td style="padding: 0">
       <RenderCluster
@@ -32,23 +33,28 @@
   </tr>
 </template>
 <script lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import { ClusterTypes } from '@common/const';
+
   import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
   import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
 
+  import RenderSlave from '@views/db-manage/mysql/common/edit-field/InstanceWithSelector.vue';
+
   import { random } from '@utils';
 
   import RenderCluster from './RenderCluster.vue';
-  import RenderSlave from './RenderSlave.vue';
 
   export interface IDataRow {
     rowKey: string;
     slave?: {
-      bkCloudId: number;
-      bkHostId: number;
+      bk_cloud_id: number;
+      bk_host_id: number;
       ip: string;
       port: number;
-      instanceAddress: string;
-      clusterId: number;
+      instance_address: string;
+      cluster_id: number;
     };
     clusterId?: number;
   }
@@ -79,11 +85,27 @@
 
   const emits = defineEmits<Emits>();
 
-  const slaveRef = ref();
-  const clusterRef = ref();
+  const { t } = useI18n();
 
+  const slaveRef = ref<InstanceType<typeof RenderSlave>>();
+  const clusterRef = ref<InstanceType<typeof RenderCluster>>();
   const localSlave = ref<IDataRow['slave']>();
 
+  const tabListConfig = {
+    [ClusterTypes.TENDBHA]: [
+      {
+        name: t('目标从库实例'),
+        tableConfig: {
+          firsrColumn: {
+            label: 'slave',
+            role: 'slave',
+          },
+          multiple: false,
+        },
+      },
+    ],
+  } as any;
+
   watch(
     () => props.data,
     () => {
@@ -107,7 +129,7 @@
     emits('remove');
   };
 
-  const getRowData = () => [slaveRef.value.getValue('master_ip'), clusterRef.value.getValue()];
+  const getRowData = () => [slaveRef.value!.getValue(), clusterRef.value!.getValue()];
 
   const handleClone = () => {
     Promise.allSettled(getRowData()).then((rowData) => {
@@ -117,12 +139,12 @@
         createRowData({
           slave: sourceData
             ? {
-                bkCloudId: sourceData.slave.bk_cloud_id,
-                bkHostId: sourceData.slave.bk_host_id,
+                bk_cloud_id: sourceData.slave.bk_cloud_id,
+                bk_host_id: sourceData.slave.bk_host_id,
                 ip: sourceData.slave.ip,
                 port: sourceData.slave.port,
-                instanceAddress: sourceData.slave.instance_address,
-                clusterId: clusterData.cluster_id,
+                instance_address: sourceData.slave.instance_address,
+                cluster_id: clusterData.cluster_id,
               }
             : undefined,
           clusterId: clusterData.cluster_id,
@@ -133,10 +155,19 @@
 
   defineExpose<Exposes>({
     getValue() {
-      return Promise.all(getRowData()).then(([sourceData, clusterData]) => ({
-        ...sourceData,
-        ...clusterData,
-      }));
+      return Promise.all([slaveRef.value!.getValue(), clusterRef.value!.getValue()]).then(
+        ([sourceData, moduleData]) => ({
+          slave: {
+            bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+            bk_cloud_id: sourceData.bk_cloud_id,
+            ip: sourceData.ip,
+            bk_host_id: sourceData.bk_host_id,
+            port: sourceData.port,
+            instance_address: sourceData.instance_address,
+          },
+          ...moduleData,
+        }),
+      );
     },
   });
 </script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/RenderClusterWithRelateCluster.vue b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/RenderClusterWithRelateCluster.vue
index 04790e6d19..c71a410b16 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/RenderClusterWithRelateCluster.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/RenderClusterWithRelateCluster.vue
@@ -17,19 +17,18 @@
     :class="{
       'is-editing': isShowEdit,
     }">
-    <TableEditInput
-      v-show="isShowEdit"
-      ref="editRef"
-      v-model="localDomain"
-      :placeholder="t('请输入集群域名或从表头批量选择')"
-      :rules="rules"
-      @error="handleErrorMessageChange"
-      @submit="handleEditSubmit" />
+    <span v-show="isShowEdit">
+      <TableEditInput
+        ref="editRef"
+        :model-value="localClusterInfo"
+        @cluster-change="handleEditSubmit"
+        @error="handleErrorMessageChange" />
+    </span>
     <div
       v-show="!isShowEdit"
       @click="handleShowEdit">
       <div class="render-cluster-domain">
-        <span>{{ localDomain }}</span>
+        <span>{{ localClusterInfo.domain }}</span>
       </div>
       <div
         v-if="relatedClusterList.length > 0"
@@ -50,16 +49,12 @@
 
 <script setup lang="ts">
   import _ from 'lodash';
-  import { useI18n } from 'vue-i18n';
 
-  import TendbhaModel from '@services/model/mysql/tendbha';
-  import { findRelatedClustersByClusterIds, queryClusters } from '@services/source/mysqlCluster';
+  import { findRelatedClustersByClusterIds } from '@services/source/mysqlCluster';
 
   import { useGlobalBizs } from '@stores';
 
-  import { ClusterTypes } from '@common/const';
-
-  import TableEditInput from '@components/render-table/columns/input/index.vue';
+  import TableEditInput from '@views/db-manage/mysql/common/edit-field/ClusterNameWithSelector.vue';
 
   import { random } from '@utils';
 
@@ -71,7 +66,7 @@
   }
 
   interface Emits {
-    (e: 'idChange', value: TendbhaModel | null): void;
+    (e: 'idChange', clusterId: number): void;
   }
 
   interface Exposes {
@@ -84,13 +79,15 @@
   const instanceKey = `render_cluster_instance_${random()}`;
   clusterIdMemo[instanceKey] = {};
 
-  const { t } = useI18n();
   const { currentBizId } = useGlobalBizs();
 
   const editRef = ref();
 
-  const localClusterId = ref(0);
-  const localDomain = ref('');
+  const localClusterInfo = ref({
+    id: 0,
+    domain: '',
+  });
+
   const isShowEdit = ref(true);
   const isRelateLoading = ref(false);
   const relatedClusterList = shallowRef<
@@ -100,69 +97,11 @@
     }>
   >([]);
 
-  const rules = [
-    {
-      validator: (value: string) => {
-        if (value) {
-          return true;
-        }
-        emits('idChange', null);
-        return false;
-      },
-      message: '目标集群不能为空',
-    },
-    {
-      validator: (value: string) =>
-        queryClusters({
-          cluster_filters: [
-            {
-              immute_domain: value,
-              cluster_type: ClusterTypes.TENDBHA,
-            },
-          ],
-          bk_biz_id: currentBizId,
-        }).then((data) => {
-          if (data.length > 0) {
-            localClusterId.value = data[0].id;
-            emits('idChange', data[0]);
-            return true;
-          }
-          emits('idChange', null);
-          return false;
-        }),
-      message: '目标集群不存在',
-    },
-    {
-      validator: () => {
-        const currentClusterSelectMap = clusterIdMemo[instanceKey];
-        const otherClusterMemoMap = { ...clusterIdMemo };
-        delete otherClusterMemoMap[instanceKey];
-
-        const otherClusterIdMap = Object.values(otherClusterMemoMap).reduce(
-          (result, item) => ({
-            ...result,
-            ...item,
-          }),
-          {} as Record<string, boolean>,
-        );
-
-        const currentSelectClusterIdList = Object.keys(currentClusterSelectMap);
-        for (let i = 0; i < currentSelectClusterIdList.length; i++) {
-          if (otherClusterIdMap[currentSelectClusterIdList[i]]) {
-            return false;
-          }
-        }
-        return true;
-      },
-      message: '目标集群重复',
-    },
-  ];
-
   // 通过 ID 获取关联集群
   const fetchRelatedClustersByClusterIds = () => {
     isRelateLoading.value = true;
     findRelatedClustersByClusterIds({
-      cluster_ids: [localClusterId.value],
+      cluster_ids: [localClusterInfo.value.id],
       bk_biz_id: currentBizId,
     })
       .then((data) => {
@@ -182,8 +121,10 @@
     () => props.modelValue,
     () => {
       const { id = 0, domain = '' } = props.modelValue || {};
-      localClusterId.value = id;
-      localDomain.value = domain;
+      localClusterInfo.value = {
+        id,
+        domain,
+      };
       isShowEdit.value = !id;
     },
     {
@@ -193,12 +134,12 @@
 
   // 获取关联集群
   watch(
-    localClusterId,
-    () => {
-      if (!localClusterId.value) {
+    () => localClusterInfo.value.id,
+    (clusterId) => {
+      if (!clusterId) {
         return;
       }
-      clusterIdMemo[instanceKey][localClusterId.value] = true;
+      clusterIdMemo[instanceKey][clusterId] = true;
       fetchRelatedClustersByClusterIds();
     },
     {
@@ -215,11 +156,17 @@
   };
 
   // 提交编辑
-  const handleEditSubmit = (value: string) => {
-    if (!value) {
+  const handleEditSubmit = (info: { id: number; domain: string }) => {
+    if (!info.domain) {
       return;
     }
 
+    const { id, domain } = info;
+    localClusterInfo.value = {
+      id,
+      domain,
+    };
+    emits('idChange', id);
     isShowEdit.value = false;
   };
 
@@ -234,10 +181,17 @@
   defineExpose<Exposes>({
     getValue() {
       const result = {
-        cluster_ids: _.uniq([localClusterId.value, ...relatedClusterList.value.map((listItem) => listItem.id)]),
+        cluster_ids: _.uniq([localClusterInfo.value.id, ...relatedClusterList.value.map((listItem) => listItem.id)]),
       };
-
-      return editRef.value.getValue().then(() => result);
+      // 用户输入未完成验证
+      if (editRef.value) {
+        return editRef.value.getValue().then(() => result);
+      }
+      // 用户输入错误
+      if (!localClusterInfo.value.id) {
+        return Promise.reject();
+      }
+      return Promise.resolve(result);
     },
   });
 </script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-access-layer/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-access-layer/Index.vue
index 0ce950cabd..6b746e0748 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-access-layer/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-access-layer/Index.vue
@@ -52,7 +52,7 @@
             :data="item"
             :removeable="tableData.length < 2"
             @add="(payload: Array<IDataRow>) => handleAppend(index, payload)"
-            @cluster-input-finish="(domainObj: TendbhaModel | null) => handleChangeCluster(index, domainObj)"
+            @cluster-input-finish="(clusterId: number) => handleChangeCluster(index, clusterId)"
             @remove="handleRemove(index)" />
         </template>
       </RenderTable>
@@ -89,6 +89,7 @@
 
   import TendbhaModel from '@services/model/mysql/tendbha';
   import { findRelatedClustersByClusterIds } from '@services/source/mysqlCluster';
+  import { getTendbhaList } from '@services/source/tendbha';
   import { createTicket } from '@services/source/ticket';
 
   import { useGlobalBizs } from '@stores';
@@ -226,8 +227,13 @@
   };
 
   // 输入集群后查询集群信息并填充到table
-  const handleChangeCluster = async (index: number, domainObj: TendbhaModel | null) => {
-    if (domainObj) {
+  const handleChangeCluster = async (index: number, id: number) => {
+    tableData.value[index].isLoading = true;
+    const result = await getTendbhaList({ id }).finally(() => {
+      tableData.value[index].isLoading = false;
+    });
+    if (result.results.length > 0) {
+      const domainObj = result.results[0];
       const row = generateTableRow(domainObj);
       tableData.value[index] = row;
       domainMemo[domainObj.master_domain] = true;
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-access-layer/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-access-layer/Row.vue
index 087d8adc6d..8dde8a99e9 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-access-layer/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-access-layer/Row.vue
@@ -39,8 +39,6 @@
 <script lang="ts">
   import { useI18n } from 'vue-i18n';
 
-  import TendbhaModel from '@services/model/mysql/tendbha';
-
   import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
   import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
   import RenderText from '@components/render-table/columns/text-plain/index.vue';
@@ -80,7 +78,7 @@
   interface Emits {
     (e: 'add', params: Array<IDataRow>): void;
     (e: 'remove'): void;
-    (e: 'clusterInputFinish', value: TendbhaModel | null): void;
+    (e: 'clusterInputFinish', clusterId: number): void;
   }
 
   interface Exposes {
@@ -106,8 +104,8 @@
     return undefined;
   });
 
-  const handleClusterIdChange = (value: TendbhaModel | null) => {
-    emits('clusterInputFinish', value);
+  const handleClusterIdChange = (clusterId: number) => {
+    emits('clusterInputFinish', clusterId);
   };
 
   const handleAppend = () => {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-local/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-local/Index.vue
index 6faab8ce04..060b6d0b69 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-local/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-local/Index.vue
@@ -48,7 +48,7 @@
             :data="item"
             :removeable="tableData.length < 2"
             @add="(payload: Array<IDataRow>) => handleAppend(index, payload)"
-            @cluster-input-finish="(domainObj: TendbhaModel | null) => handleChangeCluster(index, domainObj)"
+            @cluster-input-finish="(clusterId: number) => handleChangeCluster(index, clusterId)"
             @remove="handleRemove(index)" />
         </template>
       </RenderTable>
@@ -85,6 +85,7 @@
 
   import TendbhaModel from '@services/model/mysql/tendbha';
   import { findRelatedClustersByClusterIds } from '@services/source/mysqlCluster';
+  import { getTendbhaList } from '@services/source/tendbha';
   import { createTicket } from '@services/source/ticket';
 
   import { useGlobalBizs } from '@stores';
@@ -224,8 +225,13 @@
   };
 
   // 输入集群后查询集群信息并填充到table
-  const handleChangeCluster = async (index: number, domainObj: TendbhaModel | null) => {
-    if (domainObj) {
+  const handleChangeCluster = async (index: number, id: number) => {
+    tableData.value[index].isLoading = true;
+    const result = await getTendbhaList({ id }).finally(() => {
+      tableData.value[index].isLoading = false;
+    });
+    if (result.results.length > 0) {
+      const domainObj = result.results[0];
       const row = generateTableRow(domainObj);
       tableData.value[index] = row;
       domainMemo[domainObj.master_domain] = true;
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-local/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-local/Row.vue
index 35951bd82e..4fd2986936 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-local/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-local/Row.vue
@@ -40,8 +40,6 @@
   </tr>
 </template>
 <script lang="ts">
-  import TendbhaModel from '@services/model/mysql/tendbha';
-
   import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
   import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
 
@@ -82,7 +80,7 @@
   interface Emits {
     (e: 'add', params: Array<IDataRow>): void;
     (e: 'remove'): void;
-    (e: 'clusterInputFinish', value: TendbhaModel | null): void;
+    (e: 'clusterInputFinish', clusterId: number): void;
   }
 
   interface Exposes {
@@ -107,8 +105,8 @@
     return undefined;
   });
 
-  const handleClusterIdChange = (value: TendbhaModel | null) => {
-    emits('clusterInputFinish', value);
+  const handleClusterIdChange = (clusterId: number) => {
+    emits('clusterInputFinish', clusterId);
   };
 
   const handleModuleChange = (value: string) => {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/Index.vue
index a8a7116592..9223ffe8f2 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/Index.vue
@@ -53,7 +53,7 @@
             :data="item"
             :removeable="tableData.length < 2"
             @add="(payload: Array<IDataRow>) => handleAppend(index, payload)"
-            @cluster-input-finish="(domainObj: TendbhaModel | null) => handleChangeCluster(index, domainObj)"
+            @cluster-input-finish="(clusterId: number) => handleChangeCluster(index, clusterId)"
             @remove="handleRemove(index)" />
         </template>
       </RenderTable>
@@ -106,6 +106,7 @@
 
   import TendbhaModel from '@services/model/mysql/tendbha';
   import { findRelatedClustersByClusterIds } from '@services/source/mysqlCluster';
+  import { getTendbhaList } from '@services/source/tendbha';
   import { createTicket } from '@services/source/ticket';
 
   import { useGlobalBizs } from '@stores';
@@ -257,8 +258,13 @@
   };
 
   // 输入集群后查询集群信息并填充到table
-  const handleChangeCluster = async (index: number, domainObj: TendbhaModel | null) => {
-    if (domainObj) {
+  const handleChangeCluster = async (index: number, id: number) => {
+    tableData.value[index].isLoading = true;
+    const result = await getTendbhaList({ id }).finally(() => {
+      tableData.value[index].isLoading = false;
+    });
+    if (result.results.length > 0) {
+      const domainObj = result.results[0];
       const row = generateTableRow(domainObj);
       tableData.value[index] = row;
       domainMemo[domainObj.master_domain] = true;
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/Row.vue
index 9ed6589573..bb0413df97 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/Row.vue
@@ -52,8 +52,6 @@
   </tr>
 </template>
 <script lang="ts">
-  import TendbhaModel from '@services/model/mysql/tendbha';
-
   import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
   import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
 
@@ -108,7 +106,7 @@
   interface Emits {
     (e: 'add', params: Array<IDataRow>): void;
     (e: 'remove'): void;
-    (e: 'clusterInputFinish', value: TendbhaModel | null): void;
+    (e: 'clusterInputFinish', clusterId: number): void;
   }
 
   interface Exposes {
@@ -134,8 +132,8 @@
     return undefined;
   });
 
-  const handleClusterIdChange = (value: TendbhaModel | null) => {
-    emits('clusterInputFinish', value);
+  const handleClusterIdChange = (clusterId: number) => {
+    emits('clusterInputFinish', clusterId);
   };
 
   const handleModuleChange = (value: string) => {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/single-storage-layer/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/single-storage-layer/Index.vue
index d1f99c2fa5..ccb2814a4c 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/single-storage-layer/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/single-storage-layer/Index.vue
@@ -48,7 +48,7 @@
             :data="item"
             :removeable="tableData.length < 2"
             @add="(payload: Array<IDataRow>) => handleAppend(index, payload)"
-            @cluster-input-finish="(domainObj: TendbSingleModel | null) => handleChangeCluster(index, domainObj)"
+            @cluster-input-finish="(clusterId: number) => handleChangeCluster(index, clusterId)"
             @remove="handleRemove(index)" />
         </template>
       </RenderTable>
@@ -84,6 +84,7 @@
   import { useI18n } from 'vue-i18n';
 
   import TendbSingleModel from '@services/model/mysql/tendbsingle';
+  import { getTendbsingleList } from '@services/source/tendbsingle';
   import { createTicket } from '@services/source/ticket';
 
   // import { useTicketCloneInfo } from '@hooks';
@@ -204,8 +205,13 @@
   };
 
   // 输入集群后查询集群信息并填充到table
-  const handleChangeCluster = async (index: number, domainObj: TendbSingleModel | null) => {
-    if (domainObj) {
+  const handleChangeCluster = async (index: number, id: number) => {
+    tableData.value[index].isLoading = true;
+    const result = await getTendbsingleList({ id }).finally(() => {
+      tableData.value[index].isLoading = false;
+    });
+    if (result.results.length > 0) {
+      const domainObj = result.results[0];
       const row = generateTableRow(domainObj);
       tableData.value[index] = row;
       domainMemo[domainObj.master_domain] = true;
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/single-storage-layer/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/single-storage-layer/Row.vue
index 89b72c6b22..b7b2be6aef 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/single-storage-layer/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/single-storage-layer/Row.vue
@@ -17,7 +17,8 @@
       <RenderCluster
         ref="clusterRef"
         :model-value="clusterInfo"
-        @id-change="handleClusterIdChange" />
+        tabs="tendbsingle"
+        @cluster-change="handleClusterIdChange" />
     </FixedColumn>
     <td style="padding: 0">
       <RenderCurrentVersion
@@ -40,18 +41,16 @@
   </tr>
 </template>
 <script lang="ts">
-  import TendbSingleModel from '@services/model/mysql/tendbsingle';
-
   import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
   import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
 
+  import RenderCluster from '@views/db-manage/mysql/common/edit-field/ClusterNameWithSelector.vue';
+
   import { random } from '@utils';
 
   import RenderCurrentVersion from '../RenderCurrentVersion.vue';
   import RenderTargetVersion from '../RenderTargetVersion.vue';
 
-  import RenderCluster from './RenderCluster.vue';
-
   export interface IDataRow {
     rowKey: string;
     isLoading: boolean;
@@ -83,7 +82,7 @@
   interface Emits {
     (e: 'add', params: Array<IDataRow>): void;
     (e: 'remove'): void;
-    (e: 'clusterInputFinish', value: TendbSingleModel | null): void;
+    (e: 'clusterInputFinish', value: number): void;
   }
 
   interface Exposes {
@@ -108,8 +107,8 @@
     return undefined;
   });
 
-  const handleClusterIdChange = (value: TendbSingleModel | null) => {
-    emits('clusterInputFinish', value);
+  const handleClusterIdChange = (info: { id: number }) => {
+    emits('clusterInputFinish', info.id);
   };
 
   const handleModuleChange = (value: string) => {
@@ -140,7 +139,7 @@
           current_module_name: clusterInfo.moduleName,
         });
         return {
-          ...clusterData,
+          cluster_ids: [clusterData.cluster_id],
           ...targetVersionData,
         };
       });