From 0cacb279b1d192a72adf5f61af425251664379e9 Mon Sep 17 00:00:00 2001
From: Austin <1344583166@qq.com>
Date: Sat, 9 Nov 2024 09:57:23 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E9=9B=86=E7=BE=A4=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=99=A8=E5=8B=BE=E9=80=89=E9=A1=BA=E5=BA=8F=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=E4=BF=AE=E5=A4=8D=20#7850=20#=20Reviewed,=20transacti?=
 =?UTF-8?q?on=20id:=2023391?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/cluster-selector/Index.vue | 116 +++++++-------
 .../common/result-preview/Index.vue           |  22 +--
 .../components/mongo/Index.vue                | 151 ++++++++----------
 .../components/redis/Index.vue                | 121 +++++++-------
 .../components/sqlserver-ha/Index.vue         | 144 ++++++++---------
 .../components/sqlserver-single/Index.vue     | 145 ++++++++---------
 .../components/tendb-cluster/Index.vue        | 115 ++++++-------
 .../components/tendb-single/Index.vue         | 120 ++++++--------
 .../components/tendbha/Index.vue              | 115 ++++++-------
 dbm-ui/frontend/src/locales/zh-cn.json        |   1 +
 dbm-ui/frontend/src/services/source/dbbase.ts |   1 +
 .../common/sql-execute/cluster-ids/Index.vue  |  12 +-
 12 files changed, 483 insertions(+), 580 deletions(-)

diff --git a/dbm-ui/frontend/src/components/cluster-selector/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/Index.vue
index f13fcf3ae4..501c141a95 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/Index.vue
@@ -52,7 +52,7 @@
             :selected-map="selectedMap"
             :show-title="activePanelObj.showPreviewResultTitle"
             :tab-list="tabList"
-            @delete-item="handleSelecteRow" />
+            @delete="handleDeleteItem" />
         </div>
       </template>
       <template #main>
@@ -95,7 +95,7 @@
             :get-resource-list="activePanelObj.getResourceList"
             :multiple="activePanelObj.multiple"
             :search-select-list="activePanelObj.searchSelectList"
-            :selected="selectedArr"
+            :selected="selectedMap[activeTab].list"
             @change="handleSelectTable" />
         </div>
       </template>
@@ -203,6 +203,13 @@
 
   export type TabConfig = Omit<TabItem, 'tableContent' | 'resultContent'>;
 
+  export interface SelectMapValueType<T> {
+    [key: string]: {
+      map: Record<string, T>;
+      list: T[];
+    };
+  }
+
   interface Props {
     selected: Record<string, T[]>;
     clusterTypes: string[];
@@ -377,7 +384,7 @@
   const activeTab = ref(ClusterTypes.TENDBCLUSTER as string);
   const showTabTips = ref(false);
   const isSelectedAll = ref(false);
-  const selectedMap = ref<Record<string, Record<string, T>>>({});
+  const selectedMap = ref<SelectMapValueType<T>>({});
 
   const activePanelObj = shallowRef(tabListMap[ClusterTypes.TENDBCLUSTER]);
 
@@ -413,12 +420,6 @@
     props.clusterTypes ? props.clusterTypes.map((type) => clusterTabListMap.value[type]) : [],
   );
 
-  const selectedArr = computed(() =>
-    activeTab.value && selectedMap.value[activeTab.value] && Object.keys(selectedMap.value).length > 0
-      ? { [activeTab.value]: Object.values(selectedMap.value[activeTab.value]) }
-      : {},
-  );
-
   // 显示切换 tab tips
   // const showSwitchTabTips = computed(() => showTabTips.value && tabList.value.length > 1);
   // 选中结果是否为空
@@ -426,7 +427,7 @@
 
   const selectedClusterList = computed(() =>
     Object.values(selectedMap.value).reduce<string[]>((prevList, selectedItem) => {
-      const clusterList = Object.values(selectedItem).map((clusterItem) => clusterItem.master_domain);
+      const clusterList = selectedItem.list.map((clusterItem) => clusterItem.master_domain);
       prevList.push(...clusterList);
       return prevList;
     }, []),
@@ -473,35 +474,45 @@
     },
   );
 
