github/CRMEB
1
0
Fork 0
mirror of https://github.com/crmeb/CRMEB.git synced 2026-10-29 22:10:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve; 主题添加

Browse Source
This commit is contained in:
From-wh 2023-03-30 18:27:25 +08:00
parent 91b0c98929
commit 2b85e04a58
12 changed files with 499 additions and 260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
template/admin/src/i18n/lang/en.js
View File

@ -133,6 +133,7 @@ export default {
fourWartermarkText: 'Watermark copy',
fiveTitle: 'Other settings',
fiveTagsStyle: 'Tagsview style',
themeStyle: 'Theme',
fiveAnimation: 'page animation',
fiveColumnsAsideStyle: 'Column style',
fiveColumnsAsideLayout: 'Column layout',

13
template/admin/src/i18n/lang/zh-cn.js
View File

@ -121,18 +121,19 @@ export default {
threeLockScreenTime: '自动锁屏(s/秒)',
fourTitle: '界面显示',
fourIsShowLogo: '侧边栏 Logo',
fourIsBreadcrumb: '开启 面包屑',
fourIsBreadcrumbIcon: '开启 面包屑图标',
fourIsTagsview: '开启 历史菜单',
fourIsTagsviewIcon: '开启 历史菜单 图标',
fourIsFooter: '开启 Footer',
fourIsBreadcrumb: '面包屑',
fourIsBreadcrumbIcon: '面包屑图标',
fourIsTagsview: '历史菜单',
fourIsTagsviewIcon: '历史菜单 图标',
fourIsFooter: 'Footer',
fourIsGrayscale: '灰色模式',
fourIsInvert: '色弱模式',
fourIsDark: '深色模式',
fourIsWartermark: '开启水印',
fourWartermarkText: '水印文案',
fiveTitle: '其它设置',
fiveTagsStyle: 'Tagsview 风格',
fiveTagsStyle: '标签风格',
themeStyle: '主题',
fiveAnimation: '主页面切换动画',
fiveColumnsAsideStyle: '分栏高亮风格',
fiveColumnsAsideLayout: '分栏布局风格',

1
template/admin/src/i18n/lang/zh-tw.js
View File

@ -133,6 +133,7 @@ export default {
fourWartermarkText: '浮水印文案',
fiveTitle: '其它設定',
fiveTagsStyle: 'Tagsview 風格',
themeStyle: '主題',
fiveAnimation: '主頁面切換動畫',
fiveColumnsAsideStyle: '分欄高亮風格',
fiveColumnsAsideLayout: '分欄佈局風格',

7
template/admin/src/layout/component/aside.vue
View File

@ -1,6 +1,7 @@
<template>
<el-aside class="layout-aside" :class="setCollapseWidth" v-if="clientWidth > 1000">
<Logo v-if="setShowLogo && menuList.length" />
<!-- <Logo v-if="setShowLogo && menuList.length" /> -->
<el-divider v-if="menuList.length && !getThemeConfig.isCollapse" content-position="center">{{ catName }}</el-divider>
<el-scrollbar class="flex-auto" ref="layoutAsideRef">
<Vertical :menuList="menuList" :class="setCollapseWidth" />
</el-scrollbar>
@ -25,6 +26,7 @@ export default {
return {
menuList: [],
clientWidth: '',
catName: '',
};
},
computed: {
@ -73,6 +75,9 @@ export default {
this.bus.$on('layoutMobileResize', (res) => {
this.initMenuFixed(res.clientWidth);
});
this.bus.$on('oneCatName', (name) => {
this.catName = name;
});
// 菜单滚动条监听
this.bus.$on('updateElScrollBar', () => {
setTimeout(() => {

9
template/admin/src/layout/component/columnsAside.vue
View File

@ -1,6 +1,7 @@
<template>
<div class="layout-columns-aside">
<el-scrollbar>
<Logo />
<ul>
<li
v-for="(v, k) in columnsAsideList"
@ -41,9 +42,11 @@
<script>
import { getMenuSider, getHeaderName } from '@/libs/system';
import Logo from '@/layout/logo/index.vue';
export default {
name: 'layoutColumnsAside',
components: { Logo },
data() {
return {
columnsAsideList: [],
@ -108,6 +111,7 @@ export default {
this.$store.state.themeConfig.themeConfig.isCollapse = true;
return false;
}
this.bus.$emit('oneCatName', resData.item[0].title);
this.onColumnsAsideDown(resData.item[0].k);
// 刷新时，初始化一个路由设置自动收起菜单
resData.children.length > 0
@ -181,6 +185,7 @@ export default {
const resData = this.setSendChildren(HeadName);
if (resData.length <= 0) return false;
this.onColumnsAsideDown(resData.item[0].k);
this.bus.$emit('oneCatName', resData.item[0].title);
this.bus.$emit('setSendColumnsChildren', asideList || []);
},
deep: true,
@ -235,12 +240,12 @@ export default {
}
.layout-columns-active,
.layout-columns-active a {
color: var(--prev-color-text-white);
color: var(--prev-bg-columnsMenuActiveColor);
transition: 0.3s ease-in-out;
}
.columns-round {
background: var(--prev-color-primary);
color: var(--prev-color-text-white);
// color: var(--prev-color-text-white);
position: absolute;
left: 50%;
top: 2px;

8
template/admin/src/layout/logo/index.vue
View File

@ -1,5 +1,9 @@
<template>
<div class="layout-logo" v-if="!$store.state.themeConfig.themeConfig.isCollapse" @click="onThemeConfigChange">
<div
class="layout-logo"
v-if="$store.state.themeConfig.themeConfig.layout !== 'columns' && !$store.state.themeConfig.themeConfig.isCollapse"
@click="onThemeConfigChange"
>
<img v-if="maxLogo" class="layout-logo-medium-img" :src="maxLogo" />
</div>
<div class="layout-logo-size" v-else @click="onThemeConfigChange">
@ -55,7 +59,7 @@ export default {
display: flex;
align-items: center;
justify-content: center;
// box-shadow: 0px 1px 4px rgba(0, 21, 41, 2%);
// box-shadow: 0px 1px 4px rgba(0, 21, 41, 2%);
color: var(--prev-color-primary);
font-size: 16px;
cursor: pointer;

355
template/admin/src/layout/navBars/breadcrumb/setings.vue
View File

@ -1,16 +1,102 @@
<template>
<div class="layout-breadcrumb-seting">
<el-drawer
:title="$t('message.layout.configTitle')"
:visible.sync="getThemeConfig.isDrawer"
direction="rtl"
destroy-on-close
size="240px"
size="300px"
@close="onDrawerClose"
>
<el-scrollbar class="layout-breadcrumb-seting-bar">
<!-- 布局切换 -->
<el-divider :content-position="contentPosotion">{{ $t('message.layout.sixTitle') }}</el-divider>
<div class="layout-drawer-content-flex">
<!-- defaults 布局 -->
<div
class="layout-drawer-content-item"
:class="{ 'drawer-layout-active': getThemeConfig.layout === 'defaults' }"
@click="onSetLayout('defaults')"
>
<section class="el-container el-circular">
<aside class="el-aside w10 mr5"></aside>
<section class="el-container is-vertical">
<header class="el-header mb5" style="height: 10px"></header>
<main class="el-main"></main>
</section>
</section>
<!-- <div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'defaults' }">
<div class="layout-tips-box">
<p class="layout-tips-txt">{{ $t('message.layout.sixDefaults') }}</p>
</div>
</div> -->
</div>
<!-- classic 布局 -->
<div
class="layout-drawer-content-item"
:class="{ 'drawer-layout-active': getThemeConfig.layout === 'classic' }"
@click="onSetLayout('classic')"
>
<section class="el-container is-vertical el-circular">
<header class="el-header mb5" style="height: 10px"></header>
<section class="el-container">
<aside class="el-aside mr5" style="width: 20px"></aside>
<section class="el-container is-vertical">
<main class="el-main"></main>
</section>
</section>
</section>
<!-- <div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'classic' }">
<div class="layout-tips-box">
<p class="layout-tips-txt">{{ $t('message.layout.sixClassic') }}</p>
</div>
</div> -->
</div>
<!-- transverse 布局 -->
<div
class="layout-drawer-content-item"
:class="{ 'drawer-layout-active': getThemeConfig.layout === 'transverse' }"
@click="onSetLayout('transverse')"
>
<section class="el-container is-vertical el-circular">
<header class="el-header mb5" style="height: 10px"></header>
<section class="el-container">
<section class="el-container is-vertical">
<main class="el-main"></main>
</section>
</section>
</section>
<!-- <div
class="layout-tips-warp"
:class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'transverse' }"
>
<div class="layout-tips-box">
<p class="layout-tips-txt">{{ $t('message.layout.sixTransverse') }}</p>
</div>
</div> -->
</div>
<!-- columns 布局 -->
<div
class="layout-drawer-content-item"
:class="{ 'drawer-layout-active': getThemeConfig.layout === 'columns' }"
@click="onSetLayout('columns')"
>
<section class="el-container el-circular">
<aside class="el-aside-dark mr5" style="width: 10px"></aside>
<aside class="el-aside mr5" style="width: 17px"></aside>
<section class="el-container is-vertical">
<!-- <header class="el-header" style="height: 10px"></header> -->
<main class="el-main"></main>
</section>
</section>
<!-- <div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'columns' }">
<div class="layout-tips-box">
<p class="layout-tips-txt">{{ $t('message.layout.sixColumns') }}</p>
</div>
</div> -->
</div>
</div>
<!-- 全局主题 -->
<el-divider content-position="left">{{ $t('message.layout.oneTitle') }}</el-divider>
<!-- <el-divider :content-position="contentPosotion">{{ $t('message.layout.oneTitle') }}</el-divider>
<div class="layout-breadcrumb-seting-bar-flex">
<div class="layout-breadcrumb-seting-bar-flex-label">primary</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
@ -30,10 +116,32 @@
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-switch v-model="getThemeConfig.isIsDark" :width="35" @change="onAddDarkChange"></el-switch>
</div>
</div>
</div> -->
<!-- 界面设置 -->
<el-divider content-position="left">{{ $t('message.layout.threeTitle') }}</el-divider>
<el-divider :content-position="contentPosotion">{{ $t('message.layout.threeTitle') }}</el-divider>
<div class="layout-breadcrumb-seting-bar-flex mb10">
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.themeStyle') }}</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-select
v-model="getThemeConfig.themeStyle"
placeholder="请选择"
size="mini"
style="width: 90px"
@change="setLocalTheme"
>
<el-option label="蓝黑" value="theme-1"></el-option>
<el-option label="蓝白" value="theme-2"></el-option>
<el-option label="绿黑" value="theme-3"></el-option>
<el-option label="绿白" value="theme-4"></el-option>
<el-option label="紫黑" value="theme-5"></el-option>
<el-option label="紫白" value="theme-6"></el-option>
<el-option label="红黑" value="theme-7"></el-option>
<el-option label="红白" value="theme-8"></el-option>
<el-option label="渐变" value="theme-9"></el-option>
</el-select>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex">
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeIsCollapse') }}</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
@ -54,7 +162,7 @@
</div>
<!-- 界面显示 -->
<el-divider content-position="left">{{ $t('message.layout.fourTitle') }}</el-divider>
<el-divider :content-position="contentPosotion">{{ $t('message.layout.fourTitle') }}</el-divider>
<div class="layout-breadcrumb-seting-bar-flex">
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsShowLogo') }}</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
@ -123,7 +231,7 @@
</div>
<!-- 其它设置 -->
<el-divider content-position="left">{{ $t('message.layout.fiveTitle') }}</el-divider>
<el-divider :content-position="contentPosotion">{{ $t('message.layout.fiveTitle') }}</el-divider>
<div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fiveTagsStyle') }}</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
@ -186,91 +294,7 @@
</el-select>
</div>
</div>
<!-- 布局切换 -->
<el-divider content-position="left">{{ $t('message.layout.sixTitle') }}</el-divider>
<div class="layout-drawer-content-flex">
<!-- defaults 布局 -->
<div class="layout-drawer-content-item" @click="onSetLayout('defaults')">
<section
class="el-container el-circular"
:class="{ 'drawer-layout-active': getThemeConfig.layout === 'defaults' }"
>
<aside class="el-aside" style="width: 20px"></aside>
<section class="el-container is-vertical">
<header class="el-header" style="height: 10px"></header>
<main class="el-main"></main>
</section>
</section>
<div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'defaults' }">
<div class="layout-tips-box">
<p class="layout-tips-txt">{{ $t('message.layout.sixDefaults') }}</p>
</div>
</div>
</div>
<!-- classic 布局 -->
<div class="layout-drawer-content-item" @click="onSetLayout('classic')">
<section
class="el-container is-vertical el-circular"
:class="{ 'drawer-layout-active': getThemeConfig.layout === 'classic' }"
>
<header class="el-header" style="height: 10px"></header>
<section class="el-container">
<aside class="el-aside" style="width: 20px"></aside>
<section class="el-container is-vertical">
<main class="el-main"></main>
</section>
</section>
</section>
<div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'classic' }">
<div class="layout-tips-box">
<p class="layout-tips-txt">{{ $t('message.layout.sixClassic') }}</p>
</div>
</div>
</div>
<!-- transverse 布局 -->
<div class="layout-drawer-content-item" @click="onSetLayout('transverse')">
<section
class="el-container is-vertical el-circular"
:class="{ 'drawer-layout-active': getThemeConfig.layout === 'transverse' }"
>
<header class="el-header" style="height: 10px"></header>
<section class="el-container">
<section class="el-container is-vertical">
<main class="el-main"></main>
</section>
</section>
</section>
<div
class="layout-tips-warp"
:class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'transverse' }"
>
<div class="layout-tips-box">
<p class="layout-tips-txt">{{ $t('message.layout.sixTransverse') }}</p>
</div>
</div>
</div>
<!-- columns 布局 -->
<div class="layout-drawer-content-item" @click="onSetLayout('columns')">
<section
class="el-container el-circular"
:class="{ 'drawer-layout-active': getThemeConfig.layout === 'columns' }"
>
<aside class="el-aside-dark" style="width: 10px"></aside>
<aside class="el-aside" style="width: 20px"></aside>
<section class="el-container is-vertical">
<header class="el-header" style="height: 10px"></header>
<main class="el-main"></main>
</section>
</section>
<div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'columns' }">
<div class="layout-tips-box">
<p class="layout-tips-txt">{{ $t('message.layout.sixColumns') }}</p>
</div>
</div>
</div>
</div>
<div class="copy-config">
<!-- <div class="copy-config">
<el-alert :title="$t('message.layout.tipText')" type="warning" :closable="false"> </el-alert>
<el-button
size="small"
@ -290,7 +314,7 @@
>
{{ $t('message.layout.resetText') }}
</el-button>
</div>
</div> -->
</el-scrollbar>
</el-drawer>
</div>
@ -301,6 +325,7 @@ import ClipboardJS from 'clipboard';
import { Local } from '@/utils/storage.js';
import { useChangeColor } from '@/utils/theme.js';
import config from '../../../../package.json';
import { themeList } from './theme';
export default {
name: 'layoutBreadcrumbSeting',
computed: {
@ -309,6 +334,11 @@ export default {
return this.$store.state.themeConfig.themeConfig;
},
},
data() {
return {
contentPosotion: 'center',
};
},
created() {
// 判断当前布局是否不相同，不相同则初始化当前布局的样式，防止监听窗口大小改变时，布局配置logo、菜单背景等部分布局失效问题
if (!Local.get('frequency')) this.initSetLayoutChange();
@ -321,6 +351,7 @@ export default {
this.$store.state.themeConfig.themeConfig.isCollapse = false;
this.initSetLayoutChange();
});
this.setLocalTheme(this.$store.state.themeConfig.themeConfig.themeStyle);
},
mounted() {
this.initLayoutConfig();
@ -330,7 +361,7 @@ export default {
onColorPickerChange() {
if (!this.getThemeConfig.primary) return;
// 颜色加深
document.documentElement.style.setProperty('--prev-color-primary', this.getThemeConfig.primary);
// document.documentElement.style.setProperty('--prev-color-primary', this.getThemeConfig.primary);
// 颜色变浅
for (let i = 1; i <= 9; i++) {
document.documentElement.style.setProperty(
@ -340,6 +371,46 @@ export default {
}
this.setLocalThemeConfig();
},
setLocalTheme(val) {
let themeSelect = themeList[val];
if (['theme-1', 'theme-3', 'theme-5', 'theme-7'].includes(val)) {
// 这几个为黑色背景主题
if (['classic', 'transverse'].includes(this.getThemeConfig.layout)) {
themeSelect['--prev-bg-topBar'] = '#282c34';
themeSelect['--prev-bg-topBarColor'] = '#fff';
} else if (this.getThemeConfig.layout === 'columns') {
themeSelect['--prev-bg-topBar'] = '#fff';
themeSelect['--prev-bg-topBarColor'] = '#515a6e';
themeSelect['--prev-bg-menuBar'] = '#fff';
themeSelect['--prev-bg-menuBarColor'] = '#303133';
if (val == 'theme-1') {
themeSelect['--prev-bg-menu-hover-ba-color'] = '#e8f4ff';
themeSelect['--prev-color-primary'] = '#1890ff';
} else if (val == 'theme-3') {
themeSelect['--prev-bg-menu-hover-ba-color'] = '#ecf8f3';
themeSelect['--prev-color-primary'] = '#41b584';
} else if (val == 'theme-5') {
themeSelect['--prev-bg-menu-hover-ba-color'] = '#f0eefe';
themeSelect['--prev-color-primary'] = '#6954f0';
} else if (val == 'theme-7') {
themeSelect['--prev-bg-menu-hover-ba-color'] = '#feedeb';
themeSelect['--prev-color-primary'] = '#f34d37';
}
}
} else {
if (this.getThemeConfig.layout === 'columns') {
if (val == 'theme-4') {
// themeSelect['--prev-bg-menu-hover-ba-color'] = '#ecf8f3';
// themeSelect['--prev-color-primary'] = '#41b584';
}
}
}
for (let key in themeSelect) {
console.log(key, themeSelect[key]);
document.documentElement.style.setProperty(key, themeSelect[key]);
}
},
onMenuBgColorChange() {
if (!this.getThemeConfig.menuBgColor) return;
// 颜色加深
@ -411,33 +482,35 @@ export default {
if (this.$store.state.themeConfig.themeConfig.layout === layout) return false;
this.$store.state.themeConfig.themeConfig.layout = layout;
this.$store.state.themeConfig.themeConfig.isDrawer = false;
this.initSetLayoutChange();
// this.initSetLayoutChange();
this.setLocalTheme(this.$store.state.themeConfig.themeConfig.themeStyle);
},
// 设置布局切换，重置主题样式
initSetLayoutChange() {
console.log(this.$store.state.themeConfig.themeConfig.layout);
if (this.$store.state.themeConfig.themeConfig.layout === 'classic') {
this.onBgColorPickerChange('menuBar', '#282c34');
this.onBgColorPickerChange('menuBarColor', '#ffffff');
this.onBgColorPickerChange('topBar', '#282c34');
this.onBgColorPickerChange('topBarColor', '#ffffff');
} else if (this.$store.state.themeConfig.themeConfig.layout === 'transverse') {
this.onBgColorPickerChange('menuBarColor', '#ffffff');
this.onBgColorPickerChange('topBar', '#282c34');
this.onBgColorPickerChange('topBarColor', '#fff');
// this.onBgColorPickerChange('bgTopBarColor', '#ccc');
} else if (this.$store.state.themeConfig.themeConfig.layout === 'columns') {
this.onBgColorPickerChange('menuBar', '#282c34');
this.onBgColorPickerChange('menuBarColor', '#fff');
this.onBgColorPickerChange('topBar', '#ffffff');
this.onBgColorPickerChange('topBarColor', '#606266');
this.onBgColorPickerChange('columnsMenuBar', '#282c34');
} else {
this.onBgColorPickerChange('menuBar', '#282c34');
this.onBgColorPickerChange('menuBarColor', '#ffffff');
this.onBgColorPickerChange('topBar', '#ffffff');
this.onBgColorPickerChange('topBarColor', '#606266');
}
// if (this.$store.state.themeConfig.themeConfig.layout === 'classic') {
// this.onBgColorPickerChange('menuBar', '#282c34');
// this.onBgColorPickerChange('menuBarColor', '#ffffff');
// this.onBgColorPickerChange('topBar', '#282c34');
// this.onBgColorPickerChange('topBarColor', '#ffffff');
// } else if (this.$store.state.themeConfig.themeConfig.layout === 'transverse') {
// this.onBgColorPickerChange('menuBarColor', '#ffffff');
// this.onBgColorPickerChange('topBar', '#282c34');
// this.onBgColorPickerChange('topBarColor', '#fff');
// // this.onBgColorPickerChange('bgTopBarColor', '#ccc');
// } else if (this.$store.state.themeConfig.themeConfig.layout === 'columns') {
// this.onBgColorPickerChange('menuBar', '#282c34');
// this.onBgColorPickerChange('menuBarColor', '#fff');
// this.onBgColorPickerChange('topBar', '#ffffff');
// this.onBgColorPickerChange('topBarColor', '#606266');
// this.onBgColorPickerChange('columnsMenuBar', '#282c34');
// } else {
// this.onBgColorPickerChange('menuBar', '#282c34');
// this.onBgColorPickerChange('menuBarColor', '#ffffff');
// this.onBgColorPickerChange('topBar', '#ffffff');
// this.onBgColorPickerChange('topBarColor', '#606266');
// }
},
// 菜单 / 顶栏背景等
onBgColorPickerChange(bg, rgb) {
@ -470,6 +543,12 @@ export default {
</script>
<style scoped lang="scss">
.w10 {
width: 10px;
}
.mr5 {
margin-right: 5px;
}
.layout-breadcrumb-seting-bar {
height: calc(100vh - 50px);
padding: 0 15px;
@ -488,27 +567,49 @@ export default {
overflow: hidden;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
align-content: center;
justify-content: center;
margin: 0 -5px;
.layout-drawer-content-item.drawer-layout-active {
border: 1px solid;
border-color: #2d8cf0;
}
.layout-drawer-content-item:hover {
transition: all 0.3s ease-in-out;
border: 1px solid;
border-color: #2d8cf0;
}
.layout-drawer-content-item {
width: 50%;
width: 107px;
height: 70px;
cursor: pointer;
border: 1px solid transparent;
border: 1px solid rgba(0, 0, 0, 0);
position: relative;
padding: 5px;
padding: 6px;
background: #ffffff;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.08);
border-radius: 6px;
opacity: 1;
margin: 10px;
.el-container {
height: 100%;
.el-aside-dark {
background-color: var(--prev-color-seting-header);
border-radius: 2px;
}
.el-aside {
background-color: var(--prev-color-seting-aside);
background-color: var(--prev-color-primary);
border-radius: 2px;
}
.el-header {
border-radius: 2px;
background-color: var(--prev-color-seting-header);
}
.el-main {
border-radius: 2px;
border: 1px dashed #2d8cf0;
padding: 0;
background-color: var(--prev-color-seting-main);
}
}
@ -518,10 +619,7 @@ export default {
border: 1px solid transparent;
transition: all 0.3s ease-in-out;
}
.drawer-layout-active {
border: 1px solid;
border-color: var(--prev-color-primary);
}
.layout-tips-warp,
.layout-tips-warp-active {
transition: all 0.3s ease-in-out;
@ -573,11 +671,6 @@ export default {
}
}
&:hover {
.el-circular {
transition: all 0.3s ease-in-out;
border: 1px solid;
border-color: var(--prev-color-primary);
}
.layout-tips-warp {
transition: all 0.3s ease-in-out;
border-color: var(--prev-color-primary);

125
template/admin/src/layout/navBars/breadcrumb/theme.js Normal file
View File

@ -0,0 +1,125 @@
export const themeList = {
'theme-1': {
'--prev-bg-menuBar': '#282c34',
'--prev-bg-menuBarColor': '#fff',
'--prev-color-primary': '#fff',
'--prev-color-text-white': '#515a6e',
'--prev-bg-menu-hover-ba-color': '#1890ff',
'--prev-bg-topBar': '#fff', //顶部菜单栏颜色
'--prev-bg-topBarColor': '#282c34',
'--prev-bg-columnsMenuBar': '#282c34',
'--prev-bg-columnsMenuBarColor': '#fff',
'--prev-bg-columnsMenuActiveColor': '#fff',
'--prev-tag-active-color': '#1890ff',
'--prev-color-primary-light-9': '#e8f4ff',
},
'theme-2': {
'--prev-bg-menuBar': '#ffffff',
'--prev-bg-menuBarColor': '#515a6e',
'--prev-color-primary': '#1890ff',
'--prev-color-text-white': '#515a6e',
'--prev-bg-menu-hover-ba-color': '#e8f4ff',
'--prev-bg-topBar': '#ffffff',
'--prev-bg-topBarColor': '#515a6e',
'--prev-bg-columnsMenuBar': '#fff',
'--prev-bg-columnsMenuBarColor': '#515a6e',
'--prev-bg-columnsMenuActiveColor': '#fff',
'--prev-tag-active-color': '#1890ff',
'--prev-color-primary-light-9': '#e8f4ff',
},
'theme-3': {
'--prev-bg-menuBar': '#282c34',
'--prev-bg-menuBarColor': '#fff',
'--prev-color-primary': '#fff',
'--prev-color-text-white': '#515a6e',
'--prev-bg-menu-hover-ba-color': '#41b584', // 菜单选中背景色
'--prev-bg-topBar': '#fff', //顶部菜单栏颜色
'--prev-bg-topBarColor': '#282c34',
'--prev-bg-columnsMenuBar': '#282c34',
'--prev-bg-columnsMenuBarColor': '#fff',
'--prev-bg-columnsMenuActiveColor': '#fff',
'--prev-color-primary-light-9': '#ecf8f3',
'--prev-tag-active-color': '#41b584',
'--prev-color-primary-light-9': '#ecf8f3',
},
'theme-4': {
'--prev-bg-menuBar': '#ffffff',
'--prev-bg-menuBarColor': '#515a6e',
'--prev-color-primary': '#41b584',
'--prev-color-text-white': '#515a6e',
'--prev-bg-menu-hover-ba-color': '#ecf8f3',
'--prev-bg-topBar': '#ffffff',
'--prev-bg-topBarColor': '#515a6e',
'--prev-bg-columnsMenuBar': '#fff',
'--prev-bg-columnsMenuBarColor': '#515a6e',
'--prev-bg-columnsMenuActiveColor': '#ecf8f3',
'--prev-tag-active-color': '#41b584',
'--prev-color-primary-light-9': '#ecf8f3',
},
'theme-5': {
'--prev-bg-menuBar': '#282c34',
'--prev-bg-menuBarColor': '#fff',
'--prev-color-primary': '#fff',
'--prev-color-text-white': '#515a6e',
'--prev-bg-menu-hover-ba-color': '#6954f0', // 菜单选中背景色
'--prev-bg-topBar': '#fff', //顶部菜单栏颜色
'--prev-bg-topBarColor': '#282c34',
'--prev-bg-columnsMenuBar': '#282c34',
'--prev-bg-columnsMenuBarColor': '#fff',
'--prev-bg-columnsMenuActiveColor': '#fff',
'--prev-color-primary-light-9': '#f0eefe',
'--prev-tag-active-color': '#6954f0',
},
'theme-6': {
'--prev-bg-menuBar': '#ffffff',
'--prev-bg-menuBarColor': '#515a6e',
'--prev-color-primary': '#6954f0',
'--prev-color-text-white': '#515a6e',
'--prev-bg-menu-hover-ba-color': '#e8f4ff',
'--prev-bg-topBar': '#ffffff',
'--prev-bg-topBarColor': '#515a6e',
'--prev-bg-columnsMenuBar': '#fff',
'--prev-bg-columnsMenuBarColor': '#515a6e',
'--prev-bg-columnsMenuActiveColor': '#fff',
'--prev-color-primary-light-9': '#f0eefe',
},
'theme-7': {
'--prev-bg-menuBar': '#282c34',
'--prev-bg-menuBarColor': '#fff',
'--prev-color-primary': '#fff',
'--prev-color-text-white': '#515a6e',
'--prev-bg-menu-hover-ba-color': '#f34d37', // 菜单选中背景色
'--prev-bg-topBar': '#fff', //顶部菜单栏颜色
'--prev-bg-topBarColor': '#282c34',
'--prev-bg-columnsMenuBar': '#282c34',
'--prev-bg-columnsMenuBarColor': '#fff',
'--prev-bg-columnsMenuActiveColor': '#fff',
},
'theme-8': {
'--prev-bg-menuBar': '#ffffff',
'--prev-bg-menuBarColor': '#515a6e',
'--prev-color-primary': '#f34d37',
'--prev-color-text-white': '#515a6e',
'--prev-bg-menu-hover-ba-color': '#feedeb',
'--prev-bg-topBar': '#ffffff',
'--prev-bg-topBarColor': '#515a6e',
'--prev-bg-columnsMenuBar': '#fff',
'--prev-bg-columnsMenuBarColor': '#515a6e',
'--prev-bg-columnsMenuActiveColor': '#fff',
'--prev-color-primary-light-9': '#feedeb',
},
'theme-9': {
'--prev-bg-menuBar': '#ffffff',
'--prev-bg-menuBarColor': '#515a6e',
'--prev-color-primary': '#1890ff',
'--prev-color-text-white': '#515a6e',
'--prev-bg-menu-hover-ba-color': '#e8f4ff',
'--prev-bg-topBar': '#ffffff',
'--prev-bg-topBarColor': '#515a6e',
'--prev-bg-columnsMenuBar': 'linear-gradient(90deg,#006cff,#399efd)',
'--prev-bg-columnsMenuBarColor': '#fff',
'--prev-bg-columnsMenuActiveColor': '#fff',
'--prev-tag-active-color': '#1890ff',
'--prev-color-primary-light-9': '#e8f4ff',
},
};

13
template/admin/src/layout/navBars/tagsView/tagsView.vue
View File

@ -371,7 +371,7 @@ export default {
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
&:hover {
color: var(--prev-color-text-white);
color: var(--prev-color-primary-light-9);
transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1);
border-color: transparent;
&::before {
@ -380,7 +380,8 @@ export default {
border-radius: 2px;
}
.is-tagsview-icon {
color: var(--prev-color-text-white);
color: var(--prev-color-primary-light-9);
transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1);
}
}
@ -388,7 +389,7 @@ export default {
position: relative;
left: -5px;
top: 1px;
color: var(--prev-color-text-white);
color: var(--prev-color-primary-light-9);
}
&-icon {
border-radius: 100%;
@ -405,7 +406,7 @@ export default {
}
}
.is-active {
color: var(--prev-color-text-white);
color: var(--prev-color-primary-light-9);
transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1);
border-color: transparent;
&::before {
@ -444,7 +445,7 @@ export default {
}
.is-active {
background: none !important;
color: #fff !important;
color: var(--prev-bg-menu-hover-ba-color) !important;
}
}
// 风格5
@ -481,7 +482,7 @@ export default {
.is-active {
@extend .tags-style-five-svg;
background: var(--prev-color-primary-light-9) !important;
color: var(--prev-color-primary) !important;
color: var(--prev-tag-active-color) !important;
z-index: 1;
}
}

218
template/admin/src/store/module/themeConfig.js
View File

@ -3,121 +3,121 @@
* 修改一下配置时，需要每次都清理 `window.localStorage` 浏览器永久缓存，配置才会生效
*/
const themeConfigModule = {
namespaced: true,
state: {
themeConfig: {
// 是否开启布局配置抽屉
isDrawer: false,
namespaced: true,
state: {
themeConfig: {
// 是否开启布局配置抽屉
isDrawer: false,
/**
* 全局主题
*/
// 默认 primary 主题颜色
primary: '#409eff',
// 菜单背景色
menuBgColor: '#282c34',
// 是否开启深色模式
isIsDark: false,
/**
* 全局主题
*/
// 默认 primary 主题颜色
primary: '#409eff',
// 菜单背景色
menuBgColor: '#282c34',
// 是否开启深色模式
isIsDark: false,
themeStyle: 'theme-1',
/**
* 菜单 / 顶栏
* 请注意：
* 需要同时修改 `/@/theme/common/var.scss` 对应的值，
*/
// 默认顶栏导航背景颜色
topBar: '#ffffff',
// 默认顶栏导航字体颜色
topBarColor: '#606266',
// 默认菜单导航背景颜色
menuBar: '#282c34',
// 默认菜单导航字体颜色
menuBarColor: '#eaeaea',
// 默认分栏菜单背景颜色
columnsMenuBar: '#282c34',
// 默认分栏菜单字体颜色
columnsMenuBarColor: '#e6e6e6',
/**
* 菜单 / 顶栏
* 请注意：
* 需要同时修改 `/@/theme/common/var.scss` 对应的值，
*/
// 默认顶栏导航背景颜色
topBar: '#ffffff',
// 默认顶栏导航字体颜色
topBarColor: '#606266',
// 默认菜单导航背景颜色
menuBar: '#282c34',
// 默认菜单导航字体颜色
menuBarColor: '#eaeaea',
// 默认分栏菜单背景颜色
columnsMenuBar: '#282c34',
// 默认分栏菜单字体颜色
columnsMenuBarColor: '#e6e6e6',
/**
* 界面设置
*/
// 是否开启菜单水平折叠效果
isCollapse: false,
// 是否开启菜单手风琴效果
isUniqueOpened: false,
// 是否开启固定 Header
isFixedHeader: false,
/**
* 界面设置
*/
// 是否开启菜单水平折叠效果
isCollapse: false,
// 是否开启菜单手风琴效果
isUniqueOpened: false,
// 是否开启固定 Header
isFixedHeader: false,
/**
* 界面显示
*/
// 是否开启侧边栏 Logo
isShowLogo: true,
// 是否开启 Breadcrumb
isBreadcrumb: true,
// 是否开启 Breadcrumb 图标
isBreadcrumbIcon: false,
// 是否开启 Tagsview
isTagsview: true,
// 是否开启 Tagsview 图标
isTagsviewIcon: false,
// 是否开启 TagsView 缓存
isCacheTagsView: false,
// 是否开启 Footer 底部版权信息
isFooter: false,
// 是否开启灰色模式
isGrayscale: false,
// 是否开启色弱模式
isInvert: false,
/**
* 界面显示
*/
// 是否开启侧边栏 Logo
isShowLogo: true,
// 是否开启 Breadcrumb
isBreadcrumb: true,
// 是否开启 Breadcrumb 图标
isBreadcrumbIcon: false,
// 是否开启 Tagsview
isTagsview: true,
// 是否开启 Tagsview 图标
isTagsviewIcon: false,
// 是否开启 TagsView 缓存
isCacheTagsView: false,
// 是否开启 Footer 底部版权信息
isFooter: false,
// 是否开启灰色模式
isGrayscale: false,
// 是否开启色弱模式
isInvert: false,
/**
* 其它设置
*/
// 默认 Tagsview 风格，可选 1、 tags-style-one，自行扩展：
// 1、需修改 @/layout/navBars/breadcrumb/setings.vue `getThemeConfig.tagsStyle` el-option
// 2、需修改 @/layout/navBars/tagsView/tagsView.vue 代码最底部注释部分 css 样式
tagsStyle: 'tags-style-one',
// 主页面切换动画：可选值"<slide-right|slide-left|opacitys>"，默认 slide-right
animation: 'slide-right',
// 分栏高亮风格：可选值"<columns-round|columns-card>"，默认 columns-round
columnsAsideStyle: 'columns-round',
// 分栏布局风格：可ƒ选值"<columns-horizontal|columns-vertical>"，默认 columns-horizontal
columnsAsideLayout: 'columns-vertical',
/**
* 其它设置
*/
// 默认 Tagsview 风格，可选 1、 tags-style-one，自行扩展：
// 1、需修改 @/layout/navBars/breadcrumb/setings.vue `getThemeConfig.tagsStyle` el-option
// 2、需修改 @/layout/navBars/tagsView/tagsView.vue 代码最底部注释部分 css 样式
tagsStyle: 'tags-style-one',
// 主页面切换动画：可选值"<slide-right|slide-left|opacitys>"，默认 slide-right
animation: 'slide-right',
// 分栏高亮风格：可选值"<columns-round|columns-card>"，默认 columns-round
columnsAsideStyle: 'columns-round',
// 分栏布局风格：可ƒ选值"<columns-horizontal|columns-vertical>"，默认 columns-horizontal
columnsAsideLayout: 'columns-vertical',
/**
* 布局切换
* 注意：为了演示，切换布局时，颜色会被还原成默认，代码位置：/@/layout/navBars/breadcrumb/setings.vue
* 中的 `initSetLayoutChange(设置布局切换，重置主题样式)` 方法
*/
// 布局切换：可选值"<defaults|classic|transverse|columns>"，默认 defaults
layout: 'defaults',
/**
* 布局切换
* 注意：为了演示，切换布局时，颜色会被还原成默认，代码位置：/@/layout/navBars/breadcrumb/setings.vue
* 中的 `initSetLayoutChange(设置布局切换，重置主题样式)` 方法
*/
// 布局切换：可选值"<defaults|classic|transverse|columns>"，默认 defaults
layout: 'defaults',
/**
* 全局网站标题 / 副标题
*/
// 网站主标题（菜单导航、浏览器当前网页标题）
globalTitle: 'crmeb-admin',
// 网站副标题（登录页顶部文字）
globalViceTitle: 'SMALL@小柒',
// 网站描述（登录页顶部文字）
globalViceDes: 'vue2',
// 默认初始语言，可选值"<zh-cn|en|zh-tw>"，默认 zh-cn
globalI18n: 'zh-cn',
// 默认全局组件大小，可选值"<|medium|small|mini>"，默认 ''
globalComponentSize: '',
},
},
mutations: {
// 设置布局配置
getThemeConfig(state, data) {
state.themeConfig = data;
},
},
actions: {
// 设置布局配置
setThemeConfig({ commit }, data) {
commit('getThemeConfig', data);
},
},
/**
* 全局网站标题 / 副标题
*/
// 网站主标题（菜单导航、浏览器当前网页标题）
globalTitle: 'crmeb-admin',
// 网站副标题（登录页顶部文字）
globalViceTitle: 'SMALL@小柒',
// 网站描述（登录页顶部文字）
globalViceDes: 'vue2',
// 默认初始语言，可选值"<zh-cn|en|zh-tw>"，默认 zh-cn
globalI18n: 'zh-cn',
// 默认全局组件大小，可选值"<|medium|small|mini>"，默认 ''
globalComponentSize: '',
},
},
mutations: {
// 设置布局配置
getThemeConfig(state, data) {
state.themeConfig = data;
},
},
actions: {
// 设置布局配置
setThemeConfig({ commit }, data) {
commit('getThemeConfig', data);
},
},
};
export default themeConfigModule;

4
template/admin/src/theme/app.scss
View File

@ -14,6 +14,7 @@
--prev-bg-topBarColor: #282c34;
--prev-bg-columnsMenuBar: #282c34;
--prev-bg-columnsMenuBarColor: #e6e6e6;
--prev-bg-columnsMenuActiveColor: #ffffff;
--prev-bg-menu-hover-ba-color: rgba(0, 0, 0, 0.2);
--prev-bg-menu-active-color: #409eff;
--prev-bg-main-color: #f8f8f8;
@ -35,6 +36,7 @@
--prev-border-color-light: #e4e7ed;
--prev-border-color-lighter: #ebeef5;
--prev-border-color-extra-light: #f2f6fc;
--prev-tag-active-color: #fff;
}
html,
@ -53,7 +55,7 @@ body,
height: 100%;
.layout-aside {
background: var(--prev-bg-menuBar);
box-shadow: 0px 0 1px rgba(0, 21, 41, 1%);
// box-shadow: 0px 0 1px rgba(0, 21, 41, 1%);
height: inherit;
position: relative;
z-index: 1;

5
template/admin/src/theme/variables.scss
View File

@ -304,8 +304,8 @@ $positions: 'top', 'right', 'bottom', 'left';
/* Switch 开关
------------------------------- */
.el-switch.is-checked .el-switch__core {
border-color: var(--prev-color-primary);
background-color: var(--prev-color-primary);
border-color: var(--prev-color-primary) !important;
background-color: var(--prev-color-primary) !important;
}
.el-switch__label.is-active {
color: var(--prev-color-primary);
@ -941,6 +941,7 @@ $positions: 'top', 'right', 'bottom', 'left';
}
.el-divider__text {
color: var(--prev-color-text-primary);
white-space: nowrap;
}
.el-drawer__close-btn:hover {
color: var(--prev-color-primary);