fix(frontend): webconsole输入面板组件逻辑优化 TencentBlueKing#7764

# Reviewed, transaction id: 24001
JustaCattt · Nov 15, 2024 · 79e007b · 79e007b
1 parent d314090
commit 79e007b
Show file tree

Hide file tree

Showing 9 changed files with 228 additions and 247 deletions.
diff --git a/dbm-ui/frontend/src/views/db-manage/common/webconsole/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/webconsole/Index.vue
@@ -11,8 +11,7 @@
         @remove-tab="handleClickClearScreen" />
       <RawSwitcher
         v-if="dbType === DBTypes.REDIS"
-        v-model="isRaw"
-        :db-type="dbType" />
+        v-model="isRaw" />
       <ClearScreen @change="handleClickClearScreen" />
       <ExportData @export="handleClickExport" />
       <UsageHelp
@@ -30,12 +29,12 @@
     </div>
     <div class="content-main">
       <KeepAlive>
-        <ConsolePanel
+        <Component
+          :is="consolePanelMap[dbType]"
           v-if="clusterInfo"
           :key="clusterInfo.id"
           ref="consolePanelRef"
-          v-model="clusterInfo"
-          :db-type="dbType"
+          :cluster="clusterInfo"
           :raw="isRaw"
           :style="currentFontConfig" />
       </KeepAlive>
@@ -59,13 +58,12 @@
   import screenfull from 'screenfull';
   import { useI18n } from 'vue-i18n';
 
-  import { queryAllTypeCluster } from '@services/source/dbbase';
-
   import { DBTypes } from '@common/const';
 
   import ClearScreen from './components/ClearScreen.vue';
-  import ClusterTabs from './components/ClusterTabs.vue';
-  import ConsolePanel from './components/console-panel/Index.vue';
+  import ClusterTabs, { type ClusterItem } from './components/ClusterTabs.vue';
+  import MysqlConsolePanel from './components/console-panel/mysql/Index.vue';
+  import RedisConsolePanel from './components/console-panel/redis/Index.vue';
   import ExportData from './components/ExportData.vue';
   import FontSetting from './components/FontSetting.vue';
   import FullScreen from './components/FullScreen.vue';
@@ -76,17 +74,21 @@
     dbType?: DBTypes;
   }
 
-  type ClusterItem = ServiceReturnType<typeof queryAllTypeCluster>[number];
-
   const props = withDefaults(defineProps<Props>(), {
     dbType: DBTypes.MYSQL,
   });
 
   const { t } = useI18n();
 
+  const consolePanelMap = {
+    [DBTypes.MYSQL]: MysqlConsolePanel,
+    [DBTypes.TENDBCLUSTER]: MysqlConsolePanel,
+    [DBTypes.REDIS]: RedisConsolePanel,
+  } as Record<DBTypes, any>;
+
   const rootRef = ref();
   const clusterTabsRef = ref();
-  const consolePanelRef = ref<InstanceType<typeof ConsolePanel>>();
+  const consolePanelRef = ref<InstanceType<typeof MysqlConsolePanel>>();
   const clusterInfo = ref<ClusterItem>();
   const currentFontConfig = ref({
     fontSize: '12px',

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
@@ -74,7 +74,7 @@
 
   import { messageWarn } from '@utils';
 
-  type ClusterItem = ServiceReturnType<typeof queryAllTypeCluster>[number];
+  export type ClusterItem = ServiceReturnType<typeof queryAllTypeCluster>[number];
 
   interface Props {
     dbType: DBTypes;

diff --git a/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/RawSwitcher.vue b/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/RawSwitcher.vue
@@ -17,22 +17,14 @@
 <script lang="ts" setup>
   import { useI18n } from 'vue-i18n';
 
-  import { DBTypes } from '@common/const';
-
-  interface Props {
-    dbType: DBTypes;
-  }
-
-  const props = defineProps<Props>();
-
   const { t } = useI18n();
 
   const modelValue = defineModel<boolean | undefined>({
     default: undefined,
   });
 
   const handleRawSwitch = (value: boolean) => {
-    modelValue.value = props.dbType === DBTypes.REDIS ? value : undefined;
+    modelValue.value = value;
   };
 </script>