From 4c2c6f613e584cdf4fd994badcd08a7d081ef343 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=AE=97=E6=B4=8B?= <liuzongyang@cqliving.com>
Date: Tue, 7 Feb 2023 08:39:14 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20redis=E6=96=B0=E5=A2=9E=E5=AE=9E?=
 =?UTF-8?q?=E4=BE=8B=E6=A0=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/ops/redis/DataOperation.vue     | 275 +++++++-----------
 mayfly_go_web/src/views/ops/redis/Info.vue    |   1 -
 .../src/views/ops/redis/RedisEdit.vue         |   7 -
 .../src/views/ops/redis/RedisInstanceTree.vue | 156 ++++++++++
 4 files changed, 266 insertions(+), 173 deletions(-)
 create mode 100644 mayfly_go_web/src/views/ops/redis/RedisInstanceTree.vue

diff --git a/mayfly_go_web/src/views/ops/redis/DataOperation.vue b/mayfly_go_web/src/views/ops/redis/DataOperation.vue
index 96a3b934..7bb37739 100644
--- a/mayfly_go_web/src/views/ops/redis/DataOperation.vue
+++ b/mayfly_go_web/src/views/ops/redis/DataOperation.vue
@@ -1,88 +1,71 @@
 <template>
     <div>
         <el-card>
-            <div style="float: left">
-                <el-row type="flex" justify="space-between">
-                    <el-col :span="24">
-                        <el-form class="search-form" label-position="right" :inline="true">
-                            <el-form-item label="标签">
-                                <el-select @change="changeTag" @focus="getTags" v-model="query.tagPath"
-                                    placeholder="请选择标签" filterable style="width: 250px">
-                                    <el-option v-for="item in tags" :key="item" :label="item" :value="item">
-                                    </el-option>
-                                </el-select>
-                            </el-form-item>
-                            <el-form-item label="redis" label-width="40px">
-                                <el-select v-model="scanParam.id" placeholder="请选择redis" @change="changeRedis"
-                                    @clear="clearRedis" clearable style="width: 250px">
-                                    <el-option v-for="item in redisList" :key="item.id"
-                                        :label="`${item.name ? item.name : ''} [${item.host}]`" :value="item.id">
-                                    </el-option>
-                                </el-select>
-                            </el-form-item>
-                            <el-form-item label="库" label-width="20px">
-                                <el-select v-model="scanParam.db" @change="changeDb" placeholder="库"
-                                    style="width: 85px">
-                                    <el-option v-for="db in dbList" :key="db" :label="db" :value="db"> </el-option>
-                                </el-select>
-                            </el-form-item>
-                        </el-form>
-                    </el-col>
-                    <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: {{ dbsize }}</span>
-                            </div>
-                        </el-form>
-                    </el-col>
-                </el-row>
-            </div>
-
-            <el-table v-loading="loading" :data="keys" stripe :highlight-current-row="true" style="cursor: pointer">
+          <el-row>
+            <el-col :span="3">
+              <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>
+                  <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>
+                  <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>
+                  <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-table>
+            </el-col>
+          </el-row>
+            
         </el-card>
 
         <div style="text-align: center; margin-top: 10px"></div>
@@ -107,7 +90,7 @@
 
 <script lang="ts" setup>
 import { redisApi } from './api';
-import { toRefs, reactive, watch } from 'vue';
+import { toRefs, reactive } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import HashValue from './HashValue.vue';
 import StringValue from './StringValue.vue';
@@ -116,7 +99,7 @@ import ListValue from './ListValue.vue';
 import { isTrue, notBlank, notNull } from '@/common/assert';
 
 import { useStore } from '@/store/index.ts';
