zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'master' of github.com:PanJiaChen/vue-element-admin

This commit is contained in:
xiaomi 2018-08-22 11:13:14 +08:00
parent 17e65a8537 d5a8fb1e71
commit 1fd60d0d8c
143 changed files with 2194 additions and 1592 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
.eslintrc.js
View File

@ -1,7 +1,7 @@
module.exports = { module.exports = {
root: true, root: true,
parser: 'babel-eslint',
parserOptions: { parserOptions: {
parser: 'babel-eslint',
sourceType: 'module' sourceType: 'module'
}, },
env: { env: {
@ -9,22 +9,19 @@ module.exports = {
node: true, node: true,
es6: true, es6: true,
}, },
extends: 'eslint:recommended', extends: ['plugin:vue/recommended', 'eslint:recommended'],
// required to lint *.vue files
plugins: [
'html'
],
// check if imports actually resolve
'settings': {
'import/resolver': {
'webpack': {
'config': 'build/webpack.base.conf.js'
}
}
},
// add your custom rules here // add your custom rules here
//it is base on https://github.com/vuejs/eslint-config-vue //it is base on https://github.com/vuejs/eslint-config-vue
'rules': { rules: {
"vue/max-attributes-per-line": [2, {
"singleline": 10,
"multiline": {
"max": 1,
"allowFirstLine": false
}
}],
"vue/name-property-casing": ["error", "PascalCase"],
'accessor-pairs': 2, 'accessor-pairs': 2,
'arrow-spacing': [2, { 'arrow-spacing': [2, {
'before': true, 'before': true,
@ -196,4 +193,3 @@ module.exports = {
'array-bracket-spacing': [2, 'never'] 'array-bracket-spacing': [2, 'never']
} }
} }

31
README.md
View File

@ -4,10 +4,10 @@
<p align="center"> <p align="center">
<a href="https://github.com/vuejs/vue"> <a href="https://github.com/vuejs/vue">
<img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue"> <img src="https://img.shields.io/badge/vue-2.5.17-brightgreen.svg" alt="vue">
</a> </a>
<a href="https://github.com/ElemeFE/element"> <a href="https://github.com/ElemeFE/element">
<img src="https://img.shields.io/badge/element--ui-2.3.2-brightgreen.svg" alt="element-ui"> <img src="https://img.shields.io/badge/element--ui-2.4.6-brightgreen.svg" alt="element-ui">
</a> </a>
<a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow"> <a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
<img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status"> <img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
@ -38,25 +38,32 @@ It is a magical vue admin based on the newest development stack of vue, built-in
- [Donate](https://panjiachen.github.io/vue-element-admin-site/donate/) - [Donate](https://panjiachen.github.io/vue-element-admin-site/donate/)
- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 国内用户可访问该地址在线预览
**This project is positioned as a background integration solution and is not suitable for secondary development as a basic template.** **This project is positioned as a background integration solution and is not suitable for secondary development as a basic template.**
- Base template recommends using: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)   - Base template recommends using: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
- Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) - Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
**This project does not support low version browsers (e.g. IE). Please add polyfill yourself if you need them.**
**Note: This project uses element-ui@2.3.0+ version, so the minimum compatible vue@2.5.0+**
**Start using `webpack4` from `v3.8.0`. If you still want to continue using `webpack3`, please use this branch [webpack3](https://github.com/PanJiaChen/vue-element-admin/tree/webpack3)**
## Preparation ## Preparation
You need to install [node](http://nodejs.org/) and [git](https://git-scm.com/) locally. The project is based on [ES2015+](http://es6.ruanyifeng.com/), [vue](https://cn.vuejs.org/index.html), [vuex](https://vuex.vuejs.org/zh-cn/), [vue-router](https://router.vuejs.org/zh-cn/), [axios](https://github.com/axios/axios) and [element-ui](https://github.com/ElemeFE/element), all request data is simulated using [Mock.js](https://github.com/nuysoft/Mock). You need to install [node](http://nodejs.org/) and [git](https://git-scm.com/) locally. The project is based on [ES2015+](http://es6.ruanyifeng.com/), [vue](https://cn.vuejs.org/index.html), [vuex](https://vuex.vuejs.org/zh-cn/), [vue-router](https://router.vuejs.org/zh-cn/), [axios](https://github.com/axios/axios) and [element-ui](https://github.com/ElemeFE/element), all request data is simulated using [Mock.js](https://github.com/nuysoft/Mock).
Understanding and learning this knowledge in advance will greatly help the use of this project. Understanding and learning this knowledge in advance will greatly help the use of this project.
**This project does not support low version browsers (e.g. IE). Please add polyfill yourself if you need them.** ---
**Note: This project uses element-ui@2.3.0+ version, so the minimum compatible vue@2.5.0+**
<p align="center"> <p align="center">
<img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png"> <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
</p> </p>
## Features ## Features
``` ```
- Login / Logout - Login / Logout
@ -136,6 +143,7 @@ npm run dev
This will automatically open http://localhost:9527. This will automatically open http://localhost:9527.
## Build ## Build
```bash ```bash
# build for test environment # build for test environment
npm run build:sit npm run build:sit
@ -145,10 +153,14 @@ npm run build:prod
``` ```
## Advanced ## Advanced
```bash ```bash
# --report to build with bundle size analytics # --report to build with bundle size analytics
npm run build:prod --report npm run build:prod --report
# --generate a bundle size analytics. default: bundle-report.html
npm run build:prod --generate_report
# --preview to start a server in local to preview # --preview to start a server in local to preview
npm run build:prod --preview npm run build:prod --preview
@ -162,12 +174,15 @@ npm run lint -- --fix
Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) for more information Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) for more information
## Changelog ## Changelog
Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases). Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
## Online Demo ## Online Demo
[Preview](http://panjiachen.github.io/vue-element-admin) [Preview](http://panjiachen.github.io/vue-element-admin)
## Donate ## Donate
If you find this project useful, you can buy author a glass of juice :tropical_drink: If you find this project useful, you can buy author a glass of juice :tropical_drink:
![donate](https://wpimg.wallstcn.com/bd273f0d-83a0-4ef2-92e1-9ac8ed3746b9.png) ![donate](https://wpimg.wallstcn.com/bd273f0d-83a0-4ef2-92e1-9ac8ed3746b9.png)

60
README.zh-CN.md
View File

@ -24,50 +24,58 @@
## 简介 ## 简介
[vue-element-admin](http://panjiachen.github.io/vue-element-admin) 是一个后台集成解决方案，它基于 [vue](https://github.com/vuejs/vue) 和 [element](https://github.com/ElemeFE/element)。它使用了最新的前端技术栈，内置了i18国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。 [vue-element-admin](http://panjiachen.github.io/vue-element-admin) 是一个后台集成解决方案，它基于 [vue](https://github.com/vuejs/vue) 和 [element](https://github.com/ElemeFE/element)。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。
- [在线访问](http://panjiachen.github.io/vue-element-admin) - [在线访问](http://panjiachen.github.io/vue-element-admin)
- [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/) - [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)
- [Gitter讨论组](https://gitter.im/vue-element-admin/discuss) - [Gitter 讨论组](https://gitter.im/vue-element-admin/discuss)
- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki) - [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
- [Donate](https://panjiachen.github.io/vue-element-admin-site/zh/donate/) - [Donate](https://panjiachen.github.io/vue-element-admin-site/zh/donate/)
- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 国内用户可访问该地址在线预览
- [国内访问文档](https://panjiachen.gitee.io/vue-element-admin-site/zh/) 方便没翻墙的用户查看文档
**本项目的定位是后台集成方案，不适合当基础模板来开发。** **本项目的定位是后台集成方案，不适合当基础模板来开发。**
- 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
- 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) - 模板建议使用: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
- 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西，或者加入[qq 群](https://github.com/PanJiaChen/vue-element-admin/issues/602)
**注意：该项目使用 element-ui@2.3.0+ 版本，所以最低兼容 vue@2.5.0+**
**从`v3.8.0`开始使用`webpack4`。所以若还想使用`webpack3`开发，请使用该分支[webpack3](https://github.com/PanJiaChen/vue-element-admin/tree/webpack3)**
**该项目不支持低版本浏览器(如 ie)，有需求请自行添加 polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
## 前序准备 ## 前序准备
你需要在本地安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。本项目技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 、[axios](https://github.com/axios/axios) 和 [element-ui](https://github.com/ElemeFE/element)，所有的请求数据都使用[Mock.js](https://github.com/nuysoft/Mock)模拟，提前了解和学习这些知识会对使用本项目有很大的帮助。 你需要在本地安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。本项目技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 、[axios](https://github.com/axios/axios) 和 [element-ui](https://github.com/ElemeFE/element)，所有的请求数据都使用[Mock.js](https://github.com/nuysoft/Mock)模拟，提前了解和学习这些知识会对使用本项目有很大的帮助。
同时配套一个系列的教程文章，如何从零构建后一个完整的后台项目，建议大家先看完这些文章再来实践本项目 同时配套一个系列的教程文章，如何从零构建后一个完整的后台项目，建议大家先看完这些文章再来实践本项目
- [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
- [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
- [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
- [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
- [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
- [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)
- [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
- [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
- [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
- [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
- [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
- [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)
- [手摸手，带你用合理的姿势使用 webpack4（上）](https://juejin.im/post/5b56909a518825195f499806)
- [手摸手，带你用合理的姿势使用 webpack4（下）](https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc)
或者加入该群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西 **如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 和 pr**
**如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 和 pr**
**本项目并不是一个脚手架，更倾向于是一个集成解决方案**
**注意：该项目使用 element-ui@2.3.0+ 版本，所以最低兼容 vue@2.5.0+**
**该项目不支持低版本浏览器(如ie)，有需求请自行添加polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
<p align="center"> <p align="center">
<img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png"> <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
</p> </p>
## 功能 ## 功能
``` ```
- 登录 / 注销 - 登录 / 注销
@ -132,22 +140,25 @@
``` ```
## 开发 ## 开发
```bash ```bash
# 克隆项目 # 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git git clone https://github.com/PanJiaChen/vue-element-admin.git
# 安装依赖 # 安装依赖
npm install npm install
   
# 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题 # 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org npm install --registry=https://registry.npm.taobao.org
# 启动服务 # 启动服务
npm run dev npm run dev
``` ```
浏览器访问 http://localhost:9527 浏览器访问 http://localhost:9527
## 发布 ## 发布
```bash ```bash
# 构建测试环境 # 构建测试环境
npm run build:sit npm run build:sit
@ -157,9 +168,13 @@ npm run build:prod
``` ```
## 其它 ## 其它
```bash ```bash
# --report to build with bundle size analytics # --report to build with bundle size analytics
npm run build:prod --report npm run build:prod
# --generate a bundle size analytics. default: bundle-report.html
npm run build:prod --generate_report
# --preview to start a server in local to preview # --preview to start a server in local to preview
npm run build:prod --preview npm run build:prod --preview
@ -174,12 +189,15 @@ npm run lint -- --fix
更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/) 更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)
## Changelog ## Changelog
Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases). Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
## Online Demo ## Online Demo
[在线 Demo](http://panjiachen.github.io/vue-element-admin) [在线 Demo](http://panjiachen.github.io/vue-element-admin)
## Donate ## Donate
如果你觉得这个项目帮助到了你，你可以帮作者买一杯果汁表示鼓励 :tropical_drink: 如果你觉得这个项目帮助到了你，你可以帮作者买一杯果汁表示鼓励 :tropical_drink:
![donate](https://panjiachen.github.io/donate/donation.png) ![donate](https://panjiachen.github.io/donate/donation.png)

39
build/build.js
View File

@ -8,10 +8,12 @@ const chalk = require('chalk')
const webpack = require('webpack') const webpack = require('webpack')
const config = require('../config') const config = require('../config')
const webpackConfig = require('./webpack.prod.conf') const webpackConfig = require('./webpack.prod.conf')
var connect = require('connect'); var connect = require('connect')
var serveStatic = require('serve-static') var serveStatic = require('serve-static')
const spinner = ora('building for ' + process.env.env_config + ' environment...') const spinner = ora(
'building for ' + process.env.env_config + ' environment...'
)
spinner.start() spinner.start()
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
@ -19,13 +21,15 @@ rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
webpack(webpackConfig, (err, stats) => { webpack(webpackConfig, (err, stats) => {
spinner.stop() spinner.stop()
if (err) throw err if (err) throw err
process.stdout.write(stats.toString({ process.stdout.write(
stats.toString({
colors: true, colors: true,
modules: false, modules: false,
children: false, children: false,
chunks: false, chunks: false,
chunkModules: false chunkModules: false
}) + '\n\n') }) + '\n\n'
)
if (stats.hasErrors()) { if (stats.hasErrors()) {
console.log(chalk.red(' Build failed with errors.\n')) console.log(chalk.red(' Build failed with errors.\n'))
@ -33,24 +37,31 @@ rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
} }
console.log(chalk.cyan(' Build complete.\n')) console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow( console.log(
chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' + ' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n' " Opening index.html over file:// won't work.\n"
)) )
)
if (process.env.npm_config_preview) { if (process.env.npm_config_preview) {
const port = 9526 const port = 9526
const host = "http://localhost:" + port const host = 'http://localhost:' + port
const basePath = config.build.assetsPublicPath const basePath = config.build.assetsPublicPath
const app = connect() const app = connect()
app.use(basePath, serveStatic('./dist', { app.use(
'index': ['index.html', '/'] basePath,
})) serveStatic('./dist', {
index: ['index.html', '/']
})
)
app.listen(port, function () { app.listen(port, function() {
console.log(chalk.green(`> Listening at http://localhost:${port}${basePath}`)) console.log(
}); chalk.green(`> Listening at http://localhost:${port}${basePath}`)
)
})
} }
}) })
}) })

22
build/check-versions.js
View File

@ -4,8 +4,11 @@ const semver = require('semver')
const packageConfig = require('../package.json') const packageConfig = require('../package.json')
const shell = require('shelljs') const shell = require('shelljs')
function exec (cmd) { function exec(cmd) {
return require('child_process').execSync(cmd).toString().trim() return require('child_process')
.execSync(cmd)
.toString()
.trim()
} }
const versionRequirements = [ const versionRequirements = [
@ -24,15 +27,18 @@ if (shell.which('npm')) {
}) })
} }
module.exports = function () { module.exports = function() {
const warnings = [] const warnings = []
for (let i = 0; i < versionRequirements.length; i++) { for (let i = 0; i < versionRequirements.length; i++) {
const mod = versionRequirements[i] const mod = versionRequirements[i]
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' + warnings.push(
chalk.red(mod.currentVersion) + ' should be ' + mod.name +
': ' +
chalk.red(mod.currentVersion) +
' should be ' +
chalk.green(mod.versionRequirement) chalk.green(mod.versionRequirement)
) )
} }
@ -40,7 +46,11 @@ module.exports = function () {
if (warnings.length) { if (warnings.length) {
console.log('') console.log('')
console.log(chalk.yellow('To use this template, you must update following to modules:')) console.log(
chalk.yellow(
'To use this template, you must update following to modules:'
)
)
console.log() console.log()
for (let i = 0; i < warnings.length; i++) { for (let i = 0; i < warnings.length; i++) {

45
build/utils.js
View File

@ -1,18 +1,19 @@
'use strict' 'use strict'
const path = require('path') const path = require('path')
const config = require('../config') const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const packageConfig = require('../package.json') const packageConfig = require('../package.json')
exports.assetsPath = function (_path) { exports.assetsPath = function(_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production' const assetsSubDirectory =
process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory ? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory : config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path) return path.posix.join(assetsSubDirectory, _path)
} }
exports.cssLoaders = function (options) { exports.cssLoaders = function(options) {
options = options || {} options = options || {}
const cssLoader = { const cssLoader = {
@ -30,8 +31,22 @@ exports.cssLoaders = function (options) {
} }
// generate loader string to be used with extract text plugin // generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) { function generateLoaders(loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] const loaders = []
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
loaders.push(MiniCssExtractPlugin.loader)
} else {
loaders.push('vue-style-loader')
}
loaders.push(cssLoader)
if (options.usePostCSS) {
loaders.push(postcssLoader)
}
if (loader) { if (loader) {
loaders.push({ loaders.push({
@ -42,24 +57,16 @@ exports.cssLoaders = function (options) {
}) })
} }
// Extract CSS when that option is specified return loaders
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
} }
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html // https://vue-loader.vuejs.org/en/configurations/extract-css.html
return { return {
css: generateLoaders(), css: generateLoaders(),
postcss: generateLoaders(), postcss: generateLoaders(),
less: generateLoaders('less'), less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }), sass: generateLoaders('sass', {
indentedSyntax: true
}),
scss: generateLoaders('sass'), scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'), stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus') styl: generateLoaders('stylus')
@ -67,7 +74,7 @@ exports.cssLoaders = function (options) {
} }
// Generate loaders for standalone style files (outside of .vue) // Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) { exports.styleLoaders = function(options) {
const output = [] const output = []
const loaders = exports.cssLoaders(options) const loaders = exports.cssLoaders(options)

19
build/vue-loader.conf.js
View File

@ -1,22 +1,5 @@
'use strict' 'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap
module.exports = { module.exports = {
loaders: utils.cssLoaders({ //You can set the vue-loader configuration by yourself.
sourceMap: sourceMapEnabled,
extract: isProduction
}),
cssSourceMap: sourceMapEnabled,
cacheBusting: config.dev.cacheBusting,
transformToRequire: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href'
}
} }

15
build/webpack.base.conf.js
View File

@ -2,9 +2,10 @@
const path = require('path') const path = require('path')
const utils = require('./utils') const utils = require('./utils')
const config = require('../config') const config = require('../config')
const { VueLoaderPlugin } = require('vue-loader')
const vueLoaderConfig = require('./vue-loader.conf') const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) { function resolve(dir) {
return path.join(__dirname, '..', dir) return path.join(__dirname, '..', dir)
} }
@ -27,14 +28,15 @@ module.exports = {
output: { output: {
path: config.build.assetsRoot, path: config.build.assetsRoot,
filename: '[name].js', filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production' publicPath:
process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath ? config.build.assetsPublicPath
: config.dev.assetsPublicPath : config.dev.assetsPublicPath
}, },
resolve: { resolve: {
extensions: ['.js', '.vue', '.json'], extensions: ['.js', '.vue', '.json'],
alias: { alias: {
'@': resolve('src'), '@': resolve('src')
} }
}, },
module: { module: {
@ -48,7 +50,11 @@ module.exports = {
{ {
test: /\.js$/, test: /\.js$/,
loader: 'babel-loader?cacheDirectory', loader: 'babel-loader?cacheDirectory',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] include: [
resolve('src'),
resolve('test'),
resolve('node_modules/webpack-dev-server/client')
]
}, },
{ {
test: /\.svg$/, test: /\.svg$/,
@ -85,6 +91,7 @@ module.exports = {
} }
] ]
}, },
plugins: [new VueLoaderPlugin()],
node: { node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue // prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native). // source contains it (although only uses it if it's native).

26
build/webpack.dev.conf.js
View File

@ -9,7 +9,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder') const portfinder = require('portfinder')
function resolve (dir) { function resolve(dir) {
return path.join(__dirname, '..', dir) return path.join(__dirname, '..', dir)
} }
@ -17,8 +17,12 @@ const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT) const PORT = process.env.PORT && Number(process.env.PORT)
const devWebpackConfig = merge(baseWebpackConfig, { const devWebpackConfig = merge(baseWebpackConfig, {
mode: 'development',
module: { module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) rules: utils.styleLoaders({
sourceMap: config.dev.cssSourceMap,
usePostCSS: true
})
}, },
// cheap-module-eval-source-map is faster for development // cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool, devtool: config.dev.devtool,
@ -39,7 +43,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
proxy: config.dev.proxyTable, proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: { watchOptions: {
poll: config.dev.poll, poll: config.dev.poll
} }
}, },
plugins: [ plugins: [
@ -47,8 +51,6 @@ const devWebpackConfig = merge(baseWebpackConfig, {
'process.env': require('../config/dev.env') 'process.env': require('../config/dev.env')
}), }),
new webpack.HotModuleReplacementPlugin(), new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin // https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
filename: 'index.html', filename: 'index.html',
@ -57,7 +59,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
favicon: resolve('favicon.ico'), favicon: resolve('favicon.ico'),
title: 'vue-element-admin', title: 'vue-element-admin',
path: config.dev.assetsPublicPath + config.dev.assetsSubDirectory path: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
}), })
] ]
}) })
@ -73,14 +75,20 @@ module.exports = new Promise((resolve, reject) => {
devWebpackConfig.devServer.port = port devWebpackConfig.devServer.port = port
// Add FriendlyErrorsPlugin // Add FriendlyErrorsPlugin
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ devWebpackConfig.plugins.push(
new FriendlyErrorsPlugin({
compilationSuccessInfo: { compilationSuccessInfo: {
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], messages: [
`Your application is running here: http://${
devWebpackConfig.devServer.host
}:${port}`
]
}, },
onErrors: config.dev.notifyOnErrors onErrors: config.dev.notifyOnErrors
? utils.createNotifierCallback() ? utils.createNotifierCallback()
: undefined : undefined
})) })
)
resolve(devWebpackConfig) resolve(devWebpackConfig)
} }

197
build/webpack.prod.conf.js
View File

@ -7,17 +7,23 @@ const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf') const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin') const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin') const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
function resolve (dir) { function resolve(dir) {
return path.join(__dirname, '..', dir) return path.join(__dirname, '..', dir)
} }
const env = require('../config/'+process.env.env_config+'.env') const env = require('../config/' + process.env.env_config + '.env')
// For NamedChunksPlugin
const seen = new Set()
const nameLength = 4
const webpackConfig = merge(baseWebpackConfig, { const webpackConfig = merge(baseWebpackConfig, {
mode: 'production',
module: { module: {
rules: utils.styleLoaders({ rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap, sourceMap: config.build.productionSourceMap,
@ -28,37 +34,18 @@ const webpackConfig = merge(baseWebpackConfig, {
devtool: config.build.productionSourceMap ? config.build.devtool : false, devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: { output: {
path: config.build.assetsRoot, path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'), filename: utils.assetsPath('js/[name].[chunkhash:8].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') chunkFilename: utils.assetsPath('js/[name].[chunkhash:8].js')
}, },
plugins: [ plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html // http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({ new webpack.DefinePlugin({
'process.env': env 'process.env': env
}), }),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
// extract css into its own file // extract css into its own file
new ExtractTextPlugin({ new MiniCssExtractPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'), filename: utils.assetsPath('css/[name].[contenthash:8].css'),
// Setting the following option to `false` will not extract CSS from codesplit chunks. chunkFilename: utils.assetsPath('css/[name].[contenthash:8].css')
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
allChunks: false,
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}), }),
// generate dist index.html with correct asset hash for caching. // generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html // you can customize output by editing /index.html
@ -76,68 +63,34 @@ const webpackConfig = merge(baseWebpackConfig, {
removeAttributeQuotes: true removeAttributeQuotes: true
// more options: // more options:
// https://github.com/kangax/html-minifier#options-quick-reference // https://github.com/kangax/html-minifier#options-quick-reference
}, }
// necessary to consistently work with multiple chunks via CommonsChunkPlugin // default sort mode uses toposort which cannot handle cyclic deps
chunksSortMode: 'dependency' // in certain cases, and in webpack 4, chunk order in HTML doesn't
// matter anyway
}),
new ScriptExtHtmlWebpackPlugin({
//`runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/
}),
// keep chunk.id stable when chunk has no name
new webpack.NamedChunksPlugin(chunk => {
if (chunk.name) {
return chunk.name
}
const modules = Array.from(chunk.modulesIterable)
if (modules.length > 1) {
const hash = require('hash-sum')
const joinedHash = hash(modules.map(m => m.id).join('_'))
let len = nameLength
while (seen.has(joinedHash.substr(0, len))) len++
seen.add(joinedHash.substr(0, len))
return `chunk-${joinedHash.substr(0, len)}`
} else {
return modules[0].id
}
}), }),
// keep module.id stable when vender modules does not change // keep module.id stable when vender modules does not change
new webpack.HashedModuleIdsPlugin(), new webpack.HashedModuleIdsPlugin(),
// enable scope hoisting
new webpack.optimize.ModuleConcatenationPlugin(),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3
}),
// split echarts into its own file
new webpack.optimize.CommonsChunkPlugin({
async: 'echarts',
minChunks(module) {
var context = module.context;
return context && (context.indexOf('echarts') >= 0 || context.indexOf('zrender') >= 0);
}
}),
// split xlsx into its own file
new webpack.optimize.CommonsChunkPlugin({
async: 'xlsx',
minChunks(module) {
var context = module.context;
return context && (context.indexOf('xlsx') >= 0);
}
}),
// split codemirror into its own file
new webpack.optimize.CommonsChunkPlugin({
async: 'codemirror',
minChunks(module) {
var context = module.context;
return context && (context.indexOf('codemirror') >= 0);
}
}),
// copy custom static assets // copy custom static assets
new CopyWebpackPlugin([ new CopyWebpackPlugin([
{ {
@ -146,7 +99,48 @@ const webpackConfig = merge(baseWebpackConfig, {
ignore: ['.*'] ignore: ['.*']
} }
]) ])
],
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // 只打包初始时依赖的第三方
},
elementUI: {
name: 'chunk-elementUI', // 单独将 elementUI 拆包
priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app
test: /[\\/]node_modules[\\/]element-ui[\\/]/
},
commons: {
name: 'chunk-comomns',
test: resolve('src/components'), // 可自定义拓展你的规则
minChunks: 3, // 最小公用次数
priority: 5,
reuseExistingChunk: true
}
}
},
runtimeChunk: 'single',
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
mangle: {
safari10: true
}
},
sourceMap: config.build.productionSourceMap,
cache: true,
parallel: true
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSAssetsPlugin()
] ]
}
}) })
if (config.build.productionGzip) { if (config.build.productionGzip) {
@ -157,9 +151,7 @@ if (config.build.productionGzip) {
asset: '[path].gz[query]', asset: '[path].gz[query]',
algorithm: 'gzip', algorithm: 'gzip',
test: new RegExp( test: new RegExp(
'\\.(' + '\\.(' + config.build.productionGzipExtensions.join('|') + ')$'
config.build.productionGzipExtensions.join('|') +
')$'
), ),
threshold: 10240, threshold: 10240,
minRatio: 0.8 minRatio: 0.8
@ -167,9 +159,28 @@ if (config.build.productionGzip) {
) )
} }
if (config.build.bundleAnalyzerReport) { if (config.build.generateAnalyzerReport || config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
webpackConfig.plugins.push(new BundleAnalyzerPlugin()) .BundleAnalyzerPlugin
if (config.build.bundleAnalyzerReport) {
webpackConfig.plugins.push(
new BundleAnalyzerPlugin({
analyzerPort: 8080,
generateStatsFile: false
})
)
}
if (config.build.generateAnalyzerReport) {
webpackConfig.plugins.push(
new BundleAnalyzerPlugin({
analyzerMode: 'static',
reportFilename: 'bundle-report.html',
openAnalyzer: false
})
)
}
} }
module.exports = webpackConfig module.exports = webpackConfig

