Skip to content

Commit 982da9d

Browse files
NeserCodeNeserCode
committed
wait fix bug
1 parent 3b338ea commit 982da9d

File tree

8 files changed

+170
-57
lines changed

8 files changed

+170
-57
lines changed

‎docs/.vuepress/theme/lib/client/components/Comment.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,11 @@ console.log("[Debug Comment]", [giscusOptions.value, options.value])
5050
:loading="giscusOptions.loading"
5151
/>
5252
<div class="v-nc-comment-placeholder" v-else>
53-
<span class="text">评论已关闭</span>
53+
<h2 id="v-nc-comment" tabindex="-1">
54+
<a class="header-anchor text" href="#v-nc-comment" aria-hidden="true"
55+
>评论已关闭</a
56+
>
57+
</h2>
5458
</div>
5559
</div>
5660
</template>

‎docs/.vuepress/theme/lib/client/components/Navbar.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ onMounted(() => {
6868

6969
<style lang="postcss" scoped>
7070
.v-nc-theme-navbar {
71-
@apply sticky top-0 w-full h-16 flex justify-between items-center px-4 py-2
71+
@apply fixed top-0 w-full h-16 flex justify-between items-center px-4 py-2
7272
border-b border-slate-200 dark:border-slate-600
7373
bg-white/60 dark:bg-slate-800/60 backdrop-blur shadow-sm
7474
transition-colors ease-in-out duration-300 z-50;

‎docs/.vuepress/theme/lib/client/components/Page.vue‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import type {
1818
DefaultThemeLocaleData,
1919
ThemePageData,
2020
} from "../../shared"
21+
import { Hook } from "../composables/useHook"
2122
2223
const pageData = usePageData<ThemePageData>()
2324
const pageFrontmatter = usePageFrontmatter<DefaultThemePageFrontmatter>()
@@ -53,21 +54,19 @@ const commentOption = ref()
5354
5455
// non-flash hook
5556
const $route = useRoute()
56-
watch(
57-
() => $route.path,
58-
() => {
59-
if (!isCommentActive.value) commentOption.value = undefined
60-
else commentOption.value = themeData.value.giscus ?? undefined
61-
},
62-
{ immediate: true }
63-
)
57+
Hook.onRoute(() => {
58+
if (!isCommentActive.value) commentOption.value = undefined
59+
else commentOption.value = themeData.value.giscus ?? undefined
60+
console.log(isCommentActive.value, commentOption.value)
61+
}, $route)
6462
6563
const pageTitle = computed(() => pageData.value.title)
6664
setupHeaders()
6765
</script>
6866

6967
<template>
7068
<main class="v-nc-theme-page">
69+
<slot name="before-page"></slot>
7170
<Sidebar v-if="isSidebarActive" />
7271
<div class="page-side-left">
7372
<div class="page-side-container">
@@ -280,7 +279,7 @@ section.footnotes::before {
280279
</style>
281280
<style lang="postcss" scoped>
282281
.v-nc-theme-page {
283-
@apply w-full flex justify-center gap-4 py-16 px-4 sm:px-8;
282+
@apply relative w-full flex justify-center gap-4 py-16 px-4 sm:px-8;
284283
}
285284
286285
.v-nc-theme-page .page-main {

‎docs/.vuepress/theme/lib/client/components/ReadingLine.vue‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<script lang="ts" setup>
2+
defineProps<{
3+
readingProgress: number
4+
}>()
5+
</script>
6+
7+
<template>
8+
<div class="reading-line">
9+
<span class="reading-line-main" :style="{ width: readingProgress + '%' }" />
10+
</div>
11+
</template>
12+
13+
<style lang="postcss" scoped>
14+
.reading-line {
15+
@apply fixed w-full h-0.5 top-16 left-0
16+
z-20 overflow-hidden;
17+
}
18+
19+
.reading-line-main {
20+
@apply absolute inline-block w-full h-0.5 left-0 top-0
21+
bg-green-400 dark:bg-green-600
22+
transition-all ease-in-out duration-300;
23+
}
24+
</style>

‎docs/.vuepress/theme/lib/client/composables/useComponentUtils.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { useDebounceFn } from "@vueuse/core"
12
import type {
23
DefaultThemePageFrontmatter,
34
FrontmatterPluginState,
@@ -47,3 +48,26 @@ export const usePluginState = (
4748
} else if (states.plugins) return !(states.plugins[keyName] === false)
4849
else return true
4950
}
51+
52+
export const useElementSrcolled = (elementSelector: string) => {
53+
if (!document) return false
54+
const element = document.querySelector(elementSelector)
55+
if (!element) return false
56+
57+
return {
58+
onScroll: (callback: (total: number, scrolled: number) => void) => {
59+
const listener = useDebounceFn(() => {
60+
let rects = element.getBoundingClientRect()
61+
let scrolled =
62+
rects.height - rects.bottom > 0
63+
? rects.height - rects.bottom > rects.height
64+
? rects.height
65+
: rects.height - rects.bottom
66+
: 0
67+
callback(rects.height, scrolled)
68+
}, 100)
69+
document.removeEventListener("scroll", listener)
70+
document.addEventListener("scroll", listener)
71+
},
72+
}
73+
}

‎docs/.vuepress/theme/lib/client/composables/useHook.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { nextTick, watch } from "vue"
2+
import type { RouteLocationNormalizedLoadedGeneric } from "vue-router"
3+
4+
export const Hook = {
5+
onRoute: (
6+
callback: () => void,
7+
route: RouteLocationNormalizedLoadedGeneric
8+
) => {
9+
watch(
10+
() => route.path,
11+
() => {
12+
nextTick(callback)
13+
},
14+
{ immediate: true }
15+
)
16+
},
17+
}

‎docs/.vuepress/theme/lib/client/layouts/Base.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,7 @@ span.arrow.left {
240240

241241
<style lang="postcss" scoped>
242242
.base-layout {
243-
@apply w-full h-full min-h-screen flex flex-col items-center
243+
@apply w-full h-full min-h-screen flex flex-col items-center py-16
244244
bg-zinc-50 dark:bg-zinc-800
245245
transition-colors ease-in-out duration-300;
246246
}

‎docs/.vuepress/theme/lib/client/layouts/Layout.vue‎

Lines changed: 90 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,34 @@ import Home from "../components/Home.vue"
55
66
import GithubRepo from "../components/GithubRepo.vue"
77
import Copyright from "../components/Copyright.vue"
8+
import ReadingLine from "../components/ReadingLine.vue"
89
9-
import { usePageData, usePageFrontmatter, useSiteData } from "vuepress/client"
10-
import { computed } from "vue"
1110
import {
12-
DefaultThemeData,
13-
DefaultThemeNormalPageFrontmatter,
14-
DefaultThemePageData,
15-
} from "../../shared"
11+
usePageData,
12+
usePageFrontmatter,
13+
useSiteData,
14+
useRoute,
15+
} from "vuepress/client"
16+
import { computed, onMounted, ref } from "vue"
1617
import { useThemeData } from "@vuepress/plugin-theme-data/client"
18+
import { Hook } from "../composables/useHook"
19+
import {
20+
useElementSrcolled,
21+
usePluginState,
22+
} from "../composables/useComponentUtils"
23+
24+
import {
25+
defaultConstants,
26+
type DefaultThemeData,
27+
type DefaultThemeNormalPageFrontmatter,
28+
type DefaultThemePageData,
29+
} from "../../shared"
1730
1831
const pageData = usePageData<DefaultThemePageData>()
1932
const pageFrontmatter = usePageFrontmatter<DefaultThemeNormalPageFrontmatter>()
2033
const themeLocale = useThemeData<DefaultThemeData>()
2134
const siteData = useSiteData()
35+
const $route = useRoute()
2236
2337
// repo info
2438
const githubRepoData = computed(() => {
@@ -44,50 +58,81 @@ const originalUrl = computed(() => {
4458
)
4559
})
4660
const copyrightTips = [""]
61+
62+
// Scroll listener
63+
const readingLineProgress = ref(0)
64+
onMounted(() => {
65+
Hook.onRoute(() => {
66+
const scrollUtils = useElementSrcolled(".v-nc-content")
67+
if (scrollUtils)
68+
scrollUtils.onScroll((total, scrolled) => {
69+
readingLineProgress.value = parseFloat(
70+
((scrolled / total) * 100).toFixed(2)
71+
)
72+
})
73+
}, $route)
74+
})
75+
76+
const isNotFound = computed(() => pageFrontmatter.value.layout === "NotFound")
77+
const computedStateSource = computed(() =>
78+
isNotFound.value
79+
? defaultConstants.notFoundPluginState
80+
: pageFrontmatter.value
81+
)
82+
const isReadingLineActive = computed(() =>
83+
usePluginState("readingLine", computedStateSource.value)
84+
)
4785
</script>
4886

4987
<template>
5088
<Base>
5189
<template #page>
52-
<Home v-if="pageFrontmatter.home" />
53-
<Page v-else>
54-
<template #page-side-left>
55-
<slot name="page-side-left" />
56-
</template>
57-
<template #page-side-right>
58-
<GithubRepo
59-
:owner="githubRepoData.owner"
60-
:repo="githubRepoData.repo"
61-
v-if="githubRepoData"
62-
/>
63-
<slot name="page-side-right" />
64-
</template>
65-
<template #before-page-head>
66-
<slot name="before-page-head" />
67-
</template>
68-
<template #after-page-head>
69-
<slot name="after-page-head" />
70-
</template>
71-
<template #before-content>
72-
<slot name="before-content" />
73-
</template>
74-
<template #before-comment>
75-
<Copyright
76-
:isOriginal="isOriginal"
77-
:originalUrl="originalUrl"
78-
:tips="copyrightTips"
79-
/>
80-
</template>
81-
<template #after-content>
82-
<slot name="after-content" />
83-
</template>
84-
<template #before-page-foot>
85-
<slot name="before-page-foot" />
86-
</template>
87-
<template #after-page-foot>
88-
<slot name="after-page-foot" />
89-
</template>
90-
</Page>
90+
<div class="page-wrapper" :key="pageData.path">
91+
<ReadingLine
92+
:reading-progress="readingLineProgress"
93+
v-if="isReadingLineActive"
94+
/>
95+
<Home v-if="pageFrontmatter.home" />
96+
<Page v-else>
97+
<template #before-page> </template>
98+
<template #page-side-left>
99+
<slot name="page-side-left" />
100+
</template>
101+
<template #page-side-right>
102+
<GithubRepo
103+
:owner="githubRepoData.owner"
104+
:repo="githubRepoData.repo"
105+
v-if="githubRepoData"
106+
/>
107+
<slot name="page-side-right" />
108+
</template>
109+
<template #before-page-head>
110+
<slot name="before-page-head" />
111+
</template>
112+
<template #after-page-head>
113+
<slot name="after-page-head" />
114+
</template>
115+
<template #before-content>
116+
<slot name="before-content" />
117+
</template>
118+
<template #before-comment>
119+
<Copyright
120+
:isOriginal="isOriginal"
121+
:originalUrl="originalUrl"
122+
:tips="copyrightTips"
123+
/>
124+
</template>
125+
<template #after-content>
126+
<slot name="after-content" />
127+
</template>
128+
<template #before-page-foot>
129+
<slot name="before-page-foot" />
130+
</template>
131+
<template #after-page-foot>
132+
<slot name="after-page-foot" />
133+
</template>
134+
</Page>
135+
</div>
91136
</template>
92137
</Base>
93138
</template>

0 commit comments

Comments
 (0)