diff --git a/dbm-ui/frontend/src/components/db-app-select/Index.vue b/dbm-ui/frontend/src/components/db-app-select/Index.vue
index 02e02cf099..e9741692c7 100644
--- a/dbm-ui/frontend/src/components/db-app-select/Index.vue
+++ b/dbm-ui/frontend/src/components/db-app-select/Index.vue
@@ -126,6 +126,10 @@
 </script>
 <style lang="less">
   .bk-app-select-menu[data-theme='dark'] {
+    .bk-app-select-menu-filter input {
+      color: #c4c6cc;
+    }
+
     .not-permission {
       * {
         color: #70737a !important;
diff --git a/dbm-ui/frontend/src/components/instance-selector/components/mongo/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/mongo/Index.vue
index dcdf61b1ca..69f1b486c0 100644
--- a/dbm-ui/frontend/src/components/instance-selector/components/mongo/Index.vue
+++ b/dbm-ui/frontend/src/components/instance-selector/components/mongo/Index.vue
@@ -59,7 +59,7 @@
           </div>
         </template>
         <template #main>
-          <div style="height: 570px;">
+          <div style="height: 570px">
             <RenderTopoHost
               :cluster-id="selectClusterId"
               :disabled-row-config="disabledRowConfig"
@@ -89,35 +89,35 @@
   interface TopoTreeData {
     id: number;
     name: string;
-    obj: 'biz' | 'cluster',
-    count: number,
+    obj: 'biz' | 'cluster';
+    count: number;
     children: Array<TopoTreeData>;
   }
 
   interface Emits {
-    (e: 'change', value: InstanceSelectorValues<T>): void
+    (e: 'change', value: InstanceSelectorValues<T>): void;
   }
 
   type TableConfigType = Required<PanelListType[number]>['tableConfig'];
   type TopoConfigType = Required<PanelListType[number]>['topoConfig'];
 
   interface Props {
-    lastValues: InstanceSelectorValues<T>,
-    tableSetting: TableSetting,
-    multiple: NonNullable<TableConfigType['multiple']>,
-    firsrColumn?: TableConfigType['firsrColumn'],
-    roleFilterList?: TableConfigType['roleFilterList'],
-    isRemotePagination?: TableConfigType['isRemotePagination'],
-    disabledRowConfig?: TableConfigType['disabledRowConfig'],
-    topoAlertContent?: TopoConfigType['topoAlertContent'],
-    filterClusterId?: TopoConfigType['filterClusterId'], // 过滤的集群ID，单集群模式
+    lastValues: InstanceSelectorValues<T>;
+    tableSetting: TableSetting;
+    multiple: NonNullable<TableConfigType['multiple']>;
+    firsrColumn?: TableConfigType['firsrColumn'];
+    roleFilterList?: TableConfigType['roleFilterList'];
+    isRemotePagination?: TableConfigType['isRemotePagination'];
+    disabledRowConfig?: TableConfigType['disabledRowConfig'];
+    topoAlertContent?: TopoConfigType['topoAlertContent'];
+    filterClusterId?: TopoConfigType['filterClusterId']; // 过滤的集群ID，单集群模式
     // eslint-disable-next-line vue/no-unused-properties
-    getTopoList: NonNullable<TopoConfigType['getTopoList']>
+    getTopoList: NonNullable<TopoConfigType['getTopoList']>;
     // eslint-disable-next-line vue/no-unused-properties
-    getTableList: NonNullable<TableConfigType['getTableList']>,
-    statusFilter?: TableConfigType['statusFilter'],
+    getTableList: NonNullable<TableConfigType['getTableList']>;
+    statusFilter?: TableConfigType['statusFilter'];
     // eslint-disable-next-line vue/no-unused-properties
-    countFunc?: TopoConfigType['countFunc'],
+    countFunc?: TopoConfigType['countFunc'];
   }
 
   const props = withDefaults(defineProps<Props>(), {
@@ -138,13 +138,8 @@
   const TopoAlertContent = computed(() => (!isCloseAlert.value ? props.topoAlertContent : null));
   const filterClusterId = computed(() => props.filterClusterId);
 
-  const {
-    treeRef,
-    isLoading,
-    treeData,
-    selectClusterId,
-    fetchResources,
-  } = useTopoData<Record<string, any>>(filterClusterId);
+  const { treeRef, isLoading, treeData, selectClusterId, fetchResources } =
+    useTopoData<Record<string, any>>(filterClusterId);
 
   fetchResources();
 
@@ -154,13 +149,13 @@
     info: unknown,
     {
       __is_open: isOpen,
-      __is_selected: isSelected }:
-      {
-        __is_open: boolean,
-        __is_selected: boolean
-      },
+      __is_selected: isSelected,
+    }: {
+      __is_open: boolean;
+      __is_selected: boolean;
+    },
   ) => {
-    const rawNode = treeRef.value.getData().data.find((item: { id: number; }) => item.id === node.id);
+    const rawNode = treeRef.value.getData().data.find((item: { id: number }) => item.id === node.id);
     selectClusterId.value = node.id;
     if (!isOpen && !isSelected) {
       treeRef.value.setNodeOpened(rawNode, true);
@@ -185,7 +180,6 @@
   const handleCloseAlert = () => {
     isCloseAlert.value = true;
   };
-
 </script>
 <style lang="less">
   .instance-selector-topo {
diff --git a/dbm-ui/frontend/src/components/webconsole/Index.vue b/dbm-ui/frontend/src/components/webconsole/Index.vue
index b1098811ca..2f33e099a8 100644
--- a/dbm-ui/frontend/src/components/webconsole/Index.vue
+++ b/dbm-ui/frontend/src/components/webconsole/Index.vue
@@ -3,67 +3,41 @@
     ref="rootRef"
     class="webconsole-main">
     <div class="top-main">
-      <div class="tabs-main">
-        <div
-          v-for="(clusterId, index) in selectedClusters"
-          :key="clusterId"
-          class="tab-item"
-          :class="{ 'item-selected': clusterId === activeClusterId }"
-          @click="() => handleActiveTab(clusterId)">
-          <div class="active-bar"></div>
-          <div class="tab-item-content">
-            <span
-              v-overflow-tips
-              class="cluster-name"
-              >{{ clustersMap[clusterId]?.immute_domain }}</span
-            >
-            <div
-              class="icon-main"
-              @click.stop="() => handleCloseTab(index)">
-              <DbIcon
-                class="hover-close-icon-1"
-                type="close" />
-              <DbIcon
-                class="hover-close-icon-2"
-                type="close-circle-shape" />
-            </div>
-          </div>
-        </div>
-        <div
-          ref="addTabRef"
-          class="add-icon-main">
-          <DbIcon
-            class="add-icon"
-            type="increase"
-            @mouseenter="handleShowClustersPanel" />
-        </div>
-      </div>
-      <div class="top-operate-main">
-        <ClearScreen @clear-current-screen="handleClickClearScreen" />
-        <ExportData @export="handleClickExport" />
-        <UseHelp
-          v-model:showUseageHelp="showUseageHelp"
-          @toggle-show-help="handleToggleHelp" />
-        <div class="operate-item-last">
-          <FontChange @font-size-change="handleChangeFontSize" />
-          <FullScreen
-            v-model:isFullScreen="isFullScreen"
-            @toggle-full-screen="handleClickFullScreen" />
-        </div>
+      <ClusterTabs
+        ref="clusterTabsRef"
+        :before-close="handleBeforeClose"
+        :db-type="dbType"
+        @change="handleChangeCurrentCluster"
+        @remove-tab="handleClickClearScreen" />
+      <RawSwitcher
+        v-if="dbType === DBTypes.REDIS"
+        v-model="isRaw"
+        :db-type="dbType" />
+      <ClearScreen @change="handleClickClearScreen" />
+      <ExportData @export="handleClickExport" />
+      <UsageHelp
+        v-model="showUsageHelp"
+        @change="handleToggleHelp" />
+      <div class="operate-item-last">
+        <FontSetting
+          v-model="currentFontConfig"
+          @change="handleChangeFontSize" />
+        <FullScreen
+          v-model="isFullScreen"
+          @change="handleClickFullScreen" />
       </div>
     </div>
     <div class="content-main">
-      <div
-        v-show="showUseageHelp"
-        class="using-help-wrap">
-        <UseingHelpPanel @hide="handleHideUseingHelp" />
-      </div>
-      <ConsolePanel
-        v-if="activeClusterId > 0"
-        ref="consolePanelRef"
-        :cluster-info="clustersMap[activeClusterId]"
-        :cluster-type="clusterType"
-        :font-config="currentFontConfig" />
+      <KeepAlive>
+        <ConsolePanel
+          v-if="clusterInfo"
+          :key="clusterInfo.id"
+          ref="consolePanelRef"
+          v-model="clusterInfo"
+          :db-type="dbType"
+          :raw="isRaw"
+          :style="currentFontConfig" />
+      </KeepAlive>
       <div class="placeholder-main">
         <DbIcon
           class="warn-icon"
@@ -77,203 +51,91 @@
         </BkButton>
       </div>
     </div>
-    <div style="display: none">
-      <div
-        ref="popRef"
-        class="webconsole-select-clusters"
-        :style="{ height: clustersPanelHeight }">
-        <div class="title">{{ t('连接的集群') }}</div>
-        <BkSelect
-          ref="clutersRef"
-          class="clusters-select"
-          filterable
-          :model-value="currentCluster"
-          multiple
-          :popover-options="{ disableTeleport: true }"
-          @change="handleClusterSelectChange">
-          <template #trigger>
-            <span></span>
-          </template>
-          <BkOption
-            v-for="(item, index) in clusterList"
-            :key="index"
-            :name="item.immute_domain"
-            :value="item.id" />
-        </BkSelect>
-      </div>
-    </div>
   </div>
 </template>
 <script lang="ts" setup>
+  import { InfoBox } from 'bkui-vue';
   import screenfull from 'screenfull';
-  import tippy, { type Instance, type SingleTarget } from 'tippy.js';
   import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
 
   import { queryAllTypeCluster } from '@services/source/dbbase';
 
-  import { messageWarn } from '@utils';
+  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 ExportData from './components/ExportData.vue';
-  import FontChange from './components/FontChange.vue';
+  import FontSetting from './components/FontSetting.vue';
   import FullScreen from './components/FullScreen.vue';
-  import UseHelp from './components/UseHelp.vue';
-  import UseingHelpPanel from './components/UseingHelpPanel.vue';
+  import RawSwitcher from './components/RawSwitcher.vue';
+  import UsageHelp from './components/usage-help/Index.vue';
 
-  export interface Props {
-    clusterType?: 'mysql' | 'tendbcluster' | 'redis';
+  interface Props {
+    dbType?: DBTypes;
   }
 
-  export type ClusterItem = ServiceReturnType<typeof queryAllTypeCluster>[number];
+  type ClusterItem = ServiceReturnType<typeof queryAllTypeCluster>[number];
 
   const props = withDefaults(defineProps<Props>(), {
-    clusterType: 'mysql',
+    dbType: DBTypes.MYSQL,
   });
 
   const { t } = useI18n();
-  const route = useRoute();
 
   const rootRef = ref();
+  const clusterTabsRef = ref();
   const consolePanelRef = ref<InstanceType<typeof ConsolePanel>>();
-  const clutersRef = ref();
-  const currentCluster = ref<number[]>([]);
-  const selectedClusters = ref<number[]>([]);
-  const activeClusterId = ref(0);
-  const showUseageHelp = ref(false);
-  const addTabRef = ref();
-  const popRef = ref();
+  const clusterInfo = ref<ClusterItem>();
   const currentFontConfig = ref({
     fontSize: '12px',
     lineHeight: '20px',
   });
+  const isRaw = ref(props.dbType === DBTypes.REDIS ? false : undefined);
   const isFullScreen = ref(false);
-  const clustersMap = ref<Record<number, ClusterItem>>({});
-
-  const clustersPanelHeight = computed(() => {
-    if (!clusterList.value) {
-      return '120px';
-    }
-
-    if (clusterList.value.length >= 6) {
-      return `300px`;
-    }
-    const height = 300 - (6 - clusterList.value.length) * 32;
-    return `${height}px`;
-  });
-
-  const routeClusterId = route.query.clusterId;
-
-  const queryClusterTypesMap = {
-    mysql: 'tendbha,tendbsingle',
-    tendbcluster: 'tendbcluster',
-    redis: 'redis',
-  };
-  let clustersRaw: ClusterItem[] = [];
-  let tippyIns: Instance | undefined;
-
-  const { data: clusterList } = useRequest(queryAllTypeCluster, {
-    defaultParams: [
-      {
-        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
-        cluster_types: queryClusterTypesMap[props.clusterType],
-        phase: 'online',
-      },
-    ],
-    onSuccess(data) {
-      clustersMap.value = data.reduce(
-        (results, item) => {
-          Object.assign(results, {
-            [item.id]: item,
-          });
-          return results;
-        },
-        {} as Record<number, ClusterItem>,
-      );
-      clustersRaw = data;
-
-      if (routeClusterId) {
-        const clusterId = Number(routeClusterId);
-        setTimeout(() => {
-          handleClusterSelectChange([clusterId]);
+  const showUsageHelp = ref(false);
+
+  const handleBeforeClose = (clusterId: number) =>
+    new Promise<boolean>((resolve, reject) => {
+      const isInputed = consolePanelRef.value!.isInputed(clusterId);
+      if (isInputed) {
+        InfoBox({
+          title: t('确认关闭当前窗口？'),
+          content: t('关闭后，内容将不会再在保存，请谨慎操作！'),
+          headerAlign: 'center',
+          footerAlign: 'center',
+          confirmText: t('关闭'),
+          cancelText: t('取消'),
+          onConfirm() {
+            resolve(true);
+          },
+          onCancel() {
+            reject(false);
+          },
         });
+      } else {
+        resolve(true);
       }
-    },
-  });
-
-  const handleShowClustersSelect = () => {
-    tippyIns?.show();
-  };
-
-  const handleCloseTab = (index: number) => {
-    const currentClusterId = selectedClusters.value[index];
-    consolePanelRef.value!.clearCurrentScreen(currentClusterId);
-    selectedClusters.value.splice(index, 1);
-    const clusterCount = selectedClusters.value.length;
-    if (currentClusterId === activeClusterId.value) {
-      // 关闭当前打开tab
-      activeClusterId.value = clusterCount === 0 ? 0 : selectedClusters.value[clusterCount - 1];
-    }
-    currentCluster.value = [];
-    updateClusterSelect();
-  };
-
-  const handleActiveTab = (id: number) => {
-    activeClusterId.value = id;
-  };
+    });
 
   const handleShowClustersPanel = () => {
-    handleShowClustersSelect();
-    setTimeout(() => {
-      clutersRef.value.showPopover();
-    });
+    clusterTabsRef.value!.showClustersPanel();
   };
 
-  const handleClusterSelectChange = (ids: number[]) => {
-    if (ids.length === 0) {
-      return;
-    }
-
-    if (selectedClusters.value.length === 8) {
-      messageWarn(t('页签数量已达上限，请先关闭部分标'));
-      currentCluster.value = [];
-      return;
-    }
-
-    let id = 0;
-    if (ids.length > 1) {
-      id = ids.pop()!;
-      selectedClusters.value.push(id);
-      currentCluster.value = [id];
-    } else {
-      currentCluster.value = ids;
-      [id] = ids;
-      selectedClusters.value.push(id);
-    }
-
-    if (activeClusterId.value === 0) {
-      activeClusterId.value = id;
-    }
-
-    updateClusterSelect();
-    tippyIns?.hide();
+  const handleClickClearScreen = (clusterId?: number) => {
+    consolePanelRef.value!.clearCurrentScreen(clusterId as number);
   };
 
-  const updateClusterSelect = () => {
-    clusterList.value = clustersRaw.filter((item) => !selectedClusters.value.includes(item.id));
+  const handleClickExport = () => {
+    consolePanelRef.value!.export();
   };
 
-  const handleClickClearScreen = () => {
-    consolePanelRef.value!.clearCurrentScreen();
+  const handleChangeCurrentCluster = (data: ClusterItem) => {
+    clusterInfo.value = data;
   };
 
   const handleToggleHelp = () => {
-    showUseageHelp.value = !showUseageHelp.value;
-  };
-
-  const handleHideUseingHelp = () => {
-    showUseageHelp.value = false;
+    showUsageHelp.value = !showUsageHelp.value;
   };
 
   const handleChangeFontSize = (item: { fontSize: string; lineHeight: string }) => {
@@ -285,303 +147,136 @@
     isFullScreen.value = !isFullScreen.value;
   };
 
-  const handleClickExport = () => {
-    consolePanelRef.value!.export();
-  };
-
   const checkFullScreen = () => {
     isFullScreen.value = screenfull.isFullscreen;
   };
 
   onMounted(() => {
     screenfull.on('change', checkFullScreen);
-
-    tippyIns = tippy(addTabRef.value as SingleTarget, {
-      content: popRef.value,
-      placement: 'bottom-start',
-      appendTo: rootRef.value,
-      theme: 'light',
-      maxWidth: 'none',
-      trigger: 'manual',
-      interactive: true,
-      arrow: true,
-      offset: [0, 0],
-      zIndex: 999999,
-      hideOnClick: true,
-    });
   });
 
   onBeforeUnmount(() => {
     screenfull.off('change', checkFullScreen);
-
-    if (tippyIns) {
-      tippyIns.hide();
-      tippyIns.unmount();
-      tippyIns.destroy();
-      tippyIns = undefined;
-    }
   });
 </script>
 <style lang="less">
-  .tippy-content {
-    padding: 0 !important;
-
-    .clusters-select {
-      .bk-select-popover {
-        border: none;
-        box-shadow: none;
-      }
-    }
-
-    .webconsole-select-clusters {
-      width: 388px;
-      background: #ffffff;
-      border: 1px solid #dcdee5;
-      box-shadow: 0 2px 6px 0 #0000001a;
-      border-radius: 2px;
-
-      .title {
-        height: 40px;
-        line-height: 40px;
-        font-weight: 700;
-        color: #313238;
-        margin: 4px 8px 0;
-        border-bottom: 1px solid #eaebf0;
-      }
-    }
-  }
-
   .webconsole-main {
+    display: flex;
     width: 100%;
     height: 100%;
     background: #1a1a1a;
-    display: flex;
     flex-direction: column;
+    transform: translate(0, 0);
 
     .top-main {
+      display: flex;
       width: 100%;
       height: 40px;
+      font-size: 12px;
+      color: #c4c6cc;
       background: #2e2e2e;
       box-shadow: 0 2px 4px 0 #00000029;
-      display: flex;
-      justify-content: space-between;
-      font-size: 12px;
 
-      .tabs-main {
-        flex: 1;
+      .operate-item {
+        position: relative;
         display: flex;
-        overflow: hidden;
-
-        .tab-item {
-          position: relative;
-          align-items: center;
-          min-width: 60px;
-          width: 200px;
-          height: 40px;
-          background: #2e2e2e;
-          box-shadow: 0 2px 4px 0 #00000029;
-          line-height: 40px;
-          text-align: center;
-          color: #c4c6cc;
-          cursor: pointer;
-
-          &::after {
-            position: absolute;
-            top: 12px;
-            right: 0;
-            width: 1px;
-            height: 16px;
-            background: #63656e;
-            content: '';
-          }
-
-          &.item-selected {
-            background: #242424;
-
-            .active-bar {
-              background: #3a84ff;
-            }
-          }
-
-          .active-bar {
-            width: 100%;
-            height: 3px;
-          }
-
-          .tab-item-content {
-            width: 100%;
-            display: flex;
-            align-items: center;
-            padding: 0 15px 0 24px;
-
-            .cluster-name {
-              flex: 1;
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
-            }
+        height: 40px;
+        padding: 0 7px;
+        align-items: center;
 
-            .icon-main {
-              width: 35px;
-              display: flex;
-              justify-content: flex-end;
-
-              &:hover {
-                .hover-close-icon-2 {
-                  display: block;
-                }
-
-                .hover-close-icon-1 {
-                  display: none;
-                }
-              }
-
-              .hover-close-icon-1 {
-                color: #979ba5;
-                font-size: 20px;
-              }
-
-              .hover-close-icon-2 {
-                display: none;
-                color: #63656e;
-                font-size: 24px;
-              }
-            }
-          }
+        &::after {
+          position: absolute;
+          top: 12px;
+          right: 0;
+          width: 1px;
+          height: 16px;
+          background: #45464d;
+          content: '';
         }
 
-        .add-icon-main {
+        .operate-item-inner {
           display: flex;
-          align-items: center;
-          margin-left: 13px;
+          height: 28px;
+          padding: 0 6px;
           cursor: pointer;
-          position: relative;
+          align-items: center;
+          justify-content: center;
 
           &:hover {
-            .add-icon {
-              color: #eaebf0;
-            }
+            background: #424242;
+            border-radius: 2px;
           }
 
-          .add-icon {
-            font-size: 15px;
-            color: #c4c6cc;
+          .operate-icon {
+            font-size: 16px;
           }
 
-          .clusters-select {
-            .bk-select-popover {
-              border: none;
-              box-shadow: none;
-            }
+          .operate-title {
+            margin-left: 5px;
           }
         }
       }
 
-      .top-operate-main {
-        color: #c4c6cc;
+      .operate-item-last {
         display: flex;
-        min-width: 300px;
+        height: 40px;
+        padding: 0 6px;
+        cursor: pointer;
+        align-items: center;
 
-        .operate-item {
-          position: relative;
-          height: 40px;
-          padding: 0 7px;
+        .operate-icon {
           display: flex;
+          height: 40px;
+          font-size: 16px;
           align-items: center;
 
-          &::after {
-            position: absolute;
-            top: 12px;
-            right: 0;
-            width: 1px;
-            height: 16px;
-            background: #45464d;
-            content: '';
-          }
-
-          .operate-item-inner {
-            padding: 0 6px;
-            height: 28px;
+          .operate-icon-inner {
             display: flex;
             align-items: center;
             justify-content: center;
-            cursor: pointer;
+            width: 28px;
+            height: 28px;
 
             &:hover {
               background: #424242;
               border-radius: 2px;
             }
-
-            .operate-icon {
-              font-size: 16px;
-            }
-
-            .operate-title {
-              margin-left: 5px;
-            }
-          }
-        }
-
-        .operate-item-last {
-          height: 40px;
-          display: flex;
-          align-items: center;
-          padding: 0 6px;
-          cursor: pointer;
-          // gap: 15px;
-
-          .operate-icon {
-            height: 40px;
-            font-size: 16px;
-            display: flex;
-            align-items: center;
-
-            .operate-icon-inner {
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              width: 28px;
-              height: 28px;
-
-              &:hover {
-                background: #424242;
-                border-radius: 2px;
-              }
-            }
           }
         }
-
-        .use-help-selected {
-          background: #242424;
-          color: #699df4;
-        }
       }
-    }
 
-    .content-main {
-      flex: 1;
-      overflow: hidden;
-      position: relative;
+      .use-help-selected {
+        color: #699df4;
+        background: #242424;
+      }
 
       .using-help-wrap {
-        position: absolute;
+        position: fixed;
+        top: 40px;
+        z-index: 99;
         width: 100%;
-        height: 100%;
+        height: calc(100% - 40px);
         background: transparent;
       }
+    }
+
+    .content-main {
+      position: relative;
+      overflow: hidden;
+      flex: 1;
 
       .placeholder-main {
+        display: flex;
         width: 100%;
         height: 100%;
-        display: flex;
+        font-size: 14px;
+        color: #c4c6cc;
         justify-content: center;
         align-items: center;
-        color: #c4c6cc;
-        font-size: 14px;
 
         .warn-icon {
-          margin-right: 8px;
           margin-top: 3px;
+          margin-right: 8px;
         }
       }
     }
diff --git a/dbm-ui/frontend/src/components/webconsole/components/ClearScreen.vue b/dbm-ui/frontend/src/components/webconsole/components/ClearScreen.vue
index bc011d9bdc..61b7fac8f9 100644
--- a/dbm-ui/frontend/src/components/webconsole/components/ClearScreen.vue
+++ b/dbm-ui/frontend/src/components/webconsole/components/ClearScreen.vue
@@ -14,7 +14,7 @@
   import { useI18n } from 'vue-i18n';
 
   interface Emits {
-    (e: 'clearCurrentScreen'): void;
+    (e: 'change'): void;
   }
 
   const emits = defineEmits<Emits>();
@@ -22,6 +22,6 @@
   const { t } = useI18n();
 
   const handleClickClearScreen = () => {
-    emits('clearCurrentScreen');
+    emits('change');
   };
 </script>
diff --git a/dbm-ui/frontend/src/components/webconsole/components/ClusterTabs.vue b/dbm-ui/frontend/src/components/webconsole/components/ClusterTabs.vue
new file mode 100644
index 0000000000..3d92ef23e6
--- /dev/null
+++ b/dbm-ui/frontend/src/components/webconsole/components/ClusterTabs.vue
@@ -0,0 +1,385 @@
+<template>
+  <div class="tabs-main">
+    <div
+      v-for="(clusterId, index) in selectedClusters"
+      :key="clusterId"
+      class="tab-item"
+      :class="{ 'item-selected': clusterId === modelValue }"
+      @click="() => handleActiveTab(clusterId)">
+      <div class="active-bar"></div>
+      <div class="tab-item-content">
+        <span
+          v-bk-tooltips="clustersMap[clusterId]?.immute_domain"
+          class="cluster-name">
+          {{ clustersMap[clusterId]?.immute_domain }}
+        </span>
+        <div
+          class="icon-main"
+          @click.stop="() => handleCloseTab(index)">
+          <DbIcon
+            class="hover-close-icon-1"
+            type="close" />
+          <DbIcon
+            class="hover-close-icon-2"
+            type="close-circle-shape" />
+        </div>
+      </div>
+    </div>
+    <div
+      ref="addTabRef"
+      class="add-icon-main">
+      <DbIcon
+        class="add-icon"
+        type="increase"
+        @click="handleClickAddIcon" />
+    </div>
+  </div>
+  <div style="display: none">
+    <div
+      ref="popRef"
+      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>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { Instance, SingleTarget } from 'tippy.js';
+  import tippy from 'tippy.js';
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { queryAllTypeCluster } from '@services/source/dbbase';
+
+  import { DBTypes } from '@common/const';
+
+  import { messageWarn } from '@utils';
+
+  import type { ClusterItem } from '../Index.vue';
+
+  interface Props {
+    dbType: DBTypes;
+    beforeClose: (clusterId: number) => Promise<boolean>;
+  }
+
+  interface Emits {
+    (e: 'change', data: ClusterItem): void;
+    (e: 'removeTab', clusterId: number): void;
+  }
+
+  interface Exposes {
+    showClustersPanel(): void;
+  }
+
+  const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
+
+  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 queryClusterTypesMap = {
+    [DBTypes.MYSQL]: 'tendbha,tendbsingle',
+    [DBTypes.TENDBCLUSTER]: 'tendbcluster',
+    [DBTypes.REDIS]: 'TwemproxyRedisInstance,PredixyTendisplusCluster,TwemproxyTendisSSDInstance,PredixyRedisCluster',
+  };
+
+  const clutersRef = ref();
+  const addTabRef = ref();
+  const popRef = ref();
+  const clustersMap = ref<Record<number, ClusterItem>>({});
+  const selectedClusters = ref<number[]>([]);
+
+  const clustersPanelHeight = computed(() => {
+    if (!clusterList.value) {
+      return '120px';
+    }
+    if (clusterList.value.length >= 6) {
+      return `288px`;
+    }
+    const height = 288 - (6 - clusterList.value.length) * 32;
+    return `${height}px`;
+  });
+
+  const { data: clusterList } = useRequest(queryAllTypeCluster, {
+    defaultParams: [
+      {
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        cluster_types: queryClusterTypesMap[props.dbType as keyof typeof queryClusterTypesMap],
+        phase: 'online',
+      },
+    ],
+    onSuccess(data) {
+      clustersMap.value = data.reduce<Record<number, ClusterItem>>((results, item) => {
+        Object.assign(results, {
+          [item.id]: item,
+        });
+        return results;
+      }, {});
+      clustersRaw = data;
+
+      if (routeClusterId) {
+        const clusterId = Number(routeClusterId);
+        setTimeout(() => {
+          handleClusterSelectChange([clusterId]);
+        });
+      }
+    },
+  });
+
+  const handleClusterSelectChange = (ids: number[]) => {
+    if (ids.length === 0) {
+      return;
+    }
+    if (selectedClusters.value.length === 8) {
+      messageWarn(t('页签数量已达上限，请先关闭部分标'));
+      return;
+    }
+    const id = ids.pop()!;
+    selectedClusters.value.push(id);
+    modelValue.value = id;
+    emits('change', clustersMap.value[id]);
+    updateClusterSelect();
+    tippyIns?.hide();
+  };
+
+  const updateClusterSelect = () => {
+    clusterList.value = clustersRaw.filter((item) => !selectedClusters.value.includes(item.id));
+  };
+
+  const handleActiveTab = (id: number) => {
+    modelValue.value = id;
+    emits('change', clustersMap.value[id]);
+  };
+
+  const handleCloseTab = async (index: number) => {
+    const currentClusterId = selectedClusters.value[index];
+    const isClose = await props.beforeClose(currentClusterId);
+    if (isClose) {
+      removeTab(index);
+    }
+  };
+
+  const removeTab = (index: number) => {
+    const currentClusterId = selectedClusters.value[index];
+    selectedClusters.value.splice(index, 1);
+    const clusterCount = selectedClusters.value.length;
+    if (currentClusterId === modelValue.value) {
+      emits('removeTab', currentClusterId);
+      // 关闭当前打开tab
+      modelValue.value = clusterCount === 0 ? 0 : selectedClusters.value[clusterCount - 1];
+      emits('change', clustersMap.value[modelValue.value]);
+    }
+    updateClusterSelect();
+  };
+
+  const handleClickAddIcon = () => {
+    setTimeout(() => {
+      clutersRef.value.showPopover();
+    });
+  };
+
+  onMounted(() => {
+    tippyIns = tippy(addTabRef.value as SingleTarget, {
+      content: popRef.value,
+      placement: 'bottom-start',
+      appendTo: () => document.body,
+      theme: 'light',
+      maxWidth: 'none',
+      trigger: 'mouseenter click',
+      interactive: true,
+      arrow: true,
+      offset: [0, 0],
+      zIndex: 999999,
+      hideOnClick: true,
+      onShow() {
+        setTimeout(() => {
+          clutersRef.value.showPopover();
+        });
+      },
+      onHide() {
+        clutersRef.value.hidePopover();
+      },
+    });
+  });
+
+  onBeforeUnmount(() => {
+    if (tippyIns) {
+      tippyIns.hide();
+      tippyIns.unmount();
+      tippyIns.destroy();
+      tippyIns = undefined;
+    }
+  });
+
+  defineExpose<Exposes>({
+    showClustersPanel() {
+      tippyIns?.show();
+    },
+  });
+</script>
+
+<style lang="less">
+  .tippy-content {
+    padding: 0 !important;
+
+    .clusters-select {
+      .bk-select-popover {
+        border: none;
+        transform: translate3d(0, 41px, 0);
+        box-shadow: none;
+      }
+    }
+
+    .webconsole-select-clusters {
+      width: 388px;
+
+      .title {
+        height: 40px;
+        margin: 4px 8px 0;
+        font-weight: 700;
+        line-height: 40px;
+        color: #313238;
+        border-bottom: 1px solid #eaebf0;
+      }
+    }
+  }
+
+  .tabs-main {
+    display: flex;
+    margin-right: auto;
+    overflow: hidden;
+    flex: 1;
+
+    .tab-item {
+      position: relative;
+      width: 200px;
+      height: 40px;
+      min-width: 60px;
+      line-height: 40px;
+      color: #c4c6cc;
+      text-align: center;
+      cursor: pointer;
+      background: #2e2e2e;
+      box-shadow: 0 2px 4px 0 #00000029;
+      align-items: center;
+
+      &::after {
+        position: absolute;
+        top: 12px;
+        right: 0;
+        width: 1px;
+        height: 16px;
+        background: #63656e;
+        content: '';
+      }
+
+      &.item-selected {
+        background: #242424;
+
+        .active-bar {
+          background: #3a84ff;
+        }
+      }
+
+      .active-bar {
+        width: 100%;
+        height: 3px;
+      }
+
+      .tab-item-content {
+        display: flex;
+        width: 100%;
+        padding: 0 15px 0 24px;
+        align-items: center;
+
+        .cluster-name {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          flex: 1;
+        }
+
+        .icon-main {
+          display: flex;
+          width: 35px;
+          justify-content: flex-end;
+
+          &:hover {
+            .hover-close-icon-2 {
+              display: block;
+            }
+
+            .hover-close-icon-1 {
+              display: none;
+            }
+          }
+
+          .hover-close-icon-1 {
+            font-size: 20px;
+            color: #979ba5;
+          }
+
+          .hover-close-icon-2 {
+            display: none;
+            font-size: 24px;
+            color: #63656e;
+          }
+        }
+      }
+    }
+
+    .add-icon-main {
+      position: relative;
+      display: flex;
+      margin-left: 13px;
+      cursor: pointer;
+      align-items: center;
+
+      &:hover {
+        .add-icon {
+          color: #eaebf0;
+        }
+      }
+
+      .add-icon {
+        font-size: 15px;
+        color: #c4c6cc;
+      }
+
+      .clusters-select {
+        .bk-select-popover {
+          border: none;
+          transform: translate3d(0, 41px, 0);
+          box-shadow: none;
+        }
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/components/webconsole/components/FontChange.vue b/dbm-ui/frontend/src/components/webconsole/components/FontSetting.vue
similarity index 73%
rename from dbm-ui/frontend/src/components/webconsole/components/FontChange.vue
rename to dbm-ui/frontend/src/components/webconsole/components/FontSetting.vue
index 6abc43dcd0..d56fc6cbeb 100644
--- a/dbm-ui/frontend/src/components/webconsole/components/FontChange.vue
+++ b/dbm-ui/frontend/src/components/webconsole/components/FontSetting.vue
@@ -16,10 +16,10 @@
           v-for="(item, index) in fontSizeList"
           :key="index"
           class="font-item"
-          :class="{ 'font-item-active': item.fontSize === currentFontSize }"
-          @click="() => handleChangeFontSize(index)">
+          :class="{ 'font-item-active': item.fontSize === modelValue.fontSize }"
+          @click="() => handleChangeFontSize(item)">
           <DbIcon
-            :style="{ 'font-size': item }"
+            :style="item"
             type="aa" />
         </div>
       </div>
@@ -29,21 +29,25 @@
 <script lang="ts" setup>
   import { useI18n } from 'vue-i18n';
 
+  interface FontSetting {
+    fontSize: string;
+    lineHeight: string;
+  }
+
   interface Emits {
-    (
-      e: 'fontSizeChange',
-      value: {
-        fontSize: string;
-        lineHeight: string;
-      },
-    ): void;
+    (e: 'change', value: FontSetting): void;
   }
 
   const emits = defineEmits<Emits>();
 
   const { t } = useI18n();
 
-  const currentFontSize = ref('12px');
+  const modelValue = defineModel<FontSetting>({
+    default: {
+      fontSize: '12px',
+      lineHeight: '20px',
+    },
+  });
 
   const fontSizeList = [
     {
@@ -60,10 +64,9 @@
     },
   ];
 
-  const handleChangeFontSize = (index: number) => {
-    const currentFont = fontSizeList[index];
-    currentFontSize.value = currentFont.fontSize;
-    emits('fontSizeChange', currentFont);
+  const handleChangeFontSize = (item: FontSetting) => {
+    modelValue.value = item;
+    emits('change', item);
   };
 </script>
 <style lang="less">
@@ -73,25 +76,25 @@
     .font-change-main {
       display: flex;
       padding: 2px;
+      cursor: pointer;
       background: #2e2e2e;
       border: 1px solid #3d3d3d;
-      box-shadow: 0 2px 6px 0 #0000001f;
       border-radius: 2px;
-      cursor: pointer;
+      box-shadow: 0 2px 6px 0 #0000001f;
 
       .font-item {
+        display: flex;
         width: 28px;
         height: 28px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
         color: #979ba5;
+        align-items: end;
+        justify-content: center;
       }
 
       .font-item-active {
+        color: #dcdee5;
         background: #424242;
         border-radius: 1px;
-        color: #dcdee5;
       }
     }
   }
diff --git a/dbm-ui/frontend/src/components/webconsole/components/FullScreen.vue b/dbm-ui/frontend/src/components/webconsole/components/FullScreen.vue
index afcb9e22ce..f80747f0ea 100644
--- a/dbm-ui/frontend/src/components/webconsole/components/FullScreen.vue
+++ b/dbm-ui/frontend/src/components/webconsole/components/FullScreen.vue
@@ -5,23 +5,23 @@
       @click="handleClickFullScreen">
       <DbIcon
         class="operate-icon"
-        :type="isFullScreen ? 'un-full-screen' : 'full-screen'" />
+        :type="modelValue ? 'un-full-screen' : 'full-screen'" />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
   interface Emits {
-    (e: 'toggleFullScreen'): void;
+    (e: 'change'): void;
   }
 
   const emits = defineEmits<Emits>();
 
-  const isFullScreen = defineModel<boolean>('isFullScreen', {
+  const modelValue = defineModel<boolean>({
     default: false,
   });
 
   const handleClickFullScreen = () => {
-    isFullScreen.value = !isFullScreen.value;
-    emits('toggleFullScreen');
+    modelValue.value = !modelValue.value;
+    emits('change');
   };
 </script>
diff --git a/dbm-ui/frontend/src/components/webconsole/components/RawSwitcher.vue b/dbm-ui/frontend/src/components/webconsole/components/RawSwitcher.vue
new file mode 100644
index 0000000000..d3b8e4b3e4
--- /dev/null
+++ b/dbm-ui/frontend/src/components/webconsole/components/RawSwitcher.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="operate-item">
+    <div class="operate-item-switcher">
+      <BkSwitcher
+        v-model="modelValue"
+        v-bk-tooltips="{
+          content: t('开启后可正常显示中文'),
+          disabled: modelValue,
+        }"
+        theme="primary"
+        @change="handleRawSwitch" />
+      <span class="operate-title ml-5">{{ t('Raw 模式') }}</span>
+    </div>
+  </div>
+</template>
+<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;
+  };
+</script>
+
+<style lang="less" scoped>
+  .operate-item-switcher {
+    display: flex;
+    height: 28px;
+    padding: 0 6px;
+    align-items: center;
+    justify-content: center;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/components/webconsole/components/UseHelp.vue b/dbm-ui/frontend/src/components/webconsole/components/UseHelp.vue
deleted file mode 100644
index 5c28b5c7d5..0000000000
--- a/dbm-ui/frontend/src/components/webconsole/components/UseHelp.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div
-    class="operate-item"
-    :class="{ 'use-help-selected': showUseageHelp }"
-    @click="handleToggleHelp">
-    <div class="operate-item-inner">
-      <DbIcon
-        class="operate-icon"
-        type="help-fill" />
-      <span class="operate-title">{{ t('使用帮助') }}</span>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-  import { useI18n } from 'vue-i18n';
-
-  interface Emits {
-    (e: 'toggleShowHelp'): void;
-  }
-
-  const emits = defineEmits<Emits>();
-
-  const showUseageHelp = defineModel<boolean>('showUseageHelp', {
-    default: false,
-  });
-
-  const { t } = useI18n();
-
-  const handleToggleHelp = () => {
-    emits('toggleShowHelp');
-  };
-</script>
diff --git a/dbm-ui/frontend/src/components/webconsole/components/UseingHelpPanel.vue b/dbm-ui/frontend/src/components/webconsole/components/UseingHelpPanel.vue
deleted file mode 100644
index 26d0b638a4..0000000000
--- a/dbm-ui/frontend/src/components/webconsole/components/UseingHelpPanel.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-  <BkResizeLayout
-    class="webconsole-useing-help"
-    immediate
-    initial-divide="50%"
-    :max="900"
-    :min="400"
-    placement="right"
-    style="height: 100%">
-    <template #aside>
-      <div class="aside-main">
-        <div style="font-weight: 700">## {{ t('使用帮助') }}</div>
-        <div>1. {{ t('支持 show databases、show tables from db1 等部分 show 语句') }};</div>
-        <div>
-          2. {{ t('只能输入select，不支持 insert, delete, update，且 select 必须带limit控制行数，行数<=1000') }};
-        </div>
-        <div>3. {{ t('暂时不支持 use 语句') }};</div>
-        <div>4. {{ t('不允许访问系统库，如 mysql information_schema performance_schema db_infobase') }};</div>
-        <div>5. {{ t('查询结果数据量不能大于64M') }};</div>
-        <div style="font-weight: 700">## {{ t('示例') }}</div>
-        <div>- show databases;</div>
-        <div>- show tables from db1;</div>
-        <div>- select * from [db.]table [where cond] [order by ...] limit [skip,]N; (N&lt;=1000)</div>
-      </div>
-    </template>
-    <template #main>
-      <div
-        class="empty-main"
-        @click="handleClickMain"></div>
-    </template>
-  </BkResizeLayout>
-</template>
-<script setup lang="ts">
-  import { useI18n } from 'vue-i18n';
-
-  interface Emits {
-    (e: 'hide'): void;
-  }
-
-  const emits = defineEmits<Emits>();
-
-  const { t } = useI18n();
-
-  const handleClickMain = () => {
-    emits('hide');
-  };
-</script>
-<style lang="less">
-  .webconsole-useing-help {
-    border: none;
-
-    .bk-resize-layout-aside {
-      border: none;
-    }
-
-    .aside-main {
-      width: 100%;
-      height: 100%;
-      background: #282829;
-      border: 2px solid transparent;
-      color: #c4c6cc;
-      font-size: 12px;
-      line-height: 23px;
-      padding: 16px;
-      box-sizing: border-box;
-
-      &:hover {
-        border-color: blue;
-      }
-    }
-
-    .empty-main {
-      width: 100%;
-      height: 100%;
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/components/webconsole/components/console-panel/Index.vue b/dbm-ui/frontend/src/components/webconsole/components/console-panel/Index.vue
index af2ef2ef4e..f640cc9635 100644
--- a/dbm-ui/frontend/src/components/webconsole/components/console-panel/Index.vue
+++ b/dbm-ui/frontend/src/components/webconsole/components/console-panel/Index.vue
@@ -2,23 +2,19 @@
   <div
     ref="consolePanelRef"
     class="console-panel-main"
-    :style="{
-      fontSize: fontConfig.fontSize,
-      lineHeight: fontConfig.lineHeight,
-    }">
+    @click="handleInputFocus">
     <template
-      v-for="(item, index) in panelRecords"
+      v-for="(item, index) in panelInputMap[clusterId]"
       :key="index">
       <div
         v-if="item.type !== 'normal'"
         class="input-line">
-        <span v-if="item.type === 'command'"> </span>
         <span :class="{ 'error-text': item.type === 'error' }">{{ item.message }}</span>
       </div>
       <template v-else>
-        <RenderMysqlMessage
-          v-if="clusterType === 'mysql'"
-          :data="item.message as Record<string, string>[]" />
+        <Component
+          :is="consoleConfig.renderMessage"
+          :data="item.message" />
       </template>
     </template>
     <div v-show="loading">Waiting...</div>
@@ -29,6 +25,7 @@
         :disabled="loading"
         :style="{ height: realHeight }"
         :value="command"
+        @blur="handleInputBlur"
         @input="handleInputChange"
         @keyup.down="handleClickDownBtn"
         @keyup.enter.stop="handleClickSendCommand"
@@ -40,72 +37,114 @@
 <script setup lang="ts">
   import _ from 'lodash';
 
-  import { queryWebconsole } from '@services/source/dbbase';
+  import { queryAllTypeCluster, queryWebconsole } from '@services/source/dbbase';
+
+  import { DBTypes } from '@common/const';
 
   import { downloadText } from '@utils';
 
-  import type { ClusterItem, Props as MainProps } from '../../Index.vue';
+  import RenderMysqlMessage from './components/RenderMysqlMessage.vue';
+  import RenderRedisMessage, {
+    getDbOwnParams as getRedisOwnParams,
+    getInputPlaceholder as getRedisPlaceholder,
+  } from './components/RenderRedisMessage.vue';
 
-  import RenderMysqlMessage from './RenderMysqlMessage.vue';
+  type ClusterItem = ServiceReturnType<typeof queryAllTypeCluster>[number];
 
   interface Props {
-    clusterInfo: ClusterItem;
-    fontConfig: {
-      fontSize: string;
-      lineHeight: string;
-    };
-    clusterType: MainProps['clusterType'];
+    modelValue: ClusterItem;
+    dbType: DBTypes;
+    raw?: boolean;
   }
 
   interface Expose {
     clearCurrentScreen: (id?: number) => void;
     export: () => void;
-  }
-
-  interface PanelLine {
-    message: string | Record<string, string>[];
-    type: 'success' | 'error' | 'normal' | 'command';
+    isInputed: (id?: number) => boolean;
   }
 
   const props = defineProps<Props>();
 
   const command = ref('');
-  const panelRecords = ref<PanelLine[]>([]);
   const consolePanelRef = ref();
   const loading = ref(false);
   const inputRef = ref();
   const realHeight = ref('52px');
-
-  const clusterId = computed(() => props.clusterInfo.id);
-
-  const commandsInput: Record<number, string[]> = {};
-  const panelsInput: Record<number, PanelLine[]> = {};
+  const panelInputMap = reactive<
+    Record<
+      number,
+      Array<{
+        message: string | Record<string, string>[];
+        type: 'success' | 'error' | 'normal' | 'command';
+      }>
+    >
+  >({});
+
+  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;
+      // cmd前缀
+      getInputPlaceholder?: (clusterId: number, domain: string) => string;
+      // db独有参数
+      getDbOwnParmas?: (clusterId: number, cmd: string) => Record<string, unknown>;
+    }
+  > = {
+    [DBTypes.MYSQL]: {
+      renderMessage: RenderMysqlMessage,
+    },
+    [DBTypes.TENDBCLUSTER]: {
+      renderMessage: RenderMysqlMessage,
+    },
+    [DBTypes.REDIS]: {
+      renderMessage: RenderRedisMessage,
+      getInputPlaceholder: getRedisPlaceholder,
+      getDbOwnParmas: getRedisOwnParams,
+    },
+  };
+
+  const clusterId = computed(() => props.modelValue.id);
+  const consoleConfig = computed(() => configMap[props.dbType as keyof typeof configMap]);
 
   watch(
     clusterId,
     () => {
       if (clusterId.value) {
-        inputPlaceholder = `${props.clusterInfo.immute_domain} > `;
-        command.value = inputPlaceholder;
-
-        if (!commandsInput[clusterId.value]) {
-          commandsInput[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;
+
+        if (!commandInputMap[clusterId.value]) {
+          commandInputMap[clusterId.value] = [];
           currentCommandIndex = 0;
         } else {
-          currentCommandIndex = commandsInput[clusterId.value].length;
+          currentCommandIndex = commandInputMap[clusterId.value].length;
         }
 
-        if (!panelsInput[clusterId.value]) {
-          panelsInput[clusterId.value] = [];
-          panelRecords.value = [];
+        if (!panelInputMap[clusterId.value]) {
+          panelInputMap[clusterId.value] = [];
         } else {
-          panelRecords.value = _.cloneDeep(panelsInput[clusterId.value]);
+          panelInputMap[clusterId.value] = _.cloneDeep(panelInputMap[clusterId.value]);
         }
 
         setTimeout(() => {
-          inputRef.value.focus();
+          handleInputFocus();
         });
       }
     },
@@ -114,27 +153,37 @@
     },
   );
 
+  const handleInputFocus = () => {
+    inputRef.value.focus();
+    checkCursorPosition();
+  };
+
   // 回车输入指令
   const handleClickSendCommand = async (e: any) => {
-    const cmd = e.target.value.trim() as string;
-    if (cmd.length <= inputPlaceholder.length + 1) {
-      command.value = inputPlaceholder;
-      return;
-    }
-
-    loading.value = true;
-    commandsInput[clusterId.value].push(cmd);
-    currentCommandIndex = commandsInput[clusterId.value].length;
+    let cmd = e.target.value.trim() as string;
+    const isInputed = cmd.length > inputPlaceholder.length;
     const commandLine = {
-      message: cmd,
+      message: isInputed ? cmd : inputPlaceholder,
       type: 'command' as const,
     };
-    panelsInput[clusterId.value].push(commandLine);
-    panelRecords.value.push(commandLine);
+    commandInputMap[clusterId.value].push(cmd);
+    currentCommandIndex = commandInputMap[clusterId.value].length;
+    panelInputMap[clusterId.value].push(commandLine);
     command.value = inputPlaceholder;
+    if (!isInputed) {
+      return;
+    }
+    loading.value = true;
+    cmd = cmd.substring(inputPlaceholder.length);
+    if (typeof props.raw === 'boolean') {
+      baseParams = {
+        ...baseParams,
+        raw: props.raw,
+      };
+    }
     const executeResult = await queryWebconsole({
-      cluster_id: props.clusterInfo.id,
-      cmd: cmd.substring(inputPlaceholder.length),
+      ...baseParams,
+      cmd,
     }).finally(() => {
       loading.value = false;
       setTimeout(() => {
@@ -148,16 +197,22 @@
         message: executeResult.error_msg,
         type: 'error' as const,
       };
-      panelsInput[clusterId.value].push(errorLine);
-      panelRecords.value.push(errorLine);
+      panelInputMap[clusterId.value].push(errorLine);
     } else {
       // 正常消息
       const normalLine = {
         message: executeResult.query,
         type: 'normal' as const,
       };
-      panelsInput[clusterId.value].push(normalLine);
-      panelRecords.value.push(normalLine);
+      panelInputMap[clusterId.value].push(normalLine);
+
+      if (consoleConfig.value.getDbOwnParmas) {
+        baseParams = Object.assign(baseParams, consoleConfig.value.getDbOwnParmas(clusterId.value, cmd));
+        if (consoleConfig.value.getInputPlaceholder) {
+          inputPlaceholder = consoleConfig.value.getInputPlaceholder(clusterId.value, props.modelValue.immute_domain);
+          command.value = inputPlaceholder;
+        }
+      }
     }
 
     setTimeout(() => {
@@ -165,54 +220,67 @@
     });
   };
 
-  const initInput = () => {
+  // 恢复最近一次输入并矫正光标
+  const restoreInput = (isRestore = true) => {
+    const recentOnceInput = command.value;
     command.value = '';
     nextTick(() => {
-      command.value = inputPlaceholder;
+      command.value = isRestore ? recentOnceInput : inputPlaceholder;
+    });
+    setTimeout(() => {
+      const cursorIndex = inputPlaceholder.length;
+      inputRef.value.setSelectionRange(cursorIndex, cursorIndex);
     });
   };
 
   // 输入
   const handleInputChange = (e: any) => {
-    if (inputRef.value.selectionStart <= inputPlaceholder.length) {
-      initInput();
+    if (inputRef.value.selectionStart === inputPlaceholder.length - 1) {
+      restoreInput();
       return;
     }
-    const { value } = e.target;
-    if (value.length <= inputPlaceholder.length) {
-      initInput();
+    if (inputRef.value.selectionStart < inputPlaceholder.length) {
+      restoreInput(false);
       return;
     }
-
-    command.value = value;
-
+    command.value = e.target.value as string;
     setTimeout(() => {
       const { scrollHeight } = inputRef.value;
       realHeight.value = `${scrollHeight}px`;
     });
   };
 
+  // 当前tab有未执行的command暂存，切换回来回显
+  const handleInputBlur = () => {
+    if (command.value.length > inputPlaceholder.length) {
+      noExecuteCommand[clusterId.value] = command.value;
+    }
+  };
+
   // 键盘 ↑ 键
   const handleClickUpBtn = () => {
-    if (commandsInput[clusterId.value].length === 0 || currentCommandIndex === 0) {
+    if (commandInputMap[clusterId.value].length === 0 || currentCommandIndex === 0) {
       checkCursorPosition(true);
       return;
     }
 
     currentCommandIndex = currentCommandIndex - 1;
-    command.value = commandsInput[clusterId.value][currentCommandIndex];
+    command.value = commandInputMap[clusterId.value][currentCommandIndex];
     const cursorIndex = command.value.length;
     inputRef.value.setSelectionRange(cursorIndex, cursorIndex);
   };
 
   // 键盘 ↓ 键
   const handleClickDownBtn = () => {
-    if (commandsInput[clusterId.value].length === 0 || currentCommandIndex === commandsInput[clusterId.value].length) {
+    if (
+      commandInputMap[clusterId.value].length === 0 ||
+      currentCommandIndex === commandInputMap[clusterId.value].length
+    ) {
       return;
     }
 
     currentCommandIndex = currentCommandIndex + 1;
-    command.value = commandsInput[clusterId.value][currentCommandIndex] ?? inputPlaceholder;
+    command.value = commandInputMap[clusterId.value][currentCommandIndex] ?? inputPlaceholder;
   };
 
   // 键盘 ← 键
@@ -230,16 +298,14 @@
 
   defineExpose<Expose>({
     clearCurrentScreen(id?: number) {
-      if (id) {
-        panelsInput[id] = [];
-      } else {
-        panelsInput[clusterId.value] = [];
-      }
-      panelRecords.value = [];
+      const currentClusterId = id ?? clusterId.value;
+      panelInputMap[currentClusterId] = [];
+      commandInputMap[currentClusterId] = [];
+      noExecuteCommand[currentClusterId] = '';
       command.value = inputPlaceholder;
     },
     export() {
-      const lines = panelsInput[clusterId.value].map((item) => item.message);
+      const lines = panelInputMap[clusterId.value].map((item) => item.message);
       let exportTxt = '';
       lines.forEach((item) => {
         if (Array.isArray(item)) {
@@ -262,35 +328,43 @@
         }
       });
 
-      const fileName = `${props.clusterInfo.immute_domain}.txt`;
+      const fileName = `${props.modelValue.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
+      );
+    },
   });
 </script>
 <style lang="less">
   .console-panel-main {
     width: 100%;
     height: 100%;
+    padding: 14px 24px;
     overflow-y: auto;
     font-size: 12px;
-    padding: 14px 24px;
     color: #dcdee5;
 
     .input-line {
       display: flex;
       font-weight: 400;
-      color: #94f5a4;
       line-height: 24px;
+      color: #94f5a4;
       word-break: break-all;
 
       .input-main {
+        height: auto;
+        padding: 0;
+        overflow-y: hidden;
+        background: #1a1a1a;
         border: none;
         outline: none;
-        background: #1a1a1a;
-        flex: 1;
         resize: none;
-        height: auto;
-        overflow-y: hidden;
+        flex: 1;
       }
 
       .error-text {
diff --git a/dbm-ui/frontend/src/components/webconsole/components/console-panel/RenderMysqlMessage.vue b/dbm-ui/frontend/src/components/webconsole/components/console-panel/components/RenderMysqlMessage.vue
similarity index 95%
rename from dbm-ui/frontend/src/components/webconsole/components/console-panel/RenderMysqlMessage.vue
rename to dbm-ui/frontend/src/components/webconsole/components/console-panel/components/RenderMysqlMessage.vue
index a9aff5c824..b639eb2f71 100644
--- a/dbm-ui/frontend/src/components/webconsole/components/console-panel/RenderMysqlMessage.vue
+++ b/dbm-ui/frontend/src/components/webconsole/components/console-panel/components/RenderMysqlMessage.vue
@@ -36,13 +36,13 @@
 <style lang="less">
   .render-mysql-message {
     width: 100%;
-    color: #dcdee5;
+    margin: 5px 0;
+    overflow: auto;
     font-weight: 400;
     line-height: 24px;
-    overflow: auto;
+    color: #dcdee5;
     border: 1px solid transparent;
     border-left: none;
-    margin: 5px 0;
     .dott-line();
 
     .dott-line {
@@ -53,28 +53,26 @@
 
     table {
       width: 100%;
-      // word-break:break-all;
       word-wrap: break-word;
 
       thead {
         border: 1px solid transparent;
-        border-right: none;
         border-top: none;
+        border-right: none;
         .dott-line();
       }
 
       tbody {
-        // border-bottom: 1px solid transparent;
         border-left: 1px solid transparent;
         .dott-line();
       }
 
       td,
       th {
-        font-weight: normal;
         max-width: 500px;
-        text-align: left;
         padding-left: 8px;
+        font-weight: normal;
+        text-align: left;
       }
     }
   }
diff --git a/dbm-ui/frontend/src/components/webconsole/components/console-panel/components/RenderRedisMessage.vue b/dbm-ui/frontend/src/components/webconsole/components/console-panel/components/RenderRedisMessage.vue
new file mode 100644
index 0000000000..dd8cfa3151
--- /dev/null
+++ b/dbm-ui/frontend/src/components/webconsole/components/console-panel/components/RenderRedisMessage.vue
@@ -0,0 +1,43 @@
+<template>
+  <p
+    v-for="(row, index) in rows"
+    :key="index">
+    <span>{{ row }}</span>
+  </p>
+</template>
+<script lang="ts">
+  interface Props {
+    data: string;
+  }
+
+  // 集群所选的数据库索引
+  const clusterSelectedDbIndex: Record<number, number> = {};
+
+  // 设置当前集群id所选数据库索引
+  const setDbIndexByClusterId = (clusterId: number, value = 0) => {
+    clusterSelectedDbIndex[clusterId] = value;
+  };
+
+  // cmd前缀
+  export const getInputPlaceholder = (clusterId: number, domain: string) => {
+    if (!clusterSelectedDbIndex[clusterId]) {
+      setDbIndexByClusterId(clusterId);
+    }
+    return `${domain}[${clusterSelectedDbIndex[clusterId]}] > `;
+  };
+
+  // db独有参数
+  export const getDbOwnParams = (clusterId: number, cmd: string) => {
+    if (cmd.includes('select')) {
+      setDbIndexByClusterId(clusterId, Number(cmd.substring('select '.length)) as number);
+    }
+    return {
+      db_num: clusterSelectedDbIndex[clusterId],
+    };
+  };
+</script>
+<script setup lang="ts">
+  const props = defineProps<Props>();
+
+  const rows = computed(() => props.data.split('\n') || []);
+</script>
diff --git a/dbm-ui/frontend/src/components/webconsole/components/usage-help/Index.vue b/dbm-ui/frontend/src/components/webconsole/components/usage-help/Index.vue
new file mode 100644
index 0000000000..6ead9d96d8
--- /dev/null
+++ b/dbm-ui/frontend/src/components/webconsole/components/usage-help/Index.vue
@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="operate-item"
+    :class="{ 'use-help-selected': modelValue }"
+    @click="handleToggleHelp">
+    <div class="operate-item-inner">
+      <DbIcon
+        class="operate-icon"
+        type="help-fill" />
+      <span class="operate-title">{{ t('使用帮助') }}</span>
+    </div>
+  </div>
+  <div
+    v-show="modelValue"
+    class="using-help-wrap">
+    <UsingHelpPanel
+      :db-type="dbType"
+      @hide="handleToggleHelp" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+
+  import { DBTypes } from '@common/const';
+
+  import UsingHelpPanel from './components/UsingHelpPanel.vue';
+
+  interface Props {
+    dbType?: DBTypes;
+  }
+
+  withDefaults(defineProps<Props>(), {
+    dbType: DBTypes.MYSQL,
+  });
+
+  const modelValue = defineModel<boolean>({
+    default: false,
+  });
+
+  const { t } = useI18n();
+
+  const handleToggleHelp = () => {
+    modelValue.value = !modelValue.value;
+  };
+</script>
diff --git a/dbm-ui/frontend/src/components/webconsole/components/usage-help/components/RenderMysqlContent.vue b/dbm-ui/frontend/src/components/webconsole/components/usage-help/components/RenderMysqlContent.vue
new file mode 100644
index 0000000000..a432f4a66e
--- /dev/null
+++ b/dbm-ui/frontend/src/components/webconsole/components/usage-help/components/RenderMysqlContent.vue
@@ -0,0 +1,17 @@
+<template>
+  <div style="font-weight: bold">## {{ t('使用帮助') }}</div>
+  <div>1. {{ t('支持 show databases、show tables from db1 等部分 show 语句') }};</div>
+  <div>2. {{ t('只能输入select，不支持 insert, delete, update，且 select 必须带limit控制行数，行数<=1000') }};</div>
+  <div>3. {{ t('暂时不支持 use 语句') }};</div>
+  <div>4. {{ t('不允许访问系统库，如 mysql information_schema performance_schema db_infobase') }};</div>
+  <div>5. {{ t('查询结果数据量不能大于64M') }};</div>
+  <div style="font-weight: bold">## {{ t('示例') }}</div>
+  <div>- show databases;</div>
+  <div>- show tables from db1;</div>
+  <div>- select * from [db.]table [where cond] [order by ...] limit [skip,]N; (N&lt;=1000)</div>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  const { t } = useI18n();
+</script>
diff --git a/dbm-ui/frontend/src/components/webconsole/components/usage-help/components/RenderRedisContent.vue b/dbm-ui/frontend/src/components/webconsole/components/usage-help/components/RenderRedisContent.vue
new file mode 100644
index 0000000000..bfc094331a
--- /dev/null
+++ b/dbm-ui/frontend/src/components/webconsole/components/usage-help/components/RenderRedisContent.vue
@@ -0,0 +1,11 @@
+<template>
+  <div style="font-weight: bold">## {{ t('使用帮助') }}</div>
+  <div>1. {{ t('只支持读取类的指令') }};</div>
+  <div>2. {{ t('get、mget指令，返回的value需小于1M') }};</div>
+  <div>3. {{ t('复合类型，返回member需小于1000') }};</div>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  const { t } = useI18n();
+</script>
diff --git a/dbm-ui/frontend/src/components/webconsole/components/usage-help/components/UsingHelpPanel.vue b/dbm-ui/frontend/src/components/webconsole/components/usage-help/components/UsingHelpPanel.vue
new file mode 100644
index 0000000000..8e7efa3a28
--- /dev/null
+++ b/dbm-ui/frontend/src/components/webconsole/components/usage-help/components/UsingHelpPanel.vue
@@ -0,0 +1,83 @@
+<template>
+  <BkResizeLayout
+    class="webconsole-useing-help"
+    initial-divide="50%"
+    :max="900"
+    :min="400"
+    placement="right"
+    style="height: 100%"
+    :trigger-width="20">
+    <template #aside>
+      <div class="aside-main">
+        <Component :is="renderContent" />
+      </div>
+    </template>
+    <template #main>
+      <div
+        class="empty-main"
+        @click="handleClickMain" />
+    </template>
+  </BkResizeLayout>
+</template>
+<script setup lang="ts">
+  import { DBTypes } from '@common/const';
+
+  import RenderMysqlContent from './RenderMysqlContent.vue';
+  import RenderRedisContent from './RenderRedisContent.vue';
+
+  interface Props {
+    dbType?: DBTypes;
+  }
+
+  interface Emits {
+    (e: 'hide'): void;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    dbType: DBTypes.MYSQL,
+  });
+
+  const emits = defineEmits<Emits>();
+
+  const contentMap = {
+    [DBTypes.MYSQL]: RenderMysqlContent,
+    [DBTypes.TENDBCLUSTER]: RenderMysqlContent,
+    [DBTypes.REDIS]: RenderRedisContent,
+  };
+
+  const renderContent = computed(() => contentMap[props.dbType as keyof typeof contentMap]);
+
+  const handleClickMain = () => {
+    emits('hide');
+  };
+</script>
+<style lang="less">
+  .webconsole-useing-help {
+    border: none;
+
+    .bk-resize-layout-aside {
+      border: none;
+
+      .bk-resize-trigger:hover {
+        border-left: 2px solid #3a84ff;
+      }
+    }
+
+    .aside-main {
+      width: 100%;
+      height: 100%;
+      padding: 16px;
+      font-size: 12px;
+      line-height: 23px;
+      color: #c4c6cc;
+      background: #282829;
+      border: 2px solid transparent;
+      box-sizing: border-box;
+    }
+
+    .empty-main {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index 706f80809f..1398a51a0e 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3235,6 +3235,10 @@
     "不能选择临时集群": "不能选择临时集群",
     "账号创建后，不支持修改。": "账号创建后，不支持修改。",
     "平台不会保存密码，请自行保管好。": "平台不会保存密码，请自行保管好。",
+    "Raw 模式": "Raw 模式",
+    "开启后可正常显示中文": "开启后可正常显示中文",
+    "关闭后，内容将不会再在保存，请谨慎操作！": "关闭后，内容将不会再在保存，请谨慎操作！",
+    "确认关闭当前窗口？": "确认关闭当前窗口？",
     "授权的IP": "授权的IP",
     "生成的目标 DB 范式": "生成的目标 DB 范式",
     "安全认证": "安全认证",
@@ -3251,5 +3255,8 @@
     "SQL 来源": "SQL 来源",
     "请添加 SQL 文件": "请添加 SQL 文件",
     "DB名不允许重复": "DB名不允许重复",
+    "只支持读取类的指令": "只支持读取类的指令",
+    "get、mget指令，返回的value需小于1M": "get、mget指令，返回的value需小于1M",
+    "复合类型，返回member需小于1000": "复合类型，返回member需小于1000",
     "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/services/model/redis/redis.ts b/dbm-ui/frontend/src/services/model/redis/redis.ts
index 9ced7748a2..2a922c1815 100644
--- a/dbm-ui/frontend/src/services/model/redis/redis.ts
+++ b/dbm-ui/frontend/src/services/model/redis/redis.ts
@@ -161,6 +161,7 @@ export default class Redis {
     redis_plugin_dns_bind_clb: boolean;
     redis_purge: boolean;
     redis_view: boolean;
+    redis_webconsole: boolean;
   };
   phase: string;
   proxy: Node[];
diff --git a/dbm-ui/frontend/src/services/model/spider/tendbCluster.ts b/dbm-ui/frontend/src/services/model/spider/tendbCluster.ts
index 24545405fe..590806a964 100644
--- a/dbm-ui/frontend/src/services/model/spider/tendbCluster.ts
+++ b/dbm-ui/frontend/src/services/model/spider/tendbCluster.ts
@@ -126,6 +126,7 @@ export default class TendbCluster {
     tendbcluster_spider_reduce_nodes: boolean;
     tendbcluster_view: boolean;
     tendb_spider_slave_destroy: boolean;
+    tendbcluster_webconsole: boolean;
     access_entry_edit: boolean;
   };
   phase: 'online' | 'offline';
diff --git a/dbm-ui/frontend/src/views/redis/list/components/list/Index.vue b/dbm-ui/frontend/src/views/redis/list/components/list/Index.vue
index b43e1cf041..37df60c33e 100644
--- a/dbm-ui/frontend/src/views/redis/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/redis/list/components/list/Index.vue
@@ -454,7 +454,7 @@
   const isCN = computed(() => locale.value === 'zh-cn');
   const tableOperationWidth = computed(() => {
     if (!isStretchLayoutOpen.value) {
-      return isCN.value ? 240 : 320;
+      return isCN.value ? 290 : 370;
     }
     return 60;
   });
@@ -854,6 +854,21 @@
       render: ({ data }: ColumnRenderData) => {
         const getOperations = (theme = 'primary') => {
           const baseOperations = [
+            <OperationBtnStatusTips
+              v-db-console="redis.clusterManage.webconsole"
+              data={data}>
+              <auth-button
+                action-id="redis_webconsole"
+                resource={data.id}
+                permission={data.permission.redis_webconsole}
+                disabled={data.operationDisabled}
+                text
+                theme="primary"
+                class="mr-8"
+                onClick={() => handleGoWebconsole(data.id)}>
+                Webconsole
+              </auth-button>
+            </OperationBtnStatusTips>,
             <OperationBtnStatusTips
               v-db-console="redis.clusterManage.backup"
               data={data}
@@ -1308,6 +1323,15 @@
     deleteKeyState.data = _.cloneDeep(data);
   };
 
+  const handleGoWebconsole = (clusterId: number) => {
+    router.push({
+      name: 'RedisWebconsole',
+      query: {
+        clusterId
+      }
+    });
+  }
+
   const handleShowBackup = (data: RedisModel[] = []) => {
     if (
       data.some(item => item.operations.length > 0
diff --git a/dbm-ui/frontend/src/views/redis/routes.ts b/dbm-ui/frontend/src/views/redis/routes.ts
index a958d47e1b..aaa726a607 100644
--- a/dbm-ui/frontend/src/views/redis/routes.ts
+++ b/dbm-ui/frontend/src/views/redis/routes.ts
@@ -28,7 +28,7 @@ const redisCapacityChangeRoute = {
     navName: t('集群容量变更'),
   },
   component: () => import('@views/redis/capacity-change/Index.vue'),
-}
+};
 
 const redisProxyScaleUpRoute = {
   name: 'RedisProxyScaleUp',
@@ -37,7 +37,7 @@ const redisProxyScaleUpRoute = {
     navName: t('扩容接入层'),
   },
   component: () => import('@views/redis/proxy-scale-up/Index.vue'),
-}
+};
 
 const redisProxyScaleDownRoute = {
   name: 'RedisProxyScaleDown',
@@ -46,7 +46,7 @@ const redisProxyScaleDownRoute = {
     navName: t('缩容接入层'),
   },
   component: () => import('@views/redis/proxy-scale-down/Index.vue'),
-}
+};
 
 const redisDBCreateSlaveRoute = {
   name: 'RedisDBCreateSlave',
@@ -55,7 +55,7 @@ const redisDBCreateSlaveRoute = {
     navName: t('重建从库'),
   },
   component: () => import('@views/redis/db-create-slave/Index.vue'),
-}
+};
 
 const redisMasterFailoverRoute = {
   name: 'RedisMasterFailover',
@@ -64,7 +64,7 @@ const redisMasterFailoverRoute = {
     navName: t('主从切换'),
   },
   component: () => import('@views/redis/master-failover/Index.vue'),
-}
+};
 
 const redisDBReplaceRoute = {
   name: 'RedisDBReplace',
@@ -73,7 +73,7 @@ const redisDBReplaceRoute = {
     navName: t('整机替换'),
   },
   component: () => import('@views/redis/db-replace/Index.vue'),
-}
+};
 
 const redisClusterShardUpdateRoute = {
   name: 'RedisClusterShardUpdate',
@@ -82,7 +82,7 @@ const redisClusterShardUpdateRoute = {
     navName: t('集群分片变更'),
   },
   component: () => import('@views/redis/cluster-shard-update/Index.vue'),
-}
+};
 
 const redisClusterTypeUpdateRoute = {
   name: 'RedisClusterTypeUpdate',
@@ -91,7 +91,7 @@ const redisClusterTypeUpdateRoute = {
     navName: t('集群类型变更'),
   },
   component: () => import('@views/redis/cluster-type-update/Index.vue'),
-}
+};
 
 const redisDBStructureRoute = {
   name: 'RedisDBStructure',
@@ -100,7 +100,7 @@ const redisDBStructureRoute = {
     navName: t('定点构造'),
   },
   component: () => import('@views/redis/db-structure/Index.vue'),
-}
+};
 
 const redisStructureInstanceRoute = {
   name: 'RedisStructureInstance',
@@ -109,7 +109,7 @@ const redisStructureInstanceRoute = {
     navName: t('构造实例'),
   },
   component: () => import('@views/redis/structure-instance/Index.vue'),
-}
+};
 
 const redisRecoverFromInstanceRoute = {
   name: 'RedisRecoverFromInstance',
@@ -118,7 +118,7 @@ const redisRecoverFromInstanceRoute = {
     navName: t('以构造实例恢复'),
   },
   component: () => import('@views/redis/recover-from-instance/Index.vue'),
-}
+};
 
 const redisDBDataCopyRoute = {
   name: 'RedisDBDataCopy',
@@ -127,7 +127,7 @@ const redisDBDataCopyRoute = {
     navName: t('数据复制'),
   },
   component: () => import('@views/redis/db-data-copy/Index.vue'),
-}
+};
 
 const redisDBDataCopyRecordRoute = {
   name: 'RedisDBDataCopyRecord',
@@ -136,7 +136,7 @@ const redisDBDataCopyRecordRoute = {
     navName: t('数据复制记录'),
   },
   component: () => import('@views/redis/db-data-copy-record/Index.vue'),
-}
+};
 
 const redisVersionUpgradeRoute = {
   name: 'RedisVersionUpgrade',
@@ -145,7 +145,16 @@ const redisVersionUpgradeRoute = {
     navName: t('版本升级'),
   },
   component: () => import('@views/redis/version-upgrade/Index.vue'),
-}
+};
+
+const redisWebconsoleRoute = {
+  name: 'RedisWebconsole',
+  path: 'webconsole',
+  meta: {
+    navName: 'Webconsole',
+  },
+  component: () => import('@views/redis/webconsole/Index.vue'),
+};
 
 const toolboxDbConsoleRouteMap = {
   'redis.toolbox.capacityChange': redisCapacityChangeRoute,
@@ -162,7 +171,8 @@ const toolboxDbConsoleRouteMap = {
   'redis.toolbox.recoverFromInstance': redisRecoverFromInstanceRoute,
   'redis.toolbox.dataCopy': redisDBDataCopyRoute,
   'redis.toolbox.dataCopyRecord': redisDBDataCopyRecordRoute,
-}
+  'redis.toolbox.webconsole': redisWebconsoleRoute,
+};
 
 const toolboxRoutes = [
   {
@@ -196,7 +206,7 @@ const redisInstanceListRoute = {
     fullscreen: true,
   },
   component: () => import('@views/redis/instance-list/Index.vue'),
-}
+};
 
 const redisHaInstanceListRoute = {
   name: 'DatabaseRedisHaInstanceList',
@@ -206,7 +216,7 @@ const redisHaInstanceListRoute = {
     fullscreen: true,
   },
   component: () => import('@views/redis/instance-list-ha/Index.vue'),
-}
+};
 
 const redisDatabaseHaList = {
   name: 'DatabaseRedisHaList',
@@ -244,7 +254,7 @@ const routes: RouteRecordRaw[] = [
 ];
 
 export default function getRoutes(funControllerData: FunctionControllModel) {
-  const controller = funControllerData.getFlatData<RedisFunctions, 'redis'>('redis')
+  const controller = funControllerData.getFlatData<RedisFunctions, 'redis'>('redis');
 
   if (controller.redis !== true) {
     return [];
@@ -273,13 +283,13 @@ export default function getRoutes(funControllerData: FunctionControllModel) {
       if (!funControllerData[dbConsoleValue] || funControllerData[dbConsoleValue].is_enabled) {
         toolboxRoutes[0].children!.push(routeItem);
         if (routeItem.name === 'RedisCapacityChange') {
-          toolboxRoutes[0].redirect!.name = 'RedisCapacityChange'
+          toolboxRoutes[0].redirect!.name = 'RedisCapacityChange';
         }
       }
     });
 
     if (!toolboxRoutes[0].redirect!.name) {
-      toolboxRoutes[0].redirect!.name = toolboxRoutes[0].children![0]?.name as string ?? '';
+      toolboxRoutes[0].redirect!.name = (toolboxRoutes[0].children![0]?.name as string) ?? '';
     }
     routes[0].children?.push(...toolboxRoutes);
   }
diff --git a/dbm-ui/frontend/src/views/redis/toolbox-menu.ts b/dbm-ui/frontend/src/views/redis/toolbox-menu.ts
index 3c3140186e..eace25a4d4 100644
--- a/dbm-ui/frontend/src/views/redis/toolbox-menu.ts
+++ b/dbm-ui/frontend/src/views/redis/toolbox-menu.ts
@@ -108,6 +108,19 @@ export default [
           },
         ],
       },
+      {
+        name: t('数据查询'),
+        id: 'redis_data_query',
+        icon: 'db-icon-search',
+        children: [
+          {
+            name: 'Webconsole',
+            id: 'RedisWebconsole',
+            parentId: 'redis_data_query',
+            dbConsoleValue: 'redis.toolbox.webconsole',
+          },
+        ],
+      },
     ],
   },
   {
diff --git a/dbm-ui/frontend/src/views/redis/webconsole/Index.vue b/dbm-ui/frontend/src/views/redis/webconsole/Index.vue
new file mode 100644
index 0000000000..df2aef1681
--- /dev/null
+++ b/dbm-ui/frontend/src/views/redis/webconsole/Index.vue
@@ -0,0 +1,8 @@
+<template>
+  <WebConsole :db-type="DBTypes.REDIS" />
+</template>
+<script setup lang="ts">
+  import { DBTypes } from '@common/const';
+
+  import WebConsole from '@components/webconsole/Index.vue';
+</script>
diff --git a/dbm-ui/frontend/src/views/spider-manage/list/components/list/Index.vue b/dbm-ui/frontend/src/views/spider-manage/list/components/list/Index.vue
index f912299759..6f50a86e06 100644
--- a/dbm-ui/frontend/src/views/spider-manage/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/spider-manage/list/components/list/Index.vue
@@ -895,6 +895,20 @@
       render: ({ data }: IColumn) => {
         const getOperations = (theme = 'primary') => {
           const operations = [
+            <OperationBtnStatusTips data={data}>
+              <auth-button
+                v-db-console="tendbCluster.clusterManage.webconsole"
+                action-id="tendbcluster_webconsole"
+                resource={data.id}
+                permission={data.permission.tendbcluster_webconsole}
+                disabled={data.operationDisabled}
+                text
+                theme="primary"
+                class="mr-8"
+                onClick={() => handleGoWebconsole(data.id)}>
+                Webconsole
+              </auth-button>
+            </OperationBtnStatusTips>,
             <OperationBtnStatusTips data={data}>
               <auth-button
                 text
@@ -1242,6 +1256,15 @@
     operationData.value = data;
   };
 
+  const handleGoWebconsole = (clusterId: number) => {
+    router.push({
+      name: 'SpiderWebconsole',
+      query: {
+        clusterId
+      }
+    });
+  }
+
   // 下架运维节点
   const handleRemoveMNT = (data: TendbClusterModel) => {
     InfoBox({
diff --git a/dbm-ui/frontend/src/views/spider-manage/routes.ts b/dbm-ui/frontend/src/views/spider-manage/routes.ts
index ceccd03ebd..972f60c422 100644
--- a/dbm-ui/frontend/src/views/spider-manage/routes.ts
+++ b/dbm-ui/frontend/src/views/spider-manage/routes.ts
@@ -28,7 +28,7 @@ const spiderSqlExecuteRoute = {
     navName: t('SQL变更执行'),
   },
   component: () => import('@views/spider-manage/sql-execute/Index.vue'),
-}
+};
 
 const spiderDbRenameRoute = {
   path: 'db-rename/:page?',
@@ -37,7 +37,7 @@ const spiderDbRenameRoute = {
     navName: t('DB 重命名'),
   },
   component: () => import('@views/spider-manage/db-rename/Index.vue'),
-}
+};
 
 const spiderMasterSlaveSwapRoute = {
   path: 'master-slave-swap/:page?',
@@ -46,7 +46,7 @@ const spiderMasterSlaveSwapRoute = {
     navName: t('主从互切'),
   },
   component: () => import('@views/spider-manage/master-slave-swap/Index.vue'),
-}
+};
 
 const spiderMasterFailoverRoute = {
   path: 'master-failover/:page?',
@@ -55,7 +55,7 @@ const spiderMasterFailoverRoute = {
     navName: t('主库故障切换'),
   },
   component: () => import('@views/spider-manage/master-failover/Index.vue'),
-}
+};
 
 const spiderCapacityChangeRoute = {
   path: 'capacity-change/:page?',
@@ -64,7 +64,7 @@ const spiderCapacityChangeRoute = {
     navName: t('集群容量变更'),
   },
   component: () => import('@views/spider-manage/capacity-change/Index.vue'),
-}
+};
 
 const spiderProxyScaleUpRoute = {
   name: 'SpiderProxyScaleUp',
@@ -73,7 +73,7 @@ const spiderProxyScaleUpRoute = {
     navName: t('扩容接入层'),
   },
   component: () => import('@views/spider-manage/proxy-scale-up/Index.vue'),
-}
+};
 
 const spiderProxyScaleDownRoute = {
   name: 'SpiderProxyScaleDown',
@@ -82,7 +82,7 @@ const spiderProxyScaleDownRoute = {
     navName: t('缩容接入层'),
   },
   component: () => import('@views/spider-manage/proxy-scale-down/Index.vue'),
-}
+};
 
 const spiderProxySlaveApplyRoute = {
   name: 'SpiderProxySlaveApply',
@@ -91,7 +91,7 @@ const spiderProxySlaveApplyRoute = {
     navName: t('部署只读接入层'),
   },
   component: () => import('@views/spider-manage/proxy-slave-apply/Index.vue'),
-}
+};
 
 const spiderAddMntRoute = {
   path: 'add-mnt/:page?',
@@ -100,7 +100,7 @@ const spiderAddMntRoute = {
     navName: t('添加运维节点'),
   },
   component: () => import('@views/spider-manage/add-mnt/Index.vue'),
-}
+};
 
 const spiderDbTableBackupRoute = {
   path: 'db-table-backup/:page?',
@@ -109,7 +109,7 @@ const spiderDbTableBackupRoute = {
     navName: t('库表备份'),
   },
   component: () => import('@views/spider-manage/db-table-backup/Index.vue'),
-}
+};
 
 const spiderDbBackupRoute = {
   path: 'db-backup/:page?',
@@ -118,7 +118,7 @@ const spiderDbBackupRoute = {
     navName: t('全库备份'),
   },
   component: () => import('@views/spider-manage/db-backup/Index.vue'),
-}
+};
 
 const spiderFlashbackRoute = {
   path: 'flashback/:page?',
@@ -127,7 +127,7 @@ const spiderFlashbackRoute = {
     navName: t('闪回'),
   },
   component: () => import('@views/spider-manage/flashback/Index.vue'),
-}
+};
 
 const spiderRollbackRoute = {
   path: 'rollback/:page?',
@@ -136,7 +136,7 @@ const spiderRollbackRoute = {
     navName: t('定点构造'),
   },
   component: () => import('@views/spider-manage/rollback/Index.vue'),
-}
+};
 
 const spiderRollbackRecordRoute = {
   path: 'rollback-record',
@@ -145,7 +145,7 @@ const spiderRollbackRecordRoute = {
     navName: t('构造实例'),
   },
   component: () => import('@views/spider-manage/rollback-record/Index.vue'),
-}
+};
 
 const spiderDbClearRoute = {
   path: 'db-clear/:page?',
@@ -154,7 +154,7 @@ const spiderDbClearRoute = {
     navName: t('清档'),
   },
   component: () => import('@views/spider-manage/db-clear/Index.vue'),
-}
+};
 
 const spiderChecksumRoute = {
   path: 'checksum/:page?',
@@ -163,7 +163,7 @@ const spiderChecksumRoute = {
     navName: t('数据校验修复'),
   },
   component: () => import('@views/spider-manage/checksum/Index.vue'),
-}
+};
 
 const spiderPrivilegeCloneClientRoute = {
   path: 'privilege-clone-client/:page?',
@@ -172,7 +172,7 @@ const spiderPrivilegeCloneClientRoute = {
     navName: t('客户端权限克隆'),
   },
   component: () => import('@views/spider-manage/privilege-clone-client/Index.vue'),
-}
+};
 
 const spiderPrivilegeCloneInstRoute = {
   path: 'privilege-clone-inst/:page?',
@@ -181,7 +181,7 @@ const spiderPrivilegeCloneInstRoute = {
     navName: t('DB 实例权限克隆'),
   },
   component: () => import('@views/spider-manage/privilege-clone-inst/Index.vue'),
-}
+};
 
 const spiderOpenareaTemplateRoute = {
   path: 'openarea-template',
@@ -190,7 +190,7 @@ const spiderOpenareaTemplateRoute = {
     navName: t('开区模版'),
   },
   component: () => import('@views/spider-manage/openarea-template/Index.vue'),
-}
+};
 
 const spiderMasterSlaveCloneRoute = {
   path: 'master-slave-clone/:page?',
@@ -200,7 +200,7 @@ const spiderMasterSlaveCloneRoute = {
     activeMenu: 'spiderToolbox',
   },
   component: () => import('@views/spider-manage/master-slave-clone/Index.vue'),
-}
+};
 
 const spiderSlaveRebuildRoute = {
   path: 'slave-rebuild/:page?',
@@ -210,7 +210,16 @@ const spiderSlaveRebuildRoute = {
     activeMenu: 'spiderToolbox',
   },
   component: () => import('@views/spider-manage/slave-rebuild/Index.vue'),
-}
+};
+
+const spiderWebconsoleRoute = {
+  name: 'SpiderWebconsole',
+  path: 'webconsole',
+  meta: {
+    navName: 'Webconsole',
+  },
+  component: () => import('@views/spider-manage/webconsole/Index.vue'),
+};
 
 const toolboxDbConsoleRouteMap = {
   'tendbCluster.toolbox.sqlExecute': spiderSqlExecuteRoute,
@@ -234,7 +243,8 @@ const toolboxDbConsoleRouteMap = {
   'tendbCluster.toolbox.openareaTemplate': spiderOpenareaTemplateRoute,
   'tendbCluster.toolbox.slaveRebuild': spiderSlaveRebuildRoute,
   'tendbCluster.toolbox.masterSlaveClone': spiderMasterSlaveCloneRoute,
-}
+  'tendbCluster.toolbox.webconsole': spiderWebconsoleRoute,
+};
 
 const tendbClusterInstanceRoute = {
   name: 'tendbClusterInstance',
@@ -244,7 +254,7 @@ const tendbClusterInstanceRoute = {
     fullscreen: true,
   },
   component: () => import('@views/spider-manage/list-instance/Index.vue'),
-}
+};
 
 const spiderPartitionManageRoute = {
   path: 'partition-manage',
@@ -253,7 +263,7 @@ const spiderPartitionManageRoute = {
     navName: t('【TenDB Cluster】分区管理'),
   },
   component: () => import('@views/spider-manage/partition-manage/Index.vue'),
-}
+};
 
 const permissionManageRoutes = [
   {
@@ -280,7 +290,7 @@ const permissionManageRoutes = [
     },
     component: () => import('@views/whitelist/list/Index.vue'),
   },
-]
+];
 
 const spiderToolboxRoute = {
   path: 'toolbox',
@@ -294,7 +304,7 @@ const spiderToolboxRoute = {
   },
   component: () => import('@views/spider-manage/toolbox/Index.vue'),
   children: [] as RouteRecordRaw[],
-}
+};
 
 const renderRoutes = [
   {
@@ -362,15 +372,15 @@ export default function getRoutes(funControllerData: FunctionControllModel) {
       if (!funControllerData[dbConsoleValue] || funControllerData[dbConsoleValue].is_enabled) {
         spiderToolboxRoute.children!.push(routeItem);
         if (routeItem.name === 'spiderSqlExecute') {
-          spiderToolboxRoute.redirect!.name = 'spiderSqlExecute'
+          spiderToolboxRoute.redirect!.name = 'spiderSqlExecute';
         }
       }
     });
 
     if (!spiderToolboxRoute.redirect!.name) {
-      spiderToolboxRoute.redirect!.name = spiderToolboxRoute.children![0]?.name as string ?? '';
+      spiderToolboxRoute.redirect!.name = (spiderToolboxRoute.children![0]?.name as string) ?? '';
     }
-    
+
     renderRoutes[0].children.push(spiderToolboxRoute);
   }
 
diff --git a/dbm-ui/frontend/src/views/spider-manage/toolbox-menu.ts b/dbm-ui/frontend/src/views/spider-manage/toolbox-menu.ts
index 5faa38105c..fc01df5a44 100644
--- a/dbm-ui/frontend/src/views/spider-manage/toolbox-menu.ts
+++ b/dbm-ui/frontend/src/views/spider-manage/toolbox-menu.ts
@@ -210,4 +210,17 @@ export default [
       },
     ],
   },
+  {
+    name: t('数据查询'),
+    id: 'spider_data_query',
+    icon: 'db-icon-search',
+    children: [
+      {
+        name: 'Webconsole',
+        id: 'SpiderWebconsole',
+        parentId: 'spider_data_query',
+        dbConsoleValue: 'tendbCluster.toolbox.webconsole',
+      },
+    ],
+  },
 ];
diff --git a/dbm-ui/frontend/src/views/spider-manage/webconsole/Index.vue b/dbm-ui/frontend/src/views/spider-manage/webconsole/Index.vue
new file mode 100644
index 0000000000..bbe1eb1180
--- /dev/null
+++ b/dbm-ui/frontend/src/views/spider-manage/webconsole/Index.vue
@@ -0,0 +1,8 @@
+<template>
+  <WebConsole :db-type="DBTypes.TENDBCLUSTER" />
+</template>
+<script setup lang="ts">
+  import { DBTypes } from '@common/const';
+
+  import WebConsole from '@components/webconsole/Index.vue';
+</script>