'admin-21.04.29:新增分栏布局时分栏菜单背景渐变功能'

src/i18n/lang/en.ts

@@ -109,6 +109,7 @@ export default {
 		twoColumnsMenuBarColor: 'Default font color bar menu',
 		twoIsTopBarColorGradual: 'Top bar gradient',
 		twoIsMenuBarColorGradual: 'Menu gradient',
+		twoIsColumnsMenuBarColorGradual: 'Column gradient',
 		twoIsMenuBarColorHighlight: 'Menu font highlight',
 		threeTitle: 'Interface settings',
 		threeIsCollapse: 'Menu horizontal collapse',

src/i18n/lang/zh-cn.ts

@@ -109,6 +109,7 @@ export default {
 		twoColumnsMenuBarColor: '分栏菜单默认字体颜色',
 		twoIsTopBarColorGradual: '顶栏背景渐变',
 		twoIsMenuBarColorGradual: '菜单背景渐变',
+		twoIsColumnsMenuBarColorGradual: '分栏菜单背景渐变',
 		twoIsMenuBarColorHighlight: '菜单字体背景高亮',
 		threeTitle: '界面设置',
 		threeIsCollapse: '菜单水平折叠',

src/i18n/lang/zh-tw.ts

@@ -109,6 +109,7 @@ export default {
 		twoColumnsMenuBarColor: '分欄選單默認字體顏色',
 		twoIsTopBarColorGradual: '頂欄背景漸變',
 		twoIsMenuBarColorGradual: '選單背景漸變',
+		twoIsColumnsMenuBarColorGradual: '分欄選單背景漸變',
 		twoIsMenuBarColorHighlight: '選單字體背景高亮',
 		threeTitle: '介面設定',
 		threeIsCollapse: '選單水准折疊',

src/store/interface/index.ts

@@ -17,6 +17,7 @@ declare interface ThemeConfigState {
 		columnsMenuBarColor: string;
 		isTopBarColorGradual: boolean;
 		isMenuBarColorGradual: boolean;
+		isColumnsMenuBarColorGradual: boolean;
 		isMenuBarColorHighlight: boolean;
 		isCollapse: boolean;
 		isUniqueOpened: boolean;

src/store/modules/themeConfig.ts

@@ -38,6 +38,8 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
 			isTopBarColorGradual: false,
 			// 是否开启菜单背景颜色渐变
 			isMenuBarColorGradual: false,
+			// 是否开启分栏菜单背景颜色渐变
+			isColumnsMenuBarColorGradual: false,
 			// 是否开启菜单字体背景高亮
 			isMenuBarColorHighlight: false,
 			// 是否开启菜单字体背景高亮

src/views/layout/navBars/breadcrumb/setings.vue

@@ -94,6 +94,12 @@
 						<el-switch v-model="getThemeConfig.isMenuBarColorGradual" @change="onMenuBarGradualChange"></el-switch>
 					</div>
 				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt14">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoIsColumnsMenuBarColorGradual') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-switch v-model="getThemeConfig.isColumnsMenuBarColorGradual" @change="onColumnsMenuBarGradualChange"></el-switch>
+					</div>
+				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt14">
 					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoIsMenuBarColorHighlight') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
@@ -385,6 +391,7 @@ export default defineComponent({
 			document.documentElement.style.setProperty(`--bg-${bg}`, getThemeConfig.value[bg]);
 			onTopBarGradualChange();
 			onMenuBarGradualChange();
+			onColumnsMenuBarGradualChange();
 			setDispatchThemeConfig();
 		};
 		// 2、菜单 / 顶栏 --> 顶栏背景渐变
@@ -395,6 +402,10 @@ export default defineComponent({
 		const onMenuBarGradualChange = () => {
 			setGraduaFun('.layout-container .el-aside', getThemeConfig.value.isMenuBarColorGradual, getThemeConfig.value.menuBar);
 		};
+		// 2、菜单 / 顶栏 --> 分栏菜单背景渐变
+		const onColumnsMenuBarGradualChange = () => {
+			setGraduaFun('.layout-container .layout-columns-aside', getThemeConfig.value.isColumnsMenuBarColorGradual, getThemeConfig.value.columnsMenuBar);
+		};
 		// 2、菜单 / 顶栏 --> 背景渐变函数
 		const setGraduaFun = (el: string, bool: boolean, color: string) => {
 			nextTick(() => {
@@ -405,8 +416,10 @@ export default defineComponent({
 				setLocalThemeConfig();
 				const elNavbars: any = document.querySelector('.layout-navbars-breadcrumb-index');
 				const elAside: any = document.querySelector('.layout-container .el-aside');
+				const elColumns: any = document.querySelector('.layout-container .layout-columns-aside');
 				if (elNavbars) setLocal('navbarsBgStyle', elNavbars.style.cssText);
 				if (elAside) setLocal('asideBgStyle', elAside.style.cssText);
+				if (elColumns) setLocal('columnsBgStyle', elColumns.style.cssText);
 			});
 		};
 		// 2、菜单 / 顶栏 --> 菜单字体背景高亮
@@ -621,6 +634,11 @@ export default defineComponent({
 							const asideEl: any = document.querySelector('.layout-container .el-aside');
 							asideEl.style.cssText = getLocal('asideBgStyle');
 						}
+						// 分栏菜单背景渐变
+						if (getLocal('columnsBgStyle') && getThemeConfig.value.isMenuBarColorGradual) {
+							const asideEl: any = document.querySelector('.layout-container .layout-columns-aside');
+							asideEl.style.cssText = getLocal('columnsBgStyle');
+						}
 						// 菜单字体背景高亮
 						if (getLocal('menuBarHighlightId') && getThemeConfig.value.isMenuBarColorHighlight) {
 							let els = document.querySelector('.el-menu-item.is-active');
@@ -651,6 +669,7 @@ export default defineComponent({
 			onBgColorPickerChange,
 			onTopBarGradualChange,
 			onMenuBarGradualChange,
+			onColumnsMenuBarGradualChange,
 			onMenuBarHighlightChange,
 			onThemeConfigChange,
 			onIsFixedHeaderChange,