From efac4883a4a930cee1c601ea5090cc62ebd36d8c Mon Sep 17 00:00:00 2001
From: chenwenchang <479999519@qq.com>
Date: Tue, 31 Dec 2024 18:11:35 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E5=B7=A5=E5=85=B7=E7=AE=B1?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=B5=84=E6=BA=90=E6=B1=A0=E5=8D=8F=E8=AE=AE?=
 =?UTF-8?q?=E5=8F=98=E6=9B=B4=5Fmysql=E8=BF=81=E7=A7=BB=E4=B8=BB=E4=BB=8E?=
 =?UTF-8?q?=E6=8B=86=E5=88=86=E4=B8=BA=E9=9B=86=E7=BE=A4=E8=BF=81=E7=A7=BB?=
 =?UTF-8?q?=E3=80=81=E6=95=B4=E6=9C=BA=E8=BF=81=E7=A7=BB=20#8076=20#=20Rev?=
 =?UTF-8?q?iewed,=20transaction=20id:=2028201?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dbm-ui/frontend/src/locales/zh-cn.json        |  11 +-
 .../mysql/MYSQL_MIGRATE_CLUSTER/Create.vue    | 216 +++++-----------
 .../components/ClusterColumn.vue              | 146 +++++++++++
 .../components/ClusterMigrateTable.vue        | 168 +++++++++++++
 .../components/HostColumnGroup.vue            | 237 ++++++++++++++++++
 .../components/HostMigrateTable.vue           | 196 +++++++++++++++
 .../mysql/MYSQL_MIGRATE_CLUSTER/types.ts      |  27 ++
 .../components/HostTable.vue                  |   2 +
 .../components/InstanceTable.vue              |   2 +
 .../edit-table-column/TendbhaCluster.vue      |  10 +-
 10 files changed, 857 insertions(+), 158 deletions(-)
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterColumn.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterMigrateTable.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/HostColumnGroup.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/HostMigrateTable.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/types.ts

diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index 9951c01221..2d84b502d0 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3462,7 +3462,6 @@
   "时间戳类型(timestamp)": "时间戳类型(timestamp)",
   "整型(int)": "整型(int)",
   "整型(bigint)": "整型(bigint)",
-  "新proxy主机": "新proxy主机",
   "开启弱密码检测": "开启弱密码检测",
   "开启后，不允许超过 x 位连续字符，如出现以下示例密码将无法通过检测": "开启后，不允许超过 {x} 位连续字符，如出现以下示例密码将无法通过检测",
   "连续键盘序_如_xx": "连续键盘序，如：{0}",
@@ -3939,5 +3938,15 @@
   "Master 至少保留 2 台 ，Slave 至少 保留 1台": "Master 至少保留 2 台 ，Slave 至少 保留 1台",
   "请先选择集群和缩容节点类型": "请先选择集群和缩容节点类型",
   "手动选择主机不需要设置缩容数量": "手动选择主机不需要设置缩容数量",
+  "只迁移目标集群": "只迁移目标集群",
+  "集群迁移": "集群迁移",
+  "主机关联的所有集群一并迁移": "主机关联的所有集群一并迁移",
+  "新Master主机": "新 Master 主机",
+  "新Slave主机": "新 Slave 主机",
+  "请输入集群域名,多个集群换行输入": "请输入集群域名,多个集群换行输入",
+  "目标集群xx不存在": "目标集群 {0} 不存在",
+  "目标集群xx重复": "目标集群 {0} 重复",
+  "目标Master主机": "目标 Master 主机",
+  "请输入集群域名_多个集群用分隔符输入": "请输入集群域名，多个集群用分隔符输入",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/Create.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/Create.vue
index e751f05caa..0a35cd81f5 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/Create.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/Create.vue
@@ -19,35 +19,34 @@
       :title="
         t('迁移主从：集群主从实例将成对迁移至新机器。默认迁移同机所有关联集群，也可迁移部分集群，迁移会下架旧实例')
       " />
