diff --git a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/versionLocalUpgrade.ts b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/versionLocalUpgrade.ts
index 1ad0c01d9c..3d94273dc3 100644
--- a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/versionLocalUpgrade.ts
+++ b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/versionLocalUpgrade.ts
@@ -31,7 +31,7 @@ export async function generateMysqlVersionLocalUpgradeCloneData(ticketData: Tick
     [ClusterTypes.TENDBHA]: getTendbhaList,
   };
   const clusterListResult = await apiMap[clusterType as keyof typeof apiMap]({
-    id: infos.map((item) => item.cluster_ids[0]).join(','),
+    cluster_ids: infos.map((item) => item.cluster_ids[0]),
   });
   const clusterListMap = clusterListResult.results.reduce(
     (obj, item) => {
diff --git a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/versionMigrateUpgrade.ts b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/versionMigrateUpgrade.ts
index ff592b508e..8acee7d43b 100644
--- a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/versionMigrateUpgrade.ts
+++ b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/versionMigrateUpgrade.ts
@@ -22,7 +22,7 @@ import { random } from '@utils';
 export async function generateMysqlVersionMigrateUpgradeCloneData(ticketData: TicketModel<MySQLMigrateUpgradeDetails>) {
   const { clusters, infos, backup_source: backupSource, force } = ticketData.details;
   const clusterListResult = await getTendbhaList({
-    id: infos.map((item) => item.cluster_ids[0]).join(','),
+    cluster_ids: infos.map((item) => item.cluster_ids[0]),
   });
   const clusterListMap = clusterListResult.results.reduce(
     (obj, item) => {
@@ -46,12 +46,30 @@ export async function generateMysqlVersionMigrateUpgradeCloneData(ticketData: Ti
         packageVersion: clusterListMap[clusterId].masters[0].version,
         moduleName: item.display_info.current_module_name,
         cloudId: clusters[clusterId].bk_cloud_id,
+        masterSlaveList: [
+          ...clusterListMap[clusterId].masters,
+          ...clusterListMap[clusterId].slaves.filter((item) => item.is_stand_by),
+        ].map((item) => ({
+          bk_biz_id: item.bk_biz_id,
+          bk_host_id: item.bk_host_id,
+          ip: item.ip,
+          bk_cloud_id: item.bk_cloud_id,
+        })),
+        readonlySlaveList: clusterListMap[clusterId].slaves
+          .filter((item) => !item.is_stand_by)
+          .map((item) => ({
+            bk_biz_id: item.bk_biz_id,
+            bk_host_id: item.bk_host_id,
+            ip: item.ip,
+            bk_cloud_id: item.bk_cloud_id,
+          })),
       },
       targetVersion: item.display_info.target_version,
       targetPackage: item.pkg_id,
       targetModule: item.new_db_module_id,
       masterHostData: item.new_master,
       slaveHostData: item.new_slave,
+      readonlyHostData: (item.read_only_slaves || []).map((readonlySlaveItem) => readonlySlaveItem.new_slave),
     };
   });
 
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index 440b1479e2..3a98e45af9 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3496,5 +3496,54 @@
     "特殊字符不允许包含空格": "特殊字符不允许包含空格",
     "请输入除大小写字母、数字外的英文半角字符": "请输入除大小写字母、数字外的英文半角字符",
     "请输入英文半角字符，重复字符将去重": "请输入英文半角字符，重复字符将去重",
+    "Follower节点规格": "Follower 节点规格",
+    "Observer节点规格": "Observer 节点规格",
+    "【Doris】集群管理": "【Doris】集群管理",
+    "申请Doris集群部署": "申请Doris集群部署",
+    "Doris版本": "Doris 版本",
+    "Follower节点": "Follower 节点",
+    "Observer节点": "Observer 节点",
+    "固定为n台": "固定为 {0} 台",
+    "查询端口": "查询端口",
+    "主机已被Follower节点使用": "主机已被 Follower 节点使用",
+    "主机已被Observer节点使用": "主机已被 Observer 节点使用",
+    "Follower节点IP": "Follower 节点 IP",
+    "Observer节点IP": "Observer 节点 IP",
+    "9010 和 9020 为服务内部占用端口": "9010 和 9020 为服务内部占用端口",
+    "与http端口互斥": "与 http 端口互斥",
+    "与查询端口互斥": "与查询端口互斥",
+    "至少添加一种节点IP": "至少添加一种节点 IP",
+    "name容量从n台扩容至n台": "{name} 容量从 {hostNumBefore} 台扩容至 {hostNumAfter} 台",
+    "name容量从n台缩容至n台": "{name} 容量从 {hostNumBefore} 台缩容至 {hostNumAfter} 台",
+    "至少缩容一种类型": "至少缩容一种类型",
+    "当前数量": "当前数量",
+    "确认禁用该集群？": "确认禁用该集群？",
+    "确认启用该集群？": "确认启用该集群？",
+    "启用后，将会恢复访问": "启用后，将会恢复访问",
+    "删除后将产生以下影响": "删除后将产生以下影响：",
+    "删除xxx集群": "删除 {0} 集群",
+    "删除xxx实例数据，停止相关进程": "删除 {xxx} 实例数据，停止相关进程",
+    "确认扩容集群？": "确认扩容集群？",
+    "若选择至少需要n台": "若选择至少需要 {0} 台",
+    "若选择至少需要n台，已选m台": "若选择至少需要 {0} 台，已选 {1} 台",
+    "扩容中": "扩容中",
+    "缩容中": "缩容中",
+    "替换中": "替换中",
+    "请保证冷/热节点至少存在一种": "请保证冷/热节点至少存在一种",
+    "Follower节点不支持缩容": "Follower节点不支持缩容",
+    "Follower类型节点若存在至少保留两台": "Follower类型节点若存在至少保留两台",
+    "冷/热 数据节点必选 1 种以上，每个角色至少需要 2 台": "冷/热 数据节点必选 1 种以上，每个角色至少需要 2 台",
+    "未完善": "未完善",
+    "扩容的节点 IP": "扩容的节点 IP",
+    "实例正在重启中，不能勾选": "实例正在重启中，不能勾选",
+    "较目标容量相差n台": "，较目标容量相差 {0} 台",
+    "较目标容量超出n台": "，较目标容量超出 {0} 台",
+    "Observer类型节点若存在至少保留两台": "Observer类型节点若存在至少保留两台",
+    "主从主机": "主从主机",
+    "只读主机": "只读主机",
+    "新主从主机": "新主从主机",
+    "新只读主机": "新只读主机",
+    "请输入n台IP_英文逗号或换行分隔": "请输入 {n} 台IP_英文逗号或换行分隔",
+    "请输入n台IP": "请输入 {n} 台IP",
     "这行勿动！新增翻译请在上一行添加！": ""
-}
+  }
diff --git a/dbm-ui/frontend/src/services/model/ticket/details/mysql.ts b/dbm-ui/frontend/src/services/model/ticket/details/mysql.ts
index 78e9efdc4d..3e55c5c1e7 100644
--- a/dbm-ui/frontend/src/services/model/ticket/details/mysql.ts
+++ b/dbm-ui/frontend/src/services/model/ticket/details/mysql.ts
@@ -601,6 +601,10 @@ export interface MySQLMigrateUpgradeDetails extends DetailBase {
     pkg_id: string;
     new_master: MysqlIpItem;
     new_slave: MysqlIpItem;
+    read_only_slaves?: {
+      old_slave: MysqlIpItem;
+      new_slave: MysqlIpItem;
+    }[];
     display_info: {
       current_version: string;
       target_version: string;
@@ -609,6 +613,7 @@ export interface MySQLMigrateUpgradeDetails extends DetailBase {
       charset: string;
       current_module_name: string;
       target_module_name: string;
+      old_master_slave?: string[];
     };
   }[];
   force: boolean;
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/Index.vue
index bf23c5475d..5f751e81aa 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/Index.vue
@@ -18,7 +18,7 @@
       theme="info"
       :title="
         t(
-          '版本升级：接入层可直接原地升级，存储层需先创建相应版本的模块，连续版本可直接升级，跨版本需提供新机通过迁移完成升级；同机所有关联集群将一并升级',
+          '版本升级：主从接入层和单节点采用原地升级，存储层小版本升级采用原地升级（注意：暂不支持一主多从），大版本需提供新机迁移方式执行。同一主机所有关联集群将一并同步升级',
         )
       " />
     <DbForm
@@ -29,9 +29,7 @@
         :label="t('角色类型')"
         property="roleType"
         required>
-        <BkRadioGroup
-          v-model="formData.roleType"
-          @change="handleRoleTypeChange">
+        <BkRadioGroup v-model="formData.roleType">
           <BkRadioButton
             v-for="item in roleTypeList"
             :key="item.value"
@@ -130,6 +128,7 @@
       window.changeConfirm = true;
 
       formData.roleType = 'haStorageLayer';
+      formData.updateType = 'remote';
       nextTick(() => {
         formData.updateType = 'remote';
       });
@@ -169,15 +168,17 @@
 
   const formData = reactive(initFormData());
 
+  const renderKey = computed(() => `${formData.roleType}-${formData.updateType}`);
+
   const currentTable = computed(() => {
-    const { roleType, updateType } = formData;
-    if (roleType === 'haAccessLayer') {
+    const [currentUpdateType, currentRoleType] = renderKey.value.split('-');
+    if (currentUpdateType === 'haAccessLayer') {
       return RenderAccessLayerTable;
     }
-    if (roleType === 'singleStorageLayer') {
+    if (currentUpdateType === 'singleStorageLayer') {
       return RenderSingleStorageTable;
     }
-    if (updateType === 'local') {
+    if (currentRoleType === 'local') {
       return RenderStorageLayerLocalTable;
     }
     return RenderStorageLayerRemoteTable;
@@ -190,21 +191,15 @@
     },
   );
 
-  watch(
-    () => formData.updateType,
-    () => {
-      tableList.value = [];
-      remark.value = '';
-      if (formData.updateType === '') {
-        formData.updateType = 'local';
-      }
-    },
-  );
-
-  const handleRoleTypeChange = () => {
-    remark.value = '';
+  watch(renderKey, () => {
     tableList.value = [];
-  };
+    remark.value = '';
+  });
+
+  // const handleRoleTypeChange = () => {
+  //   remark.value = '';
+  //   tableList.value = [];
+  // };
 </script>
 
 <style lang="less">
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/force-action/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/force-action/Index.vue
new file mode 100644
index 0000000000..2a0ac7f65e
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/force-action/Index.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="force-action">
+    <BkCheckbox
+      v-model="modelValue"
+      v-bk-tooltips="t('如忽略，有连接的情况下也会执行强制升级')">
+      <span class="force-action-text">{{ t('忽略业务连接') }}</span>
+    </BkCheckbox>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  const modelValue = defineModel<boolean>({
+    required: true,
+  });
+
+  const { t } = useI18n();
+</script>
+
+<style lang="less" scoped>
+  .force-action {
+    margin-top: 20px;
+
+    .force-action-text {
+      padding-bottom: 2px;
+      border-bottom: 1px dashed #979ba5;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-access-layer/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-access-layer/Index.vue
index 413f44b703..234df9556f 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-access-layer/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-access-layer/Index.vue
@@ -56,13 +56,7 @@
             @remove="handleRemove(index)" />
         </template>
       </RenderTable>
-      <div class="force-action">
-        <BkCheckbox
-          v-model="isForce"
-          v-bk-tooltips="t('如忽略，有连接的情况下也会执行强制升级')">
-          <span class="force-action-text">{{ t('忽略业务连接') }}</span>
-        </BkCheckbox>
-      </div>
+      <ForceAction v-model="isForce" />
       <TicketRemark v-model="localRemark" />
       <ClusterSelector
         v-model:is-show="isShowClusterSelector"
@@ -110,6 +104,8 @@
   import BatchOperateIcon from '@views/db-manage/common/batch-operate-icon/Index.vue';
   import type { InfoItem } from '@views/db-manage/redis/db-data-copy/pages/page1/Index.vue';
 
+  import ForceAction from '../force-action/Index.vue';
+
   import RenderDataRow, { createRowData, type IDataRow } from './Row.vue';
 
   interface Props {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-local/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-local/Index.vue
index 9d35515871..1fd65d7bbc 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-local/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-local/Index.vue
@@ -52,13 +52,7 @@
             @remove="handleRemove(index)" />
         </template>
       </RenderTable>
-      <div class="force-action">
-        <BkCheckbox
-          v-model="isForce"
-          v-bk-tooltips="t('如忽略，有连接的情况下也会执行强制升级')">
-          <span class="force-action-text">{{ t('忽略业务连接') }}</span>
-        </BkCheckbox>
-      </div>
+      <ForceAction v-model="isForce" />
       <TicketRemark v-model="localRemark" />
       <ClusterSelector
         v-model:is-show="isShowClusterSelector"
@@ -106,6 +100,8 @@
   import BatchOperateIcon from '@views/db-manage/common/batch-operate-icon/Index.vue';
   import type { InfoItem } from '@views/db-manage/redis/db-data-copy/pages/page1/Index.vue';
 
+  import ForceAction from '../force-action/Index.vue';
+
   import RenderDataRow, { createRowData, type IDataRow } from './Row.vue';
 
   interface Props {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-local/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-local/Row.vue
index 35951bd82e..2a5cadfb8d 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-local/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-local/Row.vue
@@ -71,9 +71,7 @@
     isLoading: false,
     clusterData,
   });
-</script>
 
-<script setup lang="ts">
   interface Props {
     data: IDataRow;
     removeable: boolean;
@@ -88,7 +86,9 @@
   interface Exposes {
     getValue: () => Promise<any>;
   }
+</script>
 
+<script setup lang="ts">
   const props = defineProps<Props>();
 
   const emits = defineEmits<Emits>();
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/Index.vue
index e6a5c13e76..696595b5d9 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/Index.vue
@@ -27,6 +27,16 @@
                 @click="handleShowMasterBatchSelector" />
             </template>
           </RenderTableHeadColumn>
+          <RenderTableHeadColumn
+            :required="false"
+            :width="120">
+            <span>{{ t('主从主机') }}</span>
+          </RenderTableHeadColumn>
+          <RenderTableHeadColumn
+            :required="false"
+            :width="100">
+            <span>{{ t('只读主机') }}</span>
+          </RenderTableHeadColumn>
           <RenderTableHeadColumn :width="220">
             <span>{{ t('当前版本') }}</span>
           </RenderTableHeadColumn>
@@ -36,7 +46,12 @@
           <RenderTableHeadColumn
             :min-width="130"
             :width="300">
-            <span>{{ t('新从库主机') }}</span>
+            <span>{{ t('新主从主机') }}</span>
+          </RenderTableHeadColumn>
+          <RenderTableHeadColumn
+            :min-width="200"
+            :width="300">
+            <span>{{ t('新只读主机') }}</span>
           </RenderTableHeadColumn>
           <RenderTableHeadColumn
             fixed="right"
@@ -57,13 +72,7 @@
             @remove="handleRemove(index)" />
         </template>
       </RenderTable>
-      <div class="force-action">
-        <BkCheckbox
-          v-model="isForce"
-          v-bk-tooltips="t('如忽略，有连接的情况下也会执行强制升级')">
-          <span class="force-action-text">{{ t('忽略业务连接') }}</span>
-        </BkCheckbox>
-      </div>
+      <ForceAction v-model="isForce" />
       <BkForm
         class="storage-remote-form mt-24"
         form-type="vertical">
@@ -127,6 +136,8 @@
   import BatchOperateIcon from '@views/db-manage/common/batch-operate-icon/Index.vue';
   import type { InfoItem } from '@views/db-manage/redis/db-data-copy/pages/page1/Index.vue';
 
+  import ForceAction from '../force-action/Index.vue';
+
   import RenderDataRow, { createRowData, type IDataRow } from './Row.vue';
 
   interface Props {
@@ -225,6 +236,20 @@
       packageVersion: item.masters[0].version,
       moduleName: item.db_module_name,
       cloudId: item.bk_cloud_id,
+      masterSlaveList: [...item.masters, ...item.slaves.filter((item) => item.is_stand_by)].map((item) => ({
+        bk_biz_id: item.bk_biz_id,
+        bk_host_id: item.bk_host_id,
+        ip: item.ip,
+        bk_cloud_id: item.bk_cloud_id,
+      })),
+      readonlySlaveList: item.slaves
+        .filter((item) => !item.is_stand_by)
+        .map((item) => ({
+          bk_biz_id: item.bk_biz_id,
+          bk_host_id: item.bk_host_id,
+          ip: item.ip,
+          bk_cloud_id: item.bk_cloud_id,
+        })),
     },
   });
 
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/RenderNewMasterSlaveHost.vue b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/RenderNewMasterSlaveHost.vue
new file mode 100644
index 0000000000..2d2c920b2e
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/RenderNewMasterSlaveHost.vue
@@ -0,0 +1,196 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <TableEditInput
+    ref="inputRef"
+    v-model="localIpText"
+    :disabled="disabled"
+    :paste-fn="pasteFunc"
+    :placeholder="t('请输入2台IP_英文逗号或换行分隔')"
+    :rules="rules" />
+</template>
+<script setup lang="ts">
+  import _ from 'lodash';
+  import { ref, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import { getHostTopoInfos } from '@services/source/ipchooser';
+
+  import { useGlobalBizs } from '@stores';
+
+  import { ipv4 } from '@common/regex';
+
+  import TableEditInput from '@components/render-table/columns/input/index.vue';
+
+  import { random } from '@utils';
+
+  import type { IHostData } from './Row.vue';
+
+  type HostTopoInfo = ServiceReturnType<typeof getHostTopoInfos>['hosts_topo_info'][number];
+
+  interface Props {
+    disabled: boolean;
+    masterHost?: IHostData;
+    slaveHost?: IHostData;
+    domain?: string;
+    cloudId?: number;
+  }
+
+  interface Exposes {
+    getValue: () => Promise<IHostData>;
+  }
+
+  const props = defineProps<Props>();
+
+  const genHostKey = (hostData: HostTopoInfo) => `#${hostData.bk_cloud_id}#${hostData.ip}`;
+
+  const instanceKey = `master_slave_host_${random()}`;
+  const singleHostSelectMemo: { [key: string]: Record<string, boolean> } = {};
+
+  const splitReg = /[\n ,，;；]/;
+
+  const { currentBizId } = useGlobalBizs();
+  const { t } = useI18n();
+
+  const inputRef = ref();
+  const localIpText = ref('');
+
+  let masterHostMemo = {} as HostTopoInfo;
+  let slaveHostMemo = {} as HostTopoInfo;
+  let errorMessage = t('IP不存在');
+
+  const rules = [
+    {
+      validator: (value: string) => {
+        const ipList = value.split(splitReg);
+        return ipList.length === 2;
+      },
+      message: t('请输入2台IP'),
+    },
+    {
+      validator: (value: string) => {
+        const ipList = value.split(splitReg);
+        return _.every(ipList, (item) => ipv4.test(_.trim(item)));
+      },
+      message: t('IP格式不正确'),
+    },
+    {
+      validator: (value: string) => {
+        const [fisrt, last] = value.split(splitReg);
+        return _.trim(fisrt) !== _.trim(last);
+      },
+      message: t('输入的主从IP重复'),
+    },
+    {
+      validator: (value: string) => {
+        const [masterIp, slaveIp] = value.split(splitReg);
+        return getHostTopoInfos({
+          filter_conditions: {
+            bk_host_innerip: [masterIp, slaveIp],
+            mode: 'idle_only',
+          },
+          bk_biz_id: currentBizId,
+        }).then((data) => {
+          if (data.hosts_topo_info.length < 2) {
+            const existIps = data.hosts_topo_info.map((item) => item.ip);
+            const ips = [masterIp, slaveIp].filter((ip) => !existIps.includes(ip));
+            errorMessage = t('ips不在空闲机中', { ips: ips.join('、') });
+            return false;
+          }
+
+          const qualifiedHosts = data.hosts_topo_info.filter((item) => item.bk_cloud_id === props.cloudId);
+          if (qualifiedHosts.length !== 2) {
+            const qualifiedIps = qualifiedHosts.map((item) => item.ip);
+            errorMessage = t('新主机xx跟目标集群xx须在同一个管控区域', {
+              ip: [masterIp, slaveIp].filter((ip) => !qualifiedIps.includes(ip)).join(', '),
+              cluster: props.domain,
+            });
+            return false;
+          }
+
+          // IP 有效
+          singleHostSelectMemo[instanceKey] = {};
+          data.hosts_topo_info.forEach((item) => {
+            if (item.ip === masterIp && item.bk_cloud_id === props.cloudId) {
+              masterHostMemo = item;
+              singleHostSelectMemo[instanceKey][genHostKey(masterHostMemo)] = true;
+            } else if (item.ip === slaveIp && item.bk_cloud_id === props.cloudId) {
+              slaveHostMemo = item;
+              singleHostSelectMemo[instanceKey][genHostKey(slaveHostMemo)] = true;
+            }
+          });
+          return true;
+        });
+      },
+      message: () => errorMessage,
+    },
+    {
+      validator: () => {
+        const otherHostSelectMemo = { ...singleHostSelectMemo };
+        delete otherHostSelectMemo[instanceKey];
+
+        const otherAllSelectHostMap = Object.values(otherHostSelectMemo).reduce(
+          (result, selectItem) => ({
+            ...result,
+            ...selectItem,
+          }),
+          {} as Record<string, boolean>,
+        );
+        if (otherAllSelectHostMap[genHostKey(masterHostMemo)] || otherAllSelectHostMap[genHostKey(slaveHostMemo)]) {
+          return false;
+        }
+
+        return true;
+      },
+      message: t('IP重复'),
+    },
+  ];
+
+  // 同步外部主从机器
+  watch(
+    () => [props.masterHost, props.slaveHost],
+    () => {
+      const ipStack = [];
+      if (props.masterHost) {
+        ipStack.push(props.masterHost.ip);
+      }
+      if (props.slaveHost) {
+        ipStack.push(props.slaveHost.ip);
+      }
+      localIpText.value = ipStack.join(';');
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  const pasteFunc = (value: string) => value.split(splitReg).join(',');
+
+  defineExpose<Exposes>({
+    getValue() {
+      const formatHost = (item: HostTopoInfo) => ({
+        bk_biz_id: currentBizId,
+        bk_host_id: item.bk_host_id,
+        bk_cloud_id: item.bk_cloud_id,
+        ip: item.ip,
+      });
+      return inputRef.value.getValue().then(() =>
+        Promise.resolve({
+          new_master: formatHost(masterHostMemo),
+          new_slave: formatHost(slaveHostMemo),
+        }),
+      );
+    },
+  });
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/RenderNewReadonlySlaveHost.vue b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/RenderNewReadonlySlaveHost.vue
new file mode 100644
index 0000000000..f8d7e832ff
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/RenderNewReadonlySlaveHost.vue
@@ -0,0 +1,182 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <TableEditInput
+    ref="inputRef"
+    v-model="localIpText"
+    :disabled="!slaveList?.length"
+    :paste-fn="pasteFunc"
+    :placeholder="placeholder"
+    :rules="rules" />
+</template>
+<script setup lang="ts">
+  import _ from 'lodash';
+  import { useI18n } from 'vue-i18n';
+
+  import { getHostTopoInfos } from '@services/source/ipchooser';
+
+  import { useGlobalBizs } from '@stores';
+
+  import { ipv4 } from '@common/regex';
+
+  import TableEditInput from '@components/render-table/columns/input/index.vue';
+
+  import { random } from '@utils';
+
+  import type { IHostData } from './Row.vue';
+
+  type HostTopoInfo = ServiceReturnType<typeof getHostTopoInfos>['hosts_topo_info'][number];
+
+  interface Props {
+    domain?: string;
+    cloudId?: number;
+    slaveList?: IHostData[];
+    ipList?: IHostData[];
+  }
+
+  interface Exposes {
+    getValue: () => Promise<{
+      read_only_slaves: {
+        old_slave: IHostData;
+        new_slave: IHostData;
+      }[];
+    }>;
+  }
+
+  const props = defineProps<Props>();
+
+  const genHostKey = (hostData: HostTopoInfo) => `#${hostData.bk_cloud_id}#${hostData.ip}`;
+
+  const instanceKey = `master_slave_host_${random()}`;
+  const singleHostSelectMemo: { [key: string]: Record<string, boolean> } = {};
+
+  const splitReg = /[\n ,，;；]/;
+
+  const { currentBizId } = useGlobalBizs();
+  const { t } = useI18n();
+
+  const inputRef = ref();
+  const localIpText = ref('');
+
+  let slaveHostMemo = [] as HostTopoInfo[];
+  let errorMessage = t('IP不存在');
+
+  const rules = [
+    {
+      validator: (value: string) => {
+        const ipList = value.split(splitReg);
+        return ipList.length === (props.slaveList?.length || 0);
+      },
+      message: t('请输入n台IP', { n: props.slaveList?.length || 0 }),
+    },
+    {
+      validator: (value: string) => {
+        const ipList = value.split(splitReg);
+        return _.every(ipList, (item) => ipv4.test(_.trim(item)));
+      },
+      message: t('IP格式不正确'),
+    },
+    {
+      validator: (value: string) => {
+        const [fisrt, last] = value.split(splitReg);
+        return _.trim(fisrt) !== _.trim(last);
+      },
+      message: t('输入的主从IP重复'),
+    },
+    {
+      validator: (value: string) => {
+        const ipList = value.split(splitReg);
+        return getHostTopoInfos({
+          filter_conditions: {
+            bk_host_innerip: ipList,
+            mode: 'idle_only',
+          },
+          bk_biz_id: currentBizId,
+        }).then((data) => {
+          if (data.hosts_topo_info.length < (props.slaveList?.length || 0)) {
+            const existIps = data.hosts_topo_info.map((item) => item.ip);
+            const ips = ipList.filter((ip) => !existIps.includes(ip));
+            errorMessage = t('ips不在空闲机中', { ips: ips.join('、') });
+            return false;
+          }
+
+          const qualifiedHosts = data.hosts_topo_info.filter((item) => item.bk_cloud_id === props.cloudId);
+          if (qualifiedHosts.length !== (props.slaveList?.length || 0)) {
+            const qualifiedIps = qualifiedHosts.map((item) => item.ip);
+            errorMessage = t('新主机xx跟目标集群xx须在同一个管控区域', {
+              ip: ipList.filter((ip) => !qualifiedIps.includes(ip)).join(', '),
+              cluster: props.domain,
+            });
+            return false;
+          }
+
+          // IP 有效
+          singleHostSelectMemo[instanceKey] = {};
+          slaveHostMemo = [];
+          data.hosts_topo_info.forEach((item) => {
+            if (ipList.includes(item.ip) && item.bk_cloud_id === props.cloudId) {
+              slaveHostMemo.push(item);
+              singleHostSelectMemo[instanceKey][genHostKey(item)] = true;
+            }
+          });
+          return true;
+        });
+      },
+      message: () => errorMessage,
+    },
+  ];
+
+  const placeholder = computed(() => {
+    if (props.slaveList?.length) {
+      return t('请输入n台IP_英文逗号或换行分隔', { n: props.slaveList.length || 0 });
+    }
+    return t('无只读主机');
+  });
+
+  watchEffect(() => {
+    localIpText.value = (props.ipList || []).map((item) => item.ip).join(';');
+  });
+
+  const pasteFunc = (value: string) => value.split(splitReg).join(',');
+
+  defineExpose<Exposes>({
+    getValue() {
+      const formatHost = (item: HostTopoInfo) => ({
+        bk_biz_id: currentBizId,
+        bk_host_id: item.bk_host_id,
+        bk_cloud_id: item.bk_cloud_id,
+        ip: item.ip,
+      });
+
+      if (props.slaveList?.length) {
+        return inputRef.value.getValue().then(() => {
+          const oldSlaveList = props.slaveList!;
+          const newSlaveList = slaveHostMemo.map((slaveItem) => formatHost(slaveItem));
+          const result = oldSlaveList.map((slaveItem, index) => ({
+            old_slave: slaveItem,
+            new_slave: newSlaveList[index],
+          }));
+
+          return Promise.resolve({
+            read_only_slaves: result,
+          });
+        });
+      }
+
+      return Promise.resolve({
+        read_only_slaves: [],
+      });
+    },
+  });
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/RenderOldMasterSlaveHost.vue b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/RenderOldMasterSlaveHost.vue
new file mode 100644
index 0000000000..6e019b131d
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/RenderOldMasterSlaveHost.vue
@@ -0,0 +1,79 @@
+<!--
+ * 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
+    class="old-master-slave-host"
+    :data="data.join(',')"
+    :is-loading="loading"
+    :placeholder="t('选择集群后自动生成')">
+    <template #content>
+      <div>
+        <div class="host-item">
+          <div class="host-tag host-tag-master">M</div>
+          <div>{{ data[0] }}</div>
+        </div>
+        <div class="host-item mt-4">
+          <div class="host-tag host-tag-slave">S</div>
+          <div>{{ data[1] }}</div>
+        </div>
+      </div>
+    </template>
+  </RenderText>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import RenderText from '@components/render-table/columns/text-plain/index.vue';
+
+  interface Props {
+    data?: string[];
+    loading?: boolean;
+  }
+
+  withDefaults(defineProps<Props>(), {
+    data: () => [],
+    loading: false,
+  });
+
+  const { t } = useI18n();
+</script>
+
+<style lang="less" scoped>
+  .old-master-slave-host {
+    .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 {
+        color: @primary-color;
+        background-color: #cad7eb;
+      }
+
+      .host-tag-slave {
+        color: #2dcb56;
+        background-color: #c8e5cd;
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/RenderTargetVersion.vue b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/RenderTargetVersion.vue
index 22151dcae1..1da9ac4af2 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/RenderTargetVersion.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/RenderTargetVersion.vue
@@ -253,6 +253,13 @@
         id: version,
         name: version,
       }));
+
+      if (localVersion.value) {
+        packageSelectList.value = (versionMap[localVersion.value] || []).map((versionItem) => ({
+          id: versionItem.pkg_id,
+          name: versionItem.pkg_name,
+        }));
+      }
     },
   });
 
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/Row.vue
index 9ed6589573..447fcf1785 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/Row.vue
@@ -19,6 +19,25 @@
         :model-value="clusterInfo"
         @id-change="handleClusterIdChange" />
     </FixedColumn>
+    <td style="padding: 0">
+      <RenderOldMasterSlaveHost
+        :data="oldMasterSlaveHost"
+        :is-loading="data.isLoading" />
+    </td>
+    <td style="padding: 0">
+      <RenderText
+        :data="readonlySlaveHost.join(',')"
+        :is-loading="data.isLoading"
+        :placeholder="readonlySlavePlaceholder">
+        <template #content>
+          <p
+            v-for="item in readonlySlaveHost"
+            :key="item">
+            {{ item }}
+          </p>
+        </template>
+      </RenderText>
+    </td>
     <td style="padding: 0">
       <RenderCurrentVersion
         :charset="localCharset"
@@ -45,6 +64,14 @@
         :master-host="data.masterHostData"
         :slave-host="data.slaveHostData" />
     </td>
+    <td style="padding: 0">
+      <RenderNewReadonlySlaveHost
+        ref="newReadonlySlaveHostRef"
+        :cloud-id="data.clusterData?.cloudId"
+        :domain="data.clusterData?.domain"
+        :ip-list="data.readonlyHostData"
+        :slave-list="data.clusterData?.readonlySlaveList" />
+    </td>
     <OperateColumn
       :removeable="removeable"
       @add="handleAppend"
@@ -52,10 +79,13 @@
   </tr>
 </template>
 <script lang="ts">
+  import { useI18n } from 'vue-i18n';
+
   import TendbhaModel from '@services/model/mysql/tendbha';
 
   import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
   import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
+  import RenderText from '@components/render-table/columns/text-plain/index.vue';
 
   import { random } from '@utils';
 
@@ -63,6 +93,8 @@
   import RenderCurrentVersion from '../RenderCurrentVersion.vue';
 
   import RenderMasterSlaveHost from './RenderMasterSlaveHost.vue';
+  import RenderNewReadonlySlaveHost from './RenderNewReadonlySlaveHost.vue';
+  import RenderOldMasterSlaveHost from './RenderOldMasterSlaveHost.vue';
   import RenderTargetVersion from './RenderTargetVersion.vue';
 
   export interface IHostData {
@@ -83,12 +115,15 @@
       packageVersion: string;
       moduleName: string;
       cloudId: number;
+      masterSlaveList: IHostData[];
+      readonlySlaveList: IHostData[];
     };
     targetVersion?: string;
     targetPackage?: number;
     targetModule?: number;
     masterHostData?: IHostData;
     slaveHostData?: IHostData;
+    readonlyHostData?: IHostData[];
   }
 
   // 创建表格数据
@@ -97,9 +132,7 @@
     isLoading: false,
     ...data,
   });
-</script>
 
-<script setup lang="ts">
   interface Props {
     data: IDataRow;
     removeable: boolean;
@@ -114,14 +147,18 @@
   interface Exposes {
     getValue: () => Promise<any>;
   }
+</script>
 
+<script setup lang="ts">
   const props = defineProps<Props>();
-
   const emits = defineEmits<Emits>();
 
+  const { t } = useI18n();
+
   const clusterRef = ref<InstanceType<typeof RenderCluster>>();
   const targetVersionRef = ref<InstanceType<typeof RenderTargetVersion>>();
   const masterSlaveHostRef = ref<InstanceType<typeof RenderMasterSlaveHost>>();
+  const newReadonlySlaveHostRef = ref<InstanceType<typeof RenderNewReadonlySlaveHost>>();
   const localCharset = ref('');
 
   const clusterInfo = computed(() => {
@@ -134,6 +171,19 @@
     return undefined;
   });
 
+  const oldMasterSlaveHost = computed(() => (props.data.clusterData?.masterSlaveList || []).map((item) => item.ip));
+  const readonlySlaveHost = computed(() => (props.data.clusterData?.readonlySlaveList || []).map((item) => item.ip));
+
+  const readonlySlavePlaceholder = computed(() => {
+    if (!props.data.clusterData) {
+      return t('选择集群后自动生成');
+    }
+    if (!props.data.clusterData.readonlySlaveList.length) {
+      return t('无只读主机');
+    }
+    return '';
+  });
+
   const handleClusterIdChange = (value: TendbhaModel | null) => {
     emits('clusterInputFinish', value);
   };
@@ -159,19 +209,22 @@
         clusterRef.value!.getValue(),
         targetVersionRef.value!.getValue(),
         masterSlaveHostRef.value!.getValue(),
+        newReadonlySlaveHostRef.value!.getValue(),
       ]).then((data) => {
-        const [clusterData, targetVersionData, masterSlaveHostData] = data;
+        const [clusterData, targetVersionData, masterSlaveHostData, newReadonlySlaveHostData] = data;
         const clusterInfo = props.data.clusterData!;
         Object.assign(targetVersionData.display_info, {
           current_version: clusterInfo.currentVersion,
           current_package: clusterInfo.packageVersion,
           charset: localCharset.value,
           current_module_name: clusterInfo.moduleName,
+          old_master_slave: oldMasterSlaveHost.value,
         });
         return {
           ...clusterData,
           ...targetVersionData,
           ...masterSlaveHostData,
+          ...newReadonlySlaveHostData,
         };
       });
     },
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/single-storage-layer/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/single-storage-layer/Index.vue
index a493500bac..fd35da308e 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/single-storage-layer/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/single-storage-layer/Index.vue
@@ -52,13 +52,7 @@
             @remove="handleRemove(index)" />
         </template>
       </RenderTable>
