Skip to content

Commit 8ce9e24

Browse files
T-miracleT-miracle
committed
Update: loading
1 parent 8596e28 commit 8ce9e24

File tree

3 files changed

+178
-59
lines changed

3 files changed

+178
-59
lines changed

‎package/App.vue‎

Lines changed: 1 addition & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,11 @@
11
<template>
2-
<div
3-
ref="root"
4-
class="relative h-screen w-screen"
5-
>
2+
<div class="relative h-screen w-screen">
63
<NanoContainer/>
74
</div>
85
</template>
96

107
<script setup lang="ts">
118
import NanoContainer from '@NanoUI/NanoContainer/index.vue';
12-
import { onBeforeUnmount, onMounted, ref } from 'vue';
13-
import { controllerStore } from '@store/controller';
14-
15-
const ctl = controllerStore();
16-
17-
const root = ref<HTMLElement | null>(null);
18-
const resizeObserver = ref<ResizeObserver | null>(null);
19-
20-
onMounted(() => {
21-
const htmlEl = document.documentElement;
22-
resizeObserver.value = new ResizeObserver((entries: ResizeObserverEntry[]) => {
23-
for (const entry of entries) {
24-
const { target } = entry;
25-
const { clientWidth } = target as HTMLElement;
26-
if (clientWidth < 1280) {
27-
htmlEl.style.setProperty('font-size', '13px');
28-
ctl.allowDrag = false;
29-
ctl.hideLeftSidebar = true;
30-
ctl.hideRightSidebar = true;
31-
ctl.hideLeftActionBar = true;
32-
ctl.hideRightActionBar = true;
33-
ctl.showDirModal = true;
34-
ctl.hideHeaderTopNav = true;
35-
ctl.hidePaths = true;
36-
ctl.hideCopyright = true;
37-
} else {
38-
if (clientWidth >= 2440) {
39-
htmlEl.style.setProperty('font-size', '18px');
40-
} else if (clientWidth >= 1600) {
41-
htmlEl.style.setProperty('font-size', '16px');
42-
} else {
43-
htmlEl.style.setProperty('font-size', '14px');
44-
}
45-
ctl.allowDrag = false;
46-
ctl.hideLeftSidebar = false;
47-
ctl.hideRightSidebar = false;
48-
ctl.hideLeftActionBar = false;
49-
ctl.hideRightActionBar = false;
50-
ctl.showDirModal = false;
51-
ctl.hideHeaderTopNav = false;
52-
ctl.hidePaths = false;
53-
ctl.hideCopyright = false;
54-
}
55-
}
56-
});
57-
resizeObserver.value.observe(htmlEl);
58-
});
59-
60-
onBeforeUnmount(() => {
61-
resizeObserver.value?.disconnect();
62-
});
639
</script>
6410

6511
<style lang="scss">

‎package/components/NanoContainer/index.vue‎

Lines changed: 66 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
<template>
2-
<div class="absolute h-full w-full flex flex-col">
3-
<NanoHeader/>
4-
<NanoBody/>
5-
<NanoFooter/>
2+
<div
3+
ref="root"
4+
class="absolute h-full w-full flex flex-col"
5+
>
6+
<template v-if="!loading">
7+
<NanoHeader/>
8+
<NanoBody/>
9+
<NanoFooter/>
10+
</template>
611

