调整文档侧边栏样式

Author: 600888

docs/.vitepress/theme/custom.css

@@ -1,6 +1,6 @@
 :root {
     /* 调整侧边栏宽度 */
-    --vp-sidebar-width: 280px;
+    --vp-sidebar-width: 300px;
 
     /* 让布局占满全屏，消除左侧留白 */
     --vp-layout-max-width: 100%;
@@ -21,36 +21,37 @@
 }
 
 .VPSidebarItem .link {
-    padding-top: 6px !important;
-    padding-bottom: 6px !important;
+    padding-top: 2px !important;
+    padding-bottom: 2px !important;
 }
 
 .VPSidebarItem .link:hover .text {
-    color: var(--vp-c-brand-1);
+    color: var(--vp-c-text-1) !important;
 }
 
 /* 侧边栏交互效果优化 */
 .VPSidebarItem>.item {
     transition: background-color 0.25s;
     border-radius: 8px;
-    margin-right: 8px;
-    /* 侧边栏右侧留白 */
-    padding: 2px 0;
-    /* 微调内边距 */
+    /* 去除负边距，由于外壳去除了右留白，现在直接用 padding 控制即可 */
+    margin-right: 0 !important;
+    margin-left: -16px;
+    /* 侧边栏整体留白变小，向边缘靠拢 */
+    padding: 4px 24px 4px 16px !important;
 }
 
 /* 悬停效果：整个块背景变色，文字不动 */
 .VPSidebarItem>.item:hover {
-    background-color: var(--vp-c-bg-soft);
+    background-color: rgba(193, 195, 198, 0.15) !important;
 }
 
-/* 选中效果：整个块高亮，文字颜色不变 */
+/* 选中效果：整个块变色（浅蓝色） */
 .VPSidebarItem.is-active>.item {
-    background-color: var(--vp-c-bg-soft);
+    background-color: rgba(193, 195, 198, 0.15) !important;
 }
 
-/* 强制选中时文字颜色与普通文字一致 */
-.VPSidebarItem.is-active>.item>.link>.text {
+/* 强制选中时文字颜色保持普通文本颜色，不额外变色 */
+.VPSidebarItem.is-active .item .text {
     color: var(--vp-c-text-1) !important;
 }
 
@@ -70,4 +71,103 @@
 .VPSidebarItem.level-0 .text {
     font-weight: 700;
     color: var(--vp-c-text-1);
+}
+
+/* 子菜单选项额外缩进（层级递进） */
+.VPSidebarItem.level-1 .item .link {
+    padding-left: 16px !important;
+}
+
+.VPSidebarItem.level-2 .item .link {
+    padding-left: 32px !important;
+}
+
+.VPSidebarItem.level-3 .item .link {
+    padding-left: 48px !important;
+}
+
+.VPSidebarItem.level-4 .item .link {
+    padding-left: 64px !important;
+}
+
+/* 去除侧边栏与主体之间的垂直分割线，解锁右侧留白限制 */
+.VPSidebar {
+    border-right: none !important;
+    /* 关键修复：去除 Vitepress 容器默认死板的 32px 右侧留白 (死角区) */
+    padding-right: 0 !important;
+}
+
+/* 确保内部各级菜单容器占满剩下的空间 */
+.VPSidebar .nav,
+.VPSidebar .group,
+.VPSidebarItem {
+    width: 100% !important;
+}
+
+/* 去除菜单左侧自带的层级提示竖线/边框 */
+.VPSidebarItem .item {
+    border-left: none !important;
+}
+
+/* 隐藏 VitePress 自带的选中项指示竖条 */
+.VPSidebarItem .indicator {
+    display: none !important;
+}
+
+/* 去除侧边栏一级菜单组(Group)之间的水平分割线 */
+.VPSidebarGroup,
+.VPSidebarGroup+.VPSidebarGroup,
+section.VPSidebarItem.level-0,
+.VPSidebar .divider,
+.VPSidebarItem.level-0 {
+    border-top: none !important;
+    border-bottom: none !important;
+    padding-top: 0 !important;
+    /* Vitepress 有时不仅用 border，还用 padding 隔开各 section */
+}
+
+/* 强力清除 VitePress 默认加在 section 或 div 上的所有 border */
+.VPSidebarGroup>section,
+.VPSidebarGroup>.group,
+.group+.group,
+.VPSidebarGroup+.VPSidebarGroup {
+    border-top: 0 !important;
+    border-bottom: 0 !important;
+}
+
+/* 隐藏可能存在的默认水平线元素 */
+.VPSidebar .divider,
+.VPSidebarGroup hr,
+.VPSidebar hr {
+    display: none !important;
+    border: none !important;
+    opacity: 0 !important;
+}
+
+/* =========================================
+   缩小菜单和上下级子菜单之间的垂直留白
+   ========================================= */
+
+/* 1. 大幅减小一级标题与其下方子菜单之间的间距（VitePress 默认高达 24px） */
+.VPSidebarItem.level-0 {
+    padding-bottom: 4px !important;
+}
+
+.VPSidebarItem.collapsed.level-0 {
+    padding-bottom: 4px !important;
+}
+
+/* 2. 减小所有层级标题本身在垂直方向占据的高度 */
+.VPSidebarItem .text {
+    line-height: 20px !important;
+}
+
+.VPSidebarItem .link {
+    line-height: 20px !important;
+}
+
+/* 3. 紧缩上方分组与下方分组之间的边距 */
+.VPSidebarGroup {
+    padding-top: 12px !important;
+    padding-bottom: 0 !important;
 }

docs/guide/install/getting-started.md

@@ -10,8 +10,8 @@
 |------|----------|
 | Python | 3.11+ |
 | Node.js | 18+ |
-| pip | 最新版本 |
-| npm | 最新版本 |
+| pip | 24+ |
+| npm | 10+ |
 
 ## 安装步骤