update avue1.3.3 theme cookie

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

src/page/index/top/top-theme.vue

@@ -1,170 +1,17 @@
 <template>
-  <el-color-picker size="small" class="theme-picker" popper-class="theme-picker-dropdown" v-model="theme"></el-color-picker>
+  <el-color-picker size="small" class="theme-picker" popper-class="theme-picker-dropdown" v-model="themeVal"></el-color-picker>
 </template>
 
 <script>
-const version = require("element-ui/package.json").version; // element-ui version from node_modules
-const ORIGINAL_THEME = "#409EFF"; // default color
+import theme from "@/mixins/theme";
 
 export default {
+  name: "topTheme",
+  mixins: [theme()],
   data() {
     return {
-      chalk: "",
-      theme: ORIGINAL_THEME
+      chalk: ""
     };
-  },
-  watch: {
-    theme(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
-        );
-      });
-      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) {
-          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;
-    }
   }
 };
 </script>

src/page/login/index.vue

@@ -15,7 +15,9 @@
     </div>
     <div class="login-border  animated fadeInRight">
       <div class="login-main">
-        <h4 class="login-title"> Pig 微服务快速开发框架</h4>
+        <h4 class="login-title"> Pig 微服务快速开发框架
+          <top-theme></top-theme>
+        </h4>
         <el-tabs v-model="activeName" @tab-click="handleClick">
           <el-tab-pane label="用户密码" name="user">
             <userLogin></userLogin>
@@ -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: {}
 };
 </script>
 
@@ -109,7 +113,7 @@ export default {
 .login-title {
   margin: 0 0 20px;
   text-align: center;
-  color: #3080fe;
+  color: #409eff;
   letter-spacing: 3px;
 }
 .login-submit {

src/store/getters.js

@@ -1,6 +1,6 @@
-
 const getters = {
   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,

src/store/modules/common.js

@@ -1,19 +1,39 @@
-
-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' }) || '',
+    isLock: getStore({
+      name: 'isLock'
+    }) || false,
+    theme: getStore({
+      name: 'theme'
+    }) || '#409EFF',
+    lockPasswd: getStore({
+      name: 'lockPasswd'
+    }) || '',
   },
   actions: {
     //获取字典公用类
-        GetDic({ commit, state, dispatch }, dic) {
+    GetDic({
+      commit,
+      state,
+      dispatch
+    }, dic) {
       return new Promise((resolve, reject) => {
         if (dic instanceof Array) {
           Promise.all(dic.map(ele => getDic(ele))).then(data => {
@@ -36,17 +56,36 @@ const common = {
     },
     SET_LOCK: (state, action) => {
       state.isLock = true;
-            setStore({ name: 'isLock', content: state.isLock, type: 'session' })
+      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' })
+      setStore({
+        name: 'lockPasswd',
+        content: state.lockPasswd,
+        type: 'session'
+      })
     },
     CLEAR_LOCK: (state, action) => {
       state.isLock = false;
       state.lockPasswd = '';
-            removeStore({ name: 'lockPasswd' });
-            removeStore({ name: 'isLock' });
+      removeStore({
+        name: 'lockPasswd'
+      });
+      removeStore({
+        name: 'isLock'
+      });
     },
   }
 }