Skip to content

Commit 4af78b3

Browse files
Pure-PeacePure-Peace
committed
Well done...
1 parent c80f854 commit 4af78b3

File tree

6 files changed

+167
-30
lines changed

6 files changed

+167
-30
lines changed

‎src/assets/svg/json.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/assets/svg/menu.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/renderer/components/fileManager/fileInfo.vue

Lines changed: 48 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,7 @@
11
<template>
22
<div class="file-detail-box">
3-
<div class="file-info-control-bar">
4-
<div
5-
v-for="(item, idx) in controlButtons"
6-
:key="`controlbtn${idx}`"
7-
>
8-
<div
9-
v-if="file"
10-
:class="controlButtonClass(item)"
11-
:title="item.title"
12-
@click="item.handler"
13-
>
14-
<span>{{ item.label }}</span>
15-
<span style="padding: 0 5px;">
16-
<svg-icon :icon-class="item.icon" />
17-
</span>
18-
</div>
19-
</div>
20-
</div>
21-
<vue-scroll :ops="scrollBarOptions">
22-
<div slot="scroll-content">
3+
<div style="height: calc(100% - 60px);">
4+
<vue-scroll :ops="scrollBarOptions">
235
<div
246
v-if="!file || view === 'dir'"
257
class="file-non-select-file"
@@ -182,9 +164,25 @@
182164
</div>
183165
</div>
184166
</div>
185-
<div style="height: 55px;" />
167+
</vue-scroll>
168+
</div>
169+
<div class="file-info-toolbar">
170+
<div
171+
v-for="(item, idx) in controlButtons"
172+
:key="`controlbtn${idx}`"
173+
>
174+
<div
175+
v-if="file"
176+
:class="controlButtonClass(item)"
177+
:title="item.title"
178+
@click="item.handler"
179+
>
180+
<span style="padding: 0 5px;">
181+
<svg-icon :icon-class="item.icon" />
182+
</span>
183+
</div>
186184
</div>
187-
</vue-scroll>
185+
</div>
188186
</div>
189187
</template>
190188

