diff --git a/README.md b/README.md index 44f3b09e..e903e83a 100755 --- a/README.md +++ b/README.md @@ -1,30 +1,10 @@ -

- -

- -Solution of management system front-end based on `vue.js` and `ElementUI` - # 介绍 D2Admin 是一个开源的管理系统前端集成方案 -[Github仓库](https://github.com/FairyEver/d2-admin) - [预览地址](https://fairyever.gitee.io/d2-admin-preview) +[中文文档](https://fairyever.gitee.io/d2-admin-doc/zh/) - [码云仓库](https://gitee.com/fairyever/d2-admin) - [预览地址](https://fairyever.gitee.io/d2-admin-preview) -[中文文档](https://fairyever.gitee.io/d2-admin-doc/zh/) - -[下载地址(不要直接克隆仓库)](https://github.com/FairyEver/d2-admin/releases) - -D2Admin 是完全开源免费的管理系统集成方案，由 [FairyEver](https://github.com/FairyEver) 在工作之余完全由兴趣驱动完成，如果你也一样喜欢前端开发，欢迎加入我们的讨论/学习群，群内可以`提问答疑`，`分享学习资料`或者随便扯淡 - -**QQ群** - -群号 806395827 欢迎大家 - -**微信群** - -作者微信 liyang1711467488 - -> 微信群需要先加群主才可以拉进群 PS 微信群不太活跃，建议进QQ群 +因为现在集成了很多的插件和组件，首次加载会占用很多的时间，虽然已经做了首屏加载动画，但还是建议您在发布之前一定要删除没有用到的代码，比如项目没有用到图表、示例、插件组件 ## 功能 @@ -63,26 +43,46 @@ D2Admin 是完全开源免费的管理系统集成方案，由 [FairyEver](https * 为 markdown 扩展了百度云链接解析和优化显示 * 右键菜单组件 * 自定义滚动条和滚动控制 -* 内置4种主题 +* 内置5种主题 * 公用样式抽离，方便的主题定制 * 支持百万级数据量的表格组件 * 打包后随意目录部署（已经做好兼容设置） +* 支持临时菜单配置 +* 提供“试验台”功能 方便展示系统功能调用方法 `1.1.4 +` +* 多标签页模式 `1.1.4 +` +* 美化滚动条 `1.1.4 +` +* 持久化存储 `1.1.4 +` + +## 加入小组 + +D2Admin 是完全开源免费的管理系统集成方案，由 [FairyEver](https://github.com/FairyEver) 在工作之余完全由兴趣驱动完成，如果你也一样喜欢前端开发，欢迎加入我们的讨论/学习群，群内可以`提问答疑`，`分享学习资料`或者随便扯淡 + +| QQ群 806395827 | 微信 liyang1711467488 | +| --- | --- | +| | | + +> 微信群需要先加群主才可以拉进群 PS 微信群交流不太方便，建议QQ群 ## TODO -D2Admin 仍然处于开发中，这里有一些计划： +D2Admin 仍然处于开发中，这里有一些暂时的计划： * 分离出简化版本 * 推出基于 [ice](https://alibaba.github.io/ice) 平台的版本 * 增加右上角通知中心 * 增加一些实例页面以提供业务页面布局建议 -* 更换图表库 -* 多 tab 页结构 * 面包屑导航 * 树型表格组件 -* `1.1.0 完成` 抽离项目里的文档，集中存放在文档站点 -* `1.1.0 完成` 对主界面进行一次完善，调整整体布局和颜色 -* `1.1.0 完成` 切换主题功能 +* 更多类型的编辑器 +* socket 连接 +* 浏览器版本提示 +* 日志控制台 +* `1.1.4 已完成` 自定义滚动条 +* `1.1.4 已完成` 多 tab 页结构 +* `1.1.3 已完成` 更换图表库 +* `1.1.0 已完成` 抽离项目里的文档，集中存放在文档站点 +* `1.1.0 已完成` 对主界面进行一次完善，调整整体布局和颜色 +* `1.1.0 已完成` 切换主题功能 欢迎你为 D2Admin 的开发作出贡献（代码编写/文档翻译）。 @@ -91,6 +91,8 @@ D2Admin 仍然处于开发中，这里有一些计划： ``` ├─ build ├─ config +├─ deploy +├─ dist ├─ docs // 文档 ├─ src │ ├─ assets // 资源 @@ -99,17 +101,17 @@ D2Admin 仍然处于开发中，这里有一些计划： │ │ ├─ library │ │ └─ style │ ├─ components // 组件 -│ │ ├─ charts -│ │ ├─ core -│ │ └─ demo +│ │ ├─ charts // 图表组件 +│ │ ├─ core // 核心组件 +│ │ └─ demo // 示例组件 │ ├─ i18n // 多国语 +│ ├─ libs // 通用库 │ ├─ menu // 菜单 │ ├─ mock // 模拟数据 │ ├─ pages // 页面 │ ├─ plugin // 插件 │ ├─ router // 路由 │ ├─ store // vuex -│ ├─ utils │ ├─ App.vue │ └─ main.js ├─ static // 静态资源 @@ -128,6 +130,18 @@ D2Admin 仍然处于开发中，这里有一些计划： └─ package.json ``` +## 获取代码 + +有两种方式可以获得 D2Admin 的代码 + +* 在 [releases](https://github.com/FairyEver/d2-admin/releases) 页面下载最新的发行版。发行版一般是完成了某个大升级或者修复重要 bug 后发布的压缩包，你可以下载下来直接使用 + +* Fork 仓库到你的 github 然后克隆到本地，然后使用 master 分支继续你的开发。这种方式得到的是最新的代码，但是会有未完成的新功能。**不建议使用这种方式** + +* 由于 github 访问较慢，推荐前往码云仓库下载 [gitee.com/fairyever/d2-admin](https://gitee.com/fairyever/d2-admin)，码云上的仓库**在每次发布版本才会更新**，所以如果你选择此方法，请直接 fork 仓库并克隆到本地 + +> 码云的仓库由 github 同步，但是发行版和标签同步有一些问题，所以推荐直接 fork 仓库 + ## 使用 ``` @@ -140,19 +154,3 @@ npm run dev // 打包 npm run build ``` - -## 书写文档 - -这里目前还有一个小遗憾，d2admin 使用的 webpack 版本不能符合 vuepress 的要求，所以如果你想在本地启动文档站点的服务，需要按下述步骤 - -首先将 vuepress 安装到全局 - -``` -npm i -g vuepress -``` - -启动服务 - -``` -npm run doc:dev -``` diff --git a/deploy-github-add.sh b/deploy-github-add.sh deleted file mode 100755 index 956a4c0e..00000000 --- a/deploy-github-add.sh +++ /dev/null @@ -1,5 +0,0 @@ -set -e - -git add --all - -git commit -m 'auto commit on save' \ No newline at end of file diff --git a/deploy-doc.sh b/deploy/doc.sh similarity index 100% rename from deploy-doc.sh rename to deploy/doc.sh diff --git a/deploy-github.sh b/deploy/github.sh similarity index 100% rename from deploy-github.sh rename to deploy/github.sh diff --git a/deploy-preview.sh b/deploy/preview.sh similarity index 100% rename from deploy-preview.sh rename to deploy/preview.sh diff --git a/design.sketch.REMOVED.git-id b/design.sketch.REMOVED.git-id index 7d792df5..6a952f10 100644 --- a/design.sketch.REMOVED.git-id +++ b/design.sketch.REMOVED.git-id @@ -1 +1 @@ -fa557a428388c3e73ddee4997e5feb56297e1304 \ No newline at end of file +6a5c83d50f23558fd07642b7445ac467a31d9354 \ No newline at end of file diff --git a/design/d2-layout-main-group.xmind.REMOVED.git-id b/design/d2-layout-main-group.xmind.REMOVED.git-id new file mode 100644 index 00000000..ba2b8b21 --- /dev/null +++ b/design/d2-layout-main-group.xmind.REMOVED.git-id @@ -0,0 +1 @@ +f6ee530a7841eb687cae7821453739533292ddd6 \ No newline at end of file diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index a0edcd07..250e2a18 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -90,6 +90,7 @@ function sideBarComponents (title) { children: [ '', 'charts', + 'charts-new', 'container', 'count-up', 'highlight', diff --git a/docs/zh/components/charts-new.md b/docs/zh/components/charts-new.md new file mode 100644 index 00000000..3a4f8b86 --- /dev/null +++ b/docs/zh/components/charts-new.md @@ -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，你可以直接使用 \ No newline at end of file diff --git a/docs/zh/components/container.md b/docs/zh/components/container.md index e5dabe9a..ca365897 100644 --- a/docs/zh/components/container.md +++ b/docs/zh/components/container.md @@ -7,6 +7,7 @@ | 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | --- | | type | 容器类型 | 非 | String | card ghost full | card | +| scroll | 滚动优化 | 非 | Boolean | | false | | responsive | 响应式宽度 | 非 | Boolean | | false | ::: tip @@ -39,7 +40,7 @@ export default { ``` -## 基础页面容器 +### 基础页面容器 高度根据内容适应 @@ -58,7 +59,7 @@ export default { ``` -## 自适应填充页面容器 +### 自适应填充页面容器 无论内容高度多少，都会自动撑满页面，并有可选的 `header` 和 `footer` 插槽 @@ -78,12 +79,34 @@ export default { ``` -## 隐形页面容器 +`v1.1.4` 新增 -不显示任何背景色和边框 +你可以通过设置 `scroll` 来启用自定义滚动条，看起来更美观一些 + +示例： + +``` vue + +``` + +### 隐形页面容器 + +不显示任何背景色和边框，通常这个模式只有在极少情况下会使用 ``` vue 主体内容 -``` \ No newline at end of file +``` + +如果你不希望内容紧贴上边，可以在内容外层容器设置 `class="d2-mt"` diff --git a/docs/zh/components/icon-svg.md b/docs/zh/components/icon-svg.md index a9616141..245e1cad 100644 --- a/docs/zh/components/icon-svg.md +++ b/docs/zh/components/icon-svg.md @@ -4,7 +4,7 @@ | 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | --- | -| name | 图标名称 | 非 | String | 放在 src/assets/icons/svg 中的 .svg 文件名 | 空 | +| name | 图标名称 | 非 | String | src/assets/icons/svg 中 .svg 文件名 | 空 | ## 使用方法 diff --git a/docs/zh/components/image/baiduyun.png.REMOVED.git-id b/docs/zh/components/image/baiduyun.png.REMOVED.git-id new file mode 100644 index 00000000..b72710d1 --- /dev/null +++ b/docs/zh/components/image/baiduyun.png.REMOVED.git-id @@ -0,0 +1 @@ +3a5bb0f2628d9251bbe7474c0535258784cf770b \ No newline at end of file diff --git a/docs/zh/components/markdown.md b/docs/zh/components/markdown.md index 92fd7e89..71a6f1c5 100644 --- a/docs/zh/components/markdown.md +++ b/docs/zh/components/markdown.md @@ -79,14 +79,10 @@ export default { > 链接: https://pan.baidu.com/s/1ggFW21l 密码: 877y ``` -markdown 中引用部分的文本由于被识别为百度云的分享链接，所以不会被当做 `blockquote` 渲染（非百度云链接的引用行不会改变），会以一种特别的块来显示 +markdown 中引用部分的文本由于被识别为百度云的分享链接，所以不会被当做 `blockquote` 渲染（非百度云链接的引用行不会改变），会以一种特别的块来显示，效果见下 -就像这样 - -> https://pan.baidu.com/s/1kW6uUwB - -上面的块会嵌套在你的 markdown 渲染结果中 +![效果](./image/baiduyun.png) ::: tip -了解 D2Admin 是如何在 markdown 中匹配百度云链接的？ [查看源码](https://github.com/FairyEver/d2-admin/blob/master/src/components/core/Markdown/plugin/baidupan.js) +了解 D2Admin 是如何在 markdown 中匹配百度云链接的？ [查看源码](https://github.com/FairyEver/d2-admin/blob/master/src/components/core/d2-markdown/index.vue) ::: \ No newline at end of file diff --git a/docs/zh/guide/README.md b/docs/zh/guide/README.md index 756fe94d..e21fda5a 100644 --- a/docs/zh/guide/README.md +++ b/docs/zh/guide/README.md @@ -2,7 +2,7 @@ D2Admin 是一个开源的管理系统前端集成方案 -[Github仓库](https://github.com/FairyEver/d2-admin) - [预览地址](https://fairyever.gitee.io/d2-admin-preview) +[Github仓库](https://github.com/FairyEver/d2-admin) - [码云仓库](https://gitee.com/fairyever/d2-admin) - [预览地址](https://fairyever.gitee.io/d2-admin-preview)
@@ -68,10 +68,15 @@ D2Admin 创建于2018年1月14日零点51分，在2018年5月26日正式发布 * 为 markdown 扩展了百度云链接解析和优化显示 * 右键菜单组件 * 自定义滚动条和滚动控制 -* 内置4种主题 +* 内置5种主题 * 公用样式抽离，方便的主题定制 * 支持百万级数据量的表格组件 * 打包后随意目录部署（已经做好兼容设置） +* 支持临时菜单配置 +* 提供“试验台”功能 方便展示系统功能调用方法 `1.1.4 +` +* 多标签页模式 `1.1.4 +` +* 美化滚动条 `1.1.4 +` +* json view `1.1.4 +` ## TODO @@ -81,17 +86,18 @@ D2Admin 仍然处于开发中，这里有一些暂时的计划： * 推出基于 [ice](https://alibaba.github.io/ice) 平台的版本 * 增加右上角通知中心 * 增加一些实例页面以提供业务页面布局建议 -* 更换图表库 -* 多 tab 页结构 * 面包屑导航 * 树型表格组件 * 更多类型的编辑器 * socket 连接 * 浏览器版本提示 * 日志控制台 -* `1.1.0 完成` 抽离项目里的文档，集中存放在文档站点 -* `1.1.0 完成` 对主界面进行一次完善，调整整体布局和颜色 -* `1.1.0 完成` 切换主题功能 +* `1.1.4 已完成` 自定义滚动条 +* `1.1.4 已完成` 多 tab 页结构 +* `1.1.3 已完成` 更换图表库 +* `1.1.0 已完成` 抽离项目里的文档，集中存放在文档站点 +* `1.1.0 已完成` 对主界面进行一次完善，调整整体布局和颜色 +* `1.1.0 已完成` 切换主题功能 欢迎你为 D2Admin 的开发作出贡献（代码编写/文档翻译）。 @@ -100,6 +106,8 @@ D2Admin 仍然处于开发中，这里有一些暂时的计划： ``` ├─ build ├─ config +├─ deploy +├─ dist ├─ docs // 文档 ├─ src │ ├─ assets // 资源 @@ -112,13 +120,13 @@ D2Admin 仍然处于开发中，这里有一些暂时的计划： │ │ ├─ core // 核心组件 │ │ └─ demo // 示例组件 │ ├─ i18n // 多国语 +│ ├─ libs // 通用库 │ ├─ menu // 菜单 │ ├─ mock // 模拟数据 │ ├─ pages // 页面 │ ├─ plugin // 插件 │ ├─ router // 路由 │ ├─ store // vuex -│ ├─ utils // 通用函数 │ ├─ App.vue │ └─ main.js ├─ static // 静态资源 @@ -135,7 +143,6 @@ D2Admin 仍然处于开发中，这里有一些暂时的计划： ├─ design.sketch // 设计文件 ├─ index.html └─ package.json - ``` ## 获取代码 @@ -146,6 +153,10 @@ D2Admin 仍然处于开发中，这里有一些暂时的计划： * Fork 仓库到你的 github 然后克隆到本地，然后使用 master 分支继续你的开发。这种方式得到的是最新的代码，但是会有未完成的新功能。**不建议使用这种方式** +* 由于 github 访问较慢，推荐前往码云仓库下载 [gitee.com/fairyever/d2-admin](https://gitee.com/fairyever/d2-admin)，码云上的仓库**在每次发布版本才会更新**，所以如果你选择此方法，请直接 fork 仓库并克隆到本地 + +> 码云的仓库由 github 同步，但是发行版和标签同步有一些问题，所以推荐直接 fork 仓库 + ## 使用 ``` @@ -159,24 +170,4 @@ npm run dev npm run build ``` -> 如果上述步骤出现错误，建议您升级 node 版本 > 8，如果有其它疑问请参考[常见问题](/zh/guide/question.html) - -## 书写文档 - -这里目前还有一个小遗憾，d2admin 使用的 webpack 版本不能符合 vuepress 的要求，所以如果你想在本地启动文档站点的服务，需要按下述步骤 - -首先将 vuepress 安装到全局 - -``` -npm i -g vuepress -``` - -启动服务 - -``` -npm run doc:dev -``` - -::: tip -你可能会发现项目目录中有一个 deploy.sh 文件，这个文件是为了方便发布文档用的，通常你并不需要使用它 -::: \ No newline at end of file +> 如果上述步骤出现错误，建议您升级 node 版本 > 8，如果有其它疑问请参考[常见问题](/zh/guide/question.html) \ No newline at end of file diff --git a/docs/zh/guide/change-log.md b/docs/zh/guide/change-log.md index 15186fe9..b93de3f0 100644 --- a/docs/zh/guide/change-log.md +++ b/docs/zh/guide/change-log.md @@ -5,6 +5,20 @@ * [ 修改 ] 全局状态管理设计优化 * [ 修改 ] 主题调优 * [ 新增 ] playground 模块，方便测试和展示一些功能实现方式/调用方法 +* [ 新增 ] 多页模式 +* [ 新增 ] 多页模式缓存 +* [ 新增 ] 多页模式快速关闭（关闭左侧 右侧 全部 其它） +* [ 修改 ] 侧边栏滚动优化 +* [ 新增 ] `d2-container` 填充模式自定义滚动条 +* [ 新增 ] `d2-container` 组件卡片和隐形模式自定义滚动条 +* [ 新增 ] 现在页面标题可以根据路由做出对应变化了 +* [ 新增 ] 版本检查机制 +* [ 新增 ] `d2-container` 隐形模式支持 header 插槽 +* [ 新增 ] 版本检查可以设置为不显示提示框 +* [ 新增 ] 集成 json 查看组件 +* [ 新增 ] 添加了所有图表种类的演示页面 +* [ 修改 ] 修改布局方式，解决了在 Firefox 上 better-scroll 初始化拿不到正确高度的 bug +* [ 新增 ] 右上角显示用户名，用户名持久存储 ## v1.1.3 diff --git a/docs/zh/guide/pr.md b/docs/zh/guide/pr.md index 9371bd79..db6c8775 100644 --- a/docs/zh/guide/pr.md +++ b/docs/zh/guide/pr.md @@ -2,7 +2,7 @@ ## 如何贡献代码 -首先在[项目主页](https://github.com/FairyEver/d2-admin) fork 本仓库，然后进行你的开发，请确保你的开发是在 dev 分支进行。本地测试无误后方可 pull request，我在检查通过后会合并代码到原始仓库。 +首先在[项目主页](https://github.com/FairyEver/d2-admin) fork 本仓库，然后进行你的开发，请确保你的开发是在 **dev** 分支进行。本地测试无误后方可 pull request，我在检查通过后会合并代码到原始仓库。 ## 要求 diff --git a/docs/zh/guide/question.md b/docs/zh/guide/question.md index cd689bf8..f20d47d1 100644 --- a/docs/zh/guide/question.md +++ b/docs/zh/guide/question.md @@ -27,14 +27,30 @@ v8.11.1 推荐使用 [nrm](https://github.com/Pana/nrm) 管理 npm 源，不建议使用 cnpm ::: +## 文档运行报错 + +这里目前还有一个小遗憾，d2admin 使用的 webpack 版本不能符合 vuepress 的要求，所以如果你想在本地启动文档站点的服务，需要按下述步骤 + +首先将 vuepress 安装到全局 + +``` +npm i -g vuepress +``` + +启动服务 + +``` +npm run doc:dev +``` + +::: tip +你可能会发现项目目录中有一个 deploy 文件夹，这个文件是为了方便发布和提交代码用的，通常你并不需要使用它 +::: + ## 删除页面右上角 github 链接 在 `src/components/demo/d2-demo-page-cover/index.vue` 中删除相关代码即可 -## el-scrollbar 组件 - -el-scrollbar 组件是 ElementUI 自带的一个隐藏组件，没有写入文档，详见 [https://github.com/ElemeFE/element/issues/2238](https://github.com/ElemeFE/element/issues/2238) - ## 兼容性 首先 vue.js 和 ElementUI 做不到兼容的，D2Admin 肯定也兼容不了，实测在 macOS 下 Chrome 和新版本的火狐浏览器以及 Safari 都正常使用，这类管理系统一般是内部使用，通常不必太纠结兼容低版本浏览器，如果你发现了显示的 bug，可以加 QQ 群反应，如果你可以修复这个 bug 使其在你的浏览器上显示正常，欢迎你的 pr。 @@ -177,4 +193,8 @@ Mock.setup({ ``` npm remove @antv/data-set -S npm remove @antv/g2 -S -``` \ No newline at end of file +``` + +## 项目里有未完成的代码 + +有些示例（比如 v-charts 和 ElementUI）是很方便就可以找到官网示例和文档的，这些插件和组件的示例在本项目中就可能处于未完成的状态，但是以后会完成 \ No newline at end of file diff --git a/docs/zh/plugins/README.md b/docs/zh/plugins/README.md index cdac3b88..d5688fce 100644 --- a/docs/zh/plugins/README.md +++ b/docs/zh/plugins/README.md @@ -1,3 +1,7 @@ # 插件概述 -d2-admin（以下简称 d2admin）封装（或者集成第三方）了一些插件，方便开发者进行开发，具体组件文档请从左侧列表进入 \ No newline at end of file +d2-admin（以下简称 d2admin）封装（或者集成第三方）了一些插件，方便开发者进行开发，具体组件文档请从左侧列表进入 + +::: tip +这里只列出一部分需要特别说明的插件，大部分集成的插件都可以在网络上找到官方文档 +::: \ No newline at end of file diff --git a/github/qq.jpg.REMOVED.git-id b/github/qq.jpg.REMOVED.git-id new file mode 100644 index 00000000..a957a237 --- /dev/null +++ b/github/qq.jpg.REMOVED.git-id @@ -0,0 +1 @@ +b27de32f6832b50dc5b8b1dc613060a81f88a8e9 \ No newline at end of file diff --git a/github/we.jpg.REMOVED.git-id b/github/we.jpg.REMOVED.git-id new file mode 100644 index 00000000..af83cd85 --- /dev/null +++ b/github/we.jpg.REMOVED.git-id @@ -0,0 +1 @@ +391119ecb08564a4e5d87c23be171f8ab9a4c894 \ No newline at end of file diff --git a/index.html b/index.html index fc7313e2..a9dbc96b 100755 --- a/index.html +++ b/index.html @@ -18,12 +18,6 @@ justify-content: center; align-items: center; flex-direction: column; - /* background: #8e9eab; - background: -webkit-linear-gradient(to right, #eef2f3, #8e9eab); - background: linear-gradient(to right, #eef2f3, #8e9eab); */ - /* background: #4b6cb7; - background: -webkit-linear-gradient(to right, #182848, #4b6cb7); - background: linear-gradient(to right, #182848, #4b6cb7); */ background: #757F9A; background: -webkit-linear-gradient(to top, #D7DDE8, #757F9A); background: linear-gradient(to top, #D7DDE8, #757F9A); @@ -39,12 +33,46 @@ .d2-app-loading-sub-title { color: #FFF; font-size: 10px; + margin-bottom: 10px; + } + .d2-app-loading-sub-info { + color: #FFF; + font-size: 10px; + opacity: .8; + margin-bottom: 4px; + } + .d2-app-loading-btn { + text-decoration: none; + display: inline-block; + line-height: 1; + white-space: nowrap; + cursor: pointer; + background: #fff; + border: 1px solid #dcdfe6; + border-color: #dcdfe6; + color: #606266; + -webkit-appearance: none; + text-align: center; + box-sizing: border-box; + outline: none; + margin: 0; + transition: .1s; + font-weight: 500; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + padding: 12px 20px; + font-size: 14px; + border-radius: 4px; + /* 圆角 */ + padding: 7px 15px; + border-radius: 20px; + font-size: 12px; } .d2-app-loading-grid { width: 30px; height: 30px; } - .d2-app-loading-grid .d2-app-loading { width: 10px; height: 10px; @@ -121,7 +149,12 @@
加载中
-
初次加载会比较慢，请耐心等待
+
本示例项目加载了大量的组件，初次加载会比较慢，请耐心等待
+
如果很久很久都没有加载成功，请清空缓存重新加载页面
+
+ Github仓库 + 中文文档 +
diff --git a/package.json b/package.json index 1c7b2f58..5b283220 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "d2-admin", - "version": "1.0.0", + "version": "1.1.4", "description": "A management system framework based on element", "author": "李杨 <1711467488@qq.com>", "private": true, @@ -26,7 +26,6 @@ "highlight.js": "^9.12.0", "js-cookie": "^2.2.0", "lodash.clonedeep": "^4.5.0", - "lodash.get": "^4.4.2", "lodash.uniqueid": "^4.0.1", "lowdb": "^1.0.0", "marked": "^0.3.9", @@ -41,6 +40,7 @@ "vue": "^2.5.2", "vue-grid-layout": "^2.1.11", "vue-i18n": "^7.4.2", + "vue-json-tree-view": "^2.1.4", "vue-router": "^3.0.1", "vue-splitpane": "^1.0.2", "vuex": "^3.0.1", @@ -85,7 +85,7 @@ "postcss-loader": "^2.0.8", "rimraf": "^2.6.0", "sass-loader": "^6.0.6", - "semver": "^5.3.0", + "semver": "^5.5.0", "shelljs": "^0.7.6", "svg-sprite-loader": "^3.6.2", "text-loader": "0.0.1", diff --git a/src/assets/style/theme/list.js b/src/assets/style/theme/list.js index 2dfcabc6..55173bdd 100644 --- a/src/assets/style/theme/list.js +++ b/src/assets/style/theme/list.js @@ -1,29 +1,29 @@ export default [ { - name: 'd2admin 经典', - value: 'd2', + title: 'd2admin 经典', + name: 'd2', preview: 'static/image/theme/d2/preview@2x.png' }, { - name: '紫罗兰', - value: 'violet', + title: '紫罗兰', + name: 'violet', preview: 'static/image/theme/violet/preview@2x.png' }, { - name: '简约线条', - value: 'line', + title: '简约线条', + name: 'line', backgroundImage: 'static/image/bg/line-squashed.jpg', preview: 'static/image/theme/line/preview@2x.png' }, { - name: '流星', - value: 'star', + title: '流星', + name: 'star', backgroundImage: 'static/image/bg/star-squashed.jpg', preview: 'static/image/theme/star/preview@2x.png' }, { - name: 'Tomorrow Night Blue (vsCode)', - value: 'tomorrow-night-blue', + title: 'Tomorrow Night Blue (vsCode)', + name: 'tomorrow-night-blue', preview: 'static/image/theme/tomorrow-night-blue/preview@2x.png' } ] diff --git a/src/assets/style/theme/theme-base.scss b/src/assets/style/theme/theme-base.scss index 6abee281..e5d62ae5 100644 --- a/src/assets/style/theme/theme-base.scss +++ b/src/assets/style/theme/theme-base.scss @@ -1,5 +1,84 @@ +// 整体框架结构 +.d2-layout-main-group { + height: 100%; + width: 100%; + background-size: cover; + background-position: center; + overflow: hidden; + position: relative; + // 背景上面的半透明遮罩 + .d2-layout-main-mask { + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + } + // 内容层 + .d2-layout-main-content { + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + $d2-theme-header-height: 60px; + .d2-theme-header { + position: absolute; + top: 0px; + left: 0px; + right: 0px; + height: $d2-theme-header-height; + } + .d2-theme-container { + position: absolute; + top: $d2-theme-header-height; + bottom: 0px; + left: 0px; + right: 0px; + display: flex; + flex-direction: row; + .d2-theme-container-aside { + transition: width .3s; + flex-grow: 0; + position: relative; + .d2-layout-main-menu-side { + position: absolute; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + overflow: hidden; + } + } + .d2-theme-container-main { + flex-grow: 1; + padding: 0px; + position: relative; + overflow: hidden; + display: flex; + flex-direction: column; + .d2-theme-container-main-header { + flex-grow: 0; + } + .d2-theme-container-main-body { + flex-grow: 1; + margin-top: 1px; + position: relative; + } + } + } + } +} + + + + + + + + // 主题公用 -.layout-main-group { +.d2-layout-main-group { &.grayMode { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); @@ -8,30 +87,10 @@ filter: grayscale(100%); filter: gray; } - height: 100%; - width: 100%; - background-size: cover; - background-position: center; - overflow: hidden; - position: relative; - // 背景上面的半透明遮罩 - .layout-main-mask { - position: absolute; - top: 0px; - right: 0px; - bottom: 0px; - left: 0px; - } // 主体 - .layout-main { - position: absolute; - top: 0px; - right: 0px; - bottom: 0px; - left: 0px; + .d2-layout-main-content { // [布局] 顶栏 - .el-header { - padding: 0px; + .d2-theme-header { // logo区域 .logo-group { transition: width .3s; @@ -96,11 +155,9 @@ } } // [布局] 顶栏下面 - .el-container { + .d2-theme-container { // 侧边栏 - .el-aside { - transition: width .3s; - overflow: auto; + .d2-theme-container-aside { // [菜单] 正常状态 .el-menu { @extend %unable-select; @@ -155,41 +212,117 @@ } } // 右下 主体 - .el-main { - padding: 0px; - position: relative; - overflow: hidden; - display: flex; - flex-direction: column; + .d2-theme-container-main { // 主体部分分为多页面控制器 和主体 - .d2-layout-main-header { - flex-grow: 0; + .d2-theme-container-main-header { // 多页面控制器 - .d2-multiple-page-control { - .el-tabs__header.is-top { - margin: 0px; - margin-right: 20px; + .d2-multiple-page-control-group { + display: flex; + margin-right: 20px; + .d2-multiple-page-control-content { + flex-grow: 1; + position: relative; + .d2-multiple-page-control-content-inner { + position: absolute; + left: 0px; + right: 0px; + .d2-multiple-page-control { + .el-tabs__header.is-top { + margin: 0px; + } + .el-tabs__nav { + overflow: hidden; + } + } + } } - .el-tabs__nav { - overflow: hidden; + .d2-multiple-page-control-btn { + position: relative; + bottom: -1px; + .el-dropdown { + .el-button-group { + .el-button:first-child { + border-bottom-left-radius: 0px; + } + .el-button:last-child { + border-bottom-right-radius: 0px; + } + } + } } } } // 主体 - .d2-layout-main-body { - flex-grow: 1; - position: relative; + .d2-theme-container-main-body { // 布局组件 .container-component { + position: absolute; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + overflow: hidden; + // 填充式布局组件 + .d2-container-full { + position: absolute; + top: 0px; + right: 20px; + bottom: 0px; + left: 0px; + display: flex; + flex-direction: column; + overflow: hidden; + .d2-container-full__header { + padding: 20px; + } + .d2-container-full__body { + flex-grow: 1; + padding: 20px 20px; + overflow: auto; + position: relative; + } + .d2-container-full__footer { + padding: 20px; + } + } + // 填充式布局组件 - 滚动优化 + .d2-container-full-bs { + position: absolute; + top: 0px; + right: 20px; + bottom: 0px; + left: 0px; + display: flex; + flex-direction: column; + overflow: hidden; + .d2-container-full-bs__header { + padding: 20px; + } + .d2-container-full-bs__body { + flex-grow: 1; + padding: 0px 20px; + overflow: hidden; + position: relative; + } + .d2-container-full-bs__footer { + padding: 20px; + } + } // 卡片布局组件 .d2-container-card { border-top-left-radius: 0px; border-top-right-radius: 0px; } - // 隐形布局组件 这个组件不建议在有多页面导航的时候使用 不美观 + // 隐形布局组件 .d2-container-ghost { margin-right: 20px; margin-bottom: 20px; + .d2-container-ghost-header { + border-top: none; + border-top-left-radius: 0px; + border-top-right-radius: 0px; + margin-bottom: 20px; + } } } } diff --git a/src/assets/style/theme/theme.scss b/src/assets/style/theme/theme.scss index 0ef7efc4..b01c49f1 100644 --- a/src/assets/style/theme/theme.scss +++ b/src/assets/style/theme/theme.scss @@ -2,9 +2,9 @@ .theme-#{$theme-name} { // 背景图片和遮罩 - .layout-main-group { + .d2-layout-main-group { background-color: $theme-bg-color; - .layout-main-mask { + .d2-layout-main-mask { background: $theme-bg-mask; } } @@ -39,7 +39,7 @@ } // 顶栏 - .el-header { + .d2-theme-header { // 切换按钮 .toggle-aside-btn { i { @@ -115,9 +115,9 @@ } } // [布局] 顶栏下面 - .el-container { + .d2-theme-container { // 侧边栏 - .el-aside { + .d2-theme-container-aside { // 菜单为空的时候显示的信息 .menu-empty { background: $theme-aside-menu-empty-background-color; @@ -191,9 +191,9 @@ } } } - .el-main { + .d2-theme-container-main { // 主体部分分为多页面控制器 和主体 - .d2-layout-main-header { + .d2-theme-container-main-header { // 多页面控制器 .d2-multiple-page-control { .el-tabs__header.is-top { @@ -202,11 +202,18 @@ .el-tabs__nav { border-color: $theme-multiple-page-control-border-color; .el-tabs__item { + @extend %unable-select; color: $theme-multiple-page-control-color; background-color: $theme-multiple-page-control-background-color; border-left-color: $theme-multiple-page-control-border-color; &:first-child { border-left: none; + &:hover { + padding: 0px 20px; + } + .el-icon-close { + display: none; + } } } .el-tabs__item.is-active { @@ -227,12 +234,23 @@ color: $theme-multiple-page-control-nav-next-color; } } + // 多页控制器的关闭控制 + .d2-multiple-page-control-btn { + .el-dropdown { + .el-button-group { + .el-button { + border-color: $theme-multiple-page-control-border-color; + } + } + } + } } // 主体 - .d2-layout-main-body { + .d2-theme-container-main-body { // 布局组件 .container-component { - // [组件] d2-container-full + // [组件] + // d2-container-full 填充型 .d2-container-full { border: $theme-container-border-outer; border-top: none; @@ -249,19 +267,47 @@ background: $theme-container-header-footer-background-color; } } - // [组件] d2-container-card + // [组件] + // d2-container-full-bs 填充型 滚动优化 + .d2-container-full-bs { + border: $theme-container-border-outer; + border-top: none; + border-bottom: none; + .d2-container-full-bs__header { + border-bottom: $theme-container-border-inner; + background: $theme-container-header-footer-background-color; + } + .d2-container-full-bs__body { + background: $theme-container-background-color; + } + .d2-container-full-bs__footer { + border-top: $theme-container-border-inner; + background: $theme-container-header-footer-background-color; + } + } + // [组件] + // d2-container-card 卡片型 .d2-container-card { border: $theme-container-border-outer; border-top: none; background: transparent; - .el-card__header { + &>.el-card__header { border-bottom: $theme-container-border-inner; background: $theme-container-header-footer-background-color; } - .el-card__body { + &>.el-card__body { background: $theme-container-background-color; } } + // 隐形布局组件 + .d2-container-ghost { + .d2-container-ghost-header { + border: $theme-container-border-outer; + &>.el-card__body { + background: $theme-container-header-footer-background-color; + } + } + } } } } diff --git a/src/assets/style/theme/violet/index.scss b/src/assets/style/theme/violet/index.scss index 156630be..66943b90 100644 --- a/src/assets/style/theme/violet/index.scss +++ b/src/assets/style/theme/violet/index.scss @@ -2,7 +2,7 @@ @import '../theme.scss'; .theme-#{$theme-name} { - .layout-main-group { + .d2-layout-main-group { background: #bc00e3; background: linear-gradient(120deg, #bc00e3 0%, #4EFFFB 100%); } diff --git a/src/components/core/d2-container/components/d2-container-full-bs.vue b/src/components/core/d2-container/components/d2-container-full-bs.vue new file mode 100644 index 00000000..f54c6e7f --- /dev/null +++ b/src/components/core/d2-container/components/d2-container-full-bs.vue @@ -0,0 +1,51 @@ + + + diff --git a/src/components/core/d2-container/components/d2-container-full.vue b/src/components/core/d2-container/components/d2-container-full.vue index 2311589d..e789a244 100644 --- a/src/components/core/d2-container/components/d2-container-full.vue +++ b/src/components/core/d2-container/components/d2-container-full.vue @@ -17,29 +17,3 @@ export default { name: 'd2-container-full' } - - diff --git a/src/components/core/d2-container/index.vue b/src/components/core/d2-container/index.vue index 07e80a81..0d6922ae 100644 --- a/src/components/core/d2-container/index.vue +++ b/src/components/core/d2-container/index.vue @@ -1,26 +1,38 @@ \ No newline at end of file diff --git a/src/pages/core/setting/releases/md/up-to-date.md b/src/pages/core/setting/releases/md/up-to-date.md new file mode 100644 index 00000000..b4b7fa6c --- /dev/null +++ b/src/pages/core/setting/releases/md/up-to-date.md @@ -0,0 +1,9 @@ +已经是最新版本 + +[Github仓库](https://github.com/FairyEver/d2-admin) + +[码云仓库](https://gitee.com/fairyever/d2-admin) + +[中文文档](https://fairyever.gitee.io/d2-admin-doc/zh/) + +[预览地址](https://fairyever.gitee.io/d2-admin-preview) \ No newline at end of file diff --git a/src/pages/core/setting/theme/custom.vue b/src/pages/core/setting/theme/custom.vue new file mode 100644 index 00000000..a42e311b --- /dev/null +++ b/src/pages/core/setting/theme/custom.vue @@ -0,0 +1,26 @@ + + + + + \ No newline at end of file diff --git a/src/pages/core/setting/theme/theme.vue b/src/pages/core/setting/theme/theme.vue new file mode 100644 index 00000000..d2852d73 --- /dev/null +++ b/src/pages/core/setting/theme/theme.vue @@ -0,0 +1,5 @@ + diff --git a/src/pages/demo/charts/list/candle/demo1/index.vue b/src/pages/demo/charts/list/candle/demo1/index.vue new file mode 100644 index 00000000..9e0cb613 --- /dev/null +++ b/src/pages/demo/charts/list/candle/demo1/index.vue @@ -0,0 +1,77 @@ + + + + + diff --git a/src/pages/demo/charts/list/candle/demo2/index.vue b/src/pages/demo/charts/list/candle/demo2/index.vue new file mode 100644 index 00000000..436938e0 --- /dev/null +++ b/src/pages/demo/charts/list/candle/demo2/index.vue @@ -0,0 +1,81 @@ + + + + + diff --git a/src/pages/demo/charts/list/candle/demo3/index.vue b/src/pages/demo/charts/list/candle/demo3/index.vue new file mode 100644 index 00000000..b93aa503 --- /dev/null +++ b/src/pages/demo/charts/list/candle/demo3/index.vue @@ -0,0 +1,88 @@ + + + + + diff --git a/src/pages/demo/charts/list/funnel/demo1/index.vue b/src/pages/demo/charts/list/funnel/demo1/index.vue new file mode 100644 index 00000000..aba329a3 --- /dev/null +++ b/src/pages/demo/charts/list/funnel/demo1/index.vue @@ -0,0 +1,43 @@ + + + + + diff --git a/src/pages/demo/charts/list/funnel/demo2/index.vue b/src/pages/demo/charts/list/funnel/demo2/index.vue new file mode 100644 index 00000000..84d650c8 --- /dev/null +++ b/src/pages/demo/charts/list/funnel/demo2/index.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/src/pages/demo/charts/list/gauge/demo1/index.vue b/src/pages/demo/charts/list/gauge/demo1/index.vue new file mode 100644 index 00000000..befe7ea5 --- /dev/null +++ b/src/pages/demo/charts/list/gauge/demo1/index.vue @@ -0,0 +1,40 @@ + + + + + diff --git a/src/pages/demo/charts/list/heatmap/demo1/index.vue b/src/pages/demo/charts/list/heatmap/demo1/index.vue new file mode 100644 index 00000000..c6d8965a --- /dev/null +++ b/src/pages/demo/charts/list/heatmap/demo1/index.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/src/pages/demo/charts/list/heatmap/demo2/index.vue b/src/pages/demo/charts/list/heatmap/demo2/index.vue new file mode 100644 index 00000000..3d963c5d --- /dev/null +++ b/src/pages/demo/charts/list/heatmap/demo2/index.vue @@ -0,0 +1,69 @@ + + + + + diff --git a/src/pages/demo/charts/list/map/demo1/index.vue b/src/pages/demo/charts/list/map/demo1/index.vue new file mode 100644 index 00000000..dcf13147 --- /dev/null +++ b/src/pages/demo/charts/list/map/demo1/index.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/src/pages/demo/charts/list/map/demo2/index.vue b/src/pages/demo/charts/list/map/demo2/index.vue new file mode 100644 index 00000000..efba9f19 --- /dev/null +++ b/src/pages/demo/charts/list/map/demo2/index.vue @@ -0,0 +1,47 @@ + + + + + diff --git a/src/pages/demo/charts/list/map/demo3/index.vue b/src/pages/demo/charts/list/map/demo3/index.vue new file mode 100644 index 00000000..f62a6864 --- /dev/null +++ b/src/pages/demo/charts/list/map/demo3/index.vue @@ -0,0 +1,54 @@ + + + + + diff --git a/src/pages/demo/charts/list/radar/demo1/index.vue b/src/pages/demo/charts/list/radar/demo1/index.vue new file mode 100644 index 00000000..c014c41a --- /dev/null +++ b/src/pages/demo/charts/list/radar/demo1/index.vue @@ -0,0 +1,45 @@ + + + + + diff --git a/src/pages/demo/charts/list/sankey/demo1/index.vue b/src/pages/demo/charts/list/sankey/demo1/index.vue new file mode 100644 index 00000000..cce4bcd2 --- /dev/null +++ b/src/pages/demo/charts/list/sankey/demo1/index.vue @@ -0,0 +1,56 @@ + + + + + diff --git a/src/pages/demo/charts/list/scatter/demo1/index.vue b/src/pages/demo/charts/list/scatter/demo1/index.vue new file mode 100644 index 00000000..2d0d56a0 --- /dev/null +++ b/src/pages/demo/charts/list/scatter/demo1/index.vue @@ -0,0 +1,45 @@ + + + + + diff --git a/src/pages/demo/charts/list/scatter/demo2/index.vue b/src/pages/demo/charts/list/scatter/demo2/index.vue new file mode 100644 index 00000000..043fb646 --- /dev/null +++ b/src/pages/demo/charts/list/scatter/demo2/index.vue @@ -0,0 +1,63 @@ + + + + + diff --git a/src/pages/demo/charts/list/tree/demo1/index.vue b/src/pages/demo/charts/list/tree/demo1/index.vue new file mode 100644 index 00000000..6da59bcb --- /dev/null +++ b/src/pages/demo/charts/list/tree/demo1/index.vue @@ -0,0 +1,126 @@ + + + + + diff --git a/src/pages/demo/charts/list/waterfall/demo1/index.vue b/src/pages/demo/charts/list/waterfall/demo1/index.vue new file mode 100644 index 00000000..51ed42e0 --- /dev/null +++ b/src/pages/demo/charts/list/waterfall/demo1/index.vue @@ -0,0 +1,42 @@ + + + + + diff --git a/src/pages/demo/components/bigdata-table/demo.vue b/src/pages/demo/components/bigdata-table/index.vue similarity index 100% rename from src/pages/demo/components/bigdata-table/demo.vue rename to src/pages/demo/components/bigdata-table/index.vue diff --git a/src/pages/demo/components/bigdata-table/select.vue b/src/pages/demo/components/bigdata-table/select.vue deleted file mode 100644 index aeba4a30..00000000 --- a/src/pages/demo/components/bigdata-table/select.vue +++ /dev/null @@ -1,88 +0,0 @@ - - - - - diff --git a/src/pages/demo/components/container/full-bs.vue b/src/pages/demo/components/container/full-bs.vue new file mode 100644 index 00000000..3fa1a164 --- /dev/null +++ b/src/pages/demo/components/container/full-bs.vue @@ -0,0 +1,22 @@ + + + diff --git a/src/pages/demo/components/container/ghost-header.vue b/src/pages/demo/components/container/ghost-header.vue new file mode 100644 index 00000000..b757c0ff --- /dev/null +++ b/src/pages/demo/components/container/ghost-header.vue @@ -0,0 +1,19 @@ + + + diff --git a/src/pages/demo/components/container/ghost.vue b/src/pages/demo/components/container/ghost.vue index cb58c0cb..7a19241d 100644 --- a/src/pages/demo/components/container/ghost.vue +++ b/src/pages/demo/components/container/ghost.vue @@ -1,6 +1,6 @@