diff --git a/.vitepress/theme/layouts/Default.vue b/.vitepress/theme/layouts/Default.vue index 69f204b..062db91 100644 --- a/.vitepress/theme/layouts/Default.vue +++ b/.vitepress/theme/layouts/Default.vue @@ -8,11 +8,16 @@ import Sidebar from "../components/Sidebar.vue"; import ScrollToTop from "../components/ScrollToTop.vue"; import { argbFromHex } from "@material/material-color-utilities"; import { generateColorPalette } from "../utils/colorPalette"; -import { onMounted, nextTick, computed } from "vue"; +import { onMounted, nextTick, computed, ref, watch } from "vue"; import { useRoute } from "vitepress"; import { useGlobalData } from "../composables/useGlobalData"; const { site, page, frontmatter, theme } = useGlobalData(); +const route = useRoute(); + +const isTransitioning = ref(false); +const currentRoutePath = ref(route.path); +const pendingRoutePath = ref(null); /** * 获取图片主色调(取图片左上角像素点的颜色) @@ -86,12 +91,28 @@ const currentLayout = computed(() => { return layoutMap[key] ?? ArticleLayout; }); -const route = useRoute(); +watch( + () => route.path, + (newPath, oldPath) => { + if (newPath !== oldPath && !isTransitioning.value) { + isTransitioning.value = true; + pendingRoutePath.value = newPath; + } + }, + { immediate: true } +); function onAfterEnter() { + isTransitioning.value = false; + currentRoutePath.value = route.path; + pendingRoutePath.value = null; updatePalette(); } +function onBeforeLeave() { + isTransitioning.value = true; +} + if (typeof window !== "undefined") { onMounted(updatePalette); } @@ -100,7 +121,7 @@ if (typeof window !== "undefined") {