hjq/PixelAI-admin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'admin-21.04.29:新增分栏布局时分栏菜单背景渐变功能'

Browse Source
This commit is contained in:
lyt 2021-04-29 11:49:01 +08:00
parent 6517b843ae
commit 7016ef6723
6 changed files with 25 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -109,6 +109,7 @@ export default {
twoColumnsMenuBarColor: 'Default font color bar menu',
twoIsTopBarColorGradual: 'Top bar gradient',
twoIsMenuBarColorGradual: 'Menu gradient',
twoIsColumnsMenuBarColorGradual: 'Column gradient',
twoIsMenuBarColorHighlight: 'Menu font highlight',
threeTitle: 'Interface settings',
threeIsCollapse: 'Menu horizontal collapse',

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

@ -109,6 +109,7 @@ export default {
twoColumnsMenuBarColor: '分栏菜单默认字体颜色',
twoIsTopBarColorGradual: '顶栏背景渐变',
twoIsMenuBarColorGradual: '菜单背景渐变',
twoIsColumnsMenuBarColorGradual: '分栏菜单背景渐变',
twoIsMenuBarColorHighlight: '菜单字体背景高亮',
threeTitle: '界面设置',
threeIsCollapse: '菜单水平折叠',

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

@ -109,6 +109,7 @@ export default {
twoColumnsMenuBarColor: '分欄選單默認字體顏色',
twoIsTopBarColorGradual: '頂欄背景漸變',
twoIsMenuBarColorGradual: '選單背景漸變',
twoIsColumnsMenuBarColorGradual: '分欄選單背景漸變',
twoIsMenuBarColorHighlight: '選單字體背景高亮',
threeTitle: '介面設定',
threeIsCollapse: '選單水准折疊',

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

@ -17,6 +17,7 @@ declare interface ThemeConfigState {
columnsMenuBarColor: string;
isTopBarColorGradual: boolean;
isMenuBarColorGradual: boolean;
isColumnsMenuBarColorGradual: boolean;
isMenuBarColorHighlight: boolean;
isCollapse: boolean;
isUniqueOpened: boolean;

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

@ -38,6 +38,8 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
isTopBarColorGradual: false,
// 是否开启菜单背景颜色渐变
isMenuBarColorGradual: false,
// 是否开启分栏菜单背景颜色渐变
isColumnsMenuBarColorGradual: false,
// 是否开启菜单字体背景高亮
isMenuBarColorHighlight: false,
// 是否开启菜单字体背景高亮

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

@ -94,6 +94,12 @@
<el-switch v-model="getThemeConfig.isMenuBarColorGradual" @change="onMenuBarGradualChange"></el-switch>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt14">
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoIsColumnsMenuBarColorGradual') }}</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-switch v-model="getThemeConfig.isColumnsMenuBarColorGradual" @change="onColumnsMenuBarGradualChange"></el-switch>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt14">
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoIsMenuBarColorHighlight') }}</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
@ -385,6 +391,7 @@ export default defineComponent({
document.documentElement.style.setProperty(`--bg-${bg}`, getThemeConfig.value[bg]);
onTopBarGradualChange();
onMenuBarGradualChange();
onColumnsMenuBarGradualChange();
setDispatchThemeConfig();
};
// 2、菜单 / 顶栏 --> 顶栏背景渐变
@ -395,6 +402,10 @@ export default defineComponent({
const onMenuBarGradualChange = () => {
setGraduaFun('.layout-container .el-aside', getThemeConfig.value.isMenuBarColorGradual, getThemeConfig.value.menuBar);
};
// 2、菜单 / 顶栏 --> 分栏菜单背景渐变
const onColumnsMenuBarGradualChange = () => {
setGraduaFun('.layout-container .layout-columns-aside', getThemeConfig.value.isColumnsMenuBarColorGradual, getThemeConfig.value.columnsMenuBar);
};
// 2、菜单 / 顶栏 --> 背景渐变函数
const setGraduaFun = (el: string, bool: boolean, color: string) => {
nextTick(() => {
@ -405,8 +416,10 @@ export default defineComponent({
setLocalThemeConfig();
const elNavbars: any = document.querySelector('.layout-navbars-breadcrumb-index');
const elAside: any = document.querySelector('.layout-container .el-aside');
const elColumns: any = document.querySelector('.layout-container .layout-columns-aside');
if (elNavbars) setLocal('navbarsBgStyle', elNavbars.style.cssText);
if (elAside) setLocal('asideBgStyle', elAside.style.cssText);
if (elColumns) setLocal('columnsBgStyle', elColumns.style.cssText);
});
};
// 2、菜单 / 顶栏 --> 菜单字体背景高亮
@ -621,6 +634,11 @@ export default defineComponent({
const asideEl: any = document.querySelector('.layout-container .el-aside');
asideEl.style.cssText = getLocal('asideBgStyle');
}
// 分栏菜单背景渐变
if (getLocal('columnsBgStyle') && getThemeConfig.value.isMenuBarColorGradual) {
const asideEl: any = document.querySelector('.layout-container .layout-columns-aside');
asideEl.style.cssText = getLocal('columnsBgStyle');
}
// 菜单字体背景高亮
if (getLocal('menuBarHighlightId') && getThemeConfig.value.isMenuBarColorHighlight) {
let els = document.querySelector('.el-menu-item.is-active');
@ -651,6 +669,7 @@ export default defineComponent({
onBgColorPickerChange,
onTopBarGradualChange,
onMenuBarGradualChange,
onColumnsMenuBarGradualChange,
onMenuBarHighlightChange,
onThemeConfigChange,
onIsFixedHeaderChange,