-  watch(isShow, (show) => {
-    if (show && tabList.value) {
+  watch(isShow, () => {
+    if (isShow.value && tabList.value) {
       selectedMap.value = tabList.value
         .map((item) => item.id)
-        .reduce(
-          (result, tabKey) => {
-            if (!props.selected[tabKey]) {
-              return result;
-            }
-            const tabSelectMap = props.selected[tabKey].reduce(
+        .reduce((result, tabKey) => {
+          if (!props.selected[tabKey]) {
+            return result;
+          }
+          const tabSelectMap = {
+            map: props.selected[tabKey].reduce(
               (selectResult, selectItem) => ({
                 ...selectResult,
                 [selectItem.id]: selectItem,
               }),
               {} as Record<string, T>,
-            );
-            return {
-              ...result,
-              [tabKey]: tabSelectMap,
-            };
-          },
-          {} as Record<string, Record<string, T>>,
-        );
+            ),
+            list: props.selected[tabKey],
+          };
+          return {
+            ...result,
+            [tabKey]: tabSelectMap,
+          };
+        }, {} as SelectMapValueType<T>);
       showTabTips.value = true;
-
-      console.log('watch = ', selectedMap.value, tabList.value);
     }
   });
 
+  const initSelectedMap = () => {
+    selectedMap.value = Object.keys(selectedMap.value).reduce<SelectMapValueType<T>>((results, id) => {
+      Object.assign(results, {
+        [id]: {
+          map: {},
+          list: [],
+        },
+      });
+      return results;
+    }, {});
+  };
+
   /**
    * 切换 tab
    */
@@ -515,12 +526,7 @@
       activePanelObj.value = currentTab;
     }
     if (props.onlyOneType) {
-      selectedMap.value = Object.keys(selectedMap.value).reduce<Record<string, Record<string, any>>>((results, id) => {
-        Object.assign(results, {
-          [id]: {},
-        });
-        return results;
-      }, {});
+      initSelectedMap();
     }
   };
 
@@ -540,7 +546,7 @@
    * 清空选中项
    */
   const handleClearSelected = () => {
-    selectedMap.value = {};
+    initSelectedMap();
     isSelectedAll.value = false;
   };
 
@@ -549,7 +555,7 @@
    */
   const handleCopyCluster = () => {
     const copyValues = Object.values(selectedMap.value).reduce((result, selectItem) => {
-      result.push(...Object.values(selectItem).map((item) => item.master_domain));
+      result.push(...selectItem.list.map((item) => item.master_domain));
       return result;
     }, [] as string[]);
 
@@ -565,7 +571,7 @@
     const result = Object.keys(selectedMap.value).reduce(
       (result, tabKey) => ({
         ...result,
-        [tabKey]: Object.values(selectedMap.value[tabKey]),
+        [tabKey]: selectedMap.value[tabKey].list,
       }),
       {},
     );
@@ -580,39 +586,25 @@
   /**
    * 选择当行数据
    */
-  const handleSelecteRow = (data: T, value: boolean) => {
-    const selectedMapMemo = { ...selectedMap.value };
-    if (!selectedMapMemo[activeTab.value]) {
-      selectedMapMemo[activeTab.value] = {};
-    }
-    if (value) {
-      selectedMapMemo[activeTab.value][data.id] = data;
-    } else {
-      delete selectedMapMemo[activeTab.value][data.id];
-    }
-    selectedMap.value = selectedMapMemo;
+  const handleDeleteItem = (data: T, tabKey: string) => {
+    delete selectedMap.value[tabKey].map[data.id];
+    selectedMap.value[tabKey].list = selectedMap.value[tabKey].list.filter((item) => item.id !== data.id);
   };
 
-  const handleSelectTable = (selected: Record<string, Record<string, T>>) => {
-    if (!activePanelObj.value.multiple) {
-      selectedMap.value = selected;
-      return;
-    }
+  const handleSelectTable = (selected: T[]) => {
     // 如果只允许选一种集群类型, 则清空非当前集群类型的选中列表
-    // 如果是勾选的取消全选，则忽略
-    if (props.onlyOneType && Object.keys(Object.values(selected)[0]).length > 0) {
+    if (props.onlyOneType && selected.length > 0) {
       // 只会有一个key
-      const [currentKey] = Object.keys(selected);
       Object.keys(selectedMap.value).forEach((key) => {
-        if (key !== currentKey) {
-          selectedMap.value[key] = {};
-        } else {
-          selectedMap.value[key] = selected[key];
+        if (key !== activeTab.value) {
+          selectedMap.value[key] = {
+            map: {},
+            list: [],
+          };
         }
       });
-      return;
     }
-    Object.assign(selectedMap.value, selected);
+    selectedMap.value[activeTab.value].list = selected;
   };
 </script>
 
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/common/result-preview/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/common/result-preview/Index.vue
index ca405bbc7c..34152ec00f 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/components/common/result-preview/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/components/common/result-preview/Index.vue
@@ -23,12 +23,12 @@
       v-for="(tabSelected, tabKey) in selectedMap"
       :key="tabKey">
       <CollapseMini
-        v-if="Object.keys(tabSelected).length > 0"
+        v-if="tabSelected.list.length > 0"
         collapse
-        :count="Object.keys(tabSelected).length"
-        :title="getTabInfo(tabKey)">
+        :count="tabSelected.list.length"
+        :title="getTabInfo(tabKey as string)">
         <div
-          v-for="clusterItem in tabSelected"
+          v-for="clusterItem in tabSelected.list"
           :key="clusterItem.id"
           class="result-item">
           <span
@@ -38,7 +38,7 @@
           </span>
           <i
             class="db-icon-close result-remove"
-            @click="handleDeleteItem(clusterItem, false)" />
+            @click="handleDeleteItem(clusterItem, tabKey as string)" />
         </div>
       </CollapseMini>
     </template>
@@ -47,19 +47,21 @@
 <script setup lang="tsx" generic="T extends Record<string, any>">
   import _ from 'lodash';
 
+  import type { SelectMapValueType } from '../../../Index.vue';
+
   import CollapseMini from './CollapseMini.vue';
 
   type Selected = Record<string, T[]>;
 
   interface Props {
     tabList: { name: string; id: string }[];
-    selectedMap: Record<string, Record<string, ValueOf<Selected>[0]>>;
+    selectedMap: SelectMapValueType<T>;
     showTitle?: boolean;
     displayKey?: string;
   }
 
   interface Emits {
-    (e: 'delete-item', value: T, status: boolean): void;
+    (e: 'delete', value: T, tabKey: string): void;
   }
 
   const props = withDefaults(defineProps<Props>(), {
@@ -70,13 +72,13 @@
   const emits = defineEmits<Emits>();
 
   // 选中结果是否为空
-  const isEmpty = computed(() => _.every(Object.values(props.selectedMap), (item) => Object.keys(item).length < 1));
+  const isEmpty = computed(() => _.every(Object.values(props.selectedMap), (item) => item.list.length === 0));
 
   // 获取 tab 信息
   const getTabInfo = (key: string) => (props.showTitle ? props.tabList.find((tab) => tab.id === key)?.name : '');
 
-  const handleDeleteItem = (data: ValueOf<Selected>[0], value: boolean) => {
-    emits('delete-item', data, value);
+  const handleDeleteItem = (data: ValueOf<Selected>[0], tabKey: string) => {
+    emits('delete', data, tabKey);
   };
 </script>
 
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/mongo/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/mongo/Index.vue
index f514419217..76b0583cfc 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/components/mongo/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/components/mongo/Index.vue
@@ -40,7 +40,6 @@
   </BkLoading>
 </template>
 <script setup lang="tsx">
-  import { shallowRef } from 'vue';
   import { useI18n } from 'vue-i18n';
 
   import { useLinkQueryColumnSerach } from '@hooks';
@@ -49,7 +48,7 @@
 
   import DbStatus from '@components/db-status/index.vue';
 
-  import { getSearchSelectorParams,makeMap } from '@utils';
+  import { getSearchSelectorParams } from '@utils';
 
   import type { TabItem } from '../../Index.vue';
   import SerachBar from '../common/SearchBar.vue';
@@ -59,7 +58,7 @@
 
   interface Props {
     activeTab: ClusterTypes,
-    selected: Record<string, any[]>,
+    selected: any[],
     // 多选模式
     multiple: TabItem['multiple'],
     getResourceList: NonNullable<TabItem['getResourceList']>,
@@ -70,18 +69,38 @@
     checkboxHoverTip?: TabItem['checkboxHoverTip'],
   }
 
-  type ResourceItem = ValueOf<SelectedMap>[0];
-
   interface Emits {
-    (e: 'change', value: Record<string, Record<string, ResourceItem>>): void,
+    (e: 'change', value: ResourceItem[]): void,
   }
 
   type SelectedMap = Props['selected'];
 
+  type ResourceItem = ValueOf<SelectedMap>[0];
+
   const props = defineProps<Props>();
 
   const emits = defineEmits<Emits>();
 
+  const checkSelectedAll = () => {
+    if (tableData.value.filter(data => props.disabledRowConfig.find(item => item.handler(data))).length > 0) {
+      isSelectedAll.value = false;
+      return;
+    }
+
+    if (!selectedList.value.length) {
+      isSelectedAll.value = false;
+      return;
+    }
+
+    for (let i = 0; i < tableData.value.length; i++) {
+      if (!selectedMap.value[tableData.value[i].id]) {
+        isSelectedAll.value = false;
+        return;
+      }
+    }
+    isSelectedAll.value = true;
+  };
+
   const { t } = useI18n();
 
   const {
@@ -106,7 +125,29 @@
     }
   });
 
-  const columns = [
+  const {
+    isLoading,
+    pagination,
+    isAnomalies,
+    data: tableData,
+    searchSelectValue,
+    fetchResources,
+    handleChangePage,
+    handeChangeLimit,
+  } = useClusterData<ResourceItem>(searchValue);
+
+  const activeTab = ref(props.activeTab);
+  const selectedList = ref<ResourceItem[]>([]);
+  const isSelectedAll = ref(false);
+
+  const selectedMap = computed(() => selectedList.value.reduce<Record<string, ResourceItem>>((results, item) => {
+    Object.assign(results, {
+      [item.id]: item,
+    })
+    return results;
+  }, {}))
+
+  const columns = computed(() => [
     {
       minWidth: 60,
       label: () => props.multiple && (
@@ -163,13 +204,13 @@
                 default: () => props.multiple ? (
                   <bk-checkbox
                     style="vertical-align: middle;"
-                    model-value={Boolean(selectedDomainMap.value[data.id])}
+                    model-value={Boolean(selectedMap.value[data.id])}
                     label={true}
                     onChange={(value: boolean) => handleSelecteRow(data, value)}
                   />
                   ) : (
                   <bk-radio-group
-                    model-value={Boolean(selectedDomainMap.value[data.id])}
+                    model-value={Boolean(selectedMap.value[data.id])}
                     onChange={(value: boolean) => handleSelecteRow(data, value)}
                   >
                     <bk-radio label={true}/>
@@ -253,66 +294,33 @@
       },
       render: ({ data }: { data: ResourceItem }) => <span>{data.bk_cloud_name}</span>,
     },
-  ];
+  ]);
 
-  // const isSelectedAllReal = false;
-
-  const activeTab = ref(props.activeTab);
-  const selectedMap = shallowRef<Record<string, Record<string, ResourceItem>>>({});
-  const isSelectedAll = ref(false);
-
-  const {
-    isLoading,
-    pagination,
-    isAnomalies,
-    data: tableData,
-    searchSelectValue,
-    fetchResources,
-    handleChangePage,
-    handeChangeLimit,
-  } = useClusterData<ResourceItem>(searchValue);
-
-  // 选中域名列表
-  const selectedDomainMap = computed(() => Object.values(selectedMap.value)
-    .reduce((result, selectItem) => {
-      const masterDomainMap  = makeMap(Object.keys(selectItem));
-      return Object.assign({}, result, masterDomainMap);
-    }, {} as Record<string, boolean>));
-
-  const isIndeterminate = computed(() => !isSelectedAll.value
-    && selectedMap.value[activeTab.value] && Object.keys(selectedMap.value[activeTab.value]).length > 0);
+  const isIndeterminate = computed(() => !isSelectedAll.value && selectedList.value.length > 0);
 
   const mainSelectDisable = computed(() => tableData.value.filter(data => props.disabledRowConfig
     .find(item => item.handler(data))).length === tableData.value.length);
 
   const generatedColumns = computed(() => {
     if (props.customColums) {
-      return [columns[0], ...props.customColums];
+      return [columns.value[0], ...props.customColums];
     }
-    return columns;
+    return columns.value;
   });
 
   watch(() => [props.activeTab, props.selected], () => {
     if (props.activeTab) {
       activeTab.value = props.activeTab;
-      if (!props.selected[props.activeTab] || !props.selected) {
-        return;
-      }
-      const tabSelectMap = props.selected[props.activeTab].reduce((selectResult, selectItem) => ({
-        ...selectResult,
-        [selectItem.id]: selectItem,
-      }), {} as Record<string, ResourceItem>);
-      selectedMap.value = {
-        [props.activeTab]: tabSelectMap,
-      };
+      selectedList.value = props.selected;
+      checkSelectedAll();
     }
   }, {
     immediate: true,
     deep: true,
   });
 
-  watch(activeTab, (tab) => {
-    if (tab) {
+  watch(activeTab, () => {
+    if (activeTab.value) {
       searchSelectValue.value = [];
     }
   });
@@ -351,51 +359,28 @@
     }
   };
 
-  const checkSelectedAll = () => {
-    if (tableData.value.filter(data => props.disabledRowConfig.find(item => item.handler(data))).length > 0) {
-      nextTick(() => {
-        isSelectedAll.value = false;
-      });
-      return;
-    }
-    const currentSelected = selectedMap.value[activeTab.value];
-    if (!currentSelected || Object.keys(currentSelected).length < 1) {
-      isSelectedAll.value = false;
-      return;
-    }
-    for (let i = 0; i < tableData.value.length; i++) {
-      if (!currentSelected[tableData.value[i].id]) {
-        isSelectedAll.value = false;
-        return;
-      }
-    }
-    isSelectedAll.value = true;
-  };
-
   /**
    * 选择当行数据
    */
-  const handleSelecteRow = (data: ResourceItem, value: boolean) => {
-    const selectedMapMemo = props.multiple ? { ...selectedMap.value } : {};
-    if (!selectedMapMemo[activeTab.value]) {
-      selectedMapMemo[activeTab.value] = {};
+   const handleSelecteRow = (data: ResourceItem, value: boolean) => {
+    if (!props.multiple) {
+      selectedList.value = [];
     }
-    if (value) {
-      selectedMapMemo[activeTab.value][data.id] = data;
+    if (value && !selectedMap.value[data.id]) {
+      selectedList.value.push(data);
     } else {
-      delete selectedMapMemo[activeTab.value][data.id];
+      selectedList.value = selectedList.value.filter((item) => item.id !== data.id);
     }
-    selectedMap.value = selectedMapMemo;
-    emits('change', selectedMap.value);
+    emits('change', selectedList.value);
     checkSelectedAll();
   };
 
-  const handleRowClick = (row:any, data: ResourceItem) => {
+  const handleRowClick = (_: any, data: ResourceItem) => {
     if (props.disabledRowConfig.find(item => item.handler(data))) {
       return;
     }
-    const currentSelected = selectedMap.value[activeTab.value];
-    const isChecked = !!(currentSelected && currentSelected[data.id]);
+
+    const isChecked = !!selectedMap.value[data.id];
     handleSelecteRow(data, !isChecked);
   };
 
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/redis/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/redis/Index.vue
index 35a75df415..20aa9e8a2b 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/components/redis/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/components/redis/Index.vue
@@ -41,7 +41,6 @@
   </BkLoading>
 </template>
 <script setup lang="tsx">
-  import { shallowRef } from 'vue';
   import { useI18n } from 'vue-i18n';
 
   import { useLinkQueryColumnSerach } from '@hooks';
@@ -51,7 +50,7 @@
   import DbStatus from '@components/db-status/index.vue';
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
-  import { getSearchSelectorParams,makeMap } from '@utils';
+  import { getSearchSelectorParams } from '@utils';
 
   import type { TabItem } from '../../Index.vue';
   import SearchBar from '../common/SearchBar.vue';
@@ -61,7 +60,7 @@
 
   interface Props {
     activeTab: ClusterTypes,
-    selected: Record<string, any[]>,
+    selected: any[],
     getResourceList: NonNullable<TabItem['getResourceList']>,
     disabledRowConfig: NonNullable<TabItem['disabledRowConfig']>,
     columnStatusFilter?: TabItem['columnStatusFilter'],
@@ -69,21 +68,41 @@
     searchSelectList?: TabItem['searchSelectList'],
   }
 
-  type ResourceItem = ValueOf<SelectedMap>[0];
-
   interface Emits {
-    (e: 'change', value: Record<string, Record<string, ResourceItem>>): void,
+    (e: 'change', value: ResourceItem[]): void,
   }
 
   type SelectedMap = Props['selected'];
 
+  type ResourceItem = ValueOf<SelectedMap>[0];
+
   const props = defineProps<Props>();
 
   const emits = defineEmits<Emits>();
 
   defineOptions({
     inheritAttrs: false
-  })
+  });
+
+  const checkSelectedAll = () => {
+    if (tableData.value.filter(data => props.disabledRowConfig.find(item => item.handler(data))).length > 0) {
+      isSelectedAll.value = false;
+      return;
+    }
+
+    if (!selectedList.value.length) {
+      isSelectedAll.value = false;
+      return;
+    }
+
+    for (let i = 0; i < tableData.value.length; i++) {
+      if (!selectedMap.value[tableData.value[i].id]) {
+        isSelectedAll.value = false;
+        return;
+      }
+    }
+    isSelectedAll.value = true;
+  };
 
   const { t } = useI18n();
 
@@ -121,9 +140,16 @@
   } = useClusterData<ResourceItem>(searchValue);
 
   const activeTab = ref(props.activeTab);
-  const selectedMap = shallowRef<Record<string, Record<string, ResourceItem>>>({});
+  const selectedList = ref<ResourceItem[]>([]);
   const isSelectedAll = ref(false);
 
+  const selectedMap = computed(() => selectedList.value.reduce<Record<string, ResourceItem>>((results, item) => {
+    Object.assign(results, {
+      [item.id]: item,
+    })
+    return results;
+  }, {}))
+
   const columns = computed(() => [
     {
       minWidth: 70,
@@ -174,7 +200,7 @@
         return (
           <bk-checkbox
             style="vertical-align: middle;"
-            model-value={Boolean(selectedDomainMap.value[data.id])}
+            model-value={Boolean(selectedMap.value[data.id])}
             label={true}
             onChange={(value: boolean) => handleSelecteRow(data, value)}
           />
@@ -273,15 +299,7 @@
     },
   ]);
 
-  // 选中域名列表
-  const selectedDomainMap = computed(() => Object.values(selectedMap.value)
-    .reduce((result, selectItem) => {
-      const masterDomainMap  = makeMap(Object.keys(selectItem));
-      return Object.assign({}, result, masterDomainMap);
-    }, {} as Record<string, boolean>));
-
-  const isIndeterminate = computed(() => !isSelectedAll.value
-    && selectedMap.value[activeTab.value] && Object.keys(selectedMap.value[activeTab.value]).length > 0);
+  const isIndeterminate = computed(() => !isSelectedAll.value && selectedList.value.length > 0);
 
   const mainSelectDisable = computed(() => tableData.value.filter(data => props.disabledRowConfig
     .find(item => item.handler(data))).length === tableData.value.length);
@@ -293,27 +311,19 @@
     return columns.value;
   });
 
-  watch(() => [props.activeTab, props.selected] as [ClusterTypes, Record<string, any[]>], ([tabKey, selected]) => {
-    if (tabKey) {
-      activeTab.value = tabKey;
-      if (!selected[tabKey] || !props.selected) {
-        return;
-      }
-      const tabSelectMap = selected[tabKey].reduce((selectResult, selectItem) => ({
-        ...selectResult,
-        [selectItem.id]: selectItem,
-      }), {} as Record<string, ResourceItem>);
-      selectedMap.value = {
-        [tabKey]: tabSelectMap,
-      };
+  watch(() => [props.activeTab, props.selected], () => {
+    if (props.activeTab) {
+      activeTab.value = props.activeTab;
+      selectedList.value = props.selected;
+      checkSelectedAll();
     }
   }, {
     immediate: true,
     deep: true,
   });
 
-  watch(() => activeTab.value, (tab) => {
-    if (tab) {
+  watch(() => activeTab.value, () => {
+    if (activeTab.value) {
       searchValue.value = [];
       handleTablePageChange(1);
     }
@@ -349,51 +359,28 @@
     }
   };
 
-  const checkSelectedAll = () => {
-    if (tableData.value.filter(data => props.disabledRowConfig.find(item => item.handler(data))).length > 0) {
-      nextTick(() => {
-        isSelectedAll.value = false;
-      });
-      return;
-    }
-    const currentSelected = selectedMap.value[activeTab.value];
-    if (!currentSelected || Object.keys(currentSelected).length < 1) {
-      isSelectedAll.value = false;
-      return;
-    }
-    for (let i = 0; i < tableData.value.length; i++) {
-      if (!currentSelected[tableData.value[i].id]) {
-        isSelectedAll.value = false;
-        return;
-      }
-    }
-    isSelectedAll.value = true;
-  };
-
   /**
    * 选择当行数据
    */
-  const handleSelecteRow = (data: ResourceItem, value: boolean) => {
-    const selectedMapMemo = { ...selectedMap.value };
-    if (!selectedMapMemo[activeTab.value]) {
-      selectedMapMemo[activeTab.value] = {};
-    }
-    if (value) {
-      selectedMapMemo[activeTab.value][data.id] = data;
+   const handleSelecteRow = (data: ResourceItem, value: boolean) => {
+    // if (!props.multiple) {
+    //   selectedList.value = [];
+    // }
+    if (value && !selectedMap.value[data.id]) {
+      selectedList.value.push(data);
     } else {
-      delete selectedMapMemo[activeTab.value][data.id];
+      selectedList.value = selectedList.value.filter((item) => item.id !== data.id);
     }
-    selectedMap.value = selectedMapMemo;
-    emits('change', selectedMap.value);
+    emits('change', selectedList.value);
     checkSelectedAll();
   };
 
-  const handleRowClick = (row:any, data: ResourceItem) => {
+  const handleRowClick = (_: any, data: ResourceItem) => {
     if (props.disabledRowConfig.find(item => item.handler(data))) {
       return;
     }
-    const currentSelected = selectedMap.value[activeTab.value];
-    const isChecked = !!(currentSelected && currentSelected[data.id]);
+
+    const isChecked = !!selectedMap.value[data.id];
     handleSelecteRow(data, !isChecked);
   };
 
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/sqlserver-ha/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/sqlserver-ha/Index.vue
index fb1517b695..c5a825a201 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/components/sqlserver-ha/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/components/sqlserver-ha/Index.vue
@@ -41,19 +41,15 @@
 </template>
 
 <script setup lang="tsx">
-  import { shallowRef } from 'vue';
   import { useI18n } from 'vue-i18n';
 
-  import SqlServerHaModel from '@services/model/sqlserver/sqlserver-ha';
-  import SqlServerSingleModel from '@services/model/sqlserver/sqlserver-single';
-
   import { useLinkQueryColumnSerach } from '@hooks';
 
   import { ClusterTypes } from '@common/const';
 
   import DbStatus from '@components/db-status/index.vue';
 
-  import { getSearchSelectorParams,makeMap } from '@utils';
+  import { getSearchSelectorParams } from '@utils';
 
   import type { TabItem } from '../../Index.vue';
   import SerachBar from '../common/SearchBar.vue';
@@ -63,7 +59,7 @@
 
   interface Props {
     activeTab: ClusterTypes,
-    selected: Record<string, (SqlServerSingleModel | SqlServerHaModel)[]>,
+    selected: any[],
     getResourceList: NonNullable<TabItem['getResourceList']>,
     disabledRowConfig: NonNullable<TabItem['disabledRowConfig']>,
     columnStatusFilter?: TabItem['columnStatusFilter'],
@@ -72,17 +68,37 @@
     multiple: boolean,
   }
 
-  type ResourceItem = ValueOf<SelectedMap>[0];
-
   interface Emits {
-    (e: 'change', value: Record<string, Record<string, ResourceItem>>): void,
+    (e: 'change', value: ResourceItem[]): void,
   }
 
   type SelectedMap = Props['selected'];
 
+  type ResourceItem = ValueOf<SelectedMap>[0];
+
   const props = defineProps<Props>();
   const emits = defineEmits<Emits>();
 
+  const checkSelectedAll = () => {
+    if (tableData.value.filter(data => props.disabledRowConfig.find(item => item.handler(data))).length > 0) {
+      isSelectedAll.value = false;
+      return;
+    }
+
+    if (!selectedList.value.length) {
+      isSelectedAll.value = false;
+      return;
+    }
+
+    for (let i = 0; i < tableData.value.length; i++) {
+      if (!selectedMap.value[tableData.value[i].id]) {
+        isSelectedAll.value = false;
+        return;
+      }
+    }
+    isSelectedAll.value = true;
+  };
+
   const { t } = useI18n();
 
   const {
@@ -106,6 +122,28 @@
     }
   });
 
+  const {
+    isLoading,
+    pagination,
+    isAnomalies,
+    data: tableData,
+    searchSelectValue,
+    fetchResources,
+    handleChangePage,
+    handeChangeLimit,
+  } = useClusterData<ResourceItem>(searchValue);
+
+  const activeTab = ref(props.activeTab);
+  const selectedList = ref<ResourceItem[]>([]);
+  const isSelectedAll = ref(false);
+
+  const selectedMap = computed(() => selectedList.value.reduce<Record<string, ResourceItem>>((results, item) => {
+    Object.assign(results, {
+      [item.id]: item,
+    })
+    return results;
+  }, {}))
+
   const columns = computed(() => [
     {
       width: 80,
@@ -158,13 +196,13 @@
         return props.multiple ? (
           <bk-checkbox
             style="vertical-align: middle;"
-            model-value={Boolean(selectedDomainMap.value[data.id])}
+            model-value={Boolean(selectedMap.value[data.id])}
             label={true}
             onChange={(value: boolean) => handleSelecteRow(data, value)}
           />
           ) : (
             <bk-radio
-              model-value={Boolean(selectedDomainMap.value[data.id])}
+              model-value={Boolean(selectedMap.value[data.id])}
               label={true}
               onChange={(value: boolean) => handleSelecteRow(data, value)}/>
         );
@@ -270,30 +308,7 @@
     },
   ]);
 
-  const activeTab = ref(props.activeTab);
-  const isSelectedAll = ref(false);
-  const selectedMap = shallowRef<Record<string, Record<string, ResourceItem>>>({});
-
-  const {
-    isLoading,
-    pagination,
-    isAnomalies,
-    data: tableData,
-    searchSelectValue,
-    fetchResources,
-    handleChangePage,
-    handeChangeLimit,
-  } = useClusterData<ResourceItem>(searchValue);
-
-  // 选中域名列表
-  const selectedDomainMap = computed(() => Object.values(selectedMap.value)
-    .reduce((result, selectItem) => {
-      const masterDomainMap  = makeMap(Object.keys(selectItem));
-      return Object.assign({}, result, masterDomainMap);
-    }, {} as Record<string, boolean>));
-
-  const isIndeterminate = computed(() => !isSelectedAll.value
-    && selectedMap.value[activeTab.value] && Object.keys(selectedMap.value[activeTab.value]).length > 0);
+  const isIndeterminate = computed(() => !isSelectedAll.value && selectedList.value.length > 0);
 
   const mainSelectDisable = computed(() => tableData.value.filter(data => props.disabledRowConfig
     .find(item => item.handler(data))).length === tableData.value.length);
@@ -308,24 +323,16 @@
   watch(() => [props.activeTab, props.selected], () => {
     if (props.activeTab) {
       activeTab.value = props.activeTab;
-      if (!props.selected || !props.selected[props.activeTab]) {
-        return;
-      }
-      // eslint-disable-next-line max-len
-      const tabSelectMap = props.selected[props.activeTab].reduce((selectResult, selectItem) => Object.assign({}, selectResult, {
-        [selectItem.id]: selectItem,
-      }), {} as Record<string, ResourceItem>);
-      selectedMap.value = {
-        [props.activeTab]: tabSelectMap,
-      };
+      selectedList.value = props.selected;
+      checkSelectedAll();
     }
   }, {
     immediate: true,
     deep: true,
   });
 
-  watch(() => activeTab.value, (tab) => {
-    if (tab) {
+  watch(() => activeTab.value, () => {
+    if (activeTab.value) {
       searchSelectValue.value = [];
     }
   });
@@ -364,51 +371,28 @@
     }
   };
 
-  const checkSelectedAll = () => {
-    if (tableData.value.filter(data => props.disabledRowConfig.find(item => item.handler(data))).length > 0) {
-      nextTick(() => {
-        isSelectedAll.value = false;
-      });
-      return;
-    }
-    const currentSelected = selectedMap.value[activeTab.value];
-    if (!currentSelected || Object.keys(currentSelected).length < 1) {
-      isSelectedAll.value = false;
-      return;
-    }
-    for (let i = 0; i < tableData.value.length; i++) {
-      if (!currentSelected[tableData.value[i].id]) {
-        isSelectedAll.value = false;
-        return;
-      }
-    }
-    isSelectedAll.value = true;
-  };
-
   /**
    * 选择当行数据
    */
-  const handleSelecteRow = (data: ResourceItem, value: boolean) => {
-    const selectedMapMemo = props.multiple ? { ...selectedMap.value } : {};
-    if (!selectedMapMemo[activeTab.value]) {
-      selectedMapMemo[activeTab.value] = {};
+   const handleSelecteRow = (data: ResourceItem, value: boolean) => {
+    if (!props.multiple) {
+      selectedList.value = [];
     }
-    if (value) {
-      selectedMapMemo[activeTab.value][data.id] = data;
+    if (value && !selectedMap.value[data.id]) {
+      selectedList.value.push(data);
     } else {
-      delete selectedMapMemo[activeTab.value][data.id];
+      selectedList.value = selectedList.value.filter((item) => item.id !== data.id);
     }
-    selectedMap.value = selectedMapMemo;
-    emits('change', selectedMap.value);
+    emits('change', selectedList.value);
     checkSelectedAll();
   };
 
-  const handleRowClick = (row:any, data: ResourceItem) => {
+  const handleRowClick = (_: any, data: ResourceItem) => {
     if (props.disabledRowConfig.find(item => item.handler(data))) {
       return;
     }
-    const currentSelected = selectedMap.value[activeTab.value];
-    const isChecked = !!(currentSelected && currentSelected[data.id]);
+
+    const isChecked = !!selectedMap.value[data.id];
     handleSelecteRow(data, !isChecked);
   };
 
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/sqlserver-single/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/sqlserver-single/Index.vue
index ddaf0be209..14917511fa 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/components/sqlserver-single/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/components/sqlserver-single/Index.vue
@@ -41,19 +41,15 @@
 </template>
 
 <script setup lang="tsx">
-  import { shallowRef } from 'vue';
   import { useI18n } from 'vue-i18n';
 
-  import SqlServerHaModel from '@services/model/sqlserver/sqlserver-ha';
-  import SqlServerSingleModel from '@services/model/sqlserver/sqlserver-single';
-
   import { useLinkQueryColumnSerach } from '@hooks';
 
   import { ClusterTypes } from '@common/const';
 
   import DbStatus from '@components/db-status/index.vue';
 
-  import { getSearchSelectorParams,makeMap } from '@utils';
+  import { getSearchSelectorParams } from '@utils';
 
   import type { TabItem } from '../../Index.vue';
   import SerachBar from '../common/SearchBar.vue';
@@ -63,7 +59,7 @@
 
   interface Props {
     activeTab: ClusterTypes,
-    selected: Record<string, (SqlServerSingleModel | SqlServerHaModel)[]>,
+    selected: any[],
     getResourceList: NonNullable<TabItem['getResourceList']>,
     disabledRowConfig: NonNullable<TabItem['disabledRowConfig']>,
     columnStatusFilter?: TabItem['columnStatusFilter'],
@@ -72,17 +68,37 @@
     multiple: boolean,
   }
 
-  type ResourceItem = ValueOf<SelectedMap>[0];
-
   interface Emits {
-    (e: 'change', value: Record<string, Record<string, ResourceItem>>): void,
+    (e: 'change', value: ResourceItem[]): void,
   }
 
   type SelectedMap = Props['selected'];
 
+  type ResourceItem = ValueOf<SelectedMap>[0];
+
   const props = defineProps<Props>();
   const emits = defineEmits<Emits>();
 
+  const checkSelectedAll = () => {
+    if (tableData.value.filter(data => props.disabledRowConfig.find(item => item.handler(data))).length > 0) {
+      isSelectedAll.value = false;
+      return;
+    }
+
+    if (!selectedList.value.length) {
+      isSelectedAll.value = false;
+      return;
+    }
+
+    for (let i = 0; i < tableData.value.length; i++) {
+      if (!selectedMap.value[tableData.value[i].id]) {
+        isSelectedAll.value = false;
+        return;
+      }
+    }
+    isSelectedAll.value = true;
+  };
+
   const { t } = useI18n();
 
   const {
@@ -106,6 +122,29 @@
     }
   });
 
+
+  const {
+    isLoading,
+    pagination,
+    isAnomalies,
+    data: tableData,
+    searchSelectValue,
+    fetchResources,
+    handleChangePage,
+    handeChangeLimit,
+  } = useClusterData<ResourceItem>(searchValue);
+
+  const activeTab = ref(props.activeTab);
+  const selectedList = ref<ResourceItem[]>([]);
+  const isSelectedAll = ref(false);
+
+  const selectedMap = computed(() => selectedList.value.reduce<Record<string, ResourceItem>>((results, item) => {
+    Object.assign(results, {
+      [item.id]: item,
+    })
+    return results;
+  }, {}))
+
   const columns = computed(() => [
     {
       width: 80,
@@ -158,13 +197,13 @@
         return props.multiple ? (
           <bk-checkbox
             style="vertical-align: middle;"
-            model-value={Boolean(selectedDomainMap.value[data.id])}
+            model-value={Boolean(selectedMap.value[data.id])}
             label={true}
             onChange={(value: boolean) => handleSelecteRow(data, value)}
           />
           ) : (
           <bk-radio
-            model-value={Boolean(selectedDomainMap.value[data.id])}
+            model-value={Boolean(selectedMap.value[data.id])}
             onChange={(value: boolean) => handleSelecteRow(data, value)}
             label={true}/>
         );
@@ -270,30 +309,7 @@
     },
   ]);
 
-  const activeTab = ref(props.activeTab);
-  const isSelectedAll = ref(false);
-  const selectedMap = shallowRef<Record<string, Record<string, ResourceItem>>>({});
-
-  const {
-    isLoading,
-    pagination,
-    isAnomalies,
-    data: tableData,
-    searchSelectValue,
-    fetchResources,
-    handleChangePage,
-    handeChangeLimit,
-  } = useClusterData<ResourceItem>(searchValue);
-
-  // 选中域名列表
-  const selectedDomainMap = computed(() => Object.values(selectedMap.value)
-    .reduce((result, selectItem) => {
-      const masterDomainMap  = makeMap(Object.keys(selectItem));
-      return Object.assign({}, result, masterDomainMap);
-    }, {} as Record<string, boolean>));
-
-  const isIndeterminate = computed(() => !isSelectedAll.value
-    && selectedMap.value[activeTab.value] && Object.keys(selectedMap.value[activeTab.value]).length > 0);
+  const isIndeterminate = computed(() => !isSelectedAll.value && selectedList.value.length > 0);
 
   const mainSelectDisable = computed(() => tableData.value.filter(data => props.disabledRowConfig
     .find(item => item.handler(data))).length === tableData.value.length);
@@ -308,24 +324,16 @@
   watch(() => [props.activeTab, props.selected], () => {
     if (props.activeTab) {
       activeTab.value = props.activeTab;
-      if (!props.selected || !props.selected[props.activeTab]) {
-        return;
-      }
-      // eslint-disable-next-line max-len
-      const tabSelectMap = props.selected[props.activeTab].reduce((selectResult, selectItem) => Object.assign({}, selectResult, {
-        [selectItem.id]: selectItem,
-      }), {} as Record<string, ResourceItem>);
-      selectedMap.value = {
-        [props.activeTab]: tabSelectMap,
-      };
+      selectedList.value = props.selected;
+      checkSelectedAll();
     }
   }, {
     immediate: true,
     deep: true,
   });
 
-  watch(() => activeTab.value, (tab) => {
-    if (tab) {
+  watch(() => activeTab.value, () => {
+    if (activeTab.value) {
       searchSelectValue.value = [];
     }
   });
@@ -364,51 +372,28 @@
     }
   };
 
-  const checkSelectedAll = () => {
-    if (tableData.value.filter(data => props.disabledRowConfig.find(item => item.handler(data))).length > 0) {
-      nextTick(() => {
-        isSelectedAll.value = false;
-      });
-      return;
-    }
-    const currentSelected = selectedMap.value[activeTab.value];
-    if (!currentSelected || Object.keys(currentSelected).length < 1) {
-      isSelectedAll.value = false;
-      return;
-    }
-    for (let i = 0; i < tableData.value.length; i++) {
-      if (!currentSelected[tableData.value[i].id]) {
-        isSelectedAll.value = false;
-        return;
-      }
-    }
-    isSelectedAll.value = true;
-  };
-
   /**
    * 选择当行数据
    */
-  const handleSelecteRow = (data: ResourceItem, value: boolean) => {
-    const selectedMapMemo = props.multiple ? { ...selectedMap.value } : {};
-    if (!selectedMapMemo[activeTab.value]) {
-      selectedMapMemo[activeTab.value] = {};
+   const handleSelecteRow = (data: ResourceItem, value: boolean) => {
+    if (!props.multiple) {
+      selectedList.value = [];
     }
-    if (value) {
-      selectedMapMemo[activeTab.value][data.id] = data;
+    if (value && !selectedMap.value[data.id]) {
+      selectedList.value.push(data);
     } else {
-      delete selectedMapMemo[activeTab.value][data.id];
+      selectedList.value = selectedList.value.filter((item) => item.id !== data.id);
     }
-    selectedMap.value = selectedMapMemo;
-    emits('change', selectedMap.value);
+    emits('change', selectedList.value);
     checkSelectedAll();
   };
 
-  const handleRowClick = (row:any, data: ResourceItem) => {
+  const handleRowClick = (_: any, data: ResourceItem) => {
     if (props.disabledRowConfig.find(item => item.handler(data))) {
       return;
     }
-    const currentSelected = selectedMap.value[activeTab.value];
-    const isChecked = !!(currentSelected && currentSelected[data.id]);
+
+    const isChecked = !!selectedMap.value[data.id];
     handleSelecteRow(data, !isChecked);
   };
 
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/tendb-cluster/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/tendb-cluster/Index.vue
index e08194e132..b69342d637 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/components/tendb-cluster/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/components/tendb-cluster/Index.vue
@@ -41,7 +41,6 @@
   </BkLoading>
 </template>
 <script setup lang="tsx">
-  import { shallowRef } from 'vue';
   import { useI18n } from 'vue-i18n';
 
   import { useLinkQueryColumnSerach } from '@hooks';
@@ -51,7 +50,7 @@
   import DbStatus from '@components/db-status/index.vue';
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
-  import { getSearchSelectorParams,makeMap } from '@utils';
+  import { getSearchSelectorParams } from '@utils';
 
   import type { TabItem } from '../../Index.vue';
   import SerachBar from '../common/SearchBar.vue';
@@ -61,7 +60,7 @@
 
   interface Props {
     activeTab: ClusterTypes,
-    selected: Record<string, any[]>,
+    selected: any[],
     // 多选模式
     multiple: TabItem['multiple'],
     getResourceList: NonNullable<TabItem['getResourceList']>,
@@ -74,7 +73,7 @@
   type ResourceItem = ValueOf<SelectedMap>[0];
 
   interface Emits {
-    (e: 'change', value: Record<string, Record<string, ResourceItem>>): void,
+    (e: 'change', value: ResourceItem[]): void,
   }
 
   type SelectedMap = Props['selected'];
@@ -83,6 +82,26 @@
 
   const emits = defineEmits<Emits>();
 
+  const checkSelectedAll = () => {
+    if (tableData.value.filter(data => props.disabledRowConfig.find(item => item.handler(data))).length > 0) {
+      isSelectedAll.value = false;
+      return;
+    }
+
+    if (!selectedList.value.length) {
+      isSelectedAll.value = false;
+      return;
+    }
+
+    for (let i = 0; i < tableData.value.length; i++) {
+      if (!selectedMap.value[tableData.value[i].id]) {
+        isSelectedAll.value = false;
+        return;
+      }
+    }
+    isSelectedAll.value = true;
+  };
+
   const { t } = useI18n();
 
   const {
@@ -118,9 +137,16 @@
   } = useClusterData<ResourceItem>(searchValue);
 
   const activeTab = ref(props.activeTab);
-  const selectedMap = shallowRef<Record<string, Record<string, ResourceItem>>>({});
+  const selectedList = ref<ResourceItem[]>([]);
   const isSelectedAll = ref(false);
 
+  const selectedMap = computed(() => selectedList.value.reduce<Record<string, ResourceItem>>((results, item) => {
+    Object.assign(results, {
+      [item.id]: item,
+    })
+    return results;
+  }, {}))
+
   const columns = computed(() => [
     {
       minWidth: 70,
@@ -170,13 +196,13 @@
         return props.multiple ? (
           <bk-checkbox
             style="vertical-align: middle;"
-            model-value={Boolean(selectedDomainMap.value[data.id])}
+            model-value={Boolean(selectedMap.value[data.id])}
             label={true}
             onChange={(value: boolean) => handleSelecteRow(data, value)}
           />
           ) : (
           <bk-radio-group
-            model-value={Boolean(selectedDomainMap.value[data.id])}
+            model-value={Boolean(selectedMap.value[data.id])}
             onChange={(value: boolean) => handleSelecteRow(data, value)}
           >
             <bk-radio label={true}/>
@@ -262,15 +288,7 @@
     },
   ]);
 
-  // 选中域名列表
-  const selectedDomainMap = computed(() => Object.values(selectedMap.value)
-    .reduce((result, selectItem) => {
-      const masterDomainMap  = makeMap(Object.keys(selectItem));
-      return Object.assign({}, result, masterDomainMap);
-    }, {} as Record<string, boolean>));
-
-  const isIndeterminate = computed(() => !isSelectedAll.value
-    && selectedMap.value[activeTab.value] && Object.keys(selectedMap.value[activeTab.value]).length > 0);
+  const isIndeterminate = computed(() => !isSelectedAll.value && selectedList.value.length > 0);
 
   const mainSelectDisable = computed(() => tableData.value.filter(data => props.disabledRowConfig
     .find(item => item.handler(data))).length === tableData.value.length);
@@ -282,27 +300,19 @@
     return columns.value;
   });
 
-  watch(() => [props.activeTab, props.selected] as [ClusterTypes, Record<string, any[]>], ([tabKey, selected]) => {
-    if (tabKey) {
-      activeTab.value = tabKey;
-      if (!selected[tabKey] || !props.selected) {
-        return;
-      }
-      const tabSelectMap = selected[tabKey].reduce((selectResult, selectItem) => ({
-        ...selectResult,
-        [selectItem.id]: selectItem,
-      }), {} as Record<string, ResourceItem>);
-      selectedMap.value = {
-        [tabKey]: tabSelectMap,
-      };
+  watch(() => [props.activeTab, props.selected], () => {
+    if (props.activeTab) {
+      activeTab.value = props.activeTab;
+      selectedList.value = props.selected;
+      checkSelectedAll();
     }
   }, {
     immediate: true,
     deep: true,
   });
 
-  watch(() => activeTab.value, (tab) => {
-    if (tab) {
+  watch(() => activeTab.value, () => {
+    if (activeTab.value) {
       searchValue.value = [];
       handleTablePageChange(1);
     }
@@ -338,51 +348,28 @@
     }
   };
 
-  const checkSelectedAll = () => {
-    if (tableData.value.filter(data => props.disabledRowConfig.find(item => item.handler(data))).length > 0) {
-      nextTick(() => {
-        isSelectedAll.value = false;
-      });
-      return;
-    }
-    const currentSelected = selectedMap.value[activeTab.value];
-    if (!currentSelected || Object.keys(currentSelected).length < 1) {
-      isSelectedAll.value = false;
-      return;
-    }
-    for (let i = 0; i < tableData.value.length; i++) {
-      if (!currentSelected[tableData.value[i].id]) {
-        isSelectedAll.value = false;
-        return;
-      }
-    }
-    isSelectedAll.value = true;
-  };
-
   /**
    * 选择当行数据
    */
-  const handleSelecteRow = (data: ResourceItem, value: boolean) => {
-    const selectedMapMemo = props.multiple ? { ...selectedMap.value } : {};
-    if (!selectedMapMemo[activeTab.value]) {
-      selectedMapMemo[activeTab.value] = {};
+   const handleSelecteRow = (data: ResourceItem, value: boolean) => {
+    if (!props.multiple) {
+      selectedList.value = [];
     }
-    if (value) {
-      selectedMapMemo[activeTab.value][data.id] = data;
+    if (value && !selectedMap.value[data.id]) {
+      selectedList.value.push(data);
     } else {
-      delete selectedMapMemo[activeTab.value][data.id];
+      selectedList.value = selectedList.value.filter((item) => item.id !== data.id);
     }
-    selectedMap.value = selectedMapMemo;
-    emits('change', selectedMap.value);
+    emits('change', selectedList.value);
     checkSelectedAll();
   };
 
-  const handleRowClick = (row:any, data: ResourceItem) => {
+  const handleRowClick = (_: any, data: ResourceItem) => {
     if (props.disabledRowConfig.find(item => item.handler(data))) {
       return;
     }
-    const currentSelected = selectedMap.value[activeTab.value];
-    const isChecked = !!(currentSelected && currentSelected[data.id]);
+
+    const isChecked = !!selectedMap.value[data.id];
     handleSelecteRow(data, !isChecked);
   };
 
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/tendb-single/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/tendb-single/Index.vue
index f74ba7e2a8..915aaa2f4d 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/components/tendb-single/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/components/tendb-single/Index.vue
@@ -41,7 +41,6 @@
   </BkLoading>
 </template>
 <script setup lang="tsx">
-  import { shallowRef } from 'vue';
   import { useI18n } from 'vue-i18n';
 
   import { useLinkQueryColumnSerach } from '@hooks';
@@ -51,7 +50,7 @@
   import DbStatus from '@components/db-status/index.vue';
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
-  import { getSearchSelectorParams,makeMap } from '@utils';
+  import { getSearchSelectorParams } from '@utils';
 
   import type { TabItem } from '../../Index.vue';
   import SerachBar from '../common/SearchBar.vue';
@@ -61,7 +60,7 @@
 
   interface Props {
     activeTab: ClusterTypes,
-    selected: Record<string, any[]>,
+    selected: any[],
     // 多选模式
     multiple: TabItem['multiple'],
     getResourceList: NonNullable<TabItem['getResourceList']>,
@@ -74,7 +73,7 @@
   type ResourceItem = ValueOf<SelectedMap>[0];
 
   interface Emits {
-    (e: 'change', value: Record<string, Record<string, ResourceItem>>): void,
+    (e: 'change', value: ResourceItem[]): void,
   }
 
   type SelectedMap = Props['selected'];
@@ -118,6 +117,37 @@
     handeChangeLimit,
   } = useClusterData<ResourceItem>(searchValue);
 
+  const checkSelectedAll = () => {
+    if (tableData.value.filter(data => props.disabledRowConfig.find(item => item.handler(data))).length > 0) {
+      isSelectedAll.value = false;
+      return;
+    }
+
+    if (!selectedList.value.length) {
+      isSelectedAll.value = false;
+      return;
+    }
+
+    for (let i = 0; i < tableData.value.length; i++) {
+      if (!selectedMap.value[tableData.value[i].id]) {
+        isSelectedAll.value = false;
+        return;
+      }
+    }
+    isSelectedAll.value = true;
+  };
+
+  const activeTab = ref(props.activeTab);
+  const selectedList = ref<ResourceItem[]>([]);
+  const isSelectedAll = ref(false);
+
+  const selectedMap = computed(() => selectedList.value.reduce<Record<string, ResourceItem>>((results, item) => {
+    Object.assign(results, {
+      [item.id]: item,
+    })
+    return results;
+  }, {}))
+
   const columns = computed(() => [
     {
       minWidth: 70,
@@ -168,14 +198,14 @@
         return props.multiple ? (
           <bk-checkbox
             style="vertical-align: middle;"
-            model-value={Boolean(selectedDomainMap.value[data.id])}
+            model-value={Boolean(selectedMap.value[data.id])}
             label={true}
             onClick={(e: Event) => e.stopPropagation()}
             onChange={(value: boolean) => handleSelecteRow(data, value)}
           />
           ) : (
           <bk-radio-group
-            model-value={Boolean(selectedDomainMap.value[data.id])}
+            model-value={Boolean(selectedMap.value[data.id])}
             onChange={(value: boolean) => handleSelecteRow(data, value)}
           >
             <bk-radio label={true}/>
@@ -280,19 +310,7 @@
     },
   ]);
 
-  const activeTab = ref(props.activeTab);
-  const selectedMap = shallowRef<Record<string, Record<string, ResourceItem>>>({});
-  const isSelectedAll = ref(false);
-
-  // 选中域名列表
-  const selectedDomainMap = computed(() => Object.values(selectedMap.value)
-    .reduce((result, selectItem) => {
-      const masterDomainMap  = makeMap(Object.keys(selectItem));
-      return Object.assign({}, result, masterDomainMap);
-    }, {} as Record<string, boolean>));
-
-  const isIndeterminate = computed(() => !isSelectedAll.value
-    && selectedMap.value[activeTab.value] && Object.keys(selectedMap.value[activeTab.value]).length > 0);
+  const isIndeterminate = computed(() => !isSelectedAll.value && selectedList.value.length > 0);
 
   const mainSelectDisable = computed(() => tableData.value.filter(data => props.disabledRowConfig
     .find(item => item.handler(data))).length === tableData.value.length);
@@ -304,28 +322,19 @@
     return columns.value;
   });
 
-  watch(() => [props.activeTab, props.selected] as [string, Record<string, any[]>], () => {
+  watch(() => [props.activeTab, props.selected], () => {
     if (props.activeTab) {
       activeTab.value = props.activeTab;
-      if (!props.selected || !props.selected[props.activeTab]) {
-        return;
-      }
-
-      const tabSelectMap = props.selected[props.activeTab]
-        .reduce((selectResult, selectItem) => Object.assign(selectResult, {
-          [selectItem.id]: selectItem,
-        }), {} as Record<string, ResourceItem>);
-      selectedMap.value = {
-        [props.activeTab]: tabSelectMap,
-      };
+      selectedList.value = props.selected;
+      checkSelectedAll();
     }
   }, {
     immediate: true,
     deep: true,
   });
 
-  watch(() => activeTab.value, (tab) => {
-    if (tab) {
+  watch(() => activeTab.value, () => {
+    if (activeTab.value) {
       searchValue.value = [];
       handleTablePageChange(1);
     }
@@ -361,55 +370,32 @@
     }
   };
 
-  const checkSelectedAll = () => {
-    if (tableData.value.filter(data => props.disabledRowConfig.find(item => item.handler(data))).length > 0) {
-      nextTick(() => {
-        isSelectedAll.value = false;
-      });
-      return;
-    }
-    const currentSelected = selectedMap.value[activeTab.value];
-    if (!currentSelected || Object.keys(currentSelected).length < 1) {
-      isSelectedAll.value = false;
-      return;
-    }
-    for (let i = 0; i < tableData.value.length; i++) {
-      if (!currentSelected[tableData.value[i].id]) {
-        isSelectedAll.value = false;
-        return;
-      }
-    }
-    isSelectedAll.value = true;
-  };
-
   /**
    * 选择当行数据
    */
-  const handleSelecteRow = (data: ResourceItem, value: boolean) => {
-    const selectedMapMemo = props.multiple ? { ...selectedMap.value } : {};
-    if (!selectedMapMemo[activeTab.value]) {
-      selectedMapMemo[activeTab.value] = {};
+   const handleSelecteRow = (data: ResourceItem, value: boolean) => {
+    if (!props.multiple) {
+      selectedList.value = [];
     }
-    if (value) {
-      selectedMapMemo[activeTab.value][data.id] = data;
+    if (value && !selectedMap.value[data.id]) {
+      selectedList.value.push(data);
     } else {
-      delete selectedMapMemo[activeTab.value][data.id];
+      selectedList.value = selectedList.value.filter((item) => item.id !== data.id);
     }
-    selectedMap.value = selectedMapMemo;
-    emits('change', selectedMap.value);
+    emits('change', selectedList.value);
     checkSelectedAll();
   };
 
-  const handleRowClick = (row:any, data: ResourceItem) => {
+  const handleRowClick = (_: any, data: ResourceItem) => {
     if (props.disabledRowConfig.find(item => item.handler(data))) {
       return;
     }
-    const currentSelected = selectedMap.value[activeTab.value];
-    const isChecked = !!(currentSelected && currentSelected[data.id]);
+
+    const isChecked = !!selectedMap.value[data.id];
     handleSelecteRow(data, !isChecked);
   };
 
-  function handleTablePageChange(value: number) {
+  const handleTablePageChange = (value: number) => {
     handleChangePage(value)
       .then(() => {
         checkSelectedAll();
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue
index 52b74636f6..63a1b39894 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue
@@ -41,7 +41,6 @@
   </BkLoading>
 </template>
 <script setup lang="tsx">
-  import { shallowRef } from 'vue';
   import { useI18n } from 'vue-i18n';
 
   import { useLinkQueryColumnSerach } from '@hooks';
@@ -51,7 +50,7 @@
   import DbStatus from '@components/db-status/index.vue';
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
-  import { getSearchSelectorParams,makeMap } from '@utils';
+  import { getSearchSelectorParams } from '@utils';
 
   import type { TabItem } from '../../Index.vue';
   import SerachBar from '../common/SearchBar.vue';
@@ -61,7 +60,7 @@
 
   interface Props {
     activeTab: ClusterTypes,
-    selected: Record<string, any[]>,
+    selected: any[],
     // 多选模式
     multiple: TabItem['multiple'],
     getResourceList: NonNullable<TabItem['getResourceList']>,
@@ -71,18 +70,37 @@
     searchSelectList?: TabItem['searchSelectList'],
   }
 
-  type ResourceItem = ValueOf<SelectedMap>[0];
-
   interface Emits {
-    (e: 'change', value: Record<string, Record<string, ResourceItem>>): void,
+    (e: 'change', value: ResourceItem[]): void,
   }
 
   type SelectedMap = Props['selected'];
 
-  const props = defineProps<Props>();
+  type ResourceItem = ValueOf<SelectedMap>[0];
 
+  const props = defineProps<Props>();
   const emits = defineEmits<Emits>();
 
+  const checkSelectedAll = () => {
+    if (tableData.value.filter(data => props.disabledRowConfig.find(item => item.handler(data))).length > 0) {
+      isSelectedAll.value = false;
+      return;
+    }
+
+    if (!selectedList.value.length) {
+      isSelectedAll.value = false;
+      return;
+    }
+
+    for (let i = 0; i < tableData.value.length; i++) {
+      if (!selectedMap.value[tableData.value[i].id]) {
+        isSelectedAll.value = false;
+        return;
+      }
+    }
+    isSelectedAll.value = true;
+  };
+
   const { t } = useI18n();
 
   const {
@@ -119,9 +137,16 @@
   } = useClusterData<ResourceItem>(searchValue);
 
   const activeTab = ref(props.activeTab);
-  const selectedMap = shallowRef<Record<string, Record<string, ResourceItem>>>({});
+  const selectedList = ref<ResourceItem[]>([]);
   const isSelectedAll = ref(false);
 
+  const selectedMap = computed(() => selectedList.value.reduce<Record<string, ResourceItem>>((results, item) => {
+    Object.assign(results, {
+      [item.id]: item,
+    })
+    return results;
+  }, {}))
+
   const columns = computed(() => [
     {
       minWidth: 70,
@@ -169,13 +194,13 @@
         return props.multiple ? (
           <bk-checkbox
             style="vertical-align: middle;"
-            model-value={Boolean(selectedDomainMap.value[data.id])}
+            model-value={Boolean(selectedMap.value[data.id])}
             label={true}
             onChange={(value: boolean) => handleSelecteRow(data, value)}
           />
           ) : (
           <bk-radio-group
-            model-value={Boolean(selectedDomainMap.value[data.id])}
+            model-value={Boolean(selectedMap.value[data.id])}
             onChange={(value: boolean) => handleSelecteRow(data, value)}
           >
             <bk-radio label={true}/>
@@ -272,15 +297,7 @@
     },
   ]);
 
-  // 选中域名列表
-  const selectedDomainMap = computed(() => Object.values(selectedMap.value)
-    .reduce((result, selectItem) => {
-      const masterDomainMap  = makeMap(Object.keys(selectItem));
-      return Object.assign({}, result, masterDomainMap);
-    }, {} as Record<string, boolean>));
-
-  const isIndeterminate = computed(() => !isSelectedAll.value
-    && selectedMap.value[activeTab.value] && Object.keys(selectedMap.value[activeTab.value]).length > 0);
+  const isIndeterminate = computed(() => !isSelectedAll.value && selectedList.value.length > 0);
 
   const mainSelectDisable = computed(() => tableData.value.filter(data => props.disabledRowConfig
     .find(item => item.handler(data))).length === tableData.value.length);
@@ -292,28 +309,19 @@
     return columns.value;
   });
 
-  watch(() => [props.activeTab, props.selected] as [string, Record<string, any[]>], () => {
+  watch(() => [props.activeTab, props.selected], () => {
     if (props.activeTab) {
       activeTab.value = props.activeTab;
-      if (!props.selected || !props.selected[props.activeTab]) {
-        return;
-      }
-
-      const tabSelectMap = props.selected[props.activeTab]
-        .reduce((selectResult, selectItem) => Object.assign(selectResult, {
-          [selectItem.id]: selectItem,
-        }), {} as Record<string, ResourceItem>);
-      selectedMap.value = {
-        [props.activeTab]: tabSelectMap,
-      };
+      selectedList.value = props.selected;
+      checkSelectedAll();
     }
   }, {
     immediate: true,
     deep: true,
   });
 
-  watch(() => activeTab.value, (tab) => {
-    if (tab) {
+  watch(() => activeTab.value, () => {
+    if (activeTab.value) {
       searchValue.value = [];
       handleTablePageChange(1);
     }
@@ -349,51 +357,28 @@
     }
   };
 
-  const checkSelectedAll = () => {
-    if (tableData.value.filter(data => props.disabledRowConfig.find(item => item.handler(data))).length > 0) {
-      nextTick(() => {
-        isSelectedAll.value = false;
-      });
-      return;
-    }
-    const currentSelected = selectedMap.value[activeTab.value];
-    if (!currentSelected || Object.keys(currentSelected).length < 1) {
-      isSelectedAll.value = false;
-      return;
-    }
-    for (let i = 0; i < tableData.value.length; i++) {
-      if (!currentSelected[tableData.value[i].id]) {
-        isSelectedAll.value = false;
-        return;
-      }
-    }
-    isSelectedAll.value = true;
-  };
-
   /**
    * 选择当行数据
    */
   const handleSelecteRow = (data: ResourceItem, value: boolean) => {
-    const selectedMapMemo = props.multiple ? { ...selectedMap.value } : {};
-    if (!selectedMapMemo[activeTab.value]) {
-      selectedMapMemo[activeTab.value] = {};
+    if (!props.multiple) {
+      selectedList.value = [];
     }
-    if (value) {
-      selectedMapMemo[activeTab.value][data.id] = data;
+    if (value && !selectedMap.value[data.id]) {
+      selectedList.value.push(data);
     } else {
-      delete selectedMapMemo[activeTab.value][data.id];
+      selectedList.value = selectedList.value.filter((item) => item.id !== data.id);
     }
-    selectedMap.value = selectedMapMemo;
-    emits('change', selectedMap.value);
+    emits('change', selectedList.value);
     checkSelectedAll();
   };
 
-  const handleRowClick = (row:any, data: ResourceItem) => {
+  const handleRowClick = (_: any, data: ResourceItem) => {
     if (props.disabledRowConfig.find(item => item.handler(data))) {
       return;
     }
-    const currentSelected = selectedMap.value[activeTab.value];
-    const isChecked = !!(currentSelected && currentSelected[data.id]);
+
+    const isChecked = !!selectedMap.value[data.id];
     handleSelecteRow(data, !isChecked);
   };
 
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index 185ea87879..8dbbbbb676 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3605,5 +3605,6 @@
   "请按行输入IP，每行代表一个单元格的值。多个IP用逗号、空格、｜分隔": "请按行输入IP，每行代表一个单元格的值。多个IP用逗号、空格、｜分隔",
   "无只读主机": "无只读主机",
   "批量录入：按行录入，快速批量输入多个单元格的值": "批量录入：按行录入，快速批量输入多个单元格的值",
+  "高可用": "高可用",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/services/source/dbbase.ts b/dbm-ui/frontend/src/services/source/dbbase.ts
index 83c086196a..eb46a561ad 100644
--- a/dbm-ui/frontend/src/services/source/dbbase.ts
+++ b/dbm-ui/frontend/src/services/source/dbbase.ts
@@ -36,6 +36,7 @@ export function filterClusters<
     bk_cloud_name: string;
     cluster_name: string;
     cluster_type: string;
+    major_version: string;
   },
 >(params: { bk_biz_id: number; exact_domain?: string; cluster_ids?: string }) {
   return http.get<T[]>(`${path}/filter_clusters/`, params);
diff --git a/dbm-ui/frontend/src/views/db-manage/common/sql-execute/cluster-ids/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/sql-execute/cluster-ids/Index.vue
index 9184afc508..a4479c60aa 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/sql-execute/cluster-ids/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/sql-execute/cluster-ids/Index.vue
@@ -48,6 +48,8 @@
 
   import TendbhaModel from '@services/model/mysql/tendbha';
   import TendbsingleModel from '@services/model/mysql/tendbsingle';
+  import SqlServerHaClusterModel from '@services/model/sqlserver/sqlserver-ha';
+  import SqlServerSingleClusterModel from '@services/model/sqlserver/sqlserver-single';
   import { filterClusters } from '@services/source/dbbase';
 
   import { ClusterTypes } from '@common/const';
@@ -68,6 +70,8 @@
     clusterTypeList: ClusterTypes[]
   }
 
+  type SelectorRowDataType = TendbhaModel | TendbsingleModel | SqlServerHaClusterModel | SqlServerSingleClusterModel
+
   defineProps<Props>();
 
   const { t } = useI18n();
@@ -135,9 +139,11 @@
   const isLoading = ref(false);
   const isShowClusterSelector = ref(false);
   const formItemRef = ref();
-  const clusterSelectorValue = shallowRef<Record<string, TendbhaModel[] | TendbsingleModel[]>>({
+  const clusterSelectorValue = shallowRef<Record<string, SelectorRowDataType[]>>({
     [ClusterTypes.TENDBHA]: [] as TendbhaModel[],
     [ClusterTypes.TENDBSINGLE]: [] as TendbsingleModel[],
+    [ClusterTypes.SQLSERVER_HA]: [] as SqlServerHaClusterModel[],
+    [ClusterTypes.SQLSERVER_SINGLE]: [] as SqlServerSingleClusterModel[],
   });
   const targetClusterList = shallowRef<Array<IClusterData>>([]);
 
@@ -167,6 +173,8 @@
         }, {
           [ClusterTypes.TENDBHA]: [] as TendbhaModel[],
           [ClusterTypes.TENDBSINGLE]: [] as TendbsingleModel[],
+          [ClusterTypes.SQLSERVER_HA]: [] as SqlServerHaClusterModel[],
+          [ClusterTypes.SQLSERVER_SINGLE]: [] as SqlServerSingleClusterModel[],
         })
       })
       .finally(() => {
@@ -204,7 +212,7 @@
     triggerChange();
   };
 
-  const handelClusterChange = (selected: Record<string, TendbhaModel[] | TendbsingleModel[]>) => {
+  const handelClusterChange = (selected: Record<string, SelectorRowDataType[]>) => {
     targetClusterList.value = _.flatten(Object.values(selected))
     formItemRef.value.clearValidate();
     clusterSelectorValue.value = selected;