refine theme color

This commit is contained in:
Pan 2019-03-18 09:42:52 +08:00
parent a80999e0a2
commit f3aefe54e8
5 changed files with 41 additions and 17 deletions

View File

@ -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

View File

@ -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)
}) })
} }
} }

View File

@ -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";

View File

@ -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>

View File

@ -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)
} }
} }