diff --git a/src/i18n/lang/en.ts b/src/i18n/lang/en.ts index c2fb991b..7291e946 100644 --- a/src/i18n/lang/en.ts +++ b/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', diff --git a/src/i18n/lang/zh-cn.ts b/src/i18n/lang/zh-cn.ts index adcd8668..f3810bf6 100644 --- a/src/i18n/lang/zh-cn.ts +++ b/src/i18n/lang/zh-cn.ts @@ -139,6 +139,7 @@ export default { fiveTagsStyle: 'Tagsview 风格', fiveAnimation: '主页面切换动画', fiveColumnsAsideStyle: '分栏高亮风格', + fiveColumnsAsideLayout: '分栏布局风格', sixTitle: '布局切换', sixDefaults: '默认', sixClassic: '经典', diff --git a/src/i18n/lang/zh-tw.ts b/src/i18n/lang/zh-tw.ts index 08a0614a..17112994 100644 --- a/src/i18n/lang/zh-tw.ts +++ b/src/i18n/lang/zh-tw.ts @@ -139,6 +139,7 @@ export default { fiveTagsStyle: 'Tagsview 風格', fiveAnimation: '主頁面切換動畫', fiveColumnsAsideStyle: '分欄高亮風格', + fiveColumnsAsideLayout: '分欄佈局風格', sixTitle: '佈局切換', sixDefaults: '默認', sixClassic: '經典', diff --git a/src/store/interface/index.ts b/src/store/interface/index.ts index b7faba20..85b85df2 100644 --- a/src/store/interface/index.ts +++ b/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; diff --git a/src/store/modules/themeConfig.ts b/src/store/modules/themeConfig.ts index 8856228c..808bb10d 100644 --- a/src/store/modules/themeConfig.ts +++ b/src/store/modules/themeConfig.ts @@ -100,6 +100,8 @@ const themeConfigModule: Module = { animation: 'slide-right', // 默认分栏高亮风格，可选 1、 圆角 columns-round 2、 卡片 columns-card columnsAsideStyle: 'columns-round', + // 默认分栏布局风格，可选 1、 水平 columns-horizontal 2、 垂直 columns-vertical + columnsAsideLayout: 'columns-vertical', /* 布局切换 ------------------------------- */ diff --git a/src/views/layout/component/columnsAside.vue b/src/views/layout/component/columnsAside.vue index 6a0f7f1d..85cd2c56 100644 --- a/src/views/layout/component/columnsAside.vue +++ b/src/views/layout/component/columnsAside.vue @@ -14,17 +14,25 @@ :class="{ 'layout-columns-active': liIndex === k }" :title="$t(v.meta.title)" > -
+
-
- {{ $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) + }}
-
+
-
- {{ $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) + }}
@@ -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 {