搜索框改造完毕

themes/yilia/source-src/css/core/_variables.scss

@@ -25,7 +25,6 @@ $colorBorder:                    #dbdbdb !default;
 $colorLink:                      #08c !default;
 $colorPlaceholder:               #999 !default; // input placeholder color
 $colorDisabled:                  (text: #999, bg: #e3e3e3, border: #dbdbdb) !default; // textColor bgColor borderColor
-$colorOverlay:                   rgba(0,0,0,.7) !default; // 遮罩层颜色
 
 
 // 基本颜色

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

@@ -1,4 +1,3 @@
-.article-entry pre,
 .article-entry .highlight {
   margin: 10px 0;
   overflow: auto;

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

@@ -36,14 +36,18 @@
       margin: 20px 20px 10px 20px;
       position: relative;
       border-bottom: 2px solid $colorF;
+      display: flex;
+      flex-wrap: wrap;
       cursor: text;
       .search-ipt {
-        width: 50px;
         color: $colorF;
         background: none;
         border: none;
+        flex-grow: 1;
+        width: 0;
+        min-width: 80px;
       }
-      .icon {
+      >.icon-search {
         position: absolute;
         right: 0;
         bottom: 7px;
@@ -55,20 +59,17 @@
         }
       }
       .search-item {
-        border: 1px solid $colorF;
         padding-left: 5px;
-        line-height: 1.4em;
-        display: inline-block;
-        border-radius: $radiusBase;
-        &::after {
-          content: "x";
-          border-left: 1px solid $colorF;
-          width: 20px;
-          height: 20px;
-          display: inline-block;
-          margin: 3px 0 3px 3px;
-          line-height: 20px;
-          text-align: center;
+        margin: 2px;
+        border-radius: 20px;
+        background-color: #076773;
+        white-space: nowrap;
+        >.icon-close {
+          color: darken($colorF, 15%);
+          font-size: 12px;
+          position: relative;
+          bottom: 2px;
+          margin-right: 3px;
           cursor: pointer;
         }
       }

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

@@ -27,6 +27,7 @@ new Vue({
     showTags: false,
     showCategories: false,
     search: null,
+    searchItems: [],
     waifu: {
       tip: null, // 提示语文字
       tipOpacity: 0, // 提示语框透明度
@@ -37,12 +38,6 @@ new Vue({
     stop (event) {
       event.stopPropagation()
     },
-    chose (name, prefix) {
-      this.search = prefix + name
-    },
-    clearChose () {
-      this.search = null
-    },
     openSlider (event, type) {
       event.stopPropagation()
       this.innerArchive = false
@@ -68,6 +63,24 @@ new Vue({
         waifuTools[name].call(this)
       }
     },
+    addSearchItem(query, type='title') {
+      // 如果已存在相同的查询条件, 则不加入
+      var isExist = Array.prototype.some.call(this.searchItems, searchItem => {
+        return searchItem.query === query && searchItem.type === type
+      })
+      if(!isExist && query) {
+        this.searchItems.push({query, type})
+      }
+      this.search = null
+    },
+    searchKeydown(event) {
+      console.log(event.keyCode)
+      if(event.keyCode == 13){ // 回车键
+        this.addSearchItem(this.search)
+      } else if(event.keyCode == 8) { // 退格键
+        this.searchItems.pop()
+      }
+    },
     showMessage (text, time) {
       if(!text) return
       if(Array.isArray(text)) text = text[Math.floor(Math.random() * text.length + 1)-1]
@@ -89,9 +102,10 @@ new Vue({
     }
   },
   watch: {
-    search (newVal, oldVal) {
-      if(newVal) {
-        handleSearch.call(this, newVal.toLowerCase())
+    searchItems (newVal, oldVal) {
+      console.log(newVal)
+      if(newVal && newVal.length) {
+        handleSearch.call(this, newVal)
       } else {
         this.items.forEach(function(item){
           item.isHide = false
@@ -120,33 +134,22 @@ new Vue({
   }
 })
 
-function handleSearch(val) {
-  var type
-  if (val.startsWith('#')) {
-    val = val.substr(1, val.length)
-    type = 'tag'
-  } else if (val.startsWith('$')) {
-    val = val.substr(1, val.length)
-    type = 'category'
-  } else {
-    type = 'title'
-  }
-  this.items.forEach((item) => {
-    switch(type) {
-    case 'title' : 
-      item.isHide = item.title.toLowerCase().indexOf(val) < 0
-      break
-    case 'tag' : 
-      item.isHide = Array.prototype.every.call(item.tags, function(tag){
-        return tag.name.toLowerCase() !== val
-      })
-      break
-    case 'category' : 
-      item.isHide = Array.prototype.every.call(item.categories, function(category){
-        return category.name.toLowerCase() !== val
-      })
-      break
-    }
+function handleSearch(searchItems) {
+  this.items.forEach(articleItem => {
+    articleItem.isHide = !Array.prototype.every.call(searchItems, searchItem => {
+      switch(searchItem.type) {
+        case 'title': 
+          return articleItem.title.toLowerCase().indexOf(searchItem.query.toLowerCase()) !== -1
+        case 'tag' : 
+          return Array.prototype.some.call(articleItem.tags, tag => {
+            return tag.name === searchItem.query
+          })
+        case 'category' : 
+          return Array.prototype.some.call(articleItem.categories, category => {
+            return category.name === searchItem.query
+          })
+      }
+    })
   })
 }