diff --git a/README.md b/README.md index 0cf4d06d..e3c50276 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,15 @@ + + D2Admin 是一个开源的管理系统前端集成方案，为了方便开发者快速进行管理系统开发而设计。 ## 仓库和文档 **文档** -[中文文档 码云部署](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) -因为现在集成了很多的插件和组件，首次加载会占用很多的时间，虽然已经做了首屏加载动画，但还是建议您在发布之前一定要删除没有用到的代码，比如项目没有用到图表、示例、插件组件 - - - ## 功能 * 使用 vue-cli3 构建 @@ -86,43 +84,4 @@ D2Admin 是一个开源的管理系统前端集成方案，为了方便开发者 D2Admin 是完全开源免费的管理系统集成方案，由 [FairyEver](https://github.com/FairyEver) 在工作之余完全由兴趣驱动完成，如果你也一样喜欢前端开发，欢迎加入我们的讨论/学习群，群内可以`提问答疑`，`分享学习资料`或者随便扯淡 - - -## 获取代码 - -有两种方式可以获得 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 -``` - -## 觉得不错 赏个咖啡 让作者打起精神 ~ - - - -更多介绍和使用方法见 [文档](http://app.d3collection.cn/d2-admin-doc/lastest/zh/) - -## 友情链接 - -* [avue](https://github.com/nmxiaowei/avue) - - + \ No newline at end of file diff --git a/dev/github/banner.png.REMOVED.git-id b/dev/github/banner.png.REMOVED.git-id new file mode 100644 index 00000000..9a206ab0 --- /dev/null +++ b/dev/github/banner.png.REMOVED.git-id @@ -0,0 +1 @@ +a2f6616cae3da07b11cef8bf01bee9963e27c477 \ No newline at end of file diff --git a/dev/github/preview@2x.png.REMOVED.git-id b/dev/github/preview@2x.png.REMOVED.git-id deleted file mode 100644 index 7b05e991..00000000 --- a/dev/github/preview@2x.png.REMOVED.git-id +++ /dev/null @@ -1 +0,0 @@ -27e431bd9e4752dd51fe827a1281d606bd7bdf07 \ No newline at end of file diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 983e8b5d..ead98c97 100644 --- 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' ] } ] diff --git a/docs/zh/article/update/introduce.md b/docs/zh/article/update/introduce.md new file mode 100644 index 00000000..27dfaa0c --- /dev/null +++ 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 用户交流群解决使用问题 806395827 +* ... + +篇幅有限，更多特性请参考 [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 和其它分支同时更新，感谢大家使用。 \ No newline at end of file diff --git a/docs/zh/ecosystem-d2-crud/README.md b/docs/zh/ecosystem-d2-crud/README.md index 9c09a7f4..24861788 100644 --- a/docs/zh/ecosystem-d2-crud/README.md +++ b/docs/zh/ecosystem-d2-crud/README.md @@ -1,3 +1,48 @@ # D2 CRUD -介绍内容 \ No newline at end of file +## 介绍 +`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) diff --git a/docs/zh/ecosystem-d2-crud/api.md b/docs/zh/ecosystem-d2-crud/api.md deleted file mode 100644 index 2c426cfd..00000000 --- a/docs/zh/ecosystem-d2-crud/api.md +++ /dev/null @@ -1,9 +0,0 @@ -# api - -## api-1 - -hhh - -## api-2 - -## api-3 \ No newline at end of file diff --git a/docs/zh/ecosystem-d2-crud/api.md.REMOVED.git-id b/docs/zh/ecosystem-d2-crud/api.md.REMOVED.git-id new file mode 100644 index 00000000..8283ed86 --- /dev/null +++ b/docs/zh/ecosystem-d2-crud/api.md.REMOVED.git-id @@ -0,0 +1 @@ +20469a4cf76ab7f4d3f7c89982745a0ffa8e84a8 \ No newline at end of file diff --git a/docs/zh/ecosystem-d2-crud/example.md b/docs/zh/ecosystem-d2-crud/example.md new file mode 100644 index 00000000..b6153f90 --- /dev/null +++ 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) | diff --git a/docs/zh/ecosystem-d2-crud/guide.md b/docs/zh/ecosystem-d2-crud/guide.md new file mode 100644 index 00000000..49e9cd0e --- /dev/null +++ b/docs/zh/ecosystem-d2-crud/guide.md @@ -0,0 +1,42 @@ +# 使用指南 + +## 获取表格当前数据 + +可以通过 `ref` 拿到表格实时数据，也可以通过监听 `@d2-data-change` 事件来获取表格中数据 +``` vue + + + +``` + +## 设置默认尺寸 + +在 `main.js` 使用 `D2Crud` 时传入 `size` 即可（可选值: `medium` `small` `mini`） +``` js +Vue.use(d2Crud, { size: 'small' }) +``` \ No newline at end of file diff --git a/docs/zh/learn-knowledge/README.md b/docs/zh/learn-knowledge/README.md index 6200b009..de94e011 100644 --- a/docs/zh/learn-knowledge/README.md +++ b/docs/zh/learn-knowledge/README.md @@ -1,7 +1,3 @@ ---- -sidebar: auto ---- - # 相关知识 使用 D2Admin 首先组要有以下前置知识： diff --git a/docs/zh/learn-knowledge/javascript.md.REMOVED.git-id b/docs/zh/learn-knowledge/javascript.md.REMOVED.git-id new file mode 100644 index 00000000..0c820d38 --- /dev/null +++ b/docs/zh/learn-knowledge/javascript.md.REMOVED.git-id @@ -0,0 +1 @@ +adaa3d23e2e5f38fc95922e6a324af247d104660 \ No newline at end of file diff --git a/docs/zh/sys-components/highlight.md b/docs/zh/sys-components/highlight.md index 39bc3dc5..e2cb2c64 100644 --- 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 本框架只是提供代码高亮的简单实现，如需实现更高级的设置请修改组件代码 -::: \ No newline at end of file +::: + +## 语言 + +如果不指定语言，默认会依次尝试以下语言： + +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 \ No newline at end of file diff --git a/docs/zh/sys-vuex/README.md.REMOVED.git-id b/docs/zh/sys-vuex/README.md.REMOVED.git-id index a901b125..1cc9a689 100644 --- a/docs/zh/sys-vuex/README.md.REMOVED.git-id +++ b/docs/zh/sys-vuex/README.md.REMOVED.git-id @@ -1 +1 @@ -33948f39bdcc1391fd42429bd95b3b98c167fb23 \ No newline at end of file +dd3ce3a3e8aff371313dd37c30adafe042430be2 \ No newline at end of file diff --git a/package-lock.json.REMOVED.git-id b/package-lock.json.REMOVED.git-id deleted file mode 100644 index e44ada5f..00000000 --- a/package-lock.json.REMOVED.git-id +++ /dev/null @@ -1 +0,0 @@ -937f5369a5d9b43eeb3c7fa2991f76724481721c \ No newline at end of file diff --git a/package.json b/package.json index 0af0e951..abafdb49 100644 --- 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", diff --git a/public/index.html b/public/index.html index f1fcec95..1fda1beb 100644 --- a/public/index.html +++ b/public/index.html @@ -151,7 +151,7 @@
@@ -167,7 +167,7 @@
加载中
-
欢迎使用 D2Admin 进行你的开发，初次加载会比较慢，请耐心等待
+
欢迎使用 D2Admin。初次加载较慢，请耐心等待
如果很久很久都没有加载成功，请清空缓存重新加载页面
Github仓库 diff --git a/src/assets/style/theme/theme-base.scss.REMOVED.git-id b/src/assets/style/theme/theme-base.scss.REMOVED.git-id index 76786659..0313b944 100644 --- 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 \ No newline at end of file +76c08deda5f3f6bd81e91aeb695cae984eab131e \ No newline at end of file diff --git a/src/assets/style/theme/theme.scss.REMOVED.git-id b/src/assets/style/theme/theme.scss.REMOVED.git-id index 9ba9d43f..276f4bb5 100644 --- a/src/assets/style/theme/theme.scss.REMOVED.git-id +++ b/src/assets/style/theme/theme.scss.REMOVED.git-id @@ -1 +1 @@ -bfee5e91a3b150e04d9f24695061f6f3e7c59342 \ No newline at end of file +5e28075542c22533bf13f61de9a2eaf52bf18157 \ No newline at end of file diff --git a/src/assets/svg-icons/icons/add.svg b/src/assets/svg-icons/icons/add.svg index 7d29bd88..80efd49a 100644 --- a/src/assets/svg-icons/icons/add.svg +++ b/src/assets/svg-icons/icons/add.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/svg-icons/icons/alarm.svg b/src/assets/svg-icons/icons/alarm.svg index 5878dd72..d248d0ad 100644 --- a/src/assets/svg-icons/icons/alarm.svg +++ b/src/assets/svg-icons/icons/alarm.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/svg-icons/icons/camera.svg b/src/assets/svg-icons/icons/camera.svg index ea79a254..e1d6845d 100644 --- a/src/assets/svg-icons/icons/camera.svg +++ b/src/assets/svg-icons/icons/camera.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/svg-icons/icons/d2-admin-text.svg b/src/assets/svg-icons/icons/d2-admin-text.svg new file mode 100644 index 00000000..abdcf0b8 --- /dev/null +++ b/src/assets/svg-icons/icons/d2-admin-text.svg @@ -0,0 +1,19 @@ + + + + Created with Sketch. + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg-icons/icons/d2admin.svg b/src/assets/svg-icons/icons/d2-admin.svg similarity index 94% rename from src/assets/svg-icons/icons/d2admin.svg rename to src/assets/svg-icons/icons/d2-admin.svg index 3bdef832..c2c3c07d 100644 --- a/src/assets/svg-icons/icons/d2admin.svg +++ b/src/assets/svg-icons/icons/d2-admin.svg @@ -1,5 +1,5 @@ - + D2Admin diff --git a/src/assets/svg-icons/icons/d2-crud.svg b/src/assets/svg-icons/icons/d2-crud.svg new file mode 100644 index 00000000..799b27af --- /dev/null +++ b/src/assets/svg-icons/icons/d2-crud.svg @@ -0,0 +1,26 @@ + + + + Created with Sketch. + + + \ No newline at end of file diff --git a/src/assets/svg-icons/icons/history.svg b/src/assets/svg-icons/icons/history.svg index db146145..62994ae4 100644 --- a/src/assets/svg-icons/icons/history.svg +++ b/src/assets/svg-icons/icons/history.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/svg-icons/icons/like.svg b/src/assets/svg-icons/icons/like.svg index 7d81c7cb..0bd4716a 100644 --- a/src/assets/svg-icons/icons/like.svg +++ b/src/assets/svg-icons/icons/like.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/svg-icons/icons/love.svg b/src/assets/svg-icons/icons/love.svg index 09833060..e81987ee 100644 --- a/src/assets/svg-icons/icons/love.svg +++ b/src/assets/svg-icons/icons/love.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/svg-icons/icons/message.svg b/src/assets/svg-icons/icons/message.svg index 828cfd86..83018750 100644 --- a/src/assets/svg-icons/icons/message.svg +++ b/src/assets/svg-icons/icons/message.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/svg-icons/icons/notice.svg b/src/assets/svg-icons/icons/notice.svg index c8fc6365..b8664fb4 100644 --- a/src/assets/svg-icons/icons/notice.svg +++ b/src/assets/svg-icons/icons/notice.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/svg-icons/icons/search.svg b/src/assets/svg-icons/icons/search.svg index c5a1b2b3..e27f8ddc 100644 --- a/src/assets/svg-icons/icons/search.svg +++ b/src/assets/svg-icons/icons/search.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/svg-icons/icons/share.svg b/src/assets/svg-icons/icons/share.svg index b0dbe7f1..b5db8181 100644 --- a/src/assets/svg-icons/icons/share.svg +++ b/src/assets/svg-icons/icons/share.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/svg-icons/icons/star.svg b/src/assets/svg-icons/icons/star.svg index c3010907..64909a57 100644 --- a/src/assets/svg-icons/icons/star.svg +++ b/src/assets/svg-icons/icons/star.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/svg-icons/icons/user.svg b/src/assets/svg-icons/icons/user.svg index ce7b9f75..063baee5 100644 --- a/src/assets/svg-icons/icons/user.svg +++ b/src/assets/svg-icons/icons/user.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/components/d2-container-frame/index.vue b/src/components/d2-container-frame/index.vue new file mode 100644 index 00000000..3a2afddc --- /dev/null +++ b/src/components/d2-container-frame/index.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/src/components/d2-highlight/index.vue b/src/components/d2-highlight/index.vue index e9bec969..0e838a7a 100644 --- a/src/components/d2-highlight/index.vue +++ b/src/components/d2-highlight/index.vue @@ -1,11 +1,11 @@ 

