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

[discreted66]

背景
在宽屏（≥1920px）下，文档中间区域过窄、分布不均，右侧大纲导航未贴近视口右边缘；头部导航栏未严格相对视口居中，且在 980–1440px 区间与侧边栏出现重叠。

改动内容

1. 侧边栏宽度同步 — style.css 中 --vp-sidebar-width 从默认 272px 改为实际 260px，消除内容区左侧 12px 错位
2. 右侧大纲贴边 — VPContent.has-sidebar 和 VPDoc.has-aside 的右侧 padding 归零，大纲容器右边缘与视口齐平
3. 头部产品导航三栏重构 — CustomHeader.vue header-top 改用 Grid 1fr auto 1fr，Logo 居左、产品 Tab 严格居中、工具栏居右；移除硬编码 width: 980px
4. 中窄屏防护（980–1479px） — 取消左右两列 min-width: 0，让 Grid 最小值 = 内容宽度，永不压缩；1440px 以下压缩 Tab padding/font 保证完整放下
5. 禁止折行 — TabNavigation.vue 新增 flex-shrink: 0; white-space: nowrap;，空间不足时横向滚动（隐藏滚动条）
6. header-bottom 保持居左 — 页面导航不受 header-top 居中改动影响

影响范围

• .vitepress/theme/style.css — 3 处变量/布局覆盖
• .vitepress/theme/components/CustomHeader.vue — header-top DOM 重构 + 样式
• .vitepress/theme/components/TabNavigation.vue — Tab 折行修复 + 清理死代码

测试建议

• 2560×1440 / 1920×1080 — 确认产品 Tab 严格居中、大纲贴右边
• 1440×900 / 1280×800 — 确认 Tab 完整显示、无重叠
• 980×600 — 确认 Tab 横向滑动、Logo/工具栏不动
• 暗色模式 — 确认激活态胶囊背景色正确

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: e66561d2-ae66-4fe2-b009-34f32e846148

---

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

---

_{Comment @coderabbitai help to get the list of available commands.}