From 8ec374e3b4882f5443ed3d72d1070a7899ba5a4e Mon Sep 17 00:00:00 2001
From: lyt <1105290566@qq.com>
Date: Tue, 18 May 2021 16:09:07 +0800
Subject: [PATCH] =?UTF-8?q?'admin-21.05.18:=E6=96=B0=E5=A2=9E=E5=88=86?=
 =?UTF-8?q?=E6=A0=8F=E5=B8=83=E5=B1=80=E5=88=86=E6=A0=8F=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E5=8F=AF=E8=AE=BE=E7=BD=AE=E6=B0=B4=E5=B9=B3?=
 =?UTF-8?q?=E3=80=81=E5=9E=82=E7=9B=B4=E5=B8=83=E5=B1=80'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/lang/en.js                         |  1 +
 src/i18n/lang/zh-cn.js                      |  1 +
 src/i18n/lang/zh-tw.js                      |  1 +
 src/store/modules/themeConfig.js            |  2 +
 src/views/layout/component/columnsAside.vue | 46 +++++++++++++++++----
 5 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/src/i18n/lang/en.js b/src/i18n/lang/en.js
index 6ed7fab..bd42228 100644
--- a/src/i18n/lang/en.js
+++ b/src/i18n/lang/en.js
@@ -134,6 +134,7 @@ export default {
 		fiveTagsStyle: 'Tagsview style',
 		fiveAnimation: 'page animation',
 		fiveColumnsAsideStyle: 'Column style',
+		fiveColumnsAsideLayout: 'Column layout',
 		sixTitle: 'Layout switch',
 		sixDefaults: 'One',
 		sixClassic: 'Two',
diff --git a/src/i18n/lang/zh-cn.js b/src/i18n/lang/zh-cn.js
index a99fc14..5bf7dfe 100644
--- a/src/i18n/lang/zh-cn.js
+++ b/src/i18n/lang/zh-cn.js
@@ -134,6 +134,7 @@ export default {
 		fiveTagsStyle: 'Tagsview 风格',
 		fiveAnimation: '主页面切换动画',
 		fiveColumnsAsideStyle: '分栏高亮风格',
+		fiveColumnsAsideLayout: '分栏布局风格',
 		sixTitle: '布局切换',
 		sixDefaults: '默认',
 		sixClassic: '经典',
diff --git a/src/i18n/lang/zh-tw.js b/src/i18n/lang/zh-tw.js
index e98320e..a1df722 100644
--- a/src/i18n/lang/zh-tw.js
+++ b/src/i18n/lang/zh-tw.js
@@ -134,6 +134,7 @@ export default {
 		fiveTagsStyle: 'Tagsview 風格',
 		fiveAnimation: '主頁面切換動畫',
 		fiveColumnsAsideStyle: '分欄高亮風格',
+		fiveColumnsAsideLayout: '分欄佈局風格',
 		sixTitle: '佈局切換',
 		sixDefaults: '默認',
 		sixClassic: '經典',
diff --git a/src/store/modules/themeConfig.js b/src/store/modules/themeConfig.js
index 8133182..d39eac9 100644
--- a/src/store/modules/themeConfig.js
+++ b/src/store/modules/themeConfig.js
@@ -41,6 +41,8 @@ const themeConfigModule = {
 			layout: 'defaults',
 			// 默认分栏高亮风格，可选值"<columns-round|columns-card>"，默认 columns-round
 			columnsAsideStyle: 'columns-round',
+			// 默认分栏布局风格，，可选值"<columns-horizontal|columns-vertical>"，默认 columns-vertical
+			columnsAsideLayout: 'columns-vertical',
 
 			/* 全局网站标题 / 副标题
             ------------------------------- */
diff --git a/src/views/layout/component/columnsAside.vue b/src/views/layout/component/columnsAside.vue
index 462091c..f3ba591 100644
--- a/src/views/layout/component/columnsAside.vue
+++ b/src/views/layout/component/columnsAside.vue
@@ -10,17 +10,25 @@
 					:class="{ 'layout-columns-active': liIndex === k }"
 					:title="$t(v.meta.title)"
 				>
-					<div class="layout-columns-aside-li-box" v-if="!v.meta.isLink || (v.meta.isLink && v.meta.isIframe)">
+					<div :class="setColumnsAsidelayout" v-if="!v.meta.isLink || (v.meta.isLink && v.meta.isIframe)">
 						<i :class="v.meta.icon"></i>
 						<div class="layout-columns-aside-li-box-title font12">
-							{{ $t(v.meta.title) && $t(v.meta.title).length >= 4 ? $t(v.meta.title).substr(0, 4) : $t(v.meta.title) }}
+							{{
+								$t(v.meta.title) && $t(v.meta.title).length >= 4
+									? $t(v.meta.title).substr(0, setColumnsAsidelayout === 'columns-vertical' ? 4 : 3)
+									: $t(v.meta.title)
+							}}
 						</div>
 					</div>
-					<div class="layout-columns-aside-li-box" v-else>
+					<div :class="setColumnsAsidelayout" v-else>
 						<a :href="v.meta.isLink" target="_blank">
 							<i :class="v.meta.icon"></i>
 							<div class="layout-columns-aside-li-box-title font12">
-								{{ $t(v.meta.title) && $t(v.meta.title).length >= 4 ? $t(v.meta.title).substr(0, 4) : $t(v.meta.title) }}
+								{{
+									$t(v.meta.title) && $t(v.meta.title).length >= 4
+										? $t(v.meta.title).substr(0, setColumnsAsidelayout === 'columns-vertical' ? 4 : 3)
+										: $t(v.meta.title)
+								}}
 							</div>
 						</a>
 					</div>
@@ -43,10 +51,14 @@ export default {
 		};
 	},
 	computed: {
-		// 设置高亮样式
+		// 设置分栏高亮风格
 		setColumnsAsideStyle() {
 			return this.$store.state.themeConfig.themeConfig.columnsAsideStyle;
 		},
+		// 设置分栏布局风格
+		setColumnsAsidelayout() {
+			return this.$store.state.themeConfig.themeConfig.columnsAsideLayout;
+		},
 	},
 	mounted() {
 		this.setFilterRoutes();
@@ -139,7 +151,7 @@ export default {
 
 <style scoped lang="scss">
 .layout-columns-aside {
-	width: 64px;
+	width: 70px;
 	height: 100%;
 	background: var(--bg-columnsMenuBar);
 	ul {
@@ -153,12 +165,28 @@ export default {
 			cursor: pointer;
 			position: relative;
 			z-index: 1;
-			.layout-columns-aside-li-box {
+			.columns-vertical {
 				margin: auto;
-				.layout-columns-aside-li-box-title {
+				.columns-vertical-title {
 					padding-top: 1px;
 				}
 			}
+			.columns-horizontal {
+				display: flex;
+				height: 50px;
+				width: 100%;
+				align-items: center;
+				padding: 0 5px;
+				i {
+					margin-right: 3px;
+				}
+				a {
+					display: flex;
+					.columns-horizontal-title {
+						padding-top: 1px;
+					}
+				}
+			}
 			a {
 				text-decoration: none;
 				color: var(--bg-columnsMenuBarColor);
@@ -175,7 +203,7 @@ export default {
 			left: 50%;
 			top: 2px;
 			height: 50px;
-			width: 58px;
+			width: 65px;
 			transform: translateX(-50%);
 			z-index: 0;
 			transition: 0.3s ease-in-out;