feat(cli): docsearch v3

packages/vant-cli/package.json

@@ -43,6 +43,8 @@
     "@babel/plugin-transform-runtime": "^7.12.1",
     "@babel/preset-env": "^7.12.7",
     "@babel/preset-typescript": "^7.12.7",
+    "@docsearch/css": "3.0.0-alpha.31",
+    "@docsearch/js": "3.0.0-alpha.31",
     "@nuxt/friendly-errors-webpack-plugin": "^2.5.0",
     "@types/jest": "^26.0.15",
     "@types/webpack-dev-server": "^3.11.1",

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

@@ -7,12 +7,6 @@
           <span>{{ config.title }}</span>
         </a>
 
-        <search-input
-          v-if="searchConfig"
-          :lang="lang"
-          :search-config="searchConfig"
-        />
-
         <ul class="van-doc-header__top-nav">
           <li
             v-for="(item, index) in config.links"
@@ -56,6 +50,12 @@
           <li v-if="langLabel && langLink" class="van-doc-header__top-nav-item">
             <a class="van-doc-header__cube" :href="langLink">{{ langLabel }}</a>
           </li>
+
+          <search-input
+            v-if="searchConfig"
+            :lang="lang"
+            :search-config="searchConfig"
+          />
         </ul>
       </div>
     </div>

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

@@ -1,8 +1,11 @@
 <template>
-  <input class="van-doc-search" :placeholder="placeholder" />
+  <div id="docsearch" />
 </template>
 
 <script>
+import '@docsearch/css';
+import docsearch from '@docsearch/js';
+
 export default {
   name: 'van-doc-search',
 
@@ -11,41 +14,28 @@ export default {
     searchConfig: Object,
   },
 
-  computed: {
-    placeholder() {
-      return this.searchConfig.placeholder || 'Search...';
-    },
-  },
-
   watch: {
-    lang(lang) {
-      if (this.docsearchInstance) {
-        this.docsearchInstance.algoliaOptions.facetFilters = [`lang:${lang}`];
-      }
+    lang() {
+      this.initDocsearch();
     },
   },
 
   mounted() {
-    if (this.searchConfig) {
-      this.docsearchInstance = window.docsearch({
-        ...this.searchConfig,
-        transformData: (hits) => {
-          hits.forEach((hit) => {
-            if (hit.anchor) {
-              hit.url = hit.url + '#' + hit.anchor;
-              hit.anchor = null;
-            }
-          });
-          if (this.searchConfig.transformData) {
-            this.searchConfig.transformData(hits);
-          }
-        },
-        inputSelector: '.van-doc-search',
-        algoliaOptions: {
-          facetFilters: [`lang:${this.lang}`],
-        },
-      });
-    }
+    this.initDocsearch();
+  },
+
+  methods: {
+    initDocsearch() {
+      if (this.searchConfig) {
+        docsearch({
+          ...this.searchConfig,
+          container: '#docsearch',
+          searchParameters: {
+            facetFilters: [`lang:${this.lang}`],
+          },
+        });
+      }
+    },
   },
 };
 </script>
@@ -53,60 +43,8 @@ export default {
 <style lang="less">
 @import '../../common/style/var';
 
-.van-doc-search {
-  width: 400px;
-  height: @van-doc-header-top-height;
-  margin-left: 140px;
-  color: #fff;
-  font-size: 14px;
-  background-color: transparent;
-  border: none;
-
-  &:focus {
-    outline: none;
-  }
-
-  &::placeholder {
-    color: #fff;
-    opacity: 0.7;
-  }
-}
-
-.ds-dropdown-menu {
-  line-height: 1.8;
-}
-
-.algolia-autocomplete {
-  .algolia-docsearch-suggestion--highlight {
-    color: @van-doc-blue;
-    background-color: transparent;
-  }
-
-  .algolia-docsearch-suggestion--title {
-    font-weight: 600;
-  }
-
-  .algolia-docsearch-suggestion--text {
-    .algolia-docsearch-suggestion--highlight {
-      box-shadow: inset 0 -1px 0 0 @van-doc-blue;
-    }
-  }
-
-  .algolia-docsearch-suggestion--category-header {
-    border-bottom-color: #eee;
-  }
-
-  .ds-dropdown-menu [class^='ds-dataset-'] {
-    border: none;
-  }
-
-  .ds-dropdown-menu {
-    top: 80% !important;
-    box-shadow: 0 4px 12px #ebedf0;
-
-    &::before {
-      display: none;
-    }
-  }
+#docsearch {
+  display: inline-block;
+  vertical-align: middle;
 }
 </style>

packages/vant-cli/site/desktop/index.html

@@ -19,10 +19,6 @@
     <meta http-equiv="Cache-Control" content="no-cache" />
     <meta http-equiv="Pragma" content="no-cache" />
     <meta http-equiv="Expires" content="0" />
-    <link
-      href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css"
-      rel="stylesheet"
-    />
     <% if (htmlWebpackPlugin.options.baiduAnalytics) { %>
     <script>
       var _hmt = _hmt || [];
@@ -38,6 +34,5 @@
   </head>
   <body ontouchstart>
     <div id="app"></div>
-    <script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
   </body>
 </html>