From 5ea37cb89f248f96402a66dd765eac2a7166d6e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= <yutent@doui.cc>
Date: Mon, 22 Jul 2019 10:11:52 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=BC=96=E8=AF=91=E5=B7=A5?=
 =?UTF-8?q?=E5=85=B7;icon=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 build.dev.js             | 127 +++++++++++++++++----
 build.prod.js            | 141 +++++++++++++++++++-----
 package.json             |  15 +--
 src/css/reset-basic.css  |  60 ++++++++++
 src/css/reset-basic.scss | 157 --------------------------
 src/form/button.wc       | 170 ++++++++++++++++++++++++++++
 src/icon/index.wc        |  99 +++++++++++++++++
 src/icon/svg.js          |  48 ++++++++
 src/pager/index.wc       | 232 +++++++++++++++++++++++++++++++++++++++
 9 files changed, 835 insertions(+), 214 deletions(-)
 create mode 100644 src/css/reset-basic.css
 delete mode 100644 src/css/reset-basic.scss
 create mode 100644 src/form/button.wc
 create mode 100644 src/icon/index.wc
 create mode 100644 src/icon/svg.js
 create mode 100644 src/pager/index.wc

diff --git a/build.dev.js b/build.dev.js
index c48c0aa..675de0a 100644
--- a/build.dev.js
+++ b/build.dev.js
@@ -1,50 +1,137 @@
 #! /usr/bin/env node
 
+require('es.shim')
 const log = console.log
 const fs = require('iofs')
 const path = require('path')
 const babel = require('babel-core')
 const scss = require('node-sass')
 const chokidar = require('chokidar')
-const postcss = require('postcss')
-const autoprefixer = require('autoprefixer')
 const chalk = require('chalk')
 
 const sourceDir = path.resolve(__dirname, 'src')
 const buildDir = path.resolve(__dirname, 'dist')
-const prefixer = postcss().use(
-  autoprefixer({
-    browsers: ['ff > 61', 'Chrome > 63']
-  })
-)
 
