遇见
5 years ago
144 changed files with 3390 additions and 0 deletions
@ -0,0 +1,14 @@
@@ -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,14 @@
@@ -0,0 +1,14 @@
|
||||
# just a flag |
||||
ENV = 'development' |
||||
|
||||
# base api |
||||
VUE_APP_BASE_API = '/dev-api' |
||||
|
||||
# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable, |
||||
# to control whether the babel-plugin-dynamic-import-node plugin is enabled. |
||||
# It only does one thing by converting all import() to require(). |
||||
# This configuration can significantly increase the speed of hot updates, |
||||
# when you have a large number of pages. |
||||
# Detail: https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js |
||||
|
||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true |
||||
@ -0,0 +1,6 @@
@@ -0,0 +1,6 @@
|
||||
# just a flag |
||||
ENV = 'production' |
||||
|
||||
# base api |
||||
VUE_APP_BASE_API = '/prod-api' |
||||
|
||||
@ -0,0 +1,8 @@
@@ -0,0 +1,8 @@
|
||||
NODE_ENV = production |
||||
|
||||
# just a flag |
||||
ENV = 'staging' |
||||
|
||||
# base api |
||||
VUE_APP_BASE_API = '/stage-api' |
||||
|
||||
@ -0,0 +1,4 @@
@@ -0,0 +1,4 @@
|
||||
build/*.js |
||||
src/assets |
||||
public |
||||
dist |
||||
@ -0,0 +1,198 @@
@@ -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 @@
@@ -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 @@
@@ -0,0 +1,5 @@
|
||||
language: node_js |
||||
node_js: 10 |
||||
script: npm run test |
||||
notifications: |
||||
email: false |
||||
@ -0,0 +1,21 @@
@@ -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,5 @@
@@ -0,0 +1,5 @@
|
||||
module.exports = { |
||||
presets: [ |
||||
'@vue/app' |
||||
] |
||||
} |
||||
@ -0,0 +1,35 @@
@@ -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 @@
@@ -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 @@
@@ -0,0 +1,9 @@
|
||||
{ |
||||
"compilerOptions": { |
||||
"baseUrl": "./", |
||||
"paths": { |
||||
"@/*": ["src/*"] |
||||
} |
||||
}, |
||||
"exclude": ["node_modules", "dist"] |
||||
} |
||||
@ -0,0 +1,53 @@
@@ -0,0 +1,53 @@
|
||||
import Mock from 'mockjs' |
||||
import { param2Obj } from '../src/utils' |
||||
|
||||
import user from './user' |
||||
import table from './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).
|
||||
export 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)) |
||||
} |
||||
} |
||||
|
||||
export default mocks |
||||
@ -0,0 +1,84 @@
@@ -0,0 +1,84 @@
|
||||
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 { default: 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 => { |
||||
// es6 polyfill
|
||||
require('@babel/register') |
||||
|
||||
// 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 @@
@@ -0,0 +1,29 @@
|
||||
import Mock from '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)' |
||||
}] |
||||
}) |
||||
|
||||
export default [ |
||||
{ |
||||
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 @@
@@ -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' |
||||
} |
||||
} |
||||
|
||||
export default [ |
||||
// 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,63 @@
@@ -0,0 +1,63 @@
|
||||
{ |
||||
"name": "vue-admin-template", |
||||
"version": "4.3.0", |
||||
"description": "A vue admin template with Element UI & axios & iconfont & permission control & lint", |
||||
"author": "Pan <[email protected]>", |
||||
"license": "MIT", |
||||
"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", |
||||
"lint": "eslint --ext .js,.vue src", |
||||
"test:unit": "jest --clearCache && vue-cli-service test:unit", |
||||
"test:ci": "npm run lint && npm run test:unit", |
||||
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml" |
||||
}, |
||||
"dependencies": { |
||||
"axios": "0.18.1", |
||||
"element-ui": "2.13.0", |
||||
"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" |
||||
}, |
||||
"devDependencies": { |
||||
"@babel/core": "7.0.0", |
||||
"@babel/register": "7.0.0", |
||||
"@vue/cli-plugin-babel": "3.6.0", |
||||
"@vue/cli-plugin-eslint": "^3.9.1", |
||||
"@vue/cli-plugin-unit-jest": "3.6.3", |
||||
"@vue/cli-service": "3.6.0", |
||||
"@vue/test-utils": "1.0.0-beta.29", |
||||
"autoprefixer": "^9.5.1", |
||||
"babel-core": "7.0.0-bridge.0", |
||||
"babel-eslint": "10.0.1", |
||||
"babel-jest": "23.6.0", |
||||
"chalk": "2.4.2", |
||||
"connect": "3.6.6", |
||||
"eslint": "5.15.3", |
||||
"eslint-plugin-vue": "5.2.2", |
||||
"html-webpack-plugin": "3.2.0", |
||||
"mockjs": "1.0.1-beta3", |
||||
"runjs": "^4.3.2", |
||||
"sass": "^1.26.8", |
||||
"sass-loader": "^7.1.0", |
||||
"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" |
||||
}, |
||||
"engines": { |
||||
"node": ">=8.9", |
||||
"npm": ">= 3.0.0" |
||||
}, |
||||
"browserslist": [ |
||||
"> 1%", |
||||
"last 2 versions" |
||||
] |
||||
} |
||||
@ -0,0 +1,8 @@
@@ -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 @@
@@ -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 @@
@@ -0,0 +1,11 @@
|
||||
<template> |
||||
<div id="app"> |
||||
<router-view /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'App' |
||||
} |
||||
</script> |
||||
@ -0,0 +1,9 @@
@@ -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,24 @@
@@ -0,0 +1,24 @@
|
||||
import request from '@/utils/request' |
||||
|
||||
export function login(data) { |
||||
return request({ |
||||
url: '/vue-admin-template/user/login', |
||||
method: 'post', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
export function getInfo(token) { |
||||
return request({ |
||||
url: '/vue-admin-template/user/info', |
||||
method: 'get', |
||||
params: { token } |
||||
}) |
||||
} |
||||
|
||||
export function logout() { |
||||
return request({ |
||||
url: '/vue-admin-template/user/logout', |
||||
method: 'post' |
||||
}) |
||||
} |
||||
|
After Width: | Height: | Size: 96 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
@ -0,0 +1,78 @@
@@ -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 @@
@@ -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,62 @@
@@ -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,9 @@
@@ -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: 971 B |
|
After Width: | Height: | Size: 319 B |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 418 B |
|
After Width: | Height: | Size: 627 B |
|
After Width: | Height: | Size: 497 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 421 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 669 B |
|
After Width: | Height: | Size: 821 B |
|
After Width: | Height: | Size: 623 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 731 B |
|
After Width: | Height: | Size: 600 B |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 906 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,22 @@
@@ -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 @@
@@ -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,133 @@
@@ -0,0 +1,133 @@
|
||||
<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+'?imageView2/1/w/80/h/80'" 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> --> |
||||
<el-dropdown-item @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 @@
@@ -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,29 @@
@@ -0,0 +1,29 @@
|
||||
<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) { |
||||
vnodes.push(<svg-icon icon-class={icon}/>) |
||||
} |
||||
|
||||
if (title) { |
||||
vnodes.push(<span slot='title'>{(title)}</span>) |
||||
} |
||||
return vnodes |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,43 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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,101 @@
@@ -0,0 +1,101 @@
|
||||
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' 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: '/Article', |
||||
component: Layout, |
||||
meta: { title: 'ArticleManage', icon: 'tab' }, |
||||
children: [ |
||||
{ |
||||
path: 'List', |
||||
name: 'ArticleList', |
||||
component: () => import('@/views/Article/ArticleList'), |
||||
meta: { title: 'ArticleList', icon: 'documentation' } |
||||
}, |
||||
{ |
||||
path: 'Create', |
||||
name: 'ArticleCreate', |
||||
component: () => import('@/views/Article/ArticleCreate'), |
||||
meta: { title: 'ArticleCreate', icon: 'form' } |
||||
}, |
||||
{ |
||||
path: 'Edit', |
||||
name: 'ArticleEdit', |
||||
component: () => import('@/views/Article/ArticleEdit'), |
||||
meta: { title: 'ArticleEdit', icon: 'edit' } |
||||
} |
||||
] |
||||
}, |
||||
|
||||
// 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 @@
@@ -0,0 +1,16 @@
|
||||
module.exports = { |
||||
|
||||
title: 'Vue Admin 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 |
||||
} |
||||
@ -0,0 +1,8 @@
@@ -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 @@
@@ -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 @@
@@ -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,31 @@
@@ -0,0 +1,31 @@
|
||||
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 |
||||
} |
||||
|
||||
@ -0,0 +1,97 @@
@@ -0,0 +1,97 @@
|
||||
import { login, logout, getInfo } from '@/api/user' |
||||
import { getToken, setToken, removeToken } from '@/utils/auth' |
||||
import { resetRouter } from '@/router' |
||||
|
||||
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 |
||||
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(() => { |
||||
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 @@
@@ -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,65 @@
@@ -0,0 +1,65 @@
|
||||
@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; |
||||
} |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue