From eae8b9291e068cce0d373d22835d78b47ea02c15 Mon Sep 17 00:00:00 2001 From: liyang <1711467488@qq.com> Date: Sun, 19 Aug 2018 11:24:03 +0800 Subject: [PATCH] no message Former-commit-id: d5c2b85bf62d6c02743adad20c6de71ae556a82d [formerly d5c2b85bf62d6c02743adad20c6de71ae556a82d [formerly d5c2b85bf62d6c02743adad20c6de71ae556a82d [formerly d5c2b85bf62d6c02743adad20c6de71ae556a82d [formerly 074099c4c153f024958d3fda5cf710028e03d10a [formerly e73af225c96eb997a86122fc729dfadcdf846a4e]]]]] Former-commit-id: d84a01a4aca85cd9e3891825ac7a152e12280d4e Former-commit-id: 0412c82e909316b780fdd364ecabc78166c7cc0a Former-commit-id: 9e648fdbc93f347265fed8bb56948adda020e1c9 [formerly 8b530e6e6979a9c25832339725619d9d0c8ce76f] Former-commit-id: c12a2ae03243dd387e8c1d6496d6b3bb4148e149 Former-commit-id: 704f81678c7570f204cbe089e7497055c27e1328 Former-commit-id: 3879c040dcf291ef0f44745a5e791b360cde0f40 Former-commit-id: 0871c460804ea97eadf60bf3f0eaa8e147f3fb66 Former-commit-id: 188dd73a6cf49ecbf4cdedce1933f5a856c72b6f --- docs/.vuepress/config.js | 70 ++++-- docs/zh/ecosystem-d2-admin-ice/README.md | 7 + .../zh/ecosystem-d2-admin-start-kit/README.md | 7 + docs/zh/ecosystem-d2-crud/README.md | 7 + docs/zh/ecosystem-d2-ribbons/README.md | 7 + docs/zh/learn-guide/getting-started.md | 66 ------ docs/zh/learn-knowledge/README.md | 52 ++++- docs/zh/question/README.md.REMOVED.git-id | 1 + docs/zh/sys-components/README.md | 3 + docs/zh/sys-components/charts-new.md | 13 ++ .../container.md.REMOVED.git-id | 1 + docs/zh/sys-components/count-up.md | 29 +++ docs/zh/sys-components/highlight.md | 22 ++ docs/zh/sys-components/icon-select.md | 12 + docs/zh/sys-components/icon-svg.md | 34 +++ docs/zh/sys-components/icon.md | 41 ++++ .../image/baiduyun.png.REMOVED.git-id | 1 + docs/zh/sys-components/markdown.md | 88 +++++++ docs/zh/sys-css/README.md | 7 + docs/zh/sys-db/README.md | 7 + docs/zh/sys-menu/README.md | 7 + docs/zh/sys-multi-page/README.md | 7 + docs/zh/sys-plugins/README.md | 7 + docs/zh/sys-plugins/data-export.md | 148 ++++++++++++ docs/zh/sys-plugins/data-import.md | 64 +++++ docs/zh/sys-plugins/i18n.md | 124 ++++++++++ docs/zh/sys-plugins/mock.md | 221 ++++++++++++++++++ docs/zh/sys-route/README.md | 7 + docs/zh/sys-theme/README.md | 7 + docs/zh/sys-util/README.md | 7 + docs/zh/sys-vuex/README.md | 7 + 31 files changed, 993 insertions(+), 88 deletions(-) create mode 100644 docs/zh/ecosystem-d2-admin-ice/README.md create mode 100644 docs/zh/ecosystem-d2-admin-start-kit/README.md create mode 100644 docs/zh/ecosystem-d2-crud/README.md create mode 100644 docs/zh/ecosystem-d2-ribbons/README.md create mode 100644 docs/zh/question/README.md.REMOVED.git-id create mode 100644 docs/zh/sys-components/README.md create mode 100644 docs/zh/sys-components/charts-new.md create mode 100644 docs/zh/sys-components/container.md.REMOVED.git-id create mode 100644 docs/zh/sys-components/count-up.md create mode 100644 docs/zh/sys-components/highlight.md create mode 100644 docs/zh/sys-components/icon-select.md create mode 100644 docs/zh/sys-components/icon-svg.md create mode 100644 docs/zh/sys-components/icon.md create mode 100644 docs/zh/sys-components/image/baiduyun.png.REMOVED.git-id create mode 100644 docs/zh/sys-components/markdown.md create mode 100644 docs/zh/sys-css/README.md create mode 100644 docs/zh/sys-db/README.md create mode 100644 docs/zh/sys-menu/README.md create mode 100644 docs/zh/sys-multi-page/README.md create mode 100644 docs/zh/sys-plugins/README.md create mode 100644 docs/zh/sys-plugins/data-export.md create mode 100644 docs/zh/sys-plugins/data-import.md create mode 100644 docs/zh/sys-plugins/i18n.md create mode 100644 docs/zh/sys-plugins/mock.md create mode 100644 docs/zh/sys-route/README.md create mode 100644 docs/zh/sys-theme/README.md create mode 100644 docs/zh/sys-util/README.md create mode 100644 docs/zh/sys-vuex/README.md diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index de41538f..006effbc 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -49,26 +49,27 @@ module.exports = { ] }, { - text: '系统', + text: '系统模块', items: [ - { text: '内置组件', link: '' }, - { text: '插件', link: '' }, - { text: 'vuex', link: '' }, - { text: '菜单', link: '' }, - { text: '路由', link: '' }, - { text: '主题系统', link: '' }, - { text: '数据持久化', link: '' }, - { text: 'CSS 实用类', link: '' }, - { text: 'JS Util', link: '' } + { text: '组件', link: '/zh/sys-components/' }, + { text: '插件', link: '/zh/sys-plugins/' }, + { text: 'vuex', link: '/zh/sys-vuex/' }, + { text: '菜单', link: '/zh/sys-menu/' }, + { text: '路由', link: '/zh/sys-route/' }, + { text: '多页面', link: '/zh/sys-multi-page/' }, + { text: '主题系统', link: '/zh/sys-theme/' }, + { text: '数据持久化', link: '/zh/sys-db/' }, + { text: 'CSS 实用类', link: '/zh/sys-css/' }, + { text: 'JS Util', link: '/zh/sys-util/' } ] }, { text: '生态', items: [ - { text: 'D2 Admin start kit', link: '' }, - { text: 'D2 Admin ICE', link: '' }, - { text: 'D2 CRUD', link: '' }, - { text: 'D2 Ribbons', link: '' } + { text: 'D2 Admin start kit', link: '/zh/ecosystem-d2-admin-start-kit/' }, + { text: 'D2 Admin ICE', link: '/zh/ecosystem-d2-admin-ice/' }, + { text: 'D2 CRUD', link: '/zh/ecosystem-d2-crud/' }, + { text: 'D2 Ribbons', link: '/zh/ecosystem-d2-ribbons/' } ] }, { @@ -84,15 +85,18 @@ module.exports = { { text: 'CSDN', link: '' }, { text: 'segmentfault', link: '' }, { text: '知乎', link: '' }, - { text: '微信公众号', link: '' } + { text: '微信公众号', link: '' }, + { text: '交流群', link: '' } ] } ] }, - { text: '常见问题', link: '' } + { text: '常见问题', link: '/zh/question/' } ], sidebar: { - '/zh/learn-guide/': sideBarLearnGuide() + '/zh/learn-guide/': sideBarLearnGuide(), + '/zh/sys-components/': sideBarSysComponents(), + '/zh/sys-plugins/': sideBarSysPlugins() } } } @@ -109,4 +113,36 @@ function sideBarLearnGuide () { ] } ] +} + +function sideBarSysComponents () { + return [ + { + collapsable: false, + children: [ + 'container', + 'icon', + 'icon-svg', + 'icon-select', + 'charts-new', + 'markdown', + 'highlight', + 'count-up' + ] + } + ] +} + +function sideBarSysPlugins () { + return [ + { + collapsable: false, + children: [ + 'data-export', + 'data-import', + 'i18n', + 'mock.md' + ] + } + ] } \ No newline at end of file diff --git a/docs/zh/ecosystem-d2-admin-ice/README.md b/docs/zh/ecosystem-d2-admin-ice/README.md new file mode 100644 index 00000000..4b94ed06 --- /dev/null +++ b/docs/zh/ecosystem-d2-admin-ice/README.md @@ -0,0 +1,7 @@ +--- +sidebar: auto +--- + +# title + +info \ No newline at end of file diff --git a/docs/zh/ecosystem-d2-admin-start-kit/README.md b/docs/zh/ecosystem-d2-admin-start-kit/README.md new file mode 100644 index 00000000..4b94ed06 --- /dev/null +++ b/docs/zh/ecosystem-d2-admin-start-kit/README.md @@ -0,0 +1,7 @@ +--- +sidebar: auto +--- + +# title + +info \ No newline at end of file diff --git a/docs/zh/ecosystem-d2-crud/README.md b/docs/zh/ecosystem-d2-crud/README.md new file mode 100644 index 00000000..4b94ed06 --- /dev/null +++ b/docs/zh/ecosystem-d2-crud/README.md @@ -0,0 +1,7 @@ +--- +sidebar: auto +--- + +# title + +info \ No newline at end of file diff --git a/docs/zh/ecosystem-d2-ribbons/README.md b/docs/zh/ecosystem-d2-ribbons/README.md new file mode 100644 index 00000000..4b94ed06 --- /dev/null +++ b/docs/zh/ecosystem-d2-ribbons/README.md @@ -0,0 +1,7 @@ +--- +sidebar: auto +--- + +# title + +info \ No newline at end of file diff --git a/docs/zh/learn-guide/getting-started.md b/docs/zh/learn-guide/getting-started.md index b4a51dbe..9dfa1168 100644 --- a/docs/zh/learn-guide/getting-started.md +++ b/docs/zh/learn-guide/getting-started.md @@ -4,28 +4,6 @@ ![](http://fairyever.qiniudn.com/20180729102354.png?imageMogr2/auto-orient/thumbnail/1480x/blur/1x0/quality/100|imageslim) -## 前置知识 - -使用 D2Admin 首先组要有以下前置知识： - -* 首先需要熟悉 web 开发基础三样：[HTML CSS JavaScript](http://www.w3school.com.cn/) -* 会使用 [vue.js](https://cn.vuejs.org/) - -如果您了解以下技术，在使用本项目进行您的开发时会更加得心应手： - -* [ES6](http://es6.ruanyifeng.com/) -* [sass](https://www.sass.hk/guide/) - -## 准备 - -在上手之前，建议您先大致浏览以下章节，对整个系统有大致了解： - -* 每个页面最基础的构成部分：[页面容器](../components/container.md) -* 一些会用到的全局数据和方法：[VUEX 实用工具](../plugins/vuex.md) -* 一些会用到的公用方法：[Util 实用工具](../plugins/util.md) - -如果想了解更多 D2Admin 相关的教程和更新文章，可以参阅 [文章](../article/) - ## 下载项目 * 完整版仓库 [Github](https://github.com/d2-projects/d2-admin) | [码云](https://gitee.com/fairyever/d2-admin) @@ -266,47 +244,3 @@ export default [ ![](http://fairyever.qiniudn.com/20180729101708.png?imageMogr2/auto-orient/thumbnail/1480x/blur/1x0/quality/100|imageslim) 上述教程只是介绍了 D2Admin 的冰山一角，更多的配置项和组件文档请查阅本文档其它板块。 - -如果您有疑问，请加 QQ 群 **806395827** 反馈。 - -## 资源 - -下面是一些在开发过程会用到的文档，列举在这里方便大家快速查看： - -组件库： - -* [element-ui](http://element.eleme.io/#/zh-CN/component/quickstart) - -项目基础： - -| 名称 | 介绍 | -| --- | --- | -| [vue.js](https://cn.vuejs.org/v2/guide/) | 框架基础 | -| [vuex](https://vuex.vuejs.org/zh/guide/) | 全局状态管理 | -| [vue-router](https://router.vuejs.org/zh/guide/) | 路由控制 | -| [sass](https://www.sass.hk/guide/) | CSS 预处理语言 | - -脚手架： - -| 名称 | 介绍 | -| --- | --- | -| [vue-cli3](https://github.com/vuejs/vue-docs-zh-cn/tree/master/vue-cli) | 项目脚手架 | -| [webpack-chain](https://github.com/mozilla-neutrino/webpack-chain) | vue-cli3 中 webpack 的配置语法 | - -插件： - -| 名称 | 介绍 | -| --- | --- | -| [lodash](https://lodash.com/docs/4.17.10) | 一致性、模块化、高性能的 JavaScript 实用工具库 | -| [axios](https://github.com/axios/axios) | 最流行的网络请求库 | -| [better-scroll](https://github.com/ustbhuangyi/better-scroll) | [d2-container](../components/container.md) 的自定义滚动条依赖 | -| [dayjs](https://github.com/iamkun/dayjs) | 日期处理库 | -| [v-charts](https://v-charts.js.org/#/props) | vue 版本的 echarts 由饿了么开发 | -| [echarts](http://echarts.baidu.com/index.html) | v-charts 的核心 | -| [lowdb](https://github.com/typicode/lowdb) | D2Admin 操作本地数据的依赖 | -| [mockjs](https://github.com/nuysoft/Mock/wiki) | 模拟请求依赖 | -| [vue-i18n](https://kazupon.github.io/vue-i18n/guide/started.html) | 多国语依赖 | -| [vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout) | 网格布局组件 | -| [vue-splitpane](https://www.npmjs.com/package/vue-splitpane) | 切分布局组件 | - -上面只是一些猜您会用到的链接，还有一些项目中用到但是这里没有列举的，如果您觉得有必要，可以提 pr 修改本篇文档。 \ No newline at end of file diff --git a/docs/zh/learn-knowledge/README.md b/docs/zh/learn-knowledge/README.md index 6b7d4e47..51cf1993 100644 --- a/docs/zh/learn-knowledge/README.md +++ b/docs/zh/learn-knowledge/README.md @@ -4,12 +4,54 @@ sidebar: auto # 相关知识 -介绍开发所需要的知识 +使用 D2Admin 首先组要有以下前置知识： -## CSS +* 首先需要熟悉 web 开发基础三样：[HTML CSS JavaScript](http://www.w3school.com.cn/) +* 会使用 [vue.js](https://cn.vuejs.org/) -## SCSS +如果您了解以下技术，在使用本项目进行您的开发时会更加得心应手： -## JavaScript +* [ES6](http://es6.ruanyifeng.com/) +* [sass](https://www.sass.hk/guide/) -## webpack \ No newline at end of file +## 资源 + +下面是一些在开发过程会用到的文档，列举在这里方便大家快速查看： + +组件库： + +* [element-ui](http://element.eleme.io/#/zh-CN/component/quickstart) + +项目基础： + +| 名称 | 介绍 | +| --- | --- | +| [vue.js](https://cn.vuejs.org/v2/guide/) | 框架基础 | +| [vuex](https://vuex.vuejs.org/zh/guide/) | 全局状态管理 | +| [vue-router](https://router.vuejs.org/zh/guide/) | 路由控制 | +| [sass](https://www.sass.hk/guide/) | CSS 预处理语言 | + +脚手架： + +| 名称 | 介绍 | +| --- | --- | +| [vue-cli3](https://github.com/vuejs/vue-docs-zh-cn/tree/master/vue-cli) | 项目脚手架 | +| [webpack-chain](https://github.com/mozilla-neutrino/webpack-chain) | vue-cli3 中 webpack 的配置语法 | + +插件： + +| 名称 | 介绍 | +| --- | --- | +| [lodash](https://lodash.com/docs/4.17.10) | 一致性、模块化、高性能的 JavaScript 实用工具库 | +| [axios](https://github.com/axios/axios) | 最流行的网络请求库 | +| [better-scroll](https://github.com/ustbhuangyi/better-scroll) | [d2-container](../components/container.md) 的自定义滚动条依赖 | +| [dayjs](https://github.com/iamkun/dayjs) | 日期处理库 | +| [v-charts](https://v-charts.js.org/#/props) | vue 版本的 echarts 由饿了么开发 | +| [echarts](http://echarts.baidu.com/index.html) | v-charts 的核心 | +| [lowdb](https://github.com/typicode/lowdb) | D2Admin 操作本地数据的依赖 | +| [mockjs](https://github.com/nuysoft/Mock/wiki) | 模拟请求依赖 | +| [vue-i18n](https://kazupon.github.io/vue-i18n/guide/started.html) | 多国语依赖 | +| [vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout) | 网格布局组件 | +| [vue-splitpane](https://www.npmjs.com/package/vue-splitpane) | 切分布局组件 | + +上面只是一些猜您会用到的链接，还有一些项目中用到但是这里没有列举的，如果您觉得有必要，可以提 pr 修改本篇文档。 \ No newline at end of file diff --git a/docs/zh/question/README.md.REMOVED.git-id b/docs/zh/question/README.md.REMOVED.git-id new file mode 100644 index 00000000..8e91321d --- /dev/null +++ b/docs/zh/question/README.md.REMOVED.git-id @@ -0,0 +1 @@ +a25839f07ff223296de4b9330e10b08a04ae28ce \ No newline at end of file diff --git a/docs/zh/sys-components/README.md b/docs/zh/sys-components/README.md new file mode 100644 index 00000000..a890eb4f --- /dev/null +++ b/docs/zh/sys-components/README.md @@ -0,0 +1,3 @@ +# 组件 + +d2-admin（以下简称 d2admin）封装（或者集成第三方）了一些组件，方便开发者进行开发，具体组件文档请从左侧列表进入 \ No newline at end of file diff --git a/docs/zh/sys-components/charts-new.md b/docs/zh/sys-components/charts-new.md new file mode 100644 index 00000000..afb35697 --- /dev/null +++ b/docs/zh/sys-components/charts-new.md @@ -0,0 +1,13 @@ +# 图表 + +::: tip +`1.1.0` 版本使用的是 `G2` 图表库，`1.1.3` 开始使用 `v-charts` +::: + +## 介绍 + +在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。 + +[v-charts 文档](https://v-charts.js.org/#/) + +处于对用户使用方便的角度考虑，从 `1.1.3` 开始使用 v-charts。项目中已经安装并注册完毕 v-charts，你可以直接使用 \ No newline at end of file diff --git a/docs/zh/sys-components/container.md.REMOVED.git-id b/docs/zh/sys-components/container.md.REMOVED.git-id new file mode 100644 index 00000000..2712e40f --- /dev/null +++ b/docs/zh/sys-components/container.md.REMOVED.git-id @@ -0,0 +1 @@ +be315dc4b20db4a72f9543b102c601365693b67d \ No newline at end of file diff --git a/docs/zh/sys-components/count-up.md b/docs/zh/sys-components/count-up.md new file mode 100644 index 00000000..a8f1844b --- /dev/null +++ b/docs/zh/sys-components/count-up.md @@ -0,0 +1,29 @@ +# 数字动画 + +## 参数 + +| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 | +| --- | --- | --- | --- | --- | --- | +| start | 起始值 | 非 | Number | | 0 | +| end | 结束值 | 是 | Number | | 0 | +| decimals | 小数位数 | 非 | Number | | 0 | +| duration | 持续时间 | 非 | Number | | 2 | +| options | 设置项 | 非 | Object | | 空对象 | +| callback | 回调函数 | 非 | Function | | 空函数 | + +## 示例 + +``` vue +// 基本使用方法 + + +// 设置始末值 + + +// 设置动画时间 + +``` + +组件会在页面上渲染 `` 标签 + +组件根据 [countUp.js](https://github.com/inorganik/countUp.js) 封装，`options` 参数详见原始插件文档 \ No newline at end of file diff --git a/docs/zh/sys-components/highlight.md b/docs/zh/sys-components/highlight.md new file mode 100644 index 00000000..f8830d31 --- /dev/null +++ b/docs/zh/sys-components/highlight.md @@ -0,0 +1,22 @@ +# 代码高亮 + +## 参数 + +| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 | +| --- | --- | --- | --- | --- | --- | +| code | 代码字符串 | 非 | String | | console.log('you lost code prop') | +| format-html | 是否格式化 HTML | 非 | Boolean | | false | + +::: tip +format 建议只在内容为 HTML 的时候打开，如果内容不是 HTML，设置为 true 会有负面效果 +::: + +## 示例 + +``` vue + +``` + +::: tip +本框架只是提供代码高亮的简单实现，如需实现更高级的设置请修改组件代码 +::: \ No newline at end of file diff --git a/docs/zh/sys-components/icon-select.md b/docs/zh/sys-components/icon-select.md new file mode 100644 index 00000000..98064360 --- /dev/null +++ b/docs/zh/sys-components/icon-select.md @@ -0,0 +1,12 @@ +# 图标选择器 + +## 参数 + +| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 | +| --- | --- | --- | --- | --- | --- | +| value | 绑定的值，可以使用 v-model | 非 | String | | | +| placeholder | 占位符，显示在未选择之前的按钮和输入框中 | 非 | String | | 请选择 | +| placement | 界面探出方向 | 非 | String | 同 Popover 组件 placement 参数 | right | +| clearable | 是否允许清空 | 非 | Boolean | | true | +| userInput | 是否允许用户自由输入 | 非 | Boolean | | false | +| autoClose | 是否在选择后自动关闭 | 非 | Boolean | | true | \ No newline at end of file diff --git a/docs/zh/sys-components/icon-svg.md b/docs/zh/sys-components/icon-svg.md new file mode 100644 index 00000000..2bbdd0d5 --- /dev/null +++ b/docs/zh/sys-components/icon-svg.md @@ -0,0 +1,34 @@ +# 图标 - SVG + +## 参数 + +| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 | +| --- | --- | --- | --- | --- | --- | +| name | 图标名称 | 非 | String | src/assets/icons/svg 中 .svg 文件名 | 空 | + +## 使用方法 + +首先将下载的 .svg 图标放入 `src/assets/icons/svg` 文件夹下 + +然后使用组件 + +``` vue + +``` + +## 获取已经注册的所有图标 + +你已经发现了，只需要将图标文件放入项目中就会自动注册 + +这是因为已经对 `webpack` 和 `svg-sprite-loader` 进行了相关设置，`src/assets/icons/svg` 文件夹中的图标会自动注册到项目中，文件全部打包成 svg-sprite，名称注册到 `Vue.$IconSvg` 属性中 + +所以如果你需要检查项目中已经注册的所有图标，可以通过如下方式 + +``` js +// 在 vue 单文件组件中 +console.log(this.$IconSvg) +``` + +## 参考 + +演示图标来源 [iconfont.cn @龙正昆《常用的50个4px双色图标库》](http://iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=4878) \ No newline at end of file diff --git a/docs/zh/sys-components/icon.md b/docs/zh/sys-components/icon.md new file mode 100644 index 00000000..aae2eab4 --- /dev/null +++ b/docs/zh/sys-components/icon.md @@ -0,0 +1,41 @@ +# 图标 + +## 参数 + +| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 | +| --- | --- | --- | --- | --- | --- | +| name | 图标名称 | 非 | String | font-awesome 所有图标名 | font-awesome | + +## 使用方法 + +基本 + +``` vue +// 这样用没有毛病 但是也没什么用 + + +// 指定图标名称 + + +// 设置行内样式 + + +// 设置 class + +``` + +这个组件只是简化了写法而已 + +``` vue + +// 等同于 + +``` + +## 参考 + +图标索引 + +[Font Awesome 中文网](http://www.fontawesome.com.cn/faicons/) + +[fontawesome.com](https://fontawesome.com/icons?d=gallery) \ No newline at end of file diff --git a/docs/zh/sys-components/image/baiduyun.png.REMOVED.git-id b/docs/zh/sys-components/image/baiduyun.png.REMOVED.git-id new file mode 100644 index 00000000..b72710d1 --- /dev/null +++ b/docs/zh/sys-components/image/baiduyun.png.REMOVED.git-id @@ -0,0 +1 @@ +3a5bb0f2628d9251bbe7474c0535258784cf770b \ No newline at end of file diff --git a/docs/zh/sys-components/markdown.md b/docs/zh/sys-components/markdown.md new file mode 100644 index 00000000..cb8af8b1 --- /dev/null +++ b/docs/zh/sys-components/markdown.md @@ -0,0 +1,88 @@ +# markdown 渲染器 + +## 参数 + +| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 | +| --- | --- | --- | --- | --- | --- | +| url | markdown文件地址 | 非 | String | | 无 | +| source | markdown内容 | 非 | String | | 无 | +| highlight | 代码高亮 | 非 | Boolean | | false | +| baidupan | 百度网盘分享链接显示优化 | 非 | Boolean | | true | + +## 使用方法 + +加载一个.md文件 + +``` vue + +``` + +加载资源 + +```vue + + + +``` + +D2Admin 已经帮你配置好 webpack，你可以使用以下方式加载 markdown 文件 + +```vue + + + +``` + +## 百度网盘分享链接优化 + +当书写类似下面的分享链接时 + +::: tip +需要 `baidupan = true` +::: + +``` +普通分享链接 + +> https://pan.baidu.com/s/1kW6uUwB + +私密分享链接 + +> 链接: https://pan.baidu.com/s/1ggFW21l 密码: 877y +``` + +markdown 中引用部分的文本由于被识别为百度云的分享链接，所以不会被当做 `blockquote` 渲染（非百度云链接的引用行不会改变），会以一种特别的块来显示，效果见下 + +![效果](./image/baiduyun.png) + +::: tip +了解 D2Admin 是如何在 markdown 中匹配百度云链接的？ [查看源码](https://github.com/d2-projects/d2-admin/blob/master/src/components/core/d2-markdown/index.vue) +::: \ No newline at end of file diff --git a/docs/zh/sys-css/README.md b/docs/zh/sys-css/README.md new file mode 100644 index 00000000..4b94ed06 --- /dev/null +++ b/docs/zh/sys-css/README.md @@ -0,0 +1,7 @@ +--- +sidebar: auto +--- + +# title + +info \ No newline at end of file diff --git a/docs/zh/sys-db/README.md b/docs/zh/sys-db/README.md new file mode 100644 index 00000000..4b94ed06 --- /dev/null +++ b/docs/zh/sys-db/README.md @@ -0,0 +1,7 @@ +--- +sidebar: auto +--- + +# title + +info \ No newline at end of file diff --git a/docs/zh/sys-menu/README.md b/docs/zh/sys-menu/README.md new file mode 100644 index 00000000..4b94ed06 --- /dev/null +++ b/docs/zh/sys-menu/README.md @@ -0,0 +1,7 @@ +--- +sidebar: auto +--- + +# title + +info \ No newline at end of file diff --git a/docs/zh/sys-multi-page/README.md b/docs/zh/sys-multi-page/README.md new file mode 100644 index 00000000..4b94ed06 --- /dev/null +++ b/docs/zh/sys-multi-page/README.md @@ -0,0 +1,7 @@ +--- +sidebar: auto +--- + +# title + +info \ No newline at end of file diff --git a/docs/zh/sys-plugins/README.md b/docs/zh/sys-plugins/README.md new file mode 100644 index 00000000..d5688fce --- /dev/null +++ b/docs/zh/sys-plugins/README.md @@ -0,0 +1,7 @@ +# 插件概述 + +d2-admin（以下简称 d2admin）封装（或者集成第三方）了一些插件，方便开发者进行开发，具体组件文档请从左侧列表进入 + +::: tip +这里只列出一部分需要特别说明的插件，大部分集成的插件都可以在网络上找到官方文档 +::: \ No newline at end of file diff --git a/docs/zh/sys-plugins/data-export.md b/docs/zh/sys-plugins/data-export.md new file mode 100644 index 00000000..5ebc9b91 --- /dev/null +++ b/docs/zh/sys-plugins/data-export.md @@ -0,0 +1,148 @@ +# 表格导出 + +本框架集成了数据导出功能，并包装成插件 + +## 注册插件 + +``` js +import pluginExport from '@/plugin/export' +Vue.use(pluginExport) +``` + +之后就可以在组件中使用 `this.$export` 来调用导出功能 + +::: tip +d2admin 已经帮你注册好，可以直接使用，无需写上面的代码 +::: + +## 导出 csv + +此方法将数据以 `csv` 格式导出，并且返回一个 `Promise` 对象 + +使用 + +``` js +this.$export.csv({ + columns, + data +}) + .then(() => { + // ...可选回调 + }) +``` + +参数 + +| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 | +| --- | --- | --- | --- | --- | --- | +| columns | 列 | 非 | Array | | 空数组 | +| data | 行数据 | 非 | Array | | 空数组 | +| title | 文件名 | 非 | String | | table | +| noHeader | 不导出表头 | 非 | Boolean | | false | +| separator | 数据分隔符 | 非 | String | | , | +| quoted | 每项数据是否加引号 | 非 | Boolean | | false | + +示例 + +``` js +const columns = [ + { + label: '姓名', + prop: 'name' + }, + { + label: '年龄', + prop: 'age' + } +] +const data = [ + { + name: 'lucy', + age: 24 + }, + { + name: 'bob', + age: 26 + } +] +this.$export.csv({ + columns, + data +}) +``` + +## 导出 xlsx + +此方法将数据以 `xlsx` 格式导出，并且返回一个 `Promise` 对象 + +使用 + +``` js +this.$export.excel({ + columns, + data +}) + .then(() => { + // ...可选回调 + }) +``` + +参数 + +| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 | +| --- | --- | --- | --- | --- | --- | +| columns | 列 | 非 | Array | | 空数组 | +| data | 行数据 | 非 | Array | | 空数组 | +| title | 文件名 | 非 | String | | table | + +示例 + +``` js +const columns = [ + { + label: '姓名', + prop: 'name' + }, + { + label: '年龄', + prop: 'age' + } +] +const data = [ + { + name: 'lucy', + age: 24 + }, + { + name: 'bob', + age: 26 + } +] +this.$export.excel({ + columns, + data +}) +``` + +## 导出 txt + +此方法将数据以 `txt` 格式导出，并且返回一个 `Promise` 对象 + +使用 + +``` js +this.$export.txt({ + text: '文本内容', + title: '文件名' +}) + .then(() => { + // ...可选回调 + }) +``` + +参数 + +| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 | +| --- | --- | --- | --- | --- | --- | +| text | 文件内容 | 非 | String | | 空 | +| title | 文件名 | 非 | String | | 文本 | diff --git a/docs/zh/sys-plugins/data-import.md b/docs/zh/sys-plugins/data-import.md new file mode 100644 index 00000000..817abefe --- /dev/null +++ b/docs/zh/sys-plugins/data-import.md @@ -0,0 +1,64 @@ +# 表格导入 + +本框架集成了数据导入功能，并包装成插件 + +## 注册插件 + +``` js +import pluginImport from '@/plugin/import' +Vue.use(pluginImport) +``` + +之后就可以在组件中使用 `this.$import` 来调用导出功能 + +::: tip +d2admin 已经帮你注册好，可以直接使用，无需写上面的代码 +::: + +## 导入 csv + +导入csv文件，并且返回一个 `Promise` 对象 + +``` js +// 在选择文件后调用 +handleUpload (file) { + this.$import.csv(file) + .then(res => { + this.table.columns = Object.keys(res.data[0]).map(e => ({ + label: e, + prop: e + })) + this.table.data = res.data + }) + // 阻止默认的上传 + return false +} +``` + +## 导入 xlsx + +导入xlsx文件，并且返回一个 `Promise` 对象 + +**注意 导入的表格文件第一行应为表头** + +参考下述示例使用 + +``` js +// 在选择文件后调用 +handleUpload (file) { + this.$import.xlsx(file) + .then(({header, results}) => { + // header 为表头 + // results 为内容 + this.table.columns = header.map(e => { + return { + label: e, + prop: e + } + }) + this.table.data = results + }) + // 阻止默认的上传 + return false +} +``` \ No newline at end of file diff --git a/docs/zh/sys-plugins/i18n.md b/docs/zh/sys-plugins/i18n.md new file mode 100644 index 00000000..12e2522a --- /dev/null +++ b/docs/zh/sys-plugins/i18n.md @@ -0,0 +1,124 @@ +# 多国语 + +多国语插件 + +::: tip +此文档仅限于演示如何在 `D2Admin` 中使用多国语言设置 +::: + +公用的语言设置建议放在 `src/i18n` 下 + +i18n 文件夹结构如下所示 + +``` +|__index.js // 主文件 +|__lang // 语言配置文件夹 +| |__cn // 中文 +| | |__index.js // 中文 公用配置 +| |__ja // 日语 +| | |__index.js // 日语 公用配置 +| |__en // 英语 +| | |__index.js // 英语 公用配置 +``` + +在 `src/i18n/index.js` 中导入同级lang文件夹内的语言设置，并导出一个新的 `VueI18n` 实例供 `main.js` 使用 + +``` js +import i18n from './i18n' +new Vue({ + el: '#app', + store, + i18n, // 使用 i18n + router, + template: '', + components: { App } +}) +``` + +## 使用 + +使用 `$t('路径')` + +``` vue + + +``` + +## 局部配置 + +有时候我们只希望在某个文件中配置这个组件的多国语言，如果所有的语言设置都放在 `d2-admin/src/i18n` 中会造成混乱，不易维护 + +`D2Admin` 已经替你安装好了 `vue-i18n-loader`，可以方便地在单文件组件中使用 + +示例 + +``` vue + + + + + +``` + +在同一文件夹下的 `lang.json` + +``` json +{ + "cn": { + "hello": "你好", + "check": { + "title": "请选择", + "label": { + "Beijing": "北京", + "Tokyo": "东京", + "NewYork": "纽约" + } + } + }, + "en": { + "hello": "hello", + "check": { + "title": "Please choose", + "label": { + "Beijing": "Beijing", + "Tokyo": "Tokyo", + "NewYork": "NewYork" + } + } + }, + "ja": { + "hello": "こんにちは", + "check": { + "title": "選択してください", + "label": { + "Beijing": "北京", + "Tokyo": "東京", + "NewYork": "ニューヨーク" + } + } + } +} +``` + +详细教程请查看官方文档，见此页右上角的链接 \ No newline at end of file diff --git a/docs/zh/sys-plugins/mock.md b/docs/zh/sys-plugins/mock.md new file mode 100644 index 00000000..edb33169 --- /dev/null +++ b/docs/zh/sys-plugins/mock.md @@ -0,0 +1,221 @@ +# 模拟数据 + +在 `src/mock/demo/001.js` 配置拦截返回的数据 + +## 使用 + +``` js +import Mock from 'mockjs' + +Mock.mock('/api/demo/001', { + 'list|4-10': [{ + 'id|+1': 1, + 'name': '@CNAME', + 'star|1-5': '★', + 'delFlag|1': [0, 1], + 'creatDate': '@DATE', + 'address': '@CITY', + 'zip': '@ZIP' + }] +}) +``` + +请求数据 + +``` js +ajax () { + this.$axios.get('/api/demo/001') + .then(res => { + this.table.columns = Object.keys(res.data.list[0]).map(e => ({ + label: e, + prop: e + })) + this.table.data = res.data.list + }) +} +``` + +## mock 语法规范 + +Mock.js 的语法规范包括两部分： + +1. 数据模板定义规范（Data Template Definition，DTD） +2. 数据占位符定义规范（Data Placeholder Definition，DPD） + +### 数据模板定义规范 DTD + +**数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：** + +``` js +// 属性名 name +// 生成规则 rule +// 属性值 value +'name|rule': value +``` + +**注意：** + +* _属性名_ 和 _生成规则_ 之间用竖线 `|` 分隔。 +* _生成规则_ 是可选的。 +* _生成规则_ 有 7 种格式： + 1. `'name|min-max': value` + 1. `'name|count': value` + 1. `'name|min-max.dmin-dmax': value` + 1. `'name|min-max.dcount': value` + 1. `'name|count.dmin-dmax': value` + 1. `'name|count.dcount': value` + 1. `'name|+step': value` +* **_生成规则_ 的 含义 需要依赖 _属性值的类型_ 才能确定。** +* _属性值_ 中可以含有 `@占位符`。 +* _属性值_ 还指定了最终值的初始值和类型。 + + + +**生成规则和示例：** + +#### 1. 属性值是字符串 **String** + +1. `'name|min-max': string` + + 通过重复 `string` 生成一个字符串，重复次数大于等于 `min`，小于等于 `max`。 + +2. `'name|count': string` + + 通过重复 `string` 生成一个字符串，重复次数等于 `count`。 + +#### 2. 属性值是数字 **Number** + +1. `'name|+1': number` + + 属性值自动加 1，初始值为 `number`。 + +2. `'name|min-max': number` + + 生成一个大于等于 `min`、小于等于 `max` 的整数，属性值 `number` 只是用来确定类型。 + +3. `'name|min-max.dmin-dmax': number` + + 生成一个浮点数，整数部分大于等于 `min`、小于等于 `max`，小数部分保留 `dmin` 到 `dmax` 位。 + +``` js +Mock.mock({ + 'number1|1-100.1-10': 1, + 'number2|123.1-10': 1, + 'number3|123.3': 1, + 'number4|123.10': 1.123 +}) +// => +{ + "number1": 12.92, + "number2": 123.51, + "number3": 123.777, + "number4": 123.1231091814 +} +``` + +#### 3. 属性值是布尔型 **Boolean** + +1. `'name|1': boolean` + + 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。 + +2. `'name|min-max': value` + + 随机生成一个布尔值，值为 `value` 的概率是 `min / (min + max)`，值为 `!value` 的概率是 `max / (min + max)`。 + +#### 4. 属性值是对象 **Object** + +1. `'name|count': object` + + 从属性值 `object` 中随机选取 `count` 个属性。 + +2. `'name|min-max': object` + + 从属性值 `object` 中随机选取 `min` 到 `max` 个属性。 + +#### 5. 属性值是数组 **Array** + +1. `'name|1': array` + + 从属性值 `array` 中随机选取 1 个元素，作为最终值。 + +2. `'name|+1': array` + + 从属性值 `array` 中顺序选取 1 个元素，作为最终值。 + +3. `'name|min-max': array` + + 通过重复属性值 `array` 生成一个新数组，重复次数大于等于 `min`，小于等于 `max`。 + +4. `'name|count': array` + + 通过重复属性值 `array` 生成一个新数组，重复次数为 `count`。 + +#### 6. 属性值是函数 **Function** + +1. `'name': function` + + 执行函数 `function`，取其返回值作为最终的属性值，函数的上下文为属性 `'name'` 所在的对象。 + +#### 7. 属性值是正则表达式 **RegExp** + +1. `'name': regexp` + + 根据正则表达式 `regexp` 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。 + + ``` js + Mock.mock({ + 'regexp1': /[a-z][A-Z][0-9]/, + 'regexp2': /\w\W\s\S\d\D/, + 'regexp3': /\d{5,10}/ + }) + // => + { + "regexp1": "pJ7", + "regexp2": "F)\fp1G", + "regexp3": "561659409" + } + ``` + +### 数据占位符定义规范 DPD + +_占位符_ 只是在属性值字符串中占个位置，并不出现在最终的属性值中。 + +_占位符_ 的格式为： + +``` +@占位符 +@占位符(参数 [, 参数]) +``` + +**注意：** + +1. 用 `@` 来标识其后的字符串是 _占位符_。 +2. _占位符_ 引用的是 `Mock.Random` 中的方法。 +3. 通过 `Mock.Random.extend()` 来扩展自定义占位符。 +4. _占位符_ 也可以引用 _数据模板_ 中的属性。 +5. _占位符_ 会优先引用 _数据模板_ 中的属性。 +6. _占位符_ 支持 _相对路径_ 和 _绝对路径_。 + +``` js +Mock.mock({ + name: { + first: '@FIRST', + middle: '@FIRST', + last: '@LAST', + full: '@first @middle @last' + } +}) +// => +{ + "name": { + "first": "Charles", + "middle": "Brenda", + "last": "Lopez", + "full": "Charles Brenda Lopez" + } +} +``` + + + diff --git a/docs/zh/sys-route/README.md b/docs/zh/sys-route/README.md new file mode 100644 index 00000000..4b94ed06 --- /dev/null +++ b/docs/zh/sys-route/README.md @@ -0,0 +1,7 @@ +--- +sidebar: auto +--- + +# title + +info \ No newline at end of file diff --git a/docs/zh/sys-theme/README.md b/docs/zh/sys-theme/README.md new file mode 100644 index 00000000..4b94ed06 --- /dev/null +++ b/docs/zh/sys-theme/README.md @@ -0,0 +1,7 @@ +--- +sidebar: auto +--- + +# title + +info \ No newline at end of file diff --git a/docs/zh/sys-util/README.md b/docs/zh/sys-util/README.md new file mode 100644 index 00000000..4b94ed06 --- /dev/null +++ b/docs/zh/sys-util/README.md @@ -0,0 +1,7 @@ +--- +sidebar: auto +--- + +# title + +info \ No newline at end of file diff --git a/docs/zh/sys-vuex/README.md b/docs/zh/sys-vuex/README.md new file mode 100644 index 00000000..4b94ed06 --- /dev/null +++ b/docs/zh/sys-vuex/README.md @@ -0,0 +1,7 @@ +--- +sidebar: auto +--- + +# title + +info \ No newline at end of file