From 349f1128947da7ae51dfe31a49b5cd441851b95b Mon Sep 17 00:00:00 2001
From: 3octaves <873551943@qq.com>
Date: Wed, 25 Dec 2024 22:24:22 +0800
Subject: [PATCH] =?UTF-8?q?perf(frontend):=20redis=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E7=AE=B1=E9=87=8D=E6=9E=84=20#8840?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dbm-ui/frontend/.vscode/settings.json         |  70 +--
 dbm-ui/frontend/src/locales/en.json           |   3 +-
 dbm-ui/frontend/src/locales/zh-cn.json        |   3 +-
 .../redis/REDIS_CLUSTER_ADD_SLAVE/Index.vue   |  48 ++
 .../pages/page1/Index.vue                     | 543 ++++++++++++++++++
 .../pages/page1/components/Index.vue          | 121 ++++
 .../pages/page1/components/RenderHost.vue     |  71 +++
 .../page1/components/RenderSlaveHost.vue      |  62 ++
 .../pages/page1/components/Row.vue            | 181 ++++++
 .../pages/page2/Index.vue                     |  89 +++
 .../src/views/db-manage/redis/routes.ts       |  37 +-
 .../src/views/db-manage/redis/toolbox-menu.ts |   4 +-
 12 files changed, 1165 insertions(+), 67 deletions(-)
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/pages/page1/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/pages/page1/components/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/pages/page1/components/RenderHost.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/pages/page1/components/RenderSlaveHost.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/pages/page1/components/Row.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/pages/page2/Index.vue

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 b5c23b066a..0b7cd46074 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3924,5 +3924,6 @@
   "已选 IP": "已选 IP",
   "业务资源池": "业务资源池",
   "冷/热节点": "冷/热节点",
