TRKJ/mayfly-go
2
0
Fork 0
mirror of https://gitee.com/dromara/mayfly-go synced 2025-11-02 15:30:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 前端样式调整

Browse Source
This commit is contained in:
meilin.huang
2023-12-11 17:08:52 +08:00
parent d00bd2ed72
commit 75bd4ca3df
7 changed files with 81 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
mayfly_go_web/src/layout/component/main.vue
View File

@@ -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();

83
mayfly_go_web/src/views/ops/component/TagTree.vue
View File

@@ -1,53 +1,49 @@
<template>
<div class="tag-tree">
<el-row type="flex" justify="space-between">
<el-col :span="24" class="el-scrollbar flex-auto" style="overflow: auto">
<el-input v-model="filterText" placeholder="输入关键字->搜索已展开节点信息" clearable size="small" class="mb5" />
<el-tree
ref="treeRef"
:style="{ maxHeight: state.height, height: state.height, overflow: 'auto' }"
:highlight-current="true"
:indent="10"
:load="loadNode"
:props="treeProps"
lazy
node-key="key"
:expand-on-click-node="true"
:filter-node-method="filterNode"
@node-click="treeNodeClick"
@node-expand="treeNodeClick"
@node-contextmenu="nodeContextmenu"
>
<template #default="{ node, data }">
<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>
<el-input v-model="filterText" placeholder="输入关键字->搜索已展开节点信息" clearable size="small" class="mb5" />
<el-scrollbar :style="{ height: state.height, maxHeight: state.height, backgroundColor: 'var(--el-fill-color-blank)' }">
<el-tree
ref="treeRef"
:highlight-current="true"
:indent="10"
:load="loadNode"
:props="treeProps"
lazy
node-key="key"
:expand-on-click-node="true"
:filter-node-method="filterNode"
@node-click="treeNodeClick"
@node-expand="treeNodeClick"
@node-contextmenu="nodeContextmenu"
>
<template #default="{ node, data }">
<span>
<span v-if="data.type.value == TagTreeNode.TagPath">
<tag-info :tag-path="data.label" />
</span>
</template>
</el-tree>
</el-col>
</el-row>
<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>
</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);

7
mayfly_go_web/src/views/ops/db/SqlExec.vue
View File

@@ -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;
}

7
mayfly_go_web/src/views/ops/db/component/sqleditor/DbSqlEditor.vue
View File

@@ -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);
state.tableDataHeight = vh - 225 - 40 - editorHeight + 'px';
const plitpaneHeight = vh - 210;
const editorHeight = plitpaneHeight * (state.editorSize / 100);
state.tableDataHeight = plitpaneHeight - editorHeight - 40 + 'px';
};
const getKey = () => {

2
mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue
View File

@@ -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

62
mayfly_go_web/src/views/ops/redis/DataOperation.vue
View File

@@ -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 }">
<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>
<el-tree
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 }">
<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>
</template>
</el-tree>
<span v-if="!node.isLeaf" class="ml5" style="font-weight: bold"> ({{ data.keyCount }}) </span>
</span>
</template>
</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) => {

4
server/go.mod
View File

@@ -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