'admin-21.05.18:新增分栏布局分栏导航菜单可设置水平、垂直布局'

src/i18n/lang/en.ts

@@ -139,6 +139,7 @@ export default {
 		fiveTagsStyle: 'Tagsview style',
 		fiveAnimation: 'page animation',
 		fiveColumnsAsideStyle: 'Column style',
+		fiveColumnsAsideLayout: 'Column layout',
 		sixTitle: 'Layout switch',
 		sixDefaults: 'One',
 		sixClassic: 'Two',

src/i18n/lang/zh-cn.ts

@@ -139,6 +139,7 @@ export default {
 		fiveTagsStyle: 'Tagsview 风格',
 		fiveAnimation: '主页面切换动画',
 		fiveColumnsAsideStyle: '分栏高亮风格',
+		fiveColumnsAsideLayout: '分栏布局风格',
 		sixTitle: '布局切换',
 		sixDefaults: '默认',
 		sixClassic: '经典',

src/i18n/lang/zh-tw.ts

@@ -139,6 +139,7 @@ export default {
 		fiveTagsStyle: 'Tagsview 風格',
 		fiveAnimation: '主頁面切換動畫',
 		fiveColumnsAsideStyle: '分欄高亮風格',
+		fiveColumnsAsideLayout: '分欄佈局風格',
 		sixTitle: '佈局切換',
 		sixDefaults: '默認',
 		sixClassic: '經典',

src/store/interface/index.ts

@@ -42,6 +42,7 @@ export interface ThemeConfigState {
 		tagsStyle: string;
 		animation: string;
 		columnsAsideStyle: string;
+		columnsAsideLayout: string;
 		layout: string;
 		isRequestRoutes: boolean;
 		globalTitle: string;

src/store/modules/themeConfig.ts

@@ -100,6 +100,8 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
 			animation: 'slide-right',
 			// 默认分栏高亮风格，可选 1、 圆角 columns-round 2、 卡片 columns-card
 			columnsAsideStyle: 'columns-round',
+			// 默认分栏布局风格，可选 1、 水平 columns-horizontal 2、 垂直 columns-vertical
+			columnsAsideLayout: 'columns-vertical',
 
 			/* 布局切换
             ------------------------------- */

src/views/layout/component/columnsAside.vue

@@ -14,17 +14,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">
+						<div class="columns-vertical-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">
+							<div class="columns-vertical-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>
@@ -54,10 +62,14 @@ export default {
 			difference: 0,
 			routeSplit: [],
 		});
-		// 设置高亮样式
+		// 设置分栏高亮风格
 		const setColumnsAsideStyle = computed(() => {
 			return store.state.themeConfig.themeConfig.columnsAsideStyle;
 		});
+		// 设置分栏布局风格
+		const setColumnsAsidelayout = computed(() => {
+			return store.state.themeConfig.themeConfig.columnsAsideLayout;
+		});
 		// 设置菜单高亮位置移动
 		const setColumnsAsideMove = (k: number) => {
 			state.liIndex = k;
@@ -138,6 +150,7 @@ export default {
 			columnsAsideActiveRef,
 			onColumnsAsideDown,
 			setColumnsAsideStyle,
+			setColumnsAsidelayout,
 			onColumnsAsideMenuClick,
 			...toRefs(state),
 		};
@@ -147,7 +160,7 @@ export default {
 
 <style scoped lang="scss">
 .layout-columns-aside {
-	width: 64px;
+	width: 70px;
 	height: 100%;
 	background: var(--bg-columnsMenuBar);
 	ul {
@@ -161,12 +174,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);
@@ -183,7 +212,7 @@ export default {
 			left: 50%;
 			top: 2px;
 			height: 44px;
-			width: 58px;
+			width: 65px;
 			transform: translateX(-50%);
 			z-index: 0;
 			transition: 0.3s ease-in-out;

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

@@ -258,7 +258,7 @@
 						</el-select>
 					</div>
 				</div>
-				<div class="layout-breadcrumb-seting-bar-flex mt15 mb28">
+				<div class="layout-breadcrumb-seting-bar-flex mt15">
 					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fiveColumnsAsideStyle') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-select v-model="getThemeConfig.columnsAsideStyle" placeholder="请选择" size="mini" style="width: 90px" @change="setLocalThemeConfig">
@@ -267,6 +267,15 @@
 						</el-select>
 					</div>
 				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt15 mb28">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fiveColumnsAsideLayout') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-select v-model="getThemeConfig.columnsAsideLayout" placeholder="请选择" size="mini" style="width: 90px" @change="setLocalThemeConfig">
+							<el-option label="水平" value="columns-horizontal"></el-option>
+							<el-option label="垂直" value="columns-vertical"></el-option>
+						</el-select>
+					</div>
+				</div>
 
 				<!-- 布局切换 -->
 				<el-divider content-position="left">{{ $t('message.layout.sixTitle') }}</el-divider>