-  "这行勿动！新增翻译请在上一行添加！": ""
+  "这行勿动！新增翻译请在上一行添加！": "",
+  "待替换的主机重复": "待替换的主机重复"
 }
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..211c79533e
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_ADD_SLAVE/pages/page1/Index.vue
@@ -0,0 +1,543 @@
+<!--
+ * 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">
+            <!-- <EditClusterColumn
+              ref="editClusterColumn"
+              v-model="item.cluster"
+              :selected="selected"
+              @batch-edit="handleClusterBatchEdit" />
+            <EditableTableColumn
+              field="cluster.cluster_type_name"
+              :label="t('集群类型')"
+              :max-width="200"
+              :min-width="200">
+              <EditBlock
+                :model-value="item.cluster.cluster_type_name"
+                :placeholder="t('输入集群后自动生成')" />
+            </EditableTableColumn> -->
+            <OperationColumn
+              :create-row-method="createRowData"
+              :table-data="tableData" />
+          </EditableTableRow>
+        </EditableTable>
+        <TicketRemark v-model="formData.remark" />
+      </DbForm>
+      <!-- <InstanceSelector
+        v-model:is-show="isShowMasterInstanceSelector"
+        :cluster-types="[ClusterTypes.REDIS]"
+        :selected="selected"
+        :tab-list-config="tabListConfig"
+        @change="handelMasterProxyChange" /> -->
+    </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 { useI18n } from 'vue-i18n';
+  import { useRouter } from 'vue-router';
+
+  import { getRedisMachineList } from '@services/source/redis';
+  import {
+    listClustersCreateSlaveProxy,
+    // queryMasterSlavePairs,
+  } from '@services/source/redisToolbox';
+  import { createTicket } from '@services/source/ticket';
+
+  import { useTicketCloneInfo } 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 InstanceSelectorValues,
+    // type IValue,
+    type PanelListType,
+  } from '@components/instance-selector/Index.vue';
+  import TicketRemark from '@components/ticket-remark/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 EditClusterColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster/Index.vue';
+
+  // import RenderData from './components/Index.vue';
+  // import RenderDataRow, {
+  //   createRowData,
+  //   type IDataRow,
+  // } from './components/Row.vue';
+
+
+  interface IDataRow {
+    host: {
+      id?: number;
+      ip?: string;
+      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;
+      };
+    };
+    spec_id?: number;
+    rowspan: number;
+  }
+
+  const createRowData = (values?: Partial<IDataRow>) => ({
+    host: values?.host ? values.host : { ip: '' },
+    spec_id: values?.spec_id,
+    rowspan: values?.rowspan || 1,
+  });
+
+  const createDefaultFormData = () => ({
+    remark: '',
+  });
+
+  type RedisModel = ServiceReturnType<typeof listClustersCreateSlaveProxy>[number]
+  type RedisHostModel = ServiceReturnType<typeof getRedisMachineList>['results'][number]
+  // type MachineInstancePairItem = ServiceReturnType<typeof queryMasterSlavePairs>[number]['masters']
+
+  const { t } = useI18n();
+  const router = useRouter();
+
+  // useTicketDetail<Mongodb.REDIS_CLUSTER_ADD_SLAVE>(TicketTypes.REDIS_CLUSTER_ADD_SLAVE, {
+  //   onSuccess(ticketDetail) {
+  //     const { details, remark } = ticketDetail;
+  //     const { infos, clusters, file_tag: fileTag, oplog } = details;
+  //     tableData.value = infos.map((item) => {
+  //       const clusterItem = clusters[item.cluster_id];
+  //       return createRowData({
+  //         master_domain: clusterItem.immute_domain,
+  //       });
+  //     });
+  //     Object.assign(formData, {
+  //       remark,
+  //     });
+  //   },
+  // });
+
+  // 单据克隆
+  useTicketCloneInfo({
+    type: TicketTypes.REDIS_CLUSTER_ADD_SLAVE,
+    onSuccess(cloneData) {
+      // tableData.value = cloneData.tableDataList;
+      formData.remark = cloneData.remark
+      window.changeConfirm = true;
+    }
+  });
+
+  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());
+
+  // slave -> master
+  // const slaveMasterMap: Record<string, MachineInstancePairItem> = {};
+
+  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>;
+  console.log(tabListConfig)
+
+  // 更新slave -> master 映射表
+  // const updateSlaveMasterMap = async (ids?: 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;
+  //       });
+  //     }
+  //   });
+  // };
+
+  // Master 批量选择
+  // const handleShowMasterBatchSelector = () => {
+  //   isShowMasterInstanceSelector.value = true;
+  // };
+
+  // ip 是否已存在表格的映射表
+  // const ipMemo: Record<string, boolean> = {};
+
+  // 批量选择
+  // const handelMasterProxyChange = async (data: InstanceSelectorValues<IValue>) => {
+  //   selected.value = data;
+  //   const newList: IDataRow[] = [];
+  //   const ips = data.redis.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);
+
+  //   data.redis.forEach((item) => {
+  //     const { ip } = item;
+  //     if (!ipMemo[ip] && machineIpMap[ip].isSlaveFailover) {
+  //       newList.push({
+  //         rowKey: ip,
+  //         isLoading: false,
+  //         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(','),
+  //           isStart: false,
+  //           isGeneral: true,
+  //           rowSpan: 1,
+  //         },
+  //         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,
+  //         },
+  //       });
+  //       ipMemo[ip] = true;
+  //     }
+  //   });
+  //   tableData.value = [...(tableData.value[0].host.ip ? tableData.value : []), ...newList];
+  //   // updateSlaveMasterMap();
+  //   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,
+  //       },
+  //     };
+  //     tableData.value[index] = obj;
+  //     ipMemo[ip]  = true;
+  //     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.cluster;
+      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.cluster.isStart = true;
+          item.cluster.rowSpan = sameArr.length;
+          isFirst = false;
+        } else {
+          item.cluster.isStart = false;
+        }
+        item.cluster.isGeneral = isGeneral;
+        retArr.push(item);
+      }
+    }
+    tableData.value = retArr;
+  };
+
+  console.log(sortTableByCluster)
+
+  // 根据表格数据生成提交单据请求参数
+  const generateRequestParam = () => {
+    const clusterMap: Record<string, IDataRow[]> = {};
+    // tableData.value.forEach((item) => {
+    //   if (item.slaveIp) {
+    //     const clusterName = item.cluster.domain;
+    //     if (!clusterMap[clusterName]) {
+    //       clusterMap[clusterName] = [item];
+    //     } else {
+    //       clusterMap[clusterName].push(item);
+    //     }
+    //   }
+    // });
+    const keys = Object.keys(clusterMap);
+    const infos = keys.map((domain) => {
+      console.log(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/routes.ts b/dbm-ui/frontend/src/views/db-manage/redis/routes.ts
index 51fc092d65..734418b5e4 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/mongodb/${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',
           },