fix: 修复-全局组件大小

Author: midfar

src/App.vue

@@ -8,16 +8,20 @@
 import { defineComponent } from 'vue';
 import { ElConfigProvider } from 'element-plus';
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
+import { mapState } from 'pinia';
+import store from '@/store';
 
 export default defineComponent({
   components: {
     ElConfigProvider
   },
+  computed: {
+    ...mapState(store.app, ['size'])
+  },
   data() {
     return {
       locale: zhCn,
-      zIndex: 3000,
-      size: 'default'
+      zIndex: 3000
     };
   }
 });

src/components/SizeSelect/index.vue

@@ -24,7 +24,7 @@ export default defineComponent({
       sizeOptions: [
         { label: 'Default', value: 'default' },
         { label: 'Large', value: 'large' },
-        { label: 'small', value: 'default' }
+        { label: 'Small', value: 'small' }
       ]
     };
   },
@@ -35,7 +35,6 @@ export default defineComponent({
   },
   methods: {
     handleSetSize(size) {
-      this.$ELEMENT.size = size;
       store.app().setSize(size);
       this.refreshView();
       ElMessage({

src/layout/components/Navbar.vue

@@ -13,9 +13,9 @@
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
-        <!-- <el-tooltip content="Global Size" effect="dark" placement="bottom">
+        <el-tooltip content="Global Size" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip> -->
+        </el-tooltip>
 
       </template>
 
@@ -57,7 +57,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 SizeSelect from '@/components/SizeSelect';
 import Search from '@/components/HeaderSearch';
 import { defineComponent } from 'vue';
 import { CaretBottom } from '@element-plus/icons-vue';
@@ -68,7 +68,7 @@ export default defineComponent({
     Hamburger,
     ErrorLog,
     Screenfull,
-    // SizeSelect,
+    SizeSelect,
     Search,
     CaretBottom
   },

src/store/modules/app.ts

@@ -7,7 +7,7 @@ interface IAppState {
     withoutAnimation: boolean;
   };
   device: 'desktop' | 'mobile';
-  size: string;
+  size: 'large' | 'default' | 'small';
 }
 
 export default defineStore({
@@ -18,7 +18,7 @@ export default defineStore({
       withoutAnimation: false
     },
     device: 'desktop',
-    size: Cookies.get('size') || 'medium'
+    size: Cookies.get('size') || 'default'
   }),
   getters: {},
   actions: {