forked from liweijie/education
1 line
12 KiB
JSON
1 line
12 KiB
JSON
{"remainingRequest":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\Admin\\Desktop\\education\\frontend\\src\\components\\ThemePicker\\index.vue?vue&type=script&lang=js","dependencies":[{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\src\\components\\ThemePicker\\index.vue","mtime":1787309162960},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1787309791955},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\babel-loader\\lib\\index.js","mtime":1787309793142},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1787309791955},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\vue-loader\\lib\\index.js","mtime":1787309793790}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KDQpjb25zdCBPUklHSU5BTF9USEVNRSA9ICcjMDA4NzVBJyAvLyBkZWZhdWx0IGNvbG9yDQoNCmV4cG9ydCBkZWZhdWx0IHsNCiAgZGF0YSgpIHsNCiAgICByZXR1cm4gew0KICAgICAgY2hhbGs6ICcnLCAvLyBjb250ZW50IG9mIHRoZW1lLWNoYWxrIGNzcw0KICAgICAgdGhlbWU6ICcnDQogICAgfQ0KICB9LA0KICBjb21wdXRlZDogew0KICAgIGRlZmF1bHRUaGVtZSgpIHsNCiAgICAgIHJldHVybiB0aGlzLiRzdG9yZS5zdGF0ZS5zZXR0aW5ncy50aGVtZQ0KICAgIH0NCiAgfSwNCiAgd2F0Y2g6IHsNCiAgICBkZWZhdWx0VGhlbWU6IHsNCiAgICAgIGhhbmRsZXI6IGZ1bmN0aW9uKHZhbCwgb2xkVmFsKSB7DQogICAgICAgIHRoaXMudGhlbWUgPSB2YWwNCiAgICAgIH0sDQogICAgICBpbW1lZGlhdGU6IHRydWUNCiAgICB9LA0KICAgIGFzeW5jIHRoZW1lKHZhbCkgew0KICAgICAgYXdhaXQgdGhpcy5zZXRUaGVtZSh2YWwpDQogICAgfQ0KICB9LA0KICBjcmVhdGVkKCkgew0KICAgIGlmICh0aGlzLmRlZmF1bHRUaGVtZSAhPT0gT1JJR0lOQUxfVEhFTUUpIHsNCiAgICAgIHRoaXMuc2V0VGhlbWUodGhpcy5kZWZhdWx0VGhlbWUpDQogICAgfQ0KICB9LA0KICBtZXRob2RzOiB7DQogICAgYXN5bmMgc2V0VGhlbWUodmFsKSB7DQogICAgICBjb25zdCBvbGRWYWwgPSB0aGlzLmNoYWxrID8gdGhpcy50aGVtZSA6IE9SSUdJTkFMX1RIRU1FDQogICAgICBpZiAodHlwZW9mIHZhbCAhPT0gJ3N0cmluZycpIHJldHVybg0KICAgICAgY29uc3QgdGhlbWVDbHVzdGVyID0gdGhpcy5nZXRUaGVtZUNsdXN0ZXIodmFsLnJlcGxhY2UoJyMnLCAnJykpDQogICAgICBjb25zdCBvcmlnaW5hbENsdXN0ZXIgPSB0aGlzLmdldFRoZW1lQ2x1c3RlcihvbGRWYWwucmVwbGFjZSgnIycsICcnKSkNCg0KICAgICAgY29uc3QgZ2V0SGFuZGxlciA9ICh2YXJpYWJsZSwgaWQpID0+IHsNCiAgICAgICAgcmV0dXJuICgpID0+IHsNCiAgICAgICAgICBjb25zdCBvcmlnaW5hbENsdXN0ZXIgPSB0aGlzLmdldFRoZW1lQ2x1c3RlcihPUklHSU5BTF9USEVNRS5yZXBsYWNlKCcjJywgJycpKQ0KICAgICAgICAgIGNvbnN0IG5ld1N0eWxlID0gdGhpcy51cGRhdGVTdHlsZSh0aGlzW3ZhcmlhYmxlXSwgb3JpZ2luYWxDbHVzdGVyLCB0aGVtZUNsdXN0ZXIpDQoNCiAgICAgICAgICBsZXQgc3R5bGVUYWcgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChpZCkNCiAgICAgICAgICBpZiAoIXN0eWxlVGFnKSB7DQogICAgICAgICAgICBzdHlsZVRhZyA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3N0eWxlJykNCiAgICAgICAgICAgIHN0eWxlVGFnLnNldEF0dHJpYnV0ZSgnaWQnLCBpZCkNCiAgICAgICAgICAgIGRvY3VtZW50LmhlYWQuYXBwZW5kQ2hpbGQoc3R5bGVUYWcpDQogICAgICAgICAgfQ0KICAgICAgICAgIHN0eWxlVGFnLmlubmVyVGV4dCA9IG5ld1N0eWxlDQogICAgICAgIH0NCiAgICAgIH0NCg0KICAgICAgaWYgKCF0aGlzLmNoYWxrKSB7DQogICAgICAgIGNvbnN0IHVybCA9IGAvc3R5bGVzL3RoZW1lLWNoYWxrL2luZGV4LmNzc2ANCiAgICAgICAgYXdhaXQgdGhpcy5nZXRDU1NTdHJpbmcodXJsLCAnY2hhbGsnKQ0KICAgICAgfQ0KDQogICAgICBjb25zdCBjaGFsa0hhbmRsZXIgPSBnZXRIYW5kbGVyKCdjaGFsaycsICdjaGFsay1zdHlsZScpDQogICAgICBjaGFsa0hhbmRsZXIoKQ0KDQogICAgICBjb25zdCBzdHlsZXMgPSBbXS5zbGljZS5jYWxsKGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoJ3N0eWxlJykpDQogICAgICAgIC5maWx0ZXIoc3R5bGUgPT4gew0KICAgICAgICAgIGNvbnN0IHRleHQgPSBzdHlsZS5pbm5lclRleHQNCiAgICAgICAgICByZXR1cm4gbmV3IFJlZ0V4cChvbGRWYWwsICdpJykudGVzdCh0ZXh0KSAmJiAhL0NoYWxrIFZhcmlhYmxlcy8udGVzdCh0ZXh0KQ0KICAgICAgICB9KQ0KICAgICAgc3R5bGVzLmZvckVhY2goc3R5bGUgPT4gew0KICAgICAgICBjb25zdCB7IGlubmVyVGV4dCB9ID0gc3R5bGUNCiAgICAgICAgaWYgKHR5cGVvZiBpbm5lclRleHQgIT09ICdzdHJpbmcnKSByZXR1cm4NCiAgICAgICAgc3R5bGUuaW5uZXJUZXh0ID0gdGhpcy51cGRhdGVTdHlsZShpbm5lclRleHQsIG9yaWdpbmFsQ2x1c3RlciwgdGhlbWVDbHVzdGVyKQ0KICAgICAgfSkNCg0KICAgICAgdGhpcy4kZW1pdCgnY2hhbmdlJywgdmFsKQ0KICAgIH0sDQoNCiAgICB1cGRhdGVTdHlsZShzdHlsZSwgb2xkQ2x1c3RlciwgbmV3Q2x1c3Rlcikgew0KICAgICAgbGV0IG5ld1N0eWxlID0gc3R5bGUNCiAgICAgIG9sZENsdXN0ZXIuZm9yRWFjaCgoY29sb3IsIGluZGV4KSA9PiB7DQogICAgICAgIG5ld1N0eWxlID0gbmV3U3R5bGUucmVwbGFjZShuZXcgUmVnRXhwKGNvbG9yLCAnaWcnKSwgbmV3Q2x1c3RlcltpbmRleF0pDQogICAgICB9KQ0KICAgICAgcmV0dXJuIG5ld1N0eWxlDQogICAgfSwNCg0KICAgIGdldENTU1N0cmluZyh1cmwsIHZhcmlhYmxlKSB7DQogICAgICByZXR1cm4gbmV3IFByb21pc2UocmVzb2x2ZSA9PiB7DQogICAgICAgIGNvbnN0IHhociA9IG5ldyBYTUxIdHRwUmVxdWVzdCgpDQogICAgICAgIHhoci5vbnJlYWR5c3RhdGVjaGFuZ2UgPSAoKSA9PiB7DQogICAgICAgICAgaWYgKHhoci5yZWFkeVN0YXRlID09PSA0ICYmIHhoci5zdGF0dXMgPT09IDIwMCkgew0KICAgICAgICAgICAgdGhpc1t2YXJpYWJsZV0gPSB4aHIucmVzcG9uc2VUZXh0LnJlcGxhY2UoL0Bmb250LWZhY2V7W159XSt9LywgJycpDQogICAgICAgICAgICByZXNvbHZlKCkNCiAgICAgICAgICB9DQogICAgICAgIH0NCiAgICAgICAgeGhyLm9wZW4oJ0dFVCcsIHVybCkNCiAgICAgICAgeGhyLnNlbmQoKQ0KICAgICAgfSkNCiAgICB9LA0KDQogICAgZ2V0VGhlbWVDbHVzdGVyKHRoZW1lKSB7DQogICAgICBjb25zdCB0aW50Q29sb3IgPSAoY29sb3IsIHRpbnQpID0+IHsNCiAgICAgICAgbGV0IHJlZCA9IHBhcnNlSW50KGNvbG9yLnNsaWNlKDAsIDIpLCAxNikNCiAgICAgICAgbGV0IGdyZWVuID0gcGFyc2VJbnQoY29sb3Iuc2xpY2UoMiwgNCksIDE2KQ0KICAgICAgICBsZXQgYmx1ZSA9IHBhcnNlSW50KGNvbG9yLnNsaWNlKDQsIDYpLCAxNikNCg0KICAgICAgICBpZiAodGludCA9PT0gMCkgeyAvLyB3aGVuIHByaW1hcnkgY29sb3IgaXMgaW4gaXRzIHJnYiBzcGFjZQ0KICAgICAgICAgIHJldHVybiBbcmVkLCBncmVlbiwgYmx1ZV0uam9pbignLCcpDQogICAgICAgIH0gZWxzZSB7DQogICAgICAgICAgcmVkICs9IE1hdGgucm91bmQodGludCAqICgyNTUgLSByZWQpKQ0KICAgICAgICAgIGdyZWVuICs9IE1hdGgucm91bmQodGludCAqICgyNTUgLSBncmVlbikpDQogICAgICAgICAgYmx1ZSArPSBNYXRoLnJvdW5kKHRpbnQgKiAoMjU1IC0gYmx1ZSkpDQoNCiAgICAgICAgICByZWQgPSByZWQudG9TdHJpbmcoMTYpDQogICAgICAgICAgZ3JlZW4gPSBncmVlbi50b1N0cmluZygxNikNCiAgICAgICAgICBibHVlID0gYmx1ZS50b1N0cmluZygxNikNCg0KICAgICAgICAgIHJldHVybiBgIyR7cmVkfSR7Z3JlZW59JHtibHVlfWANCiAgICAgICAgfQ0KICAgICAgfQ0KDQogICAgICBjb25zdCBzaGFkZUNvbG9yID0gKGNvbG9yLCBzaGFkZSkgPT4gew0KICAgICAgICBsZXQgcmVkID0gcGFyc2VJbnQoY29sb3Iuc2xpY2UoMCwgMiksIDE2KQ0KICAgICAgICBsZXQgZ3JlZW4gPSBwYXJzZUludChjb2xvci5zbGljZSgyLCA0KSwgMTYpDQogICAgICAgIGxldCBibHVlID0gcGFyc2VJbnQoY29sb3Iuc2xpY2UoNCwgNiksIDE2KQ0KDQogICAgICAgIHJlZCA9IE1hdGgucm91bmQoKDEgLSBzaGFkZSkgKiByZWQpDQogICAgICAgIGdyZWVuID0gTWF0aC5yb3VuZCgoMSAtIHNoYWRlKSAqIGdyZWVuKQ0KICAgICAgICBibHVlID0gTWF0aC5yb3VuZCgoMSAtIHNoYWRlKSAqIGJsdWUpDQoNCiAgICAgICAgcmVkID0gcmVkLnRvU3RyaW5nKDE2KQ0KICAgICAgICBncmVlbiA9IGdyZWVuLnRvU3RyaW5nKDE2KQ0KICAgICAgICBibHVlID0gYmx1ZS50b1N0cmluZygxNikNCg0KICAgICAgICByZXR1cm4gYCMke3JlZH0ke2dyZWVufSR7Ymx1ZX1gDQogICAgICB9DQoNCiAgICAgIGNvbnN0IGNsdXN0ZXJzID0gW3RoZW1lXQ0KICAgICAgZm9yIChsZXQgaSA9IDA7IGkgPD0gOTsgaSsrKSB7DQogICAgICAgIGNsdXN0ZXJzLnB1c2godGludENvbG9yKHRoZW1lLCBOdW1iZXIoKGkgLyAxMCkudG9GaXhlZCgyKSkpKQ0KICAgICAgfQ0KICAgICAgY2x1c3RlcnMucHVzaChzaGFkZUNvbG9yKHRoZW1lLCAwLjEpKQ0KICAgICAgcmV0dXJuIGNsdXN0ZXJzDQogICAgfQ0KICB9DQp9DQo="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;AAUA;;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;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>\r\n <el-color-picker\r\n v-model=\"theme\"\r\n :predefine=\"['#00875A', '#006B47', '#007F4F', '#11a983', '#13c2c2', '#6959CD', '#f5222d', '#212121', ]\"\r\n class=\"theme-picker\"\r\n popper-class=\"theme-picker-dropdown\"\r\n />\r\n</template>\r\n\r\n<script>\r\nconst ORIGINAL_THEME = '#00875A' // default color\r\n\r\nexport default {\r\n data() {\r\n return {\r\n chalk: '', // content of theme-chalk css\r\n theme: ''\r\n }\r\n },\r\n computed: {\r\n defaultTheme() {\r\n return this.$store.state.settings.theme\r\n }\r\n },\r\n watch: {\r\n defaultTheme: {\r\n handler: function(val, oldVal) {\r\n this.theme = val\r\n },\r\n immediate: true\r\n },\r\n async theme(val) {\r\n await this.setTheme(val)\r\n }\r\n },\r\n created() {\r\n if (this.defaultTheme !== ORIGINAL_THEME) {\r\n this.setTheme(this.defaultTheme)\r\n }\r\n },\r\n methods: {\r\n async setTheme(val) {\r\n const oldVal = this.chalk ? this.theme : ORIGINAL_THEME\r\n if (typeof val !== 'string') return\r\n const themeCluster = this.getThemeCluster(val.replace('#', ''))\r\n const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))\r\n\r\n const getHandler = (variable, id) => {\r\n return () => {\r\n const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))\r\n const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)\r\n\r\n let styleTag = document.getElementById(id)\r\n if (!styleTag) {\r\n styleTag = document.createElement('style')\r\n styleTag.setAttribute('id', id)\r\n document.head.appendChild(styleTag)\r\n }\r\n styleTag.innerText = newStyle\r\n }\r\n }\r\n\r\n if (!this.chalk) {\r\n const url = `/styles/theme-chalk/index.css`\r\n await this.getCSSString(url, 'chalk')\r\n }\r\n\r\n const chalkHandler = getHandler('chalk', 'chalk-style')\r\n chalkHandler()\r\n\r\n const styles = [].slice.call(document.querySelectorAll('style'))\r\n .filter(style => {\r\n const text = style.innerText\r\n return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)\r\n })\r\n styles.forEach(style => {\r\n const { innerText } = style\r\n if (typeof innerText !== 'string') return\r\n style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)\r\n })\r\n\r\n this.$emit('change', val)\r\n },\r\n\r\n updateStyle(style, oldCluster, newCluster) {\r\n let newStyle = style\r\n oldCluster.forEach((color, index) => {\r\n newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])\r\n })\r\n return newStyle\r\n },\r\n\r\n getCSSString(url, variable) {\r\n return new Promise(resolve => {\r\n const xhr = new XMLHttpRequest()\r\n xhr.onreadystatechange = () => {\r\n if (xhr.readyState === 4 && xhr.status === 200) {\r\n this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')\r\n resolve()\r\n }\r\n }\r\n xhr.open('GET', url)\r\n xhr.send()\r\n })\r\n },\r\n\r\n getThemeCluster(theme) {\r\n const tintColor = (color, tint) => {\r\n let red = parseInt(color.slice(0, 2), 16)\r\n let green = parseInt(color.slice(2, 4), 16)\r\n let blue = parseInt(color.slice(4, 6), 16)\r\n\r\n if (tint === 0) { // when primary color is in its rgb space\r\n return [red, green, blue].join(',')\r\n } else {\r\n red += Math.round(tint * (255 - red))\r\n green += Math.round(tint * (255 - green))\r\n blue += Math.round(tint * (255 - blue))\r\n\r\n red = red.toString(16)\r\n green = green.toString(16)\r\n blue = blue.toString(16)\r\n\r\n return `#${red}${green}${blue}`\r\n }\r\n }\r\n\r\n const shadeColor = (color, shade) => {\r\n let red = parseInt(color.slice(0, 2), 16)\r\n let green = parseInt(color.slice(2, 4), 16)\r\n let blue = parseInt(color.slice(4, 6), 16)\r\n\r\n red = Math.round((1 - shade) * red)\r\n green = Math.round((1 - shade) * green)\r\n blue = Math.round((1 - shade) * blue)\r\n\r\n red = red.toString(16)\r\n green = green.toString(16)\r\n blue = blue.toString(16)\r\n\r\n return `#${red}${green}${blue}`\r\n }\r\n\r\n const clusters = [theme]\r\n for (let i = 0; i <= 9; i++) {\r\n clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))\r\n }\r\n clusters.push(shadeColor(theme, 0.1))\r\n return clusters\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style>\r\n.theme-message,\r\n.theme-picker-dropdown {\r\n z-index: 99999 !important;\r\n}\r\n\r\n.theme-picker .el-color-picker__trigger {\r\n height: 26px !important;\r\n width: 26px !important;\r\n padding: 2px;\r\n}\r\n\r\n.theme-picker-dropdown .el-color-dropdown__link-btn {\r\n display: none;\r\n}\r\n</style>\r\n"]}]} |