整合全文检索接口

themes/yilia/layout/_partial/post/share.ejs

@@ -44,4 +44,4 @@
   </div>
 </div>
 
-<div class="mask js-mask"></div>
+<%# <div class="mask js-mask"></div> %>

themes/yilia/layout/_partial/search.ejs

@@ -0,0 +1,20 @@
+<div class="page-modal js-search-box" ref="fullTextSearch" >
+  <a class="close js-modal-close" href="javascript:;"><i class="icon icon-close"></i></a>
+  <div class="search">
+    <div class="search-input-icon">
+      <i class="icon icon-search"></i>
+    </div>
+    <div class="search-input" >
+      <input placeholder="搜索所有文章" type="text" v-model="fullTextSearch.words" >
+    </div>
+  </div>
+  <div class="search-result">
+    <div class="search-result-item" v-for="(item,index) in fullTextSearchItems" :key="index">
+      <a v-text="item.title" :href="item.href"></a>
+      <div v-html="item.content"></div>
+    </div>
+    <div class="more-item" v-show="fullTextSearchItems.hasMore"  @click="loadMoreSearchResult">
+      <i class="icon icon-chevron-up"></i>
+    </div>
+  </div>
+</div>

themes/yilia/layout/_partial/tools.ejs

@@ -26,7 +26,7 @@
             <i class="icon icon-close" @click="searchItems.splice(index,1)"></i>
           </span>
           <input class="search-ipt" v-model="search" @blur="addSearchItem(search)" @keydown="searchKeydown" type="text" placeholder="<%=__('search') %>…">
-          <i class="icon icon-search" @click="addSearchItem(search)"></i>
+          <i class="icon icon-search" @click="openFullTextSearch"></i>
         </div>
         <div class="widget tagcloud search-tag">
           <div>

themes/yilia/layout/layout.ejs

@@ -31,6 +31,8 @@
       </div>
       <%- partial('_partial/footer') %>
     </div>
+    <div class="mask js-mask" ref="mask"></div>
+    <%- partial('_partial/search') %>
     <%- partial('_partial/tools') %>
     <%- partial('_partial/viewer') %>
   </div>

themes/yilia/source-src/css/share.scss

@@ -41,9 +41,9 @@
   }
 }
 .page-modal {
-  //display: none;
+  display: none;
   position: fixed;
-  top: 24%;
+  top: 50%;
   left: 50%;
   z-index: 1001;
   padding: 20px;
@@ -53,21 +53,16 @@
   border-radius: 4px;
   box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
   opacity: 0;
-  transform: translate(-50%, -200%);
+  transform: translate(-50%, -50%);
+  transition: .3s;
   p {
     margin-bottom: 10px; 
   }
-  &.ready {
-    visibility: hidden;
-    display: block;
-    transform: translate(-50%, -100%);
-    transition: .3s;
-  }
 
   &.in {
+    display: block;
     visibility: visible;
     opacity: 1;
-    transform: translate(-50%, 0);
   }
 
   .close {

themes/yilia/source-src/css/tools.scss

@@ -243,4 +243,45 @@ label.bui-switch-label {
       }
     }
   }
+}
+
+.js-search-box {
+  .search {
+    border-bottom: 1px solid #ccc;
+    background: #f5f5f5;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    width: 500px;
+    display: flex;
+    line-height: 40px;
+    .search-input-icon {
+      padding: 0 10px;
+    }
+    .search-input {
+      flex-grow: 1;
+      input[type=text] {
+        padding: 5px 0;
+        width: 100%;
+        outline: 0;
+        border: none;
+        background: 0 0;
+      }
+    }
+  }
+  .search-result {
+    height: 700px;
+    .search-result-item {
+      text-align: left;
+      border-bottom: 1px dashed $colorC;
+      padding: 10px 10px 0;
+      &:hover {
+        border-bottom-color: $colorA;
+      }
+    }
+    .more-item {
+      cursor: pointer;
+      text-align: center;
+      transform: rotate(180deg)
+    } 
+  }
 }

themes/yilia/source-src/js/share.js

@@ -11,7 +11,7 @@ function showWXModal() {
     })
     qrcodeInit = true
   }
-  wx.classList.add('in', 'ready')
+  wx.classList.add('in')
   mask.classList.add('in')
 }
 
@@ -19,7 +19,7 @@ function hideModal() {
   let modals = document.querySelectorAll('.page-modal')
   let mask = document.querySelector('.mask')
   Array.prototype.forEach.call(modals, modal => {
-    modal.classList.remove('in', 'ready')
+    modal.classList.remove('in')
   })
   mask.classList.remove('in')
 }

themes/yilia/source-src/js/slider.js

@@ -14,7 +14,7 @@ function setScrollZero() {
     em.scrollTop = 0
   })
 }
-var waifuTipTimer = null
+var waifuTipTimer = null, fullTextSearchTimer = null
 new Vue({
   el: '#container',
   data: {
@@ -28,6 +28,12 @@ new Vue({
     showCategories: false,
     search: null,
     searchItems: [],
+    fullTextSearch: {
+      pageNum: 1,
+      limit: 10,
+      words: null
+    },
+    fullTextSearchItems: [],
     waifu: {
       tip: null, // 提示语文字
       tipOpacity: 0, // 提示语框透明度
@@ -81,6 +87,19 @@ new Vue({
       }
       this.search = null
     },
+    openFullTextSearch() {
+      this.hideSlider()
+      this.$refs.fullTextSearch.classList.add('in')
+      this.$refs.mask.classList.add('in')
+    },
+    loadMoreSearchResult() {
+      this.fullTextSearch.pageNum ++
+      axios.get(window.themeConfig.root + 'api/common/search', {params: this.fullTextSearch}).then(res => {
+        let result = res.data
+        this.fullTextSearchItems.hasMore = (result.total > this.fullTextSearch.pageNum * this.fullTextSearch.limit)
+        this.fullTextSearchItems.push(...result.data)
+      })
+    },
     searchKeydown(event) {
       if(event.keyCode == 13){ // 回车键
         this.addSearchItem(this.search)
@@ -117,6 +136,25 @@ new Vue({
           item.isHide = false
         })
       }
+    },
+    fullTextSearch: {
+      deep: true,
+      handler(newVal, oldVal) {
+        if(!newVal.words) {
+          return
+        }
+        if(fullTextSearchTimer) {
+          clearTimeout(fullTextSearchTimer)
+        }
+        fullTextSearchTimer = setTimeout(() => {
+          this.fullTextSearchItems.length = 0
+          axios.get(window.themeConfig.root + 'api/common/search', {params: newVal}).then(res => {
+            let result = res.data
+            this.fullTextSearchItems.hasMore = (result.total > this.fullTextSearch.pageNum * this.fullTextSearch.limit)
+            this.fullTextSearchItems.push(...result.data)
+          })
+        }, 1000)
+      } 
     }
   },
   mounted () {