From ecdb39202ea37824a1a2c7c6c70a26ddec1662bd Mon Sep 17 00:00:00 2001
From: chenwenchang <479999519@qq.com>
Date: Tue, 10 Dec 2024 16:41:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E5=B7=A5=E5=85=B7=E7=AE=B1?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=B5=84=E6=BA=90=E6=B1=A0=E5=8D=8F=E8=AE=AE?=
 =?UTF-8?q?=E5=8F=98=E6=9B=B4=20#8076?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/editable-table/Index.vue   |   3 +-
 .../components/editable-table/edit/Block.vue  |   2 +-
 .../components/editable-table/edit/Input.vue  |   7 +-
 .../components/editable-table/edit/Select.vue |  27 +-
 .../components/editable-table/edit/Text.vue   |  10 +-
 .../components/instance-selector/Index.vue    |  16 +-
 .../columns/spec-display/Panel.vue            |  16 +-
 .../resource-host-selector/Index.vue          |  24 +-
 dbm-ui/frontend/src/demo/Index.vue            |   2 +-
 dbm-ui/frontend/src/hooks/index.ts            |   1 +
 dbm-ui/frontend/src/hooks/useCreateTicket.tsx |  55 +-
 dbm-ui/frontend/src/locales/zh-cn.json        |  30 +-
 .../services/model/db-resource/DbResource.ts  |   2 +
 .../model/mysql/remote-pair-instance.ts       |   8 +
 dbm-ui/frontend/src/services/source/dbbase.ts |   2 +
 .../frontend/src/services/source/ticket.tsx   |  15 +
 dbm-ui/frontend/src/services/types/common.ts  |   5 +
 .../src/services/types/db/clusterListSpec.ts  |   2 +
 .../src/services/types/instanceInfos.ts       |  18 +-
 .../frontend/src/utils/createToolboxRoute.ts  |  19 +
 dbm-ui/frontend/src/utils/index.ts            |   1 +
 .../cluster-capacity-usage-rate/Index.vue     |   2 +-
 .../common/create-ticket-success/Index.vue    | 219 +++++
 .../column/hybrid-host-column/Index.vue       | 230 +++++
 .../column/multiple-host-column/Index.vue     | 233 +++++
 .../{ => column}/operation-column/Index.vue   |   0
 .../column/single-host-column/Index.vue       | 152 ++++
 .../form-item/backup-source/Index.vue         |  28 +
 .../form-item/ignore-biz/Index.vue            |  31 +
 .../form-item/ticket-remark/Index.vue         |  18 +
 .../db-manage/doris/common/shrink/Index.vue   |   4 +-
 .../elastic-search/common/shrink/Index.vue    |   6 +-
 .../db-manage/hdfs/common/shrink/Index.vue    |   7 +-
 .../db-manage/kafka/common/shrink/Index.vue   |   4 +-
 .../mysql/MYSQL_ADD_SLAVE/Create.vue          | 213 +++++
 .../db-manage/mysql/MYSQL_ADD_SLAVE/Index.vue |  32 +
 .../mysql/MYSQL_MIGRATE_CLUSTER/Create.vue    | 175 ++++
 .../mysql/MYSQL_MIGRATE_CLUSTER/Index.vue     |  32 +
 .../components/ClusterColumn.vue              | 147 +++
 .../components/ClusterMigrateTable.vue        | 195 ++++
 .../components/HostColumnGroup.vue            | 241 +++++
 .../components/HostMigrateTable.vue           | 222 +++++
 .../mysql/MYSQL_MIGRATE_CLUSTER/types.ts      |   8 +
 .../mysql/MYSQL_PROXY_ADD/Create.vue          | 206 +++++
 .../db-manage/mysql/MYSQL_PROXY_ADD/Index.vue |  32 +
 .../mysql/MYSQL_PROXY_SWITCH/Create.vue       | 170 ++++
 .../mysql/MYSQL_PROXY_SWITCH/Index.vue        |  32 +
 .../components/HostColumnGroup.vue            | 246 +++++
 .../components/HostTable.vue                  | 209 +++++
 .../components/InstanceColumnGroup.vue        | 198 ++++
 .../components/InstanceTable.vue              | 198 ++++
 .../mysql/MYSQL_PROXY_SWITCH/types.ts         |   8 +
 .../mysql/MYSQL_RESTORE_SLAVE/Create.vue      |  82 ++
 .../mysql/MYSQL_RESTORE_SLAVE/Index.vue       |  32 +
 .../components/local-restore/Index.vue        | 199 ++++
 .../local-restore/SlaveInstanceColumn.vue     | 184 ++++
 .../components/restore/Index.vue              | 216 +++++
 .../restore/SlaveHostColumnGroup.vue          | 202 +++++
 .../WithRelatedClustersColumn.vue             | 202 +++++
 .../src/views/db-manage/mysql/routes.ts       |  51 +-
 .../src/views/db-manage/mysql/toolbox-menu.ts |  12 +-
 .../db-manage/pulsar/common/shrink/Index.vue  |   7 +-
 .../redis/REDIS_CLUSTER_CUTOFF/Create.vue     | 305 +++++++
 .../redis/REDIS_CLUSTER_CUTOFF/Index.vue      |  32 +
 .../components/HostColumn.vue                 | 179 ++++
 .../components/SpecColumn.vue                 |  64 ++
 .../components/instance-selector/Index.vue    | 172 ++++
 .../instance-selector/common/tableSettings.ts |  67 ++
 .../instance-selector/common/utils.ts         |  19 +
 .../instance-selector/components/PanelTab.vue |  82 ++
 .../components/RenderManualHost.vue           | 249 +++++
 .../components/RenderManualInput.vue          | 333 +++++++
 .../components/RenderRedis.vue                | 306 +++++++
 .../components/RenderRedisHost.vue            | 509 +++++++++++
 .../preview-result/CollapseMini.vue           |  96 ++
 .../components/preview-result/Index.vue       | 212 +++++
 .../redis/REDIS_PROXY_SCALE_DOWN/Create.vue   | 276 ++++++
 .../redis/REDIS_PROXY_SCALE_DOWN/Index.vue    |  32 +
 .../components/ClusterColumn.vue              | 185 ++++
 .../redis/REDIS_SCALE_UPDOWN/Create.vue       | 288 ++++++
 .../redis/REDIS_SCALE_UPDOWN/Index.vue        |  32 +
 .../components/ClusterColumn.vue              | 202 +++++
 .../components/CurrentCapacityColumn.vue      | 133 +++
 .../components/RedisVersionColumn.vue         | 101 +++
 .../ClusterDeployPlan.vue                     | 856 ++++++++++++++++++
 .../target-capacity-column/Index.vue          | 301 ++++++
 .../src/views/db-manage/redis/routes.ts       |  33 +-
 .../src/views/db-manage/redis/toolbox-menu.ts |   8 +-
 .../components/components/DeleteNodes.vue     |  14 +-
 .../components/detail/components/NodeList.vue |  18 +-
 .../sqlserver/SQLSERVER_ADD_SLAVE/Create.vue  | 189 ++++
 .../sqlserver/SQLSERVER_ADD_SLAVE/Index.vue   |  32 +
 .../components/ClusterColumn.vue              | 162 ++++
 .../SQLSERVER_RESTORE_SLAVE/Create.vue        |  82 ++
 .../SQLSERVER_RESTORE_SLAVE/Index.vue         |  32 +
 .../components/local-restore/Index.vue        | 199 ++++
 .../local-restore/SlaveInstanceColumn.vue     | 185 ++++
 .../components/restore/Index.vue              | 216 +++++
 .../restore/SlaveHostColumnGroup.vue          | 203 +++++
 .../common/edit-table-column/HaCluster.vue    | 147 +++
 .../src/views/db-manage/sqlserver/routes.ts   |  40 +-
 .../views/db-manage/sqlserver/toolbox-menu.ts |   6 +-
 .../TENDBCLUSTER_MIGRATE_CLUSTER/Create.vue   | 251 +++++
 .../TENDBCLUSTER_MIGRATE_CLUSTER/Index.vue    |  32 +
 .../components/MasterHostColumnGroup.vue      | 188 ++++
 .../components/SlaveHostColumnGroup.vue       | 105 +++
 .../TENDBCLUSTER_RESTORE_SLAVE/Create.vue     |  82 ++
 .../TENDBCLUSTER_RESTORE_SLAVE/Index.vue      |  32 +
 .../components/local-restore/Index.vue        | 199 ++++
 .../local-restore/SlaveInstanceColumn.vue     | 184 ++++
 .../components/restore/Index.vue              | 224 +++++
 .../components/restore/NewSlaveHostColumn.vue | 122 +++
 .../restore/SlaveHostColumnGroup.vue          | 224 +++++
 .../TENDBCLUSTER_SPIDER_MNT_APPLY/Create.vue  | 191 ++++
 .../TENDBCLUSTER_SPIDER_MNT_APPLY/Index.vue   |  32 +
 .../components/ClusterColumn.vue              | 156 ++++
 .../Create.vue                                | 266 ++++++
 .../Index.vue                                 |  32 +
 .../components/ClusterColumn.vue              | 172 ++++
 .../tendb-cluster/common/edit/SelectInput.vue |   8 +-
 .../list/components/list/Index.vue            |   4 +-
 .../views/db-manage/tendb-cluster/routes.ts   |  73 +-
 .../db-manage/tendb-cluster/toolbox-menu.ts   |  10 +-
 123 files changed, 13914 insertions(+), 220 deletions(-)
 create mode 100644 dbm-ui/frontend/src/utils/createToolboxRoute.ts
 create mode 100644 dbm-ui/frontend/src/views/db-manage/common/create-ticket-success/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/hybrid-host-column/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/multiple-host-column/Index.vue
 rename dbm-ui/frontend/src/views/db-manage/common/toolbox-field/{ => column}/operation-column/Index.vue (100%)
 create mode 100644 dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/single-host-column/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/common/toolbox-field/form-item/backup-source/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/common/toolbox-field/form-item/ignore-biz/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/Create.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/Create.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterColumn.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterMigrateTable.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/HostColumnGroup.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/HostMigrateTable.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/types.ts
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_ADD/Create.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_ADD/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/Create.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/HostColumnGroup.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/HostTable.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/InstanceColumnGroup.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/InstanceTable.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/types.ts
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/Create.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/local-restore/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/local-restore/SlaveInstanceColumn.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/restore/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/restore/SlaveHostColumnGroup.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/common/edit-table-column/WithRelatedClustersColumn.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/Create.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/HostColumn.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/SpecColumn.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/common/tableSettings.ts
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/common/utils.ts
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/PanelTab.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderManualHost.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderManualInput.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderRedis.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderRedisHost.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/preview-result/CollapseMini.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/preview-result/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_PROXY_SCALE_DOWN/Create.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_PROXY_SCALE_DOWN/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_PROXY_SCALE_DOWN/components/ClusterColumn.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/Create.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/ClusterColumn.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/CurrentCapacityColumn.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/RedisVersionColumn.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/target-capacity-column/ClusterDeployPlan.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/target-capacity-column/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_ADD_SLAVE/Create.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_ADD_SLAVE/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_ADD_SLAVE/components/ClusterColumn.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/Create.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/local-restore/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/local-restore/SlaveInstanceColumn.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/restore/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/restore/SlaveHostColumnGroup.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/sqlserver/common/edit-table-column/HaCluster.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/Create.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/components/MasterHostColumnGroup.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/components/SlaveHostColumnGroup.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/Create.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/local-restore/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/local-restore/SlaveInstanceColumn.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/restore/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/restore/NewSlaveHostColumn.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/restore/SlaveHostColumnGroup.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_MNT_APPLY/Create.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_MNT_APPLY/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_MNT_APPLY/components/ClusterColumn.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_REDUCE_NODES/Create.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_REDUCE_NODES/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_REDUCE_NODES/components/ClusterColumn.vue

diff --git a/dbm-ui/frontend/src/components/editable-table/Index.vue b/dbm-ui/frontend/src/components/editable-table/Index.vue
index f443a99719..da5d0f354e 100644
--- a/dbm-ui/frontend/src/components/editable-table/Index.vue
+++ b/dbm-ui/frontend/src/components/editable-table/Index.vue
@@ -67,6 +67,7 @@
   import Input from './edit/Input.vue';
   import Select from './edit/Select.vue';
   import TagInput from './edit/TagInput.vue';
+  import Text from './edit/Text.vue';
   import Textarea from './edit/Textarea.vue';
   import TimePicker from './edit/TimePicker.vue';
   import useResize from './hooks/use-resize';
@@ -112,7 +113,7 @@
     } & Expose
   > = Symbol.for('bk-editable-table');
 
-  export { Block, Column, DatePicker, Input, Row, Select, TagInput, Textarea, TimePicker, useColumn, useTable };
+  export { Block, Column, DatePicker, Input, Row, Select, TagInput, Text, Textarea, TimePicker, useColumn, useTable };
 </script>
 <script setup lang="ts">
   const props = defineProps<Props>();
diff --git a/dbm-ui/frontend/src/components/editable-table/edit/Block.vue b/dbm-ui/frontend/src/components/editable-table/edit/Block.vue
index 672f5b3a8d..dde5e4d4fd 100644
--- a/dbm-ui/frontend/src/components/editable-table/edit/Block.vue
+++ b/dbm-ui/frontend/src/components/editable-table/edit/Block.vue
@@ -57,7 +57,7 @@
 
   const contentRef = useTemplateRef('content');
 
-  const isShowPlacehoder = ref(false);
+  const isShowPlacehoder = ref(true);
 
   watch(modelValue, () => {
     columnContext?.validate('change');
diff --git a/dbm-ui/frontend/src/components/editable-table/edit/Input.vue b/dbm-ui/frontend/src/components/editable-table/edit/Input.vue
index 106ab7969d..30c10f804e 100644
--- a/dbm-ui/frontend/src/components/editable-table/edit/Input.vue
+++ b/dbm-ui/frontend/src/components/editable-table/edit/Input.vue
@@ -40,8 +40,11 @@
   }
 
   const props = defineProps<Props>();
+
   const emits = defineEmits<Emits>();
 
+  const modelValue = defineModel<string>();
+
   const slots = defineSlots<{
     prepend?: () => VNode;
     default?: () => VNode;
@@ -49,11 +52,8 @@
   }>();
 
   const attrs = useAttrs();
-
   const columnContext = useColumn();
 
-  const modelValue = defineModel<string>();
-
   watch(modelValue, () => {
     columnContext?.validate('change');
   });
@@ -61,6 +61,7 @@
   const handleChange = (value: string) => {
     emits('change', value);
   };
+
   const handleBlur = () => {
     columnContext?.blur();
     columnContext?.validate('blur');
diff --git a/dbm-ui/frontend/src/components/editable-table/edit/Select.vue b/dbm-ui/frontend/src/components/editable-table/edit/Select.vue
index 33725997db..91b067ab40 100644
--- a/dbm-ui/frontend/src/components/editable-table/edit/Select.vue
+++ b/dbm-ui/frontend/src/components/editable-table/edit/Select.vue
@@ -4,8 +4,23 @@
     class="bk-editable-select"
     v-bind="{ ...attrs, ...props }"
     @blur="handleBlur"
+    @change="handleChange"
     @focus="handleFocus">
-    <slot />
+    <template
+      v-if="slots.option"
+      #optionRender="{ item, index }">
+      <slot
+        :index="index"
+        :item="item"
+        name="option" />
+    </template>
+    <template
+      v-if="slots.trigger"
+      #trigger="{ selected }">
+      <slot
+        name="trigger"
+        :selected="selected" />
+    </template>
   </BkSelect>
 </template>
 <script lang="ts">
@@ -25,12 +40,18 @@
   import useColumn from '../useColumn';
 
   const props = defineProps<Props>();
+
   const emits = defineEmits<{
     (e: 'blur'): void;
     (e: 'focus'): void;
     (e: 'change', value: T): void;
   }>();
 
+  const slots = defineSlots<{
+    trigger?: (value: { selected: any[] }) => VNode;
+    option?: (value: { item: Record<string, any>; index: number }) => VNode;
+  }>();
+
   const attrs = useAttrs();
 
   const columnContext = useColumn();
@@ -41,6 +62,10 @@
     columnContext?.validate('change');
   });
 
+  const handleChange = (value: T) => {
+    emits('change', value);
+  };
+
   const handleBlur = () => {
     columnContext?.blur();
     columnContext?.validate('blur');
diff --git a/dbm-ui/frontend/src/components/editable-table/edit/Text.vue b/dbm-ui/frontend/src/components/editable-table/edit/Text.vue
index 31b85e4bfc..709817a38e 100644
--- a/dbm-ui/frontend/src/components/editable-table/edit/Text.vue
+++ b/dbm-ui/frontend/src/components/editable-table/edit/Text.vue
@@ -33,7 +33,7 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { onBeforeUpdate, ref, useTemplateRef, type VNode, watch } from 'vue';
+  import { ref, useTemplateRef, type VNode, watch } from 'vue';
 
   import useColumn from '../useColumn';
 
@@ -57,7 +57,7 @@
 
   const contentRef = useTemplateRef('content');
 
-  const isShowPlacehoder = ref(false);
+  const isShowPlacehoder = ref(true);
 
   watch(modelValue, () => {
     columnContext?.validate();
@@ -71,8 +71,10 @@
     columnContext?.focus();
   };
 
-  onBeforeUpdate(() => {
-    isShowPlacehoder.value = !contentRef.value?.innerText;
+  onUpdated(() => {
+    nextTick(() => {
+      isShowPlacehoder.value = !contentRef.value?.innerText;
+    });
   });
 </script>
 <style lang="less">
diff --git a/dbm-ui/frontend/src/components/instance-selector/Index.vue b/dbm-ui/frontend/src/components/instance-selector/Index.vue
index 74aa9bb6ec..f0698ea22f 100644
--- a/dbm-ui/frontend/src/components/instance-selector/Index.vue
+++ b/dbm-ui/frontend/src/components/instance-selector/Index.vue
@@ -98,7 +98,7 @@
   import type { InjectionKey, Ref } from 'vue';
 
   import TendbclusterMachineModel from '@services/model/tendbcluster/tendbcluster-machine';
-  import type { ListBase } from '@services/types';
+  import type { HostInfo, ListBase } from '@services/types';
 
   import { t } from '@locales/index';
 
@@ -113,7 +113,7 @@
     create_at: string;
     db_module_id: number;
     db_module_name: string;
-    host_info: any;
+    host_info: HostInfo;
     id: number;
     name: string;
     instance_address: string;
@@ -1000,9 +1000,6 @@
         isInnerChange = false;
         return;
       }
-      if (props.selected) {
-        Object.assign(lastValues, props.selected);
-      }
       if (
         props.clusterTypes.length > 0 &&
         (!panelTabActive.value || !props.clusterTypes.includes(panelTabActive.value as Props['clusterTypes'][number]))
@@ -1016,6 +1013,15 @@
     },
   );
 
+  watch(
+    () => props.selected,
+    () => {
+      if (props.selected) {
+        Object.assign(lastValues, props.selected);
+      }
+    },
+  );
+
   const handleChangePanel = (obj: PanelListItem) => {
     activePanelObj.value = obj;
     if (props.onlyOneType) {
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 61c65f5a33..d3c22ade99 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
@@ -27,16 +27,16 @@
             <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 })
+                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
+              {{ data.mem?.min === data.mem?.max ? data.mem?.min : `(${data.mem?.min}~${data.mem?.max})` }} G
             </div>
           </div>
           <div
@@ -58,13 +58,13 @@
                 </div>
                 <div class="table-row">
                   <div class="row-one">
-                    {{ data.storage_spec[0].mount_point }}
+                    {{ data.storage_spec[0]?.mount_point || '--' }}
                   </div>
                   <div class="row-two">
-                    {{ data.storage_spec[0].size }}
+                    {{ data.storage_spec[0]?.size || '--' }}
                   </div>
                   <div class="row-three">
-                    {{ data.storage_spec[0].type }}
+                    {{ data.storage_spec[0]?.type || '--' }}
                   </div>
                 </div>
               </div>
@@ -77,7 +77,7 @@
               {{ $t('单机 QPS') }}
             </div>
             <div class="item-content">
-              {{ data.qps.min === data.qps.max ? `${data.qps.min}/s` : `${data.qps.min}/s~${data.qps.max}/s` }}
+              {{ data.qps?.min === data.qps?.max ? `${data.qps?.min}/s` : `${data.qps?.min}/s~${data.qps?.max}/s` }}
             </div>
           </div>
         </div>
diff --git a/dbm-ui/frontend/src/components/resource-host-selector/Index.vue b/dbm-ui/frontend/src/components/resource-host-selector/Index.vue
index 28d1ad1171..59c252e70c 100644
--- a/dbm-ui/frontend/src/components/resource-host-selector/Index.vue
+++ b/dbm-ui/frontend/src/components/resource-host-selector/Index.vue
@@ -51,7 +51,7 @@
               <HostAgentStatus :data="data.agent_status" />
             </template>
           </BkTableColumn>
-          <BkTableColumn
+          <!-- <BkTableColumn
             field="bk_cpu"
             :label="t('资源归属')"
             :min-width="300">
@@ -60,7 +60,7 @@
                 v-if="false"
                 :data="data" />
             </template>
-          </BkTableColumn>
+          </BkTableColumn> -->
           <BkTableColumn
             field="rack_id"
             :label="t('机架')"
@@ -159,15 +159,22 @@
 
   import DiskPopInfo from '@components/disk-pop-info/DiskPopInfo.vue';
   import HostAgentStatus from '@components/host-agent-status/Index.vue';
-  import ResourceHostOwner from '@components/resource-host-owner/Index.vue';
 
+  // import ResourceHostOwner from '@components/resource-host-owner/Index.vue';
   import PanelTab from './components/PanelTab.vue';
   import useSearchSelectData from './hooks/use-search-select-data';
 
+  export interface IValue {
+    bk_biz_id: number;
+    bk_cloud_id: number;
+    bk_host_id: number;
+    ip: string;
+  }
+
   interface Props {
     multiple?: boolean;
     params?: {
-      bk_biz_id?: number;
+      for_biz?: number;
       bk_cloud_ids?: string;
       resource_type?: string;
       os_type?: string;
@@ -178,13 +185,6 @@
     (e: 'change', value: IValue[]): void;
   }
 
-  interface IValue {
-    bk_biz_id: number;
-    bk_cloud_id: number;
-    bk_host_id: number;
-    ip: string;
-  }
-
   const props = withDefaults(defineProps<Props>(), {
     multiple: true,
     params: () => ({}),
@@ -251,7 +251,7 @@
   const handleSubmit = () => {
     isShow.value = false;
     const latestValue = Object.values(rowSelectMemo.value).map((item) => ({
-      bk_biz_id: item.bk_biz_id,
+      bk_biz_id: item.dedicated_biz,
       bk_cloud_id: item.bk_cloud_id,
       bk_host_id: item.bk_host_id,
       ip: item.ip,
diff --git a/dbm-ui/frontend/src/demo/Index.vue b/dbm-ui/frontend/src/demo/Index.vue
index b6b07cd99b..c8420b8285 100644
--- a/dbm-ui/frontend/src/demo/Index.vue
+++ b/dbm-ui/frontend/src/demo/Index.vue
@@ -99,7 +99,7 @@
     TimePicker as EditTimePicker,
   } from '@components/editable-table/Index.vue';
 
-  import OperationColumn from '@views/db-manage/common/toolbox-field/operation-column/Index.vue';
+  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
 
   const createData = () => ({
     name: 'name',
diff --git a/dbm-ui/frontend/src/hooks/index.ts b/dbm-ui/frontend/src/hooks/index.ts
index 2b3d724061..6762b23603 100644
--- a/dbm-ui/frontend/src/hooks/index.ts
+++ b/dbm-ui/frontend/src/hooks/index.ts
@@ -15,6 +15,7 @@ export * from './useApplyBase';
 export * from './useBeforeClose';
 export * from './useCopy';
 export * from './useCopyFromSelection';
+export * from './useCreateTicket';
 export * from './useDebouncedRef';
 export * from './useDebouncedRef';
 export * from './useDefaultPagination';
diff --git a/dbm-ui/frontend/src/hooks/useCreateTicket.tsx b/dbm-ui/frontend/src/hooks/useCreateTicket.tsx
index 7cb6c8f169..1496f1c342 100644
--- a/dbm-ui/frontend/src/hooks/useCreateTicket.tsx
+++ b/dbm-ui/frontend/src/hooks/useCreateTicket.tsx
@@ -2,18 +2,41 @@ import InfoBox from 'bkui-vue/lib/info-box';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
-import { createTicket } from '@services/source/ticket';
+import { createTicketNew } from '@services/source/ticket';
 
-import { messageError, messageSuccess } from '@utils';
+import type { TicketTypes } from '@common/const';
 
-export const useCreateTicket = (params: Record<string, any>) => {
-  const { t, locale } = useI18n();
+import { messageError } from '@utils';
+
+export function useCreateTicket<T>(ticketType: TicketTypes, options?: { onSuccess?: (ticketId: number) => void }) {
+  const loading = ref(false);
   const router = useRouter();
+  const { t, locale } = useI18n();
 
-  createTicket(params)
-    .then(() => messageSuccess(t('单据创建成功')))
-    .catch((e) => {
-      const { code, data } = e;
+  const run = async (formData: { details: T; remark: string; ignore_duplication?: boolean }) => {
+    const params = {
+      ticket_type: ticketType,
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      ...formData,
+    };
+    try {
+      loading.value = true;
+      const { id: ticketId } = await createTicketNew<T>(params);
+      if (options?.onSuccess) {
+        options.onSuccess(ticketId);
+      } else {
+        router.push({
+          name: ticketType,
+          params: {
+            page: 'success',
+          },
+          query: {
+            ticketId,
+          },
+        });
+      }
+    } catch (e: any) {
+      const { code, data, message } = e;
       const duplicateCode = 8704005;
       if (code === duplicateCode) {
         const id = data.duplicate_ticket_id;
@@ -59,7 +82,7 @@ export const useCreateTicket = (params: Record<string, any>) => {
           cancelText: t('取消提单'),
           onConfirm: async () => {
             try {
-              await createTicket({
+              await run({
                 ...params,
                 ignore_duplication: true,
               });
@@ -68,8 +91,16 @@ export const useCreateTicket = (params: Record<string, any>) => {
             }
           },
         });
+      } else {
+        messageError(message);
       }
+    } finally {
+      loading.value = false;
+    }
+  };
 
-      messageError(e.message);
-    });
-};
+  return {
+    run,
+    loading,
+  };
+}
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index bc77337bb5..dd307a1bd2 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -782,7 +782,7 @@
   "输入主库后自动生成": "输入主库后自动生成",
   "目标主库重复": "目标主库重复",
   "目标主库不存在": "目标主库不存在",
-  "请输入IP": "请输入IP",
+  "请输入IP": "请输入 IP",
   "目标从库不能为空": "目标从库不能为空",
   "请输入选择从库": "请输入选择从库",
   "Slave提升成主库_断开同步_切换后集成成单点状态_一般用于紧急切换": "Slave 提升成主库，断开同步，切换后集群成单节点状态，一般用于紧急切换",
@@ -3462,7 +3462,6 @@
   "时间戳类型(timestamp)": "时间戳类型(timestamp)",
   "整型(int)": "整型(int)",
   "整型(bigint)": "整型(bigint)",
-  "新proxy主机": "新proxy主机",
   "开启弱密码检测": "开启弱密码检测",
   "开启后，不允许超过 x 位连续字符，如出现以下示例密码将无法通过检测": "开启后，不允许超过 {x} 位连续字符，如出现以下示例密码将无法通过检测",
   "连续键盘序_如_xx": "连续键盘序，如：{0}",
@@ -3994,6 +3993,33 @@
   "资源池主机转入故障池": "资源池主机转入故障池",
   "业务主机转入故障池": "业务主机转入故障池",
   "全局资源池": "全局资源池",
+  "集群域名格式不正确": "集群域名格式不正确",
+  "xx任务提交成功": "{name}任务提交成功",
+  "xx执行": "{name}执行",
+  "含n个同机关联集群": "含 {n} 个同机关联集群",
+  "目标集群是集群target的关联集群_请勿重复添加": "目标集群是集群 {target} 的关联集群，请勿重复添加",
+  "目标实例不存在": "目标实例不存在",
+  "新Master": "新 Master",
+  "新Slave": "新 Slave",
+  "xx不符合IPv4标准": "{0} 不符合IPv4标准",
+  "目标主机xx不存在": "目标主机 {0} 不存在",
+  "目标集群 (always on 集群)": "目标集群 (always on 集群)",
+  "当前填写的主机为资源池主机，切换类型将会清空并重新选择": "当前填写的主机为资源池主机，切换类型将会清空并重新选择",
+  "格式不符合要求": "格式不符合要求",
+  "Master 至少保留 2 台 ，Slave 至少 保留 1台": "Master 至少保留 2 台 ，Slave 至少 保留 1台",
+  "请先选择集群和缩容节点类型": "请先选择集群和缩容节点类型",
+  "手动选择主机不需要设置缩容数量": "手动选择主机不需要设置缩容数量",
+  "只迁移目标集群": "只迁移目标集群",
+  "集群迁移": "集群迁移",
+  "主机关联的所有集群一并迁移": "主机关联的所有集群一并迁移",
+  "新Master主机": "新 Master 主机",
+  "新Slave主机": "新 Slave 主机",
+  "请输入集群域名,多个集群换行输入": "请输入集群域名,多个集群换行输入",
+  "目标集群xx不存在": "目标集群 {0} 不存在",
+  "目标集群xx重复": "目标集群 {0} 重复",
+  "目标Master主机": "目标 Master 主机",
+  "请输入集群域名_多个集群用分隔符输入": "请输入集群域名，多个集群用分隔符输入",
+  "单据创建成功": "单据创建成功",
   "这行勿动！新增翻译请在上一行添加！": ""
 
 }
diff --git a/dbm-ui/frontend/src/services/model/db-resource/DbResource.ts b/dbm-ui/frontend/src/services/model/db-resource/DbResource.ts
index c5917fa8a6..b747981118 100644
--- a/dbm-ui/frontend/src/services/model/db-resource/DbResource.ts
+++ b/dbm-ui/frontend/src/services/model/db-resource/DbResource.ts
@@ -32,6 +32,7 @@ export default class DbResource {
   city_id: string;
   consume_time: string;
   create_time: string;
+  dedicated_biz: number;
   device_class: string;
   for_biz: {
     bk_biz_id: number;
@@ -81,6 +82,7 @@ export default class DbResource {
     this.city_id = payload.city_id;
     this.consume_time = payload.consume_time;
     this.create_time = payload.create_time;
+    this.dedicated_biz = payload.dedicated_biz;
     this.device_class = payload.device_class;
     this.for_biz = payload.for_biz;
     this.ip = payload.ip;
diff --git a/dbm-ui/frontend/src/services/model/mysql/remote-pair-instance.ts b/dbm-ui/frontend/src/services/model/mysql/remote-pair-instance.ts
index 216be8975e..8a238faea0 100644
--- a/dbm-ui/frontend/src/services/model/mysql/remote-pair-instance.ts
+++ b/dbm-ui/frontend/src/services/model/mysql/remote-pair-instance.ts
@@ -1,3 +1,5 @@
+import type { MachineRelatedCluster, MachineRelatedInstance } from '@services/types';
+
 export default class RemotePaisInstance {
   bk_biz_id: number;
   bk_cloud_id: number;
@@ -8,6 +10,9 @@ export default class RemotePaisInstance {
   name: string;
   port: number;
   phase: string;
+  related_clusters: MachineRelatedCluster[];
+  related_instances: MachineRelatedInstance[];
+  related_pair_instances: MachineRelatedInstance[];
   spec_config: {
     id: number;
   };
@@ -23,6 +28,9 @@ export default class RemotePaisInstance {
     this.name = payload.name;
     this.port = payload.port;
     this.phase = payload.phase;
+    this.related_clusters = payload.related_clusters;
+    this.related_instances = payload.related_instances;
+    this.related_pair_instances = payload.related_pair_instances;
     this.spec_config = payload.spec_config;
     this.status = payload.status;
   }
diff --git a/dbm-ui/frontend/src/services/source/dbbase.ts b/dbm-ui/frontend/src/services/source/dbbase.ts
index ad976f9e31..6476b32a20 100644
--- a/dbm-ui/frontend/src/services/source/dbbase.ts
+++ b/dbm-ui/frontend/src/services/source/dbbase.ts
@@ -31,12 +31,14 @@ export function verifyDuplicatedClusterName(params: { cluster_type: string; name
  */
 export function filterClusters<
   T extends {
+    id: number;
     bk_biz_id: number;
     bk_cloud_id: number;
     bk_cloud_name: string;
     cluster_name: string;
     cluster_type: string;
     major_version: string;
+    master_domain: string;
   },
 >(params: { bk_biz_id: number; exact_domain?: string; cluster_ids?: string; domain?: string }) {
   return http.get<T[]>(`${path}/filter_clusters/`, params);
diff --git a/dbm-ui/frontend/src/services/source/ticket.tsx b/dbm-ui/frontend/src/services/source/ticket.tsx
index 84f14dd156..4a564c8370 100644
--- a/dbm-ui/frontend/src/services/source/ticket.tsx
+++ b/dbm-ui/frontend/src/services/source/ticket.tsx
@@ -19,6 +19,8 @@ import type { FlowItem, FlowItemTodo } from '@services/types/ticket';
 
 import { getRouter } from '@router/index';
 
+import type { TicketTypes } from '@common/const';
+
 import { messageError } from '@utils';
 
 import { locale, t } from '@locales/index';
@@ -55,6 +57,19 @@ export function getTickets(params: {
 /**
  * 创建单据
  */
+export function createTicketNew<T>(params: {
+  bk_biz_id: number;
+  details: T;
+  ignore_duplication?: boolean;
+  remark: string;
+  ticket_type: TicketTypes;
+}) {
+  return http.post<{ id: number }>(`${path}/`, params, { catchError: true });
+}
+
+/**
+ * 创建单据、过后摒弃
+ */
 export function createTicket(formData: Record<string, any>) {
   return http
     .post<{ id: number }>(`${path}/`, formData, { catchError: true })
diff --git a/dbm-ui/frontend/src/services/types/common.ts b/dbm-ui/frontend/src/services/types/common.ts
index 360ff3529e..7f8c22f035 100644
--- a/dbm-ui/frontend/src/services/types/common.ts
+++ b/dbm-ui/frontend/src/services/types/common.ts
@@ -33,3 +33,8 @@ export enum RepairModes {
   AUTO_REPAIR = 'auto_repair',
   MANUAL_CONFIRM = 'manual_confirm',
 }
+
+export enum BackupSourceType {
+  LOCAL = 'local',
+  REMOTE = 'remote',
+}
diff --git a/dbm-ui/frontend/src/services/types/db/clusterListSpec.ts b/dbm-ui/frontend/src/services/types/db/clusterListSpec.ts
index 6d0d49b88e..314ea108d2 100644
--- a/dbm-ui/frontend/src/services/types/db/clusterListSpec.ts
+++ b/dbm-ui/frontend/src/services/types/db/clusterListSpec.ts
@@ -1,4 +1,6 @@
 export interface ClusterListSpec {
+  id: number;
+  name: string;
   cpu: {
     max: number;
     min: number;
diff --git a/dbm-ui/frontend/src/services/types/instanceInfos.ts b/dbm-ui/frontend/src/services/types/instanceInfos.ts
index 7fa8d09e76..ba7d5cff80 100644
--- a/dbm-ui/frontend/src/services/types/instanceInfos.ts
+++ b/dbm-ui/frontend/src/services/types/instanceInfos.ts
@@ -51,15 +51,27 @@ export interface InstanceInfos {
   }[];
   role: string;
   spec_config: {
-    cpu: number;
     id: number;
-    mem: number;
+    cpu: {
+      max: number;
+      min: number;
+    };
+    mem: {
+      max: number;
+      min: number;
+    };
+    qps: {
+      max: number;
+      min: number;
+    };
     name: string;
+    count: number;
+    device_class: string;
     storage_spec: {
       mount_point: string;
       size: number;
       type: string;
-    };
+    }[];
   };
   status: 'running' | 'unavailable';
 }
diff --git a/dbm-ui/frontend/src/utils/createToolboxRoute.ts b/dbm-ui/frontend/src/utils/createToolboxRoute.ts
new file mode 100644
index 0000000000..90c092d332
--- /dev/null
+++ b/dbm-ui/frontend/src/utils/createToolboxRoute.ts
@@ -0,0 +1,19 @@
+import { DBTypes, type TicketTypes } from '@common/const';
+
+export function createToolboxRoute(dbType: DBTypes) {
+  const dbToolbox = dbType === DBTypes.TENDBCLUSTER ? 'tendb-cluster' : dbType;
+
+  const createRouteItem = (ticketType: TicketTypes, navName: string) => ({
+    name: ticketType,
+    path: `${ticketType}/:page?`,
+    meta: {
+      navName,
+      fullscreen: true,
+    },
+    component: () => import(`@views/db-manage/${dbToolbox}/${ticketType}/Index.vue`),
+  });
+
+  return {
+    createRouteItem,
+  };
+}
diff --git a/dbm-ui/frontend/src/utils/index.ts b/dbm-ui/frontend/src/utils/index.ts
index fae1d322d3..0cd26d9d2e 100644
--- a/dbm-ui/frontend/src/utils/index.ts
+++ b/dbm-ui/frontend/src/utils/index.ts
@@ -18,6 +18,7 @@ export * from './checkDbConsole';
 export * from './classes';
 export * from './compareVersions';
 export * from './convertStorageUnits';
+export * from './createToolboxRoute';
 export * from './deepMerge';
 export * from './dom';
 export * from './downloadFile';
diff --git a/dbm-ui/frontend/src/views/db-manage/common/cluster-capacity-usage-rate/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/cluster-capacity-usage-rate/Index.vue
index 89d25d275e..6636c541d6 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/cluster-capacity-usage-rate/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/cluster-capacity-usage-rate/Index.vue
@@ -37,7 +37,7 @@
   import { bytePretty } from '@utils';
 
   interface Props {
-    clusterStats: Record<'used' | 'total' | 'in_use', number> | Record<string, never>;
+    clusterStats?: Record<'used' | 'total' | 'in_use', number>;
   }
 
   const props = defineProps<Props>();
diff --git a/dbm-ui/frontend/src/views/db-manage/common/create-ticket-success/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/create-ticket-success/Index.vue
new file mode 100644
index 0000000000..cacc46fd11
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/common/create-ticket-success/Index.vue
@@ -0,0 +1,219 @@
+<!--
+ * 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="mysql-operation-success-page">
+    <div style="font-size: 64px; color: #2dcb56">
+      <DbIcon type="check-circle-fill" />
+    </div>
+    <div style="margin-top: 36px; font-size: 24px; line-height: 32px; color: #313238">
+      {{ t('xx任务提交成功', { name: route.meta.navName }) }}
+    </div>
+    <div style="margin-top: 16px; font-size: 14px; line-height: 22px; color: #63656e">
+      <I18nT
+        keypath="接下来您可以通过xx查看任务最新动态"
+        tag="span">
+        <RouterLink
+          target="_blank"
+          :to="{
+            name: 'bizTicketManage',
+            query: {
+              id: ticketId,
+            },
+          }">
+          {{ t('单据') }}
+        </RouterLink>
+      </I18nT>
+    </div>
+    <div class="operation-steps">
+      <div
+        v-for="(item, index) in renderSteps"
+        :key="index"
+        class="step-item">
+        <div class="step-status">
+          <div
+            :class="[
+              index === currentIndex ? 'status-loading' : 'status-dot',
+              {
+                'status-dot--success': index < currentIndex,
+              },
+            ]" />
+        </div>
+        <div>{{ item.name }}</div>
+      </div>
+    </div>
+    <div class="action">
+      <BkButton
+        class="w-88"
+        theme="primary"
+        @click="handleGoTicket">
+        {{ t('去看看') }}
+      </BkButton>
+      <BkButton
+        class="ml8"
+        @click="handleStepChange">
+        {{ t('继续提单') }}
+      </BkButton>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import _ from 'lodash';
+  import { computed } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  interface Props {
+    steps: Array<{ name: string; current?: boolean }>;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    steps: () => [],
+  });
+
+  const { t } = useI18n();
+  const route = useRoute();
+  const router = useRouter();
+
+  const { ticketId } = route.query;
+
+  const renderSteps = computed(() =>
+    props.steps.length > 0
+      ? props.steps
+      : [{ name: t('单据审批') }, { name: t('xx执行', { name: route.meta.navName }) }, { name: t('任务完成') }],
+  );
+
+  const currentIndex = computed(() => {
+    const index = _.findIndex(props.steps, (item) => Boolean(item.current));
+    return Math.max(index, 0);
+  });
+
+  const handleGoTicket = () => {
+    const route = router.resolve({
+      name: 'bizTicketManage',
+      query: {
+        id: ticketId,
+      },
+    });
+    window.open(route.href);
+  };
+
+  const handleStepChange = () => {
+    router.push({
+      name: route.name,
+    });
+  };
+</script>
+<style lang="less">
+  .mysql-operation-success-page {
+    display: block;
+    padding-top: 180px;
+    text-align: center;
+
+    .action {
+      margin-top: 32px;
+    }
+
+    .operation-steps {
+      display: flex;
+      margin-top: 24px;
+      margin-bottom: 32px;
+      font-size: 14px;
+      line-height: 22px;
+      color: #63656e;
+      justify-content: center;
+
+      .step-item {
+        padding: 0 22px;
+
+        &:first-child {
+          .step-status::before {
+            content: none;
+          }
+        }
+
+        &:last-child {
+          .step-status::after {
+            content: none;
+          }
+        }
+      }
+
+      .step-status {
+        position: relative;
+        display: flex;
+        height: 14px;
+        margin-bottom: 20px;
+        justify-content: center;
+        align-items: center;
+
+        &::before,
+        &::after {
+          position: absolute;
+          top: 50%;
+          width: calc(50% + 22px);
+          height: 1px;
+          background: #d8d8d8;
+          content: '';
+        }
+
+        &::before {
+          right: 50%;
+        }
+
+        &::after {
+          left: 50%;
+        }
+      }
+
+      .status-loading,
+      .status-dot {
+        z-index: 1;
+        background: #fff;
+
+        &--success {
+          background-color: rgb(45 203 86);
+          border-color: rgb(45 203 86) !important;
+        }
+      }
+
+      .status-loading {
+        position: relative;
+        display: flex;
+        width: 13px;
+        height: 13px;
+        border: 2px solid #3a84ff;
+        border-radius: 50%;
+        align-items: center;
+        justify-content: center;
+
+        &::after {
+          width: 5px;
+          height: 5px;
+          border: 1px solid #3a84ff;
+          border-top-color: white;
+          border-radius: 50%;
+          content: '';
+          opacity: 60%;
+          animation: rotate-loading 1.5s linear infinite;
+        }
+      }
+
+      .status-dot {
+        width: 10px;
+        height: 10px;
+        border: 2px solid #d8d8d8;
+        border-radius: 50%;
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/hybrid-host-column/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/hybrid-host-column/Index.vue
new file mode 100644
index 0000000000..4da4f6c886
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/hybrid-host-column/Index.vue
@@ -0,0 +1,230 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    :field="field"
+    :label="label"
+    :min-width="minWidth"
+    required
+    :rule="rules">
+    <Select
+      v-model="modelValue"
+      :list="selectList"
+      @change="handleSelectChange">
+      <template #option="{ item }">
+        <div class="spec-display">
+          {{ item.label }}
+          <span class="spec-display-count">{{ countMap[item.value] }}</span>
+        </div>
+      </template>
+      <template #trigger>
+        <Input
+          v-if="modelValue === HostSelectType.MANUAL"
+          v-model="localValue"
+          :placeholder="t('请选择主机')">
+          <template #default>
+            <span ref="rootRef">{{ localValue }}</span>
+          </template>
+          <template #append>
+            <DbIcon
+              class="select-icon"
+              type="host-select"
+              @click.stop="handleShowSelector" />
+          </template>
+        </Input>
+        <div
+          v-else-if="modelValue === HostSelectType.AUTO"
+          class="table-cell">
+          {{ t('自动匹配') }}
+        </div>
+        <div
+          v-else
+          class="table-cell placeholder-text">
+          {{ t(placeholder) }}
+        </div>
+      </template>
+    </Select>
+  </Column>
+  <ResourceHostSelector
+    v-model:is-show="showSelector"
+    v-mode="hostList"
+    :params="params"
+    @change="handleSelectorChange" />
+</template>
+
+<script lang="ts">
+  export enum HostSelectType {
+    AUTO = 'auto',
+    MANUAL = 'manual',
+  }
+</script>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { getSpecResourceCount } from '@services/source/dbresourceResource';
+
+  import { Column, Input, Select } from '@components/editable-table/Index.vue';
+  import ResourceHostSelector, { type IValue } from '@components/resource-host-selector/Index.vue';
+
+  export type HostInfo = IValue;
+
+  interface Props {
+    field: string; // 绑选项值的vmodel，不绑主机列表
+    label: string;
+    minWidth?: number;
+    placeholder?: string;
+    bkCloudId?: number;
+    specIds?: number[];
+    params?: {
+      for_biz?: number;
+      bk_cloud_ids?: string;
+      resource_type?: string;
+      os_type?: string;
+    };
+  }
+
+  interface Emits {
+    (e: 'change', list: IValue[]): void;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    minWidth: 300,
+    placeholder: '请选择',
+    bkCloudId: 0,
+    specIds: () => [],
+    params: () => ({}),
+  });
+
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+
+  const modelValue = defineModel<string>({
+    default: '',
+  });
+
+  const showSelector = ref(false);
+  const hostList = ref<IValue[]>([]);
+  const localValue = ref('');
+
+  const countMap = reactive<Record<string, number>>({
+    [HostSelectType.AUTO]: 0,
+    [HostSelectType.MANUAL]: 0,
+  });
+
+  const selectList = [
+    {
+      label: t('自动匹配'),
+      value: HostSelectType.AUTO,
+    },
+    {
+      label: t('手动选择'),
+      value: HostSelectType.MANUAL,
+    },
+  ];
+
+  const rules = [
+    {
+      validator: (value: HostSelectType) => Boolean(value),
+      message: t('请选择节点类型'),
+    },
+    {
+      validator: (value: HostSelectType) => {
+        if (value === HostSelectType.AUTO) {
+          return true;
+        }
+        return Boolean(localValue.value);
+      },
+      message: t('请选择主机'),
+    },
+  ];
+
+  const { run: fetchSpecResourceCount } = useRequest(getSpecResourceCount, {
+    manual: true,
+    onSuccess(countResult) {
+      countMap[HostSelectType.AUTO] = Object.values(countResult).reduce<number>((acc, cur) => acc + cur, 0);
+    },
+  });
+
+  watch(
+    () => props.specIds,
+    () => {
+      if (props.specIds.length) {
+        fetchSpecResourceCount({
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          bk_cloud_id: props.bkCloudId,
+          spec_ids: props.specIds,
+        });
+      }
+    },
+  );
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleSelectorChange = (data: IValue[]) => {
+    hostList.value = data;
+    localValue.value = data.map((item) => item.ip).join(',');
+    emits('change', hostList.value);
+  };
+
+  const handleSelectChange = () => {
+    handleSelectorChange([]);
+  };
+</script>
+
+<style lang="less" scoped>
+  .table-cell {
+    flex: 1;
+    padding: 0 8px;
+  }
+
+  .select-icon {
+    display: flex;
+    margin-right: 5px;
+    font-size: 18px;
+    color: #979ba5;
+    align-items: center;
+    cursor: pointer;
+
+    &:hover {
+      color: #3a84ff;
+    }
+  }
+
+  .spec-display {
+    display: flex;
+    width: 100%;
+    flex: 1;
+    align-items: center;
+    justify-content: space-between;
+
+    .spec-display-count {
+      height: 16px;
+      min-width: 20px;
+      font-size: 12px;
+      line-height: 16px;
+      color: #979ba5;
+      text-align: center;
+      background-color: #f0f1f5;
+      border-radius: 2px;
+    }
+  }
+
+  .placeholder-text {
+    color: rgb(99 101 110 / 50%);
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/multiple-host-column/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/multiple-host-column/Index.vue
new file mode 100644
index 0000000000..4453fe25e4
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/multiple-host-column/Index.vue
@@ -0,0 +1,233 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    :append-rules="editable ? rules : []"
+    :field="field"
+    :label="label"
+    :loading="loading"
+    :min-width="300"
+    required>
+    <Input
+      v-if="editable"
+      v-model="localValue"
+      :placeholder="t('请选择主机')"
+      @change="handleInputChange">
+      <template #default>
+        <span ref="rootRef">{{ localValue }}</span>
+      </template>
+      <template #append>
+        <DbIcon
+          class="select-icon"
+          type="host-select"
+          @click="handleShowSelector" />
+      </template>
+    </Input>
+    <Block
+      v-else
+      v-model="localValue"
+      :placeholder="t('请选择主机')">
+      <template #default>
+        <span ref="rootRef">{{ localValue }}</span>
+      </template>
+      <template #append>
+        <DbIcon
+          class="select-icon"
+          type="host-select"
+          @click="handleShowSelector" />
+      </template>
+    </Block>
+  </Column>
+  <ResourceHostSelector
+    v-model:is-show="showSelector"
+    v-mode="modelValue"
+    :params="params"
+    @change="handleSelectorChange" />
+  <div style="display: none">
+    <div ref="popRef">
+      <p
+        v-for="item in modelValue"
+        :key="item.ip">
+        {{ item.ip }}
+      </p>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import type { Instance, SingleTarget } from 'tippy.js';
+  import tippy from 'tippy.js';
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { fetchListDbaHost } from '@services/source/dbresourceResource';
+
+  import { ipv4 } from '@common/regex';
+
+  import { Block, Column, Input } from '@components/editable-table/Index.vue';
+  import ResourceHostSelector, { type IValue } from '@components/resource-host-selector/Index.vue';
+
+  interface Props {
+    /**
+     * field 对应的必须是model的数组变量
+     */
+    field: string;
+    label: string;
+    editable?: boolean;
+    params?: {
+      for_biz?: number;
+      bk_cloud_ids?: string;
+      resource_type?: string;
+      os_type?: string;
+    };
+  }
+
+  interface IHost {
+    bk_biz_id?: number;
+    bk_cloud_id?: number;
+    bk_host_id?: number;
+    ip: string;
+  }
+
+  withDefaults(defineProps<Props>(), {
+    editable: false,
+    params: () => ({}),
+  });
+
+  /**
+   * 绑定modelValue为数组 项须包含ip
+   */
+  const modelValue = defineModel<IHost[]>({
+    default: () => [],
+  });
+
+  const { t } = useI18n();
+
+  const rootRef = ref();
+  const popRef = ref();
+  const showSelector = ref(false);
+  const localValue = ref('');
+  let notIpv4: string[] = [];
+  let notFound: string[] = [];
+  let tippyIns: Instance;
+
+  const rules = [
+    {
+      validator: (hosts: IHost[]) => {
+        notIpv4 = [];
+        hosts.forEach((item) => {
+          if (!ipv4.test(item.ip)) {
+            notIpv4.push(item.ip);
+          }
+        });
+        return !notIpv4.length;
+      },
+      message: () => t('xx不符合IPv4标准', [notIpv4.join(',')]),
+      trigger: 'change',
+    },
+    {
+      validator: (hosts: IHost[]) => {
+        notFound = [];
+        hosts.forEach((item) => {
+          if (!item.bk_host_id) {
+            notFound.push(item.ip);
+          }
+        });
+        return !notFound.length;
+      },
+      message: () => t('目标主机xx不存在', [notFound.join(',')]),
+      trigger: 'blur',
+    },
+  ];
+
+  const { run: queryHost, loading } = useRequest(fetchListDbaHost, {
+    manual: true,
+    onSuccess: (data) => {
+      console.log(data, 'data');
+      // modelValue.value = data.map(item => ({
+      //   bk_biz_id: item.dedicated_biz || item.bk_biz_id,
+      // bk_cloud_id: item.bk_cloud_id,
+      // bk_host_id: item.bk_host_id,
+      // ip: item.ip,
+      // }))
+      // localValue.value = data.map(item => item.ip).join(',')
+    },
+  });
+
+  const destroyInst = () => {
+    if (tippyIns) {
+      tippyIns.hide();
+      tippyIns.unmount();
+      tippyIns.destroy();
+    }
+  };
+
+  watch(modelValue, () => {
+    localValue.value = modelValue.value.map((item) => item.ip).join(',');
+    if (modelValue.value.length > 0) {
+      destroyInst();
+      nextTick(() => {
+        tippyIns = tippy(rootRef.value as SingleTarget, {
+          content: popRef.value,
+          placement: 'top-start',
+          appendTo: () => document.body,
+          theme: 'light',
+          maxWidth: 'none',
+          trigger: 'mouseenter click',
+          interactive: true,
+          arrow: false,
+          allowHTML: true,
+          zIndex: 999999,
+          hideOnClick: true,
+        });
+      });
+    }
+  });
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    if (value) {
+      queryHost({
+        search_content: value,
+        limit: -1,
+        offset: 0,
+      });
+    }
+  };
+
+  const handleSelectorChange = (hostList: IValue[]) => {
+    modelValue.value = hostList;
+  };
+
+  onBeforeUnmount(() => {
+    destroyInst();
+  });
+</script>
+
+<style lang="less" scoped>
+  .select-icon {
+    display: flex;
+    margin-right: 5px;
+    font-size: 18px;
+    color: #979ba5;
+    align-items: center;
+    cursor: pointer;
+
+    &:hover {
+      color: #3a84ff;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/operation-column/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/operation-column/Index.vue
similarity index 100%
rename from dbm-ui/frontend/src/views/db-manage/common/toolbox-field/operation-column/Index.vue
rename to dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/operation-column/Index.vue
diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/single-host-column/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/single-host-column/Index.vue
new file mode 100644
index 0000000000..99b6cd6b66
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/single-host-column/Index.vue
@@ -0,0 +1,152 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    :append-rules="editable ? rules : []"
+    :field="field"
+    :label="label"
+    :loading="loading"
+    :min-width="minWidth"
+    required>
+    <Input
+      v-if="editable"
+      v-model="modelValue.ip"
+      :placeholder="t('请选择主机')"
+      @change="handleInputChange">
+      <template #append>
+        <DbIcon
+          class="select-icon"
+          type="host-select"
+          @click="handleShowSelector" />
+      </template>
+    </Input>
+    <Block
+      v-else
+      v-model="modelValue.ip"
+      :placeholder="t('请选择主机')">
+      <template #append>
+        <DbIcon
+          class="select-icon"
+          type="host-select"
+          @click="handleShowSelector" />
+      </template>
+    </Block>
+  </Column>
+  <ResourceHostSelector
+    v-model="selected"
+    v-model:is-show="showSelector"
+    :multiple="false"
+    :params="params"
+    @change="handleSelectorChange" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { fetchListDbaHost } from '@services/source/dbresourceResource';
+
+  import { ipv4 } from '@common/regex';
+
+  import { Block, Column, Input } from '@components/editable-table/Index.vue';
+  import ResourceHostSelector, { type IValue } from '@components/resource-host-selector/Index.vue';
+
+  interface Props {
+    field: string;
+    label: string;
+    minWidth?: number;
+    editable?: boolean;
+    params?: {
+      for_biz?: number;
+      bk_cloud_ids?: string;
+      resource_type?: string;
+      os_type?: string;
+    };
+  }
+
+  withDefaults(defineProps<Props>(), {
+    minWidth: 300,
+    editable: false,
+    params: () => ({}),
+  });
+
+  /**
+   * 绑定的modelValue须包含ip
+   */
+  const modelValue = defineModel<{
+    bk_biz_id?: number;
+    bk_cloud_id?: number;
+    bk_host_id?: number;
+    ip: string;
+  }>({
+    default: () => ({}),
+  });
+
+  const { t } = useI18n();
+
+  const showSelector = ref(false);
+  const selected = computed(() => (modelValue.value.bk_host_id ? ([modelValue.value] as IValue[]) : ([] as IValue[])));
+
+  const rules = [
+    {
+      validator: (value: string) => ipv4.test(value),
+      message: t('IP 格式不符合IPv4标准'),
+      trigger: 'change',
+    },
+    {
+      validator: () => Boolean(modelValue.value.bk_host_id),
+      message: t('目标主机不存在'),
+      trigger: 'blur',
+    },
+  ];
+
+  const { run: queryHost, loading } = useRequest(fetchListDbaHost, {
+    manual: true,
+    onSuccess: (data) => {
+      console.log(data, 'data');
+    },
+  });
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    if (value) {
+      queryHost({
+        search_content: value,
+        limit: -1,
+        offset: 0,
+      });
+    }
+  };
+
+  const handleSelectorChange = (hostList: IValue[]) => {
+    [modelValue.value] = hostList;
+  };
+</script>
+
+<style lang="less" scoped>
+  .select-icon {
+    display: flex;
+    margin-right: 5px;
+    font-size: 18px;
+    color: #979ba5;
+    align-items: center;
+    cursor: pointer;
+
+    &:hover {
+      color: #3a84ff;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/form-item/backup-source/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/form-item/backup-source/Index.vue
new file mode 100644
index 0000000000..e3c82ba1bb
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/form-item/backup-source/Index.vue
@@ -0,0 +1,28 @@
+<template>
+  <BkFormItem
+    :label="t('备份源')"
+    property="backupSource"
+    required>
+    <BkRadioGroup v-model="modelValue">
+      <BkRadio :label="BackupSourceType.LOCAL">
+        {{ t('本地备份') }}
+      </BkRadio>
+      <BkRadio :label="BackupSourceType.REMOTE">
+        {{ t('远程备份') }}
+      </BkRadio>
+    </BkRadioGroup>
+  </BkFormItem>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import { BackupSourceType } from '@services/types';
+
+  const { t } = useI18n();
+
+  const modelValue = defineModel<BackupSourceType>({
+    required: true,
+    default: BackupSourceType.LOCAL,
+  });
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/form-item/ignore-biz/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/form-item/ignore-biz/Index.vue
new file mode 100644
index 0000000000..c51851dbce
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/form-item/ignore-biz/Index.vue
@@ -0,0 +1,31 @@
+<template>
+  <BkFormItem class="ignore-biz">
+    <BkCheckbox
+      v-model="modelValue"
+      :false-label="false"
+      true-label>
+      <span class="safe-action-text">{{ t('忽略业务连接') }}</span>
+    </BkCheckbox>
+  </BkFormItem>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  const { t } = useI18n();
+
+  const modelValue = defineModel<boolean>({
+    default: false,
+  });
+</script>
+
+<style lang="less" scoped>
+  .ignore-biz {
+    width: fit-content;
+  }
+
+  .safe-action-text {
+    padding-bottom: 2px;
+    border-bottom: 1px dashed #979ba5;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue
new file mode 100644
index 0000000000..e3367910ba
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue
@@ -0,0 +1,18 @@
+<template>
+  <BkFormItem :label="t('备注')">
+    <BkInput
+      v-model="modelValue"
+      :maxlength="500"
+      :placeholder="t('请提供更多有用信息申请信息_以获得更快审批')"
+      style="width: 700px"
+      type="textarea" />
+  </BkFormItem>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  const { t } = useI18n();
+
+  const modelValue = defineModel<string>();
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/doris/common/shrink/Index.vue b/dbm-ui/frontend/src/views/db-manage/doris/common/shrink/Index.vue
index 25518ac960..c71a0172c1 100644
--- a/dbm-ui/frontend/src/views/db-manage/doris/common/shrink/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/doris/common/shrink/Index.vue
@@ -301,7 +301,6 @@
               ip: hostItem.ip,
               bk_cloud_id: hostItem.bk_cloud_id,
               bk_host_id: hostItem.bk_host_id,
-              bk_biz_id: bizId,
             }));
 
             const generateExtInfo = () => Object.entries(nodeInfoMap).reduce((results, [key, item]) => {
@@ -327,8 +326,7 @@
               bk_biz_id: bizId,
               details: {
                 cluster_id: props.data.id,
-                ip_source: 'manual_input',
-                nodes: {
+                old_nodes: {
                   hot: fomatHost(nodeInfoMap.hot.nodeList),
                   cold: fomatHost(nodeInfoMap.cold.nodeList),
                   observer: fomatHost(nodeInfoMap.observer.nodeList),
diff --git a/dbm-ui/frontend/src/views/db-manage/elastic-search/common/shrink/Index.vue b/dbm-ui/frontend/src/views/db-manage/elastic-search/common/shrink/Index.vue
index 283a89de26..a94b44b4b0 100644
--- a/dbm-ui/frontend/src/views/db-manage/elastic-search/common/shrink/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/elastic-search/common/shrink/Index.vue
@@ -53,6 +53,8 @@
 
   import { useGlobalBizs } from '@stores';
 
+  import { TicketTypes } from '@common/const';
+
   import HostShrink, {
     type TShrinkNode,
   } from '@views/db-manage/common/host-shrink/Index.vue';
@@ -307,12 +309,12 @@
             }, {} as Record<string, any>);
 
             return createTicket({
-              ticket_type: 'ES_SHRINK',
+              ticket_type: TicketTypes.ES_SHRINK,
               bk_biz_id: bizId,
               details: {
                 cluster_id: props.data.id,
                 ip_source: 'manual_input',
-                nodes: {
+                old_nodes: {
                   hot: fomatHost(nodeInfoMap.hot.nodeList),
                   cold: fomatHost(nodeInfoMap.cold.nodeList),
                   client: fomatHost(nodeInfoMap.client.nodeList),
diff --git a/dbm-ui/frontend/src/views/db-manage/hdfs/common/shrink/Index.vue b/dbm-ui/frontend/src/views/db-manage/hdfs/common/shrink/Index.vue
index 9e557f98b5..0998bb8539 100644
--- a/dbm-ui/frontend/src/views/db-manage/hdfs/common/shrink/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/hdfs/common/shrink/Index.vue
@@ -50,6 +50,8 @@
 
   import { useGlobalBizs } from '@stores';
 
+  import { TicketTypes } from '@common/const';
+
   import HostShrink, {
     type TShrinkNode,
   } from '@views/db-manage/common/host-shrink/Index.vue';
@@ -232,12 +234,11 @@
             }, {} as Record<string, any>);
 
             createTicket({
-              ticket_type: 'HDFS_SHRINK',
+              ticket_type: TicketTypes.HDFS_SHRINK,
               bk_biz_id: bizId,
               details: {
                 cluster_id: props.data.id,
-                ip_source: 'manual_input',
-                nodes: {
+                old_nodes: {
                   [nodeType.value]: fomatHost(nodeInfoMap.datanode.nodeList),
                 },
                 ext_info: generateExtInfo(),
diff --git a/dbm-ui/frontend/src/views/db-manage/kafka/common/shrink/Index.vue b/dbm-ui/frontend/src/views/db-manage/kafka/common/shrink/Index.vue
index ab97482171..6eda649da6 100644
--- a/dbm-ui/frontend/src/views/db-manage/kafka/common/shrink/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/kafka/common/shrink/Index.vue
@@ -209,7 +209,6 @@
               ip: hostItem.ip,
               bk_cloud_id: hostItem.bk_cloud_id,
               bk_host_id: hostItem.bk_host_id,
-              bk_biz_id: bizId,
             }));
 
             const generateExtInfo = () => Object.entries(nodeInfoMap).reduce((results, [key, item]) => {
@@ -235,8 +234,7 @@
               bk_biz_id: bizId,
               details: {
                 cluster_id: props.data.id,
-                ip_source: 'manual_input',
-                nodes: {
+                old_nodes: {
                   broker: fomatHost(nodeInfoMap.broker.nodeList),
                 },
                 ext_info: generateExtInfo(),
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/Create.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/Create.vue
new file mode 100644
index 0000000000..27d1ed6e12
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/Create.vue
@@ -0,0 +1,213 @@
+<!--
+ * 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>
+    <BkAlert
+      class="mb-20"
+      closable
+      :title="t('添加从库_同机的所有集群会统一新增从库_但新机器不添加到域名解析中去')" />
+    <BkForm
+      v-model="formData"
+      class="mb-20"
+      form-type="vertical">
+      <EditableTable
+        ref="table"
+        class="mb-20"
+        :model="formData.tableData"
+        :rules="rules">
+        <EditableTableRow
+          v-for="(item, index) in formData.tableData"
+          :key="index">
+          <WithRelatedClustersColumn
+            v-model="item.cluster"
+            :selected="selected"
+            @batch-edit="handleBatchEdit" />
+          <SingleHostColumn
+            v-model="item.slave"
+            field="slave.ip"
+            :label="t('新从库主机')" />
+          <OperationColumn
+            v-model:table-data="formData.tableData"
+            :create-row-method="createTableRow" />
+        </EditableTableRow>
+      </EditableTable>
+      <BackupSource v-model="formData.backupSource" />
+      <TicketRemark v-model="formData.remark" />
+    </BkForm>
+    <template #action>
+      <BkButton
+        class="mr-8 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 lang="ts" setup>
+  import { reactive, useTemplateRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import TendbhaModel from '@services/model/mysql/tendbha';
+  import { BackupSourceType } from '@services/types';
+
+  import { useCreateTicket } from '@hooks';
+
+  import { TicketTypes } from '@common/const';
+
+  import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
+
+  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
+  import SingleHostColumn from '@views/db-manage/common/toolbox-field/column/single-host-column/Index.vue';
+  import BackupSource from '@views/db-manage/common/toolbox-field/form-item/backup-source/Index.vue';
+  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+  import WithRelatedClustersColumn from '@views/db-manage/mysql/common/edit-table-column/WithRelatedClustersColumn.vue';
+
+  interface RowData {
+    cluster: {
+      id: number;
+      master_domain: string;
+      related_clusters: {
+        id: number;
+        master_domain: string;
+      }[];
+    };
+    slave: {
+      bk_biz_id: number;
+      bk_cloud_id: number;
+      bk_host_id: number;
+      ip: string;
+    };
+  }
+
+  const { t } = useI18n();
+  const tableRef = useTemplateRef('table');
+
+  const createTableRow = (data = {} as Partial<RowData>) => ({
+    cluster: data.cluster || {
+      id: 0,
+      master_domain: '',
+      related_clusters: [],
+    },
+    slave: data.slave || {
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+    },
+  });
+
+  const defaultData = () => ({
+    tableData: [createTableRow()],
+    backupSource: BackupSourceType.REMOTE,
+    remark: '',
+  });
+
+  const formData = reactive(defaultData());
+  // 表格行内已通过校验的集群为所选集群
+  const selected = computed(() => formData.tableData.filter((item) => item.cluster.id).map((item) => item.cluster));
+  // 集群域名到自身及其下集群id、域名映射
+  const clusterMap = computed(() => {
+    const result = selected.value.reduce<Record<string, { ids: number[]; domains: string[] }>>((acc, cur) => {
+      acc[cur.master_domain] = {
+        ids: [cur.id, ...cur.related_clusters.map((item) => item.id)],
+        domains: [cur.master_domain, ...cur.related_clusters.map((item) => item.master_domain)],
+      };
+      return acc;
+    }, {});
+    return result;
+  });
+
+  const rules = {
+    'cluster.master_domain': [
+      {
+        validator: (value: string) => {
+          const repeatTarget = Object.keys(clusterMap.value).find(
+            (domain) => clusterMap.value[domain].domains.includes(value) && domain !== value,
+          );
+          return repeatTarget ? t('目标集群是集群target的关联集群_请勿重复添加', { target: repeatTarget }) : true;
+        },
+        message: '',
+        trigger: 'blur',
+      },
+    ],
+  };
+
+  const { run: createTicketRun, loading: isSubmitting } = useCreateTicket<{
+    backup_source: BackupSourceType;
+    infos: {
+      cluster_ids: number[];
+      new_slave: {
+        bk_biz_id: number;
+        bk_cloud_id: number;
+        bk_host_id: number;
+        ip: string;
+      };
+    }[];
+  }>(TicketTypes.MYSQL_ADD_SLAVE);
+
+  const handleSubmit = async () => {
+    const result = await tableRef.value!.validate();
+    if (!result) {
+      return;
+    }
+    createTicketRun({
+      details: {
+        backup_source: formData.backupSource,
+        infos: formData.tableData.map((item) => ({
+          cluster_ids: [item.cluster.id, ...item.cluster.related_clusters.map((item) => item.id)],
+          new_master: item.slave,
+          new_slave: item.slave,
+        })),
+      },
+      remark: formData.remark,
+    });
+  };
+
+  const handleReset = () => {
+    Object.assign(formData, defaultData());
+  };
+
+  const handleBatchEdit = (list: TendbhaModel[]) => {
+    const dataList = list.reduce<RowData[]>((acc, item) => {
+      if (!clusterMap.value[item.master_domain]) {
+        acc.push(
+          createTableRow({
+            cluster: {
+              id: item.id,
+              master_domain: item.master_domain,
+              related_clusters: [],
+            },
+          }),
+        );
+      }
+      return acc;
+    }, []);
+    formData.tableData = [...(selected.value.length ? formData.tableData : []), ...dataList];
+    nextTick(() => {
+      tableRef.value!.validateByColumnIndex(0);
+    });
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/Index.vue
new file mode 100644
index 0000000000..7d5a04e740
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/Index.vue
@@ -0,0 +1,32 @@
+<!--
+ * 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="components[page]" />
+</template>
+<script setup lang="ts">
+  import { useRoute } from 'vue-router';
+
+  import Page2 from '@views/db-manage/common/create-ticket-success/Index.vue';
+
+  import Page1 from './Create.vue';
+
+  const route = useRoute();
+
+  const components = {
+    create: Page1,
+    success: Page2,
+  };
+
+  const page = computed(() => (route.params.page as keyof typeof components) || 'create');
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/Create.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/Create.vue
new file mode 100644
index 0000000000..b46351505c
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/Create.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>
+  <SmartAction>
+    <BkAlert
+      class="mb-20"
+      closable
+      :title="
+        t('迁移主从：集群主从实例将成对迁移至新机器。默认迁移同机所有关联集群，也可迁移部分集群，迁移会下架旧实例')
+      " />
+    <div>
+      <strong class="mirgate-types-title">
+        {{ t('迁移类型') }}
+      </strong>
+      <div class="mt-8 mb-20">
+        <CardCheckbox
+          v-model="migrateType"
+          :desc="t('只迁移目标集群')"
+          icon="rebuild"
+          :title="t('集群迁移')"
+          :true-value="MigrateTypes.CLUSTER_MIGRATE" />
+        <CardCheckbox
+          v-model="migrateType"
+          class="ml-8"
+          :desc="t('主机关联的所有集群一并迁移')"
+          icon="host"
+          :title="t('整机迁移')"
+          :true-value="MigrateTypes.HOST_MIGRATE" />
+      </div>
+    </div>
+    <BkForm
+      v-model="formData"
+      class="mb-20"
+      form-type="vertical">
+      <Component
+        :is="tableComponentMap[migrateType]"
+        ref="table"
+        :data="formData.tableData" />
+      <BackupSource v-model="formData.backupSource" />
+      <TicketRemark v-model="formData.remark" />
+    </BkForm>
+    <template #action>
+      <BkButton
+        class="mr-8 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 lang="ts" setup>
+  import { reactive } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import { BackupSourceType } from '@services/types';
+
+  import { useCreateTicket } from '@hooks';
+
+  import { TicketTypes } from '@common/const';
+
+  import CardCheckbox from '@components/db-card-checkbox/CardCheckbox.vue';
+
+  import BackupSource from '@views/db-manage/common/toolbox-field/form-item/backup-source/Index.vue';
+  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+
+  import ClusterMigrateTable from './components/ClusterMigrateTable.vue';
+  import HostMigrateTable from './components/HostMigrateTable.vue';
+  import { MigrateTypes } from './types';
+
+  const { t } = useI18n();
+  const tableRef = useTemplateRef('table');
+
+  const tableComponentMap = {
+    [MigrateTypes.CLUSTER_MIGRATE]: ClusterMigrateTable,
+    [MigrateTypes.HOST_MIGRATE]: HostMigrateTable,
+  };
+
+  const migrateType = ref(MigrateTypes.CLUSTER_MIGRATE);
+
+  const defaultData = () => ({
+    tableData: [],
+    backupSource: BackupSourceType.REMOTE,
+    remark: '',
+  });
+
+  const formData = reactive(defaultData());
+
+  const { run: createTicketRun, loading: isSubmitting } = useCreateTicket<{
+    ip_source: 'resource_pool';
+    backup_source: string;
+    infos: {
+      cluster_ids: number[];
+      resource_spec: {
+        new_master: {
+          spec_id: 0;
+          hosts: {
+            bk_biz_id: number;
+            bk_cloud_id: number;
+            bk_host_id: number;
+            ip: string;
+          }[];
+        };
+        new_slave: {
+          spec_id: 0;
+          hosts: {
+            bk_biz_id: number;
+            bk_cloud_id: number;
+            bk_host_id: number;
+            ip: string;
+          }[];
+        };
+      };
+      display_info: {
+        type: MigrateTypes;
+      };
+    }[];
+  }>(TicketTypes.MYSQL_MIGRATE_CLUSTER);
+
+  const handleSubmit = async () => {
+    const infos = await tableRef.value!.getValue();
+    if (infos.length) {
+      createTicketRun({
+        details: {
+          ip_source: 'resource_pool',
+          backup_source: formData.backupSource,
+          infos,
+        },
+        remark: formData.remark,
+      });
+    }
+  };
+
+  const handleReset = () => {
+    Object.assign(formData, defaultData());
+  };
+</script>
+
+<style lang="less" scoped>
+  .mirgate-types-title {
+    position: relative;
+    font-size: @font-size-mini;
+    color: @title-color;
+
+    &::after {
+      position: absolute;
+      top: 2px;
+      right: -8px;
+      color: @danger-color;
+      content: '*';
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/Index.vue
new file mode 100644
index 0000000000..7d5a04e740
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/Index.vue
@@ -0,0 +1,32 @@
+<!--
+ * 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="components[page]" />
+</template>
+<script setup lang="ts">
+  import { useRoute } from 'vue-router';
+
+  import Page2 from '@views/db-manage/common/create-ticket-success/Index.vue';
+
+  import Page1 from './Create.vue';
+
+  const route = useRoute();
+
+  const components = {
+    create: Page1,
+    success: Page2,
+  };
+
+  const page = computed(() => (route.params.page as keyof typeof components) || 'create');
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterColumn.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterColumn.vue
new file mode 100644
index 0000000000..3d4e5704ca
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterColumn.vue
@@ -0,0 +1,147 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    :append-rules="rules"
+    field="cluster.cluster_domains"
+    fixed="left"
+    :label="t('目标集群')"
+    :loading="loading"
+    :min-width="300"
+    required>
+    <template #headAppend>
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-host-select"
+        @click="handleShowSelector">
+        <DbIcon type="batch-host-select" />
+      </span>
+    </template>
+    <Textarea
+      v-model="modelValue.cluster_domains"
+      :placeholder="t('请输入集群域名_多个集群用分隔符输入')"
+      @change="handleInputChange" />
+  </Column>
+  <ClusterSelector
+    v-model:is-show="showSelector"
+    :cluster-types="[ClusterTypes.TENDBHA]"
+    :selected="selected"
+    @change="handleSelectorChange" />
+</template>
+<script lang="ts">
+  const domainIdMap: Record<string, number> = {};
+</script>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import TendbhaModel from '@services/model/mysql/tendbha';
+  import { filterClusters } from '@services/source/dbbase';
+
+  import { ClusterTypes } from '@common/const';
+  import { batchSplitRegex, domainRegex } from '@common/regex';
+
+  import ClusterSelector from '@components/cluster-selector/Index.vue';
+  import { Column, Textarea } from '@components/editable-table/Index.vue';
+
+  interface Props {
+    selectedIds: number[];
+  }
+
+  interface Emits {
+    (e: 'batch-edit', list: TendbhaModel[]): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<{
+    cluster_ids: number[];
+    cluster_domains: string;
+  }>({
+    default: () => [],
+  });
+
+  const { t } = useI18n();
+
+  const showSelector = ref(false);
+  const selected = computed<Record<string, TendbhaModel[]>>(() => ({
+    [ClusterTypes.TENDBHA]: props.selectedIds.map(
+      (id) =>
+        ({
+          id,
+          master_domain: domainIdMap[id],
+        }) as unknown as TendbhaModel,
+    ),
+  }));
+
+  const rules = [
+    {
+      validator: (value: string) => value.split(batchSplitRegex).every((item) => domainRegex.test(item)),
+      message: t('集群域名格式不正确'),
+      trigger: 'change',
+    },
+    {
+      validator: (value: string) => {
+        const notFounds: string[] = [];
+        value.split(batchSplitRegex).forEach((item) => {
+          if (!domainIdMap[item]) {
+            notFounds.push(item);
+          }
+        });
+        return notFounds.length ? t('目标集群xx不存在', [notFounds.join(',')]) : true;
+      },
+      message: '',
+      trigger: 'blur',
+    },
+  ];
+
+  const { run: queryCluster, loading } = useRequest(filterClusters, {
+    manual: true,
+    onSuccess: (data) => {
+      modelValue.value.cluster_ids = [];
+      if (data.length) {
+        Object.assign(domainIdMap, Object.fromEntries(data.map((cur) => [cur.master_domain, cur.id])));
+        modelValue.value.cluster_ids = data.map((item) => item.id);
+      }
+    },
+  });
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    if (value) {
+      queryCluster({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        exact_domain: value.split(batchSplitRegex).join(','),
+      });
+    }
+  };
+
+  const handleSelectorChange = (selected: Record<string, TendbhaModel[]>) => {
+    const dataList = selected[ClusterTypes.TENDBHA];
+    Object.assign(domainIdMap, Object.fromEntries(dataList.map((cur) => [cur.master_domain, cur.id])));
+    emits('batch-edit', dataList);
+  };
+</script>
+<style lang="less" scoped>
+  .batch-host-select {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterMigrateTable.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterMigrateTable.vue
new file mode 100644
index 0000000000..d476fc0741
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterMigrateTable.vue
@@ -0,0 +1,195 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <EditableTable
+    ref="table"
+    class="mb-20"
+    :model="tableData">
+    <EditableTableRow
+      v-for="(item, index) in tableData"
+      :key="index">
+      <ClusterColumn
+        v-model="item.cluster"
+        :selected-ids="selectedClusterIds"
+        @batch-edit="handleBatchEdit" />
+      <SingleHostColumn
+        v-model="item.newMaster"
+        field="newMaster.ip"
+        :label="t('新Master主机')"
+        :params="{ for_biz: currentBizId }" />
+      <SingleHostColumn
+        v-model="item.newSlave"
+        field="newSlave.ip"
+        :label="t('新Slave主机')"
+        :params="{ for_biz: currentBizId }" />
+      <OperationColumn
+        v-model:table-data="tableData"
+        :create-row-method="createTableRow" />
+    </EditableTableRow>
+  </EditableTable>
+</template>
+<script lang="ts" setup>
+  import { useTemplateRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import TendbhaModel from '@services/model/mysql/tendbha';
+
+  import { useGlobalBizs } from '@stores';
+
+  import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
+
+  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
+  import SingleHostColumn from '@views/db-manage/common/toolbox-field/column/single-host-column/Index.vue';
+
+  import { MigrateTypes } from '../types';
+
+  import ClusterColumn from './ClusterColumn.vue';
+
+  interface RowData {
+    cluster: {
+      cluster_ids: number[];
+      cluster_domains: string;
+    };
+    newMaster: {
+      bk_biz_id: number;
+      bk_cloud_id: number;
+      bk_host_id: number;
+      ip: string;
+    };
+    newSlave: {
+      bk_biz_id: number;
+      bk_cloud_id: number;
+      bk_host_id: number;
+      ip: string;
+    };
+  }
+
+  interface Props {
+    data: RowData[];
+  }
+
+  interface Exposes {
+    getValue: () => Promise<
+      {
+        cluster_ids: number[];
+        resource_spec: {
+          new_master: {
+            spec_id: 0;
+            hosts: {
+              bk_biz_id: number;
+              bk_cloud_id: number;
+              bk_host_id: number;
+              ip: string;
+            }[];
+          };
+          new_slave: {
+            spec_id: 0;
+            hosts: {
+              bk_biz_id: number;
+              bk_cloud_id: number;
+              bk_host_id: number;
+              ip: string;
+            }[];
+          };
+        };
+        display_info: {
+          type: MigrateTypes;
+        };
+      }[]
+    >;
+  }
+
+  const props = defineProps<Props>();
+
+  const { t } = useI18n();
+  const tableRef = useTemplateRef('table');
+  const { currentBizId } = useGlobalBizs();
+
+  const createTableRow = (data = {} as Partial<RowData>) => ({
+    cluster: data.cluster || {
+      cluster_ids: [],
+      cluster_domains: '',
+    },
+    newMaster: data.newMaster || {
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+    },
+    newSlave: data.newSlave || {
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+    },
+  });
+
+  const tableData = ref<RowData[]>([createTableRow()]);
+
+  const selectedClusterIds = computed(() => tableData.value.flatMap((item) => item.cluster.cluster_ids));
+
+  watch(
+    () => props.data,
+    () => {
+      if (props.data.length) {
+        tableData.value = [...props.data];
+      } else {
+        tableData.value = [createTableRow()];
+      }
+    },
+  );
+
+  const handleBatchEdit = (list: TendbhaModel[]) => {
+    const dataList = list.reduce<RowData[]>((acc, item) => {
+      if (!selectedClusterIds.value.includes(item.id)) {
+        acc.push(
+          createTableRow({
+            cluster: {
+              cluster_ids: [item.id],
+              cluster_domains: item.master_domain,
+            },
+          }),
+        );
+      }
+      return acc;
+    }, []);
+    tableData.value = [...(selectedClusterIds.value.length ? tableData.value : []), ...dataList];
+  };
+
+  defineExpose<Exposes>({
+    async getValue() {
+      const validateResult = await tableRef.value?.validate();
+      if (!validateResult) {
+        return [];
+      }
+
+      return tableData.value.map(({ cluster, newMaster, newSlave }) => ({
+        cluster_ids: cluster.cluster_ids,
+        resource_spec: {
+          new_master: {
+            spec_id: 0,
+            hosts: [newMaster],
+          },
+          new_slave: {
+            spec_id: 0,
+            hosts: [newSlave],
+          },
+        },
+        display_info: {
+          type: MigrateTypes.CLUSTER_MIGRATE,
+        },
+      }));
+    },
+  });
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/HostColumnGroup.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/HostColumnGroup.vue
new file mode 100644
index 0000000000..c5d15619af
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/HostColumnGroup.vue
@@ -0,0 +1,241 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    :append-rules="rules"
+    field="master.ip"
+    fixed="left"
+    :label="t('目标Master主机')"
+    :loading="loading"
+    :min-width="150"
+    required>
+    <template #headAppend>
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-host-select"
+        @click="handleShowSelector">
+        <DbIcon type="batch-host-select" />
+      </span>
+    </template>
+    <Input
+      v-model="modelValue.ip"
+      :placeholder="t('请输入IP')"
+      @change="handleInputChange" />
+  </Column>
+  <Column
+    :label="t('同机关联实例')"
+    :loading="loading"
+    :min-width="150">
+    <div
+      v-if="modelValue.related_instances.length"
+      class="related-clusters"
+      style="flex: 1">
+      <p
+        v-for="item in modelValue.related_instances"
+        :key="item">
+        {{ item }}
+      </p>
+    </div>
+    <Block
+      v-else
+      :placeholder="t('自动生成')" />
+  </Column>
+  <Column
+    :label="t('同机关联集群')"
+    :loading="loading"
+    :min-width="150">
+    <div
+      v-if="modelValue.related_clusters.length"
+      class="related-clusters"
+      style="flex: 1">
+      <p
+        v-for="item in modelValue.related_clusters"
+        :key="item">
+        {{ item }}
+      </p>
+    </div>
+    <Block
+      v-else
+      :placeholder="t('自动生成')" />
+  </Column>
+  <InstanceSelector
+    v-model:is-show="showSelector"
+    :cluster-types="[TENDBHA_HOST]"
+    :selected="selectedInstances"
+    :tab-list-config="tabListConfig"
+    @change="handleSelectorChange" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { checkInstance } from '@services/source/dbbase';
+
+  import { ClusterTypes } from '@common/const';
+  import { ipv4 } from '@common/regex';
+
+  import { Block, Column, Input } from '@components/editable-table/Index.vue';
+  import InstanceSelector, {
+    type InstanceSelectorValues,
+    type IValue,
+    type PanelListType,
+  } from '@components/instance-selector/Index.vue';
+
+  export type SelectorItem = IValue;
+
+  interface Props {
+    selected: {
+      ip: string;
+    }[];
+  }
+
+  interface Emits {
+    (e: 'batch-edit', list: IValue[]): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<{
+    bk_cloud_id: number;
+    bk_host_id?: number;
+    ip: string;
+    port: number;
+    cluster_ids: number[];
+    related_instances: string[];
+    related_clusters: string[];
+  }>({
+    default: () => ({
+      bk_cloud_id: 0,
+      ip: '',
+      port: 0,
+      cluster_ids: [],
+      related_instances: [],
+      related_clusters: [],
+    }),
+  });
+
+  const { t } = useI18n();
+
+  const TENDBHA_HOST = 'TendbhaHost';
+  const tabListConfig = {
+    [TENDBHA_HOST]: [
+      {
+        id: [TENDBHA_HOST],
+        name: t('目标Proxy主机'),
+        tableConfig: {
+          firsrColumn: {
+            label: t('Proxy 主机'),
+            field: 'ip',
+            role: 'proxy',
+          },
+        },
+      },
+      {
+        id: 'manualInput',
+        name: t('手动输入'),
+        tableConfig: {
+          firsrColumn: {
+            label: t('Proxy 主机'),
+            field: 'ip',
+            role: 'proxy',
+          },
+        },
+      },
+    ],
+  } as Record<string, PanelListType>;
+
+  const rules = [
+    {
+      validator: (value: string) => ipv4.test(value),
+      message: t('IP 格式不符合IPv4标准'),
+      trigger: 'change',
+    },
+    {
+      validator: () => Boolean(modelValue.value.bk_host_id),
+      message: t('目标主机不存在'),
+      trigger: 'blur',
+    },
+  ];
+
+  const showSelector = ref(false);
+  const selectedInstances = computed(
+    () =>
+      ({
+        [ClusterTypes.TENDBHA]: props.selected,
+      }) as unknown as InstanceSelectorValues<IValue>,
+  );
+
+  const { run: queryInstance, loading } = useRequest(checkInstance, {
+    manual: true,
+    onSuccess: (data) => {
+      const [hostInfo] = data;
+      const clusterIds: number[] = [];
+      const relatedInstances: string[] = [];
+      const relatedClusters: string[] = [];
+      data.forEach((item) => {
+        clusterIds.push(item.cluster_id);
+        relatedInstances.push(item.instance_address);
+        relatedClusters.push(item.master_domain);
+      });
+      modelValue.value = {
+        bk_cloud_id: hostInfo.bk_cloud_id,
+        bk_host_id: hostInfo.bk_host_id,
+        ip: hostInfo.ip,
+        port: hostInfo.port,
+        cluster_ids: clusterIds,
+        related_instances: relatedInstances,
+        related_clusters: relatedClusters,
+      };
+    },
+  });
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    if (value) {
+      queryInstance({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        instance_addresses: [value],
+      });
+    }
+  };
+
+  const handleSelectorChange = (selected: InstanceSelectorValues<IValue>) => {
+    emits('batch-edit', selected[TENDBHA_HOST]);
+  };
+</script>
+
+<style lang="less" scoped>
+  .batch-host-select {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+
+  .related-clusters {
+    padding: 10px 16px;
+    line-height: 20px;
+    background: #fff;
+
+    p {
+      width: 100%;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/HostMigrateTable.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/HostMigrateTable.vue
new file mode 100644
index 0000000000..ccf62f8c27
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/HostMigrateTable.vue
@@ -0,0 +1,222 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <EditableTable
+    ref="table"
+    class="mb-20"
+    :model="tableData">
+    <EditableTableRow
+      v-for="(item, index) in tableData"
+      :key="index">
+      <HostColumnGroup
+        v-model="item.master"
+        :selected="selected"
+        @batch-edit="handleBatchEdit" />
+      <SingleHostColumn
+        v-model="item.newMaster"
+        field="newMaster.ip"
+        :label="t('新Master主机')"
+        :min-width="150"
+        :params="{ for_biz: currentBizId }" />
+      <SingleHostColumn
+        v-model="item.newSlave"
+        field="newSlave.ip"
+        :label="t('新Slave主机')"
+        :min-width="150"
+        :params="{ for_biz: currentBizId }" />
+      <OperationColumn
+        v-model:table-data="tableData"
+        :create-row-method="createTableRow" />
+    </EditableTableRow>
+  </EditableTable>
+</template>
+<script lang="ts" setup>
+  import { useTemplateRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import { useGlobalBizs } from '@stores';
+
+  import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
+
+  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
+  import SingleHostColumn from '@views/db-manage/common/toolbox-field/column/single-host-column/Index.vue';
+
+  import { MigrateTypes } from '../types';
+
+  import HostColumnGroup, { type SelectorItem } from './HostColumnGroup.vue';
+
+  interface RowData {
+    master: {
+      bk_cloud_id: number;
+      bk_host_id: number;
+      ip: string;
+      port: number;
+      cluster_ids: number[];
+      related_instances: string[];
+      related_clusters: string[];
+    };
+    newMaster: {
+      bk_biz_id: number;
+      bk_cloud_id: number;
+      bk_host_id: number;
+      ip: string;
+    };
+    newSlave: {
+      bk_biz_id: number;
+      bk_cloud_id: number;
+      bk_host_id: number;
+      ip: string;
+    };
+  }
+
+  interface Props {
+    data: RowData[];
+  }
+
+  interface Exposes {
+    getValue: () => Promise<
+      {
+        cluster_ids: number[];
+        resource_spec: {
+          new_master: {
+            spec_id: 0;
+            hosts: {
+              bk_biz_id: number;
+              bk_cloud_id: number;
+              bk_host_id: number;
+              ip: string;
+            }[];
+          };
+          new_slave: {
+            spec_id: 0;
+            hosts: {
+              bk_biz_id: number;
+              bk_cloud_id: number;
+              bk_host_id: number;
+              ip: string;
+            }[];
+          };
+        };
+        display_info: {
+          type: MigrateTypes;
+        };
+      }[]
+    >;
+  }
+
+  const props = defineProps<Props>();
+
+  const { t } = useI18n();
+  const tableRef = useTemplateRef('table');
+  const { currentBizId } = useGlobalBizs();
+
+  const createTableRow = (data = {} as Partial<RowData>) => ({
+    master: data.master || {
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+      port: 0,
+      cluster_ids: [],
+      related_instances: [],
+      related_clusters: [],
+    },
+    newMaster: data.newMaster || {
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+    },
+    newSlave: data.newSlave || {
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+    },
+  });
+
+  const tableData = ref<RowData[]>([createTableRow()]);
+
+  const selected = computed(() => tableData.value.filter((item) => item.master.bk_host_id).map((item) => item.master));
+  const selectedMap = computed(() => Object.fromEntries(selected.value.map((cur) => [cur.ip, true])));
+
+  watch(
+    () => props.data,
+    () => {
+      if (props.data.length) {
+        tableData.value = [...props.data];
+      } else {
+        tableData.value = [createTableRow()];
+      }
+    },
+  );
+
+  const handleBatchEdit = (list: SelectorItem[]) => {
+    const dataList = list.reduce<RowData[]>((acc, item) => {
+      if (!selectedMap.value[item.ip]) {
+        const clusterIds: number[] = [];
+        const relatedClusters: string[] = [];
+        const relatedInstances: string[] = [];
+        const adminPort = item.related_instances[0].admin_port;
+        item.related_clusters.forEach((item) => {
+          clusterIds.push(item.id);
+          relatedClusters.push(item.immute_domain);
+        });
+        item.related_instances.forEach((item) => {
+          relatedInstances.push(item.instance);
+        });
+        acc.push(
+          createTableRow({
+            master: {
+              bk_cloud_id: item.bk_cloud_id,
+              bk_host_id: item.bk_host_id,
+              ip: item.ip,
+              port: adminPort,
+              cluster_ids: clusterIds,
+              related_instances: relatedInstances,
+              related_clusters: relatedClusters,
+            },
+          }),
+        );
+      }
+      return acc;
+    }, []);
+    tableData.value = [...(selected.value.length ? tableData.value : []), ...dataList];
+  };
+
+  defineExpose<Exposes>({
+    async getValue() {
+      const validateResult = await tableRef.value?.validate();
+      if (!validateResult) {
+        return [];
+      }
+
+      return tableData.value.map(({ master, newMaster, newSlave }) => ({
+        cluster_ids: master.cluster_ids,
+        resource_spec: {
+          new_master: {
+            spec_id: 0,
+            hosts: [newMaster],
+          },
+          new_slave: {
+            spec_id: 0,
+            hosts: [newSlave],
+          },
+        },
+        display_info: {
+          type: MigrateTypes.HOST_MIGRATE,
+        },
+      }));
+    },
+  });
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/types.ts b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/types.ts
new file mode 100644
index 0000000000..23dbe7c1f6
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/types.ts
@@ -0,0 +1,8 @@
+/**
+ * CLUSTER_MIGRATE: 集群迁移
+ * HOST_MIGRATE: 整机迁移
+ */
+export enum MigrateTypes {
+  CLUSTER_MIGRATE = 'CLUSTER_MIGRATE',
+  HOST_MIGRATE = 'HOST_MIGRATE',
+}
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_ADD/Create.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_ADD/Create.vue
new file mode 100644
index 0000000000..ab97b4d2a8
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_ADD/Create.vue
@@ -0,0 +1,206 @@
+<!--
+ * 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>
+    <BkAlert
+      class="mb-20"
+      closable
+      :title="t('给集群添加Proxy实例')" />
+    <BkForm
+      v-model="formData"
+      class="mb-20"
+      form-type="vertical">
+      <EditableTable
+        ref="table"
+        class="mb-20"
+        :model="formData.tableData"
+        :rules="rules">
+        <EditableTableRow
+          v-for="(item, index) in formData.tableData"
+          :key="index">
+          <WithRelatedClustersColumn
+            v-model="item.cluster"
+            :selected="selected"
+            @batch-edit="handleBatchEdit" />
+          <SingleHostColumn
+            v-model="item.proxy"
+            field="proxy.ip"
+            :label="t('新Proxy主机')" />
+          <OperationColumn
+            v-model:table-data="formData.tableData"
+            :create-row-method="createTableRow" />
+        </EditableTableRow>
+      </EditableTable>
+      <TicketRemark v-model="formData.remark" />
+    </BkForm>
+    <template #action>
+      <BkButton
+        class="mr-8 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 lang="ts" setup>
+  import { reactive, useTemplateRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import TendbhaModel from '@services/model/mysql/tendbha';
+
+  import { useCreateTicket } from '@hooks';
+
+  import { TicketTypes } from '@common/const';
+
+  import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
+
+  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
+  import SingleHostColumn from '@views/db-manage/common/toolbox-field/column/single-host-column/Index.vue';
+  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+  import WithRelatedClustersColumn from '@views/db-manage/mysql/common/edit-table-column/WithRelatedClustersColumn.vue';
+
+  interface RowData {
+    cluster: {
+      id: number;
+      master_domain: string;
+      related_clusters: {
+        id: number;
+        master_domain: string;
+      }[];
+    };
+    proxy: {
+      bk_biz_id: number;
+      bk_cloud_id: number;
+      bk_host_id: number;
+      ip: string;
+    };
+  }
+
+  const { t } = useI18n();
+  const tableRef = useTemplateRef('table');
+
+  const createTableRow = (data = {} as Partial<RowData>) => ({
+    cluster: data.cluster || {
+      id: 0,
+      master_domain: '',
+      related_clusters: [],
+    },
+    proxy: data.proxy || {
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+    },
+  });
+
+  const defaultData = () => ({
+    tableData: [createTableRow()],
+    remark: '',
+  });
+
+  const formData = reactive(defaultData());
+  // 表格行内已通过校验的集群为所选集群
+  const selected = computed(() => formData.tableData.filter((item) => item.cluster.id).map((item) => item.cluster));
+  // 集群域名到自身及其下集群id、域名映射
+  const clusterMap = computed(() => {
+    const result = selected.value.reduce<Record<string, { ids: number[]; domains: string[] }>>((acc, cur) => {
+      acc[cur.master_domain] = {
+        ids: [cur.id, ...cur.related_clusters.map((item) => item.id)],
+        domains: [cur.master_domain, ...cur.related_clusters.map((item) => item.master_domain)],
+      };
+      return acc;
+    }, {});
+    return result;
+  });
+
+  const rules = {
+    'cluster.master_domain': [
+      {
+        validator: (value: string) => {
+          const repeatTarget = Object.keys(clusterMap.value).find(
+            (domain) => clusterMap.value[domain].domains.includes(value) && domain !== value,
+          );
+          return repeatTarget ? t('目标集群是集群target的关联集群_请勿重复添加', { target: repeatTarget }) : true;
+        },
+        message: '',
+        trigger: 'blur',
+      },
+    ],
+  };
+
+  const { run: createTicketRun, loading: isSubmitting } = useCreateTicket<{
+    infos: {
+      cluster_ids: number[];
+      new_proxy: {
+        bk_biz_id: number;
+        bk_cloud_id: number;
+        bk_host_id: number;
+        ip: string;
+      };
+    }[];
+  }>(TicketTypes.MYSQL_PROXY_ADD);
+
+  const handleSubmit = async () => {
+    const result = await tableRef.value!.validate();
+    if (!result) {
+      return;
+    }
+    createTicketRun({
+      details: {
+        infos: formData.tableData.map((item) => ({
+          cluster_ids: clusterMap.value[item.cluster.master_domain].ids,
+          new_proxy: item.proxy,
+        })),
+      },
+      remark: formData.remark,
+    });
+  };
+
+  const handleReset = () => {
+    Object.assign(formData, defaultData());
+  };
+
+  const handleBatchEdit = (list: TendbhaModel[]) => {
+    const dataList = list.reduce<RowData[]>((acc, item) => {
+      if (!clusterMap.value[item.master_domain]) {
+        acc.push(
+          createTableRow({
+            cluster: {
+              id: item.id,
+              master_domain: item.master_domain,
+              related_clusters: [],
+            },
+          }),
+        );
+      }
+      return acc;
+    }, []);
+    formData.tableData = [...(selected.value.length ? formData.tableData : []), ...dataList];
+    nextTick(() => {
+      tableRef.value!.validateByColumnIndex(0);
+    });
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_ADD/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_ADD/Index.vue
new file mode 100644
index 0000000000..7d5a04e740
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_ADD/Index.vue
@@ -0,0 +1,32 @@
+<!--
+ * 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="components[page]" />
+</template>
+<script setup lang="ts">
+  import { useRoute } from 'vue-router';
+
+  import Page2 from '@views/db-manage/common/create-ticket-success/Index.vue';
+
+  import Page1 from './Create.vue';
+
+  const route = useRoute();
+
+  const components = {
+    create: Page1,
+    success: Page2,
+  };
+
+  const page = computed(() => (route.params.page as keyof typeof components) || 'create');
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/Create.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/Create.vue
new file mode 100644
index 0000000000..bbf03f9e9c
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/Create.vue
@@ -0,0 +1,170 @@
+<!--
+ * 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>
+    <BkAlert
+      class="mb-20"
+      closable
+      :title="t('对集群的Proxy实例进行替换')" />
+    <div>
+      <strong class="proxy-switch-types-title">
+        {{ t('替换类型') }}
+      </strong>
+      <div class="mt-8 mb-20">
+        <CardCheckbox
+          v-model="replaceType"
+          :desc="t('只替换目标实例')"
+          icon="rebuild"
+          :title="t('实例替换')"
+          :true-value="ProxyReplaceTypes.INSTANCE_REPLACE" />
+        <CardCheckbox
+          v-model="replaceType"
+          class="ml-8"
+          :desc="t('主机关联的所有实例一并替换')"
+          icon="host"
+          :title="t('整机替换')"
+          :true-value="ProxyReplaceTypes.HOST_REPLACE" />
+      </div>
+    </div>
+    <BkForm
+      v-model="formData"
+      class="mb-20"
+      form-type="vertical">
+      <Component
+        :is="tableComponentMap[replaceType]"
+        ref="table"
+        :data="formData.tableData" />
+      <IgnoreBiz
+        v-model="formData.force"
+        v-bk-tooltips="t('如忽略_在有连接的情况下Proxy也会执行替换')" />
+      <TicketRemark v-model="formData.remark" />
+    </BkForm>
+    <template #action>
+      <BkButton
+        class="mr-8 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 lang="ts" setup>
+  import { reactive, useTemplateRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import { useCreateTicket } from '@hooks';
+
+  import { TicketTypes } from '@common/const';
+
+  import CardCheckbox from '@components/db-card-checkbox/CardCheckbox.vue';
+
+  import IgnoreBiz from '@views/db-manage/common/toolbox-field/form-item/ignore-biz/Index.vue';
+  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+
+  import HostTable from './components/HostTable.vue';
+  import InstanceTable from './components/InstanceTable.vue';
+  import { ProxyReplaceTypes } from './types';
+
+  const { t } = useI18n();
+  const tableRef = useTemplateRef('table');
+
+  const defaultData = () => ({
+    tableData: [],
+    force: false,
+    remark: '',
+  });
+
+  const tableComponentMap = {
+    [ProxyReplaceTypes.INSTANCE_REPLACE]: InstanceTable,
+    [ProxyReplaceTypes.HOST_REPLACE]: HostTable,
+  };
+
+  const replaceType = ref(ProxyReplaceTypes.INSTANCE_REPLACE);
+  const formData = reactive(defaultData());
+
+  const { run: createTicketRun, loading: isSubmitting } = useCreateTicket<{
+    force: boolean;
+    infos: {
+      cluster_ids: number[];
+      origin_proxy: {
+        bk_biz_id: number;
+        bk_cloud_id: number;
+        bk_host_id: number;
+        ip: string;
+        port?: number;
+        instance_address?: string;
+      };
+      target_proxy: {
+        bk_biz_id: number;
+        bk_cloud_id: number;
+        bk_host_id: number;
+        ip: string;
+      };
+      display_info: {
+        type: ProxyReplaceTypes;
+        related_clusters: string[];
+      };
+    }[];
+  }>(TicketTypes.MYSQL_PROXY_SWITCH);
+
+  const handleSubmit = async () => {
+    const infos = await tableRef.value!.getValue();
+    if (infos.length) {
+      createTicketRun({
+        details: {
+          force: formData.force,
+          infos,
+        },
+        remark: formData.remark,
+      });
+    }
+  };
+
+  const handleReset = () => {
+    Object.assign(formData, defaultData());
+  };
+</script>
+
+<style lang="less" scoped>
+  .proxy-switch-types-title {
+    position: relative;
+    font-size: @font-size-mini;
+    color: @title-color;
+
+    &::after {
+      position: absolute;
+      top: 2px;
+      right: -8px;
+      color: @danger-color;
+      content: '*';
+    }
+  }
+
+  .safe-action-text {
+    padding-bottom: 2px;
+    border-bottom: 1px dashed #979ba5;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/Index.vue
new file mode 100644
index 0000000000..7d5a04e740
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/Index.vue
@@ -0,0 +1,32 @@
+<!--
+ * 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="components[page]" />
+</template>
+<script setup lang="ts">
+  import { useRoute } from 'vue-router';
+
+  import Page2 from '@views/db-manage/common/create-ticket-success/Index.vue';
+
+  import Page1 from './Create.vue';
+
+  const route = useRoute();
+
+  const components = {
+    create: Page1,
+    success: Page2,
+  };
+
+  const page = computed(() => (route.params.page as keyof typeof components) || 'create');
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/HostColumnGroup.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/HostColumnGroup.vue
new file mode 100644
index 0000000000..031274c59b
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/HostColumnGroup.vue
@@ -0,0 +1,246 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    :append-rules="rules"
+    field="originProxy.ip"
+    fixed="left"
+    :label="t('目标Proxy主机')"
+    :loading="loading"
+    :min-width="300"
+    required>
+    <template #headAppend>
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-host-select"
+        @click="handleShowSelector">
+        <DbIcon type="batch-host-select" />
+      </span>
+    </template>
+    <Input
+      v-model="modelValue.ip"
+      :placeholder="t('请输入IP')"
+      @change="handleInputChange" />
+  </Column>
+  <Column
+    :label="t('同机关联实例')"
+    :loading="loading"
+    :min-width="300">
+    <div
+      v-if="modelValue.related_instances.length"
+      class="related-clusters"
+      style="flex: 1">
+      <p
+        v-for="item in modelValue.related_instances"
+        :key="item">
+        {{ item }}
+      </p>
+    </div>
+    <Block
+      v-else
+      :placeholder="t('自动生成')" />
+  </Column>
+  <Column
+    :label="t('同机关联集群')"
+    :loading="loading"
+    :min-width="300">
+    <div
+      v-if="modelValue.related_clusters.length"
+      class="related-clusters"
+      style="flex: 1">
+      <p
+        v-for="item in modelValue.related_clusters"
+        :key="item">
+        {{ item }}
+      </p>
+    </div>
+    <Block
+      v-else
+      :placeholder="t('自动生成')" />
+  </Column>
+  <InstanceSelector
+    v-model:is-show="showSelector"
+    :cluster-types="[TENDBHA_HOST]"
+    :selected="selectedInstances"
+    :tab-list-config="tabListConfig"
+    @change="handleSelectorChange" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { checkInstance } from '@services/source/dbbase';
+
+  import { ClusterTypes } from '@common/const';
+  import { ipv4 } from '@common/regex';
+
+  import { Block, Column, Input } from '@components/editable-table/Index.vue';
+  import InstanceSelector, {
+    type InstanceSelectorValues,
+    type IValue,
+    type PanelListType,
+  } from '@components/instance-selector/Index.vue';
+
+  export type SelectorItem = IValue;
+
+  interface Props {
+    selected: {
+      ip: string;
+    }[];
+  }
+
+  interface Emits {
+    (e: 'batch-edit', list: IValue[]): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<{
+    bk_cloud_id: number;
+    bk_host_id?: number;
+    ip: string;
+    port: number;
+    cluster_ids: number[];
+    related_instances: string[];
+    related_clusters: string[];
+  }>({
+    default: () => ({
+      bk_cloud_id: 0,
+      ip: '',
+      port: 0,
+      cluster_ids: [],
+      related_instances: [],
+      related_clusters: [],
+    }),
+  });
+
+  const { t } = useI18n();
+
+  const TENDBHA_HOST = 'TendbhaHost';
+  const tabListConfig = {
+    [TENDBHA_HOST]: [
+      {
+        id: [TENDBHA_HOST],
+        name: t('目标Proxy主机'),
+        tableConfig: {
+          firsrColumn: {
+            label: t('Proxy 主机'),
+            field: 'ip',
+            role: 'proxy',
+          },
+        },
+      },
+      {
+        id: 'manualInput',
+        name: t('手动输入'),
+        tableConfig: {
+          firsrColumn: {
+            label: t('Proxy 主机'),
+            field: 'ip',
+            role: 'proxy',
+          },
+        },
+      },
+    ],
+  } as Record<string, PanelListType>;
+
+  const rules = [
+    {
+      validator: (value: string) => ipv4.test(value),
+      message: t('IP 格式不符合IPv4标准'),
+      trigger: 'change',
+    },
+    {
+      validator: (value: string) => props.selected.filter((item) => item.ip === value).length < 2,
+      message: t('目标主机重复'),
+      trigger: 'blur',
+    },
+    {
+      validator: () => Boolean(modelValue.value.bk_host_id),
+      message: t('目标主机不存在'),
+      trigger: 'blur',
+    },
+  ];
+
+  const showSelector = ref(false);
+  const selectedInstances = computed(
+    () =>
+      ({
+        [ClusterTypes.TENDBHA]: props.selected,
+      }) as unknown as InstanceSelectorValues<IValue>,
+  );
+
+  const { run: queryInstance, loading } = useRequest(checkInstance, {
+    manual: true,
+    onSuccess: (data) => {
+      const [hostInfo] = data;
+      const clusterIds: number[] = [];
+      const relatedInstances: string[] = [];
+      const relatedClusters: string[] = [];
+      data.forEach((item) => {
+        clusterIds.push(item.cluster_id);
+        relatedInstances.push(item.instance_address);
+        relatedClusters.push(item.master_domain);
+      });
+      modelValue.value = {
+        bk_cloud_id: hostInfo.bk_cloud_id,
+        bk_host_id: hostInfo.bk_host_id,
+        ip: hostInfo.ip,
+        port: hostInfo.port,
+        cluster_ids: clusterIds,
+        related_instances: relatedInstances,
+        related_clusters: relatedClusters,
+      };
+    },
+  });
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    if (value) {
+      queryInstance({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        instance_addresses: [value],
+      });
+    }
+  };
+
+  const handleSelectorChange = (selected: InstanceSelectorValues<IValue>) => {
+    emits('batch-edit', selected[TENDBHA_HOST]);
+  };
+</script>
+
+<style lang="less" scoped>
+  .batch-host-select {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+
+  .related-clusters {
+    padding: 10px 16px;
+    line-height: 20px;
+    background: #fff;
+
+    p {
+      width: 100%;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/HostTable.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/HostTable.vue
new file mode 100644
index 0000000000..710fc529e5
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/HostTable.vue
@@ -0,0 +1,209 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <EditableTable
+    ref="table"
+    class="mb-20"
+    :model="tableData">
+    <EditableTableRow
+      v-for="(item, index) in tableData"
+      :key="index">
+      <HostColumnGroup
+        v-model="item.originProxy"
+        :selected="selected"
+        @batch-edit="handleBatchEdit" />
+      <SingleHostColumn
+        v-model="item.targetProxy"
+        field="targetProxy.ip"
+        :label="t('新Proxy主机')"
+        :params="{ for_biz: currentBizId }" />
+      <OperationColumn
+        v-model:table-data="tableData"
+        :create-row-method="createTableRow" />
+    </EditableTableRow>
+  </EditableTable>
+</template>
+<script lang="ts" setup>
+  import { useTemplateRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import { useGlobalBizs } from '@stores';
+
+  import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
+
+  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
+  import SingleHostColumn from '@views/db-manage/common/toolbox-field/column/single-host-column/Index.vue';
+
+  import { ProxyReplaceTypes } from '../types';
+
+  import HostColumnGroup, { type SelectorItem } from './HostColumnGroup.vue';
+
+  interface RowData {
+    originProxy: {
+      bk_cloud_id: number;
+      bk_host_id: number;
+      ip: string;
+      port: number;
+      cluster_ids: number[];
+      related_instances: string[];
+      related_clusters: string[];
+    };
+    targetProxy: {
+      bk_biz_id: number;
+      bk_cloud_id: number;
+      bk_host_id: number;
+      ip: string;
+    };
+  }
+
+  interface Props {
+    data: RowData[];
+  }
+
+  interface Exposes {
+    getValue: () => Promise<
+      {
+        cluster_ids: number[];
+        origin_proxy: {
+          bk_biz_id: number;
+          bk_cloud_id: number;
+          bk_host_id: number;
+          ip: string;
+          port?: number;
+          instance_address?: string;
+        };
+        target_proxy: {
+          bk_biz_id: number;
+          bk_cloud_id: number;
+          bk_host_id: number;
+          ip: string;
+        };
+        display_info: {
+          type: ProxyReplaceTypes;
+          related_clusters: string[];
+        };
+      }[]
+    >;
+  }
+
+  const props = defineProps<Props>();
+
+  const { t } = useI18n();
+  const tableRef = useTemplateRef('table');
+  const { currentBizId } = useGlobalBizs();
+
+  const createTableRow = (data = {} as Partial<RowData>) => ({
+    originProxy: data.originProxy || {
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+      port: 0,
+      cluster_ids: [],
+      related_instances: [],
+      related_clusters: [],
+    },
+    targetProxy: data.targetProxy || {
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+    },
+  });
+
+  const tableData = ref<RowData[]>([createTableRow()]);
+
+  const selected = computed(() =>
+    tableData.value
+      .filter((item) => item.originProxy.bk_host_id)
+      .map((item) => ({
+        ip: item.originProxy.ip,
+      })),
+  );
+  const selectedMap = computed(() => Object.fromEntries(selected.value.map((cur) => [cur.ip, true])));
+
+  watch(
+    () => props.data,
+    () => {
+      if (props.data.length) {
+        tableData.value = [...props.data];
+      } else {
+        tableData.value = [createTableRow()];
+      }
+    },
+  );
+
+  const handleBatchEdit = (list: SelectorItem[]) => {
+    const dataList = list.reduce<RowData[]>((acc, item) => {
+      if (!selectedMap.value[item.ip]) {
+        const clusterIds: number[] = [];
+        const relatedClusters: string[] = [];
+        const relatedInstances: string[] = [];
+        const adminPort = item.related_instances[0].admin_port;
+        item.related_clusters.forEach((item) => {
+          clusterIds.push(item.id);
+          relatedClusters.push(item.immute_domain);
+        });
+        item.related_instances.forEach((item) => {
+          relatedInstances.push(item.instance);
+        });
+        acc.push(
+          createTableRow({
+            originProxy: {
+              bk_cloud_id: item.bk_cloud_id,
+              bk_host_id: item.bk_host_id,
+              ip: item.ip,
+              port: adminPort,
+              cluster_ids: clusterIds,
+              related_instances: relatedInstances,
+              related_clusters: relatedClusters,
+            },
+          }),
+        );
+      }
+      return acc;
+    }, []);
+    tableData.value = [...(selected.value.length ? tableData.value : []), ...dataList];
+  };
+
+  defineExpose<Exposes>({
+    async getValue() {
+      const validateResult = await tableRef.value?.validate();
+      if (!validateResult) {
+        return [];
+      }
+
+      return tableData.value.map(({ originProxy, targetProxy }) => ({
+        cluster_ids: originProxy.cluster_ids,
+        origin_proxy: {
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          bk_cloud_id: originProxy.bk_cloud_id,
+          bk_host_id: originProxy.bk_host_id,
+          ip: originProxy.ip,
+          port: originProxy.port,
+        },
+        target_proxy: {
+          bk_biz_id: targetProxy.bk_biz_id,
+          bk_cloud_id: targetProxy.bk_cloud_id,
+          bk_host_id: targetProxy.bk_host_id,
+          ip: targetProxy.ip,
+        },
+        display_info: {
+          type: ProxyReplaceTypes.HOST_REPLACE,
+          related_instances: originProxy.related_instances,
+          related_clusters: originProxy.related_clusters,
+        },
+      }));
+    },
+  });
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/InstanceColumnGroup.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/InstanceColumnGroup.vue
new file mode 100644
index 0000000000..af9104ea8e
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/InstanceColumnGroup.vue
@@ -0,0 +1,198 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    :append-rules="rules"
+    field="originProxy.instance_address"
+    fixed="left"
+    :label="t('目标Proxy实例')"
+    :loading="loading"
+    :min-width="300"
+    required>
+    <template #headAppend>
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-host-select"
+        @click="handleShowSelector">
+        <DbIcon type="batch-host-select" />
+      </span>
+    </template>
+    <Input
+      v-model="modelValue.instance_address"
+      :placeholder="t('请输入IP:Port')"
+      @change="handleInputChange" />
+  </Column>
+  <Column
+    :label="t('关联集群')"
+    :loading="loading"
+    :min-width="300">
+    <Block
+      v-model="modelValue.master_domain"
+      :placeholder="t('自动生成')" />
+  </Column>
+  <InstanceSelector
+    v-model:is-show="showSelector"
+    :cluster-types="[ClusterTypes.TENDBHA]"
+    :selected="selectedInstances"
+    :tab-list-config="tabListConfig"
+    @change="handleSelectorChange" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { checkInstance } from '@services/source/dbbase';
+
+  import { ClusterTypes } from '@common/const';
+  import { ipPort } from '@common/regex';
+
+  import { Block, Column, Input } from '@components/editable-table/Index.vue';
+  import InstanceSelector, {
+    type InstanceSelectorValues,
+    type IValue,
+    type PanelListType,
+  } from '@components/instance-selector/Index.vue';
+
+  export type SelectorItem = IValue;
+
+  interface Props {
+    selected: {
+      instance_address: string;
+    }[];
+  }
+
+  interface Emits {
+    (e: 'batch-edit', list: IValue[]): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<{
+    bk_cloud_id: number;
+    bk_host_id?: number;
+    ip: string;
+    port: number;
+    cluster_id: number;
+    instance_address: string;
+    master_domain: string;
+  }>({
+    default: () => ({
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+      port: 0,
+      cluster_id: 0,
+      instance_address: '',
+      master_domain: '',
+    }),
+  });
+
+  const { t } = useI18n();
+
+  const tabListConfig = {
+    [ClusterTypes.TENDBHA]: [
+      {
+        id: ClusterTypes.TENDBHA,
+        name: t('目标实例'),
+        tableConfig: {
+          firsrColumn: {
+            label: t('Proxy 实例'),
+            field: 'instance_address',
+            role: 'proxy',
+          },
+        },
+      },
+      {
+        id: 'manualInput',
+        name: t('手动输入'),
+        tableConfig: {
+          firsrColumn: {
+            label: t('Proxy 实例'),
+            field: 'instance_address',
+            role: 'proxy',
+          },
+        },
+      },
+    ],
+  } as Record<ClusterTypes, PanelListType>;
+
+  const showSelector = ref(false);
+  const selectedInstances = computed(
+    () =>
+      ({
+        [ClusterTypes.TENDBHA]: props.selected,
+      }) as unknown as InstanceSelectorValues<IValue>,
+  );
+
+  const rules = [
+    {
+      validator: (value: string) => ipPort.test(value),
+      message: t('格式不符合要求'),
+      trigger: 'change',
+    },
+    {
+      validator: (value: string) => props.selected.filter((item) => item.instance_address === value).length < 2,
+      message: t('目标实例重复'),
+      trigger: 'blur',
+    },
+    {
+      validator: () => Boolean(modelValue.value.bk_host_id),
+      message: t('目标实例不存在'),
+      trigger: 'blur',
+    },
+  ];
+
+  const { run: queryInstance, loading } = useRequest(checkInstance, {
+    manual: true,
+    onSuccess: (data) => {
+      const [hostInfo] = data;
+      modelValue.value = {
+        bk_cloud_id: hostInfo.bk_cloud_id,
+        bk_host_id: hostInfo.bk_host_id,
+        ip: hostInfo.ip,
+        port: hostInfo.port,
+        cluster_id: hostInfo.cluster_id,
+        instance_address: hostInfo.instance_address,
+        master_domain: hostInfo.master_domain,
+      };
+    },
+  });
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    if (value) {
+      queryInstance({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        instance_addresses: [value],
+      });
+    }
+  };
+
+  const handleSelectorChange = (selected: InstanceSelectorValues<IValue>) => {
+    emits('batch-edit', selected[ClusterTypes.TENDBHA]);
+  };
+</script>
+
+<style lang="less" scoped>
+  .batch-host-select {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/InstanceTable.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/InstanceTable.vue
new file mode 100644
index 0000000000..624a84d399
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/InstanceTable.vue
@@ -0,0 +1,198 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <EditableTable
+    ref="table"
+    class="mb-20"
+    :model="tableData">
+    <EditableTableRow
+      v-for="(item, index) in tableData"
+      :key="index">
+      <InstanceColumnGroup
+        v-model="item.originProxy"
+        :selected="selected"
+        @batch-edit="handleBatchEdit" />
+      <SingleHostColumn
+        v-model="item.targetProxy"
+        field="targetProxy.ip"
+        :label="t('新Proxy主机')"
+        :params="{ for_biz: currentBizId }" />
+      <OperationColumn
+        v-model:table-data="tableData"
+        :create-row-method="createTableRow" />
+    </EditableTableRow>
+  </EditableTable>
+</template>
+<script lang="ts" setup>
+  import { useTemplateRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import { useGlobalBizs } from '@stores';
+
+  import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
+
+  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
+  import SingleHostColumn from '@views/db-manage/common/toolbox-field/column/single-host-column/Index.vue';
+
+  import { ProxyReplaceTypes } from '../types';
+
+  import InstanceColumnGroup, { type SelectorItem } from './InstanceColumnGroup.vue';
+
+  interface RowData {
+    originProxy: {
+      bk_cloud_id: number;
+      bk_host_id: number;
+      ip: string;
+      port: number;
+      cluster_id: number;
+      instance_address: string;
+      master_domain: string;
+    };
+    targetProxy: {
+      bk_biz_id: number;
+      bk_cloud_id: number;
+      bk_host_id: number;
+      ip: string;
+    };
+  }
+
+  interface Props {
+    data: RowData[];
+  }
+
+  interface Exposes {
+    getValue: () => Promise<
+      {
+        cluster_ids: number[];
+        origin_proxy: {
+          bk_biz_id: number;
+          bk_cloud_id: number;
+          bk_host_id: number;
+          ip: string;
+          port?: number;
+          instance_address?: string;
+        };
+        target_proxy: {
+          bk_biz_id: number;
+          bk_cloud_id: number;
+          bk_host_id: number;
+          ip: string;
+        };
+        display_info: {
+          type: ProxyReplaceTypes;
+          related_clusters: string[];
+        };
+      }[]
+    >;
+  }
+
+  const props = defineProps<Props>();
+
+  const { t } = useI18n();
+  const tableRef = useTemplateRef('table');
+  const { currentBizId } = useGlobalBizs();
+
+  const createTableRow = (data = {} as Partial<RowData>) => ({
+    originProxy: data.originProxy || {
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+      port: 0,
+      cluster_id: 0,
+      instance_address: '',
+      master_domain: '',
+    },
+    targetProxy: data.targetProxy || {
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+    },
+  });
+
+  const tableData = ref<RowData[]>([createTableRow()]);
+
+  const selected = computed(() =>
+    tableData.value
+      .filter((item) => item.originProxy.bk_host_id)
+      .map((item) => ({
+        instance_address: item.originProxy.instance_address,
+      })),
+  );
+  const selectedMap = computed(() => Object.fromEntries(selected.value.map((cur) => [cur.instance_address, true])));
+
+  watch(
+    () => props.data,
+    () => {
+      if (props.data.length) {
+        tableData.value = [...props.data];
+      } else {
+        tableData.value = [createTableRow()];
+      }
+    },
+  );
+
+  const handleBatchEdit = (list: SelectorItem[]) => {
+    const dataList = list.reduce<RowData[]>((acc, item) => {
+      if (!selectedMap.value[item.instance_address]) {
+        acc.push(
+          createTableRow({
+            originProxy: {
+              bk_cloud_id: item.bk_cloud_id,
+              bk_host_id: item.bk_host_id,
+              ip: item.ip,
+              port: item.port,
+              cluster_id: item.cluster_id,
+              instance_address: item.instance_address,
+              master_domain: item.master_domain,
+            },
+          }),
+        );
+      }
+      return acc;
+    }, []);
+    tableData.value = [...(selected.value.length ? tableData.value : []), ...dataList];
+  };
+
+  defineExpose<Exposes>({
+    async getValue() {
+      const validateResult = await tableRef.value?.validate();
+      if (!validateResult) {
+        return [];
+      }
+
+      return tableData.value.map(({ originProxy, targetProxy }) => ({
+        cluster_ids: [originProxy.cluster_id],
+        origin_proxy: {
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          bk_cloud_id: originProxy.bk_cloud_id,
+          bk_host_id: originProxy.bk_host_id,
+          ip: originProxy.ip,
+          port: originProxy.port,
+          instance_address: originProxy.instance_address,
+        },
+        target_proxy: {
+          bk_biz_id: targetProxy.bk_biz_id,
+          bk_cloud_id: targetProxy.bk_cloud_id,
+          bk_host_id: targetProxy.bk_host_id,
+          ip: targetProxy.ip,
+        },
+        display_info: {
+          type: ProxyReplaceTypes.INSTANCE_REPLACE,
+          related_clusters: [originProxy.master_domain],
+        },
+      }));
+    },
+  });
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/types.ts b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/types.ts
new file mode 100644
index 0000000000..15bac2342e
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/types.ts
@@ -0,0 +1,8 @@
+/**
+ * INSTANCE_REPLACE: 实例替换
+ * HOST_REPLACE: 整机替换
+ */
+export enum ProxyReplaceTypes {
+  INSTANCE_REPLACE = 'INSTANCE_REPLACE',
+  HOST_REPLACE = 'HOST_REPLACE',
+}
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/Create.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/Create.vue
new file mode 100644
index 0000000000..eaaa2e8957
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/Create.vue
@@ -0,0 +1,82 @@
+<!--
+ * 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>
+  <BkAlert
+    class="mb-20"
+    closable
+    :title="t('重建从库_原机器或新机器重新同步数据及权限_并且将域名解析指向同步好的机器')" />
+  <div>
+    <strong class="restore-types-title">
+      {{ t('重建类型') }}
+    </strong>
+    <div class="mt-8 mb-20">
+      <CardCheckbox
+        v-model="restoreType"
+        :desc="t('在原主机上进行故障从库实例重建')"
+        icon="rebuild"
+        :title="t('原地重建')"
+        :true-value="RestoreTypes.LOCAL_RESTORE" />
+      <CardCheckbox
+        v-model="restoreType"
+        class="ml-8"
+        :desc="t('将从库主机的全部实例重建到新主机')"
+        icon="host"
+        :title="t('新机重建')"
+        :true-value="RestoreTypes.RESTORE" />
+    </div>
+  </div>
+  <Component :is="comMap[restoreType]" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+
+  import CardCheckbox from '@components/db-card-checkbox/CardCheckbox.vue';
+
+  import LocalRestore from './components/local-restore/Index.vue';
+  import Restore from './components/restore/Index.vue';
+
+  /**
+   * INSTANCE_REPLACE: 原地重建
+   * HOST_REPLACE: 新机重建
+   */
+  enum RestoreTypes {
+    LOCAL_RESTORE = 'LOCAL_RESTORE',
+    RESTORE = 'RESTORE',
+  }
+
+  const { t } = useI18n();
+
+  const comMap = {
+    [RestoreTypes.LOCAL_RESTORE]: LocalRestore,
+    [RestoreTypes.RESTORE]: Restore,
+  };
+
+  const restoreType = ref(RestoreTypes.LOCAL_RESTORE);
+</script>
+
+<style lang="less" scoped>
+  .restore-types-title {
+    position: relative;
+    font-size: @font-size-mini;
+    color: @title-color;
+
+    &::after {
+      position: absolute;
+      top: 2px;
+      right: -8px;
+      color: @danger-color;
+      content: '*';
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/Index.vue
new file mode 100644
index 0000000000..7d5a04e740
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/Index.vue
@@ -0,0 +1,32 @@
+<!--
+ * 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="components[page]" />
+</template>
+<script setup lang="ts">
+  import { useRoute } from 'vue-router';
+
+  import Page2 from '@views/db-manage/common/create-ticket-success/Index.vue';
+
+  import Page1 from './Create.vue';
+
+  const route = useRoute();
+
+  const components = {
+    create: Page1,
+    success: Page2,
+  };
+
+  const page = computed(() => (route.params.page as keyof typeof components) || 'create');
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/local-restore/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/local-restore/Index.vue
new file mode 100644
index 0000000000..e4279cd8bb
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/local-restore/Index.vue
@@ -0,0 +1,199 @@
+<!--
+ * 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>
+    <BkForm
+      v-model="formData"
+      class="mb-20"
+      form-type="vertical">
+      <EditableTable
+        ref="table"
+        class="mb-20"
+        :model="formData.tableData">
+        <EditableTableRow
+          v-for="(item, index) in formData.tableData"
+          :key="index">
+          <SlaveInstanceColumn
+            v-model="item.slave"
+            :selected="selected"
+            @batch-edit="handleBatchEdit" />
+          <Column
+            :label="t('所属集群')"
+            :min-width="150">
+            <Block
+              v-model="item.slave.master_domain"
+              :placeholder="t('自动生成')" />
+          </Column>
+          <OperationColumn
+            v-model:table-data="formData.tableData"
+            :create-row-method="createTableRow" />
+        </EditableTableRow>
+      </EditableTable>
+      <BackupSource v-model="formData.backupSource" />
+      <TicketRemark v-model="formData.remark" />
+    </BkForm>
+    <template #action>
+      <BkButton
+        class="mr-8 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 lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+
+  import { BackupSourceType } from '@services/types';
+
+  import { useCreateTicket } from '@hooks';
+
+  import { TicketTypes } from '@common/const';
+
+  import EditableTable, { Block, Column, Row as EditableTableRow } from '@components/editable-table/Index.vue';
+
+  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
+  import BackupSource from '@views/db-manage/common/toolbox-field/form-item/backup-source/Index.vue';
+  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+
+  import SlaveInstanceColumn, { type SelectorHost } from './SlaveInstanceColumn.vue';
+
+  interface RowData {
+    slave: {
+      bk_biz_id: number;
+      bk_cloud_id: number;
+      bk_host_id: number;
+      ip: string;
+      port: number;
+      instance_address: string;
+      cluster_id: number;
+      master_domain: string;
+    };
+  }
+
+  const { t } = useI18n();
+  const router = useRouter();
+  const tableRef = useTemplateRef('table');
+
+  const createTableRow = (data = {} as Partial<RowData>) => ({
+    slave: data.slave || {
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+      port: 0,
+      instance_address: '',
+      cluster_id: 0,
+      master_domain: '',
+    },
+  });
+
+  const defaultData = () => ({
+    tableData: [createTableRow()],
+    backupSource: BackupSourceType.REMOTE,
+    remark: '',
+  });
+
+  const formData = reactive(defaultData());
+  const selected = computed(() => formData.tableData.filter((item) => item.slave.bk_host_id).map((item) => item.slave));
+  const selectedMap = computed(() => Object.fromEntries(selected.value.map((cur) => [cur.instance_address, true])));
+
+  const { run: createTicketRun, loading: isSubmitting } = useCreateTicket<{
+    backup_source: BackupSourceType;
+    infos: {
+      cluster_id: number;
+      slave: {
+        bk_biz_id: number;
+        bk_host_id: number;
+        bk_cloud_id: number;
+        ip: string;
+        port: number;
+      };
+    }[];
+  }>(TicketTypes.MYSQL_RESTORE_LOCAL_SLAVE, {
+    onSuccess(ticketId) {
+      router.push({
+        name: TicketTypes.MYSQL_RESTORE_SLAVE, // 以新机重建单据为主路由
+        params: {
+          page: 'success',
+        },
+        query: {
+          ticketId,
+        },
+      });
+    },
+  });
+
+  const handleSubmit = async () => {
+    const valid = await tableRef.value!.validate();
+    if (valid) {
+      createTicketRun({
+        details: {
+          backup_source: formData.backupSource,
+          infos: formData.tableData.map((item) => ({
+            cluster_id: item.slave.cluster_id,
+            slave: {
+              bk_biz_id: item.slave.bk_biz_id,
+              bk_host_id: item.slave.bk_host_id,
+              bk_cloud_id: item.slave.bk_cloud_id,
+              ip: item.slave.ip,
+              port: item.slave.port,
+            },
+          })),
+        },
+        remark: formData.remark,
+      });
+    }
+  };
+
+  const handleReset = () => {
+    Object.assign(formData, defaultData());
+  };
+
+  const handleBatchEdit = (list: SelectorHost[]) => {
+    const dataList = list.reduce<RowData[]>((acc, item) => {
+      if (!selectedMap.value[item.instance_address]) {
+        acc.push(
+          createTableRow({
+            slave: {
+              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,
+              instance_address: item.instance_address,
+              cluster_id: item.cluster_id,
+              master_domain: item.master_domain,
+            },
+          }),
+        );
+      }
+      return acc;
+    }, []);
+    formData.tableData = [...(selected.value.length ? formData.tableData : []), ...dataList];
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/local-restore/SlaveInstanceColumn.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/local-restore/SlaveInstanceColumn.vue
new file mode 100644
index 0000000000..2328b3e564
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/local-restore/SlaveInstanceColumn.vue
@@ -0,0 +1,184 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    :append-rules="rules"
+    field="slave.instance_address"
+    fixed="left"
+    :label="t('目标从库实例')"
+    :loading="loading"
+    :min-width="150"
+    required>
+    <template #headAppend>
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-host-select"
+        @click="handleShowSelector">
+        <DbIcon type="batch-host-select" />
+      </span>
+    </template>
+    <Input
+      v-model="modelValue.instance_address"
+      :placeholder="t('请输入IP:Port')"
+      @change="handleInputChange" />
+  </Column>
+  <InstanceSelector
+    v-model:is-show="showSelector"
+    :cluster-types="[ClusterTypes.TENDBHA]"
+    :selected="selectedInstances"
+    :tab-list-config="tabListConfig"
+    @change="handleSelectorChange" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { checkInstance } from '@services/source/dbbase';
+
+  import { ClusterTypes } from '@common/const';
+  import { ipPort } from '@common/regex';
+
+  import { Column, Input } from '@components/editable-table/Index.vue';
+  import InstanceSelector, {
+    type InstanceSelectorValues,
+    type IValue,
+    type PanelListType,
+  } from '@components/instance-selector/Index.vue';
+
+  export type SelectorHost = IValue;
+
+  interface Props {
+    selected: {
+      instance_address: string;
+    }[];
+  }
+
+  interface Emits {
+    (e: 'batch-edit', list: IValue[]): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<{
+    bk_biz_id: number;
+    bk_cloud_id: number;
+    bk_host_id?: number;
+    ip: string;
+    port: number;
+    instance_address: string;
+    cluster_id: number;
+    master_domain: string;
+  }>({
+    default: () => ({
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      ip: '',
+      port: 0,
+      instance_address: '',
+      cluster_id: 0,
+      master_domain: '',
+    }),
+  });
+
+  const { t } = useI18n();
+
+  const tabListConfig = {
+    [ClusterTypes.TENDBHA]: [
+      {
+        name: t('目标从库'),
+        tableConfig: {
+          firsrColumn: {
+            label: t('Slave 实例'),
+            field: 'instance_address',
+            role: 'slave',
+          },
+        },
+      },
+    ],
+  } as unknown as Record<ClusterTypes, PanelListType>;
+
+  const showSelector = ref(false);
+  const selectedInstances = computed<InstanceSelectorValues<IValue>>(() => ({
+    [ClusterTypes.TENDBHA]: props.selected.map(
+      (item) =>
+        ({
+          instance_address: item.instance_address,
+        }) as IValue,
+    ),
+  }));
+
+  const rules = [
+    {
+      validator: (value: string) => ipPort.test(value),
+      message: t('格式不符合要求'),
+      trigger: 'change',
+    },
+    {
+      validator: (value: string) => props.selected.filter((item) => item.instance_address === value).length < 2,
+      message: t('目标实例重复'),
+      trigger: 'blur',
+    },
+    {
+      validator: () => Boolean(modelValue.value.bk_host_id),
+      message: t('目标实例不存在'),
+      trigger: 'blur',
+    },
+  ];
+
+  const { run: queryHost, loading } = useRequest(checkInstance, {
+    manual: true,
+    onSuccess: (data) => {
+      modelValue.value.bk_host_id = undefined;
+      if (data.length) {
+        const [currentHost] = data;
+        modelValue.value = {
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          bk_host_id: currentHost.bk_host_id,
+          bk_cloud_id: currentHost.bk_cloud_id,
+          ip: currentHost.ip,
+          port: currentHost.port,
+          instance_address: currentHost.instance_address,
+          cluster_id: currentHost.cluster_id,
+          master_domain: currentHost.master_domain,
+        };
+      }
+    },
+  });
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    if (value) {
+      queryHost({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        instance_addresses: [value],
+      });
+    }
+  };
+
+  const handleSelectorChange = (selected: InstanceSelectorValues<IValue>) => {
+    emits('batch-edit', selected[ClusterTypes.TENDBHA]);
+  };
+</script>
+<style lang="less" scoped>
+  .batch-host-select {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/restore/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/restore/Index.vue
new file mode 100644
index 0000000000..5b95ef5e56
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/restore/Index.vue
@@ -0,0 +1,216 @@
+<!--
+ * 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>
+    <BkForm
+      v-model="formData"
+      class="mb-20"
+      form-type="vertical">
+      <EditableTable
+        ref="table"
+        class="mb-20"
+        :model="formData.tableData">
+        <EditableTableRow
+          v-for="(item, index) in formData.tableData"
+          :key="index">
+          <SlaveHostColumnGroup
+            v-model="item.slave"
+            :selected="selected"
+            @batch-edit="handleBatchEdit" />
+          <SingleHostColumn
+            v-model="item.newSlave"
+            field="newSlave.ip"
+            :label="t('新从库主机')" />
+          <OperationColumn
+            v-model:table-data="formData.tableData"
+            :create-row-method="createTableRow" />
+        </EditableTableRow>
+      </EditableTable>
+      <BackupSource v-model="formData.backupSource" />
+      <TicketRemark v-model="formData.remark" />
+    </BkForm>
+    <template #action>
+      <BkButton
+        class="mr-8 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 lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+
+  import { BackupSourceType } from '@services/types';
+
+  import { useCreateTicket } from '@hooks';
+
+  import { TicketTypes } from '@common/const';
+
+  import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
+
+  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
+  import SingleHostColumn from '@views/db-manage/common/toolbox-field/column/single-host-column/Index.vue';
+  import BackupSource from '@views/db-manage/common/toolbox-field/form-item/backup-source/Index.vue';
+  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+
+  import SlaveHostColumnGroup, { type SelectorHost } from './SlaveHostColumnGroup.vue';
+
+  interface RowData {
+    slave: {
+      bk_biz_id: number;
+      bk_cloud_id: number;
+      bk_host_id: number;
+      ip: string;
+      related_clusters: {
+        id: number;
+        master_domain: string;
+      }[];
+    };
+    newSlave: {
+      bk_biz_id: number;
+      bk_host_id: number;
+      bk_cloud_id: number;
+      ip: string;
+    };
+  }
+
+  const { t } = useI18n();
+  const tableRef = useTemplateRef('table');
+
+  const createTableRow = (data = {} as Partial<RowData>) => ({
+    slave: data.slave || {
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+      related_clusters: [],
+    },
+    newSlave: data.newSlave || {
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+    },
+  });
+
+  const defaultData = () => ({
+    tableData: [createTableRow()],
+    backupSource: BackupSourceType.REMOTE,
+    remark: '',
+  });
+
+  const formData = reactive(defaultData());
+  const selected = computed(() => formData.tableData.filter((item) => item.slave.bk_host_id).map((item) => item.slave));
+  const selectedMap = computed(() => Object.fromEntries(selected.value.map((cur) => [cur.ip, true])));
+
+  const { run: createTicketRun, loading: isSubmitting } = useCreateTicket<{
+    ip_source: 'resource_pool';
+    backup_source: BackupSourceType;
+    infos: {
+      cluster_ids: number[];
+      old_nodes: {
+        old_slave: {
+          bk_biz_id: number;
+          bk_host_id: number;
+          bk_cloud_id: number;
+          ip: string;
+        }[];
+      };
+      resource_spec: {
+        new_slave: {
+          spec_id: number;
+          hosts: {
+            bk_biz_id: number;
+            bk_host_id: number;
+            bk_cloud_id: number;
+            ip: string;
+          }[];
+        };
+      };
+    }[];
+  }>(TicketTypes.MYSQL_RESTORE_SLAVE);
+
+  const handleSubmit = async () => {
+    const valid = await tableRef.value!.validate();
+    if (valid) {
+      createTicketRun({
+        details: {
+          ip_source: 'resource_pool',
+          backup_source: formData.backupSource,
+          infos: formData.tableData.map((item) => ({
+            cluster_ids: item.slave.related_clusters.map((item) => item.id),
+            old_nodes: {
+              old_slave: [
+                {
+                  bk_biz_id: item.slave.bk_biz_id,
+                  bk_host_id: item.slave.bk_host_id,
+                  bk_cloud_id: item.slave.bk_cloud_id,
+                  ip: item.slave.ip,
+                },
+              ],
+            },
+            resource_spec: {
+              new_slave: {
+                spec_id: 0,
+                hosts: [item.newSlave],
+              },
+            },
+          })),
+        },
+        remark: formData.remark,
+      });
+    }
+  };
+
+  const handleReset = () => {
+    Object.assign(formData, defaultData());
+  };
+
+  const handleBatchEdit = (list: SelectorHost[]) => {
+    const dataList = list.reduce<RowData[]>((acc, item) => {
+      if (!selectedMap.value[item.ip]) {
+        acc.push(
+          createTableRow({
+            slave: {
+              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,
+              related_clusters: item.related_clusters.map((item) => ({
+                id: item.id,
+                master_domain: item.master_domain,
+              })),
+            },
+          }),
+        );
+      }
+      return acc;
+    }, []);
+    formData.tableData = [...(selected.value.length ? formData.tableData : []), ...dataList];
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/restore/SlaveHostColumnGroup.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/restore/SlaveHostColumnGroup.vue
new file mode 100644
index 0000000000..3b2c3ebb58
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/restore/SlaveHostColumnGroup.vue
@@ -0,0 +1,202 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    :append-rules="rules"
+    field="slave.ip"
+    fixed="left"
+    :label="t('目标从库主机')"
+    :loading="loading"
+    :min-width="300"
+    required>
+    <template #headAppend>
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-host-select"
+        @click="handleShowSelector">
+        <DbIcon type="batch-host-select" />
+      </span>
+    </template>
+    <Input
+      v-model="modelValue.ip"
+      :placeholder="t('请输入IP')"
+      @change="handleInputChange" />
+  </Column>
+  <Column
+    :label="t('同机关联集群')"
+    :loading="loading"
+    :min-width="300">
+    <div
+      v-if="modelValue.related_clusters.length"
+      class="table-cell">
+      <p
+        v-for="item in modelValue.related_clusters"
+        :key="item.id">
+        {{ item.master_domain }}
+      </p>
+    </div>
+    <Block
+      v-else
+      :placeholder="t('自动生成')" />
+  </Column>
+  <InstanceSelector
+    v-model:is-show="showSelector"
+    :cluster-types="[ClusterTypes.TENDBHA]"
+    :selected="selectedInstances"
+    :tab-list-config="tabListConfig"
+    @change="handleSelectorChange" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { checkInstance } from '@services/source/dbbase';
+
+  import { ClusterTypes } from '@common/const';
+  import { ipv4 } from '@common/regex';
+
+  import { Block, Column, Input } from '@components/editable-table/Index.vue';
+  import InstanceSelector, {
+    type InstanceSelectorValues,
+    type IValue,
+    type PanelListType,
+  } from '@components/instance-selector/Index.vue';
+
+  export type SelectorHost = IValue;
+
+  interface Props {
+    selected: {
+      ip: string;
+    }[];
+  }
+
+  interface Emits {
+    (e: 'batch-edit', list: IValue[]): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<{
+    bk_biz_id: number;
+    bk_cloud_id: number;
+    bk_host_id?: number;
+    ip: string;
+    related_clusters: {
+      id: number;
+      master_domain: string;
+    }[];
+  }>({
+    default: () => ({
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      ip: '',
+      related_clusters: [],
+    }),
+  });
+
+  const { t } = useI18n();
+
+  const tabListConfig = {
+    [ClusterTypes.TENDBHA]: [
+      {
+        name: t('目标从库'),
+        tableConfig: {
+          firsrColumn: {
+            label: 'slave',
+            role: 'slave',
+            field: 'ip',
+          },
+        },
+      },
+    ],
+  } as unknown as Record<ClusterTypes, PanelListType>;
+
+  const showSelector = ref(false);
+  const selectedInstances = computed<InstanceSelectorValues<IValue>>(() => ({
+    [ClusterTypes.TENDBHA]: props.selected.map(
+      (item) =>
+        ({
+          ip: item.ip,
+        }) as IValue,
+    ),
+  }));
+
+  const rules = [
+    {
+      validator: (value: string) => ipv4.test(value),
+      message: t('IP 格式不符合IPv4标准'),
+      trigger: 'change',
+    },
+    {
+      validator: (value: string) => props.selected.filter((item) => item.ip === value).length < 2,
+      message: t('目标主机重复'),
+      trigger: 'blur',
+    },
+    {
+      validator: () => Boolean(modelValue.value.bk_host_id),
+      message: t('目标主机不存在'),
+      trigger: 'blur',
+    },
+  ];
+
+  const { run: queryHost, loading } = useRequest(checkInstance, {
+    manual: true,
+    onSuccess: (data) => {
+      modelValue.value.bk_host_id = undefined;
+      if (data.length) {
+        const [currentHost] = data;
+        modelValue.value = {
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          bk_host_id: currentHost.bk_host_id,
+          bk_cloud_id: currentHost.bk_cloud_id,
+          ip: currentHost.ip,
+          related_clusters: currentHost.related_clusters.map((item) => ({
+            id: item.id,
+            master_domain: item.master_domain,
+          })),
+        };
+      }
+    },
+  });
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    if (value) {
+      queryHost({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        instance_addresses: [value],
+      });
+    }
+  };
+
+  const handleSelectorChange = (selected: InstanceSelectorValues<IValue>) => {
+    emits('batch-edit', selected[ClusterTypes.TENDBHA]);
+  };
+</script>
+<style lang="less" scoped>
+  .batch-host-select {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+
+  .table-cell {
+    padding: 0 8px;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-table-column/WithRelatedClustersColumn.vue b/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-table-column/WithRelatedClustersColumn.vue
new file mode 100644
index 0000000000..25ff487fee
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-table-column/WithRelatedClustersColumn.vue
@@ -0,0 +1,202 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    :append-rules="rules"
+    field="cluster.master_domain"
+    fixed="left"
+    :label="t('目标集群')"
+    :loading="loading"
+    :min-width="300"
+    required
+    :validate-delay="300">
+    <template #headAppend>
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-host-select"
+        @click="handleShowSelector">
+        <DbIcon type="batch-host-select" />
+      </span>
+    </template>
+    <div style="flex: 1">
+      <Input
+        v-model="modelValue.master_domain"
+        :placeholder="t('请输入集群域名')"
+        @change="handleInputChange" />
+      <BkLoading
+        v-if="modelValue.related_clusters.length"
+        class="related-clusters"
+        :loading="relatedClusterLoading">
+        {{ t('含n个同机关联集群', { n: modelValue.related_clusters.length }) }}
+        <p
+          v-for="item in modelValue.related_clusters"
+          :key="item.id">
+          -- {{ item.master_domain }}
+        </p>
+      </BkLoading>
+    </div>
+  </Column>
+  <ClusterSelector
+    v-model:is-show="showSelector"
+    :cluster-types="[ClusterTypes.TENDBHA]"
+    :selected="selectedClusters"
+    @change="handleSelectorChange" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import TendbhaModel from '@services/model/mysql/tendbha';
+  import { filterClusters } from '@services/source/dbbase';
+  import { findRelatedClustersByClusterIds } from '@services/source/mysqlCluster';
+
+  import { ClusterTypes } from '@common/const';
+  import { domainRegex } from '@common/regex';
+
+  import ClusterSelector from '@components/cluster-selector/Index.vue';
+  import { Column, Input } from '@components/editable-table/Index.vue';
+
+  interface Props {
+    selected: {
+      id: number;
+      master_domain: string;
+    }[];
+  }
+
+  interface Emits {
+    (e: 'batch-edit', list: TendbhaModel[]): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<{
+    id?: number;
+    master_domain: string;
+    related_clusters: {
+      id: number;
+      master_domain: string;
+    }[];
+  }>({
+    default: () => ({
+      id: 0,
+      master_domain: '',
+      related_clusters: [],
+    }),
+  });
+
+  const { t } = useI18n();
+
+  const showSelector = ref(false);
+  const selectedClusters = computed<Record<string, TendbhaModel[]>>(() => ({
+    [ClusterTypes.TENDBHA]: props.selected.map(
+      (item) =>
+        ({
+          id: item.id,
+          master_domain: item.master_domain,
+        }) as TendbhaModel,
+    ),
+  }));
+
+  const rules = [
+    {
+      validator: (value: string) => domainRegex.test(value),
+      message: t('集群域名格式不正确'),
+      trigger: 'change',
+    },
+    {
+      validator: (value: string) => props.selected.filter((item) => item.master_domain === value).length < 2,
+      message: t('目标集群重复'),
+      trigger: 'blur',
+    },
+    {
+      validator: () => {
+        if (!modelValue.value.master_domain) {
+          return true;
+        }
+        return Boolean(modelValue.value.id);
+      },
+      message: t('目标集群不存在'),
+      trigger: 'blur',
+    },
+  ];
+
+  const { run: queryRelatedClusters, loading: relatedClusterLoading } = useRequest(findRelatedClustersByClusterIds, {
+    manual: true,
+    onSuccess: (data) => {
+      modelValue.value.related_clusters = [];
+      if (data.length) {
+        modelValue.value.related_clusters = data[0].related_clusters.map((item) => ({
+          id: item.id,
+          master_domain: item.master_domain,
+        }));
+      }
+    },
+  });
+
+  const { run: queryCluster, loading } = useRequest(filterClusters, {
+    manual: true,
+    onSuccess: (data) => {
+      modelValue.value.id = undefined;
+      if (data.length) {
+        modelValue.value.id = data[0].id;
+      }
+    },
+  });
+
+  watch(
+    () => modelValue.value.id,
+    (id) => {
+      if (id) {
+        queryRelatedClusters({
+          cluster_ids: [id],
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        });
+      }
+    },
+  );
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    if (value) {
+      queryCluster({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        exact_domain: value,
+      });
+    }
+  };
+
+  const handleSelectorChange = (selected: Record<string, TendbhaModel[]>) => {
+    emits('batch-edit', selected[ClusterTypes.TENDBHA]);
+  };
+</script>
+<style lang="less" scoped>
+  .batch-host-select {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+
+  .related-clusters {
+    padding: 8px;
+    font-size: 12px;
+    line-height: 20px;
+    color: #979ba5;
+    background: #fafbfd;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/routes.ts b/dbm-ui/frontend/src/views/db-manage/mysql/routes.ts
index b485753e7a..8dea93a023 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/routes.ts
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/routes.ts
@@ -16,12 +16,14 @@ import type { RouteRecordRaw } from 'vue-router';
 import type { MySQLFunctions } from '@services/model/function-controller/functionController';
 import FunctionControllModel from '@services/model/function-controller/functionController';
 
-import { AccountTypes } from '@common/const';
+import { AccountTypes, DBTypes, TicketTypes } from '@common/const';
 
-import { checkDbConsole } from '@utils';
+import { checkDbConsole, createToolboxRoute } from '@utils';
 
 import { t } from '@locales/index';
 
+const { createRouteItem } = createToolboxRoute(DBTypes.MYSQL);
+
 export const mysqlToolboxChildrenRouters: RouteRecordRaw[] = [
   {
     name: 'MySQLExecute',
@@ -55,30 +57,10 @@ export const mysqlToolboxChildrenRouters: RouteRecordRaw[] = [
     },
     component: () => import('@views/db-manage/mysql/privilege-clone-inst/Index.vue'),
   },
-  {
-    name: 'MySQLSlaveRebuild',
-    path: 'slave-rebuild/:page?',
-    meta: {
-      navName: t('重建从库'),
-    },
-    component: () => import('@views/db-manage/mysql/slave-rebuild/index.vue'),
-  },
-  {
-    name: 'MySQLSlaveAdd',
-    path: 'slave-add/:page?',
-    meta: {
-      navName: t('添加从库'),
-    },
-    component: () => import('@views/db-manage/mysql/slave-add/Index.vue'),
-  },
-  {
-    name: 'MySQLMasterSlaveClone',
-    path: 'master-slave-clone/:page?',
-    meta: {
-      navName: t('迁移主从'),
-    },
-    component: () => import('@views/db-manage/mysql/master-slave-clone/index.vue'),
-  },
+  createRouteItem(TicketTypes.MYSQL_RESTORE_SLAVE, t('重建从库')),
+  createRouteItem(TicketTypes.MYSQL_ADD_SLAVE, t('添加从库')),
+  createRouteItem(TicketTypes.MYSQL_MIGRATE_CLUSTER, t('迁移主从')),
+  createRouteItem(TicketTypes.MYSQL_PROXY_ADD, t('添加Proxy')),
   {
     name: 'MySQLMasterSlaveSwap',
     path: 'master-slave-swap/:page?',
@@ -87,22 +69,7 @@ export const mysqlToolboxChildrenRouters: RouteRecordRaw[] = [
     },
     component: () => import('@views/db-manage/mysql/master-slave-swap/index.vue'),
   },
-  {
-    name: 'MySQLProxyReplace',
-    path: 'proxy-replace/:page?',
-    meta: {
-      navName: t('替换Proxy'),
-    },
-    component: () => import('@views/db-manage/mysql/proxy-replace/index.vue'),
-  },
-  {
-    name: 'MySQLProxyAdd',
-    path: 'proxy-add/:page?',
-    meta: {
-      navName: t('添加Proxy'),
-    },
-    component: () => import('@views/db-manage/mysql/proxy-add/index.vue'),
-  },
+  createRouteItem(TicketTypes.MYSQL_PROXY_SWITCH, t('替换Proxy')),
   {
     name: 'MySQLMasterFailover',
     path: 'master-failover/:page?',
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/toolbox-menu.ts b/dbm-ui/frontend/src/views/db-manage/mysql/toolbox-menu.ts
index 0cc3d9fffe..52b105b09c 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/toolbox-menu.ts
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/toolbox-menu.ts
@@ -11,6 +11,8 @@
  * the specific language governing permissions and limitations under the License.
  */
 
+import { TicketTypes } from '@common/const';
+
 import { t } from '@locales/index';
 
 export interface MenuChild {
@@ -104,19 +106,19 @@ export default [
     children: [
       {
         name: t('重建从库'),
-        id: 'MySQLSlaveRebuild',
+        id: TicketTypes.MYSQL_RESTORE_SLAVE,
         parentId: 'migrate',
         dbConsoleValue: 'mysql.toolbox.slaveRebuild',
       },
       {
         name: t('添加从库'),
-        id: 'MySQLSlaveAdd',
+        id: TicketTypes.MYSQL_ADD_SLAVE,
         parentId: 'migrate',
         dbConsoleValue: 'mysql.toolbox.slaveAdd',
       },
       {
         name: t('迁移主从'),
-        id: 'MySQLMasterSlaveClone',
+        id: TicketTypes.MYSQL_MIGRATE_CLUSTER,
         parentId: 'migrate',
         dbConsoleValue: 'mysql.toolbox.masterSlaveClone',
       },
@@ -128,13 +130,13 @@ export default [
       },
       {
         name: t('替换Proxy'),
-        id: 'MySQLProxyReplace',
+        id: TicketTypes.MYSQL_PROXY_SWITCH,
         parentId: 'migrate',
         dbConsoleValue: 'mysql.toolbox.proxyReplace',
       },
       {
         name: t('添加Proxy'),
-        id: 'MySQLProxyAdd',
+        id: TicketTypes.MYSQL_PROXY_ADD,
         parentId: 'migrate',
         dbConsoleValue: 'mysql.toolbox.proxyAdd',
       },
diff --git a/dbm-ui/frontend/src/views/db-manage/pulsar/common/shrink/Index.vue b/dbm-ui/frontend/src/views/db-manage/pulsar/common/shrink/Index.vue
index 790fc1b467..bf5197a66c 100644
--- a/dbm-ui/frontend/src/views/db-manage/pulsar/common/shrink/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/pulsar/common/shrink/Index.vue
@@ -53,6 +53,8 @@
 
   import { useGlobalBizs } from '@stores';
 
+  import { TicketTypes } from '@common/const';
+
   import HostShrink, {
     type TShrinkNode,
   } from '@views/db-manage/common/host-shrink/Index.vue';
@@ -268,12 +270,11 @@
             }, {} as Record<string, any>);
 
             createTicket({
-              ticket_type: 'PULSAR_SHRINK',
+              ticket_type: TicketTypes.PULSAR_SHRINK,
               bk_biz_id: bizId,
               details: {
                 cluster_id: props.data.id,
-                ip_source: 'manual_input',
-                nodes: {
+                old_nodes: {
                   broker: fomatHost(nodeInfoMap.broker.nodeList),
                   bookkeeper: fomatHost(nodeInfoMap.bookkeeper.nodeList),
                 },
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/Create.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/Create.vue
new file mode 100644
index 0000000000..95e3d58782
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/Create.vue
@@ -0,0 +1,305 @@
+<!--
+ * 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>
+    <BkAlert
+      class="mb-20"
+      closable
+      :title="t('添加运维节点：在原集群上增加运维节点实例来实现额外的数据访问，在运维节点上的操作不会影响原集群')" />
+    <BkForm
+      v-model="formData"
+      class="mb-20"
+      form-type="vertical">
+      <EditableTable
+        ref="table"
+        class="mb-20"
+        :model="formData.tableData">
+        <EditableTableRow
+          v-for="(item, index) in formData.tableData"
+          :key="index">
+          <HostColumn
+            v-model="item.host"
+            :selected="selected"
+            @append-row="handleAppendRow(item.host, index)"
+            @batch-edit="handleBatchEdit" />
+          <Column
+            :label="t('角色类型')"
+            :min-width="150">
+            <Block
+              v-model="item.host.role"
+              :placeholder="t('自动生成')" />
+          </Column>
+          <Column
+            :label="t('所属集群')"
+            :min-width="150"
+            :rowspan="rowSpan[item.host.cluster_domain]">
+            <Block
+              v-model="item.host.cluster_domain"
+              :placeholder="t('自动生成')" />
+          </Column>
+          <SpecColumn v-model="item.host.spec_config" />
+          <OperationColumn
+            v-model:table-data="formData.tableData"
+            :create-row-method="createTableRow" />
+        </EditableTableRow>
+      </EditableTable>
+      <TicketRemark v-model="formData.remark" />
+    </BkForm>
+    <template #action>
+      <BkButton
+        class="mr-8 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 lang="ts" setup>
+  import _ from 'lodash';
+  import { reactive, useTemplateRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import { queryMasterSlavePairs } from '@services/source/redisToolbox';
+
+  import { useCreateTicket } from '@hooks';
+
+  import { TicketTypes } from '@common/const';
+
+  import EditableTable, { Block, Column, Row as EditableTableRow } from '@components/editable-table/Index.vue';
+
+  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
+  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+  import type { SpecInfo } from '@views/db-manage/redis/common/spec-panel/Index.vue';
+
+  import HostColumn, { type SelectorHost } from './components/HostColumn.vue';
+  import SpecColumn from './components/SpecColumn.vue';
+
+  interface RowData {
+    host: {
+      bk_biz_id: number;
+      bk_host_id: number;
+      bk_cloud_id: number;
+      ip: string;
+      role: string;
+      cluster_domain: string;
+      cluster_ids: number[];
+      spec_config: SpecInfo;
+    };
+  }
+
+  const { t } = useI18n();
+  const tableRef = useTemplateRef('table');
+
+  const createTableRow = (data = {} as Partial<RowData>) => ({
+    host: data.host || {
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+      role: '',
+      cluster_domain: '',
+      cluster_ids: [],
+      spec_config: {} as SpecInfo,
+    },
+  });
+
+  const defaultData = () => ({
+    tableData: [createTableRow()],
+    remark: '',
+  });
+
+  const formData = reactive(defaultData());
+
+  const selected = computed(() => formData.tableData.filter((item) => item.host.bk_host_id).map((item) => item.host));
+  const selectedMap = computed(() => Object.fromEntries(selected.value.map((cur) => [cur.ip, true])));
+  const rowSpan = computed(() =>
+    formData.tableData.reduce<Record<string, number>>((acc, item) => {
+      if (item.host.cluster_domain) {
+        acc[item.host.cluster_domain] = (acc[item.host.cluster_domain] || 0) + 1;
+      }
+      return acc;
+    }, {}),
+  );
+
+  interface TicketDetail {
+    ip_source: 'resource_pool';
+    infos: {
+      bk_cloud_id: number;
+      cluster_ids: number[];
+      redis_master: {
+        ip: string;
+        spec_id: number;
+        bk_host_id: number;
+      }[];
+      redis_slave: TicketDetail['infos'][0]['redis_master'];
+      proxy: TicketDetail['infos'][0]['redis_master'];
+      display_info: {
+        data: {
+          ip: string;
+          role: string;
+          cluster_domain: string;
+          spec_id: number;
+          spec_name: string;
+        }[];
+      };
+    }[];
+  }
+
+  const { run: createTicketRun, loading: isSubmitting } = useCreateTicket<TicketDetail>(
+    TicketTypes.REDIS_CLUSTER_CUTOFF,
+  );
+
+  const handleSubmit = async () => {
+    const result = await tableRef.value!.validate();
+    if (!result) {
+      return;
+    }
+    const sameClusters: Record<string, RowData[]> = {};
+    const taskList: Promise<ServiceReturnType<typeof queryMasterSlavePairs>>[] = [];
+    formData.tableData.forEach((item) => {
+      if (!sameClusters[item.host.cluster_domain]) {
+        sameClusters[item.host.cluster_domain] = [];
+      }
+      sameClusters[item.host.cluster_domain].push(item);
+      item.host.cluster_ids.forEach((clusterId) => {
+        taskList.push(
+          queryMasterSlavePairs({
+            cluster_id: clusterId,
+          }),
+        );
+      });
+    });
+    const results = await Promise.all(taskList);
+    // 主从映射关系
+    const slaveMasterMap = _.flatten(results).reduce<Record<string, string>>((acc, item) => {
+      acc[item.master_ip] = item.slave_ip;
+      return acc;
+    }, {});
+
+    const infos = Object.values(sameClusters).map((sameRows) => {
+      const info = {
+        cluster_ids: sameRows[0].host.cluster_ids,
+        bk_cloud_id: sameRows[0].host.bk_cloud_id,
+        proxy: [],
+        redis_master: [],
+        redis_slave: [],
+        display_info: {
+          data: [],
+        },
+      } as unknown as TicketDetail['infos'][0];
+      const needDeleteSlaves: string[] = [];
+      sameRows.forEach((item) => {
+        const spec = {
+          bk_host_id: item.host.bk_host_id,
+          ip: item.host.ip,
+          spec_id: item.host.spec_config.id,
+        };
+        info.display_info.data.push({
+          ip: item.host.ip,
+          role: item.host.role,
+          cluster_domain: item.host.cluster_domain,
+          spec_id: item.host.spec_config.id,
+          spec_name: item.host.spec_config.name,
+        });
+        const list = info[
+          item.host.role as 'redis_slave' | 'redis_master' | 'proxy'
+        ] as TicketDetail['infos'][0]['redis_master'];
+        _.merge(info, {
+          [item.host.role]: [...list, spec],
+        });
+        if (item.host.role === 'redis_master') {
+          const deleteSlaveIp = slaveMasterMap[item.host.ip];
+          if (deleteSlaveIp) {
+            needDeleteSlaves.push(deleteSlaveIp);
+          }
+        }
+      });
+      // 当选择了master的时候，过滤对应的slave
+      info.redis_slave = info.redis_slave.filter((item) => !needDeleteSlaves.includes(item.ip));
+      return info;
+    });
+
+    createTicketRun({
+      details: {
+        ip_source: 'resource_pool',
+        infos,
+      },
+      remark: formData.remark,
+    });
+  };
+
+  const handleReset = () => {
+    Object.assign(formData, defaultData());
+  };
+
+  const handleBatchEdit = (list: SelectorHost[]) => {
+    const dataList = list.reduce<RowData[]>((acc, item) => {
+      if (!selectedMap.value[item.ip]) {
+        acc.push(
+          createTableRow({
+            host: {
+              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,
+              role: item.role,
+              cluster_domain: item.cluster_domain,
+              cluster_ids: item.cluster_ids,
+              spec_config: item.spec_config,
+            },
+          }),
+        );
+      }
+      return acc;
+    }, []);
+    formData.tableData = [...(selected.value.length ? formData.tableData : []), ...dataList];
+  };
+
+  const handleAppendRow = async (host: RowData['host'], index: number) => {
+    const taskList = host.cluster_ids.map((clusterId) =>
+      queryMasterSlavePairs({
+        cluster_id: clusterId,
+      }),
+    );
+    const results = await Promise.all(taskList);
+    const rows = results.map((data) => {
+      const { slaves } = data[0];
+      return createTableRow({
+        host: {
+          bk_biz_id: slaves.bk_biz_id,
+          bk_cloud_id: slaves.bk_cloud_id,
+          bk_host_id: slaves.bk_host_id,
+          ip: slaves.ip,
+          role: 'redis_slave',
+          cluster_domain: host.cluster_domain,
+          cluster_ids: host.cluster_ids,
+          spec_config: host.spec_config,
+        },
+      });
+    });
+    formData.tableData.splice(index + 1, 0, ...rows);
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/Index.vue
new file mode 100644
index 0000000000..7d5a04e740
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/Index.vue
@@ -0,0 +1,32 @@
+<!--
+ * 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="components[page]" />
+</template>
+<script setup lang="ts">
+  import { useRoute } from 'vue-router';
+
+  import Page2 from '@views/db-manage/common/create-ticket-success/Index.vue';
+
+  import Page1 from './Create.vue';
+
+  const route = useRoute();
+
+  const components = {
+    create: Page1,
+    success: Page2,
+  };
+
+  const page = computed(() => (route.params.page as keyof typeof components) || 'create');
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/HostColumn.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/HostColumn.vue
new file mode 100644
index 0000000000..8d63de5d4c
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/HostColumn.vue
@@ -0,0 +1,179 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    :append-rules="rules"
+    field="host.ip"
+    fixed="left"
+    :label="t('目标从库主机')"
+    :loading="loading"
+    :min-width="150"
+    required>
+    <template #headAppend>
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-host-select"
+        @click="handleShowSelector">
+        <DbIcon type="batch-host-select" />
+      </span>
+    </template>
+    <Input
+      v-model="modelValue.ip"
+      :placeholder="t('请输入IP')"
+      @change="handleInputChange" />
+  </Column>
+  <InstanceSelector
+    v-model:is-show="showSelector"
+    active-tab="idleHosts"
+    db-type="redis"
+    :panel-list="['idleHosts', 'manualInput']"
+    role="ip"
+    :selected="selectedIps"
+    @change="handleSelectorChange" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { checkInstance } from '@services/source/dbbase';
+
+  import { ipv4 } from '@common/regex';
+
+  import { Column, Input } from '@components/editable-table/Index.vue';
+
+  import type { SpecInfo } from '@views/db-manage/redis/common/spec-panel/Index.vue';
+
+  import InstanceSelector, { type InstanceSelectorValues } from './instance-selector/Index.vue';
+
+  export type SelectorHost = InstanceSelectorValues['idleHosts'][0];
+
+  interface Props {
+    selected: {
+      ip: string;
+    }[];
+  }
+
+  interface Emits {
+    (e: 'batch-edit', list: InstanceSelectorValues['idleHosts']): void;
+    (e: 'append-row'): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<{
+    bk_biz_id: number;
+    bk_host_id?: number;
+    bk_cloud_id: number;
+    ip: string;
+    role: string;
+    cluster_domain: string;
+    cluster_ids: number[];
+    spec_config: SpecInfo;
+  }>({
+    default: () => ({
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      ip: '',
+      role: '',
+      cluster_domain: '',
+      cluster_ids: [],
+      spec_config: {} as SpecInfo,
+    }),
+  });
+
+  const { t } = useI18n();
+
+  const showSelector = ref(false);
+  const selectedIps = computed<InstanceSelectorValues>(() => ({
+    idleHosts: props.selected.map(
+      (item) =>
+        ({
+          ip: item.ip,
+        }) as InstanceSelectorValues['idleHosts'][0],
+    ),
+  }));
+
+  const rules = [
+    {
+      validator: (value: string) => ipv4.test(value),
+      message: t('IP 格式不符合IPv4标准'),
+      trigger: 'change',
+    },
+    {
+      validator: (value: string) => props.selected.filter((item) => item.ip === value).length < 2,
+      message: t('目标主机重复'),
+      trigger: 'blur',
+    },
+    {
+      validator: () => Boolean(modelValue.value.bk_host_id),
+      message: t('目标主机不存在'),
+      trigger: 'blur',
+    },
+  ];
+
+  const { run: queryHost, loading } = useRequest(checkInstance, {
+    manual: true,
+    onSuccess: (data) => {
+      modelValue.value.bk_host_id = undefined;
+      if (data.length) {
+        const currentHost = data[0];
+        const roleMap = {
+          master: 'redis_master',
+          slave: 'redis_slave',
+          proxy: 'proxy',
+        } as Record<string, string>;
+        modelValue.value = {
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          bk_host_id: currentHost.bk_host_id,
+          bk_cloud_id: currentHost.bk_cloud_id,
+          ip: currentHost.ip,
+          role: roleMap[currentHost.role] || '',
+          cluster_domain: currentHost.master_domain,
+          cluster_ids: currentHost.related_clusters.map((item) => item.id),
+          spec_config: currentHost.spec_config,
+        };
+        // 输入的主机为master主机带出slave主机
+        if (currentHost.role === 'master') {
+          emits('append-row');
+        }
+      }
+    },
+  });
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    if (value) {
+      queryHost({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        instance_addresses: [value],
+      });
+    }
+  };
+
+  const handleSelectorChange = (selected: InstanceSelectorValues) => {
+    emits('batch-edit', selected.idleHosts);
+  };
+</script>
+<style lang="less" scoped>
+  .batch-host-select {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/SpecColumn.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/SpecColumn.vue
new file mode 100644
index 0000000000..2507e2a63f
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/SpecColumn.vue
@@ -0,0 +1,64 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    :label="t('规格需求')"
+    :min-width="150">
+    <template #head>
+      <div v-bk-tooltips="t('默认使用部署方案中选定的规格，将从资源池自动匹配机器')">
+        <span class="spec-title">{{ t('规格需求') }}</span>
+      </div>
+    </template>
+    <Block
+      v-model="modelValue.name"
+      :placeholder="t('自动生成')">
+      <template #append>
+        <SpecPanel
+          v-if="modelValue.name"
+          :data="modelValue"
+          :hide-qps="!modelValue.qps.min">
+          <DbIcon
+            class="visible-icon ml-4"
+            type="visible1" />
+        </SpecPanel>
+      </template>
+    </Block>
+  </Column>
+</template>
+
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+
+  import { Block, Column } from '@components/editable-table/Index.vue';
+  import SpecPanel from '@components/render-table/columns/spec-display/Panel.vue';
+
+  import type { SpecInfo } from '@views/db-manage/redis/common/spec-panel/Index.vue';
+
+  const modelValue = defineModel<SpecInfo>({
+    required: true,
+  });
+  const { t } = useI18n();
+</script>
+
+<style lang="less" scoped>
+  .spec-title {
+    border-bottom: 1px dashed #979ba5;
+  }
+
+  .visible-icon {
+    font-size: 16px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/Index.vue
new file mode 100644
index 0000000000..48c2897d87
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/Index.vue
@@ -0,0 +1,172 @@
+<!--
+ * 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>
+  <BkDialog
+    class="dbm-proxy-selector"
+    :close-icon="false"
+    :draggable="false"
+    :esc-close="false"
+    :is-show="isShow"
+    :quick-close="false"
+    width="80%"
+    @closed="handleClose">
+    <BkResizeLayout
+      :border="false"
+      collapsible
+      initial-divide="320px"
+      :max="360"
+      :min="320"
+      placement="right">
+      <template #main>
+        <PanelTab
+          v-model="panelTabActive"
+          :panel-list="panelList" />
+        <Component
+          :is="renderCom"
+          :key="panelTabActive"
+          :active-tab="panelTabActive"
+          :db-type="dbType"
+          :is-radio-mode="isRadioMode"
+          :last-values="lastValues"
+          :role="role"
+          :table-settings="tableSettings"
+          :valid-tab="panelList[0]"
+          @change="handleChange" />
+      </template>
+      <template #aside>
+        <PreviewResult
+          :active-tab="panelTabActive"
+          :last-values="lastValues"
+          table-key="ip"
+          @change="handleChange" />
+      </template>
+    </BkResizeLayout>
+    <template #footer>
+      <span
+        v-bk-tooltips="{
+          content: $t('请选择实例'),
+          disabled: !isEmpty,
+        }"
+        class="inline-block">
+        <BkButton
+          class="w-88"
+          :disabled="isEmpty"
+          theme="primary"
+          @click="handleSubmit">
+          {{ $t('确定') }}
+        </BkButton>
+      </span>
+      <BkButton
+        class="ml-8 w-88"
+        @click="handleClose">
+        {{ $t('取消') }}
+      </BkButton>
+    </template>
+  </BkDialog>
+</template>
+<script lang="ts">
+  import type { ChoosedItem } from './components/RenderRedisHost.vue';
+
+  export type InstanceSelectorValues = { idleHosts: ChoosedItem[] };
+
+  export default {
+    name: 'InstanceSelector',
+  };
+</script>
+<script setup lang="ts">
+  import getSettings from './common/tableSettings';
+  import PanelTab, { activePanelInjectionKey, defaultPanelList, type PanelTypes } from './components/PanelTab.vue';
+  import PreviewResult from './components/preview-result/Index.vue';
+  import RenderManualInput from './components/RenderManualInput.vue';
+  import RenderRedis from './components/RenderRedis.vue';
+
+  interface Props {
+    isShow?: boolean;
+    panelList?: Array<PanelTypes>;
+    role?: string;
+    selected?: InstanceSelectorValues;
+    dbType?: string;
+    activeTab?: PanelTypes;
+    isRadioMode?: boolean;
+  }
+
+  interface Emits {
+    (e: 'update:isShow', value: boolean): void;
+    (e: 'change', value: InstanceSelectorValues): void;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    isShow: false,
+    panelList: () => [...defaultPanelList],
+    role: '',
+    selected: undefined,
+    dbType: 'redis',
+    activeTab: 'idleHosts',
+    isRadioMode: false,
+  });
+  const emits = defineEmits<Emits>();
+
+  const tableSettings = getSettings(props.role);
+  const panelTabActive = ref<PanelTypes>(props.activeTab);
+
+  const lastValues = reactive<InstanceSelectorValues>({ idleHosts: [] });
+  const isEmpty = computed(() => !Object.values(lastValues).some((values) => values.length > 0));
+  provide(activePanelInjectionKey, panelTabActive);
+
+  const comMap = {
+    idleHosts: RenderRedis,
+    manualInput: RenderManualInput,
+  };
+
+  const renderCom = computed(() => comMap[panelTabActive.value as keyof typeof comMap]);
+
+  watch(
+    () => [props.isShow, props.selected],
+    ([show, selected]) => {
+      if (show && selected) {
+        Object.assign(lastValues, selected);
+      }
+    },
+  );
+
+  const handleChange = (values: InstanceSelectorValues) => {
+    Object.assign(lastValues, values);
+  };
+
+  const handleSubmit = () => {
+    emits('change', lastValues);
+    handleClose();
+  };
+
+  const handleClose = () => {
+    emits('update:isShow', false);
+  };
+</script>
+<style lang="less">
+  .dbm-proxy-selector {
+    display: block;
+    width: 80%;
+    max-width: 1600px;
+    min-width: 1200px;
+
+    .bk-modal-header {
+      display: none;
+    }
+
+    .bk-dialog-content {
+      padding: 0;
+      margin: 0;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/common/tableSettings.ts b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/common/tableSettings.ts
new file mode 100644
index 0000000000..2f62f989d5
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/common/tableSettings.ts
@@ -0,0 +1,67 @@
+/*
+ * 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 { t } from '@locales/index';
+
+const getSettings = (role?: string) => ({
+  fields: [
+    {
+      label: role ? role.charAt(0).toUpperCase() + role.slice(1) : t('实例'),
+      field: 'instance_address',
+      disabled: true,
+    },
+    {
+      label: t('角色'),
+      field: 'role',
+    },
+    {
+      label: t('实例状态'),
+      field: 'status',
+    },
+    {
+      label: t('管控区域'),
+      field: 'cloud_area',
+    },
+    {
+      label: t('Agent状态'),
+      field: 'alive',
+    },
+    {
+      label: t('主机名称'),
+      field: 'host_name',
+    },
+    {
+      label: t('OS名称'),
+      field: 'os_name',
+    },
+    {
+      label: t('所属云厂商'),
+      field: 'cloud_vendor',
+    },
+    {
+      label: t('OS类型'),
+      field: 'os_type',
+    },
+    {
+      label: t('主机ID'),
+      field: 'host_id',
+    },
+    {
+      label: 'Agent ID',
+      field: 'agent_id',
+    },
+  ],
+  checked: ['instance_address', 'role', 'cloud_area', 'alive', 'host_name'],
+});
+
+export default getSettings;
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/common/utils.ts b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/common/utils.ts
new file mode 100644
index 0000000000..76f5ed7416
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/common/utils.ts
@@ -0,0 +1,19 @@
+/*
+ * 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 { t } from '@locales/index';
+
+export const textMap = {
+  idleHosts: t('待替换的主机'),
+  manualInput: t('手动输入'),
+};
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/PanelTab.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/PanelTab.vue
new file mode 100644
index 0000000000..962a3426b4
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/PanelTab.vue
@@ -0,0 +1,82 @@
+<!--
+ * 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="instance-selector-panel-tab">
+    <div
+      v-for="value in panelList"
+      :key="value"
+      class="tab-item"
+      :class="{
+        active: modelValue === value,
+      }"
+      @click="handleClick(value)">
+      {{ textMap[value] }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import type { InjectionKey, Ref } from 'vue';
+
+  import { textMap } from '../common/utils';
+
+  export const defaultPanelList = ['idleHosts', 'manualInput'] as const;
+  export type PanelTypes = (typeof defaultPanelList)[number];
+  export const activePanelInjectionKey: InjectionKey<Ref<PanelTypes>> = Symbol('activePanel');
+</script>
+
+<script setup lang="ts">
+  interface Props {
+    modelValue: string;
+    panelList?: Array<PanelTypes>;
+  }
+  interface Emits {
+    (e: 'update:modelValue', value: string): void;
+  }
+
+  const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
+
+  const handleClick = (tab: string) => {
+    if (props.modelValue === tab) {
+      return;
+    }
+    emits('update:modelValue', tab);
+  };
+</script>
+<style lang="less">
+  .instance-selector-panel-tab {
+    display: flex;
+
+    .tab-item {
+      display: flex;
+      height: 40px;
+      cursor: pointer;
+      background-color: #fafbfd;
+      border-bottom: 1px solid #dcdee5;
+      justify-content: center;
+      align-items: center;
+      flex: 1;
+
+      &.active {
+        background-color: #fff;
+        border-bottom-color: transparent;
+      }
+
+      & ~ .tab-item {
+        border-left: 1px solid #dcdee5;
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderManualHost.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderManualHost.vue
new file mode 100644
index 0000000000..92e2636841
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderManualHost.vue
@@ -0,0 +1,249 @@
+<!--
+ * 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="instance-selector-render-manual-host">
+    <BkInput
+      v-model.trim="search"
+      clearable
+      :placeholder="$t('请输入实例')" />
+    <DbOriginalTable
+      :columns="columns"
+      :data="renderData"
+      :height="505"
+      :is-searching="!!search"
+      :settings="tableSettings"
+      style="margin-top: 12px"
+      @clear-search="handleClearSearch"
+      @row-click.stop="handleRowClick" />
+  </div>
+</template>
+
+<script setup lang="tsx">
+  import type { Table } from 'bkui-vue';
+  import { useI18n } from 'vue-i18n';
+
+  import DbStatus from '@components/db-status/index.vue';
+
+  import type { InstanceSelectorValues } from '../Index.vue';
+
+  import type { InstanceItem } from './RenderManualInput.vue';
+  import type { ChoosedItem } from './RenderRedisHost.vue';
+
+  interface TableItem {
+    data: InstanceItem
+  }
+
+  interface Props {
+    role?: string;
+    lastValues: InstanceSelectorValues;
+    tableData: InstanceItem[];
+    tableSettings: InstanceType<typeof Table>['$props']['settings'];
+  }
+
+  interface Emits {
+    (e: 'change', value: InstanceSelectorValues): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+
+  const search = ref('');
+
+  const checkedMap = shallowRef({} as Record<string, ChoosedItem>);
+
+  watch(() => props.lastValues, () => {
+    checkedMap.value = {};
+    for (const checkedList of Object.values(props.lastValues)) {
+      for (const item of checkedList) {
+        checkedMap.value[item.ip] = item as ChoosedItem;
+      }
+    }
+  }, { immediate: true, deep: true });
+
+  const renderData = computed(() => {
+    if (search.value === '') return props.tableData;
+
+    return props.tableData.filter(item => (
+      item.ip.includes(search.value)
+    ));
+  });
+  const isSelectedAll = computed(() => (
+    renderData.value.length > 0
+    && renderData.value.length === renderData.value.filter(item => checkedMap.value[item.ip]).length
+  ));
+
+  const columns = [
+    {
+      width: 60,
+      fixed: 'left',
+      label: () => (
+        <bk-checkbox
+          label={true}
+          model-value={isSelectedAll.value}
+          onClick={(e: Event) => e.stopPropagation()}
+          onChange={handleSelectPageAll}
+        />
+      ),
+      render: ({ data }: TableItem) => (
+        <bk-checkbox
+          style="vertical-align: middle;"
+          label={true}
+          model-value={Boolean(checkedMap.value[data.ip])}
+          onClick={(e: Event) => e.stopPropagation()}
+          onChange={(value: boolean) => handleTableSelectOne(value, data)}
+        />
+      ),
+    },
+    {
+      fixed: 'left',
+      minWidth: 160,
+      label: props.role ? props.role.charAt(0).toUpperCase() + props.role.slice(1) : t('实例'),
+      field: 'ip',
+    },
+    {
+      label: t('角色'),
+      field: 'role',
+      showOverflowTooltip: true,
+      // filter: {
+      //   list: [{ text: 'master', value: 'master' }, { text: 'slave', value: 'slave' }, { text: 'proxy', value: 'proxy' }],
+      // },
+      render: ({ data } : TableItem) => <span>{data.role}</span>,
+    },
+    {
+      label: t('实例状态'),
+      field: 'status',
+      render: ({ data }: TableItem) => {
+        const info = data.host_info.alive === 1 ? { theme: 'success', text: t('正常') } : { theme: 'danger', text: t('异常') };
+        return <DbStatus theme={info.theme}>{info.text}</DbStatus>;
+      },
+    },
+    {
+      minWidth: 100,
+      label: t('管控区域'),
+      field: 'cloud_area',
+      render: ({ data }: TableItem) => data.host_info?.cloud_area.name || '--',
+    },
+    {
+      minWidth: 100,
+      label: t('Agent状态'),
+      field: 'alive',
+      sort: true,
+      render: ({ data }: TableItem) => {
+        const info = data.host_info?.alive === 1 ? { theme: 'success', text: t('正常') } : { theme: 'danger', text: t('异常') };
+        return <DbStatus theme={info.theme}>{info.text}</DbStatus>;
+      },
+    },
+    {
+      label: t('主机名称'),
+      field: 'host_name',
+      showOverflowTooltip: true,
+      render: ({ data }: TableItem) => data.host_info?.host_name || '--',
+    },
+    {
+      label: t('OS名称'),
+      field: 'os_name',
+      showOverflowTooltip: true,
+      render: ({ data }: TableItem) => data.host_info?.os_name || '--',
+    },
+    {
+      label: t('所属云厂商'),
+      field: 'cloud_vendor',
+      showOverflowTooltip: true,
+      render: ({ data }: TableItem) => data.host_info?.cloud_vendor || '--',
+    },
+    {
+      label: t('OS类型'),
+      field: 'os_type',
+      showOverflowTooltip: true,
+      render: ({ data }: TableItem) => data.host_info?.os_type || '--',
+    },
+    {
+      label: t('主机ID'),
+      field: 'host_id',
+      showOverflowTooltip: true,
+      render: ({ data }: TableItem) => data.host_info?.host_id || '--',
+    },
+    {
+      label: 'Agent ID',
+      field: 'agent_id',
+      showOverflowTooltip: true,
+      render: ({ data }: TableItem) => data.host_info?.agent_id || '--',
+    },
+  ];
+
+  const triggerChange = () => {
+    const lastValues: InstanceSelectorValues = {
+      idleHosts: [],
+    };
+    lastValues.idleHosts = Object.values(checkedMap.value);
+
+    emits('change', {
+      ...props.lastValues,
+      ...lastValues,
+    });
+  };
+
+  const formatValue = (data: InstanceItem) => ({
+    bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+    bk_host_id: data?.bk_host_id || 0,
+    bk_cloud_id: data?.host_info?.cloud_id || 0,
+    ip: data?.ip || '',
+    role: data?.role || '',
+    cluster_ids: data.related_clusters.map(item=>item.id) || [],
+    cluster_domain: data.related_clusters[0].master_domain ?? '',
+    spec_config: data?.spec_config || null,
+  });
+
+  const handleSelectPageAll = (checked: boolean) => {
+    const lastCheckMap = { ...checkedMap.value };
+    for (const item of renderData.value) {
+      if (checked) {
+        lastCheckMap[item.ip] = formatValue(item);
+      } else {
+        delete lastCheckMap[item.ip];
+      }
+    }
+    checkedMap.value = lastCheckMap;
+    triggerChange();
+  };
+
+  const handleTableSelectOne = (checked: boolean, data: InstanceItem) => {
+    const lastCheckMap = { ...checkedMap.value };
+    if (checked) {
+      lastCheckMap[data.ip] = formatValue(data);
+    } else {
+      delete lastCheckMap[data.ip];
+    }
+    checkedMap.value = lastCheckMap;
+    triggerChange();
+  };
+
+  const handleRowClick = (key: number, data: InstanceItem) => {
+    const checked = checkedMap.value[data.ip];
+    handleTableSelectOne(!checked, data);
+  };
+
+  const handleClearSearch = () => {
+    search.value = '';
+  };
+</script>
+
+<style lang="less">
+  .instance-selector-render-manual-host {
+    padding: 0 24px;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderManualInput.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderManualInput.vue
new file mode 100644
index 0000000000..85bc75f55a
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderManualInput.vue
@@ -0,0 +1,333 @@
+<!--
+ * 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="instance-selector-manual-input">
+    <BkResizeLayout
+      :border="false"
+      collapsible
+      initial-divide="480px"
+      :max="600"
+      :min="420">
+      <template #aside>
+        <div class="manual-input-wrapper">
+          <BkInput
+            ref="inputRef"
+            v-model.trim="inputState.values"
+            class="manual-input-textarea"
+            :placeholder="inputState.placeholder"
+            type="textarea"
+            @input="handleInput" />
+          <div class="manual-input-errors">
+            <span
+              v-if="errorState.format.show"
+              class="mr-8">
+              <I18nT
+                keypath="n处格式错误"
+                tag="span">
+                <strong>{{ errorState.format.count }}</strong>
+              </I18nT>
+              <DbIcon
+                v-bk-tooltips="$t('标记错误')"
+                class="manual-input-icons"
+                type="audit"
+                @click="handleSelectionError('format')" />
+            </span>
+            <span v-if="errorState.instance.show">
+              <I18nT
+                keypath="n处IP_Port不存在"
+                tag="span">
+                <strong>{{ errorState.instance.count }}</strong>
+              </I18nT>
+              <DbIcon
+                v-bk-tooltips="$t('标记错误')"
+                class="manual-input-icons"
+                type="audit"
+                @click="handleSelectionError('instance')" />
+            </span>
+          </div>
+          <div class="manual-input-buttons">
+            <BkButton
+              class="mr-8"
+              :disabled="!inputState.values"
+              :loading="inputState.isLoading"
+              outline
+              size="small"
+              theme="primary"
+              @click="handleParsingValues">
+              {{ $t('解析并添加') }}
+            </BkButton>
+            <BkButton
+              class="w-88"
+              size="small"
+              @click="() => (inputState.values = '')">
+              {{ $t('清空') }}
+            </BkButton>
+          </div>
+        </div>
+      </template>
+      <template #main>
+        <BkLoading :loading="inputState.isLoading">
+          <RenderManualHost
+            :last-values="lastValues"
+            :role="role"
+            :table-data="inputState.tableData"
+            :table-settings="tableSettings"
+            @change="handleHostChange" />
+        </BkLoading>
+      </template>
+    </BkResizeLayout>
+  </div>
+</template>
+<script setup lang="ts">
+  import type { Table } from 'bkui-vue';
+  import _ from 'lodash';
+  import { useI18n } from 'vue-i18n';
+
+  import RedisClusterNodeByIpModel from '@services/model/redis/redis-cluster-node-by-ip';
+  import { checkRedisInstances } from '@services/source/instances';
+  import { queryMasterSlavePairs } from '@services/source/redisToolbox';
+  import type { InstanceInfos } from '@services/types';
+
+  import { useGlobalBizs } from '@stores';
+
+  import { ipv4 } from '@common/regex';
+
+  import type { InstanceSelectorValues } from '../Index.vue';
+
+  import type { PanelTypes } from './PanelTab.vue';
+  import RenderManualHost from './RenderManualHost.vue';
+
+  export interface InstanceItem extends Omit<InstanceInfos, 'spec_config'> {
+    spec_config: RedisClusterNodeByIpModel['spec_config'];
+  }
+
+  interface Props {
+    validTab: Exclude<PanelTypes, 'manualInput'>;
+    lastValues: InstanceSelectorValues;
+    tableSettings: InstanceType<typeof Table>['$props']['settings'];
+    role?: string;
+  }
+
+  interface Emits {
+    (e: 'change', value: InstanceSelectorValues): void;
+  }
+  const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+  const { currentBizId } = useGlobalBizs();
+  const inputRef = ref();
+
+  const inputState = reactive({
+    values: '',
+    placeholder: t('请输入IP如_1_1_1_1多个可使用换行_空格或_分隔'),
+    isLoading: false,
+    tableData: [] as InstanceItem[],
+  });
+  const errorState = reactive({
+    format: {
+      show: false,
+      selectionStart: 0,
+      selectionEnd: 0,
+      count: 0,
+    },
+    instance: {
+      show: false,
+      selectionStart: 0,
+      selectionEnd: 0,
+      count: 0,
+    },
+  });
+
+  const handleHostChange = (values: InstanceSelectorValues) => {
+    emits('change', values);
+  };
+
+  const handleInput = () => {
+    errorState.format.show = false;
+    errorState.instance.show = false;
+  };
+
+  /**
+   * 标记错误
+   */
+  const handleSelectionError = (key: 'format' | 'instance') => {
+    const { selectionStart, selectionEnd } = errorState[key];
+    const textarea = inputRef.value?.$el?.getElementsByTagName?.('textarea')?.[0];
+    if (textarea) {
+      (textarea as HTMLInputElement).focus();
+      (textarea as HTMLInputElement).setSelectionRange(selectionStart, selectionEnd);
+    }
+  };
+
+  /**
+   * 处理分隔内容，过滤空内容
+   */
+  const getValues = () =>
+    inputState.values
+      .replace(/\s+|[;,|]/g, ' ') // 将空格 换行符 ；，｜符号统一为空格
+      .split(' ')
+      .filter((value) => value);
+
+  /**
+   * 解析输入内容
+   */
+  const handleParsingValues = async () => {
+    const formatErrorLines: string[] = [];
+    const lines = getValues();
+    const availableLines: string[] = [];
+    // 处理格式错误
+    lines.forEach((line) => {
+      if (!ipv4.test(line)) {
+        formatErrorLines.push(line);
+      } else {
+        availableLines.push(line);
+      }
+    });
+    const count = formatErrorLines.length;
+    errorState.format.count = count;
+    errorState.format.selectionStart = 0;
+    errorState.format.selectionEnd = formatErrorLines.join('\n').length;
+    inputState.isLoading = true;
+    // 检查 IP 是否存在
+    const queryResult = await checkRedisInstances({
+      bizId: currentBizId,
+      instance_addresses: availableLines,
+    });
+    // 获取ip主从关系
+    const masterSlaveResult = await Promise.all(
+      queryResult.map((item) => queryMasterSlavePairs({ cluster_id: item.cluster_id })),
+    );
+    const masterSlaveMap = masterSlaveResult.flat().reduce<Record<string, string>>((acc, cur) => {
+      acc[cur.master_ip] = cur.slave_ip;
+      return acc;
+    }, {});
+    const ipsSet = new Set(availableLines);
+    const legalInstances = _.uniqBy(
+      queryResult.reduce<InstanceItem[]>((acc, cur) => {
+        if (ipsSet.has(cur.ip)) {
+          // 格式化实例角色
+          const roleMap = {
+            master: 'redis_master',
+            slave: 'redis_slave',
+            proxy: 'proxy',
+          };
+          acc.push({
+            ...cur,
+            role: roleMap[cur.role as keyof typeof roleMap],
+          });
+          // 如果是主ip则带出从ip
+          if (cur.role === 'master') {
+            const slaveIp = masterSlaveMap[cur.ip];
+            acc.push({
+              ...cur,
+              ip: slaveIp,
+              role: 'redis_slave',
+            });
+          }
+          ipsSet.delete(cur.ip);
+        }
+        return acc;
+      }, []),
+      'ip',
+    );
+    inputState.isLoading = false;
+    // 错误ip(未找到)
+    const checkErrorLines = [...ipsSet];
+
+    inputState.tableData.splice(0, inputState.tableData.length, ...legalInstances);
+    errorState.instance.count = checkErrorLines.length;
+    const { selectionEnd } = errorState.format;
+    errorState.instance.selectionStart = selectionEnd === 0 ? 0 : selectionEnd + 1;
+    errorState.instance.selectionEnd = checkErrorLines.join('\n').length + errorState.format.selectionEnd + 1;
+
+    // 解析完成后选中
+    const lastValues = { ...props.lastValues };
+    const currentTab = props.validTab;
+    for (const item of inputState.tableData) {
+      const list = lastValues[currentTab];
+      const isExisted = list.find((i) => i.ip === item.ip);
+      if (!isExisted) {
+        item.cluster_domain = item.master_domain;
+        lastValues[currentTab].push(item);
+      }
+    }
+    emits('change', {
+      ...props.lastValues,
+      ...lastValues,
+    });
+    errorState.format.show = count > 0;
+    errorState.instance.show = checkErrorLines.length > 0;
+    inputState.isLoading = false;
+
+    const newLines = [...formatErrorLines, ...checkErrorLines];
+    // 将调整好的内容回填显示
+    inputState.values = newLines.join('\n');
+  };
+</script>
+
+<style lang="less">
+  .instance-selector-manual-input {
+    height: 585px;
+    padding-top: 16px;
+
+    .bk-resize-layout {
+      height: 100%;
+    }
+
+    .manual-input-wrapper {
+      padding: 0 16px;
+    }
+
+    .manual-input-textarea {
+      height: 508px;
+      margin-bottom: 8px;
+
+      textarea {
+        height: 100%;
+
+        &::selection {
+          background-color: #fdd;
+        }
+      }
+    }
+
+    .manual-input-errors {
+      font-size: @font-size-mini;
+      color: @danger-color;
+    }
+
+    .manual-input-icons {
+      font-size: @font-size-large;
+      color: @gray-color;
+      cursor: pointer;
+
+      &:hover {
+        color: @default-color;
+      }
+    }
+
+    .manual-input-buttons {
+      display: flex;
+      align-items: center;
+      margin-top: 5px;
+
+      .bk-button {
+        &:first-child {
+          flex: 1;
+        }
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderRedis.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderRedis.vue
new file mode 100644
index 0000000000..ccb78f5e60
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderRedis.vue
@@ -0,0 +1,306 @@
+<!--
+ * 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="isTreeDataLoading">
+    <div class="instance-selector-topo">
+      <BkResizeLayout
+        :border="false"
+        collapsible
+        initial-divide="340px"
+        :max="420"
+        :min="320">
+        <template #aside>
+          <div class="topo-tree-box">
+            <BkInput
+              v-model="treeSearch"
+              clearable
+              :placeholder="$t('搜索拓扑节点')" />
+            <div style="height: calc(100% - 50px); margin-top: 12px">
+              <BkTree
+                ref="treeRef"
+                children="children"
+                :data="treeData"
+                label="name"
+                :node-content-action="['click']"
+                :search="treeSearch"
+                selectable
+                :show-node-type-icon="false"
+                virtual-render
+                @node-click="handleNodeClick">
+                <template #node="item">
+                  <div class="custom-tree-node">
+                    <span class="custom-tree-node__tag">
+                      {{ item.obj === 'biz' ? '业' : '集' }}
+                    </span>
+                    <span
+                      v-overflow-tips
+                      class="custom-tree-node__name text-overflow">
+                      {{ item.name }}
+                    </span>
+                    <span class="custom-tree-node__count">
+                      {{ item.count }}
+                    </span>
+                  </div>
+                </template>
+              </BkTree>
+            </div>
+          </div>
+        </template>
+        <template #main>
+          <div style="height: 570px">
+            <RenderContent
+              :is-radio-mode="isRadioMode"
+              :last-values="lastValues"
+              :master-slave-map="masterSlaveMap"
+              :node="selectNode"
+              :role="role"
+              :table-settings="tableSettings"
+              @change="handleHostChange" />
+          </div>
+        </template>
+      </BkResizeLayout>
+    </div>
+  </BkLoading>
+</template>
+<script setup lang="ts">
+  import type { Table } from 'bkui-vue';
+
+  import { getRedisList } from '@services/source/redis';
+  import { queryMasterSlavePairs } from '@services/source/redisToolbox';
+
+  import { useGlobalBizs } from '@stores';
+
+  import type { InstanceSelectorValues } from '../Index.vue';
+
+  import type { PanelTypes } from './PanelTab.vue';
+  import RenderRedisHost from './RenderRedisHost.vue';
+
+  interface TopoTreeData {
+    id: number;
+    name: string;
+    obj: 'biz' | 'cluster';
+    count: number;
+    children?: TopoTreeData[];
+  }
+
+  interface Emits {
+    (e: 'change', value: InstanceSelectorValues): void;
+  }
+
+  interface Props {
+    lastValues: InstanceSelectorValues;
+    tableSettings: InstanceType<typeof Table>['$props']['settings'];
+    role?: string;
+    activeTab?: PanelTypes;
+    isRadioMode?: boolean;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    role: '',
+    activeTab: 'idleHosts',
+    isRadioMode: false,
+  });
+  const emits = defineEmits<Emits>();
+
+  const { currentBizId, currentBizInfo } = useGlobalBizs();
+
+  const isTreeDataLoading = ref(false);
+  const treeRef = ref();
+  const treeSearch = ref('');
+  const selectNode = ref<{
+    id: number;
+    name: string;
+  }>();
+  const treeData = shallowRef<TopoTreeData[]>([]);
+
+  const renderMap = { idleHosts: RenderRedisHost } as Record<string, any>;
+
+  const RenderContent = computed(() => renderMap[props.activeTab as string]);
+
+  const masterSlaveMap: Record<string, ServiceReturnType<typeof queryMasterSlavePairs>[number]> = {};
+
+  const fetchMasterSlavePairs = (clusterIds: number[]) => {
+    const taskList = clusterIds.map((id) => queryMasterSlavePairs({ cluster_id: id }));
+    Promise.all(taskList).then((resultList) => {
+      resultList.flat().forEach((item) => {
+        masterSlaveMap[item.master_ip] = item;
+      });
+    });
+  };
+
+  const fetchClusterTopo = () => {
+    isTreeDataLoading.value = true;
+    getRedisList({
+      offset: 0,
+      limit: -1,
+    })
+      .then((data) => {
+        let total = 0;
+        const clusterIds: number[] = [];
+        const children = data.results.reduce<TopoTreeData[]>((acc, cluster) => {
+          total += cluster.count;
+          clusterIds.push(cluster.id);
+          return [
+            ...acc,
+            {
+              id: cluster.id,
+              name: cluster.master_domain,
+              obj: 'cluster',
+              count: cluster.count,
+            },
+          ];
+        }, []);
+        treeData.value = [
+          {
+            name: currentBizInfo?.display_name || '--',
+            id: currentBizId,
+            obj: 'biz',
+            count: total,
+            children,
+          },
+        ];
+        fetchMasterSlavePairs(clusterIds);
+        setTimeout(() => {
+          if (data.results.length > 0) {
+            [selectNode.value] = treeData.value;
+            const [firstRawNode] = treeRef.value.getData().data;
+            treeRef.value.setOpen(firstRawNode);
+            treeRef.value.setSelect(firstRawNode);
+          }
+        });
+      })
+      .catch((e) => {
+        console.error(e);
+      })
+      .finally(() => {
+        isTreeDataLoading.value = false;
+      });
+  };
+
+  fetchClusterTopo();
+
+  // 选中topo节点，获取topo节点下面的所有主机
+  const handleNodeClick = (
+    node: TopoTreeData,
+    info: unknown,
+    {
+      __is_open: isOpen,
+      __is_selected: isSelected,
+    }: {
+      __is_open: boolean;
+      __is_selected: boolean;
+      __index: number;
+    },
+  ) => {
+    const rawNode = treeRef.value.getData().data.find((item: { id: number }) => item.id === node.id);
+    selectNode.value = node;
+    if (!isOpen && !isSelected) {
+      treeRef.value.setNodeOpened(rawNode, true);
+      treeRef.value.setSelect(rawNode, true);
+      return;
+    }
+
+    if (isOpen && !isSelected) {
+      treeRef.value.setSelect(rawNode, true);
+      return;
+    }
+
+    if (isSelected) {
+      treeRef.value.setNodeOpened(rawNode, !isOpen);
+    }
+  };
+
+  const handleHostChange = (values: InstanceSelectorValues) => {
+    emits('change', values);
+  };
+</script>
+<style lang="less">
+  .instance-selector-topo {
+    display: block;
+    padding-top: 16px;
+
+    .bk-resize-layout {
+      height: 100%;
+    }
+
+    .topo-tree-box {
+      height: 100%;
+      max-height: 570px;
+      padding: 0 16px;
+
+      .bk-tree {
+        .bk-node-content {
+          font-size: 12px;
+        }
+
+        .bk-node-prefix {
+          width: 12px !important;
+          height: 12px !important;
+          color: #979ba5;
+        }
+
+        .bk-node-row {
+          .custom-tree-node {
+            display: flex;
+            align-items: center;
+
+            &__tag {
+              width: 20px;
+              height: 20px;
+              margin-right: 8px;
+              line-height: 20px;
+              color: white;
+              text-align: center;
+              background-color: #c4c6cc;
+              flex-shrink: 0;
+              border-radius: 50%;
+            }
+
+            &__name {
+              flex: 1;
+            }
+
+            &__count {
+              height: 16px;
+              padding: 0 6px;
+              line-height: 16px;
+              color: #979ba5;
+              background-color: #f0f1f5;
+              border-radius: 2px;
+              flex-shrink: 0;
+            }
+          }
+
+          &.is-selected {
+            color: @primary-color;
+            background-color: #e1ecff;
+
+            .custom-tree-node__tag {
+              background-color: #3a84ff;
+            }
+
+            .custom-tree-node__count {
+              color: white;
+              background-color: #a3c5fd;
+            }
+
+            .bk-node-prefix {
+              color: #3a84ff;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderRedisHost.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderRedisHost.vue
new file mode 100644
index 0000000000..e2c4d1d11e
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderRedisHost.vue
@@ -0,0 +1,509 @@
+<!--
+ * 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="instance-selector-render-topo-host">
+    <SerachBar
+      v-model="searchValue"
+      is-host
+      :placeholder="t('请输入或选择条件搜索')"
+      :search-attrs="searchAttrs"
+      :type="ClusterTypes.REDIS"
+      :validate-search-values="validateSearchValues"
+      @search-value-change="handleSearchValueChange" />
+    <BkLoading
+      :loading="isTableDataLoading"
+      :z-index="2">
+      <DbOriginalTable
+        class="table-box"
+        :columns="columns"
+        :data="tableData"
+        :is-anomalies="isAnomalies"
+        :is-searching="!!searchValue.length"
+        :max-height="530"
+        :pagination="pagination.count < 10 ? false : pagination"
+        remote-pagination
+        :settings="tableSettings"
+        style="margin-top: 12px"
+        @clear-search="clearSearchValue"
+        @column-filter="columnFilterChange"
+        @page-limit-change="handlePageLimitChange"
+        @page-value-change="handlePageValueChange" />
+    </BkLoading>
+  </div>
+</template>
+<script setup lang="tsx">
+  import type { Table } from 'bkui-vue';
+  import _ from 'lodash';
+  import { useI18n } from 'vue-i18n';
+
+  import { getRedisMachineList } from '@services/source/redis';
+  import type { queryMasterSlavePairs } from '@services/source/redisToolbox';
+
+  import { useLinkQueryColumnSerach } from '@hooks';
+
+  import { ClusterTypes, LocalStorageKeys } from '@common/const';
+
+  import DbStatus from '@components/db-status/index.vue';
+  import SerachBar from '@components/instance-selector/components/common/SearchBar.vue';
+
+  import type { SpecInfo } from '@views/db-manage/redis/common/spec-panel/Index.vue';
+
+  import { getSearchSelectorParams } from '@utils';
+
+  import type { InstanceSelectorValues } from '../Index.vue';
+
+  import { activePanelInjectionKey } from './PanelTab.vue';
+
+  type RedisHostModel = ServiceReturnType<typeof getRedisMachineList>['results'][number] & {
+    isShowTip?: boolean;
+  };
+
+  interface TableItem {
+    data: RedisHostModel
+  }
+
+  export interface Props {
+    tableSettings: InstanceType<typeof Table>['$props'],
+    lastValues: InstanceSelectorValues,
+    node?: {
+      id: number,
+      name: string
+      obj: 'biz' | 'cluster'
+    },
+    role?: string,
+    isRadioMode?: boolean,
+    masterSlaveMap?: Record<string, ServiceReturnType<typeof queryMasterSlavePairs>[number]>,
+  }
+
+  interface Emits {
+    (e: 'change', value: InstanceSelectorValues): void;
+  }
+
+  export interface ChoosedItem {
+    bk_biz_id: number;
+    bk_host_id: number;
+    bk_cloud_id: number;
+    ip: string;
+    role: string;
+    cluster_ids: number[];
+    cluster_domain: string;
+    spec_config: SpecInfo;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    node: undefined,
+    role: '',
+    isRadioMode: false,
+    masterSlaveMap: () => ({}),
+  });
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+
+  const {
+    columnAttrs,
+    searchAttrs,
+    searchValue,
+    columnCheckedMap,
+    columnFilterChange,
+    clearSearchValue,
+    validateSearchValues,
+    handleSearchValueChange,
+  } = useLinkQueryColumnSerach({
+    searchType: ClusterTypes.REDIS,
+    attrs: [
+      'bk_cloud_id'
+    ],
+    fetchDataFn: () => fetchData(),
+    defaultSearchItem: {
+      name: 'IP',
+      id: 'ip',
+    },
+    isDiscardNondefault: true,
+  });
+
+  const activePanel = inject(activePanelInjectionKey);
+
+  const showTipLocalValue = localStorage.getItem(LocalStorageKeys.REDIS_DB_REPLACE_MASTER_TIP);
+
+  const isAnomalies = ref(false);
+  const showMasterTip = ref(!showTipLocalValue);
+  const isTableDataLoading = ref(false);
+  const tableData = ref<RedisHostModel[]>([]);
+
+  const checkedMap = shallowRef<Record<string, ChoosedItem>>({});
+
+  const pagination = reactive({
+    count: 0,
+    current: 1,
+    limit: 10,
+    limitList: [10, 20, 50, 100],
+    align: 'right',
+    layout: ['total', 'limit', 'list'],
+  });
+
+  const isSelectedAll = computed(() => (
+    tableData.value.length > 0
+    && tableData.value.length === tableData.value.filter(item => checkedMap.value[item.ip]).length
+  ));
+
+  const isIndeterminate = computed(() => !isSelectedAll.value && Object.values(checkedMap.value).length > 0);
+
+  const isSingleSelect = computed(() => props.isRadioMode);
+
+  // 选中域名列表
+  const selectedDomains = computed(() => Object.values(checkedMap.value).map(item => item.ip));
+
+  const columns = computed(() => [
+    {
+      width: 70,
+      fixed: 'left',
+      label: () => (isSingleSelect.value ? '' : (
+        <div style="display:flex;align-items:center">
+          <bk-checkbox
+            indeterminate={isIndeterminate.value}
+            model-value={isSelectedAll.value}
+            onChange={handleSelectPageAll}
+          />
+          <bk-popover
+            placement="bottom-start"
+            theme="light db-table-select-menu"
+            arrow={ false }
+            trigger='hover'
+            v-slots={{
+              default: () => <db-icon class="select-menu-flag ml-10" type="down-big" />,
+              content: () => (
+                <div class="db-table-select-plan">
+                  <div
+                    class="item"
+                    onClick={handleWholeSelect}>{t('跨页全选')}</div>
+                </div>
+              ),
+            }}>
+          </bk-popover>
+        </div>
+      )),
+      render: ({ index, data }: {index: number, data: RedisHostModel}) => {
+        if (data.instance_role === 'redis_master' && showMasterTip.value) {
+          return <bk-popover
+            is-show={data.isShowTip}
+            popover-delay={0}
+            width={270}
+            trigger="manual"
+            theme="light"
+            placement="top">
+            {{
+              default: () => (isSingleSelect.value ? (
+                <bk-radio
+                  class="check-box"
+                  label={data.ip}
+                  model-value={selectedDomains.value[0]}
+                  onChange={() => handleTableSelectOne(true, data)}
+                />
+              ) : (
+                <bk-checkbox
+                  style="vertical-align:middle;padding-top:5px;"
+                  model-value={Boolean(checkedMap.value[data.ip])}
+                  onMouseenter={() => handleControlTip(index, true)}
+                  onChange={(value: boolean) => handleTableSelectOne(value, data)}
+                />
+              )),
+              content: () => (
+                <div class="redis-host-master-tip-box">
+                  <span>{t('选择 Master IP 会默认选上关联的 Slave IP，一同替换')}</span>
+                  <div class="no-tip" onClick={handleClickNoTip}>{t('不再提示')}</div>
+                </div>
+              ),
+            }}
+          </bk-popover>;
+        }
+        return isSingleSelect.value ? (
+          <bk-radio
+            class="check-box"
+            label={data.ip}
+            model-value={selectedDomains.value[0]}
+            onChange={() => handleTableSelectOne(true, data)}
+          />
+          ) : (
+          <bk-checkbox
+            style="vertical-align: middle;"
+            model-value={Boolean(checkedMap.value[data.ip])}
+            onClick={(e: Event) => e.stopPropagation()}
+            onMouseenter={() => handleControlTip(index, false)}
+            onChange={(value: boolean) => handleTableSelectOne(value, data)}
+          />
+        );
+      },
+    },
+    {
+      fixed: 'left',
+      minWidth: 160,
+      label: props.role ? props.role.charAt(0).toUpperCase() + props.role.slice(1) : t('实例'),
+      field: 'ip',
+    },
+    {
+      label: t('角色类型'),
+      field: 'instance_role',
+      showOverflowTooltip: true,
+      // filter: {
+      //   list: [
+      //     { text: 'master', value: 'master' },
+      //     { text: 'slave', value: 'slave' },
+      //     { text: 'proxy', value: 'proxy' },
+      //   ],
+      //   checked: columnCheckedMap.value.role,
+      // },
+      render: ({ data } : TableItem) => <span>{data.instance_role}</span>,
+    },
+    {
+      label: t('实例状态'),
+      field: 'status',
+      render: ({ data } : TableItem) => {
+        const info = data.host_info.alive === 1 ? { theme: 'success', text: t('正常') } : { theme: 'danger', text: t('异常') };
+        return <DbStatus theme={info.theme}>{info.text}</DbStatus>;
+      },
+    },
+    {
+      minWidth: 100,
+      label: t('管控区域'),
+      field: 'bk_cloud_id',
+      filter: {
+        list: columnAttrs.value.bk_cloud_id,
+        checked: columnCheckedMap.value.bk_cloud_id,
+      },
+      render: ({ data }: TableItem) => <span>{data.bk_cloud_name ?? '--'}</span>,
+    },
+    {
+      minWidth: 100,
+      label: t('Agent状态'),
+      field: 'alive',
+      render: ({ data } : TableItem) => {
+        const info = data.host_info?.alive === 1 ? { theme: 'success', text: t('正常') } : { theme: 'danger', text: t('异常') };
+        return <DbStatus theme={info.theme}>{info.text}</DbStatus>;
+      },
+    },
+    {
+      label: t('主机名称'),
+      field: 'host_name',
+      showOverflowTooltip: true,
+      render: ({ data } : TableItem) => data.host_info?.host_name || '--',
+    },
+    {
+      label: t('OS名称'),
+      field: 'os_name',
+      showOverflowTooltip: true,
+      render: ({ data } : TableItem) => data.host_info?.os_name || '--',
+    },
+    {
+      label: t('所属云厂商'),
+      field: 'cloud_vendor',
+      showOverflowTooltip: true,
+      render: ({ data }: TableItem) => data.host_info?.cloud_vendor || '--',
+    },
+    {
+      label: t('OS类型'),
+      field: 'os_type',
+      showOverflowTooltip: true,
+      render: ({ data }: TableItem) => data.host_info?.os_type || '--',
+    },
+    {
+      label: t('主机ID'),
+      field: 'host_id',
+      showOverflowTooltip: true,
+      render: ({ data } : TableItem) => data.host_info?.host_id || '--',
+    },
+    {
+      label: 'Agent ID',
+      field: 'agent_id',
+      showOverflowTooltip: true,
+      render: ({ data } : TableItem) => data.host_info?.agent_id || '--',
+    },
+  ]);
+
+  watch(() => props.lastValues, (lastValues) => {
+    // 切换 tab 回显选中状态 \ 预览结果操作选中状态
+    checkedMap.value = {};
+    const checkedList = lastValues.idleHosts;
+    for (const item of checkedList) {
+      checkedMap.value[item.ip] = item;
+    }
+  }, { immediate: true, deep: true });
+
+  watch(() => props.node, () => {
+    if (props.node) {
+      fetchData();
+    }
+  });
+
+  const handleControlTip = (index: number, isMaster: boolean) => {
+    tableData.value.forEach((item) => {
+      Object.assign(item, {
+        isShowTip: false,
+      });
+    });
+    if (isMaster) {
+      tableData.value[index].isShowTip = true;
+    }
+  };
+
+  const handleClickNoTip = () => {
+    showMasterTip.value = false;
+    localStorage.setItem(LocalStorageKeys.REDIS_DB_REPLACE_MASTER_TIP, '1');
+  };
+
+  const generateParams = () => ({
+    limit: pagination.limit,
+    offset: (pagination.current - 1) * pagination.limit,
+    extra: 1,
+    ...getSearchSelectorParams(searchValue.value),
+    ...(props.node?.obj === 'cluster' && {
+      cluster_ids: `${props.node.id}`,
+    }),
+  })
+
+  // 跨页全选
+  const handleWholeSelect = () => {
+    isTableDataLoading.value = true;
+    const params = generateParams();
+    params.limit = -1;
+    getRedisMachineList(params).then((data) => {
+      data.results.forEach((dataItem) => {
+        handleTableSelectOne(true, dataItem);
+      });
+    }).finally(() => isTableDataLoading.value = false);
+  };
+
+  const fetchData = () => {
+    if (props.node) {
+      isTableDataLoading.value = true;
+      const params = generateParams();
+      getRedisMachineList(params)
+        .then((data) => {
+          tableData.value = data.results.map(item => Object.assign(item, {
+            isShowTip: false,
+          }));
+          pagination.count = data.count;
+          isAnomalies.value = false;
+        })
+        .catch(() => {
+          isAnomalies.value = true;
+        })
+        .finally(() => {
+          isTableDataLoading.value = false;
+        });
+    }
+  };
+
+  const triggerChange = () => {
+    const result = Object.values(checkedMap.value);
+
+    if (activePanel?.value) {
+      emits('change', {
+        ...props.lastValues,
+        [activePanel.value]: result,
+      });
+    }
+  };
+
+  const formatValue = (data: RedisHostModel) => ({
+    bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+    bk_host_id: data?.bk_host_id || 0,
+    bk_cloud_id: data?.host_info?.cloud_id || 0,
+    ip: data?.ip || '',
+    role: data?.instance_role || '',
+    cluster_ids: data.related_clusters.map(item=>item.id) || [],
+    cluster_domain: data.related_clusters[0].immute_domain ?? '',
+    spec_config: data?.spec_config || null,
+  });
+
+  const handleSelectPageAll = (checked: boolean) => {
+    const lastCheckMap = { ...checkedMap.value };
+    for (const item of tableData.value) {
+      if (checked) {
+        lastCheckMap[item.ip] = formatValue(item);
+      } else {
+        delete lastCheckMap[item.ip];
+      }
+    }
+    checkedMap.value = lastCheckMap;
+    triggerChange();
+  };
+
+  const handleTableSelectOne = async (checked: boolean, data: RedisHostModel) => {
+    const lastCheckMap = isSingleSelect.value ? {} : { ...checkedMap.value };
+    if (checked) {
+      lastCheckMap[data.ip] = formatValue(data);
+      // master 与 slave 关联选择
+      if (Object.keys(props.masterSlaveMap).length > 0 && data.instance_role === 'redis_master') {
+        const {slave_ip: slaveIp, slaves } = props.masterSlaveMap[data.ip];
+        lastCheckMap[slaveIp] = _.merge(formatValue(data), {
+          ip: slaves.ip,
+          bk_host_id: slaves.bk_host_id,
+          role: 'redis_slave'
+        });
+      }
+      if (isSingleSelect.value) {
+        // 单选
+        selectedDomains.value[0] = data.ip;
+        checkedMap.value = lastCheckMap;
+        triggerChange();
+        return;
+      }
+    } else {
+      if (isSingleSelect.value) {
+        return;
+      }
+      delete lastCheckMap[data.ip];
+    }
+    checkedMap.value = lastCheckMap;
+    triggerChange();
+  };
+
+  // 切换每页条数
+  const handlePageLimitChange = (pageLimit: number) => {
+    pagination.limit = pageLimit;
+    handlePageValueChange(1);
+  };
+  // 切换页码
+  const handlePageValueChange = (pageValue:number) => {
+    pagination.current = pageValue;
+    fetchData();
+  };
+</script>
+
+<style lang="less">
+  .instance-selector-render-topo-host {
+    padding: 0 24px;
+  }
+
+  .table-box {
+    :deep(.check-box) {
+      .bk-radio-label {
+        display: none;
+      }
+    }
+  }
+
+  .redis-host-master-tip-box {
+    word-break: break-all;
+
+    .no-tip {
+      width: 100%;
+      font-weight: 400;
+      color: #3a84ff;
+      text-align: right;
+      cursor: pointer;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/preview-result/CollapseMini.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/preview-result/CollapseMini.vue
new file mode 100644
index 0000000000..a871747981
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/preview-result/CollapseMini.vue
@@ -0,0 +1,96 @@
+<!--
+ * 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="collapse-mini"
+    :class="[{ 'collapse-mini--collapse': state.collapse }]">
+    <div
+      class="collapse-mini__header"
+      @click="handleToggle">
+      <i class="db-icon-down-big collapse-mini__icon" />
+      <slot name="title">
+        <I18nT
+          keypath="共n条"
+          tag="span">
+          <template #n>
+            <strong style="color: #3a84ff">{{ count }}</strong>
+          </template>
+        </I18nT>
+      </slot>
+    </div>
+
+    <Transition mode="in-out">
+      <div
+        v-show="state.collapse"
+        class="collapse-mini__content">
+        <slot />
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+  interface Props {
+    collapse: boolean;
+    count: number;
+  }
+
+  const props = defineProps<Props>();
+
+  const state = reactive({
+    collapse: props.collapse,
+  });
+
+  watch(
+    () => props.collapse,
+    () => {
+      state.collapse = props.collapse;
+    },
+  );
+
+  function handleToggle() {
+    state.collapse = !state.collapse;
+  }
+</script>
+
+<style lang="less" scoped>
+  @import '@styles/mixins.less';
+
+  .collapse-mini {
+    margin-top: 16px;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &__header {
+      height: 24px;
+      padding-bottom: 4px;
+      cursor: pointer;
+      .flex-center();
+    }
+
+    &__icon {
+      font-size: @font-size-normal;
+      transform: rotate(-90deg);
+      transition: all 0.2s;
+    }
+
+    &--collapse {
+      .collapse-mini__icon {
+        transform: rotate(0);
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/preview-result/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/preview-result/Index.vue
new file mode 100644
index 0000000000..2857932575
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/preview-result/Index.vue
@@ -0,0 +1,212 @@
+<!--
+ * 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="instance-selector-preview-result">
+    <div class="header">
+      <span>{{ $t('结果预览') }}</span>
+      <BkDropdown class="result__dropdown">
+        <i class="db-icon-more result__trigger" />
+        <template #content>
+          <BkDropdownMenu>
+            <BkDropdownItem @click="handleClear">
+              {{ $t('清空所有') }}
+            </BkDropdownItem>
+            <BkDropdownItem @click="handleCopyInstances">
+              {{ $t('复制所有实例') }}
+            </BkDropdownItem>
+          </BkDropdownMenu>
+        </template>
+      </BkDropdown>
+    </div>
+    <BkException
+      v-if="isEmpty"
+      class="mt-50"
+      :description="$t('暂无数据_请从左侧添加对象')"
+      scene="part"
+      type="empty" />
+    <div
+      v-else
+      class="result-wrapper">
+      <template
+        v-for="key in keys"
+        :key="key">
+        <CollapseMini
+          v-if="lastValues[key].length > 0"
+          collapse
+          :count="lastValues[key].length"
+          :title="textMap[key]">
+          <div
+            v-for="(item, index) of lastValues[key]"
+            :key="item.ip"
+            class="result-item">
+            <span
+              v-overflow-tips
+              class="text-overflow">
+              {{ item.ip }}
+              <span class="result-item-role">({{ item.role }})</span>
+            </span>
+            <DbIcon
+              type="close result-item-remove"
+              @click="handleRemove(key, index)" />
+          </div>
+        </CollapseMini>
+      </template>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import { useCopy } from '@hooks';
+
+  import { messageWarn } from '@utils';
+
+  import { textMap } from '../../common/utils';
+  import type { InstanceSelectorValues } from '../../Index.vue';
+
+  import CollapseMini from './CollapseMini.vue';
+
+  interface Props {
+    lastValues: InstanceSelectorValues;
+  }
+
+  type Keys = keyof InstanceSelectorValues;
+
+  interface Emits {
+    (e: 'change', value: InstanceSelectorValues): void;
+  }
+
+  const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+  const copy = useCopy();
+
+  const keys = computed(() => Object.keys(props.lastValues) as Keys[]);
+  const isEmpty = computed(() => !keys.value.some((key) => props.lastValues[key].length > 0));
+
+  const handleClear = () => {
+    emits('change', {
+      idleHosts: [],
+    });
+  };
+
+  const handleRemove = (key: Keys, index: number) => {
+    const target = props.lastValues[key];
+    target.splice(index, 1);
+    emits('change', {
+      ...props.lastValues,
+      [key]: target,
+    });
+  };
+
+  /**
+   * 复制集群域名
+   */
+  const handleCopyInstances = () => {
+    if (isEmpty.value) {
+      messageWarn(t('没有可复制实例'));
+      return;
+    }
+
+    const instances = [];
+    for (const key of keys.value) {
+      instances.push(...props.lastValues[key]);
+    }
+    copy(instances.map((item) => item.ip).join('\n'));
+  };
+</script>
+<style lang="less">
+  .instance-selector-preview-result {
+    display: flex;
+    height: 100%;
+    max-height: 625px;
+    padding: 12px 24px;
+    overflow: hidden;
+    font-size: @font-size-mini;
+    background-color: #f5f6fa;
+    flex-direction: column;
+
+    .header {
+      display: flex;
+      padding-bottom: 16px;
+      align-items: center;
+
+      > span {
+        flex: 1;
+        font-size: @font-size-normal;
+        color: @title-color;
+      }
+
+      .result__dropdown {
+        font-size: 0;
+        line-height: 20px;
+      }
+
+      .result__trigger {
+        display: block;
+        font-size: 18px;
+        color: @gray-color;
+        cursor: pointer;
+
+        &:hover {
+          background-color: @bg-disable;
+          border-radius: 2px;
+        }
+      }
+    }
+
+    .result-wrapper {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow-y: auto;
+
+      .result-item {
+        display: flex;
+        padding: 0 12px;
+        margin-bottom: 2px;
+        line-height: 32px;
+        background-color: @bg-white;
+        border-radius: 2px;
+        justify-content: space-between;
+        align-items: center;
+
+        .result-item-remove {
+          display: none;
+          font-size: @font-size-large;
+          font-weight: bold;
+          color: @gray-color;
+          cursor: pointer;
+
+          &:hover {
+            color: @default-color;
+          }
+        }
+
+        &:hover {
+          .result-item-remove {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+
+  .result-item-role {
+    margin-left: 8px;
+    font-size: 12px;
+    color: #c4c6cc;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_PROXY_SCALE_DOWN/Create.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_PROXY_SCALE_DOWN/Create.vue
new file mode 100644
index 0000000000..2111c6438e
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_PROXY_SCALE_DOWN/Create.vue
@@ -0,0 +1,276 @@
+<!--
+ * 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>
+    <BkAlert
+      class="mb-20"
+      closable
+      :title="t('缩容接入层：减少集群的Proxy数量，但集群Proxy数量不能少于2')" />
+    <BkForm
+      v-model="formData"
+      class="mb-20"
+      form-type="vertical">
+      <EditableTable
+        ref="table"
+        class="mb-20"
+        :model="formData.tableData">
+        <EditableTableRow
+          v-for="(item, index) in formData.tableData"
+          :key="index">
+          <ClusterColumn
+            v-model="item.cluster"
+            :selected="selected"
+            @batch-edit="handleBatchEdit" />
+          <Column
+            field="cluster.cluster_type_name"
+            :label="t('架构版本')"
+            :min-width="150">
+            <Block
+              v-model="item.cluster.cluster_type_name"
+              :placeholder="t('自动生成')" />
+          </Column>
+          <Column
+            field="cluster.role"
+            :label="t('缩容节点类型')"
+            :min-width="150"
+            required>
+            <Block
+              v-model="item.cluster.role"
+              :placeholder="t('自动生成')" />
+          </Column>
+          <HybridHostColumn
+            v-model="item.host.type"
+            field="host.type"
+            :label="t('主机选择方式')"
+            :min-width="150"
+            :spec-ids="item.cluster.proxy_spec_ids"
+            @change="(list) => handleSelectHost(list, item)" />
+          <Column
+            field="count"
+            :label="t('缩容数量（台）')"
+            :min-width="150">
+            <div
+              v-bk-tooltips="{
+                content: t('手动选择主机不需要设置缩容数量'),
+                disabled: item.host.type !== HostSelectType.MANUAL,
+              }"
+              style="flex: 1">
+              <Input
+                v-model="item.count"
+                :disabled="item.host.type === HostSelectType.MANUAL"
+                :min="0"
+                type="number" />
+            </div>
+          </Column>
+          <Column
+            field="switchMode"
+            :label="t('切换模式')"
+            :min-width="150">
+            <Select
+              v-model="item.switchMode"
+              :disabled="item.host.type === HostSelectType.MANUAL"
+              :input-search="false"
+              :list="switchModeOptions" />
+          </Column>
+          <OperationColumn
+            v-model:table-data="formData.tableData"
+            :create-row-method="createTableRow" />
+        </EditableTableRow>
+      </EditableTable>
+      <TicketRemark v-model="formData.remark" />
+    </BkForm>
+    <template #action>
+      <BkButton
+        class="mr-8 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 lang="ts" setup>
+  import { reactive, useTemplateRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import RedisModel from '@services/model/redis/redis';
+
+  import { useCreateTicket } from '@hooks';
+
+  import { TicketTypes } from '@common/const';
+
+  import EditableTable, {
+    Block,
+    Column,
+    Input,
+    Row as EditableTableRow,
+    Select,
+  } from '@components/editable-table/Index.vue';
+
+  import HybridHostColumn, {
+    type HostInfo,
+    HostSelectType,
+  } from '@views/db-manage/common/toolbox-field/column/hybrid-host-column/Index.vue';
+  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
+  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+
+  import ClusterColumn from './components/ClusterColumn.vue';
+
+  interface RowData {
+    cluster: {
+      id: number;
+      master_domain: string;
+      cluster_type_name: string;
+      role: string;
+      proxy_spec_ids: number[];
+    };
+    host: {
+      type: string;
+      list: {
+        bk_biz_id: number;
+        bk_cloud_id: number;
+        bk_host_id: number;
+        ip: string;
+      }[];
+    };
+    count: string;
+    switchMode: string;
+  }
+
+  const { t } = useI18n();
+  const tableRef = useTemplateRef('table');
+
+  const createTableRow = (data = {} as Partial<RowData>) => ({
+    cluster: data.cluster || {
+      id: 0,
+      master_domain: '',
+      cluster_type_name: '',
+      role: '',
+      proxy_spec_ids: [],
+    },
+    host: data.host || {
+      type: '',
+      list: [],
+    },
+    count: data.count || '',
+    switchMode: data.switchMode || '',
+  });
+
+  const defaultData = () => ({
+    tableData: [createTableRow()],
+    remark: '',
+  });
+
+  const formData = reactive(defaultData());
+  const selected = computed(() => formData.tableData.filter((item) => item.cluster.id).map((item) => item.cluster));
+  const selectedMap = computed(() => Object.fromEntries(selected.value.map((cur) => [cur.master_domain, true])));
+
+  const switchModeOptions = [
+    {
+      value: 'user_confirm',
+      label: t('需人工确认'),
+    },
+    {
+      value: 'no_confirm',
+      label: t('无需确认'),
+    },
+  ];
+
+  interface TicketDetail {
+    ip_source: 'resource_pool';
+    infos: {
+      cluster_id: number;
+      target_proxy_count?: number;
+      old_nodes?: {
+        proxy_reduced_hosts: {
+          bk_biz_id: number;
+          bk_cloud_id: number;
+          bk_host_id: number;
+          ip: string;
+        }[];
+      };
+      online_switch_type: string;
+    }[];
+  }
+
+  const { run: createTicketRun, loading: isSubmitting } = useCreateTicket<TicketDetail>(
+    TicketTypes.REDIS_PROXY_SCALE_DOWN,
+  );
+
+  const handleSubmit = async () => {
+    const result = await tableRef.value!.validate();
+    if (!result) {
+      return;
+    }
+    createTicketRun({
+      details: {
+        ip_source: 'resource_pool',
+        infos: formData.tableData.map((item) => {
+          const info: TicketDetail['infos'][0] = {
+            cluster_id: item.cluster.id,
+            online_switch_type: item.switchMode,
+          };
+
+          if (item.host.list.length) {
+            info.old_nodes = { proxy_reduced_hosts: item.host.list };
+          } else if (item.count) {
+            info.target_proxy_count = Number(item.count);
+          }
+
+          return info;
+        }),
+      },
+      remark: formData.remark,
+    });
+  };
+
+  const handleReset = () => {
+    Object.assign(formData, defaultData());
+  };
+
+  const handleBatchEdit = (list: RedisModel[]) => {
+    const dataList = list.reduce<RowData[]>((acc, item) => {
+      if (!selectedMap.value[item.master_domain]) {
+        acc.push(
+          createTableRow({
+            cluster: {
+              id: item.id,
+              master_domain: item.master_domain,
+              cluster_type_name: item.cluster_type_name,
+              role: 'Proxy',
+              proxy_spec_ids: item?.proxy.map((item) => item.spec_config?.id),
+            },
+          }),
+        );
+      }
+      return acc;
+    }, []);
+    formData.tableData = [...(selected.value.length ? formData.tableData : []), ...dataList];
+  };
+
+  const handleSelectHost = (list: HostInfo[], row: RowData) => {
+    row.host.list = list;
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_PROXY_SCALE_DOWN/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_PROXY_SCALE_DOWN/Index.vue
new file mode 100644
index 0000000000..7d5a04e740
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_PROXY_SCALE_DOWN/Index.vue
@@ -0,0 +1,32 @@
+<!--
+ * 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="components[page]" />
+</template>
+<script setup lang="ts">
+  import { useRoute } from 'vue-router';
+
+  import Page2 from '@views/db-manage/common/create-ticket-success/Index.vue';
+
+  import Page1 from './Create.vue';
+
+  const route = useRoute();
+
+  const components = {
+    create: Page1,
+    success: Page2,
+  };
+
+  const page = computed(() => (route.params.page as keyof typeof components) || 'create');
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_PROXY_SCALE_DOWN/components/ClusterColumn.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_PROXY_SCALE_DOWN/components/ClusterColumn.vue
new file mode 100644
index 0000000000..8fec514b43
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_PROXY_SCALE_DOWN/components/ClusterColumn.vue
@@ -0,0 +1,185 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    :append-rules="rules"
+    field="cluster.master_domain"
+    fixed="left"
+    :label="t('目标集群')"
+    :loading="loading"
+    :min-width="150"
+    required>
+    <template #headAppend>
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-host-select"
+        @click="handleShowSelector">
+        <DbIcon type="batch-host-select" />
+      </span>
+    </template>
+    <Input
+      v-model="modelValue.master_domain"
+      :placeholder="t('请输入集群域名')"
+      @change="handleInputChange" />
+  </Column>
+  <ClusterSelector
+    v-model:is-show="showSelector"
+    :cluster-types="[ClusterTypes.REDIS]"
+    :selected="selectedClusters"
+    support-offline-data
+    :tab-list-config="tabListConfig"
+    @change="handleSelectorChange" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import RedisModel from '@services/model/redis/redis';
+  import { filterClusters } from '@services/source/dbbase';
+  import { getRedisList } from '@services/source/redis';
+
+  import { ClusterTypes } from '@common/const';
+  import { domainRegex } from '@common/regex';
+
+  import ClusterSelector, { type TabConfig } from '@components/cluster-selector/Index.vue';
+  import { Column, Input } from '@components/editable-table/Index.vue';
+
+  interface Props {
+    selected: {
+      id: number;
+      master_domain: string;
+    }[];
+  }
+
+  interface Emits {
+    (e: 'batch-edit', list: RedisModel[]): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<{
+    id?: number;
+    master_domain: string;
+    cluster_type_name: string;
+    role: string;
+    proxy_spec_ids: number[];
+  }>({
+    default: () => ({
+      master_domain: '',
+      cluster_type_name: '',
+      role: '',
+      proxy_spec_ids: [],
+    }),
+  });
+
+  const { t } = useI18n();
+
+  const showSelector = ref(false);
+  const selectedClusters = computed<Record<string, RedisModel[]>>(() => ({
+    [ClusterTypes.REDIS]: props.selected.map(
+      (item) =>
+        ({
+          id: item.id,
+          master_domain: item.master_domain,
+        }) as RedisModel,
+    ),
+  }));
+
+  const tabListConfig = {
+    [ClusterTypes.REDIS]: {
+      getResourceList: (params: ServiceParameters<typeof getRedisList>) =>
+        getRedisList({
+          cluster_type: [
+            ClusterTypes.TWEMPROXY_REDIS_INSTANCE,
+            ClusterTypes.PREDIXY_TENDISPLUS_CLUSTER,
+            ClusterTypes.TWEMPROXY_TENDIS_SSD_INSTANCE,
+            ClusterTypes.PREDIXY_REDIS_CLUSTER,
+          ].join(','),
+          ...params,
+        }),
+      disabledRowConfig: [
+        {
+          handler: (data: RedisModel) => data.proxy.length <= 2,
+          tip: t('数量不足，Proxy至少保留 2 台'),
+        },
+      ],
+    },
+  } as unknown as Record<string, TabConfig>;
+
+  const rules = [
+    {
+      validator: (value: string) => domainRegex.test(value),
+      message: t('集群域名格式不正确'),
+      trigger: 'change',
+    },
+    {
+      validator: (value: string) => props.selected.filter((item) => item.master_domain === value).length < 2,
+      message: t('目标集群重复'),
+      trigger: 'blur',
+    },
+    {
+      validator: () => {
+        if (!modelValue.value.master_domain) {
+          return true;
+        }
+        return Boolean(modelValue.value.id);
+      },
+      message: t('目标集群不存在'),
+      trigger: 'blur',
+    },
+  ];
+
+  const { run: queryCluster, loading } = useRequest(filterClusters<RedisModel>, {
+    manual: true,
+    onSuccess: (data) => {
+      modelValue.value.id = undefined;
+      if (data.length) {
+        const [currentCluster] = data;
+        modelValue.value = {
+          id: currentCluster.id,
+          master_domain: currentCluster.master_domain,
+          cluster_type_name: currentCluster.cluster_type_name,
+          role: 'Proxy',
+          proxy_spec_ids: currentCluster.proxy.map((item) => item.spec_config?.id),
+        };
+      }
+    },
+  });
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    if (value) {
+      queryCluster({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        exact_domain: value,
+      });
+    }
+  };
+
+  const handleSelectorChange = (selected: Record<string, RedisModel[]>) => {
+    emits('batch-edit', selected[ClusterTypes.REDIS]);
+  };
+</script>
+<style lang="less" scoped>
+  .batch-host-select {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/Create.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/Create.vue
new file mode 100644
index 0000000000..92f2b9ac39
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/Create.vue
@@ -0,0 +1,288 @@
+<!--
+ * 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>
+    <BkAlert
+      class="mb-20"
+      closable
+      :title="t('集群容量变更：通过部署新集群来实现原集群的扩容或缩容（集群分片数不变），可以指定新的版本')" />
+    <BkForm
+      v-model="formData"
+      class="mb-20"
+      form-type="vertical">
+      <EditableTable
+        ref="table"
+        class="mb-20"
+        :model="formData.tableData">
+        <EditableTableRow
+          v-for="(item, index) in formData.tableData"
+          :key="index">
+          <ClusterColumn
+            v-model="item.cluster"
+            :selected="selected"
+            @batch-edit="handleBatchEdit" />
+          <Column
+            field="cluster.cluster_type_name"
+            :label="t('架构版本')"
+            :min-width="150">
+            <Block
+              v-model="item.cluster.cluster_type_name"
+              :placeholder="t('自动生成')" />
+          </Column>
+          <RedisVersionColumn
+            v-model="item.version"
+            :cluster="item.cluster" />
+          <CurrentCapacityColumn :cluster="item.cluster" />
+          <TargetCapacityColumn
+            v-model="item.backendGroup"
+            :row-data="item" />
+          <Column
+            field="switchMode"
+            :label="t('切换模式')"
+            :min-width="150">
+            <Select
+              v-model="item.switchMode"
+              :disabled="!item.cluster.id"
+              :input-search="false"
+              :list="switchModeOptions" />
+          </Column>
+          <OperationColumn
+            v-model:table-data="formData.tableData"
+            :create-row-method="createTableRow" />
+        </EditableTableRow>
+      </EditableTable>
+      <TicketRemark v-model="formData.remark" />
+    </BkForm>
+    <template #action>
+      <BkButton
+        class="mr-8 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 lang="ts" setup>
+  import { reactive, useTemplateRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import RedisModel from '@services/model/redis/redis';
+
+  import { useCreateTicket } from '@hooks';
+
+  import { TicketTypes } from '@common/const';
+
+  import EditableTable, { Block, Column, Row as EditableTableRow, Select } from '@components/editable-table/Index.vue';
+
+  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
+  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+  import { AffinityType } from '@views/db-manage/redis/common/types';
+
+  import ClusterColumn from './components/ClusterColumn.vue';
+  import CurrentCapacityColumn from './components/CurrentCapacityColumn.vue';
+  import RedisVersionColumn from './components/RedisVersionColumn.vue';
+  import TargetCapacityColumn from './components/target-capacity-column/Index.vue';
+
+  interface RowData {
+    cluster: Pick<
+      RedisModel,
+      | 'id'
+      | 'master_domain'
+      | 'cluster_type'
+      | 'cluster_type_name'
+      | 'bk_cloud_id'
+      | 'major_version'
+      | 'cluster_capacity'
+      | 'disaster_tolerance_level'
+    > & {
+      cluster_stats?: RedisModel['cluster_stats'];
+      cluster_spec?: RedisModel['cluster_spec'];
+      group_num: RedisModel['machine_pair_cnt'];
+      shard_num: RedisModel['cluster_shard_num'];
+    };
+    version: string;
+    currentCapacity: {
+      used: number;
+      total: number;
+    };
+    backendGroup: {
+      spec_id: number;
+      count: number;
+      affinity: string;
+      group_num: number;
+      shard_num: number;
+    };
+    switchMode: string;
+  }
+
+  const { t } = useI18n();
+  const tableRef = useTemplateRef('table');
+
+  const createTableRow = (data = {} as Partial<RowData>) => ({
+    cluster: data.cluster || {
+      id: 0,
+      master_domain: '',
+      cluster_type: '',
+      cluster_type_name: '',
+      major_version: '',
+      shard_num: 0,
+      group_num: 0,
+      bk_cloud_id: 0,
+      cluster_capacity: 0,
+      disaster_tolerance_level: 'CROS_SUBZONE',
+    },
+    version: data.version || '',
+    currentCapacity: data.currentCapacity || {
+      used: 0,
+      total: 1,
+    },
+    backendGroup: data.backendGroup || {
+      spec_id: 0,
+      count: 0,
+      affinity: AffinityType.CROS_SUBZONE,
+      shard_num: 0,
+      group_num: 0,
+    },
+    switchMode: data.switchMode || '',
+  });
+
+  const defaultData = () => ({
+    tableData: [createTableRow()],
+    remark: '',
+  });
+
+  const formData = reactive(defaultData());
+
+  const selected = computed(() => formData.tableData.filter((item) => item.cluster.id).map((item) => item.cluster));
+  const selectedMap = computed(() => Object.fromEntries(selected.value.map((cur) => [cur.master_domain, true])));
+
+  const switchModeOptions = [
+    {
+      value: 'user_confirm',
+      label: t('需人工确认'),
+    },
+    {
+      value: 'no_confirm',
+      label: t('无需确认'),
+    },
+  ];
+
+  const { run: createTicketRun, loading: isSubmitting } = useCreateTicket<{
+    ip_source: 'resource_pool';
+    infos: {
+      cluster_id: number;
+      bk_cloud_id: number;
+      db_version: string;
+      shard_num: number;
+      group_num: number;
+      online_switch_type: string;
+      resource_spec: {
+        backend_group: {
+          spec_id: number;
+          count: number; // 机器组数
+          affinity: AffinityType;
+        };
+      };
+      old_nodes?: {
+        backend_hosts: {
+          bk_cloud_id: number;
+          bk_host_id: number;
+          ip: string;
+        }[];
+      };
+      display_info: Pick<RedisModel, 'cluster_shard_num' | 'cluster_capacity' | 'machine_pair_cnt'> & {
+        cluster_stats?: RedisModel['cluster_stats'];
+        cluster_spec?: RedisModel['cluster_spec'];
+      };
+    }[];
+  }>(TicketTypes.REDIS_SCALE_UPDOWN);
+
+  const handleSubmit = async () => {
+    const result = await tableRef.value!.validate();
+    if (!result) {
+      return;
+    }
+    createTicketRun({
+      details: {
+        ip_source: 'resource_pool',
+        infos: formData.tableData.map((item) => ({
+          bk_cloud_id: item.cluster.bk_cloud_id,
+          cluster_id: item.cluster.id,
+          db_version: item.version,
+          shard_num: item.backendGroup.shard_num,
+          group_num: item.backendGroup.group_num,
+          resource_spec: {
+            backend_group: {
+              spec_id: item.backendGroup.spec_id,
+              count: item.backendGroup.count,
+              affinity: item.backendGroup.affinity as AffinityType,
+            },
+          },
+          online_switch_type: item.switchMode,
+          display_info: {
+            cluster_capacity: item.currentCapacity.total,
+            cluster_shard_num: item.cluster.shard_num,
+            cluster_spec: item.cluster?.cluster_spec,
+            cluster_stats: item.cluster?.cluster_stats,
+            machine_pair_cnt: item.cluster.group_num,
+          },
+        })),
+      },
+      remark: formData.remark,
+    });
+  };
+
+  const handleReset = () => {
+    Object.assign(formData, defaultData());
+  };
+
+  const handleBatchEdit = (list: RedisModel[]) => {
+    const dataList = list.reduce<RowData[]>((acc, item) => {
+      if (!selectedMap.value[item.master_domain]) {
+        acc.push(
+          createTableRow({
+            cluster: {
+              id: item.id,
+              master_domain: item.master_domain,
+              cluster_type: item.cluster_type,
+              cluster_type_name: item.cluster_type_name,
+              cluster_stats: item.cluster_stats,
+              cluster_spec: item.cluster_spec,
+              cluster_capacity: item.cluster_capacity,
+              group_num: item.machine_pair_cnt,
+              shard_num: item.cluster_shard_num,
+              bk_cloud_id: item.bk_cloud_id,
+              major_version: item.major_version,
+              disaster_tolerance_level: item.disaster_tolerance_level,
+            },
+          }),
+        );
+      }
+      return acc;
+    }, []);
+    formData.tableData = [...(selected.value.length ? formData.tableData : []), ...dataList];
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/Index.vue
new file mode 100644
index 0000000000..7d5a04e740
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/Index.vue
@@ -0,0 +1,32 @@
+<!--
+ * 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="components[page]" />
+</template>
+<script setup lang="ts">
+  import { useRoute } from 'vue-router';
+
+  import Page2 from '@views/db-manage/common/create-ticket-success/Index.vue';
+
+  import Page1 from './Create.vue';
+
+  const route = useRoute();
+
+  const components = {
+    create: Page1,
+    success: Page2,
+  };
+
+  const page = computed(() => (route.params.page as keyof typeof components) || 'create');
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/ClusterColumn.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/ClusterColumn.vue
new file mode 100644
index 0000000000..0c0f66fe23
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/ClusterColumn.vue
@@ -0,0 +1,202 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    :append-rules="rules"
+    field="cluster.master_domain"
+    fixed="left"
+    :label="t('目标集群')"
+    :loading="loading"
+    :min-width="150"
+    required>
+    <template #headAppend>
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-host-select"
+        @click="handleShowSelector">
+        <DbIcon type="batch-host-select" />
+      </span>
+    </template>
+    <Input
+      v-model="modelValue.master_domain"
+      :placeholder="t('请输入集群域名')"
+      @change="handleInputChange" />
+  </Column>
+  <ClusterSelector
+    v-model:is-show="showSelector"
+    :cluster-types="[ClusterTypes.REDIS]"
+    :selected="selectedClusters"
+    support-offline-data
+    :tab-list-config="tabListConfig"
+    @change="handleSelectorChange" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import RedisModel from '@services/model/redis/redis';
+  import { filterClusters } from '@services/source/dbbase';
+  import { getRedisList } from '@services/source/redis';
+
+  import { ClusterTypes } from '@common/const';
+  import { domainRegex } from '@common/regex';
+
+  import ClusterSelector, { type TabConfig } from '@components/cluster-selector/Index.vue';
+  import { Column, Input } from '@components/editable-table/Index.vue';
+
+  interface Props {
+    selected: {
+      id: number;
+      master_domain: string;
+    }[];
+  }
+
+  interface Emits {
+    (e: 'batch-edit', list: RedisModel[]): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<
+    Pick<
+      RedisModel,
+      | 'master_domain'
+      | 'cluster_type'
+      | 'cluster_type_name'
+      | 'bk_cloud_id'
+      | 'major_version'
+      | 'cluster_capacity'
+      | 'disaster_tolerance_level'
+    > & {
+      cluster_stats?: RedisModel['cluster_stats'];
+      cluster_spec?: RedisModel['cluster_spec'];
+      group_num: RedisModel['machine_pair_cnt'];
+      shard_num: RedisModel['cluster_shard_num'];
+      id?: number;
+    }
+  >({
+    default: () => ({
+      master_domain: '',
+      cluster_type: '',
+      cluster_type_name: '',
+      major_version: '',
+      shard_num: 0,
+      group_num: 0,
+      bk_cloud_id: 0,
+      cluster_capacity: 0,
+      disaster_tolerance_level: 'CROS_SUBZONE',
+    }),
+  });
+
+  const { t } = useI18n();
+
+  const showSelector = ref(false);
+  const selectedClusters = computed<Record<string, RedisModel[]>>(() => ({
+    [ClusterTypes.REDIS]: props.selected.map(
+      (currentCluster) =>
+        ({
+          id: currentCluster.id,
+          master_domain: currentCluster.master_domain,
+        }) as RedisModel,
+    ),
+  }));
+
+  const tabListConfig = {
+    [ClusterTypes.REDIS]: {
+      getResourceList: (params: ServiceParameters<typeof getRedisList>) =>
+        getRedisList({
+          cluster_type: [
+            ClusterTypes.TWEMPROXY_REDIS_INSTANCE,
+            ClusterTypes.PREDIXY_TENDISPLUS_CLUSTER,
+            ClusterTypes.TWEMPROXY_TENDIS_SSD_INSTANCE,
+            ClusterTypes.PREDIXY_REDIS_CLUSTER,
+          ].join(','),
+          ...params,
+        }),
+    },
+  } as unknown as Record<string, TabConfig>;
+
+  const rules = [
+    {
+      validator: (value: string) => domainRegex.test(value),
+      message: t('集群域名格式不正确'),
+      trigger: 'change',
+    },
+    {
+      validator: (value: string) => props.selected.filter((item) => item.master_domain === value).length < 2,
+      message: t('目标集群重复'),
+      trigger: 'blur',
+    },
+    {
+      validator: () => {
+        if (!modelValue.value.master_domain) {
+          return true;
+        }
+        return Boolean(modelValue.value.id);
+      },
+      message: t('目标集群不存在'),
+      trigger: 'blur',
+    },
+  ];
+
+  const { run: queryCluster, loading } = useRequest(filterClusters<RedisModel>, {
+    manual: true,
+    onSuccess: (data) => {
+      modelValue.value.id = undefined;
+      if (data.length) {
+        const [currentCluster] = data;
+        modelValue.value = {
+          id: currentCluster.id,
+          master_domain: currentCluster.master_domain,
+          cluster_type: currentCluster.cluster_type,
+          cluster_type_name: currentCluster.cluster_type_name,
+          cluster_stats: currentCluster.cluster_stats,
+          cluster_spec: currentCluster.cluster_spec,
+          cluster_capacity: currentCluster.cluster_capacity,
+          group_num: currentCluster.machine_pair_cnt,
+          shard_num: currentCluster.cluster_shard_num,
+          bk_cloud_id: currentCluster.bk_cloud_id,
+          major_version: currentCluster.major_version,
+          disaster_tolerance_level: currentCluster.disaster_tolerance_level,
+        };
+      }
+    },
+  });
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    if (value) {
+      queryCluster({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        exact_domain: value,
+      });
+    }
+  };
+
+  const handleSelectorChange = (selected: Record<string, RedisModel[]>) => {
+    emits('batch-edit', selected[ClusterTypes.REDIS]);
+  };
+</script>
+<style lang="less" scoped>
+  .batch-host-select {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/CurrentCapacityColumn.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/CurrentCapacityColumn.vue
new file mode 100644
index 0000000000..bc7f763e8b
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/CurrentCapacityColumn.vue
@@ -0,0 +1,133 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    field="currentCapacity"
+    :label="t('当前容量')"
+    :min-width="150">
+    <div class="capacity-box">
+      <div
+        v-if="cluster?.cluster_stats?.total"
+        class="display-content">
+        <div class="item">
+          <div class="item-title">{{ t('当前容量') }}：</div>
+          <div class="item-content">
+            <ClusterCapacityUsageRate :cluster-stats="cluster?.cluster_stats" />
+          </div>
+        </div>
+        <div class="item">
+          <div class="item-title">{{ t('资源规格') }}：</div>
+          <div class="item-content">
+            <RenderSpec
+              :data="cluster?.cluster_spec"
+              :hide-qps="!cluster?.cluster_spec?.qps?.max"
+              is-ignore-counts />
+          </div>
+        </div>
+        <div class="item">
+          <div class="item-title">{{ t('机器组数') }}：</div>
+          <div class="item-content">
+            {{ cluster.group_num }}
+          </div>
+        </div>
+        <div class="item">
+          <div class="item-title">{{ t('机器数量') }}：</div>
+          <div class="item-content">
+            {{ cluster.group_num * 2 }}
+          </div>
+        </div>
+        <div class="item">
+          <div class="item-title">{{ t('分片数') }}：</div>
+          <div class="item-content">
+            {{ cluster.shard_num }}
+          </div>
+        </div>
+      </div>
+      <Block
+        v-else
+        :placeholder="t('自动生成')" />
+    </div>
+  </Column>
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+
+  import RedisModel from '@services/model/redis/redis';
+
+  import { Block, Column } from '@components/editable-table/Index.vue';
+  import RenderSpec from '@components/render-table/columns/spec-display/Index.vue';
+
+  import ClusterCapacityUsageRate from '@views/db-manage/common/cluster-capacity-usage-rate/Index.vue';
+
+  interface Props {
+    cluster: {
+      cluster_stats?: RedisModel['cluster_stats'];
+      cluster_spec?: RedisModel['cluster_spec'];
+      group_num: number;
+      shard_num: number;
+    };
+  }
+
+  defineProps<Props>();
+
+  const { t } = useI18n();
+</script>
+
+<style lang="less" scoped>
+  .capacity-box {
+    flex: 1;
+    width: 100%;
+
+    .display-content {
+      padding: 11px 16px;
+      overflow: hidden;
+      line-height: 20px;
+      white-space: nowrap;
+
+      .item {
+        display: flex;
+        width: 100%;
+
+        .item-title {
+          width: 64px;
+          text-align: right;
+        }
+
+        .item-content {
+          flex: 1;
+          display: flex;
+          align-items: center;
+
+          .percent {
+            margin-left: 4px;
+            font-size: 12px;
+            font-weight: bold;
+            color: #313238;
+          }
+
+          .spec {
+            margin-left: 2px;
+            font-size: 12px;
+            color: #979ba5;
+          }
+
+          :deep(.render-spec-box) {
+            height: 22px;
+            padding: 0;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/RedisVersionColumn.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/RedisVersionColumn.vue
new file mode 100644
index 0000000000..e854216129
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/RedisVersionColumn.vue
@@ -0,0 +1,101 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    field="version"
+    :label="t('Redis版本')"
+    :min-width="150"
+    required>
+    <Select
+      v-model="modelValue"
+      :disabled="!cluster.id"
+      :input-search="false"
+      :list="versionList"
+      :placeholder="t('自动生成')">
+      <template #option="{ item, index }">
+        <div>
+          {{ item.label }}
+          <BkTag
+            v-if="modelValue === item.value"
+            class="ml-4"
+            size="small"
+            theme="info">
+            {{ t('当前版本') }}
+          </BkTag>
+          <BkTag
+            v-if="index === 0"
+            class="ml-4"
+            size="small"
+            theme="warning">
+            {{ t('推荐') }}
+          </BkTag>
+        </div>
+      </template>
+    </Select>
+  </Column>
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { getClusterVersions } from '@services/source/redisToolbox';
+
+  import { Column, Select } from '@components/editable-table/Index.vue';
+
+  interface Props {
+    cluster: {
+      id: number;
+      major_version: string;
+    };
+  }
+
+  const props = defineProps<Props>();
+
+  const modelValue = defineModel<string>({
+    default: '',
+  });
+
+  const { t } = useI18n();
+
+  const versionList = ref<
+    {
+      value: string;
+      label: string;
+    }[]
+  >([]);
+
+  const { run: fetchVersions } = useRequest(getClusterVersions, {
+    manual: true,
+    onSuccess(versions) {
+      versionList.value = versions.map((item) => ({
+        label: item,
+        value: item,
+      }));
+      modelValue.value = versions.includes(props.cluster.major_version) ? props.cluster.major_version : '';
+    },
+  });
+
+  watch(
+    () => props.cluster,
+    () => {
+      if (props.cluster) {
+        fetchVersions({
+          node_type: 'Backend',
+          type: 'update',
+          cluster_id: props.cluster.id,
+        });
+      }
+    },
+  );
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/target-capacity-column/ClusterDeployPlan.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/target-capacity-column/ClusterDeployPlan.vue
new file mode 100644
index 0000000000..66ec8402ac
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/target-capacity-column/ClusterDeployPlan.vue
@@ -0,0 +1,856 @@
+<!--
+ * 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>
+  <BkSideslider
+    :before-close="handleBeforeClose"
+    :is-show="isShow"
+    :width="960"
+    @closed="handleClose">
+    <template #header>
+      <span>
+        {{ title }}
+        【{{ data?.targetCluster }}】
+        <BkTag
+          v-if="showTitleTag"
+          theme="info">
+          {{ t('存储层') }}
+        </BkTag>
+      </span>
+    </template>
+    <div class="main-box">
+      <div class="capacity-panel">
+        <div class="panel-row">
+          <div class="row-column row-column-left">
+            <div
+              class="column-title"
+              style="min-width: 70px">
+              {{ t('当前总容量') }}：
+            </div>
+            <div class="column-content">
+              <ClusterCapacityUsageRate :cluster-stats="clusterStats" />
+            </div>
+          </div>
+          <div class="row-column row-column-right">
+            <div
+              class="column-title"
+              style="min-width: 82px">
+              {{ t('目标容量') }}：
+            </div>
+            <div class="column-content">
+              <template v-if="targetInfo.spec.name">
+                <ClusterCapacityUsageRate :cluster-stats="targetClusterStats" />
+                <ValueDiff
+                  :current-value="currentCapacity"
+                  num-unit="G"
+                  :target-value="targetInfo.capacity" />
+              </template>
+              <span
+                v-else
+                style="color: #c4c6cc">
+                {{ t('请先选择部署方案') }}
+              </span>
+            </div>
+          </div>
+        </div>
+        <div class="panel-row mt-4">
+          <div class="row-column row-column-left">
+            <div class="column-title">{{ t('当前资源规格') }}：</div>
+            <div class="column-content">
+              <RenderSpec
+                :data="data.currentSepc"
+                :hide-qps="!data.currentSepc.qps?.max"
+                is-ignore-counts />
+            </div>
+          </div>
+          <div class="row-column row-column-right">
+            <div class="column-title">{{ t('目标资源规格') }}：</div>
+            <div class="column-content">
+              <span v-if="targetInfo.spec.name">
+                <RenderSpec
+                  :data="targetInfo.spec"
+                  :hide-qps="!targetInfo.spec.qps.max"
+                  is-ignore-counts />
+              </span>
+              <span
+                v-else
+                style="color: #c4c6cc">
+                --
+              </span>
+            </div>
+          </div>
+        </div>
+        <div class="panel-row mt-4">
+          <div class="row-column row-column-left">
+            <div class="column-title">{{ t('当前机器组数') }}：</div>
+            <div class="column-content">
+              <span class="number-style">{{ data?.groupNum }}</span>
+            </div>
+          </div>
+          <div class="row-column row-column-right">
+            <div class="column-title">{{ t('目标机器组数') }}：</div>
+            <div class="column-content">
+              <span v-if="targetInfo.spec.name">
+                <span class="number-style">{{ targetInfo.groupNum }}</span>
+                <ValueDiff
+                  :current-value="data.groupNum"
+                  :show-rate="false"
+                  :target-value="targetInfo.groupNum" />
+              </span>
+              <span
+                v-else
+                style="color: #c4c6cc">
+                --
+              </span>
+            </div>
+          </div>
+        </div>
+        <div class="panel-row panel-row mt-4">
+          <div class="row-column row-column-left">
+            <div class="column-title">{{ t('当前机器数量') }}：</div>
+            <div class="column-content">
+              <span class="number-style">{{ data?.groupNum * 2 }}</span>
+            </div>
+          </div>
+          <div class="row-column row-column-right">
+            <div class="column-title">{{ t('目标机器数量') }}：</div>
+            <div class="column-content">
+              <span v-if="targetInfo.spec.name">
+                <span class="number-style">{{ targetInfo.groupNum * 2 }}</span>
+                <ValueDiff
+                  :current-value="data.groupNum * 2"
+                  :show-rate="false"
+                  :target-value="targetInfo.groupNum * 2" />
+              </span>
+              <span
+                v-else
+                style="color: #c4c6cc">
+                --
+              </span>
+            </div>
+          </div>
+        </div>
+        <div class="panel-row panel-row mt-4">
+          <div class="row-column row-column-left">
+            <div class="column-title">{{ t('当前分片数') }}：</div>
+            <div class="column-content">
+              <span class="number-style">{{ data?.shardNum }}</span>
+            </div>
+          </div>
+          <div class="row-column row-column-right">
+            <div class="column-title">{{ t('目标分片数') }}：</div>
+            <div class="column-content">
+              <span v-if="targetInfo.spec.name">
+                <span class="number-style">{{ targetInfo.shardNum }}</span>
+                <ValueDiff
+                  :current-value="data.shardNum"
+                  :show-rate="false"
+                  :target-value="targetInfo.shardNum" />
+              </span>
+              <span
+                v-else
+                style="color: #c4c6cc">
+                --
+              </span>
+            </div>
+          </div>
+        </div>
+        <div class="panel-row panel-row mt-4">
+          <div class="row-column row-column-left"></div>
+          <div class="row-column row-column-right">
+            <div class="column-title">{{ t('变更方式') }}：</div>
+            <div class="column-content">
+              <span v-if="targetInfo.spec.name">{{
+                targetInfo.updateMode === 'keep_current_machines' ? t('原地变更') : t('替换变更')
+              }}</span>
+              <span
+                v-else
+                style="color: #c4c6cc">
+                --
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="deploy-box">
+        <div class="title-spot">{{ t('集群部署方案') }}<span class="required" /></div>
+        <DbForm
+          ref="formRef"
+          class="mt-16"
+          :model="specInfo">
+          <ApplySchema v-model="applySchema" />
+          <template v-if="applySchema === APPLY_SCHEME.AUTO">
+            <DbFormItem
+              :label="t('目标容量')"
+              required>
+              <div class="input-box">
+                <BkInput
+                  ref="capacityInputRef"
+                  class="mb10"
+                  :min="0"
+                  :model-value="capacityNeed"
+                  style="width: 314px"
+                  type="number"
+                  @blur="handleSearchClusterSpec"
+                  @change="(value) => (capacityNeed = Number(value))"
+                  @enter="handleCapacityNeedEnter" />
+                <div class="uint-text ml-12">
+                  <span>{{ t('当前') }}</span>
+                  <span class="spec-text">{{ props.data.capacity.total ?? 0 }}</span>
+                  <span>G</span>
+                </div>
+              </div>
+            </DbFormItem>
+            <BkLoading :loading="isTableLoading">
+              <DbOriginalTable
+                class="deploy-table"
+                :columns="columns"
+                :data="tableData"
+                @column-sort="handleColumnSort"
+                @row-click.stop="handleRowClick">
+                <template #empty>
+                  <p
+                    v-if="!capacityNeed"
+                    style="width: 100%; line-height: 128px; text-align: center">
+                    <DbIcon
+                      class="mr-4"
+                      type="attention" />
+                    <span>{{ t('请先设置容量') }}</span>
+                  </p>
+                  <BkException
+                    v-else
+                    :description="t('无匹配的资源规格_请先修改容量设置')"
+                    scene="part"
+                    style="font-size: 12px"
+                    type="empty" />
+                </template>
+              </DbOriginalTable>
+            </BkLoading>
+          </template>
+          <CustomSchema
+            v-else
+            ref="customSchemaRef"
+            v-model="specInfo"
+            :cluster-info="clusterInfo"
+            :shard-num-disabled="shardNumDisabled" />
+        </DbForm>
+      </div>
+    </div>
+    <template #footer>
+      <BkButton
+        class="mr-8"
+        :disabled="!isAbleSubmit"
+        :loading="isConfirmLoading"
+        theme="primary"
+        @click="handleConfirm">
+        {{ t('确定') }}
+      </BkButton>
+      <BkButton
+        :disabled="isConfirmLoading"
+        @click="handleClose">
+        {{ t('取消') }}
+      </BkButton>
+    </template>
+  </BkSideslider>
+</template>
+<script setup lang="tsx">
+  import _ from 'lodash';
+    import type { UnwrapRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import RedisModel from '@services/model/redis/redis';
+  import ClusterSpecModel from '@services/model/resource-spec/cluster-sepc';
+  import { getFilterClusterSpec } from '@services/source/dbresourceSpec';
+  import { getRedisClusterCapacityUpdateInfo } from '@services/source/redisToolbox'
+
+  import { useBeforeClose } from '@hooks';
+
+  import { ClusterTypes } from '@common/const';
+
+  import DbForm from '@components/db-form/index.vue'
+  import RenderSpec from '@components/render-table/columns/spec-display/Index.vue';
+
+  import ApplySchema, { APPLY_SCHEME } from '@views/db-manage/common/apply-schema/Index.vue';
+  import ClusterCapacityUsageRate from '@views/db-manage/common/cluster-capacity-usage-rate/Index.vue'
+  import ValueDiff from '@views/db-manage/common/value-diff/Index.vue'
+  import CustomSchema from '@views/db-manage/redis/common/cluster-deploy-plan/CustomSchema.vue';
+  import { specClusterMachineMap } from '@views/db-manage/redis/common/const';
+
+  import { convertStorageUnits, messageError } from '@utils';
+
+  export interface CapacityNeed {
+    current: number,
+    future: number,
+  }
+
+  export interface SpecResultInfo {
+    cluster_capacity: number,
+    max: number,
+    cluster_shard_num: number,
+    spec_id: number,
+    machine_pair: number
+  }
+
+  export interface TargetInfo {
+    capacity: number,
+    spec: {
+      name: string,
+      cpu: ClusterSpecModel['cpu'],
+      id: number,
+      mem: ClusterSpecModel['mem'],
+      qps: ClusterSpecModel['qps'],
+      storage_spec: ClusterSpecModel['storage_spec']
+    },
+    groupNum: number,
+    requireMachineGroupNum: number,
+    shardNum: number,
+    updateMode: string
+  }
+
+  export interface Props {
+    isShow?: boolean;
+    isSameShardNum?: boolean;
+    data?: {
+      targetCluster: string,
+      currentSepc: TargetInfo['spec']
+      capacity: {
+        total: number,
+        used: number,
+      },
+      clusterType: string,
+      cloudId: number,
+      groupNum: number,
+      shardNum: number,
+      bkCloudId: number
+    };
+    title?: string,
+    showTitleTag?: boolean,
+    targetVerison?: string
+    clusterId?: number,
+    clusterStats: RedisModel['cluster_stats'],
+    targetObject?: UnwrapRef<typeof targetInfo>
+  }
+
+  interface Emits {
+    (e: 'clickConfirm', obj: SpecResultInfo, capacity: number, target: UnwrapRef<typeof targetInfo>): void
+    (e: 'clickCancel'): void
+    (e: 'targetStatsChange', value: RedisModel['cluster_stats']): void
+  }
+
+  const props  = withDefaults(defineProps<Props>(), {
+    isShow: false,
+    isSameShardNum: false, // 集群容量变更才需要
+    data: () => ({
+      targetCluster: '',
+      currentSepc: {
+        name: '',
+        cpu: {} as ClusterSpecModel['cpu'],
+        id: 0,
+        mem: {} as ClusterSpecModel['mem'],
+        qps: {} as ClusterSpecModel['qps'],
+        storage_spec: [] as ClusterSpecModel['storage_spec']
+      },
+      capacity: {
+        total: 1,
+        used: 0,
+      },
+      clusterType: ClusterTypes.TWEMPROXY_REDIS_INSTANCE,
+      cloudId: 0,
+      groupNum: 0,
+      requireMachineGroupNum: 0,
+      shardNum: 0,
+      machinePair: 0,
+      bkCloudId: 0,
+    }),
+    title: '',
+    showTitleTag: true,
+    targetVerison: undefined,
+    clusterId: undefined,
+    targetObject: undefined
+  });
+
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+  const handleBeforeClose = useBeforeClose();
+
+  const createDefaultTargetInfo = () => ({
+    capacity: 0,
+    spec: {
+      name: '',
+      cpu: {} as ClusterSpecModel['cpu'],
+      id: 0,
+      mem: {} as ClusterSpecModel['mem'],
+      qps: {} as ClusterSpecModel['qps'],
+      storage_spec: [] as ClusterSpecModel['storage_spec']
+    },
+    groupNum: 0,
+    requireMachineGroupNum: 0,
+    shardNum: 0,
+    updateMode: ''
+  })
+
+  const formRef = ref<InstanceType<typeof DbForm>>()
+  const customSchemaRef = ref<InstanceType<typeof CustomSchema>>()
+  const capacityInputRef = ref()
+  const capacityNeed = ref();
+  const radioValue = ref(-1);
+  const radioChoosedId  = ref(''); // 标记，sort重新定位index用
+  const isTableLoading = ref(false);
+  const isConfirmLoading = ref(false);
+  const tableData = ref<ClusterSpecModel[]>([]);
+  const targetInfo = ref(createDefaultTargetInfo());
+  const applySchema = ref(APPLY_SCHEME.AUTO);
+  const updateInfoError = ref(false)
+
+  const specDisabledMap = shallowRef<Record<number, boolean>>({})
+
+  const specInfo = reactive({
+    specId: '',
+    count: 1,
+    shardNum: 1,
+    clusterShardNum: 1,
+    totalCapcity: 0,
+  })
+
+  const clusterInfo = reactive({
+    bizId: 0,
+    cloudId: 0,
+    clusterType: '',
+    machineType: ''
+  })
+
+  const isAbleSubmit = computed(() => {
+    if (applySchema.value === APPLY_SCHEME.AUTO) {
+      return radioValue.value !== -1
+    }
+    return !updateInfoError.value
+  });
+
+  const isDataChange = computed(() => capacityNeed.value !== undefined
+    || radioValue.value !== -1);
+
+  const targetClusterStats = computed(() => {
+    let stats = {} as RedisModel['cluster_stats']
+    if (!_.isEmpty(props.clusterStats)) {
+      const { used } = props.clusterStats;
+      const targetTotal = convertStorageUnits(targetInfo.value.capacity, 'GB', 'B')
+
+      stats = {
+        used,
+        total: targetTotal,
+        in_use: Number((used / targetTotal * 100).toFixed(2))
+      }
+    }
+
+    emits('targetStatsChange', stats)
+    return stats
+  })
+
+  const currentCapacity = computed(() => {
+    if (_.isEmpty(props.clusterStats)) {
+      return props.data.capacity.total ?? 0
+    }
+    return convertStorageUnits(props.clusterStats.total, 'B', 'GB')
+  })
+
+  const shardNumDisabled = computed(() => props.data.clusterType !== ClusterTypes.PREDIXY_TENDISPLUS_CLUSTER)
+
+  const columns =  [
+    {
+      label: t('资源规格'),
+      field: 'spec',
+      showOverflowTooltip: true,
+      width: 260,
+      render: ({ index, row }: { index: number, row: ClusterSpecModel }) => (
+        <div style="display:flex;align-items:center;">
+          <bk-radio
+            label={index}
+            v-model={radioValue.value}
+            disabled={specDisabledMap.value[row.spec_id]}>
+            <span style="font-size: 12px">{row.spec_name}</span>
+          </bk-radio>
+        </div>
+      ),
+    },
+    {
+      label: t('需机器组数'),
+      field: 'machine_pair',
+      sort: true,
+    },
+    {
+      label: t('集群分片'),
+      field: 'cluster_shard_num',
+      sort: true,
+    },
+    {
+      label: t('集群容量(G)'),
+      field: 'cluster_capacity',
+      sort: true,
+    },
+  ];
+
+  let rawTableData: ClusterSpecModel[] = [];
+
+  watch(() => props.isShow, () => {
+    if (props.isShow) {
+      capacityNeed.value = ''
+      radioValue.value = -1
+      tableData.value = [];
+      rawTableData = []
+      specDisabledMap.value = {}
+      targetInfo.value = props.targetObject || createDefaultTargetInfo()
+    }
+  })
+
+  watch(radioValue, () => {
+    if (radioValue.value !== -1) {
+      getUpdateInfo(tableData.value[radioValue.value])
+    }
+  })
+
+  watch(() => props.data, () => {
+    if (props.data) {
+      Object.assign(specInfo, {
+        count: props.data.groupNum,
+        shardNum: props.data.shardNum / props.data.groupNum,
+        clusterShardNum: props.data.shardNum,
+      })
+      Object.assign(clusterInfo, {
+        bizId: window.PROJECT_CONFIG.BIZ_ID,
+        cloudId: props.data.bkCloudId,
+        clusterType: props.data.clusterType,
+        machineType: specClusterMachineMap[props.data.clusterType]
+      })
+    }
+  }, {
+    immediate: true,
+  });
+
+  watch(() => props.data.shardNum, () => {
+    specInfo.shardNum = props.data.shardNum
+  })
+
+  watch(specInfo, () => {
+    if (specInfo.specId && specInfo.count && specInfo.clusterShardNum) {
+      getCustomUpdateInfo()
+    }
+  }, {
+    deep: true,
+    immediate: true
+  })
+
+  const getCustomUpdateInfo = _.debounce(() => {
+    getRedisClusterCapacityUpdateInfo({
+      cluster_id: props.clusterId!,
+      new_storage_version: props.targetVerison!,
+      new_spec_id : Number(specInfo.specId),
+      new_machine_group_num: specInfo.count,
+      new_shards_num: specInfo.clusterShardNum
+    }).then((updateInfo) => {
+      if (updateInfo.err_msg) {
+        updateInfoError.value = true
+        messageError(updateInfo.err_msg)
+        return
+      }
+      updateInfoError.value = false
+      const customSepcInfo = customSchemaRef.value!.getInfo()
+      targetInfo.value = {
+        capacity: specInfo.totalCapcity,
+        spec: {
+          id: Number(specInfo.specId),
+          name: customSepcInfo.spec_name,
+          cpu: customSepcInfo.cpu,
+          mem: customSepcInfo.mem,
+          qps: customSepcInfo.qps,
+          storage_spec: customSepcInfo.storage_spec
+        },
+        groupNum: specInfo.count,
+        requireMachineGroupNum: updateInfo.require_machine_group_num,
+        shardNum: specInfo.clusterShardNum,
+        updateMode: updateInfo.capacity_update_type
+      }
+    })
+  }, 200)
+
+  const handleSearchClusterSpec = async () => {
+    if (capacityNeed.value === undefined) {
+      return;
+    }
+    if (capacityNeed.value > 0) {
+      isTableLoading.value = true;
+      const clusterType = props.data?.clusterType ?? ClusterTypes.TWEMPROXY_REDIS_INSTANCE;
+      const params = {
+        spec_cluster_type: 'redis',
+        spec_machine_type: specClusterMachineMap[clusterType],
+        shard_num: props.data.shardNum === 0 ? undefined : props.data.shardNum,
+        capacity: capacityNeed.value,
+        future_capacity: capacityNeed.value,
+      };
+      if (!props.isSameShardNum) {
+        delete params.shard_num;
+      }
+      const retArr = await getFilterClusterSpec(params).finally(() => {
+        isTableLoading.value = false;
+      });
+      radioValue.value = -1
+      targetInfo.value = createDefaultTargetInfo()
+      tableData.value = retArr;
+      rawTableData = _.cloneDeep(retArr);
+      specDisabledMap.value = {}
+    }
+  };
+
+  const handleCapacityNeedEnter = () => {
+    capacityInputRef.value.blur()
+  }
+
+  // 点击确定
+  const handleConfirm = async () => {
+    if (applySchema.value === APPLY_SCHEME.AUTO) {
+      const index = radioValue.value;
+      if (index !== -1) {
+        handleClickConfirm()
+      }
+    } else {
+      const validateResult = await formRef.value!.validate()
+      if (validateResult) {
+        handleClickConfirm()
+      }
+    }
+  };
+  const handleClickConfirm = () => {
+    const result = {} as SpecResultInfo
+    let capacityResult = 0
+    if (applySchema.value === APPLY_SCHEME.AUTO) {
+      const index = radioValue.value;
+      const choosedObj = tableData.value[index]
+      Object.assign(result, {
+        cluster_capacity: choosedObj.cluster_capacity,
+        max: choosedObj.qps.max,
+        cluster_shard_num: choosedObj.cluster_shard_num,
+        spec_id: choosedObj.spec_id,
+        machine_pair: choosedObj.machine_pair,
+      })
+      capacityResult = Number(capacityNeed.value || 0)
+    } else {
+      Object.assign(result, {
+        cluster_capacity: specInfo.totalCapcity,
+        max: 0,
+        cluster_shard_num: specInfo.clusterShardNum,
+        spec_id: specInfo.specId,
+        machine_pair: specInfo.count
+      })
+      capacityResult = specInfo.totalCapcity
+    }
+    emits('clickConfirm', result, capacityResult, targetInfo.value);
+  }
+
+  const handleClose = async () => {
+    const result = await handleBeforeClose(isDataChange.value);
+    if (!result) return;
+    window.changeConfirm = false;
+    emits('clickCancel');
+  }
+
+  const getUpdateInfo = (row: ClusterSpecModel) => {
+    getRedisClusterCapacityUpdateInfo({
+      cluster_id: props.clusterId!,
+      new_storage_version: props.targetVerison!,
+      new_spec_id : row.spec_id,
+      new_machine_group_num: row.machine_pair,
+      new_shards_num: row.cluster_shard_num
+    }).then((updateInfo) => {
+      if (updateInfo.err_msg) {
+        messageError(updateInfo.err_msg)
+        radioValue.value = -1;
+        radioChoosedId.value = '';
+        specDisabledMap.value[row.spec_id] = true
+        return
+      }
+      targetInfo.value = {
+        capacity: row.cluster_capacity,
+        spec: {
+          name: row.spec_name,
+          cpu: row.cpu,
+          id: row.spec_id,
+          mem: row.mem,
+          qps: row.qps,
+          storage_spec: row.storage_spec
+        },
+        groupNum: row.machine_pair,
+        requireMachineGroupNum: updateInfo.require_machine_group_num,
+        shardNum: row.cluster_shard_num,
+        updateMode: updateInfo.capacity_update_type
+      }
+      radioChoosedId.value = row.spec_name;
+    })
+  }
+
+  const handleRowClick = (event: PointerEvent, row: ClusterSpecModel, index: number) => {
+    if (index === radioValue.value || specDisabledMap.value[row.spec_id]) {
+      return
+    }
+
+    radioValue.value = index
+  };
+
+  const handleColumnSort = (data: { column: { field: string }, index: number, type: string }) => {
+    const { column, type } = data;
+    const filed = column.field as keyof ClusterSpecModel;
+    if (type === 'asc') {
+      tableData.value.sort((prevItem, nextItem) => prevItem[filed] as number - (nextItem[filed] as number));
+    } else if (type === 'desc') {
+      tableData.value.sort((prevItem, nextItem) => nextItem[filed] as number - (prevItem[filed] as number));
+    } else {
+      tableData.value = rawTableData;
+    }
+    const index = tableData.value.findIndex(item => item.spec_name === radioChoosedId.value);
+    radioValue.value = index;
+  };
+</script>
+
+<style lang="less" scoped>
+  .main-box {
+    display: flex;
+    width: 100%;
+    padding: 24px 40px;
+    flex-direction: column;
+
+    .capacity-panel {
+      width: 880px;
+      padding: 16px;
+      background: #fafbfd;
+
+      .panel-row {
+        display: flex;
+        width: 100%;
+
+        .row-column-left {
+          width: 40%;
+        }
+
+        .row-column-right {
+          width: 60%;
+        }
+
+        .row-column {
+          display: flex;
+          align-items: center;
+
+          .column-title {
+            width: 100px;
+            height: 18px;
+            font-size: 12px;
+            line-height: 18px;
+            letter-spacing: 0;
+            color: #63656e;
+            text-align: right;
+          }
+
+          .column-content {
+            flex: 1;
+            display: flex;
+            font-size: 12px;
+            color: #63656e;
+
+            :deep(.render-spec-box) {
+              height: 100%;
+              padding: 0;
+              line-height: 22px;
+            }
+
+            .number-style {
+              margin-left: 2px;
+              font-size: 12px;
+              font-weight: bold;
+              color: #313238;
+            }
+          }
+        }
+      }
+    }
+
+    .select-group {
+      position: relative;
+      display: flex;
+      width: 880px;
+      gap: 38px;
+
+      .select-box {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+
+        .input-box {
+          display: flex;
+          width: 100%;
+          align-items: center;
+
+          .num-input {
+            height: 32px;
+          }
+        }
+      }
+    }
+
+    .deploy-box {
+      margin-top: 24px;
+
+      .input-box {
+        display: flex;
+        align-items: center;
+
+        .uint-text {
+          font-size: 12px;
+
+          .spec-text {
+            margin: 0 2px;
+            font-weight: 700;
+          }
+        }
+      }
+
+      .deploy-table {
+        margin-top: 12px;
+
+        :deep(.cluster-name) {
+          padding: 8px 0;
+          line-height: 16px;
+
+          &__alias {
+            color: @light-gray;
+          }
+        }
+
+        :deep(.bk-form-label) {
+          display: none;
+        }
+
+        :deep(.bk-form-error-tips) {
+          top: 50%;
+          transform: translateY(-50%);
+        }
+
+        :deep(.regex-input) {
+          margin: 8px 0;
+        }
+      }
+    }
+
+    .spec-title {
+      border-bottom: 1px dashed #979ba5;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/target-capacity-column/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/target-capacity-column/Index.vue
new file mode 100644
index 0000000000..8781356cac
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/target-capacity-column/Index.vue
@@ -0,0 +1,301 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    field="backendGroup.spec_id"
+    :label="t('目标容量')"
+    :min-width="150"
+    required
+    :rule="rules">
+    <div class="capacity-box">
+      <Input
+        v-if="!localValue || !activeRowData || !targetObj"
+        :placeholder="t('请选择')"
+        @focus="handleShowSideslider">
+        <template #append>
+          <DbIcon
+            class="down-icon"
+            type="down-big" />
+        </template>
+      </Input>
+      <div
+        v-else
+        class="display-content">
+        <div class="content-item">
+          <div class="item-title">{{ t('目标容量') }}：</div>
+          <div class="item-content">
+            <ClusterCapacityUsageRate :cluster-stats="targetClusterStats" />
+            <ValueDiff
+              :current-value="currentCapacity"
+              num-unit="G"
+              :target-value="targetObj.capacity" />
+          </div>
+        </div>
+        <div class="content-item">
+          <div class="item-title">{{ t('资源规格') }}：</div>
+          <div class="item-content">
+            <RenderSpec
+              :data="targetObj.spec"
+              :hide-qps="!targetObj.spec.qps.max"
+              is-ignore-counts />
+          </div>
+        </div>
+        <div class="content-item">
+          <div class="item-title">{{ t('机器组数') }}：</div>
+          <div class="item-content">
+            {{ targetObj.groupNum }}
+            <ValueDiff
+              :current-value="activeRowData.groupNum"
+              :show-rate="false"
+              :target-value="targetObj.groupNum" />
+          </div>
+        </div>
+        <div class="content-item">
+          <div class="item-title">{{ t('机器数量') }}：</div>
+          <div class="item-content">
+            {{ targetObj.groupNum * 2 }}
+            <ValueDiff
+              :current-value="activeRowData.groupNum * 2"
+              :show-rate="false"
+              :target-value="targetObj.groupNum * 2" />
+          </div>
+        </div>
+        <div class="content-item">
+          <div class="item-title">{{ t('分片数') }}：</div>
+          <div class="item-content">
+            {{ targetObj.shardNum }}
+            <ValueDiff
+              :current-value="activeRowData.shardNum"
+              :show-rate="false"
+              :target-value="targetObj.shardNum" />
+          </div>
+        </div>
+        <div class="content-item">
+          <div class="item-title">{{ t('变更方式') }}：</div>
+          <div class="item-content">
+            {{ targetObj.updateMode === 'keep_current_machines' ? t('原地变更') : t('替换变更') }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </Column>
+  <ClusterTargetPlan
+    v-if="rowData.cluster?.cluster_stats"
+    :cluster-id="rowData.cluster.id"
+    :cluster-stats="rowData.cluster.cluster_stats"
+    :data="activeRowData"
+    hide-shard-column
+    :is-show="showClusterTargetPlan"
+    :target-object="targetObj"
+    :target-verison="rowData.version"
+    :title="t('选择集群容量变更部署方案')"
+    @click-cancel="() => (showClusterTargetPlan = false)"
+    @click-confirm="handleChoosedTargetCapacity"
+    @target-stats-change="handleTargetStatsChange" />
+</template>
+<script lang="ts" setup>
+  import _ from 'lodash';
+  import { useI18n } from 'vue-i18n';
+
+  import RedisModel from '@services/model/redis/redis';
+
+  import { ClusterTypes } from '@common/const';
+
+  import { Column, Input } from '@components/editable-table/Index.vue';
+  import RenderSpec from '@components/render-table/columns/spec-display/Index.vue';
+
+  import ClusterCapacityUsageRate from '@views/db-manage/common/cluster-capacity-usage-rate/Index.vue';
+  import ValueDiff from '@views/db-manage/common/value-diff/Index.vue';
+
+  import { convertStorageUnits } from '@utils';
+
+  import ClusterTargetPlan, {
+    type Props as TargetPlanProps,
+    type SpecResultInfo,
+    type TargetInfo,
+  } from './ClusterDeployPlan.vue';
+
+  interface Props {
+    rowData: {
+      cluster: Pick<RedisModel, 'id' | 'master_domain' | 'cluster_type' | 'cluster_type_name' | 'bk_cloud_id'> & {
+        cluster_stats?: RedisModel['cluster_stats'];
+        cluster_spec?: RedisModel['cluster_spec'];
+        group_num: RedisModel['machine_pair_cnt'];
+        shard_num: RedisModel['cluster_shard_num'];
+      };
+      version: string;
+      currentCapacity: {
+        used: number;
+        total: number;
+      };
+    };
+  }
+
+  const props = defineProps<Props>();
+
+  const modelValue = defineModel<{
+    spec_id: number;
+    count: number;
+    affinity: string;
+    group_num: number;
+    shard_num: number;
+  }>({
+    default: () => ({}),
+  });
+
+  const { t } = useI18n();
+
+  const localValue = reactive({
+    cluster_capacity: 0,
+    max: 0,
+    cluster_shard_num: 0,
+    spec_id: 0,
+    machine_pair: 0,
+  });
+  const showClusterTargetPlan = ref(false);
+  const activeRowData = ref<TargetPlanProps['data']>();
+  const futureCapacity = ref(1);
+  const targetObj = ref<TargetInfo>();
+  const targetClusterStats = ref<RedisModel['cluster_stats']>();
+  const currentCapacity = computed(() => {
+    if (_.isEmpty(props.rowData.cluster?.cluster_stats)) {
+      return props.rowData.currentCapacity?.total ?? 0;
+    }
+    return convertStorageUnits(props.rowData.cluster.cluster_stats.total, 'B', 'GB');
+  });
+
+  const rules = [
+    {
+      validator: (value: string) => Boolean(value),
+      message: t('请选择目标容量'),
+    },
+  ];
+
+  watch(
+    () => props.rowData.cluster,
+    () => {
+      localValue.cluster_shard_num = props.rowData.cluster.shard_num;
+      localValue.machine_pair = props.rowData.cluster.group_num;
+    },
+  );
+
+  watch(
+    () => [localValue, targetObj.value],
+    () => {
+      const cloneData = _.cloneDeep(modelValue.value);
+      modelValue.value = {
+        spec_id: localValue.spec_id,
+        count: targetObj.value!.requireMachineGroupNum,
+        affinity: cloneData.affinity,
+        shard_num: localValue.cluster_shard_num,
+        group_num: localValue.machine_pair,
+      };
+    },
+  );
+
+  const handleShowSideslider = () => {
+    const {
+      master_domain: domain,
+      cluster_spec: spec,
+      cluster_type: clusterType,
+      bk_cloud_id: bkCloudId,
+      shard_num: shardNum,
+    } = props.rowData.cluster;
+    if (spec) {
+      activeRowData.value = {
+        targetCluster: domain,
+        currentSepc: {
+          name: spec.spec_name || '',
+          cpu: spec.cpu,
+          id: spec.spec_id,
+          mem: spec.mem,
+          qps: spec.qps,
+          storage_spec: spec.storage_spec,
+        },
+        capacity: props.rowData.currentCapacity,
+        clusterType: clusterType ?? ClusterTypes.TWEMPROXY_REDIS_INSTANCE,
+        cloudId: bkCloudId,
+        groupNum: localValue.machine_pair,
+        shardNum,
+        bkCloudId,
+      };
+      showClusterTargetPlan.value = true;
+    }
+  };
+
+  // 从侧边窗点击确认后触发
+  const handleChoosedTargetCapacity = (obj: SpecResultInfo, capacity: number, targetInfo: TargetInfo) => {
+    Object.assign(localValue, obj);
+    futureCapacity.value = capacity;
+    targetObj.value = targetInfo;
+    showClusterTargetPlan.value = false;
+  };
+
+  const handleTargetStatsChange = (value: RedisModel['cluster_stats']) => {
+    targetClusterStats.value = value;
+  };
+</script>
+
+<style lang="less" scoped>
+  .down-icon {
+    font-size: 15px;
+    color: #979ba5;
+  }
+
+  .capacity-box {
+    flex: 1;
+    width: 100%;
+
+    .display-content {
+      padding: 11px 16px;
+      overflow: hidden;
+      line-height: 20px;
+      white-space: nowrap;
+
+      .item {
+        display: flex;
+        width: 100%;
+
+        .item-title {
+          width: 64px;
+          text-align: right;
+        }
+
+        .item-content {
+          flex: 1;
+          display: flex;
+          align-items: center;
+
+          .percent {
+            margin-left: 4px;
+            font-size: 12px;
+            font-weight: bold;
+            color: #313238;
+          }
+
+          .spec {
+            margin-left: 2px;
+            font-size: 12px;
+            color: #979ba5;
+          }
+
+          :deep(.render-spec-box) {
+            height: 22px;
+            padding: 0;
+          }
+        }
+      }
+    }
+  }
+</style>
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 daeaaa301f..17f21f2ab1 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/routes.ts
+++ b/dbm-ui/frontend/src/views/db-manage/redis/routes.ts
@@ -17,10 +17,14 @@ import FunctionControllModel, {
   type RedisFunctions,
 } from '@services/model/function-controller/functionController';
 
-import { checkDbConsole } from '@utils';
+import { DBTypes, TicketTypes } from '@common/const';
+
+import { checkDbConsole, createToolboxRoute } from '@utils';
 
 import { t } from '@locales/index';
 
+const { createRouteItem } = createToolboxRoute(DBTypes.REDIS);
+
 const redisInstallModuleRoute = {
   name: 'RedisInstallModule',
   path: 'install-module/:page?',
@@ -30,14 +34,7 @@ const redisInstallModuleRoute = {
   component: () => import('@views/db-manage/redis/install-module/Index.vue'),
 };
 
-const redisCapacityChangeRoute = {
-  name: 'RedisCapacityChange',
-  path: 'capacity-change/:page?',
-  meta: {
-    navName: t('集群容量变更'),
-  },
-  component: () => import('@views/db-manage/redis/capacity-change/Index.vue'),
-};
+const redisCapacityChangeRoute = createRouteItem(TicketTypes.REDIS_SCALE_UPDOWN, t('集群容量变更'));
 
 const redisProxyScaleUpRoute = {
   name: 'RedisProxyScaleUp',
@@ -48,14 +45,7 @@ const redisProxyScaleUpRoute = {
   component: () => import('@views/db-manage/redis/proxy-scale-up/Index.vue'),
 };
 
-const redisProxyScaleDownRoute = {
-  name: 'RedisProxyScaleDown',
-  path: 'proxy-scale-down/:page?',
-  meta: {
-    navName: t('缩容接入层'),
-  },
-  component: () => import('@views/db-manage/redis/proxy-scale-down/Index.vue'),
-};
+const redisProxyScaleDownRoute = createRouteItem(TicketTypes.REDIS_PROXY_SCALE_DOWN, t('缩容接入层'));
 
 const redisDBCreateSlaveRoute = {
   name: 'RedisDBCreateSlave',
@@ -75,14 +65,7 @@ const redisMasterFailoverRoute = {
   component: () => import('@views/db-manage/redis/master-failover/Index.vue'),
 };
 
-const redisDBReplaceRoute = {
-  name: 'RedisDBReplace',
-  path: 'db-replace/:page?',
-  meta: {
-    navName: t('整机替换'),
-  },
-  component: () => import('@views/db-manage/redis/db-replace/Index.vue'),
-};
+const redisDBReplaceRoute = createRouteItem(TicketTypes.REDIS_CLUSTER_CUTOFF, t('整机替换'));
 
 const redisMigrateRoute = {
   name: 'RedisMigrate',
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 a41bf0a2a7..16c8aa2b21 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
@@ -11,6 +11,8 @@
  * the specific language governing permissions and limitations under the License.
  */
 
+import { TicketTypes } from '@common/const';
+
 import { t } from '@locales/index';
 
 export interface MenuItem {
@@ -52,7 +54,7 @@ export default [
           },
           {
             name: t('整机替换'),
-            id: 'RedisDBReplace',
+            id: TicketTypes.REDIS_CLUSTER_CUTOFF,
             parentId: 'common-manage',
             dbConsoleValue: 'redis.toolbox.dbReplace',
           },
@@ -153,13 +155,13 @@ export default [
           },
           {
             name: t('缩容接入层'),
-            id: 'RedisProxyScaleDown',
+            id: TicketTypes.REDIS_PROXY_SCALE_DOWN,
             parentId: 'cluster-manage',
             dbConsoleValue: 'redis.toolbox.proxyScaleDown',
           },
           {
             name: t('集群容量变更'),
-            id: 'RedisCapacityChange',
+            id: TicketTypes.REDIS_SCALE_UPDOWN,
             parentId: 'cluster-manage',
             dbConsoleValue: 'redis.toolbox.capacityChange',
           },
diff --git a/dbm-ui/frontend/src/views/db-manage/riak/list/components/components/DeleteNodes.vue b/dbm-ui/frontend/src/views/db-manage/riak/list/components/components/DeleteNodes.vue
index 03be1e497e..8421ea17c8 100644
--- a/dbm-ui/frontend/src/views/db-manage/riak/list/components/components/DeleteNodes.vue
+++ b/dbm-ui/frontend/src/views/db-manage/riak/list/components/components/DeleteNodes.vue
@@ -151,12 +151,14 @@
                 details: {
                   cluster_id: props.data.id,
                   bk_cloud_id: props.data.bk_cloud_id,
-                  nodes: tableRef.value.bkTableRef.getSelection().map((nodeItem: RiakNodeModel) => ({
-                    ip: nodeItem.ip,
-                    bk_host_id: nodeItem.bk_host_id,
-                    bk_cloud_id: nodeItem.bk_cloud_id,
-                    bk_biz_id: currentBizId,
-                  })),
+                  old_nodes: {
+                    riak: tableRef.value.bkTableRef.getSelection().map((nodeItem: RiakNodeModel) => ({
+                      ip: nodeItem.ip,
+                      bk_host_id: nodeItem.bk_host_id,
+                      bk_cloud_id: nodeItem.bk_cloud_id,
+                      bk_biz_id: currentBizId,
+                    })),
+                  }
                 },
               })
                 .then((createTicketResult) => {
diff --git a/dbm-ui/frontend/src/views/db-manage/riak/list/components/detail/components/NodeList.vue b/dbm-ui/frontend/src/views/db-manage/riak/list/components/detail/components/NodeList.vue
index 9f17e42fbb..2a5b0a9a04 100644
--- a/dbm-ui/frontend/src/views/db-manage/riak/list/components/detail/components/NodeList.vue
+++ b/dbm-ui/frontend/src/views/db-manage/riak/list/components/detail/components/NodeList.vue
@@ -369,14 +369,16 @@
           details: {
             cluster_id: props.data.id,
             bk_cloud_id: row.bk_cloud_id,
-            nodes: [
-              {
-                ip: row.ip,
-                bk_host_id: row.bk_host_id,
-                bk_cloud_id: row.bk_cloud_id,
-                bk_biz_id: currentBizId,
-              },
-            ],
+            old_nodes: {
+              riak: [
+                {
+                  ip: row.ip,
+                  bk_host_id: row.bk_host_id,
+                  bk_cloud_id: row.bk_cloud_id,
+                  bk_biz_id: currentBizId,
+                },
+              ],
+            }
           },
         }).then((createTicketResult) => {
           fetchData();
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_ADD_SLAVE/Create.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_ADD_SLAVE/Create.vue
new file mode 100644
index 0000000000..9757e832c9
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_ADD_SLAVE/Create.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>
+  <SmartAction>
+    <BkAlert
+      class="mb-20"
+      closable
+      :title="t('添加从库：同机的所有集群会统一新增从库，仅支持 always on 集群')" />
+    <BkForm
+      v-model="formData"
+      class="mb-20"
+      form-type="vertical">
+      <EditableTable
+        ref="table"
+        class="mb-20"
+        :model="formData.tableData">
+        <EditableTableRow
+          v-for="(item, index) in formData.tableData"
+          :key="index">
+          <ClusterColumn
+            v-model="item.cluster"
+            :selected="selected"
+            @batch-edit="handleBatchEdit" />
+          <SingleHostColumn
+            v-model="item.slave"
+            field="slave.ip"
+            :label="t('新从库主机')" />
+          <OperationColumn
+            v-model:table-data="formData.tableData"
+            :create-row-method="createTableRow" />
+        </EditableTableRow>
+      </EditableTable>
+      <BackupSource v-model="formData.backupSource" />
+      <TicketRemark v-model="formData.remark" />
+    </BkForm>
+    <template #action>
+      <BkButton
+        class="mr-8 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 lang="ts" setup>
+  import { reactive, useTemplateRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import SqlServerHaModel from '@services/model/sqlserver/sqlserver-ha';
+  import { BackupSourceType } from '@services/types';
+
+  import { useCreateTicket } from '@hooks';
+
+  import { TicketTypes } from '@common/const';
+
+  import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
+
+  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
+  import SingleHostColumn from '@views/db-manage/common/toolbox-field/column/single-host-column/Index.vue';
+  import BackupSource from '@views/db-manage/common/toolbox-field/form-item/backup-source/Index.vue';
+  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+
+  import ClusterColumn from './components/ClusterColumn.vue';
+
+  interface RowData {
+    cluster: {
+      id: number;
+      master_domain: string;
+    };
+    slave: {
+      bk_biz_id: number;
+      bk_cloud_id: number;
+      bk_host_id: number;
+      ip: string;
+    };
+  }
+
+  const { t } = useI18n();
+  const tableRef = useTemplateRef('table');
+
+  const createTableRow = (data = {} as Partial<RowData>) => ({
+    cluster: data.cluster || {
+      id: 0,
+      master_domain: '',
+    },
+    slave: data.slave || {
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+    },
+  });
+
+  const defaultData = () => ({
+    tableData: [createTableRow()],
+    backupSource: BackupSourceType.REMOTE,
+    remark: '',
+  });
+
+  const formData = reactive(defaultData());
+  const selected = computed(() => formData.tableData.filter((item) => item.cluster.id).map((item) => item.cluster));
+  const selectedMap = computed(() => Object.fromEntries(selected.value.map((cur) => [cur.master_domain, true])));
+
+  const { run: createTicketRun, loading: isSubmitting } = useCreateTicket<{
+    backup_source: BackupSourceType;
+    infos: {
+      cluster_ids: number[];
+      resource_spec: {
+        new_slave: {
+          spec_id: number;
+          count: number;
+          hosts: {
+            bk_biz_id: number;
+            bk_cloud_id: number;
+            bk_host_id: number;
+            ip: string;
+          }[];
+        };
+      };
+    }[];
+  }>(TicketTypes.SQLSERVER_ADD_SLAVE);
+
+  const handleSubmit = async () => {
+    const result = await tableRef.value!.validate();
+    if (!result) {
+      return;
+    }
+    createTicketRun({
+      details: {
+        backup_source: formData.backupSource,
+        infos: formData.tableData.map((item) => ({
+          cluster_ids: [item.cluster.id],
+          resource_spec: {
+            new_slave: {
+              spec_id: 0,
+              count: 1,
+              hosts: [item.slave],
+            },
+          },
+        })),
+      },
+      remark: formData.remark,
+    });
+  };
+
+  const handleReset = () => {
+    Object.assign(formData, defaultData());
+  };
+
+  const handleBatchEdit = (list: SqlServerHaModel[]) => {
+    const dataList = list.reduce<RowData[]>((acc, item) => {
+      if (!selectedMap.value[item.master_domain]) {
+        acc.push(
+          createTableRow({
+            cluster: {
+              id: item.id,
+              master_domain: item.master_domain,
+            },
+          }),
+        );
+      }
+      return acc;
+    }, []);
+    formData.tableData = [...(selected.value.length ? formData.tableData : []), ...dataList];
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_ADD_SLAVE/Index.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_ADD_SLAVE/Index.vue
new file mode 100644
index 0000000000..7d5a04e740
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_ADD_SLAVE/Index.vue
@@ -0,0 +1,32 @@
+<!--
+ * 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="components[page]" />
+</template>
+<script setup lang="ts">
+  import { useRoute } from 'vue-router';
+
+  import Page2 from '@views/db-manage/common/create-ticket-success/Index.vue';
+
+  import Page1 from './Create.vue';
+
+  const route = useRoute();
+
+  const components = {
+    create: Page1,
+    success: Page2,
+  };
+
+  const page = computed(() => (route.params.page as keyof typeof components) || 'create');
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_ADD_SLAVE/components/ClusterColumn.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_ADD_SLAVE/components/ClusterColumn.vue
new file mode 100644
index 0000000000..52deda5729
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_ADD_SLAVE/components/ClusterColumn.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>
+  <Column
+    :append-rules="rules"
+    field="cluster.master_domain"
+    fixed="left"
+    :label="t('目标集群 (always on 集群)')"
+    :loading="loading"
+    :min-width="300"
+    required>
+    <template #headAppend>
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-host-select"
+        @click="handleShowSelector">
+        <DbIcon type="batch-host-select" />
+      </span>
+    </template>
+    <Input
+      v-model="modelValue.master_domain"
+      :placeholder="t('请输入集群域名')"
+      @change="handleInputChange" />
+  </Column>
+  <ClusterSelector
+    v-model:is-show="showSelector"
+    :cluster-types="[ClusterTypes.SQLSERVER_HA]"
+    :selected="selectedClusters"
+    :tab-list-config="tabListConfig"
+    @change="handleSelectorChange" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import SqlServerHaModel from '@services/model/sqlserver/sqlserver-ha';
+  import { filterClusters } from '@services/source/dbbase';
+  import { getHaClusterList } from '@services/source/sqlserveHaCluster';
+
+  import { ClusterTypes } from '@common/const';
+  import { domainRegex } from '@common/regex';
+
+  import ClusterSelector from '@components/cluster-selector/Index.vue';
+  import { Column, Input } from '@components/editable-table/Index.vue';
+
+  interface Props {
+    selected: {
+      id: number;
+      master_domain: string;
+    }[];
+  }
+
+  interface Emits {
+    (e: 'batch-edit', list: SqlServerHaModel[]): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<{
+    id?: number;
+    master_domain: string;
+  }>({
+    default: () => ({
+      master_domain: '',
+    }),
+  });
+
+  const { t } = useI18n();
+
+  const tabListConfig = {
+    [ClusterTypes.SQLSERVER_HA]: {
+      id: ClusterTypes.SQLSERVER_HA,
+      name: t('SqlServer 主从'),
+      getResourceList: (params: ServiceParameters<typeof getHaClusterList>) =>
+        getHaClusterList({
+          ...params,
+          sys_mode: 'always_on',
+        }),
+    },
+  };
+
+  const showSelector = ref(false);
+  const selectedClusters = computed<Record<string, SqlServerHaModel[]>>(() => ({
+    [ClusterTypes.SQLSERVER_HA]: props.selected.map(
+      (item) =>
+        ({
+          id: item.id,
+          master_domain: item.master_domain,
+        }) as SqlServerHaModel,
+    ),
+  }));
+
+  const rules = [
+    {
+      validator: (value: string) => domainRegex.test(value),
+      message: t('集群域名格式不正确'),
+      trigger: 'change',
+    },
+    {
+      validator: (value: string) => props.selected.filter((item) => item.master_domain === value).length < 2,
+      message: t('目标集群重复'),
+      trigger: 'blur',
+    },
+    {
+      validator: () => {
+        if (!modelValue.value.master_domain) {
+          return true;
+        }
+        return Boolean(modelValue.value.id);
+      },
+      message: t('目标集群不存在'),
+      trigger: 'blur',
+    },
+  ];
+
+  const { run: queryCluster, loading } = useRequest(filterClusters, {
+    manual: true,
+    onSuccess: (data) => {
+      modelValue.value.id = undefined;
+      if (data.length) {
+        modelValue.value.id = data[0].id;
+      }
+    },
+  });
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    if (value) {
+      queryCluster({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        exact_domain: value,
+      });
+    }
+  };
+
+  const handleSelectorChange = (selected: Record<string, SqlServerHaModel[]>) => {
+    emits('batch-edit', selected[ClusterTypes.SQLSERVER_HA]);
+  };
+</script>
+<style lang="less" scoped>
+  .batch-host-select {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/Create.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/Create.vue
new file mode 100644
index 0000000000..eaaa2e8957
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/Create.vue
@@ -0,0 +1,82 @@
+<!--
+ * 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>
+  <BkAlert
+    class="mb-20"
+    closable
+    :title="t('重建从库_原机器或新机器重新同步数据及权限_并且将域名解析指向同步好的机器')" />
+  <div>
+    <strong class="restore-types-title">
+      {{ t('重建类型') }}
+    </strong>
+    <div class="mt-8 mb-20">
+      <CardCheckbox
+        v-model="restoreType"
+        :desc="t('在原主机上进行故障从库实例重建')"
+        icon="rebuild"
+        :title="t('原地重建')"
+        :true-value="RestoreTypes.LOCAL_RESTORE" />
+      <CardCheckbox
+        v-model="restoreType"
+        class="ml-8"
+        :desc="t('将从库主机的全部实例重建到新主机')"
+        icon="host"
+        :title="t('新机重建')"
+        :true-value="RestoreTypes.RESTORE" />
+    </div>
+  </div>
+  <Component :is="comMap[restoreType]" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+
+  import CardCheckbox from '@components/db-card-checkbox/CardCheckbox.vue';
+
+  import LocalRestore from './components/local-restore/Index.vue';
+  import Restore from './components/restore/Index.vue';
+
+  /**
+   * INSTANCE_REPLACE: 原地重建
+   * HOST_REPLACE: 新机重建
+   */
+  enum RestoreTypes {
+    LOCAL_RESTORE = 'LOCAL_RESTORE',
+    RESTORE = 'RESTORE',
+  }
+
+  const { t } = useI18n();
+
+  const comMap = {
+    [RestoreTypes.LOCAL_RESTORE]: LocalRestore,
+    [RestoreTypes.RESTORE]: Restore,
+  };
+
+  const restoreType = ref(RestoreTypes.LOCAL_RESTORE);
+</script>
+
+<style lang="less" scoped>
+  .restore-types-title {
+    position: relative;
+    font-size: @font-size-mini;
+    color: @title-color;
+
+    &::after {
+      position: absolute;
+      top: 2px;
+      right: -8px;
+      color: @danger-color;
+      content: '*';
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/Index.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/Index.vue
new file mode 100644
index 0000000000..7d5a04e740
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/Index.vue
@@ -0,0 +1,32 @@
+<!--
+ * 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="components[page]" />
+</template>
+<script setup lang="ts">
+  import { useRoute } from 'vue-router';
+
+  import Page2 from '@views/db-manage/common/create-ticket-success/Index.vue';
+
+  import Page1 from './Create.vue';
+
+  const route = useRoute();
+
+  const components = {
+    create: Page1,
+    success: Page2,
+  };
+
+  const page = computed(() => (route.params.page as keyof typeof components) || 'create');
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/local-restore/Index.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/local-restore/Index.vue
new file mode 100644
index 0000000000..42d6d92e24
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/local-restore/Index.vue
@@ -0,0 +1,199 @@
+<!--
+ * 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>
+    <BkForm
+      v-model="formData"
+      class="mb-20"
+      form-type="vertical">
+      <EditableTable
+        ref="table"
+        class="mb-20"
+        :model="formData.tableData">
+        <EditableTableRow
+          v-for="(item, index) in formData.tableData"
+          :key="index">
+          <SlaveInstanceColumn
+            v-model="item.slave"
+            :selected="selected"
+            @batch-edit="handleBatchEdit" />
+          <Column
+            :label="t('所属集群')"
+            :min-width="150">
+            <Block
+              v-model="item.slave.master_domain"
+              :placeholder="t('自动生成')" />
+          </Column>
+          <OperationColumn
+            v-model:table-data="formData.tableData"
+            :create-row-method="createTableRow" />
+        </EditableTableRow>
+      </EditableTable>
+      <BackupSource v-model="formData.backupSource" />
+      <TicketRemark v-model="formData.remark" />
+    </BkForm>
+    <template #action>
+      <BkButton
+        class="mr-8 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 lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+
+  import { BackupSourceType } from '@services/types';
+
+  import { useCreateTicket } from '@hooks';
+
+  import { TicketTypes } from '@common/const';
+
+  import EditableTable, { Block, Column, Row as EditableTableRow } from '@components/editable-table/Index.vue';
+
+  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
+  import BackupSource from '@views/db-manage/common/toolbox-field/form-item/backup-source/Index.vue';
+  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+
+  import SlaveInstanceColumn, { type SelectorHost } from './SlaveInstanceColumn.vue';
+
+  interface RowData {
+    slave: {
+      bk_biz_id: number;
+      bk_cloud_id: number;
+      bk_host_id: number;
+      ip: string;
+      port: number;
+      instance_address: string;
+      cluster_id: number;
+      master_domain: string;
+    };
+  }
+
+  const { t } = useI18n();
+  const router = useRouter();
+  const tableRef = useTemplateRef('table');
+
+  const createTableRow = (data = {} as Partial<RowData>) => ({
+    slave: data.slave || {
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+      port: 0,
+      instance_address: '',
+      cluster_id: 0,
+      master_domain: '',
+    },
+  });
+
+  const defaultData = () => ({
+    tableData: [createTableRow()],
+    backupSource: BackupSourceType.REMOTE,
+    remark: '',
+  });
+
+  const formData = reactive(defaultData());
+  const selected = computed(() => formData.tableData.filter((item) => item.slave.bk_host_id).map((item) => item.slave));
+  const selectedMap = computed(() => Object.fromEntries(selected.value.map((cur) => [cur.instance_address, true])));
+
+  const { run: createTicketRun, loading: isSubmitting } = useCreateTicket<{
+    backup_source: BackupSourceType;
+    infos: {
+      cluster_id: number;
+      slave: {
+        bk_biz_id: number;
+        bk_host_id: number;
+        bk_cloud_id: number;
+        ip: string;
+        port: number;
+      };
+    }[];
+  }>(TicketTypes.SQLSERVER_RESTORE_LOCAL_SLAVE, {
+    onSuccess(ticketId) {
+      router.push({
+        name: TicketTypes.SQLSERVER_RESTORE_SLAVE, // 以新机重建单据为主路由
+        params: {
+          page: 'success',
+        },
+        query: {
+          ticketId,
+        },
+      });
+    },
+  });
+
+  const handleSubmit = async () => {
+    const valid = await tableRef.value!.validate();
+    if (valid) {
+      createTicketRun({
+        details: {
+          backup_source: formData.backupSource,
+          infos: formData.tableData.map((item) => ({
+            cluster_id: item.slave.cluster_id,
+            slave: {
+              bk_biz_id: item.slave.bk_biz_id,
+              bk_host_id: item.slave.bk_host_id,
+              bk_cloud_id: item.slave.bk_cloud_id,
+              ip: item.slave.ip,
+              port: item.slave.port,
+            },
+          })),
+        },
+        remark: formData.remark,
+      });
+    }
+  };
+
+  const handleReset = () => {
+    Object.assign(formData, defaultData());
+  };
+
+  const handleBatchEdit = (list: SelectorHost[]) => {
+    const dataList = list.reduce<RowData[]>((acc, item) => {
+      if (!selectedMap.value[item.instance_address]) {
+        acc.push(
+          createTableRow({
+            slave: {
+              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,
+              instance_address: item.instance_address,
+              cluster_id: item.cluster_id,
+              master_domain: item.master_domain,
+            },
+          }),
+        );
+      }
+      return acc;
+    }, []);
+    formData.tableData = [...(selected.value.length ? formData.tableData : []), ...dataList];
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/local-restore/SlaveInstanceColumn.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/local-restore/SlaveInstanceColumn.vue
new file mode 100644
index 0000000000..34d1c93ee8
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/local-restore/SlaveInstanceColumn.vue
@@ -0,0 +1,185 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    :append-rules="rules"
+    field="slave.instance_address"
+    fixed="left"
+    :label="t('目标从库实例')"
+    :loading="loading"
+    :min-width="150"
+    required>
+    <template #headAppend>
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-host-select"
+        @click="handleShowSelector">
+        <DbIcon type="batch-host-select" />
+      </span>
+    </template>
+    <Input
+      v-model="modelValue.instance_address"
+      :placeholder="t('请输入IP:Port')"
+      @change="handleInputChange" />
+  </Column>
+  <InstanceSelector
+    v-model:is-show="showSelector"
+    :cluster-types="[ClusterTypes.SQLSERVER_HA]"
+    :selected="selectedInstances"
+    :tab-list-config="tabListConfig"
+    @change="handleSelectorChange" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { checkInstance } from '@services/source/dbbase';
+  import { getSqlServerInstanceList } from '@services/source/sqlserveHaCluster';
+
+  import { ClusterTypes } from '@common/const';
+  import { ipPort } from '@common/regex';
+
+  import { Column, Input } from '@components/editable-table/Index.vue';
+  import InstanceSelector, {
+    type InstanceSelectorValues,
+    type IValue,
+    type PanelListType,
+  } from '@components/instance-selector/Index.vue';
+
+  export type SelectorHost = IValue;
+
+  interface Props {
+    selected: {
+      instance_address: string;
+    }[];
+  }
+
+  interface Emits {
+    (e: 'batch-edit', list: IValue[]): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<{
+    bk_biz_id: number;
+    bk_cloud_id: number;
+    bk_host_id?: number;
+    ip: string;
+    port: number;
+    instance_address: string;
+    cluster_id: number;
+    master_domain: string;
+  }>({
+    default: () => ({
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      ip: '',
+      port: 0,
+      instance_address: '',
+      cluster_id: 0,
+      master_domain: '',
+    }),
+  });
+
+  const { t } = useI18n();
+
+  const tabListConfig = {
+    [ClusterTypes.SQLSERVER_HA as string]: [
+      {
+        name: t('从库实例'),
+        tableConfig: {
+          getTableList: (params: ServiceParameters<typeof getSqlServerInstanceList>) =>
+            getSqlServerInstanceList({
+              ...params,
+              role: 'backend_slave',
+            }),
+        },
+      },
+    ],
+  } as Record<string, PanelListType>;
+
+  const showSelector = ref(false);
+  const selectedInstances = computed<InstanceSelectorValues<IValue>>(() => ({
+    [ClusterTypes.SQLSERVER_HA]: props.selected.map(
+      (item) =>
+        ({
+          instance_address: item.instance_address,
+        }) as IValue,
+    ),
+  }));
+
+  const rules = [
+    {
+      validator: (value: string) => ipPort.test(value),
+      message: t('格式不符合要求'),
+      trigger: 'change',
+    },
+    {
+      validator: (value: string) => props.selected.filter((item) => item.instance_address === value).length < 2,
+      message: t('目标实例重复'),
+      trigger: 'blur',
+    },
+    {
+      validator: () => Boolean(modelValue.value.bk_host_id),
+      message: t('目标实例不存在'),
+      trigger: 'blur',
+    },
+  ];
+
+  const { run: queryHost, loading } = useRequest(checkInstance, {
+    manual: true,
+    onSuccess: (data) => {
+      modelValue.value.bk_host_id = undefined;
+      if (data.length) {
+        const [currentHost] = data;
+        modelValue.value = {
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          bk_host_id: currentHost.bk_host_id,
+          bk_cloud_id: currentHost.bk_cloud_id,
+          ip: currentHost.ip,
+          port: currentHost.port,
+          instance_address: currentHost.instance_address,
+          cluster_id: currentHost.cluster_id,
+          master_domain: currentHost.master_domain,
+        };
+      }
+    },
+  });
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    if (value) {
+      queryHost({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        instance_addresses: [value],
+      });
+    }
+  };
+
+  const handleSelectorChange = (selected: InstanceSelectorValues<IValue>) => {
+    emits('batch-edit', selected[ClusterTypes.SQLSERVER_HA]);
+  };
+</script>
+<style lang="less" scoped>
+  .batch-host-select {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/restore/Index.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/restore/Index.vue
new file mode 100644
index 0000000000..00ab0c3d90
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/restore/Index.vue
@@ -0,0 +1,216 @@
+<!--
+ * 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>
+    <BkForm
+      v-model="formData"
+      class="mb-20"
+      form-type="vertical">
+      <EditableTable
+        ref="table"
+        class="mb-20"
+        :model="formData.tableData">
+        <EditableTableRow
+          v-for="(item, index) in formData.tableData"
+          :key="index">
+          <SlaveHostColumnGroup
+            v-model="item.slave"
+            :selected="selected"
+            @batch-edit="handleBatchEdit" />
+          <SingleHostColumn
+            v-model="item.newSlave"
+            field="newSlave.ip"
+            :label="t('新从库主机')" />
+          <OperationColumn
+            v-model:table-data="formData.tableData"
+            :create-row-method="createTableRow" />
+        </EditableTableRow>
+      </EditableTable>
+      <BackupSource v-model="formData.backupSource" />
+      <TicketRemark v-model="formData.remark" />
+    </BkForm>
+    <template #action>
+      <BkButton
+        class="mr-8 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 lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+
+  import { BackupSourceType } from '@services/types';
+
+  import { useCreateTicket } from '@hooks';
+
+  import { TicketTypes } from '@common/const';
+
+  import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
+
+  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
+  import SingleHostColumn from '@views/db-manage/common/toolbox-field/column/single-host-column/Index.vue';
+  import BackupSource from '@views/db-manage/common/toolbox-field/form-item/backup-source/Index.vue';
+  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+
+  import SlaveHostColumnGroup, { type SelectorHost } from './SlaveHostColumnGroup.vue';
+
+  interface RowData {
+    slave: {
+      bk_biz_id: number;
+      bk_cloud_id: number;
+      bk_host_id: number;
+      ip: string;
+      related_clusters: {
+        id: number;
+        master_domain: string;
+      }[];
+    };
+    newSlave: {
+      bk_biz_id: number;
+      bk_host_id: number;
+      bk_cloud_id: number;
+      ip: string;
+    };
+  }
+
+  const { t } = useI18n();
+  const tableRef = useTemplateRef('table');
+
+  const createTableRow = (data = {} as Partial<RowData>) => ({
+    slave: data.slave || {
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+      related_clusters: [],
+    },
+    newSlave: data.newSlave || {
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+    },
+  });
+
+  const defaultData = () => ({
+    tableData: [createTableRow()],
+    backupSource: BackupSourceType.REMOTE,
+    remark: '',
+  });
+
+  const formData = reactive(defaultData());
+  const selected = computed(() => formData.tableData.filter((item) => item.slave.bk_host_id).map((item) => item.slave));
+  const selectedMap = computed(() => Object.fromEntries(selected.value.map((cur) => [cur.ip, true])));
+
+  const { run: createTicketRun, loading: isSubmitting } = useCreateTicket<{
+    ip_source: 'resource_pool';
+    backup_source: BackupSourceType;
+    infos: {
+      cluster_ids: number[];
+      old_nodes: {
+        old_slave: {
+          bk_biz_id: number;
+          bk_host_id: number;
+          bk_cloud_id: number;
+          ip: string;
+        }[];
+      };
+      resource_spec: {
+        new_slave: {
+          spec_id: number;
+          hosts: {
+            bk_biz_id: number;
+            bk_host_id: number;
+            bk_cloud_id: number;
+            ip: string;
+          }[];
+        };
+      };
+    }[];
+  }>(TicketTypes.SQLSERVER_RESTORE_SLAVE);
+
+  const handleSubmit = async () => {
+    const valid = await tableRef.value!.validate();
+    if (valid) {
+      createTicketRun({
+        details: {
+          ip_source: 'resource_pool',
+          backup_source: formData.backupSource,
+          infos: formData.tableData.map((item) => ({
+            cluster_ids: item.slave.related_clusters.map((item) => item.id),
+            old_nodes: {
+              old_slave: [
+                {
+                  bk_biz_id: item.slave.bk_biz_id,
+                  bk_host_id: item.slave.bk_host_id,
+                  bk_cloud_id: item.slave.bk_cloud_id,
+                  ip: item.slave.ip,
+                },
+              ],
+            },
+            resource_spec: {
+              new_slave: {
+                spec_id: 0,
+                hosts: [item.newSlave],
+              },
+            },
+          })),
+        },
+        remark: formData.remark,
+      });
+    }
+  };
+
+  const handleReset = () => {
+    Object.assign(formData, defaultData());
+  };
+
+  const handleBatchEdit = (list: SelectorHost[]) => {
+    const dataList = list.reduce<RowData[]>((acc, item) => {
+      if (!selectedMap.value[item.ip]) {
+        acc.push(
+          createTableRow({
+            slave: {
+              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,
+              related_clusters: item.related_clusters.map((item) => ({
+                id: item.id,
+                master_domain: item.master_domain,
+              })),
+            },
+          }),
+        );
+      }
+      return acc;
+    }, []);
+    formData.tableData = [...(selected.value.length ? formData.tableData : []), ...dataList];
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/restore/SlaveHostColumnGroup.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/restore/SlaveHostColumnGroup.vue
new file mode 100644
index 0000000000..560eaded25
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/restore/SlaveHostColumnGroup.vue
@@ -0,0 +1,203 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    :append-rules="rules"
+    field="slave.ip"
+    fixed="left"
+    :label="t('目标从库主机')"
+    :loading="loading"
+    :min-width="300"
+    required>
+    <template #headAppend>
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-host-select"
+        @click="handleShowSelector">
+        <DbIcon type="batch-host-select" />
+      </span>
+    </template>
+    <Input
+      v-model="modelValue.ip"
+      :placeholder="t('请输入IP')"
+      @change="handleInputChange" />
+  </Column>
+  <Column
+    :label="t('同机关联集群')"
+    :loading="loading"
+    :min-width="300">
+    <div
+      v-if="modelValue.related_clusters.length"
+      class="table-cell">
+      <p
+        v-for="item in modelValue.related_clusters"
+        :key="item.id">
+        {{ item.master_domain }}
+      </p>
+    </div>
+    <Block
+      v-else
+      :placeholder="t('自动生成')" />
+  </Column>
+  <InstanceSelector
+    v-model:is-show="showSelector"
+    :cluster-types="[ClusterTypes.SQLSERVER_HA]"
+    :selected="selectedInstances"
+    :tab-list-config="tabListConfig"
+    @change="handleSelectorChange" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { checkInstance } from '@services/source/dbbase';
+  import { getSqlServerInstanceList } from '@services/source/sqlserveHaCluster';
+
+  import { ClusterTypes } from '@common/const';
+  import { ipv4 } from '@common/regex';
+
+  import { Block, Column, Input } from '@components/editable-table/Index.vue';
+  import InstanceSelector, {
+    type InstanceSelectorValues,
+    type IValue,
+    type PanelListType,
+  } from '@components/instance-selector/Index.vue';
+
+  export type SelectorHost = IValue;
+
+  interface Props {
+    selected: {
+      ip: string;
+    }[];
+  }
+
+  interface Emits {
+    (e: 'batch-edit', list: IValue[]): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<{
+    bk_biz_id: number;
+    bk_cloud_id: number;
+    bk_host_id?: number;
+    ip: string;
+    related_clusters: {
+      id: number;
+      master_domain: string;
+    }[];
+  }>({
+    default: () => ({
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      ip: '',
+      related_clusters: [],
+    }),
+  });
+
+  const { t } = useI18n();
+
+  const tabListConfig = {
+    [ClusterTypes.SQLSERVER_HA]: [
+      {
+        name: t('从库主机'),
+        tableConfig: {
+          getTableList: (params: ServiceParameters<typeof getSqlServerInstanceList>) =>
+            getSqlServerInstanceList({
+              ...params,
+              role: 'backend_slave',
+            }),
+        },
+      },
+    ],
+  } as Record<ClusterTypes, PanelListType>;
+
+  const showSelector = ref(false);
+  const selectedInstances = computed<InstanceSelectorValues<IValue>>(() => ({
+    [ClusterTypes.SQLSERVER_HA]: props.selected.map(
+      (item) =>
+        ({
+          ip: item.ip,
+        }) as IValue,
+    ),
+  }));
+
+  const rules = [
+    {
+      validator: (value: string) => ipv4.test(value),
+      message: t('IP 格式不符合IPv4标准'),
+      trigger: 'change',
+    },
+    {
+      validator: (value: string) => props.selected.filter((item) => item.ip === value).length < 2,
+      message: t('目标主机重复'),
+      trigger: 'blur',
+    },
+    {
+      validator: () => Boolean(modelValue.value.bk_host_id),
+      message: t('目标主机不存在'),
+      trigger: 'blur',
+    },
+  ];
+
+  const { run: queryHost, loading } = useRequest(checkInstance, {
+    manual: true,
+    onSuccess: (data) => {
+      modelValue.value.bk_host_id = undefined;
+      if (data.length) {
+        const [currentHost] = data;
+        modelValue.value = {
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          bk_host_id: currentHost.bk_host_id,
+          bk_cloud_id: currentHost.bk_cloud_id,
+          ip: currentHost.ip,
+          related_clusters: currentHost.related_clusters.map((item) => ({
+            id: item.id,
+            master_domain: item.master_domain,
+          })),
+        };
+      }
+    },
+  });
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    if (value) {
+      queryHost({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        instance_addresses: [value],
+      });
+    }
+  };
+
+  const handleSelectorChange = (selected: InstanceSelectorValues<IValue>) => {
+    emits('batch-edit', selected[ClusterTypes.SQLSERVER_HA]);
+  };
+</script>
+<style lang="less" scoped>
+  .batch-host-select {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+
+  .table-cell {
+    padding: 0 8px;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/common/edit-table-column/HaCluster.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/common/edit-table-column/HaCluster.vue
new file mode 100644
index 0000000000..ffce22a1ca
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/common/edit-table-column/HaCluster.vue
@@ -0,0 +1,147 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    :append-rules="rules"
+    field="cluster.domain"
+    fixed="left"
+    :label="t('目标集群')"
+    :loading="loading"
+    :min-width="300"
+    required>
+    <template #headAppend>
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-host-select"
+        @click="handleShowSelector">
+        <DbIcon type="batch-host-select" />
+      </span>
+    </template>
+    <div style="flex: 1">
+      <Input
+        v-model="modelValue.domain"
+        :placeholder="t('请输入集群域名')"
+        @change="handleInputChange" />
+    </div>
+  </Column>
+  <ClusterSelector
+    v-model:is-show="showSelector"
+    :cluster-types="[ClusterTypes.SQLSERVER_HA]"
+    :selected="selectedClusters"
+    @change="handleSelectorChange" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import SqlserverHaModel from '@services/model/sqlserver/sqlserver-ha';
+  import { filterClusters } from '@services/source/dbbase';
+
+  import { ClusterTypes } from '@common/const';
+  import { domainRegex } from '@common/regex';
+
+  import ClusterSelector from '@components/cluster-selector/Index.vue';
+  import { Column, Input } from '@components/editable-table/Index.vue';
+
+  interface Props {
+    selected: {
+      id: number;
+      domain: string;
+    }[];
+  }
+
+  interface Emits {
+    (e: 'batch-edit', list: SqlserverHaModel[]): void;
+    (e: 'change', data: ServiceReturnType<typeof filterClusters>[number]): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<{
+    id?: number;
+    domain: string;
+  }>({
+    default: () => ({
+      domain: '',
+    }),
+  });
+
+  const { t } = useI18n();
+
+  const showSelector = ref(false);
+  const selectedClusters = computed<Record<string, SqlserverHaModel[]>>(() => ({
+    [ClusterTypes.SQLSERVER_HA]: props.selected.map(
+      (item) =>
+        ({
+          id: item.id,
+          master_domain: item.domain,
+        }) as SqlserverHaModel,
+    ),
+  }));
+
+  const rules = [
+    {
+      validator: (value: string) => domainRegex.test(value),
+      message: t('集群域名格式不正确'),
+      trigger: 'change',
+    },
+    {
+      validator: () => {
+        if (!modelValue.value.domain) {
+          return true;
+        }
+        return Boolean(modelValue.value.id);
+      },
+      message: t('目标集群不存在'),
+      trigger: 'blur',
+    },
+  ];
+
+  const { run: queryCluster, loading } = useRequest(filterClusters, {
+    manual: true,
+    onSuccess: (data) => {
+      modelValue.value.id = undefined;
+      if (data.length) {
+        modelValue.value.id = data[0].id;
+        emits('change', data[0]);
+      }
+    },
+  });
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    if (value) {
+      queryCluster({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        exact_domain: value,
+      });
+    }
+  };
+
+  const handleSelectorChange = (selected: Record<string, SqlserverHaModel[]>) => {
+    emits('batch-edit', selected[ClusterTypes.SQLSERVER_HA]);
+  };
+</script>
+<style lang="less" scoped>
+  .batch-host-select {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/routes.ts b/dbm-ui/frontend/src/views/db-manage/sqlserver/routes.ts
index 38dbe75169..c7481395b6 100644
--- a/dbm-ui/frontend/src/views/db-manage/sqlserver/routes.ts
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/routes.ts
@@ -15,8 +15,14 @@ import type { RouteRecordRaw } from 'vue-router';
 import type { SqlServerFunctions } from '@services/model/function-controller/functionController';
 import FunctionControllModel from '@services/model/function-controller/functionController';
 
+import { DBTypes, TicketTypes } from '@common/const';
+
+import { createToolboxRoute } from '@utils';
+
 import { t } from '@locales/index';
 
+const { createRouteItem } = createToolboxRoute(DBTypes.SQLSERVER);
+
 const routes: RouteRecordRaw[] = [
   {
     name: 'SqlServerManage',
@@ -97,22 +103,24 @@ const toolboxRouters: RouteRecordRaw[] = [
         },
         component: () => import('@views/db-manage/sqlserver/db-rename/Index.vue'),
       },
-      {
-        name: 'sqlServerSlaveRebuild',
-        path: 'slave-rebuild/:page?',
-        meta: {
-          navName: t('重建从库'),
-        },
-        component: () => import('@views/db-manage/sqlserver/slave-rebuild/index.vue'),
-      },
-      {
-        name: 'sqlServerSlaveAdd',
-        path: 'slave-add/:page?',
-        meta: {
-          navName: t('添加从库'),
-        },
-        component: () => import('@views/db-manage/sqlserver/slave-add/index.vue'),
-      },
+      // {
+      //   name: 'sqlServerSlaveRebuild',
+      //   path: 'slave-rebuild/:page?',
+      //   meta: {
+      //     navName: t('重建从库'),
+      //   },
+      //   component: () => import('@views/db-manage/sqlserver/slave-rebuild/index.vue'),
+      // },
+      createRouteItem(TicketTypes.SQLSERVER_RESTORE_SLAVE, t('重建从库')),
+      createRouteItem(TicketTypes.SQLSERVER_ADD_SLAVE, t('添加从库')),
+      // {
+      //   name: 'sqlServerSlaveAdd',
+      //   path: 'slave-add/:page?',
+      //   meta: {
+      //     navName: t('添加从库'),
+      //   },
+      //   component: () => import('@views/db-manage/sqlserver/slave-add/index.vue'),
+      // },
       {
         name: 'sqlServerMasterSlaveSwap',
         path: 'master-slave-swap/:page?',
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/toolbox-menu.ts b/dbm-ui/frontend/src/views/db-manage/sqlserver/toolbox-menu.ts
index 996c34bf3c..69ea69a65d 100644
--- a/dbm-ui/frontend/src/views/db-manage/sqlserver/toolbox-menu.ts
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/toolbox-menu.ts
@@ -11,6 +11,8 @@
  * the specific language governing permissions and limitations under the License.
  */
 
+import { TicketTypes } from '@common/const';
+
 import { t } from '@locales/index';
 
 export interface MenuChild {
@@ -68,12 +70,12 @@ export default [
     children: [
       {
         name: t('重建从库'),
-        id: 'sqlServerSlaveRebuild',
+        id: TicketTypes.SQLSERVER_RESTORE_SLAVE,
         parentId: 'migrate',
       },
       {
         name: t('添加从库'),
-        id: 'sqlServerSlaveAdd',
+        id: TicketTypes.SQLSERVER_ADD_SLAVE,
         parentId: 'migrate',
       },
       {
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/Create.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/Create.vue
new file mode 100644
index 0000000000..03c1579ee1
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/Create.vue
@@ -0,0 +1,251 @@
+<!--
+ * 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>
+    <BkAlert
+      class="mb-20"
+      closable
+      :title="t('迁移主从：主从机器上的所有实例成对迁移到新机器上，旧机器会下架掉。')" />
+    <BkForm
+      v-model="formData"
+      class="mb-20"
+      form-type="vertical">
+      <EditableTable
+        ref="table"
+        class="mb-20"
+        :model="formData.tableData">
+        <EditableTableRow
+          v-for="(item, index) in formData.tableData"
+          :key="index">
+          <MasterHostColumnGroup
+            v-model="item.oldMaster"
+            :selected="selected"
+            @batch-edit="handleBatchEdit" />
+          <SlaveHostColumnGroup
+            v-model="item.oldSlave"
+            :master-host="item.oldMaster" />
+          <Column
+            :label="t('所属集群')"
+            :min-width="150">
+            <Block
+              v-model="item.oldMaster.master_domain"
+              :placeholder="t('自动生成')" />
+          </Column>
+          <SingleHostColumn
+            v-model="item.newMaster"
+            field="newMaster"
+            :label="t('新Master')"
+            :min-width="150" />
+          <SingleHostColumn
+            v-model="item.newSlave"
+            field="newSlave"
+            :label="t('新Slave')"
+            :min-width="150" />
+          <OperationColumn
+            v-model:table-data="formData.tableData"
+            :create-row-method="createTableRow" />
+        </EditableTableRow>
+      </EditableTable>
+      <BackupSource v-model="formData.backupSource" />
+      <TicketRemark v-model="formData.remark" />
+    </BkForm>
+    <template #action>
+      <BkButton
+        class="mr-8 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 lang="ts" setup>
+  import { reactive, useTemplateRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import { BackupSourceType } from '@services/types';
+
+  import { useCreateTicket } from '@hooks';
+
+  import { TicketTypes } from '@common/const';
+
+  import EditableTable, { Block, Column, Row as EditableTableRow } from '@components/editable-table/Index.vue';
+
+  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
+  import SingleHostColumn from '@views/db-manage/common/toolbox-field/column/single-host-column/Index.vue';
+  import BackupSource from '@views/db-manage/common/toolbox-field/form-item/backup-source/Index.vue';
+  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+
+  import MasterHostColumnGroup, { type SelectorHost } from './components/MasterHostColumnGroup.vue';
+  import SlaveHostColumnGroup from './components/SlaveHostColumnGroup.vue';
+
+  interface RowData {
+    oldMaster: {
+      bk_biz_id: number;
+      bk_cloud_id: number;
+      bk_host_id: number;
+      ip: string;
+      related_instances: string[];
+      cluster_id: number;
+      master_domain: string;
+    };
+    oldSlave: {
+      bk_biz_id: number;
+      bk_cloud_id: number;
+      bk_host_id: number;
+      ip: string;
+      related_instances: string[];
+    };
+    newMaster: {
+      bk_biz_id: number;
+      bk_cloud_id: number;
+      bk_host_id: number;
+      ip: string;
+    };
+    newSlave: RowData['newMaster'];
+  }
+
+  const { t } = useI18n();
+  const tableRef = useTemplateRef('table');
+
+  const createTableRow = (data = {} as Partial<RowData>) => {
+    const initHost = () => ({
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+    });
+    return {
+      oldMaster: data.oldMaster || {
+        ...initHost(),
+        related_instances: [],
+        cluster_id: 0,
+        master_domain: '',
+      },
+      oldSlave: data.oldSlave || {
+        ...initHost(),
+        related_instances: [],
+      },
+      newMaster: data.newMaster || initHost(),
+      newSlave: data.newSlave || initHost(),
+    };
+  };
+
+  const defaultData = () => ({
+    tableData: [createTableRow()],
+    backupSource: BackupSourceType.REMOTE,
+    remark: '',
+  });
+
+  const formData = reactive(defaultData());
+
+  const selected = computed(() =>
+    formData.tableData.filter((item) => item.oldMaster.bk_host_id).map((item) => item.oldMaster),
+  );
+  const selectedMap = computed(() => Object.fromEntries(selected.value.map((cur) => [cur.ip, true])));
+
+  interface ResourceHost {
+    spec_id: number;
+    hosts: {
+      bk_biz_id: number;
+      bk_cloud_id: number;
+      bk_host_id: number;
+      ip: string;
+    }[];
+  }
+
+  const { run: createTicketRun, loading: isSubmitting } = useCreateTicket<{
+    backup_resource: BackupSourceType;
+    ip_source: 'resource_pool';
+    infos: {
+      cluster_id: number;
+      old_nodes: {
+        old_master: ResourceHost['hosts'];
+        old_slave: ResourceHost['hosts'];
+      };
+      resource_spec: {
+        new_master: ResourceHost;
+        new_slave: ResourceHost;
+      };
+    }[];
+  }>(TicketTypes.TENDBCLUSTER_MIGRATE_CLUSTER);
+
+  const handleSubmit = async () => {
+    const result = await tableRef.value!.validate();
+    if (!result) {
+      return;
+    }
+    createTicketRun({
+      details: {
+        backup_resource: formData.backupSource,
+        ip_source: 'resource_pool',
+        infos: formData.tableData.map((item) => ({
+          cluster_id: item.oldMaster.cluster_id,
+          old_nodes: {
+            old_master: [item.oldMaster],
+            old_slave: [item.oldSlave],
+          },
+          resource_spec: {
+            new_master: {
+              spec_id: 0,
+              hosts: [item.newMaster],
+            },
+            new_slave: {
+              spec_id: 0,
+              hosts: [item.newSlave],
+            },
+          },
+        })),
+      },
+      remark: formData.remark,
+    });
+  };
+
+  const handleReset = () => {
+    Object.assign(formData, defaultData());
+  };
+
+  const handleBatchEdit = (list: SelectorHost[]) => {
+    const dataList = list.reduce<RowData[]>((acc, item) => {
+      if (!selectedMap.value[item.ip]) {
+        acc.push(
+          createTableRow({
+            oldMaster: {
+              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,
+              related_instances: item.related_instances.map((item) => item.instance),
+              cluster_id: item.cluster_id,
+              master_domain: item.master_domain,
+            },
+          }),
+        );
+      }
+      return acc;
+    }, []);
+    formData.tableData = [...(selected.value.length ? formData.tableData : []), ...dataList];
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/Index.vue
new file mode 100644
index 0000000000..7d5a04e740
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/Index.vue
@@ -0,0 +1,32 @@
+<!--
+ * 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="components[page]" />
+</template>
+<script setup lang="ts">
+  import { useRoute } from 'vue-router';
+
+  import Page2 from '@views/db-manage/common/create-ticket-success/Index.vue';
+
+  import Page1 from './Create.vue';
+
+  const route = useRoute();
+
+  const components = {
+    create: Page1,
+    success: Page2,
+  };
+
+  const page = computed(() => (route.params.page as keyof typeof components) || 'create');
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/components/MasterHostColumnGroup.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/components/MasterHostColumnGroup.vue
new file mode 100644
index 0000000000..73792a3079
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/components/MasterHostColumnGroup.vue
@@ -0,0 +1,188 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    :append-rules="rules"
+    field="oldMaster.ip"
+    fixed="left"
+    :label="t('目标主库主机')"
+    :loading="loading"
+    :min-width="150"
+    required>
+    <template #headAppend>
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-host-select"
+        @click="handleShowSelector">
+        <DbIcon type="batch-host-select" />
+      </span>
+    </template>
+    <Input
+      v-model="modelValue.ip"
+      :placeholder="t('请输入IP')"
+      @change="handleInputChange" />
+  </Column>
+  <Column
+    :label="t('主库主机关联实例')"
+    :loading="loading"
+    :min-width="150">
+    <div
+      v-if="modelValue.related_instances.length"
+      class="table-cell">
+      <p
+        v-for="item in modelValue.related_instances"
+        :key="item">
+        {{ item }}
+      </p>
+    </div>
+    <Block
+      v-else
+      :placeholder="t('自动生成')" />
+  </Column>
+  <InstanceSelector
+    v-model:is-show="showSelector"
+    :cluster-types="['TendbClusterHost']"
+    :selected="selectedHosts"
+    @change="handleSelectorChange" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { checkInstance } from '@services/source/dbbase';
+
+  import { ipv4 } from '@common/regex';
+
+  import { Block, Column, Input } from '@components/editable-table/Index.vue';
+  import InstanceSelector, { type InstanceSelectorValues, type IValue } from '@components/instance-selector/Index.vue';
+
+  export type SelectorHost = IValue;
+
+  interface Props {
+    selected: {
+      bk_biz_id?: number;
+      bk_cloud_id?: number;
+      bk_host_id?: number;
+      ip: string;
+    }[];
+  }
+
+  interface Emits {
+    (e: 'batch-edit', list: IValue[]): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<{
+    bk_biz_id: number;
+    bk_cloud_id: number;
+    bk_host_id?: number;
+    ip: string;
+    related_instances: string[];
+    cluster_id: number;
+    master_domain: string;
+  }>({
+    default: () => ({
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      ip: '',
+      related_instances: [],
+      cluster_id: 0,
+      master_domain: '',
+    }),
+  });
+
+  const { t } = useI18n();
+
+  const showSelector = ref(false);
+  const selectedHosts = computed<InstanceSelectorValues<IValue>>(() => ({
+    TendbClusterHost: props.selected.map(
+      (item) =>
+        ({
+          ip: item.ip,
+        }) as IValue,
+    ),
+  }));
+
+  const rules = [
+    {
+      validator: (value: string) => ipv4.test(value),
+      message: t('IP 格式不符合IPv4标准'),
+      trigger: 'change',
+    },
+    {
+      validator: (value: string) => props.selected.filter((item) => item.ip === value).length < 2,
+      message: t('目标主机重复'),
+      trigger: 'change',
+    },
+    {
+      validator: () => Boolean(modelValue.value.bk_host_id),
+      message: t('目标主机不存在'),
+      trigger: 'blur',
+    },
+  ];
+
+  const { run: queryHost, loading } = useRequest(checkInstance, {
+    manual: true,
+    onSuccess: (data) => {
+      modelValue.value.bk_host_id = undefined;
+      if (data.length) {
+        const currentHost = data[0];
+        const relatedInstances: string[] = [];
+        data.forEach((item) => {
+          relatedInstances.push(item.instance_address);
+        });
+        modelValue.value = {
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          bk_cloud_id: currentHost.bk_cloud_id,
+          bk_host_id: currentHost.bk_host_id,
+          ip: currentHost.ip,
+          related_instances: relatedInstances,
+          cluster_id: currentHost.cluster_id,
+          master_domain: currentHost.master_domain,
+        };
+      }
+    },
+  });
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    if (value) {
+      queryHost({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        instance_addresses: [value],
+      });
+    }
+  };
+
+  const handleSelectorChange = (selected: InstanceSelectorValues<IValue>) => {
+    emits('batch-edit', selected.TendbClusterHost);
+  };
+</script>
+<style lang="less" scoped>
+  .batch-host-select {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+
+  .table-cell {
+    padding: 0 8px;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/components/SlaveHostColumnGroup.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/components/SlaveHostColumnGroup.vue
new file mode 100644
index 0000000000..5c5ccdaa8f
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/components/SlaveHostColumnGroup.vue
@@ -0,0 +1,105 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    :label="t('目标从库主机')"
+    :loading="loading"
+    :min-width="150">
+    <Block
+      v-model="modelValue.ip"
+      :placeholder="t('自动生成')" />
+  </Column>
+  <Column
+    :label="t('从库主机关联实例')"
+    :loading="loading"
+    :min-width="150">
+    <div
+      v-if="modelValue.related_instances.length"
+      class="table-cell">
+      <p
+        v-for="item in modelValue.related_instances"
+        :key="item">
+        {{ item }}
+      </p>
+    </div>
+    <Block
+      v-else
+      :placeholder="t('自动生成')" />
+  </Column>
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { getRemoteMachineInstancePair } from '@services/source/mysqlCluster';
+
+  import { Block, Column } from '@components/editable-table/Index.vue';
+
+  interface Props {
+    masterHost: {
+      bk_cloud_id: number;
+      ip: string;
+    };
+  }
+
+  const props = defineProps<Props>();
+
+  const modelValue = defineModel<{
+    bk_biz_id?: number;
+    bk_cloud_id?: number;
+    bk_host_id?: number;
+    ip: string;
+    related_instances: string[];
+  }>({
+    default: () => ({
+      ip: '',
+      related_instances: [],
+    }),
+  });
+
+  const { t } = useI18n();
+
+  const { run: queryMachineInstancePair, loading } = useRequest(getRemoteMachineInstancePair, {
+    manual: true,
+    onSuccess: (data) => {
+      const [machineInstancePair] = Object.values(data.machines);
+      if (machineInstancePair) {
+        modelValue.value = {
+          bk_biz_id: machineInstancePair.bk_biz_id,
+          bk_cloud_id: machineInstancePair.bk_cloud_id,
+          bk_host_id: machineInstancePair.bk_host_id,
+          ip: machineInstancePair.ip,
+          related_instances: machineInstancePair.related_instances.map((item) => item.instance),
+        };
+      }
+    },
+  });
+
+  watch(
+    () => props.masterHost,
+    () => {
+      if (props.masterHost) {
+        queryMachineInstancePair({
+          machines: [`${props.masterHost.bk_cloud_id}:${props.masterHost.ip}`],
+        });
+      }
+    },
+  );
+</script>
+
+<style lang="less" scoped>
+  .table-cell {
+    padding: 0 8px;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/Create.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/Create.vue
new file mode 100644
index 0000000000..eaaa2e8957
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/Create.vue
@@ -0,0 +1,82 @@
+<!--
+ * 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>
+  <BkAlert
+    class="mb-20"
+    closable
+    :title="t('重建从库_原机器或新机器重新同步数据及权限_并且将域名解析指向同步好的机器')" />
+  <div>
+    <strong class="restore-types-title">
+      {{ t('重建类型') }}
+    </strong>
+    <div class="mt-8 mb-20">
+      <CardCheckbox
+        v-model="restoreType"
+        :desc="t('在原主机上进行故障从库实例重建')"
+        icon="rebuild"
+        :title="t('原地重建')"
+        :true-value="RestoreTypes.LOCAL_RESTORE" />
+      <CardCheckbox
+        v-model="restoreType"
+        class="ml-8"
+        :desc="t('将从库主机的全部实例重建到新主机')"
+        icon="host"
+        :title="t('新机重建')"
+        :true-value="RestoreTypes.RESTORE" />
+    </div>
+  </div>
+  <Component :is="comMap[restoreType]" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+
+  import CardCheckbox from '@components/db-card-checkbox/CardCheckbox.vue';
+
+  import LocalRestore from './components/local-restore/Index.vue';
+  import Restore from './components/restore/Index.vue';
+
+  /**
+   * INSTANCE_REPLACE: 原地重建
+   * HOST_REPLACE: 新机重建
+   */
+  enum RestoreTypes {
+    LOCAL_RESTORE = 'LOCAL_RESTORE',
+    RESTORE = 'RESTORE',
+  }
+
+  const { t } = useI18n();
+
+  const comMap = {
+    [RestoreTypes.LOCAL_RESTORE]: LocalRestore,
+    [RestoreTypes.RESTORE]: Restore,
+  };
+
+  const restoreType = ref(RestoreTypes.LOCAL_RESTORE);
+</script>
+
+<style lang="less" scoped>
+  .restore-types-title {
+    position: relative;
+    font-size: @font-size-mini;
+    color: @title-color;
+
+    &::after {
+      position: absolute;
+      top: 2px;
+      right: -8px;
+      color: @danger-color;
+      content: '*';
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/Index.vue
new file mode 100644
index 0000000000..7d5a04e740
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/Index.vue
@@ -0,0 +1,32 @@
+<!--
+ * 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="components[page]" />
+</template>
+<script setup lang="ts">
+  import { useRoute } from 'vue-router';
+
+  import Page2 from '@views/db-manage/common/create-ticket-success/Index.vue';
+
+  import Page1 from './Create.vue';
+
+  const route = useRoute();
+
+  const components = {
+    create: Page1,
+    success: Page2,
+  };
+
+  const page = computed(() => (route.params.page as keyof typeof components) || 'create');
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/local-restore/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/local-restore/Index.vue
new file mode 100644
index 0000000000..62b3bf86ac
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/local-restore/Index.vue
@@ -0,0 +1,199 @@
+<!--
+ * 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>
+    <BkForm
+      v-model="formData"
+      class="mb-20"
+      form-type="vertical">
+      <EditableTable
+        ref="table"
+        class="mb-20"
+        :model="formData.tableData">
+        <EditableTableRow
+          v-for="(item, index) in formData.tableData"
+          :key="index">
+          <SlaveInstanceColumn
+            v-model="item.slave"
+            :selected="selected"
+            @batch-edit="handleBatchEdit" />
+          <Column
+            :label="t('所属集群')"
+            :min-width="150">
+            <Block
+              v-model="item.slave.master_domain"
+              :placeholder="t('自动生成')" />
+          </Column>
+          <OperationColumn
+            v-model:table-data="formData.tableData"
+            :create-row-method="createTableRow" />
+        </EditableTableRow>
+      </EditableTable>
+      <BackupSource v-model="formData.backupSource" />
+      <TicketRemark v-model="formData.remark" />
+    </BkForm>
+    <template #action>
+      <BkButton
+        class="mr-8 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 lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+
+  import { BackupSourceType } from '@services/types';
+
+  import { useCreateTicket } from '@hooks';
+
+  import { TicketTypes } from '@common/const';
+
+  import EditableTable, { Block, Column, Row as EditableTableRow } from '@components/editable-table/Index.vue';
+
+  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
+  import BackupSource from '@views/db-manage/common/toolbox-field/form-item/backup-source/Index.vue';
+  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+
+  import SlaveInstanceColumn, { type SelectorHost } from './SlaveInstanceColumn.vue';
+
+  interface RowData {
+    slave: {
+      bk_biz_id: number;
+      bk_cloud_id: number;
+      bk_host_id: number;
+      ip: string;
+      port: number;
+      instance_address: string;
+      cluster_id: number;
+      master_domain: string;
+    };
+  }
+
+  const { t } = useI18n();
+  const router = useRouter();
+  const tableRef = useTemplateRef('table');
+
+  const createTableRow = (data = {} as Partial<RowData>) => ({
+    slave: data.slave || {
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+      port: 0,
+      instance_address: '',
+      cluster_id: 0,
+      master_domain: '',
+    },
+  });
+
+  const defaultData = () => ({
+    tableData: [createTableRow()],
+    backupSource: BackupSourceType.REMOTE,
+    remark: '',
+  });
+
+  const formData = reactive(defaultData());
+  const selected = computed(() => formData.tableData.filter((item) => item.slave.bk_host_id).map((item) => item.slave));
+  const selectedMap = computed(() => Object.fromEntries(selected.value.map((cur) => [cur.instance_address, true])));
+
+  const { run: createTicketRun, loading: isSubmitting } = useCreateTicket<{
+    backup_source: BackupSourceType;
+    infos: {
+      cluster_id: number;
+      slave: {
+        bk_biz_id: number;
+        bk_host_id: number;
+        bk_cloud_id: number;
+        ip: string;
+        port: number;
+      };
+    }[];
+  }>(TicketTypes.TENDBCLUSTER_RESTORE_LOCAL_SLAVE, {
+    onSuccess(ticketId) {
+      router.push({
+        name: TicketTypes.TENDBCLUSTER_RESTORE_SLAVE, // 以新机重建单据为主路由
+        params: {
+          page: 'success',
+        },
+        query: {
+          ticketId,
+        },
+      });
+    },
+  });
+
+  const handleSubmit = async () => {
+    const valid = await tableRef.value!.validate();
+    if (valid) {
+      createTicketRun({
+        details: {
+          backup_source: formData.backupSource,
+          infos: formData.tableData.map((item) => ({
+            cluster_id: item.slave.cluster_id,
+            slave: {
+              bk_biz_id: item.slave.bk_biz_id,
+              bk_host_id: item.slave.bk_host_id,
+              bk_cloud_id: item.slave.bk_cloud_id,
+              ip: item.slave.ip,
+              port: item.slave.port,
+            },
+          })),
+        },
+        remark: formData.remark,
+      });
+    }
+  };
+
+  const handleReset = () => {
+    Object.assign(formData, defaultData());
+  };
+
+  const handleBatchEdit = (list: SelectorHost[]) => {
+    const dataList = list.reduce<RowData[]>((acc, item) => {
+      if (!selectedMap.value[item.instance_address]) {
+        acc.push(
+          createTableRow({
+            slave: {
+              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,
+              instance_address: item.instance_address,
+              cluster_id: item.cluster_id,
+              master_domain: item.master_domain,
+            },
+          }),
+        );
+      }
+      return acc;
+    }, []);
+    formData.tableData = [...(selected.value.length ? formData.tableData : []), ...dataList];
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/local-restore/SlaveInstanceColumn.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/local-restore/SlaveInstanceColumn.vue
new file mode 100644
index 0000000000..78ddf73bc4
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/local-restore/SlaveInstanceColumn.vue
@@ -0,0 +1,184 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    :append-rules="rules"
+    field="slave.instance_address"
+    fixed="left"
+    :label="t('目标从库实例')"
+    :loading="loading"
+    :min-width="150"
+    required>
+    <template #headAppend>
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-host-select"
+        @click="handleShowSelector">
+        <DbIcon type="batch-host-select" />
+      </span>
+    </template>
+    <Input
+      v-model="modelValue.instance_address"
+      :placeholder="t('请输入IP:Port')"
+      @change="handleInputChange" />
+  </Column>
+  <InstanceSelector
+    v-model:is-show="showSelector"
+    :cluster-types="[ClusterTypes.TENDBCLUSTER]"
+    :selected="selectedInstances"
+    :tab-list-config="tabListConfig"
+    @change="handleSelectorChange" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { checkInstance } from '@services/source/dbbase';
+
+  import { ClusterTypes } from '@common/const';
+  import { ipPort } from '@common/regex';
+
+  import { Column, Input } from '@components/editable-table/Index.vue';
+  import InstanceSelector, {
+    type InstanceSelectorValues,
+    type IValue,
+    type PanelListType,
+  } from '@components/instance-selector/Index.vue';
+
+  export type SelectorHost = IValue;
+
+  interface Props {
+    selected: {
+      instance_address: string;
+    }[];
+  }
+
+  interface Emits {
+    (e: 'batch-edit', list: IValue[]): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<{
+    bk_biz_id: number;
+    bk_cloud_id: number;
+    bk_host_id?: number;
+    ip: string;
+    port: number;
+    instance_address: string;
+    cluster_id: number;
+    master_domain: string;
+  }>({
+    default: () => ({
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      ip: '',
+      port: 0,
+      instance_address: '',
+      cluster_id: 0,
+      master_domain: '',
+    }),
+  });
+
+  const { t } = useI18n();
+
+  const tabListConfig = {
+    [ClusterTypes.TENDBCLUSTER]: [
+      {
+        name: t('目标从库'),
+        tableConfig: {
+          firsrColumn: {
+            label: t('Slave 实例'),
+            field: 'instance_address',
+            role: 'remote_slave',
+          },
+        },
+      },
+    ],
+  } as unknown as Record<ClusterTypes, PanelListType>;
+
+  const showSelector = ref(false);
+  const selectedInstances = computed<InstanceSelectorValues<IValue>>(() => ({
+    TendbClusterHost: props.selected.map(
+      (item) =>
+        ({
+          instance_address: item.instance_address,
+        }) as IValue,
+    ),
+  }));
+
+  const rules = [
+    {
+      validator: (value: string) => ipPort.test(value),
+      message: t('格式不符合要求'),
+      trigger: 'change',
+    },
+    {
+      validator: (value: string) => props.selected.filter((item) => item.instance_address === value).length < 2,
+      message: t('目标实例重复'),
+      trigger: 'blur',
+    },
+    {
+      validator: () => Boolean(modelValue.value.bk_host_id),
+      message: t('目标实例不存在'),
+      trigger: 'blur',
+    },
+  ];
+
+  const { run: queryHost, loading } = useRequest(checkInstance, {
+    manual: true,
+    onSuccess: (data) => {
+      modelValue.value.bk_host_id = undefined;
+      if (data.length) {
+        const [currentHost] = data;
+        modelValue.value = {
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          bk_host_id: currentHost.bk_host_id,
+          bk_cloud_id: currentHost.bk_cloud_id,
+          ip: currentHost.ip,
+          port: currentHost.port,
+          instance_address: currentHost.instance_address,
+          cluster_id: currentHost.cluster_id,
+          master_domain: currentHost.master_domain,
+        };
+      }
+    },
+  });
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    if (value) {
+      queryHost({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        instance_addresses: [value],
+      });
+    }
+  };
+
+  const handleSelectorChange = (selected: InstanceSelectorValues<IValue>) => {
+    emits('batch-edit', selected[ClusterTypes.TENDBCLUSTER]);
+  };
+</script>
+<style lang="less" scoped>
+  .batch-host-select {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/restore/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/restore/Index.vue
new file mode 100644
index 0000000000..52438a4e72
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/restore/Index.vue
@@ -0,0 +1,224 @@
+<!--
+ * 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>
+    <BkForm
+      v-model="formData"
+      class="mb-20"
+      form-type="vertical">
+      <EditableTable
+        ref="table"
+        class="mb-20"
+        :model="formData.tableData">
+        <EditableTableRow
+          v-for="(item, index) in formData.tableData"
+          :key="index">
+          <SlaveHostColumnGroup
+            v-model="item.slave"
+            :selected="selected"
+            @batch-edit="handleBatchEdit" />
+          <Column
+            :label="t('同机关联集群')"
+            :min-width="150">
+            <Block
+              v-model="item.slave.master_domain"
+              :placeholder="t('自动生成')" />
+          </Column>
+          <Column
+            :label="t('当前资源规格')"
+            :min-width="150">
+            <Block
+              v-model="item.slave.spec_name"
+              :placeholder="t('自动生成')" />
+          </Column>
+          <NewSlaveHostColumn
+            v-model="item.newSlave"
+            :slave="item.slave"
+            @batch-edit="handleBatchEdit" />
+          <OperationColumn
+            v-model:table-data="formData.tableData"
+            :create-row-method="createTableRow" />
+        </EditableTableRow>
+      </EditableTable>
+      <BackupSource v-model="formData.backupSource" />
+      <TicketRemark v-model="formData.remark" />
+    </BkForm>
+    <template #action>
+      <BkButton
+        class="mr-8 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 lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+
+  import { BackupSourceType } from '@services/types';
+
+  import { useCreateTicket } from '@hooks';
+
+  import { TicketTypes } from '@common/const';
+
+  import EditableTable, { Block, Column, Row as EditableTableRow } from '@components/editable-table/Index.vue';
+
+  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
+  import BackupSource from '@views/db-manage/common/toolbox-field/form-item/backup-source/Index.vue';
+  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+
+  import NewSlaveHostColumn from './NewSlaveHostColumn.vue';
+  import SlaveHostColumnGroup, { type SelectorHost } from './SlaveHostColumnGroup.vue';
+
+  interface RowData {
+    slave: {
+      bk_biz_id: number;
+      bk_cloud_id: number;
+      bk_host_id: number;
+      ip: string;
+      related_instances: string[];
+      cluster_id: number;
+      master_domain: string;
+      spec_id: number;
+      spec_name: string;
+      count: number;
+    };
+    newSlave: string;
+  }
+
+  const { t } = useI18n();
+  const tableRef = useTemplateRef('table');
+
+  const createTableRow = (data = {} as Partial<RowData>) => ({
+    slave: data.slave || {
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+      related_instances: [],
+      cluster_id: 0,
+      master_domain: '',
+      spec_id: 0,
+      spec_name: '',
+      count: 0,
+    },
+    newSlave: 'resource_pool',
+  });
+
+  const defaultData = () => ({
+    tableData: [createTableRow()],
+    backupSource: BackupSourceType.REMOTE,
+    remark: '',
+  });
+
+  const formData = reactive(defaultData());
+  const selected = computed(() => formData.tableData.filter((item) => item.slave.bk_host_id).map((item) => item.slave));
+  const selectedMap = computed(() => Object.fromEntries(selected.value.map((cur) => [cur.ip, true])));
+
+  const { run: createTicketRun, loading: isSubmitting } = useCreateTicket<{
+    ip_source: 'resource_pool';
+    backup_source: BackupSourceType;
+    infos: {
+      cluster_id: number;
+      old_nodes: {
+        old_slave: {
+          bk_biz_id: number;
+          bk_host_id: number;
+          bk_cloud_id: number;
+          ip: string;
+        }[];
+      };
+      resource_spec: {
+        new_slave: {
+          count: number;
+          spec_id: number;
+        };
+      };
+    }[];
+  }>(TicketTypes.TENDBCLUSTER_RESTORE_SLAVE);
+
+  const handleSubmit = async () => {
+    const valid = await tableRef.value!.validate();
+    if (valid) {
+      createTicketRun({
+        details: {
+          ip_source: 'resource_pool',
+          backup_source: formData.backupSource,
+          infos: formData.tableData.map((item) => ({
+            cluster_id: item.slave.cluster_id,
+            old_nodes: {
+              old_slave: [
+                {
+                  bk_biz_id: item.slave.bk_biz_id,
+                  bk_host_id: item.slave.bk_host_id,
+                  bk_cloud_id: item.slave.bk_cloud_id,
+                  ip: item.slave.ip,
+                },
+              ],
+            },
+            resource_spec: {
+              new_slave: {
+                count: item.slave.count,
+                spec_id: item.slave.spec_id,
+              },
+            },
+          })),
+        },
+        remark: formData.remark,
+      });
+    }
+  };
+
+  const handleReset = () => {
+    Object.assign(formData, defaultData());
+  };
+
+  const handleBatchEdit = (list: SelectorHost[]) => {
+    const dataList = list.reduce<RowData[]>((acc, item) => {
+      if (!selectedMap.value[item.ip]) {
+        acc.push(
+          createTableRow({
+            slave: {
+              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,
+              related_instances: item.related_instances.map((item) => item.instance),
+              cluster_id: item.cluster_id,
+              master_domain: item.master_domain,
+              spec_id: item.spec_config?.id ?? 0,
+              spec_name: item.spec_config?.name ?? '',
+              count: item.spec_config?.count ?? 0,
+            },
+          }),
+        );
+      }
+      return acc;
+    }, []);
+    formData.tableData = [...(selected.value.length ? formData.tableData : []), ...dataList];
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/restore/NewSlaveHostColumn.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/restore/NewSlaveHostColumn.vue
new file mode 100644
index 0000000000..d92b2b9490
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/restore/NewSlaveHostColumn.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>
+  <Column
+    field="newSlave"
+    :label="t('新从库主机')"
+    :min-width="150"
+    required>
+    <div class="table-cell">
+      <TableEditSelect
+        v-model="modelValue"
+        :disabled="!slave.spec_id"
+        :input-search="false"
+        :list="optionList"
+        :placeholder="t('请选择')">
+        <template #option="{ optionItem }">
+          <div class="spec-display">
+            {{ optionItem.name }}
+            <span class="spec-display-count">{{ countMap[optionItem.id] }}</span>
+          </div>
+        </template>
+      </TableEditSelect>
+    </div>
+  </Column>
+</template>
+
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { getSpecResourceCount } from '@services/source/dbresourceResource';
+
+  import { Column } from '@components/editable-table/Index.vue';
+
+  import TableEditSelect from '@views/db-manage/tendb-cluster/common/edit/SelectInput.vue';
+
+  interface Props {
+    slave: {
+      spec_id: number;
+      bk_cloud_id: number;
+    };
+  }
+
+  const props = defineProps<Props>();
+
+  const modelValue = defineModel<string>();
+
+  const { t } = useI18n();
+
+  const optionList = [
+    {
+      id: 'resource_pool',
+      name: t('资源池自动匹配'),
+      tooltips: t('当前为资源池自动匹配，切换类型将会清空并需重新选择'),
+    },
+  ];
+
+  const countMap = reactive<Record<string, number>>({
+    resource_pool: 0,
+    // resource_pool_manual: 0,
+    // manual_input: 0,
+  });
+
+  const { run: fetchSpecResourceCount } = useRequest(getSpecResourceCount, {
+    manual: true,
+    onSuccess(countResult) {
+      countMap.resource_pool = countResult[props.slave.spec_id] ?? 0;
+    },
+  });
+
+  watch(
+    () => props.slave,
+    () => {
+      if (props.slave.spec_id) {
+        fetchSpecResourceCount({
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          bk_cloud_id: props.slave.bk_cloud_id,
+          spec_ids: [props.slave.spec_id],
+        });
+      }
+    },
+  );
+</script>
+
+<style lang="less" scoped>
+  .table-cell {
+    flex: 1;
+    padding: 1px;
+  }
+</style>
+
+<style lang="less">
+  .spec-display {
+    display: flex;
+    width: 100%;
+    flex: 1;
+    align-items: center;
+    justify-content: space-between;
+
+    .spec-display-count {
+      height: 16px;
+      min-width: 20px;
+      font-size: 12px;
+      line-height: 16px;
+      color: #979ba5;
+      text-align: center;
+      background-color: #f0f1f5;
+      border-radius: 2px;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/restore/SlaveHostColumnGroup.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/restore/SlaveHostColumnGroup.vue
new file mode 100644
index 0000000000..d69c7a9564
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/restore/SlaveHostColumnGroup.vue
@@ -0,0 +1,224 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    :append-rules="rules"
+    field="slave.ip"
+    fixed="left"
+    :label="t('目标从库主机')"
+    :loading="loading"
+    :min-width="150"
+    required>
+    <template #headAppend>
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-host-select"
+        @click="handleShowSelector">
+        <DbIcon type="batch-host-select" />
+      </span>
+    </template>
+    <Input
+      v-model="modelValue.ip"
+      :placeholder="t('请输入IP')"
+      @change="handleInputChange" />
+  </Column>
+  <Column
+    :label="t('从库主机关联实例')"
+    :loading="loading"
+    :min-width="150">
+    <div
+      v-if="modelValue.related_instances.length"
+      class="table-cell">
+      <p
+        v-for="item in modelValue.related_instances"
+        :key="item">
+        {{ item }}
+      </p>
+    </div>
+    <Block
+      v-else
+      :placeholder="t('自动生成')" />
+  </Column>
+  <InstanceSelector
+    v-model:is-show="showSelector"
+    :cluster-types="['TendbClusterHost']"
+    :selected="selectedInstances"
+    :tab-list-config="tabListConfig"
+    @change="handleSelectorChange" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { checkInstance } from '@services/source/dbbase';
+
+  import type { ClusterTypes } from '@common/const';
+  import { ipv4 } from '@common/regex';
+
+  import { Block, Column, Input } from '@components/editable-table/Index.vue';
+  import InstanceSelector, {
+    type InstanceSelectorValues,
+    type IValue,
+    type PanelListType,
+  } from '@components/instance-selector/Index.vue';
+
+  export type SelectorHost = IValue;
+
+  interface Props {
+    selected: {
+      ip: string;
+    }[];
+  }
+
+  interface Emits {
+    (e: 'batch-edit', list: IValue[]): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<{
+    bk_biz_id: number;
+    bk_cloud_id: number;
+    bk_host_id?: number;
+    ip: string;
+    related_instances: string[];
+    cluster_id: number;
+    master_domain: string;
+    spec_id: number;
+    spec_name: string;
+    count: number;
+  }>({
+    default: () => ({
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      ip: '',
+      related_instances: [],
+      cluster_id: 0,
+      master_domain: '',
+      spec_id: 0,
+      spec_name: '',
+      count: 0,
+    }),
+  });
+
+  const { t } = useI18n();
+
+  const tabListConfig = {
+    TendbClusterHost: [
+      {
+        name: t('目标从库'),
+        tableConfig: {
+          firsrColumn: {
+            label: t('Slave 主机'),
+            field: 'ip',
+            role: 'remote_slave',
+          },
+        },
+      },
+      {
+        tableConfig: {
+          firsrColumn: {
+            label: t('Slave 主机'),
+            field: 'ip',
+            role: 'remote_slave',
+          },
+        },
+      },
+    ],
+  } as unknown as Record<ClusterTypes, PanelListType>;
+
+  const showSelector = ref(false);
+  const selectedInstances = computed<InstanceSelectorValues<IValue>>(() => ({
+    TendbClusterHost: props.selected.map(
+      (item) =>
+        ({
+          ip: item.ip,
+        }) as IValue,
+    ),
+  }));
+
+  const rules = [
+    {
+      validator: (value: string) => ipv4.test(value),
+      message: t('IP 格式不符合IPv4标准'),
+      trigger: 'change',
+    },
+    {
+      validator: (value: string) => props.selected.filter((item) => item.ip === value).length < 2,
+      message: t('目标主机重复'),
+      trigger: 'blur',
+    },
+    {
+      validator: () => Boolean(modelValue.value.bk_host_id),
+      message: t('目标主机不存在'),
+      trigger: 'blur',
+    },
+  ];
+
+  const { run: queryHost, loading } = useRequest(checkInstance, {
+    manual: true,
+    onSuccess: (data) => {
+      modelValue.value.bk_host_id = undefined;
+      if (data.length) {
+        const [currentHost] = data;
+        const relatedInstances: string[] = [];
+        data.forEach((item) => {
+          relatedInstances.push(item.instance_address);
+        });
+        modelValue.value = {
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          bk_host_id: currentHost.bk_host_id,
+          bk_cloud_id: currentHost.bk_cloud_id,
+          ip: currentHost.ip,
+          related_instances: relatedInstances,
+          cluster_id: currentHost.cluster_id,
+          master_domain: currentHost.master_domain,
+          spec_id: currentHost.spec_config.id,
+          spec_name: currentHost.spec_config.name,
+          count: currentHost.spec_config.count,
+        };
+      }
+    },
+  });
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    if (value) {
+      queryHost({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        instance_addresses: [value],
+      });
+    }
+  };
+
+  const handleSelectorChange = (selected: InstanceSelectorValues<IValue>) => {
+    emits('batch-edit', selected.TendbClusterHost);
+  };
+</script>
+<style lang="less" scoped>
+  .batch-host-select {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+
+  .table-cell {
+    padding: 0 8px;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_MNT_APPLY/Create.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_MNT_APPLY/Create.vue
new file mode 100644
index 0000000000..27c18537f6
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_MNT_APPLY/Create.vue
@@ -0,0 +1,191 @@
+<!--
+ * 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>
+    <BkAlert
+      class="mb-20"
+      closable
+      :title="t('添加运维节点：在原集群上增加运维节点实例来实现额外的数据访问，在运维节点上的操作不会影响原集群')" />
+    <BkForm
+      v-model="formData"
+      class="mb-20"
+      form-type="vertical">
+      <EditableTable
+        ref="table"
+        class="mb-20"
+        :model="formData.tableData">
+        <EditableTableRow
+          v-for="(item, index) in formData.tableData"
+          :key="index">
+          <ClusterColumn
+            v-model="item.cluster"
+            :selected="selected"
+            @batch-edit="handleBatchEdit" />
+          <Column
+            field="cluster.bk_cloud_name"
+            :label="t('所属管控区域')"
+            :min-width="300">
+            <Block
+              v-model="item.cluster.bk_cloud_name"
+              :placeholder="t('自动生成')" />
+          </Column>
+          <MultipleHostColumn
+            v-model="item.host"
+            field="host"
+            :label="t('运维节点 IP')" />
+          <OperationColumn
+            v-model:table-data="formData.tableData"
+            :create-row-method="createTableRow" />
+        </EditableTableRow>
+      </EditableTable>
+      <TicketRemark v-model="formData.remark" />
+    </BkForm>
+    <template #action>
+      <BkButton
+        class="mr-8 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 lang="ts" setup>
+  import { reactive, useTemplateRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import TendbClusterModel from '@services/model/tendbcluster/tendbcluster';
+
+  import { useCreateTicket } from '@hooks';
+
+  import { TicketTypes } from '@common/const';
+
+  import EditableTable, { Block, Column, Row as EditableTableRow } from '@components/editable-table/Index.vue';
+
+  import MultipleHostColumn from '@views/db-manage/common/toolbox-field/column/multiple-host-column/Index.vue';
+  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
+  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+
+  import ClusterColumn from './components/ClusterColumn.vue';
+
+  interface RowData {
+    cluster: {
+      id: number;
+      master_domain: string;
+      bk_cloud_id: number;
+      bk_cloud_name: string;
+    };
+    host: {
+      bk_cloud_id: number;
+      bk_host_id: number;
+      ip: string;
+    }[];
+  }
+
+  const { t } = useI18n();
+  const tableRef = useTemplateRef('table');
+
+  const createTableRow = (data = {} as Partial<RowData>) => ({
+    cluster: data.cluster || {
+      id: 0,
+      master_domain: '',
+      bk_cloud_id: 0,
+      bk_cloud_name: '',
+    },
+    host: data.host || [],
+  });
+
+  const defaultData = () => ({
+    tableData: [createTableRow()],
+    remark: '',
+  });
+
+  const formData = reactive(defaultData());
+
+  const selected = computed(() => formData.tableData.filter((item) => item.cluster.id).map((item) => item.cluster));
+  const selectedMap = computed(() => Object.fromEntries(selected.value.map((cur) => [cur.master_domain, true])));
+
+  const { run: createTicketRun, loading: isSubmitting } = useCreateTicket<{
+    infos: {
+      bk_cloud_id: number;
+      cluster_id: number;
+      resource_spec: {
+        spider_ip_list: {
+          spec_id: number;
+          hosts: {
+            bk_cloud_id: number;
+            bk_host_id: number;
+            ip: string;
+          }[];
+        };
+      };
+    }[];
+  }>(TicketTypes.TENDBCLUSTER_SPIDER_MNT_APPLY);
+
+  const handleSubmit = async () => {
+    const result = await tableRef.value!.validate();
+    if (!result) {
+      return;
+    }
+    createTicketRun({
+      details: {
+        infos: formData.tableData.map((item) => ({
+          bk_cloud_id: item.cluster.bk_cloud_id,
+          cluster_id: item.cluster.id,
+          resource_spec: {
+            spider_ip_list: {
+              spec_id: 0,
+              hosts: item.host,
+            },
+          },
+        })),
+      },
+      remark: formData.remark,
+    });
+  };
+
+  const handleReset = () => {
+    Object.assign(formData, defaultData());
+  };
+
+  const handleBatchEdit = (list: TendbClusterModel[]) => {
+    const dataList = list.reduce<RowData[]>((acc, item) => {
+      if (!selectedMap.value[item.master_domain]) {
+        acc.push(
+          createTableRow({
+            cluster: {
+              id: item.id,
+              master_domain: item.master_domain,
+              bk_cloud_id: item.bk_cloud_id,
+              bk_cloud_name: item.bk_cloud_name,
+            },
+          }),
+        );
+      }
+      return acc;
+    }, []);
+    formData.tableData = [...(selected.value.length ? formData.tableData : []), ...dataList];
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_MNT_APPLY/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_MNT_APPLY/Index.vue
new file mode 100644
index 0000000000..7d5a04e740
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_MNT_APPLY/Index.vue
@@ -0,0 +1,32 @@
+<!--
+ * 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="components[page]" />
+</template>
+<script setup lang="ts">
+  import { useRoute } from 'vue-router';
+
+  import Page2 from '@views/db-manage/common/create-ticket-success/Index.vue';
+
+  import Page1 from './Create.vue';
+
+  const route = useRoute();
+
+  const components = {
+    create: Page1,
+    success: Page2,
+  };
+
+  const page = computed(() => (route.params.page as keyof typeof components) || 'create');
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_MNT_APPLY/components/ClusterColumn.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_MNT_APPLY/components/ClusterColumn.vue
new file mode 100644
index 0000000000..509a47ab46
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_MNT_APPLY/components/ClusterColumn.vue
@@ -0,0 +1,156 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    :append-rules="rules"
+    field="cluster.master_domain"
+    fixed="left"
+    :label="t('目标集群')"
+    :loading="loading"
+    :min-width="300"
+    required>
+    <template #headAppend>
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-host-select"
+        @click="handleShowSelector">
+        <DbIcon type="batch-host-select" />
+      </span>
+    </template>
+    <Input
+      v-model="modelValue.master_domain"
+      :placeholder="t('请输入集群域名')"
+      @change="handleInputChange" />
+  </Column>
+  <ClusterSelector
+    v-model:is-show="showSelector"
+    :cluster-types="[ClusterTypes.TENDBCLUSTER]"
+    :selected="selectedClusters"
+    @change="handleSelectorChange" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import TendbClusterModel from '@services/model/tendbcluster/tendbcluster';
+  import { filterClusters } from '@services/source/dbbase';
+
+  import { ClusterTypes } from '@common/const';
+  import { domainRegex } from '@common/regex';
+
+  import ClusterSelector from '@components/cluster-selector/Index.vue';
+  import { Column, Input } from '@components/editable-table/Index.vue';
+
+  interface Props {
+    selected: {
+      id: number;
+      master_domain: string;
+    }[];
+  }
+
+  interface Emits {
+    (e: 'batch-edit', list: TendbClusterModel[]): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<{
+    id?: number;
+    master_domain: string;
+    bk_cloud_id: number;
+    bk_cloud_name: string;
+  }>({
+    default: () => ({
+      master_domain: '',
+    }),
+  });
+
+  const { t } = useI18n();
+
+  const showSelector = ref(false);
+  const selectedClusters = computed<Record<string, TendbClusterModel[]>>(() => ({
+    [ClusterTypes.TENDBCLUSTER]: props.selected.map(
+      (item) =>
+        ({
+          id: item.id,
+          master_domain: item.master_domain,
+        }) as TendbClusterModel,
+    ),
+  }));
+
+  const rules = [
+    {
+      validator: (value: string) => domainRegex.test(value),
+      message: t('集群域名格式不正确'),
+      trigger: 'change',
+    },
+    {
+      validator: (value: string) => props.selected.filter((item) => item.master_domain === value).length < 2,
+      message: t('目标集群重复'),
+      trigger: 'blur',
+    },
+    {
+      validator: () => {
+        if (!modelValue.value.master_domain) {
+          return true;
+        }
+        return Boolean(modelValue.value.id);
+      },
+      message: t('目标集群不存在'),
+      trigger: 'blur',
+    },
+  ];
+
+  const { run: queryCluster, loading } = useRequest(filterClusters<TendbClusterModel>, {
+    manual: true,
+    onSuccess: (data) => {
+      modelValue.value.id = undefined;
+      if (data.length) {
+        const [currentCluster] = data;
+        modelValue.value = {
+          id: currentCluster.id,
+          master_domain: currentCluster.master_domain,
+          bk_cloud_id: currentCluster.bk_cloud_id,
+          bk_cloud_name: currentCluster.bk_cloud_name,
+        };
+      }
+    },
+  });
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    if (value) {
+      queryCluster({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        exact_domain: value,
+      });
+    }
+  };
+
+  const handleSelectorChange = (selected: Record<string, TendbClusterModel[]>) => {
+    emits('batch-edit', selected[ClusterTypes.TENDBCLUSTER]);
+  };
+</script>
+<style lang="less" scoped>
+  .batch-host-select {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_REDUCE_NODES/Create.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_REDUCE_NODES/Create.vue
new file mode 100644
index 0000000000..b9f0187c4b
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_REDUCE_NODES/Create.vue
@@ -0,0 +1,266 @@
+<!--
+ * 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>
+    <BkAlert
+      class="mb-20"
+      closable
+      :title="t('缩容接入层：减加集群的Proxy数量')" />
+    <BkForm
+      v-model="formData"
+      class="mb-20"
+      form-type="vertical">
+      <EditableTable
+        ref="table"
+        class="mb-20"
+        :model="formData.tableData">
+        <EditableTableRow
+          v-for="(item, index) in formData.tableData"
+          :key="index">
+          <ClusterColumn
+            v-model="item.cluster"
+            :selected="selected"
+            @batch-edit="handleBatchEdit" />
+          <Column
+            field="cluster.role"
+            :label="t('缩容节点类型')"
+            :min-width="200"
+            required>
+            <Select
+              v-model="item.cluster.role"
+              :input-search="false"
+              :list="nodeTypeOptions" />
+          </Column>
+          <HybridHostColumn
+            v-model="item.host.type"
+            field="host.type"
+            :label="t('主机选择方式')"
+            :min-width="200"
+            :spec-ids="getSpecIds(item)"
+            @change="(list) => handleSelectHost(list, item)" />
+          <Column
+            field="count"
+            :label="t('缩容数量（台）')"
+            :min-width="200">
+            <div
+              v-bk-tooltips="{
+                content: t('手动选择主机不需要设置缩容数量'),
+                disabled: item.host.type !== HostSelectType.MANUAL,
+              }"
+              style="flex: 1">
+              <Input
+                v-model="item.count"
+                :disabled="item.host.type === HostSelectType.MANUAL"
+                :min="0"
+                type="number" />
+            </div>
+          </Column>
+          <OperationColumn
+            v-model:table-data="formData.tableData"
+            :create-row-method="createTableRow" />
+        </EditableTableRow>
+      </EditableTable>
+      <IgnoreBiz
+        v-model="formData.isSafe"
+        v-bk-tooltips="t('如忽略_有连接的情况下也会执行')" />
+      <TicketRemark v-model="formData.remark" />
+    </BkForm>
+    <template #action>
+      <BkButton
+        class="mr-8 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 lang="ts" setup>
+  import { reactive, useTemplateRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import TendbClusterModel from '@services/model/tendbcluster/tendbcluster';
+
+  import { useCreateTicket } from '@hooks';
+
+  import { TicketTypes } from '@common/const';
+
+  import EditableTable, { Column, Input, Row as EditableTableRow, Select } from '@components/editable-table/Index.vue';
+
+  import HybridHostColumn, {
+    type HostInfo,
+    HostSelectType,
+  } from '@views/db-manage/common/toolbox-field/column/hybrid-host-column/Index.vue';
+  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
+  import IgnoreBiz from '@views/db-manage/common/toolbox-field/form-item/ignore-biz/Index.vue';
+  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+
+  import ClusterColumn from './components/ClusterColumn.vue';
+
+  interface RowData {
+    cluster: {
+      id: number;
+      master_domain: string;
+      role: string;
+      master_spec_ids: number[];
+      slave_spec_ids: number[];
+    };
+    host: {
+      type: string;
+      list: {
+        bk_biz_id: number;
+        bk_cloud_id: number;
+        bk_host_id: number;
+        ip: string;
+      }[];
+    };
+    count: string;
+  }
+
+  const { t } = useI18n();
+  const tableRef = useTemplateRef('table');
+
+  const createTableRow = (data = {} as Partial<RowData>) => ({
+    cluster: data.cluster || {
+      id: 0,
+      master_domain: '',
+      role: '',
+      master_spec_ids: [],
+      slave_spec_ids: [],
+    },
+    host: data.host || {
+      type: '',
+      list: [],
+    },
+    count: data.count || '',
+  });
+
+  const defaultData = () => ({
+    tableData: [createTableRow()],
+    isSafe: false,
+    remark: '',
+  });
+
+  const formData = reactive(defaultData());
+  const selected = computed(() => formData.tableData.filter((item) => item.cluster.id).map((item) => item.cluster));
+  const selectedMap = computed(() => Object.fromEntries(selected.value.map((cur) => [cur.master_domain, true])));
+
+  const nodeTypeOptions = [
+    {
+      value: 'spider_master',
+      label: 'Master',
+    },
+    {
+      value: 'spider_slave',
+      label: 'Slave',
+    },
+  ];
+
+  interface TicketDetail {
+    is_safe: boolean;
+    infos: {
+      cluster_id: number;
+      reduce_spider_role: string;
+      spider_reduced_to_count?: number;
+      old_nodes?: {
+        spider_reduced_hosts: {
+          bk_biz_id: number;
+          bk_cloud_id: number;
+          bk_host_id: number;
+          ip: string;
+        }[];
+      };
+    }[];
+  }
+
+  const { run: createTicketRun, loading: isSubmitting } = useCreateTicket<TicketDetail>(
+    TicketTypes.TENDBCLUSTER_SPIDER_REDUCE_NODES,
+  );
+
+  const handleSubmit = async () => {
+    const result = await tableRef.value!.validate();
+    if (!result) {
+      return;
+    }
+    createTicketRun({
+      details: {
+        is_safe: formData.isSafe,
+        infos: formData.tableData.map((item) => {
+          const info: TicketDetail['infos'][0] = {
+            cluster_id: item.cluster.id,
+            reduce_spider_role: item.cluster.role,
+          };
+
+          if (item.host.list.length) {
+            info.old_nodes = { spider_reduced_hosts: item.host.list };
+          } else if (item.count) {
+            info.spider_reduced_to_count = Number(item.count);
+          }
+
+          return info;
+        }),
+      },
+      remark: formData.remark,
+    });
+  };
+
+  const handleReset = () => {
+    Object.assign(formData, defaultData());
+  };
+
+  const handleBatchEdit = (list: TendbClusterModel[]) => {
+    const dataList = list.reduce<RowData[]>((acc, item) => {
+      if (!selectedMap.value[item.master_domain]) {
+        acc.push(
+          createTableRow({
+            cluster: {
+              id: item.id,
+              master_domain: item.master_domain,
+              role: '',
+              master_spec_ids: item.spider_master.map((item) => item.spec_config?.id),
+              slave_spec_ids: item.spider_slave.map((item) => item.spec_config?.id),
+            },
+          }),
+        );
+      }
+      return acc;
+    }, []);
+    formData.tableData = [...(selected.value.length ? formData.tableData : []), ...dataList];
+  };
+
+  const handleSelectHost = (list: HostInfo[], row: RowData) => {
+    row.host.list = list;
+  };
+
+  const getSpecIds = (row: RowData) => {
+    if (row.cluster.role === 'spider_master') {
+      return row.cluster.master_spec_ids;
+    }
+    if (row.cluster.role === 'spider_slave') {
+      return row.cluster.slave_spec_ids;
+    }
+    return [];
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_REDUCE_NODES/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_REDUCE_NODES/Index.vue
new file mode 100644
index 0000000000..7d5a04e740
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_REDUCE_NODES/Index.vue
@@ -0,0 +1,32 @@
+<!--
+ * 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="components[page]" />
+</template>
+<script setup lang="ts">
+  import { useRoute } from 'vue-router';
+
+  import Page2 from '@views/db-manage/common/create-ticket-success/Index.vue';
+
+  import Page1 from './Create.vue';
+
+  const route = useRoute();
+
+  const components = {
+    create: Page1,
+    success: Page2,
+  };
+
+  const page = computed(() => (route.params.page as keyof typeof components) || 'create');
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_REDUCE_NODES/components/ClusterColumn.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_REDUCE_NODES/components/ClusterColumn.vue
new file mode 100644
index 0000000000..6d8f3a67d0
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_REDUCE_NODES/components/ClusterColumn.vue
@@ -0,0 +1,172 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    :append-rules="rules"
+    field="cluster.master_domain"
+    fixed="left"
+    :label="t('目标集群')"
+    :loading="loading"
+    :min-width="200"
+    required
+    :validate-delay="300">
+    <template #headAppend>
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-host-select"
+        @click="handleShowSelector">
+        <DbIcon type="batch-host-select" />
+      </span>
+    </template>
+    <Input
+      v-model="modelValue.master_domain"
+      :placeholder="t('请输入集群域名')"
+      @change="handleInputChange" />
+  </Column>
+  <ClusterSelector
+    v-model:is-show="showSelector"
+    :cluster-types="[ClusterTypes.TENDBCLUSTER]"
+    :selected="selectedClusters"
+    support-offline-data
+    :tab-list-config="tabListConfig"
+    @change="handleSelectorChange" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import TendbClusterModel from '@services/model/tendbcluster/tendbcluster';
+  import { filterClusters } from '@services/source/dbbase';
+
+  import { ClusterTypes } from '@common/const';
+  import { domainRegex } from '@common/regex';
+
+  import ClusterSelector, { type TabConfig } from '@components/cluster-selector/Index.vue';
+  import { Column, Input } from '@components/editable-table/Index.vue';
+
+  interface Props {
+    selected: {
+      id: number;
+      master_domain: string;
+    }[];
+  }
+
+  interface Emits {
+    (e: 'batch-edit', list: TendbClusterModel[]): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<{
+    id?: number;
+    master_domain: string;
+    role: string;
+    master_spec_ids: number[];
+    slave_spec_ids: number[];
+  }>({
+    default: () => ({
+      master_domain: '',
+    }),
+  });
+
+  const { t } = useI18n();
+
+  const showSelector = ref(false);
+  const selectedClusters = computed<Record<string, TendbClusterModel[]>>(() => ({
+    [ClusterTypes.TENDBCLUSTER]: props.selected.map(
+      (item) =>
+        ({
+          id: item.id,
+          master_domain: item.master_domain,
+        }) as TendbClusterModel,
+    ),
+  }));
+
+  const tabListConfig = {
+    [ClusterTypes.TENDBCLUSTER]: {
+      disabledRowConfig: [
+        {
+          handler: (data: TendbClusterModel) => data.spider_master.length <= 2 && data.spider_slave.length <= 1,
+          tip: t('Master 至少保留 2 台 ，Slave 至少 保留 1台'),
+        },
+      ],
+    },
+  } as Record<ClusterTypes, TabConfig>;
+
+  const rules = [
+    {
+      validator: (value: string) => domainRegex.test(value),
+      message: t('集群域名格式不正确'),
+      trigger: 'change',
+    },
+    {
+      validator: (value: string) => props.selected.filter((item) => item.master_domain === value).length < 2,
+      message: t('目标集群重复'),
+      trigger: 'blur',
+    },
+    {
+      validator: () => {
+        if (!modelValue.value.master_domain) {
+          return true;
+        }
+        return Boolean(modelValue.value.id);
+      },
+      message: t('目标集群不存在'),
+      trigger: 'blur',
+    },
+  ];
+
+  const { run: queryCluster, loading } = useRequest(filterClusters<TendbClusterModel>, {
+    manual: true,
+    onSuccess: (data) => {
+      modelValue.value.id = undefined;
+      if (data.length) {
+        const [currentCluster] = data;
+        modelValue.value = {
+          id: currentCluster.id,
+          master_domain: currentCluster.master_domain,
+          role: '',
+          master_spec_ids: currentCluster.spider_master.map((item) => item.spec_config.id),
+          slave_spec_ids: currentCluster.spider_slave.map((item) => item.spec_config.id),
+        };
+      }
+    },
+  });
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    if (value) {
+      queryCluster({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        exact_domain: value,
+      });
+    }
+  };
+
+  const handleSelectorChange = (selected: Record<string, TendbClusterModel[]>) => {
+    emits('batch-edit', selected[ClusterTypes.TENDBCLUSTER]);
+  };
+</script>
+<style lang="less" scoped>
+  .batch-host-select {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/common/edit/SelectInput.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/common/edit/SelectInput.vue
index ba3ddf31bf..3ed6ffd58d 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/common/edit/SelectInput.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/common/edit/SelectInput.vue
@@ -426,12 +426,12 @@
     display: flex;
     width: 100%;
     height: 42px;
-    cursor: pointer;
-    background: #fff;
-    transition: all 0.15s;
     overflow: hidden;
     color: #63656e;
+    cursor: pointer;
+    background: #fff;
     border: 1px solid transparent;
+    transition: all 0.15s;
     align-items: center;
 
     &:hover {
@@ -442,6 +442,7 @@
     &.is-focused {
       z-index: 99;
       border: 1px solid #3a84ff;
+
       .focused-flag {
         transform: rotateZ(-90deg);
       }
@@ -475,6 +476,7 @@
 
     &.is-error {
       background: rgb(255 221 221 / 20%);
+
       .inner-input {
         background-color: #fff1f1;
       }
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list/components/list/Index.vue
index b52171309f..84645d65a8 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list/components/list/Index.vue
@@ -1306,12 +1306,14 @@
             infos: [
               {
                 cluster_id: data.id,
-                spider_ip_list: data.spider_mnt
+                old_nodes: {
+                  spider_ip_list: data.spider_mnt
                   .filter(item => removeMNTInstanceIds.value.includes(item.bk_instance_id))
                   .map(item => ({
                     ip: item.ip,
                     bk_cloud_id: item.bk_cloud_id,
                   })),
+                }
               },
             ],
           },
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/routes.ts b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/routes.ts
index bfa3f19698..65a90303bf 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/routes.ts
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/routes.ts
@@ -18,12 +18,14 @@ import FunctionControllModel, {
   type MySQLFunctions,
 } from '@services/model/function-controller/functionController';
 
-import { AccountTypes } from '@common/const';
+import { AccountTypes, DBTypes, TicketTypes } from '@common/const';
 
-import { checkDbConsole } from '@utils';
+import { checkDbConsole, createToolboxRoute } from '@utils';
 
 import { t } from '@locales/index';
 
+const { createRouteItem } = createToolboxRoute(DBTypes.TENDBCLUSTER);
+
 const spiderSqlExecuteRoute = {
   path: 'sql-execute/:step?',
   name: 'spiderSqlExecute',
@@ -78,14 +80,15 @@ const spiderProxyScaleUpRoute = {
   component: () => import('@views/db-manage/tendb-cluster/proxy-scale-up/Index.vue'),
 };
 
-const spiderProxyScaleDownRoute = {
-  name: 'SpiderProxyScaleDown',
-  path: 'proxy-scale-down/:page?',
-  meta: {
-    navName: t('缩容接入层'),
-  },
-  component: () => import('@views/db-manage/tendb-cluster/proxy-scale-down/Index.vue'),
-};
+// const spiderProxyScaleDownRoute = {
+//   name: 'SpiderProxyScaleDown',
+//   path: 'proxy-scale-down/:page?',
+//   meta: {
+//     navName: t('缩容接入层'),
+//   },
+//   component: () => import('@views/db-manage/tendb-cluster/proxy-scale-down/Index.vue'),
+// };
+const spiderProxyScaleDownRoute = createRouteItem(TicketTypes.TENDBCLUSTER_SPIDER_REDUCE_NODES, t('缩容接入层'));
 
 const spiderProxySlaveApplyRoute = {
   name: 'SpiderProxySlaveApply',
@@ -96,14 +99,7 @@ const spiderProxySlaveApplyRoute = {
   component: () => import('@views/db-manage/tendb-cluster/proxy-slave-apply/Index.vue'),
 };
 
-const spiderAddMntRoute = {
-  path: 'add-mnt/:page?',
-  name: 'spiderAddMnt',
-  meta: {
-    navName: t('添加运维节点'),
-  },
-  component: () => import('@views/db-manage/tendb-cluster/add-mnt/Index.vue'),
-};
+const spiderAddMntRoute = createRouteItem(TicketTypes.TENDBCLUSTER_SPIDER_MNT_APPLY, t('添加运维节点'));
 
 const spiderDbTableBackupRoute = {
   path: 'db-table-backup/:page?',
@@ -195,25 +191,28 @@ const spiderOpenareaTemplateRoute = {
   component: () => import('@views/db-manage/tendb-cluster/openarea-template/Index.vue'),
 };
 
-const spiderMasterSlaveCloneRoute = {
-  path: 'master-slave-clone/:page?',
-  name: 'spiderMasterSlaveClone',
-  meta: {
-    navName: t('迁移主从'),
-    activeMenu: 'spiderToolbox',
-  },
-  component: () => import('@views/db-manage/tendb-cluster/master-slave-clone/Index.vue'),
-};
-
-const spiderSlaveRebuildRoute = {
-  path: 'slave-rebuild/:page?',
-  name: 'spiderSlaveRebuild',
-  meta: {
-    navName: t('重建从库'),
-    activeMenu: 'spiderToolbox',
-  },
-  component: () => import('@views/db-manage/tendb-cluster/slave-rebuild/Index.vue'),
-};
+// const spiderMasterSlaveCloneRoute = {
+//   path: 'master-slave-clone/:page?',
+//   name: 'spiderMasterSlaveClone',
+//   meta: {
+//     navName: t('迁移主从'),
+//     activeMenu: 'spiderToolbox',
+//   },
+//   component: () => import('@views/db-manage/tendb-cluster/master-slave-clone/Index.vue'),
+// };
+const spiderMasterSlaveCloneRoute = createRouteItem(TicketTypes.TENDBCLUSTER_MIGRATE_CLUSTER, t('迁移主从'));
+
+// const spiderSlaveRebuildRoute = {
+//   path: 'slave-rebuild/:page?',
+//   name: 'spiderSlaveRebuild',
+//   meta: {
+//     navName: t('重建从库'),
+//     activeMenu: 'spiderToolbox',
+//   },
+//   component: () => import('@views/db-manage/tendb-cluster/slave-rebuild/Index.vue'),
+// };
+
+const spiderSlaveRebuildRoute = createRouteItem(TicketTypes.TENDBCLUSTER_RESTORE_SLAVE, t('重建从库'));
 
 const spiderWebconsoleRoute = {
   name: 'SpiderWebconsole',
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/toolbox-menu.ts b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/toolbox-menu.ts
index 000f5de761..dadcc87acd 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/toolbox-menu.ts
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/toolbox-menu.ts
@@ -11,6 +11,8 @@
  * the specific language governing permissions and limitations under the License.
  */
 
+import { TicketTypes } from '@common/const';
+
 import { t } from '@locales/index';
 
 export interface MenuChild {
@@ -71,19 +73,19 @@ export default [
       },
       {
         name: t('缩容接入层'),
-        id: 'SpiderProxyScaleDown',
+        id: TicketTypes.TENDBCLUSTER_SPIDER_REDUCE_NODES,
         parentId: 'spider_cluster_maintain',
         dbConsoleValue: 'tendbCluster.toolbox.proxyScaleDown',
       },
       {
         name: t('迁移主从'),
-        id: 'spiderMasterSlaveClone',
+        id: TicketTypes.TENDBCLUSTER_MIGRATE_CLUSTER,
         parentId: 'spider_cluster_maintain',
         dbConsoleValue: 'tendbCluster.toolbox.masterSlaveClone',
       },
       {
         name: t('重建从库'),
-        id: 'spiderSlaveRebuild',
+        id: TicketTypes.TENDBCLUSTER_RESTORE_SLAVE,
         parentId: 'spider_cluster_maintain',
         dbConsoleValue: 'tendbCluster.toolbox.slaveRebuild',
       },
@@ -109,7 +111,7 @@ export default [
     children: [
       {
         name: t('添加运维节点'),
-        id: 'spiderAddMnt',
+        id: TicketTypes.TENDBCLUSTER_SPIDER_MNT_APPLY,
         parentId: 'spider_mnt',
         dbConsoleValue: 'tendbCluster.toolbox.addMnt',
       },