Merge branch 'release/v1.3.0'

Former-commit-id: 3a7d299a839145c19b3a2c70d24c608bc35f6b32 [formerly 3a7d299a839145c19b3a2c70d24c608bc35f6b32 [formerly 3a7d299a839145c19b3a2c70d24c608bc35f6b32 [formerly 3a7d299a839145c19b3a2c70d24c608bc35f6b32 [formerly 371ddea3122d5c1d3d6d92a250efe38ee002db9d [formerly 2a498dfb51394b575c272ed6bb061df0580fbcd5]]]]] Former-commit-id: e5150daca3c52f7762de461645359079a72edb22 Former-commit-id: 0410c4f1244de77a9b9e5960a5cc2f7ce9b7a4b4 Former-commit-id: f9552aeea50dc4d75346da24dda6ab1fbe13fd28 [formerly 585a57193089bd1754e42ab6113d027f5b755e1a] Former-commit-id: 5e17dc314f5ac7c533a1ca0f3b0510769b2daca9 Former-commit-id: e77d76265469877b785451abab55cdacbcf8db3c Former-commit-id: 223f5456b752b2880c3431502927e3c8d7038078 Former-commit-id: ca896f8306e3b8543f22568b56decf0f321fd10b Former-commit-id: d5da75df1ef4fa76935a1bce126b56044b1a47f4
2018-08-31 11:28:20 +08:00
parent 103bfe40ee ad0c8d6a46
commit ac7a7de3ee
131 changed files with 5628 additions and 163 deletions
--- a/README.md
+++ b/README.md
@@ -1,13 +1,15 @@
+<img src="https://raw.githubusercontent.com/FairyEver/d2-admin/master/dev/github/banner.png"/>
+
 D2Admin 是一个开源的管理系统前端集成方案，为了方便开发者快速进行管理系统开发而设计。

 ## 仓库和文档

 **文档**

-[中文文档 码云部署](http://d2admin.fairyever.com/zh/) | 
-[中文文档 服务器部署](http://app.d3collection.cn/d2-admin-doc/lastest/zh/)
+* <http://d2admin.fairyever.com/zh/>
+* <http://app.d3collection.cn/d2-admin-doc/lastest/zh/>

-两个文档地址内容一致，哪个快请用哪个。
+> 两个文档地址内容一致，哪个快请用哪个。如果其中一个挂掉了，请记得来这里使用另一个 ~

 **完整版**

@@ -27,10 +29,6 @@ D2Admin 是一个开源的管理系统前端集成方案，为了方便开发者
 [介绍](https://juejin.im/post/5b6349716fb9a04f834669d6) | 
 [预览地址](https://fairyever.gitee.io/d2-admin-ice-preview)

-因为现在集成了很多的插件和组件，首次加载会占用很多的时间，虽然已经做了首屏加载动画，但还是建议您在发布之前一定要删除没有用到的代码，比如项目没有用到图表、示例、插件组件
-
-<img src="https://raw.githubusercontent.com/FairyEver/d2-admin/master/dev/github/preview@2x.png"/>
-
 ## 功能

 * 使用 vue-cli3 构建
@@ -86,43 +84,4 @@ D2Admin 是一个开源的管理系统前端集成方案，为了方便开发者

 D2Admin 是完全开源免费的管理系统集成方案，由 [FairyEver](https://github.com/FairyEver) 在工作之余完全由兴趣驱动完成，如果你也一样喜欢前端开发，欢迎加入我们的讨论/学习群，群内可以`提问答疑`，`分享学习资料`或者随便扯淡

-<img src="https://raw.githubusercontent.com/FairyEver/d2-admin/master/dev/github/join@2x.png"/>
-
-## 获取代码
-
-有两种方式可以获得 D2Admin 的代码
-
-* 在 [releases](https://github.com/d2-projects/d2-admin/releases) 页面下载最新的发行版。发行版一般是完成了某个大升级或者修复重要 bug 后发布的压缩包，你可以下载下来直接使用
-
-* Fork 仓库到你的 github 然后克隆到本地，然后使用 master 分支继续你的开发。这种方式得到的是最新的代码，但是会有未完成的新功能。**不建议使用这种方式**
-
-* 由于 github 访问较慢，推荐前往码云仓库下载 [gitee.com/fairyever/d2-admin](https://gitee.com/fairyever/d2-admin)，码云上的仓库**在每次发布版本才会更新**，所以如果你选择此方法，请直接 fork 仓库并克隆到本地
-
-> 码云的仓库由 github 同步，但是发行版和标签同步有一些问题，所以推荐直接 fork 仓库
-
-## 使用
-
-详细用法见 [快速上手](http://app.d3collection.cn/d2-admin-doc/lastest/zh/guide/getting-started.html)
-
-```
-// 安装依赖
-npm i
-
-// 运行
-npm run dev
-
-// 打包
-npm run build
-```
-
-## 觉得不错 赏个咖啡 让作者打起精神 ~
-
-<img src="https://raw.githubusercontent.com/FairyEver/d2-admin/master/dev/github/reward-me@2x.png"/>
-
-更多介绍和使用方法见 [文档](http://app.d3collection.cn/d2-admin-doc/lastest/zh/)
-
-## 友情链接
-
-* [avue](https://github.com/nmxiaowei/avue)
-
-<img src="https://raw.githubusercontent.com/FairyEver/d2-admin/master/dev/github/give-a-star@2x.png"/>
+<img src="https://raw.githubusercontent.com/FairyEver/d2-admin/master/dev/github/join@2x.png"/>
--- a/dev/github/banner.png.REMOVED.git-id
+++ b/dev/github/banner.png.REMOVED.git-id
@@ -0,0 +1 @@
+a2f6616cae3da07b11cef8bf01bee9963e27c477
--- a/dev/github/preview@2x.png.REMOVED.git-id
+++ b/dev/github/preview@2x.png.REMOVED.git-id
@@ -1 +0,0 @@
-27e431bd9e4752dd51fe827a1281d606bd7bdf07
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -41,7 +41,7 @@ module.exports = {
            text: '学习',
            items: [
              { text: '教程', link: '/zh/learn-guide/' },
-              { text: '相关知识', link: '/zh/learn-knowledge/' },
+              { text: '基础知识', link: '/zh/learn-knowledge/' },
              { text: '升级指引', link: '/zh/learn-update/' }
            ]
          },
@@ -117,6 +117,7 @@ module.exports = {
        sidebar: {
          '/zh/learn-guide/': sideBarLearnGuide(),
          '/zh/learn-update/': sideBarLearnUpdate(),
+          '/zh/learn-knowledge/': sideBarKnowledge(),
          '/zh/sys-components/': sideBarSysComponents(),
          '/zh/sys-plugins/': sideBarSysPlugins(),
          '/zh/article/': sideBarArticle('版本发布', 'Cookbook'),
@@ -151,6 +152,18 @@ function sideBarLearnUpdate () {
  ]
 }

+function sideBarKnowledge () {
+  return [
+    {
+      collapsable: false,
+      children: [
+        '',
+        'javascript.md'
+      ]
+    }
+  ]
+}
+
 function sideBarSysComponents () {
  return [
    {
@@ -204,7 +217,8 @@ function sideBarArticle (titleUpdate, titleCookbook) {
        'update/ice-1.1.2',
        'update/1.1.5',
        'update/1.1.4',
-        'update/0.0.0'
+        'update/0.0.0',
+        'update/introduce'
      ]
    }
  ]
@@ -216,7 +230,9 @@ function sideBarEcosystemD2Crud () {
      collapsable: false,
      children: [
        '',
-        'api'
+        'guide',
+        'api',
+        'example'
      ]
    }
  ]
--- a/docs/zh/article/update/introduce.md
+++ b/docs/zh/article/update/introduce.md
@@ -0,0 +1,25 @@
+# D2 Admin 介绍
+
+![](http://fairyever.qiniudn.com/20180821142809.png)
+
+[D2Admin](https://github.com/d2-projects/d2-admin) 是一个开源的管理系统前端集成方案，为了方便开发者快速进行管理系统开发而设计，提供了大量开箱即用的功能：
+
+* 登陆和注销的页面、逻辑、路由拦截
+* 主题系统
+* 基于 ElementUI 的优化外观
+* 表格 CRUD 封装 ([d2-crud](https://github.com/d2-projects/d2-crud))
+* 完善的页面容器组件，六种布局模式，具备顶栏和底栏插槽
+* 表格导入导出
+* 错误处理
+* 模拟数据
+* 集成字体图标库，以及即放即用的 svg 图标组件
+* 同类产品中最强大的出具持久化方案
+* 完善的多标签页用户控制
+* 完善的全局系统控制
+* 事无巨细的文档
+* 容纳 2000 人的 D2 Projects QQ 用户交流群解决使用问题 <a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=6fd5a3ac1210fb60711d51068ec899a60a68de1b4185b44a20168d0beb33ff05">806395827</a>
+* ...
+
+篇幅有限，更多特性请参考 [D2 Admin 中文文档 | 介绍](http://app.d3collection.cn/d2-admin-doc/lastest/zh/learn-guide/)
+
+D2 Admin 在开源社区由 [FairyEver](https://github.com/FairyEver) 维护，为了方便开发者快速开发推出的 D2 Admin ICE 和完整版的 D2 Admin 有完全一致的系统功能。D2 Admin ICE 和其它分支同时更新，感谢大家使用。
--- a/docs/zh/ecosystem-d2-crud/README.md
+++ b/docs/zh/ecosystem-d2-crud/README.md
@@ -1,3 +1,48 @@
 # D2 CRUD

-介绍内容
+## 介绍
+`D2-Crud`是一套基于[Vue.js 2.2.0+](https://cn.vuejs.org/)和[Element 2.0.0+](http://element-cn.eleme.io/#/zh-CN)的表格组件，`D2-Crud`将 `Element` 的功能进行了封装，并增加了表格的增删改查、数据校验、表格内编辑等常用的功能。大部分功能可根据配置的json实现，大大简化了开发流程。
+
+## 功能
+- 继承了 Element 中表格所有功能
+- 新增表格数据
+- 修改表格数据
+- 删除表格数据
+- 使用 Element 中的组件渲染表格内容和表单内容
+- 表单校验
+- 表格内编辑
+
+## 安装
+使用npm
+``` bash
+npm i element-ui @d2-projects/d2-crud -S
+```
+
+使用yarn
+``` bash
+yarn add element-ui @d2-projects/d2-crud
+```
+
+## 使用
+在`main.js`中写入以下内容：
+``` js
+import Vue from 'vue'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import D2Crud from '@d2-projects/d2-crud'
+
+Vue.use(ElementUI)
+Vue.use(D2Crud)
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+})
+```
+
+之后就可以在项目中使用`D2-Crud`了。
+
+## 文档
+[API](./api.md)
+
+[使用示例](./example.md) 
--- a/docs/zh/ecosystem-d2-crud/api.md
+++ b/docs/zh/ecosystem-d2-crud/api.md
@@ -1,9 +0,0 @@
-# api
-
-## api-1
-
-hhh
-
-## api-2
-
-## api-3
--- a/docs/zh/ecosystem-d2-crud/api.md.REMOVED.git-id
+++ b/docs/zh/ecosystem-d2-crud/api.md.REMOVED.git-id
@@ -0,0 +1 @@
+20469a4cf76ab7f4d3f7c89982745a0ffa8e84a8
--- a/docs/zh/ecosystem-d2-crud/example.md
+++ b/docs/zh/ecosystem-d2-crud/example.md
@@ -0,0 +1,34 @@
+# 示例
+
+## 基础功能
+
+| 示例 | 代码与演示 |
+| --- | --- |
+| 基础表格 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo1) |
+| 带斑马纹表格 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo2) |
+| 带边框表格 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo3) |
+| 带状态表格 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo4) |
+| 固定表头 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo5) |
+| 固定列 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo6) |
+| 流体高度 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo7) |
+| 多级表头 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo8) |
+| 单选 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo9) |
+| 多选 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo10) |
+| 排序 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo11) |
+| 筛选 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo12) |
+| 表尾合计行 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo13) |
+| 合并行 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo14) |
+| 合并列 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo15) |
+
+## 数据操作
+
+| 示例 | 代码与演示 |
+| --- | --- |
+| 新增数据 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo16) |
+| 修改数据 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo17) |
+| 删除数据 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo18) |
+| 自定义操作列 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo19) |
+| 表单组件渲染 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo20) |
+| 表单布局 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo21) |
+| 表单校验 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo22) |
+| 表格内编辑 | [:link: Link](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo23) |
--- a/docs/zh/ecosystem-d2-crud/guide.md
+++ b/docs/zh/ecosystem-d2-crud/guide.md
@@ -0,0 +1,42 @@
+# 使用指南
+
+## 获取表格当前数据
+
+可以通过 `ref` 拿到表格实时数据，也可以通过监听 `@d2-data-change` 事件来获取表格中数据
+``` vue
+<template>
+  <div>
+    <d2-crud
+      ref="d2Crud"
+      :columns="columns"
+      :data="data"
+      @d2-data-change="handleD2DataChange"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [],
+      data: []
+    }
+  },
+  mounted () {
+    console.log(this.$refs.d2Crud.d2Data) // 获取表格数据
+  },
+  methods: {
+    handleD2DataChange (data) {
+      console.log(data)
+    }
+  }
+}
+</script>
+```
+
+## 设置默认尺寸
+
+在 `main.js` 使用 `D2Crud` 时传入 `size` 即可（可选值: `medium` `small` `mini`）
+``` js
+Vue.use(d2Crud, { size: 'small' })
+```
--- a/docs/zh/learn-knowledge/README.md
+++ b/docs/zh/learn-knowledge/README.md
@@ -1,7 +1,3 @@
---
-sidebar: auto
---
-
 # 相关知识

 使用 D2Admin 首先组要有以下前置知识：
--- a/docs/zh/learn-knowledge/javascript.md.REMOVED.git-id
+++ b/docs/zh/learn-knowledge/javascript.md.REMOVED.git-id
@@ -0,0 +1 @@
+adaa3d23e2e5f38fc95922e6a324af247d104660
--- a/docs/zh/sys-components/highlight.md
+++ b/docs/zh/sys-components/highlight.md
@@ -6,8 +6,9 @@

 | 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
 | --- | --- | --- | --- | --- | --- |
-| code | 代码字符串 | 非 | String |  | console.log('you lost code prop') |
+| code | 代码字符串 | 非 | String |  |  |
 | format-html | 是否格式化 HTML | 非 | Boolean |  | false |
+| lang | 首选语言 | 非 | String |  |  |

 ::: tip
 format 建议只在内容为 HTML 的时候打开，如果内容不是 HTML，设置为 true 会有负面效果
@@ -21,4 +22,279 @@ format 建议只在内容为 HTML 的时候打开，如果内容不是 HTML，

 ::: tip
 本框架只是提供代码高亮的简单实现，如需实现更高级的设置请修改组件代码
