manager/zyplayer-doc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

db模块增加节流、防抖函数，有效提升页面性能

Browse Source 
拖拽条样式美化
This commit is contained in:
diant
2023-06-07 18:40:46 +08:00
parent 9e68547cfb
commit a9e1766b05
9 changed files with 82 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
zyplayer-doc-db/src/main/resources/dist/css/index.39888393.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
zyplayer-doc-db/src/main/resources/dist/css/index.438e06ca.css vendored
View File

File diff suppressed because one or more lines are too long

2
zyplayer-doc-db/src/main/resources/dist/doc-db.html vendored
View File

@@ -1 +1 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon-db.png"><title>数据库文档管理</title><link href="css/chunk-vendors.be60d3b3.css" rel="preload" as="style"><link href="css/index.438e06ca.css" rel="preload" as="style"><link href="js/chunk-vendors.ce4976ca.js" rel="preload" as="script"><link href="js/index.2e4681ba.js" rel="preload" as="script"><link href="css/chunk-vendors.be60d3b3.css" rel="stylesheet"><link href="css/index.438e06ca.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but zyplayer-db-ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.ce4976ca.js"></script><script src="js/index.2e4681ba.js"></script></body></html> <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon-db.png"><title>数据库文档管理</title><link href="css/chunk-vendors.be60d3b3.css" rel="preload" as="style"><link href="css/index.39888393.css" rel="preload" as="style"><link href="js/chunk-vendors.7871ff07.js" rel="preload" as="script"><link href="js/index.a03eda58.js" rel="preload" as="script"><link href="css/chunk-vendors.be60d3b3.css" rel="stylesheet"><link href="css/index.39888393.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but zyplayer-db-ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.7871ff07.js"></script><script src="js/index.a03eda58.js"></script></body></html>

22
zyplayer-doc-db/src/main/resources/dist/js/chunk-vendors.ce4976ca.js → zyplayer-doc-db/src/main/resources/dist/js/chunk-vendors.7871ff07.js vendored
View File

File diff suppressed because one or more lines are too long

1
zyplayer-doc-db/src/main/resources/dist/js/index.2e4681ba.js vendored
View File

File diff suppressed because one or more lines are too long

1
zyplayer-doc-db/src/main/resources/dist/js/index.a03eda58.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

32
zyplayer-doc-ui/db-ui/src/App.vue
View File

