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...
-
-
+}
diff --git a/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/components/hooks/useMouseSelect.ts b/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/components/hooks/useMouseSelect.ts
new file mode 100644
index 0000000000..ec8ddae7a7
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/components/hooks/useMouseSelect.ts
@@ -0,0 +1,41 @@
+export function useMouseSelect() {
+ /**
+ * 触发点击
+ */
+ const isMouseClick = ref(false);
+ /**
+ * 是否在拖动中
+ */
+ const isMouseMoving = ref(false);
+
+ const handleMouseDown = () => {
+ isMouseClick.value = true;
+ };
+
+ const handleMouseUp = () => {
+ isMouseClick.value = false;
+ };
+
+ const handleMouseMove = () => {
+ if (isMouseClick.value) {
+ isMouseMoving.value = true;
+ }
+ };
+
+ onMounted(() => {
+ window.addEventListener('mousedown', handleMouseDown);
+ window.addEventListener('mouseup', handleMouseUp);
+ window.addEventListener('mousemove', handleMouseMove);
+ });
+
+ onBeforeUnmount(() => {
+ window.removeEventListener('mousedown', handleMouseDown);
+ window.removeEventListener('mouseup', handleMouseUp);
+ window.removeEventListener('mousemove', handleMouseMove);
+ });
+
+ return {
+ isMouseClick,
+ isMouseMoving,
+ };
+}