导航菜单支持切换大小

Web/src/components/CardPro/index.vue

@@ -1,6 +1,6 @@
 <template>
-    <el-card v-bind="$attrs">
-        <template #header>
+    <el-card v-bind="$attrs" :class="sizeClass">
+        <template #header v-if="title || $slots.prefix || prefixIcon || $slots.suffix || suffix">
             <div class="cardpro-header">
                 <div v-if="$slots.prefix || prefixIcon" class="cardpro-header-prefix">
                     <slot v-if="$slots.prefix" name="prefix" />
@@ -8,7 +8,7 @@
                         <component :is="prefixIcon" />
                     </el-icon>
                 </div>
-                <div :class="['cardpro-header-title', sizeClass]">
+                <div class="cardpro-header-title">
                     <span>{{ props.title }}</span>
                 </div>
                 <div v-if="$slots.suffix || suffix" class="cardpro-header-suffix">
@@ -61,8 +61,9 @@ const sizeClass = computed(() => {
         margin-right: 5px;
         display: flex;
         align-items: center;
+        margin-top: 1px;
     }
-    &-title { flex: 1 }
+    &-title { flex: 1; padding: var(--cardpro-padding) 0; }
     &-suffix {
         height: 100%;
         margin-left: 5px;
@@ -70,16 +71,19 @@ const sizeClass = computed(() => {
 }
 
 .cardpro-small {
-    padding: 10px 0;
+    --cardpro-padding: 10px
 }
 .cardpro-default {
-    padding: 15px 0;
+    --cardpro-padding: 15px
 }
 .cardpro-large {
-    padding: 20px 0;
+    --cardpro-padding: 20px
 }
 
 :deep(.el-card__header) {
-    padding: 0 20px;
+    padding: 0 var(--cardpro-padding);
+}
+:deep(.el-card__body) {
+    padding: var(--cardpro-padding);
 }
 </style>

Web/src/layout/navBars/topBar/user.vue

@@ -89,6 +89,7 @@
 
 <script setup lang="ts" name="layoutBreadcrumbUser">
 import { defineAsyncComponent, ref, computed, reactive, onMounted } from 'vue';
+import { useCssVar } from '@vueuse/core'
 import { useRouter } from 'vue-router';
 import { ElMessageBox, ElMessage, ElNotification } from 'element-plus';
 import screenfull from 'screenfull';
@@ -233,6 +234,13 @@ const onLanguageChange = (lang: string) => {
 // 初始化组件大小/i18n
 const initI18nOrSize = (value: string, attr: string) => {
 	(<any>state)[attr] = Local.get('themeConfig')[value];
+
+    // 设置菜单高度-横向
+    useCssVar('--el-menu-horizontal-height').value = 'var(--el-menu-item-height-' + themeConfig.value.globalComponentSize + ')';
+    useCssVar('--el-menu-horizontal-sub-item-height').value = 'var(--el-menu-item-height-' + themeConfig.value.globalComponentSize + ')';
+    // 设置菜单高度-纵向
+    useCssVar('--el-menu-item-height').value = 'var(--el-menu-item-height-' + themeConfig.value.globalComponentSize + ')';
+    useCssVar('--el-menu-sub-item-height').value = 'var(--el-menu-item-height-' + themeConfig.value.globalComponentSize + ')';
 };
 // 页面加载时
 onMounted(async () => {

Web/src/views/system/infoSetting/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<el-card shadow="hover" v-loading="state.isLoading" style="height: 100%;">
+		<CardPro shadow="hover" v-loading="state.isLoading" style="height: 100%;">
 			<el-descriptions title="系统信息配置" :column="2" :border="true">
 				<template #title>
 					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Setting /> </el-icon> 系统信息配置
@@ -50,7 +50,7 @@
 					<el-button type="primary" icon="ele-SuccessFilled" @click="onSave">保存</el-button>
 				</template>
 			</el-descriptions>
-		</el-card>
+		</CardPro>
 	</div>
 </template>
 
@@ -62,6 +62,7 @@ import { fileToBase64 } from '/@/utils/base64Conver';
 import { getAPI } from '/@/utils/axios-utils';
 import { SysConfigApi } from '/@/api-services';
 import GSysDict from '/@/components/sysDict/sysDict.vue';
+import CardPro from '/@/components/CardPro/index.vue';
 
 const uploadRef = ref<UploadInstance>();
 const state = reactive({