+    <div>
+      <strong class="mirgate-types-title">
+        {{ t('迁移类型') }}
+      </strong>
+      <div class="mt-8 mb-20">
+        <CardCheckbox
+          v-model="migrateType"
+          :desc="t('只迁移目标集群')"
+          icon="rebuild"
+          :title="t('集群迁移')"
+          :true-value="MigrateTypes.CLUSTER_MIGRATE" />
+        <CardCheckbox
+          v-model="migrateType"
+          class="ml-8"
+          :desc="t('主机关联的所有集群一并迁移')"
+          icon="host"
+          :title="t('整机迁移')"
+          :true-value="MigrateTypes.HOST_MIGRATE" />
+      </div>
+    </div>
     <BkForm
       v-model="formData"
       class="mb-20"
       form-type="vertical">
-      <EditableTable
+      <Component
+        :is="tableComponentMap[migrateType]"
         ref="table"
-        class="mb-20"
-        :model="formData.tableData"
-        :rules="rules">
-        <EditableTableRow
-          v-for="(item, index) in formData.tableData"
-          :key="index">
-          <WithRelatedClusters
-            v-model="item.cluster"
-            :selected="selected"
-            @batch-edit="handleBatchEdit" />
-          <SingleHost
-            v-model="item.master"
-            field="master.ip"
-            :label="t('新Master')" />
-          <SingleHost
-            v-model="item.slave"
-            field="slave.ip"
-            :label="t('新Slave')" />
-          <OperationColumn
-            v-model:table-data="formData.tableData"
-            :create-row-method="createTableRow" />
-        </EditableTableRow>
-      </EditableTable>
+        :data="formData.tableData" />
       <BackupSource v-model="formData.backupSource" />
       <TicketRemark v-model="formData.remark" />
     </BkForm>
@@ -73,164 +72,79 @@
   </SmartAction>
 </template>
 <script lang="ts" setup>
-  import { reactive, useTemplateRef } from 'vue';
+  import { reactive } from 'vue';
   import { useI18n } from 'vue-i18n';
 
-  import TendbhaModel from '@services/model/mysql/tendbha';
   import { BackupSourceType } from '@services/types';
 
   import { useCreateTicket } from '@hooks';
 
   import { TicketTypes } from '@common/const';
 
-  import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
+  import CardCheckbox from '@components/db-card-checkbox/CardCheckbox.vue';
 
   import BackupSource from '@views/db-manage/common/toolbox-field/backup-source/Index.vue';
-  import SingleHost from '@views/db-manage/common/toolbox-field/host-column/SingleHost.vue';
-  import OperationColumn from '@views/db-manage/common/toolbox-field/operation-column/Index.vue';
   import TicketRemark from '@views/db-manage/common/toolbox-field/ticket-remark/Index.vue';
-  import WithRelatedClusters from '@views/db-manage/mysql/common/edit-table-column/WithRelatedClusters.vue';
-
-  interface RowData {
-    cluster: {
-      id: number;
-      domain: string;
-      relatedClusters: {
-        id: number;
-        domain: string;
-      }[];
-    };
-    master: {
-      bk_biz_id: number;
-      bk_cloud_id: number;
-      bk_host_id: number;
-      ip: string;
-    };
-    slave: {
-      bk_biz_id: number;
-      bk_cloud_id: number;
-      bk_host_id: number;
-      ip: string;
-    };
-  }
+
+  import ClusterMigrateTable from './components/ClusterMigrateTable.vue';
+  import HostMigrateTable from './components/HostMigrateTable.vue';
+  import { MigrateTypes, type TicketInfo } from './types';
 
   const { t } = useI18n();
   const tableRef = useTemplateRef('table');
 
-  const createTableRow = (data = {} as Partial<RowData>) => ({
-    cluster: Object.assign({}, data.cluster),
-    master: Object.assign({}, data.master),
-    slave: Object.assign({}, data.slave),
-  });
+  const tableComponentMap = {
+    [MigrateTypes.CLUSTER_MIGRATE]: ClusterMigrateTable,
+    [MigrateTypes.HOST_MIGRATE]: HostMigrateTable,
+  };
+
+  const migrateType = ref(MigrateTypes.CLUSTER_MIGRATE);
 
   const defaultData = () => ({
-    tableData: [createTableRow()],
+    tableData: [],
     backupSource: BackupSourceType.REMOTE,
     remark: '',
   });
 
   const formData = reactive(defaultData());
