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

---
 .../components/tendb-ha-host/Index.vue        |  3 +
 .../components/tendb-ha-host/table/Index.vue  | 31 +++++++-
 dbm-ui/frontend/src/locales/zh-cn.json        |  6 ++
 dbm-ui/frontend/src/types/auto-imports.d.ts   |  1 -
 .../pages/page1/components/RenderData/Row.vue |  1 +
 .../edit-field/InstanceWithSelector.vue       | 36 +++++++--
 .../mysql/proxy-replace/pages/page1/Index.vue | 33 ++++----
 .../ReplaceHost/components/RenderData/Row.vue | 76 +++++++++++++++---
 .../components/RenderData/Row.vue             | 78 ++++++++++++++++---
 .../components/common/RenderTargetProxy.vue   |  4 +-
 .../page1/components/render-row/Index.vue     | 20 +----
 11 files changed, 217 insertions(+), 72 deletions(-)

diff --git a/dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/Index.vue
index 264eac830a..81a45cdf13 100644
--- a/dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/Index.vue
+++ b/dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/Index.vue
@@ -67,6 +67,7 @@
               :get-table-list="getTableList"
               :is-remote-pagination="isRemotePagination"
               :last-values="lastValues"
+              :multiple="multiple"
               :role-filter-list="roleFilterList"
               :status-filter="statusFilter"
               :table-setting="tableSetting"
@@ -104,6 +105,7 @@
   interface Props {
     lastValues: InstanceSelectorValues<T>;
     tableSetting: TableSetting;
+    multiple?: NonNullable<TableConfigType['multiple']>;
     firsrColumn?: TableConfigType['firsrColumn'];
     roleFilterList?: TableConfigType['roleFilterList'];
     isRemotePagination?: TableConfigType['isRemotePagination'];
@@ -128,6 +130,7 @@
     topoAlertContent: undefined,
     roleFilterList: undefined,
     filterClusterId: undefined,
+    multiple: true,
   });
   const emits = defineEmits<Emits>();
 
diff --git a/dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/table/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/table/Index.vue
index 0a94b9f838..df1532f0df 100644
--- a/dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/table/Index.vue
+++ b/dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/table/Index.vue
@@ -30,7 +30,8 @@
         style="margin-top: 12px"
         @page-limit-change="handeChangeLimit"
         @page-value-change="handleChangePage"
-        @refresh="fetchResources" />
+        @refresh="fetchResources"
+        @row-click.stop.prevent="handleRowClick" />
     </BkLoading>
   </div>
 </template>
@@ -60,6 +61,7 @@
     lastValues: InstanceSelectorValues<T>,
     tableSetting: TableSetting,
     clusterId?: number,
+    multiple?: TableConfigType['multiple'],
     isRemotePagination?: TableConfigType['isRemotePagination'],
     firsrColumn?: TableConfigType['firsrColumn'],
     // eslint-disable-next-line vue/no-unused-properties
@@ -128,7 +130,7 @@
     {
       width: 60,
       fixed: 'left',
-      label: () => (
+      label: () => props.multiple && (
         <bk-checkbox
           label={true}
           model-value={isSelectedAll.value}
@@ -147,13 +149,20 @@
             </bk-popover>
           );
         }
-        return (
+        return props.multiple ? (
           <bk-checkbox
             style="vertical-align: middle;"
             label={true}
             model-value={Boolean(checkedMap.value[data[firstColumnFieldId.value]])}
             onChange={(value: boolean) => handleTableSelectOne(value, data)}
           />
+        ) : (
+          <bk-radio
+            style="vertical-align: middle;"
+            model-value={Boolean(checkedMap.value[data[firstColumnFieldId.value]])}
+            label={true}
+            onChange={(value: boolean) => handleTableSelectOne(value, data)}
+          />
         );
       },
     },
@@ -276,8 +285,22 @@
     }
   };
 
