perf: 优化主题配置文件对象写法

public/theme/element-extra.css

@@ -11,17 +11,14 @@
   color: light-2;
 }
 
-.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
-  background-color: primary;
-  color: white!important;
-}
-
 .el-pagination.is-background .el-pager li:not(.disabled):hover {
   color: white;
   background-color: primary;
 }
 
-.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
+.el-pagination.is-background .btn-next,
+.el-pagination.is-background .btn-prev,
+.el-pagination.is-background .el-pager li {
   margin: 0 5px;
   background-color: white;
   color: #606266;
@@ -311,7 +308,9 @@ td .el-button.el-button--mini {
   border-bottom: 1px solid #e7e7e7 !important;
 }
 
-.el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
+.el-table .cell,
+.el-table--border td:first-child .cell,
+.el-table--border th:first-child .cell {
   padding-left: 10px;
   padding-right: 14px;
 }

src/styles/element-ui.scss

@@ -1,6 +0,0 @@
-@import "./variables";
-
-
-
-
-

src/styles/var.scss

@@ -1,7 +1,7 @@
 /* 参考根目录下的 element-variables */
 /* 切记此处不修改配置，以element-variables为准，可适当增加自定义配置 */
 /* 如果要修改element-variables，请执行npm run build_theme更新主题 */
-@import "./element-variables.scss";
+@import "../../public/theme/element-variables.scss";
 
 :export {
   name: "scss";

src/utils/theme/color.js

@@ -15,7 +15,8 @@ export const matchColor = {
 
 export function generateColors(primary) {
   const colors = {}
-  const otherColor = themeOptions[primary] || defaultThemeConfigValue || {}
+  const themeConfig = _.findKey(themeOptions, ['--color-primary', primary])
+  const otherColor = themeOptions[themeConfig] || defaultThemeConfigValue
 
   Object.keys(formula).forEach((key) => {
     let value
@@ -72,7 +73,8 @@ export function mix(color_1, color_2, weight) {
 }
 
 export function changeSidebarColor(primary) {
-  const colors = themeOptions[primary] || defaultThemeConfigValue || {}
+  const themeConfig = _.findKey(themeOptions, ['--color-primary', primary])
+  const colors = themeOptions[themeConfig] || defaultThemeConfigValue || {}
   const elementStyle = document.documentElement.style
 
   for (const key in colors) {
@@ -84,6 +86,5 @@ export function changeSidebarColor(primary) {
       elementStyle.setProperty('--submenu-bg', mix('000000', changeColor, 20))
       elementStyle.setProperty('--submenu-hover', mix('000000', changeColor, 30))
     }
-    elementStyle.setProperty('--color-primary', primary)
   }
 }

src/utils/theme/themeConfigs/chinese_red.js

@@ -1,5 +1,6 @@
 const config = {
-  '#bd1a2d': {
+  chinese_red: {
+    '--color-primary': '#bd1a2d',
     '--color-success': '#E98737',
     '--color-info': '#f06f06',
     '--color-warning': '#f82ed3',

src/utils/theme/themeConfigs/deep_black.js

@@ -1,5 +1,6 @@
 const config = {
-  '#0576b9': {
+  deep_black: {
+    '--color-primary': '#0576b9',
     '--color-success': '#2cb57e',
     '--color-info': '#47bce8',
     '--color-warning': '#f5bd58',

src/utils/theme/themeConfigs/default.js

@@ -1,5 +1,6 @@
 const config = {
-  '#1ab394': {
+  default: {
+    '--color-primary': '#1ab394',
     '--color-success': '#1c84c6',
     '--color-info': '#23c6c8',
     '--color-warning': '#f8ac59',

src/utils/theme/themeConfigs/tech_blue.js

@@ -1,5 +1,6 @@
 const config = {
-  '#174779': {
+  tech_blue: {
+    '--color-primary': '#174779',
     '--color-success': '#174779',
     '--color-info': '#17a2b8',
     '--color-warning': '#ffc107',