提取ele-pro修改源码

src/components/ele-admin-pro/packages/style/common.less

@@ -0,0 +1,590 @@
+/** ele admin pro 公共样式 license by http://eleadmin.com */
+@import './var.less';
+
+body {
+  background: @layout-body-background;
+}
+
+/* 辅助类 */
+// 页面主体
+.ele-body {
+  padding: @padding-md;
+
+  &.ele-body-card {
+    padding-bottom: 0;
+
+    .ant-card {
+      margin-bottom: @padding-md;
+    }
+  }
+}
+
+// 标题
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  font-weight: normal;
+  font-size: @font-size-lg;
+}
+
+h5 {
+  font-size: (@font-size-lg + 2px);
+}
+
+h4 {
+  font-size: (@font-size-lg + 4px);
+}
+
+h3 {
+  font-size: (@font-size-lg + 6px);
+}
+
+h2 {
+  font-size: (@font-size-lg + 8px);
+}
+
+h1 {
+  font-size: (@font-size-lg + 10px);
+}
+
+// 文字
+.ele-text {
+  color: @text-color;
+}
+
+.ele-text-heading {
+  color: @heading-color;
+}
+
+.ele-text-secondary {
+  color: @text-color-secondary;
+}
+
+.ele-text-placeholder {
+  color: @input-placeholder-color
+}
+
+.ele-text-primary {
+  color: @primary-color;
+}
+
+.ele-text-success,
+.ele-text-success:hover {
+  color: @success-color;
+}
+
+a.ele-text-success:hover {
+  color: ~`colorPalette('@{success-color}', 5) `;
+}
+
+a.ele-text-success:active {
+  color: ~`colorPalette('@{success-color}', 7) `;
+}
+
+.ele-text-warning,
+.ele-text-warning:hover {
+  color: @warning-color;
+}
+
+a.ele-text-warning:hover {
+  color: ~`colorPalette('@{warning-color}', 5) `;
+}
+
+a.ele-text-warning:active {
+  color: ~`colorPalette('@{warning-color}', 7) `;
+}
+
+.ele-text-danger,
+.ele-text-danger:hover {
+  color: @error-color;
+}
+
+a.ele-text-danger:hover {
+  color: ~`colorPalette('@{error-color}', 5) `;
+}
+
+a.ele-text-danger:active {
+  color: ~`colorPalette('@{error-color}', 7) `;
+}
+
+.ele-text-info,
+a.ele-text-info:hover,
+a.ele-text-info:active {
+  color: @normal-color;
+}
+
+.ele-text-delete {
+  text-decoration: line-through;
+}
+
+.ele-text-small {
+  font-size: @font-size-sm !important;
+}
+
+// 背景和边框
+.ele-bg-base {
+  background-color: @layout-body-background !important;
+}
+
+.ele-bg-primary {
+  background-color: @primary-color !important;
+}
+
+.ele-bg-success {
+  background-color: @success-color !important;
+}
+
+.ele-bg-warning {
+  background-color: @warning-color !important;
+}
+
+.ele-bg-danger {
+  background-color: @error-color !important;
+}
+
+.ele-bg-info {
+  background-color: @normal-color !important;
+}
+
+.ele-bg-white {
+  background-color: @component-background !important;
+}
+
+.ele-border-primary {
+  border-color: @primary-color !important;
+}
+
+.ele-border-success {
+  border-color: @success-color !important;
+}
+
+.ele-border-warning {
+  border-color: @warning-color !important;
+}
+
+.ele-border-danger {
+  border-color: @error-color !important;
+}
+
+.ele-border-info {
+  border-color: @normal-color !important;
+}
+
+.ele-border-base {
+  border-color: @border-color-base !important;
+}
+
+.ele-border-split {
+  border-color: @border-color-split !important;
+}
+
+// 元素浮动、对齐
+.ele-pull-left {
+  float: left;
+}
+
+.ele-pull-right {
+  float: right;
+}
+
+.ele-clear {
+  clear: both;
+}
+
+.ele-clear-after:after {
+  content: "";
+  clear: both;
+  display: block;
+}
+
+.ele-text-center {
+  text-align: center;
+}
+
+.ele-text-left {
+  text-align: left;
+}
+
+.ele-text-right {
+  text-align: right;
+}
+
+.ele-fluid {
+  width: 100% !important;
+}
+
+.ele-block {
+  display: block;
+}
+
+.ele-inline-block {
+  display: inline-block;
+}
+
+.ele-inline {
+  display: inline;
+}
+
+// 占位元素
+em:not([class]) {
+  padding: 0 0.5em;
+  font-style: normal;
+}
+
+s:not([class]) {
+  padding: 0 0.125em;
+  font-style: normal;
+}
+
+// 按钮加图标减少间距
+.ele-btn-icon:not(.ant-btn-sm) {
+  padding-left: @padding-sm;
+  padding-right: @padding-sm;
+}
+
+// 文字省略
+.ele-elip {
+  overflow: hidden;
+  white-space: nowrap;
+  word-break: break-all;
+  text-overflow: ellipsis;
+}
+
+/* 单元格 */
+.ele-cell {
+  display: flex;
+
+  &:not(.ele-cell-align-top) {
+    align-items: center;
+  }
+
+  &.ele-cell-align-bottom {
+    align-items: flex-end;
+  }
+
+  & > .ele-cell-content {
+    flex: 1;
+    box-sizing: border-box;
+  }
+
+  & > * + .ele-cell-content {
+    padding-left: @padding-sm;
+  }
+
+  .ele-cell-title {
+    color: @heading-color;
+    font-size: @font-size-base + 1px;
+  }
+
+  .ele-cell-desc {
+    color: @text-color-secondary;
+    font-size: @font-size-base - 1px;
+    margin-top: (@padding-xs / 2);
+  }
+}
+
+/* 底部工具栏 */
+.ele-bottom-tool {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  box-shadow: @shadow-1-up;
+  padding: @padding-xs @padding-md;
+  background: @component-background;
+  transition: padding-left @sidebar-transition-anim;
+  z-index: (@layout-z-index - 1);
+
+  .ele-bottom-tool-actions {
+    flex: 1;
+    text-align: right;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .ele-admin-sidebar + .ele-admin-body .ele-bottom-tool {
+    padding-left: (@sidebar-width + @padding-md);
+  }
+
+  .ele-layout-collapse .ele-admin-sidebar + .ele-admin-body .ele-bottom-tool {
+    padding-left: (@sidebar-collapse-width + @padding-md);
+  }
+}
+
+/* 数据表格头部工具栏 */
+.ele-table-tool {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: @padding-md - 6px;
+
+  .ele-table-tool-title {
+    flex: auto;
+    margin-top: 6px;
+    margin-bottom: 6px;
+  }
+
+  .ele-tool {
+    margin: 6px 0 6px auto;
+    overflow-y: hidden;
+
+    .ele-tool-item {
+      font-size: 16px;
+      cursor: pointer;
+    }
+  }
+
+  // 带表单的样式处理
+  &.ele-toolbar-form .ele-table-tool-title {
+    margin-top: 0;
+    margin-bottom: 0;
+
+    .ant-col {
+      margin-top: 6px;
+      margin-bottom: 6px;
+    }
+  }
+}
+
+// 带背景色
+.ele-table-tool-default {
+  margin-bottom: 0;
+  background: @table-header-bg;
+  padding: (@padding-xs - 6px) @padding-md;
+  border-top: @border-width-base @border-style-base @border-color-split;
+  border-left: @border-width-base @border-style-base @border-color-split;
+  border-right: @border-width-base @border-style-base @border-color-split;
+
+  .ele-tool .ele-tool-item {
+    font-size: 14px;
+    padding: 6px 7px;
+    box-sizing: border-box;
+    border: @border-width-base @border-style-base @border-color-base;
+    border-radius: 2px;
+    line-height: 1;
+  }
+}
+
+.ele-table-tool-default + .ant-table-wrapper .ant-table table {
+  border-radius: 0 0 0 0;
+}
+
+.ele-table-tool-default + .ant-table-wrapper .ant-table-thead > tr:first-child > th:last-child {
+  border-top-right-radius: 0;
+}
+
+.ele-table-tool-default + .ant-table-wrapper .ant-table-thead > tr:first-child > th:first-child {
+  border-top-left-radius: 0;
+}
+
+/* 组件样式调整 */
+// 表单详情
+.ele-form-detail .ant-form-item {
+  margin-bottom: 0;
+}
+
+@media (max-width: 575px) {
+  .ele-form-detail .ant-form-item-label {
+    line-height: @input-height-lg - 0.0001px;
+    padding-bottom: 0;
+
+    & > label:after {
+      display: inherit;
+    }
+  }
+}
+
+// 级联选择器增加高度
+.ele-pop-wrap-higher .ant-cascader-menu {
+  height: 280px;
+}
+
+// 分割线
+.ant-divider {
+  margin: 0;
+}
+
+// Modal标题高度
+.ant-modal-header {
+  padding: @modal-header-padding;
+
+  & > .ant-modal-title > div {
+    padding-right: calc(@modal-close-x-width - 20px);
+  }
+}
+
+.ant-modal-close-x {
+  width: @modal-close-x-width;
+  height: @modal-close-x-height;
+  line-height: @modal-close-x-height;
+}
+
+// Modal支持拖拽
+.ele-modal-movable > .ant-modal,
+.ele-modal-move-out > .ant-modal {
+  padding-bottom: 0;
+
+  & > .ant-modal-content > .ant-modal-header {
+    cursor: move;
+    user-select: none;
+  }
+}
+
+// Modal支持拉伸
+.ele-modal-resizable > .ant-modal {
+  padding-bottom: 0;
+
+  & > .ant-modal-content {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    & > .ant-modal-body {
+      flex: auto;
+      overflow: auto;
+    }
+
+    &:after {
+      content: "";
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 10px;
+      height: 10px;
+      cursor: se-resize;
+    }
+  }
+}
+
+// Modal支持打开多个
+.ele-modal-multiple {
+  pointer-events: none;
+  overflow: hidden;
+}
+
+// Modal全屏
+.ele-modal-wrap-fullscreen {
+  overflow: hidden;
+
+  & > .ant-modal {
+    top: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    max-width: inherit !important;
+    min-width: inherit !important;
+    margin: 0 !important;
+
+    & > .ant-modal-content {
+      border-radius: 0;
+
+      & > .ant-modal-header {
+        cursor: default !important;
+      }
+
+      &:after {
+        display: none;
+      }
+    }
+
+    .ele-modal-icon-expand {
+      display: none;
+    }
+  }
+}
+
+:not(.ele-modal-wrap-fullscreen) > .ant-modal .ele-modal-icon-compress {
+  display: none;
+}
+
+.ant-modal .ele-modal-icon-expand,
+.ant-modal .ele-modal-icon-compress {
+  cursor: pointer;
+  font-size: @font-size-base;
+  color: @text-color-secondary;
+
+  &:hover {
+    color: @icon-color-hover;
+  }
+}
+
+// Message Loading
+.ele-message-loading .ant-message,
+.ele-message-loading-mask .ant-message {
+  top: 0;
+  bottom: 0;
+  padding-top: 16px;
+  pointer-events: auto;
+}
+
+.ele-message-loading-mask .ant-message {
+  background: @modal-mask-bg;
+}
+
+.ant-message {
+  transition: background-color .3s;
+}
+
+/* 图表提示框圆点 */
+.ele-chart-dot {
+  width: 10px;
+  height: 10px;
+  margin-right: 5px;
+  border-radius: 50%;
+  display: inline-block;
+  background: #3aa1ff;
+}
+
+/* 滚动条 */
+.ele-scrollbar-hover,
+.ele-scrollbar-hide {
+  overflow: auto;
+}
+
+@media screen and (min-width: 768px) {
+  ::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 6px;
+    border: 2px solid transparent;
+    background-color: @border-color-base;
+    background-clip: padding-box;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: @input-placeholder-color;
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  .ele-scrollbar-mini::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  .ele-scrollbar-mini::-webkit-scrollbar-track {
+    background: none;
+  }
+
+  .ele-scrollbar-mini::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    border: none;
+  }
+}
+
+.ele-scrollbar-hide::-webkit-scrollbar,
+.ele-scrollbar-hover:not(:hover)::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}