-      <div class="force-action">
-        <BkCheckbox
-          v-model="isForce"
-          v-bk-tooltips="t('如忽略，有连接的情况下也会执行强制升级')">
-          <span class="force-action-text">{{ t('忽略业务连接') }}</span>
-        </BkCheckbox>
-      </div>
+      <ForceAction v-model="isForce" />
       <TicketRemark v-model="localRemark" />
       <ClusterSelector
         v-model:is-show="isShowClusterSelector"
@@ -106,6 +100,8 @@
   import BatchOperateIcon from '@views/db-manage/common/batch-operate-icon/Index.vue';
   import type { InfoItem } from '@views/db-manage/redis/db-data-copy/pages/page1/Index.vue';
 
+  import ForceAction from '../force-action/Index.vue';
+
   import RenderDataRow, { createRowData, type IDataRow } from './Row.vue';
 
   interface Props {
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/version-upgrade/VersionMigrateUpgrade.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/version-upgrade/VersionMigrateUpgrade.vue
index 2574e9333e..53bae12e9e 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/version-upgrade/VersionMigrateUpgrade.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/version-upgrade/VersionMigrateUpgrade.vue
@@ -19,6 +19,9 @@
     <InfoItem :label="t('忽略业务连接：')">
       {{ ticketDetails.details.force ? t('是') : t('否') }}
     </InfoItem>
+    <InfoItem :label="t('备份源：')">
+      {{ ticketDetails.details.backup_source === 'local' ? t('本地备份') : t('远程备份') }}
+    </InfoItem>
   </InfoList>
 </template>
 
@@ -54,7 +57,10 @@
       charSet: string;
       moduleName: string;
     },
