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 Element from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
import './styles/element-variables.scss'
|
||||
|
||||
import '@/styles/index.scss' // global css
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { asyncRouterMap, constantRouterMap } from '@/router'
|
||||
import { asyncRoutes, constantRoutes } from '@/router'
|
||||
|
||||
/**
|
||||
* 通过meta.role判断是否与当前用户权限匹配
|
||||
|
@ -15,17 +15,17 @@ function hasPermission(roles, route) {
|
|||
|
||||
/**
|
||||
* 递归过滤异步路由表,返回符合用户角色权限的路由表
|
||||
* @param routes asyncRouterMap
|
||||
* @param routes asyncRoutes
|
||||
* @param roles
|
||||
*/
|
||||
function filterAsyncRouter(routes, roles) {
|
||||
export function filterAsyncRoutes(routes, roles) {
|
||||
const res = []
|
||||
|
||||
routes.forEach(route => {
|
||||
const tmp = { ...route }
|
||||
if (hasPermission(roles, tmp)) {
|
||||
if (tmp.children) {
|
||||
tmp.children = filterAsyncRouter(tmp.children, roles)
|
||||
tmp.children = filterAsyncRoutes(tmp.children, roles)
|
||||
}
|
||||
res.push(tmp)
|
||||
}
|
||||
|
@ -36,27 +36,27 @@ function filterAsyncRouter(routes, roles) {
|
|||
|
||||
const permission = {
|
||||
state: {
|
||||
routers: [],
|
||||
addRouters: []
|
||||
routes: [],
|
||||
addRoutes: []
|
||||
},
|
||||
mutations: {
|
||||
SET_ROUTERS: (state, routers) => {
|
||||
state.addRouters = routers
|
||||
state.routers = constantRouterMap.concat(routers)
|
||||
SET_ROUTES: (state, routes) => {
|
||||
state.addRoutes = routes
|
||||
state.routes = constantRoutes.concat(routes)
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
GenerateRoutes({ commit }, data) {
|
||||
return new Promise(resolve => {
|
||||
const { roles } = data
|
||||
let accessedRouters
|
||||
let accessedRoutes
|
||||
if (roles.includes('admin')) {
|
||||
accessedRouters = asyncRouterMap
|
||||
accessedRoutes = asyncRoutes
|
||||
} else {
|
||||
accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
|
||||
accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
|
||||
}
|
||||
commit('SET_ROUTERS', accessedRouters)
|
||||
resolve()
|
||||
commit('SET_ROUTES', accessedRoutes)
|
||||
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%;"
|
||||
@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">
|
||||
<span>{{ scope.row.id }}</span>
|
||||
</template>
|
||||
|
|
|
@ -55,7 +55,6 @@ module.exports = {
|
|||
// import ES2015 module from common.js module
|
||||
const { default: mocks } = require('./mock')
|
||||
for (const mock of mocks) {
|
||||
console.log(mock, mock.response)
|
||||
app.all(mock.route, mock.response)
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue