'admin-21.08.22:修复优化诸多内容，请查看CHANGELOG.md文件'

CHANGELOG.md

@@ -2,6 +2,18 @@
 
 🎉🎉🔥 `vue-next-admin` 基于 vue3.x 、Typescript、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支）
 
+## 1.0.17
+
+`2021.08.22`
+
+- 🌟 更新 依赖更新最新版本
+- 🎯 优化 去除设置布局切换，重置主题样式（initSetLayoutChange），切换布局需手动设置样式，设置的样式自动同步各布局
+- 🎯 优化 Dropdown 下拉菜单用户账号靠边时换行问题
+- 🎯 优化 左侧导航菜单，共用菜单树，防止 `布局配置` 设置 `菜单 / 顶栏` 时，样式丢失等问题
+- 🐞 修复 固定 header 后没有回到顶部的 bug，拉取项目后运行不起来的 bug。<a href="https://gitee.com/lyt-top/vue-next-admin/pulls/14" target="_blank">!14</a>，感谢<a href="https://gitee.com/wjs0509" target="_blank">@wjs0509</a>
+- 🐞 修复 tagView 右键全屏后，浏览器窗口大小发生任何变化都会导致左边菜单显示出来，并且可点击打开对应页面。<a href="https://gitee.com/lyt-top/vue-next-admin/issues/I46E6T" target="_blank">I46E6T</a>
+- 🐞 修复 默认设置 `菜单 / 顶栏` 样式不生效问题（/@/src/store/modules/themeConfig.ts）
+
 ## 1.0.16
 
 `2021.08.14`

package.json

@@ -13,7 +13,7 @@
 		"echarts": "^5.1.2",
 		"echarts-gl": "^2.0.8",
 		"echarts-wordcloud": "^2.0.0",
-		"element-plus": "^1.0.2-beta.70",
+		"element-plus": "^1.0.2-beta.71",
 		"mitt": "^3.0.0",
 		"nprogress": "^0.2.0",
 		"print-js": "^1.6.0",
@@ -28,26 +28,26 @@
 		"vue-router": "^4.0.10",
 		"vue-web-screen-shot": "^1.2.0",
 		"vuex": "^4.0.2",
-		"wangeditor": "^4.7.6"
+		"wangeditor": "^4.7.7"
 	},
 	"devDependencies": {
 		"@types/axios": "^0.14.0",
 		"@types/clipboard": "^2.0.1",
-		"@types/node": "^16.6.1",
+		"@types/node": "^16.7.1",
 		"@types/nprogress": "^0.2.0",
 		"@types/sortablejs": "^1.10.7",
-		"@typescript-eslint/eslint-plugin": "^4.29.1",
+		"@typescript-eslint/eslint-plugin": "^4.29.2",
-		"@typescript-eslint/parser": "^4.29.1",
+		"@typescript-eslint/parser": "^4.29.2",
 		"@vitejs/plugin-vue": "^1.4.0",
-		"@vue/compiler-sfc": "^3.2.2",
+		"@vue/compiler-sfc": "^3.2.4",
 		"dotenv": "^10.0.0",
 		"eslint": "^7.32.0",
 		"eslint-plugin-vue": "^7.16.0",
 		"prettier": "^2.3.2",
-		"sass": "^1.37.5",
+		"sass": "^1.38.0",
 		"sass-loader": "^12.1.0",
 		"typescript": "^4.3.5",
-		"vite": "^2.4.4",
+		"vite": "^2.5.0",
 		"vue-eslint-parser": "^7.10.0"
 	},
 	"browserslist": [

src/layout/component/aside.vue

@@ -1,20 +1,12 @@
 <template>
-	<template v-if="clientWidth > 1000">
+	<div class="h100" v-show="!isTagsViewCurrenFull">
-		<el-aside class="layout-aside" :class="setCollapseWidth" v-show="!isTagsViewCurrenFull">
+		<el-aside class="layout-aside" :class="setCollapseStyle">
-			<Logo v-if="setShowLogo" />
-			<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
-				<Vertical :menuList="menuList" :class="setCollapseWidth" />
-			</el-scrollbar>
-		</el-aside>
-	</template>
-	<el-drawer v-model="getThemeConfig.isCollapse" :with-header="false" direction="ltr" size="220px" v-else>
-		<el-aside class="layout-aside w100 h100">
 			<Logo v-if="setShowLogo" />
 			<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
 				<Vertical :menuList="menuList" />
 			</el-scrollbar>
 		</el-aside>
-	</el-drawer>
+	</div>
 </template>
 
 <script lang="ts">
@@ -41,25 +33,50 @@ export default {
 			return store.state.tagsViewRoutes.isTagsViewCurrenFull;
 		});
 		// 设置菜单展开/收起时的宽度
