feature:change theme online

build/webpack.dev.conf.js

@@ -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(),

build/webpack.prod.conf.js

@@ -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: {

src/components/ThemePicker/index.vue

+<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>

src/utils/index.js

@@ -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
+}

src/views/layout/components/Navbar.vue

 <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>
-            首页
-          </el-dropdown-item>
-        </router-link>
-        <a target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">
-          <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>
-        </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>
 

src/views/theme/index.vue

@@ -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>