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 .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}}
+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 .wrapper{height:100%}.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 .panel{margin-top:32px}.main .panel .custom-file{position:relative;width:160px}.main .panel .custom-file input{position:absolute;width:100%;height:100%;opacity:0}.main .panel .tips{color:var(--color-orange-3)}.main .panel .preview{margin-top:16px;font-family:Menlo;word-wrap:break-word;white-space:pre-wrap}.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;padding-bottom:64px;background:#fff}.download-layer .field{margin-top:16px;padding:0 16px}.download-layer .field .label{min-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:" : "}.download-layer .field .tips{margin-left:16px;line-height:32px;color:var(--color-orange-3)}.download-layer .field.ctrol{padding:0 128px;margin-top:64px}@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

@@ -1,18 +1,22 @@
 @import './common.scss';
 
-
-
 .main {
   flex: 1;
 
+  .wrapper {
+    height: 100%;
+  }
+
   .table-info {
     width: 100%;
     height: 64px;
 
-    i {color:var(--color-red-1);}
+    i {
+      color: var(--color-red-1);
+    }
 
     .download {
-      margin-left:32px;
+      margin-left: 32px;
     }
   }
 
@@ -35,30 +39,54 @@
     }
   }
 
+  .panel {
+    margin-top: 32px;
+    .custom-file {
+      position: relative;
+      width: 160px;
 
+      input {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+      }
+    }
+
+    .tips {
+      color: var(--color-orange-3);
+    }
+
+    .preview {
+      margin-top: 16px;
+      font-family: Menlo;
+      word-wrap: break-word;
+      white-space: pre-wrap;
+    }
+  }
+
+  /*  */
   .about {
-    padding:32px 16px;
+    padding: 32px 16px;
-
 
     h2 {
-      font-size:24px;
+      font-size: 24px;
     }
 
     .logs {
-
       .version {
-        margin-top:32px;
+        margin-top: 32px;
-        line-height:2;
+        line-height: 2;
-        font-weight:bold;
+        font-weight: bold;
-        font-size:18px;
+        font-size: 18px;
       }
 
       dd {
-        color:var(--color-grey-3);
+        color: var(--color-grey-3);
       }
 
       ol {
-        padding-left:2em;
+        padding-left: 2em;
         list-style: decimal;
       }
     }
@@ -66,30 +94,40 @@
 }
 
 .download-layer {
-  width:640px;
+  width: 640px;
-  height:480px;
+  padding-bottom: 64px;
-  background:#fff;
+  background: #fff;
 
   .field {
-    padding:0 16px;
+    margin-top: 16px;
+    padding: 0 16px;
 
     .label {
-      width:120px;
+      min-width: 120px;
-      padding-right:16px;
+      padding-right: 16px;
       line-height: 32px;
-      text-align:right;
+      text-align: right;
-      font-weight:bold;
+      font-weight: bold;
-      color:var(--color-grey-3);
+      color: var(--color-grey-3);
 
       &::after {
-        content:" : ";
+        content: ' : ';
       }
     }
+
+    .tips {
+      margin-left: 16px;
+      line-height: 32px;
+      color: var(--color-orange-3);
+    }
+
+    &.ctrol {
+      padding: 0 128px;
+      margin-top: 64px;
+    }
   }
 }
 
