diff --git a/mayfly_go_web/src/views/ops/component/TagMenu.vue b/mayfly_go_web/src/views/ops/component/TagMenu.vue
new file mode 100644
index 00000000..b4a2d332
--- /dev/null
+++ b/mayfly_go_web/src/views/ops/component/TagMenu.vue
@@ -0,0 +1,106 @@
+<template>
+    <div class="instances-box layout-aside">
+        <el-row type="flex" justify="space-between">
+            <el-col :span="24"
+                :style="{ maxHeight: instanceMenuMaxHeight, height: instanceMenuMaxHeight, overflow: 'auto' }"
+                class="el-scrollbar flex-auto">
+                <el-menu background-color="transparent" :collapse-transition="false">
+                    <!-- 第一级：tag -->
+                    <el-sub-menu v-for="tag of tags" :index="tag.tagPath" :key="tag.tagPath"
+                        @click.stop="clickTag(tag.tagPath)">
+                        <template #title>
+                            <el-icon>
+                                <FolderOpened v-if="opend[tag.tagPath]" color="#e6a23c" />
+                                <Folder v-else />
+                            </el-icon>
+                            <span>{{ tag.tagPath }}</span>
+                        </template>
+                        <slot :tag="tag" name="submenu"></slot>
+                    </el-sub-menu>
+                </el-menu>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, toRefs } from 'vue';
+
+const props = defineProps({
+    instanceMenuMaxHeight: {
+        type: [Number, String],
+    },
+    tags: {
+        type: Object, required: true
+    },
+})
+
+
+const state = reactive({
+    instanceMenuMaxHeight: props.instanceMenuMaxHeight,
+    tags: props.tags,
+    opend: {},
+})
+
+const {
+    opend,
+} = toRefs(state)
+
+const clickTag = (tagPath: string) => {
+    if (state.opend[tagPath] === undefined) {
+        state.opend[tagPath] = true;
+        return;
+    }
+    const opend = state.opend[tagPath]
+    state.opend[tagPath] = !opend
+}
+
+</script>
+
+<style lang="scss">
+.instances-box {
+    .el-menu {
+        width: 100%;
+    }
+
+    .el-sub-menu {
+        .checked {
+            .checked-schema {
+                color: var(--el-color-primary);
+            }
+        }
+    }
+
+    .el-sub-menu__title {
+        padding-left: 0 !important;
+        height: 30px !important;
+        line-height: 30px !important;
+    }
+
+    .el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-sub-menu__title {
+        padding-right: 10px;
+    }
+
+    .el-menu-item {
+        padding-left: 0 !important;
+        height: 20px !important;
+        line-height: 20px !important;
+    }
+
+    .el-icon {
+        margin: 0;
+    }
+
+    .el-sub-menu__icon-arrow {
+        top: inherit;
+        right: 10px;
+    }
+
+}
+
+.instances-pop-form {
+    .el-form-item {
+        margin-bottom: unset;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/mayfly_go_web/src/views/ops/db/SqlExec.vue b/mayfly_go_web/src/views/ops/db/SqlExec.vue
index 93e7c424..bf564773 100644
--- a/mayfly_go_web/src/views/ops/db/SqlExec.vue
+++ b/mayfly_go_web/src/views/ops/db/SqlExec.vue
@@ -219,7 +219,8 @@
                                     layout="prev, pager, next, total, jumper" v-model:current-page="dt.pageNum"
                                     :page-size="defalutLimit"></el-pagination>
                             </el-row>
-                            <div style=" font-size: 12px; padding: 0 10px; color: #606266"><span>{{ dt.sql }}</span></div>
+                            <div style=" font-size: 12px; padding: 0 10px; color: #606266"><span>{{ dt.sql }}</span>
+                            </div>
                         </el-tab-pane>
                     </el-tabs>
                 </el-container>
@@ -258,7 +259,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, onMounted, reactive, watch } from 'vue';
+import { computed, nextTick, onMounted, reactive } from 'vue';
 import { dbApi } from './api';
 
 import { format as sqlFormatter } from 'sql-formatter';
@@ -1754,14 +1755,14 @@ const loadSchemaTables = async (inst: any, schema: string, fn: Function) => {
     } else {
         tables.forEach((a: any) => a.show = true)
     }
-  fn(state.instances.tables[id+schema])
+    fn(state.instances.tables[id + schema])
 }
 
 // 选择数据库实例
 const changeInstance = (inst: any, fn?: Function) => {
     state.dbId = inst.id
     state.dbType = inst.type
-  fn && fn()
+    fn && fn()
 }
 // 选择数据库
 const changeSchema = (inst: any, schema: string) => {
diff --git a/mayfly_go_web/src/views/ops/db/component/InstanceTree.vue b/mayfly_go_web/src/views/ops/db/component/InstanceTree.vue
index e3a1ab21..7e1feeed 100644
--- a/mayfly_go_web/src/views/ops/db/component/InstanceTree.vue
+++ b/mayfly_go_web/src/views/ops/db/component/InstanceTree.vue
@@ -1,127 +1,114 @@
 <template>
-    <div class="instances-box layout-aside">
-        <el-row type="flex" justify="space-between">
-            <el-col :span="24" :style="{maxHeight: instanceMenuMaxHeight,height: instanceMenuMaxHeight, overflow:'auto'}" class="el-scrollbar flex-auto">
-                <el-menu background-color="transparent" ref="menuRef">
-                    <!-- 第一级：tag -->
-                    <el-sub-menu v-for="tag of instances.tags" :index="tag.tagPath" :key="tag.tagPath">
-                        <template #title>
-                            <el-icon>
-                                <FolderOpened color="#e6a23c" />
-                            </el-icon>
-                            <span>{{ tag.tagPath }}</span>
+    <tag-menu :instanceMenuMaxHeight="instanceMenuMaxHeight" :tags="instances.tags">
+        <template #submenu="props">
+            <!-- 第二级：数据库实例 -->
+            <el-sub-menu v-for="inst in instances.tree[props.tag.tagId]" :index="'instance-' + inst.id"
+                :key="'instance-' + inst.id" @click.stop="changeInstance(inst, () => { })">
+                <template #title>
+                    <el-popover placement="right-start" title="数据库实例信息" trigger="hover" :width="210">
+                        <template #reference>
+                            <span>&nbsp;&nbsp;<el-icon>
+                                    <MostlyCloudy color="#409eff" />
+                                </el-icon>{{ inst.name }}</span>
                         </template>
-                        <!-- 第二级：数据库实例 -->
-                        <el-sub-menu v-for="inst in instances.tree[tag.tagId]" :index="'instance-' + inst.id"
-                            :key="'instance-' + inst.id" @click="changeInstance(inst, ()=>{})">
+                        <template #default>
+                            <el-form class="instances-pop-form" label-width="55px" :size="'small'">
+                                <el-form-item label="类型:">{{ inst.type }}</el-form-item>
+                                <el-form-item label="链接:">{{ inst.host }}:{{ inst.port }}</el-form-item>
+                                <el-form-item label="用户:">{{ inst.username }}</el-form-item>
+                                <el-form-item v-if="inst.remark" label="备注:">{{
+                                    inst.remark
+                                }}</el-form-item>
+                            </el-form>
+                        </template>
+                    </el-popover>
+                </template>
+                <!-- 第三级：数据库 -->
+                <el-sub-menu v-for="schema in instances.dbs[inst.id]" :index="inst.id + schema" :key="inst.id + schema"
+                    :class="state.nowSchema === (inst.id + schema) && 'checked'"
+                    @click.stop="changeSchema(inst, schema)">
+                    <template #title>
+                        &nbsp;&nbsp;&nbsp;&nbsp;<el-icon>
+                            <Coin color="#67c23a" />
+                        </el-icon>
+                        <span class="checked-schema">{{ schema }}</span>
+                    </template>
+                    <!-- 第四级 01：表 -->
+                    <el-sub-menu :index="inst.id + schema + '-table'">
+                        <template #title>
+                            <div style="width: 100%" @click="loadTableNames(inst, schema, () => { })">
+                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-icon>
+                                    <Calendar color="#409eff" />
+                                </el-icon>
+                                <span>表</span>
+                                <el-icon v-show="state.loading[inst.id + schema]" class="is-loading">
+                                    <Loading />
+                                </el-icon>
+                            </div>
+                        </template>
+                        <el-menu-item :index="inst.id + schema + '-tableSearch'"
+                            :key="inst.id + schema + '-tableSearch'">
                             <template #title>
-                                <el-popover placement="right-start" title="数据库实例信息" trigger="hover" :width="210">
-                                    <template #reference>
-                                        <span>&nbsp;&nbsp;<el-icon>
-                                                <MostlyCloudy color="#409eff" />
-                                            </el-icon>{{ inst.name }}</span>
-                                    </template>
-                                    <template #default>
-                                        <el-form class="instances-pop-form" label-width="55px" :size="'small'">
-                                            <el-form-item label="类型:">{{ inst.type }}</el-form-item>
-                                            <el-form-item label="链接:">{{ inst.host }}:{{ inst.port }}</el-form-item>
-                                            <el-form-item label="用户:">{{ inst.username }}</el-form-item>
-                                            <el-form-item v-if="inst.remark" label="备注:">{{
-                                                inst.remark
-                                            }}</el-form-item>
-                                        </el-form>
-                                    </template>
-                                </el-popover>
+                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                                <el-input size="small" placeholder="过滤表" clearable
+                                    @change="filterTableName(inst.id, schema)"
+                                    @keyup="(e: any) => filterTableName(inst.id, schema, e)"
+                                    v-model="state.filterParam[inst.id + schema]" />
                             </template>
-                            <!-- 第三级：数据库 -->
-                            <el-sub-menu v-for="schema in instances.dbs[inst.id]" :index="inst.id + schema"
-                                :key="inst.id + schema" :class="state.nowSchema === (inst.id + schema) && 'checked'"
-                                @click="changeSchema(inst, schema)">
+                        </el-menu-item>
+
+                        <template v-for="tb in instances.tables[inst.id + schema]">
+                            <el-menu-item :index="inst.id + schema + tb.tableName"
+                                :key="inst.id + schema + tb.tableName" v-if="tb.show"
+                                @click="loadTableData(inst, schema, tb.tableName)">
                                 <template #title>
-                                    &nbsp;&nbsp;&nbsp;&nbsp;<el-icon>
-                                        <Coin color="#67c23a" />
-                                    </el-icon>
-                                    <span class="checked-schema">{{ schema }}</span>
-                                </template>
-                                <!-- 第四级 01：表 -->
-                                <el-sub-menu :index="inst.id + schema + '-table'">
-                                    <template #title>
-                                        <div style="width: 100%" @click="loadTableNames(inst, schema, ()=>{})">
-                                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-icon>
-                                              <Calendar color="#409eff"/>
-                                            </el-icon>
-                                            <span>表</span>
-                                            <el-icon v-show="state.loading[inst.id + schema]" class="is-loading">
-                                                <Loading />
-                                            </el-icon>
-                                        </div>
-                                    </template>
-                                    <el-menu-item :index="inst.id + schema + '-tableSearch'"
-                                        :key="inst.id + schema + '-tableSearch'">
-                                        <template #title>
-                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                                            <el-input size="small" placeholder="过滤表" clearable
-                                                @change="filterTableName(inst.id, schema)"
-                                                @keyup="(e: any) => filterTableName(inst.id, schema, e)"
-                                                v-model="state.filterParam[inst.id + schema]" />
-                                        </template>
-                                    </el-menu-item>
-
-                                    <template v-for="tb in instances.tables[inst.id + schema]">
-                                        <el-menu-item :index="inst.id + schema + tb.tableName"
-                                            :key="inst.id + schema + tb.tableName" v-if="tb.show"
-                                            @click="loadTableData(inst, schema, tb.tableName)">
-                                            <template #title>
-                                                <div style="width: 100%">
-                                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-icon>
-                                                        <Calendar color="#409eff" />
-                                                    </el-icon>
-                                                    <el-tooltip v-if="tb.tableComment" effect="customized"
-                                                        :content="tb.tableComment" placement="right">
-                                                        {{ tb.tableName }}
-                                                    </el-tooltip>
-                                                    <span v-else>{{ tb.tableName }}</span>
-                                                </div>
-                                            </template>
-                                        </el-menu-item>
-                                    </template>
-                                </el-sub-menu>
-                                <!-- 第四级 02：sql -->
-                                <el-sub-menu :index="inst.id + schema + '-sql'">
-                                    <template #title>
-                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-icon>
-                                            <List color="#f56c6c" />
+                                    <div style="width: 100%">
+                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-icon>
+                                            <Calendar color="#409eff" />
                                         </el-icon>
-                                        <span>sql</span>
-                                    </template>
-
-                                    <template v-for="sql in instances.sqls[inst.id + schema]">
-                                        <el-menu-item :index="inst.id + schema + sql.name"
-                                            :key="inst.id + schema + sql.name" v-if="sql.show"
-                                            @click="loadSql(inst, schema, sql.name)">
-                                            <template #title>
-                                                <div style="width: 100%">
-                                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-icon>
-                                                        <Calendar color="#409eff" />
-                                                    </el-icon>
-                                                    <span>{{ sql.name }}</span>
-                                                </div>
-                                            </template>
-                                        </el-menu-item>
-                                    </template>
-                                </el-sub-menu>
-                            </el-sub-menu>
-                        </el-sub-menu>
+                                        <el-tooltip v-if="tb.tableComment" effect="customized"
+                                            :content="tb.tableComment" placement="right">
+                                            {{ tb.tableName }}
+                                        </el-tooltip>
+                                        <span v-else>{{ tb.tableName }}</span>
+                                    </div>
+                                </template>
+                            </el-menu-item>
+                        </template>
                     </el-sub-menu>
-                </el-menu>
-            </el-col>
-        </el-row>
-    </div>
+                    <!-- 第四级 02：sql -->
+                    <el-sub-menu :index="inst.id + schema + '-sql'">
+                        <template #title>
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-icon>
+                                <List color="#f56c6c" />
+                            </el-icon>
+                            <span>sql</span>
+                        </template>
+
+                        <template v-for="sql in instances.sqls[inst.id + schema]">
+                            <el-menu-item :index="inst.id + schema + sql.name" :key="inst.id + schema + sql.name"
+                                v-if="sql.show" @click="loadSql(inst, schema, sql.name)">
+                                <template #title>
+                                    <div style="width: 100%">
+                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-icon>
+                                            <Calendar color="#409eff" />
+                                        </el-icon>
+                                        <span>{{ sql.name }}</span>
+                                    </div>
+                                </template>
+                            </el-menu-item>
+                        </template>
+                    </el-sub-menu>
+                </el-sub-menu>
+            </el-sub-menu>
+        </template>
+    </tag-menu>
 </template>
 
 <script lang="ts" setup>
-import {nextTick, onBeforeMount, onMounted, reactive, ref, Ref, watch} from 'vue';
-import {store} from '@/store';
+import { nextTick, onBeforeMount, onMounted, reactive, ref, Ref, watch } from 'vue';
+import { store } from '@/store';
+import TagMenu from '../../component/TagMenu.vue';
 
 const props = defineProps({
     instanceMenuMaxHeight: {
@@ -158,8 +145,8 @@ const initLoadInstances = () => {
  * @param inst 选中的实例对象
  * @param fn 选中的实例对象后的回调函数
  */
-const changeInstance = (inst : any, fn: Function) => {
-  emits('changeInstance', inst, fn)
+const changeInstance = (inst: any, fn: Function) => {
+    emits('changeInstance', inst, fn)
 }
 /**
  * 改变选中的数据库schema
@@ -178,9 +165,9 @@ const changeSchema = (inst: any, schema: string) => {
  */
 const loadTableNames = async (inst: any, schema: string, fn: Function) => {
     state.loading[inst.id + schema] = true
-  await emits('loadTableNames', inst, schema, (res: any[])=>{
+    await emits('loadTableNames', inst, schema, (res: any[]) => {
         state.loading[inst.id + schema] = false
-    fn && fn(res)
+        fn && fn(res)
     })
 }
 /**
@@ -206,81 +193,41 @@ const filterTableName = (instId: number, schema: string, event?: any) => {
 }
 
 const selectDb = async (val?: any) => {
-  let info = val || store.state.sqlExecInfo.dbOptInfo;
-  if (info && info.dbId) {
-    const {tagPath, dbId, db} = info
-    menuRef.value.open(tagPath);
-    menuRef.value.open('instance-' + dbId);
-    await changeInstance({id: dbId}, () => {
-      // 加载数据库
-      nextTick(async () => {
-        menuRef.value.open(dbId + db)
-        state.nowSchema = (dbId+db)
-        // 加载集合列表
-        await nextTick(async () => {
-          await loadTableNames({id: dbId}, db, (res: any[]) => {
-            // 展开集合列表
-            menuRef.value.open(dbId + db + '-table')
-            console.log(res)
-          })
+    let info = val || store.state.sqlExecInfo.dbOptInfo;
+    if (info && info.dbId) {
+        const { tagPath, dbId, db } = info
+        menuRef.value.open(tagPath);
+        menuRef.value.open('instance-' + dbId);
+        await changeInstance({ id: dbId }, () => {
+            // 加载数据库
+            nextTick(async () => {
+                menuRef.value.open(dbId + db)
+                state.nowSchema = (dbId + db)
+                // 加载集合列表
+                await nextTick(async () => {
+                    await loadTableNames({ id: dbId }, db, (res: any[]) => {
+                        // 展开集合列表
+                        menuRef.value.open(dbId + db + '-table')
+                        console.log(res)
+                    })
+                })
+            })
         })
-      })
-    })
-  }
+    }
 }
 
-onMounted(()=>{
-  selectDb();
+onMounted(() => {
+    selectDb();
 })
 
-watch(()=>store.state.sqlExecInfo.dbOptInfo, async newValue => {
-  await selectDb(newValue)
+watch(() => store.state.sqlExecInfo.dbOptInfo, async newValue => {
+    await selectDb(newValue)
 })
 
 
 </script>
 
 <style lang="scss">
-.instances-box {
-    .el-menu {
-        width: 100%;
-    }
-
-    .el-sub-menu {
-        .checked {
-            .checked-schema {
-                color: var(--el-color-primary);
-            }
-        }
-    }
-
-    .el-sub-menu__title {
-        padding-left: 0 !important;
-        height: 30px !important;
-        line-height: 30px !important;
-    }
-
-    .el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-sub-menu__title {
-        padding-right: 10px;
-    }
-
-    .el-menu-item {
-        padding-left: 0 !important;
-        height: 20px !important;
-        line-height: 20px !important;
-    }
-
-    .el-icon {
-        margin: 0;
-    }
-
-    .el-sub-menu__icon-arrow {
-        top: inherit;
-        right: 10px;
-    }
-
-}
-
 .instances-pop-form {
     .el-form-item {
         margin-bottom: unset;
diff --git a/mayfly_go_web/src/views/ops/mongo/MongoInstanceTree.vue b/mayfly_go_web/src/views/ops/mongo/MongoInstanceTree.vue
index e6e06922..a42b9d40 100644
--- a/mayfly_go_web/src/views/ops/mongo/MongoInstanceTree.vue
+++ b/mayfly_go_web/src/views/ops/mongo/MongoInstanceTree.vue
@@ -1,109 +1,88 @@
 <template>
-    <div class="instances-box layout-aside">
-        <el-row type="flex" justify="space-between">
-            <el-col :span="24" :style="{
-                maxHeight: state.instanceMenuMaxHeight,
-                height: state.instanceMenuMaxHeight,
-                overflow: 'auto'
-            }" class="el-scrollbar flex-auto">
-
-        <el-menu background-color="transparent" ref="menuRef">
-                    <!-- 第一级：tag -->
-                    <el-sub-menu v-for="tag of instances.tags" :index="tag.tagPath" :key="tag.tagPath">
-                        <template #title>
-                            <el-icon>
-                                <FolderOpened color="#e6a23c" />
-                            </el-icon>
-                            <span>{{ tag.tagPath }}</span>
+    <tag-menu :instanceMenuMaxHeight="state.instanceMenuMaxHeight" :tags="instances.tags">
+        <template #submenu="props">
+            <el-sub-menu v-for="inst in instances.tree[props.tag.tagId]" :index="'mongo-instance-' + inst.id"
+                :key="'mongo-instance-' + inst.id" @click.stop="changeInstance(inst, () => { })">
+                <template #title>
+                    <el-popover placement="right-start" title="mongo数据库实例信息" trigger="hover" :width="210">
+                        <template #reference>
+                            <span>&nbsp;&nbsp;<el-icon>
+                                    <MostlyCloudy color="#409eff" />
+                                </el-icon>{{ inst.name }}</span>
                         </template>
-                        <!-- 第二级：数据库实例 -->
-                        <el-sub-menu v-for="inst in instances.tree[tag.tagId]"
-                                     :index="'mongo-instance-' + inst.id"
-                                     :key="'mongo-instance-' + inst.id"
-                                     @click.prevent="changeInstance(inst, ()=>{})"
-                        >
+                        <template #default>
+                            <el-form class="instances-pop-form" label-width="55px" :size="'small'">
+                                <el-form-item label="名称:">{{ inst.name }}</el-form-item>
+                                <el-form-item label="链接:">{{ inst.uri }}</el-form-item>
+                            </el-form>
+                        </template>
+                    </el-popover>
+                </template>
+                <!-- 第三级：数据库 -->
+                <el-sub-menu v-for="db in instances.dbs[inst.id]" :index="inst.id + db.Name" :key="inst.id + db.Name"
+                    :class="state.nowSchema === (inst.id + db.Name) && 'checked'"
+                    @click.stop="changeSchema(inst, db.Name)">
+                    <template #title>
+                        &nbsp;&nbsp;&nbsp;&nbsp;<el-icon>
+                            <Coin color="#67c23a" />
+                        </el-icon>
+                        <span class="checked-schema">
+                            {{ db.Name }}
+                            <span style="color: #8492a6;font-size: 13px">[{{
+                                formatByteSize(db.SizeOnDisk)
+                            }}]</span>
+                        </span>
+                    </template>
+                    <!-- 第四级 01：表 -->
+                    <el-sub-menu :index="inst.id + db.Name + '-table'">
+                        <template #title>
+                            <div style="width: 100%" @click="loadTableNames(inst, db.Name, () => { })">
+                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-icon>
+                                    <Calendar color="#409eff" />
+                                </el-icon>
+                                <span>集合</span>
+                                <el-icon v-show="state.loading[inst.id + db.Name]" class="is-loading">
+                                    <Loading />
+                                </el-icon>
+                            </div>
+                        </template>
+                        <el-menu-item :index="inst.id + db.Name + '-tableSearch'"
+                            :key="inst.id + db.Name + '-tableSearch'">
                             <template #title>
-                                <el-popover placement="right-start" title="mongo数据库实例信息" trigger="hover" :width="210">
-                                    <template #reference>
-                                        <span>&nbsp;&nbsp;<el-icon>
-                                                <MostlyCloudy color="#409eff" />
-                                            </el-icon>{{ inst.name }}</span>
-                                    </template>
-                                    <template #default>
-                                        <el-form class="instances-pop-form" label-width="55px" :size="'small'">
-                                            <el-form-item label="名称:">{{ inst.name }}</el-form-item>
-                                            <el-form-item label="链接:">{{ inst.uri }}</el-form-item>
-                                        </el-form>
-                                    </template>
-                                </el-popover>
+                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                                <el-input size="small" placeholder="过滤" clearable
+                                    @change="filterTableName(inst.id, db.Name)"
+                                    @keyup="(e: any) => filterTableName(inst.id, db.Name, e)"
+                                    v-model="state.filterParam[inst.id + db.Name]" />
                             </template>
-                            <!-- 第三级：数据库 -->
-                            <el-sub-menu v-for="db in instances.dbs[inst.id]" :index="inst.id + db.Name"
-                                :key="inst.id + db.Name" :class="state.nowSchema === (inst.id + db.Name) && 'checked'"
-                                @click.prevent="changeSchema(inst, db.Name)">
-                                <template #title>
-                                    &nbsp;&nbsp;&nbsp;&nbsp;<el-icon>
-                                        <Coin color="#67c23a" />
-                                    </el-icon>
-                                    <span class="checked-schema">
-                                        {{ db.Name }}
-                                        <span style="color: #8492a6;font-size: 13px">[{{
-                                            formatByteSize(db.SizeOnDisk)
-                                        }}]</span>
-                                    </span>
-                                </template>
-                                <!-- 第四级 01：表 -->
-                                <el-sub-menu :index="inst.id + db.Name + '-table'">
-                                    <template #title>
-                                        <div style="width: 100%" @click="loadTableNames(inst, db.Name, ()=>{})">
-                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-icon>
-                                                <Calendar color="#409eff"/>
-                                            </el-icon>
-                                            <span>集合</span>
-                                            <el-icon v-show="state.loading[inst.id + db.Name]" class="is-loading">
-                                                <Loading />
-                                            </el-icon>
-                                        </div>
-                                    </template>
-                                    <el-menu-item :index="inst.id + db.Name + '-tableSearch'"
-                                        :key="inst.id + db.Name + '-tableSearch'">
-                                        <template #title>
-                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                                            <el-input size="small" placeholder="过滤" clearable
-                                                @change="filterTableName(inst.id, db.Name)"
-                                                @keyup="(e: any) => filterTableName(inst.id, db.Name, e)"
-                                                v-model="state.filterParam[inst.id + db.Name]" />
-                                        </template>
-                                    </el-menu-item>
+                        </el-menu-item>
 
-                                    <template v-for="tb in instances.tables[inst.id + db.Name]">
-                                        <el-menu-item :index="inst.id + db.Name + tb.tableName"
-                                            :key="inst.id + db.Name + tb.tableName" v-if="tb.show"
-                                            @click="loadTableData(inst, db.Name, tb.tableName)">
-                                            <template #title>
-                                                <div style="width: 100%">
-                                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-icon>
-                                                        <Calendar color="#409eff" />
-                                                    </el-icon>
-                                                    <span :title="tb.tableComment || ''">{{ tb.tableName }}</span>
-                                                </div>
-                                            </template>
-                                        </el-menu-item>
-                                    </template>
-                                </el-sub-menu>
-                            </el-sub-menu>
-                        </el-sub-menu>
+                        <template v-for="tb in instances.tables[inst.id + db.Name]">
+                            <el-menu-item :index="inst.id + db.Name + tb.tableName"
+                                :key="inst.id + db.Name + tb.tableName" v-if="tb.show"
+                                @click="loadTableData(inst, db.Name, tb.tableName)">
+                                <template #title>
+                                    <div style="width: 100%">
+                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-icon>
+                                            <Calendar color="#409eff" />
+                                        </el-icon>
+                                        <span :title="tb.tableComment || ''">{{ tb.tableName }}</span>
+                                    </div>
+                                </template>
+                            </el-menu-item>
+                        </template>
                     </el-sub-menu>
-                </el-menu>
-            </el-col>
-        </el-row>
-    </div>
+                </el-sub-menu>
+            </el-sub-menu>
+        </template>
+    </tag-menu>
 </template>
 
 <script lang="ts" setup>
-import {nextTick, onBeforeMount, onMounted, reactive, ref, Ref, watch} from 'vue';
+import { nextTick, onBeforeMount, onMounted, reactive, ref, Ref, watch } from 'vue';
 import { formatByteSize } from '@/common/utils/format';
-import {store} from '@/store';
+import { store } from '@/store';
+import TagMenu from '../component/TagMenu.vue';
 
 const props = defineProps({
     instances: {
@@ -119,7 +98,7 @@ onBeforeMount(async () => {
 })
 
 const setHeight = () => {
-    state.instanceMenuMaxHeight = window.innerHeight - 140 + 'px';
+    state.instanceMenuMaxHeight = window.innerHeight - 115 + 'px';
 }
 
 const menuRef = ref(null) as Ref
@@ -144,8 +123,8 @@ const initLoadInstances = () => {
  * @param inst 选中的实例对象
  * @param fn 选中的实例对象后的回调事件
  */
-const changeInstance = (inst : any, fn: Function) => {
-  emits('changeInstance', inst, fn)
+const changeInstance = (inst: any, fn: Function) => {
+    emits('changeInstance', inst, fn)
 }
 /**
  * 改变选中的数据库schema
@@ -164,7 +143,7 @@ const changeSchema = (inst: any, schema: string) => {
  */
 const loadTableNames = async (inst: any, schema: string, fn: Function) => {
     state.loading[inst.id + schema] = true
-    await emits('loadTableNames', inst, schema, (res: any)=>{
+    await emits('loadTableNames', inst, schema, (res: any) => {
         state.loading[inst.id + schema] = false
         fn && fn(res)
     })
@@ -192,80 +171,40 @@ const filterTableName = (instId: number, schema: string, event?: any) => {
 }
 
 const selectDb = async (val?: any) => {
-  let info = val || store.state.mongoDbOptInfo.dbOptInfo;
-  if (info && info.dbId) {
-    const {tagPath, dbId, db} = info
-    menuRef.value.open(tagPath);
-    menuRef.value.open('mongo-instance-' + dbId);
-    await changeInstance({id: dbId}, () => {
-      // 加载数据库
-      nextTick(async () => {
-        menuRef.value.open(dbId + db)
-        // 加载集合列表
-        await nextTick(async () => {
-          await loadTableNames({id: dbId}, db, (res: any[]) => {
-            // 展开集合列表
-            menuRef.value.open(dbId + db + '-table')
-            // 加载第一张集合数据
-            loadTableData({id: dbId}, db, res[0].tableName)
-          })
+    let info = val || store.state.mongoDbOptInfo.dbOptInfo;
+    if (info && info.dbId) {
+        const { tagPath, dbId, db } = info
+        menuRef.value.open(tagPath);
+        menuRef.value.open('mongo-instance-' + dbId);
+        await changeInstance({ id: dbId }, () => {
+            // 加载数据库
+            nextTick(async () => {
+                menuRef.value.open(dbId + db)
+                // 加载集合列表
+                await nextTick(async () => {
+                    await loadTableNames({ id: dbId }, db, (res: any[]) => {
+                        // 展开集合列表
+                        menuRef.value.open(dbId + db + '-table')
+                        // 加载第一张集合数据
+                        loadTableData({ id: dbId }, db, res[0].tableName)
+                    })
+                })
+            })
         })
-      })
-    })
-  }
+    }
 }
 
-onMounted(()=>{
-  selectDb();
+onMounted(() => {
+    selectDb();
 })
 
-watch(()=>store.state.mongoDbOptInfo.dbOptInfo, async newValue => {
-  await selectDb(newValue)
+watch(() => store.state.mongoDbOptInfo.dbOptInfo, async newValue => {
+    await selectDb(newValue)
 })
 
 </script>
 
 <style lang="scss">
-.instances-box {
-    .el-menu {
-        width: 100%;
-    }
-
-    .el-sub-menu {
-        .checked {
-            .checked-schema {
-                color: var(--el-color-primary);
-            }
-        }
-    }
-
-    .el-sub-menu__title {
-        padding-left: 0 !important;
-        height: 30px !important;
-        line-height: 30px !important;
-    }
-
-    .el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-sub-menu__title {
-        padding-right: 10px;
-    }
-
-    .el-menu-item {
-        padding-left: 0 !important;
-        height: 20px !important;
-        line-height: 20px !important;
-    }
-
-    .el-icon {
-        margin: 0;
-    }
-
-    .el-sub-menu__icon-arrow {
-        top: inherit;
-        right: 10px;
-    }
-
-}
-
 .instances-pop-form {
     .el-form-item {
         margin-bottom: unset;
diff --git a/mayfly_go_web/src/views/ops/redis/DataOperation.vue b/mayfly_go_web/src/views/ops/redis/DataOperation.vue
index 56a433b8..7fb875f7 100644
--- a/mayfly_go_web/src/views/ops/redis/DataOperation.vue
+++ b/mayfly_go_web/src/views/ops/redis/DataOperation.vue
@@ -1,72 +1,66 @@
 <template>
     <div>
-        <el-card>
-          <el-row>
-            <el-col :span="3">
-              <redis-instance-tree 
-                  @init-load-instances="initLoadInstances"
-                  @change-instance="changeInstance"
-                  @change-schema="loadInitSchema"
-                  :instances="state.instances"
-              />
+        <el-row>
+            <el-col :span="4">
+                <redis-instance-tree @init-load-instances="initLoadInstances" @change-instance="changeInstance"
+                    @change-schema="loadInitSchema" :instances="state.instances" />
             </el-col>
-            <el-col :span="19" style="border-left: 1px solid var(--el-card-border-color)">
-              <el-col class="mt10">
-                <el-form class="search-form" label-position="right" :inline="true" label-width="60px">
-                  <el-form-item label="key" label-width="40px">
-                    <el-input placeholder="match 支持*模糊key" style="width: 250px" v-model="scanParam.match"
-                              @clear="clear()" clearable></el-input>
-                  </el-form-item>
-                  <el-form-item label="count" label-width="40px">
-                    <el-input placeholder="count" style="width: 70px" v-model.number="scanParam.count">
-                    </el-input>
-                  </el-form-item>
-                  <el-form-item>
-                    <el-button @click="searchKey()" type="success" icon="search" plain></el-button>
-                    <el-button @click="scan()" icon="bottom" plain>scan</el-button>
-                    <el-popover placement="right" :width="200" trigger="click">
-                      <template #reference>
-                        <el-button type="primary" icon="plus" plain></el-button>
-                      </template>
-                      <el-tag @click="onAddData('string')" :color="getTypeColor('string')"
-                              style="cursor: pointer">string</el-tag>
-                      <el-tag @click="onAddData('hash')" :color="getTypeColor('hash')" class="ml5"
-                              style="cursor: pointer">hash</el-tag>
-                      <el-tag @click="onAddData('set')" :color="getTypeColor('set')" class="ml5"
-                              style="cursor: pointer">set</el-tag>
-                      <!-- <el-tag @click="onAddData('list')" :color="getTypeColor('list')" class="ml5" style="cursor: pointer">list</el-tag> -->
-                    </el-popover>
-                  </el-form-item>
-                  <div style="float: right">
-                    <span>keys: {{ state.dbsize }}</span>
-                  </div>
-                </el-form>
-              </el-col>
-              <el-table v-loading="state.loading" :data="state.keys" stripe :highlight-current-row="true" style="cursor: pointer">
-                <el-table-column show-overflow-tooltip prop="key" label="key"></el-table-column>
-                <el-table-column prop="type" label="type" width="80">
-                  <template #default="scope">
-                    <el-tag :color="getTypeColor(scope.row.type)" size="small">{{ scope.row.type }}</el-tag>
-                  </template>
-                </el-table-column>
-                <el-table-column prop="ttl" label="ttl(过期时间)" width="140">
-                  <template #default="scope">
-                    {{ ttlConveter(scope.row.ttl) }}
-                  </template>
-                </el-table-column>
-                <el-table-column label="操作">
-                  <template #default="scope">
-                    <el-button @click="getValue(scope.row)" type="success" icon="search" plain size="small">查看
-                    </el-button>
-                    <el-button @click="del(scope.row.key)" type="danger" icon="delete" plain size="small">删除
-                    </el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
+            <el-col :span="20" style="border-left: 1px solid var(--el-card-border-color);">
+                <el-col class="mt10">
+                    <el-form class="search-form" label-position="right" :inline="true" label-width="60px">
+                        <el-form-item label="key" label-width="40px">
+                            <el-input placeholder="match 支持*模糊key" style="width: 250px" v-model="scanParam.match"
+                                @clear="clear()" clearable></el-input>
+                        </el-form-item>
+                        <el-form-item label="count" label-width="40px">
+                            <el-input placeholder="count" style="width: 70px" v-model.number="scanParam.count">
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button @click="searchKey()" type="success" icon="search" plain></el-button>
+                            <el-button @click="scan()" icon="bottom" plain>scan</el-button>
+                            <el-popover placement="right" :width="200" trigger="click">
+                                <template #reference>
+                                    <el-button type="primary" icon="plus" plain></el-button>
+                                </template>
+                                <el-tag @click="onAddData('string')" :color="getTypeColor('string')"
+                                    style="cursor: pointer">string</el-tag>
+                                <el-tag @click="onAddData('hash')" :color="getTypeColor('hash')" class="ml5"
+                                    style="cursor: pointer">hash</el-tag>
+                                <el-tag @click="onAddData('set')" :color="getTypeColor('set')" class="ml5"
+                                    style="cursor: pointer">set</el-tag>
+                                <!-- <el-tag @click="onAddData('list')" :color="getTypeColor('list')" class="ml5" style="cursor: pointer">list</el-tag> -->
+                            </el-popover>
+                        </el-form-item>
+                        <div style="float: right">
+                            <span>keys: {{ state.dbsize }}</span>
+                        </div>
+                    </el-form>
+                </el-col>
+                <el-table v-loading="state.loading" :data="state.keys" stripe :highlight-current-row="true"
+                    style="cursor: pointer">
+                    <el-table-column show-overflow-tooltip prop="key" label="key"></el-table-column>
+                    <el-table-column prop="type" label="type" width="80">
+                        <template #default="scope">
+                            <el-tag :color="getTypeColor(scope.row.type)" size="small">{{ scope.row.type }}</el-tag>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="ttl" label="ttl(过期时间)" width="140">
+                        <template #default="scope">
+                            {{ ttlConveter(scope.row.ttl) }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作">
+                        <template #default="scope">
+                            <el-button @click="getValue(scope.row)" type="success" icon="search" plain size="small">查看
+                            </el-button>
+                            <el-button @click="del(scope.row.key)" type="danger" icon="delete" plain size="small">删除
+                            </el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
             </el-col>
-          </el-row>
-            
-        </el-card>
+        </el-row>
 
         <div style="text-align: center; margin-top: 10px"></div>
 
@@ -142,7 +136,7 @@ const state = reactive({
     },
     keys: [],
     dbsize: 0,
-    instances:{tags:{}, tree:{}, dbs:{}, tables:{}}
+    instances: { tags: {}, tree: {}, dbs: {}, tables: {} }
 });
 
 const {
@@ -257,16 +251,16 @@ const del = (key: string) => {
         cancelButtonText: '取消',
         type: 'warning',
     }).then(() => {
-      redisApi.delKey
-          .request({
-            key,
-            id: state.scanParam.id,
-            db: state.scanParam.db,
-          })
-          .then(() => {
-            ElMessage.success('删除成功！');
-            searchKey();
-          });
+        redisApi.delKey
+            .request({
+                key,
+                id: state.scanParam.id,
+                db: state.scanParam.db,
+            })
+            .then(() => {
+                ElMessage.success('删除成功！');
+                searchKey();
+            });
     }).catch(() => { });
 };
 
@@ -319,43 +313,43 @@ const getTypeColor = (type: string) => {
 };
 
 
-const initLoadInstances = async ()=>{
-  const res = await redisApi.redisList.request({});
-  if(!res.total) return
-  state.instances = {tags:{}, tree:{}, dbs:{}, tables:{}} ; // 初始化变量
-  for (const db of res.list) {
-    let arr = state.instances.tree[db.tagId] || []
-    const {tagId, tagPath} = db
-    // tags
-    state.instances.tags[db.tagId]={tagId, tagPath}
-    // 实例
-    arr.push(db)
-    state.instances.tree[db.tagId] = arr;
-   
-  }
+const initLoadInstances = async () => {
+    const res = await redisApi.redisList.request({});
+    if (!res.total) return
+    state.instances = { tags: {}, tree: {}, dbs: {}, tables: {} }; // 初始化变量
+    for (const db of res.list) {
+        let arr = state.instances.tree[db.tagId] || []
+        const { tagId, tagPath } = db
+        // tags
+        state.instances.tags[db.tagId] = { tagId, tagPath }
+        // 实例
+        arr.push(db)
+        state.instances.tree[db.tagId] = arr;
+    }
 }
 
 const changeInstance = async (inst: any, fn: Function) => {
-  let dbs = state.instances.dbs[inst.id] || []
-  if(dbs.length <=0 ){
-    const res = await redisApi.redisInfo.request({ id: inst.id, host:inst.host });
-    for (let db in res.Keyspace){
-      dbs.push({
-        name: db,
-        keys: res.Keyspace[db]?.split(',')[0]?.split('=')[1] || 0
-      })
+    let dbs = inst.db.split(',').map((x: string) => {
+        return { name: `db${x}`, keys: 0 }
+    })
+    const res = await redisApi.redisInfo.request({ id: inst.id, host: inst.host, section: "Keyspace" });
+    for (let db in res.Keyspace) {
+        for (let d of dbs) {
+            if (db == d.name) {
+                d.keys = res.Keyspace[db]?.split(',')[0]?.split('=')[1] || 0
+            }
+        }
     }
-  }
 
-  state.instances.dbs[inst.id] = dbs
-  fn && fn(dbs)
+    state.instances.dbs[inst.id] = dbs
+    fn && fn(dbs)
 }
 
 /** 初始化加载db数据 */
-const loadInitSchema = (inst: any, schema: string)=>{
-  state.scanParam.id = inst.id
-  state.scanParam.db = schema.replace('db','')
-  scan()
+const loadInitSchema = (inst: any, schema: string) => {
+    state.scanParam.id = inst.id
+    state.scanParam.db = schema.replace('db', '')
+    scan()
 }
 
 </script>
diff --git a/mayfly_go_web/src/views/ops/redis/RedisInstanceTree.vue b/mayfly_go_web/src/views/ops/redis/RedisInstanceTree.vue
index e65375be..093838f3 100644
--- a/mayfly_go_web/src/views/ops/redis/RedisInstanceTree.vue
+++ b/mayfly_go_web/src/views/ops/redis/RedisInstanceTree.vue
@@ -1,100 +1,78 @@
 <template>
-  <div class="instances-box layout-aside">
-    <el-row type="flex" justify="space-between">
-      <el-col :span="24" :style="{
-        maxHeight: state.instanceMenuMaxHeight,
-        height: state.instanceMenuMaxHeight, 
-        overflow:'auto'
-      }" class="el-scrollbar flex-auto">
-        
-        <el-menu background-color="transparent" ref="menuRef">
-          <!-- 第一级：tag -->
-          <el-sub-menu v-for="tag of instances.tags" :index="tag.tagPath" :key="tag.tagPath">
-            <template #title>
-              <el-icon><FolderOpened color="#e6a23c"/></el-icon>
-              <span>{{ tag.tagPath }}</span>
-            </template>
-            <!-- 第二级：数据库实例 -->
-            <el-sub-menu v-for="inst in instances.tree[tag.tagId]"
-                         :index="'redis-instance-' + inst.id"
-                         :key="'redis-instance-' + inst.id"
-                         @click.prevent="changeInstance(inst)"
-            >
-              <template #title>
-                <el-popover
-                    placement="right-start"
-                    title="mongo数据库实例信息"
-                    trigger="hover"
-                    :width="210"
-                >
-                  <template #reference>
-                    <span>&nbsp;&nbsp;<el-icon><MostlyCloudy color="#409eff"/></el-icon>{{ inst.name }}</span>
-                  </template>
-                  <template #default>
-                    <el-form class="instances-pop-form" label-width="55px" :size="'small'">
-                      <el-form-item label="名称:">{{inst.name}}</el-form-item>
-                      <el-form-item label="链接:">{{inst.host}}</el-form-item>
-                    </el-form>
-                  </template>
-                </el-popover>
-              </template>
-              <!-- 第三级：数据库 -->
-              <el-sub-menu v-for="db in instances.dbs[inst.id]" 
-                           :index="inst.id + db.name" 
-                           :key="inst.id + db.name"
-                           :class="state.nowSchema === (inst.id+db.name) && 'checked'"
-                           @click.prevent="changeSchema(inst, db.name)"
-              >
+    <tag-menu :instanceMenuMaxHeight="state.instanceMenuMaxHeight" :tags="instances.tags">
+        <template #submenu="props">
+            <el-sub-menu v-for="inst in instances.tree[props.tag.tagId]" :index="'redis-instance-' + inst.id"
+                :key="'redis-instance-' + inst.id" @click.stop="changeInstance(inst)">
                 <template #title>
-                  &nbsp;&nbsp;&nbsp;&nbsp;<el-icon><Coin color="#67c23a"/></el-icon>
-                  <span class="checked-schema">
-                    {{ db.name  }} [{{db.keys}}]
-                  </span>
+                    <el-popover placement="right-start" title="redis实例信息" trigger="hover" :width="210">
+                        <template #reference>
+                            <span>&nbsp;&nbsp;<el-icon>
+                                    <MostlyCloudy color="#409eff" />
+                                </el-icon>{{ inst.name }}</span>
+                        </template>
+                        <template #default>
+                            <el-form class="instances-pop-form" label-width="55px" :size="'small'">
+                                <el-form-item label="名称:">{{ inst.name }}</el-form-item>
+                                <el-form-item label="链接:">{{ inst.host }}</el-form-item>
+                                <el-form-item label="备注:">{{ inst.remark }}</el-form-item>
+                            </el-form>
+                        </template>
+                    </el-popover>
                 </template>
-              </el-sub-menu>
+                <!-- 第三级：数据库 -->
+                <el-menu-item v-for="db in instances.dbs[inst.id]" :index="inst.id + db.name" :key="inst.id + db.name"
+                    :class="state.nowSchema === (inst.id + db.name) && 'checked'"
+                    @click="changeSchema(inst, db.name)">
+                    <template #title>
+                        &nbsp;&nbsp;&nbsp;&nbsp;<el-icon>
+                            <Coin color="#67c23a" />
+                        </el-icon>
+                        <span class="checked-schema">
+                            {{ db.name }} [{{ db.keys }}]
+                        </span>
+                    </template>
+                </el-menu-item>
             </el-sub-menu>
-          </el-sub-menu>
-        </el-menu>
-      </el-col>
-    </el-row>
-  </div>
+        </template>
+    </tag-menu>
 </template>
 
 <script lang="ts" setup>
-import {onBeforeMount, onMounted, reactive, Ref, ref, watch} from 'vue';
-import {store} from '@/store';
+import { onBeforeMount, onMounted, reactive, Ref, ref, watch } from 'vue';
+import { store } from '@/store';
+import TagMenu from '../component/TagMenu.vue';
 
 defineProps({
-  instances: {
-    type: Object, required: true
-  },
+    instances: {
+        type: Object, required: true
+    },
 })
 
-const emits = defineEmits(['initLoadInstances','changeInstance','changeSchema'])
+const emits = defineEmits(['initLoadInstances', 'changeInstance', 'changeSchema'])
 
-onBeforeMount(async ()=>{
-  await initLoadInstances()
-  setHeight()
+onBeforeMount(async () => {
+    await initLoadInstances()
+    setHeight()
 })
 
 const setHeight = () => {
-  state.instanceMenuMaxHeight = window.innerHeight - 140 + 'px';
+    state.instanceMenuMaxHeight = window.innerHeight - 115 + 'px';
 }
 
 const menuRef = ref(null) as Ref;
 
 const state = reactive({
-  instanceMenuMaxHeight: '800px',
-  nowSchema: '',
-  filterParam: {},
-  loading: {},
+    instanceMenuMaxHeight: '800px',
+    nowSchema: '',
+    filterParam: {},
+    loading: {},
 })
 
 /**
  * 初始化加载实例数据
  */
 const initLoadInstances = () => {
-  emits('initLoadInstances')
+    emits('initLoadInstances')
 }
 
 /**
@@ -102,78 +80,45 @@ const initLoadInstances = () => {
  * @param inst 选中的实例对象
  * @param fn 选中的实例后的回调函数
  */
-const changeInstance = (inst : any, fn?:Function) => {
-  emits('changeInstance', inst, fn)
+const changeInstance = (inst: any, fn?: Function) => {
+    emits('changeInstance', inst, fn)
 }
 /**
  * 改变选中的数据库schema
  * @param inst 选中的实例对象
  * @param schema 选中的数据库schema
  */
-const changeSchema = (inst : any, schema: string) => {
-  state.nowSchema = inst.id + schema
-  emits('changeSchema', inst, schema)
+const changeSchema = (inst: any, schema: string) => {
+    state.nowSchema = inst.id + schema
+    emits('changeSchema', inst, schema)
 }
 
 const selectDb = async (val?: any) => {
-  const info = val || store.state.redisDbOptInfo.dbOptInfo
-  if (info && info.dbId) {
-    const {tagPath, dbId} = info
-    menuRef.value.open(tagPath);
-    menuRef.value.open('redis-instance-' + dbId);
-    await changeInstance({id: dbId}, async (dbs: any[]) => {
-      await changeSchema({id: dbId}, dbs[0]?.name)
-    })
-  }
+    const info = val || store.state.redisDbOptInfo.dbOptInfo
+    if (info && info.dbId) {
+        const { tagPath, dbId } = info
+        menuRef.value.open(tagPath);
+        menuRef.value.open('redis-instance-' + dbId);
+        await changeInstance({ id: dbId }, async (dbs: any[]) => {
+            await changeSchema({ id: dbId }, dbs[0]?.name)
+        })
+    }
 }
 
-onMounted(()=>{
-  selectDb();
+onMounted(() => {
+    selectDb();
 })
 
-watch(()=>store.state.redisDbOptInfo.dbOptInfo, async newValue =>{
-  await selectDb(newValue)
+watch(() => store.state.redisDbOptInfo.dbOptInfo, async newValue => {
+    await selectDb(newValue)
 })
 
 </script>
 
 <style lang="scss">
-.instances-box {
-  .el-menu{
-    width: 275px;
-  }
-  .el-sub-menu{
-    .checked{
-      .checked-schema{
-        color: var(--el-color-primary);
-      }
+.instances-pop-form {
+    .el-form-item {
+        margin-bottom: unset;
     }
-  }
-  .el-sub-menu__title{
-    padding-left: 0 !important;
-    height: 30px !important;
-    line-height: 30px !important;
-  }
-  .el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-sub-menu__title{
-    padding-right: 10px;
-  }
-  .el-menu-item{
-    padding-left: 0 !important;
-    height: 20px !important;
-    line-height: 20px !important;
-  }
-  .el-icon{
-    margin: 0;
-  }
-  .el-sub-menu__icon-arrow{
-    top:inherit;
-    right: 10px;
-  }
-
-}
-.instances-pop-form{
-  .el-form-item{
-    margin-bottom: unset;
-  }
 }
 </style>
\ No newline at end of file
diff --git a/server/internal/redis/api/redis.go b/server/internal/redis/api/redis.go
index 1d64f1b4..d9180391 100644
--- a/server/internal/redis/api/redis.go
+++ b/server/internal/redis/api/redis.go
@@ -76,36 +76,42 @@ func (r *Redis) RedisInfo(rc *req.Ctx) {
 	g := rc.GinCtx
 	ri := r.RedisApp.GetRedisInstance(uint64(ginx.PathParamInt(g, "id")), 0)
 
-	var res string
-	var err error
-
+	section := rc.GinCtx.Query("section")
 	mode := ri.Info.Mode
 	ctx := context.Background()
+	var redisCli *redis.Client
+
 	if mode == "" || mode == entity.RedisModeStandalone || mode == entity.RedisModeSentinel {
-		res, err = ri.Cli.Info(ctx).Result()
+		redisCli = ri.Cli
 	} else if mode == entity.RedisModeCluster {
 		host := rc.GinCtx.Query("host")
 		biz.NotEmpty(host, "集群模式host信息不能为空")
 		clusterClient := ri.ClusterCli
-		var redisClient *redis.Client
 		// 遍历集群的master节点找到该redis client
 		clusterClient.ForEachMaster(ctx, func(ctx context.Context, client *redis.Client) error {
 			if host == client.Options().Addr {
-				redisClient = client
+				redisCli = client
 			}
 			return nil
 		})
-		if redisClient == nil {
+		if redisCli == nil {
 			// 遍历集群的slave节点找到该redis client
 			clusterClient.ForEachSlave(ctx, func(ctx context.Context, client *redis.Client) error {
 				if host == client.Options().Addr {
-					redisClient = client
+					redisCli = client
 				}
 				return nil
 			})
 		}
-		biz.NotNil(redisClient, "该实例不在该集群中")
-		res, err = redisClient.Info(ctx).Result()
+		biz.NotNil(redisCli, "该实例不在该集群中")
+	}
+
+	var res string
+	var err error
+	if section == "" {
+		res, err = ri.Cli.Info(ctx).Result()
+	} else {
+		res, err = ri.Cli.Info(ctx, section).Result()
 	}
 
 	biz.ErrIsNilAppendErr(err, "获取redis info失败: %s")
diff --git a/server/internal/redis/api/vo/redis.go b/server/internal/redis/api/vo/redis.go
index c1fd8ad2..43fe96fa 100644
--- a/server/internal/redis/api/vo/redis.go
+++ b/server/internal/redis/api/vo/redis.go
@@ -7,8 +7,6 @@ type Redis struct {
 	Name               *string    `json:"name"`
 	Host               *string    `json:"host"`
 	Db                 string     `json:"db"`
-	ProjectId          *int64     `json:"projectId"`
-	Project            *string    `json:"project"`
 	Mode               *string    `json:"mode"`
 	EnableSshTunnel    *int8      `json:"enableSshTunnel"`    // 是否启用ssh隧道
 	SshTunnelMachineId *uint64    `json:"sshTunnelMachineId"` // ssh隧道机器id