Skip to content

Commit 2412787

Browse files
T-miracleT-miracle
committed
Update: 手机端兼容
1 parent f9ea8be commit 2412787

File tree

33 files changed

+688
-230
lines changed

33 files changed

+688
-230
lines changed

‎.vitepress/theme/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ import vModal from '../components/vModal.vue';
1212
import 'viewerjs/dist/viewer.min.css';
1313
// import './styles/index.scss';
1414
import 'virtual:uno.css';
15-
import { theme, install } from '../../package/index';
15+
import '../../package/App.scss';
16+
import { theme, install } from '../../package/App';
1617

1718
export default {
1819
Layout: theme,

‎package/App.scss‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
@font-face {
2+
font-family: "JetBrains Mono";
3+
src: url("font/JetBrainsMono-Regular.woff2") format("truetype");
4+
}
5+
6+
@font-face {
7+
font-family: "JetBrains Mono Bold";
8+
src: url("font/JetBrainsMono-Bold.woff2") format("truetype");
9+
}
10+
11+
@font-face {
12+
font-family: "JetBrains Mono Italic";
13+
src: url("font/JetBrainsMono-Italic.woff2") format("truetype");
14+
}
15+
16+
$fontFamily: "微软雅黑", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
17+
18+
* {
19+
font-family: "JetBrains Mono", $fontFamily;
20+
position: relative;
21+
box-sizing: border-box;
22+
margin: 0;
23+
padding: 0;
24+
}
25+
26+
html {
27+
font-size: 16px;
28+
}
29+
30+
em, i {
31+
font-family: "JetBrains Mono Italic", $fontFamily;
32+
}
33+
34+
strong, b, h1, h2, h3, h4, h5, h6 {
35+
font-family: "JetBrains Mono Bold", $fontFamily;
36+
}
37+
38+
pre > code {
39+
font-family: "JetBrains Mono", $fontFamily;
40+
}
41+
42+
#app {
43+
position: relative;
44+
width: 100vw;
45+
height: 100vh;
46+
}
47+
48+
a {
49+
text-decoration: none;
50+
color: inherit;
51+
}
52+
53+
button {
54+
background: unset;
55+
cursor: pointer;
56+
border: none;
57+
}

package/index.ts renamed to package/App.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import DefaultTheme from 'vitepress/theme';
2-
import './theme/defalut.scss';
2+
import './App.scss';
33
import { EnhanceAppContext } from 'vitepress';
44
import App from './App.vue';
55
import { h } from 'vue';

‎package/App.vue‎

Lines changed: 19 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -23,46 +23,34 @@
2323
for (const entry of entries) {
2424
const { target } = entry;
2525
const { clientWidth } = target as HTMLElement;
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 {
26+
if (clientWidth < 1280) {
5727
htmlEl.style.setProperty('font-size', '12px');
5828
ctl.allowDrag = false;
5929
ctl.hideLeftSidebar = true;
6030
ctl.hideRightSidebar = true;
6131
ctl.hideLeftActionBar = true;
6232
ctl.hideRightActionBar = true;
33+
ctl.showDirModal = true;
6334
ctl.hideHeaderTopNav = true;
6435
ctl.hidePaths = true;
6536
ctl.hideCopyright = true;
37+
} else {
38+
if (clientWidth >= 2560) {
39+
htmlEl.style.setProperty('font-size', '18px');
40+
} else if (clientWidth >= 1920) {
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;
6654
}
6755
}
6856
});

‎package/components/NanoActionBarButton/index.vue‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template>
2+
<button
3+
class="w-[calc(var(--action-bar-size)*.72)] h-[calc(var(--action-bar-size)*.72)] cursor-pointer group"
4+
un-p="[calc(var(--action-bar-size)*.1)]"
5+
un-flex="center"
6+
un-rounded="[calc(var(--action-bar-size)*.2)]"
7+
un-hover="bg-[var(--action-bar-btn-hover-bg)]"
8+
un-focus="bg-[var(--action-bar-btn-focus-bg)]"
9+
@click="button.clickFn"
10+
>
11+
<Component
12+
:is="button.icon"
13+
class="w-full h-full fill-[#A0A3AD] group-focus:fill-white"
14+
/>
15+
</button>
16+
</template>
17+
18+
<script setup lang="ts">
19+
import { NanoActionBarButtonType } from '@NanoUI/NanoActionBarButton/type';
20+
21+
defineProps<{
22+
button: NanoActionBarButtonType
23+
}>();
24+
</script>
25+
26+
<style scoped lang="scss">
27+
28+
</style>

