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

3
src/components/card/ChartCard.vue
View File

@@ -27,7 +27,7 @@ export default {
}
</script>
<style scoped>
<style scoped lang="less">
.chart-card-header{
position: relative;
overflow: hidden;
@@ -52,7 +52,6 @@ export default {
text-overflow: ellipsis;
word-break: break-all;
white-space: nowrap;
color: #000;
margin-top: 4px;
margin-bottom: 0;
font-size: 30px;

8
src/components/chart/RankingList.vue
View File

@@ -30,12 +30,12 @@ export default {
li {
margin-top: 16px;
span {
color: rgba(0,0,0,.65);
color: @text-color-second;
font-size: 14px;
line-height: 22px;
}
span:first-child {
background-color: #f5f5f5;
background-color: @bg-color;
border-radius: 20px;
display: inline-block;
font-size: 12px;
@@ -47,8 +47,8 @@ export default {
text-align: center;
}
span.active {
background-color: #314659;
color: #fff;
background-color: #314659 !important;
color: #fff !important;
}
span:last-child {
float: right;

2
src/components/exception/ExceptionPage.vue
View File

@@ -34,7 +34,7 @@ export default {
display: flex;
justify-content: center;
align-items: center;
background-color: white;
background-color: @base-bg-color;
.img{
padding-right: 52px;
zoom: 1;

43
src/components/menu/SideMenu.vue
View File

@@ -1,5 +1,5 @@
<template>
<a-layout-sider :theme="theme" :class="['side-menu', isMobile ? null : 'shadow']" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
<a-layout-sider :theme="sideTheme" :class="['side-menu', isMobile ? null : 'shadow']" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
<div :class="['logo', theme]">
<router-link to="/dashboard/workplace">
<img src="@/assets/img/logo.png">
@@ -39,6 +39,9 @@ export default {
}
},
computed: {
sideTheme() {
return this.theme == 'light' ? this.theme : 'dark'
},
...mapState('setting', ['isMobile', 'systemName'])
},
methods: {
@@ -51,41 +54,5 @@ export default {
</script>
<style lang="less" scoped>
.shadow{
box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
}
.side-menu{
min-height: 100%;
z-index: 10;
.logo{
height: 64px;
position: relative;
line-height: 64px;
padding-left: 24px;
-webkit-transition: all .3s;
transition: all .3s;
overflow: hidden;
background-color: @layout-trigger-background;
&.light{
background-color: #fff;
h1{
color: @primary-color;
}
}
h1{
color: #fff;
font-size: 20px;
margin: 0 0 0 12px;
display: inline-block;
vertical-align: middle;
}
img{
width: 32px;
vertical-align: middle;
}
}
}
.menu{
padding: 16px 0;
}
@import "index";
</style>

37
src/components/menu/index.less Normal file
View File

@@ -0,0 +1,37 @@
.shadow{
box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
}
.side-menu{
min-height: 100%;
z-index: 10;
.logo{
height: 64px;
position: relative;
line-height: 64px;
padding-left: 24px;
-webkit-transition: all .3s;
transition: all .3s;
overflow: hidden;
background-color: @layout-trigger-background;
&.light{
background-color: #fff;
h1{
color: @primary-color;
}
}
h1{
color: @menu-dark-highlight-color;
font-size: 20px;
margin: 0 0 0 12px;
display: inline-block;
vertical-align: middle;
}
img{
width: 32px;
vertical-align: middle;
}
}
}
.menu{
padding: 16px 0;
}

5
src/components/menu/menu.js
View File

@@ -73,6 +73,9 @@ export default {
keys.push(item.path)
})
return keys
},
menuTheme() {
return this.theme == 'light' ? this.theme : 'dark'
}
},
beforeMount() {
@@ -212,7 +215,7 @@ export default {
Menu,
{
props: {
theme: this.$props.theme,
theme: this.menuTheme,
mode: this.$props.mode,
openKeys: this.openKeys,
selectedKeys: this.selectedKeys

43
src/components/page/PageHeader.vue → src/components/page/header/PageHeader.vue
View File

@@ -57,46 +57,5 @@ export default {
</script>
<style lang="less" scoped>
.page-header{
background: #fff;
padding: 16px 24px;
border-bottom: 1px solid #e8e8e8;
.page-header-wide{
&.head{
margin: auto;
max-width: 1400px;
}
&.side{
}
.breadcrumb{
margin-bottom: 20px;
}
.detail{
display: flex;
.row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.avatar {
margin:0 24px 0 0;
}
.main{
width: 100%;
.title{
font-size: 20px;
color: rgba(0,0,0,.85);
margin-bottom: 16px;
}
.content{
display: flex;
flex-wrap: wrap;
}
.extra{
display: flex;
}
}
}
}
}
@import "index";
</style>

42
src/components/page/header/index.less Normal file
View File

@@ -0,0 +1,42 @@
.page-header{
background: @base-bg-color;
padding: 16px 24px;
.page-header-wide{
&.head{
margin: auto;
max-width: 1400px;
}
&.side{
}
.breadcrumb{
margin-bottom: 20px;
}
.detail{
display: flex;
.row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.avatar {
margin:0 24px 0 0;
}
.main{
width: 100%;
.title{
font-size: 20px;
color: @title-color;
margin-bottom: 16px;
}
.content{
display: flex;
flex-wrap: wrap;
color: @text-color-second;
}
.extra{
display: flex;
}
}
}
}
}

8
src/components/result/Result.vue
View File

@@ -35,11 +35,11 @@ export default {
color: @success-color;
}
.error {
color: red;
color: @error-color;
}
.title{
font-size: 24px;
color: rgba(0,0,0,.85);
color: @title-color;
font-weight: 500;
line-height: 32px;
margin-bottom: 16px;
@@ -47,11 +47,11 @@ export default {
.desc{
font-size: 14px;
line-height: 22px;
color: rgba(0, 0, 0, 0.45);
color: @text-color-second;
margin-bottom: 24px;
}
.content{
background: #fafafa;
background-color: @background-color-light;
padding: 24px 40px;
border-radius: 2px;
text-align: left;

3
src/components/setting/Setting.vue
View File

@@ -4,6 +4,7 @@
<img-checkbox-group @change="values => setTheme(values[0])" :default-values="[theme]">
<img-checkbox :title="$t('theme.dark')" img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" value="dark"/>
<img-checkbox :title="$t('theme.light')" img="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" value="light"/>
<img-checkbox :title="$t('theme.night')" img="https://gw.alipayobjects.com/zos/antfincdn/hmKaLQvmY2/LCkqqYNmvBEbokSDscrm.svg" value="night"/>
</img-checkbox-group>
</setting-item>
<setting-item :title="$t('theme.color')">
@@ -136,7 +137,7 @@ export default {
<style lang="less" scoped>
.side-setting{
min-height: 100%;
background-color: #fff;
background-color: @base-bg-color;
padding: 24px;
font-size: 14px;
line-height: 1.5;

3
src/components/setting/i18n.js
View File

@@ -5,6 +5,7 @@ module.exports = {
title: '整体风格设置',
light: '亮色菜单风格',
dark: '暗色菜单风格',
night: '深夜模式',
color: '主题色'
},
navigate: {
@@ -36,6 +37,7 @@ module.exports = {
title: '整體風格設置',
light: '亮色菜單風格',
dark: '暗色菜單風格',
night: '深夜模式',
color: '主題色'
},
navigate: {
@@ -67,6 +69,7 @@ module.exports = {
title: 'Page Style Setting',
light: 'Light Style',
dark: 'Dark Style',
night: 'Night Style',
color: 'Theme Color'
},
navigate: {

4
src/components/task/TaskGroup.vue
View File

@@ -49,9 +49,9 @@ export default {
.task-group{
width: 33.33%;
padding: 8px 8px;
background-color: #e1e4e8;
background-color: @background-color-light;
border-radius: 6px;
border: 1px solid #d1d4d8;
border: 1px solid @shadow-color;
.task-head{
margin-bottom: 8px;
.title{

1
src/components/task/TaskItem.vue
View File

@@ -16,7 +16,6 @@ export default {
margin-bottom: 16px;
box-shadow: 0 1px 1px rgba(27,31,35,0.1);
border-radius: 6px;
color: #24292e;
& :hover{
cursor: move;
box-shadow: 0 1px 1px rgba(27,31,35,0.15);

8
src/components/tool/DetailList.vue
View File

@@ -102,7 +102,7 @@ export default {
.detail-list{
.title {
font-size: 16px;
color: rgba(0,0,0,.85);
color: @title-color;
font-weight: bolder;
margin-bottom: 16px;
}
@@ -111,7 +111,7 @@ export default {
line-height: 20px;
padding-bottom: 16px;
margin-right: 8px;
color: rgba(0,0,0,.85);
color: @title-color;
white-space: nowrap;
display: table-cell;
&:after {
@@ -125,13 +125,13 @@ export default {
line-height: 22px;
width: 100%;
padding-bottom: 16px;
color: rgba(0,0,0,.65);
color: @text-color;
display: table-cell;
}
&.small{
.title{
font-size: 14px;
color: rgba(0,0,0,.65);
color: @text-color;
font-weight: normal;
margin-bottom: 12px;
}

6
src/components/tool/Drawer.vue
View File

@@ -76,7 +76,7 @@ export default {
right: 0;
bottom: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.2);
background-color: @shadow-color;
transition: all 0.5s;
z-index: 100;
&.open{
@@ -133,9 +133,9 @@ export default {
.handler {
height: 40px;
width: 40px;
background-color: #fff;
background-color: @base-bg-color;
font-size: 26px;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
box-shadow: 0 2px 8px @shadow-color;
line-height: 40px;
}
&.left{

4
src/components/tool/FooterToolBar.vue
View File

@@ -22,8 +22,8 @@ export default {
bottom: 0;
right: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
background: #fff;
border-top: 1px solid #e8e8e8;
background: @base-bg-color;
border-top: 1px solid @border-color-split;
padding: 12px 24px;
z-index: 9;
}

4
src/components/tool/HeadInfo.vue
View File

@@ -20,13 +20,13 @@ export default {
flex-shrink: 0;
align-self: center;
span{
color: rgba(0,0,0,.45);
color: @text-color-second;
display: inline-block;
font-size: 14px;
margin-bottom: 4px;
}
p{
color: rgba(0,0,0,.85);
color: @text-color;
font-size: 24px;
margin: 0;
}