+  

 
 
 
diff --git a/src/layout/header-aside/components/mixin/menu.js b/src/layout/header-aside/components/mixin/menu.js
index 78316f3a..7160b58f 100644
--- 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)
diff --git 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
new file mode 100644
index 00000000..73a6f843
--- /dev/null
+++ b/src/layout/header-aside/components/panel-search/components/panel-search-item/index.vue
@@ -0,0 +1,105 @@
+
+
+
+
+
diff --git a/src/layout/header-aside/components/panel-search/index.vue b/src/layout/header-aside/components/panel-search/index.vue
new file mode 100644
index 00000000..bab34188
--- /dev/null
+++ b/src/layout/header-aside/components/panel-search/index.vue
@@ -0,0 +1,211 @@
+
+
+
+
+
diff --git a/src/layout/header-aside/layout.vue b/src/layout/header-aside/layout.vue
index 04dce9ce..3a15413c 100644
--- a/src/layout/header-aside/layout.vue
+++ b/src/layout/header-aside/layout.vue
@@ -8,7 +8,12 @@
     
     

       
-      

+      

         

           
           
@@ -20,6 +25,7 @@
         
         

           
+          
           
           
           
@@ -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
+          }">
           
         

         
-        

-          

-            
-          

-          

-            
-              
-                
-              
-            
-          