-import { tagApi } from '../tag/api.ts';
+import RedisInstanceTree from '@/views/ops/redis/RedisInstanceTree.vue';
 
 let store = useStore();
 const state = reactive({
@@ -159,64 +142,18 @@ const state = reactive({
     },
     keys: [],
     dbsize: 0,
+    instances:{tags:{}, tree:{}, dbs:{}, tables:{}}
 });
 
 const {
-    loading,
-    tags,
-    redisList,
-    dbList,
-    query,
     scanParam,
     dataEdit,
     hashValueDialog,
     stringValueDialog,
     setValueDialog,
     listValueDialog,
-    keys,
-    dbsize,
 } = toRefs(state)
 
-const searchRedis = async () => {
-    notBlank(state.query.tagPath, '请先选择标签');
-    const res = await redisApi.redisList.request(state.query);
-    state.redisList = res.list;
-};
-
-const changeTag = (tagPath: string) => {
-    clearRedis();
-    if (tagPath != null) {
-        searchRedis();
-    }
-};
-
-const getTags = async () => {
-    state.tags = await tagApi.getAccountTags.request(null);
-};
-
-const changeRedis = (id: number) => {
-    resetScanParam();
-    if (id != 0) {
-        const redis: any = state.redisList.find((x: any) => x.id == id);
-        if (redis) {
-            state.dbList = (state.redisList.find((x: any) => x.id == id) as any).db.split(',');
-            state.scanParam.mode = redis.mode;
-        }
-    }
-
-    // 默认选中配置的第一个库
-    state.scanParam.db = state.dbList[0];
-    state.keys = [];
-    state.dbsize = 0;
-};
-
-const changeDb = () => {
-    resetScanParam();
-    state.keys = [];
-    state.dbsize = 0;
-    searchKey();
-};
-
 const scan = async () => {
     isTrue(state.scanParam.id != null, '请先选择redis');
     notBlank(state.scanParam.count, 'count不能为空');
@@ -256,15 +193,6 @@ const searchKey = async () => {
     await scan();
 };
 
-const clearRedis = () => {
-    state.redisList = [];
-    state.scanParam.id = null;
-    resetScanParam();
-    state.scanParam.db = '';
-    state.keys = [];
-    state.dbsize = 0;
-};
-
 const clear = () => {
     resetScanParam();
     if (state.scanParam.id) {
@@ -328,20 +256,18 @@ const del = (key: string) => {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',
-    })
-        .then(() => {
-            redisApi.delKey
-                .request({
-                    key,
-                    id: state.scanParam.id,
-                    db: state.scanParam.db,
-                })
-                .then(() => {
-                    ElMessage.success('删除成功！');
-                    searchKey();
-                });
-        })
-        .catch(() => { });
+    }).then(() => {
+      redisApi.delKey
+          .request({
+            key,
+            id: state.scanParam.id,
+            db: state.scanParam.db,
+          })
+          .then(() => {
+            ElMessage.success('删除成功！');
+            searchKey();
+          });
+    }).catch(() => { });
 };
 
 const ttlConveter = (ttl: any) => {
@@ -392,27 +318,46 @@ const getTypeColor = (type: string) => {
     }
 };
 
-// 加载选中的db
-const setSelects = async (redisDbOptInfo: any) => {
-    // 设置标签路径等
-    const { tagPath, dbId } = redisDbOptInfo.dbOptInfo;
-    state.query.tagPath = tagPath;
-    await searchRedis();
-    state.scanParam.id = dbId;
-    changeRedis(dbId);
-    changeDb();
-};
 
-// 判断如果有数据则加载下拉选项
-let redisDbOptInfo = store.state.redisDbOptInfo;
-if (redisDbOptInfo.dbOptInfo.tagPath) {
-    setSelects(redisDbOptInfo);
+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;
+   
+  }
 }
 