-  // 表格行内已通过校验的集群为所选集群
-  const selected = computed(() => formData.tableData.filter((item) => item.cluster.id).map((item) => item.cluster));
-  // 集群域名到自身及其下集群id、域名映射
-  const clusterMap = computed(() => {
-    const result = selected.value.reduce<Record<string, { ids: number[]; domains: string[] }>>((acc, cur) => {
-      const relatedClusters = cur?.relatedClusters || [];
-      acc[cur.domain] = {
-        ids: [cur.id, ...relatedClusters.map((item) => item.id)],
-        domains: [cur.domain, ...relatedClusters.map((item) => item.domain)],
-      };
-      return acc;
-    }, {});
-    return result;
-  });
-  let repeatTarget = '';
-
-  const rules = {
-    'cluster.domain': [
-      {
-        validator: (value: string) => selected.value.filter((item) => item.domain === value).length < 2,
-        message: t('目标集群重复'),
-        trigger: 'change',
-      },
-      {
-        validator: (value: string) => {
-          repeatTarget = '';
-          let result = true;
-          Object.entries(clusterMap.value).forEach(([domain, item]) => {
-            const isContain = item.domains.includes(value);
-            if (isContain && domain !== value) {
-              repeatTarget = domain;
-              result = false;
-            }
-          });
-          return result;
-        },
-        message: () => t('目标集群是集群target的关联集群_请勿重复添加', { target: repeatTarget }),
-        trigger: 'change',
-      },
-    ],
-  };
 
   const { run: createTicketRun, loading: isSubmitting } = useCreateTicket<{
-    backup_source: BackupSourceType;
-    infos: {
-      cluster_ids: number[];
-      new_master: {
-        bk_biz_id: number;
-        bk_cloud_id: number;
-        bk_host_id: number;
-        ip: string;
-      };
-      new_slave: {
-        bk_biz_id: number;
-        bk_cloud_id: number;
-        bk_host_id: number;
-        ip: string;
-      };
-    }[];
+    ip_source: 'resource_pool';
+    backup_source: string;
+    infos: TicketInfo[];
   }>(TicketTypes.MYSQL_MIGRATE_CLUSTER);
 
   const handleSubmit = async () => {
-    const result = await tableRef.value!.validate();
-    if (!result) {
-      return;
+    const infos = await tableRef.value!.getValue();
+    if (infos.length) {
+      createTicketRun(
+        {
+          ip_source: 'resource_pool',
+          backup_source: formData.backupSource,
+          infos,
+        },
+        formData.remark,
+      );
     }
-    createTicketRun(
-      {
-        backup_source: formData.backupSource,
-        infos: formData.tableData.map((item) => ({
-          cluster_ids: clusterMap.value[item.cluster.domain].ids,
-          new_master: item.master,
-          new_slave: item.slave,
-        })),
-      },
-      formData.remark,
-    );
   };
 
   const handleReset = () => {
     Object.assign(formData, defaultData());
   };
-
-  const handleBatchEdit = (list: TendbhaModel[]) => {
-    const dataList = list.reduce<RowData[]>((acc, item) => {
-      if (!clusterMap.value[item.master_domain]) {
-        acc.push(
-          createTableRow({
-            cluster: {
-              id: item.id,
-              domain: item.master_domain,
-              relatedClusters: [],
-            },
-          }),
-        );
-      }
-      return acc;
-    }, []);
-    formData.tableData = [...(selected.value.length ? formData.tableData : []), ...dataList];
-    nextTick(() => {
-      tableRef.value!.validateByColumnIndex(0);
-    });
-  };
 </script>
+
+<style lang="less" scoped>
+  .mirgate-types-title {
+    position: relative;
+    font-size: @font-size-mini;
+    color: @title-color;
+
+    &::after {
+      position: absolute;
+      top: 2px;
+      right: -8px;
+      color: @danger-color;
+      content: '*';
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterColumn.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterColumn.vue
new file mode 100644
index 0000000000..93655f5fac
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterColumn.vue
@@ -0,0 +1,146 @@
+<!--
+ * 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>
+  <Column
+    :append-rules="rules"
+    field="cluster.cluster_domains"
+    fixed="left"
+    :label="t('目标集群')"
+    :loading="loading"
+    :min-width="300"
+    required>
+    <template #headAppend>
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-host-select"
+        @click="handleShowSelector">
+        <DbIcon type="batch-host-select" />
+      </span>
+    </template>
+    <Textarea
+      v-model="modelValue.cluster_domains"
+      :placeholder="t('请输入集群域名_多个集群用分隔符输入')"
+      @change="handleInputChange" />
+  </Column>
+  <ClusterSelector
+    v-model:is-show="showSelector"
+    :cluster-types="[ClusterTypes.TENDBHA]"
+    :selected="selected"
+    @change="handleSelectorChange" />
+</template>
+<script lang="ts">
+  const domainIdMap: Record<string, number> = {};
+</script>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import TendbhaModel from '@services/model/mysql/tendbha';
+  import { filterClusters } from '@services/source/dbbase';
+
+  import { ClusterTypes } from '@common/const';
+  import { batchSplitRegex, domainRegex } from '@common/regex';
+
+  import ClusterSelector from '@components/cluster-selector/Index.vue';
+  import { Column, Textarea } from '@components/editable-table/Index.vue';
+
+  interface Props {
+    selectedIds: number[];
+  }
+
+  interface Emits {
+    (e: 'batch-edit', list: TendbhaModel[]): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<{
+    cluster_ids: number[];
+    cluster_domains: string;
+  }>({
+    default: () => [],
+  });
+
+  const { t } = useI18n();
+
+  const showSelector = ref(false);
+  const selected = computed<Record<string, TendbhaModel[]>>(() => ({
+    [ClusterTypes.TENDBHA]: props.selectedIds.map(
+      (id) =>
+        ({
+          id,
+          master_domain: domainIdMap[id],
+        }) as unknown as TendbhaModel,
+    ),
+  }));
+
+  let notFounds: string[];
+  const rules = [
+    {
+      validator: (value: string) => value.split(batchSplitRegex).every((item) => domainRegex.test(item)),
+      message: t('集群域名格式不正确'),
+      trigger: 'change',
+    },
+    {
+      validator: (value: string) => {
+        notFounds = [];
+        value.split(batchSplitRegex).forEach((item) => {
+          if (!domainIdMap[item]) {
+            notFounds.push(item);
+          }
+        });
+        return !notFounds.length;
+      },
+      message: () => t('目标集群xx不存在', [notFounds.join(',')]),
+      trigger: 'blur',
+    },
+  ];
+
+  const { run: queryCluster, loading } = useRequest(filterClusters, {
+    manual: true,
+    onSuccess: (data) => {
+      modelValue.value.cluster_ids = [];
+      if (data.length) {
+        Object.assign(domainIdMap, Object.fromEntries(data.map((cur) => [cur.master_domain, cur.id])));
+        modelValue.value.cluster_ids = data.map((item) => item.id);
+      }
+    },
+  });
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    queryCluster({
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      exact_domain: value.split(batchSplitRegex).join(','),
+    });
+  };
+
+  const handleSelectorChange = (selected: Record<string, TendbhaModel[]>) => {
+    const dataList = selected[ClusterTypes.TENDBHA];
+    Object.assign(domainIdMap, Object.fromEntries(dataList.map((cur) => [cur.master_domain, cur.id])));
+    emits('batch-edit', dataList);
+  };
+</script>
+<style lang="less" scoped>
+  .batch-host-select {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterMigrateTable.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterMigrateTable.vue
new file mode 100644
index 0000000000..d486356118
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterMigrateTable.vue
@@ -0,0 +1,168 @@
+<!--
+ * 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>
+  <EditableTable
+    ref="table"
+    class="mb-20"
+    :model="tableData">
+    <EditableTableRow
+      v-for="(item, index) in tableData"
+      :key="index">
+      <ClusterColumn
+        v-model="item.cluster"
+        :selected-ids="selectedClusterIds"
+        @batch-edit="handleBatchEdit" />
+      <SingleHost
+        v-model="item.newMaster"
+        field="newMaster.ip"
+        :label="t('新Master主机')"
+        :params="{ for_biz: currentBizId }" />
+      <SingleHost
+        v-model="item.newSlave"
+        field="newSlave.ip"
+        :label="t('新Slave主机')"
+        :params="{ for_biz: currentBizId }" />
+      <OperationColumn
+        v-model:table-data="tableData"
+        :create-row-method="createTableRow" />
+    </EditableTableRow>
+  </EditableTable>
+</template>
+<script lang="ts" setup>
+  import { useTemplateRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import TendbhaModel from '@services/model/mysql/tendbha';
+
+  import { useGlobalBizs } from '@stores';
+
+  import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
+
+  import SingleHost from '@views/db-manage/common/toolbox-field/host-column/SingleHost.vue';
+  import OperationColumn from '@views/db-manage/common/toolbox-field/operation-column/Index.vue';
+
+  import { MigrateTypes, type TicketInfo } from '../types';
+
+  import ClusterColumn from './ClusterColumn.vue';
+
+  interface RowData {
+    cluster: {
+      cluster_ids: number[];
+      cluster_domains: string;
+    };
+    newMaster: {
+      bk_biz_id: number;
+      bk_cloud_id: number;
+      bk_host_id: number;
+      ip: string;
+    };
+    newSlave: {
+      bk_biz_id: number;
+      bk_cloud_id: number;
+      bk_host_id: number;
+      ip: string;
+    };
+  }
+
+  interface Props {
+    data: RowData[];
+  }
+
+  interface Exposes {
+    getValue: () => Promise<TicketInfo[]>;
+  }
+
+  const props = defineProps<Props>();
+
+  const { t } = useI18n();
+  const tableRef = useTemplateRef('table');
+  const { currentBizId } = useGlobalBizs();
+
+  const createTableRow = (data = {} as Partial<RowData>) => ({
+    cluster: data.cluster || {
+      cluster_ids: [],
+      cluster_domains: '',
+    },
+    newMaster: data.newMaster || {
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+    },
+    newSlave: data.newSlave || {
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+    },
+  });
+
+  const tableData = ref<RowData[]>([createTableRow()]);
+
+  const selectedClusterIds = computed(() => tableData.value.flatMap((item) => item.cluster.cluster_ids));
+
+  watch(
+    () => props.data,
+    () => {
+      if (props.data.length) {
+        tableData.value = [...props.data];
+      } else {
+        tableData.value = [createTableRow()];
+      }
+    },
+  );
+
+  const handleBatchEdit = (list: TendbhaModel[]) => {
+    const dataList = list.reduce<RowData[]>((acc, item) => {
+      if (!selectedClusterIds.value.includes(item.id)) {
+        acc.push(
+          createTableRow({
+            cluster: {
+              cluster_ids: [item.id],
+              cluster_domains: item.master_domain,
+            },
+          }),
+        );
+      }
+      return acc;
+    }, []);
+    tableData.value = [...(selectedClusterIds.value.length ? tableData.value : []), ...dataList];
+  };
+
+  defineExpose<Exposes>({
+    async getValue() {
+      const validateResult = await tableRef.value?.validate();
+      if (!validateResult) {
+        return [];
+      }
+
+      return tableData.value.map(({ cluster, newMaster, newSlave }) => ({
+        cluster_ids: cluster.cluster_ids,
+        resource_spec: {
+          new_master: {
+            spec_id: 0,
+            hosts: [newMaster],
+          },
+          new_slave: {
+            spec_id: 0,
+            hosts: [newSlave],
+          },
+        },
+        display_info: {
+          type: MigrateTypes.CLUSTER_MIGRATE,
+        },
+      }));
+    },
+  });
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/HostColumnGroup.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/HostColumnGroup.vue
new file mode 100644
index 0000000000..5760d4b972
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/HostColumnGroup.vue
@@ -0,0 +1,237 @@
+<!--
+ * 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>
+  <Column
+    :append-rules="rules"
+    field="master.ip"
+    fixed="left"
+    :label="t('目标Master主机')"
+    :loading="loading"
+    :min-width="150"
+    required>
+    <template #headAppend>
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-host-select"
+        @click="handleShowSelector">
+        <DbIcon type="batch-host-select" />
+      </span>
+    </template>
+    <Input
+      v-model="modelValue.ip"
+      :placeholder="t('请输入IP')"
+      @change="handleInputChange" />
+  </Column>
+  <Column
+    :label="t('同机关联实例')"
+    :loading="loading"
+    :min-width="150">
+    <div
+      v-if="modelValue.related_instances.length"
+      class="related-clusters"
+      style="flex: 1">
+      <p
+        v-for="item in modelValue.related_instances"
+        :key="item">
+        {{ item }}
+      </p>
+    </div>
+    <Block
+      v-else
+      :placeholder="t('自动生成')" />
+  </Column>
+  <Column
+    :label="t('同机关联集群')"
+    :loading="loading"
+    :min-width="150">
+    <div
+      v-if="modelValue.related_clusters.length"
+      class="related-clusters"
+      style="flex: 1">
+      <p
+        v-for="item in modelValue.related_clusters"
+        :key="item">
+        {{ item }}
+      </p>
+    </div>
+    <Block
+      v-else
+      :placeholder="t('自动生成')" />
+  </Column>
+  <InstanceSelector
+    v-model:is-show="showSelector"
+    :cluster-types="[TENDBHA_HOST]"
+    :selected="selectedInstances"
+    :tab-list-config="tabListConfig"
+    @change="handleSelectorChange" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { checkInstance } from '@services/source/dbbase';
+
+  import { ClusterTypes } from '@common/const';
+  import { ipv4 } from '@common/regex';
+
+  import { Block, Column, Input } from '@components/editable-table/Index.vue';
+  import InstanceSelector, {
+    type InstanceSelectorValues,
+    type IValue,
+    type PanelListType,
+  } from '@components/instance-selector/Index.vue';
+
+  export type SelectorItem = IValue;
+
+  interface Props {
+    selected: {
+      ip: string;
+    }[];
+  }
+
+  interface Emits {
+    (e: 'batch-edit', list: IValue[]): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<{
+    bk_cloud_id?: number;
+    bk_host_id?: number;
+    ip: string;
+    port?: number;
+    cluster_ids: number[];
+    related_instances: string[];
+    related_clusters: string[];
+  }>({
+    default: () => ({
+      ip: '',
+      cluster_ids: [],
+      related_instances: [],
+      related_clusters: [],
+    }),
+  });
+
+  const { t } = useI18n();
+
+  const TENDBHA_HOST = 'TendbhaHost';
+  const tabListConfig = {
+    [TENDBHA_HOST]: [
+      {
+        id: [TENDBHA_HOST],
+        name: t('目标Proxy主机'),
+        tableConfig: {
+          firsrColumn: {
+            label: t('Proxy 主机'),
+            field: 'ip',
+            role: 'proxy',
+          },
+        },
+      },
+      {
+        id: 'manualInput',
+        name: t('手动输入'),
+        tableConfig: {
+          firsrColumn: {
+            label: t('Proxy 主机'),
+            field: 'ip',
+            role: 'proxy',
+          },
+        },
+      },
+    ],
+  } as Record<string, PanelListType>;
+
+  const rules = [
+    {
+      validator: (value: string) => ipv4.test(value),
+      message: t('IP 格式不符合IPv4标准'),
+      trigger: 'change',
+    },
+    {
+      validator: () => Boolean(modelValue.value.bk_host_id),
+      message: t('目标主机不存在'),
+      trigger: 'blur',
+    },
+  ];
+
+  const showSelector = ref(false);
+  const selectedInstances = computed(
+    () =>
+      ({
+        [ClusterTypes.TENDBHA]: props.selected,
+      }) as unknown as InstanceSelectorValues<IValue>,
+  );
+
+  const { run: queryInstance, loading } = useRequest(checkInstance, {
+    manual: true,
+    onSuccess: (data) => {
+      const [hostInfo] = data;
+      const clusterIds: number[] = [];
+      const relatedInstances: string[] = [];
+      const relatedClusters: string[] = [];
+      data.forEach((item) => {
+        clusterIds.push(item.cluster_id);
+        relatedInstances.push(item.instance_address);
+        relatedClusters.push(item.master_domain);
+      });
+      modelValue.value = {
+        bk_cloud_id: hostInfo.bk_cloud_id,
+        bk_host_id: hostInfo.bk_host_id,
+        ip: hostInfo.ip,
+        port: hostInfo.port,
+        cluster_ids: clusterIds,
+        related_instances: relatedInstances,
+        related_clusters: relatedClusters,
+      };
+    },
+  });
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    queryInstance({
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      instance_addresses: [value],
+    });
+  };
+
+  const handleSelectorChange = (selected: InstanceSelectorValues<IValue>) => {
+    emits('batch-edit', selected[TENDBHA_HOST]);
+  };
+</script>
+
+<style lang="less" scoped>
+  .batch-host-select {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+
+  .related-clusters {
+    padding: 10px 16px;
+    line-height: 20px;
+    background: #fff;
+
+    p {
+      width: 100%;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/HostMigrateTable.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/HostMigrateTable.vue
new file mode 100644
index 0000000000..1a5e24262c
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/HostMigrateTable.vue
@@ -0,0 +1,196 @@
+<!--
+ * 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>
+  <EditableTable
+    ref="table"
+    class="mb-20"
+    :model="tableData">
+    <EditableTableRow
+      v-for="(item, index) in tableData"
+      :key="index">
+      <HostColumnGroup
+        v-model="item.master"
+        :selected="selected"
+        @batch-edit="handleBatchEdit" />
+      <SingleHost
+        v-model="item.newMaster"
+        field="newMaster.ip"
+        :label="t('新Master主机')"
+        :min-width="150"
+        :params="{ for_biz: currentBizId }" />
+      <SingleHost
+        v-model="item.newSlave"
+        field="newSlave.ip"
+        :label="t('新Slave主机')"
+        :min-width="150"
+        :params="{ for_biz: currentBizId }" />
+      <OperationColumn
+        v-model:table-data="tableData"
+        :create-row-method="createTableRow" />
+    </EditableTableRow>
+  </EditableTable>
+</template>
+<script lang="ts" setup>
+  import { useTemplateRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import { useGlobalBizs } from '@stores';
+
+  import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
+
+  import SingleHost from '@views/db-manage/common/toolbox-field/host-column/SingleHost.vue';
+  import OperationColumn from '@views/db-manage/common/toolbox-field/operation-column/Index.vue';
+
+  import { MigrateTypes, type TicketInfo } from '../types';
+
+  import HostColumnGroup, { type SelectorItem } from './HostColumnGroup.vue';
+
+  interface RowData {
+    master: {
+      bk_cloud_id?: number;
+      bk_host_id?: number;
+      ip: string;
+      port?: number;
+      cluster_ids: number[];
+      related_instances: string[];
+      related_clusters: string[];
+    };
+    newMaster: {
+      bk_biz_id: number;
+      bk_cloud_id: number;
+      bk_host_id: number;
+      ip: string;
+    };
+    newSlave: {
+      bk_biz_id: number;
+      bk_cloud_id: number;
+      bk_host_id: number;
+      ip: string;
+    };
+  }
+
+  interface Props {
+    data: RowData[];
+  }
+
+  interface Exposes {
+    getValue: () => Promise<TicketInfo[]>;
+  }
+
+  const props = defineProps<Props>();
+
+  const { t } = useI18n();
+  const tableRef = useTemplateRef('table');
+  const { currentBizId } = useGlobalBizs();
+
+  const createTableRow = (data = {} as Partial<RowData>) => ({
+    master: data.master || {
+      bk_biz_id: 0,
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+      port: 0,
+      cluster_ids: [],
+      related_instances: [],
+      related_clusters: [],
+    },
+    newMaster: data.newMaster || {
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+    },
+    newSlave: data.newSlave || {
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+    },
+  });
+
+  const tableData = ref<RowData[]>([createTableRow()]);
+
+  const selected = computed(() => tableData.value.filter((item) => item.master.bk_host_id).map((item) => item.master));
+  const selectedMap = computed(() => Object.fromEntries(selected.value.map((cur) => [cur.ip, true])));
+
+  watch(
+    () => props.data,
+    () => {
+      if (props.data.length) {
+        tableData.value = [...props.data];
+      } else {
+        tableData.value = [createTableRow()];
+      }
+    },
+  );
+
+  const handleBatchEdit = (list: SelectorItem[]) => {
+    const dataList = list.reduce<RowData[]>((acc, item) => {
+      if (!selectedMap.value[item.ip]) {
+        const clusterIds: number[] = [];
+        const relatedClusters: string[] = [];
+        const relatedInstances: string[] = [];
+        const adminPort = item.related_instances[0].admin_port;
+        item.related_clusters.forEach((item) => {
+          clusterIds.push(item.id);
+          relatedClusters.push(item.immute_domain);
+        });
+        item.related_instances.forEach((item) => {
+          relatedInstances.push(item.instance);
+        });
+        acc.push(
+          createTableRow({
+            master: {
+              bk_cloud_id: item.bk_cloud_id,
+              bk_host_id: item.bk_host_id,
+              ip: item.ip,
+              port: adminPort,
+              cluster_ids: clusterIds,
+              related_instances: relatedInstances,
+              related_clusters: relatedClusters,
+            },
+          }),
+        );
+      }
+      return acc;
+    }, []);
+    tableData.value = [...(selected.value.length ? tableData.value : []), ...dataList];
+  };
+
+  defineExpose<Exposes>({
+    async getValue() {
+      const validateResult = await tableRef.value?.validate();
+      if (!validateResult) {
+        return [];
+      }
+
+      return tableData.value.map(({ master, newMaster, newSlave }) => ({
+        cluster_ids: master.cluster_ids,
+        resource_spec: {
+          new_master: {
+            spec_id: 0,
+            hosts: [newMaster],
+          },
+          new_slave: {
+            spec_id: 0,
+            hosts: [newSlave],
+          },
+        },
+        display_info: {
+          type: MigrateTypes.HOST_MIGRATE,
+        },
+      }));
+    },
+  });
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/types.ts b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/types.ts
new file mode 100644
index 0000000000..c2b18dae2d
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/types.ts
@@ -0,0 +1,27 @@
+/**
+ * CLUSTER_MIGRATE: 集群迁移
+ * HOST_MIGRATE: 整机迁移
+ */
+export enum MigrateTypes {
+  CLUSTER_MIGRATE = 'CLUSTER_MIGRATE',
+  HOST_MIGRATE = 'HOST_MIGRATE',
+}
+
+export interface TicketInfo {
+  cluster_ids: number[];
+  resource_spec: {
+    new_master: {
+      spec_id: 0;
+      hosts: {
+        bk_biz_id: number;
+        bk_cloud_id: number;
+        bk_host_id: number;
+        ip: string;
+      }[];
+    };
+    new_slave: TicketInfo['resource_spec']['new_master'];
+  };
+  display_info: {
+    type: MigrateTypes;
+  };
+}
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/HostTable.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/HostTable.vue
index f750efd3f2..ff0a0e7f90 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/HostTable.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/HostTable.vue
@@ -127,6 +127,8 @@
     () => {
       if (props.data.length) {
         tableData.value = [...props.data];
+      } else {
+        tableData.value = [createTableRow()];
       }
     },
   );
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/InstanceTable.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/InstanceTable.vue
index 83f7700aad..ab6c95a5f3 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/InstanceTable.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/InstanceTable.vue
@@ -127,6 +127,8 @@
     () => {
       if (props.data.length) {
         tableData.value = [...props.data];
+      } else {
+        tableData.value = [createTableRow()];
       }
     },
   );
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-table-column/TendbhaCluster.vue b/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-table-column/TendbhaCluster.vue
index cd8c1cf97b..a6027dac6e 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-table-column/TendbhaCluster.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-table-column/TendbhaCluster.vue
@@ -29,12 +29,10 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <div style="flex: 1">
-      <Input
-        v-model="modelValue.domain"
-        :placeholder="t('请输入集群域名')"
-        @change="handleInputChange" />
-    </div>
+    <Input
+      v-model="modelValue.domain"
+      :placeholder="t('请输入集群域名')"
+      @change="handleInputChange" />
   </Column>
   <ClusterSelector
     v-model:is-show="showSelector"