nineven
4 years ago
parent
cdf43a7f41
commit
c8f3126a85
@ -0,0 +1,14 @@ |
|||||||
|
# http://editorconfig.org |
||||||
|
root = true |
||||||
|
|
||||||
|
[*] |
||||||
|
charset = utf-8 |
||||||
|
indent_style = space |
||||||
|
indent_size = 2 |
||||||
|
end_of_line = lf |
||||||
|
insert_final_newline = true |
||||||
|
trim_trailing_whitespace = true |
||||||
|
|
||||||
|
[*.md] |
||||||
|
insert_final_newline = false |
||||||
|
trim_trailing_whitespace = false |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
# just a flag |
||||||
|
ENV = 'development' |
||||||
|
|
||||||
|
# base api |
||||||
|
VUE_APP_BASE_API = 'https://app.hehelucky.cn/api/v3/fir/server' |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
# just a flag |
||||||
|
ENV = 'production' |
||||||
|
|
||||||
|
# base api |
||||||
|
VUE_APP_BASE_API = '/prod-api' |
||||||
|
|
||||||
@ -0,0 +1,8 @@ |
|||||||
|
NODE_ENV = production |
||||||
|
|
||||||
|
# just a flag |
||||||
|
ENV = 'staging' |
||||||
|
|
||||||
|
# base api |
||||||
|
VUE_APP_BASE_API = '/stage-api' |
||||||
|
|
||||||
@ -0,0 +1,4 @@ |
|||||||
|
build/*.js |
||||||
|
src/assets |
||||||
|
public |
||||||
|
dist |
||||||
@ -0,0 +1,198 @@ |
|||||||
|
module.exports = { |
||||||
|
root: true, |
||||||
|
parserOptions: { |
||||||
|
parser: 'babel-eslint', |
||||||
|
sourceType: 'module' |
||||||
|
}, |
||||||
|
env: { |
||||||
|
browser: true, |
||||||
|
node: true, |
||||||
|
es6: true, |
||||||
|
}, |
||||||
|
extends: ['plugin:vue/recommended', 'eslint:recommended'], |
||||||
|
|
||||||
|
// add your custom rules here
|
||||||
|
//it is base on https://github.com/vuejs/eslint-config-vue
|
||||||
|
rules: { |
||||||
|
"vue/max-attributes-per-line": [2, { |
||||||
|
"singleline": 10, |
||||||
|
"multiline": { |
||||||
|
"max": 1, |
||||||
|
"allowFirstLine": false |
||||||
|
} |
||||||
|
}], |
||||||
|
"vue/singleline-html-element-content-newline": "off", |
||||||
|
"vue/multiline-html-element-content-newline":"off", |
||||||
|
"vue/name-property-casing": ["error", "PascalCase"], |
||||||
|
"vue/no-v-html": "off", |
||||||
|
'accessor-pairs': 2, |
||||||
|
'arrow-spacing': [2, { |
||||||
|
'before': true, |
||||||
|
'after': true |
||||||
|
}], |
||||||
|
'block-spacing': [2, 'always'], |
||||||
|
'brace-style': [2, '1tbs', { |
||||||
|
'allowSingleLine': true |
||||||
|
}], |
||||||
|
'camelcase': [0, { |
||||||
|
'properties': 'always' |
||||||
|
}], |
||||||
|
'comma-dangle': [2, 'never'], |
||||||
|
'comma-spacing': [2, { |
||||||
|
'before': false, |
||||||
|
'after': true |
||||||
|
}], |
||||||
|
'comma-style': [2, 'last'], |
||||||
|
'constructor-super': 2, |
||||||
|
'curly': [2, 'multi-line'], |
||||||
|
'dot-location': [2, 'property'], |
||||||
|
'eol-last': 2, |
||||||
|
'eqeqeq': ["error", "always", {"null": "ignore"}], |
||||||
|
'generator-star-spacing': [2, { |
||||||
|
'before': true, |
||||||
|
'after': true |
||||||
|
}], |
||||||
|
'handle-callback-err': [2, '^(err|error)$'], |
||||||
|
'indent': [2, 2, { |
||||||
|
'SwitchCase': 1 |
||||||
|
}], |
||||||
|
'jsx-quotes': [2, 'prefer-single'], |
||||||
|
'key-spacing': [2, { |
||||||
|
'beforeColon': false, |
||||||
|
'afterColon': true |
||||||
|
}], |
||||||
|
'keyword-spacing': [2, { |
||||||
|
'before': true, |
||||||
|
'after': true |
||||||
|
}], |
||||||
|
'new-cap': [2, { |
||||||
|
'newIsCap': true, |
||||||
|
'capIsNew': false |
||||||
|
}], |
||||||
|
'new-parens': 2, |
||||||
|
'no-array-constructor': 2, |
||||||
|
'no-caller': 2, |
||||||
|
'no-console': 'off', |
||||||
|
'no-class-assign': 2, |
||||||
|
'no-cond-assign': 2, |
||||||
|
'no-const-assign': 2, |
||||||
|
'no-control-regex': 0, |
||||||
|
'no-delete-var': 2, |
||||||
|
'no-dupe-args': 2, |
||||||
|
'no-dupe-class-members': 2, |
||||||
|
'no-dupe-keys': 2, |
||||||
|
'no-duplicate-case': 2, |
||||||
|
'no-empty-character-class': 2, |
||||||
|
'no-empty-pattern': 2, |
||||||
|
'no-eval': 2, |
||||||
|
'no-ex-assign': 2, |
||||||
|
'no-extend-native': 2, |
||||||
|
'no-extra-bind': 2, |
||||||
|
'no-extra-boolean-cast': 2, |
||||||
|
'no-extra-parens': [2, 'functions'], |
||||||
|
'no-fallthrough': 2, |
||||||
|
'no-floating-decimal': 2, |
||||||
|
'no-func-assign': 2, |
||||||
|
'no-implied-eval': 2, |
||||||
|
'no-inner-declarations': [2, 'functions'], |
||||||
|
'no-invalid-regexp': 2, |
||||||
|
'no-irregular-whitespace': 2, |
||||||
|
'no-iterator': 2, |
||||||
|
'no-label-var': 2, |
||||||
|
'no-labels': [2, { |
||||||
|
'allowLoop': false, |
||||||
|
'allowSwitch': false |
||||||
|
}], |
||||||
|
'no-lone-blocks': 2, |
||||||
|
'no-mixed-spaces-and-tabs': 2, |
||||||
|
'no-multi-spaces': 2, |
||||||
|
'no-multi-str': 2, |
||||||
|
'no-multiple-empty-lines': [2, { |
||||||
|
'max': 1 |
||||||
|
}], |
||||||
|
'no-native-reassign': 2, |
||||||
|
'no-negated-in-lhs': 2, |
||||||
|
'no-new-object': 2, |
||||||
|
'no-new-require': 2, |
||||||
|
'no-new-symbol': 2, |
||||||
|
'no-new-wrappers': 2, |
||||||
|
'no-obj-calls': 2, |
||||||
|
'no-octal': 2, |
||||||
|
'no-octal-escape': 2, |
||||||
|
'no-path-concat': 2, |
||||||
|
'no-proto': 2, |
||||||
|
'no-redeclare': 2, |
||||||
|
'no-regex-spaces': 2, |
||||||
|
'no-return-assign': [2, 'except-parens'], |
||||||
|
'no-self-assign': 2, |
||||||
|
'no-self-compare': 2, |
||||||
|
'no-sequences': 2, |
||||||
|
'no-shadow-restricted-names': 2, |
||||||
|
'no-spaced-func': 2, |
||||||
|
'no-sparse-arrays': 2, |
||||||
|
'no-this-before-super': 2, |
||||||
|
'no-throw-literal': 2, |
||||||
|
'no-trailing-spaces': 2, |
||||||
|
'no-undef': 2, |
||||||
|
'no-undef-init': 2, |
||||||
|
'no-unexpected-multiline': 2, |
||||||
|
'no-unmodified-loop-condition': 2, |
||||||
|
'no-unneeded-ternary': [2, { |
||||||
|
'defaultAssignment': false |
||||||
|
}], |
||||||
|
'no-unreachable': 2, |
||||||
|
'no-unsafe-finally': 2, |
||||||
|
'no-unused-vars': [2, { |
||||||
|
'vars': 'all', |
||||||
|
'args': 'none' |
||||||
|
}], |
||||||
|
'no-useless-call': 2, |
||||||
|
'no-useless-computed-key': 2, |
||||||
|
'no-useless-constructor': 2, |
||||||
|
'no-useless-escape': 0, |
||||||
|
'no-whitespace-before-property': 2, |
||||||
|
'no-with': 2, |
||||||
|
'one-var': [2, { |
||||||
|
'initialized': 'never' |
||||||
|
}], |
||||||
|
'operator-linebreak': [2, 'after', { |
||||||
|
'overrides': { |
||||||
|
'?': 'before', |
||||||
|
':': 'before' |
||||||
|
} |
||||||
|
}], |
||||||
|
'padded-blocks': [2, 'never'], |
||||||
|
'quotes': [2, 'single', { |
||||||
|
'avoidEscape': true, |
||||||
|
'allowTemplateLiterals': true |
||||||
|
}], |
||||||
|
'semi': [2, 'never'], |
||||||
|
'semi-spacing': [2, { |
||||||
|
'before': false, |
||||||
|
'after': true |
||||||
|
}], |
||||||
|
'space-before-blocks': [2, 'always'], |
||||||
|
'space-before-function-paren': [2, 'never'], |
||||||
|
'space-in-parens': [2, 'never'], |
||||||
|
'space-infix-ops': 2, |
||||||
|
'space-unary-ops': [2, { |
||||||
|
'words': true, |
||||||
|
'nonwords': false |
||||||
|
}], |
||||||
|
'spaced-comment': [2, 'always', { |
||||||
|
'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] |
||||||
|
}], |
||||||
|
'template-curly-spacing': [2, 'never'], |
||||||
|
'use-isnan': 2, |
||||||
|
'valid-typeof': 2, |
||||||
|
'wrap-iife': [2, 'any'], |
||||||
|
'yield-star-spacing': [2, 'both'], |
||||||
|
'yoda': [2, 'never'], |
||||||
|
'prefer-const': 2, |
||||||
|
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, |
||||||
|
'object-curly-spacing': [2, 'always', { |
||||||
|
objectsInObjects: false |
||||||
|
}], |
||||||
|
'array-bracket-spacing': [2, 'never'] |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
.DS_Store |
||||||
|
node_modules/ |
||||||
|
dist/ |
||||||
|
npm-debug.log* |
||||||
|
yarn-debug.log* |
||||||
|
yarn-error.log* |
||||||
|
package-lock.json |
||||||
|
tests/**/coverage/ |
||||||
|
|
||||||
|
# Editor directories and files |
||||||
|
.idea |
||||||
|
.vscode |
||||||
|
*.suo |
||||||
|
*.ntvs* |
||||||
|
*.njsproj |
||||||
|
*.sln |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
language: node_js |
||||||
|
node_js: 10 |
||||||
|
script: npm run test |
||||||
|
notifications: |
||||||
|
email: false |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
MIT License |
||||||
|
|
||||||
|
Copyright (c) 2017-present PanJiaChen |
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||||
|
of this software and associated documentation files (the "Software"), to deal |
||||||
|
in the Software without restriction, including without limitation the rights |
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||||
|
copies of the Software, and to permit persons to whom the Software is |
||||||
|
furnished to do so, subject to the following conditions: |
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all |
||||||
|
copies or substantial portions of the Software. |
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||||
|
SOFTWARE. |
||||||
@ -0,0 +1,102 @@ |
|||||||
|
# vue-admin-template |
||||||
|
|
||||||
|
> 这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。 |
||||||
|
|
||||||
|
[线上地址](http://panjiachen.github.io/vue-admin-template) |
||||||
|
|
||||||
|
[国内访问](https://panjiachen.gitee.io/vue-admin-template) |
||||||
|
|
||||||
|
目前版本为 `v4.0+` 基于 `vue-cli` 进行构建，若你想使用旧版本，可以切换分支到[tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0)，它不依赖 `vue-cli`。 |
||||||
|
|
||||||
|
## Extra |
||||||
|
|
||||||
|
如果你想要根据用户角色来动态生成侧边栏和 router，你可以使用该分支[permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control) |
||||||
|
|
||||||
|
## 相关项目 |
||||||
|
|
||||||
|
- [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin) |
||||||
|
|
||||||
|
- [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) |
||||||
|
|
||||||
|
- [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) |
||||||
|
|
||||||
|
- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312) |
||||||
|
|
||||||
|
写了一个系列的教程配套文章，如何从零构建后一个完整的后台项目: |
||||||
|
|
||||||
|
- [手摸手，带你用 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) |
||||||
|
|
||||||
|
## Build Setup |
||||||
|
|
||||||
|
```bash |
||||||
|
# 克隆项目 |
||||||
|
git clone https://github.com/PanJiaChen/vue-admin-template.git |
||||||
|
|
||||||
|
# 进入项目目录 |
||||||
|
cd vue-admin-template |
||||||
|
|
||||||
|
# 安装依赖 |
||||||
|
npm install |
||||||
|
|
||||||
|
# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 |
||||||
|
npm install --registry=https://registry.npm.taobao.org |
||||||
|
|
||||||
|
# 启动服务 |
||||||
|
npm run dev |
||||||
|
``` |
||||||
|
|
||||||
|
浏览器访问 [http://localhost:9528](http://localhost:9528) |
||||||
|
|
||||||
|
## 发布 |
||||||
|
|
||||||
|
```bash |
||||||
|
# 构建测试环境 |
||||||
|
npm run build:stage |
||||||
|
|
||||||
|
# 构建生产环境 |
||||||
|
npm run build:prod |
||||||
|
``` |
||||||
|
|
||||||
|
## 其它 |
||||||
|
|
||||||
|
```bash |
||||||
|
# 预览发布环境效果 |
||||||
|
npm run preview |
||||||
|
|
||||||
|
# 预览发布环境效果 + 静态资源分析 |
||||||
|
npm run preview -- --report |
||||||
|
|
||||||
|
# 代码格式检查 |
||||||
|
npm run lint |
||||||
|
|
||||||
|
# 代码格式检查并自动修复 |
||||||
|
npm run lint -- --fix |
||||||
|
``` |
||||||
|
|
||||||
|
更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/) |
||||||
|
|
||||||
|
## 购买贴纸 |
||||||
|
|
||||||
|
你也可以通过 购买[官方授权的贴纸](https://smallsticker.com/product/vue-element-admin) 的方式来支持 vue-element-admin - 每售出一张贴纸，我们将获得 2 元的捐赠。 |
||||||
|
|
||||||
|
## Demo |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
## Browsers support |
||||||
|
|
||||||
|
Modern browsers and Internet Explorer 10+. |
||||||
|
|
||||||
|
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | |
||||||
|
| --------- | --------- | --------- | --------- | |
||||||
|
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions |
||||||
|
|
||||||
|
## License |
||||||
|
|
||||||
|
[MIT](https://github.com/PanJiaChen/vue-admin-template/blob/master/LICENSE) license. |
||||||
|
|
||||||
|
Copyright (c) 2017-present PanJiaChen |
||||||
@ -0,0 +1,91 @@ |
|||||||
|
# vue-admin-template |
||||||
|
|
||||||
|
English | [简体中文](./README-zh.md) |
||||||
|
|
||||||
|
> A minimal vue admin template with Element UI & axios & iconfont & permission control & lint |
||||||
|
|
||||||
|
**Live demo:** http://panjiachen.github.io/vue-admin-template |
||||||
|
|
||||||
|
|
||||||
|
**The current version is `v4.0+` build on `vue-cli`. If you want to use the old version , you can switch branch to [tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0), it does not rely on `vue-cli`** |
||||||
|
|
||||||
|
## Build Setup |
||||||
|
|
||||||
|
|
||||||
|
```bash |
||||||
|
# clone the project |
||||||
|
git clone https://github.com/PanJiaChen/vue-admin-template.git |
||||||
|
|
||||||
|
# enter the project directory |
||||||
|
cd vue-admin-template |
||||||
|
|
||||||
|
# install dependency |
||||||
|
npm install |
||||||
|
|
||||||
|
# develop |
||||||
|
npm run dev |
||||||
|
``` |
||||||
|
|
||||||
|
This will automatically open http://localhost:9528 |
||||||
|
|
||||||
|
## Build |
||||||
|
|
||||||
|
```bash |
||||||
|
# build for test environment |
||||||
|
npm run build:stage |
||||||
|
|
||||||
|
# build for production environment |
||||||
|
npm run build:prod |
||||||
|
``` |
||||||
|
|
||||||
|
## Advanced |
||||||
|
|
||||||
|
```bash |
||||||
|
# preview the release environment effect |
||||||
|
npm run preview |
||||||
|
|
||||||
|
# preview the release environment effect + static resource analysis |
||||||
|
npm run preview -- --report |
||||||
|
|
||||||
|
# code format check |
||||||
|
npm run lint |
||||||
|
|
||||||
|
# code format check and auto fix |
||||||
|
npm run lint -- --fix |
||||||
|
``` |
||||||
|
|
||||||
|
Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) for more information |
||||||
|
|
||||||
|
## Demo |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
## Extra |
||||||
|
|
||||||
|
If you want router permission && generate menu by user roles , you can use this branch [permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control) |
||||||
|
|
||||||
|
For `typescript` version, you can use [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Credits: [@Armour](https://github.com/Armour)) |
||||||
|
|
||||||
|
## Related Project |
||||||
|
|
||||||
|
- [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin) |
||||||
|
|
||||||
|
- [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) |
||||||
|
|
||||||
|
- [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) |
||||||
|
|
||||||
|
- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312) |
||||||
|
|
||||||
|
## Browsers support |
||||||
|
|
||||||
|
Modern browsers and Internet Explorer 10+. |
||||||
|
|
||||||
|
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | |
||||||
|
| --------- | --------- | --------- | --------- | |
||||||
|
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions |
||||||
|
|
||||||
|
## License |
||||||
|
|
||||||
|
[MIT](https://github.com/PanJiaChen/vue-admin-template/blob/master/LICENSE) license. |
||||||
|
|
||||||
|
Copyright (c) 2017-present PanJiaChen |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
module.exports = { |
||||||
|
presets: [ |
||||||
|
// https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
|
||||||
|
'@vue/cli-plugin-babel/preset' |
||||||
|
], |
||||||
|
'env': { |
||||||
|
'development': { |
||||||
|
// babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
|
||||||
|
// This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
|
||||||
|
// https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html
|
||||||
|
'plugins': ['dynamic-import-node'] |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,35 @@ |
|||||||
|
const { run } = require('runjs') |
||||||
|
const chalk = require('chalk') |
||||||
|
const config = require('../vue.config.js') |
||||||
|
const rawArgv = process.argv.slice(2) |
||||||
|
const args = rawArgv.join(' ') |
||||||
|
|
||||||
|
if (process.env.npm_config_preview || rawArgv.includes('--preview')) { |
||||||
|
const report = rawArgv.includes('--report') |
||||||
|
|
||||||
|
run(`vue-cli-service build ${args}`) |
||||||
|
|
||||||
|
const port = 9526 |
||||||
|
const publicPath = config.publicPath |
||||||
|
|
||||||
|
var connect = require('connect') |
||||||
|
var serveStatic = require('serve-static') |
||||||
|
const app = connect() |
||||||
|
|
||||||
|
app.use( |
||||||
|
publicPath, |
||||||
|
serveStatic('./dist', { |
||||||
|
index: ['index.html', '/'] |
||||||
|
}) |
||||||
|
) |
||||||
|
|
||||||
|
app.listen(port, function () { |
||||||
|
console.log(chalk.green(`> Preview at http://localhost:${port}${publicPath}`)) |
||||||
|
if (report) { |
||||||
|
console.log(chalk.green(`> Report at http://localhost:${port}${publicPath}report.html`)) |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
|
} else { |
||||||
|
run(`vue-cli-service build ${args}`) |
||||||
|
} |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
module.exports = { |
||||||
|
moduleFileExtensions: ['js', 'jsx', 'json', 'vue'], |
||||||
|
transform: { |
||||||
|
'^.+\\.vue$': 'vue-jest', |
||||||
|
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': |
||||||
|
'jest-transform-stub', |
||||||
|
'^.+\\.jsx?$': 'babel-jest' |
||||||
|
}, |
||||||
|
moduleNameMapper: { |
||||||
|
'^@/(.*)$': '<rootDir>/src/$1' |
||||||
|
}, |
||||||
|
snapshotSerializers: ['jest-serializer-vue'], |
||||||
|
testMatch: [ |
||||||
|
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)' |
||||||
|
], |
||||||
|
collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}'], |
||||||
|
coverageDirectory: '<rootDir>/tests/unit/coverage', |
||||||
|
// 'collectCoverage': true,
|
||||||
|
'coverageReporters': [ |
||||||
|
'lcov', |
||||||
|
'text-summary' |
||||||
|
], |
||||||
|
testURL: 'http://localhost/' |
||||||
|
} |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
{ |
||||||
|
"compilerOptions": { |
||||||
|
"baseUrl": "./", |
||||||
|
"paths": { |
||||||
|
"@/*": ["src/*"] |
||||||
|
} |
||||||
|
}, |
||||||
|
"exclude": ["node_modules", "dist"] |
||||||
|
} |
||||||
@ -0,0 +1,57 @@ |
|||||||
|
const Mock = require('mockjs') |
||||||
|
const { param2Obj } = require('./utils') |
||||||
|
|
||||||
|
const user = require('./user') |
||||||
|
const table = require('./table') |
||||||
|
|
||||||
|
const mocks = [ |
||||||
|
...user, |
||||||
|
...table |
||||||
|
] |
||||||
|
|
||||||
|
// for front mock
|
||||||
|
// please use it cautiously, it will redefine XMLHttpRequest,
|
||||||
|
// which will cause many of your third-party libraries to be invalidated(like progress event).
|
||||||
|
function mockXHR() { |
||||||
|
// mock patch
|
||||||
|
// https://github.com/nuysoft/Mock/issues/300
|
||||||
|
Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send |
||||||
|
Mock.XHR.prototype.send = function() { |
||||||
|
if (this.custom.xhr) { |
||||||
|
this.custom.xhr.withCredentials = this.withCredentials || false |
||||||
|
|
||||||
|
if (this.responseType) { |
||||||
|
this.custom.xhr.responseType = this.responseType |
||||||
|
} |
||||||
|
} |
||||||
|
this.proxy_send(...arguments) |
||||||
|
} |
||||||
|
|
||||||
|
function XHR2ExpressReqWrap(respond) { |
||||||
|
return function(options) { |
||||||
|
let result = null |
||||||
|
if (respond instanceof Function) { |
||||||
|
const { body, type, url } = options |
||||||
|
// https://expressjs.com/en/4x/api.html#req
|
||||||
|
result = respond({ |
||||||
|
method: type, |
||||||
|
body: JSON.parse(body), |
||||||
|
query: param2Obj(url) |
||||||
|
}) |
||||||
|
} else { |
||||||
|
result = respond |
||||||
|
} |
||||||
|
return Mock.mock(result) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
for (const i of mocks) { |
||||||
|
Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response)) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
module.exports = { |
||||||
|
mocks, |
||||||
|
mockXHR |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,81 @@ |
|||||||
|
const chokidar = require('chokidar') |
||||||
|
const bodyParser = require('body-parser') |
||||||
|
const chalk = require('chalk') |
||||||
|
const path = require('path') |
||||||
|
const Mock = require('mockjs') |
||||||
|
|
||||||
|
const mockDir = path.join(process.cwd(), 'mock') |
||||||
|
|
||||||
|
function registerRoutes(app) { |
||||||
|
let mockLastIndex |
||||||
|
const { mocks } = require('./index.js') |
||||||
|
const mocksForServer = mocks.map(route => { |
||||||
|
return responseFake(route.url, route.type, route.response) |
||||||
|
}) |
||||||
|
for (const mock of mocksForServer) { |
||||||
|
app[mock.type](mock.url, mock.response) |
||||||
|
mockLastIndex = app._router.stack.length |
||||||
|
} |
||||||
|
const mockRoutesLength = Object.keys(mocksForServer).length |
||||||
|
return { |
||||||
|
mockRoutesLength: mockRoutesLength, |
||||||
|
mockStartIndex: mockLastIndex - mockRoutesLength |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function unregisterRoutes() { |
||||||
|
Object.keys(require.cache).forEach(i => { |
||||||
|
if (i.includes(mockDir)) { |
||||||
|
delete require.cache[require.resolve(i)] |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// for mock server
|
||||||
|
const responseFake = (url, type, respond) => { |
||||||
|
return { |
||||||
|
url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`), |
||||||
|
type: type || 'get', |
||||||
|
response(req, res) { |
||||||
|
console.log('request invoke:' + req.path) |
||||||
|
res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond)) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
module.exports = app => { |
||||||
|
// parse app.body
|
||||||
|
// https://expressjs.com/en/4x/api.html#req.body
|
||||||
|
app.use(bodyParser.json()) |
||||||
|
app.use(bodyParser.urlencoded({ |
||||||
|
extended: true |
||||||
|
})) |
||||||
|
|
||||||
|
const mockRoutes = registerRoutes(app) |
||||||
|
var mockRoutesLength = mockRoutes.mockRoutesLength |
||||||
|
var mockStartIndex = mockRoutes.mockStartIndex |
||||||
|
|
||||||
|
// watch files, hot reload mock server
|
||||||
|
chokidar.watch(mockDir, { |
||||||
|
ignored: /mock-server/, |
||||||
|
ignoreInitial: true |
||||||
|
}).on('all', (event, path) => { |
||||||
|
if (event === 'change' || event === 'add') { |
||||||
|
try { |
||||||
|
// remove mock routes stack
|
||||||
|
app._router.stack.splice(mockStartIndex, mockRoutesLength) |
||||||
|
|
||||||
|
// clear routes cache
|
||||||
|
unregisterRoutes() |
||||||
|
|
||||||
|
const mockRoutes = registerRoutes(app) |
||||||
|
mockRoutesLength = mockRoutes.mockRoutesLength |
||||||
|
mockStartIndex = mockRoutes.mockStartIndex |
||||||
|
|
||||||
|
console.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed ${path}`)) |
||||||
|
} catch (error) { |
||||||
|
console.log(chalk.redBright(error)) |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
const Mock = require('mockjs') |
||||||
|
|
||||||
|
const data = Mock.mock({ |
||||||
|
'items|30': [{ |
||||||
|
id: '@id', |
||||||
|
title: '@sentence(10, 20)', |
||||||
|
'status|1': ['published', 'draft', 'deleted'], |
||||||
|
author: 'name', |
||||||
|
display_time: '@datetime', |
||||||
|
pageviews: '@integer(300, 5000)' |
||||||
|
}] |
||||||
|
}) |
||||||
|
|
||||||
|
module.exports = [ |
||||||
|
{ |
||||||
|
url: '/vue-admin-template/table/list', |
||||||
|
type: 'get', |
||||||
|
response: config => { |
||||||
|
const items = data.items |
||||||
|
return { |
||||||
|
code: 20000, |
||||||
|
data: { |
||||||
|
total: items.length, |
||||||
|
items: items |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
@ -0,0 +1,84 @@ |
|||||||
|
|
||||||
|
const tokens = { |
||||||
|
admin: { |
||||||
|
token: 'admin-token' |
||||||
|
}, |
||||||
|
editor: { |
||||||
|
token: 'editor-token' |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const users = { |
||||||
|
'admin-token': { |
||||||
|
roles: ['admin'], |
||||||
|
introduction: 'I am a super administrator', |
||||||
|
avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', |
||||||
|
name: 'Super Admin' |
||||||
|
}, |
||||||
|
'editor-token': { |
||||||
|
roles: ['editor'], |
||||||
|
introduction: 'I am an editor', |
||||||
|
avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', |
||||||
|
name: 'Normal Editor' |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
module.exports = [ |
||||||
|
// user login
|
||||||
|
{ |
||||||
|
url: '/vue-admin-template/user/login', |
||||||
|
type: 'post', |
||||||
|
response: config => { |
||||||
|
const { username } = config.body |
||||||
|
const token = tokens[username] |
||||||
|
|
||||||
|
// mock error
|
||||||
|
if (!token) { |
||||||
|
return { |
||||||
|
code: 60204, |
||||||
|
message: 'Account and password are incorrect.' |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
code: 20000, |
||||||
|
data: token |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
// get user info
|
||||||
|
{ |
||||||
|
url: '/vue-admin-template/user/info\.*', |
||||||
|
type: 'get', |
||||||
|
response: config => { |
||||||
|
const { token } = config.query |
||||||
|
const info = users[token] |
||||||
|
|
||||||
|
// mock error
|
||||||
|
if (!info) { |
||||||
|
return { |
||||||
|
code: 50008, |
||||||
|
message: 'Login failed, unable to get user details.' |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
code: 20000, |
||||||
|
data: info |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
// user logout
|
||||||
|
{ |
||||||
|
url: '/vue-admin-template/user/logout', |
||||||
|
type: 'post', |
||||||
|
response: _ => { |
||||||
|
return { |
||||||
|
code: 20000, |
||||||
|
data: 'success' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
/** |
||||||
|
* @param {string} url |
||||||
|
* @returns {Object} |
||||||
|
*/ |
||||||
|
function param2Obj(url) { |
||||||
|
const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ') |
||||||
|
if (!search) { |
||||||
|
return {} |
||||||
|
} |
||||||
|
const obj = {} |
||||||
|
const searchArr = search.split('&') |
||||||
|
searchArr.forEach(v => { |
||||||
|
const index = v.indexOf('=') |
||||||
|
if (index !== -1) { |
||||||
|
const name = v.substring(0, index) |
||||||
|
const val = v.substring(index + 1, v.length) |
||||||
|
obj[name] = val |
||||||
|
} |
||||||
|
}) |
||||||
|
return obj |
||||||
|
} |
||||||
|
|
||||||
|
module.exports = { |
||||||
|
param2Obj |
||||||
|
} |
||||||
@ -0,0 +1,63 @@ |
|||||||
|
{ |
||||||
|
"name": "fir_admin", |
||||||
|
"version": "1.1.0", |
||||||
|
"description": "fir admin", |
||||||
|
"author": "nineven@qq.com", |
||||||
|
"scripts": { |
||||||
|
"dev": "vue-cli-service serve", |
||||||
|
"build:prod": "vue-cli-service build", |
||||||
|
"build:stage": "vue-cli-service build --mode staging", |
||||||
|
"preview": "node build/index.js --preview", |
||||||
|
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml", |
||||||
|
"lint": "eslint --ext .js,.vue src", |
||||||
|
"test:unit": "jest --clearCache && vue-cli-service test:unit", |
||||||
|
"test:ci": "npm run lint && npm run test:unit" |
||||||
|
}, |
||||||
|
"dependencies": { |
||||||
|
"axios": "0.18.1", |
||||||
|
"core-js": "3.6.5", |
||||||
|
"element-ui": "2.13.2", |
||||||
|
"js-cookie": "2.2.0", |
||||||
|
"normalize.css": "7.0.0", |
||||||
|
"nprogress": "0.2.0", |
||||||
|
"path-to-regexp": "2.4.0", |
||||||
|
"vue": "2.6.10", |
||||||
|
"vue-router": "3.0.6", |
||||||
|
"vuex": "3.1.0", |
||||||
|
"js-base64": "2.5.2" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"@vue/cli-plugin-babel": "4.4.4", |
||||||
|
"@vue/cli-plugin-eslint": "4.4.4", |
||||||
|
"@vue/cli-plugin-unit-jest": "4.4.4", |
||||||
|
"@vue/cli-service": "4.4.4", |
||||||
|
"@vue/test-utils": "1.0.0-beta.29", |
||||||
|
"autoprefixer": "9.5.1", |
||||||
|
"babel-eslint": "10.1.0", |
||||||
|
"babel-jest": "23.6.0", |
||||||
|
"babel-plugin-dynamic-import-node": "2.3.3", |
||||||
|
"chalk": "2.4.2", |
||||||
|
"connect": "3.6.6", |
||||||
|
"eslint": "6.7.2", |
||||||
|
"eslint-plugin-vue": "6.2.2", |
||||||
|
"html-webpack-plugin": "3.2.0", |
||||||
|
"mockjs": "1.0.1-beta3", |
||||||
|
"runjs": "4.3.2", |
||||||
|
"sass": "1.26.8", |
||||||
|
"sass-loader": "8.0.2", |
||||||
|
"script-ext-html-webpack-plugin": "2.1.3", |
||||||
|
"serve-static": "1.13.2", |
||||||
|
"svg-sprite-loader": "4.1.3", |
||||||
|
"svgo": "1.2.2", |
||||||
|
"vue-template-compiler": "2.6.10" |
||||||
|
}, |
||||||
|
"browserslist": [ |
||||||
|
"> 1%", |
||||||
|
"last 2 versions" |
||||||
|
], |
||||||
|
"engines": { |
||||||
|
"node": ">=8.9", |
||||||
|
"npm": ">= 3.0.0" |
||||||
|
}, |
||||||
|
"license": "MIT" |
||||||
|
} |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
// https://github.com/michael-ciniawsky/postcss-load-config
|
||||||
|
|
||||||
|
module.exports = { |
||||||
|
'plugins': { |
||||||
|
// to edit target browsers: use "browserslist" field in package.json
|
||||||
|
'autoprefixer': {} |
||||||
|
} |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 66 KiB |
@ -0,0 +1,17 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html> |
||||||
|
<head> |
||||||
|
<meta charset="utf-8"> |
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> |
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
||||||
|
<title><%= webpackConfig.name %></title> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<noscript> |
||||||
|
<strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||||
|
</noscript> |
||||||
|
<div id="app"></div> |
||||||
|
<!-- built files will be auto injected --> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
<template> |
||||||
|
<div id="app"> |
||||||
|
<router-view /> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'App' |
||||||
|
} |
||||||
|
</script> |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
import request from '@/utils/request' |
||||||
|
|
||||||
|
export function getToken() { |
||||||
|
return request({ |
||||||
|
url: '/qiniu/upload/token', // 假地址 自行替换
|
||||||
|
method: 'get' |
||||||
|
}) |
||||||
|
} |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
import request from '@/utils/request' |
||||||
|
|
||||||
|
export function getList(params) { |
||||||
|
return request({ |
||||||
|
url: '/vue-admin-template/table/list', |
||||||
|
method: 'get', |
||||||
|
params |
||||||
|
}) |
||||||
|
} |
||||||
@ -0,0 +1,32 @@ |
|||||||
|
import request from '@/utils/request' |
||||||
|
|
||||||
|
export function login(data) { |
||||||
|
return request({ |
||||||
|
url: '/login', |
||||||
|
method: 'post', |
||||||
|
data |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export function getInfo(token) { |
||||||
|
return request({ |
||||||
|
url: '/user/info', |
||||||
|
method: 'get', |
||||||
|
params: { token } |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export function logout() { |
||||||
|
return request({ |
||||||
|
url: '/user/logout', |
||||||
|
method: 'post' |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export function getUserInfos(query) { |
||||||
|
return request({ |
||||||
|
url: '/userinfo', |
||||||
|
method: 'get', |
||||||
|
params: query |
||||||
|
}) |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 96 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,78 @@ |
|||||||
|
<template> |
||||||
|
<el-breadcrumb class="app-breadcrumb" separator="/"> |
||||||
|
<transition-group name="breadcrumb"> |
||||||
|
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path"> |
||||||
|
<span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span> |
||||||
|
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> |
||||||
|
</el-breadcrumb-item> |
||||||
|
</transition-group> |
||||||
|
</el-breadcrumb> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import pathToRegexp from 'path-to-regexp' |
||||||
|
|
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
levelList: null |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
$route() { |
||||||
|
this.getBreadcrumb() |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.getBreadcrumb() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getBreadcrumb() { |
||||||
|
// only show routes with meta.title |
||||||
|
let matched = this.$route.matched.filter(item => item.meta && item.meta.title) |
||||||
|
const first = matched[0] |
||||||
|
|
||||||
|
if (!this.isDashboard(first)) { |
||||||
|
matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched) |
||||||
|
} |
||||||
|
|
||||||
|
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false) |
||||||
|
}, |
||||||
|
isDashboard(route) { |
||||||
|
const name = route && route.name |
||||||
|
if (!name) { |
||||||
|
return false |
||||||
|
} |
||||||
|
return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase() |
||||||
|
}, |
||||||
|
pathCompile(path) { |
||||||
|
// To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561 |
||||||
|
const { params } = this.$route |
||||||
|
var toPath = pathToRegexp.compile(path) |
||||||
|
return toPath(params) |
||||||
|
}, |
||||||
|
handleLink(item) { |
||||||
|
const { redirect, path } = item |
||||||
|
if (redirect) { |
||||||
|
this.$router.push(redirect) |
||||||
|
return |
||||||
|
} |
||||||
|
this.$router.push(this.pathCompile(path)) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.app-breadcrumb.el-breadcrumb { |
||||||
|
display: inline-block; |
||||||
|
font-size: 14px; |
||||||
|
line-height: 50px; |
||||||
|
margin-left: 8px; |
||||||
|
|
||||||
|
.no-redirect { |
||||||
|
color: #97a8be; |
||||||
|
cursor: text; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,44 @@ |
|||||||
|
<template> |
||||||
|
<div style="padding: 0 15px;" @click="toggleClick"> |
||||||
|
<svg |
||||||
|
:class="{'is-active':isActive}" |
||||||
|
class="hamburger" |
||||||
|
viewBox="0 0 1024 1024" |
||||||
|
xmlns="http://www.w3.org/2000/svg" |
||||||
|
width="64" |
||||||
|
height="64" |
||||||
|
> |
||||||
|
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" /> |
||||||
|
</svg> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'Hamburger', |
||||||
|
props: { |
||||||
|
isActive: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
toggleClick() { |
||||||
|
this.$emit('toggleClick') |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.hamburger { |
||||||
|
display: inline-block; |
||||||
|
vertical-align: middle; |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.hamburger.is-active { |
||||||
|
transform: rotate(180deg); |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,101 @@ |
|||||||
|
<template> |
||||||
|
<div :class="{'hidden':hidden}" class="pagination-container"> |
||||||
|
<el-pagination |
||||||
|
:background="background" |
||||||
|
:current-page.sync="currentPage" |
||||||
|
:page-size.sync="pageSize" |
||||||
|
:layout="layout" |
||||||
|
:page-sizes="pageSizes" |
||||||
|
:total="total" |
||||||
|
v-bind="$attrs" |
||||||
|
@size-change="handleSizeChange" |
||||||
|
@current-change="handleCurrentChange" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { scrollTo } from '@/utils/scroll-to' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'Pagination', |
||||||
|
props: { |
||||||
|
total: { |
||||||
|
required: true, |
||||||
|
type: Number |
||||||
|
}, |
||||||
|
page: { |
||||||
|
type: Number, |
||||||
|
default: 1 |
||||||
|
}, |
||||||
|
limit: { |
||||||
|
type: Number, |
||||||
|
default: 20 |
||||||
|
}, |
||||||
|
pageSizes: { |
||||||
|
type: Array, |
||||||
|
default() { |
||||||
|
return [10, 20, 30, 50] |
||||||
|
} |
||||||
|
}, |
||||||
|
layout: { |
||||||
|
type: String, |
||||||
|
default: 'total, sizes, prev, pager, next, jumper' |
||||||
|
}, |
||||||
|
background: { |
||||||
|
type: Boolean, |
||||||
|
default: true |
||||||
|
}, |
||||||
|
autoScroll: { |
||||||
|
type: Boolean, |
||||||
|
default: true |
||||||
|
}, |
||||||
|
hidden: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
currentPage: { |
||||||
|
get() { |
||||||
|
return this.page |
||||||
|
}, |
||||||
|
set(val) { |
||||||
|
this.$emit('update:page', val) |
||||||
|
} |
||||||
|
}, |
||||||
|
pageSize: { |
||||||
|
get() { |
||||||
|
return this.limit |
||||||
|
}, |
||||||
|
set(val) { |
||||||
|
this.$emit('update:limit', val) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
handleSizeChange(val) { |
||||||
|
this.$emit('pagination', { page: this.currentPage, limit: val }) |
||||||
|
if (this.autoScroll) { |
||||||
|
scrollTo(0, 800) |
||||||
|
} |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.$emit('pagination', { page: val, limit: this.pageSize }) |
||||||
|
if (this.autoScroll) { |
||||||
|
scrollTo(0, 800) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.pagination-container { |
||||||
|
background: #fff; |
||||||
|
padding: 32px 16px; |
||||||
|
} |
||||||
|
.pagination-container.hidden { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,91 @@ |
|||||||
|
<template> |
||||||
|
<div :style="{height:height+'px',zIndex:zIndex}"> |
||||||
|
<div |
||||||
|
:class="className" |
||||||
|
:style="{top:(isSticky ? stickyTop +'px' : ''),zIndex:zIndex,position:position,width:width,height:height+'px'}" |
||||||
|
> |
||||||
|
<slot> |
||||||
|
<div>sticky</div> |
||||||
|
</slot> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'Sticky', |
||||||
|
props: { |
||||||
|
stickyTop: { |
||||||
|
type: Number, |
||||||
|
default: 0 |
||||||
|
}, |
||||||
|
zIndex: { |
||||||
|
type: Number, |
||||||
|
default: 1 |
||||||
|
}, |
||||||
|
className: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
active: false, |
||||||
|
position: '', |
||||||
|
width: undefined, |
||||||
|
height: undefined, |
||||||
|
isSticky: false |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.height = this.$el.getBoundingClientRect().height |
||||||
|
window.addEventListener('scroll', this.handleScroll) |
||||||
|
window.addEventListener('resize', this.handleResize) |
||||||
|
}, |
||||||
|
activated() { |
||||||
|
this.handleScroll() |
||||||
|
}, |
||||||
|
destroyed() { |
||||||
|
window.removeEventListener('scroll', this.handleScroll) |
||||||
|
window.removeEventListener('resize', this.handleResize) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
sticky() { |
||||||
|
if (this.active) { |
||||||
|
return |
||||||
|
} |
||||||
|
this.position = 'fixed' |
||||||
|
this.active = true |
||||||
|
this.width = this.width + 'px' |
||||||
|
this.isSticky = true |
||||||
|
}, |
||||||
|
handleReset() { |
||||||
|
if (!this.active) { |
||||||
|
return |
||||||
|
} |
||||||
|
this.reset() |
||||||
|
}, |
||||||
|
reset() { |
||||||
|
this.position = '' |
||||||
|
this.width = 'auto' |
||||||
|
this.active = false |
||||||
|
this.isSticky = false |
||||||
|
}, |
||||||
|
handleScroll() { |
||||||
|
const width = this.$el.getBoundingClientRect().width |
||||||
|
this.width = width || 'auto' |
||||||
|
const offsetTop = this.$el.getBoundingClientRect().top |
||||||
|
if (offsetTop < this.stickyTop) { |
||||||
|
this.sticky() |
||||||
|
return |
||||||
|
} |
||||||
|
this.handleReset() |
||||||
|
}, |
||||||
|
handleResize() { |
||||||
|
if (this.isSticky) { |
||||||
|
this.width = this.$el.getBoundingClientRect().width + 'px' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
@ -0,0 +1,62 @@ |
|||||||
|
<template> |
||||||
|
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" /> |
||||||
|
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"> |
||||||
|
<use :xlink:href="iconName" /> |
||||||
|
</svg> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage |
||||||
|
import { isExternal } from '@/utils/validate' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'SvgIcon', |
||||||
|
props: { |
||||||
|
iconClass: { |
||||||
|
type: String, |
||||||
|
required: true |
||||||
|
}, |
||||||
|
className: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
isExternal() { |
||||||
|
return isExternal(this.iconClass) |
||||||
|
}, |
||||||
|
iconName() { |
||||||
|
return `#icon-${this.iconClass}` |
||||||
|
}, |
||||||
|
svgClass() { |
||||||
|
if (this.className) { |
||||||
|
return 'svg-icon ' + this.className |
||||||
|
} else { |
||||||
|
return 'svg-icon' |
||||||
|
} |
||||||
|
}, |
||||||
|
styleExternalIcon() { |
||||||
|
return { |
||||||
|
mask: `url(${this.iconClass}) no-repeat 50% 50%`, |
||||||
|
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%` |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.svg-icon { |
||||||
|
width: 1em; |
||||||
|
height: 1em; |
||||||
|
vertical-align: -0.15em; |
||||||
|
fill: currentColor; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.svg-external-icon { |
||||||
|
background-color: currentColor; |
||||||
|
mask-size: cover!important; |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,111 @@ |
|||||||
|
<template> |
||||||
|
<div class="upload-container"> |
||||||
|
<el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true"> |
||||||
|
upload |
||||||
|
</el-button> |
||||||
|
<el-dialog :visible.sync="dialogVisible"> |
||||||
|
<el-upload |
||||||
|
: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"> |
||||||
|
Click upload |
||||||
|
</el-button> |
||||||
|
</el-upload> |
||||||
|
<el-button @click="dialogVisible = false"> |
||||||
|
Cancel |
||||||
|
</el-button> |
||||||
|
<el-button type="primary" @click="handleSubmit"> |
||||||
|
Confirm |
||||||
|
</el-button> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
// import { getToken } from 'api/qiniu' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'EditorSlideUpload', |
||||||
|
props: { |
||||||
|
color: { |
||||||
|
type: String, |
||||||
|
default: '#1890ff' |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
dialogVisible: false, |
||||||
|
listObj: {}, |
||||||
|
fileList: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
checkAllSuccess() { |
||||||
|
return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess) |
||||||
|
}, |
||||||
|
handleSubmit() { |
||||||
|
const arr = Object.keys(this.listObj).map(v => this.listObj[v]) |
||||||
|
if (!this.checkAllSuccess()) { |
||||||
|
this.$message('Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!') |
||||||
|
return |
||||||
|
} |
||||||
|
this.$emit('successCBK', arr) |
||||||
|
this.listObj = {} |
||||||
|
this.fileList = [] |
||||||
|
this.dialogVisible = false |
||||||
|
}, |
||||||
|
handleSuccess(response, file) { |
||||||
|
const uid = file.uid |
||||||
|
const objKeyArr = Object.keys(this.listObj) |
||||||
|
for (let i = 0, len = objKeyArr.length; i < len; i++) { |
||||||
|
if (this.listObj[objKeyArr[i]].uid === uid) { |
||||||
|
this.listObj[objKeyArr[i]].url = response.files.file |
||||||
|
this.listObj[objKeyArr[i]].hasSuccess = true |
||||||
|
return |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
handleRemove(file) { |
||||||
|
const uid = file.uid |
||||||
|
const objKeyArr = Object.keys(this.listObj) |
||||||
|
for (let i = 0, len = objKeyArr.length; i < len; i++) { |
||||||
|
if (this.listObj[objKeyArr[i]].uid === uid) { |
||||||
|
delete this.listObj[objKeyArr[i]] |
||||||
|
return |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
beforeUpload(file) { |
||||||
|
const _self = this |
||||||
|
const _URL = window.URL || window.webkitURL |
||||||
|
const fileName = file.uid |
||||||
|
this.listObj[fileName] = {} |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
const img = new Image() |
||||||
|
img.src = _URL.createObjectURL(file) |
||||||
|
img.onload = function() { |
||||||
|
_self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height } |
||||||
|
} |
||||||
|
resolve(true) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.editor-slide-upload { |
||||||
|
margin-bottom: 20px; |
||||||
|
::v-deep .el-upload--picture-card { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,59 @@ |
|||||||
|
let callbacks = [] |
||||||
|
|
||||||
|
function loadedTinymce() { |
||||||
|
// to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2144
|
||||||
|
// check is successfully downloaded script
|
||||||
|
return window.tinymce |
||||||
|
} |
||||||
|
|
||||||
|
const dynamicLoadScript = (src, callback) => { |
||||||
|
const existingScript = document.getElementById(src) |
||||||
|
const cb = callback || function() {} |
||||||
|
|
||||||
|
if (!existingScript) { |
||||||
|
const script = document.createElement('script') |
||||||
|
script.src = src // src url for the third-party library being loaded.
|
||||||
|
script.id = src |
||||||
|
document.body.appendChild(script) |
||||||
|
callbacks.push(cb) |
||||||
|
const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd |
||||||
|
onEnd(script) |
||||||
|
} |
||||||
|
|
||||||
|
if (existingScript && cb) { |
||||||
|
if (loadedTinymce()) { |
||||||
|
cb(null, existingScript) |
||||||
|
} else { |
||||||
|
callbacks.push(cb) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function stdOnEnd(script) { |
||||||
|
script.onload = function() { |
||||||
|
// this.onload = null here is necessary
|
||||||
|
// because even IE9 works not like others
|
||||||
|
this.onerror = this.onload = null |
||||||
|
for (const cb of callbacks) { |
||||||
|
cb(null, script) |
||||||
|
} |
||||||
|
callbacks = null |
||||||
|
} |
||||||
|
script.onerror = function() { |
||||||
|
this.onerror = this.onload = null |
||||||
|
cb(new Error('Failed to load ' + src), script) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function ieOnEnd(script) { |
||||||
|
script.onreadystatechange = function() { |
||||||
|
if (this.readyState !== 'complete' && this.readyState !== 'loaded') return |
||||||
|
this.onreadystatechange = null |
||||||
|
for (const cb of callbacks) { |
||||||
|
cb(null, script) // there is no way to catch loading errors in IE8
|
||||||
|
} |
||||||
|
callbacks = null |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default dynamicLoadScript |
||||||
@ -0,0 +1,250 @@ |
|||||||
|
<template> |
||||||
|
<div :class="{fullscreen:fullscreen}" class="tinymce-container" :style="{width:containerWidth}"> |
||||||
|
<textarea :id="tinymceId" class="tinymce-textarea" /> |
||||||
|
<div class="editor-custom-btn-container"> |
||||||
|
<editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
/** |
||||||
|
* docs: |
||||||
|
* https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html#tinymce |
||||||
|
*/ |
||||||
|
import editorImage from './components/EditorImage' |
||||||
|
import plugins from './plugins' |
||||||
|
import toolbar from './toolbar' |
||||||
|
import load from './dynamicLoadScript' |
||||||
|
|
||||||
|
// why use this cdn, detail see https://github.com/PanJiaChen/tinymce-all-in-one |
||||||
|
const tinymceCDN = 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'Tinymce', |
||||||
|
components: { editorImage }, |
||||||
|
props: { |
||||||
|
id: { |
||||||
|
type: String, |
||||||
|
default: function() { |
||||||
|
return 'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '') |
||||||
|
} |
||||||
|
}, |
||||||
|
value: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
toolbar: { |
||||||
|
type: Array, |
||||||
|
required: false, |
||||||
|
default() { |
||||||
|
return [] |
||||||
|
} |
||||||
|
}, |
||||||
|
menubar: { |
||||||
|
type: String, |
||||||
|
default: 'file edit insert view format table' |
||||||
|
}, |
||||||
|
height: { |
||||||
|
type: [Number, String], |
||||||
|
required: false, |
||||||
|
default: 360 |
||||||
|
}, |
||||||
|
width: { |
||||||
|
type: [Number, String], |
||||||
|
required: false, |
||||||
|
default: 'auto' |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
hasChange: false, |
||||||
|
hasInit: false, |
||||||
|
tinymceId: this.id, |
||||||
|
fullscreen: false, |
||||||
|
languageTypeList: { |
||||||
|
'en': 'en', |
||||||
|
'zh': 'zh_CN', |
||||||
|
'es': 'es_MX', |
||||||
|
'ja': 'ja' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
containerWidth() { |
||||||
|
const width = this.width |
||||||
|
if (/^[\d]+(\.[\d]+)?$/.test(width)) { // matches `100`, `'100'` |
||||||
|
return `${width}px` |
||||||
|
} |
||||||
|
return width |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
value(val) { |
||||||
|
if (!this.hasChange && this.hasInit) { |
||||||
|
this.$nextTick(() => |
||||||
|
window.tinymce.get(this.tinymceId).setContent(val || '')) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.init() |
||||||
|
}, |
||||||
|
activated() { |
||||||
|
if (window.tinymce) { |
||||||
|
this.initTinymce() |
||||||
|
} |
||||||
|
}, |
||||||
|
deactivated() { |
||||||
|
this.destroyTinymce() |
||||||
|
}, |
||||||
|
destroyed() { |
||||||
|
this.destroyTinymce() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
init() { |
||||||
|
// dynamic load tinymce from cdn |
||||||
|
load(tinymceCDN, (err) => { |
||||||
|
if (err) { |
||||||
|
this.$message.error(err.message) |
||||||
|
return |
||||||
|
} |
||||||
|
this.initTinymce() |
||||||
|
}) |
||||||
|
}, |
||||||
|
initTinymce() { |
||||||
|
const _this = this |
||||||
|
window.tinymce.init({ |
||||||
|
selector: `#${this.tinymceId}`, |
||||||
|
language: this.languageTypeList['en'], |
||||||
|
height: this.height, |
||||||
|
body_class: 'panel-body ', |
||||||
|
object_resizing: false, |
||||||
|
toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar, |
||||||
|
menubar: this.menubar, |
||||||
|
plugins: plugins, |
||||||
|
end_container_on_empty_block: true, |
||||||
|
powerpaste_word_import: 'clean', |
||||||
|
code_dialog_height: 450, |
||||||
|
code_dialog_width: 1000, |
||||||
|
advlist_bullet_styles: 'square', |
||||||
|
advlist_number_styles: 'default', |
||||||
|
imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'], |
||||||
|
default_link_target: '_blank', |
||||||
|
link_title: false, |
||||||
|
nonbreaking_force_tab: true, // inserting nonbreaking space need Nonbreaking Space Plugin |
||||||
|
init_instance_callback: editor => { |
||||||
|
if (_this.value) { |
||||||
|
editor.setContent(_this.value) |
||||||
|
} |
||||||
|
_this.hasInit = true |
||||||
|
editor.on('NodeChange Change KeyUp SetContent', () => { |
||||||
|
this.hasChange = true |
||||||
|
this.$emit('input', editor.getContent()) |
||||||
|
}) |
||||||
|
}, |
||||||
|
setup(editor) { |
||||||
|
editor.on('FullscreenStateChanged', (e) => { |
||||||
|
_this.fullscreen = e.state |
||||||
|
}) |
||||||
|
}, |
||||||
|
// it will try to keep these URLs intact |
||||||
|
// https://www.tiny.cloud/docs-3x/reference/configuration/Configuration3x@convert_urls/ |
||||||
|
// https://stackoverflow.com/questions/5196205/disable-tinymce-absolute-to-relative-url-conversions |
||||||
|
convert_urls: false |
||||||
|
// 整合七牛上传 |
||||||
|
// images_dataimg_filter(img) { |
||||||
|
// setTimeout(() => { |
||||||
|
// const $image = $(img); |
||||||
|
// $image.removeAttr('width'); |
||||||
|
// $image.removeAttr('height'); |
||||||
|
// if ($image[0].height && $image[0].width) { |
||||||
|
// $image.attr('data-wscntype', 'image'); |
||||||
|
// $image.attr('data-wscnh', $image[0].height); |
||||||
|
// $image.attr('data-wscnw', $image[0].width); |
||||||
|
// $image.addClass('wscnph'); |
||||||
|
// } |
||||||
|
// }, 0); |
||||||
|
// return img |
||||||
|
// }, |
||||||
|
// images_upload_handler(blobInfo, success, failure, progress) { |
||||||
|
// progress(0); |
||||||
|
// const token = _this.$store.getters.token; |
||||||
|
// getToken(token).then(response => { |
||||||
|
// const url = response.data.qiniu_url; |
||||||
|
// const formData = new FormData(); |
||||||
|
// formData.append('token', response.data.qiniu_token); |
||||||
|
// formData.append('key', response.data.qiniu_key); |
||||||
|
// formData.append('file', blobInfo.blob(), url); |
||||||
|
// upload(formData).then(() => { |
||||||
|
// success(url); |
||||||
|
// progress(100); |
||||||
|
// }) |
||||||
|
// }).catch(err => { |
||||||
|
// failure('出现未知问题，刷新页面，或者联系程序员') |
||||||
|
// console.log(err); |
||||||
|
// }); |
||||||
|
// }, |
||||||
|
}) |
||||||
|
}, |
||||||
|
destroyTinymce() { |
||||||
|
const tinymce = window.tinymce.get(this.tinymceId) |
||||||
|
if (this.fullscreen) { |
||||||
|
tinymce.execCommand('mceFullScreen') |
||||||
|
} |
||||||
|
|
||||||
|
if (tinymce) { |
||||||
|
tinymce.destroy() |
||||||
|
} |
||||||
|
}, |
||||||
|
setContent(value) { |
||||||
|
window.tinymce.get(this.tinymceId).setContent(value) |
||||||
|
}, |
||||||
|
getContent() { |
||||||
|
window.tinymce.get(this.tinymceId).getContent() |
||||||
|
}, |
||||||
|
imageSuccessCBK(arr) { |
||||||
|
const _this = this |
||||||
|
arr.forEach(v => { |
||||||
|
window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.tinymce-container { |
||||||
|
position: relative; |
||||||
|
line-height: normal; |
||||||
|
} |
||||||
|
|
||||||
|
.tinymce-container { |
||||||
|
::v-deep { |
||||||
|
.mce-fullscreen { |
||||||
|
z-index: 10000; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tinymce-textarea { |
||||||
|
visibility: hidden; |
||||||
|
z-index: -1; |
||||||
|
} |
||||||
|
|
||||||
|
.editor-custom-btn-container { |
||||||
|
position: absolute; |
||||||
|
right: 4px; |
||||||
|
top: 4px; |
||||||
|
/*z-index: 2005;*/ |
||||||
|
} |
||||||
|
|
||||||
|
.fullscreen .editor-custom-btn-container { |
||||||
|
z-index: 10000; |
||||||
|
position: fixed; |
||||||
|
} |
||||||
|
|
||||||
|
.editor-upload-btn { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
// Any plugins you want to use has to be imported
|
||||||
|
// Detail plugins list see https://www.tinymce.com/docs/plugins/
|
||||||
|
// Custom builds see https://www.tinymce.com/download/custom-builds/
|
||||||
|
|
||||||
|
const plugins = ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'] |
||||||
|
|
||||||
|
export default plugins |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
// Here is a list of the toolbar
|
||||||
|
// Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
|
||||||
|
|
||||||
|
const toolbar = ['searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'] |
||||||
|
|
||||||
|
export default toolbar |
||||||
@ -0,0 +1,134 @@ |
|||||||
|
<template> |
||||||
|
<div class="upload-container"> |
||||||
|
<el-upload |
||||||
|
:data="dataObj" |
||||||
|
: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> |
||||||
|
</el-upload> |
||||||
|
<div class="image-preview"> |
||||||
|
<div v-show="imageUrl.length>1" class="image-preview-wrapper"> |
||||||
|
<img :src="imageUrl+'?imageView2/1/w/200/h/200'"> |
||||||
|
<div class="image-preview-action"> |
||||||
|
<i class="el-icon-delete" @click="rmImage" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { getToken } from '@/api/qiniu' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'SingleImageUpload', |
||||||
|
props: { |
||||||
|
value: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
tempUrl: '', |
||||||
|
dataObj: { token: '', key: '' } |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
imageUrl() { |
||||||
|
return this.value |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
rmImage() { |
||||||
|
this.emitInput('') |
||||||
|
}, |
||||||
|
emitInput(val) { |
||||||
|
this.$emit('input', val) |
||||||
|
}, |
||||||
|
handleImageSuccess() { |
||||||
|
this.emitInput(this.tempUrl) |
||||||
|
}, |
||||||
|
beforeUpload() { |
||||||
|
const _self = this |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
getToken().then(response => { |
||||||
|
const key = response.data.qiniu_key |
||||||
|
const token = response.data.qiniu_token |
||||||
|
_self._data.dataObj.token = token |
||||||
|
_self._data.dataObj.key = key |
||||||
|
this.tempUrl = response.data.qiniu_url |
||||||
|
resolve(true) |
||||||
|
}).catch(err => { |
||||||
|
console.log(err) |
||||||
|
reject(false) |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
@import "~@/styles/mixin.scss"; |
||||||
|
.upload-container { |
||||||
|
width: 100%; |
||||||
|
position: relative; |
||||||
|
@include clearfix; |
||||||
|
.image-uploader { |
||||||
|
width: 60%; |
||||||
|
float: left; |
||||||
|
} |
||||||
|
.image-preview { |
||||||
|
width: 200px; |
||||||
|
height: 200px; |
||||||
|
position: relative; |
||||||
|
border: 1px dashed #d9d9d9; |
||||||
|
float: left; |
||||||
|
margin-left: 50px; |
||||||
|
.image-preview-wrapper { |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
.image-preview-action { |
||||||
|
position: absolute; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
cursor: default; |
||||||
|
text-align: center; |
||||||
|
color: #fff; |
||||||
|
opacity: 0; |
||||||
|
font-size: 20px; |
||||||
|
background-color: rgba(0, 0, 0, .5); |
||||||
|
transition: opacity .3s; |
||||||
|
cursor: pointer; |
||||||
|
text-align: center; |
||||||
|
line-height: 200px; |
||||||
|
.el-icon-delete { |
||||||
|
font-size: 36px; |
||||||
|
} |
||||||
|
} |
||||||
|
&:hover { |
||||||
|
.image-preview-action { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,130 @@ |
|||||||
|
<template> |
||||||
|
<div class="singleImageUpload2 upload-container"> |
||||||
|
<el-upload |
||||||
|
:data="dataObj" |
||||||
|
: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> |
||||||
|
</el-upload> |
||||||
|
<div v-show="imageUrl.length>0" class="image-preview"> |
||||||
|
<div v-show="imageUrl.length>1" class="image-preview-wrapper"> |
||||||
|
<img :src="imageUrl"> |
||||||
|
<div class="image-preview-action"> |
||||||
|
<i class="el-icon-delete" @click="rmImage" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { getToken } from '@/api/qiniu' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'SingleImageUpload2', |
||||||
|
props: { |
||||||
|
value: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
tempUrl: '', |
||||||
|
dataObj: { token: '', key: '' } |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
imageUrl() { |
||||||
|
return this.value |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
rmImage() { |
||||||
|
this.emitInput('') |
||||||
|
}, |
||||||
|
emitInput(val) { |
||||||
|
this.$emit('input', val) |
||||||
|
}, |
||||||
|
handleImageSuccess() { |
||||||
|
this.emitInput(this.tempUrl) |
||||||
|
}, |
||||||
|
beforeUpload() { |
||||||
|
const _self = this |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
getToken().then(response => { |
||||||
|
const key = response.data.qiniu_key |
||||||
|
const token = response.data.qiniu_token |
||||||
|
_self._data.dataObj.token = token |
||||||
|
_self._data.dataObj.key = key |
||||||
|
this.tempUrl = response.data.qiniu_url |
||||||
|
resolve(true) |
||||||
|
}).catch(() => { |
||||||
|
reject(false) |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.upload-container { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
position: relative; |
||||||
|
.image-uploader { |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.image-preview { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
position: absolute; |
||||||
|
left: 0px; |
||||||
|
top: 0px; |
||||||
|
border: 1px dashed #d9d9d9; |
||||||
|
.image-preview-wrapper { |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
.image-preview-action { |
||||||
|
position: absolute; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
cursor: default; |
||||||
|
text-align: center; |
||||||
|
color: #fff; |
||||||
|
opacity: 0; |
||||||
|
font-size: 20px; |
||||||
|
background-color: rgba(0, 0, 0, .5); |
||||||
|
transition: opacity .3s; |
||||||
|
cursor: pointer; |
||||||
|
text-align: center; |
||||||
|
line-height: 200px; |
||||||
|
.el-icon-delete { |
||||||
|
font-size: 36px; |
||||||
|
} |
||||||
|
} |
||||||
|
&:hover { |
||||||
|
.image-preview-action { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,157 @@ |
|||||||
|
<template> |
||||||
|
<div class="upload-container"> |
||||||
|
<el-upload |
||||||
|
:data="dataObj" |
||||||
|
: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> |
||||||
|
</el-upload> |
||||||
|
<div class="image-preview image-app-preview"> |
||||||
|
<div v-show="imageUrl.length>1" class="image-preview-wrapper"> |
||||||
|
<img :src="imageUrl"> |
||||||
|
<div class="image-preview-action"> |
||||||
|
<i class="el-icon-delete" @click="rmImage" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="image-preview"> |
||||||
|
<div v-show="imageUrl.length>1" class="image-preview-wrapper"> |
||||||
|
<img :src="imageUrl"> |
||||||
|
<div class="image-preview-action"> |
||||||
|
<i class="el-icon-delete" @click="rmImage" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { getToken } from '@/api/qiniu' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'SingleImageUpload3', |
||||||
|
props: { |
||||||
|
value: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
tempUrl: '', |
||||||
|
dataObj: { token: '', key: '' } |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
imageUrl() { |
||||||
|
return this.value |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
rmImage() { |
||||||
|
this.emitInput('') |
||||||
|
}, |
||||||
|
emitInput(val) { |
||||||
|
this.$emit('input', val) |
||||||
|
}, |
||||||
|
handleImageSuccess(file) { |
||||||
|
this.emitInput(file.files.file) |
||||||
|
}, |
||||||
|
beforeUpload() { |
||||||
|
const _self = this |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
getToken().then(response => { |
||||||
|
const key = response.data.qiniu_key |
||||||
|
const token = response.data.qiniu_token |
||||||
|
_self._data.dataObj.token = token |
||||||
|
_self._data.dataObj.key = key |
||||||
|
this.tempUrl = response.data.qiniu_url |
||||||
|
resolve(true) |
||||||
|
}).catch(err => { |
||||||
|
console.log(err) |
||||||
|
reject(false) |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
@import "~@/styles/mixin.scss"; |
||||||
|
.upload-container { |
||||||
|
width: 100%; |
||||||
|
position: relative; |
||||||
|
@include clearfix; |
||||||
|
.image-uploader { |
||||||
|
width: 35%; |
||||||
|
float: left; |
||||||
|
} |
||||||
|
.image-preview { |
||||||
|
width: 200px; |
||||||
|
height: 200px; |
||||||
|
position: relative; |
||||||
|
border: 1px dashed #d9d9d9; |
||||||
|
float: left; |
||||||
|
margin-left: 50px; |
||||||
|
.image-preview-wrapper { |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
.image-preview-action { |
||||||
|
position: absolute; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
cursor: default; |
||||||
|
text-align: center; |
||||||
|
color: #fff; |
||||||
|
opacity: 0; |
||||||
|
font-size: 20px; |
||||||
|
background-color: rgba(0, 0, 0, .5); |
||||||
|
transition: opacity .3s; |
||||||
|
cursor: pointer; |
||||||
|
text-align: center; |
||||||
|
line-height: 200px; |
||||||
|
.el-icon-delete { |
||||||
|
font-size: 36px; |
||||||
|
} |
||||||
|
} |
||||||
|
&:hover { |
||||||
|
.image-preview-action { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.image-app-preview { |
||||||
|
width: 320px; |
||||||
|
height: 180px; |
||||||
|
position: relative; |
||||||
|
border: 1px dashed #d9d9d9; |
||||||
|
float: left; |
||||||
|
margin-left: 50px; |
||||||
|
.app-fake-conver { |
||||||
|
height: 44px; |
||||||
|
position: absolute; |
||||||
|
width: 100%; // background: rgba(0, 0, 0, .1); |
||||||
|
text-align: center; |
||||||
|
line-height: 64px; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,49 @@ |
|||||||
|
// Inspired by https://github.com/Inndy/vue-clipboard2
|
||||||
|
const Clipboard = require('clipboard') |
||||||
|
if (!Clipboard) { |
||||||
|
throw new Error('you should npm install `clipboard` --save at first ') |
||||||
|
} |
||||||
|
|
||||||
|
export default { |
||||||
|
bind(el, binding) { |
||||||
|
if (binding.arg === 'success') { |
||||||
|
el._v_clipboard_success = binding.value |
||||||
|
} else if (binding.arg === 'error') { |
||||||
|
el._v_clipboard_error = binding.value |
||||||
|
} else { |
||||||
|
const clipboard = new Clipboard(el, { |
||||||
|
text() { return binding.value }, |
||||||
|
action() { return binding.arg === 'cut' ? 'cut' : 'copy' } |
||||||
|
}) |
||||||
|
clipboard.on('success', e => { |
||||||
|
const callback = el._v_clipboard_success |
||||||
|
callback && callback(e) // eslint-disable-line
|
||||||
|
}) |
||||||
|
clipboard.on('error', e => { |
||||||
|
const callback = el._v_clipboard_error |
||||||
|
callback && callback(e) // eslint-disable-line
|
||||||
|
}) |
||||||
|
el._v_clipboard = clipboard |
||||||
|
} |
||||||
|
}, |
||||||
|
update(el, binding) { |
||||||
|
if (binding.arg === 'success') { |
||||||
|
el._v_clipboard_success = binding.value |
||||||
|
} else if (binding.arg === 'error') { |
||||||
|
el._v_clipboard_error = binding.value |
||||||
|
} else { |
||||||
|
el._v_clipboard.text = function() { return binding.value } |
||||||
|
el._v_clipboard.action = function() { return binding.arg === 'cut' ? 'cut' : 'copy' } |
||||||
|
} |
||||||
|
}, |
||||||
|
unbind(el, binding) { |
||||||
|
if (binding.arg === 'success') { |
||||||
|
delete el._v_clipboard_success |
||||||
|
} else if (binding.arg === 'error') { |
||||||
|
delete el._v_clipboard_error |
||||||
|
} else { |
||||||
|
el._v_clipboard.destroy() |
||||||
|
delete el._v_clipboard |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
import Clipboard from './clipboard' |
||||||
|
|
||||||
|
const install = function(Vue) { |
||||||
|
Vue.directive('Clipboard', Clipboard) |
||||||
|
} |
||||||
|
|
||||||
|
if (window.Vue) { |
||||||
|
window.clipboard = Clipboard |
||||||
|
Vue.use(install); // eslint-disable-line
|
||||||
|
} |
||||||
|
|
||||||
|
Clipboard.install = install |
||||||
|
export default Clipboard |
||||||
@ -0,0 +1,77 @@ |
|||||||
|
export default { |
||||||
|
bind(el, binding, vnode) { |
||||||
|
const dialogHeaderEl = el.querySelector('.el-dialog__header') |
||||||
|
const dragDom = el.querySelector('.el-dialog') |
||||||
|
dialogHeaderEl.style.cssText += ';cursor:move;' |
||||||
|
dragDom.style.cssText += ';top:0px;' |
||||||
|
|
||||||
|
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
|
||||||
|
const getStyle = (function() { |
||||||
|
if (window.document.currentStyle) { |
||||||
|
return (dom, attr) => dom.currentStyle[attr] |
||||||
|
} else { |
||||||
|
return (dom, attr) => getComputedStyle(dom, false)[attr] |
||||||
|
} |
||||||
|
})() |
||||||
|
|
||||||
|
dialogHeaderEl.onmousedown = (e) => { |
||||||
|
// 鼠标按下，计算当前元素距离可视区的距离
|
||||||
|
const disX = e.clientX - dialogHeaderEl.offsetLeft |
||||||
|
const disY = e.clientY - dialogHeaderEl.offsetTop |
||||||
|
|
||||||
|
const dragDomWidth = dragDom.offsetWidth |
||||||
|
const dragDomHeight = dragDom.offsetHeight |
||||||
|
|
||||||
|
const screenWidth = document.body.clientWidth |
||||||
|
const screenHeight = document.body.clientHeight |
||||||
|
|
||||||
|
const minDragDomLeft = dragDom.offsetLeft |
||||||
|
const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth |
||||||
|
|
||||||
|
const minDragDomTop = dragDom.offsetTop |
||||||
|
const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight |
||||||
|
|
||||||
|
// 获取到的值带px 正则匹配替换
|
||||||
|
let styL = getStyle(dragDom, 'left') |
||||||
|
let styT = getStyle(dragDom, 'top') |
||||||
|
|
||||||
|
if (styL.includes('%')) { |
||||||
|
styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100) |
||||||
|
styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100) |
||||||
|
} else { |
||||||
|
styL = +styL.replace(/\px/g, '') |
||||||
|
styT = +styT.replace(/\px/g, '') |
||||||
|
} |
||||||
|
|
||||||
|
document.onmousemove = function(e) { |
||||||
|
// 通过事件委托，计算移动的距离
|
||||||
|
let left = e.clientX - disX |
||||||
|
let top = e.clientY - disY |
||||||
|
|
||||||
|
// 边界处理
|
||||||
|
if (-(left) > minDragDomLeft) { |
||||||
|
left = -minDragDomLeft |
||||||
|
} else if (left > maxDragDomLeft) { |
||||||
|
left = maxDragDomLeft |
||||||
|
} |
||||||
|
|
||||||
|
if (-(top) > minDragDomTop) { |
||||||
|
top = -minDragDomTop |
||||||
|
} else if (top > maxDragDomTop) { |
||||||
|
top = maxDragDomTop |
||||||
|
} |
||||||
|
|
||||||
|
// 移动当前元素
|
||||||
|
dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;` |
||||||
|
|
||||||
|
// emit onDrag event
|
||||||
|
vnode.child.$emit('dragDialog') |
||||||
|
} |
||||||
|
|
||||||
|
document.onmouseup = function(e) { |
||||||
|
document.onmousemove = null |
||||||
|
document.onmouseup = null |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
import drag from './drag' |
||||||
|
|
||||||
|
const install = function(Vue) { |
||||||
|
Vue.directive('el-drag-dialog', drag) |
||||||
|
} |
||||||
|
|
||||||
|
if (window.Vue) { |
||||||
|
window['el-drag-dialog'] = drag |
||||||
|
Vue.use(install); // eslint-disable-line
|
||||||
|
} |
||||||
|
|
||||||
|
drag.install = install |
||||||
|
export default drag |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event' |
||||||
|
|
||||||
|
/** |
||||||
|
* How to use |
||||||
|
* <el-table height="100px" v-el-height-adaptive-table="{bottomOffset: 30}">...</el-table> |
||||||
|
* el-table height is must be set |
||||||
|
* bottomOffset: 30(default) // The height of the table from the bottom of the page.
|
||||||
|
*/ |
||||||
|
|
||||||
|
const doResize = (el, binding, vnode) => { |
||||||
|
const { componentInstance: $table } = vnode |
||||||
|
|
||||||
|
const { value } = binding |
||||||
|
|
||||||
|
if (!$table.height) { |
||||||
|
throw new Error(`el-$table must set the height. Such as height='100px'`) |
||||||
|
} |
||||||
|
const bottomOffset = (value && value.bottomOffset) || 30 |
||||||
|
|
||||||
|
if (!$table) return |
||||||
|
|
||||||
|
const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset |
||||||
|
$table.layout.setHeight(height) |
||||||
|
$table.doLayout() |
||||||
|
} |
||||||
|
|
||||||
|
export default { |
||||||
|
bind(el, binding, vnode) { |
||||||
|
el.resizeListener = () => { |
||||||
|
doResize(el, binding, vnode) |
||||||
|
} |
||||||
|
// parameter 1 is must be "Element" type
|
||||||
|
addResizeListener(window.document.body, el.resizeListener) |
||||||
|
}, |
||||||
|
inserted(el, binding, vnode) { |
||||||
|
doResize(el, binding, vnode) |
||||||
|
}, |
||||||
|
unbind(el) { |
||||||
|
removeResizeListener(window.document.body, el.resizeListener) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
import adaptive from './adaptive' |
||||||
|
|
||||||
|
const install = function(Vue) { |
||||||
|
Vue.directive('el-height-adaptive-table', adaptive) |
||||||
|
} |
||||||
|
|
||||||
|
if (window.Vue) { |
||||||
|
window['el-height-adaptive-table'] = adaptive |
||||||
|
Vue.use(install); // eslint-disable-line
|
||||||
|
} |
||||||
|
|
||||||
|
adaptive.install = install |
||||||
|
export default adaptive |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
import permission from './permission' |
||||||
|
|
||||||
|
const install = function(Vue) { |
||||||
|
Vue.directive('permission', permission) |
||||||
|
} |
||||||
|
|
||||||
|
if (window.Vue) { |
||||||
|
window['permission'] = permission |
||||||
|
Vue.use(install); // eslint-disable-line
|
||||||
|
} |
||||||
|
|
||||||
|
permission.install = install |
||||||
|
export default permission |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
import store from '@/store' |
||||||
|
|
||||||
|
function checkPermission(el, binding) { |
||||||
|
const { value } = binding |
||||||
|
const roles = store.getters && store.getters.roles |
||||||
|
|
||||||
|
if (value && value instanceof Array) { |
||||||
|
if (value.length > 0) { |
||||||
|
const permissionRoles = value |
||||||
|
|
||||||
|
const hasPermission = roles.some(role => { |
||||||
|
return permissionRoles.includes(role) |
||||||
|
}) |
||||||
|
|
||||||
|
if (!hasPermission) { |
||||||
|
el.parentNode && el.parentNode.removeChild(el) |
||||||
|
} |
||||||
|
} |
||||||
|
} else { |
||||||
|
throw new Error(`need roles! Like v-permission="['admin','editor']"`) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default { |
||||||
|
inserted(el, binding) { |
||||||
|
checkPermission(el, binding) |
||||||
|
}, |
||||||
|
update(el, binding) { |
||||||
|
checkPermission(el, binding) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,91 @@ |
|||||||
|
const vueSticky = {} |
||||||
|
let listenAction |
||||||
|
vueSticky.install = Vue => { |
||||||
|
Vue.directive('sticky', { |
||||||
|
inserted(el, binding) { |
||||||
|
const params = binding.value || {} |
||||||
|
const stickyTop = params.stickyTop || 0 |
||||||
|
const zIndex = params.zIndex || 1000 |
||||||
|
const elStyle = el.style |
||||||
|
|
||||||
|
elStyle.position = '-webkit-sticky' |
||||||
|
elStyle.position = 'sticky' |
||||||
|
// if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
|
||||||
|
// if (~elStyle.position.indexOf('sticky')) {
|
||||||
|
// elStyle.top = `${stickyTop}px`;
|
||||||
|
// elStyle.zIndex = zIndex;
|
||||||
|
// return
|
||||||
|
// }
|
||||||
|
const elHeight = el.getBoundingClientRect().height |
||||||
|
const elWidth = el.getBoundingClientRect().width |
||||||
|
elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}` |
||||||
|
|
||||||
|
const parentElm = el.parentNode || document.documentElement |
||||||
|
const placeholder = document.createElement('div') |
||||||
|
placeholder.style.display = 'none' |
||||||
|
placeholder.style.width = `${elWidth}px` |
||||||
|
placeholder.style.height = `${elHeight}px` |
||||||
|
parentElm.insertBefore(placeholder, el) |
||||||
|
|
||||||
|
let active = false |
||||||
|
|
||||||
|
const getScroll = (target, top) => { |
||||||
|
const prop = top ? 'pageYOffset' : 'pageXOffset' |
||||||
|
const method = top ? 'scrollTop' : 'scrollLeft' |
||||||
|
let ret = target[prop] |
||||||
|
if (typeof ret !== 'number') { |
||||||
|
ret = window.document.documentElement[method] |
||||||
|
} |
||||||
|
return ret |
||||||
|
} |
||||||
|
|
||||||
|
const sticky = () => { |
||||||
|
if (active) { |
||||||
|
return |
||||||
|
} |
||||||
|
if (!elStyle.height) { |
||||||
|
elStyle.height = `${el.offsetHeight}px` |
||||||
|
} |
||||||
|
|
||||||
|
elStyle.position = 'fixed' |
||||||
|
elStyle.width = `${elWidth}px` |
||||||
|
placeholder.style.display = 'inline-block' |
||||||
|
active = true |
||||||
|
} |
||||||
|
|
||||||
|
const reset = () => { |
||||||
|
if (!active) { |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
elStyle.position = '' |
||||||
|
placeholder.style.display = 'none' |
||||||
|
active = false |
||||||
|
} |
||||||
|
|
||||||
|
const check = () => { |
||||||
|
const scrollTop = getScroll(window, true) |
||||||
|
const offsetTop = el.getBoundingClientRect().top |
||||||
|
if (offsetTop < stickyTop) { |
||||||
|
sticky() |
||||||
|
} else { |
||||||
|
if (scrollTop < elHeight + stickyTop) { |
||||||
|
reset() |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
listenAction = () => { |
||||||
|
check() |
||||||
|
} |
||||||
|
|
||||||
|
window.addEventListener('scroll', listenAction) |
||||||
|
}, |
||||||
|
|
||||||
|
unbind() { |
||||||
|
window.removeEventListener('scroll', listenAction) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export default vueSticky |
||||||
|
|
||||||
@ -0,0 +1,13 @@ |
|||||||
|
import waves from './waves' |
||||||
|
|
||||||
|
const install = function(Vue) { |
||||||
|
Vue.directive('waves', waves) |
||||||
|
} |
||||||
|
|
||||||
|
if (window.Vue) { |
||||||
|
window.waves = waves |
||||||
|
Vue.use(install); // eslint-disable-line
|
||||||
|
} |
||||||
|
|
||||||
|
waves.install = install |
||||||
|
export default waves |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
.waves-ripple { |
||||||
|
position: absolute; |
||||||
|
border-radius: 100%; |
||||||
|
background-color: rgba(0, 0, 0, 0.15); |
||||||
|
background-clip: padding-box; |
||||||
|
pointer-events: none; |
||||||
|
-webkit-user-select: none; |
||||||
|
-moz-user-select: none; |
||||||
|
-ms-user-select: none; |
||||||
|
user-select: none; |
||||||
|
-webkit-transform: scale(0); |
||||||
|
-ms-transform: scale(0); |
||||||
|
transform: scale(0); |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.waves-ripple.z-active { |
||||||
|
opacity: 0; |
||||||
|
-webkit-transform: scale(2); |
||||||
|
-ms-transform: scale(2); |
||||||
|
transform: scale(2); |
||||||
|
-webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out; |
||||||
|
transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out; |
||||||
|
transition: opacity 1.2s ease-out, transform 0.6s ease-out; |
||||||
|
transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out; |
||||||
|
} |
||||||
@ -0,0 +1,72 @@ |
|||||||
|
import './waves.css' |
||||||
|
|
||||||
|
const context = '@@wavesContext' |
||||||
|
|
||||||
|
function handleClick(el, binding) { |
||||||
|
function handle(e) { |
||||||
|
const customOpts = Object.assign({}, binding.value) |
||||||
|
const opts = Object.assign({ |
||||||
|
ele: el, // 波纹作用元素
|
||||||
|
type: 'hit', // hit 点击位置扩散 center中心点扩展
|
||||||
|
color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
|
||||||
|
}, |
||||||
|
customOpts |
||||||
|
) |
||||||
|
const target = opts.ele |
||||||
|
if (target) { |
||||||
|
target.style.position = 'relative' |
||||||
|
target.style.overflow = 'hidden' |
||||||
|
const rect = target.getBoundingClientRect() |
||||||
|
let ripple = target.querySelector('.waves-ripple') |
||||||
|
if (!ripple) { |
||||||
|
ripple = document.createElement('span') |
||||||
|
ripple.className = 'waves-ripple' |
||||||
|
ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px' |
||||||
|
target.appendChild(ripple) |
||||||
|
} else { |
||||||
|
ripple.className = 'waves-ripple' |
||||||
|
} |
||||||
|
switch (opts.type) { |
||||||
|
case 'center': |
||||||
|
ripple.style.top = rect.height / 2 - ripple.offsetHeight / 2 + 'px' |
||||||
|
ripple.style.left = rect.width / 2 - ripple.offsetWidth / 2 + 'px' |
||||||
|
break |
||||||
|
default: |
||||||
|
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.documentElement.scrollLeft || |
||||||
|
document.body.scrollLeft) + 'px' |
||||||
|
} |
||||||
|
ripple.style.backgroundColor = opts.color |
||||||
|
ripple.className = 'waves-ripple z-active' |
||||||
|
return false |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if (!el[context]) { |
||||||
|
el[context] = { |
||||||
|
removeHandle: handle |
||||||
|
} |
||||||
|
} else { |
||||||
|
el[context].removeHandle = handle |
||||||
|
} |
||||||
|
|
||||||
|
return handle |
||||||
|
} |
||||||
|
|
||||||
|
export default { |
||||||
|
bind(el, binding) { |
||||||
|
el.addEventListener('click', handleClick(el, binding), false) |
||||||
|
}, |
||||||
|
update(el, binding) { |
||||||
|
el.removeEventListener('click', el[context].removeHandle, false) |
||||||
|
el.addEventListener('click', handleClick(el, binding), false) |
||||||
|
}, |
||||||
|
unbind(el) { |
||||||
|
el.removeEventListener('click', el[context].removeHandle, false) |
||||||
|
el[context] = null |
||||||
|
delete el[context] |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
import Vue from 'vue' |
||||||
|
import SvgIcon from '@/components/SvgIcon'// svg component
|
||||||
|
|
||||||
|
// register globally
|
||||||
|
Vue.component('svg-icon', SvgIcon) |
||||||
|
|
||||||
|
const req = require.context('./svg', false, /\.svg$/) |
||||||
|
const requireAll = requireContext => requireContext.keys().map(requireContext) |
||||||
|
requireAll(req) |
||||||
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 497 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 944 B |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 285 B |
|
After Width: | Height: | Size: 821 B |
|
After Width: | Height: | Size: 623 B |
|
After Width: | Height: | Size: 597 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 440 B |
@ -0,0 +1,22 @@ |
|||||||
|
# replace default config |
||||||
|
|
||||||
|
# multipass: true |
||||||
|
# full: true |
||||||
|
|
||||||
|
plugins: |
||||||
|
|
||||||
|
# - name |
||||||
|
# |
||||||
|
# or: |
||||||
|
# - name: false |
||||||
|
# - name: true |
||||||
|
# |
||||||
|
# or: |
||||||
|
# - name: |
||||||
|
# param1: 1 |
||||||
|
# param2: 2 |
||||||
|
|
||||||
|
- removeAttrs: |
||||||
|
attrs: |
||||||
|
- 'fill' |
||||||
|
- 'fill-rule' |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
<template> |
||||||
|
<section class="app-main"> |
||||||
|
<transition name="fade-transform" mode="out-in"> |
||||||
|
<router-view :key="key" /> |
||||||
|
</transition> |
||||||
|
</section> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'AppMain', |
||||||
|
computed: { |
||||||
|
key() { |
||||||
|
return this.$route.path |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.app-main { |
||||||
|
/*50 = navbar */ |
||||||
|
min-height: calc(100vh - 50px); |
||||||
|
width: 100%; |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
.fixed-header+.app-main { |
||||||
|
padding-top: 50px; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
// fix css style bug in open el-dialog |
||||||
|
.el-popup-parent--hidden { |
||||||
|
.fixed-header { |
||||||
|
padding-right: 15px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,139 @@ |
|||||||
|
<template> |
||||||
|
<div class="navbar"> |
||||||
|
<hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> |
||||||
|
|
||||||
|
<breadcrumb class="breadcrumb-container" /> |
||||||
|
|
||||||
|
<div class="right-menu"> |
||||||
|
<el-dropdown class="avatar-container" trigger="click"> |
||||||
|
<div class="avatar-wrapper"> |
||||||
|
<img :src="avatar" class="user-avatar"> |
||||||
|
<i class="el-icon-caret-bottom" /> |
||||||
|
</div> |
||||||
|
<el-dropdown-menu slot="dropdown" class="user-dropdown"> |
||||||
|
<router-link to="/"> |
||||||
|
<el-dropdown-item> |
||||||
|
Home |
||||||
|
</el-dropdown-item> |
||||||
|
</router-link> |
||||||
|
<a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/"> |
||||||
|
<el-dropdown-item>Github</el-dropdown-item> |
||||||
|
</a> |
||||||
|
<a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/"> |
||||||
|
<el-dropdown-item>Docs</el-dropdown-item> |
||||||
|
</a> |
||||||
|
<el-dropdown-item divided @click.native="logout"> |
||||||
|
<span style="display:block;">Log Out</span> |
||||||
|
</el-dropdown-item> |
||||||
|
</el-dropdown-menu> |
||||||
|
</el-dropdown> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { mapGetters } from 'vuex' |
||||||
|
import Breadcrumb from '@/components/Breadcrumb' |
||||||
|
import Hamburger from '@/components/Hamburger' |
||||||
|
|
||||||
|
export default { |
||||||
|
components: { |
||||||
|
Breadcrumb, |
||||||
|
Hamburger |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
...mapGetters([ |
||||||
|
'sidebar', |
||||||
|
'avatar' |
||||||
|
]) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
toggleSideBar() { |
||||||
|
this.$store.dispatch('app/toggleSideBar') |
||||||
|
}, |
||||||
|
async logout() { |
||||||
|
await this.$store.dispatch('user/logout') |
||||||
|
this.$router.push(`/login?redirect=${this.$route.fullPath}`) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.navbar { |
||||||
|
height: 50px; |
||||||
|
overflow: hidden; |
||||||
|
position: relative; |
||||||
|
background: #fff; |
||||||
|
box-shadow: 0 1px 4px rgba(0,21,41,.08); |
||||||
|
|
||||||
|
.hamburger-container { |
||||||
|
line-height: 46px; |
||||||
|
height: 100%; |
||||||
|
float: left; |
||||||
|
cursor: pointer; |
||||||
|
transition: background .3s; |
||||||
|
-webkit-tap-highlight-color:transparent; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
background: rgba(0, 0, 0, .025) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.breadcrumb-container { |
||||||
|
float: left; |
||||||
|
} |
||||||
|
|
||||||
|
.right-menu { |
||||||
|
float: right; |
||||||
|
height: 100%; |
||||||
|
line-height: 50px; |
||||||
|
|
||||||
|
&:focus { |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
|
||||||
|
.right-menu-item { |
||||||
|
display: inline-block; |
||||||
|
padding: 0 8px; |
||||||
|
height: 100%; |
||||||
|
font-size: 18px; |
||||||
|
color: #5a5e66; |
||||||
|
vertical-align: text-bottom; |
||||||
|
|
||||||
|
&.hover-effect { |
||||||
|
cursor: pointer; |
||||||
|
transition: background .3s; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
background: rgba(0, 0, 0, .025) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.avatar-container { |
||||||
|
margin-right: 30px; |
||||||
|
|
||||||
|
.avatar-wrapper { |
||||||
|
margin-top: 5px; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.user-avatar { |
||||||
|
cursor: pointer; |
||||||
|
width: 40px; |
||||||
|
height: 40px; |
||||||
|
border-radius: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.el-icon-caret-bottom { |
||||||
|
cursor: pointer; |
||||||
|
position: absolute; |
||||||
|
right: -20px; |
||||||
|
top: 25px; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
export default { |
||||||
|
computed: { |
||||||
|
device() { |
||||||
|
return this.$store.state.app.device |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
// In order to fix the click on menu on the ios device will trigger the mouseleave bug
|
||||||
|
// https://github.com/PanJiaChen/vue-element-admin/issues/1135
|
||||||
|
this.fixBugIniOS() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
fixBugIniOS() { |
||||||
|
const $subMenu = this.$refs.subMenu |
||||||
|
if ($subMenu) { |
||||||
|
const handleMouseleave = $subMenu.handleMouseleave |
||||||
|
$subMenu.handleMouseleave = (e) => { |
||||||
|
if (this.device === 'mobile') { |
||||||
|
return |
||||||
|
} |
||||||
|
handleMouseleave(e) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'MenuItem', |
||||||
|
functional: true, |
||||||
|
props: { |
||||||
|
icon: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
title: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
render(h, context) { |
||||||
|
const { icon, title } = context.props |
||||||
|
const vnodes = [] |
||||||
|
|
||||||
|
if (icon) { |
||||||
|
if (icon.includes('el-icon')) { |
||||||
|
vnodes.push(<i class={[icon, 'sub-el-icon']} />) |
||||||
|
} else { |
||||||
|
vnodes.push(<svg-icon icon-class={icon}/>) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if (title) { |
||||||
|
vnodes.push(<span slot='title'>{(title)}</span>) |
||||||
|
} |
||||||
|
return vnodes |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.sub-el-icon { |
||||||
|
color: currentColor; |
||||||
|
width: 1em; |
||||||
|
height: 1em; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,43 @@ |
|||||||
|
<template> |
||||||
|
<component :is="type" v-bind="linkProps(to)"> |
||||||
|
<slot /> |
||||||
|
</component> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { isExternal } from '@/utils/validate' |
||||||
|
|
||||||
|
export default { |
||||||
|
props: { |
||||||
|
to: { |
||||||
|
type: String, |
||||||
|
required: true |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
isExternal() { |
||||||
|
return isExternal(this.to) |
||||||
|
}, |
||||||
|
type() { |
||||||
|
if (this.isExternal) { |
||||||
|
return 'a' |
||||||
|
} |
||||||
|
return 'router-link' |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
linkProps(to) { |
||||||
|
if (this.isExternal) { |
||||||
|
return { |
||||||
|
href: to, |
||||||
|
target: '_blank', |
||||||
|
rel: 'noopener' |
||||||
|
} |
||||||
|
} |
||||||
|
return { |
||||||
|
to: to |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
@ -0,0 +1,82 @@ |
|||||||
|
<template> |
||||||
|
<div class="sidebar-logo-container" :class="{'collapse':collapse}"> |
||||||
|
<transition name="sidebarLogoFade"> |
||||||
|
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> |
||||||
|
<img v-if="logo" :src="logo" class="sidebar-logo"> |
||||||
|
<h1 v-else class="sidebar-title">{{ title }} </h1> |
||||||
|
</router-link> |
||||||
|
<router-link v-else key="expand" class="sidebar-logo-link" to="/"> |
||||||
|
<img v-if="logo" :src="logo" class="sidebar-logo"> |
||||||
|
<h1 class="sidebar-title">{{ title }} </h1> |
||||||
|
</router-link> |
||||||
|
</transition> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'SidebarLogo', |
||||||
|
props: { |
||||||
|
collapse: { |
||||||
|
type: Boolean, |
||||||
|
required: true |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
title: 'Vue Admin Template', |
||||||
|
logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.sidebarLogoFade-enter-active { |
||||||
|
transition: opacity 1.5s; |
||||||
|
} |
||||||
|
|
||||||
|
.sidebarLogoFade-enter, |
||||||
|
.sidebarLogoFade-leave-to { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.sidebar-logo-container { |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
height: 50px; |
||||||
|
line-height: 50px; |
||||||
|
background: #2b2f3a; |
||||||
|
text-align: center; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
& .sidebar-logo-link { |
||||||
|
height: 100%; |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
& .sidebar-logo { |
||||||
|
width: 32px; |
||||||
|
height: 32px; |
||||||
|
vertical-align: middle; |
||||||
|
margin-right: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
& .sidebar-title { |
||||||
|
display: inline-block; |
||||||
|
margin: 0; |
||||||
|
color: #fff; |
||||||
|
font-weight: 600; |
||||||
|
line-height: 50px; |
||||||
|
font-size: 14px; |
||||||
|
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif; |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.collapse { |
||||||
|
.sidebar-logo { |
||||||
|
margin-right: 0px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,95 @@ |
|||||||
|
<template> |
||||||
|
<div v-if="!item.hidden"> |
||||||
|
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow"> |
||||||
|
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)"> |
||||||
|
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}"> |
||||||
|
<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" /> |
||||||
|
</el-menu-item> |
||||||
|
</app-link> |
||||||
|
</template> |
||||||
|
|
||||||
|
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body> |
||||||
|
<template slot="title"> |
||||||
|
<item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" /> |
||||||
|
</template> |
||||||
|
<sidebar-item |
||||||
|
v-for="child in item.children" |
||||||
|
:key="child.path" |
||||||
|
:is-nest="true" |
||||||
|
:item="child" |
||||||
|
:base-path="resolvePath(child.path)" |
||||||
|
class="nest-menu" |
||||||
|
/> |
||||||
|
</el-submenu> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import path from 'path' |
||||||
|
import { isExternal } from '@/utils/validate' |
||||||
|
import Item from './Item' |
||||||
|
import AppLink from './Link' |
||||||
|
import FixiOSBug from './FixiOSBug' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'SidebarItem', |
||||||
|
components: { Item, AppLink }, |
||||||
|
mixins: [FixiOSBug], |
||||||
|
props: { |
||||||
|
// route object |
||||||
|
item: { |
||||||
|
type: Object, |
||||||
|
required: true |
||||||
|
}, |
||||||
|
isNest: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
basePath: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
// To fix https://github.com/PanJiaChen/vue-admin-template/issues/237 |
||||||
|
// TODO: refactor with render function |
||||||
|
this.onlyOneChild = null |
||||||
|
return {} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
hasOneShowingChild(children = [], parent) { |
||||||
|
const showingChildren = children.filter(item => { |
||||||
|
if (item.hidden) { |
||||||
|
return false |
||||||
|
} else { |
||||||
|
// Temp set(will be used if only has one showing child) |
||||||
|
this.onlyOneChild = item |
||||||
|
return true |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
// When there is only one child router, the child router is displayed by default |
||||||
|
if (showingChildren.length === 1) { |
||||||
|
return true |
||||||
|
} |
||||||
|
|
||||||
|
// Show parent if there are no child router to display |
||||||
|
if (showingChildren.length === 0) { |
||||||
|
this.onlyOneChild = { ... parent, path: '', noShowingChildren: true } |
||||||
|
return true |
||||||
|
} |
||||||
|
|
||||||
|
return false |
||||||
|
}, |
||||||
|
resolvePath(routePath) { |
||||||
|
if (isExternal(routePath)) { |
||||||
|
return routePath |
||||||
|
} |
||||||
|
if (isExternal(this.basePath)) { |
||||||
|
return this.basePath |
||||||
|
} |
||||||
|
return path.resolve(this.basePath, routePath) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
@ -0,0 +1,56 @@ |
|||||||
|
<template> |
||||||
|
<div :class="{'has-logo':showLogo}"> |
||||||
|
<logo v-if="showLogo" :collapse="isCollapse" /> |
||||||
|
<el-scrollbar wrap-class="scrollbar-wrapper"> |
||||||
|
<el-menu |
||||||
|
:default-active="activeMenu" |
||||||
|
:collapse="isCollapse" |
||||||
|
:background-color="variables.menuBg" |
||||||
|
:text-color="variables.menuText" |
||||||
|
:unique-opened="false" |
||||||
|
:active-text-color="variables.menuActiveText" |
||||||
|
:collapse-transition="false" |
||||||
|
mode="vertical" |
||||||
|
> |
||||||
|
<sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" /> |
||||||
|
</el-menu> |
||||||
|
</el-scrollbar> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { mapGetters } from 'vuex' |
||||||
|
import Logo from './Logo' |
||||||
|
import SidebarItem from './SidebarItem' |
||||||
|
import variables from '@/styles/variables.scss' |
||||||
|
|
||||||
|
export default { |
||||||
|
components: { SidebarItem, Logo }, |
||||||
|
computed: { |
||||||
|
...mapGetters([ |
||||||
|
'sidebar' |
||||||
|
]), |
||||||
|
routes() { |
||||||
|
return this.$router.options.routes |
||||||
|
}, |
||||||
|
activeMenu() { |
||||||
|
const route = this.$route |
||||||
|
const { meta, path } = route |
||||||
|
// if set path, the sidebar will highlight the path you set |
||||||
|
if (meta.activeMenu) { |
||||||
|
return meta.activeMenu |
||||||
|
} |
||||||
|
return path |
||||||
|
}, |
||||||
|
showLogo() { |
||||||
|
return this.$store.state.settings.sidebarLogo |
||||||
|
}, |
||||||
|
variables() { |
||||||
|
return variables |
||||||
|
}, |
||||||
|
isCollapse() { |
||||||
|
return !this.sidebar.opened |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
export { default as Navbar } from './Navbar' |
||||||
|
export { default as Sidebar } from './Sidebar' |
||||||
|
export { default as AppMain } from './AppMain' |
||||||
@ -0,0 +1,93 @@ |
|||||||
|
<template> |
||||||
|
<div :class="classObj" class="app-wrapper"> |
||||||
|
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> |
||||||
|
<sidebar class="sidebar-container" /> |
||||||
|
<div class="main-container"> |
||||||
|
<div :class="{'fixed-header':fixedHeader}"> |
||||||
|
<navbar /> |
||||||
|
</div> |
||||||
|
<app-main /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { Navbar, Sidebar, AppMain } from './components' |
||||||
|
import ResizeMixin from './mixin/ResizeHandler' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'Layout', |
||||||
|
components: { |
||||||
|
Navbar, |
||||||
|
Sidebar, |
||||||
|
AppMain |
||||||
|
}, |
||||||
|
mixins: [ResizeMixin], |
||||||
|
computed: { |
||||||
|
sidebar() { |
||||||
|
return this.$store.state.app.sidebar |
||||||
|
}, |
||||||
|
device() { |
||||||
|
return this.$store.state.app.device |
||||||
|
}, |
||||||
|
fixedHeader() { |
||||||
|
return this.$store.state.settings.fixedHeader |
||||||
|
}, |
||||||
|
classObj() { |
||||||
|
return { |
||||||
|
hideSidebar: !this.sidebar.opened, |
||||||
|
openSidebar: this.sidebar.opened, |
||||||
|
withoutAnimation: this.sidebar.withoutAnimation, |
||||||
|
mobile: this.device === 'mobile' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
handleClickOutside() { |
||||||
|
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false }) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
@import "~@/styles/mixin.scss"; |
||||||
|
@import "~@/styles/variables.scss"; |
||||||
|
|
||||||
|
.app-wrapper { |
||||||
|
@include clearfix; |
||||||
|
position: relative; |
||||||
|
height: 100%; |
||||||
|
width: 100%; |
||||||
|
&.mobile.openSidebar{ |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
.drawer-bg { |
||||||
|
background: #000; |
||||||
|
opacity: 0.3; |
||||||
|
width: 100%; |
||||||
|
top: 0; |
||||||
|
height: 100%; |
||||||
|
position: absolute; |
||||||
|
z-index: 999; |
||||||
|
} |
||||||
|
|
||||||
|
.fixed-header { |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
right: 0; |
||||||
|
z-index: 9; |
||||||
|
width: calc(100% - #{$sideBarWidth}); |
||||||
|
transition: width 0.28s; |
||||||
|
} |
||||||
|
|
||||||
|
.hideSidebar .fixed-header { |
||||||
|
width: calc(100% - 54px) |
||||||
|
} |
||||||
|
|
||||||
|
.mobile .fixed-header { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,45 @@ |
|||||||
|
import store from '@/store' |
||||||
|
|
||||||
|
const { body } = document |
||||||
|
const WIDTH = 992 // refer to Bootstrap's responsive design
|
||||||
|
|
||||||
|
export default { |
||||||
|
watch: { |
||||||
|
$route(route) { |
||||||
|
if (this.device === 'mobile' && this.sidebar.opened) { |
||||||
|
store.dispatch('app/closeSideBar', { withoutAnimation: false }) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
beforeMount() { |
||||||
|
window.addEventListener('resize', this.$_resizeHandler) |
||||||
|
}, |
||||||
|
beforeDestroy() { |
||||||
|
window.removeEventListener('resize', this.$_resizeHandler) |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
const isMobile = this.$_isMobile() |
||||||
|
if (isMobile) { |
||||||
|
store.dispatch('app/toggleDevice', 'mobile') |
||||||
|
store.dispatch('app/closeSideBar', { withoutAnimation: true }) |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// use $_ for mixins properties
|
||||||
|
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||||
|
$_isMobile() { |
||||||
|
const rect = body.getBoundingClientRect() |
||||||
|
return rect.width - 1 < WIDTH |
||||||
|
}, |
||||||
|
$_resizeHandler() { |
||||||
|
if (!document.hidden) { |
||||||
|
const isMobile = this.$_isMobile() |
||||||
|
store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop') |
||||||
|
|
||||||
|
if (isMobile) { |
||||||
|
store.dispatch('app/closeSideBar', { withoutAnimation: true }) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,43 @@ |
|||||||
|
import Vue from 'vue' |
||||||
|
|
||||||
|
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
|
||||||
|
|
||||||
|
import ElementUI from 'element-ui' |
||||||
|
import 'element-ui/lib/theme-chalk/index.css' |
||||||
|
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n
|
||||||
|
|
||||||
|
import '@/styles/index.scss' // global css
|
||||||
|
|
||||||
|
import App from './App' |
||||||
|
import store from './store' |
||||||
|
import router from './router' |
||||||
|
|
||||||
|
import '@/icons' // icon
|
||||||
|
import '@/permission' // permission control
|
||||||
|
|
||||||
|
/** |
||||||
|
* If you don't want to use mock-server |
||||||
|
* you want to use MockJs for mock api |
||||||
|
* you can execute: mockXHR() |
||||||
|
* |
||||||
|
* Currently MockJs will be used in the production environment, |
||||||
|
* please remove it before going online ! ! ! |
||||||
|
*/ |
||||||
|
if (process.env.NODE_ENV === 'production') { |
||||||
|
const { mockXHR } = require('../mock') |
||||||
|
mockXHR() |
||||||
|
} |
||||||
|
|
||||||
|
// set ElementUI lang to EN
|
||||||
|
// Vue.use(ElementUI, { locale })
|
||||||
|
// 如果想要中文版 element-ui，按如下方式声明
|
||||||
|
Vue.use(ElementUI) |
||||||
|
|
||||||
|
Vue.config.productionTip = false |
||||||
|
|
||||||
|
new Vue({ |
||||||
|
el: '#app', |
||||||
|
router, |
||||||
|
store, |
||||||
|
render: h => h(App) |
||||||
|
}) |
||||||
@ -0,0 +1,64 @@ |
|||||||
|
import router from './router' |
||||||
|
import store from './store' |
||||||
|
import { Message } from 'element-ui' |
||||||
|
import NProgress from 'nprogress' // progress bar
|
||||||
|
import 'nprogress/nprogress.css' // progress bar style
|
||||||
|
import { getToken } from '@/utils/auth' // get token from cookie
|
||||||
|
import getPageTitle from '@/utils/get-page-title' |
||||||
|
|
||||||
|
NProgress.configure({ showSpinner: false }) // NProgress Configuration
|
||||||
|
|
||||||
|
const whiteList = ['/login'] // no redirect whitelist
|
||||||
|
|
||||||
|
router.beforeEach(async(to, from, next) => { |
||||||
|
// start progress bar
|
||||||
|
NProgress.start() |
||||||
|
|
||||||
|
// set page title
|
||||||
|
document.title = getPageTitle(to.meta.title) |
||||||
|
|
||||||
|
// determine whether the user has logged in
|
||||||
|
const hasToken = getToken() |
||||||
|
|
||||||
|
if (hasToken) { |
||||||
|
if (to.path === '/login') { |
||||||
|
// if is logged in, redirect to the home page
|
||||||
|
next({ path: '/' }) |
||||||
|
NProgress.done() |
||||||
|
} else { |
||||||
|
const hasGetUserInfo = store.getters.name |
||||||
|
if (hasGetUserInfo) { |
||||||
|
next() |
||||||
|
} else { |
||||||
|
try { |
||||||
|
// get user info
|
||||||
|
await store.dispatch('user/getInfo') |
||||||
|
|
||||||
|
next() |
||||||
|
} catch (error) { |
||||||
|
// remove token and go to login page to re-login
|
||||||
|
await store.dispatch('user/resetToken') |
||||||
|
Message.error(error || 'Has Error') |
||||||
|
next(`/login?redirect=${to.path}`) |
||||||
|
NProgress.done() |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} else { |
||||||
|
/* has no token*/ |
||||||
|
|
||||||
|
if (whiteList.indexOf(to.path) !== -1) { |
||||||
|
// in the free login whitelist, go directly
|
||||||
|
next() |
||||||
|
} else { |
||||||
|
// other pages that do not have permission to access are redirected to the login page.
|
||||||
|
next(`/login?redirect=${to.path}`) |
||||||
|
NProgress.done() |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
router.afterEach(() => { |
||||||
|
// finish progress bar
|
||||||
|
NProgress.done() |
||||||
|
}) |
||||||
@ -0,0 +1,274 @@ |
|||||||
|
import Vue from 'vue' |
||||||
|
import Router from 'vue-router' |
||||||
|
|
||||||
|
Vue.use(Router) |
||||||
|
|
||||||
|
/* Layout */ |
||||||
|
import Layout from '@/layout' |
||||||
|
|
||||||
|
/** |
||||||
|
* Note: sub-menu only appear when route children.length >= 1 |
||||||
|
* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
|
||||||
|
* |
||||||
|
* hidden: true if set true, item will not show in the sidebar(default is false) |
||||||
|
* alwaysShow: true if set true, will always show the root menu |
||||||
|
* if not set alwaysShow, when item has more than one children route, |
||||||
|
* it will becomes nested mode, otherwise not show the root menu |
||||||
|
* redirect: noRedirect if set noRedirect will no redirect in the breadcrumb |
||||||
|
* name:'router-name' the name is used by <keep-alive> (must set!!!) |
||||||
|
* meta : { |
||||||
|
roles: ['admin','editor'] control the page roles (you can set multiple roles) |
||||||
|
title: 'title' the name show in sidebar and breadcrumb (recommend set) |
||||||
|
icon: 'svg-name'/'el-icon-x' the icon show in the sidebar |
||||||
|
breadcrumb: false if set false, the item will hidden in breadcrumb(default is true) |
||||||
|
activeMenu: '/example/list' if set path, the sidebar will highlight the path you set |
||||||
|
} |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* constantRoutes |
||||||
|
* a base page that does not have permission requirements |
||||||
|
* all roles can be accessed |
||||||
|
*/ |
||||||
|
export const constantRoutes = [ |
||||||
|
{ |
||||||
|
path: '/login', |
||||||
|
component: () => import('@/views/login/index'), |
||||||
|
hidden: true |
||||||
|
}, |
||||||
|
|
||||||
|
{ |
||||||
|
path: '/404', |
||||||
|
component: () => import('@/views/404'), |
||||||
|
hidden: true |
||||||
|
}, |
||||||
|
|
||||||
|
{ |
||||||
|
path: '/', |
||||||
|
component: Layout, |
||||||
|
redirect: '/dashboard', |
||||||
|
children: [{ |
||||||
|
path: 'dashboard', |
||||||
|
name: 'Dashboard', |
||||||
|
component: () => import('@/views/dashboard/index'), |
||||||
|
meta: { title: 'Dashboard', icon: 'dashboard' } |
||||||
|
}] |
||||||
|
}, |
||||||
|
|
||||||
|
{ |
||||||
|
path: '/user', |
||||||
|
component: Layout, |
||||||
|
redirect: '/user/list', |
||||||
|
name: 'user', |
||||||
|
meta: { |
||||||
|
title: '用户管理', |
||||||
|
icon: 'el-icon-s-help' |
||||||
|
}, |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
path: 'list', |
||||||
|
name: 'user_info_list', |
||||||
|
component: () => import('@/views/userinfos/list'), |
||||||
|
meta: { title: '用户列表', icon: 'form' } |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: 'edit/:id(\\d+)', |
||||||
|
component: () => import('@/views/userinfos/edit'), |
||||||
|
name: 'user_info_edit', |
||||||
|
meta: { title: '编辑信息', noCache: true, activeMenu: '/user/list' }, |
||||||
|
hidden: true |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: '/apps', |
||||||
|
component: Layout, |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
path: 'index', |
||||||
|
name: 'index', |
||||||
|
component: () => import('@/views/form/index'), |
||||||
|
meta: { title: '应用管理', icon: 'form' } |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: '/storage', |
||||||
|
component: Layout, |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
path: 'index', |
||||||
|
name: 'index', |
||||||
|
component: () => import('@/views/form/index'), |
||||||
|
meta: { title: '存储管理', icon: 'form' } |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: '/sign', |
||||||
|
component: Layout, |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
path: 'index', |
||||||
|
name: 'index', |
||||||
|
component: () => import('@/views/form/index'), |
||||||
|
meta: { title: '超级签名', icon: 'form' } |
||||||
|
} |
||||||
|
] |
||||||
|
}, { |
||||||
|
path: '/certification', |
||||||
|
component: Layout, |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
path: 'index', |
||||||
|
name: 'index', |
||||||
|
component: () => import('@/views/form/index'), |
||||||
|
meta: { title: '用户实名认证', icon: 'form' } |
||||||
|
} |
||||||
|
] |
||||||
|
}, { |
||||||
|
path: '/order', |
||||||
|
component: Layout, |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
path: 'index', |
||||||
|
name: 'index', |
||||||
|
component: () => import('@/views/form/index'), |
||||||
|
meta: { title: '订单管理', icon: 'form' } |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: '/settings', |
||||||
|
component: Layout, |
||||||
|
redirect: '/settings/email', |
||||||
|
name: 'settings', |
||||||
|
meta: { title: '系统设置', icon: 'el-icon-s-help' }, |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
path: 'email', |
||||||
|
name: 'email', |
||||||
|
component: () => import('@/views/table/index'), |
||||||
|
meta: { title: '邮箱设置', icon: 'table' } |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: 'sms', |
||||||
|
name: 'sms', |
||||||
|
component: () => import('@/views/tree/index'), |
||||||
|
meta: { title: '短信设置', icon: 'tree' } |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: 'register', |
||||||
|
name: 'register', |
||||||
|
component: () => import('@/views/tree/index'), |
||||||
|
meta: { title: '注册设置', icon: 'tree' } |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: 'login', |
||||||
|
name: 'login', |
||||||
|
component: () => import('@/views/tree/index'), |
||||||
|
meta: { title: '登录设置', icon: 'tree' } |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: 'geetest', |
||||||
|
name: 'geetest', |
||||||
|
component: () => import('@/views/tree/index'), |
||||||
|
meta: { title: '极验验证', icon: 'tree' } |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: 'captcha', |
||||||
|
name: 'captcha', |
||||||
|
component: () => import('@/views/tree/index'), |
||||||
|
meta: { title: '图片验证', icon: 'tree' } |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
|
||||||
|
{ |
||||||
|
path: '/nested', |
||||||
|
component: Layout, |
||||||
|
redirect: '/nested/menu1', |
||||||
|
name: 'Nested', |
||||||
|
meta: { |
||||||
|
title: 'Nested', |
||||||
|
icon: 'nested' |
||||||
|
}, |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
path: 'menu1', |
||||||
|
component: () => import('@/views/nested/menu1/index'), // Parent router-view
|
||||||
|
name: 'Menu1', |
||||||
|
meta: { title: 'Menu1' }, |
||||||
|
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', |
||||||
|
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', |
||||||
|
component: () => import('@/views/nested/menu2/index'), |
||||||
|
meta: { title: 'menu2' } |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
|
||||||
|
{ |
||||||
|
path: 'external-link', |
||||||
|
component: Layout, |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
path: 'https://panjiachen.github.io/vue-element-admin-site/#/', |
||||||
|
meta: { title: '官方首页', icon: 'link' } |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
|
||||||
|
// 404 page must be placed at the end !!!
|
||||||
|
{ path: '*', redirect: '/404', hidden: true } |
||||||
|
] |
||||||
|
|
||||||
|
const createRouter = () => new Router({ |
||||||
|
// mode: 'history', // require service support
|
||||||
|
scrollBehavior: () => ({ y: 0 }), |
||||||
|
routes: constantRoutes |
||||||
|
}) |
||||||
|
|
||||||
|
const router = createRouter() |
||||||
|
|
||||||
|
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
|
||||||
|
export function resetRouter() { |
||||||
|
const newRouter = createRouter() |
||||||
|
router.matcher = newRouter.matcher // reset router
|
||||||
|
} |
||||||
|
|
||||||
|
export default router |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
module.exports = { |
||||||
|
|
||||||
|
title: 'FLY 应用分发平台 管理后台', |
||||||
|
|
||||||
|
/** |
||||||
|
* @type {boolean} true | false |
||||||
|
* @description Whether fix the header |
||||||
|
*/ |
||||||
|
fixedHeader: false, |
||||||
|
|
||||||
|
/** |
||||||
|
* @type {boolean} true | false |
||||||
|
* @description Whether show the logo in sidebar |
||||||
|
*/ |
||||||
|
sidebarLogo: false |
||||||
|
} |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
const getters = { |
||||||
|
sidebar: state => state.app.sidebar, |
||||||
|
device: state => state.app.device, |
||||||
|
token: state => state.user.token, |
||||||
|
avatar: state => state.user.avatar, |
||||||
|
name: state => state.user.name |
||||||
|
} |
||||||
|
export default getters |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
import Vue from 'vue' |
||||||
|
import Vuex from 'vuex' |
||||||
|
import getters from './getters' |
||||||
|
import app from './modules/app' |
||||||
|
import settings from './modules/settings' |
||||||
|
import user from './modules/user' |
||||||
|
|
||||||
|
Vue.use(Vuex) |
||||||
|
|
||||||
|
const store = new Vuex.Store({ |
||||||
|
modules: { |
||||||
|
app, |
||||||
|
settings, |
||||||
|
user |
||||||
|
}, |
||||||
|
getters |
||||||
|
}) |
||||||
|
|
||||||
|
export default store |
||||||
@ -0,0 +1,48 @@ |
|||||||
|
import Cookies from 'js-cookie' |
||||||
|
|
||||||
|
const state = { |
||||||
|
sidebar: { |
||||||
|
opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true, |
||||||
|
withoutAnimation: false |
||||||
|
}, |
||||||
|
device: 'desktop' |
||||||
|
} |
||||||
|
|
||||||
|
const mutations = { |
||||||
|
TOGGLE_SIDEBAR: state => { |
||||||
|
state.sidebar.opened = !state.sidebar.opened |
||||||
|
state.sidebar.withoutAnimation = false |
||||||
|
if (state.sidebar.opened) { |
||||||
|
Cookies.set('sidebarStatus', 1) |
||||||
|
} else { |
||||||
|
Cookies.set('sidebarStatus', 0) |
||||||
|
} |
||||||
|
}, |
||||||
|
CLOSE_SIDEBAR: (state, withoutAnimation) => { |
||||||
|
Cookies.set('sidebarStatus', 0) |
||||||
|
state.sidebar.opened = false |
||||||
|
state.sidebar.withoutAnimation = withoutAnimation |
||||||
|
}, |
||||||
|
TOGGLE_DEVICE: (state, device) => { |
||||||
|
state.device = device |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const actions = { |
||||||
|
toggleSideBar({ commit }) { |
||||||
|
commit('TOGGLE_SIDEBAR') |
||||||
|
}, |
||||||
|
closeSideBar({ commit }, { withoutAnimation }) { |
||||||
|
commit('CLOSE_SIDEBAR', withoutAnimation) |
||||||
|
}, |
||||||
|
toggleDevice({ commit }, device) { |
||||||
|
commit('TOGGLE_DEVICE', device) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default { |
||||||
|
namespaced: true, |
||||||
|
state, |
||||||
|
mutations, |
||||||
|
actions |
||||||
|
} |
||||||
@ -0,0 +1,32 @@ |
|||||||
|
import defaultSettings from '@/settings' |
||||||
|
|
||||||
|
const { showSettings, fixedHeader, sidebarLogo } = defaultSettings |
||||||
|
|
||||||
|
const state = { |
||||||
|
showSettings: showSettings, |
||||||
|
fixedHeader: fixedHeader, |
||||||
|
sidebarLogo: sidebarLogo |
||||||
|
} |
||||||
|
|
||||||
|
const mutations = { |
||||||
|
CHANGE_SETTING: (state, { key, value }) => { |
||||||
|
// eslint-disable-next-line no-prototype-builtins
|
||||||
|
if (state.hasOwnProperty(key)) { |
||||||
|
state[key] = value |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const actions = { |
||||||
|
changeSetting({ commit }, data) { |
||||||
|
commit('CHANGE_SETTING', data) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default { |
||||||
|
namespaced: true, |
||||||
|
state, |
||||||
|
mutations, |
||||||
|
actions |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,100 @@ |
|||||||
|
import { login, logout, getInfo } from '@/api/user' |
||||||
|
import { getToken, setToken, removeToken } from '@/utils/auth' |
||||||
|
import { resetRouter } from '@/router' |
||||||
|
const Base64 = require('js-base64').Base64; |
||||||
|
|
||||||
|
const getDefaultState = () => { |
||||||
|
return { |
||||||
|
token: getToken(), |
||||||
|
name: '', |
||||||
|
avatar: '' |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const state = getDefaultState() |
||||||
|
|
||||||
|
const mutations = { |
||||||
|
RESET_STATE: (state) => { |
||||||
|
Object.assign(state, getDefaultState()) |
||||||
|
}, |
||||||
|
SET_TOKEN: (state, token) => { |
||||||
|
state.token = token |
||||||
|
}, |
||||||
|
SET_NAME: (state, name) => { |
||||||
|
state.name = name |
||||||
|
}, |
||||||
|
SET_AVATAR: (state, avatar) => { |
||||||
|
state.avatar = avatar |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const actions = { |
||||||
|
// user login
|
||||||
|
login({ commit }, userInfo) { |
||||||
|
const { username, password } = userInfo |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
login({ username: username.trim(), password: password }).then(response => { |
||||||
|
const { data } = response |
||||||
|
console.log(response) |
||||||
|
const Auth_Token = Base64.encode(data.token + ':' + data.username) |
||||||
|
commit('SET_TOKEN', Auth_Token) |
||||||
|
setToken(Auth_Token) |
||||||
|
resolve() |
||||||
|
}).catch(error => { |
||||||
|
reject(error) |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
// get user info
|
||||||
|
getInfo({ commit, state }) { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
getInfo(state.token).then(response => { |
||||||
|
const { data } = response |
||||||
|
|
||||||
|
if (!data) { |
||||||
|
reject('Verification failed, please Login again.') |
||||||
|
} |
||||||
|
|
||||||
|
const { first_name, head_img } = data |
||||||
|
|
||||||
|
commit('SET_NAME', first_name) |
||||||
|
commit('SET_AVATAR', head_img) |
||||||
|
resolve(data) |
||||||
|
}).catch(error => { |
||||||
|
reject(error) |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
// user logout
|
||||||
|
logout({ commit, state }) { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
logout(state.token).then(() => { |
||||||
|
removeToken() // must remove token first
|
||||||
|
resetRouter() |
||||||
|
commit('RESET_STATE') |
||||||
|
resolve() |
||||||
|
}).catch(error => { |
||||||
|
reject(error) |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
// remove token
|
||||||
|
resetToken({ commit }) { |
||||||
|
return new Promise(resolve => { |
||||||
|
removeToken() // must remove token first
|
||||||
|
commit('RESET_STATE') |
||||||
|
resolve() |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default { |
||||||
|
namespaced: true, |
||||||
|
state, |
||||||
|
mutations, |
||||||
|
actions |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,49 @@ |
|||||||
|
// cover some element-ui styles |
||||||
|
|
||||||
|
.el-breadcrumb__inner, |
||||||
|
.el-breadcrumb__inner a { |
||||||
|
font-weight: 400 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.el-upload { |
||||||
|
input[type="file"] { |
||||||
|
display: none !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.el-upload__input { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// to fixed https://github.com/ElemeFE/element/issues/2461 |
||||||
|
.el-dialog { |
||||||
|
transform: none; |
||||||
|
left: 0; |
||||||
|
position: relative; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
// refine element ui upload |
||||||
|
.upload-container { |
||||||
|
.el-upload { |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
.el-upload-dragger { |
||||||
|
width: 100%; |
||||||
|
height: 200px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// dropdown |
||||||
|
.el-dropdown-menu { |
||||||
|
a { |
||||||
|
display: block |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// to fix el-date-picker css style |
||||||
|
.el-range-separator { |
||||||
|
box-sizing: content-box; |
||||||
|
} |
||||||
@ -0,0 +1,75 @@ |
|||||||
|
@import './variables.scss'; |
||||||
|
@import './mixin.scss'; |
||||||
|
@import './transition.scss'; |
||||||
|
@import './element-ui.scss'; |
||||||
|
@import './sidebar.scss'; |
||||||
|
|
||||||
|
body { |
||||||
|
height: 100%; |
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
text-rendering: optimizeLegibility; |
||||||
|
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; |
||||||
|
} |
||||||
|
|
||||||
|
label { |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
|
||||||
|
html { |
||||||
|
height: 100%; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
#app { |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
*, |
||||||
|
*:before, |
||||||
|
*:after { |
||||||
|
box-sizing: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
a:focus, |
||||||
|
a:active { |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
|
||||||
|
a, |
||||||
|
a:focus, |
||||||
|
a:hover { |
||||||
|
cursor: pointer; |
||||||
|
color: inherit; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
div:focus { |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
|
||||||
|
.clearfix { |
||||||
|
&:after { |
||||||
|
visibility: hidden; |
||||||
|
display: block; |
||||||
|
font-size: 0; |
||||||
|
content: " "; |
||||||
|
clear: both; |
||||||
|
height: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// main-container global css |
||||||
|
.app-container { |
||||||
|
padding: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.filter-container { |
||||||
|
padding-bottom: 10px; |
||||||
|
|
||||||
|
.filter-item { |
||||||
|
display: inline-block; |
||||||
|
vertical-align: middle; |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
@mixin clearfix { |
||||||
|
&:after { |
||||||
|
content: ""; |
||||||
|
display: table; |
||||||
|
clear: both; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@mixin scrollBar { |
||||||
|
&::-webkit-scrollbar-track-piece { |
||||||
|
background: #d3dce6; |
||||||
|
} |
||||||
|
|
||||||
|
&::-webkit-scrollbar { |
||||||
|
width: 6px; |
||||||
|
} |
||||||
|
|
||||||
|
&::-webkit-scrollbar-thumb { |
||||||
|
background: #99a9bf; |
||||||
|
border-radius: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@mixin relative { |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
@ -0,0 +1,226 @@ |
|||||||
|
#app { |
||||||
|
|
||||||
|
.main-container { |
||||||
|
min-height: 100%; |
||||||
|
transition: margin-left .28s; |
||||||
|
margin-left: $sideBarWidth; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.sidebar-container { |
||||||
|
transition: width 0.28s; |
||||||
|
width: $sideBarWidth !important; |
||||||
|
background-color: $menuBg; |
||||||
|
height: 100%; |
||||||
|
position: fixed; |
||||||
|
font-size: 0px; |
||||||
|
top: 0; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
z-index: 1001; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
// reset element-ui css |
||||||
|
.horizontal-collapse-transition { |
||||||
|
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; |
||||||
|
} |
||||||
|
|
||||||
|
.scrollbar-wrapper { |
||||||
|
overflow-x: hidden !important; |
||||||
|
} |
||||||
|
|
||||||
|
.el-scrollbar__bar.is-vertical { |
||||||
|
right: 0px; |
||||||
|
} |
||||||
|
|
||||||
|
.el-scrollbar { |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
&.has-logo { |
||||||
|
.el-scrollbar { |
||||||
|
height: calc(100% - 50px); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.is-horizontal { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
display: inline-block; |
||||||
|
width: 100%; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.svg-icon { |
||||||
|
margin-right: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.sub-el-icon { |
||||||
|
margin-right: 12px; |
||||||
|
margin-left: -2px; |
||||||
|
} |
||||||
|
|
||||||
|
.el-menu { |
||||||
|
border: none; |
||||||
|
height: 100%; |
||||||
|
width: 100% !important; |
||||||
|
} |
||||||
|
|
||||||
|
// menu hover |
||||||
|
.submenu-title-noDropdown, |
||||||
|
.el-submenu__title { |
||||||
|
&:hover { |
||||||
|
background-color: $menuHover !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.is-active>.el-submenu__title { |
||||||
|
color: $subMenuActiveText !important; |
||||||
|
} |
||||||
|
|
||||||
|
& .nest-menu .el-submenu>.el-submenu__title, |
||||||
|
& .el-submenu .el-menu-item { |
||||||
|
min-width: $sideBarWidth !important; |
||||||
|
background-color: $subMenuBg !important; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
background-color: $subMenuHover !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.hideSidebar { |
||||||
|
.sidebar-container { |
||||||
|
width: 54px !important; |
||||||
|
} |
||||||
|
|
||||||
|
.main-container { |
||||||
|
margin-left: 54px; |
||||||
|
} |
||||||
|
|
||||||
|
.submenu-title-noDropdown { |
||||||
|
padding: 0 !important; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.el-tooltip { |
||||||
|
padding: 0 !important; |
||||||
|
|
||||||
|
.svg-icon { |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.sub-el-icon { |
||||||
|
margin-left: 19px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.el-submenu { |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
&>.el-submenu__title { |
||||||
|
padding: 0 !important; |
||||||
|
|
||||||
|
.svg-icon { |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.sub-el-icon { |
||||||
|
margin-left: 19px; |
||||||
|
} |
||||||
|
|
||||||
|
.el-submenu__icon-arrow { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.el-menu--collapse { |
||||||
|
.el-submenu { |
||||||
|
&>.el-submenu__title { |
||||||
|
&>span { |
||||||
|
height: 0; |
||||||
|
width: 0; |
||||||
|
overflow: hidden; |
||||||
|
visibility: hidden; |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.el-menu--collapse .el-menu .el-submenu { |
||||||
|
min-width: $sideBarWidth !important; |
||||||
|
} |
||||||
|
|
||||||
|
// mobile responsive |
||||||
|
.mobile { |
||||||
|
.main-container { |
||||||
|
margin-left: 0px; |
||||||
|
} |
||||||
|
|
||||||
|
.sidebar-container { |
||||||
|
transition: transform .28s; |
||||||
|
width: $sideBarWidth !important; |
||||||
|
} |
||||||
|
|
||||||
|
&.hideSidebar { |
||||||
|
.sidebar-container { |
||||||
|
pointer-events: none; |
||||||
|
transition-duration: 0.3s; |
||||||
|
transform: translate3d(-$sideBarWidth, 0, 0); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.withoutAnimation { |
||||||
|
|
||||||
|
.main-container, |
||||||
|
.sidebar-container { |
||||||
|
transition: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// when menu collapsed |
||||||
|
.el-menu--vertical { |
||||||
|
&>.el-menu { |
||||||
|
.svg-icon { |
||||||
|
margin-right: 16px; |
||||||
|
} |
||||||
|
.sub-el-icon { |
||||||
|
margin-right: 12px; |
||||||
|
margin-left: -2px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.nest-menu .el-submenu>.el-submenu__title, |
||||||
|
.el-menu-item { |
||||||
|
&:hover { |
||||||
|
// you can use $subMenuHover |
||||||
|
background-color: $menuHover !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// the scroll bar appears when the subMenu is too long |
||||||
|
>.el-menu--popup { |
||||||
|
max-height: 100vh; |
||||||
|
overflow-y: auto; |
||||||
|
|
||||||
|
&::-webkit-scrollbar-track-piece { |
||||||
|
background: #d3dce6; |
||||||
|
} |
||||||
|
|
||||||
|
&::-webkit-scrollbar { |
||||||
|
width: 6px; |
||||||
|
} |
||||||
|
|
||||||
|
&::-webkit-scrollbar-thumb { |
||||||
|
background: #99a9bf; |
||||||
|
border-radius: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,48 @@ |
|||||||
|
// global transition css |
||||||
|
|
||||||
|
/* fade */ |
||||||
|
.fade-enter-active, |
||||||
|
.fade-leave-active { |
||||||
|
transition: opacity 0.28s; |
||||||
|
} |
||||||
|
|
||||||
|
.fade-enter, |
||||||
|
.fade-leave-active { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
/* fade-transform */ |
||||||
|
.fade-transform-leave-active, |
||||||
|
.fade-transform-enter-active { |
||||||
|
transition: all .5s; |
||||||
|
} |
||||||
|
|
||||||
|
.fade-transform-enter { |
||||||
|
opacity: 0; |
||||||
|
transform: translateX(-30px); |
||||||
|
} |
||||||
|
|
||||||
|
.fade-transform-leave-to { |
||||||
|
opacity: 0; |
||||||
|
transform: translateX(30px); |
||||||
|
} |
||||||
|
|
||||||
|
/* breadcrumb transition */ |
||||||
|
.breadcrumb-enter-active, |
||||||
|
.breadcrumb-leave-active { |
||||||
|
transition: all .5s; |
||||||
|
} |
||||||
|
|
||||||
|
.breadcrumb-enter, |
||||||
|
.breadcrumb-leave-active { |
||||||
|
opacity: 0; |
||||||
|
transform: translateX(20px); |
||||||
|
} |
||||||
|
|
||||||
|
.breadcrumb-move { |
||||||
|
transition: all .5s; |
||||||
|
} |
||||||
|
|
||||||
|
.breadcrumb-leave-active { |
||||||
|
position: absolute; |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
// sidebar |
||||||
|
$menuText:#bfcbd9; |
||||||
|
$menuActiveText:#409EFF; |
||||||
|
$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 |
||||||
|
|
||||||
|
$menuBg:#304156; |
||||||
|
$menuHover:#263445; |
||||||
|
|
||||||
|
$subMenuBg:#1f2d3d; |
||||||
|
$subMenuHover:#001528; |
||||||
|
|
||||||
|
$sideBarWidth: 210px; |
||||||
|
|
||||||
|
// the :export directive is the magic sauce for webpack |
||||||
|
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass |
||||||
|
:export { |
||||||
|
menuText: $menuText; |
||||||
|
menuActiveText: $menuActiveText; |
||||||
|
subMenuActiveText: $subMenuActiveText; |
||||||
|
menuBg: $menuBg; |
||||||
|
menuHover: $menuHover; |
||||||
|
subMenuBg: $subMenuBg; |
||||||
|
subMenuHover: $subMenuHover; |
||||||
|
sideBarWidth: $sideBarWidth; |
||||||
|
} |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
import Cookies from 'js-cookie' |
||||||
|
|
||||||
|
const TokenKey = 'vue_admin_template_token' |
||||||
|
|
||||||
|
export function getToken() { |
||||||
|
return Cookies.get(TokenKey) |
||||||
|
} |
||||||
|
|
||||||
|
export function setToken(token) { |
||||||
|
return Cookies.set(TokenKey, token) |
||||||
|
} |
||||||
|
|
||||||
|
export function removeToken() { |
||||||
|
return Cookies.remove(TokenKey) |
||||||
|
} |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
import defaultSettings from '@/settings' |
||||||
|
|
||||||
|
const title = defaultSettings.title || 'Vue Admin Template' |
||||||
|
|
||||||
|
export default function getPageTitle(pageTitle) { |
||||||
|
if (pageTitle) { |
||||||
|
return `${pageTitle} - ${title}` |
||||||
|
} |
||||||
|
return `${title}` |
||||||
|
} |
||||||
@ -0,0 +1,117 @@ |
|||||||
|
/** |
||||||
|
* Created by PanJiaChen on 16/11/18. |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* Parse the time to string |
||||||
|
* @param {(Object|string|number)} time |
||||||
|
* @param {string} cFormat |
||||||
|
* @returns {string | null} |
||||||
|
*/ |
||||||
|
export function parseTime(time, cFormat) { |
||||||
|
if (arguments.length === 0 || !time) { |
||||||
|
return null |
||||||
|
} |
||||||
|
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}' |
||||||
|
let date |
||||||
|
if (typeof time === 'object') { |
||||||
|
date = time |
||||||
|
} else { |
||||||
|
if ((typeof time === 'string')) { |
||||||
|
if ((/^[0-9]+$/.test(time))) { |
||||||
|
// support "1548221490638"
|
||||||
|
time = parseInt(time) |
||||||
|
} else { |
||||||
|
// support safari
|
||||||
|
// https://stackoverflow.com/questions/4310953/invalid-date-in-safari
|
||||||
|
time = time.replace(new RegExp(/-/gm), '/') |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if ((typeof time === 'number') && (time.toString().length === 10)) { |
||||||
|
time = time * 1000 |
||||||
|
} |
||||||
|
date = new Date(time) |
||||||
|
} |
||||||
|
const formatObj = { |
||||||
|
y: date.getFullYear(), |
||||||
|
m: date.getMonth() + 1, |
||||||
|
d: date.getDate(), |
||||||
|
h: date.getHours(), |
||||||
|
i: date.getMinutes(), |
||||||
|
s: date.getSeconds(), |
||||||
|
a: date.getDay() |
||||||
|
} |
||||||
|
const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => { |
||||||
|
const value = formatObj[key] |
||||||
|
// Note: getDay() returns 0 on Sunday
|
||||||
|
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] } |
||||||
|
return value.toString().padStart(2, '0') |
||||||
|
}) |
||||||
|
return time_str |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* @param {number} time |
||||||
|
* @param {string} option |
||||||
|
* @returns {string} |
||||||
|
*/ |
||||||
|
export function formatTime(time, option) { |
||||||
|
if (('' + time).length === 10) { |
||||||
|
time = parseInt(time) * 1000 |
||||||
|
} else { |
||||||
|
time = +time |
||||||
|
} |
||||||
|
const d = new Date(time) |
||||||
|
const now = Date.now() |
||||||
|
|
||||||
|
const diff = (now - d) / 1000 |
||||||
|
|
||||||
|
if (diff < 30) { |
||||||
|
return '刚刚' |
||||||
|
} else if (diff < 3600) { |
||||||
|
// less 1 hour
|
||||||
|
return Math.ceil(diff / 60) + '分钟前' |
||||||
|
} else if (diff < 3600 * 24) { |
||||||
|
return Math.ceil(diff / 3600) + '小时前' |
||||||
|
} else if (diff < 3600 * 24 * 2) { |
||||||
|
return '1天前' |
||||||
|
} |
||||||
|
if (option) { |
||||||
|
return parseTime(time, option) |
||||||
|
} else { |
||||||
|
return ( |
||||||
|
d.getMonth() + |
||||||
|
1 + |
||||||
|
'月' + |
||||||
|
d.getDate() + |
||||||
|
'日' + |
||||||
|
d.getHours() + |
||||||
|
'时' + |
||||||
|
d.getMinutes() + |
||||||
|
'分' |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* @param {string} url |
||||||
|
* @returns {Object} |
||||||
|
*/ |
||||||
|
export function param2Obj(url) { |
||||||
|
const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ') |
||||||
|
if (!search) { |
||||||
|
return {} |
||||||
|
} |
||||||
|
const obj = {} |
||||||
|
const searchArr = search.split('&') |
||||||
|
searchArr.forEach(v => { |
||||||
|
const index = v.indexOf('=') |
||||||
|
if (index !== -1) { |
||||||
|
const name = v.substring(0, index) |
||||||
|
const val = v.substring(index + 1, v.length) |
||||||
|
obj[name] = val |
||||||
|
} |
||||||
|
}) |
||||||
|
return obj |
||||||
|
} |
||||||
@ -0,0 +1,85 @@ |
|||||||
|
import axios from 'axios' |
||||||
|
import { MessageBox, Message } from 'element-ui' |
||||||
|
import store from '@/store' |
||||||
|
import { getToken } from '@/utils/auth' |
||||||
|
|
||||||
|
// create an axios instance
|
||||||
|
const service = axios.create({ |
||||||
|
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
|
||||||
|
withCredentials: true, // send cookies when cross-domain requests
|
||||||
|
timeout: 5000 // request timeout
|
||||||
|
}) |
||||||
|
|
||||||
|
// request interceptor
|
||||||
|
service.interceptors.request.use( |
||||||
|
config => { |
||||||
|
// do something before request is sent
|
||||||
|
|
||||||
|
if (store.getters.token) { |
||||||
|
// let each request carry token
|
||||||
|
// ['X-Token'] is a custom headers key
|
||||||
|
// please modify it according to the actual situation
|
||||||
|
config.headers['X-Token'] = getToken() |
||||||
|
} |
||||||
|
return config |
||||||
|
}, |
||||||
|
error => { |
||||||
|
// do something with request error
|
||||||
|
console.log(error) // for debug
|
||||||
|
return Promise.reject(error) |
||||||
|
} |
||||||
|
) |
||||||
|
|
||||||
|
// response interceptor
|
||||||
|
service.interceptors.response.use( |
||||||
|
/** |
||||||
|
* If you want to get http information such as headers or status |
||||||
|
* Please return response => response |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* Determine the request status by custom code |
||||||
|
* Here is just an example |
||||||
|
* You can also judge the status by HTTP Status Code |
||||||
|
*/ |
||||||
|
response => { |
||||||
|
const res = response.data |
||||||
|
|
||||||
|
// if the custom code is not 20000, it is judged as an error.
|
||||||
|
if (res.code !== 1000) { |
||||||
|
Message({ |
||||||
|
message: res.msg || 'Error', |
||||||
|
type: 'error', |
||||||
|
duration: 5 * 1000 |
||||||
|
}) |
||||||
|
|
||||||
|
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
|
||||||
|
if (res.code === 50008 || res.code === 50012 || res.code === 50014) { |
||||||
|
// to re-login
|
||||||
|
MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', { |
||||||
|
confirmButtonText: 'Re-Login', |
||||||
|
cancelButtonText: 'Cancel', |
||||||
|
type: 'warning' |
||||||
|
}).then(() => { |
||||||
|
store.dispatch('user/resetToken').then(() => { |
||||||
|
location.reload() |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
return Promise.reject(new Error(res.msg || 'Error')) |
||||||
|
} else { |
||||||
|
return res |
||||||
|
} |
||||||
|
}, |
||||||
|
error => { |
||||||
|
console.log('err' + error) // for debug
|
||||||
|
Message({ |
||||||
|
message: error.message, |
||||||
|
type: 'error', |
||||||
|
duration: 5 * 1000 |
||||||
|
}) |
||||||
|
return Promise.reject(error) |
||||||
|
} |
||||||
|
) |
||||||
|
|
||||||
|
export default service |
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue