diff --git a/dbm-ui/frontend/.vscode/settings.json b/dbm-ui/frontend/.vscode/settings.json
index 1e37538ab6..69bce4736a 100644
--- a/dbm-ui/frontend/.vscode/settings.json
+++ b/dbm-ui/frontend/.vscode/settings.json
@@ -1,61 +1,19 @@
 {
-  "eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
-  "eslint.alwaysShowStatus": true,
+  "files.eol": "\n",
+  "editor.unfoldOnClickAfterEndOfLine": true,
+  "editor.tabSize": 2,
+  "diffEditor.ignoreTrimWhitespace": false,
+  "typescript.updateImportsOnFileMove.enabled": "always",
+  "explorer.confirmDelete": false,
+  "explorer.confirmDragAndDrop": false,
+  "editor.fontLigatures": false,
+  "editor.fontVariations": false,
+  "i18n-lazyer.defaultFolder": "\\src\\locales",
+  "search.smartCase": true,
   "editor.codeActionsOnSave": {
     "source.fixAll": "explicit"
   },
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[javascriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[json]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[html]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[css]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
+  // "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
-  "editor.tabSize": 2,
-  "css.validate": false,
-  "stylelint.enable": true,
-  "scss.validate": false,
-  "stylelint.validate": ["css", "scss", "vue"],
-  "preCI.localCodeCheck.filter.whitePath": "",
-  "preCI.localCodeCheck.filter.skipPath": "",
-  "preCI.localCodeCheck.checkerSet.JS": ["standard_js"],
-  "peacock.remoteColor": "#45e35f",
-  "bk-code-ai.enable": false,
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "workbench.colorCustomizations": {
-    "activityBar.activeBackground": "#65c89b",
-    "activityBar.background": "#65c89b",
-    "activityBar.foreground": "#15202b",
-    "activityBar.inactiveForeground": "#15202b99",
-    "activityBarBadge.background": "#945bc4",
-    "activityBarBadge.foreground": "#e7e7e7",
-    "commandCenter.border": "#15202b99",
-    "sash.hoverBorder": "#65c89b",
-    "statusBar.background": "#42b883",
-    "statusBar.foreground": "#15202b",
-    "statusBarItem.hoverBackground": "#359268",
-    "statusBarItem.remoteBackground": "#42b883",
-    "statusBarItem.remoteForeground": "#15202b",
-    "titleBar.activeBackground": "#42b883",
-    "titleBar.activeForeground": "#15202b",
-    "titleBar.inactiveBackground": "#42b88399",
-    "titleBar.inactiveForeground": "#15202b99"
-  },
-  "peacock.color": "#42b883"
-}
\ No newline at end of file
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}
diff --git a/dbm-ui/frontend/src/locales/en.json b/dbm-ui/frontend/src/locales/en.json
index ba68044f4a..615442193c 100644
--- a/dbm-ui/frontend/src/locales/en.json
+++ b/dbm-ui/frontend/src/locales/en.json
@@ -1644,5 +1644,6 @@
   "分片集群": "Sharded Cluster",
   "主从管理": "HA Management",
   "DB 重命名：database 重命名": "DB Rename：database rename",
-  "这行勿动！新增翻译请在上一行添加！": ""
+  "这行勿动！新增翻译请在上一行添加！": "",
+  "待替换的主机重复": ""
 }
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index eaebbbbd9b..198c95bc79 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3931,5 +3931,6 @@
   "请输入或选择主机": "请输入或选择主机",
   "目标主机输入格式有误": "目标主机输入格式有误",
   "含n个同机关联集群": "含 {n} 个同机关联集群",
-  "这行勿动！新增翻译请在上一行添加！": ""
+  "这行勿动！新增翻译请在上一行添加！": "",
+  "待替换的主机重复": "待替换的主机重复"
 }
