From 0fbda3c8c7d4491cf7da9bd7c7054f4244f6a175 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= Date: Wed, 29 Aug 2018 15:24:47 +0800 Subject: [PATCH] feature: add global size option (#1024) --- src/components/LangSelect/index.vue | 2 +- src/components/SizeSelect/index.vue | 63 ++++++++++++++++++++++++++ src/icons/svg/size.svg | 2 + src/lang/en.js | 5 +- src/lang/zh.js | 3 +- src/main.js | 4 +- src/router/index.js | 11 +++++ src/store/getters.js | 1 + src/store/modules/app.js | 10 +++- src/views/layout/components/Navbar.vue | 6 +++ src/views/redirect/index.vue | 11 +++++ 11 files changed, 112 insertions(+), 6 deletions(-) create mode 100644 src/components/SizeSelect/index.vue create mode 100644 src/icons/svg/size.svg create mode 100644 src/views/redirect/index.vue diff --git a/src/components/LangSelect/index.vue b/src/components/LangSelect/index.vue index ea381277..31cc80d0 100644 --- a/src/components/LangSelect/index.vue +++ b/src/components/LangSelect/index.vue @@ -22,7 +22,7 @@ export default { this.$i18n.locale = lang this.$store.dispatch('setLanguage', lang) this.$message({ - message: 'switch language success', + message: 'Switch Language Success', type: 'success' }) } diff --git a/src/components/SizeSelect/index.vue b/src/components/SizeSelect/index.vue new file mode 100644 index 00000000..ffc4f77a --- /dev/null +++ b/src/components/SizeSelect/index.vue @@ -0,0 +1,63 @@ + + + + + + diff --git a/src/icons/svg/size.svg b/src/icons/svg/size.svg new file mode 100644 index 00000000..def290f7 --- /dev/null +++ b/src/icons/svg/size.svg @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/src/lang/en.js b/src/lang/en.js index 52fe707d..677df4fd 100644 --- a/src/lang/en.js +++ b/src/lang/en.js @@ -67,8 +67,9 @@ export default { logOut: 'Log Out', dashboard: 'Dashboard', github: 'Github', - screenfull: 'screenfull', - theme: 'theme' + screenfull: 'Screenfull', + theme: 'Theme', + size: 'Global Size' }, login: { title: 'Login Form', diff --git a/src/lang/zh.js b/src/lang/zh.js index ee182ec4..c8f494f0 100644 --- a/src/lang/zh.js +++ b/src/lang/zh.js @@ -68,7 +68,8 @@ export default { dashboard: '首页', github: '项目地址', screenfull: '全屏', - theme: '换肤' + theme: '换肤', + size: '布局大小' }, login: { title: '系统登录', diff --git a/src/main.js b/src/main.js index 1dc4af9e..1ce709c9 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,7 @@ import Vue from 'vue' +import Cookies from 'js-cookie' + import 'normalize.css/normalize.css' // A modern alternative to CSS resets import Element from 'element-ui' @@ -20,7 +22,7 @@ import './mock' // simulation data import * as filters from './filters' // global filters Vue.use(Element, { - size: 'medium', // set element-ui default size + size: Cookies.get('size') || 'medium', // set element-ui default size i18n: (key, value) => i18n.t(key, value) }) diff --git a/src/router/index.js b/src/router/index.js index 6c0c0f0d..2daae31f 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -31,6 +31,17 @@ import nestedRouter from './modules/nested' } **/ export const constantRouterMap = [ + { + path: '/redirect', + component: Layout, + hidden: true, + children: [ + { + path: '/redirect/:path*', + component: () => import('@/views/redirect/index') + } + ] + }, { path: '/login', component: () => import('@/views/login/index'), diff --git a/src/store/getters.js b/src/store/getters.js index d68251fd..cf314f5c 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -1,6 +1,7 @@ const getters = { sidebar: state => state.app.sidebar, language: state => state.app.language, + size: state => state.app.size, device: state => state.app.device, visitedViews: state => state.tagsView.visitedViews, cachedViews: state => state.tagsView.cachedViews, diff --git a/src/store/modules/app.js b/src/store/modules/app.js index d89664f8..bc4fb478 100644 --- a/src/store/modules/app.js +++ b/src/store/modules/app.js @@ -7,7 +7,8 @@ const app = { withoutAnimation: false }, device: 'desktop', - language: Cookies.get('language') || 'en' + language: Cookies.get('language') || 'en', + size: Cookies.get('size') || 'medium' }, mutations: { TOGGLE_SIDEBAR: state => { @@ -30,6 +31,10 @@ const app = { SET_LANGUAGE: (state, language) => { state.language = language Cookies.set('language', language) + }, + SET_SIZE: (state, size) => { + state.size = size + Cookies.set('size', size) } }, actions: { @@ -44,6 +49,9 @@ const app = { }, setLanguage({ commit }, language) { commit('SET_LANGUAGE', language) + }, + setSize({ commit }, size) { + commit('SET_SIZE', size) } } } diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue index 07244584..08f3f9d0 100644 --- a/src/views/layout/components/Navbar.vue +++ b/src/views/layout/components/Navbar.vue @@ -11,6 +11,10 @@ + + + + @@ -48,6 +52,7 @@ import Breadcrumb from '@/components/Breadcrumb' import Hamburger from '@/components/Hamburger' import ErrorLog from '@/components/ErrorLog' import Screenfull from '@/components/Screenfull' +import SizeSelect from '@/components/SizeSelect' import LangSelect from '@/components/LangSelect' import ThemePicker from '@/components/ThemePicker' @@ -57,6 +62,7 @@ export default { Hamburger, ErrorLog, Screenfull, + SizeSelect, LangSelect, ThemePicker }, diff --git a/src/views/redirect/index.vue b/src/views/redirect/index.vue new file mode 100644 index 00000000..fdf0a897 --- /dev/null +++ b/src/views/redirect/index.vue @@ -0,0 +1,11 @@ +