+  const handleRowClick = (row: unknown, data: T) => {
+    if (props.disabledRowConfig && props.disabledRowConfig.handler(data)) {
+      return;
+    }
+
+    const isChecked = !!checkedMap.value[data[firstColumnFieldId.value]];
+    if (isChecked && !props.multiple) {
+      // 单选不允许取消
+      return;
+    }
+
+    handleTableSelectOne(!isChecked, data);
+  };
+
   const handleTableSelectOne = (checked: boolean, data: T) => {
-    const lastCheckMap = { ...checkedMap.value };
+    const lastCheckMap = props.multiple ? { ...checkedMap.value } : {};
     if (checked) {
       lastCheckMap[data[firstColumnFieldId.value]] = formatValue(data);
     } else {
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index 5fc550b117..f1b555ab3d 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3529,5 +3529,11 @@
   "不允许输入系统库和特殊库，如mysql、sys 等": "不允许输入系统库和特殊库，如mysql、sys 等",
   "支持 %（指代任意长度字符串）, ?（指代单个字符串）, *（指代全部）三个通配符": "支持 %（指代任意长度字符串）, ?（指代单个字符串）, *（指代全部）三个通配符",
   "包含通配符时, 每一单元格只允许输入单个对象。% ? 不能独立使用， * 只能单独使用": "包含通配符时, 每一单元格只允许输入单个对象。% ? 不能独立使用， * 只能单独使用",
+  "选择实例": "选择实例",
+  "格式不正确": "格式不正确",
+  "ip不存在": "ip不存在",
+  "请输入或选择主机": "请输入或选择主机",
+  "实例/IP重复": "实例/IP重复",
+  "同主机关联的其他集群，勾选后一同克隆": "同主机关联的其他集群，勾选后一同克隆",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
\ No newline at end of file
diff --git a/dbm-ui/frontend/src/types/auto-imports.d.ts b/dbm-ui/frontend/src/types/auto-imports.d.ts
index 6bc2ae2a45..79be9ca2a4 100644
--- a/dbm-ui/frontend/src/types/auto-imports.d.ts
+++ b/dbm-ui/frontend/src/types/auto-imports.d.ts
@@ -3,7 +3,6 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
-// biome-ignore lint: disable
 export {}
 declare global {
   const EffectScope: (typeof import('vue'))['EffectScope'];
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/checksum/pages/page1/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/checksum/pages/page1/components/RenderData/Row.vue
index d087f3f32d..a86d482a5c 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/checksum/pages/page1/components/RenderData/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/checksum/pages/page1/components/RenderData/Row.vue
@@ -124,6 +124,7 @@
       id: 0,
     },
     version: '',
+    is_stand_by: false,
   });
 
   export type IDataRowBatchKey = keyof Pick<IDataRow, 'dbPatterns' | 'ignoreDbs' | 'tablePatterns' | 'ignoreTables'>;
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/InstanceWithSelector.vue b/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/InstanceWithSelector.vue
index 4d5313afda..cfbd672f98 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/InstanceWithSelector.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/InstanceWithSelector.vue
@@ -49,13 +49,14 @@
     @change="handleInstancesChange" />
 </template>
 <script lang="ts">
+  type InstanceInfo = ServiceReturnType<typeof checkMysqlInstances>[number];
+
   const instanceWithSelectorMemo: { [key: string]: Record<string, boolean> } = {};
 </script>
 <script setup lang="ts">
   import _ from 'lodash';
   import { useI18n } from 'vue-i18n';
 
-  import TendbhaInstanceModel from '@services/model/mysql/tendbha-instance';
   import { checkMysqlInstances } from '@services/source/instances';
 
   import { ClusterTypes } from '@common/const';
@@ -63,6 +64,7 @@
 
   import InstanceSelector, {
     type InstanceSelectorValues,
+    type IValue,
     type PanelListType,
   } from '@components/instance-selector/Index.vue';
   import TableEditInput from '@components/render-table/columns/input/index.vue';
@@ -81,6 +83,11 @@
     db_module_name?: string;
     master_domain?: string;
     cluster_type?: string;
