From 2d9864f6033ffccac127c2768050c46a3e583adc Mon Sep 17 00:00:00 2001 From: zhengjie Date: Tue, 14 May 2019 09:09:20 +0800 Subject: [PATCH] 1.8 version --- src/components/RightPanel/index.vue | 20 ++- src/components/placard/index.vue | 82 ----------- src/config/index.js | 7 +- src/main.js | 4 +- src/permission.js | 68 --------- src/router/index.js | 137 ++++++++---------- src/router/routers.js | 83 +++++++++++ src/store/modules/permission.js | 2 +- src/store/modules/settings.js | 5 +- src/styles/element-variables.scss | 31 ++++ src/utils/request.js | 2 +- src/views/layout/Layout.vue | 2 +- src/views/layout/components/Navbar.vue | 5 - .../layout/components/Settings/index.vue | 16 ++ src/views/layout/components/TagsView.vue | 2 +- src/views/login/index.vue | 4 +- src/views/system/role/module/form.vue | 1 - static/.gitkeep | 0 18 files changed, 223 insertions(+), 248 deletions(-) delete mode 100644 src/components/placard/index.vue delete mode 100644 src/permission.js create mode 100644 src/router/routers.js create mode 100644 src/styles/element-variables.scss delete mode 100644 static/.gitkeep diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue index c6061d9..6d46d57 100644 --- a/src/components/RightPanel/index.vue +++ b/src/components/RightPanel/index.vue @@ -2,7 +2,10 @@
-
+
+ +
+
@@ -25,11 +28,6 @@ export default { type: Number } }, - data() { - return { - theme: '#fff' - } - }, computed: { show: { get() { @@ -41,6 +39,16 @@ export default { value: val }) } + }, + theme: { + get() { + return this.$store.state.settings.theme + } + }, + settingBtn: { + get() { + return this.$store.state.settings.settingBtn + } } }, watch: { diff --git a/src/components/placard/index.vue b/src/components/placard/index.vue deleted file mode 100644 index d45b219..0000000 --- a/src/components/placard/index.vue +++ /dev/null @@ -1,82 +0,0 @@ - - - - - diff --git a/src/config/index.js b/src/config/index.js index 5d655ef..a95d45e 100644 --- a/src/config/index.js +++ b/src/config/index.js @@ -37,5 +37,10 @@ export default { /** * @description 是否显示logo */ - sidebarLogo: true + sidebarLogo: true, + + /** + * 是否显示设置的悬浮按钮 + */ + settingBtn: false } diff --git a/src/main.js b/src/main.js index d1720c7..26f1a51 100644 --- a/src/main.js +++ b/src/main.js @@ -10,11 +10,11 @@ import 'mavon-editor/dist/css/index.css' import '@/styles/index.scss' // global css import App from './App' -import router from './router' +import router from './router/routers' import store from './store' import '@/icons' // icon -import './permission' // permission control +import './router/index' // permission control Vue.use(mavonEditor) Vue.use(ElementUI, { locale }) diff --git a/src/permission.js b/src/permission.js deleted file mode 100644 index a80f5fe..0000000 --- a/src/permission.js +++ /dev/null @@ -1,68 +0,0 @@ -import router from './router' -import store from './store' -import Config from '@/config' -import NProgress from 'nprogress' // progress bar -import 'nprogress/nprogress.css'// progress bar style -import { getToken } from '@/utils/auth' // getToken from cookie -import { buildMenus } from '@/api/menu' -import { filterAsyncRouter } from './store/modules/permission' - -NProgress.configure({ showSpinner: false })// NProgress Configuration - -const whiteList = ['/login']// no redirect whitelist - -router.beforeEach((to, from, next) => { - if (to.meta.title) { - document.title = to.meta.title + ' - ' + Config.webName - } - NProgress.start() // start progress bar - if (getToken()) { - // 已登录且要跳转的页面是登录页 - if (to.path === '/login') { - next({ path: '/' }) - NProgress.done() // if current page is dashboard will not trigger afterEach hook, so manually handle it - } else { - if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息 - store.dispatch('GetInfo').then(res => { // 拉取user_info - // 动态路由，拉取菜单 - loadMenus(next, to) - }).catch((err) => { - console.log(err) - store.dispatch('LogOut').then(() => { - location.reload() // 为了重新实例化vue-router对象 避免bug - }) - }) - // 登录时未拉取 菜单，在此处拉取 - } else if (store.getters.loadMenus) { - // 修改成false，防止死循环 - store.dispatch('updateLoadMenus').then(res => {}) - loadMenus(next, to) - } else { - next() - } - } - } else { - /* has no token*/ - if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入 - next() - } else { - next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页 - NProgress.done() - } - } -}) - -export const loadMenus = (next, to) => { - buildMenus().then(res => { - const asyncRouter = filterAsyncRouter(res) - asyncRouter.push({ path: '*', redirect: '/404', hidden: true }) - store.dispatch('GenerateRoutes', asyncRouter).then(() => { // 存储路由 - router.addRoutes(asyncRouter) // 动态添加可访问路由表 - next({ ...to, replace: true })// hack方法 确保addRoutes已完成 - }) - }) -} - -router.afterEach(() => { - NProgress.done() // finish progress bar -}) diff --git a/src/router/index.js b/src/router/index.js index 587eea8..f61e2bd 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,83 +1,68 @@ -import Vue from 'vue' -import Router from 'vue-router' +import router from './routers' +import store from '@/store' +import Config from '@/config' +import NProgress from 'nprogress' // progress bar +import 'nprogress/nprogress.css'// progress bar style +import { getToken } from '@/utils/auth' // getToken from cookie +import { buildMenus } from '@/api/menu' +import { filterAsyncRouter } from '@/store/modules/permission' -Vue.use(Router) +NProgress.configure({ showSpinner: false })// NProgress Configuration -/* Layout */ -import Layout from '../views/layout/Layout' +const whiteList = ['/login']// no redirect whitelist -/** -* hidden: true if `hidden:true` will not show in the sidebar(default is false) -* alwaysShow: true if set true, will always show the root menu, whatever its child routes length -* if not set alwaysShow, only more than one route under the children -* it will becomes nested mode, otherwise not show the root menu -* redirect: noredirect if `redirect:noredirect` will no redirect in the breadcrumb -* name:'router-name' the name is used by (must set!!!) -* meta : { - title: 'title' the name show in submenu and breadcrumb (recommend set) - icon: 'svg-name' the icon show in the sidebar, +router.beforeEach((to, from, next) => { + if (to.meta.title) { + document.title = to.meta.title + ' - ' + Config.webName } -**/ - -export const constantRouterMap = [ - { path: '/login', - meta: { title: '登录', noCache: true }, - component: () => import('@/views/login/index'), - hidden: true - }, - { - path: '/404', - component: () => import('@/views/errorPage/404'), - hidden: true - }, - { - path: '/401', - component: () => import('@/views/errorPage/401'), - hidden: true - }, - { - path: '/redirect', - component: Layout, - hidden: true, - children: [ - { - path: '/redirect/:path*', - component: () => import('@/views/redirect/index') + NProgress.start() // start progress bar + if (getToken()) { + // 已登录且要跳转的页面是登录页 + if (to.path === '/login') { + next({ path: '/' }) + NProgress.done() // if current page is dashboard will not trigger afterEach hook, so manually handle it + } else { + if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息 + store.dispatch('GetInfo').then(res => { // 拉取user_info + // 动态路由，拉取菜单 + loadMenus(next, to) + }).catch((err) => { + console.log(err) + store.dispatch('LogOut').then(() => { + location.reload() // 为了重新实例化vue-router对象 避免bug + }) + }) + // 登录时未拉取 菜单，在此处拉取 + } else if (store.getters.loadMenus) { + // 修改成false，防止死循环 + store.dispatch('updateLoadMenus').then(res => {}) + loadMenus(next, to) + } else { + next() } - ] - }, - { - path: '/', - component: Layout, - redirect: 'dashboard', - children: [ - { - path: 'dashboard', - component: () => import('@/views/dashboard/index'), - name: '首页', - meta: { title: '首页', icon: 'index', noCache: true, affix: true } - } - ] - }, - { - path: '/user', - component: Layout, - hidden: true, - redirect: 'noredirect', - children: [ - { - path: 'center', - component: () => import('@/views/system/user/center'), - name: '个人中心', - meta: { title: '个人中心', icon: 'user' } - } - ] + } + } else { + /* has no token*/ + if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入 + next() + } else { + next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页 + NProgress.done() + } } - // { path: '*', redirect: '/404', hidden: true } -] - -export default new Router({ - mode: 'history', - scrollBehavior: () => ({ y: 0 }), - routes: constantRouterMap +}) + +export const loadMenus = (next, to) => { + buildMenus().then(res => { + const asyncRouter = filterAsyncRouter(res) + asyncRouter.push({ path: '*', redirect: '/404', hidden: true }) + store.dispatch('GenerateRoutes', asyncRouter).then(() => { // 存储路由 + router.addRoutes(asyncRouter) // 动态添加可访问路由表 + next({ ...to, replace: true })// hack方法 确保addRoutes已完成 + }) + }) +} + +router.afterEach(() => { + NProgress.done() // finish progress bar }) diff --git a/src/router/routers.js b/src/router/routers.js new file mode 100644 index 0000000..587eea8 --- /dev/null +++ b/src/router/routers.js @@ -0,0 +1,83 @@ +import Vue from 'vue' +import Router from 'vue-router' + +Vue.use(Router) + +/* Layout */ +import Layout from '../views/layout/Layout' + +/** +* hidden: true if `hidden:true` will not show in the sidebar(default is false) +* alwaysShow: true if set true, will always show the root menu, whatever its child routes length +* if not set alwaysShow, only more than one route under the children +* it will becomes nested mode, otherwise not show the root menu +* redirect: noredirect if `redirect:noredirect` will no redirect in the breadcrumb +* name:'router-name' the name is used by (must set!!!) +* meta : { + title: 'title' the name show in submenu and breadcrumb (recommend set) + icon: 'svg-name' the icon show in the sidebar, + } +**/ + +export const constantRouterMap = [ + { path: '/login', + meta: { title: '登录', noCache: true }, + component: () => import('@/views/login/index'), + hidden: true + }, + { + path: '/404', + component: () => import('@/views/errorPage/404'), + hidden: true + }, + { + path: '/401', + component: () => import('@/views/errorPage/401'), + hidden: true + }, + { + path: '/redirect', + component: Layout, + hidden: true, + children: [ + { + path: '/redirect/:path*', + component: () => import('@/views/redirect/index') + } + ] + }, + { + path: '/', + component: Layout, + redirect: 'dashboard', + children: [ + { + path: 'dashboard', + component: () => import('@/views/dashboard/index'), + name: '首页', + meta: { title: '首页', icon: 'index', noCache: true, affix: true } + } + ] + }, + { + path: '/user', + component: Layout, + hidden: true, + redirect: 'noredirect', + children: [ + { + path: 'center', + component: () => import('@/views/system/user/center'), + name: '个人中心', + meta: { title: '个人中心', icon: 'user' } + } + ] + } + // { path: '*', redirect: '/404', hidden: true } +] + +export default new Router({ + mode: 'history', + scrollBehavior: () => ({ y: 0 }), + routes: constantRouterMap +}) diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js index 75b68b1..9a1bbb0 100644 --- a/src/store/modules/permission.js +++ b/src/store/modules/permission.js @@ -1,4 +1,4 @@ -import { constantRouterMap } from '@/router' +import { constantRouterMap } from '@/router/routers' import Layout from '@/views/layout/Layout' const permission = { diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js index 2d27f46..29ce1c5 100644 --- a/src/store/modules/settings.js +++ b/src/store/modules/settings.js @@ -1,11 +1,14 @@ import Config from '@/config' +import variables from '@/styles/element-variables.scss' const settings = { state: { showRightPanel: false, tagsView: Config.tagsView, fixedHeader: Config.fixedHeader, - sidebarLogo: Config.sidebarLogo + sidebarLogo: Config.sidebarLogo, + theme: variables.theme, + settingBtn: Config.settingBtn }, mutations: { CHANGE_SETTING: (state, { key, value }) => { diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss new file mode 100644 index 0000000..30a0e6b --- /dev/null +++ b/src/styles/element-variables.scss @@ -0,0 +1,31 @@ +/** +* 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"; + +// the :export directive is the magic sauce for webpack +// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass +:export { + theme: $--color-primary; +} diff --git a/src/utils/request.js b/src/utils/request.js index 21d2208..2cf8d2a 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -1,5 +1,5 @@ import axios from 'axios' -import router from '@/router' +import router from '@/router/routers' import { Notification, MessageBox } from 'element-ui' import store from '../store' import { getToken } from '@/utils/auth' diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue index e704472..b286304 100644 --- a/src/views/layout/Layout.vue +++ b/src/views/layout/Layout.vue @@ -50,7 +50,7 @@ export default { }, methods: { handleClickOutside() { - this.$store.dispatch('app/closeSideBar', { withoutAnimation: false }) + this.$store.dispatch('closeSideBar', { withoutAnimation: false }) } } } diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue index df97cd8..5e114f6 100644 --- a/src/views/layout/components/Navbar.vue +++ b/src/views/layout/components/Navbar.vue @@ -5,9 +5,6 @@
@@ -59,6 +64,17 @@ export default { value: val }) } + }, + settingBtn: { + get() { + return this.$store.state.settings.settingBtn + }, + set(val) { + this.$store.dispatch('changeSetting', { + key: 'settingBtn', + value: val + }) + } } } } diff --git a/src/views/layout/components/TagsView.vue b/src/views/layout/components/TagsView.vue index 5691e38..9666ca1 100644 --- a/src/views/layout/components/TagsView.vue +++ b/src/views/layout/components/TagsView.vue @@ -27,7 +27,7 @@ diff --git a/static/.gitkeep b/static/.gitkeep deleted file mode 100644 index e69de29..0000000