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 @@
+<template>
+ <el-dropdown trigger="click" @command="handleSetSize">
+ <div>
+ <svg-icon class-name="size-icon" icon-class="size" />
+ </div>
+ <el-dropdown-menu slot="dropdown">
+ <el-dropdown-item :disabled="size==='medium'" command="medium">Medium</el-dropdown-item>
+ <el-dropdown-item :disabled="size==='small'" command="small">Small</el-dropdown-item>
+ <el-dropdown-item :disabled="size==='mini'" command="mini">Mini</el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
+</template>
+
+<script>
+export default {
+ computed: {
+ size() {
+ return this.$store.getters.size
+ }
+ },
+ methods: {
+ handleSetSize(size) {
+ this.$ELEMENT.size = size
+ this.$store.dispatch('setSize', size)
+ this.refreshView()
+ this.$message({
+ message: 'Switch Size Success',
+ type: 'success'
+ })
+ },
+ refreshView() {
+ // In order to make the cached page re-rendered
+ const visitedViews = [...this.$store.getters.visitedViews].map(i => {
+ i.meta.noCache = true
+ return i
+ })
+
+ this.$store.dispatch('delAllViews', this.$route).then(() => {
+ console.log(visitedViews)
+ for (const i of visitedViews) {
+ this.$store.dispatch('addVisitedViews', i)
+ }
+ })
+
+ const { path } = this.$route
+
+ this.$router.replace({
+ path: '/redirect' + path
+ })
+ }
+ }
+
+}
+</script>
+
+<style scoped>
+.size-icon {
+ font-size: 20px;
+ cursor: pointer;
+ vertical-align: -4px!important;
+}
+</style>
+
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 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1535513021233" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13539" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: rbicon; src: url("chrome-extension://dipiagiiohfljcicegpgffpbnjmgjcnf/fonts/rbicon.woff2") format("woff2"); font-weight: normal; font-style: normal; }
+</style></defs><path d="M64 512l384 0 0 128-128 0 0 384-128 0 0-384-128 0zM960 256l-251.74016 0 0 768-136.4992 0 0-768-251.74016 0 0-128 640 0z" p-id="13540"></path></svg>
\ 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 @@
<screenfull class="screenfull right-menu-item"/>
</el-tooltip>
+ <el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
+ <size-select class="international right-menu-item"/>
+ </el-tooltip>
+
<lang-select class="international right-menu-item"/>
<el-tooltip :content="$t('navbar.theme')" effect="dark" placement="bottom">
@@ -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 @@
+<script>
+export default {
+ beforeCreate() {
+ const path = this.$route.params.path
+ this.$router.replace('/' + path)
+ },
+ render: function(h) {
+ return h() // avoid warning message
+ }
+}
+</script>