From 862ecaa084cd301b5d81953068b8038bad31a049 Mon Sep 17 00:00:00 2001 From: smallwei <1634566606@qq.com> Date: Wed, 2 May 2018 17:04:53 +0800 Subject: [PATCH] update avue1.3.3 theme cookie --- src/mixins/theme.js | 174 +++++++++++++++++++++++++++++++ src/page/index/top/top-theme.vue | 163 +---------------------------- src/page/login/index.vue | 24 +++-- src/store/getters.js | 30 +++--- src/store/modules/common.js | 133 ++++++++++++++--------- 5 files changed, 294 insertions(+), 230 deletions(-) create mode 100644 src/mixins/theme.js diff --git a/src/mixins/theme.js b/src/mixins/theme.js new file mode 100644 index 00000000..615ea27f --- /dev/null +++ b/src/mixins/theme.js @@ -0,0 +1,174 @@ +import { + mapGetters +} from "vuex"; +const version = require("element-ui/package.json").version; // element-ui version from node_modules +const ORIGINAL_THEME = "#409EFF"; // default color +export default function () { + return { + data() { + return { + themeVal: ORIGINAL_THEME + } + }, + created() { + this.themeVal = this.theme; + }, + watch: { + themeVal(val, oldVal) { + this.$store.commit("SET_THEME", val); + this.updateTheme(val, oldVal); + } + }, + computed: { + ...mapGetters(["theme"]) + }, + methods: { + updateTheme(val, oldVal) { + if (typeof val !== "string") return; + const head = document.getElementsByTagName("head")[0]; + const themeCluster = this.getThemeCluster(val.replace("#", "")); + const originalCluster = this.getThemeCluster(oldVal.replace("#", "")); + 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); + 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 link = [].slice.call( + document.getElementsByTagName("head")[0].getElementsByTagName("link") + ); + for (let i = link.length - 3; i < link.length; i++) { + const style = link[i]; + this.getCSSString(style.href, innerText => { + const originalCluster = this.getThemeCluster( + ORIGINAL_THEME.replace("#", "") + ); + const newStyle = this.updateStyle( + innerText, + originalCluster, + themeCluster + ); + let styleTag = document.getElementById(i); + if (!styleTag) { + styleTag = document.createElement("style"); + styleTag.id = i; + styleTag.innerText = newStyle; + head.appendChild(styleTag); + } + }); + } + + 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 + ); + }); + }, + 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) { + if (variable) { + this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, ""); + } + callback(xhr.responseText); + } + }; + 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; + } + } + } +} diff --git a/src/page/index/top/top-theme.vue b/src/page/index/top/top-theme.vue index 285839ae..e9d9e2a0 100644 --- a/src/page/index/top/top-theme.vue +++ b/src/page/index/top/top-theme.vue @@ -1,170 +1,17 @@ diff --git a/src/page/login/index.vue b/src/page/login/index.vue index a0a30d48..80a295f1 100644 --- a/src/page/login/index.vue +++ b/src/page/login/index.vue @@ -15,7 +15,9 @@
- + @@ -36,8 +38,17 @@ import userLogin from "./userlogin"; import codeLogin from "./codelogin"; import thirdLogin from "./thirdlogin"; +import topTheme from "../index/top/top-theme"; +import theme from "@/mixins/theme"; export default { name: "login", + mixins: [theme()], + components: { + topTheme, + userLogin, + codeLogin, + thirdLogin + }, data() { return { activeName: "user" @@ -47,14 +58,7 @@ export default { mounted() {}, computed: {}, props: [], - methods: { - handleClick() {} - }, - components: { - userLogin, - codeLogin, - thirdLogin - } + methods: {} }; @@ -109,7 +113,7 @@ export default { .login-title { margin: 0 0 20px; text-align: center; - color: #3080fe; + color: #409eff; letter-spacing: 3px; } .login-submit { diff --git a/src/store/getters.js b/src/store/getters.js index b1bd07be..925b0c1d 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -1,18 +1,18 @@ - const getters = { - tag: state => state.tags.tag, - isCollapse: state => state.common.isCollapse, - isLock: state => state.common.isLock, - isFullScren: state => state.common.isFullScren, - lockPasswd: state => state.common.lockPasswd, - tagList: state => state.tags.tagList, - tagCurrent: state => state.tags.tagCurrent, - tagWel: state => state.tags.tagWel, - access_token: state => state.user.access_token, - refresh_token: state => state.user.refresh_token, - roles: state => state.user.roles, - permissions: state => state.user.permissions, - menu: state => state.user.menu, - errLog: state => state.errLog.errLog + tag: state => state.tags.tag, + theme: state => state.common.theme, + isCollapse: state => state.common.isCollapse, + isLock: state => state.common.isLock, + isFullScren: state => state.common.isFullScren, + lockPasswd: state => state.common.lockPasswd, + tagList: state => state.tags.tagList, + tagCurrent: state => state.tags.tagCurrent, + tagWel: state => state.tags.tagWel, + access_token: state => state.user.access_token, + refresh_token: state => state.user.refresh_token, + roles: state => state.user.roles, + permissions: state => state.user.permissions, + menu: state => state.user.menu, + errLog: state => state.errLog.errLog } export default getters diff --git a/src/store/modules/common.js b/src/store/modules/common.js index 6e414e58..bbe6260c 100644 --- a/src/store/modules/common.js +++ b/src/store/modules/common.js @@ -1,53 +1,92 @@ - -import { setStore, getStore, removeStore } from '@/util/store' -import { validatenull } from '@/util/validate' -import { getDic } from '@/api/admin' -import { baseUrl } from '@/config/env'; +import { + setStore, + getStore, + removeStore +} from '@/util/store' +import { + validatenull +} from '@/util/validate' +import { + getDic +} from '@/api/admin' +import { + baseUrl +} from '@/config/env'; const common = { - state: { - isCollapse: false, - isFullScren: false, - isLock: getStore({ name: 'isLock' }) || false, - lockPasswd: getStore({ name: 'lockPasswd' }) || '', - }, - actions: { - //获取字典公用类 - GetDic({ commit, state, dispatch }, dic) { - return new Promise((resolve, reject) => { - if (dic instanceof Array) { - Promise.all(dic.map(ele => getDic(ele))).then(data => { - let result = {}; - dic.forEach((ele, index) => { - result[ele] = data[index].data; - }) - resolve(result) - }) - } + state: { + isCollapse: false, + isFullScren: false, + isLock: getStore({ + name: 'isLock' + }) || false, + theme: getStore({ + name: 'theme' + }) || '#409EFF', + lockPasswd: getStore({ + name: 'lockPasswd' + }) || '', + }, + actions: { + //获取字典公用类 + GetDic({ + commit, + state, + dispatch + }, dic) { + return new Promise((resolve, reject) => { + if (dic instanceof Array) { + Promise.all(dic.map(ele => getDic(ele))).then(data => { + let result = {}; + dic.forEach((ele, index) => { + result[ele] = data[index].data; }) + resolve(result) + }) } - }, - mutations: { - SET_COLLAPSE: (state, action) => { - state.isCollapse = !state.isCollapse; - }, - SET_FULLSCREN: (state, action) => { - state.isFullScren = !state.isFullScren; - }, - SET_LOCK: (state, action) => { - state.isLock = true; - setStore({ name: 'isLock', content: state.isLock, type: 'session' }) - }, - SET_LOCK_PASSWD: (state, lockPasswd) => { - state.lockPasswd = lockPasswd; - setStore({ name: 'lockPasswd', content: state.lockPasswd, type: 'session' }) - }, - CLEAR_LOCK: (state, action) => { - state.isLock = false; - state.lockPasswd = ''; - removeStore({ name: 'lockPasswd' }); - removeStore({ name: 'isLock' }); - }, + }) } + }, + mutations: { + SET_COLLAPSE: (state, action) => { + state.isCollapse = !state.isCollapse; + }, + SET_FULLSCREN: (state, action) => { + state.isFullScren = !state.isFullScren; + }, + SET_LOCK: (state, action) => { + state.isLock = true; + setStore({ + name: 'isLock', + content: state.isLock, + type: 'session' + }) + }, + SET_THEME: (state, color) => { + state.theme = color; + setStore({ + name: 'theme', + content: state.theme, + }) + }, + SET_LOCK_PASSWD: (state, lockPasswd) => { + state.lockPasswd = lockPasswd; + setStore({ + name: 'lockPasswd', + content: state.lockPasswd, + type: 'session' + }) + }, + CLEAR_LOCK: (state, action) => { + state.isLock = false; + state.lockPasswd = ''; + removeStore({ + name: 'lockPasswd' + }); + removeStore({ + name: 'isLock' + }); + }, + } } -export default common \ No newline at end of file +export default common