From b6b411b43e2fde3605dffce0b69147791b9a376b Mon Sep 17 00:00:00 2001
From: chenwenchang <479999519@qq.com>
Date: Wed, 13 Nov 2024 18:19:57 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20webconsole=E8=BE=93=E5=85=A5?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E7=BB=84=E4=BB=B6=E9=80=BB=E8=BE=91=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=20#7764=20#=20Reviewed,=20transaction=20id:=2024001?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../db-manage/common/webconsole/Index.vue     |  26 +-
 .../webconsole/components/ClusterTabs.vue     |   2 +-
 .../webconsole/components/RawSwitcher.vue     |  10 +-
 .../ConsoleInput.vue}                         | 242 +++++++-----------
 .../components/RenderRedisMessage.vue         |  66 -----
 .../components/console-panel/mysql/Index.vue  |  43 ++++
 .../components/RenderMessage.vue}             |  12 +-
 .../components/console-panel/redis/Index.vue  |  49 ++++
 .../redis/components/RenderMessage.vue        |  25 ++
 9 files changed, 228 insertions(+), 247 deletions(-)
 rename dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/{Index.vue => components/ConsoleInput.vue} (56%)
 delete mode 100644 dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/components/RenderRedisMessage.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/mysql/Index.vue
 rename dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/{components/RenderMysqlMessage.vue => mysql/components/RenderMessage.vue} (86%)
 create mode 100644 dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/redis/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/redis/components/RenderMessage.vue

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
index 778d2143f6..44e823babb 100644
--- 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
index cf5a9dbfbb..1dca2bce9f 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
@@ -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
index c169ef845a..4251283cdd 100644
--- 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,14 +17,6 @@
 <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>({
@@ -32,7 +24,7 @@
   });
 
   const handleRawSwitch = (value: boolean) => {
-    modelValue.value = props.dbType === DBTypes.REDIS ? value : undefined;
+    modelValue.value = value;
   };
 </script>
 
diff --git a/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/components/ConsoleInput.vue
similarity index 56%
rename from dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/Index.vue
rename to dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/components/ConsoleInput.vue
index 96c9c59a79..a3c07a9cf0 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/components/ConsoleInput.vue
@@ -13,9 +13,7 @@
           <span :class="{ 'error-text': item.type === 'error' }">{{ item.message }}</span>
         </div>
         <template v-else>
-          <Component
-            :is="consoleConfig.renderMessage"
-            :data="item.message" />
+          <slot :message="item.message" />
         </template>
       </template>
     </div>
@@ -36,36 +34,54 @@
     </div>
   </div>
 </template>
+<script lang="ts">
+  // 未执行的命令
+  const noExecuteCommand: Record<number, string> = {};
+  // 已执行过的命令
+  const executedCommands: Record<number, string[]> = {};
+
+  const panelInputMap = reactive<
+    Record<
+      number,
+      Array<{
+        message: string | Record<string, string>[];
+        type: 'success' | 'error' | 'normal' | 'command' | string;
+      }>
+    >
+  >({});
+</script>
 <script setup lang="ts">
   import _ from 'lodash';
 
   import { queryAllTypeCluster, queryWebconsole } from '@services/source/dbbase';
 
-  import { DBTypes } from '@common/const';
-
   import { downloadText } from '@utils';
 
-  import RenderMysqlMessage, { validate } from './components/RenderMysqlMessage.vue';
-  import RenderRedisMessage, {
-    getInputPlaceholder as getRedisPlaceholder,
-    switchDbIndex,
-  } from './components/RenderRedisMessage.vue';
-
-  type ClusterItem = ServiceReturnType<typeof queryAllTypeCluster>[number];
+  export interface Props {
+    cluster: ServiceReturnType<typeof queryAllTypeCluster>[number];
+    placeholder?: string;
+    extParams?: Record<string, unknown>;
+    preCheck?: (value: string) => string;
+  }
 
