From 582750f87e037886967cb78d997ab30a71ca477b Mon Sep 17 00:00:00 2001
From: 3octaves <873551943@qq.com>
Date: Thu, 7 Nov 2024 18:41:49 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E6=96=B0=E5=A2=9Eredis?=
 =?UTF-8?q?=E8=BF=81=E7=A7=BB=E5=8D=95=E6=8D=AE=20#7784?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/common/const/ticketTypes.ts  |   2 +
 .../db-card-checkbox/CardCheckbox.vue         |   2 +-
 .../components/instance-selector/Index.vue    |   1 +
 .../manual-content-host/table/Index.vue       |   1 +
 .../common/manual-content/table/Index.vue     |   1 +
 .../components/mysql/useTopoData.ts           |   1 -
 .../components/redis-host/table/Index.vue     |  19 +-
 .../components/redis/table/Index.vue          |   6 +-
 .../components/redis/table/useTableData.ts    |   2 +-
 .../columns/spec-display/Panel.vue            |   6 +-
 .../generateCloneData/index.ts                |   4 +
 .../generateCloneData/redis/index.ts          |   2 +
 .../generateCloneData/redis/migrateCluster.ts |  49 ++
 .../generateCloneData/redis/migrateSingle.ts  |  76 +++
 dbm-ui/frontend/src/locales/zh-cn.json        |  22 +-
 .../services/model/redis/redis-instance.ts    |   4 +-
 .../services/model/ticket/details/redis.ts    | 102 ++++
 dbm-ui/frontend/src/services/source/redis.ts  |   7 +-
 .../src/views/db-manage/redis/common/const.ts |   9 +-
 .../redis/common/edit-field/HostName.vue      |   2 +-
 .../common/edit-field/RenderInstance.vue      | 162 ++++++
 .../redis/common/edit-field/VersionSelect.vue |   7 +-
 .../views/db-manage/redis/migrate/Index.vue   |  48 ++
 .../redis/migrate/pages/page1/Index.vue       | 175 +++++++
 .../components/cluseter-instance/Index.vue    | 472 ++++++++++++++++++
 .../RenderCurrentVersion.vue                  | 110 ++++
 .../components/cluseter-instance/Row.vue      | 194 +++++++
 .../common/RenderOldMasterSlaveHost.vue       | 228 +++++++++
 .../components/common/render-spec/Index.vue   | 189 +++++++
 .../common/render-spec/SpecPanel.vue          | 238 +++++++++
 .../master-slave-instance/Index.vue           | 395 +++++++++++++++
 .../components/master-slave-instance/Row.vue  | 223 +++++++++
 .../components/master-slave-machine/Index.vue | 423 ++++++++++++++++
 .../components/master-slave-machine/Row.vue   | 221 ++++++++
 .../redis/migrate/pages/page2/Index.vue       |  87 ++++
 .../src/views/db-manage/redis/routes.ts       |  10 +
 .../src/views/db-manage/redis/toolbox-menu.ts |   6 +
 .../tickets/common/components/TicketClone.vue |   2 +
 .../components/demand-factory/Index.vue       |   4 +
 .../demand-factory/redis/AddSlave copy.vue    |  63 +++
 .../redis/migrate/ClusterMigrate.vue          |  76 +++
 .../redis/migrate/SingleMigrate.vue           | 122 +++++
 42 files changed, 3754 insertions(+), 19 deletions(-)
 create mode 100644 dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/migrateCluster.ts
 create mode 100644 dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/migrateSingle.ts
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/common/edit-field/RenderInstance.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/migrate/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/cluseter-instance/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/cluseter-instance/RenderCurrentVersion.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/cluseter-instance/Row.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/common/RenderOldMasterSlaveHost.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/common/render-spec/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/common/render-spec/SpecPanel.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/master-slave-instance/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/master-slave-instance/Row.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/master-slave-machine/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/master-slave-machine/Row.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page2/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/AddSlave copy.vue
 create mode 100644 dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/migrate/ClusterMigrate.vue
 create mode 100644 dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/migrate/SingleMigrate.vue

diff --git a/dbm-ui/frontend/src/common/const/ticketTypes.ts b/dbm-ui/frontend/src/common/const/ticketTypes.ts
index bb9c81c0e5..aefaf92028 100644
--- a/dbm-ui/frontend/src/common/const/ticketTypes.ts
+++ b/dbm-ui/frontend/src/common/const/ticketTypes.ts
@@ -79,6 +79,8 @@ export enum TicketTypes {
   REDIS_INSTANCE_OPEN = 'REDIS_INSTANCE_OPEN', // redis 主从集群启用
   REDIS_INSTANCE_CLOSE = 'REDIS_INSTANCE_CLOSE', // redis 主从集群禁用
   REDIS_INSTANCE_DESTROY = 'REDIS_INSTANCE_DESTROY', // redis 主从集群删除
+  REDIS_CLUSTER_INS_MIGRATE = 'REDIS_CLUSTER_INS_MIGRATE',
+  REDIS_SINGLE_INS_MIGRATE = 'REDIS_SINGLE_INS_MIGRATE',
 }
 export enum TicketTypes {
   TENDBCLUSTER_APPLY = 'TENDBCLUSTER_APPLY',
diff --git a/dbm-ui/frontend/src/components/db-card-checkbox/CardCheckbox.vue b/dbm-ui/frontend/src/components/db-card-checkbox/CardCheckbox.vue
index 8e2e97d394..415a07f868 100644
--- a/dbm-ui/frontend/src/components/db-card-checkbox/CardCheckbox.vue
+++ b/dbm-ui/frontend/src/components/db-card-checkbox/CardCheckbox.vue
@@ -14,7 +14,7 @@
 <template>
   <div
     v-bk-tooltips="{
-      disabled: !disabled,
+      disabled: !disabled || !disabledTooltips,
       content: disabledTooltips,
     }"
     class="card-checkbox"
diff --git a/dbm-ui/frontend/src/components/instance-selector/Index.vue b/dbm-ui/frontend/src/components/instance-selector/Index.vue
index 2025de3ed5..74aa9bb6ec 100644
--- a/dbm-ui/frontend/src/components/instance-selector/Index.vue
+++ b/dbm-ui/frontend/src/components/instance-selector/Index.vue
@@ -148,6 +148,7 @@
     spec_id?: number;
     role: string;
     shard?: string;
+    version?: string;
   }
 
   export type InstanceSelectorValues<T> = Record<string, T[]>;
diff --git a/dbm-ui/frontend/src/components/instance-selector/components/common/manual-content-host/table/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/common/manual-content-host/table/Index.vue
index 07f1325edd..5b00a5be8f 100644
--- a/dbm-ui/frontend/src/components/instance-selector/components/common/manual-content-host/table/Index.vue
+++ b/dbm-ui/frontend/src/components/instance-selector/components/common/manual-content-host/table/Index.vue
@@ -102,6 +102,7 @@
     cluster_type: '',
     master_domain: data.related_clusters[0].immute_domain,
     bk_cloud_name: data.bk_cloud_name,
+    related_clusters: data.related_clusters || [],
     related_instances: (data.related_instances || []).map(instanceItem => ({
       instance: instanceItem.instance,
       status: instanceItem.status
diff --git a/dbm-ui/frontend/src/components/instance-selector/components/common/manual-content/table/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/common/manual-content/table/Index.vue
index 189c4211cf..4ebe67576e 100644
--- a/dbm-ui/frontend/src/components/instance-selector/components/common/manual-content/table/Index.vue
+++ b/dbm-ui/frontend/src/components/instance-selector/components/common/manual-content/table/Index.vue
@@ -86,6 +86,7 @@
     db_module_id: data.db_module_id,
     db_module_name: data.db_module_name,
     master_domain: data.master_domain,
+    spec_config: data.spec_config
   });
 
   const { t } = useI18n();
diff --git a/dbm-ui/frontend/src/components/instance-selector/components/mysql/useTopoData.ts b/dbm-ui/frontend/src/components/instance-selector/components/mysql/useTopoData.ts
index 2147aa23b3..e8cf1dbb44 100644
--- a/dbm-ui/frontend/src/components/instance-selector/components/mysql/useTopoData.ts
+++ b/dbm-ui/frontend/src/components/instance-selector/components/mysql/useTopoData.ts
@@ -66,7 +66,6 @@ export function useTopoData<T extends Record<string, any>>(filterClusterId: Comp
       .getTopoList(params)
       .then((data) => {
         const countFn = currentInstance.proxy?.countFunc;
-
         const formatData = data.map((item: T) => {
           let count = item.instance_count;
           if (role === 'slave') {
diff --git a/dbm-ui/frontend/src/components/instance-selector/components/redis-host/table/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/redis-host/table/Index.vue
index 1499b4698d..fd8afdd4f4 100644
--- a/dbm-ui/frontend/src/components/instance-selector/components/redis-host/table/Index.vue
+++ b/dbm-ui/frontend/src/components/instance-selector/components/redis-host/table/Index.vue
@@ -55,6 +55,7 @@
     type IValue,
     type PanelListType,
   } from '../../../Index.vue';
+  import RenderInstance from '../../common/render-instance/Index.vue';
   import SerachBar from '../../common/SearchBar.vue';
 
   import { useTableData } from './useTableData';
@@ -91,12 +92,17 @@
     cluster_id: data.related_clusters[0].id,
     port: 0,
     instance_address: '',
-    cluster_type: '',
+    cluster_type: data.cluster_type,
     master_domain: data.related_clusters[0].immute_domain,
     bk_cloud_name: data.bk_cloud_name,
+    related_clusters: data.related_clusters || [],
     related_instances: (data.related_instances || []).map(instanceItem => ({
       instance: instanceItem.instance,
-      status: instanceItem.status
+      status: instanceItem.status,
+      bk_cloud_id: instanceItem.bk_cloud_id,
+      bk_host_id: instanceItem.bk_host_id,
+      ip: instanceItem.ip,
+      port: instanceItem.port,
     })),
     spec_config: data.spec_config,
     db_module_id: data.db_module_id,
@@ -212,6 +218,13 @@
       label: props.firsrColumn?.label ? props.firsrColumn.label : t('实例'),
       field: props.firsrColumn?.field ? props.firsrColumn.field : 'instance_address',
     },
+    {
+      label: t('关联实例'),
+      field: 'related_instances',
+      showOverflowTooltip: true,
+      width: 200,
+      render: ({ data }: DataRow) => <RenderInstance data={data.related_instances || []}></RenderInstance>,
+    },
     {
       minWidth: 100,
       label: t('云区域'),
@@ -276,7 +289,7 @@
       field: item.field,
       disabled: firstColumnFieldId.value === item.field,
     })),
-    checked: [firstColumnFieldId.value, 'bk_cloud_id', 'role', 'status', 'cloud_area', 'alive', 'host_name', 'os_name'],
+    checked: [firstColumnFieldId.value, 'related_instances', 'bk_cloud_id', 'role', 'status', 'cloud_area', 'alive', 'host_name', 'os_name'],
   }))
 
 
diff --git a/dbm-ui/frontend/src/components/instance-selector/components/redis/table/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/redis/table/Index.vue
index fe08c10a7e..3f567cad14 100644
--- a/dbm-ui/frontend/src/components/instance-selector/components/redis/table/Index.vue
+++ b/dbm-ui/frontend/src/components/instance-selector/components/redis/table/Index.vue
@@ -105,7 +105,10 @@
     db_module_id: data.db_module_id,
     db_module_name: data.db_module_name,
     master_domain: data.master_domain,
-    role: data.role
+    role: data.role,
+    spec_config: data.spec_config,
+    related_clusters: data.related_clusters,
+    version: data?.version || '',
   });
 
   const { t } = useI18n();
@@ -224,6 +227,7 @@
       field: 'instance_role',
       showOverflowTooltip: true,
       filter: props.roleFilterList,
+      render: ({ data }: DataRow) => data.instance_role || '--'
     },
     {
       label: t('实例状态'),
diff --git a/dbm-ui/frontend/src/components/instance-selector/components/redis/table/useTableData.ts b/dbm-ui/frontend/src/components/instance-selector/components/redis/table/useTableData.ts
index e5ce4a8611..c9dcfc1565 100644
--- a/dbm-ui/frontend/src/components/instance-selector/components/redis/table/useTableData.ts
+++ b/dbm-ui/frontend/src/components/instance-selector/components/redis/table/useTableData.ts
@@ -80,7 +80,7 @@ export function useTableData<T>(
     }
     if (clusterId?.value && clusterId.value !== currentBizId) {
       Object.assign(params, {
-        cluster_ids: clusterId.value,
+        cluster_id: clusterId.value,
       });
     }
     return params;
diff --git a/dbm-ui/frontend/src/components/render-table/columns/spec-display/Panel.vue b/dbm-ui/frontend/src/components/render-table/columns/spec-display/Panel.vue
index ad0d01952a..61c65f5a33 100644
--- a/dbm-ui/frontend/src/components/render-table/columns/spec-display/Panel.vue
+++ b/dbm-ui/frontend/src/components/render-table/columns/spec-display/Panel.vue
@@ -14,7 +14,7 @@
 <template>
   <BkPopover
     height="0"
-    placement="bottom"
+    :placement="placement"
     :popover-delay="[100, 200]"
     theme="light"
     width="514">
@@ -86,6 +86,8 @@
   </BkPopover>
 </template>
 <script setup lang="ts">
+  import { Popover } from 'bkui-vue';
+  import type { ComponentProps } from 'vue-component-type-helpers';
   import { useI18n } from 'vue-i18n';
 
   export interface SpecInfo {
@@ -114,6 +116,7 @@
   interface Props {
     data?: SpecInfo;
     hideQps?: boolean;
+    placement?: ComponentProps<typeof Popover>['placement'];
   }
 
   withDefaults(defineProps<Props>(), {
@@ -142,6 +145,7 @@
       ],
     }),
     hideQps: false,
+    placement: 'bottom',
   });
 
   const { t } = useI18n();
