perf: 修改主题设置方式

public/theme/element-extra.css

@@ -34,7 +34,7 @@
     .el-pagination__total,
     .el-pagination__sizes,
     .el-pager {
-        color: var(--el-icon-color);
+        color: var(--color-icon-primary);
     }
 }
 
@@ -48,7 +48,7 @@
 .el-pagination.is-background .el-pager li {
     margin: 0 5px;
     background-color: #fff;
-    color: var(--el-icon-color);
+    color: var(--color-icon-primary);
     min-width: 28px;
     border-radius: 2px;
     border: 1px solid #DCDFE6;
@@ -237,7 +237,7 @@ td .el-button.el-button--mini {
 .el-tag.el-tag--info .el-tag__close {
     display: inline-block;
     margin-top: 3px;
-    color: var(--el-text-color);
+    color: var(--color-text-primary);
     background-color: inherit;
 }
 
@@ -293,7 +293,7 @@ td .el-button.el-button--mini {
 }
 
 .el-textarea__inner {
-    color: var(--el-text-color);
+    color: var(--color-text-primary);
 }
 
 .el-pagination.is-background .number {
@@ -437,7 +437,7 @@ td .el-button.el-button--mini {
 }
 
 .el-dialog .el-dialog__header .el-dialog__title {
-    color: var(--el-text-color);
+    color: var(--color-text-primary);
 }
 
 .el-dialog  .el-dialog__body {
@@ -449,12 +449,12 @@ td .el-button.el-button--mini {
 .el-dialog .el-dialog__body .el-transfer-panel .el-transfer-panel__body .el-input__inner,
 .el-dialog .el-dialog__body .el-transfer-panel .el-transfer-panel__header .el-checkbox__label,
 .el-dialog .el-dialog__body .el-transfer-panel .el-transfer-panel__body .el-checkbox-group .el-checkbox.el-transfer-panel__item {
-    color: var(--el-text-color);
+    color: var(--color-text-primary);
 }
 
 .el-dialog .el-dialog__body .opera .el-button.is-disabled,
 .el-dialog .el-dialog__body .el-transfer-panel .vip-footer .el-button.is-disabled {
-    color: var(--el-input-border-color);
+    color: var(--color-input-border);
 }
 
 .el-dialog .el-dialog__body .opera .el-button.is-disabled.el-button--primary {

src/App.vue

@@ -6,7 +6,6 @@
 
 <script>
 import { mapState } from 'vuex'
-import { useCommonColor } from '@/styles/commonColor'
 
 export default {
   name: 'App',
@@ -14,9 +13,6 @@ export default {
     ...mapState({
       isRouterAlive: state => state.common.isRouterAlive
     })
-  },
-  beforeMount() {
-    useCommonColor()
   }
 }
 </script>

src/components/Cards/DetailCard/index.vue

@@ -88,7 +88,7 @@ export default {
     >>> .el-form-item__label {
       padding-right: 8%;
       overflow: hidden;
-      color: var(--el-icon-color);
+      color: var(--color-icon-primary);
 
       span {
         display: inline-block;
@@ -97,7 +97,7 @@ export default {
     }
 
     ::v-deep .el-form-item__content {
-      color: var(--el-text-color);
+      color: var(--color-text-primary);
       font-size: 13px;
       line-height: 40px;
     }

src/components/DataActions/index.vue

@@ -198,7 +198,7 @@ export default {
   }
 
   .el-button.el-button--default {
-    color: var(--el-text-color);
+    color: var(--color-text-primary);
   }
 }
 
@@ -209,7 +209,7 @@ export default {
 
     .more-action.el-button--default {
       ::v-deep .el-icon-arrow-down.el-icon--right {
-        color: var(--el-icon-color) !important;
+        color: var(--color-icon-primary) !important;
       }
     }
 
@@ -261,7 +261,7 @@ export default {
     &.el-dropdown-menu__item--divided {
       margin-top: 0;
       border-top: none;
-      color: var(--el-text-color);
+      color: var(--color-text-primary);
       cursor: auto;
       font-size: 12px;
       line-height: 30px;
@@ -274,7 +274,7 @@ export default {
   }
 
   .dropdown-item {
-    color: var(--el-icon-color);
+    color: var(--color-icon-primary);
 
     .pre-icon {
       width: 17px;
@@ -296,11 +296,11 @@ export default {
   }
 
   .el-dropdown-menu__item {
-    color: var(--el-icon-color);
+    color: var(--color-icon-primary);
 
     &:not(.is-disabled):hover {
-      color: var(--el-text-color);
+      color: var(--color-text-primary);
-      background-color: var(--el-disabled-background-color);
+      background-color: var(--color-disabled-background);
     }
   }
 

src/components/Form/DataForm/index.vue

@@ -158,9 +158,13 @@ export default {
 .el-form {
   margin-right: 80px;
 
+  ::v-deep .el-input-group__prepend {
+    border-radius: 0;
+  }
+
   ::v-deep .form-group-header {
     margin-left: 50px;
-    color: var(--el-text-color);
+    color: var(--color-text-primary);
   }
 
   ::v-deep .el-form-item {
@@ -173,10 +177,10 @@ export default {
     .el-form-item__label {
       padding: 0 30px 0 0;
       line-height: 32px;
-      color: var(--el-text-color);
+      color: var(--color-text-primary);
 
       i {
-        color: var(--el-icon-color);
+        color: var(--color-icon-primary);
       }
     }
 
@@ -186,8 +190,8 @@ export default {
 
       // 禁用的输入框
       .el-input.is-disabled .el-input__inner {
-        color: var(--el-icon-color) !important;
+        color: var(--color-icon-primary) !important;
-        background-color: var(--el-disabled-background-color);
+        background-color: var(--color-disabled-background);
       }
 
       // 复合型输入框
@@ -207,18 +211,18 @@ export default {
 
         .el-input__inner {
           border-radius: 0;
-          color: var(--el-text-color);
+          color: var(--color-text-primary);
         }
 
         .el-input-group__append {
-          border: 1px solid var(--el-input-border-color);
+          border: 1px solid var(--color-input-border);
           border-left: 0 !important;
         }
       }
 
       // 普通的输入框
       .el-input .el-input__inner {
-        color: var(--el-text-color);
+        color: var(--color-text-primary);
       }
 
       // 不符合校验规则的提示信息
@@ -236,7 +240,7 @@ export default {
 
         // 选择普通 item 时的样式
         .el-input .el-input__inner {
-          color: var(--el-text-color);
+          color: var(--color-text-primary);
         }
       }
 
@@ -247,14 +251,14 @@ export default {
       .el-data-table .el-table {
         margin: 5px 0;
         border-radius: 4px;
-        border: 1px solid var(--el-input-border-color);
+        border: 1px solid var(--color-input-border);
       }
 
       .help-block {
         display: block;
         margin-top: 2px;
         margin-bottom: 5px;
-        color: var(--el-form-tip-text-color);
+        color: var(--color-help-text);
         font-size: 12px;
         line-height: 18px;
         word-break: keep-all;

src/components/Form/FormFields/DatetimeRangePicker.vue

@@ -94,11 +94,11 @@ export default {
   ::v-deep .el-range-separator,
   ::v-deep .el-input__icon {
     line-height: 26px;
-    color: var(--el-icon-color) !important;
+    color: var(--color-icon-primary) !important;
   }
 
   ::v-deep .el-range-input {
-    color: var(--el-text-color) !important;
+    color: var(--color-text-primary) !important;
   }
 
   ::v-deep .el-range-input {

src/components/IBox/index.vue

@@ -36,7 +36,7 @@ export default {
 }
 </script>
 
-<style scoped lang='scss'>
+<style lang='scss' scoped>
   .ibox {
     /*height: 100%;*/
     clear: both;
@@ -83,6 +83,6 @@ export default {
 
   .ibox >>> .el-card__body {
     padding: 15px 30px 20px 30px;
-    color: var(--el-icon-color);
+    color: var(--color-icon-primary);
   }
 </style>

src/components/Table/ListTable/TableAction/LabelSearch.vue

@@ -151,7 +151,7 @@ export default {
 <style lang='scss' scoped>
 .label-search {
   margin-right: 10px;
-  border: 1px solid var(--el-disabled-background-color);
+  border: 1px solid var(--color-disabled-background);
   border-radius: 3px;
 
   ::v-deep .el-button.label-button {
@@ -170,7 +170,7 @@ export default {
       }
 
       .el-input__suffix {
-        color: var(--el-icon-color) !important; ;
+        color: var(--color-icon-primary) !important; ;
       }
     }
 
@@ -180,7 +180,7 @@ export default {
       overflow: hidden;
 
       .el-tag.el-tag--info {
-        color: var(--el-text-color) !important;
+        color: var(--color-text-primary) !important;
       }
 
       .el-cascader__search-input {
@@ -190,7 +190,7 @@ export default {
   }
 
   ::v-deep .svg-icon {
-    color: var(--el-icon-color) !important;
+    color: var(--color-icon-primary) !important;
   }
 }
 </style>

src/components/Table/ListTable/TableAction/RightSide.vue

@@ -137,7 +137,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .right-side-actions.right-side-item {
   display: flex;
   align-items: center;
@@ -150,7 +150,7 @@ export default {
     border: none;
     padding: 5px;
     font-size: 14px;
-    color: var(--el-icon-color);
+    color: var(--color-icon-primary);
     background-color: transparent;
 
     &:hover {

src/components/Table/TagSearch/index.vue

@@ -352,7 +352,7 @@ export default {
   align-items:  center;
   min-width: 198px;
   //height: 30px;
-  border: 1px solid var(--el-disabled-background-color);
+  border: 1px solid var(--color-disabled-background);
   border-radius: 4px;
   background-color: #fff;
   box-sizing: border-box;
@@ -368,7 +368,7 @@ export default {
     }
 
     ::v-deep .el-input__suffix {
-      color: var(--el-icon-color) !important;
+      color: var(--color-icon-primary) !important;
 
       .el-input__suffix-inner {
         line-height: 30px;
@@ -404,7 +404,7 @@ export default {
       i {
         line-height: 30px;
         font-weight: 500;
-        color: var(--el-icon-color);
+        color: var(--color-icon-primary);
       }
     }
 

src/layout/components/GenericCreateUpdatePage/index.vue

@@ -24,7 +24,7 @@ export default {
 
   .el-card__body {
     padding-top: 30px;
-    padding-bottom: 30px;
+    padding-bottom: 60px;
   }
 }
 </style>

src/layout/components/Page/PageHeading.vue

@@ -66,9 +66,9 @@ export default {
 .page-heading-left,
 h2 {
   font-size: 16px;
-  font-weight: 500;
+  font-weight: 600;
-  line-height: 32px;
+  line-height: 2;
-  color: var(--el-text-color);
+  color: var(--color-text-primary);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

src/styles/commonColor/index.js

@@ -1,13 +0,0 @@
-const commonColor = {
-  '--el-text-color': '#1F2329',
-  '--el-icon-color': '#646A73',
-  '--el-input-border-color': '#BBBFC4',
-  '--el-disabled-background-color': '#dcdee2',
-  '--el-form-tip-text-color': '#8F959E'
-}
-
-export const useCommonColor = () => {
-  for (const [key, value] of Object.entries(commonColor)) {
-    document.documentElement.style.setProperty(key, value)
-  }
-}

src/styles/default-theme.scss

@@ -1,22 +1,3 @@
-:root {
-  --color-primary: #1ab394;
-  --color-success: #2793d7;
-  --color-info: #1c84c6;
-  --color-warning: #f8ac59;
-  --color-danger: #ed5565;
-  --color-link: #1c84c6;
-  --color-text: #1F2329;
-  --color-text-2: #646a73;
-  --color-text-3: #8f959e;
-  --color-text-4: #bbbfc4;
-  --banner-bg: #148f76;
-  --submenu-bg: #ffffff;
-  --menu-bg: #ffffff;
-  --menu-text: #646A73;
-  --menu-text-active: #1ab394;
-  --menu-hover: #ffffff;
-}
-
 :export {
   --color-primary: #1ab394;
   --color-success: #2793d7;
@@ -24,6 +5,11 @@
   --color-warning: #f8ac59;
   --color-danger: #ed5565;
   --color-link: #1c84c6;
+  --color-text-primary: #292827;
+  --color-icon-primary: #605e5c;
+  --color-input-border: #BBBFC4;
+  --color-disabled-background: #dcdee2;
+  --color-help-text: #8F959E;
   --banner-bg: #148f76;
   --submenu-bg: #ffffff;
   --menu-bg: #ffffff;

src/styles/index.scss

@@ -35,7 +35,7 @@ body {
   height: calc(100% - 50px);
   overflow: hidden;
   -moz-osx-font-smoothing: grayscale;
-  color: var(--el-text-color);
+  color: var(--color-text-primary);
   font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 13px;
   line-height: 1.428;
@@ -233,11 +233,11 @@ input[type=file] {
 .el-timeline .el-timeline-item {
   .el-timeline-item__wrapper {
     .el-timeline-item__content {
-      color: var(--el-text-color);
+      color: var(--color-text-primary);
     }
 
     .el-timeline-item__timestamp.is-bottom {
-      color: var(--el-form-tip-text-color);
+      color: var(--color-help-text);
     }
   }
 }
@@ -249,7 +249,7 @@ input[type=file] {
     font-size: 13px;
     line-height: 1.5;
     border-right: none;
-    color: var(--el-text-color);
+    color: var(--color-text-primary);
   }
 
   th {
@@ -283,7 +283,7 @@ input[type=file] {
   // 表头
   .el-table__header thead > tr > th {
     .cell {
-      color: var(--el-icon-color);
+      color: var(--color-text-primary);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -319,7 +319,7 @@ input[type=file] {
         width: auto !important;
 
         .el-tooltip > span {
-          color: var(--el-text-color);
+          color: var(--color-text-primary);
         }
 
         .label-container .label-formatter-col div {
@@ -391,17 +391,17 @@ input[type=file] {
 }
 
 .el-cascader__dropdown .el-cascader-panel .el-cascader-menu {
-  color: var(--el-text-color) !important;
+  color: var(--color-text-primary) !important;
 }
 
 .el-card .el-card__header {
-  color: var(--el-text-color);
+  color: var(--color-text-primary);
 }
 
 .el-alert {
   .el-alert__description,
   .el-alert__title{
-    color: var(--el-text-color) !important;
+    color: var(--color-text-primary) !important;
   }
 }
 

src/utils/theme/color.js

@@ -70,6 +70,13 @@ export function mix(color_1, color_2, weight) {
   return color
 }
 
+export function setRootColors() {
+  const themeColors = defaultThemeConfig || {}
+  for (const [key, value] of Object.entries(themeColors)) {
+    document.documentElement.style.setProperty(key, value)
+  }
+}
+
 export function changeMenuColor(themeColors) {
   const elementStyle = document.documentElement.style
   const colors = Object.keys(themeColors).length > 0 ? themeColors : defaultThemeConfig
@@ -80,12 +87,11 @@ export function changeMenuColor(themeColors) {
   // 后端不用返回 --menu-hover
   const menuActiveTextColor = colors['--menu-text-active']
   if (menuActiveTextColor) {
-    const menuHover = mix(white, menuActiveTextColor.replace(/#/g, ''), 90)
+    colors['--menu-hover'] = mix(white, menuActiveTextColor.replace(/#/g, ''), 90)
-    colors['--menu-hover'] = menuHover
   }
 
   const lights = [15, 40, 60, 80]
-  const darks = [15, 30, 40, 60]
+  const darken = [15, 30, 40, 60]
 
   for (const key in colors) {
     const currentColor = colors[key]
@@ -96,7 +102,7 @@ export function changeMenuColor(themeColors) {
         const color = mix(white, currentColor.replace(/#/g, ''), light)
         elementStyle.setProperty(key + '-light' + '-' + i, color)
       }
-      for (const [i, dark] of darks.entries()) {
+      for (const [i, dark] of darken.entries()) {
         const color = mix(black, currentColor.replace(/#/g, ''), dark)
         elementStyle.setProperty(key + '-dark' + '-' + i, color)
       }

src/utils/theme/index.js

@@ -1,4 +1,4 @@
-import { changeMenuColor, generateColors, mix } from './color'
+import { changeMenuColor, generateColors, mix, setRootColors } from './color'
 import axios from 'axios'
 import formula from './formula.json'
 
@@ -74,6 +74,7 @@ export function changeThemeColors(themeColors) {
       resolve()
     }
   }).then(() => {
+    setRootColors()
     changeMenuColor(themeColors)
     changeElementColor(themeColors)
   })
@@ -92,3 +93,4 @@ export function replaceStyleColors(data) {
 
   return data
 }
+

src/views/dashboard/components/DataCard.vue

@@ -60,7 +60,7 @@ export default {
 
     .title,
     .num{
-      color: var(--el-text-color);
+      color: var(--color-text-primary);
     }
 
     .title {
@@ -76,7 +76,7 @@ export default {
 
     .sub,
     .add {
-      color: var(--el-icon-color);
+      color: var(--color-icon-primary);
     }
 
     .sub {

src/views/dashboard/components/SummaryCard.vue

@@ -38,7 +38,7 @@ export default {
 
 <style lang="scss" scoped>
 .summary-header {
-  color: var(--el-icon-color);
+  color: var(--color-icon-primary);
 
   .title {
     font-style: normal;
@@ -56,7 +56,7 @@ export default {
     font-weight: 500;
     font-size: 24px;
     line-height: 40px;
-    color: var(--el-text-color);
+    color: var(--color-text-primary);
   }
 
   .disabled-link {

src/views/dashboard/components/SwitchDate.vue

@@ -73,7 +73,7 @@ export default {
       padding: 4px 0;
 
       .el-radio-button__inner {
-        color: var(--el-text-color);
+        color: var(--color-text-primary);
         background-color: #FFF;
         border-radius: 4px;
         box-shadow: 0 1px 2px rgba(31 35 41 / 12%) !important;

src/views/tickets/components/Steps.vue

@@ -139,11 +139,11 @@ export default {
 
 .el-steps {
   .el-step__main .el-step__title {
-    color: var(--el-text-color);
+    color: var(--color-text-primary);
   }
 
   .el-step__main .el-step__description {
-    color: var(--el-form-tip-text-color);
+    color: var(--color-help-text);
   }
 }
 </style>

src/views/workbench/myhome/components/User.vue

@@ -92,7 +92,7 @@ li {
     text-overflow: ellipsis;
 
     .title {
-      color: var(--el-text-color);
+      color: var(--color-text-primary);
     }
   }
 }