奇淼（piexlmax
3 years ago
committed by
GitHub
GitHub
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 284 additions and 9955 deletions
-
1.gitignore
-
1README.md
-
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
-
67web/src/style/side.scss
-
25web/src/view/layout/aside/historyComponent/history.vue
-
15web/src/view/layout/aside/index.vue
-
162web/src/view/layout/index.vue
-
9web/src/view/layout/search/search.vue
-
108web/src/view/layout/setting/index.vue
-
9510web/yarn.lock
@ -1,151 +0,0 @@ |
|||||
<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> |
|
||||
@ -1,33 +0,0 @@ |
|||||
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 |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@ -1,15 +0,0 @@ |
|||||
/* 改变主题色变量 */ |
|
||||
$--color-primary: #1890ff; |
|
||||
|
|
||||
/* 改变 icon 字体路径变量，必需 */ |
|
||||
$--font-path: '~element-ui/lib/theme-chalk/fonts'; |
|
||||
|
|
||||
|
|
||||
|
|
||||
@import "~element-ui/packages/theme-chalk/src/index"; |
|
||||
|
|
||||
|
|
||||
|
|
||||
:export { |
|
||||
colorPrimary: $--color-primary |
|
||||
} |
|
||||
@ -1,67 +0,0 @@ |
|||||
@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; |
|
||||
text-align: center; |
|
||||
.logoimg { |
|
||||
width: $width-aside-img; |
|
||||
height: $height-aside-img; |
|
||||
vertical-align: middle; |
|
||||
border-radius: 50%; |
|
||||
padding: 3px; |
|
||||
} |
|
||||
|
|
||||
.tit-text { |
|
||||
display: inline-block; |
|
||||
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; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@ -1,108 +0,0 @@ |
|||||
<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