'admin-21.03.20:修复浏览器离开时菜单高亮bug、工具栏左偏bug、新增步骤条演示界面'

src/router/index.ts

@@ -452,21 +452,6 @@ export const dynamicRoutes = [
 							icon: 'iconfont icon-ditu',
 						},
 					},
-					{
-						path: '/fun/rollNotice',
-						name: 'rollNotice',
-						component: () => import('/@/views/fun/rollNotice/index.vue'),
-						meta: {
-							title: 'notice 滚动通知',
-							isLink: '',
-							isHide: false,
-							isKeepAlive: true,
-							isAffix: false,
-							isIframe: false,
-							auth: ['admin', 'test'],
-							icon: 'iconfont icon-tongzhi',
-						},
-					},
 				],
 			},
 			{
@@ -620,6 +605,21 @@ export const dynamicRoutes = [
 							icon: 'iconfont icon-chazhaobiaodanliebiao',
 						},
 					},
+					{
+						path: '/pages/steps',
+						name: 'steps',
+						component: () => import('/@/views/pages/steps/index.vue'),
+						meta: {
+							title: '步骤条',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							auth: ['admin', 'test'],
+							icon: 'iconfont icon-step',
+						},
+					},
 				],
 			},
 			{

src/theme/element.scss

@@ -765,7 +765,7 @@
 		color: #ffffff !important;
 	}
 }
-.add-is-active {
+#add-is-active {
 	@extend .el-active-extend;
 	&:hover {
 		@extend .el-active-extend;
@@ -803,6 +803,10 @@
 .el-submenu [class^='el-icon-'] {
 	font-size: 14px !important;
 }
+// 去掉离开浏览器时，菜单的默认高亮
+.el-menu-item:focus {
+	background-color: transparent !important;
+}
 
 /* Tabs 标签页
 ------------------------------- */
@@ -866,6 +870,13 @@
 .el-step__head.is-error {
 	border-color: set-color(danger);
 }
+.el-step__icon-inner {
+	font-size: 30px !important;
+	font-weight: 400 !important;
+}
+.el-step__title {
+	font-size: 14px;
+}
 
 /* Dialog 对话框
 ------------------------------- */
@@ -954,3 +965,15 @@
 	height: 100%;
 	overflow: auto;
 }
+.el-drawer-fade-enter-active .el-drawer.rtl {
+	animation: rtl-drawer-animation 0.3s ease-in reverse !important;
+}
+.el-drawer-fade-leave-active .el-drawer.rtl {
+	animation: rtl-drawer-animation 0.3s ease !important;
+}
+.el-drawer-fade-enter-active .el-drawer.ltr {
+	animation: ltr-drawer-animation 0.3s ease-in reverse !important;
+}
+.el-drawer-fade-leave-active .el-drawer.ltr {
+	animation: ltr-drawer-animation 0.3s ease !important;
+}

src/utils/setIconfont.ts

@@ -1,6 +1,6 @@
 // 字体图标 url
 const cssCdnUrlList: Array<string> = [
-	'//at.alicdn.com/t/font_2298093_ets0yznyu8g.css',
+	'//at.alicdn.com/t/font_2298093_1pnb6uhuq4e.css',
 	'//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
 ];
 // 第三方 js url

src/views/fun/rollNotice/index.vue

@@ -1,18 +0,0 @@
-<template>
-	<div class="roll-notice-container">
-		<el-card shadow="hover" header="滚动通知演示"> </el-card>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive } from 'vue';
-export default {
-	name: 'rollNotice',
-	setup() {
-		const state = reactive({});
-		return {
-			...toRefs(state),
-		};
-	},
-};
-</script>

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