12+
<NanoLoading v-else/>
713
<NanoBackdrop/>
814
<NanoNavModal/>
915
<NanoSidebarDirModal/>
@@ -14,9 +20,65 @@
1420
import NanoHeader from '@NanoUI/NanoHeader/index.vue';
1521
import NanoBody from '@NanoUI/NanoBody/index.vue';
1622
import NanoFooter from '@NanoUI/NanoFooter/index.vue';
23+
import NanoLoading from '@NanoUI/NanoLoading/index.vue';
1724
import NanoBackdrop from '@NanoUI/NanoBackdrop/index.vue';
1825
import NanoNavModal from '@NanoUI/NanoNavModal/index.vue';
1926
import NanoSidebarDirModal from '@NanoUI/NanoSidebarDirModal/index.vue';
27+
import { onBeforeUnmount, onMounted, ref } from 'vue';
28+
import { controllerStore } from '@store/controller';
29+
30+
const ctl = controllerStore();
31+
32+
const root = ref<HTMLElement | null>(null);
33+
const resizeObserver = ref<ResizeObserver | null>(null);
34+
const loading = ref(true);
35+
36+
onMounted(() => {
37+
const htmlEl = document.documentElement;
38+
resizeObserver.value = new ResizeObserver((entries: ResizeObserverEntry[]) => {
39+
for (const entry of entries) {
40+
const { target } = entry;
41+
const { clientWidth } = target as HTMLElement;
42+
if (clientWidth < 1280) {
43+
htmlEl.style.setProperty('font-size', '13px');
44+
ctl.allowDrag = false;
45+
ctl.hideLeftSidebar = true;
46+
ctl.hideRightSidebar = true;
47+
ctl.hideLeftActionBar = true;
48+
ctl.hideRightActionBar = true;
49+
ctl.showDirModal = true;
50+
ctl.hideHeaderTopNav = true;
51+
ctl.hidePaths = true;
52+
ctl.hideCopyright = true;
53+
} else {
54+
if (clientWidth >= 2440) {
55+
htmlEl.style.setProperty('font-size', '18px');
56+
} else if (clientWidth >= 1600) {
57+
htmlEl.style.setProperty('font-size', '16px');
58+
} else {
59+
htmlEl.style.setProperty('font-size', '14px');
60+
}
61+
ctl.allowDrag = false;
62+
ctl.hideLeftSidebar = false;
63+
ctl.hideRightSidebar = false;
64+
ctl.hideLeftActionBar = false;
65+
ctl.hideRightActionBar = false;
66+
ctl.showDirModal = false;
67+
ctl.hideHeaderTopNav = false;
68+
ctl.hidePaths = false;
69+
ctl.hideCopyright = false;
70+
}
71+
}
72+
setTimeout(() => {
73+
loading.value = false;
74+
}, 1000);
75+
});
76+
resizeObserver.value.observe(htmlEl);
77+
});
78+
79+
onBeforeUnmount(() => {
80+
resizeObserver.value?.disconnect();
81+
});
2082
</script>
2183

2284
<style scoped lang="scss">

‎package/components/NanoLoading/index.vue‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<template>
2+
<div class="box">
3+
<div class="cat">
4+
<div class="cat__body"/>
5+
<div class="cat__body"/>
6+
<div class="cat__tail"/>
7+
<div class="cat__head"/>
8+
</div>
9+
</div>
10+
</template>
11+
12+
<script setup lang="ts">
13+
14+
</script>
15+
16+
<style scoped lang="scss">
17+
@mixin fill-full($dir: 'full', $type: absolute) {
18+
position: $type;
19+
@if $dir != 'bottom' {top: 0; }
20+
@if $dir != 'right' {left: 0; }
21+
@if $dir != 'left' {right: 0; }
22+
@if $dir != 'top' {bottom: 0; }
23+
}
24+
25+
.cat {
26+
position: relative;
27+
width: 100%;
28+
max-width: 20em;
29+
overflow: hidden;
30+
background-color: #e6dcdc;
31+
32+
&::before {
33+
content: '';
34+
display: block;
35+
padding-bottom: 100%;
36+
}
37+
38+
// &:hover > * { animation-play-state: paused; }
39+
&:active > * { animation-play-state: running; }
40+
}
41+
42+
%cat-img {
43+
@include fill-full;
44+
animation: rotating 2.79s cubic-bezier(.65, .54, .12, .93) infinite;
45+
46+
&::before {
47+
content: '';
48+
position: absolute;
49+
width: 50%;
50+
height: 50%;
51+
background-size: 200%;
52+
background-repeat: no-repeat;
53+
background-image: url('https://images.weserv.nl/?url=i.imgur.com/M1raXX3.png&il');
54+
}
55+
}
56+
57+
.cat__head {
58+
@extend %cat-img;
59+
60+
&::before {
61+
top: 0;
62+
right: 0;
63+
background-position: 100% 0%;
64+
transform-origin: 0% 100%;
65+
transform: rotate(90deg);
66+
}
67+
}
68+
69+
.cat__tail {
70+
@extend %cat-img;
71+
animation-delay: .2s;
72+
73+
&::before {
74+
left: 0;
75+
bottom: 0;
76+
background-position: 0% 100%;
77+
transform-origin: 100% 0%;
78+
transform: rotate(-30deg);
79+
}
80+
}
81+
82+
.cat__body {
83+
@extend %cat-img;
84+
animation-delay: .1s;
85+
86+
&:nth-of-type(2) {
87+
animation-delay: .2s;
88+
}
89+
90+
&::before {
91+
right: 0;
92+
bottom: 0;
93+
background-position: 100% 100%;
94+
transform-origin: 0% 0%;
95+
}
96+
}
97+
98+
@keyframes rotating {
99+
from { transform: rotate(720deg); }
100+
to { transform: none; }
101+
}
102+
103+
.box {
104+
display: flex;
105+
flex: 1;
106+
flex-direction: column;
107+
justify-content: center;
108+
align-items: center;
109+
background-color: #e6dcdc;
110+
}
111+
</style>

0 commit comments

Comments
 (0)