-
-
 @media screen and (max-width: 1024px) {
   .topbar,
   .main {

index.html

@@ -31,7 +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>
+        <wc-link class="download" type="primary" underline @click="openDownloadPanel">下载词库</wc-link>
       </header>
 
       <div class="search">
@@ -46,16 +46,20 @@
           </wc-radio-group>
         </section>
 
-        <wc-scroll>
+        <section class="field result">{{result}}</section>
-          <section class="field result">{{result}}</section>
+        
-        </wc-scroll>
-
       </div>
 
       <div class="panel">
-
+        <div class="form">
-
+          <wc-button class="custom-file" icon="plus">
-
+            <input type="file" @change="fileChange">
+            上传个人词库
+          </wc-button>
+          <span class="tips">(仅需要中文即可, 程序会自动生成五笔编码, 词组一行一个)</span>
+        </div>
+        
+        <div class="preview">{{preview}}</div>
       </div>
 
 
@@ -73,6 +77,7 @@
 
   <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">
@@ -85,6 +90,32 @@
           <wc-checkbox value="personal" type="info">个人词库(自主上传的)</wc-checkbox>
         </wc-checkbox-group>
       </section>
+
+      <section class="field flex">
+        <span class="label">词库编码位置</span>
+        <wc-radio-group :duplex="dlOpt.pos">
+          <wc-radio value="front">编码前置</wc-radio>
+          <wc-radio value="back">编码后置</wc-radio>
+        </wc-radio-group>
+        <span class="tips">(编码前置时, 自动聚合词组)</span>
+      </section>
+
+      <section class="field flex">
+        <span class="label">生成反查字库</span>
+        <wc-switch :duplex="dlOpt.reverse"></wc-switch>
+        <span class="tips">(输入法支持拼音反查五笔编码时, 请勾选)</span>
+      </section>
+
+      <section class="field flex">
+        <span class="label">是否生成拼音</span>
+        <wc-switch :duplex="dlOpt.pinyin"></wc-switch>
+        <span class="tips">(输入法支持临时拼音时, 请勾选)</span>
+      </section>
+
+      <section class="field flex asc ctrol">
+        <wc-button @click="closeDownloadPanel">取消</wc-button>
+        <wc-button type="primary" @click="download">确认下载</wc-button>
+      </section>
     </div>
   </wc-layer>
 

js/index.js

@@ -35,8 +35,12 @@ Anot({
       table: '86'
     },
     dlOpt: {
+      pos: 'front',
+      reverse: true,
+      pinyin: true,
       tables: ['table', 'words', 'dy']
-    }
+    },
+    preview: ''
   },
   mounted() {
     Promise.all([
@@ -80,8 +84,6 @@ Anot({
       this.words = WB_WORDS.length
       this.dy = WB_DY.length
     })
-
-    this.$refs.dl.show()
   },
 
   methods: {
@@ -93,6 +95,7 @@ Anot({
       text = text.trim().toLowerCase()
 
       if (!text) {
+        this.result = ''
         return
       }
 
@@ -154,6 +157,66 @@ Anot({
       }
 
       this.result = `查询结果: \n${res}`
+    },
+
+    fileChange(ev) {
+      var reader = new FileReader()
+      var file = ev.target.files[0]
+      var all = new Set()
+      var unknow = new Set()
+      console.log(file)
+
+      ev.target.value = ''
+
+      reader.onload = () => {
+        let arr = reader.result
+          .trim()
+          .split('\n')
+          .map(_ => _.trim())
+
+        for (let it of arr) {
+          all.add(it)
+          if (!WB_TABLE.get(it)) {
+            unknow.add(it)
+          }
+        }
+
+        all = Array.from(all)
+        unknow = Array.from(unknow)
+
+        this.preview =
+          `本次上传, 含有 ${arr.length} 个词条(有效词条 ${all.length} 个)。\n` +
+          `其中字库中已经存在 ${all.length - unknow.length}个, 未存在词条 ${
+            unknow.length
+          } 个, 如下:\n\n${unknow.join('\t')}`
+
+        // Promise.all(
+        //   unknow.map(it =>
+        //     fetch('https://www.qqxiuzi.cn/bianma/wubiShow.php', {
+        //       method: 'post',
+        //       body: { text: it, type: 0, version: 0, token: 'ad362ce31bd5584cf7bbcb13b5b08511' }
+        //     }).then(r => r.text())
+        //   )
+        // ).then(r => {
+        //   console.log(r)
+        // })
+
+        // navigator.clipboard.writeText(Array.from(all).join('\n'))
+      }
+
+      reader.readAsText(file)
+    },
+
+    openDownloadPanel() {
+      this.$refs.dl.show()
+    },
+
+    closeDownloadPanel() {
+      this.$refs.dl.close()
+    },
+
+    download() {
+      //
     }
   }
 })