抽离样式变量

src/assets/styles/index.less

@@ -7,7 +7,7 @@
 html {
     font-family: @font-family;
     -webkit-text-size-adjust: 100%;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: @m-black;
     // better Font Rendering
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -23,9 +23,9 @@ body {
 
 // 布局组件样式初始化
 .ant-layout {
-    background: rgb(255 255 255);
+    background: @m-white;
     aside {
-        background: rgb(255 255 255);
+        background: @m-white;
         .ant-layout-sider-children {
             section {
             }
@@ -33,11 +33,11 @@ body {
     }
     > section {
         header {
-            background: rgb(255 255 255);
+            background: @m-white;
             padding: 0;
         }
         main {
-            background: rgb(255 255 255);
+            background: @m-white;
             header {
             }
             main {
@@ -49,13 +49,13 @@ body {
 .ant-card .ant-card-head {
     border: none;
     .ant-card-head-wrapper {
-        border-bottom: 1px solid rgb(240, 240, 240);
+        border-bottom: 1px solid @m-white2;
         .ant-card-head-title {
             text-align: left;
             font-size: 16px;
             font-family: Source Han Sans CN;
             font-weight: 500;
-            color: #444444;
+            color: @m-grey24;
         }
     }
 }
@@ -63,32 +63,26 @@ body {
 .ant-steps .ant-steps-item:not(.ant-steps-item-active) > .ant-steps-item-container[role='button']:hover .ant-steps-item-title,
 .ant-steps .ant-steps-item:not(.ant-steps-item-active) > .ant-steps-item-container[role='button']:hover .ant-steps-item-subtitle,
 .ant-steps .ant-steps-item:not(.ant-steps-item-active) > .ant-steps-item-container[role='button']:hover .ant-steps-item-description {
-    color: rgb(26, 187, 207);
+    color: @m-green2;
 }
 .ant-steps .ant-steps-item:not(.ant-steps-item-active):not(.ant-steps-item-process) > .ant-steps-item-container[role='button']:hover .ant-steps-item-icon {
-    border-color: rgb(26, 187, 207);
+    border-color: @m-green2;
 }
 .ant-modal-title {
     font-size: 18px;
     font-family: Source Han Sans CN;
     font-weight: 500;
-    color: #1abbcf;
+    color: @m-green3;
 }
 .submit {
-    background: #1abbcf;
+    background: @m-green3;
     border-radius: 3px;
-    color: #fff;
+    color: @m-white0;
 }
 .ant-btn-primary {
-    background-color: #1abbcf;
+    background-color: @m-green3;
 }
 
-// .ant-checkbox-checked .ant-checkbox-inner,
-// .ant-btn-primary:hover,
-// .ant-btn-primary:focus {
-//     color: #fff !important;
-//     background-color: #2ac1d8 !important;
-// }
 
 .ant-btn:hover,
 .ant-btn:focus,
@@ -101,14 +95,14 @@ body {
 .ant-menu-item-selected,
 .ant-menu-item-selected > a,
 .ant-menu-item-selected > a:hover {
-    color: #1abbcf;
+    color: @m-green3;
 }
 
 .ant-menu-vertical .ant-menu-item::after,
 .ant-menu-vertical-left .ant-menu-item::after,
 .ant-menu-vertical-right .ant-menu-item::after,
 .ant-menu-inline .ant-menu-item::after {
-    border-right: 3px solid #1abbcf;
+    border-right: 3px solid @m-green3;
 }
 
 .ant-checkbox-checked::after,
@@ -128,17 +122,17 @@ body {
 .ant-input:focus,
 .ant-input:hover,
 .ant-btn:focus {
-    border-color: #1abbcf;
+    border-color: @m-green3;
 }
 
 .ant-input-affix-wrapper:focus,
 .ant-btn:focus {
-    box-shadow: rgb(26 187 207 / 20%) 0px 0px 0px 2px;
+    box-shadow: @m-black19 0px 0px 0px 2px;
 }
 
 ::selection {
-    color: rgb(255, 255, 255);
-    background: rgb(54 187 207);
+    color: @m-white0;
+    background: @m-white2;
 }
 
 .ant-modal-wrap {
@@ -206,13 +200,13 @@ body {
 
 .ant-menu-dark,
 .ant-menu-dark {
-    background-color: #1d2327;
+    background-color: @m-grey18;
     .ant-menu-submenu-title {
         font-size: 16px;
         text-align: left;
     }
     .ant-menu-sub {
-        background-color: #14181b;
+        background-color: @m-black4;
         .ant-menu-item {
             font-size: 14px;
             font-family: @menu-item-family;
@@ -249,8 +243,8 @@ body {
 .ant-table-wrapper {
     .ant-table-thead {
         tr th {
-            background: #212629;
-            color: #556772;
+            background: @m-black8;
+            color: @m-grey17;
             font-size: 14px;
             font-family: Adobe Heiti Std;
         }
@@ -265,10 +259,10 @@ body {
     }
 
     .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
-        background: #172b56;
+        background: @m-blue3;
     }
     .ant-table-body tr td {
-        background-color: #0E0E0F;
+        background-color: @m-black2;
         color: white;
         cursor: pointer;
     }
@@ -276,16 +270,16 @@ body {
         padding: 0;
         height: 34px;
         line-height: 34px;
-        border-color: #161a1c;
+        border-color: @m-black9;
         font-family: Adobe Heiti Std;
         font-size: 16px;
     }
     .ant-table-fixed {
         width: max-content !important;
-        color: #e5e5e5;
-        background: #0e0e0f;
-        border-top-color: #0e0e0f !important;
-        border-left-color: #161a1c !important;
+        color: @m-white1;
+        background: @m-black2;
+        border-top-color: @m-black2 !important;
+        border-left-color: @m-black9 !important;
     }
 }
 

src/assets/styles/mixin.less

@@ -50,7 +50,7 @@
     -webkit-transition: @property @duration @timing-function;
     -moz-transition: @property @duration @timing-function;
 }
-.borderStyle(@width: 1px, @style: solid, @color: #181d1f) {
+.borderStyle(@width: 1px, @style: solid, @color: @m-black16) {
     border: @width @style @color;
 }
 .resetElement(@border: 0, @background: transparent, @radius: 0) {
@@ -154,16 +154,16 @@
     background: @m-grey21;
     border: 1px solid @m-grey14;
     border-radius: 3px;
-    color: #E5E5E5;
+    color: @m-white1;
     .ant-input {
-        color: #E5E5E5;
+        color: @m-white1;
         background: transparent;
     }
     .ant-input-suffix {
-        color: #E5E5E5;
+        color: @m-white1;
     }
     &:hover, &:focus {
-        border-color:#0C95FF;
+        border-color:@m-blue10;
     }
 }
 .tableConditionInput {
@@ -181,9 +181,9 @@
 }
 
 .ant-select-dropdown {
-    background: #424E59;
-    border: 1px solid #48545F;
-    box-shadow: 0px 10px 10px 0px rgba(18, 22, 24, 0.36);
+    background: @m-grey22;
+    border: 1PX solid @m-grey23;
+    box-shadow: 0px 10px 10px 0px @m-black18;
     border-radius: 5px;
     .ant-select-item {
         color:@m-grey1;
@@ -203,7 +203,7 @@
         }
         .ant-table-thead {
             tr {
-                box-shadow: 0px 1px 0px 0px #2E3539;
+                box-shadow: 0px 1px 0px 0px @m-black17;
                 th {
                     line-height: 34px;
                     background: @m-black8;
@@ -278,7 +278,7 @@
         }
         .ant-table-thead {
             tr {
-                box-shadow: 0px 1px 0px 0px #2E3539;
+                box-shadow: 0px 1px 0px 0px @m-black17;
                 th {
                     line-height: 34px;
                     background: @m-black8;
@@ -346,7 +346,7 @@
         }
         .ant-table-thead {
             tr {
-                box-shadow: 0px 1px 0px 0px #2E3539;
+                box-shadow: 0px 1px 0px 0px @m-black17;
                 th {
                     line-height: 34px;
                     background: @m-black8;
@@ -442,7 +442,7 @@
         }
         .ant-table-thead {
             tr {
-                box-shadow: 0px 1px 0px 0px #2E3539;
+                box-shadow: 0px 1px 0px 0px @m-black17;
                 th {
                     line-height: 36px;
                     background: @m-grey11;
@@ -498,7 +498,7 @@
     max-height: 100%;
     padding-bottom: 0;
     .ant-modal-content {
-        background: #0F1A25;
+        background: @m-grey11;
         border-radius: 5px;
         height: 100%;
         .ant-modal-close {
@@ -507,13 +507,13 @@
                 height: 40px;
                 line-height: 40px;
                 .ant-modal-close-icon {
-                    color: #1271BA;
+                    color: @m-blue11;
                 }
             }
         }
         .ant-modal-header {
             height: 40px;
-            background: linear-gradient(0deg, #112C43, #084258);
+            background: linear-gradient(0deg, @m-blue4, @m-blue5);
             border-radius: 5px;
             padding: 0;
             text-align: center;
@@ -663,27 +663,27 @@
         height: 30px;
         padding: 0 8px;
         background: @m-grey21;
-        border: 1px solid #0C95FF;
+        border: 1px solid @m-blue10;
         border-radius: 3px;
-        color: #E5E5E5;
+        color: @m-white1;
     }
     .ant-select-arrow {
         right: 8px;
-        color: #3A87F7;
+        color: @m-blue0;
     }
 }
 .inlineFormSelect.ant-select-single {
     .rounded-corners(3px);
-    border: 1px solid #2B3F52;
+    border: 1px solid @m-grey14;
     &:hover, &:focus {
-        border-color:#0C95FF;
+        border-color:@m-blue10;
     }
     .ant-select-selector {
         height: 30px;
         padding: 0 8px;
         background: @m-grey21;
         border: 0;
-        color: #E5E5E5;
+        color: @m-white1;
         .ant-select-selection-placeholder {
             color: @m-grey10;
         }
@@ -691,7 +691,7 @@
     }
     .ant-select-arrow {
         right: 8px;
-        color: #3A87F7 !important;
+        color: @m-blue0 !important;
     }
 }
 .shortSelect.ant-select-single:extend(.inlineFormSelect.ant-select-single) {
@@ -705,16 +705,16 @@
 }
 .typeSelect.ant-select-single {
     .rounded-corners(3px);
-    border: 1px solid #2B3F52;
+    border: 1px solid @m-grey14;
     &:hover, &:focus {
-        border-color:#0C95FF;
+        border-color:@m-blue10;
     }
     .ant-select-selector {
         height: 30px;
         padding: 0 8px;
         background: @m-grey21;
         border: 0;
-        color: #E5E5E5;
+        color: @m-white1;
         .ant-select-selection-placeholder {
             color: @m-grey10;
         }
@@ -727,7 +727,7 @@
 }
 
 .input-enumdicname {
-    color: #394753;
+    color: @m-grey10;
     margin-left: 5px;
     font-size: 16px;
   }
@@ -736,17 +736,17 @@
     background: @m-grey21;
     border: 1px solid @m-grey14;
     border-radius: 3px;
-    color: #E5E5E5;
+    color: @m-white1;
     .ant-input {
-        color: #E5E5E5;
+        color: @m-white1;
         background: transparent
     }
     .ant-input-suffix {
-        color: #E5E5E5;
+        color: @m-white1;
     }
     .ant-input-suffix {
         .ant-input-password-icon {
-            color: #E5E5E5;
+            color: @m-white1;
         }
     }
     &:hover,&:focus {
@@ -1421,7 +1421,7 @@
                     font-size: 16px;
                     color: @m-white1;
                     margin-bottom: 10px;
-                    background: #0f161c;
+                    background: @m-black15;
                     border: 1px solid @m-blue3;
                     border-radius: 3px;
                     padding-left: 14px;
@@ -1445,8 +1445,8 @@
 }
 .ant-collapse.busyCollapse.ant-collapse-borderless {
     margin-top: 10px;
-    background: #0f161c;
-    border: 1px solid #172b56;
+    background: @m-black15;
+    border: 1px solid @m-blue3;
     .rounded-corners(3px);
     .ant-collapse-item {
         border-bottom: 0;
@@ -1470,7 +1470,7 @@
                 font-size: 16px;
                 color: @m-white1;
                 margin-bottom: 10px;
-                // background: #0f161c;
+                // background: @m-black15;
                 border: 0 !important;
                 // border-radius: 3px;
                 padding-left: 14px;
@@ -1518,7 +1518,7 @@ textarea:-webkit-autofill,
 select:-webkit-autofill,
 .dialogInput:-webkit-autofill {
     box-shadow: inset 0 0 0 1000px @m-grey21;
-    -webkit-text-fill-color: #e5e5e5;
+    -webkit-text-fill-color: @m-white1;
 }
 input:-internal-autofill-selected {
     background-color: @m-grey21 !important;
@@ -1536,7 +1536,7 @@ input:-internal-autofill-selected {
         .ant-checkbox {
             margin-right: 2px;
             .ant-checkbox-inner {
-                background: #15202B;
+                background: @m-grey21;
                 border: 1px solid @m-grey14;
                 border-radius: 3px;
             }
@@ -1544,11 +1544,11 @@ input:-internal-autofill-selected {
         .ant-checkbox.ant-checkbox-checked {
             .ant-checkbox-inner {
                 &::after {
-                    border-color: #3A87F7;
+                    border-color: @m-blue0;
                 }
             }
             &::after {
-                border-color: #3A87F7;
+                border-color: @m-blue0;
             }
         }
         span+span {
@@ -1559,13 +1559,13 @@ input:-internal-autofill-selected {
     }
     .ant-checkbox-wrapper-disabled {
         .ant-checkbox-disabled {
-            outline-color: #2B3F52;
+            outline-color: @m-grey14;
             .ant-checkbox-input {
                 color: @m-white0;
                 font-size: 14px;
             }
             .ant-checkbox-inner {
-                border-color: #2B3F52 !important;
+                border-color: @m-grey14 !important;
             }
         }
     }
@@ -1576,14 +1576,14 @@ input:-internal-autofill-selected {
         font-size: 14px;
         .ant-radio {
             .ant-radio-inner {
-                border-color:#3A87F7;
-                background: #15202B;
+                border-color:@m-blue0;
+                background: @m-grey21;
                 &::after {
                     left: 4px;
                     top: 4px;
                     width: 6px;
                     height: 6px;
-                    background: #3A87F7;
+                    background: @m-blue0;
                     border-radius: 50%;
                 }
             }
@@ -1592,14 +1592,14 @@ input:-internal-autofill-selected {
     .ant-radio-wrapper-disabled {
         .ant-radio-disabled {
             .ant-radio-inner {
-                border-color:#3A87F7 !important;
-                background: #15202B;
+                border-color:@m-blue0 !important;
+                background: @m-grey21;
                 &::after {
                     left: 4px;
                     top: 4px;
                     width: 6px;
                     height: 6px;
-                    background: #3A87F7;
+                    background: @m-blue0;
                     border-radius: 50%;
                 }
             }
@@ -1845,7 +1845,7 @@ input:-internal-autofill-selected {
         }
         .ant-table-thead {
             tr {
-                box-shadow: 0px 1px 0px 0px #2E3539;
+                box-shadow: 0px 1px 0px 0px @m-black17;
                 th {
                     line-height: 34px;
                     background: @m-black8;

src/assets/styles/variables.less

@@ -31,10 +31,16 @@
 @m-grey22: #424E59;
 @m-grey22-hover: rgba(@m-grey22, .8);
 @m-grey23: #48545F;
+@m-grey24: #444444;
+
 @m-red0: #ff4d4f;
 @m-red1: #FF2B2B;
+
 @m-white: #fff;
 @m-white1: #FEFEFE;
+@m-white2: rgb(240, 240, 240);
+
+@m-black: rgba(0, 0, 0, 0);
 @m-black0: #242a2e;
 @m-black1: #181e22;
 @m-black2: #0E0E0F;
@@ -50,6 +56,12 @@
 @m-black12: #13202D;
 @m-black13: #08131F;
 @m-black14: #1F262B;
+@m-black15: #0f161c;
+@m-black16: #181d1f;
+@m-black17: #2E3539;
+@m-black18: rgba(18, 22, 24, 0.36);
+@m-black19: rgb(26 187 207 / 20%);
+
 @m-blue0: #3a87f7;
 @m-blue0-hover: rgba(@m-blue0, .8);
 @m-blue1: #4885eb;
@@ -78,12 +90,16 @@
 @m-blue19: #102442;
 @m-blue20: #122d55;
 @m-blue21: #102e45;
+
 @body-bg: #e9eef3;
 @m-white0: #ffffff;
 @m-white0-hover: rgba(@m-white0, .8);
 @m-white1: #E5E5E5;
+@m-white2: rgb(54 187 207);
 @m-green0: #1FF195;
 @m-green1: #10251d;
+@m-green2: rgb(26, 187, 207);
+@m-green3: #1abbcf;
 @m-red0: #FF5C6F;
 @m-red0-hover: rgba(@m-red0, .8);
 @m-red1: #FB7F75;