From 290def4ad08da2a131eae42aa7b8ea89104bb67e Mon Sep 17 00:00:00 2001
From: discreted66 <953831480@qq.com>
Date: Sat, 10 Oct 2026 16:48:28 +0800
Subject: [PATCH] Squashed commit of the following:
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
commit 7fb3589e766da7eb1b093f979ecc5e5852464487
Author: discreted66 <953831480@qq.com>
Date: Sat Oct 10 16:23:59 2026 +0800
fix: 优化宽屏多分辨率适配与头部导航三栏布局
- 同步 --vp-sidebar-width 为 260px，消除侧边栏与内容区 12px 错位
- 右侧大纲导航贴近视口右边缘（去掉 VPContent/VPDoc 右侧内边距）
- header-top 重构为 grid 三栏：Logo 居左、产品导航严格居中、工具栏居右
- 中窄屏（980-1479px）压缩 Tab 密度，左右列不被压缩，避免重叠
- Tab 禁止收缩折行，空间不足时横向滚动（隐藏滚动条）
- header-bottom 保持居左布局，与 header-top 居中互不干扰
commit 0be2e91c71846e1dee353d7d1da400f9b75308b2
Author: discreted66 <953831480@qq.com>
Date: Fri Sep 4 17:25:28 2026 +0800
feat: 暂时隐藏最近更新模块并统一链接样式
- 注释 UpdateSection，暂停 GitHub API 调用
- category-link 和 component-link 统一为灰色风格，hover 显示下划线
- 暗色模式下链接使用 #cccccc / rgba(255,255,255,0.08)
- 移除 product-cards-grid 多余的 padding-bottom
# Conflicts:
# .vitepress/theme/components/CustomHeader.vue
# .vitepress/theme/components/TabNavigation.vue
---
.vitepress/theme/components/CustomHeader.vue | 138 +++++++++++-------
.vitepress/theme/components/TabNavigation.vue | 52 +------
.vitepress/theme/style.css | 17 ++-
3 files changed, 100 insertions(+), 107 deletions(-)
diff --git a/.vitepress/theme/components/CustomHeader.vue b/.vitepress/theme/components/CustomHeader.vue
index 1390d9b..79c3d5b 100644
--- a/.vitepress/theme/components/CustomHeader.vue
+++ b/.vitepress/theme/components/CustomHeader.vue
@@ -17,14 +17,15 @@
/>
{{ site.title }}
-
-
-
-
+
+
+
+
+
@@ -327,7 +328,6 @@ const getActiveNavTab = () => {
"tiny-robot": ["/components/", "/tools/"],
"tiny-editor": ["/demo/", "/api/", "/modules/"],
"web-agent": ["/web-agent/"],
- "tiny-pro": ["/tiny-pro/"],
};
const segments = productPathMap[activeProductTab.value] || [];
@@ -468,14 +468,6 @@ const productTabs = computed(() => [
activeProductTab.value === "web-agent" ? "active" : "normal"
}-web-agent.svg`,
},
- {
- key: "tiny-pro",
- name: "TinyPro",
- link: `${prefix}tiny-pro/guide/start`,
- src: `${prefix}images/logo-${
- activeProductTab.value === "tiny-pro" ? "active" : "normal"
- }-tinypro.svg`,
- },
]);
// 切换tab时路由跳转
@@ -507,8 +499,6 @@ watch(
activeProductTab.value = "tiny-editor";
} else if (path.includes("/web-agent/")) {
activeProductTab.value = "web-agent";
- } else if (path.includes("/tiny-pro/")) {
- activeProductTab.value = "tiny-pro";
} else {
activeProductTab.value = "";
}
@@ -546,55 +536,93 @@ watch(
}
.header-container {
- max-width: 92rem;
+ max-width: 100%;
margin: 0 auto;
width: 100%;
}
/* 第一行样式 */
.header-top {
- display: flex;
- height: 4rem;
+ display: grid;
+ grid-template-columns: 1fr auto 1fr;
align-items: center;
- justify-content: space-between;
+ height: 4rem;
border-bottom: 1px solid var(--vp-c-divider);
- margin-left: 3rem;
- margin-right: 3rem;
+ padding: 0 3rem;
}
+/* 左右两列不允许压缩到内容宽度以下（1fr 轨道最小值 = min-content），
+ 避免中窄屏下 Logo/工具栏与中间导航重叠；
+ 空间不足时由中间导航（min-width: 0 + overflow-x: auto）自行横向滚动 */
.logo-section {
display: flex;
align-items: center;
- flex-shrink: 0;
+ justify-self: start;
}
-.product-section {
- padding-left: 48px;
- position: relative;
- flex-shrink: 0;
+.logo-link {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ text-decoration: none;
+ color: var(--vp-c-text-1);
}
-.product-section:before {
- content: "";
- border-left: 1px solid #f0f0f0;
- position: absolute;
- top: 12px;
- left: 0;
- height: 50%;
- z-index: 2;
+/* 中间导航区：严格相对视口居中 */
+.nav-section {
+ justify-self: center;
+ min-width: 0;
+ overflow-x: auto;
+ scrollbar-width: none;
}
-.dark .product-section:before {
- border-left: 1px solid rgba(255, 255, 255, 0.2);
+.nav-section::-webkit-scrollbar {
+ display: none;
}
-.logo-link {
+.nav-section :deep(.custom-tabs__nav) {
+ gap: 0;
+}
+.nav-section :deep(.custom-tabs__item) {
+ height: 40px;
+ padding: 0 20px;
+}
+.nav-section :deep(.custom-tabs__item--active) {
+ color: #191919;
+ font-weight: 600;
+ background: #f0f0f0;
+ border-radius: 33px;
+}
+.nav-section :deep(.custom-tabs__item-underline) {
+ background: transparent;
+}
+.nav-section :deep(.custom-tabs__item-underline--active) {
+ background: transparent !important;
+}
+
+.dark .nav-section :deep(.custom-tabs__item--active) {
+ color: #e6e6e6;
+ background: rgba(255, 255, 255, 0.08);
+}
+
+/* 中窄屏（980–1479px）：压缩 Tab 密度与两侧留白，
+ 保证 1280–1440 常见笔记本宽度下中间导航完整放下；
+ 更窄时中间导航横向滚动（无重叠） */
+@media (max-width: 1479px) {
+ .header-top {
+ padding: 0 1.5rem;
+ }
+
+ .nav-section :deep(.custom-tabs__item) {
+ padding: 0 12px;
+ font-size: 13px;
+ }
+}
+
+.tools-section {
display: flex;
align-items: center;
- flex-shrink: 0;
gap: 8px;
- text-decoration: none;
- color: var(--vp-c-text-1);
- margin-right: 48px;
+ justify-self: end;
}
.logo-icon {
@@ -675,8 +703,10 @@ watch(
.tools-section {
display: flex;
align-items: center;
- flex-shrink: 0;
gap: 8px;
+ justify-self: end;
+ /* 按钮文字不折行 */
+ white-space: nowrap;
}
.home-link {
@@ -756,20 +786,22 @@ watch(
background: #000000;
border-radius: 50%;
}
-/* 第二行样式 */
+/* 第二行样式：页面导航居左显示，不跟随 header-top 居中 */
.header-bottom {
height: var(--vp-nav-bottom-height);
+ display: flex;
align-items: center;
- padding-left: 3rem;
- padding-right: 3rem;
- width: fit-content;
+ padding: 0 3rem;
+ /* 空间不足时横向滚动而非折行/溢出 */
+ overflow-x: auto;
+ scrollbar-width: none;
+}
+.header-bottom::-webkit-scrollbar {
+ display: none;
}
/* 响应式设计 */
@media (min-width: 980px) {
- .header-top {
- display: flex;
- }
.mb-container {
display: none;
}
diff --git a/.vitepress/theme/components/TabNavigation.vue b/.vitepress/theme/components/TabNavigation.vue
index a9e2402..ad8e94f 100644
--- a/.vitepress/theme/components/TabNavigation.vue
+++ b/.vitepress/theme/components/TabNavigation.vue
@@ -201,19 +201,18 @@ onUnmounted(() => {
font-size: 0.875rem;
line-height: 40px;
display: flex;
+ /* 空间不足时禁止收缩与折行：由外层容器（overflow-x: auto）横向滚动 */
flex-shrink: 0;
+ white-space: nowrap;
&-icon {
height: 20px;
width: 20px;
- flex-shrink: 0;
}
&-title {
transition: color 0.2s ease;
user-select: none;
- white-space: nowrap;
- flex-shrink: 0;
}
&-underline {
@@ -272,53 +271,6 @@ onUnmounted(() => {
}
}
}
-.product-section {
- .custom-tabs {
- width: max-content;
- .custom-tabs__nav {
- gap: 0;
- }
- &__header {
- .custom-tabs__item {
- height: 40px;
- padding: 0px 20px;
- &--active {
- color: #191919;
- font-weight: 600;
- background: #f0f0f0;
- border-radius: 33px;
- }
- }
- }
- }
-
- .custom-tabs__item-underline {
- background: transparent;
- }
- .custom-tabs__item-underline--active {
- background: transparent !important;
- }
-}
-
-.dark .product-section {
- .custom-tabs {
- .custom-tabs__nav {
- gap: 0;
- }
- &__header {
- .custom-tabs__item {
- &--active {
- color: #e6e6e6;
- background: rgba(255, 255, 255, 0.08);
- }
- }
- }
- }
-
- .custom-tabs__item-underline {
- background: transparent;
- }
-}
/* 暗色模式适配 */
diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css
index 752859f..f103c89 100644
--- a/.vitepress/theme/style.css
+++ b/.vitepress/theme/style.css
@@ -5,6 +5,9 @@ body,
height: 100%;
--vp-nav-bottom-height: 48px;
--vp-sidebar-nav-padding-top: calc(var(--vp-nav-bottom-height) + var(--vp-nav-height));
+ /* 侧边栏实际宽度为 260px（见下方 .VPSidebar 宽度覆盖），
+ 同步该变量避免 VPContent 左侧留白与侧边栏之间出现 12px 空隙 */
+ --vp-sidebar-width: 260px;
--rainbow-prev: #009ff7;
--rainbow-next: #c76dd1;
@@ -972,15 +975,21 @@ img.image-inline {
padding: 0 24px;
}
-.header-bottom
-
.VPDoc.has-aside .content .content-container {
- max-width: 55vw;
+ max-width: 55vw !important;
+}
+
+/* 2) 右侧大纲导航贴边：≥1280px 大纲显示后，去掉 VPDoc 右侧内边距，
+ 让固定定位的大纲容器（aside-container）右边缘与视口右边缘齐平 */
+@media (min-width: 1280px) {
+ .VPDoc.has-aside {
+ padding-right: 0;
+ }
}
@media (min-width: 1440px) {
.VPContent.has-sidebar[data-v-e31b95cc] {
- padding-right: 24px;
+ padding-right: 0;
padding-left: var(--vp-sidebar-width);
}
}
\ No newline at end of file