+    related_clusters?: InstanceInfo['related_clusters'];
+    related_instances?: {
+      cluster_id: number;
+      instance_address: string;
+    }[];
   }
 
   interface Props {
@@ -97,7 +104,7 @@
   }
 
   interface Exposes {
-    getValue: () => Promise<InstanceBasicInfo>;
+    getValue: () => Promise<Required<InstanceBasicInfo>>;
     focus: () => void;
   }
 
@@ -119,9 +126,10 @@
   const isFocused = ref(false);
   const isShowInstanceSelecotr = ref(false);
   const localValue = ref('');
-  const selectedIntances = shallowRef<InstanceSelectorValues<TendbhaInstanceModel>>({ [ClusterTypes.TENDBHA]: [] });
+  const selectedIntances = shallowRef<InstanceSelectorValues<IValue>>({ [ClusterTypes.TENDBHA]: [] });
 
   const instanceKey = `instance_${random()}`;
+  let modelValueLocal: InstanceBasicInfo;
   instanceWithSelectorMemo[instanceKey] = {};
 
   const rules = [
@@ -155,10 +163,17 @@
           instanceWithSelectorMemo[instanceKey][instanceData.instance_address] = true;
           if (
             !modelValue.value?.instance_address ||
-            modelValue.value.instance_address !== instanceData.instance_address
+            modelValueLocal?.instance_address !== instanceData.instance_address
           ) {
-            modelValue.value = instanceData;
-            emits('instanceChange', instanceData);
+            modelValueLocal = _.cloneDeep({
+              ...instanceData,
+              related_instances: data.map((item) => ({
+                cluster_id: item.cluster_id,
+                instance_address: item.instance_address,
+              })),
+            });
+            modelValue.value = modelValueLocal;
+            emits('instanceChange', modelValueLocal as Required<InstanceBasicInfo>);
           }
           return true;
         }),
@@ -207,6 +222,11 @@
       } else {
         localValue.value = `${modelValue.value.bk_cloud_id}:${modelValue.value.ip}:${modelValue.value.port}`;
       }
+      if (modelValueLocal?.ip !== modelValue.value?.ip) {
+        setTimeout(() => {
+          inputRef.value.getValue();
+        });
+      }
     },
     {
       immediate: true,
@@ -218,9 +238,9 @@
   };
 
   // 批量选择