@@ -73,7 +73,7 @@
</div> </div>
</el-aside> </el-aside>
<div ref="rightResize" class="right-resize"> <div ref="rightResize" class="right-resize">
<i ref="rightResizeBar">...</i> <i ref="rightResizeBar"></i>
</div> </div>
<el-container> <el-container>
<el-header> <el-header>
@@ -104,6 +104,7 @@
import userApi from './common/api/user' import userApi from './common/api/user'
import datasourceApi from './common/api/datasource' import datasourceApi from './common/api/datasource'
import aboutDialog from './views/common/AboutDialog' import aboutDialog from './views/common/AboutDialog'
import { throttle, debounce } from '@/common/utils/throttleDebounce.js'
export default { export default {
data() { data() {
@@ -148,10 +149,6 @@ export default {
let leftTopHeight = document.getElementById('leftTopHeight').offsetHeight; let leftTopHeight = document.getElementById('leftTopHeight').offsetHeight;
this.vueEasyTreeHeight = winHeight - leftTopHeight -50; this.vueEasyTreeHeight = winHeight - leftTopHeight -50;
}, },
beforeDestroy() {
// 移除滚动事件监听
this.$refs.scrollContainer.removeEventListener('scroll', this.handleScroll)
},
methods: { methods: {
userSettingDropdown(command) { userSettingDropdown(command) {
console.log("command:" + command); console.log("command:" + command);
@@ -313,13 +310,13 @@ export default {
// 保留this引用 // 保留this引用
let resize = this.$refs.rightResize; let resize = this.$refs.rightResize;
let resizeBar = this.$refs.rightResizeBar; let resizeBar = this.$refs.rightResizeBar;
resize.onmousedown = e => { resize.onmousedown = e =>{
let startX = e.clientX; let startX = e.clientX;
// 颜色改变提醒 // 颜色改变提醒
resize.style.background = "#ccc"; resize.style.background = "#ccc";
resizeBar.style.background = "#aaa"; //resizeBar.style.background = "#aaa";
resize.left = resize.offsetLeft; resize.left = resize.offsetLeft;
document.onmousemove = e2 => { document.onmousemove = throttle(e2 => {
// 计算并应用位移量 // 计算并应用位移量
let endX = e2.clientX; let endX = e2.clientX;
let moveLen = startX - endX; let moveLen = startX - endX;
@@ -330,11 +327,18 @@ export default {
this.rightAsideWidth = 200; this.rightAsideWidth = 200;
} }
} }
}; },10);
document.onmouseup = () => { document.onmouseup = () => {
// 颜色恢复 // 颜色恢复
resize.style.background = "#fafafa"; resize.style.background = "#fafafa";
resizeBar.style.background = "#ccc"; resize.addEventListener("mouseover", function() {
resize.style.backgroundColor = "#ccc";
});
resize.addEventListener("mouseout", function() {
resize.style.backgroundColor = "#fafafa";
});
//resizeBar.style.background = "#ccc";
document.onmousemove = null; document.onmousemove = null;
document.onmouseup = null; document.onmouseup = null;
}; };
@@ -436,6 +440,10 @@ html, body {
background: #fafafa; background: #fafafa;
} }
.right-resize:hover{
background: #ccc;
}
.right-resize i { .right-resize i {
margin-top: 300px; margin-top: 300px;
width: 5px; width: 5px;
@@ -445,8 +453,8 @@ html, body {
word-break: break-all; word-break: break-all;
line-height: 8px; line-height: 8px;
border-radius: 5px; border-radius: 5px;
background: #ccc; /*background: #ccc;*/
color: #888; /*color: #888;*/
text-align: center; text-align: center;
} }

29
zyplayer-doc-ui/db-ui/src/common/utils/throttleDebounce.js Normal file
View File

@@ -0,0 +1,29 @@
//节流函数（一定时间内只执行一次事件）
export function throttle(fn, delay) {
let timer = null;
return function() {
const context = this;
const args = arguments;
if (!timer) {
timer = setTimeout(function() {
fn.apply(context, args);
timer = null;
}, delay);
}
}
}
//防抖函数（一定时间内只执行最后一次事件）
export function debounce(fn, delay) {
let timer = null;
return function() {
const context = this;
const args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function() {
fn.apply(context, args);
timer = null;
}, delay);
}
}

27
zyplayer-doc-ui/db-ui/src/views/data/Executor.vue
View File

@@ -39,7 +39,7 @@
</div> </div>
</el-card> </el-card>
<div ref="topResize" class="top-resize"> <div ref="topResize" class="top-resize">
<i ref="topResizeBar">. . .</i> <i ref="topResizeBar"></i>
</div> </div>
<el-card :style="{ height: rightBodyButtomHeight + 'px' }"> <el-card :style="{ height: rightBodyButtomHeight + 'px' }">
<div style="position: relative;"> <div style="position: relative;">
@@ -199,7 +199,7 @@ import datasourceApi from '../../common/api/datasource'
import aceEditor from "../../common/lib/ace-editor"; import aceEditor from "../../common/lib/ace-editor";
import sqlParser from "./parser/SqlParser"; import sqlParser from "./parser/SqlParser";
import Clickoutside from 'element-ui/src/utils/clickoutside'; import Clickoutside from 'element-ui/src/utils/clickoutside';
import merge from 'webpack-merge'; import { throttle, debounce } from '@/common/utils/throttleDebounce.js'
export default { export default {
directives: {Clickoutside}, directives: {Clickoutside},
@@ -731,9 +731,9 @@ export default {
let startY = e.clientY; let startY = e.clientY;
// 颜色改变提醒 // 颜色改变提醒
resize.style.background = "#ccc"; resize.style.background = "#ccc";
resizeBar.style.background = "#aaa"; //resizeBar.style.background = "#aaa";
resize.left = resize.offsetLeft; resize.left = resize.offsetLeft;
document.onmousemove = e2 => { document.onmousemove = throttle( e2 => {
// 计算并应用位移量 // 计算并应用位移量
let endY = e2.clientY; let endY = e2.clientY;
let moveLen = startY - endY; let moveLen = startY - endY;
@@ -748,11 +748,18 @@ export default {
} }
this.elementHeightCalculation(); this.elementHeightCalculation();
} }
}; },10);
document.onmouseup = () => { document.onmouseup = () => {
// 颜色恢复 // 颜色恢复
resize.style.background = "#fafafa"; resize.style.background = "#fafafa";
resizeBar.style.background = "#ccc"; resize.addEventListener("mouseover", function() {
resize.style.backgroundColor = "#ccc";
});
resize.addEventListener("mouseout", function() {
resize.style.backgroundColor = "#fafafa";
});
//resizeBar.style.background = "#ccc";
document.onmousemove = null; document.onmousemove = null;
document.onmouseup = null; document.onmouseup = null;
}; };
@@ -925,14 +932,18 @@ export default {
display: flex; display: flex;
} }
.top-resize:hover{
background: #ccc;
}
.top-resize i { .top-resize i {
width: 35px; width: 35px;
height: 5px; height: 5px;
display: inline-block; display: inline-block;
line-height: 0px; line-height: 0px;
border-radius: 5px; border-radius: 5px;
background: #ccc; /*background: #ccc;*/
color: #888; /*color: #888;*/
text-align: center; text-align: center;
margin: auto; margin: auto;
} }