first

2021-06-07 11:56:04 +08:00 · 2021-06-07 11:56:04 +08:00 · c3c9fee2fb
commit c3c9fee2fb
1071 changed files with 195655 additions and 0 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,43 @@
+{
+  "presets": [
+    [
+      "env",
+      {
+        "loose": true,
+        "modules": false,
+        "targets": {
+          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+        }
+      }
+    ],
+    "stage-2"
+  ],
+  "plugins": ["transform-vue-jsx"],
+  "env": {
+    "utils": {
+      "presets": [
+        [
+          "env",
+          {
+            "loose": true,
+            "modules": "commonjs",
+            "targets": {
+              "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+            }
+          }
+        ],
+      ],
+      "plugins": [
+        ["module-resolver", {
+          "root": ["element-ui"],
+          "alias": {
+            "element-ui/src": "element-ui/lib"
+          }
+        }]
+      ]
+    },
+    "test": {
+      "plugins": ["istanbul"]
+    }
+  }
+}
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,11 @@
+src/utils/popper.js
+src/utils/date.js
+examples/play
+*.sh
+node_modules
+lib
+coverage
+*.md
+*.scss
+*.woff
+*.ttf
--- a/.eslintrc
+++ b/.eslintrc
@ -0,0 +1,17 @@
+{
+  "globals": {
+    "ga": true,
+    "chrome": true
+  },
+  "plugins": ["html", "json"],
+  "extends": "elemefe",
+  "rules": {
+    "no-restricted-globals": ["error", "event", "fdescribe"]
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  }
+}
--- a/.gitattributes
+++ b/.gitattributes
@ -0,0 +1 @@
+test/**/*.js linguist-language=Vue
--- a/.github/CONTRIBUTING.en-US.md
+++ b/.github/CONTRIBUTING.en-US.md
@ -0,0 +1,60 @@
+# Element UI Contributing Guide
+
+Hi! Thank you for choosing Element UI.
+
+Element UI is a Vue 2.0 based component library for developers, designers and product managers.
+
+We are excited that you are interested in contributing to Element. Before submitting your contribution though, please make sure to take a moment and read through the following guidelines.
+
+## Issue Guidelines
+
+- Issues are exclusively for bug reports, feature requests and design-related topics. Other questions may be closed directly. If any questions come up when you are using Element, please hit [Gitter](https://gitter.im/element-en/Lobby) for help.
+
+- Before submitting an issue, please check if similar problems have already been issued.
+
+- Please specify which version of `Element` and `Vue` you are using, and provide OS and browser information. [JSFiddle](https://jsfiddle.net/) is recommended to build a live demo so that your issue can be reproduced clearly.
+
+## Pull Request Guidelines
+
+- Fork this repository to your own account. Do not create branches here.
+
+- Commit info should be formatted as `[Component Name]: Info about commit.` (e.g. `Button: Fix xxx bug`)
+
+- **DO NOT** include files inside `lib` directory.
+
+- Make sure that running `npm run dist` outputs the correct files.
+
+- For the sake of compatibility and file size, our babel configuration only imported `preset-2015`, so APIs like `Array.prototype.find` and `Object.assign` in `ES2015` are not recommended. You can import third party polyfills if necessary.
+
+- Rebase before creating a PR to keep commit history clear.
+
+- Make sure PRs are created to `dev` branch instead of `master` branch.
+
+- If your PR fixes a bug, please provide a description about the related bug.
+
+- Merging a PR takes two maintainers: one approves the changes after reviewing, and then the other reviews and merges.
+
+## Prerequisites
+`Node.js 4+`, `yarn` and `npm 3+` are required. Note: we use yarn to lock dependency versions, so you should install dependencies using `yarn` instead of `npm install`.
+```shell
+git clone git@github.com:ElemeFE/element.git
+npm run dev
+
+# open http://localhost:8085
+```
+
+> **Notice**: modify `examples/play/index.vue` file, use the component you contribute, then run `npm run dev:play`, go ahead [http://localhost:8085](http://localhost:8085), get result, more quickly and friendly.
+
+To build:
+
+```shell
+npm run dist
+```
+
+## Component Developing Guidelines
+- Run `make new <component-name>` to create project directory for a new component. Test codes, entry file and documentation are included.
+- Refer to `Button` for nested components.
+- Refer to `Select` for components that depend on other components.
+
+## Code Style
+Just comply with the [ESLint](https://github.com/ElemeFE/eslint-config-elemefe) configuration of [ElemeFE](https://github.com/elemefe).
--- a/.github/CONTRIBUTING.es.md
+++ b/.github/CONTRIBUTING.es.md
@ -0,0 +1,67 @@
+# Guía para Contribuidores a `Element UI`
+
+¡Hola! Gracias por elegir [Element UI](http://element.eleme.io/#/en-US).
+
+`Element UI` es un archivo de componentes para desarrolladores y para gerentes de productos ‘web’ basado en [Vue 2.0](https://vuejs.org/)
+
+Estamos orgullosos de que usted esta interesado en contribuir al proyecto `Element`. Antes de someter sus contribuciones, por favor tome un momentito para leer estas simples guías para contribuidores.
+
+
+## Guía Para Reportar Problemas (“Issues”)
+
+- [“Issues”]( https://elementui.github.io/issue-generator) son exclusivamente para informar de errores, sugerencias o solicitaciones para funcionalidad adicional referente a diseño. Preguntas de otro tipo corren el riesgo de ser cerradas inmediatamente. Sí tiene preguntas sobre el uso de `Element`, vea [Gitter](https://gitter.im/element-en/Lobby) para más ayuda.
+
+- Antes de someter un informe sobre algún problema, sírvase de revisar  sí ya hubo un informe.
+
+- Por favor especifique que versión de `Element` y `Vue` que esta utilizando, y que versión de sistema operativo y que versión de navegador web que está utilizando. [JSFiddle](https://jsfiddle.net/) esta recomendado para crear un entorno para reproducir el problema claramente.
+
+
+## Guías para un “Pull Request (PR)”
+
+- Crea una bifurcación (“fork”) del repositorio a su propia cuenta en github.com. Por favor no crea ramas nuevas aquí.
+
+- Cuando cometa su cambio, formatea en esta forma: `[Nombre de componente]: Datos sobre el “commit”.` (por ejemplo. `Button: Reparación de xxx error`)
+
+- **DE NINGUNA MANERA** incluya archivos dentro del directorio `lib`.
+
+- Asegúrese de que el comando `npm run dist` produzca los archivos correctos.
+
+- Para asegurar compatibilidad y reducir tamaño de los archivos, nuestra configuración de `babel` solo importa `preset-2015`, así que IPAs como  Array.prototype.find` y `Object.assign` en `ES2015` no son recomendados. Puede importar “polyfills” terceros, sí es necesario.
+
+- “Rebase” antes de crear un “pull request (PR)” para mantener la historia de “commits” limpia.
+
+- Asegúrese que sus PRs se refrieran a la rama `dev`  y no a la rama  `master`.
+
+- Si su PR arregla un error técnico, por favor, haga referencia al error especifico.
+
+- Fusión de un PR requiere dos mantenedores: el primero aprueba los cambios después de revisar, y entonces el segundo mantenedor revisa los cambios y hace la fusión.
+
+
+## Requerimientos Técnicos
+`Node.js 4+`, `yarn` y `npm 3+` son requisitos. Nota: Usamos yarn para bloquear versiones de dependencias, por lo que debería instalar dependencias usando `yarn` en lugar de `npm install`.
+.
+```shell
+git clone git@github.com:ElemeFE/element.git
+npm run dev
+
+# abra http://localhost:8085
+```
+
+> **Notice**: modify `examples/play/index.vue` file, use the component you contribute, then run `npm run dev:play`, go ahead [http://localhost:8085](http://localhost:8085), get result, more quickly and friendly.
+
+Para armar:
+
+```
+shell
+npm run dist
+```
+
+## Guía Para Desarrollo de Componentes
+- Corra el comando `make new <component-name>` para crear el directorio de su proyecto para un componente nuevo. Verifique su código fuente test, archivo de entrada y documentación están incluidos.
+- Refiérase al `Button` para componentes anidados.
+- Refiérase al `Select` para componentes que dependen de otros componentes.
+
+
+## Estilo de Desarrollo
+Por favor acate a este estilo [ESLint](https://github.com/ElemeFE/eslint-config-elemefe) configuración de [ElemeFE](https://github.com/elemefe).
+
--- a/.github/CONTRIBUTING.fr-FR.md
+++ b/.github/CONTRIBUTING.fr-FR.md
@ -0,0 +1,60 @@
+# Guide à destination des contributeurs d'Element UI
+
+Bonjour! Merci d'avoir choisi Element UI.
+
+Element UI est une bibliothèque de composants basée sur Vue 2.0 pour les développeurs, les designers et les chefs de produits.
+
+Nous sommes ravis que vous souhaitiez contribuer à Element. Avant de soumettre votre contribution, veuillez vous assurer de prendre un moment pour lire les indications suivantes.
+
+## Concernant les issues
+
+- Les issues concernent exclusivement les bugs, les demandes de fonctionnalités et les sujets liés à la conception. Les questions concernant d'autres sujets peuvent être fermées directement. Si vous avez des questions à propos de l'utilisation d'Element, veuillez vous rendre sur [Gitter](https://gitter.im/element-en/Lobby) pour obtenir de l'aide.
+
+- Avant de soumettre une issue, veuillez vérifier si des problèmes similaires n'ont pas déjà été signalés.
+
+- Veuillez spécifier la version de `Element` et `Vue` que vous utilisez, et fournir des informations sur le système d'exploitation et le navigateur. [JSFiddle](https://jsfiddle.net/) est recommandé afin de construire une démo pour que votre problème puisse être reproduit clairement.
+
+## Concernant les pull requests
+
+- Faites un fork de ce dépôt vers votre compte. Ne créez pas de branches ici.
+
+- Les informations de validation doivent être formatées en tant que `[Nom du composant] : Info à propos de ce commit` (par exemple `Button : Fix xxx bug`)
+
+- **NE PAS** inclure de fichiers dans le répertoire `lib`.
+
+- Assurez-vous que l'exécution de `npm run dist` génère les bons fichiers.
+
+- Pour des raisons de compatibilité et de taille de fichier, notre configuration babel n'importait que `preset-2015`, donc les API comme `Array.prototype.find` et `Object.assign` dans `ES2015` ne sont pas recommandées. Vous pouvez importer des polyfills si nécessaire.
+
+- Faites un rebase avant la création d'une PR pour garder l'historique clair.
+
+- Assurez-vous que les PRs sont créés dans la branche `dev` au lieu de la branche `master`.
+
+- Si votre PR corrige un bug, veuillez fournir une description du bug en question.
+
+- La fusion d'un PR nécessite deux responsables: l'un approuve les modifications après révision, puis l'autre les révise et les fusionne.
+
+## Pré-requis
+`Node.js 4+`, `yarn` et `npm 3+` sont requis. Note: nous utilisons yarn pour verrouiller les versions des dépendances, donc vous devriez installer les dépendances en utilisant `yarn` au lieu de `npm install`.
+```shell
+git clone git@github.com:ElemeFE/element.git
+npm run dev
+
+# open http://localhost:8085
+```
+
+> **Remarque** : modifiez le fichier `examples/play/index.vue`, utilisez le composant auquel vous contribuez, puis lancez `npm run dev:play`, allez sur [http://localhost:8085](http://localhost:8085), regardez le résultat rapidement et facilement.
+
+Pour le build:
+
+```shell
+npm run dist
+```
+
+## Concernant le développement de composants
+- Exécutez `make new <nom-du-composant>` pour créer un répertoire pour le nouveau composant. Les tests, le fichier d'entrée et la documentation sont inclus.
+- Reportez-vous au `Button` pour les composants imbriqués.
+- Reportez-vous à `Select` pour connaître les composants qui dépendent d'autres composants.
+
+## Style du code
+Il suffit de se conformer à la configuration [ESLint](https://github.com/ElemeFE/eslint-config-elemefe) de [ElemeFE](https://github.com/elemefe).
--- a/.github/CONTRIBUTING.zh-CN.md
+++ b/.github/CONTRIBUTING.zh-CN.md
@ -0,0 +1,58 @@
+# Element UI 贡献指南
+
+Hi! 首先感谢你使用 Element UI。
+
+Element UI 是一套为开发者、设计师和产品经理准备的开源组件库，旨在快速搭建页面。它基于 Vue 2.0 开发，并提供了配套的设计资源，充分满足可定制化的需求。
+
+Element UI 的成长离不开大家的支持，如果你愿意为 Element UI 贡献代码或提供建议，请阅读以下内容。
+
+## Issue 规范
+- issue 仅用于提交 Bug 或 Feature 以及设计相关的内容，其它内容可能会被直接关闭。如果你在使用时产生了疑问，请到 Slack 或 [Gitter](https://gitter.im/ElemeFE/element) 里咨询。
+
+- 在提交 issue 之前，请搜索相关内容是否已被提出。
+
+- 请说明 Element UI 和 Vue 的版本号，并提供操作系统和浏览器信息。推荐使用 [JSFiddle](https://jsfiddle.net/) 生成在线 demo，这能够更直观地重现问题。
+
+## Pull Request 规范
+- 请先 fork 一份到自己的项目下，不要直接在仓库下建分支。
+
+- commit 信息要以`[组件名]: 描述信息` 的形式填写，例如 `Button: fix xxx bug`。
+
+- **不要提交** `lib` 里面打包的文件。
+
+- 执行 `npm run dist` 后可以正确打包文件。
+
+- 为了兼容性以及最终打包的文件体积考虑，我们的 babel 只引入了 `preset-2015`，所以不建议使用 ES2015 的 API，例如 `Array.prototype.find`、`Object.assign`等。如果有需要，请引入第三方的 polyfill。
+
+- 提交 PR 前请 rebase，确保 commit 记录的整洁。
+
+- 确保 PR 是提交到 `dev` 分支，而不是 `master` 分支。
+
+- 如果是修复 bug，请在 PR 中给出描述信息。
+
+- 合并代码需要两名维护人员参与：一人进行 review 后 approve，另一人再次 review，通过后即可合并。
+
+## 开发环境搭建
+首先你需要 Node.js 4+，yarn 和 npm 3+。注意：我们使用 yarn 进行依赖版本的锁定，所以请不要使用 `npm install` 安装依赖。
+```shell
+git clone git@github.com:ElemeFE/element.git
+npm run dev
+
+# open http://localhost:8085
+```
+
+> **提示**：可以运行 `npm run dev:play`，修改 `examples/play/index.vue` 文件，调用你修改后的组件，仍然访问 [http://localhost:8085](http://localhost:8085)，查看修改效果，更快更方便。
+
+打包代码：
+
+```shell
+npm run dist
+```
+
+## 组件开发规范
+- 通过 `make new` 创建组件目录结构，包含测试代码、入口文件、文档
+- 如果包含父子组件，需要更改目录结构，参考 `Button`
+- 组件内如果依赖了其他组件，需要在当前组件内引入，参考 `Select`
+
+## 代码规范
+遵循饿了么前端的 [ESLint](https://github.com/ElemeFE/eslint-config-elemefe) 即可
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@ -0,0 +1,15 @@
+<!--
+重要: 请使用以下链接创建新 issue
+
+  https://elementui.github.io/issue-generator
+
+未通过以上链接创建的 issue 会被机器人直接关闭。
+
+########
+
+IMPORTANT: Please use the following link to create a new issue:
+
+  https://elementui.github.io/issue-generator
+
+If your issue was not created using the app above, it will be closed immediately.
+-->
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@ -0,0 +1,5 @@
+blank_issues_enabled: true
+contact_links:
+  - name: Create new issue
+    url: https://elementui.github.io/issue-generator
+    about: The issue which is not created via https://elementui.github.io/issue-generator will be closed immediately.
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@ -0,0 +1,5 @@
+Please make sure these boxes are checked before submitting your PR, thank you!
+
+* [ ] Make sure you follow Element's contributing guide ([中文](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md) | [English](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.en-US.md) | [Español](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.es.md) | [Français](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.fr-FR.md)).
+* [ ] Make sure you are merging your commits to `dev` branch.
+* [ ] Add some descriptions and refer relative issues for you PR.
--- a/.github/stale.yml
+++ b/.github/stale.yml
@ -0,0 +1,17 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 365
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+# Issues with these labels will never be considered stale
+# exemptLabels:
+  # - pinned
+  # - security
+# Label to use when marking an issue as stale
+staleLabel: stale
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+node_modules
+.DS_Store
+npm-debug.log
+yarn-debug.log
+yarn-error.log
+lerna-debug.log
+npm-debug.log.*
+yarn-debug.log.*
+yarn-error.log.*
+lerna-debug.log.*
+lib
+.idea
+.vscode
+examples/element-ui
+examples/pages/en-US
+examples/pages/zh-CN
+examples/pages/es
+examples/pages/fr-FR
+fe.element/element-ui
+.npmrc
+coverage
+waiter.config.js
+build/bin/algolia-key.js
+.envrc
--- a/.travis.yml
+++ b/.travis.yml
@ -0,0 +1,12 @@
+sudo: false
+language: node_js
+node_js: 10
+addons:
+  chrome: stable
+before_install:
+- export TRAVIS_COMMIT_MSG="[deploy] $(git log --format='%h - %B' --no-merges -n 1)"
+- export TRAVIS_COMMIT_USER="$(git log --no-merges -n 1 --format=%an)"
+- export TRAVIS_COMMIT_EMAIL="$(git log --no-merges -n 1 --format=%ae)"
+after_success:
+- sh build/deploy-ci.sh
+- cat ./test/unit/coverage/lcov.info | ./node_modules/.bin/coveralls
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
--- a/CHANGELOG.es.md
+++ b/CHANGELOG.es.md
--- a/CHANGELOG.fr-FR.md
+++ b/CHANGELOG.fr-FR.md
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
--- a/FAQ.md
+++ b/FAQ.md
@ -0,0 +1,217 @@
+## 常见问题
+
+<details>
+  <summary>给组件绑定的事件为什么无法触发？</summary>
+  
+  在 Vue 2.0 中，为**自定义**组件绑定**原生**事件必须使用 `.native` 修饰符：
+  ```html
+  <my-component @click.native="handleClick">Click Me</my-component>
+  ```
+  
+  从易用性的角度出发，我们对 `Button` 组件进行了处理，使它可以监听 `click` 事件：
+  ```html
+  <el-button @click="handleButtonClick">Click Me</el-button>
+  ```
+  
+  但是对于其他组件，还是需要添加 `.native` 修饰符。
+</details>
+
+<details>
+  <summary>如何在 Table 组件的每一行添加操作该行数据的按钮？</summary>
+  
+  使用 [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots) 即可：
+  ```html
+  <el-table-column label="操作">
+    <template slot-scope="props">
+      <el-button @click.native="showDetail(props.row)">查看详情</el-button>
+    </template>
+  </el-table-column>
+  ```
+  参数 `row` 即为对应行的数据。
+</details>
+
+<details>
+  <summary>Tree 组件的 `render-content` 和 Table 组件的 `render-header` 怎么用？</summary>
+  
+  请阅读 Vue 文档 [Render Function](http://vuejs.org/v2/guide/render-function.html) 的相关内容。注意，使用 JSX 来写 Render Function 的话，需要安装 `babel-plugin-transform-vue-jsx`，并参照其[文档](https://github.com/vuejs/babel-plugin-transform-vue-jsx)进行配置。
+</details>
+
+<details>
+  <summary>所有组件的任意属性都支持 `.sync` 修饰符吗？</summary>
+  
+  不是。对于支持 `.sync` 修饰符的属性，我们会在文档的 API 表格中注明。更多 `.sync` 的用法请查看 [Vue 文档](https://vuejs.org/v2/guide/components.html#sync-Modifier)。
+</details>
+
+<details>
+  <summary>你们的文档怎么偷偷更新了？</summary>
+  
+  我们只会在 Element 发布新版本时同步更新文档，以体现最新的变化。详细的更新内容可以查看 [changelog](https://github.com/ElemeFE/element/blob/master/CHANGELOG.zh-CN.md)。
+</details>
+
+<details>
+  <summary>在项目中引入 Element，但是 CSS 报错/字体文件报错/组件没有样式是什么原因？</summary>
+  
+  请参考我们提供的 [starter kit](https://github.com/ElementUI/element-starter)，在 webpack 的 loaders 中正确配置 file-loader、css-loader 和 style-loader。此外，我们还提供了基于 [cooking](https://github.com/ElementUI/element-cooking-starter) 和 [laravel](https://github.com/ElementUI/element-in-laravel-starter) 的项目模板。
+</details>
+
+<details>
+  <summary>将 Element 克隆至本地，运行时为何会报错/跑不起来？</summary>
+  
+  首先，确保克隆的是 master 分支的最新代码，并且文件完整。其次，确保本地的 node 版本在 4.0 以上，npm 版本在 3.0 以上。最后，可以启动开发环境：
+  
+  ```bash
+  npm run dev
+  ```
+  
+  或是直接打包：
+  
+  ```bash
+  npm run dist
+  ```
+</details>
+
+## FAQ
+
+<details>
+  <summary>Why are my event listeners not working?</summary>
+  
+  In Vue 2.0, adding **native** event handlers in **custom** components requires a `.native` modifier:
+  ```html
+  <my-component @click.native="handleClick">Click Me</my-component>
+  ```
+  
+  For the sake of usability, we processed `Button` so it can listen to `click` events:
+  ```html
+  <el-button @click="handleButtonClick">Click Me</el-button>
+  ```
+  
+  For other components, the `.native` modifier is still mandatory.
+</details>
+
+<details>
+  <summary>How do I add buttons in each row of Table to operate data of that row?</summary>
+  
+  Just use [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots):
+  ```html
+  <el-table-column label="Operations">
+    <template slot-scope="props">
+      <el-button @click.native="showDetail(props.row)">Details</el-button>
+    </template>
+  </el-table-column>
+  ```
+  The parameter `row` is the data object of corresponding row.
+</details>
+
+<details>
+  <summary>How do `render-content` of Tree and `render-header` of Table work?</summary>
+  
+  Please refer to [Render Function](http://vuejs.org/v2/guide/render-function.html) in Vue's documentation. In addition, if you are writing render functions with JSX, `babel-plugin-transform-vue-jsx` is required. See [here](https://github.com/vuejs/babel-plugin-transform-vue-jsx) for its configurations.
+</details>
+
+<details>
+  <summary>Can I use `.sync` modifier on every attribute?</summary>
+  
+  No, only a few attributes supports the `.sync` modifier, and we have explicitly marked them on the documentation's API table. For more information about `.sync`, please refer to [Vue documentation](https://vuejs.org/v2/guide/components.html#sync-Modifier).
+</details>
+
+<details>
+  <summary>When do you update documentations of Element?</summary>
+  
+  We update documentations only when a new version of Element is published so that it reflects all the changes introduced in that version. Updated changed can be found in the [changelog](https://github.com/ElemeFE/element/blob/master/CHANGELOG.en-US.md)。
+</details>
+
+<details>
+  <summary>I imported Element in my project, but why does it report CSS error/font file error/components have no style?</summary>
+  
+  Please refer to our [starter kit](https://github.com/ElementUI/element-starter) and correctly configure file-loader, css-loader and style-loader in webpack config file. Besides, we also provide templated based on [cooking](https://github.com/ElementUI/element-cooking-starter) and [laravel](https://github.com/ElementUI/element-in-laravel-starter).
+</details>
+
+<details>
+  <summary>I cloned Element's repo, but failed to run it. How do I solve it?</summary>
+  
+  First, please make sure to clone the latest code in master branch and cloned files are intact. Then, note that the version of Nodejs should be 4.0+ and npm 3.0+. Finally, activate development:
+  
+  ```bash
+  npm run dev
+  ```
+  
+  or build it:
+  
+  ```bash
+  npm run dist
+  ```
+</details>
+
+## Preguntas más frecuentes
+
+<details>
+  <summary>¿Porque mis receptores de eventos no funcionan?</summary>
+  
+  En Vue 2.0, agregando **nativos** receptores de evento **a medida** componentes requiere el modificador `.native`:
+  ```
+  html
+  <mi-componente @click.native="handleClick">Haga Clic Aquí</mi-componente>
+  ```
+  
+  Para conveniencia, hemos ya procesado eventos para el componente `Button` para que el interfaz sea consistente con `clic` eventos de otros componentes:
+  
+  ```html
+  <el-button @click="handleButtonClick">Haga Clic Aquí</el-button>
+  ```
+  
+  Para otros componentes el uso del modificador `.native` sigue siendo obligatorio.
+</details>
+
+<details>
+  <summary>¿Como agrego botones en cada linea de una tabla para que operen en los datos de esa linea?</summary>
+  
+  Simplemente agregue [“Scoped slot”](https://vuejs.org/v2/guide/components.html#Scoped-Slots):
+  ```html
+  <el-table-column label="Operaciones">
+    <template slot-scope="props">
+      <el-button @click.native="verDetalles(props.row)">Detalles</el-button>
+    </template>
+  </el-table-column>
+  ```
+  El parámetro `row` contiene los datos de la linea correspondiente de la tabla.
+</details>
+
+<details>
+  <summary>¿Como funcionan `render-content` de `Tree` y `render-header` de `Table`?</summary>
+  
+  Por favor refiérase a [Función de representación](http://vuejs.org/v2/guide/render-function.html) en la documentación de `Vue`. Adicionalmente, sí usted está escribiendo funciones de representar con JSX, se requiere el componente `babel-plugin-transform-vue-jsx`. Más información [aquí](https://github.com/vuejs/babel-plugin-transform-vue-jsx) para su uso y configuración.
+</details>
+
+<details>
+  <summary>¿Puedo usar el modificador `.sync` con cada atributo?</summary>
+  
+  No, solamente un grupo pequeño de atributos apoyan el modificador `.sync`, y están anotados claramente en la documentación del IPA. Para información adicional sobre `.sync`, por favor refiérase a [documentación de Vue](https://vuejs.org/v2/guide/components.html#sync-Modifier).
+</details>
+
+<details>
+  <summary>¿Cuando añaden a la documentación de `Element`?</summary>
+  
+  Añadamos la documentación con cada versión nueva de `Element` y los cambios reflejan los cambios del software de esa versión. Los cambios actuales y históricos se encuentran [aquí](https://github.com/ElemeFE/element/blob/master/CHANGELOG.en-US.md).
+</details>
+
+<details>
+  <summary>¿Importé `Element` a mi proyecto pero tengo errores con `CSS` y/o fuentes y mis componentes no tienen ningún estilo?</summary>
+  
+  Refiérase a [nuestro ‘kit’ de inicio](https://github.com/ElementUI/element-starter) y configure correctamente `file-loader`, `css-loader` y `style-loader` en el archivo `webpack config`. Además, proveemos un ejemplar para [cooking](https://github.com/ElementUI/element-cooking-starter) y para [laravel](https://github.com/ElementUI/element-in-laravel-starter).
+</details>
+
+<details>
+  <summary>Hice un clon del repositorio de `Element` pero no arranca. ¿Como lo resuelvo?</summary>
+  
+  Primero, pro favor, asegúrese de usar la versión más corriente en la rama  `master` y que los archivos están en orden. Después, revise sí la versión de `Nodejs` es 4.0+ y `npm` debe ser 3.0+. Finalmente active el modo desarrollo:
+  
+  ```bash
+  npm run dev
+  ```
+  
+  O arme su aplicación así:
+  
+  ```bash
+  npm run dist
+  ```
+</details>
--- a/21
+++ b/21
@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016-present ElemeFE
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/46
+++ b/46
@ -0,0 +1,46 @@
+.PHONY: dist test
+default: help
+
+# build all theme
+build-theme:
+	npm run build:theme
+
+install:
+	npm install
+
+install-cn:
+	npm install --registry=http://registry.npm.taobao.org
+
+dev:
+	npm run dev
+
+play:
+	npm run dev:play
+
+new:
+	node build/bin/new.js $(filter-out $@,$(MAKECMDGOALS))
+
+new-lang:
+	node build/bin/new-lang.js $(filter-out $@,$(MAKECMDGOALS))
+
+dist: install
+	npm run dist
+
+deploy:
+	@npm run deploy
+
+pub:
+	npm run pub
+
+test:
+	npm run test:watch
+
+help:
+	@echo "   \033[35mmake\033[0m \033[1m命令使用说明\033[0m"
+	@echo "   \033[35mmake install\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  安装依赖"
+	@echo "   \033[35mmake new <component-name> [中文名]\033[0m\t---  创建新组件 package. 例如 'make new button 按钮'"
+	@echo "   \033[35mmake dev\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  开发模式"
+	@echo "   \033[35mmake dist\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  编译项目，生成目标文件"
+	@echo "   \033[35mmake deploy\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  部署 demo"
+	@echo "   \033[35mmake pub\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  发布到 npm 上"
+	@echo "   \033[35mmake new-lang <lang>\033[0m\t\033[0m\t\033[0m\t---  为网站添加新语言. 例如 'make new-lang fr'"
--- a/README.md
+++ b/README.md
@ -0,0 +1,146 @@
+<p align="center">
+  <img src="https://cdn.rawgit.com/ElemeFE/element/dev/element_logo.svg">
+</p>
+
+<p align="center">
+  <a href="https://travis-ci.org/ElemeFE/element">
+    <img src="https://travis-ci.org/ElemeFE/element.svg?branch=master">
+  </a>
+  <a href="https://coveralls.io/github/ElemeFE/element?branch=master">
+    <img src="https://coveralls.io/repos/github/ElemeFE/element/badge.svg?branch=master">
+  </a>
+  <a href="https://cdnjs.com/libraries/element-ui">
+    <img src="https://img.shields.io/cdnjs/v/element-ui.svg">
+  </a>
+  <a href="https://www.npmjs.org/package/element-ui">
+    <img src="https://img.shields.io/npm/v/element-ui.svg">
+  </a>
+  <a href="https://npmcharts.com/compare/element-ui?minimal=true">
+    <img src="http://img.shields.io/npm/dm/element-ui.svg">
+  </a>
+  <br>
+  <a href="http://img.badgesize.io/https://unpkg.com/element-ui/lib/index.js?compression=gzip&label=gzip%20size:%20JS">
+    <img src="http://img.badgesize.io/https://unpkg.com/element-ui/lib/index.js?compression=gzip&label=gzip%20size:%20JS">
+  </a>
+  <a href="http://img.badgesize.io/https://unpkg.com/element-ui/lib/theme-chalk/index.css?compression=gzip&label=gzip%20size:%20CSS">
+    <img src="http://img.badgesize.io/https://unpkg.com/element-ui/lib/theme-chalk/index.css?compression=gzip&label=gzip%20size:%20CSS">
+  </a>
+  <a href="#backers">
+    <img src="https://opencollective.com/element/backers/badge.svg">
+  </a>
+  <a href="#sponsors">
+    <img src="https://opencollective.com/element/sponsors/badge.svg">
+  </a>
+  <a href="LICENSE">
+    <img src="https://img.shields.io/badge/License-MIT-yellow.svg">
+  </a>
+</p>
+
+> A Vue.js 2.0 UI Toolkit for Web.
+
+Element will stay with Vue 2.x 
+
+For Vue 3.0, we recommend using [Element Plus](https://github.com/element-plus/element-plus) from the same team
+
+## Links
+- Homepage and documentation
+  - [International users](http://element.eleme.io/#/en-US)
+  - [Chinese users](http://element-cn.eleme.io/#/zh-CN)
+  - [Spanish users](http://element.eleme.io/#/es)
+  - [French users](http://element.eleme.io/#/fr-FR)
+- [awesome-element](https://github.com/ElementUI/awesome-element)
+- [FAQ](./FAQ.md)
+- [Vue.js 3.0 migration](https://github.com/element-plus/element-plus)
+- [Customize theme](http://element.eleme.io/#/en-US/component/custom-theme)
+- [Preview and generate theme online](https://elementui.github.io/theme-chalk-preview)
+- [Element for React](https://github.com/elemefe/element-react)
+- [Element for Angular](https://github.com/ElemeFE/element-angular)
+- [Atom helper](https://github.com/ElemeFE/element-helper)
+- [Visual Studio Code helper](https://github.com/ElemeFE/vscode-element-helper)
+- Starter kit
+  - [element-starter](https://github.com/ElementUI/element-starter)
+  - [element-in-laravel-starter](https://github.com/ElementUI/element-in-laravel-starter)
+- [Design resources](https://github.com/ElementUI/Resources)
+- Gitter
+  - [International users](https://gitter.im/element-en/Lobby)
+  - [Chinese users](https://gitter.im/ElemeFE/element)
+
+## Install
+```shell
+npm install element-ui -S
+```
+
+## Quick Start
+``` javascript
+import Vue from 'vue'
+import Element from 'element-ui'
+
+Vue.use(Element)
+
+// or
+import {
+  Select,
+  Button
+  // ...
+} from 'element-ui'
+
+Vue.component(Select.name, Select)
+Vue.component(Button.name, Button)
+```
+For more information, please refer to [Quick Start](http://element.eleme.io/#/en-US/component/quickstart) in our documentation.
+
+## Browser Support
+Modern browsers and Internet Explorer 10+.
+
+## Development
+Skip this part if you just want to use Element.
+
+For those who are interested in contributing to Element, please refer to our contributing guide ([中文](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md) | [English](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.en-US.md) | [Español](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.es.md) | [Français](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.fr-FR.md)) to see how to run this project.
+
+## Changelog
+Detailed changes for each release are documented in the [release notes](https://github.com/ElemeFE/element/releases).
+
+## FAQ
+We have collected some [frequently asked questions](https://github.com/ElemeFE/element/blob/master/FAQ.md). Before reporting an issue, please search if the FAQ has the answer to your problem.
+
+## Contribution
+Please make sure to read the contributing guide ([中文](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md) | [English](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.en-US.md) | [Español](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.es.md) | [Français](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.fr-FR.md)) before making a pull request.
+
+## Special Thanks
+English documentation is brought to you by SwiftGG Translation Team:
+- [raychenfj](https://github.com/raychenfj)
+- [kevin](http://thekevin.cn/)
+- [曾小涛](https://github.com/zengxiaotao)
+- [湾仔王二](https://github.com/wanzaiwanger)
+- [BlooDLine](http://www.ibloodline.com/)
+- [陈铭嘉](https://chenmingjia.github.io/)
+- [千叶知风](http://mpc6.com/)
+- [梁杰](http://numbbbbb.com)
+- [Changing](https://github.com/sunzhuo11)
+- [mmoaay](https://github.com/mmoaay)
+
+Spanish documentation is made possible by these community developers:
+- [adavie1](https://github.com/adavie1)
+- [carmencitaqiu](https://github.com/carmencitaqiu)
+- [coderdiaz](https://github.com/coderdiaz)
+- [fedegar33](https://github.com/fedegar33)
+- [Gonzalo2310](https://github.com/Gonzalo2310)
+- [lesterbx](https://github.com/lesterbx)
+- [ProgramerGuy](https://github.com/ProgramerGuy)
+- [SantiagoGdaR](https://github.com/SantiagoGdaR)
+- [sigfriedCub1990](https://github.com/sigfriedCub1990)
+- [thechosenjuan](https://github.com/thechosenjuan)
+
+French documentation is made possible by these community developers:
+- [smalesys](https://github.com/smalesys)
+- [blombard](https://github.com/blombard)
+
+## Join Discussion Group
+
+Scan the QR code using [Dingtalk App](https://www.dingtalk.com/) to join in discussion group :
+
+<img alt="Join Discusion Group" src="https://user-images.githubusercontent.com/17680888/93177882-0ae92d80-f766-11ea-870d-3fa2d7f06454.png" width="300">
+
+
+## LICENSE
+[MIT](LICENSE)
--- a/build/bin/build-entry.js
+++ b/build/bin/build-entry.js
@ -0,0 +1,99 @@
+var Components = require('../../components.json');
+var fs = require('fs');
+var render = require('json-templater/string');
+var uppercamelcase = require('uppercamelcase');
+var path = require('path');
+var endOfLine = require('os').EOL;
+
+var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
+var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
+var INSTALL_COMPONENT_TEMPLATE = '  {{name}}';
+var MAIN_TEMPLATE = `/* Automatically generated by './build/bin/build-entry.js' */
+
+{{include}}
+import locale from 'element-ui/src/locale';
+import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
+
+const components = [
+{{install}},
+  CollapseTransition
+];
+
+const install = function(Vue, opts = {}) {
+  locale.use(opts.locale);
+  locale.i18n(opts.i18n);
+
+  components.forEach(component => {
+    Vue.component(component.name, component);
+  });
+
+  Vue.use(InfiniteScroll);
+  Vue.use(Loading.directive);
+
+  Vue.prototype.$ELEMENT = {
+    size: opts.size || '',
+    zIndex: opts.zIndex || 2000
+  };
+
+  Vue.prototype.$loading = Loading.service;
+  Vue.prototype.$msgbox = MessageBox;
+  Vue.prototype.$alert = MessageBox.alert;
+  Vue.prototype.$confirm = MessageBox.confirm;
+  Vue.prototype.$prompt = MessageBox.prompt;
+  Vue.prototype.$notify = Notification;
+  Vue.prototype.$message = Message;
+
+};
+
+/* istanbul ignore if */
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue);
+}
+
+export default {
+  version: '{{version}}',
+  locale: locale.use,
+  i18n: locale.i18n,
+  install,
+  CollapseTransition,
+  Loading,
+{{list}}
+};
+`;
+
+delete Components.font;
+
+var ComponentNames = Object.keys(Components);
+
+var includeComponentTemplate = [];
+var installTemplate = [];
+var listTemplate = [];
+
+ComponentNames.forEach(name => {
+  var componentName = uppercamelcase(name);
+
+  includeComponentTemplate.push(render(IMPORT_TEMPLATE, {
+    name: componentName,
+    package: name
+  }));
+
+  if (['Loading', 'MessageBox', 'Notification', 'Message', 'InfiniteScroll'].indexOf(componentName) === -1) {
+    installTemplate.push(render(INSTALL_COMPONENT_TEMPLATE, {
+      name: componentName,
+      component: name
+    }));
+  }
+
+  if (componentName !== 'Loading') listTemplate.push(`  ${componentName}`);
+});
+
+var template = render(MAIN_TEMPLATE, {
+  include: includeComponentTemplate.join(endOfLine),
+  install: installTemplate.join(',' + endOfLine),
+  version: process.env.VERSION || require('../../package.json').version,
+  list: listTemplate.join(',' + endOfLine)
+});
+
+fs.writeFileSync(OUTPUT_PATH, template);
+console.log('[build entry] DONE:', OUTPUT_PATH);
+
--- a/build/bin/build-locale.js
+++ b/build/bin/build-locale.js
@ -0,0 +1,39 @@
+var fs = require('fs');
+var save = require('file-save');
+var resolve = require('path').resolve;
+var basename = require('path').basename;
+var localePath = resolve(__dirname, '../../src/locale/lang');
+var fileList = fs.readdirSync(localePath);
+
+var transform = function(filename, name, cb) {
+  require('babel-core').transformFile(resolve(localePath, filename), {
+    plugins: [
+      'add-module-exports',
+      ['transform-es2015-modules-umd', {loose: true}]
+    ],
+    moduleId: name
+  }, cb);
+};
+
+fileList
+  .filter(function(file) {
+    return /\.js$/.test(file);
+  })
+  .forEach(function(file) {
+    var name = basename(file, '.js');
+
+    transform(file, name, function(err, result) {
+      if (err) {
+        console.error(err);
+      } else {
+        var code = result.code;
+
+        code = code
+          .replace('define(\'', 'define(\'element/locale/')
+          .replace('global.', 'global.ELEMENT.lang = global.ELEMENT.lang || {}; \n    global.ELEMENT.lang.');
+        save(resolve(__dirname, '../../lib/umd/locale', file)).write(code);
+
+        console.log(file);
+      }
+    });
+  });
--- a/build/bin/gen-cssfile.js
+++ b/build/bin/gen-cssfile.js
@ -0,0 +1,32 @@
+var fs = require('fs');
+var path = require('path');
+var Components = require('../../components.json');
+var themes = [
+  'theme-chalk'
+];
+Components = Object.keys(Components);
+var basepath = path.resolve(__dirname, '../../packages/');
+
+function fileExists(filePath) {
+  try {
+    return fs.statSync(filePath).isFile();
+  } catch (err) {
+    return false;
+  }
+}
+
+themes.forEach((theme) => {
+  var isSCSS = theme !== 'theme-default';
+  var indexContent = isSCSS ? '@import "./base.scss";\n' : '@import "./base.css";\n';
+  Components.forEach(function(key) {
+    if (['icon', 'option', 'option-group'].indexOf(key) > -1) return;
+    var fileName = key + (isSCSS ? '.scss' : '.css');
+    indexContent += '@import "./' + fileName + '";\n';
+    var filePath = path.resolve(basepath, theme, 'src', fileName);
+    if (!fileExists(filePath)) {
+      fs.writeFileSync(filePath, '', 'utf8');
+      console.log(theme, ' 创建遗漏的 ', fileName, ' 文件');
+    }
+  });
+  fs.writeFileSync(path.resolve(basepath, theme, 'src', isSCSS ? 'index.scss' : 'index.css'), indexContent);
+});
--- a/build/bin/gen-indices.js
+++ b/build/bin/gen-indices.js
@ -0,0 +1,58 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const algoliasearch = require('algoliasearch');
+const slugify = require('transliteration').slugify;
+const key = require('./algolia-key');
+
+const client = algoliasearch('4C63BTGP6S', key);
+const langs = {
+  'zh-CN': 'element-zh',
+  'en-US': 'element-en',
+  'es': 'element-es',
+  'fr-FR': 'element-fr'
+};
+
+['zh-CN', 'en-US', 'es', 'fr-FR'].forEach(lang => {
+  const indexName = langs[lang];
+  const index = client.initIndex(indexName);
+  index.clearIndex(err => {
+    if (err) return;
+    fs.readdir(path.resolve(__dirname, `../../examples/docs/${ lang }`), (err, files) => {
+      if (err) return;
+      let indices = [];
+      files.forEach(file => {
+        const component = file.replace('.md', '');
+        const content = fs.readFileSync(path.resolve(__dirname, `../../examples/docs/${ lang }/${ file }`), 'utf8');
+        const matches = content
+          .replace(/:::[\s\S]*?:::/g, '')
+          .replace(/```[\s\S]*?```/g, '')
+          .match(/#{2,4}[^#]*/g)
+          .map(match => match.replace(/\n+/g, '\n').split('\n').filter(part => !!part))
+          .map(match => {
+            const length = match.length;
+            if (length > 2) {
+              const desc = match.slice(1, length).join('');
+              return [match[0], desc];
+            }
+            return match;
+          });
+
+        indices = indices.concat(matches.map(match => {
+          const isComponent = match[0].indexOf('###') < 0;
+          const title = match[0].replace(/#{2,4}/, '').trim();
+          const index = { component, title };
+          index.ranking = isComponent ? 2 : 1;
+          index.anchor = slugify(title);
+          index.content = (match[1] || title).replace(/<[^>]+>/g, '');
+          return index;
+        }));
+      });
+
+      index.addObjects(indices, (err, res) => {
+        console.log(err, res);
+      });
+    });
+  });
+});
--- a/build/bin/i18n.js
+++ b/build/bin/i18n.js
@ -0,0 +1,26 @@
+'use strict';
+
+var fs = require('fs');
+var path = require('path');
+var langConfig = require('../../examples/i18n/page.json');
+
+langConfig.forEach(lang => {
+  try {
+    fs.statSync(path.resolve(__dirname, `../../examples/pages/${ lang.lang }`));
+  } catch (e) {
+    fs.mkdirSync(path.resolve(__dirname, `../../examples/pages/${ lang.lang }`));
+  }
+
+  Object.keys(lang.pages).forEach(page => {
+    var templatePath = path.resolve(__dirname, `../../examples/pages/template/${ page }.tpl`);
+    var outputPath = path.resolve(__dirname, `../../examples/pages/${ lang.lang }/${ page }.vue`);
+    var content = fs.readFileSync(templatePath, 'utf8');
+    var pairs = lang.pages[page];
+
+    Object.keys(pairs).forEach(key => {
+      content = content.replace(new RegExp(`<%=\\s*${ key }\\s*>`, 'g'), pairs[key]);
+    });
+
+    fs.writeFileSync(outputPath, content);
+  });
+});
--- a/build/bin/iconInit.js
+++ b/build/bin/iconInit.js
@ -0,0 +1,22 @@
+'use strict';
+
+var postcss = require('postcss');
+var fs = require('fs');
+var path = require('path');
+var fontFile = fs.readFileSync(path.resolve(__dirname, '../../packages/theme-chalk/src/icon.scss'), 'utf8');
+var nodes = postcss.parse(fontFile).nodes;
+var classList = [];
+
+nodes.forEach((node) => {
+  var selector = node.selector || '';
+  var reg = new RegExp(/\.el-icon-([^:]+):before/);
+  var arr = selector.match(reg);
+
+  if (arr && arr[1]) {
+    classList.push(arr[1]);
+  }
+});
+
+classList.reverse(); // 希望按 css 文件顺序倒序排列
+
+fs.writeFile(path.resolve(__dirname, '../../examples/icon.json'), JSON.stringify(classList), () => {});
--- a/build/bin/new-lang.js
+++ b/build/bin/new-lang.js
@ -0,0 +1,60 @@
+'use strict';
+
+console.log();
+process.on('exit', () => {
+  console.log();
+});
+
+if (!process.argv[2]) {
+  console.error('[language] is required!');
+  process.exit(1);
+}
+
+var fs = require('fs');
+const path = require('path');
+const fileSave = require('file-save');
+const lang = process.argv[2];
+// const configPath = path.resolve(__dirname, '../../examples/i18n', lang);
+
+// 添加到 components.json
+const componentFile = require('../../examples/i18n/component.json');
+if (componentFile.some(item => item.lang === lang)) {
+  console.error(`${lang} already exists.`);
+  process.exit(1);
+}
+let componentNew = Object.assign({}, componentFile.filter(item => item.lang === 'en-US')[0], { lang });
+componentFile.push(componentNew);
+fileSave(path.join(__dirname, '../../examples/i18n/component.json'))
+  .write(JSON.stringify(componentFile, null, '  '), 'utf8')
+  .end('\n');
+
+// 添加到 page.json
+const pageFile = require('../../examples/i18n/page.json');
+let pageNew = Object.assign({}, pageFile.filter(item => item.lang === 'en-US')[0], { lang });
+pageFile.push(pageNew);
+fileSave(path.join(__dirname, '../../examples/i18n/page.json'))
+  .write(JSON.stringify(pageFile, null, '  '), 'utf8')
+  .end('\n');
+
+// 添加到 route.json
+const routeFile = require('../../examples/i18n/route.json');
+routeFile.push({ lang });
+fileSave(path.join(__dirname, '../../examples/i18n/route.json'))
+  .write(JSON.stringify(routeFile, null, '  '), 'utf8')
+  .end('\n');
+
+// 添加到 nav.config.json
+const navFile = require('../../examples/nav.config.json');
+navFile[lang] = navFile['en-US'];
+fileSave(path.join(__dirname, '../../examples/nav.config.json'))
+  .write(JSON.stringify(navFile, null, '  '), 'utf8')
+  .end('\n');
+
+// docs 下新建对应文件夹
+try {
+  fs.statSync(path.resolve(__dirname, `../../examples/docs/${ lang }`));
+} catch (e) {
+  fs.mkdirSync(path.resolve(__dirname, `../../examples/docs/${ lang }`));
+}
+
+console.log('DONE!');
--- a/build/bin/new.js
+++ b/build/bin/new.js
@ -0,0 +1,155 @@
+'use strict';
+
+console.log();
+process.on('exit', () => {
+  console.log();
+});
+
+if (!process.argv[2]) {
+  console.error('[组件名]必填 - Please enter new component name');
+  process.exit(1);
+}
+
+const path = require('path');
+const fs = require('fs');
+const fileSave = require('file-save');
+const uppercamelcase = require('uppercamelcase');
+const componentname = process.argv[2];
+const chineseName = process.argv[3] || componentname;
+const ComponentName = uppercamelcase(componentname);
+const PackagePath = path.resolve(__dirname, '../../packages', componentname);
+const Files = [
+  {
+    filename: 'index.js',
+    content: `import ${ComponentName} from './src/main';
+
+/* istanbul ignore next */
+${ComponentName}.install = function(Vue) {
+  Vue.component(${ComponentName}.name, ${ComponentName});
+};
+
+export default ${ComponentName};`
+  },
+  {
+    filename: 'src/main.vue',
+    content: `<template>
+  <div class="el-${componentname}"></div>
+</template>
+
+<script>
+export default {
+  name: 'El${ComponentName}'
+};
+</script>`
+  },
+  {
+    filename: path.join('../../examples/docs/zh-CN', `${componentname}.md`),
+    content: `## ${ComponentName} ${chineseName}`
+  },
+  {
+    filename: path.join('../../examples/docs/en-US', `${componentname}.md`),
+    content: `## ${ComponentName}`
+  },
+  {
+    filename: path.join('../../examples/docs/es', `${componentname}.md`),
+    content: `## ${ComponentName}`
+  },
+  {
+    filename: path.join('../../examples/docs/fr-FR', `${componentname}.md`),
+    content: `## ${ComponentName}`
+  },
+  {
+    filename: path.join('../../test/unit/specs', `${componentname}.spec.js`),
+    content: `import { createTest, destroyVM } from '../util';
+import ${ComponentName} from 'packages/${componentname}';
+
+describe('${ComponentName}', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', () => {
+    vm = createTest(${ComponentName}, true);
+    expect(vm.$el).to.exist;
+  });
+});
+`
+  },
+  {
+    filename: path.join('../../packages/theme-chalk/src', `${componentname}.scss`),
+    content: `@import "mixins/mixins";
+@import "common/var";
+
+@include b(${componentname}) {
+}`
+  },
+  {
+    filename: path.join('../../types', `${componentname}.d.ts`),
+    content: `import { ElementUIComponent } from './component'
+
+/** ${ComponentName} Component */
+export declare class El${ComponentName} extends ElementUIComponent {
+}`
+  }
+];
+
+// 添加到 components.json
+const componentsFile = require('../../components.json');
+if (componentsFile[componentname]) {
+  console.error(`${componentname} 已存在.`);
+  process.exit(1);
+}
+componentsFile[componentname] = `./packages/${componentname}/index.js`;
+fileSave(path.join(__dirname, '../../components.json'))
+  .write(JSON.stringify(componentsFile, null, '  '), 'utf8')
+  .end('\n');
+
+// 添加到 index.scss
+const sassPath = path.join(__dirname, '../../packages/theme-chalk/src/index.scss');
+const sassImportText = `${fs.readFileSync(sassPath)}@import "./${componentname}.scss";`;
+fileSave(sassPath)
+  .write(sassImportText, 'utf8')
+  .end('\n');
+
+// 添加到 element-ui.d.ts
+const elementTsPath = path.join(__dirname, '../../types/element-ui.d.ts');
+
+let elementTsText = `${fs.readFileSync(elementTsPath)}
+/** ${ComponentName} Component */
+export class ${ComponentName} extends El${ComponentName} {}`;
+
+const index = elementTsText.indexOf('export') - 1;
+const importString = `import { El${ComponentName} } from './${componentname}'`;
+
+elementTsText = elementTsText.slice(0, index) + importString + '\n' + elementTsText.slice(index);
+
+fileSave(elementTsPath)
+  .write(elementTsText, 'utf8')
+  .end('\n');
+
+// 创建 package
+Files.forEach(file => {
+  fileSave(path.join(PackagePath, file.filename))
+    .write(file.content, 'utf8')
+    .end('\n');
+});
+
+// 添加到 nav.config.json
+const navConfigFile = require('../../examples/nav.config.json');
+
+Object.keys(navConfigFile).forEach(lang => {
+  let groups = navConfigFile[lang][4].groups;
+  groups[groups.length - 1].list.push({
+    path: `/${componentname}`,
+    title: lang === 'zh-CN' && componentname !== chineseName
+      ? `${ComponentName} ${chineseName}`
+      : ComponentName
+  });
+});
+
+fileSave(path.join(__dirname, '../../examples/nav.config.json'))
+  .write(JSON.stringify(navConfigFile, null, '  '), 'utf8')
+  .end('\n');
+
+console.log('DONE!');
--- a/build/bin/template.js
+++ b/build/bin/template.js
@ -0,0 +1,16 @@
+const path = require('path');
+const templates = path.resolve(process.cwd(), './examples/pages/template');
+
+const chokidar = require('chokidar');
+let watcher = chokidar.watch([templates]);
+
+watcher.on('ready', function() {
+  watcher
+    .on('change', function() {
+      exec('npm run i18n');
+    });
+});
+
+function exec(cmd) {
+  return require('child_process').execSync(cmd).toString().trim();
+}
--- a/build/bin/version.js
+++ b/build/bin/version.js
@ -0,0 +1,6 @@
+var fs = require('fs');
+var path = require('path');
+var version = process.env.VERSION || require('../../package.json').version;
+var content = { '1.4.13': '1.4', '2.0.11': '2.0', '2.1.0': '2.1', '2.2.2': '2.2', '2.3.9': '2.3', '2.4.11': '2.4', '2.5.4': '2.5', '2.6.3': '2.6', '2.7.2': '2.7', '2.8.2': '2.8', '2.9.2': '2.9', '2.10.1': '2.10', '2.11.1': '2.11', '2.12.0': '2.12', '2.13.2': '2.13', '2.14.1': '2.14' };
+if (!content[version]) content[version] = '2.15';
+fs.writeFileSync(path.resolve(__dirname, '../../examples/versions.json'), JSON.stringify(content));
--- a/build/config.js
+++ b/build/config.js
@ -0,0 +1,49 @@
+var path = require('path');
+var fs = require('fs');
+var nodeExternals = require('webpack-node-externals');
+var Components = require('../components.json');
+
+var utilsList = fs.readdirSync(path.resolve(__dirname, '../src/utils'));
+var mixinsList = fs.readdirSync(path.resolve(__dirname, '../src/mixins'));
+var transitionList = fs.readdirSync(path.resolve(__dirname, '../src/transitions'));
+var externals = {};
+
+Object.keys(Components).forEach(function(key) {
+  externals[`element-ui/packages/${key}`] = `element-ui/lib/${key}`;
+});
+
+externals['element-ui/src/locale'] = 'element-ui/lib/locale';
+utilsList.forEach(function(file) {
+  file = path.basename(file, '.js');
+  externals[`element-ui/src/utils/${file}`] = `element-ui/lib/utils/${file}`;
+});
+mixinsList.forEach(function(file) {
+  file = path.basename(file, '.js');
+  externals[`element-ui/src/mixins/${file}`] = `element-ui/lib/mixins/${file}`;
+});
+transitionList.forEach(function(file) {
+  file = path.basename(file, '.js');
+  externals[`element-ui/src/transitions/${file}`] = `element-ui/lib/transitions/${file}`;
+});
+
+externals = [Object.assign({
+  vue: 'vue'
+}, externals), nodeExternals()];
+
+exports.externals = externals;
+
+exports.alias = {
+  main: path.resolve(__dirname, '../src'),
+  packages: path.resolve(__dirname, '../packages'),
+  examples: path.resolve(__dirname, '../examples'),
+  'element-ui': path.resolve(__dirname, '../')
+};
+
+exports.vue = {
+  root: 'Vue',
+  commonjs: 'vue',
+  commonjs2: 'vue',
+  amd: 'vue'
+};
+
+exports.jsexclude = /node_modules|utils\/popper\.js|utils\/date\.js/;
--- a/build/deploy-ci.sh
+++ b/build/deploy-ci.sh
@ -0,0 +1,78 @@
+#! /bin/sh
+mkdir temp_web
+git config --global user.name "element-bot"
+git config --global user.email "wallement@gmail.com"
+
+if [ "$ROT_TOKEN" = "" ]; then
+  echo "Bye~"
+  exit 0
+fi
+
+# release
+if [ "$TRAVIS_TAG" ]; then
+  # build lib
+  npm run dist
+  cd temp_web
+  git clone https://$ROT_TOKEN@github.com/ElementUI/lib.git && cd lib
+  rm -rf `find * ! -name README.md`
+  cp -rf ../../lib/** .
+  git add -A .
+  git commit -m "[build] $TRAVIS_TAG"
+  git tag $TRAVIS_TAG
+  git push origin master --tags
+  cd ../..
+
+  # build theme-chalk
+  cd temp_web
+  git clone https://$ROT_TOKEN@github.com/ElementUI/theme-chalk.git && cd theme-chalk
+  rm -rf *
+  cp -rf ../../packages/theme-chalk/** .
+  git add -A .
+  git commit -m "[build] $TRAVIS_TAG"
+  git tag $TRAVIS_TAG
+  git push origin master --tags
+  cd ../..
+
+  # build site
+  npm run deploy:build
+  cd temp_web
+  git clone --depth 1 -b gh-pages --single-branch https://$ROT_TOKEN@github.com/ElemeFE/element.git && cd element
+  # build sub folder
+  echo $TRAVIS_TAG
+
+  SUB_FOLDER='2.15'
+  mkdir $SUB_FOLDER
+  rm -rf *.js *.css *.map static
+  rm -rf $SUB_FOLDER/**
+  cp -rf ../../examples/element-ui/** .
+  cp -rf ../../examples/element-ui/** $SUB_FOLDER/
+  git add -A .
+  git commit -m "$TRAVIS_COMMIT_MSG"
+  git push origin gh-pages
+  cd ../..
+
+  echo "DONE, Bye~"
+  exit 0
+fi
+
+# build dev site
+npm run build:file && CI_ENV=/dev/$TRAVIS_BRANCH/ node_modules/.bin/cross-env NODE_ENV=production node_modules/.bin/webpack --config build/webpack.demo.js
+cd temp_web
+git clone https://$ROT_TOKEN@github.com/ElementUI/dev.git && cd dev
+mkdir $TRAVIS_BRANCH
+rm -rf $TRAVIS_BRANCH/**
+cp -rf ../../examples/element-ui/** $TRAVIS_BRANCH/
+git add -A .
+git commit -m "$TRAVIS_COMMIT_MSG"
+git push origin master
+cd ../..
+
+# push dev theme-chalk
+cd temp_web
+git clone -b $TRAVIS_BRANCH https://$ROT_TOKEN@github.com/ElementUI/theme-chalk.git && cd theme-chalk
+rm -rf *
+cp -rf ../../packages/theme-chalk/** .
+git add -A .
+git commit -m "$TRAVIS_COMMIT_MSG"
+git push origin $TRAVIS_BRANCH
+cd ../..
--- a/build/deploy-faas.sh
+++ b/build/deploy-faas.sh
@ -0,0 +1,19 @@
+#! /bin/sh
+set -ex
+mkdir temp_web
+npm run deploy:build
+cd temp_web
+git clone --depth 1 -b gh-pages --single-branch https://github.com/ElemeFE/element.git && cd element
+
+# build sub folder
+SUB_FOLDER='2.15'
+mkdir -p $SUB_FOLDER
+rm -rf *.js *.css *.map static
+rm -rf $SUB_FOLDER/**
+cp -rf ../../examples/element-ui/** .
+cp -rf ../../examples/element-ui/** $SUB_FOLDER/
+cd ../..
+
+# deploy domestic site
+faas deploy daily -P element
+rm -rf temp_web
--- a/build/gen-single-config.js
+++ b/build/gen-single-config.js
@ -0,0 +1,17 @@
+var path = require('path');
+var config = require('./config');
+
+module.exports = function(context, moduleName, entry) {
+  return {
+    entry: {
+      index: path.resolve(context, entry || 'index.js')
+    },
+    dist: path.resolve(context, 'lib'),
+    template: false,
+    format: 'umd',
+    moduleName: moduleName,
+    extends: ['vue2'],
+    alias: config.alias,
+    externals: { vue: config.vue }
+  };
+};
--- a/build/git-release.sh
+++ b/build/git-release.sh
@ -0,0 +1,19 @@
+#!/usr/bin/env sh
+git checkout dev
+
+if test -n "$(git status --porcelain)"; then
+  echo 'Unclean working tree. Commit or stash changes first.' >&2;
+  exit 128;
+fi
+
+if ! git fetch --quiet 2>/dev/null; then
+  echo 'There was a problem fetching your branch. Run `git fetch` to see more...' >&2;
+  exit 128;
+fi
+
+if test "0" != "$(git rev-list --count --left-only @'{u}'...HEAD)"; then
+  echo 'Remote history differ. Please pull changes.' >&2;
+  exit 128;
+fi
+
+echo 'No conflicts.' >&2;
--- a/build/md-loader/config.js
+++ b/build/md-loader/config.js
@ -0,0 +1,26 @@
+const Config = require('markdown-it-chain');
+const anchorPlugin = require('markdown-it-anchor');
+const slugify = require('transliteration').slugify;
+const containers = require('./containers');
+const overWriteFenceRule = require('./fence');
+
+const config = new Config();
+
+config
+  .options.html(true).end()
+
+  .plugin('anchor').use(anchorPlugin, [
+    {
+      level: 2,
+      slugify: slugify,
+      permalink: true,
+      permalinkBefore: true
+    }
+  ]).end()
+
+  .plugin('containers').use(containers).end();
+
+const md = config.toMd();
+overWriteFenceRule(md);
+
+module.exports = md;
--- a/build/md-loader/containers.js
+++ b/build/md-loader/containers.js
@ -0,0 +1,24 @@
+const mdContainer = require('markdown-it-container');
+
+module.exports = md => {
+  md.use(mdContainer, 'demo', {
+    validate(params) {
+      return params.trim().match(/^demo\s*(.*)$/);
+    },
+    render(tokens, idx) {
+      const m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
+      if (tokens[idx].nesting === 1) {
+        const description = m && m.length > 1 ? m[1] : '';
+        const content = tokens[idx + 1].type === 'fence' ? tokens[idx + 1].content : '';
+        return `<demo-block>
+        ${description ? `<div>${md.render(description)}</div>` : ''}
+        <!--element-demo: ${content}:element-demo-->
+        `;
+      }
+      return '</demo-block>';
+    }
+  });
+
+  md.use(mdContainer, 'tip');
+  md.use(mdContainer, 'warning');
+};
--- a/build/md-loader/fence.js
+++ b/build/md-loader/fence.js
@ -0,0 +1,14 @@
+// 覆盖默认的 fence 渲染策略
+module.exports = md => {
+  const defaultRender = md.renderer.rules.fence;
+  md.renderer.rules.fence = (tokens, idx, options, env, self) => {
+    const token = tokens[idx];
+    // 判断该 fence 是否在 :::demo 内
+    const prevToken = tokens[idx - 1];
+    const isInDemoContainer = prevToken && prevToken.nesting === 1 && prevToken.info.trim().match(/^demo\s*(.*)$/);
+    if (token.info === 'html' && isInDemoContainer) {
+      return `<template slot="highlight"><pre v-pre><code class="html">${md.utils.escapeHtml(token.content)}</code></pre></template>`;
+    }
+    return defaultRender(tokens, idx, options, env, self);
+  };
+};
--- a/build/md-loader/index.js
+++ b/build/md-loader/index.js
@ -0,0 +1,67 @@
+const {
+  stripScript,
+  stripTemplate,
+  genInlineComponentText
+} = require('./util');
+const md = require('./config');
+
+module.exports = function(source) {
+  const content = md.render(source);
+
+  const startTag = '<!--element-demo:';
+  const startTagLen = startTag.length;
+  const endTag = ':element-demo-->';
+  const endTagLen = endTag.length;
+
+  let componenetsString = '';
+  let id = 0; // demo 的 id
+  let output = []; // 输出的内容
+  let start = 0; // 字符串开始位置
+
+  let commentStart = content.indexOf(startTag);
+  let commentEnd = content.indexOf(endTag, commentStart + startTagLen);
+  while (commentStart !== -1 && commentEnd !== -1) {
+    output.push(content.slice(start, commentStart));
+
+    const commentContent = content.slice(commentStart + startTagLen, commentEnd);
+    const html = stripTemplate(commentContent);
+    const script = stripScript(commentContent);
+    let demoComponentContent = genInlineComponentText(html, script);
+    const demoComponentName = `element-demo${id}`;
+    output.push(`<template slot="source"><${demoComponentName} /></template>`);
+    componenetsString += `${JSON.stringify(demoComponentName)}: ${demoComponentContent},`;
+
+    // 重新计算下一次的位置
+    id++;
+    start = commentEnd + endTagLen;
+    commentStart = content.indexOf(startTag, start);
+    commentEnd = content.indexOf(endTag, commentStart + startTagLen);
+  }
+
+  // 仅允许在 demo 不存在时，才可以在 Markdown 中写 script 标签
+  // todo: 优化这段逻辑
+  let pageScript = '';
+  if (componenetsString) {
+    pageScript = `<script>
+      export default {
+        name: 'component-doc',
+        components: {
+          ${componenetsString}
+        }
+      }
+    </script>`;
+  } else if (content.indexOf('<script>') === 0) { // 硬编码，有待改善
+    start = content.indexOf('</script>') + '</script>'.length;
+    pageScript = content.slice(0, start);
+  }
+
+  output.push(content.slice(start));
+  return `
+    <template>
+      <section class="content element-doc">
+        ${output.join('')}
+      </section>
+    </template>
+    ${pageScript}
+  `;
+};
--- a/build/md-loader/util.js
+++ b/build/md-loader/util.js
@ -0,0 +1,79 @@
+const { compileTemplate } = require('@vue/component-compiler-utils');
+const compiler = require('vue-template-compiler');
+
+function stripScript(content) {
+  const result = content.match(/<(script)>([\s\S]+)<\/\1>/);
+  return result && result[2] ? result[2].trim() : '';
+}
+
+function stripStyle(content) {
+  const result = content.match(/<(style)\s*>([\s\S]+)<\/\1>/);
+  return result && result[2] ? result[2].trim() : '';
+}
+
+// 编写例子时不一定有 template。所以采取的方案是剔除其他的内容
+function stripTemplate(content) {
+  content = content.trim();
+  if (!content) {
+    return content;
+  }
+  return content.replace(/<(script|style)[\s\S]+<\/\1>/g, '').trim();
+}
+
+function pad(source) {
+  return source
+    .split(/\r?\n/)
+    .map(line => `  ${line}`)
+    .join('\n');
+}
+
+function genInlineComponentText(template, script) {
+  // https://github.com/vuejs/vue-loader/blob/423b8341ab368c2117931e909e2da9af74503635/lib/loaders/templateLoader.js#L46
+  const finalOptions = {
+    source: `<div>${template}</div>`,
+    filename: 'inline-component', // TODO：这里有待调整
+    compiler
+  };
+  const compiled = compileTemplate(finalOptions);
+  // tips
+  if (compiled.tips && compiled.tips.length) {
+    compiled.tips.forEach(tip => {
+      console.warn(tip);
+    });
+  }
+  // errors
+  if (compiled.errors && compiled.errors.length) {
+    console.error(
+      `\n  Error compiling template:\n${pad(compiled.source)}\n` +
+        compiled.errors.map(e => `  - ${e}`).join('\n') +
+        '\n'
+    );
+  }
+  let demoComponentContent = `
+    ${compiled.code}
+  `;
+  // todo: 这里采用了硬编码有待改进
+  script = script.trim();
+  if (script) {
+    script = script.replace(/export\s+default/, 'const democomponentExport =');
+  } else {
+    script = 'const democomponentExport = {}';
+  }
+  demoComponentContent = `(function() {
+    ${demoComponentContent}
+    ${script}
+    return {
+      render,
+      staticRenderFns,
+      ...democomponentExport
+    }
+  })()`;
+  return demoComponentContent;
+}
+
+module.exports = {
+  stripScript,
+  stripStyle,
+  stripTemplate,
+  genInlineComponentText
+};
--- a/build/release.sh
+++ b/build/release.sh
@ -0,0 +1,51 @@
+#!/usr/bin/env sh
+set -e
+
+git checkout master
+git merge dev
+
+VERSION=`npx select-version-cli`
+
+read -p "Releasing $VERSION - are you sure? (y/n)" -n 1 -r
+echo    # (optional) move to a new line
+if [[ $REPLY =~ ^[Yy]$ ]]
+then
+  echo "Releasing $VERSION ..."
+
+  # build
+  VERSION=$VERSION npm run dist
+
+  # ssr test
+  node test/ssr/require.test.js            
+
+  # publish theme
+  echo "Releasing theme-chalk $VERSION ..."
+  cd packages/theme-chalk
+  npm version $VERSION --message "[release] $VERSION"
+  if [[ $VERSION =~ "beta" ]]
+  then
+    npm publish --tag beta
+  else
+    npm publish
+  fi
+  cd ../..
+
+  # commit
+  git add -A
+  git commit -m "[build] $VERSION"
+  npm version $VERSION --message "[release] $VERSION"
+
+  # publish
+  git push eleme master
+  git push eleme refs/tags/v$VERSION
+  git checkout dev
+  git rebase master
+  git push eleme dev
+
+  if [[ $VERSION =~ "beta" ]]
+  then
+    npm publish --tag beta
+  else
+    npm publish
+  fi
+fi
--- a/build/webpack.common.js
+++ b/build/webpack.common.js
@ -0,0 +1,71 @@
+const path = require('path');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+
+const config = require('./config');
+
+module.exports = {
+  mode: 'production',
+  entry: {
+    app: ['./src/index.js']
+  },
+  output: {
+    path: path.resolve(process.cwd(), './lib'),
+    publicPath: '/dist/',
+    filename: 'element-ui.common.js',
+    chunkFilename: '[id].js',
+    libraryExport: 'default',
+    library: 'ELEMENT',
+    libraryTarget: 'commonjs2'
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: config.alias,
+    modules: ['node_modules']
+  },
+  externals: config.externals,
+  performance: {
+    hints: false
+  },
+  stats: {
+    children: false
+  },
+  optimization: {
+    minimize: false
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(jsx?|babel|es6)$/,
+        include: process.cwd(),
+        exclude: config.jsexclude,
+        loader: 'babel-loader'
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          compilerOptions: {
+            preserveWhitespace: false
+          }
+        }
+      },
+      {
+        test: /\.css$/,
+        loaders: ['style-loader', 'css-loader']
+      },
+      {
+        test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  plugins: [
+    new ProgressBarPlugin(),
+    new VueLoaderPlugin()
+  ]
+};
--- a/build/webpack.component.js
+++ b/build/webpack.component.js
@ -0,0 +1,68 @@
+const path = require('path');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+
+const Components = require('../components.json');
+const config = require('./config');
+
+const webpackConfig = {
+  mode: 'production',
+  entry: Components,
+  output: {
+    path: path.resolve(process.cwd(), './lib'),
+    publicPath: '/dist/',
+    filename: '[name].js',
+    chunkFilename: '[id].js',
+    libraryTarget: 'commonjs2'
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: config.alias,
+    modules: ['node_modules']
+  },
+  externals: config.externals,
+  performance: {
+    hints: false
+  },
+  stats: 'none',
+  optimization: {
+    minimize: false
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(jsx?|babel|es6)$/,
+        include: process.cwd(),
+        exclude: config.jsexclude,
+        loader: 'babel-loader'
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          compilerOptions: {
+            preserveWhitespace: false
+          }
+        }
+      },
+      {
+        test: /\.css$/,
+        loaders: ['style-loader', 'css-loader']
+      },
+      {
+        test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  plugins: [
+    new ProgressBarPlugin(),
+    new VueLoaderPlugin()
+  ]
+};
+
+module.exports = webpackConfig;
--- a/build/webpack.conf.js
+++ b/build/webpack.conf.js
@ -0,0 +1,71 @@
+const path = require('path');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+
+const config = require('./config');
+
+module.exports = {
+  mode: 'production',
+  entry: {
+    app: ['./src/index.js']
+  },
+  output: {
+    path: path.resolve(process.cwd(), './lib'),
+    publicPath: '/dist/',
+    filename: 'index.js',
+    chunkFilename: '[id].js',
+    libraryTarget: 'umd',
+    libraryExport: 'default',
+    library: 'ELEMENT',
+    umdNamedDefine: true,
+    globalObject: 'typeof self !== \'undefined\' ? self : this'
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: config.alias
+  },
+  externals: {
+    vue: config.vue
+  },
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          output: {
+            comments: false
+          }
+        }
+      })
+    ]
+  },
+  performance: {
+    hints: false
+  },
+  stats: {
+    children: false
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(jsx?|babel|es6)$/,
+        include: process.cwd(),
+        exclude: config.jsexclude,
+        loader: 'babel-loader'
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          compilerOptions: {
+            preserveWhitespace: false
+          }
+        }
+      }
+    ]
+  },
+  plugins: [
+    new ProgressBarPlugin(),
+    new VueLoaderPlugin()
+  ]
+};
--- a/build/webpack.demo.js
+++ b/build/webpack.demo.js
@ -0,0 +1,163 @@
+const path = require('path');
+const webpack = require('webpack');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+
+const config = require('./config');
+
+const isProd = process.env.NODE_ENV === 'production';
+const isPlay = !!process.env.PLAY_ENV;
+
+const webpackConfig = {
+  mode: process.env.NODE_ENV,
+  entry: isProd ? {
+    docs: './examples/entry.js'
+  } : (isPlay ? './examples/play.js' : './examples/entry.js'),
+  output: {
+    path: path.resolve(process.cwd(), './examples/element-ui/'),
+    publicPath: process.env.CI_ENV || '',
+    filename: '[name].[hash:7].js',
+    chunkFilename: isProd ? '[name].[hash:7].js' : '[name].js'
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: config.alias,
+    modules: ['node_modules']
+  },
+  devServer: {
+    host: '0.0.0.0',
+    port: 8085,
+    publicPath: '/',
+    hot: true
+  },
+  performance: {
+    hints: false
+  },
+  stats: {
+    children: false
+  },
+  module: {
+    rules: [
+      {
+        enforce: 'pre',
+        test: /\.(vue|jsx?)$/,
+        exclude: /node_modules/,
+        loader: 'eslint-loader'
+      },
+      {
+        test: /\.(jsx?|babel|es6)$/,
+        include: process.cwd(),
+        exclude: config.jsexclude,
+        loader: 'babel-loader'
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          compilerOptions: {
+            preserveWhitespace: false
+          }
+        }
+      },
+      {
+        test: /\.(scss|css)$/,
+        use: [
+          isProd ? MiniCssExtractPlugin.loader : 'style-loader',
+          'css-loader',
+          'sass-loader'
+        ]
+      },
+      {
+        test: /\.md$/,
+        use: [
+          {
+            loader: 'vue-loader',
+            options: {
+              compilerOptions: {
+                preserveWhitespace: false
+              }
+            }
+          },
+          {
+            loader: path.resolve(__dirname, './md-loader/index.js')
+          }
+        ]
+      },
+      {
+        test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
+        loader: 'url-loader',
+        // todo: 这种写法有待调整
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new HtmlWebpackPlugin({
+      template: './examples/index.tpl',
+      filename: './index.html',
+      favicon: './examples/favicon.ico'
+    }),
+    new CopyWebpackPlugin([
+      { from: 'examples/versions.json' }
+    ]),
+    new ProgressBarPlugin(),
+    new VueLoaderPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.FAAS_ENV': JSON.stringify(process.env.FAAS_ENV)
+    }),
+    new webpack.LoaderOptionsPlugin({
+      vue: {
+        compilerOptions: {
+          preserveWhitespace: false
+        }
+      }
+    })
+  ],
+  optimization: {
+    minimizer: []
+  },
+  devtool: '#eval-source-map'
+};
+
+if (isProd) {
+  webpackConfig.externals = {
+    vue: 'Vue',
+    'vue-router': 'VueRouter',
+    'highlight.js': 'hljs'
+  };
+  webpackConfig.plugins.push(
+    new MiniCssExtractPlugin({
+      filename: '[name].[contenthash:7].css'
+    })
+  );
+  webpackConfig.optimization.minimizer.push(
+    new UglifyJsPlugin({
+      cache: true,
+      parallel: true,
+      sourceMap: false
+    }),
+    new OptimizeCSSAssetsPlugin({})
+  );
+  // https://webpack.js.org/configuration/optimization/#optimizationsplitchunks
+  webpackConfig.optimization.splitChunks = {
+    cacheGroups: {
+      vendor: {
+        test: /\/src\//,
+        name: 'element-ui',
+        chunks: 'all'
+      }
+    }
+  };
+  webpackConfig.devtool = false;
+}
+
+module.exports = webpackConfig;
--- a/build/webpack.extension.js
+++ b/build/webpack.extension.js
@ -0,0 +1,33 @@
+const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const demoConfig = require('./webpack.demo');
+const webpack = require('webpack');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+
+demoConfig.entry = {
+  background: path.join(process.cwd(), './examples/extension/src/background'),
+  entry: path.join(process.cwd(), './examples/extension/src/entry')
+};
+demoConfig.output = {
+  path: path.join(process.cwd(), './examples/extension/dist'),
+  filename: '[name].js'
+};
+demoConfig.plugins = [
+  new CopyWebpackPlugin([
+    { from: 'examples/extension/src/manifest.json' },
+    { from: 'examples/extension/src/icon.png' }
+  ]),
+  new VueLoaderPlugin(),
+  new ProgressBarPlugin(),
+  new webpack.LoaderOptionsPlugin({
+    vue: {
+      compilerOptions: {
+        preserveWhitespace: false
+      }
+    }
+  }),
+  new webpack.HotModuleReplacementPlugin()
+];
+demoConfig.module.rules.find(a => a.loader === 'url-loader').query = {};
+module.exports = demoConfig;
--- a/build/webpack.test.js
+++ b/build/webpack.test.js
@ -0,0 +1,67 @@
+const path = require('path');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+
+const config = require('./config');
+
+const webpackConfig = {
+  mode: 'development',
+  entry: {
+    app: ['./src/index.js']
+  },
+  output: {
+    path: path.resolve(process.cwd(), './dist'),
+    publicPath: '/dist/',
+    filename: '[name].js',
+    chunkFilename: '[id].js'
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: Object.assign(config.alias, {
+      'vue$': 'vue/dist/vue.common.js'
+    }),
+    modules: ['node_modules']
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(jsx?|babel|es6)$/,
+        include: process.cwd(),
+        exclude: config.jsexclude,
+        loader: 'babel-loader'
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          compilerOptions: {
+            preserveWhitespace: false
+          }
+        }
+      },
+      {
+        test: /\.css$/,
+        loaders: ['style-loader', 'css-loader']
+      },
+      {
+        test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  plugins: [
+    new VueLoaderPlugin()
+  ]
+};
+
+if (!process.env.CI_ENV) {
+  webpackConfig.plugins.push(
+    new ProgressBarPlugin()
+  );
+}
+
+module.exports = webpackConfig;
--- a/components.json
+++ b/components.json
@ -0,0 +1,84 @@
+{
+  "pagination": "./packages/pagination/index.js",
+  "dialog": "./packages/dialog/index.js",
+  "autocomplete": "./packages/autocomplete/index.js",
+  "dropdown": "./packages/dropdown/index.js",
+  "dropdown-menu": "./packages/dropdown-menu/index.js",
+  "dropdown-item": "./packages/dropdown-item/index.js",
+  "menu": "./packages/menu/index.js",
+  "submenu": "./packages/submenu/index.js",
+  "menu-item": "./packages/menu-item/index.js",
+  "menu-item-group": "./packages/menu-item-group/index.js",
+  "input": "./packages/input/index.js",
+  "input-number": "./packages/input-number/index.js",
+  "radio": "./packages/radio/index.js",
+  "radio-group": "./packages/radio-group/index.js",
+  "radio-button": "./packages/radio-button/index.js",
+  "checkbox": "./packages/checkbox/index.js",
+  "checkbox-button": "./packages/checkbox-button/index.js",
+  "checkbox-group": "./packages/checkbox-group/index.js",
+  "switch": "./packages/switch/index.js",
+  "select": "./packages/select/index.js",
+  "option": "./packages/option/index.js",
+  "option-group": "./packages/option-group/index.js",
+  "button": "./packages/button/index.js",
+  "button-group": "./packages/button-group/index.js",
+  "table": "./packages/table/index.js",
+  "table-column": "./packages/table-column/index.js",
+  "date-picker": "./packages/date-picker/index.js",
+  "time-select": "./packages/time-select/index.js",
+  "time-picker": "./packages/time-picker/index.js",
+  "popover": "./packages/popover/index.js",
+  "tooltip": "./packages/tooltip/index.js",
+  "message-box": "./packages/message-box/index.js",
+  "breadcrumb": "./packages/breadcrumb/index.js",
+  "breadcrumb-item": "./packages/breadcrumb-item/index.js",
+  "form": "./packages/form/index.js",
+  "form-item": "./packages/form-item/index.js",
+  "tabs": "./packages/tabs/index.js",
+  "tab-pane": "./packages/tab-pane/index.js",
+  "tag": "./packages/tag/index.js",
+  "tree": "./packages/tree/index.js",
+  "alert": "./packages/alert/index.js",
+  "notification": "./packages/notification/index.js",
+  "slider": "./packages/slider/index.js",
+  "loading": "./packages/loading/index.js",
+  "icon": "./packages/icon/index.js",
+  "row": "./packages/row/index.js",
+  "col": "./packages/col/index.js",
+  "upload": "./packages/upload/index.js",
+  "progress": "./packages/progress/index.js",
+  "spinner": "./packages/spinner/index.js",
+  "message": "./packages/message/index.js",
+  "badge": "./packages/badge/index.js",
+  "card": "./packages/card/index.js",
+  "rate": "./packages/rate/index.js",
+  "steps": "./packages/steps/index.js",
+  "step": "./packages/step/index.js",
+  "carousel": "./packages/carousel/index.js",
+  "scrollbar": "./packages/scrollbar/index.js",
+  "carousel-item": "./packages/carousel-item/index.js",
+  "collapse": "./packages/collapse/index.js",
+  "collapse-item": "./packages/collapse-item/index.js",
+  "cascader": "./packages/cascader/index.js",
+  "color-picker": "./packages/color-picker/index.js",
+  "transfer": "./packages/transfer/index.js",
+  "container": "./packages/container/index.js",
+  "header": "./packages/header/index.js",
+  "aside": "./packages/aside/index.js",
+  "main": "./packages/main/index.js",
+  "footer": "./packages/footer/index.js",
+  "timeline": "./packages/timeline/index.js",
+  "timeline-item": "./packages/timeline-item/index.js",
+  "link": "./packages/link/index.js",
+  "divider": "./packages/divider/index.js",
+  "image": "./packages/image/index.js",
+  "calendar": "./packages/calendar/index.js",
+  "backtop": "./packages/backtop/index.js",
+  "infinite-scroll": "./packages/infinite-scroll/index.js",
+  "page-header": "./packages/page-header/index.js",
+  "cascader-panel": "./packages/cascader-panel/index.js",
+  "avatar": "./packages/avatar/index.js",
+  "drawer": "./packages/drawer/index.js",
+  "popconfirm": "./packages/popconfirm/index.js"
+}
--- a/element_logo.svg
+++ b/element_logo.svg
--- a/examples/app.vue
+++ b/examples/app.vue
@ -0,0 +1,85 @@
+<template>
+  <div id="app" :class="{ 'is-component': isComponent }">
+    <main-header v-if="lang !== 'play'"></main-header>
+    <div class="main-cnt">
+      <router-view></router-view>
+    </div>
+    <main-footer v-if="lang !== 'play' && !isComponent"></main-footer>
+  </div>
+</template>
+
+<script>
+  import { use } from 'main/locale';
+  import zhLocale from 'main/locale/lang/zh-CN';
+  import enLocale from 'main/locale/lang/en';
+  import esLocale from 'main/locale/lang/es';
+  import frLocale from 'main/locale/lang/fr';
+
+  const lang = location.hash.replace('#', '').split('/')[1] || 'zh-CN';
+  const localize = lang => {
+    switch (lang) {
+      case 'zh-CN':
+        use(zhLocale);
+        break;
+      case 'es':
+        use(esLocale);
+        break;
+      case 'fr-FR':
+        use(frLocale);
+        break;
+      default:
+        use(enLocale);
+    }
+  };
+  localize(lang);
+
+  export default {
+    name: 'app',
+
+    computed: {
+      lang() {
+        return this.$route.path.split('/')[1] || 'zh-CN';
+      },
+      isComponent() {
+        return /^component-/.test(this.$route.name || '');
+      }
+    },
+
+    watch: {
+      lang(val) {
+        if (val === 'zh-CN') {
+          this.suggestJump();
+        }
+        localize(val);
+      }
+    },
+
+    methods: {
+      suggestJump() {
+        if (process.env.NODE_ENV !== 'production') return;
+
+        const href = location.href;
+        const preferGithub = localStorage.getItem('PREFER_GITHUB');
+        const cnHref = href.indexOf('eleme.cn') > -1 || href.indexOf('element-cn') > -1 || href.indexOf('element.faas') > -1;
+        if (cnHref || preferGithub) return;
+        setTimeout(() => {
+          if (this.lang !== 'zh-CN') return;
+          this.$confirm('建议大陆用户访问部署在国内的站点，是否跳转？', '提示')
+            .then(() => {
+              location.replace('https://element.eleme.cn');
+            })
+            .catch(() => {
+              localStorage.setItem('PREFER_GITHUB', 'true');
+            });
+        }, 1000);
+      }
+    },
+
+    mounted() {
+      localize(this.lang);
+      if (this.lang === 'zh-CN') {
+        this.suggestJump();
+      }
+    }
+  };
+</script>
--- a/examples/assets/images/Axure-Components.svg
+++ b/examples/assets/images/Axure-Components.svg
@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="110px" height="87px" viewBox="0 0 110 87" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #FFFFFF;">
+    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>Axure Components_icon</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Axure-Components_icon">
+            <g id="sitemap">
+                <g id="Group">
+                    <path d="M87.2413867,49.517832 L56.8966406,49.517832 L56.8966406,41.9316992 L53.1035742,41.9316992 L53.1035742,49.517832 L22.7586133,49.517832 C21.71125,49.517832 20.8619727,50.3671094 20.8619727,51.4144727 L20.8619727,60.8972461 L24.6550391,60.8972461 L24.6550391,53.3111133 L53.1033594,53.3111133 L53.1033594,60.8972461 L56.8964258,60.8972461 L56.8964258,53.3111133 L85.3447461,53.3111133 L85.3447461,60.8972461 L89.1378125,60.8972461 L89.1378125,51.4142578 C89.1380273,50.3668945 88.28875,49.517832 87.2413867,49.517832 L87.2413867,49.517832 Z" id="Shape" fill="#DEEBFD"></path>
+                    <path d="M104.310293,0 L5.68970703,0 C2.54740234,0 0,2.54014599 0,5.673764 L0,81.3260218 C0,84.4596398 2.54740234,87 5.68970703,87 L104.310293,87 C107.452598,87 110,84.4596398 110,81.3260218 L110,5.673764 C110,2.54014599 107.452598,0 104.310293,0 L104.310293,0 Z M106.206934,81.5516797 C106.206934,82.599043 105.357656,83.4483203 104.310293,83.4483203 L5.68970703,83.4483203 C4.64234375,83.4483203 3.79306641,82.599043 3.79306641,81.5516797 L3.79306641,13.2758398 C3.79306641,12.2284766 4.64234375,11.3791992 5.68970703,11.3791992 L104.310293,11.3791992 C105.357656,11.3791992 106.206934,12.2284766 106.206934,13.2758398 L106.206934,81.5516797 L106.206934,81.5516797 Z" id="Shape" fill="#F2F8FE"></path>
+                </g>
+                <circle id="Oval" fill="#DDEAFC" cx="5.68970703" cy="5.89703125" r="1.89664062"></circle>
+                <circle id="Oval" fill="#DDEAFC" cx="11.3794141" cy="5.89703125" r="1.89664062"></circle>
+                <circle id="Oval" fill="#DDEAFC" cx="17.0689062" cy="5.89703125" r="1.89664062"></circle>
+                <path d="M34.2899219,43.828125 C33.1585547,43.828125 32.2413867,42.910957 32.2413867,41.7795898 L32.2413867,19.3249805 C32.2413867,18.1936133 33.1585547,17.2764453 34.2899219,17.2764453 L75.7100781,17.2764453 C76.8414453,17.2764453 77.7586133,18.1936133 77.7586133,19.3249805 L77.7586133,41.7795898 C77.7586133,42.910957 76.8414453,43.828125 75.7100781,43.828125 L34.2899219,43.828125 Z" id="Shape" fill="#20A0FF"></path>
+                <path d="M66.9534766,77.9661523 L43.0465234,77.9661523 C42.3162695,77.9661523 41.7241602,77.3742578 41.7241602,76.6437891 L41.7241602,60.3227539 C41.7241602,59.5922852 42.3160547,59.0003906 43.0465234,59.0003906 L66.9536914,59.0003906 C67.6841602,59.0003906 68.2760547,59.5922852 68.2760547,60.3227539 L68.2760547,76.6437891 C68.2758398,77.374043 67.6839453,77.9661523 66.9534766,77.9661523 L66.9534766,77.9661523 Z" id="Shape" fill="#FFD6D2"></path>
+                <g id="Group" transform="translate(35.878906, 21.054688)" fill="#2198F0">
+                    <path d="M36.19,11.3940234 L2.0521875,11.3940234 C1.00482422,11.3940234 0.155546875,10.5447461 0.155546875,9.49738281 L0.155546875,9.49738281 C0.155546875,8.45001953 1.00482422,7.60074219 2.0521875,7.60074219 L36.1902148,7.60074219 C37.2375781,7.60074219 38.0868555,8.45001953 38.0868555,9.49738281 L38.0868555,9.49738281 C38.0866406,10.5449609 37.2373633,11.3940234 36.19,11.3940234 L36.19,11.3940234 Z" id="Shape"></path>
+                    <path d="M32.3969336,3.80789063 L5.84525391,3.80789063 C4.79789062,3.80789063 3.94861328,2.95861328 3.94861328,1.91125 L3.94861328,1.91125 C3.94861328,0.863886719 4.79789062,0.014609375 5.84525391,0.014609375 L32.3969336,0.014609375 C33.4442969,0.014609375 34.2935742,0.863886719 34.2935742,1.91125 L34.2935742,1.91125 C34.2935742,2.95882813 33.4442969,3.80789063 32.3969336,3.80789063 L32.3969336,3.80789063 Z" id="Shape"></path>
+                    <path d="M24.8108008,18.9803711 L13.4313867,18.9803711 C12.3840234,18.9803711 11.5347461,18.1310938 11.5347461,17.0837305 L11.5347461,17.0837305 C11.5347461,16.0363672 12.3840234,15.1870898 13.4313867,15.1870898 L24.8108008,15.1870898 C25.8581641,15.1870898 26.7074414,16.0363672 26.7074414,17.0837305 L26.7074414,17.0837305 C26.7072266,18.1310938 25.8581641,18.9803711 24.8108008,18.9803711 L24.8108008,18.9803711 Z" id="Shape"></path>
+                </g>
+                <g id="Group" transform="translate(45.332031, 62.734375)" fill="#FFACAD">
+                    <path d="M13.4610352,11.4384961 L5.87490234,11.4384961 C4.82753906,11.4384961 3.97826172,10.5892188 3.97826172,9.54185547 L3.97826172,9.54185547 C3.97826172,8.49449219 4.82753906,7.64521484 5.87490234,7.64521484 L13.4610352,7.64521484 C14.5083984,7.64521484 15.3576758,8.49449219 15.3576758,9.54185547 L15.3576758,9.54185547 C15.3576758,10.5894336 14.5083984,11.4384961 13.4610352,11.4384961 L13.4610352,11.4384961 Z" id="Shape"></path>
+                    <path d="M17.2541016,3.85236328 L2.08183594,3.85236328 C1.03447266,3.85236328 0.185195313,3.00308594 0.185195313,1.95572266 L0.185195313,1.95572266 C0.185195313,0.908359375 1.03447266,0.0590820312 2.08183594,0.0590820312 L17.2543164,0.0590820312 C18.3016797,0.0590820312 19.150957,0.908359375 19.150957,1.95572266 L19.150957,1.95572266 C19.1507422,3.00308594 18.3014648,3.85236328 17.2541016,3.85236328 L17.2541016,3.85236328 Z" id="Shape"></path>
+                </g>
+                <path d="M99.1948633,77.9661523 L75.2879102,77.9661523 C74.5574414,77.9661523 73.9655469,77.3742578 73.9655469,76.6437891 L73.9655469,60.3227539 C73.9655469,59.5922852 74.5574414,59.0003906 75.2879102,59.0003906 L99.1950781,59.0003906 C99.9255469,59.0003906 100.517441,59.5922852 100.517441,60.3227539 L100.517441,76.6437891 C100.517227,77.374043 99.925332,77.9661523 99.1948633,77.9661523 L99.1948633,77.9661523 Z" id="Shape" fill="#F2F8FE"></path>
+                <g id="Group" transform="translate(77.558594, 62.734375)" fill="#DEEBF8">
+                    <path d="M13.4758594,11.4384961 L5.88972656,11.4384961 C4.84236328,11.4384961 3.99308594,10.5892188 3.99308594,9.54185547 L3.99308594,9.54185547 C3.99308594,8.49449219 4.84236328,7.64521484 5.88972656,7.64521484 L13.4758594,7.64521484 C14.5232227,7.64521484 15.3725,8.49449219 15.3725,9.54185547 L15.3725,9.54185547 C15.3725,10.5894336 14.5232227,11.4384961 13.4758594,11.4384961 L13.4758594,11.4384961 Z" id="Shape"></path>
+                    <path d="M17.2689258,3.85236328 L2.09644531,3.85236328 C1.04908203,3.85236328 0.199804688,3.00308594 0.199804688,1.95572266 L0.199804688,1.95572266 C0.199804688,0.908359375 1.04908203,0.0590820312 2.09644531,0.0590820312 L17.2689258,0.0590820312 C18.3162891,0.0590820312 19.1655664,0.908359375 19.1655664,1.95572266 L19.1655664,1.95572266 C19.1655664,3.00308594 18.3162891,3.85236328 17.2689258,3.85236328 L17.2689258,3.85236328 Z" id="Shape"></path>
+                </g>
+                <path d="M34.7120898,77.9661523 L10.8051367,77.9661523 C10.0748828,77.9661523 9.48277344,77.3742578 9.48277344,76.6437891 L9.48277344,60.3227539 C9.48277344,59.5922852 10.074668,59.0003906 10.8051367,59.0003906 L34.7123047,59.0003906 C35.4425586,59.0003906 36.034668,59.5922852 36.034668,60.3227539 L36.034668,76.6437891 C36.0344531,77.374043 35.4425586,77.9661523 34.7120898,77.9661523 L34.7120898,77.9661523 Z" id="Shape" fill="#80A8E1"></path>
+                <g id="Group" transform="translate(13.105469, 62.734375)" fill="#6496DC">
+                    <path d="M13.4462109,11.4384961 L5.86007813,11.4384961 C4.81271484,11.4384961 3.9634375,10.5892188 3.9634375,9.54185547 L3.9634375,9.54185547 C3.9634375,8.49449219 4.81271484,7.64521484 5.86007813,7.64521484 L13.4462109,7.64521484 C14.4935742,7.64521484 15.3428516,8.49449219 15.3428516,9.54185547 L15.3428516,9.54185547 C15.3428516,10.5894336 14.4935742,11.4384961 13.4462109,11.4384961 L13.4462109,11.4384961 Z" id="Shape"></path>
+                    <path d="M17.2392773,3.85236328 L2.06701172,3.85236328 C1.01964844,3.85236328 0.170371094,3.00308594 0.170371094,1.95572266 L0.170371094,1.95572266 C0.170371094,0.908359375 1.01964844,0.0590820312 2.06701172,0.0590820312 L17.2394922,0.0590820312 C18.2868555,0.0590820312 19.1361328,0.908359375 19.1361328,1.95572266 L19.1361328,1.95572266 C19.135918,3.00308594 18.2866406,3.85236328 17.2392773,3.85236328 L17.2392773,3.85236328 Z" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/examples/assets/images/Module.svg
+++ b/examples/assets/images/Module.svg
@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="81px" height="77px" viewBox="0 0 81 77" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>Module_icon</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="6" y="57" width="11" height="11" rx="5.5"></rect>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0.466666667   0 0 0 0 0.807843137  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <rect id="path-3" x="6" y="57" width="11" height="11" rx="5.5"></rect>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.392156863   0 0 0 0 0.588235294   0 0 0 0 0.862745098  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <rect id="path-5" x="6" y="57" width="11" height="11" rx="5.5"></rect>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-6">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 0.674509804   0 0 0 0 0.678431373  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Module_icon">
+            <g id="Group-5">
+                <g id="folder-3">
+                    <g id="Group">
+                        <rect id="Rectangle-path" fill="#DEEBF8" x="0" y="54" width="23" height="23"></rect>
+                        <rect id="Rectangle-path" fill="#F2F8FE" x="0" y="0" width="23" height="54"></rect>
+                        <rect id="Rectangle" fill="#DEEBF9" x="7" y="6" width="9" height="30" rx="3"></rect>
+                        <g id="Rectangle-path">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                            <use fill="#20A0FF" fill-rule="evenodd" xlink:href="#path-1"></use>
+                        </g>
+                    </g>
+                </g>
+                <g id="folder-3-copy" transform="translate(29.000000, 0.000000)">
+                    <g id="Group">
+                        <rect id="Rectangle-path" fill="#DEEBF8" x="0" y="54" width="23" height="23"></rect>
+                        <rect id="Rectangle-path" fill="#F2F8FE" x="0" y="0" width="23" height="54"></rect>
+                        <rect id="Rectangle" fill="#DEEBF9" x="7" y="6" width="9" height="30" rx="3"></rect>
+                        <g id="Rectangle-path">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                            <use fill="#80A8E1" fill-rule="evenodd" xlink:href="#path-3"></use>
+                        </g>
+                    </g>
+                </g>
+                <g id="folder-3-copy" transform="translate(58.000000, 0.000000)">
+                    <g id="Group">
+                        <rect id="Rectangle-path" fill="#DEEBF8" x="0" y="54" width="23" height="23"></rect>
+                        <rect id="Rectangle-path" fill="#F2F8FE" x="0" y="0" width="23" height="54"></rect>
+                        <rect id="Rectangle" fill="#DEEBF9" x="7" y="6" width="9" height="30" rx="3"></rect>
+                        <g id="Rectangle-path">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
+                            <use fill="#FFD6D2" fill-rule="evenodd" xlink:href="#path-5"></use>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/examples/assets/images/Sketch-Template.svg
+++ b/examples/assets/images/Sketch-Template.svg
@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="88px" height="77px" viewBox="0 0 88 77" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>Sketch Template_icon</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Sketch-Template_icon">
+            <g id="Group-25">
+                <g id="browser">
+                    <g id="Group" transform="translate(0.042735, 6.772269)" fill="#C9E1FB" opacity="0.23880597">
+                        <path d="M3.20088476,28.5057337 L44.1701391,28.5057337 C45.9105265,28.5057337 47.3217575,27.1026312 47.3217575,25.3722682 L47.3217575,0.305608725 C47.3217575,2.03597172 45.9105265,3.43907426 44.1701391,3.43907426 L3.20088476,3.43907426 C1.46049739,3.43907426 0.0492663503,2.03597172 0.0492663503,0.305608725 L0.0492663503,25.3722682 C0.0492663503,27.1029861 1.46014038,28.5057337 3.20088476,28.5057337 L3.20088476,28.5057337 Z" id="Shape"></path>
+                        <path d="M59.9271601,28.5057337 L78.8361566,28.5057337 C80.576544,28.5057337 81.987775,27.1026312 81.987775,25.3722682 L81.987775,0.305608725 C81.987775,2.03597172 80.576544,3.43907426 78.8361566,3.43907426 L59.9271601,3.43907426 C58.1867728,3.43907426 56.7755417,2.03597172 56.7755417,0.305608725 L56.7755417,25.3722682 C56.7755417,27.1029861 58.1867728,28.5057337 59.9271601,28.5057337 L59.9271601,28.5057337 Z" id="Shape"></path>
+                    </g>
+                    <path d="M3.24361929,10.2116986 L44.2128736,10.2116986 C45.953261,10.2116986 47.364492,8.80859603 47.364492,7.07823304 L47.364492,3.94476751 C47.364492,2.21440451 45.953261,0.811301969 44.2128736,0.811301969 L3.24361929,0.811301969 C1.50323191,0.811301969 0.0920008764,2.21440451 0.0920008764,3.94476751 L0.0920008764,7.07823304 C0.0920008764,8.80859603 1.50287491,10.2116986 3.24361929,10.2116986 L3.24361929,10.2116986 Z" id="Shape" fill="#FFD6D2"></path>
+                    <path d="M59.9698947,10.2116986 L78.8788911,10.2116986 C80.6192785,10.2116986 82.0305096,8.80859603 82.0305096,7.07823304 L82.0305096,3.94476751 C82.0305096,2.21440451 80.6192785,0.811301969 78.8788911,0.811301969 L59.9698947,0.811301969 C58.2295073,0.811301969 56.8182763,2.21440451 56.8182763,3.94476751 L56.8182763,7.07823304 C56.8182763,8.80859603 58.2295073,10.2116986 59.9698947,10.2116986 L59.9698947,10.2116986 Z" id="Shape" fill="#20A0FF"></path>
+                    <g id="Group" transform="translate(6.111778, 44.396572)" fill="#C9E1FB" opacity="0.23880597">
+                        <path d="M3.63949659,28.4815974 C3.63949659,30.2119604 2.13657137,31.6150629 0.283103013,31.6150629 L62.5667088,31.6150629 C64.4201772,31.6150629 65.9231024,30.2119604 65.9231024,28.4815974 L65.9231024,3.41493792 C65.9231024,1.68457492 64.4201772,0.28147238 62.5667088,0.28147238 L0.283103013,0.28147238 C2.13657137,0.28147238 3.63949659,1.68457492 3.63949659,3.41493792 L3.63949659,28.4815974 Z" id="Shape"></path>
+                    </g>
+                    <path d="M3.24361929,76.0112803 L6.3952377,76.0112803 C8.13562508,76.0112803 9.54685611,74.6081778 9.54685611,72.8778148 L9.54685611,47.8111553 C9.54685611,46.265021 8.42013066,44.9801712 6.93862628,44.7241059 C6.76209851,44.6935946 6.58053368,44.6776898 6.3952377,44.6776898 L3.24361929,44.6776898 C1.50323191,44.6776898 0.0920008764,46.0807923 0.0920008764,47.8111553 L0.0920008764,72.8778148 C0.0920008764,74.6081778 1.50287491,76.0112803 3.24361929,76.0112803 L3.24361929,76.0112803 Z" id="Shape" fill="#20A0FF"></path>
+                </g>
+                <g id="diamond" transform="translate(53.000000, 45.000000)">
+                    <polygon id="Shape" fill="#AFC8EB" points="24.1753264 8.86069795 17.1851852 28.8357025 34.3703704 8.86069795"></polygon>
+                    <g id="Group">
+                        <polygon id="Shape" fill="#80A8E1" points="7.1111088 0.0481841797 0 8.86069795 10.195044 8.86069795"></polygon>
+                        <polygon id="Shape" fill="#80A8E1" points="24.1753264 8.86069795 34.3703704 8.86069795 27.2592616 0.0481841797"></polygon>
+                        <polygon id="Shape" fill="#AFC8EA" points="24.1753264 8.86069795 17.1851852 0.0481841797 10.195044 8.86069795"></polygon>
+                    </g>
+                    <polygon id="Shape" fill="#6496DC" points="17.1851852 0.0481841797 7.1111088 0.0481841797 10.195044 8.86069795"></polygon>
+                    <polygon id="Shape" fill="#93B8EE" points="27.2592616 0.0481841797 17.1851852 0.0481841797 24.1753264 8.86069795"></polygon>
+                    <polygon id="Shape" fill="#80A8E1" points="10.195044 8.86069795 17.1851852 28.8357025 24.1753264 8.86069795"></polygon>
+                    <polygon id="Shape" fill="#6496DC" points="0 8.86069795 17.1851852 28.8357025 10.195044 8.86069795"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/examples/assets/images/button-d-cn.png
+++ b/examples/assets/images/button-d-cn.png
--- a/examples/assets/images/button-d-en.png
+++ b/examples/assets/images/button-d-en.png
--- a/examples/assets/images/button-l-cn.png
+++ b/examples/assets/images/button-l-cn.png
--- a/examples/assets/images/button-l-en.png
+++ b/examples/assets/images/button-l-en.png
--- a/examples/assets/images/cloud-1.png
+++ b/examples/assets/images/cloud-1.png
--- a/examples/assets/images/cloud-2.png
+++ b/examples/assets/images/cloud-2.png
--- a/examples/assets/images/compo-1.png
+++ b/examples/assets/images/compo-1.png
--- a/examples/assets/images/compo-2.png
+++ b/examples/assets/images/compo-2.png
--- a/examples/assets/images/compo-3.png
+++ b/examples/assets/images/compo-3.png
--- a/examples/assets/images/component.png
+++ b/examples/assets/images/component.png
--- a/examples/assets/images/consistency.png
+++ b/examples/assets/images/consistency.png
--- a/examples/assets/images/controllability.png
+++ b/examples/assets/images/controllability.png
--- a/examples/assets/images/dialog-close.png
+++ b/examples/assets/images/dialog-close.png
--- a/examples/assets/images/efficiency.png
+++ b/examples/assets/images/efficiency.png
--- a/examples/assets/images/element-demo.jpeg
+++ b/examples/assets/images/element-demo.jpeg
--- a/examples/assets/images/element-logo-small.svg
+++ b/examples/assets/images/element-logo-small.svg
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="30px" height="30px" viewBox="0 0 38 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 40 (33762) - http://www.bohemiancoding.com/sketch -->
+    <title>Shape Copy</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="v2.2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="首页-默认效果-copy-2" transform="translate(-70.000000, -19.000000)" fill="#409EFF">
+            <path d="M212.135441,45.1578077 Z M103.416502,46.2175511 C103.407008,47.7945682 102.587841,48.1463474 102.587841,48.1463474 C102.587841,48.1463474 88.4520478,56.3145087 87.5329956,56.8262751 C86.622336,57.2171561 86.0136703,56.8262751 86.0136703,56.8262751 C86.0136703,56.8262751 71.2225706,48.2479572 70.6826962,47.8708444 C70.1426843,47.4937316 70.1301643,46.9063774 70.1301643,46.9063774 C70.1301643,46.9063774 70.1450232,29.9199174 70.1301643,29.1333364 C70.1153053,28.3466177 71.0969576,27.7555461 71.0969576,27.7555461 L85.8755373,19.2134387 C86.7853714,18.7332016 87.6711286,19.2134387 87.6711286,19.2134387 C87.6711286,19.2134387 100.726623,26.8020937 102.173442,27.6177257 C103.591507,28.2919577 103.416502,29.6843424 103.416502,29.6843424 C103.416502,29.6843424 103.425307,44.7519192 103.416502,46.2175511 L103.416502,46.2175511 Z M97.5160105,29.1691339 C94.4900173,27.4274483 87.3615842,23.2971063 87.3615842,23.2971063 C87.3615842,23.2971063 86.6661039,22.9212326 85.9517747,23.2971063 L74.3487406,29.98215 C74.3487406,29.98215 73.5780025,30.4449014 73.589697,31.0604805 C73.6013915,31.6760597 73.589697,44.9698708 73.589697,44.9698708 C73.589697,44.9698708 73.5994654,45.4295932 74.0234951,45.7246472 C74.4473873,46.0197011 86.0601898,52.7332451 86.0601898,52.7332451 C86.0601898,52.7332451 86.538152,53.0391759 87.2530315,52.7332451 C87.9746526,52.3327262 99.0730335,45.9402582 99.0730335,45.9402582 C99.0730335,45.9402582 99.7162325,45.6648929 99.7236619,44.4307056 C99.7257257,44.0747959 99.7265512,42.6932881 99.7266887,40.9575229 L86.6600502,48.8752394 L86.6600502,45.846221 C86.6600502,44.6021205 87.6231289,43.7809811 87.6231289,43.7809811 L99.1807607,36.8165793 C99.6168978,36.3611251 99.7068768,35.6315447 99.7254505,35.3556287 C99.7250378,34.0904627 99.7244874,32.9852841 99.7240747,32.2851678 L86.6600502,40.2012321 L86.6600502,37.034531 C86.6600502,35.7904305 87.4855462,35.2446564 87.4855462,35.2446564 L97.5160105,29.1691339 Z" id="Shape-Copy"></path>
+        </g>
+    </g>
+</svg>
--- a/examples/assets/images/element-logo.svg
+++ b/examples/assets/images/element-logo.svg
--- a/examples/assets/images/feedback.png
+++ b/examples/assets/images/feedback.png
--- a/examples/assets/images/figure-1.png
+++ b/examples/assets/images/figure-1.png
--- a/examples/assets/images/figure-2.png
+++ b/examples/assets/images/figure-2.png
--- a/examples/assets/images/guide.png
+++ b/examples/assets/images/guide.png
--- a/examples/assets/images/hamburger.png
+++ b/examples/assets/images/hamburger.png
--- a/examples/assets/images/icon-check.png
+++ b/examples/assets/images/icon-check.png
--- a/examples/assets/images/icon-copy.png
+++ b/examples/assets/images/icon-copy.png
--- a/examples/assets/images/icon-download.png
+++ b/examples/assets/images/icon-download.png
--- a/examples/assets/images/icon-edit.png
+++ b/examples/assets/images/icon-edit.png
--- a/examples/assets/images/icon-redo.svg
+++ b/examples/assets/images/icon-redo.svg
@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13px" height="12px" viewBox="0 0 13 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
+    <title>icon-redo</title>
+    <desc>Created with Sketch.</desc>
+    <g id="theme" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="element-theme-editor" transform="translate(-1118.000000, -167.000000)" fill="#606266" fill-rule="nonzero">
+            <g id="custom" transform="translate(1060.000000, 146.000000)">
+                <g id="Group-2" transform="translate(30.000000, 15.000000)">
+                    <g id="Group" transform="translate(0.000000, 4.000000)">
+                        <g id="icon-clockwise" transform="translate(26.000000, 0.000000)">
+                            <path d="M12.2585,3.59833136 L12.2585,2.3085 L13.2585,2.3085 L13.2585,5.6365 L9.9295,5.6365 L9.9295,4.6365 L11.8833737,4.6365 C10.9510824,3.62012881 9.6272717,3.0179 8.2,3.0179 C5.43814237,3.0179 3.2,5.25604237 3.2,8.0179 C3.2,10.7797576 5.43814237,13.0179 8.2,13.0179 C10.9618576,13.0179 13.2,10.7797576 13.2,8.0179 L14.2,8.0179 C14.2,11.3320424 11.5141424,14.0179 8.2,14.0179 C4.88585763,14.0179 2.2,11.3320424 2.2,8.0179 C2.2,4.70375763 4.88585763,2.0179 8.2,2.0179 C9.73531163,2.0179 11.1716793,2.59926473 12.2585,3.59833136 Z" id="icon-redo"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/examples/assets/images/icon-undo.svg
+++ b/examples/assets/images/icon-undo.svg
@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13px" height="12px" viewBox="0 0 13 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
+    <title>icon-undo</title>
+    <desc>Created with Sketch.</desc>
+    <g id="theme" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="element-theme-editor" transform="translate(-1092.000000, -167.000000)" fill="#606266" fill-rule="nonzero">
+            <g id="custom" transform="translate(1060.000000, 146.000000)">
+                <g id="Group-2" transform="translate(30.000000, 15.000000)">
+                    <g id="Group" transform="translate(0.000000, 4.000000)">
+                        <g id="icon-clockwise">
+                            <path d="M12.2585,3.59833136 L12.2585,2.3085 L13.2585,2.3085 L13.2585,5.6365 L9.9295,5.6365 L9.9295,4.6365 L11.8833737,4.6365 C10.9510824,3.62012881 9.6272717,3.0179 8.2,3.0179 C5.43814237,3.0179 3.2,5.25604237 3.2,8.0179 C3.2,10.7797576 5.43814237,13.0179 8.2,13.0179 C10.9618576,13.0179 13.2,10.7797576 13.2,8.0179 L14.2,8.0179 C14.2,11.3320424 11.5141424,14.0179 8.2,14.0179 C4.88585763,14.0179 2.2,11.3320424 2.2,8.0179 C2.2,4.70375763 4.88585763,2.0179 8.2,2.0179 C9.73531163,2.0179 11.1716793,2.59926473 12.2585,3.59833136 Z" id="icon-undo" transform="translate(8.200000, 8.017900) scale(-1, 1) translate(-8.200000, -8.017900) "></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/examples/assets/images/icon-upload.svg
+++ b/examples/assets/images/icon-upload.svg
@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="26px" height="26px" viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
+    <title>icon_upload</title>
+    <desc>Created with Sketch.</desc>
+    <g id="theme" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="element-theme" transform="translate(-207.000000, -662.000000)" fill="#909399">
+            <g id="section" transform="translate(70.000000, 511.000000)">
+                <g id="card" transform="translate(0.000000, 60.000000)">
+                    <g id="btn" transform="translate(108.000000, 91.000000)">
+                        <g id="icon-upload" transform="translate(29.000000, 0.000000)">
+                            <path d="M13,-0.000600000001 L3.015,9.9854 L4.429,11.3984 L12,3.8284 L12,20.4854 L14.001,20.4854 L14.001,3.8284 L21.572,11.3984 L22.986,9.9854 L14.415,1.4144 L13,-0.000600000001 Z M13,2.8284 L13.158,2.9844 L12.843,2.9844 L13,2.8284 Z M24.001,19.9854 L24.001,23.9854 L2,23.9854 L2,19.9854 L0,19.9854 L0,25.9854 L26.001,25.9854 L26.001,19.9854 L24.001,19.9854 Z" id="icon_upload"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/examples/assets/images/intro-theme-b.png
+++ b/examples/assets/images/intro-theme-b.png
--- a/examples/assets/images/maximize.svg
+++ b/examples/assets/images/maximize.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#1677ff;}.cls-2{fill:none;}</style></defs><title>最大化</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M0,1V15H16V1ZM15,14H1V4H15Z"/><rect class="cls-2" width="16" height="16"/></g></g></svg>
--- a/examples/assets/images/minimize.svg
+++ b/examples/assets/images/minimize.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;}.cls-2{fill:#1677ff;}</style></defs><title>最小化</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><rect class="cls-1" width="16" height="16"/><path class="cls-2" d="M1,1V15H15V1ZM2.57,14.06,6.44,10.2v2.52h.9V8.66H3.28v.9H5.8L1.94,13.43V1.94H13.43L9.56,5.8V3.28h-.9V7.34h4.06v-.9H10.2l3.86-3.87V14.06Z"/></g></g></svg>
--- a/examples/assets/images/navbar_0.png
+++ b/examples/assets/images/navbar_0.png
--- a/examples/assets/images/navbar_1.png
+++ b/examples/assets/images/navbar_1.png
--- a/examples/assets/images/navbar_2.png
+++ b/examples/assets/images/navbar_2.png
--- a/examples/assets/images/navbar_3.png
+++ b/examples/assets/images/navbar_3.png
--- a/examples/assets/images/plant-1.png
+++ b/examples/assets/images/plant-1.png
--- a/examples/assets/images/plant-2.png
+++ b/examples/assets/images/plant-2.png
--- a/examples/assets/images/qrcode.png
+++ b/examples/assets/images/qrcode.png
--- a/examples/assets/images/resource-placeholder.svg
+++ b/examples/assets/images/resource-placeholder.svg
--- a/examples/assets/images/resource.png
+++ b/examples/assets/images/resource.png
--- a/examples/assets/images/search-by-algolia.svg
+++ b/examples/assets/images/search-by-algolia.svg
--- a/examples/assets/images/term-arial.png
+++ b/examples/assets/images/term-arial.png
--- a/examples/assets/images/term-helvetica.png
+++ b/examples/assets/images/term-helvetica.png
--- a/examples/assets/images/term-hiragino.png
+++ b/examples/assets/images/term-hiragino.png
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#1677ff;}.cls-2{fill:none;}</style></defs><title>最大化</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M0,1V15H16V1ZM15,14H1V4H15Z"/><rect class="cls-2" width="16" height="16"/></g></g></svg>`