From e76b338d784f812a963a01e8a44a7a3e6041a3bc Mon Sep 17 00:00:00 2001
From: 3octaves <873551943@qq.com>
Date: Thu, 7 Nov 2024 15:17:32 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E9=9B=86=E7=BE=A4=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=94=AF=E6=8C=81=E6=89=B9=E9=87=8F=E7=A6=81=E7=94=A8?=
 =?UTF-8?q?/=E5=90=AF=E7=94=A8=E3=80=81=E5=88=A0=E9=99=A4=E9=9B=86?=
 =?UTF-8?q?=E7=BE=A4=20#7753?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dbm-ui/frontend/src/locales/zh-cn.json        |  16 +-
 .../common/cluster-batch-opration/Index.vue   | 100 +++++
 .../components/detail/Index.vue               |   2 +-
 .../components/list/Index.vue                 |  57 ++-
 .../hooks/useDisableCluster.tsx               |   9 +-
 .../components/detail/Index.vue               |   2 +-
 .../components/list/Index.vue                 |  57 ++-
 .../hooks/useDisableCluster.tsx               |   7 +-
 .../mysql/ha-cluster-list/components/List.vue |  57 ++-
 .../single-cluster-list/components/List.vue   |  64 ++-
 .../redis/list-ha/components/list/Index.vue   | 141 +++----
 .../redis/list/components/list/Index.vue      | 377 ++++++++----------
 .../ha-cluster-list/components/List.vue       |  53 ++-
 .../single-cluster/components/List.vue        |  54 ++-
 .../list/components/list/Index.vue            | 148 ++++---
 15 files changed, 707 insertions(+), 437 deletions(-)
 create mode 100644 dbm-ui/frontend/src/views/db-manage/common/cluster-batch-opration/Index.vue

diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index 4384240851..eec9271678 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3079,10 +3079,10 @@
     "构造后 DB 名": "构造后 DB 名",
     "手动修改回档的 DB 名": "手动修改回档的 DB 名",
     "n项待修改": "{0} 项待修改",
-    "禁用的集群不支持提取 Key": "禁用的集群不支持提取 Key",
-    "禁用的集群不支持删除 Key": "禁用的集群不支持删除 Key",
-    "禁用的集群不支持备份": "禁用的集群不支持备份",
-    "禁用的集群不支持清档": "禁用的集群不支持清档",
+    "仅已启用集群可以提取 Key": "仅已启用集群可以提取 Key",
+    "仅已启用集群可以删除 Key": "仅已启用集群可以删除 Key",
+    "仅已启用集群可以备份": "仅已启用集群可以备份",
+    "仅已启用集群可以清档": "仅已启用集群可以清档",
     "请先添加链接的集群": "请先添加链接的集群",
     "立即添加": "立即添加",
     "MySQL主从-从域名": "MySQL主从-从域名",
@@ -3608,5 +3608,13 @@
     "批量录入：按行录入，快速批量输入多个单元格的值": "批量录入：按行录入，快速批量输入多个单元格的值",
     "MySQL 单节点": "MySQL 单节点",
     "MySQL 主从": "MySQL 主从",
+    "确定启用集群": "确定启用集群",
+    "确定禁用集群": "确定禁用集群",
+    "确定删除集群": "确定删除集群",
+    "仅可删除状态为“已禁用”的集群": "仅可删除状态为“已禁用”的集群",
+    "仅可启用状态为“已禁用”的集群": "仅可启用状态为“已禁用”的集群",
+    "仅可禁用状态为“已启用”的集群": "仅可禁用状态为“已启用”的集群",
+    "确定启用集群？": "确定启用集群？",
+    "确定禁用集群？": "确定禁用集群？",
     "这行勿动！新增翻译请在上一行添加！": ""
   }
