diff --git a/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/ClusterTabs.vue b/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/ClusterTabs.vue index 4acfd15b25..18de741e31 100644 --- a/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/ClusterTabs.vue +++ b/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/ClusterTabs.vue @@ -30,8 +30,7 @@ class="add-icon-main"> + type="increase" />
@@ -40,24 +39,28 @@ class="webconsole-select-clusters" :style="{ height: clustersPanelHeight }">
{{ t('连接的集群') }}
- - - - +
+ + + +
    +
  • + {{ item.immute_domain }} +
  • +
+
@@ -93,23 +96,23 @@ const props = defineProps(); const emits = defineEmits(); + const modelValue = defineModel({ + default: 0, + required: true, + }); + const { t } = useI18n(); const route = useRoute(); - const modelValue = defineModel({ - default: 0 as number, - type: Number, - }); - const routeClusterId = route.query.clusterId; let clustersRaw: ClusterItem[] = []; let tippyIns: Instance | undefined; - const clutersRef = ref(); const addTabRef = ref(); const popRef = ref(); const clustersMap = ref>({}); const selectedClusters = ref([]); + const searchValue = ref(''); const clustersPanelHeight = computed(() => { if (!clusterList.value) { @@ -122,6 +125,10 @@ return `${height}px`; }); + const renderOptions = computed(() => + clusterList.value?.filter((item) => item.immute_domain.indexOf(searchValue.value) !== -1), + ); + const { data: clusterList } = useRequest(queryAllTypeCluster, { defaultParams: [ { @@ -189,17 +196,11 @@ emits('removeTab', currentClusterId); // 关闭当前打开tab modelValue.value = clusterCount === 0 ? 0 : selectedClusters.value[clusterCount - 1]; - emits('change', clustersMap.value[modelValue.value]); + emits('change', clustersMap.value[modelValue.value as number]); } updateClusterSelect(); }; - const handleClickAddIcon = () => { - setTimeout(() => { - clutersRef.value.showPopover(); - }); - }; - onMounted(() => { tippyIns = tippy(addTabRef.value as SingleTarget, { appendTo: () => document.body, @@ -209,14 +210,6 @@ interactive: true, maxWidth: 'none', offset: [0, 0], - onHide() { - clutersRef.value.hidePopover(); - }, - onShow() { - setTimeout(() => { - clutersRef.value.showPopover(); - }); - }, placement: 'bottom-start', theme: 'light', trigger: 'mouseenter click', @@ -245,10 +238,42 @@ padding: 0 !important; .clusters-select { - .bk-select-popover { - border: none; - transform: translate3d(0, 41px, 0); - box-shadow: none; + margin: 8px; + + .cluster-select-search { + border-bottom: 1px solid #eaebf0; + } + + .input-icon { + display: flex; + padding-left: 8px; + font-size: 16px; + color: #c4c6cc; + align-items: center; + justify-content: center; + } + + .cluster-select-warpper { + margin-top: 4px; + } + + .cluster-select-option { + position: relative; + display: flex; + height: 32px; + overflow: hidden; + font-size: 12px; + color: #63656e; + text-align: left; + text-overflow: ellipsis; + white-space: nowrap; + cursor: pointer; + user-select: none; + align-items: center; + + &:hover { + background-color: #f5f7fa; + } } } @@ -367,14 +392,6 @@ font-size: 15px; color: #c4c6cc; } - - .clusters-select { - .bk-select-popover { - border: none; - transform: translate3d(0, 41px, 0); - box-shadow: none; - } - } } } diff --git a/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/components/ConsoleInput.vue b/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/components/ConsoleInput.vue index 24c0d9c7b5..f418b41028 100644 --- a/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/components/ConsoleInput.vue +++ b/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/components/ConsoleInput.vue @@ -18,22 +18,23 @@
Waiting...
-
+