改用vue

.gitignore

@@ -1,12 +1,16 @@
 
-.vscode
+dist
+node_modules
+
+*.sublime-project
+*.sublime-workspace
 package-lock.json
 
 ._*
 
-test.js
 .Spotlight-V100
 .Trashes
 .DS_Store
 .AppleDouble
 .LSOverride
+

.prettierrc.yaml

@@ -1,8 +1,9 @@
+
 jsxBracketSameLine: true
 jsxSingleQuote: true
 semi: false
 singleQuote: true
-printWidth: 100
+printWidth: 80
 useTabs: false
 tabWidth: 2
 trailingComma: none

css/index.css

@@ -1 +0,0 @@
-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.wrap{flex-wrap:wrap}.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{overflow:hidden;flex:1}.main .wrapper{height:100%}.main .table-info{width:100%;height:64px}.main .table-info b{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.result b{letter-spacing:2px;color:var(--color-blue-1)}.main .search .field wc-input{flex:1}.main .panel{overflow:hidden;flex:1;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 .scroll-view{overflow:hidden;flex:1}.main .panel .preview{margin-top:16px;font-family:Menlo;word-break:keep-all;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}.github{position:fixed;right:-30px;top:20px;z-index:9;width:120px;height:22px;line-height:22px;text-align:center;color:#fff;background:var(--color-dark-1);transform:rotate(45deg)}.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 .value{line-height:32px}.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}.wrapper{width:100%}.footer .wrapper{flex-direction:column;align-items:center;justify-content:center}}

index.html

@@ -4,143 +4,15 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
-<title>五笔输入法86版</title>
+  <title>{{title}}</title>
-<meta name="keywords" content="五笔输入法86版">
+  <meta name="keywords" content="{{keywords}}">
-<meta name="description" content="五笔输入法86版">
+  <meta name="description" content="{{description}}">
-<link href="//jscdn.ink/@bytedo/wcui/1.0.12/css/reset-basic.css" rel="stylesheet">
+  <link rel="stylesheet" href="//jscdn.ink/@bytedo/wcui/1.0.12/css/reset-basic.css">
-<link rel="stylesheet" href="./css/index.css">
+  <script async src="//jscdn.ink/es-module-shims/1.6.3/es-module-shims.wasm.js"></script>
+  <script type="importmap">{{importmap}}</script>
 </head>
 <body>
-
+  <div class="app noselect"></div>
-<div class="app flex column" anot="app">
+  <script src="main.js"></script>
-  <header class="topbar flex ac noselect">
-    <div class="wrapper flex asc">
-      <a class="logo">五笔输入法<span>86版</span></a>
-
-      <nav class="navs flex">
-        <a class="nav active">首页</a>
-        <a class="nav">简码表</a>
-        <a class="nav">打字练习</a>
-        <a class="nav" href="./about.html">关于</a>
-      </nav>
-    </div>
-  </header>
-
-  <main class="main flex ac">
-
-    <div class="wrapper flex column">
-      <header class="table-info flex alc wrap">
-        现有单字GB2312(<b>{{gb2312}}</b>)个 + GBK(<b>{{gbk}}</b>)个、异形字<b>{{dy}}</b>个、词组<b>{{words}}</b>个、网络热词<b>{{nethot}}</b>个、计算机术语<b>{{code}}</b>个、emoji<b>{{emoji}}</b>个!
-        <wc-link class="download" type="primary" underline @click="openDownloadPanel">下载词库</wc-link>
-      </header>
-
-      <div class="search">
-        <section class="field flex alc">
-          <wc-input placeholder="输入汉字或五笔编码查询" :duplex="filter.text" @submit="search"></wc-input>
-        </section>
-
-        <section class="field flex alc">
-          <wc-radio-group :duplex="filter.version" @change="search">
-            <wc-radio value="86">86版</wc-radio>
-            <wc-radio value="86f" type="danger">86修正版</wc-radio>
-          </wc-radio-group>
-        </section>
-
-        <section class="field result" :html="result"></section>
-        
-      </div>
-
-      <div class="panel flex column">
-        <div class="form">
-          <wc-button class="custom-file" icon="plus">
-            <input type="file" @change="fileChange">
-            上传个人词库
-          </wc-button>
-          <span class="tips">(仅需要中文即可, 程序会自动生成五笔编码, 词组一行一个)</span>
-        </div>
-
-        <wc-scroll class="scroll-view">
-          <div class="preview" :text="preview"></div>
-        </wc-scroll>
-      </div>
-
-
-    </div>
-
-  </main>
-
-  <footer class="footer flex ac">
-    <div class="wrapper flex asc">
-      <span>&copy;2022, Yutent™.</span>
-      <span>Power by JavaScript</span>
-    </div>
-  </footer>
-
-  <a href="//github.com/yutent/wb-table" class="github" target="__target">GitHub</a>
-
-
-  <wc-layer ref="dl" title="下载选项" mask mask-close>
-    <div class="download-layer">
-
-      <section class="field flex">
-        <span class="label">编码版本</span>
-        <wc-radio-group :duplex="dlOpt.version" @change="search">
-          <wc-radio value="86">86版</wc-radio>
-          <wc-radio value="86f" type="danger">86修正版</wc-radio>
-        </wc-radio-group>
-      </section>
-      
-      <section class="field flex">
-        <span class="label">词库选择</span>
-        <wc-checkbox-group :duplex="dlOpt.tables">
-          <wc-checkbox readonly value="2312">GB2312</wc-checkbox>
-          <wc-checkbox value="gbk">GBK</wc-checkbox>
-          <wc-checkbox readonly value="words">词组库</wc-checkbox>
-          <wc-checkbox value="dy">异形字库</wc-checkbox>
-          <wc-checkbox value="emoji">emoji</wc-checkbox>
-          <wc-checkbox value="nethot">网络热词</wc-checkbox>
-          <wc-checkbox value="code">计算机术语</wc-checkbox>
-          <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" disabled></wc-switch>
-        <span class="tips">(输入法支持临时拼音时, 请勾选)(功能暂未支持, 多单字词库生成中...)</span>
-      </section>
-
-      <section class="field flex">
-        <span class="label">总计</span>
-        <span class="value">{{total | number(0)}} 个</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>
-
-  
-</div>
-
-<script type="module" src="./js/index.js"></script>
-
 </body>
 </html>

package.json

@@ -1,3 +1,11 @@
 {
-  "type": "module"
+  "name": "vue-live-app",
+  "type": "module",
+  "scripts": {
+    "start": "vue-live dev",
+    "build": "vue-live build"
+  },
+  "devDependencies": {
+    "@bytedo/vue-live": "^0.1.9"
+  }
 }

src/app.vue

@@ -0,0 +1,63 @@
+
+<template>
+  <header>
+    <img alt="Vue logo" class="logo" src="/assets/logo.svg" width="125" height="125" />
+
+    <div class="wrapper">
+      <Hello msg="It works!!!" />
+
+      <nav>
+        <router-link to="/">Home</router-link>
+        <router-link to="/about">About</router-link>
+      </nav>
+    </div>
+  </header>
+
+  <router-view />
+</template>
+
+<script>
+import Hello from './components/hello.vue'
+
+export default {
+  components: { Hello }
+}
+</script>
+
+<style lang="scss">
+.app {
+  padding: 16px;
+}
+
+header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+a {
+  color: var(--color-teal-1);
+  transition: 0.2s;
+}
+
+a:hover {
+  color: var(--color-teal-3);
+}
+
+nav {
+  margin-top: 32px;
+  display: flex;
+  justify-content: center;
+
+  a {
+    margin: 0 16px;
+  }
+}
+
+main {
+  margin: 32px;
+  text-align: center;
+}
+</style>
+  
+    

src/assets/logo.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/><path d="M36.21 192.639l160.921-74.805-81.778-5.063 119.519-67.69L49.06 126.138l88.8 2.712z" fill="rgb(252, 118, 97)"/></svg>

src/components/hello.vue

@@ -0,0 +1,40 @@
+
+<template>
+  <div class="greetings">
+    <h1 class="green">{{ msg }}</h1>
+    <h3>
+      你已经成功运行了一个项目, 项目基于
+      <a href="//github.com/bytedo/vue-live" target="_blank">Vue-live</a> +
+      <a href="//vuejs.org" target="_blank">Vue 3</a>.
+    </h3>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<style>
+h1 {
+  font-size: 52px;
+}
+
+h3 {
+  font-size: 1.2rem;
+  font-weight: normal;
+}
+
+.green {
+  font-family: 'Courier New', Courier, monospace;
+  color: var(--color-blue-1);
+}
+
+.greetings {
+  text-align: center;
+}
+</style>
+   

src/main.js

@@ -0,0 +1,11 @@
+
+import { createApp } from 'vue'
+import App from './app.vue'
+
+import router from './router'
+import store from './store'
+    
+const app = createApp(App)
+
+app.use(router).use(store).mount('.app')
+    

src/router.js

@@ -0,0 +1,23 @@
+
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from './views/home.vue'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home
+    },
+    {
+      path: '/about',
+      name: 'about',
+      component: () => import('./views/about.vue')
+    }
+  ]
+})
+
+export default router
+    
+    

