Skip to content

Commit f0e5c3a

Browse files
T-miracleT-miracle
committed
Update: 新主题（待完善）
1. 已添加 底部路径 和 icp 链接 2. 样式调整
1 parent 74592a8 commit f0e5c3a

File tree

22 files changed

+211
-39
lines changed

22 files changed

+211
-39
lines changed

‎.vitepress/config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ export default defineConfig({
112112
{ text: '文档翻译', link: '/translation-docs/' },
113113
{ text: '资源导航', link: '/nav/' },
114114
{
115-
text: '其他',
115+
text: '更多内容',
116116
items: [
117117
{ text: '问题处理', link: '/bugs/' },
118118
{ text: '测试题', link: '/test/' },

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
"overlayscrollbars": "^2.10.1",
2222
"overlayscrollbars-vue": "^0.5.9",
2323
"pinia": "^2.3.0",
24-
"pinia-plugin-persistedstate": "^4.2.0",
24+
"pinia-plugin-persistedstate": "^3.2.3",
2525
"uuid": "^11.0.3",
2626
"viewerjs": "^1.11.7",
2727
"vitepress": "^1.5.0",

‎package/components/NanoCopyright/index.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<template>
2-
<p v-html="theme.footer.copyright"/>
2+
<p
3+
class="text-gray-500 text-[calc(var(--footer-size)*.4)] underline"
4+
v-html="theme.footer.copyright"
5+
/>
36
</template>
47

58
<script setup lang="ts">

‎package/components/NanoFooter/index.vue‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,18 @@
55
un-flex="~ items-center justify-between shrink-0"
66
style="background: var(--footer-bg);"
77
>
8-
<div/>
9-
<div class="flex items-center flex-col-reverse"/>
8+
<div class="relative h-full min-w-0 flex-1 flex items-center px-4">
9+
<NanoPaths/>
10+
</div>
11+
<div class="relative h-full min-w-0 flex-1 flex items-center flex-row-reverse px-4">
12+
<NanoCopyright/>
13+
</div>
1014
</footer>
1115
</template>
1216

1317
<script setup lang="ts">
14-
18+
import NanoCopyright from '@NanoUI/NanoCopyright/index.vue';
19+
import NanoPaths from '@NanoUI/NanoPaths/index.vue';
1520
</script>
1621

1722
<style scoped lang="scss">

‎package/components/NanoLeftSidebar/index.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@
1111
</div>
1212
<div class="absolute bottom-0 left-0 w-full h-0"></div>
1313
</div>
14+
<!--draggable line-->
15+
<div class="absolute z-2 right--1 top-0 h-full w-1 bg-transparent cursor-col-resize"/>
1416
</div>
1517
</template>
1618

‎package/components/NanoMain/index.vue‎

Lines changed: 38 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@
66
un-top="[var(--header-size)]"
77
un-left="[calc(var(--action-bar-size)+var(--sidebar-size))]"
88
>
9-
<!--draggable line-->
10-
<div class="absolute z-2 left-0 top-0 h-full w-.25 bg-transparent cursor-col-resize"/>
119
<!--content area-->
1210
<div class="relative w-full h-full">
1311
<OverlayScrollbarsComponent
@@ -17,12 +15,12 @@
1715
defer
1816
>
1917
<article
20-
ref="content"
21-
class="px-10 py-6 VPDoc text-3.5"
18+
ref="article"
19+
class="px-10 py-6 VPDoc text-4"
2220
:class="[ 'w-full' ]"
2321
style="white-space: wrap;"
2422
>
25-
<Content/>
23+
<Content ref="content"/>
2624
</article>
2725
</OverlayScrollbarsComponent>
2826
</div>
@@ -33,30 +31,55 @@
3331
import 'overlayscrollbars/styles/overlayscrollbars.css';
3432
import scrollbarOptions from '../../config/scrollbarOptions';
3533
import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
36-
import { onMounted, ref, watch } from 'vue';
37-
import { useRoute } from 'vitepress';
34+
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
35+
import { onContentUpdated, useRoute } from 'vitepress';
3836
import emitter from '../../emitter';
3937
4038
const scrollbars = ref<any | null>(null);
41-
const content = ref<HTMLElement | null>(null);
39+
const article = ref<HTMLElement | null>(null);
4240
4341
const route = useRoute();
4442
4543
// Listen for routing changes and scroll to the top
4644
watch(() => route.path, () => {
47-
scrollbars.value?.osInstance()?.elements()?.viewport?.scrollTo({ top: 0 });
45+
nextTick(() => {
46+
scrollbars.value?.osInstance()?.elements()?.viewport?.scrollTo({ top: 0 });
47+
});
48+
}, {
49+
immediate: true
4850
});
4951
52+
function hashChange() {
53+
if (location.hash) {
54+
const _hashText = decodeURIComponent(location.hash.replace('#', ''));
55+
console.log('scroll-to-hash', _hashText);
56+
emitter.emit('scroll-to-hash', _hashText);
57+
}
58+
}
59+
60+
onContentUpdated(() => {
61+
setTimeout(() => {
62+
hashChange();
63+
}, 240);
64+
})
65+
5066
onMounted(() => {
67+
setTimeout(() => {
68+
hashChange();
69+
}, 240);
70+
// Listen for scroll-to-hash events
5171
emitter.on('scroll-to-hash', (hash: string) => {
72+
if (hash === '' || hash === null || hash === undefined) {
73+
return;
74+
}
5275
const target = document.getElementById(hash);
5376
if (!target) {
5477
return;
5578
}
56-
// Gets the distance of the target element relative to the top of the content viewport
79+
// Gets the distance of the target element relative to the top of the article viewport
5780
const targetTop =
5881
target.getBoundingClientRect().top -
59-
content.value!.getBoundingClientRect().top -
82+
article.value!.getBoundingClientRect().top -
6083
Number.parseInt(
6184
getComputedStyle(document.documentElement)
6285
.fontSize.replace('px', '')
@@ -65,6 +88,10 @@
6588
scrollbars.value?.osInstance()?.elements()?.viewport?.scrollTo({ top: targetTop, behavior: 'smooth' });
6689
});
6790
});
91+
92+
onUnmounted(() => {
93+
emitter.off('scroll-to-hash');
94+
});
6895
</script>
6996

7097
<style scoped lang="scss">

‎package/components/NanoOutline/index.vue‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424

2525
<script setup lang="ts">
2626
import NanoOutlineItem from '@NanoUI/NanoOutlineItem/index.vue';
27-
import { ref, shallowRef } from 'vue';
27+
import { shallowRef } from 'vue';
2828
import { onContentUpdated, useData } from 'vitepress';
2929
// @ts-expect-error outline
3030
import { getHeaders, type MenuItem } from 'vitepress/dist/client/theme-default/composables/outline';
@@ -37,9 +37,6 @@
3737
onContentUpdated(() => {
3838
headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline);
3939
});
40-
41-
const container = ref();
42-
const marker = ref();
4340
</script>
4441

4542
<style scoped lang="scss">

‎package/components/NanoOutlineItem/index.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
<template>
22
<ul class="VPDocOutlineItem" :class="root ? 'relative z-1' : 'px-4'">
33
<li v-for="{ children, link, title } in headers">
4-
<a class="block text-[0.875rem] font-400 select-none py-.6" :href="link" @click="onClick" :title="title">
4+
<a
5+
class="block text-[0.875rem] font-400 select-none py-.6"
6+
:href="link"
7+
:title="title"
8+
@click="onClick"
9+
>
510
{{ title }}
611
</a>
712
<template v-if="children?.length">

‎package/components/NanoPaths/index.vue‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<OverlayScrollbarsComponent
3+
class="shrink-0 w-full h-full"
4+
:options="onlyHorizontalScrollBarOptions"
5+
defer
6+
>
7+
<div class="relative h-full flex flex-nowrap items-center gap-1">
8+
<div
9+
v-for="(item, index) in paths"
10+
:key="item.id"
11+
class="flex-center shrink-0 gap-1 cursor-default"
12+
un-text="[var(--footer-path-text-color)] hover:[var(--footer-path-text-hover-color)]"
13+
>
14+
<div class="text-[calc(var(--footer-size)*.4)] flex items-center path" v-html="item.text"></div>
15+
<FoldArrow
16+
v-if="index < paths.length - 1"
17+
class="rotate--90 w-3.25 h-3.25"
18+
/>
19+
</div>
20+
</div>
21+
</OverlayScrollbarsComponent>
22+
</template>
23+
24+
<script setup lang="ts">
25+
import { type SidebarItem, sidebarStore } from '@store/sidebar';
26+
import { ref, watch } from 'vue';
27+
import FoldArrow from '@NanoIcon/foldArrow.vue';
28+
import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
29+
import onlyHorizontalScrollBarOptions from '../../config/horizontalTopScrollBarOptions';
30+
31+
const store = sidebarStore();
32+
33+
const paths = ref<SidebarItem[]>([]);
34+
35+
watch(() => store.currentId, () => {
36+
paths.value = store.getCurrentPaths();
37+
}, { immediate: true });
38+
</script>
39+
40+
<style scoped lang="scss">
41+
.path {
42+
:deep(.icon) {
43+
display: inline-block;
44+
width: 1rem;
45+
height: 1rem;
46+
margin-right: .5rem;
47+
}
48+
}
49+
</style>

‎package/components/NanoRightSidebar/index.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
<div class="relative h-full w-full">
99
<NanoOutline/>
1010
</div>
11+
<!--draggable line-->
12+
<div class="absolute z-2 left--1 top-0 h-full w-1 bg-transparent cursor-col-resize"/>
1113
</div>
1214
</template>
1315

0 commit comments

Comments
 (0)