Merge pull request #29 from FairyEver/dev
1.1.4 Former-commit-id: 87ae6ef916159fe104659f3a9a2a2f5be1078bf3 [formerly 96d9346a8a88d2c57288f49f8ff4e24904323519] [formerly 87ae6ef916159fe104659f3a9a2a2f5be1078bf3 [formerly 96d9346a8a88d2c57288f49f8ff4e24904323519] [formerly 87ae6ef916159fe104659f3a9a2a2f5be1078bf3 [formerly 96d9346a8a88d2c57288f49f8ff4e24904323519] [formerly 96d9346a8a88d2c57288f49f8ff4e24904323519 [formerly dd2aaf89ba36935940ec92698fdcb0cad91aab7e [formerly 69819e1ee6fb78680748a8ee1654588f581ce645]]]]] Former-commit-id: 1b50c60307d04daa76e7e3de148167a8578483e6 Former-commit-id: da4915811262b72a760e5c6de2d00128898b6145 Former-commit-id: 4800ef8812a55bfe570da4e0412bbb3712911633 [formerly 3682b1810cb2a4ff2ce1be5ac9e6722eb8d58177] Former-commit-id: e57c00eb2b91e2ef5d36277f0bec82a7b5169a74 Former-commit-id: 203b20e9910e62cba55fac1189623863fa7acda3 Former-commit-id: c23ef71c57e3ef62ea2c6f781b5106fbdcd2b67f Former-commit-id: 263ac2d19fd7517b06f47e9b3e122f0228429371 Former-commit-id: ccdaef49eebe565fad071f62b76ac0f7cba4d106
This commit is contained in:
李杨
GitHub
96
README.md
96
README.md
@@ -1,30 +1,10 @@
|
||||
<p align="center">
|
||||
<img width="550" src="http://fairyever.qiniudn.com/github-banner.png">
|
||||
</p>
|
||||
|
||||
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 |
|
||||
| --- | --- |
|
||||
| <img style="width: 200px;" src="https://raw.githubusercontent.com/FairyEver/d2-admin/dev/github/qq.jpg"/> | <img style="width: 200px;" src="https://raw.githubusercontent.com/FairyEver/d2-admin/dev/github/we.jpg"/> |
|
||||
|
||||
> 微信群需要先加群主才可以拉进群 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
|
||||
```
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
set -e
|
||||
|
||||
git add --all
|
||||
|
||||
git commit -m 'auto commit on save'
|
||||
@@ -1 +1 @@
|
||||
fa557a428388c3e73ddee4997e5feb56297e1304
|
||||
6a5c83d50f23558fd07642b7445ac467a31d9354
|
||||
1
design/d2-layout-main-group.xmind.REMOVED.git-id
Normal file
1
design/d2-layout-main-group.xmind.REMOVED.git-id
Normal file
@@ -0,0 +1 @@
|
||||
f6ee530a7841eb687cae7821453739533292ddd6
|
||||
@@ -90,6 +90,7 @@ function sideBarComponents (title) {
|
||||
children: [
|
||||
'',
|
||||
'charts',
|
||||
'charts-new',
|
||||
'container',
|
||||
'count-up',
|
||||
'highlight',
|
||||
|
||||
13
docs/zh/components/charts-new.md
Normal file
13
docs/zh/components/charts-new.md
Normal file
@@ -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，你可以直接使用
|
||||
@@ -7,6 +7,7 @@
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| type | 容器类型 | 非 | String | card ghost full | card |
|
||||
| scroll | 滚动优化 | 非 | Boolean | | false |
|
||||
| responsive | 响应式宽度 | 非 | Boolean | | false |
|
||||
|
||||
::: tip
|
||||
@@ -39,7 +40,7 @@ export default {
|
||||
</style>
|
||||
```
|
||||
|
||||
## 基础页面容器
|
||||
### 基础页面容器
|
||||
|
||||
高度根据内容适应
|
||||
|
||||
@@ -58,7 +59,7 @@ export default {
|
||||
</d2-container>
|
||||
```
|
||||
|
||||
## 自适应填充页面容器
|
||||
### 自适应填充页面容器
|
||||
|
||||
无论内容高度多少，都会自动撑满页面，并有可选的 `header` 和 `footer` 插槽
|
||||
|
||||
@@ -78,12 +79,34 @@ export default {
|
||||
</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"`
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| name | 图标名称 | 非 | String | 放在 src/assets/icons/svg 中的 .svg 文件名 | 空 |
|
||||
| name | 图标名称 | 非 | String | src/assets/icons/svg 中 .svg 文件名 | 空 |
|
||||
|
||||
## 使用方法
|
||||
|
||||
|
||||
1
docs/zh/components/image/baiduyun.png.REMOVED.git-id
Normal file
1
docs/zh/components/image/baiduyun.png.REMOVED.git-id
Normal file
@@ -0,0 +1 @@
|
||||
3a5bb0f2628d9251bbe7474c0535258784cf770b
|
||||
@@ -79,14 +79,10 @@ export default {
|
||||
> 链接: https://pan.baidu.com/s/1ggFW21l 密码: 877y
|
||||
```
|
||||
|
||||
markdown 中引用部分的文本由于被识别为百度云的分享链接，所以不会被当做 `blockquote` 渲染（非百度云链接的引用行不会改变），会以一种特别的块来显示
|
||||
markdown 中引用部分的文本由于被识别为百度云的分享链接，所以不会被当做 `blockquote` 渲染（非百度云链接的引用行不会改变），会以一种特别的块来显示，效果见下
|
||||
|
||||
就像这样
|
||||
|
||||
> https://pan.baidu.com/s/1kW6uUwB
|
||||
|
||||
上面的块会嵌套在你的 markdown 渲染结果中
|
||||
|
||||
|
||||
::: 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)
|
||||
:::
|
||||
@@ -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)
|
||||
|
||||
<div>
|
||||
<iframe src="//ghbtns.com/github-btn.html?user=FairyEver&repo=d2-admin&type=star&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
|
||||
@@ -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 文件，这个文件是为了方便发布文档用的，通常你并不需要使用它
|
||||
:::
|
||||
> 如果上述步骤出现错误，建议您升级 node 版本 > 8，如果有其它疑问请参考[常见问题](/zh/guide/question.html)
|
||||
@@ -5,6 +5,20 @@
|
||||
* [ 修改 ] 全局状态管理设计优化
|
||||
* [ 修改 ] 主题调优
|
||||
* [ 新增 ] playground 模块，方便测试和展示一些功能实现方式/调用方法
|
||||
* [ 新增 ] 多页模式
|
||||
* [ 新增 ] 多页模式缓存
|
||||
* [ 新增 ] 多页模式快速关闭（关闭左侧 右侧 全部 其它）
|
||||
* [ 修改 ] 侧边栏滚动优化
|
||||
* [ 新增 ] `d2-container` 填充模式自定义滚动条
|
||||
* [ 新增 ] `d2-container` 组件卡片和隐形模式自定义滚动条
|
||||
* [ 新增 ] 现在页面标题可以根据路由做出对应变化了
|
||||
* [ 新增 ] 版本检查机制
|
||||
* [ 新增 ] `d2-container` 隐形模式支持 header 插槽
|
||||
* [ 新增 ] 版本检查可以设置为不显示提示框
|
||||
* [ 新增 ] 集成 json 查看组件
|
||||
* [ 新增 ] 添加了所有图表种类的演示页面
|
||||
* [ 修改 ] 修改布局方式，解决了在 Firefox 上 better-scroll 初始化拿不到正确高度的 bug
|
||||
* [ 新增 ] 右上角显示用户名，用户名持久存储
|
||||
|
||||
## v1.1.3
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
## 如何贡献代码
|
||||
|
||||
首先在[项目主页](https://github.com/FairyEver/d2-admin) fork 本仓库，然后进行你的开发，请确保你的开发是在 dev 分支进行。本地测试无误后方可 pull request，我在检查通过后会合并代码到原始仓库。
|
||||
首先在[项目主页](https://github.com/FairyEver/d2-admin) fork 本仓库，然后进行你的开发，请确保你的开发是在 **dev** 分支进行。本地测试无误后方可 pull request，我在检查通过后会合并代码到原始仓库。
|
||||
|
||||
## 要求
|
||||
|
||||
|
||||
@@ -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
|
||||
```
|
||||
```
|
||||
|
||||
## 项目里有未完成的代码
|
||||
|
||||
有些示例（比如 v-charts 和 ElementUI）是很方便就可以找到官网示例和文档的，这些插件和组件的示例在本项目中就可能处于未完成的状态，但是以后会完成
|
||||
@@ -1,3 +1,7 @@
|
||||
# 插件概述
|
||||
|
||||
d2-admin（以下简称 d2admin）封装（或者集成第三方）了一些插件，方便开发者进行开发，具体组件文档请从左侧列表进入
|
||||
d2-admin（以下简称 d2admin）封装（或者集成第三方）了一些插件，方便开发者进行开发，具体组件文档请从左侧列表进入
|
||||
|
||||
::: tip
|
||||
这里只列出一部分需要特别说明的插件，大部分集成的插件都可以在网络上找到官方文档
|
||||
:::
|
||||
1
github/qq.jpg.REMOVED.git-id
Normal file
1
github/qq.jpg.REMOVED.git-id
Normal file
@@ -0,0 +1 @@
|
||||
b27de32f6832b50dc5b8b1dc613060a81f88a8e9
|
||||
1
github/we.jpg.REMOVED.git-id
Normal file
1
github/we.jpg.REMOVED.git-id
Normal file
@@ -0,0 +1 @@
|
||||
391119ecb08564a4e5d87c23be171f8ab9a4c894
|
||||
49
index.html
49
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 @@
|
||||
<div class="d2-app-loading d2-app-loading9"></div>
|
||||
</div>
|
||||
<div class="d2-app-loading-title">加载中</div>
|
||||
<div class="d2-app-loading-sub-title">初次加载会比较慢，请耐心等待</div>
|
||||
<div class="d2-app-loading-sub-title">本示例项目加载了大量的组件，初次加载会比较慢，请耐心等待</div>
|
||||
<div class="d2-app-loading-sub-info">如果很久很久都没有加载成功，请清空缓存重新加载页面</div>
|
||||
<div style="margin-top: 10px;">
|
||||
<a class="d2-app-loading-btn" href="https://github.com/FairyEver/d2-admin" target="blank">Github仓库</a>
|
||||
<a class="d2-app-loading-btn" href="https://fairyever.gitee.io/d2-admin-doc/zh/" target="blank">中文文档</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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'
|
||||
}
|
||||
]
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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%);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="d2-container-full-bs">
|
||||
<div v-if="$slots.header" class="d2-container-full-bs__header" ref="header">
|
||||
<slot name="header"/>
|
||||
</div>
|
||||
<div class="d2-container-full-bs__body" ref="wrapper">
|
||||
<div style="padding: 20px 0px;">
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="$slots.footer" class="d2-container-full-bs__footer" ref="footer">
|
||||
<slot name="footer"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 插件
|
||||
import BScroll from 'better-scroll'
|
||||
|
||||
export default {
|
||||
name: 'd2-container-full-bs',
|
||||
data () {
|
||||
return {
|
||||
BS: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.scrollInit()
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.scrollDestroy()
|
||||
},
|
||||
methods: {
|
||||
scrollInit () {
|
||||
this.BS = new BScroll(this.$refs.wrapper, {
|
||||
mouseWheel: true,
|
||||
scrollbar: {
|
||||
fade: true,
|
||||
interactive: false
|
||||
}
|
||||
})
|
||||
},
|
||||
scrollDestroy () {
|
||||
if (this.BS) {
|
||||
this.BS.destroy()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -17,29 +17,3 @@ export default {
|
||||
name: 'd2-container-full'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// [组件] d2-container-full
|
||||
.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;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
.d2-container-full__footer {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,26 +1,38 @@
|
||||
<template>
|
||||
<div class="container-component" :class="{responsive}">
|
||||
<div class="container-component" :class="{responsive}" ref="container">
|
||||
<!-- [card] 卡片容器 -->
|
||||
<el-card v-if="type === 'card'" shadow="never" class="d2-container-card d2-mr d2-mb">
|
||||
<el-card v-if="type === 'card'" shadow="never" class="d2-container-card d2-mr">
|
||||
<slot v-if="$slots.header" name="header" slot="header"/>
|
||||
<slot/>
|
||||
</el-card>
|
||||
<!-- [ghost] 隐形的容器 -->
|
||||
<div v-if="type === 'ghost'" class="d2-container-ghost">
|
||||
<slot name="header"/>
|
||||
<el-card v-if="$slots.header" shadow="never" class="d2-container-ghost-header">
|
||||
<slot name="header"/>
|
||||
</el-card>
|
||||
<slot/>
|
||||
</div>
|
||||
<!-- [container-full] 撑满 -->
|
||||
<d2-container-full v-if="type === 'full'">
|
||||
<!-- [container-full] 填充 -->
|
||||
<d2-container-full v-if="type === 'full' && !scroll">
|
||||
<slot v-if="$slots.header" name="header" slot="header"/>
|
||||
<slot/>
|
||||
<slot v-if="$slots.footer" name="footer" slot="footer"/>
|
||||
</d2-container-full>
|
||||
<!-- [container-full-bs] 填充 滚动优化 -->
|
||||
<d2-container-full-bs v-if="type === 'full' && scroll">
|
||||
<slot v-if="$slots.header" name="header" slot="header"/>
|
||||
<slot/>
|
||||
<slot v-if="$slots.footer" name="footer" slot="footer"/>
|
||||
</d2-container-full-bs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 插件
|
||||
import BScroll from 'better-scroll'
|
||||
// 组件
|
||||
import d2ContainerFull from './components/d2-container-full.vue'
|
||||
import d2ContainerFullBs from './components/d2-container-full-bs.vue'
|
||||
export default {
|
||||
name: 'd2-container',
|
||||
props: {
|
||||
@@ -30,6 +42,12 @@ export default {
|
||||
required: false,
|
||||
default: 'card'
|
||||
},
|
||||
// 滚动优化
|
||||
scroll: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
// 是否开启响应式尺寸变化
|
||||
responsive: {
|
||||
type: Boolean,
|
||||
@@ -38,21 +56,45 @@ export default {
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'd2-container-full': d2ContainerFull
|
||||
'd2-container-full': d2ContainerFull,
|
||||
'd2-container-full-bs': d2ContainerFullBs
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
BS: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.type === 'card' || this.type === 'ghost') {
|
||||
this.scrollInit()
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.type === 'card' || this.type === 'ghost') {
|
||||
this.scrollDestroy()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scrollInit () {
|
||||
this.BS = new BScroll(this.$refs.container, {
|
||||
mouseWheel: true,
|
||||
scrollbar: {
|
||||
fade: true,
|
||||
interactive: false
|
||||
}
|
||||
})
|
||||
},
|
||||
scrollDestroy () {
|
||||
if (this.BS) {
|
||||
this.BS.destroy()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/public.scss';
|
||||
.container-component {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
overflow: auto;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
// 根据你的需要在这里添加样式
|
||||
}
|
||||
|
||||
@@ -1,20 +1,16 @@
|
||||
<template>
|
||||
<div style="height: 100%;">
|
||||
<el-scrollbar v-if="menus.length > 0">
|
||||
<div :style="{ height: `${asideHeight}px` }">
|
||||
<el-menu
|
||||
:collapse="collapse"
|
||||
:unique-opened="true"
|
||||
:default-active="active"
|
||||
ref="menu"
|
||||
@select="handleMenuSelect">
|
||||
<template v-for="(menu, menuIndex) in menus">
|
||||
<d2-layout-main-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
|
||||
<d2-layout-main-menu-sub v-else :menu="menu" :key="menuIndex"/>
|
||||
</template>
|
||||
</el-menu>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<div class="d2-layout-main-menu-side">
|
||||
<el-menu
|
||||
:collapse="collapse"
|
||||
:unique-opened="true"
|
||||
:default-active="active"
|
||||
ref="menu"
|
||||
@select="handleMenuSelect">
|
||||
<template v-for="(menu, menuIndex) in menus">
|
||||
<d2-layout-main-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
|
||||
<d2-layout-main-menu-sub v-else :menu="menu" :key="menuIndex"/>
|
||||
</template>
|
||||
</el-menu>
|
||||
<div v-if="menus.length === 0 && !collapse" class="menu-empty">
|
||||
<d2-icon name="hdd-o"/>
|
||||
<span>当前目录没有菜单</span>
|
||||
@@ -28,6 +24,8 @@ import menuMixin from '../mixin/menu'
|
||||
// 组件
|
||||
import d2LayoutMainMenuItem from '../-menu-item/index.vue'
|
||||
import d2LayoutMainMenuSub from '../-menu-sub/index.vue'
|
||||
// 插件
|
||||
import BScroll from 'better-scroll'
|
||||
|
||||
export default {
|
||||
name: 'd2-layout-main-menu-side',
|
||||
@@ -49,10 +47,18 @@ export default {
|
||||
return {
|
||||
menus: [],
|
||||
active: '',
|
||||
asideHeight: 300
|
||||
asideHeight: 300,
|
||||
BS: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 折叠和展开菜单的时候销毁 better scroll
|
||||
collapse (val) {
|
||||
this.scrollDestroy()
|
||||
setTimeout(() => {
|
||||
this.scrollInit()
|
||||
}, 500)
|
||||
},
|
||||
'$route.matched': {
|
||||
handler (val) {
|
||||
const path = val[0].path
|
||||
@@ -69,17 +75,25 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.updateAsideHeight()
|
||||
window.onresize = () => {
|
||||
this.updateAsideHeight()
|
||||
}
|
||||
this.scrollInit()
|
||||
},
|
||||
beforeDestroy () {
|
||||
window.onresize = function () {}
|
||||
this.scrollDestroy()
|
||||
},
|
||||
methods: {
|
||||
updateAsideHeight () {
|
||||
this.asideHeight = this.$el.offsetHeight
|
||||
scrollInit () {
|
||||
this.BS = new BScroll(this.$el, {
|
||||
mouseWheel: true,
|
||||
scrollbar: {
|
||||
fade: true,
|
||||
interactive: false
|
||||
}
|
||||
})
|
||||
},
|
||||
scrollDestroy () {
|
||||
if (this.BS) {
|
||||
this.BS.destroy()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<el-dropdown class="d2-mr">
|
||||
<span class="btn-text">你好</span>
|
||||
<span class="btn-text">你好 {{username}}</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="logOff"><d2-icon name="power-off"/> 注销</el-dropdown-item>
|
||||
<el-dropdown-item><d2-icon name="user-circle-o"/> 个人中心</el-dropdown-item>
|
||||
@@ -9,17 +9,34 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 插件
|
||||
import Cookies from 'js-cookie'
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
username: state => state.d2admin.username
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
...mapMutations([
|
||||
'd2adminDbRemoveByUuid'
|
||||
]),
|
||||
logOff () {
|
||||
this.$confirm('注销此账户吗?', '注销', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
// 删除用户名
|
||||
this.d2adminDbRemoveByUuid({
|
||||
key: 'username',
|
||||
emptyValue: ''
|
||||
})
|
||||
// 删除cookie
|
||||
Cookies.remove('token')
|
||||
Cookies.remove('uuid')
|
||||
// 跳转路由
|
||||
this.$router.push({
|
||||
name: 'login'
|
||||
|
||||
@@ -4,7 +4,9 @@ export default {
|
||||
if (/^d2-menu-empty-\d+$/.test(index)) {
|
||||
this.$message('功能正在开发')
|
||||
} else {
|
||||
this.$router.push(index)
|
||||
this.$router.push({
|
||||
path: index
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-main-group" :style="styleLayoutMainGroup" :class="{grayMode: isGrayMode}">
|
||||
<div class="layout-main-mask"></div>
|
||||
<el-container class="layout-main">
|
||||
<div
|
||||
class="d2-layout-main-group"
|
||||
:style="styleLayoutMainGroup"
|
||||
:class="{grayMode: isGrayMode}">
|
||||
<!-- 半透明遮罩 -->
|
||||
<div class="d2-layout-main-mask"></div>
|
||||
<!-- 主体内容 -->
|
||||
<div class="d2-layout-main-content">
|
||||
<!-- 顶栏 -->
|
||||
<el-header>
|
||||
<div class="d2-theme-header">
|
||||
<div class="logo-group" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
|
||||
<img v-if="collapse" :src="`${$assetsPublicPath}static/image/theme/${themeActive.value}/logo/icon-only.png`">
|
||||
<img v-else :src="`${$assetsPublicPath}static/image/theme/${themeActive.value}/logo/all.png`">
|
||||
<img v-if="collapse" :src="`${$assetsPublicPath}static/image/theme/${themeActiveSetting.name}/logo/icon-only.png`">
|
||||
<img v-else :src="`${$assetsPublicPath}static/image/theme/${themeActiveSetting.name}/logo/all.png`">
|
||||
</div>
|
||||
<div class="toggle-aside-btn" @click="collapse = !collapse">
|
||||
<d2-icon name="bars"/>
|
||||
@@ -20,31 +25,36 @@
|
||||
<d2-layout-main-header-theme/>
|
||||
<d2-layout-main-header-user/>
|
||||
</div>
|
||||
</el-header>
|
||||
</div>
|
||||
<!-- 下面 主体 -->
|
||||
<el-container>
|
||||
<div class="d2-theme-container">
|
||||
<!-- 主体 侧边栏 -->
|
||||
<el-aside ref="aside" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
|
||||
<div ref="aside" class="d2-theme-container-aside" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
|
||||
<d2-layout-main-menu-side :collapse="collapse"/>
|
||||
</el-aside>
|
||||
</div>
|
||||
<!-- 主体 -->
|
||||
<el-main>
|
||||
<div class="d2-layout-main-header">
|
||||
<d2-multiple-page-control></d2-multiple-page-control>
|
||||
<div class="d2-theme-container-main">
|
||||
<div class="d2-theme-container-main-header">
|
||||
<d2-multiple-page-control/>
|
||||
</div>
|
||||
<div class="d2-layout-main-body">
|
||||
<div class="d2-theme-container-main-body">
|
||||
<transition name="fade-transverse">
|
||||
<router-view/>
|
||||
<keep-alive>
|
||||
<router-view v-if="alive"/>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
<transition name="fade-transverse">
|
||||
<router-view v-if="!alive"/>
|
||||
</transition>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
export default {
|
||||
name: 'd2-layout-main',
|
||||
components: {
|
||||
@@ -67,25 +77,26 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeActive: state => state.d2admin.themeActive,
|
||||
isGrayMode: state => state.d2admin.isGrayMode
|
||||
}),
|
||||
...mapGetters([
|
||||
'themeActiveSetting'
|
||||
]),
|
||||
styleLayoutMainGroup () {
|
||||
return {
|
||||
...this.themeActive.backgroundImage ? {
|
||||
backgroundImage: `url('${this.$assetsPublicPath}${this.themeActive.backgroundImage}')`
|
||||
...this.themeActiveSetting.backgroundImage ? {
|
||||
backgroundImage: `url('${this.$assetsPublicPath}${this.themeActiveSetting.backgroundImage}')`
|
||||
} : {}
|
||||
}
|
||||
},
|
||||
alive () {
|
||||
if (this.$route.meta) {
|
||||
if (this.$route.meta.alive) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 加载主题
|
||||
this.d2adminThemeLoad()
|
||||
},
|
||||
methods: {
|
||||
...mapMutations([
|
||||
'd2adminThemeLoad'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,20 +1,51 @@
|
||||
<template>
|
||||
<el-tabs
|
||||
class="d2-multiple-page-control"
|
||||
v-model="activeName"
|
||||
type="card"
|
||||
@tab-click="handleClick">
|
||||
<el-tab-pane
|
||||
v-for="(page, index) in pageOpenedList"
|
||||
:key="index"
|
||||
:label="page.title"
|
||||
:name="page.name">
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="d2-multiple-page-control-group">
|
||||
<div class="d2-multiple-page-control-content">
|
||||
<div class="d2-multiple-page-control-content-inner">
|
||||
<el-tabs
|
||||
class="d2-multiple-page-control"
|
||||
:value="pageCurrent"
|
||||
type="card"
|
||||
:closable="true"
|
||||
@tab-click="handleClick"
|
||||
@edit="handleTabsEdit">
|
||||
<el-tab-pane
|
||||
v-for="(page, index) in pageOpenedList"
|
||||
:key="index"
|
||||
:label="page.meta.title || '未命名'"
|
||||
:name="page.name">
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d2-multiple-page-control-btn">
|
||||
<el-dropdown split-button @click="handleControlBtnClick" @command="handleControlItemClick">
|
||||
<d2-icon name="times-circle"/>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="left">
|
||||
<d2-icon name="arrow-left" class="d2-mr-10"/>
|
||||
关闭左侧
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="right">
|
||||
<d2-icon name="arrow-right" class="d2-mr-10"/>
|
||||
关闭右侧
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="other">
|
||||
<d2-icon name="times" class="d2-mr-10"/>
|
||||
关闭其它
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="all">
|
||||
<d2-icon name="times-circle" class="d2-mr-10"/>
|
||||
全部关闭
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
@@ -23,12 +54,128 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
pageOpenedList: state => state.d2admin.pageOpenedList
|
||||
pageOpenedList: state => state.d2admin.pageOpenedList,
|
||||
pageCurrent: state => state.d2admin.pageCurrent
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* @description 接收点击关闭控制上选项的事件
|
||||
*/
|
||||
handleControlItemClick (command) {
|
||||
switch (command) {
|
||||
case 'left':
|
||||
this.closeAllTagLeft()
|
||||
break
|
||||
case 'right':
|
||||
this.closeAllTagRight()
|
||||
break
|
||||
case 'other':
|
||||
this.closeAllTagOther()
|
||||
break
|
||||
case 'all':
|
||||
this.closeAllTag()
|
||||
break
|
||||
default:
|
||||
console.log('无效指令')
|
||||
break
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description 接收点击关闭控制上按钮的事件
|
||||
*/
|
||||
handleControlBtnClick () {
|
||||
// 关闭所有
|
||||
this.closeAllTag()
|
||||
},
|
||||
/**
|
||||
* @description 接收点击 tab 标签的事件
|
||||
*/
|
||||
handleClick (tab, event) {
|
||||
// console.log(tab, event)
|
||||
const page = this.pageOpenedList.find(page => page.name === tab.name)
|
||||
if (page) {
|
||||
this.$router.push({
|
||||
name: page.name,
|
||||
params: page.argu,
|
||||
query: page.query
|
||||
})
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description 点击 tab 上的删除按钮后首先触发这里
|
||||
*/
|
||||
handleTabsEdit (tagName, action) {
|
||||
if (action === 'remove') {
|
||||
// 首页的删除按钮已经隐藏 因此这里不用判断是 index
|
||||
this.closeTag(tagName)
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description 关闭左侧的 tag
|
||||
*/
|
||||
closeAllTagLeft () {
|
||||
this.$store.commit('d2adminTagCloseLeft')
|
||||
},
|
||||
/**
|
||||
* @description 关闭右侧的 tag
|
||||
*/
|
||||
closeAllTagRight () {
|
||||
this.$store.commit('d2adminTagCloseRight')
|
||||
},
|
||||
/**
|
||||
* @description 关闭其它的 tag
|
||||
*/
|
||||
closeAllTagOther () {
|
||||
this.$store.commit('d2adminTagCloseOther')
|
||||
},
|
||||
/**
|
||||
* @description 关闭全部的 tag
|
||||
*/
|
||||
closeAllTag () {
|
||||
this.$store.commit('d2adminTagCloseAll')
|
||||
this.$router.push({
|
||||
name: 'index'
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @description 关闭一个指定的 tag
|
||||
*/
|
||||
closeTag (tagName) {
|
||||
// 下个新的页面
|
||||
let newPage = this.pageOpenedList[0]
|
||||
// 如果关闭的页面就是当前显示的页面
|
||||
if (this.pageCurrent === tagName) {
|
||||
// 去找一个新的页面
|
||||
let len = this.pageOpenedList.length
|
||||
for (let i = 1; i < len; i++) {
|
||||
if (this.pageOpenedList[i].name === tagName) {
|
||||
if (i < len - 1) {
|
||||
newPage = this.pageOpenedList[i + 1]
|
||||
} else {
|
||||
newPage = this.pageOpenedList[i - 1]
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 关闭的页面不是当前的页面
|
||||
// 这里暂时不需要做什么
|
||||
}
|
||||
this.$store.commit('d2adminTagClose', tagName)
|
||||
if (this.pageCurrent === tagName) {
|
||||
this.linkTo(newPage)
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description 跳转到新的页面
|
||||
*/
|
||||
linkTo ({ name = '', argu = {}, query = {} }) {
|
||||
let routerObj = {
|
||||
name,
|
||||
params: argu,
|
||||
query
|
||||
}
|
||||
this.$router.push(routerObj)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<el-table :data="themeList" v-bind="table">
|
||||
<el-table-column prop="name" align="center" width="160"/>
|
||||
<el-table-column prop="title" align="center" width="160"/>
|
||||
<el-table-column label="预览" width="120">
|
||||
<div
|
||||
slot-scope="scope"
|
||||
@@ -10,8 +10,8 @@
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-if="themeActive.value === scope.row.value" type="success" icon="el-icon-check" round>已激活</el-button>
|
||||
<el-button v-else round @click="handleSelectTheme(scope.row.value)">使用</el-button>
|
||||
<el-button v-if="themeActiveName === scope.row.name" type="success" icon="el-icon-check" round>已激活</el-button>
|
||||
<el-button v-else round @click="handleSelectTheme(scope.row.name)">使用</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -32,15 +32,15 @@ export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
themeList: state => state.d2admin.themeList,
|
||||
themeActive: state => state.d2admin.themeActive
|
||||
themeActiveName: state => state.d2admin.themeActiveName
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
...mapMutations([
|
||||
'd2adminThemeSet'
|
||||
]),
|
||||
handleSelectTheme (value) {
|
||||
this.d2adminThemeSet(value)
|
||||
handleSelectTheme (name) {
|
||||
this.d2adminThemeSet(name)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,8 +5,10 @@ const adapter = new LocalStorage('d2admin')
|
||||
const db = low(adapter)
|
||||
|
||||
db.defaults({
|
||||
themeActive: [],
|
||||
pageOpenedList: []
|
||||
themeActiveName: [],
|
||||
pageOpenedList: [],
|
||||
updateNotify: [],
|
||||
username: []
|
||||
})
|
||||
.write()
|
||||
|
||||
|
||||
101
src/libs/util.js
101
src/libs/util.js
@@ -1,16 +1,32 @@
|
||||
// 插件
|
||||
import Cookies from 'js-cookie'
|
||||
import axios from 'axios'
|
||||
import semver from 'semver'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
// 获取项目信息
|
||||
import packJson from '../../package.json'
|
||||
|
||||
let util = {}
|
||||
|
||||
/**
|
||||
* 得到现在的用户
|
||||
* @description 得到现在的用户
|
||||
*/
|
||||
util.uuid = function () {
|
||||
return Cookies.get('uuid')
|
||||
}
|
||||
|
||||
/**
|
||||
* 打开全屏
|
||||
* @description 更新标题
|
||||
* @param {string} title 标题
|
||||
*/
|
||||
util.title = function (title) {
|
||||
const prefix = 'D2Admin'
|
||||
window.document.title = `${prefix}${title ? ` | ${title}` : ''}`
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 打开全屏
|
||||
*/
|
||||
util.openFullScreen = function () {
|
||||
const body = document.body
|
||||
@@ -26,7 +42,7 @@ util.openFullScreen = function () {
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭全屏
|
||||
* @description 关闭全屏
|
||||
*/
|
||||
util.exitFullScreen = function () {
|
||||
if (document.exitFullscreen) {
|
||||
@@ -41,7 +57,7 @@ util.exitFullScreen = function () {
|
||||
}
|
||||
|
||||
/**
|
||||
* 在每次打开新页面的时候调用 打开一个新的 tab
|
||||
* @description 在每次打开新页面的时候调用 打开一个新的 tab
|
||||
* @param {object} vm vue
|
||||
* @param {string} name route name
|
||||
* @param {object} argu arguments
|
||||
@@ -58,23 +74,72 @@ util.openNewPage = function (vm, name, argu, query) {
|
||||
return same
|
||||
})
|
||||
if (pageOpend) {
|
||||
// 页面以前打开过
|
||||
console.group('page opend')
|
||||
console.log('pageOpendIndex: ', pageOpendIndex)
|
||||
console.groupEnd()
|
||||
// 虽然页面以前打开过
|
||||
// 但是新的页面可能 name 一样，参数不一样
|
||||
vm.$store.commit('d2adminpageOpenedListUpdateItem', {
|
||||
index: pageOpendIndex,
|
||||
argu: argu,
|
||||
query: query
|
||||
})
|
||||
// 页面以前打开过 但是新的页面可能 name 一样，参数不一样
|
||||
vm.$store.commit('d2adminPageOpenedListUpdateItem', { index: pageOpendIndex, argu, query })
|
||||
} else {
|
||||
// 页面以前没有打开过
|
||||
console.group('page not opend')
|
||||
console.log('pageOpendIndex: ', pageOpendIndex)
|
||||
console.groupEnd()
|
||||
const tagPool = vm.$store.state.d2admin.tagPool
|
||||
let tag = tagPool.find(t => t.name === name)
|
||||
if (tag) {
|
||||
vm.$store.commit('d2adminTagIncreate', { tag, argu, query })
|
||||
}
|
||||
}
|
||||
vm.$store.commit('d2adminPageCurrentSet', name)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 判断是否在其内
|
||||
* @param {*} ele element
|
||||
* @param {array} targetArr array
|
||||
*/
|
||||
util.isOneOf = function (ele, targetArr) {
|
||||
if (targetArr.indexOf(ele) >= 0) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 检查版本更新
|
||||
* @param {object} vm vue
|
||||
*/
|
||||
// TODO: 添加 跳过此版本 选项
|
||||
util.checkUpdate = function (vm) {
|
||||
axios.get('https://api.github.com/repos/FairyEver/d2-admin/releases/latest')
|
||||
.then(res => {
|
||||
let version = res.tag_name
|
||||
const update = semver.lt(packJson.version, version)
|
||||
if (vm.$env === 'development' && update && vm.$store.state.d2admin.updateNotify) {
|
||||
vm.$nextTick(() => {
|
||||
vm.$notify({
|
||||
title: `D2Admin 新版本 ${res.name}`,
|
||||
duration: 0,
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: `
|
||||
<p>当前版本: ${packJson.version}</p>
|
||||
<p>${dayjs(res.created_at).format('YYYY年M月D日')}更新 版本号: ${res.tag_name}</p>
|
||||
<p style="color: #CCC;">此信息只在开发环境提示</p>
|
||||
<p>
|
||||
<a
|
||||
href="${res.html_url}"
|
||||
class="el-button el-button--primary el-button--mini"
|
||||
style="text-decoration: none; margin-top: 10px;"
|
||||
target="blank">
|
||||
<i class="fa fa-link" style="margin-right: 5px;"></i>
|
||||
详细信息
|
||||
</a>
|
||||
</p>
|
||||
`.trim()
|
||||
})
|
||||
})
|
||||
}
|
||||
vm.$store.commit('d2adminUpdateSet', update)
|
||||
vm.$store.commit('d2adminReleasesSet', res)
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('checkUpdate error', err)
|
||||
})
|
||||
}
|
||||
|
||||
export default util
|
||||
|
||||
67
src/main.js
67
src/main.js
@@ -1,10 +1,25 @@
|
||||
// polyfill
|
||||
import 'babel-polyfill'
|
||||
|
||||
// Vue
|
||||
import Vue from 'vue'
|
||||
import App from './App'
|
||||
import router from './router'
|
||||
|
||||
// 多国语
|
||||
import i18n from './i18n'
|
||||
|
||||
// 工具
|
||||
import util from '@/libs/util'
|
||||
|
||||
// vuex
|
||||
import store from '@/store/index'
|
||||
|
||||
// 路由
|
||||
import router from './router'
|
||||
// 框架内的路由
|
||||
import { frameInRoutes } from '@/router/routes'
|
||||
|
||||
// ElementUI
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
|
||||
@@ -18,7 +33,7 @@ import '@/assets/library/font-awesome-4.7.0/css/font-awesome.min.css'
|
||||
import 'simplemde/dist/simplemde.min.css'
|
||||
|
||||
// svg图标
|
||||
import '@/assets/icons/index.js'
|
||||
import '@/assets/icons/index'
|
||||
|
||||
// markdown主题
|
||||
import 'github-markdown-css'
|
||||
@@ -35,9 +50,6 @@ import '@/plugin/axios'
|
||||
// mock接口设置
|
||||
import '@/mock/register'
|
||||
|
||||
// vuex
|
||||
import store from '@/store/index.js'
|
||||
|
||||
// 右键菜单
|
||||
import contentmenu from 'v-contextmenu'
|
||||
import 'v-contextmenu/dist/index.css'
|
||||
@@ -52,7 +64,10 @@ import pluginLog from '@/plugin/log'
|
||||
import pluginOpen from '@/plugin/open'
|
||||
// 插件 支持百万级数据的表格
|
||||
import bigdataTable from '@/plugin/vue-bigdata-table'
|
||||
// 插件 json 展示
|
||||
import vueJsonTreeView from 'vue-json-tree-view'
|
||||
|
||||
// 打包的设置 用户获取路径
|
||||
import buildConfig from '../config/index'
|
||||
|
||||
Vue.use(ElementUI)
|
||||
@@ -64,10 +79,11 @@ Vue.use(pluginExport)
|
||||
Vue.use(pluginLog)
|
||||
Vue.use(pluginOpen)
|
||||
Vue.use(bigdataTable)
|
||||
Vue.use(vueJsonTreeView)
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
Vue.prototype.$env = process.env.NODE_ENV === 'development'
|
||||
Vue.prototype.$env = process.env.NODE_ENV
|
||||
|
||||
Vue.prototype.$assetsPublicPath = process.env.NODE_ENV === 'development' ? buildConfig.dev.assetsPublicPath : buildConfig.build.assetsPublicPath
|
||||
|
||||
@@ -78,5 +94,42 @@ new Vue({
|
||||
i18n,
|
||||
router,
|
||||
template: '<App/>',
|
||||
components: { App }
|
||||
components: { App },
|
||||
created () {
|
||||
// 处理路由 得到每一级的路由设置
|
||||
this.getAllTagFromRoutes()
|
||||
},
|
||||
mounted () {
|
||||
// DB -> store 加载用户名
|
||||
this.$store.commit('d2adminUsernameLoad')
|
||||
// DB -> store 加载版本更新弹窗的设置
|
||||
this.$store.commit('d2adminUpdateNotifyLoad')
|
||||
// DB -> store 加载主题
|
||||
this.$store.commit('d2adminThemeLoad')
|
||||
// DB -> store 数据库加载上次退出时的多页列表
|
||||
this.$store.commit('d2adminPageOpenedListLoad')
|
||||
// D2Admin 开发环境检查更新
|
||||
util.checkUpdate(this)
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 处理路由 得到每一级的路由设置
|
||||
*/
|
||||
getAllTagFromRoutes () {
|
||||
// 所有加载在主框架内的页面
|
||||
const tagPool = []
|
||||
const push = function (routes) {
|
||||
routes.forEach(route => {
|
||||
if (route.children) {
|
||||
push(route.children)
|
||||
} else {
|
||||
const { meta, name, path } = route
|
||||
tagPool.push({ meta, name, path })
|
||||
}
|
||||
})
|
||||
}
|
||||
push(frameInRoutes)
|
||||
this.$store.commit('d2adminTagPoolSet', tagPool)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1 +1 @@
|
||||
7562f0a732bab9f663056b29032ad38a3cfcae86
|
||||
2033bbd20e953d52d9c21146b8048ee1a1f8aa5b
|
||||
@@ -48,6 +48,8 @@ require('particles.js')
|
||||
// https://vincentgarreau.com/particles.js/#default
|
||||
import config from './config/default'
|
||||
import Cookies from 'js-cookie'
|
||||
import { mapMutations } from 'vuex'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
@@ -74,6 +76,9 @@ export default {
|
||||
particlesJS('login', config)
|
||||
},
|
||||
methods: {
|
||||
...mapMutations([
|
||||
'd2adminUsernameSet'
|
||||
]),
|
||||
// 提交登陆信息
|
||||
submit () {
|
||||
this.$refs.loginForm.validate((valid) => {
|
||||
@@ -93,8 +98,11 @@ export default {
|
||||
const setting = {
|
||||
expires: 1
|
||||
}
|
||||
// 设置 cookie
|
||||
Cookies.set('uuid', res.uuid, setting)
|
||||
Cookies.set('token', res.token, setting)
|
||||
// 设置 vuex
|
||||
this.d2adminUsernameSet(res.name)
|
||||
// 跳转路由
|
||||
this.$router.push({
|
||||
name: 'index'
|
||||
|
||||
9
src/pages/core/setting/index/index.vue
Normal file
9
src/pages/core/setting/index/index.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<d2-demo-page-cover
|
||||
title="设置"
|
||||
sub-title="系统设置">
|
||||
<img :src="`${$assetsPublicPath}static/image/icon/500/setting.png`">
|
||||
</d2-demo-page-cover>
|
||||
</d2-container>
|
||||
</template>
|
||||
74
src/pages/core/setting/releases/index.vue
Normal file
74
src/pages/core/setting/releases/index.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<d2-container type="full" class="page">
|
||||
<template slot="header">D2Admin 版本检查</template>
|
||||
<div class="banner">
|
||||
<img :src="`${$assetsPublicPath}static/image/icon/500/d2admin.png`">
|
||||
</div>
|
||||
<div v-if="update" class="releases">
|
||||
<h1>有新版本 {{releases.tag_name}}</h1>
|
||||
<p>更新日期 {{dayjs(releases.created_at).format('YYYY年M月D日')}}</p>
|
||||
<a :href="releases.html_url" class="el-button el-button--primary d2-mb">{{releases.html_url}}</a>
|
||||
<d2-markdown key="update" :source="releases.body"/>
|
||||
</div>
|
||||
<div v-else class="up2date">
|
||||
<d2-markdown key="noupdate" :source="up2date"/>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<el-button
|
||||
:type="updateNotify ? 'primary' : 'default'"
|
||||
size="mini"
|
||||
@click="d2adminUpdateNotifySet(!updateNotify)">
|
||||
{{updateNotify ? '关闭更新提醒 (当前:打开)' : '打开更新提醒 (当前:关闭)'}}
|
||||
</el-button>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import up2date from './md/up-to-date.md'
|
||||
import dayjs from 'dayjs'
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
dayjs,
|
||||
up2date
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
version: state => state.d2admin.version,
|
||||
releases: state => state.d2admin.releases,
|
||||
update: state => state.d2admin.update,
|
||||
updateNotify: state => state.d2admin.updateNotify
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
...mapMutations([
|
||||
'd2adminUpdateNotifySet'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/public.scss';
|
||||
.page {
|
||||
.banner {
|
||||
text-align: center;
|
||||
img {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
.releases {
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
background-color: $color-bg;
|
||||
}
|
||||
.up2date {
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
background-color: $color-bg;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
9
src/pages/core/setting/releases/md/up-to-date.md
Normal file
9
src/pages/core/setting/releases/md/up-to-date.md
Normal file
@@ -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)
|
||||
26
src/pages/core/setting/theme/custom.vue
Normal file
26
src/pages/core/setting/theme/custom.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<d2-container type="full" class="page">
|
||||
custom theme setting coming soon
|
||||
</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>
|
||||
5
src/pages/core/setting/theme/theme.vue
Normal file
5
src/pages/core/setting/theme/theme.vue
Normal file
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<d2-theme-list/>
|
||||
</d2-container>
|
||||
</template>
|
||||
77
src/pages/demo/charts/list/candle/demo1/index.vue
Normal file
77
src/pages/demo/charts/list/candle/demo1/index.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">一般</template>
|
||||
<div class="inner">
|
||||
<ve-candle :data="chartData" v-bind="pubSetting"></ve-candle>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
|
||||
rows: [
|
||||
{ '日期': '2004-01-05', open: 10411.85, close: 10544.07, lowest: 10411.85, highest: 10575.92, vol: 221290000 },
|
||||
{ '日期': '2004-01-06', open: 10543.85, close: 10538.66, lowest: 10454.37, highest: 10584.07, vol: 191460000 },
|
||||
{ '日期': '2004-01-07', open: 10535.46, close: 10529.03, lowest: 10432.12, highest: 10587.55, vol: 225490000 },
|
||||
{ '日期': '2004-01-08', open: 10530.07, close: 10592.44, lowest: 10480.59, highest: 10651.99, vol: 237770000 },
|
||||
{ '日期': '2004-01-09', open: 10589.25, close: 10458.89, lowest: 10420.52, highest: 10603.48, vol: 223250000 },
|
||||
{ '日期': '2004-01-12', open: 10461.55, close: 10485.18, lowest: 10389.85, highest: 10543.03, vol: 197960000 },
|
||||
{ '日期': '2004-01-13', open: 10485.18, close: 10427.18, lowest: 10341.19, highest: 10539.25, vol: 197310000 },
|
||||
{ '日期': '2004-01-14', open: 10428.67, close: 10538.37, lowest: 10426.89, highest: 10573.85, vol: 186280000 },
|
||||
{ '日期': '2004-01-15', open: 10534.52, close: 10553.85, lowest: 10454.52, highest: 10639.03, vol: 260090000 },
|
||||
{ '日期': '2004-01-16', open: 10556.37, close: 10600.51, lowest: 10503.71, highest: 10666.88, vol: 254170000 },
|
||||
{ '日期': '2004-01-20', open: 10601.42, close: 10528.66, lowest: 10447.92, highest: 10676.96, vol: 224300000 },
|
||||
{ '日期': '2004-01-21', open: 10522.77, close: 10623.62, lowest: 10453.11, highest: 10665.72, vol: 214920000 },
|
||||
{ '日期': '2004-01-22', open: 10624.22, close: 10623.18, lowest: 10545.03, highest: 10717.41, vol: 219720000 },
|
||||
{ '日期': '2004-01-23', open: 10625.25, close: 10568.29, lowest: 10490.14, highest: 10691.77, vol: 234260000 },
|
||||
{ '日期': '2004-01-26', open: 10568.12, close: 10702.51, lowest: 10510.44, highest: 10725.18, vol: 186170000 },
|
||||
{ '日期': '2004-01-27', open: 10701.11, close: 10609.92, lowest: 10579.33, highest: 10748.81, vol: 206560000 },
|
||||
{ '日期': '2004-01-28', open: 10610.07, close: 10468.37, lowest: 10412.44, highest: 10703.25, vol: 247660000 },
|
||||
{ '日期': '2004-01-29', open: 10467.41, close: 10510.29, lowest: 10369.92, highest: 10611.56, vol: 273970000 },
|
||||
{ '日期': '2004-01-30', open: 10510.22, close: 10488.07, lowest: 10385.56, highest: 10551.03, vol: 208990000 },
|
||||
{ '日期': '2004-02-02', open: 10487.78, close: 10499.18, lowest: 10395.55, highest: 10614.44, vol: 224800000 },
|
||||
{ '日期': '2004-02-03', open: 10499.48, close: 10505.18, lowest: 10414.15, highest: 10571.48, vol: 183810000 },
|
||||
{ '日期': '2004-02-04', open: 10503.11, close: 10470.74, lowest: 10394.81, highest: 10567.85, vol: 227760000 },
|
||||
{ '日期': '2004-02-05', open: 10469.33, close: 10495.55, lowest: 10399.92, highest: 10566.37, vol: 187810000 },
|
||||
{ '日期': '2004-02-06', open: 10494.89, close: 10593.03, lowest: 10433.74, highest: 10634.81, vol: 182880000 },
|
||||
{ '日期': '2004-02-09', open: 10592.41, close: 10579.03, lowest: 10433.72, highest: 10634.81, vol: 160720000 },
|
||||
{ '日期': '2004-02-10', open: 10578.74, close: 10613.85, lowest: 10511.18, highest: 10667.03, vol: 160590000 },
|
||||
{ '日期': '2004-02-11', open: 10605.48, close: 10737.72, lowest: 10561.55, highest: 10779.41, vol: 277850000 },
|
||||
{ '日期': '2004-02-12', open: 10735.18, close: 10694.07, lowest: 10636.44, highest: 10775.03, vol: 197560000 },
|
||||
{ '日期': '2004-02-13', open: 10696.22, close: 10627.85, lowest: 10578.66, highest: 10755.47, vol: 208340000 },
|
||||
{ '日期': '2004-02-17', open: 10628.88, close: 10714.88, lowest: 10628.88, highest: 10762.07, vol: 169730000 },
|
||||
{ '日期': '2004-02-18', open: 10706.68, close: 10671.99, lowest: 10623.62, highest: 10764.36, vol: 164370000 },
|
||||
{ '日期': '2004-02-19', open: 10674.59, close: 10664.73, lowest: 10626.44, highest: 10794.95, vol: 219890000 },
|
||||
{ '日期': '2004-02-20', open: 10666.29, close: 10619.03, lowest: 10559.11, highest: 10722.77, vol: 220560000 },
|
||||
{ '日期': '2004-02-23', open: 10619.55, close: 10609.62, lowest: 10508.89, highest: 10711.84, vol: 229950000 },
|
||||
{ '日期': '2004-02-24', open: 10609.55, close: 10566.37, lowest: 10479.33, highest: 10681.41, vol: 225670000 },
|
||||
{ '日期': '2004-02-25', open: 10566.59, close: 10601.62, lowest: 10509.42, highest: 10660.73, vol: 192420000 },
|
||||
{ '日期': '2004-02-26', open: 10598.14, close: 10580.14, lowest: 10493.71, highest: 10652.96, vol: 223230000 },
|
||||
{ '日期': '2004-02-27', open: 10581.55, close: 10583.92, lowest: 10519.03, highest: 10689.55, vol: 200050000 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
81
src/pages/demo/charts/list/candle/demo2/index.vue
Normal file
81
src/pages/demo/charts/list/candle/demo2/index.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">显示 MA VOL</template>
|
||||
<div class="inner">
|
||||
<ve-candle :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-candle>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
showMA: true,
|
||||
showVol: true
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
|
||||
rows: [
|
||||
{ '日期': '2004-01-05', open: 10411.85, close: 10544.07, lowest: 10411.85, highest: 10575.92, vol: 221290000 },
|
||||
{ '日期': '2004-01-06', open: 10543.85, close: 10538.66, lowest: 10454.37, highest: 10584.07, vol: 191460000 },
|
||||
{ '日期': '2004-01-07', open: 10535.46, close: 10529.03, lowest: 10432.12, highest: 10587.55, vol: 225490000 },
|
||||
{ '日期': '2004-01-08', open: 10530.07, close: 10592.44, lowest: 10480.59, highest: 10651.99, vol: 237770000 },
|
||||
{ '日期': '2004-01-09', open: 10589.25, close: 10458.89, lowest: 10420.52, highest: 10603.48, vol: 223250000 },
|
||||
{ '日期': '2004-01-12', open: 10461.55, close: 10485.18, lowest: 10389.85, highest: 10543.03, vol: 197960000 },
|
||||
{ '日期': '2004-01-13', open: 10485.18, close: 10427.18, lowest: 10341.19, highest: 10539.25, vol: 197310000 },
|
||||
{ '日期': '2004-01-14', open: 10428.67, close: 10538.37, lowest: 10426.89, highest: 10573.85, vol: 186280000 },
|
||||
{ '日期': '2004-01-15', open: 10534.52, close: 10553.85, lowest: 10454.52, highest: 10639.03, vol: 260090000 },
|
||||
{ '日期': '2004-01-16', open: 10556.37, close: 10600.51, lowest: 10503.71, highest: 10666.88, vol: 254170000 },
|
||||
{ '日期': '2004-01-20', open: 10601.42, close: 10528.66, lowest: 10447.92, highest: 10676.96, vol: 224300000 },
|
||||
{ '日期': '2004-01-21', open: 10522.77, close: 10623.62, lowest: 10453.11, highest: 10665.72, vol: 214920000 },
|
||||
{ '日期': '2004-01-22', open: 10624.22, close: 10623.18, lowest: 10545.03, highest: 10717.41, vol: 219720000 },
|
||||
{ '日期': '2004-01-23', open: 10625.25, close: 10568.29, lowest: 10490.14, highest: 10691.77, vol: 234260000 },
|
||||
{ '日期': '2004-01-26', open: 10568.12, close: 10702.51, lowest: 10510.44, highest: 10725.18, vol: 186170000 },
|
||||
{ '日期': '2004-01-27', open: 10701.11, close: 10609.92, lowest: 10579.33, highest: 10748.81, vol: 206560000 },
|
||||
{ '日期': '2004-01-28', open: 10610.07, close: 10468.37, lowest: 10412.44, highest: 10703.25, vol: 247660000 },
|
||||
{ '日期': '2004-01-29', open: 10467.41, close: 10510.29, lowest: 10369.92, highest: 10611.56, vol: 273970000 },
|
||||
{ '日期': '2004-01-30', open: 10510.22, close: 10488.07, lowest: 10385.56, highest: 10551.03, vol: 208990000 },
|
||||
{ '日期': '2004-02-02', open: 10487.78, close: 10499.18, lowest: 10395.55, highest: 10614.44, vol: 224800000 },
|
||||
{ '日期': '2004-02-03', open: 10499.48, close: 10505.18, lowest: 10414.15, highest: 10571.48, vol: 183810000 },
|
||||
{ '日期': '2004-02-04', open: 10503.11, close: 10470.74, lowest: 10394.81, highest: 10567.85, vol: 227760000 },
|
||||
{ '日期': '2004-02-05', open: 10469.33, close: 10495.55, lowest: 10399.92, highest: 10566.37, vol: 187810000 },
|
||||
{ '日期': '2004-02-06', open: 10494.89, close: 10593.03, lowest: 10433.74, highest: 10634.81, vol: 182880000 },
|
||||
{ '日期': '2004-02-09', open: 10592.41, close: 10579.03, lowest: 10433.72, highest: 10634.81, vol: 160720000 },
|
||||
{ '日期': '2004-02-10', open: 10578.74, close: 10613.85, lowest: 10511.18, highest: 10667.03, vol: 160590000 },
|
||||
{ '日期': '2004-02-11', open: 10605.48, close: 10737.72, lowest: 10561.55, highest: 10779.41, vol: 277850000 },
|
||||
{ '日期': '2004-02-12', open: 10735.18, close: 10694.07, lowest: 10636.44, highest: 10775.03, vol: 197560000 },
|
||||
{ '日期': '2004-02-13', open: 10696.22, close: 10627.85, lowest: 10578.66, highest: 10755.47, vol: 208340000 },
|
||||
{ '日期': '2004-02-17', open: 10628.88, close: 10714.88, lowest: 10628.88, highest: 10762.07, vol: 169730000 },
|
||||
{ '日期': '2004-02-18', open: 10706.68, close: 10671.99, lowest: 10623.62, highest: 10764.36, vol: 164370000 },
|
||||
{ '日期': '2004-02-19', open: 10674.59, close: 10664.73, lowest: 10626.44, highest: 10794.95, vol: 219890000 },
|
||||
{ '日期': '2004-02-20', open: 10666.29, close: 10619.03, lowest: 10559.11, highest: 10722.77, vol: 220560000 },
|
||||
{ '日期': '2004-02-23', open: 10619.55, close: 10609.62, lowest: 10508.89, highest: 10711.84, vol: 229950000 },
|
||||
{ '日期': '2004-02-24', open: 10609.55, close: 10566.37, lowest: 10479.33, highest: 10681.41, vol: 225670000 },
|
||||
{ '日期': '2004-02-25', open: 10566.59, close: 10601.62, lowest: 10509.42, highest: 10660.73, vol: 192420000 },
|
||||
{ '日期': '2004-02-26', open: 10598.14, close: 10580.14, lowest: 10493.71, highest: 10652.96, vol: 223230000 },
|
||||
{ '日期': '2004-02-27', open: 10581.55, close: 10583.92, lowest: 10519.03, highest: 10689.55, vol: 200050000 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
88
src/pages/demo/charts/list/candle/demo3/index.vue
Normal file
88
src/pages/demo/charts/list/candle/demo3/index.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">修改指标名和图例文字</template>
|
||||
<div class="inner">
|
||||
<ve-candle :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-candle>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
showMA: true,
|
||||
showVol: true,
|
||||
labelMap: {
|
||||
MA5: 'ma5'
|
||||
},
|
||||
legendName: {
|
||||
'日K': 'day k'
|
||||
},
|
||||
showDataZoom: true
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
|
||||
rows: [
|
||||
{ '日期': '2004-01-05', open: 10411.85, close: 10544.07, lowest: 10411.85, highest: 10575.92, vol: 221290000 },
|
||||
{ '日期': '2004-01-06', open: 10543.85, close: 10538.66, lowest: 10454.37, highest: 10584.07, vol: 191460000 },
|
||||
{ '日期': '2004-01-07', open: 10535.46, close: 10529.03, lowest: 10432.12, highest: 10587.55, vol: 225490000 },
|
||||
{ '日期': '2004-01-08', open: 10530.07, close: 10592.44, lowest: 10480.59, highest: 10651.99, vol: 237770000 },
|
||||
{ '日期': '2004-01-09', open: 10589.25, close: 10458.89, lowest: 10420.52, highest: 10603.48, vol: 223250000 },
|
||||
{ '日期': '2004-01-12', open: 10461.55, close: 10485.18, lowest: 10389.85, highest: 10543.03, vol: 197960000 },
|
||||
{ '日期': '2004-01-13', open: 10485.18, close: 10427.18, lowest: 10341.19, highest: 10539.25, vol: 197310000 },
|
||||
{ '日期': '2004-01-14', open: 10428.67, close: 10538.37, lowest: 10426.89, highest: 10573.85, vol: 186280000 },
|
||||
{ '日期': '2004-01-15', open: 10534.52, close: 10553.85, lowest: 10454.52, highest: 10639.03, vol: 260090000 },
|
||||
{ '日期': '2004-01-16', open: 10556.37, close: 10600.51, lowest: 10503.71, highest: 10666.88, vol: 254170000 },
|
||||
{ '日期': '2004-01-20', open: 10601.42, close: 10528.66, lowest: 10447.92, highest: 10676.96, vol: 224300000 },
|
||||
{ '日期': '2004-01-21', open: 10522.77, close: 10623.62, lowest: 10453.11, highest: 10665.72, vol: 214920000 },
|
||||
{ '日期': '2004-01-22', open: 10624.22, close: 10623.18, lowest: 10545.03, highest: 10717.41, vol: 219720000 },
|
||||
{ '日期': '2004-01-23', open: 10625.25, close: 10568.29, lowest: 10490.14, highest: 10691.77, vol: 234260000 },
|
||||
{ '日期': '2004-01-26', open: 10568.12, close: 10702.51, lowest: 10510.44, highest: 10725.18, vol: 186170000 },
|
||||
{ '日期': '2004-01-27', open: 10701.11, close: 10609.92, lowest: 10579.33, highest: 10748.81, vol: 206560000 },
|
||||
{ '日期': '2004-01-28', open: 10610.07, close: 10468.37, lowest: 10412.44, highest: 10703.25, vol: 247660000 },
|
||||
{ '日期': '2004-01-29', open: 10467.41, close: 10510.29, lowest: 10369.92, highest: 10611.56, vol: 273970000 },
|
||||
{ '日期': '2004-01-30', open: 10510.22, close: 10488.07, lowest: 10385.56, highest: 10551.03, vol: 208990000 },
|
||||
{ '日期': '2004-02-02', open: 10487.78, close: 10499.18, lowest: 10395.55, highest: 10614.44, vol: 224800000 },
|
||||
{ '日期': '2004-02-03', open: 10499.48, close: 10505.18, lowest: 10414.15, highest: 10571.48, vol: 183810000 },
|
||||
{ '日期': '2004-02-04', open: 10503.11, close: 10470.74, lowest: 10394.81, highest: 10567.85, vol: 227760000 },
|
||||
{ '日期': '2004-02-05', open: 10469.33, close: 10495.55, lowest: 10399.92, highest: 10566.37, vol: 187810000 },
|
||||
{ '日期': '2004-02-06', open: 10494.89, close: 10593.03, lowest: 10433.74, highest: 10634.81, vol: 182880000 },
|
||||
{ '日期': '2004-02-09', open: 10592.41, close: 10579.03, lowest: 10433.72, highest: 10634.81, vol: 160720000 },
|
||||
{ '日期': '2004-02-10', open: 10578.74, close: 10613.85, lowest: 10511.18, highest: 10667.03, vol: 160590000 },
|
||||
{ '日期': '2004-02-11', open: 10605.48, close: 10737.72, lowest: 10561.55, highest: 10779.41, vol: 277850000 },
|
||||
{ '日期': '2004-02-12', open: 10735.18, close: 10694.07, lowest: 10636.44, highest: 10775.03, vol: 197560000 },
|
||||
{ '日期': '2004-02-13', open: 10696.22, close: 10627.85, lowest: 10578.66, highest: 10755.47, vol: 208340000 },
|
||||
{ '日期': '2004-02-17', open: 10628.88, close: 10714.88, lowest: 10628.88, highest: 10762.07, vol: 169730000 },
|
||||
{ '日期': '2004-02-18', open: 10706.68, close: 10671.99, lowest: 10623.62, highest: 10764.36, vol: 164370000 },
|
||||
{ '日期': '2004-02-19', open: 10674.59, close: 10664.73, lowest: 10626.44, highest: 10794.95, vol: 219890000 },
|
||||
{ '日期': '2004-02-20', open: 10666.29, close: 10619.03, lowest: 10559.11, highest: 10722.77, vol: 220560000 },
|
||||
{ '日期': '2004-02-23', open: 10619.55, close: 10609.62, lowest: 10508.89, highest: 10711.84, vol: 229950000 },
|
||||
{ '日期': '2004-02-24', open: 10609.55, close: 10566.37, lowest: 10479.33, highest: 10681.41, vol: 225670000 },
|
||||
{ '日期': '2004-02-25', open: 10566.59, close: 10601.62, lowest: 10509.42, highest: 10660.73, vol: 192420000 },
|
||||
{ '日期': '2004-02-26', open: 10598.14, close: 10580.14, lowest: 10493.71, highest: 10652.96, vol: 223230000 },
|
||||
{ '日期': '2004-02-27', open: 10581.55, close: 10583.92, lowest: 10519.03, highest: 10689.55, vol: 200050000 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
43
src/pages/demo/charts/list/funnel/demo1/index.vue
Normal file
43
src/pages/demo/charts/list/funnel/demo1/index.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">一般</template>
|
||||
<div class="inner">
|
||||
<ve-funnel :data="chartData" v-bind="pubSetting"></ve-funnel>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['状态', '数值'],
|
||||
rows: [
|
||||
{ '状态': '展示', '数值': 900 },
|
||||
{ '状态': '访问', '数值': 600 },
|
||||
{ '状态': '点击', '数值': 300 },
|
||||
{ '状态': '订单', '数值': 100 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
46
src/pages/demo/charts/list/funnel/demo2/index.vue
Normal file
46
src/pages/demo/charts/list/funnel/demo2/index.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">金字塔</template>
|
||||
<div class="inner">
|
||||
<ve-funnel :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-funnel>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
ascending: true
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['状态', '数值'],
|
||||
rows: [
|
||||
{ '状态': '展示', '数值': 900 },
|
||||
{ '状态': '访问', '数值': 600 },
|
||||
{ '状态': '点击', '数值': 300 },
|
||||
{ '状态': '订单', '数值': 100 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
40
src/pages/demo/charts/list/gauge/demo1/index.vue
Normal file
40
src/pages/demo/charts/list/gauge/demo1/index.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">一般</template>
|
||||
<div class="inner">
|
||||
<ve-gauge :data="chartData" v-bind="pubSetting"></ve-gauge>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['type', 'a', 'b', 'value'],
|
||||
rows: [
|
||||
{ type: '速度', value: 80, a: 1, b: 2 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
49
src/pages/demo/charts/list/heatmap/demo1/index.vue
Normal file
49
src/pages/demo/charts/list/heatmap/demo1/index.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">一般</template>
|
||||
<div class="inner">
|
||||
<ve-heatmap :data="chartData" v-bind="pubSetting"></ve-heatmap>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['时间', '地点', '人数'],
|
||||
rows: [
|
||||
{ '时间': '星期一', '地点': '北京', '人数': 1000 },
|
||||
{ '时间': '星期二', '地点': '上海', '人数': 400 },
|
||||
{ '时间': '星期三', '地点': '杭州', '人数': 800 },
|
||||
{ '时间': '星期二', '地点': '深圳', '人数': 200 },
|
||||
{ '时间': '星期三', '地点': '长春', '人数': 100 },
|
||||
{ '时间': '星期五', '地点': '南京', '人数': 300 },
|
||||
{ '时间': '星期四', '地点': '江苏', '人数': 800 },
|
||||
{ '时间': '星期一', '地点': '北京', '人数': 700 },
|
||||
{ '时间': '星期三', '地点': '上海', '人数': 300 },
|
||||
{ '时间': '星期二', '地点': '杭州', '人数': 500 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
69
src/pages/demo/charts/list/heatmap/demo2/index.vue
Normal file
69
src/pages/demo/charts/list/heatmap/demo2/index.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">地图热力图</template>
|
||||
<div class="inner">
|
||||
<ve-heatmap :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-heatmap>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
position: 'china',
|
||||
type: 'map',
|
||||
geo: {
|
||||
label: {
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#323c48',
|
||||
borderColor: '#111'
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#2a333d'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['lat', 'lng', '人数'],
|
||||
rows: [
|
||||
{ 'lat': 115.892151, 'lng': 28.676493, '人数': 1000 },
|
||||
{ 'lat': 117.000923, 'lng': 36.675807, '人数': 400 },
|
||||
{ 'lat': 113.665412, 'lng': 34.757975, '人数': 800 },
|
||||
{ 'lat': 114.298572, 'lng': 30.584355, '人数': 200 },
|
||||
{ 'lat': 112.982279, 'lng': 28.19409, '人数': 100 },
|
||||
{ 'lat': 113.280637, 'lng': 23.125178, '人数': 300 },
|
||||
{ 'lat': 110.33119, 'lng': 20.031971, '人数': 800 },
|
||||
{ 'lat': 104.065735, 'lng': 30.659462, '人数': 700 },
|
||||
{ 'lat': 108.948024, 'lng': 34.263161, '人数': 300 },
|
||||
{ 'lat': 103.823557, 'lng': 36.058039, '人数': 500 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
44
src/pages/demo/charts/list/map/demo1/index.vue
Normal file
44
src/pages/demo/charts/list/map/demo1/index.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">一般</template>
|
||||
<!-- <div class="inner">
|
||||
<ve-map :data="chartData" v-bind="pubSetting"></ve-map>
|
||||
</div> -->
|
||||
大概由于 mock.js 和 v-charts 的网络请求冲突，本示例暂时无法展示
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['位置', '税收', '人口', '面积'],
|
||||
rows: [
|
||||
{ '位置': '吉林', '税收': 123, '人口': 123, '面积': 92134 },
|
||||
{ '位置': '北京', '税收': 1223, '人口': 2123, '面积': 29234 },
|
||||
{ '位置': '上海', '税收': 2123, '人口': 1243, '面积': 94234 },
|
||||
{ '位置': '浙江', '税收': 4123, '人口': 5123, '面积': 29234 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
47
src/pages/demo/charts/list/map/demo2/index.vue
Normal file
47
src/pages/demo/charts/list/map/demo2/index.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">设置城市</template>
|
||||
<!-- <div class="inner">
|
||||
<ve-map :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-map>
|
||||
</div> -->
|
||||
大概由于 mock.js 和 v-charts 的网络请求冲突，本示例暂时无法展示
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
position: 'province/beijing'
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['位置', '人口'],
|
||||
rows: [
|
||||
{ '位置': '延庆区', '人口': 123 },
|
||||
{ '位置': '密云区', '人口': 1223 },
|
||||
{ '位置': '平谷区', '人口': 2123 },
|
||||
{ '位置': '海淀区', '人口': 4123 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
54
src/pages/demo/charts/list/map/demo3/index.vue
Normal file
54
src/pages/demo/charts/list/map/demo3/index.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">设置样式</template>
|
||||
<!-- <div class="inner">
|
||||
<ve-map :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-map>
|
||||
</div> -->
|
||||
<!-- 大概由于 mock.js 和 v-charts 的网络请求冲突，本示例暂时无法展示 -->
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
position: 'china',
|
||||
label: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: '#00f'
|
||||
}
|
||||
},
|
||||
zoom: 1.2
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['位置', '人口'],
|
||||
rows: [
|
||||
{ '位置': '吉林', ' 人口': 123 },
|
||||
{ '位置': '北京', ' 人口': 1223 },
|
||||
{ '位置': '上海', ' 人口': 2123 },
|
||||
{ '位置': '浙江', ' 人口': 4123 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
45
src/pages/demo/charts/list/radar/demo1/index.vue
Normal file
45
src/pages/demo/charts/list/radar/demo1/index.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">一般</template>
|
||||
<div class="inner">
|
||||
<ve-radar :data="chartData" v-bind="pubSetting"></ve-radar>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户', '下单用户', '下单率'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
|
||||
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
|
||||
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
|
||||
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
|
||||
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
|
||||
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
56
src/pages/demo/charts/list/sankey/demo1/index.vue
Normal file
56
src/pages/demo/charts/list/sankey/demo1/index.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">一般</template>
|
||||
<div class="inner">
|
||||
<ve-sankey :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-sankey>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
links: [
|
||||
{ source: '首页', target: '列表页a', value: 0.5 },
|
||||
{ source: '首页', target: '列表页b', value: 0.5 },
|
||||
{ source: '列表页a', target: '内容页a-1', value: 0.1 },
|
||||
{ source: '列表页a', target: '内容页a-2', value: 0.4 },
|
||||
{ source: '列表页b', target: '内容页b-1', value: 0.2 },
|
||||
{ source: '列表页b', target: '内容页b-2', value: 0.3 }
|
||||
]
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['页面', '访问量'],
|
||||
rows: [
|
||||
{ '页面': '首页', '访问量': 100000 },
|
||||
{ '页面': '列表页a', '访问量': 20000 },
|
||||
{ '页面': '列表页b', '访问量': 80000 },
|
||||
{ '页面': '内容页a-1', '访问量': 10000 },
|
||||
{ '页面': '内容页a-2', '访问量': 10000 },
|
||||
{ '页面': '内容页b-1', '访问量': 60000 },
|
||||
{ '页面': '内容页b-2', '访问量': 20000 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
45
src/pages/demo/charts/list/scatter/demo1/index.vue
Normal file
45
src/pages/demo/charts/list/scatter/demo1/index.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">单维度多指标</template>
|
||||
<div class="inner">
|
||||
<ve-scatter :data="chartData" v-bind="pubSetting"></ve-scatter>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户', '下单用户', '年龄'],
|
||||
rows: [
|
||||
{ '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },
|
||||
{ '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },
|
||||
{ '日期': '1/3', '访问用户': 7123, '年龄': 9, '下单用户': 3245 },
|
||||
{ '日期': '1/4', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },
|
||||
{ '日期': '1/5', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },
|
||||
{ '日期': '1/6', '访问用户': 2323, '年龄': 20, '下单用户': 6537 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
63
src/pages/demo/charts/list/scatter/demo2/index.vue
Normal file
63
src/pages/demo/charts/list/scatter/demo2/index.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">双维度多指标</template>
|
||||
<div class="inner">
|
||||
<ve-scatter :data="chartData" v-bind="pubSetting"></ve-scatter>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['日期', '访问用户', '下单用户', '年龄'],
|
||||
rows: {
|
||||
'上海': [
|
||||
{ '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },
|
||||
{ '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },
|
||||
{ '日期': '1/3', '访问用户': 7123, '年龄': 9, '下单用户': 3245 },
|
||||
{ '日期': '1/4', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },
|
||||
{ '日期': '1/5', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },
|
||||
{ '日期': '1/6', '访问用户': 2323, '年龄': 20, '下单用户': 6537 }
|
||||
],
|
||||
'北京': [
|
||||
{ '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },
|
||||
{ '日期': '1/2', '访问用户': 1273, '年龄': 6, '下单用户': 2344 },
|
||||
{ '日期': '1/3', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },
|
||||
{ '日期': '1/4', '访问用户': 2123, '年龄': 9, '下单用户': 3245 },
|
||||
{ '日期': '1/5', '访问用户': 4103, '年龄': 12, '下单用户': 4355 },
|
||||
{ '日期': '1/6', '访问用户': 7123, '年龄': 10, '下单用户': 3567 }
|
||||
],
|
||||
'广州': [
|
||||
{ '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },
|
||||
{ '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },
|
||||
{ '日期': '1/3', '访问用户': 2123, '年龄': 30, '下单用户': 3245 },
|
||||
{ '日期': '1/5', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },
|
||||
{ '日期': '1/4', '访问用户': 5123, '年龄': 18, '下单用户': 4564 },
|
||||
{ '日期': '1/6', '访问用户': 3843, '年龄': 30, '下单用户': 4850 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
126
src/pages/demo/charts/list/tree/demo1/index.vue
Normal file
126
src/pages/demo/charts/list/tree/demo1/index.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">径向树图</template>
|
||||
<div class="inner">
|
||||
<ve-tree :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-tree>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
this.chartSettings = {
|
||||
seriesMap: {
|
||||
tree1: {
|
||||
layout: 'radial'
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['name', 'value'],
|
||||
rows: [
|
||||
{
|
||||
name: 'tree1',
|
||||
value: [
|
||||
{
|
||||
name: 'f',
|
||||
value: 1,
|
||||
link: 'https://ele.me',
|
||||
children: [
|
||||
{
|
||||
name: 'a',
|
||||
value: 1,
|
||||
link: 'https://ele.me',
|
||||
children: [
|
||||
{
|
||||
name: 'a-a',
|
||||
link: 'https://ele.me',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
name: 'a-b',
|
||||
link: 'https://ele.me',
|
||||
value: 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'b',
|
||||
value: 1,
|
||||
link: 'https://ele.me',
|
||||
children: [
|
||||
{
|
||||
name: 'b-a',
|
||||
link: 'https://ele.me',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
name: 'b-b',
|
||||
link: 'https://ele.me',
|
||||
value: 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'c',
|
||||
value: 3,
|
||||
link: 'https://ele.me',
|
||||
children: [
|
||||
{
|
||||
name: 'c-a',
|
||||
link: 'https://ele.me',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
name: 'c-b',
|
||||
link: 'https://ele.me',
|
||||
value: 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'd',
|
||||
value: 3,
|
||||
link: 'https://ele.me',
|
||||
children: [
|
||||
{
|
||||
name: 'd-a',
|
||||
link: 'https://ele.me',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
name: 'd-b',
|
||||
link: 'https://ele.me',
|
||||
value: 2
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
42
src/pages/demo/charts/list/waterfall/demo1/index.vue
Normal file
42
src/pages/demo/charts/list/waterfall/demo1/index.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">一般</template>
|
||||
<div class="inner">
|
||||
<ve-waterfall :data="chartData" v-bind="pubSetting"></ve-waterfall>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/pages/demo/charts/list/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['活动', '时间'],
|
||||
rows: [
|
||||
{ '活动': '吃饭', '时间': 4 },
|
||||
{ '活动': '睡觉', '时间': 10 },
|
||||
{ '活动': '打豆豆', '时间': 5 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,88 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">勾选</template>
|
||||
<div class="wraper">
|
||||
<bigdata-table
|
||||
v-model="tableDataHandled"
|
||||
:row-num="20"
|
||||
:col-num="7"
|
||||
show-index
|
||||
fixed
|
||||
stripe
|
||||
:col-width="200"
|
||||
:header-height="40"
|
||||
:columns="columns"
|
||||
:index-render="indexRender"
|
||||
:fixed-col="1"
|
||||
@on-click-tr="handleClickTr"/>
|
||||
</div>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
// 本页是由 https://github.com/lison16/vue-bigdata-table/blob/master/src/App.vue 修改而来
|
||||
// 由于原页面有太多的地方不符合本项目的代码规范，本页面不做代码检查
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
tableData: [],
|
||||
tableDataSelected: [],
|
||||
columns: [],
|
||||
tableDataHandled: [], // 带有数据的表格数据
|
||||
emptyData: [], // 空的表格数据
|
||||
canEdit: true,
|
||||
editRow: 1,
|
||||
editCol: 1,
|
||||
defaultSort: {1: 'down'}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
indexRender (h, index) {
|
||||
return h('input', {
|
||||
domProps: {
|
||||
type: 'checkbox',
|
||||
checked: this.tableDataSelected[index]
|
||||
}
|
||||
}, '')
|
||||
},
|
||||
handleClickTr (index) {
|
||||
this.$set(this.tableDataSelected, index, !this.tableDataSelected[index])
|
||||
},
|
||||
changeData (rowLen) {
|
||||
let dataArr = []
|
||||
for (let i = 0; i < rowLen; i++) {
|
||||
let arr = [
|
||||
i + '00',
|
||||
'count' + i,
|
||||
'23.4534534345',
|
||||
'0023' + i,
|
||||
'123.234534534534',
|
||||
'namenasdfsdfsdfsdfssdfsdfsdsdfsdfsf' + i,
|
||||
'2014年1月1日'
|
||||
]
|
||||
dataArr.push(arr)
|
||||
}
|
||||
this.tableDataHandled = dataArr
|
||||
this.tableDataSelected = dataArr.map(e => false)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.changeData(1000)
|
||||
let columns = ['这是数字', '这是字符1列', '这是纬度', '这是数字', '这是经度', '这是字符2列', '这是时间'].map((title, col) => {
|
||||
return {
|
||||
title: title,
|
||||
align: 'center'
|
||||
}
|
||||
})
|
||||
this.columns = columns
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.wraper{
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
22
src/pages/demo/components/container/full-bs.vue
Normal file
22
src/pages/demo/components/container/full-bs.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<d2-container type="full" scroll>
|
||||
<template slot="header">
|
||||
我是插入到 header 中的内容
|
||||
</template>
|
||||
<d2-markdown :source="doc"/>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="D2Admin" link="https://github.com/FairyEver/d2-admin"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import doc from './md/doc-full-bs.md'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
19
src/pages/demo/components/container/ghost-header.vue
Normal file
19
src/pages/demo/components/container/ghost-header.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<d2-container type="ghost">
|
||||
<template slot="header">隐形页面容器头部</template>
|
||||
<el-card shadow="never" style="width: 50%;">
|
||||
<d2-markdown :source="doc"/>
|
||||
</el-card>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import doc from './md/doc-ghost-header.md'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<d2-container type="ghost">
|
||||
<el-card shadow="never" style="width: 50%;">
|
||||
<el-card shadow="never" class="d2-mt" style="width: 50%;">
|
||||
<d2-markdown :source="doc"/>
|
||||
</el-card>
|
||||
</d2-container>
|
||||
|
||||
75
src/pages/demo/components/container/md/doc-full-bs.md
Normal file
75
src/pages/demo/components/container/md/doc-full-bs.md
Normal file
@@ -0,0 +1,75 @@
|
||||
## 自适应填充页面容器 + 滚动优化
|
||||
|
||||
无论内容高度多少，都会自动撑满页面，并有可选的 `header` 和 `footer` 插槽，**并且使用自定义滚动条代替原生滚动条**，是否启用此功能请自行取舍
|
||||
|
||||
示例：
|
||||
|
||||
```
|
||||
<template>
|
||||
<d2-container type="full" scroll>
|
||||
<template slot="header">
|
||||
可选的 header 内容 ...
|
||||
</template>
|
||||
主体内容 ...
|
||||
<template slot="footer">
|
||||
可选的 footer 内容 ...
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
```
|
||||
|
||||
下面是一个较长的演示文章，仅仅是为了演示一些文字的显示效果
|
||||
|
||||
## vue.js
|
||||
|
||||
**易用**
|
||||
|
||||
已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
|
||||
|
||||
**灵活**
|
||||
|
||||
不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
|
||||
|
||||
**高效**
|
||||
|
||||
20kB min+gzip 运行大小
|
||||
|
||||
超快虚拟 DOM
|
||||
|
||||
最省心的优化
|
||||
|
||||
**Vue.js 是什么**
|
||||
|
||||
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
|
||||
|
||||
如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看对比其它框架。
|
||||
|
||||
## Element
|
||||
|
||||
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
|
||||
|
||||
**一致性** Consistency
|
||||
|
||||
- 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
|
||||
|
||||
- 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
|
||||
|
||||
**反馈** Feedback
|
||||
|
||||
- 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
|
||||
|
||||
- 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
|
||||
|
||||
**效率** Efficiency
|
||||
|
||||
- 简化流程：设计简洁直观的操作流程；
|
||||
|
||||
- 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
|
||||
|
||||
- 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
|
||||
|
||||
**可控** Controllability
|
||||
|
||||
- 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
|
||||
|
||||
- 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
```
|
||||
<template>
|
||||
<d2-container type="card-full">
|
||||
<d2-container type="full">
|
||||
<template slot="header">
|
||||
可选的 header 内容 ...
|
||||
</template>
|
||||
|
||||
12
src/pages/demo/components/container/md/doc-ghost-header.md
Normal file
12
src/pages/demo/components/container/md/doc-ghost-header.md
Normal file
@@ -0,0 +1,12 @@
|
||||
## 隐形页面容器 带有头部
|
||||
|
||||
不显示任何背景色和边框，但是有一个和分页组件效果融合的头部，看起来更舒服一点
|
||||
|
||||
```
|
||||
<d2-container type="ghost">
|
||||
<template slot="header">隐形页面容器头部</template>
|
||||
主体内容
|
||||
</d2-container>
|
||||
```
|
||||
|
||||
> 注意 如果设置了 header 插槽的内容，header 部分会自动具有 20px 的下外边距
|
||||
@@ -6,4 +6,6 @@
|
||||
<d2-container type="ghost">
|
||||
主体内容
|
||||
</d2-container>
|
||||
```
|
||||
```
|
||||
|
||||
如果你不希望内容紧贴上边，可以在内容外层容器设置 `class="d2-mt"`
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<d2-container type="full" scroll>
|
||||
<template slot="header">
|
||||
<el-radio-group v-model="showIndex" size="mini">
|
||||
<el-radio-button
|
||||
|
||||
21
src/pages/demo/components/json-tree/index.vue
Normal file
21
src/pages/demo/components/json-tree/index.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<d2-container class="page">
|
||||
<tree-view :data="packJson" :options="options"></tree-view>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import packJson from '../../../../../package.json'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
options: {
|
||||
maxDepth: 10,
|
||||
rootObjectKey: 'package.json',
|
||||
modifiable: false
|
||||
},
|
||||
packJson
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<d2-container type="ghost" class="demo-layout-grid d2-mt">
|
||||
<d2-container type="ghost" class="demo-layout-grid">
|
||||
<template slot="header">网格布局</template>
|
||||
<d2-grid-layout
|
||||
v-bind="layout"
|
||||
@layout-updated="layoutUpdatedHandler">
|
||||
|
||||
@@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">Element 滚动条组件</template>
|
||||
<el-card shadow="never" class="demo-scrollbar-card d2-mb">
|
||||
<div class="demo-scrollbar-card-inner">
|
||||
<el-scrollbar>
|
||||
<div class="demo-scrollbar-group">
|
||||
<div v-for="n in 20" :key="n" class="demo-scrollbar-item">
|
||||
<el-button size="mini">n : {{n}}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</el-card>
|
||||
<d2-markdown :source="doc"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import doc from './md/doc.md'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/public.scss';
|
||||
.demo-scrollbar-card {
|
||||
width: 300px;
|
||||
.demo-scrollbar-card-inner {
|
||||
margin: -20px;
|
||||
}
|
||||
.demo-scrollbar-group {
|
||||
height: 200px;
|
||||
.demo-scrollbar-item {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid $color-border-4;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +0,0 @@
|
||||
本示例演示 ElementUI 的隐藏组件 `<el-scrollbar>`，详细信可以参照 [element/issues#2238](https://github.com/ElemeFE/element/issues/2238)
|
||||
|
||||
> ElementUI 官网以及部分涉及滚动操作的组件内部使用了 `<el-scrollbar>` 组件，虽然已经暴露到全局但是并没有相关文档介绍
|
||||
|
||||
如果你需要更高级的滚动自定义控制，D2Admin 已经集成 [better-scroll](https://github.com/ustbhuangyi/better-scroll)，示例见 [自定义滚动](/#/demo/plugins/better-scroll/base)，[滚动定位](/#/demo/plugins/better-scroll/to)
|
||||
@@ -1,90 +1,84 @@
|
||||
<template>
|
||||
<d2-container type="ghost">
|
||||
<d2-container>
|
||||
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<template slot="header">主色</template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div class="color color-primary">
|
||||
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<template slot="header">辅助色</template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div class="color color-info">
|
||||
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="color color-success">
|
||||
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="color color-warning">
|
||||
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="color color-danger">
|
||||
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never">
|
||||
<template slot="header">中性色</template>
|
||||
<el-row :gutter="20" class="d2-mb">
|
||||
<el-col :span="6">
|
||||
<div class="color color-text-main">
|
||||
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="color color-text-normal">
|
||||
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="color color-text-sub">
|
||||
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="color color-text-placehoder">
|
||||
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div class="color color-border-1">
|
||||
<d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="color color-border-2">
|
||||
<d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="color color-border-3">
|
||||
<d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="color color-border-4">
|
||||
<d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<h1 class="d2-mt-0">主色</h1>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div class="color color-primary">
|
||||
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<h1>辅助色</h1>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div class="color color-info">
|
||||
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="color color-success">
|
||||
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="color color-warning">
|
||||
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="color color-danger">
|
||||
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<h1>中性色</h1>
|
||||
<el-row :gutter="20" class="d2-mb">
|
||||
<el-col :span="6">
|
||||
<div class="color color-text-main">
|
||||
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="color color-text-normal">
|
||||
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="color color-text-sub">
|
||||
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="color color-text-placehoder">
|
||||
<d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div class="color color-border-1">
|
||||
<d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="color color-border-2">
|
||||
<d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="color color-border-3">
|
||||
<d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="color color-border-4">
|
||||
<d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
@@ -1,118 +1,106 @@
|
||||
<template>
|
||||
<d2-container type="ghost">
|
||||
<d2-container>
|
||||
|
||||
<h1 class="d2-mt-0">基础布局</h1>
|
||||
<el-row>
|
||||
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<template slot="header">基础布局</template>
|
||||
<el-row>
|
||||
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<h1>分栏间隔</h1>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<template slot="header">分栏间隔</template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<h1>混合布局</h1>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<template slot="header">混合布局</template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<h1>分栏偏移</h1>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<template slot="header">分栏偏移</template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<h1>对齐方式</h1>
|
||||
<el-row type="flex" class="row-bg">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="center">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="end">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="space-between">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="space-around">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<template slot="header">对齐方式</template>
|
||||
<el-row type="flex" class="row-bg">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="center">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="end">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="space-between">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="space-around">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<template slot="header">响应式布局</template>
|
||||
<el-row :gutter="10">
|
||||
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<h1>响应式布局</h1>
|
||||
<el-row :gutter="10">
|
||||
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
@@ -1,55 +1,53 @@
|
||||
<template>
|
||||
<d2-container type="ghost">
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<template slot="header">中文字体</template>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="6">
|
||||
<el-card shadow="never">
|
||||
<template slot="header">PingFang SC</template>
|
||||
<p class="basic-typography-text typography-style-1">和畅惠风</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="never">
|
||||
<template slot="header">Hiragino Sans GB</template>
|
||||
<p class="basic-typography-text typography-style-2">和畅惠风</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="never">
|
||||
<template slot="header">Microsoft YaHei</template>
|
||||
<p class="basic-typography-text typography-style-3">和畅惠风</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<template slot="header">英文／数字字体</template>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="6">
|
||||
<el-card shadow="never">
|
||||
<template slot="header">Helvetica Neue</template>
|
||||
<p class="basic-typography-text typography-style-4">RGag</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="never">
|
||||
<template slot="header">Helvetica</template>
|
||||
<p class="basic-typography-text typography-style-5">RGag</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="never">
|
||||
<template slot="header">Arial</template>
|
||||
<p class="basic-typography-text typography-style-6">RGag</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<el-card shadow="never">
|
||||
<template slot="header">Font-family 代码</template>
|
||||
<d2-highlight :code="code"/>
|
||||
</el-card>
|
||||
<d2-container>
|
||||
|
||||
<h1 class="d2-mt-0">中文字体</h1>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="6">
|
||||
<el-card shadow="never">
|
||||
<template slot="header">PingFang SC</template>
|
||||
<p class="basic-typography-text typography-style-1">和畅惠风</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="never">
|
||||
<template slot="header">Hiragino Sans GB</template>
|
||||
<p class="basic-typography-text typography-style-2">和畅惠风</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="never">
|
||||
<template slot="header">Microsoft YaHei</template>
|
||||
<p class="basic-typography-text typography-style-3">和畅惠风</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<h1>英文／数字字体</h1>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="6">
|
||||
<el-card shadow="never">
|
||||
<template slot="header">Helvetica Neue</template>
|
||||
<p class="basic-typography-text typography-style-4">RGag</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="never">
|
||||
<template slot="header">Helvetica</template>
|
||||
<p class="basic-typography-text typography-style-5">RGag</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="never">
|
||||
<template slot="header">Arial</template>
|
||||
<p class="basic-typography-text typography-style-6">RGag</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<h1>Font-family 代码</h1>
|
||||
<d2-highlight :code="code"/>
|
||||
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
|
||||
32
src/pages/demo/playground/db/index.vue
Normal file
32
src/pages/demo/playground/db/index.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<d2-container type="full" class="page">
|
||||
<template slot="header">本地数据</template>
|
||||
<tree-view :data="dbData" :options="options"></tree-view>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 插件
|
||||
import db from '@/libs/db.js'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
dbData: {},
|
||||
options: {
|
||||
maxDepth: 10,
|
||||
rootObjectKey: 'db.value()',
|
||||
modifiable: false
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.load()
|
||||
},
|
||||
methods: {
|
||||
load () {
|
||||
this.dbData = db.value()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
16
src/pages/demo/playground/page-argu/get.vue
Normal file
16
src/pages/demo/playground/page-argu/get.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<h1 class="d2-mt-0">$route.params.username: {{$route.params.username}}</h1>
|
||||
<h1>$route.query.userid: {{$route.query.userid}}</h1>
|
||||
<p>你可以尝试返回发送数据页面修改数据重新发送，或者切换到其它页面后刷新浏览器再返回本业观察参数保留</p>
|
||||
<el-button type="primary" @click="$router.push({ name: 'demo-playground-page-argu-send' })">返回发送数据的页面</el-button>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
55
src/pages/demo/playground/page-argu/send.vue
Normal file
55
src/pages/demo/playground/page-argu/send.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<el-form :model="sendForm" :rules="rules" label-position="top" ref="sendForm">
|
||||
<el-form-item label="username 通过动态路由匹配发送" prop="username">
|
||||
<el-input v-model="sendForm.username"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="userid 通过参数发送" prop="userid">
|
||||
<el-input v-model="sendForm.userid"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSubmit('sendForm')">跳转到接收页面</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
sendForm: {
|
||||
username: 'FairyEver',
|
||||
userid: '001'
|
||||
},
|
||||
rules: {
|
||||
username: [
|
||||
{ required: true, message: '请输入要发送的用户名', trigger: 'blur' }
|
||||
],
|
||||
userid: [
|
||||
{ required: true, message: '请输入要发送的用户ID', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit (formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
this.$router.push({
|
||||
name: 'demo-playground-page-argu-get',
|
||||
params: {
|
||||
username: this.sendForm.username
|
||||
},
|
||||
query: {
|
||||
userid: this.sendForm.userid
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
17
src/pages/demo/playground/page-cache/off.vue
Normal file
17
src/pages/demo/playground/page-cache/off.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">这个页面不会被 keep-alive</template>
|
||||
<p class="d2-mt-0">在下面的输入框输入任意字符后，切换到其它页面，再回到此页时输入框文字消失，证明没有被缓存</p>
|
||||
<el-input v-model="value" placeholder="input here"></el-input>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
17
src/pages/demo/playground/page-cache/on.vue
Normal file
17
src/pages/demo/playground/page-cache/on.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<template slot="header">这个页面会被 keep-alive</template>
|
||||
<p class="d2-mt-0">在下面的输入框输入任意字符后，切换到其它页面，再回到此页时输入框文字保留，证明被缓存</p>
|
||||
<el-input v-model="value" placeholder="input here"></el-input>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<d2-container type="full" class="page-demo-playground-theme">
|
||||
<d2-container type="full" class="page">
|
||||
<template slot="header">主题</template>
|
||||
<el-table :data="themeList" v-bind="table">
|
||||
<el-table-column prop="name" align="center" width="260"/>
|
||||
@@ -12,8 +12,8 @@
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-if="themeActive.value === scope.row.value" type="success" icon="el-icon-check" round>已激活</el-button>
|
||||
<el-button v-else round @click="handleSelectTheme(scope.row.value)">使用</el-button>
|
||||
<el-button v-if="themeActiveName === scope.row.name" type="success" icon="el-icon-check" round>已激活</el-button>
|
||||
<el-button v-else round @click="handleSelectTheme(scope.row.name)">使用</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -25,7 +25,7 @@
|
||||
</el-button>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<el-button type="primary" size="small">当前激活主题 {{themeActive.name}}</el-button>
|
||||
<el-button type="primary" size="small">当前激活主题 {{themeActiveName}}</el-button>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
@@ -44,15 +44,15 @@ export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
themeList: state => state.d2admin.themeList,
|
||||
themeActive: state => state.d2admin.themeActive
|
||||
themeActiveName: state => state.d2admin.themeActiveName
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
...mapMutations([
|
||||
'd2adminThemeSet'
|
||||
]),
|
||||
handleSelectTheme (value) {
|
||||
this.d2adminThemeSet(value)
|
||||
handleSelectTheme (name) {
|
||||
this.d2adminThemeSet(name)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -60,7 +60,7 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/public.scss';
|
||||
.page-demo-playground-theme {
|
||||
.page {
|
||||
.theme-preview {
|
||||
height: 50px;
|
||||
width: 100px;
|
||||
|
||||
@@ -18,9 +18,26 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.BS = new BScroll(this.$refs.wrapper, {
|
||||
mouseWheel: true
|
||||
})
|
||||
this.scrollInit()
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.scrollDestroy()
|
||||
},
|
||||
methods: {
|
||||
scrollInit () {
|
||||
this.BS = new BScroll(this.$refs.wrapper, {
|
||||
mouseWheel: true,
|
||||
scrollbar: {
|
||||
fade: true,
|
||||
interactive: false
|
||||
}
|
||||
})
|
||||
},
|
||||
scrollDestroy () {
|
||||
if (this.BS) {
|
||||
this.BS.destroy()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -42,7 +42,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 插件
|
||||
import BScroll from 'better-scroll'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
@@ -51,9 +53,10 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.BS = new BScroll(this.$refs.wrapper, {
|
||||
mouseWheel: true
|
||||
})
|
||||
this.scrollInit()
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.scrollDestroy()
|
||||
},
|
||||
methods: {
|
||||
handleScrollTo (y) {
|
||||
@@ -64,6 +67,20 @@ export default {
|
||||
},
|
||||
handleScrollToElement (n) {
|
||||
this.BS.scrollToElement(`#demo-bs-item-${n}`, this.time)
|
||||
},
|
||||
scrollInit () {
|
||||
this.BS = new BScroll(this.$refs.wrapper, {
|
||||
mouseWheel: true,
|
||||
scrollbar: {
|
||||
fade: true,
|
||||
interactive: false
|
||||
}
|
||||
})
|
||||
},
|
||||
scrollDestroy () {
|
||||
if (this.BS) {
|
||||
this.BS.destroy()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">环境区分</template>
|
||||
<p>当前是{{$env ? '开发' : '生产'}}环境</p>
|
||||
<p>当前是{{$env === 'development' ? '开发' : '生产'}}环境</p>
|
||||
</d2-container>
|
||||
</template>
|
||||
@@ -1,15 +1,14 @@
|
||||
<template>
|
||||
<d2-container type="ghost">
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-demo-page-header slot="header" title="数据占位符"/>
|
||||
<d2-markdown :source="doc"/>
|
||||
</el-card>
|
||||
<d2-container>
|
||||
<d2-demo-page-header slot="header" title="数据占位符"/>
|
||||
<d2-markdown :source="doc" class="d2-mb"/>
|
||||
<d2-demo-mock-card
|
||||
v-for="(item, index) in settingDPD"
|
||||
:key="index"
|
||||
:title="item.title"
|
||||
:code="JSON.stringify(item.json, null, 2)"
|
||||
:mock="mockResult[index]"
|
||||
style="margin-bottom: 0px !important;"
|
||||
@reload="doMock(index)">
|
||||
</d2-demo-mock-card>
|
||||
</d2-container>
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<d2-container type="ghost">
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-demo-page-header slot="header" title="数据模板"/>
|
||||
<d2-markdown :source="doc"/>
|
||||
</el-card>
|
||||
<d2-container>
|
||||
<d2-demo-page-header slot="header" title="数据模板"/>
|
||||
<d2-markdown :source="doc" class="d2-mb"/>
|
||||
<d2-demo-mock-card
|
||||
v-for="(item, index) in settingDTD"
|
||||
:key="index"
|
||||
@@ -22,6 +20,7 @@
|
||||
:title="regexp.title"
|
||||
:code="regexp.code"
|
||||
:mock="regexp.mocked"
|
||||
style="margin-bottom: 0px !important;"
|
||||
@reload="regexpMock()">
|
||||
</d2-demo-mock-card>
|
||||
</d2-container>
|
||||
|
||||
@@ -2,14 +2,14 @@ import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import Cookies from 'js-cookie'
|
||||
|
||||
// 路由数据
|
||||
import routers from './routers'
|
||||
|
||||
import util from '@/libs/util.js'
|
||||
|
||||
// 路由数据
|
||||
import routes from './routes'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
let router = new VueRouter({ routers })
|
||||
let router = new VueRouter({ routes })
|
||||
|
||||
/**
|
||||
* 路由拦截
|
||||
@@ -34,20 +34,14 @@ router.beforeEach((to, from, next) => {
|
||||
}
|
||||
})
|
||||
|
||||
// TODO: 路由跳转后自动滚动到顶部
|
||||
router.afterEach(to => {
|
||||
// 需要的信息
|
||||
const app = router.app
|
||||
const { name, params, query } = to
|
||||
// dev
|
||||
console.group('router.afterEach')
|
||||
console.log('app: ', app)
|
||||
console.log('name: ', name)
|
||||
console.log('params: ', params)
|
||||
console.log('query: ', query)
|
||||
console.groupEnd()
|
||||
// 多页控制 打开新的页面
|
||||
util.openNewPage(app, name, params, query)
|
||||
// 更改标题
|
||||
util.title(to.meta.title)
|
||||
})
|
||||
|
||||
export default router
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
13063df4cba8c554e147adf0a2aa576871880a84
|
||||
1
src/router/routes.js.REMOVED.git-id
Normal file
1
src/router/routes.js.REMOVED.git-id
Normal file
@@ -0,0 +1 @@
|
||||
2d74dce7e65ff946e5955a0914be28cbceb8989f
|
||||
@@ -1,120 +0,0 @@
|
||||
import util from '@/libs/util.js'
|
||||
import db from '@/libs/db.js'
|
||||
import themeList from '@/assets/style/theme/list.js'
|
||||
|
||||
export default {
|
||||
state: {
|
||||
// 全屏
|
||||
isFullScreen: false,
|
||||
// 灰度
|
||||
isGrayMode: false,
|
||||
// 主题
|
||||
themeList,
|
||||
themeActive: themeList[1],
|
||||
// 多页
|
||||
pageOpenedList: [
|
||||
{
|
||||
name: 'index',
|
||||
title: '首页'
|
||||
}
|
||||
]
|
||||
},
|
||||
mutations: {
|
||||
/**
|
||||
* 更新页面列表上的某一项
|
||||
* @param {state} state vuex state
|
||||
* @param {info} param1 new page info
|
||||
*/
|
||||
d2adminpageOpenedListUpdateItem (state, { index, argu, query }) {
|
||||
// dev
|
||||
console.group('d2adminpageOpenedListUpdateItem')
|
||||
console.log('index: ', index)
|
||||
console.log('argu: ', argu)
|
||||
console.log('query: ', query)
|
||||
console.groupEnd()
|
||||
// 更新页面列表某一项
|
||||
let page = state.pageOpenedList[index]
|
||||
page.argu = argu || page.argu
|
||||
page.query = query || page.query
|
||||
state.pageOpenedList.splice(index, 1, page)
|
||||
// 更新设置到数据库
|
||||
const setting = db.get('pageOpenedList').find({uuid: util.uuid()})
|
||||
if (setting.value()) {
|
||||
setting.assign({value: state.pageOpenedList}).write()
|
||||
} else {
|
||||
db.get('pageOpenedList').push({
|
||||
uuid: util.uuid(),
|
||||
value: state.pageOpenedList
|
||||
}).write()
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 切换全屏
|
||||
* @param {state} state vuex state
|
||||
*/
|
||||
d2adminFullScreenToggle (state) {
|
||||
if (state.isFullScreen) {
|
||||
util.exitFullScreen()
|
||||
state.isFullScreen = false
|
||||
} else {
|
||||
util.openFullScreen()
|
||||
state.isFullScreen = true
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 切换灰度状态
|
||||
* @param {state} state vuex state
|
||||
*/
|
||||
d2adminGrayModeToggle (state) {
|
||||
state.isGrayMode = !state.isGrayMode
|
||||
},
|
||||
/**
|
||||
* 设置灰度模式
|
||||
* @param {state} state vuex state
|
||||
* @param {boolean} value new value
|
||||
*/
|
||||
d2adminGrayModeSet (state, value) {
|
||||
state.isGrayMode = value
|
||||
},
|
||||
/**
|
||||
* 激活一个主题（应用到dom上）
|
||||
* @param {state} state vuex state
|
||||
* @param {string} themeActiveValue 需要激活的主题名称
|
||||
*/
|
||||
d2adminThemeSet (state, themeActiveValue) {
|
||||
// 从列表里找到需要激活的主题的数据
|
||||
const theme = state.themeList.find(e => e.value === themeActiveValue) || state.themeList[0]
|
||||
// 设置 state
|
||||
state.themeActive = theme
|
||||
// 设置 dom
|
||||
document.body.className = `theme-${state.themeActive.value}`
|
||||
// 保存到数据库
|
||||
this.commit('d2adminThemeSave', themeActiveValue)
|
||||
},
|
||||
/**
|
||||
* 从数据库加载主题设置
|
||||
* @param {state} state vuex state
|
||||
*/
|
||||
d2adminThemeLoad (state) {
|
||||
const themeActive = db.get('themeActive').find({uuid: util.uuid()}).value()
|
||||
this.commit('d2adminThemeSet', themeActive ? themeActive.value : state.themeList[0].value)
|
||||
},
|
||||
/**
|
||||
* 向数据保存一个主题
|
||||
* @param {state} state vuex state
|
||||
* @param {string} themeActiveValue 需要保存的主题名称
|
||||
*/
|
||||
d2adminThemeSave (state, themeActiveValue) {
|
||||
// 检查这个用户是否有主题设置
|
||||
const setting = db.get('themeActive').find({uuid: util.uuid()})
|
||||
if (setting.value()) {
|
||||
setting.assign({value: themeActiveValue}).write()
|
||||
} else {
|
||||
db.get('themeActive').push({
|
||||
uuid: util.uuid(),
|
||||
value: themeActiveValue
|
||||
}).write()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
1
src/store/modules/d2admin.js.REMOVED.git-id
Normal file
1
src/store/modules/d2admin.js.REMOVED.git-id
Normal file
@@ -0,0 +1 @@
|
||||
151df8419f384f17f5ccd7a9df8cb5dd16e8c255
|
||||
1
static/image/icon/500/setting.png.REMOVED.git-id
Normal file
1
static/image/icon/500/setting.png.REMOVED.git-id
Normal file
@@ -0,0 +1 @@
|
||||
9851294b2913d958bb04963a36bd096527b0f506
|
||||
Reference in New Issue
Block a user