'admin-21.12.30:新增tagsview风格5'

src/layout/navBars/breadcrumb/setings.vue

@@ -260,6 +260,7 @@
 							<el-option label="风格2" value="tags-style-two"></el-option>
 							<el-option label="风格3" value="tags-style-three"></el-option>
 							<el-option label="风格4" value="tags-style-four"></el-option>
+							<el-option label="风格5" value="tags-style-five"></el-option>
 						</el-select>
 					</div>
 				</div>

src/layout/navBars/tagsView/tagsView.vue

@@ -20,7 +20,11 @@
 					<SvgIcon :name="v.meta.icon" class="layout-navbars-tagsview-ul-li-iconfont" v-if="!isActive(v) && getThemeConfig.isTagsviewIcon" />
 					<span>{{ $t(v.meta.title) }}</span>
 					<template v-if="isActive(v)">
-						<SvgIcon name="elementRefreshRight" class="ml5" @click.stop="refreshCurrentTagsView($route.fullPath)" />
+						<SvgIcon
+							name="elementRefreshRight"
+							class="ml5 layout-navbars-tagsview-ul-li-refresh"
+							@click.stop="refreshCurrentTagsView($route.fullPath)"
+						/>
 						<SvgIcon
 							name="elementClose"
 							class="layout-navbars-tagsview-ul-li-icon layout-icon-active"
@@ -648,6 +652,38 @@ export default {
 			color: var(--color-primary) !important;
 		}
 	}
+	// 风格5
+	.tags-style-five {
+		align-items: flex-end;
+		.tags-style-five-svg {
+			-webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='68' height='34' viewBox='0 0 68 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m27,0c-7.99582,0 -11.95105,0.00205 -12,12l0,6c0,8.284 -0.48549,16.49691 -8.76949,16.49691l54.37857,-0.11145c-8.284,0 -8.60908,-8.10146 -8.60908,-16.38546l0,-6c0.11145,-12.08445 -4.38441,-12 -12,-12l-13,0z' fill='%23409eff'/%3E%3C/svg%3E")
+				12 27 15;
+		}
+		.layout-navbars-tagsview-ul-li {
+			padding: 0 5px;
+			border-width: 15px 27px 15px;
+			border-style: solid;
+			border-color: transparent;
+			margin: 0 -15px;
+			.layout-icon-active,
+			.layout-navbars-tagsview-ul-li-iconfont,
+			.layout-navbars-tagsview-ul-li-refresh {
+				display: none;
+			}
+			.layout-icon-three {
+				display: block;
+			}
+			&:hover {
+				@extend .tags-style-five-svg;
+				background: var(--color-primary-light-9);
+			}
+		}
+		.is-active {
+			@extend .tags-style-five-svg;
+			background: var(--color-primary) !important;
+			z-index: 1;
+		}
+	}
 }
 .layout-navbars-tagsview-shadow {
 	box-shadow: rgb(0 21 41 / 4%) 0px 1px 4px;

src/store/modules/themeConfig.ts

@@ -110,9 +110,9 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
 			/**
 			 * 其它设置
 			 */
-			// Tagsview 风格：可选值"<tags-style-one|tags-style-two|tags-style-three|tags-style-four>"，默认 tags-style-one
+			// Tagsview 风格：可选值"<tags-style-one|tags-style-two|tags-style-three|tags-style-four|tags-style-five>"，默认 tags-style-five
 			// 定义的值与 `/src/layout/navBars/tagsView/tagsView.vue` 中的 class 同名
-			tagsStyle: 'tags-style-one',
+			tagsStyle: 'tags-style-five',
 			// 主页面切换动画：可选值"<slide-right|slide-left|opacitys>"，默认 slide-right
 			animation: 'slide-right',
 			// 分栏高亮风格：可选值"<columns-round|columns-card>"，默认 columns-round