0214
/
ALOps_sys1
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

修改主题样式本地读取

Browse Source
master
RuoYi 2 years ago
parent 1810f30491
commit 5a1e7bae2c
3 changed files with 172 additions and 174 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      ruoyi-ui/public/styles/theme-chalk/index.css
  2. 343
      ruoyi-ui/src/components/ThemePicker/index.vue
  3. 2
      ruoyi-ui/src/permission.js

1
ruoyi-ui/public/styles/theme-chalk/index.css
View File

File diff suppressed because one or more lines are too long

343
ruoyi-ui/src/components/ThemePicker/index.vue
Unescape View File

@ -1,173 +1,170 @@
<template> <template>
<el-color-picker <el-color-picker
v-model="theme" v-model="theme"
:predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]" :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
class="theme-picker" class="theme-picker"
popper-class="theme-picker-dropdown" popper-class="theme-picker-dropdown"
/> />
</template> </template>
<script> <script>
const version = require('element-ui/package.json').version // element-ui version from node_modules const ORIGINAL_THEME = '#409EFF' // default color
const ORIGINAL_THEME = '#409EFF' // default color
export default {
export default { data() {
data() { return {
return { chalk: '', // content of theme-chalk css
chalk: '', // content of theme-chalk css theme: ''
theme: '' }
} },
}, computed: {
computed: { defaultTheme() {
defaultTheme() { return this.$store.state.settings.theme
return this.$store.state.settings.theme }
} },
}, watch: {
watch: { defaultTheme: {
defaultTheme: { handler: function(val, oldVal) {
handler: function(val, oldVal) { this.theme = val
this.theme = val },
}, immediate: true
immediate: true },
}, async theme(val) {
async theme(val) { await this.setTheme(val)
await this.setTheme(val) }
} },
}, created() {
created() { if(this.defaultTheme !== ORIGINAL_THEME) {
if(this.defaultTheme !== ORIGINAL_THEME) { this.setTheme(this.defaultTheme)
this.setTheme(this.defaultTheme) }
} },
}, methods: {
async setTheme(val) {
methods: { const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
async setTheme(val) { if (typeof val !== 'string') return
const oldVal = this.chalk ? this.theme : ORIGINAL_THEME const themeCluster = this.getThemeCluster(val.replace('#', ''))
if (typeof val !== 'string') return const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
const themeCluster = this.getThemeCluster(val.replace('#', ''))
const originalCluster = this.getThemeCluster(oldVal.replace('#', '')) const getHandler = (variable, id) => {
return () => {
const getHandler = (variable, id) => { const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
return () => { const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster) let styleTag = document.getElementById(id)
if (!styleTag) {
let styleTag = document.getElementById(id) styleTag = document.createElement('style')
if (!styleTag) { styleTag.setAttribute('id', id)
styleTag = document.createElement('style') document.head.appendChild(styleTag)
styleTag.setAttribute('id', id) }
document.head.appendChild(styleTag) styleTag.innerText = newStyle
} }
styleTag.innerText = newStyle }
}
} if (!this.chalk) {
const url = `/styles/theme-chalk/index.css`
if (!this.chalk) { await this.getCSSString(url, '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 chalkHandler = getHandler('chalk', 'chalk-style')
const styles = [].slice.call(document.querySelectorAll('style'))
chalkHandler() .filter(style => {
const text = style.innerText
const styles = [].slice.call(document.querySelectorAll('style')) return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
.filter(style => { })
const text = style.innerText styles.forEach(style => {
return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text) const { innerText } = style
}) if (typeof innerText !== 'string') return
styles.forEach(style => { style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
const { innerText } = style })
if (typeof innerText !== 'string') return
style.innerText = this.updateStyle(innerText, originalCluster, themeCluster) this.$emit('change', val)
}) },
this.$emit('change', val) updateStyle(style, oldCluster, newCluster) {
}, let newStyle = style
oldCluster.forEach((color, index) => {
updateStyle(style, oldCluster, newCluster) { newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
let newStyle = style })
oldCluster.forEach((color, index) => { return newStyle
newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index]) },
})
return newStyle getCSSString(url, variable) {
}, return new Promise(resolve => {
const xhr = new XMLHttpRequest()
getCSSString(url, variable) { xhr.onreadystatechange = () => {
return new Promise(resolve => { if (xhr.readyState === 4 && xhr.status === 200) {
const xhr = new XMLHttpRequest() this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
xhr.onreadystatechange = () => { resolve()
if (xhr.readyState === 4 && xhr.status === 200) { }
this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '') }
resolve() xhr.open('GET', url)
} xhr.send()
} })
xhr.open('GET', url) },
xhr.send()
}) getThemeCluster(theme) {
}, const tintColor = (color, tint) => {
let red = parseInt(color.slice(0, 2), 16)
getThemeCluster(theme) { let green = parseInt(color.slice(2, 4), 16)
const tintColor = (color, tint) => { let blue = parseInt(color.slice(4, 6), 16)
let red = parseInt(color.slice(0, 2), 16)
let green = parseInt(color.slice(2, 4), 16) if (tint === 0) { // when primary color is in its rgb space
let blue = parseInt(color.slice(4, 6), 16) return [red, green, blue].join(',')
} else {
if (tint === 0) { // when primary color is in its rgb space red += Math.round(tint * (255 - red))
return [red, green, blue].join(',') green += Math.round(tint * (255 - green))
} else { blue += Math.round(tint * (255 - blue))
red += Math.round(tint * (255 - red))
green += Math.round(tint * (255 - green)) red = red.toString(16)
blue += Math.round(tint * (255 - blue)) green = green.toString(16)
blue = blue.toString(16)
red = red.toString(16)
green = green.toString(16) return `#${red}${green}${blue}`
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)
const shadeColor = (color, shade) => { let blue = parseInt(color.slice(4, 6), 16)
let red = parseInt(color.slice(0, 2), 16)
let green = parseInt(color.slice(2, 4), 16) red = Math.round((1 - shade) * red)
let blue = parseInt(color.slice(4, 6), 16) green = Math.round((1 - shade) * green)
blue = Math.round((1 - shade) * blue)
red = Math.round((1 - shade) * red)
green = Math.round((1 - shade) * green) red = red.toString(16)
blue = Math.round((1 - shade) * blue) green = green.toString(16)
blue = blue.toString(16)
red = red.toString(16)
green = green.toString(16) return `#${red}${green}${blue}`
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))))
const clusters = [theme] }
for (let i = 0; i <= 9; i++) { clusters.push(shadeColor(theme, 0.1))
clusters.push(tintColor(theme, Number((i / 10).toFixed(2)))) return clusters
} }
clusters.push(shadeColor(theme, 0.1)) }
return clusters }
} </script>
}
} <style>
</script> .theme-message,
.theme-picker-dropdown {
<style> z-index: 99999 !important;
.theme-message, }
.theme-picker-dropdown {
z-index: 99999 !important; .theme-picker .el-color-picker__trigger {
} height: 26px !important;
width: 26px !important;
.theme-picker .el-color-picker__trigger { padding: 2px;
height: 26px !important; }
width: 26px !important;
padding: 2px; .theme-picker-dropdown .el-color-dropdown__link-btn {
} display: none;
}
.theme-picker-dropdown .el-color-dropdown__link-btn { </style>
display: none;
}
</style>

2
ruoyi-ui/src/permission.js
Unescape View File

@ -9,7 +9,7 @@ import { isRelogin } from '@/utils/request'
NProgress.configure({ showSpinner: false }) NProgress.configure({ showSpinner: false })
const whiteList = ['/login', '/register', '/register*', '/register/*'] const whiteList = ['/login', '/register']
const isWhiteList = (path) => { const isWhiteList = (path) => {
return whiteList.some(pattern => isPathMatch(pattern, path)) return whiteList.some(pattern => isPathMatch(pattern, path))

Write Preview
Loading…
Cancel
Save