From 906104ed750a8d1da12d80330160cc4dca6cd6f5 Mon Sep 17 00:00:00 2001 From: bigrocs Date: Fri, 27 Sep 2019 10:12:36 +0800 Subject: [PATCH 01/10] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20electron-vue=20?= =?UTF-8?q?=E5=88=B0=E6=9C=80=E6=96=B0=E7=89=88=E6=9C=AC=20=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=20vue-admin-template=20=E7=89=88=E6=9C=AC=20=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=20jsx=20=E8=AF=AD=E6=B3=95=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .babelrc | 11 +- .electron-vue/build.js | 4 +- .electron-vue/dev-runner.js | 32 ++-- .electron-vue/webpack.renderer.config.js | 26 ++- .electron-vue/webpack.web.config.js | 26 ++- .eslintignore | 5 +- .eslintrc.js | 6 +- .gitignore | 3 +- .travis.yml | 7 + README.md | 26 +-- appveyor.yml | 4 +- package.json | 118 ++++++++----- src/index.ejs | 8 +- src/main/index.dev.js | 5 +- src/main/index.js | 2 + src/renderer/App.vue | 11 +- src/renderer/api/{login.js => user.js} | 7 +- src/renderer/assets/.gitkeep | 0 src/renderer/components/Breadcrumb/index.vue | 65 +++++-- src/renderer/components/Hamburger/index.vue | 44 ++--- src/renderer/components/ScrollBar/index.vue | 57 ------ src/renderer/components/SvgIcon/index.vue | 28 ++- src/renderer/icons/index.js | 4 +- src/renderer/icons/svg/dashboard.svg | 1 + src/renderer/icons/svg/example.svg | 2 +- src/renderer/icons/svg/eye-open.svg | 1 + src/renderer/icons/svg/eye.svg | 2 +- src/renderer/icons/svg/form.svg | 2 +- src/renderer/icons/svg/link.svg | 1 + src/renderer/icons/svg/nested.svg | 1 + src/renderer/icons/svg/password.svg | 2 +- src/renderer/icons/svg/table.svg | 2 +- src/renderer/icons/svg/tree.svg | 2 +- src/renderer/icons/svg/user.svg | 2 +- src/renderer/icons/svgo.yml | 22 +++ src/renderer/layout/components/AppMain.vue | 40 +++++ src/renderer/layout/components/Navbar.vue | 139 +++++++++++++++ .../layout/components/Sidebar/FixiOSBug.js | 26 +++ .../layout/components/Sidebar/Item.vue | 29 +++ .../layout/components/Sidebar/Link.vue | 36 ++++ .../layout/components/Sidebar/Logo.vue | 82 +++++++++ .../layout/components/Sidebar/SidebarItem.vue | 95 ++++++++++ .../layout/components/Sidebar/index.vue | 56 ++++++ .../{views => }/layout/components/index.js | 0 src/renderer/layout/index.vue | 93 ++++++++++ src/renderer/layout/mixin/ResizeHandler.js | 45 +++++ src/renderer/main.js | 13 +- src/renderer/permission.js | 60 +++++-- src/renderer/router/index.js | 145 ++++++++++++--- src/renderer/rpc/table.js | 14 ++ src/renderer/settings.js | 16 ++ src/renderer/store/getters.js | 3 +- src/renderer/store/index.js | 6 +- src/renderer/store/modules/app.js | 72 ++++---- src/renderer/store/modules/settings.js | 30 ++++ src/renderer/store/modules/user.js | 162 ++++++++--------- src/renderer/styles/element-ui.scss | 21 ++- src/renderer/styles/index.scss | 24 ++- src/renderer/styles/mixin.scss | 3 +- src/renderer/styles/sidebar.scss | 166 ++++++++++++++---- src/renderer/styles/transition.scss | 22 ++- src/renderer/styles/variables.scss | 25 ++- src/renderer/utils/auth.js | 2 +- src/renderer/utils/get-page-title.js | 10 ++ src/renderer/utils/index.js | 64 ++++++- src/renderer/utils/request.js | 76 +++++--- src/renderer/utils/validate.js | 41 ++--- src/renderer/views/404.vue | 47 +++-- src/renderer/views/dashboard/index.vue | 10 +- src/renderer/views/form/index.vue | 28 +-- src/renderer/views/layout/Layout.vue | 49 ------ .../views/layout/components/AppMain.vue | 19 -- .../views/layout/components/Navbar.vue | 94 ---------- .../layout/components/Sidebar/SidebarItem.vue | 59 ------- .../views/layout/components/Sidebar/index.vue | 36 ---- .../views/layout/mixin/ResizeHandler.js | 41 ----- src/renderer/views/login/index.vue | 161 +++++++++++------ src/renderer/views/nested/menu1/index.vue | 7 + .../views/nested/menu1/menu1-1/index.vue | 7 + .../views/nested/menu1/menu1-2/index.vue | 7 + .../nested/menu1/menu1-2/menu1-2-1/index.vue | 5 + .../nested/menu1/menu1-2/menu1-2-2/index.vue | 5 + .../views/nested/menu1/menu1-3/index.vue | 5 + src/renderer/views/nested/menu2/index.vue | 5 + src/renderer/views/table/index.vue | 39 ++-- src/renderer/views/tree/index.vue | 35 ++-- 86 files changed, 1894 insertions(+), 920 deletions(-) rename src/renderer/api/{login.js => user.js} (78%) create mode 100644 src/renderer/assets/.gitkeep delete mode 100644 src/renderer/components/ScrollBar/index.vue create mode 100644 src/renderer/icons/svg/dashboard.svg create mode 100644 src/renderer/icons/svg/eye-open.svg create mode 100644 src/renderer/icons/svg/link.svg create mode 100644 src/renderer/icons/svg/nested.svg create mode 100644 src/renderer/icons/svgo.yml create mode 100644 src/renderer/layout/components/AppMain.vue create mode 100644 src/renderer/layout/components/Navbar.vue create mode 100644 src/renderer/layout/components/Sidebar/FixiOSBug.js create mode 100644 src/renderer/layout/components/Sidebar/Item.vue create mode 100644 src/renderer/layout/components/Sidebar/Link.vue create mode 100644 src/renderer/layout/components/Sidebar/Logo.vue create mode 100644 src/renderer/layout/components/Sidebar/SidebarItem.vue create mode 100644 src/renderer/layout/components/Sidebar/index.vue rename src/renderer/{views => }/layout/components/index.js (100%) create mode 100644 src/renderer/layout/index.vue create mode 100644 src/renderer/layout/mixin/ResizeHandler.js create mode 100644 src/renderer/rpc/table.js create mode 100644 src/renderer/settings.js create mode 100644 src/renderer/store/modules/settings.js create mode 100644 src/renderer/utils/get-page-title.js delete mode 100644 src/renderer/views/layout/Layout.vue delete mode 100644 src/renderer/views/layout/components/AppMain.vue delete mode 100644 src/renderer/views/layout/components/Navbar.vue delete mode 100644 src/renderer/views/layout/components/Sidebar/SidebarItem.vue delete mode 100644 src/renderer/views/layout/components/Sidebar/index.vue delete mode 100644 src/renderer/views/layout/mixin/ResizeHandler.js create mode 100644 src/renderer/views/nested/menu1/index.vue create mode 100644 src/renderer/views/nested/menu1/menu1-1/index.vue create mode 100644 src/renderer/views/nested/menu1/menu1-2/index.vue create mode 100644 src/renderer/views/nested/menu1/menu1-2/menu1-2-1/index.vue create mode 100644 src/renderer/views/nested/menu1/menu1-2/menu1-2-2/index.vue create mode 100644 src/renderer/views/nested/menu1/menu1-3/index.vue create mode 100644 src/renderer/views/nested/menu2/index.vue diff --git a/.babelrc b/.babelrc index b10dbaf..706817f 100644 --- a/.babelrc +++ b/.babelrc @@ -1,6 +1,15 @@ { "comments": false, "env": { + "test": { + "presets": [ + ["env", { + "targets": { "node": 7 } + }], + "stage-0" + ], + "plugins": ["istanbul"] + }, "main": { "presets": [ ["env", { @@ -26,5 +35,5 @@ ] } }, - "plugins": ["transform-runtime"] + "plugins": ["transform-runtime", "transform-vue-jsx"] } diff --git a/.electron-vue/build.js b/.electron-vue/build.js index 2d96f17..2455fbc 100644 --- a/.electron-vue/build.js +++ b/.electron-vue/build.js @@ -72,6 +72,7 @@ function build () { function pack (config) { return new Promise((resolve, reject) => { + config.mode = 'production' webpack(config, (err, stats) => { if (err) reject(err.stack || err) else if (stats.hasErrors()) { @@ -99,6 +100,7 @@ function pack (config) { function web () { del.sync(['dist/web/*', '!.gitkeep']) + webConfig.mode = 'production' webpack(webConfig, (err, stats) => { if (err || stats.hasErrors()) console.log(err) @@ -127,4 +129,4 @@ function greeting () { }) } else console.log(chalk.yellow.bold('\n lets-build')) console.log() -} +} \ No newline at end of file diff --git a/.electron-vue/dev-runner.js b/.electron-vue/dev-runner.js index 3903901..51633de 100644 --- a/.electron-vue/dev-runner.js +++ b/.electron-vue/dev-runner.js @@ -41,21 +41,21 @@ function logStats (proc, data) { function startRenderer () { return new Promise((resolve, reject) => { rendererConfig.entry.renderer = [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry.renderer) - + rendererConfig.mode = 'development' const compiler = webpack(rendererConfig) - hotMiddleware = webpackHotMiddleware(compiler, { - log: false, - heartbeat: 2500 + hotMiddleware = webpackHotMiddleware(compiler, { + log: false, + heartbeat: 2500 }) - compiler.plugin('compilation', compilation => { - compilation.plugin('html-webpack-plugin-after-emit', (data, cb) => { + compiler.hooks.compilation.tap('compilation', compilation => { + compilation.hooks.htmlWebpackPluginAfterEmit.tapAsync('html-webpack-plugin-after-emit', (data, cb) => { hotMiddleware.publish({ action: 'reload' }) cb() }) }) - compiler.plugin('done', stats => { + compiler.hooks.done.tap('done', stats => { logStats('Renderer', stats) }) @@ -80,10 +80,10 @@ function startRenderer () { function startMain () { return new Promise((resolve, reject) => { mainConfig.entry.main = [path.join(__dirname, '../src/main/index.dev.js')].concat(mainConfig.entry.main) - + mainConfig.mode = 'development' const compiler = webpack(mainConfig) - compiler.plugin('watch-run', (compilation, done) => { + compiler.hooks.watchRun.tapAsync('watch-run', (compilation, done) => { logStats('Main', chalk.white.bold('compiling...')) hotMiddleware.publish({ action: 'compiling' }) done() @@ -114,8 +114,20 @@ function startMain () { } function startElectron () { - electronProcess = spawn(electron, ['--inspect=5858', path.join(__dirname, '../dist/electron/main.js')]) + var args = [ + '--inspect=5858', + path.join(__dirname, '../dist/electron/main.js') + ] + // detect yarn or npm and process commandline args accordingly + if (process.env.npm_execpath.endsWith('yarn.js')) { + args = args.concat(process.argv.slice(3)) + } else if (process.env.npm_execpath.endsWith('npm-cli.js')) { + args = args.concat(process.argv.slice(2)) + } + + electronProcess = spawn(electron, args) + electronProcess.stdout.on('data', data => { electronLog(data, 'blue') }) diff --git a/.electron-vue/webpack.renderer.config.js b/.electron-vue/webpack.renderer.config.js index 7f35705..0b39849 100644 --- a/.electron-vue/webpack.renderer.config.js +++ b/.electron-vue/webpack.renderer.config.js @@ -9,8 +9,9 @@ const config = require('../config/index.js') const BabiliWebpackPlugin = require('babili-webpack-plugin') const CopyWebpackPlugin = require('copy-webpack-plugin') -const ExtractTextPlugin = require('extract-text-webpack-plugin') +const MiniCssExtractPlugin = require('mini-css-extract-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') +const { VueLoaderPlugin } = require('vue-loader') /** * List of node_modules to include in webpack bundle @@ -42,12 +43,21 @@ let rendererConfig = { } } }, + { + test: /\.scss$/, + use: ['vue-style-loader', 'css-loader', 'sass-loader'] + }, + { + test: /\.sass$/, + use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax'] + }, + { + test: /\.less$/, + use: ['vue-style-loader', 'css-loader', 'less-loader'] + }, { test: /\.css$/, - use: ExtractTextPlugin.extract({ - fallback: 'style-loader', - use: 'css-loader' - }) + use: ['vue-style-loader', 'css-loader'] }, { test: /\.html$/, @@ -70,7 +80,8 @@ let rendererConfig = { extractCSS: process.env.NODE_ENV === 'production', loaders: { sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1', - scss: 'vue-style-loader!css-loader!sass-loader' + scss: 'vue-style-loader!css-loader!sass-loader', + less: 'vue-style-loader!css-loader!less-loader' } } } @@ -119,7 +130,8 @@ let rendererConfig = { __filename: process.env.NODE_ENV !== 'production' }, plugins: [ - new ExtractTextPlugin('styles.css'), + new VueLoaderPlugin(), + new MiniCssExtractPlugin({filename: 'styles.css'}), new webpack.DefinePlugin({ 'process.env': process.env.NODE_ENV === 'production' ? config.build.env : config.dev.env }), diff --git a/.electron-vue/webpack.web.config.js b/.electron-vue/webpack.web.config.js index 010883a..bde6701 100644 --- a/.electron-vue/webpack.web.config.js +++ b/.electron-vue/webpack.web.config.js @@ -7,8 +7,9 @@ const webpack = require('webpack') const BabiliWebpackPlugin = require('babili-webpack-plugin') const CopyWebpackPlugin = require('copy-webpack-plugin') -const ExtractTextPlugin = require('extract-text-webpack-plugin') +const MiniCssExtractPlugin = require('mini-css-extract-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') +const { VueLoaderPlugin } = require('vue-loader') let webConfig = { devtool: '#cheap-module-eval-source-map', @@ -28,12 +29,21 @@ let webConfig = { } } }, + { + test: /\.scss$/, + use: ['vue-style-loader', 'css-loader', 'sass-loader'] + }, + { + test: /\.sass$/, + use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax'] + }, + { + test: /\.less$/, + use: ['vue-style-loader', 'css-loader', 'less-loader'] + }, { test: /\.css$/, - use: ExtractTextPlugin.extract({ - fallback: 'style-loader', - use: 'css-loader' - }) + use: ['vue-style-loader', 'css-loader'] }, { test: /\.html$/, @@ -53,7 +63,8 @@ let webConfig = { extractCSS: true, loaders: { sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1', - scss: 'vue-style-loader!css-loader!sass-loader' + scss: 'vue-style-loader!css-loader!sass-loader', + less: 'vue-style-loader!css-loader!less-loader' } } } @@ -81,7 +92,8 @@ let webConfig = { ] }, plugins: [ - new ExtractTextPlugin('styles.css'), + new VueLoaderPlugin(), + new MiniCssExtractPlugin({filename: 'styles.css'}), new HtmlWebpackPlugin({ filename: 'index.html', template: path.resolve(__dirname, '../src/index.ejs'), diff --git a/.eslintignore b/.eslintignore index e7eedd9..3df917c 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,3 +1,6 @@ +test/unit/coverage/** +test/unit/*.js +test/e2e/*.js build/*.js src/renderer/assets/** -dist/** +dist/** \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js index 54790a4..f2508b8 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -10,7 +10,9 @@ module.exports = { es6: true, }, extends: 'eslint:recommended', - // required to lint *.vue files + globals: { + __static: true + }, plugins: [ 'html' ], @@ -22,8 +24,6 @@ module.exports = { } } }, - // add your custom rules here - //it is base on https://github.com/vuejs/eslint-config-vue rules: { 'accessor-pairs': 2, 'arrow-spacing': [2, { diff --git a/.gitignore b/.gitignore index e875f8e..cdcb9eb 100644 --- a/.gitignore +++ b/.gitignore @@ -3,9 +3,10 @@ dist/electron/* dist/web/* build/* !build/icons -package-lock.json +coverage node_modules/ npm-debug.log npm-debug.log.* thumbs.db !.gitkeep +yarn.lock diff --git a/.travis.yml b/.travis.yml index fd14ca5..1108550 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,3 +1,5 @@ +# Commented sections below can be used to run tests on the CI server +# https://simulatedgreg.gitbooks.io/electron-vue/content/en/testing.html#on-the-subject-of-ci-testing osx_image: xcode8.3 sudo: required dist: trusty @@ -18,18 +20,23 @@ addons: packages: - libgnome-keyring-dev - icnsutils + #- xvfb before_install: - mkdir -p /tmp/git-lfs && curl -L https://github.com/github/git-lfs/releases/download/v1.2.1/git-lfs-$([ "$TRAVIS_OS_NAME" == "linux" ] && echo "linux" || echo "darwin")-amd64-1.2.1.tar.gz | tar -xz -C /tmp/git-lfs --strip-components 1 && /tmp/git-lfs/git-lfs pull - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sudo apt-get install --no-install-recommends -y icnsutils graphicsmagick xz-utils; fi install: +#- export DISPLAY=':99.0' +#- Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 & - nvm install 7 - curl -o- -L https://yarnpkg.com/install.sh | bash - source ~/.bashrc - npm install -g xvfb-maybe - yarn script: +#- xvfb-maybe node_modules/.bin/karma start test/unit/karma.conf.js +#- yarn run pack && xvfb-maybe node_modules/.bin/mocha test/e2e - yarn run build branches: only: diff --git a/README.md b/README.md index 38694fa..5f1364c 100644 --- a/README.md +++ b/README.md @@ -2,9 +2,7 @@ > An electron-vue project -This is a vue electron admin project base on [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template) , and was generated from [electron-vue](https://github.com/SimulatedGREG/electron-vue) using [vue-cli](https://github.com/vuejs/vue-cli). Documentation about this project can be found [here](https://simulatedgreg.gitbooks.io/electron-vue/content/index.html). - -## Build Setup +#### Build Setup ``` bash # install dependencies @@ -13,24 +11,18 @@ npm install # serve with hot reload at localhost:9080 npm run dev -# build electron app for production +# build electron application for production npm run build -# lint all JS/Vue component files in `app/src` +# run unit & end-to-end tests +npm test + + +# lint all JS/Vue component files in `src/` npm run lint -# run webpack in production -npm run pack ``` + --- - -## Demo - -![](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/electron-login.png) - -![](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/electron-admin.gif) - - -## Download -Mac: [app release](https://github.com/PanJiaChen/electron-vue-admin/releases/tag/v3.0.0) +This project was generated with [electron-vue](https://github.com/SimulatedGREG/electron-vue) using [vue-cli](https://github.com/vuejs/vue-cli). Documentation about the original structure can be found [here](https://simulatedgreg.gitbooks.io/electron-vue/content/index.html). diff --git a/appveyor.yml b/appveyor.yml index 2056cd1..bd9cad7 100644 --- a/appveyor.yml +++ b/appveyor.yml @@ -1,3 +1,5 @@ +# Commented sections below can be used to run tests on the CI server +# https://simulatedgreg.gitbooks.io/electron-vue/content/en/testing.html#on-the-subject-of-ci-testing version: 0.1.{build} branches: @@ -19,12 +21,12 @@ init: install: - ps: Install-Product node 8 x64 - - choco install yarn --ignore-dependencies - git reset --hard HEAD - yarn - node --version build_script: + #- yarn test - yarn build test: off diff --git a/package.json b/package.json index e4ae335..7ac9b5a 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "electron-vue-admin", - "version": "3.0.0", - "author": "Pan ", + "version": "0.0.2", + "author": "bigrocs ", "description": "An electron-vue project", "license": "MIT", "main": "./dist/electron/main.js", @@ -11,16 +11,19 @@ "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js", "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js", "dev": "node .electron-vue/dev-runner.js", - "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src", - "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src", + "e2e": "npm run pack && mocha test/e2e", + "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src test", + "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src test", "pack": "npm run pack:main && npm run pack:renderer", "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js", "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js", + "test": "npm run unit && npm run e2e", + "unit": "karma start test/unit/karma.conf.js", "postinstall": "npm run lint:fix" }, "build": { "productName": "electron-vue-admin", - "appId": "org.simulatedgreg.electron-vue", + "appId": "com.example.yourapp", "directories": { "output": "build" }, @@ -53,56 +56,85 @@ } }, "dependencies": { - "axios": "0.17.1", - "element-ui": "2.3.4", - "js-cookie": "^2.2.0", + "axios": "^0.19.0", + "element-ui": "2.7.2", + "js-cookie": "2.2.0", "normalize.css": "7.0.0", "nprogress": "0.2.0", - "vue": "2.5.10", + "path-to-regexp": "2.4.0", + "svgo": "^1.3.0", + "vue": "2.6.10", "vue-electron": "^1.0.6", - "vue-router": "3.0.1", - "vuex": "3.0.1" + "vue-router": "3.0.6", + "vuex": "3.1.0", + "vuex-electron": "^1.0.0" }, "devDependencies": { - "babel-core": "^6.25.0", - "babel-loader": "^7.1.1", + "ajv": "^6.5.0", + "babel-core": "^6.26.3", + "babel-eslint": "^8.2.3", + "babel-helper-vue-jsx-merge-props": "^2.0.3", + "babel-loader": "^7.1.4", + "babel-plugin-istanbul": "^4.1.6", + "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-runtime": "^6.23.0", - "babel-preset-env": "^1.6.0", + "babel-plugin-transform-vue-jsx": "^3.7.0", + "babel-preset-env": "^1.7.0", "babel-preset-stage-0": "^6.24.1", - "babel-register": "^6.24.1", + "babel-register": "^6.26.0", "babili-webpack-plugin": "^0.1.2", - "cfonts": "^1.1.3", - "chalk": "^2.1.0", - "copy-webpack-plugin": "^4.0.1", - "cross-env": "^5.0.5", - "css-loader": "^0.28.4", + "cfonts": "^2.1.2", + "chai": "^4.1.2", + "chalk": "^2.4.1", + "copy-webpack-plugin": "^4.5.1", + "cross-env": "^5.1.6", + "css-loader": "^0.28.11", "del": "^3.0.0", "devtron": "^1.4.0", - "electron": "^1.7.5", - "electron-debug": "^1.4.0", - "electron-devtools-installer": "^2.2.0", - "electron-builder": "^19.19.1", - "babel-eslint": "^7.2.3", - "eslint": "^4.4.1", - "eslint-friendly-formatter": "^3.0.0", - "eslint-loader": "^1.9.0", - "eslint-plugin-html": "^3.1.1", - "extract-text-webpack-plugin": "^3.0.0", - "file-loader": "^0.11.2", - "html-webpack-plugin": "^2.30.1", + "electron": "^2.0.4", + "electron-builder": "^20.19.2", + "electron-debug": "^1.5.0", + "electron-devtools-installer": "^2.2.4", + "electron-rebuild": "^1.8.6", + "eslint": "^4.19.1", + "eslint-config-standard": "^11.0.0", + "eslint-friendly-formatter": "^4.0.1", + "eslint-loader": "^2.0.0", + "eslint-plugin-html": "^4.0.3", + "eslint-plugin-import": "^2.12.0", + "eslint-plugin-node": "^6.0.1", + "eslint-plugin-promise": "^3.8.0", + "eslint-plugin-standard": "^3.1.0", + "file-loader": "^1.1.11", + "html-webpack-plugin": "^3.2.0", + "inject-loader": "^4.0.1", + "karma": "^2.0.2", + "karma-chai": "^0.1.0", + "karma-coverage": "^1.1.2", + "karma-electron": "^6.0.0", + "karma-mocha": "^1.3.0", + "karma-sourcemap-loader": "^0.3.7", + "karma-spec-reporter": "^0.0.32", + "karma-webpack": "^3.0.0", + "mini-css-extract-plugin": "0.4.0", + "mocha": "^5.2.0", "multispinner": "^0.2.1", "node-loader": "^0.6.0", - "node-sass": "^4.7.2", - "style-loader": "^0.18.2", - "sass-loader": "6.0.6", - "svg-sprite-loader": "3.5.2", - "url-loader": "^0.5.9", + "node-sass": "^4.9.2", + "require-dir": "^1.0.0", + "sass-loader": "^7.0.3", + "spectron": "^3.8.0", + "style-loader": "^0.21.0", + "svg-sprite-loader": "^4.1.6", + "url-loader": "^1.0.1", "vue-html-loader": "^1.2.4", - "vue-loader": "^13.0.5", - "vue-style-loader": "^3.0.1", - "vue-template-compiler": "2.5.10", - "webpack": "^3.5.2", - "webpack-dev-server": "^2.7.1", - "webpack-hot-middleware": "^2.18.2" + "vue-loader": "^15.2.4", + "vue-style-loader": "^4.1.0", + "vue-template-compiler": "^2.5.16", + "webpack": "^4.15.1", + "webpack-cli": "^3.0.8", + "webpack-dev-server": "^3.1.4", + "webpack-hot-middleware": "^2.22.2", + "webpack-merge": "^4.1.3" } } diff --git a/src/index.ejs b/src/index.ejs index 5d04cd6..83548ab 100644 --- a/src/index.ejs +++ b/src/index.ejs @@ -13,9 +13,11 @@
- + <% if (!process.browser) { %> + + <% } %> diff --git a/src/main/index.dev.js b/src/main/index.dev.js index ae70ccf..1d10bc4 100644 --- a/src/main/index.dev.js +++ b/src/main/index.dev.js @@ -7,9 +7,6 @@ /* eslint-disable */ -// Set environment for development -process.env.NODE_ENV = 'development' - // Install `electron-debug` with `devtron` require('electron-debug')({ showDevTools: true }) @@ -24,4 +21,4 @@ require('electron').app.on('ready', () => { }) // Require `main` process to boot app -require('./index') +require('./index') \ No newline at end of file diff --git a/src/main/index.js b/src/main/index.js index 0281218..0aeab3f 100644 --- a/src/main/index.js +++ b/src/main/index.js @@ -1,3 +1,5 @@ +'use strict' + import { app, BrowserWindow } from 'electron' /** diff --git a/src/renderer/App.vue b/src/renderer/App.vue index b6807c9..99257c2 100644 --- a/src/renderer/App.vue +++ b/src/renderer/App.vue @@ -5,10 +5,11 @@ - diff --git a/src/renderer/api/login.js b/src/renderer/api/user.js similarity index 78% rename from src/renderer/api/login.js rename to src/renderer/api/user.js index 3758dec..de69f70 100644 --- a/src/renderer/api/login.js +++ b/src/renderer/api/user.js @@ -1,13 +1,10 @@ import request from '@/utils/request' -export function login(username, password) { +export function login(data) { return request({ url: '/user/login', method: 'post', - data: { - username, - password - } + data }) } diff --git a/src/renderer/assets/.gitkeep b/src/renderer/assets/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/renderer/components/Breadcrumb/index.vue b/src/renderer/components/Breadcrumb/index.vue index b5d9471..29f9a04 100644 --- a/src/renderer/components/Breadcrumb/index.vue +++ b/src/renderer/components/Breadcrumb/index.vue @@ -1,19 +1,18 @@ - diff --git a/src/renderer/components/Hamburger/index.vue b/src/renderer/components/Hamburger/index.vue index fbdf72c..368b002 100644 --- a/src/renderer/components/Hamburger/index.vue +++ b/src/renderer/components/Hamburger/index.vue @@ -1,28 +1,30 @@ - - diff --git a/src/renderer/components/SvgIcon/index.vue b/src/renderer/components/SvgIcon/index.vue index e331a27..b07ded2 100644 --- a/src/renderer/components/SvgIcon/index.vue +++ b/src/renderer/components/SvgIcon/index.vue @@ -1,22 +1,30 @@ + + + + diff --git a/src/renderer/layout/components/Navbar.vue b/src/renderer/layout/components/Navbar.vue new file mode 100644 index 0000000..4953f36 --- /dev/null +++ b/src/renderer/layout/components/Navbar.vue @@ -0,0 +1,139 @@ + + + + + diff --git a/src/renderer/layout/components/Sidebar/FixiOSBug.js b/src/renderer/layout/components/Sidebar/FixiOSBug.js new file mode 100644 index 0000000..bc14856 --- /dev/null +++ b/src/renderer/layout/components/Sidebar/FixiOSBug.js @@ -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) + } + } + } + } +} diff --git a/src/renderer/layout/components/Sidebar/Item.vue b/src/renderer/layout/components/Sidebar/Item.vue new file mode 100644 index 0000000..b515f61 --- /dev/null +++ b/src/renderer/layout/components/Sidebar/Item.vue @@ -0,0 +1,29 @@ + diff --git a/src/renderer/layout/components/Sidebar/Link.vue b/src/renderer/layout/components/Sidebar/Link.vue new file mode 100644 index 0000000..eb4dd10 --- /dev/null +++ b/src/renderer/layout/components/Sidebar/Link.vue @@ -0,0 +1,36 @@ + + + + diff --git a/src/renderer/layout/components/Sidebar/Logo.vue b/src/renderer/layout/components/Sidebar/Logo.vue new file mode 100644 index 0000000..040fab6 --- /dev/null +++ b/src/renderer/layout/components/Sidebar/Logo.vue @@ -0,0 +1,82 @@ + + + + + diff --git a/src/renderer/layout/components/Sidebar/SidebarItem.vue b/src/renderer/layout/components/Sidebar/SidebarItem.vue new file mode 100644 index 0000000..38748b0 --- /dev/null +++ b/src/renderer/layout/components/Sidebar/SidebarItem.vue @@ -0,0 +1,95 @@ + + + diff --git a/src/renderer/layout/components/Sidebar/index.vue b/src/renderer/layout/components/Sidebar/index.vue new file mode 100644 index 0000000..da39034 --- /dev/null +++ b/src/renderer/layout/components/Sidebar/index.vue @@ -0,0 +1,56 @@ + + + diff --git a/src/renderer/views/layout/components/index.js b/src/renderer/layout/components/index.js similarity index 100% rename from src/renderer/views/layout/components/index.js rename to src/renderer/layout/components/index.js diff --git a/src/renderer/layout/index.vue b/src/renderer/layout/index.vue new file mode 100644 index 0000000..db22a7b --- /dev/null +++ b/src/renderer/layout/index.vue @@ -0,0 +1,93 @@ + + + + + diff --git a/src/renderer/layout/mixin/ResizeHandler.js b/src/renderer/layout/mixin/ResizeHandler.js new file mode 100644 index 0000000..e8d0df8 --- /dev/null +++ b/src/renderer/layout/mixin/ResizeHandler.js @@ -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 }) + } + } + } + } +} diff --git a/src/renderer/main.js b/src/renderer/main.js index 87a3b9f..80eec43 100644 --- a/src/renderer/main.js +++ b/src/renderer/main.js @@ -1,7 +1,7 @@ import Vue from 'vue' +import axios from 'axios' -import 'normalize.css/normalize.css'// A modern alternative to CSS resets - +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 @@ -10,15 +10,18 @@ import App from './App' import router from './router' import store from './store' +import '@/styles/index.scss' // global css import '@/icons' // icon import '@/permission' // permission control if (!process.env.IS_WEB) Vue.use(require('vue-electron')) - -Vue.use(ElementUI, { locale }) - +Vue.http = Vue.prototype.$http = axios Vue.config.productionTip = false +// set ElementUI lang to EN +Vue.use(ElementUI, { locale }) + +/* eslint-disable no-new */ new Vue({ components: { App }, router, diff --git a/src/renderer/permission.js b/src/renderer/permission.js index 3e83c1b..04d89db 100644 --- a/src/renderer/permission.js +++ b/src/renderer/permission.js @@ -1,40 +1,64 @@ import router from './router' import store from './store' -import NProgress from 'nprogress' // Progress 进度条 -import 'nprogress/nprogress.css'// Progress 进度条样式 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' -const whiteList = ['/login'] // 不重定向白名单 -router.beforeEach((to, from, next) => { +NProgress.configure({ showSpinner: false }) // NProgress Configuration + +const whiteList = ['/login'] // no redirect whitelist + +router.beforeEach(async(to, from, next) => { + // start progress bar NProgress.start() - if (store.getters.token) { + + // 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() // if current page is dashboard will not trigger afterEach hook, so manually handle it + NProgress.done() } else { - if (store.getters.roles.length === 0) { - store.dispatch('GetInfo').then(res => { // 拉取用户信息 - next() - }).catch((err) => { - store.dispatch('FedLogOut').then(() => { - Message.error(err || 'Verification failed, please login again') - next({ path: '/' }) - }) - }) - } 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 { - next('/login') + // other pages that do not have permission to access are redirected to the login page. + next(`/login?redirect=${to.path}`) NProgress.done() } } }) router.afterEach(() => { - NProgress.done() // 结束Progress + // finish progress bar + NProgress.done() }) diff --git a/src/renderer/router/index.js b/src/renderer/router/index.js index 30b8872..c4ad7ad 100644 --- a/src/renderer/router/index.js +++ b/src/renderer/router/index.js @@ -1,39 +1,57 @@ import Vue from 'vue' import Router from 'vue-router' -// in development-env not use lazy-loading, because lazy-loading too many pages will cause webpack hot update too slow. so only in production use lazy-loading; -// detail: https://panjiachen.github.io/vue-element-admin-site/#/lazy-loading +/* Layout */ +import Layout from '@/layout' Vue.use(Router) -/* Layout */ -import Layout from '../views/layout/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 (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' 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 + } + */ /** -* hidden: true if `hidden:true` will not show in the sidebar(default is false) -* alwaysShow: true if set true, will always show the root menu, whatever its child routes length -* if not set alwaysShow, only more than one route under the children -* it will becomes nested mode, otherwise not show the root menu -* redirect: noredirect if `redirect:noredirect` will no redirct in the breadcrumb -* name:'router-name' the name is used by (must set!!!) -* meta : { - title: 'title' the name show in submenu and breadcrumb (recommend set) - icon: 'svg-name' the icon show in the sidebar, - } -**/ -export const constantRouterMap = [ - { path: '/login', component: () => import('@/views/login/index'), hidden: true }, - { path: '/404', component: () => import('@/views/404'), hidden: true }, + * 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', - name: 'Dashboard', - hidden: true, children: [{ path: 'dashboard', - component: () => import('@/views/dashboard/index') + name: 'Dashboard', + component: () => import('@/views/dashboard/index'), + meta: { title: 'Dashboard', icon: 'dashboard' } }] }, @@ -72,12 +90,91 @@ export const constantRouterMap = [ ] }, + { + 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: 'External Link', icon: 'link' } + } + ] + }, + + // 404 page must be placed at the end !!! { path: '*', redirect: '/404', hidden: true } ] -export default new Router({ - // mode: 'history', //后端支持可开 +const createRouter = () => new Router({ + // mode: 'history', // require service support scrollBehavior: () => ({ y: 0 }), - routes: constantRouterMap + 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 diff --git a/src/renderer/rpc/table.js b/src/renderer/rpc/table.js new file mode 100644 index 0000000..4d922bf --- /dev/null +++ b/src/renderer/rpc/table.js @@ -0,0 +1,14 @@ +// renderer.js +var zerorpc = require('zerorpc') +var client = new zerorpc.Client() +client.connect('tcp://127.0.0.1:4242') + +export function getHello(params) { + return client.invoke('hello', name.value, (error, res) => { + if (error) { + console.error(error) + } else { + console.log(res) + } + }) +} diff --git a/src/renderer/settings.js b/src/renderer/settings.js new file mode 100644 index 0000000..60f79b2 --- /dev/null +++ b/src/renderer/settings.js @@ -0,0 +1,16 @@ +module.exports = { + + title: 'Vue Admin Electron Template', + + /** + * @type {boolean} true | false + * @description Whether fix the header + */ + fixedHeader: false, + + /** + * @type {boolean} true | false + * @description Whether show the logo in sidebar + */ + sidebarLogo: false +} diff --git a/src/renderer/store/getters.js b/src/renderer/store/getters.js index 7fbf1f4..5ab7b4c 100644 --- a/src/renderer/store/getters.js +++ b/src/renderer/store/getters.js @@ -3,7 +3,6 @@ const getters = { device: state => state.app.device, token: state => state.user.token, avatar: state => state.user.avatar, - name: state => state.user.name, - roles: state => state.user.roles + name: state => state.user.name } export default getters diff --git a/src/renderer/store/index.js b/src/renderer/store/index.js index 6b6be08..6be466a 100644 --- a/src/renderer/store/index.js +++ b/src/renderer/store/index.js @@ -1,14 +1,16 @@ import Vue from 'vue' import Vuex from 'vuex' -import app from './modules/app' -import user from './modules/user' 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 diff --git a/src/renderer/store/modules/app.js b/src/renderer/store/modules/app.js index fca558f..7ea7e33 100644 --- a/src/renderer/store/modules/app.js +++ b/src/renderer/store/modules/app.js @@ -1,42 +1,48 @@ import Cookies from 'js-cookie' -const app = { - state: { - sidebar: { - opened: !+Cookies.get('sidebarStatus'), - withoutAnimation: false - }, - device: 'desktop' +const state = { + sidebar: { + opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true, + withoutAnimation: false }, - mutations: { - TOGGLE_SIDEBAR: state => { - if (state.sidebar.opened) { - Cookies.set('sidebarStatus', 1) - } else { - Cookies.set('sidebarStatus', 0) - } - state.sidebar.opened = !state.sidebar.opened - }, - CLOSE_SIDEBAR: (state, withoutAnimation) => { + 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) - state.sidebar.opened = false - state.sidebar.withoutAnimation = withoutAnimation - }, - TOGGLE_DEVICE: (state, device) => { - state.device = device + } else { + Cookies.set('sidebarStatus', 0) } }, - actions: { - ToggleSideBar: ({ commit }) => { - commit('TOGGLE_SIDEBAR') - }, - CloseSideBar({ commit }, { withoutAnimation }) { - commit('CLOSE_SIDEBAR', withoutAnimation) - }, - ToggleDevice({ commit }, device) { - commit('TOGGLE_DEVICE', device) - } + CLOSE_SIDEBAR: (state, withoutAnimation) => { + Cookies.set('sidebarStatus', 0) + state.sidebar.opened = false + state.sidebar.withoutAnimation = withoutAnimation + }, + TOGGLE_DEVICE: (state, device) => { + state.device = device } } -export default app +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 +} diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js new file mode 100644 index 0000000..d71eff2 --- /dev/null +++ b/src/renderer/store/modules/settings.js @@ -0,0 +1,30 @@ +import defaultSettings from '@/settings' + +const { showSettings, fixedHeader, sidebarLogo } = defaultSettings + +const state = { + showSettings: showSettings, + fixedHeader: fixedHeader, + sidebarLogo: sidebarLogo +} + +const mutations = { + CHANGE_SETTING: (state, { key, value }) => { + if (state.hasOwnProperty(key)) { + state[key] = value + } + } +} + +const actions = { + changeSetting({ commit }, data) { + commit('CHANGE_SETTING', data) + } +} + +export default { + namespaced: true, + state, + mutations, + actions +} diff --git a/src/renderer/store/modules/user.js b/src/renderer/store/modules/user.js index bfba809..bdc965d 100644 --- a/src/renderer/store/modules/user.js +++ b/src/renderer/store/modules/user.js @@ -1,87 +1,89 @@ -import { login, logout, getInfo } from '@/api/login' +import { login, logout, getInfo } from '@/api/user' import { getToken, setToken, removeToken } from '@/utils/auth' +import { resetRouter } from '@/router' -const user = { - state: { - token: getToken(), - name: '', - avatar: '', - roles: [] +const state = { + token: getToken(), + name: '', + avatar: '' +} + +const mutations = { + SET_TOKEN: (state, token) => { + state.token = token }, - - mutations: { - SET_TOKEN: (state, token) => { - state.token = token - }, - SET_NAME: (state, name) => { - state.name = name - }, - SET_AVATAR: (state, avatar) => { - state.avatar = avatar - }, - SET_ROLES: (state, roles) => { - state.roles = roles - } + SET_NAME: (state, name) => { + state.name = name }, - - actions: { - // 登录 - Login({ commit }, userInfo) { - const username = userInfo.username.trim() - return new Promise((resolve, reject) => { - login(username, userInfo.password).then(response => { - const data = response.data - setToken(data.token) - commit('SET_TOKEN', data.token) - resolve() - }).catch(error => { - reject(error) - }) - }) - }, - - // 获取用户信息 - GetInfo({ commit, state }) { - return new Promise((resolve, reject) => { - getInfo(state.token).then(response => { - const data = response.data - if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组 - commit('SET_ROLES', data.roles) - } else { - reject('getInfo: roles must be a non-null array !') - } - commit('SET_NAME', data.name) - commit('SET_AVATAR', data.avatar) - resolve(response) - }).catch(error => { - reject(error) - }) - }) - }, - - // 登出 - LogOut({ commit, state }) { - return new Promise((resolve, reject) => { - logout(state.token).then(() => { - commit('SET_TOKEN', '') - commit('SET_ROLES', []) - removeToken() - resolve() - }).catch(error => { - reject(error) - }) - }) - }, - - // 前端 登出 - FedLogOut({ commit }) { - return new Promise(resolve => { - removeToken() - commit('SET_TOKEN', '') - resolve() - }) - } + SET_AVATAR: (state, avatar) => { + state.avatar = avatar } } -export default user +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 + commit('SET_TOKEN', data.token) + setToken(data.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 { name, avatar } = data + + commit('SET_NAME', name) + commit('SET_AVATAR', avatar) + resolve(data) + }).catch(error => { + reject(error) + }) + }) + }, + + // user logout + logout({ commit, state }) { + return new Promise((resolve, reject) => { + logout(state.token).then(() => { + commit('SET_TOKEN', '') + removeToken() + resetRouter() + resolve() + }).catch(error => { + reject(error) + }) + }) + }, + + // remove token + resetToken({ commit }) { + return new Promise(resolve => { + commit('SET_TOKEN', '') + removeToken() + resolve() + }) + } +} + +export default { + namespaced: true, + state, + mutations, + actions +} diff --git a/src/renderer/styles/element-ui.scss b/src/renderer/styles/element-ui.scss index ef7bb5d..6af3bfd 100644 --- a/src/renderer/styles/element-ui.scss +++ b/src/renderer/styles/element-ui.scss @@ -1,4 +1,10 @@ - //to reset element-ui default css +// cover some element-ui styles + +.el-breadcrumb__inner, +.el-breadcrumb__inner a { + font-weight: 400 !important; +} + .el-upload { input[type="file"] { display: none !important; @@ -9,7 +15,8 @@ display: none; } -//暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461 + +// to fixed https://github.com/ElemeFE/element/issues/2461 .el-dialog { transform: none; left: 0; @@ -17,13 +24,21 @@ margin: 0 auto; } -//element ui upload +// refine element ui upload .upload-container { .el-upload { width: 100%; + .el-upload-dragger { width: 100%; height: 200px; } } } + +// dropdown +.el-dropdown-menu { + a { + display: block + } +} diff --git a/src/renderer/styles/index.scss b/src/renderer/styles/index.scss index 7ab8db8..3b4da51 100644 --- a/src/renderer/styles/index.scss +++ b/src/renderer/styles/index.scss @@ -5,26 +5,32 @@ @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; } -div:focus{ - outline: none; -} - a:focus, a:active { outline: none; @@ -38,6 +44,10 @@ a:hover { text-decoration: none; } +div:focus { + outline: none; +} + .clearfix { &:after { visibility: hidden; @@ -49,11 +59,7 @@ a:hover { } } -//main-container全局样式 -.app-main{ - min-height: 100% -} - +// main-container global css .app-container { padding: 20px; } diff --git a/src/renderer/styles/mixin.scss b/src/renderer/styles/mixin.scss index 601d7a0..36b74bb 100644 --- a/src/renderer/styles/mixin.scss +++ b/src/renderer/styles/mixin.scss @@ -10,9 +10,11 @@ &::-webkit-scrollbar-track-piece { background: #d3dce6; } + &::-webkit-scrollbar { width: 6px; } + &::-webkit-scrollbar-thumb { background: #99a9bf; border-radius: 20px; @@ -24,4 +26,3 @@ width: 100%; height: 100%; } - diff --git a/src/renderer/styles/sidebar.scss b/src/renderer/styles/sidebar.scss index d69c434..3dad4c3 100644 --- a/src/renderer/styles/sidebar.scss +++ b/src/renderer/styles/sidebar.scss @@ -1,19 +1,16 @@ #app { - // 主体区域 .main-container { min-height: 100%; transition: margin-left .28s; - margin-left: 180px; + margin-left: $sideBarWidth; + position: relative; } - // 侧边栏 .sidebar-container { - .horizontal-collapse-transition { - transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; - } - transition: width .28s; - width: 180px !important; + transition: width 0.28s; + width: $sideBarWidth !important; + background-color: $menuBg; height: 100%; position: fixed; font-size: 0px; @@ -22,84 +19,191 @@ 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; } + .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: 36px !important; + width: 54px !important; } + .main-container { - margin-left: 36px; + margin-left: 54px; } + .submenu-title-noDropdown { - padding-left: 10px !important; + padding: 0 !important; position: relative; + .el-tooltip { - padding: 0 10px !important; + padding: 0 !important; + + .svg-icon { + margin-left: 20px; + } } } + .el-submenu { + overflow: hidden; + &>.el-submenu__title { - padding-left: 10px !important; - &>span { - height: 0; - width: 0; - overflow: hidden; - visibility: hidden; - display: inline-block; + padding: 0 !important; + + .svg-icon { + margin-left: 20px; } + .el-submenu__icon-arrow { display: none; } } } - } - .sidebar-container .nest-menu .el-submenu>.el-submenu__title, - .sidebar-container .el-submenu .el-menu-item { - min-width: 180px !important; - background-color: $subMenuBg !important; - &:hover { - background-color: $menuHover !important; + .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: 180px !important; + min-width: $sideBarWidth !important; } - //适配移动端 + // mobile responsive .mobile { .main-container { margin-left: 0px; } + .sidebar-container { - top: 50px; transition: transform .28s; - width: 180px !important; + width: $sideBarWidth !important; } + &.hideSidebar { .sidebar-container { + pointer-events: none; transition-duration: 0.3s; - transform: translate3d(-180px, 0, 0); + 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; + } + } + + .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; + } + } +} diff --git a/src/renderer/styles/transition.scss b/src/renderer/styles/transition.scss index c4d47ad..4cb27cc 100644 --- a/src/renderer/styles/transition.scss +++ b/src/renderer/styles/transition.scss @@ -1,6 +1,6 @@ -//globl transition css +// global transition css -/*fade*/ +/* fade */ .fade-enter-active, .fade-leave-active { transition: opacity 0.28s; @@ -11,7 +11,23 @@ opacity: 0; } -/*fade*/ +/* 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; diff --git a/src/renderer/styles/variables.scss b/src/renderer/styles/variables.scss index 2fee827..be55772 100644 --- a/src/renderer/styles/variables.scss +++ b/src/renderer/styles/variables.scss @@ -1,4 +1,25 @@ -//sidebar +// sidebar +$menuText:#bfcbd9; +$menuActiveText:#409EFF; +$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 + $menuBg:#304156; +$menuHover:#263445; + $subMenuBg:#1f2d3d; -$menuHover:#001528; +$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; +} diff --git a/src/renderer/utils/auth.js b/src/renderer/utils/auth.js index 08a43d6..059af18 100644 --- a/src/renderer/utils/auth.js +++ b/src/renderer/utils/auth.js @@ -1,6 +1,6 @@ import Cookies from 'js-cookie' -const TokenKey = 'Admin-Token' +const TokenKey = 'vue_admin_template_token' export function getToken() { return Cookies.get(TokenKey) diff --git a/src/renderer/utils/get-page-title.js b/src/renderer/utils/get-page-title.js new file mode 100644 index 0000000..a6de99d --- /dev/null +++ b/src/renderer/utils/get-page-title.js @@ -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}` +} diff --git a/src/renderer/utils/index.js b/src/renderer/utils/index.js index 9657c9c..37d915f 100644 --- a/src/renderer/utils/index.js +++ b/src/renderer/utils/index.js @@ -1,7 +1,13 @@ /** - * Created by jiachenpan on 16/11/18. + * Created by PanJiaChen on 16/11/18. */ +/** + * Parse the time to string + * @param {(Object|string|number)} time + * @param {string} cFormat + * @returns {string} + */ export function parseTime(time, cFormat) { if (arguments.length === 0) { return null @@ -11,7 +17,12 @@ export function parseTime(time, cFormat) { if (typeof time === 'object') { date = time } else { - if (('' + time).length === 10) time = parseInt(time) * 1000 + if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) { + time = parseInt(time) + } + if ((typeof time === 'number') && (time.toString().length === 10)) { + time = time * 1000 + } date = new Date(time) } const formatObj = { @@ -25,7 +36,8 @@ export function parseTime(time, cFormat) { } const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => { let value = formatObj[key] - if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1] + // Note: getDay() returns 0 on Sunday + if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] } if (result.length > 0 && value < 10) { value = '0' + value } @@ -34,8 +46,17 @@ export function parseTime(time, cFormat) { return time_str } +/** + * @param {number} time + * @param {string} option + * @returns {string} + */ export function formatTime(time, option) { - time = +time * 1000 + if (('' + time).length === 10) { + time = parseInt(time) * 1000 + } else { + time = +time + } const d = new Date(time) const now = Date.now() @@ -43,7 +64,8 @@ export function formatTime(time, option) { if (diff < 30) { return '刚刚' - } else if (diff < 3600) { // less 1 hour + } else if (diff < 3600) { + // less 1 hour return Math.ceil(diff / 60) + '分钟前' } else if (diff < 3600 * 24) { return Math.ceil(diff / 3600) + '小时前' @@ -53,6 +75,36 @@ export function formatTime(time, option) { if (option) { return parseTime(time, option) } else { - return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分' + return ( + d.getMonth() + + 1 + + '月' + + d.getDate() + + '日' + + d.getHours() + + '时' + + d.getMinutes() + + '分' + ) } } + +/** + * @param {string} url + * @returns {Object} + */ +export function param2Obj(url) { + const search = url.split('?')[1] + if (!search) { + return {} + } + return JSON.parse( + '{"' + + decodeURIComponent(search) + .replace(/"/g, '\\"') + .replace(/&/g, '","') + .replace(/=/g, '":"') + .replace(/\+/g, ' ') + + '"}' + ) +} diff --git a/src/renderer/utils/request.js b/src/renderer/utils/request.js index 1a74436..78308e8 100644 --- a/src/renderer/utils/request.js +++ b/src/renderer/utils/request.js @@ -1,58 +1,78 @@ import axios from 'axios' -import { Message, MessageBox } from 'element-ui' -import store from '../store' +import { MessageBox, Message } from 'element-ui' +import store from '@/store' +import { getToken } from '@/utils/auth' -// 创建axios实例 +// create an axios instance const service = axios.create({ - baseURL: process.env.BASE_API, // api的base_url - timeout: 15000 // 请求超时时间 + baseURL: process.env.BASE_API, // url = base url + request url + // withCredentials: true, // send cookies when cross-domain requests + timeout: 5000 // request timeout }) -// request拦截器 -service.interceptors.request.use(config => { - if (store.getters.token) { - config.headers['X-Token'] = store.getters.token// 让每个请求携带自定义token 请根据实际情况自行修改 +// 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) } - return config -}, error => { - // Do something with request error - console.log(error) // for debug - Promise.reject(error) -}) +) -// respone拦截器 +// response interceptor service.interceptors.response.use( - response => { /** - * code为非20000是抛错 可结合自己业务进行修改 + * 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 !== 20000) { Message({ - message: res.message, + message: res.message || 'Error', type: 'error', duration: 5 * 1000 }) - // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了; + // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired; if (res.code === 50008 || res.code === 50012 || res.code === 50014) { - MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', { - confirmButtonText: '重新登录', - cancelButtonText: '取消', + // 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('FedLogOut').then(() => { - location.reload()// 为了重新实例化vue-router对象 避免bug + store.dispatch('user/resetToken').then(() => { + location.reload() }) }) } - return Promise.reject('error') + return Promise.reject(new Error(res.message || 'Error')) } else { - return response.data + return res } }, error => { - console.log('err' + error)// for debug + console.log('err' + error) // for debug Message({ message: error.message, type: 'error', diff --git a/src/renderer/utils/validate.js b/src/renderer/utils/validate.js index 834a8dd..8d962ad 100644 --- a/src/renderer/utils/validate.js +++ b/src/renderer/utils/validate.js @@ -1,33 +1,20 @@ /** - * Created by jiachenpan on 16/11/18. + * Created by PanJiaChen on 16/11/18. */ -export function isvalidUsername(str) { +/** + * @param {string} path + * @returns {Boolean} + */ +export function isExternal(path) { + return /^(https?:|mailto:|tel:)/.test(path) +} + +/** + * @param {string} str + * @returns {Boolean} + */ +export function validUsername(str) { const valid_map = ['admin', 'editor'] return valid_map.indexOf(str.trim()) >= 0 } - -/* 合法uri*/ -export function validateURL(textval) { - const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/ - return urlregex.test(textval) -} - -/* 小写字母*/ -export function validateLowerCase(str) { - const reg = /^[a-z]+$/ - return reg.test(str) -} - -/* 大写字母*/ -export function validateUpperCase(str) { - const reg = /^[A-Z]+$/ - return reg.test(str) -} - -/* 大小写字母*/ -export function validatAlphabets(str) { - const reg = /^[A-Za-z]+$/ - return reg.test(str) -} - diff --git a/src/renderer/views/404.vue b/src/renderer/views/404.vue index ca160fa..1791f55 100644 --- a/src/renderer/views/404.vue +++ b/src/renderer/views/404.vue @@ -1,54 +1,53 @@ - diff --git a/src/renderer/views/dashboard/index.vue b/src/renderer/views/dashboard/index.vue index 4b4625c..33e5ab6 100644 --- a/src/renderer/views/dashboard/index.vue +++ b/src/renderer/views/dashboard/index.vue @@ -1,7 +1,6 @@ @@ -9,17 +8,16 @@ import { mapGetters } from 'vuex' export default { - name: 'dashboard', + name: 'Dashboard', computed: { ...mapGetters([ - 'name', - 'roles' + 'name' ]) } } - diff --git a/src/renderer/views/layout/components/AppMain.vue b/src/renderer/views/layout/components/AppMain.vue deleted file mode 100644 index 4babff5..0000000 --- a/src/renderer/views/layout/components/AppMain.vue +++ /dev/null @@ -1,19 +0,0 @@ - - - diff --git a/src/renderer/views/layout/components/Navbar.vue b/src/renderer/views/layout/components/Navbar.vue deleted file mode 100644 index eb36b1a..0000000 --- a/src/renderer/views/layout/components/Navbar.vue +++ /dev/null @@ -1,94 +0,0 @@ - - - - - - diff --git a/src/renderer/views/layout/components/Sidebar/SidebarItem.vue b/src/renderer/views/layout/components/Sidebar/SidebarItem.vue deleted file mode 100644 index aa719d1..0000000 --- a/src/renderer/views/layout/components/Sidebar/SidebarItem.vue +++ /dev/null @@ -1,59 +0,0 @@ - - - diff --git a/src/renderer/views/layout/components/Sidebar/index.vue b/src/renderer/views/layout/components/Sidebar/index.vue deleted file mode 100644 index c4bd38f..0000000 --- a/src/renderer/views/layout/components/Sidebar/index.vue +++ /dev/null @@ -1,36 +0,0 @@ - - - diff --git a/src/renderer/views/layout/mixin/ResizeHandler.js b/src/renderer/views/layout/mixin/ResizeHandler.js deleted file mode 100644 index b22c8bb..0000000 --- a/src/renderer/views/layout/mixin/ResizeHandler.js +++ /dev/null @@ -1,41 +0,0 @@ -import store from '@/store' - -const { body } = document -const WIDTH = 1024 -const RATIO = 3 - -export default { - watch: { - $route(route) { - if (this.device === 'mobile' && this.sidebar.opened) { - store.dispatch('CloseSideBar', { withoutAnimation: false }) - } - } - }, - beforeMount() { - window.addEventListener('resize', this.resizeHandler) - }, - mounted() { - const isMobile = this.isMobile() - if (isMobile) { - store.dispatch('ToggleDevice', 'mobile') - store.dispatch('CloseSideBar', { withoutAnimation: true }) - } - }, - methods: { - isMobile() { - const rect = body.getBoundingClientRect() - return rect.width - RATIO < WIDTH - }, - resizeHandler() { - if (!document.hidden) { - const isMobile = this.isMobile() - store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop') - - if (isMobile) { - store.dispatch('CloseSideBar', { withoutAnimation: true }) - } - } - } - } -} diff --git a/src/renderer/views/login/index.vue b/src/renderer/views/login/index.vue index 6f790ef..1db2464 100644 --- a/src/renderer/views/login/index.vue +++ b/src/renderer/views/login/index.vue @@ -1,50 +1,73 @@ - -