refactor: Update style

1. Support style check: stylelint
2. Add stylelint check in lint-staged husky
2. Update styles

Change-Id: Id793b0936e4c3ea27ddef0df794d5b711880599f

.stylelintrc.json

@@ -0,0 +1,15 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-css-modules",
+    "stylelint-config-rational-order",
+    "stylelint-config-prettier"
+  ],
+  "customSyntax": "postcss-less",
+  "plugins": ["stylelint-order"],
+  "rules": {
+    "no-descending-specificity": null,
+    "at-rule-no-unknown": null,
+    "color-function-notation": "legacy"
+  }
+}

package.json

@@ -13,6 +13,7 @@
     "i18n": "grunt",
     "lint": "eslint src --fix --quiet --ext .js,.jsx",
     "lint:test": "eslint test --fix --quiet --ext .js",
+    "lint:style": "stylelint --fix \"src/**/*.less\" --custom-syntax postcss-less",
     "report:delete-json": "rm -rf test/e2e/results/* || true",
     "report:delete-html": "rm -rf test/e2e/report || true",
     "report:pre": "npm run report:delete-json && npm run report:delete-html && mkdir test/e2e/report",
@@ -31,11 +32,15 @@
     }
   },
   "lint-staged": {
+    "*.{css,less}": [
+      "stylelint --fix",
+      "git add"
+    ],
     "*.{js,jsx}": [
       "eslint --fix",
       "git add"
     ],
-    "*.{html,css,scss,md,json}": [
+    "*.{html,css,scss,less,md,json}": [
       "prettier --write",
       "git add"
     ]
@@ -103,7 +108,7 @@
     "clean-webpack-plugin": "^1.0.0",
     "compression-webpack-plugin": "5.0.1",
     "cross-env": "^7.0.3",
-    "css-loader": "^0.28.11",
+    "css-loader": "1.0.1",
     "cypress": "6.8.0",
     "cypress-downloadfile": "^1.2.1",
     "cypress-file-upload": "^5.0.6",
@@ -130,18 +135,24 @@
     "istanbul-lib-coverage": "^3.0.0",
     "jest": "^26.6.3",
     "jest-enzyme": "^7.1.2",
-    "less": "^3.8.1",
+    "less": "3.13.0",
-    "less-loader": "^4.1.0",
+    "less-loader": "5.0.0",
     "lint-staged": "^11.0.0",
     "mochawesome": "^6.2.2",
     "mochawesome-merge": "^4.2.0",
     "mochawesome-report-generator": "^5.2.0",
-    "postcss-less": "^2.0.0",
+    "postcss-less": "2.0.0",
-    "postcss-loader": "^3.0.0",
+    "postcss-loader": "3.0.0",
     "prettier": "^2.3.0",
     "react-css-modules": "^4.7.7",
     "react-hot-loader": "^4.12.20",
     "style-loader": "^0.20.3",
+    "stylelint": "^14.2.0",
+    "stylelint-config-css-modules": "^2.3.0",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-rational-order": "^0.1.2",
+    "stylelint-config-standard": "^24.0.0",
+    "stylelint-order": "^5.0.0",
     "terser-webpack-plugin": "4.2.3",
     "url-loader": "^4.1.1",
     "webpack": "^4.42.1",

src/components/Cards/NotFound/index.less

@@ -2,8 +2,8 @@
 
 .wrapper {
   margin-top: 100px;
-  border-radius: @border-radius;
   text-align: center;
+  border-radius: @border-radius;
 }
 
 .image {
@@ -13,26 +13,26 @@
 
 .text {
   display: inline-block;
-  vertical-align: top;
   width: 600px;
   margin-left: 60px;
+  vertical-align: top;
 
   :global .h1 {
-    opacity: 0.4;
+    color: #abb4be;
     font-size: 120px;
     line-height: 1.4;
-    color: #abb4be;
-    user-select: none;
     text-align: left;
+    opacity: 0.4;
+    user-select: none;
   }
 
   p {
-    text-shadow: 0 4px 8px rgba(36, 46, 66, 0.1);
-    font-size: 20px;
-    font-weight: @font-bold;
-    line-height: 1.4;
     color: @second-title-color;
+    font-weight: @font-bold;
+    font-size: 20px;
+    line-height: 1.4;
     text-align: left;
+    text-shadow: 0 4px 8px rgba(36, 46, 66, 10%);
   }
 
   a {

src/components/CodeEditor/custom.less

@@ -1,11 +1,12 @@
+/* stylelint-disable selector-class-pattern */
 .ace_editor {
+  font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
   line-height: 20px !important;
-  font-family: Monaco, Menlo, Consolas, Courier New, monospace;
   -webkit-font-smoothing: auto;
 }
 
 .ace_editor.ace-chaos {
-  color: #ffffff;
+  color: #fff;
   background-color: #242e42;
 }
 
@@ -22,7 +23,7 @@
 }
 
 .ace_editor.ace-chaos .ace_keyword {
-  color: #ffffff;
+  color: #fff;
 }
 
 .ace_editor.ace-chaos .ace_string {
@@ -38,8 +39,8 @@
 }
 
 .ace_editor.ace-chaos .ace_indent-guide {
-  border-right: 1px dotted #777;
   padding: 2px 0;
+  border-right: 1px dotted #777;
 }
 
 .ace_editor.ace-chaos .ace_marker-layer .ace_selection {

src/components/Confirm/index.less

@@ -1,13 +1,14 @@
-@import "~styles/variables";
+@import '~styles/variables';
 
 .confirm-modal {
   :global {
     .ant-modal-confirm-body > .anticon {
-      font-size: 18px;
       margin-right: 20px;
+      font-size: 18px;
     }
   }
 }
+
 .confirm {
   color: @warn-color !important;
 }

src/components/DetailCard/index.less

@@ -3,22 +3,22 @@
 @min-space: 8px;
 @mid-space: 16px;
 @lg-space: 24px;
-@box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
+@box-shadow: 0 0 10px 0 rgba(0, 0, 0, 5%);
-@topo-line: 1px solid #D2D2D2;
+@topo-line: 1px solid #d2d2d2;
 @resource-box-bg: #fbfdff;
 @resource-box-border: 1px solid #cfe1ff;
 
-@success: #57E39B;
+@success: #57e39b;
-@warning: #FEDF40;
+@warning: #fedf40;
-@error: #EB354D;
+@error: #eb354d;
-@link: #0068FF;
+@link: #0068ff;
 
 .card {
+  flex: 1;
   margin-bottom: @mid-space;
-  box-shadow: @box-shadow;
   background-color: #fff;
   border-radius: @border-radius;
-  flex: 1;
+  box-shadow: @box-shadow;
 
   .card-content {
     padding: @mid-space;
@@ -31,9 +31,10 @@
       }
 
       .title-help {
-        line-height: 26px;
         margin-left: @min-space;
+        line-height: 26px;
       }
+
       div {
         word-break: break-all;
       }
@@ -42,6 +43,7 @@
     :last-child {
       margin-bottom: 0;
     }
+
     :global {
       .ant-typography {
         word-break: break-all;

src/components/Form/index.less

@@ -1,11 +1,11 @@
-@import "~styles/variables";
+@import '~styles/variables';
 
 .wrapper {
   position: relative;
   height: 100%;
+  padding-top: @body-padding;
   overflow: hidden;
   background-color: #fff;
-  padding-top: @body-padding;
 
   :global {
     .ant-spin-nested-loading {
@@ -23,19 +23,18 @@
 }
 
 .form {
-  margin-left: @body-padding * 2;
-  margin-right: @body-padding * 2;
-  // padding-top: @body-padding;
-  background-color: #fff;
   height: calc(100% - 48px);
+  margin-right: @body-padding * 2;
+  margin-left: @body-padding * 2;
   overflow-y: auto;
+  background-color: #fff;
 
   :global {
-    .ant-form-item-label>label {
+    .ant-form-item-label > label {
       margin-left: 12px;
     }
 
-    .ant-form-item-label>.ant-form-item-required {
+    .ant-form-item-label > .ant-form-item-required {
       margin-left: 0;
     }
 
@@ -47,21 +46,21 @@
 
 .footer {
   position: absolute;
+  right: 0;
   bottom: 0;
   left: 0;
-  right: 0;
-  height: 48px;
-  background-color: #fff;
-  box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.09);
   display: flex;
   align-items: center;
   justify-content: space-between;
+  height: 48px;
+  background-color: #fff;
+  box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 9%);
 }
 
 .btns {
   float: right;
-  margin-right: 32px;
   margin-top: 8px;
+  margin-right: 32px;
 
   :global {
     button {
@@ -78,44 +77,45 @@
   .form-item-divider {
     width: 98% !important;
     min-width: 90% !important;
-    margin-left: auto;
     margin-right: auto;
+    margin-left: auto;
   }
 
   .ant-radio-button-wrapper {
     color: @color-text-body;
   }
+
   .ant-radio-button-wrapper-disabled {
-    color: rgba(0, 0, 0, 0.25);
+    color: rgba(0, 0, 0, 25%);
   }
 }
 
 .tips {
-  padding: 8px 16px;
-  background: rgba(89, 157, 255, 0.15);
   margin-bottom: 16px;
+  padding: 8px 16px;
+  background: rgba(0, 0, 0, 15%);
 }
 
 .tips-icon {
   margin-right: 4px;
-  color: #0068FF;
+  color: #0068ff;
 }
 
 .footer-left {
-  height: 48px;
-  float: left;
-  margin-left: 16px;
-  color: rgb(72, 72, 72);
   display: flex;
   align-items: center;
   justify-content: left;
+  float: left;
+  height: 48px;
+  margin-left: 16px;
+  color: rgb(72, 72, 72);
 }
 
 .submit-tip {
-  font-size: 16px;
-  // margin-top: 16px;
   display: inline-block;
+  font-size: 16px;
 }
+
 .progress-wrapper {
   width: 170px;
 }

src/components/FormItem/AddSelect/index.less

@@ -1,14 +1,14 @@
-.add-select {
-}
 .items {
   float: left;
   width: 100%;
 }
+
 .item {
   position: relative;
-  margin-top: 8px;
   float: left;
   width: 100%;
+  margin-top: 8px;
+
   :global {
     .ant-form-item-has-success
       .ant-select:not(.ant-select-borderless)
@@ -17,22 +17,21 @@
     }
   }
 }
+
 .item-detail {
   width: 90%;
-  // :global {
-  //   .ant-form-item-has-error {
-  //     margin-bottom: 24px;
-  //   }
-  // }
 }
+
 .float {
   float: left;
 }
+
 .remove-btn,
 .add-btn {
-  padding-left: 0;
   padding-right: 8px;
+  padding-left: 0;
 }
+
 .desc {
   margin-left: 16px;
 }

src/components/FormItem/Descriptions/index.less

@@ -1,9 +1,10 @@
 .label {
   vertical-align: top;
+
   :global {
     .ant-descriptions-item-label {
       width: 100px;
-      color: #8A8A8A;
+      color: #8a8a8a;
     }
   }
 }

src/components/FormItem/InstanceVolume/index.less

@@ -2,14 +2,17 @@
   display: block;
   margin-bottom: 8px;
 }
+
 .label {
-  margin-right: 10px;
   max-width: 20%;
+  margin-right: 10px;
 }
+
 .select {
   max-width: 80%;
 }
+
 .size-label {
-  margin-left: 10px;
   margin-right: 40px;
+  margin-left: 10px;
 }

src/components/FormItem/IpInput/index.less

@@ -3,43 +3,49 @@
   overflow: hidden;
   border-radius: 4px;
 }
+
 .item-wrapper {
-  width: 44px;
   position: relative;
   display: inline-block;
+  width: 44px;
 }
+
 .item-wrapper:last-child {
   width: 40px;
 }
-.item-wrapper:after {
+
-  content: " ";
+.item-wrapper::after {
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background-color: #484848;
   position: absolute;
   top: 13px;
+  width: 4px;
+  height: 4px;
+  background-color: #484848;
+  border-radius: 50%;
+  content: ' ';
 }
-.item-wrapper:last-child:after {
+
+.item-wrapper:last-child::after {
   display: none;
 }
+
 .item {
   width: 40px;
-  padding-left: 8px;
   padding-right: 8px;
-  border-top: none;
+  padding-left: 8px;
-  border-left: none;
-  border-right: none;
-  border-radius: 0;
   text-align: center;
+  border-top: none;
+  border-right: none;
+  border-left: none;
+  border-radius: 0;
 }
 
 .item:focus {
   border-top: none;
-  border-left: none;
   border-right: none;
+  border-left: none;
   box-shadow: none;
 }
+
 .ipv6 {
   width: 120px;
 }

src/components/FormItem/IpInputSimple/index.less

@@ -3,43 +3,49 @@
   overflow: hidden;
   border-radius: 4px;
 }
+
 .item-wrapper {
-  width: 44px;
   position: relative;
   display: inline-block;
+  width: 44px;
 }
+
 .item-wrapper:last-child {
   width: 40px;
 }
-.item-wrapper:after {
+
-  content: " ";
+.item-wrapper::after {
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background-color: #484848;
   position: absolute;
   top: 13px;
+  width: 4px;
+  height: 4px;
+  background-color: #484848;
+  border-radius: 50%;
+  content: ' ';
 }
-.item-wrapper:last-child:after {
+
+.item-wrapper:last-child::after {
   display: none;
 }
+
 .item {
   width: 40px;
-  padding-left: 8px;
   padding-right: 8px;
-  border-top: none;
+  padding-left: 8px;
-  border-left: none;
-  border-right: none;
-  border-radius: 0;
   text-align: center;
+  border-top: none;
+  border-right: none;
+  border-left: none;
+  border-radius: 0;
 }
 
 .item:focus {
   border-top: none;
-  border-left: none;
   border-right: none;
+  border-left: none;
   box-shadow: none;
 }
+
 .ipv6 {
   width: 120px;
 }

src/components/FormItem/NUMAInput/index.less

@@ -1,7 +1,8 @@
 .cpu {
   margin-right: 8px;
 }
+
 .ram {
-  margin-left: 16px;
   margin-right: 8px;
+  margin-left: 16px;
 }

src/components/FormItem/NetworkSelect/index.jsx

@@ -235,7 +235,7 @@ export default class NetworkSelect extends React.Component {
         label: (
           <div>
             <span>{it.name}</span>
-            <span className={styles.subnet_options_cidr}>{it.cidr}</span>
+            <span className={styles['subnet-options-cidr']}>{it.cidr}</span>
           </div>
         ),
         name: it.name,

src/components/FormItem/NetworkSelect/index.less

@@ -1,43 +1,49 @@
 @import '~styles/variables';
+
 .network-select {
+  position: relative;
   display: block;
   height: 61.6px;
   margin-bottom: 0 !important;
-  position: relative;
+
   :global {
     .ant-form-item-control-input-content {
       height: 61.6px;
     }
+
     .ant-form-item-explain {
       position: absolute;
       bottom: 0;
     }
   }
 }
-.label {
+
-  margin-right: 10px;
-}
 .select {
   margin-right: 40px;
 }
+
 .size-label {
-  margin-left: 10px;
   margin-right: 40px;
+  margin-left: 10px;
 }
+
 .tips {
   margin-top: 0;
 }
+
 .label {
+  margin-right: 10px;
   color: @color-text-caption;
   line-height: 30px;
 }
+
 .content {
   color: @color-text-body;
 }
 
-.subnet_options_cidr {
+.subnet-options-cidr {
-  padding-left: 5px;
   margin-left: 5px;
-  opacity: 0.6;
+  padding-left: 5px;
   border-left: 1px solid;
+  opacity: 0.6;
 }

src/components/FormItem/Radio/index.less

@@ -1,15 +1,17 @@
-@import "~styles/variables";
+@import '~styles/variables';
 
 .only-radio {
   :global {
     .ant-radio-button-wrapper {
       margin-left: 8px;
-      border-radius: @border-radius;
       border-left-width: 1px;
+      border-radius: @border-radius;
     }
-    .ant-radio-button-wrapper:before {
+
+    .ant-radio-button-wrapper::before {
       display: none;
     }
+
     .ant-radio-button-wrapper:first-child {
       margin-left: 0;
       border-radius: @border-radius;

src/components/FormItem/Select/index.less

@@ -1,6 +1,6 @@
-@import "~styles/variables";
+@import '~styles/variables';
 
 .checkbox {
-  padding-bottom: 5px;
   padding-top: 5px;
+  padding-bottom: 5px;
 }

src/components/FormItem/SelectTable/index.less

@@ -1,56 +1,64 @@
-@import "~styles/variables";
+@import '~styles/variables';
 
-.sl-select-table {
-}
 .search-wrapper {
   margin-bottom: 16px;
+
   :global {
     .ant-menu-root.ant-menu-vertical {
-      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2) !important;
+      box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 20%) !important;
     }
   }
 }
 
 .image-tabs {
+  display: flex;
   height: 52px;
   margin-bottom: 8px;
-  display: flex;
+
   img {
+    display: block;
     width: 20px;
     height: 20px;
-    display: block;
     margin: 0 auto;
   }
+
   :global {
     .ant-radio-button-wrapper {
-      border: none;
-      color: @color-text-body;
       width: 70px;
       height: 50px;
       overflow: hidden;
+      color: @color-text-body;
       text-align: center;
+      border: none;
     }
+
     .ant-radio-button-wrapper:not(:first-child)::before {
       width: 0;
     }
+
     .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
       color: @primary-color;
       font-weight: bold;
     }
+
     .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
       box-shadow: none;
     }
   }
 }
+
 .image-tab {
   flex: 1 auto;
 }
+
 .image-tab-label {
   font-size: 10px;
 }
+
 .normal-tabs {
   margin-bottom: 8px;
 }
+
 .pagination-footer {
   :global {
     .ant-select {
@@ -59,6 +67,7 @@
     }
   }
 }
+
 .sl-select-table-backend {
   :global {
     .ant-table-footer {

src/components/FormItem/Title/index.less

@@ -1,7 +1,7 @@
-@import "~styles/variables";
+@import '~styles/variables';
 
 .title {
-  font-size: @size-normal;
-  font-weight: bold;
   margin-left: 12px;
+  font-weight: bold;
+  font-size: @size-normal;
 }

src/components/FormItem/index.less

@@ -1,5 +1,5 @@
 .tip {
   position: absolute;
-  right: -27px;
   top: 10px;
+  right: -27px;
 }

src/components/Infos/index.less

@@ -1,12 +1,13 @@
 .item {
-  background-color: #fff;
   margin-bottom: 10px;
+  background-color: #fff;
 
   :global {
     .ant-descriptions-item-label {
       width: 100px;
-      color: #8A8A8A;
+      color: #8a8a8a;
     }
+
     .ant-descriptions-item-content {
       word-break: break-all;
     }

src/components/Layout/GlobalHeader/index.less

@@ -1,4 +1,4 @@
-@import "~styles/variables";
+@import '~styles/variables';
 
 .menu {
   :global(.anticon) {
@@ -22,8 +22,8 @@
     line-height: 40px;
 
     .user-label {
-      font-weight: "bold";
       margin-right: 8px;
+      font-weight: 'bold';
     }
 
     span {
@@ -54,24 +54,6 @@
   .action {
     display: inline-block;
   }
-
-  .right_message {
-
-    .message_avatar {
-      background-color: #fff;
-      color: rgba(0, 0, 0, 0.65);
-      margin-top: -4px;
-    }
-
-    :global {
-      .ant-badge-dot {
-        transform: translate(-55%, 10%);
-      }
-      .ant-avatar-square {
-        border-radius: 3px !important;
-      }
-    }
-  }
 }
 
 .project-menu {
@@ -80,7 +62,6 @@
   }
 
   :global {
-
     .ant-dropdown-menu-item:hover,
     .ant-dropdown-menu-submenu-title:hover {
       cursor: pointer;
@@ -103,16 +84,17 @@
 
 .project {
   float: left;
-  cursor: pointer;
   font-size: 14px;
   line-height: @header-height;
+  cursor: pointer;
 
   :global {
     .ant-divider {
-      background-color: #d2d2d2;
-      margin-left: 24px;
       margin-right: 24px;
+      margin-left: 24px;
+      background-color: #d2d2d2;
     }
+
     .ant-btn-link {
       position: absolute;
       min-width: 280px;
@@ -122,23 +104,23 @@
 }
 
 .header {
+  position: relative;
+  z-index: 200;
+  flex-grow: 1;
+  height: 100%;
   padding-left: 36px;
   overflow: hidden;
-  background-color: #fff;
-  height: 100%;
   color: @title-color;
-  position: relative;
+  background-color: #fff;
-  flex-grow: 1;
+  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 9%);
-  z-index: 200;
-  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.09);
 }
 
 .avatar {
-  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.09);
-  border: none;
   width: 30px;
   height: 30px;
   color: #bfbfbf;
+  border: none;
+  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 9%);
 }
 
 .domain {
@@ -146,14 +128,14 @@
 }
 
 .links {
-  margin-right: 20px;
   display: inline-block;
+  margin-right: 20px;
 
   :global {
     .ant-divider {
-      background-color: #d2d2d2;
-      margin-left: 24px;
       margin-right: 24px;
+      margin-left: 24px;
+      background-color: #d2d2d2;
     }
   }
 
@@ -179,17 +161,17 @@
 }
 
 .single-link {
-  color: @primary-color;
   margin-right: 5px;
+  color: @primary-color;
 }
 
 .token {
   pre {
-    padding: .4em .6em;
+    padding: 0.4em 0.6em;
     white-space: pre-wrap;
     word-wrap: break-word;
-    background: hsla(0, 0%, 58.8%, .1);
+    background: hsla(0%, 0%, 58.8%, 10%);
-    border: 1px solid hsla(0, 0%, 39.2%, .2);
+    border: 1px solid hsla(0%, 0%, 39.2%, 20%);
     border-radius: 3px;
   }
 }

src/components/MagicInput/index.less

@@ -5,29 +5,29 @@
 }
 
 .magic-input-wrapper {
+  position: relative;
   align-items: center;
   width: 100%;
   min-width: 200px;
-  border: 1px solid rgb(217, 217, 217);
-  border-radius: @border-radius;
   padding: 3px 0 3px 8px;
   background-color: #fff;
-  position: relative;
+  border: 1px solid rgb(217, 217, 217);
+  border-radius: @border-radius;
 
   :global {
     .ant-tag {
-      background-color: @primary-color;
+      height: 24px;
+      margin-right: 4px;
+      padding: 0 4px;
       color: #fff;
       font-size: 10px;
-      height: 24px;
       line-height: 24px;
+      background-color: @primary-color;
       border: none;
-      padding: 0 4px;
-      margin-right: 4px;
 
       .anticon-close {
-        color: #fff;
         margin-left: 16px;
+        color: #fff;
       }
     }
 
@@ -44,7 +44,7 @@
 
 .magic-input-wrapper-active {
   border-color: @primary-color;
-  box-shadow: 0 0 0 2px rgba(0, 104, 255, 0.2);
+  box-shadow: 0 0 0 2px rgba(0, 104, 255, 20%);
 }
 
 .input-wrapper {
@@ -55,10 +55,10 @@
 
   :global {
     .ant-input {
-      border: none;
-      box-shadow: none;
       padding: 0;
       background: none;
+      border: none;
+      box-shadow: none;
     }
 
     .ant-input:focus {
@@ -76,33 +76,26 @@
     }
 
     .ant-menu-vertical .ant-menu-item {
-      font-size: 10px;
+      margin-top: 0;
-      margin-top: 0px;
       margin-bottom: 0;
+      font-size: 10px;
     }
   }
 }
 
-.tagItem {
-  margin-bottom: 5px;
-}
-
-.input {
-}
-
 .menu {
-  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.09) !important;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 9%) !important;
 }
 
 .menu,
 .option-menu {
   position: absolute;
-  z-index: 100;
   top: 34px;
-  border-radius: @border-radius;
+  z-index: 100;
-  overflow-y: auto;
-  overflow-x: hidden;
   max-height: 310px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  border-radius: @border-radius;
 }
 
 .key {
@@ -112,8 +105,8 @@
   :global {
     .ant-divider,
     .ant-divider-vertical {
-      margin-left: 4px;
       margin-right: 4px;
+      margin-left: 4px;
     }
   }
 }
@@ -132,15 +125,15 @@
   .magic-input-wrapper .ant-tag {
     display: inline-block;
     height: 24px;
-    line-height: 24px;
     margin: 0 5px 0 0;
+    line-height: 24px;
   }
 }
 
 .search-icon {
   position: absolute;
-  right: 8px;
   top: 0;
+  right: 8px;
   color: @color-text-body;
   font-size: 12px;
   line-height: 32px;
@@ -151,19 +144,19 @@
   line-height: 24px;
 
   .close-btn {
-    border: none;
     height: 24px !important;
     padding: 0;
+    border: none;
   }
 }
 
 .close-option-btn {
-  height: 24px !important;
   top: 3px;
+  height: 24px !important;
 }
 
 .magic-input-checks {
-  line-height: 32px;
-  margin-left: 8px;
   min-width: 120px;
+  margin-left: 8px;
+  line-height: 32px;
 }

src/components/Notify/index.jsx

@@ -150,7 +150,7 @@ const errorWithDetail = (err, title) => {
         buttonText={t('Click to show detail')}
         component={
           <CodeEditor
-            className={styles.codeEditor}
+            className={styles['code-editor']}
             value={err}
             mode="json"
             options={{

src/components/Notify/index.less

@@ -15,7 +15,7 @@
   }
 }
 
-.codeEditor {
+.code-editor {
   height: 400px !important;
   min-height: 400px !important;
 }

src/components/Pagination/index.less

@@ -1,7 +1,8 @@
 .wrapper {
-  text-align: right;
   height: 32px;
+  text-align: right;
 }
+
 .inner {
   display: inline-block;
   width: 300px;

src/components/PrometheusChart/BaseCard.jsx

@@ -119,7 +119,7 @@ const BaseCard = (props) => {
   return (
     <PrometheusContext.Provider value={passedContext}>
       <Card
-        className={style.remove_extra_padding}
+        className={style['remove-extra-padding']}
         bodyStyle={{
           // padding 24
           minHeight: visibleHeight + 48,

src/components/PrometheusChart/component/BaseContent.jsx

@@ -90,7 +90,7 @@ const BaseContent = (props) => {
   }, [node]);
 
   return (
-    <div className={styles.base_content_container}>
+    <div className={styles['base-content-container']}>
       <BaseContentContext.Provider value={passedContextValue}>
         {(renderTimeRangeSelect || renderNodeSelect) && (
           <Button

src/components/PrometheusChart/component/Charts.jsx

@@ -119,7 +119,7 @@ Charts.defaultProps = {
       formatDataFn: handleResponses,
     },
     renderContent: ({ data }) => (
-      <div className={styles.topContent}>{get(data, '[0].y', 0)}</div>
+      <div className={styles['top-content']}>{get(data, '[0].y', 0)}</div>
     ),
   },
   baseChartProps: {

src/components/PrometheusChart/component/styles.less

@@ -1,8 +1,8 @@
-.topContent {
+.top-content {
-  font-size: 24px;
-  font-weight: 500;
-  height: 120px;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  height: 120px;
+  font-weight: 500;
+  font-size: 24px;
 }

src/components/PrometheusChart/style.less

@@ -1,4 +1,4 @@
-.remove_extra_padding {
+.remove-extra-padding {
   :global {
     .ant-card-extra {
       padding: 0;
@@ -10,8 +10,8 @@
 
     .ant-card-body {
       display: flex;
-      justify-content: center;
       align-items: center;
+      justify-content: center;
 
       .ant-card-loading-content {
         width: 100%;
@@ -20,11 +20,11 @@
   }
 }
 
-.base_content_container {
+.base-content-container {
   width: 100%;
   height: 100%;
-  overflow-y: scroll;
   padding: 20px;
+  overflow-y: scroll;
 
   .refresh {
     float: left;

src/components/SelectLang/index.jsx

@@ -57,7 +57,7 @@ const SelectLang = (props) => {
   // return langMenu;
   return (
     <Dropdown overlay={langMenu} placement="bottomRight">
-      <span className={classNames(styles.dropDown, className)}>
+      <span className={classNames(styles['drop-down'], className)}>
         <GlobalOutlined />
       </span>
     </Dropdown>

src/components/SelectLang/index.less

@@ -2,19 +2,22 @@
   :global(.anticon) {
     margin-right: 8px;
   }
+
   :global(.ant-dropdown-menu-item) {
     min-width: 160px;
   }
 }
 
-.dropDown {
+.drop-down {
-  line-height: 20px;
   font-size: 16px;
+  line-height: 20px;
   vertical-align: top;
   cursor: pointer;
+
   > i {
     font-size: 16px !important;
     transform: none !important;
+
     svg {
       position: relative;
       top: -1px;

src/components/StepForm/index.less

@@ -1,4 +1,4 @@
-@import "~styles/variables";
+@import '~styles/variables';
 
 .wrapper {
   position: relative;
@@ -10,25 +10,29 @@
     .ant-spin-nested-loading {
       height: 100%;
     }
+
     .ant-spin-container {
       height: 100%;
     }
   }
 }
+
 .step {
   height: 80px;
+  margin-bottom: 16px;
+  padding-top: 24px;
   padding-right: 56px;
   padding-left: 56px;
-  padding-top: 24px;
-  margin-bottom: 16px;
   background: #fff;
 }
+
 .form {
-  padding-top: @body-padding;
-  background-color: #fff;
   height: 100%;
   min-height: calc(100vh - 280px);
+  padding-top: @body-padding;
   overflow-y: auto;
+  background-color: #fff;
+
   :global {
     .sl-form {
       height: calc(100vh - 219px);
@@ -36,35 +40,39 @@
     }
   }
 }
+
 .footer {
   position: absolute;
+  right: 0;
   bottom: 0;
   left: 0;
-  right: 0;
-  min-height: 48px;
-  background-color: #fff;
-  box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.09);
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  min-height: 48px;
+  background-color: #fff;
+  box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 9%);
 }
+
 .btns {
   float: right;
-  margin-right: 32px;
   min-width: 200px;
-  :global{
+  margin-right: 32px;
+
+  :global {
     button {
       margin-left: 8px;
     }
   }
 }
+
 .footer-left {
-  min-height: 48px;
-  float: left;
-  margin-left: 16px;
-  color: rgb(72, 72, 72);
   display: flex;
   align-items: center;
   justify-items: left;
+  float: left;
+  min-height: 48px;
+  margin-left: 16px;
+  color: rgb(72, 72, 72);
 }

src/components/Tables/Base/ActionButton/index.less

@@ -1,7 +1,7 @@
 .modal-action {
   :global {
     .ant-modal-body {
-      padding: 0 0 16px 0;
+      padding: 0 0 16px;
     }
   }
 }

src/components/Tables/Base/BatchActionButtons/index.less

@@ -1,15 +1,17 @@
 .table-action {
   margin-right: 5px;
 }
+
 .more-action-btn {
   width: 100%;
   text-align: center;
 }
+
 .table-batch-menu {
   :global {
     .ant-dropdown-menu-item {
-      padding-left: 0;
       padding-right: 0;
+      padding-left: 0;
     }
   }
 }

src/components/Tables/Base/ItemActionButtons/index.less

@@ -3,10 +3,10 @@
   text-align: left;
 
   span {
+    display: block;
     max-width: 48px;
     overflow: hidden;
     white-space: nowrap;
-    display: block;
     text-overflow: ellipsis;
   }
 }
@@ -17,12 +17,15 @@
 
 .action-sub-menu {
   padding: 0;
+
   :global {
     .ant-dropdown-menu-submenu-popup ul {
-      margin-left: 0 !important;
       margin-right: 0 !important;
+      margin-left: 0 !important;
     }
-    .ant-dropdown-menu-item, .ant-dropdown-menu-submenu-title {
+
+    .ant-dropdown-menu-item,
+    .ant-dropdown-menu-submenu-title {
       padding: 0 12px;
     }
   }
@@ -32,6 +35,7 @@
   width: 100%;
   text-align: left;
 }
+
 .single-more-action {
   :global {
     .ant-btn-link {

src/components/Tables/Base/index.jsx

@@ -607,12 +607,12 @@ export default class BaseTable extends React.Component {
   }
 
   renderSelectedTitle = () => (
-    <div className={styles.selectTitle}>
+    <div className={styles['select-title']}>
       <div>{this.renderBatchActions()}</div>
       <div>
         <Button
           type="flat"
-          className={styles.cancelSelect}
+          className={styles['cancel-select']}
           onClick={this.handleCancelSelect}
         >
           {t('Cancel Select')}
@@ -826,7 +826,7 @@ export default class BaseTable extends React.Component {
 
     return (
       <CustomColumns
-        className={styles.columnMenu}
+        className={styles['column-menu']}
         options={this.hideableRow}
         value={getHideColKeys(hideRow)}
         onChange={this.handleRowHide}

src/components/Tables/Base/index.less

@@ -1,19 +1,17 @@
-@import "~styles/variables";
+@import '~styles/variables';
 
 .table {
-  border-radius: @border-radius;
-  box-shadow: @base-shadow;
   overflow: hidden;
   background-color: #fff;
+  border-radius: @border-radius;
+  box-shadow: @base-shadow;
 
   :global {
     .ant-table-container {
-      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
+      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 5%);
-      // .ant-table-body {
-      //   min-height: 500px;
-      // }
     }
-    .ant-table-pagination.ant-pagination{
+
+    .ant-table-pagination.ant-pagination {
       margin: 0;
       padding: 8px 16px;
     }
@@ -25,11 +23,11 @@
   margin-left: 10px;
 }
 
-.selectTitle {
+.select-title {
   padding: 2px;
 }
 
-.cancelSelect {
+.cancel-select {
   color: #fff;
 }
 
@@ -38,90 +36,57 @@
   margin-left: 12px;
 }
 
-.disableSearch {
-  pointer-events: none !important;
-  input {
-    pointer-events: none !important;
-  }
-  user-select: none;
-  opacity: 0.6;
-}
-
-.keyword {
-  width: 100%;
-  padding: 2px 0;
-  margin-right: 12px;
-}
-
-.emptyText {
-  & > div {
-    @include TypographyTitleH5();
-  }
-
-  & > p {
-    margin-top: 4px;
-    @include TypographyParagraph(@dark-color01);
-  }
-
-  @at-root {
-    .emptyTipIcon {
-      width: 60px;
-      height: 60px;
-      border-radius: 50% 0 50% 50%;
-      background: @light-color02;
-      display: inline-block;
-      line-height: 50px;
-      margin-bottom: 20px;
-    }
-  }
-}
-
 .action {
-  color: @blue-color03;
   padding: 0 4px;
-  cursor: pointer;
+  color: @blue-color03;
   font-weight: @font-bold;
+  cursor: pointer;
 }
 
-.columnMenu {
+.column-menu {
   width: 160px;
-  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
-  border-radius: @border-radius;
   overflow: hidden;
+  border-radius: @border-radius;
+  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 20%);
+
   :global {
     .ant-menu-vertical > .ant-menu-item {
-      line-height: 30px;
       height: 30px;
+      line-height: 30px;
     }
   }
 }
 
 .custom-button {
-  margin-left: 0px;
+  margin-left: 0;
 }
 
 .table-header {
-  // padding-top: @body-padding;
   display: flex;
   justify-content: space-between;
 }
+
 .table-header-btns {
-  margin-bottom: @body-padding;
   position: relative;
   display: inline-block;
+  margin-bottom: @body-padding;
+
   :global {
     button {
       margin-right: 10px;
     }
+
     .ant-btn[disabled] {
-      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+      box-shadow: 0 2px 0 rgba(0, 0, 0, 4.5%);
     }
   }
 }
+
 .search-row {
   float: right;
   min-width: 350px;
 }
+
 .search-input {
   width: 288px;
   height: 32px;

src/components/Tables/SimpleTable/index.less

@@ -1,4 +1,4 @@
-@import "~styles/variables";
+@import '~styles/variables';
 
 .sl-simple-table {
   :global {
@@ -6,16 +6,18 @@
       .ant-table-thead {
         tr {
           .ant-table-cell {
-            padding: 8px 8px 8px 0px;
+            padding: 8px 8px 8px 0;
           }
         }
       }
     }
+
     .ant-table-column-sorters {
       padding: 8px 0;
     }
+
     .ant-table-tbody > tr > td {
-      padding: 8px 8px 8px 0px;
+      padding: 8px 8px 8px 0;
       word-break: break-all;
     }
   }

src/containers/BaseDetail/index.less

@@ -5,8 +5,8 @@
 @lg-space: 24px;
 
 .main {
-  padding: 0 @mid-space;
   display: flex;
+  padding: 0 @mid-space;
 
   .left-side {
     width: 380px;

src/containers/List/index.less

@@ -2,17 +2,20 @@
 
 .wrapper {
   min-height: calc(100vh - 108px);
-  padding: 0 @body-padding;
   margin-top: 16px;
+  padding: 0 @body-padding;
 }
+
 .hint {
   margin-bottom: 16px;
 }
+
 .hints {
   :global {
     .ant-alert-warning {
       background-color: #fffbe6;
       border: 1px solid #ffe58f;
+
       .ant-alert-icon {
         color: #faad14;
       }

src/containers/TabDetail/index.less

@@ -31,21 +31,21 @@
   display: flex;
   align-items: center;
   height: 48px;
-  padding: 0 14px;
-  border-radius: @border-radius;
-  background-color: @dark;
   margin: 0 0 12px;
+  padding: 0 14px;
+  background-color: @dark;
+  border-radius: @border-radius;
 
   &Item {
     min-width: 96px;
     height: 32px;
-    line-height: 32px;
     margin: 0 6px;
     padding: 0 14px;
-    font-weight: 500;
     color: @white;
-    border: 1px solid transparent;
+    font-weight: 500;
+    line-height: 32px;
     text-align: center;
+    border: 1px solid transparent;
     transition: all @trans-speed;
 
     &:first-child {
@@ -53,10 +53,10 @@
     }
 
     &.active {
-      border-radius: @border-radius;
-      box-shadow: @btn-primary-shadow;
       background-color: @primary;
       border-color: @primary;
+      border-radius: @border-radius;
+      box-shadow: @btn-primary-shadow;
 
       &:hover {
         color: @white;
@@ -66,15 +66,15 @@
 }
 
 .loading {
-  text-align: center;
   padding: 30px 0;
+  text-align: center;
 }
 
 .header {
-  background-color: #fff;
-  padding-left: @body-padding;
   padding-right: @body-padding;
   padding-bottom: 30px;
+  padding-left: @body-padding;
+  background-color: #fff;
 
   :global {
     .ant-descriptions-title {
@@ -88,8 +88,8 @@
 }
 
 .title-label {
-  font-style: italic;
   margin-right: 8px;
+  font-style: italic;
 }
 
 .header-button {
@@ -97,9 +97,9 @@
 }
 
 .header-divider {
+  width: 2px;
   margin: 0 14px 0 24px;
   background-color: @color-text-caption;
-  width: 2px;
 }
 
 .tabs {
@@ -107,8 +107,8 @@
 
   :global {
     .ant-tabs-bar {
-      padding-left: @body-padding;
       padding-right: @body-padding;
+      padding-left: @body-padding;
     }
 
     .ant-tabs-nav-wrap {
@@ -133,8 +133,8 @@
 
   :global {
     .ant-btn-link {
-      border-color: #0068FF;
       padding: 5.6px 15px !important;
+      border-color: #0068ff;
     }
 
     .ant-divider-vertical {
@@ -151,7 +151,7 @@
     .ant-btn-link[disabled]:hover,
     .ant-btn-link[disabled]:focus,
     .ant-btn-link[disabled]:active {
-      border-color: rgba(0, 0, 0, 0.25);
+      border-color: rgba(0, 0, 0, 25%);
     }
 
     .ant-btn-dangerous.ant-btn-link:active {

src/containers/TabList/index.less

@@ -1,20 +1,17 @@
-@import "~styles/variables";
+@import '~styles/variables';
 
 .wrapper {
   min-height: calc(100vh - 108px);
 
   :global {
-    // .ant-tabs-bar {
-    //   background-color: #fff;
-    //   margin-bottom: 0;
-    //   padding: 0 @body-padding;
-    // }
     .ant-tabs > .ant-tabs-nav {
       background-color: #fff;
     }
+
     .ant-tabs-nav-wrap {
       padding: 0 @body-padding;
     }
+
     .list-container {
       margin-top: 0;
     }

src/layouts/Auth/index.less

@@ -1,27 +1,27 @@
 .container {
+  position: relative;
   display: flex;
-  flex-direction: column;
+  flex-flow: row;
   height: 100vh;
   overflow: hidden;
-  flex-flow: row;
   background-color: #fff;
-  position: relative;
 
   .left {
-    width: 576px;
     position: relative;
+    width: 576px;
     overflow-y: auto;
-    // TODO wait for RGB
+
+    /* TODO wait for RGB
     // background: rgb(253, 249, 252) no-repeat fixed left bottom;
-    // background-size: 556px;
+    // background-size: 556px; */
 
     .lang {
-      width: 20px;
-      height: 20px;
-      text-align: right;
       position: absolute;
       top: 20px;
       right: 24px;
+      width: 20px;
+      height: 20px;
+      text-align: right;
     }
 
     .main {
@@ -48,32 +48,35 @@
           }
         }
       }
-
     }
   }
 
   .right {
-    flex: 1 1;
-    background-color: #21242A;
-    text-align: center;
     position: relative;
+    flex: 1 1;
+    text-align: center;
+    background-color: #21242a;
   }
 }
+
 .login-image {
   margin-top: calc(100vh - 668px);
 }
+
 .login-full-image {
   width: 100%;
   height: 100%;
 }
+
 .full-image-front {
   position: absolute;
-  background-color: rgba(14, 34, 181, 0.15);
   top: 0;
-  left: 0;
   right: 0;
   bottom: 0;
+  left: 0;
+  background-color: rgba(14, 34, 181, 15%);
 }
+
 .login-right-logo {
   position: relative;
   top: -100px;

src/layouts/Base/index.less

@@ -7,17 +7,18 @@
 .header {
   top: 0;
   left: 0;
-  color: @white;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   height: @header-height;
   padding: 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
   padding-left: 230px;
+  color: @white;
 }
 
 .header-collapsed {
   &:extend(.header);
+
   padding-left: 88px;
 }
 
@@ -43,30 +44,30 @@
 }
 
 .sider {
+  position: relative;
   height: 100vh;
   overflow-y: auto;
-  position: relative;
 
   :global {
     .ant-layout-sider-trigger {
-      background-color: @sider-background;
       position: absolute;
-      width: 32px !important;
-      height: 75px;
-      border-width: 32px;
       right: 0;
       bottom: 48px;
-      border-radius: 4px 0px 0px 4px;
+      width: 32px !important;
+      height: 75px;
       font-size: 16px;
       line-height: 75px;
+      background-color: @sider-background;
+      border-width: 32px;
+      border-radius: 4px 0 0 4px;
     }
   }
 }
 
 .menu {
-  padding-left: 14px;
-  padding-right: 14px;
   max-height: calc(100vh - 64px);
+  padding-right: 14px;
+  padding-left: 14px;
   overflow-y: auto;
 
   &::-webkit-scrollbar {
@@ -74,13 +75,13 @@
   }
 
   &::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
     border-radius: 10px;
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 30%);
   }
 
   &::-webkit-scrollbar-thumb {
     border-radius: 10px;
-    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 50%);
   }
 
   :global {
@@ -97,9 +98,9 @@
     }
 
     .anticon {
-      font-size: @size-normal;
-      margin-right: 20px;
       float: left;
+      margin-right: 20px;
+      font-size: @size-normal;
       line-height: 44px;
     }
 
@@ -117,6 +118,7 @@
     a {
       color: inherit;
     }
+
     a::before {
       width: 5px;
     }
@@ -133,8 +135,8 @@
 
   :global {
     .ant-menu-sub.ant-menu-inline {
-      padding-left: 5px;
       padding-right: 5px;
+      padding-left: 5px;
     }
 
     .ant-menu-item > span::before {
@@ -142,11 +144,11 @@
       top: 18px;
       bottom: 0;
       left: 30px;
-      content: '';
       width: 5px;
       height: 5px;
-      background-color: rgba(255, 255, 255, 0.65);
+      background-color: rgba(255, 255, 255, 65%);
       border-radius: 50%;
+      content: '';
     }
 
     .ant-menu-item-selected > span::before {
@@ -157,11 +159,6 @@
       background-color: @primary-color;
     }
 
-    // .ant-menu-sub {
-    //   .ant-menu-item-selected {
-    //     background-color: transparent !important;
-    //   }
-    // }
     .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal)
       .ant-menu-item-selected {
       background-color: @primary-color;
@@ -172,8 +169,8 @@
 
 .breadcrumb {
   height: @breadcrumb-height;
-  background-color: #fff;
   padding-left: @body-padding-left;
+  background-color: #fff;
 
   .breadcrumb-item {
     line-height: @breadcrumb-height;
@@ -190,9 +187,6 @@
 
 .main {
   height: calc(100vh - @header-height - @breadcrumb-height);
-  // min-width: @content-width;
-  // padding-left: @body-padding-left;
-  // padding-right: @body-padding-right;
   overflow: hidden;
 }
 
@@ -202,44 +196,43 @@
 
 .main-has-tab {
   margin-top: -42px;
-  // max-height: calc(100vh - 58px - 44px);
 }
 
 .trigger-wrapper {
   position: absolute;
-  width: 24px !important;
-  height: 70px;
-  border-width: 24px;
   right: -24px;
   bottom: 48px;
-  border-radius: 4px 0px 0px 4px;
+  width: 24px !important;
+  height: 70px;
   font-size: 16px;
   line-height: 70px;
+  border-width: 24px;
+  border-radius: 4px 0 0 4px;
   cursor: pointer;
 }
 
 .trigger {
-  font-size: 20px;
   position: absolute;
   left: 0;
   color: #fff;
+  font-size: 20px;
 }
 
 .trigger::before {
-  content: '';
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  background: rgba(0, 0, 0, 0.35);
   z-index: -1;
-  -webkit-transform: scaleX(2.2) perspective(50px) rotateY(50deg);
+  background: rgba(0, 0, 0, 35%);
-  transform: scaleX(2.2) perspective(50px) rotateY(50deg);
-  -webkit-transform-origin: bottom;
-  transform-origin: left;
   border-right: none;
   border-radius: 0 4px 4px 0;
+  transform: scaleX(2.2) perspective(50px) rotateY(50deg);
+  transform: scaleX(2.2) perspective(50px) rotateY(50deg);
+  transform-origin: bottom;
+  transform-origin: left;
+  content: '';
 }
 
 .trigger-icon {
@@ -247,19 +240,19 @@
 }
 
 .base-layout {
+  position: relative;
   width: 100%;
   height: 100vh;
-  position: relative;
 }
 
 .base-layout-sider {
   position: absolute;
   top: 0;
-  left: 0;
   bottom: 0;
+  left: 0;
+  z-index: 999;
   width: 230px;
   background-color: @sider-background;
-  z-index: 999;
   transition: all 0.2s;
 }
 
@@ -274,9 +267,9 @@
 .base-layout-right {
   position: absolute;
   top: 40px;
+  right: 0;
   left: 230px;
   height: calc(100vh - 40px);
-  right: 0;
 }
 
 .base-layout-right-collapsed {
@@ -289,37 +282,35 @@
 }
 
 .notice {
-  z-index: 1100;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  color: #0068ff;
   position: absolute;
   top: 48px;
   right: 0;
-  line-height: 24px;
+  z-index: 1100;
+  display: flex;
+  align-items: center;
   width: 384px;
   max-width: calc(100vw - 48px);
-  margin-bottom: 16px;
   margin: 0 24px 0 0;
+  margin-bottom: 16px;
   padding: 16px 24px;
-  font-size: 18px;
   overflow: hidden;
+  color: #0068ff;
+  font-size: 18px;
+  line-height: 24px;
   word-wrap: break-word;
   background: #fff;
   border-radius: 4px;
-  -webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 12%), 0 6px 16px 0 rgba(0, 0, 0, 8%),
-    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    0 9px 28px 8px rgba(0, 0, 0, 5%);
-  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+  cursor: pointer;
-    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 }
+
 .menu-item-title {
   span {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    max-width: 140px;
     display: inline-block;
+    max-width: 140px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 }

src/layouts/Blank/index.less

@@ -1,42 +1,48 @@
 @import '~styles/variables';
 
 .main {
-  overflow: hidden;
-  height: 100vh;
   width: 100vw;
+  height: 100vh;
+  overflow: hidden;
 
   :global {
     .ant-layout-has-sider {
       width: 100vw;
     }
+
     .ant-table {
       font-size: 12px;
+      line-height: 1.5;
     }
+
     .ant-pagination-item {
       border: none;
     }
+
     .ant-layout-sider {
       background: @sider-background;
     }
+
     .ant-menu.ant-menu-dark {
       background: @sider-background;
     }
+
     .ant-menu-dark .ant-menu-inline.ant-menu-sub {
       background-color: @sider-open-background;
       border-radius: @border-radius;
     }
+
     .ant-btn-primary:hover,
     .ant-btn-primary:focus {
       background-color: @hover-color;
       border-color: @hover-color;
     }
+
     .ant-btn-primary[disabled]:hover {
       background-color: #f2f2f2;
       border-color: #d2d2d2;
     }
-    .ant-table {
+
-      line-height: 1.5;
-    }
     .ant-table-thead > tr > th {
       padding: 0 16px;
     }

src/pages/auth/containers/ChangePassword/index.less

@@ -7,18 +7,14 @@
   margin-bottom: 24px;
 }
 
-.password_form {
-  width: 310px;
-}
-
 .hint {
-  background: #FFFBE6;
-  border-radius: 4px;
-  border: 1px solid #FFE58F;
-  color: rgba(0,0,0,0.65);
-  line-height: 1.5;
   padding: 8px 12px;
+  color: rgba(0, 0, 0, 65%);
   font-size: 14px;
+  line-height: 1.5;
+  background: #fffbe6;
+  border: 1px solid #ffe58f;
+  border-radius: 4px;
 
   :global {
     .anticon {
@@ -42,21 +38,22 @@
     :global {
       .ant-form-item-control-input-content {
         display: flex;
-        justify-content: space-between;
         align-items: center;
+        justify-content: space-between;
       }
     }
   }
 }
 
 .error {
-  background: #F2DEDE;
-  border-radius: 4px;
-  border: 1px solid #A43A39;
-  color: #A43A39;
-  line-height: 38px;
   padding-left: 12px;
+  color: #a43a39;
   font-size: 14px;
+  line-height: 38px;
+  background: #f2dede;
+  border: 1px solid #a43a39;
+  border-radius: 4px;
+
   :global {
     .anticon {
       margin-right: 8px;

src/pages/auth/containers/Login/index.jsx

@@ -275,7 +275,7 @@ export class Login extends Component {
         <SimpleForm
           formItems={this.formItems}
           name="normal_login"
-          className={styles.login_form}
+          className={styles['login-form']}
           initialValues={this.defaultValue}
           onFinish={this.onFinish}
           formRef={this.formRef}

src/pages/auth/containers/Login/index.less

@@ -7,18 +7,19 @@
   margin-bottom: 24px;
 }
 
-.login_form {
+.login-form {
   width: 310px;
 }
 
 .login-error {
-  background: #F2DEDE;
-  border-radius: 4px;
-  border: 1px solid #A43A39;
-  color: #A43A39;
-  line-height: 1.5;
   padding: 8px 12px;
+  color: #a43a39;
   font-size: 14px;
+  line-height: 1.5;
+  background: #f2dede;
+  border: 1px solid #a43a39;
+  border-radius: 4px;
+
   :global {
     .anticon {
       margin-right: 8px;

src/pages/base/containers/AdminOverview/components/ComputeService.jsx

@@ -30,7 +30,7 @@ class ComputeService extends Component {
   }
 
   renderAction = (item, index) => (
-    <Row className={styles.sider_card} key={`${item.binary}-${index}`}>
+    <Row className={styles['sider-card']} key={`${item.binary}-${index}`}>
       <Col
         span={8}
         style={{ textAlign: 'left', whiteSpace: 'nowrap', overflow: 'hidden' }}

src/pages/base/containers/AdminOverview/components/NetworkService.jsx

@@ -30,7 +30,7 @@ class NetworkService extends Component {
   }
 
   renderAction = (item, index) => (
-    <Row className={styles.sider_card} key={`${item.binary}-${index}`}>
+    <Row className={styles['sider-card']} key={`${item.binary}-${index}`}>
       <Col
         span={8}
         style={{ textAlign: 'left', whiteSpace: 'nowrap', overflow: 'hidden' }}

src/pages/base/containers/AdminOverview/components/ResourceOverview.jsx

@@ -186,7 +186,7 @@ export class virtualResourceInfo extends Component {
     return (
       <Card
         loading={virtualResourceLoading}
-        className={styles.resourceOverview}
+        className={styles['resource-overview']}
         title={t('Virtual Resource Overview')}
         bordered={false}
       >

src/pages/base/containers/AdminOverview/style.less

@@ -5,35 +5,28 @@
   padding: 44px;
   overflow: auto;
 
-  .actionButton {
-    line-height: 88px;
-    background: #FFFFFF;
-    box-shadow: 0px 0px 4px 1px rgba(175, 175, 175, 0.5);
-    border-radius: 9px;
-    opacity: 0.9;
-
-    font-size: 18px;
-    color: #A3A3A3;
-  }
-
   :global {
     .ant-card {
-      box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.09);
+      box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 9%);
+    }
+
+    .ant-card-head {
+      font-size: 16px;
     }
   }
 
-  .chart{
+  .chart {
-    .resource{
+    .resource {
-      font-size: 16px;
       display: block;
-      padding-bottom: 12px;
       margin-right: 200px;
+      padding-bottom: 12px;
+      font-size: 16px;
     }
+
     .num {
-      font-size: 14px;
-      // display: block;
       padding-top: 12px;
-      color: #A3A3A3;
+      color: #a3a3a3;
+      font-size: 14px;
 
       :global {
         .ant-avatar-square {
@@ -49,30 +42,30 @@
     }
   }
 
-  .resourceOverview{
+  .resource-overview {
-    .card{
+    .card {
       height: 100%;
       margin-right: 20px;
-      // padding: 30px 0 30px 0;
 
-      .label{
+      .label {
+        display: block;
         font-size: 16px;
-        display: block;
-      }
-      .all{
-        font-size: 24px;
-        display: block;
       }
 
-      .status{
+      .all {
-        color: #A3A3A3;
+        display: block;
+        font-size: 24px;
+      }
+
+      .status {
+        color: #a3a3a3;
       }
 
       :global {
-        .ant-badge-status-text{
+        .ant-badge-status-text {
-          margin-left: 4px;
           margin-right: 8px;
-          color: #A3A3A3;
+          margin-left: 4px;
+          color: #a3a3a3;
           font-size: 14px;
         }
       }
@@ -83,48 +76,41 @@
     height: 100%;
 
     .top {
-      .sider_card {
+      .sider-card {
-        margin: 4px 0 4px 0;
+        margin: 4px 0;
         font-size: 14px;
       }
 
       :global {
         .ant-descriptions-view {
           width: 100%;
+          height: 130px;
           overflow: auto;
           border-radius: 4px;
-          height: 130px;
         }
+
         .ant-descriptions-item-label {
           width: 130px;
         }
       }
     }
   }
-
-  :global {
-    .ant-card-head {
-      font-size: 16px;
-    }
-  }
 }
 
-
 .outer {
+  position: relative;
   width: 100%;
   height: 10rem;
-  position: relative;
   overflow: hidden;
   font-size: 12px;
 
   .inner {
-    width: 100%;
-    height: 100%;
     position: absolute;
     left: 0;
+    width: 100%;
+    height: 100%;
     overflow-x: hidden;
     overflow-y: scroll;
-
   }
 
   .inner::-webkit-scrollbar {
@@ -132,9 +118,9 @@
   }
 }
 
-:global{
+:global {
   .ant-descriptions-item-container {
-    .ant-descriptions-item-content{
+    .ant-descriptions-item-content {
       display: table-cell;
     }
   }

src/pages/base/containers/Overview/components/ProjectInfo.jsx

@@ -120,7 +120,7 @@ export class ProjectInfo extends Component {
         onClick={this.handleDetailInfo}
         icon={icon}
         type="link"
-        className={styles.role_button}
+        className={styles['role-button']}
       />
     );
   }

src/pages/base/containers/Overview/components/QuotaOverview.jsx

@@ -185,7 +185,7 @@ export class QuotaOverview extends Component {
     return (
       <>
         <Tooltip title={title}>
-          <div className={styles.progress_title}>{title}</div>
+          <div className={styles['progress-title']}>{title}</div>
         </Tooltip>
         <Progress
           style={{ marginTop: 13, marginBottom: 13 }}

src/pages/base/containers/Overview/index.jsx

@@ -53,9 +53,9 @@ const actions = [
 
 export class Overview extends Component {
   renderAction = (item) => (
-    <Row className={styles.actionButton} gutter={[8]}>
+    <Row className={styles['action-button']} gutter={[8]}>
-      <Col span={8} className={styles.main_icon}>
+      <Col span={8} className={styles['main-icon']}>
-        <img alt="avatar" src={item.avatar} className={styles.actionIcon} />
+        <img alt="avatar" src={item.avatar} className={styles['action-icon']} />
       </Col>
       <Col span={16} style={{ textAlign: 'center' }}>
         {item.label}

src/pages/base/containers/Overview/style.less

@@ -5,24 +5,23 @@
   padding: 44px;
   overflow: auto;
 
-  .main_icon {
+  .main-icon {
     display: flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
   }
 
-  .actionButton {
+  .action-button {
-    line-height: 88px;
-    background: #ffffff;
-    box-shadow: 0px 0px 4px 1px rgba(175, 175, 175, 0.5);
-    border-radius: 9px;
-    opacity: 0.9;
-
-    font-size: 18px;
     color: #a3a3a3;
+    font-size: 18px;
+    line-height: 88px;
+    background: #fff;
+    border-radius: 9px;
+    box-shadow: 0 0 4px 1px rgba(175, 175, 175, 50%);
+    opacity: 0.9;
   }
 
-  .actionIcon {
+  .action-icon {
     display: block;
     width: 50px;
     height: 50px;
@@ -31,7 +30,11 @@
 
   :global {
     .ant-card {
-      box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.09);
+      box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 9%);
+    }
+
+    .ant-card-head {
+      font-size: 16px;
     }
   }
 
@@ -44,14 +47,14 @@
         vertical-align: bottom;
 
         .text {
-          font-size: 21px;
           color: #252525;
+          font-size: 21px;
         }
 
         .action {
-          font-size: 16px;
-          color: #000000;
           margin-left: 40px;
+          color: #000;
+          font-size: 16px;
         }
       }
     }
@@ -62,9 +65,10 @@
 
     .project {
       position: relative;
+
       .meta {
-        padding-bottom: 16px;
         margin-bottom: 16px;
+        padding-bottom: 16px;
         border-bottom: 1px dashed #e8e8e8;
       }
 
@@ -74,34 +78,27 @@
         }
       }
 
-      .role_button {
+      .role-button {
         position: absolute;
-        bottom: 0px;
         right: 24px;
+        bottom: 0;
       }
     }
-
-  }
-
-  :global {
-    .ant-card-head {
-      font-size: 16px;
-    }
   }
 }
 
 .outer {
+  position: relative;
   width: 100%;
   height: 10rem;
-  position: relative;
   overflow: hidden;
   font-size: 12px;
 
   .inner {
-    width: 100%;
-    height: 100%;
     position: absolute;
     left: 0;
+    width: 100%;
+    height: 100%;
     overflow-x: hidden;
     overflow-y: scroll;
   }
@@ -112,8 +109,6 @@
 }
 
 .bottom {
-  //margin: 16px 0;
-
   :global {
     .ant-card {
       box-shadow: unset;
@@ -122,8 +117,8 @@
 
   .title {
     .text {
-      font-size: 16px;
       color: #252525;
+      font-size: 16px;
     }
 
     .badge {
@@ -143,10 +138,10 @@
   }
 
   .action {
-    font-size: 12px;
-    color: #0068ff;
     float: right;
     margin-top: 6px;
+    color: #0068ff;
+    font-size: 12px;
     cursor: pointer;
   }
 
@@ -159,19 +154,19 @@
           border-bottom: none;
 
           .ant-card-head-title {
-            font-size: 16px;
-            font-weight: 500;
-            color: #565656;
             padding-bottom: 0;
+            color: #565656;
+            font-weight: 500;
+            font-size: 16px;
           }
         }
       }
 
-      .progress_title {
+      .progress-title {
-        font-size: 14px;
         overflow: hidden;
-        text-overflow: ellipsis;
+        font-size: 14px;
         white-space: nowrap;
+        text-overflow: ellipsis;
       }
     }
   }

src/pages/compute/containers/Instance/Detail/BaseDetail/index.jsx

@@ -472,14 +472,14 @@ export class BaseDetail extends Base {
     if (globalRootStore.hasAdminRole) {
       options.splice(1, 0, {
         label: t('Details'),
-        content: <pre className={styles.preWrap}>{fault.details}</pre>,
+        content: <pre className={styles['pre-wrap']}>{fault.details}</pre>,
       });
     }
     return {
       labelCol: 4,
       title: t('Error'),
       options,
-      className: styles.errorCard,
+      className: styles['error-card'],
     };
   }
 }

src/pages/compute/containers/Instance/Detail/BaseDetail/index.less

@@ -12,6 +12,7 @@
 
   .vm-interface:first-child {
     border-left: @topo-line;
+
     .interface-line {
       border-left: none;
     }
@@ -23,12 +24,13 @@
     padding-bottom: 20px;
 
     .interface-line {
+      display: inline-block;
       width: 8px;
       height: 60px;
-      border-left: @topo-line;
       border-bottom: @topo-line;
-      display: inline-block;
+      border-left: @topo-line;
     }
+
     .interface-item {
       display: inline-block;
     }
@@ -37,8 +39,8 @@
   .vm {
     padding: @mid-space;
     background-color: @resource-box-bg;
-    border-radius: 4px;
     border: @resource-box-border;
+    border-radius: 4px;
 
     .vm-icon {
       display: inline;
@@ -50,9 +52,9 @@
       display: inline-block;
       width: 6px;
       height: 6px;
-      border-radius: 6px;
       margin-right: 13px;
       margin-left: 5px;
+      border-radius: 6px;
     }
 
     .vm-info {
@@ -60,6 +62,7 @@
 
       .info-item {
         padding-bottom: @min-space;
+
         .info-item-icon {
           display: inline;
           height: 16px;
@@ -78,30 +81,30 @@
 
     .volume-inline {
       width: 36px;
-      border-right: @topo-line;
       margin-bottom: 12px;
+      border-right: @topo-line;
     }
 
     .volume-content {
       flex: 1;
 
       .attached-volume {
-        padding: @min-space 0;
         display: flex;
+        padding: @min-space 0;
 
         .attached-volume-line {
-          border-bottom: @topo-line;
           width: 60px;
           height: 52px;
+          border-bottom: @topo-line;
         }
 
         .attached-volume-content {
-          flex: 1;
           display: flex;
+          flex: 1;
           padding: @mid-space;
           background-color: @resource-box-bg;
-          border-radius: 4px;
           border: @resource-box-border;
+          border-radius: 4px;
 
           .volume-icon {
             padding-right: @lg-space;
@@ -110,6 +113,7 @@
 
           .volume-info {
             flex: 1;
+
             .volume-info-item {
               padding-bottom: @min-space;
 
@@ -117,6 +121,7 @@
                 margin-right: @min-space;
               }
             }
+
             :last-child {
               padding-bottom: 0;
             }
@@ -126,27 +131,29 @@
 
       .attach-action-line {
         display: inline-block;
-        border-bottom: @topo-line;
         width: 60px;
         height: @lg-space;
         margin-right: 10px;
+        border-bottom: @topo-line;
       }
     }
   }
 }
+
 .attach-btn {
   max-width: 100px;
+
   span {
     max-width: 80px;
   }
 }
 
-.errorCard {
+.error-card {
   flex-grow: 0;
 
-  .preWrap {
+  .pre-wrap {
+    font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
     white-space: pre-wrap;
     word-wrap: break-word;
-    font-family: Monaco, Menlo, Consolas, Courier New, monospace;
   }
 }

src/pages/compute/containers/Instance/Detail/SecurityGroup/index.less

@@ -4,27 +4,31 @@
   min-height: calc(100vh - 108px);
   padding: 0 @body-padding;
 }
+
 .collapse {
-  // background: #FFFFFF;
+  margin-bottom: 24px;
   overflow: hidden;
-  margin-bottom: 24px;
 }
+
 .panel {
-  background: #FFFFFF;
-  font-size: larger;
-  padding-bottom: 12px;
-  padding-top: 12px;
   margin-bottom: 24px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  font-size: larger;
+  background: #fff;
 }
+
 .header-divider {
-  margin: 0 5px 0 5px;
-  background-color: @color-text-caption;
   width: 2px;
+  margin: 0 5px;
+  background-color: @color-text-caption;
 }
+
 .image {
   width: 70px;
   padding: 10px;
 }
+
 .radio-button {
   :global {
     .ant-radio-button-wrapper {
@@ -36,6 +40,7 @@
     }
   }
 }
+
 .security-group-text {
   font-size: 12px;
 }

src/pages/compute/containers/Instance/actions/CreateIronic/index.less

@@ -1,7 +1,8 @@
 .input {
-  margin-left: 16px;
   margin-right: 32px;
+  margin-left: 16px;
 }
+
 .number-input {
   min-width: 165px;
 }

src/pages/compute/containers/Instance/actions/StepCreate/index.less

@@ -1,7 +1,8 @@
 .input {
-  margin-left: 16px;
   margin-right: 32px;
+  margin-left: 16px;
 }
+
 .number-input {
   min-width: 165px;
 }

src/pages/compute/containers/Instance/actions/index.less

@@ -3,17 +3,21 @@
 .mb16 {
   margin-bottom: 16px;
 }
+
 .tip {
   color: @color-text-body;
 }
+
 .tip-title {
-  font-weight: 400;
   color: @color-text-title;
+  font-weight: 400;
 }
+
 .tip-icon {
-  color: rgba(254, 223, 64, 1);
   margin-right: 8px;
+  color: rgba(254, 223, 64, 100%);
 }
+
 .tip-content {
   margin-left: 20px;
 }

src/pages/compute/containers/Instance/components/index.less

@@ -1,8 +1,9 @@
 .flavor-label {
-  margin-right: 16px;
   display: inline-block;
   min-width: 50px;
+  margin-right: 16px;
 }
+
 .flavor-tab {
   margin-bottom: 16px;
 }

src/pages/compute/containers/Instance/index.less

@@ -1,78 +1,34 @@
 @import '~styles/variables';
 
 .main {
-  overflow-y: auto;
   margin-left: @nav-width - 20px;
   padding: 20px;
-}
-
-.navWrapper {
-  position: fixed;
-  top: 88px;
-  width: @nav-width;
-  height: calc(100vh - 108px);
-  padding: 0 20px 40px 20px;
   overflow-y: auto;
 }
 
 .nav {
+  z-index: 1;
   width: auto;
   padding: 0;
-  z-index: 1;
 }
 
 .title {
   display: inline-block;
-  vertical-align: middle;
   margin-left: 20px;
-  color: #ffffff;
+  color: #fff;
+  vertical-align: middle;
 
   :global {
     .h3 {
-      color: #ffffff;
+      color: #fff;
       line-height: 1.33;
-      text-shadow: 0 2px 4px rgba(36, 46, 66, 0.1);
+      text-shadow: 0 2px 4px rgba(36, 46, 66, 10%);
     }
   }
 
   & > p {
-    color: #eff4f9;
     margin-top: 3px;
-  }
+    color: #eff4f9;
-}
-
-.titleWrapper {
-  position: relative;
-  margin-bottom: 20px;
-  padding: 12px;
-  border-radius: @border-radius;
-  background-color: @background-color;
-  box-shadow: 0 8px 16px 0 rgba(36, 46, 66, 0.2);
-
-  .icon {
-    display: inline-block;
-    vertical-align: middle;
-    width: 40px;
-    height: 40px;
-    padding: 8px;
-    margin-right: 12px;
-    border-radius: 100px 0 100px 100px;
-    background-color: rgba(239, 244, 249, 0.08);
-  }
-
-  .text {
-    display: inline-block;
-    vertical-align: middle;
-
-    :global .h6 {
-      font-family: @font-family-id;
-      line-height: 1.43;
-      color: #ffffff;
-    }
-
-    p {
-      color: #d8dee5;
-    }
   }
 }
 

src/pages/compute/containers/Keypair/Detail/index.less

@@ -1,9 +1,10 @@
 .detail {
   margin: 0 16px;
   padding: 24px;
-  background-color: #FFFFFF;
+  background-color: #fff;
   border: 1px solid #efefef;
 
+  /* stylelint-disable-next-line selector-class-pattern */
   .public_key {
     text-overflow: ellipsis;
     -ms-word-wrap: break-word;

src/pages/compute/containers/ServerGroup/Detail/index.less

@@ -4,27 +4,31 @@
   min-height: calc(100vh - 108px);
   padding: 0 @body-padding;
 }
+
 .collapse {
-  // background: #FFFFFF;
+  margin-bottom: 24px;
   overflow: hidden;
-  margin-bottom: 24px;
 }
+
 .panel {
-  background: #FFFFFF;
-  font-size: larger;
-  padding-bottom: 12px;
-  padding-top: 12px;
   margin-bottom: 24px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  font-size: larger;
+  background: #fff;
 }
+
 .header-divider {
-  margin: 0 5px 0 5px;
-  background-color: @color-text-caption;
   width: 2px;
+  margin: 0 5px;
+  background-color: @color-text-caption;
 }
+
 .image {
   width: 100px;
   padding: 10px;
 }
+
 .radio-button {
   :global {
     .ant-radio-button-wrapper {
@@ -35,6 +39,7 @@
     }
   }
 }
+
 .security-group-text {
   font-size: 14px;
 }

src/pages/configuration/containers/Metadata/Detail/BaseDetail.jsx

@@ -66,7 +66,7 @@ export default class BaseDetail extends Base {
 
   get jsonCard() {
     const content = (
-      <pre className={styles.json_data}>
+      <pre className={styles['json-data']}>
         {JSON.stringify(this.detailData, null, 4)}
       </pre>
     );

src/pages/configuration/containers/Metadata/Detail/styles.less

@@ -1,4 +1,4 @@
-.json_data {
+.json-data {
   white-space: pre-wrap;
   word-wrap: break-word;
 }

src/pages/identity/containers/Domain/index.less

@@ -1,7 +1,7 @@
 @import '~styles/variables';
 
 .header-divider {
-  margin: 0 5px 0 5px;
-  background-color: @color-text-caption;
   width: 2px;
+  margin: 0 5px;
+  background-color: @color-text-caption;
 }

src/pages/identity/containers/Project/index.less

@@ -1,7 +1,7 @@
 @import '~styles/variables';
 
 .header-divider {
-  margin: 0 5px 0 5px;
-  background-color: @color-text-caption;
   width: 2px;
+  margin: 0 5px;
+  background-color: @color-text-caption;
 }

src/pages/identity/containers/UserGroup/Detail/index.less

@@ -4,31 +4,36 @@
   min-height: calc(100vh - 108px);
   padding: 0 @body-padding;
 }
+
 .tablewrapper {
   min-height: calc(100vh - 108px);
   margin-top: -@body-padding;
 }
+
 .collapse {
-  // background: #FFFFFF;
+  margin-bottom: 24px;
   overflow: hidden;
-  margin-bottom: 24px;
 }
+
 .panel {
-  background: #FFFFFF;
-  font-size: larger;
-  padding-bottom: 12px;
-  padding-top: 12px;
   margin-bottom: 24px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  font-size: larger;
+  background: #fff;
 }
+
 .header-divider {
-  margin: 0 5px 0 5px;
-  background-color: @color-text-caption;
   width: 2px;
+  margin: 0 5px;
+  background-color: @color-text-caption;
 }
+
 .image {
   width: 100px;
   padding: 10px;
 }
+
 .radio-button {
   :global {
     .ant-radio-button-wrapper {
@@ -39,21 +44,20 @@
     }
   }
 }
+
 .security-group-text {
   font-size: 14px;
 }
+
 .header-title {
   font-style: italic;
 }
+
 .title-label {
-  font-style: italic;
   margin-right: 8px;
+  font-style: italic;
 }
+
 .header-button {
   float: right;
 }
-.header-divider {
-  margin: 0 14px 0 24px;
-  background-color: @color-text-caption;
-  width: 2px;
-}

src/pages/monitor/containers/OpenstackService/index.less

@@ -1,36 +1,36 @@
 .header {
-  font-size: 16px;
+  color: rgba(0, 0, 0, 85%);
   font-weight: 500;
-  color: rgba(0, 0, 0, 0.85);
+  font-size: 16px;
   line-height: 22px;
 }
 
 .list {
-  background-color: #ffffff;
+  background-color: #fff;
-  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
   border: none;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 5%);
 
   .item {
     height: 76px;
 
     .title {
       display: flex;
-      font-size: 16px;
+      color: rgba(0, 0, 0, 65%);
       font-weight: 400;
-      color: rgba(0, 0, 0, 0.65);
+      font-size: 16px;
     }
 
     .status {
       display: flex;
-      font-size: 14px;
+      color: rgba(0, 0, 0, 65%);
       font-weight: 400;
-      color: rgba(0, 0, 0, 0.65);
+      font-size: 14px;
     }
   }
 }
 
 .container {
+  height: 100%;
   padding: 16px;
   overflow: auto;
-  height: 100%;
 }

src/pages/monitor/containers/OtherService/components/Mysql/index.jsx

@@ -29,7 +29,7 @@ const topCardList = [
       metricKey: 'mysqlService.runningTime',
     },
     renderContent: ({ data }) => (
-      <div className={styles.topContent}>
+      <div className={styles['top-content']}>
         {/* 转化为毫秒 */}
         {formatUsedTime(get(data, '[0].y', 0) * 1000)}
       </div>

src/pages/monitor/containers/OtherService/components/RabbitMQ/index.jsx

@@ -43,7 +43,7 @@ const topCardList = [
     },
     renderContent: ({ data }) => {
       return (
-        <div className={styles.topContent}>
+        <div className={styles['top-content']}>
           <Row style={{ width: '100%', textAlign: 'center' }}>
             <Col span={12}>{data.up + t('Up')}</Col>
             <Col span={12}>{data.down + t('Down')}</Col>

src/pages/monitor/containers/OtherService/index.less

@@ -1,29 +1,29 @@
 .header {
-  font-size: 16px;
+  color: rgba(0, 0, 0, 85%);
   font-weight: 500;
-  color: rgba(0, 0, 0, 0.85);
+  font-size: 16px;
   line-height: 22px;
 }
 
 .list {
-  background-color: #ffffff;
+  background-color: #fff;
-  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 5%);
 
   .item {
     height: 76px;
 
     .title {
       display: flex;
-      font-size: 16px;
+      color: rgba(0, 0, 0, 65%);
       font-weight: 400;
-      color: rgba(0, 0, 0, 0.65);
+      font-size: 16px;
     }
 
     .status {
       display: flex;
-      font-size: 14px;
+      color: rgba(0, 0, 0, 65%);
       font-weight: 400;
-      color: rgba(0, 0, 0, 0.65);
+      font-size: 14px;
     }
   }
 }

src/pages/monitor/containers/Overview/components/AlertInfo/index.jsx

@@ -84,11 +84,11 @@ const Index = function () {
       <Col flex="1 1">
         <div className={styles.card}>
           <Row style={{ height: '100%' }}>
-            <Col span={12} className={styles.alertCardLine}>
+            <Col span={12} className={styles['alert-card-line']}>
               <div className={styles.number}>{cpuCount}</div>
               <div>{t('Today CPU usage > 80% alert')}</div>
             </Col>
-            <Col span={12} className={styles.alertCardLine}>
+            <Col span={12} className={styles['alert-card-line']}>
               <div className={styles.number}>{memCount}</div>
               <div>{t('Today Memory usage > 80% alert')}</div>
             </Col>

src/pages/monitor/containers/Overview/config.jsx

@@ -28,7 +28,7 @@ export const physicalNodeLeftTopCardList = [
       const used = get(data[0], 'y', 0);
       const total = get(data[1], 'y', 0);
       return (
-        <div className={styles.topContent}>
+        <div className={styles['top-content']}>
           <div>
             <Row
               style={{
@@ -68,7 +68,7 @@ export const physicalNodeLeftTopCardList = [
       const used = getSuitableValue(usedValue, 'memory');
       const total = getSuitableValue(totalValue, 'memory');
       return (
-        <div className={styles.topContent}>
+        <div className={styles['top-content']}>
           <div>
             <Row
               style={{
@@ -110,7 +110,7 @@ export const physicalNodeLeftTopCardList = [
       const total = getSuitableValue(totalValue, 'disk');
       const progressPercentage = computePercentage(usedValue, totalValue);
       return (
-        <div className={styles.topContent}>
+        <div className={styles['top-content']}>
           <div
             style={{
               width: '100%',
@@ -280,7 +280,7 @@ export const storageLeftCardList = [
       const data = get(store.data, 'y', 0);
       return (
         <div
-          className={styles.topContent}
+          className={styles['top-content']}
           style={{
             fontSize: 28,
             fontWeight: 600,
@@ -306,7 +306,7 @@ export const storageLeftCardList = [
       const used = getSuitableValue(usedValue, 'disk');
       const total = getSuitableValue(totalValue, 'disk');
       return (
-        <div className={styles.topContent}>
+        <div className={styles['top-content']}>
           <div>
             <Row
               style={{
@@ -346,7 +346,7 @@ export const storageLeftCardList = [
         (totalValue - get(data[0], 'y', 0)).toFixed(2)
       );
       return (
-        <div className={styles.topContent}>
+        <div className={styles['top-content']}>
           <div>
             <Row
               style={{

src/pages/monitor/containers/Overview/index.jsx

@@ -61,7 +61,7 @@ const Index = () => {
               },
               visibleHeight: 200,
               renderContent: (store) => (
-                <div className={styles.topContent}>{store.data}</div>
+                <div className={styles['top-content']}>{store.data}</div>
               ),
             }}
             topCardList={topCardList}

src/pages/monitor/containers/Overview/index.less

@@ -1,11 +1,10 @@
 .container {
   .card {
-    padding: 16px;
-    background-color: #ffffff;
-    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.05),
-      0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-    color: #000000;
     height: 100%;
+    padding: 16px;
+    color: #000;
+    background-color: #fff;
+    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 5%), 0 0 10px 0 rgba(0, 0, 0, 5%);
 
     .tabs {
       :global {
@@ -21,74 +20,31 @@
     }
   }
 
-  .alertCardLine {
+  .alert-card-line {
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
 
     .number {
+      color: rgb(232, 104, 4);
       font-size: 36px;
-      color: rgb(232, 104, 74);
-    }
-  }
-
-  .alertCardTitle {
-    font-size: 14px;
-    font-weight: 400;
-    color: #000000;
-  }
-
-  .alertInfo {
-    margin-top: 6px;
-
-    .alertNumber {
-      font-size: 40px;
-      font-weight: 600;
-    }
-
-    .alertLevel {
-      font-size: 16px;
-      font-weight: 400;
-      color: rgba(0, 0, 0, 0.65);
-      margin-top: 12px;
-    }
-  }
-
-  .alertCardBottom {
-    padding: 0 26px;
-
-    .buttonTitle {
-      font-size: 12px;
-      font-weight: 400;
-      color: #000000;
-      margin-bottom: 15px;
-      height: 20px;
-      line-height: 20px;
-    }
-
-    .alertLineInfo {
-      font-size: 12px;
-      font-weight: 400;
-      height: 100%;
-      color: rgba(0, 0, 0, 0.65);
-      margin-bottom: 16px;
     }
   }
 }
 
 .outer {
+  position: relative;
   width: 100%;
   height: 100%;
-  position: relative;
   overflow: hidden;
   font-size: 14px;
 
   .inner {
-    width: 100%;
-    height: 100%;
     position: absolute;
     left: 0;
+    width: 100%;
+    height: 100%;
     overflow-x: hidden;
     overflow-y: scroll;
   }
@@ -98,19 +54,13 @@
   }
 }
 
-.flexColumnAround {
+.top-content {
   display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.topContent {
-  font-size: 24px;
-  font-weight: 500;
-  height: 100px;
-  display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  height: 100px;
+  font-weight: 500;
+  font-size: 24px;
 }
 
 .tabs {

src/pages/monitor/containers/PhysicalNode/index.jsx

@@ -32,7 +32,9 @@ export const topCardList = [
       metricKey: 'physicalNode.cpuCores',
     },
     renderContent: (value) => (
-      <div className={styles.topContent}>{get(value.data, 'length', 0)}</div>
+      <div className={styles['top-content']}>
+        {get(value.data, 'length', 0)}
+      </div>
     ),
   },
   {
@@ -42,7 +44,7 @@ export const topCardList = [
       metricKey: 'physicalNode.totalMem',
     },
     renderContent: (value) => (
-      <div className={styles.topContent}>
+      <div className={styles['top-content']}>
         {getSuitableValue(get(value.data[0], 'y', 0), 'memory')}
       </div>
     ),
@@ -54,7 +56,7 @@ export const topCardList = [
       metricKey: 'physicalNode.systemRunningTime',
     },
     renderContent: (value) => (
-      <div className={styles.topContent}>
+      <div className={styles['top-content']}>
         {formatUsedTime(
           (moment().unix() -
             parseInt(get(value.data[0], 'y', moment().unix()), 10)) *

src/pages/monitor/containers/StorageCluster/RenderTabs.jsx

@@ -149,7 +149,7 @@ const RenderTabs = () => {
         <TabPane tab="OSDs" key="osd" />
       </Tabs>
       {/* {isLoading ? (
-        <div className={styles.spinContainer}>
+        <div className={styles['spin-container']}>
           <Spin />
         </div>
       ) : ( */}

src/pages/monitor/containers/StorageCluster/index.jsx

@@ -42,7 +42,7 @@ const StorageCluster = () => {
         const d = get(data, 'y', 0);
         return (
           <div
-            className={styles.topContent}
+            className={styles['top-content']}
             style={{
               fontSize: 28,
               fontWeight: 600,
@@ -139,7 +139,7 @@ const StorageCluster = () => {
       },
       renderContent: ({ data }) => {
         return (
-          <Row className={styles.OSDs}>
+          <Row className={styles.osd}>
             <Col span={8} />
             <Col span={8} style={{ fontSize: 14, opacity: 0.8 }}>
               {t('Up')}
@@ -190,7 +190,7 @@ const StorageCluster = () => {
         const total = getSuitableValue(totalValue, 'disk');
         const progressPercentage = computePercentage(usedValue, totalValue);
         return (
-          <div className={styles.topContent}>
+          <div className={styles['top-content']}>
             <div
               style={{
                 width: '100%',

src/pages/monitor/containers/StorageCluster/index.less

@@ -1,18 +1,19 @@
-.OSDs {
+.osd {
   height: 100%;
+  color: rgba(0, 0, 0, 85%);
+  font-weight: 500;
   font-size: 16px;
   text-align: center;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.85);
 }
+
 .header {
-  overflow: auto;
   padding: 20px;
+  overflow: auto;
 
   .range {
     :global {
       .ant-radio-button-wrapper {
-        color: rgba(0, 0, 0, 0.65);
+        color: rgba(0, 0, 0, 65%);
       }
 
       .ant-radio-button-wrapper-checked {
@@ -32,15 +33,15 @@
   }
 }
 
-.myCardRow {
+.my-card-row {
   .top {
     .content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
       font-size: 24px;
       text-align: center;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
     }
 
     :global {
@@ -50,8 +51,8 @@
 
         .ant-card-body {
           flex-grow: 1;
-          overflow: hidden;
           padding-top: 0;
+          overflow: hidden;
         }
       }
     }
@@ -59,7 +60,7 @@
 
   :global {
     .ant-card-bordered {
-      box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.09);
+      box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 9%);
 
       .ant-card-head {
         border-bottom: none;
@@ -69,17 +70,17 @@
 }
 
 .outer {
+  position: relative;
   width: 100%;
   height: 100%;
-  position: relative;
   overflow: hidden;
   font-size: 12px;
 
   .inner {
-    width: 100%;
-    height: 100%;
     position: absolute;
     left: 0;
+    width: 100%;
+    height: 100%;
     overflow-x: hidden;
     overflow-y: scroll;
   }
@@ -89,13 +90,13 @@
   }
 }
 
-.topContent {
+.top-content {
-  font-size: 24px;
-  font-weight: 500;
-  height: 120px;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  height: 120px;
+  font-weight: 500;
+  font-size: 24px;
 }
 
 .tabs {
@@ -111,7 +112,7 @@
   }
 }
 
-.spinContainer {
+.spin-container {
   width: 100%;
   min-height: 400px;
   padding: 30px 50px;

src/pages/network/containers/FloatingIp/index.jsx

@@ -164,7 +164,7 @@ export class FloatingIps extends Base {
                  
                 <Popover
                   content={
-                    <Row className={styles.popover_row} gutter={[8, 8]}>
+                    <Row className={styles['popover-row']} gutter={[8, 8]}>
                       {record.port_forwardings
                         .sort((a, b) => a.external_port - b.external_port)
                         .map((i, idx) => (

src/pages/network/containers/FloatingIp/styles.less

@@ -1,5 +1,5 @@
-.popover_row{
+.popover-row {
   max-width: 320px;
-  text-align: center;
   margin: 0 !important;
+  text-align: center;
 }

src/pages/network/containers/Topology/InstanceCard.jsx

@@ -150,7 +150,7 @@ export default class InstanceCard extends NodeCard {
     const detailData = servers[infoIndex];
     return (
       <div
-        className={styles.nodeTooltips}
+        className={styles['node-tooltips']}
         style={{ top: `${y}px`, left: `${x - 8}px` }}
       >
         <Popover

src/pages/network/containers/Topology/NodeCard.jsx

@@ -183,7 +183,9 @@ export default class NodeCard extends React.Component {
   }
 
   renderTitle(type, name) {
-    return <div className={styles.nodeCardTitle}>{`${type}: ${name}`}</div>;
+    return (
+      <div className={styles['node-card-title']}>{`${type}: ${name}`}</div>
+    );
   }
 
   render() {
@@ -196,7 +198,7 @@ export default class NodeCard extends React.Component {
     const detailData = routers[infoIndex];
     return (
       <div
-        className={styles.nodeTooltips}
+        className={styles['node-tooltips']}
         style={{ top: `${y}px`, left: `${x}px` }}
       >
         <Popover

src/pages/network/containers/Topology/index.less

@@ -1,45 +1,54 @@
-.nodeTooltips {
+.node-tooltips {
   :global {
     .ant-card-body {
-      padding: 15px
+      padding: 15px;
     }
   }
+
   position: absolute;
 }
+
 .image-icon {
   width: 15px;
   height: 15px;
-  // display: block;
   margin-right: 2px;
 }
-.descriptions-item{
+
+.descriptions-item {
   :global {
     .ant-descriptions-item-label {
       width: 80px;
     }
-    .ant-descriptions-row > th, .ant-descriptions-row > td {
+
+    .ant-descriptions-row > th,
+    .ant-descriptions-row > td {
       padding-bottom: 8px;
     }
   }
 }
-.nodeCardTitle {
+
-  font-size: 16px
+.node-card-title {
+  font-size: 16px;
 }
+
 .card-button {
   :global {
     .ant-btn-primary {
-      margin-right: 6px
+      margin-right: 6px;
     }
   }
 }
+
 .main {
   height: 100%;
+
   :global {
     .ant-btn-primary {
-      margin-right: 16px
+      margin-right: 16px;
     }
   }
 }
+
 .container {
   height: calc(100vh - 170px);
   overflow-y: auto;

src/pages/network/containers/VirtualAdapter/Detail/SecurityGroups/index.less

@@ -4,27 +4,31 @@
   min-height: calc(100vh - 108px);
   padding: 0 @body-padding;
 }
+
 .collapse {
-  // background: #FFFFFF;
+  margin-bottom: 24px;
   overflow: hidden;
-  margin-bottom: 24px;
 }
+
 .panel {
-  background: #FFFFFF;
-  font-size: larger;
-  padding-bottom: 12px;
-  padding-top: 12px;
   margin-bottom: 24px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  font-size: larger;
+  background: #fff;
 }
+
 .header-divider {
-  margin: 0 5px 0 5px;
-  background-color: @color-text-caption;
   width: 2px;
+  margin: 0 5px;
+  background-color: @color-text-caption;
 }
+
 .image {
   width: 100px;
   padding: 10px;
 }
+
 .radio-button {
   :global {
     .ant-radio-button-wrapper {
@@ -35,6 +39,7 @@
     }
   }
 }
+
 .security-group-text {
   font-size: 14px;
 }

src/pages/network/containers/VirtualAdapter/Detail/index.less

@@ -1,9 +1,10 @@
 .detail {
   margin: 0 16px;
   padding: 24px;
-  background-color: #FFFFFF;
+  background-color: #fff;
   border: 1px solid #efefef;
 
+  /* stylelint-disable-next-line selector-class-pattern */
   .public_key {
     text-overflow: ellipsis;
     -ms-word-wrap: break-word;

src/pages/storage/containers/Container/Detail/index.jsx

@@ -220,7 +220,7 @@ export default class ContainerObject extends Base {
         const content = <PopUpContent item={data} />;
         return (
           <Popover content={content} destroyTooltipOnHide trigger="click">
-            <span className="linkClass">{t('Detail Info')}</span>
+            <span className="link-class">{t('Detail Info')}</span>
           </Popover>
         );
       },

src/pages/storage/containers/Container/Detail/index.less

@@ -1,14 +1,16 @@
 .link-header {
-  line-height: 44px;
-  color: rgba(0, 0, 0, 0.85);
-  background-color: white;
   margin-bottom: 8px;
   padding-left: 8px;
+  color: rgba(0, 0, 0, 85%);
+  line-height: 44px;
+  background-color: white;
 }
+
 .link-title {
   margin-right: 8px;
 }
+
 .item-next {
-  margin-left: 8px;
   margin-right: 8px;
+  margin-left: 8px;
 }

src/pages/storage/containers/Container/index.jsx

@@ -150,7 +150,7 @@ export default class Container extends Base {
           const content = <PopUpContent name={data.name} />;
           return (
             <Popover content={content} destroyTooltipOnHide trigger="click">
-              <span className="linkClass">{t('Detail Info')}</span>
+              <span className="link-class">{t('Detail Info')}</span>
             </Popover>
           );
         },

src/pages/storage/containers/Volume/actions/Create/index.less

@@ -1,4 +1,4 @@
 .input {
-  margin-left: 16px;
   margin-right: 32px;
+  margin-left: 16px;
 }

src/pages/user-center/containers/UserCenter/index.jsx

@@ -17,6 +17,7 @@ import { inject, observer } from 'mobx-react';
 import { Row, Layout, Col, Avatar } from 'antd';
 import globalUserStore from 'stores/keystone/user';
 import ProfileIcon from 'asset/image/profile.svg';
+import classnames from 'classnames';
 import styles from './styles.less';
 
 export class Overview extends Component {
@@ -33,7 +34,7 @@ export class Overview extends Component {
 
   renderInfoItem(item) {
     return (
-      <Row className={styles.user_info_detail_item}>
+      <Row className={styles['user-info-detail-item']}>
         <Col span={6}>{item.label}</Col>
         <Col span={18}>{item.value}</Col>
       </Row>
@@ -51,14 +52,17 @@ export class Overview extends Component {
     };
     return (
       <>
-        <Col span={3} className={styles.user_info_avatar}>
+        <Col
+          span={3}
+          className={classnames(styles.hvc, styles['user-info-avatar'])}
+        >
           <Avatar
             size={{ xs: 33, sm: 44, md: 55, lg: 88, xl: 110, xxl: 138 }}
             src={ProfileIcon}
           />
         </Col>
         <Col span={21}>
-          <Row className={styles.user_info_detail}>
+          <Row className={styles['user-info-detail']}>
             {Object.keys(data).map((item) => {
               return (
                 <Col span={12} key={`user_info_detail_${item}`}>
@@ -82,7 +86,9 @@ export class Overview extends Component {
   render() {
     return (
       <Layout.Content className={styles.content}>
-        <Row className={styles.user_info_card}>{this.renderUserInfo()}</Row>
+        <Row className={classnames(styles.bgc, styles['user-info-card'])}>
+          {this.renderUserInfo()}
+        </Row>
         {this.renderExtra()}
       </Layout.Content>
     );

src/pages/user-center/containers/UserCenter/styles.less

@@ -1,31 +1,26 @@
 @import '~styles/variables';
 
 .content {
+  height: 100%;
   padding: 24px;
   overflow: auto;
-  height: 100%;
 
-  .user_info_card {
+  .user-info-card {
-    .normalBgc();
     height: 255px;
 
-    .user_info_avatar {
+    .user-info-detail {
-      .hvc();
-    }
-
-    .user_info_detail {
-      text-align: left;
       height: 100%;
       padding: 24px;
+      text-align: left;
 
-      .user_info_detail_item {
+      .user-info-detail-item {
-        height: 100%;
         display: flex;
         align-items: center;
+        height: 100%;
         padding-left: 3rem;
+        color: @color-text-body;
         font-weight: 400;
         font-size: 16px;
-        color: @color-text-body;
       }
     }
   }
@@ -33,14 +28,14 @@
 
 .hvc {
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
 }
 
-.normalBgc {
+.bgc {
-  background-color: white;
-  box-shadow: @base-shadow;
-  padding: 24px;
-  border-radius: @border-radius;
   margin-bottom: 16px;
+  padding: 24px;
+  background-color: white;
+  border-radius: @border-radius;
+  box-shadow: @base-shadow;
 }

src/resources/instance.jsx

@@ -594,7 +594,7 @@ export const actionColumn = (self) => {
           <>
             {value && (
               <Popover content={content} destroyTooltipOnHide trigger="click">
-                <span className="linkClass">{value}</span>
+                <span className="link-class">{value}</span>
               </Popover>
             )}
           </>