src/components/ele-admin-pro/packages/style/dark.less

@@ -0,0 +1,3 @@
+/** ele admin pro dark theme license by http://eleadmin.com */
+@import './index.less';
+@import '~ant-design-vue/lib/style/themes/dark.less';

src/components/ele-admin-pro/packages/style/display.less

@@ -0,0 +1,86 @@
+/** ele admin pro display license by http://eleadmin.com */
+@import './var.less';
+
+@media only screen and (max-width: @screen-xs-max) {
+  .hidden-xs-only {
+    display: none !important
+  }
+}
+
+@media only screen and (min-width: @screen-sm-min) {
+  .hidden-sm-and-up {
+    display: none !important
+  }
+}
+
+@media only screen and (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+  .hidden-sm-only {
+    display: none !important
+  }
+}
+
+@media only screen and (max-width: @screen-sm-max) {
+  .hidden-sm-and-down {
+    display: none !important
+  }
+}
+
+@media only screen and (min-width: @screen-md-min) {
+  .hidden-md-and-up {
+    display: none !important
+  }
+}
+
+@media only screen and (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+  .hidden-md-only {
+    display: none !important
+  }
+}
+
+@media only screen and (max-width: @screen-md-max) {
+  .hidden-md-and-down {
+    display: none !important
+  }
+}
+
+@media only screen and (min-width: @screen-lg-min) {
+  .hidden-lg-and-up {
+    display: none !important
+  }
+}
+
+@media only screen and (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
+  .hidden-lg-only {
+    display: none !important
+  }
+}
+
+@media only screen and (max-width: @screen-lg-max) {
+  .hidden-lg-and-down {
+    display: none !important
+  }
+}
+
+@media only screen and (min-width: @screen-xl-min) {
+  .hidden-xl-and-up {
+    display: none !important
+  }
+}
+
+@media only screen and (min-width: @screen-xl-min) and (max-width: @screen-xl-max) {
+  .hidden-xl-only {
+    display: none !important
+  }
+}
+
+@media only screen and (max-width: @screen-xl-max) {
+  .hidden-xl-and-down {
+    display: none !important
+  }
+}
+
+@media only screen and (min-width: @screen-xxl-min) {
+  .hidden-xxl-only {
+    display: none !important
+  }
+}

