Devil
3 years ago
15 changed files with 9950 additions and 137 deletions
-
151web/src/components/themeChange/index.vue
-
4web/src/core/element_lazy.js
-
1web/src/core/gin-vue-admin.js
-
4web/src/store/index.js
-
33web/src/store/module/app.js
-
9web/src/style/basics.scss
-
15web/src/style/element_visiable.scss
-
124web/src/style/main.scss
-
71web/src/style/side.scss
-
25web/src/view/layout/aside/historyComponent/history.vue
-
15web/src/view/layout/aside/index.vue
-
6web/src/view/layout/index.vue
-
9web/src/view/layout/search/search.vue
-
108web/src/view/layout/setting/index.vue
-
9510web/yarn.lock
@ -0,0 +1,151 @@ |
|||
<template> |
|||
<el-color-picker |
|||
v-model="theme" |
|||
:predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]" |
|||
class="theme-picker" |
|||
popper-class="theme-picker-dropdown" |
|||
/> |
|||
</template> |
|||
|
|||
<script> |
|||
const version = require('element-ui/package.json').version // element-ui version from node_modules |
|||
const ORIGINAL_THEME = '#409EFF' // default color |
|||
export default { |
|||
data() { |
|||
return { |
|||
chalk: '', // content of theme-chalk css |
|||
theme: '' |
|||
} |
|||
}, |
|||
computed: { |
|||
defaultTheme() { |
|||
return this.$store.state.app.theme |
|||
} |
|||
}, |
|||
watch: { |
|||
defaultTheme: { |
|||
handler: function(val, oldVal) { |
|||
this.theme = val |
|||
}, |
|||
immediate: true |
|||
}, |
|||
async theme(val) { |
|||
const oldVal = this.chalk ? this.theme : ORIGINAL_THEME |
|||
if (typeof val !== 'string') return |
|||
const themeCluster = this.getThemeCluster(val.replace('#', '')) |
|||
const originalCluster = this.getThemeCluster(oldVal.replace('#', '')) |
|||
const $message = this.$message({ |
|||
message: '修改主题色中', |
|||
customClass: 'theme-message', |
|||
type: 'success', |
|||
duration: 0, |
|||
iconClass: 'el-icon-loading' |
|||
}) |
|||
const getHandler = (variable, id) => { |
|||
return () => { |
|||
const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', '')) |
|||
const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster) |
|||
let styleTag = document.getElementById(id) |
|||
if (!styleTag) { |
|||
styleTag = document.createElement('style') |
|||
styleTag.setAttribute('id', id) |
|||
document.head.appendChild(styleTag) |
|||
} |
|||
styleTag.innerText = newStyle |
|||
} |
|||
} |
|||
if (!this.chalk) { |
|||
const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css` |
|||
await this.getCSSString(url, 'chalk') |
|||
} |
|||
const chalkHandler = getHandler('chalk', 'chalk-style') |
|||
chalkHandler() |
|||
const styles = [].slice.call(document.querySelectorAll('style')) |
|||
.filter(style => { |
|||
const text = style.innerText |
|||
return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text) |
|||
}) |
|||
styles.forEach(style => { |
|||
const { innerText } = style |
|||
if (typeof innerText !== 'string') return |
|||
style.innerText = this.updateStyle(innerText, originalCluster, themeCluster) |
|||
}) |
|||
this.$emit('change', val) |
|||
$message.close() |
|||
} |
|||
}, |
|||
methods: { |
|||
updateStyle(style, oldCluster, newCluster) { |
|||
let newStyle = style |
|||
oldCluster.forEach((color, index) => { |
|||
newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index]) |
|||
}) |
|||
return newStyle |
|||
}, |
|||
getCSSString(url, variable) { |
|||
return new Promise(resolve => { |
|||
const xhr = new XMLHttpRequest() |
|||
xhr.onreadystatechange = () => { |
|||
if (xhr.readyState === 4 && xhr.status === 200) { |
|||
this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '') |
|||
resolve() |
|||
} |
|||
} |
|||
xhr.open('GET', url) |
|||
xhr.send() |
|||
}) |
|||
}, |
|||
getThemeCluster(theme) { |
|||
const tintColor = (color, tint) => { |
|||
let red = parseInt(color.slice(0, 2), 16) |
|||
let green = parseInt(color.slice(2, 4), 16) |
|||
let blue = parseInt(color.slice(4, 6), 16) |
|||
if (tint === 0) { // when primary color is in its rgb space |
|||
return [red, green, blue].join(',') |
|||
} else { |
|||
red += Math.round(tint * (255 - red)) |
|||
green += Math.round(tint * (255 - green)) |
|||
blue += Math.round(tint * (255 - blue)) |
|||
red = red.toString(16) |
|||
green = green.toString(16) |
|||
blue = blue.toString(16) |
|||
return `#${red}${green}${blue}` |
|||
} |
|||
} |
|||
const shadeColor = (color, shade) => { |
|||
let red = parseInt(color.slice(0, 2), 16) |
|||
let green = parseInt(color.slice(2, 4), 16) |
|||
let blue = parseInt(color.slice(4, 6), 16) |
|||
red = Math.round((1 - shade) * red) |
|||
green = Math.round((1 - shade) * green) |
|||
blue = Math.round((1 - shade) * blue) |
|||
red = red.toString(16) |
|||
green = green.toString(16) |
|||
blue = blue.toString(16) |
|||
return `#${red}${green}${blue}` |
|||
} |
|||
const clusters = [theme] |
|||
for (let i = 0; i <= 9; i++) { |
|||
clusters.push(tintColor(theme, Number((i / 10).toFixed(2)))) |
|||
} |
|||
clusters.push(shadeColor(theme, 0.1)) |
|||
return clusters |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.theme-message, |
|||
.theme-picker-dropdown { |
|||
z-index: 99999 !important; |
|||
} |
|||
.theme-picker .el-color-picker__trigger { |
|||
height: 26px !important; |
|||
width: 26px !important; |
|||
padding: 2px; |
|||
} |
|||
.theme-picker-dropdown .el-color-dropdown__link-btn { |
|||
display: none; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,33 @@ |
|||
import variables from '@/style/element_visiable.scss' |
|||
export const app = { |
|||
namespaced: true, |
|||
state: { |
|||
theme: variables.colorPrimary, |
|||
sideMode: 'dark' |
|||
}, |
|||
mutations: { |
|||
CHANGETHEME: (state, value) => { |
|||
state.theme = value |
|||
}, |
|||
CHANGESIDEMODE: (state) => { |
|||
if (state.sideMode === 'dark') { |
|||
state.sideMode = 'light' |
|||
} else { |
|||
state.sideMode = 'dark' |
|||
} |
|||
} |
|||
}, |
|||
actions: { |
|||
changeTheme({ commit }, data) { |
|||
commit('CHANGETHEME', data) |
|||
}, |
|||
changeSideMode({ commit }) { |
|||
commit('CHANGESIDEMODE') |
|||
} |
|||
}, |
|||
getters: { |
|||
getSIdeMode(state) { |
|||
return state.sideMode |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
/* 改变主题色变量 */ |
|||
$--color-primary: #1890ff; |
|||
|
|||
/* 改变 icon 字体路径变量，必需 */ |
|||
$--font-path: '~element-ui/lib/theme-chalk/fonts'; |
|||
|
|||
|
|||
|
|||
@import "~element-ui/packages/theme-chalk/src/index"; |
|||
|
|||
|
|||
|
|||
:export { |
|||
colorPrimary: $--color-primary |
|||
} |
|||
@ -0,0 +1,71 @@ |
|||
@import '@/style/basics.scss'; |
|||
.el-aside { |
|||
-webkit-transition: width .2s; |
|||
transition: width .2s; |
|||
width: $width-aside; |
|||
background-color: $bg-aside; |
|||
height: 100%; |
|||
position: fixed; |
|||
font-size: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: 1001; |
|||
overflow: hidden; |
|||
color: $aside-color; |
|||
.el-menu { |
|||
border-right: none; |
|||
} |
|||
|
|||
.tilte { |
|||
min-height: $height-aside-tilte; |
|||
line-height: $height-aside-tilte; |
|||
background: $bg-aside; |
|||
text-align: center; |
|||
|
|||
.logoimg { |
|||
width: $width-aside-img; |
|||
height: $height-aside-img; |
|||
vertical-align: middle; |
|||
background: #fff; |
|||
border-radius: 50%; |
|||
padding: 3px; |
|||
} |
|||
|
|||
.tit-text { |
|||
display: inline-block; |
|||
color: $aside-color; |
|||
font-weight: 600; |
|||
font-size: 20px; |
|||
vertical-align: middle; |
|||
padding-left: 10px; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.hideside { |
|||
.aside { |
|||
width: $width-hideside-aside; |
|||
} |
|||
} |
|||
|
|||
.mobile.hideside { |
|||
.el-aside { |
|||
-webkit-transition-duration: .2s; |
|||
transition-duration: .2s; |
|||
-webkit-transform: translate3d(-210px, 0, 0); |
|||
transform: translate3d(-220px, 0, 0); |
|||
} |
|||
} |
|||
|
|||
.mobile { |
|||
.el-aside { |
|||
-webkit-transition: -webkit-transform .28s; |
|||
transition: -webkit-transform .28s; |
|||
transition: transform .28s; |
|||
transition: transform .28s, -webkit-transform .28s; |
|||
margin-left: -54px; |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,108 @@ |
|||
<template> |
|||
<div> |
|||
<el-button type="primary" class="drawer-container" icon="el-icon-setting" @click="showSettingDrawar" /> |
|||
<el-drawer |
|||
title="系统配置" |
|||
:visible.sync="drawer" |
|||
:direction="direction" |
|||
:before-close="handleClose" |
|||
> |
|||
<div class="setting_body"> |
|||
<div class="setting_card"> |
|||
<div class="setting_title">侧边栏主题</div> |
|||
<div class="setting_content"> |
|||
<div class="item" @click="chageMode('light')"> |
|||
<i v-if="sideMode === 'light'" class="el-icon-check check" /> |
|||
<img src="https://gw.alipayobjects.com/zos/antfincdn/NQ%24zoisaD2/jpRkZQMyYRryryPNtyIC.svg"> |
|||
</div> |
|||
<div class="item" @click="chageMode('dark')"> |
|||
<i v-if="sideMode === 'dark'" class="el-icon-check check" /> |
|||
<img src="https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="setting_card"> |
|||
<div class="setting_title">主题色</div> |
|||
<div class=""> |
|||
<theme-change style="width: 30px;height: 30px;margin-top: 20px" @change="themeChange" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-drawer> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import themeChange from '@/components/themeChange' |
|||
export default { |
|||
data() { |
|||
return { |
|||
drawer: false, |
|||
direction: 'rtl', |
|||
sideMode: 'dark' |
|||
} |
|||
}, |
|||
components: { |
|||
themeChange |
|||
}, |
|||
methods: { |
|||
handleClose() { |
|||
this.drawer = false |
|||
}, |
|||
showSettingDrawar() { |
|||
this.drawer = true |
|||
}, |
|||
chageMode(e) { |
|||
this.sideMode = e |
|||
this.$store.dispatch('app/changeSideMode') |
|||
}, |
|||
themeChange(val) { |
|||
this.$store.dispatch('app/changeTheme', val) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.drawer-container { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 20%; |
|||
height: 40px; |
|||
width: 40px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
z-index: 999; |
|||
color: #fff; |
|||
border-radius: 4px 0 0 4px; |
|||
cursor: pointer; |
|||
-webkit-box-shadow: inset 0 0 6px rgb(0 ,0 ,0, 10%); |
|||
} |
|||
.setting_body{ |
|||
padding: 20px; |
|||
.setting_card{ |
|||
margin-bottom: 20px; |
|||
} |
|||
.setting_content{ |
|||
margin-top: 20px; |
|||
display: flex; |
|||
.item{ |
|||
position: relative; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
.check{ |
|||
position: absolute; |
|||
font-size: 20px; |
|||
color: #00afff; |
|||
} |
|||
img{ |
|||
margin-right: 20px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
9510
web/yarn.lock
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue