!1156 布局配置增加分栏Logo高度、分栏菜单宽度、分栏菜单高度

Merge pull request !1156 from inypeacock/next

Web/src/i18n/lang/en.ts

@@ -143,6 +143,9 @@ export default {
 		twoColumnsMenuBarColor: 'Default font color bar menu',
 		twoIsColumnsMenuBarColorGradual: 'Column gradient',
 		twoIsColumnsMenuHoverPreload: 'Column Menu Hover Preload',
+		twoColumnsLogoHeight: 'Column Logo Height(px)',
+		twoColumnsMenuWidth: 'Column Menu Width(px)',
+		twoColumnsMenuHeight: 'Column Menu Height(px)',
 		threeTitle: 'Interface settings',
 		threeIsCollapse: 'Menu horizontal collapse',
 		threeIsUniqueOpened: 'Menu accordion',

Web/src/i18n/lang/zh-cn.ts

@@ -143,6 +143,9 @@ export default {
 		twoColumnsMenuBarColor: '分栏菜单默认字体颜色',
 		twoIsColumnsMenuBarColorGradual: '分栏菜单背景渐变',
 		twoIsColumnsMenuHoverPreload: '分栏菜单鼠标悬停预加载',
+		twoColumnsLogoHeight: '分栏Logo高度(px)',
+		twoColumnsMenuWidth: '分栏菜单宽度(px)',
+		twoColumnsMenuHeight: '分栏菜单高度(px)',
 		threeTitle: '界面设置',
 		threeIsCollapse: '菜单水平折叠',
 		threeIsUniqueOpened: '菜单手风琴',

Web/src/i18n/lang/zh-tw.ts

@@ -143,6 +143,9 @@ export default {
 		twoColumnsMenuBarColor: '分欄選單默認字體顏色',
 		twoIsColumnsMenuBarColorGradual: '分欄選單背景漸變',
 		twoIsColumnsMenuHoverPreload: '分欄選單滑鼠懸停預加載',
+		twoColumnsLogoHeight: '分欄Logo高度(px)',
+		twoColumnsMenuWidth: '分欄選單寬度(px)',
+		twoColumnsMenuHeight: '分欄菜單高度(px)',
 		threeTitle: '介面設定',
 		threeIsCollapse: '選單水准折疊',
 		threeIsUniqueOpened: '選單手風琴',

Web/src/layout/component/columnsAside.vue

@@ -218,7 +218,7 @@ watch(
 
 <style scoped lang="scss">
 .layout-columns-aside {
-	width: 70px;
+	width: var(--el-columnsMenuWidth);
 	height: 100%;
 	background: var(--next-bg-columnsMenuBar);
 	ul {
@@ -237,7 +237,7 @@ watch(
 		li {
 			color: var(--next-bg-columnsMenuBarColor);
 			width: 100%;
-			height: 50px;
+			height: var(--el-columnsMenuHeight);
 			text-align: center;
 			display: flex;
 			cursor: pointer;
@@ -254,7 +254,7 @@ watch(
 			}
 			.columns-horizontal {
 				display: flex;
-				height: 50px;
+				height: var(--el-columnsMenuHeight);
 				width: 100%;
 				align-items: center;
 				padding: 0 5px;
@@ -279,8 +279,8 @@ watch(
 			position: absolute;
 			left: 50%;
 			top: 2px;
-			height: 44px;
-			width: 65px;
+			height: var(--el-columnsMenuRoundHeight);
+			width: var(--el-columnsMenuRoundWidth);
 			transform: translateX(-50%);
 			z-index: 0;
 			transition: 0.3s ease-in-out;
@@ -289,7 +289,7 @@ watch(
 		.columns-card {
 			@extend .columns-round;
 			top: 0;
-			height: 50px;
+			height: var(--el-columnsMenuHeight);
 			width: 100%;
 			border-radius: 0;
 		}
@@ -297,7 +297,7 @@ watch(
 }
 
 .layout-logo {
-	height: 50px;
+	height: var(--el-columnsLogoHeight);
 	display: flex;
 	align-items: center;
 	justify-content: center;

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

@@ -93,6 +93,27 @@
 						<el-switch v-model="getThemeConfig.isColumnsMenuHoverPreload" size="small" @change="onColumnsMenuHoverPreloadChange" :disabled="getThemeConfig.layout !== 'columns'"></el-switch>
 					</div>
 				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt11">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoColumnsLogoHeight') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-input-number v-model="getThemeConfig.columnsLogoHeight" controls-position="right" :min="1" :max="9999" @change="onColumnsLogoHeightChange" size="small" style="width: 90px; margin-right: 1px">
+						</el-input-number>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt11">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoColumnsMenuWidth') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-input-number v-model="getThemeConfig.columnsMenuWidth" controls-position="right" :min="1" :max="9999" @change="onColumnsMenuWidthChange" size="small" style="width: 90px; margin-right: 1px">
+						</el-input-number>
+					</div>
+				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt11">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoColumnsMenuHeight') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-input-number v-model="getThemeConfig.columnsMenuHeight" controls-position="right" :min="1" :max="9999" @change="onColumnsMenuHeightChange" size="small" style="width: 90px; margin-right: 1px">
+						</el-input-number>
+					</div>
+				</div>
 
 				<!-- 界面设置 -->
 				<el-divider content-position="center">{{ $t('message.layout.threeTitle') }}</el-divider>
@@ -414,6 +435,15 @@ const state = reactive({
 
 // 获取布局配置信息
 const getThemeConfig = computed(() => {
+	if (!themeConfig.value.columnsMenuWidth) {
+		themeConfig.value.columnsMenuWidth = 70;
+	}
+	if (!themeConfig.value.columnsMenuHeight) {
+		themeConfig.value.columnsMenuHeight = 50;
+	}
+	if (!themeConfig.value.columnsLogoHeight) {
+		themeConfig.value.columnsLogoHeight = 50;
+	}
 	return themeConfig.value;
 });
 // 1、全局主题
@@ -464,10 +494,27 @@ const setGraduaFun = (el: string, bool: boolean, color: string) => {
 		}, 300);
 	});
 };
-// 2、分栏设置 ->
+// 2、分栏设置 -> 分栏菜单鼠标悬停预加载
 const onColumnsMenuHoverPreloadChange = () => {
 	setLocalThemeConfig();
 };
+// 2、分栏设置 -> 分栏Logo高度
+const onColumnsLogoHeightChange = () => {
+	document.documentElement.style.setProperty('--el-columnsLogoHeight', `${themeConfig.value.columnsLogoHeight}px`);
+	setLocalThemeConfig();
+};
+// 2、分栏设置 -> 分栏菜单宽度
+const onColumnsMenuWidthChange = () => {
+	document.documentElement.style.setProperty('--el-columnsMenuWidth', `${themeConfig.value.columnsMenuWidth}px`);
+	document.documentElement.style.setProperty('--el-columnsMenuRoundWidth', `${themeConfig.value.columnsMenuWidth - 5}px`);
+	setLocalThemeConfig();
+};
+// 2、分栏设置 -> 分栏菜单高度
+const onColumnsMenuHeightChange = () => {
+	document.documentElement.style.setProperty('--el-columnsMenuHeight', `${themeConfig.value.columnsMenuHeight}px`);
+	document.documentElement.style.setProperty('--el-columnsMenuRoundHeight', `${themeConfig.value.columnsMenuHeight - 5}px`);
+	setLocalThemeConfig();
+};
 // 3、界面设置 --> 菜单水平折叠
 const onThemeConfigChange = () => {
 	setDispatchThemeConfig();
@@ -626,6 +673,12 @@ onMounted(() => {
 			if (getThemeConfig.value.isIsDark) onAddDarkChange();
 			// 开启水印
 			onWatermarkChange();
+			// 设置分栏Logo高度
+			onColumnsLogoHeightChange();
+			// 设置分栏菜单宽度
+			onColumnsMenuWidthChange();
+			// 设置分栏菜单高度
+			onColumnsMenuHeightChange();
 			// 语言国际化
 			if (Local.get('themeConfig')) locale.value = Local.get('themeConfig').globalI18n;
 			// 初始化菜单样式等

Web/src/stores/themeConfig.ts

@@ -47,6 +47,12 @@ export const useThemeConfig = defineStore('themeConfig', {
 			isColumnsMenuBarColorGradual: false,
 			// 是否开启分栏菜单鼠标悬停预加载(预览菜单)
 			isColumnsMenuHoverPreload: false,
+			// 分栏Logo高度(px)
+			columnsLogoHeight: 50,
+			// 分栏菜单宽度(px)
+			columnsMenuWidth: 70,
+			// 分栏菜单高度(px)
+			columnsMenuHeight: 50,
 
 			/**
 			 * 界面设置

Web/src/types/pinia.d.ts

@@ -58,6 +58,9 @@ declare interface ThemeConfigState {
 		columnsMenuBarColor: string;
 		isColumnsMenuBarColorGradual: boolean;
 		isColumnsMenuHoverPreload: boolean;
+		columnsLogoHeight: number;
+		columnsMenuWidth: number;
+		columnsMenuHeight: number;
 		isCollapse: boolean;
 		isUniqueOpened: boolean;
 		isFixedHeader: boolean;