docs: update header style

packages/vant-cli/site/desktop/App.vue

@@ -15,7 +15,7 @@
 
 <script>
 import VanDoc from './components';
-import { config, packageVersion } from 'site-desktop-shared';
+import { config } from 'site-desktop-shared';
 import { setLang } from '../common/locales';
 import { scrollToAnchor } from './utils';
 
@@ -28,7 +28,6 @@ export default {
     const path = location.pathname.replace(/\/index(\.html)?/, '/');
 
     return {
-      packageVersion,
       simulator: `${path}mobile.html${location.hash}`,
     };
   },
@@ -58,11 +57,7 @@ export default {
     },
 
     versions() {
-      if (config.site.versions) {
+      return config.site.versions || null;
-        return [{ label: packageVersion }, ...config.site.versions];
-      }
-
-      return null;
     },
   },
 

packages/vant-cli/site/desktop/components/Header.vue

@@ -13,12 +13,11 @@
             :key="index"
             class="van-doc-header__top-nav-item"
           >
-            <a
+            <a class="van-doc-header__link" target="_blank" :href="item.url">
-              class="van-doc-header__logo-link"
+              <img v-if="item.logo" :src="item.logo" />
-              target="_blank"
+              <span v-else-if="item.text">
-              :href="item.url"
+                {{ item.text }}
-            >
+              </span>
-              <img :src="item.logo" />
             </a>
           </li>
 
@@ -31,7 +30,7 @@
               class="van-doc-header__cube van-doc-header__version"
               @click="toggleVersionPop"
             >
-              {{ versions[0].label }}
+              {{ packageVersion }}
               <transition name="van-doc-dropdown">
                 <div v-if="showVersionPop" class="van-doc-header__version-pop">
                   <div
@@ -64,6 +63,7 @@
 
 <script>
 import SearchInput from './SearchInput';
+import { packageVersion } from 'site-desktop-shared';
 
 export default {
   name: 'van-doc-header',
@@ -81,6 +81,7 @@ export default {
 
   data() {
     return {
+      packageVersion,
       showVersionPop: false,
     };
   },
@@ -153,7 +154,6 @@ export default {
     align-items: center;
     height: @van-doc-header-top-height;
     padding: 0 @van-doc-padding;
-    line-height: @van-doc-header-top-height;
 
     &-nav {
       flex: 1;
@@ -167,7 +167,7 @@ export default {
       }
 
       &-item {
-        margin-left: 20px;
+        margin-left: 16px;
       }
 
       &-title {
@@ -183,7 +183,7 @@ export default {
     padding: 0 12px;
     color: #fff;
     font-size: 14px;
-    line-height: 24px;
+    line-height: 28px;
     text-align: center;
     border: 1px solid rgba(255, 255, 255, 0.7);
     border-radius: 20px;
@@ -196,8 +196,8 @@ export default {
 
     &::after {
       position: absolute;
-      top: 7px;
+      top: 9px;
-      right: 7px;
+      right: 9px;
       width: 5px;
       height: 5px;
       color: rgba(255, 255, 255, 0.9);
@@ -209,15 +209,16 @@ export default {
 
     &-pop {
       position: absolute;
-      top: 30px;
+      top: 34px;
-      right: 0;
       left: 0;
+      width: 100px;
       z-index: 99;
       color: #333;
       line-height: 36px;
       text-align: left;
+      overflow: hidden;
       background-color: #fff;
-      border-radius: @van-doc-border-radius;
+      border-radius: 8px;
       box-shadow: 0 4px 12px #ebedf0;
       transform-origin: top;
       transition: 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
@@ -228,6 +229,7 @@ export default {
 
         &:hover {
           color: @van-doc-blue;
+          background-color: #f7f8fa;
         }
       }
     }
@@ -243,8 +245,8 @@ export default {
     }
 
     img {
-      width: 24px;
+      width: 28px;
-      margin-right: 10px;
+      margin-right: 12px;
     }
 
     span {
@@ -253,11 +255,16 @@ export default {
     }
   }
 
-  &__logo-link {
+  &__link {
+    span {
+      color: #fff;
+      font-size: 16px;
+    }
+
     img {
       display: block;
-      width: 26px;
+      width: 28px;
-      height: 26px;
+      height: 28px;
       transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 
       &:hover {

packages/vant-cli/site/desktop/components/SearchInput.vue

@@ -47,4 +47,8 @@ export default {
   display: inline-block;
   vertical-align: middle;
 }
+
+.DocSearch-Button {
+  height: 32px;
+}
 </style>

packages/vant-use/.vuepress/config.js

@@ -7,7 +7,7 @@ module.exports = {
   themeConfig: {
     nav: [
       {
-        text: 'Github',
+        text: 'GitHub',
         link: 'https://github.com/youzan/vant/tree/next/packages/vant-use',
       },
     ],

vant.config.js

@@ -15,8 +15,9 @@ module.exports = {
   site: {
     defaultLang: 'en-US',
     versions: [
-      { label: '1.x', link: '/vant/1.x/' },
+      { label: 'Vant 1.x', link: '/vant/1.x/' },
-      { label: '2.x', link: '/vant/' },
+      { label: 'Vant 2.x', link: '/vant/' },
+      { label: 'Vant Weapp', link: '/vant-weapp/' },
     ],
     baiduAnalytics: {
       seed: 'ad6b5732c36321f2dafed737ac2da92f',
@@ -28,10 +29,6 @@ module.exports = {
         logo: 'https://img.yzcdn.cn/vant/logo.png',
         langLabel: '中文',
         links: [
-          {
-            logo: 'https://b.yzcdn.cn/vant/logo/weapp.svg',
-            url: '/vant-weapp',
-          },
           {
             logo: 'https://b.yzcdn.cn/vant/logo/github.svg',
             url: 'https://github.com/youzan/vant',
@@ -404,12 +401,8 @@ module.exports = {
         title: 'Vant',
         description: 'Mobile UI Components built on Vue',
         logo: 'https://img.yzcdn.cn/vant/logo.png',
-        langLabel: 'En',
+        langLabel: 'EN',
         links: [
-          {
-            logo: 'https://b.yzcdn.cn/vant/logo/weapp.svg',
-            url: '/vant-weapp',
-          },
           {
             logo: 'https://b.yzcdn.cn/vant/logo/github.svg',
             url: 'https://github.com/youzan/vant',