wip: search page

docs/.vuepress/theme/components/DcloudSearchPage/index.styl

@@ -5,8 +5,8 @@ $svg-hover-color = #9b9b9b
   position relative
   overflow auto
   position fixed
-  width 100vw
-  height 100vh
+  width 100%
+  height 100%
   left 0
   top 0
   z-index 200
@@ -195,6 +195,7 @@ $svg-hover-color = #9b9b9b
         display flex
 
         p.aw-text
+          font-weight normal
           margin 0
           display inline-flex
 

docs/.vuepress/theme/components/DcloudSearchPage/index.vue

@@ -173,14 +173,13 @@
 				]),
 				categoryIndex: 0,
 				resultList: [],
+				serverHtml: '',
 
 				searchPage: 0, // 跳转页数
 				curHits: 0, // 当前搜索结果总条数
 				totalPage: 0, // 搜索结果总共页数
 				curPage: 1, // 当前页
 				pageSize: 0, // 每页条数
-
-				serverHtml: '',
 			};
 		},
 
@@ -235,9 +234,16 @@
 				const searchNavbarHeight = document.querySelector('.search-navbar').clientHeight;
 				const resultNumberHeight = document.querySelector('.result-number').clientHeight;
 				const algoliaLogoHeight = document.querySelector('.algolia-logo').clientHeight;
+				const searchPagination = 36;
 
 				document.querySelector('.result-wrap').style.minHeight =
-					pageHeight - searchNavbarHeight - resultNumberHeight - algoliaLogoHeight - 20 + 'px';
+					pageHeight -
+					searchNavbarHeight -
+					resultNumberHeight -
+					algoliaLogoHeight -
+					searchPagination -
+					20 +
+					'px';
 			},
 
 			resetSearchPage() {
@@ -250,8 +256,8 @@
 			},
 
 			search() {
-				if (!this.searchValue) return;
-				const { text, type } = this.currentCategory;
+				if (!this.searchValue || !this.searchValue.trim().length) return;
+				const { type } = this.currentCategory;
 				switch (type) {
 					case 'algolia':
 						this.searchByAlgolia(this.searchValue, this.searchPage).then(
@@ -307,15 +313,13 @@
 				switch (tag) {
 					case 'ext':
 						postExt(query).then(({ html, hits }) => {
-							this.serverHtml = '';
-							this.serverHtml += html;
+							this.serverHtml = html;
 							this.curHits = hits;
 						});
 						break;
 					case 'ask':
 						postAsk(query).then(({ html, hits }) => {
-							this.serverHtml = '';
-							this.serverHtml += html;
+							this.serverHtml = html;
 							this.curHits = hits;
 						});
 						break;

docs/.vuepress/theme/components/DcloudSearchPage/postDcloudServer.js

 const isProduction = process.env.NODE_ENV === "production"
-const isMock = false
+const isMock = true
 import mock from './mock'
 
 function ajax(url = '', method = 'get',) {
@@ -71,10 +71,12 @@ function _renderExt(ext, keyword) {
   return `<div class="matching-post">
     <a href="${ext.url}" target="_blank">
       <div class="post-wrapper">
-        <p class="aw-text">
-          <span class="post-tag">插件</span>
-        </p>
-        <h2>${_handleHTMLString(ext.name, keyword)}</h2>
+        <h2>
+          <p class="aw-text">
+            <span class="post-tag">插件</span>
+          </p>
+          ${_handleHTMLString(ext.name, keyword)}
+        </h2>
       </div>
       <p>${ext.total_download}次下载</p>
       <p>${_handleHTMLString(ext.description, keyword)}</p>
@@ -103,17 +105,23 @@ function _renderPost(post, value) {
   }
 
   html += `<div class="matching-post">
-  <a href="${post.url}" target="_blank"><div class="post-wrapper">
-  <p class="aw-text"><span class="post-tag">${tagName}</span></p>
-  <h2>${post.title}</h2></div>`
-  /*  html += '<div class="matching-post">\n';
-   html += `<a href="${post.url}" target="_blank"><div class="post-wrapper">`;
-   html += `<p class="aw-text"><span class="post-tag">${tagName}</span></p>`
-   html += `\n<h2>${post.title}</h2></div>`; */
+    <a href="${post.url}" target="_blank">
+    <div class="post-wrapper">
+      <h2>
+        <p class="aw-text">
+          <span class="post-tag">${tagName}</span>
+        </p>
+        ${post.title}
+      </h2>
+  </div>`
 
   if (!!value) {
     commentText = post.type === 'questions' ? '回复' : '评论';
-    html += `<p>${post.comment_count}个${commentText}<span class="aw-text-space">-</span>${post.view_count}次浏览</p>`;
+    html += `<p>
+      ${post.comment_count}个${commentText}
+      <span class="aw-text-space">-</span>
+      ${post.view_count}次浏览
+    </p>`;
   }
 
   html += `\n<p>${post.content}</p>\n</a>\n</div>`;

docs/.vuepress/theme/components/Navbar.vue

@@ -35,11 +35,8 @@
         } : {}"
       >
         <a class="switch-version" href="javascript:void(0)" @click="switchVersion">回到旧版</a>
-        <DcloudSearchPage ref="dcloudSearchPage" v-if="isAlgoliaSearch" :options="algolia"/>
-        <AlgoliaSearchBox
-          v-if="isAlgoliaSearch"
-          :options="algolia"
-        />
+        <DcloudSearchPage v-if="isAlgoliaSearch" ref="dcloudSearchPage" :options="algolia"/>
+        <AlgoliaSearchBox v-if="isAlgoliaSearch" />
         <SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false" />
       </div>
     </div>

docs/.vuepress/theme/styles/navbar.styl

@@ -92,7 +92,8 @@ $navbar-logo-height = $navbar-main-navbar-height - 2rem
       justify-content flex-end
     .mobile-main-navbar
       display inline-block
-      padding-right 75px
+      // padding-right 75px
+      padding-right 165px
       a
         color $navbar-a-color
       .mobile-links__btn:after