-  interface Props {
-    modelValue: ClusterItem;
-    dbType: DBTypes;
-    raw?: boolean;
+  interface Emits {
+    (e: 'success', cmd: string, message: ServiceReturnType<typeof queryWebconsole>['query'], ...args: unknown[]): void;
   }
 
   interface Expose {
-    clearCurrentScreen: (id?: number) => void;
+    updateCommand: () => void;
     export: () => void;
     isInputed: (id?: number) => boolean;
+    clearCurrentScreen: (id?: number) => void;
   }
 
-  const props = defineProps<Props>();
+  const props = withDefaults(defineProps<Props>(), {
+    placeholder: '',
+    extParams: () => ({}),
+    preCheck: () => '',
+  });
+
+  const emits = defineEmits<Emits>();
 
   const command = ref('');
   const consolePanelRef = ref();
@@ -73,74 +89,24 @@
   const isFrozenTextarea = ref(false);
   const inputRef = ref();
   const realHeight = ref('52px');
-  const panelInputMap = reactive<
-    Record<
-      number,
-      Array<{
-        message: string | Record<string, string>[];
-        type: 'success' | 'error' | 'normal' | 'command' | string;
-      }>
-    >
-  >({});
 
-  const commandInputMap: Record<number, string[]> = {};
-  const noExecuteCommand: Record<number, string> = {};
-  let currentCommandIndex = 0;
-  let inputPlaceholder = '';
-  let baseParams: {
-    cluster_id: number;
-    cmd?: string;
-    [key: string]: unknown;
-  };
-  const configMap: Record<
-    string,
-    {
-      renderMessage: any;
-      validate?: (cmd: string) => string;
-      getInputPlaceholder?: (clusterId: number, domain: string) => string;
-      switchDbIndex?: (params: { clusterId: number; cmd: string; queryResult: string; commandInputs: string[] }) => {
-        dbIndex: number;
-        commandInputs: string[];
-      };
-    }
-  > = {
-    [DBTypes.MYSQL]: {
-      renderMessage: RenderMysqlMessage,
-      validate,
-    },
-    [DBTypes.TENDBCLUSTER]: {
-      renderMessage: RenderMysqlMessage,
-      validate,
-    },
-    [DBTypes.REDIS]: {
-      renderMessage: RenderRedisMessage,
-      getInputPlaceholder: getRedisPlaceholder,
-      switchDbIndex,
-    },
-  };
+  // 用于查找命令的索引
+  let commandIndex = 0;
 
-  const clusterId = computed(() => props.modelValue.id);
-  const consoleConfig = computed(() => configMap[props.dbType as keyof typeof configMap]);
+  const clusterId = computed(() => props.cluster.id);
+  const localPlaceholder = computed(() => props.placeholder || `${props.cluster.immute_domain} > `);
 
   watch(
     clusterId,
     () => {
       if (clusterId.value) {
-        const domain = props.modelValue.immute_domain;
-        inputPlaceholder = consoleConfig.value.getInputPlaceholder
-          ? consoleConfig.value.getInputPlaceholder(clusterId.value, domain)
-          : `${domain} > `;
-        baseParams = {
-          ...baseParams,
-          cluster_id: clusterId.value,
-        };
-        command.value = noExecuteCommand[clusterId.value] ?? inputPlaceholder;
+        command.value = localPlaceholder.value + (noExecuteCommand[clusterId.value] ?? '');
 
-        if (!commandInputMap[clusterId.value]) {
-          commandInputMap[clusterId.value] = [];
-          currentCommandIndex = 0;
+        if (!executedCommands[clusterId.value]) {
+          executedCommands[clusterId.value] = [];
+          commandIndex = 0;
         } else {
-          currentCommandIndex = commandInputMap[clusterId.value].length;
+          commandIndex = executedCommands[clusterId.value].length;
         }
 
         if (!panelInputMap[clusterId.value]) {
@@ -172,45 +138,43 @@
   // 回车输入指令
   const handleClickSendCommand = async (e: any) => {
     // 输入预处理
-    let cmd = e.target.value.trim() as string;
-    const isInputed = cmd.length > inputPlaceholder.length;
+    const inputValue = e.target.value.trim() as string;
+    const isInputed = inputValue.length > localPlaceholder.value.length;
+
+    // 截取输入的命令
+    const cmd = inputValue.substring(localPlaceholder.value.length);
+    executedCommands[clusterId.value].push(cmd);
+    commandIndex = executedCommands[clusterId.value].length;
+    command.value = localPlaceholder.value;
+
+    // 命令行渲染
     const commandLine = {
-      message: isInputed ? cmd : inputPlaceholder,
+      message: isInputed ? inputValue : localPlaceholder.value,
       type: 'command',
     };
-    commandInputMap[clusterId.value].push(cmd);
-    currentCommandIndex = commandInputMap[clusterId.value].length;
     panelInputMap[clusterId.value].push(commandLine);
-    command.value = inputPlaceholder;
+
     if (!isInputed) {
       return;
     }
 
-    // 校验语句
-    cmd = cmd.substring(inputPlaceholder.length);
-    if (consoleConfig.value.validate) {
-      const validateResult = consoleConfig.value.validate(cmd);
-      if (validateResult) {
-        const errorLine = {
-          message: validateResult,
-          type: 'error',
-        };
-        panelInputMap[clusterId.value].push(errorLine);
-        return;
-      }
+    // 语句预检
+    const preCheckResult = props.preCheck(cmd);
+    if (preCheckResult) {
+      const errorLine = {
+        message: preCheckResult,
+        type: 'error',
+      };
+      panelInputMap[clusterId.value].push(errorLine);
+      return;
     }
 
     // 开始请求
     try {
       loading.value = true;
-      if (typeof props.raw === 'boolean') {
-        baseParams = {
-          ...baseParams,
-          raw: props.raw,
-        };
-      }
       const executeResult = await queryWebconsole({
-        ...baseParams,
+        ...props.extParams,
+        cluster_id: clusterId.value,
         cmd,
       });
 
@@ -230,24 +194,7 @@
         };
         panelInputMap[clusterId.value].push(normalLine);
 
-        // 切换数据库、修改行前缀
-        const config = consoleConfig.value;
-        if (config.switchDbIndex) {
-          const { dbIndex, commandInputs } = config.switchDbIndex({
-            clusterId: clusterId.value,
-            cmd,
-            queryResult: executeResult.query as string,
-            commandInputs: commandInputMap[clusterId.value],
-          });
-          baseParams = {
-            ...baseParams,
-            db_num: dbIndex,
-          };
-          commandInputMap[clusterId.value] = commandInputs;
-          if (config.getInputPlaceholder) {
-            command.value = config.getInputPlaceholder(clusterId.value, props.modelValue.immute_domain);
-          }
-        }
+        emits('success', cmd, executeResult.query);
       }
     } finally {
       loading.value = false;
@@ -263,21 +210,21 @@
     const recentOnceInput = command.value;
     command.value = '';
     nextTick(() => {
-      command.value = isRestore ? recentOnceInput : inputPlaceholder;
+      command.value = isRestore ? recentOnceInput : localPlaceholder.value;
     });
     setTimeout(() => {
-      const cursorIndex = inputPlaceholder.length;
+      const cursorIndex = localPlaceholder.value.length;
       inputRef.value.setSelectionRange(cursorIndex, cursorIndex);
     });
   };
 
   // 输入
   const handleInputChange = (e: any) => {
-    if (inputRef.value.selectionStart === inputPlaceholder.length - 1) {
+    if (inputRef.value.selectionStart === localPlaceholder.value.length - 1) {
       restoreInput();
       return;
     }
-    if (inputRef.value.selectionStart < inputPlaceholder.length) {
+    if (inputRef.value.selectionStart < localPlaceholder.value.length) {
       restoreInput(false);
       return;
     }
@@ -290,35 +237,32 @@
 
   // 当前tab有未执行的command暂存，切换回来回显
   const handleInputBlur = () => {
-    if (command.value.length > inputPlaceholder.length) {
-      noExecuteCommand[clusterId.value] = command.value;
+    if (command.value.length > localPlaceholder.value.length) {
+      noExecuteCommand[clusterId.value] = command.value.substring(localPlaceholder.value.length);
     }
   };
 
   // 键盘 ↑ 键
   const handleClickUpBtn = () => {
-    if (commandInputMap[clusterId.value].length === 0 || currentCommandIndex === 0) {
+    if (executedCommands[clusterId.value].length === 0 || commandIndex === 0) {
       checkCursorPosition(true);
       return;
     }
 
-    currentCommandIndex = currentCommandIndex - 1;
-    command.value = commandInputMap[clusterId.value][currentCommandIndex];
+    commandIndex = commandIndex - 1;
+    command.value = localPlaceholder.value + executedCommands[clusterId.value][commandIndex];
     const cursorIndex = command.value.length;
     inputRef.value.setSelectionRange(cursorIndex, cursorIndex);
   };
 
   // 键盘 ↓ 键
   const handleClickDownBtn = () => {
-    if (
-      commandInputMap[clusterId.value].length === 0 ||
-      currentCommandIndex === commandInputMap[clusterId.value].length
-    ) {
+    if (executedCommands[clusterId.value].length === 0 || commandIndex === executedCommands[clusterId.value].length) {
       return;
     }
 
-    currentCommandIndex = currentCommandIndex + 1;
-    command.value = commandInputMap[clusterId.value][currentCommandIndex] ?? inputPlaceholder;
+    commandIndex = commandIndex + 1;
+    command.value = localPlaceholder.value + (executedCommands[clusterId.value][commandIndex] ?? '');
   };
 
   // 键盘 ← 键
@@ -328,19 +272,17 @@
 
   // 校正光标位置
   const checkCursorPosition = (isStartToTextEnd = false) => {
-    if (inputRef.value.selectionStart <= inputPlaceholder.length) {
-      const cursorIndex = isStartToTextEnd ? command.value.length : inputPlaceholder.length;
+    if (inputRef.value.selectionStart <= localPlaceholder.value.length) {
+      const cursorIndex = isStartToTextEnd ? command.value.length : localPlaceholder.value.length;
       inputRef.value.setSelectionRange(cursorIndex, cursorIndex);
     }
   };
 
   defineExpose<Expose>({
-    clearCurrentScreen(id?: number) {
-      const currentClusterId = id ?? clusterId.value;
-      panelInputMap[currentClusterId] = [];
-      commandInputMap[currentClusterId] = [];
-      noExecuteCommand[currentClusterId] = '';
-      command.value = inputPlaceholder;
+    updateCommand() {
+      nextTick(() => {
+        command.value = localPlaceholder.value;
+      });
     },
     export() {
       const lines = panelInputMap[clusterId.value].map((item) => item.message);
@@ -366,15 +308,19 @@
         }
       });
 
-      const fileName = `${props.modelValue.immute_domain}.txt`;
+      const fileName = `${props.cluster.immute_domain}.txt`;
       downloadText(fileName, exportTxt);
     },
     isInputed(id?: number) {
       const currentClusterId = id ?? clusterId.value;
-      return (
-        commandInputMap[currentClusterId]?.some((cmd) => cmd.length > inputPlaceholder.length) ||
-        noExecuteCommand[currentClusterId]?.substring(inputPlaceholder.length).length > 0
-      );
+      return executedCommands[currentClusterId]?.some(Boolean) || noExecuteCommand[currentClusterId]?.length > 0;
+    },
+    clearCurrentScreen(id?: number) {
+      const currentClusterId = id ?? clusterId.value;
+      panelInputMap[currentClusterId] = [];
+      executedCommands[currentClusterId] = [];
+      noExecuteCommand[currentClusterId] = '';
+      command.value = localPlaceholder.value;
     },
   });
 </script>
diff --git a/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/components/RenderRedisMessage.vue b/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/components/RenderRedisMessage.vue
deleted file mode 100644
index 625451b6eb..0000000000
--- a/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/components/RenderRedisMessage.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-  <p
-    v-for="(row, index) in rows"
-    :key="index"
-    class="preserve-whitespace">
-    {{ row }}
-  </p>
-</template>
-<script lang="ts">
-  interface Props {
-    data: string;
-  }
-
-  // 集群所选的数据库索引
-  const clusterSelectedDbIndex: Record<number, number> = {};
-
-  // 设置当前集群id所选数据库索引
-  const setDbIndexByClusterId = (clusterId: number, value = 0) => {
-    clusterSelectedDbIndex[clusterId] = value;
-  };
-
-  // 命令行前缀
-  export const getInputPlaceholder = (clusterId: number, domain: string) => {
-    clusterSelectedDbIndex[clusterId] ??= 0;
-    return `${domain}[${clusterSelectedDbIndex[clusterId]}] > `;
-  };
-
-  // 切换数据库索引
-  export const switchDbIndex = ({
-    clusterId,
-    cmd,
-    queryResult,
-    commandInputs,
-  }: {
-    clusterId: number;
-    cmd: string;
-    queryResult: string;
-    commandInputs: string[];
-  }) => {
-    if (/^\s*select\s+.*$/.test(cmd) && /^OK/.test(queryResult)) {
-      const newDbIndex = Number(cmd.substring('select '.length));
-      setDbIndexByClusterId(clusterId, newDbIndex);
-      const newCommandInputs = commandInputs.map((item) => item.replace(/\[(\d+)\]/, `[${newDbIndex}]`));
-      return {
-        dbIndex: newDbIndex,
-        commandInputs: newCommandInputs,
-      };
-    }
-    return {
-      dbIndex: clusterSelectedDbIndex[clusterId],
-      commandInputs,
-    };
-  };
-</script>
-<script setup lang="ts">
-  const props = defineProps<Props>();
-
-  const rows = computed(() => props.data.split('\n') || []);
-</script>
-
-<style lang="less" scoped>
-  .preserve-whitespace {
-    font-family: 'Courier New', Courier, monospace; /* 等宽字体 */
-    white-space: pre;
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/mysql/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/mysql/Index.vue
new file mode 100644
index 0000000000..302aa44b1b
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/mysql/Index.vue
@@ -0,0 +1,43 @@
+<template>
+  <ConsoleInput
+    ref="consoleInputRef"
+    :cluster="cluster"
+    :pre-check="preCheck">
+    <template #default="{ message }">
+      <RenderMessage :data="message" />
+    </template>
+  </ConsoleInput>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import type { queryAllTypeCluster } from '@services/source/dbbase';
+
+  import ConsoleInput from '../components/ConsoleInput.vue';
+
+  import RenderMessage from './components/RenderMessage.vue';
+
+  interface Props {
+    cluster: ServiceReturnType<typeof queryAllTypeCluster>[number];
+  }
+
+  defineProps<Props>();
+
+  const { t } = useI18n();
+
+  const consoleInputRef = ref<typeof ConsoleInput>();
+
+  const preCheck = (cmd: string) => {
+    if (/^\s*use\s+.*$/.test(cmd)) {
+      return t('暂不支持 use 语句，请使用 db.table 指定 database');
+    }
+    return '';
+  };
+
+  defineExpose({
+    isInputed: (clusterId: number) => consoleInputRef.value!.isInputed(clusterId),
+    clearCurrentScreen: (clusterId: number) => consoleInputRef.value!.clearCurrentScreen(clusterId),
+    export: () => consoleInputRef.value!.export(),
+  });
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/components/RenderMysqlMessage.vue b/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/mysql/components/RenderMessage.vue
similarity index 86%
rename from dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/components/RenderMysqlMessage.vue
rename to dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/mysql/components/RenderMessage.vue
index 054cbf1128..b639eb2f71 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/components/RenderMysqlMessage.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/mysql/components/RenderMessage.vue
@@ -24,21 +24,11 @@
     </table>
   </div>
 </template>
-<script lang="ts">
-  import { t } from '@locales/index';
-
+<script setup lang="ts">
   interface Props {
     data: Record<string, string>[];
   }
 
-  export const validate = (cmd: string) => {
-    if (/^\s*use\s+.*$/.test(cmd)) {
-      return t('暂不支持 use 语句，请使用 db.table 指定 database');
-    }
-    return '';
-  };
-</script>
-<script setup lang="ts">
   const props = defineProps<Props>();
 
   const headColumnList = computed(() => (props.data ? Object.keys(props.data[0]) : []));
diff --git a/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/redis/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/redis/Index.vue
new file mode 100644
index 0000000000..562ec35670
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/redis/Index.vue
@@ -0,0 +1,49 @@
+<template>
+  <ConsoleInput
+    ref="consoleInputRef"
+    :cluster="cluster"
+    :ext-params="{
+      dbNum,
+      raw,
+    }"
+    :placeholder="placeholder"
+    @success="handleSuccess">
+    <template #default="{ message }">
+      <RenderMessage :data="message" />
+    </template>
+  </ConsoleInput>
+</template>
+
+<script setup lang="ts">
+  import type { queryAllTypeCluster, queryWebconsole } from '@services/source/dbbase';
+
+  import ConsoleInput from '../components/ConsoleInput.vue';
+
+  import RenderMessage from './components/RenderMessage.vue';
+
+  interface Props {
+    cluster: ServiceReturnType<typeof queryAllTypeCluster>[number];
+    raw: boolean;
+  }
+
+  const props = defineProps<Props>();
+
+  const consoleInputRef = ref<typeof ConsoleInput>();
+  const dbNum = ref(0);
+
+  const placeholder = computed(() => `${props.cluster.immute_domain}[${dbNum.value}] > `);
+
+  const handleSuccess = (cmd: string, message: ServiceReturnType<typeof queryWebconsole>['query']) => {
+    // 切换数据库索引
+    if (/^\s*select\s+.*$/.test(cmd) && /^OK/.test(message as string)) {
+      dbNum.value = Number(cmd.substring('select '.length));
+      consoleInputRef.value!.updateCommand();
+    }
+  };
+
+  defineExpose({
+    isInputed: (clusterId: number) => consoleInputRef.value!.isInputed(clusterId),
+    clearCurrentScreen: (clusterId: number) => consoleInputRef.value!.clearCurrentScreen(clusterId),
+    export: () => consoleInputRef.value!.export(),
+  });
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/redis/components/RenderMessage.vue b/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/redis/components/RenderMessage.vue
new file mode 100644
index 0000000000..10b03e8497
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/console-panel/redis/components/RenderMessage.vue
@@ -0,0 +1,25 @@
+<template>
+  <p
+    v-for="(row, index) in rows"
+    :key="index"
+    class="preserve-whitespace">
+    {{ row }}
+  </p>
+</template>
+
+<script setup lang="ts">
+  interface Props {
+    data: string;
+  }
+
+  const props = defineProps<Props>();
+
+  const rows = computed(() => props.data.split('\n') || []);
+</script>
+
+<style lang="less" scoped>
+  .preserve-whitespace {
+    font-family: 'Courier New', Courier, monospace; /* 等宽字体 */
+    white-space: pre;
+  }
+</style>