feature: add global size option (#1024)

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

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