diff --git a/dbm-ui/frontend/src/services/model/redis/redis-machine.ts b/dbm-ui/frontend/src/services/model/redis/redis-machine.ts
index 879505809a..7fb7996fb8 100644
--- a/dbm-ui/frontend/src/services/model/redis/redis-machine.ts
+++ b/dbm-ui/frontend/src/services/model/redis/redis-machine.ts
@@ -53,7 +53,8 @@ export default class RedisMachine {
   }
 
   get isSlaveFailover() {
-    return this.instance_role === 'redis_slave' && this.related_instances.some((item) => item.status === 'unavailable');
+    // return this.instance_role === 'redis_slave' && this.related_instances.some((item) => item.status === 'unavailable');
+    return true;
   }
 
   get isMasterFailover() {
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/Index.vue
new file mode 100644
index 0000000000..8ab1811d22
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/Index.vue
@@ -0,0 +1,48 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Component :is="component" />
+</template>
+<script setup lang="ts">
+  import { useRoute } from 'vue-router';
+
+  import Page1 from './pages/page1/Index.vue';
+  import Page2 from './pages/page2/Index.vue';
+
+  const route = useRoute();
+
+  const comMap = {
+    ticket: Page1,
+    success: Page2,
+  };
+
+  const page = ref('');
+
+  const component = computed(() => {
+    if (comMap[page.value as keyof typeof comMap]) {
+      return comMap[page.value as keyof typeof comMap];
+    }
+    return Page1;
+  });
+
+  watch(
+    route,
+    () => {
+      page.value = route.params.page as string;
+    },
+    {
+      immediate: true,
+    },
+  );
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/pages/page1/Index.vue
new file mode 100644
index 0000000000..d3f8bed28a
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/pages/page1/Index.vue
@@ -0,0 +1,603 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <SmartAction>
+    <div class="master-slave-cutoff-page">
+      <BkAlert
+        closable
+        theme="info"
+        :title="
+          t('重建从库：通过整机替换来实现从库实例的重建，即对应主机上的所有从库实例均会被重建，理论上不影响业务')
+        " />
+      <DbForm
+        ref="form"
+        class="toolbox-form"
+        form-type="vertical"
+        :model="formData"
+        style="margin-top: 16px">
+        <EditableTable
+          ref="editableTable"
+          class="mt16 mb16"
+          :model="tableData"
+          :rules="rules">
+          <EditableTableRow
+            v-for="(item, index) in tableData"
+            :key="index">
+            <EditHostColumn
+              v-model="item.host"
+              :cluster-types="[ClusterTypes.REDIS]"
+              :label="t('待重建从库主机')"
+              :selected="selected"
+              :tab-list-config="tabListConfig"
+              @batch-edit="handleBatchEdit" />
+            <EditableTableColumn
+              field="cluster.cluster_type_name"
+              :label="t('关联主库主机')"
+              :max-width="200"
+              :min-width="200">
+              <EditBlock :placeholder="t('输入主机后自动生成')">
+                {{ item.host.ip ? slaveMasterMap[item.host.ip].ip : '' }}
+              </EditBlock>
+            </EditableTableColumn>
+            <EditableTableColumn
+              field="cluster.cluster_type_name"
+              :label="t('所属集群')"
+              :max-width="200"
+              :min-width="200">
+              <EditBlock :placeholder="t('输入主机后自动生成')">
+                <div
+                  v-for="(relatedClusterItem, relatedClusterIndex) in item.host.related_clusters || []"
+                  :key="relatedClusterIndex">
+                  {{ relatedClusterItem.immute_domain }}
+                </div>
+              </EditBlock>
+            </EditableTableColumn>
+            <EditableTableColumn
+              field="cluster.cluster_type_name"
+              :label="t('规格需求')"
+              :max-width="200"
+              :min-width="200">
+            </EditableTableColumn>
+            <EditableTableColumn
+              field="cluster.cluster_type_name"
+              :label="t('故障从库实例数量')"
+              :max-width="200"
+              :min-width="200">
+              <EditBlock :placeholder="t('输入主机后自动生成')">
+                {{
+                  (item.host.related_instances || []).filter(
+                    (relatedInstance) => relatedInstance.status === 'unavailable',
+                  ).length
+                }}
+              </EditBlock>
+            </EditableTableColumn>
+            <EditableTableColumn
+              field="cluster.cluster_type_name"
+              :label="t('当前从库实例数量')"
+              :max-width="200"
+              :min-width="200">
+              <EditBlock :placeholder="t('输入主机后自动生成')">
+                {{ (item.host.related_instances || []).length }}
+              </EditBlock>
+            </EditableTableColumn>
+            <OperationColumn
+              :create-row-method="createRowData"
+              :table-data="tableData" />
+          </EditableTableRow>
+        </EditableTable>
+        <TicketRemark v-model="formData.remark" />
+      </DbForm>
+    </div>
+    <template #action>
+      <BkButton
+        class="w-88"
+        :loading="isSubmitting"
+        theme="primary"
+        @click="handleSubmit">
+        {{ t('提交') }}
+      </BkButton>
+      <DbPopconfirm
+        :confirm-handler="handleReset"
+        :content="t('重置将会清空当前填写的所有内容_请谨慎操作')"
+        :title="t('确认重置页面')">
+        <BkButton
+          class="ml-8 w-88"
+          :disabled="isSubmitting">
+          {{ t('重置') }}
+        </BkButton>
+      </DbPopconfirm>
+    </template>
+  </SmartAction>
+</template>
+
+<script setup lang="tsx">
+  // import { Message } from 'bkui-vue';
+  import _ from 'lodash';
+  import { type ComponentProps } from 'vue-component-type-helpers';
+  import { useI18n } from 'vue-i18n';
+  import { useRouter } from 'vue-router';
+
+  import { type Redis } from '@services/model/ticket/ticket';
+  import { getRedisMachineList } from '@services/source/redis';
+  import {
+    listClustersCreateSlaveProxy,
+    queryMasterSlavePairs,
+  } from '@services/source/redisToolbox';
+  import { createTicket } from '@services/source/ticket';
+
+  import { useTicketDetail } from '@hooks';
+
+  import { ClusterTypes, TicketTypes } from '@common/const';
+
+  import EditableTable, {
+    Block as EditBlock,
+    Column as EditableTableColumn,
+    Row as EditableTableRow,
+  } from '@components/editable-table/Index.vue';
+  import { type IValue, type PanelListType } from '@components/instance-selector/Index.vue';
+
+  import TicketRemark from '@views/db-manage/common/TicketRemark.vue';
+  import OperationColumn from '@views/db-manage/common/toolbox-field/operation-column/Index.vue';
+  import EditHostColumn from '@views/db-manage/redis/common/toolbox-field/edit-host/Index.vue';
+
+  interface IDataRow {
+    host: {
+      ip?: string;
+      id?: number;
+      // masterIp: slaveMasterMap[item.ip].ip,
+      // bkCloudId: slaveMasterMap[item.ip].bk_cloud_id,
+      // bkHostId: slaveMasterMap[item.ip].bk_host_id,
+      // master_domain?: string;
+      // cluster_id?: number;
+      // cluster_type?: string;
+      // machine_type?: string;
+      // shard?: string;
+      // bk_cloud_id?: number;
+      related_clusters?: {
+        id: number;
+        name: string;
+        master_domain: string;
+        immute_domain: string;
+        cluster_type: string;
+      }[];
+      spec_config?: {
+        id?: number;
+      };
+      related_instances?: {
+        status: string
+      }[],
+      // faults: data.related_instances.filter(item => item.status === 'unavailable').length,
+      // total: data.related_instances.length,
+    };
+    rowspan: number;
+  }
+
+  const createRowData = (values?: Partial<IDataRow>) => ({
+    host: values?.host ? values.host : { ip: '' },
+    rowspan: values?.rowspan || 1,
+  });
+
+  const createDefaultFormData = () => ({
+    remark: '',
+  });
+
+  type RedisModel = ServiceReturnType<typeof listClustersCreateSlaveProxy>[number]
+  type RedisHostModel = ServiceReturnType<typeof getRedisMachineList>['results'][number]
+
+  const { t } = useI18n();
+  const router = useRouter();
+
+  useTicketDetail<Redis.ClusterAddSlave>(TicketTypes.REDIS_CLUSTER_ADD_SLAVE, {
+    onSuccess(ticketDetail) {
+      const {remark } = ticketDetail;
+      // const { infos, clusters, file_tag: fileTag, oplog } = details;
+      // tableData.value = infos.map((item) => {
+      //   const clusterItem = clusters[item.cluster_id];
+      //   return createRowData({
+      //     ip: clusterItem.immute_domain,
+      //   });
+      // });
+      Object.assign(formData, {
+        remark,
+      });
+    },
+  });
+
+  const formRef = useTemplateRef('form');
+  const editableTableRef = useTemplateRef('editableTable');
+
+  const rules = {
+    'host.ip': [
+      {
+        validator: (value: string) => {
+          if (value) {
+            const hostList = tableData.value.filter((row) => row.host.ip === value);
+            return hostList.length === 1;
+          }
+          return true;
+        },
+        trigger: 'change',
+        message: t('待替换的主机重复'),
+      },
+    ]
+  };
+
+  const isSubmitting = ref(false);
+  const tableData = ref<IDataRow[]>([createRowData()]);
+  const formData = reactive(createDefaultFormData());
+
+  const selected = computed(() => {
+    const selectedClusters: ComponentProps<typeof EditHostColumn>['selected'] = {
+      [ClusterTypes.REDIS]: [],
+    };
+    // tableData.value.forEach((tableRow) => {
+    //   const { cluster_id: id, master_domain: masterDomain } = tableRow.host;
+    //   if (id && masterDomain) {
+    //     selectedClusters[ClusterTypes.REDIS].push(tableRow.host as unknown as IValue);
+    //   }
+    // });
+    return selectedClusters;
+  });
+
+  const ipMemo = computed(() =>
+    Object.fromEntries(
+      Object.values(selected.value).flatMap((machineList) =>
+      machineList.filter((machineItem) => machineItem.ip).map((machineItem) => [machineItem.ip, true]),
+      ),
+    ),
+  );
+
+  // slave -> master
+  const slaveMasterMap: Record<string, ServiceReturnType<typeof queryMasterSlavePairs>[number]['masters']> = {};
+
+  const tabListConfig = {
+    [ClusterTypes.REDIS]: [
+      {
+        id: 'redis',
+        name: t('待重建的主机'),
+        topoConfig: {
+          getTopoList: listClustersCreateSlaveProxy,
+          countFunc: (item: RedisModel) => item.redisSlaveFaults,
+          topoAlertContent: <bk-alert closable style="margin-bottom: 12px;" theme="info" title={t('仅支持从库有故障的集群新建从库')} />,
+        },
+        tableConfig: {
+          getTableList: (params: any) => getRedisMachineList({
+            ...params,
+            instance_status: 'unavailable',
+            limit: -1,
+          }),
+          firsrColumn: {
+            label: 'IP',
+            role: 'redis_slave',
+            field: 'ip',
+          },
+          isRemotePagination: false,
+          columnsChecked: ['ip', 'role', 'cloud_area', 'status', 'host_name'],
+          statusFilter: (data: RedisHostModel) => !data.isSlaveFailover,
+          // disabledRowConfig: {
+          //   handler: (data: RedisHostModel) => data.running_slave !== 0,
+          //   tip: t('已存在正常运行的从库'),
+          // },
+        },
+      },
+      {
+        tableConfig: {
+          getTableList: (params: any) => getRedisMachineList({
+            ...params,
+            instance_status: 'unavailable',
+            limit: -1,
+          }),
+          isRemotePagination: false,
+          columnsChecked: ['ip', 'role', 'cloud_area', 'status', 'host_name'],
+          statusFilter: (data: RedisHostModel) => !data.isMasterFailover,
+        },
+        manualConfig: {
+          activePanelId: 'redis',
+        },
+      },
+    ],
+  } as unknown as Record<ClusterTypes, PanelListType>;
+
+
+  // 更新slave -> master 映射表
+  const updateSlaveMasterMap = async (clusterIds: number[]) => {
+    // const clusterIds = ids ? ids : [...new Set(_.flatMap(tableData.value.map(item => item.clusterIds)))];
+    const retArr = await Promise.all(clusterIds.map(id => queryMasterSlavePairs({
+      cluster_id: id,
+    })));
+    retArr.forEach((pairs) => {
+      if (pairs !== null) {
+        pairs.forEach((item) => {
+          slaveMasterMap[item.slave_ip] = item.masters;
+        });
+      }
+    });
+  };
+
+  // const handleBatchEdit = (list: IValue[]) => {
+  //   const newList = list.map((item) =>
+  //     createRowData({
+  //       host: {
+  //         id: item.id,
+  //         ip: item.ip,
+  //         master_domain: item.master_domain,
+  //         cluster_id: item.cluster_id,
+  //         cluster_type: item.cluster_type,
+  //         machine_type: item.machine_type,
+  //         shard: item.shard,
+  //         bk_cloud_id: item.bk_cloud_id,
+  //         related_clusters: item.related_clusters,
+  //         spec_config: {
+  //           id: item.spec_config?.id,
+  //         },
+  //       },
+  //       spec_id: item.spec_config?.id,
+  //     }),
+  //   );
+
+  //   tableData.value = [...(tableData.value[0].host.ip ? tableData.value : []), ...newList];
+  //   window.changeConfirm = true;
+  // };
+
+  // 批量选择
+  const handleBatchEdit = async (list: IValue[]) => {
+    const newList: IDataRow[] = [];
+    const ips = list.map(item => item.ip);
+    const listResult = await getRedisMachineList({
+      ip: ips.join(','),
+      add_role_count: true,
+    });
+
+    // 已选的主机信息
+    const machineIpMap = listResult.results.reduce((results, item) => {
+      Object.assign(results, {
+        [item.ip]: item
+      });
+      return results;
+    }, {} as Record<string, ServiceReturnType<typeof getRedisMachineList>['results'][number]>);
+
+    const clusterIds = [...new Set(_.flatMap(Object.values(machineIpMap).map(item => item.related_clusters.map(cluster => cluster.id))))];
+
+    await updateSlaveMasterMap(clusterIds);
+
+    list.forEach((item) => {
+      const { ip } = item;
+      if (!ipMemo.value[ip] && machineIpMap[ip].isSlaveFailover) {
+        newList.push(createRowData({
+          host: {
+            ip: item.ip,
+            id: item.id,
+            // masterIp: slaveMasterMap[item.ip].ip,
+            // bkCloudId: slaveMasterMap[item.ip].bk_cloud_id,
+            // bkHostId: slaveMasterMap[item.ip].bk_host_id,
+            related_clusters: item.related_clusters,
+            spec_config: item.spec_config,
+            related_instances: item.related_instances
+          }
+        }))
+        // newList.push({
+        //   slaveIp: ip,
+        //   masterIp: slaveMasterMap[item.ip].ip,
+        //   clusterIds: machineIpMap[item.ip].related_clusters.map(item => item.id),
+        //   bkCloudId: slaveMasterMap[item.ip].bk_cloud_id,
+        //   bkHostId: slaveMasterMap[item.ip].bk_host_id,
+        //   cluster: {
+        //     domain: machineIpMap[item.ip].related_clusters.map(item => item.immute_domain).join(','),
+        //   },
+        //   spec: machineIpMap[item.ip].spec_config,
+        //   targetNum: 1,
+        //   slaveHost: {
+        //     faults: machineIpMap[item.ip].related_instances.filter(item => item.status === 'unavailable').length,
+        //     total: machineIpMap[item.ip].related_instances.length,
+        //   },
+        // });
+      }
+    });
+    tableData.value = [...(tableData.value[0].host.ip ? tableData.value : []), ...newList];
+    window.changeConfirm = true;
+  };
+
+  // 输入IP后查询详细信息
+  // const handleChangeHostIp = async (index: number, ip: string) => {
+  //   if (!ip) {
+  //     const { slaveIp } = tableData.value[index];
+  //     ipMemo[slaveIp] = false;
+  //     tableData.value[index].slaveIp = '';
+  //     return;
+  //   }
+  //   tableData.value[index].isLoading = true;
+  //   tableData.value[index].slaveIp = ip;
+  //   const listResult = await getRedisMachineList({
+  //     ip,
+  //     add_role_count: true,
+  //   }).finally(() => {
+  //     tableData.value[index].isLoading = false;
+  //   });
+
+  //   if (listResult.results.length === 0) {
+  //     return;
+  //   }
+
+  //   const data = listResult.results[0];
+
+  //   const clusterIds = data.related_clusters.map(item => item.id);
+
+  //   await updateSlaveMasterMap(clusterIds);
+  //   if (data.isSlaveFailover) {
+  //     const obj = {
+  //       rowKey: tableData.value[index].rowKey,
+  //       isLoading: false,
+  //       slaveIp: ip,
+  //       masterIp: slaveMasterMap[ip].ip,
+  //       clusterIds,
+  //       bkCloudId: slaveMasterMap[ip].bk_cloud_id,
+  //       bkHostId: slaveMasterMap[ip].bk_host_id,
+  //       cluster: {
+  //         domain: data.related_clusters.map(item => item.immute_domain).join(','),
+  //         isStart: false,
+  //         isGeneral: true,
+  //         rowSpan: 1,
+  //       },
+  //       spec: data.spec_config,
+  //       targetNum: 1,
+  //       slaveHost: {
+  //         faults: data.related_instances.filter(item => item.status === 'unavailable').length,
+  //         total: data.related_instances.length,
+  //       },
+  //     };
+  //     sortTableByCluster();
+  //   } else {
+  //     tableData.value[index].slaveIp = '';
+  //     Message({
+  //       theme: 'warning',
+  //       message: t('无异常slave实例，无法重建'),
+  //     });
+  //   }
+  // };
+
+  // 表格排序，方便合并集群显示
+  // const sortTableByCluster = () => {
+    // const arr = tableData.value;
+    // const clusterMap: Record<string, IDataRow[]> = {};
+    // arr.forEach((item) => {
+    //   const { domain } = item.host;
+    //   if (!clusterMap[domain]) {
+    //     clusterMap[domain] = [item];
+    //   } else {
+    //     clusterMap[domain].push(item);
+    //   }
+    // });
+    // const keys = Object.keys(clusterMap);
+    // const retArr = [];
+    // for (const key of keys) {
+    //   const sameArr = clusterMap[key];
+    //   let isFirst = true;
+    //   let isGeneral = true;
+    //   if (sameArr.length > 1) {
+    //     isGeneral  = false;
+    //   }
+    //   for (const item of sameArr) {
+    //     if (isFirst) {
+    //       item.host.isStart = true;
+    //       item.host.rowSpan = sameArr.length;
+    //       isFirst = false;
+    //     } else {
+    //       item.host.isStart = false;
+    //     }
+    //     item.host.isGeneral = isGeneral;
+    //     retArr.push(item);
+    //   }
+    // }
+    // tableData.value = retArr;
+  // };
+
+  // 根据表格数据生成提交单据请求参数
+  const generateRequestParam = () => {
+    const clusterMap: Record<string, IDataRow[]> = {};
+    tableData.value.forEach((item) => {
+      if (item.slaveIp) {
+        const clusterName = item.host.domain;
+        if (!clusterMap[clusterName]) {
+          clusterMap[clusterName] = [item];
+        } else {
+          clusterMap[clusterName].push(item);
+        }
+      }
+    });
+    const keys = Object.keys(clusterMap);
+    const infos = keys.map((domain) => {
+      const sameArr = clusterMap[domain];
+      const infoItem = {
+        cluster_ids: sameArr[0].clusterIds,
+        bk_cloud_id: sameArr[0].bkCloudId,
+        pairs: [],
+      };
+      const specId = sameArr[0].spec?.id;
+      if (specId !== undefined) {
+        sameArr.forEach((item) => {
+          const pair = {
+            redis_master: {
+              ip: item.masterIp,
+              bk_cloud_id: sameArr[0].bkCloudId,
+              bk_host_id: sameArr[0].bkHostId,
+            },
+            redis_slave: {
+              spec_id: specId,
+              count: 1,
+              old_slave_ip: item.slaveIp,
+            },
+          };
+          infoItem.pairs.push(pair);
+        });
+      }
+      return infoItem;
+    });
+    return infos;
+  };
+
+  // 提交
+  const handleSubmit = async () => {
+    try {
+      isSubmitting.value = true;
+      await formRef.value!.validate();
+      const validateResult = await editableTableRef.value!.validate();
+      if (validateResult) {
+        const infos = generateRequestParam();
+        const params = {
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          ticket_type: TicketTypes.REDIS_CLUSTER_ADD_SLAVE,
+          remark: formData.remark,
+          details: {
+            ip_source: 'resource_pool',
+            infos,
+          },
+        };
+        await createTicket(params).then((data) => {
+          window.changeConfirm = false;
+          router.push({
+            name: TicketTypes.REDIS_CLUSTER_ADD_SLAVE,
+            params: {
+              page: 'success',
+            },
+            query: {
+              ticketId: data.id,
+            },
+          });
+        })
+      }
+
+    } finally {
+      isSubmitting.value = false;
+    }
+  };
+
+  // 重置
+  const handleReset = () => {
+    Object.assign(formData, createDefaultFormData());
+    tableData.value = [createRowData()];
+    window.changeConfirm = false;
+  };
+</script>
+
+<style lang="less">
+  .master-slave-cutoff-page {
+    padding-bottom: 20px;
+
+    .page-action-box {
+      display: flex;
+      align-items: center;
+      margin-top: 16px;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/pages/page1/components/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/pages/page1/components/Index.vue
new file mode 100644
index 0000000000..7546105cbd
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/pages/page1/components/Index.vue
@@ -0,0 +1,121 @@
+<!--
+ * 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="render-data">
+    <RenderTable>
+      <template #default>
+        <RenderTableHeadColumn
+          :min-width="150"
+          :width="280">
+          <span>{{ t('待重建从库主机') }}</span>
+          <template #append>
+            <BkPopover
+              :content="t('批量添加')"
+              theme="dark">
+              <span
+                class="batch-edit-btn"
+                @click="handleShowMasterBatchSelector">
+                <DbIcon type="batch-host-select" />
+              </span>
+            </BkPopover>
+          </template>
+        </RenderTableHeadColumn>
+        <RenderTableHeadColumn
+          :min-width="150"
+          :required="false"
+          :width="200">
+          <span>{{ t('关联主库主机') }}</span>
+        </RenderTableHeadColumn>
+        <RenderTableHeadColumn
+          :min-width="180"
+          :required="false"
+          :width="280">
+          <span>{{ t('所属集群') }}</span>
+        </RenderTableHeadColumn>
+        <RenderTableHeadColumn
+          :min-width="150"
+          :required="false"
+          :width="300">
+          <BkPopover
+            :content="t('默认使用部署方案中选定的规格，将从资源池自动匹配机器')"
+            placement="top"
+            theme="dark">
+            <span class="spec-title">{{ t('规格需求') }}</span>
+          </BkPopover>
+        </RenderTableHeadColumn>
+        <!-- <RenderTableHeadColumn
+          :is-minimize="slotProps.isOverflow"
+          :min-width="150"
+          :required="false"
+          :row-width="slotProps.rowWidth"
+          :width="190">
+          <span>{{ t('当前从库主机') }}</span>
+        </RenderTableHeadColumn> -->
+        <RenderTableHeadColumn
+          :min-width="130"
+          :required="false"
+          :width="190">
+          <span>{{ t('故障从库实例数量') }}</span>
+        </RenderTableHeadColumn>
+        <RenderTableHeadColumn
+          :min-width="130"
+          :required="false"
+          :width="190">
+          <span>{{ t('当前从库实例数量') }}</span>
+        </RenderTableHeadColumn>
+        <RenderTableHeadColumn
+          fixed="right"
+          :required="false"
+          :width="100">
+          {{ t('操作') }}
+        </RenderTableHeadColumn>
+      </template>
+
+      <template #data>
+        <slot />
+      </template>
+    </RenderTable>
+  </div>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import RenderTableHeadColumn from '@components/render-table/HeadColumn.vue';
+  import RenderTable from '@components/render-table/Index.vue';
+
+  interface Emits {
+    (e: 'showMasterBatchSelector'): void;
+  }
+
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+
+  const handleShowMasterBatchSelector = () => {
+    emits('showMasterBatchSelector');
+  };
+</script>
+<style lang="less">
+  .render-data {
+    .batch-edit-btn {
+      margin-left: 4px;
+      color: #3a84ff;
+      cursor: pointer;
+    }
+  }
+
+  .spec-title {
+    border-bottom: 1px dashed #979ba5;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/pages/page1/components/RenderHost.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/pages/page1/components/RenderHost.vue
new file mode 100644
index 0000000000..f6a2aa8a42
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/pages/page1/components/RenderHost.vue
@@ -0,0 +1,71 @@
+<!--
+ * 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="render-host-box">
+    <TableEditInput
+      ref="editRef"
+      v-model="localValue"
+      :placeholder="t('请输入IP（单个）')"
+      :rules="rules"
+      @submit="handleInputFinish" />
+  </div>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import { ipv4 } from '@common/regex';
+
+  import TableEditInput from '@components/render-table/columns/input/index.vue';
+
+  import type { IDataRow } from './Row.vue';
+
+  interface Props {
+    modelValue?: IDataRow['ip'];
+  }
+
+  interface Emits {
+    (e: 'onInputFinish', value: string): void;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    modelValue: '',
+  });
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+  const localValue = ref(props.modelValue);
+  const editRef = ref();
+
+  const rules = [
+    {
+      validator: (value: string) => Boolean(value),
+      message: t('IP不能为空'),
+    },
+    {
+      validator: (value: string) => ipv4.test(value),
+      message: t('IP格式不正确'),
+    },
+  ];
+
+  const handleInputFinish = (value: string) => {
+    editRef.value.getValue().then(() => {
+      emits('onInputFinish', value);
+    });
+  };
+</script>
+<style lang="less" scoped>
+  .render-host-box {
+    position: relative;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/pages/page1/components/RenderSlaveHost.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/pages/page1/components/RenderSlaveHost.vue
new file mode 100644
index 0000000000..c485b15ef0
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/pages/page1/components/RenderSlaveHost.vue
@@ -0,0 +1,62 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <BkLoading :loading="isLoading">
+    <div
+      class="render-text-box"
+      :class="{ 'default-display': !data }">
+      <span
+        v-if="!data.total"
+        key="empty"
+        style="color: #c4c6cc">
+        {{ $t('选择主机后自动生成') }}
+      </span>
+      <span v-else>
+        <span style="color: red">{{ data.faults }}</span> / {{ data.total }}
+      </span>
+    </div>
+  </BkLoading>
+</template>
+<script setup lang="ts">
+  interface Props {
+    data?: {
+      faults: number;
+      total: number;
+    };
+    isLoading?: boolean;
+  }
+
+  withDefaults(defineProps<Props>(), {
+    data: () => ({
+      faults: 0,
+      total: 0,
+    }),
+    isLoading: false,
+  });
+</script>
+<style lang="less" scoped>
+  .render-text-box {
+    width: 100%;
+    padding: 10px 16px;
+    overflow: hidden;
+    line-height: 20px;
+    color: #63656e;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .default-display {
+    background: #fafbfd;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/pages/page1/components/Row.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/pages/page1/components/Row.vue
new file mode 100644
index 0000000000..eaf043f8a1
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/pages/page1/components/Row.vue
@@ -0,0 +1,181 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <tr>
+    <td style="padding: 0">
+      <RenderHost
+        ref="hostRef"
+        :data="data.slaveIp"
+        :inputed="inputedIps"
+        @input-finish="handleInputFinish" />
+    </td>
+    <td style="padding: 0">
+      <RenderText
+        :data="data.masterIp"
+        :is-loading="data.isLoading"
+        :placeholder="t('输入主机后自动生成')" />
+    </td>
+    <!-- 跨行合并 -->
+    <td
+      v-if="data.cluster?.isGeneral || data.cluster?.isStart"
+      :rowspan="data.cluster?.rowSpan"
+      style="padding: 0">
+      <RenderCluster
+        :data="data.cluster.domain"
+        :is-loading="data.isLoading" />
+    </td>
+    <td style="padding: 0">
+      <RenderSpec
+        :data="data.spec"
+        :is-loading="data.isLoading" />
+    </td>
+    <td style="padding: 0">
+      <RenderText
+        :data="data.slaveHost?.faults"
+        :is-loading="data.isLoading"
+        :placeholder="t('输入主机后自动生成')" />
+    </td>
+    <td style="padding: 0">
+      <RenderText
+        :data="data.slaveHost?.total"
+        :is-loading="data.isLoading"
+        :placeholder="t('输入主机后自动生成')" />
+    </td>
+    <!-- <td style="padding: 0;">
+      <RenderSlaveHost
+        :data="data.slaveHost"
+        :is-loading="data.isLoading" />
+    </td> -->
+    <OperateColumn
+      :removeable="removeable"
+      show-clone
+      @add="handleAppend"
+      @clone="handleClone"
+      @remove="handleRemove" />
+  </tr>
+</template>
+<script lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
+  import RenderSpec from '@components/render-table/columns/spec-display/Index.vue';
+  import RenderText from '@components/render-table/columns/text-plain/index.vue';
+
+  import RenderHost from '@views/db-manage/redis/common/edit-field/HostName.vue';
+  import RenderCluster from '@views/db-manage/redis/common/edit-field/RenderCluster.vue';
+  import type { SpecInfo } from '@views/db-manage/redis/common/spec-panel/Index.vue';
+
+  import { random } from '@utils';
+
+  // import RenderSlaveHost from './RenderSlaveHost.vue';
+
+  export interface IDataRow {
+    rowKey: string;
+    isLoading: boolean;
+    slaveIp: string;
+    masterIp: string;
+    clusterIds: number[];
+    bkCloudId: number;
+    bkHostId: number;
+    cluster: {
+      domain: string;
+      isStart: boolean;
+      isGeneral: boolean;
+      rowSpan: number;
+    };
+    targetNum: number;
+    spec?: SpecInfo;
+    slaveHost?: {
+      faults: number;
+      total: number;
+    };
+  }
+
+  // 创建表格数据
+  export const createRowData = (data?: IDataRow) => ({
+    rowKey: random(),
+    isLoading: false,
+    slaveIp: data?.slaveIp ?? '',
+    masterIp: data?.masterIp ?? '',
+    clusterIds: [] as number[],
+    bkCloudId: 0,
+    bkHostId: 0,
+    cluster: {
+      domain: data?.cluster?.domain ?? '',
+      isStart: false,
+      isGeneral: true,
+      rowSpan: 1,
+    },
+    targetNum: 1,
+  });
+</script>
+<script setup lang="ts">
+  interface Props {
+    data: IDataRow;
+    removeable: boolean;
+    inputedIps?: string[];
+  }
+
+  interface Emits {
+    (e: 'add', params: Array<IDataRow>): void;
+    (e: 'remove'): void;
+    (e: 'clone', value: IDataRow): void;
+    (e: 'onIpInputFinish', value: string): void;
+  }
+
+  interface Exposes {
+    getValue: () => Promise<string>;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    inputedIps: () => [],
+  });
+
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+
+  const hostRef = ref<InstanceType<typeof RenderHost>>();
+
+  const handleInputFinish = (value: string) => {
+    emits('onIpInputFinish', value.split(':')[1]);
+  };
+
+  const handleAppend = () => {
+    emits('add', [createRowData()]);
+  };
+
+  const handleRemove = () => {
+    if (props.removeable) {
+      return;
+    }
+    emits('remove');
+  };
+
+  const handleClone = () => {
+    Promise.allSettled([hostRef.value!.getValue()]).then((rowData) => {
+      emits('clone', {
+        ...props.data,
+        rowKey: random(),
+        isLoading: false,
+      });
+    });
+  };
+
+  defineExpose<Exposes>({
+    getValue() {
+      return hostRef.value!.getValue(true);
+    },
+  });
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/pages/page2/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/pages/page2/Index.vue
new file mode 100644
index 0000000000..d5a20cff35
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/pages/page2/Index.vue
@@ -0,0 +1,89 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <RenderSuccess :steps="steps">
+    <template #title>
+      {{ $t('新建从库提交成功') }}
+    </template>
+    <I18nT
+      keypath="接下来您可以通过xx查看任务最新动态"
+      tag="span">
+      <RouterLink
+        target="_blank"
+        :to="{
+          name: 'bizTicketManage',
+          params: {
+            ticketId: Number(ticketId),
+          },
+        }">
+        {{ $t('单据') }}
+      </RouterLink>
+    </I18nT>
+    <template #action>
+      <BkButton
+        class="w88"
+        theme="primary"
+        @click="handleGoTicket">
+        {{ $t('去看看') }}
+      </BkButton>
+      <BkButton
+        class="ml-8"
+        @click="handleStepChange">
+        {{ $t('继续提单') }}
+      </BkButton>
+    </template>
+  </RenderSuccess>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+  import { useRoute, useRouter } from 'vue-router';
+
+  import { TicketTypes } from '@common/const';
+
+  import RenderSuccess from '@components/ticket-success/Index.vue';
+
+  const route = useRoute();
+  const router = useRouter();
+  const { t } = useI18n();
+
+  const { ticketId } = route.query;
+
+  const steps = [
+    {
+      name: t('单据审批'),
+    },
+    {
+      name: t('生产执行'),
+    },
+    {
+      name: t('任务完成'),
+    },
+  ];
+
+  const handleGoTicket = () => {
+    const route = router.resolve({
+      name: 'bizTicketManage',
+      params: {
+        ticketId: Number(ticketId),
+      },
+    });
+    window.open(route.href);
+  };
+
+  const handleStepChange = () => {
+    router.push({
+      name: TicketTypes.REDIS_CLUSTER_ADD_SLAVE,
+    });
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/common/toolbox-field/edit-host/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/common/toolbox-field/edit-host/Index.vue
new file mode 100644
index 0000000000..baf2412d89
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/common/toolbox-field/edit-host/Index.vue
@@ -0,0 +1,136 @@
+<template>
+  <EditableTableColumn
+    ref="editableTableColumn"
+    :append-rules="rules"
+    field="host.ip"
+    fixed="left"
+    :label="label"
+    :loading="isLoading"
+    :min-width="300"
+    required>
+    <template #headAppend>
+      <BkButton
+        text
+        theme="primary"
+        @click="handleShowSelector">
+        <DbIcon type="batch-host-select" />
+      </BkButton>
+    </template>
+    <EditInput
+      v-model="modelValue.ip"
+      :disabled="disabled"
+      :placeholder="placeholder">
+    </EditInput>
+    <InstanceSelector
+      v-model:is-show="isShowSelector"
+      :cluster-types="clusterTypes"
+      :selected="selected"
+      :tab-list-config="tabListConfig"
+      @change="handleInstanceSelectChange" />
+  </EditableTableColumn>
+</template>
+
+<script setup lang="ts">
+  import type { ComponentProps } from 'vue-component-type-helpers';
+  import { useI18n } from 'vue-i18n';
+
+  import { getRedisMachineList } from '@services/source/redis';
+
+  import { ipv4 } from '@common/regex';
+
+  import { Column as EditableTableColumn, Input as EditInput } from '@components/editable-table/Index.vue';
+  import InstanceSelector, { type InstanceSelectorValues, type IValue } from '@components/instance-selector/Index.vue';
+
+  type InstanceSelectorProps = ComponentProps<typeof InstanceSelector>;
+
+  interface Props {
+    label: string;
+    clusterTypes: InstanceSelectorProps['clusterTypes'];
+    selected: InstanceSelectorProps['selected'];
+    tabListConfig?: InstanceSelectorProps['tabListConfig'];
+    disabled?: boolean;
+    placeholder?: string;
+  }
+
+  interface Emits {
+    (e: 'batch-edit', value: IValue[]): void;
+  }
+
+  defineProps<Props>();
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<{
+    id?: number;
+    ip?: string;
+  }>({
+    required: true,
+  });
+
+  const { t } = useI18n();
+
+  const rules = [
+    {
+      validator: (value: string) => ipv4.test(value),
+      trigger: 'change',
+      message: t('目标主机输入格式有误'),
+    },
+    {
+      validator: () => Boolean(modelValue.value.id),
+      trigger: 'blur',
+      message: t('目标主机不存在'),
+    },
+  ];
+
+  const isShowSelector = ref(false);
+  const isLoading = ref(false);
+
+  watch(
+    () => modelValue.value.ip,
+    () => {
+      if (!modelValue.value.id && modelValue.value.ip) {
+        isLoading.value = true;
+        modelValue.value.id = undefined;
+        getRedisMachineList({
+          ip: modelValue.value.ip,
+        })
+          .then((data) => {
+            if (data.results.length > 0) {
+              [modelValue.value] = data.results;
+            }
+          })
+          .finally(() => {
+            isLoading.value = false;
+          });
+      }
+      if (!modelValue.value.ip) {
+        modelValue.value.id = undefined;
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  const handleShowSelector = () => {
+    isShowSelector.value = true;
+  };
+
+  const handleInstanceSelectChange = (data: InstanceSelectorValues<IValue>) => {
+    const hostList = Object.values(data).flatMap((selectedList) => selectedList);
+    emits('batch-edit', hostList);
+  };
+</script>
+
+<style lang="less" scoped>
+  .host-selector-btn {
+    width: 24px;
+    font-size: 16px;
+    border: none;
+    border-radius: 2px;
+
+    &:hover {
+      color: #3a84ff;
+      background: #f0f1f5;
+    }
+  }
+</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 51fc092d65..01541f2d95 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,28 @@ import FunctionControllModel, {
   type RedisFunctions,
 } from '@services/model/function-controller/functionController';
 
+import { TicketTypes } from '@common/const';
+
 import { checkDbConsole } from '@utils';
 
 import { t } from '@locales/index';
 
+const createRouteItem = (
+  ticketType: TicketTypes,
+  meta: {
+    navName: string;
+    skeleton?: string;
+  },
+) => ({
+  name: ticketType,
+  path: `${ticketType}/:page?`,
+  meta: {
+    fullscreen: true,
+    ...meta,
+  },
+  component: () => import(`@views/db-manage/redis/${ticketType}/Index.vue`),
+});
+
 const redisInstallModuleRoute = {
   name: 'RedisInstallModule',
   path: 'install-module/:page?',
@@ -57,14 +75,17 @@ const redisProxyScaleDownRoute = {
   component: () => import('@views/db-manage/redis/proxy-scale-down/Index.vue'),
 };
 
-const redisDBCreateSlaveRoute = {
-  name: 'RedisDBCreateSlave',
-  path: 'db-create-slave/:page?',
-  meta: {
-    navName: t('重建从库'),
-  },
-  component: () => import('@views/db-manage/redis/db-create-slave/Index.vue'),
-};
+// const redisDBCreateSlaveRoute = {
+//   name: 'RedisDBCreateSlave',
+//   path: 'db-create-slave/:page?',
+//   meta: {
+//     navName: t('重建从库'),
+//   },
+//   component: () => import('@views/db-manage/redis/db-create-slave/Index.vue'),
+// };
+const redisDBCreateSlaveRoute = createRouteItem(TicketTypes.REDIS_CLUSTER_ADD_SLAVE, {
+  navName: t('重建从库'),
+});
 
 const redisMasterFailoverRoute = {
   name: 'RedisMasterFailover',
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 70909211bb..73a51848b7 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 {
@@ -40,7 +42,7 @@ export default [
         children: [
           {
             name: t('重建从库'),
-            id: 'RedisDBCreateSlave',
+            id: TicketTypes.REDIS_CLUSTER_ADD_SLAVE,
             parentId: 'common-manage',
             dbConsoleValue: 'redis.toolbox.slaveRebuild',
           },