From 3fbbe8a7f0d262aad1dae34c81d212457e114aa6 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Wed, 29 Aug 2018 14:58:38 +0800
Subject: [PATCH] add global size option

---
 src/components/SizeSelect/index.vue    | 61 ++++++++++++++++++++++++++
 src/icons/svg/size.svg                 |  2 +
 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 |  4 ++
 src/views/redirect/index.vue           | 11 +++++
 8 files changed, 102 insertions(+), 2 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/SizeSelect/index.vue b/src/components/SizeSelect/index.vue
new file mode 100644
index 00000000..77f931c6
--- /dev/null
+++ b/src/components/SizeSelect/index.vue
@@ -0,0 +1,61 @@
+<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() {
+      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: -5px!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/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..95eae4cd 100644
--- a/src/views/layout/components/Navbar.vue
+++ b/src/views/layout/components/Navbar.vue
@@ -11,6 +11,8 @@
         <screenfull class="screenfull right-menu-item"/>
       </el-tooltip>
 
+      <size-select class="international right-menu-item"/>
+
       <lang-select class="international right-menu-item"/>
 
       <el-tooltip :content="$t('navbar.theme')" effect="dark" placement="bottom">
@@ -48,6 +50,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 +60,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>