mirrors/pig-ui
1
0
Fork 0
mirror of https://gitee.com/log4j/pig-ui.git synced 2024-12-23 05:40:20 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
lyt 2021-05-18 15:42:45 +08:00
parent fc696e6d94
commit 2063732014
7 changed files with 56 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/i18n/lang/en.ts
View File

@ -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',

1
src/i18n/lang/zh-cn.ts
View File

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

1
src/i18n/lang/zh-tw.ts
View File

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

1
src/store/interface/index.ts
View File

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

2
src/store/modules/themeConfig.ts
View File

@ -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',
/* 布局切换
------------------------------- */

51
src/views/layout/component/columnsAside.vue
View File

@ -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">
{{ $t(v.meta.title) && $t(v.meta.title).length >= 4 ? $t(v.meta.title).substr(0, 4) : $t(v.meta.title) }}
<div class="columns-vertical-title font12">
{{
$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) }}
<div class="columns-vertical-title font12">
{{
$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;

11
src/views/layout/navBars/breadcrumb/setings.vue
View File

@ -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>