fix(frontend): mongodb webconsole交互问题处理 #9915

Author: JustaCattt

dbm-ui/frontend/src/views/db-manage/common/webconsole/components/ClusterTabs.vue

@@ -30,8 +30,7 @@
       class="add-icon-main">
       <DbIcon
         class="add-icon"
-        type="increase"
-        @click="handleClickAddIcon" />
+        type="increase" />
     </div>
   </div>
   <div style="display: none">
@@ -40,24 +39,28 @@
       class="webconsole-select-clusters"
       :style="{ height: clustersPanelHeight }">
       <div class="title">{{ t('连接的集群') }}</div>
-      <BkSelect
-        ref="clutersRef"
-        class="clusters-select"
-        disable-focus-behavior
-        filterable
-        :model-value="selectedClusters"
-        multiple
-        :popover-options="{ disableTeleport: true }"
-        @change="handleClusterSelectChange">
-        <template #trigger>
-          <span></span>
-        </template>
-        <BkOption
-          v-for="item in clusterList"
-          :key="item.id"
-          :name="item.immute_domain"
-          :value="item.id" />
-      </BkSelect>
+      <div class="clusters-select">
+        <BkInput
+          v-model="searchValue"
+          behavior="simplicity"
+          class="cluster-select-search"
+          :placeholder="t('请输入关键字')">
+          <template #prefix>
+            <DbIcon
+              class="input-icon"
+              type="search" />
+          </template>
+        </BkInput>
+        <ul class="cluster-select-warpper">
+          <li
+            v-for="item in renderOptions"
+            :key="item.id"
+            class="cluster-select-option"
+            @click="handleClusterSelectChange([item.id])">
+            {{ item.immute_domain }}
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </template>
@@ -93,23 +96,23 @@
   const props = defineProps<Props>();
   const emits = defineEmits<Emits>();
 
+  const modelValue = defineModel<Number>({
+    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<Record<number, ClusterItem>>({});
   const selectedClusters = ref<number[]>([]);
+  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;
-        }
-      }
     }
   }
 </style>

dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/components/ConsoleInput.vue

@@ -18,22 +18,23 @@
       </template>
     </div>
     <div v-show="loading">Waiting...</div>
-    <div class="input-line">
+    <div
+      v-show="!loading"
+      class="input-line">
       <textarea
         ref="inputRef"
         class="input-main"
-        :disabled="loading"
+        :disabled="isMouseMoving"
         :style="{ height: realHeight }"
         :value="command"
         @blur="handleInputBlur"
         @input="handleInputChange"
+        @keydown.enter="handleClickSendCommand"
         @keyup.down="handleClickDownBtn"
-        @keyup.enter.stop="handleClickSendCommand"
         @keyup.left="handleClickLeftBtn"
         @keyup.up="handleClickUpBtn" />
     </div>
   </div>
-  <DisableTab />
 </template>
 <script lang="ts">
   // 未执行的命令
@@ -58,7 +59,8 @@
 
   import { downloadText } from '@utils';
 
-  import DisableTab from './DisableTab.vue';
+  import { useDisableTab } from './hooks/useDisableTab';
+  import { useMouseSelect } from './hooks/useMouseSelect';
 
   export interface Props {
     cluster: ServiceReturnType<typeof queryAllTypeCluster>[number];
@@ -91,6 +93,10 @@
 
   const emits = defineEmits<Emits>();
 
+  useDisableTab();
+  // 判断鼠标是否正在选中操作
+  const { isMouseMoving } = useMouseSelect();
+
   const command = ref('');
   const consolePanelRef = ref();
   const loading = ref(false);
@@ -123,7 +129,7 @@
         }
 
         setTimeout(() => {
-          handleInputFocus();
+          inputRef.value.focus();
         });
       }
     },
@@ -133,24 +139,29 @@
   );
 
   const handleInputFocus = () => {
-    inputRef.value.focus();
+    if (isMouseMoving.value) {
+      isMouseMoving.value = false;
+      return;
+    }
+    setTimeout(() => {
+      checkCursorPosition();
+      inputRef.value.focus();
+    });
   };
 
   // 回车输入指令
   const handleClickSendCommand = async (e: any) => {
     // 输入预处理
-    const inputValue = e.target.value?.trim() as string;
+    const inputValue = e.target.value.trim() as string;
     const isInputed = inputValue.length > localPlaceholder.value.length;
 
     // 截取输入的命令
     const cmd = inputValue.substring(localPlaceholder.value.length);
-    // 是否拦截请求
+
+    // 拦截
     if (props.intercept(cmd)) {
       return;
     }
-    executedCommands[clusterId.value].push(cmd);
-    commandIndex = executedCommands[clusterId.value].length;
-    command.value = localPlaceholder.value;
 
     // 命令行渲染
     const commandLine = {
@@ -159,7 +170,8 @@
     };
     panelInputMap[clusterId.value].push(commandLine);
 
-    if (!isInputed) {
+    if (!isInputed || loading.value) {
+      command.value = '';
       return;
     }
 
@@ -203,6 +215,9 @@
       }
     } finally {
       loading.value = false;
+      executedCommands[clusterId.value].push(cmd);
+      commandIndex = executedCommands[clusterId.value].length;
+      command.value = localPlaceholder.value;
       setTimeout(() => {
         inputRef.value.focus();
         consolePanelRef.value.scrollTop = consolePanelRef.value.scrollHeight - consolePanelRef.value.clientHeight;
@@ -254,8 +269,9 @@
       return;
     }
 
+    const cmd = executedCommands[clusterId.value][commandIndex];
     // 是否拦截
-    if (props.intercept(executedCommands[clusterId.value][commandIndex])) {
+    if (cmd && props.intercept(cmd)) {
       return;
     }
 
@@ -303,6 +319,11 @@
     window.removeEventListener('keydown', handleKeyDownEnter);
   });
 
+  onActivated(() => {
+    isMouseMoving.value = false;
+    handleInputFocus();
+  });
+
   defineExpose<Expose>({
     clearCurrentScreen(id?: number) {
       const currentClusterId = id ?? clusterId.value;

dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/components/DisableTab.vue renamed to dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/components/hooks/useDisableTab.ts

@@ -1,10 +1,4 @@
-<template>
-  <div>
-    <p>Tab 键已被禁用。</p>
-  </div>
-</template>
-
-<script setup lang="ts">
+export function useDisableTab() {
   const disableTabKey = (event: any) => {
     if (event.key === 'Tab') {
       event.preventDefault();
@@ -18,4 +12,4 @@
   onBeforeUnmount(() => {
     window.removeEventListener('keydown', disableTabKey);
   });
-</script>
+}

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,
+  };
+}