52 lines
2.1 KiB
Vue
52 lines
2.1 KiB
Vue
<script setup lang="ts">
|
||
import { watchEffect } from 'vue'
|
||
import { inBrowser, useData } from 'vitepress'
|
||
import DefaultTheme from 'vitepress/theme'
|
||
import G3AppearanceToggle from './G3AppearanceToggle.vue'
|
||
import HeaderSections from './HeaderSections.vue'
|
||
import G3Sidebar from './G3Sidebar.vue'
|
||
import G3DocAside from './G3DocAside.vue'
|
||
|
||
// 包装默认主题的 Layout，只为做一件事：把 VitePress 的暗色状态同步给组件的暗色主题。
|
||
//
|
||
// VitePress 通过 <html class="dark"> 表达暗色；而 @g3soft/tokens 的暗色由
|
||
// html[data-g3-theme='dark'] 触发。不桥接的话，切换暗色时 VitePress 界面变暗、
|
||
// 组件却仍是亮色。
|
||
const { Layout } = DefaultTheme
|
||
const { isDark } = useData()
|
||
|
||
watchEffect(() => {
|
||
// SSR 阶段没有 DOM，跳过（客户端水合后会立即再跑一次）
|
||
if (!inBrowser) return
|
||
document.documentElement.dataset.g3Theme = isDark.value ? 'dark' : 'light'
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<Layout>
|
||
<!-- 用自定义侧边栏替换内置的 VPSidebarGroup：DOM 与样式照抄 Docus 的
|
||
Nuxt UI ContentNavigation，并额外支持条目级 icon 字段。
|
||
内置那棵由 custom.css 的 `.VPSidebar > .nav > *:not(.g3-nav-root)`
|
||
规则隐藏。 -->
|
||
<template #sidebar-nav-before>
|
||
<G3Sidebar />
|
||
</template>
|
||
<!-- 右侧目录替换内置的 VPDocAsideOutline：照抄 Docus 的 circuit 指示器
|
||
（整条色带 + SVG mask 裁成会拐弯的折线）。
|
||
内置那颗由 custom.css 的 `.VPDocAsideOutline { display: none }` 隐藏。 -->
|
||
<template #aside-outline-before>
|
||
<G3DocAside />
|
||
</template>
|
||
<!-- 板块导航 + 主题切换。nav-bar-content-after 槽位于顶栏 content-body 的
|
||
末尾（其后只剩移动端汉堡按钮），所以这里就是「最右」。
|
||
默认的主题开关在搜索与板块导航之间，由 custom.css 隐藏。 -->
|
||
<template #nav-bar-content-after>
|
||
<HeaderSections />
|
||
<G3AppearanceToggle />
|
||
</template>
|
||
<template #nav-screen-content-after>
|
||
<HeaderSections />
|
||
</template>
|
||
</Layout>
|
||
</template>
|