-  const handleInstancesChange = (selected: InstanceSelectorValues<TendbhaInstanceModel>) => {
+  const handleInstancesChange = (selected: InstanceSelectorValues<IValue>) => {
     selectedIntances.value = selected;
-    const list = selected[ClusterTypes.TENDBHA];
+    const list = _.flatMap(Object.values(selected));
     if (props.type === 'instance') {
       localValue.value = list[0].instance_address;
     } else if (props.type === 'ip') {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/Index.vue
index 1595394fd3..472b77bcb6 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/Index.vue
@@ -127,17 +127,18 @@
 
   const handleSubmit = () => {
     isSubmitting.value = true;
-    tableRef.value!.getValue().then((infos: MySQLProxySwitchDetails['infos']) => {
-      createTicket({
-        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
-        ticket_type: TicketTypes.MYSQL_PROXY_SWITCH,
-        remark: '',
-        details: {
-          infos,
-          is_safe: isSafe.value,
-        },
-      })
-        .then((data) => {
+    tableRef
+      .value!.getValue()
+      .then((infos: MySQLProxySwitchDetails['infos']) =>
+        createTicket({
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          ticket_type: TicketTypes.MYSQL_PROXY_SWITCH,
+          remark: '',
+          details: {
+            infos,
+            is_safe: isSafe.value,
+          },
+        }).then((data) => {
           window.changeConfirm = false;
           router.push({
             name: 'MySQLProxyReplace',
@@ -148,11 +149,11 @@
               ticketId: data.id,
             },
           });
-        })
-        .finally(() => {
-          isSubmitting.value = false;
-        });
-    });
+        }),
+      )
+      .finally(() => {
+        isSubmitting.value = false;
+      });
   };
 
   const handleReset = () => {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/components/RenderData/Row.vue
index f7330a8286..466867c991 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/components/RenderData/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/components/RenderData/Row.vue
@@ -16,8 +16,11 @@
     <FixedColumn fixed="left">
       <RenderOriginalProxyHost
         ref="originRef"
-        v-model="localIp"
-        @input-finish="handleOriginProxyInputFinish" />
+        :cluster-types="['TendbhaHost']"
+        :model-value="data.originProxy"
+        :tab-list-config="tabListConfig"
+        type="ip"
+        @instance-change="handleOriginProxyInputFinish" />
     </FixedColumn>
     <td style="padding: 0">
       <RenderRelatedInstances
@@ -45,7 +48,7 @@
     rowKey: string;
     originProxy: {
       ip: string;
-      bk_cloud_id: number | null;
+      bk_cloud_id: number;
       bk_host_id: number;
       bk_biz_id: number;
       port: number;
@@ -55,7 +58,7 @@
       instance: string;
     }[];
     targetProxy: {
-      bk_cloud_id: number | null;
+      bk_cloud_id: number;
       bk_host_id: number;
       bk_biz_id: number;
       cluster_id: number;
@@ -79,14 +82,14 @@
       cluster_ids: number[];
       origin_proxy: {
         ip: string;
-        bk_cloud_id: number | null;
+        bk_cloud_id: number;
         bk_host_id: number;
         bk_biz_id: number;
         port?: number;
       };
       target_proxy: {
         ip: string;
-        bk_cloud_id: number | null;
+        bk_cloud_id: number;
         bk_host_id: number;
         bk_biz_id: number;
         port?: number;
@@ -101,7 +104,7 @@
       data.originProxy ||
       ({
         ip: '',
-        bk_cloud_id: null,
+        bk_cloud_id: 0,
         bk_host_id: 0,
         bk_biz_id: 0,
         port: 0,
@@ -111,7 +114,7 @@
       data.targetProxy ||
       ({
         ip: '',
-        bk_cloud_id: null,
+        bk_cloud_id: 0,
         bk_host_id: 0,
         bk_biz_id: 0,
         port: 0,
@@ -120,18 +123,22 @@
 </script>
 <script setup lang="ts">
   import { ref } from 'vue';
+  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 RenderOriginalProxyHost from '@views/db-manage/mysql/common/edit-field/InstanceWithSelector.vue';
+
   import RenderTargetProxy from '../../../common/RenderTargetProxy.vue';
-  import RenderOriginalProxyHost from '../RenderOriginalProxyHost.vue';
   import RenderRelatedInstances from '../RenderRelatedInstances.vue';
 
   const props = defineProps<Props>();
 
   const emits = defineEmits<Emits>();
 
+  const { t } = useI18n();
+
   const originRef = ref<InstanceType<typeof RenderOriginalProxyHost>>();
   const relatedInstancesRef = ref<InstanceType<typeof RenderRelatedInstances>>();
   const targetRef = ref<InstanceType<typeof RenderTargetProxy>>();
@@ -139,6 +146,35 @@
   const localIp = ref('');
   const localRelatedInstances = ref<IDataRow['relatedInstances']>([]);
 
+  const tabListConfig = {
+    TendbhaHost: [
+      {
+        id: 'TendbhaHost',
+        name: t('目标Proxy主机'),
+        tableConfig: {
+          firsrColumn: {
+            label: t('Proxy 主机'),
+            field: 'ip',
+            role: 'proxy',
+          },
+          multiple: false,
+        },
+      },
+      {
+        id: 'manualInput',
+        name: t('手动输入'),
+        tableConfig: {
+          firsrColumn: {
+            label: t('Proxy 主机'),
+            field: 'ip',
+            role: 'proxy',
+          },
+          multiple: false,
+        },
+      },
+    ],
+  } as any;
+
   watch(
     () => props.data,
     () => {
@@ -149,8 +185,18 @@
     },
   );
 
-  const handleOriginProxyInputFinish = (value: IDataRow['relatedInstances']) => {
-    localRelatedInstances.value = value;
+  const handleOriginProxyInputFinish = (info: {
+    ip: string;
+    related_instances: {
+      cluster_id: number;
+      instance_address: string;
+    }[];
+  }) => {
+    localIp.value = info.ip;
+    localRelatedInstances.value = info.related_instances.map((item) => ({
+      cluster_id: item.cluster_id,
+      instance: item.instance_address,
+    }));
   };
 
   const handleAppend = () => {
@@ -171,7 +217,13 @@
         relatedInstancesRef.value!.getValue(),
         targetRef.value!.getValue(),
       ]).then(([originData, relatedInstancesData, targetData]) => ({
-        ...originData,
+        origin_proxy: {
+          ip: originData.ip,
+          bk_cloud_id: originData.bk_cloud_id,
+          bk_host_id: originData.bk_host_id,
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          port: originData.port,
+        },
         ...relatedInstancesData,
         ...targetData,
       }));
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceInstance/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceInstance/components/RenderData/Row.vue
index 3f6c693ff7..2335dacaed 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceInstance/components/RenderData/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceInstance/components/RenderData/Row.vue
@@ -16,8 +16,9 @@
     <FixedColumn fixed="left">
       <RenderOriginalProxyInst
         ref="originRef"
-        v-model="localInstanceAddress"
-        @input-finish="handleOriginProxyInputFinish" />
+        :model-value="data.originProxy"
+        :tab-list-config="tabListConfig"
+        @instance-change="handleOriginProxyInputFinish" />
     </FixedColumn>
     <td style="padding: 0">
       <RenderRelatedClusters
@@ -46,7 +47,7 @@
     originProxy: {
       cluster_id: number;
       ip: string;
-      bk_cloud_id: number | null;
+      bk_cloud_id: number;
       bk_host_id: number;
       bk_biz_id: number;
       port: number;
@@ -58,7 +59,7 @@
     }[];
     targetProxy: {
       ip: string;
-      bk_cloud_id: number | null;
+      bk_cloud_id: number;
       bk_host_id: number;
       bk_biz_id: number;
     };
@@ -79,14 +80,14 @@
       cluster_ids: number[];
       origin_proxy: {
         ip: string;
-        bk_cloud_id: number | null;
+        bk_cloud_id: number;
         bk_host_id: number;
         bk_biz_id: number;
         port?: number;
       };
       target_proxy: {
         ip: string;
-        bk_cloud_id: number | null;
+        bk_cloud_id: number;
         bk_host_id: number;
         bk_biz_id: number;
         port?: number;
@@ -101,7 +102,7 @@
       data.originProxy ||
       ({
         ip: '',
-        bk_cloud_id: null,
+        bk_cloud_id: 0,
         bk_host_id: 0,
         bk_biz_id: 0,
         port: 0,
@@ -112,7 +113,7 @@
       data.targetProxy ||
       ({
         ip: '',
-        bk_cloud_id: null,
+        bk_cloud_id: 0,
         bk_host_id: 0,
         bk_biz_id: 0,
         port: 0,
@@ -121,18 +122,24 @@
 </script>
 <script setup lang="ts">
   import { ref } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import { ClusterTypes } from '@common/const';
 
   import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
   import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
 
+  import RenderOriginalProxyInst from '@views/db-manage/mysql/common/edit-field/InstanceWithSelector.vue';
+
   import RenderTargetProxy from '../../../common/RenderTargetProxy.vue';
-  import RenderOriginalProxyInst from '../RenderOriginalProxyInst.vue';
   import RenderRelatedClusters from '../RenderRelatedClusters.vue';
 
   const props = defineProps<Props>();
 
   const emits = defineEmits<Emits>();
 
+  const { t } = useI18n();
+
   const originRef = ref<InstanceType<typeof RenderOriginalProxyInst>>();
   const relatedClustersRef = ref<InstanceType<typeof RenderRelatedClusters>>();
   const targetRef = ref<InstanceType<typeof RenderTargetProxy>>();
@@ -150,8 +157,47 @@
     },
   );
 
-  const handleOriginProxyInputFinish = (value: IDataRow['relatedClusters']) => {
-    localRelatedClusters.value = value;
+  const tabListConfig = {
+    [ClusterTypes.TENDBHA]: [
+      {
+        id: ClusterTypes.TENDBHA,
+        name: t('目标实例'),
+        tableConfig: {
+          firsrColumn: {
+            label: t('Proxy 实例'),
+            field: 'instance_address',
+            role: 'proxy',
+          },
+          multiple: false,
+        },
+      },
+      {
+        id: 'manualInput',
+        name: t('手动输入'),
+        tableConfig: {
+          firsrColumn: {
+            label: t('Proxy 实例'),
+            field: 'instance_address',
+            role: 'proxy',
+          },
+          multiple: false,
+        },
+      },
+    ],
+  } as any;
+
+  const handleOriginProxyInputFinish = (info: {
+    instance_address: string;
+    related_clusters: {
+      id: number;
+      master_domain: string;
+    }[];
+  }) => {
+    localInstanceAddress.value = info.instance_address;
+    localRelatedClusters.value = info.related_clusters.map((item) => ({
+      cluster_id: item.id,
+      domain: item.master_domain,
+    }));
   };
 
   const handleAppend = () => {
@@ -172,7 +218,15 @@
         relatedClustersRef.value!.getValue(),
         targetRef.value!.getValue(),
       ]).then(([originData, relatedClustersData, targetData]) => ({
-        ...originData,
+        origin_proxy: {
+          cluster_id: originData.cluster_id,
+          ip: originData.ip,
+          bk_cloud_id: originData.bk_cloud_id,
+          bk_host_id: originData.bk_host_id,
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          port: originData.port,
+          instance_address: originData.instance_address,
+        },
         ...relatedClustersData,
         ...targetData,
       }));
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/common/RenderTargetProxy.vue b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/common/RenderTargetProxy.vue
index c3cc95dc40..aa92f88f5a 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/common/RenderTargetProxy.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/common/RenderTargetProxy.vue
@@ -32,10 +32,10 @@
   import TableEditInput from '@components/render-table/columns/input/index.vue';
 
   interface Props {
-    cloudId: number | null;
+    cloudId: number;
     modelValue: {
       ip: string;
-      bk_cloud_id: number | null;
+      bk_cloud_id: number;
       bk_host_id: number;
       bk_biz_id: number;
     };
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/Index.vue
index 8f4d5ccbd9..1c07f988fc 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/Index.vue
@@ -17,8 +17,8 @@
       <RenderCluster
         ref="clusterRef"
         :model-value="localClusterData"
-        @change="handleClusterChange"
-        @input-create="handleCreate" />
+        tabs="both"
+        @cluster-change="handleClusterChange" />
     </FixedColumn>
     <template v-if="showHostColumn">
       <td style="padding: 0">
@@ -168,12 +168,12 @@
   import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
   import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
 
+  import RenderCluster from '@views/db-manage/mysql/common/edit-field/ClusterNameWithSelector.vue';
   import RenderDbName from '@views/db-manage/mysql/common/edit-field/DbName.vue';
   import RenderTableName from '@views/db-manage/mysql/common/edit-field/TableName.vue';
 
   import RenderMode, { BackupTypes } from './components/render-mode/Index.vue';
   import RenderBackup, { BackupSources } from './components/RenderBackup.vue';
-  import RenderCluster from './components/RenderCluster.vue';
   import RenderClusterInputSelect from './components/RenderClusterInputSelect.vue';
   import RenderHostInputSelect from './components/RenderHostInputSelect.vue';
   import RenderHostSource from './components/RenderHostSource.vue';
@@ -224,20 +224,6 @@
     localBackupSource.value = value;
   };
 
-  const handleCreate = (list: Array<string>) => {
-    emits(
-      'add',
-      list.map((domain) =>
-        createRowData({
-          clusterData: {
-            id: 0,
-            domain,
-          },
-        }),
-      ),
-    );
-  };
-
   const handleAppend = () => {
     emits('add', [createRowData()]);
   };