Former-commit-id: dd4c302e448f871376ab1298240b44aa3d3e1643 [formerly dd4c302e448f871376ab1298240b44aa3d3e1643 [formerly dd4c302e448f871376ab1298240b44aa3d3e1643 [formerly dd4c302e448f871376ab1298240b44aa3d3e1643 [formerly 8bbdd72ba63cd9161b2b2e51826b8813e8c9fffc [formerly e7d3090ad5a6f6801b32d0abce9a4e9291fcc0e7]]]]] Former-commit-id: 1be4f8ac464528598b8a52649c107686d01c08d8 Former-commit-id: 7317640b0da3a039d8ca5b6457c1263fc1261272 Former-commit-id: 29d4f7df0be48866f4309a012d38e008e1725438 [formerly 9ee9681b4a3200cc3b344673e83d9f5e4343f07a] Former-commit-id: fddc0694f8fbf921142069e11ff694ea218fa0d9 Former-commit-id: 92059d07f780aa09aaff77faf9bc41a8bd6269f0 Former-commit-id: aef5ddaf56545324913a9b425e7f8b7c3ed45518 Former-commit-id: 279be73fde5a48ddc78a258a2ea55a3b0d64fe2b Former-commit-id: b970cb8f0bbe694a3bf733e726f8c833a1f3f511
This commit is contained in:
liyang
parent
f67e14c3b9
commit
1ef066f47d
|
|
@ -19,3 +19,4 @@ yarn-error.log*
|
|||
*.njsproj
|
||||
*.sln
|
||||
*.sw*
|
||||
dev/design
|
||||
|
|
|
|||
|
|
@ -0,0 +1,101 @@
|
|||
D2Admin 是一个开源的管理系统前端集成方案，为了方便开发者快速进行管理系统开发而设计
|
||||
|
||||
## 仓库和文档
|
||||
|
||||
本项目仓库在 Github 和 Gitee 同步发布
|
||||
|
||||
[中文文档](http://d2admin.fairyever.com/zh/)
|
||||
|
||||
**完整版**
|
||||
|
||||
[Github 仓库](https://github.com/d2-projects/d2-admin) |
|
||||
[码云仓库](https://gitee.com/fairyever/d2-admin) |
|
||||
[预览地址](https://fairyever.gitee.io/d2-admin-preview)
|
||||
|
||||
**简化版模板**
|
||||
|
||||
[Github 仓库](https://github.com/d2-projects/d2-admin-start-kit) |
|
||||
[码云仓库](https://gitee.com/fairyever/d2-admin-start-kit) |
|
||||
[预览地址](https://fairyever.gitee.io/d2-admin-start-kit-preview/#/index)
|
||||
|
||||
因为现在集成了很多的插件和组件，首次加载会占用很多的时间，虽然已经做了首屏加载动画，但还是建议您在发布之前一定要删除没有用到的代码，比如项目没有用到图表、示例、插件组件
|
||||
|
||||
<img src="https://raw.githubusercontent.com/FairyEver/d2-admin/master/dev/github/preview@2x.png"/>
|
||||
|
||||
## 功能
|
||||
|
||||
* 首屏加载等待动画 避免首次加载白屏尴尬
|
||||
* 简约主题
|
||||
* 每个插件和组件都配有介绍文档
|
||||
* 图片资源 sketch 源文件（ 可以在这个文件内重新生成所有图片资源 ）
|
||||
* 登陆和注销
|
||||
* 根据路由自动生成菜单
|
||||
* 可折叠侧边栏
|
||||
* 方便的菜单设置
|
||||
* 多国语言支持
|
||||
* 富文本编辑器
|
||||
* Markdown 编辑器
|
||||
* 全屏功能
|
||||
* Fontawesome 图标库
|
||||
* 图标选择器（组件）
|
||||
* 自动引入下载的 SVG 图标
|
||||
* 前端假数据支持（ mock ）
|
||||
* 集成蚂蚁金服出品的 G2 图表
|
||||
* 图表自适应可拖拽大小的卡片容器（示例）
|
||||
* 简化剪贴板操作
|
||||
* 简化Cookie操作
|
||||
* 时间日期计算工具
|
||||
* 导入 Excel （ xlsx 格式 + csv 格式 ）
|
||||
* 数据导出 Excel （ xlsx 格式 + csv 格式 ）
|
||||
* 数据导出文本
|
||||
* 数字动画
|
||||
* 可拖拽调整大小的切分布局
|
||||
* 可拖拽调整大小和位置的网格布局
|
||||
* 提供三种方便的页面容器组件（正常卡片，隐形容器，填满页面）
|
||||
* 代码高亮显示
|
||||
* 加载并解析（或者直接指定资源） markdown 文件
|
||||
* GitHub 样式的 markdown 显示组件
|
||||
* markdown 内代码高亮
|
||||
* 为 markdown 扩展了百度云链接解析和优化显示
|
||||
* 右键菜单组件
|
||||
* 自定义滚动条和滚动控制
|
||||
* 内置5种主题
|
||||
* 公用样式抽离，方便的主题定制
|
||||
* 支持百万级数据量的表格组件
|
||||
* 打包后随意目录部署（已经做好兼容设置）
|
||||
* 支持临时菜单配置
|
||||
* 提供“试验台”功能 方便展示系统功能调用方法 `1.1.4 +`
|
||||
* 多标签页模式 `1.1.4 +`
|
||||
* 美化滚动条 `1.1.4 +`
|
||||
* 持久化存储 `1.1.4 +`
|
||||
|
||||
## 加入小组
|
||||
|
||||
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 仓库
|
||||
|
||||
## 觉得不错 赏个咖啡 让作者打起精神 ~
|
||||
|
||||
<img src="https://raw.githubusercontent.com/FairyEver/d2-admin/master/dev/github/reward-me@2x.png"/>
|
||||
<img src="https://raw.githubusercontent.com/FairyEver/d2-admin/master/dev/github/qr@2x.png"/>
|
||||
|
||||
更多介绍和使用方法见 [文档](http://d2admin.fairyever.com/zh/)
|
||||
|
||||
## 朋友的开源项目
|
||||
|
||||
* [avue](https://github.com/nmxiaowei/avue)
|
||||
|
||||
<img src="https://raw.githubusercontent.com/FairyEver/d2-admin/master/dev/github/give-a-star@2x.png"/>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
#!/usr/bin/env sh
|
||||
|
||||
# 确保脚本抛出遇到的错误
|
||||
set -e
|
||||
|
||||
# 生成静态文件
|
||||
npm run doc:build
|
||||
|
||||
# 进入生成的文件夹
|
||||
cd docs/.vuepress/dist
|
||||
|
||||
git init
|
||||
git add -A
|
||||
git commit -m 'deploy'
|
||||
|
||||
# 如果发布到 https://<USERNAME>.github.io
|
||||
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
|
||||
|
||||
# 如果发布到 https://<USERNAME>.github.io/<REPO>
|
||||
# git push -f git@github.com:FairyEver/d2-admin.git master:gh-pages
|
||||
git push -f git@gitee.com:fairyever/d2-admin-doc.git master
|
||||
|
||||
cd -
|
||||
|
||||
echo "publish to http://d2admin.fairyever.com/zh/"
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
set -e
|
||||
|
||||
git add --all
|
||||
|
||||
git commit -m 'no message'
|
||||
|
||||
git push
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
#!/usr/bin/env sh
|
||||
|
||||
# 确保脚本抛出遇到的错误
|
||||
set -e
|
||||
|
||||
# 生成静态文件
|
||||
npm run build
|
||||
|
||||
# 进入生成的文件夹
|
||||
cd dist
|
||||
|
||||
# 如果是发布到自定义域名
|
||||
# echo 'www.example.com' > CNAME
|
||||
|
||||
git init
|
||||
git add -A
|
||||
git commit -m 'deploy'
|
||||
|
||||
# 如果发布到 https://<USERNAME>.github.io
|
||||
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
|
||||
|
||||
# 如果发布到 https://<USERNAME>.github.io/<REPO>
|
||||
git push -f git@gitee.com:fairyever/d2-admin-preview.git master
|
||||
|
||||
cd -
|
||||
|
||||
echo "publish to https://fairyever.gitee.io/d2-admin-preview/#/index"
|
||||
|
|
@ -0,0 +1 @@
|
|||
ef1324a190d1bcb162d301749057d943990174c1
|
||||
|
|
@ -0,0 +1 @@
|
|||
f7a47389e6c0773e9d218227678ebb8850ea87e8
|
||||
|
|
@ -0,0 +1 @@
|
|||
27e431bd9e4752dd51fe827a1281d606bd7bdf07
|
||||
|
|
@ -0,0 +1 @@
|
|||
17502d4e47a0d11f5a1cec935f48229d7ed38fc8
|
||||
|
|
@ -0,0 +1 @@
|
|||
729a7896f93feaddd10e80dab4f5ff4ce05e64a8
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
{
|
||||
// 一个新的页面
|
||||
"d2-new-page": {
|
||||
"prefix": "dd-new-page",
|
||||
"body": [
|
||||
"<template>",
|
||||
" <d2-container type=\"${1:full}\" class=\"page\">",
|
||||
" ${2:page-name}",
|
||||
" </d2-container>",
|
||||
"</template>",
|
||||
"",
|
||||
"<script>",
|
||||
"export default {",
|
||||
" data () {",
|
||||
" return {}",
|
||||
" },",
|
||||
" computed: {",
|
||||
" },",
|
||||
" methods: {",
|
||||
" }",
|
||||
"}",
|
||||
"</script>",
|
||||
"",
|
||||
"<style lang=\"scss\" scoped>",
|
||||
"@import '~@/assets/style/public.scss';",
|
||||
".page {",
|
||||
" // Your page style here",
|
||||
" // Do not use empty rulesets",
|
||||
" // If empty, delete it",
|
||||
"}",
|
||||
"</style>"
|
||||
],
|
||||
"description": "new page"
|
||||
},
|
||||
// d2-container 组件 header 插槽
|
||||
"d2-container-header": {
|
||||
"prefix": "dd-container-header",
|
||||
"body": [
|
||||
"<template slot=\"header\">${1:header}</template>"
|
||||
],
|
||||
"description": "d2-container component header slot"
|
||||
},
|
||||
// d2-container 组件 footer 插槽
|
||||
"d2-container-footer": {
|
||||
"prefix": "dd-container-footer",
|
||||
"body": [
|
||||
"<template slot=\"footer\">${1:footer}</template>"
|
||||
],
|
||||
"description": "d2-container component footer slot"
|
||||
},
|
||||
// 图标组件
|
||||
"d2-icon": {
|
||||
"prefix": "dd-icon",
|
||||
"body": [
|
||||
"<d2-icon name=\"${1:github}\"/>"
|
||||
],
|
||||
"description": "d2-icon component"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
{
|
||||
// 一个新的页面
|
||||
"d2-new-page": {
|
||||
"prefix": "dd-new-page",
|
||||
"body": [
|
||||
"<template>",
|
||||
" <d2-container type=\"${1:full}\" class=\"page\">",
|
||||
" ${2:page-name}",
|
||||
" </d2-container>",
|
||||
"</template>",
|
||||
"",
|
||||
"<script>",
|
||||
"export default {",
|
||||
" data () {",
|
||||
" return {}",
|
||||
" },",
|
||||
" computed: {",
|
||||
" },",
|
||||
" methods: {",
|
||||
" }",
|
||||
"}",
|
||||
"</script>",
|
||||
"",
|
||||
"<style lang=\"scss\" scoped>",
|
||||
"@import '~@/assets/style/public.scss';",
|
||||
".page {",
|
||||
" // Your page style here",
|
||||
" // Do not use empty rulesets",
|
||||
" // If empty, delete it",
|
||||
"}",
|
||||
"</style>"
|
||||
],
|
||||
"description": "new page"
|
||||
},
|
||||
// d2-container 组件 header 插槽
|
||||
"d2-container-header": {
|
||||
"prefix": "dd-container-header",
|
||||
"body": [
|
||||
"<template slot=\"header\">${1:header}</template>"
|
||||
],
|
||||
"description": "d2-container component header slot"
|
||||
},
|
||||
// d2-container 组件 footer 插槽
|
||||
"d2-container-footer": {
|
||||
"prefix": "dd-container-footer",
|
||||
"body": [
|
||||
"<template slot=\"footer\">${1:footer}</template>"
|
||||
],
|
||||
"description": "d2-container component footer slot"
|
||||
},
|
||||
// 图标组件
|
||||
"d2-icon": {
|
||||
"prefix": "dd-icon",
|
||||
"body": [
|
||||
"<d2-icon name=\"${1:github}\"/>"
|
||||
],
|
||||
"description": "d2-icon component"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
module.exports = {
|
||||
locales: {
|
||||
'/': {
|
||||
lang: 'en-US',
|
||||
title: 'D2 Admin',
|
||||
description: 'Elegant management system front-end integration'
|
||||
},
|
||||
'/zh/': {
|
||||
lang: 'zh-CN',
|
||||
title: 'D2 Admin',
|
||||
description: '优雅的管理系统前端集成方案'
|
||||
}
|
||||
},
|
||||
head: [
|
||||
['link', { rel: 'icon', href: `/logo@2x.png` }],
|
||||
['script', {}, 'var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?be9d34853430c136b5d62c3081d556a5";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();']
|
||||
],
|
||||
themeConfig: {
|
||||
// 项目仓库地址
|
||||
repo: 'https://github.com/d2-projects/d2-admin',
|
||||
// 自定义仓库链接文字
|
||||
repoLabel: '查看源码',
|
||||
// 文档不是放在仓库的根目录下
|
||||
docsDir: 'docs',
|
||||
// 默认是 false, 设置为 true 来启用
|
||||
editLinks: true,
|
||||
// 多国语言
|
||||
locales: {
|
||||
'/': {
|
||||
selectText: 'Languages',
|
||||
label: 'English',
|
||||
editLinkText: 'Edit this page on GitHub',
|
||||
lastUpdated: 'Last update',
|
||||
nav: [
|
||||
{ text: 'preview', link: 'https://fairyever.gitee.io/d2-admin-preview/#/index' }
|
||||
]
|
||||
},
|
||||
'/zh/': {
|
||||
selectText: '选择语言',
|
||||
label: '简体中文',
|
||||
editLinkText: '在 GitHub 上编辑此页',
|
||||
lastUpdated: '最后更新',
|
||||
nav: [
|
||||
{ text: '指南', link: '/zh/guide/' },
|
||||
{ text: '插件', link: '/zh/plugins/' },
|
||||
{ text: '组件', link: '/zh/components/' },
|
||||
{ text: '文章', link: '/zh/article/' },
|
||||
{ text: '其它', link: '/zh/others/' },
|
||||
{ text: '预览', link: 'https://fairyever.gitee.io/d2-admin-preview/#/index' }
|
||||
],
|
||||
sidebar: {
|
||||
'/zh/guide/': sideBarGuide('指南'),
|
||||
'/zh/plugins/': sideBarPlugins('插件'),
|
||||
'/zh/components/': sideBarComponents('组件'),
|
||||
'/zh/article/': sideBarArticle('版本更新'),
|
||||
'/zh/others/': sideBarOthers('其它')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function sideBarGuide (title) {
|
||||
return [
|
||||
{
|
||||
title,
|
||||
collapsable: false,
|
||||
children: [
|
||||
'',
|
||||
'question',
|
||||
'pr',
|
||||
'change-log'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
function sideBarPlugins () {
|
||||
return [
|
||||
'',
|
||||
'data-export',
|
||||
'data-import',
|
||||
'i18n',
|
||||
'mock'
|
||||
]
|
||||
}
|
||||
|
||||
function sideBarComponents (title) {
|
||||
return [
|
||||
{
|
||||
title,
|
||||
collapsable: false,
|
||||
children: [
|
||||
'',
|
||||
'charts',
|
||||
'charts-new',
|
||||
'container',
|
||||
'count-up',
|
||||
'highlight',
|
||||
'icon-select',
|
||||
'icon-svg',
|
||||
'icon',
|
||||
'markdown'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
function sideBarArticle (titleUpdate) {
|
||||
return [
|
||||
{
|
||||
title: titleUpdate,
|
||||
collapsable: false,
|
||||
children: [
|
||||
'',
|
||||
'update/1.1.4',
|
||||
'update/0.0.0'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
function sideBarOthers (title) {
|
||||
return [
|
||||
{
|
||||
title,
|
||||
collapsable: false,
|
||||
children: [
|
||||
'',
|
||||
'css'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
$accentColor = #409EFF
|
||||
|
|
@ -0,0 +1 @@
|
|||
d9ade30cf874de657275755e4783fde51f2f6ffc
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
home: true
|
||||
heroImage: /logo@2x.png
|
||||
actionText: Get Started →
|
||||
actionLink: /zh/guide/
|
||||
features:
|
||||
- title: Vue-Powered
|
||||
details: Enjoy the dev experience of Vue + webpack, Ultra fast virtual DOM and the most economical optimization.
|
||||
- title: Rich integration
|
||||
details: The plug-ins and components that are likely to be used are ready for you. Some come from third parties, others are designed for d2admin.
|
||||
- title: ElementUI component library
|
||||
details: Integrated and robust ElementUI, and use any ElementUI component at will.
|
||||
footer: MIT Licensed | Copyright © 2018-present FairyEver
|
||||
---
|
||||
|
||||
**The English document will be launched in the future. Please move to the Chinese document.**
|
||||
|
||||
**英文文档会在中文文档大致完成后推出，现请移步中文文档**
|
||||
|
||||
```
|
||||
// install package
|
||||
npm i
|
||||
// run
|
||||
npm run dev
|
||||
// build
|
||||
npm run build
|
||||
```
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
home: true
|
||||
heroImage: /logo@2x.png
|
||||
actionText: 快速上手 →
|
||||
actionLink: /zh/guide/
|
||||
features:
|
||||
- title: Vue驱动
|
||||
details: 享受 Vue + webpack 的开发体验，超快虚拟 DOM 和最省心的优化。
|
||||
- title: 丰富集成
|
||||
details: 已经为你准备好了很可能用到的插件和组件，有的来自第三方，有的专为 d2admin 设计。
|
||||
- title: ElementUI组件库
|
||||
details: 集成完善且强大的 ElementUI，随意搭配使用任何 ElementUI 组件。
|
||||
footer: MIT Licensed | Copyright © 2018-present FairyEver
|
||||
---
|
||||
|
||||
```
|
||||
// 安装依赖
|
||||
npm i
|
||||
|
||||
// 运行
|
||||
npm run dev
|
||||
|
||||
// 打包
|
||||
npm run build
|
||||
```
|
||||
|
||||
> 如果上述步骤出现错误，建议您升级 node 版本 > 8，如果有其它疑问请参考[常见问题](/zh/guide/question.html)
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# 章节介绍
|
||||
|
||||
这个章节下收录关于 D2Admin 的一些介绍，用法，以及每次发布新版本时的推广文章，也是每篇新文章的首发地址。
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
# 公布项目
|
||||
|
||||
|
||||
|
||||
# 介绍
|
||||
|
||||
D2Admin 是一个开源的管理系统前端集成方案
|
||||
|
||||
[Github仓库](https://github.com/d2-projects/d2-admin) - [预览地址](https://fairyever.gitee.io/d2-admin-preview/#/index) - [中文文档](https://fairyever.gitee.io/d2-admin-doc/zh/)
|
||||
|
||||
D2Admin 是完全开源免费的管理系统集成方案，由 [FairyEver](https://github.com/FairyEver) 在工作之余完全由兴趣驱动完成，如果你也一样喜欢前端开发，欢迎加入我们的讨论/学习群，群内可以`提问答疑`，`分享学习资料`或者随便扯淡
|
||||
|
||||
**QQ群**
|
||||
|
||||
群号 806395827 欢迎大家
|
||||
|
||||
**微信群**
|
||||
|
||||
作者微信 liyang1711467488
|
||||
|
||||
> 微信群需要先加群主才可以拉进群
|
||||
|
||||
## 功能
|
||||
|
||||
* 首屏加载等待动画 避免首次加载白屏尴尬
|
||||
* 简约主题
|
||||
* 每个插件和组件都配有介绍文档
|
||||
* 图片资源 sketch 源文件（ 可以在这个文件内重新生成所有图片资源 ）
|
||||
* 登陆和注销
|
||||
* 根据路由自动生成菜单
|
||||
* 可折叠侧边栏
|
||||
* 方便的菜单设置
|
||||
* 多国语言支持
|
||||
* 富文本编辑器
|
||||
* Markdown 编辑器
|
||||
* 全屏功能
|
||||
* Fontawesome 图标库
|
||||
* 图标选择器（组件）
|
||||
* 自动引入下载的 SVG 图标
|
||||
* 前端假数据支持（ mock ）
|
||||
* 集成蚂蚁金服出品的 G2 图表
|
||||
* 图表自适应可拖拽大小的卡片容器（示例）
|
||||
* 简化剪贴板操作
|
||||
* 简化Cookie操作
|
||||
* 时间日期计算工具
|
||||
* 导入 Excel （ xlsx 格式 + csv 格式 ）
|
||||
* 数据导出 Excel （ xlsx 格式 + csv 格式 ）
|
||||
* 数据导出文本
|
||||
* 数字动画
|
||||
* 可拖拽调整大小的切分布局
|
||||
* 可拖拽调整大小和位置的网格布局
|
||||
* 提供三种方便的页面容器组件（正常卡片，隐形容器，填满页面）
|
||||
* 代码高亮显示
|
||||
* 加载并解析（或者直接指定资源） markdown 文件
|
||||
* GitHub 样式的 markdown 显示组件
|
||||
* markdown 内代码高亮
|
||||
* 为 markdown 扩展了百度云链接解析和优化显示
|
||||
* 右键菜单组件
|
||||
* 自定义滚动条和滚动控制
|
||||
* 内置4种主题
|
||||
* 公用样式抽离，方便的主题定制
|
||||
* 支持百万级数据量的表格组件
|
||||
* 打包后随意目录部署（已经做好兼容设置）
|
||||
|
||||
## TODO
|
||||
|
||||
D2Admin 仍然处于开发中，这里有一些计划：
|
||||
|
||||
* 分离出简化版本
|
||||
* 推出基于 [ice](https://alibaba.github.io/ice) 平台的版本
|
||||
* 增加右上角通知中心
|
||||
* 增加一些实例页面以提供业务页面布局建议
|
||||
* 更换图表库
|
||||
* 多 tab 页结构
|
||||
* 面包屑导航
|
||||
* 树型表格组件
|
||||
* `1.1.0 完成` 抽离项目里的文档，集中存放在文档站点
|
||||
* `1.1.0 完成` 对主界面进行一次完善，调整整体布局和颜色
|
||||
* `1.1.0 完成` 切换主题功能
|
||||
|
||||
欢迎你为 D2Admin 的开发作出贡献（代码编写/文档翻译）。
|
||||
|
||||
## 目录结构
|
||||
|
||||
```
|
||||
├─ build
|
||||
├─ config
|
||||
├─ docs // 文档
|
||||
├─ src
|
||||
│ ├─ assets // 资源
|
||||
│ │ ├─ icons
|
||||
│ │ ├─ image
|
||||
│ │ ├─ library
|
||||
│ │ └─ style
|
||||
│ ├─ components // 组件
|
||||
│ │ ├─ charts
|
||||
│ │ ├─ core
|
||||
│ │ └─ demo
|
||||
│ ├─ i18n // 多国语
|
||||
│ ├─ menu // 菜单
|
||||
│ ├─ mock // 模拟数据
|
||||
│ ├─ pages // 页面
|
||||
│ ├─ plugin // 插件
|
||||
│ ├─ router // 路由
|
||||
│ ├─ store // vuex
|
||||
│ ├─ utils
|
||||
│ ├─ App.vue
|
||||
│ └─ main.js
|
||||
├─ static // 静态资源
|
||||
├─ .babelrc
|
||||
├─ .editorconfig
|
||||
├─ .eslintignore
|
||||
├─ .eslintrc.js
|
||||
├─ .gitattributes
|
||||
├─ .gitignore
|
||||
├─ .postcssrc.js
|
||||
├─ LICENSE
|
||||
├─ README.md
|
||||
├─ deploy.sh
|
||||
├─ design.sketch // 设计文件
|
||||
├─ index.html
|
||||
└─ package.json
|
||||
```
|
||||
|
|
@ -0,0 +1,218 @@
|
|||
# 版本发布 1.1.4
|
||||
|
||||
|
||||
|
||||
D2Admin 是一个 **注重外观表现** 的管理系统 **PC端** 集成方案，现在正在紧张开发维护。
|
||||
|
||||
## 前言
|
||||
|
||||
距离 D2Admin 正式和大家见面(开源)，已经过去一个多月了。
|
||||
|
||||
|
||||
|
||||
现在想想这一个月真是很忙碌，几乎所有的业余时间都用在了开源项目上，公司没事的时候在写，晚上回家每天都要写到一点左右，回家火车上都在忙着改代码...
|
||||
|
||||
|
||||
|
||||
上图：好友不幸骨折，守着他编码...（希望他早点康复）
|
||||
|
||||
有天我和朋友说，感觉真是开源个项目，把自己整个人都开源了，一个人又要设计又要写代码又要写文档还要回答问题，除了上班吃睡就都是它了！
|
||||
|
||||
但是就我个人而言，我感觉倒也是一种不错的体验。
|
||||
|
||||
通过这个开源产品，认识了很多朋友，有了自己的小交流群，平日没事了大家一起讨论讨论问题也挺不错。当然也新认识了一些大佬（膜拜），通过交流也有不小的收获。
|
||||
|
||||
## 介绍
|
||||
|
||||
废话不多说了，一介码农也没有什么文采，今天也是趁着发版的机会小发表一些想法，下面就介绍一下这一个月来究竟升级了什么吧，先放几张截图吧：
|
||||
|
||||
### 预览
|
||||
|
||||
经典主题:
|
||||
|
||||
|
||||
|
||||
集成组件和插件:
|
||||
|
||||
|
||||
|
||||
图标选择器:
|
||||
|
||||
|
||||
|
||||
版本检查:
|
||||
|
||||
|
||||
|
||||
灰度模式:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
数据持久化:
|
||||
|
||||
|
||||
|
||||
图表:
|
||||
|
||||
|
||||
|
||||
主题:
|
||||
|
||||
|
||||
|
||||
响应大家需求，这次最大的升级：多标签页:
|
||||
|
||||
|
||||
|
||||
上面是我随便截了几张图片 如果你感兴趣的话可以去体验地址一趟 -> [体验地址](https://fairyever.gitee.io/d2-admin-preview/#/index) <-。
|
||||
|
||||
项目现在集成了不少的库和插件，第一次加载确实有些慢，以后有空了优化一下。
|
||||
|
||||
另外大家实际使用的时候建议使用 [简化版模板](https://github.com/d2-projects/d2-admin-start-kit)。
|
||||
|
||||
### 完整功能列表
|
||||
|
||||
* 首屏加载等待动画 避免首次加载白屏尴尬
|
||||
* 简约主题
|
||||
* 每个插件和组件都配有介绍文档
|
||||
* 图片资源 sketch 源文件（ 可以在这个文件内重新生成所有图片资源 ）
|
||||
* 登陆和注销
|
||||
* 根据路由自动生成菜单
|
||||
* 可折叠侧边栏
|
||||
* 方便的菜单设置
|
||||
* 多国语言支持
|
||||
* 富文本编辑器
|
||||
* Markdown 编辑器
|
||||
* 全屏功能
|
||||
* Fontawesome 图标库
|
||||
* 图标选择器（组件）
|
||||
* 自动引入下载的 SVG 图标
|
||||
* 前端假数据支持（ mock ）
|
||||
* 集成蚂蚁金服出品的 G2 图表
|
||||
* 图表自适应可拖拽大小的卡片容器（示例）
|
||||
* 简化剪贴板操作
|
||||
* 简化Cookie操作
|
||||
* 时间日期计算工具
|
||||
* 导入 Excel （ xlsx 格式 + csv 格式 ）
|
||||
* 数据导出 Excel （ xlsx 格式 + csv 格式 ）
|
||||
* 数据导出文本
|
||||
* 数字动画
|
||||
* 可拖拽调整大小的切分布局
|
||||
* 可拖拽调整大小和位置的网格布局
|
||||
* 提供三种方便的页面容器组件（正常卡片，隐形容器，填满页面）
|
||||
* 代码高亮显示
|
||||
* 加载并解析（或者直接指定资源） markdown 文件
|
||||
* GitHub 样式的 markdown 显示组件
|
||||
* markdown 内代码高亮
|
||||
* 为 markdown 扩展了百度云链接解析和优化显示
|
||||
* 右键菜单组件
|
||||
* 自定义滚动条和滚动控制
|
||||
* 内置5种主题
|
||||
* 公用样式抽离，方便的主题定制
|
||||
* 支持百万级数据量的表格组件
|
||||
* 打包后随意目录部署（已经做好兼容设置）
|
||||
* 支持临时菜单配置
|
||||
* 提供“试验台”功能 方便展示系统功能调用方法 `1.1.4 +`
|
||||
* 多标签页模式 `1.1.4 +`
|
||||
* 美化滚动条 `1.1.4 +`
|
||||
* 持久化存储 `1.1.4 +`
|
||||
|
||||
### 更新列表
|
||||
|
||||
这个列表在这里也可以查看 -> [中文文档 | 更新日志](https://fairyever.gitee.io/d2-admin-doc/zh/guide/change-log.html#v1-1-0)
|
||||
|
||||
#### 1.1.4
|
||||
|
||||
* [ 修改 ] 全局状态管理设计优化
|
||||
* [ 修改 ] 主题调优
|
||||
* [ 新增 ] playground 模块，方便测试和展示一些功能实现方式/调用方法
|
||||
* [ 新增 ] 灰度模式
|
||||
* [ 新增 ] 多页模式
|
||||
* [ 新增 ] 多页模式缓存
|
||||
* [ 新增 ] 多页模式快速关闭（关闭左侧 右侧 全部 其它）
|
||||
* [ 修改 ] 侧边栏滚动优化
|
||||
* [ 新增 ] `d2-container` 填充模式自定义滚动条
|
||||
* [ 新增 ] `d2-container` 组件卡片和隐形模式自定义滚动条
|
||||
* [ 新增 ] 现在页面标题可以根据路由做出对应变化了
|
||||
* [ 新增 ] 版本检查机制
|
||||
* [ 新增 ] `d2-container` 隐形模式支持 header 插槽
|
||||
* [ 新增 ] 版本检查可以设置为不显示提示框
|
||||
* [ 新增 ] 集成 json 查看组件
|
||||
* [ 新增 ] 添加了所有图表种类的演示页面
|
||||
* [ 修改 ] 修改布局方式，解决了在 Firefox 上 better-scroll 初始化拿不到正确高度的 bug
|
||||
* [ 新增 ] 右上角显示用户名，用户名持久存储
|
||||
|
||||
#### 1.1.3
|
||||
|
||||
* [ 修复 ] 侧边栏在折叠时不显示的 bug
|
||||
* [ 新增 ] v-charts 插件
|
||||
* [ 新增 ] 一些演示图表（后续打算把 v-charts 文档上有示例性的演示都展示一下）
|
||||
* [ 修改 ] D2Admin 经典主题颜色调整
|
||||
* [ 新增 ] violet 主题
|
||||
* [ 新增 ] 菜单图标
|
||||
* [ 修改 ] 新制作了 Fork me 图片
|
||||
|
||||
#### 1.1.2
|
||||
|
||||
* [ 修改 ] 删除了 G2 相关的依赖
|
||||
|
||||
#### 1.1.1
|
||||
|
||||
* [ 修改 ] 删除了 G2 相关的代码（移除图表库）
|
||||
* [ 优化 ] 侧边栏取值逻辑
|
||||
|
||||
#### 1.1.0
|
||||
|
||||
* [ 修改 ] 顶栏和侧边栏菜单新的结构生成方式，新的方案使用 数据 + 递归组件 实现无限制多级菜单
|
||||
* [ 修改 ] 路由注册回归最简单的写法
|
||||
* [ 修复 ] 首次加载 loading 样式类名和程序内类名冲突，新的加载类名使用 d2-app-loading 前缀
|
||||
* [ 修改 ] 所有类似 dd- 的样式前缀(包括自动注册图标的id前缀)统一改为 d2-
|
||||
* [ 修复 ] 修复 d2-highlight 组件和 d2-markdown 组件的样式冲突
|
||||
* [ 修改 ] 内置组件名称统一改为 d2- 前缀，统一使用横线连接 (kebab-case) 风格
|
||||
* [ 修改 ] 顶栏 logo 阴影删除
|
||||
* [ 新增 ] 主题系统
|
||||
* [ 新增 ] 三个主题，分别为 d2admin 经典，简约线条，流星
|
||||
* [ 修改 ] d2-markdown 组件 md 参数改名为 source
|
||||
* [ 修改 ] 删除了 d2-markdown 组件中图片的白色背景
|
||||
* [ 修改 ] 删除 timeago 插件，更换为更强大的 dayjs
|
||||
* [ 新增 ] Tomorrow Night Blue 主题
|
||||
* [ 修改 ] src/assets/style/public-class.scss 写法优化
|
||||
* [ 新增 ] [vue-bigdata-table](https://github.com/lison16/vue-bigdata-table)组件
|
||||
* [ 修复 ] 侧边栏内容超过一屏后显示错误
|
||||
* [ 新增 ] 自定义滚动条演示页面
|
||||
* [ 新增 ] 流星主题新增背景图片上层的半透明遮罩
|
||||
* [ 修复 ] 主题设置失效bug
|
||||
* [ 修复 ] router守卫验证登陆部分代码修改
|
||||
* [ 修复 ] d2-container 组件改为同步注册（之前的异步注册会有 mounted 生命周期问题，即 slot 内的页面在 mounted 生命周期内拿不到 dom）
|
||||
* [ 修复 ] d2-container 组件重构 flex 布局
|
||||
* [ 新增 ] 404 page
|
||||
* [ 新增 ] 顶栏联系方式
|
||||
* [ 新增 ] 右键菜单组件
|
||||
* [ 新增 ] 菜单配置支持空菜单（项目开发的时候有可能需要先把菜单做好查看效果）
|
||||
* [ 优化 ] 页面左侧菜单滚动条优化
|
||||
* [ 修复 ] CSS 边距工具类都加上了 `!important` 来保证在覆盖样式时生效
|
||||
* [ 修复 ] IE11 兼容性修复
|
||||
|
||||
写这篇文章的时候心情竟然出奇地平静，终于发新版了，总算松了一口气...
|
||||
|
||||
### 下阶段的计划：
|
||||
|
||||
* ice 版本
|
||||
* bug 修复
|
||||
|
||||
## 项目地址
|
||||
|
||||
| 地址 | 描述 |
|
||||
| --- | --- |
|
||||
| [团队主页](https://github.com/d2-projects) | D2Admin 所属的团队主页 |
|
||||
| [中文文档](http://d2admin.fairyever.com/zh/) | 中文文档 |
|
||||
| [预览地址](https://fairyever.gitee.io/d2-admin-preview/#/index) | 预览地址 |
|
||||
| [github](https://github.com/d2-projects/d2-admin) | Github 仓库 |
|
||||
| [码云](https://gitee.com/fairyever/d2-admin) | 码云镜像仓库 |
|
||||
| [简化版 github](https://github.com/d2-projects/d2-admin-start-kit) | 简化版 Github 仓库 |
|
||||
| [简化版 码云](https://gitee.com/fairyever/d2-admin-start-kit) | 简化版码云镜像仓库 |
|
||||
|
||||
在最后，如果你看完了，并且觉得不错，希望可以到 [项目主页](https://github.com/d2-projects/d2-admin) 上点一个 **star** 作为你对这个项目的认可与支持，谢谢。
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# 组件概述
|
||||
|
||||
d2-admin（以下简称 d2admin）封装（或者集成第三方）了一些组件，方便开发者进行开发，具体组件文档请从左侧列表进入
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
# 图表 [ v-charts ]
|
||||
|
||||
::: 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，你可以直接使用
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
# 图表 [ G2 ]
|
||||
|
||||
::: tip
|
||||
此文档仅对 `1.1.0` 及其以下版本有效，`1.1.1` 开始变更了图表库
|
||||
:::
|
||||
|
||||
## 介绍
|
||||
|
||||
D2Admin 集成了由蚂蚁金服出品的 **G2** 图表库
|
||||
|
||||
## 实现方式
|
||||
|
||||
`src/components/charts/register.js` 为注册图表组件的文件
|
||||
|
||||
`src/components/charts/G2` 为图表组件存放位置
|
||||
|
||||
`src/components/charts/G2/mixins/G2.js` 是图表最主要的文件，这是一个所有的图表组件都会使用的 mixin，这个 mixin 主要有以下用途
|
||||
|
||||
- 将 G2 和 DataSet 绑定到 data 上，方便组件使用，省去重复 `import G2 from '@antv/g2'` 等
|
||||
- 将 [G2 Chart类](http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_Chart) 的属性全部暴露为 Vue 组件参数，这些参数会在初始化图表时用到
|
||||
- 提供了额外的设置参数，比如自动高度，自动初始化，初始化延时
|
||||
- 关闭 G2 的体验改进计划打点请求
|
||||
- data 上的 chart 对象
|
||||
- 自动初始化(或者不初始化)图表
|
||||
- `creatChart` 方法，根据参数设置生成 data 上的 chart 对象
|
||||
- `resize` 方法
|
||||
|
||||
在图表组件中使用这个 mixin 示例
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<!-- 如果需要开启自动高度功能 需要在这里设置 style="height: 100%;" -->
|
||||
<div ref="chart" style="height: 100%;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引入公用 mixin
|
||||
import G2 from '@/components/charts/G2/mixins/G2.js'
|
||||
export default {
|
||||
mixins: [
|
||||
G2
|
||||
],
|
||||
methods: {
|
||||
// 初始化图表
|
||||
init () {
|
||||
// mixin 中提供 creatChart 方法，这部分每个图表都一样
|
||||
this.creatChart()
|
||||
// 本组件的特殊设置 这部分每个图表不一样 你只需要改这部分内容
|
||||
this.chart.source(this.data)
|
||||
this.chart.coord().transpose()
|
||||
this.chart.interval().position('x*y')
|
||||
// 最后一步 渲染图表 这部分每个图表都一样
|
||||
this.chart.render()
|
||||
},
|
||||
// 数据源改变 重新渲染新的数据
|
||||
changeData () {
|
||||
this.chart.changeData(this.data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
上面的代码段展示了如何使用 mixin 快速制作一个图表组件，只需根据某个图表的个性化需要，在组件中重新定义 `init` 和 `changeData` 方法即可
|
||||
|
||||
你可以修改这个 mixin 去实现更多的功能，同时影响所有的图表组件
|
||||
|
||||
::: tip
|
||||
这只仅仅是作者个人对于图表封装的一个实现思路
|
||||
:::
|
||||
|
||||
## 为什么没有选择其他产品
|
||||
|
||||
G2 完全可以胜任一般的后台界面报表图表需求，而且官网文档清晰友好
|
||||
|
||||
如果你需要更酷炫的图表，也完全可以剔除集成的库，换用 百度的[echarts](http://echarts.baidu.com/) 或者超级强大的 [d3.js](https://d3js.org/)
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
# 页面容器
|
||||
|
||||
页面容器组件是每个页面的基础，为了在整个项目中统一效果，它应该是 `<template>` 组件的直接子组件
|
||||
|
||||
## 参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| type | 容器类型 | 非 | String | card ghost full | card |
|
||||
| scroll | 滚动优化 | 非 | Boolean | | false |
|
||||
| responsive | 响应式宽度 | 非 | Boolean | | false |
|
||||
|
||||
::: tip
|
||||
`responsive` 参数设置只在 `type` 等于 `card` 或 `ghost` 时生效
|
||||
:::
|
||||
|
||||
## 使用方法
|
||||
|
||||
一个基础单文件页面组件的示例
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">
|
||||
可选的 header 内容 ...
|
||||
</template>
|
||||
主体内容 ...
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'your-component-name'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// 需要的话引入
|
||||
@import '~@/assets/style/public.scss';
|
||||
</style>
|
||||
```
|
||||
|
||||
### 基础页面容器
|
||||
|
||||
高度根据内容适应
|
||||
|
||||
``` vue
|
||||
<d2-container>
|
||||
主体内容
|
||||
</d2-container>
|
||||
```
|
||||
|
||||
使用 `slot`
|
||||
|
||||
``` vue
|
||||
<d2-container>
|
||||
<template slot="header">我是插入到 header 中的内容</template>
|
||||
主体内容
|
||||
</d2-container>
|
||||
```
|
||||
|
||||
### 自适应填充页面容器
|
||||
|
||||
无论内容高度多少，都会自动撑满页面，并有可选的 `header` 和 `footer` 插槽
|
||||
|
||||
示例：
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">
|
||||
可选的 header 内容 ...
|
||||
</template>
|
||||
主体内容 ...
|
||||
<template slot="footer">
|
||||
可选的 footer 内容 ...
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
```
|
||||
|
||||
`v1.1.4` 新增
|
||||
|
||||
你可以通过设置 `scroll` 来启用自定义滚动条，看起来更美观一些
|
||||
|
||||
> 有些情况下使用滚动优化模式会有意外影响，例如页面内含有可拖拽的元素，这时候最好不要使用此模式
|
||||
|
||||
示例：
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<d2-container type="full" scroll>
|
||||
<template slot="header">
|
||||
可选的 header 内容 ...
|
||||
</template>
|
||||
主体内容 ...
|
||||
<template slot="footer">
|
||||
可选的 footer 内容 ...
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 隐形页面容器
|
||||
|
||||
不显示任何背景色和边框，通常这个模式只有在极少情况下会使用
|
||||
|
||||
``` vue
|
||||
<d2-container type="ghost">
|
||||
主体内容
|
||||
</d2-container>
|
||||
```
|
||||
|
||||
如果你不希望内容紧贴上边，可以在内容外层容器设置 `class="d2-mt"`
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
# 数字动画
|
||||
|
||||
## 参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| start | 起始值 | 非 | Number | | 0 |
|
||||
| end | 结束值 | 是 | Number | | 0 |
|
||||
| decimals | 小数位数 | 非 | Number | | 0 |
|
||||
| duration | 持续时间 | 非 | Number | | 2 |
|
||||
| options | 设置项 | 非 | Object | | 空对象 |
|
||||
| callback | 回调函数 | 非 | Function | | 空函数 |
|
||||
|
||||
## 示例
|
||||
|
||||
``` vue
|
||||
// 基本使用方法
|
||||
<d2-count-up :end="100"/>
|
||||
|
||||
// 设置始末值
|
||||
<d2-count-up :start="14" :end="100"/>
|
||||
|
||||
// 设置动画时间
|
||||
<d2-count-up :end="100" :decimals="2"/>
|
||||
```
|
||||
|
||||
组件会在页面上渲染 `<span>` 标签
|
||||
|
||||
组件根据 [countUp.js](https://github.com/inorganik/countUp.js) 封装，`options` 参数详见原始插件文档
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
# 代码高亮
|
||||
|
||||
## 参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| code | 代码字符串 | 非 | String | | console.log('you lost code prop') |
|
||||
|
||||
## 示例
|
||||
|
||||
``` vue
|
||||
<d2-highlight code="alert('Hello')"/>
|
||||
```
|
||||
|
||||
::: tip
|
||||
本框架只是提供代码高亮的简单实现，如需实现更高级的设置请修改组件代码
|
||||
:::
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
# 图标 - 选择器
|
||||
|
||||
## 参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| value | 绑定的值，可以使用 v-model | 非 | String | | |
|
||||
| placeholder | 占位符，显示在未选择之前的按钮和输入框中 | 非 | String | | 请选择 |
|
||||
| placement | 界面探出方向 | 非 | String | 同 Popover 组件 placement 参数 | right |
|
||||
| clearable | 是否允许清空 | 非 | Boolean | | true |
|
||||
| userInput | 是否允许用户自由输入 | 非 | Boolean | | false |
|
||||
| autoClose | 是否在选择后自动关闭 | 非 | Boolean | | true |
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
# 图标 - SVG
|
||||
|
||||
## 参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| name | 图标名称 | 非 | String | src/assets/icons/svg 中 .svg 文件名 | 空 |
|
||||
|
||||
## 使用方法
|
||||
|
||||
首先将下载的 .svg 图标放入 `src/assets/icons/svg` 文件夹下
|
||||
|
||||
然后使用组件
|
||||
|
||||
``` vue
|
||||
<d2-icon-svg name="刚才的svg文件名"/>
|
||||
```
|
||||
|
||||
## 获取已经注册的所有图标
|
||||
|
||||
你已经发现了，只需要将图标文件放入项目中就会自动注册
|
||||
|
||||
这是因为已经对 `webpack` 和 `svg-sprite-loader` 进行了相关设置，`src/assets/icons/svg` 文件夹中的图标会自动注册到项目中，文件全部打包成 svg-sprite，名称注册到 `Vue.$IconSvg` 属性中
|
||||
|
||||
所以如果你需要检查项目中已经注册的所有图标，可以通过如下方式
|
||||
|
||||
``` vue
|
||||
// 在 vue 单文件组件中
|
||||
console.log(this.$IconSvg)
|
||||
```
|
||||
|
||||
## 参考
|
||||
|
||||
演示图标来源 [iconfont.cn @龙正昆《常用的50个4px双色图标库》](http://iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=4878)
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
# 图标
|
||||
|
||||
## 参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| name | 图标名称 | 非 | String | font-awesome 所有图标名 | font-awesome |
|
||||
|
||||
## 使用方法
|
||||
|
||||
基本
|
||||
|
||||
``` vue
|
||||
// 这样用没有毛病 但是也没什么用
|
||||
<d2-icon/>
|
||||
|
||||
// 指定图标名称
|
||||
<d2-icon name="github"/>
|
||||
|
||||
// 设置行内样式
|
||||
<d2-icon name="github" style="font-size: 100px;"/>
|
||||
|
||||
// 设置 class
|
||||
<d2-icon name="github" class="icon-class-demo"/>
|
||||
```
|
||||
|
||||
这个组件只是简化了写法而已
|
||||
|
||||
``` vue
|
||||
<d2-icon name="github"/>
|
||||
// 等同于
|
||||
<i class="fa fa-github" aria-hidden="true"></i>
|
||||
```
|
||||
|
||||
## 参考
|
||||
|
||||
图标索引
|
||||
|
||||
[Font Awesome 中文网](http://www.fontawesome.com.cn/faicons/)
|
||||
|
||||
[fontawesome.com](https://fontawesome.com/icons?d=gallery)
|
||||
|
|
@ -0,0 +1 @@
|
|||
3a5bb0f2628d9251bbe7474c0535258784cf770b
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
# markdown 渲染器
|
||||
|
||||
## 参数
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| url | markdown文件地址 | 非 | String | | 无 |
|
||||
| source | markdown内容 | 非 | String | | 无 |
|
||||
| highlight | 代码高亮 | 非 | Boolean | | false |
|
||||
| baidupan | 百度网盘分享链接显示优化 | 非 | Boolean | | true |
|
||||
|
||||
## 使用方法
|
||||
|
||||
加载一个.md文件
|
||||
|
||||
``` vue
|
||||
<d2-markdown url="/static/md/xxxx.md"/>
|
||||
```
|
||||
|
||||
加载资源
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<d2-markdown :source="doc"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const doc = `
|
||||
# Header
|
||||
|
||||
## title
|
||||
|
||||
text`.trim()
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
D2Admin 已经帮你配置好 webpack，你可以使用以下方式加载 markdown 文件
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<d2-markdown :source="doc"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import doc from './md/doc.md'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 百度网盘分享链接优化
|
||||
|
||||
当书写类似下面的分享链接时
|
||||
|
||||
::: tip
|
||||
需要 `baidupan = true`
|
||||
:::
|
||||
|
||||
```
|
||||
普通分享链接
|
||||
|
||||
> https://pan.baidu.com/s/1kW6uUwB
|
||||
|
||||
私密分享链接
|
||||
|
||||
> 链接: https://pan.baidu.com/s/1ggFW21l 密码: 877y
|
||||
```
|
||||
|
||||
markdown 中引用部分的文本由于被识别为百度云的分享链接，所以不会被当做 `blockquote` 渲染（非百度云链接的引用行不会改变），会以一种特别的块来显示，效果见下
|
||||
|
||||
|
||||
|
||||
::: tip
|
||||
了解 D2Admin 是如何在 markdown 中匹配百度云链接的？ [查看源码](https://github.com/d2-projects/d2-admin/blob/master/src/components/core/d2-markdown/index.vue)
|
||||
:::
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
# 介绍
|
||||
|
||||
D2Admin 是一个开源的管理系统前端集成方案
|
||||
|
||||
<div>
|
||||
<iframe src="//ghbtns.com/github-btn.html?user=d2-projects&repo=d2-admin&type=star&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
|
||||
<iframe src="//ghbtns.com/github-btn.html?user=d2-projects&repo=d2-admin&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
|
||||
</div>
|
||||
|
||||
本项目仓库在 Github 和 Gitee 同步发布
|
||||
|
||||
[中文文档](http://d2admin.fairyever.com/zh/)
|
||||
|
||||
**完整版**
|
||||
|
||||
[Github 仓库](https://github.com/d2-projects/d2-admin) |
|
||||
[码云仓库](https://gitee.com/fairyever/d2-admin) |
|
||||
[预览地址](https://fairyever.gitee.io/d2-admin-preview)
|
||||
|
||||
**简化版模板**
|
||||
|
||||
[Github 仓库](https://github.com/d2-projects/d2-admin-start-kit) |
|
||||
[码云仓库](https://gitee.com/fairyever/d2-admin-start-kit) |
|
||||
[预览地址](https://fairyever.gitee.io/d2-admin-start-kit-preview/#/index)
|
||||
|
||||
|
||||
|
||||
D2Admin 完整版集成了很多的插件和组件，首次加载会占用很多的时间，所以加入了首屏加载动画。
|
||||
|
||||
如果您欣赏 D2Admin 的设计风格，希望基于它开发您的管理系统，**建议使用 [d2-admin-start-kit 简化模板](https://github.com/d2-projects/d2-admin-start-kit)**，简化版模板保留了所有的系统功能，包括登陆注销，主题切换，图标，数据持久化等。其它不必要的组件和插件您可以参照 D2Admin 完整版自行加入。
|
||||
|
||||
如果您执意在完整版基础上开发，请您在发布之前一定要删除没有用到的代码，比如项目没有用到图表、示例、插件组件。
|
||||
|
||||
D2Admin 是完全开源免费的管理系统集成方案，由 [FairyEver](https://github.com/FairyEver) 工作之余完完成（希望您看到这里，可以移步 [Github](https://github.com/d2-projects/d2-admin) 点个 star 支持我），如果你也一样喜欢前端开发，欢迎加入我们的讨论/学习群，群内可以`提问答疑`，`分享学习资料`。
|
||||
|
||||
|
||||
|
||||
::: tip Thanks
|
||||
D2Admin 创建于2018年1月14日零点51分，四个月后在2018年5月26日正式发布，39天时间 star 突破 1k ，在此对所有的 D2Admin 支持者表示感谢，项目将会保持更新，如果你有想法、建议、或者问题欢迎加群讨论
|
||||
|
||||
—— 2018年7月5日
|
||||
:::
|
||||
|
||||
> 1000 star 后 D2Admin 现已由一人维护改为归属于 [D2 Projects Organizations](https://github.com/d2-projects) 由多人维护
|
||||
|
||||
## 功能
|
||||
|
||||
* 首屏加载等待动画 避免首次加载白屏尴尬
|
||||
* 简约主题
|
||||
* 每个插件和组件都配有介绍文档
|
||||
* 图片资源 sketch 源文件（ 可以在这个文件内重新生成所有图片资源 ）
|
||||
* 登陆和注销
|
||||
* 根据路由自动生成菜单
|
||||
* 可折叠侧边栏
|
||||
* 方便的菜单设置
|
||||
* 多国语言支持
|
||||
* 富文本编辑器
|
||||
* Markdown 编辑器
|
||||
* 全屏功能
|
||||
* Fontawesome 图标库
|
||||
* 图标选择器（组件）
|
||||
* 自动引入下载的 SVG 图标
|
||||
* 前端假数据支持（ mock ）
|
||||
* 集成蚂蚁金服出品的 G2 图表
|
||||
* 图表自适应可拖拽大小的卡片容器（示例）
|
||||
* 简化剪贴板操作
|
||||
* 简化Cookie操作
|
||||
* 时间日期计算工具
|
||||
* 导入 Excel （ xlsx 格式 + csv 格式 ）
|
||||
* 数据导出 Excel （ xlsx 格式 + csv 格式 ）
|
||||
* 数据导出文本
|
||||
* 数字动画
|
||||
* 可拖拽调整大小的切分布局
|
||||
* 可拖拽调整大小和位置的网格布局
|
||||
* 提供三种方便的页面容器组件（正常卡片，隐形容器，填满页面）
|
||||
* 代码高亮显示
|
||||
* 加载并解析（或者直接指定资源） markdown 文件
|
||||
* GitHub 样式的 markdown 显示组件
|
||||
* markdown 内代码高亮
|
||||
* 为 markdown 扩展了百度云链接解析和优化显示
|
||||
* 右键菜单组件
|
||||
* 自定义滚动条和滚动控制
|
||||
* 内置5种主题
|
||||
* 公用样式抽离，方便的主题定制
|
||||
* 支持百万级数据量的表格组件
|
||||
* 打包后随意目录部署（已经做好兼容设置）
|
||||
* 支持临时菜单配置
|
||||
* 提供“试验台”功能 方便展示系统功能调用方法 `1.1.4 +`
|
||||
* 多标签页模式 `1.1.4 +`
|
||||
* 美化滚动条 `1.1.4 +`
|
||||
* json view `1.1.4 +`
|
||||
|
||||
## TODO
|
||||
|
||||
D2Admin 仍然处于开发中，这里有一些暂时的计划：
|
||||
|
||||
* 分离出简化版本
|
||||
* 推出基于 [ice](https://alibaba.github.io/ice) 平台的版本
|
||||
* 增加右上角通知中心
|
||||
* 增加一些实例页面以提供业务页面布局建议
|
||||
* 面包屑导航
|
||||
* 树型表格组件
|
||||
* 更多类型的编辑器
|
||||
* socket 连接
|
||||
* 浏览器版本提示
|
||||
* 日志控制台
|
||||
* d2-container 组件 ghost 模式和 full 模式合并
|
||||
* `1.1.4 已完成` 自定义滚动条
|
||||
* `1.1.4 已完成` 多 tab 页结构
|
||||
* `1.1.3 已完成` 更换图表库
|
||||
* `1.1.0 已完成` 抽离项目里的文档，集中存放在文档站点
|
||||
* `1.1.0 已完成` 对主界面进行一次完善，调整整体布局和颜色
|
||||
* `1.1.0 已完成` 切换主题功能
|
||||
|
||||
欢迎你为 D2Admin 的开发作出贡献（代码编写/文档翻译）。
|
||||
|
||||
## 目录结构
|
||||
|
||||
```
|
||||
├─ build
|
||||
├─ config
|
||||
├─ deploy
|
||||
├─ dist
|
||||
├─ docs // 文档
|
||||
├─ src
|
||||
│ ├─ assets // 资源
|
||||
│ │ ├─ icons
|
||||
│ │ ├─ image
|
||||
│ │ ├─ library
|
||||
│ │ └─ style
|
||||
│ ├─ components // 组件
|
||||
│ │ ├─ charts // 图表组件
|
||||
│ │ ├─ core // 核心组件
|
||||
│ │ └─ demo // 示例组件
|
||||
│ ├─ i18n // 多国语
|
||||
│ ├─ libs // 通用库
|
||||
│ ├─ menu // 菜单
|
||||
│ ├─ mock // 模拟数据
|
||||
│ ├─ pages // 页面
|
||||
│ ├─ plugin // 插件
|
||||
│ ├─ router // 路由
|
||||
│ ├─ store // vuex
|
||||
│ ├─ App.vue
|
||||
│ └─ main.js
|
||||
├─ static // 静态资源
|
||||
├─ .babelrc
|
||||
├─ .editorconfig
|
||||
├─ .eslintignore
|
||||
├─ .eslintrc.js
|
||||
├─ .gitattributes
|
||||
├─ .gitignore
|
||||
├─ .postcssrc.js
|
||||
├─ LICENSE
|
||||
├─ README.md
|
||||
├─ index.html
|
||||
└─ package.json
|
||||
```
|
||||
|
||||
## 获取代码
|
||||
|
||||
有两种方式可以获得 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)，码云上的仓库**在每次发布版本或者修复 bug 才会更新**，所以如果你选择此方法，请直接 fork 仓库并克隆到本地
|
||||
|
||||
> 码云的仓库由 github 同步，但是发行版和标签同步有一些问题，所以推荐直接 fork 仓库
|
||||
|
||||
## 使用
|
||||
|
||||
```
|
||||
// 安装依赖
|
||||
npm i
|
||||
|
||||
// 运行
|
||||
npm run dev
|
||||
|
||||
// 打包
|
||||
npm run build
|
||||
```
|
||||
|
||||
> 如果上述步骤出现错误，建议您升级 node 版本 > 8，如果有其它疑问请参考[常见问题](/zh/guide/question.html)
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
# 更新日志
|
||||
|
||||
## v1.1.5 dev
|
||||
|
||||
* [ 修改 ] 全局状态管理设计优化
|
||||
* [ 修改 ] 多标签页操作全部转移至 vuex
|
||||
* [ 修改 ] 修复了多标签页无法清除缓存的 bug
|
||||
* [ 修改 ] bug fixed [#38](https://github.com/d2-projects/d2-admin/issues/38)
|
||||
* [ 修改 ] bug fixed [#41](https://github.com/d2-projects/d2-admin/issues/41)
|
||||
|
||||
## v1.1.4
|
||||
|
||||
* [ 修改 ] 全局状态管理设计优化
|
||||
* [ 修改 ] 主题调优
|
||||
* [ 新增 ] playground 模块，方便测试和展示一些功能实现方式/调用方法
|
||||
* [ 新增 ] 灰度模式
|
||||
* [ 新增 ] 多页模式
|
||||
* [ 新增 ] 多页模式缓存
|
||||
* [ 新增 ] 多页模式快速关闭（关闭左侧 右侧 全部 其它）
|
||||
* [ 修改 ] 侧边栏滚动优化
|
||||
* [ 新增 ] `d2-container` 填充模式自定义滚动条
|
||||
* [ 新增 ] `d2-container` 组件卡片和隐形模式自定义滚动条
|
||||
* [ 新增 ] 现在页面标题可以根据路由做出对应变化了
|
||||
* [ 新增 ] 版本检查机制
|
||||
* [ 新增 ] `d2-container` 隐形模式支持 header 插槽
|
||||
* [ 新增 ] 版本检查可以设置为不显示提示框
|
||||
* [ 新增 ] 集成 json 查看组件
|
||||
* [ 新增 ] 添加了所有图表种类的演示页面
|
||||
* [ 修改 ] 修改布局方式，解决了在 Firefox 上 better-scroll 初始化拿不到正确高度的 bug
|
||||
* [ 新增 ] 右上角显示用户名，用户名持久存储
|
||||
|
||||
## v1.1.3
|
||||
|
||||
* [ 修复 ] 侧边栏在折叠时不显示的 bug
|
||||
* [ 新增 ] v-charts 插件
|
||||
* [ 新增 ] 一些演示图表（后续打算把 v-charts 文档上有示例性的演示都展示一下）
|
||||
* [ 修改 ] D2Admin 经典主题颜色调整
|
||||
* [ 新增 ] violet 主题
|
||||
* [ 新增 ] 菜单图标
|
||||
* [ 修改 ] 新制作了 Fork me 图片
|
||||
|
||||
## v1.1.2
|
||||
|
||||
* [ 修改 ] 删除了 G2 相关的依赖
|
||||
|
||||
## v1.1.1
|
||||
|
||||
* [ 修改 ] 删除了 G2 相关的代码（移除图表库）
|
||||
* [ 优化 ] 侧边栏取值逻辑
|
||||
|
||||
## v1.1.0
|
||||
|
||||
* [ 修改 ] 顶栏和侧边栏菜单新的结构生成方式，新的方案使用 数据 + 递归组件 实现无限制多级菜单
|
||||
* [ 修改 ] 路由注册回归最简单的写法
|
||||
* [ 修复 ] 首次加载 loading 样式类名和程序内类名冲突，新的加载类名使用 d2-app-loading 前缀
|
||||
* [ 修改 ] 所有类似 dd- 的样式前缀(包括自动注册图标的id前缀)统一改为 d2-
|
||||
* [ 修复 ] 修复 d2-highlight 组件和 d2-markdown 组件的样式冲突
|
||||
* [ 修改 ] 内置组件名称统一改为 d2- 前缀，统一使用横线连接 (kebab-case) 风格
|
||||
* [ 修改 ] 顶栏 logo 阴影删除
|
||||
* [ 新增 ] 主题系统
|
||||
* [ 新增 ] 三个主题，分别为 d2admin 经典，简约线条，流星
|
||||
* [ 修改 ] d2-markdown 组件 md 参数改名为 source
|
||||
* [ 修改 ] 删除了 d2-markdown 组件中图片的白色背景
|
||||
* [ 修改 ] 删除 timeago 插件，更换为更强大的 dayjs
|
||||
* [ 新增 ] Tomorrow Night Blue 主题
|
||||
* [ 修改 ] src/assets/style/public-class.scss 写法优化
|
||||
* [ 新增 ] [vue-bigdata-table](https://github.com/lison16/vue-bigdata-table)组件
|
||||
* [ 修复 ] 侧边栏内容超过一屏后显示错误
|
||||
* [ 新增 ] 自定义滚动条演示页面
|
||||
* [ 新增 ] 流星主题新增背景图片上层的半透明遮罩
|
||||
* [ 修复 ] 主题设置失效bug
|
||||
* [ 修复 ] router守卫验证登陆部分代码修改
|
||||
* [ 修复 ] d2-container 组件改为同步注册（之前的异步注册会有 mounted 生命周期问题，即 slot 内的页面在 mounted 生命周期内拿不到 dom）
|
||||
* [ 修复 ] d2-container 组件重构 flex 布局
|
||||
* [ 新增 ] 404 page
|
||||
* [ 新增 ] 顶栏联系方式
|
||||
* [ 新增 ] 右键菜单组件
|
||||
* [ 新增 ] 菜单配置支持空菜单（项目开发的时候有可能需要先把菜单做好查看效果）
|
||||
* [ 优化 ] 页面左侧菜单滚动条优化
|
||||
* [ 修复 ] CSS 边距工具类都加上了 `!important` 来保证在覆盖样式时生效
|
||||
* [ 修复 ] IE11 兼容性修复
|
||||
|
||||
## v1.0.0
|
||||
|
||||
[https://github.com/d2-projects/d2-admin/releases/tag/v1.0.0](https://github.com/d2-projects/d2-admin/releases/tag/v1.0.0)
|
||||
|
||||
这是第一个版本，还有一点小问题，但是已经可用
|
||||
|
|
@ -0,0 +1 @@
|
|||
f7a47389e6c0773e9d218227678ebb8850ea87e8
|
||||
|
|
@ -0,0 +1 @@
|
|||
27e431bd9e4752dd51fe827a1281d606bd7bdf07
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
# 贡献指南
|
||||
|
||||
## 如何贡献代码
|
||||
|
||||
首先在[项目主页](https://github.com/d2-projects/d2-admin) fork 本仓库，然后进行你的开发，请确保你的开发是在 **dev** 分支进行。本地测试无误后方可 pull request，我在检查通过后会合并代码到原始仓库。
|
||||
|
||||
## 要求
|
||||
|
||||
本项目代码需要符合[vue.js 风格指南](https://cn.vuejs.org/v2/style-guide/)中[优先级A](https://cn.vuejs.org/v2/style-guide/#%E4%BC%98%E5%85%88%E7%BA%A7-A-%E7%9A%84%E8%A7%84%E5%88%99%EF%BC%9A%E5%BF%85%E8%A6%81%E7%9A%84-%E8%A7%84%E9%81%BF%E9%94%99%E8%AF%AF)和[优先级B](https://cn.vuejs.org/v2/style-guide/#%E4%BC%98%E5%85%88%E7%BA%A7-B-%E7%9A%84%E8%A7%84%E5%88%99%EF%BC%9A%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90-%E5%A2%9E%E5%BC%BA%E5%8F%AF%E8%AF%BB%E6%80%A7)的要求以及本项目中的 ESlint 校验
|
||||
|
||||
::: tip
|
||||
由于项目初始没有仔细遵循风格指南，可能项目代码中已经存在不符合规范的代码，欢迎批评指正或者直接pr
|
||||
:::
|
||||
|
|
@ -0,0 +1,329 @@
|
|||
# 常见问题
|
||||
|
||||
本章总结收到的用户反馈问题，集中展示，方便后续用户自助解决问题
|
||||
|
||||
## 无法启动项目
|
||||
|
||||
如果在 `run dev` 或者 `npm i` 的过程中报错，首先建议您升级 node 版本 > 8，在以下环境测试可用
|
||||
|
||||
``` {10}
|
||||
➜ ~ npm -v
|
||||
5.6.0
|
||||
➜ ~ node -v
|
||||
v8.11.1
|
||||
➜ ~ nrm -V
|
||||
1.0.2
|
||||
➜ ~ nrm ls
|
||||
npm ---- https://registry.npmjs.org/
|
||||
cnpm --- http://r.cnpmjs.org/
|
||||
* taobao - https://registry.npm.taobao.org/
|
||||
nj ----- https://registry.nodejitsu.com/
|
||||
rednpm - http://registry.mirror.cqupt.edu.cn/
|
||||
npmMirror https://skimdb.npmjs.com/registry/
|
||||
edunpm - http://registry.enpmjs.org/
|
||||
```
|
||||
|
||||
::: tip
|
||||
推荐使用 [nrm](https://github.com/Pana/nrm) 管理 npm 源，不建议使用 cnpm
|
||||
:::
|
||||
|
||||
在正在开发的 1.2.x 版本（也有可能在你看到这的时候版本已经比 1.2.x 更晚）中，我们不再使用 npm 作为推荐的包安装工具，取而代之的是使用 [yarn](https://yarnpkg.com/zh-Hans/)，使用方法如下
|
||||
|
||||
```
|
||||
// 安装依赖
|
||||
yarn
|
||||
// 启动调试服务
|
||||
yarn run serve
|
||||
```
|
||||
|
||||
## node-sass 安装失败
|
||||
|
||||
由于某些不可描述的原因，利用 npm 进行安装模块的时候会发生包下载失败的情况，node-sass 尤其的频繁，或者说 node-sass 的二进制文件是接近百分百失败的，即使用 yarn 安装也依旧在这个点失败，给出以下建议
|
||||
|
||||
**方法1**
|
||||
|
||||
首先，需要提前下载 node-sass 的二进制文件，这个文件可以去 cnpm 仓库下载或者 node-sass 的 github 上去下载，在下载之前我们需要先查看电脑的系统的版本，来确定适合哪个版本的二进制文件，查看版本的指令如下：
|
||||
|
||||
``` sh
|
||||
node -p "[process.platform, process.arch, process.versions.modules].join('-')"
|
||||
```
|
||||
|
||||
输入这个指令后会弹出一个系统版本，然后在下面两个地址中选择一个去下载对应系统版本的后缀为 .node 的 node-sass 文件
|
||||
|
||||
[cnpm https://npm.taobao.org/mirrors/node-sass/](https://npm.taobao.org/mirrors/node-sass/)
|
||||
|
||||
[github https://github.com/sass/node-sass/releases](https://github.com/sass/node-sass/releases)
|
||||
|
||||
下载完保存到任意位置，最好放置到 package.json 所在位置。然后我们需要手动指定 node-sass 二进制文件的下载源为下载的那个文件，以下是npm与yanr的指令：
|
||||
|
||||
npm
|
||||
|
||||
``` sh
|
||||
npm config set sass-binary-path 你存放刚才下载的二进制文件的目录
|
||||
// 例如 npm config set sass-binary-path e:/web/win32-x64-48_binding.node
|
||||
```
|
||||
|
||||
yarn
|
||||
|
||||
``` sh
|
||||
yarn config set sass-binary-path 你存放刚才下载的二进制文件的目录
|
||||
// 例如 yarn config set sass-binary-path e:/web/win32-x64-48_binding.node
|
||||
```
|
||||
|
||||
然后我们即可用正常指令下载了
|
||||
|
||||
::: tip 注意
|
||||
此方法会绑定为本地文件，即无法更新 node-sass 了。如果不希望这样，请使用第二种方法
|
||||
:::
|
||||
|
||||
**方法2**
|
||||
|
||||
此方案将把下载源指定为cnpm仓库，更建议使用这种方法
|
||||
|
||||
全部的下载源指向cnpm的指令
|
||||
|
||||
npm
|
||||
|
||||
``` sh
|
||||
npm config set registry http://registry.npm.taobao.org
|
||||
```
|
||||
|
||||
yarn
|
||||
|
||||
``` sh
|
||||
yarn config set registry http://registry.npm.taobao.org
|
||||
```
|
||||
|
||||
只指定node-sass的下载源（建议使用）
|
||||
|
||||
npm
|
||||
|
||||
``` sh
|
||||
npm config set sass-binary-site http://npm.taobao.org/mirrors/node-sass
|
||||
```
|
||||
|
||||
yarn
|
||||
|
||||
``` sh
|
||||
yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass
|
||||
```
|
||||
|
||||
## 无法跳转路由
|
||||
|
||||
有可能你在 D2Admin 的基础上进行你的开发时，发现在登陆页面进行
|
||||
|
||||
``` js
|
||||
this.$router.push({ name: 'index' })
|
||||
```
|
||||
|
||||
跳转的时候页面并没有跳转，这是因为你很有可能没有进行下面的操作：
|
||||
|
||||
``` js
|
||||
Cookies.set('token', res.token, setting)
|
||||
```
|
||||
|
||||
原因根源是在 `src/router/index.js` 中有如下一段代码，根据 `token` 判断用户是否登陆
|
||||
|
||||
``` js {3-9}
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (to.matched.some(r => r.meta.requiresAuth)) {
|
||||
if (Cookies.get('token')) {
|
||||
next()
|
||||
} else {
|
||||
next({
|
||||
name: 'login'
|
||||
})
|
||||
}
|
||||
} else {
|
||||
next()
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
所以如果你没有存 token 字段在 cookie 中，路由鉴权机制将会重定向到登录页
|
||||
|
||||
如果你想修改基于 token 验证用户登陆状态的机制，请在 `./src` 下搜索 `token` 关键字并修改他们，但是我**十分不建议你修改它们**
|
||||
|
||||
最好的做法是在登陆后返回本次登陆的 token 并且存储在 cookie 中，然后在每次 ajax 请求时都携带这个 token 给后端做权限验证（必要的话你可以还可以增加 token 的更新机制）
|
||||
|
||||
::: tip 同样需要注意的地方
|
||||
除了需要在 cookie 中保存 token，你还要保存 uuid 字段，意为“用户唯一标识”
|
||||
|
||||
``` js
|
||||
Cookies.set('uuid', res.uuid, setting)
|
||||
```
|
||||
|
||||
D2Admin 会在很多地方使用 cookie 中的此字段区分用户，比如不同用户选择的不同主题的数据持久化，还有不同用户打开的多标签页数据的持久化存储。
|
||||
:::
|
||||
|
||||
## 文档运行报错
|
||||
|
||||
这里目前还有一个小遗憾，d2admin 使用的 webpack 版本不能符合 vuepress 的要求，所以如果你想在本地启动文档站点的服务，需要按下述步骤
|
||||
|
||||
首先将 vuepress 安装到全局
|
||||
|
||||
``` sh
|
||||
npm i -g vuepress
|
||||
```
|
||||
|
||||
启动服务
|
||||
|
||||
``` sh
|
||||
npm run doc:dev
|
||||
```
|
||||
|
||||
::: tip
|
||||
你可能会发现项目目录中有一个 deploy 文件夹，这个文件是为了方便发布和提交代码用的，通常你并不需要使用它
|
||||
:::
|
||||
|
||||
## 删除页面右上角 github 链接
|
||||
|
||||
在 `src/components/demo/d2-demo-page-cover/index.vue` 中删除相关代码即可
|
||||
|
||||
## 兼容性
|
||||
|
||||
首先 vue.js 和 ElementUI 做不到兼容的，D2Admin 肯定也兼容不了，实测在 macOS 下 Chrome 和新版本的火狐浏览器以及 Safari 都正常使用，这类管理系统一般是内部使用，通常不必太纠结兼容低版本浏览器，如果你发现了显示的 bug，可以加 QQ 群反应，如果你可以修复这个 bug 使其在你的浏览器上显示正常，欢迎你的 pr。
|
||||
|
||||
## 删除项目里的 G2 图表库
|
||||
|
||||
出于为用户考虑，作者个人实现的图表集成方案肯定不如其它专门做这方面的开源产品（这是肯定的，客观来讲作者的个人水平和 v-charts 的团队水平不在一个等级），所以G2 图表库在 `1.1.1` 版本删除，后续版本换成 `v-charts`。如果你在开始使用 D2Admin 是在 `1.1.0` 以及之前，你的项目里应该有 G2 图表库，如果你不想保留，下面的向导将会指导你删除它
|
||||
|
||||
::: tip
|
||||
下面的教程都是在 `1.1.0` 版本（行号为下载后没进行任何改动的行号）基础上
|
||||
:::
|
||||
|
||||
1. 删除相关路由
|
||||
|
||||
删除文件 `src/router/index.js` 中 **34 ~ 53** 行代码
|
||||
|
||||
``` js
|
||||
{
|
||||
path: '/demo/chart',
|
||||
name: 'demo-chart',
|
||||
meta,
|
||||
redirect: { name: 'demo-chart-index' },
|
||||
component: () => import('@/components/core/d2-layout-main'),
|
||||
children: (pre => [
|
||||
...
|
||||
])('demo-chart-')
|
||||
},
|
||||
```
|
||||
|
||||
2. 删除菜单
|
||||
|
||||
删除文件 `src/menu/index.js` 中 **119 ~ 143** 以及 **240** 和 **256** 行代码
|
||||
|
||||
``` js
|
||||
// 路由菜单 图表
|
||||
const demoChart = {
|
||||
path: '/demo/chart',
|
||||
title: '图表 G2',
|
||||
icon: 'pie-chart',
|
||||
children: (pre => [
|
||||
...
|
||||
])('/demo/chart/')
|
||||
}
|
||||
```
|
||||
|
||||
``` js {5,12}
|
||||
export const side = [
|
||||
demoPlugins,
|
||||
demoComponents,
|
||||
demoElement,
|
||||
demoChart // <- 注意这里
|
||||
]
|
||||
// 修改为
|
||||
export const side = [
|
||||
demoPlugins,
|
||||
demoComponents,
|
||||
demoElement
|
||||
// 删除了 demoChart
|
||||
]
|
||||
```
|
||||
|
||||
``` js {13,31}
|
||||
export default [
|
||||
{
|
||||
path: '/index',
|
||||
title: '首页'
|
||||
},
|
||||
{
|
||||
path: '/demo',
|
||||
title: '集成功能',
|
||||
children: [
|
||||
demoPlugins,
|
||||
demoComponents,
|
||||
demoElement,
|
||||
demoChart, // <- 注意这里
|
||||
{
|
||||
title: '空菜单演示',
|
||||
icon: 'folder-o',
|
||||
children: [ ...
|
||||
// 修改为
|
||||
export default [
|
||||
{
|
||||
path: '/index',
|
||||
title: '首页'
|
||||
},
|
||||
{
|
||||
path: '/demo',
|
||||
title: '集成功能',
|
||||
children: [
|
||||
demoPlugins,
|
||||
demoComponents,
|
||||
demoElement,
|
||||
// 删除了 demoChart
|
||||
{
|
||||
title: '空菜单演示',
|
||||
icon: 'folder-o',
|
||||
children: [ ...
|
||||
```
|
||||
|
||||
3. 删除文件
|
||||
|
||||
* 删除 `src/components/charts` 目录
|
||||
|
||||
* 删除 `src/components/index.js` 中的相关内容（高亮部分）
|
||||
|
||||
```js {5-6}
|
||||
// 核心组件
|
||||
import './core/register'
|
||||
// 非核心组件 只是在很多演示页面中用到的组件
|
||||
import './demo/register'
|
||||
// 图表组件
|
||||
import './charts/register'
|
||||
```
|
||||
|
||||
* 删除 `src/mock/chart` 目录
|
||||
|
||||
* 删除 `src/mock/register.js` 中的相关内容（高亮部分）
|
||||
|
||||
```js {7}
|
||||
import Mock from 'mockjs'
|
||||
|
||||
import '@/mock/ajax-demo'
|
||||
|
||||
import '@/mock/login'
|
||||
|
||||
import '@/mock/chart/register.js'
|
||||
|
||||
// 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留
|
||||
Mock.setup({
|
||||
timeout: '300-600'
|
||||
})
|
||||
```
|
||||
|
||||
* 删除 `src/pages/demo/chart` 目录
|
||||
|
||||
4. 删除依赖
|
||||
|
||||
打开终端 cd 到项目文件夹，执行
|
||||
|
||||
``` sh
|
||||
npm remove @antv/data-set -S
|
||||
npm remove @antv/g2 -S
|
||||
```
|
||||
|
||||
## 项目里有未完成的代码
|
||||
|
||||
有些示例（比如 v-charts 和 ElementUI）是很方便就可以找到官网示例和文档的，这些插件和组件的示例在本项目中就可能处于未完成的状态，但是以后会完成
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# 其它
|
||||
|
||||
这里主要是介绍一些其它的信息
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
# CSS 工具类
|
||||
|
||||
## 文字
|
||||
|
||||
| 类名 | 效果 |
|
||||
| --- | --- |
|
||||
| `.d2-text-center` | 文字水平居中 |
|
||||
|
||||
## 浮动
|
||||
|
||||
| 类名 | 效果 |
|
||||
| --- | --- |
|
||||
| `.d2-fl` | 左浮动 |
|
||||
| `.d2-fr` | 右浮动 |
|
||||
| `.d2-clearfix` | 清除浮动 |
|
||||
|
||||
## 边距
|
||||
|
||||
| 类名 | 效果 |
|
||||
| --- | --- |
|
||||
| `.d2-m-0` | 外边距 0px |
|
||||
| `.d2-mt-0` | 上外边距 0px |
|
||||
| `.d2-mr-0` | 右外边距 0px |
|
||||
| `.d2-mb-0` | 下外边距 0px |
|
||||
| `.d2-ml-0` | 左外边距 0px |
|
||||
| `.d2-p-0` | 内边距 0px |
|
||||
| `.d2-pt-0` | 上内边距 0px |
|
||||
| `.d2-pr-0` | 右内边距 0px |
|
||||
| `.d2-pb-0` | 下内边距 0px |
|
||||
| `.d2-pl-0` | 左内边距 0px |
|
||||
| `.d2-m-10` | 外边距 10px |
|
||||
| `.d2-mt-10` | 上外边距 10px |
|
||||
| `.d2-mr-10` | 右外边距 10px |
|
||||
| `.d2-mb-10` | 下外边距 10px |
|
||||
| `.d2-ml-10` | 左外边距 10px |
|
||||
| `.d2-p-10` | 内边距 10px |
|
||||
| `.d2-pt-10` | 上内边距 10px |
|
||||
| `.d2-pr-10` | 右内边距 10px |
|
||||
| `.d2-pb-10` | 下内边距 10px |
|
||||
| `.d2-pl-10` | 左内边距 10px |
|
||||
| `.d2-m-15` | 外边距 15px |
|
||||
| `.d2-mt-15` | 上外边距 15px |
|
||||
| `.d2-mr-15` | 右外边距 15px |
|
||||
| `.d2-mb-15` | 下外边距 15px |
|
||||
| `.d2-ml-15` | 左外边距 15px |
|
||||
| `.d2-p-15` | 内边距 15px |
|
||||
| `.d2-pt-15` | 上内边距 15px |
|
||||
| `.d2-pr-15` | 右内边距 15px |
|
||||
| `.d2-pb-15` | 下内边距 15px |
|
||||
| `.d2-pl-15` | 左内边距 15px |
|
||||
| `.d2-m-20` | 外边距 20px |
|
||||
| `.d2-mt-20` | 上外边距 20px |
|
||||
| `.d2-mr-20` | 右外边距 20px |
|
||||
| `.d2-mb-20` | 下外边距 20px |
|
||||
| `.d2-ml-20` | 左外边距 20px |
|
||||
| `.d2-p-20` | 内边距 20px |
|
||||
| `.d2-pt-20` | 上内边距 20px |
|
||||
| `.d2-pr-20` | 右内边距 20px |
|
||||
| `.d2-pb-20` | 下内边距 20px |
|
||||
| `.d2-pl-20` | 左内边距 20px |
|
||||
|
||||
## 边距简写
|
||||
|
||||
20px 设定为通用边距 可以如下简写
|
||||
|
||||
| 类名 | 效果 |
|
||||
| --- | --- |
|
||||
| `.d2-m` | 外边距 20px |
|
||||
| `.d2-mt` | 上外边距 20px |
|
||||
| `.d2-mr` | 右外边距 20px |
|
||||
| `.d2-mb` | 下外边距 20px |
|
||||
| `.d2-ml` | 左外边距 20px |
|
||||
| `.d2-p` | 内边距 20px |
|
||||
| `.d2-pt` | 上内边距 20px |
|
||||
| `.d2-pr` | 右内边距 20px |
|
||||
| `.d2-pb` | 下内边距 20px |
|
||||
| `.d2-pl` | 左内边距 20px |
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
# 插件概述
|
||||
|
||||
d2-admin（以下简称 d2admin）封装（或者集成第三方）了一些插件，方便开发者进行开发，具体组件文档请从左侧列表进入
|
||||
|
||||
::: tip
|
||||
这里只列出一部分需要特别说明的插件，大部分集成的插件都可以在网络上找到官方文档
|
||||
:::
|
||||
|
|
@ -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 | | 文本 |
|
||||
|
|
@ -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
|
||||
}
|
||||
```
|
||||
|
|
@ -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: '<App/>',
|
||||
components: { App }
|
||||
})
|
||||
```
|
||||
|
||||
## 使用
|
||||
|
||||
使用 `$t('路径')`
|
||||
|
||||
``` vue
|
||||
<PageHeader
|
||||
slot="header"
|
||||
:title="`${$t('pub.pageHeader.demo')} 1`"
|
||||
url="http://kazupon.github.io/vue-i18n/en/">
|
||||
</PageHeader>
|
||||
```
|
||||
|
||||
## 局部配置
|
||||
|
||||
有时候我们只希望在某个文件中配置这个组件的多国语言，如果所有的语言设置都放在 `d2-admin/src/i18n` 中会造成混乱，不易维护
|
||||
|
||||
`D2Admin` 已经替你安装好了 `vue-i18n-loader`，可以方便地在单文件组件中使用
|
||||
|
||||
示例
|
||||
|
||||
``` vue
|
||||
<i18n src="./lang.json"></i18n>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-tag>{{$t('hello')}}</el-tag>
|
||||
<p>{{$t('check.title')}}</p>
|
||||
<el-checkbox-group v-model="check">
|
||||
<el-checkbox label="a">{{$t('check.label.Beijing')}}</el-checkbox>
|
||||
<el-checkbox label="b">{{$t('check.label.Tokyo')}}</el-checkbox>
|
||||
<el-checkbox label="c">{{$t('check.label.NewYork')}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
check: ['a', 'b']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
在同一文件夹下的 `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": "ニューヨーク"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
详细教程请查看官方文档，见此页右上角的链接
|
||||
|
|
@ -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`
|
||||
* **_生成规则_ 的 含义 需要依赖 _属性值的类型_ 才能确定。**
|
||||
* _属性值_ 中可以含有 `@占位符`。
|
||||
* _属性值_ 还指定了最终值的初始值和类型。
|
||||
|
||||
<!-- 感谢 @麦少 同学对 Mock.js 语法的整理和分析，才有了这版相对清晰的语法文档。 -->
|
||||
|
||||
**生成规则和示例：**
|
||||
|
||||
#### 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"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
|
@ -6,7 +6,9 @@
|
|||
"serve": "vue-cli-service serve --open",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint --fix",
|
||||
"test:unit": "vue-cli-service test:unit"
|
||||
"test:unit": "vue-cli-service test:unit",
|
||||
"doc:dev": "vuepress dev docs",
|
||||
"doc:build": "vuepress build docs"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.17.1",
|
||||
|
|
|
|||
|
|
@ -2,28 +2,28 @@ export default [
|
|||
{
|
||||
title: 'd2admin 经典',
|
||||
name: 'd2',
|
||||
preview: 'theme/d2/preview@2x.png'
|
||||
preview: 'image/theme/d2/preview@2x.png'
|
||||
},
|
||||
{
|
||||
title: '紫罗兰',
|
||||
name: 'violet',
|
||||
preview: 'theme/violet/preview@2x.png'
|
||||
preview: 'image/theme/violet/preview@2x.png'
|
||||
},
|
||||
{
|
||||
title: '简约线条',
|
||||
name: 'line',
|
||||
backgroundImage: 'theme/line/bg.jpg',
|
||||
preview: 'theme/line/preview@2x.png'
|
||||
backgroundImage: 'image/theme/line/bg.jpg',
|
||||
preview: 'image/theme/line/preview@2x.png'
|
||||
},
|
||||
{
|
||||
title: '流星',
|
||||
name: 'star',
|
||||
backgroundImage: 'theme/star/bg.jpg',
|
||||
preview: 'theme/star/preview@2x.png'
|
||||
backgroundImage: 'image/theme/star/bg.jpg',
|
||||
preview: 'image/theme/star/preview@2x.png'
|
||||
},
|
||||
{
|
||||
title: 'Tomorrow Night Blue (vsCode)',
|
||||
name: 'tomorrow-night-blue',
|
||||
preview: 'theme/tomorrow-night-blue/preview@2x.png'
|
||||
preview: 'image/theme/tomorrow-night-blue/preview@2x.png'
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -146,6 +146,11 @@
|
|||
.d2-theme-container {
|
||||
// 侧边栏
|
||||
.d2-theme-container-aside {
|
||||
%d2-theme-container-aside-menu-icon {
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
// [菜单] 正常状态
|
||||
.el-menu {
|
||||
@extend %unable-select;
|
||||
|
|
@ -153,9 +158,7 @@
|
|||
border-right: none;
|
||||
.el-menu-item {
|
||||
i {
|
||||
margin-left: 4px;
|
||||
margin-right: 5px;
|
||||
font-size: 16px;
|
||||
@extend %d2-theme-container-aside-menu-icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -163,9 +166,7 @@
|
|||
@extend %unable-select;
|
||||
.el-submenu__title {
|
||||
i {
|
||||
margin-left: 4px;
|
||||
margin-right: 5px;
|
||||
font-size: 16px;
|
||||
@extend %d2-theme-container-aside-menu-icon;
|
||||
}
|
||||
.el-submenu__icon-arrow {
|
||||
margin-top: -10px;
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@
|
|||
<!-- 顶栏 -->
|
||||
<div class="d2-theme-header">
|
||||
<div class="logo-group" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
|
||||
<img v-if="collapse" :src="`${$baseUrl}/theme/${themeActiveSetting.name}/logo/icon-only.png`">
|
||||
<img v-else :src="`${$baseUrl}/theme/${themeActiveSetting.name}/logo/all.png`">
|
||||
<img v-if="collapse" :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/icon-only.png`">
|
||||
<img v-else :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/all.png`">
|
||||
</div>
|
||||
<div class="toggle-aside-btn" @click="collapse = !collapse">
|
||||
<d2-icon name="bars"/>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
<el-tag type="info">
|
||||
<i :class="'fa fa-' + icon"></i>
|
||||
</el-tag>
|
||||
<span style="font-size: 10px;">{{icon}}</span>
|
||||
<span style="font-size: 10px; margin-left: 5px;">{{icon}}</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">图标组件</template>
|
||||
<d2-icon/>
|
||||
<d2-icon name="github"/>
|
||||
<d2-icon name="github" style="font-size: 100px;"/>
|
||||
<d2-icon name="github" class="icon-class-demo"/>
|
||||
<d2-icon class="d2-mr-10"/>
|
||||
<d2-icon name="github" class="d2-mr-10"/>
|
||||
<d2-icon name="github" style="font-size: 100px;" class="d2-mr-10"/>
|
||||
<d2-icon name="github" class="icon-demo"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/public.scss';
|
||||
.icon-class-demo {
|
||||
.icon-demo {
|
||||
transition: all .3s;
|
||||
font-size: 100px;
|
||||
color: #409EFF;
|
||||
|
|
|
|||
Loading…
Reference in New Issue