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

---
 .../columns/spec-display/Panel.vue            |   6 +-
 .../redis/REDIS_CLUSTER_CUTOFF/Create.vue     | 354 ++++++++++++
 .../redis/REDIS_CLUSTER_CUTOFF/Index.vue      |  32 ++
 .../components/HostColumn.vue                 | 149 +++++
 .../components/SpecColumn.vue                 |  64 +++
 .../components/instance-selector/Index.vue    | 172 ++++++
 .../instance-selector/common/tableSettings.ts |  67 +++
 .../instance-selector/common/utils.ts         |  19 +
 .../instance-selector/components/PanelTab.vue |  82 +++
 .../components/RenderManualHost.vue           | 249 +++++++++
 .../components/RenderManualInput.vue          | 333 ++++++++++++
 .../components/RenderRedis.vue                | 306 +++++++++++
 .../components/RenderRedisHost.vue            | 509 ++++++++++++++++++
 .../preview-result/CollapseMini.vue           |  96 ++++
 .../components/preview-result/Index.vue       | 212 ++++++++
 .../src/views/db-manage/redis/routes.ts       |   9 +-
 .../src/views/db-manage/redis/toolbox-menu.ts |   2 +-
 17 files changed, 2649 insertions(+), 12 deletions(-)
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/Create.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/HostColumn.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/SpecColumn.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/common/tableSettings.ts
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/common/utils.ts
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/PanelTab.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderManualHost.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderManualInput.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderRedis.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderRedisHost.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/preview-result/CollapseMini.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/preview-result/Index.vue

diff --git a/dbm-ui/frontend/src/components/render-table/columns/spec-display/Panel.vue b/dbm-ui/frontend/src/components/render-table/columns/spec-display/Panel.vue
index ad0d01952a..83e4ccd08f 100644
--- a/dbm-ui/frontend/src/components/render-table/columns/spec-display/Panel.vue
+++ b/dbm-ui/frontend/src/components/render-table/columns/spec-display/Panel.vue
@@ -58,13 +58,13 @@
                 </div>
                 <div class="table-row">
                   <div class="row-one">
-                    {{ data.storage_spec[0].mount_point }}
+                    {{ data.storage_spec[0]?.mount_point || '--' }}
                   </div>
                   <div class="row-two">
-                    {{ data.storage_spec[0].size }}
+                    {{ data.storage_spec[0]?.size || '--' }}
                   </div>
                   <div class="row-three">
-                    {{ data.storage_spec[0].type }}
+                    {{ data.storage_spec[0]?.type || '--' }}
                   </div>
                 </div>
               </div>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/Create.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/Create.vue
