完成搜索功能

css/index.css

@@ -1 +1 @@
-body{line-height:1.5;font-size:14px;color:var(--color-dark-1)}a{color:inherit;text-decoration:none}wc-switch{cursor:pointer}.app{width:100%;height:100vh}.flex{display:flex}.flex.column{flex-direction:column}.flex.ac{justify-content:center}.flex.alc{align-items:center}.flex.acc{justify-content:center;align-items:center}.flex.asc{justify-content:space-between;align-items:center}.wrapper{width:1024px}.topbar{width:100%;height:64px;background:#fff;box-shadow:0 6px 12px rgba(0,0,0,.05)}.topbar .logo{font-size:24px;color:var(--color-red-1)}.topbar .logo span{font-size:14px}.topbar .navs{font-size:16px}.topbar .navs .nav{margin-left:32px;cursor:pointer;transition:color .2s linear}.topbar .navs .nav.active,.topbar .navs .nav:hover{text-decoration:underline;color:var(--color-red-1)}.main{flex:1}.main .table-info{width:100%;height:64px}.main .search{width:100%}.main .search .field{margin-top:16px}.main .search .field wc-input{flex:1}.footer{width:100%;height:64px;border-top:1px solid var(--color-plain-2)}@media screen and (max-width: 1024px){.topbar,.main{padding:0 16px}.footer .wrapper{flex-direction:column;align-items:center;justify-content:center}}
+body{line-height:1.5;font-size:14px;color:var(--color-dark-1)}a{color:inherit;text-decoration:none}wc-switch{cursor:pointer}.app{width:100%;height:100vh}.flex{display:flex}.flex.column{flex-direction:column}.flex.ac{justify-content:center}.flex.alc{align-items:center}.flex.acc{justify-content:center;align-items:center}.flex.asc{justify-content:space-between;align-items:center}.wrapper{width:1024px}.topbar{width:100%;height:64px;background:#fff;box-shadow:0 6px 12px rgba(0,0,0,.05)}.topbar .logo{font-size:24px;color:var(--color-red-1)}.topbar .logo span{font-size:14px}.topbar .navs{font-size:16px}.topbar .navs .nav{margin-left:32px;cursor:pointer;transition:color .2s linear}.topbar .navs .nav.active,.topbar .navs .nav:hover{text-decoration:underline;color:var(--color-red-1)}.main{flex:1}.main .table-info{width:100%;height:64px}.main .search{width:100%}.main .search .field{margin-top:16px}.main .search .field.result{line-height:2;word-wrap:break-word;white-space:pre-wrap}.main .search .field wc-input{flex:1}.footer{width:100%;height:64px;border-top:1px solid var(--color-plain-2)}@media screen and (max-width: 1024px){.topbar,.main{padding:0 16px}.footer .wrapper{flex-direction:column;align-items:center;justify-content:center}}

css/index.scss

@@ -92,6 +92,12 @@ wc-switch {
     .field {
       margin-top: 16px;
 
+      &.result {
+        line-height: 2;
+        word-wrap: break-word;
+        white-space: pre-wrap;
+      }
+
       wc-input {
         flex: 1;
       }

index.html

@@ -35,18 +35,20 @@
 
       <div class="search">
         <section class="field flex alc">
-          <wc-input placeholder="输入汉字查询编码"></wc-input>
+          <wc-input placeholder="输入汉字查询编码" :duplex="filter.txt" @submit="search"></wc-input>
         </section>
 
         <section class="field flex alc">
-          <wc-radio-group value="86">
+          <wc-radio-group :duplex="filter.table">
             <wc-radio value="86">86版</wc-radio>
             <wc-radio value="18030" type="danger">18030版(86修正版)</wc-radio>
           </wc-radio-group>
 
-          <wc-switch>是否开启反查</wc-switch>
+          <wc-switch :duplex="filter.reverse">是否开启反查</wc-switch>
         </section>
 
+        <section class="field result">{{result}}</section>
+
       </div>
 
       <div class="panel">

js/index.js

@@ -5,21 +5,31 @@
  */
 
 import '//unpkg.yutent.top/anot/dist/anot.js'
+import '//unpkg.yutent.top/@bytedo/wcui/dist/layer/index.js'
 import '//unpkg.yutent.top/@bytedo/wcui/dist/form/input.js'
 import '//unpkg.yutent.top/@bytedo/wcui/dist/form/button.js'
 import '//unpkg.yutent.top/@bytedo/wcui/dist/form/radio.js'
 import '//unpkg.yutent.top/@bytedo/wcui/dist/form/switch.js'
 import fetch from '//unpkg.yutent.top/@bytedo/fetch/dist/index.js'
 
-const WB_TABLE = {}
+import { Enum } from './lib/core.js'
+
+const WB_CODE_NAME = new Enum({ 1: '一级简码', 2: '二级简码', 3: '三级简码', 4: '四级简码' })
+const WB_TABLE = new Enum()
 
 Anot.hideProperty(WB_TABLE, 'length', 0)
 
 Anot({
   $id: 'app',
   state: {
-    single: 222,
+    single: 0,
-    words: 0
+    words: 0,
+    result: '',
+    filter: {
+      txt: '',
+      table: '86',
+      reverse: false
+    }
   },
   mounted() {
     fetch('./data/table.txt')
@@ -35,12 +45,38 @@ Anot({
           let k = it.shift()
 
           if (k) {
-            WB_TABLE[k] = it
+            WB_TABLE.add(k, it)
-            WB_TABLE.length++
           }
         })
 
+        window.foo = WB_TABLE
+
+        console.log(WB_TABLE)
+
         this.single = WB_TABLE.length
       })
+  },
+
+  methods: {
+    search() {
+      var params = { ...this.filter }
+      var res
+
+      params.txt = params.txt.toLowerCase()
+
+      if (params.reverse && !/^[a-z]{1,4}$/.test(params.txt)) {
+        return layer.toast('不合法的五笔编码', 'warning')
+      }
+
+      res = WB_TABLE.get(params.txt)
+
+      if (params.reverse) {
+        res = res.join('\t')
+      } else {
+        res = res.map(t => `${WB_CODE_NAME.get(t.length)}: ${t}`).join('\t')
+      }
+
+      this.result = `查询结果: 【 ${params.txt} 】\n${res.toUpperCase()}`
+    }
   }
 })

js/lib/core.js

@@ -0,0 +1,70 @@
+export class Enum {
+  #dict_k = Object.create(null)
+  #dict_v = Object.create(null)
+  length = 0
+
+  constructor(obj = {}) {
+    for (let k in obj) {
+      this.add(k, obj[k])
+    }
+  }
+
+  add(k, v) {
+    if (this.#dict_k[k]) {
+      var _v = this.#dict_k[k]
+
+      for (let t of _v) {
+        this.#dict_v[t] = this.#dict_v[t].filter(i => i !== k)
+      }
+    } else {
+      this.#dict_k[k] = Array.isArray(v) ? v : [v]
+      this.length++
+    }
+
+    if (Array.isArray(v)) {
+      for (let t of v) {
+        if (this.#dict_v[t]) {
+          this.#dict_v[t].push(k)
+        } else {
+          this.#dict_v[t] = [k]
+        }
+      }
+    } else {
+      this.#dict_v[v] = [k]
+    }
+  }
+
+  remove(k) {
+    var v = this.#dict_k[k]
+    if (v) {
+      delete this.#dict_k[k]
+      if (Array.isArray(v)) {
+        for (let t of v) {
+          delete this.#dict_v[t]
+        }
+      }
+      this.length--
+    }
+  }
+
+  get(k) {
+    if (this.#dict_k[k]) {
+      return this.#dict_k[k]
+    } else if (this.#dict_v[k]) {
+      return this.#dict_v[k]
+    }
+  }
+
+  forEach(callback) {
+    for (let k in this.#dict_k) {
+      if (callback(k, this.#dict_k[k]) === false) {
+        break
+      }
+    }
+    return this
+  }
+
+  toString() {
+    return JSON.stringify(this.#dict_k)
+  }
+}

js/table/level.1.js

@@ -0,0 +1,3 @@
+export LEVEL_1 = {
+  
+}