styles(docs): optimize docs layout and mobile navigation styles

docs/.vitepress/theme/components/CustomHeader.vue

@@ -213,6 +213,7 @@ const openSearch = () => {
 .custom-header {
   --vp-c-divider: #f9f9f9;
   --search-border-color: #dfdfdf;
+  --header-inline-padding: 24px;
 
   position: sticky;
   top: 0;
@@ -230,18 +231,19 @@ const openSearch = () => {
 }
 
 .header-container {
-  max-width: 92rem;
-  margin: 0 auto;
   width: 100%;
 }
 
 /* 第一行样式 */
 .header-top {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto minmax(280px, 1fr) auto;
+  column-gap: clamp(20px, 3vw, 40px);
   height: 4rem;
   align-items: center;
-  justify-content: space-between;
+  justify-content: stretch;
   border-bottom: 1px solid var(--vp-c-divider);
+  padding: 0 var(--header-inline-padding);
 }
 
 .logo-section {
@@ -270,9 +272,10 @@ const openSearch = () => {
 /* 搜索栏样式 */
 .search-section {
   display: flex;
-  flex: 1;
+  justify-self: center;
+  width: 100%;
   max-width: 512px;
-  margin: 0 32px;
+  margin: 0;
 }
 
 .search-container {
@@ -332,6 +335,7 @@ const openSearch = () => {
 .tools-section {
   display: flex;
   align-items: center;
+  justify-self: end;
   gap: 8px;
 }
 
@@ -379,25 +383,38 @@ const openSearch = () => {
 
 /* 第二行样式 */
 .header-bottom {
+  display: flex;
   height: var(--vp-nav-bottom-height);
   align-items: center;
-  padding-left: 3rem;
-  padding-right: 3rem;
+  overflow-x: auto;
+  padding: 0 var(--header-inline-padding);
+  scrollbar-width: none;
+}
+
+.header-bottom::-webkit-scrollbar {
+  display: none;
 }
 
 /* 响应式设计 */
-@media (min-width: 1024px) {
-  .header-bottom {
-    display: flex;
+@media (min-width: 960px) {
+  .custom-header {
+    --header-inline-padding: 32px;
   }
+}
+
+@media (min-width: 1024px) {
   .header-top {
-    padding: 0 3rem;
     margin-left: 0;
     margin-right: 0;
   }
 }
 
 @media (max-width: 768px) {
+  .header-top {
+    grid-template-columns: auto 1fr auto;
+    column-gap: 16px;
+  }
+
   .search-section {
     display: none;
   }
@@ -412,8 +429,13 @@ const openSearch = () => {
 }
 
 @media (max-width: 640px) {
+  .custom-header {
+    --header-inline-padding: 12px;
+  }
+
   .header-top {
-    padding: 0 12px;
+    column-gap: 6px;
+    padding-right: 8px;
   }
 
   .tools-section {
@@ -446,4 +468,19 @@ const openSearch = () => {
     transition: none;
   }
 }
+@media (max-width: 360px) {
+  .logo-icon {
+    width: 36px;
+    height: 36px;
+  }
+
+  .home-link svg {
+    display: none;
+  }
+
+  .tool-button {
+    width: 24px;
+    height: 24px;
+  }
+}
 </style>

docs/.vitepress/theme/components/TabNavigation.vue

@@ -279,15 +279,15 @@ onUnmounted(() => {
 @media (max-width: 768px) {
   .custom-tabs {
     &__header {
-      padding: 0 12px;
+      padding: 0;
     }
 
     &__nav {
-      gap: 2px;
+      gap: 24px;
     }
 
     &__item {
-      padding: 6px 12px;
+      padding: 0;
       font-size: 13px;
     }
   }

docs/.vitepress/theme/style.css

@@ -236,8 +236,68 @@ div:has(h1[id='bubble-气泡组件']) {
 }
 
 .main-content > .Layout {
-  min-height: calc(100vh - 113px);
-  min-height: calc(100dvh - 113px);
+  min-height: calc(100vh - var(--vp-nav-height) - var(--vp-nav-bottom-height) - 1px);
+  min-height: calc(100dvh - var(--vp-nav-height) - var(--vp-nav-bottom-height) - 1px);
+}
+
+/* ===== 文档页宽屏布局优化 ===== */
+.main-content {
+  --tr-doc-aside-width: 224px;
+  --tr-doc-side-gap: clamp(48px, 2.5vw, 96px);
+  --tr-doc-content-max-width: clamp(920px, 60vw, 4640px);
+  --tr-doc-demo-content-max-width: clamp(1200px, 68vw, 5200px);
+}
+
+@media (min-width: 1280px) {
+  .main-content .VPDoc.has-aside .container {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) var(--tr-doc-aside-width);
+    column-gap: var(--tr-doc-side-gap);
+    align-items: start;
+    justify-content: stretch;
+    width: 100%;
+    max-width: none !important;
+  }
+
+  .main-content .VPDoc.has-aside > .container > .content {
+    grid-column: 1;
+    grid-row: 1;
+    min-width: 0;
+    max-width: none;
+    width: 100%;
+  }
+
+  .main-content .VPDoc.has-aside .content-container {
+    width: 100%;
+    max-width: min(100%, var(--tr-doc-content-max-width)) !important;
+    margin: 0 auto;
+  }
+
+  .main-content .VPDoc:has(.vitepress-demo-plugin__container) .content-container,
+  .main-content .VPDoc:has(.vitepress-demo-plugin-placeholder__container) .content-container {
+    max-width: min(100%, var(--tr-doc-demo-content-max-width)) !important;
+  }
+
+  .main-content .VPDoc.has-aside > .container > .aside {
+    grid-column: 2;
+    grid-row: 1;
+    justify-self: end;
+    width: var(--tr-doc-aside-width) !important;
+    max-width: var(--tr-doc-aside-width) !important;
+    padding-left: 0 !important;
+  }
+}
+
+@media (min-width: 1440px) {
+  .main-content .VPContent.has-sidebar {
+    padding-left: calc(var(--vp-sidebar-width) + var(--tr-doc-side-gap)) !important;
+    padding-right: var(--tr-doc-side-gap) !important;
+  }
+
+  .main-content .VPSidebar {
+    width: var(--vp-sidebar-width) !important;
+    padding-left: 32px !important;
+  }
 }
 
 /* ===== 响应式布局 ===== */