Skip to content

Commit cccf7f9

Browse files
author
zhaoqiangqiang
committed
添加loading样式
1 parent 83596df commit cccf7f9

File tree

6 files changed

+186
-127
lines changed

6 files changed

+186
-127
lines changed

‎Gui/HiDb.Vue/src/main/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ let childProcess;
1111

1212
// 启动后台子进程
1313
function runAppInBackground() {
14-
const assetsPath = path.join(__dirname, '..','..', 'publish');
14+
const assetsPath = path.join(__dirname, '..', 'publish');
1515
const exePath = path.join(assetsPath, 'HiDb.Api.exe');
1616
const options = {
1717
detached: true,

‎Gui/HiDb.Vue/src/main/services/windowManager.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -179,8 +179,8 @@ class MainInit {
179179
// 加载窗口函数
180180
loadingWindow(loadingURL: string) {
181181
this.loadWindow = new BrowserWindow({
182-
width: 400,
183-
height: 600,
182+
width: 614,
183+
height: 614,
184184
frame: false,
185185
skipTaskbar: true,
186186
transparent: true,

‎Gui/HiDb.Vue/src/renderer/components/MainPage.vue

Lines changed: 159 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<a-layout class="main">
3-
<a-layout-header class="header">
2+
<div class="main">
3+
<div class="header">
44
<div class="btn">
55
<a-dropdown>
66
<a-button ghost>操作</a-button>
@@ -57,9 +57,9 @@
5757
</template>
5858
</a-dropdown>
5959
</div>
60-
</a-layout-header>
61-
<a-layout>
62-
<a-layout-sider width="200" class="menu">
60+
</div>
61+
<div class="content">
62+
<div class="menu" :key="refreshKey1" :style="{ 'width': menuWidth + 'px' }">
6363
<a-spin :spinning="currloading">
6464
<div class="search">
6565
<a-input-search v-model:value="searchValue"
@@ -74,7 +74,9 @@
7474
@select="onSelect"
7575
:tree-data="treeData"
7676
>
77-
<template #switcherIcon="{ switcherCls }"><down-outlined :class="switcherCls" /></template>
77+
<template #switcherIcon="{ switcherCls }">
78+
<down-outlined :class="switcherCls" />
79+
</template>
7880
<template #icon="{ type, selected }">
7981
<template v-if="type === 'db'">
8082
<database-outlined />
@@ -85,13 +87,17 @@
8587
<template v-if="type === 'table'">
8688
<table-outlined />
8789
</template>
90+
<template v-if="type === 'tablenull'">
91+
<borderless-table-outlined />
92+
</template>
8893
</template>
8994
</a-tree>
9095
<a-empty v-if="!treeData.length" description="暂无数据库列表" />
9196
</div>
9297
</a-spin>
93-
</a-layout-sider>
94-
<a-layout class="work" style="padding: 0 8px 8px">
98+
</div>
99+
<div class="drap-line" @mousedown="leftResize"></div>
100+
<div class="work" :key="refreshKey2" :style="{ 'width': 'calc(100% - '+ (menuWidth + 20) + ')px' }">
95101
<a-spin :spinning="currloading">
96102
<div class="tools">
97103
<a-tooltip title="执行">
@@ -102,8 +108,7 @@
102108
<a-button :icon="h(RedoOutlined)">撤销</a-button>
103109
</a-tooltip>
104110
</div>
105-
<a-layout-content class="content"
106-
:style="{ background: '#fff', padding: '6px', margin: 0, minHeight: '280px' }" >
111+
<div class="context" >
107112
<div class="sql">
108113
<a-textarea class="input" ref="textarea"
109114
v-model:value="optValue" @click="handleClick"
@@ -129,10 +134,10 @@
129134
总记录行数:{{ pagination.total }} | 当前查询页大小:{{ pagination.pageSize }}
130135
</div>
131136
</div>
132-
</a-layout-content>
137+
</div>
133138
</a-spin>
134-
</a-layout>
135-
</a-layout>
139+
</div>
140+
</div>
136141
<a-modal v-model:open="openDbListDialog" title="数据库列表" width="680px" height="550px">
137142
<div class="db-dialog">
138143
<a-table class="table"
@@ -238,13 +243,13 @@
238243
<a-button key="submit" type="primary" :loading="submitOpenDbLoading" @click="submitOpenDb">连接</a-button>
239244
</template>
240245
</a-modal>
241-
</a-layout>
246+
</div>
242247
</template>
243248

244249
<script lang="ts" setup>
245250
import { cloneDeep } from 'lodash-es';
246251
import { h, ref, watch, onMounted, UnwrapRef, reactive } from 'vue';
247-
import { WifiOutlined,ApiOutlined,UserOutlined,AppstoreOutlined,DatabaseOutlined,FileAddOutlined,CaretRightOutlined,RedoOutlined, DownOutlined, TabletOutlined, TableOutlined, FrownOutlined, FrownFilled } from '@ant-design/icons-vue';
252+
import { WifiOutlined,ApiOutlined,UserOutlined,BorderlessTableOutlined,DatabaseOutlined,FileAddOutlined,CaretRightOutlined,RedoOutlined, DownOutlined, TabletOutlined, TableOutlined, FrownOutlined, FrownFilled } from '@ant-design/icons-vue';
248253
import { getDb,getMode,getTable } from '../api/menu';
249254
import { getSearch,execute} from '../api/search';
250255
import { connectDb } from '../api/datasource';
@@ -310,6 +315,36 @@ import { life } from '../api/life';
310315
clearCurrDbData();
311316
}
312317
}
318+
const menuWidth = ref(350); // 菜单宽度
319+
const refreshKey1 = ref<number>(0);
320+
const refreshKey2 = ref<number>(0);
321+
const mouseEventX = ref<number>(0);
322+
323+
const leftResize = (e: MouseEvent) => {
324+
//解决拖动会选中文字的问题\
325+
document.onselectstart = function () {
326+
return false;
327+
};
328+
const changeWidth = (documentE: MouseEvent) => {
329+
menuWidth.value = documentE.clientX;
330+
refreshKey1.value = refreshKey1.value + 1;
331+
refreshKey2.value = refreshKey1.value + 1;
332+
};
333+
const mouseMove = (documentE: MouseEvent) => {
334+
mouseEventX.value = documentE.clientX;
335+
changeWidth(documentE);
336+
};
337+
const mouseUp = () => {
338+
document.removeEventListener('mousemove', mouseMove);
339+
document.removeEventListener('mouseup', mouseUp);
340+
// 拖拽完记得重新设置可以选中
341+
document.onselectstart = function () {
342+
return true;
343+
};
344+
};
345+
document.addEventListener('mousemove', mouseMove);
346+
document.addEventListener('mouseup', mouseUp);
347+
};
313348
const selectedMenu: MenuProps['onClick'] = ({ key }) => {
314349
if (key == '1') {
315350
submitOpenDbList();
@@ -534,7 +569,7 @@ import { life } from '../api/life';
534569
treeNode.dataRef.children = res.data.map(c => {
535570
return {
536571
title: c.name,
537-
key: c.name,
572+
key: treeNode.title + '_' + c.name,
538573
isLeaf: false,
539574
type: 'mode',
540575
database: treeNode.title
@@ -548,15 +583,14 @@ import { life } from '../api/life';
548583
})
549584
} else if (treeNode.dataRef.type === 'mode') {
550585
getTable(treeNode.dataRef.database, treeNode.title, currDatabase.value.type).then(res=>{
551-
if (!res.data || res.data.length == 0) {
552-
treeNode.dataRef.children = res.data.map(c => {
553-
return {
554-
title: '暂无表数据',
555-
key: '暂无表数据',
556-
isLeaf: true,
557-
type: 'tablenull',
558-
}
559-
});
586+
if (!res.data || !res.data || res.data.length < 1) {
587+
treeNode.dataRef.children = [{
588+
title: '暂无表数据',
589+
key: '暂无表数据',
590+
isLeaf: true,
591+
disabled: true,
592+
type: 'tablenull',
593+
}];
560594
} else {
561595
treeNode.dataRef.children = res.data.map(c => {
562596
return {
@@ -783,6 +817,8 @@ import { life } from '../api/life';
783817
height: 100%;
784818
overflow-y: hidden;
785819
overflow-x: hidden;
820+
display: flex;
821+
flex-direction: column;
786822
787823
.header {
788824
height: 50px;
@@ -794,6 +830,7 @@ import { life } from '../api/life';
794830
flex-direction: row;
795831
align-items: center;
796832
justify-content: space-between;
833+
background-color: rgb(24, 24, 40);
797834
798835
.btn {
799836
width: 150px;
@@ -814,93 +851,111 @@ import { life } from '../api/life';
814851
}
815852
}
816853
}
817-
.menu {
818-
width: 300px !important;
819-
max-width: 300px !important;
820-
min-width: 300px !important;
821-
height: calc(100% - 16px);
822-
display: flex;
823-
flex-direction: column;
824-
padding: 8px;
825-
background-color: #fff;
826854
827-
.search {
828-
height: 45px;
829-
width: 100%;
830-
display: flex;
831-
flex-direction: row;
832-
align-items: center;
833-
justify-content: center;
834-
}
855+
.content{
856+
height: calc(100% - 50px);
857+
width: 100%;
858+
display: flex;
859+
flex-direction: row;
835860
836-
.tree {
837-
width: 100%;
838-
max-height: calc(100vh - 45px);
839-
overflow-y: auto;
840-
}
841-
}
842-
.work {
843-
height: calc(100vh - 80px);
844-
width: calc(100% - 350px);
861+
862+
.menu {
863+
height: calc(100% - 16px);
864+
display: flex;
865+
flex-direction: column;
866+
padding: 8px;
867+
background-color: #fff;
845868
846-
.tools {
847-
width: 100%;
848-
height: 40px;
849-
padding: 0 12px;
850-
display: flex;
851-
flex-direction: row;
852-
align-items: center;
853-
justify-content: flex-start;
854-
}
855-
.content {
856-
width: 100%;
857-
height: 100%;
858-
display: flex;
859-
flex-direction: column;
860-
padding: 0;
861-
margin: 0;
869+
.search {
870+
height: 45px;
871+
width: 100%;
872+
display: flex;
873+
flex-direction: row;
874+
align-items: center;
875+
justify-content: center;
876+
}
862877
863-
.sql {
864-
width: 100%;
865-
min-height: 105px;
866-
.input {
867-
height: calc(100% - 8px);
868-
margin: 4px;
869-
width: calc(100% - 8px);
870-
}
871-
}
872-
.data {
873-
width: 100%;
874-
height: 100%;
878+
.tree {
879+
width: 100%;
880+
max-height: calc(100vh - 45px);
881+
overflow-y: auto;
882+
}
883+
}
884+
.drap-line {
885+
height: 100%;
886+
width: 5px;
887+
background-color: #d0cece;
888+
border-radius: 6px;
889+
cursor: col-resize;
890+
z-index: 999;
891+
}
892+
.work {
893+
height: calc(100vh - 80px);
894+
padding: 0 0 8px 8px;
895+
flex: 1;
875896
876-
.table {
877-
width: 100%;
878-
height: calc(100% - 30px);
879-
}
880-
.table-line {
881-
width: 100%;
882-
height: 30px;
883-
font-size: 12px;
884-
color: #333333;
885-
padding: 0 6px;
886-
display: flex;
887-
flex-direction: row;
888-
align-items: center;
889-
justify-content: flex-start;
890-
background-color: #f5f5f5;
891-
border-radius: 8px;
892-
}
897+
.tools {
898+
width: 100%;
899+
height: 40px;
900+
padding: 0 12px;
901+
display: flex;
902+
flex-direction: row;
903+
align-items: center;
904+
justify-content: flex-start;
905+
}
906+
.context {
907+
width: 100%;
908+
height: 100%;
909+
display: flex;
910+
flex-direction: column;
911+
padding: 0;
912+
margin: 0;
913+
background: '#fff';
914+
padding: '6px';
915+
min-height: '280px';
893916
894-
.msg {
917+
.sql {
918+
width: 100%;
919+
min-height: 105px;
920+
.input {
921+
height: calc(100% - 8px);
922+
margin: 4px;
923+
width: calc(100% - 8px);
924+
}
925+
}
926+
.data {
895927
width: 100%;
896928
height: 100%;
897-
display: flex;
898-
flex-direction: column;
899-
align-items: flex-start;
900-
justify-content: flex-start;
901-
}
902-
}
903-
}
929+
930+
.table {
931+
width: 100%;
932+
height: calc(100% - 30px);
933+
}
934+
.table-line {
935+
width: 100%;
936+
height: 30px;
937+
font-size: 12px;
938+
color: #333333;
939+
padding: 0 6px;
940+
display: flex;
941+
flex-direction: row;
942+
align-items: center;
943+
justify-content: flex-start;
944+
background-color: #f5f5f5;
945+
border-radius: 8px;
946+
}
947+
948+
.msg {
949+
width: 100%;
950+
height: 100%;
951+
display: flex;
952+
flex-direction: column;
953+
align-items: flex-start;
954+
justify-content: flex-start;
955+
}
956+
}
957+
}
958+
}
904959
}
905960
}
906961
.db-dialog {

0 commit comments

Comments
 (0)