update

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)}.footer{width:100%;height:64px;border-top:1px solid var(--color-plain-2)}.main{flex:1}.main .table-info{width:100%;height:64px}.main .table-info i{color:var(--color-red-1)}.main .search{width:100%}.main .search .field{margin-top:16px}.main .search .field.result{line-height:2;font-family:Menlo;word-wrap:break-word;white-space:pre-wrap}.main .search .field wc-input{flex:1}.main .about{padding:32px 16px}.main .about h2{font-size:24px}.main .about .logs .version{margin-top:32px;line-height:2;font-weight:bold;font-size:18px}.main .about .logs dd{color:var(--color-grey-3)}.main .about .logs ol{padding-left:2em;list-style:decimal}@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)}.footer{width:100%;height:64px;border-top:1px solid var(--color-plain-2)}.main{flex:1}.main .table-info{width:100%;height:64px}.main .table-info i{color:var(--color-red-1)}.main .table-info .download{margin-left:32px}.main .search{width:100%}.main .search .field{margin-top:16px}.main .search .field.result{line-height:2;font-family:Menlo;word-wrap:break-word;white-space:pre-wrap}.main .search .field wc-input{flex:1}.main .about{padding:32px 16px}.main .about h2{font-size:24px}.main .about .logs .version{margin-top:32px;line-height:2;font-weight:bold;font-size:18px}.main .about .logs dd{color:var(--color-grey-3)}.main .about .logs ol{padding-left:2em;list-style:decimal}.download-layer{width:640px;height:480px;background:#fff}.download-layer .field{padding:0 16px}.download-layer .field .label{width:120px;padding-right:16px;line-height:32px;text-align:right;font-weight:bold;color:var(--color-grey-3)}.download-layer .field .label::after{content:" : "}@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

@@ -10,6 +10,10 @@
     height: 64px;
 
     i {color:var(--color-red-1);}
+
+    .download {
+      margin-left:32px;
+    }
   }
 
   .search {
@@ -61,6 +65,29 @@
   }
 }
 
+.download-layer {
+  width:640px;
+  height:480px;
+  background:#fff;
+
+  .field {
+    padding:0 16px;
+
+    .label {
+      width:120px;
+      padding-right:16px;
+      line-height: 32px;
+      text-align:right;
+      font-weight:bold;
+      color:var(--color-grey-3);
+
+      &::after {
+        content:" : ";
+      }
+    }
+  }
+}
+
 
 
 @media screen and (max-width: 1024px) {

index.html

@@ -31,6 +31,7 @@
     <div class="wrapper flex column">
       <header class="table-info flex alc">
         现有单字<i>{{single}}</i>个, 词组<i>{{words}}</i>个, 异形字<i>{{dy}}</i>个 !
+        <wc-link class="download" type="primary" underline>下载词库</wc-link>
       </header>
 
       <div class="search">
@@ -70,6 +71,24 @@
   </footer>
 
 
+  <wc-layer ref="dl" title="下载选项" mask mask-close>
+    <div class="download-layer">
+      <section class="field flex">
+        <span class="label">词库选择</span>
+        <wc-checkbox-group :duplex="dlOpt.tables">
+          <wc-checkbox readonly value="table">单字库</wc-checkbox>
+          <wc-checkbox readonly value="words">词组库</wc-checkbox>
+          <wc-checkbox readonly value="dy">异形字库</wc-checkbox>
+          <wc-checkbox value="emoji">emoji</wc-checkbox>
+          <wc-checkbox value="nethot">网络热词</wc-checkbox>
+          <wc-checkbox value="tech">计算机术语</wc-checkbox>
+          <wc-checkbox value="personal" type="info">个人词库(自主上传的)</wc-checkbox>
+        </wc-checkbox-group>
+      </section>
+    </div>
+  </wc-layer>
+
+  
 </div>
 
 <script type="module" src="./js/index.js"></script>

js/index.js

@@ -8,7 +8,9 @@ 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/link.js'
 import '//unpkg.yutent.top/@bytedo/wcui/dist/form/radio.js'
+import '//unpkg.yutent.top/@bytedo/wcui/dist/form/checkbox.js'
 import '//unpkg.yutent.top/@bytedo/wcui/dist/form/switch.js'
 import fetch from '//unpkg.yutent.top/@bytedo/fetch/dist/index.js'
 
@@ -31,67 +33,55 @@ Anot({
     filter: {
       text: '',
       table: '86'
+    },
+    dlOpt: {
+      tables: ['table', 'words', 'dy']
     }
   },
   mounted() {
-    fetch('./data/table.txt')
+    Promise.all([
-      .then(r => r.text())
+      fetch('./data/table.txt').then(r => r.text()),
-      .then(r => {
+      fetch('./data/words.txt').then(r => r.text()),
-        //
+      fetch('./data/dy.txt').then(r => r.text())
-        r.split('\n').forEach(it => {
+    ]).then(([table, words, dy]) => {
-          it = it
+      //
-            .trim()
-            .split(' ')
-            .map(_ => _.trim())
 
-          let k = it.shift()
+      table.split('\n').forEach(it => {
+        it = it.split(' ')
 
-          if (k) {
+        let k = it.shift()
-            WB_TABLE.add(k, it)
-          }
-        })
 
-        this.single = WB_TABLE.length
+        if (k) {
+          WB_TABLE.add(k, it)
+        }
       })
 
-    fetch('./data/words.txt')
+      words.split('\n').forEach(it => {
-      .then(r => r.text())
+        it = it.split(' ')
-      .then(r => {
-        //
-        r.split('\n').forEach(it => {
-          it = it
-            .trim()
-            .split(' ')
-            .map(_ => _.trim())
 
-          let k = it.shift()
+        let k = it.shift()
 
-          if (k) {
+        if (k) {
-            WB_WORDS.add(k, it)
+          WB_WORDS.add(k, it)
-          }
+        }
-        })
-
-        this.words = WB_WORDS.length
       })
-    fetch('./data/dy.txt')
-      .then(r => r.text())
-      .then(r => {
-        //
-        r.split('\n').forEach(it => {
-          it = it
-            .trim()
-            .split(' ')
-            .map(_ => _.trim())
 
-          let k = it.shift()
+      dy.split('\n').forEach(it => {
+        it = it.split(' ')
 
-          if (k) {
+        let k = it.shift()
-            WB_DY.add(k, it)
-          }
-        })
 
-        this.dy = WB_DY.length
+        if (k) {
+          WB_DY.add(k, it)
+        }
       })
+
+      this.single = WB_TABLE.length
+      this.words = WB_WORDS.length
+      this.dy = WB_DY.length
+    })
+
+    this.$refs.dl.show()
   },
 
   methods: {