feat：实例树优化：加宽菜单宽度、表加载中loading状态、新建查询等按钮自成一行、加宽实例详情宽度、实例树高度默认撑满

mayfly_go_web/src/views/ops/db/SqlExec.vue

@@ -1,8 +1,10 @@
 <template>
     <div>
       <el-row type="flex">
-        <el-col :span="3"  >
+        <el-col :span="24">
           <el-button type="primary" icon="plus" @click="addQueryTab" size="small">新建查询</el-button>
+        </el-col>
+        <el-col :span="4" style="border-left: 1px solid #eee; margin-top: 10px" >
           <InstanceTree
               :instance-menu-max-height="state.instanceMenuMaxHeight"
               :instances="state.instances"
@@ -13,8 +15,8 @@
               @load-table-data="loadTableData"
           />
         </el-col>
-        <el-col :span="21">
+        <el-col :span="20">
-        <el-container id="data-exec" style="border: 1px solid #eee; margin-top: 1px">
+        <el-container id="data-exec" style="border-left: 1px solid #eee; margin-top: 10px">
             <el-tabs @tab-remove="removeDataTab" @tab-click="onDataTabClick" style="width: 100%" v-model="state.activeName">
                 <el-tab-pane closable v-for="q in state.queryTabs" :key="q.id" :label="q.label" :name="q.name" >
                     <div>
@@ -199,7 +201,7 @@
                             layout="prev, pager, next, total, jumper" v-model:current-page="dt.pageNum"
                             :page-size="defalutLimit"></el-pagination>
                     </el-row>
-                  <div style="height: 20px; font-size: 12px; padding: 0 10px;line-height: 20px; 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>
@@ -724,7 +726,7 @@ const setHeight = () => {
     // 默认300px
     state.monacoOptions.height = window.innerHeight - 550 + 'px'
     state.dataTabsTableHeight = window.innerHeight - 219;
-    state.instanceMenuMaxHeight = window.innerHeight - 130 + 'px';
+    state.instanceMenuMaxHeight = window.innerHeight - 140 + 'px';
 };
 
 /**
@@ -1721,7 +1723,7 @@ const loadInstances = async () => {
 }
 
 // 加载实例对应的所有表名
-const loadSchemaTables = async (inst: any, schema: string) => {
+const loadSchemaTables = async (inst: any, schema: string, fn: Function) => {
   changeSchema(inst, schema)
   let {id} = inst
   let tables = state.instances.tables[id+schema];
@@ -1732,6 +1734,7 @@ const loadSchemaTables = async (inst: any, schema: string) => {
   }else {
     tables.forEach((a:any)=>a.show=true)
   }
+  fn()
 }
 
 // 选择数据库实例

mayfly_go_web/src/views/ops/db/component/InstanceTree.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="instances-box layout-aside">
     <el-row type="flex" justify="space-between">
-      <el-col :span="24" :style="{maxHeight: instanceMenuMaxHeight, overflow:'auto'}" class="el-scrollbar flex-auto">
+      <el-col :span="24" :style="{maxHeight: instanceMenuMaxHeight,height: instanceMenuMaxHeight, overflow:'auto'}" class="el-scrollbar flex-auto">
-        <el-menu background-color="transparent">
+        <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>
@@ -20,7 +20,7 @@
                     placement="right-start"
                     title="数据库实例信息"
                     trigger="hover"
-                    :width="180"
+                    :width="210"
                 >
                   <template #reference>
                     <span>&nbsp;&nbsp;<el-icon><MostlyCloudy color="#409eff"/></el-icon>{{ inst.name }}</span>
@@ -52,6 +52,7 @@
                     <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'"
@@ -130,8 +131,9 @@ onBeforeMount(async ()=>{
 })
 
 const state = reactive({
-  nowSchema:'',
+  nowSchema: '',
-  filterParam: {}
+  filterParam: {},
+  loading: {}
 })
 
 /**
@@ -162,8 +164,11 @@ const changeSchema = (inst : any, schema: string) => {
  * @param inst 数据库实例
  * @param schema database名
  */
-const loadTableNames = (inst: any, schema: string) => {
+const loadTableNames = async (inst: any, schema: string) => {
-  emits('loadTableNames', inst, schema)
+  state.loading[inst.id+schema] = true
+  await emits('loadTableNames', inst, schema, ()=>{
+    state.loading[inst.id+schema] = false
+  })
 }
 /**
  * 加载选中表数据
@@ -192,7 +197,7 @@ const filterTableName = (instId: number, schema: string, event?: any) => {
 <style lang="scss">
 .instances-box {
   .el-menu{
-    width: 210px;
+    width: 275px;
   }
   .el-sub-menu{
     .checked{