Skip to content

Commit 4dcb488

Browse files
sendyasendya
committed
added ant color
1 parent e7debc3 commit 4dcb488

File tree

9 files changed

+8603
-6
lines changed

9 files changed

+8603
-6
lines changed

‎public/color.less

Lines changed: 8294 additions & 0 deletions
Large diffs are not rendered by default.

‎src/components/layout/HeaderNotice.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<a-popover trigger="click" placement="bottomRight">
2+
<a-popover trigger="click" placement="bottomRight" :overlayStyle="{ width: '300px' }">
33
<template slot="content">
44
<a-spin :spinning="loadding">
55
<a-tabs>

‎src/components/layout/LayoutMain.vue

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,21 +38,26 @@
3838
<layout-footer/>
3939
</a-layout-footer>
4040
</a-layout>
41+
42+
<setting-drawer ref="settingdw"></setting-drawer>
4143
</a-layout>
4244
</template>
4345

4446
<script>
4547
import SiderMenu from '@/components/menu/SiderMenu'
4648
import LayoutHeader from './LayoutHeader'
4749
import LayoutFooter from './LayoutFooter'
50+
import SettingDrawer from '@/components/tools/SettingDrawer'
4851
import { mapState, mapActions } from 'vuex'
4952
53+
5054
export default {
5155
name: "LayoutView",
5256
components: {
5357
SiderMenu,
5458
LayoutHeader,
55-
LayoutFooter
59+
LayoutFooter,
60+
SettingDrawer
5661
},
5762
data() {
5863
return {
@@ -77,6 +82,9 @@
7782
},
7883
mounted() {
7984
this.collapsed = this.sidebarOpened
85+
86+
// this.$refs.settingdw.showDrawer()
87+
// this.$refs.settingdw.onClose()
8088
},
8189
methods: {
8290
...mapActions(['setSidebar']),

‎src/components/tools/SettingDrawer.vue

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
<template>
2+
<div>
3+
<a-drawer
4+
width="300"
5+
:destroyOnClose="false"
6+
placement="right"
7+
:closable="false"
8+
@close="onClose"
9+
:visible="visible"
10+
>
11+
<div class="setting-drawer-index-content">
12+
13+
<div :style="{ marginBottom: '24px' }">
14+
<h3 class="setting-drawer-index-title">整体风格设置</h3>
15+
16+
<div class="setting-drawer-index-blockChecbox">
17+
<div class="setting-drawer-index-item" @click="changeMenuTheme('dark')">
18+
<img src="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" alt="dark">
19+
<div class="setting-drawer-index-selectIcon" v-if="theme === 'dark'">
20+
<a-icon type="check"/>
21+
</div>
22+
</div>
23+
<div class="setting-drawer-index-item" @click="changeMenuTheme('light')">
24+
<img src="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" alt="light">
25+
<div class="setting-drawer-index-selectIcon" v-if="theme !== 'dark'">
26+
<a-icon type="check"/>
27+
</div>
28+
</div>
29+
</div>
30+
</div>
31+
32+
<div :style="{ marginBottom: '24px' }">
33+
<h3 class="setting-drawer-index-title">主题色</h3>
34+
35+
<div>
36+
<a-tooltip class="setting-drawer-theme-color-colorBlock" v-for="(item, index) in colorList" :key="index">
37+
<template slot='title'>
38+
{{ item.key }}
39+
</template>
40+
<a-tag :color="item.color" @click="changeColor(item)">
41+
<a-icon type="check" v-if="item.color === colorObj.color"></a-icon>
42+
</a-tag>
43+
</a-tooltip>
44+
45+
</div>
46+
</div>
47+
</div>
48+
</a-drawer>
49+
<div class="setting-drawer-index-handle" :style="{ right: visible && '283px' || '0' }" @click="toggle">
50+
<a-icon type="setting" v-if="!visible"/>
51+
<a-icon type="close" v-else/>
52+
</div>
53+
</div>
54+
</template>
55+
56+
<script>
57+
import DetailList from '@/components/tools/DetailList'
58+
import { updateTheme } from '@/components/tools/setting'
59+
60+
import { mapState } from 'vuex'
61+
62+
const colorList = [
63+
{
64+
key: 'dust',
65+
color: '#F5222D',
66+
},
67+
{
68+
key: 'volcano',
69+
color: '#FA541C',
70+
},
71+
{
72+
key: 'sunset',
73+
color: '#FAAD14',
74+
},
75+
{
76+
key: 'cyan',
77+
color: '#13C2C2',
78+
},
79+
{
80+
key: 'green',
81+
color: '#52C41A',
82+
},
83+
{
84+
key: 'daybreak',
85+
color: '#1890FF',
86+
},
87+
{
88+
key: 'geekblue',
89+
color: '#2F54EB',
90+
},
91+
{
92+
key: 'purple',
93+
color: '#722ED1',
94+
},
95+
];
96+
97+
export default {
98+
components: {
99+
DetailList
100+
},
101+
data() {
102+
return {
103+
visible: false,
104+
colorList,
105+
}
106+
},
107+
computed: {
108+
...mapState({
109+
theme: state => state.app.theme,
110+
colorObj: state => state.app.color,
111+
})
112+
},
113+
mounted () {
114+
const vm = this
115+
116+
updateTheme(this.colorObj.color)
117+
},
118+
methods: {
119+
showDrawer() {
120+
this.visible = true
121+
},
122+
onClose() {
123+
this.visible = false
124+
},
125+
toggle() {
126+
this.visible = !this.visible
127+
},
128+
changeMenuTheme(theme) {
129+
this.$store.dispatch('ToggleTheme', theme)
130+
},
131+
changeColor(color) {
132+
updateTheme(color.color)
133+
this.$store.dispatch('ToggleColor', color)
134+
}
135+
},
136+
}
137+
</script>
138+
139+
<style lang="scss" scoped>
140+
141+
.setting-drawer-index-content {
142+
143+
.setting-drawer-index-title {
144+
font-size: 14px;
145+
color: rgba(0, 0, 0, .85);
146+
line-height: 22px;
147+
margin-bottom: 12px;
148+
}
149+
.setting-drawer-index-blockChecbox {
150+
display: flex;
151+
152+
.setting-drawer-index-item {
153+
margin-right: 16px;
154+
position: relative;
155+
border-radius: 4px;
156+
cursor: pointer;
157+
158+
img {
159+
width: 48px;
160+
}
161+
162+
.setting-drawer-index-selectIcon {
163+
position: absolute;
164+
top: 0;
165+
right: 0;
166+
width: 100%;
167+
padding-top: 15px;
168+
padding-left: 24px;
169+
height: 100%;
170+
color: #1890ff;
171+
font-size: 14px;
172+
font-weight: 700;
173+
}
174+
}
175+
}
176+
.setting-drawer-theme-color-colorBlock {
177+
width: 20px;
178+
height: 20px;
179+
border-radius: 2px;
180+
float: left;
181+
cursor: pointer;
182+
margin-right: 8px;
183+
padding-left: 0px;
184+
padding-right: 0px;
185+
text-align: center;
186+
color: #fff;
187+
font-weight: 700;
188+
189+
i {
190+
font-size: 14px;
191+
}
192+
}
193+
}
194+
195+
.setting-drawer-index-handle {
196+
position: absolute;
197+
top: 240px;
198+
background: #1890ff;
199+
width: 48px;
200+
height: 48px;
201+
right: 0;
202+
display: flex;
203+
justify-content: center;
204+
align-items: center;
205+
cursor: pointer;
206+
pointer-events: auto;
207+
z-index: 1001;
208+
text-align: center;
209+
font-size: 16px;
210+
border-radius: 4px 0 0 4px;
211+
212+
i {
213+
color: rgb(255, 255, 255);
214+
font-size: 20px;
215+
}
216+
}
217+
</style>

‎src/components/tools/setting.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { message } from 'ant-design-vue/es';
2+
// import defaultSettings from '../defaultSettings';
3+
4+
let lessNodesAppended;
5+
6+
const updateTheme = primaryColor => {
7+
// Don't compile less in production!
8+
if (process.env.NODE_ENV === 'production') {
9+
return;
10+
}
11+
// Determine if the component is remounted
12+
if (!primaryColor) {
13+
return;
14+
}
15+
const hideMessage = message.loading('正在编译主题！', 0);
16+
function buildIt() {
17+
if (!window.less) {
18+
return;
19+
}
20+
setTimeout(() => {
21+
window.less
22+
.modifyVars({
23+
'@primary-color': primaryColor,
24+
})
25+
.then(() => {
26+
hideMessage();
27+
})
28+
.catch(() => {
29+
message.error('Failed to update theme');
30+
hideMessage();
31+
});
32+
}, 200);
33+
}
34+
if (!lessNodesAppended) {
35+
// insert less.js and color.less
36+
const lessStyleNode = document.createElement('link');
37+
const lessConfigNode = document.createElement('script');
38+
const lessScriptNode = document.createElement('script');
39+
lessStyleNode.setAttribute('rel', 'stylesheet/less');
40+
lessStyleNode.setAttribute('href', '/color.less');
41+
lessConfigNode.innerHTML = `
42+
window.less = {
43+
async: true,
44+
env: 'production',
45+
javascriptEnabled: true
46+
};
47+
`;
48+
lessScriptNode.src = 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js';
49+
lessScriptNode.async = true;
50+
lessScriptNode.onload = () => {
51+
buildIt();
52+
lessScriptNode.onload = null;
53+
};
54+
document.body.appendChild(lessStyleNode);
55+
document.body.appendChild(lessConfigNode);
56+
document.body.appendChild(lessScriptNode);
57+
lessNodesAppended = true;
58+
} else {
59+
buildIt();
60+
}
61+
};
62+
63+
const updateColorWeak = colorWeak => {
64+
document.body.className = colorWeak ? 'colorWeak' : '';
65+
};
66+
67+
export { updateTheme, updateColorWeak }

‎src/main.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import * as dayjs from 'dayjs' // 日期时间支持库
1414

1515
import '@/permission' // permission control
1616

17-
import { ACCESS_TOKEN, DEFAULT_THEME, SIDEBAR_TYPE } from "@/store/mutation-types"
17+
import {ACCESS_TOKEN, DEFAULT_COLOR, DEFAULT_THEME, SIDEBAR_TYPE} from "@/store/mutation-types"
1818

1919
Vue.filter('dayjs', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
2020
return dayjs(dataStr).format(pattern)
@@ -39,6 +39,7 @@ new Vue({
3939
mounted () {
4040
store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
4141
store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, 'dark'))
42+
store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, { key: 'daybreak', color: '#1890FF' }))
4243
store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
4344

4445
},

‎src/store/getters.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
const getters = {
22
device: state => state.app.device,
33
theme: state => state.app.theme,
4+
color: state => state.app.color,
45
token: state => state.user.token,
56
avatar: state => state.user.avatar,
67
nickname: state => state.user.name,

‎src/store/modules/app.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Vue from 'vue'
2-
import { SIDEBAR_TYPE, DEFAULT_THEME } from "@/store/mutation-types"
2+
import {SIDEBAR_TYPE, DEFAULT_THEME, DEFAULT_COLOR} from "@/store/mutation-types"
33

44
const app = {
55
state: {
@@ -8,7 +8,8 @@ const app = {
88
withoutAnimation: false
99
},
1010
device: 'desktop',
11-
theme: ''
11+
theme: '',
12+
color: null
1213
},
1314
mutations: {
1415
SET_SIDEBAR_TYPE: (state, type) => {
@@ -27,6 +28,10 @@ const app = {
2728
// setStore('_DEFAULT_THEME', theme)
2829
Vue.ls.set(DEFAULT_THEME, theme)
2930
state.theme = theme
31+
},
32+
TOGGLE_COLOR: (state, color) => {
33+
Vue.ls.set(DEFAULT_COLOR, color)
34+
state.color = color
3035
}
3136
},
3237
actions: {
@@ -41,6 +46,9 @@ const app = {
4146
},
4247
ToggleTheme({ commit }, theme) {
4348
commit('TOGGLE_THEME', theme)
49+
},
50+
ToggleColor({ commit }, color) {
51+
commit('TOGGLE_COLOR', color)
4452
}
4553
}
4654
}

0 commit comments

Comments
 (0)