db模块页面体验优化

This commit is contained in:
diant
2023-06-09 14:13:36 +08:00
parent a9e1766b05
commit 87e41e91c1
9 changed files with 36 additions and 42 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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.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>
<!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.2f89c9fb.css" rel="preload" as="style"><link href="js/chunk-vendors.7871ff07.js" rel="preload" as="script"><link href="js/index.e843feca.js" rel="preload" as="script"><link href="css/chunk-vendors.be60d3b3.css" rel="stylesheet"><link href="css/index.2f89c9fb.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.e843feca.js"></script></body></html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -199,7 +199,7 @@ export default {
dbName: node.dbName,
tableName: node.tableName
};
this.$router.push({path: '/table/database', query: this.nowClickPath});
this.$router.push({path: '/table/database', query: this.nowClickPath}).catch(err => err);
} else if (node.type == 2) {
this.nowClickPath = {
sourceId: this.choiceDatasourceId,
@@ -207,7 +207,7 @@ export default {
dbName: node.dbName,
tableName: node.tableName
};
this.$router.push({path: '/table/info', query: this.nowClickPath});
this.$router.push({path: '/table/info', query: this.nowClickPath}).catch(err => err);
}
},
handleNodeExpand(nodeData, node) {
@@ -285,7 +285,7 @@ export default {
id: host + "_" + result[i].dbName, host: host, dbName: result[i].dbName,
name: result[i].dbName, type: 1
};
item.children = [{label: '', needLoad: true}];// 初始化一个对象,点击展开时重新查询加载
item.children = [{id:'1',label: '', needLoad: true}];// 初始化一个对象,点击展开时重新查询加载
children.push(item);
}
pathIndex.push({id: host, host: host, name: host, children: children});
@@ -313,7 +313,8 @@ export default {
resize.onmousedown = e =>{
let startX = e.clientX;
// 颜色改变提醒
resize.style.background = "#ccc";
resize.style.setProperty("--rightResizeColor", "#ccc");
//resize.style.background = "#ccc";
//resizeBar.style.background = "#aaa";
resize.left = resize.offsetLeft;
document.onmousemove = throttle(e2 => {
@@ -330,14 +331,8 @@ export default {
},10);
document.onmouseup = () => {
// 颜色恢复
resize.style.background = "#fafafa";
resize.addEventListener("mouseover", function() {
resize.style.backgroundColor = "#ccc";
});
resize.addEventListener("mouseout", function() {
resize.style.backgroundColor = "#fafafa";
});
resize.style.setProperty("--rightResizeColor", "#fafafa");
//resize.style.background = "#fafafa";
//resizeBar.style.background = "#ccc";
document.onmousemove = null;
document.onmouseup = null;
@@ -433,11 +428,15 @@ html, body {
display: inline-block;
}
:root {
--rightResizeColor: #fafafa;
}
.right-resize {
width: 5px;
height: 100%;
cursor: w-resize;
background: #fafafa;
background: var(--rightResizeColor);
}
.right-resize:hover{

View File

@@ -29,7 +29,7 @@
<el-button icon="el-icon-refresh-left" size="small" @click="refreshData">重置</el-button>
<el-button @click="downloadTableData" type="success" size="small" icon="el-icon-download" plain
style="margin-left: 30px;">导出
style="margin-left: 10px;">导出
</el-button>
</div>
</el-card>
@@ -100,8 +100,8 @@
</el-tooltip>
</template>
<template slot-scope="scope">
<textarea readonly :value="scope.row[item.prop]" class="el-textarea__inner"
rows="1"></textarea>
<input title="" :value="scope.row[item.prop]" class="el-textarea__inner"
></input>
</template>
</ux-table-column>
</ux-grid>
@@ -280,16 +280,7 @@ export default {
'ace-editor': aceEditor
},
mounted: function () {
this.height = 360;
// 延迟设置展开的目录edit比app先初始化
// setTimeout(() => {
// this.doExecutorSqlCommon();
// this.$emit('initLoadDataList', {
// sourceId: this.vueQueryParam.sourceId,
// host: this.vueQueryParam.host,
// dbName: this.vueQueryParam.dbName
// });
// }, 500);
this.height = document.body.clientHeight - 330;
let resizeWindow = () => {
this.tableMaxHeight = document.body.clientHeight - 420;
};
@@ -376,6 +367,7 @@ export default {
},
doAceEditorShow() {
this.aceEditorShow = !this.aceEditorShow
this.aceEditorShow?this.height = this.height - 125:this.height = this.height + 125;
},
doExecutorSqlCommon() {
if (!this.pageParam.sourceId) {
@@ -678,6 +670,7 @@ export default {
line-height: 26px;
padding: 0;
resize: none;
font-size: 12px;
}
.data-executor-vue .execute-use-time {

View File

@@ -141,8 +141,8 @@
</el-tooltip>
</template>
<template slot-scope="scope">
<textarea readonly :value="scope.row[item.prop]" class="el-textarea__inner"
rows="1"></textarea>
<input title="" :value="scope.row[item.prop]" class="el-textarea__inner"
></input>
</template>
</ux-table-column>
</ux-grid>
@@ -529,6 +529,7 @@ export default {
this.executeResultInfo = executeResultInfo;
this.executeResultList = executeResultList;
this.loadHistoryList();
});
},
//查看所有数据
@@ -730,7 +731,8 @@ export default {
resize.onmousedown = e => {
let startY = e.clientY;
// 颜色改变提醒
resize.style.background = "#ccc";
resize.style.setProperty("--topResizeColor", "#ccc");
//resize.style.background = "#ccc";
//resizeBar.style.background = "#aaa";
resize.left = resize.offsetLeft;
document.onmousemove = throttle( e2 => {
@@ -751,14 +753,8 @@ export default {
},10);
document.onmouseup = () => {
// 颜色恢复
resize.style.background = "#fafafa";
resize.addEventListener("mouseover", function() {
resize.style.backgroundColor = "#ccc";
});
resize.addEventListener("mouseout", function() {
resize.style.backgroundColor = "#fafafa";
});
resize.style.setProperty("--topResizeColor", "#fafafa");
//resize.style.background = "#fafafa";
//resizeBar.style.background = "#ccc";
document.onmousemove = null;
document.onmouseup = null;
@@ -851,6 +847,7 @@ export default {
line-height: 26px;
padding: 0;
resize: none;
font-size: 12px;
}
.data-executor-vue .sql-content-line {
@@ -924,11 +921,15 @@ export default {
display: none;
}
:root {
--topResizeColor: #fafafa;
}
.top-resize {
width: 100%;
height: 5px;
cursor: s-resize;
background: #fafafa;
background: var(--topResizeColor);
display: flex;
}

View File

@@ -17,7 +17,7 @@
<el-button plain type="primary" @click="showCreateTableDdl" style="margin-left: 10px;" icon="el-icon-magic-stick">DDL</el-button>
</el-col>
</el-row>
<el-table :data="columnList" stripe border style="width: 100%; margin-bottom: 5px;">
<el-table :data="columnList" stripe border :height="height" style="width: 100%; margin-bottom: 5px;">
<el-table-column prop="name" label="字段名" width="220"></el-table-column>
<el-table-column label="自增" width="50">
<template slot-scope="scope">{{scope.row.selfIncrement ? '是' : '否'}}</template>
@@ -150,6 +150,7 @@
tableDDLInfoDialogVisible: false,
// 标签
tabActiveName: 'columns',
height: document.body.clientHeight - 200
};
},
mounted: function () {