refactor: 前端样式调整

mayfly_go_web/src/layout/component/main.vue

@@ -57,7 +57,7 @@ const initCurrentRouteMeta = (meta: object) => {
 // 设置 main 的高度
 const initHeaderHeight = () => {
     let { isTagsview } = themeConfig.value;
-    if (isTagsview) return (state.headerHeight = `84px`);
+    if (isTagsview) return (state.headerHeight = `77px`);
     else return (state.headerHeight = `50px`);
 };
 // 页面加载前
@@ -67,7 +67,7 @@ onBeforeMount(() => {
 });
 // 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
 watch(themeConfig.value, (val) => {
-    state.headerHeight = val.isTagsview ? '84px' : '50px';
+    state.headerHeight = val.isTagsview ? '77px' : '50px';
     if (val.isFixedHeaderChange !== val.isFixedHeader) {
         if (!proxy.$refs.layoutScrollbarRef) return false;
         proxy.$refs.layoutScrollbarRef.update();

mayfly_go_web/src/views/ops/component/TagTree.vue

@@ -1,53 +1,49 @@
 <template>
     <div class="tag-tree">
-        <el-row type="flex" justify="space-between">
+        <el-input v-model="filterText" placeholder="输入关键字->搜索已展开节点信息" clearable size="small" class="mb5" />
-            <el-col :span="24" class="el-scrollbar flex-auto" style="overflow: auto">
+        <el-scrollbar :style="{ height: state.height, maxHeight: state.height, backgroundColor: 'var(--el-fill-color-blank)' }">
-                <el-input v-model="filterText" placeholder="输入关键字->搜索已展开节点信息" clearable size="small" class="mb5" />
+            <el-tree
-
+                ref="treeRef"
-                <el-tree
+                :highlight-current="true"
-                    ref="treeRef"
+                :indent="10"
-                    :style="{ maxHeight: state.height, height: state.height, overflow: 'auto' }"
+                :load="loadNode"
-                    :highlight-current="true"
+                :props="treeProps"
-                    :indent="10"
+                lazy
-                    :load="loadNode"
+                node-key="key"
-                    :props="treeProps"
+                :expand-on-click-node="true"
-                    lazy
+                :filter-node-method="filterNode"
-                    node-key="key"
+                @node-click="treeNodeClick"
-                    :expand-on-click-node="true"
+                @node-expand="treeNodeClick"
-                    :filter-node-method="filterNode"
+                @node-contextmenu="nodeContextmenu"
-                    @node-click="treeNodeClick"
+            >
-                    @node-expand="treeNodeClick"
+                <template #default="{ node, data }">
-                    @node-contextmenu="nodeContextmenu"
+                    <span>
-                >
+                        <span v-if="data.type.value == TagTreeNode.TagPath">
-                    <template #default="{ node, data }">
+                            <tag-info :tag-path="data.label" />
-                        <span>
-                            <span v-if="data.type.value == TagTreeNode.TagPath">
-                                <tag-info :tag-path="data.label" />
-                            </span>
-
-                            <slot v-else :node="node" :data="data" name="prefix"></slot>
-
-                            <span class="ml3">
-                                <slot name="label" :data="data"> {{ data.label }}</slot>
-                            </span>
-
-                            <slot :node="node" :data="data" name="suffix"></slot>
                         </span>
-                    </template>
+
-                </el-tree>
+                        <slot v-else :node="node" :data="data" name="prefix"></slot>
-            </el-col>
+
-        </el-row>
+                        <span class="ml3">
+                            <slot name="label" :data="data"> {{ data.label }}</slot>
+                        </span>
+
+                        <slot :node="node" :data="data" name="suffix"></slot>
+                    </span>
+                </template>
+            </el-tree>
+        </el-scrollbar>
         <contextmenu :dropdown="state.dropdown" :items="state.contextmenuItems" ref="contextmenuRef" @currentContextmenuClick="onCurrentContextmenuClick" />
     </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, reactive, ref, watch, toRefs, onUnmounted } from 'vue';
+import { onMounted, reactive, ref, watch, toRefs } from 'vue';
 import { NodeType, TagTreeNode } from './tag';
 import TagInfo from './TagInfo.vue';
 import { Contextmenu } from '@/components/contextmenu';
 import { tagApi } from '../tag/api';
-import { useWindowSize } from '@vueuse/core';
+import { useEventListener, useWindowSize } from '@vueuse/core';
 
 const props = defineProps({
     resourceType: {
@@ -94,17 +90,13 @@ const { filterText } = toRefs(state);
 
 onMounted(async () => {
     setHeight();
-    window.addEventListener('resize', setHeight);
+    useEventListener(window, 'resize', setHeight);
 });
 
 const setHeight = () => {
-    state.height = vh.value - 150 + 'px';
+    state.height = vh.value - 138 + 'px';
 };
 
-onUnmounted(() => {
-    window.removeEventListener('resize', setHeight);
-});
-
 watch(filterText, (val) => {
     treeRef.value?.filter(val);
 });
@@ -203,9 +195,6 @@ defineExpose({
 
 <style lang="scss" scoped>
 .tag-tree {
-    overflow: 'auto';
-    position: relative;
-
     border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
     border: 1px solid var(--el-border-color-light, #ebeef5);
 

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

@@ -163,6 +163,7 @@ import { getDbDialect } from './dialect/index';
 import { sleep } from '@/common/utils/loading';
 import { TagResourceTypeEnum } from '@/common/commonEnum';
 import { Splitpanes, Pane } from 'splitpanes';
+import { useEventListener } from '@vueuse/core';
 
 const DbSqlEditor = defineAsyncComponent(() => import('./component/sqleditor/DbSqlEditor.vue'));
 const DbTableDataOp = defineAsyncComponent(() => import('./component/table/DbTableDataOp.vue'));
@@ -387,7 +388,7 @@ const { nowDbInst } = toRefs(state);
 onMounted(() => {
     setHeight();
     // 监听浏览器窗口大小变化,更新对应组件高度
-    window.onresize = () => setHeight();
+    useEventListener(window, 'resize', setHeight);
 });
 
 onBeforeUnmount(() => {
@@ -399,7 +400,7 @@ onBeforeUnmount(() => {
  */
 const setHeight = () => {
     state.dataTabsTableHeight = window.innerHeight - 255 + 'px';
-    state.tablesOpHeight = window.innerHeight - 220 + 'px';
+    state.tablesOpHeight = window.innerHeight - 212 + 'px';
 };
 
 // 选择数据库,改变当前正在操作的数据库信息
@@ -609,8 +610,6 @@ const getNowDbInfo = () => {
     }
 
     #data-exec {
-        min-height: calc(100vh - 155px);
-
         .el-tabs {
             --el-tabs-header-height: 30px;
         }

mayfly_go_web/src/views/ops/db/component/sqleditor/DbSqlEditor.vue

@@ -44,7 +44,7 @@
             @resize="resizeTableHeight"
             horizontal
             class="default-theme"
-            style="height: calc(100vh - 225px)"
+            style="height: calc(100vh - 220px)"
         >
             <Pane :size="state.editorSize" max-size="80">
                 <MonacoEditor ref="monacoEditorRef" class="mt5" v-model="state.sql" language="sql" height="100%" :id="'MonacoTextarea-' + getKey()" />
@@ -276,8 +276,9 @@ const onRemoveTab = (targetId: number) => {
 const resizeTableHeight = (e: any) => {
     const vh = window.innerHeight;
     state.editorSize = e[0].size;
-    const editorHeight = (vh - 225) * (state.editorSize / 100);
+    const plitpaneHeight = vh - 210;
-    state.tableDataHeight = vh - 225 - 40 - editorHeight + 'px';
+    const editorHeight = plitpaneHeight * (state.editorSize / 100);
+    state.tableDataHeight = plitpaneHeight - editorHeight - 40 + 'px';
 };
 
 const getKey = () => {

mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue

@@ -253,7 +253,7 @@ const NodeTypeColl = new NodeType(MongoNodeType.Coll).withNodeClickFunc((nodeDat
 const findParamInputRef: any = ref(null);
 const state = reactive({
     tags: [],
-    dataHeight: `${window.innerHeight - 194 - 35}px`,
+    dataHeight: `${window.innerHeight - 220}px`,
     mongoList: [] as any,
     activeName: '', // 当前操作的tab
     dataTabs: {} as any, // 数据tabs

mayfly_go_web/src/views/ops/redis/DataOperation.vue

@@ -88,39 +88,42 @@
                         </el-col>
                     </el-row>
 
-                    <el-tree
+                    <el-scrollbar
                         :style="{
                             maxHeight: state.keyTreeHeight,
                             height: state.keyTreeHeight,
-                            overflow: 'auto',
+                            backgroundColor: 'var(--el-fill-color-blank)',
                             border: '1px solid var(--el-border-color-light, #ebeef5)',
                         }"
-                        ref="keyTreeRef"
-                        :highlight-current="true"
-                        :data="keyTreeData"
-                        :props="treeProps"
-                        :indent="8"
-                        node-key="key"
-                        :auto-expand-parent="false"
-                        :default-expanded-keys="Array.from(state.keyTreeExpanded)"
-                        @node-click="handleKeyTreeNodeClick"
-                        @node-expand="keyTreeNodeExpand"
-                        @node-collapse="keyTreeNodeCollapse"
-                        @node-contextmenu="rightClickNode"
                     >
-                        <template #default="{ node, data }">
+                        <el-tree
-                            <span class="el-dropdown-link key-list-custom-node" :title="node.label">
+                            ref="keyTreeRef"
-                                <span v-if="data.type == 1">
+                            :highlight-current="true"
-                                    <SvgIcon :size="15" :name="node.expanded ? 'folder-opened' : 'folder'" />
+                            :data="keyTreeData"
-                                </span>
+                            :props="treeProps"
-                                <span :class="'ml5 ' + (data.type == 1 ? 'folder-label' : 'key-label')">
+                            :indent="8"
-                                    {{ node.label }}
+                            node-key="key"
-                                </span>
+                            :auto-expand-parent="false"
+                            :default-expanded-keys="Array.from(state.keyTreeExpanded)"
+                            @node-click="handleKeyTreeNodeClick"
+                            @node-expand="keyTreeNodeExpand"
+                            @node-collapse="keyTreeNodeCollapse"
+                            @node-contextmenu="rightClickNode"
+                        >
+                            <template #default="{ node, data }">
+                                <span class="el-dropdown-link key-list-custom-node" :title="node.label">
+                                    <span v-if="data.type == 1">
+                                        <SvgIcon :size="15" :name="node.expanded ? 'folder-opened' : 'folder'" />
+                                    </span>
+                                    <span :class="'ml5 ' + (data.type == 1 ? 'folder-label' : 'key-label')">
+                                        {{ node.label }}
+                                    </span>
 
-                                <span v-if="!node.isLeaf" class="ml5" style="font-weight: bold"> ({{ data.keyCount }}) </span>
+                                    <span v-if="!node.isLeaf" class="ml5" style="font-weight: bold"> ({{ data.keyCount }}) </span>
-                            </span>
+                                </span>
-                        </template>
+                            </template>
-                    </el-tree>
+                        </el-tree>
+                    </el-scrollbar>
 
                     <contextmenu :dropdown="state.contextmenu.dropdown" :items="state.contextmenu.items" ref="contextmenuRef" />
                 </div>
@@ -178,6 +181,7 @@ import { Contextmenu, ContextmenuItem } from '@/components/contextmenu';
 import { sleep } from '../../../common/utils/loading';
 import { TagResourceTypeEnum } from '@/common/commonEnum';
 import { Splitpanes, Pane } from 'splitpanes';
+import { useEventListener } from '@vueuse/core';
 
 const KeyDetail = defineAsyncComponent(() => import('./KeyDetail.vue'));
 
@@ -275,7 +279,7 @@ const state = reactive({
     tags: [],
     redisList: [] as any,
     dbList: [],
-    keyTreeHeight: window.innerHeight - 147 - 30 + 'px',
+    keyTreeHeight: '100px',
     loadingKeyTree: false,
     keys: [] as any,
     keySeparator: ':',
@@ -315,11 +319,11 @@ const { scanParam, keyTreeData, newKeyDialog } = toRefs(state);
 onMounted(async () => {
     setHeight();
     // 监听浏览器窗口大小变化,更新对应组件高度
-    window.onresize = () => setHeight();
+    useEventListener(window, 'resize', setHeight);
 });
 
 const setHeight = () => {
-    state.keyTreeHeight = window.innerHeight - 174 + 'px';
+    state.keyTreeHeight = window.innerHeight - 165 + 'px';
 };
 
 const scan = async (appendKey = false) => {

server/go.mod

@@ -14,7 +14,7 @@ require (
 	github.com/go-playground/universal-translator v0.18.1
 	github.com/go-playground/validator/v10 v10.14.0
 	github.com/go-sql-driver/mysql v1.7.1
-	github.com/golang-jwt/jwt/v5 v5.1.0
+	github.com/golang-jwt/jwt/v5 v5.2.0
 	github.com/gorilla/websocket v1.5.1
 	github.com/kanzihuang/vitess/go/vt/sqlparser v0.0.0-20231018071450-ac8d9f0167e9
 	github.com/lionsoul2014/ip2region/binding/golang v0.0.0-20230712084735-068dc2aee82d
@@ -25,7 +25,7 @@ require (
 	github.com/redis/go-redis/v9 v9.3.0
 	github.com/robfig/cron/v3 v3.0.1 // 定时任务
 	github.com/stretchr/testify v1.8.4
-	go.mongodb.org/mongo-driver v1.12.1 // mongo
+	go.mongodb.org/mongo-driver v1.13.1 // mongo
 	golang.org/x/crypto v0.16.0 // ssh
 	golang.org/x/oauth2 v0.14.0
 	gopkg.in/yaml.v3 v3.0.1