-const compileJs = (entry, output) => {
+const VERSION = require('./package.json').version
+const BUILD_DATE = new Date().format()
+
+const BASE_SCSS = `
+$ct: #3fc2a7 #19b491 #16967a;
+$cg: #58d68d #2ecc71 #27ae60;
+$cpp: #ac61ce #9b59b6 #8e44ad;
+$cb: #52a3de #2d8dd6 #2776b1;
+$cr: #ff5061 #eb3b48 #ce3742;
+$co: #ffb618 #f39c12 #e67e22;
+$cp: #f3f5fb #e8ebf4 #dae1e9;
+$cgr: #aabac3 #90a3ae #7e909a;
+$cd: #62778d #526273 #425064;
+
+@mixin ts($c: all, $t: .2s, $m: ease-in-out){
+  transition:$c $t $m;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;padding: 0;
+} 
+::before,
+::after{box-sizing:border-box;}
+`
+
+function compileJs(entry, output) {
   log('编译JS: %s', chalk.green(entry))
   let buf = fs.cat(entry).toString()
   let code = buf
-    .replace(/\.scss/g, '.css')
-    .replace(/import '([a-z0-9\/\.\-_]*)(?<!\.css)'/g, 'import "$1.js"')
+    .replace(/import '([a-z0-9\/\.\-_]*)'/g, 'import "$1.js"')
     .replace(
       /import ([\w]*) from '([a-z0-9\/\.\-_]*)'/g,
       'import $1 from "$2.js"'
     )
-    .replace(/import '([a-z0-9\/\.\-_]*\.css)'/g, 'importCss("/$1")')
 
   fs.echo(code, output)
 }
 
-const compileCss = (entry, output) => {
-  log('编译scss: %s', chalk.green(entry))
+// 编译样式
+function compileScss(code = '') {
   try {
-    const { css } = scss.renderSync({ file: entry })
-    prefixer.process(css, { from: '', to: '' }).then(result => {
-      fs.echo(result.css, output)
-    })
+    return scss.renderSync({ data: BASE_SCSS + code }).css
   } catch (err) {
     log(err)
   }
 }
 
+function mkWCFile({ style, html, js }) {
+  style = compileScss(style)
+
+  let name, props
+
+  js = js.replace(/props = (\{[\w\W]*?\})/, function(s, m) {
+    props = m
+    var attr = new Function(
+      `var props = ${m}, attr = []; for(var i in props){attr.push(i)}; return attr`
+    )()
+    return `static get observedAttributes() {
+        return ${JSON.stringify(attr)}
+      }
+      `
+  })
+
+  js = js
+    .replace(/class ([\w]+)/, function(s, m) {
+      name = m
+      return `${s} extends HTMLElement `
+    })
+    .replace(/import '([a-z0-9\/\.\-_]*)'/g, 'import "$1.js"')
+    .replace(
+      /import ([\w]*) from '([a-z0-9\/\.\-_]*)'/g,
+      'import $1 from "$2.js"'
+    )
+    .replace(
+      '/* render */',
+      `
+      super()
+      this.root = this.attachShadow({ mode: 'open' })
+      this.props = ${props}
+
+      this.root.innerHTML = \`<style>${style}</style>${html}\`
+      `
+    )
+    .replace('mounted', 'connectedCallback')
+    .replace('unmount', 'disconnectedCallback')
+    .replace('watch', 'attributeChangedCallback')
+    .replace('adopted', 'adoptedCallback')
+
+  return `/**
+ *
+ * @authors yutent (yutent@doui.cc)
+ * @date    ${BUILD_DATE}
+ * @version v${VERSION}
+ * 
+ */
+
+'use strict'
+
+${js}
+
+customElements.define('wc-${name.toLowerCase()}', ${name})
+`
+}
+
+const compileWC = (entry, output) => {
+  log('编译wc: %s', chalk.green(entry))
+  let code = fs.cat(entry).toString()
+  let style = code.match(/<style[^>]*?>([\w\W]*?)<\/style>/)
+  let html = code.match(/<template>([\w\W]*?)<\/template>/)
+  let js = code.match(/<script>([\w\W]*?)<\/script>/)
+
+  style = style ? style[1] : ''
+  html = html ? html[1] : ''
+  js = js ? js[1] : ''
+
+  let result = mkWCFile({ style, html, js })
+  fs.echo(result, output)
+}
+
 /*=======================================================*/
 /*=====                                               ===*/
 /*=======================================================*/
@@ -65,9 +152,9 @@ chokidar
         case '.js':
           compileJs(entry, output)
           break
-        case '.scss':
-          output = output.replace(/\.scss$/, '.css')
-          compileCss(entry, output)
+        case '.wc':
+          output = output.replace(/\.wc$/, '.js')
+          compileWC(entry, output)
           break
         default:
           fs.cp(entry, output)
diff --git a/build.prod.js b/build.prod.js
index 6e721de..4b9fe17 100644
--- a/build.prod.js
+++ b/build.prod.js
@@ -1,38 +1,52 @@
 #! /usr/bin/env node
 
+require('es.shim')
 const log = console.log
 const fs = require('iofs')
 const path = require('path')
 const scss = require('node-sass')
-const postcss = require('postcss')
-const autoprefixer = require('autoprefixer')
 const chalk = require('chalk')
 const uglify = require('uglify-es')
 
 const sourceDir = path.resolve(__dirname, 'src')
 const buildDir = path.resolve(__dirname, 'dist')
-const prefixer = postcss().use(
-  autoprefixer({
-    browsers: ['ff > 61', 'Chrome > 63']
-  })
-)
 
-const cssOpt = {
-  outputStyle: 'compressed'
+const VERSION = require('./package.json').version
+const BUILD_DATE = new Date().format()
+
+const BASE_SCSS = `
+$ct: #3fc2a7 #19b491 #16967a;
+$cg: #58d68d #2ecc71 #27ae60;
+$cpp: #ac61ce #9b59b6 #8e44ad;
+$cb: #52a3de #2d8dd6 #2776b1;
+$cr: #ff5061 #eb3b48 #ce3742;
+$co: #ffb618 #f39c12 #e67e22;
+$cp: #f3f5fb #e8ebf4 #dae1e9;
+$cgr: #aabac3 #90a3ae #7e909a;
+$cd: #62778d #526273 #425064;
+
+@mixin ts($c: all, $t: .2s, $m: ease-in-out){
+  transition:$c $t $m;
 }
 
+* {
+  box-sizing: border-box;
+  margin: 0;padding: 0;
+} 
+::before,
+::after{box-sizing:border-box;}
+`
+
 const compileJs = (entry, output) => {
   let t1 = Date.now()
   let buf = fs.cat(entry).toString()
   let { code } = uglify.minify(buf)
   code = code
-    .replace(/\.scss/g, '.css')
-    .replace(/import"([a-z0-9\/\.\-_]*)(?<!\.css)"/g, 'import "$1.js"')
+    .replace(/import"([a-z0-9\/\.\-_]*)"/g, 'import "$1.js"')
     .replace(
       /import ([\w]*) from"([a-z0-9\/\.\-_]*)"/g,
       'import $1 from "$2.js"'
     )
-    .replace(/import"([a-z0-9\/\.\-_]*\.css)"/g, 'importCss("/$1")')
   log(
     '编译JS: %s, 耗时 %s ms',
     chalk.green(entry),
@@ -41,18 +55,93 @@ const compileJs = (entry, output) => {
   fs.echo(code, output)
 }
 
-const compileCss = (entry, output) => {
-  let t1 = Date.now()
-  const { css } = scss.renderSync({ ...cssOpt, file: entry })
+// 编译样式
+function compileScss(code = '') {
+  try {
+    return scss.renderSync({
+      data: BASE_SCSS + code,
+      outputStyle: 'compressed'
+    }).css
+  } catch (err) {
+    log(err)
+  }
+}
 
-  prefixer.process(css, { from: '', to: '' }).then(result => {
-    log(
-      '编译scss: %s, 耗时 %s ms',
-      chalk.green(entry),
-      chalk.yellow(Date.now() - t1)
-    )
-    fs.echo(result.css, output)
+function mkWCFile({ style, html, js }) {
+  style = compileScss(style)
+
+  html = html.replace(/[\n\r]+/g, ' ')
+  html = html.replace(/\s+/g, ' ')
+
+  let name, props
+
+  js = js.replace(/props = (\{[\w\W]*?\})/, function(s, m) {
+    props = m
+    var attr = new Function(
+      `var props = ${m}, attr = []; for(var i in props){attr.push(i)}; return attr`
+    )()
+    return `static get observedAttributes() {
+        return ${JSON.stringify(attr)}
+      }
+      `
   })
+
+  js = js
+    .replace(/class ([\w]+)/, function(s, m) {
+      name = m
+      return `${s} extends HTMLElement `
+    })
+    .replace(/import '([a-z0-9\/\.\-_]*)'/g, 'import "$1.js"')
+    .replace(
+      /import ([\w]*) from '([a-z0-9\/\.\-_]*)'/g,
+      'import $1 from "$2.js"'
+    )
+    .replace(
+      '/* render */',
+      `
+      super()
+      this.root = this.attachShadow({ mode: 'open' })
+      this.props = ${props}
+
+      this.root.innerHTML = \`<style>${style}</style>${html}\`
+      `
+    )
+    .replace('mounted', 'connectedCallback')
+    .replace('unmount', 'disconnectedCallback')
+    .replace('watch', 'attributeChangedCallback')
+    .replace('adopted', 'adoptedCallback')
+
+  let res = uglify.minify(js)
+
+  return `/**
+ *
+ * @authors yutent (yutent@doui.cc)
+ * @date    ${BUILD_DATE}
+ * @version v${VERSION}
+ * 
+ */
+
+'use strict'
+
+${res.code}
+
+customElements.define('wc-${name.toLowerCase()}', ${name})
+`
+}
+
+const compileWC = (entry, output) => {
+  log('编译wc: %s', chalk.green(entry))
+  let code = fs.cat(entry).toString()
+  let style = code.match(/<style[^>]*?>([\w\W]*?)<\/style>/)
+  let html = code.match(/<template>([\w\W]*?)<\/template>/)
+  let js = code.match(/<script>([\w\W]*?)<\/script>/)
+
+  style = style ? style[1] : ''
+  html = html ? html[1] : ''
+  js = js ? js[1] : ''
+
+  let result = mkWCFile({ style, html, js })
+  fs.echo(result, output)
 }
 
 /*=======================================================*/
@@ -93,13 +182,13 @@ files.forEach(file => {
   let output = file.path.replace('src/', 'dist/')
 
   switch (file.ext) {
+    case '.wc':
+      output = output.replace(/\.wc$/, '.js')
+      compileWC(entry, output)
+      break
     case '.js':
       compileJs(entry, output)
       break
-    case '.scss':
-      output = output.replace(/\.scss$/, '.css')
-      compileCss(entry, output)
-      break
     default:
       fs.cp(entry, output)
   }
diff --git a/package.json b/package.json
index f9ae66b..3e130c6 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "doui-anot",
   "version": "2.0.1",
-  "description": "基于Anot框架的doUI组件库。支持IE10+,及现代浏览器。",
+  "description": "基于Anot框架的doUI组件库。仅支持type=module的现代浏览器。",
   "main": "index.js",
   "scripts": {
     "start": "node ./build.dev.js",
@@ -17,18 +17,11 @@
   "dependencies": {},
   "devDependencies": {
     "anot": "^2.0.0",
-    "autoprefixer": "^7.2.6",
-    "babel-core": "^6.26.3",
-    "babel-plugin-transform-decorators-legacy": "^1.3.5",
-    "babel-plugin-transform-es2015-classes": "^6.24.1",
-    "babel-plugin-transform-es2015-for-of": "^6.23.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-es2015": "^6.24.1",
-    "chalk": "^2.4.1",
+    "es.shim": "^1.1.2",
+    "chalk": "^2.4.2",
     "chokidar": "^1.7.0",
     "iofs": "^1.1.0",
-    "node-sass": "^4.11.0",
-    "postcss": "^6.0.22",
+    "node-sass": "^4.12.0",
     "uglify-es": "^3.3.9"
   }
 }
diff --git a/src/css/reset-basic.css b/src/css/reset-basic.css
new file mode 100644
index 0000000..4546277
--- /dev/null
+++ b/src/css/reset-basic.css
@@ -0,0 +1,60 @@
+@charset "UTF-8";
+/**
+ * 
+ * @authors yutent (yutent@doui.cc)
+ * @date    2014-10-10 00:45:09
+ *
+ * doui的CSS规范
+ * 
+ * 不能出现大写,以连字符风格命名 
+ * 表示状态的应该用do-st-*命名 
+ * 表示功能的应该用do-fn-*命名
+ * 表示页面模块的应该用do-mod-modname 命名
+ * 表示UI组件的应该用do-uiname命名, 它的子元素应该全部包在 .do-uiname这个根类下
+ * 如 .do-layer .body { ... }
+ * 
+ * 样式规则的出现顺序
+ * 1 display float position overflow z-index 表示定位/布局的属性
+ * 2 width height margin padding border 表示盒子模型的属性
+ * 3 line-height font-size vertical-align text-align user-select outline ....排版相关的属性
+ * 4 color background opacity cursor ...表示装饰相关的属性
+ * 5 content list-style quotes ... 内容生成相关的属性
+ * 
+ */
+
+
+* {margin: 0;padding: 0;vertical-align: baseline;box-sizing:border-box;}
+::before,::after {box-sizing:border-box;}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section,content {display: block;}
+img {border:0;display:inline-block;}
+ol, ul {list-style: none;}
+blockquote, q {quotes: none;}
+blockquote::before, blockquote::after,
+q::before, q::after {content: '';content: none;}
+table {border-collapse: collapse;border-spacing: 0;}
+a:focus,input,textarea,button:focus,input:focus,textarea:focus {outline:none;}
+::-moz-focus-inner {
+    border:none;outline:none;
+}
+body {font-family:Helvetica, Arial,"WenQuanYi Micro Hei","PingFang SC","Hiragino Sans GB","Segoe UI", "Microsoft Yahei", sans-serif;-webkit-font-smoothing: antialiased;text-size-adjust: 100%;-webkit-tap-highlight-color: transparent;}
+code,pre,samp {font-family:Menlo,Monaco,Consolas,"Courier New",monospace;}
+[anot],[\:repeat],[\:if],[is-widget],slot {visibility:hidden;}
+
+.do-fn-cl { *zoom: 1; }
+.do-fn-cl::after { content: "."; display: block; height: 0; clear: both; visibility: hidden; overflow:hidden;} 
+.do-fn-clear {clear:both;display:inline;}
+
+.do-fn-show{display:block;}
+.do-fn-hide{display:none;}
+.do-fn-fl{float:left;}
+.do-fn-fr{float:right;}
+.do-fn-noselect {-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;user-select: none;}
+.do-fn-noselect img, .do-fn-noselect a {-webkit-user-drag:none;}
+.do-fn-ell {overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
+.do-st-thin {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
+.do-st-hand {cursor:pointer;}
+
+[class^="do-icon-"], [class*=" do-icon-"] {display:inline-block;font-family:"uifont" !important;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
+
+
diff --git a/src/css/reset-basic.scss b/src/css/reset-basic.scss
deleted file mode 100644
index 88c13e1..0000000
--- a/src/css/reset-basic.scss
+++ /dev/null
@@ -1,157 +0,0 @@
-@charset "UTF-8";
-/**
- * 
- * @authors yutent (yutent@doui.cc)
- * @date    2014-10-10 00:45:09
- *
- * doui的CSS规范
- * 
- * 不能出现大写,以连字符风格命名 
- * 表示状态的应该用do-st-*命名 
- * 表示功能的应该用do-fn-*命名
- * 表示页面模块的应该用do-mod-modname 命名
- * 表示UI组件的应该用do-uiname命名, 它的子元素应该全部包在 .do-uiname这个根类下
- * 如 .do-layer .body { ... }
- * 
- * 样式规则的出现顺序
- * 1 display float position overflow z-index 表示定位/布局的属性
- * 2 width height margin padding border 表示盒子模型的属性
- * 3 line-height font-size vertical-align text-align user-select outline ....排版相关的属性
- * 4 color background opacity cursor ...表示装饰相关的属性
- * 5 content list-style quotes ... 内容生成相关的属性
- * 
- */
-
-@font-face {font-family: "uifont";
-  src: url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff');
-
-}
-* {margin: 0;padding: 0;vertical-align: baseline;box-sizing:border-box;}
-::before,::after {box-sizing:border-box;}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section,content {display: block;}
-img {border:0;display:inline-block;}
-ol, ul {list-style: none;}
-blockquote, q {quotes: none;}
-blockquote::before, blockquote::after,
-q::before, q::after {content: '';content: none;}
-table {border-collapse: collapse;border-spacing: 0;}
-a:focus,input,textarea,button:focus,input:focus,textarea:focus {outline:none;}
-::-moz-focus-inner {
-    border:none;outline:none;
-}
-body {font-family:Helvetica, Arial,"WenQuanYi Micro Hei","PingFang SC","Hiragino Sans GB","Segoe UI", "Microsoft Yahei", sans-serif;-webkit-font-smoothing: antialiased;text-size-adjust: 100%;-webkit-tap-highlight-color: transparent;}
-code,pre,samp {font-family:Menlo,Monaco,Consolas,"Courier New",monospace;}
-[anot],[\:repeat],[\:if],[is-widget],slot {visibility:hidden;}
-
-.do-fn-cl { *zoom: 1; }
-.do-fn-cl::after { content: "."; display: block; height: 0; clear: both; visibility: hidden; overflow:hidden;} 
-.do-fn-clear {clear:both;display:inline;}
-
-.do-fn-show{display:block;}
-.do-fn-hide{display:none;}
-.do-fn-fl{float:left;}
-.do-fn-fr{float:right;}
-.do-fn-noselect {-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;user-select: none;}
-.do-fn-noselect img, .do-fn-noselect a {-webkit-user-drag:none;}
-.do-fn-ell {overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
-.do-st-thin {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
-.do-st-hand {cursor:pointer;}
-
-[class^="do-icon-"], [class*=" do-icon-"] {display:inline-block;font-family:"uifont" !important;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
-.do-icon-app1:before { content: "\e6cc"; }
-.do-icon-apple:before { content: "\e6cd"; }
-.do-icon-bad:before { content: "\e6ce"; }
-.do-icon-android:before { content: "\e6cf"; }
-.do-icon-app2:before { content: "\e6d0"; }
-.do-icon-bell:before { content: "\e6d1"; }
-.do-icon-calendar:before { content: "\e6d2"; }
-.do-icon-book:before { content: "\e6d3"; }
-.do-icon-camera:before { content: "\e6d4"; }
-.do-icon-chart:before { content: "\e6d5"; }
-.do-icon-close:before { content: "\e6d6"; }
-.do-icon-chat:before { content: "\e6d7"; }
-.do-icon-client:before { content: "\e6d8"; }
-.do-icon-dbl-left:before { content: "\e6d9"; }
-.do-icon-dbl-right:before { content: "\e6da"; }
-.do-icon-deny:before { content: "\e6db"; }
-.do-icon-download:before { content: "\e6dc"; }
-.do-icon-edit:before { content: "\e6dd"; }
-.do-icon-email:before { content: "\e6de"; }
-.do-icon-face:before { content: "\e6df"; }
-.do-icon-female:before { content: "\e6e0"; }
-.do-icon-fire:before { content: "\e6e1"; }
-.do-icon-donate:before { content: "\e6e2"; }
-.do-icon-first:before { content: "\e6e3"; }
-.do-icon-eye:before { content: "\e6e4"; }
-.do-icon-floppy:before { content: "\e6e5"; }
-.do-icon-fly:before { content: "\e6e6"; }
-.do-icon-folder-close:before { content: "\e6e7"; }
-.do-icon-folder-open:before { content: "\e6e8"; }
-.do-icon-font:before { content: "\e6e9"; }
-.do-icon-get:before { content: "\e6ea"; }
-.do-icon-git:before { content: "\e6eb"; }
-.do-icon-gift:before { content: "\e6ec"; }
-.do-icon-github:before { content: "\e6ed"; }
-.do-icon-good:before { content: "\e6ee"; }
-.do-icon-google:before { content: "\e6ef"; }
-.do-icon-headset:before { content: "\e6f0"; }
-.do-icon-happy:before { content: "\e6f1"; }
-.do-icon-help:before { content: "\e6f2"; }
-.do-icon-home:before { content: "\e6f3"; }
-.do-icon-icon-list:before { content: "\e6f4"; }
-.do-icon-info:before { content: "\e6f5"; }
-.do-icon-layout:before { content: "\e6f6"; }
-.do-icon-left:before { content: "\e6f7"; }
-.do-icon-link:before { content: "\e6f8"; }
-.do-icon-list:before { content: "\e6f9"; }
-.do-icon-live:before { content: "\e6fa"; }
-.do-icon-loading:before { content: "\e6fb"; }
-.do-icon-lock:before { content: "\e6fc"; }
-.do-icon-linux:before { content: "\e6fd"; }
-.do-icon-logout:before { content: "\e6fe"; }
-.do-icon-maximize:before { content: "\e6ff"; }
-.do-icon-maximized:before { content: "\e700"; }
-.do-icon-male:before { content: "\e701"; }
-.do-icon-menu-dot:before { content: "\e702"; }
-.do-icon-menu-left:before { content: "\e703"; }
-.do-icon-menu-right:before { content: "\e704"; }
-.do-icon-minimize:before { content: "\e705"; }
-.do-icon-mute:before { content: "\e706"; }
-.do-icon-osx:before { content: "\e707"; }
-.do-icon-phone:before { content: "\e708"; }
-.do-icon-picture:before { content: "\e709"; }
-.do-icon-pipe:before { content: "\e70a"; }
-.do-icon-pin:before { content: "\e70b"; }
-.do-icon-position:before { content: "\e70c"; }
-.do-icon-plus:before { content: "\e70d"; }
-.do-icon-plugin:before { content: "\e70e"; }
-.do-icon-post:before { content: "\e70f"; }
-.do-icon-qr:before { content: "\e710"; }
-.do-icon-quote:before { content: "\e711"; }
-.do-icon-right:before { content: "\e712"; }
-.do-icon-sad:before { content: "\e713"; }
-.do-icon-safe:before { content: "\e714"; }
-.do-icon-search:before { content: "\e715"; }
-.do-icon-second:before { content: "\e716"; }
-.do-icon-setting:before { content: "\e717"; }
-.do-icon-share:before { content: "\e718"; }
-.do-icon-sign:before { content: "\e719"; }
-.do-icon-star-full:before { content: "\e71a"; }
-.do-icon-star:before { content: "\e71b"; }
-.do-icon-tag:before { content: "\e71c"; }
-.do-icon-talk:before { content: "\e71e"; }
-.do-icon-third:before { content: "\e71f"; }
-.do-icon-time:before { content: "\e720"; }
-.do-icon-trigon-down:before { content: "\e721"; }
-.do-icon-trash:before { content: "\e722"; }
-.do-icon-track:before { content: "\e723"; }
-.do-icon-trigon-up:before { content: "\e724"; }
-.do-icon-txt:before { content: "\e725"; }
-.do-icon-unmute:before { content: "\e726"; }
-.do-icon-vip:before { content: "\e727"; }
-.do-icon-windows:before { content: "\e728"; }
-.do-icon-upload:before { content: "\e729"; }
-.do-icon-warn:before { content: "\e72a"; }
-.do-icon-user:before { content: "\e72b"; }
-.do-icon-backward:before { content: "\e71d"; }
\ No newline at end of file
diff --git a/src/form/button.wc b/src/form/button.wc
new file mode 100644
index 0000000..c2fa307
--- /dev/null
+++ b/src/form/button.wc
@@ -0,0 +1,170 @@
+<template>
+  <label>
+    <wc-icon class="icon"></wc-icon>
+    <slot></slot>
+  </label>
+</template>
+
+<style lang="scss">
+:host {
+  overflow: hidden;
+  display: inline-block;
+  user-select: none;
+  color: nth($cd, 2);
+  background: #fff;
+  vertical-align: top;
+
+  label {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-width: 60px;
+    min-height: 33px;
+    padding: 0 5px;
+    height: 100%;
+    font-size: 14px;
+    border: 1px solid nth($cp, 3);
+    border-radius: 3px;
+    cursor: pointer;
+  }
+
+  label.mini {
+    height: 20px;
+  }
+
+  .icon {
+    width: 20px;
+    height: 20px;
+    margin-right: 3px;
+  }
+
+  &([size="mini"]) label {
+    min-width: 50px;
+    height: 20px;
+    font-size: 12px;
+  }
+}
+
+:host([loading]) label,
+:host([disabled]) label {
+  cursor: not-allowed;
+  color: nth($cp, 3);
+  wc-icon {
+    color: nth($cp, 3);
+  }
+}
+</style>
+
+<script>
+import '../icon/index'
+
+const log = console.log
+
+export default class Button {
+  props = {
+    icon: '',
+    size: 'small',
+    color: 'red',
+    loading: false,
+    disabled: false
+  }
+
+  constructor() {
+    /* render */
+
+    this.__BTN__ = this.root.children[1]
+    this.__ICO__ = this.__BTN__.children[0]
+  }
+
+  get loading() {
+    return this.props.loading
+  }
+
+  set loading(val) {
+    var type = typeof val
+
+    if (val === this.props.loading) {
+      return
+    }
+
+    if ((type === 'boolean' && val) || type !== 'boolean') {
+      this.props.loading = true
+      this.__ICO__.setAttribute('is', 'loading')
+      this.setAttribute('loading', '')
+    } else {
+      this.props.loading = false
+      this.__ICO__.setAttribute('is', this.props.icon)
+      this.removeAttribute('loading')
+    }
+  }
+
+  get disabled() {
+    return this.props.disabled
+  }
+
+  set disabled(val) {
+    var type = typeof val
+
+    if (val === this.props.disabled) {
+      return
+    }
+    if ((type === 'boolean' && val) || type !== 'boolean') {
+      this.props.disabled = true
+      this.setAttribute('disabled', '')
+    } else {
+      this.props.disabled = false
+      this.removeAttribute('disabled')
+    }
+  }
+
+  mounted() {
+    this.__BTN__.addEventListener(
+      'click',
+      ev => {
+        if (this.props.loading || this.props.disabled) {
+          // 阻止事件冒泡, 避免用户自己绑定click事件不受这2个值的限制
+          ev.cancelBubble = true
+          return
+        }
+        this.dispatchEvent(new CustomEvent('active'))
+      },
+      false
+    )
+  }
+
+  unmount() {
+    log(this)
+  }
+
+  watch(name, old, val) {
+    if (old === val) {
+      return
+    }
+    switch (name) {
+      case 'icon':
+        this.props.icon = val
+        if (val) {
+          if (!this.props.loading) {
+            this.__ICO__.setAttribute('is', val)
+          }
+        } else {
+          this.removeAttribute('icon')
+          this.__ICO__.removeAttribute('is')
+        }
+        break
+
+      case 'size':
+        this.props.size = val || 'small'
+        this.__BTN__.classList.add(this.props.size)
+        break
+
+      case 'loading':
+      case 'disabled':
+        if (val === '') {
+          this[name] = true
+        }
+        break
+    }
+  }
+}
+</script>
diff --git a/src/icon/index.wc b/src/icon/index.wc
new file mode 100644
index 0000000..e7c558e
--- /dev/null
+++ b/src/icon/index.wc
@@ -0,0 +1,99 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024"></svg>
+</template>
+
+<style lang="scss">
+:host {
+  display: inline-block;
+  color: nth($cd, 2);
+}
+:host(:not([is])) {
+  display: none;
+}
+.icon {
+  display: block;
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+  overflow: hidden;
+
+  &.load {
+    animation: load 1.5s linear infinite;
+  }
+
+  circle {
+    stroke: currentColor;
+    animation: circle 1.5s ease-in-out infinite;
+  }
+}
+
+@keyframes circle {
+  0% {
+    stroke-dasharray: 0, 3812px;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 1906px, 3812px;
+    stroke-dashoffset: -287px;
+  }
+  100% {
+    stroke-dasharray: 1906px, 3812px;
+    stroke-dashoffset: -2393px;
+  }
+}
+
+@keyframes load {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
+
+<script>
+import SVG_DICT from './svg'
+
+const log = console.log
+
+export default class Icon {
+  props = {
+    is: ''
+  }
+
+  constructor() {
+    /* render */
+
+    this.__ICO__ = this.root.lastElementChild
+    this.drawPath()
+  }
+
+  // 绘制图标
+  drawPath() {
+    var { is } = this.props
+    var path = SVG_DICT[is]
+    if (!this.__ICO__) {
+      return
+    }
+    if (is && path) {
+      this.__ICO__.innerHTML = is === 'loading' ? path : `<path d="${path}" />`
+
+      this.__ICO__.classList.toggle('load', is === 'loading')
+    }
+  }
+
+  set is(val) {
+    this.props.is = val
+    this.drawPath()
+  }
+
+  watch(name, old, val) {
+    switch (name) {
+      case 'is':
+        this.is = val
+        if (!val) {
+          this.removeAttribute('is')
+        }
+        break
+    }
+  }
+}
+</script>
diff --git a/src/icon/svg.js b/src/icon/svg.js
new file mode 100644
index 0000000..c6eaca4
--- /dev/null
+++ b/src/icon/svg.js
@@ -0,0 +1,48 @@
+/**
+ * {icon svg}
+ * @author yutent<yutent@doui.cc>
+ * @date 2019/07/17 15:12:14
+ */
+
+'use strict'
+
+export default {
+  at:
+    'M512 64C264.5 64 64 264.5 64 512s200.5 448 448 448 448-200.5 448-448S759.5 64 512 64z m275.3 434.9c-1.9 46.1-16.4 85.9-43.1 119.8-26.7 33.6-66.8 50.4-119.8 50.4-17.7 0-33-4.7-45.7-14.2-12.9-9.5-22-23-27.1-40.5-8.8 17.9-20.2 31.2-33.8 40.1-13.6 8.8-29.5 13.4-47.8 13.4-32.5 0-57.3-12.5-74.5-37.3s-23.5-57.7-19-98.9c5.6-52.6 21.5-94.8 47.8-126.4s58.2-47.4 95.6-47.4c26.3 0 47.6 2.8 63.5 8.2 15.9 5.4 33.6 12.3 52.8 23.7l-1.1-0.2h1.7l-16.6 179.6c-1.1 18.3 0.2 31.4 3.7 38.3 3.7 6.9 8.4 10.6 14.4 10.6 24.3 0 43.9-11 58.6-33.6 14.6-22.6 22.8-50.8 24.6-85.3 3.4-71.1-11-126.4-43.5-166.1-32.5-39.6-82.5-59.7-150.1-59.7-65.7 0-118 21.3-156.8 64.2s-59.7 101-63.1 174.9c-3.7 71.9 12.1 128.8 47.2 170.4 35.1 41.8 85.5 62.7 151.4 62.7 18.3 0 37.3-1.9 57.1-5.8 19.6-3.9 36.8-8.8 51-14.6l12.5 52.1c-14.6 8.8-33.2 15.7-55.8 20.7-22.6 5-44.6 7.3-66.1 7.3-87.9 0-155.7-26.1-203.1-78.4-47.4-52.1-69.4-123.6-65.7-214.5 3.9-90 32.1-161.3 84.2-214.1 52.3-52.8 121.7-79 208.3-79 85.1 0 150.3 25 195.4 74.7 45.6 49.8 66.3 118.1 62.9 204.9z',
+  attach:
+    'M872.7 458.8L499.9 831.6c-74.6 74.6-196.6 74.6-271.1 0-74.6-74.6-74.6-196.6 0-271.1l389.7-389.7c47.4-47.4 122-47.4 169.5 0 47.4 47.4 47.4 122 0 169.5L398.2 730c-18.6 18.6-49.1 18.6-67.8 0-18.6-18.6-18.6-49.1 0-67.8l322-322-50.8-50.8-322 322c-47.4 47.4-47.4 122 0 169.5 47.4 47.4 122 47.4 169.5 0l389.7-389.7c74.6-74.6 74.6-196.6 0-271.1s-196.6-74.6-271.1 0L178 509.7C74.6 613 74.6 779.1 178 882.5s269.4 103.4 372.8 0l372.8-372.8-50.9-50.9z',
+  camera:
+    'M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m271.5 719.5C711 856.1 614.6 896 512 896s-199-39.9-271.5-112.5C167.9 711 128 614.6 128 512s39.9-199 112.5-271.5C313 167.9 409.4 128 512 128s199 39.9 271.5 112.5C856.1 313 896 409.4 896 512s-39.9 199-112.5 271.5zM400.1 212.1c-81.3 30.3-146.9 92.8-181.4 171.9H512L400.1 212.1zM825.6 576c4.3-21.1 6.4-42.5 6.4-64 0-73.2-24.6-140.7-66-194.7L622 576h203.6zM719.9 268.8C664 220.9 591.4 192 512 192c-15.9 0-31.6 1.2-46.9 3.4L621.7 448l98.2-179.2zM198.4 448c-4.3 21.1-6.4 42.5-6.4 64 0 73.3 24.6 140.8 66.1 194.7L402 448H198.4z m425.5 363.9c81.3-30.3 146.9-92.8 181.4-171.9H512l111.9 171.9z m-319.8-56.7C360 803.1 432.6 832 512 832c15.9 0 31.6-1.2 46.9-3.4L402.3 576l-98.2 179.2z',
+  'eye-on':
+    'M512 210c-203.6 0-376.8 124.8-448 302 71.2 177.2 244.4 302 448 302s376.8-124.8 448-302c-71.2-177.2-244.4-302-448-302z m0 503.4c-112 0-203.6-90.6-203.6-201.4S400 310.6 512 310.6 715.6 401.2 715.6 512 624 713.4 512 713.4z m0-322.2c-67.2 0-122.2 54.4-122.2 120.8s55 120.8 122.2 120.8S634.2 578.4 634.2 512s-55-120.8-122.2-120.8z',
+  'eye-off':
+    'M512.1 289.6c112.4 0 203.8 90.6 203.8 202.2 0 26.2-5.2 51-14.6 74l119 118c61.6-51 110-116.8 139.8-192-70.6-177.4-244.5-303.1-448.3-303.1-57 0-111.6 10.2-162.2 28.2l88 87.4c23.1-9.3 48.1-14.7 74.5-14.7zM104.8 179.5l93 92.2 18.8 18.6C148.8 342.2 95.8 411.8 64 491.8c70.4 177.4 244.3 303.1 448.1 303.1 63.2 0 123.4-12.2 178.4-34l17.2 17 119.4 118 51.8-51.4-722.5-716.4-51.6 51.4z m225.1 223.3l63.2 62.6c-2 8.4-3.2 17.4-3.2 26.2 0 67 54.6 121.2 122.2 121.2 9 0 18-1.2 26.4-3.2l63.2 62.6c-27.2 13.4-57.4 21.4-89.6 21.4-112.4 0-203.8-90.6-203.8-202.2 0-31.6 8.2-61.4 21.6-88.6z m175.6-31.4l128.4 127.4 0.8-6.4c0-67-54.6-121.2-122.2-121.2l-7 0.2z',
+  key:
+    'M497.4 443.1C466.8 356.5 378.7 288 281.5 288 158.3 288 64 388.8 64 512s98.6 224 221.8 224c97.1 0 181.1-68.5 211.5-155.1h221.4v137.8h148.8V580.9H960V443.1H497.4zM287.1 586.3c-40.9 0-74.3-33.4-74.3-74.3s33.4-74.3 74.3-74.3 74.3 33.4 74.3 74.3-33.3 74.3-74.3 74.3z',
+  setting:
+    'M64 768h544v64H64v-64z m736 0h160v64H800v-64z m-32 127c0 35.9-28.7 65-64 65s-64-29.1-64-65V705c0-35.9 28.7-65 64-65s64 29.1 64 65v190zM64 480h160v64H64v-64z m352 0h544v64H416v-64z m-32 127c0 35.9-28.7 65-64 65s-64-29.1-64-65V417c0-35.9 28.7-65 64-65s64 29.1 64 65v190zM64 192h544v64H64v-64z m736 0h160v64H800v-64z m-32 127c0 35.9-28.7 65-64 65s-64-29.1-64-65V129c0-35.9 28.7-65 64-65s64 29.1 64 65v190z',
+  'finger-print':
+    'M156.2 411.2c-4.8 0-9.8-1.2-14.2-3.8-13.4-7.8-18-24.8-10.2-38.2C167.4 309.2 275.6 169 512 169c102.4 0 192.2 27.2 266.8 80.8 61.4 44 95.8 93.8 112.2 117.8 8.8 12.8 5.4 30-7.4 38.8-12.8 8.6-30.4 5.4-39.2-7.4-29.8-43.2-120.2-174.4-332.4-174.4-207.2 0-300.8 120.8-331.4 172.6-5.2 9.2-14.6 14-24.4 14zM631 960c12.6 0 24-8.4 27.4-21 3.8-14.8-5.2-30-20.4-33.8C501 870.8 443.8 729 439.4 717.8c-1.4-4.6-7.4-27.4-9.4-55.6-2-27-0.6-64.2 17.4-88 13.2-17.4 34.4-25.8 64.6-25.8 55 0 64.2 27.2 78.6 83.6 14 55 33.2 130.4 140 135.8 41 2 78-16.4 104-51.6 39-52.8 46.4-133.6 18.8-205.6-21.6-56.4-63.2-112.8-114-154.8-65.6-54-144.2-82.6-227.4-82.6-180 0-299.6 123.2-338.4 245.4C138 631.4 181.2 795 183 802c4 14.8 19.6 23.8 34.6 19.8 15-3.8 24-19.2 20-34-0.4-1.4-40.8-154.8-10-252.4 16.6-52.4 51.2-103.4 94.8-139.6C375 352.2 440.6 329 512 329c167.2 0 262 131.8 288.8 201.8 20.8 54 16 115.4-11.6 153-10.2 13.8-28.2 30-55.6 28.6-62.4-3.2-73.2-34.4-88.2-93.8-7.2-28.6-14.6-58.2-33-82.2-22.4-29.4-55-43.6-100.2-43.6-48.6 0-85.4 16.2-109.6 48-52.8 69.6-18.4 188.4-17 193.4l0.4 1.6c2.6 7.2 66.6 180.4 238 223.4 2.4 0.6 4.6 0.8 7 0.8z m-220-12.8c6.8 0 13.8-2.6 19-7.4 11.4-10.4 12-28.2 1.4-39.4-60.4-64-94.6-135.6-107.4-225.6-6.4-52.8 2.6-132.6 49-184.4 32.2-36 79-54.2 138.8-54.2 69.2 0 121.6 31.2 156 92.6 27.4 48.8 33 98.8 33 99.4 1.6 15.2 15.6 26.4 31 24.8s26.8-15.2 25.2-30.6c-0.2-2.4-6.6-60.6-38.8-119-44.4-80.4-115.6-123-206.2-123-76.6 0-137.6 24.6-181 73-58.8 65.6-70.8 161-62.6 228.4v0.6c14.6 101.8 53.4 183.2 122 256 5.6 5.8 13 8.8 20.6 8.8zM727 867c12.8 0 26.2-0.8 39.8-2.4 15.4-1.6 26.6-15.4 24.8-30.8-1.8-15.4-15.8-26.4-31.2-24.6-61.6 7-111.6-5-149-35.2-63.2-51.2-71.4-140.2-71.6-141.8-1.2-15.4-14.6-26.8-30.2-25.6s-27.2 14.6-26 30c0.4 4.6 9.6 113.4 91.6 180.2C616 850.2 667 867 727 867z m64.6-716c0 15.4-12.6 27.8-28.2 27.8-6.4 0-12.2-2-17-5.6l-0.4 0.4 0.2 0.2c-0.8-0.4-72.6-54-234.2-54s-233.4 53.4-234.2 54l0.2-0.2c-4.6 3.2-10.2 5.2-16.4 5.2-15.6 0-28.2-12.4-28.2-27.8 0-8.2 3.6-15.6 9.4-20.8 0 0 0.2 0 0.4-0.2 1-1 2.2-1.8 3.4-2.6C265 114.6 348.2 64 512 64c156 0 239 45.8 262.4 61.2 10.2 4.2 17.2 14.2 17.2 25.8z',
+  loading:
+    '<circle class="circle" cx="512" cy="512" r="384" fill="none" stroke-width="80" />',
+  pie:
+    'M64 480C64 250.2 250.2 64 480 64c10.8 0 22 0.4 32 1.2V512H65.2c-0.8-10-1.2-21.2-1.2-32z m155.6 324.4C295.8 899.2 412.8 960 544 960c229.8 0 416-186.2 416-416 0-131.2-60.8-248.2-155.6-324.4-63.4-51-142.4-83.8-228.4-90.4V576H129.2c6.6 86 39.4 165 90.4 228.4z',
+  image:
+    'M915.1 280.3l-165-8-9.6-107.6c-2-22.6-22.2-38.4-45.8-36.6l-591.8 48.6c-23.6 2-40.6 21-38.8 43.4l42.4 471.6c2 22.6 22.4 38.4 45.8 36.6l30-2.4-4.8 91.6c-1.2 25.2 18.4 45.6 44.8 47l660.2 31.4c26.4 1.2 48.2-17.2 49.6-42.4l27.8-526.6c1.2-25-18.6-45.4-44.8-46.6z m-709.8 10.6l-14.2 269.6-35 49.4-32.2-356v-2c2-10 8.8-18 19.2-18.8l522-42.8c10.4-0.8 19.4 6 21 15.8 0 0.4 0.6 0.4 0.6 0.8 0 0.2 0.6 0.4 0.6 0.8l5.4 61.6-438-21c-26.4-0.8-48.2 17.6-49.4 42.6z m668 473.8l-169.6-199-74.8 68.6-138.4-161.6-245.4 261.4 20.8-398.2v-0.8c2-10.8 12.4-18.6 23.8-18l582.4 28c11.6 0.6 20.6 9.4 20.8 20.4 0 0.4 0.6 0.6 0.6 1l-20.2 398.2z',
+  'radio-on':
+    'M512 288c-123.2 0-224 100.8-224 224s100.8 224 224 224 224-100.8 224-224-100.8-224-224-224z m0-224C265.6 64 64 265.6 64 512s201.6 448 448 448 448-201.6 448-448S758.4 64 512 64z m0 806.4c-197.1 0-358.4-161.3-358.4-358.4S314.9 153.6 512 153.6 870.4 314.9 870.4 512 709.1 870.4 512 870.4z',
+  'radio-off':
+    'M512 64C265.6 64 64 265.6 64 512s201.6 448 448 448 448-201.6 448-448S758.4 64 512 64z m0 806.4c-197.1 0-358.4-161.3-358.4-358.4S314.9 153.6 512 153.6 870.4 314.9 870.4 512 709.1 870.4 512 870.4z',
+  'checkbox-on':
+    'M860.4 64H163.6C108.8 64 64 108.8 64 163.6v696.9c0 54.8 44.8 99.6 99.6 99.6h696.9c54.8 0 99.6-44.8 99.6-99.6V163.6C960 108.8 915.2 64 860.4 64z m-448 696.9L163.6 512l69.7-69.7 179.2 179.2 378.3-378.3 69.7 69.7-448.1 448z',
+  'checkbox-off':
+    'M860.2 163.6v696.8H163.6V163.6h696.6m0-99.6H163.6C108.8 64 64 108.8 64 163.6v696.8c0 54.8 44.8 99.6 99.6 99.6h696.8c54.8 0 99.6-44.8 99.6-99.6V163.6c-0.2-54.8-45-99.6-99.8-99.6z',
+  tag:
+    'M885.3 64H515.8L93.2 501.8C74.5 520.5 64.5 545 64 569.5c-0.7 26.4 9.1 52.7 29.2 72.8l288.6 288.5c18.7 18.7 48.5 29.2 67.2 29.2 18.7 0 53.2-9.1 73.3-29.2L960 512.1V138.7L885.3 64z m-71.6 239.7c-50.6 14.2-96.4-23.3-96.4-71.7 0-41.3 33.4-74.7 74.7-74.7 48.3 0 85.9 45.7 71.6 96.4-6.7 24.1-25.9 43.2-49.9 50z',
+  phone:
+    'M717.7 64H306.3C261 64 224 100.7 224 145.5v733.1c0 44.8 37 81.5 82.3 81.5h411.4c45.3 0 82.3-36.7 82.3-81.5V145.5c0-44.8-37-81.5-82.3-81.5zM728 832H296V163h432v669z m-168 64c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48z',
+  mail:
+    'M960 280.9v472.3c0 37.9-31 68.9-68.9 68.9H132.9c-37.9 0-68.9-31-68.9-68.9V280.9c0-3.9 4.5-5.8 7.3-3l232 236.1c1.5 1.7 1.5 4.3 0 6L141.1 692.7c-11 11-11 28.6 0 39.6 5.4 5.4 12.7 8.2 19.8 8.2s14.4-2.8 19.8-8.2l161.5-172.1c1.7-1.7 4.5-1.7 6.2 0l37.9 38.6c33.4 33.8 78.6 53.8 126.2 53.6 47-0.2 90.7-18.7 123.6-52.1l39.4-40.1c1.7-1.7 4.5-1.7 6.2 0l161.5 172.1c5.4 5.4 12.7 8.2 19.8 8.2s14.4-2.8 19.8-8.2c11-11 11-28.6 0-39.6L720.9 520c-1.7-1.7-1.7-4.3 0-6l231.8-236.1c2.6-2.6 7.3-0.9 7.3 3zM512 596.2c31.9 0 61.8-12.5 84.2-35.3l337.9-344c-11.8-9.5-26.5-15.1-42.6-15.1H132.7c-16.2 0-31 5.6-42.6 15.1l337.9 344c22.2 22.6 52.1 35.3 84 35.3z',
+  'mail-unread':
+    'M856.6 184.6c57.1 0 103.4 46.3 103.4 103.4s-46.3 103.4-103.4 103.4c-57.1 0-103.4-46.3-103.4-103.4s46.3-103.4 103.4-103.4z m0 246.6c-11.6 0-22.8-1.5-33.6-4.1l-102.1 104c-1.7 1.7-1.7 4.3 0 6l162.2 172.7c11 11 11 28.6 0 39.6-5.4 5.4-12.7 8.2-19.8 8.2s-14.4-2.8-19.8-8.2L681.9 577.5c-1.7-1.7-4.5-1.7-6.2 0l-39.4 40.1c-33 33.4-76.7 51.9-123.6 52.1-47.6 0.2-92.8-19.8-126.2-53.6l-37.9-38.6c-1.7-1.7-4.5-1.7-6.2 0L180.7 749.6c-5.4 5.4-12.7 8.2-19.8 8.2s-14.4-2.8-19.8-8.2c-11-11-11-28.6 0-39.6l162.2-172.7c1.5-1.7 1.5-4.3 0-6l-232-236.1c-2.8-2.8-7.3-0.9-7.3 3v472.3c0 37.9 31 68.9 68.9 68.9h758.2c37.9 0 68.9-31 68.9-68.9V387.1c-26.1 27.1-62.7 44.1-103.4 44.1zM713.4 288c0-25 6.5-48.5 17.7-68.9H132.7c-16.2 0-31 5.6-42.6 15.1l337.9 344c22.4 22.8 52.3 35.3 84.2 35.3s61.8-12.5 84.2-35.3l173.4-176.4c-34.4-26.4-56.4-67.5-56.4-113.8z'
+}
diff --git a/src/pager/index.wc b/src/pager/index.wc
new file mode 100644
index 0000000..42a2c0c
--- /dev/null
+++ b/src/pager/index.wc
@@ -0,0 +1,232 @@
+<template>
+  <svg
+    aria-hidden="true"
+    style="overflow:hidden;position: absolute;width:0;height:0"
+  >
+    ${iconList.map( _ => `
+    <symbol id="icon-${_.key}" viewBox="0 0 1024 1024">
+      <path d="${_.path}" />
+    </symbol>
+    ` ).join('')}
+  </svg>
+
+  <section class="tool-bar">
+    ${this._parseTools()}
+  </section>
+  <div class="font-layer">
+    <span data-size="6">大号字体</span>
+    <span data-size="5">中号字体</span>
+    <span data-size="3">小号字体</span>
+  </div>
+  <div class="color-layer">
+    <span data-color="#f3f5fb"></span>
+    <span data-color="#dae1e9"></span>
+    <span data-color="#62778d"></span>
+    <span data-color="#58d68d"></span>
+    <span data-color="#3fc2a7"></span>
+    <span data-color="#52a3de"></span>
+    <span data-color="#ac61ce"></span>
+    <span data-color="#ffb618"></span>
+    <span data-color="#e67e22"></span>
+    <span data-color="#ff5061"></span>
+    <span data-color="#ff0000"></span>
+    <span data-color="#000000"></span>
+  </div>
+  <div class="link-layer">
+    <input placeholder="请输入链接地址" />
+    <span>插入</span>
+  </div>
+  <div contenteditable="true" class="editor" spellcheck="false"></div>
+</template>
+
+<script>
+  export default class DoButton extends HTMLElement {
+    constructor() {
+      super()
+
+      this.root = this.attachShadow({ mode: 'open' })
+
+      this.root.innerHTML = `/*html*/`
+    }
+  }
+</script>
+
+<style>
+  * {
+    box-sizing: border-box;
+  }
+  :host {
+    position: relative;
+    display: flex;
+    flex-flow: column wrap;
+    min-width: 200px;
+    min-height: 100px;
+    border: 1px solid #e7e8eb;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+  .tool-bar {
+    display: flex;
+    height: 34px;
+    padding: 5px;
+    line-height: 24px;
+    border-bottom: 1px solid #e7e8eb;
+  }
+  .tool-bar span {
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 24px;
+    height: 24px;
+    margin: 0 3px;
+    border-radius: 3px;
+  }
+  .tool-bar span:hover {
+    background: #f7f8fb;
+  }
+  .tool-bar span input {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+  }
+
+  .tool-bar .icon {
+    overflow: hidden;
+    width: 70%;
+    height: 70%;
+    fill: currentColor;
+    color: #62778d;
+  }
+
+  .editor {
+    flex: 1;
+    overflow: hidden;
+    overflow-y: auto;
+    max-height: 360px;
+    padding: 5px 8px;
+    font-size: 14px;
+    outline: none;
+  }
+  .editor img {
+    max-width: 100%;
+  }
+
+  .font-layer,
+  .color-layer,
+  .link-layer {
+    visibility: hidden;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 99;
+    width: 80px;
+    padding: 5px 0;
+    line-height: 25px;
+    background: #fff;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+    font-size: 13px;
+    user-select: none;
+    opacity: 0;
+    transition: all ease-in-out 0.2s;
+  }
+  .font-layer.fadein {
+    visibility: visible;
+    top: 34px;
+    opacity: 1;
+  }
+  .font-layer span {
+    display: block;
+    padding: 0 8px;
+  }
+  .font-layer span:hover {
+    background: #f7f8fb;
+  }
+
+  .color-layer {
+    display: flex;
+    flex-flow: row wrap;
+    left: 30px;
+    width: 96px;
+  }
+  .color-layer.fadein {
+    visibility: visible;
+    top: 34px;
+    opacity: 1;
+  }
+  .color-layer span {
+    width: 20px;
+    height: 20px;
+    margin: 2px;
+    background: #f30;
+  }
+  .color-layer span:nth-child(1) {
+    background: #f3f5fb;
+  }
+  .color-layer span:nth-child(2) {
+    background: #dae1e9;
+  }
+  .color-layer span:nth-child(3) {
+    background: #62778d;
+  }
+  .color-layer span:nth-child(4) {
+    background: #58d68d;
+  }
+  .color-layer span:nth-child(5) {
+    background: #3fc2a7;
+  }
+  .color-layer span:nth-child(6) {
+    background: #52a3de;
+  }
+  .color-layer span:nth-child(7) {
+    background: #ac61ce;
+  }
+  .color-layer span:nth-child(8) {
+    background: #ffb618;
+  }
+  .color-layer span:nth-child(9) {
+    background: #e67e22;
+  }
+  .color-layer span:nth-child(10) {
+    background: #ff5061;
+  }
+  .color-layer span:nth-child(11) {
+    background: #ff0000;
+  }
+  .color-layer span:nth-child(12) {
+    background: #000000;
+  }
+
+  .link-layer {
+    display: flex;
+    align-items: center;
+    left: 330px;
+    width: 180px;
+    padding: 8px;
+  }
+  .link-layer input {
+    width: 120px;
+    height: 20px;
+    margin-right: 8px;
+    padding: 0 5px;
+    border: 1px solid #e7e8eb;
+    outline: none;
+  }
+  .link-layer span {
+    height: 20px;
+    padding: 0 5px;
+    line-height: 20px;
+    border-radius: 4px;
+    background: #dae1e9;
+    text-align: center;
+    font-size: 12px;
+  }
+
+  .link-layer.fadein {
+    visibility: visible;
+    top: 34px;
+    opacity: 1;
+  }
+</style>