caoliancun/vue-antd-admin-skeleton
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add global night mode; 🌟

Browse Source 
新增：全局夜晚模式；
This commit is contained in:
iczer
2020-07-06 21:52:36 +08:00
parent 98e02874ed
commit 4063a4f08a
39 changed files with 480 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/layouts/header/AdminHeader.vue
View File

@@ -8,7 +8,7 @@
<a-divider v-if="isMobile" type="vertical" />
<a-icon v-if="layout === 'side'" class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/>
<div v-if="layout == 'head' && !isMobile" class="admin-header-menu">
<i-menu style="height: 64px; line-height: 64px;" @i18nComplete="setRoutesI18n" :i18n="menuI18n" :theme="headerTheme" mode="horizontal" :options="menuData" @select="onSelect"/>
<i-menu class="head-menu" style="height: 64px; line-height: 64px;box-shadow: none" @i18nComplete="setRoutesI18n" :i18n="menuI18n" :theme="headerTheme" mode="horizontal" :options="menuData" @select="onSelect"/>
</div>
<div :class="['admin-header-right', headerTheme]">
<header-search class="header-item" />
@@ -56,7 +56,11 @@ export default {
computed: {
...mapState('setting', ['theme', 'isMobile', 'layout', 'systemName', 'lang']),
headerTheme () {
return (this.layout == 'side' && !this.isMobile) ? 'light' : this.theme
if (this.layout == 'side' && this.theme == 'dark' && !this.isMobile) {
return 'light'
}
return this.theme
// return (this.layout == 'side' && !this.isMobile && this.theme != 'night') ? 'light' : this.theme
},
langAlias() {
let lang = this.langList.find(item => item.key == this.lang)
@@ -76,89 +80,5 @@ export default {
</script>
<style lang="less" scoped>
.trigger {
font-size: 20px;
line-height: 64px;
padding: 0 24px;
cursor: pointer;
transition: color .3s;
&:hover{
color: @primary-color;
}
}
.admin-header{
padding: 0;
-webkit-box-shadow: 0 1px 4px rgba(0,21,41,.08);
box-shadow: 0 1px 4px rgba(0,21,41,.08);
z-index: 1;
position: relative;
&.light{
background: #fff;
}
&.dark{
.trigger{
color: white;
}
}
.admin-header-wide{
&.head{
max-width: 1400px;
margin: auto;
}
&.side{
padding-right: 12px;
}
.logo {
height: 64px;
line-height: 58px;
vertical-align: top;
display: inline-block;
padding: 0 12px 0 24px;
cursor: pointer;
font-size: 20px;
&.pc{
padding: 0 12px 0 0;
}
img {
display: inline-block;
vertical-align: middle;
}
h1{
display: inline-block;
font-size: 16px;
}
&.dark h1{
color: #fff;
}
}
.admin-header-menu{
display: inline-block;
}
.admin-header-right{
float: right;
display: flex;
&.dark{
color: #fff;
a, i{
color: #fff !important;
}
.header-item:hover{
background-color: @primary-color;
}
}
.header-item{
padding: 0 12px;
cursor: pointer;
align-self: center;
&:hover{
background-color: @gray-3;
}
i{
font-size: 16px;
color: rgba(0,0,0,.65);
}
}
}
}
}
@import "index";
</style>

18
src/layouts/header/HeaderNotice.vue
View File

@@ -2,7 +2,7 @@
<a-dropdown :trigger="['click']" v-model="show">
<div slot="overlay">
<a-spin :spinning="loading">
<a-tabs class="dropdown-tabs" :tabBarStyle="{textAlign: 'center'}" :style="{backgroundColor: 'white', width: '297px'}">
<a-tabs class="dropdown-tabs" :tabBarStyle="{textAlign: 'center'}" :style="{width: '297px'}">
<a-tab-pane tab="通知" key="1">
<a-list class="tab-pane">
<a-list-item>
@@ -32,7 +32,7 @@
</a-spin>
</div>
<span @click="fetchNotice" class="header-notice">
<a-badge count="12">
<a-badge class="notice-badge" count="12">
<a-icon :class="['header-notice-icon']" type="bell" />
</a-badge>
</span>
@@ -65,20 +65,24 @@ export default {
}
</script>
<style lang="less" scoped>
<style lang="less">
.header-notice{
display: inline-block;
transition: all 0.3s;
span {
vertical-align: initial;
}
.header-notice-icon{
font-size: 16px;
padding: 4px;
.notice-badge{
color: inherit;
.header-notice-icon{
font-size: 16px;
padding: 4px;
}
}
}
.dropdown-tabs{
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
background-color: @base-bg-color;
box-shadow: 0 2px 8px @shadow-color;
border-radius: 4px;
.tab-pane{
padding: 0 24px 12px;

84
src/layouts/header/index.less Normal file
View File

@@ -0,0 +1,84 @@
.admin-header{
padding: 0;
z-index: 2;
box-shadow: @shadow-down;
position: relative;
background: @base-bg-color;
&.dark{
background: @header-bg-color-dark;
color: white;
}
&.night{
.head-menu{
background: @base-bg-color;
}
}
.admin-header-wide{
&.head{
max-width: 1400px;
margin: auto;
}
&.side{
padding-right: 12px;
}
.logo {
height: 64px;
line-height: 58px;
vertical-align: top;
display: inline-block;
padding: 0 12px 0 24px;
cursor: pointer;
font-size: 20px;
color: inherit;
&.pc{
padding: 0 12px 0 0;
}
img {
vertical-align: middle;
}
h1{
color: inherit;
display: inline-block;
font-size: 16px;
}
}
.trigger {
font-size: 20px;
line-height: 64px;
padding: 0 24px;
cursor: pointer;
transition: color .3s;
&:hover{
color: @primary-color;
}
}
.admin-header-menu{
display: inline-block;
}
.admin-header-right{
float: right;
display: flex;
color: inherit;
.header-item{
color: inherit;
padding: 0 12px;
cursor: pointer;
align-self: center;
a{
color: inherit;
i{
font-size: 16px;
}
}
}
each(@theme-list, {
&.@{value} .header-item{
&:hover{
@class: ~'hover-bg-color-@{value}';
background-color: @@class;
}
}
})
}
}
}