From 920c705421aae4656569c3946034cb124e253cb5 Mon Sep 17 00:00:00 2001
From: lyt <1105290566@qq.com>
Date: Thu, 30 Dec 2021 20:24:35 +0800
Subject: [PATCH] =?UTF-8?q?'admin-21.12.30:=E6=96=B0=E5=A2=9Etagsview?=
 =?UTF-8?q?=E9=A3=8E=E6=A0=BC5'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/navBars/breadcrumb/setings.vue |  1 +
 src/layout/navBars/tagsView/tagsView.vue  | 38 ++++++++++++++++++++++-
 src/store/modules/themeConfig.ts          |  4 +--
 3 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/src/layout/navBars/breadcrumb/setings.vue b/src/layout/navBars/breadcrumb/setings.vue
index 77c1bdd..bf80167 100644
--- a/src/layout/navBars/breadcrumb/setings.vue
+++ b/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>
diff --git a/src/layout/navBars/tagsView/tagsView.vue b/src/layout/navBars/tagsView/tagsView.vue
index cc34361..9ce9d8c 100644
--- a/src/layout/navBars/tagsView/tagsView.vue
+++ b/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;
diff --git a/src/store/modules/themeConfig.ts b/src/store/modules/themeConfig.ts
index 44e778a..d0303fa 100644
--- a/src/store/modules/themeConfig.ts
+++ b/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