src/store.js

@@ -0,0 +1,11 @@
+
+import { reactive } from 'vue'
+
+const store = reactive({
+  foo: 'bar',
+  version: '0.1.9'
+})
+
+export default function (app) {
+  app.config.globalProperties.$store = store
+}

src/views/about.vue

@@ -0,0 +1,18 @@
+
+<script>
+export default {
+  data(){
+    return {
+      content: '这是关于我们页面'
+    }
+  }
+}
+</script>
+
+<template>
+  <main>
+    <h1>{{content}}</h1>
+    <cite>当前vue-live版本: v{{$store.version}}</cite>
+  </main>
+</template>
+    

src/views/home.vue

@@ -0,0 +1,17 @@
+
+<script>
+export default {
+  data(){
+    return {
+      content: '欢迎访问~~ 这是首页'
+    }
+  }
+}
+</script>
+
+<template>
+  <main>
+    <h1>{{content}}</h1>
+  </main>
+</template>
+    

vue.live.js

@@ -0,0 +1,36 @@
+import { resolve } from 'path'
+
+export default {
+  devServer: {
+    port: 8080,
+    domain: '',
+    https: false,
+    ssl: {
+      key: '',
+      cert: ''
+      // ca: ''
+    }
+  },
+  pages: {
+    // 如果多页应用, 则这里写传入多个值即可(注意不是数组格式)
+    // 这里的key值, 将是最终的页面的名称
+    index: {
+      // 这里的resolve可将相对路径转为绝对路径
+      // 如果传入的路径已经是绝对路径的, 可不需要resolve
+      entry: resolve('./src/main.js'),
+      title: 'vue-live 应用示例'
+    }
+  },
+  // 以下cdn地址, 可自行修改为适合的
+  // 有用到其他的库, 可以手动添加,
+  // 也可以在页面中直接引入完整的路径, 而不必须在这里声明
+  imports: {
+    vue: '//jscdn.ink/vue/3.2.47/vue.esm-browser.prod.js',
+    // 这个vue-router库, 移除了 @vue/devtools-api 相关的代码。 以达到减少不必须的体积的效果
+    // 如需要支持devtools的, 请修改为原版vue-router地址即可。
+    'vue-router': '//jscdn.ink/@bytedo/vue-router/4.1.6/vue-router.js',
+    // 'vue-router': '//jscdn.ink/vue-router/4.1.6/vue-router.esm-browser.js',
+    // '@vue/devtools-api': '//jscdn.ink/@vue/devtools-api/6.5.0/esm/index.js',
+    fetch: '//jscdn.ink/@bytedo/fetch/2.1.5/next.js'
+  }
+}