diff --git a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/index.ts b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/index.ts
index f17e1bc98e..f73ac9fa1c 100644
--- a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/index.ts
+++ b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/index.ts
@@ -40,6 +40,8 @@ import {
   generateRedisDataCopyCloneData,
   generateRedisDataStructureCloneData,
   generateRedisMasterSlaveSwitchCloneData,
+  generateRedisMigrateClusterCloneData,
+  generateRedisMigrateSingleCloneData,
   generateRedisOperationCloneData,
   generateRedisProxyScaleDownCloneData,
   generateRedisProxyScaleUpCloneData,
@@ -91,6 +93,8 @@ export const generateCloneDataHandlerMap = {
   [TicketTypes.REDIS_KEYS_DELETE]: generateRedisOperationCloneData, // Redis 删除Key
   [TicketTypes.REDIS_BACKUP]: generateRedisOperationCloneData, // Redis 集群备份
   [TicketTypes.REDIS_PURGE]: generateRedisOperationCloneData,
+  [TicketTypes.REDIS_CLUSTER_INS_MIGRATE]: generateRedisMigrateClusterCloneData, // Redis 集群迁移
+  [TicketTypes.REDIS_SINGLE_INS_MIGRATE]: generateRedisMigrateSingleCloneData, // Redis 主从迁移
   [TicketTypes.MYSQL_AUTHORIZE_RULES]: generateMysqlAuthorizeRuleCloneData, // Mysql 集群授权
   [TicketTypes.MYSQL_IMPORT_SQLFILE]: generateMysqlImportSqlFileCloneData, // Mysql SQL变更执行
   [TicketTypes.MYSQL_CHECKSUM]: generateMysqlChecksumCloneData, // Mysql 数据校验
diff --git a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/index.ts b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/index.ts
index 08d2110cba..118e007e1a 100644
--- a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/index.ts
+++ b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/index.ts
@@ -7,6 +7,8 @@ export * from './dataCopy';
 export * from './dataCopyCheckRepair';
 export * from './dataStructure';
 export * from './masterSlaveSwitch';
+export * from './migrateCluster';
+export * from './migrateSingle';
 export * from './operation';
 export * from './proxyScaleDown';
 export * from './proxyScaleUp';
diff --git a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/migrateCluster.ts b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/migrateCluster.ts
new file mode 100644
index 0000000000..a90f2d3f6d
--- /dev/null
+++ b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/migrateCluster.ts
@@ -0,0 +1,49 @@
+/*
+ * 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 at https://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.
+ */
+import type { RedisClusterMigrate } from '@services/model/ticket/details/redis';
+import TicketModel from '@services/model/ticket/ticket';
+
+import { random } from '@utils';
+
+// Redis 集群迁移
+export async function generateRedisMigrateClusterCloneData(ticketData: TicketModel<RedisClusterMigrate>) {
+  const { infos, clusters, specs } = ticketData.details;
+  const tableDataList = infos.map((infoItem) => {
+    const clusterItem = clusters[infoItem.cluster_id];
+    const specItem = specs[infoItem.resource_spec.backend_group.spec_id];
+    return {
+      rowKey: random(),
+      isLoading: false,
+      spanData: {
+        isStart: false,
+        isGeneral: true,
+        rowSpan: 1,
+      },
+      clusterData: {
+        instance: infoItem.display_info.instance,
+        domain: clusterItem.immute_domain,
+        clusterId: clusterItem.id,
+        clusterType: clusterItem.cluster_type,
+        specId: specItem.id,
+        specName: specItem.name,
+      },
+      master: infoItem.old_nodes.master[0],
+      slave: infoItem.old_nodes.slave[0],
+    };
+  });
+
+  return {
+    tableDataList,
+    remark: ticketData.remark,
+  };
+}
diff --git a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/migrateSingle.ts b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/migrateSingle.ts
new file mode 100644
index 0000000000..b08d49163e
--- /dev/null
+++ b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/migrateSingle.ts
@@ -0,0 +1,76 @@
+/*
+ * 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 at https://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.
+ */
+import type { RedisSingleMigrate } from '@services/model/ticket/details/redis';
+import TicketModel from '@services/model/ticket/ticket';
+
+import { random } from '@utils';
+
+// Redis 主从迁移
+export async function generateRedisMigrateSingleCloneData(ticketData: TicketModel<RedisSingleMigrate>) {
+  const { infos, clusters } = ticketData.details;
+  const isDomain = infos[0].display_info.migrate_type === 'domain';
+  const mapKey = isDomain ? 'domain' : 'ip';
+
+  const rowMap = infos.reduce<Record<string, RedisSingleMigrate['infos']>>((prevMap, infoItem) => {
+    if (prevMap[infoItem.display_info[mapKey]]) {
+      return Object.assign({}, prevMap, {
+        [infoItem.display_info[mapKey]]: prevMap[infoItem.display_info[mapKey]].concat(infoItem),
+      });
+    }
+    return Object.assign({}, prevMap, {
+      [infoItem.display_info[mapKey]]: [infoItem],
+    });
+  }, {});
+  const tableDataList = Object.values(rowMap).map((infoList) => {
+    const rowItem = infoList[0];
+    const clusterItem = clusters[rowItem.cluster_id];
+    const relatedInstanceList = infoList.map((infoItem) => {
+      const masterItem = infoItem.old_nodes.master[0];
+      return {
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        bk_cloud_id: masterItem.bk_cloud_id,
+        bk_host_id: masterItem.bk_host_id,
+        ip: masterItem.ip,
+        port: masterItem.port,
+        instance: `${masterItem.ip}:${masterItem.port}`,
+      };
+    });
+
+    const clusterData = isDomain
+      ? {
+          domain: rowItem.display_info.domain,
+          cloudId: clusterItem.bk_cloud_id,
+          clusterType: clusterItem.cluster_type,
+          clusterId: rowItem.cluster_id,
+          relatedInstance: relatedInstanceList,
+        }
+      : {
+          ip: rowItem.display_info.ip,
+          cloudId: clusterItem.bk_cloud_id,
+          clusterType: clusterItem.cluster_type,
+          relatedInstance: relatedInstanceList,
+        };
+    return {
+      rowKey: random(),
+      isLoading: false,
+      clusterData,
+      targetSpecId: rowItem.resource_spec.backend_group.spec_id,
+      targetVersion: rowItem.db_version,
+    };
+  });
+  return {
+    tableDataList,
+    remark: ticketData.remark,
+    isDomain,
+  };
+}
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index 00a7ec1ffb..056e41bac2 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3657,6 +3657,26 @@
   "同主机关联的其他集群，勾选后一并添加": "同主机关联的其他集群，勾选后一并添加",
   "点击上传": "点击上传",
   "请选择本地 SQL 文件": "请选择本地 SQL 文件",
+  "迁移提交成功": "迁移提交成功",
+  "集群架构：将集群的部分实例迁移到新机器，迁移保持规格、版本不变；主从架构：主从实例成对迁移到新机器上，可选择部分实例迁移，也可整机所有实例一起迁移。": "集群架构：将集群的部分实例迁移到新机器，迁移保持规格、版本不变；主从架构：主从实例成对迁移到新机器上，可选择部分实例迁移，也可整机所有实例一起迁移。",
+  "迁移": "迁移",
+  "实例迁移": "实例迁移",
+  "如 TendisCache 等，迁移过程保持规格、版本不变": "如 TendisCache 等，迁移过程保持规格、版本不变",
+  "支持部分或整机所有实例成对迁移至新主机，版本规格可变": "支持部分或整机所有实例成对迁移至新主机，版本规格可变",
+  "主从架构": "主从架构",
+  "只迁移目标实例": "只迁移目标实例",
+  "主机关联的所有实例一并迁移": "主机关联的所有实例一并迁移",
+  "整机迁移": "整机迁移",
+  "目标 Master 实例": "目标 Master 实例",
+  "实例选择": "实例选择",
+  "目标 Master 主机": "目标 Master 主机",
+  "关联的实例": "关联的实例",
+  "关联的主从实例": "关联的主从实例",
+  "目标实例输入格式有误": "目标实例输入格式有误",
+  "目标实例重复": "目标实例重复",
+  "Master 实例": "Master 实例",
+  "请先选择主机": "请先选择主机",
+  "集群或实例状态异常，不可选择": "集群或实例状态异常，不可选择",
   "这行勿动！新增翻译请在上一行添加！": ""
-  
+
 }
diff --git a/dbm-ui/frontend/src/services/model/redis/redis-instance.ts b/dbm-ui/frontend/src/services/model/redis/redis-instance.ts
index ab8f3082b8..b009e72ca1 100644
--- a/dbm-ui/frontend/src/services/model/redis/redis-instance.ts
+++ b/dbm-ui/frontend/src/services/model/redis/redis-instance.ts
@@ -38,7 +38,7 @@ export default class RedisInstance {
   related_clusters: InstanceRelatedCluster[];
   role: string;
   slave_domain: string;
-  spce_config: InstanceListSpecConfig;
+  spec_config: InstanceListSpecConfig;
   status: ClusterInstStatus;
   version: string;
 
@@ -61,7 +61,7 @@ export default class RedisInstance {
     this.related_clusters = payload.related_clusters || [];
     this.role = payload.role || '';
     this.slave_domain = payload.slave_domain || '';
-    this.spce_config = payload.spce_config || {};
+    this.spec_config = payload.spec_config || {};
     this.status = payload.status || '';
     this.version = payload.version || '';
   }
diff --git a/dbm-ui/frontend/src/services/model/ticket/details/redis.ts b/dbm-ui/frontend/src/services/model/ticket/details/redis.ts
index 0a5d736f04..d7e46f305d 100644
--- a/dbm-ui/frontend/src/services/model/ticket/details/redis.ts
+++ b/dbm-ui/frontend/src/services/model/ticket/details/redis.ts
@@ -415,3 +415,105 @@ export interface RedisVersionUpgrade extends DetailBase {
     target_version: string;
   }[];
 }
+
+// redis 迁移
+export interface RedisMigrate extends DetailBase {
+  clusters: DetailClusters;
+  infos: {
+    cluster_id: number;
+    resource_spec: {
+      backend_group: {
+        spec_id: number;
+        count: number;
+      };
+    };
+    old_nodes: {
+      master: {
+        bk_host_id: number;
+        ip: string;
+        port: number;
+        bk_cloud_id: number;
+        bk_biz_id: number;
+      }[];
+      slave: {
+        bk_host_id: number;
+        ip: string;
+        port: number;
+        bk_cloud_id: number;
+        bk_biz_id: number;
+      }[];
+    };
+  }[];
+}
+
+// redis 集群迁移
+export interface RedisClusterMigrate extends DetailBase {
+  clusters: DetailClusters;
+  specs: DetailSpecs;
+  infos: {
+    cluster_id: number;
+    resource_spec: {
+      backend_group: {
+        spec_id: number;
+        count: number;
+      };
+    };
+    old_nodes: {
+      master: {
+        bk_host_id: number;
+        ip: string;
+        port: number;
+        bk_cloud_id: number;
+        bk_biz_id: number;
+      }[];
+      slave: {
+        bk_host_id: number;
+        ip: string;
+        port: number;
+        bk_cloud_id: number;
+        bk_biz_id: number;
+      }[];
+    };
+    display_info: {
+      instance: string;
+      db_version: string[];
+    };
+  }[];
+}
+
+// redis 主从迁移
+export interface RedisSingleMigrate extends DetailBase {
+  clusters: DetailClusters;
+  specs: DetailSpecs;
+  infos: {
+    cluster_id: number;
+    resource_spec: {
+      backend_group: {
+        spec_id: number;
+        count: number;
+      };
+    };
+    db_version: string;
+    old_nodes: {
+      master: {
+        bk_host_id: number;
+        ip: string;
+        port: number;
+        bk_cloud_id: number;
+        bk_biz_id: number;
+      }[];
+      slave: {
+        bk_host_id: number;
+        ip: string;
+        port: number;
+        bk_cloud_id: number;
+        bk_biz_id: number;
+      }[];
+    };
+    display_info: {
+      migrate_type: string; // domain | machine
+      ip: string;
+      domain: string;
+    };
+  }[];
+}
diff --git a/dbm-ui/frontend/src/services/source/redis.ts b/dbm-ui/frontend/src/services/source/redis.ts
index e4a93d888c..cfab5da239 100644
--- a/dbm-ui/frontend/src/services/source/redis.ts
+++ b/dbm-ui/frontend/src/services/source/redis.ts
@@ -170,7 +170,12 @@ export function exportRedisInstanceToExcel(params: { bk_host_ids?: number[] }) {
 }
 
 // 获取集群列表
-export const getRedisClusterList = async (params: { bk_biz_id: number; domain?: string; region?: string }) =>
+export const getRedisClusterList = async (params: {
+  bk_biz_id: number;
+  domain?: string;
+  region?: string;
+  cluster_type?: string;
+}) =>
   http
     .get<ListBase<RedisModel[]>>(`/apis/redis/bizs/${params.bk_biz_id}/redis_resources/`, params)
     .then((data) => data.results.map((item) => new RedisModel(item)));
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/common/const.ts b/dbm-ui/frontend/src/views/db-manage/redis/common/const.ts
index 05f4bc9c25..91600e1fa9 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/common/const.ts
+++ b/dbm-ui/frontend/src/views/db-manage/redis/common/const.ts
@@ -108,10 +108,11 @@ export const repairAndVerifyTypeList = [
 ];
 
 export const QueryKeyMap: Record<string, string> = {
-  TwemproxyRedisInstance: 'redis',
-  TwemproxyTendisSSDInstance: 'tendisssd',
-  PredixyTendisplusCluster: 'tendisplus',
-  PredixyRedisCluster: 'redis',
+  [ClusterTypes.TWEMPROXY_TENDIS_SSD_INSTANCE]: 'redis',
+  [ClusterTypes.TWEMPROXY_REDIS_INSTANCE]: 'tendisssd',
+  [ClusterTypes.PREDIXY_TENDISPLUS_CLUSTER]: 'tendisplus',
+  [ClusterTypes.PREDIXY_REDIS_CLUSTER]: 'redis',
+  [ClusterTypes.REDIS_INSTANCE]: 'redis',
 };
 
 // redis 规格有关的集群与机器类型映射，主要处理 RedisCluster 和 Redis主从 合入  TendisCache后端存储的情况
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/common/edit-field/HostName.vue b/dbm-ui/frontend/src/views/db-manage/redis/common/edit-field/HostName.vue
index 75562d5a85..e91f22a2af 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/common/edit-field/HostName.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/common/edit-field/HostName.vue
@@ -16,7 +16,7 @@
     <TableEditInput
       ref="editRef"
       v-model="localValue"
-      :placeholder="t('请输入IP（单个）')"
+      :placeholder="t('请输入或从表头批量选择')"
       :rules="rules"
       @focus="handleFocus" />
     <!-- <BkPopover
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/common/edit-field/RenderInstance.vue b/dbm-ui/frontend/src/views/db-manage/redis/common/edit-field/RenderInstance.vue
new file mode 100644
index 0000000000..ce4a3b67e9
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/common/edit-field/RenderInstance.vue
@@ -0,0 +1,162 @@
+<!--
+ * 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="localValue"
+    :placeholder="t('请输入或从表头批量选择')"
+    :rules="rules"
+    @focus="handleFocus"
+    @input="(value: string | number) => handleInputChange(value as string)" />
+</template>
+
+<script lang="ts">
+  const instanceMemo: { [key: string]: Record<string, boolean> } = {};
+</script>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import { getRedisInstances } from '@services/source/redis';
+
+  import { ipPort } from '@common/regex';
+
+  import TableEditInput from '@components/render-table/columns/input/index.vue';
+
+  import { random } from '@utils';
+
+  interface IHostInfo {
+    bk_biz_id: number;
+    bk_cloud_id: number;
+    bk_host_id: number;
+    ip: string;
+    port: number;
+  }
+
+  interface Props {
+    data?: string;
+  }
+
+  interface Emits {
+    (e: 'inputFinish', value: string): void;
+  }
+
+  interface Exposes {
+    getValue: (isSubmit?: boolean) => Promise<IHostInfo>;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    data: '',
+    inputed: () => [],
+  });
+  const emits = defineEmits<Emits>();
+
+  const instanceKey = `render_cluster_${random()}`;
+  instanceMemo[instanceKey] = {};
+
+  const { t } = useI18n();
+
+  const localValue = ref();
+  const editRef = ref();
+
+  let isSkipInputFinish = false;
+
+  const rules = [
+    {
+      validator: (value: string) => Boolean(value),
+      message: t('目标实例不能为空'),
+    },
+    {
+      validator: (value: string) => ipPort.test(value),
+      message: t('目标实例输入格式有误'),
+    },
+    {
+      validator: async (value: string) => {
+        const listResult = await getRedisInstances({ instance_address: value });
+        if (listResult.results.length && !isSkipInputFinish) {
+          emits('inputFinish', value);
+        }
+        return listResult.results.length > 0;
+      },
+      message: t('目标实例不存在'),
+    },
+    {
+      validator: (value: string) => {
+        const currentClusterSelectMap = instanceMemo[instanceKey];
+        const otherClusterMemoMap = { ...instanceMemo };
+        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('目标实例重复'),
+    },
+  ];
+
+  watchEffect(() => {
+    localValue.value = props.data;
+  });
+
+  watch(
+    localValue,
+    () => {
+      if (!localValue.value) {
+        return;
+      }
+      instanceMemo[instanceKey] = {};
+      instanceMemo[instanceKey][localValue.value] = true;
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  const handleInputChange = (value: string) => {
+    if (value === '') {
+      instanceMemo[instanceKey] = {};
+    }
+  };
+
+  const handleFocus = () => {
+    isSkipInputFinish = false;
+  };
+
+  onBeforeUnmount(() => {
+    delete instanceMemo[instanceKey];
+  });
+
+  defineExpose<Exposes>({
+    getValue(isSubmit = false) {
+      isSkipInputFinish = isSubmit;
+      return editRef.value
+        .getValue()
+        .then(() => localValue.value)
+        .catch(() =>
+          Promise.reject({
+            module: localValue.value,
+          }),
+        );
+    },
+  });
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/common/edit-field/VersionSelect.vue b/dbm-ui/frontend/src/views/db-manage/redis/common/edit-field/VersionSelect.vue
index 8aa71a8c3f..8f3557f7d8 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/common/edit-field/VersionSelect.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/common/edit-field/VersionSelect.vue
@@ -96,7 +96,7 @@
     manual: true,
     onSuccess(listResult) {
       if (!props.data) {
-        [[localValue.value]] = listResult;
+        [localValue.value] = listResult;
       }
       selectList.value = listResult.map((value) => ({
         value,
@@ -132,7 +132,10 @@
 
   defineExpose<Exposes>({
     getValue() {
-      return selectRef.value.getValue().then(() => localValue.value);
+      return selectRef.value
+        .getValue()
+        .then(() => localValue.value)
+        .catch(() => Promise.reject(localValue.value));
     },
   });
 </script>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/migrate/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/migrate/Index.vue
new file mode 100644
index 0000000000..8ab1811d22
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/migrate/Index.vue
@@ -0,0 +1,48 @@
+<!--
+ * 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>
+  <Component :is="component" />
+</template>
+<script setup lang="ts">
+  import { useRoute } from 'vue-router';
+
+  import Page1 from './pages/page1/Index.vue';
+  import Page2 from './pages/page2/Index.vue';
+
+  const route = useRoute();
+
+  const comMap = {
+    ticket: Page1,
+    success: Page2,
+  };
+
+  const page = ref('');
+
+  const component = computed(() => {
+    if (comMap[page.value as keyof typeof comMap]) {
+      return comMap[page.value as keyof typeof comMap];
+    }
+    return Page1;
+  });
+
+  watch(
+    route,
+    () => {
+      page.value = route.params.page as string;
+    },
+    {
+      immediate: true,
+    },
+  );
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/Index.vue
new file mode 100644
index 0000000000..d0017aab03
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/Index.vue
@@ -0,0 +1,175 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <div class="redis-migrate">
+    <BkAlert
+      closable
+      theme="info"
+      :title="
+        t(
+          '集群架构：将集群的部分实例迁移到新机器，迁移保持规格、版本不变；主从架构：主从实例成对迁移到新机器上，可选择部分实例迁移，也可整机所有实例一起迁移。',
+        )
+      " />
+    <DbForm
+      class="toolbox-form mt-16 mb-24"
+      form-type="vertical"
+      :model="formData">
+      <BkFormItem
+        :label="t('升级类型')"
+        property="updateType"
+        required>
+        <CardCheckbox
+          v-model="formData.architectureType"
+          :desc="t('如 TendisCache 等，迁移过程保持规格、版本不变')"
+          icon="cluster"
+          :title="t('集群架构')"
+          true-value="cluster" />
+        <CardCheckbox
+          v-model="formData.architectureType"
+          class="ml-8"
+          :desc="t('支持部分或整机所有实例成对迁移至新主机，版本规格可变')"
+          :disabled-tooltips="t('单节点仅支持原地升级')"
+          icon="gaokeyong"
+          :title="t('主从架构')"
+          true-value="masterSlave" />
+      </BkFormItem>
+      <BkFormItem
+        :label="t('迁移类型')"
+        property="updateType"
+        required>
+        <CardCheckbox
+          v-model="formData.migrateType"
+          :desc="t('只迁移目标实例')"
+          icon="fill-1"
+          :title="t('实例迁移')"
+          true-value="instance" />
+        <CardCheckbox
+          v-model="formData.migrateType"
+          class="ml-8"
+          :desc="t('主机关联的所有实例一并迁移')"
+          :disabled="formData.architectureType === 'cluster'"
+          icon="host"
+          :title="t('整机迁移')"
+          true-value="machine" />
+      </BkFormItem>
+    </DbForm>
+    <Component
+      :is="currentTable"
+      :remark="remark"
+      :table-list="tableList" />
+  </div>
+</template>
+
+<script setup lang="tsx">
+  import { BkFormItem } from 'bkui-vue/lib/form';
+  import { useI18n } from 'vue-i18n';
+
+  import { useTicketCloneInfo } from '@hooks';
+
+  import { TicketTypes } from '@common/const';
+
+  import CardCheckbox from '@components/db-card-checkbox/CardCheckbox.vue';
+
+  import RenderClusterInstance from './components/cluseter-instance/Index.vue';
+  import type { IDataRow as ClusterInstanceRow } from './components/cluseter-instance/Row.vue';
+  import RenderMasterInstance from './components/master-slave-instance/Index.vue';
+  import type { IDataRow as MasterSlaveInstanceRow } from './components/master-slave-instance/Row.vue';
+  import RenderMasterSlaveHost from './components/master-slave-machine/Index.vue';
+  import type { IDataRow as MasterSlaveMachineRow } from './components/master-slave-machine/Row.vue';
+
+  const { t } = useI18n();
+
+  // 单据克隆
+  useTicketCloneInfo({
+    type: TicketTypes.REDIS_CLUSTER_INS_MIGRATE,
+    onSuccess(cloneData) {
+      tableList.value = cloneData.tableDataList;
+      remark.value = cloneData.remark;
+      window.changeConfirm = true;
+    },
+  });
+
+  // 单据克隆
+  useTicketCloneInfo({
+    type: TicketTypes.REDIS_SINGLE_INS_MIGRATE,
+    onSuccess(cloneData) {
+      formData.architectureType = 'masterSlave';
+
+      nextTick(() => {
+        if (!cloneData.isDomain) {
+          formData.migrateType = 'machine';
+        }
+      });
+      setTimeout(() => {
+        tableList.value = cloneData.tableDataList;
+        remark.value = cloneData.remark;
+        window.changeConfirm = true;
+      });
+    },
+  });
+
+  const initFormData = () => ({
+    architectureType: 'cluster', // cluster | masterSlave
+    migrateType: 'instance', // instance | machine
+  });
+
+  const remark = ref('');
+
+  const tableList = shallowRef<ClusterInstanceRow[] | MasterSlaveInstanceRow[] | MasterSlaveMachineRow[]>([]);
+
+  const formData = reactive(initFormData());
+
+  const renderKey = computed(() => `${formData.architectureType}-${formData.migrateType}`);
+
+  const currentTable = computed(() => {
+    const [architectureType, migrateType] = renderKey.value.split('-');
+    if (architectureType === 'cluster') {
+      return RenderClusterInstance;
+    }
+
+    if (migrateType === 'instance') {
+      return RenderMasterInstance;
+    }
+
+    return RenderMasterSlaveHost;
+  });
+
+  watch(
+    () => formData.architectureType,
+    () => {
+      formData.migrateType = 'instance';
+    },
+  );
+
+  watch(renderKey, () => {
+    tableList.value = [];
+    remark.value = '';
+  });
+</script>
+
+<style lang="less" scoped>
+  .redis-migrate {
+    padding-bottom: 20px;
+
+    .card-checkbox {
+      width: 400px;
+    }
+
+    .page-action-box {
+      display: flex;
+      align-items: center;
+      margin-top: 16px;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/cluseter-instance/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/cluseter-instance/Index.vue
new file mode 100644
index 0000000000..9fe95e5583
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/cluseter-instance/Index.vue
@@ -0,0 +1,472 @@
+<!--
+ * 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>
+  <SmartAction>
+    <div class="mb-24">
+      <RenderTable>
+        <template #default>
+          <RenderTableHeadColumn
+            fixed="left"
+            :width="200">
+            <span>{{ t('目标 Master 实例') }}</span>
+            <template #append>
+              <BatchOperateIcon
+                class="ml-4"
+                @click="handleShowMasterBatchSelector" />
+            </template>
+          </RenderTableHeadColumn>
+          <RenderTableHeadColumn
+            :required="false"
+            :width="220">
+            <span>{{ t('所属集群') }}</span>
+          </RenderTableHeadColumn>
+          <RenderTableHeadColumn
+            :required="false"
+            :width="220">
+            <span>{{ t('规格') }}</span>
+          </RenderTableHeadColumn>
+          <RenderTableHeadColumn
+            :required="false"
+            :width="220">
+            <span>{{ t('版本') }}</span>
+          </RenderTableHeadColumn>
+          <RenderTableHeadColumn
+            fixed="right"
+            :required="false"
+            :width="100">
+            {{ t('操作') }}
+          </RenderTableHeadColumn>
+        </template>
+        <template #data>
+          <RenderDataRow
+            v-for="(item, index) in tableData"
+            :key="item.rowKey"
+            ref="rowRefs"
+            :data="item"
+            :removeable="tableData.length < 2"
+            @add="(payload) => handleAppend(index, payload)"
+            @clone="(payload) => handleClone(index, payload)"
+            @input-finish="(value) => handleChangeCluster(index, value)"
+            @remove="handleRemove(index)" />
+        </template>
+      </RenderTable>
+      <TicketRemark v-model="localRemark" />
+      <InstanceSelector
+        v-model:is-show="isShowInstaceSelector"
+        :cluster-types="[ClusterTypes.REDIS]"
+        :selected="selected"
+        :tab-list-config="tabListConfig"
+        @change="handleInstanceSelectChange" />
+    </div>
+    <template #action>
+      <BkButton
+        class="w-88"
+        :loading="isSubmitting"
+        theme="primary"
+        @click="handleSubmit">
+        {{ t('提交') }}
+      </BkButton>
+      <DbPopconfirm
+        :confirm-handler="handleReset"
+        :content="t('重置将会清空当前填写的所有内容_请谨慎操作')"
+        :title="t('确认重置页面')">
+        <BkButton
+          class="ml8 w-88"
+          :disabled="isSubmitting">
+          {{ t('重置') }}
+        </BkButton>
+      </DbPopconfirm>
+    </template>
+  </SmartAction>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import RedisModel from '@services/model/redis/redis';
+  import RedisInstanceModel from '@services/model/redis/redis-instance';
+  import { getRedisClusterList, getRedisInstances } from '@services/source/redis';
+  import { queryMachineInstancePair } from '@services/source/redisToolbox';
+  import { createTicket } from '@services/source/ticket';
+
+  import { ClusterTypes, TicketTypes } from '@common/const';
+
+  import ManualInputHostContent from '@components/instance-selector/components/common/manual-content/Index.vue';
+  import InstanceSelector, {
+    type InstanceSelectorValues,
+    type PanelListType,
+  } from '@components/instance-selector/Index.vue';
+  import RenderTableHeadColumn from '@components/render-table/HeadColumn.vue';
+  import RenderTable from '@components/render-table/Index.vue';
+  import TicketRemark from '@components/ticket-remark/Index.vue';
+
+  import BatchOperateIcon from '@views/db-manage/common/batch-operate-icon/Index.vue';
+
+  import { random } from '@utils';
+
+  import RenderDataRow, { createRowData, type IDataRow, type IHostData } from './Row.vue';
+
+  interface Props {
+    tableList: IDataRow[];
+    remark: string;
+  }
+
+  const props = defineProps<Props>();
+
+  const router = useRouter();
+  const { t } = useI18n();
+
+  const tableData = ref([createRowData()]);
+  const isShowInstaceSelector = ref(false);
+  const rowRefs = ref();
+  const isSubmitting = ref(false);
+  const localRemark = ref('');
+
+  const selected = shallowRef({ [ClusterTypes.REDIS]: [] } as InstanceSelectorValues<RedisInstanceModel>);
+
+  const selectedClusters = shallowRef<{ [key: string]: RedisInstanceModel[] }>({ [ClusterTypes.REDIS]: [] });
+
+  const tabListConfig = computed(
+    () =>
+      ({
+        [ClusterTypes.REDIS]: [
+          {
+            name: t('实例选择'),
+            topoConfig: {
+              getTopoList: (params: ServiceParameters<typeof getRedisClusterList>) =>
+                getRedisClusterList({
+                  cluster_type: [
+                    ClusterTypes.TWEMPROXY_REDIS_INSTANCE,
+                    ClusterTypes.PREDIXY_TENDISPLUS_CLUSTER,
+                    ClusterTypes.TWEMPROXY_TENDIS_SSD_INSTANCE,
+                    ClusterTypes.PREDIXY_REDIS_CLUSTER,
+                  ].join(','),
+                  ...params,
+                }),
+              countFunc: (data: RedisModel) => data.redis_master.length,
+              totalCountFunc: (dataList: RedisModel[]) =>
+                dataList.reduce<number>((prevCount, item) => prevCount + item.redis_master.length, 0),
+            },
+            tableConfig: {
+              getTableList: (params: ServiceParameters<typeof getRedisInstances>) =>
+                getRedisInstances({
+                  cluster_type: [
+                    ClusterTypes.TWEMPROXY_REDIS_INSTANCE,
+                    ClusterTypes.PREDIXY_TENDISPLUS_CLUSTER,
+                    ClusterTypes.TWEMPROXY_TENDIS_SSD_INSTANCE,
+                    ClusterTypes.PREDIXY_REDIS_CLUSTER,
+                  ].join(','),
+                  role: 'redis_master',
+                  ...params,
+                }),
+              multiple: true,
+              firsrColumn: {
+                label: t('Master 实例'),
+                field: 'instance_address',
+                role: '',
+              },
+              columnsChecked: ['instance_address', 'cloud_area', 'status', 'host_name', 'os_name'],
+            },
+            previewConfig: {
+              displayKey: 'instance_address',
+            },
+          },
+          {
+            manualConfig: {
+              checkType: 'instance',
+              checkKey: 'instance_address',
+              activePanelId: 'redis',
+              fieldFormat: {
+                role: {
+                  master: 'redis_master',
+                },
+              },
+            },
+            tableConfig: {
+              getTableList: (params: ServiceParameters<typeof getRedisInstances>) =>
+                getRedisInstances({
+                  cluster_type: [
+                    ClusterTypes.TWEMPROXY_REDIS_INSTANCE,
+                    ClusterTypes.PREDIXY_TENDISPLUS_CLUSTER,
+                    ClusterTypes.TWEMPROXY_TENDIS_SSD_INSTANCE,
+                    ClusterTypes.PREDIXY_REDIS_CLUSTER,
+                  ].join(','),
+                  ...params,
+                }),
+              firsrColumn: {
+                label: t('Master 实例'),
+                field: 'instance_address',
+                role: 'redis_master',
+              },
+              multiple: true,
+            },
+            previewConfig: {
+              displayKey: 'instance_address',
+            },
+            content: ManualInputHostContent,
+          },
+        ],
+      }) as unknown as Record<ClusterTypes, PanelListType>,
+  );
+
+  watch(
+    () => props.tableList,
+    () => {
+      nextTick(() => {
+        tableData.value = props.tableList.length > 0 ? props.tableList : [createRowData()];
+        sortTableByCluster();
+      });
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  watchEffect(() => {
+    localRemark.value = props.remark;
+  });
+
+  // 集群实例是否已存在表格的映射表
+  let instanceMemo: Record<string, boolean> = {};
+
+  const handleShowMasterBatchSelector = () => {
+    isShowInstaceSelector.value = true;
+  };
+
+  // 追加一个集群
+  const handleAppend = (index: number, appendList: Array<IDataRow>) => {
+    tableData.value.splice(index + 1, 0, ...appendList);
+    sortTableByCluster();
+  };
+
+  // 删除一个集群
+  const handleRemove = (index: number) => {
+    const removeItem = tableData.value[index];
+    if (removeItem.clusterData) {
+      const { domain } = removeItem.clusterData;
+      delete instanceMemo[domain];
+      const clustersArr = selectedClusters.value[ClusterTypes.REDIS];
+      selectedClusters.value[ClusterTypes.REDIS] = clustersArr.filter((item) => item.master_domain !== domain);
+    }
+    tableData.value.splice(index, 1);
+    sortTableByCluster();
+  };
+
+  // 复制行数据
+  const handleClone = (index: number, sourceData: IDataRow) => {
+    tableData.value.splice(index + 1, 0, sourceData);
+    sortTableByCluster();
+    setTimeout(() => {
+      rowRefs.value[rowRefs.value.length - 1].getValue();
+    });
+  };
+
+  // 表格排序，方便合并集群显示
+  const sortTableByCluster = () => {
+    const clusterMap = {} as Record<string, IDataRow[]>;
+    const emptyRows: IDataRow[] = [];
+    tableData.value.forEach((item) => {
+      if (item.clusterData) {
+        const { domain } = item.clusterData;
+        if (clusterMap[domain]) {
+          clusterMap[domain].push(item);
+        } else {
+          clusterMap[domain] = [item];
+        }
+      } else {
+        emptyRows.push(item);
+      }
+    });
+
+    const spanRows = Object.values(clusterMap).flatMap((sameArr) => {
+      const isGeneral = sameArr.length <= 1;
+      return sameArr.map<IDataRow>((item, index) => ({
+        ...item,
+        spanData: {
+          isStart: index === 0,
+          rowSpan: index === 0 ? sameArr.length : 1,
+          isGeneral,
+        },
+      }));
+    });
+    tableData.value = [...spanRows, ...emptyRows];
+  };
+
+  const generateTableRow = (item: RedisInstanceModel, master?: IHostData, slave?: IHostData) => ({
+    rowKey: random(),
+    isLoading: false,
+    spanData: {
+      isStart: false,
+      isGeneral: true,
+      rowSpan: 1,
+    },
+    clusterData: {
+      instance: item.instance_address,
+      domain: item.master_domain,
+      clusterId: item.cluster_id,
+      clusterType: item.cluster_type,
+      specId: item.spec_config.id,
+      specName: item.spec_config.name,
+    },
+    master,
+    slave,
+  });
+
+  // 批量选择
+  const handleInstanceSelectChange = async (data: InstanceSelectorValues<RedisInstanceModel>) => {
+    selected.value = data;
+    const newList: IDataRow[] = [];
+
+    const slaveInstanceMap = await queryMachineInstancePair({
+      instances: data[ClusterTypes.REDIS].map((item) => item.instance_address),
+    });
+
+    if (slaveInstanceMap && slaveInstanceMap.instances) {
+      const masterInstanceMap = data[ClusterTypes.REDIS].reduce<
+        Record<
+          string,
+          {
+            master: IHostData;
+            slave: IHostData;
+          }
+        >
+      >(
+        (prevMap, instanceItem) =>
+          Object.assign({}, prevMap, {
+            [instanceItem.instance_address]: {
+              master: {
+                bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+                bk_cloud_id: instanceItem.bk_cloud_id,
+                bk_host_id: instanceItem.bk_host_id,
+                ip: instanceItem.ip,
+                port: instanceItem.port,
+              },
+            },
+          }),
+        {},
+      );
+      Object.keys(masterInstanceMap).forEach((masterInstance) => {
+        const slaveItem = slaveInstanceMap.instances![masterInstance];
+        masterInstanceMap[masterInstance].slave = {
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          bk_cloud_id: slaveItem.bk_cloud_id,
+          bk_host_id: slaveItem.bk_host_id,
+          ip: slaveItem.ip,
+          port: slaveItem.port,
+        };
+      });
+
+      data[ClusterTypes.REDIS].forEach((item) => {
+        const { instance_address: instance } = item;
+        if (!instanceMemo[instance]) {
+          const masterSlave = masterInstanceMap[item.instance_address];
+          newList.push(generateTableRow(item, masterSlave.master, masterSlave.slave));
+          instanceMemo[instance] = true;
+        }
+      });
+      if (checkListEmpty(tableData.value)) {
+        tableData.value = newList;
+      } else {
+        tableData.value = [...tableData.value, ...newList];
+      }
+      sortTableByCluster();
+      window.changeConfirm = true;
+    }
+  };
+
+  // 输入集群后查询集群信息并填充到table
+  const handleChangeCluster = async (index: number, value: string) => {
+    tableData.value[index].isLoading = true;
+    const result = await getRedisInstances({ instance_address: value }).finally(() => {
+      tableData.value[index].isLoading = false;
+    });
+    if (result.results.length > 0) {
+      const item = result.results[0];
+      const row = generateTableRow(item);
+      const newInstanceMap = await queryMachineInstancePair({
+        instances: [value],
+      });
+
+      if (newInstanceMap && newInstanceMap.instances) {
+        const slaveItem = newInstanceMap.instances[value];
+        Object.assign(row, {
+          master: {
+            bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+            bk_cloud_id: item.bk_cloud_id,
+            bk_host_id: item.bk_host_id,
+            ip: item.ip,
+            port: item.port,
+          },
+          slave: {
+            bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+            bk_cloud_id: slaveItem.bk_cloud_id,
+            bk_host_id: slaveItem.bk_host_id,
+            ip: slaveItem.ip,
+            port: slaveItem.port,
+          },
+        });
+      }
+
+      tableData.value[index] = row;
+      instanceMemo[item.instance_address] = true;
+      selectedClusters.value[ClusterTypes.REDIS].push(item);
+    }
+    sortTableByCluster();
+  };
+
+  // 检测列表是否为空
+  const checkListEmpty = (list: IDataRow[]) => {
+    if (list.length > 1) {
+      return false;
+    }
+    const [firstRow] = list;
+    return !firstRow?.clusterData;
+  };
+
+  const handleSubmit = async () => {
+    try {
+      isSubmitting.value = true;
+      const infos = await Promise.all(rowRefs.value.map((item: { getValue: () => Promise<any> }) => item.getValue()));
+      await createTicket({
+        ticket_type: TicketTypes.REDIS_CLUSTER_INS_MIGRATE,
+        remark: localRemark.value,
+        details: {
+          infos,
+        },
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      }).then((data) => {
+        window.changeConfirm = false;
+
+        router.push({
+          name: 'RedisMigrate',
+          params: {
+            page: 'success',
+          },
+          query: {
+            ticketId: data.id,
+          },
+        });
+      });
+    } finally {
+      isSubmitting.value = false;
+    }
+  };
+
+  const handleReset = () => {
+    tableData.value = [createRowData()];
+    localRemark.value = '';
+    instanceMemo = {};
+    selectedClusters.value[ClusterTypes.REDIS] = [];
+    window.changeConfirm = false;
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/cluseter-instance/RenderCurrentVersion.vue b/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/cluseter-instance/RenderCurrentVersion.vue
new file mode 100644
index 0000000000..319accfd70
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/cluseter-instance/RenderCurrentVersion.vue
@@ -0,0 +1,110 @@
+<!--
+ * 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>
+  <BkLoading :loading="versionLoading">
+    <div
+      ref="textRef"
+      class="render-text-box"
+      :class="{
+        'default-display': showDefault,
+      }">
+      <span
+        v-if="showDefault"
+        style="color: #c4c6cc">
+        {{ t('输入集群后自动生成') }}
+      </span>
+      <template v-else>
+        <BkOverflowTitle
+          v-for="name in currentVersionList"
+          :key="name"
+          v-overflow-title>
+          {{ name }}
+        </BkOverflowTitle>
+      </template>
+    </div>
+  </BkLoading>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { getClusterVersions } from '@services/source/redisToolbox';
+
+  interface Props {
+    data?: {
+      clusterId: number;
+    };
+  }
+
+  interface Exposes {
+    getValue: () => Promise<string[]>;
+  }
+
+  const props = defineProps<Props>();
+
+  const { t } = useI18n();
+
+  const showDefault = computed(() => !currentVersionList.value?.length);
+
+  const {
+    loading: versionLoading,
+    data: currentVersionList,
+    run: fetchCurrentClusterVersions,
+  } = useRequest(getClusterVersions, {
+    manual: true,
+    onSuccess(versions) {
+      currentVersionList.value = versions;
+    },
+  });
+
+  watch(
+    () => props.data?.clusterId,
+    () => {
+      if (props.data?.clusterId) {
+        fetchCurrentClusterVersions({
+          node_type: 'Backend',
+          type: 'online',
+          cluster_id: props.data.clusterId,
+        });
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  defineExpose<Exposes>({
+    getValue() {
+      return Promise.resolve(currentVersionList.value || []);
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .render-text-box {
+    position: relative;
+    width: 100%;
+    min-height: 42px;
+    padding: 10px 16px;
+    overflow: hidden;
+    line-height: 20px;
+    color: #63656e;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .default-display {
+    cursor: not-allowed;
+    background: #fafbfd;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/cluseter-instance/Row.vue b/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/cluseter-instance/Row.vue
new file mode 100644
index 0000000000..cebe410e92
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/cluseter-instance/Row.vue
@@ -0,0 +1,194 @@
+<!--
+ * 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>
+  <tr>
+    <FixedColumn fixed="left">
+      <RenderInstance
+        ref="instanceRef"
+        :data="data.clusterData?.instance"
+        @input-finish="handleClusterIdChange" />
+    </FixedColumn>
+    <!-- 跨行合并 -->
+    <td
+      v-if="data.spanData.isGeneral || data.spanData.isStart"
+      :rowspan="data.spanData.rowSpan"
+      style="padding: 0">
+      <RenderText
+        :data="data.clusterData?.domain"
+        :is-loading="data.isLoading"
+        :placeholder="t('输入集群后自动生成')" />
+    </td>
+    <td style="padding: 0">
+      <RenderText
+        :data="data.clusterData?.specName"
+        :is-loading="data.isLoading"
+        :placeholder="t('输入集群后自动生成')" />
+    </td>
+    <td style="padding: 0">
+      <RenderCurrentVersion
+        ref="currentVersionRef"
+        :data="data.clusterData" />
+    </td>
+    <OperateColumn
+      :removeable="removeable"
+      show-clone
+      @add="handleAppend"
+      @clone="handleClone"
+      @remove="handleRemove" />
+  </tr>
+</template>
+<script lang="ts">
+  import type { ComponentExposed } from 'vue-component-type-helpers';
+  import { useI18n } from 'vue-i18n';
+
+  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 RenderInstance from '@views/db-manage/redis/common/edit-field/RenderInstance.vue';
+
+  import { random } from '@utils';
+
+  import RenderCurrentVersion from './RenderCurrentVersion.vue';
+
+  export interface IHostData {
+    bk_biz_id: number;
+    bk_cloud_id: number;
+    bk_host_id: number;
+    ip: string;
+    port: number;
+  }
+
+  export interface IDataRow {
+    rowKey: string;
+    isLoading: boolean;
+    spanData: {
+      isStart: boolean;
+      isGeneral: boolean;
+      rowSpan: number;
+    };
+    clusterData?: {
+      instance: string;
+      domain: string;
+      clusterId: number;
+      clusterType: string;
+      specId: number;
+      specName: string;
+    };
+    master?: IHostData;
+    slave?: IHostData;
+  }
+
+  // 创建表格数据
+  export const createRowData = (clusterData?: NonNullable<IDataRow['clusterData']>): IDataRow => ({
+    rowKey: random(),
+    isLoading: false,
+    spanData: {
+      isStart: false,
+      isGeneral: true,
+      rowSpan: 1,
+    },
+    clusterData,
+  });
+</script>
+
+<script setup lang="ts">
+  interface Props {
+    data: IDataRow;
+    removeable: boolean;
+  }
+
+  interface Emits {
+    (e: 'add', params: IDataRow[]): void;
+    (e: 'remove'): void;
+    (e: 'clone', value: IDataRow): void;
+    (e: 'inputFinish', value: string): void;
+  }
+
+  interface Exposes {
+    getValue: () => Promise<{
+      cluster_id: number;
+      resource_spec: {
+        backend_group: {
+          spec_id: number;
+          count: 2;
+        };
+      };
+      old_nodes: {
+        master: IHostData[];
+        slave: IHostData[];
+      };
+      display_info: {
+        instance: Awaited<ReturnType<ComponentExposed<typeof RenderInstance>['getValue']>>;
+        db_version: string[];
+      };
+    }>;
+  }
+
+  const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+
+  const instanceRef = ref<InstanceType<typeof RenderInstance>>();
+  const currentVersionRef = ref<InstanceType<typeof RenderCurrentVersion>>();
+
+  const handleClusterIdChange = (value: string) => {
+    emits('inputFinish', value);
+  };
+
+  const handleAppend = () => {
+    emits('add', [createRowData()]);
+  };
+
+  const handleRemove = () => {
+    if (props.removeable) {
+      return;
+    }
+    emits('remove');
+  };
+
+  const handleClone = () => {
+    Promise.allSettled([instanceRef.value!.getValue(true)]).then(() => {
+      emits('clone', createRowData(props.data.clusterData));
+    });
+  };
+
+  defineExpose<Exposes>({
+    async getValue() {
+      return await Promise.all([instanceRef.value!.getValue(true), currentVersionRef.value!.getValue()]).then(
+        ([instanceData, versionData]) => {
+          const clusterInfo = props.data.clusterData!;
+          return {
+            cluster_id: clusterInfo.clusterId,
+            resource_spec: {
+              backend_group: {
+                spec_id: clusterInfo.specId,
+                count: 2,
+              },
+            },
+            old_nodes: {
+              master: [props.data.master!],
+              slave: [props.data.slave!],
+            },
+            display_info: {
+              instance: instanceData,
+              db_version: versionData,
+            },
+          };
+        },
+      );
+    },
+  });
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/common/RenderOldMasterSlaveHost.vue b/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/common/RenderOldMasterSlaveHost.vue
new file mode 100644
index 0000000000..799ec8a694
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/common/RenderOldMasterSlaveHost.vue
@@ -0,0 +1,228 @@
+<!--
+ * 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>
+  <RenderText
+    ref="textRef"
+    class="old-master-slave-host"
+    :data="instanceList.map((item) => item[0]).join(',')"
+    :is-loading="loading || instancePairLoading || instanceListLoading"
+    :placeholder="t('选择集群后自动生成')"
+    :rules="rules">
+    <template #content>
+      <div
+        v-for="(item, index) in instanceList"
+        :key="index"
+        class="host-item">
+        <div class="host-tag host-tag-master">M</div>
+        <div>{{ item[0] }}</div>
+        ，
+        <div class="host-tag host-tag-slave">S</div>
+        <div>{{ item[1] }}</div>
+      </div>
+    </template>
+  </RenderText>
+</template>
+<script setup lang="ts">
+  import type { ComponentExposed } from 'vue-component-type-helpers';
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { getRedisInstances } from '@services/source/redis';
+  import { queryMachineInstancePair } from '@services/source/redisToolbox';
+
+  import RenderText from '@components/render-table/columns/text-plain/index.vue';
+
+  interface IHostData {
+    bk_biz_id: number;
+    bk_cloud_id: number;
+    bk_host_id: number;
+    ip: string;
+    port: number;
+  }
+
+  interface Props {
+    data?: (IHostData & { instance: string })[];
+    loading?: boolean;
+  }
+
+  interface Exposes {
+    getValue: () => Promise<
+      {
+        cluster_id: number;
+        old_nodes: {
+          master: IHostData[];
+          slave: IHostData[];
+        };
+      }[]
+    >;
+  }
+
+  const props = defineProps<Props>();
+
+  const { t } = useI18n();
+
+  let clusterMap = {} as Record<string, number>;
+  const rules = [
+    {
+      validator: (value: string) => !!value,
+      message: t('关联的主从实例不能为空'),
+    },
+  ];
+
+  const instanceInfo = shallowRef<
+    {
+      master: IHostData;
+      slave: IHostData;
+    }[]
+  >([]);
+
+  const textRef = ref<ComponentExposed<typeof RenderText>>();
+
+  const instanceList = computed(() =>
+    instanceInfo.value.map((item) => [`${item.master.ip}:${item.master.port}`, `${item.slave.ip}:${item.slave.port}`]),
+  );
+
+  const {
+    loading: instancePairLoading,
+    data: instanceMap,
+    run: runQueryMachineInstancePair,
+  } = useRequest(queryMachineInstancePair, {
+    manual: true,
+  });
+
+  const { loading: instanceListLoading, run: runGetRedisInstances } = useRequest(getRedisInstances, {
+    manual: true,
+    onSuccess(result) {
+      clusterMap = result.results.reduce<Record<string, number>>(
+        (prevMap, instanceItem) =>
+          Object.assign({}, prevMap, { [instanceItem.instance_address]: instanceItem.cluster_id }),
+        {},
+      );
+    },
+  });
+
+  watch(
+    () => props.data,
+    () => {
+      if (props.data) {
+        const instances = props.data.map((item) => item.instance);
+        runQueryMachineInstancePair({
+          instances: props.data.map((item) => item.instance),
+        });
+        runGetRedisInstances({
+          instance_address: instances.join(','),
+        });
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  watch(instanceMap, () => {
+    if (instanceMap.value && instanceMap.value.instances) {
+      const masterMap = props.data!.reduce<Record<string, IHostData>>((prevMap, instanceItem) => {
+        if (prevMap[instanceItem.instance]) {
+          return prevMap;
+        }
+        return Object.assign({}, prevMap, {
+          [instanceItem.instance]: {
+            bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+            bk_cloud_id: instanceItem.bk_cloud_id,
+            bk_host_id: instanceItem.bk_host_id,
+            ip: instanceItem.ip,
+            port: instanceItem.port,
+          },
+        });
+      }, {});
+      instanceInfo.value = Object.entries(masterMap).map(([masterInstance, masterInfo]) => {
+        const slaveItem = instanceMap.value!.instances![masterInstance];
+        return {
+          master: masterInfo,
+          slave: {
+            bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+            bk_cloud_id: slaveItem.bk_cloud_id,
+            bk_host_id: slaveItem.bk_host_id,
+            ip: slaveItem.ip,
+            port: slaveItem.port,
+          },
+        };
+      });
+      setTimeout(() => {
+        // 行复制后，查询到对应数据后消除验证失败的样式
+        textRef.value!.getValue();
+      });
+    }
+  });
+
+  defineExpose<Exposes>({
+    getValue() {
+      return textRef.value!.getValue().then(() =>
+        instanceInfo.value.map((item) => ({
+          cluster_id: clusterMap[`${item.master.ip}:${item.master.port}`],
+          old_nodes: {
+            master: [item.master],
+            slave: [item.slave],
+          },
+        })),
+      );
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .old-master-slave-host {
+    :deep(.render-text-box) {
+      padding: 10px 0;
+    }
+
+    :deep(.default-display) {
+      padding: 10px 16px;
+    }
+
+    .host-item {
+      display: flex;
+      align-items: center;
+      padding: 0 16px;
+
+      &:not(:first-child) {
+        padding-top: 10px;
+        margin-top: 10px;
+        border-top: 1px solid #dcdee5;
+      }
+
+      .host-tag {
+        width: 16px;
+        height: 16px;
+        margin-right: 4px;
+        font-size: @font-size-mini;
+        font-weight: bolder;
+        line-height: 16px;
+        text-align: center;
+      }
+
+      .host-tag-master {
+        flex-shrink: 0;
+        color: @primary-color;
+        background-color: #cad7eb;
+      }
+
+      .host-tag-slave {
+        flex-shrink: 0;
+        color: #2dcb56;
+        background-color: #c8e5cd;
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/common/render-spec/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/common/render-spec/Index.vue
new file mode 100644
index 0000000000..1a69e1981a
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/common/render-spec/Index.vue
@@ -0,0 +1,189 @@
+<!--
+ * 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>
+  <BkLoading :loading="isLoading">
+    <div class="render-spec-box">
+      <TableEditSelect
+        ref="selectRef"
+        v-model="localValue"
+        :list="selectList"
+        :placeholder="t('请输入或从表头批量选择')"
+        :rules="rules"
+        @change="(value) => handleChange(value as number)">
+        <template #default="{ optionItem, index }">
+          <SpecPanel
+            :data="selectList[index].specData"
+            hide-qps
+            placement="right">
+            <div class="target-spec-select-option">
+              <div
+                v-overflow-tips
+                class="option-name">
+                {{ optionItem.label }}
+              </div>
+              <!-- <BkTag
+                  v-if="index === 0"
+                  class="ml-4"
+                  size="small"
+                  theme="info">
+                  {{ t('推荐') }}
+                </BkTag> -->
+              <BkTag
+                v-if="(optionItem.value as number) === currentSpecId"
+                class="ml-4"
+                size="small"
+                theme="info">
+                {{ t('当前版本') }}
+              </BkTag>
+            </div>
+          </SpecPanel>
+        </template>
+      </TableEditSelect>
+    </div>
+  </BkLoading>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import { getSpecResourceCount } from '@services/source/dbresourceResource';
+  import { getResourceSpecList } from '@services/source/dbresourceSpec';
+
+  import { ClusterTypes } from '@common/const';
+
+  import TableEditSelect, { type IListItem } from '@components/render-table/columns/select/index.vue';
+  import SpecPanel from '@components/render-table/columns/spec-display/Panel.vue';
+
+  import { specClusterMachineMap } from '@views/db-manage/redis/common/const';
+
+  // import SpecPanel from './SpecPanel.vue';
+
+  interface Props {
+    data?: {
+      cloudId: number;
+    };
+    isLoading?: boolean;
+    selectedSpecId?: number;
+    currentSpecId?: number;
+  }
+
+  interface Exposes {
+    getValue: () => Promise<string>;
+  }
+
+  const props = defineProps<Props>();
+  const selectRef = ref();
+  const localValue = ref(0);
+  const selectList = ref<IListItem[]>([]);
+
+  const { t } = useI18n();
+
+  const rules = [
+    {
+      validator: (value: string) => Boolean(value),
+      message: t('规格不能为空'),
+    },
+  ];
+
+  watchEffect(() => {
+    localValue.value = props.selectedSpecId || 0;
+  });
+
+  watch(
+    () => props.data,
+    () => {
+      if (props.data) {
+        getResourceSpecList({
+          spec_cluster_type: ClusterTypes.REDIS,
+          spec_machine_type: specClusterMachineMap[ClusterTypes.REDIS_INSTANCE],
+          limit: -1,
+          offset: 0,
+        }).then((specResult) => {
+          const specList = specResult.results.map((item) => ({
+            value: item.spec_id,
+            label: item.spec_name,
+            specData: {
+              name: item.spec_name,
+              cpu: item.cpu,
+              id: item.spec_id,
+              mem: item.mem,
+              count: 0,
+              storage_spec: item.storage_spec,
+            },
+          }));
+          selectList.value = specList;
+          if (specList.length) {
+            if (!props.selectedSpecId) {
+              localValue.value = specList[0].value;
+            }
+            getSpecResourceCount({
+              bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+              bk_cloud_id: props.data!.cloudId,
+              spec_ids: specList.map((item) => item.specData.id),
+            }).then((countData) => {
+              selectList.value = selectList.value.map((item) => ({
+                ...item,
+                count: countData[item.specData.id],
+              }));
+            });
+          }
+        });
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  const handleChange = (value: number) => {
+    localValue.value = value;
+  };
+
+  defineExpose<Exposes>({
+    getValue() {
+      return selectRef.value
+        .getValue()
+        .then(() => Number(localValue.value))
+        .catch(() => Promise.reject(Number(localValue.value)));
+    },
+  });
+</script>
+
+<style lang="less">
+  .target-spec-select-option {
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    .option-name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+</style>
+<style lang="less" scoped>
+  .render-spec-box {
+    line-height: 20px;
+    color: #63656e;
+  }
+
+  .eye {
+    font-size: 15px;
+    color: #3a84ff;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/common/render-spec/SpecPanel.vue b/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/common/render-spec/SpecPanel.vue
new file mode 100644
index 0000000000..9ed9a5a725
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/common/render-spec/SpecPanel.vue
@@ -0,0 +1,238 @@
+<!--
+ * 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>
+  <BkPopover
+    height="220"
+    placement="right"
+    :popover-delay="0"
+    theme="light"
+    width="420">
+    <slot name="hover" />
+    <template #content>
+      <div class="panel">
+        <div class="title">{{ data.name }} {{ t('规格') }}</div>
+        <div class="item">
+          <div class="item-title">CPU：</div>
+          <div class="item-content">
+            {{
+              data.cpu.min === data.cpu.max
+                ? t('n核', { n: data.cpu.min })
+                : t('((n-m))台', { n: data.cpu.min, m: data.cpu.max })
+            }}
+          </div>
+        </div>
+        <div class="item">
+          <div class="item-title">{{ t('内存') }}：</div>
+          <div class="item-content">
+            {{ data.mem.min === data.mem.max ? data.mem.min : `(${data.mem.min}~${data.mem.max})` }} G
+          </div>
+        </div>
+        <div class="item">
+          <div class="item-title">{{ t('磁盘') }}：</div>
+          <div class="item-content">
+            <div class="table">
+              <div class="head">
+                <div class="head-one">
+                  {{ t('挂载点') }}
+                </div>
+                <div class="head-two">
+                  {{ t('最小容量(G)') }}
+                </div>
+                <div class="head-three">
+                  {{ t('磁盘类别') }}
+                </div>
+              </div>
+              <div class="row">
+                <div class="row-one">
+                  {{ data.storage_spec[0].mount_point }}
+                </div>
+                <div class="row-two">
+                  {{ data.storage_spec[0].size }}
+                </div>
+                <div class="row-three">
+                  {{ data.storage_spec[0].type }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </BkPopover>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  export interface SpecInfo {
+    name: string;
+    cpu: {
+      max: number;
+      min: number;
+    };
+    id: number;
+    mem: {
+      max: number;
+      min: number;
+    };
+    count: number;
+    storage_spec: {
+      mount_point: string;
+      size: number;
+      type: string;
+    }[];
+  }
+
+  interface Props {
+    data?: SpecInfo;
+  }
+
+  withDefaults(defineProps<Props>(), {
+    data: () => ({
+      id: 1,
+      name: '默认规格',
+      cpu: {
+        min: 0,
+        max: 1,
+      },
+      mem: {
+        min: 0,
+        max: 1,
+      },
+      count: 1,
+      storage_spec: [
+        {
+          mount_point: '/data',
+          size: 0,
+          type: '默认',
+        },
+      ],
+    }),
+  });
+
+  const { t } = useI18n();
+</script>
+<style lang="less" scoped>
+  .panel {
+    display: flex;
+    width: 420px;
+    height: 220px;
+    padding: 16px;
+    margin-top: -12px;
+    margin-left: -12px;
+    background: #fff;
+    border: 1px solid #dcdee5;
+    box-shadow: 0 3px 6px 0 #00000029;
+    box-sizing: border-box;
+    flex-direction: column;
+
+    .title {
+      height: 20px;
+      margin-bottom: 12px;
+      font-size: 12px;
+      font-weight: 700;
+      line-height: 20px;
+      color: #63656e;
+    }
+
+    .item {
+      display: flex;
+      width: 100%;
+      height: 32px;
+      align-items: center;
+
+      .item-title {
+        height: 20px;
+        font-size: 12px;
+        letter-spacing: 0;
+        color: #63656e;
+      }
+
+      .item-content {
+        height: 20px;
+        font-size: 12px;
+        letter-spacing: 0;
+        color: #313238;
+
+        .table {
+          display: flex;
+          width: 100%;
+          flex-direction: column;
+
+          .cell_common {
+            width: 140px;
+            height: 42px;
+            padding: 11px 16px;
+            border: 1px solid #dcdee5;
+            border-right: 1px solid #dcdee5;
+            border-bottom: 1px solid #dcdee5;
+          }
+
+          .head {
+            display: flex;
+            width: 100%;
+            background: #f0f1f5;
+
+            .head-one {
+              .cell_common();
+
+              border-right: none;
+              border-bottom: none;
+            }
+
+            .head-two {
+              .cell_common();
+
+              width: 120px;
+              border-right: none;
+              border-bottom: none;
+            }
+
+            .head-three {
+              .cell_common();
+
+              width: 82px;
+              border-bottom: none;
+            }
+          }
+
+          .row {
+            display: flex;
+            width: 100%;
+            border-top: none;
+
+            .row-one {
+              .cell_common();
+
+              border-right: none;
+            }
+
+            .row-two {
+              .cell_common();
+
+              width: 120px;
+              border-right: none;
+            }
+
+            .row-three {
+              .cell_common();
+
+              width: 82px;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/master-slave-instance/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/master-slave-instance/Index.vue
new file mode 100644
index 0000000000..01e9825b1f
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/master-slave-instance/Index.vue
@@ -0,0 +1,395 @@
+<!--
+ * 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>
+  <SmartAction>
+    <div class="mb-24">
+      <RenderTable>
+        <template #default>
+          <RenderTableHeadColumn
+            fixed="left"
+            :width="200">
+            <span>{{ t('目标集群') }}</span>
+            <template #append>
+              <BatchOperateIcon
+                class="ml-4"
+                @click="handleShowMasterBatchSelector" />
+            </template>
+          </RenderTableHeadColumn>
+          <RenderTableHeadColumn
+            :required="false"
+            :width="220">
+            <span>{{ t('关联的主从实例') }}</span>
+          </RenderTableHeadColumn>
+          <RenderTableHeadColumn :width="220">
+            <span>{{ t('规格') }}</span>
+            <template #append>
+              <BatchEditColumn
+                v-model="batchEditShow.targetSpecId"
+                :data-list="specList"
+                :title="t('规格')"
+                @change="(value: string | string[]) => handleBatchEditChange(value, 'targetSpecId')">
+                <BatchOperateIcon
+                  class="ml-4"
+                  type="edit"
+                  @click="handleShowBatchEdit('targetSpecId')" />
+              </BatchEditColumn>
+            </template>
+          </RenderTableHeadColumn>
+          <RenderTableHeadColumn :width="220">
+            <span>{{ t('版本') }}</span>
+            <template #append>
+              <BatchEditColumn
+                v-model="batchEditShow.targetVersion"
+                :data-list="versionList"
+                :title="t('版本')"
+                @change="(value: string | string[]) => handleBatchEditChange(value, 'targetVersion')">
+                <BatchOperateIcon
+                  class="ml-4"
+                  type="edit"
+                  @click="handleShowBatchEdit('targetVersion')" />
+              </BatchEditColumn>
+            </template>
+          </RenderTableHeadColumn>
+          <RenderTableHeadColumn
+            fixed="right"
+            :required="false"
+            :width="100">
+            {{ t('操作') }}
+          </RenderTableHeadColumn>
+        </template>
+        <template #data>
+          <RenderDataRow
+            v-for="(item, index) in tableData"
+            :key="item.rowKey"
+            ref="rowRefs"
+            :data="item"
+            :inputed-clusters="inputedClusters"
+            :removeable="tableData.length < 2"
+            @add="(payload) => handleAppend(index, payload)"
+            @clone="(payload) => handleClone(index, payload)"
+            @input-finish="(value) => handleChangeCluster(index, value)"
+            @remove="handleRemove(index)" />
+        </template>
+      </RenderTable>
+      <TicketRemark v-model="localRemark" />
+      <ClusterSelector
+        v-model:is-show="isShowClusterSelector"
+        :cluster-types="[ClusterTypes.REDIS]"
+        :selected="selectedClusters"
+        :tab-list-config="tabListConfig"
+        @change="handelClusterChange" />
+    </div>
+    <template #action>
+      <BkButton
+        class="w-88"
+        :loading="isSubmitting"
+        theme="primary"
+        @click="handleSubmit">
+        {{ t('提交') }}
+      </BkButton>
+      <DbPopconfirm
+        :confirm-handler="handleReset"
+        :content="t('重置将会清空当前填写的所有内容_请谨慎操作')"
+        :title="t('确认重置页面')">
+        <BkButton
+          class="ml8 w-88"
+          :disabled="isSubmitting">
+          {{ t('重置') }}
+        </BkButton>
+      </DbPopconfirm>
+    </template>
+  </SmartAction>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import RedisModel from '@services/model/redis/redis';
+  import { getResourceSpecList } from '@services/source/dbresourceSpec';
+  import { listPackages } from '@services/source/package';
+  import { getRedisList } from '@services/source/redis';
+  import { createTicket } from '@services/source/ticket';
+
+  import { useGlobalBizs } from '@stores';
+
+  import { ClusterTypes, DBTypes, TicketTypes } from '@common/const';
+
+  import ClusterSelector, { type TabItem } from '@components/cluster-selector/Index.vue';
+  import RenderTableHeadColumn from '@components/render-table/HeadColumn.vue';
+  import RenderTable from '@components/render-table/Index.vue';
+  import TicketRemark from '@components/ticket-remark/Index.vue';
+
+  import BatchEditColumn from '@views/db-manage/common/batch-edit-column/Index.vue';
+  import BatchOperateIcon from '@views/db-manage/common/batch-operate-icon/Index.vue';
+  import { QueryKeyMap, specClusterMachineMap } from '@views/db-manage/redis/common/const';
+
+  import { random } from '@utils';
+
+  import RenderDataRow, { createRowData, type IDataRow, type IDataRowBatchKey } from './Row.vue';
+
+  interface Props {
+    tableList: IDataRow[];
+    remark: string;
+  }
+
+  const props = defineProps<Props>();
+
+  const router = useRouter();
+  const { t } = useI18n();
+  const { currentBizId } = useGlobalBizs();
+
+  const tableData = ref([createRowData()]);
+  const isShowClusterSelector = ref(false);
+  const rowRefs = ref<InstanceType<typeof RenderDataRow>[]>();
+  const isSubmitting = ref(false);
+  const localRemark = ref('');
+
+  const batchEditShow = reactive({
+    targetSpecId: false,
+    targetVersion: false,
+  });
+
+  const selectedClusters = shallowRef<{ [key: string]: RedisModel[] }>({ [ClusterTypes.REDIS]: [] });
+
+  const specList = shallowRef<
+    {
+      value: number;
+      label: string;
+    }[]
+  >();
+  const versionList = shallowRef<
+    {
+      value: string;
+      label: string;
+    }[]
+  >([]);
+
+  const tabListConfig = {
+    [ClusterTypes.REDIS]: {
+      getResourceList: (params: ServiceParameters<typeof getRedisList>) =>
+        getRedisList({
+          cluster_type: ClusterTypes.REDIS_INSTANCE,
+          ...params,
+        }),
+    },
+  } as unknown as Record<ClusterTypes, TabItem>;
+
+  const inputedClusters = computed(() =>
+    tableData.value.reduce<string[]>((prev, item) => {
+      if (item.clusterData?.domain) {
+        return prev.concat(item.clusterData.domain);
+      }
+      return prev;
+    }, []),
+  );
+
+  useRequest(getResourceSpecList, {
+    defaultParams: [
+      {
+        spec_cluster_type: ClusterTypes.REDIS,
+        spec_machine_type: specClusterMachineMap[ClusterTypes.REDIS_INSTANCE],
+        limit: -1,
+        offset: 0,
+      },
+    ],
+    onSuccess(listResult) {
+      specList.value = listResult.results.map((item) => ({
+        value: item.spec_id,
+        label: item.spec_name,
+      }));
+    },
+  });
+
+  useRequest(listPackages, {
+    defaultParams: [
+      {
+        db_type: DBTypes.REDIS,
+        query_key: QueryKeyMap[ClusterTypes.REDIS_INSTANCE],
+      },
+    ],
+    onSuccess(listResult) {
+      versionList.value = listResult.map((item) => ({
+        value: item,
+        label: item,
+      }));
+    },
+  });
+
+  watchEffect(() => {
+    tableData.value = props.tableList.length > 0 ? props.tableList : [createRowData()];
+  });
+
+  watchEffect(() => {
+    localRemark.value = props.remark;
+  });
+
+  // 集群域名是否已存在表格的映射表
+  let domainMemo: Record<string, boolean> = {};
+
+  const handleShowMasterBatchSelector = () => {
+    isShowClusterSelector.value = true;
+  };
+
+  // 追加一个集群
+  const handleAppend = (index: number, appendList: IDataRow[]) => {
+    tableData.value.splice(index + 1, 0, ...appendList);
+  };
+
+  // 删除一个集群
+  const handleRemove = (index: number) => {
+    const removeItem = tableData.value[index];
+    if (removeItem.clusterData?.domain) {
+      const { domain } = removeItem.clusterData;
+      delete domainMemo[domain];
+      const clustersArr = selectedClusters.value[ClusterTypes.REDIS];
+      selectedClusters.value[ClusterTypes.REDIS] = clustersArr.filter((item) => item.master_domain !== domain);
+    }
+    tableData.value.splice(index, 1);
+  };
+
+  // 复制行数据
+  const handleClone = (index: number, sourceData: IDataRow) => {
+    tableData.value.splice(index + 1, 0, sourceData);
+    setTimeout(() => {
+      rowRefs.value![rowRefs.value!.length - 1].getValue();
+    });
+  };
+
+  const generateTableRow = (item: RedisModel) => ({
+    rowKey: random(),
+    isLoading: false,
+    clusterData: {
+      domain: item.master_domain,
+      cloudId: item.bk_cloud_id,
+      clusterType: item.cluster_type,
+      clusterId: item.id,
+      relatedInstance: item.redis_master.map((masterItem) => ({
+        bk_biz_id: masterItem.bk_biz_id,
+        bk_cloud_id: masterItem.bk_cloud_id,
+        bk_host_id: masterItem.bk_host_id,
+        ip: masterItem.ip,
+        port: masterItem.port,
+        instance: masterItem.instance,
+      })),
+      currentSpecId: item.cluster_spec.spec_id,
+      dbVersion: item.major_version,
+    },
+  });
+
+  // 批量选择
+  const handelClusterChange = (selected: { [key: string]: RedisModel[] }) => {
+    selectedClusters.value = selected;
+    const list = selected[ClusterTypes.REDIS];
+    const newList: IDataRow[] = [];
+    list.forEach((item) => {
+      const { master_domain: domain } = item;
+      if (!domainMemo[domain]) {
+        newList.push(generateTableRow(item));
+        domainMemo[domain] = true;
+      }
+    });
+    if (checkListEmpty(tableData.value)) {
+      tableData.value = newList;
+    } else {
+      tableData.value = [...tableData.value, ...newList];
+    }
+    window.changeConfirm = true;
+  };
+
+  // 输入集群后查询集群信息并填充到table
+  const handleChangeCluster = async (index: number, value: number) => {
+    tableData.value[index].isLoading = true;
+    const result = await getRedisList({ cluster_ids: `${value}` }).finally(() => {
+      tableData.value[index].isLoading = false;
+    });
+    if (result.results.length > 0) {
+      const item = result.results[0];
+      const row = generateTableRow(item);
+      tableData.value[index] = row;
+      domainMemo[item.master_domain] = true;
+      selectedClusters.value[ClusterTypes.REDIS].push(item);
+    }
+  };
+
+  // 检测列表是否为空
+  const checkListEmpty = (list: IDataRow[]) => {
+    if (list.length > 1) {
+      return false;
+    }
+    const [firstRow] = list;
+    return !firstRow.clusterData;
+  };
+
+  const handleShowBatchEdit = (col: keyof typeof batchEditShow) => {
+    batchEditShow[col] = !batchEditShow[col];
+  };
+
+  const handleBatchEditChange = (value: string | string[], filed: IDataRowBatchKey) => {
+    if (!value || checkListEmpty(tableData.value)) {
+      return;
+    }
+    tableData.value.forEach((row) => {
+      Object.assign(row, {
+        [filed]: value,
+      });
+    });
+  };
+
+  const handleSubmit = async () => {
+    try {
+      isSubmitting.value = true;
+      const rowInfos = await Promise.all(rowRefs.value!.map((item) => item.getValue()));
+      const infos = rowInfos
+        .map((infoItem) =>
+          infoItem.instance.map((instaneItem) => ({
+            ...instaneItem,
+            resource_spec: infoItem.resource_spec,
+            db_version: infoItem.db_version,
+            display_info: infoItem.display_info,
+          })),
+        )
+        .flat();
+      await createTicket({
+        ticket_type: TicketTypes.REDIS_SINGLE_INS_MIGRATE,
+        remark: localRemark.value,
+        details: {
+          infos,
+        },
+        bk_biz_id: currentBizId,
+      }).then((data) => {
+        window.changeConfirm = false;
+
+        router.push({
+          name: 'RedisMigrate',
+          params: {
+            page: 'success',
+          },
+          query: {
+            ticketId: data.id,
+          },
+        });
+      });
+    } finally {
+      isSubmitting.value = false;
+    }
+  };
+
+  const handleReset = () => {
+    tableData.value = [createRowData()];
+    localRemark.value = '';
+    domainMemo = {};
+    selectedClusters.value[ClusterTypes.TENDBHA] = [];
+    window.changeConfirm = false;
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/master-slave-instance/Row.vue b/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/master-slave-instance/Row.vue
new file mode 100644
index 0000000000..fdfe1efc09
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/master-slave-instance/Row.vue
@@ -0,0 +1,223 @@
+<!--
+ * 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>
+  <tr>
+    <FixedColumn fixed="left">
+      <RenderTargetCluster
+        ref="clusterRef"
+        :data="data.clusterData?.domain"
+        :inputed="inputedClusters"
+        @input-finish="handleInputFinish" />
+    </FixedColumn>
+    <td style="padding: 0">
+      <RenderOldMasterSlaveHost
+        ref="instanceRef"
+        :data="data.clusterData?.relatedInstance"
+        :is-loading="data.isLoading"
+        :placeholder="t('自动生成')" />
+    </td>
+    <td style="padding: 0">
+      <RenderSpec
+        ref="specRef"
+        :current-spec-id="data.clusterData?.currentSpecId"
+        :data="data.clusterData"
+        :is-loading="data.isLoading"
+        :selected-spec-id="localSpec" />
+    </td>
+    <td style="padding: 0">
+      <RenderTargetClusterVersion
+        ref="versionRef"
+        :cluster-type="data.clusterData?.clusterType"
+        :data="localVersion"
+        :is-loading="data.isLoading" />
+    </td>
+    <OperateColumn
+      :removeable="removeable"
+      show-clone
+      @add="handleAppend"
+      @clone="handleClone"
+      @remove="handleRemove" />
+  </tr>
+</template>
+<script lang="ts">
+  import type { ComponentExposed, ComponentProps } from 'vue-component-type-helpers';
+  import { useI18n } from 'vue-i18n';
+
+  import RedisModel from '@services/model/redis/redis';
+
+  import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
+  import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
+
+  import RenderTargetCluster from '@views/db-manage/redis/common/edit-field/ClusterName.vue';
+  import RenderTargetClusterVersion from '@views/db-manage/redis/common/edit-field/VersionSelect.vue';
+
+  import { random } from '@utils';
+
+  import RenderSpec from '../common/render-spec/Index.vue';
+  import RenderOldMasterSlaveHost from '../common/RenderOldMasterSlaveHost.vue';
+
+  export interface IHostData {
+    bk_biz_id: number;
+    bk_cloud_id: number;
+    bk_host_id: number;
+    ip: string;
+    port: number;
+  }
+
+  export interface IDataRow {
+    rowKey: string;
+    isLoading: boolean;
+    clusterData?: {
+      domain: string;
+      cloudId: number;
+      clusterType: string;
+      clusterId: number;
+      relatedInstance: ComponentProps<typeof RenderOldMasterSlaveHost>['data'];
+      currentSpecId: number;
+      dbVersion: string;
+    };
+    targetSpecId?: number;
+    targetVersion?: string;
+  }
+
+  export type IDataRowBatchKey = keyof Pick<IDataRow, 'targetSpecId' | 'targetVersion'>;
+
+  // 创建表格数据
+  export const createRowData = (data?: Omit<IDataRow, 'rowKey' | 'isLoading'>): IDataRow => ({
+    rowKey: random(),
+    isLoading: false,
+    ...data,
+  });
+
+  interface Props {
+    data: IDataRow;
+    removeable: boolean;
+    inputedClusters?: string[];
+  }
+
+  interface Emits {
+    (e: 'add', params: IDataRow[]): void;
+    (e: 'remove'): void;
+    (e: 'clone', value: IDataRow): void;
+    (e: 'inputFinish', value: number): void;
+  }
+
+  interface Exposes {
+    getValue: () => Promise<{
+      instance: Awaited<ReturnType<ComponentExposed<typeof RenderOldMasterSlaveHost>['getValue']>>;
+      resource_spec: {
+        backend_group: {
+          spec_id: string;
+          count: number;
+        };
+      };
+      db_version: string;
+      display_info: {
+        migrate_type: 'domain';
+        ip: '';
+        domain: string;
+      };
+    }>;
+  }
+</script>
+
+<script setup lang="ts">
+  const props = withDefaults(defineProps<Props>(), {
+    inputedClusters: () => [],
+  });
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+
+  const clusterRef = ref<InstanceType<typeof RenderTargetCluster>>();
+  const instanceRef = ref<ComponentExposed<typeof RenderOldMasterSlaveHost>>();
+  const specRef = ref<InstanceType<typeof RenderSpec>>();
+  const versionRef = ref<InstanceType<typeof RenderTargetClusterVersion>>();
+
+  const localSpec = computed(() => {
+    if (props.data.targetSpecId) {
+      return props.data.targetSpecId;
+    }
+    return props.data.clusterData?.currentSpecId;
+  });
+
+  const localVersion = computed(() => {
+    if (props.data.targetVersion) {
+      return props.data.targetVersion;
+    }
+    return props.data.clusterData?.dbVersion;
+  });
+
+  const handleInputFinish = (value: RedisModel) => {
+    emits('inputFinish', value.id);
+  };
+
+  const handleAppend = () => {
+    emits('add', [createRowData()]);
+  };
+
+  const handleRemove = () => {
+    if (props.removeable) {
+      return;
+    }
+    emits('remove');
+  };
+
+  const handleClone = () => {
+    Promise.allSettled([
+      clusterRef.value!.getValue(true),
+      instanceRef.value!.getValue(),
+      specRef.value!.getValue(),
+      versionRef.value!.getValue(),
+    ]).then((rowData) => {
+      const rowInfo = rowData.map((item) => (item.status === 'fulfilled' ? item.value : item.reason));
+      emits(
+        'clone',
+        createRowData({
+          clusterData: props.data.clusterData,
+          targetSpecId: rowInfo[2],
+          targetVersion: rowInfo[3],
+        }),
+      );
+    });
+  };
+
+  defineExpose<Exposes>({
+    async getValue() {
+      return await Promise.all([
+        clusterRef.value!.getValue(true),
+        instanceRef.value!.getValue(),
+        specRef.value!.getValue(),
+        versionRef.value!.getValue(),
+      ]).then((data) => {
+        const [clusterData, instanceData, specData, versionData] = data;
+        return {
+          instance: instanceData,
+          resource_spec: {
+            backend_group: {
+              spec_id: specData,
+              count: 2,
+            },
+          },
+          db_version: versionData,
+          display_info: {
+            migrate_type: 'domain',
+            ip: '',
+            domain: clusterData,
+          },
+        };
+      });
+    },
+  });
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/master-slave-machine/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/master-slave-machine/Index.vue
new file mode 100644
index 0000000000..5de90ed306
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/master-slave-machine/Index.vue
@@ -0,0 +1,423 @@
+<!--
+ * 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>
+  <SmartAction>
+    <div class="render-data mb-24">
+      <RenderTable>
+        <template #default>
+          <RenderTableHeadColumn
+            fixed="left"
+            :width="200">
+            <span>{{ t('目标 Master 主机') }}</span>
+            <template #append>
+              <BatchOperateIcon
+                class="ml-4"
+                @click="handleShowMasterBatchSelector" />
+            </template>
+          </RenderTableHeadColumn>
+          <RenderTableHeadColumn
+            :required="false"
+            :width="100">
+            <span>{{ t('关联的主从实例') }}</span>
+          </RenderTableHeadColumn>
+          <RenderTableHeadColumn :width="220">
+            <span>{{ t('规格') }}</span>
+            <template #append>
+              <BatchEditColumn
+                v-model="batchEditShow.targetSpecId"
+                :data-list="specList"
+                :title="t('规格')"
+                @change="(value: string | string[]) => handleBatchEditChange(value, 'targetSpecId')">
+                <BatchOperateIcon
+                  class="ml-4"
+                  type="edit"
+                  @click="handleShowBatchEdit('targetSpecId')" />
+              </BatchEditColumn>
+            </template>
+          </RenderTableHeadColumn>
+          <RenderTableHeadColumn :width="220">
+            <span>{{ t('版本') }}</span>
+            <template #append>
+              <BatchEditColumn
+                v-model="batchEditShow.targetVersion"
+                :data-list="versionList"
+                :title="t('版本')"
+                @change="(value: string | string[]) => handleBatchEditChange(value, 'targetVersion')">
+                <BatchOperateIcon
+                  class="ml-4"
+                  type="edit"
+                  @click="handleShowBatchEdit('targetVersion')" />
+              </BatchEditColumn>
+            </template>
+          </RenderTableHeadColumn>
+          <RenderTableHeadColumn
+            fixed="right"
+            :required="false"
+            :width="100">
+            {{ t('操作') }}
+          </RenderTableHeadColumn>
+        </template>
+        <template #data>
+          <RenderDataRow
+            v-for="(item, index) in tableData"
+            :key="item.rowKey"
+            ref="rowRefs"
+            :data="item"
+            :removeable="tableData.length < 2"
+            @add="(payload) => handleAppend(index, payload)"
+            @clone="(payload) => handleClone(index, payload)"
+            @ip-input-finish="(ip) => handleChangeCluster(index, ip)"
+            @remove="handleRemove(index)" />
+        </template>
+      </RenderTable>
+      <TicketRemark v-model="localRemark" />
+      <InstanceSelector
+        v-model:is-show="isShowClusterSelector"
+        :cluster-types="['RedisHost']"
+        :selected="selectedClusters"
+        :tab-list-config="tabListConfig"
+        @change="handelClusterChange" />
+    </div>
+    <template #action>
+      <BkButton
+        class="w-88"
+        :loading="isSubmitting"
+        theme="primary"
+        @click="handleSubmit">
+        {{ t('提交') }}
+      </BkButton>
+      <DbPopconfirm
+        :confirm-handler="handleReset"
+        :content="t('重置将会清空当前填写的所有内容_请谨慎操作')"
+        :title="t('确认重置页面')">
+        <BkButton
+          class="ml8 w-88"
+          :disabled="isSubmitting">
+          {{ t('重置') }}
+        </BkButton>
+      </DbPopconfirm>
+    </template>
+  </SmartAction>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import RedisModel from '@services/model/redis/redis';
+  import RedisMachineModel from '@services/model/redis/redis-machine';
+  import { getResourceSpecList } from '@services/source/dbresourceSpec';
+  import { listPackages } from '@services/source/package';
+  import { getRedisMachineList } from '@services/source/redis';
+  import { createTicket } from '@services/source/ticket';
+
+  import { useGlobalBizs } from '@stores';
+
+  import { ClusterTypes, DBTypes, TicketTypes } from '@common/const';
+
+  import InstanceSelector, { type PanelListType } from '@components/instance-selector/Index.vue';
+  import RenderTableHeadColumn from '@components/render-table/HeadColumn.vue';
+  import RenderTable from '@components/render-table/Index.vue';
+  import TicketRemark from '@components/ticket-remark/Index.vue';
+
+  import BatchEditColumn from '@views/db-manage/common/batch-edit-column/Index.vue';
+  import BatchOperateIcon from '@views/db-manage/common/batch-operate-icon/Index.vue';
+  import { QueryKeyMap, specClusterMachineMap } from '@views/db-manage/redis/common/const';
+
+  import { random } from '@utils';
+
+  import RenderDataRow, { createRowData, type IDataRow, type IDataRowBatchKey } from './Row.vue';
+
+  interface Props {
+    tableList: IDataRow[];
+    remark: string;
+  }
+
+  const props = defineProps<Props>();
+
+  const router = useRouter();
+  const { t } = useI18n();
+  const { currentBizId } = useGlobalBizs();
+
+  const tableData = ref([createRowData()]);
+  const isShowClusterSelector = ref(false);
+  const rowRefs = ref<InstanceType<typeof RenderDataRow>[]>();
+  const isSubmitting = ref(false);
+  const localRemark = ref('');
+
+  const batchEditShow = reactive({
+    targetSpecId: false,
+    targetVersion: false,
+  });
+
+  const tabListConfig = {
+    RedisHost: [
+      {
+        topoConfig: {
+          totalCountFunc: (dataList: RedisModel[]) => {
+            const ipSet = new Set<string>();
+            dataList.forEach((dataItem) => dataItem.redis_master.forEach((masterItem) => ipSet.add(masterItem.ip)));
+            return ipSet.size;
+          },
+        },
+        tableConfig: {
+          getTableList: (params: ServiceReturnType<typeof getRedisMachineList>) =>
+            getRedisMachineList({
+              cluster_type: ClusterTypes.REDIS_INSTANCE,
+              ...params,
+            }),
+          disabledRowConfig: {
+            handler: (data: RedisMachineModel) =>
+              data.isUnvailable || data.related_instances.some((item) => item.status === 'unavailable'),
+            tip: t('集群或实例状态异常，不可选择'),
+          },
+        },
+      },
+      {
+        manualConfig: {
+          checkInstances: (params: ServiceReturnType<typeof getRedisMachineList>) =>
+            getRedisMachineList({
+              cluster_type: ClusterTypes.REDIS_INSTANCE,
+              ...params,
+            }),
+        },
+        tableConfig: {
+          disabledRowConfig: {
+            handler: (data: RedisMachineModel) =>
+              data.isUnvailable || data.related_instances.some((item) => item.status === 'unavailable'),
+            tip: t('集群或实例状态异常，不可选择'),
+          },
+        },
+      },
+    ],
+  } as unknown as Record<ClusterTypes, PanelListType>;
+
+  const selectedClusters = shallowRef<{ [key: string]: RedisMachineModel[] }>({ ['RedisHost']: [] });
+
+  const specList = shallowRef<
+    {
+      value: number;
+      label: string;
+    }[]
+  >();
+  const versionList = shallowRef<
+    {
+      value: string;
+      label: string;
+    }[]
+  >([]);
+
+  useRequest(getResourceSpecList, {
+    defaultParams: [
+      {
+        spec_cluster_type: ClusterTypes.REDIS,
+        spec_machine_type: specClusterMachineMap[ClusterTypes.REDIS_INSTANCE],
+        limit: -1,
+        offset: 0,
+      },
+    ],
+    onSuccess(listResult) {
+      specList.value = listResult.results.map((item) => ({
+        value: item.spec_id,
+        label: item.spec_name,
+      }));
+    },
+  });
+
+  useRequest(listPackages, {
+    defaultParams: [
+      {
+        db_type: DBTypes.REDIS,
+        query_key: QueryKeyMap[ClusterTypes.REDIS_INSTANCE],
+      },
+    ],
+    onSuccess(listResult) {
+      versionList.value = listResult.map((item) => ({
+        value: item,
+        label: item,
+      }));
+    },
+  });
+
+  watchEffect(() => {
+    tableData.value = props.tableList.length > 0 ? props.tableList : [createRowData()];
+  });
+
+  watchEffect(() => {
+    localRemark.value = props.remark;
+  });
+
+  // master主机是否已存在表格的映射表
+  let ipMemo: Record<string, boolean> = {};
+
+  const handleShowMasterBatchSelector = () => {
+    isShowClusterSelector.value = true;
+  };
+
+  // 追加一个集群
+  const handleAppend = (index: number, appendList: IDataRow[]) => {
+    tableData.value.splice(index + 1, 0, ...appendList);
+  };
+
+  // 删除一个集群
+  const handleRemove = (index: number) => {
+    const removeItem = tableData.value[index];
+    if (removeItem.clusterData) {
+      const { ip } = removeItem.clusterData;
+      delete ipMemo[ip];
+      const hostList = selectedClusters.value.RedisHost;
+      selectedClusters.value.RedisHost = hostList.filter((item) => item.ip !== ip);
+    }
+    tableData.value.splice(index, 1);
+  };
+
+  // 复制行数据
+  const handleClone = (index: number, sourceData: IDataRow) => {
+    tableData.value.splice(index + 1, 0, sourceData);
+    setTimeout(() => {
+      rowRefs.value![rowRefs.value!.length - 1].getValue();
+    });
+  };
+
+  const generateTableRow = (item: RedisMachineModel) => ({
+    rowKey: random(),
+    isLoading: false,
+    clusterData: {
+      ip: item.ip,
+      cloudId: item.bk_cloud_id,
+      clusterType: ClusterTypes.REDIS_INSTANCE,
+      // related_cluster: item.related_clusters,
+      relatedInstance: item.related_instances,
+      currentSpecId: item.spec_config.id,
+      dbVersion: item.related_clusters[0].major_version,
+    },
+  });
+
+  // 批量选择
+  const handelClusterChange = async (selected: Record<string, RedisMachineModel[]>) => {
+    selectedClusters.value = selected;
+    const machineList = selected.RedisHost;
+    const newList: IDataRow[] = [];
+    machineList.forEach((item) => {
+      const { ip } = item;
+      if (!ipMemo[ip]) {
+        newList.push(generateTableRow(item));
+        ipMemo[ip] = true;
+      }
+    });
+    if (checkListEmpty(tableData.value)) {
+      tableData.value = newList;
+    } else {
+      tableData.value = [...tableData.value, ...newList];
+    }
+    window.changeConfirm = true;
+  };
+
+  // 输入集群后查询集群信息并填充到table
+  const handleChangeCluster = async (index: number, ip: string) => {
+    tableData.value[index].isLoading = true;
+    const result = await getRedisMachineList({ ip }).finally(() => {
+      tableData.value[index].isLoading = false;
+    });
+    if (result.results.length > 0) {
+      const machineItem = result.results[0];
+      const row = generateTableRow(machineItem);
+      tableData.value[index] = row;
+      ipMemo[machineItem.ip] = true;
+      selectedClusters.value.RedisHost.push(machineItem);
+    }
+  };
+
+  // 检测列表是否为空
+  const checkListEmpty = (list: IDataRow[]) => {
+    if (list.length > 1) {
+      return false;
+    }
+    const [firstRow] = list;
+    return !firstRow.clusterData;
+  };
+
+  const handleShowBatchEdit = (col: keyof typeof batchEditShow) => {
+    batchEditShow[col] = !batchEditShow[col];
+  };
+
+  const handleBatchEditChange = (value: string | string[], filed: IDataRowBatchKey) => {
+    if (!value || checkListEmpty(tableData.value)) {
+      return;
+    }
+    tableData.value.forEach((row) => {
+      Object.assign(row, {
+        [filed]: value,
+      });
+    });
+  };
+
+  const handleSubmit = async () => {
+    try {
+      isSubmitting.value = true;
+      const rowInfos = await Promise.all(rowRefs.value!.map((item) => item.getValue()));
+      const infos = rowInfos
+        .map((infoItem) =>
+          infoItem.instance.map((instaneItem) => ({
+            ...instaneItem,
+            resource_spec: infoItem.resource_spec,
+            db_version: infoItem.db_version,
+            display_info: infoItem.display_info,
+          })),
+        )
+        .flat();
+      await createTicket({
+        ticket_type: TicketTypes.REDIS_SINGLE_INS_MIGRATE,
+        remark: localRemark.value,
+        details: {
+          infos,
+        },
+        bk_biz_id: currentBizId,
+      }).then((data) => {
+        window.changeConfirm = false;
+
+        router.push({
+          name: 'RedisMigrate',
+          params: {
+            page: 'success',
+          },
+          query: {
+            ticketId: data.id,
+          },
+        });
+      });
+    } finally {
+      isSubmitting.value = false;
+    }
+  };
+
+  const handleReset = () => {
+    tableData.value = [createRowData()];
+    localRemark.value = '';
+    ipMemo = {};
+    selectedClusters.value.RedisHost = [];
+    window.changeConfirm = false;
+  };
+</script>
+
+<style lang="less" scoped>
+  .render-data {
+    .storage-remote-form {
+      :deep(.bk-form-label) {
+        font-size: 12px;
+        font-weight: 700;
+        color: #313238;
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/master-slave-machine/Row.vue b/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/master-slave-machine/Row.vue
new file mode 100644
index 0000000000..8cc6767318
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page1/components/master-slave-machine/Row.vue
@@ -0,0 +1,221 @@
+<!--
+ * 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>
+  <tr>
+    <FixedColumn fixed="left">
+      <RenderHost
+        ref="hostRef"
+        :data="data.clusterData?.ip"
+        :inputed="inputedIps"
+        @input-finish="handleInputFinish" />
+    </FixedColumn>
+    <td style="padding: 0">
+      <RenderOldMasterSlaveHost
+        ref="instanceRef"
+        :data="data.clusterData?.relatedInstance"
+        :is-loading="data.isLoading"
+        :placeholder="t('自动生成')" />
+    </td>
+    <td style="padding: 0">
+      <RenderSpec
+        ref="specRef"
+        :current-spec-id="data.clusterData?.currentSpecId"
+        :data="data.clusterData"
+        :is-loading="data.isLoading"
+        :selected-spec-id="localSpec" />
+    </td>
+    <td style="padding: 0">
+      <RenderTargetClusterVersion
+        ref="versionRef"
+        :cluster-type="data.clusterData?.clusterType"
+        :data="localVersion"
+        :is-loading="data.isLoading" />
+    </td>
+    <OperateColumn
+      :removeable="removeable"
+      show-clone
+      @add="handleAppend"
+      @clone="handleClone"
+      @remove="handleRemove" />
+  </tr>
+</template>
+<script lang="ts">
+  import type { ComponentExposed, ComponentProps } from 'vue-component-type-helpers';
+  import { useI18n } from 'vue-i18n';
+
+  import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
+  import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
+
+  import RenderHost from '@views/db-manage/redis/common/edit-field/HostName.vue';
+  import RenderTargetClusterVersion from '@views/db-manage/redis/common/edit-field/VersionSelect.vue';
+
+  import { random } from '@utils';
+
+  import RenderSpec from '../common/render-spec/Index.vue';
+  import RenderOldMasterSlaveHost from '../common/RenderOldMasterSlaveHost.vue';
+
+  export interface IHostData {
+    bk_biz_id: number;
+    bk_cloud_id: number;
+    bk_host_id: number;
+    ip: string;
+    port: number;
+  }
+
+  export interface IDataRow {
+    rowKey: string;
+    isLoading: boolean;
+    clusterData?: {
+      ip: string;
+      cloudId: number;
+      clusterType: string;
+      // related_cluster: RedisMachineModel['related_clusters'];
+      relatedInstance: ComponentProps<typeof RenderOldMasterSlaveHost>['data'];
+      currentSpecId: number;
+      dbVersion: string;
+    };
+    targetSpecId?: number;
+    targetVersion?: string;
+  }
+
+  export type IDataRowBatchKey = keyof Pick<IDataRow, 'targetSpecId' | 'targetVersion'>;
+
+  // 创建表格数据
+  export const createRowData = (data?: Omit<IDataRow, 'rowKey' | 'isLoading'>): IDataRow => ({
+    rowKey: random(),
+    isLoading: false,
+    ...data,
+  });
+
+  interface Props {
+    data: IDataRow;
+    removeable: boolean;
+    inputedIps?: string[];
+  }
+
+  interface Emits {
+    (e: 'add', params: IDataRow[]): void;
+    (e: 'remove'): void;
+    (e: 'clone', value: IDataRow): void;
+    (e: 'ipInputFinish', value: string): void;
+  }
+
+  interface Exposes {
+    getValue: () => Promise<{
+      instance: Awaited<ReturnType<ComponentExposed<typeof RenderOldMasterSlaveHost>['getValue']>>;
+      resource_spec: {
+        backend_group: {
+          spec_id: string;
+          count: 2;
+        };
+      };
+      db_version: string;
+      display_info: {
+        migrate_type: 'machine';
+        ip: string;
+        domain: '';
+      };
+    }>;
+  }
+</script>
+
+<script setup lang="ts">
+  const props = withDefaults(defineProps<Props>(), {
+    inputedIps: () => [],
+  });
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+
+  const hostRef = ref<InstanceType<typeof RenderHost>>();
+  const instanceRef = ref<InstanceType<typeof RenderOldMasterSlaveHost>>();
+  const specRef = ref<InstanceType<typeof RenderSpec>>();
+  const versionRef = ref<InstanceType<typeof RenderTargetClusterVersion>>();
+
+  const localSpec = computed(() => {
+    if (props.data.targetSpecId) {
+      return props.data.targetSpecId;
+    }
+    return props.data.clusterData?.currentSpecId;
+  });
+
+  const localVersion = computed(() => {
+    if (props.data.targetVersion) {
+      return props.data.targetVersion;
+    }
+    return props.data.clusterData?.dbVersion;
+  });
+
+  const handleInputFinish = (value: string) => {
+    emits('ipInputFinish', value.split(':')[1]);
+  };
+
+  const handleAppend = () => {
+    emits('add', [createRowData()]);
+  };
+
+  const handleRemove = () => {
+    if (props.removeable) {
+      return;
+    }
+    emits('remove');
+  };
+
+  const handleClone = () => {
+    Promise.allSettled([
+      hostRef.value!.getValue(true),
+      instanceRef.value!.getValue(),
+      specRef.value!.getValue(),
+      versionRef.value!.getValue(),
+    ]).then((rowData) => {
+      const rowInfo = rowData.map((item) => (item.status === 'fulfilled' ? item.value : item.reason));
+      emits(
+        'clone',
+        createRowData({
+          clusterData: props.data.clusterData,
+          targetSpecId: rowInfo[2],
+          targetVersion: rowInfo[3],
+        }),
+      );
+    });
+  };
+
+  defineExpose<Exposes>({
+    async getValue() {
+      return await Promise.all([
+        hostRef.value!.getValue(true),
+        instanceRef.value!.getValue(),
+        specRef.value!.getValue(),
+        versionRef.value!.getValue(),
+      ]).then((data) => {
+        const [hostData, instanceData, specData, versionData] = data;
+        return {
+          instance: instanceData,
+          resource_spec: {
+            backend_group: {
+              spec_id: specData,
+              count: 2,
+            },
+          },
+          db_version: versionData,
+          display_info: {
+            migrate_type: 'machine',
+            ip: hostData,
+            domain: '',
+          },
+        };
+      });
+    },
+  });
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page2/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page2/Index.vue
new file mode 100644
index 0000000000..7e80af2f5b
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/migrate/pages/page2/Index.vue
@@ -0,0 +1,87 @@
+<!--
+ * 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>
+  <RenderSuccess :steps="steps">
+    <template #title>
+      {{ t('迁移提交成功') }}
+    </template>
+    <I18nT
+      keypath="接下来您可以通过xx查看任务最新动态"
+      tag="span">
+      <RouterLink
+        target="_blank"
+        :to="{
+          name: 'bizTicketManage',
+          query: {
+            id: ticketId,
+          },
+        }">
+        {{ t('单据') }}
+      </RouterLink>
+    </I18nT>
+    <template #action>
+      <BkButton
+        class="w-88"
+        theme="primary"
+        @click="handleGoTicket">
+        {{ t('去看看') }}
+      </BkButton>
+      <BkButton
+        class="ml-8"
+        @click="handleStepChange">
+        {{ t('继续提单') }}
+      </BkButton>
+    </template>
+  </RenderSuccess>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+  import { useRoute, useRouter } from 'vue-router';
+
+  import RenderSuccess from '@components/ticket-success/Index.vue';
+
+  const route = useRoute();
+  const router = useRouter();
+  const { t } = useI18n();
+
+  const { ticketId } = route.query;
+
+  const steps = [
+    {
+      name: t('单据审批'),
+    },
+    {
+      name: t('生产执行'),
+    },
+    {
+      name: t('任务完成'),
+    },
+  ];
+
+  const handleGoTicket = () => {
+    const route = router.resolve({
+      name: 'bizTicketManage',
+      query: {
+        id: ticketId,
+      },
+    });
+    window.open(route.href);
+  };
+
+  const handleStepChange = () => {
+    router.push({
+      name: 'RedisMigrate',
+    });
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/routes.ts b/dbm-ui/frontend/src/views/db-manage/redis/routes.ts
index 6695dc4fa3..432a52b98b 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/routes.ts
+++ b/dbm-ui/frontend/src/views/db-manage/redis/routes.ts
@@ -75,6 +75,15 @@ const redisDBReplaceRoute = {
   component: () => import('@views/db-manage/redis/db-replace/Index.vue'),
 };
 
+const redisMigrateRoute = {
+  name: 'RedisMigrate',
+  path: 'db-migrate/:page?',
+  meta: {
+    navName: t('迁移'),
+  },
+  component: () => import('@views/db-manage/redis/migrate/Index.vue'),
+};
+
 const redisClusterShardUpdateRoute = {
   name: 'RedisClusterShardUpdate',
   path: 'cluster-shard-update/:page?',
@@ -165,6 +174,7 @@ const toolboxDbConsoleRouteMap = {
   'redis.toolbox.slaveRebuild': redisDBCreateSlaveRoute,
   'redis.toolbox.masterSlaveSwap': redisMasterFailoverRoute,
   'redis.toolbox.dbReplace': redisDBReplaceRoute,
+  'redis.toolbox.migrate': redisMigrateRoute,
   'redis.toolbox.versionUpgrade': redisVersionUpgradeRoute,
   'redis.toolbox.rollback': redisDBStructureRoute,
   'redis.toolbox.rollbackRecord': redisStructureInstanceRoute,
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/toolbox-menu.ts b/dbm-ui/frontend/src/views/db-manage/redis/toolbox-menu.ts
index eace25a4d4..cf3a30af61 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/toolbox-menu.ts
+++ b/dbm-ui/frontend/src/views/db-manage/redis/toolbox-menu.ts
@@ -56,6 +56,12 @@ export default [
             parentId: 'common-manage',
             dbConsoleValue: 'redis.toolbox.dbReplace',
           },
+          {
+            name: t('迁移'),
+            id: 'RedisMigrate',
+            parentId: 'common-manage',
+            dbConsoleValue: 'redis.toolbox.migrate',
+          },
           {
             name: t('版本升级'),
             id: 'RedisVersionUpgrade',
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/TicketClone.vue b/dbm-ui/frontend/src/views/tickets/common/components/TicketClone.vue
index f80fe8d7d1..57aabd8995 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/TicketClone.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/TicketClone.vue
@@ -70,6 +70,8 @@
     [TicketTypes.REDIS_PLUGIN_DELETE_CLB]: 'DatabaseRedisList', // Redis 删除CLB
     [TicketTypes.REDIS_PLUGIN_CREATE_POLARIS]: 'DatabaseRedisList', // Redis 删除构造任务
     [TicketTypes.REDIS_PLUGIN_DELETE_POLARIS]: 'DatabaseRedisList', // Redis 删除构造任务
+    [TicketTypes.REDIS_CLUSTER_INS_MIGRATE]: 'RedisMigrate', // Redis 集群迁移
+    [TicketTypes.REDIS_SINGLE_INS_MIGRATE]: 'RedisMigrate', // Redis 主从迁移
     [TicketTypes.MYSQL_SINGLE_APPLY]: 'SelfServiceApplySingle', // Mysql 单节点部署
     [TicketTypes.MYSQL_HA_APPLY]: 'SelfServiceApplyHa', // Mysql 主从部署
     [TicketTypes.MYSQL_EXCEL_AUTHORIZE_RULES]: '', // Mysql excel 授权
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/Index.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/Index.vue
index a3f8b85a6f..302fcd849f 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/Index.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/Index.vue
@@ -102,6 +102,8 @@
   import DetailsRedisHa from './redis/DetailsHa.vue';
   import RedisHaClusterOperation from './redis/HaClusterOperation.vue';
   import RedisMasterFailover from './redis/MasterFailover.vue';
+  import RedisClusterMigrate from './redis/migrate/ClusterMigrate.vue';
+  import RedisSingleMigrate from './redis/migrate/SingleMigrate.vue';
   import RedisOperation from './redis/Operation.vue';
   import RedisProxyScaleDown from './redis/ProxyScaleDown.vue';
   import RedisProxyScaleUp from './redis/ProxyScaleUp.vue';
@@ -371,6 +373,8 @@
     [TicketTypes.MYSQL_LOCAL_UPGRADE]: MySQLVerisonLocalUpgrade,
     [TicketTypes.MYSQL_MIGRATE_UPGRADE]: MySQLVerisonMigrateUpgrade,
     [TicketTypes.DORIS_APPLY]: DetailDoris,
+    [TicketTypes.REDIS_CLUSTER_INS_MIGRATE]: RedisClusterMigrate,
+    [TicketTypes.REDIS_SINGLE_INS_MIGRATE]: RedisSingleMigrate,
   };
 
   // 不同集群详情组件
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/AddSlave copy.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/AddSlave copy.vue
new file mode 100644
index 0000000000..321f57b2f4
--- /dev/null
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/AddSlave copy.vue	
@@ -0,0 +1,63 @@
+<!--
+ * 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>
+  <BkTable :data="ticketDetails.details.infos">
+    <BkTableColumn :label="t('目标 Master 实例')">
+      <template #default="{ data }: { data: RowData }">
+        <div
+          v-for="clusterId in data.cluster_ids"
+          :key="clusterId"
+          style="line-height: 20px">
+          {{ ticketDetails.details.clusters[clusterId].immute_domain }}
+        </div>
+      </template>
+    </BkTableColumn>
+    <BkTableColumn :label="t('所属集群')">
+      <template #default="{ data }: { data: RowData }">
+        {{ data.new_slave_host.ip }}
+      </template>
+    </BkTableColumn>
+    <BkTableColumn :label="t('规格')">
+      <template #default="{ data }: { data: RowData }">
+        {{ data.new_slave_host.ip }}
+      </template>
+    </BkTableColumn>
+    <BkTableColumn :label="t('版本')">
+      <template #default="{ data }: { data: RowData }">
+        {{ data.new_slave_host.ip }}
+      </template>
+    </BkTableColumn>
+  </BkTable>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import TicketModel, { type RedisMigrate } from '@services/model/ticket/ticket';
+
+  import { TicketTypes } from '@common/const';
+
+  interface Props {
+    ticketDetails: TicketModel<RedisMigrate>;
+  }
+
+  type RowData = Props['ticketDetails']['details']['infos'][number];
+
+  defineProps<Props>();
+
+  defineOptions({
+    name: TicketTypes.SQLSERVER_ADD_SLAVE,
+  });
+
+  const { t } = useI18n();
+</script>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/migrate/ClusterMigrate.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/migrate/ClusterMigrate.vue
new file mode 100644
index 0000000000..9cc6b8f7e7
--- /dev/null
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/migrate/ClusterMigrate.vue
@@ -0,0 +1,76 @@
+<!--
+ * 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>
+  <BkTable :data="ticketDetails.details.infos">
+    <BkTableColumn
+      field="display_info.instance"
+      :label="t('目标 Master 实例')">
+    </BkTableColumn>
+    <BkTableColumn
+      field="cluster_id"
+      :label="t('所属集群')"
+      :rowspan="getRowSpan">
+      <template #default="{ data }: { data: RowData }">
+        {{ ticketDetails.details.clusters[data.cluster_id].immute_domain }}
+      </template>
+    </BkTableColumn>
+    <BkTableColumn
+      field="resource_spec"
+      :label="t('规格')">
+      <template #default="{ data }: { data: RowData }">
+        {{ ticketDetails.details.specs[data.resource_spec.backend_group.spec_id].name }}
+      </template>
+    </BkTableColumn>
+    <BkTableColumn
+      field="display_info.db_version"
+      :label="t('版本')">
+      <template #default="{ data }: { data: RowData }">
+        <div
+          v-for="version in data.display_info.db_version"
+          :key="version"
+          style="line-height: 20px">
+          {{ version }}
+        </div>
+      </template>
+    </BkTableColumn>
+  </BkTable>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import { type RedisClusterMigrate } from '@services/model/ticket/details/redis';
+  import TicketModel from '@services/model/ticket/ticket';
+
+  import { TicketTypes } from '@common/const';
+
+  interface Props {
+    ticketDetails: TicketModel<RedisClusterMigrate>;
+  }
+
+  type RowData = Props['ticketDetails']['details']['infos'][number];
+
+  const props = defineProps<Props>();
+
+  defineOptions({
+    name: TicketTypes.REDIS_CLUSTER_INS_MIGRATE,
+  });
+
+  const { t } = useI18n();
+
+  const getRowSpan = ({ row }: { row: RowData }) => {
+    const { clusters, infos } = props.ticketDetails.details;
+    return infos.filter((item) => clusters[item.cluster_id].immute_domain === clusters[row.cluster_id].immute_domain)
+      .length;
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/migrate/SingleMigrate.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/migrate/SingleMigrate.vue
new file mode 100644
index 0000000000..dcdbc0f073
--- /dev/null
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/migrate/SingleMigrate.vue
@@ -0,0 +1,122 @@
+<!--
+ * 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>
+  <BkTable
+    class="single-migrate-table"
+    :data="ticketDetails.details.infos">
+    <BkTableColumn
+      :field="isDomain ? 'display_info.domain' : 'display_info.ip'"
+      :label="isDomain ? t('目标集群') : t('目标 Master 主机')">
+    </BkTableColumn>
+    <BkTableColumn
+      field="old_nodes"
+      :label="t('关联的主从实例')"
+      min-width="400">
+      <template #default="{ data }: { data: RowData }">
+        <div
+          v-for="(item, index) in instanceMap[data.display_info[rowKey]]"
+          :key="index"
+          class="host-item">
+          <div class="host-tag host-tag-master">M</div>
+          <div>{{ item[0] }}</div>
+          ，
+          <div class="host-tag host-tag-slave">S</div>
+          <div>{{ item[1] }}</div>
+        </div>
+      </template>
+    </BkTableColumn>
+    <BkTableColumn
+      field="resource_spec"
+      :label="t('规格')">
+      <template #default="{ data }: { data: RowData }">
+        {{ ticketDetails.details.specs[data.resource_spec.backend_group.spec_id].name }}
+      </template>
+    </BkTableColumn>
+    <BkTableColumn
+      field="db_version"
+      :label="t('版本')">
+    </BkTableColumn>
+  </BkTable>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import { type RedisSingleMigrate } from '@services/model/ticket/details/redis';
+  import TicketModel from '@services/model/ticket/ticket';
+
+  import { TicketTypes } from '@common/const';
+
+  interface Props {
+    ticketDetails: TicketModel<RedisSingleMigrate>;
+  }
+
+  type RowData = Props['ticketDetails']['details']['infos'][number];
+
+  const props = defineProps<Props>();
+
+  defineOptions({
+    name: TicketTypes.REDIS_SINGLE_INS_MIGRATE,
+  });
+
+  const { t } = useI18n();
+
+  const isDomain = props.ticketDetails.details.infos[0].display_info.migrate_type === 'domain';
+  const rowKey = isDomain ? 'domain' : 'ip';
+
+  const instanceMap = props.ticketDetails.details.infos.reduce<Record<string, string[][]>>((prevMap, item) => {
+    const masterItem = item.old_nodes.master[0];
+    const slaveItem = item.old_nodes.slave[0];
+    const instanceList = [`${masterItem.ip}:${masterItem.port}`, `${slaveItem.ip}:${slaveItem.port}`];
+    if (prevMap[item.display_info[rowKey]]) {
+      return Object.assign({}, prevMap, {
+        [item.display_info[rowKey]]: prevMap[item.display_info[rowKey]].concat(instanceList),
+      });
+    }
+    return Object.assign({}, prevMap, {
+      [item.display_info[rowKey]]: [instanceList],
+    });
+  }, {});
+  console.log(instanceMap);
+</script>
+
+<style lang="less" scoped>
+  .single-migrate-table {
+    .host-item {
+      display: flex;
+      align-items: center;
+
+      .host-tag {
+        width: 16px;
+        height: 16px;
+        margin-right: 4px;
+        font-size: @font-size-mini;
+        font-weight: bolder;
+        line-height: 16px;
+        text-align: center;
+      }
+
+      .host-tag-master {
+        flex-shrink: 0;
+        color: @primary-color;
+        background-color: #cad7eb;
+      }
+
+      .host-tag-slave {
+        flex-shrink: 0;
+        color: #2dcb56;
+        background-color: #c8e5cd;
+      }
+    }
+  }
+</style>