增加过滤功能

source/src/devtools/global.less

@@ -22,6 +22,10 @@
   }
 }
 
+.el-input-group__append {
+  padding: 0;
+}
+
 .el-tree {
   width: 100%;
 }

source/src/devtools/icon-font/demo_index.html

@@ -54,6 +54,12 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe7b9;</span>
+                <div class="name">font-size</div>
+                <div class="code-name">&amp;#xe7b9;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe626;</span>
                 <div class="name">车巴巴-未知项</div>
@@ -90,9 +96,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1624098111157') format('woff2'),
+  src: url('iconfont.woff2?t=1636725471182') format('woff2'),
-       url('iconfont.woff?t=1624098111157') format('woff'),
+       url('iconfont.woff?t=1636725471182') format('woff'),
-       url('iconfont.ttf?t=1624098111157') format('truetype');
+       url('iconfont.ttf?t=1636725471182') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -118,6 +124,15 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont el-icon-third-font-size"></span>
+            <div class="name">
+              font-size
+            </div>
+            <div class="code-name">.el-icon-third-font-size
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont el-icon-third-unknown"></span>
             <div class="name">
@@ -172,6 +187,14 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#el-icon-third-font-size"></use>
+                </svg>
+                <div class="name">font-size</div>
+                <div class="code-name">#el-icon-third-font-size</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#el-icon-third-unknown"></use>

source/src/devtools/icon-font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2620843 */
-  src: url('iconfont.woff2?t=1624098111157') format('woff2'),
+  src: url('iconfont.woff2?t=1636725471182') format('woff2'),
-       url('iconfont.woff?t=1624098111157') format('woff'),
+       url('iconfont.woff?t=1636725471182') format('woff'),
-       url('iconfont.ttf?t=1624098111157') format('truetype');
+       url('iconfont.ttf?t=1636725471182') format('truetype');
 }
 
 .iconfont ,[class='el-icon-third'],[class*=' el-icon-third']{
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.el-icon-third-font-size:before {
+  content: "\e7b9";
+}
+
 .el-icon-third-unknown:before {
   content: "\e626";
 }

source/src/devtools/icon-font/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "el-icon-third-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "8794801",
+      "name": "font-size",
+      "font_class": "font-size",
+      "unicode": "e7b9",
+      "unicode_decimal": 59321
+    },
     {
       "icon_id": "1156016",
       "name": "车巴巴-未知项",

source/src/devtools/ui/index.vue

@@ -17,6 +17,16 @@
           <el-button type="success" class="el-icon-refresh" @click="onBtnClickUpdateTree"></el-button>
         </div>
         <div class="treeList">
+          <el-input placeholder="输入关键字进行过滤" v-model="filterText">
+            <template slot="append">
+              <div class="matchCase ">
+                <div class="iconfont el-icon-third-font-size" @click.stop="onChangeCase"
+                     title="匹配大小写"
+                     :style="{'color':matchCase?'red':''}">
+                </div>
+              </div>
+            </template>
+          </el-input>
           <el-tree :data="treeData"
                    ref="tree"
                    style="display: inline-block;"
@@ -24,6 +34,7 @@
                    :highlight-current="true"
                    :default-expand-all="false"
                    :default-expanded-keys="expandedKeys"
+                   :filter-node-method="filterNode"
                    :expand-on-click-node="false"
                    node-key="uuid"
                    @node-expand="onNodeExpand"
@@ -51,7 +62,7 @@
 
 <script lang="ts">
 import Vue from "vue";
-import {Component} from "vue-property-decorator";
+import {Component, Watch} from "vue-property-decorator";
 import properties from "./propertys.vue";
 import {Msg, Page, PluginEvent} from "@/core/types"
 import {connectBackground} from "@/devtools/connectBackground";
@@ -70,6 +81,20 @@ export default class Index extends Vue {
   expandedKeys: Array<string> = [];
   selectedUUID: string | null = null;
 
+  filterText: string | null = null;
+
+  @Watch("filterText")
+  updateFilterText(val: any) {
+    (this.$refs?.tree as any)?.filter(val);
+  }
+
+  private matchCase = false;
+
+  onChangeCase() {
+    this.matchCase = !this.matchCase;
+    this.updateFilterText(this.filterText);
+  }
+
   // el-tree的渲染key
   defaultProps = {
     children: "children",
@@ -107,6 +132,19 @@ export default class Index extends Vue {
     });
   }
 
+  filterNode(value: any, data: any) {
+    if (!value) {
+      return true;
+    } else {
+      if (this.matchCase) {
+        // 严格匹配大写
+        return data?.name?.indexOf(value) !== -1;
+      } else {
+        return data?.name?.toLowerCase().indexOf(value.toLowerCase()) !== -1;
+      }
+    }
+  }
+
   _expand(uuid: string) {
 
     let expandKeys: Array<string> = [];
@@ -403,6 +441,16 @@ export default class Index extends Vue {
           text-decoration: line-through;
         }
 
+
+        .matchCase {
+          width: 30px;
+          height: 26px;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+        }
+
         &::-webkit-scrollbar {
           width: 6px;
           height: 6px;