diff --git a/dbm-ui/frontend/src/views/db-manage/common/cluster-batch-opration/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/cluster-batch-opration/Index.vue
new file mode 100644
index 0000000000..5c43897abf
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/common/cluster-batch-opration/Index.vue
@@ -0,0 +1,100 @@
+<!--
+ * 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>
+  <BkDropdown
+    v-bk-tooltips="{
+      disabled: !disabled,
+      content: t('请选择操作集群'),
+    }"
+    class="cluster-batch-operation"
+    :disabled="disabled"
+    @click.stop
+    @hide="() => (isShowDropdown = false)"
+    @show="() => (isShowDropdown = true)">
+    <BkButton :disabled="disabled">
+      {{ t('批量操作') }}
+      <DbIcon
+        class="cluster-batch-operation-icon ml-4"
+        :class="[{ 'cluster-batch-operation-icon-active': isShowDropdown }]"
+        type="up-big " />
+    </BkButton>
+    <template #content>
+      <BkDropdownMenu class="cluster-batch-operation-popover">
+        <BkDropdownItem
+          v-for="item in list"
+          :key="item.dbConsole"
+          v-db-console="item.dbConsole"
+          @click="item.click">
+          <BkButton
+            v-bk-tooltips="{
+              disabled: !item.disabled,
+              content: item.tooltips,
+              placement: 'right',
+            }"
+            class="opration-button"
+            :disabled="item.disabled"
+            text>
+            {{ item.text }}
+          </BkButton>
+        </BkDropdownItem>
+      </BkDropdownMenu>
+    </template>
+  </BkDropdown>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  interface Props {
+    disabled: boolean;
+    list: {
+      dbConsole: string;
+      click: () => void;
+      disabled: boolean;
+      tooltips: string;
+      text: string;
+    }[];
+  }
+
+  defineProps<Props>();
+
+  const { t } = useI18n();
+
+  const isShowDropdown = ref(false);
+</script>
+
+<style lang="less">
+  .cluster-batch-operation-popover {
+    .bk-dropdown-item {
+      padding: 0;
+
+      .opration-button {
+        padding: 0 16px;
+      }
+    }
+  }
+</style>
+
+<style lang="less" scoped>
+  .cluster-batch-operation {
+    .cluster-batch-operation-icon {
+      transform: rotate(0);
+      transition: all 0.2s;
+    }
+
+    .cluster-batch-operation-icon-active {
+      transform: rotate(180deg);
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-list/components/detail/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-list/components/detail/Index.vue
index d2a83fb51d..73bc28020c 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-list/components/detail/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-list/components/detail/Index.vue
@@ -257,7 +257,7 @@
   };
 
   const handleDisableCluster = () => {
-    disableCluster(data.value!);
+    disableCluster([data.value!]);
   };
 </script>
 
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-list/components/list/Index.vue
index 8645333b99..542194a355 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-list/components/list/Index.vue
@@ -20,6 +20,11 @@
         @click="handleApply">
         {{ t('申请实例') }}
       </BkButton>
+      <ClusterBatchOperation
+        v-db-console="'mongodb.replicaSetList.batchOperation'"
+        class="ml-8 mb-8"
+        :disabled="!hasSelected"
+        :list="clusterBatchOperationList" />
       <BkButton
         class="ml-8 mb-8"
         :disabled="!hasSelected"
@@ -142,6 +147,7 @@
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
   import ClusterAuthorize from '@views/db-manage/common/cluster-authorize/Index.vue';
+  import ClusterBatchOperation from '@views/db-manage/common/cluster-batch-opration/Index.vue'
   import ClusterCapacityUsageRate from '@views/db-manage/common/cluster-capacity-usage-rate/Index.vue'
   import ClusterIpCopy from '@views/db-manage/common/cluster-ip-copy/Index.vue';
   import DropdownExportExcel from '@views/db-manage/common/dropdown-export-excel/index.vue';
@@ -289,6 +295,31 @@
   const hasData = computed(() => tableDataList.value.length > 0);
   const hasSelected = computed(() => selected.value.length > 0);
   const selectedIds = computed(() => selected.value.map(item => item.id));
+
+  const clusterBatchOperationList = computed(() => [
+    {
+      dbConsole: 'mongodb.replicaSetList.disable',
+      click: () => handleDisableCluster(selected.value),
+      disabled: selected.value.some((data) => data.isOffline || data.operationDisabled),
+      tooltips: t('仅可禁用状态为“已启用”的集群'),
+      text: t('禁用')
+    },
+    {
+      dbConsole: 'mongodb.replicaSetList.enable',
+      click: () => handleEnableCluster(selected.value),
+      disabled: selected.value.some((data) => data.isOnline || data.isStarting),
+      tooltips: t('仅可启用状态为“已禁用”的集群'),
+      text: t('启用')
+    },
+    {
+      dbConsole: 'mongodb.replicaSetList.delete',
+      click: () => handleDeleteCluster(selected.value),
+      disabled: selected.value.some((data) => data.isOnline || Boolean(data.operationTicketId)),
+      tooltips: t('仅可删除状态为“已禁用”的集群'),
+      text: t('删除')
+    }
+  ]);
+
   const columns = computed(() => [
     {
       label: 'ID',
@@ -593,7 +624,7 @@
               theme="primary"
               class="ml-16"
               disabled={data.operationDisabled}
-              onclick={() => handleDisableCluster(data)}>
+              onclick={() => handleDisableCluster([data])}>
               { t('禁用') }
             </bk-button>
           </OperationBtnStatusTips>,
@@ -605,7 +636,7 @@
               theme="primary"
               class="ml-16"
               disabled={data.isStarting}
-              onclick={() => handleEnableCluster(data)}>
+              onclick={() => handleEnableCluster([data])}>
               { t('启用') }
             </bk-button>
           </OperationBtnStatusTips>,
@@ -617,7 +648,7 @@
               theme="primary"
               class="ml-16"
               disabled={Boolean(data.operationTicketId)}
-              onclick={() => handleDeleteCluster(data)}>
+              onclick={() => handleDeleteCluster([data])}>
               { t('删除') }
             </bk-button>
           </OperationBtnStatusTips>
@@ -778,15 +809,15 @@
     window.open(route.href);
   };
 
-  const handleEnableCluster = (row: MongodbModel) => {
+  const handleEnableCluster = (data: MongodbModel[]) => {
     InfoBox({
       type: 'warning',
-      title: t('确定启用该集群'),
+      title: t('确定启用集群'),
       content: () => (
         <p>
           { t('集群') }：
           <span class='info-box-cluster-name'>
-            { row.cluster_name }
+            { data.map(dataItem => dataItem.cluster_name).join('，') }
           </span>
         </p>
       ),
@@ -796,7 +827,7 @@
           bk_biz_id: currentBizId,
           ticket_type: TicketTypes.MONGODB_ENABLE,
           details: {
-            cluster_ids: [row.id],
+            cluster_ids: data.map(dataItem => dataItem.id),
           },
         })
           .then((res) => {
@@ -806,15 +837,15 @@
     });
   };
 
-  const handleDisableCluster = (row: MongodbModel) => {
-    disableCluster(row);
+  const handleDisableCluster = (data: MongodbModel[]) => {
+    disableCluster(data);
   };
 
-  const handleDeleteCluster = (row: MongodbModel) => {
-    const { cluster_name: name } = row;
+  const handleDeleteCluster = (data: MongodbModel[]) => {
+    const name = data.map((dataItem) => dataItem.cluster_name).join('，')
     InfoBox({
       type: 'warning',
-      title: t('确定删除该集群'),
+      title: t('确定删除集群'),
       confirmText: t('删除'),
       confirmButtonTheme: 'danger',
       contentAlign: 'left',
@@ -831,7 +862,7 @@
           bk_biz_id: currentBizId,
           ticket_type: TicketTypes.MONGODB_DESTROY,
           details: {
-            cluster_ids: [row.id],
+            cluster_ids: data.map((dataItem) => dataItem.id),
           },
         })
           .then((res) => {
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-list/hooks/useDisableCluster.tsx b/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-list/hooks/useDisableCluster.tsx
index 4f64337d37..d19f539d5a 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-list/hooks/useDisableCluster.tsx
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-list/hooks/useDisableCluster.tsx
@@ -27,14 +27,15 @@ export const useDisableCluster = () => {
   const { currentBizId } = useGlobalBizs();
   const ticketMessage = useTicketMessage();
 
-  const diabledCluster = (data: { cluster_name: string; id: number }) => {
+  const diabledCluster = (data: { cluster_name: string; id: number }[]) => {
     InfoBox({
       type: 'warning',
-      title: t('确定禁用该集群'),
+      title: t('确定禁用集群'),
       content: () => (
         <>
           <p>
-            {t('集群')}：<span class='info-box-cluster-name'>{data.cluster_name}</span>
+            {t('集群')}：
+            <span class='info-box-cluster-name'>{data.map((dataItem) => dataItem.cluster_name).join('，')}</span>
           </p>
           <p>{t('被禁用后将无法访问，如需恢复访问，可以再次「启用」')}</p>
         </>
@@ -45,7 +46,7 @@ export const useDisableCluster = () => {
           bk_biz_id: currentBizId,
           ticket_type: TicketTypes.MONGODB_DISABLE,
           details: {
-            cluster_ids: [data.id],
+            cluster_ids: data.map((dataItem) => dataItem.id),
           },
         }).then((res) => {
           ticketMessage(res.id);
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/components/detail/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/components/detail/Index.vue
index 7c86e5e115..ba3e8baff4 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/components/detail/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/components/detail/Index.vue
@@ -258,7 +258,7 @@
   };
 
   const handleDisableCluster = () => {
-    disableCluster(data.value!);
+    disableCluster([data.value!]);
   };
 </script>
 
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/components/list/Index.vue
index 6f190cf826..6089c46734 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/components/list/Index.vue
@@ -20,6 +20,11 @@
         @click="handleApply">
         {{ t('申请实例') }}
       </BkButton>
+      <ClusterBatchOperation
+        v-db-console="'mongodb.sharedClusterList.batchOperation'"
+        class="ml-8 mb-8"
+        :disabled="!hasSelected"
+        :list="clusterBatchOperationList" />
       <BkButton
         class="ml-8 mb-8"
         :disabled="!hasSelected"
@@ -142,6 +147,7 @@
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
   import ClusterAuthorize from '@views/db-manage/common/cluster-authorize/Index.vue';
+  import ClusterBatchOperation from '@views/db-manage/common/cluster-batch-opration/Index.vue'
   import ClusterCapacityUsageRate from '@views/db-manage/common/cluster-capacity-usage-rate/Index.vue'
   import ClusterIpCopy from '@views/db-manage/common/cluster-ip-copy/Index.vue';
   import DropdownExportExcel from '@views/db-manage/common/dropdown-export-excel/index.vue';
@@ -291,6 +297,31 @@
   const hasData = computed(() => tableDataList.value.length > 0);
   const hasSelected = computed(() => selected.value.length > 0);
   const selectedIds = computed(() => selected.value.map(item => item.id));
+
+  const clusterBatchOperationList = computed(() => [
+    {
+      dbConsole: 'mongodb.sharedClusterList.disable',
+      click: () => handleDisableCluster(selected.value),
+      disabled: selected.value.some((data) => data.isOffline || data.operationDisabled),
+      tooltips: t('仅可禁用状态为“已启用”的集群'),
+      text: t('禁用')
+    },
+    {
+      dbConsole: 'mongodb.sharedClusterList.enable',
+      click: () => handleEnableCluster(selected.value),
+      disabled: selected.value.some((data) => data.isOnline || data.isStarting),
+      tooltips: t('仅可启用状态为“已禁用”的集群'),
+      text: t('启用')
+    },
+    {
+      dbConsole: 'mongodb.sharedClusterList.delete',
+      click: () => handleDeleteCluster(selected.value),
+      disabled: selected.value.some((data) => data.isOnline || Boolean(data.operationTicketId)),
+      tooltips: t('仅可删除状态为“已禁用”的集群'),
+      text: t('删除')
+    }
+  ]);
+
   const columns = computed(() => [
     {
       label: 'ID',
@@ -622,7 +653,7 @@
               theme="primary"
               class="ml-16"
               disabled={data.operationDisabled}
-              onclick={() => handleDisableCluster(data)}>
+              onclick={() => handleDisableCluster([data])}>
               { t('禁用') }
             </bk-button>
           </OperationBtnStatusTips>,
@@ -634,7 +665,7 @@
               theme="primary"
               class="ml-16"
               disabled={data.isStarting}
-              onclick={() => handleEnableCluster(data)}>
+              onclick={() => handleEnableCluster([data])}>
               { t('启用') }
             </bk-button>
           </OperationBtnStatusTips>,
@@ -644,7 +675,7 @@
               theme="primary"
               class="ml-16"
               disabled={Boolean(data.operationTicketId)}
-              onclick={() => handleDeleteCluster(data)}>
+              onclick={() => handleDeleteCluster([data])}>
               { t('删除') }
             </bk-button>
           </OperationBtnStatusTips>,
@@ -792,15 +823,15 @@
     capacityChangeShow.value = true;
   };
 
-  const handleEnableCluster = (row: MongodbModel) => {
+  const handleEnableCluster = (data: MongodbModel[]) => {
     InfoBox({
       type: 'warning',
-      title: t('确定启用该集群'),
+      title: t('确定启用集群'),
       content: () => (
         <p>
           { t('集群') }：
           <span class='info-box-cluster-name'>
-            { row.cluster_name }
+            { data.map(dataItem => dataItem.cluster_name).join('，') }
           </span>
         </p>
       ),
@@ -810,7 +841,7 @@
           bk_biz_id: currentBizId,
           ticket_type: TicketTypes.MONGODB_ENABLE,
           details: {
-            cluster_ids: [row.id],
+            cluster_ids: data.map(dataItem => dataItem.id),
           },
         })
           .then((res) => {
@@ -820,15 +851,15 @@
     });
   };
 
-  const handleDisableCluster = (row: MongodbModel) => {
-    disableCluster(row);
+  const handleDisableCluster = (data: MongodbModel[]) => {
+    disableCluster(data);
   };
 
-  const handleDeleteCluster = (row: MongodbModel) => {
-    const { cluster_name: name } = row;
+  const handleDeleteCluster = (data: MongodbModel[]) => {
+    const name = data.map(dataItem => dataItem.cluster_name).join('，')
     InfoBox({
       type: 'warning',
-      title: t('确定删除该集群'),
+      title: t('确定删除集群'),
       confirmText: t('删除'),
       confirmButtonTheme: 'danger',
       contentAlign: 'left',
@@ -845,7 +876,7 @@
           bk_biz_id: currentBizId,
           ticket_type: TicketTypes.MONGODB_DESTROY,
           details: {
-            cluster_ids: [row.id],
+            cluster_ids: data.map(dataItem => dataItem.id),
           },
         })
           .then((res) => {
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/hooks/useDisableCluster.tsx b/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/hooks/useDisableCluster.tsx
index b1b40fd35a..823918ce88 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/hooks/useDisableCluster.tsx
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/hooks/useDisableCluster.tsx
@@ -27,14 +27,15 @@ export const useDisableCluster = () => {
   const { currentBizId } = useGlobalBizs();
   const ticketMessage = useTicketMessage();
 
-  const diabledCluster = (data: { cluster_name: string; id: number }) => {
+  const diabledCluster = (data: { cluster_name: string; id: number }[]) => {
     InfoBox({
       type: 'warning',
       title: t('确定禁用该集群'),
       content: () => (
         <>
           <p>
-            {t('集群')}：<span class='info-box-cluster-name'>{data.cluster_name}</span>
+            {t('集群')}：
+            <span class='info-box-cluster-name'>{data.map((dataItem) => dataItem.cluster_name).join('，')}</span>
           </p>
           <p>{t('被禁用后将无法访问，如需恢复访问，可以再次「启用」')}</p>
         </>
@@ -46,7 +47,7 @@ export const useDisableCluster = () => {
             bk_biz_id: currentBizId,
             ticket_type: TicketTypes.MONGODB_DISABLE,
             details: {
-              cluster_ids: [data.id],
+              cluster_ids: data.map((dataItem) => dataItem.id),
             },
           };
           await createTicket(params).then((res) => {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/ha-cluster-list/components/List.vue b/dbm-ui/frontend/src/views/db-manage/mysql/ha-cluster-list/components/List.vue
index 55195df2f1..ff982727d3 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/ha-cluster-list/components/List.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/ha-cluster-list/components/List.vue
@@ -21,6 +21,11 @@
         @click="handleApply">
         {{ t('申请实例') }}
       </AuthButton>
+      <ClusterBatchOperation
+        v-db-console="'mysql.haClusterList.batchOperation'"
+        class="ml-8"
+        :disabled="!hasSelected"
+        :list="clusterBatchOperationList" />
       <span
         v-bk-tooltips="{
           disabled: hasSelected,
@@ -153,6 +158,7 @@
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
   import ClusterAuthorize from '@views/db-manage/common/cluster-authorize/Index.vue';
+  import ClusterBatchOperation from '@views/db-manage/common/cluster-batch-opration/Index.vue'
   import ClusterCapacityUsageRate from '@views/db-manage/common/cluster-capacity-usage-rate/Index.vue'
   import EditEntryConfig, { type ClusterEntryInfo } from '@views/db-manage/common/cluster-entry-config/Index.vue';
   import ClusterExportData from '@views/db-manage/common/cluster-export-data/Index.vue'
@@ -251,6 +257,30 @@
   const hasSelected = computed(() => selected.value.length > 0);
   const selectedIds = computed(() => selected.value.map(item => item.id));
 
+  const clusterBatchOperationList = computed(() => [
+    {
+      dbConsole: 'mysql.haClusterList.disable',
+      click: () => handleSwitchCluster(TicketTypes.MYSQL_HA_DISABLE, selected.value),
+      disabled: selected.value.some((data) => data.isOffline || data.operationDisabled),
+      tooltips: t('仅可禁用状态为“已启用”的集群'),
+      text: t('禁用')
+    },
+    {
+      dbConsole: 'mysql.haClusterList.enable',
+      click: () => handleSwitchCluster(TicketTypes.MYSQL_HA_ENABLE,selected.value),
+      disabled: selected.value.some((data) => data.isOnline || data.isStarting),
+      tooltips: t('仅可启用状态为“已禁用”的集群'),
+      text: t('启用')
+    },
+    {
+      dbConsole: 'mysql.haClusterList.delete',
+      click: () => handleDeleteCluster(selected.value),
+      disabled: selected.value.some((data) => data.isOnline || Boolean(data.operationTicketId)),
+      tooltips: t('仅可删除状态为“已禁用”的集群'),
+      text: t('删除')
+    }
+  ]);
+
   const searchSelectData = computed(() => [
     {
       name: t('访问入口'),
@@ -333,7 +363,7 @@
     return funControllerStore.funControllerData.mysql.children[currentKey];
   });
 
-  const entrySort = (data: RowData[]) => data.sort(a => a.role === 'master_entry' ? -1 : 1);
+  const entrySort = (data: ClusterEntryInfo[]) => data.sort(a => a.role === 'master_entry' ? -1 : 1);
 
   const columns = computed(() => [
     {
@@ -824,12 +854,12 @@
                     <OperationBtnStatusTips data={data}>
                       <auth-button
                         text
-                        disabled={Boolean(data.operationTicketId)}
+                        disabled={data.operationDisabled}
                         class="mr-8"
                         action-id="mysql_enable_disable"
                         permission={data.permission.mysql_enable_disable}
                         resource={data.id}
-                        onClick={() => handleSwitchCluster(TicketTypes.MYSQL_HA_DISABLE, data)}>
+                        onClick={() => handleSwitchCluster(TicketTypes.MYSQL_HA_DISABLE, [data])}>
                         { t('禁用') }
                       </auth-button>
                     </OperationBtnStatusTips>
@@ -845,7 +875,7 @@
                           action-id="mysql_enable_disable"
                           permission={data.permission.mysql_enable_disable}
                           resource={data.id}
-                          onClick={() => handleSwitchCluster(TicketTypes.MYSQL_HA_ENABLE, data)}>
+                          onClick={() => handleSwitchCluster(TicketTypes.MYSQL_HA_ENABLE, [data])}>
                           { t('启用') }
                         </auth-button>
                       </OperationBtnStatusTips>
@@ -859,7 +889,7 @@
                           action-id="mysql_destroy"
                           permission={data.permission.mysql_destroy}
                           resource={data.id}
-                          onClick={() => handleDeleteCluster(data)}>
+                          onClick={() => handleDeleteCluster([data])}>
                           { t('删除') }
                         </auth-button>
                       </OperationBtnStatusTips>
@@ -1030,11 +1060,12 @@
   /**
    * 集群启停
    */
-  const handleSwitchCluster = (type: TicketTypesStrings, data: TendbhaModel) => {
+  const handleSwitchCluster = (type: TicketTypesStrings, data: TendbhaModel[]) => {
     if (!type) return;
 
     const isOpen = type === TicketTypes.MYSQL_HA_ENABLE;
-    const title = isOpen ? t('确定启用该集群') : t('确定禁用该集群');
+    const title = isOpen ? t('确定启用集群') : t('确定禁用集群');
+    const name = data.map(dataItem => dataItem.cluster_name).join('，')
     InfoBox({
       type: 'warning',
       title,
@@ -1042,8 +1073,8 @@
         <div style="word-break: all;">
           {
             isOpen
-              ? <p>{t('集群【name】启用后将恢复访问', { name: data.cluster_name })}</p>
-              : <p>{t('集群【name】被禁用后将无法访问_如需恢复访问_可以再次「启用」', { name: data.cluster_name })}</p>
+              ? <p>{t('集群【name】启用后将恢复访问', { name })}</p>
+              : <p>{t('集群【name】被禁用后将无法访问_如需恢复访问_可以再次「启用」', { name })}</p>
           }
         </div>
       ),
@@ -1052,7 +1083,7 @@
           bk_biz_id: globalBizsStore.currentBizId,
           ticket_type: type,
           details: {
-            cluster_ids: [data.id],
+            cluster_ids: data.map(dataItem => dataItem.id),
           },
         };
         await createTicket(params).then((res) => {
@@ -1066,8 +1097,8 @@
   /**
    * 删除集群
    */
-  const handleDeleteCluster = (data: TendbhaModel) => {
-    const { cluster_name: name } = data;
+  const handleDeleteCluster = (data: TendbhaModel[]) => {
+    const name = data.map(dataItem => dataItem.cluster_name).join('，')
     InfoBox({
       type: 'warning',
       title: t('确定删除该集群'),
@@ -1086,7 +1117,7 @@
           bk_biz_id: globalBizsStore.currentBizId,
           ticket_type: TicketTypes.MYSQL_HA_DESTROY,
           details: {
-            cluster_ids: [data.id],
+            cluster_ids: data.map(dataItem => dataItem.id)
           },
         };
         await createTicket(params).then((res) => {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/single-cluster-list/components/List.vue b/dbm-ui/frontend/src/views/db-manage/mysql/single-cluster-list/components/List.vue
index 727c3e1987..48e54b3f92 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/single-cluster-list/components/List.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/single-cluster-list/components/List.vue
@@ -21,6 +21,11 @@
         @click="handleApply">
         {{ t('申请实例') }}
       </AuthButton>
+      <ClusterBatchOperation
+        v-db-console="'mysql.singleClusterList.batchOperation'"
+        class="ml-8"
+        :disabled="!hasSelected"
+        :list="clusterBatchOperationList" />
       <span
         v-bk-tooltips="{
           disabled: hasSelected,
@@ -137,6 +142,7 @@
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
   import ClusterAuthorize from '@views/db-manage/common/cluster-authorize/Index.vue';
+  import ClusterBatchOperation from '@views/db-manage/common/cluster-batch-opration/Index.vue'
   import ClusterCapacityUsageRate from '@views/db-manage/common/cluster-capacity-usage-rate/Index.vue'
   import EditEntryConfig from '@views/db-manage/common/cluster-entry-config/Index.vue';
   import ClusterExportData from '@views/db-manage/common/cluster-export-data/Index.vue'
@@ -215,6 +221,31 @@
   const isCN = computed(() => locale.value === 'zh-cn');
   const hasSelected = computed(() => selected.value.length > 0);
   const selectedIds = computed(() => selected.value.map(item => item.id));
+
+  const clusterBatchOperationList = computed(() => [
+    {
+      dbConsole: 'mysql.singleClusterList.disable',
+      click: () => handleSwitchCluster(TicketTypes.MYSQL_SINGLE_DISABLE, selected.value),
+      disabled: selected.value.some((data) => data.isOffline || data.operationDisabled),
+      tooltips: t('仅可禁用状态为“已启用”的集群'),
+      text: t('禁用')
+    },
+    {
+      dbConsole: 'mysql.singleClusterList.enable',
+      click: () => handleSwitchCluster(TicketTypes.MYSQL_SINGLE_ENABLE, selected.value),
+      disabled: selected.value.some((data) => data.isOnline || data.isStarting),
+      tooltips: t('仅可启用状态为“已禁用”的集群'),
+      text: t('启用')
+    },
+    {
+      dbConsole: 'mysql.singleClusterList.delete',
+      click: () => handleDeleteCluster(selected.value),
+      disabled: selected.value.some((data) => data.isOnline || Boolean(data.operationTicketId)),
+      tooltips: t('仅可删除状态为“已禁用”的集群'),
+      text: t('删除')
+    }
+  ]);
+
   const searchSelectData = computed(() => [
     {
       name: t('访问入口'),
@@ -607,7 +638,7 @@
                         permission={data.permission.mysql_enable_disable}
                         disabled={data.operationDisabled}
                         resource={data.id}
-                        onClick={() => handleSwitchCluster(TicketTypes.MYSQL_SINGLE_DISABLE, data)}>
+                        onClick={() => handleSwitchCluster(TicketTypes.MYSQL_SINGLE_DISABLE, [data])}>
                         { t('禁用') }
                       </auth-button>
                     </OperationBtnStatusTips>
@@ -623,7 +654,7 @@
                           permission={data.permission.mysql_enable_disable}
                           disabled={data.isStarting}
                           resource={data.id}
-                          onClick={() => handleSwitchCluster(TicketTypes.MYSQL_SINGLE_ENABLE, data)}>
+                          onClick={() => handleSwitchCluster(TicketTypes.MYSQL_SINGLE_ENABLE, [data])}>
                           { t('启用') }
                         </auth-button>
                       </OperationBtnStatusTips>
@@ -637,7 +668,7 @@
                           permission={data.permission.mysql_destroy}
                           disabled={Boolean(data.operationTicketId)}
                           resource={data.id}
-                          onClick={() => handleDeleteCluster(data)}>
+                          onClick={() => handleDeleteCluster([data])}>
                           { t('删除') }
                         </auth-button>
                       </OperationBtnStatusTips>
@@ -823,11 +854,10 @@
   /**
    * 集群启停
    */
-  const handleSwitchCluster = (type: TicketTypesStrings, data: TendbsingleModel) => {
-    if (!type) return;
-
+  const handleSwitchCluster = (type: TicketTypesStrings, data: TendbsingleModel[]) => {
     const isOpen = type === TicketTypes.MYSQL_SINGLE_ENABLE;
-    const title = isOpen ? t('确定启用该集群') : t('确定禁用该集群');
+    const title = isOpen ? t('确定启用集群') : t('确定禁用集群');
+    const clusterName = data.map(dataItem => dataItem.cluster_name).join('，')
     InfoBox({
       type: 'warning',
       title,
@@ -835,8 +865,8 @@
         <div style="word-break: all;">
           {
             isOpen
-              ? <p>{t('集群【name】启用后将恢复访问', { name: data.cluster_name })}</p>
-              : <p>{t('集群【name】被禁用后将无法访问_如需恢复访问_可以再次「启用」', { name: data.cluster_name })}</p>
+              ? <p>{t('集群【name】启用后将恢复访问', { name: clusterName })}</p>
+              : <p>{t('集群【name】被禁用后将无法访问_如需恢复访问_可以再次「启用」', { name: clusterName })}</p>
           }
         </div>
       ),
@@ -845,7 +875,7 @@
           bk_biz_id: globalBizsStore.currentBizId,
           ticket_type: type,
           details: {
-            cluster_ids: [data.id],
+            cluster_ids: data.map(dataItem => dataItem.id),
           },
         };
         await createTicket(params).then((res) => {
@@ -859,18 +889,18 @@
   /**
    * 删除集群
    */
-  const handleDeleteCluster = (data: TendbsingleModel) => {
-    const { cluster_name: name } = data;
+  const handleDeleteCluster = (data: TendbsingleModel[]) => {
+    const clusterName = data.map(dataItem => dataItem.cluster_name).join('，')
     InfoBox({
       type: 'warning',
-      title: t('确定删除该集群'),
+      title: t('确定删除集群'),
       confirmText: t('删除'),
       confirmButtonTheme: 'danger',
       content: () => (
         <div style="word-break: all; text-align: left; padding-left: 16px;">
-          <p>{t('集群【name】被删除后_将进行以下操作', { name })}</p>
-          <p>{t('1_删除xx集群', { name })}</p>
-          <p>{t('2_删除xx实例数据_停止相关进程', { name })}</p>
+          <p>{t('集群【name】被删除后_将进行以下操作', { name: clusterName })}</p>
+          <p>{t('1_删除xx集群', { name: clusterName })}</p>
+          <p>{t('2_删除xx实例数据_停止相关进程', { name: clusterName })}</p>
           <p>3. {t('回收主机')}</p>
         </div>
       ),
@@ -879,7 +909,7 @@
           bk_biz_id: globalBizsStore.currentBizId,
           ticket_type: TicketTypes.MYSQL_SINGLE_DESTROY,
           details: {
-            cluster_ids: [data.id],
+            cluster_ids: data.map(dataItem => dataItem.id),
           },
         };
         await createTicket(params).then((res) => {
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/list-ha/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/list-ha/components/list/Index.vue
index f5abb8a6af..40438c4c35 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/list-ha/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/list-ha/components/list/Index.vue
@@ -22,49 +22,11 @@
           @click="handleApply">
           {{ t('申请实例') }}
         </AuthButton>
-        <BkDropdown
-          v-bk-tooltips="{
-            disabled: hasSelected,
-            content: t('请选择操作集群'),
-          }"
+        <ClusterBatchOperation
           v-db-console="'redis.haClusterManage.batchOperation'"
-          class="cluster-dropdown ml-8 mb-16"
+          class="ml-8 mb-16"
           :disabled="!hasSelected"
-          @click.stop
-          @hide="() => (isShowDropdown = false)"
-          @show="() => (isShowDropdown = true)">
-          <BkButton :disabled="!hasSelected">
-            <span class="pr-4">{{ t('批量操作') }}</span>
-            <DbIcon
-              class="cluster-dropdown-icon"
-              :class="[{ 'cluster-dropdown-icon-active': isShowDropdown }]"
-              type="down-big " />
-          </BkButton>
-          <template #content>
-            <BkDropdownMenu>
-              <BkDropdownItem
-                v-db-console="'redis.haClusterManage.extractKey'"
-                @click="handleShowExtract(selected)">
-                {{ t('提取Key') }}
-              </BkDropdownItem>
-              <BkDropdownItem
-                v-db-console="'redis.haClusterManage.deleteKey'"
-                @click="handlShowDeleteKeys(selected)">
-                {{ t('删除Key') }}
-              </BkDropdownItem>
-              <BkDropdownItem
-                v-db-console="'redis.haClusterManage.backup'"
-                @click="handleShowBackup(selected)">
-                {{ t('备份') }}
-              </BkDropdownItem>
-              <BkDropdownItem
-                v-db-console="'redis.haClusterManage.dbClear'"
-                @click="handleShowPurge(selected)">
-                {{ t('清档') }}
-              </BkDropdownItem>
-            </BkDropdownMenu>
-          </template>
-        </BkDropdown>
+          :list="clusterBatchOperationList" />
         <DropdownExportExcel
           :ids="selectedIds"
           type="redis" />
@@ -165,6 +127,7 @@
   import MoreActionExtend from '@components/more-action-extend/Index.vue';
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
+  import ClusterBatchOperation from '@views/db-manage/common/cluster-batch-opration/Index.vue'
   import ClusterCapacityUsageRate from '@views/db-manage/common/cluster-capacity-usage-rate/Index.vue'
   import EditEntryConfig from '@views/db-manage/common/cluster-entry-config/Index.vue';
   import ClusterIpCopy from '@views/db-manage/common/cluster-ip-copy/Index.vue';
@@ -270,7 +233,6 @@
     }
   });
 
-  const isShowDropdown = ref(false);
   const selected = shallowRef<RedisModel[]>([])
 
   /** 查看密码 */
@@ -308,6 +270,58 @@
     data: [] as RedisModel[],
   });
 
+  const clusterBatchOperationList = computed(() => [
+  {
+      dbConsole: 'redis.haClusterManage.extractKey',
+      click: () => handleShowExtract(selected.value),
+      disabled: hasDisabledRow.value,
+      tooltips: t('仅已启用集群可以提取 Key'),
+      text: t('提取Key')
+    },
+    {
+      dbConsole: 'redis.haClusterManage.deleteKey',
+      click: () => handlShowDeleteKeys(selected.value),
+      disabled: hasDisabledRow.value,
+      tooltips: t('仅已启用集群可以删除 Key'),
+      text: t('删除Key')
+    },
+    {
+      dbConsole: 'redis.haClusterManage.backup',
+      click: () => handleShowBackup(selected.value),
+      disabled: hasDisabledRow.value,
+      tooltips: t('仅已启用集群可以备份'),
+      text: t('备份')
+    },
+    {
+      dbConsole: 'redis.haClusterManage.dbClear',
+      click: () => handleShowPurge(selected.value),
+      disabled: hasDisabledRow.value,
+      tooltips: t('仅已启用集群可以清档'),
+      text: t('清档')
+    },
+    {
+      dbConsole: 'redis.haClusterManage.disable',
+      click: () => handleSwitchRedis(TicketTypes.REDIS_INSTANCE_PROXY_CLOSE,selected.value),
+      disabled: selected.value.some((data) => data.isOffline || data.operationDisabled),
+      tooltips: t('仅可禁用状态为“已启用”的集群'),
+      text: t('禁用')
+    },
+    {
+      dbConsole: 'redis.haClusterManage.enable',
+      click: () => handleSwitchRedis(TicketTypes.REDIS_INSTANCE_PROXY_OPEN, selected.value),
+      disabled: selected.value.some((data) => data.isOnline || data.isStarting),
+      tooltips: t('仅可启用状态为“已禁用”的集群'),
+      text: t('启用')
+    },
+    {
+      dbConsole: 'redis.haClusterManage.delete',
+      click: () => handleDeleteCluster(selected.value),
+      disabled: selected.value.some((data) => data.isOnline || Boolean(data.operationTicketId)),
+      tooltips: t('仅可删除状态为“已禁用”的集群'),
+      text: t('删除')
+    }
+  ]);
+
   const searchSelectData = computed(() => [
     {
       name: t('访问入口'),
@@ -394,6 +408,8 @@
     return 60;
   });
 
+  const hasDisabledRow = computed(() => selected.value.some((data) => disableSelectMethod(data)));
+
   const columns = computed(() => [
     {
       label: 'ID',
@@ -931,7 +947,7 @@
                             style="width: 100%;height: 32px;"
                             disabled={data.operationDisabled}
                             text
-                            onClick={() => handleSwitchRedis(TicketTypes.REDIS_INSTANCE_PROXY_CLOSE, data)}>
+                            onClick={() => handleSwitchRedis(TicketTypes.REDIS_INSTANCE_PROXY_CLOSE, [data])}>
                             { t('禁用') }
                           </auth-button>
                         </OperationBtnStatusTips>
@@ -939,7 +955,7 @@
                     )
                   }
                   {
-                    !data.isOnline && (
+                    data.isOffline && (
                       <bk-dropdown-item v-db-console="redis.haClusterManage.enable">
                         <OperationBtnStatusTips data={data}>
                           <auth-button
@@ -949,7 +965,7 @@
                             style="width: 100%;height: 32px;"
                             text
                             disabled={data.isStarting}
-                            onClick={() => handleSwitchRedis(TicketTypes.REDIS_INSTANCE_PROXY_OPEN, data)}>
+                            onClick={() => handleSwitchRedis(TicketTypes.REDIS_INSTANCE_PROXY_OPEN, [data])}>
                             { t('启用') }
                           </auth-button>
                         </OperationBtnStatusTips>
@@ -967,7 +983,7 @@
                             style="width: 100%;height: 32px;"
                             disabled={Boolean(data.operationTicketId)}
                             text
-                            onClick={() => handleDeleteCluster(data)}>
+                            onClick={() => handleDeleteCluster([data])}>
                             { t('删除') }
                           </auth-button>
                         </OperationBtnStatusTips>
@@ -1211,9 +1227,10 @@
   /**
    * 集群启停
    */
-  const handleSwitchRedis = (type: TicketTypesStrings, data: RedisModel) => {
+  const handleSwitchRedis = (type: TicketTypesStrings, data: RedisModel[]) => {
     const isOpen = type === TicketTypes.REDIS_INSTANCE_PROXY_OPEN;
-    const title = isOpen ? t('确定启用该集群') : t('确定禁用该集群');
+    const title = isOpen ? t('确定启用集群') : t('确定禁用集群');
+    const name = data.map(dataItem => dataItem.cluster_name).join('，')
     InfoBox({
       type: 'warning',
       title,
@@ -1221,8 +1238,8 @@
         <div style="word-break: all;">
           {
             isOpen
-              ? <p>{t('集群【name】启用后将恢复访问', { name: data.cluster_name })}</p>
-              : <p>{t('集群【name】被禁用后将无法访问_如需恢复访问_可以再次「启用」', { name: data.cluster_name })}</p>
+              ? <p>{t('集群【name】启用后将恢复访问', { name })}</p>
+              : <p>{t('集群【name】被禁用后将无法访问_如需恢复访问_可以再次「启用」', { name })}</p>
           }
         </div>
       ),
@@ -1231,7 +1248,7 @@
           bk_biz_id: globalBizsStore.currentBizId,
           ticket_type: type,
           details: {
-            cluster_ids: [data.id],
+            cluster_ids: data.map(dataItem => dataItem.id),
           },
         };
         await createTicket(params).then((res) => {
@@ -1244,11 +1261,11 @@
   /**
    * 删除集群
    */
-  const handleDeleteCluster = (data: RedisModel) => {
-    const { cluster_name: name } = data;
+  const handleDeleteCluster = (data: RedisModel[]) => {
+    const name = data.map(dataItem => dataItem.cluster_name).join('，')
     InfoBox({
       type: 'warning',
-      title: t('确定删除该集群'),
+      title: t('确定删除集群'),
       confirmText: t('删除'),
       confirmButtonTheme: 'danger',
       content: () => (
@@ -1262,9 +1279,9 @@
       onConfirm: async () => {
         const params = {
           bk_biz_id: globalBizsStore.currentBizId,
-          ticket_type: TicketTypes.REDIS_DESTROY,
+          ticket_type: TicketTypes.REDIS_INSTANCE_DESTROY,
           details: {
-            cluster_id: data.id,
+            cluster_ids: data.map(dataItem => dataItem.id),
           },
         };
         await createTicket(params).then((res) => {
@@ -1299,18 +1316,6 @@
         min-width: 320px;
         margin-left: auto;
       }
-
-      .cluster-dropdown {
-        .cluster-dropdown-icon {
-          color: @gray-color;
-          transform: rotate(0);
-          transition: all 0.2s;
-        }
-
-        .cluster-dropdown-icon-active {
-          transform: rotate(-90deg);
-        }
-      }
     }
 
     .table-wrapper-out {
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/list/components/list/Index.vue
index d06edc4189..c3d9e44018 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/list/components/list/Index.vue
@@ -23,87 +23,11 @@
           @click="handleApply">
           {{ t('申请实例') }}
         </AuthButton>
-        <BkDropdown
-          v-bk-tooltips="{
-            disabled: hasSelected,
-            content: t('请选择操作集群'),
-          }"
+        <ClusterBatchOperation
           v-db-console="'redis.clusterManage.batchOperation'"
-          class="cluster-dropdown mb-16"
+          class="ml-8 mb-16"
           :disabled="!hasSelected"
-          @click.stop
-          @hide="() => (isShowDropdown = false)"
-          @show="() => (isShowDropdown = true)">
-          <BkButton
-            class="ml-8"
-            :disabled="!hasSelected">
-            <span class="pr-4">{{ t('批量操作') }}</span>
-            <DbIcon
-              class="cluster-dropdown-icon"
-              :class="[{ 'cluster-dropdown-icon-active': isShowDropdown }]"
-              type="down-big " />
-          </BkButton>
-          <template #content>
-            <BkDropdownMenu>
-              <BkDropdownItem
-                v-db-console="'redis.clusterManage.extractKey'"
-                @click="handleShowExtract(selected)">
-                <BkButton
-                  v-bk-tooltips="{
-                    disabled: !hasDisabledRow,
-                    content: t('禁用的集群不支持提取 Key'),
-                    placement: 'right',
-                  }"
-                  :disabled="hasDisabledRow"
-                  text>
-                  {{ t('提取Key') }}
-                </BkButton>
-              </BkDropdownItem>
-              <BkDropdownItem
-                v-db-console="'redis.clusterManage.deleteKey'"
-                @click="handlShowDeleteKeys(selected)">
-                <BkButton
-                  v-bk-tooltips="{
-                    disabled: !hasDisabledRow,
-                    content: t('禁用的集群不支持删除 Key'),
-                    placement: 'right',
-                  }"
-                  :disabled="hasDisabledRow"
-                  text>
-                  {{ t('删除Key') }}
-                </BkButton>
-              </BkDropdownItem>
-              <BkDropdownItem
-                v-db-console="'redis.clusterManage.backup'"
-                @click="handleShowBackup(selected)">
-                <BkButton
-                  v-bk-tooltips="{
-                    disabled: !hasDisabledRow,
-                    content: t('禁用的集群不支持备份'),
-                    placement: 'right',
-                  }"
-                  :disabled="hasDisabledRow"
-                  text>
-                  {{ t('备份') }}
-                </BkButton>
-              </BkDropdownItem>
-              <BkDropdownItem
-                v-db-console="'redis.clusterManage.dbClear'"
-                @click="handleShowPurge(selected)">
-                <BkButton
-                  v-bk-tooltips="{
-                    disabled: !hasDisabledRow,
-                    content: t('禁用的集群不支持清档'),
-                    placement: 'right',
-                  }"
-                  :disabled="hasDisabledRow"
-                  text>
-                  {{ t('清档') }}
-                </BkButton>
-              </BkDropdownItem>
-            </BkDropdownMenu>
-          </template>
-        </BkDropdown>
+          :list="clusterBatchOperationList" />
         <DropdownExportExcel
           v-db-console="'redis.clusterManage.export'"
           :ids="selectedIds"
@@ -207,6 +131,7 @@
     import MoreActionExtend from '@components/more-action-extend/Index.vue';
     import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
+    import ClusterBatchOperation from '@views/db-manage/common/cluster-batch-opration/Index.vue'
     import ClusterCapacityUsageRate from '@views/db-manage/common/cluster-capacity-usage-rate/Index.vue'
     import EditEntryConfig from '@views/db-manage/common/cluster-entry-config/Index.vue';
     import ClusterIpCopy from '@views/db-manage/common/cluster-ip-copy/Index.vue';
@@ -324,135 +249,165 @@
     const disabledOperations: string[] = [TicketTypes.REDIS_DESTROY, TicketTypes.REDIS_PROXY_CLOSE];
 
   const tableRef = ref<InstanceType<typeof DbTable>>();
-  const isShowDropdown = ref(false);
   const selected = ref<RedisModel[]>([]);
 
-    /** 查看密码 */
-    const passwordState = reactive({
-      isShow: false,
-      fetchParams: {
-        cluster_id: -1,
-        bk_biz_id: globalBizsStore.currentBizId,
-        db_type: DBTypes.REDIS,
-        type: DBTypes.REDIS,
-      },
-    });
-
-    /** 提取 key 功能 */
-    const extractState = reactive({
-      isShow: false,
-      data: [] as RedisModel[],
-    });
-
-    /** 删除 key 功能 */
-    const deleteKeyState = reactive({
-      isShow: false,
-      data: [] as RedisModel[],
-    });
-
-    /** 备份功能 */
-    const backupState = reactive({
-      isShow: false,
-      data: [] as RedisModel[],
-    });
-
-    /** 清档功能 */
-    const purgeState = reactive({
-      isShow: false,
-      data: [] as RedisModel[],
-    });
+  /** 查看密码 */
+  const passwordState = reactive({
+    isShow: false,
+    fetchParams: {
+      cluster_id: -1,
+      bk_biz_id: globalBizsStore.currentBizId,
+      db_type: DBTypes.REDIS,
+      type: DBTypes.REDIS,
+    },
+  });
+
+  /** 提取 key 功能 */
+  const extractState = reactive({
+    isShow: false,
+    data: [] as RedisModel[],
+  });
+
+  /** 删除 key 功能 */
+  const deleteKeyState = reactive({
+    isShow: false,
+    data: [] as RedisModel[],
+  });
+
+  /** 备份功能 */
+  const backupState = reactive({
+    isShow: false,
+    data: [] as RedisModel[],
+  });
+
+  /** 清档功能 */
+  const purgeState = reactive({
+    isShow: false,
+    data: [] as RedisModel[],
+  });
+
+  const clusterBatchOperationList = computed(() => [
+    {
+      dbConsole: 'redis.clusterManage.extractKey',
+      click: () => handleShowExtract(selected.value),
+      disabled: hasDisabledRow.value,
+      tooltips: t('仅已启用集群可以提取 Key'),
+      text: t('提取Key')
+    },
+    {
+      dbConsole: 'redis.clusterManage.deleteKey',
+      click: () => handlShowDeleteKeys(selected.value),
+      disabled: hasDisabledRow.value,
+      tooltips: t('仅已启用集群可以删除 Key'),
+      text: t('删除Key')
+    },
+    {
+      dbConsole: 'redis.clusterManage.backup',
+      click: () => handleShowBackup(selected.value),
+      disabled: hasDisabledRow.value,
+      tooltips: t('仅已启用集群可以备份'),
+      text: t('备份')
+    },
+    {
+      dbConsole: 'redis.clusterManage.dbClear',
+      click: () => handleShowPurge(selected.value),
+      disabled: hasDisabledRow.value,
+      tooltips: t('仅已启用集群可以清档'),
+      text: t('清档')
+    }
+  ]);
 
-    const searchSelectData = computed(() => [
-      {
-        name: t('访问入口'),
-        id: 'domain',
-        multiple: true,
-      },
-      {
-        name: t('IP 或 IP:Port'),
-        id: 'instance',
-        multiple: true,
-      },
-      {
-        name: 'ID',
-        id: 'id',
-      },
-      {
-        name: t('集群名称'),
-        id: 'name',
-      },
-      {
-        name: t('管控区域'),
-        id: 'bk_cloud_id',
-        multiple: true,
-        children: searchAttrs.value.bk_cloud_id,
-      },
-      {
-        name: t('状态'),
-        id: 'status',
-        multiple: true,
-        children: [
-          {
-            id: 'normal',
-            name: t('正常'),
-          },
-          {
-            id: 'abnormal',
-            name: t('异常'),
-          },
-        ],
-      },
-      {
-        name: t('架构版本'),
-        id: 'cluster_type',
-        multiple: true,
-        children: searchAttrs.value.cluster_type,
-      },
-      {
-        name: t('版本'),
-        id: 'major_version',
-        multiple: true,
-        children: searchAttrs.value.major_version,
-      },
-      {
-        name: t('地域'),
-        id: 'region',
-        multiple: true,
-        children: searchAttrs.value.region,
-      },
-      {
-        name: t('创建人'),
-        id: 'creator',
-      },
-      {
-        name: t('时区'),
-        id: 'time_zone',
-        multiple: true,
-        children: searchAttrs.value.time_zone,
-      },
-    ]);
+  const searchSelectData = computed(() => [
+    {
+      name: t('访问入口'),
+      id: 'domain',
+      multiple: true,
+    },
+    {
+      name: t('IP 或 IP:Port'),
+      id: 'instance',
+      multiple: true,
+    },
+    {
+      name: 'ID',
+      id: 'id',
+    },
+    {
+      name: t('集群名称'),
+      id: 'name',
+    },
+    {
+      name: t('管控区域'),
+      id: 'bk_cloud_id',
+      multiple: true,
+      children: searchAttrs.value.bk_cloud_id,
+    },
+    {
+      name: t('状态'),
+      id: 'status',
+      multiple: true,
+      children: [
+        {
+          id: 'normal',
+          name: t('正常'),
+        },
+        {
+          id: 'abnormal',
+          name: t('异常'),
+        },
+      ],
+    },
+    {
+      name: t('架构版本'),
+      id: 'cluster_type',
+      multiple: true,
+      children: searchAttrs.value.cluster_type,
+    },
+    {
+      name: t('版本'),
+      id: 'major_version',
+      multiple: true,
+      children: searchAttrs.value.major_version,
+    },
+    {
+      name: t('地域'),
+      id: 'region',
+      multiple: true,
+      children: searchAttrs.value.region,
+    },
+    {
+      name: t('创建人'),
+      id: 'creator',
+    },
+    {
+      name: t('时区'),
+      id: 'time_zone',
+      multiple: true,
+      children: searchAttrs.value.time_zone,
+    },
+  ]);
 
-    const paginationExtra = computed(() => {
-      if (isStretchLayoutOpen.value) {
-        return { small: false };
-      }
+  const paginationExtra = computed(() => {
+    if (isStretchLayoutOpen.value) {
+      return { small: false };
+    }
 
-      return {
-        small: true,
-        align: 'left',
-        layout: ['total', 'limit', 'list'],
-      };
-    });
-    const hasSelected = computed(() => selected.value.length > 0);
-    const selectedIds = computed(() => selected.value.map(item => item.id));
-    const isCN = computed(() => locale.value === 'zh-cn');
-    const tableOperationWidth = computed(() => {
-      if (!isStretchLayoutOpen.value) {
-        return isCN.value ? 350 : 420;
-      }
-      return 60;
-    });
-    const hasDisabledRow = computed(() => selected.value.some((data) => disableSelectMethod(data)));
+    return {
+      small: true,
+      align: 'left',
+      layout: ['total', 'limit', 'list'],
+    };
+  });
+  const hasSelected = computed(() => selected.value.length > 0);
+  const selectedIds = computed(() => selected.value.map(item => item.id));
+  const isCN = computed(() => locale.value === 'zh-cn');
+  const tableOperationWidth = computed(() => {
+    if (!isStretchLayoutOpen.value) {
+      return isCN.value ? 350 : 420;
+    }
+    return 60;
+  });
+  const hasDisabledRow = computed(() => selected.value.some((data) => disableSelectMethod(data)));
 
   const columns = computed(() => [
     {
@@ -1050,7 +1005,7 @@
                       )
                     }
                     {
-                      !data.isOnline && (
+                      data.isOffline && (
                         <bk-dropdown-item v-db-console="redis.clusterManage.enable">
                           <OperationBtnStatusTips data={data}>
                             <auth-button
@@ -1505,20 +1460,6 @@
         min-width: 320px;
         margin-left: auto;
       }
-
-      .cluster-dropdown {
-        margin-right: auto;
-
-        .cluster-dropdown-icon {
-          color: @gray-color;
-          transform: rotate(0);
-          transition: all 0.2s;
-        }
-
-        .cluster-dropdown-icon-active {
-          transform: rotate(-90deg);
-        }
-      }
     }
 
     .table-wrapper-out {
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/ha-cluster-list/components/List.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/ha-cluster-list/components/List.vue
index 726900e4fc..43975681b5 100644
--- a/dbm-ui/frontend/src/views/db-manage/sqlserver/ha-cluster-list/components/List.vue
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/ha-cluster-list/components/List.vue
@@ -7,6 +7,11 @@
           @click="handleApply">
           {{ t('申请实例') }}
         </BkButton>
+        <ClusterBatchOperation
+          v-db-console="'sqlserver.haClusterList.batchOperation'"
+          class="ml-8"
+          :disabled="!hasSelected"
+          :list="clusterBatchOperationList" />
         <span
           v-bk-tooltips="{
             disabled: hasSelected,
@@ -120,6 +125,7 @@
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
   import ClusterAuthorize from '@views/db-manage/common/cluster-authorize/Index.vue';
+  import ClusterBatchOperation from '@views/db-manage/common/cluster-batch-opration/Index.vue'
   import ClusterCapacityUsageRate from '@views/db-manage/common/cluster-capacity-usage-rate/Index.vue'
   import EditEntryConfig, { type ClusterEntryInfo } from '@views/db-manage/common/cluster-entry-config/Index.vue';
   import ClusterIpCopy from '@views/db-manage/common/cluster-ip-copy/Index.vue';
@@ -204,9 +210,32 @@
 
   const hasSelected = computed(() => selected.value.length > 0);
   const selectedIds = computed(() => selected.value.map(item => item.id));
-
   const isCN = computed(() => locale.value === 'zh-cn');
 
+  const clusterBatchOperationList = computed(() => [
+    {
+      dbConsole: 'sqlserver.haClusterList.disable',
+      click: () => handleSwitchCluster(TicketTypes.SQLSERVER_DISABLE, selected.value),
+      disabled: selected.value.some((data) => data.isOffline || data.operationDisabled),
+      tooltips: t('仅可禁用状态为“已启用”的集群'),
+      text: t('禁用')
+    },
+    {
+      dbConsole: 'sqlserver.haClusterList.enable',
+      click: () => handleSwitchCluster(TicketTypes.SQLSERVER_ENABLE, selected.value),
+      disabled: selected.value.some((data) => data.isOnline || data.isStarting),
+      tooltips: t('仅可启用状态为“已禁用”的集群'),
+      text: t('启用')
+    },
+    {
+      dbConsole: 'sqlserver.haClusterList.delete',
+      click: () => handleDeleteCluster(selected.value),
+      disabled: selected.value.some((data) => data.isOnline || Boolean(data.operationTicketId)),
+      tooltips: t('仅可删除状态为“已禁用”的集群'),
+      text: t('删除')
+    }
+  ]);
+
   const searchSelectData = computed(() => [
     {
       name: t('访问入口'),
@@ -712,7 +741,7 @@
                     theme="primary"
                     class="ml-16"
                     disabled={data.operationDisabled}
-                    onClick={() => handleSwitchCluster(TicketTypes.SQLSERVER_DISABLE, data)}>
+                    onClick={() => handleSwitchCluster(TicketTypes.SQLSERVER_DISABLE, [data])}>
                     { t('禁用') }
                   </bk-button>
                 </OperationBtnStatusTips>
@@ -724,7 +753,7 @@
                     text
                     theme="primary"
                     disabled={data.isStarting}
-                    onClick={ () => handleSwitchCluster(TicketTypes.SQLSERVER_ENABLE, data) }>
+                    onClick={ () => handleSwitchCluster(TicketTypes.SQLSERVER_ENABLE, [data]) }>
                     { t('启用') }
                   </bk-button>
                 </OperationBtnStatusTips>
@@ -744,7 +773,7 @@
                     theme="primary"
                     class="ml-16"
                     disabled={Boolean(data.operationTicketId)}
-                    onClick={() => handleDeleteCluster(data)}>
+                    onClick={() => handleDeleteCluster([data])}>
                     { t('删除') }
                   </bk-button>
                 </OperationBtnStatusTips>
@@ -871,17 +900,15 @@
    */
   const handleSwitchCluster = (
     type: TicketTypesStrings,
-    data: SqlServerHaModel,
+    data: SqlServerHaModel[],
   ) => {
-    if (!type) return;
-
     const isOpen = type === TicketTypes.SQLSERVER_ENABLE;
     InfoBox({
       type: 'warning',
-      title: isOpen ? t('确定启用该集群？') : t('确定禁用该集群？'),
+      title: isOpen ? t('确定启用集群？') : t('确定禁用集群？'),
       content: () => (
         <div style="word-break: all;">
-          <p style="color: #313238">{t('集群')} ：{data.cluster_name}</p>
+          <p style="color: #313238">{t('集群')} ：{data.map(dataItem => dataItem.cluster_name).join('，')}</p>
           {
             isOpen
               ? <p>{ t('启用后将恢复访问')}</p>
@@ -895,7 +922,7 @@
           bk_biz_id: currentBizId,
           ticket_type: type,
           details: {
-            cluster_ids: [data.id],
+            cluster_ids: data.map(dataItem => dataItem.id),
           },
         });
         return true;
@@ -906,8 +933,8 @@
   /**
    * 删除集群
    */
-  const handleDeleteCluster = (data: SqlServerHaModel) => {
-    const { cluster_name: name } = data;
+  const handleDeleteCluster = (data: SqlServerHaModel[]) => {
+    const name = data.map(dataItem => dataItem.cluster_name).join('，')
     InfoBox({
       type: 'warning',
       title: t('确定删除该集群'),
@@ -926,7 +953,7 @@
           bk_biz_id: currentBizId,
           ticket_type: TicketTypes.SQLSERVER_DESTROY,
           details: {
-            cluster_ids: [data.id],
+            cluster_ids: data.map(dataItem => dataItem.id),
           },
         });
         return false;
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/single-cluster/components/List.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/single-cluster/components/List.vue
index d7d8b99b80..320f430362 100644
--- a/dbm-ui/frontend/src/views/db-manage/sqlserver/single-cluster/components/List.vue
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/single-cluster/components/List.vue
@@ -7,6 +7,11 @@
           @click="handleApply">
           {{ t('申请实例') }}
         </BkButton>
+        <ClusterBatchOperation
+          v-db-console="'sqlserver.singleClusterList.batchOperation'"
+          class="ml-8"
+          :disabled="!hasSelected"
+          :list="clusterBatchOperationList" />
         <span
           v-bk-tooltips="{
             disabled: hasSelected,
@@ -119,6 +124,7 @@
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
   import ClusterAuthorize from '@views/db-manage/common/cluster-authorize/Index.vue';
+  import ClusterBatchOperation from '@views/db-manage/common/cluster-batch-opration/Index.vue'
   import ClusterCapacityUsageRate from '@views/db-manage/common/cluster-capacity-usage-rate/Index.vue'
   import EditEntryConfig from '@views/db-manage/common/cluster-entry-config/Index.vue';
   import ClusterIpCopy from '@views/db-manage/common/cluster-ip-copy/Index.vue';
@@ -203,6 +209,30 @@
   const selectedIds = computed(() => selected.value.map(item => item.id));
   const isCN = computed(() => locale.value === 'zh-cn');
 
+  const clusterBatchOperationList = computed(() => [
+    {
+      dbConsole: 'sqlserver.singleClusterList.disable',
+      click: () => handleSwitchCluster(TicketTypes.SQLSERVER_DISABLE, selected.value),
+      disabled: selected.value.some((data) => data.isOffline || data.operationDisabled),
+      tooltips: t('仅可禁用状态为“已启用”的集群'),
+      text: t('禁用')
+    },
+    {
+      dbConsole: 'sqlserver.singleClusterList.enable',
+      click: () => handleSwitchCluster(TicketTypes.SQLSERVER_ENABLE, selected.value),
+      disabled: selected.value.some((data) => data.isOnline || data.isStarting),
+      tooltips: t('仅可启用状态为“已禁用”的集群'),
+      text: t('启用')
+    },
+    {
+      dbConsole: 'sqlserver.singleClusterList.delete',
+      click: () => handleDeleteCluster(selected.value),
+      disabled: selected.value.some((data) => data.isOnline || Boolean(data.operationTicketId)),
+      tooltips: t('仅可删除状态为“已禁用”的集群'),
+      text: t('删除')
+    }
+  ]);
+
   const searchSelectData = computed(() => [
     {
       name: t('访问入口'),
@@ -582,7 +612,7 @@
                     theme="primary"
                     class="ml-16"
                     disabled={data.operationDisabled}
-                    onClick={ () => handleSwitchCluster(TicketTypes.SQLSERVER_DISABLE, data) }>
+                    onClick={ () => handleSwitchCluster(TicketTypes.SQLSERVER_DISABLE, [data]) }>
                     { t('禁用') }
                 </bk-button>
                 </OperationBtnStatusTips>
@@ -594,7 +624,7 @@
                     text
                     theme="primary"
                     disabled={data.isStarting}
-                    onClick={ () => handleSwitchCluster(TicketTypes.SQLSERVER_ENABLE, data) }>
+                    onClick={ () => handleSwitchCluster(TicketTypes.SQLSERVER_ENABLE, [data]) }>
                     { t('启用') }
                   </bk-button>
                 </OperationBtnStatusTips>
@@ -614,7 +644,7 @@
                     theme="primary"
                     class="ml-16"
                     disabled={Boolean(data.operationTicketId)}
-                    onClick={ () => handleDeleteCluster(data) }>
+                    onClick={ () => handleDeleteCluster([data]) }>
                     { t('删除') }
                   </bk-button>
                 </OperationBtnStatusTips>
@@ -692,17 +722,15 @@
    */
   const handleSwitchCluster = (
     type: TicketTypesStrings,
-    data: SqlServerSingleModel,
+    data: SqlServerSingleModel[],
   ) => {
-    if (!type) return;
-
     const isOpen = type === TicketTypes.SQLSERVER_ENABLE;
     InfoBox({
       type: 'warning',
-      title: isOpen ? t('确定启用该集群？') : t('确定禁用该集群？'),
+      title: isOpen ? t('确定启用集群？') : t('确定禁用集群？'),
       content: () => (
         <div style="word-break: all;">
-          <p style="color: #313238">{t('集群')} ：{data.cluster_name}</p>
+          <p style="color: #313238">{t('集群')} ：{data.map(dataItem => dataItem.cluster_name).join('，')}</p>
           {
             isOpen
               ? <p>{ t('启用后将恢复访问')}</p>
@@ -716,7 +744,7 @@
           bk_biz_id: currentBizId,
           ticket_type: type,
           details: {
-            cluster_ids: [data.id],
+            cluster_ids: data.map(dataItem => dataItem.id),
           },
         });
         return true;
@@ -727,11 +755,11 @@
   /**
    * 删除集群
    */
-  const handleDeleteCluster = (data: SqlServerSingleModel) => {
-    const { cluster_name: name } = data;
+  const handleDeleteCluster = (data: SqlServerSingleModel[]) => {
+    const name = data.map(dataItem => dataItem.cluster_name).join('，')
     InfoBox({
       type: 'warning',
-      title: t('确定删除该集群'),
+      title: t('确定删除集群'),
       confirmText: t('删除'),
       confirmButtonTheme: 'danger',
       content: () => (
@@ -747,7 +775,7 @@
           bk_biz_id: currentBizId,
           ticket_type: TicketTypes.SQLSERVER_DESTROY,
           details: {
-            cluster_ids: [data.id],
+            cluster_ids: data.map(dataItem => dataItem.id),
           },
         });
         return false;
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list/components/list/Index.vue
index 4bb8dd4444..19a6b20488 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list/components/list/Index.vue
@@ -21,6 +21,11 @@
           @click="handleApply">
           {{ t('申请实例') }}
         </AuthButton>
+        <ClusterBatchOperation
+          v-db-console="'tendbCluster.clusterManage.batchOperation'"
+          class="ml-8"
+          :disabled="!hasSelected"
+          :list="clusterBatchOperationList" />
         <span
           v-bk-tooltips="{
             disabled: hasSelected,
@@ -178,6 +183,7 @@
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
   import ClusterAuthorize from '@views/db-manage/common/cluster-authorize/Index.vue';
+  import ClusterBatchOperation from '@views/db-manage/common/cluster-batch-opration/Index.vue'
   import ClusterCapacityUsageRate from '@views/db-manage/common/cluster-capacity-usage-rate/Index.vue'
   import EditEntryConfig, { type ClusterEntryInfo } from '@views/db-manage/common/cluster-entry-config/Index.vue';
   import ClusterExportData from '@views/db-manage/common/cluster-export-data/Index.vue'
@@ -262,6 +268,7 @@
   const tableDataList = computed(() => tableRef.value?.getData<TendbClusterModel>() || [])
   const hasData = computed(() => tableDataList.value.length > 0);
   const isCN = computed(() => locale.value === 'zh-cn');
+
   const searchSelectData = computed(() => [
     {
       name: t('访问入口'),
@@ -346,6 +353,30 @@
     return [];
   });
 
+  const clusterBatchOperationList = computed(() => [
+    {
+      dbConsole: 'tendbCluster.clusterManage.disable',
+      click: () => handleChangeClusterOnline(TicketTypes.TENDBCLUSTER_DISABLE, selected.value),
+      disabled: selected.value.some((data) => data.isOffline || data.operationDisabled),
+      tooltips: t('仅可禁用状态为“已启用”的集群'),
+      text: t('禁用')
+    },
+    {
+      dbConsole: 'tendbCluster.clusterManage.enable',
+      click: () => handleChangeClusterOnline(TicketTypes.TENDBCLUSTER_ENABLE, selected.value),
+      disabled: selected.value.some((data) => data.isOnline || data.isStarting),
+      tooltips: t('仅可启用状态为“已禁用”的集群'),
+      text: t('启用')
+    },
+    {
+      dbConsole: 'tendbCluster.clusterManage.delete',
+      click: () => handleDeleteCluster(selected.value),
+      disabled: selected.value.some((data) => data.isOnline || Boolean(data.operationTicketId)),
+      tooltips: t('仅可删除状态为“已禁用”的集群'),
+      text: t('删除')
+    }
+  ]);
+
   const entrySort = (data: ClusterEntryInfo[]) => data.sort(a => a.role === 'master_entry' ? -1 : 1);
 
 
@@ -975,52 +1006,58 @@
               </bk-dropdown-item>
             ));
           }
-          operations.push(...[
-            <bk-dropdown-item v-db-console="tendbCluster.clusterManage.disable">
-              <OperationBtnStatusTips data={data}>
-                <auth-button
-                  action-id="tendbcluster_enable_disable"
-                  permission={data.permission.tendbcluster_enable_disable}
-                  resource={data.id}
-                  text
-                  disabled={data.operationDisabled}
-                  class="mr-8"
-                  onClick={() => handleChangeClusterOnline(TicketTypes.TENDBCLUSTER_DISABLE, data)}>
-                  { t('禁用') }
-                </auth-button>
-              </OperationBtnStatusTips>
-            </bk-dropdown-item>,
-            <bk-dropdown-item v-db-console="tendbCluster.clusterManage.enable">
-              <OperationBtnStatusTips data={data}>
-                <auth-button
-                  action-id="tendbcluster_enable_disable"
-                  permission={data.permission.tendbcluster_enable_disable}
-                  v-db-console="tendbCluster.clusterManage.enable"
-                  resource={data.id}
-                  text
-                  disabled={data.isStarting}
-                  class="mr-8"
-                  onClick={() => handleChangeClusterOnline(TicketTypes.TENDBCLUSTER_ENABLE, data)}>
-                  { t('启用') }
-                </auth-button>
-              </OperationBtnStatusTips>
-            </bk-dropdown-item>,
-            <bk-dropdown-item v-db-console="tendbCluster.clusterManage.delete">
-              <OperationBtnStatusTips data={data}>
-                <auth-button
-                  action-id="tendbcluster_destroy"
-                  permission={data.permission.tendbcluster_destroy}
-                  v-db-console="tendbCluster.clusterManage.delete"
-                  resource={data.id}
-                  text
-                  disabled={Boolean(data.operationTicketId)}
-                  class="mr-8"
-                  onClick={() => handleDeleteCluster(data)}>
-                  { t('删除') }
-                </auth-button>
-              </OperationBtnStatusTips>
-            </bk-dropdown-item>
-          ]);
+          if (data.isOnline) {
+            operations.push(
+              <bk-dropdown-item v-db-console="tendbCluster.clusterManage.disable">
+                <OperationBtnStatusTips data={data}>
+                  <auth-button
+                    action-id="tendbcluster_enable_disable"
+                    permission={data.permission.tendbcluster_enable_disable}
+                    resource={data.id}
+                    text
+                    disabled={data.operationDisabled}
+                    class="mr-8"
+                    onClick={() => handleChangeClusterOnline(TicketTypes.TENDBCLUSTER_DISABLE, [data])}>
+                    { t('禁用') }
+                  </auth-button>
+                </OperationBtnStatusTips>
+              </bk-dropdown-item>
+            )
+          }
+          if (data.isOffline) {
+            operations.push(...[
+              <bk-dropdown-item v-db-console="tendbCluster.clusterManage.enable">
+                <OperationBtnStatusTips data={data}>
+                  <auth-button
+                    action-id="tendbcluster_enable_disable"
+                    permission={data.permission.tendbcluster_enable_disable}
+                    v-db-console="tendbCluster.clusterManage.enable"
+                    resource={data.id}
+                    text
+                    disabled={data.isStarting}
+                    class="mr-8"
+                    onClick={() => handleChangeClusterOnline(TicketTypes.TENDBCLUSTER_ENABLE, [data])}>
+                    { t('启用') }
+                  </auth-button>
+                </OperationBtnStatusTips>
+              </bk-dropdown-item>,
+              <bk-dropdown-item v-db-console="tendbCluster.clusterManage.delete">
+                <OperationBtnStatusTips data={data}>
+                  <auth-button
+                    action-id="tendbcluster_destroy"
+                    permission={data.permission.tendbcluster_destroy}
+                    v-db-console="tendbCluster.clusterManage.delete"
+                    resource={data.id}
+                    text
+                    disabled={Boolean(data.operationTicketId)}
+                    class="mr-8"
+                    onClick={() => handleDeleteCluster([data])}>
+                    { t('删除') }
+                  </auth-button>
+                </OperationBtnStatusTips>
+              </bk-dropdown-item>
+            ]);
+          }
 
           return operations;
         };
@@ -1311,11 +1348,10 @@
   };
 
   // 集群启停
-  const handleChangeClusterOnline = (type: TicketTypesStrings, data: TendbClusterModel) => {
-    if (!type) return;
-
+  const handleChangeClusterOnline = (type: TicketTypesStrings, data: TendbClusterModel[]) => {
     const isOpen = type === TicketTypes.TENDBCLUSTER_ENABLE;
-    const title = isOpen ? t('确定启用该集群') : t('确定禁用该集群');
+    const title = isOpen ? t('确定启用集群') : t('确定禁用集群');
+    const name = data.map(dataItem => dataItem.cluster_name).join('，')
     InfoBox({
       type: 'warning',
       title,
@@ -1323,8 +1359,8 @@
         <div style="word-break: all;">
           {
             isOpen
-              ? <p>{t('集群【name】启用后将恢复访问', { name: data.cluster_name })}</p>
-              : <p>{t('集群【name】被禁用后将无法访问_如需恢复访问_可以再次「启用」', { name: data.cluster_name })}</p>
+              ? <p>{t('集群【name】启用后将恢复访问', { name })}</p>
+              : <p>{t('集群【name】被禁用后将无法访问_如需恢复访问_可以再次「启用」', { name })}</p>
           }
         </div>
       ),
@@ -1332,7 +1368,7 @@
         bk_biz_id: currentBizId,
         ticket_type: type,
         details: {
-          cluster_ids: [data.id],
+          cluster_ids: data.map(dataItem => dataItem.id),
         },
       })
         .then((res) => {
@@ -1343,8 +1379,8 @@
   };
 
   // 删除集群
-  const handleDeleteCluster = (data: TendbClusterModel) => {
-    const { cluster_name: name } = data;
+  const handleDeleteCluster = (data: TendbClusterModel[]) => {
+    const name = data.map(dataItem => dataItem.cluster_name).join('，')
     InfoBox({
       type: 'warning',
       title: t('确定删除该集群'),
@@ -1362,7 +1398,7 @@
         bk_biz_id: currentBizId,
         ticket_type: TicketTypes.TENDBCLUSTER_DESTROY,
         details: {
-          cluster_ids: [data.id],
+          cluster_ids:data.map(dataItem => dataItem.id),
         },
       })
         .then((res) => {