-		const setCollapseWidth = computed(() => {
+		const setCollapseStyle = computed(() => {
-			let { layout, isCollapse, menuBar } = store.state.themeConfig.themeConfig;
+			const { layout, isCollapse, menuBar } = store.state.themeConfig.themeConfig;
-			let asideBrColor = menuBar === '#FFFFFF' || menuBar === '#FFF' || menuBar === '#fff' || menuBar === '#ffffff' ? 'layout-el-aside-br-color' : '';
+			const asideBrColor =
+				menuBar === '#FFFFFF' || menuBar === '#FFF' || menuBar === '#fff' || menuBar === '#ffffff' ? 'layout-el-aside-br-color' : '';
+			// 判断是否是手机端
+			if (state.clientWidth <= 1000) {
+				if (isCollapse) {
+					document.body.setAttribute('class', 'el-popup-parent--hidden');
+					const asideEle = document.querySelector('.layout-container') as HTMLElement;
+					const modeDivs = document.createElement('div');
+					modeDivs.setAttribute('class', 'layout-aside-mobile-mode');
+					asideEle.appendChild(modeDivs);
+					modeDivs.addEventListener('click', closeLayoutAsideMobileMode);
+					return [asideBrColor, 'layout-aside-mobile', 'layout-aside-mobile-open'];
+				} else {
+					// 关闭弹窗
+					closeLayoutAsideMobileMode();
+					return [asideBrColor, 'layout-aside-mobile', 'layout-aside-mobile-close'];
+				}
+			} else {
 				if (layout === 'columns') {
 					// 分栏布局，菜单收起时宽度给 1px
 					if (isCollapse) {
-					return ['layout-aside-width1', asideBrColor];
+						return [asideBrColor, 'layout-aside-pc-1'];
 					} else {
-					return ['layout-aside-width-default', asideBrColor];
+						return [asideBrColor, 'layout-aside-pc-220'];
 					}
 				} else {
 					// 其它布局给 64px
 					if (isCollapse) {
-					return ['layout-aside-width64', asideBrColor];
+						return [asideBrColor, 'layout-aside-pc-64'];
 					} else {
-					return ['layout-aside-width-default', asideBrColor];
+						return [asideBrColor, 'layout-aside-pc-220'];
+					}
 				}
 			}
 		});
+		// 关闭移动端蒙版
+		const closeLayoutAsideMobileMode = () => {
+			const el = document.querySelector('.layout-aside-mobile-mode');
+			el && el.parentNode?.removeChild(el);
+			store.state.themeConfig.themeConfig.isCollapse = false;
+			document.body.setAttribute('class', '');
+		};
 		// 设置显示/隐藏 logo
 		const setShowLogo = computed(() => {
 			let { layout, isShowLogo } = store.state.themeConfig.themeConfig;
@@ -118,10 +135,11 @@ export default {
 			});
 			proxy.mittBus.on('layoutMobileResize', (res: any) => {
 				initMenuFixed(res.clientWidth);
+				closeLayoutAsideMobileMode();
 			});
 		});
 		return {
-			setCollapseWidth,
+			setCollapseStyle,
 			setShowLogo,
 			getThemeConfig,
 			isTagsViewCurrenFull,

src/layout/main/defaults.vue

@@ -23,7 +23,7 @@ export default {
 	name: 'layoutDefaults',
 	components: { Aside, Header, Main },
 	setup() {
-		const { proxy }:any = getCurrentInstance();
+		const { proxy } = getCurrentInstance() as any;
 		const store = useStore();
 		const route = useRoute();
 		const isFixedHeader = computed(() => {

src/layout/navBars/breadcrumb/index.vue

@@ -109,7 +109,6 @@ export default {
 	align-items: center;
 	padding-right: 15px;
 	background: var(--bg-topBar);
-	overflow: hidden;
 	border-bottom: 1px solid #f1f2f3;
 }
 </style>

src/layout/navBars/breadcrumb/setings.vue

@@ -518,38 +518,9 @@ export default defineComponent({
 			if (getThemeConfig.value.layout === layout) return false;
 			getThemeConfig.value.layout = layout;
 			getThemeConfig.value.isDrawer = false;
-			initSetLayoutChange();
+			initLayoutChangeFun();
 			onMenuBarHighlightChange();
 		};
-		// 设置布局切换，重置主题样式
-		const initSetLayoutChange = () => {
-			if (getThemeConfig.value.layout === 'classic') {
-				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.menuBarColor = '#FFFFFF';
-				getThemeConfig.value.topBar = '#545c64';
-				getThemeConfig.value.topBarColor = '#FFFFFF';
-				initLayoutChangeFun();
-			} else if (getThemeConfig.value.layout === 'columns') {
-				// 1.0.11 更新日志
-				getThemeConfig.value.isShowLogo = false;
-				getThemeConfig.value.menuBar = '#FFFFFF';
-				getThemeConfig.value.menuBarColor = '#606266';
-				getThemeConfig.value.topBar = '#ffffff';
-				getThemeConfig.value.topBarColor = '#606266';
-				initLayoutChangeFun();
-			} else {
-				getThemeConfig.value.menuBar = '#545c64';
-				getThemeConfig.value.menuBarColor = '#eaeaea';
-				getThemeConfig.value.topBar = '#FFFFFF';
-				getThemeConfig.value.topBarColor = '#606266';
-				initLayoutChangeFun();
-			}
-		};
 		// 设置布局切换函数
 		const initLayoutChangeFun = () => {
 			onBgColorPickerChange('menuBar');
@@ -606,7 +577,7 @@ export default defineComponent({
 		onMounted(() => {
 			nextTick(() => {
 				// 判断当前布局是否不相同，不相同则初始化当前布局的样式，防止监听窗口大小改变时，布局配置logo、菜单背景等部分布局失效问题
-				if (!Local.get('frequency')) initSetLayoutChange();
+				if (!Local.get('frequency')) initLayoutChangeFun();
 				Local.set('frequency', 1);
 				// 修复防止退出登录再进入界面时，需要刷新样式才生效的问题，初始化布局样式等(登录的时候触发，目前方案)
 				proxy.mittBus.on('onSignInClick', () => {
@@ -620,7 +591,7 @@ export default defineComponent({
 				proxy.mittBus.on('layoutMobileResize', (res: any) => {
 					getThemeConfig.value.layout = res.layout;
 					getThemeConfig.value.isDrawer = false;
-					initSetLayoutChange();
+					initLayoutChangeFun();
 					onMenuBarHighlightChange();
 				});
 				setTimeout(() => {

src/layout/navMenu/vertical.vue

@@ -3,7 +3,7 @@
 		router
 		:default-active="defaultActive"
 		background-color="transparent"
-		:collapse="setIsCollapse"
+		:collapse="isCollapse"
 		:unique-opened="getThemeConfig.isUniqueOpened"
 		:collapse-transition="false"
 	>
@@ -29,7 +29,7 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, computed, defineComponent, getCurrentInstance, onMounted } from 'vue';
+import { toRefs, reactive, computed, defineComponent, getCurrentInstance, onMounted, watch } from 'vue';
 import { useRoute, onBeforeRouteUpdate } from 'vue-router';
 import { useStore } from '/@/store/index';
 import SubItem from '/@/layout/navMenu/subItem.vue';
@@ -49,6 +49,7 @@ export default defineComponent({
 		const state = reactive({
 			// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
 			defaultActive: route.meta.isDynamic ? route.meta.isDynamicPath : route.path,
+			isCollapse: false,
 		});
 		// 获取父级菜单数据
 		const menuLists = computed(() => {
@@ -58,10 +59,6 @@ export default defineComponent({
 		const getThemeConfig = computed(() => {
 			return store.state.themeConfig.themeConfig;
 		});
-		// 设置菜单的收起/展开
-		const setIsCollapse = computed(() => {
-			return document.body.clientWidth < 1000 ? false : getThemeConfig.value.isCollapse;
-		});
 		// 菜单高亮（详情时，父级高亮）
 		const setParentHighlight = (currentRoute) => {
 			const { path, meta } = currentRoute;
@@ -69,6 +66,16 @@ export default defineComponent({
 			if (pathSplit.length >= 4 && meta.isHide) return pathSplit.splice(0, 3).join('/');
 			else return path;
 		};
+		// 设置菜单的收起/展开
+		watch(
+			store.state.themeConfig.themeConfig,
+			() => {
+				document.body.clientWidth <= 1000 ? (state.isCollapse = false) : (state.isCollapse = getThemeConfig.value.isCollapse);
+			},
+			{
+				immediate: true,
+			}
+		);
 		// 页面加载时
 		onMounted(() => {
 			state.defaultActive = setParentHighlight(route);
@@ -84,7 +91,6 @@ export default defineComponent({
 		return {
 			menuLists,
 			getThemeConfig,
-			setIsCollapse,
 			...toRefs(state),
 		};
 	},

src/store/modules/themeConfig.ts

@@ -5,6 +5,7 @@ import { ThemeConfigState, RootStateTypes } from '/@/store/interface/index';
 /**
  * 2020.05.28 by lyt 优化
  * 修改一下配置时，需要每次都清理 `window.localStorage` 浏览器永久缓存，配置才会生效
+ * 哪个大佬有解决办法，欢迎pr，感谢💕！
  */
 const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
 	namespaced: true,
@@ -29,8 +30,9 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
 
 			/**
 			 * 菜单 / 顶栏
-			 * 注意：为了演示，切换布局时，颜色会被还原成默认，代码位置：/@/layout/navBars/breadcrumb/setings.vue
+			 * 注意：v1.0.17 版本去除设置布局切换，重置主题样式（initSetLayoutChange），
-			 * 中的 `initSetLayoutChange(设置布局切换，重置主题样式)` 方法
+			 * 切换布局需手动设置样式，设置的样式自动同步各布局，
+			 * 代码位置：/@/layout/navBars/breadcrumb/setings.vue
 			 */
 			// 默认顶栏导航背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
 			topBar: '#ffffff',

src/theme/app.scss

@@ -65,18 +65,44 @@ body,
 	.layout-el-aside-br-color {
 		border-right: 1px solid rgb(238, 238, 238);
 	}
-	.layout-aside-width-default {
+	// pc端左侧导航样式
+	.layout-aside-pc-220 {
 		width: 220px !important;
 		transition: width 0.3s ease;
 	}
-	.layout-aside-width64 {
+	.layout-aside-pc-64 {
 		width: 64px !important;
 		transition: width 0.3s ease;
 	}
-	.layout-aside-width1 {
+	.layout-aside-pc-1 {
 		width: 1px !important;
 		transition: width 0.3s ease;
 	}
+	// 手机端左侧导航样式
+	.layout-aside-mobile {
+		position: fixed;
+		top: 0;
+		left: -220px;
+		width: 220px;
+		z-index: 1;
+	}
+	.layout-aside-mobile-close {
+		left: -220px;
+		transition: all 0.3s cubic-bezier(0.71, -0.01, 0.18, 0.95);
+	}
+	.layout-aside-mobile-open {
+		left: 0;
+		transition: all 0.3s cubic-bezier(0.53, -0.26, 0.42, 1.18);
+	}
+	.layout-aside-mobile-mode {
+		position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.5);
+	}
 	.layout-scrollbar {
 		@extend .el-scrollbar;
 		padding: 15px;

src/theme/element.scss

@@ -747,6 +747,11 @@
 // 默认样式修改
 .el-menu {
 	border-right: none !important;
+	width: 220px;
+}
+// 修复点击左侧菜单折叠再展开时，宽度不跟随问题
+.el-menu--collapse {
+	width: 64px !important;
 }
 .el-menu-item,
 .el-submenu__title {
@@ -886,6 +891,9 @@
 	color: set-color(primary);
 	background-color: set-color(primary-light-9);
 }
+.el-dropdown-menu .el-dropdown-menu__item {
+	white-space: nowrap;
+}
 
 /* Steps 步骤条
 ------------------------------- */