wenyongda/ZRAdmin-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化主题色配置

Browse Source
This commit is contained in:
不做码农 2022-04-29 19:58:58 +08:00
parent c2296f54de
commit b431f01c44
8 changed files with 111 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/styles/index.scss
View File

@ -202,9 +202,6 @@ div:focus {
.w100 { .w100 {
width: 100%; width: 100%;
} }
.el-dialog:not(.is-fullscreen) {
margin-top: 6vh !important;
}
.pull-right { .pull-right {
float: right !important; float: right !important;

45
src/assets/styles/sidebar.scss
View File

@ -1,16 +1,15 @@
#app { #app {
.main-container { .main-container {
min-height: 100%; min-height: 100%;
transition: margin-left .28s; transition: margin-left 0.28s;
margin-left: $base-sidebar-width; margin-left: var(--base-sidebar-width);
position: relative; position: relative;
} }
// 展开sidebar状态设置svg-icon边距 // 展开sidebar状态设置svg-icon边距
.openSidebar .layout-sidebar__container .svg-icon { .openSidebar .layout-sidebar__container .svg-icon {
margin-right: 5px; margin-right: 5px;
} }
.hideSidebar { .hideSidebar {
.layout-sidebar__container { .layout-sidebar__container {
width: 54px !important; width: 54px !important;
@ -32,20 +31,22 @@
.el-sub-menu { .el-sub-menu {
overflow: hidden; overflow: hidden;
&>.el-sub-menu__title { & > .el-sub-menu__title {
.el-sub-menu__icon-arrow { .el-sub-menu__icon-arrow {
display: none; display: none;
} }
} }
} }
// 折叠状态下
.el-menu--collapse { .el-menu--collapse {
[class^=el-icon] { [class^='el-icon'] {
width: auto; width: auto;
font-size: medium;
margin-right: 0;
} }
.el-sub-menu { .el-sub-menu {
&>.el-sub-menu__title { & > .el-sub-menu__title {
&>span { & > span {
height: 0; height: 0;
width: 0; width: 0;
overflow: hidden; overflow: hidden;
@ -58,7 +59,7 @@
} }
.el-menu--collapse .el-menu .el-sub-menu { .el-menu--collapse .el-menu .el-sub-menu {
min-width: $base-sidebar-width !important; min-width: var(--base-sidebar-width);
} }
// mobile responsive // mobile responsive
@ -68,21 +69,18 @@
} }
.layout-sidebar__container { .layout-sidebar__container {
transition: transform .28s; transition: transform 0.28s;
width: $base-sidebar-width !important; width: var(--base-sidebar-width) !important;
} }
&.hideSidebar { &.hideSidebar {
.layout-sidebar__container { .layout-sidebar__container {
pointer-events: none; display: none;
transition-duration: 0.3s;
transform: translate3d(-$base-sidebar-width, 0, 0);
} }
} }
} }
.withoutAnimation { .withoutAnimation {
.main-container, .main-container,
.layout-sidebar__container { .layout-sidebar__container {
transition: none; transition: none;
@ -92,17 +90,16 @@
// when menu collapsed // when menu collapsed
.el-menu--vertical { .el-menu--vertical {
.nest-menu .el-sub-menu > .el-sub-menu__title,
.nest-menu .el-sub-menu>.el-sub-menu__title,
.el-menu-item { .el-menu-item {
&:hover { &:hover {
// you can use $subMenuHover // 缩小状态下选中背景
background-color: $base-sub-menu-hover !important; // background-color: var(--base-sub-menu-hover) !important;
} }
} }
// the scroll bar appears when the subMenu is too long // the scroll bar appears when the subMenu is too long
>.el-menu--popup { > .el-menu--popup {
max-height: 100vh; max-height: 100vh;
overflow-y: auto; overflow-y: auto;

103
src/assets/styles/variables.module.scss
View File

@ -1,69 +1,62 @@
// base color // base color
$blue: #324157; $blue: #324157;
$light-blue: #3A71A8; $light-blue: #3a71a8;
$red: #C03639; $red: #c03639;
$pink: #E65D6E; $pink: #e65d6e;
$green: #30B08F; $green: #30b08f;
$tiffany: #4AB7BD; $tiffany: #4ab7bd;
$yellow: #FEC171; $yellow: #fec171;
$panGreen: #30B08F; $panGreen: #30b08f;
:root {
--base-menu-color: #bfcbd9;
--base-menu-color-active: #f4f4f5;
--base-menu-background: #304156;
--base-logo-title-color: #ffffff;
--base-topBar-background: #ffffff;
}
// 默认菜单主题风格 // 默认菜单主题风格
$base-menu-color: #bfcbd9; :root {
$base-menu-color-active: #f4f4f5; --base-menu-color: #bfcbd9;
$base-menu-background: #304156; --base-menu-color-active: #f4f4f5;
$base-logo-title-color: #ffffff; --base-menu-background: #ffffff;
$base-topBar-background: #ffffff; --base-logo-title-color: #ffffff;
--base-topBar-background: #ffffff;
--base-sidebar-width: 210px;
}
/***默认主题颜色配置***/
[data-theme='theme-light'] {
--base-menu-color: #bfcbd9;
--base-menu-color-active: #f4f4f5;
// 菜单背景
--base-menu-background: #ffffff;
// logo部分文字颜色
--base-logo-title-color: #001529;
// 顶部导航栏背景色
--base-topBar-background: #ffffff;
//缩小状态下子菜单选中颜色
--base-sub-menu-hover: #ccc;
// el-ement ui 设置
}
/***深色主题颜色配置***/
[data-theme='theme-dark'] {
--base-menu-color: #bfcbd9;
--base-menu-color-active: #f4f4f5;
--base-menu-background: #304156;
--base-logo-title-color: #ffffff;
--base-topBar-background: #ffffff;
//缩小状态下子菜单选中颜色
--base-sub-menu-hover: #000;
// el-ement ui 设置
--el-fill-color-blank: #304156;
--el-text-color-primary: #ffffff;
}
$menuHover:#263445;
// sidebar // sidebar
$menuText:#bfcbd9;
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5;
//https://github.com/ElemeFE/element/issues/12951 //https://github.com/ElemeFE/element/issues/12951
$base-menu-light-color: rgba(0, 0, 0, 0.7);
$base-menu-light-background: #ffffff;
$base-logo-light-title-color: #001529;
$base-sub-menu-background: #1f2d3d;
$base-sub-menu-hover: #001528;
$--color-primary: #409EFF;
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;
$--color-info: #909399;
$base-sidebar-width: 210px;
// the :export directive is the magic sauce for webpack // the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
/* js中import， import variables from '@/assets/styles/variables.module.scss' /* js中import， import variables from '@/assets/styles/variables.module.scss'
template中使用 eg：variables.menuColor template中使用 eg：variables.menuColor
*/ */
:export { // :export {
menuColor: $base-menu-color; // }
menuLightColor: $base-menu-light-color;
menuColorActive: $base-menu-color-active;
menuBackground: $base-menu-background;
menuLightBackground: $base-menu-light-background;
subMenuBackground: $base-sub-menu-background;
subMenuHover: $base-sub-menu-hover;
sideBarWidth: $base-sidebar-width;
logoTitleColor: $base-logo-title-color;
logoLightTitleColor: $base-logo-light-title-color;
// primaryColor: $--color-primary;
// successColor: $--color-success;
// dangerColor: $--color-danger;
// infoColor: $--color-info;
// warningColor: $--color-warning;
}

39
src/components/TopNav/index.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<el-menu :default-active="activeMenu" mode="horizontal" @select="handleSelect" :ellipsis="false"> <el-menu :default-active="activeMenu" :active-text-color="theme" mode="horizontal" background-color="transparent" @select="handleSelect" :ellipsis="false">
<template v-for="(item, index) in topMenus"> <template v-for="(item, index) in topMenus">
<el-menu-item :style="{ '--theme': theme }" :index="item.path" :key="index" v-if="index < visibleNumber"> <el-menu-item :style="{ '--theme': theme }" :index="item.path" :key="index" v-if="index < visibleNumber">
<svg-icon :name="item.meta.icon" /> <svg-icon :name="item.meta.icon" />
&nbsp;{{ item.meta.title }} {{ item.meta.title }}
</el-menu-item> </el-menu-item>
</template> </template>
@ -159,16 +159,16 @@ onMounted(() => {
</script> </script>
<style lang="scss"> <style lang="scss">
// .topmenu-container.el-menu--horizontal > .el-menu-item { // 修改默认样式
// float: left; .topmenu-container.el-menu--horizontal > .el-menu-item {
// height: 50px !important; height: 50px !important;
// line-height: 50px !important; line-height: 50px !important;
// color: #999093 !important; color: #999093 !important;
// padding: 0 5px !important; padding: 0 5px !important;
// margin: 0 10px !important; margin: 0 10px !important;
// } }
.el-menu--horizontal { .el-menu--horizontal > .el-menu-item .svg-icon {
border-bottom: 0px !important; margin-right: 5px;
} }
// .topmenu-container.el-menu--horizontal > .el-menu-item.is-active, // .topmenu-container.el-menu--horizontal > .el-menu-item.is-active,
// .el-menu--horizontal > .el-sub-menu.is-active .el-submenu__title { // .el-menu--horizontal > .el-sub-menu.is-active .el-submenu__title {
@ -177,12 +177,11 @@ onMounted(() => {
// } // }
/* sub-menu item */ /* sub-menu item */
// .topmenu-container.el-menu--horizontal > .el-sub-menu .el-submenu__title { .topmenu-container.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
// float: left; height: 50px !important;
// height: 50px !important; line-height: 50px !important;
// line-height: 50px !important; color: #999093 !important;
// color: #999093 !important; padding: 0 5px !important;
// padding: 0 5px !important; margin: 0 10px !important;
// margin: 0 10px !important; }
// }
</style> </style>

4
src/layout/components/Navbar.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="navbar"> <div class="navbar" :data-theme="sideTheme">
<hamburger id="hamburger-container" :is-active="getters.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> <hamburger id="hamburger-container" :is-active="getters.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!$store.state.settings.topNav" /> <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!$store.state.settings.topNav" />
<top-nav id="topmenu-container" class="topmenu-container" v-if="$store.state.settings.topNav" /> <top-nav id="topmenu-container" class="topmenu-container" v-if="$store.state.settings.topNav" />
@ -52,7 +52,7 @@ import Notice from '@/components/Notice/Index'
const store = useStore() const store = useStore()
const getters = computed(() => store.getters) const getters = computed(() => store.getters)
const sideTheme = computed(() => store.state.settings.sideTheme)
function toggleSideBar() { function toggleSideBar() {
store.dispatch('app/toggleSideBar') store.dispatch('app/toggleSideBar')
} }

20
src/layout/components/Sidebar/Logo.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<div class="sidebar-logo-container" :class="{ 'collapse': collapse }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> <div class="sidebar-logo-container" :class="{ collapse: collapse }">
<transition name="sidebarLogoFade"> <transition name="sidebarLogoFade">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" /> <img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1> <h1 v-else class="sidebar-title">{{ title }}</h1>
</router-link> </router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/"> <router-link v-else key="expand" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" /> <img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1> <h1 class="sidebar-title">{{ title }}</h1>
</router-link> </router-link>
</transition> </transition>
</div> </div>
@ -20,13 +20,13 @@ import logo from '@/assets/logo/logo.png'
defineProps({ defineProps({
collapse: { collapse: {
type: Boolean, type: Boolean,
required: true required: true,
} },
}) })
const title = ref(import.meta.env.VITE_APP_TITLE); const title = ref(import.meta.env.VITE_APP_TITLE)
const store = useStore(); const store = useStore()
const sideTheme = computed(() => store.state.settings.sideTheme); const sideTheme = computed(() => store.state.settings.sideTheme)
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -44,7 +44,7 @@ const sideTheme = computed(() => store.state.settings.sideTheme);
width: 100%; width: 100%;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
background: #2b2f3a; background: var(--base-menu-background);
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
@ -62,7 +62,7 @@ const sideTheme = computed(() => store.state.settings.sideTheme);
& .sidebar-title { & .sidebar-title {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
color: #fff; color: var(--base-logo-title-color);
font-weight: 600; font-weight: 600;
line-height: 50px; line-height: 50px;
font-size: 14px; font-size: 14px;

19
src/layout/components/Sidebar/index.vue
View File

@ -1,21 +1,15 @@
<template> <template>
<div <div :data-theme="sideTheme" class="layout-sidebar__container" :class="{ 'has-logo': showLogo }">
:data-theme="sideTheme"
class="layout-sidebar__container"
:class="{ 'has-logo': showLogo }"
:style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"
>
<logo v-if="showLogo" :collapse="isCollapse" /> <logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper"> <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
<el-menu <el-menu
:default-active="activeMenu" :default-active="activeMenu"
:collapse="isCollapse" :collapse="isCollapse"
:background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
:text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
:unique-opened="true" :unique-opened="true"
:active-text-color="theme" :active-text-color="theme"
:collapse-transition="false" :collapse-transition="false"
background-color="transparent"
mode="vertical" mode="vertical"
> >
<sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" /> <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" />
@ -53,8 +47,8 @@ const activeMenu = computed(() => {
.layout-sidebar__container { .layout-sidebar__container {
transition: width 0.28s; transition: width 0.28s;
width: $base-sidebar-width !important; width: var(--base-sidebar-width);
background-color: $base-menu-background; background-color: var(--base-menu-background);
height: 100%; height: 100%;
position: fixed; position: fixed;
font-size: 0px; font-size: 0px;
@ -63,7 +57,8 @@ const activeMenu = computed(() => {
left: 0; left: 0;
z-index: 1001; z-index: 1001;
overflow: hidden; overflow: hidden;
-webkit-box-shadow: 2px 0 14px rgb(0 21 41 / 10%);
box-shadow: 2px 0 14px rgb(0 21 41 / 10%);
.scrollbar-wrapper { .scrollbar-wrapper {
overflow-x: hidden; overflow-x: hidden;
} }
@ -102,7 +97,7 @@ const activeMenu = computed(() => {
& .nest-menu .el-sub-menu > .el-sub-menu__title, & .nest-menu .el-sub-menu > .el-sub-menu__title,
& .el-sub-menu .el-menu-item { & .el-sub-menu .el-menu-item {
min-width: $base-sidebar-width !important; min-width: var(--base-sidebar-width) !important;
// background-color: $base-menu-background !important; // background-color: $base-menu-background !important;
&:hover { &:hover {

2
src/layout/index.vue
View File

@ -88,7 +88,7 @@ function setLayout() {
top: 0; top: 0;
right: 0; right: 0;
z-index: 9; z-index: 9;
width: calc(100% - #{$base-sidebar-width}); width: calc(100% - var(--base-sidebar-width));
transition: width 0.28s; transition: width 0.28s;
} }
.hideSidebar .fixed-header { .hideSidebar .fixed-header {