Merge pull request Tencent#287 from aov2005/dev

feat: add log filter
sunderls · Nov 15, 2019 · 9a140d2 · 9a140d2
2 parents f4c6f5b + 1daacb1
commit 9a140d2
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 6 deletions.
diff --git a/src/core/core.less b/src/core/core.less
@@ -158,7 +158,7 @@
     }
 
     .vc-log {
-      padding-bottom: 39em / @font;
+      padding-bottom: (39em / @font) * 2;
       -webkit-tap-highlight-color: transparent;
     }
 
@@ -210,7 +210,9 @@
     }
 
     .vc-item {
-
+      &.hide{
+        display: none;
+      }
       .vc-item-content {
         margin-right: 60em / @font;
         display: inline-block;
@@ -333,9 +335,12 @@
       height: 40em / @font;
       left: 0;
       right: 0;
-      bottom: 0;
+      bottom: 41px;
       border-top: 1px solid #D9D9D9;
       display: block!important;
+      &.vc-filter{
+        bottom: 0;
+      }
 
       .vc-cmd-input-wrap {
         display: block;
@@ -554,4 +559,4 @@
     -webkit-transform: translate(0, 0);
     transform: translate(0, 0);
   }
-}
+}
diff --git a/src/log/default.js b/src/log/default.js
@@ -18,13 +18,20 @@ import * as tool from '../lib/tool.js';
 import VConsoleLogTab from './log.js';
 import tplTabbox from './tabbox_default.html';
 import tplItemCode from './item_code.html';
-
+let filterText = "";
+const checkFilterInLine = (dom) =>{
+  return dom.innerHTML.toUpperCase().indexOf(filterText.toUpperCase()) === -1
+};
 class VConsoleDefaultTab extends VConsoleLogTab {
 
   constructor(...args) {
     super(...args);
     this.tplTabbox = tplTabbox;
   }
+  formatLine ($line){
+    checkFilterInLine($line) ? $.addClass($line,'hide'):$.removeClass($line,'hide')
+    return $line
+  }
 
   onReady() {
     const that = this;
@@ -168,6 +175,18 @@ class VConsoleDefaultTab extends VConsoleLogTab {
         $prompted.style.display = 'none';
       }
     });
+    $.bind($.one('.vc-cmd.vc-filter', this.$tabbox), 'submit', function (e) {
+      e.preventDefault();
+      let $input = $.one('.vc-cmd.vc-filter .vc-cmd-input', e.target);
+      filterText = $input.value;
+      $.all(".vc-log>.vc-item").forEach(el=>{
+        if(checkFilterInLine(el)){
+          $.addClass(el,'hide')
+        }else{
+          $.removeClass(el,'hide')
+        }
+      })
+    });
 
     // create a global letiable to save custom command's result
     let code = '';

diff --git a/src/log/log.js b/src/log/log.js
@@ -523,6 +523,7 @@ class VConsoleLogTab extends VConsolePlugin {
     }
 
     // render to panel
+    if(this.formatLine) $line = this.formatLine($line);
     $.one('.vc-log', this.$tabbox).insertAdjacentElement('beforeend', $line);
 
     // remove overflow logs

diff --git a/src/log/tabbox_default.html b/src/log/tabbox_default.html
@@ -7,4 +7,11 @@
       <textarea class="vc-cmd-input" placeholder="command..."></textarea>
     </div>
   </form>
-</div>
+  <form class="vc-cmd vc-filter">
+    <button class="vc-cmd-btn" type="submit">filter</button>
+    <ul class='vc-cmd-prompted'></ul>
+    <div class="vc-cmd-input-wrap">
+      <textarea class="vc-cmd-input" placeholder="filter..."></textarea>
+    </div>
+  </form>
+</div>