@@ -288,8 +286,11 @@ export default {
288286
}
289287
},
290288
controlButtonClass () {
291-
return (item) => {
292-
return 'control-button' + (this.view === item.view ? ' control-button-actived' : '')
289+
return item => {
290+
return (
291+
'control-button' +
292+
(this.view === item.view ? ' control-button-actived' : '')
293+
)
293294
}
294295
}
295296
},
@@ -313,7 +314,9 @@ export default {
313314
this.dirCount = dirCount
314315
this.fileCount = fileCount
315316
this.sizeTotal = sizeTotal
316-
if (dirCount > 0) { filters[':directory:'] = { status: true, count: dirCount } }
317+
if (dirCount > 0) {
318+
filters[':directory:'] = { status: true, count: dirCount }
319+
}
317320
this.fileTypeFilters = filters
318321
this.calcing = false
319322
},
@@ -322,6 +325,9 @@ export default {
322325
}
323326
},
324327
methods: {
328+
test () {
329+
console.log(111)
330+
},
325331
fileFiltersContextmenu (event) {
326332
// 菜单项处理函数
327333
const handleFilter = (handle, status) => {
@@ -439,8 +445,9 @@ export default {
439445
440446
.file-detail-box {
441447
flex: 1;
448+
position: relative;
442449
border-left: 1px dashed #d5d8e3;
443-
min-width: 200px;
450+
min-width: 260px;
444451
}
445452
446453
.file-detail-content {
@@ -463,6 +470,8 @@ export default {
463470
align-items: center;
464471
font-size: 13px;
465472
font-weight: bold;
473+
word-wrap: normal;
474+
word-break: break-all;
466475
}
467476
468477
.file-info-head {
@@ -511,9 +520,7 @@ export default {
511520
border-bottom: 1px dashed #d5d8e3;
512521
height: 55px;
513522
align-items: center;
514-
justify-content: flex-end;
515-
overflow: hidden;
516-
flex-wrap: wrap;
523+
justify-content: space-around;
517524
}
518525
519526
.control-button {
@@ -595,4 +602,16 @@ export default {
595602
font-weight: bold;
596603
margin-right: 2px;
597604
}
605+
606+
.file-info-toolbar {
607+
position: absolute;
608+
display: flex;
609+
bottom: 0;
610+
height: 60px;
611+
width: 100%;
612+
align-items: center;
613+
justify-content: center;
614+
background-color: #FAFAFA;
615+
border-top: 1px dashed #d5d8e3;
616+
}
598617
</style>

‎src/renderer/components/fileManager/fileManager.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
@filterChange="(changedFilters)=>{filters = changedFilters}"
5858
@unselectFile="file => handleSelectFile(file, 'unselect')"
5959
/>
60+
<float-button />
6061
</div>
6162
</template>
6263

@@ -71,6 +72,7 @@ import fileListTopbar from './fileListTopbar.vue'
7172
import vueLoading from 'vue-element-loading'
7273
import dragResize from 'components/dragResize.vue'
7374
import emptyStatus from 'components/emptyStatus.vue'
75+
import floatButton from 'components/floatButton.vue'
7476
7577
const log = console.log
7678
@@ -81,7 +83,8 @@ export default {
8183
vueLoading,
8284
fileListTopbar,
8385
emptyStatus,
84-
fileListItem
86+
fileListItem,
87+
floatButton
8588
},
8689
props: {
8790
targetDir: {

‎src/renderer/components/floatButton.vue

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<template>
2+
<div
3+
v-drag
4+
class="float-button-box"
5+
@click="test"
6+
>
7+
<span :style="floatButtonIconStyle"><svg-icon :icon-class="icon" /></span>
8+
</div>
9+
</template>
10+
11+
<script>
12+
let moving = false
13+
14+
export default {
15+
directives: {
16+
drag (el) {
17+
el.onmousedown = ev => {
18+
const disX = ev.clientX - el.offsetLeft
19+
const disY = ev.clientY - el.offsetTop
20+
const starX = ev.clientX
21+
const starY = ev.clientY
22+
moving = false
23+
24+
document.onmousemove = ev => {
25+
let left = ev.clientX - disX
26+
let top = ev.clientY - disY
27+
const clientWidth = document.documentElement.clientWidth
28+
const clientHeight = document.documentElement.clientHeight
29+
30+
// 横向磁吸，防止横向超出窗口
31+
if (left < 80) left = 80
32+
else if (left > clientWidth - el.offsetWidth - 40) { left = clientWidth - el.offsetWidth - 40 }
33+
34+
// 纵向磁吸，防止纵向超出窗口
35+
if (top < 70) top = 70
36+
if (top > clientHeight - el.offsetHeight - 30) { top = clientHeight - el.offsetHeight - 30 }
37+
38+
if (
39+
!moving &&
40+
Math.abs(ev.clientX - starX) + Math.abs(ev.clientY - starY) > 5
41+
) { moving = true }
42+
if (moving) {
43+
// 更改位置
44+
el.style.left = (left / clientWidth * 100).toFixed(2) + '%'
45+
el.style.top = (top / clientHeight * 100).toFixed(2) + '%'
46+
}
47+
}
48+
49+
document.onmouseup = () => {
50+
document.onmousemove = document.onmouseup = null
51+
}
52+
}
53+
}
54+
},
55+
props: {
56+
icon: {
57+
type: String,
58+
default: 'menu'
59+
},
60+
size: {
61+
type: Number,
62+
default: 22
63+
}
64+
},
65+
data () {
66+
return {}
67+
},
68+
computed: {
69+
floatButtonIconStyle () {
70+
return `font-size: ${this.size}px;`
71+
}
72+
},
73+
methods: {
74+
test () {
75+
if (!moving) {
76+
console.log(111)
77+
}
78+
}
79+
}
80+
}
81+
</script>
82+
83+
<style lang="less" scoped>
84+
@import "../themes/light.less";
85+
86+
.float-button-box {
87+
position: absolute;
88+
z-index: 50;
89+
top: 85%;
90+
left: 90%;
91+
height: 50px;
92+
width: 50px;
93+
border-radius: 50%;
94+
display: flex;
95+
justify-content: center;
96+
align-items: center;
97+
background-color: @primary;
98+
color: @white;
99+
cursor: pointer;
100+
transition: filter .2s ease;
101+
box-shadow: 0 4px 2px -2px rgba(128, 128, 128, 0.4);
102+
}
103+
104+
.float-button-box:hover {
105+
filter: brightness(1.1);
106+
}
107+
108+
.float-button-box:active {
109+
filter: brightness(.9);
110+
}
111+
</style>

‎src/renderer/themes/global.less

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ body {
55
width: 100%;
66
height: 100%;
77
user-select: none;
8+
overflow: hidden;
9+
810
}
911

1012
button {

0 commit comments

Comments
 (0)