Skip to content

fix: 优化宽屏多分辨率适配与头部导航三栏布局 #126

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zzcr merged 1 commit into from
Oct 15, 2026
Merged

fix: 优化宽屏多分辨率适配与头部导航三栏布局 #126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
138 changes: 85 additions & 53 deletions .vitepress/theme/components/CustomHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,15 @@
/>
<span v-if="false" class="logo-text">{{ site.title }}</span>
</a>
<!-- 产品区域 -->
<div class="product-section">
<TabNavigation
:tabs="productTabs"
:activeTab="activeProductTab"
@tab-change="handleProductTabChange"
/>
</div>
</div>

<!-- 中间：产品导航 Tab（独立列，保证相对视口严格居中） -->
<div class="nav-section">
<TabNavigation
:tabs="productTabs"
:activeTab="activeProductTab"
@tab-change="handleProductTabChange"
/>
</div>

<!-- 右侧工具栏 -->
Expand Down Expand Up @@ -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] || [];
Expand Down Expand Up @@ -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时路由跳转
Expand Down Expand Up @@ -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 = "";
}
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
Expand Down
52 changes: 2 additions & 50 deletions .vitepress/theme/components/TabNavigation.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
}


/* 暗色模式适配 */
Expand Down
17 changes: 13 additions & 4 deletions .vitepress/theme/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}
}
Loading