TencentBlueKing · 3octaves · Jan 23, 2026 · Jan 22, 2026
@@ -32,12 +32,12 @@
         <PanelTab
           v-model="currentPanelTab"
           :cluster-types="clusterTypes"
-          :disabled="!isEmpty && Boolean(uniquePanelSettings?.enable)"
-          :tip="uniquePanelSettings?.tip" />
+          :is-empty="isEmpty"
+          :unique-panel-settings="uniquePanelSettings" />
         <Table
           :key="currentPanelTab"
           :cluster-type="currentPanelTab"
-          :data-source="dataSource"
+          :data-source-map="dataSourceMap"
           :disable-select-method="disableSelectMethod"
           :selected="currentTableData"
           :single="single"
@@ -77,6 +77,7 @@
 <script setup lang="ts" generic="T extends ISupportClusterType">
   import _ from 'lodash';
   import type { UnwrapRef } from 'vue';
+  import type { ComponentProps } from 'vue-component-type-helpers';
   import { useI18n } from 'vue-i18n';
 
   import useClusterInstaceList from '@views/db-manage/hooks/useClusterInstaceList';
@@ -92,11 +93,9 @@
       [key in C]?: ReturnType<typeof useClusterInstaceList<key>>;
     };
     disableSelectMethod?: (data: InstanceModel<C>) => boolean | string;
+    repeatable?: boolean;
     single?: boolean;
-    uniquePanelSettings?: {
-      enable: boolean;
-      tip?: string;
-    };
+    uniquePanelSettings?: ComponentProps<typeof PanelTab>['uniquePanelSettings'];
   }
 
   type Emits = {
@@ -120,7 +119,7 @@
   const lastValues = ref({} as UnwrapRef<typeof modelValue>);
 
   const currentTableData = computed(() => lastValues.value[currentPanelTab.value] || []);
-  const dataSource = computed(() => props.dataSourceMap?.[currentPanelTab.value as T]);
+
   const isEmpty = computed(() =>
     Object.values<InstanceModel<T>[]>(lastValues.value).every((values) => values.length === 0),
   );
@@ -141,6 +140,9 @@
   };
 
   const handleConfirm = () => {
+    if (!props.repeatable) {
+      modelValue.value = lastValues.value;
+    }
     emits('change', lastValues.value as UnwrapRef<typeof modelValue>);
     handleClose();
   };

@@ -40,8 +40,11 @@
 
   interface Props {
     clusterTypes: ISupportClusterType[];
-    disabled: boolean;
-    tip?: string;
+    isEmpty: boolean;
+    uniquePanelSettings?: {
+      enable: boolean;
+      tip?: string;
+    };
   }
 
   const props = defineProps<Props>();
@@ -57,10 +60,11 @@
     name: tabListMap[clusterType],
   }));
 
-  const tipContent = computed(() => (props.tip ? t(props.tip) : t('仅可选择一种实例类型')));
+  const disabled = computed(() => !props.isEmpty && Boolean(props.uniquePanelSettings?.enable));
+  const tipContent = computed(() => props.uniquePanelSettings?.tip || t('仅可选择一种实例类型'));
 
   const handleClick = (tab: (typeof panelList)[number]) => {
-    if (modelValue.value === tab.id || props.disabled) {
+    if (modelValue.value === tab.id || disabled.value) {
       return;
     }
     modelValue.value = tab.id;

@@ -9,7 +9,7 @@
     <DbTable
       ref="instanceTable"
       class="db-instance-table"
-      :container-height="570 - 32 - 16"
+      :container-height="containerHeight"
       :data-source="realDataSource"
       :disable-select-method="disableSelectMethod"
       :filter-value="quickSearchValue"
@@ -147,7 +147,9 @@
 
   export interface Props<C extends ISupportClusterType> {
     clusterType: ISupportClusterType;
-    dataSource?: ReturnType<typeof useClusterInstaceList<C>>;
+    dataSourceMap?: {
+      [key in C]?: ReturnType<typeof useClusterInstaceList<key>>;
+    };
     disableSelectMethod?: (data: InstanceModel<C>) => boolean | string;
     selected: InstanceModel<C>[];
     single?: boolean;
@@ -171,9 +173,10 @@
 
   const instanceTableRef = useTemplateRef('instanceTable');
 
+  const containerHeight = 570 - 32 - 16; // 去除搜索框的高度和margin bottom
   const isMongodb = [ClusterTypes.MONGO_REPLICA_SET, ClusterTypes.MONGO_SHARED_CLUSTER].includes(props.clusterType);
 
-  const realDataSource = (params: any) => (props.dataSource || requestHandler)(params);
+  const realDataSource = (params: any) => (props.dataSourceMap?.[props.clusterType as T] || requestHandler)(params);
 
   const fetchData = () => {
     instanceTableRef.value!.fetchData(Object.assign({}, quickSearchValue.value));

@@ -152,7 +152,7 @@
 
   import { ClusterTypes, DBTypes } from '@common/const';
 
-  import { toolboxMenuList } from '@/views/db-manage/mysql/toolbox/IndexNew.vue';
+  import { toolboxMenuList } from '@views/db-manage/mysql/toolbox/IndexNew.vue';
 
   import CountTag from './components/CountTag.vue';
   import MenuGroup from './components/MenuGroup.vue';

@@ -100,7 +100,8 @@
 
   import { getTickets } from '@services/source/ticket';
 
-  import { useGlobalBizs } from '@/stores';
+  import { useGlobalBizs } from '@stores';
+
   import { useTimeoutPoll } from '@vueuse/core';
 
   type RowData = ServiceReturnType<typeof getTickets>['results'][0];

@@ -274,7 +274,7 @@
 
   import { useClusterQuickSearch, useTableSettings } from '@hooks';
 
-  import { ClusterTypes, DBTypes, UserPersonalSettings } from '@common/const';
+  import { ClusterTypes, DBTypes, TicketTypes, UserPersonalSettings } from '@common/const';
 
   import ClusterAlarmSubscribe from '@views/db-manage/common/cluster-alarm-subscribe/Index.vue';
   import ClusterBatchOperation from '@views/db-manage/common/cluster-batch-opration/Index.vue';

@@ -69,11 +69,11 @@
   import type InfluxdbInstanceModel from '@services/model/influxdb/influxdbInstance';
   import { getInfluxdbInstanceList } from '@services/source/influxdb';
 
+  import { useGlobalBizs } from '@stores';
+
   import DbStatus from '@components/db-status/index.vue';
   import EmptyStatus from '@components/empty-status/EmptyStatus.vue';
 
-  import { useGlobalBizs } from '@/stores';
-
   type Emits = (e: 'change', value: { id: number; instance: string }) => void;
 
   const emits = defineEmits<Emits>();

@@ -122,8 +122,9 @@
 
   import { createGroup, deleteGroup, getGroupList, updateGroupInfo } from '@services/source/influxdbGroup';
 
-  import { useGlobalBizs } from '@/stores';
-  import { messageSuccess } from '@/utils';
+  import { useGlobalBizs } from '@stores';
+
+  import { messageSuccess } from '@utils';
 
   import GroupCreate from './components/Create.vue';