-    ip: string
+    ip: string[];
+    old_master_slave: string;
+    old_readonly_slaves: string[];
+    new_readonly_slaves: string[];
   }
 
   interface Props {
@@ -68,12 +74,12 @@
   const dataList = ref<DataItem[]>([])
 
   const columns = [
-    {
-      label: t('集群ID'),
-      field: 'cluster_id',
-      width: 100,
-      render: ({ cell }: { cell: [] }) => <span>{cell || '--'}</span>,
-    },
+    // {
+    //   label: t('集群ID'),
+    //   field: 'cluster_id',
+    //   width: 100,
+    //   render: ({ cell }: { cell: [] }) => <span>{cell || '--'}</span>,
+    // },
     {
       label: t('集群名称'),
       field: 'immute_domain',
@@ -92,31 +98,70 @@
         </div>
       ),
     },
+    {
+      label: t('主从主机'),
+      field: 'old_master_slave',
+      render: ({ data }: { data: DataItem }) => data.old_master_slave.length ? (
+        <div class="old-master-slave-host">
+          <div class="host-item">
+            <div class="host-tag host-tag-master">M</div>
+            <div>{data.old_master_slave[0]}</div>
+          </div>
+          <div class="host-item mt-4">
+            <div class="host-tag host-tag-slave">S</div>
+            <div>{data.old_master_slave[1]}</div>
+          </div>
+        </div>
+      ) : '--'
+    },
+    {
+      label: t('只读主机'),
+      field: 'old_readonly_slaves',
+      render: ({ data }: { data: DataItem }) => data.old_readonly_slaves.length ? data.old_readonly_slaves.map(item => <p>{item}</p>) : '--'
+    },
     {
       label: t('当前版本'),
       field: 'new_master',
+      minWidth: 200,
       render: ({ data }: { data: DataItem }) => <VersionContent data={data.currentVersion} />
     },
     {
       label: t('目标版本'),
       field: 'new_version',
+      minWidth: 200,
       render: ({ data }: { data: DataItem }) => <VersionContent data={data.targetVersion} />
     },
     {
-      label: t('新从库主机'),
+      label: t('新主从主机'),
       field: 'ip',
-      render: ({ cell }: { cell: string }) => <span>{cell || '--'}</span>,
+      render: ({ data }: { data: DataItem }) => data.ip.map(item => <p>{item}</p>)
+    },
+    {
+      label: t('新只读主机'),
+      field: 'new_readonly_slaves',
+      render: ({ data }: { data: DataItem }) => data.new_readonly_slaves.length ? data.new_readonly_slaves.map(item => <p>{item}</p>) : '--'
     }
   ];
 
   const list: DataItem[] = [];
