feature:change theme online
This commit is contained in:
Pan
parent
e8b34bbc0d
commit
374fd3ffeb
6 changed files with 285 additions and 99 deletions
|
|
@ -6,6 +6,7 @@ var merge = require('webpack-merge')
|
|||
var baseWebpackConfig = require('./webpack.base.conf')
|
||||
var HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
|
||||
var dependencies = require('../package.json').dependencies
|
||||
|
||||
// add hot-reload related code to entry chunks
|
||||
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
|
||||
|
|
@ -27,7 +28,8 @@ module.exports = merge(baseWebpackConfig, {
|
|||
cache: true,
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': config.dev.env
|
||||
'process.env': config.dev.env,
|
||||
'DEPENDENCIES': JSON.stringify(dependencies)
|
||||
}),
|
||||
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ var CopyWebpackPlugin = require('copy-webpack-plugin')
|
|||
var HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
var ExtractTextPlugin = require('extract-text-webpack-plugin')
|
||||
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
|
||||
var dependencies = require('../package.json').dependencies
|
||||
|
||||
var env = config.build[process.env.env_config+'Env']
|
||||
|
||||
|
|
@ -33,7 +34,8 @@ var webpackConfig = merge(baseWebpackConfig, {
|
|||
new webpack.optimize.ModuleConcatenationPlugin(),
|
||||
// http://vuejs.github.io/vue-loader/en/workflow/production.html
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': env
|
||||
'process.env': env,
|
||||
'DEPENDENCIES': JSON.stringify(dependencies)
|
||||
}),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
|
|
|
|||
145
src/components/ThemePicker/index.vue
Normal file
145
src/components/ThemePicker/index.vue
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
<template>
|
||||
<el-color-picker
|
||||
class="theme-picker"
|
||||
popper-class="theme-picker-dropdown"
|
||||
v-model="theme"></el-color-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getVersion } from '@/utils/index.js'
|
||||
const version = getVersion('element-ui') // element-ui version from package.json
|
||||
const ORIGINAL_THEME = '#409EFF' // default color
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chalk: '', // content of theme-chalk css
|
||||
theme: ORIGINAL_THEME
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
theme(val, oldVal) {
|
||||
if (typeof val !== 'string') return
|
||||
const themeCluster = this.getThemeCluster(val.replace('#', ''))
|
||||
const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
|
||||
console.log(themeCluster, originalCluster)
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
const chalkHandler = getHandler('chalk', 'chalk-style')
|
||||
|
||||
if (!this.chalk) {
|
||||
const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
|
||||
this.getCSSString(url, chalkHandler, 'chalk')
|
||||
} else {
|
||||
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
|
||||
console.log(style)
|
||||
if (typeof innerText !== 'string') return
|
||||
style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
|
||||
})
|
||||
this.$message({
|
||||
message: '换肤成功',
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
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, callback, variable) {
|
||||
const xhr = new XMLHttpRequest()
|
||||
xhr.onreadystatechange = () => {
|
||||
if (xhr.readyState === 4 && xhr.status === 200) {
|
||||
this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
|
||||
callback()
|
||||
}
|
||||
}
|
||||
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-picker .el-color-picker__trigger {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.theme-picker-dropdown .el-color-dropdown__link-btn {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -265,3 +265,8 @@ export function deepClone(source) {
|
|||
}
|
||||
return targetObj
|
||||
}
|
||||
|
||||
// get dependencies verison from package.json by webpack.DefinePlugin
|
||||
export function getVersion(name) {
|
||||
return DEPENDENCIES[name] // eslint-disable-line
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,47 +1,64 @@
|
|||
<template>
|
||||
<el-menu class="navbar" mode="horizontal">
|
||||
<hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
|
||||
|
||||
<levelbar></levelbar>
|
||||
<error-log v-if="log.length>0" class="errLog-container" :logsList="log"></error-log>
|
||||
<el-tooltip class="item" effect="dark" content="全屏" placement="bottom">
|
||||
<screenfull class='screenfull'></screenfull>
|
||||
</el-tooltip>
|
||||
<el-dropdown class="avatar-container" trigger="click">
|
||||
<div class="avatar-wrapper">
|
||||
<img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
|
||||
<i class="el-icon-caret-bottom"></i>
|
||||
</div>
|
||||
<el-dropdown-menu class="user-dropdown" slot="dropdown">
|
||||
<router-link class='inlineBlock' to="/">
|
||||
<el-dropdown-item>
|
||||
首页
|
||||
|
||||
<div class="right-menu">
|
||||
|
||||
<error-log v-if="log.length>0" class="errLog-container right-menu-item" :logsList="log"></error-log>
|
||||
|
||||
<el-tooltip effect="dark" content="全屏" placement="bottom">
|
||||
<screenfull class="screenfull right-menu-item"></screenfull>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip effect="dark" content="换肤" placement="bottom">
|
||||
<theme-picker class="theme-switch right-menu-item"></theme-picker>
|
||||
</el-tooltip>
|
||||
|
||||
<el-dropdown class="avatar-container right-menu-item" trigger="click">
|
||||
<div class="avatar-wrapper">
|
||||
<img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
|
||||
<i class="el-icon-caret-bottom"></i>
|
||||
</div>
|
||||
<el-dropdown-menu class="user-dropdown" slot="dropdown">
|
||||
<router-link class="inlineBlock" to="/">
|
||||
<el-dropdown-item>
|
||||
首页
|
||||
</el-dropdown-item>
|
||||
</router-link>
|
||||
<a target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">
|
||||
<el-dropdown-item>
|
||||
项目地址
|
||||
</el-dropdown-item>
|
||||
</a>
|
||||
<el-dropdown-item divided>
|
||||
<span @click="logout" style="display:block;">退出登录</span>
|
||||
</el-dropdown-item>
|
||||
</router-link>
|
||||
<a target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">
|
||||
<el-dropdown-item>
|
||||
项目地址
|
||||
</el-dropdown-item>
|
||||
</a>
|
||||
<el-dropdown-item divided>
|
||||
<span @click="logout" style="display:block;">退出登录</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import Levelbar from './Levelbar'
|
||||
import Hamburger from 'components/Hamburger'
|
||||
import Screenfull from 'components/Screenfull'
|
||||
import ErrorLog from 'components/ErrLog'
|
||||
import Hamburger from '@/components/Hamburger'
|
||||
import ThemePicker from '@/components/ThemePicker'
|
||||
import Screenfull from '@/components/Screenfull'
|
||||
import ErrorLog from '@/components/ErrLog'
|
||||
import errLogStore from 'store/errLog'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Levelbar,
|
||||
Hamburger,
|
||||
ThemePicker,
|
||||
ErrorLog,
|
||||
Screenfull
|
||||
},
|
||||
|
|
@ -72,48 +89,56 @@ export default {
|
|||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.navbar {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
border-radius: 0px !important;
|
||||
.hamburger-container {
|
||||
line-height: 58px;
|
||||
height: 50px;
|
||||
float: left;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.errLog-container {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 150px;
|
||||
}
|
||||
.screenfull {
|
||||
position: absolute;
|
||||
right: 90px;
|
||||
top: 16px;
|
||||
height: 20px;
|
||||
}
|
||||
.avatar-container {
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 35px;
|
||||
.avatar-wrapper {
|
||||
cursor: pointer;
|
||||
margin-top: 5px;
|
||||
position: relative;
|
||||
.user-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.el-icon-caret-bottom {
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
border-radius: 0px !important;
|
||||
.hamburger-container {
|
||||
line-height: 58px;
|
||||
height: 50px;
|
||||
float: left;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.errLog-container {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.right-menu {
|
||||
float: right;
|
||||
height: 100%;
|
||||
&:focus{
|
||||
outline: none;
|
||||
}
|
||||
.right-menu-item {
|
||||
display: inline-block;
|
||||
margin: 0 8px;
|
||||
}
|
||||
.screenfull {
|
||||
height: 20px;
|
||||
}
|
||||
.theme-switch {
|
||||
vertical-align: 15px;
|
||||
}
|
||||
.avatar-container {
|
||||
height: 50px;
|
||||
margin-right: 30px;
|
||||
.avatar-wrapper {
|
||||
cursor: pointer;
|
||||
margin-top: 5px;
|
||||
position: relative;
|
||||
.user-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.el-icon-caret-bottom {
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,13 +12,21 @@
|
|||
</el-card>
|
||||
|
||||
<div class="block">
|
||||
<span class="demonstration">Button: </span>
|
||||
<span class="wrapper">
|
||||
<el-button type="primary">成功按钮</el-button>
|
||||
<el-button type="success">成功按钮</el-button>
|
||||
<el-button type="warning">警告按钮</el-button>
|
||||
<el-button type="danger">危险按钮</el-button>
|
||||
<el-button type="info">信息按钮</el-button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
<el-button type="primary" icon="el-icon-edit"></el-button>
|
||||
<el-button type="primary" icon="el-icon-share"></el-button>
|
||||
<el-button type="primary" icon="el-icon-delete"></el-button>
|
||||
<el-button type="primary" icon="el-icon-search">Search</el-button>
|
||||
<el-button type="primary">Upload
|
||||
<i class="el-icon-upload el-icon-right"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
|
|
@ -28,14 +36,15 @@
|
|||
</div>
|
||||
|
||||
<div class="block">
|
||||
<el-alert class='alert-item' title="成功提示的文案" type="success">
|
||||
</el-alert>
|
||||
<el-alert class='alert-item' title="消息提示的文案" type="info">
|
||||
</el-alert>
|
||||
<el-alert class='alert-item' title="警告提示的文案" type="warning">
|
||||
</el-alert>
|
||||
<el-alert class='alert-item' title="错误提示的文案" type="error">
|
||||
</el-alert>
|
||||
<el-radio-group v-model="radio">
|
||||
<el-radio :label="3">Option A</el-radio>
|
||||
<el-radio :label="6">Option B</el-radio>
|
||||
<el-radio :label="9">Option C</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
<el-slider v-model="slideValue"></el-slider>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -56,7 +65,9 @@ export default {
|
|||
{ name: 'Tag Three', type: 'success' },
|
||||
{ name: 'Tag Four', type: 'warning' },
|
||||
{ name: 'Tag Five', type: 'danger' }
|
||||
]
|
||||
],
|
||||
slideValue: 50,
|
||||
radio: 3
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -68,20 +79,16 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box-card{
|
||||
width: 400px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.block{
|
||||
padding: 30px 24px;
|
||||
}
|
||||
.alert-item{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.tag-item{
|
||||
margin-right: 15px;
|
||||
}
|
||||
.link-title{
|
||||
margin-left:35px;
|
||||
}
|
||||
.box-card {
|
||||
width: 400px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.block {
|
||||
padding: 30px 24px;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
margin-right: 15px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue