| | |
|---|
| | | <template> |
|---|
| | | <el-color-picker |
|---|
| | | v-model="theme" |
|---|
| | | :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]" |
|---|
| | | :predefine="['#0E768F', '#CD1D4E', '#409EFF', '#1B8E70', '#7B61FF', '#E6843C', '#304156', '#212121']" |
|---|
| | | class="theme-picker" |
|---|
| | | popper-class="theme-picker-dropdown" |
|---|
| | | /> |
|---|
| | |
|---|
| | | |
|---|
| | | methods: { |
|---|
| | | async setTheme(val) { |
|---|
| | | const oldVal = this.chalk ? this.theme : ORIGINAL_THEME |
|---|
| | | if (typeof val !== 'string') return |
|---|
| | | // 先通知外层：主题色由 CSS 变量层（utils/theme.js）立即生效。 |
|---|
| | | // 原来的实现要等 CDN 拉取 theme-chalk 完成后才 emit，内网拉不到 unpkg |
|---|
| | | // 时 Promise 永不 resolve，导致"改主题没有任何反应"。 |
|---|
| | | this.$emit('change', val) |
|---|
| | | const oldVal = this.chalk ? this.theme : ORIGINAL_THEME |
|---|
| | | const themeCluster = this.getThemeCluster(val.replace('#', '')) |
|---|
| | | const originalCluster = this.getThemeCluster(oldVal.replace('#', '')) |
|---|
| | | |
|---|
| | |
|---|
| | | if (typeof innerText !== 'string') return |
|---|
| | | style.innerText = this.updateStyle(innerText, originalCluster, themeCluster) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.$emit('change', val) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | updateStyle(style, oldCluster, newCluster) { |
|---|
| | |
|---|
| | | getCSSString(url, variable) { |
|---|
| | | return new Promise(resolve => { |
|---|
| | | const xhr = new XMLHttpRequest() |
|---|
| | | const done = () => resolve() |
|---|
| | | xhr.onreadystatechange = () => { |
|---|
| | | if (xhr.readyState === 4 && xhr.status === 200) { |
|---|
| | | this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '') |
|---|
| | | if (xhr.readyState === 4) { |
|---|
| | | if (xhr.status === 200) { |
|---|
| | | this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '') |
|---|
| | | } |
|---|
| | | resolve() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // 内网/无外网时快速失败，避免 Promise 悬挂导致换肤卡住 |
|---|
| | | xhr.onerror = done |
|---|
| | | xhr.ontimeout = done |
|---|
| | | xhr.timeout = 4000 |
|---|
| | | xhr.open('GET', url) |
|---|
| | | xhr.send() |
|---|
| | | }) |
|---|