new file mode 100644
index 0000000000..fe1142da07
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/Create.vue
@@ -0,0 +1,354 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <SmartAction>
+    <BkAlert
+      class="mb-20"
+      closable
+      :title="t('添加运维节点：在原集群上增加运维节点实例来实现额外的数据访问，在运维节点上的操作不会影响原集群')" />
+    <BkForm
+      v-model="formData"
+      class="mb-20"
+      form-type="vertical">
+      <EditableTable
+        ref="table"
+        class="mb-20"
+        :model="formData.tableData"
+        :rules="rules">
+        <EditableTableRow
+          v-for="(item, index) in formData.tableData"
+          :key="index">
+          <HostColumn
+            ref="rowHostRef"
+            v-model="item.host"
+            :selected="selected"
+            @batch-edit="handleBatchEdit"
+            @change="(data) => handleChange(data, item, index)" />
+          <Column
+            :label="t('角色类型')"
+            :min-width="150">
+            <Block
+              v-model="item.role"
+              :placeholder="t('自动生成')" />
+          </Column>
+          <Column
+            :label="t('所属集群')"
+            :min-width="150"
+            :rowspan="rowSpan[item.cluster.domain]">
+            <Block
+              v-model="item.cluster.domain"
+              :placeholder="t('自动生成')" />
+          </Column>
+          <SpecColumn v-model="item.spec" />
+          <OperationColumn
+            v-model:table-data="formData.tableData"
+            :create-row-method="createTableRow" />
+        </EditableTableRow>
+      </EditableTable>
+      <TicketRemark v-model="formData.remark" />
+    </BkForm>
+    <template #action>
+      <BkButton
+        class="mr-8 w-88"
+        :loading="isSubmitting"
+        theme="primary"
+        @click="handleSubmit">
+        {{ t('提交') }}
+      </BkButton>
+      <DbPopconfirm
+        :confirm-handler="handleReset"
+        :content="t('重置将会情况当前填写的所有内容_请谨慎操作')"
+        :title="t('确认重置页面')">
+        <BkButton
+          class="ml8 w-88"
+          :disabled="isSubmitting">
+          {{ t('重置') }}
+        </BkButton>
+      </DbPopconfirm>
+    </template>
+  </SmartAction>
+</template>
+<script lang="ts" setup>
+  import _ from 'lodash';
+  import { reactive, useTemplateRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import { queryMasterSlavePairs } from '@services/source/redisToolbox';
+
+  import { useCreateTicket } from '@hooks';
+
+  import { TicketTypes } from '@common/const';
+
+  import EditableTable, { Block, Column, Row as EditableTableRow } from '@components/editable-table/Index.vue';
+
+  import OperationColumn from '@views/db-manage/common/toolbox-field/operation-column/Index.vue';
+  import TicketRemark from '@views/db-manage/common/toolbox-field/ticket-remark/Index.vue';
+  import type { SpecInfo } from '@views/db-manage/redis/common/spec-panel/Index.vue';
+
+  import HostColumn, { type HostInputed, type SelectorHost } from './components/HostColumn.vue';
+  import SpecColumn from './components/SpecColumn.vue';
+
+  interface RowData {
+    host: {
+      bk_biz_id: number;
+      bk_host_id: number;
+      bk_cloud_id: number;
+      ip: string;
+    };
+    role: string;
+    cluster: {
+      domain: string;
+      cluster_ids: number[]; // 关联集群的id集合
+    };
+    spec: SpecInfo;
+  }
+
+  const { t } = useI18n();
+  const tableRef = useTemplateRef('table');
+
+  const createTableRow = (data = {} as Partial<RowData>) => ({
+    host: data.host || {
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: 0,
+      bk_host_id: 0,
+      ip: '',
+    },
+    role: data.role || '',
+    cluster: data.cluster || {
+      domain: '',
+      cluster_ids: [],
+    },
+    spec: data.spec || ({} as SpecInfo),
+  });
+
+  const defaultData = () => ({
+    tableData: [createTableRow()],
+    remark: '',
+  });
+
+  const formData = reactive(defaultData());
+  const rowHostRef = ref();
+
+  const selected = computed(() => formData.tableData.filter((item) => item.host.bk_host_id).map((item) => item.host));
+  const selectedMap = computed(() => Object.fromEntries(selected.value.map((cur) => [cur.ip, true])));
+  const rowSpan = computed(() =>
+    formData.tableData.reduce<Record<string, number>>((acc, item) => {
+      if (item.cluster.domain) {
+        acc[item.cluster.domain] = (acc[item.cluster.domain] || 0) + 1;
+      }
+      return acc;
+    }, {}),
+  );
+
+  const rules = {
+    'host.tp': [
+      {
+        validator: (value: string) => selected.value.filter((item) => item.ip === value).length < 2,
+        message: t('目标主机重复'),
+        trigger: 'change',
+      },
+    ],
+  };
+
+  interface TicketDetail {
+    ip_source: 'resource_pool';
+    infos: {
+      bk_cloud_id: number;
+      cluster_ids: number[];
+      redis_master: {
+        ip: string;
+        spec_id: number;
+        bk_host_id: number;
+      }[];
+      redis_slave: TicketDetail['infos'][0]['redis_master'];
+      proxy: TicketDetail['infos'][0]['redis_master'];
+      display_info: {
+        data: {
+          ip: string;
+          role: string;
+          cluster_domain: string;
+          spec_id: number;
+          spec_name: string;
+        }[];
+      };
+    }[];
+  }
+
+  const { run: createTicketRun, loading: isSubmitting } = useCreateTicket<TicketDetail>(
+    TicketTypes.REDIS_CLUSTER_CUTOFF,
+  );
+
+  const handleSubmit = async () => {
+    const result = await tableRef.value!.validate();
+    if (!result) {
+      return;
+    }
+    const sameClusters: Record<string, RowData[]> = {};
+    const taskList: Promise<ServiceReturnType<typeof queryMasterSlavePairs>>[] = [];
+    formData.tableData.forEach((item) => {
+      if (!sameClusters[item.cluster.domain]) {
+        sameClusters[item.cluster.domain] = [];
+      }
+      sameClusters[item.cluster.domain].push(item);
+      item.cluster.cluster_ids.forEach((clusterId) => {
+        taskList.push(
+          queryMasterSlavePairs({
+            cluster_id: clusterId,
+          }),
+        );
+      });
+    });
+    const results = await Promise.all(taskList);
+    // 主从映射关系
+    const slaveMasterMap = _.flatten(results).reduce<Record<string, string>>((acc, item) => {
+      acc[item.master_ip] = item.slave_ip;
+      return acc;
+    }, {});
+
+    const infos = Object.values(sameClusters).map((sameRows) => {
+      const info = {
+        cluster_ids: sameRows[0].cluster.cluster_ids,
+        bk_cloud_id: sameRows[0].host.bk_cloud_id,
+        proxy: [],
+        redis_master: [],
+        redis_slave: [],
+        display_info: {
+          data: [],
+        },
+      } as unknown as TicketDetail['infos'][0];
+      const needDeleteSlaves: string[] = [];
+      sameRows.forEach((item) => {
+        const spec = {
+          bk_host_id: item.host.bk_host_id,
+          ip: item.host.ip,
+          spec_id: item.spec.id,
+        };
+        info.display_info.data.push({
+          ip: item.host.ip,
+          role: item.role,
+          cluster_domain: item.cluster.domain,
+          spec_id: item.spec?.id ?? 0,
+          spec_name: item.spec?.name ?? '',
+        });
+        const list = info[
+          item.role as 'redis_slave' | 'redis_master' | 'proxy'
+        ] as TicketDetail['infos'][0]['redis_master'];
+        _.merge(info, {
+          [item.role]: [...list, spec],
+        });
+        if (item.role === 'redis_master') {
+          const deleteSlaveIp = slaveMasterMap[item.host.ip];
+          if (deleteSlaveIp) {
+            needDeleteSlaves.push(deleteSlaveIp);
+          }
+        }
+      });
+      // 当选择了master的时候，过滤对应的slave
+      info.redis_slave = info.redis_slave.filter((item) => !needDeleteSlaves.includes(item.ip));
+      return info;
+    });
+
+    createTicketRun(
+      {
+        ip_source: 'resource_pool',
+        infos,
+      },
+      formData.remark,
+    );
+  };
+
+  const handleReset = () => {
+    Object.assign(formData, defaultData());
+  };
+
+  const handleBatchEdit = (list: SelectorHost[]) => {
+    const dataList = list.reduce<RowData[]>((acc, item) => {
+      if (!selectedMap.value[item.ip]) {
+        acc.push(
+          createTableRow({
+            host: {
+              bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+              bk_cloud_id: item.bk_cloud_id,
+              bk_host_id: item.bk_host_id,
+              ip: item.ip,
+            },
+            role: item.role,
+            cluster: {
+              domain: item.cluster_domain,
+              cluster_ids: item.cluster_ids,
+            },
+            spec: item.spec_config,
+          }),
+        );
+      }
+      return acc;
+    }, []);
+    formData.tableData = [...(selected.value.length ? formData.tableData : []), ...dataList];
+  };
+
+  /**
+   *
+   * @param target 手输ip后查询到的数据
+   * @param item 行数据
+   * @param index 行索引
+   */
+  const handleChange = (target: HostInputed, item: RowData, index: number) => {
+    const roleMap = {
+      master: 'redis_master',
+      slave: 'redis_slave',
+      proxy: 'proxy',
+    } as Record<string, string>;
+    const row = createTableRow({
+      host: {
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        bk_cloud_id: target.bk_cloud_id,
+        bk_host_id: target.bk_host_id,
+        ip: target.ip,
+      },
+      role: roleMap[target.role] || '',
+      cluster: {
+        domain: target.master_domain,
+        cluster_ids: target.related_clusters.map((item) => item.id),
+      },
+      spec: target.spec_config,
+    });
+    Object.assign(item, row);
+
+    // 输入的主机为master主机带出slave主机
+    if (target.role === 'master') {
+      queryMasterSlavePairs({
+        cluster_id: target.cluster_id,
+      }).then((data) => {
+        const { slaves } = data[0];
+        if (slaves) {
+          formData.tableData.splice(
+            index + 1,
+            0,
+            createTableRow({
+              host: {
+                bk_biz_id: slaves.bk_biz_id,
+                bk_cloud_id: slaves.bk_cloud_id,
+                bk_host_id: slaves.bk_host_id,
+                ip: slaves.ip,
+              },
+              role: 'redis_slave',
+              cluster: row.cluster,
+              spec: row.spec,
+            }),
+          );
+        }
+      });
+    }
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/Index.vue
new file mode 100644
index 0000000000..7d5a04e740
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/Index.vue
@@ -0,0 +1,32 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Component :is="components[page]" />
+</template>
+<script setup lang="ts">
+  import { useRoute } from 'vue-router';
+
+  import Page2 from '@views/db-manage/common/create-ticket-success/Index.vue';
+
+  import Page1 from './Create.vue';
+
+  const route = useRoute();
+
+  const components = {
+    create: Page1,
+    success: Page2,
+  };
+
+  const page = computed(() => (route.params.page as keyof typeof components) || 'create');
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/HostColumn.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/HostColumn.vue
new file mode 100644
index 0000000000..de5b004143
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/HostColumn.vue
@@ -0,0 +1,149 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    :append-rules="rules"
+    field="host.ip"
+    fixed="left"
+    :label="t('目标从库主机')"
+    :loading="loading"
+    :min-width="150"
+    required>
+    <template #headAppend>
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-host-select"
+        @click="handleShowSelector">
+        <DbIcon type="batch-host-select" />
+      </span>
+    </template>
+    <Input
+      v-model="modelValue.ip"
+      :placeholder="t('请输入IP')"
+      @change="handleInputChange" />
+  </Column>
+  <InstanceSelector
+    v-model:is-show="showSelector"
+    active-tab="idleHosts"
+    db-type="redis"
+    :panel-list="['idleHosts', 'manualInput']"
+    role="ip"
+    :selected="selectedIps"
+    @change="handleSelectorChange" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { checkInstance } from '@services/source/dbbase';
+
+  import { ipv4 } from '@common/regex';
+
+  import { Column, Input } from '@components/editable-table/Index.vue';
+
+  import InstanceSelector, { type InstanceSelectorValues } from './instance-selector/Index.vue';
+
+  export type SelectorHost = InstanceSelectorValues['idleHosts'][0];
+  export type HostInputed = ServiceReturnType<typeof checkInstance>[0];
+
+  interface Props {
+    selected: {
+      ip: string;
+    }[];
+  }
+
+  interface Emits {
+    (e: 'batch-edit', list: InstanceSelectorValues['idleHosts']): void;
+    (e: 'change', data: HostInputed): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<{
+    bk_biz_id?: number;
+    bk_host_id?: number;
+    bk_cloud_id?: number;
+    ip: string;
+  }>({
+    default: () => ({
+      ip: '',
+    }),
+  });
+
+  const { t } = useI18n();
+
+  const showSelector = ref(false);
+  const selectedIps = computed<InstanceSelectorValues>(() => ({
+    idleHosts: props.selected.map(
+      (item) =>
+        ({
+          ip: item.ip,
+        }) as InstanceSelectorValues['idleHosts'][0],
+    ),
+  }));
+
+  const rules = [
+    {
+      validator: (value: string) => ipv4.test(value),
+      message: t('IP 格式不符合IPv4标准'),
+      trigger: 'change',
+    },
+    {
+      validator: () => Boolean(modelValue.value.bk_host_id),
+      message: t('目标主机不存在'),
+      trigger: 'blur',
+    },
+  ];
+
+  const { run: queryHost, loading } = useRequest(checkInstance, {
+    manual: true,
+    onSuccess: (data) => {
+      modelValue.value.bk_host_id = undefined;
+      if (data.length) {
+        const [currentHost] = data;
+        modelValue.value = {
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          bk_host_id: currentHost.bk_host_id,
+          bk_cloud_id: currentHost.bk_cloud_id,
+          ip: currentHost.ip,
+        };
+        emits('change', currentHost);
+      }
+    },
+  });
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    queryHost({
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      instance_addresses: [value],
+    });
+  };
+
+  const handleSelectorChange = (selected: InstanceSelectorValues) => {
+    emits('batch-edit', selected.idleHosts);
+  };
+</script>
+<style lang="less" scoped>
+  .batch-host-select {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/SpecColumn.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/SpecColumn.vue
new file mode 100644
index 0000000000..2507e2a63f
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/SpecColumn.vue
@@ -0,0 +1,64 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    :label="t('规格需求')"
+    :min-width="150">
+    <template #head>
+      <div v-bk-tooltips="t('默认使用部署方案中选定的规格，将从资源池自动匹配机器')">
+        <span class="spec-title">{{ t('规格需求') }}</span>
+      </div>
+    </template>
+    <Block
+      v-model="modelValue.name"
+      :placeholder="t('自动生成')">
+      <template #append>
+        <SpecPanel
+          v-if="modelValue.name"
+          :data="modelValue"
+          :hide-qps="!modelValue.qps.min">
+          <DbIcon
+            class="visible-icon ml-4"
+            type="visible1" />
+        </SpecPanel>
+      </template>
+    </Block>
+  </Column>
+</template>
+
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+
+  import { Block, Column } from '@components/editable-table/Index.vue';
+  import SpecPanel from '@components/render-table/columns/spec-display/Panel.vue';
+
+  import type { SpecInfo } from '@views/db-manage/redis/common/spec-panel/Index.vue';
+
+  const modelValue = defineModel<SpecInfo>({
+    required: true,
+  });
+  const { t } = useI18n();
+</script>
+
+<style lang="less" scoped>
+  .spec-title {
+    border-bottom: 1px dashed #979ba5;
+  }
+
+  .visible-icon {
+    font-size: 16px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/Index.vue
new file mode 100644
index 0000000000..48c2897d87
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/Index.vue
@@ -0,0 +1,172 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <BkDialog
+    class="dbm-proxy-selector"
+    :close-icon="false"
+    :draggable="false"
+    :esc-close="false"
+    :is-show="isShow"
+    :quick-close="false"
+    width="80%"
+    @closed="handleClose">
+    <BkResizeLayout
+      :border="false"
+      collapsible
+      initial-divide="320px"
+      :max="360"
+      :min="320"
+      placement="right">
+      <template #main>
+        <PanelTab
+          v-model="panelTabActive"
+          :panel-list="panelList" />
+        <Component
+          :is="renderCom"
+          :key="panelTabActive"
+          :active-tab="panelTabActive"
+          :db-type="dbType"
+          :is-radio-mode="isRadioMode"
+          :last-values="lastValues"
+          :role="role"
+          :table-settings="tableSettings"
+          :valid-tab="panelList[0]"
+          @change="handleChange" />
+      </template>
+      <template #aside>
+        <PreviewResult
+          :active-tab="panelTabActive"
+          :last-values="lastValues"
+          table-key="ip"
+          @change="handleChange" />
+      </template>
+    </BkResizeLayout>
+    <template #footer>
+      <span
+        v-bk-tooltips="{
+          content: $t('请选择实例'),
+          disabled: !isEmpty,
+        }"
+        class="inline-block">
+        <BkButton
+          class="w-88"
+          :disabled="isEmpty"
+          theme="primary"
+          @click="handleSubmit">
+          {{ $t('确定') }}
+        </BkButton>
+      </span>
+      <BkButton
+        class="ml-8 w-88"
+        @click="handleClose">
+        {{ $t('取消') }}
+      </BkButton>
+    </template>
+  </BkDialog>
+</template>
+<script lang="ts">
+  import type { ChoosedItem } from './components/RenderRedisHost.vue';
+
+  export type InstanceSelectorValues = { idleHosts: ChoosedItem[] };
+
+  export default {
+    name: 'InstanceSelector',
+  };
+</script>
+<script setup lang="ts">
+  import getSettings from './common/tableSettings';
+  import PanelTab, { activePanelInjectionKey, defaultPanelList, type PanelTypes } from './components/PanelTab.vue';
+  import PreviewResult from './components/preview-result/Index.vue';
+  import RenderManualInput from './components/RenderManualInput.vue';
+  import RenderRedis from './components/RenderRedis.vue';
+
+  interface Props {
+    isShow?: boolean;
+    panelList?: Array<PanelTypes>;
+    role?: string;
+    selected?: InstanceSelectorValues;
+    dbType?: string;
+    activeTab?: PanelTypes;
+    isRadioMode?: boolean;
+  }
+
+  interface Emits {
+    (e: 'update:isShow', value: boolean): void;
+    (e: 'change', value: InstanceSelectorValues): void;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    isShow: false,
+    panelList: () => [...defaultPanelList],
+    role: '',
+    selected: undefined,
+    dbType: 'redis',
+    activeTab: 'idleHosts',
+    isRadioMode: false,
+  });
+  const emits = defineEmits<Emits>();
+
+  const tableSettings = getSettings(props.role);
+  const panelTabActive = ref<PanelTypes>(props.activeTab);
+
+  const lastValues = reactive<InstanceSelectorValues>({ idleHosts: [] });
+  const isEmpty = computed(() => !Object.values(lastValues).some((values) => values.length > 0));
+  provide(activePanelInjectionKey, panelTabActive);
+
+  const comMap = {
+    idleHosts: RenderRedis,
+    manualInput: RenderManualInput,
+  };
+
+  const renderCom = computed(() => comMap[panelTabActive.value as keyof typeof comMap]);
+
+  watch(
+    () => [props.isShow, props.selected],
+    ([show, selected]) => {
+      if (show && selected) {
+        Object.assign(lastValues, selected);
+      }
+    },
+  );
+
+  const handleChange = (values: InstanceSelectorValues) => {
+    Object.assign(lastValues, values);
+  };
+
+  const handleSubmit = () => {
+    emits('change', lastValues);
+    handleClose();
+  };
+
+  const handleClose = () => {
+    emits('update:isShow', false);
+  };
+</script>
+<style lang="less">
+  .dbm-proxy-selector {
+    display: block;
+    width: 80%;
+    max-width: 1600px;
+    min-width: 1200px;
+
+    .bk-modal-header {
+      display: none;
+    }
+
+    .bk-dialog-content {
+      padding: 0;
+      margin: 0;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/common/tableSettings.ts b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/common/tableSettings.ts
new file mode 100644
index 0000000000..2f62f989d5
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/common/tableSettings.ts
@@ -0,0 +1,67 @@
+/*
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+ */
+
+import { t } from '@locales/index';
+
+const getSettings = (role?: string) => ({
+  fields: [
+    {
+      label: role ? role.charAt(0).toUpperCase() + role.slice(1) : t('实例'),
+      field: 'instance_address',
+      disabled: true,
+    },
+    {
+      label: t('角色'),
+      field: 'role',
+    },
+    {
+      label: t('实例状态'),
+      field: 'status',
+    },
+    {
+      label: t('管控区域'),
+      field: 'cloud_area',
+    },
+    {
+      label: t('Agent状态'),
+      field: 'alive',
+    },
+    {
+      label: t('主机名称'),
+      field: 'host_name',
+    },
+    {
+      label: t('OS名称'),
+      field: 'os_name',
+    },
+    {
+      label: t('所属云厂商'),
+      field: 'cloud_vendor',
+    },
+    {
+      label: t('OS类型'),
+      field: 'os_type',
+    },
+    {
+      label: t('主机ID'),
+      field: 'host_id',
+    },
+    {
+      label: 'Agent ID',
+      field: 'agent_id',
+    },
+  ],
+  checked: ['instance_address', 'role', 'cloud_area', 'alive', 'host_name'],
+});
+
+export default getSettings;
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/common/utils.ts b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/common/utils.ts
new file mode 100644
index 0000000000..76f5ed7416
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/common/utils.ts
@@ -0,0 +1,19 @@
+/*
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+ */
+
+import { t } from '@locales/index';
+
+export const textMap = {
+  idleHosts: t('待替换的主机'),
+  manualInput: t('手动输入'),
+};
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/PanelTab.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/PanelTab.vue
new file mode 100644
index 0000000000..962a3426b4
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/PanelTab.vue
@@ -0,0 +1,82 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <div class="instance-selector-panel-tab">
+    <div
+      v-for="value in panelList"
+      :key="value"
+      class="tab-item"
+      :class="{
+        active: modelValue === value,
+      }"
+      @click="handleClick(value)">
+      {{ textMap[value] }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import type { InjectionKey, Ref } from 'vue';
+
+  import { textMap } from '../common/utils';
+
+  export const defaultPanelList = ['idleHosts', 'manualInput'] as const;
+  export type PanelTypes = (typeof defaultPanelList)[number];
+  export const activePanelInjectionKey: InjectionKey<Ref<PanelTypes>> = Symbol('activePanel');
+</script>
+
+<script setup lang="ts">
+  interface Props {
+    modelValue: string;
+    panelList?: Array<PanelTypes>;
+  }
+  interface Emits {
+    (e: 'update:modelValue', value: string): void;
+  }
+
+  const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
+
+  const handleClick = (tab: string) => {
+    if (props.modelValue === tab) {
+      return;
+    }
+    emits('update:modelValue', tab);
+  };
+</script>
+<style lang="less">
+  .instance-selector-panel-tab {
+    display: flex;
+
+    .tab-item {
+      display: flex;
+      height: 40px;
+      cursor: pointer;
+      background-color: #fafbfd;
+      border-bottom: 1px solid #dcdee5;
+      justify-content: center;
+      align-items: center;
+      flex: 1;
+
+      &.active {
+        background-color: #fff;
+        border-bottom-color: transparent;
+      }
+
+      & ~ .tab-item {
+        border-left: 1px solid #dcdee5;
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderManualHost.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderManualHost.vue
new file mode 100644
index 0000000000..92e2636841
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderManualHost.vue
@@ -0,0 +1,249 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <div class="instance-selector-render-manual-host">
+    <BkInput
+      v-model.trim="search"
+      clearable
+      :placeholder="$t('请输入实例')" />
+    <DbOriginalTable
+      :columns="columns"
+      :data="renderData"
+      :height="505"
+      :is-searching="!!search"
+      :settings="tableSettings"
+      style="margin-top: 12px"
+      @clear-search="handleClearSearch"
+      @row-click.stop="handleRowClick" />
+  </div>
+</template>
+
+<script setup lang="tsx">
+  import type { Table } from 'bkui-vue';
+  import { useI18n } from 'vue-i18n';
+
+  import DbStatus from '@components/db-status/index.vue';
+
+  import type { InstanceSelectorValues } from '../Index.vue';
+
+  import type { InstanceItem } from './RenderManualInput.vue';
+  import type { ChoosedItem } from './RenderRedisHost.vue';
+
+  interface TableItem {
+    data: InstanceItem
+  }
+
+  interface Props {
+    role?: string;
+    lastValues: InstanceSelectorValues;
+    tableData: InstanceItem[];
+    tableSettings: InstanceType<typeof Table>['$props']['settings'];
+  }
+
+  interface Emits {
+    (e: 'change', value: InstanceSelectorValues): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+
+  const search = ref('');
+
+  const checkedMap = shallowRef({} as Record<string, ChoosedItem>);
+
+  watch(() => props.lastValues, () => {
+    checkedMap.value = {};
+    for (const checkedList of Object.values(props.lastValues)) {
+      for (const item of checkedList) {
+        checkedMap.value[item.ip] = item as ChoosedItem;
+      }
+    }
+  }, { immediate: true, deep: true });
+
+  const renderData = computed(() => {
+    if (search.value === '') return props.tableData;
+
+    return props.tableData.filter(item => (
+      item.ip.includes(search.value)
+    ));
+  });
+  const isSelectedAll = computed(() => (
+    renderData.value.length > 0
+    && renderData.value.length === renderData.value.filter(item => checkedMap.value[item.ip]).length
+  ));
+
+  const columns = [
+    {
+      width: 60,
+      fixed: 'left',
+      label: () => (
+        <bk-checkbox
+          label={true}
+          model-value={isSelectedAll.value}
+          onClick={(e: Event) => e.stopPropagation()}
+          onChange={handleSelectPageAll}
+        />
+      ),
+      render: ({ data }: TableItem) => (
+        <bk-checkbox
+          style="vertical-align: middle;"
+          label={true}
+          model-value={Boolean(checkedMap.value[data.ip])}
+          onClick={(e: Event) => e.stopPropagation()}
+          onChange={(value: boolean) => handleTableSelectOne(value, data)}
+        />
+      ),
+    },
+    {
+      fixed: 'left',
+      minWidth: 160,
+      label: props.role ? props.role.charAt(0).toUpperCase() + props.role.slice(1) : t('实例'),
+      field: 'ip',
+    },
+    {
+      label: t('角色'),
+      field: 'role',
+      showOverflowTooltip: true,
+      // filter: {
+      //   list: [{ text: 'master', value: 'master' }, { text: 'slave', value: 'slave' }, { text: 'proxy', value: 'proxy' }],
+      // },
+      render: ({ data } : TableItem) => <span>{data.role}</span>,
+    },
+    {
+      label: t('实例状态'),
+      field: 'status',
+      render: ({ data }: TableItem) => {
+        const info = data.host_info.alive === 1 ? { theme: 'success', text: t('正常') } : { theme: 'danger', text: t('异常') };
+        return <DbStatus theme={info.theme}>{info.text}</DbStatus>;
+      },
+    },
+    {
+      minWidth: 100,
+      label: t('管控区域'),
+      field: 'cloud_area',
+      render: ({ data }: TableItem) => data.host_info?.cloud_area.name || '--',
+    },
+    {
+      minWidth: 100,
+      label: t('Agent状态'),
+      field: 'alive',
+      sort: true,
+      render: ({ data }: TableItem) => {
+        const info = data.host_info?.alive === 1 ? { theme: 'success', text: t('正常') } : { theme: 'danger', text: t('异常') };
+        return <DbStatus theme={info.theme}>{info.text}</DbStatus>;
+      },
+    },
+    {
+      label: t('主机名称'),
+      field: 'host_name',
+      showOverflowTooltip: true,
+      render: ({ data }: TableItem) => data.host_info?.host_name || '--',
+    },
+    {
+      label: t('OS名称'),
+      field: 'os_name',
+      showOverflowTooltip: true,
+      render: ({ data }: TableItem) => data.host_info?.os_name || '--',
+    },
+    {
+      label: t('所属云厂商'),
+      field: 'cloud_vendor',
+      showOverflowTooltip: true,
+      render: ({ data }: TableItem) => data.host_info?.cloud_vendor || '--',
+    },
+    {
+      label: t('OS类型'),
+      field: 'os_type',
+      showOverflowTooltip: true,
+      render: ({ data }: TableItem) => data.host_info?.os_type || '--',
+    },
+    {
+      label: t('主机ID'),
+      field: 'host_id',
+      showOverflowTooltip: true,
+      render: ({ data }: TableItem) => data.host_info?.host_id || '--',
+    },
+    {
+      label: 'Agent ID',
+      field: 'agent_id',
+      showOverflowTooltip: true,
+      render: ({ data }: TableItem) => data.host_info?.agent_id || '--',
+    },
+  ];
+
+  const triggerChange = () => {
+    const lastValues: InstanceSelectorValues = {
+      idleHosts: [],
+    };
+    lastValues.idleHosts = Object.values(checkedMap.value);
+
+    emits('change', {
+      ...props.lastValues,
+      ...lastValues,
+    });
+  };
+
+  const formatValue = (data: InstanceItem) => ({
+    bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+    bk_host_id: data?.bk_host_id || 0,
+    bk_cloud_id: data?.host_info?.cloud_id || 0,
+    ip: data?.ip || '',
+    role: data?.role || '',
+    cluster_ids: data.related_clusters.map(item=>item.id) || [],
+    cluster_domain: data.related_clusters[0].master_domain ?? '',
+    spec_config: data?.spec_config || null,
+  });
+
+  const handleSelectPageAll = (checked: boolean) => {
+    const lastCheckMap = { ...checkedMap.value };
+    for (const item of renderData.value) {
+      if (checked) {
+        lastCheckMap[item.ip] = formatValue(item);
+      } else {
+        delete lastCheckMap[item.ip];
+      }
+    }
+    checkedMap.value = lastCheckMap;
+    triggerChange();
+  };
+
+  const handleTableSelectOne = (checked: boolean, data: InstanceItem) => {
+    const lastCheckMap = { ...checkedMap.value };
+    if (checked) {
+      lastCheckMap[data.ip] = formatValue(data);
+    } else {
+      delete lastCheckMap[data.ip];
+    }
+    checkedMap.value = lastCheckMap;
+    triggerChange();
+  };
+
+  const handleRowClick = (key: number, data: InstanceItem) => {
+    const checked = checkedMap.value[data.ip];
+    handleTableSelectOne(!checked, data);
+  };
+
+  const handleClearSearch = () => {
+    search.value = '';
+  };
+</script>
+
+<style lang="less">
+  .instance-selector-render-manual-host {
+    padding: 0 24px;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderManualInput.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderManualInput.vue
new file mode 100644
index 0000000000..85bc75f55a
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderManualInput.vue
@@ -0,0 +1,333 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <div class="instance-selector-manual-input">
+    <BkResizeLayout
+      :border="false"
+      collapsible
+      initial-divide="480px"
+      :max="600"
+      :min="420">
+      <template #aside>
+        <div class="manual-input-wrapper">
+          <BkInput
+            ref="inputRef"
+            v-model.trim="inputState.values"
+            class="manual-input-textarea"
+            :placeholder="inputState.placeholder"
+            type="textarea"
+            @input="handleInput" />
+          <div class="manual-input-errors">
+            <span
+              v-if="errorState.format.show"
+              class="mr-8">
+              <I18nT
+                keypath="n处格式错误"
+                tag="span">
+                <strong>{{ errorState.format.count }}</strong>
+              </I18nT>
+              <DbIcon
+                v-bk-tooltips="$t('标记错误')"
+                class="manual-input-icons"
+                type="audit"
+                @click="handleSelectionError('format')" />
+            </span>
+            <span v-if="errorState.instance.show">
+              <I18nT
+                keypath="n处IP_Port不存在"
+                tag="span">
+                <strong>{{ errorState.instance.count }}</strong>
+              </I18nT>
+              <DbIcon
+                v-bk-tooltips="$t('标记错误')"
+                class="manual-input-icons"
+                type="audit"
+                @click="handleSelectionError('instance')" />
+            </span>
+          </div>
+          <div class="manual-input-buttons">
+            <BkButton
+              class="mr-8"
+              :disabled="!inputState.values"
+              :loading="inputState.isLoading"
+              outline
+              size="small"
+              theme="primary"
+              @click="handleParsingValues">
+              {{ $t('解析并添加') }}
+            </BkButton>
+            <BkButton
+              class="w-88"
+              size="small"
+              @click="() => (inputState.values = '')">
+              {{ $t('清空') }}
+            </BkButton>
+          </div>
+        </div>
+      </template>
+      <template #main>
+        <BkLoading :loading="inputState.isLoading">
+          <RenderManualHost
+            :last-values="lastValues"
+            :role="role"
+            :table-data="inputState.tableData"
+            :table-settings="tableSettings"
+            @change="handleHostChange" />
+        </BkLoading>
+      </template>
+    </BkResizeLayout>
+  </div>
+</template>
+<script setup lang="ts">
+  import type { Table } from 'bkui-vue';
+  import _ from 'lodash';
+  import { useI18n } from 'vue-i18n';
+
+  import RedisClusterNodeByIpModel from '@services/model/redis/redis-cluster-node-by-ip';
+  import { checkRedisInstances } from '@services/source/instances';
+  import { queryMasterSlavePairs } from '@services/source/redisToolbox';
+  import type { InstanceInfos } from '@services/types';
+
+  import { useGlobalBizs } from '@stores';
+
+  import { ipv4 } from '@common/regex';
+
+  import type { InstanceSelectorValues } from '../Index.vue';
+
+  import type { PanelTypes } from './PanelTab.vue';
+  import RenderManualHost from './RenderManualHost.vue';
+
+  export interface InstanceItem extends Omit<InstanceInfos, 'spec_config'> {
+    spec_config: RedisClusterNodeByIpModel['spec_config'];
+  }
+
+  interface Props {
+    validTab: Exclude<PanelTypes, 'manualInput'>;
+    lastValues: InstanceSelectorValues;
+    tableSettings: InstanceType<typeof Table>['$props']['settings'];
+    role?: string;
+  }
+
+  interface Emits {
+    (e: 'change', value: InstanceSelectorValues): void;
+  }
+  const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+  const { currentBizId } = useGlobalBizs();
+  const inputRef = ref();
+
+  const inputState = reactive({
+    values: '',
+    placeholder: t('请输入IP如_1_1_1_1多个可使用换行_空格或_分隔'),
+    isLoading: false,
+    tableData: [] as InstanceItem[],
+  });
+  const errorState = reactive({
+    format: {
+      show: false,
+      selectionStart: 0,
+      selectionEnd: 0,
+      count: 0,
+    },
+    instance: {
+      show: false,
+      selectionStart: 0,
+      selectionEnd: 0,
+      count: 0,
+    },
+  });
+
+  const handleHostChange = (values: InstanceSelectorValues) => {
+    emits('change', values);
+  };
+
+  const handleInput = () => {
+    errorState.format.show = false;
+    errorState.instance.show = false;
+  };
+
+  /**
+   * 标记错误
+   */
+  const handleSelectionError = (key: 'format' | 'instance') => {
+    const { selectionStart, selectionEnd } = errorState[key];
+    const textarea = inputRef.value?.$el?.getElementsByTagName?.('textarea')?.[0];
+    if (textarea) {
+      (textarea as HTMLInputElement).focus();
+      (textarea as HTMLInputElement).setSelectionRange(selectionStart, selectionEnd);
+    }
+  };
+
+  /**
+   * 处理分隔内容，过滤空内容
+   */
+  const getValues = () =>
+    inputState.values
+      .replace(/\s+|[;,|]/g, ' ') // 将空格 换行符 ；，｜符号统一为空格
+      .split(' ')
+      .filter((value) => value);
+
+  /**
+   * 解析输入内容
+   */
+  const handleParsingValues = async () => {
+    const formatErrorLines: string[] = [];
+    const lines = getValues();
+    const availableLines: string[] = [];
+    // 处理格式错误
+    lines.forEach((line) => {
+      if (!ipv4.test(line)) {
+        formatErrorLines.push(line);
+      } else {
+        availableLines.push(line);
+      }
+    });
+    const count = formatErrorLines.length;
+    errorState.format.count = count;
+    errorState.format.selectionStart = 0;
+    errorState.format.selectionEnd = formatErrorLines.join('\n').length;
+    inputState.isLoading = true;
+    // 检查 IP 是否存在
+    const queryResult = await checkRedisInstances({
+      bizId: currentBizId,
+      instance_addresses: availableLines,
+    });
+    // 获取ip主从关系
+    const masterSlaveResult = await Promise.all(
+      queryResult.map((item) => queryMasterSlavePairs({ cluster_id: item.cluster_id })),
+    );
+    const masterSlaveMap = masterSlaveResult.flat().reduce<Record<string, string>>((acc, cur) => {
+      acc[cur.master_ip] = cur.slave_ip;
+      return acc;
+    }, {});
+    const ipsSet = new Set(availableLines);
+    const legalInstances = _.uniqBy(
+      queryResult.reduce<InstanceItem[]>((acc, cur) => {
+        if (ipsSet.has(cur.ip)) {
+          // 格式化实例角色
+          const roleMap = {
+            master: 'redis_master',
+            slave: 'redis_slave',
+            proxy: 'proxy',
+          };
+          acc.push({
+            ...cur,
+            role: roleMap[cur.role as keyof typeof roleMap],
+          });
+          // 如果是主ip则带出从ip
+          if (cur.role === 'master') {
+            const slaveIp = masterSlaveMap[cur.ip];
+            acc.push({
+              ...cur,
+              ip: slaveIp,
+              role: 'redis_slave',
+            });
+          }
+          ipsSet.delete(cur.ip);
+        }
+        return acc;
+      }, []),
+      'ip',
+    );
+    inputState.isLoading = false;
+    // 错误ip(未找到)
+    const checkErrorLines = [...ipsSet];
+
+    inputState.tableData.splice(0, inputState.tableData.length, ...legalInstances);
+    errorState.instance.count = checkErrorLines.length;
+    const { selectionEnd } = errorState.format;
+    errorState.instance.selectionStart = selectionEnd === 0 ? 0 : selectionEnd + 1;
+    errorState.instance.selectionEnd = checkErrorLines.join('\n').length + errorState.format.selectionEnd + 1;
+
+    // 解析完成后选中
+    const lastValues = { ...props.lastValues };
+    const currentTab = props.validTab;
+    for (const item of inputState.tableData) {
+      const list = lastValues[currentTab];
+      const isExisted = list.find((i) => i.ip === item.ip);
+      if (!isExisted) {
+        item.cluster_domain = item.master_domain;
+        lastValues[currentTab].push(item);
+      }
+    }
+    emits('change', {
+      ...props.lastValues,
+      ...lastValues,
+    });
+    errorState.format.show = count > 0;
+    errorState.instance.show = checkErrorLines.length > 0;
+    inputState.isLoading = false;
+
+    const newLines = [...formatErrorLines, ...checkErrorLines];
+    // 将调整好的内容回填显示
+    inputState.values = newLines.join('\n');
+  };
+</script>
+
+<style lang="less">
+  .instance-selector-manual-input {
+    height: 585px;
+    padding-top: 16px;
+
+    .bk-resize-layout {
+      height: 100%;
+    }
+
+    .manual-input-wrapper {
+      padding: 0 16px;
+    }
+
+    .manual-input-textarea {
+      height: 508px;
+      margin-bottom: 8px;
+
+      textarea {
+        height: 100%;
+
+        &::selection {
+          background-color: #fdd;
+        }
+      }
+    }
+
+    .manual-input-errors {
+      font-size: @font-size-mini;
+      color: @danger-color;
+    }
+
+    .manual-input-icons {
+      font-size: @font-size-large;
+      color: @gray-color;
+      cursor: pointer;
+
+      &:hover {
+        color: @default-color;
+      }
+    }
+
+    .manual-input-buttons {
+      display: flex;
+      align-items: center;
+      margin-top: 5px;
+
+      .bk-button {
+        &:first-child {
+          flex: 1;
+        }
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderRedis.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderRedis.vue
new file mode 100644
index 0000000000..ccb78f5e60
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderRedis.vue
@@ -0,0 +1,306 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <BkLoading :loading="isTreeDataLoading">
+    <div class="instance-selector-topo">
+      <BkResizeLayout
+        :border="false"
+        collapsible
+        initial-divide="340px"
+        :max="420"
+        :min="320">
+        <template #aside>
+          <div class="topo-tree-box">
+            <BkInput
+              v-model="treeSearch"
+              clearable
+              :placeholder="$t('搜索拓扑节点')" />
+            <div style="height: calc(100% - 50px); margin-top: 12px">
+              <BkTree
+                ref="treeRef"
+                children="children"
+                :data="treeData"
+                label="name"
+                :node-content-action="['click']"
+                :search="treeSearch"
+                selectable
+                :show-node-type-icon="false"
+                virtual-render
+                @node-click="handleNodeClick">
+                <template #node="item">
+                  <div class="custom-tree-node">
+                    <span class="custom-tree-node__tag">
+                      {{ item.obj === 'biz' ? '业' : '集' }}
+                    </span>
+                    <span
+                      v-overflow-tips
+                      class="custom-tree-node__name text-overflow">
+                      {{ item.name }}
+                    </span>
+                    <span class="custom-tree-node__count">
+                      {{ item.count }}
+                    </span>
+                  </div>
+                </template>
+              </BkTree>
+            </div>
+          </div>
+        </template>
+        <template #main>
+          <div style="height: 570px">
+            <RenderContent
+              :is-radio-mode="isRadioMode"
+              :last-values="lastValues"
+              :master-slave-map="masterSlaveMap"
+              :node="selectNode"
+              :role="role"
+              :table-settings="tableSettings"
+              @change="handleHostChange" />
+          </div>
+        </template>
+      </BkResizeLayout>
+    </div>
+  </BkLoading>
+</template>
+<script setup lang="ts">
+  import type { Table } from 'bkui-vue';
+
+  import { getRedisList } from '@services/source/redis';
+  import { queryMasterSlavePairs } from '@services/source/redisToolbox';
+
+  import { useGlobalBizs } from '@stores';
+
+  import type { InstanceSelectorValues } from '../Index.vue';
+
+  import type { PanelTypes } from './PanelTab.vue';
+  import RenderRedisHost from './RenderRedisHost.vue';
+
+  interface TopoTreeData {
+    id: number;
+    name: string;
+    obj: 'biz' | 'cluster';
+    count: number;
+    children?: TopoTreeData[];
+  }
+
+  interface Emits {
+    (e: 'change', value: InstanceSelectorValues): void;
+  }
+
+  interface Props {
+    lastValues: InstanceSelectorValues;
+    tableSettings: InstanceType<typeof Table>['$props']['settings'];
+    role?: string;
+    activeTab?: PanelTypes;
+    isRadioMode?: boolean;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    role: '',
+    activeTab: 'idleHosts',
+    isRadioMode: false,
+  });
+  const emits = defineEmits<Emits>();
+
+  const { currentBizId, currentBizInfo } = useGlobalBizs();
+
+  const isTreeDataLoading = ref(false);
+  const treeRef = ref();
+  const treeSearch = ref('');
+  const selectNode = ref<{
+    id: number;
+    name: string;
+  }>();
+  const treeData = shallowRef<TopoTreeData[]>([]);
+
+  const renderMap = { idleHosts: RenderRedisHost } as Record<string, any>;
+
+  const RenderContent = computed(() => renderMap[props.activeTab as string]);
+
+  const masterSlaveMap: Record<string, ServiceReturnType<typeof queryMasterSlavePairs>[number]> = {};
+
+  const fetchMasterSlavePairs = (clusterIds: number[]) => {
+    const taskList = clusterIds.map((id) => queryMasterSlavePairs({ cluster_id: id }));
+    Promise.all(taskList).then((resultList) => {
+      resultList.flat().forEach((item) => {
+        masterSlaveMap[item.master_ip] = item;
+      });
+    });
+  };
+
+  const fetchClusterTopo = () => {
+    isTreeDataLoading.value = true;
+    getRedisList({
+      offset: 0,
+      limit: -1,
+    })
+      .then((data) => {
+        let total = 0;
+        const clusterIds: number[] = [];
+        const children = data.results.reduce<TopoTreeData[]>((acc, cluster) => {
+          total += cluster.count;
+          clusterIds.push(cluster.id);
+          return [
+            ...acc,
+            {
+              id: cluster.id,
+              name: cluster.master_domain,
+              obj: 'cluster',
+              count: cluster.count,
+            },
+          ];
+        }, []);
+        treeData.value = [
+          {
+            name: currentBizInfo?.display_name || '--',
+            id: currentBizId,
+            obj: 'biz',
+            count: total,
+            children,
+          },
+        ];
+        fetchMasterSlavePairs(clusterIds);
+        setTimeout(() => {
+          if (data.results.length > 0) {
+            [selectNode.value] = treeData.value;
+            const [firstRawNode] = treeRef.value.getData().data;
+            treeRef.value.setOpen(firstRawNode);
+            treeRef.value.setSelect(firstRawNode);
+          }
+        });
+      })
+      .catch((e) => {
+        console.error(e);
+      })
+      .finally(() => {
+        isTreeDataLoading.value = false;
+      });
+  };
+
+  fetchClusterTopo();
+
+  // 选中topo节点，获取topo节点下面的所有主机
+  const handleNodeClick = (
+    node: TopoTreeData,
+    info: unknown,
+    {
+      __is_open: isOpen,
+      __is_selected: isSelected,
+    }: {
+      __is_open: boolean;
+      __is_selected: boolean;
+      __index: number;
+    },
+  ) => {
+    const rawNode = treeRef.value.getData().data.find((item: { id: number }) => item.id === node.id);
+    selectNode.value = node;
+    if (!isOpen && !isSelected) {
+      treeRef.value.setNodeOpened(rawNode, true);
+      treeRef.value.setSelect(rawNode, true);
+      return;
+    }
+
+    if (isOpen && !isSelected) {
+      treeRef.value.setSelect(rawNode, true);
+      return;
+    }
+
+    if (isSelected) {
+      treeRef.value.setNodeOpened(rawNode, !isOpen);
+    }
+  };
+
+  const handleHostChange = (values: InstanceSelectorValues) => {
+    emits('change', values);
+  };
+</script>
+<style lang="less">
+  .instance-selector-topo {
+    display: block;
+    padding-top: 16px;
+
+    .bk-resize-layout {
+      height: 100%;
+    }
+
+    .topo-tree-box {
+      height: 100%;
+      max-height: 570px;
+      padding: 0 16px;
+
+      .bk-tree {
+        .bk-node-content {
+          font-size: 12px;
+        }
+
+        .bk-node-prefix {
+          width: 12px !important;
+          height: 12px !important;
+          color: #979ba5;
+        }
+
+        .bk-node-row {
+          .custom-tree-node {
+            display: flex;
+            align-items: center;
+
+            &__tag {
+              width: 20px;
+              height: 20px;
+              margin-right: 8px;
+              line-height: 20px;
+              color: white;
+              text-align: center;
+              background-color: #c4c6cc;
+              flex-shrink: 0;
+              border-radius: 50%;
+            }
+
+            &__name {
+              flex: 1;
+            }
+
+            &__count {
+              height: 16px;
+              padding: 0 6px;
+              line-height: 16px;
+              color: #979ba5;
+              background-color: #f0f1f5;
+              border-radius: 2px;
+              flex-shrink: 0;
+            }
+          }
+
+          &.is-selected {
+            color: @primary-color;
+            background-color: #e1ecff;
+
+            .custom-tree-node__tag {
+              background-color: #3a84ff;
+            }
+
+            .custom-tree-node__count {
+              color: white;
+              background-color: #a3c5fd;
+            }
+
+            .bk-node-prefix {
+              color: #3a84ff;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderRedisHost.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderRedisHost.vue
new file mode 100644
index 0000000000..e2c4d1d11e
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/RenderRedisHost.vue
@@ -0,0 +1,509 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <div class="instance-selector-render-topo-host">
+    <SerachBar
+      v-model="searchValue"
+      is-host
+      :placeholder="t('请输入或选择条件搜索')"
+      :search-attrs="searchAttrs"
+      :type="ClusterTypes.REDIS"
+      :validate-search-values="validateSearchValues"
+      @search-value-change="handleSearchValueChange" />
+    <BkLoading
+      :loading="isTableDataLoading"
+      :z-index="2">
+      <DbOriginalTable
+        class="table-box"
+        :columns="columns"
+        :data="tableData"
+        :is-anomalies="isAnomalies"
+        :is-searching="!!searchValue.length"
+        :max-height="530"
+        :pagination="pagination.count < 10 ? false : pagination"
+        remote-pagination
+        :settings="tableSettings"
+        style="margin-top: 12px"
+        @clear-search="clearSearchValue"
+        @column-filter="columnFilterChange"
+        @page-limit-change="handlePageLimitChange"
+        @page-value-change="handlePageValueChange" />
+    </BkLoading>
+  </div>
+</template>
+<script setup lang="tsx">
+  import type { Table } from 'bkui-vue';
+  import _ from 'lodash';
+  import { useI18n } from 'vue-i18n';
+
+  import { getRedisMachineList } from '@services/source/redis';
+  import type { queryMasterSlavePairs } from '@services/source/redisToolbox';
+
+  import { useLinkQueryColumnSerach } from '@hooks';
+
+  import { ClusterTypes, LocalStorageKeys } from '@common/const';
+
+  import DbStatus from '@components/db-status/index.vue';
+  import SerachBar from '@components/instance-selector/components/common/SearchBar.vue';
+
+  import type { SpecInfo } from '@views/db-manage/redis/common/spec-panel/Index.vue';
+
+  import { getSearchSelectorParams } from '@utils';
+
+  import type { InstanceSelectorValues } from '../Index.vue';
+
+  import { activePanelInjectionKey } from './PanelTab.vue';
+
+  type RedisHostModel = ServiceReturnType<typeof getRedisMachineList>['results'][number] & {
+    isShowTip?: boolean;
+  };
+
+  interface TableItem {
+    data: RedisHostModel
+  }
+
+  export interface Props {
+    tableSettings: InstanceType<typeof Table>['$props'],
+    lastValues: InstanceSelectorValues,
+    node?: {
+      id: number,
+      name: string
+      obj: 'biz' | 'cluster'
+    },
+    role?: string,
+    isRadioMode?: boolean,
+    masterSlaveMap?: Record<string, ServiceReturnType<typeof queryMasterSlavePairs>[number]>,
+  }
+
+  interface Emits {
+    (e: 'change', value: InstanceSelectorValues): void;
+  }
+
+  export interface ChoosedItem {
+    bk_biz_id: number;
+    bk_host_id: number;
+    bk_cloud_id: number;
+    ip: string;
+    role: string;
+    cluster_ids: number[];
+    cluster_domain: string;
+    spec_config: SpecInfo;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    node: undefined,
+    role: '',
+    isRadioMode: false,
+    masterSlaveMap: () => ({}),
+  });
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+
+  const {
+    columnAttrs,
+    searchAttrs,
+    searchValue,
+    columnCheckedMap,
+    columnFilterChange,
+    clearSearchValue,
+    validateSearchValues,
+    handleSearchValueChange,
+  } = useLinkQueryColumnSerach({
+    searchType: ClusterTypes.REDIS,
+    attrs: [
+      'bk_cloud_id'
+    ],
+    fetchDataFn: () => fetchData(),
+    defaultSearchItem: {
+      name: 'IP',
+      id: 'ip',
+    },
+    isDiscardNondefault: true,
+  });
+
+  const activePanel = inject(activePanelInjectionKey);
+
+  const showTipLocalValue = localStorage.getItem(LocalStorageKeys.REDIS_DB_REPLACE_MASTER_TIP);
+
+  const isAnomalies = ref(false);
+  const showMasterTip = ref(!showTipLocalValue);
+  const isTableDataLoading = ref(false);
+  const tableData = ref<RedisHostModel[]>([]);
+
+  const checkedMap = shallowRef<Record<string, ChoosedItem>>({});
+
+  const pagination = reactive({
+    count: 0,
+    current: 1,
+    limit: 10,
+    limitList: [10, 20, 50, 100],
+    align: 'right',
+    layout: ['total', 'limit', 'list'],
+  });
+
+  const isSelectedAll = computed(() => (
+    tableData.value.length > 0
+    && tableData.value.length === tableData.value.filter(item => checkedMap.value[item.ip]).length
+  ));
+
+  const isIndeterminate = computed(() => !isSelectedAll.value && Object.values(checkedMap.value).length > 0);
+
+  const isSingleSelect = computed(() => props.isRadioMode);
+
+  // 选中域名列表
+  const selectedDomains = computed(() => Object.values(checkedMap.value).map(item => item.ip));
+
+  const columns = computed(() => [
+    {
+      width: 70,
+      fixed: 'left',
+      label: () => (isSingleSelect.value ? '' : (
+        <div style="display:flex;align-items:center">
+          <bk-checkbox
+            indeterminate={isIndeterminate.value}
+            model-value={isSelectedAll.value}
+            onChange={handleSelectPageAll}
+          />
+          <bk-popover
+            placement="bottom-start"
+            theme="light db-table-select-menu"
+            arrow={ false }
+            trigger='hover'
+            v-slots={{
+              default: () => <db-icon class="select-menu-flag ml-10" type="down-big" />,
+              content: () => (
+                <div class="db-table-select-plan">
+                  <div
+                    class="item"
+                    onClick={handleWholeSelect}>{t('跨页全选')}</div>
+                </div>
+              ),
+            }}>
+          </bk-popover>
+        </div>
+      )),
+      render: ({ index, data }: {index: number, data: RedisHostModel}) => {
+        if (data.instance_role === 'redis_master' && showMasterTip.value) {
+          return <bk-popover
+            is-show={data.isShowTip}
+            popover-delay={0}
+            width={270}
+            trigger="manual"
+            theme="light"
+            placement="top">
+            {{
+              default: () => (isSingleSelect.value ? (
+                <bk-radio
+                  class="check-box"
+                  label={data.ip}
+                  model-value={selectedDomains.value[0]}
+                  onChange={() => handleTableSelectOne(true, data)}
+                />
+              ) : (
+                <bk-checkbox
+                  style="vertical-align:middle;padding-top:5px;"
+                  model-value={Boolean(checkedMap.value[data.ip])}
+                  onMouseenter={() => handleControlTip(index, true)}
+                  onChange={(value: boolean) => handleTableSelectOne(value, data)}
+                />
+              )),
+              content: () => (
+                <div class="redis-host-master-tip-box">
+                  <span>{t('选择 Master IP 会默认选上关联的 Slave IP，一同替换')}</span>
+                  <div class="no-tip" onClick={handleClickNoTip}>{t('不再提示')}</div>
+                </div>
+              ),
+            }}
+          </bk-popover>;
+        }
+        return isSingleSelect.value ? (
+          <bk-radio
+            class="check-box"
+            label={data.ip}
+            model-value={selectedDomains.value[0]}
+            onChange={() => handleTableSelectOne(true, data)}
+          />
+          ) : (
+          <bk-checkbox
+            style="vertical-align: middle;"
+            model-value={Boolean(checkedMap.value[data.ip])}
+            onClick={(e: Event) => e.stopPropagation()}
+            onMouseenter={() => handleControlTip(index, false)}
+            onChange={(value: boolean) => handleTableSelectOne(value, data)}
+          />
+        );
+      },
+    },
+    {
+      fixed: 'left',
+      minWidth: 160,
+      label: props.role ? props.role.charAt(0).toUpperCase() + props.role.slice(1) : t('实例'),
+      field: 'ip',
+    },
+    {
+      label: t('角色类型'),
+      field: 'instance_role',
+      showOverflowTooltip: true,
+      // filter: {
+      //   list: [
+      //     { text: 'master', value: 'master' },
+      //     { text: 'slave', value: 'slave' },
+      //     { text: 'proxy', value: 'proxy' },
+      //   ],
+      //   checked: columnCheckedMap.value.role,
+      // },
+      render: ({ data } : TableItem) => <span>{data.instance_role}</span>,
+    },
+    {
+      label: t('实例状态'),
+      field: 'status',
+      render: ({ data } : TableItem) => {
+        const info = data.host_info.alive === 1 ? { theme: 'success', text: t('正常') } : { theme: 'danger', text: t('异常') };
+        return <DbStatus theme={info.theme}>{info.text}</DbStatus>;
+      },
+    },
+    {
+      minWidth: 100,
+      label: t('管控区域'),
+      field: 'bk_cloud_id',
+      filter: {
+        list: columnAttrs.value.bk_cloud_id,
+        checked: columnCheckedMap.value.bk_cloud_id,
+      },
+      render: ({ data }: TableItem) => <span>{data.bk_cloud_name ?? '--'}</span>,
+    },
+    {
+      minWidth: 100,
+      label: t('Agent状态'),
+      field: 'alive',
+      render: ({ data } : TableItem) => {
+        const info = data.host_info?.alive === 1 ? { theme: 'success', text: t('正常') } : { theme: 'danger', text: t('异常') };
+        return <DbStatus theme={info.theme}>{info.text}</DbStatus>;
+      },
+    },
+    {
+      label: t('主机名称'),
+      field: 'host_name',
+      showOverflowTooltip: true,
+      render: ({ data } : TableItem) => data.host_info?.host_name || '--',
+    },
+    {
+      label: t('OS名称'),
+      field: 'os_name',
+      showOverflowTooltip: true,
+      render: ({ data } : TableItem) => data.host_info?.os_name || '--',
+    },
+    {
+      label: t('所属云厂商'),
+      field: 'cloud_vendor',
+      showOverflowTooltip: true,
+      render: ({ data }: TableItem) => data.host_info?.cloud_vendor || '--',
+    },
+    {
+      label: t('OS类型'),
+      field: 'os_type',
+      showOverflowTooltip: true,
+      render: ({ data }: TableItem) => data.host_info?.os_type || '--',
+    },
+    {
+      label: t('主机ID'),
+      field: 'host_id',
+      showOverflowTooltip: true,
+      render: ({ data } : TableItem) => data.host_info?.host_id || '--',
+    },
+    {
+      label: 'Agent ID',
+      field: 'agent_id',
+      showOverflowTooltip: true,
+      render: ({ data } : TableItem) => data.host_info?.agent_id || '--',
+    },
+  ]);
+
+  watch(() => props.lastValues, (lastValues) => {
+    // 切换 tab 回显选中状态 \ 预览结果操作选中状态
+    checkedMap.value = {};
+    const checkedList = lastValues.idleHosts;
+    for (const item of checkedList) {
+      checkedMap.value[item.ip] = item;
+    }
+  }, { immediate: true, deep: true });
+
+  watch(() => props.node, () => {
+    if (props.node) {
+      fetchData();
+    }
+  });
+
+  const handleControlTip = (index: number, isMaster: boolean) => {
+    tableData.value.forEach((item) => {
+      Object.assign(item, {
+        isShowTip: false,
+      });
+    });
+    if (isMaster) {
+      tableData.value[index].isShowTip = true;
+    }
+  };
+
+  const handleClickNoTip = () => {
+    showMasterTip.value = false;
+    localStorage.setItem(LocalStorageKeys.REDIS_DB_REPLACE_MASTER_TIP, '1');
+  };
+
+  const generateParams = () => ({
+    limit: pagination.limit,
+    offset: (pagination.current - 1) * pagination.limit,
+    extra: 1,
+    ...getSearchSelectorParams(searchValue.value),
+    ...(props.node?.obj === 'cluster' && {
+      cluster_ids: `${props.node.id}`,
+    }),
+  })
+
+  // 跨页全选
+  const handleWholeSelect = () => {
+    isTableDataLoading.value = true;
+    const params = generateParams();
+    params.limit = -1;
+    getRedisMachineList(params).then((data) => {
+      data.results.forEach((dataItem) => {
+        handleTableSelectOne(true, dataItem);
+      });
+    }).finally(() => isTableDataLoading.value = false);
+  };
+
+  const fetchData = () => {
+    if (props.node) {
+      isTableDataLoading.value = true;
+      const params = generateParams();
+      getRedisMachineList(params)
+        .then((data) => {
+          tableData.value = data.results.map(item => Object.assign(item, {
+            isShowTip: false,
+          }));
+          pagination.count = data.count;
+          isAnomalies.value = false;
+        })
+        .catch(() => {
+          isAnomalies.value = true;
+        })
+        .finally(() => {
+          isTableDataLoading.value = false;
+        });
+    }
+  };
+
+  const triggerChange = () => {
+    const result = Object.values(checkedMap.value);
+
+    if (activePanel?.value) {
+      emits('change', {
+        ...props.lastValues,
+        [activePanel.value]: result,
+      });
+    }
+  };
+
+  const formatValue = (data: RedisHostModel) => ({
+    bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+    bk_host_id: data?.bk_host_id || 0,
+    bk_cloud_id: data?.host_info?.cloud_id || 0,
+    ip: data?.ip || '',
+    role: data?.instance_role || '',
+    cluster_ids: data.related_clusters.map(item=>item.id) || [],
+    cluster_domain: data.related_clusters[0].immute_domain ?? '',
+    spec_config: data?.spec_config || null,
+  });
+
+  const handleSelectPageAll = (checked: boolean) => {
+    const lastCheckMap = { ...checkedMap.value };
+    for (const item of tableData.value) {
+      if (checked) {
+        lastCheckMap[item.ip] = formatValue(item);
+      } else {
+        delete lastCheckMap[item.ip];
+      }
+    }
+    checkedMap.value = lastCheckMap;
+    triggerChange();
+  };
+
+  const handleTableSelectOne = async (checked: boolean, data: RedisHostModel) => {
+    const lastCheckMap = isSingleSelect.value ? {} : { ...checkedMap.value };
+    if (checked) {
+      lastCheckMap[data.ip] = formatValue(data);
+      // master 与 slave 关联选择
+      if (Object.keys(props.masterSlaveMap).length > 0 && data.instance_role === 'redis_master') {
+        const {slave_ip: slaveIp, slaves } = props.masterSlaveMap[data.ip];
+        lastCheckMap[slaveIp] = _.merge(formatValue(data), {
+          ip: slaves.ip,
+          bk_host_id: slaves.bk_host_id,
+          role: 'redis_slave'
+        });
+      }
+      if (isSingleSelect.value) {
+        // 单选
+        selectedDomains.value[0] = data.ip;
+        checkedMap.value = lastCheckMap;
+        triggerChange();
+        return;
+      }
+    } else {
+      if (isSingleSelect.value) {
+        return;
+      }
+      delete lastCheckMap[data.ip];
+    }
+    checkedMap.value = lastCheckMap;
+    triggerChange();
+  };
+
+  // 切换每页条数
+  const handlePageLimitChange = (pageLimit: number) => {
+    pagination.limit = pageLimit;
+    handlePageValueChange(1);
+  };
+  // 切换页码
+  const handlePageValueChange = (pageValue:number) => {
+    pagination.current = pageValue;
+    fetchData();
+  };
+</script>
+
+<style lang="less">
+  .instance-selector-render-topo-host {
+    padding: 0 24px;
+  }
+
+  .table-box {
+    :deep(.check-box) {
+      .bk-radio-label {
+        display: none;
+      }
+    }
+  }
+
+  .redis-host-master-tip-box {
+    word-break: break-all;
+
+    .no-tip {
+      width: 100%;
+      font-weight: 400;
+      color: #3a84ff;
+      text-align: right;
+      cursor: pointer;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/preview-result/CollapseMini.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/preview-result/CollapseMini.vue
new file mode 100644
index 0000000000..a871747981
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/preview-result/CollapseMini.vue
@@ -0,0 +1,96 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <div
+    class="collapse-mini"
+    :class="[{ 'collapse-mini--collapse': state.collapse }]">
+    <div
+      class="collapse-mini__header"
+      @click="handleToggle">
+      <i class="db-icon-down-big collapse-mini__icon" />
+      <slot name="title">
+        <I18nT
+          keypath="共n条"
+          tag="span">
+          <template #n>
+            <strong style="color: #3a84ff">{{ count }}</strong>
+          </template>
+        </I18nT>
+      </slot>
+    </div>
+
+    <Transition mode="in-out">
+      <div
+        v-show="state.collapse"
+        class="collapse-mini__content">
+        <slot />
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+  interface Props {
+    collapse: boolean;
+    count: number;
+  }
+
+  const props = defineProps<Props>();
+
+  const state = reactive({
+    collapse: props.collapse,
+  });
+
+  watch(
+    () => props.collapse,
+    () => {
+      state.collapse = props.collapse;
+    },
+  );
+
+  function handleToggle() {
+    state.collapse = !state.collapse;
+  }
+</script>
+
+<style lang="less" scoped>
+  @import '@styles/mixins.less';
+
+  .collapse-mini {
+    margin-top: 16px;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &__header {
+      height: 24px;
+      padding-bottom: 4px;
+      cursor: pointer;
+      .flex-center();
+    }
+
+    &__icon {
+      font-size: @font-size-normal;
+      transform: rotate(-90deg);
+      transition: all 0.2s;
+    }
+
+    &--collapse {
+      .collapse-mini__icon {
+        transform: rotate(0);
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/preview-result/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/preview-result/Index.vue
new file mode 100644
index 0000000000..2857932575
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/instance-selector/components/preview-result/Index.vue
@@ -0,0 +1,212 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <div class="instance-selector-preview-result">
+    <div class="header">
+      <span>{{ $t('结果预览') }}</span>
+      <BkDropdown class="result__dropdown">
+        <i class="db-icon-more result__trigger" />
+        <template #content>
+          <BkDropdownMenu>
+            <BkDropdownItem @click="handleClear">
+              {{ $t('清空所有') }}
+            </BkDropdownItem>
+            <BkDropdownItem @click="handleCopyInstances">
+              {{ $t('复制所有实例') }}
+            </BkDropdownItem>
+          </BkDropdownMenu>
+        </template>
+      </BkDropdown>
+    </div>
+    <BkException
+      v-if="isEmpty"
+      class="mt-50"
+      :description="$t('暂无数据_请从左侧添加对象')"
+      scene="part"
+      type="empty" />
+    <div
+      v-else
+      class="result-wrapper">
+      <template
+        v-for="key in keys"
+        :key="key">
+        <CollapseMini
+          v-if="lastValues[key].length > 0"
+          collapse
+          :count="lastValues[key].length"
+          :title="textMap[key]">
+          <div
+            v-for="(item, index) of lastValues[key]"
+            :key="item.ip"
+            class="result-item">
+            <span
+              v-overflow-tips
+              class="text-overflow">
+              {{ item.ip }}
+              <span class="result-item-role">({{ item.role }})</span>
+            </span>
+            <DbIcon
+              type="close result-item-remove"
+              @click="handleRemove(key, index)" />
+          </div>
+        </CollapseMini>
+      </template>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import { useCopy } from '@hooks';
+
+  import { messageWarn } from '@utils';
+
+  import { textMap } from '../../common/utils';
+  import type { InstanceSelectorValues } from '../../Index.vue';
+
+  import CollapseMini from './CollapseMini.vue';
+
+  interface Props {
+    lastValues: InstanceSelectorValues;
+  }
+
+  type Keys = keyof InstanceSelectorValues;
+
+  interface Emits {
+    (e: 'change', value: InstanceSelectorValues): void;
+  }
+
+  const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+  const copy = useCopy();
+
+  const keys = computed(() => Object.keys(props.lastValues) as Keys[]);
+  const isEmpty = computed(() => !keys.value.some((key) => props.lastValues[key].length > 0));
+
+  const handleClear = () => {
+    emits('change', {
+      idleHosts: [],
+    });
+  };
+
+  const handleRemove = (key: Keys, index: number) => {
+    const target = props.lastValues[key];
+    target.splice(index, 1);
+    emits('change', {
+      ...props.lastValues,
+      [key]: target,
+    });
+  };
+
+  /**
+   * 复制集群域名
+   */
+  const handleCopyInstances = () => {
+    if (isEmpty.value) {
+      messageWarn(t('没有可复制实例'));
+      return;
+    }
+
+    const instances = [];
+    for (const key of keys.value) {
+      instances.push(...props.lastValues[key]);
+    }
+    copy(instances.map((item) => item.ip).join('\n'));
+  };
+</script>
+<style lang="less">
+  .instance-selector-preview-result {
+    display: flex;
+    height: 100%;
+    max-height: 625px;
+    padding: 12px 24px;
+    overflow: hidden;
+    font-size: @font-size-mini;
+    background-color: #f5f6fa;
+    flex-direction: column;
+
+    .header {
+      display: flex;
+      padding-bottom: 16px;
+      align-items: center;
+
+      > span {
+        flex: 1;
+        font-size: @font-size-normal;
+        color: @title-color;
+      }
+
+      .result__dropdown {
+        font-size: 0;
+        line-height: 20px;
+      }
+
+      .result__trigger {
+        display: block;
+        font-size: 18px;
+        color: @gray-color;
+        cursor: pointer;
+
+        &:hover {
+          background-color: @bg-disable;
+          border-radius: 2px;
+        }
+      }
+    }
+
+    .result-wrapper {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow-y: auto;
+
+      .result-item {
+        display: flex;
+        padding: 0 12px;
+        margin-bottom: 2px;
+        line-height: 32px;
+        background-color: @bg-white;
+        border-radius: 2px;
+        justify-content: space-between;
+        align-items: center;
+
+        .result-item-remove {
+          display: none;
+          font-size: @font-size-large;
+          font-weight: bold;
+          color: @gray-color;
+          cursor: pointer;
+
+          &:hover {
+            color: @default-color;
+          }
+        }
+
+        &:hover {
+          .result-item-remove {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+
+  .result-item-role {
+    margin-left: 8px;
+    font-size: 12px;
+    color: #c4c6cc;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/routes.ts b/dbm-ui/frontend/src/views/db-manage/redis/routes.ts
index e9138064ec..84a2d4167b 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/routes.ts
+++ b/dbm-ui/frontend/src/views/db-manage/redis/routes.ts
@@ -67,14 +67,7 @@ const redisMasterFailoverRoute = {
   component: () => import('@views/db-manage/redis/master-failover/Index.vue'),
 };
 
-const redisDBReplaceRoute = {
-  name: 'RedisDBReplace',
-  path: 'db-replace/:page?',
-  meta: {
-    navName: t('整机替换'),
-  },
-  component: () => import('@views/db-manage/redis/db-replace/Index.vue'),
-};
+const redisDBReplaceRoute = createRouteItem(TicketTypes.REDIS_CLUSTER_CUTOFF, t('整机替换'));
 
 const redisClusterShardUpdateRoute = {
   name: 'RedisClusterShardUpdate',
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 40860d075f..a1d04fa439 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
@@ -54,7 +54,7 @@ export default [
           },
           {
             name: t('整机替换'),
-            id: 'RedisDBReplace',
+            id: TicketTypes.REDIS_CLUSTER_CUTOFF,
             parentId: 'common-manage',
             dbConsoleValue: 'redis.toolbox.dbReplace',
           },