-:::
+:::
+
+## 语言
+
+如果不指定语言，默认会依次尝试以下语言：
+
+1. html
+2. javascript
+3. json
+4. css
+5. scss
+6. less
+
+如果指定语言，将会首先尝试根据指定的语言解析。全部支持的语言：
+
+* 1c
+* abnf
+* accesslog
+* actionscript
+* ada
+* apache
+* applescript
+* cpp
+* arduino
+* armasm
+* xml
+* asciidoc
+* aspectj
+* autohotkey
+* autoit
+* avrasm
+* awk
+* axapta
+* bash
+* basic
+* bnf
+* brainfuck
+* cal
+* capnproto
+* ceylon
+* clean
+* clojure
+* clojure-repl
+* cmake
+* coffeescript
+* coq
+* cos
+* crmsh
+* crystal
+* cs
+* csp
+* css
+* d
+* markdown
+* dart
+* delphi
+* diff
+* django
+* dns
+* dockerfile
+* dos
+* dsconfig
+* dts
+* dust
+* ebnf
+* elixir
+* elm
+* ruby
+* erb
+* erlang-repl
+* erlang
+* excel
+* fix
+* flix
+* fortran
+* fsharp
+* gams
+* gauss
+* gcode
+* gherkin
+* glsl
+* go
+* golo
+* gradle
+* groovy
+* haml
+* handlebars
+* haskell
+* haxe
+* hsp
+* htmlbars
+* http
+* hy
+* inform7
+* ini
+* irpf90
+* java
+* javascript
+* jboss-cli
+* json
+* julia
+* julia-repl
+* kotlin
+* lasso
+* ldif
+* leaf
+* less
+* lisp
+* livecodeserver
+* livescript
+* llvm
+* lsl
+* lua
+* makefile
+* mathematica
+* matlab
+* maxima
+* mel
+* mercury
+* mipsasm
+* mizar
+* perl
+* mojolicious
+* monkey
+* moonscript
+* n1ql
+* nginx
+* nimrod
+* nix
+* nsis
+* objectivec
+* ocaml
+* openscad
+* oxygene
+* parser3
+* pf
+* php
+* pony
+* powershell
+* processing
+* profile
+* prolog
+* protobuf
+* puppet
+* purebasic
+* python
+* q
+* qml
+* r
+* rib
+* roboconf
+* routeros
+* rsl
+* ruleslanguage
+* rust
+* scala
+* scheme
+* scilab
+* scss
+* shell
+* smali
+* smalltalk
+* sml
+* sqf
+* sql
+* stan
+* stata
+* step21
+* stylus
+* subunit
+* swift
+* taggerscript
+* yaml
+* tap
+* tcl
+* tex
+* thrift
+* tp
+* twig
+* typescript
+* vala
+* vbnet
+* vbscript
+* vbscript-html
+* verilog
+* vhdl
+* vim
+* x86asm
+* xl
+* xquery
+* zephir
+
+## 主题
+
+* agate
+* androidstudio
+* arduino-light
+* arta
+* ascetic
+* atelier-cave-dark
+* atelier-cave-light
+* atelier-dune-dark
+* atelier-dune-light
+* atelier-estuary-dark
+* atelier-estuary-light
+* atelier-forest-dark
+* atelier-forest-light
+* atelier-heath-dark
+* atelier-heath-light
+* atelier-lakeside-dark
+* atelier-lakeside-light
+* atelier-plateau-dark
+* atelier-plateau-light
+* atelier-savanna-dark
+* atelier-savanna-light
+* atelier-seaside-dark
+* atelier-seaside-light
+* atelier-sulphurpool-dark
+* atelier-sulphurpool-light
+* atom-one-dark
+* atom-one-light
+* brown-paper
+* brown-papersq.png
+* codepen-embed
+* color-brewer
+* darcula
+* dark
+* darkula
+* default
+* docco
+* dracula
+* far
+* foundation
+* github-gist
+* github
+* googlecode
+* grayscale
+* gruvbox-dark
+* gruvbox-light
+* hopscotch
+* hybrid
+* idea
+* ir-black
+* kimbie.dark
+* kimbie.light
+* magula
+* mono-blue
+* monokai-sublime
+* monokai
+* obsidian
+* ocean
+* paraiso-dark
+* paraiso-light
+* pojoaque
+* pojoaque.jpg
+* purebasic
+* qtcreator_dark
+* qtcreator_light
+* railscasts
+* rainbow
+* routeros
+* school-book
+* school-book.png
+* solarized-dark
+* solarized-light
+* sunburst
+* tomorrow-night-blue
+* tomorrow-night-bright
+* tomorrow-night-eighties
+* tomorrow-night
+* tomorrow
+* vs
+* vs2015
+* xcode
+* xt256
+* zenburn
--- a/docs/zh/sys-vuex/README.md.REMOVED.git-id
+++ b/docs/zh/sys-vuex/README.md.REMOVED.git-id
@@ -1 +1 @@
-33948f39bdcc1391fd42429bd95b3b98c167fb23
+dd3ce3a3e8aff371313dd37c30adafe042430be2
--- a/package-lock.json.REMOVED.git-id
+++ b/package-lock.json.REMOVED.git-id
@@ -1 +0,0 @@
-937f5369a5d9b43eeb3c7fa2991f76724481721c
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "d2-admin",
-  "version": "1.2.1",
+  "version": "1.3.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --open",
@@ -13,6 +13,7 @@
    "doc:build": "vuepress build docs"
  },
  "dependencies": {
+    "@d2-projects/d2-crud": "^1.0.2",
    "axios": "^0.17.1",
    "babel-polyfill": "^6.26.0",
    "better-scroll": "^1.12.1",
@@ -23,8 +24,10 @@
    "element-ui": "^2.4.4",
    "file-saver": "^1.3.3",
    "flex.css": "^1.1.7",
+    "fuse.js": "^3.2.1",
    "github-markdown-css": "^2.10.0",
    "highlight.js": "^9.12.0",
+    "hotkeys-js": "^3.3.6",
    "js-cookie": "^2.2.0",
    "lodash": "^4.17.10",
    "lowdb": "^1.0.0",
--- a/public/index.html
+++ b/public/index.html
@@ -151,7 +151,7 @@
  </head>
  <body>
    <noscript>
-      <strong>We're sorry but d2-admin-start-kit-cli3 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>We're sorry but d2-admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
      <div class="d2-app-loading-group">
@@ -167,7 +167,7 @@
          <div class="d2-app-loading d2-app-loading9"></div>
        </div>
        <div class="d2-app-loading-title">加载中</div>
-        <div class="d2-app-loading-sub-title">欢迎使用 D2Admin 进行你的开发，初次加载会比较慢，请耐心等待</div>
+        <div class="d2-app-loading-sub-title">欢迎使用 D2Admin。初次加载较慢，请耐心等待</div>
        <div class="d2-app-loading-sub-info">如果很久很久都没有加载成功，请清空缓存重新加载页面</div>
        <div style="margin-top: 10px;">
          <a class="d2-app-loading-btn" href="https://github.com/d2-projects/d2-admin" target="blank">Github仓库</a>
--- a/src/assets/style/theme/theme-base.scss.REMOVED.git-id
+++ b/src/assets/style/theme/theme-base.scss.REMOVED.git-id
@@ -1 +1 @@
-27d62e35e945646beaa49ba9850fdbce60ed9e66
+76c08deda5f3f6bd81e91aeb695cae984eab131e
--- a/src/assets/style/theme/theme.scss.REMOVED.git-id
+++ b/src/assets/style/theme/theme.scss.REMOVED.git-id
@@ -1 +1 @@
-bfee5e91a3b150e04d9f24695061f6f3e7c59342
+5e28075542c22533bf13f61de9a2eaf52bf18157
--- a/src/assets/svg-icons/icons/add.svg
+++ b/src/assets/svg-icons/icons/add.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 1024C229.7 1024 0 794.3 0 512S229.7 0 512 0s512 229.7 512 512-229.7 512-512 512z m0-938.7C276.7 85.3 85.3 276.7 85.3 512S276.7 938.7 512 938.7 938.7 747.3 938.7 512 747.3 85.3 512 85.3z" fill="#3688FF" /><path d="M682.7 554.7H341.3c-23.6 0-42.7-19.1-42.7-42.7s19.1-42.7 42.7-42.7h341.3c23.6 0 42.7 19.1 42.7 42.7s-19.1 42.7-42.6 42.7z" fill="#5F6379" /><path d="M512 725.3c-23.6 0-42.7-19.1-42.7-42.7V341.3c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v341.3c0 23.6-19.1 42.7-42.7 42.7z" fill="#5F6379" /></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 1024C229.7 1024 0 794.3 0 512S229.7 0 512 0s512 229.7 512 512-229.7 512-512 512z m0-938.7C276.7 85.3 85.3 276.7 85.3 512S276.7 938.7 512 938.7 938.7 747.3 938.7 512 747.3 85.3 512 85.3z" fill="#3688FF" /><path d="M682.7 554.7H341.3c-23.6 0-42.7-19.1-42.7-42.7s19.1-42.7 42.7-42.7h341.3c23.6 0 42.7 19.1 42.7 42.7s-19.1 42.7-42.6 42.7z" fill="#5F6379" /><path d="M512 725.3c-23.6 0-42.7-19.1-42.7-42.7V341.3c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v341.3c0 23.6-19.1 42.7-42.7 42.7z" fill="#5F6379" /></svg>
--- a/src/assets/svg-icons/icons/alarm.svg
+++ b/src/assets/svg-icons/icons/alarm.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 896c-223.5 0-405.3-181.8-405.3-405.3S288.5 85.3 512 85.3s405.3 181.8 405.3 405.3S735.5 896 512 896z m0-725.3c-176.4 0-320 143.5-320 320s143.6 320 320 320 320-143.5 320-320-143.6-320-320-320z" fill="#3688FF" /><path d="M922.6 249.6c-13.7 0-27.1-6.6-35.4-18.8-15.3-22.6-32.8-43.9-52.1-63.2-19.3-19.3-40.6-36.9-63.2-52.1-19.5-13.2-24.6-39.7-11.5-59.2 13.2-19.5 39.7-24.6 59.2-11.5 27.1 18.3 52.6 39.4 75.7 62.5s44.2 48.6 62.5 75.7c13.2 19.5 8.1 46.1-11.5 59.2-7.2 5-15.5 7.4-23.7 7.4zM101.4 249.6c-8.2 0-16.5-2.4-23.8-7.3-19.5-13.2-24.7-39.7-11.5-59.2 18.3-27.1 39.4-52.6 62.5-75.7s48.6-44.1 75.7-62.5c19.5-13.2 46.1-8 59.3 11.5 13.2 19.5 8.1 46-11.5 59.2-22.6 15.3-43.9 32.8-63.2 52.1-19.3 19.3-36.8 40.5-52.1 63.2-8.2 12.1-21.7 18.7-35.4 18.7zM138.6 970.7c-8.6 0-17.3-2.6-24.8-7.9-19.2-13.7-23.6-40.4-9.9-59.5l53.3-74.7c13.7-19.2 40.3-23.6 59.5-9.9 19.2 13.7 23.6 40.4 9.9 59.5l-53.3 74.7c-8.2 11.6-21.4 17.8-34.7 17.8zM885.4 970.7c-13.3 0-26.4-6.2-34.8-17.9l-53.3-74.7c-13.7-19.2-9.3-45.8 9.9-59.5 19.2-13.7 45.8-9.2 59.5 9.9l53.3 74.7c13.7 19.2 9.3 45.8-9.9 59.5-7.5 5.4-16.2 8-24.7 8zM512 554.7c-7.2 0-14.5-1.8-21-5.5-13.4-7.6-21.6-21.8-21.6-37.1V384c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v52.6l42.1-25.2c20.2-12.1 46.4-5.6 58.5 14.6 12.1 20.2 5.6 46.4-14.6 58.5l-106.7 64c-6.9 4.1-14.5 6.2-22.1 6.2z" fill="#5F6379" /></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 896c-223.5 0-405.3-181.8-405.3-405.3S288.5 85.3 512 85.3s405.3 181.8 405.3 405.3S735.5 896 512 896z m0-725.3c-176.4 0-320 143.5-320 320s143.6 320 320 320 320-143.5 320-320-143.6-320-320-320z" fill="#3688FF" /><path d="M922.6 249.6c-13.7 0-27.1-6.6-35.4-18.8-15.3-22.6-32.8-43.9-52.1-63.2-19.3-19.3-40.6-36.9-63.2-52.1-19.5-13.2-24.6-39.7-11.5-59.2 13.2-19.5 39.7-24.6 59.2-11.5 27.1 18.3 52.6 39.4 75.7 62.5s44.2 48.6 62.5 75.7c13.2 19.5 8.1 46.1-11.5 59.2-7.2 5-15.5 7.4-23.7 7.4zM101.4 249.6c-8.2 0-16.5-2.4-23.8-7.3-19.5-13.2-24.7-39.7-11.5-59.2 18.3-27.1 39.4-52.6 62.5-75.7s48.6-44.1 75.7-62.5c19.5-13.2 46.1-8 59.3 11.5 13.2 19.5 8.1 46-11.5 59.2-22.6 15.3-43.9 32.8-63.2 52.1-19.3 19.3-36.8 40.5-52.1 63.2-8.2 12.1-21.7 18.7-35.4 18.7zM138.6 970.7c-8.6 0-17.3-2.6-24.8-7.9-19.2-13.7-23.6-40.4-9.9-59.5l53.3-74.7c13.7-19.2 40.3-23.6 59.5-9.9 19.2 13.7 23.6 40.4 9.9 59.5l-53.3 74.7c-8.2 11.6-21.4 17.8-34.7 17.8zM885.4 970.7c-13.3 0-26.4-6.2-34.8-17.9l-53.3-74.7c-13.7-19.2-9.3-45.8 9.9-59.5 19.2-13.7 45.8-9.2 59.5 9.9l53.3 74.7c13.7 19.2 9.3 45.8-9.9 59.5-7.5 5.4-16.2 8-24.7 8zM512 554.7c-7.2 0-14.5-1.8-21-5.5-13.4-7.6-21.6-21.8-21.6-37.1V384c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v52.6l42.1-25.2c20.2-12.1 46.4-5.6 58.5 14.6 12.1 20.2 5.6 46.4-14.6 58.5l-106.7 64c-6.9 4.1-14.5 6.2-22.1 6.2z" fill="#5F6379" /></svg>
--- a/src/assets/svg-icons/icons/camera.svg
+++ b/src/assets/svg-icons/icons/camera.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M899.9 938.7H124.1C55.7 938.7 0 883 0 814.6V273.4C0 205 55.7 149.3 124.1 149.3h68.7l85.3-106.7h467.7l85.3 106.7h68.7c68.4 0 124.1 55.7 124.1 124.1v541.1c0.1 68.5-55.6 124.2-124 124.2z m-775.8-704c-21.4 0-38.8 17.4-38.8 38.8v541.1c0 21.4 17.4 38.8 38.8 38.8h775.8c21.4 0 38.8-17.4 38.8-38.8V273.4c0-21.4-17.4-38.8-38.8-38.8H790.2L704.8 128H319.2l-85.3 106.7H124.1z" fill="#3688FF" /><path d="M512 768c-117.6 0-213.3-95.7-213.3-213.3S394.4 341.3 512 341.3 725.3 437 725.3 554.7 629.6 768 512 768z m0-341.3c-70.6 0-128 57.4-128 128s57.4 128 128 128 128-57.4 128-128-57.4-128-128-128z" fill="#5F6379" /><path d="M810.7 341.3m-42.7 0a42.7 42.7 0 1 0 85.4 0 42.7 42.7 0 1 0-85.4 0Z" fill="#5F6379" /></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M899.9 938.7H124.1C55.7 938.7 0 883 0 814.6V273.4C0 205 55.7 149.3 124.1 149.3h68.7l85.3-106.7h467.7l85.3 106.7h68.7c68.4 0 124.1 55.7 124.1 124.1v541.1c0.1 68.5-55.6 124.2-124 124.2z m-775.8-704c-21.4 0-38.8 17.4-38.8 38.8v541.1c0 21.4 17.4 38.8 38.8 38.8h775.8c21.4 0 38.8-17.4 38.8-38.8V273.4c0-21.4-17.4-38.8-38.8-38.8H790.2L704.8 128H319.2l-85.3 106.7H124.1z" fill="#3688FF" /><path d="M512 768c-117.6 0-213.3-95.7-213.3-213.3S394.4 341.3 512 341.3 725.3 437 725.3 554.7 629.6 768 512 768z m0-341.3c-70.6 0-128 57.4-128 128s57.4 128 128 128 128-57.4 128-128-57.4-128-128-128z" fill="#5F6379" /><path d="M810.7 341.3m-42.7 0a42.7 42.7 0 1 0 85.4 0 42.7 42.7 0 1 0-85.4 0Z" fill="#5F6379" /></svg>
--- a/src/assets/svg-icons/icons/d2-admin-text.svg
+++ b/src/assets/svg-icons/icons/d2-admin-text.svg
--- a/src/assets/svg-icons/icons/d2-admin.svg
+++ b/src/assets/svg-icons/icons/d2-admin.svg
@@ -1,5 +1,5 @@

-<svg width="60px" height="54px" viewBox="0 0 60 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg viewBox="0 0 60 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <desc>D2Admin</desc>
    <defs></defs>
    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
--- a/src/assets/svg-icons/icons/d2-crud.svg
+++ b/src/assets/svg-icons/icons/d2-crud.svg
@@ -0,0 +1,26 @@
+
+<svg viewBox="0 0 256 236" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon/500/crud" transform="translate(-122.000000, -132.000000)" fill-rule="nonzero">
+            <g id="table-(1)" transform="translate(122.000000, 132.000000)">
+                <path d="M192,132.24 L192,166.906667 C192,169.115806 190.209139,170.906667 188,170.906667 L153.333333,170.906667 C151.124194,170.906667 149.333333,169.115806 149.333333,166.906667 L149.333333,132.24 C149.333333,130.030861 151.124194,128.24 153.333333,128.24 L188,128.24 C190.209139,128.24 192,130.030861 192,132.24 Z" id="Shape" fill="#409EFF"></path>
+                <path d="M128,132.24 L128,166.906667 C128,169.115806 126.209139,170.906667 124,170.906667 L89.3333333,170.906667 C87.1241943,170.906667 85.3333333,169.115806 85.3333333,166.906667 L85.3333333,132.24 C85.3333333,130.030861 87.1241943,128.24 89.3333333,128.24 L124,128.24 C126.209139,128.24 128,130.030861 128,132.24 Z" id="Shape" fill="#409EFF"></path>
+                <path d="M64,132.24 L64,166.906667 C64,169.115806 62.209139,170.906667 60,170.906667 L4,170.906667 C1.790861,170.906667 2.705415e-16,169.115806 0,166.906667 L0,132.24 C-2.705415e-16,130.030861 1.790861,128.24 4,128.24 L60,128.24 C62.209139,128.24 64,130.030861 64,132.24 Z" id="Shape" fill="#35495E"></path>
+                <path d="M128,69.0933333 L128,103.76 C128,105.969139 126.209139,107.76 124,107.76 L89.3333333,107.76 C87.1241943,107.76 85.3333333,105.969139 85.3333333,103.76 L85.3333333,69.0933333 C85.3333333,66.8841943 87.1241943,65.0933333 89.3333333,65.0933333 L124,65.0933333 C126.209139,65.0933333 128,66.8841943 128,69.0933333 Z" id="Shape" fill="#409EFF"></path>
+                <path d="M64,4.24 L64,38.9066667 C64,41.1158057 62.209139,42.9066667 60,42.9066667 L4,42.9066667 C1.790861,42.9066667 2.705415e-16,41.1158057 0,38.9066667 L0,4.24 C-2.705415e-16,2.030861 1.790861,0.24 4,0.24 L60,0.24 C62.209139,0.24 64,2.030861 64,4.24 Z" id="Shape" fill="#35495E"></path>
+                <path d="M192,69.0933333 L192,103.76 C192,105.969139 190.209139,107.76 188,107.76 L153.333333,107.76 C151.124194,107.76 149.333333,105.969139 149.333333,103.76 L149.333333,69.0933333 C149.333333,66.8841943 151.124194,65.0933333 153.333333,65.0933333 L188,65.0933333 C190.209139,65.0933333 192,66.8841943 192,69.0933333 Z" id="Shape" fill="#409EFF"></path>
+                <path d="M64,69.0933333 L64,103.76 C64,105.969139 62.209139,107.76 60,107.76 L4,107.76 C1.790861,107.76 2.705415e-16,105.969139 0,103.76 L0,69.0933333 C-2.705415e-16,66.8841943 1.790861,65.0933333 4,65.0933333 L60,65.0933333 C62.209139,65.0933333 64,66.8841943 64,69.0933333 Z" id="Shape" fill="#35495E"></path>
+                <path d="M256,132.24 L256,166.906667 C256,169.115806 254.209139,170.906667 252,170.906667 L217.333333,170.906667 C215.124194,170.906667 213.333333,169.115806 213.333333,166.906667 L213.333333,132.24 C213.333333,130.030861 215.124194,128.24 217.333333,128.24 L252,128.24 C254.209139,128.24 256,130.030861 256,132.24 Z" id="Shape" fill="#409EFF"></path>
+                <path d="M256,69.0933333 L256,103.76 C256,105.969139 254.209139,107.76 252,107.76 L217.333333,107.76 C215.124194,107.76 213.333333,105.969139 213.333333,103.76 L213.333333,69.0933333 C213.333333,66.8841943 215.124194,65.0933333 217.333333,65.0933333 L252,65.0933333 C254.209139,65.0933333 256,66.8841943 256,69.0933333 Z" id="Shape" fill="#409EFF"></path>
+                <path d="M256,4.24 L256,38.9066667 C256,41.1158057 254.209139,42.9066667 252,42.9066667 L89.3333333,42.9066667 C87.1241943,42.9066667 85.3333333,41.1158057 85.3333333,38.9066667 L85.3333333,4.24 C85.3333333,2.030861 87.1241943,0.24 89.3333333,0.24 L252,0.24 C254.209139,0.24 256,2.030861 256,4.24 Z" id="Shape" fill="#35495E"></path>
+                <path d="M128,197.093333 L128,231.76 C128,233.969139 126.209139,235.76 124,235.76 L89.3333333,235.76 C87.1241943,235.76 85.3333333,233.969139 85.3333333,231.76 L85.3333333,197.093333 C85.3333333,194.884194 87.1241943,193.093333 89.3333333,193.093333 L124,193.093333 C126.209139,193.093333 128,194.884194 128,197.093333 Z" id="Shape" fill="#409EFF"></path>
+                <path d="M64,197.093333 L64,231.76 C64,233.969139 62.209139,235.76 60,235.76 L4,235.76 C1.790861,235.76 2.705415e-16,233.969139 0,231.76 L0,197.093333 C-2.705415e-16,194.884194 1.790861,193.093333 4,193.093333 L60,193.093333 C62.209139,193.093333 64,194.884194 64,197.093333 Z" id="Shape" fill="#35495E"></path>
+                <path d="M256,197.093333 L256,231.76 C256,233.969139 254.209139,235.76 252,235.76 L217.333333,235.76 C215.124194,235.76 213.333333,233.969139 213.333333,231.76 L213.333333,197.093333 C213.333333,194.884194 215.124194,193.093333 217.333333,193.093333 L252,193.093333 C254.209139,193.093333 256,194.884194 256,197.093333 Z" id="Shape" fill="#409EFF"></path>
+                <path d="M192,197.093333 L192,231.76 C192,233.969139 190.209139,235.76 188,235.76 L153.333333,235.76 C151.124194,235.76 149.333333,233.969139 149.333333,231.76 L149.333333,197.093333 C149.333333,194.884194 151.124194,193.093333 153.333333,193.093333 L188,193.093333 C190.209139,193.093333 192,194.884194 192,197.093333 Z" id="Shape" fill="#409EFF"></path>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/src/assets/svg-icons/icons/history.svg
+++ b/src/assets/svg-icons/icons/history.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 1024C229.7 1024 0 794.3 0 512S229.7 0 512 0s512 229.7 512 512-229.7 512-512 512z m0-938.7C276.7 85.3 85.3 276.7 85.3 512S276.7 938.7 512 938.7 938.7 747.3 938.7 512 747.3 85.3 512 85.3z" fill="#3688FF" /><path d="M640 682.7c-9.6 0-19.3-3.2-27.3-9.9l-128-106.7c-9.7-8.1-15.4-20.1-15.4-32.8V384c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v129.4l112.6 93.9c18.1 15.1 20.5 42 5.5 60.1-8.5 10-20.6 15.3-32.8 15.3z" fill="#5F6379" /></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 1024C229.7 1024 0 794.3 0 512S229.7 0 512 0s512 229.7 512 512-229.7 512-512 512z m0-938.7C276.7 85.3 85.3 276.7 85.3 512S276.7 938.7 512 938.7 938.7 747.3 938.7 512 747.3 85.3 512 85.3z" fill="#3688FF" /><path d="M640 682.7c-9.6 0-19.3-3.2-27.3-9.9l-128-106.7c-9.7-8.1-15.4-20.1-15.4-32.8V384c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v129.4l112.6 93.9c18.1 15.1 20.5 42 5.5 60.1-8.5 10-20.6 15.3-32.8 15.3z" fill="#5F6379" /></svg>
--- a/src/assets/svg-icons/icons/like.svg
+++ b/src/assets/svg-icons/icons/like.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M192 938.7H87.9c-48.4 0-87.9-39.5-87.9-88V386.6c0-48.5 39.5-87.9 87.9-87.9h125.4c11.6 0 22.7 4.7 30.8 13.1 8 8.4 12.3 19.6 11.9 31.2l-21.3 554.7c-0.9 22.8-19.8 41-42.7 41zM87.9 384c-1.4 0-2.6 1.2-2.6 2.6v464.1c0 1.4 1.2 2.6 2.6 2.6h63L169 384H87.9z" fill="#5F6379" /><path d="M810.4 938.7H275.7l24.6-640H418l72-201.8C510.7 38.9 566 0 627.5 0c42.4 0 82.6 18.4 110.3 50.4S778 124.8 772 166.7l-18.9 132h142.6c70.7 0 128.2 57.5 128.2 128.2l-1 9.3-84.4 379.4c-2.6 68.3-59.1 123.1-128.1 123.1z m-446.1-85.4h446.1c23.6 0 42.9-19.2 42.9-42.9l1-9.3L938.5 423c-2-21.8-20.4-39-42.7-39h-241l32.8-229.4c2.5-17.7-2.5-34.8-14.2-48.3s-28-20.9-45.9-20.9c-25.6 0-48.5 16.2-57.1 40.3L478.1 384h-95.7l-18.1 469.3z" fill="#3688FF" /></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M192 938.7H87.9c-48.4 0-87.9-39.5-87.9-88V386.6c0-48.5 39.5-87.9 87.9-87.9h125.4c11.6 0 22.7 4.7 30.8 13.1 8 8.4 12.3 19.6 11.9 31.2l-21.3 554.7c-0.9 22.8-19.8 41-42.7 41zM87.9 384c-1.4 0-2.6 1.2-2.6 2.6v464.1c0 1.4 1.2 2.6 2.6 2.6h63L169 384H87.9z" fill="#5F6379" /><path d="M810.4 938.7H275.7l24.6-640H418l72-201.8C510.7 38.9 566 0 627.5 0c42.4 0 82.6 18.4 110.3 50.4S778 124.8 772 166.7l-18.9 132h142.6c70.7 0 128.2 57.5 128.2 128.2l-1 9.3-84.4 379.4c-2.6 68.3-59.1 123.1-128.1 123.1z m-446.1-85.4h446.1c23.6 0 42.9-19.2 42.9-42.9l1-9.3L938.5 423c-2-21.8-20.4-39-42.7-39h-241l32.8-229.4c2.5-17.7-2.5-34.8-14.2-48.3s-28-20.9-45.9-20.9c-25.6 0-48.5 16.2-57.1 40.3L478.1 384h-95.7l-18.1 469.3z" fill="#3688FF" /></svg>
--- a/src/assets/svg-icons/icons/love.svg
+++ b/src/assets/svg-icons/icons/love.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="199.80px" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M512.8 977.4c-26.1 0-50.1-7.3-71.5-21.7C323.5 897 0 675.3 0 400.5 0 212 153.4 58.6 341.9 58.6c60.5 0 119 15.8 170.9 45.9 51.9-30.1 110.5-45.9 170.9-45.9 188.5 0 341.9 153.4 341.9 341.9 0 274.8-323.5 496.6-441.3 555.2-21.4 14.4-45.4 21.7-71.5 21.7zM341.9 144.1c-141.4 0-256.4 115-256.4 256.4 0 117.2 80.6 225.2 148.2 295.1 86.1 89 187.5 155.2 248.1 184.8l6.1 3.7c15.1 10.8 34.6 10.8 49.7 0l6.1-3.7C604.4 850.7 705.8 784.6 791.8 695.6c67.6-69.9 148.2-177.8 148.2-295.1 0-141.4-115-256.4-256.4-256.4-52.6 0-103.2 16-146.5 46.1L512.8 207.3l-24.5-17.1c-43.2-30.2-93.9-46.1-146.4-46.1z"  /></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M512.8 977.4c-26.1 0-50.1-7.3-71.5-21.7C323.5 897 0 675.3 0 400.5 0 212 153.4 58.6 341.9 58.6c60.5 0 119 15.8 170.9 45.9 51.9-30.1 110.5-45.9 170.9-45.9 188.5 0 341.9 153.4 341.9 341.9 0 274.8-323.5 496.6-441.3 555.2-21.4 14.4-45.4 21.7-71.5 21.7zM341.9 144.1c-141.4 0-256.4 115-256.4 256.4 0 117.2 80.6 225.2 148.2 295.1 86.1 89 187.5 155.2 248.1 184.8l6.1 3.7c15.1 10.8 34.6 10.8 49.7 0l6.1-3.7C604.4 850.7 705.8 784.6 791.8 695.6c67.6-69.9 148.2-177.8 148.2-295.1 0-141.4-115-256.4-256.4-256.4-52.6 0-103.2 16-146.5 46.1L512.8 207.3l-24.5-17.1c-43.2-30.2-93.9-46.1-146.4-46.1z"  /></svg>
--- a/src/assets/svg-icons/icons/message.svg
+++ b/src/assets/svg-icons/icons/message.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M277.3 469.3m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#5F6379" /><path d="M344.7 978.2c-5.2 0-10.4-0.8-15.5-2.5-13.8-4.5-24.8-14.8-30.4-28.1l-39.3-94.2H128.3C57.5 853.3 0 795.8 0 725.1V213.6C0 142.9 57.5 85.3 128.3 85.3h767.5c70.7 0 128.3 57.5 128.3 128.3v511.5c0 70.7-57.5 128.3-128.3 128.3H566.5L370.2 971.1c-7.7 4.7-16.6 7.1-25.5 7.1z m-18.3-80.3s-0.1 0 0 0zM128.3 170.7c-23.7 0-42.9 19.3-42.9 42.9v511.5c0 23.7 19.3 42.9 42.9 42.9h188.2l45.3 108.7L542.9 768h352.9c23.7 0 42.9-19.3 42.9-42.9V213.6c0-23.7-19.3-42.9-42.9-42.9H128.3z" fill="#3688FF" /><path d="M512 469.3m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#5F6379" /><path d="M746.7 469.3m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#5F6379" /></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M277.3 469.3m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#5F6379" /><path d="M344.7 978.2c-5.2 0-10.4-0.8-15.5-2.5-13.8-4.5-24.8-14.8-30.4-28.1l-39.3-94.2H128.3C57.5 853.3 0 795.8 0 725.1V213.6C0 142.9 57.5 85.3 128.3 85.3h767.5c70.7 0 128.3 57.5 128.3 128.3v511.5c0 70.7-57.5 128.3-128.3 128.3H566.5L370.2 971.1c-7.7 4.7-16.6 7.1-25.5 7.1z m-18.3-80.3s-0.1 0 0 0zM128.3 170.7c-23.7 0-42.9 19.3-42.9 42.9v511.5c0 23.7 19.3 42.9 42.9 42.9h188.2l45.3 108.7L542.9 768h352.9c23.7 0 42.9-19.3 42.9-42.9V213.6c0-23.7-19.3-42.9-42.9-42.9H128.3z" fill="#3688FF" /><path d="M512 469.3m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#5F6379" /><path d="M746.7 469.3m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#5F6379" /></svg>
--- a/src/assets/svg-icons/icons/notice.svg
+++ b/src/assets/svg-icons/icons/notice.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 128c-23.6 0-42.7-19.1-42.7-42.7V42.7C469.3 19.1 488.4 0 512 0s42.7 19.1 42.7 42.7v42.7c0 23.5-19.1 42.6-42.7 42.6zM512 1024c-61.8 0-122.3-10.5-179.9-31.1-22.2-7.9-33.7-32.4-25.8-54.6 8-22.2 32.3-33.8 54.6-25.8 98.4 35.3 209.2 34.6 307.1-1.8 22.1-8.2 46.6 3 54.9 25.1 8.2 22.1-3 46.6-25.1 54.9-59.5 22.1-121.9 33.3-185.8 33.3z" fill="#5F6379" /><path d="M845 874.7H179c-75.2 0-136.4-61.2-136.4-136.4v-4.6c0-57.1 34.7-106 85.3-126.1V426.7c0-211.7 172.3-384 384-384s384 172.3 384 384v180.9c50.6 20.1 85.3 69 85.3 126.1v4.6c0.1 75.2-61 136.4-136.2 136.4zM512 128c-164.7 0-298.7 134-298.7 298.7v253.2l-38.9 3.5c-26.5 2.4-46.5 24-46.5 50.3v4.6c0 28.1 22.9 51 51 51h666c28.1 0 51-22.9 51-51v-4.6c0-26.3-20-48-46.5-50.3l-38.9-3.5V426.7C810.7 262 676.7 128 512 128z" fill="#3688FF" /></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 128c-23.6 0-42.7-19.1-42.7-42.7V42.7C469.3 19.1 488.4 0 512 0s42.7 19.1 42.7 42.7v42.7c0 23.5-19.1 42.6-42.7 42.6zM512 1024c-61.8 0-122.3-10.5-179.9-31.1-22.2-7.9-33.7-32.4-25.8-54.6 8-22.2 32.3-33.8 54.6-25.8 98.4 35.3 209.2 34.6 307.1-1.8 22.1-8.2 46.6 3 54.9 25.1 8.2 22.1-3 46.6-25.1 54.9-59.5 22.1-121.9 33.3-185.8 33.3z" fill="#5F6379" /><path d="M845 874.7H179c-75.2 0-136.4-61.2-136.4-136.4v-4.6c0-57.1 34.7-106 85.3-126.1V426.7c0-211.7 172.3-384 384-384s384 172.3 384 384v180.9c50.6 20.1 85.3 69 85.3 126.1v4.6c0.1 75.2-61 136.4-136.2 136.4zM512 128c-164.7 0-298.7 134-298.7 298.7v253.2l-38.9 3.5c-26.5 2.4-46.5 24-46.5 50.3v4.6c0 28.1 22.9 51 51 51h666c28.1 0 51-22.9 51-51v-4.6c0-26.3-20-48-46.5-50.3l-38.9-3.5V426.7C810.7 262 676.7 128 512 128z" fill="#3688FF" /></svg>
--- a/src/assets/svg-icons/icons/search.svg
+++ b/src/assets/svg-icons/icons/search.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M492.5 917.7c-247 0-447.9-200.9-447.9-447.9s200.9-448 447.9-448 447.9 200.9 447.9 447.9-200.9 448-447.9 448z m0-810.6c-200 0-362.6 162.7-362.6 362.6s162.7 362.6 362.6 362.6 362.6-162.7 362.6-362.6-162.6-362.6-362.6-362.6z" fill="#3688FF" /><path d="M951.1 971c-10.9 0-21.8-4.2-30.2-12.5l-96-96c-16.7-16.7-16.7-43.7 0-60.3 16.6-16.7 43.7-16.7 60.3 0l96 96c16.7 16.7 16.7 43.7 0 60.3-8.2 8.4-19.2 12.5-30.1 12.5z" fill="#5F6379" /></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M492.5 917.7c-247 0-447.9-200.9-447.9-447.9s200.9-448 447.9-448 447.9 200.9 447.9 447.9-200.9 448-447.9 448z m0-810.6c-200 0-362.6 162.7-362.6 362.6s162.7 362.6 362.6 362.6 362.6-162.7 362.6-362.6-162.6-362.6-362.6-362.6z" fill="#3688FF" /><path d="M951.1 971c-10.9 0-21.8-4.2-30.2-12.5l-96-96c-16.7-16.7-16.7-43.7 0-60.3 16.6-16.7 43.7-16.7 60.3 0l96 96c16.7 16.7 16.7 43.7 0 60.3-8.2 8.4-19.2 12.5-30.1 12.5z" fill="#5F6379" /></svg>
--- a/src/assets/svg-icons/icons/share.svg
+++ b/src/assets/svg-icons/icons/share.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M811.3 938.7H217.5c-71.5 0-129.8-58.2-129.8-129.8V215.1c0-71.6 58.2-129.8 129.8-129.8h296.9c23.6 0 42.7 19.1 42.7 42.7s-19.1 42.7-42.7 42.7H217.5c-24.5 0-44.4 19.9-44.4 44.4v593.8c0 24.5 19.9 44.4 44.4 44.4h593.8c24.5 0 44.4-19.9 44.4-44.4V512c0-23.6 19.1-42.7 42.7-42.7S941 488.4 941 512v296.9c0 71.6-58.2 129.8-129.7 129.8z" fill="#3688FF" /><path d="M898.4 405.3c-23.6 0-42.7-19.1-42.7-42.7V212.9c0-23.3-19-42.3-42.3-42.3H663.7c-23.6 0-42.7-19.1-42.7-42.7s19.1-42.7 42.7-42.7h149.7c70.4 0 127.6 57.2 127.6 127.6v149.7c0 23.7-19.1 42.8-42.6 42.8z" fill="#5F6379" /><path d="M373.6 712.6c-10.9 0-21.8-4.2-30.2-12.5-16.7-16.7-16.7-43.7 0-60.3L851.2 132c16.7-16.7 43.7-16.7 60.3 0 16.7 16.7 16.7 43.7 0 60.3L403.8 700.1c-8.4 8.3-19.3 12.5-30.2 12.5z" fill="#5F6379" /></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M811.3 938.7H217.5c-71.5 0-129.8-58.2-129.8-129.8V215.1c0-71.6 58.2-129.8 129.8-129.8h296.9c23.6 0 42.7 19.1 42.7 42.7s-19.1 42.7-42.7 42.7H217.5c-24.5 0-44.4 19.9-44.4 44.4v593.8c0 24.5 19.9 44.4 44.4 44.4h593.8c24.5 0 44.4-19.9 44.4-44.4V512c0-23.6 19.1-42.7 42.7-42.7S941 488.4 941 512v296.9c0 71.6-58.2 129.8-129.7 129.8z" fill="#3688FF" /><path d="M898.4 405.3c-23.6 0-42.7-19.1-42.7-42.7V212.9c0-23.3-19-42.3-42.3-42.3H663.7c-23.6 0-42.7-19.1-42.7-42.7s19.1-42.7 42.7-42.7h149.7c70.4 0 127.6 57.2 127.6 127.6v149.7c0 23.7-19.1 42.8-42.6 42.8z" fill="#5F6379" /><path d="M373.6 712.6c-10.9 0-21.8-4.2-30.2-12.5-16.7-16.7-16.7-43.7 0-60.3L851.2 132c16.7-16.7 43.7-16.7 60.3 0 16.7 16.7 16.7 43.7 0 60.3L403.8 700.1c-8.4 8.3-19.3 12.5-30.2 12.5z" fill="#5F6379" /></svg>
--- a/src/assets/svg-icons/icons/star.svg
+++ b/src/assets/svg-icons/icons/star.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M761.2 942.8c-8.9 0-17.9-1.8-26.5-5.4l-220.7-93-220.7 93c-22.1 9.3-46.8 6.4-66.2-7.6-19.4-14.1-29.8-36.7-27.7-60.6l20.2-238.7L62.9 449.2c-15.7-18.1-20.6-42.5-13.2-65.3 7.4-22.8 25.7-39.6 49.1-45.1L332 284.3l123.9-205c12.4-20.5 34.1-32.7 58-32.7 24 0 45.7 12.2 58.1 32.7l123.9 205 233.2 54.5c23.3 5.5 41.7 22.3 49.1 45.1 7.4 22.8 2.5 47.2-13.2 65.3L808.4 630.4l20.2 238.7c2 23.9-8.3 46.5-27.7 60.6-11.8 8.6-25.7 13-39.7 13.1zM146.4 415.3L289 580.2c11.9 13.7 17.8 32 16.3 50.1l-18.4 217.2 200.8-84.6c16.8-7 35.9-7 52.6 0l200.9 84.6-18.4-217.2c-1.5-18.1 4.4-36.4 16.3-50.1l142.5-164.9-212.2-49.6c-17.7-4.1-33.2-15.4-42.6-31L514 148.3 401.2 334.8c-9.4 15.6-24.9 26.8-42.6 31l-212.2 49.5z m553.3-124.7h0.2-0.2z"  /></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M761.2 942.8c-8.9 0-17.9-1.8-26.5-5.4l-220.7-93-220.7 93c-22.1 9.3-46.8 6.4-66.2-7.6-19.4-14.1-29.8-36.7-27.7-60.6l20.2-238.7L62.9 449.2c-15.7-18.1-20.6-42.5-13.2-65.3 7.4-22.8 25.7-39.6 49.1-45.1L332 284.3l123.9-205c12.4-20.5 34.1-32.7 58-32.7 24 0 45.7 12.2 58.1 32.7l123.9 205 233.2 54.5c23.3 5.5 41.7 22.3 49.1 45.1 7.4 22.8 2.5 47.2-13.2 65.3L808.4 630.4l20.2 238.7c2 23.9-8.3 46.5-27.7 60.6-11.8 8.6-25.7 13-39.7 13.1zM146.4 415.3L289 580.2c11.9 13.7 17.8 32 16.3 50.1l-18.4 217.2 200.8-84.6c16.8-7 35.9-7 52.6 0l200.9 84.6-18.4-217.2c-1.5-18.1 4.4-36.4 16.3-50.1l142.5-164.9-212.2-49.6c-17.7-4.1-33.2-15.4-42.6-31L514 148.3 401.2 334.8c-9.4 15.6-24.9 26.8-42.6 31l-212.2 49.5z m553.3-124.7h0.2-0.2z"  /></svg>
--- a/src/assets/svg-icons/icons/user.svg
+++ b/src/assets/svg-icons/icons/user.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 661.3c-117.6 0-213.3-95.7-213.3-213.3S394.4 234.7 512 234.7 725.3 330.4 725.3 448 629.6 661.3 512 661.3z m0-341.3c-70.6 0-128 57.4-128 128s57.4 128 128 128 128-57.4 128-128-57.4-128-128-128z" fill="#5F6379" /><path d="M837 862.9c-15.7 0-30.8-8.7-38.2-23.7C744.3 729.5 634.4 661.3 512 661.3s-232.3 68.1-286.8 177.9c-10.5 21.1-36.1 29.7-57.2 19.2s-29.7-36.1-19.2-57.2C217.8 662.3 357 576 512 576s294.2 86.3 363.2 225.2c10.5 21.1 1.9 46.7-19.2 57.2-6.1 3-12.6 4.5-19 4.5z" fill="#5F6379" /><path d="M512 1002.7c-270.6 0-490.7-220.1-490.7-490.7S241.4 21.3 512 21.3s490.7 220.1 490.7 490.7-220.1 490.7-490.7 490.7z m0-896c-223.5 0-405.3 181.8-405.3 405.3S288.5 917.3 512 917.3 917.3 735.5 917.3 512 735.5 106.7 512 106.7z" fill="#3688FF" /></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 661.3c-117.6 0-213.3-95.7-213.3-213.3S394.4 234.7 512 234.7 725.3 330.4 725.3 448 629.6 661.3 512 661.3z m0-341.3c-70.6 0-128 57.4-128 128s57.4 128 128 128 128-57.4 128-128-57.4-128-128-128z" fill="#5F6379" /><path d="M837 862.9c-15.7 0-30.8-8.7-38.2-23.7C744.3 729.5 634.4 661.3 512 661.3s-232.3 68.1-286.8 177.9c-10.5 21.1-36.1 29.7-57.2 19.2s-29.7-36.1-19.2-57.2C217.8 662.3 357 576 512 576s294.2 86.3 363.2 225.2c10.5 21.1 1.9 46.7-19.2 57.2-6.1 3-12.6 4.5-19 4.5z" fill="#5F6379" /><path d="M512 1002.7c-270.6 0-490.7-220.1-490.7-490.7S241.4 21.3 512 21.3s490.7 220.1 490.7 490.7-220.1 490.7-490.7 490.7z m0-896c-223.5 0-405.3 181.8-405.3 405.3S288.5 917.3 512 917.3 917.3 735.5 917.3 512 735.5 106.7 512 106.7z" fill="#3688FF" /></svg>
--- a/src/components/d2-container-frame/index.vue
+++ b/src/components/d2-container-frame/index.vue
@@ -0,0 +1,31 @@
+<template>
+  <d2-container>
+    <iframe
+      class="d2-container-frame"
+      :src="src"
+      frameborder="0"/>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  name: 'd2-container-frame',
+  props: {
+    src: {
+      type: String,
+      required: false,
+      default: 'http://app.d3collection.cn/d2-admin-doc/lastest/zh/'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.d2-container-frame {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  width: 100%;
+}
+</style>
--- a/src/components/d2-highlight/index.vue
+++ b/src/components/d2-highlight/index.vue
@@ -1,11 +1,11 @@
 <template>
-  <pre class="d2-highlight" v-html="highlightHTML"></pre>
+  <pre class="d2-highlight hljs" v-html="highlightHTML"></pre>
 </template>

 <script>
 // https://highlightjs.org/usage/
 // http://highlightjs.readthedocs.io/en/latest/api.html#configure-options
-import './styles/atom-one-light.css'
+import './styles/github-gist.css'
 import htmlFormat from './libs/htmlFormat'
 import highlight from 'highlight.js'
 export default {
@@ -14,12 +14,17 @@ export default {
    code: {
      type: String,
      required: false,
-      default: `console.log('you lost code prop')`
+      default: ''
    },
    formatHtml: {
      type: Boolean,
      required: false,
      default: false
+    },
+    lang: {
+      type: String,
+      required: false,
+      default: ''
    }
  },
  data () {
@@ -38,7 +43,15 @@ export default {
  methods: {
    highlight () {
      const code = this.formatHtml ? htmlFormat(this.code) : this.code
-      this.highlightHTML = highlight.highlightAuto(code).value
+      this.highlightHTML = highlight.highlightAuto(code, [
+        this.lang,
+        'html',
+        'javascript',
+        'json',
+        'css',
+        'scss',
+        'less'
+      ]).value
    }
  }
 }
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,10 +1,12 @@
 import Vue from 'vue'

 import d2Container from './d2-container'
+import d2ContainerFrame from './d2-container-frame'
 import d2LinkBtn from './d2-link-btn'

 // 注意 有些组件使用异步加载会有影响
 Vue.component('d2-container', d2Container)
+Vue.component('d2-container-frame', d2ContainerFrame)
 Vue.component('d2-link-btn', d2LinkBtn)
 Vue.component('d2-page-cover', () => import('./d2-page-cover'))
 Vue.component('d2-count-up', () => import('./d2-count-up'))
--- a/src/layout/header-aside/components/components/menu-item/index.vue
+++ b/src/layout/header-aside/components/components/menu-item/index.vue
@@ -1,9 +1,10 @@
 <template>
  <el-menu-item :index="menu.path || uniqueId">
    <i v-if="menu.icon" :class="`fa fa-${menu.icon}`"></i>
-    <i v-else-if="menu.iconSvg">
+    <!-- <i v-else-if="menu.iconSvg">
      <d2-icon-svg :name="menu.iconSvg"/>
-    </i>
+    </i> -->
+    <d2-icon-svg v-else-if="menu.iconSvg" :name="menu.iconSvg"/>
    <i v-else class="fa fa-file-o"></i>
    <span slot="title">{{menu.title || '未命名菜单'}}</span>
  </el-menu-item>
--- a/src/layout/header-aside/components/components/menu-sub/index.vue
+++ b/src/layout/header-aside/components/components/menu-sub/index.vue
@@ -2,9 +2,10 @@
  <el-submenu :index="menu.path || uniqueId">
    <template slot="title">
      <i v-if="menu.icon" :class="`fa fa-${menu.icon}`"></i>
-      <i v-else-if="menu.iconSvg">
+      <!-- <i v-else-if="menu.iconSvg">
        <d2-icon-svg :name="menu.iconSvg"/>
-      </i>
+      </i> -->
+      <d2-icon-svg v-else-if="menu.iconSvg" :name="menu.iconSvg"/>
      <i v-else class="fa fa-folder-o"></i>
      <span slot="title">{{menu.title}}</span>
    </template>
--- a/src/layout/header-aside/components/header-search/index.vue
+++ b/src/layout/header-aside/components/header-search/index.vue
@@ -0,0 +1,15 @@
+<template>
+  <el-button class="d2-mr btn-text can-hover" type="text" @click="handleClick">
+    <d2-icon name="search" style="font-size: 18px;"/>
+  </el-button>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleClick () {
+      this.$emit('click')
+    }
+  }
+}
+</script>
--- a/src/layout/header-aside/components/mixin/menu.js
+++ b/src/layout/header-aside/components/mixin/menu.js
@@ -3,7 +3,7 @@ import util from '@/libs/util.js'
 export default {
  methods: {
    handleMenuSelect (index, indexPath) {
-      if (/^d2-menu-empty-\d+$/.test(index)) {
+      if (/^d2-menu-empty-\d+$/.test(index) || index === undefined) {
        this.$message.warning('临时菜单')
      } else if (/^https:\/\/|http:\/\//.test(index)) {
        util.open(index)
--- a/src/layout/header-aside/components/panel-search/components/panel-search-item/index.vue
+++ b/src/layout/header-aside/components/panel-search/components/panel-search-item/index.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="d2-panel-search-item" :class="hoverMode ? 'can-hover' : ''" flex>
+    <div class="d2-panel-search-item__icon" flex-box="0">
+      <div class="d2-panel-search-item__icon-box" flex="main:center cross:center">
+        <d2-icon v-if="item.icon" :name="item.icon"/>
+        <d2-icon-svg v-else-if="item.iconSvg" :name="item.iconSvg"/>
+        <d2-icon v-else name="file-o"/>
+      </div>
+    </div>
+    <div class="d2-panel-search-item__info" flex-box="1" flex="dir:top">
+      <div class="d2-panel-search-item__info-title" flex-box="1" flex="cross:center">
+        <span>{{item.title}}</span>
+      </div>
+      <div class="d2-panel-search-item__info-fullTitle" flex-box="0">
+        <span>{{item.fullTitle}}</span>
+      </div>
+      <div class="d2-panel-search-item__info-path" flex-box="0">
+        <span>{{item.path}}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    item: {
+      default: () => ({})
+    },
+    hoverMode: {
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/style/public.scss';
+.d2-panel-search-item {
+  height: 64px;
+  margin: 0px -20px;
+  &.can-hover {
+    @extend %unable-select;
+    margin: 0px;
+    &:hover {
+      background-color: #F5F7FA;
+      .d2-panel-search-item__icon {
+        .d2-panel-search-item__icon-box {
+          i {
+            font-size: 24px;
+            color: $color-primary;
+          }
+        }
+      }
+      .d2-panel-search-item__info {
+        .d2-panel-search-item__info-title {
+          color: $color-text-main;
+        }
+        .d2-panel-search-item__info-fullTitle {
+          color: $color-text-normal;
+        }
+        .d2-panel-search-item__info-path {
+          color: $color-text-normal;
+        }
+      }
+    }
+  }
+  .d2-panel-search-item__icon {
+    width: 64px;
+    .d2-panel-search-item__icon-box {
+      height: 64px;
+      width: 64px;
+      border-right: 1px solid $color-border-3;
+      i {
+        font-size: 20px;
+        color: $color-text-sub;
+      }
+      svg {
+        height: 20px;
+        width: 20px;
+      }
+    }
+  }
+  .d2-panel-search-item__info {
+    margin-left: 10px;
+    .d2-panel-search-item__info-title {
+      font-size: 16px;
+      line-height: 16px;
+      font-weight: bold;
+      color: $color-text-normal;
+    }
+    .d2-panel-search-item__info-fullTitle {
+      font-size: 10px;
+      line-height: 14px;
+      color: $color-text-placehoder;
+    }
+    .d2-panel-search-item__info-path {
+      margin-bottom: 4px;
+      font-size: 10px;
+      line-height: 14px;
+      color: $color-text-placehoder;
+    }
+  }
+}
+</style>
--- a/src/layout/header-aside/components/panel-search/index.vue
+++ b/src/layout/header-aside/components/panel-search/index.vue
@@ -0,0 +1,211 @@
+<template>
+  <div class="panel-search" flex="dir:top">
+    <div class="panel-search__input-group" flex-box="0" flex="dir:top main:center cross:center">
+      <d2-icon-svg
+        class="panel-search__logo"
+        name="d2-admin-text"/>
+      <el-autocomplete
+        class="panel-search__input"
+        ref="input"
+        v-model="searchText"
+        suffix-icon="el-icon-search"
+        placeholder="搜索页面"
+        :fetch-suggestions="querySearch"
+        :trigger-on-focus="false"
+        :clearable="true"
+        @keydown.esc.native="handleEsc"
+        @select="handleSelect">
+        <d2-panel-search-item slot-scope="{ item }" :item="item"/>
+      </el-autocomplete>
+      <div class="panel-search__tip">
+        您可以使用快捷键
+        <span class="panel-search__key">
+          {{hotkey.open}}
+        </span>
+        唤醒搜索面板，按
+        <span class="panel-search__key">
+          {{hotkey.close}}
+        </span>
+        关闭
+      </div>
+    </div>
+    <div
+      v-if="resultsList.length > 0"
+      class="panel-search__results-group"
+      flex-box="1">
+      <el-card>
+        <div class="panel-search__results-group-inner">
+          <d2-panel-search-item
+            v-for="(item, index) in resultsList"
+            :key="index"
+            :item="item"
+            :hover-mode="true"
+            @click.native="handleResultsGroupItemClick(item.path)"/>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import Fuse from 'fuse.js'
+import { mapState } from 'vuex'
+import mixin from '../mixin/menu'
+export default {
+  mixins: [
+    mixin
+  ],
+  components: {
+    'd2-panel-search-item': () => import('./components/panel-search-item/index.vue')
+  },
+  data () {
+    return {
+      searchText: '',
+      results: []
+    }
+  },
+  computed: {
+    ...mapState('d2admin/search', [
+      'hotkey',
+      'pool'
+    ]),
+    // 这份数据是展示在搜索面板下面的
+    resultsList () {
+      return (this.results.length === 0 && this.searchText === '') ? this.pool.map(e => ({
+        value: e.fullTitle,
+        ...e
+      })) : this.results
+    }
+  },
+  methods: {
+    /**
+     * @description 过滤选项 这个方法在每次输入框的值发生变化时会触发
+     */
+    querySearch (queryString, callback) {
+      var pool = this.pool
+      const results = this.query(queryString ? pool : [], queryString)
+      this.results = results
+      callback(results)
+    },
+    /**
+     * @description 指定的数据源中根据指定的查询字符串过滤数据
+     * @param {Object} pool 需要过滤的数据
+     * @param {String} queryString 查询字符串
+     */
+    query (pool, queryString) {
+      return new Fuse(pool, {
+        shouldSort: true,
+        tokenize: true,
+        threshold: 0.6,
+        location: 0,
+        distance: 100,
+        maxPatternLength: 32,
+        minMatchCharLength: 1,
+        keys: [
+          'fullTitle',
+          'path'
+        ]
+      })
+        .search(queryString)
+        .map(e => ({
+          value: e.fullTitle,
+          ...e
+        }))
+    },
+    /**
+     * @description 聚焦输入框
+     */
+    focus () {
+      this.input = ''
+      setTimeout(() => {
+        this.$refs.input.focus()
+        // 还原
+        this.searchText = ''
+        this.results = []
+      }, 500)
+    },
+    /**
+     * @description 接收用户在列表中选择项目的事件
+     */
+    handleResultsGroupItemClick (path) {
+      // 如果用户选择的就是当前页面 就直接关闭搜索面板
+      if (path === this.$route.path) {
+        this.handleEsc()
+        return
+      }
+      // 用户选择的是其它页面
+      this.handleMenuSelect(path)
+    },
+    /**
+     * @description 接收用户在下拉菜单中选中事件
+     */
+    handleSelect ({ path }) {
+      // 如果用户选择的就是当前页面 就直接关闭搜索面板
+      if (path === this.$route.path) {
+        this.handleEsc()
+        return
+      }
+      // 用户选择的是其它页面
+      this.$nextTick(() => {
+        this.handleMenuSelect(path)
+      })
+    },
+    /**
+     * @augments 关闭输入框的下拉菜单
+     */
+    closeSuggestion () {
+      if (this.$refs.input.activated) {
+        this.$refs.input.suggestions = []
+        this.$refs.input.activated = false
+      }
+    },
+    /**
+     * @augments 接收用户触发的关闭
+     */
+    handleEsc () {
+      this.closeSuggestion()
+      this.$nextTick(() => {
+        this.$emit('close')
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/style/public.scss';
+.panel-search {
+  margin: 20px;
+  .panel-search__input-group {
+    height: 240px;
+    .panel-search__logo {
+      width: 80px;
+      height: 80px;
+      margin-bottom: 20px;
+    }
+    .panel-search__input {
+      width: 500px;
+    }
+    .panel-search__tip {
+      @extend %unable-select;
+      margin-top: 20px;
+      margin-bottom: 40px;
+      font-size: 12px;
+      color: $color-text-sub;
+      .panel-search__key {
+        padding: 1px 5px;
+        margin: 0px 2px;
+        border-radius: 2px;
+        background-color: $color-text-normal;
+        color: $color-bg;
+      }
+    }
+  }
+  .panel-search__results-group {
+    overflow: auto;
+    .panel-search__results-group-inner {
+      margin: -20px;
+    }
+  }
+}
+</style>
--- a/src/layout/header-aside/layout.vue
+++ b/src/layout/header-aside/layout.vue
@@ -8,7 +8,12 @@
    <!-- 主体内容 -->
    <div class="d2-layout-header-aside-content" flex="dir:top">
      <!-- 顶栏 -->
-      <div class="d2-theme-header" flex-box="0">
+      <div
+        class="d2-theme-header"
+        :style="{
+          opacity: this.searchActive ? 0.3 : 1
+        }"
+        flex-box="0">
        <div class="logo-group" :style="{width: asideCollapse ? asideWidthCollapse : asideWidth}">
          <img v-if="asideCollapse" :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/icon-only.png`">
          <img v-else :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/all.png`">
@@ -20,6 +25,7 @@
        <!-- 顶栏右侧 -->
        <div class="d2-header-right">
          <!-- 如果你只想在开发环境显示这个按钮请添加 v-if="$env === 'development'" -->
+          <d2-header-search @click="handleSearchClick"/>
          <d2-header-error-log/>
          <d2-header-fullscreen/>
          <d2-header-theme/>
@@ -33,21 +39,39 @@
          flex-box="0"
          ref="aside"
          class="d2-theme-container-aside"
-          :style="{width: asideCollapse ? asideWidthCollapse : asideWidth}">
+          :style="{
+            width: asideCollapse ? asideWidthCollapse : asideWidth,
+            opacity: this.searchActive ? 0.3 : 1
+          }">
          <d2-menu-side/>
        </div>
        <!-- 主体 -->
-        <div class="d2-theme-container-main" flex-box="1" flex="dir:top">
-          <div class="d2-theme-container-main-header" flex-box="0">
-            <d2-tabs/>
-          </div>
-          <div class="d2-theme-container-main-body" flex-box="1">
-            <transition :name="transitionActive ? 'fade-transverse' : ''">
-              <keep-alive :include="keepAlive">
-                <router-view/>
-              </keep-alive>
-            </transition>
-          </div>
+        <div class="d2-theme-container-main" flex-box="1" flex>
+          <!-- 搜索 -->
+          <transition name="fade-scale">
+            <div v-show="searchActive" class="d2-theme-container-main-layer" flex="dir:top">
+              <d2-panel-search
+                ref="panelSearch"
+                @close="searchPanelClose"/>
+            </div>
+          </transition>
+          <!-- 内容 -->
+          <transition name="fade-scale">
+            <div v-show="!searchActive" class="d2-theme-container-main-layer" flex="dir:top">
+              <!-- tab -->
+              <div class="d2-theme-container-main-header" flex-box="0">
+                <d2-tabs/>
+              </div>
+              <!-- 页面 -->
+              <div class="d2-theme-container-main-body" flex-box="1">
+                <transition :name="transitionActive ? 'fade-transverse' : ''">
+                  <keep-alive :include="keepAlive">
+                    <router-view/>
+                  </keep-alive>
+                </transition>
+              </div>
+            </div>
+          </transition>
        </div>
      </div>
    </div>
@@ -56,13 +80,18 @@

 <script>
 import { mapState, mapGetters, mapMutations } from 'vuex'
+import mixinSearch from './mixins/search'
 export default {
  name: 'd2-layout-header-aside',
+  mixins: [
+    mixinSearch
+  ],
  components: {
    'd2-menu-side': () => import('./components/menu-side'),
    'd2-menu-header': () => import('./components/menu-header'),
    'd2-tabs': () => import('./components/tabs'),
    'd2-header-fullscreen': () => import('./components/header-fullscreen'),
+    'd2-header-search': () => import('./components/header-search'),
    'd2-header-theme': () => import('./components/header-theme'),
    'd2-header-user': () => import('./components/header-user'),
    'd2-header-error-log': () => import('./components/header-error-log')
@@ -97,14 +126,14 @@ export default {
    }
  },
  methods: {
-    ...mapMutations('d2admin/menu', [
-      'asideCollapseToggle'
-    ]),
+    ...mapMutations({
+      menuAsideCollapseToggle: 'd2admin/menu/asideCollapseToggle'
+    }),
    /**
     * 接收点击切换侧边栏的按钮
     */
    handleToggleAside () {
-      this.asideCollapseToggle()
+      this.menuAsideCollapseToggle()
    }
  }
 }
--- a/src/layout/header-aside/mixins/search.js
+++ b/src/layout/header-aside/mixins/search.js
@@ -0,0 +1,58 @@
+import { mapState, mapMutations } from 'vuex'
+
+import hotkeys from 'hotkeys-js'
+
+export default {
+  components: {
+    'd2-panel-search': () => import('../components/panel-search')
+  },
+  mounted () {
+    // 绑定搜索功能快捷键 [ 打开 ]
+    hotkeys(this.searchHotkey.open, event => {
+      event.preventDefault()
+      this.searchPanelOpen()
+    })
+    // 绑定搜索功能快捷键 [ 关闭 ]
+    hotkeys(this.searchHotkey.close, event => {
+      event.preventDefault()
+      this.searchPanelClose()
+    })
+  },
+  beforeDestroy () {
+    hotkeys.unbind(this.searchHotkey.open)
+    hotkeys.unbind(this.searchHotkey.close)
+  },
+  computed: {
+    ...mapState('d2admin', {
+      searchActive: state => state.search.active,
+      searchHotkey: state => state.search.hotkey
+    })
+  },
+  methods: {
+    ...mapMutations({
+      searchToggle: 'd2admin/search/toggle',
+      searchSet: 'd2admin/search/set'
+    }),
+    /**
+     * 接收点击搜索按钮
+     */
+    handleSearchClick () {
+      this.searchToggle()
+      if (this.searchActive) {
+        this.$refs.panelSearch.focus()
+      }
+    },
+    searchPanelOpen () {
+      if (!this.searchActive) {
+        this.searchSet(true)
+        this.$refs.panelSearch.focus()
+      }
+    },
+    // 关闭搜索面板
+    searchPanelClose () {
+      if (this.searchActive) {
+        this.searchSet(false)
+      }
+    }
+  }
+}
--- a/src/main.js
+++ b/src/main.js
@@ -12,6 +12,8 @@ import i18n from './i18n'
 // 核心插件
 import d2Admin from '@/plugin/d2admin'

+// [ 可选插件组件 ]D2-Crud
+import D2Crud from '@d2-projects/d2-crud'
 // [ 可选插件组件 ] 图表
 import VCharts from 'v-charts'
 // [ 可选插件组件 ] 右键菜单
@@ -33,6 +35,7 @@ import { frameInRoutes } from '@/router/routes'
 Vue.use(d2Admin)

 // 可选插件组件
+Vue.use(D2Crud)
 Vue.use(VCharts)
 Vue.use(contentmenu)
 Vue.use(vueJsonTreeView)
@@ -50,6 +53,8 @@ new Vue({
    this.$store.commit('d2admin/page/init', frameInRoutes)
    // 设置顶栏菜单
    this.$store.commit('d2admin/menu/headerSet', menuHeader)
+    // 初始化菜单搜索功能
+    this.$store.commit('d2admin/search/init', menuHeader)
  },
  mounted () {
    // 展示系统信息
--- a/src/menu/index.js
+++ b/src/menu/index.js
@@ -10,8 +10,10 @@ import demoElement from './modules/demo-element'
 import demoPlayground from './modules/demo-playground'
 // 示例
 import demoBusiness from './modules/demo-business'
-// 示例
+// CRUD
 import demoD2Crud from './modules/demo-d2-crud'
+// 第三方网页
+import demoFrame from './modules/demo-frame'

 // 菜单 侧边栏
 export const menuAside = [
@@ -21,7 +23,8 @@ export const menuAside = [
  demoElement,
  demoPlayground,
  demoBusiness,
-  demoD2Crud
+  demoD2Crud,
+  demoFrame
 ]

 // 菜单 顶栏
@@ -40,8 +43,9 @@ export const menuHeader = [
      demoElement,
      demoCharts,
      demoPlugins,
+      demoFrame,
      {
-        title: '跳转外部链接',
+        title: '新窗口打开链接',
        icon: 'link',
        children: [
          { path: 'https://github.com/d2-projects/d2-admin', title: 'D2Admin Github', icon: 'github' },
@@ -51,39 +55,6 @@ export const menuHeader = [
          { path: 'https://segmentfault.com/blog/liyang-note-book', title: 'segmentfault 专栏', icon: 'globe' },
          { path: 'http://www.fairyever.com/', title: 'www.fairyever.com', icon: 'globe' }
        ]
-      },
-      {
-        title: '空菜单演示',
-        icon: 'folder-o',
-        children: [
-          {
-            title: '正在开发 1',
-            children: [
-              { title: '正在开发 1-1' },
-              { title: '正在开发 1-2' }
-            ]
-          },
-          { title: '正在开发 2' },
-          { title: '正在开发 3' }
-        ]
-      },
-      {
-        title: 'svg 菜单图标',
-        iconSvg: 'd2admin',
-        children: [
-          { title: 'add', iconSvg: 'add' },
-          { title: 'alarm', iconSvg: 'alarm' },
-          { title: 'camera', iconSvg: 'camera' },
-          { title: 'history', iconSvg: 'history' },
-          { title: 'like', iconSvg: 'like' },
-          { title: 'love', iconSvg: 'love' },
-          { title: 'message', iconSvg: 'message' },
-          { title: 'notice', iconSvg: 'notice' },
-          { title: 'search', iconSvg: 'search' },
-          { title: 'share', iconSvg: 'share' },
-          { title: 'star', iconSvg: 'star' },
-          { title: 'user', iconSvg: 'user' }
-        ]
      }
    ]
  },
--- a/src/menu/modules/demo-d2-crud.js
+++ b/src/menu/modules/demo-d2-crud.js
@@ -1,9 +1,42 @@
 export default {
  path: '/demo/d2-crud',
  title: 'D2 CRUD',
-  icon: 'table',
+  iconSvg: 'd2-crud',
  children: (pre => [
    { path: `${pre}index`, title: 'D2 CRUD 首页', icon: 'home' },
-    { path: `${pre}demo1`, title: '示例1' }
+    {
+      title: '基础功能',
+      children: [
+        { path: `${pre}demo1`, title: '基础表格' },
+        { path: `${pre}demo2`, title: '带斑马纹表格' },
+        { path: `${pre}demo3`, title: '带边框表格' },
+        { path: `${pre}demo4`, title: '带状态表格' },
+        { path: `${pre}demo5`, title: '固定表头' },
+        { path: `${pre}demo6`, title: '固定列' },
+        { path: `${pre}demo7`, title: '流体高度' },
+        { path: `${pre}demo8`, title: '多级表头' },
+        { path: `${pre}demo9`, title: '单选' },
+        { path: `${pre}demo10`, title: '多选' },
+        { path: `${pre}demo11`, title: '排序' },
+        { path: `${pre}demo12`, title: '筛选' },
+        { path: `${pre}demo13`, title: '表尾合计行' },
+        { path: `${pre}demo14`, title: '合并行' },
+        { path: `${pre}demo15`, title: '合并列' },
+        { path: `${pre}demo24`, title: '表格slot' }
+      ]
+    },
+    {
+      title: '数据操作',
+      children: [
+        { path: `${pre}demo16`, title: '新增数据' },
+        { path: `${pre}demo17`, title: '修改数据' },
+        { path: `${pre}demo18`, title: '删除数据' },
+        { path: `${pre}demo19`, title: '自定义操作列' },
+        { path: `${pre}demo20`, title: '表单组件渲染' },
+        { path: `${pre}demo21`, title: '表单布局' },
+        { path: `${pre}demo22`, title: '表单校验' },
+        { path: `${pre}demo23`, title: '表格内编辑' }
+      ]
+    }
  ])('/demo/d2-crud/')
 }
--- a/src/menu/modules/demo-frame.js
+++ b/src/menu/modules/demo-frame.js
@@ -0,0 +1,8 @@
+export default {
+  path: '/demo/frame',
+  title: '内嵌网页',
+  icon: 'globe',
+  children: (pre => [
+    { path: `${pre}d2-doc`, title: 'D2Admin 中文文档', iconSvg: 'd2-admin' }
+  ])('/demo/frame/')
+}
--- a/src/menu/modules/demo-playground.js
+++ b/src/menu/modules/demo-playground.js
@@ -4,6 +4,39 @@ export default {
  icon: 'flask',
  children: (pre => [
    { path: `${pre}index`, title: '试验台首页', icon: 'home' },
+    {
+      title: 'svg 菜单图标',
+      iconSvg: 'd2-admin',
+      children: [
+        { title: 'add', iconSvg: 'add' },
+        { title: 'alarm', iconSvg: 'alarm' },
+        { title: 'camera', iconSvg: 'camera' },
+        { title: 'history', iconSvg: 'history' },
+        { title: 'like', iconSvg: 'like' },
+        { title: 'love', iconSvg: 'love' },
+        { title: 'message', iconSvg: 'message' },
+        { title: 'notice', iconSvg: 'notice' },
+        { title: 'search', iconSvg: 'search' },
+        { title: 'share', iconSvg: 'share' },
+        { title: 'star', iconSvg: 'star' },
+        { title: 'user', iconSvg: 'user' }
+      ]
+    },
+    {
+      title: '空菜单演示',
+      icon: 'folder-o',
+      children: [
+        {
+          title: '正在开发 1',
+          children: [
+            { title: '正在开发 1-1' },
+            { title: '正在开发 1-2' }
+          ]
+        },
+        { title: '正在开发 2' },
+        { title: '正在开发 3' }
+      ]
+    },
    {
      path: `${pre}page-cache`,
      title: '页面缓存',
--- a/src/pages/demo/d2-crud/demo1/code.js
+++ b/src/pages/demo/d2-crud/demo1/code.js
@@ -0,0 +1,58 @@
+export default `<template>
+  <div>
+    <d2-crud
+      ref="d2Crud"
+      :columns="columns"
+      :data="data"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date',
+          width: '180'
+        },
+        {
+          title: '姓名',
+          key: 'name',
+          width: '180'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ]
+    }
+  },
+  mounted () {
+    console.log(this.$refs.d2Crud.d2Data)
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo1/doc.md
+++ b/src/pages/demo/d2-crud/demo1/doc.md
@@ -0,0 +1 @@
+在 `D2 Crud` 组件中传入 `columns` 和 `data` 对象数组，即可创建一个最基础的表格，`columns` 中的 `key` 需要与 `data` 中对象的key严格对照，可以在 `columns` 对象中传入 `width` 属性来控制列宽。当表格中的数据通过操作变化时，可以通过 `this.$refs.d2Crud.d2Data` 拿到变化后的表格数据。代码如下：
--- a/src/pages/demo/d2-crud/demo1/index.vue
+++ b/src/pages/demo/d2-crud/demo1/index.vue
@@ -1,9 +1,73 @@
 <template>
  <d2-container>
-    <template slot="header">header</template>
-    main
+    <template slot="header">基础表格</template>
+    <d2-crud
+      ref="d2Crud"
+      :columns="columns"
+      :data="data"/>
+    <el-card shadow="never" class="d2-mb">
+      <d2-markdown :source="doc"/>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <d2-highlight :code="code"/>
+    </el-card>
    <template slot="footer">
-      <d2-link-btn title="D2 CRUD" link="https://github.com/d2-projects"/>
+      <d2-link-btn title="文档" link="http://app.d3collection.cn/d2-admin-doc/lastest/zh/ecosystem-d2-crud/"/>
    </template>
  </d2-container>
 </template>
+
+<script>
+import doc from './doc.md'
+import code from './code.js'
+
+export default {
+  data () {
+    return {
+      doc,
+      code,
+      columns: [
+        {
+          title: '日期',
+          key: 'date',
+          width: '180'
+        },
+        {
+          title: '姓名',
+          key: 'name',
+          width: '180'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ]
+    }
+  },
+  mounted () {
+    console.log(this.$refs.d2Crud.d2Data)
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo10/code.js
+++ b/src/pages/demo/d2-crud/demo10/code.js
@@ -0,0 +1,59 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      selection-row
+      @selection-change="handleSelectionChange"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleSelectionChange (selection) {
+      console.log(selection)
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo10/doc.md
+++ b/src/pages/demo/d2-crud/demo10/doc.md
@@ -0,0 +1 @@
+`D2 Crud` 组件提供了多选的支持，只需要配置 `selection-row` 属性即可实现多选。之后由 `selection-change` 事件来管理选择项发生变化时触发的事件，它会传入 `selection` 。代码如下：
--- a/src/pages/demo/d2-crud/demo10/index.vue
+++ b/src/pages/demo/d2-crud/demo10/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <d2-container>
+    <template slot="header">多选</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      selection-row
+      @selection-change="handleSelectionChange">
+    </d2-crud>
+    <el-card shadow="never" class="d2-mb">
+      <d2-markdown :source="doc"/>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <d2-highlight :code="code"/>
+    </el-card>
+    <template slot="footer">
+      <d2-link-btn title="文档" link="http://app.d3collection.cn/d2-admin-doc/lastest/zh/ecosystem-d2-crud/"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import doc from './doc.md'
+import code from './code.js'
+
+export default {
+  data () {
+    return {
+      doc,
+      code,
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleSelectionChange (selection) {
+      console.log(selection)
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo11/code.js
+++ b/src/pages/demo/d2-crud/demo11/code.js
@@ -0,0 +1,60 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date',
+          sortable: true
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ],
+      options: {
+        defaultSort: {
+          prop: 'date',
+          order: 'descending'
+        }
+      }
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo11/doc.md
+++ b/src/pages/demo/d2-crud/demo11/doc.md
@@ -0,0 +1 @@
+在 `columns` 中设置 `sortable` 属性为 `true` ，即可实现以该列为基准的排序。可以通过 `options` 的 `defaultSort` 属性设置默认的排序列和排序顺序。代码如下：
--- a/src/pages/demo/d2-crud/demo11/index.vue
+++ b/src/pages/demo/d2-crud/demo11/index.vue
@@ -0,0 +1,76 @@
+<template>
+  <d2-container>
+    <template slot="header">排序</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options">
+    </d2-crud>
+    <el-card shadow="never" class="d2-mb">
+      <d2-markdown :source="doc"/>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <d2-highlight :code="code"/>
+    </el-card>
+    <template slot="footer">
+      <d2-link-btn title="文档" link="http://app.d3collection.cn/d2-admin-doc/lastest/zh/ecosystem-d2-crud/"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import doc from './doc.md'
+import code from './code.js'
+
+export default {
+  data () {
+    return {
+      doc,
+      code,
+      columns: [
+        {
+          title: '日期',
+          key: 'date',
+          sortable: true
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ],
+      options: {
+        defaultSort: {
+          prop: 'date',
+          order: 'descending'
+        }
+      }
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo12/code.js
+++ b/src/pages/demo/d2-crud/demo12/code.js
@@ -0,0 +1,68 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        },
+        {
+          title: '标签',
+          key: 'tag',
+          filters: [
+            { text: '家', value: '家' },
+            { text: '公司', value: '公司' }
+          ],
+          filterMethod (value, row) {
+            return row.tag === value
+          },
+          filterPlacement: 'bottom-end'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+          tag: '家'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄',
+          tag: '公司'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄',
+          tag: '家'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄',
+          tag: '公司'
+        }
+      ]
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo12/doc.md
+++ b/src/pages/demo/d2-crud/demo12/doc.md
@@ -0,0 +1 @@
+在 `columns` 中设置 `filters` `filterMethod` 属性即可开启该列的筛选，`filters` 是一个数组， `filterMethod` 是一个方法，它用于决定某些数据是否显示，会传入三个参数：`value`, `row` 和 `column`。代码如下：
--- a/src/pages/demo/d2-crud/demo12/index.vue
+++ b/src/pages/demo/d2-crud/demo12/index.vue
@@ -0,0 +1,84 @@
+<template>
+  <d2-container>
+    <template slot="header">筛选</template>
+    <d2-crud
+      :columns="columns"
+      :data="data">
+    </d2-crud>
+    <el-card shadow="never" class="d2-mb">
+      <d2-markdown :source="doc"/>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <d2-highlight :code="code"/>
+    </el-card>
+    <template slot="footer">
+      <d2-link-btn title="文档" link="http://app.d3collection.cn/d2-admin-doc/lastest/zh/ecosystem-d2-crud/"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import doc from './doc.md'
+import code from './code.js'
+
+export default {
+  data () {
+    return {
+      doc,
+      code,
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        },
+        {
+          title: '标签',
+          key: 'tag',
+          filters: [
+            { text: '家', value: '家' },
+            { text: '公司', value: '公司' }
+          ],
+          filterMethod (value, row) {
+            return row.tag === value
+          },
+          filterPlacement: 'bottom-end'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+          tag: '家'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄',
+          tag: '公司'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄',
+          tag: '家'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄',
+          tag: '公司'
+        }
+      ]
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo13/code.js
+++ b/src/pages/demo/d2-crud/demo13/code.js
@@ -0,0 +1,105 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: 'ID',
+          key: 'id'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '数值 1',
+          key: 'amount1'
+        },
+        {
+          title: '数值 2',
+          key: 'amount2'
+        },
+        {
+          title: '数值 3',
+          key: 'amount3'
+        }
+      ],
+      data: [
+        {
+          id: '12987122',
+          name: '王小虎',
+          amount1: '234',
+          amount2: '3.2',
+          amount3: 10
+        },
+        {
+          id: '12987123',
+          name: '王小虎',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12
+        },
+        {
+          id: '12987124',
+          name: '王小虎',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9
+        },
+        {
+          id: '12987125',
+          name: '王小虎',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17
+        },
+        {
+          id: '12987126',
+          name: '王小虎',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15
+        }
+      ],
+      options: {
+        showSummary: true,
+        summaryMethod (param) {
+          const { columns, data } = param
+          const sums = []
+          columns.forEach((column, index) => {
+            if (index === 0) {
+              sums[index] = '总价'
+              return
+            }
+            const values = data.map(item => Number(item[column.property]))
+            if (!values.every(value => isNaN(value))) {
+              sums[index] = values.reduce((prev, curr) => {
+                const value = Number(curr)
+                if (!isNaN(value)) {
+                  return prev + curr
+                } else {
+                  return prev
+                }
+              }, 0)
+              sums[index] += ' 元'
+            } else {
+              sums[index] = 'N/A'
+            }
+          })
+
+          return sums
+        }
+      }
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo13/doc.md
+++ b/src/pages/demo/d2-crud/demo13/doc.md
@@ -0,0 +1 @@
+将 `options` 中的 `showSummary` 设置为 `true` 就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过 `sumText` 配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用 `summaryMethod` 并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中。代码如下：
--- a/src/pages/demo/d2-crud/demo13/index.vue
+++ b/src/pages/demo/d2-crud/demo13/index.vue
@@ -0,0 +1,121 @@
+<template>
+  <d2-container>
+    <template slot="header">表尾合计行</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options">
+    </d2-crud>
+    <el-card shadow="never" class="d2-mb">
+      <d2-markdown :source="doc"/>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <d2-highlight :code="code"/>
+    </el-card>
+    <template slot="footer">
+      <d2-link-btn title="文档" link="http://app.d3collection.cn/d2-admin-doc/lastest/zh/ecosystem-d2-crud/"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import doc from './doc.md'
+import code from './code.js'
+
+export default {
+  data () {
+    return {
+      doc,
+      code,
+      columns: [
+        {
+          title: 'ID',
+          key: 'id'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '数值 1',
+          key: 'amount1'
+        },
+        {
+          title: '数值 2',
+          key: 'amount2'
+        },
+        {
+          title: '数值 3',
+          key: 'amount3'
+        }
+      ],
+      data: [
+        {
+          id: '12987122',
+          name: '王小虎',
+          amount1: '234',
+          amount2: '3.2',
+          amount3: 10
+        },
+        {
+          id: '12987123',
+          name: '王小虎',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12
+        },
+        {
+          id: '12987124',
+          name: '王小虎',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9
+        },
+        {
+          id: '12987125',
+          name: '王小虎',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17
+        },
+        {
+          id: '12987126',
+          name: '王小虎',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15
+        }
+      ],
+      options: {
+        showSummary: true,
+        summaryMethod (param) {
+          const { columns, data } = param
+          const sums = []
+          columns.forEach((column, index) => {
+            if (index === 0) {
+              sums[index] = '总价'
+              return
+            }
+            const values = data.map(item => Number(item[column.property]))
+            if (!values.every(value => isNaN(value))) {
+              sums[index] = values.reduce((prev, curr) => {
+                const value = Number(curr)
+                if (!isNaN(value)) {
+                  return prev + curr
+                } else {
+                  return prev
+                }
+              }, 0)
+              sums[index] += ' 元'
+            } else {
+              sums[index] = 'N/A'
+            }
+          })
+
+          return sums
+        }
+      }
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo14/code.js
+++ b/src/pages/demo/d2-crud/demo14/code.js
@@ -0,0 +1,88 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: 'ID',
+          key: 'id'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '数值 1',
+          key: 'amount1'
+        },
+        {
+          title: '数值 2',
+          key: 'amount2'
+        },
+        {
+          title: '数值 3',
+          key: 'amount3'
+        }
+      ],
+      data: [
+        {
+          id: '12987122',
+          name: '王小虎',
+          amount1: '234',
+          amount2: '3.2',
+          amount3: 10
+        },
+        {
+          id: '12987123',
+          name: '王小虎',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12
+        },
+        {
+          id: '12987124',
+          name: '王小虎',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9
+        },
+        {
+          id: '12987125',
+          name: '王小虎',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17
+        },
+        {
+          id: '12987126',
+          name: '王小虎',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15
+        }
+      ],
+      options: {
+        border: true,
+        spanMethod ({ row, column, rowIndex, columnIndex }) {
+          if (rowIndex % 2 === 0) {
+            if (columnIndex === 0) {
+              return [1, 2]
+            } else if (columnIndex === 1) {
+              return [0, 0]
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo14/doc.md
+++ b/src/pages/demo/d2-crud/demo14/doc.md
@@ -0,0 +1 @@
+通过给 `options` 传入 `spanMethod` 方法可以实现合并行，方法的参数是一个对象，里面包含当前行 `row` 、当前列 `column` 、当前行号 `rowIndex` 、当前列号 `columnIndex` 四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表 `rowspan` ，第二个元素代表 `colspan` 。代码如下：
--- a/src/pages/demo/d2-crud/demo14/index.vue
+++ b/src/pages/demo/d2-crud/demo14/index.vue
@@ -0,0 +1,104 @@
+<template>
+  <d2-container>
+    <template slot="header">合并行</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options">
+    </d2-crud>
+    <el-card shadow="never" class="d2-mb">
+      <d2-markdown :source="doc"/>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <d2-highlight :code="code"/>
+    </el-card>
+    <template slot="footer">
+      <d2-link-btn title="文档" link="http://app.d3collection.cn/d2-admin-doc/lastest/zh/ecosystem-d2-crud/"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import doc from './doc.md'
+import code from './code.js'
+
+export default {
+  data () {
+    return {
+      doc,
+      code,
+      columns: [
+        {
+          title: 'ID',
+          key: 'id'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '数值 1',
+          key: 'amount1'
+        },
+        {
+          title: '数值 2',
+          key: 'amount2'
+        },
+        {
+          title: '数值 3',
+          key: 'amount3'
+        }
+      ],
+      data: [
+        {
+          id: '12987122',
+          name: '王小虎',
+          amount1: '234',
+          amount2: '3.2',
+          amount3: 10
+        },
+        {
+          id: '12987123',
+          name: '王小虎',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12
+        },
+        {
+          id: '12987124',
+          name: '王小虎',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9
+        },
+        {
+          id: '12987125',
+          name: '王小虎',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17
+        },
+        {
+          id: '12987126',
+          name: '王小虎',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15
+        }
+      ],
+      options: {
+        border: true,
+        spanMethod ({ row, column, rowIndex, columnIndex }) {
+          if (rowIndex % 2 === 0) {
+            if (columnIndex === 0) {
+              return [1, 2]
+            } else if (columnIndex === 1) {
+              return [0, 0]
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo15/code.js
+++ b/src/pages/demo/d2-crud/demo15/code.js
@@ -0,0 +1,94 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: 'ID',
+          key: 'id'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '数值 1',
+          key: 'amount1'
+        },
+        {
+          title: '数值 2',
+          key: 'amount2'
+        },
+        {
+          title: '数值 3',
+          key: 'amount3'
+        }
+      ],
+      data: [
+        {
+          id: '12987122',
+          name: '王小虎',
+          amount1: '234',
+          amount2: '3.2',
+          amount3: 10
+        },
+        {
+          id: '12987123',
+          name: '王小虎',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12
+        },
+        {
+          id: '12987124',
+          name: '王小虎',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9
+        },
+        {
+          id: '12987125',
+          name: '王小虎',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17
+        },
+        {
+          id: '12987126',
+          name: '王小虎',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15
+        }
+      ],
+      options: {
+        border: true,
+        spanMethod ({ row, column, rowIndex, columnIndex }) {
+          if (columnIndex === 0) {
+            if (rowIndex % 2 === 0) {
+              return {
+                rowspan: 2,
+                colspan: 1
+              }
+            } else {
+              return {
+                rowspan: 0,
+                colspan: 0
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo15/doc.md
+++ b/src/pages/demo/d2-crud/demo15/doc.md
@@ -0,0 +1 @@
+通过给 `options` 传入 `spanMethod` 方法可以实现合并行，方法的参数是一个对象，里面包含当前行 `row` 、当前列 `column` 、当前行号 `rowIndex` 、当前列号 `columnIndex` 四个属性。该函数可以返回一个键名为 `rowspan` 和 `colspan` 的对象。代码如下：
--- a/src/pages/demo/d2-crud/demo15/index.vue
+++ b/src/pages/demo/d2-crud/demo15/index.vue
@@ -0,0 +1,110 @@
+<template>
+  <d2-container>
+    <template slot="header">合并列</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options">
+    </d2-crud>
+    <el-card shadow="never" class="d2-mb">
+      <d2-markdown :source="doc"/>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <d2-highlight :code="code"/>
+    </el-card>
+    <template slot="footer">
+      <d2-link-btn title="文档" link="http://app.d3collection.cn/d2-admin-doc/lastest/zh/ecosystem-d2-crud/"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import doc from './doc.md'
+import code from './code.js'
+
+export default {
+  data () {
+    return {
+      doc,
+      code,
+      columns: [
+        {
+          title: 'ID',
+          key: 'id'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '数值 1',
+          key: 'amount1'
+        },
+        {
+          title: '数值 2',
+          key: 'amount2'
+        },
+        {
+          title: '数值 3',
+          key: 'amount3'
+        }
+      ],
+      data: [
+        {
+          id: '12987122',
+          name: '王小虎',
+          amount1: '234',
+          amount2: '3.2',
+          amount3: 10
+        },
+        {
+          id: '12987123',
+          name: '王小虎',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12
+        },
+        {
+          id: '12987124',
+          name: '王小虎',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9
+        },
+        {
+          id: '12987125',
+          name: '王小虎',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17
+        },
+        {
+          id: '12987126',
+          name: '王小虎',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15
+        }
+      ],
+      options: {
+        border: true,
+        spanMethod ({ row, column, rowIndex, columnIndex }) {
+          if (columnIndex === 0) {
+            if (rowIndex % 2 === 0) {
+              return {
+                rowspan: 2,
+                colspan: 1
+              }
+            } else {
+              return {
+                rowspan: 0,
+                colspan: 0
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo16/code.js
+++ b/src/pages/demo/d2-crud/demo16/code.js
@@ -0,0 +1,103 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      add-mode
+      :add-button="addButton"
+      :form-template="formTemplate"
+      :form-options="formOptions"
+      @row-add="handleRowAdd"
+      @dialog-cancel="handleDialogCancel"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+          {
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄'
+          },
+          {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄'
+          },
+          {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+          }
+      ],
+      addButton: {
+        icon: 'el-icon-plus',
+        size: 'small'
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: '2016-05-05'
+        },
+        name: {
+          title: '姓名',
+          value: '王小虎'
+        },
+        address: {
+          title: '地址',
+          value: '上海市普陀区金沙江路 1520 弄'
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false
+      }
+    }
+  },
+  methods: {
+    handleRowAdd (row, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        console.log(row)
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+        done()
+        this.formOptions.saveLoading = false
+      }, 300);
+    },
+    handleDialogCancel (done) {
+      this.$message({
+        message: '取消保存',
+        type: 'warning'
+      });
+      done()
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo16/doc.md
+++ b/src/pages/demo/d2-crud/demo16/doc.md
@@ -0,0 +1 @@
+通过给 `D2 Crud` 传入 `add-mode` 可开启新增模式，需要传入 `form-template` 来为新增的表单添加模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态，`addButton` 可以控制表格顶部新增按钮的样式， `row-add` 事件控制数据新增，接收两个参数： `row` 是当前新增行的数据， `done` 用于控制保存成功，可以在 `done()` 之前加入自己的逻辑代码。代码如下：
--- a/src/pages/demo/d2-crud/demo16/index.vue
+++ b/src/pages/demo/d2-crud/demo16/index.vue
@@ -0,0 +1,119 @@
+<template>
+  <d2-container>
+    <template slot="header">新增数据</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      add-mode
+      :add-button="addButton"
+      :form-template="formTemplate"
+      :form-options="formOptions"
+      @row-add="handleRowAdd"
+      @dialog-cancel="handleDialogCancel">
+    </d2-crud>
+    <el-card shadow="never" class="d2-mb">
+      <d2-markdown :source="doc"/>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <d2-highlight :code="code"/>
+    </el-card>
+    <template slot="footer">
+      <d2-link-btn title="文档" link="http://app.d3collection.cn/d2-admin-doc/lastest/zh/ecosystem-d2-crud/"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import doc from './doc.md'
+import code from './code.js'
+
+export default {
+  data () {
+    return {
+      doc,
+      code,
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ],
+      addButton: {
+        icon: 'el-icon-plus',
+        size: 'small'
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: '2016-05-05'
+        },
+        name: {
+          title: '姓名',
+          value: '王小虎'
+        },
+        address: {
+          title: '地址',
+          value: '上海市普陀区金沙江路 1520 弄'
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false
+      }
+    }
+  },
+  methods: {
+    handleRowAdd (row, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        console.log(row)
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        })
+        done()
+        this.formOptions.saveLoading = false
+      }, 300)
+    },
+    handleDialogCancel (done) {
+      this.$message({
+        message: '取消保存',
+        type: 'warning'
+      })
+      done()
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo17/code.js
+++ b/src/pages/demo/d2-crud/demo17/code.js
@@ -0,0 +1,108 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      :rowHandle="rowHandle"
+      :form-template="formTemplate"
+      :form-options="formOptions"
+      @row-edit="handleRowEdit"
+      @dialog-cancel="handleDialogCancel"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ],
+      rowHandle: {
+        columnHeader: '编辑表格',
+        edit: {
+          icon: 'el-icon-edit',
+          text: '点我进行编辑',
+          size: 'small',
+          fixed: 'right'
+        }
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: ''
+        },
+        name: {
+          title: '姓名',
+          value: ''
+        },
+        address: {
+          title: '地址',
+          value: ''
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false
+      }
+    }
+  },
+  methods: {
+    handleRowEdit ({index, row}, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        console.log(index)
+        console.log(row)
+        this.$message({
+          message: '编辑成功',
+          type: 'success'
+        })
+        done()
+        this.formOptions.saveLoading = false
+      }, 300)
+    },
+    handleDialogCancel (done) {
+      this.$message({
+        message: '取消编辑',
+        type: 'warning'
+      })
+      done()
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo17/doc.md
+++ b/src/pages/demo/d2-crud/demo17/doc.md
@@ -0,0 +1 @@
+通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `columnHeader` 可以自定义操作列的表头，传入 `edit` 对象可以开启编辑模式，需要传入 `form-template` 来为编辑添加模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-edit` 事件控制数据编辑，参数： `index` 是当前编辑行的索引， `row` 是当前编辑行的数据， `done` 用于控制编辑成功，可以在 `done()` 之前加入自己的逻辑代码。代码如下：
--- a/src/pages/demo/d2-crud/demo17/index.vue
+++ b/src/pages/demo/d2-crud/demo17/index.vue
@@ -0,0 +1,124 @@
+<template>
+  <d2-container>
+    <template slot="header">修改数据</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      :rowHandle="rowHandle"
+      :form-template="formTemplate"
+      :form-options="formOptions"
+      @row-edit="handleRowEdit"
+      @dialog-cancel="handleDialogCancel">
+    </d2-crud>
+    <el-card shadow="never" class="d2-mb">
+      <d2-markdown :source="doc"/>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <d2-highlight :code="code"/>
+    </el-card>
+    <template slot="footer">
+      <d2-link-btn title="文档" link="http://app.d3collection.cn/d2-admin-doc/lastest/zh/ecosystem-d2-crud/"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import doc from './doc.md'
+import code from './code.js'
+
+export default {
+  data () {
+    return {
+      doc,
+      code,
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ],
+      rowHandle: {
+        columnHeader: '编辑表格',
+        edit: {
+          icon: 'el-icon-edit',
+          text: '点我进行编辑',
+          size: 'small',
+          fixed: 'right'
+        }
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: ''
+        },
+        name: {
+          title: '姓名',
+          value: ''
+        },
+        address: {
+          title: '地址',
+          value: ''
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false
+      }
+    }
+  },
+  methods: {
+    handleRowEdit ({index, row}, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        console.log(index)
+        console.log(row)
+        this.$message({
+          message: '编辑成功',
+          type: 'success'
+        })
+        done()
+        this.formOptions.saveLoading = false
+      }, 300)
+    },
+    handleDialogCancel (done) {
+      this.$message({
+        message: '取消编辑',
+        type: 'warning'
+      })
+      done()
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo18/code.js
+++ b/src/pages/demo/d2-crud/demo18/code.js
@@ -0,0 +1,76 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      :rowHandle="rowHandle"
+      @row-remove="handleRowRemove"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ],
+      rowHandle: {
+        remove: {
+          icon: 'el-icon-delete',
+          size: 'small',
+          fixed: 'right',
+          confirm: true
+        }
+      }
+    }
+  },
+  methods: {
+    handleRowRemove ({index, row}, done) {
+      setTimeout(() => {
+        console.log(index)
+        console.log(row)
+        this.$message({
+          message: '删除成功',
+          type: 'success'
+        })
+        done()
+      }, 300)
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo18/doc.md
+++ b/src/pages/demo/d2-crud/demo18/doc.md
@@ -0,0 +1 @@
+通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `remove` 对象可以开启删除模式，`confirm` 属性的值为 `Boolean` 类型，控制删除前是否弹出confirm框进行提示， `row-remove` 事件控制数据删除，参数： `index` 是当前删除行的索引， `row` 是当前删除行的数据， `done` 用于控制删除成功，可以在 `done()` 之前加入自己的逻辑代码。代码如下：
--- a/src/pages/demo/d2-crud/demo18/index.vue
+++ b/src/pages/demo/d2-crud/demo18/index.vue
@@ -0,0 +1,92 @@
+<template>
+  <d2-container>
+    <template slot="header">删除数据</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      :rowHandle="rowHandle"
+      @row-remove="handleRowRemove">
+    </d2-crud>
+    <el-card shadow="never" class="d2-mb">
+      <d2-markdown :source="doc"/>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <d2-highlight :code="code"/>
+    </el-card>
+    <template slot="footer">
+      <d2-link-btn title="文档" link="http://app.d3collection.cn/d2-admin-doc/lastest/zh/ecosystem-d2-crud/"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import doc from './doc.md'
+import code from './code.js'
+
+export default {
+  data () {
+    return {
+      doc,
+      code,
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ],
+      rowHandle: {
+        remove: {
+          icon: 'el-icon-delete',
+          size: 'small',
+          fixed: 'right',
+          confirm: true
+        }
+      }
+    }
+  },
+  methods: {
+    handleRowRemove ({index, row}, done) {
+      setTimeout(() => {
+        console.log(index)
+        console.log(row)
+        this.$message({
+          message: '删除成功',
+          type: 'success'
+        })
+        done()
+      }, 300)
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo19/code.js
+++ b/src/pages/demo/d2-crud/demo19/code.js
@@ -0,0 +1,71 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      :rowHandle="rowHandle"
+      @custom-emit-1="handleCustomEvent"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ],
+      rowHandle: {
+        custom: [
+          {
+            text: '自定义按钮',
+            type: 'warning',
+            size: 'small',
+            emit: 'custom-emit-1'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    handleCustomEvent ({index, row}) {
+      console.log(index)
+      console.log(row)
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo19/doc.md
+++ b/src/pages/demo/d2-crud/demo19/doc.md
@@ -0,0 +1 @@
+通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `custom` 数组对象可以自定义模式，数组中每一个对象定义一个自定义按钮，对象属性支持所有的 `el-button` 属性， `emit` 属性定义了监听的事件，例如 `emit` 的值为 `custom-emit-1`，就在 `D2 Crud` 中监听 `custom-emit-1` 事件 监听的事件参数： `index` 是当前行的索引， `row` 是当前行的数据。代码如下：
--- a/src/pages/demo/d2-crud/demo19/index.vue
+++ b/src/pages/demo/d2-crud/demo19/index.vue
@@ -0,0 +1,87 @@
+<template>
+  <d2-container>
+    <template slot="header">自定义操作列</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      :rowHandle="rowHandle"
+      @custom-emit-1="handleCustomEvent">
+    </d2-crud>
+    <el-card shadow="never" class="d2-mb">
+      <d2-markdown :source="doc"/>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <d2-highlight :code="code"/>
+    </el-card>
+    <template slot="footer">
+      <d2-link-btn title="文档" link="http://app.d3collection.cn/d2-admin-doc/lastest/zh/ecosystem-d2-crud/"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import doc from './doc.md'
+import code from './code.js'
+
+export default {
+  data () {
+    return {
+      doc,
+      code,
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ],
+      rowHandle: {
+        custom: [
+          {
+            text: '自定义按钮',
+            type: 'warning',
+            size: 'small',
+            emit: 'custom-emit-1'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    handleCustomEvent ({index, row}) {
+      console.log(index)
+      console.log(row)
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo2/code.js
+++ b/src/pages/demo/d2-crud/demo2/code.js
@@ -0,0 +1,58 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date',
+          width: '180'
+        },
+        {
+          title: '姓名',
+          key: 'name',
+          width: '180'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ],
+      options: {
+        stripe: true
+      }
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo2/doc.md
+++ b/src/pages/demo/d2-crud/demo2/doc.md
@@ -0,0 +1 @@
+`options` 对象可以对表格进行配置，其中 `stripe` 属性可以创建带斑马纹的表格。它接受一个 `Boolean` ，设置为 `true` 即为启用。代码如下：
--- a/src/pages/demo/d2-crud/demo2/index.vue
+++ b/src/pages/demo/d2-crud/demo2/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <d2-container>
+    <template slot="header">带斑马纹表格</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options"/>
+    <el-card shadow="never" class="d2-mb">
+      <d2-markdown :source="doc"/>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <d2-highlight :code="code"/>
+    </el-card>
+    <template slot="footer">
+      <d2-link-btn title="文档" link="http://app.d3collection.cn/d2-admin-doc/lastest/zh/ecosystem-d2-crud/"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import doc from './doc.md'
+import code from './code.js'
+
+export default {
+  data () {
+    return {
+      doc,
+      code,
+      columns: [
+        {
+          title: '日期',
+          key: 'date',
+          width: '180'
+        },
+        {
+          title: '姓名',
+          key: 'name',
+          width: '180'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ],
+      options: {
+        stripe: true
+      }
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo20/code.js
+++ b/src/pages/demo/d2-crud/demo20/code.js
@@ -0,0 +1,133 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      :rowHandle="rowHandle"
+      :form-template="formTemplate"
+      :form-options="formOptions"
+      @row-edit="handleRowEdit"
+      @dialog-cancel="handleDialogCancel"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ],
+      rowHandle: {
+        edit: {
+          icon: 'el-icon-edit',
+          text: '点我查看表单组件渲染',
+          size: 'small',
+          fixed: 'right'
+        }
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: '',
+          component: {
+            name: 'el-date-picker',
+            span: 12
+          }
+        },
+        name: {
+          title: '姓名',
+          value: '',
+          component: {
+            name: 'el-select',
+            options: [
+              {
+                value: '王小虎',
+                label: '王小虎'
+              },
+              {
+                value: '王中虎',
+                label: '王中虎'
+              },
+              {
+                value: '王老虎',
+                label: '王老虎'
+              }
+            ],
+            span: 12
+          }
+        },
+        address: {
+          title: '地址',
+          value: '',
+          component: {
+            span: 18
+          }
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false,
+        gutter: 20
+      }
+    }
+  },
+  methods: {
+    handleRowEdit ({index, row}, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        console.log(index)
+        console.log(row)
+        this.$message({
+          message: '编辑成功',
+          type: 'success'
+        })
+        done()
+        this.formOptions.saveLoading = false
+      }, 300)
+    },
+    handleDialogCancel (done) {
+      this.$message({
+        message: '取消编辑',
+        type: 'warning'
+      })
+      done()
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo20/doc.md
+++ b/src/pages/demo/d2-crud/demo20/doc.md
@@ -0,0 +1 @@
+向 `form-template` 的 `component` 对象传入 `name` 属性来控制渲染的组件，默认为 `el-input` ，支持的组件有 `el-input-number` `el-radio` `el-checkbox` `el-select` `el-cascader` `el-switch` `el-slider` `el-time-select` `el-time-picker` `el-date-picker` `el-rate` `el-color-picker` ，也可以使用 `render函数` 自己渲染组件，只需在 `component` 中传入 `renderFuntion` ，接收一个参数 `h`，[render函数使用方法](https://cn.vuejs.org/v2/guide/render-function.html)。代码如下：
--- a/src/pages/demo/d2-crud/demo20/index.vue
+++ b/src/pages/demo/d2-crud/demo20/index.vue
@@ -0,0 +1,149 @@
+<template>
+  <d2-container>
+    <template slot="header">表单组件渲染</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      :rowHandle="rowHandle"
+      :form-template="formTemplate"
+      :form-options="formOptions"
+      @row-edit="handleRowEdit"
+      @dialog-cancel="handleDialogCancel">
+    </d2-crud>
+    <el-card shadow="never" class="d2-mb">
+      <d2-markdown :source="doc"/>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <d2-highlight :code="code"/>
+    </el-card>
+    <template slot="footer">
+      <d2-link-btn title="文档" link="http://app.d3collection.cn/d2-admin-doc/lastest/zh/ecosystem-d2-crud/"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import doc from './doc.md'
+import code from './code.js'
+
+export default {
+  data () {
+    return {
+      doc,
+      code,
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ],
+      rowHandle: {
+        edit: {
+          icon: 'el-icon-edit',
+          text: '点我查看表单组件渲染',
+          size: 'small',
+          fixed: 'right'
+        }
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: '',
+          component: {
+            name: 'el-date-picker',
+            span: 12
+          }
+        },
+        name: {
+          title: '姓名',
+          value: '',
+          component: {
+            name: 'el-select',
+            options: [
+              {
+                value: '王小虎',
+                label: '王小虎'
+              },
+              {
+                value: '王中虎',
+                label: '王中虎'
+              },
+              {
+                value: '王老虎',
+                label: '王老虎'
+              }
+            ],
+            span: 12
+          }
+        },
+        address: {
+          title: '地址',
+          value: '',
+          component: {
+            span: 18
+          }
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false,
+        gutter: 20
+      }
+    }
+  },
+  methods: {
+    handleRowEdit ({index, row}, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        console.log(index)
+        console.log(row)
+        this.$message({
+          message: '编辑成功',
+          type: 'success'
+        })
+        done()
+        this.formOptions.saveLoading = false
+      }, 300)
+    },
+    handleDialogCancel (done) {
+      this.$message({
+        message: '取消编辑',
+        type: 'warning'
+      })
+      done()
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo21/code.js
+++ b/src/pages/demo/d2-crud/demo21/code.js
@@ -0,0 +1,117 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      :rowHandle="rowHandle"
+      :form-template="formTemplate"
+      :form-options="formOptions"
+      @row-edit="handleRowEdit"
+      @dialog-cancel="handleDialogCancel"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ],
+      rowHandle: {
+        edit: {
+          icon: 'el-icon-edit',
+          text: '点我查看表单布局',
+          size: 'small',
+          fixed: 'right'
+        }
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: '',
+          component: {
+            span: 12
+          }
+        },
+        name: {
+          title: '姓名',
+          value: '',
+          component: {
+            span: 12
+          }
+        },
+        address: {
+          title: '地址',
+          value: '',
+          component: {
+            span: 18
+          }
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false,
+        gutter: 20
+      }
+    }
+  },
+  methods: {
+    handleRowEdit ({index, row}, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        console.log(index)
+        console.log(row)
+        this.$message({
+          message: '编辑成功',
+          type: 'success'
+        })
+        done()
+        this.formOptions.saveLoading = false
+      }, 300)
+    },
+    handleDialogCancel (done) {
+      this.$message({
+        message: '取消编辑',
+        type: 'warning'
+      })
+      done()
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo21/doc.md
+++ b/src/pages/demo/d2-crud/demo21/doc.md
@@ -0,0 +1 @@
+向 `form-options` 中传入 `gutter` 属性来控制栅格间隔，向 `form-template` 的 `component` 对象传入 `span` 属性来控制栅格占据的列数。代码如下：
--- a/src/pages/demo/d2-crud/demo21/index.vue
+++ b/src/pages/demo/d2-crud/demo21/index.vue
@@ -0,0 +1,133 @@
+<template>
+  <d2-container>
+    <template slot="header">表单布局</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      :rowHandle="rowHandle"
+      :form-template="formTemplate"
+      :form-options="formOptions"
+      @row-edit="handleRowEdit"
+      @dialog-cancel="handleDialogCancel">
+    </d2-crud>
+    <el-card shadow="never" class="d2-mb">
+      <d2-markdown :source="doc"/>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <d2-highlight :code="code"/>
+    </el-card>
+    <template slot="footer">
+      <d2-link-btn title="文档" link="http://app.d3collection.cn/d2-admin-doc/lastest/zh/ecosystem-d2-crud/"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import doc from './doc.md'
+import code from './code.js'
+
+export default {
+  data () {
+    return {
+      doc,
+      code,
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ],
+      rowHandle: {
+        edit: {
+          icon: 'el-icon-edit',
+          text: '点我查看表单布局',
+          size: 'small',
+          fixed: 'right'
+        }
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: '',
+          component: {
+            span: 12
+          }
+        },
+        name: {
+          title: '姓名',
+          value: '',
+          component: {
+            span: 12
+          }
+        },
+        address: {
+          title: '地址',
+          value: '',
+          component: {
+            span: 18
+          }
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false,
+        gutter: 20
+      }
+    }
+  },
+  methods: {
+    handleRowEdit ({index, row}, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        console.log(index)
+        console.log(row)
+        this.$message({
+          message: '编辑成功',
+          type: 'success'
+        })
+        done()
+        this.formOptions.saveLoading = false
+      }, 300)
+    },
+    handleDialogCancel (done) {
+      this.$message({
+        message: '取消编辑',
+        type: 'warning'
+      })
+      done()
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo22/code.js
+++ b/src/pages/demo/d2-crud/demo22/code.js
@@ -0,0 +1,110 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      add-mode
+      :add-button="addButton"
+      :form-template="formTemplate"
+      :form-options="formOptions"
+      :form-rules="formRules"
+      @row-add="handleRowAdd"
+      @dialog-cancel="handleDialogCancel"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ],
+      addButton: {
+        text: '点我查看表单校验',
+        icon: 'el-icon-plus',
+        size: 'small'
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: ''
+        },
+        name: {
+          title: '姓名',
+          value: ''
+        },
+        address: {
+          title: '地址',
+          value: ''
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false
+      },
+      formRules: {
+        date: [ { required: true, message: '请输入日期', trigger: 'blur' } ],
+        name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ],
+        address: [ { required: true, message: '请输入地址', trigger: 'blur' } ]
+      }
+    }
+  },
+  methods: {
+    handleRowAdd (row, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        console.log(row)
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+        done()
+        this.formOptions.saveLoading = false
+      }, 300);
+    },
+    handleDialogCancel (done) {
+      this.$message({
+        message: '取消保存',
+        type: 'warning'
+      });
+      done()
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo22/doc.md
+++ b/src/pages/demo/d2-crud/demo22/doc.md
@@ -0,0 +1 @@
+通过给 `D2 Crud` 传入 `form-rules` 可开启表单校验，校验规则参见：[async-validator](https://github.com/yiminghe/async-validator)。代码如下：
--- a/src/pages/demo/d2-crud/demo22/index.vue
+++ b/src/pages/demo/d2-crud/demo22/index.vue
@@ -0,0 +1,126 @@
+<template>
+  <d2-container>
+    <template slot="header">表单校验</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      add-mode
+      :add-button="addButton"
+      :form-template="formTemplate"
+      :form-options="formOptions"
+      :form-rules="formRules"
+      @row-add="handleRowAdd"
+      @dialog-cancel="handleDialogCancel">
+    </d2-crud>
+    <el-card shadow="never" class="d2-mb">
+      <d2-markdown :source="doc"/>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <d2-highlight :code="code"/>
+    </el-card>
+    <template slot="footer">
+      <d2-link-btn title="文档" link="http://app.d3collection.cn/d2-admin-doc/lastest/zh/ecosystem-d2-crud/"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import doc from './doc.md'
+import code from './code.js'
+
+export default {
+  data () {
+    return {
+      doc,
+      code,
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ],
+      addButton: {
+        text: '点我查看表单校验',
+        icon: 'el-icon-plus',
+        size: 'small'
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: ''
+        },
+        name: {
+          title: '姓名',
+          value: ''
+        },
+        address: {
+          title: '地址',
+          value: ''
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false
+      },
+      formRules: {
+        date: [ { required: true, message: '请输入日期', trigger: 'blur' } ],
+        name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ],
+        address: [ { required: true, message: '请输入地址', trigger: 'blur' } ]
+      }
+    }
+  },
+  methods: {
+    handleRowAdd (row, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        console.log(row)
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        })
+        done()
+        this.formOptions.saveLoading = false
+      }, 300)
+    },
+    handleDialogCancel (done) {
+      this.$message({
+        message: '取消保存',
+        type: 'warning'
+      })
+      done()
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo23/code.js
+++ b/src/pages/demo/d2-crud/demo23/code.js
@@ -0,0 +1,78 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date',
+          component: {
+            name: 'el-date-picker',
+            size: 'small'
+          }
+        },
+        {
+          title: '姓名',
+          key: 'name',
+          component: {
+            name: 'el-select',
+            options: [
+              {
+                value: '王小虎',
+                label: '王小虎'
+              },
+              {
+                value: '王中虎',
+                label: '王中虎'
+              },
+              {
+                value: '王老虎',
+                label: '王老虎'
+              }
+            ],
+            size: 'small'
+          }
+        },
+        {
+          title: '地址',
+          key: 'address',
+          component: {
+            name: 'el-input',
+            size: 'small'
+          }
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ]
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo23/doc.md
+++ b/src/pages/demo/d2-crud/demo23/doc.md
@@ -0,0 +1 @@
+向 `columns` 的 `component` 对象传入 `name` 属性来控制渲染的组件，默认为 `el-input` ，支持的组件有 `el-input-number` `el-radio` `el-checkbox` `el-select` `el-cascader` `el-switch` `el-slider` `el-time-select` `el-time-picker` `el-date-picker` `el-rate` `el-color-picker` ，也可以使用 `render函数` 自己渲染组件，只需在 `component` 中传入 `renderFuntion` ，接收两个参数： `h`是render函数的固定参数， `scope` 是单元格中的数据，[render函数使用方法](https://cn.vuejs.org/v2/guide/render-function.html)。代码如下：
--- a/src/pages/demo/d2-crud/demo23/index.vue
+++ b/src/pages/demo/d2-crud/demo23/index.vue
@@ -0,0 +1,93 @@
+<template>
+  <d2-container>
+    <template slot="header">表格内编辑</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"/>
+    <el-card shadow="never" class="d2-mb">
+      <d2-markdown :source="doc"/>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <d2-highlight :code="code"/>
+    </el-card>
+    <template slot="footer">
+      <d2-link-btn title="文档" link="http://app.d3collection.cn/d2-admin-doc/lastest/zh/ecosystem-d2-crud/"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import doc from './doc.md'
+import code from './code.js'
+
+export default {
+  data () {
+    return {
+      doc,
+      code,
+      columns: [
+        {
+          title: '日期',
+          key: 'date',
+          component: {
+            name: 'el-date-picker',
+            size: 'small'
+          }
+        },
+        {
+          title: '姓名',
+          key: 'name',
+          component: {
+            name: 'el-select',
+            options: [
+              {
+                value: '王小虎',
+                label: '王小虎'
+              },
+              {
+                value: '王中虎',
+                label: '王中虎'
+              },
+              {
+                value: '王老虎',
+                label: '王老虎'
+              }
+            ],
+            size: 'small'
+          }
+        },
+        {
+          title: '地址',
+          key: 'address',
+          component: {
+            name: 'el-input',
+            size: 'small'
+          }
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ]
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo24/code.js
+++ b/src/pages/demo/d2-crud/demo24/code.js
@@ -0,0 +1,61 @@
+export default `<template>
+  <div>
+  <d2-crud
+    ref="d2Crud"
+    :columns="columns"
+    :data="data">
+    <el-button slot="headerButton">自定义按钮1</el-button>
+    <el-button slot="headerButton" type="primary" round>自定义按钮2</el-button>
+  </d2-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date',
+          width: '180'
+        },
+        {
+          title: '姓名',
+          key: 'name',
+          width: '180'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ]
+    }
+  },
+  mounted () {
+    console.log(this.$refs.d2Crud.d2Data)
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo24/doc.md
+++ b/src/pages/demo/d2-crud/demo24/doc.md
@@ -0,0 +1 @@
+`headerButton` slot 可以在表头添加自定义按钮。代码如下：
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				在 `D2 Crud` 组件中传入 `columns` 和 `data` 对象数组，即可创建一个最基础的表格，`columns` 中的 `key` 需要与 `data` 中对象的key严格对照，可以在 `columns` 对象中传入 `width` 属性来控制列宽。当表格中的数据通过操作变化时，可以通过 `this.$refs.d2Crud.d2Data` 拿到变化后的表格数据。代码如下：
				`@@ -0,0 +1 @@`
				`D2 Crud` 组件提供了多选的支持，只需要配置 `selection-row` 属性即可实现多选。之后由 `selection-change` 事件来管理选择项发生变化时触发的事件，它会传入 `selection` 。代码如下：
				`@@ -0,0 +1 @@`
				在 `columns` 中设置 `sortable` 属性为 `true` ，即可实现以该列为基准的排序。可以通过 `options` 的 `defaultSort` 属性设置默认的排序列和排序顺序。代码如下：
				`@@ -0,0 +1 @@`
				在 `columns` 中设置 `filters` `filterMethod` 属性即可开启该列的筛选，`filters` 是一个数组， `filterMethod` 是一个方法，它用于决定某些数据是否显示，会传入三个参数：`value`, `row` 和 `column`。代码如下：
				`@@ -0,0 +1 @@`
				将 `options` 中的 `showSummary` 设置为 `true` 就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过 `sumText` 配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用 `summaryMethod` 并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中。代码如下：
				`@@ -0,0 +1 @@`
				通过给 `options` 传入 `spanMethod` 方法可以实现合并行，方法的参数是一个对象，里面包含当前行 `row` 、当前列 `column` 、当前行号 `rowIndex` 、当前列号 `columnIndex` 四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表 `rowspan` ，第二个元素代表 `colspan` 。代码如下：
				`@@ -0,0 +1 @@`
				通过给 `D2 Crud` 传入 `add-mode` 可开启新增模式，需要传入 `form-template` 来为新增的表单添加模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态，`addButton` 可以控制表格顶部新增按钮的样式， `row-add` 事件控制数据新增，接收两个参数： `row` 是当前新增行的数据， `done` 用于控制保存成功，可以在 `done()` 之前加入自己的逻辑代码。代码如下：
				`@@ -0,0 +1 @@`
				通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `columnHeader` 可以自定义操作列的表头，传入 `edit` 对象可以开启编辑模式，需要传入 `form-template` 来为编辑添加模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-edit` 事件控制数据编辑，参数： `index` 是当前编辑行的索引， `row` 是当前编辑行的数据， `done` 用于控制编辑成功，可以在 `done()` 之前加入自己的逻辑代码。代码如下：
				`@@ -0,0 +1 @@`
				`options` 对象可以对表格进行配置，其中 `stripe` 属性可以创建带斑马纹的表格。它接受一个 `Boolean` ，设置为 `true` 即为启用。代码如下：
				`@@ -0,0 +1 @@`
				向 `form-template` 的 `component` 对象传入 `name` 属性来控制渲染的组件，默认为 `el-input` ，支持的组件有 `el-input-number` `el-radio` `el-checkbox` `el-select` `el-cascader` `el-switch` `el-slider` `el-time-select` `el-time-picker` `el-date-picker` `el-rate` `el-color-picker` ，也可以使用 `render函数` 自己渲染组件，只需在 `component` 中传入 `renderFuntion` ，接收一个参数 `h`，[render函数使用方法](https://cn.vuejs.org/v2/guide/render-function.html)。代码如下：