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-09 14:13:36 +08:00
parent a9e1766b05
commit 87e41e91c1
9 changed files with 36 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
zyplayer-doc-db/src/main/resources/dist/css/index.2f89c9fb.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.39888393.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.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>

1
zyplayer-doc-db/src/main/resources/dist/js/index.a03eda58.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.e843feca.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

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

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

19
zyplayer-doc-ui/db-ui/src/views/data/DataPreview.vue
View File

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

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

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

3
zyplayer-doc-ui/db-ui/src/views/table/Info.vue
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-button plain type="primary" @click="showCreateTableDdl" style="margin-left: 10px;" icon="el-icon-magic-stick">DDL</el-button>
</el-col> </el-col>
</el-row> </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 prop="name" label="字段名" width="220"></el-table-column>
<el-table-column label="自增" width="50"> <el-table-column label="自增" width="50">
<template slot-scope="scope">{{scope.row.selfIncrement ? '是' : '否'}}</template> <template slot-scope="scope">{{scope.row.selfIncrement ? '是' : '否'}}</template>
@@ -150,6 +150,7 @@
tableDDLInfoDialogVisible: false, tableDDLInfoDialogVisible: false,
// 标签 // 标签
tabActiveName: 'columns', tabActiveName: 'columns',
height: document.body.clientHeight - 200
}; };
}, },
mounted: function () { mounted: function () {