src/components/ele-admin-pro/packages/style/dynamic.less

@@ -0,0 +1,746 @@
+/** ele admin pro dynamic theme license by http://eleadmin.com */
+@import './index.less';
+
+// 侧边栏
+@sidebar-light-shadow: var(--sidebar-light-shadow);
+@sidebar-dark-shadow: var(--sidebar-dark-shadow);
+
+// 顶栏
+@header-light-shadow: var(--header-light-shadow);
+@header-dark-shadow: var(--header-dark-shadow);
+@header-tool-hover-bg: var(--header-tool-hover-bg);
+@header-dark-tool-hover-bg: var(--header-dark-tool-hover-bg);
+
+// logo
+@logo-light-shadow: var(--logo-light-shadow);
+@logo-dark-shadow: var(--logo-dark-shadow);
+
+/** 重写colorPalette函数, 增加对var()的支持 */
+.colorPaletteMixin2() {
+  @functions: ~`(function() {
+  var hueStep = 2;
+  var saturationStep = 0.16;
+  var saturationStep2 = 0.05;
+  var brightnessStep1 = 0.05;
+  var brightnessStep2 = 0.15;
+  var lightColorCount = 5;
+  var darkColorCount = 4;
+
+  var getHue = function(hsv, i, isLight) {
+    var hue;
+    if (hsv.h >= 60 && hsv.h <= 240) {
+      hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
+    } else {
+      hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
+    }
+    if (hue < 0) {
+      hue += 360;
+    } else if (hue >= 360) {
+      hue -= 360;
+    }
+    return Math.round(hue);
+  };
+  var getSaturation = function(hsv, i, isLight) {
+    var saturation;
+    if (isLight) {
+      saturation = hsv.s - saturationStep * i;
+    } else if (i === darkColorCount) {
+      saturation = hsv.s + saturationStep;
+    } else {
+      saturation = hsv.s + saturationStep2 * i;
+    }
+    if (saturation > 1) {
+      saturation = 1;
+    }
+    if (isLight && i === lightColorCount && saturation > 0.1) {
+      saturation = 0.1;
+    }
+    if (saturation < 0.06) {
+      saturation = 0.06;
+    }
+    return Number(saturation.toFixed(2));
+  };
+  var getValue = function(hsv, i, isLight) {
+    var value;
+    if (isLight) {
+      value = hsv.v + brightnessStep1 * i;
+    }else{
+      value = hsv.v - brightnessStep2 * i
+    }
+    if (value > 1) {
+      value = 1;
+    }
+    return Number(value.toFixed(2))
+  };
+
+  this.colorPalette = function(color, index) {
+    if(color.indexOf('var(--') === 0) {
+      if(color === 'var(--primary-color)' || color === 'var(--info-color)') {
+        return 'var(--primary-' + index + ')';
+      }
+      if(color === 'var(--error-color)' || color === 'var(--highlight-color)') {
+        return 'var(--red-' + index + ')';
+      }
+      if(color === 'var(--warning-color)') {
+        return 'var(--gold-' + index + ')';
+      }
+      if(color === 'var(--success-color)') {
+        return 'var(--green-' + index + ')';
+      }
+      return color.replace(')', '-unknown)');
+    }
+    var isLight = index <= 6;
+    var hsv = tinycolor(color).toHsv();
+    var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
+    return tinycolor({
+      h: getHue(hsv, i, isLight),
+      s: getSaturation(hsv, i, isLight),
+      v: getValue(hsv, i, isLight),
+    }).toHexString();
+  };
+})()`;
+}
+
+.colorPaletteMixin2();
+
+/** css变量 */
+:root {
+  --blue-1: #e6f7ff;
+  --blue-2: #bae7ff;
+  --blue-3: #91d5ff;
+  --blue-4: #69c0ff;
+  --blue-5: #40a9ff;
+  --blue-6: #1890ff;
+  --blue-7: #096dd9;
+  --blue-8: #0050b3;
+  --blue-9: #003a8c;
+  --blue-10: #002766;
+
+  --green-1: #f6ffed;
+  --green-2: #d9f7be;
+  --green-3: #b7eb8f;
+  --green-4: #95de64;
+  --green-5: #73d13d;
+  --green-6: #52c41a;
+  --green-7: #389e0d;
+  --green-8: #237804;
+  --green-9: #135200;
+  --green-10: #092b00;
+
+  --red-1: #fff1f0;
+  --red-2: #ffccc7;
+  --red-3: #ffa39e;
+  --red-4: #ff7875;
+  --red-5: #ff4d4f;
+  --red-6: #f5222d;
+  --red-7: #cf1322;
+  --red-8: #a8071a;
+  --red-9: #820014;
+  --red-10: #5c0011;
+
+  --gold-1: #fffbe6;
+  --gold-2: #fff1b8;
+  --gold-3: #ffe58f;
+  --gold-4: #ffd666;
+  --gold-5: #ffc53d;
+  --gold-6: #faad14;
+  --gold-7: #d48806;
+  --gold-8: #ad6800;
+  --gold-9: #874d00;
+  --gold-10: #613400;
+
+  --purple-1: #f9f0ff;
+  --purple-2: #efdbff;
+  --purple-3: #d3adf7;
+  --purple-4: #b37feb;
+  --purple-5: #9254de;
+  --purple-6: #722ed1;
+  --purple-7: #531dab;
+  --purple-8: #391085;
+  --purple-9: #22075e;
+  --purple-10: #120338;
+
+  --cyan-1: #e6fffb;
+  --cyan-2: #b5f5ec;
+  --cyan-3: #87e8de;
+  --cyan-4: #5cdbd3;
+  --cyan-5: #36cfc9;
+  --cyan-6: #13c2c2;
+  --cyan-7: #08979c;
+  --cyan-8: #006d75;
+  --cyan-9: #00474f;
+  --cyan-10: #002329;
+
+  --pink-1: #fff0f6;
+  --pink-2: #ffd6e7;
+  --pink-3: #ffadd2;
+  --pink-4: #ff85c0;
+  --pink-5: #f759ab;
+  --pink-6: #eb2f96;
+  --pink-7: #c41d7f;
+  --pink-8: #9e1068;
+  --pink-9: #780650;
+  --pink-10: #520339;
+
+  --orange-1: #fff7e6;
+  --orange-2: #ffe7ba;
+  --orange-3: #ffd591;
+  --orange-4: #ffc069;
+  --orange-5: #ffa940;
+  --orange-6: #fa8c16;
+  --orange-7: #d46b08;
+  --orange-8: #ad4e00;
+  --orange-9: #873800;
+  --orange-10: #612500;
+
+  --primary-color: var(--blue-6);
+  --success-color: var(--green-6);
+  --error-color: var(--red-5);
+  --warning-color: var(--gold-6);
+  --info-color: var(--primary-color);
+  --processing-color: var(--blue-6);
+  --highlight-color: var(--red-5);
+
+  --primary-1: var(--blue-1);
+  --primary-2: var(--blue-2);
+  --primary-3: var(--blue-3);
+  --primary-4: var(--blue-4);
+  --primary-5: var(--blue-5);
+  --primary-6: var(--blue-6);
+  --primary-7: var(--blue-7);
+  --primary-8: var(--blue-8);
+  --primary-9: var(--blue-9);
+  --primary-10: var(--blue-10);
+
+  --primary-fade-8: fade(#1890ff, 8%);
+  --primary-fade-20: fade(#1890ff, 20%);
+
+  --success-fade-20: fade(#52c41a, 20%);
+  --error-fade-20: fade(#ff4d4f, 20%);
+  --warning-fade-20: fade(#faad14, 20%);
+
+  --body-background: #fff;
+  --component-background: #fff;
+
+  --popover-background: @component-background;
+  --popover-customize-border-color: @border-color-split;
+
+  --text-color: fade(@black, 85%);
+  --text-color-secondary: fade(@black, 45%);
+  --text-color-inverse: @white;
+  --icon-color-hover: fade(@black, 75%);
+  --heading-color: fade(@black, 85%);
+
+  --item-hover-bg: #f5f5f5;
+
+  // Border color
+  --border-color-base: hsv(0, 0, 85%);
+  --border-color-split: hsv(0, 0, 94%);
+  --border-color-inverse: @white;
+
+  // Outline
+  --background-color-light: hsv(0, 0, 98%);
+  --background-color-base: hsv(0, 0, 96%);
+
+  // Disabled states
+  --disabled-color: fade(#000, 25%);
+  --disabled-bg: @background-color-base;
+  --disabled-color-dark: fade(#fff, 35%);
+
+  // Shadow
+  --shadow-color: rgba(0, 0, 0, 0.15);
+  --box-shadow-base: @shadow-1-down;
+  --shadow-1-up: 0 -2px 8px @shadow-color;
+  --shadow-1-down: 0 2px 8px @shadow-color;
+  --shadow-1-left: -2px 0 8px @shadow-color;
+  --shadow-1-right: 2px 0 8px @shadow-color;
+  --shadow-2: 0 4px 12px @shadow-color;
+
+  // Buttons
+  --btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+  --btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+  --btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+
+  --btn-default-bg: @component-background;
+
+  --btn-default-ghost-color: @component-background;
+  --btn-default-ghost-border: @component-background;
+
+  --btn-text-hover-bg: rgba(0, 0, 0, 0.018);
+  --btn-text-active-bg: rgba(0, 0, 0, 0.028);
+
+  // Checkbox
+  --checkbox-check-bg: @checkbox-check-color;
+
+  // Descriptions
+  --descriptions-bg: #fafafa;
+
+  // Divider
+  --divider-color: rgba(0, 0, 0, 6%);
+
+  // Dropdown
+  --dropdown-menu-submenu-disabled-bg: @component-background;
+
+  // Radio
+  --radio-dot-disabled-color: fade(@black, 20%);
+  --radio-solid-checked-color: @component-background;
+
+  // Radio buttons
+  --radio-disabled-button-checked-bg: tint(@black, 90%);
+
+  // Layout
+  --layout-body-background: #f0f2f5;
+  --layout-header-background: #001529;
+  --layout-trigger-background: #002140;
+  //--layout-sider-background-1: tint(#001529, 10%);
+
+  // Dropdown
+  --dropdown-menu-bg: @component-background;
+
+  // Input
+  --input-placeholder-color: hsv(0, 0, 75%);
+  --input-icon-color: @input-color;
+  --input-bg: @component-background;
+  --input-number-handler-active-bg: #f4f4f4;
+  --input-icon-hover-color: fade(@black, 85%);
+
+  // Mentions
+  --mentions-dropdown-bg: @component-background;
+
+  // Select
+  --select-dropdown-bg: @component-background;
+  --select-background: @component-background;
+  --select-clear-background: @select-background;
+  --select-selection-item-bg: @background-color-base;
+  --select-selection-item-border-color: @border-color-split;
+  --select-multiple-disabled-background: @input-disabled-bg;
+  --select-multiple-item-disabled-color: #bfbfbf;
+  --select-multiple-item-disabled-border-color: @select-border-color;
+
+  // Cascader
+  --cascader-bg: @component-background;
+  --cascader-menu-bg: @component-background;
+  --cascader-menu-border-color-split: @border-color-split;
+
+  // Tooltip
+  --tooltip-bg: rgba(0, 0, 0, 0.75);
+
+  // Popover
+  --popover-bg: @component-background;
+
+  // Modal
+  --modal-header-bg: @component-background;
+  --modal-header-border-color-split: @border-color-split;
+  --modal-content-bg: @component-background;
+  --modal-footer-border-color-split: @border-color-split;
+
+  // Menu
+  --menu-popup-bg: @component-background;
+  --menu-dark-bg: @layout-header-background;
+  --menu-dark-submenu-bg: #000c17;
+
+  // Table
+  --table-header-bg: @background-color-light;
+  --table-header-sort-bg: @background-color-base;
+  --table-body-sort-bg: rgba(0, 0, 0, 0.01);
+  --table-row-hover-bg: @primary-1;
+  --table-expanded-row-bg: #fbfbfb;
+  --table-header-sort-active-bg: darken(hsv(0, 0, 98%), 3%);
+  --table-header-filter-active-bg: darken(darken(hsv(0, 0, 98%), 3%), 5%);
+
+  // Rate
+  --rate-star-bg: @border-color-split;
+
+  // Card
+  --card-actions-background: @background-color-light;
+  --card-skeleton-bg: #cfd8dc;
+  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+  --gradient-min: fade(#cfd8dc, 20%);
+  --gradient-max: fade(#cfd8dc, 40%);
+
+  // Comment
+  --comment-bg: inherit;
+  --comment-author-time-color: #ccc;
+  --comment-action-hover-color: #595959;
+
+  // BackTop
+  --back-top-bg: fade(@black, 45%);
+  --back-top-hover-bg: fade(@black, 65%);
+
+  // Avatar
+  --avatar-bg: #ccc;
+
+  // Pagination
+  --pagination-item-bg: @component-background;
+  --pagination-item-bg-active: @component-background;
+  --pagination-item-link-bg: @component-background;
+  --pagination-item-disabled-color-active: @white;
+  --pagination-item-disabled-bg-active: darken(hsv(0, 0, 96%), 10%);
+  --pagination-item-input-bg: @component-background;
+
+  // PageHeader
+  --page-header-back-color: #000;
+
+  // Slider
+  --slider-rail-background-color: @background-color-base;
+  --slider-rail-background-color-hover: #e1e1e1;
+  --slider-dot-border-color: @border-color-split;
+  --slider-dot-border-color-active: @primary-4;
+
+  // Skeleton
+  --skeleton-to-color: shade(@skeleton-color, 5%);
+
+  // Transfer
+  --transfer-item-hover-bg: @item-hover-bg;
+
+  // Message
+  --message-notice-content-bg: @component-background;
+
+  // Drawer
+  --drawer-bg: @component-background;
+
+  // Timeline
+  --timeline-color: @border-color-split;
+  --timeline-dot-color: @primary-color;
+
+  // Image
+  --image-preview-operation-disabled-color: rgba(255, 255, 255, 0.45);
+
+  // Steps
+  --steps-nav-arrow-color: fade(@black, 25%);
+  --steps-background: @component-background;
+
+  // Notification
+  --notification-bg: @component-background;
+
+  // 侧边栏
+  --sidebar-light-shadow: 1px 3px 3px rgba(0, 21, 41, .08);
+  --sidebar-dark-shadow: 0 4px 4px rgba(0, 0, 0, .35);
+
+  // 顶栏
+  --header-light-shadow: 0 1px 4px rgba(0, 21, 41, .08);
+  --header-dark-shadow: 0 1px 4px rgba(0, 0, 0, .1);
+  --header-tool-hover-bg: rgba(0, 0, 0, .025);
+  --header-dark-tool-hover-bg: rgba(255, 255, 255, .05);
+
+  // logo
+  --logo-light-shadow: 1px 2px 3px rgba(0, 21, 41, .08);
+  --logo-dark-shadow: 0 3px 4px rgba(0, 0, 0, .35);
+}
+
+.ele-admin-theme-dark {
+  --blue-1: #111d2c;
+  --blue-2: #112a45;
+  --blue-3: #15395b;
+  --blue-4: #164c7e;
+  --blue-5: #1765ad;
+  --blue-6: #177ddc;
+  --blue-7: #3c9ae8;
+  --blue-8: #65b7f3;
+  --blue-9: #8dcff8;
+  --blue-10: #b7e3fa;
+
+  --green-1: #162312;
+  --green-2: #1d3712;
+  --green-3: #274916;
+  --green-4: #306317;
+  --green-5: #3c8618;
+  --green-6: #49aa19;
+  --green-7: #6abe39;
+  --green-8: #8fd460;
+  --green-9: #b2e58b;
+  --green-10: #d5f2bb;
+
+  --red-1: #2a1215;
+  --red-2: #431418;
+  --red-3: #58181c;
+  --red-4: #791a1f;
+  --red-5: #a61d24;
+  --red-6: #f5222d;
+  --red-7: #e84749;
+  --red-8: #f37370;
+  --red-9: #f89f9a;
+  --red-10: #fac8c3;
+
+  --gold-1: #2b2111;
+  --gold-2: #443111;
+  --gold-3: #594214;
+  --gold-4: #7c5914;
+  --gold-5: #aa7714;
+  --gold-6: #d89614;
+  --gold-7: #e8b339;
+  --gold-8: #f3cc62;
+  --gold-9: #f8df8b;
+  --gold-10: #faedb5;
+
+  --purple-1: #1a1325;
+  --purple-2: #24163a;
+  --purple-3: #301c4d;
+  --purple-4: #3e2069;
+  --purple-5: #51258f;
+  --purple-6: #642ab5;
+  --purple-7: #854eca;
+  --purple-8: #ab7ae0;
+  --purple-9: #cda8f0;
+  --purple-10: #ebd7fa;
+
+  --cyan-1: #112123;
+  --cyan-2: #113536;
+  --cyan-3: #144848;
+  --cyan-4: #146262;
+  --cyan-5: #138585;
+  --cyan-6: #13a8a8;
+  --cyan-7: #33bcb7;
+  --cyan-8: #58d1c9;
+  --cyan-9: #84e2d8;
+  --cyan-10: #b2f1e8;
+
+  --pink-1: #291321;
+  --pink-2: #40162f;
+  --pink-3: #551c3b;
+  --pink-4: #75204f;
+  --pink-5: #a02669;
+  --pink-6: #cb2b83;
+  --pink-7: #e0529c;
+  --pink-8: #f37fb7;
+  --pink-9: #f8a8cc;
+  --pink-10: #fad2e3;
+
+  --orange-1: #2b1d11;
+  --orange-2: #442a11;
+  --orange-3: #593815;
+  --orange-4: #7c4a15;
+  --orange-5: #aa6215;
+  --orange-6: #d87a16;
+  --orange-7: #e89a3c;
+  --orange-8: #f3b765;
+  --orange-9: #f8cf8d;
+  --orange-10: #fae3b7;
+
+  --primary-color: var(--blue-6);
+  --success-color: var(--green-6);
+  --error-color: var(--red-5);
+  --warning-color: var(--gold-6);
+  --info-color: var(--primary-color);
+  --processing-color: var(--blue-6);
+  --highlight-color: var(--red-5);
+
+  --primary-1: var(--blue-1);
+  --primary-2: var(--blue-2);
+  --primary-3: var(--blue-3);
+  --primary-4: var(--blue-4);
+  --primary-5: var(--blue-5);
+  --primary-6: var(--blue-6);
+  --primary-7: var(--blue-7);
+  --primary-8: var(--blue-8);
+  --primary-9: var(--blue-9);
+  --primary-10: var(--blue-10);
+
+  --body-background: @black;
+  --component-background: #141414;
+
+  --popover-background: #1f1f1f;
+  --popover-customize-border-color: #3a3a3a;
+
+  --text-color: fade(@white, 85%);
+  --text-color-secondary: fade(@white, 45%);
+  --text-color-inverse: @white;
+  --icon-color-hover: fade(@white, 75%);
+  --heading-color: fade(@white, 85%);
+
+  --item-hover-bg: fade(@white, 8%);
+
+  // Border color
+  --border-color-base: #434343;
+  --border-color-split: #303030;
+  --border-color-inverse: @black;
+
+  // Outline
+  --background-color-light: fade(@white, 4%);
+  --background-color-base: fade(@white, 8%);
+
+  // Disabled states
+  --disabled-color: fade(@white, 30%);
+  --disabled-bg: @background-color-base;
+  --disabled-color-dark: fade(@white, 30%);
+
+  // Shadow
+  --shadow-color: rgba(0, 0, 0, 0.45);
+  --box-shadow-base: @shadow-2;
+  --shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.32), 0 -9px 28px 0 rgba(0, 0, 0, 0.2),
+    0 -12px 48px 16px rgba(0, 0, 0, 0.12);
+  --shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.32), 0 9px 28px 0 rgba(0, 0, 0, 0.2),
+  0 12px 48px 16px rgba(0, 0, 0, 0.12);
+  --shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.32), 9px 0 28px 0 rgba(0, 0, 0, 0.2),
+  12px 0 48px 16px rgba(0, 0, 0, 0.12);
+  --shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 6px 16px 0 rgba(0, 0, 0, 0.32),
+  0 9px 28px 8px rgba(0, 0, 0, 0.2);
+
+  // Buttons
+  --btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+  --btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+  --btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+
+  --btn-default-bg: transparent;
+
+  --btn-default-ghost-color: @text-color;
+  --btn-default-ghost-border: fade(@white, 25%);
+
+  --btn-text-hover-bg: rgba(255, 255, 255, 0.03);
+  --btn-text-active-bg: rgba(255, 255, 255, 0.04);
+
+  // Checkbox
+  --checkbox-check-bg: transparent;
+
+  // Descriptions
+  --descriptions-bg: @background-color-light;
+
+  // Divider
+  --divider-color: rgba(255, 255, 255, 12%);
+
+  // Dropdown
+  --dropdown-menu-submenu-disabled-bg: transparent;
+
+  // Radio
+  --radio-dot-disabled-color: fade(@white, 20%);
+  --radio-solid-checked-color: @white;
+
+  // Radio buttons
+  --radio-disabled-button-checked-bg: fade(@white, 20%);
+
+  // Layout
+  --layout-body-background: @body-background;
+  --layout-header-background: @popover-background;
+  --layout-trigger-background: #262626;
+  //--layout-sider-background-1: tint(#1f1f1f, 10%);
+
+  // Dropdown
+  --dropdown-menu-bg: @popover-background;
+
+  // Input
+  --input-placeholder-color: fade(@white, 30%);
+  --input-icon-color: fade(@white, 30%);
+  --input-bg: transparent;
+  --input-number-handler-active-bg: @item-hover-bg;
+  --input-icon-hover-color: fade(@white, 85%);
+
+  // Mentions
+  --mentions-dropdown-bg: @popover-background;
+
+  // Select
+  --select-dropdown-bg: @popover-background;
+  --select-background: transparent;
+  --select-clear-background: @component-background;
+  --select-selection-item-bg: fade(@white, 8);
+  --select-selection-item-border-color: @border-color-split;
+  --select-multiple-disabled-background: @component-background;
+  --select-multiple-item-disabled-color: #595959;
+  --select-multiple-item-disabled-border-color: @popover-background;
+
+  // Cascader
+  --cascader-bg: transparent;
+  --cascader-menu-bg: @popover-background;
+  --cascader-menu-border-color-split: @border-color-split;
+
+  // Tooltip
+  --tooltip-bg: #434343;
+
+  // Popover
+  --popover-bg: @popover-background;
+
+  // Modal
+  --modal-header-bg: @popover-background;
+  --modal-header-border-color-split: @border-color-split;
+  --modal-content-bg: @popover-background;
+  --modal-footer-border-color-split: @border-color-split;
+
+  // Menu
+  --menu-popup-bg: @popover-background;
+  --menu-dark-bg: @popover-background;
+  --menu-dark-submenu-bg: @component-background;
+
+  // Table
+  --table-header-bg: #1d1d1d;
+  --table-header-sort-bg: #262626;
+  --table-body-sort-bg: fade(@white, 1%);
+  --table-row-hover-bg: #262626;
+  --table-expanded-row-bg: @table-header-bg;
+  --table-header-sort-active-bg: #303030;
+  --table-header-filter-active-bg: #434343;
+
+  // Rate
+  --rate-star-bg: fade(@white, 12%);
+
+  // Card
+  --card-actions-background: @component-background;
+  --card-skeleton-bg: #303030;
+  --card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.64), 0 3px 6px 0 rgba(0, 0, 0, 0.48), 0 5px 12px 4px rgba(0, 0, 0, 0.36);
+  --gradient-min: fade(#303030, 20%);
+  --gradient-max: fade(#303030, 40%);
+
+  // Comment
+  --comment-bg: transparent;
+  --comment-author-time-color: fade(@white, 30%);
+  --comment-action-hover-color: fade(@white, 65%);
+
+  // BackTop
+  --back-top-bg: var(--tooltip-bg);
+  --back-top-hover-bg: var(--border-color-split);
+
+  // Avatar
+  --avatar-bg: fade(@white, 30%);
+
+  // Pagination
+  --pagination-item-bg: transparent;
+  --pagination-item-bg-active: transparent;
+  --pagination-item-link-bg: transparent;
+  --pagination-item-disabled-color-active: @black;
+  --pagination-item-disabled-bg-active: fade(@white, 25%);
+  --pagination-item-input-bg: @pagination-item-bg;
+
+  // PageHeader
+  --page-header-back-color: @icon-color;
+
+  // Slider
+  --slider-rail-background-color: #262626;
+  --slider-rail-background-color-hover: @border-color-base;
+  --slider-dot-border-color: @border-color-split;
+  --slider-dot-border-color-active: @primary-4;
+
+  // Skeleton
+  --skeleton-to-color: fade(@white, 16%);
+
+  // Transfer
+  --transfer-item-hover-bg: #262626;
+
+  // Message
+  --message-notice-content-bg: @popover-background;
+
+  // Drawer
+  --drawer-bg: @popover-background;
+
+  // Timeline
+  --timeline-color: @border-color-split;
+  --timeline-dot-color: @primary-color;
+
+  // Steps
+  --steps-nav-arrow-color: fade(@white, 20%);
+  --steps-background: transparent;
+
+  // Notification
+  --notification-bg: @popover-background;
+
+  // 侧边栏
+  --sidebar-light-shadow: 0 4px 4px rgba(0, 0, 0, .6);
+  --sidebar-dark-shadow: 0 4px 4px rgba(0, 0, 0, .6);
+
+  // 顶栏
+  --header-light-shadow: 0 1px 4px rgba(0, 0, 0, .6);
+  --header-dark-shadow: 0 1px 4px rgba(0, 0, 0, .6);
+  --header-tool-hover-bg: rgba(255, 255, 255, .05);
+  --header-dark-tool-hover-bg: rgba(255, 255, 255, .05);
+
+  // logo
+  --logo-light-shadow: 0 3px 4px rgba(0, 0, 0, .6);
+  --logo-dark-shadow: 0 3px 4px rgba(0, 0, 0, .6);
+}

src/components/ele-admin-pro/packages/style/dynamicTheme.js

@@ -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;

src/components/ele-admin-pro/packages/style/index.less

@@ -0,0 +1,7 @@
+/** ele admin pro license by http://eleadmin.com */
+@import '~ant-design-vue/dist/antd.less';
+
+@import './nprogress.less';
+@import './display.less';
+@import './common.less';
+@import './layout.less';

src/components/ele-admin-pro/packages/style/nprogress.less

@@ -0,0 +1,84 @@
+/* Make clicks pass-through */
+@import './var.less';
+
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: @primary-color;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px @primary-color, 0 0 5px @primary-color;
+  opacity: 1.0;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+  -ms-transform: rotate(3deg) translate(0px, -4px);
+  transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 15px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: @primary-color;
+  border-left-color: @primary-color;
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+  animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/components/ele-admin-pro/packages/style/util.js

@@ -0,0 +1,36 @@
+/** ele admin pro theme util license by http://eleadmin.com */
+import {generate} from '@ant-design/colors';
+import {TinyColor} from '@ctrl/tinycolor';
+
+/**
+ * 切换主题色
+ * @param color 颜色值
+ * @param dark 是否暗黑模式
+ */
+export function changeColor(color, dark) {
+  const id = `ele-admin-theme-var`, elem = document.getElementById(id);
+  if (elem && elem.parentNode) {
+    elem.parentNode.removeChild(elem);
+  }
+  if (color) {
+    const colors = generate(color, dark ? {theme: 'dark'} : {}),
+      rgb = new TinyColor(color).toRgb(),
+      clazz = dark ? '.ele-admin-theme-dark' : ':root',
+      elem = document.createElement('style');
+    elem.id = id;
+    elem.setAttribute('type', 'text/css');
+    elem.innerHTML = `${clazz}{` + colors.map((c, i) => {
+      return `--primary-${i + 1}:${c};`;
+    }).concat([
+      `--primary-color:${color};`,
+      `--primary-fade-8:rgba(${rgb.r},${rgb.g},${rgb.b},.08);`,
+      `--primary-fade-20:rgba(${rgb.r},${rgb.g},${rgb.b},.2);`
+    ]).join('') + '}';
+    document.head.appendChild(elem);
+  }
+  if (dark) {
+    document.body.classList.add('ele-admin-theme-dark');
+  } else {
+    document.body.classList.remove('ele-admin-theme-dark');
+  }
+}

src/components/ele-admin-pro/packages/style/var.less

@@ -0,0 +1,58 @@
+/** ele admin pro variables license by http://eleadmin.com */
+@import '~ant-design-vue/lib/style/themes/default.less';
+
+// 框架布局最小z-index(多页签[最小]->「顶栏|侧栏」[+2|+3|+1]->移动端遮罩层[+3])
+@layout-z-index: 99;
+
+// 侧边栏
+@sidebar-width: 210px; // 侧边栏宽度
+@sidebar-collapse-width: 48px; // 侧边栏折叠后宽度
+@sidebar-light-shadow: 1px 3px 3px rgba(0, 21, 41, .08); // 侧栏亮色阴影
+@sidebar-dark-shadow: 0 4px 4px rgba(0, 0, 0, .35); // 侧栏暗色阴影
+@sidebar-colorful-icon-width: 26px; // 侧边栏彩色图标宽度
+@sidebar-colorful-icon-size: @font-size-base; // 侧边栏彩色图标字体大小
+@sidebar-transition-anim: .3s cubic-bezier(0.2, 0, 0, 1) 0s; // 侧边栏过渡动画
+@sidebar-transition: width @sidebar-transition-anim, left @sidebar-transition-anim, box-shadow @sidebar-transition-anim; // 侧边栏过渡动效
+@sidebar-nav-width: 80px; // 侧边栏一级菜单宽度
+@sidebar-nav-padding: 0 @padding-xs; // 侧边栏一级菜单内间距
+@sidebar-collapse-nav-padding: 0 @padding-xss; // 侧边栏折叠后一级菜单内间距
+@sidebar-nav-pop-menu-margin: @padding-xs; // 侧边栏一级菜单pop菜单的左右margin
+@sidebar-nav-font-size: @font-size-sm; // 侧边栏一级菜单item字体大小
+@sidebar-nav-icon-font-size: @font-size-lg; // 侧边栏一级菜单item图标字体大小
+@sidebar-nav-item-padding: @padding-sm 0; // 侧边栏一级菜单item内间距
+@sidebar-collapse-nav-item-padding: @padding-sm 0; // 侧边栏一级菜单折叠后item内间距
+@sidebar-nav-item-title-margin: (@padding-sm / 2) 0 0 0; // 侧边栏一级菜单item标题外间距
+@sidebar-nav-item-margin: @padding-xss 0 @padding-xs 0; // 侧边栏一级菜单item外间距
+@sidebar-collapse-nav-item-margin: @padding-xss 0 @padding-xs 0; // 侧边栏折叠后一级菜单item外间距
+
+// 顶栏
+@header-height: 48px; // 顶栏高度
+@header-light-shadow: 0 1px 4px rgba(0, 21, 41, .08); // 顶栏亮色阴影
+@header-dark-shadow: 0 1px 4px rgba(0, 0, 0, .1); // 顶栏暗色阴影
+@header-avatar-size: 28px; // 顶栏头像大小
+@header-tool-hover-bg: rgba(0, 0, 0, .025); // 顶栏工具按钮hover背景
+@header-dark-tool-hover-bg: rgba(255, 255, 255, .05); // 顶栏暗色工具按钮hover背景
+
+// logo
+@logo-size: 30px; // logo大小
+@logo-font-size: @font-size-lg + 2px; // logo文字大小
+@logo-light-color: @heading-color; // logo亮色文字颜色
+@logo-dark-color: @menu-dark-selected-item-text-color; // logo暗色文字颜色
+@logo-light-shadow: 1px 2px 3px rgba(0, 21, 41, .08); // logo亮色阴影
+@logo-dark-shadow: 0 3px 4px rgba(0, 0, 0, .35); // logo暗色阴影
+
+// 标签页
+@tabs-height: 40px; // 标签页高度
+@tabs-card-padding: @padding-xs; // 标签页卡片式间距
+
+// 主体内容定宽
+@body-limit-width: 1200px;
+
+// 返回顶部
+@layout-back-top-right: 30px;
+@layout-back-top-bottom: 60px;
+
+// Modal
+@modal-header-padding: 14px 24px;
+@modal-close-x-height: 50px;
+@modal-close-x-width: 56px;