+        

+          
+          
+            

+              
+            

+          
+          
+          
+            

+              
+              

+                
+              

+              
+              

+                
+                  
+                    
+                  
+                
+              

+            

+          
         

       

     

@@ -56,13 +80,18 @@
 
 `
diff --git a/src/pages/demo/d2-crud/demo1/doc.md b/src/pages/demo/d2-crud/demo1/doc.md
new file mode 100644
index 00000000..e09a2f74
--- /dev/null
+++ 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` 拿到变化后的表格数据。代码如下：
diff --git a/src/pages/demo/d2-crud/demo1/index.vue b/src/pages/demo/d2-crud/demo1/index.vue
index 6d39786b..9dc02016 100644
--- a/src/pages/demo/d2-crud/demo1/index.vue
+++ b/src/pages/demo/d2-crud/demo1/index.vue
@@ -1,9 +1,73 @@
 
+
+
diff --git a/src/pages/demo/d2-crud/demo10/code.js b/src/pages/demo/d2-crud/demo10/code.js
new file mode 100644
index 00000000..08c9cae8
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo10/code.js
@@ -0,0 +1,59 @@
+export default `
+
+`
diff --git a/src/pages/demo/d2-crud/demo10/doc.md b/src/pages/demo/d2-crud/demo10/doc.md
new file mode 100644
index 00000000..ae132c77
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo10/doc.md
@@ -0,0 +1 @@
+`D2 Crud` 组件提供了多选的支持，只需要配置 `selection-row` 属性即可实现多选。之后由 `selection-change` 事件来管理选择项发生变化时触发的事件，它会传入 `selection` 。代码如下：
diff --git a/src/pages/demo/d2-crud/demo10/index.vue b/src/pages/demo/d2-crud/demo10/index.vue
new file mode 100644
index 00000000..4d07c762
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo10/index.vue
@@ -0,0 +1,75 @@
+
+
+
diff --git a/src/pages/demo/d2-crud/demo11/code.js b/src/pages/demo/d2-crud/demo11/code.js
new file mode 100644
index 00000000..63f89f0c
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo11/code.js
@@ -0,0 +1,60 @@
+export default `
+
+`
diff --git a/src/pages/demo/d2-crud/demo11/doc.md b/src/pages/demo/d2-crud/demo11/doc.md
new file mode 100644
index 00000000..7831ca76
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo11/doc.md
@@ -0,0 +1 @@
+在 `columns` 中设置 `sortable` 属性为 `true` ，即可实现以该列为基准的排序。可以通过 `options` 的 `defaultSort` 属性设置默认的排序列和排序顺序。代码如下：
diff --git a/src/pages/demo/d2-crud/demo11/index.vue b/src/pages/demo/d2-crud/demo11/index.vue
new file mode 100644
index 00000000..a36fc3c1
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo11/index.vue
@@ -0,0 +1,76 @@
+
+
+
diff --git a/src/pages/demo/d2-crud/demo12/code.js b/src/pages/demo/d2-crud/demo12/code.js
new file mode 100644
index 00000000..19d6a6c0
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo12/code.js
@@ -0,0 +1,68 @@
+export default `
+
+`
diff --git a/src/pages/demo/d2-crud/demo12/doc.md b/src/pages/demo/d2-crud/demo12/doc.md
new file mode 100644
index 00000000..f4de8fc9
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo12/doc.md
@@ -0,0 +1 @@
+在 `columns` 中设置 `filters` `filterMethod` 属性即可开启该列的筛选，`filters` 是一个数组， `filterMethod` 是一个方法，它用于决定某些数据是否显示，会传入三个参数：`value`, `row` 和 `column`。代码如下：
diff --git a/src/pages/demo/d2-crud/demo12/index.vue b/src/pages/demo/d2-crud/demo12/index.vue
new file mode 100644
index 00000000..944c570c
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo12/index.vue
@@ -0,0 +1,84 @@
+
+
+
diff --git a/src/pages/demo/d2-crud/demo13/code.js b/src/pages/demo/d2-crud/demo13/code.js
new file mode 100644
index 00000000..44a8b967
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo13/code.js
@@ -0,0 +1,105 @@
+export default `
+
+`
diff --git a/src/pages/demo/d2-crud/demo13/doc.md b/src/pages/demo/d2-crud/demo13/doc.md
new file mode 100644
index 00000000..68774891
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo13/doc.md
@@ -0,0 +1 @@
+将 `options` 中的 `showSummary` 设置为 `true` 就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过 `sumText` 配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用 `summaryMethod` 并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中。代码如下：
diff --git a/src/pages/demo/d2-crud/demo13/index.vue b/src/pages/demo/d2-crud/demo13/index.vue
new file mode 100644
index 00000000..c2fc9256
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo13/index.vue
@@ -0,0 +1,121 @@
+
+
+
diff --git a/src/pages/demo/d2-crud/demo14/code.js b/src/pages/demo/d2-crud/demo14/code.js
new file mode 100644
index 00000000..69caa73b
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo14/code.js
@@ -0,0 +1,88 @@
+export default `
+
+`
diff --git a/src/pages/demo/d2-crud/demo14/doc.md b/src/pages/demo/d2-crud/demo14/doc.md
new file mode 100644
index 00000000..94d0e2c3
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo14/doc.md
@@ -0,0 +1 @@
+通过给 `options` 传入 `spanMethod` 方法可以实现合并行，方法的参数是一个对象，里面包含当前行 `row` 、当前列 `column` 、当前行号 `rowIndex` 、当前列号 `columnIndex` 四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表 `rowspan` ，第二个元素代表 `colspan` 。代码如下：
diff --git a/src/pages/demo/d2-crud/demo14/index.vue b/src/pages/demo/d2-crud/demo14/index.vue
new file mode 100644
index 00000000..4aeecca0
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo14/index.vue
@@ -0,0 +1,104 @@
+
+
+
diff --git a/src/pages/demo/d2-crud/demo15/code.js b/src/pages/demo/d2-crud/demo15/code.js
new file mode 100644
index 00000000..e47ab7eb
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo15/code.js
@@ -0,0 +1,94 @@
+export default `
+
+`
diff --git a/src/pages/demo/d2-crud/demo15/doc.md b/src/pages/demo/d2-crud/demo15/doc.md
new file mode 100644
index 00000000..b2338ba7
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo15/doc.md
@@ -0,0 +1 @@
+通过给 `options` 传入 `spanMethod` 方法可以实现合并行，方法的参数是一个对象，里面包含当前行 `row` 、当前列 `column` 、当前行号 `rowIndex` 、当前列号 `columnIndex` 四个属性。该函数可以返回一个键名为 `rowspan` 和 `colspan` 的对象。代码如下：
diff --git a/src/pages/demo/d2-crud/demo15/index.vue b/src/pages/demo/d2-crud/demo15/index.vue
new file mode 100644
index 00000000..2c96d332
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo15/index.vue
@@ -0,0 +1,110 @@
+
+
+
diff --git a/src/pages/demo/d2-crud/demo16/code.js b/src/pages/demo/d2-crud/demo16/code.js
new file mode 100644
index 00000000..3e88e106
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo16/code.js
@@ -0,0 +1,103 @@
+export default `
+
+`
diff --git a/src/pages/demo/d2-crud/demo16/doc.md b/src/pages/demo/d2-crud/demo16/doc.md
new file mode 100644
index 00000000..1e7023ed
--- /dev/null
+++ 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()` 之前加入自己的逻辑代码。代码如下：
diff --git a/src/pages/demo/d2-crud/demo16/index.vue b/src/pages/demo/d2-crud/demo16/index.vue
new file mode 100644
index 00000000..a4fcb6c1
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo16/index.vue
@@ -0,0 +1,119 @@
+
+
+
diff --git a/src/pages/demo/d2-crud/demo17/code.js b/src/pages/demo/d2-crud/demo17/code.js
new file mode 100644
index 00000000..59d69469
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo17/code.js
@@ -0,0 +1,108 @@
+export default `
+
+`
diff --git a/src/pages/demo/d2-crud/demo17/doc.md b/src/pages/demo/d2-crud/demo17/doc.md
new file mode 100644
index 00000000..4c503e83
--- /dev/null
+++ 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()` 之前加入自己的逻辑代码。代码如下：
diff --git a/src/pages/demo/d2-crud/demo17/index.vue b/src/pages/demo/d2-crud/demo17/index.vue
new file mode 100644
index 00000000..8ea682c1
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo17/index.vue
@@ -0,0 +1,124 @@
+
+
+
diff --git a/src/pages/demo/d2-crud/demo18/code.js b/src/pages/demo/d2-crud/demo18/code.js
new file mode 100644
index 00000000..45d4e564
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo18/code.js
@@ -0,0 +1,76 @@
+export default `
+
+`
diff --git a/src/pages/demo/d2-crud/demo18/doc.md b/src/pages/demo/d2-crud/demo18/doc.md
new file mode 100644
index 00000000..273fe0c9
--- /dev/null
+++ 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()` 之前加入自己的逻辑代码。代码如下：
diff --git a/src/pages/demo/d2-crud/demo18/index.vue b/src/pages/demo/d2-crud/demo18/index.vue
new file mode 100644
index 00000000..2c4b36fd
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo18/index.vue
@@ -0,0 +1,92 @@
+
+
+
diff --git a/src/pages/demo/d2-crud/demo19/code.js b/src/pages/demo/d2-crud/demo19/code.js
new file mode 100644
index 00000000..086bcfb9
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo19/code.js
@@ -0,0 +1,71 @@
+export default `
+
+`
diff --git a/src/pages/demo/d2-crud/demo19/doc.md b/src/pages/demo/d2-crud/demo19/doc.md
new file mode 100644
index 00000000..56a4aab8
--- /dev/null
+++ 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` 是当前行的数据。代码如下：
diff --git a/src/pages/demo/d2-crud/demo19/index.vue b/src/pages/demo/d2-crud/demo19/index.vue
new file mode 100644
index 00000000..caaf351d
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo19/index.vue
@@ -0,0 +1,87 @@
+
+
+
diff --git a/src/pages/demo/d2-crud/demo2/code.js b/src/pages/demo/d2-crud/demo2/code.js
new file mode 100644
index 00000000..400c03d9
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo2/code.js
@@ -0,0 +1,58 @@
+export default `
+
+`
diff --git a/src/pages/demo/d2-crud/demo2/doc.md b/src/pages/demo/d2-crud/demo2/doc.md
new file mode 100644
index 00000000..71a1f7c0
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo2/doc.md
@@ -0,0 +1 @@
+`options` 对象可以对表格进行配置，其中 `stripe` 属性可以创建带斑马纹的表格。它接受一个 `Boolean` ，设置为 `true` 即为启用。代码如下：
diff --git a/src/pages/demo/d2-crud/demo2/index.vue b/src/pages/demo/d2-crud/demo2/index.vue
new file mode 100644
index 00000000..997ba287
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo2/index.vue
@@ -0,0 +1,73 @@
+
+
+
diff --git a/src/pages/demo/d2-crud/demo20/code.js b/src/pages/demo/d2-crud/demo20/code.js
new file mode 100644
index 00000000..022eafc2
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo20/code.js
@@ -0,0 +1,133 @@
+export default `
+
+`
diff --git a/src/pages/demo/d2-crud/demo20/doc.md b/src/pages/demo/d2-crud/demo20/doc.md
new file mode 100644
index 00000000..88eaf7cb
--- /dev/null
+++ 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)。代码如下：
diff --git a/src/pages/demo/d2-crud/demo20/index.vue b/src/pages/demo/d2-crud/demo20/index.vue
new file mode 100644
index 00000000..309a8adf
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo20/index.vue
@@ -0,0 +1,149 @@
+
+
+
diff --git a/src/pages/demo/d2-crud/demo21/code.js b/src/pages/demo/d2-crud/demo21/code.js
new file mode 100644
index 00000000..f61c65e1
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo21/code.js
@@ -0,0 +1,117 @@
+export default `
+
+`
diff --git a/src/pages/demo/d2-crud/demo21/doc.md b/src/pages/demo/d2-crud/demo21/doc.md
new file mode 100644
index 00000000..7ca59dde
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo21/doc.md
@@ -0,0 +1 @@
+向 `form-options` 中传入 `gutter` 属性来控制栅格间隔，向 `form-template` 的 `component` 对象传入 `span` 属性来控制栅格占据的列数。代码如下：
diff --git a/src/pages/demo/d2-crud/demo21/index.vue b/src/pages/demo/d2-crud/demo21/index.vue
new file mode 100644
index 00000000..d72e115f
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo21/index.vue
@@ -0,0 +1,133 @@
+
+
+
diff --git a/src/pages/demo/d2-crud/demo22/code.js b/src/pages/demo/d2-crud/demo22/code.js
new file mode 100644
index 00000000..30756630
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo22/code.js
@@ -0,0 +1,110 @@
+export default `
+
+`
diff --git a/src/pages/demo/d2-crud/demo22/doc.md b/src/pages/demo/d2-crud/demo22/doc.md
new file mode 100644
index 00000000..71ac15a8
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo22/doc.md
@@ -0,0 +1 @@
+通过给 `D2 Crud` 传入 `form-rules` 可开启表单校验，校验规则参见：[async-validator](https://github.com/yiminghe/async-validator)。代码如下：
diff --git a/src/pages/demo/d2-crud/demo22/index.vue b/src/pages/demo/d2-crud/demo22/index.vue
new file mode 100644
index 00000000..e314b426
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo22/index.vue
@@ -0,0 +1,126 @@
+
+
+
diff --git a/src/pages/demo/d2-crud/demo23/code.js b/src/pages/demo/d2-crud/demo23/code.js
new file mode 100644
index 00000000..b652cf79
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo23/code.js
@@ -0,0 +1,78 @@
+export default `
+
+`
diff --git a/src/pages/demo/d2-crud/demo23/doc.md b/src/pages/demo/d2-crud/demo23/doc.md
new file mode 100644
index 00000000..9199de3b
--- /dev/null
+++ 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)。代码如下：
diff --git a/src/pages/demo/d2-crud/demo23/index.vue b/src/pages/demo/d2-crud/demo23/index.vue
new file mode 100644
index 00000000..c56fcf34
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo23/index.vue
@@ -0,0 +1,93 @@
+
+
+
diff --git a/src/pages/demo/d2-crud/demo24/code.js b/src/pages/demo/d2-crud/demo24/code.js
new file mode 100644
index 00000000..2516e5b1
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo24/code.js
@@ -0,0 +1,61 @@
+export default `
+
+`
diff --git a/src/pages/demo/d2-crud/demo24/doc.md b/src/pages/demo/d2-crud/demo24/doc.md
new file mode 100644
index 00000000..fd68e284
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo24/doc.md
@@ -0,0 +1 @@
+`headerButton` slot 可以在表头添加自定义按钮。代码如下：
diff --git a/src/pages/demo/d2-crud/demo24/index.vue b/src/pages/demo/d2-crud/demo24/index.vue
new file mode 100644
index 00000000..05448a2d
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo24/index.vue
@@ -0,0 +1,76 @@
+
+
+
diff --git a/src/pages/demo/d2-crud/demo3/code.js b/src/pages/demo/d2-crud/demo3/code.js
new file mode 100644
index 00000000..041ad94f
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo3/code.js
@@ -0,0 +1,58 @@
+export default `
+
+`
diff --git a/src/pages/demo/d2-crud/demo3/doc.md b/src/pages/demo/d2-crud/demo3/doc.md
new file mode 100644
index 00000000..0ff20774
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo3/doc.md
@@ -0,0 +1 @@
+默认情况下， `D2 Crud` 是不具有竖直方向的边框的，如果需要，可以在 `options` 对象中传入一个 `border` 属性，它接受一个 `Boolean` ，设置为 `true` 即可启用。代码如下：
diff --git a/src/pages/demo/d2-crud/demo3/index.vue b/src/pages/demo/d2-crud/demo3/index.vue
new file mode 100644
index 00000000..c576135e
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo3/index.vue
@@ -0,0 +1,73 @@
+
+
+
diff --git a/src/pages/demo/d2-crud/demo4/code.js b/src/pages/demo/d2-crud/demo4/code.js
new file mode 100644
index 00000000..52191750
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo4/code.js
@@ -0,0 +1,75 @@
+export default `
+
+
+
+`
diff --git a/src/pages/demo/d2-crud/demo4/doc.md b/src/pages/demo/d2-crud/demo4/doc.md
new file mode 100644
index 00000000..ef0b14d1
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo4/doc.md
@@ -0,0 +1 @@
+可以通过指定 `D2 Crud` 组件 `options` 对象中的 `rowClassName` 属性来为 `D2 Crud` 中的某一行添加 `class` ，表明该行处于某种状态。代码如下：
diff --git a/src/pages/demo/d2-crud/demo4/index.vue b/src/pages/demo/d2-crud/demo4/index.vue
new file mode 100644
index 00000000..b942808b
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo4/index.vue
@@ -0,0 +1,90 @@
+
+
+
+
+
diff --git a/src/pages/demo/d2-crud/demo5/code.js b/src/pages/demo/d2-crud/demo5/code.js
new file mode 100644
index 00000000..03eaf9b3
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo5/code.js
@@ -0,0 +1,73 @@
+export default `
+
+`
diff --git a/src/pages/demo/d2-crud/demo5/doc.md b/src/pages/demo/d2-crud/demo5/doc.md
new file mode 100644
index 00000000..bae31834
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo5/doc.md
@@ -0,0 +1 @@
+只要在 `options` 对象中定义了 `height` 属性，即可实现固定表头的表格，而不需要额外的代码。代码如下：
diff --git a/src/pages/demo/d2-crud/demo5/index.vue b/src/pages/demo/d2-crud/demo5/index.vue
new file mode 100644
index 00000000..9ecd8b8f
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo5/index.vue
@@ -0,0 +1,88 @@
+
+
+
diff --git a/src/pages/demo/d2-crud/demo6/code.js b/src/pages/demo/d2-crud/demo6/code.js
new file mode 100644
index 00000000..ddc91de9
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo6/code.js
@@ -0,0 +1,83 @@
+export default `
+
+`
diff --git a/src/pages/demo/d2-crud/demo6/doc.md b/src/pages/demo/d2-crud/demo6/doc.md
new file mode 100644
index 00000000..e6ea2834
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo6/doc.md
@@ -0,0 +1 @@
+固定列需要在 `columns` 对象数组中给需要固定的列传入 `fixed` 属性，它接受 `Boolean` 值或者 `left` `right` ，表示左边固定还是右边固定。代码如下：
diff --git a/src/pages/demo/d2-crud/demo6/index.vue b/src/pages/demo/d2-crud/demo6/index.vue
new file mode 100644
index 00000000..65883bd3
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo6/index.vue
@@ -0,0 +1,98 @@
+
+
+
diff --git a/src/pages/demo/d2-crud/demo7/code.js b/src/pages/demo/d2-crud/demo7/code.js
new file mode 100644
index 00000000..cb4d4e2c
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo7/code.js
@@ -0,0 +1,112 @@
+export default `
+
+`
diff --git a/src/pages/demo/d2-crud/demo7/doc.md b/src/pages/demo/d2-crud/demo7/doc.md
new file mode 100644
index 00000000..79a8afe0
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo7/doc.md
@@ -0,0 +1 @@
+通过在 `options` 对象设置 `maxHeight` 属性为 `D2 Crud` 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。代码如下：
diff --git a/src/pages/demo/d2-crud/demo7/index.vue b/src/pages/demo/d2-crud/demo7/index.vue
new file mode 100644
index 00000000..da0cf221
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo7/index.vue
@@ -0,0 +1,127 @@
+
+
+
diff --git a/src/pages/demo/d2-crud/demo8/code.js b/src/pages/demo/d2-crud/demo8/code.js
new file mode 100644
index 00000000..aa3d63da
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo8/code.js
@@ -0,0 +1,106 @@
+export default `
+
+`
diff --git a/src/pages/demo/d2-crud/demo8/doc.md b/src/pages/demo/d2-crud/demo8/doc.md
new file mode 100644
index 00000000..31fcb94e
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo8/doc.md
@@ -0,0 +1 @@
+数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系，只需在 `columns` 中使用 `children` 字段对子级表头进行嵌套即可。代码如下：
diff --git a/src/pages/demo/d2-crud/demo8/index.vue b/src/pages/demo/d2-crud/demo8/index.vue
new file mode 100644
index 00000000..254ed14b
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo8/index.vue
@@ -0,0 +1,121 @@
+
+
+
diff --git a/src/pages/demo/d2-crud/demo9/code.js b/src/pages/demo/d2-crud/demo9/code.js
new file mode 100644
index 00000000..c4b03ee9
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo9/code.js
@@ -0,0 +1,64 @@
+export default `
+
+`
diff --git a/src/pages/demo/d2-crud/demo9/doc.md b/src/pages/demo/d2-crud/demo9/doc.md
new file mode 100644
index 00000000..a6efc561
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo9/doc.md
@@ -0,0 +1 @@
+`D2 Crud` 组件提供了单选的支持，只需要在 `options` 对象中将 `highlightCurrentRow` 属性设为 `true` 即可实现单选。之后由 `current-change` 事件来管理选中时触发的事件，它会传入 `currentRow` 和 `oldCurrentRow`。如果需要显示索引，需要配置 `index-row` 属性。代码如下：
diff --git a/src/pages/demo/d2-crud/demo9/index.vue b/src/pages/demo/d2-crud/demo9/index.vue
new file mode 100644
index 00000000..30d0fbed
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo9/index.vue
@@ -0,0 +1,80 @@
+
+
+
diff --git a/src/pages/demo/frame/d2-doc/index.vue b/src/pages/demo/frame/d2-doc/index.vue
new file mode 100644
index 00000000..e817dfc0
--- /dev/null
+++ b/src/pages/demo/frame/d2-doc/index.vue
@@ -0,0 +1,3 @@
+
diff --git a/src/pages/index/page.vue b/src/pages/index/page.vue
index b7748973..365e257d 100644
--- a/src/pages/index/page.vue
+++ b/src/pages/index/page.vue
@@ -3,7 +3,7 @@
     
-      
+