@@ -406,11 +406,10 @@ export default defineComponent({
 				setTimeout(() => {
 					let els = document.querySelector('.el-menu-item.is-active');
 					if (!els) return false;
-					let attr = 'el-menu-item is-active';
+					if (getThemeConfig.value.isMenuBarColorHighlight) els.setAttribute('id', `add-is-active`);
-					if (getThemeConfig.value.isMenuBarColorHighlight) els.setAttribute('class', `${attr} add-is-active`);
+					else els.setAttribute('id', ``);
-					else els.setAttribute('class', `${attr}`);
 					setLocalThemeConfig();
-					setLocal('menuBarHighlightClass', els.getAttribute('class'));
+					setLocal('menuBarHighlightId', els.getAttribute('id'));
 				}, 0);
 			});
 		};
@@ -610,10 +609,10 @@ export default defineComponent({
 							asideEl.style.cssText = getLocal('asideBgStyle');
 						}
 						// 菜单字体背景高亮
-						if (getLocal('menuBarHighlightClass')) {
+						if (getLocal('menuBarHighlightId')) {
 							let els = document.querySelector('.el-menu-item.is-active');
 							if (!els) return false;
-							els.setAttribute('class', getLocal('menuBarHighlightClass'));
+							els.setAttribute('id', getLocal('menuBarHighlightId'));
 						}
 						// 灰色模式/色弱模式
 						if (getLocal('appFilterStyle')) {

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

@@ -1,5 +1,5 @@
 <template>
-	<div class="layout-navbars-breadcrumb-user" :style="{ flex: setFlexAutoStyle }">
+	<div class="layout-navbars-breadcrumb-user">
 		<div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
 			<i class="el-icon-search" title="菜单搜索"></i>
 		</div>
@@ -63,11 +63,6 @@ export default {
 			isScreenfull: false,
 			isShowUserNewsPopover: false,
 		});
-		// 设置布局
-		const setFlexAutoStyle = computed(() => {
-			let { isBreadcrumb, layout, isClassicSplitMenu } = store.state.themeConfig.themeConfig;
-			return !isBreadcrumb && layout !== 'transverse' && isClassicSplitMenu ? 1 : '';
-		});
 		// 获取用户信息 vuex
 		const getUserInfos = computed(() => {
 			return store.state.userInfos.userInfos;
@@ -129,7 +124,6 @@ export default {
 			searchRef.value.openSearch();
 		};
 		return {
-			setFlexAutoStyle,
 			getUserInfos,
 			onLayoutSetingClick,
 			onHandleCommandClick,
@@ -147,6 +141,7 @@ export default {
 	display: flex;
 	align-items: center;
 	justify-content: flex-end;
+	flex: 1;
 	&-link {
 		height: 100%;
 		display: flex;

src/views/layout/navBars/tagsView/tagsView.vue

@@ -250,7 +250,7 @@ export default {
 				} else {
 					// 非头/尾部
 					if (liIndex === 0) beforePrevL = liFirst.offsetLeft - 5;
-					else beforePrevL = liPrevTag.offsetLeft - 5;
+					else beforePrevL = liPrevTag?.offsetLeft - 5;
 					if (liIndex === liLength) afterNextL = liLast.offsetLeft + liLast.offsetWidth + 5;
 					else afterNextL = liNextTag.offsetLeft + liNextTag.offsetWidth + 5;
 					if (afterNextL > scrollL + offsetW) {

src/views/pages/steps/index.vue

@@ -0,0 +1,32 @@
+<template>
+	<div class="steps-container">
+		<el-card shadow="hover" header="element-plus 步骤条">
+			<el-steps :active="stepsActive">
+				<el-step title="第一步" icon="iconfont icon-0_round_solid"></el-step>
+				<el-step title="第二步" icon="iconfont icon-2_round_solid"></el-step>
+				<el-step title="第三步" icon="iconfont icon-3_round_solid"></el-step>
+			</el-steps>
+			<el-button @click="onNextSteps" size="small" class="mt15" type="primary">下一步</el-button>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from 'vue';
+export default {
+	name: 'steps',
+	setup() {
+		const state = reactive({
+			stepsActive: 1,
+		});
+		// 下一步点击
+		const onNextSteps = () => {
+			if (state.stepsActive++ > 2) state.stepsActive = 1;
+		};
+		return {
+			onNextSteps,
+			...toRefs(state),
+		};
+	},
+};
+</script>