Skip to content

Commit d5f7419

Browse files
GGupzHHGGupzHH
committed
feature(theme):kiss:
1 parent b8d504b commit d5f7419

File tree

4 files changed

+160
-23
lines changed

4 files changed

+160
-23
lines changed

‎src/components/Layout/components/Settings/index.vue

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
<template>
22
<div class="right-panel">
33
<transition name="setting-icon">
4-
<div
4+
<el-button
55
v-if="!isSetting"
6+
type="primary"
67
class="wrap-settings"
78
@click="handleDrawer()"
89
>
910
<i class="el-icon-setting"></i>
10-
</div>
11+
</el-button>
1112
</transition>
1213
<el-drawer
1314
title="主题配置"
@@ -26,7 +27,6 @@
2627
</div>
2728
<component
2829
:is="slotItem.component"
29-
@change="changeComponent"
3030
/>
3131
</div>
3232
</div>
@@ -56,9 +56,6 @@ export default {
5656
methods: {
5757
handleDrawer () {
5858
this.isSetting = !this.isSetting
59-
},
60-
changeComponent (val) {
61-
console.log(val)
6259
}
6360
}
6461
}
@@ -78,16 +75,13 @@ export default {
7875
position: fixed;
7976
right: 0px;
8077
top: 50%;
81-
text-align: center;
8278
border-radius: 6px 0px 0px 6px;
8379
cursor: pointer;
8480
z-index: 99999;
8581
transform: translateY(-50%);
86-
background-color: $--color-primary;
87-
color: $--color-text-regular;
82+
padding: 0px;
8883
.el-icon-setting {
8984
font-size: 30px;
90-
line-height: 45px;
9185
}
9286
}
9387
/deep/ .wrap-slot {

‎src/components/Navigation/MenuBar/index.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@
1717
:default-active="getCurrentRoute"
1818
class="menubar-menu-list"
1919
:collapse="isCollapse"
20-
:collapse-transition="false"
21-
:active-text-color="getActiveTextColor"
2220
@select="handleMenuSelect"
2321
>
22+
<!-- :collapse-transition="false" -->
23+
<!-- :active-text-color="getActiveTextColor" -->
2424
<NavigationMenuBarItem
2525
v-for="(route, index) in getRoutes"
2626
:key="index"

‎src/components/ThemePicker/index.vue

Lines changed: 151 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,175 @@
11
<template>
22
<el-color-picker
33
v-model="theme"
4-
:predefine="predefine"
4+
:predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
55
class="theme-picker"
66
popper-class="theme-picker-dropdown"
7-
@change="change"
87
/>
98
</template>
109

1110
<script>
11+
const version = require('element-ui/package.json').version // element-ui version from node_modules
12+
const ORIGINAL_THEME = '#409EFF' // default color
13+
1214
export default {
13-
name: 'ThemePicker',
1415
data () {
1516
return {
16-
theme: '',
17-
predefine: ['#409EFF', '#11a983', '#13c2c2', '#f5222d']
17+
chalk: '', // content of theme-chalk css
18+
theme: ''
19+
}
20+
},
21+
computed: {
22+
defaultTheme () {
23+
return ORIGINAL_THEME
1824
}
1925
},
26+
watch: {
27+
defaultTheme: {
28+
handler: function (val, oldVal) {
29+
this.theme = val
30+
},
31+
immediate: true
32+
},
33+
async theme (val) {
34+
const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
35+
if (typeof val !== 'string') return
36+
const themeCluster = this.getThemeCluster(val.replace('#', ''))
37+
const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
38+
console.log(themeCluster, originalCluster)
39+
40+
const $message = this.$message({
41+
message: ' Compiling the theme',
42+
customClass: 'theme-message',
43+
type: 'success',
44+
duration: 0,
45+
iconClass: 'el-icon-loading'
46+
})
47+
48+
const getHandler = (variable, id) => {
49+
return () => {
50+
const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
51+
const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
52+
53+
let styleTag = document.getElementById(id)
54+
if (!styleTag) {
55+
styleTag = document.createElement('style')
56+
styleTag.setAttribute('id', id)
57+
document.head.appendChild(styleTag)
58+
}
59+
styleTag.innerText = newStyle
60+
}
61+
}
62+
63+
// if (!this.chalk) {
64+
const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
65+
await this.getCSSString(url, 'chalk')
66+
// }
67+
68+
const chalkHandler = getHandler('chalk', 'chalk-style')
69+
70+
chalkHandler()
71+
72+
const styles = [].slice.call(document.querySelectorAll('style'))
73+
.filter(style => {
74+
const text = style.innerText
75+
return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
76+
})
77+
styles.forEach(style => {
78+
const { innerText } = style
79+
if (typeof innerText !== 'string') return
80+
style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
81+
})
82+
83+
this.$emit('change', val)
84+
85+
$message.close()
86+
}
87+
},
88+
2089
methods: {
21-
change (color) {
22-
this.$emit('change', color)
90+
updateStyle (style, oldCluster, newCluster) {
91+
let newStyle = style
92+
oldCluster.forEach((color, index) => {
93+
newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
94+
})
95+
return newStyle
96+
},
97+
98+
getCSSString (url, variable) {
99+
return new Promise(resolve => {
100+
const xhr = new XMLHttpRequest()
101+
xhr.onreadystatechange = () => {
102+
if (xhr.readyState === 4 && xhr.status === 200) {
103+
this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
104+
resolve()
105+
}
106+
}
107+
xhr.open('GET', url)
108+
xhr.send()
109+
})
110+
},
111+
112+
getThemeCluster (theme) {
113+
const tintColor = (color, tint) => {
114+
let red = parseInt(color.slice(0, 2), 16)
115+
let green = parseInt(color.slice(2, 4), 16)
116+
let blue = parseInt(color.slice(4, 6), 16)
117+
118+
if (tint === 0) { // when primary color is in its rgb space
119+
return [red, green, blue].join(',')
120+
} else {
121+
red += Math.round(tint * (255 - red))
122+
green += Math.round(tint * (255 - green))
123+
blue += Math.round(tint * (255 - blue))
124+
125+
red = red.toString(16)
126+
green = green.toString(16)
127+
blue = blue.toString(16)
128+
129+
return `#${red}${green}${blue}`
130+
}
131+
}
132+
133+
const shadeColor = (color, shade) => {
134+
let red = parseInt(color.slice(0, 2), 16)
135+
let green = parseInt(color.slice(2, 4), 16)
136+
let blue = parseInt(color.slice(4, 6), 16)
137+
138+
red = Math.round((1 - shade) * red)
139+
green = Math.round((1 - shade) * green)
140+
blue = Math.round((1 - shade) * blue)
141+
142+
red = red.toString(16)
143+
green = green.toString(16)
144+
blue = blue.toString(16)
145+
146+
return `#${red}${green}${blue}`
147+
}
148+
149+
const clusters = [theme]
150+
for (let i = 0; i <= 9; i++) {
151+
clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
152+
}
153+
clusters.push(shadeColor(theme, 0.1))
154+
return clusters
23155
}
24156
}
25157
}
26158
</script>
27159

28-
<style scoped lang="scss">
160+
<style>
161+
.theme-message,
29162
.theme-picker-dropdown {
30163
z-index: 99999 !important;
31164
}
165+
166+
.theme-picker .el-color-picker__trigger {
167+
height: 26px !important;
168+
width: 26px !important;
169+
padding: 2px;
170+
}
171+
172+
.theme-picker-dropdown .el-color-dropdown__link-btn {
173+
display: none;
174+
}
32175
</style>

‎src/styles/element-variables.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,6 @@ $--border-color-light: #dfe4ed;
1717
$--border-color-lighter: #e6ebf5;
1818
$--table-border: 1px solid #dfe6ec;
1919

20-
:export {
21-
colorPrimary: $--color-primary;
22-
}
20+
// :export {
21+
// colorPrimary: $--color-primary;
22+
// }

0 commit comments

Comments
 (0)