'admin-21.05.28:修复布局配置设置初始值不生效问题'

src/store/modules/themeConfig.ts

@@ -2,6 +2,10 @@ import { Module } from 'vuex';
 // 此处加上 `.ts` 后缀报错，具体原因不详
 import { ThemeConfigState, RootStateTypes } from '/@/store/interface/index';
 
+/**
+ * 2020.05.28 by lyt 优化
+ * 修改一下配置时，需要每次都清理 `window.localStorage` 浏览器永久缓存，配置才会生效
+ */
 const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
 	namespaced: true,
 	state: {
@@ -9,8 +13,9 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
 			// 是否开启布局配置抽屉
 			isDrawer: false,
 
-			/* 全局主题
-            ------------------------------- */
+			/**
+			 * 全局主题
+			 */
 			// 默认 primary 颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
 			primary: '#409eff',
 			// 默认 success 颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
@@ -22,8 +27,11 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
 			// 默认 danger 颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
 			danger: '#f56c6c',
 
-			/* 菜单 / 顶栏
-            ------------------------------- */
+			/**
+			 * 菜单 / 顶栏
+			 * 注意：为了演示，切换布局时，颜色会被还原成默认，代码位置：/@/views/layout/navBars/breadcrumb/setings.vue
+			 * 中的 `initSetLayoutChange(设置布局切换，重置主题样式)` 方法
+			 */
 			// 默认顶栏导航背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
 			topBar: '#ffffff',
 			// 默认菜单导航背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
@@ -46,8 +54,9 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
 			isMenuBarColorHighlight: false,
 			// 是否开启菜单字体背景高亮
 
-			/* 界面设置
-            ------------------------------- */
+			/**
+			 * 界面设置
+			 */
 			// 是否开启菜单水平折叠效果
 			isCollapse: false,
 			// 是否开启菜单手风琴效果
@@ -63,13 +72,14 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
 			// 开启自动锁屏倒计时(s/秒)
 			lockScreenTime: 30,
 
-			/* 界面显示
-            ------------------------------- */
+			/**
+			 * 界面显示
+			 */
 			// 是否开启侧边栏 Logo
 			isShowLogo: false,
 			// 初始化变量，用于 el-scrollbar 的高度更新，请勿删除
 			isShowLogoChange: false,
-			// 是否开启 Breadcrumb
+			// 是否开启 Breadcrumb，强制经典、横向布局不显示
 			isBreadcrumb: true,
 			// 是否开启 Tagsview
 			isTagsview: true,
@@ -92,29 +102,35 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
 			// 水印文案
 			wartermarkText: 'small@小柒',
 
-			/* 其它设置
-            ------------------------------- */
-			// 默认 Tagsview 风格，可选 1、 tags-style-one 2、 tags-style-two 3、 tags-style-three 4、 tags-style-four
+			/**
+			 * 其它设置
+			 */
+			// Tagsview 风格：可选值"<tags-style-one|tags-style-two|tags-style-three|tags-style-four>"，默认 tags-style-one
 			tagsStyle: 'tags-style-one',
-			// 默认主页面切换动画，可选 1、 slide-right 2、 slide-left 3、 opacitys
+			// 主页面切换动画：可选值"<slide-right|slide-left|opacitys>"，默认 slide-right
 			animation: 'slide-right',
-			// 默认分栏高亮风格，可选 1、 圆角 columns-round 2、 卡片 columns-card
+			// 分栏高亮风格：可选值"<columns-round|columns-card>"，默认 columns-round
 			columnsAsideStyle: 'columns-round',
-			// 默认分栏布局风格，可选 1、 水平 columns-horizontal 2、 垂直 columns-vertical
+			// 分栏布局风格：可选值"<columns-horizontal|columns-vertical>"，默认 columns-horizontal
 			columnsAsideLayout: 'columns-vertical',
 
-			/* 布局切换
-            ------------------------------- */
-			// 默认布局，可选 1、默认 defaults 2、经典 classic 3、横向 transverse 4、分栏 columns
+			/**
+			 * 布局切换
+			 * 注意：为了演示，切换布局时，颜色会被还原成默认，代码位置：/@/views/layout/navBars/breadcrumb/setings.vue
+			 * 中的 `initSetLayoutChange(设置布局切换，重置主题样式)` 方法
+			 */
+			// 布局切换：可选值"<defaults|classic|transverse|columns>"，默认 defaults
 			layout: 'defaults',
 
-			/* 后端控制路由
-            ------------------------------- */
+			/**
+			 * 后端控制路由
+			 */
 			// 是否开启后端控制路由
 			isRequestRoutes: false,
 
-			/* 全局网站标题 / 副标题
-            ------------------------------- */
+			/**
+			 * 全局网站标题 / 副标题
+			 */
 			// 网站主标题（菜单导航、浏览器当前网页标题）
 			globalTitle: 'vue-next-admin',
 			// 网站副标题（登录页顶部文字）

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

@@ -1,5 +1,5 @@
 <template>
-	<div class="layout-navbars-breadcrumb" v-show="getThemeConfig.isBreadcrumb">
+	<div class="layout-navbars-breadcrumb" :style="{ display: isShowBreadcrumb }">
 		<i
 			class="layout-navbars-breadcrumb-icon"
 			:class="getThemeConfig.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
@@ -41,6 +41,15 @@ export default {
 		const getThemeConfig = computed(() => {
 			return store.state.themeConfig.themeConfig;
 		});
+		// 动态设置经典、横向布局不显示
+		const isShowBreadcrumb = computed(() => {
+			const { layout, isBreadcrumb } = store.state.themeConfig.themeConfig;
+			if (layout === 'classic' || layout === 'transverse') {
+				return 'none';
+			} else {
+				return isBreadcrumb ? '' : 'none';
+			}
+		});
 		// 面包屑点击时
 		const onBreadcrumbClick = (v: any) => {
 			const { redirect, path } = v;
@@ -85,6 +94,7 @@ export default {
 		});
 		return {
 			onThemeConfigChange,
+			isShowBreadcrumb,
 			getThemeConfig,
 			onBreadcrumbClick,
 			...toRefs(state),

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

@@ -164,12 +164,15 @@
 						<el-switch v-model="getThemeConfig.isShowLogo" @change="onIsShowLogoChange"></el-switch>
 					</div>
 				</div>
-				<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: getThemeConfig.layout === 'transverse' ? 0.5 : 1 }">
+				<div
+					class="layout-breadcrumb-seting-bar-flex mt15"
+					:style="{ opacity: getThemeConfig.layout === 'classic' || getThemeConfig.layout === 'transverse' ? 0.5 : 1 }"
+				>
 					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsBreadcrumb') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch
 							v-model="getThemeConfig.isBreadcrumb"
-							:disabled="getThemeConfig.layout === 'transverse'"
+							:disabled="getThemeConfig.layout === 'classic' || getThemeConfig.layout === 'transverse'"
 							@change="onIsBreadcrumbChange"
 						></el-switch>
 					</div>
@@ -423,12 +426,6 @@ export default defineComponent({
 				if (bool) els.setAttribute('style', `background-image:linear-gradient(to bottom left , ${color}, ${getLightColor(color, 0.6)})`);
 				else els.setAttribute('style', `background-image:${color}`);
 				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、菜单 / 顶栏 --> 菜单字体背景高亮
@@ -491,10 +488,9 @@ export default defineComponent({
 			}
 			const cssAttr =
 				attr === 'grayscale' ? `grayscale(${getThemeConfig.value.isGrayscale ? 1 : 0})` : `invert(${getThemeConfig.value.isInvert ? '80%' : '0%'})`;
-			const appEle: any = document.querySelector('#app');
+			const appEle: any = document.body;
 			appEle.setAttribute('style', `filter: ${cssAttr}`);
 			setLocalThemeConfig();
-			setLocal('appFilterStyle', appEle.style.cssText);
 		};
 		// 4、界面显示 --> 开启水印
 		const onWartermarkChange = () => {
@@ -520,42 +516,23 @@ export default defineComponent({
 		// 设置布局切换，重置主题样式
 		const initSetLayoutChange = () => {
 			if (getThemeConfig.value.layout === 'classic') {
-				getThemeConfig.value.isShowLogo = true;
-				getThemeConfig.value.isBreadcrumb = false;
-				getThemeConfig.value.isCollapse = false;
-				getThemeConfig.value.isClassicSplitMenu = false;
 				getThemeConfig.value.menuBar = '#FFFFFF';
 				getThemeConfig.value.menuBarColor = '#606266';
 				getThemeConfig.value.topBar = '#ffffff';
 				getThemeConfig.value.topBarColor = '#606266';
 				initLayoutChangeFun();
 			} else if (getThemeConfig.value.layout === 'transverse') {
-				getThemeConfig.value.isShowLogo = true;
-				getThemeConfig.value.isBreadcrumb = false;
-				getThemeConfig.value.isCollapse = false;
-				getThemeConfig.value.isTagsview = false;
-				getThemeConfig.value.isClassicSplitMenu = false;
 				getThemeConfig.value.menuBarColor = '#FFFFFF';
 				getThemeConfig.value.topBar = '#545c64';
 				getThemeConfig.value.topBarColor = '#FFFFFF';
 				initLayoutChangeFun();
 			} else if (getThemeConfig.value.layout === 'columns') {
-				getThemeConfig.value.isShowLogo = true;
-				getThemeConfig.value.isBreadcrumb = true;
-				getThemeConfig.value.isCollapse = false;
-				getThemeConfig.value.isTagsview = true;
-				getThemeConfig.value.isClassicSplitMenu = false;
 				getThemeConfig.value.menuBar = '#FFFFFF';
 				getThemeConfig.value.menuBarColor = '#606266';
 				getThemeConfig.value.topBar = '#ffffff';
 				getThemeConfig.value.topBarColor = '#606266';
 				initLayoutChangeFun();
 			} else {
-				getThemeConfig.value.isShowLogo = false;
-				getThemeConfig.value.isBreadcrumb = true;
-				getThemeConfig.value.isCollapse = false;
-				getThemeConfig.value.isTagsview = true;
-				getThemeConfig.value.isClassicSplitMenu = false;
 				getThemeConfig.value.menuBar = '#545c64';
 				getThemeConfig.value.menuBarColor = '#eaeaea';
 				getThemeConfig.value.topBar = '#FFFFFF';
@@ -616,11 +593,28 @@ export default defineComponent({
 				clipboard.destroy();
 			});
 		};
+		// 修复防止退出登录再进入界面时，需要刷新样式才生效的问题，初始化布局样式等(登录的时候触发，目前方案)
+		const initSetStyle = () => {
+			setTimeout(() => {
+				// 2、菜单 / 顶栏 --> 顶栏背景渐变
+				onTopBarGradualChange();
+				// 2、菜单 / 顶栏 --> 菜单背景渐变
+				onMenuBarGradualChange();
+				// 2、菜单 / 顶栏 --> 分栏菜单背景渐变
+				onColumnsMenuBarGradualChange();
+				// 2、菜单 / 顶栏 --> 菜单字体背景高亮
+				onMenuBarHighlightChange();
+			}, 1300);
+		};
 		onMounted(() => {
 			nextTick(() => {
 				// 判断当前布局是否不相同，不相同则初始化当前布局的样式，防止监听窗口大小改变时，布局配置logo、菜单背景等部分布局失效问题
 				if (!getLocal('frequency')) initSetLayoutChange();
 				setLocal('frequency', 1);
+				// 修复防止退出登录再进入界面时，需要刷新样式才生效的问题，初始化布局样式等(登录的时候触发，目前方案)
+				proxy.mittBus.on('onSignInClick', () => {
+					initSetStyle();
+				});
 				// 监听菜单点击，菜单字体背景高亮
 				proxy.mittBus.on('onMenuClick', () => {
 					onMenuBarHighlightChange();
@@ -632,48 +626,25 @@ export default defineComponent({
 					getThemeConfig.value.isDrawer = false;
 					initSetLayoutChange();
 					onMenuBarHighlightChange();
-					getThemeConfig.value.isCollapse = false;
 				});
 				window.addEventListener('load', () => {
-					// 刷新页面时，设置了值，直接取缓存中的值进行初始化
-					setTimeout(() => {
-						// 顶栏背景渐变
-						if (getLocal('navbarsBgStyle') && getThemeConfig.value.isTopBarColorGradual) {
-							const breadcrumbIndexEl: any = document.querySelector('.layout-navbars-breadcrumb-index');
-							breadcrumbIndexEl.style.cssText = getLocal('navbarsBgStyle');
-						}
-						// 菜单背景渐变
-						if (getLocal('asideBgStyle') && getThemeConfig.value.isMenuBarColorGradual) {
-							const asideEl: any = document.querySelector('.layout-container .el-aside');
-							asideEl.style.cssText = getLocal('asideBgStyle');
-						}
-						// 分栏菜单背景渐变
-						if (getLocal('columnsBgStyle') && getThemeConfig.value.isColumnsMenuBarColorGradual) {
-							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');
-							if (!els) return false;
-							els.setAttribute('id', getLocal('menuBarHighlightId'));
-						}
-						// 灰色模式/色弱模式
-						if (getLocal('appFilterStyle')) {
-							const appEl: any = document.querySelector('#app');
-							appEl.style.cssText = getLocal('appFilterStyle');
-						}
-						// 开启水印
-						onWartermarkChange();
-						// 语言国际化
-						if (getLocal('themeConfig')) proxy.$i18n.locale = getLocal('themeConfig').globalI18n;
-					}, 1100);
+					// 修复防止退出登录再进入界面时，需要刷新样式才生效的问题，初始化布局样式等(登录的时候触发，目前方案)
+					initSetStyle();
+					// 灰色模式
+					if (getThemeConfig.value.isGrayscale) onAddFilterChange('grayscale');
+					// 色弱模式
+					if (getThemeConfig.value.isInvert) onAddFilterChange('invert');
+					// 开启水印
+					onWartermarkChange();
+					// 语言国际化
+					if (getLocal('themeConfig')) proxy.$i18n.locale = getLocal('themeConfig').globalI18n;
 				});
 			});
 		});
 		onUnmounted(() => {
 			// 取消监听菜单点击，菜单字体背景高亮
 			proxy.mittBus.off('onMenuClick');
+			proxy.mittBus.off('onSignInClick');
 			proxy.mittBus.off('layoutMobileResize');
 		});
 		return {

src/views/login/component/account.vue

@@ -51,7 +51,7 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, defineComponent, computed } from 'vue';
+import { toRefs, reactive, defineComponent, computed, getCurrentInstance } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus';
 import { useI18n } from 'vue-i18n';
@@ -63,6 +63,7 @@ export default defineComponent({
 	name: 'login',
 	setup() {
 		const { t } = useI18n();
+		const { proxy } = getCurrentInstance() as any;
 		const store = useStore();
 		const route = useRoute();
 		const router = useRouter();
@@ -143,6 +144,8 @@ export default defineComponent({
 				state.loading.signIn = true;
 				const signInText = t('message.signInText');
 				ElMessage.success(`${currentTimeInfo}，${signInText}`);
+				// 修复防止退出登录再进入界面时，需要刷新样式才生效的问题，初始化布局样式等(登录的时候触发，目前方案)
+				proxy.mittBus.emit('onSignInClick');
 			}, 300);
 		};
 		return {