-// 监听选中操作的db变化，并加载下拉选项
-watch(store.state.redisDbOptInfo, async (newValue) => {
-    await setSelects(newValue);
-});
+const changeInstance = async (inst: any) => {
+  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
+      })
+    }
+  }
+
+  state.instances.dbs[inst.id] = dbs
+  
+  
+}
+
+/** 初始化加载db数据 */
+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/Info.vue b/mayfly_go_web/src/views/ops/redis/Info.vue
index ca89b8b0..3ef9efd1 100644
--- a/mayfly_go_web/src/views/ops/redis/Info.vue
+++ b/mayfly_go_web/src/views/ops/redis/Info.vue
@@ -134,7 +134,6 @@ watch(
             for (let k in info['Keyspace']) {
                 let data = { db: k }
                 let d = info['Keyspace'][k].split(',')
-                debugger
                 for (let f of d) {
                     let v = f.split('=')
                     data[v[0]] = v[1]
diff --git a/mayfly_go_web/src/views/ops/redis/RedisEdit.vue b/mayfly_go_web/src/views/ops/redis/RedisEdit.vue
index a894370f..ddda05e5 100644
--- a/mayfly_go_web/src/views/ops/redis/RedisEdit.vue
+++ b/mayfly_go_web/src/views/ops/redis/RedisEdit.vue
@@ -32,13 +32,6 @@
                             </el-popover>
                         </template></el-input>
                 </el-form-item>
-                <el-form-item prop="db" label="库号:" required>
-                    <el-select @change="changeDb" v-model="dbList" multiple allow-create filterable
-                        placeholder="请选择可操作库号" style="width: 100%">
-                        <el-option v-for="db in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]" :key="db"
-                            :label="db" :value="db" />
-                    </el-select>
-                </el-form-item>
                 <el-form-item prop="remark" label="备注:">
                     <el-input v-model.trim="form.remark" auto-complete="off" type="textarea"></el-input>
                 </el-form-item>
diff --git a/mayfly_go_web/src/views/ops/redis/RedisInstanceTree.vue b/mayfly_go_web/src/views/ops/redis/RedisInstanceTree.vue
new file mode 100644
index 00000000..3fafe252
--- /dev/null
+++ b/mayfly_go_web/src/views/ops/redis/RedisInstanceTree.vue
@@ -0,0 +1,156 @@
+<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" :collapse-transition="false">
+          <!-- 第一级：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="'mongo-instance-' + inst.id"
+                         :key="'mongo-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)"
+              >
+                <template #title>
+                  &nbsp;&nbsp;&nbsp;&nbsp;<el-icon><Coin color="#67c23a"/></el-icon>
+                  <span class="checked-schema">
+                    {{ db.name  }} [{{db.keys}}]
+                  </span>
+                </template>
+              </el-sub-menu>
+            </el-sub-menu>
+          </el-sub-menu>
+        </el-menu>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {onBeforeMount, reactive} from 'vue';
+
+defineProps({
+  instances: {
+    type: Object, required: true
+  },
+})
+
+const emits = defineEmits(['initLoadInstances','changeInstance','changeSchema'])
+
+onBeforeMount(async ()=>{
+  await initLoadInstances()
+  setHeight()
+})
+
+const setHeight = () => {
+  state.instanceMenuMaxHeight = window.innerHeight - 140 + 'px';
+}
+
+const state = reactive({
+  instanceMenuMaxHeight: '800px',
+  nowSchema: '',
+  filterParam: {},
+  loading: {},
+  
+})
+
+/**
+ * 初始化加载实例数据
+ */
+const initLoadInstances = () => {
+  emits('initLoadInstances')
+}
+
+/**
+ * 改变选中的数据库实例
+ * @param inst 选中的实例对象
+ */
+const changeInstance = (inst : any) => {
+  emits('changeInstance', inst)
+}
+/**
+ * 改变选中的数据库schema
+ * @param inst 选中的实例对象
+ * @param schema 选中的数据库schema
+ */
+const changeSchema = (inst : any, schema: string) => {
+  state.nowSchema = inst.id + schema
+  emits('changeSchema', inst, schema)
+}
+
+</script>
+
+<style lang="scss">
+.instances-box {
+  .el-menu{
+    width: 275px;
+  }
+  .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
-- 
Gitee


From 3da9ecfaa32d54d3007d87d6a68dd37fac122f2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=AE=97=E6=B4=8B?= <liuzongyang@cqliving.com>
Date: Tue, 7 Feb 2023 10:32:42 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E6=95=B0=E6=8D=AE=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=E6=8C=89=E9=92=AE=E8=B7=B3=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mayfly_go_web/src/views/ops/db/SqlExec.vue    | 24 ++------
 .../views/ops/db/component/InstanceTree.vue   | 55 ++++++++++++++++---
 .../src/views/ops/mongo/MongoDataOp.vue       |  6 +-
 .../src/views/ops/mongo/MongoInstanceTree.vue | 54 +++++++++++++++---
 .../src/views/ops/redis/DataOperation.vue     |  5 +-
 .../src/views/ops/redis/RedisInstanceTree.vue | 37 ++++++++++---
 6 files changed, 132 insertions(+), 49 deletions(-)

diff --git a/mayfly_go_web/src/views/ops/db/SqlExec.vue b/mayfly_go_web/src/views/ops/db/SqlExec.vue
index 8b1dc84c..1c898fb5 100644
--- a/mayfly_go_web/src/views/ops/db/SqlExec.vue
+++ b/mayfly_go_web/src/views/ops/db/SqlExec.vue
@@ -714,7 +714,6 @@ select * from invisit v where`.match(/(join|from)\s+(\w*-?\w*\.?\w+)\s*(as)?\s*(
 onMounted(() => {
     self.completionItemProvider?.dispose()
     setHeight();
-    instManage.loadSelectScheme()
     // 监听浏览器窗口大小变化,更新对应组件高度
     window.onresize = () => setHeight();
 });
@@ -1734,13 +1733,15 @@ const loadSchemaTables = async (inst: any, schema: string, fn: Function) => {
   }else {
     tables.forEach((a:any)=>a.show=true)
   }
-  fn()
+  fn(state.instances.tables[id+schema])
 }
 
 // 选择数据库实例
-const changeInstance = (inst: any) => {
+const changeInstance = (inst: any, fn?: Function) => {
+  debugger
   state.dbId = inst.id
   state.dbType = inst.type
+  fn && fn()
 }
 // 选择数据库
 const changeSchema = (inst: any, schema: string) => {
@@ -1800,23 +1801,6 @@ const addQueryTab = async () => {
   
 }
 
-const instManage = {
-  loadSelectScheme: ()=>{
-    let {tagPath, dbId, db} = store.state.sqlExecInfo.dbOptInfo;
-    if(dbId){
-      state.dbId = dbId;
-      state.db = db;
-      addQueryTab()
-      // fixme 差展开菜单树至对应的db
-    }
-    
-  }
-}
-
-watch(()=>store.state.sqlExecInfo.dbOptInfo, () => {
-  instManage.loadSelectScheme()
-})
-
 </script>
 
 <style lang="scss">
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 a57dcb80..e0648af6 100644
--- a/mayfly_go_web/src/views/ops/db/component/InstanceTree.vue
+++ b/mayfly_go_web/src/views/ops/db/component/InstanceTree.vue
@@ -2,7 +2,7 @@
   <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">
+        <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>
@@ -13,7 +13,7 @@
             <el-sub-menu v-for="inst in instances.tree[tag.tagId]"
                          :index="'instance-' + inst.id"
                          :key="'instance-' + inst.id"
-                         @click="changeInstance(inst)"
+                         @click="changeInstance(inst, ()=>{})"
             >
               <template #title>
                 <el-popover
@@ -49,7 +49,7 @@
                 <!-- 第四级 01：表 -->
                 <el-sub-menu :index="inst.id + schema + '-table'" >
                   <template #title>
-                    <div style="width: 100%" @click="loadTableNames(inst, schema)">
+                    <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>
@@ -113,7 +113,8 @@
 </template>
 
 <script lang="ts" setup>
-import {onBeforeMount, reactive} from 'vue';
+import {nextTick, onBeforeMount, onMounted, reactive, ref, Ref, watch} from 'vue';
+import {store} from '@/store';
 
 const props = defineProps({
   instanceMenuMaxHeight: {
@@ -130,6 +131,8 @@ onBeforeMount(async ()=>{
   await initLoadInstances()
 })
 
+const menuRef = ref(null) as Ref
+
 const state = reactive({
   nowSchema: '',
   filterParam: {},
@@ -146,9 +149,10 @@ const initLoadInstances = () => {
 /**
  * 改变选中的数据库实例
  * @param inst 选中的实例对象
+ * @param fn 选中的实例对象后的回调函数
  */
-const changeInstance = (inst : any) => {
-  emits('changeInstance', inst)
+const changeInstance = (inst : any, fn: Function) => {
+  emits('changeInstance', inst, fn)
 }
 /**
  * 改变选中的数据库schema
@@ -163,11 +167,13 @@ const changeSchema = (inst : any, schema: string) => {
  * 加载schema下所有表
  * @param inst 数据库实例
  * @param schema database名
+ * @param fn 加载表集合后的回调函数，参数：res 表集合
  */
-const loadTableNames = async (inst: any, schema: string) => {
+const loadTableNames = async (inst: any, schema: string, fn: Function) => {
   state.loading[inst.id+schema] = true
-  await emits('loadTableNames', inst, schema, ()=>{
+  await emits('loadTableNames', inst, schema, (res: any[])=>{
     state.loading[inst.id+schema] = false
+    fn && fn(res)
   })
 }
 /**
@@ -192,6 +198,39 @@ 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)
+          })
+        })
+      })
+    })
+  }
+}
+
+onMounted(()=>{
+  selectDb();
+})
+
+watch(()=>store.state.sqlExecInfo.dbOptInfo, async newValue => {
+  await selectDb(newValue)
+})
+
+
 </script>
 
 <style lang="scss">
diff --git a/mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue b/mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue
index f9176aba..a3347614 100644
--- a/mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue
+++ b/mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue
@@ -159,12 +159,12 @@ const {
     jsonEditorDialog,
 } = toRefs(state)
 
-const changeInstance = async (inst: any) => {
+const changeInstance = async (inst: any, fn: Function) => {
   if (inst) {
     if (!state.instances.dbs[inst.id]) {
       const res = await mongoApi.databases.request({id: inst.id});
       state.instances.dbs[inst.id] = res.Databases;
-      console.log(res.Databases)
+      fn && fn(res.Databases)
     }
   }
 }
@@ -179,7 +179,7 @@ const loadTableNames = async (inst: any, database: string, fn:Function) => {
     tables.push({tableName: tb, show: true})
   }
   state.instances.tables[inst.id+database] = tables
-  fn()
+  fn(tables)
 }
 
 const changeCollection = (inst: any, schema: string, collection: string) => {
diff --git a/mayfly_go_web/src/views/ops/mongo/MongoInstanceTree.vue b/mayfly_go_web/src/views/ops/mongo/MongoInstanceTree.vue
index 3922cde0..bd4deb34 100644
--- a/mayfly_go_web/src/views/ops/mongo/MongoInstanceTree.vue
+++ b/mayfly_go_web/src/views/ops/mongo/MongoInstanceTree.vue
@@ -7,7 +7,7 @@
         overflow:'auto'
       }" class="el-scrollbar flex-auto">
         
-        <el-menu background-color="transparent" :collapse-transition="false">
+        <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>
@@ -18,7 +18,7 @@
             <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)"
+                         @click.prevent="changeInstance(inst, ()=>{})"
             >
               <template #title>
                 <el-popover
@@ -55,7 +55,7 @@
                 <!-- 第四级 01：表 -->
                 <el-sub-menu :index="inst.id + db.Name + '-table'" >
                   <template #title>
-                    <div style="width: 100%" @click="loadTableNames(inst, db.Name)">
+                    <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>
@@ -97,8 +97,9 @@
 </template>
 
 <script lang="ts" setup>
-import {onBeforeMount, reactive} from 'vue';
+import {nextTick, onBeforeMount, onMounted, reactive, ref, Ref, watch} from 'vue';
 import {formatByteSize} from '@/common/utils/format';
+import {store} from '@/store';
 
 const props = defineProps({
   instances: {
@@ -117,6 +118,8 @@ const setHeight = () => {
   state.instanceMenuMaxHeight = window.innerHeight - 140 + 'px';
 }
 
+const menuRef = ref(null) as Ref
+
 const state = reactive({
   instanceMenuMaxHeight: '800px',
   nowSchema: '',
@@ -135,9 +138,10 @@ const initLoadInstances = () => {
 /**
  * 改变选中的数据库实例
  * @param inst 选中的实例对象
+ * @param fn 选中的实例对象后的回调事件
  */
-const changeInstance = (inst : any) => {
-  emits('changeInstance', inst)
+const changeInstance = (inst : any, fn: Function) => {
+  emits('changeInstance', inst, fn)
 }
 /**
  * 改变选中的数据库schema
@@ -151,12 +155,14 @@ const changeSchema = (inst : any, schema: string) => {
 /**
  * 加载schema下所有表
  * @param inst 数据库实例
+ * @param fn 加载表名后的回调函数，参数：表名list
  * @param schema database名
  */
-const loadTableNames = async (inst: any, schema: string) => {
+const loadTableNames = async (inst: any, schema: string, fn: Function) => {
   state.loading[inst.id+schema] = true
-  await emits('loadTableNames', inst, schema, ()=>{
+  await emits('loadTableNames', inst, schema, (res: any)=>{
     state.loading[inst.id+schema] = false
+    fn && fn(res)
   })
 }
 /**
@@ -181,6 +187,38 @@ 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)
+          })
+        })
+      })
+    })
+  }
+}
+
+onMounted(()=>{
+  selectDb();
+})
+
+watch(()=>store.state.mongoDbOptInfo.dbOptInfo, async newValue => {
+  await selectDb(newValue)
+})
+
 </script>
 
 <style lang="scss">
diff --git a/mayfly_go_web/src/views/ops/redis/DataOperation.vue b/mayfly_go_web/src/views/ops/redis/DataOperation.vue
index 7bb37739..56a433b8 100644
--- a/mayfly_go_web/src/views/ops/redis/DataOperation.vue
+++ b/mayfly_go_web/src/views/ops/redis/DataOperation.vue
@@ -335,7 +335,7 @@ const initLoadInstances = async ()=>{
   }
 }
 
-const changeInstance = async (inst: any) => {
+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 });
@@ -348,8 +348,7 @@ const changeInstance = async (inst: any) => {
   }
 
   state.instances.dbs[inst.id] = dbs
-  
-  
+  fn && fn(dbs)
 }
 
 /** 初始化加载db数据 */
diff --git a/mayfly_go_web/src/views/ops/redis/RedisInstanceTree.vue b/mayfly_go_web/src/views/ops/redis/RedisInstanceTree.vue
index 3fafe252..e65375be 100644
--- a/mayfly_go_web/src/views/ops/redis/RedisInstanceTree.vue
+++ b/mayfly_go_web/src/views/ops/redis/RedisInstanceTree.vue
@@ -7,7 +7,7 @@
         overflow:'auto'
       }" class="el-scrollbar flex-auto">
         
-        <el-menu background-color="transparent" :collapse-transition="false">
+        <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>
@@ -16,8 +16,8 @@
             </template>
             <!-- 第二级：数据库实例 -->
             <el-sub-menu v-for="inst in instances.tree[tag.tagId]"
-                         :index="'mongo-instance-' + inst.id"
-                         :key="'mongo-instance-' + inst.id"
+                         :index="'redis-instance-' + inst.id"
+                         :key="'redis-instance-' + inst.id"
                          @click.prevent="changeInstance(inst)"
             >
               <template #title>
@@ -61,7 +61,8 @@
 </template>
 
 <script lang="ts" setup>
-import {onBeforeMount, reactive} from 'vue';
+import {onBeforeMount, onMounted, reactive, Ref, ref, watch} from 'vue';
+import {store} from '@/store';
 
 defineProps({
   instances: {
@@ -80,12 +81,13 @@ const setHeight = () => {
   state.instanceMenuMaxHeight = window.innerHeight - 140 + 'px';
 }
 
+const menuRef = ref(null) as Ref;
+
 const state = reactive({
   instanceMenuMaxHeight: '800px',
   nowSchema: '',
   filterParam: {},
   loading: {},
-  
 })
 
 /**
@@ -98,9 +100,10 @@ const initLoadInstances = () => {
 /**
  * 改变选中的数据库实例
  * @param inst 选中的实例对象
+ * @param fn 选中的实例后的回调函数
  */
-const changeInstance = (inst : any) => {
-  emits('changeInstance', inst)
+const changeInstance = (inst : any, fn?:Function) => {
+  emits('changeInstance', inst, fn)
 }
 /**
  * 改变选中的数据库schema
@@ -112,6 +115,26 @@ const changeSchema = (inst : any, schema: string) => {
   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)
+    })
+  }
+}
+
+onMounted(()=>{
+  selectDb();
+})
+
+watch(()=>store.state.redisDbOptInfo.dbOptInfo, async newValue =>{
+  await selectDb(newValue)
+})
+
 </script>
 
 <style lang="scss">
-- 
Gitee