'admin-21.05.28:修复布局配置设置初始值不生效问题'

This commit is contained in:
lyt 2021-05-28 17:23:26 +08:00
parent 4cc95c4f8f
commit 03609aeda6
4 changed files with 87 additions and 87 deletions

View File

@ -2,6 +2,10 @@ import { Module } from 'vuex';
// 此处加上 `.ts` 后缀报错,具体原因不详
import { ThemeConfigState, RootStateTypes } from '/@/store/interface/index';
/**
* 2020.05.28 by lyt
* `window.localStorage`
*/
const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
namespaced: true,
state: {
@ -9,8 +13,9 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
// 是否开启布局配置抽屉
isDrawer: false,
/*
------------------------------- */
/**
*
*/
// 默认 primary 颜色,请注意:需要同时修改 `/@/theme/common/var.scss` 对应的值
primary: '#409eff',
// 默认 success 颜色,请注意:需要同时修改 `/@/theme/common/var.scss` 对应的值
@ -22,8 +27,11 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
// 默认 danger 颜色,请注意:需要同时修改 `/@/theme/common/var.scss` 对应的值
danger: '#f56c6c',
/* 菜单 /
------------------------------- */
/**
* /
* /@/views/layout/navBars/breadcrumb/setings.vue
* `initSetLayoutChange(设置布局切换,重置主题样式)`
*/
// 默认顶栏导航背景颜色,请注意:需要同时修改 `/@/theme/common/var.scss` 对应的值
topBar: '#ffffff',
// 默认菜单导航背景颜色,请注意:需要同时修改 `/@/theme/common/var.scss` 对应的值
@ -46,8 +54,9 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
isMenuBarColorHighlight: false,
// 是否开启菜单字体背景高亮
/*
------------------------------- */
/**
*
*/
// 是否开启菜单水平折叠效果
isCollapse: false,
// 是否开启菜单手风琴效果
@ -63,13 +72,14 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
// 开启自动锁屏倒计时(s/秒)
lockScreenTime: 30,
/*
------------------------------- */
/**
*
*/
// 是否开启侧边栏 Logo
isShowLogo: false,
// 初始化变量,用于 el-scrollbar 的高度更新,请勿删除
isShowLogoChange: false,
// 是否开启 Breadcrumb
// 是否开启 Breadcrumb,强制经典、横向布局不显示
isBreadcrumb: true,
// 是否开启 Tagsview
isTagsview: true,
@ -92,29 +102,35 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
// 水印文案
wartermarkText: 'small@小柒',
/*
------------------------------- */
// 默认 Tagsview 风格,可选 1、 tags-style-one 2、 tags-style-two 3、 tags-style-three 4、 tags-style-four
/**
*
*/
// Tagsview 风格:可选值"<tags-style-one|tags-style-two|tags-style-three|tags-style-four>",默认 tags-style-one
tagsStyle: 'tags-style-one',
// 默认主页面切换动画,可选 1、 slide-right 2、 slide-left 3、 opacitys
// 主页面切换动画:可选值"<slide-right|slide-left|opacitys>",默认 slide-right
animation: 'slide-right',
// 默认分栏高亮风格,可选 1、 圆角 columns-round 2、 卡片 columns-card
// 分栏高亮风格:可选值"<columns-round|columns-card>",默认 columns-round
columnsAsideStyle: 'columns-round',
// 默认分栏布局风格,可选 1、 水平 columns-horizontal 2、 垂直 columns-vertical
// 分栏布局风格:可选值"<columns-horizontal|columns-vertical>",默认 columns-horizontal
columnsAsideLayout: 'columns-vertical',
/*
------------------------------- */
// 默认布局,可选 1、默认 defaults 2、经典 classic 3、横向 transverse 4、分栏 columns
/**
*
* /@/views/layout/navBars/breadcrumb/setings.vue
* `initSetLayoutChange(设置布局切换,重置主题样式)`
*/
// 布局切换:可选值"<defaults|classic|transverse|columns>",默认 defaults
layout: 'defaults',
/*
------------------------------- */
/**
*
*/
// 是否开启后端控制路由
isRequestRoutes: false,
/* 全局网站标题 /
------------------------------- */
/**
* /
*/
// 网站主标题(菜单导航、浏览器当前网页标题)
globalTitle: 'vue-next-admin',
// 网站副标题(登录页顶部文字)

View File

@ -1,5 +1,5 @@
<template>
<div class="layout-navbars-breadcrumb" v-show="getThemeConfig.isBreadcrumb">
<div class="layout-navbars-breadcrumb" :style="{ display: isShowBreadcrumb }">
<i
class="layout-navbars-breadcrumb-icon"
:class="getThemeConfig.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
@ -41,6 +41,15 @@ export default {
const getThemeConfig = computed(() => {
return store.state.themeConfig.themeConfig;
});
//
const isShowBreadcrumb = computed(() => {
const { layout, isBreadcrumb } = store.state.themeConfig.themeConfig;
if (layout === 'classic' || layout === 'transverse') {
return 'none';
} else {
return isBreadcrumb ? '' : 'none';
}
});
//
const onBreadcrumbClick = (v: any) => {
const { redirect, path } = v;
@ -85,6 +94,7 @@ export default {
});
return {
onThemeConfigChange,
isShowBreadcrumb,
getThemeConfig,
onBreadcrumbClick,
...toRefs(state),

View File

@ -164,12 +164,15 @@
<el-switch v-model="getThemeConfig.isShowLogo" @change="onIsShowLogoChange"></el-switch>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: getThemeConfig.layout === 'transverse' ? 0.5 : 1 }">
<div
class="layout-breadcrumb-seting-bar-flex mt15"
:style="{ opacity: getThemeConfig.layout === 'classic' || getThemeConfig.layout === 'transverse' ? 0.5 : 1 }"
>
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsBreadcrumb') }}</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-switch
v-model="getThemeConfig.isBreadcrumb"
:disabled="getThemeConfig.layout === 'transverse'"
:disabled="getThemeConfig.layout === 'classic' || getThemeConfig.layout === 'transverse'"
@change="onIsBreadcrumbChange"
></el-switch>
</div>
@ -423,12 +426,6 @@ export default defineComponent({
if (bool) els.setAttribute('style', `background-image:linear-gradient(to bottom left , ${color}, ${getLightColor(color, 0.6)})`);
else els.setAttribute('style', `background-image:${color}`);
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 / -->
@ -491,10 +488,9 @@ export default defineComponent({
}
const cssAttr =
attr === 'grayscale' ? `grayscale(${getThemeConfig.value.isGrayscale ? 1 : 0})` : `invert(${getThemeConfig.value.isInvert ? '80%' : '0%'})`;
const appEle: any = document.querySelector('#app');
const appEle: any = document.body;
appEle.setAttribute('style', `filter: ${cssAttr}`);
setLocalThemeConfig();
setLocal('appFilterStyle', appEle.style.cssText);
};
// 4 -->
const onWartermarkChange = () => {
@ -520,42 +516,23 @@ export default defineComponent({
//
const initSetLayoutChange = () => {
if (getThemeConfig.value.layout === 'classic') {
getThemeConfig.value.isShowLogo = true;
getThemeConfig.value.isBreadcrumb = false;
getThemeConfig.value.isCollapse = false;
getThemeConfig.value.isClassicSplitMenu = false;
getThemeConfig.value.menuBar = '#FFFFFF';
getThemeConfig.value.menuBarColor = '#606266';
getThemeConfig.value.topBar = '#ffffff';
getThemeConfig.value.topBarColor = '#606266';
initLayoutChangeFun();
} else if (getThemeConfig.value.layout === 'transverse') {
getThemeConfig.value.isShowLogo = true;
getThemeConfig.value.isBreadcrumb = false;
getThemeConfig.value.isCollapse = false;
getThemeConfig.value.isTagsview = false;
getThemeConfig.value.isClassicSplitMenu = false;
getThemeConfig.value.menuBarColor = '#FFFFFF';
getThemeConfig.value.topBar = '#545c64';
getThemeConfig.value.topBarColor = '#FFFFFF';
initLayoutChangeFun();
} else if (getThemeConfig.value.layout === 'columns') {
getThemeConfig.value.isShowLogo = true;
getThemeConfig.value.isBreadcrumb = true;
getThemeConfig.value.isCollapse = false;
getThemeConfig.value.isTagsview = true;
getThemeConfig.value.isClassicSplitMenu = false;
getThemeConfig.value.menuBar = '#FFFFFF';
getThemeConfig.value.menuBarColor = '#606266';
getThemeConfig.value.topBar = '#ffffff';
getThemeConfig.value.topBarColor = '#606266';
initLayoutChangeFun();
} else {
getThemeConfig.value.isShowLogo = false;
getThemeConfig.value.isBreadcrumb = true;
getThemeConfig.value.isCollapse = false;
getThemeConfig.value.isTagsview = true;
getThemeConfig.value.isClassicSplitMenu = false;
getThemeConfig.value.menuBar = '#545c64';
getThemeConfig.value.menuBarColor = '#eaeaea';
getThemeConfig.value.topBar = '#FFFFFF';
@ -616,11 +593,28 @@ export default defineComponent({
clipboard.destroy();
});
};
// 退()
const initSetStyle = () => {
setTimeout(() => {
// 2 / -->
onTopBarGradualChange();
// 2 / -->
onMenuBarGradualChange();
// 2 / -->
onColumnsMenuBarGradualChange();
// 2 / -->
onMenuBarHighlightChange();
}, 1300);
};
onMounted(() => {
nextTick(() => {
// logo
if (!getLocal('frequency')) initSetLayoutChange();
setLocal('frequency', 1);
// 退()
proxy.mittBus.on('onSignInClick', () => {
initSetStyle();
});
//
proxy.mittBus.on('onMenuClick', () => {
onMenuBarHighlightChange();
@ -632,48 +626,25 @@ export default defineComponent({
getThemeConfig.value.isDrawer = false;
initSetLayoutChange();
onMenuBarHighlightChange();
getThemeConfig.value.isCollapse = false;
});
window.addEventListener('load', () => {
//
setTimeout(() => {
//
if (getLocal('navbarsBgStyle') && getThemeConfig.value.isTopBarColorGradual) {
const breadcrumbIndexEl: any = document.querySelector('.layout-navbars-breadcrumb-index');
breadcrumbIndexEl.style.cssText = getLocal('navbarsBgStyle');
}
//
if (getLocal('asideBgStyle') && getThemeConfig.value.isMenuBarColorGradual) {
const asideEl: any = document.querySelector('.layout-container .el-aside');
asideEl.style.cssText = getLocal('asideBgStyle');
}
//
if (getLocal('columnsBgStyle') && getThemeConfig.value.isColumnsMenuBarColorGradual) {
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');
if (!els) return false;
els.setAttribute('id', getLocal('menuBarHighlightId'));
}
// /
if (getLocal('appFilterStyle')) {
const appEl: any = document.querySelector('#app');
appEl.style.cssText = getLocal('appFilterStyle');
}
// 退()
initSetStyle();
//
if (getThemeConfig.value.isGrayscale) onAddFilterChange('grayscale');
//
if (getThemeConfig.value.isInvert) onAddFilterChange('invert');
//
onWartermarkChange();
//
if (getLocal('themeConfig')) proxy.$i18n.locale = getLocal('themeConfig').globalI18n;
}, 1100);
});
});
});
onUnmounted(() => {
//
proxy.mittBus.off('onMenuClick');
proxy.mittBus.off('onSignInClick');
proxy.mittBus.off('layoutMobileResize');
});
return {

View File

@ -51,7 +51,7 @@
</template>
<script lang="ts">
import { toRefs, reactive, defineComponent, computed } from 'vue';
import { toRefs, reactive, defineComponent, computed, getCurrentInstance } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
@ -63,6 +63,7 @@ export default defineComponent({
name: 'login',
setup() {
const { t } = useI18n();
const { proxy } = getCurrentInstance() as any;
const store = useStore();
const route = useRoute();
const router = useRouter();
@ -143,6 +144,8 @@ export default defineComponent({
state.loading.signIn = true;
const signInText = t('message.signInText');
ElMessage.success(`${currentTimeInfo}${signInText}`);
// 退()
proxy.mittBus.emit('onSignInClick');
}, 300);
};
return {