21
config/index.js
View File

@ -6,7 +6,6 @@ const path = require('path')
module.exports = { module.exports = {
dev: { dev: {
// Paths // Paths
assetsSubDirectory: 'static', assetsSubDirectory: 'static',
assetsPublicPath: '/', assetsPublicPath: '/',
@ -36,19 +35,14 @@ module.exports = {
*/ */
// https://webpack.js.org/configuration/devtool/#development // https://webpack.js.org/configuration/devtool/#development
devtool: '#cheap-source-map', devtool: 'cheap-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
// CSS Sourcemaps off by default because relative paths are "buggy" // CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README // with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps) // (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected, // In our experience, they generally work as expected,
// just be aware of this issue when enabling this option. // just be aware of this issue when enabling this option.
cssSourceMap: false, cssSourceMap: false
}, },
build: { build: {
@ -66,14 +60,14 @@ module.exports = {
* then assetsPublicPath should be set to "/bar/". * then assetsPublicPath should be set to "/bar/".
* In most cases please use '/' !!! * In most cases please use '/' !!!
*/ */
assetsPublicPath: '/vue-element-admin/', // If you are deployed on the root path, please use '/' assetsPublicPath: '/',
/** /**
* Source Maps * Source Maps
*/ */
productionSourceMap: false, productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production // https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map', devtool: 'source-map',
// Gzip off by default as many popular static hosts such as // Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you. // Surge or Netlify already gzip all static assets for you.
@ -84,8 +78,11 @@ module.exports = {
// Run the build command with an extra argument to // Run the build command with an extra argument to
// View the bundle analyzer report after build finishes: // View the bundle analyzer report after build finishes:
// `npm run build --report` // `npm run build:prod --report`
// Set to `true` or `false` to always turn it on or off // Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report bundleAnalyzerReport: process.env.npm_config_report || false,
// `npm run build:prod --generate_report`
generateAnalyzerReport: process.env.npm_config_generate_report || false
} }
} }

103
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "vue-element-admin", "name": "vue-element-admin",
"version": "3.7.2", "version": "3.8.1",
"description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features", "description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features",
"author": "Pan <panfree23@gmail.com>", "author": "Pan <panfree23@gmail.com>",
"license": "MIT", "license": "MIT",
@ -33,15 +33,15 @@
"url": "https://github.com/PanJiaChen/vue-element-admin/issues" "url": "https://github.com/PanJiaChen/vue-element-admin/issues"
}, },
"dependencies": { "dependencies": {
"axios": "0.17.1", "axios": "0.18.0",
"clipboard": "1.7.1", "clipboard": "1.7.1",
"codemirror": "5.32.0", "codemirror": "5.39.2",
"connect": "3.6.6", "connect": "3.6.6",
"driver.js": "0.5.2", "driver.js": "0.5.2",
"dropzone": "5.2.0", "dropzone": "5.2.0",
"echarts": "3.8.5", "echarts": "4.1.0",
"element-ui": "2.3.2", "element-ui": "2.4.6",
"file-saver": "1.3.3", "file-saver": "1.3.8",
"font-awesome": "4.7.0", "font-awesome": "4.7.0",
"js-cookie": "2.2.0", "js-cookie": "2.2.0",
"jsonlint": "1.6.3", "jsonlint": "1.6.3",
@ -50,14 +50,13 @@
"normalize.css": "7.0.0", "normalize.css": "7.0.0",
"nprogress": "0.2.0", "nprogress": "0.2.0",
"screenfull": "3.3.2", "screenfull": "3.3.2",
"serve-static": "1.13.2", "showdown": "1.8.6",
"showdown": "1.8.5",
"simplemde": "1.11.2", "simplemde": "1.11.2",
"sortablejs": "1.7.0", "sortablejs": "1.7.0",
"vue": "2.5.10", "vue": "2.5.17",
"vue-count-to": "1.0.13", "vue-count-to": "1.0.13",
"vue-i18n": "7.3.2", "vue-i18n": "7.3.2",
"vue-multiselect": "2.0.8", "vue-multiselect": "2.1.0",
"vue-router": "3.0.1", "vue-router": "3.0.1",
"vue-splitpane": "1.0.2", "vue-splitpane": "1.0.2",
"vuedraggable": "^2.16.0", "vuedraggable": "^2.16.0",
@ -65,57 +64,61 @@
"xlsx": "^0.11.16" "xlsx": "^0.11.16"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "7.2.3", "autoprefixer": "8.5.0",
"babel-core": "6.26.0", "babel-core": "6.26.3",
"babel-eslint": "8.0.3", "babel-eslint": "8.2.6",
"babel-helper-vue-jsx-merge-props": "2.0.3", "babel-helper-vue-jsx-merge-props": "2.0.3",
"babel-loader": "7.1.2", "babel-loader": "7.1.5",
"babel-plugin-dynamic-import-node": "^1.2.0", "babel-plugin-dynamic-import-node": "2.0.0",
"babel-plugin-syntax-jsx": "6.18.0", "babel-plugin-syntax-jsx": "6.18.0",
"babel-plugin-transform-runtime": "6.23.0", "babel-plugin-transform-runtime": "6.23.0",
"babel-plugin-transform-vue-jsx": "3.5.0", "babel-plugin-transform-vue-jsx": "3.7.0",
"babel-preset-env": "1.6.1", "babel-preset-env": "1.7.0",
"babel-preset-stage-2": "6.24.1", "babel-preset-stage-2": "6.24.1",
"chalk": "2.3.0", "chalk": "2.4.1",
"copy-webpack-plugin": "4.3.0", "copy-webpack-plugin": "4.5.2",
"cross-env": "5.1.1", "cross-env": "5.2.0",
"css-loader": "0.28.7", "css-loader": "1.0.0",
"eslint": "4.13.1", "eslint": "4.19.1",
"eslint-friendly-formatter": "3.0.0", "eslint-friendly-formatter": "4.0.1",
"eslint-loader": "1.9.0", "eslint-loader": "2.0.0",
"eslint-plugin-html": "4.0.1", "eslint-plugin-vue": "4.7.1",
"extract-text-webpack-plugin": "3.0.2", "file-loader": "1.1.11",
"file-loader": "1.1.5", "friendly-errors-webpack-plugin": "1.7.0",
"friendly-errors-webpack-plugin": "1.6.1", "hash-sum": "1.0.2",
"html-webpack-plugin": "2.30.1", "html-webpack-plugin": "^4.0.0-alpha",
"husky": "0.14.3", "husky": "0.14.3",
"lint-staged": "7.2.0", "lint-staged": "7.2.2",
"node-notifier": "5.1.2", "mini-css-extract-plugin": "0.4.1",
"node-notifier": "5.2.1",
"node-sass": "^4.7.2", "node-sass": "^4.7.2",
"optimize-css-assets-webpack-plugin": "3.2.0", "optimize-css-assets-webpack-plugin": "5.0.0",
"ora": "1.3.0", "ora": "3.0.0",
"portfinder": "1.0.13", "portfinder": "1.0.13",
"postcss-import": "11.0.0", "postcss-import": "11.1.0",
"postcss-loader": "2.0.9", "postcss-loader": "2.1.6",
"postcss-url": "7.3.0", "postcss-url": "7.3.2",
"rimraf": "2.6.2", "rimraf": "2.6.2",
"sass-loader": "6.0.6", "sass-loader": "7.0.3",
"script-ext-html-webpack-plugin": "2.0.1",
"script-loader": "0.7.2", "script-loader": "0.7.2",
"semver": "5.4.1", "semver": "5.5.0",
"shelljs": "0.7.8", "serve-static": "1.13.2",
"svg-sprite-loader": "3.5.2", "shelljs": "0.8.2",
"uglifyjs-webpack-plugin": "1.1.3", "svg-sprite-loader": "3.8.0",
"url-loader": "0.6.2", "uglifyjs-webpack-plugin": "1.2.7",
"vue-loader": "13.7.2", "url-loader": "1.0.1",
"vue-style-loader": "3.0.3", "vue-loader": "15.3.0",
"vue-template-compiler": "2.5.10", "vue-style-loader": "4.1.2",
"webpack": "3.10.0", "vue-template-compiler": "2.5.17",
"webpack-bundle-analyzer": "2.9.1", "webpack": "4.16.5",
"webpack-dev-server": "2.9.7", "webpack-bundle-analyzer": "2.13.1",
"webpack-merge": "4.1.1" "webpack-cli": "3.1.0",
"webpack-dev-server": "3.1.5",
"webpack-merge": "4.1.4"
}, },
"engines": { "engines": {
"node": ">= 4.0.0", "node": ">= 6.0.0",
"npm": ">= 3.0.0" "npm": ">= 3.0.0"
}, },
"browserslist": [ "browserslist": [

6
src/App.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div id="app"> <div id="app">
<router-view></router-view> <router-view/>
</div> </div>
</template> </template>
<script> <script>
export default{ export default{
name: 'App' name: 'App'
} }
</script> </script>

4
src/components/BackToTop/index.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<transition :name="transitionName"> <transition :name="transitionName">
<div class="back-to-ceiling" @click="backToTop" v-show="visible" :style="customStyle"> <div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop">
<svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height: 16px; width: 16px;"> <svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height: 16px; width: 16px;">
<title>回到顶部</title> <title>回到顶部</title>
<g> <g>
<path d="M12.036 15.59c0 .55-.453.995-.997.995H5.032c-.55 0-.997-.445-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29c.39-.39 1.026-.385 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" fill-rule="evenodd"></path> <path d="M12.036 15.59c0 .55-.453.995-.997.995H5.032c-.55 0-.997-.445-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29c.39-.39 1.026-.385 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" fill-rule="evenodd"/>
</g> </g>
</svg> </svg>
</div> </div>

14
src/components/Breadcrumb/index.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<el-breadcrumb class="app-breadcrumb" separator="/"> <el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb"> <transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path" v-if='item.meta.title'> <el-breadcrumb-item v-for="(item,index) in levelList" v-if="item.meta.title" :key="item.path">
<span v-if='item.redirect==="noredirect"||index==levelList.length-1' class="no-redirect">{{generateTitle(item.meta.title)}}</span> <span v-if="item.redirect===&quot;noredirect&quot;||index==levelList.length-1" class="no-redirect">{{ generateTitle(item.meta.title) }}</span>
<router-link v-else :to="item.redirect||item.path">{{generateTitle(item.meta.title)}}</router-link> <router-link v-else :to="item.redirect||item.path">{{ generateTitle(item.meta.title) }}</router-link>
</el-breadcrumb-item> </el-breadcrumb-item>
</transition-group> </transition-group>
</el-breadcrumb> </el-breadcrumb>
@ -13,9 +13,6 @@
import { generateTitle } from '@/utils/i18n' import { generateTitle } from '@/utils/i18n'
export default { export default {
created() {
this.getBreadcrumb()
},
data() { data() {
return { return {
levelList: null levelList: null
@ -26,12 +23,15 @@ export default {
this.getBreadcrumb() this.getBreadcrumb()
} }
}, },
created() {
this.getBreadcrumb()
},
methods: { methods: {
generateTitle, generateTitle,
getBreadcrumb() { getBreadcrumb() {
let matched = this.$route.matched.filter(item => item.name) let matched = this.$route.matched.filter(item => item.name)
const first = matched[0] const first = matched[0]
if (first && first.name !== 'dashboard') { if (first && first.name.trim().toLocaleLowerCase() !== 'Dashboard'.toLocaleLowerCase()) {
matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched) matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
} }
this.levelList = matched this.levelList = matched

2
src/components/Charts/keyboard.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :class="className" :id="id" :style="{height:height,width:width}"></div> <div :class="className" :id="id" :style="{height:height,width:width}"/>
</template> </template>
<script> <script>

2
src/components/Charts/lineMarker.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :class="className" :id="id" :style="{height:height,width:width}"></div> <div :class="className" :id="id" :style="{height:height,width:width}"/>
</template> </template>
<script> <script>

2
src/components/Charts/mixChart.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :class="className" :id="id" :style="{height:height,width:width}"></div> <div :class="className" :id="id" :style="{height:height,width:width}"/>
</template> </template>
<script> <script>

42
src/components/DndList/index.vue
View File

@ -1,23 +1,23 @@
<template> <template>
<div class="dndList"> <div class="dndList">
<div class="dndList-list" :style="{width:width1}"> <div :style="{width:width1}" class="dndList-list">
<h3>{{list1Title}}</h3> <h3>{{ list1Title }}</h3>
<draggable :list="list1" class="dragArea" :options="{group:'article'}"> <draggable :list="list1" :options="{group:'article'}" class="dragArea">
<div class="list-complete-item" v-for="element in list1" :key='element.id'> <div v-for="element in list1" :key="element.id" class="list-complete-item">
<div class="list-complete-item-handle">[{{element.author}}] {{element.title}}</div> <div class="list-complete-item-handle">[{{ element.author }}] {{ element.title }}</div>
<div style="position:absolute;right:0px;"> <div style="position:absolute;right:0px;">
<span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)"> <span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)">
<i style="color:#ff4949" class="el-icon-delete"></i> <i style="color:#ff4949" class="el-icon-delete"/>
</span> </span>
</div> </div>
</div> </div>
</draggable> </draggable>
</div> </div>
<div class="dndList-list" :style="{width:width2}"> <div :style="{width:width2}" class="dndList-list">
<h3>{{list2Title}}</h3> <h3>{{ list2Title }}</h3>
<draggable :list="filterList2" class="dragArea" :options="{group:'article'}"> <draggable :list="filterList2" :options="{group:'article'}" class="dragArea">
<div class="list-complete-item" v-for="element in filterList2" :key='element.id'> <div v-for="element in filterList2" :key="element.id" class="list-complete-item">
<div class='list-complete-item-handle2' @click="pushEle(element)"> [{{element.author}}] {{element.title}}</div> <div class="list-complete-item-handle2" @click="pushEle(element)"> [{{ element.author }}] {{ element.title }}</div>
</div> </div>
</draggable> </draggable>
</div> </div>
@ -30,16 +30,6 @@ import draggable from 'vuedraggable'
export default { export default {
name: 'DndList', name: 'DndList',
components: { draggable }, components: { draggable },
computed: {
filterList2() {
return this.list2.filter(v => {
if (this.isNotInList1(v)) {
return v
}
return false
})
}
},
props: { props: {
list1: { list1: {
type: Array, type: Array,
@ -70,6 +60,16 @@ export default {
default: '48%' default: '48%'
} }
}, },
computed: {
filterList2() {
return this.list2.filter(v => {
if (this.isNotInList1(v)) {
return v
}
return false
})
}
},
methods: { methods: {
isNotInList1(v) { isNotInList1(v) {
return this.list1.every(k => v.id !== k.id) return this.list1.every(k => v.id !== k.id)

145
src/components/Dropzone/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :ref="id" :action="url" class="dropzone" :id="id"> <div :ref="id" :action="url" :id="id" class="dropzone">
<input type="file" name="file"> <input type="file" name="file">
</div> </div>
</template> </template>
@ -12,12 +12,81 @@ import 'dropzone/dist/dropzone.css'
Dropzone.autoDiscover = false Dropzone.autoDiscover = false
export default { export default {
props: {
id: {
type: String,
required: true
},
url: {
type: String,
required: true
},
clickable: {
type: Boolean,
default: true
},
defaultMsg: {
type: String,
default: '上传图片'
},
acceptedFiles: {
type: String,
default: ''
},
thumbnailHeight: {
type: Number,
default: 200
},
thumbnailWidth: {
type: Number,
default: 200
},
showRemoveLink: {
type: Boolean,
default: true
},
maxFilesize: {
type: Number,
default: 2
},
maxFiles: {
type: Number,
default: 3
},
autoProcessQueue: {
type: Boolean,
default: true
},
useCustomDropzoneOptions: {
type: Boolean,
default: false
},
defaultImg: {
default: '',
type: [String, Array]
},
couldPaste: {
type: Boolean,
default: false
}
},
data() { data() {
return { return {
dropzone: '', dropzone: '',
initOnce: true initOnce: true
} }
}, },
watch: {
defaultImg(val) {
if (val.length === 0) {
this.initOnce = false
return
}
if (!this.initOnce) return
this.initImages(val)
this.initOnce = false
}
},
mounted() { mounted() {
const element = document.getElementById(this.id) const element = document.getElementById(this.id)
const vm = this const vm = this
@ -95,6 +164,10 @@ export default {
vm.$emit('dropzone-successmultiple', file, error, xhr) vm.$emit('dropzone-successmultiple', file, error, xhr)
}) })
}, },
destroyed() {
document.removeEventListener('paste', this.pasteImg)
this.dropzone.destroy()
},
methods: { methods: {
removeAllFiles() { removeAllFiles() {
this.dropzone.removeAllFiles(true) this.dropzone.removeAllFiles(true)
@ -128,76 +201,6 @@ export default {
} }
} }
},
destroyed() {
document.removeEventListener('paste', this.pasteImg)
this.dropzone.destroy()
},
watch: {
defaultImg(val) {
if (val.length === 0) {
this.initOnce = false
return
}
if (!this.initOnce) return
this.initImages(val)
this.initOnce = false
}
},
props: {
id: {
type: String,
required: true
},
url: {
type: String,
required: true
},
clickable: {
type: Boolean,
default: true
},
defaultMsg: {
type: String,
default: '上传图片'
},
acceptedFiles: {
type: String
},
thumbnailHeight: {
type: Number,
default: 200
},
thumbnailWidth: {
type: Number,
default: 200
},
showRemoveLink: {
type: Boolean,
default: true
},
maxFilesize: {
type: Number,
default: 2
},
maxFiles: {
type: Number,
default: 3
},
autoProcessQueue: {
type: Boolean,
default: true
},
useCustomDropzoneOptions: {
type: Boolean,
default: false
},
defaultImg: {
default: false
},
couldPaste: {
default: false
}
} }
} }
</script> </script>

31
src/components/ErrorLog/index.vue
View File

@ -2,15 +2,24 @@
<div v-if="errorLogs.length>0"> <div v-if="errorLogs.length>0">
<el-badge :is-dot="true" style="line-height: 30px;" @click.native="dialogTableVisible=true"> <el-badge :is-dot="true" style="line-height: 30px;" @click.native="dialogTableVisible=true">
<el-button size="small" type="danger" class="bug-btn"> <el-button size="small" type="danger" class="bug-btn">
<svg t="1492682037685" class="bug-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1863" <svg
xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"> t="1492682037685"
<path d="M969.142857 548.571429q0 14.848-10.861714 25.709714t-25.709714 10.861714l-128 0q0 97.718857-38.290286 165.705143l118.857143 119.442286q10.861714 10.861714 10.861714 25.709714t-10.861714 25.709714q-10.276571 10.861714-25.709714 10.861714t-25.709714-10.861714l-113.152-112.566857q-2.852571 2.852571-8.557714 7.424t-23.990857 16.274286-37.156571 20.845714-46.848 16.566857-55.442286 7.424l0-512-73.142857 0 0 512q-29.147429 0-58.002286-7.716571t-49.700571-18.870857-37.705143-22.272-24.868571-18.578286l-8.557714-8.009143-104.557714 118.272q-11.446857 11.995429-27.428571 11.995429-13.714286 0-24.576-9.142857-10.861714-10.276571-11.702857-25.417143t8.850286-26.587429l115.419429-129.718857q-33.133714-65.133714-33.133714-156.562286l-128 0q-14.848 0-25.709714-10.861714t-10.861714-25.709714 10.861714-25.709714 25.709714-10.861714l128 0 0-168.009143-98.852571-98.852571q-10.861714-10.861714-10.861714-25.709714t10.861714-25.709714 25.709714-10.861714 25.709714 10.861714l98.852571 98.852571 482.304 0 98.852571-98.852571q10.861714-10.861714 25.709714-10.861714t25.709714 10.861714 10.861714 25.709714-10.861714 25.709714l-98.852571 98.852571 0 168.009143 128 0q14.848 0 25.709714 10.861714t10.861714 25.709714zM694.857143 219.428571l-365.714286 0q0-75.995429 53.430857-129.426286t129.426286-53.430857 129.426286 53.430857 53.430857 129.426286z" class="bug-svg"
p-id="1864"></path> viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1863"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="128"
height="128">
<path
d="M969.142857 548.571429q0 14.848-10.861714 25.709714t-25.709714 10.861714l-128 0q0 97.718857-38.290286 165.705143l118.857143 119.442286q10.861714 10.861714 10.861714 25.709714t-10.861714 25.709714q-10.276571 10.861714-25.709714 10.861714t-25.709714-10.861714l-113.152-112.566857q-2.852571 2.852571-8.557714 7.424t-23.990857 16.274286-37.156571 20.845714-46.848 16.566857-55.442286 7.424l0-512-73.142857 0 0 512q-29.147429 0-58.002286-7.716571t-49.700571-18.870857-37.705143-22.272-24.868571-18.578286l-8.557714-8.009143-104.557714 118.272q-11.446857 11.995429-27.428571 11.995429-13.714286 0-24.576-9.142857-10.861714-10.276571-11.702857-25.417143t8.850286-26.587429l115.419429-129.718857q-33.133714-65.133714-33.133714-156.562286l-128 0q-14.848 0-25.709714-10.861714t-10.861714-25.709714 10.861714-25.709714 25.709714-10.861714l128 0 0-168.009143-98.852571-98.852571q-10.861714-10.861714-10.861714-25.709714t10.861714-25.709714 25.709714-10.861714 25.709714 10.861714l98.852571 98.852571 482.304 0 98.852571-98.852571q10.861714-10.861714 25.709714-10.861714t25.709714 10.861714 10.861714 25.709714-10.861714 25.709714l-98.852571 98.852571 0 168.009143 128 0q14.848 0 25.709714 10.861714t10.861714 25.709714zM694.857143 219.428571l-365.714286 0q0-75.995429 53.430857-129.426286t129.426286-53.430857 129.426286 53.430857 53.430857 129.426286z"
p-id="1864"/>
</svg> </svg>
</el-button> </el-button>
</el-badge> </el-badge>
<el-dialog title="Error Log" :visible.sync="dialogTableVisible" width="80%"> <el-dialog :visible.sync="dialogTableVisible" title="Error Log" width="80%">
<el-table :data="errorLogs" border> <el-table :data="errorLogs" border>
<el-table-column label="Message"> <el-table-column label="Message">
<template slot-scope="scope"> <template slot-scope="scope">
@ -18,21 +27,21 @@
<span class="message-title">Msg:</span> <span class="message-title">Msg:</span>
<el-tag type="danger">{{ scope.row.err.message }}</el-tag> <el-tag type="danger">{{ scope.row.err.message }}</el-tag>
</div> </div>
<br/> <br>
<div> <div>
<span class="message-title" style="padding-right: 10px;">Info: </span> <span class="message-title" style="padding-right: 10px;">Info: </span>
<el-tag type="warning">{{scope.row.vm.$vnode.tag}} error in {{scope.row.info}}</el-tag> <el-tag type="warning">{{ scope.row.vm.$vnode.tag }} error in {{ scope.row.info }}</el-tag>
</div> </div>
<br/> <br>
<div> <div>
<span class="message-title" style="padding-right: 16px;">Url: </span> <span class="message-title" style="padding-right: 16px;">Url: </span>
<el-tag type="success">{{scope.row.url}}</el-tag> <el-tag type="success">{{ scope.row.url }}</el-tag>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="Stack"> <el-table-column label="Stack">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.err.stack}} {{ scope.row.err.stack }}
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -43,7 +52,7 @@
<script> <script>
export default { export default {
name: 'errorLog', name: 'ErrorLog',
data() { data() {
return { return {
dialogTableVisible: false dialogTableVisible: false

21
src/components/GithubCorner/index.vue
View File

@ -1,12 +1,21 @@
<template> <template>
<a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github"> <a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#40c9c6; color:#fff;" <svg
width="80"
height="80"
viewBox="0 0 250 250"
style="fill:#40c9c6; color:#fff;"
aria-hidden="true"> aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path> <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"/>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" <path
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path> d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor"
fill="currentColor" class="octo-body"></path> style="transform-origin: 130px 106px;"
class="octo-arm"/>
<path
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor"
class="octo-body"/>
</svg> </svg>
</a> </a>
</template> </template>

32
src/components/Hamburger/index.vue
View File

@ -1,20 +1,34 @@
<template> <template>
<div> <div>
<svg t="1492500959545" @click="toggleClick" class="hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024" <svg
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"> :class="{'is-active':isActive}"
<path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z" t="1492500959545"
p-id="1692"></path> class="hamburger"
<path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z" style=""
p-id="1693"></path> viewBox="0 0 1024 1024"
<path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z" version="1.1"
p-id="1694"></path> xmlns="http://www.w3.org/2000/svg"
p-id="1691"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="64"
height="64"
@click="toggleClick">
<path
d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
p-id="1692"/>
<path
d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
p-id="1693"/>
<path
d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
p-id="1694"/>
</svg> </svg>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'hamburger', name: 'Hamburger',
props: { props: {
isActive: { isActive: {
type: Boolean, type: Boolean,

76
src/components/ImageCropper/index.vue
View File

@ -1,34 +1,39 @@
<template> <template>
<div class="vue-image-crop-upload" v-show="value"> <div v-show="value" class="vue-image-crop-upload">
<div class="vicp-wrap"> <div class="vicp-wrap">
<div class="vicp-close" @click="off"> <div class="vicp-close" @click="off">
<i class="vicp-icon4"></i> <i class="vicp-icon4"/>
</div> </div>
<div class="vicp-step1" v-show="step == 1"> <div v-show="step == 1" class="vicp-step1">
<div class="vicp-drop-area" @dragleave="preventDefault" @dragover="preventDefault" @dragenter="preventDefault" @click="handleClick" @drop="handleChange"> <div class="vicp-drop-area" @dragleave="preventDefault" @dragover="preventDefault" @dragenter="preventDefault" @click="handleClick" @drop="handleChange">
<i class="vicp-icon1" v-show="loading != 1"> <i v-show="loading != 1" class="vicp-icon1">
<i class="vicp-icon1-arrow"></i> <i class="vicp-icon1-arrow"/>
<i class="vicp-icon1-body"></i> <i class="vicp-icon1-body"/>
<i class="vicp-icon1-bottom"></i> <i class="vicp-icon1-bottom"/>
</i> </i>
<span class="vicp-hint" v-show="loading !== 1">{{ lang.hint }}</span> <span v-show="loading !== 1" class="vicp-hint">{{ lang.hint }}</span>
<span class="vicp-no-supported-hint" v-show="!isSupported">{{ lang.noSupported }}</span> <span v-show="!isSupported" class="vicp-no-supported-hint">{{ lang.noSupported }}</span>
<input type="file" v-show="false" v-if="step == 1" @change="handleChange" ref="fileinput"> <input v-show="false" v-if="step == 1" ref="fileinput" type="file" @change="handleChange">
</div> </div>
<div class="vicp-error" v-show="hasError"> <div v-show="hasError" class="vicp-error">
<i class="vicp-icon2"></i> {{ errorMsg }} <i class="vicp-icon2"/> {{ errorMsg }}
</div> </div>
<div class="vicp-operate"> <div class="vicp-operate">
<a @click="off" @mousedown="ripple">{{ lang.btn.off }}</a> <a @click="off" @mousedown="ripple">{{ lang.btn.off }}</a>
</div> </div>
</div> </div>
<div class="vicp-step2" v-if="step == 2"> <div v-if="step == 2" class="vicp-step2">
<div class="vicp-crop"> <div class="vicp-crop">
<div class="vicp-crop-left" v-show="true"> <div v-show="true" class="vicp-crop-left">
<div class="vicp-img-container"> <div class="vicp-img-container">
<img :src="sourceImgUrl" :style="sourceImgStyle" class="vicp-img" draggable="false" <img
ref="img"
:src="sourceImgUrl"
:style="sourceImgStyle"
class="vicp-img"
draggable="false"
@drag="preventDefault" @drag="preventDefault"
@dragstart="preventDefault" @dragstart="preventDefault"
@dragend="preventDefault" @dragend="preventDefault"
@ -43,30 +48,29 @@
@mousedown="imgStartMove" @mousedown="imgStartMove"
@mousemove="imgMove" @mousemove="imgMove"
@mouseup="createImg" @mouseup="createImg"
@mouseout="createImg" @mouseout="createImg">
ref="img"> <div :style="sourceImgShadeStyle" class="vicp-img-shade vicp-img-shade-1"/>
<div class="vicp-img-shade vicp-img-shade-1" :style="sourceImgShadeStyle"></div> <div :style="sourceImgShadeStyle" class="vicp-img-shade vicp-img-shade-2"/>
<div class="vicp-img-shade vicp-img-shade-2" :style="sourceImgShadeStyle"></div>
</div> </div>
<div class="vicp-range"> <div class="vicp-range">
<input type="range" :value="scale.range" step="1" min="0" max="100" @input="zoomChange"> <input :value="scale.range" type="range" step="1" min="0" max="100" @input="zoomChange">
<i @mousedown="startZoomSub" @mouseout="endZoomSub" @mouseup="endZoomSub" class="vicp-icon5"></i> <i class="vicp-icon5" @mousedown="startZoomSub" @mouseout="endZoomSub" @mouseup="endZoomSub"/>
<i @mousedown="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd" class="vicp-icon6"></i> <i class="vicp-icon6" @mousedown="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd"/>
</div> </div>
<div class="vicp-rotate" v-if="!noRotate"> <div v-if="!noRotate" class="vicp-rotate">
<i @mousedown="startRotateLeft" @mouseout="endRotate" @mouseup="endRotate">↺</i> <i @mousedown="startRotateLeft" @mouseout="endRotate" @mouseup="endRotate">↺</i>
<i @mousedown="startRotateRight" @mouseout="endRotate" @mouseup="endRotate">↻</i> <i @mousedown="startRotateRight" @mouseout="endRotate" @mouseup="endRotate">↻</i>
</div> </div>
</div> </div>
<div class="vicp-crop-right" v-show="true"> <div v-show="true" class="vicp-crop-right">
<div class="vicp-preview"> <div class="vicp-preview">
<div class="vicp-preview-item" v-if="!noSquare"> <div v-if="!noSquare" class="vicp-preview-item">
<img :src="createImgUrl" :style="previewStyle"> <img :src="createImgUrl" :style="previewStyle">
<span>{{ lang.preview }}</span> <span>{{ lang.preview }}</span>
</div> </div>
<div class="vicp-preview-item vicp-preview-item-circle" v-if="!noCircle"> <div v-if="!noCircle" class="vicp-preview-item vicp-preview-item-circle">
<img :src="createImgUrl" :style="previewStyle"> <img :src="createImgUrl" :style="previewStyle">
<span>{{ lang.preview }}</span> <span>{{ lang.preview }}</span>
</div> </div>
@ -79,17 +83,17 @@
</div> </div>
</div> </div>
<div class="vicp-step3" v-if="step == 3"> <div v-if="step == 3" class="vicp-step3">
<div class="vicp-upload"> <div class="vicp-upload">
<span class="vicp-loading" v-show="loading === 1">{{ lang.loading }}</span> <span v-show="loading === 1" class="vicp-loading">{{ lang.loading }}</span>
<div class="vicp-progress-wrap"> <div class="vicp-progress-wrap">
<span class="vicp-progress" v-show="loading === 1" :style="progressStyle"></span> <span v-show="loading === 1" :style="progressStyle" class="vicp-progress"/>
</div> </div>
<div class="vicp-error" v-show="hasError"> <div v-show="hasError" class="vicp-error">
<i class="vicp-icon2"></i> {{ errorMsg }} <i class="vicp-icon2"/> {{ errorMsg }}
</div> </div>
<div class="vicp-success" v-show="loading === 2"> <div v-show="loading === 2" class="vicp-success">
<i class="vicp-icon3"></i> {{ lang.success }} <i class="vicp-icon3"/> {{ lang.success }}
</div> </div>
</div> </div>
<div class="vicp-operate"> <div class="vicp-operate">
@ -97,13 +101,13 @@
<a @click="off" @mousedown="ripple">{{ lang.btn.close }}</a> <a @click="off" @mousedown="ripple">{{ lang.btn.close }}</a>
</div> </div>
</div> </div>
<canvas v-show="false" :width="width" :height="height" ref="canvas"></canvas> <canvas v-show="false" ref="canvas" :width="width" :height="height"/>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
/* eslint-disable */ /* eslint-disable */
'use strict' 'use strict'
import request from '@/utils/request' import request from '@/utils/request'
import language from './utils/language.js' import language from './utils/language.js'

7
src/components/JsonEditor/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="json-editor"> <div class="json-editor">
<textarea ref="textarea"></textarea> <textarea ref="textarea"/>
</div> </div>
</template> </template>
@ -15,13 +15,14 @@ import 'codemirror/addon/lint/lint'
import 'codemirror/addon/lint/json-lint' import 'codemirror/addon/lint/json-lint'
export default { export default {
name: 'jsonEditor', name: 'JsonEditor',
/* eslint-disable vue/require-prop-types */
props: ['value'],
data() { data() {
return { return {
jsonEditor: false jsonEditor: false
} }
}, },
props: ['value'],
watch: { watch: {
value(value) { value(value) {
const editor_value = this.jsonEditor.getValue() const editor_value = this.jsonEditor.getValue()

12
src/components/Kanban/index.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<div class="board-column"> <div class="board-column">
<div class="board-column-header"> <div class="board-column-header">
{{headerText}} {{ headerText }}
</div> </div>
<draggable <draggable
class="board-column-content"
:list="list" :list="list"
:options="options"> :options="options"
<div class="board-item" v-for="element in list" :key="element.id"> class="board-column-content">
{{element.name}} {{element.id}} <div v-for="element in list" :key="element.id" class="board-item">
{{ element.name }} {{ element.id }}
</div> </div>
</draggable> </draggable>
</div> </div>
@ -17,7 +17,7 @@
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
export default { export default {
name: 'dragKanban-demo', name: 'DragKanbanDemo',
components: { components: {
draggable draggable
}, },

9
src/components/LangSelect/index.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<el-dropdown trigger="click" class='international' @command="handleSetLanguage"> <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
<div> <div>
<svg-icon class-name='international-icon' icon-class="language" /> <svg-icon class-name="international-icon" icon-class="language" />
</div> </div>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="zh" :disabled="language==='zh'">中文</el-dropdown-item> <el-dropdown-item :disabled="language==='zh'" command="zh">中文</el-dropdown-item>
<el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item> <el-dropdown-item :disabled="language==='en'" command="en">English</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</template> </template>
@ -38,4 +38,3 @@ export default {
} }
</style> </style>

136
src/components/MDinput/index.vue
View File

@ -1,28 +1,103 @@
<template> <template>
<div class="material-input__component" :class="computedClasses"> <div :class="computedClasses" class="material-input__component">
<div :class="{iconClass:icon}"> <div :class="{iconClass:icon}">
<i class="el-input__icon material-input__icon" :class="['el-icon-' + icon]" v-if="icon"></i> <i v-if="icon" :class="['el-icon-' + icon]" class="el-input__icon material-input__icon"/>
<input v-if="type === 'email'" type="email" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue" <input
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus" v-if="type === 'email'"
@blur="handleMdBlur" @input="handleModelInput"> :name="name"
<input v-if="type === 'url'" type="url" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue" :placeholder="fillPlaceHolder"
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus" v-model="currentValue"
@blur="handleMdBlur" @input="handleModelInput"> :readonly="readonly"
<input v-if="type === 'number'" type="number" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue" :disabled="disabled"
:step="step" :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max" :min="min" :minlength="minlength" :autoComplete="autoComplete"
:maxlength="maxlength" :required="required" @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput"> :required="required"
<input v-if="type === 'password'" type="password" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue" type="email"
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max" :min="min" :required="required" @focus="handleMdFocus" class="material-input"
@blur="handleMdBlur" @input="handleModelInput"> @focus="handleMdFocus"
<input v-if="type === 'tel'" type="tel" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue" @blur="handleMdBlur"
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus" @input="handleModelInput">
@blur="handleMdBlur" @input="handleModelInput"> <input
<input v-if="type === 'text'" type="text" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue" v-if="type === 'url'"
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :minlength="minlength" :maxlength="maxlength" :name="name"
:required="required" @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput"> :placeholder="fillPlaceHolder"
<span class="material-input-bar"></span> v-model="currentValue"
:readonly="readonly"
:disabled="disabled"
:autoComplete="autoComplete"
:required="required"
type="url"
class="material-input"
@focus="handleMdFocus"
@blur="handleMdBlur"
@input="handleModelInput">
<input
v-if="type === 'number'"
:name="name"
:placeholder="fillPlaceHolder"
v-model="currentValue"
:step="step"
:readonly="readonly"
:disabled="disabled"
:autoComplete="autoComplete"
:max="max"
:min="min"
:minlength="minlength"
:maxlength="maxlength"
:required="required"
type="number"
class="material-input"
@focus="handleMdFocus"
@blur="handleMdBlur"
@input="handleModelInput">
<input
v-if="type === 'password'"
:name="name"
:placeholder="fillPlaceHolder"
v-model="currentValue"
:readonly="readonly"
:disabled="disabled"
:autoComplete="autoComplete"
:max="max"
:min="min"
:required="required"
type="password"
class="material-input"
@focus="handleMdFocus"
@blur="handleMdBlur"
@input="handleModelInput">
<input
v-if="type === 'tel'"
:name="name"
:placeholder="fillPlaceHolder"
v-model="currentValue"
:readonly="readonly"
:disabled="disabled"
:autoComplete="autoComplete"
:required="required"
type="tel"
class="material-input"
@focus="handleMdFocus"
@blur="handleMdBlur"
@input="handleModelInput">
<input
v-if="type === 'text'"
:name="name"
:placeholder="fillPlaceHolder"
v-model="currentValue"
:readonly="readonly"
:disabled="disabled"
:autoComplete="autoComplete"
:minlength="minlength"
:maxlength="maxlength"
:required="required"
type="text"
class="material-input"
@focus="handleMdFocus"
@blur="handleMdBlur"
@input="handleModelInput">
<span class="material-input-bar"/>
<label class="material-label"> <label class="material-label">
<slot></slot> <slot/>
</label> </label>
</div> </div>
</div> </div>
@ -32,8 +107,9 @@
// source:https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue // source:https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue
export default { export default {
name: 'md-input', name: 'MdInput',
props: { props: {
/* eslint-disable */
icon: String, icon: String,
name: String, name: String,
type: { type: {
@ -62,6 +138,13 @@ export default {
default: true default: true
} }
}, },
data() {
return {
currentValue: this.value,
focus: false,
fillPlaceHolder: null
}
},
computed: { computed: {
computedClasses() { computedClasses() {
return { return {
@ -76,13 +159,6 @@ export default {
this.currentValue = newValue this.currentValue = newValue
} }
}, },
data() {
return {
currentValue: this.value,
focus: false,
fillPlaceHolder: null
}
},
methods: { methods: {
handleModelInput(event) { handleModelInput(event) {
const value = event.target.value const value = event.target.value

25
src/components/MarkdownEditor/index.vue
View File

@ -1,7 +1,6 @@
<template> <template>
<div class="simplemde-container" :style="{height:height+'px',zIndex:zIndex}"> <div :style="{height:height+'px',zIndex:zIndex}" class="simplemde-container">
<textarea :id="id"> <textarea :id="id"/>
</textarea>
</div> </div>
</template> </template>
@ -11,11 +10,16 @@ import 'simplemde/dist/simplemde.min.css'
import SimpleMDE from 'simplemde' import SimpleMDE from 'simplemde'
export default { export default {
name: 'simplemde-md', name: 'SimplemdeMd',
props: { props: {
value: String, value: {
type: String,
default: ''
},
id: { id: {
type: String type: String,
required: false,
default: 'markdown-editor-' + +new Date()
}, },
autofocus: { autofocus: {
type: Boolean, type: Boolean,
@ -34,7 +38,10 @@ export default {
default: 10 default: 10
}, },
toolbar: { toolbar: {
type: Array type: Array,
default: function() {
return []
}
} }
}, },
data() { data() {
@ -51,10 +58,10 @@ export default {
}, },
mounted() { mounted() {
this.simplemde = new SimpleMDE({ this.simplemde = new SimpleMDE({
element: document.getElementById(this.id || 'markdown-editor-' + +new Date()), element: document.getElementById(this.id),
autoDownloadFontAwesome: false, autoDownloadFontAwesome: false,
autofocus: this.autofocus, autofocus: this.autofocus,
toolbar: this.toolbar, toolbar: this.toolbar.length > 0 ? this.toolbar : undefined,
spellChecker: false, spellChecker: false,
insertTexts: { insertTexts: {
link: ['[', ']( )'] link: ['[', ']( )']

6
src/components/PanThumb/index.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div class="pan-item" :style="{zIndex:zIndex,height:height,width:width}"> <div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item">
<div class="pan-info"> <div class="pan-info">
<div class="pan-info-roles-container"> <div class="pan-info-roles-container">
<slot></slot> <slot/>
</div> </div>
</div> </div>
<img class="pan-thumb" :src="image"> <img :src="image" class="pan-thumb">
</div> </div>
</template> </template>

35
src/components/Screenfull/index.vue
View File

@ -1,15 +1,28 @@
<template> <template>
<div> <div>
<svg t="1508738709248" @click='click' class="screenfull-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" <svg
p-id="2069" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"> t="1508738709248"
<path d="M333.493443 428.647617 428.322206 333.832158 262.572184 168.045297 366.707916 64.444754 64.09683 64.444754 63.853283 366.570793 167.283957 262.460644Z" class="screenfull-svg"
p-id="2070"></path> viewBox="0 0 1024 1024"
<path d="M854.845439 760.133334 688.61037 593.95864 593.805144 688.764889 759.554142 854.56096 655.44604 958.161503 958.055079 958.161503 958.274066 656.035464Z" version="1.1"
p-id="2071"></path> xmlns="http://www.w3.org/2000/svg"
<path d="M688.535669 428.550403 854.31025 262.801405 957.935352 366.921787 957.935352 64.34754 655.809313 64.081481 759.919463 167.535691 593.70793 333.731874Z" p-id="2069"
p-id="2072"></path> xmlns:xlink="http://www.w3.org/1999/xlink"
<path d="M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z" width="32"
p-id="2073"></path> height="32"
@click="click">
<path
d="M333.493443 428.647617 428.322206 333.832158 262.572184 168.045297 366.707916 64.444754 64.09683 64.444754 63.853283 366.570793 167.283957 262.460644Z"
p-id="2070"/>
<path
d="M854.845439 760.133334 688.61037 593.95864 593.805144 688.764889 759.554142 854.56096 655.44604 958.161503 958.055079 958.161503 958.274066 656.035464Z"
p-id="2071"/>
<path
d="M688.535669 428.550403 854.31025 262.801405 957.935352 366.921787 957.935352 64.34754 655.809313 64.081481 759.919463 167.535691 593.70793 333.731874Z"
p-id="2072"/>
<path
d="M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z"
p-id="2073"/>
</svg> </svg>
</div> </div>
</template> </template>
@ -18,7 +31,7 @@
import screenfull from 'screenfull' import screenfull from 'screenfull'
export default { export default {
name: 'screenfull', name: 'Screenfull',
props: { props: {
width: { width: {
type: Number, type: Number,

8
src/components/ScrollPane/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll"> <div ref="scrollContainer" class="scroll-container" @wheel.prevent="handleScroll">
<div class="scroll-wrapper" ref="scrollWrapper" :style="{left: left + 'px'}"> <div ref="scrollWrapper" :style="{left: left + 'px'}" class="scroll-wrapper">
<slot></slot> <slot/>
</div> </div>
</div> </div>
</template> </template>
@ -10,7 +10,7 @@
const padding = 15 // tag's padding const padding = 15 // tag's padding
export default { export default {
name: 'scrollPane', name: 'ScrollPane',
data() { data() {
return { return {
left: 0 left: 0

17
src/components/Share/dropdownMenu.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="share-dropdown-menu" :class="{active:isActive}"> <div :class="{active:isActive}" class="share-dropdown-menu">
<div class="share-dropdown-menu-wrapper"> <div class="share-dropdown-menu-wrapper">
<span class="share-dropdown-menu-title" @click.self="clickTitle">{{title}}</span> <span class="share-dropdown-menu-title" @click.self="clickTitle">{{ title }}</span>
<div class="share-dropdown-menu-item" v-for="(item,index) of items" :key='index'> <div v-for="(item,index) of items" :key="index" class="share-dropdown-menu-item">
<a v-if="item.href" :href="item.href" target="_blank">{{item.title}}</a> <a v-if="item.href" :href="item.href" target="_blank">{{ item.title }}</a>
<span v-else>{{item.title}}</span> <span v-else>{{ item.title }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -14,7 +14,10 @@
export default { export default {
props: { props: {
items: { items: {
type: Array type: Array,
default: function() {
return []
}
}, },
title: { title: {
type: String, type: String,
@ -35,7 +38,7 @@ export default {
</script> </script>
<style rel="stylesheet/scss" lang="scss" > <style rel="stylesheet/scss" lang="scss" >
$n: 6; //和items.length 相同 $n: 8; //和items.length 相同
$t: .1s; $t: .1s;
.share-dropdown-menu { .share-dropdown-menu {
width: 250px; width: 250px;

3
src/components/Sticky/index.vue
View File

@ -21,7 +21,8 @@ export default {
default: 1 default: 1
}, },
className: { className: {
type: String type: String,
default: ''
} }
}, },
data() { data() {

7
src/components/SvgIcon/index.vue
View File

@ -1,19 +1,20 @@
<template> <template>
<svg :class="svgClass" aria-hidden="true"> <svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName"></use> <use :xlink:href="iconName"/>
</svg> </svg>
</template> </template>
<script> <script>
export default { export default {
name: 'svg-icon', name: 'SvgIcon',
props: { props: {
iconClass: { iconClass: {
type: String, type: String,
required: true required: true
}, },
className: { className: {
type: String type: String,
default: ''
} }
}, },
computed: { computed: {

16
src/components/TextHoverEffect/Mallki.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<a class="link--mallki" :class="className" href="#"> <a :class="className" class="link--mallki" href="#">
{{text}} {{ text }}
<span :data-letters="text"></span> <span :data-letters="text"/>
<span :data-letters="text"></span> <span :data-letters="text"/>
</a> </a>
</template> </template>
@ -10,7 +10,8 @@
export default { export default {
props: { props: {
className: { className: {
type: String type: String,
default: ''
}, },
text: { text: {
type: String, type: String,
@ -20,9 +21,9 @@ export default {
} }
</script> </script>
<style> <style>
/* Mallki */ /* Mallki */
.link--mallki { .link--mallki {
font-weight: 800; font-weight: 800;
color: #4dd9d5; color: #4dd9d5;
@ -31,7 +32,7 @@ export default {
transition: color 0.5s 0.25s; transition: color 0.5s 0.25s;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
outline: none; outline: none;
text-decoration: none; text-decoration: none;
@ -109,5 +110,4 @@ display: inline-block;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
} }
</style> </style>

4
src/components/ThemePicker/index.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<el-color-picker <el-color-picker
v-model="theme"
class="theme-picker" class="theme-picker"
popper-class="theme-picker-dropdown" popper-class="theme-picker-dropdown"/>
v-model="theme"></el-color-picker>
</template> </template>
<script> <script>

18
src/components/Tinymce/components/editorImage.vue
View File

@ -1,10 +1,18 @@
<template> <template>
<div class="upload-container"> <div class="upload-container">
<el-button icon='el-icon-upload' size="mini" :style="{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传图片 <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">上传图片
</el-button> </el-button>
<el-dialog append-to-body :visible.sync="dialogVisible"> <el-dialog :visible.sync="dialogVisible">
<el-upload class="editor-slide-upload" action="https://httpbin.org/post" :multiple="true" :file-list="fileList" :show-file-list="true" <el-upload
list-type="picture-card" :on-remove="handleRemove" :on-success="handleSuccess" :before-upload="beforeUpload"> :multiple="true"
:file-list="fileList"
:show-file-list="true"
:on-remove="handleRemove"
:on-success="handleSuccess"
:before-upload="beforeUpload"
class="editor-slide-upload"
action="https://httpbin.org/post"
list-type="picture-card">
<el-button size="small" type="primary">点击上传</el-button> <el-button size="small" type="primary">点击上传</el-button>
</el-upload> </el-upload>
<el-button @click="dialogVisible = false">取 消</el-button> <el-button @click="dialogVisible = false">取 消</el-button>
@ -17,7 +25,7 @@
// import { getToken } from 'api/qiniu' // import { getToken } from 'api/qiniu'
export default { export default {
name: 'editorSlideUpload', name: 'EditorSlideUpload',
props: { props: {
color: { color: {
type: String, type: String,

20
src/components/Tinymce/index.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class="tinymce-container editor-container" :class="{fullscreen:fullscreen}"> <div :class="{fullscreen:fullscreen}" class="tinymce-container editor-container">
<textarea class="tinymce-textarea" :id="tinymceId"></textarea> <textarea :id="tinymceId" class="tinymce-textarea"/>
<div class="editor-custom-btn-container"> <div class="editor-custom-btn-container">
<editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage> <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"/>
</div> </div>
</div> </div>
</template> </template>
@ -13,11 +13,12 @@ import plugins from './plugins'
import toolbar from './toolbar' import toolbar from './toolbar'
export default { export default {
name: 'tinymce', name: 'Tinymce',
components: { editorImage }, components: { editorImage },
props: { props: {
id: { id: {
type: String type: String,
default: 'vue-tinymce-' + +new Date()
}, },
value: { value: {
type: String, type: String,
@ -31,6 +32,7 @@ export default {
} }
}, },
menubar: { menubar: {
type: String,
default: 'file edit insert view format table' default: 'file edit insert view format table'
}, },
height: { height: {
@ -43,7 +45,7 @@ export default {
return { return {
hasChange: false, hasChange: false,
hasInit: false, hasInit: false,
tinymceId: this.id || 'vue-tinymce-' + +new Date(), tinymceId: this.id,
fullscreen: false fullscreen: false
} }
}, },
@ -64,6 +66,9 @@ export default {
deactivated() { deactivated() {
this.destroyTinymce() this.destroyTinymce()
}, },
destroyed() {
this.destroyTinymce()
},
methods: { methods: {
initTinymce() { initTinymce() {
const _this = this const _this = this
@ -152,9 +157,6 @@ export default {
window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`) window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
}) })
} }
},
destroyed() {
this.destroyTinymce()
} }
} }
</script> </script>

29
src/components/TreeTable/index.vue
View File

@ -2,25 +2,27 @@
<el-table :data="formatData" :row-style="showRow" v-bind="$attrs"> <el-table :data="formatData" :row-style="showRow" v-bind="$attrs">
<el-table-column v-if="columns.length===0" width="150"> <el-table-column v-if="columns.length===0" width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<span v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span> <span v-for="space in scope.row._level" :key="space" class="ms-tree-space"/>
<span class="tree-ctrl" v-if="iconShow(0,scope.row)" @click="toggleExpanded(scope.$index)"> <span v-if="iconShow(0,scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
<i v-if="!scope.row._expanded" class="el-icon-plus"></i> <i v-if="!scope.row._expanded" class="el-icon-plus"/>
<i v-else class="el-icon-minus"></i> <i v-else class="el-icon-minus"/>
</span> </span>
{{scope.$index}} {{ scope.$index }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column v-else v-for="(column, index) in columns" :key="column.value" :label="column.text" :width="column.width"> <el-table-column v-for="(column, index) in columns" v-else :key="column.value" :label="column.text" :width="column.width">
<template slot-scope="scope"> <template slot-scope="scope">
<span v-if="index === 0" v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span> <!-- Todo -->
<span class="tree-ctrl" v-if="iconShow(index,scope.row)" @click="toggleExpanded(scope.$index)"> <!-- eslint-disable-next-line vue/no-confusing-v-for-v-if -->
<i v-if="!scope.row._expanded" class="el-icon-plus"></i> <span v-for="space in scope.row._level" v-if="index === 0" :key="space" class="ms-tree-space"/>
<i v-else class="el-icon-minus"></i> <span v-if="iconShow(index,scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
<i v-if="!scope.row._expanded" class="el-icon-plus"/>
<i v-else class="el-icon-minus"/>
</span> </span>
{{scope.row[column.value]}} {{ scope.row[column.value] }}
</template> </template>
</el-table-column> </el-table-column>
<slot></slot> <slot/>
</el-table> </el-table>
</template> </template>
@ -31,8 +33,9 @@
*/ */
import treeToArray from './eval' import treeToArray from './eval'
export default { export default {
name: 'treeTable', name: 'TreeTable',
props: { props: {
/* eslint-disable */
data: { data: {
type: [Array, Object], type: [Array, Object],
required: true required: true

33
src/components/Upload/singleImage.vue
View File

@ -1,15 +1,21 @@
<template> <template>
<div class="upload-container"> <div class="upload-container">
<el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post" <el-upload
:on-success="handleImageScucess"> :data="dataObj"
<i class="el-icon-upload"></i> :multiple="false"
:show-file-list="false"
:on-success="handleImageSuccess"
class="image-uploader"
drag
action="https://httpbin.org/post">
<i class="el-icon-upload"/>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload> </el-upload>
<div class="image-preview"> <div class="image-preview">
<div class="image-preview-wrapper" v-show="imageUrl.length>1"> <div v-show="imageUrl.length>1" class="image-preview-wrapper">
<img :src="imageUrl+'?imageView2/1/w/200/h/200'"> <img :src="imageUrl+'?imageView2/1/w/200/h/200'">
<div class="image-preview-action"> <div class="image-preview-action">
<i @click="rmImage" class="el-icon-delete"></i> <i class="el-icon-delete" @click="rmImage"/>
</div> </div>
</div> </div>
</div> </div>
@ -21,13 +27,11 @@
import { getToken } from '@/api/qiniu' import { getToken } from '@/api/qiniu'
export default { export default {
name: 'singleImageUpload', name: 'SingleImageUpload',
props: { props: {
value: String value: {
}, type: String,
computed: { default: ''
imageUrl() {
return this.value
} }
}, },
data() { data() {
@ -36,6 +40,11 @@ export default {
dataObj: { token: '', key: '' } dataObj: { token: '', key: '' }
} }
}, },
computed: {
imageUrl() {
return this.value
}
},
methods: { methods: {
rmImage() { rmImage() {
this.emitInput('') this.emitInput('')
@ -43,7 +52,7 @@ export default {
emitInput(val) { emitInput(val) {
this.$emit('input', val) this.$emit('input', val)
}, },
handleImageScucess() { handleImageSuccess() {
this.emitInput(this.tempUrl) this.emitInput(this.tempUrl)
}, },
beforeUpload() { beforeUpload() {

33
src/components/Upload/singleImage2.vue
View File

@ -1,15 +1,21 @@
<template> <template>
<div class="singleImageUpload2 upload-container"> <div class="singleImageUpload2 upload-container">
<el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post" <el-upload
:on-success="handleImageScucess"> :data="dataObj"
<i class="el-icon-upload"></i> :multiple="false"
:show-file-list="false"
:on-success="handleImageSuccess"
class="image-uploader"
drag
action="https://httpbin.org/post">
<i class="el-icon-upload"/>
<div class="el-upload__text">Drag或<em>点击上传</em></div> <div class="el-upload__text">Drag或<em>点击上传</em></div>
</el-upload> </el-upload>
<div v-show="imageUrl.length>0" class="image-preview"> <div v-show="imageUrl.length>0" class="image-preview">
<div class="image-preview-wrapper" v-show="imageUrl.length>1"> <div v-show="imageUrl.length>1" class="image-preview-wrapper">
<img :src="imageUrl"> <img :src="imageUrl">
<div class="image-preview-action"> <div class="image-preview-action">
<i @click="rmImage" class="el-icon-delete"></i> <i class="el-icon-delete" @click="rmImage"/>
</div> </div>
</div> </div>
</div> </div>
@ -20,13 +26,11 @@
import { getToken } from '@/api/qiniu' import { getToken } from '@/api/qiniu'
export default { export default {
name: 'singleImageUpload2', name: 'SingleImageUpload2',
props: { props: {
value: String value: {
}, type: String,
computed: { default: ''
imageUrl() {
return this.value
} }
}, },
data() { data() {
@ -35,6 +39,11 @@ export default {
dataObj: { token: '', key: '' } dataObj: { token: '', key: '' }
} }
}, },
computed: {
imageUrl() {
return this.value
}
},
methods: { methods: {
rmImage() { rmImage() {
this.emitInput('') this.emitInput('')
@ -42,7 +51,7 @@ export default {
emitInput(val) { emitInput(val) {
this.$emit('input', val) this.$emit('input', val)
}, },
handleImageScucess() { handleImageSuccess() {
this.emitInput(this.tempUrl) this.emitInput(this.tempUrl)
}, },
beforeUpload() { beforeUpload() {

37
src/components/Upload/singleImage3.vue
View File

@ -1,23 +1,29 @@
<template> <template>
<div class="upload-container"> <div class="upload-container">
<el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post" <el-upload
:on-success="handleImageScucess"> :data="dataObj"
<i class="el-icon-upload"></i> :multiple="false"
:show-file-list="false"
:on-success="handleImageSuccess"
class="image-uploader"
drag
action="https://httpbin.org/post">
<i class="el-icon-upload"/>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload> </el-upload>
<div class="image-preview image-app-preview"> <div class="image-preview image-app-preview">
<div class="image-preview-wrapper" v-show="imageUrl.length>1"> <div v-show="imageUrl.length>1" class="image-preview-wrapper">
<img :src="imageUrl"> <img :src="imageUrl">
<div class="image-preview-action"> <div class="image-preview-action">
<i @click="rmImage" class="el-icon-delete"></i> <i class="el-icon-delete" @click="rmImage"/>
</div> </div>
</div> </div>
</div> </div>
<div class="image-preview"> <div class="image-preview">
<div class="image-preview-wrapper" v-show="imageUrl.length>1"> <div v-show="imageUrl.length>1" class="image-preview-wrapper">
<img :src="imageUrl"> <img :src="imageUrl">
<div class="image-preview-action"> <div class="image-preview-action">
<i @click="rmImage" class="el-icon-delete"></i> <i class="el-icon-delete" @click="rmImage"/>
</div> </div>
</div> </div>
</div> </div>
@ -28,13 +34,11 @@
import { getToken } from '@/api/qiniu' import { getToken } from '@/api/qiniu'
export default { export default {
name: 'singleImageUpload3', name: 'SingleImageUpload3',
props: { props: {
value: String value: {
}, type: String,
computed: { default: ''
imageUrl() {
return this.value
} }
}, },
data() { data() {
@ -43,6 +47,11 @@ export default {
dataObj: { token: '', key: '' } dataObj: { token: '', key: '' }
} }
}, },
computed: {
imageUrl() {
return this.value
}
},
methods: { methods: {
rmImage() { rmImage() {
this.emitInput('') this.emitInput('')
@ -50,7 +59,7 @@ export default {
emitInput(val) { emitInput(val) {
this.$emit('input', val) this.$emit('input', val)
}, },
handleImageScucess(file) { handleImageSuccess(file) {
this.emitInput(file.files.file) this.emitInput(file.files.file)
}, },
beforeUpload() { beforeUpload() {

4
src/components/UploadExcel/index.vue
View File

@ -13,8 +13,8 @@ import XLSX from 'xlsx'
export default { export default {
props: { props: {
beforeUpload: Function, beforeUpload: Function, // eslint-disable-line
onSuccess: Function onSuccess: Function// eslint-disable-line
}, },
data() { data() {
return { return {

4
src/directive/waves/waves.js
View File

@ -29,8 +29,8 @@ export default{
ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px' ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px'
break break
default: default:
ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px' ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.documentElement.scrollTop || document.body.scrollTop) + 'px'
ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px' ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.documentElement.scrollLeft || document.body.scrollLeft) + 'px'
} }
ripple.style.backgroundColor = opts.color ripple.style.backgroundColor = opts.color
ripple.className = 'waves-ripple z-active' ripple.className = 'waves-ripple z-active'

4
src/lang/en.js
View File

@ -132,7 +132,7 @@ export default {
}, },
excel: { excel: {
export: 'Export', export: 'Export',
selectedExport: 'Export selected items', selectedExport: 'Export Selected Items',
placeholder: 'Please enter the file name(default excel-list)' placeholder: 'Please enter the file name(default excel-list)'
}, },
zip: { zip: {
@ -140,7 +140,7 @@ export default {
placeholder: 'Please enter the file name(default file)' placeholder: 'Please enter the file name(default file)'
}, },
theme: { theme: {
change: 'Theme change', change: 'Change Theme',
documentation: 'Theme documentation', documentation: 'Theme documentation',
tips: 'Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.' tips: 'Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.'
}, },

4
src/main.js
View File

@ -1,6 +1,6 @@
import Vue from 'vue' import Vue from 'vue'
import 'normalize.css/normalize.css'// A modern alternative to CSS resets import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import Element from 'element-ui' import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' import 'element-ui/lib/theme-chalk/index.css'
@ -13,7 +13,7 @@ import store from './store'
import i18n from './lang' // Internationalization import i18n from './lang' // Internationalization
import './icons' // icon import './icons' // icon
import './errorLog'// error log import './errorLog' // error log
import './permission' // permission control import './permission' // permission control
import './mock' // simulation data import './mock' // simulation data

2
src/permission.js
View File

@ -40,7 +40,7 @@ router.beforeEach((to, from, next) => {
} else { } else {
// 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓ // 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
if (hasPermission(store.getters.roles, to.meta.roles)) { if (hasPermission(store.getters.roles, to.meta.roles)) {
next()// next()
} else { } else {
next({ path: '/401', replace: true, query: { noGoBack: true }}) next({ path: '/401', replace: true, query: { noGoBack: true }})
} }

325
src/router/index.js
View File

@ -6,9 +6,15 @@ Vue.use(Router)
/* Layout */ /* Layout */
import Layout from '@/views/layout/Layout' import Layout from '@/views/layout/Layout'
/* Router Modules */
import componentsRouter from './modules/components'
import chartsRouter from './modules/charts'
import tableRouter from './modules/table'
import nestedRouter from './modules/nested'
/** note: submenu only apppear when children.length>=1 /** note: submenu only apppear when children.length>=1
* detail see https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html * detail see https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
**/ **/
/** /**
* hidden: true if `hidden:true` will not show in the sidebar(default is false) * hidden: true if `hidden:true` will not show in the sidebar(default is false)
@ -25,42 +31,64 @@ import Layout from '@/views/layout/Layout'
} }
**/ **/
export const constantRouterMap = [ export const constantRouterMap = [
{ path: '/login', component: () => import('@/views/login/index'), hidden: true }, {
{ path: '/authredirect', component: () => import('@/views/login/authredirect'), hidden: true }, path: '/login',
{ path: '/404', component: () => import('@/views/errorPage/404'), hidden: true }, component: () => import('@/views/login/index'),
{ path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }, hidden: true
},
{
path: '/authredirect',
component: () => import('@/views/login/authredirect'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/errorPage/404'),
hidden: true
},
{
path: '/401',
component: () => import('@/views/errorPage/401'),
hidden: true
},
{ {
path: '', path: '',
component: Layout, component: Layout,
redirect: 'dashboard', redirect: 'dashboard',
children: [{ children: [
{
path: 'dashboard', path: 'dashboard',
component: () => import('@/views/dashboard/index'), component: () => import('@/views/dashboard/index'),
name: 'dashboard', name: 'Dashboard',
meta: { title: 'dashboard', icon: 'dashboard', noCache: true } meta: { title: 'dashboard', icon: 'dashboard', noCache: true }
}] }
]
}, },
{ {
path: '/documentation', path: '/documentation',
component: Layout, component: Layout,
redirect: '/documentation/index', redirect: '/documentation/index',
children: [{ children: [
{
path: 'index', path: 'index',
component: () => import('@/views/documentation/index'), component: () => import('@/views/documentation/index'),
name: 'documentation', name: 'Documentation',
meta: { title: 'documentation', icon: 'documentation', noCache: true } meta: { title: 'documentation', icon: 'documentation', noCache: true }
}] }
]
}, },
{ {
path: '/guide', path: '/guide',
component: Layout, component: Layout,
redirect: '/guide/index', redirect: '/guide/index',
children: [{ children: [
{
path: 'index', path: 'index',
component: () => import('@/views/guide/index'), component: () => import('@/views/guide/index'),
name: 'guide', name: 'Guide',
meta: { title: 'guide', icon: 'guide', noCache: true } meta: { title: 'guide', icon: 'guide', noCache: true }
}] }
]
} }
] ]
@ -81,181 +109,88 @@ export const asyncRouterMap = [
icon: 'lock', icon: 'lock',
roles: ['admin', 'editor'] // you can set roles in root nav roles: ['admin', 'editor'] // you can set roles in root nav
}, },
children: [{ children: [
{
path: 'page', path: 'page',
component: () => import('@/views/permission/page'), component: () => import('@/views/permission/page'),
name: 'pagePermission', name: 'PagePermission',
meta: { meta: {
title: 'pagePermission', title: 'pagePermission',
roles: ['admin'] // or you can only set roles in sub nav roles: ['admin'] // or you can only set roles in sub nav
} }
}, { },
{
path: 'directive', path: 'directive',
component: () => import('@/views/permission/directive'), component: () => import('@/views/permission/directive'),
name: 'directivePermission', name: 'DirectivePermission',
meta: { meta: {
title: 'directivePermission' title: 'directivePermission'
// if do not set roles, means: this page does not require permission // if do not set roles, means: this page does not require permission
} }
}] }
]
}, },
{ {
path: '/icon', path: '/icon',
component: Layout, component: Layout,
children: [{ children: [
{
path: 'index', path: 'index',
component: () => import('@/views/svg-icons/index'), component: () => import('@/views/svg-icons/index'),
name: 'icons', name: 'Icons',
meta: { title: 'icons', icon: 'icon', noCache: true } meta: { title: 'icons', icon: 'icon', noCache: true }
}] }
},
{
path: '/components',
component: Layout,
redirect: 'noredirect',
name: 'component-demo',
meta: {
title: 'components',
icon: 'component'
},
children: [
{ path: 'tinymce', component: () => import('@/views/components-demo/tinymce'), name: 'tinymce-demo', meta: { title: 'tinymce' }},
{ path: 'markdown', component: () => import('@/views/components-demo/markdown'), name: 'markdown-demo', meta: { title: 'markdown' }},
{ path: 'json-editor', component: () => import('@/views/components-demo/jsonEditor'), name: 'jsonEditor-demo', meta: { title: 'jsonEditor' }},
{ path: 'splitpane', component: () => import('@/views/components-demo/splitpane'), name: 'splitpane-demo', meta: { title: 'splitPane' }},
{ path: 'avatar-upload', component: () => import('@/views/components-demo/avatarUpload'), name: 'avatarUpload-demo', meta: { title: 'avatarUpload' }},
{ path: 'dropzone', component: () => import('@/views/components-demo/dropzone'), name: 'dropzone-demo', meta: { title: 'dropzone' }},
{ path: 'sticky', component: () => import('@/views/components-demo/sticky'), name: 'sticky-demo', meta: { title: 'sticky' }},
{ path: 'count-to', component: () => import('@/views/components-demo/countTo'), name: 'countTo-demo', meta: { title: 'countTo' }},
{ path: 'mixin', component: () => import('@/views/components-demo/mixin'), name: 'componentMixin-demo', meta: { title: 'componentMixin' }},
{ path: 'back-to-top', component: () => import('@/views/components-demo/backToTop'), name: 'backToTop-demo', meta: { title: 'backToTop' }},
{ path: 'drag-dialog', component: () => import('@/views/components-demo/dragDialog'), name: 'dragDialog-demo', meta: { title: 'dragDialog' }},
{ path: 'dnd-list', component: () => import('@/views/components-demo/dndList'), name: 'dndList-demo', meta: { title: 'dndList' }},
{ path: 'drag-kanban', component: () => import('@/views/components-demo/dragKanban'), name: 'dragKanban-demo', meta: { title: 'dragKanban' }}
] ]
}, },
/** When your routing table is too long, you can split it into small modules**/
componentsRouter,
chartsRouter,
nestedRouter,
tableRouter,
{ {
path: '/charts', path: '/example',
component: Layout, component: Layout,
redirect: 'noredirect', redirect: '/example/list',
name: 'charts', name: 'Example',
meta: { meta: {
title: 'charts', title: 'example',
icon: 'chart' icon: 'example'
}, },
children: [ children: [
{ path: 'keyboard', component: () => import('@/views/charts/keyboard'), name: 'keyboardChart', meta: { title: 'keyboardChart', noCache: true }}, {
{ path: 'line', component: () => import('@/views/charts/line'), name: 'lineChart', meta: { title: 'lineChart', noCache: true }}, path: 'create',
{ path: 'mixchart', component: () => import('@/views/charts/mixChart'), name: 'mixChart', meta: { title: 'mixChart', noCache: true }} component: () => import('@/views/example/create'),
name: 'CreateArticle',
meta: { title: 'createArticle', icon: 'edit' }
},
{
path: 'edit/:id(\\d+)',
component: () => import('@/views/example/edit'),
name: 'EditArticle',
meta: { title: 'editArticle', noCache: true },
hidden: true
},
{
path: 'list',
component: () => import('@/views/example/list'),
name: 'ArticleList',
meta: { title: 'articleList', icon: 'list' }
}
] ]
}, },
{ {
path: '/tab', path: '/tab',
component: Layout, component: Layout,
children: [{ children: [
{
path: 'index', path: 'index',
component: () => import('@/views/tab/index'), component: () => import('@/views/tab/index'),
name: 'tab', name: 'Tab',
meta: { title: 'tab', icon: 'tab' } meta: { title: 'tab', icon: 'tab' }
}]
},
{
path: '/table',
component: Layout,
redirect: '/table/complex-table',
name: 'table',
meta: {
title: 'Table',
icon: 'table'
},
children: [
{ path: 'dynamic-table', component: () => import('@/views/table/dynamicTable/index'), name: 'dynamicTable', meta: { title: 'dynamicTable' }},
{ path: 'drag-table', component: () => import('@/views/table/dragTable'), name: 'dragTable', meta: { title: 'dragTable' }},
{ path: 'inline-edit-table', component: () => import('@/views/table/inlineEditTable'), name: 'inlineEditTable', meta: { title: 'inlineEditTable' }},
{ path: 'tree-table', component: () => import('@/views/table/treeTable/treeTable'), name: 'treeTableDemo', meta: { title: 'treeTable' }},
{ path: 'custom-tree-table', component: () => import('@/views/table/treeTable/customTreeTable'), name: 'customTreeTableDemo', meta: { title: 'customTreeTable' }},
{ path: 'complex-table', component: () => import('@/views/table/complexTable'), name: 'complexTable', meta: { title: 'complexTable' }}
]
},
{
path: '/example',
component: Layout,
redirect: '/example/list',
name: 'example',
meta: {
title: 'example',
icon: 'example'
},
children: [
{ path: 'create', component: () => import('@/views/example/create'), name: 'createArticle', meta: { title: 'createArticle', icon: 'edit' }},
{ path: 'edit/:id(\\d+)', component: () => import('@/views/example/edit'), name: 'editArticle', meta: { title: 'editArticle', noCache: true }, hidden: true },
{ path: 'list', component: () => import('@/views/example/list'), name: 'articleList', meta: { title: 'articleList', icon: 'list' }}
]
},
{
path: '/nested',
component: Layout,
redirect: '/nested/menu1/menu1-1',
name: 'nested',
meta: {
title: 'nested',
icon: 'nested'
},
children: [
{
path: 'menu1',
component: () => import('@/views/nested/menu1/index'), // Parent router-view
name: 'menu1',
meta: { title: 'menu1' },
redirect: '/nested/menu1/menu1-1',
children: [
{
path: 'menu1-1',
component: () => import('@/views/nested/menu1/menu1-1'),
name: 'menu1-1',
meta: { title: 'menu1-1' }
},
{
path: 'menu1-2',
component: () => import('@/views/nested/menu1/menu1-2'),
name: 'menu1-2',
redirect: '/nested/menu1/menu1-2/menu1-2-1',
meta: { title: 'menu1-2' },
children: [
{
path: 'menu1-2-1',
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
name: 'menu1-2-1',
meta: { title: 'menu1-2-1' }
},
{
path: 'menu1-2-2',
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
name: 'menu1-2-2',
meta: { title: 'menu1-2-2' }
}
]
},
{
path: 'menu1-3',
component: () => import('@/views/nested/menu1/menu1-3'),
name: 'menu1-3',
meta: { title: 'menu1-3' }
}
]
},
{
path: 'menu2',
name: 'menu2',
component: () => import('@/views/nested/menu2/index'),
meta: { title: 'menu2' }
} }
] ]
}, },
@ -264,14 +199,24 @@ export const asyncRouterMap = [
path: '/error', path: '/error',
component: Layout, component: Layout,
redirect: 'noredirect', redirect: 'noredirect',
name: 'errorPages', name: 'ErrorPages',
meta: { meta: {
title: 'errorPages', title: 'errorPages',
icon: '404' icon: '404'
}, },
children: [ children: [
{ path: '401', component: () => import('@/views/errorPage/401'), name: 'page401', meta: { title: 'page401', noCache: true }}, {
{ path: '404', component: () => import('@/views/errorPage/404'), name: 'page404', meta: { title: 'page404', noCache: true }} path: '401',
component: () => import('@/views/errorPage/401'),
name: 'Page401',
meta: { title: 'page401', noCache: true }
},
{
path: '404',
component: () => import('@/views/errorPage/404'),
name: 'Page404',
meta: { title: 'page404', noCache: true }
}
] ]
}, },
@ -279,22 +224,44 @@ export const asyncRouterMap = [
path: '/error-log', path: '/error-log',
component: Layout, component: Layout,
redirect: 'noredirect', redirect: 'noredirect',
children: [{ path: 'log', component: () => import('@/views/errorLog/index'), name: 'errorLog', meta: { title: 'errorLog', icon: 'bug' }}] children: [
{
path: 'log',
component: () => import('@/views/errorLog/index'),
name: 'ErrorLog',
meta: { title: 'errorLog', icon: 'bug' }
}
]
}, },
{ {
path: '/excel', path: '/excel',
component: Layout, component: Layout,
redirect: '/excel/export-excel', redirect: '/excel/export-excel',
name: 'excel', name: 'Excel',
meta: { meta: {
title: 'excel', title: 'excel',
icon: 'excel' icon: 'excel'
}, },
children: [ children: [
{ path: 'export-excel', component: () => import('@/views/excel/exportExcel'), name: 'exportExcel', meta: { title: 'exportExcel' }}, {
{ path: 'export-selected-excel', component: () => import('@/views/excel/selectExcel'), name: 'selectExcel', meta: { title: 'selectExcel' }}, path: 'export-excel',
{ path: 'upload-excel', component: () => import('@/views/excel/uploadExcel'), name: 'uploadExcel', meta: { title: 'uploadExcel' }} component: () => import('@/views/excel/exportExcel'),
name: 'ExportExcel',
meta: { title: 'exportExcel' }
},
{
path: 'export-selected-excel',
component: () => import('@/views/excel/selectExcel'),
name: 'EelectExcel',
meta: { title: 'selectExcel' }
},
{
path: 'upload-excel',
component: () => import('@/views/excel/uploadExcel'),
name: 'UploadExcel',
meta: { title: 'uploadExcel' }
}
] ]
}, },
@ -304,27 +271,55 @@ export const asyncRouterMap = [
redirect: '/zip/download', redirect: '/zip/download',
alwaysShow: true, alwaysShow: true,
meta: { title: 'zip', icon: 'zip' }, meta: { title: 'zip', icon: 'zip' },
children: [{ path: 'download', component: () => import('@/views/zip/index'), name: 'exportZip', meta: { title: 'exportZip' }}] children: [
{
path: 'download',
component: () => import('@/views/zip/index'),
name: 'ExportZip',
meta: { title: 'exportZip' }
}
]
}, },
{ {
path: '/theme', path: '/theme',
component: Layout, component: Layout,
redirect: 'noredirect', redirect: 'noredirect',
children: [{ path: 'index', component: () => import('@/views/theme/index'), name: 'theme', meta: { title: 'theme', icon: 'theme' }}] children: [
{
path: 'index',
component: () => import('@/views/theme/index'),
name: 'Theme',
meta: { title: 'theme', icon: 'theme' }
}
]
}, },
{ {
path: '/clipboard', path: '/clipboard',
component: Layout, component: Layout,
redirect: 'noredirect', redirect: 'noredirect',
children: [{ path: 'index', component: () => import('@/views/clipboard/index'), name: 'clipboardDemo', meta: { title: 'clipboardDemo', icon: 'clipboard' }}] children: [
{
path: 'index',
component: () => import('@/views/clipboard/index'),
name: 'ClipboardDemo',
meta: { title: 'clipboardDemo', icon: 'clipboard' }
}
]
}, },
{ {
path: '/i18n', path: '/i18n',
component: Layout, component: Layout,
children: [{ path: 'index', component: () => import('@/views/i18n-demo/index'), name: 'i18n', meta: { title: 'i18n', icon: 'international' }}] children: [
{
path: 'index',
component: () => import('@/views/i18n-demo/index'),
name: 'I18n',
meta: { title: 'i18n', icon: 'international' }
}
]
}, },
{ path: '*', redirect: '/404', hidden: true } { path: '*', redirect: '/404', hidden: true }

36
src/router/modules/charts.js Normal file
View File

@ -0,0 +1,36 @@
/** When your routing table is too long, you can split it into small modules**/
import Layout from '@/views/layout/Layout'
const chartsRouter = {
path: '/charts',
component: Layout,
redirect: 'noredirect',
name: 'Charts',
meta: {
title: 'charts',
icon: 'chart'
},
children: [
{
path: 'keyboard',
component: () => import('@/views/charts/keyboard'),
name: 'KeyboardChart',
meta: { title: 'keyboardChart', noCache: true }
},
{
path: 'line',
component: () => import('@/views/charts/line'),
name: 'LineChart',
meta: { title: 'lineChart', noCache: true }
},
{
path: 'mixchart',
component: () => import('@/views/charts/mixChart'),
name: 'MixChart',
meta: { title: 'mixChart', noCache: true }
}
]
}
export default chartsRouter

96
src/router/modules/components.js Normal file
View File

@ -0,0 +1,96 @@
/** When your routing table is too long, you can split it into small modules**/
import Layout from '@/views/layout/Layout'
const componentsRouter = {
path: '/components',
component: Layout,
redirect: 'noredirect',
name: 'ComponentDemo',
meta: {
title: 'components',
icon: 'component'
},
children: [
{
path: 'tinymce',
component: () => import('@/views/components-demo/tinymce'),
name: 'TinymceDemo',
meta: { title: 'tinymce' }
},
{
path: 'markdown',
component: () => import('@/views/components-demo/markdown'),
name: 'MarkdownDemo',
meta: { title: 'markdown' }
},
{
path: 'json-editor',
component: () => import('@/views/components-demo/jsonEditor'),
name: 'JsonEditorDemo',
meta: { title: 'jsonEditor' }
},
{
path: 'splitpane',
component: () => import('@/views/components-demo/splitpane'),
name: 'SplitpaneDemo',
meta: { title: 'splitPane' }
},
{
path: 'avatar-upload',
component: () => import('@/views/components-demo/avatarUpload'),
name: 'AvatarUploadDemo',
meta: { title: 'avatarUpload' }
},
{
path: 'dropzone',
component: () => import('@/views/components-demo/dropzone'),
name: 'DropzoneDemo',
meta: { title: 'dropzone' }
},
{
path: 'sticky',
component: () => import('@/views/components-demo/sticky'),
name: 'StickyDemo',
meta: { title: 'sticky' }
},
{
path: 'count-to',
component: () => import('@/views/components-demo/countTo'),
name: 'CountToDemo',
meta: { title: 'countTo' }
},
{
path: 'mixin',
component: () => import('@/views/components-demo/mixin'),
name: 'ComponentMixinDemo',
meta: { title: 'componentMixin' }
},
{
path: 'back-to-top',
component: () => import('@/views/components-demo/backToTop'),
name: 'BackToTopDemo',
meta: { title: 'backToTop' }
},
{
path: 'drag-dialog',
component: () => import('@/views/components-demo/dragDialog'),
name: 'DragDialogDemo',
meta: { title: 'dragDialog' }
},
{
path: 'dnd-list',
component: () => import('@/views/components-demo/dndList'),
name: 'DndListDemo',
meta: { title: 'dndList' }
},
{
path: 'drag-kanban',
component: () => import('@/views/components-demo/dragKanban'),
name: 'DragKanbanDemo',
meta: { title: 'dragKanban' }
}
]
}
export default componentsRouter

66
src/router/modules/nested.js Normal file
View File

@ -0,0 +1,66 @@
/** When your routing table is too long, you can split it into small modules**/
import Layout from '@/views/layout/Layout'
const nestedRouter = {
path: '/nested',
component: Layout,
redirect: '/nested/menu1/menu1-1',
name: 'Nested',
meta: {
title: 'nested',
icon: 'nested'
},
children: [
{
path: 'menu1',
component: () => import('@/views/nested/menu1/index'), // Parent router-view
name: 'Menu1',
meta: { title: 'menu1' },
redirect: '/nested/menu1/menu1-1',
children: [
{
path: 'menu1-1',
component: () => import('@/views/nested/menu1/menu1-1'),
name: 'Menu1-1',
meta: { title: 'menu1-1' }
},
{
path: 'menu1-2',
component: () => import('@/views/nested/menu1/menu1-2'),
name: 'Menu1-2',
redirect: '/nested/menu1/menu1-2/menu1-2-1',
meta: { title: 'menu1-2' },
children: [
{
path: 'menu1-2-1',
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
name: 'Menu1-2-1',
meta: { title: 'menu1-2-1' }
},
{
path: 'menu1-2-2',
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
name: 'Menu1-2-2',
meta: { title: 'menu1-2-2' }
}
]
},
{
path: 'menu1-3',
component: () => import('@/views/nested/menu1/menu1-3'),
name: 'Menu1-3',
meta: { title: 'menu1-3' }
}
]
},
{
path: 'menu2',
name: 'Menu2',
component: () => import('@/views/nested/menu2/index'),
meta: { title: 'menu2' }
}
]
}
export default nestedRouter

53
src/router/modules/table.js Normal file
View File

@ -0,0 +1,53 @@
/** When your routing table is too long, you can split it into small modules**/
import Layout from '@/views/layout/Layout'
const tableRouter = {
path: '/table',
component: Layout,
redirect: '/table/complex-table',
name: 'Table',
meta: {
title: 'Table',
icon: 'table'
},
children: [
{
path: 'dynamic-table',
component: () => import('@/views/table/dynamicTable/index'),
name: 'DynamicTable',
meta: { title: 'dynamicTable' }
},
{
path: 'drag-table',
component: () => import('@/views/table/dragTable'),
name: 'DragTable',
meta: { title: 'dragTable' }
},
{
path: 'inline-edit-table',
component: () => import('@/views/table/inlineEditTable'),
name: 'InlineEditTable',
meta: { title: 'inlineEditTable' }
},
{
path: 'tree-table',
component: () => import('@/views/table/treeTable/treeTable'),
name: 'TreeTableDemo',
meta: { title: 'treeTable' }
},
{
path: 'custom-tree-table',
component: () => import('@/views/table/treeTable/customTreeTable'),
name: 'CustomTreeTableDemo',
meta: { title: 'customTreeTable' }
},
{
path: 'complex-table',
component: () => import('@/views/table/complexTable'),
name: 'ComplexTable',
meta: { title: 'complexTable' }
}
]
}
export default tableRouter

14
src/store/modules/tagsView.js
View File

@ -6,9 +6,11 @@ const tagsView = {
mutations: { mutations: {
ADD_VISITED_VIEWS: (state, view) => { ADD_VISITED_VIEWS: (state, view) => {
if (state.visitedViews.some(v => v.path === view.path)) return if (state.visitedViews.some(v => v.path === view.path)) return
state.visitedViews.push(Object.assign({}, view, { state.visitedViews.push(
Object.assign({}, view, {
title: view.meta.title || 'no-name' title: view.meta.title || 'no-name'
})) })
)
if (!view.meta.noCache) { if (!view.meta.noCache) {
state.cachedViews.push(view.name) state.cachedViews.push(view.name)
} }
@ -43,7 +45,7 @@ const tagsView = {
} }
} }
}, },
DEL_ALL_VIEWS: (state) => { DEL_ALL_VIEWS: state => {
state.visitedViews = [] state.visitedViews = []
state.cachedViews = [] state.cachedViews = []
} }
@ -53,19 +55,19 @@ const tagsView = {
commit('ADD_VISITED_VIEWS', view) commit('ADD_VISITED_VIEWS', view)
}, },
delVisitedViews({ commit, state }, view) { delVisitedViews({ commit, state }, view) {
return new Promise((resolve) => { return new Promise(resolve => {
commit('DEL_VISITED_VIEWS', view) commit('DEL_VISITED_VIEWS', view)
resolve([...state.visitedViews]) resolve([...state.visitedViews])
}) })
}, },
delOthersViews({ commit, state }, view) { delOthersViews({ commit, state }, view) {
return new Promise((resolve) => { return new Promise(resolve => {
commit('DEL_OTHERS_VIEWS', view) commit('DEL_OTHERS_VIEWS', view)
resolve([...state.visitedViews]) resolve([...state.visitedViews])
}) })
}, },
delAllViews({ commit, state }) { delAllViews({ commit, state }) {
return new Promise((resolve) => { return new Promise(resolve => {
commit('DEL_ALL_VIEWS') commit('DEL_ALL_VIEWS')
resolve([...state.visitedViews]) resolve([...state.visitedViews])
}) })

1
src/styles/btn.scss
View File

@ -46,7 +46,6 @@
border-radius: 8px; border-radius: 8px;
border: none; border: none;
outline: none; outline: none;
margin-right: 25px;
transition: 600ms ease all; transition: 600ms ease all;
position: relative; position: relative;
display: inline-block; display: inline-block;

63
src/utils/index.js
View File

@ -25,7 +25,7 @@ export function parseTime(time, cFormat) {
} }
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => { const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key] let value = formatObj[key]
if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1] if (key === 'a') { return ['一', '二', '三', '四', '五', '六', '日'][value - 1] }
if (result.length > 0 && value < 10) { if (result.length > 0 && value < 10) {
value = '0' + value value = '0' + value
} }
@ -43,7 +43,8 @@ export function formatTime(time, option) {
if (diff < 30) { if (diff < 30) {
return '刚刚' return '刚刚'
} else if (diff < 3600) { // less 1 hour } else if (diff < 3600) {
// less 1 hour
return Math.ceil(diff / 60) + '分钟前' return Math.ceil(diff / 60) + '分钟前'
} else if (diff < 3600 * 24) { } else if (diff < 3600 * 24) {
return Math.ceil(diff / 3600) + '小时前' return Math.ceil(diff / 3600) + '小时前'
@ -53,7 +54,17 @@ export function formatTime(time, option) {
if (option) { if (option) {
return parseTime(time, option) return parseTime(time, option)
} else { } else {
return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分' return (
d.getMonth() +
1 +
'月' +
d.getDate() +
'日' +
d.getHours() +
'时' +
d.getMinutes() +
'分'
)
} }
} }
@ -81,9 +92,11 @@ export function getQueryObject(url) {
export function getByteLen(val) { export function getByteLen(val) {
let len = 0 let len = 0
for (let i = 0; i < val.length; i++) { for (let i = 0; i < val.length; i++) {
if (val[i].match(/[^\x00-\xff]/ig) != null) { if (val[i].match(/[^\x00-\xff]/gi) != null) {
len += 1 len += 1
} else { len += 0.5 } } else {
len += 0.5
}
} }
return Math.floor(len) return Math.floor(len)
} }
@ -100,11 +113,12 @@ export function cleanArray(actual) {
export function param(json) { export function param(json) {
if (!json) return '' if (!json) return ''
return cleanArray(Object.keys(json).map(key => { return cleanArray(
Object.keys(json).map(key => {
if (json[key] === undefined) return '' if (json[key] === undefined) return ''
return encodeURIComponent(key) + '=' + return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
encodeURIComponent(json[key]) })
})).join('&') ).join('&')
} }
export function param2Obj(url) { export function param2Obj(url) {
@ -112,7 +126,14 @@ export function param2Obj(url) {
if (!search) { if (!search) {
return {} return {}
} }
return JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}') return JSON.parse(
'{"' +
decodeURIComponent(search)
.replace(/"/g, '\\"')
.replace(/&/g, '","')
.replace(/=/g, '":"') +
'"}'
)
} }
export function html2Text(val) { export function html2Text(val) {
@ -131,7 +152,7 @@ export function objectMerge(target, source) {
if (Array.isArray(source)) { if (Array.isArray(source)) {
return source.slice() return source.slice()
} }
Object.keys(source).forEach((property) => { Object.keys(source).forEach(property => {
const sourceProperty = source[property] const sourceProperty = source[property]
if (typeof sourceProperty === 'object') { if (typeof sourceProperty === 'object') {
target[property] = objectMerge(target[property], sourceProperty) target[property] = objectMerge(target[property], sourceProperty)
@ -145,7 +166,7 @@ export function objectMerge(target, source) {
export function scrollTo(element, to, duration) { export function scrollTo(element, to, duration) {
if (duration <= 0) return if (duration <= 0) return
const difference = to - element.scrollTop const difference = to - element.scrollTop
const perTick = difference / duration * 10 const perTick = (difference / duration) * 10
setTimeout(() => { setTimeout(() => {
console.log(new Date()) console.log(new Date())
element.scrollTop = element.scrollTop + perTick element.scrollTop = element.scrollTop + perTick
@ -163,7 +184,9 @@ export function toggleClass(element, className) {
if (nameIndex === -1) { if (nameIndex === -1) {
classString += '' + className classString += '' + className
} else { } else {
classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length) classString =
classString.substr(0, nameIndex) +
classString.substr(nameIndex + className.length)
} }
element.className = classString element.className = classString
} }
@ -177,7 +200,8 @@ export const pickerOptions = [
end.setTime(start.getTime()) end.setTime(start.getTime())
picker.$emit('pick', [start, end]) picker.$emit('pick', [start, end])
} }
}, { },
{
text: '最近一周', text: '最近一周',
onClick(picker) { onClick(picker) {
const end = new Date(new Date().toDateString()) const end = new Date(new Date().toDateString())
@ -185,7 +209,8 @@ export const pickerOptions = [
start.setTime(end.getTime() - 3600 * 1000 * 24 * 7) start.setTime(end.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end]) picker.$emit('pick', [start, end])
} }
}, { },
{
text: '最近一个月', text: '最近一个月',
onClick(picker) { onClick(picker) {
const end = new Date(new Date().toDateString()) const end = new Date(new Date().toDateString())
@ -193,7 +218,8 @@ export const pickerOptions = [
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30) start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end]) picker.$emit('pick', [start, end])
} }
}, { },
{
text: '最近三个月', text: '最近三个月',
onClick(picker) { onClick(picker) {
const end = new Date(new Date().toDateString()) const end = new Date(new Date().toDateString())
@ -201,7 +227,8 @@ export const pickerOptions = [
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90) start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end]) picker.$emit('pick', [start, end])
} }
}] }
]
export function getTime(type) { export function getTime(type) {
if (type === 'start') { if (type === 'start') {
@ -256,7 +283,7 @@ export function deepClone(source) {
throw new Error('error arguments', 'shallowClone') throw new Error('error arguments', 'shallowClone')
} }
const targetObj = source.constructor === Array ? [] : {} const targetObj = source.constructor === Array ? [] : {}
Object.keys(source).forEach((keys) => { Object.keys(source).forEach(keys => {
if (source[keys] && typeof source[keys] === 'object') { if (source[keys] && typeof source[keys] === 'object') {
targetObj[keys] = deepClone(source[keys]) targetObj[keys] = deepClone(source[keys])
} else { } else {

1
src/utils/permission.js
View File

@ -23,4 +23,3 @@ export default function checkPermission(value) {
return false return false
} }
} }

12
src/utils/request.js
View File

@ -10,18 +10,21 @@ const service = axios.create({
}) })
// request interceptor // request interceptor
service.interceptors.request.use(config => { service.interceptors.request.use(
config => {
// Do something before request is sent // Do something before request is sent
if (store.getters.token) { if (store.getters.token) {
// 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改 // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
config.headers['X-Token'] = getToken() config.headers['X-Token'] = getToken()
} }
return config return config
}, error => { },
error => {
// Do something with request error // Do something with request error
console.log(error) // for debug console.log(error) // for debug
Promise.reject(error) Promise.reject(error)
}) }
)
// respone interceptor // respone interceptor
service.interceptors.response.use( service.interceptors.response.use(
@ -67,6 +70,7 @@ service.interceptors.response.use(
duration: 5 * 1000 duration: 5 * 1000
}) })
return Promise.reject(error) return Promise.reject(error)
}) }
)
export default service export default service

1
src/utils/validate.js
View File

@ -40,4 +40,3 @@ export function validateEmail(email) {
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
return re.test(email) return re.test(email)
} }

6
src/views/charts/keyboard.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class='chart-container'> <div class="chart-container">
<chart height='100%' width='100%'></chart> <chart height="100%" width="100%"/>
</div> </div>
</template> </template>
@ -8,7 +8,7 @@
import Chart from '@/components/Charts/keyboard' import Chart from '@/components/Charts/keyboard'
export default { export default {
name: 'keyboardChart', name: 'KeyboardChart',
components: { Chart } components: { Chart }
} }
</script> </script>

6
src/views/charts/line.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class='chart-container'> <div class="chart-container">
<chart height='100%' width='100%'></chart> <chart height="100%" width="100%"/>
</div> </div>
</template> </template>
@ -8,7 +8,7 @@
import Chart from '@/components/Charts/lineMarker' import Chart from '@/components/Charts/lineMarker'
export default { export default {
name: 'lineChart', name: 'LineChart',
components: { Chart } components: { Chart }
} }
</script> </script>

6
src/views/charts/mixChart.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class='chart-container'> <div class="chart-container">
<chart height='100%' width='100%'></chart> <chart height="100%" width="100%"/>
</div> </div>
</template> </template>
@ -8,7 +8,7 @@
import Chart from '@/components/Charts/mixChart' import Chart from '@/components/Charts/mixChart'
export default { export default {
name: 'mixChart', name: 'MixChart',
components: { Chart } components: { Chart }
} }
</script> </script>

10
src/views/clipboard/index.vue
View File

@ -2,12 +2,12 @@
<div class="app-container"> <div class="app-container">
<el-tabs v-model="activeName"> <el-tabs v-model="activeName">
<el-tab-pane label="use clipboard directly" name="directly"> <el-tab-pane label="use clipboard directly" name="directly">
<el-input v-model="inputData" placeholder="Please input" style='width:400px;'></el-input> <el-input v-model="inputData" placeholder="Please input" style="width:400px;"/>
<el-button type="primary" icon="document" @click='handleCopy(inputData,$event)'>copy</el-button> <el-button type="primary" icon="document" @click="handleCopy(inputData,$event)">copy</el-button>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="use clipboard by v-directive" name="v-directive"> <el-tab-pane label="use clipboard by v-directive" name="v-directive">
<el-input v-model="inputData" placeholder="Please input" style='width:400px;'></el-input> <el-input v-model="inputData" placeholder="Please input" style="width:400px;"/>
<el-button type="primary" icon="document" v-clipboard:copy='inputData' v-clipboard:success='clipboardSuccess'>copy</el-button> <el-button v-clipboard:copy="inputData" v-clipboard:success="clipboardSuccess" type="primary" icon="document">copy</el-button>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
@ -18,7 +18,7 @@ import clip from '@/utils/clipboard' // use clipboard directly
import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive
export default { export default {
name: 'clipboardDemo', name: 'ClipboardDemo',
directives: { directives: {
clipboard clipboard
}, },

19
src/views/components-demo/avatarUpload.vue
View File

@ -2,16 +2,23 @@
<div class="components-container"> <div class="components-container">
<code>This is based on <code>This is based on
<a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>. <a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>.
{{$t('components.imageUploadTips')}} {{ $t('components.imageUploadTips') }}
</code> </code>
<pan-thumb :image="image"></pan-thumb> <pan-thumb :image="image"/>
<el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">Change avatar <el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">Change Avatar
</el-button> </el-button>
<image-cropper :width="300" :height="300" url="https://httpbin.org/post" @close='close' @crop-upload-success="cropSuccess" langType="en" <image-cropper
:key="imagecropperKey" v-show="imagecropperShow"></image-cropper> v-show="imagecropperShow"
:width="300"
:height="300"
:key="imagecropperKey"
url="https://httpbin.org/post"
lang-type="en"
@close="close"
@crop-upload-success="cropSuccess"/>
</div> </div>
</template> </template>
@ -20,7 +27,7 @@ import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb' import PanThumb from '@/components/PanThumb'
export default { export default {
name: 'avatarUpload-demo', name: 'AvatarUploadDemo',
components: { ImageCropper, PanThumb }, components: { ImageCropper, PanThumb },
data() { data() {
return { return {

8
src/views/components-demo/backToTop.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="components-container"> <div class="components-container">
<code>{{$t('components.backToTopTips1')}}</code> <code>{{ $t('components.backToTopTips1') }}</code>
<code>{{$t('components.backToTopTips2')}}</code> <code>{{ $t('components.backToTopTips2') }}</code>
<div class="placeholder-container"> <div class="placeholder-container">
<div>placeholder</div> <div>placeholder</div>
<div>placeholder</div> <div>placeholder</div>
@ -116,7 +116,7 @@
<!--可自定义按钮的样式、show/hide临界点、返回的位置 --> <!--可自定义按钮的样式、show/hide临界点、返回的位置 -->
<!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素 --> <!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素 -->
<el-tooltip placement="top" content="tooltip"> <el-tooltip placement="top" content="tooltip">
<back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top> <back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade"/>
</el-tooltip> </el-tooltip>
</div> </div>
</template> </template>
@ -125,7 +125,7 @@
import BackToTop from '@/components/BackToTop' import BackToTop from '@/components/BackToTop'
export default { export default {
name: 'backToTop-demo', name: 'BackToTopDemo',
components: { BackToTop }, components: { BackToTop },
data() { data() {
return { return {

36
src/views/components-demo/countTo.vue
View File

@ -3,36 +3,45 @@
<p class="warn-content"> <p class="warn-content">
<a href="https://github.com/PanJiaChen/vue-countTo" target="_blank">countTo-component</a> <a href="https://github.com/PanJiaChen/vue-countTo" target="_blank">countTo-component</a>
</p> </p>
<count-to ref="example" class="example" :start-val="_startVal" :end-val="_endVal" :duration="_duration" :decimals="_decimals" <count-to
:separator="_separator" :prefix="_prefix" :suffix="_suffix" :autoplay="false"></count-to> ref="example"
:start-val="_startVal"
:end-val="_endVal"
:duration="_duration"
:decimals="_decimals"
:separator="_separator"
:prefix="_prefix"
:suffix="_suffix"
:autoplay="false"
class="example"/>
<div style="margin-left: 25%;margin-top: 40px;"> <div style="margin-left: 25%;margin-top: 40px;">
<label class="label" for="startValInput">startVal: <label class="label" for="startValInput">startVal:
<input type="number" v-model.number="setStartVal" name="startValInput" /> <input v-model.number="setStartVal" type="number" name="startValInput" >
</label> </label>
<label class="label" for="endValInput">endVal: <label class="label" for="endValInput">endVal:
<input type="number" v-model.number="setEndVal" name="endVaInput" /> <input v-model.number="setEndVal" type="number" name="endVaInput" >
</label> </label>
<label class="label" for="durationInput">duration: <label class="label" for="durationInput">duration:
<input type="number" v-model.number="setDuration" name="durationInput" /> <input v-model.number="setDuration" type="number" name="durationInput" >
</label> </label>
<div class="startBtn example-btn" @click="start">开始</div> <div class="startBtn example-btn" @click="start">开始</div>
<div class="pause-resume-btn example-btn" @click="pauseResume">暂停/恢复</div> <div class="pause-resume-btn example-btn" @click="pauseResume">暂停/恢复</div>
<br/> <br>
<label class="label" for="decimalsInput">decimals: <label class="label" for="decimalsInput">decimals:
<input type="number" v-model.number="setDecimals" name="decimalsInput" /> <input v-model.number="setDecimals" type="number" name="decimalsInput" >
</label> </label>
<label class="label" for="separatorInput">separator: <label class="label" for="separatorInput">separator:
<input v-model="setSeparator" name="separatorInput" /> <input v-model="setSeparator" name="separatorInput" >
</label> </label>
<label class="label" for="prefixInput">prefix: <label class="label" for="prefixInput">prefix:
<input v-model="setPrefix" name="prefixInput" /> <input v-model="setPrefix" name="prefixInput" >
</label> </label>
<label class="label" for="suffixInput">suffix: <label class="label" for="suffixInput">suffix:
<input v-model="setSuffix" name="suffixInput" /> <input v-model="setSuffix" name="suffixInput" >
</label> </label>
</div> </div>
<code>&lt;count-to :start-val=&#x27;{{_startVal}}&#x27; :end-val=&#x27;{{_endVal}}&#x27; :duration=&#x27;{{_duration}}&#x27; <code>&lt;count-to :start-val=&#x27;{{ _startVal }}&#x27; :end-val=&#x27;{{ _endVal }}&#x27; :duration=&#x27;{{ _duration }}&#x27;
:decimals=&#x27;{{_decimals}}&#x27; :separator=&#x27;{{_separator}}&#x27; :prefix=&#x27;{{_prefix}}&#x27; :suffix=&#x27;{{_suffix}}&#x27; :decimals=&#x27;{{ _decimals }}&#x27; :separator=&#x27;{{ _separator }}&#x27; :prefix=&#x27;{{ _prefix }}&#x27; :suffix=&#x27;{{ _suffix }}&#x27;
:autoplay=false&gt;</code> :autoplay=false&gt;</code>
</div> </div>
</template> </template>
@ -41,7 +50,7 @@
import countTo from 'vue-count-to' import countTo from 'vue-count-to'
export default { export default {
name: 'countTo-demo', name: 'CountToDemo',
components: { countTo }, components: { countTo },
data() { data() {
return { return {
@ -202,4 +211,3 @@ input {
} }
</style> </style>

5
src/views/components-demo/dndList.vue
View File

@ -4,7 +4,7 @@
<a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a> <a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a>
</code> </code>
<div class="editor-container"> <div class="editor-container">
<dnd-list :list1="list1" :list2="list2" list1Title="List" list2Title="Article pool"></dnd-list> <dnd-list :list1="list1" :list2="list2" list1-title="List" list2-title="Article pool"/>
</div> </div>
</div> </div>
</template> </template>
@ -14,7 +14,7 @@ import DndList from '@/components/DndList'
import { fetchList } from '@/api/article' import { fetchList } from '@/api/article'
export default { export default {
name: 'dndList-demo', name: 'DndListDemo',
components: { DndList }, components: { DndList },
data() { data() {
return { return {
@ -37,4 +37,3 @@ export default {
} }
</script> </script>

13
src/views/components-demo/dragDialog.vue
View File

@ -1,15 +1,14 @@
<template> <template>
<div class="components-container"> <div class="components-container">
<el-button type="primary" @click="dialogTableVisible = true">open a Drag Dialog</el-button> <el-button type="primary" @click="dialogTableVisible = true">open a Drag Dialog</el-button>
<el-dialog v-el-drag-dialog @dragDialog="handleDrag" title="Shipping address" :visible.sync="dialogTableVisible"> <el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" title="Shipping address" @dragDialog="handleDrag">
<el-select ref="select" v-model="value" placeholder="请选择"> <el-select ref="select" v-model="value" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
</el-option>
</el-select> </el-select>
<el-table :data="gridData"> <el-table :data="gridData">
<el-table-column property="date" label="Date" width="150"></el-table-column> <el-table-column property="date" label="Date" width="150"/>
<el-table-column property="name" label="Name" width="200"></el-table-column> <el-table-column property="name" label="Name" width="200"/>
<el-table-column property="address" label="Address"></el-table-column> <el-table-column property="address" label="Address"/>
</el-table> </el-table>
</el-dialog> </el-dialog>
</div> </div>
@ -19,7 +18,7 @@
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
export default { export default {
name: 'dragDialog-demo', name: 'DragDialogDemo',
directives: { elDragDialog }, directives: { elDragDialog },
data() { data() {
return { return {

8
src/views/components-demo/dragKanban.vue
View File

@ -1,15 +1,15 @@
<template> <template>
<div class="components-container board"> <div class="components-container board">
<Kanban :key="1" class="kanban todo" :list="list1" :options="options" header-text="Todo"/> <Kanban :key="1" :list="list1" :options="options" class="kanban todo" header-text="Todo"/>
<Kanban :key="2" class="kanban working" :list="list2" :options="options" header-text="Working"/> <Kanban :key="2" :list="list2" :options="options" class="kanban working" header-text="Working"/>
<Kanban :key="3" class="kanban done" :list="list3" :options="options" header-text="Done"/> <Kanban :key="3" :list="list3" :options="options" class="kanban done" header-text="Done"/>
</div> </div>
</template> </template>
<script> <script>
import Kanban from '@/components/Kanban' import Kanban from '@/components/Kanban'
export default { export default {
name: 'dragKanban-demo', name: 'DragKanbanDemo',
components: { components: {
Kanban Kanban
}, },

7
src/views/components-demo/dropzone.vue
View File

@ -2,10 +2,10 @@
<div class="components-container"> <div class="components-container">
<code> <code>
Based on <a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a>. Based on <a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a>.
{{$t('components.dropzoneTips')}} {{ $t('components.dropzoneTips') }}
</code> </code>
<div class="editor-container"> <div class="editor-container">
<dropzone v-on:dropzone-removedFile="dropzoneR" v-on:dropzone-success="dropzoneS" id="myVueDropzone" url="https://httpbin.org/post"></dropzone> <dropzone id="myVueDropzone" url="https://httpbin.org/post" @dropzone-removedFile="dropzoneR" @dropzone-success="dropzoneS"/>
</div> </div>
</div> </div>
</template> </template>
@ -14,7 +14,7 @@
import Dropzone from '@/components/Dropzone' import Dropzone from '@/components/Dropzone'
export default { export default {
name: 'dropzone-demo', name: 'DropzoneDemo',
components: { Dropzone }, components: { Dropzone },
methods: { methods: {
dropzoneS(file) { dropzoneS(file) {
@ -29,4 +29,3 @@ export default {
} }
</script> </script>

4
src/views/components-demo/jsonEditor.vue
View File

@ -2,7 +2,7 @@
<div class="components-container"> <div class="components-container">
<code>JsonEditor is base on <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a> , lint base on json-lint </code> <code>JsonEditor is base on <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a> , lint base on json-lint </code>
<div class="editor-container"> <div class="editor-container">
<json-editor ref="jsonEditor" v-model="value"></json-editor> <json-editor ref="jsonEditor" v-model="value"/>
</div> </div>
</div> </div>
</template> </template>
@ -13,7 +13,7 @@ import JsonEditor from '@/components/JsonEditor'
const jsonData = '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]' const jsonData = '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]'
export default { export default {
name: 'jsonEditor-demo', name: 'JsonEditorDemo',
components: { JsonEditor }, components: { JsonEditor },
data() { data() {
return { return {

11
src/views/components-demo/markdown.vue
View File

@ -2,14 +2,14 @@
<div class="components-container"> <div class="components-container">
<code>Markdown is based on <code>Markdown is based on
<a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> ，Simply encapsulated in Vue. <a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> ，Simply encapsulated in Vue.
<a target="_blank" href="https://segmentfault.com/a/1190000009762198#articleHeader14"> <a target="_blank" href="https://juejin.im/post/593121aa0ce4630057f70d35#heading-15">
相关文章 </a> 相关文章 </a>
</code> </code>
<div class="editor-container"> <div class="editor-container">
<markdown-editor id="contentEditor" ref="contentEditor" v-model="content" :height="300" :zIndex="20"></markdown-editor> <markdown-editor id="contentEditor" ref="contentEditor" v-model="content" :height="300" :z-index="20"/>
</div> </div>
<el-button @click="markdown2Html" style="margin-top:80px;" type="primary" icon="el-icon-document">To HTML</el-button> <el-button style="margin-top:80px;" type="primary" icon="el-icon-document" @click="markdown2Html">To HTML</el-button>
<div v-html="html"></div> <div v-html="html"/>
</div> </div>
</template> </template>
@ -27,7 +27,7 @@ const content = `
` `
export default { export default {
name: 'markdown-demo', name: 'MarkdownDemo',
components: { MarkdownEditor }, components: { MarkdownEditor },
data() { data() {
return { return {
@ -46,4 +46,3 @@ export default {
} }
</script> </script>

31
src/views/components-demo/mixin.vue
View File

@ -7,19 +7,19 @@
</div> </div>
<div style="margin-bottom:50px;"> <div style="margin-bottom:50px;">
<el-col :span="4" class="text-center"> <el-col :span="4" class="text-center">
<router-link class="pan-btn blue-btn" to="/components/index">Components</router-link> <router-link class="pan-btn blue-btn" to="/documentation/index">Documentation</router-link>
</el-col> </el-col>
<el-col :span="4" class="text-center"> <el-col :span="4" class="text-center">
<router-link class="pan-btn light-blue-btn" to="/charts/index">Charts</router-link> <router-link class="pan-btn light-blue-btn" to="/icon/index">Icons</router-link>
</el-col> </el-col>
<el-col :span="4" class="text-center"> <el-col :span="4" class="text-center">
<router-link class="pan-btn pink-btn" to="/excel/download">Excel</router-link> <router-link class="pan-btn pink-btn" to="/excel/export-excel">Excel</router-link>
</el-col> </el-col>
<el-col :span="4" class="text-center"> <el-col :span="4" class="text-center">
<router-link class="pan-btn green-btn" to="/example/table/complex-table">Table</router-link> <router-link class="pan-btn green-btn" to="/table/complex-table">Table</router-link>
</el-col> </el-col>
<el-col :span="4" class="text-center"> <el-col :span="4" class="text-center">
<router-link class="pan-btn tiffany-btn" to="/form/edit-form">Form</router-link> <router-link class="pan-btn tiffany-btn" to="/example/create">Form</router-link>
</el-col> </el-col>
<el-col :span="4" class="text-center"> <el-col :span="4" class="text-center">
<router-link class="pan-btn yellow-btn" to="/theme/index">Theme</router-link> <router-link class="pan-btn yellow-btn" to="/theme/index">Theme</router-link>
@ -37,7 +37,7 @@
<div style="height:100px;"> <div style="height:100px;">
<el-form :model="demo" :rules="demoRules"> <el-form :model="demo" :rules="demoRules">
<el-form-item prop="title"> <el-form-item prop="title">
<md-input icon="search" name="title" placeholder="输入标题" v-model="demo.title">标题</md-input> <md-input v-model="demo.title" icon="search" name="title" placeholder="输入标题">标题</md-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
@ -74,20 +74,20 @@
<span>hover text</span> <span>hover text</span>
</div> </div>
<div class="component-item"> <div class="component-item">
<mallki className="mallki-text" text="vue-element-admin"></mallki> <mallki class-name="mallki-text" text="vue-element-admin"/>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20" style="margin-top:50px;"> <el-row :gutter="20" style="margin-top:50px;">
<el-col :span="6"> <el-col :span="8">
<el-card class="box-card"> <el-card class="box-card">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>Share</span> <span>Share</span>
</div> </div>
<div class="component-item" style="height:420px;"> <div class="component-item" style="height:420px;">
<dropdown-menu style="margin:0 auto;" title='系列文章' :items='articleList'></dropdown-menu> <dropdown-menu :items="articleList" style="margin:0 auto;" title="系列文章"/>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
@ -104,7 +104,7 @@ import DropdownMenu from '@/components/Share/dropdownMenu'
import waves from '@/directive/waves/index.js' // 水波纹指令 import waves from '@/directive/waves/index.js' // 水波纹指令
export default { export default {
name: 'componentMixin-demo', name: 'ComponentMixinDemo',
components: { components: {
PanThumb, PanThumb,
MdInput, MdInput,
@ -130,12 +130,11 @@ export default {
title: [{ required: true, trigger: 'change', validator: validate }] title: [{ required: true, trigger: 'change', validator: validate }]
}, },
articleList: [ articleList: [
{ title: '基础篇', href: 'https://segmentfault.com/a/1190000009275424' }, { title: '基础篇', href: 'https://juejin.im/post/59097cd7a22b9d0065fb61d2' },
{ title: '登录权限篇', href: 'https://segmentfault.com/a/1190000009506097' }, { title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
{ title: '实战篇', href: 'https://segmentfault.com/a/1190000009762198' }, { title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
{ title: 'vueAdmin-template 篇', href: 'https://segmentfault.com/a/1190000010043013' }, { title: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
{ title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' }, { title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' }
{ title: '优雅的使用 icon', href: 'https://segmentfault.com/a/https://segmentfault.com/a/1190000012213278' }
] ]
} }
} }

12
src/views/components-demo/splitpane.vue
View File

@ -3,19 +3,19 @@
<code><strong>SplitPane</strong> If you've used <code><strong>SplitPane</strong> If you've used
<a href="http://codepen.io/" target="_blank"> codepen</a>, <a href="http://codepen.io/" target="_blank"> codepen</a>,
<a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>will not be unfamiliar. <a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>will not be unfamiliar.
<a href="https://github.com/PanJiaChen/vue-split-pane" target='_blank'> Github repository</a> <a href="https://github.com/PanJiaChen/vue-split-pane" target="_blank"> Github repository</a>
</code> </code>
<split-pane v-on:resize="resize" split="vertical"> <split-pane split="vertical" @resize="resize">
<template slot="paneL"> <template slot="paneL">
<div class="left-container"></div> <div class="left-container"/>
</template> </template>
<template slot="paneR"> <template slot="paneR">
<split-pane split="horizontal"> <split-pane split="horizontal">
<template slot="paneL"> <template slot="paneL">
<div class="top-container"></div> <div class="top-container"/>
</template> </template>
<template slot="paneR"> <template slot="paneR">
<div class="bottom-container"></div> <div class="bottom-container"/>
</template> </template>
</split-pane> </split-pane>
</template> </template>
@ -27,7 +27,7 @@
import splitPane from 'vue-splitpane' import splitPane from 'vue-splitpane'
export default { export default {
name: 'splitpane-demo', name: 'SplitpaneDemo',
components: { splitPane }, components: { splitPane },
methods: { methods: {
resize() { resize() {

22
src/views/components-demo/sticky.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<div> <div>
<sticky className="sub-navbar"> <sticky class-name="sub-navbar">
<el-dropdown trigger="click"> <el-dropdown trigger="click">
<el-button plain> <el-button plain>
Platform<i class="el-icon-caret-bottom el-icon--right"></i> Platform<i class="el-icon-caret-bottom el-icon--right"/>
</el-button> </el-button>
<el-dropdown-menu class="no-border" slot="dropdown"> <el-dropdown-menu slot="dropdown" class="no-border">
<el-checkbox-group v-model="platforms" style="padding: 5px 15px;"> <el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
<el-checkbox v-for="item in platformsOptions" :label="item.key" :key="item.key"> <el-checkbox v-for="item in platformsOptions" :label="item.key" :key="item.key">
{{item.name}} {{ item.name }}
</el-checkbox> </el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</el-dropdown-menu> </el-dropdown-menu>
@ -16,18 +16,17 @@
<el-dropdown trigger="click"> <el-dropdown trigger="click">
<el-button plain> <el-button plain>
Link<i class="el-icon-caret-bottom el-icon--right"></i> Link<i class="el-icon-caret-bottom el-icon--right"/>
</el-button> </el-button>
<el-dropdown-menu class="no-padding no-border" style="width:300px" slot="dropdown"> <el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:300px">
<el-input placeholder="Please enter the content" v-model="url"> <el-input v-model="url" placeholder="Please enter the content">
<template slot="prepend">Url</template> <template slot="prepend">Url</template>
</el-input> </el-input>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
<div class="time-container"> <div class="time-container">
<el-date-picker v-model="time" type="datetime" :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm:ss" placeholder="Release time"> <el-date-picker v-model="time" :picker-options="pickerOptions" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="Release time"/>
</el-date-picker>
</div> </div>
<el-button style="margin-left: 10px;" type="success">publish <el-button style="margin-left: 10px;" type="success">publish
@ -35,7 +34,7 @@
</sticky> </sticky>
<div class="components-container"> <div class="components-container">
<code>Sticky header, {{$t('components.stickyTips')}}</code> <code>Sticky header, {{ $t('components.stickyTips') }}</code>
<div>placeholder</div> <div>placeholder</div>
<div>placeholder</div> <div>placeholder</div>
<div>placeholder</div> <div>placeholder</div>
@ -92,12 +91,11 @@
</div> </div>
</template> </template>
<script> <script>
import Sticky from '@/components/Sticky' import Sticky from '@/components/Sticky'
export default { export default {
name: 'sticky-demo', name: 'StickyDemo',
components: { Sticky }, components: { Sticky },
data() { data() {
return { return {

11
src/views/components-demo/tinymce.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<div class="components-container"> <div class="components-container">
<code> <code>
{{$t('components.tinymceTips')}} {{ $t('components.tinymceTips') }}
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/component/rich-editor.html"> {{$t('components.documentation')}}</a> <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/component/rich-editor.html"> {{ $t('components.documentation') }}</a>
</code> </code>
<div> <div>
<tinymce :height="300" v-model="content"></tinymce> <tinymce :height="300" v-model="content"/>
</div> </div>
<div class="editor-content" v-html="content"></div> <div class="editor-content" v-html="content"/>
</div> </div>
</template> </template>
@ -15,7 +15,7 @@
import Tinymce from '@/components/Tinymce' import Tinymce from '@/components/Tinymce'
export default { export default {
name: 'tinymce-demo', name: 'TinymceDemo',
components: { Tinymce }, components: { Tinymce },
data() { data() {
return { return {
@ -34,4 +34,3 @@ export default {
} }
</style> </style>

2
src/views/dashboard/admin/components/BarChart.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :class="className" :style="{height:height,width:width}"></div> <div :class="className" :style="{height:height,width:width}"/>
</template> </template>
<script> <script>

40
src/views/dashboard/admin/components/BoxCard.vue
View File

@ -1,26 +1,26 @@
<template> <template>
<el-card class="box-card-component" style="margin-left:8px;"> <el-card class="box-card-component" style="margin-left:8px;">
<div slot="header" class="box-card-header"> <div slot="header" class="box-card-header">
<img src='https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png'> <img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
</div> </div>
<div style="position:relative;"> <div style="position:relative;">
<pan-thumb class="panThumb" :image="avatar"></pan-thumb> <pan-thumb :image="avatar" class="panThumb"/>
<mallki className='mallki-text' text='vue-element-admin'></mallki> <mallki class-name="mallki-text" text="vue-element-admin"/>
<div style="padding-top:35px;" class='progress-item'> <div style="padding-top:35px;" class="progress-item">
<span>Vue</span> <span>Vue</span>
<el-progress :percentage="70"></el-progress> <el-progress :percentage="70"/>
</div> </div>
<div class='progress-item'> <div class="progress-item">
<span>JavaScript</span> <span>JavaScript</span>
<el-progress :percentage="18"></el-progress> <el-progress :percentage="18"/>
</div> </div>
<div class='progress-item'> <div class="progress-item">
<span>Css</span> <span>Css</span>
<el-progress :percentage="12"></el-progress> <el-progress :percentage="12"/>
</div> </div>
<div class='progress-item'> <div class="progress-item">
<span>ESLint</span> <span>ESLint</span>
<el-progress :percentage="100" status="success"></el-progress> <el-progress :percentage="100" status="success"/>
</div> </div>
</div> </div>
</el-card> </el-card>
@ -34,6 +34,15 @@ import Mallki from '@/components/TextHoverEffect/Mallki'
export default { export default {
components: { PanThumb, Mallki }, components: { PanThumb, Mallki },
filters: {
statusFilter(status) {
const statusMap = {
success: 'success',
pending: 'danger'
}
return statusMap[status]
}
},
data() { data() {
return { return {
statisticsData: { statisticsData: {
@ -48,15 +57,6 @@ export default {
'avatar', 'avatar',
'roles' 'roles'
]) ])
},
filters: {
statusFilter(status) {
const statusMap = {
success: 'success',
pending: 'danger'
}
return statusMap[status]
}
} }
} }
</script> </script>

21
src/views/dashboard/admin/components/LineChart.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :class="className" :style="{height:height,width:width}"></div> <div :class="className" :style="{height:height,width:width}"/>
</template> </template>
<script> <script>
@ -26,7 +26,8 @@ export default {
default: true default: true
}, },
chartData: { chartData: {
type: Object type: Object,
required: true
} }
}, },
data() { data() {
@ -34,6 +35,14 @@ export default {
chart: null chart: null
} }
}, },
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
mounted() { mounted() {
this.initChart() this.initChart()
if (this.autoResize) { if (this.autoResize) {
@ -63,14 +72,6 @@ export default {
this.chart.dispose() this.chart.dispose()
this.chart = null this.chart = null
}, },
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
methods: { methods: {
setOptions({ expectedData, actualData } = {}) { setOptions({ expectedData, actualData } = {}) {
this.chart.setOption({ this.chart.setOption({

12
src/views/dashboard/admin/components/PanelGroup.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<el-row class="panel-group" :gutter="40"> <el-row :gutter="40" class="panel-group">
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class='card-panel' @click="handleSetLineChartData('newVisitis')"> <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
<div class="card-panel-icon-wrapper icon-people"> <div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="peoples" class-name="card-panel-icon" /> <svg-icon icon-class="peoples" class-name="card-panel-icon" />
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text">New Visits</div> <div class="card-panel-text">New Visits</div>
<count-to class="card-panel-num" :startVal="0" :endVal="102400" :duration="2600"></count-to> <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num"/>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -18,7 +18,7 @@
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text">Messages</div> <div class="card-panel-text">Messages</div>
<count-to class="card-panel-num" :startVal="0" :endVal="81212" :duration="3000"></count-to> <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num"/>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -29,7 +29,7 @@
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text">Purchases</div> <div class="card-panel-text">Purchases</div>
<count-to class="card-panel-num" :startVal="0" :endVal="9280" :duration="3200"></count-to> <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num"/>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -40,7 +40,7 @@
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text">Shoppings</div> <div class="card-panel-text">Shoppings</div>
<count-to class="card-panel-num" :startVal="0" :endVal="13600" :duration="3600"></count-to> <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num"/>
</div> </div>
</div> </div>
</el-col> </el-col>

2
src/views/dashboard/admin/components/PieChart.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :class="className" :style="{height:height,width:width}"></div> <div :class="className" :style="{height:height,width:width}"/>
</template> </template>
<script> <script>

2
src/views/dashboard/admin/components/RaddarChart.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :class="className" :style="{height:height,width:width}"></div> <div :class="className" :style="{height:height,width:width}"/>
</template> </template>
<script> <script>

35
src/views/dashboard/admin/components/TodoList/Todo.vue
View File

@ -1,17 +1,19 @@
<template> <template>
<li class="todo" :class="{ completed: todo.done, editing: editing }"> <li :class="{ completed: todo.done, editing: editing }" class="todo">
<div class="view"> <div class="view">
<input class="toggle" <input
type="checkbox"
:checked="todo.done" :checked="todo.done"
class="toggle"
type="checkbox"
@change="toggleTodo( todo)"> @change="toggleTodo( todo)">
<label v-text="todo.text" @dblclick="editing = true"></label> <label @dblclick="editing = true" v-text="todo.text"/>
<button class="destroy" @click="deleteTodo( todo )"></button> <button class="destroy" @click="deleteTodo( todo )"/>
</div> </div>
<input class="edit" <input
v-show="editing"
v-focus="editing" v-focus="editing"
v-show="editing"
:value="todo.text" :value="todo.text"
class="edit"
@keyup.enter="doneEdit" @keyup.enter="doneEdit"
@keyup.esc="cancelEdit" @keyup.esc="cancelEdit"
@blur="doneEdit"> @blur="doneEdit">
@ -21,12 +23,6 @@
<script> <script>
export default { export default {
name: 'Todo', name: 'Todo',
props: ['todo'],
data() {
return {
editing: false
}
},
directives: { directives: {
focus(el, { value }, { context }) { focus(el, { value }, { context }) {
if (value) { if (value) {
@ -36,6 +32,19 @@ export default {
} }
} }
}, },
props: {
todo: {
type: Object,
default: function() {
return {}
}
}
},
data() {
return {
editing: false
}
},
methods: { methods: {
deleteTodo(todo) { deleteTodo(todo) {
this.$emit('deleteTodo', todo) this.$emit('deleteTodo', todo)

1
src/views/dashboard/admin/components/TodoList/index.scss
View File

@ -201,6 +201,7 @@
font-size: 30px; font-size: 30px;
color: #cc9a9a; color: #cc9a9a;
transition: color 0.2s ease-out; transition: color 0.2s ease-out;
cursor: pointer;
} }
.todo-list li .destroy:hover { .todo-list li .destroy:hover {
color: #af5b5e; color: #af5b5e;

25
src/views/dashboard/admin/components/TodoList/index.vue
View File

@ -5,16 +5,21 @@
<input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo"> <input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">
</header> </header>
<!-- main section --> <!-- main section -->
<section class="main" v-show="todos.length"> <section v-show="todos.length" class="main">
<input class="toggle-all" id="toggle-all" type="checkbox" :checked="allChecked" @change="toggleAll({ done: !allChecked })"> <input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox" @change="toggleAll({ done: !allChecked })">
<label for="toggle-all"></label> <label for="toggle-all"/>
<ul class="todo-list"> <ul class="todo-list">
<todo @toggleTodo='toggleTodo' @editTodo='editTodo' @deleteTodo='deleteTodo' v-for="(todo, index) in filteredTodos" :key="index" <todo
:todo="todo"></todo> v-for="(todo, index) in filteredTodos"
:key="index"
:todo="todo"
@toggleTodo="toggleTodo"
@editTodo="editTodo"
@deleteTodo="deleteTodo"/>
</ul> </ul>
</section> </section>
<!-- footer --> <!-- footer -->
<footer class="footer" v-show="todos.length"> <footer v-show="todos.length" class="footer">
<span class="todo-count"> <span class="todo-count">
<strong>{{ remaining }}</strong> <strong>{{ remaining }}</strong>
{{ remaining | pluralize('item') }} left {{ remaining | pluralize('item') }} left
@ -52,6 +57,10 @@ const defalutList = [
] ]
export default { export default {
components: { Todo }, components: { Todo },
filters: {
pluralize: (n, w) => n === 1 ? w : w + 's',
capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
},
data() { data() {
return { return {
visibility: 'all', visibility: 'all',
@ -108,10 +117,6 @@ export default {
this.setLocalStorage() this.setLocalStorage()
}) })
} }
},
filters: {
pluralize: (n, w) => n === 1 ? w : w + 's',
capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
} }
} }
</script> </script>

16
src/views/dashboard/admin/components/TransactionTable.vue
View File

@ -2,17 +2,17 @@
<el-table :data="list" style="width: 100%;padding-top: 15px;"> <el-table :data="list" style="width: 100%;padding-top: 15px;">
<el-table-column label="Order_No" min-width="200"> <el-table-column label="Order_No" min-width="200">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.order_no | orderNoFilter}} {{ scope.row.order_no | orderNoFilter }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="Price" width="195" align="center"> <el-table-column label="Price" width="195" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
¥{{scope.row.price | toThousandslsFilter}} ¥{{ scope.row.price | toThousandslsFilter }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="Status" width="100" align="center"> <el-table-column label="Status" width="100" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag :type="scope.row.status | statusFilter"> {{scope.row.status}}</el-tag> <el-tag :type="scope.row.status | statusFilter"> {{ scope.row.status }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -22,11 +22,6 @@
import { fetchList } from '@/api/transaction' import { fetchList } from '@/api/transaction'
export default { export default {
data() {
return {
list: null
}
},
filters: { filters: {
statusFilter(status) { statusFilter(status) {
const statusMap = { const statusMap = {
@ -39,6 +34,11 @@ export default {
return str.substring(0, 30) return str.substring(0, 30)
} }
}, },
data() {
return {
list: null
}
},
created() { created() {
this.fetchData() this.fetchData()
}, },

21
src/views/dashboard/admin/index.vue
View File

@ -1,48 +1,47 @@
<template> <template>
<div class="dashboard-editor-container"> <div class="dashboard-editor-container">
<github-corner style="position: absolute; top: 0px; border: 0; right: 0;"></github-corner> <github-corner style="position: absolute; top: 0px; border: 0; right: 0;"/>
<panel-group @handleSetLineChartData="handleSetLineChartData"></panel-group> <panel-group @handleSetLineChartData="handleSetLineChartData"/>
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;"> <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<line-chart :chart-data="lineChartData"></line-chart> <line-chart :chart-data="lineChartData"/>
</el-row> </el-row>
<el-row :gutter="32"> <el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="8"> <el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper"> <div class="chart-wrapper">
<raddar-chart></raddar-chart> <raddar-chart/>
</div> </div>
</el-col> </el-col>
<el-col :xs="24" :sm="24" :lg="8"> <el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper"> <div class="chart-wrapper">
<pie-chart></pie-chart> <pie-chart/>
</div> </div>
</el-col> </el-col>
<el-col :xs="24" :sm="24" :lg="8"> <el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper"> <div class="chart-wrapper">
<bar-chart></bar-chart> <bar-chart/>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="8"> <el-row :gutter="8">
<el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;"> <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
<transaction-table></transaction-table> <transaction-table/>
</el-col> </el-col>
<el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;"> <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
<todo-list></todo-list> <todo-list/>
</el-col> </el-col>
<el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;"> <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
<box-card></box-card> <box-card/>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</template> </template>
<script> <script>
import GithubCorner from '@/components/GithubCorner' import GithubCorner from '@/components/GithubCorner'
import PanelGroup from './components/PanelGroup' import PanelGroup from './components/PanelGroup'
@ -74,7 +73,7 @@ const lineChartData = {
} }
export default { export default {
name: 'dashboard-admin', name: 'DashboardAdmin',
components: { components: {
GithubCorner, GithubCorner,
PanelGroup, PanelGroup,

12
src/views/dashboard/editor/index.vue
View File

@ -1,17 +1,17 @@
<template> <template>
<div class="dashboard-editor-container"> <div class="dashboard-editor-container">
<div class=" clearfix"> <div class=" clearfix">
<pan-thumb style="float: left" :image="avatar"> Your roles: <pan-thumb :image="avatar" style="float: left"> Your roles:
<span class="pan-info-roles" :key='item' v-for="item in roles">{{item}}</span> <span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>
</pan-thumb> </pan-thumb>
<github-corner style="position: absolute; top: 0px; border: 0; right: 0;"></github-corner> <github-corner style="position: absolute; top: 0px; border: 0; right: 0;"/>
<div class="info-container"> <div class="info-container">
<span class="display_name">{{name}}</span> <span class="display_name">{{ name }}</span>
<span style="font-size:20px;padding-top:20px;display:inline-block;">Editor's Dashboard</span> <span style="font-size:20px;padding-top:20px;display:inline-block;">Editor's Dashboard</span>
</div> </div>
</div> </div>
<div> <div>
<img class="emptyGif" :src="emptyGif"> <img :src="emptyGif" class="emptyGif">
</div> </div>
</div> </div>
</template> </template>
@ -22,7 +22,7 @@ import PanThumb from '@/components/PanThumb'
import GithubCorner from '@/components/GithubCorner' import GithubCorner from '@/components/GithubCorner'
export default { export default {
name: 'dashboard-editor', name: 'DashboardEditor',
components: { PanThumb, GithubCorner }, components: { PanThumb, GithubCorner },
data() { data() {
return { return {

4
src/views/dashboard/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="dashboard-container"> <div class="dashboard-container">
<component :is="currentRole"></component> <component :is="currentRole"/>
</div> </div>
</template> </template>
@ -10,7 +10,7 @@ import adminDashboard from './admin'
import editorDashboard from './editor' import editorDashboard from './editor'
export default { export default {
name: 'dashboard', name: 'Dashboard',
components: { adminDashboard, editorDashboard }, components: { adminDashboard, editorDashboard },
data() { data() {
return { return {

21
src/views/documentation/index.vue
View File

@ -1,25 +1,28 @@
<template> <template>
<div class="app-container documentation-container"> <div class="app-container documentation-container">
<a class="document-btn" target='_blank' href="https://panjiachen.github.io/vue-element-admin-site/">{{$t('documentation.documentation')}}</a> <a class="document-btn" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/">{{ $t('documentation.documentation') }}</a>
<a class="document-btn" target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">{{$t('documentation.github')}}</a> <a class="document-btn" target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">{{ $t('documentation.github') }}</a>
<dropdown-menu style="float:left;margin-left:50px;" title='系列文章' :items='articleList'></dropdown-menu> <a class="document-btn" target="_blank" href="https://panjiachen.gitee.io/vue-element-admin-site/zh/">国内文档</a>
<dropdown-menu :items="articleList" style="float:left;margin-left:50px;" title="系列文章"/>
</div> </div>
</template> </template>
<script> <script>
import DropdownMenu from '@/components/Share/dropdownMenu' import DropdownMenu from '@/components/Share/dropdownMenu'
export default { export default {
name: 'documentation', name: 'Documentation',
components: { DropdownMenu }, components: { DropdownMenu },
data() { data() {
return { return {
articleList: [ articleList: [
{ title: '基础篇', href: 'https://segmentfault.com/a/1190000009275424' }, { title: '基础篇', href: 'https://juejin.im/post/59097cd7a22b9d0065fb61d2' },
{ title: '登录权限篇', href: 'https://segmentfault.com/a/1190000009506097' }, { title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
{ title: '实战篇', href: 'https://segmentfault.com/a/1190000009762198' }, { title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
{ title: 'vueAdmin-template 篇', href: 'https://segmentfault.com/a/1190000010043013' }, { title: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
{ title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' }, { title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
{ title: '优雅的使用 icon', href: 'https://segmentfault.com/a/1190000012213278' } { title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
{ title: 'webpack4（上）', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
{ title: 'webpack4（下）', href: 'https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc' }
] ]
} }
} }

4
src/views/errorLog/errorTestA.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<div> <div>
<!--error code--> <!--error code-->
{{a.a}} {{ a.a }}
<!--error code--> <!--error code-->
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'errorTestA' name: 'ErrorTestA'
} }
</script> </script>

2
src/views/errorLog/errorTestB.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div></div> <div/>
</template> </template>
<script> <script>

14
src/views/errorLog/index.vue
View File

@ -1,17 +1,17 @@
<template> <template>
<div class="errPage-container"> <div class="errPage-container">
<errorA></errorA> <errorA/>
<errorB></errorB> <errorB/>
<!-- $t is vue-i18n global function to translate lang --> <!-- $t is vue-i18n global function to translate lang -->
<h3>{{$t('errorLog.tips')}}</h3> <h3>{{ $t('errorLog.tips') }}</h3>
<code> <code>
{{$t('errorLog.description')}} {{ $t('errorLog.description') }}
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/error.html"> <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/error.html">
{{$t('errorLog.documentation')}} {{ $t('errorLog.documentation') }}
</a> </a>
</code> </code>
<a href="#"> <a href="#">
<img src='https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif'> <img src="https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif">
</a> </a>
</div> </div>
</template> </template>
@ -21,7 +21,7 @@ import errorA from './errorTestA'
import errorB from './errorTestB' import errorB from './errorTestB'
export default { export default {
name: 'errorLog', name: 'ErrorLog',
components: { errorA, errorB } components: { errorA, errorB }
} }
</script> </script>

12
src/views/errorPage/401.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="errPage-container"> <div class="errPage-container">
<el-button @click="back" icon='arrow-left' class="pan-back-btn">返回</el-button> <el-button icon="arrow-left" class="pan-back-btn" @click="back">返回</el-button>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<h1 class="text-jumbo text-ginormous">Oops!</h1> <h1 class="text-jumbo text-ginormous">Oops!</h1>
gif来源<a href='https://zh.airbnb.com/' target='_blank'>airbnb</a> 页面 gif来源<a href="https://zh.airbnb.com/" target="_blank">airbnb</a> 页面
<h2>你没有权限去该页面</h2> <h2>你没有权限去该页面</h2>
<h6>如有不满请联系你领导</h6> <h6>如有不满请联系你领导</h6>
<ul class="list-unstyled"> <ul class="list-unstyled">
@ -13,15 +13,15 @@
<router-link to="/dashboard">回首页</router-link> <router-link to="/dashboard">回首页</router-link>
</li> </li>
<li class="link-type"><a href="https://www.taobao.com/">随便看看</a></li> <li class="link-type"><a href="https://www.taobao.com/">随便看看</a></li>
<li><a @click.prevent="dialogVisible=true" href="#">点我看图</a></li> <li><a href="#" @click.prevent="dialogVisible=true">点我看图</a></li>
</ul> </ul>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream."> <img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream.">
</el-col> </el-col>
</el-row> </el-row>
<el-dialog title="随便看" :visible.sync="dialogVisible"> <el-dialog :visible.sync="dialogVisible" title="随便看">
<img class="pan-img" :src="ewizardClap"> <img :src="ewizardClap" class="pan-img">
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
@ -30,7 +30,7 @@
import errGif from '@/assets/401_images/401.gif' import errGif from '@/assets/401_images/401.gif'
export default { export default {
name: 'page401', name: 'Page401',
data() { data() {
return { return {
errGif: errGif + '?' + +new Date(), errGif: errGif + '?' + +new Date(),

20
src/views/errorPage/404.vue
View File

@ -2,15 +2,15 @@
<div class="wscn-http404-container"> <div class="wscn-http404-container">
<div class="wscn-http404"> <div class="wscn-http404">
<div class="pic-404"> <div class="pic-404">
<img class="pic-404__parent" :src="img_404" alt="404"> <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
<img class="pic-404__child left" :src="img_404_cloud" alt="404"> <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
<img class="pic-404__child mid" :src="img_404_cloud" alt="404"> <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
<img class="pic-404__child right" :src="img_404_cloud" alt="404"> <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
</div> </div>
<div class="bullshit"> <div class="bullshit">
<div class="bullshit__oops">OOPS!</div> <div class="bullshit__oops">OOPS!</div>
<div class="bullshit__info">版权所有 <div class="bullshit__info">版权所有
<a class='link-type' href='https://wallstreetcn.com' target='_blank'>华尔街见闻</a> <a class="link-type" href="https://wallstreetcn.com" target="_blank">华尔街见闻</a>
</div> </div>
<div class="bullshit__headline">{{ message }}</div> <div class="bullshit__headline">{{ message }}</div>
<div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div> <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
@ -21,17 +21,9 @@
</template> </template>
<script> <script>
import img_404 from '@/assets/404_images/404.png'
import img_404_cloud from '@/assets/404_images/404_cloud.png'
export default { export default {
name: 'page404', name: 'Page404',
data() {
return {
img_404,
img_404_cloud
}
},
computed: { computed: {
message() { message() {
return '网管说这个页面你不能进......' return '网管说这个页面你不能进......'

37
src/views/example/components/ArticleDetail.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class="createPost-container"> <div class="createPost-container">
<el-form class="form-container" :model="postForm" :rules="rules" ref="postForm"> <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
<sticky :className="'sub-navbar '+postForm.status"> <sticky :class-name="'sub-navbar '+postForm.status">
<CommentDropdown v-model="postForm.comment_disabled" /> <CommentDropdown v-model="postForm.comment_disabled" />
<PlatformDropdown v-model="postForm.platforms" /> <PlatformDropdown v-model="postForm.platforms" />
<SourceUrlDropdown v-model="postForm.source_uri" /> <SourceUrlDropdown v-model="postForm.source_uri" />
@ -18,7 +18,7 @@
<el-col :span="24"> <el-col :span="24">
<el-form-item style="margin-bottom: 40px;" prop="title"> <el-form-item style="margin-bottom: 40px;" prop="title">
<MDinput name="name" v-model="postForm.title" required :maxlength="100"> <MDinput v-model="postForm.title" :maxlength="100" name="name" required>
标题 标题
</MDinput> </MDinput>
</el-form-item> </el-form-item>
@ -27,25 +27,27 @@
<el-row> <el-row>
<el-col :span="8"> <el-col :span="8">
<el-form-item label-width="45px" label="作者:" class="postInfo-container-item"> <el-form-item label-width="45px" label="作者:" class="postInfo-container-item">
<el-select v-model="postForm.author" filterable remote placeholder="搜索用户" :remote-method="getRemoteUserList"> <el-select v-model="postForm.author" :remote-method="getRemoteUserList" filterable remote placeholder="搜索用户">
<el-option v-for="(item,index) in userListOptions" :key="item+index" :label="item" :value="item"> <el-option v-for="(item,index) in userListOptions" :key="item+index" :label="item" :value="item"/>
</el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="10"> <el-col :span="10">
<el-form-item label-width="80px" label="发布时间:" class="postInfo-container-item"> <el-form-item label-width="80px" label="发布时间:" class="postInfo-container-item">
<el-date-picker v-model="postForm.display_time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"> <el-date-picker v-model="postForm.display_time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"/>
</el-date-picker>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-form-item label-width="60px" label="重要性:" class="postInfo-container-item"> <el-form-item label-width="60px" label="重要性:" class="postInfo-container-item">
<el-rate style="margin-top:8px;" v-model="postForm.importance" :max='3' :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :low-threshold="1" <el-rate
:high-threshold="3"> v-model="postForm.importance"
</el-rate> :max="3"
:colors="['#99A9BF', '#F7BA2A', '#FF9900']"
:low-threshold="1"
:high-threshold="3"
style="margin-top:8px;"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -54,13 +56,12 @@
</el-row> </el-row>
<el-form-item style="margin-bottom: 40px;" label-width="45px" label="摘要:"> <el-form-item style="margin-bottom: 40px;" label-width="45px" label="摘要:">
<el-input type="textarea" class="article-textarea" :rows="1" autosize placeholder="请输入内容" v-model="postForm.content_short"> <el-input :rows="1" v-model="postForm.content_short" type="textarea" class="article-textarea" autosize placeholder="请输入内容"/>
</el-input> <span v-show="contentShortLength" class="word-counter">{{ contentShortLength }}字</span>
<span class="word-counter" v-show="contentShortLength">{{contentShortLength}}字</span>
</el-form-item> </el-form-item>
<div class="editor-container"> <div class="editor-container">
<Tinymce :height=400 ref="editor" v-model="postForm.content" /> <Tinymce ref="editor" :height="400" v-model="postForm.content" />
</div> </div>
<div style="margin-bottom: 20px;"> <div style="margin-bottom: 20px;">
@ -100,7 +101,7 @@ const defaultForm = {
} }
export default { export default {
name: 'articleDetail', name: 'ArticleDetail',
components: { Tinymce, MDinput, Upload, Multiselect, Sticky, Warning, CommentDropdown, PlatformDropdown, SourceUrlDropdown }, components: { Tinymce, MDinput, Upload, Multiselect, Sticky, Warning, CommentDropdown, PlatformDropdown, SourceUrlDropdown },
props: { props: {
isEdit: { isEdit: {
@ -115,7 +116,7 @@ export default {
message: rule.field + '为必传项', message: rule.field + '为必传项',
type: 'error' type: 'error'
}) })
callback(null) callback(new Error(rule.field + '为必传项'))
} else { } else {
callback() callback()
} }
@ -129,7 +130,7 @@ export default {
message: '外链url填写不正确', message: '外链url填写不正确',
type: 'error' type: 'error'
}) })
callback(null) callback(new Error('外链url填写不正确'))
} }
} else { } else {
callback() callback()

17
src/views/example/components/Dropdown/Comment.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<el-dropdown trigger="click" :show-timeout="100"> <el-dropdown :show-timeout="100" trigger="click">
<el-button plain>{{!comment_disabled?'评论已打开':'评论已关闭'}} <el-button plain>{{ !comment_disabled?'评论已打开':'评论已关闭' }}
<i class="el-icon-caret-bottom el-icon--right"></i> <i class="el-icon-caret-bottom el-icon--right"/>
</el-button> </el-button>
<el-dropdown-menu class="no-padding" slot="dropdown"> <el-dropdown-menu slot="dropdown" class="no-padding">
<el-dropdown-item> <el-dropdown-item>
<el-radio-group style="padding: 10px;" v-model="comment_disabled"> <el-radio-group v-model="comment_disabled" style="padding: 10px;">
<el-radio :label="true">关闭评论</el-radio> <el-radio :label="true">关闭评论</el-radio>
<el-radio :label="false">打开评论</el-radio> <el-radio :label="false">打开评论</el-radio>
</el-radio-group> </el-radio-group>
@ -16,7 +16,12 @@
<script> <script>
export default { export default {
props: ['value'], props: {
value: {
type: Boolean,
default: false
}
},
computed: { computed: {
comment_disabled: { comment_disabled: {
get() { get() {

16
src/views/example/components/Dropdown/Platform.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<el-dropdown :hide-on-click="false" :show-timeout="100" trigger="click"> <el-dropdown :hide-on-click="false" :show-timeout="100" trigger="click">
<el-button plain> <el-button plain>
平台({{platforms.length}}) 平台({{ platforms.length }})
<i class="el-icon-caret-bottom el-icon--right"></i> <i class="el-icon-caret-bottom el-icon--right"/>
</el-button> </el-button>
<el-dropdown-menu class="no-border" slot="dropdown"> <el-dropdown-menu slot="dropdown" class="no-border">
<el-checkbox-group v-model="platforms" style="padding: 5px 15px;"> <el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
<el-checkbox v-for="item in platformsOptions" :label="item.key" :key="item.key"> <el-checkbox v-for="item in platformsOptions" :label="item.key" :key="item.key">
{{item.name}} {{ item.name }}
</el-checkbox> </el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</el-dropdown-menu> </el-dropdown-menu>
@ -16,7 +16,13 @@
<script> <script>
export default { export default {
props: ['value'], props: {
value: {
required: true,
default: () => [],
type: Array
}
},
data() { data() {
return { return {
platformsOptions: [ platformsOptions: [

13
src/views/example/components/Dropdown/SourceUrl.vue
View File

@ -2,11 +2,11 @@
<el-dropdown :show-timeout="100" trigger="click"> <el-dropdown :show-timeout="100" trigger="click">
<el-button plain> <el-button plain>
外链 外链
<i class="el-icon-caret-bottom el-icon--right"></i> <i class="el-icon-caret-bottom el-icon--right"/>
</el-button> </el-button>
<el-dropdown-menu class="no-padding no-border" style="width:400px" slot="dropdown"> <el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:400px">
<el-form-item label-width="0px" style="margin-bottom: 0px" prop="source_uri"> <el-form-item label-width="0px" style="margin-bottom: 0px" prop="source_uri">
<el-input placeholder="请输入内容" v-model="source_uri"> <el-input v-model="source_uri" placeholder="请输入内容">
<template slot="prepend">填写url</template> <template slot="prepend">填写url</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
@ -16,7 +16,12 @@
<script> <script>
export default { export default {
props: ['value'], props: {
value: {
type: String,
default: ''
}
},
computed: { computed: {
source_uri: { source_uri: {
get() { get() {

5
src/views/example/components/Warning.vue
View File

@ -1,8 +1,9 @@
<template> <template>
<p class="warn-content"> <p class="warn-content">
创建和编辑页面是不能被keep-alive 缓存的，因为keep-alive 的include 目前不支持根据路由来缓存，所以目前都是基于component name 来缓存的，如果你想要实现缓存的效果，可以使用localstorage 等游览器缓存方案。或者不要使用keep-alive 创建和编辑页面是不能被keep-alive 缓存的，因为keep-alive 的include 目前不支持根据路由来缓存，所以目前都是基于component name 来缓存的，如果你想要实现缓存的效果，可以使用localstorage 等浏览器缓存方案。或者不要使用keep-alive
的include，直接缓存所有页面。详情见 的include，直接缓存所有页面。详情见
<a href="https://panjiachen.github.io/vue-element-admin-site/guide/essentials/tags-view.html" <a
href="https://panjiachen.github.io/vue-element-admin-site/guide/essentials/tags-view.html"
target="_blank">文档</a> target="_blank">文档</a>
</p> </p>
</template> </template>

Some files were not shown because too many files have changed in this diff Show More