更新

css/index.css

@@ -1 +1 @@
-body{line-height:1.5;font-size:14px;color:var(--color-dark-1)}a{color:inherit;text-decoration:none}.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 16px rgba(0,0,0,.1)}.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}.footer{width:100%;height:64px;border-top:1px solid var(--color-plain-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}}

css/index.scss

@@ -1,87 +1,121 @@
 body {
-  line-height:1.5;
+  line-height: 1.5;
-  font-size:14px;
+  font-size: 14px;
-  color:var(--color-dark-1);
+  color: var(--color-dark-1);
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
+wc-switch {
+  cursor: pointer;
 }
-a {color:inherit;text-decoration:none;}
 
 .app {
-  width:100%;
+  width: 100%;
-  height:100vh;
+  height: 100vh;
 }
 
 .flex {
-  display:flex;
+  display: flex;
 
   &.column {
     flex-direction: column;
   }
 
   &.ac {
-    justify-content:center;
+    justify-content: center;
   }
 
   &.alc {
-    align-items:center;
+    align-items: center;
   }
 
   &.acc {
-    justify-content:center;
+    justify-content: center;
-    align-items:center;
+    align-items: center;
   }
 
   &.asc {
-    justify-content:space-between;
+    justify-content: space-between;
-    align-items:center;
+    align-items: center;
   }
 }
 
 .wrapper {
-  width:1024px;
+  width: 1024px;
 }
 
 .topbar {
-  width:100%;
+  width: 100%;
-  height:64px;
+  height: 64px;
-  background:#fff;
+  background: #fff;
-  box-shadow:0 6px 16px rgba(0, 0, 0, .1);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
 
   .logo {
-    font-size:24px;
+    font-size: 24px;
-    color:var(--color-red-1);
+    color: var(--color-red-1);
 
     span {
-      font-size:14px;
+      font-size: 14px;
     }
   }
 
   .navs {
-    font-size:16px;
+    font-size: 16px;
 
     .nav {
-      margin-left:32px;
+      margin-left: 32px;
-      cursor:pointer;
+      cursor: pointer;
-      transition:color .2s linear;
+      transition: color 0.2s linear;
 
-      &.active,&:hover {
+      &.active,
-        text-decoration:underline;
+      &:hover {
-        color:var(--color-red-1);
+        text-decoration: underline;
+        color: var(--color-red-1);
       }
     }
   }
 }
 
 .main {
-  flex:1;
+  flex: 1;
 
   .table-info {
-    width:100%;
+    width: 100%;
-    height:64px;
+    height: 64px;
+  }
+
+  .search {
+    width: 100%;
+
+    .field {
+      margin-top: 16px;
+
+      wc-input {
+        flex: 1;
+      }
+    }
   }
 }
 
 .footer {
-  width:100%;
+  width: 100%;
-  height:64px;
+  height: 64px;
-  border-top:1px solid var(--color-plain-1);
+  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;
+    }
+  }
 }

index.html

@@ -12,7 +12,7 @@
 </head>
 <body>
 
-<div class="app flex column">
+<div class="app flex column" anot="app">
   <header class="topbar flex ac noselect">
     <div class="wrapper flex asc">
       <a class="logo">五笔词库<span>86版</span></a>
@@ -30,10 +30,31 @@
 
     <div class="wrapper flex column">
       <header class="table-info flex alc">
-        现在单字65535个, 词组16777216个!
+        现在单字{{single}}个, 词组{{words}}个!
       </header>
 
-      <wc-input placeholder="输入单字查询"></wc-input>
+      <div class="search">
+        <section class="field flex alc">
+          <wc-input placeholder="输入汉字查询编码"></wc-input>
+        </section>
+
+        <section class="field flex alc">
+          <wc-radio-group value="86">
+            <wc-radio value="86">86版</wc-radio>
+            <wc-radio value="18030" type="danger">18030版(86修正版)</wc-radio>
+          </wc-radio-group>
+
+          <wc-switch>是否开启反查</wc-switch>
+        </section>
+
+      </div>
+
+      <div class="panel">
+
+
+
+      </div>
+
 
     </div>
 
@@ -49,10 +70,7 @@
   
 </div>
 
-<script type="module">
+<script type="module" src="./js/index.js"></script>
-import '//unpkg.yutent.top/@bytedo/wcui/dist/form/input.js'
-import '//unpkg.yutent.top/@bytedo/wcui/dist/form/button.js'
-</script>
 
 </body>
 </html>

js/index.js

@@ -0,0 +1,46 @@
+/**
+ *
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2022/03/11 12:03:59
+ */
+
+import '//unpkg.yutent.top/anot/dist/anot.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 = {}
+
+Anot.hideProperty(WB_TABLE, 'length', 0)
+
+Anot({
+  $id: 'app',
+  state: {
+    single: 222,
+    words: 0
+  },
+  mounted() {
+    fetch('/data/table.txt')
+      .then(r => r.text())
+      .then(r => {
+        // console.log(r)
+        r.split('\n').forEach(it => {
+          it = it
+            .trim()
+            .split(' ')
+            .map(_ => _.trim())
+
+          let k = it.shift()
+
+          if (k) {
+            WB_TABLE[k] = it
+            WB_TABLE.length++
+          }
+        })
+
+        this.single = WB_TABLE.length
+      })
+  }
+})