refine theme color
This commit is contained in:
parent
a80999e0a2
commit
f3aefe54e8
|
@ -5,7 +5,7 @@ import Cookies from 'js-cookie'
|
||||||
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
|
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
|
||||||
|
|
||||||
import Element from 'element-ui'
|
import Element from 'element-ui'
|
||||||
import 'element-ui/lib/theme-chalk/index.css'
|
import './styles/element-variables.scss'
|
||||||
|
|
||||||
import '@/styles/index.scss' // global css
|
import '@/styles/index.scss' // global css
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { asyncRouterMap, constantRouterMap } from '@/router'
|
import { asyncRoutes, constantRoutes } from '@/router'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 通过meta.role判断是否与当前用户权限匹配
|
* 通过meta.role判断是否与当前用户权限匹配
|
||||||
|
@ -15,17 +15,17 @@ function hasPermission(roles, route) {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 递归过滤异步路由表,返回符合用户角色权限的路由表
|
* 递归过滤异步路由表,返回符合用户角色权限的路由表
|
||||||
* @param routes asyncRouterMap
|
* @param routes asyncRoutes
|
||||||
* @param roles
|
* @param roles
|
||||||
*/
|
*/
|
||||||
function filterAsyncRouter(routes, roles) {
|
export function filterAsyncRoutes(routes, roles) {
|
||||||
const res = []
|
const res = []
|
||||||
|
|
||||||
routes.forEach(route => {
|
routes.forEach(route => {
|
||||||
const tmp = { ...route }
|
const tmp = { ...route }
|
||||||
if (hasPermission(roles, tmp)) {
|
if (hasPermission(roles, tmp)) {
|
||||||
if (tmp.children) {
|
if (tmp.children) {
|
||||||
tmp.children = filterAsyncRouter(tmp.children, roles)
|
tmp.children = filterAsyncRoutes(tmp.children, roles)
|
||||||
}
|
}
|
||||||
res.push(tmp)
|
res.push(tmp)
|
||||||
}
|
}
|
||||||
|
@ -36,27 +36,27 @@ function filterAsyncRouter(routes, roles) {
|
||||||
|
|
||||||
const permission = {
|
const permission = {
|
||||||
state: {
|
state: {
|
||||||
routers: [],
|
routes: [],
|
||||||
addRouters: []
|
addRoutes: []
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
SET_ROUTERS: (state, routers) => {
|
SET_ROUTES: (state, routes) => {
|
||||||
state.addRouters = routers
|
state.addRoutes = routes
|
||||||
state.routers = constantRouterMap.concat(routers)
|
state.routes = constantRoutes.concat(routes)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
GenerateRoutes({ commit }, data) {
|
GenerateRoutes({ commit }, data) {
|
||||||
return new Promise(resolve => {
|
return new Promise(resolve => {
|
||||||
const { roles } = data
|
const { roles } = data
|
||||||
let accessedRouters
|
let accessedRoutes
|
||||||
if (roles.includes('admin')) {
|
if (roles.includes('admin')) {
|
||||||
accessedRouters = asyncRouterMap
|
accessedRoutes = asyncRoutes
|
||||||
} else {
|
} else {
|
||||||
accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
|
accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
|
||||||
}
|
}
|
||||||
commit('SET_ROUTERS', accessedRouters)
|
commit('SET_ROUTES', accessedRoutes)
|
||||||
resolve()
|
resolve(accessedRoutes)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,25 @@
|
||||||
|
/**
|
||||||
|
* I think element-ui's default theme color is too light for long-term use.
|
||||||
|
* So I modified the default color and you can modify it to your liking.
|
||||||
|
**/
|
||||||
|
|
||||||
|
/* theme color */
|
||||||
|
$--color-primary: #1890ff;
|
||||||
|
$--color-success: #13ce66;
|
||||||
|
$--color-warning: #FFBA00;
|
||||||
|
$--color-danger: #ff4949;
|
||||||
|
// $--color-info: #1E1E1E;
|
||||||
|
|
||||||
|
$--button-font-weight: 400;
|
||||||
|
|
||||||
|
// $--color-text-regular: #1f2d3d;
|
||||||
|
|
||||||
|
$--border-color-light: #dfe4ed;
|
||||||
|
$--border-color-lighter: #e6ebf5;
|
||||||
|
|
||||||
|
$--table-border:1px solid#dfe6ec;
|
||||||
|
|
||||||
|
/* icon font path, required */
|
||||||
|
$--font-path: '~element-ui/lib/theme-chalk/fonts';
|
||||||
|
|
||||||
|
@import "~element-ui/packages/theme-chalk/src/index";
|
|
@ -35,7 +35,7 @@
|
||||||
style="width: 100%;"
|
style="width: 100%;"
|
||||||
@sort-change="sortChange"
|
@sort-change="sortChange"
|
||||||
>
|
>
|
||||||
<el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="65">
|
<el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="80">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span>{{ scope.row.id }}</span>
|
<span>{{ scope.row.id }}</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -55,7 +55,6 @@ module.exports = {
|
||||||
// import ES2015 module from common.js module
|
// import ES2015 module from common.js module
|
||||||
const { default: mocks } = require('./mock')
|
const { default: mocks } = require('./mock')
|
||||||
for (const mock of mocks) {
|
for (const mock of mocks) {
|
||||||
console.log(mock, mock.response)
|
|
||||||
app.all(mock.route, mock.response)
|
app.all(mock.route, mock.response)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue