refine theme color

Author: PanJiaChen

src/main.js

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

src/store/modules/permission.js

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

src/styles/element-variables.scss

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

src/views/table/complexTable.vue

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

vue.config.js

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