{"remainingRequest":"D:\\源码\\vue-element-admin-master\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\源码\\vue-element-admin-master\\src\\components\\ThemePicker\\index.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\源码\\vue-element-admin-master\\src\\components\\ThemePicker\\index.vue","mtime":1649647926000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KCmNvbnN0IHZlcnNpb24gPSByZXF1aXJlKCdlbGVtZW50LXVpL3BhY2thZ2UuanNvbicpLnZlcnNpb24gLy8gZWxlbWVudC11aSB2ZXJzaW9uIGZyb20gbm9kZV9tb2R1bGVzCmNvbnN0IE9SSUdJTkFMX1RIRU1FID0gJyM0MDlFRkYnIC8vIGRlZmF1bHQgY29sb3IKCmV4cG9ydCBkZWZhdWx0IHsKICBkYXRhKCkgewogICAgcmV0dXJuIHsKICAgICAgY2hhbGs6ICcnLCAvLyBjb250ZW50IG9mIHRoZW1lLWNoYWxrIGNzcwogICAgICB0aGVtZTogJycKICAgIH0KICB9LAogIGNvbXB1dGVkOiB7CiAgICBkZWZhdWx0VGhlbWUoKSB7CiAgICAgIHJldHVybiB0aGlzLiRzdG9yZS5zdGF0ZS5zZXR0aW5ncy50aGVtZQogICAgfQogIH0sCiAgd2F0Y2g6IHsKICAgIGRlZmF1bHRUaGVtZTogewogICAgICBoYW5kbGVyOiBmdW5jdGlvbih2YWwsIG9sZFZhbCkgewogICAgICAgIHRoaXMudGhlbWUgPSB2YWwKICAgICAgfSwKICAgICAgaW1tZWRpYXRlOiB0cnVlCiAgICB9LAogICAgYXN5bmMgdGhlbWUodmFsKSB7CiAgICAgIGNvbnN0IG9sZFZhbCA9IHRoaXMuY2hhbGsgPyB0aGlzLnRoZW1lIDogT1JJR0lOQUxfVEhFTUUKICAgICAgaWYgKHR5cGVvZiB2YWwgIT09ICdzdHJpbmcnKSByZXR1cm4KICAgICAgY29uc3QgdGhlbWVDbHVzdGVyID0gdGhpcy5nZXRUaGVtZUNsdXN0ZXIodmFsLnJlcGxhY2UoJyMnLCAnJykpCiAgICAgIGNvbnN0IG9yaWdpbmFsQ2x1c3RlciA9IHRoaXMuZ2V0VGhlbWVDbHVzdGVyKG9sZFZhbC5yZXBsYWNlKCcjJywgJycpKQogICAgICBjb25zb2xlLmxvZyh0aGVtZUNsdXN0ZXIsIG9yaWdpbmFsQ2x1c3RlcikKCiAgICAgIGNvbnN0ICRtZXNzYWdlID0gdGhpcy4kbWVzc2FnZSh7CiAgICAgICAgbWVzc2FnZTogJyAgQ29tcGlsaW5nIHRoZSB0aGVtZScsCiAgICAgICAgY3VzdG9tQ2xhc3M6ICd0aGVtZS1tZXNzYWdlJywKICAgICAgICB0eXBlOiAnc3VjY2VzcycsCiAgICAgICAgZHVyYXRpb246IDAsCiAgICAgICAgaWNvbkNsYXNzOiAnZWwtaWNvbi1sb2FkaW5nJwogICAgICB9KQoKICAgICAgY29uc3QgZ2V0SGFuZGxlciA9ICh2YXJpYWJsZSwgaWQpID0+IHsKICAgICAgICByZXR1cm4gKCkgPT4gewogICAgICAgICAgY29uc3Qgb3JpZ2luYWxDbHVzdGVyID0gdGhpcy5nZXRUaGVtZUNsdXN0ZXIoT1JJR0lOQUxfVEhFTUUucmVwbGFjZSgnIycsICcnKSkKICAgICAgICAgIGNvbnN0IG5ld1N0eWxlID0gdGhpcy51cGRhdGVTdHlsZSh0aGlzW3ZhcmlhYmxlXSwgb3JpZ2luYWxDbHVzdGVyLCB0aGVtZUNsdXN0ZXIpCgogICAgICAgICAgbGV0IHN0eWxlVGFnID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoaWQpCiAgICAgICAgICBpZiAoIXN0eWxlVGFnKSB7CiAgICAgICAgICAgIHN0eWxlVGFnID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnc3R5bGUnKQogICAgICAgICAgICBzdHlsZVRhZy5zZXRBdHRyaWJ1dGUoJ2lkJywgaWQpCiAgICAgICAgICAgIGRvY3VtZW50LmhlYWQuYXBwZW5kQ2hpbGQoc3R5bGVUYWcpCiAgICAgICAgICB9CiAgICAgICAgICBzdHlsZVRhZy5pbm5lclRleHQgPSBuZXdTdHlsZQogICAgICAgIH0KICAgICAgfQoKICAgICAgaWYgKCF0aGlzLmNoYWxrKSB7CiAgICAgICAgY29uc3QgdXJsID0gYGh0dHBzOi8vdW5wa2cuY29tL2VsZW1lbnQtdWlAJHt2ZXJzaW9ufS9saWIvdGhlbWUtY2hhbGsvaW5kZXguY3NzYAogICAgICAgIGF3YWl0IHRoaXMuZ2V0Q1NTU3RyaW5nKHVybCwgJ2NoYWxrJykKICAgICAgfQoKICAgICAgY29uc3QgY2hhbGtIYW5kbGVyID0gZ2V0SGFuZGxlcignY2hhbGsnLCAnY2hhbGstc3R5bGUnKQoKICAgICAgY2hhbGtIYW5kbGVyKCkKCiAgICAgIGNvbnN0IHN0eWxlcyA9IFtdLnNsaWNlLmNhbGwoZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgnc3R5bGUnKSkKICAgICAgICAuZmlsdGVyKHN0eWxlID0+IHsKICAgICAgICAgIGNvbnN0IHRleHQgPSBzdHlsZS5pbm5lclRleHQKICAgICAgICAgIHJldHVybiBuZXcgUmVnRXhwKG9sZFZhbCwgJ2knKS50ZXN0KHRleHQpICYmICEvQ2hhbGsgVmFyaWFibGVzLy50ZXN0KHRleHQpCiAgICAgICAgfSkKICAgICAgc3R5bGVzLmZvckVhY2goc3R5bGUgPT4gewogICAgICAgIGNvbnN0IHsgaW5uZXJUZXh0IH0gPSBzdHlsZQogICAgICAgIGlmICh0eXBlb2YgaW5uZXJUZXh0ICE9PSAnc3RyaW5nJykgcmV0dXJuCiAgICAgICAgc3R5bGUuaW5uZXJUZXh0ID0gdGhpcy51cGRhdGVTdHlsZShpbm5lclRleHQsIG9yaWdpbmFsQ2x1c3RlciwgdGhlbWVDbHVzdGVyKQogICAgICB9KQoKICAgICAgdGhpcy4kZW1pdCgnY2hhbmdlJywgdmFsKQoKICAgICAgJG1lc3NhZ2UuY2xvc2UoKQogICAgfQogIH0sCgogIG1ldGhvZHM6IHsKICAgIHVwZGF0ZVN0eWxlKHN0eWxlLCBvbGRDbHVzdGVyLCBuZXdDbHVzdGVyKSB7CiAgICAgIGxldCBuZXdTdHlsZSA9IHN0eWxlCiAgICAgIG9sZENsdXN0ZXIuZm9yRWFjaCgoY29sb3IsIGluZGV4KSA9PiB7CiAgICAgICAgbmV3U3R5bGUgPSBuZXdTdHlsZS5yZXBsYWNlKG5ldyBSZWdFeHAoY29sb3IsICdpZycpLCBuZXdDbHVzdGVyW2luZGV4XSkKICAgICAgfSkKICAgICAgcmV0dXJuIG5ld1N0eWxlCiAgICB9LAoKICAgIGdldENTU1N0cmluZyh1cmwsIHZhcmlhYmxlKSB7CiAgICAgIHJldHVybiBuZXcgUHJvbWlzZShyZXNvbHZlID0+IHsKICAgICAgICBjb25zdCB4aHIgPSBuZXcgWE1MSHR0cFJlcXVlc3QoKQogICAgICAgIHhoci5vbnJlYWR5c3RhdGVjaGFuZ2UgPSAoKSA9PiB7CiAgICAgICAgICBpZiAoeGhyLnJlYWR5U3RhdGUgPT09IDQgJiYgeGhyLnN0YXR1cyA9PT0gMjAwKSB7CiAgICAgICAgICAgIHRoaXNbdmFyaWFibGVdID0geGhyLnJlc3BvbnNlVGV4dC5yZXBsYWNlKC9AZm9udC1mYWNle1tefV0rfS8sICcnKQogICAgICAgICAgICByZXNvbHZlKCkKICAgICAgICAgIH0KICAgICAgICB9CiAgICAgICAgeGhyLm9wZW4oJ0dFVCcsIHVybCkKICAgICAgICB4aHIuc2VuZCgpCiAgICAgIH0pCiAgICB9LAoKICAgIGdldFRoZW1lQ2x1c3Rlcih0aGVtZSkgewogICAgICBjb25zdCB0aW50Q29sb3IgPSAoY29sb3IsIHRpbnQpID0+IHsKICAgICAgICBsZXQgcmVkID0gcGFyc2VJbnQoY29sb3Iuc2xpY2UoMCwgMiksIDE2KQogICAgICAgIGxldCBncmVlbiA9IHBhcnNlSW50KGNvbG9yLnNsaWNlKDIsIDQpLCAxNikKICAgICAgICBsZXQgYmx1ZSA9IHBhcnNlSW50KGNvbG9yLnNsaWNlKDQsIDYpLCAxNikKCiAgICAgICAgaWYgKHRpbnQgPT09IDApIHsgLy8gd2hlbiBwcmltYXJ5IGNvbG9yIGlzIGluIGl0cyByZ2Igc3BhY2UKICAgICAgICAgIHJldHVybiBbcmVkLCBncmVlbiwgYmx1ZV0uam9pbignLCcpCiAgICAgICAgfSBlbHNlIHsKICAgICAgICAgIHJlZCArPSBNYXRoLnJvdW5kKHRpbnQgKiAoMjU1IC0gcmVkKSkKICAgICAgICAgIGdyZWVuICs9IE1hdGgucm91bmQodGludCAqICgyNTUgLSBncmVlbikpCiAgICAgICAgICBibHVlICs9IE1hdGgucm91bmQodGludCAqICgyNTUgLSBibHVlKSkKCiAgICAgICAgICByZWQgPSByZWQudG9TdHJpbmcoMTYpCiAgICAgICAgICBncmVlbiA9IGdyZWVuLnRvU3RyaW5nKDE2KQogICAgICAgICAgYmx1ZSA9IGJsdWUudG9TdHJpbmcoMTYpCgogICAgICAgICAgcmV0dXJuIGAjJHtyZWR9JHtncmVlbn0ke2JsdWV9YAogICAgICAgIH0KICAgICAgfQoKICAgICAgY29uc3Qgc2hhZGVDb2xvciA9IChjb2xvciwgc2hhZGUpID0+IHsKICAgICAgICBsZXQgcmVkID0gcGFyc2VJbnQoY29sb3Iuc2xpY2UoMCwgMiksIDE2KQogICAgICAgIGxldCBncmVlbiA9IHBhcnNlSW50KGNvbG9yLnNsaWNlKDIsIDQpLCAxNikKICAgICAgICBsZXQgYmx1ZSA9IHBhcnNlSW50KGNvbG9yLnNsaWNlKDQsIDYpLCAxNikKCiAgICAgICAgcmVkID0gTWF0aC5yb3VuZCgoMSAtIHNoYWRlKSAqIHJlZCkKICAgICAgICBncmVlbiA9IE1hdGgucm91bmQoKDEgLSBzaGFkZSkgKiBncmVlbikKICAgICAgICBibHVlID0gTWF0aC5yb3VuZCgoMSAtIHNoYWRlKSAqIGJsdWUpCgogICAgICAgIHJlZCA9IHJlZC50b1N0cmluZygxNikKICAgICAgICBncmVlbiA9IGdyZWVuLnRvU3RyaW5nKDE2KQogICAgICAgIGJsdWUgPSBibHVlLnRvU3RyaW5nKDE2KQoKICAgICAgICByZXR1cm4gYCMke3JlZH0ke2dyZWVufSR7Ymx1ZX1gCiAgICAgIH0KCiAgICAgIGNvbnN0IGNsdXN0ZXJzID0gW3RoZW1lXQogICAgICBmb3IgKGxldCBpID0gMDsgaSA8PSA5OyBpKyspIHsKICAgICAgICBjbHVzdGVycy5wdXNoKHRpbnRDb2xvcih0aGVtZSwgTnVtYmVyKChpIC8gMTApLnRvRml4ZWQoMikpKSkKICAgICAgfQogICAgICBjbHVzdGVycy5wdXNoKHNoYWRlQ29sb3IodGhlbWUsIDAuMSkpCiAgICAgIHJldHVybiBjbHVzdGVycwogICAgfQogIH0KfQo="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;AAUA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/components/ThemePicker","sourcesContent":["<template>\n  <el-color-picker\n    v-model=\"theme\"\n    :predefine=\"['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]\"\n    class=\"theme-picker\"\n    popper-class=\"theme-picker-dropdown\"\n  />\n</template>\n\n<script>\nconst version = require('element-ui/package.json').version // element-ui version from node_modules\nconst ORIGINAL_THEME = '#409EFF' // default color\n\nexport default {\n  data() {\n    return {\n      chalk: '', // content of theme-chalk css\n      theme: ''\n    }\n  },\n  computed: {\n    defaultTheme() {\n      return this.$store.state.settings.theme\n    }\n  },\n  watch: {\n    defaultTheme: {\n      handler: function(val, oldVal) {\n        this.theme = val\n      },\n      immediate: true\n    },\n    async theme(val) {\n      const oldVal = this.chalk ? this.theme : ORIGINAL_THEME\n      if (typeof val !== 'string') return\n      const themeCluster = this.getThemeCluster(val.replace('#', ''))\n      const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))\n      console.log(themeCluster, originalCluster)\n\n      const $message = this.$message({\n        message: '  Compiling the theme',\n        customClass: 'theme-message',\n        type: 'success',\n        duration: 0,\n        iconClass: 'el-icon-loading'\n      })\n\n      const getHandler = (variable, id) => {\n        return () => {\n          const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))\n          const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)\n\n          let styleTag = document.getElementById(id)\n          if (!styleTag) {\n            styleTag = document.createElement('style')\n            styleTag.setAttribute('id', id)\n            document.head.appendChild(styleTag)\n          }\n          styleTag.innerText = newStyle\n        }\n      }\n\n      if (!this.chalk) {\n        const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`\n        await this.getCSSString(url, 'chalk')\n      }\n\n      const chalkHandler = getHandler('chalk', 'chalk-style')\n\n      chalkHandler()\n\n      const styles = [].slice.call(document.querySelectorAll('style'))\n        .filter(style => {\n          const text = style.innerText\n          return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)\n        })\n      styles.forEach(style => {\n        const { innerText } = style\n        if (typeof innerText !== 'string') return\n        style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)\n      })\n\n      this.$emit('change', val)\n\n      $message.close()\n    }\n  },\n\n  methods: {\n    updateStyle(style, oldCluster, newCluster) {\n      let newStyle = style\n      oldCluster.forEach((color, index) => {\n        newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])\n      })\n      return newStyle\n    },\n\n    getCSSString(url, variable) {\n      return new Promise(resolve => {\n        const xhr = new XMLHttpRequest()\n        xhr.onreadystatechange = () => {\n          if (xhr.readyState === 4 && xhr.status === 200) {\n            this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')\n            resolve()\n          }\n        }\n        xhr.open('GET', url)\n        xhr.send()\n      })\n    },\n\n    getThemeCluster(theme) {\n      const tintColor = (color, tint) => {\n        let red = parseInt(color.slice(0, 2), 16)\n        let green = parseInt(color.slice(2, 4), 16)\n        let blue = parseInt(color.slice(4, 6), 16)\n\n        if (tint === 0) { // when primary color is in its rgb space\n          return [red, green, blue].join(',')\n        } else {\n          red += Math.round(tint * (255 - red))\n          green += Math.round(tint * (255 - green))\n          blue += Math.round(tint * (255 - blue))\n\n          red = red.toString(16)\n          green = green.toString(16)\n          blue = blue.toString(16)\n\n          return `#${red}${green}${blue}`\n        }\n      }\n\n      const shadeColor = (color, shade) => {\n        let red = parseInt(color.slice(0, 2), 16)\n        let green = parseInt(color.slice(2, 4), 16)\n        let blue = parseInt(color.slice(4, 6), 16)\n\n        red = Math.round((1 - shade) * red)\n        green = Math.round((1 - shade) * green)\n        blue = Math.round((1 - shade) * blue)\n\n        red = red.toString(16)\n        green = green.toString(16)\n        blue = blue.toString(16)\n\n        return `#${red}${green}${blue}`\n      }\n\n      const clusters = [theme]\n      for (let i = 0; i <= 9; i++) {\n        clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))\n      }\n      clusters.push(shadeColor(theme, 0.1))\n      return clusters\n    }\n  }\n}\n</script>\n\n<style>\n.theme-message,\n.theme-picker-dropdown {\n  z-index: 99999 !important;\n}\n\n.theme-picker .el-color-picker__trigger {\n  height: 26px !important;\n  width: 26px !important;\n  padding: 2px;\n}\n\n.theme-picker-dropdown .el-color-dropdown__link-btn {\n  display: none;\n}\n</style>\n"]}]}