feat: 添加全局大小设置

src/components/SizeSelect/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <el-dropdown trigger="click" @command="handleSetSize">
+    <div class="size-icon--style">
+      <svg-icon class-name="size-icon" icon-class="size"/>
+    </div>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item
+            v-for="item of sizeOptions"
+            :key="item.value"
+            :disabled="(size||'default')==item.value"
+            :command="item.value">
+          {{ item.label }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup lang="ts">
+
+import {ref, computed} from "vue";
+import {useRoute, useRouter} from "vue-router"
+
+import {ElMessage} from 'element-plus'
+
+import {useAppStoreHook} from '@/store/modules/app'
+import SvgIcon from '@/components/SvgIcon/index.vue'
+
+const route = useRoute()
+const router = useRouter()
+const size = computed(() => useAppStoreHook().size)
+
+const sizeOptions = ref([
+  {label: '默认', value: 'default'},
+  {label: '大型', value: 'large'},
+  {label: '小型', value: 'small'}
+])
+
+function handleSetSize(size: string) {
+  useAppStoreHook().setSize(size)
+  window.location.reload()
+  ElMessage.success('切换全局大小成功')
+}
+
+</script>
+
+<style lang='scss' scoped>
+.size-icon--style {
+  font-size: 18px;
+  line-height: 50px;
+  padding-right: 7px;
+}
+</style>

src/main.ts

@@ -2,10 +2,11 @@ import {createApp, Directive} from 'vue'
 import App from './App.vue'
 import router from "./router";
 import '@/styles/index.scss'
-import { store } from "./store";
+import {store} from "@/store";
 import ElementPlus from 'element-plus'
 import 'element-plus/theme-chalk/index.css'
 import locale from 'element-plus/lib/locale/lang/zh-cn'
+import {Local} from "@/utils/storage";
 import 'virtual:svg-icons-register';
 
 // @see https://blog.csdn.net/qq_37213281/article/details/121422027
@@ -19,6 +20,8 @@ const app = createApp(App)
 
 // 自定义指令
 import * as directive from "@/directive";
+
+
 Object.keys(directive).forEach(key => {
     app.directive(key, (directive as { [key: string]: Directive })[key]);
 });
@@ -30,8 +33,9 @@ for (let iconName in ElIconModules) {
 
 // 全局方法
 app.config.globalProperties.$listDictsByCode = listDictsByCode
+
 app.component('Pagination', Pagination) // 全局组件
-     .use(store)
+    .use(store)
     .use(router)
-    .use(ElementPlus, {locale})
+    .use(ElementPlus, {locale: locale, size: Local.get('size')||'small'})
     .mount('#app')

src/store/modules/app.ts

@@ -1,21 +1,21 @@
 import {AppState} from "@/store/interface";
 import {Local} from "@/utils/storage";
-import { store } from "@/store";
-import { defineStore } from "pinia";
+import {store} from "@/store";
+import {defineStore} from "pinia";
 
 export const useAppStore = defineStore({
     id: "app",
-    state: ():AppState=>({
+    state: (): AppState => ({
         device: 'desktop',
         sidebar: {
             opened: Local.get('sidebarStatus') ? !!+Local.get('sidebarStatus') : true,
             withoutAnimation: false
         },
-        language:'zh',
-        size:'medium'
+        language: 'zh',
+        size: Local.get('size')||'default'
     }),
     actions: {
-         toggleSidebar() {
+        toggleSidebar() {
             this.sidebar.opened = !this.sidebar.opened
             this.sidebar.withoutAnimation = false
             if (this.sidebar.opened) {
@@ -24,16 +24,21 @@ export const useAppStore = defineStore({
                 Local.set('sidebarStatus', 0)
             }
         },
-         closeSideBar ( withoutAnimation:any) {
+        closeSideBar(withoutAnimation: any) {
             Local.set('sidebarStatus', 0)
             this.sidebar.opened = false
             this.sidebar.withoutAnimation = withoutAnimation
         },
-        toggleDevice( device:any) {
+        toggleDevice(device: string) {
             this.device = device
+        },
+        setSize(size: string) {
+            this.size = size
+            Local.set('size', size)
         }
     }
 })
+
 export function useAppStoreHook() {
     return useAppStore(store);
 }

src/store/modules/tagsView.ts

@@ -2,7 +2,7 @@ import {defineStore} from "pinia";
 import {store} from "@/store";
 import {TagsViewState} from "@/store/interface";
 
-const tagsViewStore = defineStore({
+const useTagsViewStore = defineStore({
     id: "tagsView",
     state: (): TagsViewState => ({
         visitedViews: [],
@@ -174,7 +174,7 @@ const tagsViewStore = defineStore({
 })
 
 
-export function tagsViewStoreHook() {
-    return tagsViewStore(store);
+export function useTagsViewStoreHook() {
+    return useTagsViewStore(store);
 }