Skip to content

Commit f9ea8be

Browse files
T-miracleT-miracle
committed
Update: 布局改为flex
1 parent 7d5a217 commit f9ea8be

File tree

11 files changed

+61
-85
lines changed

11 files changed

+61
-85
lines changed

‎package/App.vue‎

Lines changed: 41 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -23,49 +23,47 @@
2323
for (const entry of entries) {
2424
const { target } = entry;
2525
const { clientWidth } = target as HTMLElement;
26-
setTimeout(() => {
27-
if (clientWidth >= 2560) {
28-
htmlEl.style.setProperty('font-size', '18px');
29-
ctl.allowDrag = true;
30-
ctl.articleFullscreen = false;
31-
ctl.hideLeftSidebar = false;
32-
ctl.hideRightSidebar = false;
33-
ctl.hideActionBar = false;
34-
ctl.hideHeaderTopNav = false;
35-
ctl.hidePaths = false;
36-
ctl.hideCopyright = false;
37-
} else if (clientWidth >= 1920) {
38-
htmlEl.style.setProperty('font-size', '16px');
39-
ctl.allowDrag = true;
40-
ctl.articleFullscreen = false;
41-
ctl.hideLeftSidebar = false;
42-
ctl.hideRightSidebar = false;
43-
ctl.hideActionBar = false;
44-
ctl.hideHeaderTopNav = false;
45-
ctl.hidePaths = false;
46-
ctl.hideCopyright = false;
47-
} else if (clientWidth >= 1280) {
48-
htmlEl.style.setProperty('font-size', '14px');
49-
ctl.allowDrag = false;
50-
ctl.articleFullscreen = false;
51-
ctl.hideLeftSidebar = false;
52-
ctl.hideRightSidebar = false;
53-
ctl.hideActionBar = false;
54-
ctl.hideHeaderTopNav = false;
55-
ctl.hidePaths = false;
56-
ctl.hideCopyright = false;
57-
} else {
58-
htmlEl.style.setProperty('font-size', '12px');
59-
ctl.allowDrag = false;
60-
ctl.articleFullscreen = true;
61-
ctl.hideLeftSidebar = true;
62-
ctl.hideRightSidebar = true;
63-
ctl.hideActionBar = true;
64-
ctl.hideHeaderTopNav = true;
65-
ctl.hidePaths = true;
66-
ctl.hideCopyright = true;
67-
}
68-
}, 100);
26+
if (clientWidth >= 2560) {
27+
htmlEl.style.setProperty('font-size', '18px');
28+
ctl.allowDrag = true;
29+
ctl.hideLeftSidebar = false;
30+
ctl.hideRightSidebar = false;
31+
ctl.hideLeftActionBar = false;
32+
ctl.hideRightActionBar = false;
33+
ctl.hideHeaderTopNav = false;
34+
ctl.hidePaths = false;
35+
ctl.hideCopyright = false;
36+
} else if (clientWidth >= 1920) {
37+
htmlEl.style.setProperty('font-size', '16px');
38+
ctl.allowDrag = true;
39+
ctl.hideLeftSidebar = false;
40+
ctl.hideRightSidebar = false;
41+
ctl.hideLeftActionBar = false;
42+
ctl.hideRightActionBar = false;
43+
ctl.hideHeaderTopNav = false;
44+
ctl.hidePaths = false;
45+
ctl.hideCopyright = false;
46+
} else if (clientWidth >= 1280) {
47+
htmlEl.style.setProperty('font-size', '14px');
48+
ctl.allowDrag = false;
49+
ctl.hideLeftSidebar = false;
50+
ctl.hideRightSidebar = false;
51+
ctl.hideLeftActionBar = false;
52+
ctl.hideRightActionBar = true;
53+
ctl.hideHeaderTopNav = false;
54+
ctl.hidePaths = false;
55+
ctl.hideCopyright = false;
56+
} else {
57+
htmlEl.style.setProperty('font-size', '12px');
58+
ctl.allowDrag = false;
59+
ctl.hideLeftSidebar = true;
60+
ctl.hideRightSidebar = true;
61+
ctl.hideLeftActionBar = true;
62+
ctl.hideRightActionBar = true;
63+
ctl.hideHeaderTopNav = true;
64+
ctl.hidePaths = true;
65+
ctl.hideCopyright = true;
66+
}
6967
}
7068
});
7169
resizeObserver.value.observe(htmlEl);

‎package/components/NanoBody/index.vue‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<template>
2-
<NanoLeftActionBar v-if="!ctl.hideActionBar"/>
3-
<NanoLeftSidebar v-if="!ctl.hideLeftSidebar"/>
4-
<NanoMain/>
5-
<NanoRightSidebar v-if="!ctl.hideRightSidebar"/>
6-
<NanoRightActionBar v-if="!ctl.hideActionBar"/>
2+
<div class="relative grow flex items-stretch min-h-0">
3+
<NanoLeftActionBar v-if="!ctl.hideLeftActionBar"/>
4+
<NanoLeftSidebar v-if="!ctl.hideLeftSidebar"/>
5+
<NanoMain/>
6+
<NanoRightSidebar v-if="!ctl.hideRightSidebar"/>
7+
<NanoRightActionBar v-if="!ctl.hideRightActionBar"/>
8+
</div>
79
</template>
810

