提取ele-pro修改源码

This commit is contained in:
weicw
2021-08-06 16:12:31 +08:00
parent 97df9286bb
commit 5bc27cb0ee
153 changed files with 36553 additions and 555 deletions

377
dynamicTheme.js Normal file
View 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;