‎package/components/NanoActionBarButton/type.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { ComponentCustomOptions } from 'vue';
2+
3+
export type NanoActionBarButtonType = {
4+
id: string,
5+
icon: ComponentCustomOptions,
6+
clickFn: () => any
7+
}

‎package/components/NanoBackdrop/index.vue‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<template>
2+
<transition name="fade">
3+
<div
4+
v-if="openStatus"
5+
class="z-99 fixed w-screen h-screen bg-[rgba(0,0,0,.6)]"
6+
un-transition="opacity duration-.2s"
7+
@click="close"
8+
/>
9+
</transition>
10+
</template>
11+
12+
<script setup lang="ts">
13+
import { onMounted, onUnmounted, ref } from 'vue';
14+
import emitter from '../../emitter';
15+
16+
const openStatus = ref(false);
17+
18+
function close() {
19+
openStatus.value = false;
20+
emitter.emit('close-nav-modal');
21+
emitter.emit('close-dir-modal');
22+
}
23+
24+
onMounted(() => {
25+
emitter.on('open-backdrop', () => {
26+
openStatus.value = true;
27+
});
28+
emitter.on('close-backdrop', () => {
29+
openStatus.value = false;
30+
});
31+
});
32+
33+
onUnmounted(() => {
34+
emitter.off('open-backdrop');
35+
emitter.off('close-backdrop');
36+
});
37+
</script>
38+
39+
<style scoped lang="scss">
40+
.fade-enter-from,
41+
.fade-leave-to {
42+
opacity: 0;
43+
}
44+
45+
.fade-leave-active {
46+
transition-duration: .25s;
47+
}
48+
</style>

‎package/components/NanoContainer/index.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,20 @@
33
<NanoHeader/>
44
<NanoBody/>
55
<NanoFooter/>
6+
7+
<NanoBackdrop/>
8+
<NanoNavModal/>
9+
<NanoSidebarDirModal/>
610
</div>
711
</template>
812

913
<script setup lang="ts">
1014
import NanoHeader from '@NanoUI/NanoHeader/index.vue';
1115
import NanoBody from '@NanoUI/NanoBody/index.vue';
1216
import NanoFooter from '@NanoUI/NanoFooter/index.vue';
17+
import NanoBackdrop from '@NanoUI/NanoBackdrop/index.vue';
18+
import NanoNavModal from '@NanoUI/NanoNavModal/index.vue';
19+
import NanoSidebarDirModal from '@NanoUI/NanoSidebarDirModal/index.vue';
1320
</script>
1421

1522
<style scoped lang="scss">

‎package/components/NanoFooter/index.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
<template>
22
<footer
3-
class="shrink-0 z-100 w-full h-[var(--footer-size)] overflow-hidden"
3+
class="shrink-0 w-full h-[var(--footer-size)]"
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);"
77
>
88
<div class="relative h-full min-w-0 grow flex items-center px-4">
9+
<NanoFooterDirOpenButton v-if="ctl.showDirModal"/>
910
<NanoPaths v-if="!ctl.hidePaths"/>
1011
</div>
1112
<div class="relative h-full min-w-0 grow flex items-center flex-row-reverse px-4">
@@ -15,6 +16,7 @@
1516
</template>
1617

1718
<script setup lang="ts">
19+
import NanoFooterDirOpenButton from '@NanoUI/NanoFooterDirOpenButton/index.vue';
1820
import NanoCopyright from '@NanoUI/NanoCopyright/index.vue';
1921
import NanoPaths from '@NanoUI/NanoPaths/index.vue';
2022
import { controllerStore } from '@store/controller';

‎package/components/NanoFooterDirOpenButton/index.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<div
3+
class="relative flex-center h-full cursor-pointer"
4+
@click="openDir"
5+
>
6+
<p class="text-[calc(var(--footer-size)*.4)] line-height-[calc(var(--footer-size)*.4)]">
7+
目录
8+
</p>
9+
</div>
10+
</template>
11+
12+
<script setup lang="ts">
13+
import emitter from '../../emitter';
14+
15+
function openDir() {
16+
emitter.emit('open-dir-modal');
17+
emitter.emit('open-backdrop');
18+
}
19+
</script>
20+
21+
<style scoped lang="scss">
22+
23+
</style>

0 commit comments

Comments
 (0)