911
<script setup lang="ts">

‎package/components/NanoContainer/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="absolute h-full w-full">
2+
<div class="absolute h-full w-full flex flex-col">
33
<NanoHeader/>
44
<NanoBody/>
55
<NanoFooter/>

‎package/components/NanoFooter/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<footer
3-
class="absolute left-0 bottom-0 z-100 w-full h-[var(--footer-size)] overflow-hidden"
3+
class="shrink-0 z-100 w-full h-[var(--footer-size)] overflow-hidden"
44
un-border="t-solid t-1px t-[var(--footer-border-color)]"
55
un-flex="~ items-center justify-between shrink-0"
66
style="background: var(--footer-bg);"

‎package/components/NanoHeader/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<header
3-
class="absolute top-0 left-0 z-100 w-full h-[var(--header-size)]"
3+
class="shrink-0 z-100 w-full h-[var(--header-size)]"
44
un-flex="~ justify-between"
55
un-border="b-solid b-1px b-[var(--header-border-color)]"
66
style="--s: var(--header-size); background: var(--header-bg)"

‎package/components/NanoLeftActionBar/index.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<template>
22
<div
3-
class="absolute left-0 top-0 z-20 h-full w-[var(--action-bar-size)]"
3+
class="shrink-0 h-full w-[var(--action-bar-size)]"
44
un-border="r-1px r-solid r-[var(--action-bar-border-color)]"
5-
un-p="t-[var(--header-size)] b-[var(--footer-size)]"
65
un-flex="~ col items-center justify-between"
76
style="background: var(--action-bar-bg)"
87
>

‎package/components/NanoLeftSidebar/index.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
22
<div
3-
class="absolute left-[var(--action-bar-size)] top-0 z-20 h-full w-[var(--sidebar-left-size)]"
4-
un-p="t-[var(--header-size)] b-[var(--footer-size)]"
3+
class="shrink-0 z-20 h-full w-[var(--sidebar-left-size)]"
54
un-border="r-solid r-1px r-[var(--sidebar-border-color)]"
5+
un-flex="~ col"
66
style="background: var(--sidebar-bg)"
77
>
88
<div class="relative w-full h-full">

‎package/components/NanoMain/index.vue‎

Lines changed: 3 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
<template>
22
<div
3-
class="absolute bg-white mx-auto vp-doc"
4-
un-h="[calc(100%-var(--header-size)-var(--footer-size))]"
5-
un-top="[var(--header-size)]"
6-
:style="mainClass"
3+
class="grow h-full bg-white min-w-0 vp-doc"
74
>
85
<!--content area-->
96
<div class="relative w-full h-full">
@@ -30,31 +27,12 @@
3027
import 'overlayscrollbars/styles/overlayscrollbars.css';
3128
import scrollbarOptions from '../../config/scrollbarOptions';
3229
import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
33-
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
30+
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
3431
import { onContentUpdated, useRoute } from 'vitepress';
3532
import emitter from '../../emitter';
36-
import { controllerStore } from '@store/controller';
37-
38-
const ctl = controllerStore();
39-
40-
const scrollbars = ref<any | null>(null);
41-
const article = ref<HTMLElement | null>(null);
4233
4334
const route = useRoute();
44-
45-
const mainClass = computed(() => {
46-
if (ctl.articleFullscreen) {
47-
return {
48-
width: '100%',
49-
left: 0
50-
};
51-
} else {
52-
return {
53-
width: 'calc(100% - var(--action-bar-size) * 2 - var(--sidebar-left-size) - var(--sidebar-right-size))',
54-
left: 'calc(var(--action-bar-size) + var(--sidebar-left-size))'
55-
};
56-
}
57-
});
35+
const scrollbars = ref<any | null>(null);
5836
5937
// Listen for routing changes and scroll to the top
6038
watch(() => route.path, () => {

‎package/components/NanoRightActionBar/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div
3-
class="absolute right-0 top-0 z-20 h-full w-[var(--action-bar-size)]"
3+
class="shrink-0 z-20 h-full w-[var(--action-bar-size)]"
44
un-border="l-1px l-solid l-[var(--action-bar-border-color)]"
55
style="background: var(--action-bar-bg)"
66
/>

‎package/components/NanoRightSidebar/index.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<template>
22
<div
3-
class="absolute right-[var(--action-bar-size)] top-0 z-20 h-full w-[var(--sidebar-right-size)]"
3+
class="shrink-0 z-20 h-full w-[var(--sidebar-right-size)]"
44
un-border="l-solid l-1px l-[var(--sidebar-border-color)]"
5-
un-p="t-[var(--header-size)] b-[var(--footer-size)]"
65
style="background: var(--sidebar-bg)"
76
>
87
<div class="relative h-full w-full">

0 commit comments

Comments
 (0)