-  const infosData = props.ticketDetails?.details?.infos || [];
-  const clusterIds = props.ticketDetails?.details?.clusters || {};
+  const infosData = props.ticketDetails.details.infos;
+  const clusterIds = props.ticketDetails.details.clusters;
   infosData.forEach((item) => {
     item.cluster_ids.forEach((id) => {
       const clusterData = clusterIds[id];
+      const readonlySlaves = item.read_only_slaves || [];
+      const readonlySlaveMap = readonlySlaves.reduce<{
+        old: string[],
+        new: string[]
+      }>((prevMap, slaveItem) => Object.assign({}, prevMap, {
+          old: prevMap.old.concat([slaveItem.old_slave.ip]),
+          new: prevMap.new.concat([slaveItem.new_slave.ip])
+        }), {
+        old: [],
+        new: []
+      })
       list.push(Object.assign({
-        cluster_id: id,
+        // cluster_id: id,
         immute_domain: clusterData.immute_domain,
         name: clusterData.name,
         currentVersion: {
@@ -133,7 +178,10 @@
           charSet: item.display_info.charset,
           moduleName: item.display_info.target_module_name,
         },
-        ip: [item.new_master.ip, item.new_slave.ip].join(',')
+        ip: [item.new_master.ip, item.new_slave.ip],
+        old_master_slave: item.display_info.old_master_slave || [],
+        old_readonly_slaves: readonlySlaveMap.old,
+        new_readonly_slaves: readonlySlaveMap.new
       }));
     });
   });
@@ -165,4 +213,31 @@
 
 <style lang="less" scoped>
   @import '@views/tickets/common/styles/DetailsTable.less';
+
+  :deep(.old-master-slave-host) {
+    .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 {
+        color: @primary-color;
+        background-color: #cad7eb;
+      }
+
+      .host-tag-slave {
+        color: #2dcb56;
+        background-color: #c8e5cd;
+      }
+    }
+  }
 </style>