u

code/g3soft-libs/docs/.vitepress/theme/custom.css

@@ -25,8 +25,8 @@
 
    1) 正文：.VPDoc[data-v-*] { padding: 48px 32px 0 }  → 顶部内边距改为 32px
    2) 左侧边栏：.VPSidebar[data-v-*] { padding-top: var(--vp-nav-height) }
-      它的 padding-top 同时承担「避开固定 header」的职责，所以要保留
-      nav 高度，再叠加 32px 的呼吸空间。
+      改用 margin-top：由「容器盒子上缘贴齐 header、内容靠 padding 下推」
+      变为「整个容器盒子上缘落到 header 之下」。二者内容落点一致。
    3) 右侧目录：**不要**动 --vp-doc-top-height（原因见下方说明）。
 
    ⚠ 关于 --vp-doc-top-height（踩过的坑）：
@@ -46,8 +46,12 @@
     padding-top: var(--g3-content-top-padding);
   }
 
-  /* 左侧边栏：padding-top 本来就是 nav 高度（用于避让固定 header），
-     在其基础上叠加 32px。
+  /* 左侧边栏：把「避让固定 header + 32px 呼吸空间」整体交给 margin-top。
+     padding-top 只把内容往下推，盒子仍从 top:0 起、背景一直铺到固定 header
+     后面，于是必须靠 .curtain 去遮「内容滚进 header 区」的那一段；
+     改用 margin-top 后盒子整体落到 header 之下，padding-top 归 0，
+     .curtain 随之多余（见下方规则）。
+     内容落点与改动前完全一致（都等于 nav-height + 32 - 2）。
 
      额外减 2px 的原因（实测推算）：
        .VPSidebar  padding-top: 96px
@@ -56,15 +60,26 @@
      即左栏内部自带「+8 -6 = +2」的净偏移。减去它，三栏内容才都落在 96px。
      （这两个值来自侧栏自身的复制样式，不宜改动，否则影响分组间距。） */
   .VPSidebar[class] {
-    padding-top: calc(
+    margin-top: calc(
       var(--vp-nav-height) + var(--g3-content-top-padding) - var(--g3-sidebar-inner-offset)
     );
+    padding-top: 0;
     /* 底部留白：VitePress 默认 96px，Docus 是对称的 py-8 = 32px。
        现在 .VPSidebar 自己就是滚动容器（与 Docus 的 overflow-y-auto 一致），
        96px 在滚到底时会显得过厚。 */
     padding-bottom: var(--g3-content-top-padding);
   }
 
+  /* 移除 VitePress 桌面端 <VPSidebar> 内的首个 <div class="curtain">：
+     position:sticky; top:-64px; height:nav-height; 背景=侧栏底色，
+     唯一职责是遮住「侧栏内容滚到固定 header 后面」的区域。
+     本主题已把 .VPSidebar 的上缘整体移到 header 之下（padding-top → margin-top），
+     内容不可能再进入 header 区域，curtain 反而会在顶部压出一块色块，故隐藏。
+     用 [class] 把特异性提到 (0,3,0)，压过 VitePress 的 .curtain[data-v-*] (0,2,0)。 */
+  .VPSidebar[class] .curtain {
+    display: none;
+  }
+
   /* 右侧目录：.aside-container 是 position:fixed，其 padding-top 公式为
        calc(nav-height + layout-top-height + var(--vp-doc-top-height) + 48px)
      其中 48px 是 VitePress 写死、且**不与 --vp-doc-top-height 联动**的基线。
@@ -504,6 +519,25 @@
   background-color: var(--vp-c-gutter) !important;
 }
 
+/* --------------------------------------------------------------------------
+   主题切换：改用自建图标按钮 G3AppearanceToggle.vue，挂在
+   nav-bar-content-after 槽的末尾（= 顶栏最右），左侧自带竖分割线。
+
+   VitePress 默认主题在两处渲染同一个「太阳/月亮滑块开关」，都要隐藏，
+   否则会和新按钮重复：
+     ≥1280px    .VPNavBarAppearance      顶栏里（位于搜索与板块导航之间）
+     768–1280px .VPNavBarExtra 的 flyout 本站 nav 为空、无多语言无社交链接，
+                该 flyout 的内容恰好只有这一项开关
+   移动端抽屉里的 .VPNavScreenAppearance 是独立的一整行，保持不动。
+
+   ⚠ 将来若给本站加了 nav / socialLinks / 多语言，.VPNavBarExtra 会有别的
+   内容，届时请删掉这一条，改为只隐藏其中的 .appearance 分组。
+   -------------------------------------------------------------------------- */
+.VPNavBarAppearance,
+.VPNavBarExtra {
+  display: none !important;
+}
+
 .VPNavBar .divider-line,
 .VPNavBar.home.top .divider-line,
 .VPNavBar:not(.home) .divider-line {
@@ -559,33 +593,44 @@
   margin-left: 12px;
 }
 
+/* 顶栏右侧的板块导航。
+   原先用的是 'pill' 变体（激活项铺 --vp-c-brand-soft 底色块），与本文件开头
+   给侧边栏定下的 'link' 变体不一致 —— 那里明确写了「激活项没有高亮底色，
+   只有文字变品牌色 + 1px 竖线」，右侧目录也是同一套。
+   这里统一到 'link'：激活 = 品牌色文字 + 1px 指示条；hover = 文字提到
+   text-highlighted（不再是品牌色 + 底色）。
+   侧边栏是竖向排列、指示条在左；这里是横向排列，指示条落到文字下方。 */
 .g3-header-section {
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 0 10px;
   height: 32px;
-  border: 1px solid transparent;
-  border-radius: 6px;
   color: var(--vp-c-text-2);
   font-size: 13px;
   font-weight: 500;
   line-height: 1;
-  transition:
-    color 0.2s,
-    background-color 0.2s,
-    border-color 0.2s;
+  transition: color 0.2s;
 }
 
 .g3-header-section:hover {
-  color: var(--vp-c-brand-1);
-  background-color: var(--vp-c-default-soft);
+  color: var(--vp-c-text-1);
 }
 
 .g3-header-section.is-active {
   color: var(--vp-c-brand-1);
-  background-color: var(--vp-c-brand-soft);
-  border-color: transparent;
+}
+
+/* 指示条：规格同侧边栏激活项的 1px 竖线，只是换到水平轴 */
+.g3-header-section.is-active::after {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  height: 1px;
+  border-radius: 9999px;
+  background-color: var(--vp-c-brand-1);
 }
 
 .g3-header-section svg {
@@ -608,6 +653,22 @@
   font-size: 14px;
 }
 
+/* 移动端抽屉里是竖排的整行列表，底色块比下划线更像「列表选中」，
+   这里保留 pill 变体，并把桌面端的下划线指示条去掉。 */
+.VPNavScreen .g3-header-section:hover {
+  color: var(--vp-c-brand-1);
+  background-color: var(--vp-c-default-soft);
+}
+
+.VPNavScreen .g3-header-section.is-active {
+  color: var(--vp-c-brand-1);
+  background-color: var(--vp-c-brand-soft);
+}
+
+.VPNavScreen .g3-header-section.is-active::after {
+  content: none;
+}
+
 @media (max-width: 767px) {
   .VPNavBar .g3-header-sections {
     display: none;
@@ -619,3 +680,17 @@
     display: none;
   }
 }
+
+/* ==========================================================================
+   Demo 预览区溢出兜底
+   --------------------------------------------------------------------------
+   vitepress-demo-plugin 自己没给预览区设 overflow，比容器宽的示例会直接「跃出」
+   边框：实测 grid/no-wrap.vue（故意演示「不换行、超出 24 列」）的第 4 个 col
+   溢出边框 195px；将来任何宽 demo 也会同样破坏页面布局。
+   加 overflow-x: auto 让内容横向可滚，永远留在框内。
+   注意：这是兜底，不是解决办法 —— 示例自身写错 prop / 布局导致的溢出应当在
+   示例侧修掉，别靠这条规则把问题盖住。
+   ========================================================================== */
+.vitepress-demo-plugin__container > .vitepress-demo-plugin-preview {
+  overflow-x: auto;
+}