u

code/g3soft-libs/docs/.vitepress/theme/Layout.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { watchEffect } from 'vue'
+import { inBrowser, useData } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+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>
+    <template #nav-bar-content-after>
+      <HeaderSections />
+    </template>
+    <template #nav-screen-content-after>
+      <HeaderSections />
+    </template>
+  </Layout>
+</template>