改用vue
parent
b248b441b5
commit
9771aaba12
|
|
@ -1,12 +1,16 @@
|
|||
|
||||
.vscode
|
||||
dist
|
||||
node_modules
|
||||
|
||||
*.sublime-project
|
||||
*.sublime-workspace
|
||||
package-lock.json
|
||||
|
||||
._*
|
||||
|
||||
test.js
|
||||
.Spotlight-V100
|
||||
.Trashes
|
||||
.DS_Store
|
||||
.AppleDouble
|
||||
.LSOverride
|
||||
.LSOverride
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
|
||||
jsxBracketSameLine: true
|
||||
jsxSingleQuote: true
|
||||
semi: false
|
||||
singleQuote: true
|
||||
printWidth: 100
|
||||
printWidth: 80
|
||||
useTabs: false
|
||||
tabWidth: 2
|
||||
trailingComma: none
|
||||
bracketSpacing: true
|
||||
arrowParens: avoid
|
||||
arrowParens: avoid
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
152
index.html
152
index.html
|
|
@ -1,146 +1,18 @@
|
|||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<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>
|
||||
<meta name="keywords" content="五笔输入法86版">
|
||||
<meta name="description" content="五笔输入法86版">
|
||||
<link href="//jscdn.ink/@bytedo/wcui/1.0.12/css/reset-basic.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="./css/index.css">
|
||||
<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>{{title}}</title>
|
||||
<meta name="keywords" content="{{keywords}}">
|
||||
<meta name="description" content="{{description}}">
|
||||
<link rel="stylesheet" href="//jscdn.ink/@bytedo/wcui/1.0.12/css/reset-basic.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 flex column" anot="app">
|
||||
<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>©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>
|
||||
|
||||
<div class="app noselect"></div>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
12
package.json
12
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"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 394 B |
|
|
@ -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>
|
||||
|
||||
|
|
@ -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')
|
||||
|
||||
|
|
@ -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
|
||||
|
||||
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
content: '欢迎访问~~ 这是首页'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<h1>{{content}}</h1>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
|
|
@ -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'
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue