From 5f7c75511f75285a4f3aa30fe9ad8906c89bd338 Mon Sep 17 00:00:00 2001
From: DCloud_LXH <283700113@qq.com>
Date: Fri, 6 May 2022 15:39:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=8B=E6=8B=89=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E4=B8=80=E7=BA=A7=E8=8F=9C=E5=8D=95=EF=BC=8C=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E6=A1=86=E4=B8=8B=E6=B2=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../theme/components/AlgoliaSearchBox.vue     |  4 +--
 docs/.vuepress/theme/components/Navbar.vue    | 36 +++++++++++++++----
 docs/.vuepress/theme/config/navbar.js         |  1 +
 docs/.vuepress/theme/styles/navbar.styl       | 15 ++++++++
 4 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/docs/.vuepress/theme/components/AlgoliaSearchBox.vue b/docs/.vuepress/theme/components/AlgoliaSearchBox.vue
index 5c6fe6a10..bdc280a76 100644
--- a/docs/.vuepress/theme/components/AlgoliaSearchBox.vue
+++ b/docs/.vuepress/theme/components/AlgoliaSearchBox.vue
@@ -61,11 +61,11 @@
 	   flex-direction column
 	   justify-content center
 	 #docsearch span
-	   @media (min-width: $MQMobile)
+	   @media (min-width: 1200px)
 	    &
 	     display flex
 
-	 @media (max-width: $MQMobile)
+	 @media (max-width: 1200px)
 	   :root
 	     --docsearch-spacing 10px
 	     --docsearch-footer-height 40px
diff --git a/docs/.vuepress/theme/components/Navbar.vue b/docs/.vuepress/theme/components/Navbar.vue
index cb836d610..d392ea1a0 100644
--- a/docs/.vuepress/theme/components/Navbar.vue
+++ b/docs/.vuepress/theme/components/Navbar.vue
@@ -30,9 +30,7 @@
 
       <div
         class="links"
-        :style="linksWrapMaxWidth ? {
-          'max-width': linksWrapMaxWidth + 'px'
-        } : {}"
+        :style="SearchBoxStyle"
       >
         <!-- <a class="switch-version" href="javascript:void(0)">回到旧版</a> -->
         <DcloudSearchPage v-if="isAlgoliaSearch" ref="dcloudSearchPage" :options="algolia"/>
@@ -42,6 +40,14 @@
     </div>
 
     <div class="sub-navbar">
+      <DropdownLink
+        class="custom-main-navbar can-hide"
+        v-if="showSubNavBar && fixedNavbar"
+        :item="{
+          text: customNavBarKeys[navConfig.userNavIndex],
+          items: customNavBar
+        }"
+      />
       <NavLinks class="can-hide" />
       <div class="mobile-sub-navbar">
         <div class="subnavbar__item" @click="$emit('toggle-sidebar')">
@@ -61,6 +67,7 @@ import MainNavbarLink from './MainNavbarLink.vue';
 import NavbarLogo from './NavbarLogo.vue';
 import DcloudSearchPage from './DcloudSearchPage';
 import navInject from '../mixin/navInject';
+import DropdownLink from '@theme/components/DropdownLink.vue'
 import { forbidScroll, os } from '../util';
 
 export default {
@@ -75,14 +82,16 @@ export default {
     SearchBox,
     AlgoliaSearchBox,
     NavbarLogo,
-    DcloudSearchPage
+    DcloudSearchPage,
+    DropdownLink
   },
 
   data () {
     return {
       linksWrapMaxWidth: null,
       showMobilePanel: false,
-      fixedNavbar: false
+      fixedNavbar: false,
+      SearchBoxTop: 0
     }
   },
 
@@ -93,6 +102,18 @@ export default {
 
     isAlgoliaSearch () {
       return this.algolia && this.algolia.apiKey && this.algolia.indexName
+    },
+
+    SearchBoxStyle () {
+      const initStyle = {
+        top: `${this.SearchBoxTop}px`,
+        zIndex: 100
+      };
+      return this.linksWrapMaxWidth
+        ? Object.assign({}, initStyle, {
+            'max-width': this.linksWrapMaxWidth + 'px',
+          })
+        : initStyle;
     }
   },
 
@@ -148,7 +169,7 @@ export default {
       this.vuepressToc && this.vuepressToc.removeAttribute('style')
       this.navbar && this.navbar.removeAttribute('style')
       if (this.pageContainer) {
-        this.pageContainer.style.marginTop = this.showSubNavBar ? 'auto' : `${this.navbarHeight}px`
+        this.pageContainer.style.marginTop = this.showSubNavBar || !os.pc ? 'auto' : `${this.navbarHeight}px`
       }
     },
     onWindowScroll () {
@@ -165,6 +186,7 @@ export default {
         if (!this.fixedNavbar) {
           this.fixedNavbar = true
           this.navbar.style.top = `-${this.mainNavBarHeight}px`
+          this.SearchBoxTop = this.mainNavBarHeight + (this.subNavBarHeight - this.mainNavBarHeight) / 2
           this.$nextTick(() => {
             this.pageContainer && (this.pageContainer.style.marginTop = `${this.navbarHeight}px`)
           })
@@ -173,6 +195,7 @@ export default {
         if (this.fixedNavbar) {
           this.fixedNavbar = false
           this.pageContainer && (this.pageContainer.style.marginTop = 'auto')
+          this.SearchBoxTop = 0
         }
       }
     },
@@ -264,6 +287,7 @@ $navbar-horizontal-padding = 1.5rem
       display none !important
     .links
       padding-left 0rem // 1.5rem
+      top 0 !important
     .site-name
       width calc(100vw - 9.4rem)
       overflow hidden
diff --git a/docs/.vuepress/theme/config/navbar.js b/docs/.vuepress/theme/config/navbar.js
index 599bb2795..9082f27eb 100644
--- a/docs/.vuepress/theme/config/navbar.js
+++ b/docs/.vuepress/theme/config/navbar.js
@@ -10,6 +10,7 @@
 export const navbar = [
   {
     text: 'uni-app',
+    link: '/',
     items: [
       {
         text: '介绍',
diff --git a/docs/.vuepress/theme/styles/navbar.styl b/docs/.vuepress/theme/styles/navbar.styl
index cb9bc5357..83bd8ba6c 100644
--- a/docs/.vuepress/theme/styles/navbar.styl
+++ b/docs/.vuepress/theme/styles/navbar.styl
@@ -20,6 +20,7 @@ $navbar-logo-height = $navbar-main-navbar-height - 2rem
       &
         display none
   .sub-navbar
+    position relative
     line-height $navbar-sub-navbar-height
     border-top-width 1px
   .mobile-main-navbar
@@ -76,6 +77,20 @@ $navbar-logo-height = $navbar-main-navbar-height - 2rem
     color inherit
     &:hover
       color $accentColor
+  
+  .custom-main-navbar
+    position absolute
+    height 30px
+    top calc(50% - 15px)
+    left 2rem
+    @media (max-width: 1200px)
+      display none
+    a
+      color inherit
+    .nav-dropdown 
+      right auto
+      left 0
+      z-index 12
 
 @media (max-width: $MQMobile)
   $navbar-a-color = #222;
-- 
GitLab