提取ele-pro修改源码
This commit is contained in:
377
dynamicTheme.js
Normal file
377
dynamicTheme.js
Normal file
@@ -0,0 +1,377 @@
|
||||
/** ele admin pro dynamic theme plugin license by http://eleadmin.com */
|
||||
/**
|
||||
* 需要修改的less变量
|
||||
*/
|
||||
const variables = {
|
||||
// Blue
|
||||
'@blue-1': 'var(--blue-1)',
|
||||
'@blue-2': 'var(--blue-2)',
|
||||
'@blue-3': 'var(--blue-3)',
|
||||
'@blue-4': 'var(--blue-4)',
|
||||
'@blue-5': 'var(--blue-5)',
|
||||
'@blue-6': 'var(--blue-6)',
|
||||
'@blue-7': 'var(--blue-7)',
|
||||
'@blue-8': 'var(--blue-8)',
|
||||
'@blue-9': 'var(--blue-9)',
|
||||
'@blue-10': 'var(--blue-10)',
|
||||
// Green
|
||||
'@green-1': 'var(--green-1)',
|
||||
'@green-2': 'var(--green-2)',
|
||||
'@green-3': 'var(--green-3)',
|
||||
'@green-4': 'var(--green-4)',
|
||||
'@green-5': 'var(--green-5)',
|
||||
'@green-6': 'var(--green-6)',
|
||||
'@green-7': 'var(--green-7)',
|
||||
'@green-8': 'var(--green-8)',
|
||||
'@green-9': 'var(--green-9)',
|
||||
'@green-10': 'var(--green-10)',
|
||||
// Red
|
||||
'@red-1': 'var(--red-1)',
|
||||
'@red-2': 'var(--red-2)',
|
||||
'@red-3': 'var(--red-3)',
|
||||
'@red-4': 'var(--red-4)',
|
||||
'@red-5': 'var(--red-5)',
|
||||
'@red-6': 'var(--red-6)',
|
||||
'@red-7': 'var(--red-7)',
|
||||
'@red-8': 'var(--red-8)',
|
||||
'@red-9': 'var(--red-9)',
|
||||
'@red-10': 'var(--red-10)',
|
||||
// Gold
|
||||
'@gold-1': 'var(--gold-1)',
|
||||
'@gold-2': 'var(--gold-2)',
|
||||
'@gold-3': 'var(--gold-3)',
|
||||
'@gold-4': 'var(--gold-4)',
|
||||
'@gold-5': 'var(--gold-5)',
|
||||
'@gold-6': 'var(--gold-6)',
|
||||
'@gold-7': 'var(--gold-7)',
|
||||
'@gold-8': 'var(--gold-8)',
|
||||
'@gold-9': 'var(--gold-9)',
|
||||
'@gold-10': 'var(--gold-10)',
|
||||
// Purple
|
||||
'@purple-1': 'var(--purple-1)',
|
||||
'@purple-2': 'var(--purple-2)',
|
||||
'@purple-3': 'var(--purple-3)',
|
||||
'@purple-4': 'var(--purple-4)',
|
||||
'@purple-5': 'var(--purple-5)',
|
||||
'@purple-6': 'var(--purple-6)',
|
||||
'@purple-7': 'var(--purple-7)',
|
||||
'@purple-8': 'var(--purple-8)',
|
||||
'@purple-9': 'var(--purple-9)',
|
||||
'@purple-10': 'var(--purple-10)',
|
||||
// Cyan
|
||||
'@cyan-1': 'var(--cyan-1)',
|
||||
'@cyan-2': 'var(--cyan-2)',
|
||||
'@cyan-3': 'var(--cyan-3)',
|
||||
'@cyan-4': 'var(--cyan-4)',
|
||||
'@cyan-5': 'var(--cyan-5)',
|
||||
'@cyan-6': 'var(--cyan-6)',
|
||||
'@cyan-7': 'var(--cyan-7)',
|
||||
'@cyan-8': 'var(--cyan-8)',
|
||||
'@cyan-9': 'var(--cyan-9)',
|
||||
'@cyan-10': 'var(--cyan-10)',
|
||||
// Pink
|
||||
'@pink-1': 'var(--pink-1)',
|
||||
'@pink-2': 'var(--pink-2)',
|
||||
'@pink-3': 'var(--pink-3)',
|
||||
'@pink-4': 'var(--pink-4)',
|
||||
'@pink-5': 'var(--pink-5)',
|
||||
'@pink-6': 'var(--pink-6)',
|
||||
'@pink-7': 'var(--pink-7)',
|
||||
'@pink-8': 'var(--pink-8)',
|
||||
'@pink-9': 'var(--pink-9)',
|
||||
'@pink-10': 'var(--pink-10)',
|
||||
// Orange
|
||||
'@orange-1': 'var(--orange-1)',
|
||||
'@orange-2': 'var(--orange-2)',
|
||||
'@orange-3': 'var(--orange-3)',
|
||||
'@orange-4': 'var(--orange-4)',
|
||||
'@orange-5': 'var(--orange-5)',
|
||||
'@orange-6': 'var(--orange-6)',
|
||||
'@orange-7': 'var(--orange-7)',
|
||||
'@orange-8': 'var(--orange-8)',
|
||||
'@orange-9': 'var(--orange-9)',
|
||||
'@orange-10': 'var(--orange-10)',
|
||||
// Colors
|
||||
'@primary-color': 'var(--primary-color)',
|
||||
'@info-color': 'var(--info-color)',
|
||||
'@success-color': 'var(--success-color)',
|
||||
'@processing-color': 'var(--processing-color)',
|
||||
'@error-color': 'var(--error-color)',
|
||||
'@highlight-color': 'var(--highlight-color)',
|
||||
'@warning-color': 'var(--warning-color)',
|
||||
// Color used by default to control hover and active backgrounds
|
||||
'@primary-1': 'var(--primary-1)',
|
||||
'@primary-2': 'var(--primary-2)',
|
||||
'@primary-3': 'var(--primary-3)',
|
||||
'@primary-4': 'var(--primary-4)',
|
||||
'@primary-5': 'var(--primary-5)',
|
||||
'@primary-6': 'var(--primary-6)',
|
||||
'@primary-7': 'var(--primary-7)',
|
||||
'@primary-8': 'var(--primary-8)',
|
||||
'@primary-9': 'var(--primary-9)',
|
||||
'@primary-10': 'var(--primary-10)',
|
||||
// Background color
|
||||
'@body-background': 'var(--body-background)',
|
||||
'@component-background': 'var(--component-background)',
|
||||
// Popover
|
||||
'@popover-background': 'var(--popover-background)',
|
||||
'@popover-customize-border-color': 'var(--popover-customize-border-color)',
|
||||
// Text Color
|
||||
'@text-color': 'var(--text-color)',
|
||||
'@text-color-secondary': 'var(--text-color-secondary)',
|
||||
'@text-color-inverse': 'var(--text-color-inverse)',
|
||||
'@icon-color-hover': 'var(--icon-color-hover)',
|
||||
'@heading-color': 'var(--heading-color)',
|
||||
// The background colors for active and hover states for things like
|
||||
'@item-hover-bg': 'var(--item-hover-bg)',
|
||||
// LINK
|
||||
'@link-hover-color': '@primary-5',
|
||||
'@link-active-color': '@primary-7',
|
||||
// Border color
|
||||
'@border-color-base': 'var(--border-color-base)',
|
||||
'@border-color-split': 'var(--border-color-split)',
|
||||
'@border-color-inverse': 'var(--border-color-inverse)',
|
||||
// Outline
|
||||
'@background-color-light': 'var(--background-color-light)',
|
||||
'@background-color-base': 'var(--background-color-base)',
|
||||
// Disabled states
|
||||
'@disabled-color': 'var(--disabled-color)',
|
||||
'@disabled-bg': 'var(--disabled-bg)',
|
||||
'@disabled-color-dark': 'var(--disabled-color-dark)',
|
||||
// Shadow
|
||||
'@shadow-color': 'var(--shadow-color)',
|
||||
'@box-shadow-base': 'var(--box-shadow-base)',
|
||||
'@shadow-1-up': 'var(--shadow-1-up)',
|
||||
'@shadow-1-down': 'var(--shadow-1-down)',
|
||||
'@shadow-1-left': 'var(--shadow-1-left)',
|
||||
'@shadow-1-right': 'var(--shadow-1-right)',
|
||||
'@shadow-2': 'var(--shadow-2)',
|
||||
// Buttons
|
||||
'@btn-shadow': 'var(--btn-shadow)',
|
||||
'@btn-primary-shadow': 'var(--btn-primary-shadow)',
|
||||
'@btn-text-shadow': 'var(--btn-text-shadow)',
|
||||
'@btn-default-bg': 'var(--btn-default-bg)',
|
||||
'@btn-danger-bg': '@error-color',
|
||||
'@btn-danger-border': '@error-color',
|
||||
'@btn-default-ghost-color': 'var(--btn-default-ghost-color)',
|
||||
'@btn-default-ghost-border': 'var(--btn-default-ghost-border)',
|
||||
'@btn-text-hover-bg': 'var(--btn-text-hover-bg)',
|
||||
// Checkbox
|
||||
'@checkbox-check-bg': 'var(--checkbox-check-bg)',
|
||||
// Descriptions
|
||||
'@descriptions-bg': 'var(--descriptions-bg)',
|
||||
// Divider
|
||||
'@divider-color': 'var(--divider-color)',
|
||||
// Dropdown
|
||||
'@dropdown-menu-submenu-disabled-bg': 'var(--dropdown-menu-submenu-disabled-bg)',
|
||||
// Radio
|
||||
'@radio-dot-disabled-color': 'var(--radio-dot-disabled-color)',
|
||||
'@radio-solid-checked-color': 'var(--radio-solid-checked-color)',
|
||||
'@radio-focused-outline': '3px solid @primary-1', // var(--primary-fade-6)
|
||||
// Radio buttons
|
||||
'@radio-disabled-button-checked-bg': 'var(--radio-disabled-button-checked-bg)',
|
||||
// Layout
|
||||
'@layout-body-background': 'var(--layout-body-background)',
|
||||
'@layout-header-background': 'var(--layout-header-background)',
|
||||
'@layout-trigger-background': 'var(--layout-trigger-background)',
|
||||
// Dropdown
|
||||
'@dropdown-menu-bg': 'var(--dropdown-menu-bg)',
|
||||
// Input
|
||||
'@input-placeholder-color': 'var(--input-placeholder-color)',
|
||||
'@input-icon-color': 'var(--input-icon-color)',
|
||||
'@input-bg': 'var(--input-bg)',
|
||||
'@input-number-handler-active-bg': 'var(--input-number-handler-active-bg)',
|
||||
'@input-icon-hover-color': 'var(--input-icon-hover-color)',
|
||||
// Mentions
|
||||
'@mentions-dropdown-bg': 'var(--mentions-dropdown-bg)',
|
||||
// Select
|
||||
'@select-dropdown-bg': 'var(--select-dropdown-bg)',
|
||||
'@select-background': 'var(--select-background)',
|
||||
'@select-clear-background': 'var(--select-clear-background)',
|
||||
'@select-selection-item-bg': 'var(--select-selection-item-bg)',
|
||||
'@select-selection-item-border-color': 'var(--select-selection-item-border-color)',
|
||||
'@select-multiple-disabled-background': 'var(--select-multiple-disabled-background)',
|
||||
'@select-multiple-item-disabled-color': 'var(--select-multiple-item-disabled-color)',
|
||||
'@select-multiple-item-disabled-border-color': 'var(--select-multiple-item-disabled-border-color)',
|
||||
// Cascader
|
||||
'@cascader-bg': 'var(--cascader-bg)',
|
||||
'@cascader-menu-bg': 'var(--cascader-menu-bg)',
|
||||
'@cascader-menu-border-color-split': 'var(--cascader-menu-border-color-split)',
|
||||
// Tooltip
|
||||
'@tooltip-bg': 'var(--tooltip-bg)',
|
||||
// Popover
|
||||
'@popover-bg': 'var(--popover-bg)',
|
||||
// Modal
|
||||
'@modal-header-bg': 'var(--modal-header-bg)',
|
||||
'@modal-header-border-color-split': 'var(--modal-header-border-color-split)',
|
||||
'@modal-content-bg': 'var(--modal-content-bg)',
|
||||
'@modal-footer-border-color-split': 'var(--modal-footer-border-color-split)',
|
||||
// Menu
|
||||
'@menu-popup-bg': 'var(--menu-popup-bg)',
|
||||
'@menu-dark-bg': 'var(--menu-dark-bg)',
|
||||
'@menu-dark-submenu-bg': 'var(--menu-dark-submenu-bg)',
|
||||
// Table
|
||||
'@table-header-bg': 'var(--table-header-bg)',
|
||||
'@table-header-sort-bg': 'var(--table-header-sort-bg)',
|
||||
'@table-body-sort-bg': 'var(--table-body-sort-bg)',
|
||||
'@table-row-hover-bg': 'var(--table-row-hover-bg)',
|
||||
'@table-selected-row-hover-bg': '@primary-1',
|
||||
'@table-expanded-row-bg': 'var(--table-expanded-row-bg)',
|
||||
'@table-header-sort-active-bg': 'var(--table-header-sort-active-bg)',
|
||||
'@table-header-filter-active-bg': 'var(--table-header-filter-active-bg)',
|
||||
// Badge
|
||||
'@badge-text-color': '@white',
|
||||
// Rate
|
||||
'@rate-star-bg': 'var(--rate-star-bg)',
|
||||
// Card
|
||||
'@card-actions-background': 'var(--card-actions-background)',
|
||||
'@card-skeleton-bg': 'var(--card-skeleton-bg)',
|
||||
'@card-shadow': 'var(--card-shadow)',
|
||||
'@gradient-min': 'var(--gradient-min)',
|
||||
'@gradient-max': 'var(--gradient-max)',
|
||||
// Comment
|
||||
'@comment-bg': 'var(--comment-bg)',
|
||||
'@comment-author-time-color': 'var(--comment-author-time-color)',
|
||||
'@comment-action-hover-color': 'var(--comment-action-hover-color)',
|
||||
// BackTop
|
||||
'@back-top-bg': 'var(--back-top-bg)',
|
||||
'@back-top-hover-bg': 'var(--back-top-hover-bg)',
|
||||
// Avatar
|
||||
'@avatar-bg': 'var(--avatar-bg)',
|
||||
// Switch
|
||||
'@switch-bg': '@white',
|
||||
// Pagination
|
||||
'@pagination-item-bg': 'var(--pagination-item-bg)',
|
||||
'@pagination-item-bg-active': 'var(--pagination-item-bg-active)',
|
||||
'@pagination-item-link-bg': 'var(--pagination-item-link-bg)',
|
||||
'@pagination-item-disabled-color-active': 'var(--pagination-item-disabled-color-active)',
|
||||
'@pagination-item-disabled-bg-active': 'var(--pagination-item-disabled-bg-active)',
|
||||
'@pagination-item-input-bg': 'var(--pagination-item-input-bg)',
|
||||
// PageHeader
|
||||
'@page-header-back-color': 'var(--page-header-back-color)',
|
||||
// Slider
|
||||
'@slider-rail-background-color': 'var(--slider-rail-background-color)',
|
||||
'@slider-rail-background-color-hover': 'var(--slider-rail-background-color-hover)',
|
||||
'@slider-handle-color-focus': '@primary-5',
|
||||
'@slider-handle-color-focus-shadow': 'var(--primary-fade-20)',
|
||||
'@slider-dot-border-color': 'var(--slider-dot-border-color)',
|
||||
'@slider-dot-border-color-active': 'var(--slider-dot-border-color)',
|
||||
// Skeleton
|
||||
'@skeleton-to-color': 'var(--skeleton-to-color)',
|
||||
// Transfer
|
||||
'@transfer-item-hover-bg': 'var(--transfer-item-hover-bg)',
|
||||
// Message
|
||||
'@message-notice-content-bg': 'var(--message-notice-content-bg)',
|
||||
// Alert
|
||||
'@alert-success-border-color': '@green-3',
|
||||
'@alert-success-bg-color': '@green-1',
|
||||
'@alert-success-icon-color': '@success-color',
|
||||
'@alert-info-border-color': '@primary-3',
|
||||
'@alert-info-bg-color': '@primary-1',
|
||||
'@alert-info-icon-color': '@primary-color',
|
||||
'@alert-warning-border-color': '@gold-3',
|
||||
'@alert-warning-bg-color': '@gold-1',
|
||||
'@alert-warning-icon-color': '@warning-color',
|
||||
'@alert-error-border-color': '@red-3',
|
||||
'@alert-error-bg-color': '@red-1',
|
||||
'@alert-error-icon-color': '@error-color',
|
||||
// Drawer
|
||||
'@drawer-bg': 'var(--drawer-bg)',
|
||||
// Timeline
|
||||
'@timeline-color': 'var(--timeline-color)',
|
||||
'@timeline-dot-color': 'var(--timeline-dot-color)',
|
||||
// Image
|
||||
'@image-preview-operation-disabled-color': 'var(--image-preview-operation-disabled-color)',
|
||||
// Steps
|
||||
'@steps-nav-arrow-color': 'var(--steps-nav-arrow-color)',
|
||||
'@steps-background': 'var(--steps-background)',
|
||||
// Notification
|
||||
'@notification-bg': 'var(--notification-bg)',
|
||||
};
|
||||
|
||||
/**
|
||||
* 需要替换的内容
|
||||
*/
|
||||
const replaces = {
|
||||
// input/style/mixin.less
|
||||
'fade(@color, 20%)': 'ele-fade(@color, 20%)',
|
||||
// layout/style/index.less
|
||||
//'tint(@layout-sider-background, 10%)': 'var(--layout-sider-background-1)',
|
||||
// notification/style/index.less
|
||||
'shade(@text-color-secondary, 40%)': '@text-color',
|
||||
// popover/style/index.less
|
||||
'box-shadow: ~\'0 0 8px @{shadow-color} \\9\';': '',
|
||||
// radio/style/index.less
|
||||
'fade(@radio-dot-color, 8%)': 'var(--primary-fade-8)',
|
||||
// switch/style/index.less
|
||||
'fade(@switch-color, 20%)': 'var(--primary-fade-20)',
|
||||
// menu/style/index.less
|
||||
'fade(@primary-color, 20%)': 'var(--primary-fade-20)',
|
||||
// button/style/mixin.less
|
||||
'fadein(@btn-text-hover-bg, 1%)': 'var(--btn-text-active-bg)'
|
||||
};
|
||||
|
||||
/**
|
||||
* 修改less变量的预处理器
|
||||
*/
|
||||
class AntdLessPreProcessor {
|
||||
constructor(variables, replaces) {
|
||||
this.variables = variables || {};
|
||||
this.replaces = replaces || {};
|
||||
}
|
||||
|
||||
process(src) {
|
||||
let result = src;
|
||||
Object.keys(this.variables).forEach((key) => {
|
||||
result = result.replace(new RegExp(key + ':[^;]*;', 'g'), key + ': ' + this.variables[key] + ';');
|
||||
});
|
||||
Object.keys(this.replaces).forEach((key) => {
|
||||
//result = result.replaceAll(key, this.replaces[key]);
|
||||
// replaceAll以及正则如果含有符号容易报错, 使用如下实现全部替换
|
||||
result = result.split(key).join(this.replaces[key]);
|
||||
});
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 转换antd变量的less插件
|
||||
*/
|
||||
class DynamicAntdLess {
|
||||
constructor(opt) {
|
||||
this.option = {
|
||||
variables: Object.assign({}, variables, opt ? opt.variables : null),
|
||||
replaces: Object.assign({}, replaces, opt ? opt.replaces : null),
|
||||
};
|
||||
}
|
||||
|
||||
install(less, manager, functions) {
|
||||
// 添加预处理器
|
||||
manager.addPreProcessor(new AntdLessPreProcessor(this.option.variables, this.option.replaces), 2000);
|
||||
|
||||
// 添加自定义函数, 替代fade函数以支持var()
|
||||
const call = (name, ...args) => new less.tree.Call(name, [new less.tree.Expression(args)]);
|
||||
functions.add('ele-fade', (node, amount) => {
|
||||
if (node.name === 'var') {
|
||||
const color = node.args[0].value;
|
||||
if (color === '--primary-color' || color === '--info-color') {
|
||||
return call('var', new less.tree.Anonymous('--primary-fade-' + amount.value));
|
||||
}
|
||||
if (color === '--error-color' || color === '--highlight-color') {
|
||||
return call('var', new less.tree.Anonymous('--error-fade-' + amount.value));
|
||||
}
|
||||
if (color === '--warning-color') {
|
||||
return call('var', new less.tree.Anonymous('--warning-fade-' + amount.value));
|
||||
}
|
||||
if (color === '--success-color') {
|
||||
return call('var', new less.tree.Anonymous('--success-fade-' + amount.value));
|
||||
}
|
||||
return call('var', new less.tree.Anonymous(color + '-fade-unknown'));
|
||||
}
|
||||
const f = functions.get('fade');
|
||||
return f ? f(node, amount) : node;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = DynamicAntdLess;
|
||||
Reference in New Issue
Block a user