diff --git a/package-lock.json b/package-lock.json
index f1bc2cde..c42aa688 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2761,33 +2761,12 @@
           "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
           "dev": true
         },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true
-        },
         "emoji-regex": {
           "version": "9.2.2",
           "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-9.2.2.tgz",
           "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
           "dev": true
         },
-        "is-fullwidth-code-point": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-          "dev": true
-        },
         "string-width": {
           "version": "5.1.2",
           "resolved": "https://registry.npmmirror.com/string-width/-/string-width-5.1.2.tgz",
@@ -2799,40 +2778,6 @@
             "strip-ansi": "^7.0.1"
           }
         },
-        "string-width-cjs": {
-          "version": "npm:string-width@4.2.3",
-          "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
-          "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-          "dev": true,
-          "requires": {
-            "emoji-regex": "^8.0.0",
-            "is-fullwidth-code-point": "^3.0.0",
-            "strip-ansi": "^6.0.1"
-          },
-          "dependencies": {
-            "ansi-regex": {
-              "version": "5.0.1",
-              "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
-              "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-              "dev": true
-            },
-            "emoji-regex": {
-              "version": "8.0.0",
-              "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
-              "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-              "dev": true
-            },
-            "strip-ansi": {
-              "version": "6.0.1",
-              "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
-              "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-              "dev": true,
-              "requires": {
-                "ansi-regex": "^5.0.1"
-              }
-            }
-          }
-        },
         "strip-ansi": {
           "version": "7.1.0",
           "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-7.1.0.tgz",
@@ -2842,23 +2787,6 @@
             "ansi-regex": "^6.0.1"
           }
         },
-        "strip-ansi-cjs": {
-          "version": "npm:strip-ansi@6.0.1",
-          "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
-          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^5.0.1"
-          },
-          "dependencies": {
-            "ansi-regex": {
-              "version": "5.0.1",
-              "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
-              "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-              "dev": true
-            }
-          }
-        },
         "wrap-ansi": {
           "version": "8.1.0",
           "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
@@ -2869,60 +2797,6 @@
             "string-width": "^5.0.1",
             "strip-ansi": "^7.0.1"
           }
-        },
-        "wrap-ansi-cjs": {
-          "version": "npm:wrap-ansi@7.0.0",
-          "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-          "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.0.0",
-            "string-width": "^4.1.0",
-            "strip-ansi": "^6.0.0"
-          },
-          "dependencies": {
-            "ansi-regex": {
-              "version": "5.0.1",
-              "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
-              "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-              "dev": true
-            },
-            "ansi-styles": {
-              "version": "4.3.0",
-              "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
-              "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-              "dev": true,
-              "requires": {
-                "color-convert": "^2.0.1"
-              }
-            },
-            "emoji-regex": {
-              "version": "8.0.0",
-              "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
-              "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-              "dev": true
-            },
-            "string-width": {
-              "version": "4.2.3",
-              "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
-              "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-              "dev": true,
-              "requires": {
-                "emoji-regex": "^8.0.0",
-                "is-fullwidth-code-point": "^3.0.0",
-                "strip-ansi": "^6.0.1"
-              }
-            },
-            "strip-ansi": {
-              "version": "6.0.1",
-              "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
-              "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-              "dev": true,
-              "requires": {
-                "ansi-regex": "^5.0.1"
-              }
-            }
-          }
         }
       }
     },
@@ -3686,11 +3560,6 @@
       "dev": true,
       "optional": true
     },
-    "@popperjs/core": {
-      "version": "npm:@sxzz/popperjs-es@2.11.7",
-      "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
-      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
-    },
     "@probe.gl/env": {
       "version": "3.6.0",
       "resolved": "https://registry.npmmirror.com/@probe.gl/env/-/env-3.6.0.tgz",
@@ -5100,6 +4969,17 @@
             "color-convert": "^2.0.1"
           }
         },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
         "cliui": {
           "version": "6.0.0",
           "resolved": "https://registry.npmmirror.com/cliui/-/cliui-6.0.0.tgz",
@@ -5143,12 +5023,26 @@
             "universalify": "^0.1.0"
           }
         },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
         "is-fullwidth-code-point": {
           "version": "3.0.0",
           "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
           "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
           "dev": true
         },
+        "json5": {
+          "version": "2.2.3",
+          "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.3.tgz",
+          "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+          "dev": true,
+          "optional": true
+        },
         "jsonfile": {
           "version": "4.0.0",
           "resolved": "https://registry.npmmirror.com/jsonfile/-/jsonfile-4.0.0.tgz",
@@ -5158,6 +5052,18 @@
             "graceful-fs": "^4.1.6"
           }
         },
+        "loader-utils": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
+          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "minipass": {
           "version": "3.3.6",
           "resolved": "https://registry.npmmirror.com/minipass/-/minipass-3.3.6.tgz",
@@ -5196,6 +5102,28 @@
             "ansi-regex": "^5.0.1"
           }
         },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.8.3",
+          "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
+          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
+        },
         "wrap-ansi": {
           "version": "6.2.0",
           "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@@ -5771,11 +5699,6 @@
       "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==",
       "dev": true
     },
-    "abbrev": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmmirror.com/abbrev/-/abbrev-1.1.1.tgz",
-      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
-    },
     "accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmmirror.com/accepts/-/accepts-1.3.8.tgz",
@@ -5828,14 +5751,6 @@
       "integrity": "sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==",
       "dev": true
     },
-    "affine-hull": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/affine-hull/-/affine-hull-1.0.0.tgz",
-      "integrity": "sha512-3QNG6+vFAwJvSZHsJYDJ/mt1Cxx9n5ffA+1Ohmj7udw0JuRgUVIXK0P9N9pCMuEdS3jCNt8GFX5q2fChq+GO3Q==",
-      "requires": {
-        "robust-orientation": "^1.1.3"
-      }
-    },
     "agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmmirror.com/agent-base/-/agent-base-6.0.2.tgz",
@@ -5876,7 +5791,8 @@
     "amdefine": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/amdefine/-/amdefine-1.0.1.tgz",
-      "integrity": "sha512-S2Hw0TtNkMJhIabBwIojKL9YHO5T0n5eNqWJ7Lrlel/zDbftQpxpapi8tZs3X1HWa+u+QeydGmzzNU0m09+Rcg=="
+      "integrity": "sha512-S2Hw0TtNkMJhIabBwIojKL9YHO5T0n5eNqWJ7Lrlel/zDbftQpxpapi8tZs3X1HWa+u+QeydGmzzNU0m09+Rcg==",
+      "optional": true
     },
     "ansi-colors": {
       "version": "3.2.4",
@@ -5927,7 +5843,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
       "requires": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -5936,7 +5851,8 @@
     "aproba": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/aproba/-/aproba-1.2.0.tgz",
-      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw=="
+      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
+      "dev": true
     },
     "arch": {
       "version": "2.2.0",
@@ -5944,15 +5860,6 @@
       "integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==",
       "dev": true
     },
-    "are-we-there-yet": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmmirror.com/are-we-there-yet/-/are-we-there-yet-1.1.7.tgz",
-      "integrity": "sha512-nxwy40TuMiUGqMyRHgCSWZ9FM4VAoRP4xUYSTv5ImRog+h9yISPbVH7H8fASCIzYn9wlEv4zvFL7uKDMCFQm3g==",
-      "requires": {
-        "delegates": "^1.0.0",
-        "readable-stream": "^2.0.6"
-      }
-    },
     "argparse": {
       "version": "1.0.10",
       "resolved": "https://registry.npmmirror.com/argparse/-/argparse-1.0.10.tgz",
@@ -5998,11 +5905,6 @@
         "is-array-buffer": "^3.0.1"
       }
     },
-    "array-find-index": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/array-find-index/-/array-find-index-1.0.2.tgz",
-      "integrity": "sha512-M1HQyIXcBGtVywBt8WVdim+lrNaK7VHp99Qt5pSNziXznKHViIBbXWtfRTpEFpF/c4FdfxNAsCCwPp5phBYJtw=="
-    },
     "array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/array-flatten/-/array-flatten-1.1.1.tgz",
@@ -6129,6 +6031,7 @@
       "version": "0.2.6",
       "resolved": "https://registry.npmmirror.com/asn1/-/asn1-0.2.6.tgz",
       "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
+      "dev": true,
       "requires": {
         "safer-buffer": "~2.1.0"
       }
@@ -6183,7 +6086,8 @@
     "assert-plus": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/assert-plus/-/assert-plus-1.0.0.tgz",
-      "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw=="
+      "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
+      "dev": true
     },
     "assign-symbols": {
       "version": "1.0.0",
@@ -6248,22 +6152,12 @@
       "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
       "dev": true
     },
-    "async": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmmirror.com/async/-/async-3.2.5.tgz",
-      "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg=="
-    },
     "async-each": {
       "version": "1.0.6",
       "resolved": "https://registry.npmmirror.com/async-each/-/async-each-1.0.6.tgz",
       "integrity": "sha512-c646jH1avxr+aVpndVMeAfYw7wAa6idufrlN3LPA4PmKS0QEGp6PIC9nwz0WQkkvBGAMEki3pFdtxaF39J9vvg==",
       "dev": true
     },
-    "async-foreach": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmmirror.com/async-foreach/-/async-foreach-0.1.3.tgz",
-      "integrity": "sha512-VUeSMD8nEGBWaZK4lizI1sf3yEC7pnAQ/mrI7pC2fBz2s/tq5jWWEngTwaf0Gruu/OoXRGLGg1XFqpYBiGTYJA=="
-    },
     "async-limiter": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/async-limiter/-/async-limiter-1.0.1.tgz",
@@ -6278,7 +6172,8 @@
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "dev": true
     },
     "atob": {
       "version": "2.1.2",
@@ -6327,12 +6222,14 @@
     "aws-sign2": {
       "version": "0.7.0",
       "resolved": "https://registry.npmmirror.com/aws-sign2/-/aws-sign2-0.7.0.tgz",
-      "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA=="
+      "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==",
+      "dev": true
     },
     "aws4": {
       "version": "1.12.0",
       "resolved": "https://registry.npmmirror.com/aws4/-/aws4-1.12.0.tgz",
-      "integrity": "sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg=="
+      "integrity": "sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==",
+      "dev": true
     },
     "axios": {
       "version": "0.21.4",
@@ -6650,6 +6547,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
       "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
+      "dev": true,
       "requires": {
         "tweetnacl": "^0.14.3"
       }
@@ -6674,21 +6572,7 @@
     "binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true
-    },
-    "bit-twiddle": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/bit-twiddle/-/bit-twiddle-1.0.2.tgz",
-      "integrity": "sha512-B9UhK0DKFZhoTFcfvAzhqsjStvGJp9vYWf3+6SNTtdSQnvIgfkHbgHrg/e4+TH71N2GDu8tpmCVoyfrL1d7ntA=="
-    },
-    "block-stream": {
-      "version": "0.0.9",
-      "resolved": "https://registry.npmmirror.com/block-stream/-/block-stream-0.0.9.tgz",
-      "integrity": "sha512-OorbnJVPII4DuUKbjARAe8u8EfqOmkEEaSFIyoQ7OjTHn6kafxWl0wLgoZ2rXaYd7MyLcDaU4TmhfxtwgcccMQ==",
-      "requires": {
-        "inherits": "~2.0.0"
-      }
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
     },
     "bluebird": {
       "version": "3.7.2",
@@ -6798,7 +6682,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmmirror.com/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
       "requires": {
         "fill-range": "^7.0.1"
       }
@@ -7192,20 +7075,6 @@
         "upper-case": "^1.1.1"
       }
     },
-    "camelcase": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-2.1.1.tgz",
-      "integrity": "sha512-DLIsRzJVBQu72meAKPkWQOLcujdXT32hwdfnkI1frSiSRMK1MofjKHf+MEx0SB6fjEFXL8fBDv1dKymBlOp4Qw=="
-    },
-    "camelcase-keys": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
-      "integrity": "sha512-bA/Z/DERHKqoEOrp+qeGKw1QlvEQkGZSc0XaY6VnTxZr+Kv1G5zFwttpjv8qxZ/sBPT4nthwZaAcsAZTJlSKXQ==",
-      "requires": {
-        "camelcase": "^2.0.0",
-        "map-obj": "^1.0.0"
-      }
-    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -7242,7 +7111,8 @@
     "caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npmmirror.com/caseless/-/caseless-0.12.0.tgz",
-      "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw=="
+      "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
+      "dev": true
     },
     "chalk": {
       "version": "1.1.3",
@@ -7278,7 +7148,6 @@
       "version": "3.5.3",
       "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-      "dev": true,
       "requires": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -7555,6 +7424,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmmirror.com/cliui/-/cliui-5.0.0.tgz",
       "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+      "dev": true,
       "requires": {
         "string-width": "^3.1.0",
         "strip-ansi": "^5.2.0",
@@ -7564,17 +7434,20 @@
         "ansi-regex": {
           "version": "4.1.1",
           "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-4.1.1.tgz",
-          "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g=="
+          "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
+          "dev": true
         },
         "is-fullwidth-code-point": {
           "version": "2.0.0",
           "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w=="
+          "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==",
+          "dev": true
         },
         "string-width": {
           "version": "3.1.0",
           "resolved": "https://registry.npmmirror.com/string-width/-/string-width-3.1.0.tgz",
           "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
           "requires": {
             "emoji-regex": "^7.0.1",
             "is-fullwidth-code-point": "^2.0.0",
@@ -7585,6 +7458,7 @@
           "version": "5.2.0",
           "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-5.2.0.tgz",
           "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
           "requires": {
             "ansi-regex": "^4.1.0"
           }
@@ -7660,11 +7534,6 @@
         }
       }
     },
-    "code-point-at": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/code-point-at/-/code-point-at-1.1.0.tgz",
-      "integrity": "sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA=="
-    },
     "codemirror": {
       "version": "5.65.16",
       "resolved": "https://registry.npmmirror.com/codemirror/-/codemirror-5.65.16.tgz",
@@ -7721,6 +7590,7 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
       "requires": {
         "delayed-stream": "~1.0.0"
       }
@@ -7869,11 +7739,6 @@
       "integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==",
       "dev": true
     },
-    "console-control-strings": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/console-control-strings/-/console-control-strings-1.1.0.tgz",
-      "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ=="
-    },
     "consolidate": {
       "version": "0.15.1",
       "resolved": "https://registry.npmmirror.com/consolidate/-/consolidate-0.15.1.tgz",
@@ -8234,16 +8099,6 @@
       "resolved": "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-1.9.0.tgz",
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
     },
-    "convex-hull": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmmirror.com/convex-hull/-/convex-hull-1.0.3.tgz",
-      "integrity": "sha512-24rZAoh81t41GHPLAxcsokgjH9XNoVqU2OiSi8iMHUn6HUURfiefcEWAPt1AfwZjBBWTKadOm1xUcUMnfFukhQ==",
-      "requires": {
-        "affine-hull": "^1.0.0",
-        "incremental-convex-hull": "^1.0.1",
-        "monotone-convex-hull-2d": "^1.0.1"
-      }
-    },
     "cookie": {
       "version": "0.5.0",
       "resolved": "https://registry.npmmirror.com/cookie/-/cookie-0.5.0.tgz",
@@ -8519,15 +8374,6 @@
         }
       }
     },
-    "cross-spawn": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-3.0.1.tgz",
-      "integrity": "sha512-eZ+m1WNhSZutOa/uRblAc9Ut5MQfukFrFMtPSm3bZCA888NmMd5AWXWdgRZ80zd+pTk1P2JrGjg9pUPTvl2PWQ==",
-      "requires": {
-        "lru-cache": "^4.0.1",
-        "which": "^1.2.9"
-      }
-    },
     "crypto-browserify": {
       "version": "3.12.0",
       "resolved": "https://registry.npmmirror.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
@@ -8918,14 +8764,6 @@
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
-    "currently-unhandled": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmmirror.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
-      "integrity": "sha512-/fITjgjGU50vjQ4FH6eUoYu+iUoUKIXws2hL15JJpIR+BbTxaXQsMuuyjtNh2WqsSBS5nsaZHFsFecyw5CCAng==",
-      "requires": {
-        "array-find-index": "^1.0.1"
-      }
-    },
     "cyclist": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/cyclist/-/cyclist-1.0.2.tgz",
@@ -9056,6 +8894,7 @@
       "version": "1.14.1",
       "resolved": "https://registry.npmmirror.com/dashdash/-/dashdash-1.14.1.tgz",
       "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
+      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0"
       }
@@ -9088,7 +8927,8 @@
     "decamelize": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA=="
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "dev": true
     },
     "decamelize-keys": {
       "version": "1.1.1",
@@ -9327,12 +9167,8 @@
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
-    },
-    "delegates": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/delegates/-/delegates-1.0.0.tgz",
-      "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ=="
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "dev": true
     },
     "depd": {
       "version": "2.0.0",
@@ -9631,6 +9467,7 @@
       "version": "0.1.2",
       "resolved": "https://registry.npmmirror.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
       "integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
+      "dev": true,
       "requires": {
         "jsbn": "~0.1.0",
         "safer-buffer": "^2.1.0"
@@ -9752,6 +9589,13 @@
         "lodash-unified": "^1.0.2",
         "memoize-one": "^6.0.0",
         "normalize-wheel-es": "^1.2.0"
+      },
+      "dependencies": {
+        "@popperjs/core": {
+          "version": "npm:@sxzz/popperjs-es@2.11.7",
+          "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+          "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
+        }
       }
     },
     "element-resize-detector": {
@@ -9794,7 +9638,8 @@
     "emoji-regex": {
       "version": "7.0.3",
       "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-7.0.3.tgz",
-      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
+      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
+      "dev": true
     },
     "emojis-list": {
       "version": "3.0.0",
@@ -9891,6 +9736,7 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmmirror.com/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
       "requires": {
         "is-arrayish": "^0.2.1"
       }
@@ -10978,7 +10824,8 @@
     "extsprintf": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/extsprintf/-/extsprintf-1.3.0.tgz",
-      "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g=="
+      "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==",
+      "dev": true
     },
     "fast-deep-equal": {
       "version": "3.1.3",
@@ -11108,7 +10955,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
       "requires": {
         "to-regex-range": "^5.0.1"
       }
@@ -11177,6 +11023,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/find-up/-/find-up-1.1.2.tgz",
       "integrity": "sha512-jvElSjyuo4EMQGoTwo1uJU5pQMwTW5lS1x05zzfJuTIyLR3zwO27LYrxNg+dlvKpGOuGy/MzBdXh80g0ve5+HA==",
+      "dev": true,
       "requires": {
         "path-exists": "^2.0.0",
         "pinkie-promise": "^2.0.0"
@@ -11281,12 +11128,14 @@
     "forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npmmirror.com/forever-agent/-/forever-agent-0.6.1.tgz",
-      "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw=="
+      "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==",
+      "dev": true
     },
     "form-data": {
       "version": "2.3.3",
       "resolved": "https://registry.npmmirror.com/form-data/-/form-data-2.3.3.tgz",
       "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+      "dev": true,
       "requires": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.6",
@@ -11371,20 +11220,8 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "optional": true
     },
-    "fstream": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmmirror.com/fstream/-/fstream-1.0.12.tgz",
-      "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
-      "requires": {
-        "graceful-fs": "^4.1.2",
-        "inherits": "~2.0.0",
-        "mkdirp": ">=0.5 0",
-        "rimraf": "2"
-      }
-    },
     "function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
@@ -11413,53 +11250,12 @@
       "resolved": "https://registry.npmmirror.com/functions-have-names/-/functions-have-names-1.2.3.tgz",
       "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
     },
-    "gauge": {
-      "version": "2.7.4",
-      "resolved": "https://registry.npmmirror.com/gauge/-/gauge-2.7.4.tgz",
-      "integrity": "sha512-14x4kjc6lkD3ltw589k0NrPD6cCNTD6CWoVUNpB85+DrtONoZn+Rug6xZU5RvSC4+TZPxA5AnBibQYAvZn41Hg==",
-      "requires": {
-        "aproba": "^1.0.3",
-        "console-control-strings": "^1.0.0",
-        "has-unicode": "^2.0.0",
-        "object-assign": "^4.1.0",
-        "signal-exit": "^3.0.0",
-        "string-width": "^1.0.1",
-        "strip-ansi": "^3.0.1",
-        "wide-align": "^1.1.0"
-      }
-    },
-    "gaze": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmmirror.com/gaze/-/gaze-1.1.3.tgz",
-      "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==",
-      "requires": {
-        "globule": "^1.0.0"
-      }
-    },
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmmirror.com/gensync/-/gensync-1.0.0-beta.2.tgz",
       "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
       "dev": true
     },
-    "geojson-area": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmmirror.com/geojson-area/-/geojson-area-0.2.1.tgz",
-      "integrity": "sha512-I+cht30/CFFObh8GgEa/1o9Kd7RwQTHmotYp3ToyCpxxDFNcuX5SlErKkvoy3otnrsWzODN8yscSTGOAkQ3tKQ==",
-      "requires": {
-        "wgs84": "0.0.0"
-      }
-    },
-    "geojson-normalize": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmmirror.com/geojson-normalize/-/geojson-normalize-0.0.0.tgz",
-      "integrity": "sha512-h/ldgc7C2DrYDIn+F/o+AgZLxmeC+O4q3wvGwiuBjTTRnhxvxaGz6cE6cRTeMH89jIJM3BiP+R6Yiht7f3PBuA=="
-    },
-    "geojson-random": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmmirror.com/geojson-random/-/geojson-random-0.2.2.tgz",
-      "integrity": "sha512-/vZQ14mjKPG3LJ7bpyXsJ0aoz8NzvwpwwP//uBgbzIu2BCFd4uRagp1QvY3RAzRQsHOHyVh33dbYUYws7vOCkg=="
-    },
     "geojson-vt": {
       "version": "3.2.1",
       "resolved": "https://registry.npmmirror.com/geojson-vt/-/geojson-vt-3.2.1.tgz",
@@ -11473,7 +11269,8 @@
     "get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmmirror.com/get-caller-file/-/get-caller-file-2.0.5.tgz",
-      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true
     },
     "get-intrinsic": {
       "version": "1.2.2",
@@ -11492,11 +11289,6 @@
       "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==",
       "dev": true
     },
-    "get-stdin": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmmirror.com/get-stdin/-/get-stdin-4.0.1.tgz",
-      "integrity": "sha512-F5aQMywwJ2n85s4hJPTT9RPxGmubonuB10MNYo17/xph174n2MIR33HRguhzVag10O/npM7SPk73LMZNP+FaWw=="
-    },
     "get-stream": {
       "version": "6.0.1",
       "resolved": "https://registry.npmmirror.com/get-stream/-/get-stream-6.0.1.tgz",
@@ -11521,6 +11313,7 @@
       "version": "0.1.7",
       "resolved": "https://registry.npmmirror.com/getpass/-/getpass-0.1.7.tgz",
       "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
+      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0"
       }
@@ -11820,7 +11613,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "requires": {
         "is-glob": "^4.0.1"
       }
@@ -11889,39 +11681,6 @@
         }
       }
     },
-    "globule": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmmirror.com/globule/-/globule-1.3.4.tgz",
-      "integrity": "sha512-OPTIfhMBh7JbBYDpa5b+Q5ptmMWKwcNcFSR/0c6t8V4f3ZAVBEsKNY37QdVqmLRYSMhOUGYrY0QhSoEpzGr/Eg==",
-      "requires": {
-        "glob": "~7.1.1",
-        "lodash": "^4.17.21",
-        "minimatch": "~3.0.2"
-      },
-      "dependencies": {
-        "glob": {
-          "version": "7.1.7",
-          "resolved": "https://registry.npmmirror.com/glob/-/glob-7.1.7.tgz",
-          "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
-          "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.0.4",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
-        },
-        "minimatch": {
-          "version": "3.0.8",
-          "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.0.8.tgz",
-          "integrity": "sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==",
-          "requires": {
-            "brace-expansion": "^1.1.7"
-          }
-        }
-      }
-    },
     "gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.0.1.tgz",
@@ -11982,12 +11741,14 @@
     "har-schema": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/har-schema/-/har-schema-2.0.0.tgz",
-      "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q=="
+      "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
+      "dev": true
     },
     "har-validator": {
       "version": "5.1.5",
       "resolved": "https://registry.npmmirror.com/har-validator/-/har-validator-5.1.5.tgz",
       "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
+      "dev": true,
       "requires": {
         "ajv": "^6.12.3",
         "har-schema": "^2.0.0"
@@ -12049,11 +11810,6 @@
         "has-symbols": "^1.0.2"
       }
     },
-    "has-unicode": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmmirror.com/has-unicode/-/has-unicode-2.0.1.tgz",
-      "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ=="
-    },
     "has-value": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/has-value/-/has-value-1.0.0.tgz",
@@ -12198,7 +11954,8 @@
     "hosted-git-info": {
       "version": "2.8.9",
       "resolved": "https://registry.npmmirror.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
-      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
+      "dev": true
     },
     "hpack.js": {
       "version": "2.1.6",
@@ -12455,6 +12212,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/http-signature/-/http-signature-1.2.0.tgz",
       "integrity": "sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==",
+      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0",
         "jsprim": "^1.2.2",
@@ -12535,6 +12293,11 @@
       "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
       "dev": true
     },
+    "immutable": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.5.tgz",
+      "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw=="
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -12615,28 +12378,6 @@
       "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
       "dev": true
     },
-    "in-publish": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmmirror.com/in-publish/-/in-publish-2.0.1.tgz",
-      "integrity": "sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ=="
-    },
-    "incremental-convex-hull": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/incremental-convex-hull/-/incremental-convex-hull-1.0.1.tgz",
-      "integrity": "sha512-mKRJDXtzo1R9LxCuB1TdwZXHaPaIEldoGPsXy2jrJc/kufyqp8y/VAQQxThSxM2aroLoh6uObexPk1ASJ7FB7Q==",
-      "requires": {
-        "robust-orientation": "^1.1.2",
-        "simplicial-complex": "^1.0.0"
-      }
-    },
-    "indent-string": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/indent-string/-/indent-string-2.1.0.tgz",
-      "integrity": "sha512-aqwDFWSgSgfRaEwao5lg5KEcVd/2a+D1rvoG7NdilmYz0NwRk6StWpWdz/Hpk34MKPpx7s8XxUqimfcQK6gGlg==",
-      "requires": {
-        "repeating": "^2.0.0"
-      }
-    },
     "indexes-of": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/indexes-of/-/indexes-of-1.0.1.tgz",
@@ -12916,7 +12657,8 @@
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmmirror.com/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true
     },
     "is-bigint": {
       "version": "1.0.4",
@@ -12931,7 +12673,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "requires": {
         "binary-extensions": "^2.0.0"
       }
@@ -13036,21 +12777,7 @@
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true
-    },
-    "is-finite": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/is-finite/-/is-finite-1.1.0.tgz",
-      "integrity": "sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w=="
-    },
-    "is-fullwidth-code-point": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-      "integrity": "sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw==",
-      "requires": {
-        "number-is-nan": "^1.0.0"
-      }
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="
     },
     "is-generator-fn": {
       "version": "2.1.0",
@@ -13062,7 +12789,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "requires": {
         "is-extglob": "^2.1.1"
       }
@@ -13088,8 +12814,7 @@
     "is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
     },
     "is-number-object": {
       "version": "1.0.7",
@@ -13234,12 +12959,8 @@
     "is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
-    },
-    "is-utf8": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmmirror.com/is-utf8/-/is-utf8-0.2.1.tgz",
-      "integrity": "sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q=="
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
+      "dev": true
     },
     "is-weakmap": {
       "version": "2.0.1",
@@ -13296,7 +13017,8 @@
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmmirror.com/isstream/-/isstream-0.1.2.tgz",
-      "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g=="
+      "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
+      "dev": true
     },
     "istanbul-lib-coverage": {
       "version": "3.2.2",
@@ -15233,7 +14955,8 @@
     "jsbn": {
       "version": "0.1.1",
       "resolved": "https://registry.npmmirror.com/jsbn/-/jsbn-0.1.1.tgz",
-      "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg=="
+      "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
+      "dev": true
     },
     "jsdom": {
       "version": "16.7.0",
@@ -15364,7 +15087,8 @@
     "json-schema": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/json-schema/-/json-schema-0.4.0.tgz",
-      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
+      "dev": true
     },
     "json-schema-traverse": {
       "version": "0.4.1",
@@ -15385,7 +15109,8 @@
     "json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://registry.npmmirror.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA=="
+      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
+      "dev": true
     },
     "json5": {
       "version": "1.0.2",
@@ -15419,6 +15144,7 @@
       "version": "1.4.2",
       "resolved": "https://registry.npmmirror.com/jsprim/-/jsprim-1.4.2.tgz",
       "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
+      "dev": true,
       "requires": {
         "assert-plus": "1.0.0",
         "extsprintf": "1.3.0",
@@ -15426,11 +15152,6 @@
         "verror": "1.10.0"
       }
     },
-    "jsts": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmmirror.com/jsts/-/jsts-1.1.2.tgz",
-      "integrity": "sha512-4qWAI9gR72HcGWCl7bej9/2dCM6Nv6dh5Zn1G+wzJYW9wsFL/2bPA3kdR8IAPObmF4gb56l5EGlXxErmB+9GOw=="
-    },
     "kdbush": {
       "version": "4.0.2",
       "resolved": "https://registry.npmmirror.com/kdbush/-/kdbush-4.0.2.tgz",
@@ -15507,18 +15228,6 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
-    "load-json-file": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/load-json-file/-/load-json-file-1.1.0.tgz",
-      "integrity": "sha512-cy7ZdNRXdablkXYNI049pthVeXFurRyb9+hA/dZzerZ0pGTx42z+y+ssxBaVV2l70t1muq5IdKhn4UtcoGUY9A==",
-      "requires": {
-        "graceful-fs": "^4.1.2",
-        "parse-json": "^2.2.0",
-        "pify": "^2.0.0",
-        "pinkie-promise": "^2.0.0",
-        "strip-bom": "^2.0.0"
-      }
-    },
     "loader-fs-cache": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz",
@@ -15581,6 +15290,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/locate-path/-/locate-path-3.0.0.tgz",
       "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+      "dev": true,
       "requires": {
         "p-locate": "^3.0.0",
         "path-exists": "^3.0.0"
@@ -15589,7 +15299,8 @@
         "path-exists": {
           "version": "3.0.0",
           "resolved": "https://registry.npmmirror.com/path-exists/-/path-exists-3.0.0.tgz",
-          "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ=="
+          "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
+          "dev": true
         }
       }
     },
@@ -15714,15 +15425,6 @@
       "integrity": "sha512-tCRIJM51SHjAayKwC+QAg8hT8vg6z7GSgLJKGvzuPb1Wc+hLzqtuVLxp6/HzSPOozuK+8ErAhy7U/sVzw8Dgfg==",
       "dev": true
     },
-    "loud-rejection": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmmirror.com/loud-rejection/-/loud-rejection-1.6.0.tgz",
-      "integrity": "sha512-RPNliZOFkqFumDhvYqOaNY4Uz9oJM2K9tC6JWsJJsNdhuONW4LQHRBpb0qf4pJApVffI5N39SwzWZJuEhfd7eQ==",
-      "requires": {
-        "currently-unhandled": "^0.4.1",
-        "signal-exit": "^3.0.0"
-      }
-    },
     "lower-case": {
       "version": "1.1.4",
       "resolved": "https://registry.npmmirror.com/lower-case/-/lower-case-1.1.4.tgz",
@@ -15733,6 +15435,7 @@
       "version": "4.1.5",
       "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-4.1.5.tgz",
       "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+      "dev": true,
       "requires": {
         "pseudomap": "^1.0.2",
         "yallist": "^2.1.2"
@@ -15794,7 +15497,8 @@
     "map-obj": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/map-obj/-/map-obj-1.0.1.tgz",
-      "integrity": "sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg=="
+      "integrity": "sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==",
+      "dev": true
     },
     "map-visit": {
       "version": "1.0.0",
@@ -15875,23 +15579,6 @@
         "readable-stream": "^2.0.1"
       }
     },
-    "meow": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmmirror.com/meow/-/meow-3.7.0.tgz",
-      "integrity": "sha512-TNdwZs0skRlpPpCUK25StC4VH+tP5GgeY1HQOOGP+lQ2xtdkN2VtT/5tiX9k3IWpkBPV9b3LsAWXn4GGi/PrSA==",
-      "requires": {
-        "camelcase-keys": "^2.0.0",
-        "decamelize": "^1.1.2",
-        "loud-rejection": "^1.0.0",
-        "map-obj": "^1.0.1",
-        "minimist": "^1.1.3",
-        "normalize-package-data": "^2.3.4",
-        "object-assign": "^4.0.1",
-        "read-pkg-up": "^1.0.1",
-        "redent": "^1.0.0",
-        "trim-newlines": "^1.0.0"
-      }
-    },
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -16084,12 +15771,14 @@
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true
     },
     "mime-types": {
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
       "requires": {
         "mime-db": "1.52.0"
       }
@@ -16233,6 +15922,7 @@
       "version": "0.5.6",
       "resolved": "https://registry.npmmirror.com/mkdirp/-/mkdirp-0.5.6.tgz",
       "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "dev": true,
       "requires": {
         "minimist": "^1.2.6"
       }
@@ -16313,14 +16003,6 @@
         "moment": "^2.29.4"
       }
     },
-    "monotone-convex-hull-2d": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/monotone-convex-hull-2d/-/monotone-convex-hull-2d-1.0.1.tgz",
-      "integrity": "sha512-ixQ3qdXTVHvR7eAoOjKY8kGxl9YjOFtzi7qOjwmFFPfBqZHVOjUFOBy/Dk9dusamRSPJe9ggyfSypRbs0Bl8BA==",
-      "requires": {
-        "robust-orientation": "^1.1.3"
-      }
-    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -16382,7 +16064,9 @@
     "nan": {
       "version": "2.18.0",
       "resolved": "https://registry.npmmirror.com/nan/-/nan-2.18.0.tgz",
-      "integrity": "sha512-W7tfG7vMOGtD30sHoZSSc/JVYiyDPEyQVso/Zz+/uQd0B0L46gtC+pHha5FFMRpil6fm/AoEcRWyOVi4+E/f8w=="
+      "integrity": "sha512-W7tfG7vMOGtD30sHoZSSc/JVYiyDPEyQVso/Zz+/uQd0B0L46gtC+pHha5FFMRpil6fm/AoEcRWyOVi4+E/f8w==",
+      "dev": true,
+      "optional": true
     },
     "nanoid": {
       "version": "3.3.7",
@@ -16477,32 +16161,6 @@
       "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
       "dev": true
     },
-    "node-gyp": {
-      "version": "3.8.0",
-      "resolved": "https://registry.npmmirror.com/node-gyp/-/node-gyp-3.8.0.tgz",
-      "integrity": "sha512-3g8lYefrRRzvGeSowdJKAKyks8oUpLEd/DyPV4eMhVlhJ0aNaZqIrNUIPuEWWTAoPqyFkfGrM67MC69baqn6vA==",
-      "requires": {
-        "fstream": "^1.0.0",
-        "glob": "^7.0.3",
-        "graceful-fs": "^4.1.2",
-        "mkdirp": "^0.5.0",
-        "nopt": "2 || 3",
-        "npmlog": "0 || 1 || 2 || 3 || 4",
-        "osenv": "0",
-        "request": "^2.87.0",
-        "rimraf": "2",
-        "semver": "~5.3.0",
-        "tar": "^2.0.0",
-        "which": "1"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "5.3.0",
-          "resolved": "https://registry.npmmirror.com/semver/-/semver-5.3.0.tgz",
-          "integrity": "sha512-mfmm3/H9+67MCVix1h+IXTpDwL6710LyHuk7+cWC9T1mE0qz4iHhh6r4hU2wrIT9iTsAAC2XQRvfblL028cpLw=="
-        }
-      }
-    },
     "node-int64": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/node-int64/-/node-int64-0.4.0.tgz",
@@ -16625,42 +16283,11 @@
       "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
       "dev": true
     },
-    "node-sass": {
-      "version": "4.14.1",
-      "resolved": "https://registry.npmmirror.com/node-sass/-/node-sass-4.14.1.tgz",
-      "integrity": "sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g==",
-      "requires": {
-        "async-foreach": "^0.1.3",
-        "chalk": "^1.1.1",
-        "cross-spawn": "^3.0.0",
-        "gaze": "^1.0.0",
-        "get-stdin": "^4.0.1",
-        "glob": "^7.0.3",
-        "in-publish": "^2.0.0",
-        "lodash": "^4.17.15",
-        "meow": "^3.7.0",
-        "mkdirp": "^0.5.1",
-        "nan": "^2.13.2",
-        "node-gyp": "^3.8.0",
-        "npmlog": "^4.0.0",
-        "request": "^2.88.0",
-        "sass-graph": "2.2.5",
-        "stdout-stream": "^1.4.0",
-        "true-case-path": "^1.0.2"
-      }
-    },
-    "nopt": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmmirror.com/nopt/-/nopt-3.0.6.tgz",
-      "integrity": "sha512-4GUt3kSEYmk4ITxzB/b9vaIDfUVWN/Ml1Fwl11IlnIG2iaJ9O6WXZ9SrYM9NLI8OCBieN2Y8SWC2oJV0RQ7qYg==",
-      "requires": {
-        "abbrev": "1"
-      }
-    },
     "normalize-package-data": {
       "version": "2.5.0",
       "resolved": "https://registry.npmmirror.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
       "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+      "dev": true,
       "requires": {
         "hosted-git-info": "^2.1.4",
         "resolve": "^1.10.0",
@@ -16671,8 +16298,7 @@
     "normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
     },
     "normalize-range": {
       "version": "0.1.2",
@@ -16708,17 +16334,6 @@
         }
       }
     },
-    "npmlog": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmmirror.com/npmlog/-/npmlog-4.1.2.tgz",
-      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
-      "requires": {
-        "are-we-there-yet": "~1.1.2",
-        "console-control-strings": "~1.1.0",
-        "gauge": "~2.7.3",
-        "set-blocking": "~2.0.0"
-      }
-    },
     "nth-check": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/nth-check/-/nth-check-1.0.2.tgz",
@@ -16734,11 +16349,6 @@
       "integrity": "sha512-Y1wZESM7VUThYY+4W+X4ySH2maqcA+p7UR+w8VWNWVAd6lwuXXWz/w/Cz43J/dI2I+PS6wD5N+bJUF+gjWvIqg==",
       "dev": true
     },
-    "number-is-nan": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/number-is-nan/-/number-is-nan-1.0.1.tgz",
-      "integrity": "sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ=="
-    },
     "nwsapi": {
       "version": "2.2.7",
       "resolved": "https://registry.npmmirror.com/nwsapi/-/nwsapi-2.2.7.tgz",
@@ -16748,12 +16358,14 @@
     "oauth-sign": {
       "version": "0.9.0",
       "resolved": "https://registry.npmmirror.com/oauth-sign/-/oauth-sign-0.9.0.tgz",
-      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ=="
+      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
+      "dev": true
     },
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true
     },
     "object-copy": {
       "version": "0.1.0",
@@ -17035,24 +16647,11 @@
       "integrity": "sha512-gjcpUc3clBf9+210TRaDWbf+rZZZEshZ+DlXMRCeAjp0xhTrnQsKHypIy1J3d5hKdUzj69t708EHtU8P6bUn0A==",
       "dev": true
     },
-    "os-homedir": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/os-homedir/-/os-homedir-1.0.2.tgz",
-      "integrity": "sha512-B5JU3cabzk8c67mRRd3ECmROafjYMXbuzlwtqdM8IbS8ktlTix8aFGb2bAGKrSRIlnfKwovGUUr72JUPyOb6kQ=="
-    },
     "os-tmpdir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-      "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g=="
-    },
-    "osenv": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmmirror.com/osenv/-/osenv-0.1.5.tgz",
-      "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
-      "requires": {
-        "os-homedir": "^1.0.0",
-        "os-tmpdir": "^1.0.0"
-      }
+      "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==",
+      "dev": true
     },
     "p-each-series": {
       "version": "2.2.0",
@@ -17070,6 +16669,7 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/p-limit/-/p-limit-2.3.0.tgz",
       "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
       "requires": {
         "p-try": "^2.0.0"
       }
@@ -17078,6 +16678,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/p-locate/-/p-locate-3.0.0.tgz",
       "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+      "dev": true,
       "requires": {
         "p-limit": "^2.0.0"
       }
@@ -17100,7 +16701,8 @@
     "p-try": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/p-try/-/p-try-2.2.0.tgz",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true
     },
     "pako": {
       "version": "0.2.9",
@@ -17149,14 +16751,6 @@
         "safe-buffer": "^5.1.1"
       }
     },
-    "parse-json": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmmirror.com/parse-json/-/parse-json-2.2.0.tgz",
-      "integrity": "sha512-QR/GGaKCkhwk1ePQNYDRKYZ3mwU9ypsKhB0XyFnLQdomyEqk3e8wpW3V5Jp88zbxK4n5ST1nqo+g9juTpownhQ==",
-      "requires": {
-        "error-ex": "^1.2.0"
-      }
-    },
     "parse5": {
       "version": "5.1.1",
       "resolved": "https://registry.npmmirror.com/parse5/-/parse5-5.1.1.tgz",
@@ -17208,6 +16802,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/path-exists/-/path-exists-2.1.0.tgz",
       "integrity": "sha512-yTltuKuhtNeFJKa1PiRzfLAU5182q1y4Eb4XCJ3PBqyzEDkAZRzBrKKBct682ls9reBVHf9udYLN5Nd+K1B9BQ==",
+      "dev": true,
       "requires": {
         "pinkie-promise": "^2.0.0"
       }
@@ -17258,16 +16853,6 @@
       "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==",
       "dev": true
     },
-    "path-type": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/path-type/-/path-type-1.1.0.tgz",
-      "integrity": "sha512-S4eENJz1pkiQn9Znv33Q+deTOKmbl+jj1Fl+qiP/vYezj+S8x+J3Uo0ISrx/QoEvIlOaDWJhPaRd1flJ9HXZqg==",
-      "requires": {
-        "graceful-fs": "^4.1.2",
-        "pify": "^2.0.0",
-        "pinkie-promise": "^2.0.0"
-      }
-    },
     "pathe": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/pathe/-/pathe-1.1.2.tgz",
@@ -17320,23 +16905,19 @@
     "picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true
-    },
-    "pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmmirror.com/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
     },
     "pinkie": {
       "version": "2.0.4",
       "resolved": "https://registry.npmmirror.com/pinkie/-/pinkie-2.0.4.tgz",
-      "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg=="
+      "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==",
+      "dev": true
     },
     "pinkie-promise": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
       "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==",
+      "dev": true,
       "requires": {
         "pinkie": "^2.0.0"
       }
@@ -18786,12 +18367,14 @@
     "pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",
-      "integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ=="
+      "integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==",
+      "dev": true
     },
     "psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmmirror.com/psl/-/psl-1.9.0.tgz",
-      "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag=="
+      "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
+      "dev": true
     },
     "public-encrypt": {
       "version": "4.0.3",
@@ -18924,7 +18507,8 @@
     "qs": {
       "version": "6.5.3",
       "resolved": "https://registry.npmmirror.com/qs/-/qs-6.5.3.tgz",
-      "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA=="
+      "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==",
+      "dev": true
     },
     "query-string": {
       "version": "4.3.4",
@@ -19037,25 +18621,6 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true
     },
-    "read-pkg": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/read-pkg/-/read-pkg-1.1.0.tgz",
-      "integrity": "sha512-7BGwRHqt4s/uVbuyoeejRn4YmFnYZiFl4AuaeXHlgZf3sONF0SOGlxs2Pw8g6hCKupo08RafIO5YXFNOKTfwsQ==",
-      "requires": {
-        "load-json-file": "^1.0.0",
-        "normalize-package-data": "^2.3.2",
-        "path-type": "^1.0.0"
-      }
-    },
-    "read-pkg-up": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
-      "integrity": "sha512-WD9MTlNtI55IwYUS27iHh9tK3YoIVhxis8yKhLpTqWtml739uXc9NWTpxoHkfZf3+DkCCsXox94/VWZniuZm6A==",
-      "requires": {
-        "find-up": "^1.0.0",
-        "read-pkg": "^1.0.0"
-      }
-    },
     "readable-stream": {
       "version": "2.3.8",
       "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-2.3.8.tgz",
@@ -19074,20 +18639,10 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
       "requires": {
         "picomatch": "^2.2.1"
       }
     },
-    "redent": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/redent/-/redent-1.0.0.tgz",
-      "integrity": "sha512-qtW5hKzGQZqKoh6JNSD+4lfitfPKGz42e6QwiRmPM5mmKtR0N41AbJRYu0xJi7nhOJ4WDgRkKvAk6tw4WIwR4g==",
-      "requires": {
-        "indent-string": "^2.1.0",
-        "strip-indent": "^1.0.1"
-      }
-    },
     "regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmmirror.com/regenerate/-/regenerate-1.4.2.tgz",
@@ -19300,18 +18855,11 @@
       "integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==",
       "dev": true
     },
-    "repeating": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmmirror.com/repeating/-/repeating-2.0.1.tgz",
-      "integrity": "sha512-ZqtSMuVybkISo2OWvqvm7iHSWngvdaW3IpsT9/uP8v4gMi591LY6h35wdOfvQdWCKFWZWm2Y1Opp4kV7vQKT6A==",
-      "requires": {
-        "is-finite": "^1.0.0"
-      }
-    },
     "request": {
       "version": "2.88.2",
       "resolved": "https://registry.npmmirror.com/request/-/request-2.88.2.tgz",
       "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
+      "dev": true,
       "requires": {
         "aws-sign2": "~0.7.0",
         "aws4": "^1.8.0",
@@ -19338,7 +18886,8 @@
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true
     },
     "require-from-string": {
       "version": "2.0.2",
@@ -19349,7 +18898,8 @@
     "require-main-filename": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/require-main-filename/-/require-main-filename-2.0.0.tgz",
-      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "dev": true
     },
     "require-package-name": {
       "version": "2.0.1",
@@ -19480,36 +19030,6 @@
         "inherits": "^2.0.1"
       }
     },
-    "robust-orientation": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmmirror.com/robust-orientation/-/robust-orientation-1.2.1.tgz",
-      "integrity": "sha512-FuTptgKwY6iNuU15nrIJDLjXzCChWB+T4AvksRtwPS/WZ3HuP1CElCm1t+OBfgQKfWbtZIawip+61k7+buRKAg==",
-      "requires": {
-        "robust-scale": "^1.0.2",
-        "robust-subtract": "^1.0.0",
-        "robust-sum": "^1.0.0",
-        "two-product": "^1.0.2"
-      }
-    },
-    "robust-scale": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/robust-scale/-/robust-scale-1.0.2.tgz",
-      "integrity": "sha512-jBR91a/vomMAzazwpsPTPeuTPPmWBacwA+WYGNKcRGSh6xweuQ2ZbjRZ4v792/bZOhRKXRiQH0F48AvuajY0tQ==",
-      "requires": {
-        "two-product": "^1.0.2",
-        "two-sum": "^1.0.0"
-      }
-    },
-    "robust-subtract": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/robust-subtract/-/robust-subtract-1.0.0.tgz",
-      "integrity": "sha512-xhKUno+Rl+trmxAIVwjQMiVdpF5llxytozXJOdoT4eTIqmqsndQqFb1A0oiW3sZGlhMRhOi6pAD4MF1YYW6o/A=="
-    },
-    "robust-sum": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/robust-sum/-/robust-sum-1.0.0.tgz",
-      "integrity": "sha512-AvLExwpaqUqD1uwLU6MwzzfRdaI6VEZsyvQ3IAQ0ZJ08v1H+DTyqskrf2ZJyh0BDduFVLN7H04Zmc+qTiahhAw=="
-    },
     "rsvp": {
       "version": "4.8.5",
       "resolved": "https://registry.npmmirror.com/rsvp/-/rsvp-4.8.5.tgz",
@@ -19650,15 +19170,14 @@
         }
       }
     },
-    "sass-graph": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmmirror.com/sass-graph/-/sass-graph-2.2.5.tgz",
-      "integrity": "sha512-VFWDAHOe6mRuT4mZRd4eKE+d8Uedrk6Xnh7Sh9b4NGufQLQjOrvf/MQoOdx+0s92L89FeyUUNfU597j/3uNpag==",
+    "sass": {
+      "version": "1.72.0",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.72.0.tgz",
+      "integrity": "sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==",
       "requires": {
-        "glob": "^7.0.0",
-        "lodash": "^4.0.0",
-        "scss-tokenizer": "^0.2.3",
-        "yargs": "^13.3.2"
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
       }
     },
     "sass-loader": {
@@ -19680,77 +19199,6 @@
         }
       }
     },
-    "sass-resources-loader": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmmirror.com/sass-resources-loader/-/sass-resources-loader-2.2.5.tgz",
-      "integrity": "sha512-po8rfETH9cOQACWxubT/1CCu77KjxwRtCDm6QAXZH99aUHBydwSoxdIjC40SGp/dcS/FkSNJl0j1VEojGZqlvQ==",
-      "requires": {
-        "async": "^3.2.3",
-        "chalk": "^4.1.0",
-        "glob": "^7.1.6",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
-        },
-        "json5": {
-          "version": "2.2.3",
-          "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.3.tgz",
-          "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="
-        },
-        "loader-utils": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
-          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "sax": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/sax/-/sax-1.3.0.tgz",
@@ -19789,25 +19237,6 @@
         "get-assigned-identifiers": "^1.1.0"
       }
     },
-    "scss-tokenizer": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmmirror.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
-      "integrity": "sha512-dYE8LhncfBUar6POCxMTm0Ln+erjeczqEvCJib5/7XNkdw1FkUGgwMPY360FY0FgPWQxHWCx29Jl3oejyGLM9Q==",
-      "requires": {
-        "js-base64": "^2.1.8",
-        "source-map": "^0.4.2"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.4.4",
-          "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.4.4.tgz",
-          "integrity": "sha512-Y8nIfcb1s/7DcobUz1yOO1GSp7gyL+D9zLHDehT7iRESqGSxjJ448Sg7rvfgsRJCnKLdSl11uGf0s9X80cH0/A==",
-          "requires": {
-            "amdefine": ">=0.0.4"
-          }
-        }
-      }
-    },
     "scule": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/scule/-/scule-1.3.0.tgz",
@@ -19832,7 +19261,8 @@
     "semver": {
       "version": "5.7.2",
       "resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.2.tgz",
-      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g=="
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true
     },
     "send": {
       "version": "0.18.0",
@@ -19978,7 +19408,8 @@
     "set-blocking": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "dev": true
     },
     "set-function-length": {
       "version": "1.2.0",
@@ -20090,12 +19521,8 @@
     "signal-exit": {
       "version": "3.0.7",
       "resolved": "https://registry.npmmirror.com/signal-exit/-/signal-exit-3.0.7.tgz",
-      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
-    },
-    "simple-statistics": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmmirror.com/simple-statistics/-/simple-statistics-7.8.3.tgz",
-      "integrity": "sha512-JFvMY00t6SBGtwMuJ+nqgsx9ylkMiJ5JlK9bkj8AdvniIe5615wWQYkKHXe84XtSuc40G/tlrPu0A5/NlJvv8A=="
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "dev": true
     },
     "simple-swizzle": {
       "version": "0.2.2",
@@ -20112,20 +19539,6 @@
         }
       }
     },
-    "simplicial-complex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/simplicial-complex/-/simplicial-complex-1.0.0.tgz",
-      "integrity": "sha512-mHauIKSOy3GquM5VnYEiu7eP5y4A8BiaN9ezUUgyYFz1k68PqDYcyaH3kenp2cyvWZE96QKE3nrxYw65Allqiw==",
-      "requires": {
-        "bit-twiddle": "^1.0.0",
-        "union-find": "^1.0.0"
-      }
-    },
-    "simplify-js": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmmirror.com/simplify-js/-/simplify-js-1.2.4.tgz",
-      "integrity": "sha512-vITfSlwt7h/oyrU42R83mtzFpwYk3+mkH9bOHqq/Qw6n8rtR7aE3NZQ5fbcyCUVVmuMJR6ynsAhOfK2qoah8Jg=="
-    },
     "sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -20408,6 +19821,7 @@
       "version": "3.2.0",
       "resolved": "https://registry.npmmirror.com/spdx-correct/-/spdx-correct-3.2.0.tgz",
       "integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==",
+      "dev": true,
       "requires": {
         "spdx-expression-parse": "^3.0.0",
         "spdx-license-ids": "^3.0.0"
@@ -20416,12 +19830,14 @@
     "spdx-exceptions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
-      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A=="
+      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
+      "dev": true
     },
     "spdx-expression-parse": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
       "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "dev": true,
       "requires": {
         "spdx-exceptions": "^2.1.0",
         "spdx-license-ids": "^3.0.0"
@@ -20430,7 +19846,8 @@
     "spdx-license-ids": {
       "version": "3.0.16",
       "resolved": "https://registry.npmmirror.com/spdx-license-ids/-/spdx-license-ids-3.0.16.tgz",
-      "integrity": "sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw=="
+      "integrity": "sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw==",
+      "dev": true
     },
     "spdy": {
       "version": "4.0.2",
@@ -20531,6 +19948,7 @@
       "version": "1.18.0",
       "resolved": "https://registry.npmmirror.com/sshpk/-/sshpk-1.18.0.tgz",
       "integrity": "sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==",
+      "dev": true,
       "requires": {
         "asn1": "~0.2.3",
         "assert-plus": "^1.0.0",
@@ -20660,14 +20078,6 @@
       "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
       "dev": true
     },
-    "stdout-stream": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmmirror.com/stdout-stream/-/stdout-stream-1.4.1.tgz",
-      "integrity": "sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==",
-      "requires": {
-        "readable-stream": "^2.0.1"
-      }
-    },
     "stop-iteration-iterator": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",
@@ -20749,14 +20159,44 @@
         }
       }
     },
-    "string-width": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-1.0.2.tgz",
-      "integrity": "sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw==",
+    "string-width-cjs": {
+      "version": "npm:string-width@4.2.3",
+      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
       "requires": {
-        "code-point-at": "^1.0.0",
-        "is-fullwidth-code-point": "^1.0.0",
-        "strip-ansi": "^3.0.0"
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+          "dev": true
+        },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        }
       }
     },
     "string.prototype.trim": {
@@ -20808,12 +20248,21 @@
         "ansi-regex": "^2.0.0"
       }
     },
-    "strip-bom": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/strip-bom/-/strip-bom-2.0.0.tgz",
-      "integrity": "sha512-kwrX1y7czp1E69n2ajbG65mIo9dqvJ+8aBQXOGVxqwvNbsXdFM6Lq37dLAY3mknUwru8CfcCbfOLL/gMo+fi3g==",
+    "strip-ansi-cjs": {
+      "version": "npm:strip-ansi@6.0.1",
+      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
       "requires": {
-        "is-utf8": "^0.2.0"
+        "ansi-regex": "^5.0.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+          "dev": true
+        }
       }
     },
     "strip-eof": {
@@ -20828,14 +20277,6 @@
       "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
       "dev": true
     },
-    "strip-indent": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/strip-indent/-/strip-indent-1.0.1.tgz",
-      "integrity": "sha512-I5iQq6aFMM62fBEAIB/hXzwJD6EEZ0xEGCX2t7oXqaKPIRgt4WruAQ285BISgdkP+HLGWyeGmNJcpIwFeRYRUA==",
-      "requires": {
-        "get-stdin": "^4.0.1"
-      }
-    },
     "strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmmirror.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -21097,16 +20538,6 @@
       "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
       "dev": true
     },
-    "tar": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmmirror.com/tar/-/tar-2.2.2.tgz",
-      "integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==",
-      "requires": {
-        "block-stream": "*",
-        "fstream": "^1.0.12",
-        "inherits": "2"
-      }
-    },
     "terminal-link": {
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/terminal-link/-/terminal-link-2.1.1.tgz",
@@ -21391,7 +20822,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "requires": {
         "is-number": "^7.0.0"
       }
@@ -21412,6 +20842,7 @@
       "version": "2.5.0",
       "resolved": "https://registry.npmmirror.com/tough-cookie/-/tough-cookie-2.5.0.tgz",
       "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+      "dev": true,
       "requires": {
         "psl": "^1.1.28",
         "punycode": "^2.1.1"
@@ -21426,19 +20857,6 @@
         "punycode": "^2.1.1"
       }
     },
-    "trim-newlines": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/trim-newlines/-/trim-newlines-1.0.0.tgz",
-      "integrity": "sha512-Nm4cF79FhSTzrLKGDMi3I4utBtFv8qKy4sq1enftf2gMdpqI8oVQTAfySkTz5r49giVzDj88SVZXP4CeYQwjaw=="
-    },
-    "true-case-path": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmmirror.com/true-case-path/-/true-case-path-1.0.3.tgz",
-      "integrity": "sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew==",
-      "requires": {
-        "glob": "^7.1.2"
-      }
-    },
     "tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/tryer/-/tryer-1.0.1.tgz",
@@ -21591,504 +21009,16 @@
       "version": "0.6.0",
       "resolved": "https://registry.npmmirror.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
       "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "dev": true,
       "requires": {
         "safe-buffer": "^5.0.1"
       }
     },
-    "turf": {
-      "version": "3.0.14",
-      "resolved": "https://registry.npmmirror.com/turf/-/turf-3.0.14.tgz",
-      "integrity": "sha512-YKaS5wvijcTkGr1p6YQXh2xHWojhC6PMPo8pUFqphgJhq4DCtRBDc0UfbfbS/SD3ozzRFcGDrO3jrQqNBi3VAw==",
-      "requires": {
-        "turf-along": "^3.0.12",
-        "turf-area": "^3.0.12",
-        "turf-bbox": "^3.0.12",
-        "turf-bbox-polygon": "^3.0.12",
-        "turf-bearing": "^3.0.12",
-        "turf-bezier": "^3.0.12",
-        "turf-buffer": "^3.0.12",
-        "turf-center": "^3.0.12",
-        "turf-centroid": "^3.0.12",
-        "turf-circle": "^3.0.12",
-        "turf-collect": "^3.0.12",
-        "turf-combine": "^3.0.12",
-        "turf-concave": "^3.0.12",
-        "turf-convex": "^3.0.12",
-        "turf-destination": "^3.0.12",
-        "turf-difference": "^3.0.12",
-        "turf-distance": "^3.0.12",
-        "turf-envelope": "^3.0.12",
-        "turf-explode": "^3.0.12",
-        "turf-flip": "^3.0.12",
-        "turf-helpers": "^3.0.12",
-        "turf-hex-grid": "^3.0.12",
-        "turf-inside": "^3.0.12",
-        "turf-intersect": "^3.0.12",
-        "turf-isolines": "^3.0.12",
-        "turf-kinks": "^3.0.12",
-        "turf-line-distance": "^3.0.12",
-        "turf-line-slice": "^3.0.12",
-        "turf-meta": "^3.0.12",
-        "turf-midpoint": "^3.0.12",
-        "turf-nearest": "^3.0.12",
-        "turf-planepoint": "^3.0.12",
-        "turf-point-grid": "^3.0.12",
-        "turf-point-on-line": "^3.0.12",
-        "turf-point-on-surface": "^3.0.12",
-        "turf-random": "^3.0.12",
-        "turf-sample": "^3.0.12",
-        "turf-simplify": "^3.0.12",
-        "turf-square": "^3.0.12",
-        "turf-square-grid": "^3.0.12",
-        "turf-tag": "^3.0.12",
-        "turf-tesselate": "^3.0.12",
-        "turf-tin": "^3.0.12",
-        "turf-triangle-grid": "^3.0.12",
-        "turf-union": "^3.0.12",
-        "turf-within": "^3.0.12"
-      }
-    },
-    "turf-along": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-along/-/turf-along-3.0.12.tgz",
-      "integrity": "sha512-9wHa3LiqsdEExCuPgw8O5fJzqeL4lf8srBBfjGid2Tjh2nwuqgkcFZxzbnLE0Y8oFh60iNJUdccGuJSTJ3YGyg==",
-      "requires": {
-        "turf-bearing": "^3.0.12",
-        "turf-destination": "^3.0.12",
-        "turf-distance": "^3.0.12",
-        "turf-helpers": "^3.0.12"
-      }
-    },
-    "turf-area": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-area/-/turf-area-3.0.12.tgz",
-      "integrity": "sha512-62Rc1UD8b1yv+AkfhjQ6LSvzxnuJi+jj6q4EkginZxPMJh8HACyQkeNy6VI9WucUULXzoPs8IqeqNwltpMpZVw==",
-      "requires": {
-        "geojson-area": "^0.2.1"
-      }
-    },
-    "turf-bbox": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-bbox/-/turf-bbox-3.0.12.tgz",
-      "integrity": "sha512-ztNkTvRQ3ezArAQB2ZLLtJur9BiuWkwVv5u+aviC+3y0/mU5ITuoArOTUs4kLU+gNOjdpPwD0Ea/gqBR0lh2hw==",
-      "requires": {
-        "turf-meta": "^3.0.12"
-      }
-    },
-    "turf-bbox-polygon": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-bbox-polygon/-/turf-bbox-polygon-3.0.12.tgz",
-      "integrity": "sha512-9wuTI5eFBBe0bXNK8c5wk/zHbSne28KmUQVX66QhTRvUc34v+NUIzn4bzi3rZXpJvLSLyPVltPnYfn+YsuCkAQ==",
-      "requires": {
-        "turf-helpers": "^3.0.12"
-      }
-    },
-    "turf-bearing": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-bearing/-/turf-bearing-3.0.12.tgz",
-      "integrity": "sha512-oWAFtgpQwR78xWZn53BzdwHhd4uT5OtuvwEgzFkZWSa6kp+UpdJ39lDAcvdR0H8dCszuGB4KguaGCZLG+iyUvg==",
-      "requires": {
-        "turf-invariant": "^3.0.12"
-      }
-    },
-    "turf-bezier": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-bezier/-/turf-bezier-3.0.12.tgz",
-      "integrity": "sha512-8B4frrRtir9VJ6DTgGG5e81f7faPBnxTR2uJzWGd3bQkUaOBBX7rLQTBTBv1iFZVTU07QnWYgznm3c06FrtX2w==",
-      "requires": {
-        "turf-helpers": "^3.0.12"
-      }
-    },
-    "turf-buffer": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-buffer/-/turf-buffer-3.0.12.tgz",
-      "integrity": "sha512-2wy66sAd0EXX13ql2KeA1bFOtecqDCWmaayLueEaM7HOxY6i/VvroDIHZrFzuwPAa/4ZwMZPaTPiFQ6kh7VSGw==",
-      "requires": {
-        "geojson-normalize": "0.0.0",
-        "jsts": "1.1.2",
-        "turf-combine": "^3.0.12",
-        "turf-helpers": "^3.0.12"
-      }
-    },
-    "turf-center": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-center/-/turf-center-3.0.12.tgz",
-      "integrity": "sha512-H2okrDla22kawwXsPvazV09mHr26/51sKONL52HTBeqiD2sK0WWRQkpdLfJdia0FT47wVk9mBiLXsKeIzDUi7Q==",
-      "requires": {
-        "turf-bbox": "^3.0.12",
-        "turf-helpers": "^3.0.12"
-      }
-    },
-    "turf-centroid": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-centroid/-/turf-centroid-3.0.12.tgz",
-      "integrity": "sha512-OuH8ZZjnxiNETZ8vZkb+dC6C+fit+LdRBolLGDQzBKDLXV2z1nQX2+w/qTNKV9XP5ZZLeEpJPmP0z1MDSz+YRA==",
-      "requires": {
-        "turf-helpers": "^3.0.12",
-        "turf-meta": "^3.0.12"
-      }
-    },
-    "turf-circle": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-circle/-/turf-circle-3.0.12.tgz",
-      "integrity": "sha512-dOGg9yQXA21SpgI1qjU+Kgq0esvBU+ZTqoM5A2fWmoa0458YUoB85hnbxFtnmsFB3qXDsrW9RBuC4kyNCcn9KQ==",
-      "requires": {
-        "turf-destination": "^3.0.12",
-        "turf-helpers": "^3.0.12"
-      }
-    },
-    "turf-collect": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-collect/-/turf-collect-3.0.12.tgz",
-      "integrity": "sha512-V36Hz03VmMXn0BUAZNY+w1bpCX6Ks2JzfvHdiWHh5MccziroaKOfOeC1odJcXSDrhoR14/0oSC4tHDKJslbcPA==",
-      "requires": {
-        "turf-inside": "^3.0.12"
-      }
-    },
-    "turf-combine": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-combine/-/turf-combine-3.0.12.tgz",
-      "integrity": "sha512-j99I2ydmO4AzQQqzh+DBbxRr+a//DNbXJFcvBSy88G7vlKByPzr0ONVDNcvS/a1JRTl11C2vfrWxRtHwwmzzDg==",
-      "requires": {
-        "turf-meta": "^3.0.12"
-      }
-    },
-    "turf-concave": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-concave/-/turf-concave-3.0.12.tgz",
-      "integrity": "sha512-0KQfAk1f7TRUtuNbIDsRcbi4ONMhtrQg0Y/uY/QM5wVIKMj5T5ZuSApqEfs4cDXcfWu//hwe2bgHJzu1GlUn4w==",
-      "requires": {
-        "turf-distance": "^3.0.12",
-        "turf-meta": "^3.0.12",
-        "turf-tin": "^3.0.12",
-        "turf-union": "^3.0.12"
-      }
-    },
-    "turf-convex": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-convex/-/turf-convex-3.0.12.tgz",
-      "integrity": "sha512-xfwhxDQKygFsdbEK8503/N+B4JZZB6i58lE39DTMcf97xCCLyv7zxGlalsKU4j+qywV3nbO6yhKHScv4t6t5bg==",
-      "requires": {
-        "convex-hull": "^1.0.3",
-        "turf-helpers": "^3.0.12",
-        "turf-meta": "^3.0.12"
-      }
-    },
-    "turf-destination": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-destination/-/turf-destination-3.0.12.tgz",
-      "integrity": "sha512-nXKJfH5qv+eoNbw5ggLZNsUokgmaHnGD8Woauc8+7C36JRPSEm1Y3wcjAdJX0VadJJdL8AjNP65QOiWOLdVe1Q==",
-      "requires": {
-        "turf-helpers": "^3.0.12",
-        "turf-invariant": "^3.0.12"
-      }
-    },
-    "turf-difference": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-difference/-/turf-difference-3.0.12.tgz",
-      "integrity": "sha512-YRMUspic52qdwZZxuVp0LB2QG39q4Ps5ZTfZq+QIGsqdKK7FxvbJTxsb/a+n4xHe/K4zCcWo/AXUw1pOFLrNbA==",
-      "requires": {
-        "jsts": "1.1.2",
-        "turf-helpers": "^3.0.12"
-      }
-    },
-    "turf-distance": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-distance/-/turf-distance-3.0.12.tgz",
-      "integrity": "sha512-dy2TguSbcCKJK7ZPwCZuG9+mK2DBKZ4g0wlmbKa7iGPFG18X1nPWJRzUkmNF3kdUe9K6+7SViTnbH6xQYCNpiw==",
-      "requires": {
-        "turf-helpers": "^3.0.12",
-        "turf-invariant": "^3.0.12"
-      }
-    },
-    "turf-envelope": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-envelope/-/turf-envelope-3.0.12.tgz",
-      "integrity": "sha512-2ahLojIP000MUhk7JC/ILASwiP074sFD5nc1HTYyHRhqkb8ukwFMHrR3haEmQdf7sJE3nexBELY9PMGyTQmBiQ==",
-      "requires": {
-        "turf-bbox": "^3.0.12",
-        "turf-bbox-polygon": "^3.0.12"
-      }
-    },
-    "turf-explode": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-explode/-/turf-explode-3.0.12.tgz",
-      "integrity": "sha512-cBUdQl2RBbu5YdL+mBNOcou8OlHLF6F9s6Rwz4EuOOGG0Urs0NE2CmascINB1+TgbxJozb29ZKNXezgwhwnrpg==",
-      "requires": {
-        "turf-helpers": "^3.0.12",
-        "turf-meta": "^3.0.12"
-      }
-    },
-    "turf-flip": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-flip/-/turf-flip-3.0.12.tgz",
-      "integrity": "sha512-SV/DI8I/dczRlqBMcAZyyQq1rlkrFZigFUKhtDIBqEJJvqKy70kDxbHrAkJdeAZ20caflkaTV2K40x4UTUpNgg==",
-      "requires": {
-        "turf-meta": "^3.0.12"
-      }
-    },
-    "turf-grid": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/turf-grid/-/turf-grid-1.0.1.tgz",
-      "integrity": "sha512-T2jHZ2HOgvkZZQjMmtl9lexeY6Xk1POF6wbYE7aYLjBO43MQqYNEFDf3JQ1gJymrYEaNy7yDSDYDyiYSsK6sQw==",
-      "requires": {
-        "turf-point": "^2.0.0"
-      }
-    },
-    "turf-helpers": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-helpers/-/turf-helpers-3.0.12.tgz",
-      "integrity": "sha512-e0Oic1RVdTq3PAd5XlPgdtE3eZlN4kSd+Sr4iwayeeBRCMns60j9t6helyHxvbjLLy1uP28IiNfnm30BF+YThw=="
-    },
-    "turf-hex-grid": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-hex-grid/-/turf-hex-grid-3.0.12.tgz",
-      "integrity": "sha512-3O580ujUHbAEi8vk38uyxvIQN3yjyeQEJtJppB2sYO7zcNORIcao68DlXQW29nSy1pUAYCbNkghDcumNL3A58A==",
-      "requires": {
-        "turf-distance": "^3.0.12",
-        "turf-helpers": "^3.0.12"
-      }
-    },
-    "turf-inside": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-inside/-/turf-inside-3.0.12.tgz",
-      "integrity": "sha512-QjRDeSgDwf1hIEATsYgbYMB1GnnfwEqjapskOIojICeUBfKA+NMExjaBtMc2V1SY5jNqja6tVPH+ek0d+WO7Vg==",
-      "requires": {
-        "turf-invariant": "^3.0.12"
-      }
-    },
-    "turf-intersect": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-intersect/-/turf-intersect-3.0.12.tgz",
-      "integrity": "sha512-eXDksaYFakN6BFcfiyqgH1PDizfkfhPUU2Axd+I5zjVEHgECplK+z8LYA/RqvQ59aWQ2MfNRqxwW12T07c4gMw==",
-      "requires": {
-        "jsts": "1.1.2"
-      }
-    },
-    "turf-invariant": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-invariant/-/turf-invariant-3.0.12.tgz",
-      "integrity": "sha512-6BAyAupdij6X8gTlpGHCG/zpqXXaTi7kjMAbQrepTpnPhIEQJtlGsiZCQu4EckCZS5Rzj5/b8Xw4gaxNpadihw=="
-    },
-    "turf-isolines": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-isolines/-/turf-isolines-3.0.12.tgz",
-      "integrity": "sha512-b4TY6fKYWvToxiYjYTiURUlljls8jG1oKFaBulu5pz0q6rxmpxkCGOA8t9AXQkNXzHBrDE+vjXashMtYEN9Tsw==",
-      "requires": {
-        "turf-bbox": "^3.0.12",
-        "turf-grid": "1.0.1",
-        "turf-helpers": "^3.0.12",
-        "turf-inside": "^3.0.12",
-        "turf-planepoint": "^3.0.12",
-        "turf-square": "^3.0.12",
-        "turf-tin": "^3.0.12"
-      }
-    },
-    "turf-kinks": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-kinks/-/turf-kinks-3.0.12.tgz",
-      "integrity": "sha512-gzLqDKPqq9rSWIPy6NDZMspDqk1wvP1sg+jaSqdKnW3mPTDn32IbHLxihjGzZoaW0YlIZmnrZlVBLqId6kCZ5w==",
-      "requires": {
-        "turf-helpers": "^3.0.12"
-      }
-    },
-    "turf-line-distance": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-line-distance/-/turf-line-distance-3.0.12.tgz",
-      "integrity": "sha512-HzrxOEKdUgl1vdqIBLmaA99B0cg3+41kamQ650wn26BFUdMrrtkt+x2FT3Y7DifYTNljQ2fblbylqtMAAS0jag==",
-      "requires": {
-        "turf-distance": "^3.0.12",
-        "turf-helpers": "^3.0.12"
-      }
-    },
-    "turf-line-slice": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-line-slice/-/turf-line-slice-3.0.12.tgz",
-      "integrity": "sha512-1ecV3DCTRkv2azoaN/ZFcKxLBrw3l4SRSP/dVAk1Gwn83vBYJ9XtjmUiMLE2WbzTzuzuDxLb6fMvyGyteXBUeg==",
-      "requires": {
-        "turf-bearing": "^3.0.12",
-        "turf-destination": "^3.0.12",
-        "turf-distance": "^3.0.12",
-        "turf-helpers": "^3.0.12",
-        "turf-point-on-line": "^3.0.12"
-      }
-    },
-    "turf-meta": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-meta/-/turf-meta-3.0.12.tgz",
-      "integrity": "sha512-B3YSKMpWGx1WYE8IM62pzOA0kqjrGjd/ZkSyrD5WXnrrpPfAUl0yBoZCJYL5IQcOwLqfd5xZt3HJnNH9cFiG7A=="
-    },
-    "turf-midpoint": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-midpoint/-/turf-midpoint-3.0.12.tgz",
-      "integrity": "sha512-Q1fZWQzc4SSF09hY+tJvgnDGBmVqTgBkIzOg0I0hy+ti0b9bSJ5P3+KY6wkVcC+zgDa8jzp8GZETijAV4WUAqw==",
-      "requires": {
-        "turf-bearing": "^3.0.12",
-        "turf-destination": "^3.0.12",
-        "turf-distance": "^3.0.12",
-        "turf-invariant": "^3.0.12"
-      }
-    },
-    "turf-nearest": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-nearest/-/turf-nearest-3.0.12.tgz",
-      "integrity": "sha512-4jyHgtpxVSM2LXh+lz4z47lketEXMKlcIpCJplHFpT1ZddIUoKvT6RJDhTUN8a+mohE8HAPgvcUA53vmjxxNEg==",
-      "requires": {
-        "turf-distance": "^3.0.12"
-      }
-    },
-    "turf-planepoint": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-planepoint/-/turf-planepoint-3.0.12.tgz",
-      "integrity": "sha512-2okyqSAjC00QWEyr1vi04Vgug6OaYfBRtvtzHs16IxBN5xhAuwtCnUICb/1ugbOgCiBFV6TzIle/vA0EUVuRxQ=="
-    },
-    "turf-point": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmmirror.com/turf-point/-/turf-point-2.0.1.tgz",
-      "integrity": "sha512-DkzYiE8Gc7G6XNW3FsBEwKAMz7jVZ/cw+PqLLkiSR1bde0vRZumF26UDQrspyQNih/oShQ0i4mSfa/dw3tqzsA==",
-      "requires": {
-        "minimist": "^1.1.0"
-      }
-    },
-    "turf-point-grid": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-point-grid/-/turf-point-grid-3.0.12.tgz",
-      "integrity": "sha512-5keUPz8j0VWilANaX3bP1evAm/u1u8v10HfUjtoenvWAC5dTGMUVCskgFqX9XitwmsPtaFiCuakM8s3HQzydSQ==",
-      "requires": {
-        "turf-distance": "^3.0.12",
-        "turf-helpers": "^3.0.12"
-      }
-    },
-    "turf-point-on-line": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-point-on-line/-/turf-point-on-line-3.0.12.tgz",
-      "integrity": "sha512-0+gqSE3pK//ylzQZoc+tLpLUa1/14vvqbMvteFu2bl9NP6oudzZqTWoY9dBfyD9rLQtFOCf/IdkIk+IIwTn1cg==",
-      "requires": {
-        "turf-bearing": "^3.0.12",
-        "turf-destination": "^3.0.12",
-        "turf-distance": "^3.0.12",
-        "turf-helpers": "^3.0.12"
-      }
-    },
-    "turf-point-on-surface": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-point-on-surface/-/turf-point-on-surface-3.0.12.tgz",
-      "integrity": "sha512-8/CXalHx672E2gR5FIZlazrx2Gj8HJW9JHb7UF/SH2CGDt/DUQKynz3/rn2fj4PyGtXGG7JoS/XuBwEdH99gAw==",
-      "requires": {
-        "turf-center": "^3.0.12",
-        "turf-distance": "^3.0.12",
-        "turf-explode": "^3.0.12",
-        "turf-helpers": "^3.0.12",
-        "turf-inside": "^3.0.12"
-      }
-    },
-    "turf-random": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-random/-/turf-random-3.0.12.tgz",
-      "integrity": "sha512-y0bRhHUfTQJBdEigLpS0+y8ReagylBlAgSKhCanMkw2WtQBj4y5MNOT+dgwX6iOCiWrzCsgPvDm/2hRxdYzmTQ==",
-      "requires": {
-        "geojson-random": "^0.2.2"
-      }
-    },
-    "turf-sample": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-sample/-/turf-sample-3.0.12.tgz",
-      "integrity": "sha512-aDwiE4kjSHt60hYdIhCFQp7xTauIPUVufbfJSVR2+Xrq6KdK8IPIkUAjDKNIo7iSetEsK9uHNHCFTTvW1emGMQ==",
-      "requires": {
-        "turf-helpers": "^3.0.12"
-      }
-    },
-    "turf-simplify": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-simplify/-/turf-simplify-3.0.12.tgz",
-      "integrity": "sha512-g+kLtFhZaQD+OZwcl2KZ8RVWGQdsCJBT3/ZQiP6K8RYdD3d3QbruKIQdLgEZhK0lL0/EUCgzQz3/mhpxTA3RMw==",
-      "requires": {
-        "simplify-js": "^1.2.1"
-      }
-    },
-    "turf-square": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-square/-/turf-square-3.0.12.tgz",
-      "integrity": "sha512-jBxMU+9ZO8WAEwFBC2AsBpwV/vmqdBFn73ONEYDb8n+LiOAMbwsDM+75pxg6kt5l3ugQJGbgfxVucVl3SUTJaQ==",
-      "requires": {
-        "turf-distance": "^3.0.12",
-        "turf-helpers": "^3.0.12"
-      }
-    },
-    "turf-square-grid": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-square-grid/-/turf-square-grid-3.0.12.tgz",
-      "integrity": "sha512-L8Bd3/YNYMqIYqWJDmGMJ7itSO7VMrbU1Vubt1f+GOHGnNcf789YXe1poNa6VdONw7spuRlgbQA94VMI5vzZUQ==",
-      "requires": {
-        "turf-distance": "^3.0.12",
-        "turf-helpers": "^3.0.12"
-      }
-    },
-    "turf-tag": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-tag/-/turf-tag-3.0.12.tgz",
-      "integrity": "sha512-tNC7FkAMdFjePrqZqjrxE5IXGdkrZcBjWbRmCSwy0DMKhLgPuXfWNACXt4FFC5dgQ3jc3NbDvfsML6gs1es1zA==",
-      "requires": {
-        "turf-inside": "^3.0.12"
-      }
-    },
-    "turf-tesselate": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-tesselate/-/turf-tesselate-3.0.12.tgz",
-      "integrity": "sha512-LWalgrdZGqXoqxkqlD/uV7xpIbuhNJviLw1ANdiST6F6laz8qoi8C2hfHIyzcQB7T/0LeWsuWzHtJ1MotYhpuA==",
-      "requires": {
-        "earcut": "^2.0.0",
-        "turf-helpers": "^3.0.12"
-      }
-    },
-    "turf-tin": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-tin/-/turf-tin-3.0.12.tgz",
-      "integrity": "sha512-uqadTFrAE3pdVzAQN5CMGzZZtZMrirjRYL2iJRaHAXy9lDaVT+TlDe9gt+8SIwiPI1hVHq9NHHrEn6Cyn+xXxg==",
-      "requires": {
-        "turf-helpers": "^3.0.12"
-      }
-    },
-    "turf-triangle-grid": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-triangle-grid/-/turf-triangle-grid-3.0.12.tgz",
-      "integrity": "sha512-hL17vUzp85YoQeqRs4zIKEZloLGt8DWie39j2EK1S8I030L2A60aznZzagnxgo2JnReS25tDSRA4JdrorrECOw==",
-      "requires": {
-        "turf-distance": "^3.0.12",
-        "turf-helpers": "^3.0.12"
-      }
-    },
-    "turf-union": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-union/-/turf-union-3.0.12.tgz",
-      "integrity": "sha512-9R3/SccBa6Qpqn1CYUU1n7gv1E1f+pNiLZmf1tEqPq0QQQE8jY3B03YrsIBK1bP6RI8N6wx/2hfX7h9LgFQvmw==",
-      "requires": {
-        "jsts": "1.1.2"
-      }
-    },
-    "turf-within": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmmirror.com/turf-within/-/turf-within-3.0.12.tgz",
-      "integrity": "sha512-RgVeZ8LBZjcUSX8OvVW/nk2hJ1Vp+RPD+axOWaRf+zMbIiiBBAxmE8FxJSm6EINUuOR8zkvWIt+pyeltRYtG8A==",
-      "requires": {
-        "turf-helpers": "^3.0.12",
-        "turf-inside": "^3.0.12"
-      }
-    },
     "tweetnacl": {
       "version": "0.14.5",
       "resolved": "https://registry.npmmirror.com/tweetnacl/-/tweetnacl-0.14.5.tgz",
-      "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA=="
-    },
-    "two-product": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/two-product/-/two-product-1.0.2.tgz",
-      "integrity": "sha512-vOyrqmeYvzjToVM08iU52OFocWT6eB/I5LUWYnxeAPGXAhAxXYU/Yr/R2uY5/5n4bvJQL9AQulIuxpIsMoT8XQ=="
-    },
-    "two-sum": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/two-sum/-/two-sum-1.0.0.tgz",
-      "integrity": "sha512-phP48e8AawgsNUjEY2WvoIWqdie8PoiDZGxTDv70LDr01uX5wLEQbOgSP7Z/B6+SW5oLtbe8qaYX2fKJs3CGTw=="
+      "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
+      "dev": true
     },
     "type": {
       "version": "1.2.0",
@@ -22465,11 +21395,6 @@
         }
       }
     },
-    "union-find": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/union-find/-/union-find-1.0.2.tgz",
-      "integrity": "sha512-wFA9bMD/40k7ZcpKVXfu6X1qD3ri5ryO8HUsuA1RnxPCQl66Mu6DgkxyR+XNnd+osD0aLENixcJVFj+uf+O4gw=="
-    },
     "union-value": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/union-value/-/union-value-1.0.1.tgz",
@@ -22939,7 +21864,8 @@
     "uuid": {
       "version": "3.4.0",
       "resolved": "https://registry.npmmirror.com/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
+      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+      "dev": true
     },
     "v8-compile-cache": {
       "version": "2.4.0",
@@ -22970,6 +21896,7 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmmirror.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
       "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "dev": true,
       "requires": {
         "spdx-correct": "^3.0.0",
         "spdx-expression-parse": "^3.0.0"
@@ -22991,6 +21918,7 @@
       "version": "1.10.0",
       "resolved": "https://registry.npmmirror.com/verror/-/verror-1.10.0.tgz",
       "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
+      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0",
         "core-util-is": "1.0.2",
@@ -23000,7 +21928,8 @@
         "core-util-is": {
           "version": "1.0.2",
           "resolved": "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.2.tgz",
-          "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ=="
+          "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
+          "dev": true
         }
       }
     },
@@ -23186,94 +22115,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.8.3",
-      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
-      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "json5": {
-          "version": "2.2.3",
-          "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.3.tgz",
-          "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
-          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-router": {
       "version": "4.2.5",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.2.5.tgz",
@@ -24014,11 +22855,6 @@
       "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
       "dev": true
     },
-    "wgs84": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmmirror.com/wgs84/-/wgs84-0.0.0.tgz",
-      "integrity": "sha512-ANHlY4Rb5kHw40D0NJ6moaVfOCMrp9Gpd1R/AIQYg2ko4/jzcJ+TVXYYF6kXJqQwITvEZP4yEthjM7U6rYlljQ=="
-    },
     "whatwg-encoding": {
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
@@ -24092,7 +22928,8 @@
     "which-module": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/which-module/-/which-module-2.0.1.tgz",
-      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ=="
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "dev": true
     },
     "which-typed-array": {
       "version": "1.1.13",
@@ -24107,14 +22944,6 @@
         "has-tostringtag": "^1.0.0"
       }
     },
-    "wide-align": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmmirror.com/wide-align/-/wide-align-1.1.5.tgz",
-      "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
-      "requires": {
-        "string-width": "^1.0.2 || 2 || 3 || 4"
-      }
-    },
     "word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmmirror.com/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -24133,6 +22962,7 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
       "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+      "dev": true,
       "requires": {
         "ansi-styles": "^3.2.0",
         "string-width": "^3.0.0",
@@ -24142,12 +22972,14 @@
         "ansi-regex": {
           "version": "4.1.1",
           "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-4.1.1.tgz",
-          "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g=="
+          "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
+          "dev": true
         },
         "ansi-styles": {
           "version": "3.2.1",
           "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-3.2.1.tgz",
           "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
           "requires": {
             "color-convert": "^1.9.0"
           }
@@ -24155,12 +22987,14 @@
         "is-fullwidth-code-point": {
           "version": "2.0.0",
           "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w=="
+          "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==",
+          "dev": true
         },
         "string-width": {
           "version": "3.1.0",
           "resolved": "https://registry.npmmirror.com/string-width/-/string-width-3.1.0.tgz",
           "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
           "requires": {
             "emoji-regex": "^7.0.1",
             "is-fullwidth-code-point": "^2.0.0",
@@ -24171,12 +23005,88 @@
           "version": "5.2.0",
           "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-5.2.0.tgz",
           "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
           "requires": {
             "ansi-regex": "^4.1.0"
           }
         }
       }
     },
+    "wrap-ansi-cjs": {
+      "version": "npm:wrap-ansi@7.0.0",
+      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
+          "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.1"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        }
+      }
+    },
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz",
@@ -24231,12 +23141,14 @@
     "y18n": {
       "version": "4.0.3",
       "resolved": "https://registry.npmmirror.com/y18n/-/y18n-4.0.3.tgz",
-      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "dev": true
     },
     "yallist": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/yallist/-/yallist-2.1.2.tgz",
-      "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A=="
+      "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
+      "dev": true
     },
     "yaml": {
       "version": "1.10.2",
@@ -24248,6 +23160,7 @@
       "version": "13.3.2",
       "resolved": "https://registry.npmmirror.com/yargs/-/yargs-13.3.2.tgz",
       "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
+      "dev": true,
       "requires": {
         "cliui": "^5.0.0",
         "find-up": "^3.0.0",
@@ -24264,12 +23177,14 @@
         "ansi-regex": {
           "version": "4.1.1",
           "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-4.1.1.tgz",
-          "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g=="
+          "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
+          "dev": true
         },
         "find-up": {
           "version": "3.0.0",
           "resolved": "https://registry.npmmirror.com/find-up/-/find-up-3.0.0.tgz",
           "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
           "requires": {
             "locate-path": "^3.0.0"
           }
@@ -24277,12 +23192,14 @@
         "is-fullwidth-code-point": {
           "version": "2.0.0",
           "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w=="
+          "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==",
+          "dev": true
         },
         "string-width": {
           "version": "3.1.0",
           "resolved": "https://registry.npmmirror.com/string-width/-/string-width-3.1.0.tgz",
           "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
           "requires": {
             "emoji-regex": "^7.0.1",
             "is-fullwidth-code-point": "^2.0.0",
@@ -24293,6 +23210,7 @@
           "version": "5.2.0",
           "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-5.2.0.tgz",
           "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
           "requires": {
             "ansi-regex": "^4.1.0"
           }
@@ -24303,6 +23221,7 @@
       "version": "13.1.2",
       "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-13.1.2.tgz",
       "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
+      "dev": true,
       "requires": {
         "camelcase": "^5.0.0",
         "decamelize": "^1.2.0"
@@ -24311,7 +23230,8 @@
         "camelcase": {
           "version": "5.3.1",
           "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-5.3.1.tgz",
-          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+          "dev": true
         }
       }
     },
diff --git a/package.json b/package.json
index db8650fa..4dbe3cac 100644
--- a/package.json
+++ b/package.json
@@ -28,11 +28,10 @@
     "maplibre-gl": "3.6.2",
     "mockjs": "^1.1.0",
     "moment-timezone": "^0.5.33",
-    "node-sass": "~4.14.0",
     "postcss-plugin-px2rem": "~0.8.1",
     "postcss-px2rem-exclude": "0.0.6",
+    "sass": "^1.72.0",
     "sass-loader": "~8.0.2",
-    "sass-resources-loader": "~2.2.5",
     "tiny-emitter": "^2.1.0",
     "vue": "~3.3.0",
     "vue-grid-layout": "^3.0.0-beta1",
diff --git a/public/assets/echarts.min.js b/public/assets/echarts.min.js
index 01f975c3..7b5112fd 100644
--- a/public/assets/echarts.min.js
+++ b/public/assets/echarts.min.js
@@ -32,7 +32,7 @@
     LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
     OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
     PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */var e=function(t,n){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])})(t,n)};function n(t,n){function i(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(i.prototype=n.prototype,new i)}var i=function(){return(i=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t}).apply(this,arguments)};function r(){for(var t=0,e=0,n=arguments.length;e<n;e++)t+=arguments[e].length;var i=Array(t),r=0;for(e=0;e<n;e++)for(var o=arguments[e],a=0,s=o.length;a<s;a++,r++)i[r]=o[a];return i}var o=function(){this.firefox=!1,this.ie=!1,this.edge=!1,this.newEdge=!1,this.weChat=!1},a=new function(){this.browser=new o,this.node=!1,this.wxa=!1,this.worker=!1,this.canvasSupported=!1,this.svgSupported=!1,this.touchEventsSupported=!1,this.pointerEventsSupported=!1,this.domSupported=!1,this.transformSupported=!1,this.transform3dSupported=!1};"object"==typeof wx&&"function"==typeof wx.getSystemInfoSync?(a.wxa=!0,a.canvasSupported=!0,a.touchEventsSupported=!0):"undefined"==typeof document&&"undefined"!=typeof self?(a.worker=!0,a.canvasSupported=!0):"undefined"==typeof navigator?(a.node=!0,a.canvasSupported=!0,a.svgSupported=!0):function(t,e){var n=e.browser,i=t.match(/Firefox\/([\d.]+)/),r=t.match(/MSIE\s([\d.]+)/)||t.match(/Trident\/.+?rv:(([\d.]+))/),o=t.match(/Edge?\/([\d.]+)/),a=/micromessenger/i.test(t);i&&(n.firefox=!0,n.version=i[1]);r&&(n.ie=!0,n.version=r[1]);o&&(n.edge=!0,n.version=o[1],n.newEdge=+o[1].split(".")[0]>18);a&&(n.weChat=!0);e.canvasSupported=!!document.createElement("canvas").getContext,e.svgSupported="undefined"!=typeof SVGRect,e.touchEventsSupported="ontouchstart"in window&&!n.ie&&!n.edge,e.pointerEventsSupported="onpointerdown"in window&&(n.edge||n.ie&&+n.version>=11),e.domSupported="undefined"!=typeof document;var s=document.documentElement.style;e.transform3dSupported=(n.ie&&"transition"in s||n.edge||"WebKitCSSMatrix"in window&&"m11"in new WebKitCSSMatrix||"MozPerspective"in s)&&!("OTransition"in s),e.transformSupported=e.transform3dSupported||n.ie&&+n.version>=9}(navigator.userAgent,a);var s={"[object Function]":!0,"[object RegExp]":!0,"[object Date]":!0,"[object Error]":!0,"[object CanvasGradient]":!0,"[object CanvasPattern]":!0,"[object Image]":!0,"[object Canvas]":!0},l={"[object Int8Array]":!0,"[object Uint8Array]":!0,"[object Uint8ClampedArray]":!0,"[object Int16Array]":!0,"[object Uint16Array]":!0,"[object Int32Array]":!0,"[object Uint32Array]":!0,"[object Float32Array]":!0,"[object Float64Array]":!0},u=Object.prototype.toString,h=Array.prototype,c=h.forEach,p=h.filter,d=h.slice,f=h.map,g=function(){}.constructor,y=g?g.prototype:null,v={};function m(t,e){v[t]=e}var _=2311;function x(){return _++}function b(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];"undefined"!=typeof console&&console.error.apply(console,t)}function w(t){if(null==t||"object"!=typeof t)return t;var e=t,n=u.call(t);if("[object Array]"===n){if(!lt(t)){e=[];for(var i=0,r=t.length;i<r;i++)e[i]=w(t[i])}}else if(l[n]){if(!lt(t)){var o=t.constructor;if(o.from)e=o.from(t);else{e=new o(t.length);for(i=0,r=t.length;i<r;i++)e[i]=w(t[i])}}}else if(!s[n]&&!lt(t)&&!j(t))for(var a in e={},t)t.hasOwnProperty(a)&&(e[a]=w(t[a]));return e}function S(t,e,n){if(!Y(e)||!Y(t))return n?w(e):t;for(var i in e)if(e.hasOwnProperty(i)){var r=t[i],o=e[i];!Y(o)||!Y(r)||F(o)||F(r)||j(o)||j(r)||X(o)||X(r)||lt(o)||lt(r)?!n&&i in t||(t[i]=w(e[i])):S(r,o,n)}return t}function M(t,e){for(var n=t[0],i=1,r=t.length;i<r;i++)n=S(n,t[i],e);return n}function I(t,e){if(Object.assign)Object.assign(t,e);else for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n]);return t}function T(t,e,n){for(var i=z(e),r=0;r<i.length;r++){var o=i[r];(n?null!=e[o]:null==t[o])&&(t[o]=e[o])}return t}var C=function(){return v.createCanvas()};function A(t,e){if(t){if(t.indexOf)return t.indexOf(e);for(var n=0,i=t.length;n<i;n++)if(t[n]===e)return n}return-1}function D(t,e){var n=t.prototype;function i(){}for(var r in i.prototype=e.prototype,t.prototype=new i,n)n.hasOwnProperty(r)&&(t.prototype[r]=n[r]);t.prototype.constructor=t,t.superClass=e}function L(t,e,n){if(t="prototype"in t?t.prototype:t,e="prototype"in e?e.prototype:e,Object.getOwnPropertyNames)for(var i=Object.getOwnPropertyNames(e),r=0;r<i.length;r++){var o=i[r];"constructor"!==o&&(n?null!=e[o]:null==t[o])&&(t[o]=e[o])}else T(t,e,n)}function k(t){return!!t&&("string"!=typeof t&&"number"==typeof t.length)}function P(t,e,n){if(t&&e)if(t.forEach&&t.forEach===c)t.forEach(e,n);else if(t.length===+t.length)for(var i=0,r=t.length;i<r;i++)e.call(n,t[i],i,t);else for(var o in t)t.hasOwnProperty(o)&&e.call(n,t[o],o,t)}function O(t,e,n){if(!t)return[];if(!e)return nt(t);if(t.map&&t.map===f)return t.map(e,n);for(var i=[],r=0,o=t.length;r<o;r++)i.push(e.call(n,t[r],r,t));return i}function R(t,e,n,i){if(t&&e){for(var r=0,o=t.length;r<o;r++)n=e.call(i,n,t[r],r,t);return n}}function N(t,e,n){if(!t)return[];if(!e)return nt(t);if(t.filter&&t.filter===p)return t.filter(e,n);for(var i=[],r=0,o=t.length;r<o;r++)e.call(n,t[r],r,t)&&i.push(t[r]);return i}function E(t,e,n){if(t&&e)for(var i=0,r=t.length;i<r;i++)if(e.call(n,t[i],i,t))return t[i]}function z(t){if(!t)return[];if(Object.keys)return Object.keys(t);var e=[];for(var n in t)t.hasOwnProperty(n)&&e.push(n);return e}v.createCanvas=function(){return document.createElement("canvas")};var B=y&&G(y.bind)?y.call.bind(y.bind):function(t,e){for(var n=[],i=2;i<arguments.length;i++)n[i-2]=arguments[i];return function(){return t.apply(e,n.concat(d.call(arguments)))}};function V(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];return function(){return t.apply(this,e.concat(d.call(arguments)))}}function F(t){return Array.isArray?Array.isArray(t):"[object Array]"===u.call(t)}function G(t){return"function"==typeof t}function H(t){return"string"==typeof t}function W(t){return"[object String]"===u.call(t)}function U(t){return"number"==typeof t}function Y(t){var e=typeof t;return"function"===e||!!t&&"object"===e}function X(t){return!!s[u.call(t)]}function Z(t){return!!l[u.call(t)]}function j(t){return"object"==typeof t&&"number"==typeof t.nodeType&&"object"==typeof t.ownerDocument}function q(t){return null!=t.colorStops}function K(t){return null!=t.image}function $(t){return"[object RegExp]"===u.call(t)}function J(t){return t!=t}function Q(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];for(var n=0,i=t.length;n<i;n++)if(null!=t[n])return t[n]}function tt(t,e){return null!=t?t:e}function et(t,e,n){return null!=t?t:null!=e?e:n}function nt(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];return d.apply(t,e)}function it(t){if("number"==typeof t)return[t,t,t,t];var e=t.length;return 2===e?[t[0],t[1],t[0],t[1]]:3===e?[t[0],t[1],t[2],t[1]]:t}function rt(t,e){if(!t)throw new Error(e)}function ot(t){return null==t?null:"function"==typeof t.trim?t.trim():t.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,"")}var at="__ec_primitive__";function st(t){t[at]=!0}function lt(t){return t[at]}var ut=function(){function t(e){this.data={};var n=F(e);this.data={};var i=this;function r(t,e){n?i.set(t,e):i.set(e,t)}e instanceof t?e.each(r):e&&P(e,r)}return t.prototype.get=function(t){return this.data.hasOwnProperty(t)?this.data[t]:null},t.prototype.set=function(t,e){return this.data[t]=e},t.prototype.each=function(t,e){for(var n in this.data)this.data.hasOwnProperty(n)&&t.call(e,this.data[n],n)},t.prototype.keys=function(){return z(this.data)},t.prototype.removeKey=function(t){delete this.data[t]},t}();function ht(t){return new ut(t)}function ct(t,e){for(var n=new t.constructor(t.length+e.length),i=0;i<t.length;i++)n[i]=t[i];var r=t.length;for(i=0;i<e.length;i++)n[i+r]=e[i];return n}function pt(t,e){var n;if(Object.create)n=Object.create(t);else{var i=function(){};i.prototype=t,n=new i}return e&&I(n,e),n}function dt(t,e){return t.hasOwnProperty(e)}function ft(){}var gt=Object.freeze({__proto__:null,$override:m,guid:x,logError:b,clone:w,merge:S,mergeAll:M,extend:I,defaults:T,createCanvas:C,indexOf:A,inherits:D,mixin:L,isArrayLike:k,each:P,map:O,reduce:R,filter:N,find:E,keys:z,bind:B,curry:V,isArray:F,isFunction:G,isString:H,isStringSafe:W,isNumber:U,isObject:Y,isBuiltInObject:X,isTypedArray:Z,isDom:j,isGradientObject:q,isPatternObject:K,isRegExp:$,eqNaN:J,retrieve:Q,retrieve2:tt,retrieve3:et,slice:nt,normalizeCssArray:it,assert:rt,trim:ot,setAsPrimitive:st,isPrimitive:lt,HashMap:ut,createHashMap:ht,concatArray:ct,createObject:pt,hasOwn:dt,noop:ft});function yt(t,e){return null==t&&(t=0),null==e&&(e=0),[t,e]}function vt(t,e){return t[0]=e[0],t[1]=e[1],t}function mt(t){return[t[0],t[1]]}function _t(t,e,n){return t[0]=e,t[1]=n,t}function xt(t,e,n){return t[0]=e[0]+n[0],t[1]=e[1]+n[1],t}function bt(t,e,n,i){return t[0]=e[0]+n[0]*i,t[1]=e[1]+n[1]*i,t}function wt(t,e,n){return t[0]=e[0]-n[0],t[1]=e[1]-n[1],t}function St(t){return Math.sqrt(It(t))}var Mt=St;function It(t){return t[0]*t[0]+t[1]*t[1]}var Tt=It;function Ct(t,e,n){return t[0]=e[0]*n,t[1]=e[1]*n,t}function At(t,e){var n=St(e);return 0===n?(t[0]=0,t[1]=0):(t[0]=e[0]/n,t[1]=e[1]/n),t}function Dt(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}var Lt=Dt;function kt(t,e){return(t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1])}var Pt=kt;function Ot(t,e,n,i){return t[0]=e[0]+i*(n[0]-e[0]),t[1]=e[1]+i*(n[1]-e[1]),t}function Rt(t,e,n){var i=e[0],r=e[1];return t[0]=n[0]*i+n[2]*r+n[4],t[1]=n[1]*i+n[3]*r+n[5],t}function Nt(t,e,n){return t[0]=Math.min(e[0],n[0]),t[1]=Math.min(e[1],n[1]),t}function Et(t,e,n){return t[0]=Math.max(e[0],n[0]),t[1]=Math.max(e[1],n[1]),t}var zt=Object.freeze({__proto__:null,create:yt,copy:vt,clone:mt,set:_t,add:xt,scaleAndAdd:bt,sub:wt,len:St,length:Mt,lenSquare:It,lengthSquare:Tt,mul:function(t,e,n){return t[0]=e[0]*n[0],t[1]=e[1]*n[1],t},div:function(t,e,n){return t[0]=e[0]/n[0],t[1]=e[1]/n[1],t},dot:function(t,e){return t[0]*e[0]+t[1]*e[1]},scale:Ct,normalize:At,distance:Dt,dist:Lt,distanceSquare:kt,distSquare:Pt,negate:function(t,e){return t[0]=-e[0],t[1]=-e[1],t},lerp:Ot,applyTransform:Rt,min:Nt,max:Et}),Bt=function(t,e){this.target=t,this.topTarget=e&&e.topTarget},Vt=function(){function t(t){this.handler=t,t.on("mousedown",this._dragStart,this),t.on("mousemove",this._drag,this),t.on("mouseup",this._dragEnd,this)}return t.prototype._dragStart=function(t){for(var e=t.target;e&&!e.draggable;)e=e.parent;e&&(this._draggingTarget=e,e.dragging=!0,this._x=t.offsetX,this._y=t.offsetY,this.handler.dispatchToElement(new Bt(e,t),"dragstart",t.event))},t.prototype._drag=function(t){var e=this._draggingTarget;if(e){var n=t.offsetX,i=t.offsetY,r=n-this._x,o=i-this._y;this._x=n,this._y=i,e.drift(r,o,t),this.handler.dispatchToElement(new Bt(e,t),"drag",t.event);var a=this.handler.findHover(n,i,e).target,s=this._dropTarget;this._dropTarget=a,e!==a&&(s&&a!==s&&this.handler.dispatchToElement(new Bt(s,t),"dragleave",t.event),a&&a!==s&&this.handler.dispatchToElement(new Bt(a,t),"dragenter",t.event))}},t.prototype._dragEnd=function(t){var e=this._draggingTarget;e&&(e.dragging=!1),this.handler.dispatchToElement(new Bt(e,t),"dragend",t.event),this._dropTarget&&this.handler.dispatchToElement(new Bt(this._dropTarget,t),"drop",t.event),this._draggingTarget=null,this._dropTarget=null},t}(),Ft=function(){function t(t){t&&(this._$eventProcessor=t)}return t.prototype.on=function(t,e,n,i){this._$handlers||(this._$handlers={});var r=this._$handlers;if("function"==typeof e&&(i=n,n=e,e=null),!n||!t)return this;var o=this._$eventProcessor;null!=e&&o&&o.normalizeQuery&&(e=o.normalizeQuery(e)),r[t]||(r[t]=[]);for(var a=0;a<r[t].length;a++)if(r[t][a].h===n)return this;var s={h:n,query:e,ctx:i||this,callAtLast:n.zrEventfulCallAtLast},l=r[t].length-1,u=r[t][l];return u&&u.callAtLast?r[t].splice(l,0,s):r[t].push(s),this},t.prototype.isSilent=function(t){var e=this._$handlers;return!e||!e[t]||!e[t].length},t.prototype.off=function(t,e){var n=this._$handlers;if(!n)return this;if(!t)return this._$handlers={},this;if(e){if(n[t]){for(var i=[],r=0,o=n[t].length;r<o;r++)n[t][r].h!==e&&i.push(n[t][r]);n[t]=i}n[t]&&0===n[t].length&&delete n[t]}else delete n[t];return this},t.prototype.trigger=function(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];if(!this._$handlers)return this;var i=this._$handlers[t],r=this._$eventProcessor;if(i)for(var o=e.length,a=i.length,s=0;s<a;s++){var l=i[s];if(!r||!r.filter||null==l.query||r.filter(t,l.query))switch(o){case 0:l.h.call(l.ctx);break;case 1:l.h.call(l.ctx,e[0]);break;case 2:l.h.call(l.ctx,e[0],e[1]);break;default:l.h.apply(l.ctx,e)}}return r&&r.afterTrigger&&r.afterTrigger(t),this},t.prototype.triggerWithContext=function(t){if(!this._$handlers)return this;var e=this._$handlers[t],n=this._$eventProcessor;if(e)for(var i=arguments,r=i.length,o=i[r-1],a=e.length,s=0;s<a;s++){var l=e[s];if(!n||!n.filter||null==l.query||n.filter(t,l.query))switch(r){case 0:l.h.call(o);break;case 1:l.h.call(o,i[0]);break;case 2:l.h.call(o,i[0],i[1]);break;default:l.h.apply(o,i.slice(1,r-1))}}return n&&n.afterTrigger&&n.afterTrigger(t),this},t}(),Gt=Math.log(2);function Ht(t,e,n,i,r,o){var a=i+"-"+r,s=t.length;if(o.hasOwnProperty(a))return o[a];if(1===e){var l=Math.round(Math.log((1<<s)-1&~r)/Gt);return t[n][l]}for(var u=i|1<<n,h=n+1;i&1<<h;)h++;for(var c=0,p=0,d=0;p<s;p++){var f=1<<p;f&r||(c+=(d%2?-1:1)*t[n][p]*Ht(t,e-1,h,u,r|f,o),d++)}return o[a]=c,c}function Wt(t,e){var n=[[t[0],t[1],1,0,0,0,-e[0]*t[0],-e[0]*t[1]],[0,0,0,t[0],t[1],1,-e[1]*t[0],-e[1]*t[1]],[t[2],t[3],1,0,0,0,-e[2]*t[2],-e[2]*t[3]],[0,0,0,t[2],t[3],1,-e[3]*t[2],-e[3]*t[3]],[t[4],t[5],1,0,0,0,-e[4]*t[4],-e[4]*t[5]],[0,0,0,t[4],t[5],1,-e[5]*t[4],-e[5]*t[5]],[t[6],t[7],1,0,0,0,-e[6]*t[6],-e[6]*t[7]],[0,0,0,t[6],t[7],1,-e[7]*t[6],-e[7]*t[7]]],i={},r=Ht(n,8,0,0,0,i);if(0!==r){for(var o=[],a=0;a<8;a++)for(var s=0;s<8;s++)null==o[s]&&(o[s]=0),o[s]+=((a+s)%2?-1:1)*Ht(n,7,0===a?1:0,1<<a,1<<s,i)/r*e[a];return function(t,e,n){var i=e*o[6]+n*o[7]+1;t[0]=(e*o[0]+n*o[1]+o[2])/i,t[1]=(e*o[3]+n*o[4]+o[5])/i}}}var Ut=[];function Yt(t,e,n,i,r){if(e.getBoundingClientRect&&a.domSupported&&!Xt(e)){var o=e.___zrEVENTSAVED||(e.___zrEVENTSAVED={}),s=function(t,e,n){for(var i=n?"invTrans":"trans",r=e[i],o=e.srcCoords,a=[],s=[],l=!0,u=0;u<4;u++){var h=t[u].getBoundingClientRect(),c=2*u,p=h.left,d=h.top;a.push(p,d),l=l&&o&&p===o[c]&&d===o[c+1],s.push(t[u].offsetLeft,t[u].offsetTop)}return l&&r?r:(e.srcCoords=a,e[i]=n?Wt(s,a):Wt(a,s))}(function(t,e){var n=e.markers;if(n)return n;n=e.markers=[];for(var i=["left","right"],r=["top","bottom"],o=0;o<4;o++){var a=document.createElement("div"),s=o%2,l=(o>>1)%2;a.style.cssText=["position: absolute","visibility: hidden","padding: 0","margin: 0","border-width: 0","user-select: none","width:0","height:0",i[s]+":0",r[l]+":0",i[1-s]+":auto",r[1-l]+":auto",""].join("!important;"),t.appendChild(a),n.push(a)}return n}(e,o),o,r);if(s)return s(t,n,i),!0}return!1}function Xt(t){return"CANVAS"===t.nodeName.toUpperCase()}var Zt="undefined"!=typeof window&&!!window.addEventListener,jt=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,qt=[];function Kt(t,e,n,i){return n=n||{},i||!a.canvasSupported?$t(t,e,n):a.browser.firefox&&null!=e.layerX&&e.layerX!==e.offsetX?(n.zrX=e.layerX,n.zrY=e.layerY):null!=e.offsetX?(n.zrX=e.offsetX,n.zrY=e.offsetY):$t(t,e,n),n}function $t(t,e,n){if(a.domSupported&&t.getBoundingClientRect){var i=e.clientX,r=e.clientY;if(Xt(t)){var o=t.getBoundingClientRect();return n.zrX=i-o.left,void(n.zrY=r-o.top)}if(Yt(qt,t,i,r))return n.zrX=qt[0],void(n.zrY=qt[1])}n.zrX=n.zrY=0}function Jt(t){return t||window.event}function Qt(t,e,n){if(null!=(e=Jt(e)).zrX)return e;var i=e.type;if(i&&i.indexOf("touch")>=0){var r="touchend"!==i?e.targetTouches[0]:e.changedTouches[0];r&&Kt(t,r,e,n)}else{Kt(t,e,e,n);var o=function(t){var e=t.wheelDelta;if(e)return e;var n=t.deltaX,i=t.deltaY;if(null==n||null==i)return e;return 3*(0!==i?Math.abs(i):Math.abs(n))*(i>0?-1:i<0?1:n>0?-1:1)}(e);e.zrDelta=o?o/120:-(e.detail||0)/3}var a=e.button;return null==e.which&&void 0!==a&&jt.test(e.type)&&(e.which=1&a?1:2&a?3:4&a?2:0),e}function te(t,e,n,i){Zt?t.addEventListener(e,n,i):t.attachEvent("on"+e,n)}var ee=Zt?function(t){t.preventDefault(),t.stopPropagation(),t.cancelBubble=!0}:function(t){t.returnValue=!1,t.cancelBubble=!0};function ne(t){return 2===t.which||3===t.which}var ie=function(){function t(){this._track=[]}return t.prototype.recognize=function(t,e,n){return this._doTrack(t,e,n),this._recognize(t)},t.prototype.clear=function(){return this._track.length=0,this},t.prototype._doTrack=function(t,e,n){var i=t.touches;if(i){for(var r={points:[],touches:[],target:e,event:t},o=0,a=i.length;o<a;o++){var s=i[o],l=Kt(n,s,{});r.points.push([l.zrX,l.zrY]),r.touches.push(s)}this._track.push(r)}},t.prototype._recognize=function(t){for(var e in oe)if(oe.hasOwnProperty(e)){var n=oe[e](this._track,t);if(n)return n}},t}();function re(t){var e=t[1][0]-t[0][0],n=t[1][1]-t[0][1];return Math.sqrt(e*e+n*n)}var oe={pinch:function(t,e){var n=t.length;if(n){var i,r=(t[n-1]||{}).points,o=(t[n-2]||{}).points||r;if(o&&o.length>1&&r&&r.length>1){var a=re(r)/re(o);!isFinite(a)&&(a=1),e.pinchScale=a;var s=[((i=r)[0][0]+i[1][0])/2,(i[0][1]+i[1][1])/2];return e.pinchX=s[0],e.pinchY=s[1],{type:"pinch",target:t[0].target,event:e}}}}},ae="silent";function se(){ee(this.event)}var le=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.handler=null,e}return n(e,t),e.prototype.dispose=function(){},e.prototype.setCursor=function(){},e}(Ft),ue=function(t,e){this.x=t,this.y=e},he=["click","dblclick","mousewheel","mouseout","mouseup","mousedown","mousemove","contextmenu"],ce=function(t){function e(e,n,i,r){var o=t.call(this)||this;return o._hovered=new ue(0,0),o.storage=e,o.painter=n,o.painterRoot=r,i=i||new le,o.proxy=null,o.setHandlerProxy(i),o._draggingMgr=new Vt(o),o}return n(e,t),e.prototype.setHandlerProxy=function(t){this.proxy&&this.proxy.dispose(),t&&(P(he,(function(e){t.on&&t.on(e,this[e],this)}),this),t.handler=this),this.proxy=t},e.prototype.mousemove=function(t){var e=t.zrX,n=t.zrY,i=de(this,e,n),r=this._hovered,o=r.target;o&&!o.__zr&&(o=(r=this.findHover(r.x,r.y)).target);var a=this._hovered=i?new ue(e,n):this.findHover(e,n),s=a.target,l=this.proxy;l.setCursor&&l.setCursor(s?s.cursor:"default"),o&&s!==o&&this.dispatchToElement(r,"mouseout",t),this.dispatchToElement(a,"mousemove",t),s&&s!==o&&this.dispatchToElement(a,"mouseover",t)},e.prototype.mouseout=function(t){var e=t.zrEventControl;"only_globalout"!==e&&this.dispatchToElement(this._hovered,"mouseout",t),"no_globalout"!==e&&this.trigger("globalout",{type:"globalout",event:t})},e.prototype.resize=function(){this._hovered=new ue(0,0)},e.prototype.dispatch=function(t,e){var n=this[t];n&&n.call(this,e)},e.prototype.dispose=function(){this.proxy.dispose(),this.storage=null,this.proxy=null,this.painter=null},e.prototype.setCursorStyle=function(t){var e=this.proxy;e.setCursor&&e.setCursor(t)},e.prototype.dispatchToElement=function(t,e,n){var i=(t=t||{}).target;if(!i||!i.silent){for(var r="on"+e,o=function(t,e,n){return{type:t,event:n,target:e.target,topTarget:e.topTarget,cancelBubble:!1,offsetX:n.zrX,offsetY:n.zrY,gestureEvent:n.gestureEvent,pinchX:n.pinchX,pinchY:n.pinchY,pinchScale:n.pinchScale,wheelDelta:n.zrDelta,zrByTouch:n.zrByTouch,which:n.which,stop:se}}(e,t,n);i&&(i[r]&&(o.cancelBubble=!!i[r].call(i,o)),i.trigger(e,o),i=i.__hostTarget?i.__hostTarget:i.parent,!o.cancelBubble););o.cancelBubble||(this.trigger(e,o),this.painter&&this.painter.eachOtherLayer&&this.painter.eachOtherLayer((function(t){"function"==typeof t[r]&&t[r].call(t,o),t.trigger&&t.trigger(e,o)})))}},e.prototype.findHover=function(t,e,n){for(var i=this.storage.getDisplayList(),r=new ue(t,e),o=i.length-1;o>=0;o--){var a=void 0;if(i[o]!==n&&!i[o].ignore&&(a=pe(i[o],t,e))&&(!r.topTarget&&(r.topTarget=i[o]),a!==ae)){r.target=i[o];break}}return r},e.prototype.processGesture=function(t,e){this._gestureMgr||(this._gestureMgr=new ie);var n=this._gestureMgr;"start"===e&&n.clear();var i=n.recognize(t,this.findHover(t.zrX,t.zrY,null).target,this.proxy.dom);if("end"===e&&n.clear(),i){var r=i.type;t.gestureEvent=r;var o=new ue;o.target=i.target,this.dispatchToElement(o,r,i.event)}},e}(Ft);function pe(t,e,n){if(t[t.rectHover?"rectContain":"contain"](e,n)){for(var i=t,r=void 0,o=!1;i;){if(i.ignoreClip&&(o=!0),!o){var a=i.getClipPath();if(a&&!a.contain(e,n))return!1;i.silent&&(r=!0)}var s=i.__hostTarget;i=s||i.parent}return!r||ae}return!1}function de(t,e,n){var i=t.painter;return e<0||e>i.getWidth()||n<0||n>i.getHeight()}function fe(){return[1,0,0,1,0,0]}function ge(t){return t[0]=1,t[1]=0,t[2]=0,t[3]=1,t[4]=0,t[5]=0,t}function ye(t,e){return t[0]=e[0],t[1]=e[1],t[2]=e[2],t[3]=e[3],t[4]=e[4],t[5]=e[5],t}function ve(t,e,n){var i=e[0]*n[0]+e[2]*n[1],r=e[1]*n[0]+e[3]*n[1],o=e[0]*n[2]+e[2]*n[3],a=e[1]*n[2]+e[3]*n[3],s=e[0]*n[4]+e[2]*n[5]+e[4],l=e[1]*n[4]+e[3]*n[5]+e[5];return t[0]=i,t[1]=r,t[2]=o,t[3]=a,t[4]=s,t[5]=l,t}function me(t,e,n){return t[0]=e[0],t[1]=e[1],t[2]=e[2],t[3]=e[3],t[4]=e[4]+n[0],t[5]=e[5]+n[1],t}function _e(t,e,n){var i=e[0],r=e[2],o=e[4],a=e[1],s=e[3],l=e[5],u=Math.sin(n),h=Math.cos(n);return t[0]=i*h+a*u,t[1]=-i*u+a*h,t[2]=r*h+s*u,t[3]=-r*u+h*s,t[4]=h*o+u*l,t[5]=h*l-u*o,t}function xe(t,e,n){var i=n[0],r=n[1];return t[0]=e[0]*i,t[1]=e[1]*r,t[2]=e[2]*i,t[3]=e[3]*r,t[4]=e[4]*i,t[5]=e[5]*r,t}function be(t,e){var n=e[0],i=e[2],r=e[4],o=e[1],a=e[3],s=e[5],l=n*a-o*i;return l?(l=1/l,t[0]=a*l,t[1]=-o*l,t[2]=-i*l,t[3]=n*l,t[4]=(i*s-a*r)*l,t[5]=(o*r-n*s)*l,t):null}function we(t){var e=[1,0,0,1,0,0];return ye(e,t),e}P(["click","mousedown","mouseup","mousewheel","dblclick","contextmenu"],(function(t){ce.prototype[t]=function(e){var n,i,r=e.zrX,o=e.zrY,a=de(this,r,o);if("mouseup"===t&&a||(i=(n=this.findHover(r,o)).target),"mousedown"===t)this._downEl=i,this._downPoint=[e.zrX,e.zrY],this._upEl=i;else if("mouseup"===t)this._upEl=i;else if("click"===t){if(this._downEl!==this._upEl||!this._downPoint||Lt(this._downPoint,[e.zrX,e.zrY])>4)return;this._downPoint=null}this.dispatchToElement(n,t,e)}}));var Se=Object.freeze({__proto__:null,create:fe,identity:ge,copy:ye,mul:ve,translate:me,rotate:_e,scale:xe,invert:be,clone:we}),Me=ge,Ie=5e-5;function Te(t){return t>Ie||t<-5e-5}var Ce=[],Ae=[],De=[1,0,0,1,0,0],Le=Math.abs,ke=function(){function t(){}return t.prototype.setPosition=function(t){this.x=t[0],this.y=t[1]},t.prototype.setScale=function(t){this.scaleX=t[0],this.scaleY=t[1]},t.prototype.setOrigin=function(t){this.originX=t[0],this.originY=t[1]},t.prototype.needLocalTransform=function(){return Te(this.rotation)||Te(this.x)||Te(this.y)||Te(this.scaleX-1)||Te(this.scaleY-1)},t.prototype.updateTransform=function(){var t=this.parent,e=t&&t.transform,n=this.needLocalTransform(),i=this.transform;n||e?(i=i||[1,0,0,1,0,0],n?this.getLocalTransform(i):Me(i),e&&(n?ve(i,t.transform,i):ye(i,t.transform)),this.transform=i,this._resolveGlobalScaleRatio(i)):i&&Me(i)},t.prototype._resolveGlobalScaleRatio=function(t){var e=this.globalScaleRatio;if(null!=e&&1!==e){this.getGlobalScale(Ce);var n=Ce[0]<0?-1:1,i=Ce[1]<0?-1:1,r=((Ce[0]-n)*e+n)/Ce[0]||0,o=((Ce[1]-i)*e+i)/Ce[1]||0;t[0]*=r,t[1]*=r,t[2]*=o,t[3]*=o}this.invTransform=this.invTransform||[1,0,0,1,0,0],be(this.invTransform,t)},t.prototype.getLocalTransform=function(e){return t.getLocalTransform(this,e)},t.prototype.getComputedTransform=function(){for(var t=this,e=[];t;)e.push(t),t=t.parent;for(;t=e.pop();)t.updateTransform();return this.transform},t.prototype.setLocalTransform=function(t){if(t){var e=t[0]*t[0]+t[1]*t[1],n=t[2]*t[2]+t[3]*t[3];Te(e-1)&&(e=Math.sqrt(e)),Te(n-1)&&(n=Math.sqrt(n)),t[0]<0&&(e=-e),t[3]<0&&(n=-n),this.rotation=Math.atan2(-t[1]/n,t[0]/e),e<0&&n<0&&(this.rotation+=Math.PI,e=-e,n=-n),this.x=t[4],this.y=t[5],this.scaleX=e,this.scaleY=n}},t.prototype.decomposeTransform=function(){if(this.transform){var t=this.parent,e=this.transform;t&&t.transform&&(ve(Ae,t.invTransform,e),e=Ae);var n=this.originX,i=this.originY;(n||i)&&(De[4]=n,De[5]=i,ve(Ae,e,De),Ae[4]-=n,Ae[5]-=i,e=Ae),this.setLocalTransform(e)}},t.prototype.getGlobalScale=function(t){var e=this.transform;return t=t||[],e?(t[0]=Math.sqrt(e[0]*e[0]+e[1]*e[1]),t[1]=Math.sqrt(e[2]*e[2]+e[3]*e[3]),e[0]<0&&(t[0]=-t[0]),e[3]<0&&(t[1]=-t[1]),t):(t[0]=1,t[1]=1,t)},t.prototype.transformCoordToLocal=function(t,e){var n=[t,e],i=this.invTransform;return i&&Rt(n,n,i),n},t.prototype.transformCoordToGlobal=function(t,e){var n=[t,e],i=this.transform;return i&&Rt(n,n,i),n},t.prototype.getLineScale=function(){var t=this.transform;return t&&Le(t[0]-1)>1e-10&&Le(t[3]-1)>1e-10?Math.sqrt(Le(t[0]*t[3]-t[2]*t[1])):1},t.getLocalTransform=function(t,e){Me(e=e||[]);var n=t.originX||0,i=t.originY||0,r=t.scaleX,o=t.scaleY,a=t.rotation||0,s=t.x,l=t.y;return e[4]-=n,e[5]-=i,e[0]*=r,e[1]*=o,e[2]*=r,e[3]*=o,e[4]*=r,e[5]*=o,a&&_e(e,e,a),e[4]+=n,e[5]+=i,e[4]+=s,e[5]+=l,e},t.initDefaultProps=function(){var e=t.prototype;e.x=0,e.y=0,e.scaleX=1,e.scaleY=1,e.originX=0,e.originY=0,e.rotation=0,e.globalScaleRatio=1}(),t}(),Pe={linear:function(t){return t},quadraticIn:function(t){return t*t},quadraticOut:function(t){return t*(2-t)},quadraticInOut:function(t){return(t*=2)<1?.5*t*t:-.5*(--t*(t-2)-1)},cubicIn:function(t){return t*t*t},cubicOut:function(t){return--t*t*t+1},cubicInOut:function(t){return(t*=2)<1?.5*t*t*t:.5*((t-=2)*t*t+2)},quarticIn:function(t){return t*t*t*t},quarticOut:function(t){return 1- --t*t*t*t},quarticInOut:function(t){return(t*=2)<1?.5*t*t*t*t:-.5*((t-=2)*t*t*t-2)},quinticIn:function(t){return t*t*t*t*t},quinticOut:function(t){return--t*t*t*t*t+1},quinticInOut:function(t){return(t*=2)<1?.5*t*t*t*t*t:.5*((t-=2)*t*t*t*t+2)},sinusoidalIn:function(t){return 1-Math.cos(t*Math.PI/2)},sinusoidalOut:function(t){return Math.sin(t*Math.PI/2)},sinusoidalInOut:function(t){return.5*(1-Math.cos(Math.PI*t))},exponentialIn:function(t){return 0===t?0:Math.pow(1024,t-1)},exponentialOut:function(t){return 1===t?1:1-Math.pow(2,-10*t)},exponentialInOut:function(t){return 0===t?0:1===t?1:(t*=2)<1?.5*Math.pow(1024,t-1):.5*(2-Math.pow(2,-10*(t-1)))},circularIn:function(t){return 1-Math.sqrt(1-t*t)},circularOut:function(t){return Math.sqrt(1- --t*t)},circularInOut:function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},elasticIn:function(t){var e,n=.1;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=.1):e=.4*Math.asin(1/n)/(2*Math.PI),-n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*(2*Math.PI)/.4))},elasticOut:function(t){var e,n=.1;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=.1):e=.4*Math.asin(1/n)/(2*Math.PI),n*Math.pow(2,-10*t)*Math.sin((t-e)*(2*Math.PI)/.4)+1)},elasticInOut:function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=.1):e=i*Math.asin(1/n)/(2*Math.PI),(t*=2)<1?n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*(2*Math.PI)/i)*-.5:n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*(2*Math.PI)/i)*.5+1)},backIn:function(t){var e=1.70158;return t*t*((e+1)*t-e)},backOut:function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},backInOut:function(t){var e=2.5949095;return(t*=2)<1?t*t*((e+1)*t-e)*.5:.5*((t-=2)*t*((e+1)*t+e)+2)},bounceIn:function(t){return 1-Pe.bounceOut(1-t)},bounceOut:function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},bounceInOut:function(t){return t<.5?.5*Pe.bounceIn(2*t):.5*Pe.bounceOut(2*t-1)+.5}},Oe=function(){function t(t){this._initialized=!1,this._startTime=0,this._pausedTime=0,this._paused=!1,this._life=t.life||1e3,this._delay=t.delay||0,this.loop=null!=t.loop&&t.loop,this.gap=t.gap||0,this.easing=t.easing||"linear",this.onframe=t.onframe,this.ondestroy=t.ondestroy,this.onrestart=t.onrestart}return t.prototype.step=function(t,e){if(this._initialized||(this._startTime=t+this._delay,this._initialized=!0),!this._paused){var n=(t-this._startTime-this._pausedTime)/this._life;n<0&&(n=0),n=Math.min(n,1);var i=this.easing,r="string"==typeof i?Pe[i]:i,o="function"==typeof r?r(n):n;if(this.onframe&&this.onframe(o),1===n){if(!this.loop)return!0;this._restart(t),this.onrestart&&this.onrestart()}return!1}this._pausedTime+=e},t.prototype._restart=function(t){var e=(t-this._startTime-this._pausedTime)%this._life;this._startTime=t-e+this.gap,this._pausedTime=0},t.prototype.pause=function(){this._paused=!0},t.prototype.resume=function(){this._paused=!1},t}(),Re=function(t){this.value=t},Ne=function(){function t(){this._len=0}return t.prototype.insert=function(t){var e=new Re(t);return this.insertEntry(e),e},t.prototype.insertEntry=function(t){this.head?(this.tail.next=t,t.prev=this.tail,t.next=null,this.tail=t):this.head=this.tail=t,this._len++},t.prototype.remove=function(t){var e=t.prev,n=t.next;e?e.next=n:this.head=n,n?n.prev=e:this.tail=e,t.next=t.prev=null,this._len--},t.prototype.len=function(){return this._len},t.prototype.clear=function(){this.head=this.tail=null,this._len=0},t}(),Ee=function(){function t(t){this._list=new Ne,this._maxSize=10,this._map={},this._maxSize=t}return t.prototype.put=function(t,e){var n=this._list,i=this._map,r=null;if(null==i[t]){var o=n.len(),a=this._lastRemovedEntry;if(o>=this._maxSize&&o>0){var s=n.head;n.remove(s),delete i[s.key],r=s.value,this._lastRemovedEntry=s}a?a.value=e:a=new Re(e),a.key=t,n.insertEntry(a),i[t]=a}return r},t.prototype.get=function(t){var e=this._map[t],n=this._list;if(null!=e)return e!==n.tail&&(n.remove(e),n.insertEntry(e)),e.value},t.prototype.clear=function(){this._list.clear(),this._map={}},t.prototype.len=function(){return this._list.len()},t}(),ze={transparent:[0,0,0,0],aliceblue:[240,248,255,1],antiquewhite:[250,235,215,1],aqua:[0,255,255,1],aquamarine:[127,255,212,1],azure:[240,255,255,1],beige:[245,245,220,1],bisque:[255,228,196,1],black:[0,0,0,1],blanchedalmond:[255,235,205,1],blue:[0,0,255,1],blueviolet:[138,43,226,1],brown:[165,42,42,1],burlywood:[222,184,135,1],cadetblue:[95,158,160,1],chartreuse:[127,255,0,1],chocolate:[210,105,30,1],coral:[255,127,80,1],cornflowerblue:[100,149,237,1],cornsilk:[255,248,220,1],crimson:[220,20,60,1],cyan:[0,255,255,1],darkblue:[0,0,139,1],darkcyan:[0,139,139,1],darkgoldenrod:[184,134,11,1],darkgray:[169,169,169,1],darkgreen:[0,100,0,1],darkgrey:[169,169,169,1],darkkhaki:[189,183,107,1],darkmagenta:[139,0,139,1],darkolivegreen:[85,107,47,1],darkorange:[255,140,0,1],darkorchid:[153,50,204,1],darkred:[139,0,0,1],darksalmon:[233,150,122,1],darkseagreen:[143,188,143,1],darkslateblue:[72,61,139,1],darkslategray:[47,79,79,1],darkslategrey:[47,79,79,1],darkturquoise:[0,206,209,1],darkviolet:[148,0,211,1],deeppink:[255,20,147,1],deepskyblue:[0,191,255,1],dimgray:[105,105,105,1],dimgrey:[105,105,105,1],dodgerblue:[30,144,255,1],firebrick:[178,34,34,1],floralwhite:[255,250,240,1],forestgreen:[34,139,34,1],fuchsia:[255,0,255,1],gainsboro:[220,220,220,1],ghostwhite:[248,248,255,1],gold:[255,215,0,1],goldenrod:[218,165,32,1],gray:[128,128,128,1],green:[0,128,0,1],greenyellow:[173,255,47,1],grey:[128,128,128,1],honeydew:[240,255,240,1],hotpink:[255,105,180,1],indianred:[205,92,92,1],indigo:[75,0,130,1],ivory:[255,255,240,1],khaki:[240,230,140,1],lavender:[230,230,250,1],lavenderblush:[255,240,245,1],lawngreen:[124,252,0,1],lemonchiffon:[255,250,205,1],lightblue:[173,216,230,1],lightcoral:[240,128,128,1],lightcyan:[224,255,255,1],lightgoldenrodyellow:[250,250,210,1],lightgray:[211,211,211,1],lightgreen:[144,238,144,1],lightgrey:[211,211,211,1],lightpink:[255,182,193,1],lightsalmon:[255,160,122,1],lightseagreen:[32,178,170,1],lightskyblue:[135,206,250,1],lightslategray:[119,136,153,1],lightslategrey:[119,136,153,1],lightsteelblue:[176,196,222,1],lightyellow:[255,255,224,1],lime:[0,255,0,1],limegreen:[50,205,50,1],linen:[250,240,230,1],magenta:[255,0,255,1],maroon:[128,0,0,1],mediumaquamarine:[102,205,170,1],mediumblue:[0,0,205,1],mediumorchid:[186,85,211,1],mediumpurple:[147,112,219,1],mediumseagreen:[60,179,113,1],mediumslateblue:[123,104,238,1],mediumspringgreen:[0,250,154,1],mediumturquoise:[72,209,204,1],mediumvioletred:[199,21,133,1],midnightblue:[25,25,112,1],mintcream:[245,255,250,1],mistyrose:[255,228,225,1],moccasin:[255,228,181,1],navajowhite:[255,222,173,1],navy:[0,0,128,1],oldlace:[253,245,230,1],olive:[128,128,0,1],olivedrab:[107,142,35,1],orange:[255,165,0,1],orangered:[255,69,0,1],orchid:[218,112,214,1],palegoldenrod:[238,232,170,1],palegreen:[152,251,152,1],paleturquoise:[175,238,238,1],palevioletred:[219,112,147,1],papayawhip:[255,239,213,1],peachpuff:[255,218,185,1],peru:[205,133,63,1],pink:[255,192,203,1],plum:[221,160,221,1],powderblue:[176,224,230,1],purple:[128,0,128,1],red:[255,0,0,1],rosybrown:[188,143,143,1],royalblue:[65,105,225,1],saddlebrown:[139,69,19,1],salmon:[250,128,114,1],sandybrown:[244,164,96,1],seagreen:[46,139,87,1],seashell:[255,245,238,1],sienna:[160,82,45,1],silver:[192,192,192,1],skyblue:[135,206,235,1],slateblue:[106,90,205,1],slategray:[112,128,144,1],slategrey:[112,128,144,1],snow:[255,250,250,1],springgreen:[0,255,127,1],steelblue:[70,130,180,1],tan:[210,180,140,1],teal:[0,128,128,1],thistle:[216,191,216,1],tomato:[255,99,71,1],turquoise:[64,224,208,1],violet:[238,130,238,1],wheat:[245,222,179,1],white:[255,255,255,1],whitesmoke:[245,245,245,1],yellow:[255,255,0,1],yellowgreen:[154,205,50,1]};function Be(t){return(t=Math.round(t))<0?0:t>255?255:t}function Ve(t){return t<0?0:t>1?1:t}function Fe(t){var e=t;return e.length&&"%"===e.charAt(e.length-1)?Be(parseFloat(e)/100*255):Be(parseInt(e,10))}function Ge(t){var e=t;return e.length&&"%"===e.charAt(e.length-1)?Ve(parseFloat(e)/100):Ve(parseFloat(e))}function He(t,e,n){return n<0?n+=1:n>1&&(n-=1),6*n<1?t+(e-t)*n*6:2*n<1?e:3*n<2?t+(e-t)*(2/3-n)*6:t}function We(t,e,n){return t+(e-t)*n}function Ue(t,e,n,i,r){return t[0]=e,t[1]=n,t[2]=i,t[3]=r,t}function Ye(t,e){return t[0]=e[0],t[1]=e[1],t[2]=e[2],t[3]=e[3],t}var Xe=new Ee(20),Ze=null;function je(t,e){Ze&&Ye(Ze,e),Ze=Xe.put(t,Ze||e.slice())}function qe(t,e){if(t){e=e||[];var n=Xe.get(t);if(n)return Ye(e,n);var i=(t+="").replace(/ /g,"").toLowerCase();if(i in ze)return Ye(e,ze[i]),je(t,e),e;var r,o=i.length;if("#"===i.charAt(0))return 4===o||5===o?(r=parseInt(i.slice(1,4),16))>=0&&r<=4095?(Ue(e,(3840&r)>>4|(3840&r)>>8,240&r|(240&r)>>4,15&r|(15&r)<<4,5===o?parseInt(i.slice(4),16)/15:1),je(t,e),e):void Ue(e,0,0,0,1):7===o||9===o?(r=parseInt(i.slice(1,7),16))>=0&&r<=16777215?(Ue(e,(16711680&r)>>16,(65280&r)>>8,255&r,9===o?parseInt(i.slice(7),16)/255:1),je(t,e),e):void Ue(e,0,0,0,1):void 0;var a=i.indexOf("("),s=i.indexOf(")");if(-1!==a&&s+1===o){var l=i.substr(0,a),u=i.substr(a+1,s-(a+1)).split(","),h=1;switch(l){case"rgba":if(4!==u.length)return 3===u.length?Ue(e,+u[0],+u[1],+u[2],1):Ue(e,0,0,0,1);h=Ge(u.pop());case"rgb":return 3!==u.length?void Ue(e,0,0,0,1):(Ue(e,Fe(u[0]),Fe(u[1]),Fe(u[2]),h),je(t,e),e);case"hsla":return 4!==u.length?void Ue(e,0,0,0,1):(u[3]=Ge(u[3]),Ke(u,e),je(t,e),e);case"hsl":return 3!==u.length?void Ue(e,0,0,0,1):(Ke(u,e),je(t,e),e);default:return}}Ue(e,0,0,0,1)}}function Ke(t,e){var n=(parseFloat(t[0])%360+360)%360/360,i=Ge(t[1]),r=Ge(t[2]),o=r<=.5?r*(i+1):r+i-r*i,a=2*r-o;return Ue(e=e||[],Be(255*He(a,o,n+1/3)),Be(255*He(a,o,n)),Be(255*He(a,o,n-1/3)),1),4===t.length&&(e[3]=t[3]),e}function $e(t,e){var n=qe(t);if(n){for(var i=0;i<3;i++)n[i]=e<0?n[i]*(1-e)|0:(255-n[i])*e+n[i]|0,n[i]>255?n[i]=255:n[i]<0&&(n[i]=0);return an(n,4===n.length?"rgba":"rgb")}}function Je(t){var e=qe(t);if(e)return((1<<24)+(e[0]<<16)+(e[1]<<8)+ +e[2]).toString(16).slice(1)}function Qe(t,e,n){if(e&&e.length&&t>=0&&t<=1){n=n||[];var i=t*(e.length-1),r=Math.floor(i),o=Math.ceil(i),a=e[r],s=e[o],l=i-r;return n[0]=Be(We(a[0],s[0],l)),n[1]=Be(We(a[1],s[1],l)),n[2]=Be(We(a[2],s[2],l)),n[3]=Ve(We(a[3],s[3],l)),n}}var tn=Qe;function en(t,e,n){if(e&&e.length&&t>=0&&t<=1){var i=t*(e.length-1),r=Math.floor(i),o=Math.ceil(i),a=qe(e[r]),s=qe(e[o]),l=i-r,u=an([Be(We(a[0],s[0],l)),Be(We(a[1],s[1],l)),Be(We(a[2],s[2],l)),Ve(We(a[3],s[3],l))],"rgba");return n?{color:u,leftIndex:r,rightIndex:o,value:i}:u}}var nn=en;function rn(t,e,n,i){var r=qe(t);if(t)return r=function(t){if(t){var e,n,i=t[0]/255,r=t[1]/255,o=t[2]/255,a=Math.min(i,r,o),s=Math.max(i,r,o),l=s-a,u=(s+a)/2;if(0===l)e=0,n=0;else{n=u<.5?l/(s+a):l/(2-s-a);var h=((s-i)/6+l/2)/l,c=((s-r)/6+l/2)/l,p=((s-o)/6+l/2)/l;i===s?e=p-c:r===s?e=1/3+h-p:o===s&&(e=2/3+c-h),e<0&&(e+=1),e>1&&(e-=1)}var d=[360*e,n,u];return null!=t[3]&&d.push(t[3]),d}}(r),null!=e&&(r[0]=function(t){return(t=Math.round(t))<0?0:t>360?360:t}(e)),null!=n&&(r[1]=Ge(n)),null!=i&&(r[2]=Ge(i)),an(Ke(r),"rgba")}function on(t,e){var n=qe(t);if(n&&null!=e)return n[3]=Ve(e),an(n,"rgba")}function an(t,e){if(t&&t.length){var n=t[0]+","+t[1]+","+t[2];return"rgba"!==e&&"hsva"!==e&&"hsla"!==e||(n+=","+t[3]),e+"("+n+")"}}function sn(t,e){var n=qe(t);return n?(.299*n[0]+.587*n[1]+.114*n[2])*n[3]/255+(1-n[3])*e:0}var ln=Object.freeze({__proto__:null,parse:qe,lift:$e,toHex:Je,fastLerp:Qe,fastMapToColor:tn,lerp:en,mapToColor:nn,modifyHSL:rn,modifyAlpha:on,stringify:an,lum:sn,random:function(){return"rgb("+Math.round(255*Math.random())+","+Math.round(255*Math.random())+","+Math.round(255*Math.random())+")"}}),un=Array.prototype.slice;function hn(t,e,n){return(e-t)*n+t}function cn(t,e,n,i){for(var r=e.length,o=0;o<r;o++)t[o]=hn(e[o],n[o],i)}function pn(t,e,n,i){for(var r=e.length,o=0;o<r;o++)t[o]=e[o]+n[o]*i;return t}function dn(t,e,n,i){for(var r=e.length,o=r&&e[0].length,a=0;a<r;a++){t[a]||(t[a]=[]);for(var s=0;s<o;s++)t[a][s]=e[a][s]+n[a][s]*i}return t}function fn(t,e,n){var i=t,r=e;if(i.push&&r.push){var o=i.length,a=r.length;if(o!==a)if(o>a)i.length=a;else for(var s=o;s<a;s++)i.push(1===n?r[s]:un.call(r[s]));var l=i[0]&&i[0].length;for(s=0;s<i.length;s++)if(1===n)isNaN(i[s])&&(i[s]=r[s]);else for(var u=0;u<l;u++)isNaN(i[s][u])&&(i[s][u]=r[s][u])}}function gn(t,e){var n=t.length;if(n!==e.length)return!1;for(var i=0;i<n;i++)if(t[i]!==e[i])return!1;return!0}function yn(t,e,n,i,r,o,a){var s=.5*(n-t),l=.5*(i-e);return(2*(e-n)+s+l)*a+(-3*(e-n)-2*s-l)*o+s*r+e}function vn(t,e,n,i,r,o,a,s){for(var l=e.length,u=0;u<l;u++)t[u]=yn(e[u],n[u],i[u],r[u],o,a,s)}function mn(t){if(k(t)){var e=t.length;if(k(t[0])){for(var n=[],i=0;i<e;i++)n.push(un.call(t[i]));return n}return un.call(t)}return t}function _n(t){return t[0]=Math.floor(t[0]),t[1]=Math.floor(t[1]),t[2]=Math.floor(t[2]),"rgba("+t.join(",")+")"}var xn,bn,wn=[0,0,0,0],Sn=function(){function t(t){this.keyframes=[],this.maxTime=0,this.arrDim=0,this.interpolable=!0,this._needsSort=!1,this._isAllValueEqual=!0,this._lastFrame=0,this._lastFramePercent=0,this.propName=t}return t.prototype.isFinished=function(){return this._finished},t.prototype.setFinished=function(){this._finished=!0,this._additiveTrack&&this._additiveTrack.setFinished()},t.prototype.needsAnimate=function(){return!this._isAllValueEqual&&this.keyframes.length>=2&&this.interpolable},t.prototype.getAdditiveTrack=function(){return this._additiveTrack},t.prototype.addKeyframe=function(t,e){t>=this.maxTime?this.maxTime=t:this._needsSort=!0;var n=this.keyframes,i=n.length;if(this.interpolable)if(k(e)){var r=function(t){return k(t&&t[0])?2:1}(e);if(i>0&&this.arrDim!==r)return void(this.interpolable=!1);if(1===r&&"number"!=typeof e[0]||2===r&&"number"!=typeof e[0][0])return void(this.interpolable=!1);if(i>0){var o=n[i-1];this._isAllValueEqual&&(1===r&&gn(e,o.value)||(this._isAllValueEqual=!1))}this.arrDim=r}else{if(this.arrDim>0)return void(this.interpolable=!1);if("string"==typeof e){var a=qe(e);a?(e=a,this.isValueColor=!0):this.interpolable=!1}else if("number"!=typeof e||isNaN(e))return void(this.interpolable=!1);if(this._isAllValueEqual&&i>0){o=n[i-1];(this.isValueColor&&!gn(o.value,e)||o.value!==e)&&(this._isAllValueEqual=!1)}}var s={time:t,value:e,percent:0};return this.keyframes.push(s),s},t.prototype.prepare=function(t){var e=this.keyframes;this._needsSort&&e.sort((function(t,e){return t.time-e.time}));for(var n=this.arrDim,i=e.length,r=e[i-1],o=0;o<i;o++)e[o].percent=e[o].time/this.maxTime,n>0&&o!==i-1&&fn(e[o].value,r.value,n);if(t&&this.needsAnimate()&&t.needsAnimate()&&n===t.arrDim&&this.isValueColor===t.isValueColor&&!t._finished){this._additiveTrack=t;var a=e[0].value;for(o=0;o<i;o++)0===n?this.isValueColor?e[o].additiveValue=pn([],e[o].value,a,-1):e[o].additiveValue=e[o].value-a:1===n?e[o].additiveValue=pn([],e[o].value,a,-1):2===n&&(e[o].additiveValue=dn([],e[o].value,a,-1))}},t.prototype.step=function(t,e){if(!this._finished){this._additiveTrack&&this._additiveTrack._finished&&(this._additiveTrack=null);var n,i=null!=this._additiveTrack,r=i?"additiveValue":"value",o=this.keyframes,a=this.keyframes.length,s=this.propName,l=this.arrDim,u=this.isValueColor;if(e<0)n=0;else if(e<this._lastFramePercent){for(n=Math.min(this._lastFrame+1,a-1);n>=0&&!(o[n].percent<=e);n--);n=Math.min(n,a-2)}else{for(n=this._lastFrame;n<a&&!(o[n].percent>e);n++);n=Math.min(n-1,a-2)}var h=o[n+1],c=o[n];if(c&&h){this._lastFrame=n,this._lastFramePercent=e;var p=h.percent-c.percent;if(0!==p){var d=(e-c.percent)/p,f=i?this._additiveValue:u?wn:t[s];if((l>0||u)&&!f&&(f=this._additiveValue=[]),this.useSpline){var g=o[n][r],y=o[0===n?n:n-1][r],v=o[n>a-2?a-1:n+1][r],m=o[n>a-3?a-1:n+2][r];if(l>0)1===l?vn(f,y,g,v,m,d,d*d,d*d*d):function(t,e,n,i,r,o,a,s){for(var l=e.length,u=e[0].length,h=0;h<l;h++){t[h]||(t[1]=[]);for(var c=0;c<u;c++)t[h][c]=yn(e[h][c],n[h][c],i[h][c],r[h][c],o,a,s)}}(f,y,g,v,m,d,d*d,d*d*d);else if(u)vn(f,y,g,v,m,d,d*d,d*d*d),i||(t[s]=_n(f));else{var _=void 0;_=this.interpolable?yn(y,g,v,m,d,d*d,d*d*d):v,i?this._additiveValue=_:t[s]=_}}else if(l>0)1===l?cn(f,c[r],h[r],d):function(t,e,n,i){for(var r=e.length,o=r&&e[0].length,a=0;a<r;a++){t[a]||(t[a]=[]);for(var s=0;s<o;s++)t[a][s]=hn(e[a][s],n[a][s],i)}}(f,c[r],h[r],d);else if(u)cn(f,c[r],h[r],d),i||(t[s]=_n(f));else{_=void 0;_=this.interpolable?hn(c[r],h[r],d):function(t,e,n){return n>.5?e:t}(c[r],h[r],d),i?this._additiveValue=_:t[s]=_}i&&this._addToTarget(t)}}}},t.prototype._addToTarget=function(t){var e=this.arrDim,n=this.propName,i=this._additiveValue;0===e?this.isValueColor?(qe(t[n],wn),pn(wn,wn,i,1),t[n]=_n(wn)):t[n]=t[n]+i:1===e?pn(t[n],t[n],i,1):2===e&&dn(t[n],t[n],i,1)},t}(),Mn=function(){function t(t,e,n){this._tracks={},this._trackKeys=[],this._delay=0,this._maxTime=0,this._paused=!1,this._started=0,this._clip=null,this._target=t,this._loop=e,e&&n?b("Can' use additive animation on looped animation."):this._additiveAnimators=n}return t.prototype.getTarget=function(){return this._target},t.prototype.changeTarget=function(t){this._target=t},t.prototype.when=function(t,e){return this.whenWithKeys(t,e,z(e))},t.prototype.whenWithKeys=function(t,e,n){for(var i=this._tracks,r=0;r<n.length;r++){var o=n[r],a=i[o];if(!a){a=i[o]=new Sn(o);var s=void 0,l=this._getAdditiveTrack(o);if(l){var u=l.keyframes[l.keyframes.length-1];s=u&&u.value,l.isValueColor&&s&&(s=_n(s))}else s=this._target[o];if(null==s)continue;0!==t&&a.addKeyframe(0,mn(s)),this._trackKeys.push(o)}a.addKeyframe(t,mn(e[o]))}return this._maxTime=Math.max(this._maxTime,t),this},t.prototype.pause=function(){this._clip.pause(),this._paused=!0},t.prototype.resume=function(){this._clip.resume(),this._paused=!1},t.prototype.isPaused=function(){return!!this._paused},t.prototype._doneCallback=function(){this._setTracksFinished(),this._clip=null;var t=this._doneList;if(t)for(var e=t.length,n=0;n<e;n++)t[n].call(this)},t.prototype._abortedCallback=function(){this._setTracksFinished();var t=this.animation,e=this._abortedList;if(t&&t.removeClip(this._clip),this._clip=null,e)for(var n=0;n<e.length;n++)e[n].call(this)},t.prototype._setTracksFinished=function(){for(var t=this._tracks,e=this._trackKeys,n=0;n<e.length;n++)t[e[n]].setFinished()},t.prototype._getAdditiveTrack=function(t){var e,n=this._additiveAnimators;if(n)for(var i=0;i<n.length;i++){var r=n[i].getTrack(t);r&&(e=r)}return e},t.prototype.start=function(t,e){if(!(this._started>0)){this._started=1;for(var n=this,i=[],r=0;r<this._trackKeys.length;r++){var o=this._trackKeys[r],a=this._tracks[o],s=this._getAdditiveTrack(o),l=a.keyframes;if(a.prepare(s),a.needsAnimate())i.push(a);else if(!a.interpolable){var u=l[l.length-1];u&&(n._target[a.propName]=u.value)}}if(i.length||e){var h=new Oe({life:this._maxTime,loop:this._loop,delay:this._delay,onframe:function(t){n._started=2;var e=n._additiveAnimators;if(e){for(var r=!1,o=0;o<e.length;o++)if(e[o]._clip){r=!0;break}r||(n._additiveAnimators=null)}for(o=0;o<i.length;o++)i[o].step(n._target,t);var a=n._onframeList;if(a)for(o=0;o<a.length;o++)a[o](n._target,t)},ondestroy:function(){n._doneCallback()}});this._clip=h,this.animation&&this.animation.addClip(h),t&&"spline"!==t&&(h.easing=t)}else this._doneCallback();return this}},t.prototype.stop=function(t){if(this._clip){var e=this._clip;t&&e.onframe(1),this._abortedCallback()}},t.prototype.delay=function(t){return this._delay=t,this},t.prototype.during=function(t){return t&&(this._onframeList||(this._onframeList=[]),this._onframeList.push(t)),this},t.prototype.done=function(t){return t&&(this._doneList||(this._doneList=[]),this._doneList.push(t)),this},t.prototype.aborted=function(t){return t&&(this._abortedList||(this._abortedList=[]),this._abortedList.push(t)),this},t.prototype.getClip=function(){return this._clip},t.prototype.getTrack=function(t){return this._tracks[t]},t.prototype.stopTracks=function(t,e){if(!t.length||!this._clip)return!0;for(var n=this._tracks,i=this._trackKeys,r=0;r<t.length;r++){var o=n[t[r]];o&&(e?o.step(this._target,1):1===this._started&&o.step(this._target,0),o.setFinished())}var a=!0;for(r=0;r<i.length;r++)if(!n[i[r]].isFinished()){a=!1;break}return a&&this._abortedCallback(),a},t.prototype.saveFinalToTarget=function(t,e){if(t){e=e||this._trackKeys;for(var n=0;n<e.length;n++){var i=e[n],r=this._tracks[i];if(r&&!r.isFinished()){var o=r.keyframes,a=o[o.length-1];if(a){var s=mn(a.value);r.isValueColor&&(s=_n(s)),t[i]=s}}}}},t.prototype.__changeFinalValue=function(t,e){e=e||z(t);for(var n=0;n<e.length;n++){var i=e[n],r=this._tracks[i];if(r){var o=r.keyframes;if(o.length>1){var a=o.pop();r.addKeyframe(a.time,t[i]),r.prepare(r.getAdditiveTrack())}}}},t}(),In=function(){function t(t,e){this.x=t||0,this.y=e||0}return t.prototype.copy=function(t){return this.x=t.x,this.y=t.y,this},t.prototype.clone=function(){return new t(this.x,this.y)},t.prototype.set=function(t,e){return this.x=t,this.y=e,this},t.prototype.equal=function(t){return t.x===this.x&&t.y===this.y},t.prototype.add=function(t){return this.x+=t.x,this.y+=t.y,this},t.prototype.scale=function(t){this.x*=t,this.y*=t},t.prototype.scaleAndAdd=function(t,e){this.x+=t.x*e,this.y+=t.y*e},t.prototype.sub=function(t){return this.x-=t.x,this.y-=t.y,this},t.prototype.dot=function(t){return this.x*t.x+this.y*t.y},t.prototype.len=function(){return Math.sqrt(this.x*this.x+this.y*this.y)},t.prototype.lenSquare=function(){return this.x*this.x+this.y*this.y},t.prototype.normalize=function(){var t=this.len();return this.x/=t,this.y/=t,this},t.prototype.distance=function(t){var e=this.x-t.x,n=this.y-t.y;return Math.sqrt(e*e+n*n)},t.prototype.distanceSquare=function(t){var e=this.x-t.x,n=this.y-t.y;return e*e+n*n},t.prototype.negate=function(){return this.x=-this.x,this.y=-this.y,this},t.prototype.transform=function(t){if(t){var e=this.x,n=this.y;return this.x=t[0]*e+t[2]*n+t[4],this.y=t[1]*e+t[3]*n+t[5],this}},t.prototype.toArray=function(t){return t[0]=this.x,t[1]=this.y,t},t.prototype.fromArray=function(t){this.x=t[0],this.y=t[1]},t.set=function(t,e,n){t.x=e,t.y=n},t.copy=function(t,e){t.x=e.x,t.y=e.y},t.len=function(t){return Math.sqrt(t.x*t.x+t.y*t.y)},t.lenSquare=function(t){return t.x*t.x+t.y*t.y},t.dot=function(t,e){return t.x*e.x+t.y*e.y},t.add=function(t,e,n){t.x=e.x+n.x,t.y=e.y+n.y},t.sub=function(t,e,n){t.x=e.x-n.x,t.y=e.y-n.y},t.scale=function(t,e,n){t.x=e.x*n,t.y=e.y*n},t.scaleAndAdd=function(t,e,n,i){t.x=e.x+n.x*i,t.y=e.y+n.y*i},t.lerp=function(t,e,n,i){var r=1-i;t.x=r*e.x+i*n.x,t.y=r*e.y+i*n.y},t}(),Tn=Math.min,Cn=Math.max,An=new In,Dn=new In,Ln=new In,kn=new In,Pn=new In,On=new In,Rn=function(){function t(t,e,n,i){n<0&&isFinite(n)&&(t+=n,n=-n),i<0&&isFinite(i)&&(e+=i,i=-i),this.x=t,this.y=e,this.width=n,this.height=i}return t.prototype.union=function(t){var e=Tn(t.x,this.x),n=Tn(t.y,this.y);isFinite(this.x)&&isFinite(this.width)?this.width=Cn(t.x+t.width,this.x+this.width)-e:this.width=t.width,isFinite(this.y)&&isFinite(this.height)?this.height=Cn(t.y+t.height,this.y+this.height)-n:this.height=t.height,this.x=e,this.y=n},t.prototype.applyTransform=function(e){t.applyTransform(this,this,e)},t.prototype.calculateTransform=function(t){var e=this,n=t.width/e.width,i=t.height/e.height,r=[1,0,0,1,0,0];return me(r,r,[-e.x,-e.y]),xe(r,r,[n,i]),me(r,r,[t.x,t.y]),r},t.prototype.intersect=function(e,n){if(!e)return!1;e instanceof t||(e=t.create(e));var i=this,r=i.x,o=i.x+i.width,a=i.y,s=i.y+i.height,l=e.x,u=e.x+e.width,h=e.y,c=e.y+e.height,p=!(o<l||u<r||s<h||c<a);if(n){var d=1/0,f=0,g=Math.abs(o-l),y=Math.abs(u-r),v=Math.abs(s-h),m=Math.abs(c-a),_=Math.min(g,y),x=Math.min(v,m);o<l||u<r?_>f&&(f=_,g<y?In.set(On,-g,0):In.set(On,y,0)):_<d&&(d=_,g<y?In.set(Pn,g,0):In.set(Pn,-y,0)),s<h||c<a?x>f&&(f=x,v<m?In.set(On,0,-v):In.set(On,0,m)):_<d&&(d=_,v<m?In.set(Pn,0,v):In.set(Pn,0,-m))}return n&&In.copy(n,p?Pn:On),p},t.prototype.contain=function(t,e){var n=this;return t>=n.x&&t<=n.x+n.width&&e>=n.y&&e<=n.y+n.height},t.prototype.clone=function(){return new t(this.x,this.y,this.width,this.height)},t.prototype.copy=function(e){t.copy(this,e)},t.prototype.plain=function(){return{x:this.x,y:this.y,width:this.width,height:this.height}},t.prototype.isFinite=function(){return isFinite(this.x)&&isFinite(this.y)&&isFinite(this.width)&&isFinite(this.height)},t.prototype.isZero=function(){return 0===this.width||0===this.height},t.create=function(e){return new t(e.x,e.y,e.width,e.height)},t.copy=function(t,e){t.x=e.x,t.y=e.y,t.width=e.width,t.height=e.height},t.applyTransform=function(e,n,i){if(i){if(i[1]<1e-5&&i[1]>-1e-5&&i[2]<1e-5&&i[2]>-1e-5){var r=i[0],o=i[3],a=i[4],s=i[5];return e.x=n.x*r+a,e.y=n.y*o+s,e.width=n.width*r,e.height=n.height*o,e.width<0&&(e.x+=e.width,e.width=-e.width),void(e.height<0&&(e.y+=e.height,e.height=-e.height))}An.x=Ln.x=n.x,An.y=kn.y=n.y,Dn.x=kn.x=n.x+n.width,Dn.y=Ln.y=n.y+n.height,An.transform(i),kn.transform(i),Dn.transform(i),Ln.transform(i),e.x=Tn(An.x,Dn.x,Ln.x,kn.x),e.y=Tn(An.y,Dn.y,Ln.y,kn.y);var l=Cn(An.x,Dn.x,Ln.x,kn.x),u=Cn(An.y,Dn.y,Ln.y,kn.y);e.width=l-e.x,e.height=u-e.y}else e!==n&&t.copy(e,n)},t}(),Nn={},En="12px sans-serif";var zn={measureText:function(t,e){return xn||(xn=C().getContext("2d")),bn!==e&&(bn=xn.font=e||En),xn.measureText(t)}};function Bn(t,e){var n=Nn[e=e||En];n||(n=Nn[e]=new Ee(500));var i=n.get(t);return null==i&&(i=zn.measureText(t,e).width,n.put(t,i)),i}function Vn(t,e,n,i){var r=Bn(t,e),o=Wn(e),a=Gn(0,r,n),s=Hn(0,o,i);return new Rn(a,s,r,o)}function Fn(t,e,n,i){var r=((t||"")+"").split("\n");if(1===r.length)return Vn(r[0],e,n,i);for(var o=new Rn(0,0,0,0),a=0;a<r.length;a++){var s=Vn(r[a],e,n,i);0===a?o.copy(s):o.union(s)}return o}function Gn(t,e,n){return"right"===n?t-=e:"center"===n&&(t-=e/2),t}function Hn(t,e,n){return"middle"===n?t-=e/2:"bottom"===n&&(t-=e),t}function Wn(t){return Bn("国",t)}function Un(t,e){return"string"==typeof t?t.lastIndexOf("%")>=0?parseFloat(t)/100*e:parseFloat(t):t}function Yn(t,e,n){var i=e.position||"inside",r=null!=e.distance?e.distance:5,o=n.height,a=n.width,s=o/2,l=n.x,u=n.y,h="left",c="top";if(i instanceof Array)l+=Un(i[0],n.width),u+=Un(i[1],n.height),h=null,c=null;else switch(i){case"left":l-=r,u+=s,h="right",c="middle";break;case"right":l+=r+a,u+=s,c="middle";break;case"top":l+=a/2,u-=r,h="center",c="bottom";break;case"bottom":l+=a/2,u+=o+r,h="center";break;case"inside":l+=a/2,u+=s,h="center",c="middle";break;case"insideLeft":l+=r,u+=s,c="middle";break;case"insideRight":l+=a-r,u+=s,h="right",c="middle";break;case"insideTop":l+=a/2,u+=r,h="center";break;case"insideBottom":l+=a/2,u+=o-r,h="center",c="bottom";break;case"insideTopLeft":l+=r,u+=r;break;case"insideTopRight":l+=a-r,u+=r,h="right";break;case"insideBottomLeft":l+=r,u+=o-r,c="bottom";break;case"insideBottomRight":l+=a-r,u+=o-r,h="right",c="bottom"}return(t=t||{}).x=l,t.y=u,t.align=h,t.verticalAlign=c,t}var Xn=1;"undefined"!=typeof window&&(Xn=Math.max(window.devicePixelRatio||window.screen&&window.screen.deviceXDPI/window.screen.logicalXDPI||1,1));var Zn=Xn,jn="#333",qn="#ccc",Kn="__zr_normal__",$n=["x","y","scaleX","scaleY","originX","originY","rotation","ignore"],Jn={x:!0,y:!0,scaleX:!0,scaleY:!0,originX:!0,originY:!0,rotation:!0,ignore:!1},Qn={},ti=new Rn(0,0,0,0),ei=function(){function t(t){this.id=x(),this.animators=[],this.currentStates=[],this.states={},this._init(t)}return t.prototype._init=function(t){this.attr(t)},t.prototype.drift=function(t,e,n){switch(this.draggable){case"horizontal":e=0;break;case"vertical":t=0}var i=this.transform;i||(i=this.transform=[1,0,0,1,0,0]),i[4]+=t,i[5]+=e,this.decomposeTransform(),this.markRedraw()},t.prototype.beforeUpdate=function(){},t.prototype.afterUpdate=function(){},t.prototype.update=function(){this.updateTransform(),this.__dirty&&this.updateInnerText()},t.prototype.updateInnerText=function(t){var e=this._textContent;if(e&&(!e.ignore||t)){this.textConfig||(this.textConfig={});var n=this.textConfig,i=n.local,r=e.attachedTransform,o=void 0,a=void 0,s=!1;r.parent=i?this:null;var l=!1;if(r.x=e.x,r.y=e.y,r.originX=e.originX,r.originY=e.originY,r.rotation=e.rotation,r.scaleX=e.scaleX,r.scaleY=e.scaleY,null!=n.position){var u=ti;n.layoutRect?u.copy(n.layoutRect):u.copy(this.getBoundingRect()),i||u.applyTransform(this.transform),this.calculateTextPosition?this.calculateTextPosition(Qn,n,u):Yn(Qn,n,u),r.x=Qn.x,r.y=Qn.y,o=Qn.align,a=Qn.verticalAlign;var h=n.origin;if(h&&null!=n.rotation){var c=void 0,p=void 0;"center"===h?(c=.5*u.width,p=.5*u.height):(c=Un(h[0],u.width),p=Un(h[1],u.height)),l=!0,r.originX=-r.x+c+(i?0:u.x),r.originY=-r.y+p+(i?0:u.y)}}null!=n.rotation&&(r.rotation=n.rotation);var d=n.offset;d&&(r.x+=d[0],r.y+=d[1],l||(r.originX=-d[0],r.originY=-d[1]));var f=null==n.inside?"string"==typeof n.position&&n.position.indexOf("inside")>=0:n.inside,g=this._innerTextDefaultStyle||(this._innerTextDefaultStyle={}),y=void 0,v=void 0,m=void 0;f&&this.canBeInsideText()?(y=n.insideFill,v=n.insideStroke,null!=y&&"auto"!==y||(y=this.getInsideTextFill()),null!=v&&"auto"!==v||(v=this.getInsideTextStroke(y),m=!0)):(y=n.outsideFill,v=n.outsideStroke,null!=y&&"auto"!==y||(y=this.getOutsideFill()),null!=v&&"auto"!==v||(v=this.getOutsideStroke(y),m=!0)),(y=y||"#000")===g.fill&&v===g.stroke&&m===g.autoStroke&&o===g.align&&a===g.verticalAlign||(s=!0,g.fill=y,g.stroke=v,g.autoStroke=m,g.align=o,g.verticalAlign=a,e.setDefaultTextStyle(g)),s&&e.dirtyStyle(),e.markRedraw()}},t.prototype.canBeInsideText=function(){return!0},t.prototype.getInsideTextFill=function(){return"#fff"},t.prototype.getInsideTextStroke=function(t){return"#000"},t.prototype.getOutsideFill=function(){return this.__zr&&this.__zr.isDarkMode()?qn:jn},t.prototype.getOutsideStroke=function(t){var e=this.__zr&&this.__zr.getBackgroundColor(),n="string"==typeof e&&qe(e);n||(n=[255,255,255,1]);for(var i=n[3],r=this.__zr.isDarkMode(),o=0;o<3;o++)n[o]=n[o]*i+(r?0:255)*(1-i);return n[3]=1,an(n,"rgba")},t.prototype.traverse=function(t,e){},t.prototype.attrKV=function(t,e){"textConfig"===t?this.setTextConfig(e):"textContent"===t?this.setTextContent(e):"clipPath"===t?this.setClipPath(e):"extra"===t?(this.extra=this.extra||{},I(this.extra,e)):this[t]=e},t.prototype.hide=function(){this.ignore=!0,this.markRedraw()},t.prototype.show=function(){this.ignore=!1,this.markRedraw()},t.prototype.attr=function(t,e){if("string"==typeof t)this.attrKV(t,e);else if(Y(t))for(var n=z(t),i=0;i<n.length;i++){var r=n[i];this.attrKV(r,t[r])}return this.markRedraw(),this},t.prototype.saveCurrentToNormalState=function(t){this._innerSaveToNormal(t);for(var e=this._normalState,n=0;n<this.animators.length;n++){var i=this.animators[n],r=i.__fromStateTransition;if(!r||r===Kn){var o=i.targetName,a=o?e[o]:e;i.saveFinalToTarget(a)}}},t.prototype._innerSaveToNormal=function(t){var e=this._normalState;e||(e=this._normalState={}),t.textConfig&&!e.textConfig&&(e.textConfig=this.textConfig),this._savePrimaryToNormal(t,e,$n)},t.prototype._savePrimaryToNormal=function(t,e,n){for(var i=0;i<n.length;i++){var r=n[i];null==t[r]||r in e||(e[r]=this[r])}},t.prototype.hasState=function(){return this.currentStates.length>0},t.prototype.getState=function(t){return this.states[t]},t.prototype.ensureState=function(t){var e=this.states;return e[t]||(e[t]={}),e[t]},t.prototype.clearStates=function(t){this.useState(Kn,!1,t)},t.prototype.useState=function(e,n,i){var r=e===Kn;if(this.hasState()||!r){var o=this.currentStates,a=this.stateTransition;if(!(A(o,e)>=0)||!n&&1!==o.length){var s;if(this.stateProxy&&!r&&(s=this.stateProxy(e)),s||(s=this.states&&this.states[e]),s||r){r||this.saveCurrentToNormalState(s);var l=!(!s||!s.hoverLayer);return l&&this._toggleHoverLayerFlag(!0),this._applyStateObj(e,s,this._normalState,n,!i&&!this.__inHover&&a&&a.duration>0,a),this._textContent&&this._textContent.useState(e,n),this._textGuide&&this._textGuide.useState(e,n),r?(this.currentStates=[],this._normalState={}):n?this.currentStates.push(e):this.currentStates=[e],this._updateAnimationTargets(),this.markRedraw(),!l&&this.__inHover&&(this._toggleHoverLayerFlag(!1),this.__dirty&=~t.REDARAW_BIT),s}b("State "+e+" not exists.")}}},t.prototype.useStates=function(e,n){if(e.length){var i=[],r=this.currentStates,o=e.length,a=o===r.length;if(a)for(var s=0;s<o;s++)if(e[s]!==r[s]){a=!1;break}if(a)return;for(s=0;s<o;s++){var l=e[s],u=void 0;this.stateProxy&&(u=this.stateProxy(l,e)),u||(u=this.states[l]),u&&i.push(u)}var h=!(!i[o-1]||!i[o-1].hoverLayer);h&&this._toggleHoverLayerFlag(!0);var c=this._mergeStates(i),p=this.stateTransition;this.saveCurrentToNormalState(c),this._applyStateObj(e.join(","),c,this._normalState,!1,!n&&!this.__inHover&&p&&p.duration>0,p),this._textContent&&this._textContent.useStates(e),this._textGuide&&this._textGuide.useStates(e),this._updateAnimationTargets(),this.currentStates=e.slice(),this.markRedraw(),!h&&this.__inHover&&(this._toggleHoverLayerFlag(!1),this.__dirty&=~t.REDARAW_BIT)}else this.clearStates()},t.prototype._updateAnimationTargets=function(){for(var t=0;t<this.animators.length;t++){var e=this.animators[t];e.targetName&&e.changeTarget(this[e.targetName])}},t.prototype.removeState=function(t){var e=A(this.currentStates,t);if(e>=0){var n=this.currentStates.slice();n.splice(e,1),this.useStates(n)}},t.prototype.replaceState=function(t,e,n){var i=this.currentStates.slice(),r=A(i,t),o=A(i,e)>=0;r>=0?o?i.splice(r,1):i[r]=e:n&&!o&&i.push(e),this.useStates(i)},t.prototype.toggleState=function(t,e){e?this.useState(t,!0):this.removeState(t)},t.prototype._mergeStates=function(t){for(var e,n={},i=0;i<t.length;i++){var r=t[i];I(n,r),r.textConfig&&I(e=e||{},r.textConfig)}return e&&(n.textConfig=e),n},t.prototype._applyStateObj=function(t,e,n,i,r,o){var a=!(e&&i);e&&e.textConfig?(this.textConfig=I({},i?this.textConfig:n.textConfig),I(this.textConfig,e.textConfig)):a&&n.textConfig&&(this.textConfig=n.textConfig);for(var s={},l=!1,u=0;u<$n.length;u++){var h=$n[u],c=r&&Jn[h];e&&null!=e[h]?c?(l=!0,s[h]=e[h]):this[h]=e[h]:a&&null!=n[h]&&(c?(l=!0,s[h]=n[h]):this[h]=n[h])}if(!r)for(u=0;u<this.animators.length;u++){var p=this.animators[u],d=p.targetName;p.__changeFinalValue(d?(e||n)[d]:e||n)}l&&this._transitionState(t,s,o)},t.prototype._attachComponent=function(t){if(t.__zr&&!t.__hostTarget)throw new Error("Text element has been added to zrender.");if(t===this)throw new Error("Recursive component attachment.");var e=this.__zr;e&&t.addSelfToZr(e),t.__zr=e,t.__hostTarget=this},t.prototype._detachComponent=function(t){t.__zr&&t.removeSelfFromZr(t.__zr),t.__zr=null,t.__hostTarget=null},t.prototype.getClipPath=function(){return this._clipPath},t.prototype.setClipPath=function(t){this._clipPath&&this._clipPath!==t&&this.removeClipPath(),this._attachComponent(t),this._clipPath=t,this.markRedraw()},t.prototype.removeClipPath=function(){var t=this._clipPath;t&&(this._detachComponent(t),this._clipPath=null,this.markRedraw())},t.prototype.getTextContent=function(){return this._textContent},t.prototype.setTextContent=function(t){var e=this._textContent;if(e!==t){if(e&&e!==t&&this.removeTextContent(),t.__zr&&!t.__hostTarget)throw new Error("Text element has been added to zrender.");t.attachedTransform=new ke,this._attachComponent(t),this._textContent=t,this.markRedraw()}},t.prototype.setTextConfig=function(t){this.textConfig||(this.textConfig={}),I(this.textConfig,t),this.markRedraw()},t.prototype.removeTextConfig=function(){this.textConfig=null,this.markRedraw()},t.prototype.removeTextContent=function(){var t=this._textContent;t&&(t.attachedTransform=null,this._detachComponent(t),this._textContent=null,this._innerTextDefaultStyle=null,this.markRedraw())},t.prototype.getTextGuideLine=function(){return this._textGuide},t.prototype.setTextGuideLine=function(t){this._textGuide&&this._textGuide!==t&&this.removeTextGuideLine(),this._attachComponent(t),this._textGuide=t,this.markRedraw()},t.prototype.removeTextGuideLine=function(){var t=this._textGuide;t&&(this._detachComponent(t),this._textGuide=null,this.markRedraw())},t.prototype.markRedraw=function(){this.__dirty|=t.REDARAW_BIT;var e=this.__zr;e&&(this.__inHover?e.refreshHover():e.refresh()),this.__hostTarget&&this.__hostTarget.markRedraw()},t.prototype.dirty=function(){this.markRedraw()},t.prototype._toggleHoverLayerFlag=function(t){this.__inHover=t;var e=this._textContent,n=this._textGuide;e&&(e.__inHover=t),n&&(n.__inHover=t)},t.prototype.addSelfToZr=function(t){this.__zr=t;var e=this.animators;if(e)for(var n=0;n<e.length;n++)t.animation.addAnimator(e[n]);this._clipPath&&this._clipPath.addSelfToZr(t),this._textContent&&this._textContent.addSelfToZr(t),this._textGuide&&this._textGuide.addSelfToZr(t)},t.prototype.removeSelfFromZr=function(t){this.__zr=null;var e=this.animators;if(e)for(var n=0;n<e.length;n++)t.animation.removeAnimator(e[n]);this._clipPath&&this._clipPath.removeSelfFromZr(t),this._textContent&&this._textContent.removeSelfFromZr(t),this._textGuide&&this._textGuide.removeSelfFromZr(t)},t.prototype.animate=function(t,e){var n=t?this[t]:this;if(n){var i=new Mn(n,e);return this.addAnimator(i,t),i}b('Property "'+t+'" is not existed in element '+this.id)},t.prototype.addAnimator=function(t,e){var n=this.__zr,i=this;t.during((function(){i.updateDuringAnimation(e)})).done((function(){var e=i.animators,n=A(e,t);n>=0&&e.splice(n,1)})),this.animators.push(t),n&&n.animation.addAnimator(t),n&&n.wakeUp()},t.prototype.updateDuringAnimation=function(t){this.markRedraw()},t.prototype.stopAnimation=function(t,e){for(var n=this.animators,i=n.length,r=[],o=0;o<i;o++){var a=n[o];t&&t!==a.scope?r.push(a):a.stop(e)}return this.animators=r,this},t.prototype.animateTo=function(t,e,n){ni(this,t,e,n)},t.prototype.animateFrom=function(t,e,n){ni(this,t,e,n,!0)},t.prototype._transitionState=function(t,e,n,i){for(var r=ni(this,e,n,i),o=0;o<r.length;o++)r[o].__fromStateTransition=t},t.prototype.getBoundingRect=function(){return null},t.prototype.getPaintRect=function(){return null},t.REDARAW_BIT=1,t.initDefaultProps=function(){var e=t.prototype;e.type="element",e.name="",e.ignore=!1,e.silent=!1,e.isGroup=!1,e.draggable=!1,e.dragging=!1,e.ignoreClip=!1,e.__inHover=!1,e.__dirty=t.REDARAW_BIT;var n={};function i(t,e,i){n[t+e+i]||(console.warn("DEPRECATED: '"+t+"' has been deprecated. use '"+e+"', '"+i+"' instead"),n[t+e+i]=!0)}function r(t,n,r,o){function a(t,e){Object.defineProperty(e,0,{get:function(){return t[r]},set:function(e){t[r]=e}}),Object.defineProperty(e,1,{get:function(){return t[o]},set:function(e){t[o]=e}})}Object.defineProperty(e,t,{get:function(){(i(t,r,o),this[n])||a(this,this[n]=[]);return this[n]},set:function(e){i(t,r,o),this[r]=e[0],this[o]=e[1],this[n]=e,a(this,e)}})}Object.defineProperty&&(!a.browser.ie||a.browser.version>8)&&(r("position","_legacyPos","x","y"),r("scale","_legacyScale","scaleX","scaleY"),r("origin","_legacyOrigin","originX","originY"))}(),t}();function ni(t,e,n,i,r){var o=[];oi(t,"",t,e,n=n||{},i,o,r);var a=o.length,s=!1,l=n.done,u=n.aborted,h=function(){s=!0,--a<=0&&(s?l&&l():u&&u())},c=function(){--a<=0&&(s?l&&l():u&&u())};a||l&&l(),o.length>0&&n.during&&o[0].during((function(t,e){n.during(e)}));for(var p=0;p<o.length;p++){var d=o[p];h&&d.done(h),c&&d.aborted(c),d.start(n.easing,n.force)}return o}function ii(t,e,n){for(var i=0;i<n;i++)t[i]=e[i]}function ri(t,e,n){if(k(e[n]))if(k(t[n])||(t[n]=[]),Z(e[n])){var i=e[n].length;t[n].length!==i&&(t[n]=new e[n].constructor(i),ii(t[n],e[n],i))}else{var r=e[n],o=t[n],a=r.length;if(k(r[0]))for(var s=r[0].length,l=0;l<a;l++)o[l]?ii(o[l],r[l],s):o[l]=Array.prototype.slice.call(r[l]);else ii(o,r,a);o.length=r.length}else t[n]=e[n]}function oi(t,e,n,i,r,o,a,s){for(var l=[],u=[],h=z(i),c=r.duration,p=r.delay,d=r.additive,f=r.setToFinal,g=!Y(o),y=0;y<h.length;y++){if(null!=n[I=h[y]]&&null!=i[I]&&(g||o[I]))if(Y(i[I])&&!k(i[I])){if(e){s||(n[I]=i[I],t.updateDuringAnimation(e));continue}oi(t,I,n[I],i[I],r,o&&o[I],a,s)}else l.push(I),u.push(I);else s||(n[I]=i[I],t.updateDuringAnimation(e),u.push(I))}var v=l.length;if(v>0||r.force&&!a.length){for(var m=t.animators,_=[],x=0;x<m.length;x++)m[x].targetName===e&&_.push(m[x]);if(!d&&_.length)for(x=0;x<_.length;x++){if(_[x].stopTracks(u)){var b=A(m,_[x]);m.splice(b,1)}}var w=void 0,S=void 0,M=void 0;if(s){S={},f&&(w={});for(x=0;x<v;x++){S[I=l[x]]=n[I],f?w[I]=i[I]:n[I]=i[I]}}else if(f){M={};for(x=0;x<v;x++){var I;M[I=l[x]]=mn(n[I]),ri(n,i,I)}}var T=new Mn(n,!1,d?_:null);T.targetName=e,r.scope&&(T.scope=r.scope),f&&w&&T.whenWithKeys(0,w,l),M&&T.whenWithKeys(0,M,l),T.whenWithKeys(null==c?500:c,s?S:i,l).delay(p||0),t.addAnimator(T,e),a.push(T)}}L(ei,Ft),L(ei,ke);function ai(t,e,n,i){var r=e+1;if(r===n)return 1;if(i(t[r++],t[e])<0){for(;r<n&&i(t[r],t[r-1])<0;)r++;!function(t,e,n){n--;for(;e<n;){var i=t[e];t[e++]=t[n],t[n--]=i}}(t,e,r)}else for(;r<n&&i(t[r],t[r-1])>=0;)r++;return r-e}function si(t,e,n,i,r){for(i===e&&i++;i<n;i++){for(var o,a=t[i],s=e,l=i;s<l;)r(a,t[o=s+l>>>1])<0?l=o:s=o+1;var u=i-s;switch(u){case 3:t[s+3]=t[s+2];case 2:t[s+2]=t[s+1];case 1:t[s+1]=t[s];break;default:for(;u>0;)t[s+u]=t[s+u-1],u--}t[s]=a}}function li(t,e,n,i,r,o){var a=0,s=0,l=1;if(o(t,e[n+r])>0){for(s=i-r;l<s&&o(t,e[n+r+l])>0;)a=l,(l=1+(l<<1))<=0&&(l=s);l>s&&(l=s),a+=r,l+=r}else{for(s=r+1;l<s&&o(t,e[n+r-l])<=0;)a=l,(l=1+(l<<1))<=0&&(l=s);l>s&&(l=s);var u=a;a=r-l,l=r-u}for(a++;a<l;){var h=a+(l-a>>>1);o(t,e[n+h])>0?a=h+1:l=h}return l}function ui(t,e,n,i,r,o){var a=0,s=0,l=1;if(o(t,e[n+r])<0){for(s=r+1;l<s&&o(t,e[n+r-l])<0;)a=l,(l=1+(l<<1))<=0&&(l=s);l>s&&(l=s);var u=a;a=r-l,l=r-u}else{for(s=i-r;l<s&&o(t,e[n+r+l])>=0;)a=l,(l=1+(l<<1))<=0&&(l=s);l>s&&(l=s),a+=r,l+=r}for(a++;a<l;){var h=a+(l-a>>>1);o(t,e[n+h])<0?l=h:a=h+1}return l}function hi(t,e){var n,i,r=7,o=0;t.length;var a=[];function s(s){var l=n[s],u=i[s],h=n[s+1],c=i[s+1];i[s]=u+c,s===o-3&&(n[s+1]=n[s+2],i[s+1]=i[s+2]),o--;var p=ui(t[h],t,l,u,0,e);l+=p,0!==(u-=p)&&0!==(c=li(t[l+u-1],t,h,c,c-1,e))&&(u<=c?function(n,i,o,s){var l=0;for(l=0;l<i;l++)a[l]=t[n+l];var u=0,h=o,c=n;if(t[c++]=t[h++],0==--s){for(l=0;l<i;l++)t[c+l]=a[u+l];return}if(1===i){for(l=0;l<s;l++)t[c+l]=t[h+l];return void(t[c+s]=a[u])}var p,d,f,g=r;for(;;){p=0,d=0,f=!1;do{if(e(t[h],a[u])<0){if(t[c++]=t[h++],d++,p=0,0==--s){f=!0;break}}else if(t[c++]=a[u++],p++,d=0,1==--i){f=!0;break}}while((p|d)<g);if(f)break;do{if(0!==(p=ui(t[h],a,u,i,0,e))){for(l=0;l<p;l++)t[c+l]=a[u+l];if(c+=p,u+=p,(i-=p)<=1){f=!0;break}}if(t[c++]=t[h++],0==--s){f=!0;break}if(0!==(d=li(a[u],t,h,s,0,e))){for(l=0;l<d;l++)t[c+l]=t[h+l];if(c+=d,h+=d,0===(s-=d)){f=!0;break}}if(t[c++]=a[u++],1==--i){f=!0;break}g--}while(p>=7||d>=7);if(f)break;g<0&&(g=0),g+=2}if((r=g)<1&&(r=1),1===i){for(l=0;l<s;l++)t[c+l]=t[h+l];t[c+s]=a[u]}else{if(0===i)throw new Error;for(l=0;l<i;l++)t[c+l]=a[u+l]}}(l,u,h,c):function(n,i,o,s){var l=0;for(l=0;l<s;l++)a[l]=t[o+l];var u=n+i-1,h=s-1,c=o+s-1,p=0,d=0;if(t[c--]=t[u--],0==--i){for(p=c-(s-1),l=0;l<s;l++)t[p+l]=a[l];return}if(1===s){for(d=(c-=i)+1,p=(u-=i)+1,l=i-1;l>=0;l--)t[d+l]=t[p+l];return void(t[c]=a[h])}var f=r;for(;;){var g=0,y=0,v=!1;do{if(e(a[h],t[u])<0){if(t[c--]=t[u--],g++,y=0,0==--i){v=!0;break}}else if(t[c--]=a[h--],y++,g=0,1==--s){v=!0;break}}while((g|y)<f);if(v)break;do{if(0!==(g=i-ui(a[h],t,n,i,i-1,e))){for(i-=g,d=(c-=g)+1,p=(u-=g)+1,l=g-1;l>=0;l--)t[d+l]=t[p+l];if(0===i){v=!0;break}}if(t[c--]=a[h--],1==--s){v=!0;break}if(0!==(y=s-li(t[u],a,0,s,s-1,e))){for(s-=y,d=(c-=y)+1,p=(h-=y)+1,l=0;l<y;l++)t[d+l]=a[p+l];if(s<=1){v=!0;break}}if(t[c--]=t[u--],0==--i){v=!0;break}f--}while(g>=7||y>=7);if(v)break;f<0&&(f=0),f+=2}(r=f)<1&&(r=1);if(1===s){for(d=(c-=i)+1,p=(u-=i)+1,l=i-1;l>=0;l--)t[d+l]=t[p+l];t[c]=a[h]}else{if(0===s)throw new Error;for(p=c-(s-1),l=0;l<s;l++)t[p+l]=a[l]}}(l,u,h,c))}return n=[],i=[],{mergeRuns:function(){for(;o>1;){var t=o-2;if(t>=1&&i[t-1]<=i[t]+i[t+1]||t>=2&&i[t-2]<=i[t]+i[t-1])i[t-1]<i[t+1]&&t--;else if(i[t]>i[t+1])break;s(t)}},forceMergeRuns:function(){for(;o>1;){var t=o-2;t>0&&i[t-1]<i[t+1]&&t--,s(t)}},pushRun:function(t,e){n[o]=t,i[o]=e,o+=1}}}function ci(t,e,n,i){n||(n=0),i||(i=t.length);var r=i-n;if(!(r<2)){var o=0;if(r<32)si(t,n,i,n+(o=ai(t,n,i,e)),e);else{var a=hi(t,e),s=function(t){for(var e=0;t>=32;)e|=1&t,t>>=1;return t+e}(r);do{if((o=ai(t,n,i,e))<s){var l=r;l>s&&(l=s),si(t,n,n+l,n+o,e),o=l}a.pushRun(n,o),a.mergeRuns(),r-=o,n+=o}while(0!==r);a.forceMergeRuns()}}}var pi=!1;function di(){pi||(pi=!0,console.warn("z / z2 / zlevel of displayable is invalid, which may cause unexpected errors"))}function fi(t,e){return t.zlevel===e.zlevel?t.z===e.z?t.z2-e.z2:t.z-e.z:t.zlevel-e.zlevel}var gi,yi,vi=function(){function t(){this._roots=[],this._displayList=[],this._displayListLen=0,this.displayableSortFunc=fi}return t.prototype.traverse=function(t,e){for(var n=0;n<this._roots.length;n++)this._roots[n].traverse(t,e)},t.prototype.getDisplayList=function(t,e){e=e||!1;var n=this._displayList;return!t&&n.length||this.updateDisplayList(e),n},t.prototype.updateDisplayList=function(t){this._displayListLen=0;for(var e=this._roots,n=this._displayList,i=0,r=e.length;i<r;i++)this._updateAndAddDisplayable(e[i],null,t);n.length=this._displayListLen,a.canvasSupported&&ci(n,fi)},t.prototype._updateAndAddDisplayable=function(t,e,n){if(!t.ignore||n){t.beforeUpdate(),t.update(),t.afterUpdate();var i=t.getClipPath();if(t.ignoreClip)e=null;else if(i){e=e?e.slice():[];for(var r=i,o=t;r;)r.parent=o,r.updateTransform(),e.push(r),o=r,r=r.getClipPath()}if(t.childrenRef){for(var a=t.childrenRef(),s=0;s<a.length;s++){var l=a[s];t.__dirty&&(l.__dirty|=ei.REDARAW_BIT),this._updateAndAddDisplayable(l,e,n)}t.__dirty=0}else{var u=t;e&&e.length?u.__clipPaths=e:u.__clipPaths&&u.__clipPaths.length>0&&(u.__clipPaths=[]),isNaN(u.z)&&(di(),u.z=0),isNaN(u.z2)&&(di(),u.z2=0),isNaN(u.zlevel)&&(di(),u.zlevel=0),this._displayList[this._displayListLen++]=u}var h=t.getDecalElement&&t.getDecalElement();h&&this._updateAndAddDisplayable(h,e,n);var c=t.getTextGuideLine();c&&this._updateAndAddDisplayable(c,e,n);var p=t.getTextContent();p&&this._updateAndAddDisplayable(p,e,n)}},t.prototype.addRoot=function(t){t.__zr&&t.__zr.storage===this||this._roots.push(t)},t.prototype.delRoot=function(t){if(t instanceof Array)for(var e=0,n=t.length;e<n;e++)this.delRoot(t[e]);else{var i=A(this._roots,t);i>=0&&this._roots.splice(i,1)}},t.prototype.delAllRoots=function(){this._roots=[],this._displayList=[],this._displayListLen=0},t.prototype.getRoots=function(){return this._roots},t.prototype.dispose=function(){this._displayList=null,this._roots=null},t}(),mi="undefined"!=typeof window&&(window.requestAnimationFrame&&window.requestAnimationFrame.bind(window)||window.msRequestAnimationFrame&&window.msRequestAnimationFrame.bind(window)||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame)||function(t){return setTimeout(t,16)},_i=function(t){function e(e){var n=t.call(this)||this;return n._running=!1,n._time=0,n._pausedTime=0,n._pauseStart=0,n._paused=!1,e=e||{},n.stage=e.stage||{},n.onframe=e.onframe||function(){},n}return n(e,t),e.prototype.addClip=function(t){t.animation&&this.removeClip(t),this._clipsHead?(this._clipsTail.next=t,t.prev=this._clipsTail,t.next=null,this._clipsTail=t):this._clipsHead=this._clipsTail=t,t.animation=this},e.prototype.addAnimator=function(t){t.animation=this;var e=t.getClip();e&&this.addClip(e)},e.prototype.removeClip=function(t){if(t.animation){var e=t.prev,n=t.next;e?e.next=n:this._clipsHead=n,n?n.prev=e:this._clipsTail=e,t.next=t.prev=t.animation=null}},e.prototype.removeAnimator=function(t){var e=t.getClip();e&&this.removeClip(e),t.animation=null},e.prototype.update=function(t){for(var e=(new Date).getTime()-this._pausedTime,n=e-this._time,i=this._clipsHead;i;){var r=i.next;i.step(e,n)?(i.ondestroy&&i.ondestroy(),this.removeClip(i),i=r):i=r}this._time=e,t||(this.onframe(n),this.trigger("frame",n),this.stage.update&&this.stage.update())},e.prototype._startLoop=function(){var t=this;this._running=!0,mi((function e(){t._running&&(mi(e),!t._paused&&t.update())}))},e.prototype.start=function(){this._running||(this._time=(new Date).getTime(),this._pausedTime=0,this._startLoop())},e.prototype.stop=function(){this._running=!1},e.prototype.pause=function(){this._paused||(this._pauseStart=(new Date).getTime(),this._paused=!0)},e.prototype.resume=function(){this._paused&&(this._pausedTime+=(new Date).getTime()-this._pauseStart,this._paused=!1)},e.prototype.clear=function(){for(var t=this._clipsHead;t;){var e=t.next;t.prev=t.next=t.animation=null,t=e}this._clipsHead=this._clipsTail=null},e.prototype.isFinished=function(){return null==this._clipsHead},e.prototype.animate=function(t,e){e=e||{},this.start();var n=new Mn(t,e.loop);return this.addAnimator(n),n},e}(Ft),xi=a.domSupported,bi=(yi={pointerdown:1,pointerup:1,pointermove:1,pointerout:1},{mouse:gi=["click","dblclick","mousewheel","wheel","mouseout","mouseup","mousedown","mousemove","contextmenu"],touch:["touchstart","touchend","touchmove"],pointer:O(gi,(function(t){var e=t.replace("mouse","pointer");return yi.hasOwnProperty(e)?e:t}))}),wi=["mousemove","mouseup"],Si=["pointermove","pointerup"],Mi=!1;function Ii(t){var e=t.pointerType;return"pen"===e||"touch"===e}function Ti(t){t&&(t.zrByTouch=!0)}function Ci(t,e){for(var n=e,i=!1;n&&9!==n.nodeType&&!(i=n.domBelongToZr||n!==e&&n===t.painterRoot);)n=n.parentNode;return i}var Ai=function(t,e){this.stopPropagation=ft,this.stopImmediatePropagation=ft,this.preventDefault=ft,this.type=e.type,this.target=this.currentTarget=t.dom,this.pointerType=e.pointerType,this.clientX=e.clientX,this.clientY=e.clientY},Di={mousedown:function(t){t=Qt(this.dom,t),this.__mayPointerCapture=[t.zrX,t.zrY],this.trigger("mousedown",t)},mousemove:function(t){t=Qt(this.dom,t);var e=this.__mayPointerCapture;!e||t.zrX===e[0]&&t.zrY===e[1]||this.__togglePointerCapture(!0),this.trigger("mousemove",t)},mouseup:function(t){t=Qt(this.dom,t),this.__togglePointerCapture(!1),this.trigger("mouseup",t)},mouseout:function(t){Ci(this,(t=Qt(this.dom,t)).toElement||t.relatedTarget)||(this.__pointerCapturing&&(t.zrEventControl="no_globalout"),this.trigger("mouseout",t))},wheel:function(t){Mi=!0,t=Qt(this.dom,t),this.trigger("mousewheel",t)},mousewheel:function(t){Mi||(t=Qt(this.dom,t),this.trigger("mousewheel",t))},touchstart:function(t){Ti(t=Qt(this.dom,t)),this.__lastTouchMoment=new Date,this.handler.processGesture(t,"start"),Di.mousemove.call(this,t),Di.mousedown.call(this,t)},touchmove:function(t){Ti(t=Qt(this.dom,t)),this.handler.processGesture(t,"change"),Di.mousemove.call(this,t)},touchend:function(t){Ti(t=Qt(this.dom,t)),this.handler.processGesture(t,"end"),Di.mouseup.call(this,t),+new Date-+this.__lastTouchMoment<300&&Di.click.call(this,t)},pointerdown:function(t){Di.mousedown.call(this,t)},pointermove:function(t){Ii(t)||Di.mousemove.call(this,t)},pointerup:function(t){Di.mouseup.call(this,t)},pointerout:function(t){Ii(t)||Di.mouseout.call(this,t)}};P(["click","dblclick","contextmenu"],(function(t){Di[t]=function(e){e=Qt(this.dom,e),this.trigger(t,e)}}));var Li={pointermove:function(t){Ii(t)||Li.mousemove.call(this,t)},pointerup:function(t){Li.mouseup.call(this,t)},mousemove:function(t){this.trigger("mousemove",t)},mouseup:function(t){var e=this.__pointerCapturing;this.__togglePointerCapture(!1),this.trigger("mouseup",t),e&&(t.zrEventControl="only_globalout",this.trigger("mouseout",t))}};function ki(t,e){var n=e.domHandlers;a.pointerEventsSupported?P(bi.pointer,(function(i){Oi(e,i,(function(e){n[i].call(t,e)}))})):(a.touchEventsSupported&&P(bi.touch,(function(i){Oi(e,i,(function(r){n[i].call(t,r),function(t){t.touching=!0,null!=t.touchTimer&&(clearTimeout(t.touchTimer),t.touchTimer=null),t.touchTimer=setTimeout((function(){t.touching=!1,t.touchTimer=null}),700)}(e)}))})),P(bi.mouse,(function(i){Oi(e,i,(function(r){r=Jt(r),e.touching||n[i].call(t,r)}))})))}function Pi(t,e){function n(n){Oi(e,n,(function(i){i=Jt(i),Ci(t,i.target)||(i=function(t,e){return Qt(t.dom,new Ai(t,e),!0)}(t,i),e.domHandlers[n].call(t,i))}),{capture:!0})}a.pointerEventsSupported?P(Si,n):a.touchEventsSupported||P(wi,n)}function Oi(t,e,n,i){t.mounted[e]=n,t.listenerOpts[e]=i,te(t.domTarget,e,n,i)}function Ri(t){var e,n,i,r,o=t.mounted;for(var a in o)o.hasOwnProperty(a)&&(e=t.domTarget,n=a,i=o[a],r=t.listenerOpts[a],Zt?e.removeEventListener(n,i,r):e.detachEvent("on"+n,i));t.mounted={}}var Ni=function(t,e){this.mounted={},this.listenerOpts={},this.touching=!1,this.domTarget=t,this.domHandlers=e},Ei=function(t){function e(e,n){var i=t.call(this)||this;return i.__pointerCapturing=!1,i.dom=e,i.painterRoot=n,i._localHandlerScope=new Ni(e,Di),xi&&(i._globalHandlerScope=new Ni(document,Li)),ki(i,i._localHandlerScope),i}return n(e,t),e.prototype.dispose=function(){Ri(this._localHandlerScope),xi&&Ri(this._globalHandlerScope)},e.prototype.setCursor=function(t){this.dom.style&&(this.dom.style.cursor=t||"default")},e.prototype.__togglePointerCapture=function(t){if(this.__mayPointerCapture=null,xi&&+this.__pointerCapturing^+t){this.__pointerCapturing=t;var e=this._globalHandlerScope;t?Pi(this,e):Ri(e)}},e}(Ft),zi=function(t){function e(e){var n=t.call(this)||this;return n.isGroup=!0,n._children=[],n.attr(e),n}return n(e,t),e.prototype.childrenRef=function(){return this._children},e.prototype.children=function(){return this._children.slice()},e.prototype.childAt=function(t){return this._children[t]},e.prototype.childOfName=function(t){for(var e=this._children,n=0;n<e.length;n++)if(e[n].name===t)return e[n]},e.prototype.childCount=function(){return this._children.length},e.prototype.add=function(t){if(t&&(t!==this&&t.parent!==this&&(this._children.push(t),this._doAdd(t)),t.__hostTarget))throw"This elemenet has been used as an attachment";return this},e.prototype.addBefore=function(t,e){if(t&&t!==this&&t.parent!==this&&e&&e.parent===this){var n=this._children,i=n.indexOf(e);i>=0&&(n.splice(i,0,t),this._doAdd(t))}return this},e.prototype.replaceAt=function(t,e){var n=this._children,i=n[e];if(t&&t!==this&&t.parent!==this&&t!==i){n[e]=t,i.parent=null;var r=this.__zr;r&&i.removeSelfFromZr(r),this._doAdd(t)}return this},e.prototype._doAdd=function(t){t.parent&&t.parent.remove(t),t.parent=this;var e=this.__zr;e&&e!==t.__zr&&t.addSelfToZr(e),e&&e.refresh()},e.prototype.remove=function(t){var e=this.__zr,n=this._children,i=A(n,t);return i<0||(n.splice(i,1),t.parent=null,e&&t.removeSelfFromZr(e),e&&e.refresh()),this},e.prototype.removeAll=function(){for(var t=this._children,e=this.__zr,n=0;n<t.length;n++){var i=t[n];e&&i.removeSelfFromZr(e),i.parent=null}return t.length=0,this},e.prototype.eachChild=function(t,e){for(var n=this._children,i=0;i<n.length;i++){var r=n[i];t.call(e,r,i)}return this},e.prototype.traverse=function(t,e){for(var n=0;n<this._children.length;n++){var i=this._children[n],r=t.call(e,i);i.isGroup&&!r&&i.traverse(t,e)}return this},e.prototype.addSelfToZr=function(e){t.prototype.addSelfToZr.call(this,e);for(var n=0;n<this._children.length;n++){this._children[n].addSelfToZr(e)}},e.prototype.removeSelfFromZr=function(e){t.prototype.removeSelfFromZr.call(this,e);for(var n=0;n<this._children.length;n++){this._children[n].removeSelfFromZr(e)}},e.prototype.getBoundingRect=function(t){for(var e=new Rn(0,0,0,0),n=t||this._children,i=[],r=null,o=0;o<n.length;o++){var a=n[o];if(!a.ignore&&!a.invisible){var s=a.getBoundingRect(),l=a.getLocalTransform(i);l?(Rn.applyTransform(e,s,l),(r=r||e.clone()).union(e)):(r=r||s.clone()).union(s)}}return r||e},e}(ei);zi.prototype.type="group";
+    ***************************************************************************** */var e=function(t,n){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])})(t,n)};function n(t,n){function i(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(i.prototype=n.prototype,new i)}var i=function(){return(i=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t}).apply(this,arguments)};function r(){for(var t=0,e=0,n=arguments.length;e<n;e++)t+=arguments[e].length;var i=Array(t),r=0;for(e=0;e<n;e++)for(var o=arguments[e],a=0,s=o.length;a<s;a++,r++)i[r]=o[a];return i}var o=function(){this.firefox=!1,this.ie=!1,this.edge=!1,this.newEdge=!1,this.weChat=!1},a=new function(){this.browser=new o,this.node=!1,this.wxa=!1,this.worker=!1,this.canvasSupported=!1,this.svgSupported=!1,this.touchEventsSupported=!1,this.pointerEventsSupported=!1,this.domSupported=!1,this.transformSupported=!1,this.transform3dSupported=!1};"object"==typeof wx&&"function"==typeof wx.getSystemInfoSync?(a.wxa=!0,a.canvasSupported=!0,a.touchEventsSupported=!0):"undefined"==typeof document&&"undefined"!=typeof self?(a.worker=!0,a.canvasSupported=!0):"undefined"==typeof navigator?(a.node=!0,a.canvasSupported=!0,a.svgSupported=!0):function(t,e){var n=e.browser,i=t.match(/Firefox\/([\d.]+)/),r=t.match(/MSIE\s([\d.]+)/)||t.match(/Trident\/.+?rv:(([\d.]+))/),o=t.match(/Edge?\/([\d.]+)/),a=/micromessenger/i.test(t);i&&(n.firefox=!0,n.version=i[1]);r&&(n.ie=!0,n.version=r[1]);o&&(n.edge=!0,n.version=o[1],n.newEdge=+o[1].split(".")[0]>18);a&&(n.weChat=!0);e.canvasSupported=!!document.createElement("canvas").getContext,e.svgSupported="undefined"!=typeof SVGRect,e.touchEventsSupported="ontouchstart"in window&&!n.ie&&!n.edge,e.pointerEventsSupported="onpointerdown"in window&&(n.edge||n.ie&&+n.version>=11),e.domSupported="undefined"!=typeof document;var s=document.documentElement.style;e.transform3dSupported=(n.ie&&"transition"in s||n.edge||"WebKitCSSMatrix"in window&&"m11"in new WebKitCSSMatrix||"MozPerspective"in s)&&!("OTransition"in s),e.transformSupported=e.transform3dSupported||n.ie&&+n.version>=9}(navigator.userAgent,a);var s={"[object Function]":!0,"[object RegExp]":!0,"[object Date]":!0,"[object Error]":!0,"[object CanvasGradient]":!0,"[object CanvasPattern]":!0,"[object Image]":!0,"[object Canvas]":!0},l={"[object Int8Array]":!0,"[object Uint8Array]":!0,"[object Uint8ClampedArray]":!0,"[object Int16Array]":!0,"[object Uint16Array]":!0,"[object Int32Array]":!0,"[object Uint32Array]":!0,"[object Float32Array]":!0,"[object Float64Array]":!0},u=Object.prototype.toString,h=Array.prototype,c=h.forEach,p=h.filter,d=h.slice,f=h.map,g=function(){}.constructor,y=g?g.prototype:null,v={};function m(t,e){v[t]=e}var _=2311;function x(){return _++}function b(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];"undefined"!=typeof console&&console.error.apply(console,t)}function w(t){if(null==t||"object"!=typeof t)return t;var e=t,n=u.call(t);if("[object Array]"===n){if(!lt(t)){e=[];for(var i=0,r=t.length;i<r;i++)e[i]=w(t[i])}}else if(l[n]){if(!lt(t)){var o=t.constructor;if(o.from)e=o.from(t);else{e=new o(t.length);for(i=0,r=t.length;i<r;i++)e[i]=w(t[i])}}}else if(!s[n]&&!lt(t)&&!j(t))for(var a in e={},t)t.hasOwnProperty(a)&&(e[a]=w(t[a]));return e}function S(t,e,n){if(!Y(e)||!Y(t))return n?w(e):t;for(var i in e)if(e.hasOwnProperty(i)){var r=t[i],o=e[i];!Y(o)||!Y(r)||F(o)||F(r)||j(o)||j(r)||X(o)||X(r)||lt(o)||lt(r)?!n&&i in t||(t[i]=w(e[i])):S(r,o,n)}return t}function M(t,e){for(var n=t[0],i=1,r=t.length;i<r;i++)n=S(n,t[i],e);return n}function I(t,e){if(Object.assign)Object.assign(t,e);else for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n]);return t}function T(t,e,n){for(var i=z(e),r=0;r<i.length;r++){var o=i[r];(n?null!=e[o]:null==t[o])&&(t[o]=e[o])}return t}var C=function(){return v.createCanvas()};function A(t,e){if(t){if(t.indexOf)return t.indexOf(e);for(var n=0,i=t.length;n<i;n++)if(t[n]===e)return n}return-1}function D(t,e){var n=t.prototype;function i(){}for(var r in i.prototype=e.prototype,t.prototype=new i,n)n.hasOwnProperty(r)&&(t.prototype[r]=n[r]);t.prototype.constructor=t,t.superClass=e}function L(t,e,n){if(t="prototype"in t?t.prototype:t,e="prototype"in e?e.prototype:e,Object.getOwnPropertyNames)for(var i=Object.getOwnPropertyNames(e),r=0;r<i.length;r++){var o=i[r];"constructor"!==o&&(n?null!=e[o]:null==t[o])&&(t[o]=e[o])}else T(t,e,n)}function k(t){return!!t&&("string"!=typeof t&&"number"==typeof t.length)}function P(t,e,n){if(t&&e)if(t.forEach&&t.forEach===c)t.forEach(e,n);else if(t.length===+t.length)for(var i=0,r=t.length;i<r;i++)e.call(n,t[i],i,t);else for(var o in t)t.hasOwnProperty(o)&&e.call(n,t[o],o,t)}function O(t,e,n){if(!t)return[];if(!e)return nt(t);if(t.map&&t.map===f)return t.map(e,n);for(var i=[],r=0,o=t.length;r<o;r++)i.push(e.call(n,t[r],r,t));return i}function R(t,e,n,i){if(t&&e){for(var r=0,o=t.length;r<o;r++)n=e.call(i,n,t[r],r,t);return n}}function N(t,e,n){if(!t)return[];if(!e)return nt(t);if(t.filter&&t.filter===p)return t.filter(e,n);for(var i=[],r=0,o=t.length;r<o;r++)e.call(n,t[r],r,t)&&i.push(t[r]);return i}function E(t,e,n){if(t&&e)for(var i=0,r=t.length;i<r;i++)if(e.call(n,t[i],i,t))return t[i]}function z(t){if(!t)return[];if(Object.keys)return Object.keys(t);var e=[];for(var n in t)t.hasOwnProperty(n)&&e.push(n);return e}v.createCanvas=function(){return document.createElement("canvas")};var B=y&&G(y.bind)?y.call.bind(y.bind):function(t,e){for(var n=[],i=2;i<arguments.length;i++)n[i-2]=arguments[i];return function(){return t.apply(e,n.concat(d.call(arguments)))}};function V(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];return function(){return t.apply(this,e.concat(d.call(arguments)))}}function F(t){return Array.isArray?Array.isArray(t):"[object Array]"===u.call(t)}function G(t){return"function"==typeof t}function H(t){return"string"==typeof t}function W(t){return"[object String]"===u.call(t)}function U(t){return"number"==typeof t}function Y(t){var e=typeof t;return"function"===e||!!t&&"object"===e}function X(t){return!!s[u.call(t)]}function Z(t){return!!l[u.call(t)]}function j(t){return"object"==typeof t&&"number"==typeof t.nodeType&&"object"==typeof t.ownerDocument}function q(t){return null!=t.colorStops}function K(t){return null!=t.image}function $(t){return"[object RegExp]"===u.call(t)}function J(t){return t!=t}function Q(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];for(var n=0,i=t.length;n<i;n++)if(null!=t[n])return t[n]}function tt(t,e){return null!=t?t:e}function et(t,e,n){return null!=t?t:null!=e?e:n}function nt(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];return d.apply(t,e)}function it(t){if("number"==typeof t)return[t,t,t,t];var e=t.length;return 2===e?[t[0],t[1],t[0],t[1]]:3===e?[t[0],t[1],t[2],t[1]]:t}function rt(t,e){if(!t)throw new Error(e)}function ot(t){return null==t?null:"function"==typeof t.trim?t.trim():t.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,"")}var at="__ec_primitive__";function st(t){t[at]=!0}function lt(t){return t[at]}var ut=function(){function t(e){this.data={};var n=F(e);this.data={};var i=this;function r(t,e){n?i.set(t,e):i.set(e,t)}e instanceof t?e.each(r):e&&P(e,r)}return t.prototype.get=function(t){return this.data.hasOwnProperty(t)?this.data[t]:null},t.prototype.set=function(t,e){return this.data[t]=e},t.prototype.each=function(t,e){for(var n in this.data)this.data.hasOwnProperty(n)&&t.call(e,this.data[n],n)},t.prototype.keys=function(){return z(this.data)},t.prototype.removeKey=function(t){delete this.data[t]},t}();function ht(t){return new ut(t)}function ct(t,e){for(var n=new t.constructor(t.length+e.length),i=0;i<t.length;i++)n[i]=t[i];var r=t.length;for(i=0;i<e.length;i++)n[i+r]=e[i];return n}function pt(t,e){var n;if(Object.create)n=Object.create(t);else{var i=function(){};i.prototype=t,n=new i}return e&&I(n,e),n}function dt(t,e){return t.hasOwnProperty(e)}function ft(){}var gt=Object.freeze({__proto__:null,$override:m,guid:x,logError:b,clone:w,merge:S,mergeAll:M,extend:I,defaults:T,createCanvas:C,indexOf:A,inherits:D,mixin:L,isArrayLike:k,each:P,map:O,reduce:R,filter:N,find:E,keys:z,bind:B,curry:V,isArray:F,isFunction:G,isString:H,isStringSafe:W,isNumber:U,isObject:Y,isBuiltInObject:X,isTypedArray:Z,isDom:j,isGradientObject:q,isPatternObject:K,isRegExp:$,eqNaN:J,retrieve:Q,retrieve2:tt,retrieve3:et,slice:nt,normalizeCssArray:it,assert:rt,trim:ot,setAsPrimitive:st,isPrimitive:lt,HashMap:ut,createHashMap:ht,concatArray:ct,createObject:pt,hasOwn:dt,noop:ft});function yt(t,e){return null==t&&(t=0),null==e&&(e=0),[t,e]}function vt(t,e){return t[0]=e[0],t[1]=e[1],t}function mt(t){return[t[0],t[1]]}function _t(t,e,n){return t[0]=e,t[1]=n,t}function xt(t,e,n){return t[0]=e[0]+n[0],t[1]=e[1]+n[1],t}function bt(t,e,n,i){return t[0]=e[0]+n[0]*i,t[1]=e[1]+n[1]*i,t}function wt(t,e,n){return t[0]=e[0]-n[0],t[1]=e[1]-n[1],t}function St(t){return Math.sqrt(It(t))}var Mt=St;function It(t){return t[0]*t[0]+t[1]*t[1]}var Tt=It;function Ct(t,e,n){return t[0]=e[0]*n,t[1]=e[1]*n,t}function At(t,e){var n=St(e);return 0===n?(t[0]=0,t[1]=0):(t[0]=e[0]/n,t[1]=e[1]/n),t}function Dt(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}var Lt=Dt;function kt(t,e){return(t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1])}var Pt=kt;function Ot(t,e,n,i){return t[0]=e[0]+i*(n[0]-e[0]),t[1]=e[1]+i*(n[1]-e[1]),t}function Rt(t,e,n){var i=e[0],r=e[1];return t[0]=n[0]*i+n[2]*r+n[4],t[1]=n[1]*i+n[3]*r+n[5],t}function Nt(t,e,n){return t[0]=Math.min(e[0],n[0]),t[1]=Math.min(e[1],n[1]),t}function Et(t,e,n){return t[0]=Math.max(e[0],n[0]),t[1]=Math.max(e[1],n[1]),t}var zt=Object.freeze({__proto__:null,create:yt,copy:vt,clone:mt,set:_t,add:xt,scaleAndAdd:bt,sub:wt,len:St,length:Mt,lenSquare:It,lengthSquare:Tt,mul:function(t,e,n){return t[0]=e[0]*n[0],t[1]=e[1]*n[1],t},div:function(t,e,n){return t[0]=e[0]/n[0],t[1]=e[1]/n[1],t},dot:function(t,e){return t[0]*e[0]+t[1]*e[1]},scale:Ct,normalize:At,distance:Dt,dist:Lt,distanceSquare:kt,distSquare:Pt,negate:function(t,e){return t[0]=-e[0],t[1]=-e[1],t},lerp:Ot,applyTransform:Rt,min:Nt,max:Et}),Bt=function(t,e){this.target=t,this.topTarget=e&&e.topTarget},Vt=function(){function t(t){this.handler=t,t.on("mousedown",this._dragStart,this),t.on("mousemove",this._drag,this),t.on("mouseup",this._dragEnd,this)}return t.prototype._dragStart=function(t){for(var e=t.target;e&&!e.draggable;)e=e.parent;e&&(this._draggingTarget=e,e.dragging=!0,this._x=t.offsetX,this._y=t.offsetY,this.handler.dispatchToElement(new Bt(e,t),"dragstart",t.event))},t.prototype._drag=function(t){var e=this._draggingTarget;if(e){var n=t.offsetX,i=t.offsetY,r=n-this._x,o=i-this._y;this._x=n,this._y=i,e.drift(r,o,t),this.handler.dispatchToElement(new Bt(e,t),"drag",t.event);var a=this.handler.findHover(n,i,e).target,s=this._dropTarget;this._dropTarget=a,e!==a&&(s&&a!==s&&this.handler.dispatchToElement(new Bt(s,t),"dragleave",t.event),a&&a!==s&&this.handler.dispatchToElement(new Bt(a,t),"dragenter",t.event))}},t.prototype._dragEnd=function(t){var e=this._draggingTarget;e&&(e.dragging=!1),this.handler.dispatchToElement(new Bt(e,t),"dragend",t.event),this._dropTarget&&this.handler.dispatchToElement(new Bt(this._dropTarget,t),"drop",t.event),this._draggingTarget=null,this._dropTarget=null},t}(),Ft=function(){function t(t){t&&(this._$eventProcessor=t)}return t.prototype.on=function(t,e,n,i){this._$handlers||(this._$handlers={});var r=this._$handlers;if("function"==typeof e&&(i=n,n=e,e=null),!n||!t)return this;var o=this._$eventProcessor;null!=e&&o&&o.normalizeQuery&&(e=o.normalizeQuery(e)),r[t]||(r[t]=[]);for(var a=0;a<r[t].length;a++)if(r[t][a].h===n)return this;var s={h:n,query:e,ctx:i||this,callAtLast:n.zrEventfulCallAtLast},l=r[t].length-1,u=r[t][l];return u&&u.callAtLast?r[t].splice(l,0,s):r[t].push(s),this},t.prototype.isSilent=function(t){var e=this._$handlers;return!e||!e[t]||!e[t].length},t.prototype.off=function(t,e){var n=this._$handlers;if(!n)return this;if(!t)return this._$handlers={},this;if(e){if(n[t]){for(var i=[],r=0,o=n[t].length;r<o;r++)n[t][r].h!==e&&i.push(n[t][r]);n[t]=i}n[t]&&0===n[t].length&&delete n[t]}else delete n[t];return this},t.prototype.trigger=function(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];if(!this._$handlers)return this;var i=this._$handlers[t],r=this._$eventProcessor;if(i)for(var o=e.length,a=i.length,s=0;s<a;s++){var l=i[s];if(!r||!r.filter||null==l.query||r.filter(t,l.query))switch(o){case 0:l.h.call(l.ctx);break;case 1:l.h.call(l.ctx,e[0]);break;case 2:l.h.call(l.ctx,e[0],e[1]);break;default:l.h.apply(l.ctx,e)}}return r&&r.afterTrigger&&r.afterTrigger(t),this},t.prototype.triggerWithContext=function(t){if(!this._$handlers)return this;var e=this._$handlers[t],n=this._$eventProcessor;if(e)for(var i=arguments,r=i.length,o=i[r-1],a=e.length,s=0;s<a;s++){var l=e[s];if(!n||!n.filter||null==l.query||n.filter(t,l.query))switch(r){case 0:l.h.call(o);break;case 1:l.h.call(o,i[0]);break;case 2:l.h.call(o,i[0],i[1]);break;default:l.h.apply(o,i.slice(1,r-1))}}return n&&n.afterTrigger&&n.afterTrigger(t),this},t}(),Gt=Math.log(2);function Ht(t,e,n,i,r,o){var a=i+"-"+r,s=t.length;if(o.hasOwnProperty(a))return o[a];if(1===e){var l=Math.round(Math.log((1<<s)-1&~r)/Gt);return t[n][l]}for(var u=i|1<<n,h=n+1;i&1<<h;)h++;for(var c=0,p=0,d=0;p<s;p++){var f=1<<p;f&r||(c+=(d%2?-1:1)*t[n][p]*Ht(t,e-1,h,u,r|f,o),d++)}return o[a]=c,c}function Wt(t,e){var n=[[t[0],t[1],1,0,0,0,-e[0]*t[0],-e[0]*t[1]],[0,0,0,t[0],t[1],1,-e[1]*t[0],-e[1]*t[1]],[t[2],t[3],1,0,0,0,-e[2]*t[2],-e[2]*t[3]],[0,0,0,t[2],t[3],1,-e[3]*t[2],-e[3]*t[3]],[t[4],t[5],1,0,0,0,-e[4]*t[4],-e[4]*t[5]],[0,0,0,t[4],t[5],1,-e[5]*t[4],-e[5]*t[5]],[t[6],t[7],1,0,0,0,-e[6]*t[6],-e[6]*t[7]],[0,0,0,t[6],t[7],1,-e[7]*t[6],-e[7]*t[7]]],i={},r=Ht(n,8,0,0,0,i);if(0!==r){for(var o=[],a=0;a<8;a++)for(var s=0;s<8;s++)null==o[s]&&(o[s]=0),o[s]+=((a+s)%2?-1:1)*Ht(n,7,0===a?1:0,1<<a,1<<s,i)/r*e[a];return function(t,e,n){var i=e*o[6]+n*o[7]+1;t[0]=(e*o[0]+n*o[1]+o[2])/i,t[1]=(e*o[3]+n*o[4]+o[5])/i}}}var Ut=[];function Yt(t,e,n,i,r){if(e.getBoundingClientRect&&a.domSupported&&!Xt(e)){var o=e.___zrEVENTSAVED||(e.___zrEVENTSAVED={}),s=function(t,e,n){for(var i=n?"invTrans":"trans",r=e[i],o=e.srcCoords,a=[],s=[],l=!0,u=0;u<4;u++){var h=t[u].getBoundingClientRect(),c=2*u,p=h.left,d=h.top;a.push(p,d),l=l&&o&&p===o[c]&&d===o[c+1],s.push(t[u].offsetLeft,t[u].offsetTop)}return l&&r?r:(e.srcCoords=a,e[i]=n?Wt(s,a):Wt(a,s))}(function(t,e){var n=e.markers;if(n)return n;n=e.markers=[];for(var i=["left","right"],r=["top","bottom"],o=0;o<4;o++){var a=document.createElement("div"),s=o%2,l=(o>>1)%2;a.style.cssText=["position: absolute","visibility: hidden","padding: 0","margin: 0","border-width: 0","user-select: none","width:0","height:0",i[s]+":0",r[l]+":0",i[1-s]+":auto",r[1-l]+":auto",""].join("!important;"),t.appendChild(a),n.push(a)}return n}(e,o),o,r);if(s)return s(t,n,i),!0}return!1}function Xt(t){return"CANVAS"===t.nodeName.toUpperCase()}var Zt="undefined"!=typeof window&&!!window.addEventListener,jt=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,qt=[];function Kt(t,e,n,i){return n=n||{},i||!a.canvasSupported?$t(t,e,n):a.browser.firefox&&null!=e.layerX&&e.layerX!==e.offsetX?(n.zrX=e.layerX,n.zrY=e.layerY):null!=e.offsetX?(n.zrX=e.offsetX,n.zrY=e.offsetY):$t(t,e,n),n}function $t(t,e,n){if(a.domSupported&&t.getBoundingClientRect){var i=e.clientX,r=e.clientY;if(Xt(t)){var o=t.getBoundingClientRect();return n.zrX=i-o.left,void(n.zrY=r-o.top)}if(Yt(qt,t,i,r))return n.zrX=qt[0],void(n.zrY=qt[1])}n.zrX=n.zrY=0}function Jt(t){return t||window.event}function Qt(t,e,n){if(null!=(e=Jt(e)).zrX)return e;var i=e.type;if(i&&i.indexOf("touch")>=0){var r="touchend"!==i?e.targetTouches[0]:e.changedTouches[0];r&&Kt(t,r,e,n)}else{Kt(t,e,e,n);var o=function(t){var e=t.wheelDelta;if(e)return e;var n=t.deltaX,i=t.deltaY;if(null==n||null==i)return e;return 3*(0!==i?Math.abs(i):Math.abs(n))*(i>0?-1:i<0?1:n>0?-1:1)}(e);e.zrDelta=o?o/120:-(e.detail||0)/3}var a=e.button;return null==e.which&&void 0!==a&&jt.test(e.type)&&(e.which=1&a?1:2&a?3:4&a?2:0),e}function te(t,e,n,i){Zt?t.addEventListener(e,n,i):t.attachEvent("on"+e,n)}var ee=Zt?function(t){t.preventDefault(),t.stopPropagation(),t.cancelBubble=!0}:function(t){t.returnValue=!1,t.cancelBubble=!0};function ne(t){return 2===t.which||3===t.which}var ie=function(){function t(){this._track=[]}return t.prototype.recognize=function(t,e,n){return this._doTrack(t,e,n),this._recognize(t)},t.prototype.clear=function(){return this._track.length=0,this},t.prototype._doTrack=function(t,e,n){var i=t.touches;if(i){for(var r={points:[],touches:[],target:e,event:t},o=0,a=i.length;o<a;o++){var s=i[o],l=Kt(n,s,{});r.points.push([l.zrX,l.zrY]),r.touches.push(s)}this._track.push(r)}},t.prototype._recognize=function(t){for(var e in oe)if(oe.hasOwnProperty(e)){var n=oe[e](this._track,t);if(n)return n}},t}();function re(t){var e=t[1][0]-t[0][0],n=t[1][1]-t[0][1];return Math.sqrt(e*e+n*n)}var oe={pinch:function(t,e){var n=t.length;if(n){var i,r=(t[n-1]||{}).points,o=(t[n-2]||{}).points||r;if(o&&o.length>1&&r&&r.length>1){var a=re(r)/re(o);!isFinite(a)&&(a=1),e.pinchScale=a;var s=[((i=r)[0][0]+i[1][0])/2,(i[0][1]+i[1][1])/2];return e.pinchX=s[0],e.pinchY=s[1],{type:"pinch",target:t[0].target,event:e}}}}},ae="silent";function se(){ee(this.event)}var le=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.handler=null,e}return n(e,t),e.prototype.dispose=function(){},e.prototype.setCursor=function(){},e}(Ft),ue=function(t,e){this.x=t,this.y=e},he=["click","dblclick","mousewheel","mouseout","mouseup","mousedown","mousemove","contextmenu"],ce=function(t){function e(e,n,i,r){var o=t.call(this)||this;return o._hovered=new ue(0,0),o.storage=e,o.painter=n,o.painterRoot=r,i=i||new le,o.proxy=null,o.setHandlerProxy(i),o._draggingMgr=new Vt(o),o}return n(e,t),e.prototype.setHandlerProxy=function(t){this.proxy&&this.proxy.dispose(),t&&(P(he,(function(e){t.on&&t.on(e,this[e],this)}),this),t.handler=this),this.proxy=t},e.prototype.mousemove=function(t){var e=t.zrX,n=t.zrY,i=de(this,e,n),r=this._hovered,o=r.target;o&&!o.__zr&&(o=(r=this.findHover(r.x,r.y)).target);var a=this._hovered=i?new ue(e,n):this.findHover(e,n),s=a.target,l=this.proxy;l.setCursor&&l.setCursor(s?s.cursor:"default"),o&&s!==o&&this.dispatchToElement(r,"mouseout",t),this.dispatchToElement(a,"mousemove",t),s&&s!==o&&this.dispatchToElement(a,"mouseover",t)},e.prototype.mouseout=function(t){var e=t.zrEventControl;"only_globalout"!==e&&this.dispatchToElement(this._hovered,"mouseout",t),"no_globalout"!==e&&this.trigger("globalout",{type:"globalout",event:t})},e.prototype.resize=function(){this._hovered=new ue(0,0)},e.prototype.dispatch=function(t,e){var n=this[t];n&&n.call(this,e)},e.prototype.dispose=function(){this.proxy.dispose(),this.storage=null,this.proxy=null,this.painter=null},e.prototype.setCursorStyle=function(t){var e=this.proxy;e.setCursor&&e.setCursor(t)},e.prototype.dispatchToElement=function(t,e,n){var i=(t=t||{}).target;if(!i||!i.silent){for(var r="on"+e,o=function(t,e,n){return{type:t,event:n,target:e.target,topTarget:e.topTarget,cancelBubble:!1,offsetX:n.zrX,offsetY:n.zrY,gestureEvent:n.gestureEvent,pinchX:n.pinchX,pinchY:n.pinchY,pinchScale:n.pinchScale,wheelDelta:n.zrDelta,zrByTouch:n.zrByTouch,which:n.which,stop:se}}(e,t,n);i&&(i[r]&&(o.cancelBubble=!!i[r].call(i,o)),i.trigger(e,o),i=i.__hostTarget?i.__hostTarget:i.parent,!o.cancelBubble););o.cancelBubble||(this.trigger(e,o),this.painter&&this.painter.eachOtherLayer&&this.painter.eachOtherLayer((function(t){"function"==typeof t[r]&&t[r].call(t,o),t.trigger&&t.trigger(e,o)})))}},e.prototype.findHover=function(t,e,n){for(var i=this.storage.getDisplayList(),r=new ue(t,e),o=i.length-1;o>=0;o--){var a=void 0;if(i[o]!==n&&!i[o].ignore&&(a=pe(i[o],t,e))&&(!r.topTarget&&(r.topTarget=i[o]),a!==ae)){r.target=i[o];break}}return r},e.prototype.processGesture=function(t,e){this._gestureMgr||(this._gestureMgr=new ie);var n=this._gestureMgr;"start"===e&&n.clear();var i=n.recognize(t,this.findHover(t.zrX,t.zrY,null).target,this.proxy.dom);if("end"===e&&n.clear(),i){var r=i.type;t.gestureEvent=r;var o=new ue;o.target=i.target,this.dispatchToElement(o,r,i.event)}},e}(Ft);function pe(t,e,n){if(t[t.rectHover?"rectContain":"contain"](e,n)){for(var i=t,r=void 0,o=!1;i;){if(i.ignoreClip&&(o=!0),!o){var a=i.getClipPath();if(a&&!a.contain(e,n))return!1;i.silent&&(r=!0)}var s=i.__hostTarget;i=s||i.parent}return!r||ae}return!1}function de(t,e,n){var i=t.painter;return e<0||e>i.getWidth()||n<0||n>i.getHeight()}function fe(){return[1,0,0,1,0,0]}function ge(t){return t[0]=1,t[1]=0,t[2]=0,t[3]=1,t[4]=0,t[5]=0,t}function ye(t,e){return t[0]=e[0],t[1]=e[1],t[2]=e[2],t[3]=e[3],t[4]=e[4],t[5]=e[5],t}function ve(t,e,n){var i=e[0]*n[0]+e[2]*n[1],r=e[1]*n[0]+e[3]*n[1],o=e[0]*n[2]+e[2]*n[3],a=e[1]*n[2]+e[3]*n[3],s=e[0]*n[4]+e[2]*n[5]+e[4],l=e[1]*n[4]+e[3]*n[5]+e[5];return t[0]=i,t[1]=r,t[2]=o,t[3]=a,t[4]=s,t[5]=l,t}function me(t,e,n){return t[0]=e[0],t[1]=e[1],t[2]=e[2],t[3]=e[3],t[4]=e[4]+n[0],t[5]=e[5]+n[1],t}function _e(t,e,n){var i=e[0],r=e[2],o=e[4],a=e[1],s=e[3],l=e[5],u=Math.sin(n),h=Math.cos(n);return t[0]=i*h+a*u,t[1]=-i*u+a*h,t[2]=r*h+s*u,t[3]=-r*u+h*s,t[4]=h*o+u*l,t[5]=h*l-u*o,t}function xe(t,e,n){var i=n[0],r=n[1];return t[0]=e[0]*i,t[1]=e[1]*r,t[2]=e[2]*i,t[3]=e[3]*r,t[4]=e[4]*i,t[5]=e[5]*r,t}function be(t,e){var n=e[0],i=e[2],r=e[4],o=e[1],a=e[3],s=e[5],l=n*a-o*i;return l?(l=1/l,t[0]=a*l,t[1]=-o*l,t[2]=-i*l,t[3]=n*l,t[4]=(i*s-a*r)*l,t[5]=(o*r-n*s)*l,t):null}function we(t){var e=[1,0,0,1,0,0];return ye(e,t),e}P(["click","mousedown","mouseup","mousewheel","dblclick","contextmenu"],(function(t){ce.prototype[t]=function(e){var n,i,r=e.zrX,o=e.zrY,a=de(this,r,o);if("mouseup"===t&&a||(i=(n=this.findHover(r,o)).target),"mousedown"===t)this._downEl=i,this._downPoint=[e.zrX,e.zrY],this._upEl=i;else if("mouseup"===t)this._upEl=i;else if("click"===t){if(this._downEl!==this._upEl||!this._downPoint||Lt(this._downPoint,[e.zrX,e.zrY])>4)return;this._downPoint=null}this.dispatchToElement(n,t,e)}}));var Se=Object.freeze({__proto__:null,create:fe,identity:ge,copy:ye,mul:ve,translate:me,rotate:_e,scale:xe,invert:be,clone:we}),Me=ge,Ie=5e-5;function Te(t){return t>Ie||t<-5e-5}var Ce=[],Ae=[],De=[1,0,0,1,0,0],Le=Math.abs,ke=function(){function t(){}return t.prototype.setPosition=function(t){this.x=t[0],this.y=t[1]},t.prototype.setScale=function(t){this.scaleX=t[0],this.scaleY=t[1]},t.prototype.setOrigin=function(t){this.originX=t[0],this.originY=t[1]},t.prototype.needLocalTransform=function(){return Te(this.rotation)||Te(this.x)||Te(this.y)||Te(this.scaleX-1)||Te(this.scaleY-1)},t.prototype.updateTransform=function(){var t=this.parent,e=t&&t.transform,n=this.needLocalTransform(),i=this.transform;n||e?(i=i||[1,0,0,1,0,0],n?this.getLocalTransform(i):Me(i),e&&(n?ve(i,t.transform,i):ye(i,t.transform)),this.transform=i,this._resolveGlobalScaleRatio(i)):i&&Me(i)},t.prototype._resolveGlobalScaleRatio=function(t){var e=this.globalScaleRatio;if(null!=e&&1!==e){this.getGlobalScale(Ce);var n=Ce[0]<0?-1:1,i=Ce[1]<0?-1:1,r=((Ce[0]-n)*e+n)/Ce[0]||0,o=((Ce[1]-i)*e+i)/Ce[1]||0;t[0]*=r,t[1]*=r,t[2]*=o,t[3]*=o}this.invTransform=this.invTransform||[1,0,0,1,0,0],be(this.invTransform,t)},t.prototype.getLocalTransform=function(e){return t.getLocalTransform(this,e)},t.prototype.getComputedTransform=function(){for(var t=this,e=[];t;)e.push(t),t=t.parent;for(;t=e.pop();)t.updateTransform();return this.transform},t.prototype.setLocalTransform=function(t){if(t){var e=t[0]*t[0]+t[1]*t[1],n=t[2]*t[2]+t[3]*t[3];Te(e-1)&&(e=Math.sqrt(e)),Te(n-1)&&(n=Math.sqrt(n)),t[0]<0&&(e=-e),t[3]<0&&(n=-n),this.rotation=Math.atan2(-t[1]/n,t[0]/e),e<0&&n<0&&(this.rotation+=Math.PI,e=-e,n=-n),this.x=t[4],this.y=t[5],this.scaleX=e,this.scaleY=n}},t.prototype.decomposeTransform=function(){if(this.transform){var t=this.parent,e=this.transform;t&&t.transform&&(ve(Ae,t.invTransform,e),e=Ae);var n=this.originX,i=this.originY;(n||i)&&(De[4]=n,De[5]=i,ve(Ae,e,De),Ae[4]-=n,Ae[5]-=i,e=Ae),this.setLocalTransform(e)}},t.prototype.getGlobalScale=function(t){var e=this.transform;return t=t||[],e?(t[0]=Math.sqrt(e[0]*e[0]+e[1]*e[1]),t[1]=Math.sqrt(e[2]*e[2]+e[3]*e[3]),e[0]<0&&(t[0]=-t[0]),e[3]<0&&(t[1]=-t[1]),t):(t[0]=1,t[1]=1,t)},t.prototype.transformCoordToLocal=function(t,e){var n=[t,e],i=this.invTransform;return i&&Rt(n,n,i),n},t.prototype.transformCoordToGlobal=function(t,e){var n=[t,e],i=this.transform;return i&&Rt(n,n,i),n},t.prototype.getLineScale=function(){var t=this.transform;return t&&Le(t[0]-1)>1e-10&&Le(t[3]-1)>1e-10?Math.sqrt(Le(t[0]*t[3]-t[2]*t[1])):1},t.getLocalTransform=function(t,e){Me(e=e||[]);var n=t.originX||0,i=t.originY||0,r=t.scaleX,o=t.scaleY,a=t.rotation||0,s=t.x,l=t.y;return e[4]-=n,e[5]-=i,e[0]*=r,e[1]*=o,e[2]*=r,e[3]*=o,e[4]*=r,e[5]*=o,a&&_e(e,e,a),e[4]+=n,e[5]+=i,e[4]+=s,e[5]+=l,e},t.initDefaultProps=function(){var e=t.prototype;e.x=0,e.y=0,e.scaleX=1,e.scaleY=1,e.originX=0,e.originY=0,e.rotation=0,e.globalScaleRatio=1}(),t}(),Pe={linear:function(t){return t},quadraticIn:function(t){return t*t},quadraticOut:function(t){return t*(2-t)},quadraticInOut:function(t){return(t*=2)<1?.5*t*t:-.5*(--t*(t-2)-1)},cubicIn:function(t){return t*t*t},cubicOut:function(t){return--t*t*t+1},cubicInOut:function(t){return(t*=2)<1?.5*t*t*t:.5*((t-=2)*t*t+2)},quarticIn:function(t){return t*t*t*t},quarticOut:function(t){return 1- --t*t*t*t},quarticInOut:function(t){return(t*=2)<1?.5*t*t*t*t:-.5*((t-=2)*t*t*t-2)},quinticIn:function(t){return t*t*t*t*t},quinticOut:function(t){return--t*t*t*t*t+1},quinticInOut:function(t){return(t*=2)<1?.5*t*t*t*t*t:.5*((t-=2)*t*t*t*t+2)},sinusoidalIn:function(t){return 1-Math.cos(t*Math.PI/2)},sinusoidalOut:function(t){return Math.sin(t*Math.PI/2)},sinusoidalInOut:function(t){return.5*(1-Math.cos(Math.PI*t))},exponentialIn:function(t){return 0===t?0:Math.pow(1024,t-1)},exponentialOut:function(t){return 1===t?1:1-Math.pow(2,-10*t)},exponentialInOut:function(t){return 0===t?0:1===t?1:(t*=2)<1?.5*Math.pow(1024,t-1):.5*(2-Math.pow(2,-10*(t-1)))},circularIn:function(t){return 1-Math.sqrt(1-t*t)},circularOut:function(t){return Math.sqrt(1- --t*t)},circularInOut:function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},elasticIn:function(t){var e,n=.1;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=.1):e=.4*Math.asin(1/n)/(2*Math.PI),-n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*(2*Math.PI)/.4))},elasticOut:function(t){var e,n=.1;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=.1):e=.4*Math.asin(1/n)/(2*Math.PI),n*Math.pow(2,-10*t)*Math.sin((t-e)*(2*Math.PI)/.4)+1)},elasticInOut:function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=.1):e=i*Math.asin(1/n)/(2*Math.PI),(t*=2)<1?n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*(2*Math.PI)/i)*-.5:n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*(2*Math.PI)/i)*.5+1)},backIn:function(t){var e=1.70158;return t*t*((e+1)*t-e)},backOut:function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},backInOut:function(t){var e=2.5949095;return(t*=2)<1?t*t*((e+1)*t-e)*.5:.5*((t-=2)*t*((e+1)*t+e)+2)},bounceIn:function(t){return 1-Pe.bounceOut(1-t)},bounceOut:function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},bounceInOut:function(t){return t<.5?.5*Pe.bounceIn(2*t):.5*Pe.bounceOut(2*t-1)+.5}},Oe=function(){function t(t){this._initialized=!1,this._startTime=0,this._pausedTime=0,this._paused=!1,this._life=t.life||1e3,this._delay=t.delay||0,this.loop=null!=t.loop&&t.loop,this.gap=t.gap||0,this.easing=t.easing||"linear",this.onframe=t.onframe,this.ondestroy=t.ondestroy,this.onrestart=t.onrestart}return t.prototype.step=function(t,e){if(this._initialized||(this._startTime=t+this._delay,this._initialized=!0),!this._paused){var n=(t-this._startTime-this._pausedTime)/this._life;n<0&&(n=0),n=Math.min(n,1);var i=this.easing,r="string"==typeof i?Pe[i]:i,o="function"==typeof r?r(n):n;if(this.onframe&&this.onframe(o),1===n){if(!this.loop)return!0;this._restart(t),this.onrestart&&this.onrestart()}return!1}this._pausedTime+=e},t.prototype._restart=function(t){var e=(t-this._startTime-this._pausedTime)%this._life;this._startTime=t-e+this.gap,this._pausedTime=0},t.prototype.pause=function(){this._paused=!0},t.prototype.resume=function(){this._paused=!1},t}(),Re=function(t){this.value=t},Ne=function(){function t(){this._len=0}return t.prototype.insert=function(t){var e=new Re(t);return this.insertEntry(e),e},t.prototype.insertEntry=function(t){this.head?(this.tail.next=t,t.prev=this.tail,t.next=null,this.tail=t):this.head=this.tail=t,this._len++},t.prototype.remove=function(t){var e=t.prev,n=t.next;e?e.next=n:this.head=n,n?n.prev=e:this.tail=e,t.next=t.prev=null,this._len--},t.prototype.len=function(){return this._len},t.prototype.clear=function(){this.head=this.tail=null,this._len=0},t}(),Ee=function(){function t(t){this._list=new Ne,this._maxSize=10,this._map={},this._maxSize=t}return t.prototype.put=function(t,e){var n=this._list,i=this._map,r=null;if(null==i[t]){var o=n.len(),a=this._lastRemovedEntry;if(o>=this._maxSize&&o>0){var s=n.head;n.remove(s),delete i[s.key],r=s.value,this._lastRemovedEntry=s}a?a.value=e:a=new Re(e),a.key=t,n.insertEntry(a),i[t]=a}return r},t.prototype.get=function(t){var e=this._map[t],n=this._list;if(null!=e)return e!==n.tail&&(n.remove(e),n.insertEntry(e)),e.value},t.prototype.clear=function(){this._list.clear(),this._map={}},t.prototype.len=function(){return this._list.len()},t}(),ze={transparent:[0,0,0,0],aliceblue:[240,248,255,1],antiquewhite:[250,235,215,1],aqua:[0,255,255,1],aquamarine:[127,255,212,1],azure:[240,255,255,1],beige:[245,245,220,1],bisque:[255,228,196,1],black:[0,0,0,1],blanchedalmond:[255,235,205,1],blue:[0,0,255,1],blueviolet:[138,43,226,1],brown:[165,42,42,1],burlywood:[222,184,135,1],cadetblue:[95,158,160,1],chartreuse:[127,255,0,1],chocolate:[210,105,30,1],coral:[255,127,80,1],cornflowerblue:[100,149,237,1],cornsilk:[255,248,220,1],crimson:[220,20,60,1],cyan:[0,255,255,1],darkblue:[0,0,139,1],darkcyan:[0,139,139,1],darkgoldenrod:[184,134,11,1],darkgray:[169,169,169,1],darkgreen:[0,100,0,1],darkgrey:[169,169,169,1],darkkhaki:[189,183,107,1],darkmagenta:[139,0,139,1],darkolivegreen:[85,107,47,1],darkorange:[255,140,0,1],darkorchid:[153,50,204,1],darkred:[139,0,0,1],darksalmon:[233,150,122,1],darkseagreen:[143,188,143,1],darkslateblue:[72,61,139,1],darkslategray:[47,79,79,1],darkslategrey:[47,79,79,1],darkturquoise:[0,206,209,1],darkviolet:[148,0,211,1],deeppink:[255,20,147,1],deepskyblue:[0,191,255,1],dimgray:[105,105,105,1],dimgrey:[105,105,105,1],dodgerblue:[30,144,255,1],firebrick:[178,34,34,1],floralwhite:[255,250,240,1],forestgreen:[34,139,34,1],fuchsia:[255,0,255,1],gainsboro:[220,220,220,1],ghostwhite:[248,248,255,1],gold:[255,215,0,1],goldenrod:[218,165,32,1],gray:[128,128,128,1],green:[0,128,0,1],greenyellow:[173,255,47,1],grey:[128,128,128,1],honeydew:[240,255,240,1],hotpink:[255,105,180,1],indianred:[205,92,92,1],indigo:[75,0,130,1],ivory:[255,255,240,1],khaki:[240,230,140,1],lavender:[230,230,250,1],lavenderblush:[255,240,245,1],lawngreen:[124,252,0,1],lemonchiffon:[255,250,205,1],lightblue:[173,216,230,1],lightcoral:[240,128,128,1],lightcyan:[224,255,255,1],lightgoldenrodyellow:[250,250,210,1],lightgray:[211,211,211,1],lightgreen:[144,238,144,1],lightgrey:[211,211,211,1],lightpink:[255,182,193,1],lightsalmon:[255,160,122,1],lightseagreen:[32,178,170,1],lightskyblue:[135,206,250,1],lightslategray:[119,136,153,1],lightslategrey:[119,136,153,1],lightste-elblue:[176,196,222,1],lightyellow:[255,255,224,1],lime:[0,255,0,1],limegreen:[50,205,50,1],linen:[250,240,230,1],magenta:[255,0,255,1],maroon:[128,0,0,1],mediumaquamarine:[102,205,170,1],mediumblue:[0,0,205,1],mediumorchid:[186,85,211,1],mediumpurple:[147,112,219,1],mediumseagreen:[60,179,113,1],mediumslateblue:[123,104,238,1],mediumspringgreen:[0,250,154,1],mediumturquoise:[72,209,204,1],mediumvioletred:[199,21,133,1],midnightblue:[25,25,112,1],mintcream:[245,255,250,1],mistyrose:[255,228,225,1],moccasin:[255,228,181,1],navajowhite:[255,222,173,1],navy:[0,0,128,1],oldlace:[253,245,230,1],olive:[128,128,0,1],olivedrab:[107,142,35,1],orange:[255,165,0,1],orangered:[255,69,0,1],orchid:[218,112,214,1],palegoldenrod:[238,232,170,1],palegreen:[152,251,152,1],paleturquoise:[175,238,238,1],palevioletred:[219,112,147,1],papayawhip:[255,239,213,1],peachpuff:[255,218,185,1],peru:[205,133,63,1],pink:[255,192,203,1],plum:[221,160,221,1],powderblue:[176,224,230,1],purple:[128,0,128,1],red:[255,0,0,1],rosybrown:[188,143,143,1],royalblue:[65,105,225,1],saddlebrown:[139,69,19,1],salmon:[250,128,114,1],sandybrown:[244,164,96,1],seagreen:[46,139,87,1],seashell:[255,245,238,1],sienna:[160,82,45,1],silver:[192,192,192,1],skyblue:[135,206,235,1],slateblue:[106,90,205,1],slategray:[112,128,144,1],slategrey:[112,128,144,1],snow:[255,250,250,1],springgreen:[0,255,127,1],steelblue:[70,130,180,1],tan:[210,180,140,1],teal:[0,128,128,1],thistle:[216,191,216,1],tomato:[255,99,71,1],turquoise:[64,224,208,1],violet:[238,130,238,1],wheat:[245,222,179,1],white:[255,255,255,1],whitesmoke:[245,245,245,1],yellow:[255,255,0,1],yellowgreen:[154,205,50,1]};function Be(t){return(t=Math.round(t))<0?0:t>255?255:t}function Ve(t){return t<0?0:t>1?1:t}function Fe(t){var e=t;return e.length&&"%"===e.charAt(e.length-1)?Be(parseFloat(e)/100*255):Be(parseInt(e,10))}function Ge(t){var e=t;return e.length&&"%"===e.charAt(e.length-1)?Ve(parseFloat(e)/100):Ve(parseFloat(e))}function He(t,e,n){return n<0?n+=1:n>1&&(n-=1),6*n<1?t+(e-t)*n*6:2*n<1?e:3*n<2?t+(e-t)*(2/3-n)*6:t}function We(t,e,n){return t+(e-t)*n}function Ue(t,e,n,i,r){return t[0]=e,t[1]=n,t[2]=i,t[3]=r,t}function Ye(t,e){return t[0]=e[0],t[1]=e[1],t[2]=e[2],t[3]=e[3],t}var Xe=new Ee(20),Ze=null;function je(t,e){Ze&&Ye(Ze,e),Ze=Xe.put(t,Ze||e.slice())}function qe(t,e){if(t){e=e||[];var n=Xe.get(t);if(n)return Ye(e,n);var i=(t+="").replace(/ /g,"").toLowerCase();if(i in ze)return Ye(e,ze[i]),je(t,e),e;var r,o=i.length;if("#"===i.charAt(0))return 4===o||5===o?(r=parseInt(i.slice(1,4),16))>=0&&r<=4095?(Ue(e,(3840&r)>>4|(3840&r)>>8,240&r|(240&r)>>4,15&r|(15&r)<<4,5===o?parseInt(i.slice(4),16)/15:1),je(t,e),e):void Ue(e,0,0,0,1):7===o||9===o?(r=parseInt(i.slice(1,7),16))>=0&&r<=16777215?(Ue(e,(16711680&r)>>16,(65280&r)>>8,255&r,9===o?parseInt(i.slice(7),16)/255:1),je(t,e),e):void Ue(e,0,0,0,1):void 0;var a=i.indexOf("("),s=i.indexOf(")");if(-1!==a&&s+1===o){var l=i.substr(0,a),u=i.substr(a+1,s-(a+1)).split(","),h=1;switch(l){case"rgba":if(4!==u.length)return 3===u.length?Ue(e,+u[0],+u[1],+u[2],1):Ue(e,0,0,0,1);h=Ge(u.pop());case"rgb":return 3!==u.length?void Ue(e,0,0,0,1):(Ue(e,Fe(u[0]),Fe(u[1]),Fe(u[2]),h),je(t,e),e);case"hsla":return 4!==u.length?void Ue(e,0,0,0,1):(u[3]=Ge(u[3]),Ke(u,e),je(t,e),e);case"hsl":return 3!==u.length?void Ue(e,0,0,0,1):(Ke(u,e),je(t,e),e);default:return}}Ue(e,0,0,0,1)}}function Ke(t,e){var n=(parseFloat(t[0])%360+360)%360/360,i=Ge(t[1]),r=Ge(t[2]),o=r<=.5?r*(i+1):r+i-r*i,a=2*r-o;return Ue(e=e||[],Be(255*He(a,o,n+1/3)),Be(255*He(a,o,n)),Be(255*He(a,o,n-1/3)),1),4===t.length&&(e[3]=t[3]),e}function $e(t,e){var n=qe(t);if(n){for(var i=0;i<3;i++)n[i]=e<0?n[i]*(1-e)|0:(255-n[i])*e+n[i]|0,n[i]>255?n[i]=255:n[i]<0&&(n[i]=0);return an(n,4===n.length?"rgba":"rgb")}}function Je(t){var e=qe(t);if(e)return((1<<24)+(e[0]<<16)+(e[1]<<8)+ +e[2]).toString(16).slice(1)}function Qe(t,e,n){if(e&&e.length&&t>=0&&t<=1){n=n||[];var i=t*(e.length-1),r=Math.floor(i),o=Math.ceil(i),a=e[r],s=e[o],l=i-r;return n[0]=Be(We(a[0],s[0],l)),n[1]=Be(We(a[1],s[1],l)),n[2]=Be(We(a[2],s[2],l)),n[3]=Ve(We(a[3],s[3],l)),n}}var tn=Qe;function en(t,e,n){if(e&&e.length&&t>=0&&t<=1){var i=t*(e.length-1),r=Math.floor(i),o=Math.ceil(i),a=qe(e[r]),s=qe(e[o]),l=i-r,u=an([Be(We(a[0],s[0],l)),Be(We(a[1],s[1],l)),Be(We(a[2],s[2],l)),Ve(We(a[3],s[3],l))],"rgba");return n?{color:u,leftIndex:r,rightIndex:o,value:i}:u}}var nn=en;function rn(t,e,n,i){var r=qe(t);if(t)return r=function(t){if(t){var e,n,i=t[0]/255,r=t[1]/255,o=t[2]/255,a=Math.min(i,r,o),s=Math.max(i,r,o),l=s-a,u=(s+a)/2;if(0===l)e=0,n=0;else{n=u<.5?l/(s+a):l/(2-s-a);var h=((s-i)/6+l/2)/l,c=((s-r)/6+l/2)/l,p=((s-o)/6+l/2)/l;i===s?e=p-c:r===s?e=1/3+h-p:o===s&&(e=2/3+c-h),e<0&&(e+=1),e>1&&(e-=1)}var d=[360*e,n,u];return null!=t[3]&&d.push(t[3]),d}}(r),null!=e&&(r[0]=function(t){return(t=Math.round(t))<0?0:t>360?360:t}(e)),null!=n&&(r[1]=Ge(n)),null!=i&&(r[2]=Ge(i)),an(Ke(r),"rgba")}function on(t,e){var n=qe(t);if(n&&null!=e)return n[3]=Ve(e),an(n,"rgba")}function an(t,e){if(t&&t.length){var n=t[0]+","+t[1]+","+t[2];return"rgba"!==e&&"hsva"!==e&&"hsla"!==e||(n+=","+t[3]),e+"("+n+")"}}function sn(t,e){var n=qe(t);return n?(.299*n[0]+.587*n[1]+.114*n[2])*n[3]/255+(1-n[3])*e:0}var ln=Object.freeze({__proto__:null,parse:qe,lift:$e,toHex:Je,fastLerp:Qe,fastMapToColor:tn,lerp:en,mapToColor:nn,modifyHSL:rn,modifyAlpha:on,stringify:an,lum:sn,random:function(){return"rgb("+Math.round(255*Math.random())+","+Math.round(255*Math.random())+","+Math.round(255*Math.random())+")"}}),un=Array.prototype.slice;function hn(t,e,n){return(e-t)*n+t}function cn(t,e,n,i){for(var r=e.length,o=0;o<r;o++)t[o]=hn(e[o],n[o],i)}function pn(t,e,n,i){for(var r=e.length,o=0;o<r;o++)t[o]=e[o]+n[o]*i;return t}function dn(t,e,n,i){for(var r=e.length,o=r&&e[0].length,a=0;a<r;a++){t[a]||(t[a]=[]);for(var s=0;s<o;s++)t[a][s]=e[a][s]+n[a][s]*i}return t}function fn(t,e,n){var i=t,r=e;if(i.push&&r.push){var o=i.length,a=r.length;if(o!==a)if(o>a)i.length=a;else for(var s=o;s<a;s++)i.push(1===n?r[s]:un.call(r[s]));var l=i[0]&&i[0].length;for(s=0;s<i.length;s++)if(1===n)isNaN(i[s])&&(i[s]=r[s]);else for(var u=0;u<l;u++)isNaN(i[s][u])&&(i[s][u]=r[s][u])}}function gn(t,e){var n=t.length;if(n!==e.length)return!1;for(var i=0;i<n;i++)if(t[i]!==e[i])return!1;return!0}function yn(t,e,n,i,r,o,a){var s=.5*(n-t),l=.5*(i-e);return(2*(e-n)+s+l)*a+(-3*(e-n)-2*s-l)*o+s*r+e}function vn(t,e,n,i,r,o,a,s){for(var l=e.length,u=0;u<l;u++)t[u]=yn(e[u],n[u],i[u],r[u],o,a,s)}function mn(t){if(k(t)){var e=t.length;if(k(t[0])){for(var n=[],i=0;i<e;i++)n.push(un.call(t[i]));return n}return un.call(t)}return t}function _n(t){return t[0]=Math.floor(t[0]),t[1]=Math.floor(t[1]),t[2]=Math.floor(t[2]),"rgba("+t.join(",")+")"}var xn,bn,wn=[0,0,0,0],Sn=function(){function t(t){this.keyframes=[],this.maxTime=0,this.arrDim=0,this.interpolable=!0,this._needsSort=!1,this._isAllValueEqual=!0,this._lastFrame=0,this._lastFramePercent=0,this.propName=t}return t.prototype.isFinished=function(){return this._finished},t.prototype.setFinished=function(){this._finished=!0,this._additiveTrack&&this._additiveTrack.setFinished()},t.prototype.needsAnimate=function(){return!this._isAllValueEqual&&this.keyframes.length>=2&&this.interpolable},t.prototype.getAdditiveTrack=function(){return this._additiveTrack},t.prototype.addKeyframe=function(t,e){t>=this.maxTime?this.maxTime=t:this._needsSort=!0;var n=this.keyframes,i=n.length;if(this.interpolable)if(k(e)){var r=function(t){return k(t&&t[0])?2:1}(e);if(i>0&&this.arrDim!==r)return void(this.interpolable=!1);if(1===r&&"number"!=typeof e[0]||2===r&&"number"!=typeof e[0][0])return void(this.interpolable=!1);if(i>0){var o=n[i-1];this._isAllValueEqual&&(1===r&&gn(e,o.value)||(this._isAllValueEqual=!1))}this.arrDim=r}else{if(this.arrDim>0)return void(this.interpolable=!1);if("string"==typeof e){var a=qe(e);a?(e=a,this.isValueColor=!0):this.interpolable=!1}else if("number"!=typeof e||isNaN(e))return void(this.interpolable=!1);if(this._isAllValueEqual&&i>0){o=n[i-1];(this.isValueColor&&!gn(o.value,e)||o.value!==e)&&(this._isAllValueEqual=!1)}}var s={time:t,value:e,percent:0};return this.keyframes.push(s),s},t.prototype.prepare=function(t){var e=this.keyframes;this._needsSort&&e.sort((function(t,e){return t.time-e.time}));for(var n=this.arrDim,i=e.length,r=e[i-1],o=0;o<i;o++)e[o].percent=e[o].time/this.maxTime,n>0&&o!==i-1&&fn(e[o].value,r.value,n);if(t&&this.needsAnimate()&&t.needsAnimate()&&n===t.arrDim&&this.isValueColor===t.isValueColor&&!t._finished){this._additiveTrack=t;var a=e[0].value;for(o=0;o<i;o++)0===n?this.isValueColor?e[o].additiveValue=pn([],e[o].value,a,-1):e[o].additiveValue=e[o].value-a:1===n?e[o].additiveValue=pn([],e[o].value,a,-1):2===n&&(e[o].additiveValue=dn([],e[o].value,a,-1))}},t.prototype.step=function(t,e){if(!this._finished){this._additiveTrack&&this._additiveTrack._finished&&(this._additiveTrack=null);var n,i=null!=this._additiveTrack,r=i?"additiveValue":"value",o=this.keyframes,a=this.keyframes.length,s=this.propName,l=this.arrDim,u=this.isValueColor;if(e<0)n=0;else if(e<this._lastFramePercent){for(n=Math.min(this._lastFrame+1,a-1);n>=0&&!(o[n].percent<=e);n--);n=Math.min(n,a-2)}else{for(n=this._lastFrame;n<a&&!(o[n].percent>e);n++);n=Math.min(n-1,a-2)}var h=o[n+1],c=o[n];if(c&&h){this._lastFrame=n,this._lastFramePercent=e;var p=h.percent-c.percent;if(0!==p){var d=(e-c.percent)/p,f=i?this._additiveValue:u?wn:t[s];if((l>0||u)&&!f&&(f=this._additiveValue=[]),this.useSpline){var g=o[n][r],y=o[0===n?n:n-1][r],v=o[n>a-2?a-1:n+1][r],m=o[n>a-3?a-1:n+2][r];if(l>0)1===l?vn(f,y,g,v,m,d,d*d,d*d*d):function(t,e,n,i,r,o,a,s){for(var l=e.length,u=e[0].length,h=0;h<l;h++){t[h]||(t[1]=[]);for(var c=0;c<u;c++)t[h][c]=yn(e[h][c],n[h][c],i[h][c],r[h][c],o,a,s)}}(f,y,g,v,m,d,d*d,d*d*d);else if(u)vn(f,y,g,v,m,d,d*d,d*d*d),i||(t[s]=_n(f));else{var _=void 0;_=this.interpolable?yn(y,g,v,m,d,d*d,d*d*d):v,i?this._additiveValue=_:t[s]=_}}else if(l>0)1===l?cn(f,c[r],h[r],d):function(t,e,n,i){for(var r=e.length,o=r&&e[0].length,a=0;a<r;a++){t[a]||(t[a]=[]);for(var s=0;s<o;s++)t[a][s]=hn(e[a][s],n[a][s],i)}}(f,c[r],h[r],d);else if(u)cn(f,c[r],h[r],d),i||(t[s]=_n(f));else{_=void 0;_=this.interpolable?hn(c[r],h[r],d):function(t,e,n){return n>.5?e:t}(c[r],h[r],d),i?this._additiveValue=_:t[s]=_}i&&this._addToTarget(t)}}}},t.prototype._addToTarget=function(t){var e=this.arrDim,n=this.propName,i=this._additiveValue;0===e?this.isValueColor?(qe(t[n],wn),pn(wn,wn,i,1),t[n]=_n(wn)):t[n]=t[n]+i:1===e?pn(t[n],t[n],i,1):2===e&&dn(t[n],t[n],i,1)},t}(),Mn=function(){function t(t,e,n){this._tracks={},this._trackKeys=[],this._delay=0,this._maxTime=0,this._paused=!1,this._started=0,this._clip=null,this._target=t,this._loop=e,e&&n?b("Can' use additive animation on looped animation."):this._additiveAnimators=n}return t.prototype.getTarget=function(){return this._target},t.prototype.changeTarget=function(t){this._target=t},t.prototype.when=function(t,e){return this.whenWithKeys(t,e,z(e))},t.prototype.whenWithKeys=function(t,e,n){for(var i=this._tracks,r=0;r<n.length;r++){var o=n[r],a=i[o];if(!a){a=i[o]=new Sn(o);var s=void 0,l=this._getAdditiveTrack(o);if(l){var u=l.keyframes[l.keyframes.length-1];s=u&&u.value,l.isValueColor&&s&&(s=_n(s))}else s=this._target[o];if(null==s)continue;0!==t&&a.addKeyframe(0,mn(s)),this._trackKeys.push(o)}a.addKeyframe(t,mn(e[o]))}return this._maxTime=Math.max(this._maxTime,t),this},t.prototype.pause=function(){this._clip.pause(),this._paused=!0},t.prototype.resume=function(){this._clip.resume(),this._paused=!1},t.prototype.isPaused=function(){return!!this._paused},t.prototype._doneCallback=function(){this._setTracksFinished(),this._clip=null;var t=this._doneList;if(t)for(var e=t.length,n=0;n<e;n++)t[n].call(this)},t.prototype._abortedCallback=function(){this._setTracksFinished();var t=this.animation,e=this._abortedList;if(t&&t.removeClip(this._clip),this._clip=null,e)for(var n=0;n<e.length;n++)e[n].call(this)},t.prototype._setTracksFinished=function(){for(var t=this._tracks,e=this._trackKeys,n=0;n<e.length;n++)t[e[n]].setFinished()},t.prototype._getAdditiveTrack=function(t){var e,n=this._additiveAnimators;if(n)for(var i=0;i<n.length;i++){var r=n[i].getTrack(t);r&&(e=r)}return e},t.prototype.start=function(t,e){if(!(this._started>0)){this._started=1;for(var n=this,i=[],r=0;r<this._trackKeys.length;r++){var o=this._trackKeys[r],a=this._tracks[o],s=this._getAdditiveTrack(o),l=a.keyframes;if(a.prepare(s),a.needsAnimate())i.push(a);else if(!a.interpolable){var u=l[l.length-1];u&&(n._target[a.propName]=u.value)}}if(i.length||e){var h=new Oe({life:this._maxTime,loop:this._loop,delay:this._delay,onframe:function(t){n._started=2;var e=n._additiveAnimators;if(e){for(var r=!1,o=0;o<e.length;o++)if(e[o]._clip){r=!0;break}r||(n._additiveAnimators=null)}for(o=0;o<i.length;o++)i[o].step(n._target,t);var a=n._onframeList;if(a)for(o=0;o<a.length;o++)a[o](n._target,t)},ondestroy:function(){n._doneCallback()}});this._clip=h,this.animation&&this.animation.addClip(h),t&&"spline"!==t&&(h.easing=t)}else this._doneCallback();return this}},t.prototype.stop=function(t){if(this._clip){var e=this._clip;t&&e.onframe(1),this._abortedCallback()}},t.prototype.delay=function(t){return this._delay=t,this},t.prototype.during=function(t){return t&&(this._onframeList||(this._onframeList=[]),this._onframeList.push(t)),this},t.prototype.done=function(t){return t&&(this._doneList||(this._doneList=[]),this._doneList.push(t)),this},t.prototype.aborted=function(t){return t&&(this._abortedList||(this._abortedList=[]),this._abortedList.push(t)),this},t.prototype.getClip=function(){return this._clip},t.prototype.getTrack=function(t){return this._tracks[t]},t.prototype.stopTracks=function(t,e){if(!t.length||!this._clip)return!0;for(var n=this._tracks,i=this._trackKeys,r=0;r<t.length;r++){var o=n[t[r]];o&&(e?o.step(this._target,1):1===this._started&&o.step(this._target,0),o.setFinished())}var a=!0;for(r=0;r<i.length;r++)if(!n[i[r]].isFinished()){a=!1;break}return a&&this._abortedCallback(),a},t.prototype.saveFinalToTarget=function(t,e){if(t){e=e||this._trackKeys;for(var n=0;n<e.length;n++){var i=e[n],r=this._tracks[i];if(r&&!r.isFinished()){var o=r.keyframes,a=o[o.length-1];if(a){var s=mn(a.value);r.isValueColor&&(s=_n(s)),t[i]=s}}}}},t.prototype.__changeFinalValue=function(t,e){e=e||z(t);for(var n=0;n<e.length;n++){var i=e[n],r=this._tracks[i];if(r){var o=r.keyframes;if(o.length>1){var a=o.pop();r.addKeyframe(a.time,t[i]),r.prepare(r.getAdditiveTrack())}}}},t}(),In=function(){function t(t,e){this.x=t||0,this.y=e||0}return t.prototype.copy=function(t){return this.x=t.x,this.y=t.y,this},t.prototype.clone=function(){return new t(this.x,this.y)},t.prototype.set=function(t,e){return this.x=t,this.y=e,this},t.prototype.equal=function(t){return t.x===this.x&&t.y===this.y},t.prototype.add=function(t){return this.x+=t.x,this.y+=t.y,this},t.prototype.scale=function(t){this.x*=t,this.y*=t},t.prototype.scaleAndAdd=function(t,e){this.x+=t.x*e,this.y+=t.y*e},t.prototype.sub=function(t){return this.x-=t.x,this.y-=t.y,this},t.prototype.dot=function(t){return this.x*t.x+this.y*t.y},t.prototype.len=function(){return Math.sqrt(this.x*this.x+this.y*this.y)},t.prototype.lenSquare=function(){return this.x*this.x+this.y*this.y},t.prototype.normalize=function(){var t=this.len();return this.x/=t,this.y/=t,this},t.prototype.distance=function(t){var e=this.x-t.x,n=this.y-t.y;return Math.sqrt(e*e+n*n)},t.prototype.distanceSquare=function(t){var e=this.x-t.x,n=this.y-t.y;return e*e+n*n},t.prototype.negate=function(){return this.x=-this.x,this.y=-this.y,this},t.prototype.transform=function(t){if(t){var e=this.x,n=this.y;return this.x=t[0]*e+t[2]*n+t[4],this.y=t[1]*e+t[3]*n+t[5],this}},t.prototype.toArray=function(t){return t[0]=this.x,t[1]=this.y,t},t.prototype.fromArray=function(t){this.x=t[0],this.y=t[1]},t.set=function(t,e,n){t.x=e,t.y=n},t.copy=function(t,e){t.x=e.x,t.y=e.y},t.len=function(t){return Math.sqrt(t.x*t.x+t.y*t.y)},t.lenSquare=function(t){return t.x*t.x+t.y*t.y},t.dot=function(t,e){return t.x*e.x+t.y*e.y},t.add=function(t,e,n){t.x=e.x+n.x,t.y=e.y+n.y},t.sub=function(t,e,n){t.x=e.x-n.x,t.y=e.y-n.y},t.scale=function(t,e,n){t.x=e.x*n,t.y=e.y*n},t.scaleAndAdd=function(t,e,n,i){t.x=e.x+n.x*i,t.y=e.y+n.y*i},t.lerp=function(t,e,n,i){var r=1-i;t.x=r*e.x+i*n.x,t.y=r*e.y+i*n.y},t}(),Tn=Math.min,Cn=Math.max,An=new In,Dn=new In,Ln=new In,kn=new In,Pn=new In,On=new In,Rn=function(){function t(t,e,n,i){n<0&&isFinite(n)&&(t+=n,n=-n),i<0&&isFinite(i)&&(e+=i,i=-i),this.x=t,this.y=e,this.width=n,this.height=i}return t.prototype.union=function(t){var e=Tn(t.x,this.x),n=Tn(t.y,this.y);isFinite(this.x)&&isFinite(this.width)?this.width=Cn(t.x+t.width,this.x+this.width)-e:this.width=t.width,isFinite(this.y)&&isFinite(this.height)?this.height=Cn(t.y+t.height,this.y+this.height)-n:this.height=t.height,this.x=e,this.y=n},t.prototype.applyTransform=function(e){t.applyTransform(this,this,e)},t.prototype.calculateTransform=function(t){var e=this,n=t.width/e.width,i=t.height/e.height,r=[1,0,0,1,0,0];return me(r,r,[-e.x,-e.y]),xe(r,r,[n,i]),me(r,r,[t.x,t.y]),r},t.prototype.intersect=function(e,n){if(!e)return!1;e instanceof t||(e=t.create(e));var i=this,r=i.x,o=i.x+i.width,a=i.y,s=i.y+i.height,l=e.x,u=e.x+e.width,h=e.y,c=e.y+e.height,p=!(o<l||u<r||s<h||c<a);if(n){var d=1/0,f=0,g=Math.abs(o-l),y=Math.abs(u-r),v=Math.abs(s-h),m=Math.abs(c-a),_=Math.min(g,y),x=Math.min(v,m);o<l||u<r?_>f&&(f=_,g<y?In.set(On,-g,0):In.set(On,y,0)):_<d&&(d=_,g<y?In.set(Pn,g,0):In.set(Pn,-y,0)),s<h||c<a?x>f&&(f=x,v<m?In.set(On,0,-v):In.set(On,0,m)):_<d&&(d=_,v<m?In.set(Pn,0,v):In.set(Pn,0,-m))}return n&&In.copy(n,p?Pn:On),p},t.prototype.contain=function(t,e){var n=this;return t>=n.x&&t<=n.x+n.width&&e>=n.y&&e<=n.y+n.height},t.prototype.clone=function(){return new t(this.x,this.y,this.width,this.height)},t.prototype.copy=function(e){t.copy(this,e)},t.prototype.plain=function(){return{x:this.x,y:this.y,width:this.width,height:this.height}},t.prototype.isFinite=function(){return isFinite(this.x)&&isFinite(this.y)&&isFinite(this.width)&&isFinite(this.height)},t.prototype.isZero=function(){return 0===this.width||0===this.height},t.create=function(e){return new t(e.x,e.y,e.width,e.height)},t.copy=function(t,e){t.x=e.x,t.y=e.y,t.width=e.width,t.height=e.height},t.applyTransform=function(e,n,i){if(i){if(i[1]<1e-5&&i[1]>-1e-5&&i[2]<1e-5&&i[2]>-1e-5){var r=i[0],o=i[3],a=i[4],s=i[5];return e.x=n.x*r+a,e.y=n.y*o+s,e.width=n.width*r,e.height=n.height*o,e.width<0&&(e.x+=e.width,e.width=-e.width),void(e.height<0&&(e.y+=e.height,e.height=-e.height))}An.x=Ln.x=n.x,An.y=kn.y=n.y,Dn.x=kn.x=n.x+n.width,Dn.y=Ln.y=n.y+n.height,An.transform(i),kn.transform(i),Dn.transform(i),Ln.transform(i),e.x=Tn(An.x,Dn.x,Ln.x,kn.x),e.y=Tn(An.y,Dn.y,Ln.y,kn.y);var l=Cn(An.x,Dn.x,Ln.x,kn.x),u=Cn(An.y,Dn.y,Ln.y,kn.y);e.width=l-e.x,e.height=u-e.y}else e!==n&&t.copy(e,n)},t}(),Nn={},En="12px sans-serif";var zn={measureText:function(t,e){return xn||(xn=C().getContext("2d")),bn!==e&&(bn=xn.font=e||En),xn.measureText(t)}};function Bn(t,e){var n=Nn[e=e||En];n||(n=Nn[e]=new Ee(500));var i=n.get(t);return null==i&&(i=zn.measureText(t,e).width,n.put(t,i)),i}function Vn(t,e,n,i){var r=Bn(t,e),o=Wn(e),a=Gn(0,r,n),s=Hn(0,o,i);return new Rn(a,s,r,o)}function Fn(t,e,n,i){var r=((t||"")+"").split("\n");if(1===r.length)return Vn(r[0],e,n,i);for(var o=new Rn(0,0,0,0),a=0;a<r.length;a++){var s=Vn(r[a],e,n,i);0===a?o.copy(s):o.union(s)}return o}function Gn(t,e,n){return"right"===n?t-=e:"center"===n&&(t-=e/2),t}function Hn(t,e,n){return"middle"===n?t-=e/2:"bottom"===n&&(t-=e),t}function Wn(t){return Bn("国",t)}function Un(t,e){return"string"==typeof t?t.lastIndexOf("%")>=0?parseFloat(t)/100*e:parseFloat(t):t}function Yn(t,e,n){var i=e.position||"inside",r=null!=e.distance?e.distance:5,o=n.height,a=n.width,s=o/2,l=n.x,u=n.y,h="left",c="top";if(i instanceof Array)l+=Un(i[0],n.width),u+=Un(i[1],n.height),h=null,c=null;else switch(i){case"left":l-=r,u+=s,h="right",c="middle";break;case"right":l+=r+a,u+=s,c="middle";break;case"top":l+=a/2,u-=r,h="center",c="bottom";break;case"bottom":l+=a/2,u+=o+r,h="center";break;case"inside":l+=a/2,u+=s,h="center",c="middle";break;case"insideLeft":l+=r,u+=s,c="middle";break;case"insideRight":l+=a-r,u+=s,h="right",c="middle";break;case"insideTop":l+=a/2,u+=r,h="center";break;case"insideBottom":l+=a/2,u+=o-r,h="center",c="bottom";break;case"insideTopLeft":l+=r,u+=r;break;case"insideTopRight":l+=a-r,u+=r,h="right";break;case"insideBottomLeft":l+=r,u+=o-r,c="bottom";break;case"insideBottomRight":l+=a-r,u+=o-r,h="right",c="bottom"}return(t=t||{}).x=l,t.y=u,t.align=h,t.verticalAlign=c,t}var Xn=1;"undefined"!=typeof window&&(Xn=Math.max(window.devicePixelRatio||window.screen&&window.screen.deviceXDPI/window.screen.logicalXDPI||1,1));var Zn=Xn,jn="#333",qn="#ccc",Kn="__zr_normal__",$n=["x","y","scaleX","scaleY","originX","originY","rotation","ignore"],Jn={x:!0,y:!0,scaleX:!0,scaleY:!0,originX:!0,originY:!0,rotation:!0,ignore:!1},Qn={},ti=new Rn(0,0,0,0),ei=function(){function t(t){this.id=x(),this.animators=[],this.currentStates=[],this.states={},this._init(t)}return t.prototype._init=function(t){this.attr(t)},t.prototype.drift=function(t,e,n){switch(this.draggable){case"horizontal":e=0;break;case"vertical":t=0}var i=this.transform;i||(i=this.transform=[1,0,0,1,0,0]),i[4]+=t,i[5]+=e,this.decomposeTransform(),this.markRedraw()},t.prototype.beforeUpdate=function(){},t.prototype.afterUpdate=function(){},t.prototype.update=function(){this.updateTransform(),this.__dirty&&this.updateInnerText()},t.prototype.updateInnerText=function(t){var e=this._textContent;if(e&&(!e.ignore||t)){this.textConfig||(this.textConfig={});var n=this.textConfig,i=n.local,r=e.attachedTransform,o=void 0,a=void 0,s=!1;r.parent=i?this:null;var l=!1;if(r.x=e.x,r.y=e.y,r.originX=e.originX,r.originY=e.originY,r.rotation=e.rotation,r.scaleX=e.scaleX,r.scaleY=e.scaleY,null!=n.position){var u=ti;n.layoutRect?u.copy(n.layoutRect):u.copy(this.getBoundingRect()),i||u.applyTransform(this.transform),this.calculateTextPosition?this.calculateTextPosition(Qn,n,u):Yn(Qn,n,u),r.x=Qn.x,r.y=Qn.y,o=Qn.align,a=Qn.verticalAlign;var h=n.origin;if(h&&null!=n.rotation){var c=void 0,p=void 0;"center"===h?(c=.5*u.width,p=.5*u.height):(c=Un(h[0],u.width),p=Un(h[1],u.height)),l=!0,r.originX=-r.x+c+(i?0:u.x),r.originY=-r.y+p+(i?0:u.y)}}null!=n.rotation&&(r.rotation=n.rotation);var d=n.offset;d&&(r.x+=d[0],r.y+=d[1],l||(r.originX=-d[0],r.originY=-d[1]));var f=null==n.inside?"string"==typeof n.position&&n.position.indexOf("inside")>=0:n.inside,g=this._innerTextDefaultStyle||(this._innerTextDefaultStyle={}),y=void 0,v=void 0,m=void 0;f&&this.canBeInsideText()?(y=n.insideFill,v=n.insideStroke,null!=y&&"auto"!==y||(y=this.getInsideTextFill()),null!=v&&"auto"!==v||(v=this.getInsideTextStroke(y),m=!0)):(y=n.outsideFill,v=n.outsideStroke,null!=y&&"auto"!==y||(y=this.getOutsideFill()),null!=v&&"auto"!==v||(v=this.getOutsideStroke(y),m=!0)),(y=y||"#000")===g.fill&&v===g.stroke&&m===g.autoStroke&&o===g.align&&a===g.verticalAlign||(s=!0,g.fill=y,g.stroke=v,g.autoStroke=m,g.align=o,g.verticalAlign=a,e.setDefaultTextStyle(g)),s&&e.dirtyStyle(),e.markRedraw()}},t.prototype.canBeInsideText=function(){return!0},t.prototype.getInsideTextFill=function(){return"#fff"},t.prototype.getInsideTextStroke=function(t){return"#000"},t.prototype.getOutsideFill=function(){return this.__zr&&this.__zr.isDarkMode()?qn:jn},t.prototype.getOutsideStroke=function(t){var e=this.__zr&&this.__zr.getBackgroundColor(),n="string"==typeof e&&qe(e);n||(n=[255,255,255,1]);for(var i=n[3],r=this.__zr.isDarkMode(),o=0;o<3;o++)n[o]=n[o]*i+(r?0:255)*(1-i);return n[3]=1,an(n,"rgba")},t.prototype.traverse=function(t,e){},t.prototype.attrKV=function(t,e){"textConfig"===t?this.setTextConfig(e):"textContent"===t?this.setTextContent(e):"clipPath"===t?this.setClipPath(e):"extra"===t?(this.extra=this.extra||{},I(this.extra,e)):this[t]=e},t.prototype.hide=function(){this.ignore=!0,this.markRedraw()},t.prototype.show=function(){this.ignore=!1,this.markRedraw()},t.prototype.attr=function(t,e){if("string"==typeof t)this.attrKV(t,e);else if(Y(t))for(var n=z(t),i=0;i<n.length;i++){var r=n[i];this.attrKV(r,t[r])}return this.markRedraw(),this},t.prototype.saveCurrentToNormalState=function(t){this._innerSaveToNormal(t);for(var e=this._normalState,n=0;n<this.animators.length;n++){var i=this.animators[n],r=i.__fromStateTransition;if(!r||r===Kn){var o=i.targetName,a=o?e[o]:e;i.saveFinalToTarget(a)}}},t.prototype._innerSaveToNormal=function(t){var e=this._normalState;e||(e=this._normalState={}),t.textConfig&&!e.textConfig&&(e.textConfig=this.textConfig),this._savePrimaryToNormal(t,e,$n)},t.prototype._savePrimaryToNormal=function(t,e,n){for(var i=0;i<n.length;i++){var r=n[i];null==t[r]||r in e||(e[r]=this[r])}},t.prototype.hasState=function(){return this.currentStates.length>0},t.prototype.getState=function(t){return this.states[t]},t.prototype.ensureState=function(t){var e=this.states;return e[t]||(e[t]={}),e[t]},t.prototype.clearStates=function(t){this.useState(Kn,!1,t)},t.prototype.useState=function(e,n,i){var r=e===Kn;if(this.hasState()||!r){var o=this.currentStates,a=this.stateTransition;if(!(A(o,e)>=0)||!n&&1!==o.length){var s;if(this.stateProxy&&!r&&(s=this.stateProxy(e)),s||(s=this.states&&this.states[e]),s||r){r||this.saveCurrentToNormalState(s);var l=!(!s||!s.hoverLayer);return l&&this._toggleHoverLayerFlag(!0),this._applyStateObj(e,s,this._normalState,n,!i&&!this.__inHover&&a&&a.duration>0,a),this._textContent&&this._textContent.useState(e,n),this._textGuide&&this._textGuide.useState(e,n),r?(this.currentStates=[],this._normalState={}):n?this.currentStates.push(e):this.currentStates=[e],this._updateAnimationTargets(),this.markRedraw(),!l&&this.__inHover&&(this._toggleHoverLayerFlag(!1),this.__dirty&=~t.REDARAW_BIT),s}b("State "+e+" not exists.")}}},t.prototype.useStates=function(e,n){if(e.length){var i=[],r=this.currentStates,o=e.length,a=o===r.length;if(a)for(var s=0;s<o;s++)if(e[s]!==r[s]){a=!1;break}if(a)return;for(s=0;s<o;s++){var l=e[s],u=void 0;this.stateProxy&&(u=this.stateProxy(l,e)),u||(u=this.states[l]),u&&i.push(u)}var h=!(!i[o-1]||!i[o-1].hoverLayer);h&&this._toggleHoverLayerFlag(!0);var c=this._mergeStates(i),p=this.stateTransition;this.saveCurrentToNormalState(c),this._applyStateObj(e.join(","),c,this._normalState,!1,!n&&!this.__inHover&&p&&p.duration>0,p),this._textContent&&this._textContent.useStates(e),this._textGuide&&this._textGuide.useStates(e),this._updateAnimationTargets(),this.currentStates=e.slice(),this.markRedraw(),!h&&this.__inHover&&(this._toggleHoverLayerFlag(!1),this.__dirty&=~t.REDARAW_BIT)}else this.clearStates()},t.prototype._updateAnimationTargets=function(){for(var t=0;t<this.animators.length;t++){var e=this.animators[t];e.targetName&&e.changeTarget(this[e.targetName])}},t.prototype.removeState=function(t){var e=A(this.currentStates,t);if(e>=0){var n=this.currentStates.slice();n.splice(e,1),this.useStates(n)}},t.prototype.replaceState=function(t,e,n){var i=this.currentStates.slice(),r=A(i,t),o=A(i,e)>=0;r>=0?o?i.splice(r,1):i[r]=e:n&&!o&&i.push(e),this.useStates(i)},t.prototype.toggleState=function(t,e){e?this.useState(t,!0):this.removeState(t)},t.prototype._mergeStates=function(t){for(var e,n={},i=0;i<t.length;i++){var r=t[i];I(n,r),r.textConfig&&I(e=e||{},r.textConfig)}return e&&(n.textConfig=e),n},t.prototype._applyStateObj=function(t,e,n,i,r,o){var a=!(e&&i);e&&e.textConfig?(this.textConfig=I({},i?this.textConfig:n.textConfig),I(this.textConfig,e.textConfig)):a&&n.textConfig&&(this.textConfig=n.textConfig);for(var s={},l=!1,u=0;u<$n.length;u++){var h=$n[u],c=r&&Jn[h];e&&null!=e[h]?c?(l=!0,s[h]=e[h]):this[h]=e[h]:a&&null!=n[h]&&(c?(l=!0,s[h]=n[h]):this[h]=n[h])}if(!r)for(u=0;u<this.animators.length;u++){var p=this.animators[u],d=p.targetName;p.__changeFinalValue(d?(e||n)[d]:e||n)}l&&this._transitionState(t,s,o)},t.prototype._attachComponent=function(t){if(t.__zr&&!t.__hostTarget)throw new Error("Text element has been added to zrender.");if(t===this)throw new Error("Recursive component attachment.");var e=this.__zr;e&&t.addSelfToZr(e),t.__zr=e,t.__hostTarget=this},t.prototype._detachComponent=function(t){t.__zr&&t.removeSelfFromZr(t.__zr),t.__zr=null,t.__hostTarget=null},t.prototype.getClipPath=function(){return this._clipPath},t.prototype.setClipPath=function(t){this._clipPath&&this._clipPath!==t&&this.removeClipPath(),this._attachComponent(t),this._clipPath=t,this.markRedraw()},t.prototype.removeClipPath=function(){var t=this._clipPath;t&&(this._detachComponent(t),this._clipPath=null,this.markRedraw())},t.prototype.getTextContent=function(){return this._textContent},t.prototype.setTextContent=function(t){var e=this._textContent;if(e!==t){if(e&&e!==t&&this.removeTextContent(),t.__zr&&!t.__hostTarget)throw new Error("Text element has been added to zrender.");t.attachedTransform=new ke,this._attachComponent(t),this._textContent=t,this.markRedraw()}},t.prototype.setTextConfig=function(t){this.textConfig||(this.textConfig={}),I(this.textConfig,t),this.markRedraw()},t.prototype.removeTextConfig=function(){this.textConfig=null,this.markRedraw()},t.prototype.removeTextContent=function(){var t=this._textContent;t&&(t.attachedTransform=null,this._detachComponent(t),this._textContent=null,this._innerTextDefaultStyle=null,this.markRedraw())},t.prototype.getTextGuideLine=function(){return this._textGuide},t.prototype.setTextGuideLine=function(t){this._textGuide&&this._textGuide!==t&&this.removeTextGuideLine(),this._attachComponent(t),this._textGuide=t,this.markRedraw()},t.prototype.removeTextGuideLine=function(){var t=this._textGuide;t&&(this._detachComponent(t),this._textGuide=null,this.markRedraw())},t.prototype.markRedraw=function(){this.__dirty|=t.REDARAW_BIT;var e=this.__zr;e&&(this.__inHover?e.refreshHover():e.refresh()),this.__hostTarget&&this.__hostTarget.markRedraw()},t.prototype.dirty=function(){this.markRedraw()},t.prototype._toggleHoverLayerFlag=function(t){this.__inHover=t;var e=this._textContent,n=this._textGuide;e&&(e.__inHover=t),n&&(n.__inHover=t)},t.prototype.addSelfToZr=function(t){this.__zr=t;var e=this.animators;if(e)for(var n=0;n<e.length;n++)t.animation.addAnimator(e[n]);this._clipPath&&this._clipPath.addSelfToZr(t),this._textContent&&this._textContent.addSelfToZr(t),this._textGuide&&this._textGuide.addSelfToZr(t)},t.prototype.removeSelfFromZr=function(t){this.__zr=null;var e=this.animators;if(e)for(var n=0;n<e.length;n++)t.animation.removeAnimator(e[n]);this._clipPath&&this._clipPath.removeSelfFromZr(t),this._textContent&&this._textContent.removeSelfFromZr(t),this._textGuide&&this._textGuide.removeSelfFromZr(t)},t.prototype.animate=function(t,e){var n=t?this[t]:this;if(n){var i=new Mn(n,e);return this.addAnimator(i,t),i}b('Property "'+t+'" is not existed in element '+this.id)},t.prototype.addAnimator=function(t,e){var n=this.__zr,i=this;t.during((function(){i.updateDuringAnimation(e)})).done((function(){var e=i.animators,n=A(e,t);n>=0&&e.splice(n,1)})),this.animators.push(t),n&&n.animation.addAnimator(t),n&&n.wakeUp()},t.prototype.updateDuringAnimation=function(t){this.markRedraw()},t.prototype.stopAnimation=function(t,e){for(var n=this.animators,i=n.length,r=[],o=0;o<i;o++){var a=n[o];t&&t!==a.scope?r.push(a):a.stop(e)}return this.animators=r,this},t.prototype.animateTo=function(t,e,n){ni(this,t,e,n)},t.prototype.animateFrom=function(t,e,n){ni(this,t,e,n,!0)},t.prototype._transitionState=function(t,e,n,i){for(var r=ni(this,e,n,i),o=0;o<r.length;o++)r[o].__fromStateTransition=t},t.prototype.getBoundingRect=function(){return null},t.prototype.getPaintRect=function(){return null},t.REDARAW_BIT=1,t.initDefaultProps=function(){var e=t.prototype;e.type="element",e.name="",e.ignore=!1,e.silent=!1,e.isGroup=!1,e.draggable=!1,e.dragging=!1,e.ignoreClip=!1,e.__inHover=!1,e.__dirty=t.REDARAW_BIT;var n={};function i(t,e,i){n[t+e+i]||(console.warn("DEPRECATED: '"+t+"' has been deprecated. use '"+e+"', '"+i+"' instead"),n[t+e+i]=!0)}function r(t,n,r,o){function a(t,e){Object.defineProperty(e,0,{get:function(){return t[r]},set:function(e){t[r]=e}}),Object.defineProperty(e,1,{get:function(){return t[o]},set:function(e){t[o]=e}})}Object.defineProperty(e,t,{get:function(){(i(t,r,o),this[n])||a(this,this[n]=[]);return this[n]},set:function(e){i(t,r,o),this[r]=e[0],this[o]=e[1],this[n]=e,a(this,e)}})}Object.defineProperty&&(!a.browser.ie||a.browser.version>8)&&(r("position","_legacyPos","x","y"),r("scale","_legacyScale","scaleX","scaleY"),r("origin","_legacyOrigin","originX","originY"))}(),t}();function ni(t,e,n,i,r){var o=[];oi(t,"",t,e,n=n||{},i,o,r);var a=o.length,s=!1,l=n.done,u=n.aborted,h=function(){s=!0,--a<=0&&(s?l&&l():u&&u())},c=function(){--a<=0&&(s?l&&l():u&&u())};a||l&&l(),o.length>0&&n.during&&o[0].during((function(t,e){n.during(e)}));for(var p=0;p<o.length;p++){var d=o[p];h&&d.done(h),c&&d.aborted(c),d.start(n.easing,n.force)}return o}function ii(t,e,n){for(var i=0;i<n;i++)t[i]=e[i]}function ri(t,e,n){if(k(e[n]))if(k(t[n])||(t[n]=[]),Z(e[n])){var i=e[n].length;t[n].length!==i&&(t[n]=new e[n].constructor(i),ii(t[n],e[n],i))}else{var r=e[n],o=t[n],a=r.length;if(k(r[0]))for(var s=r[0].length,l=0;l<a;l++)o[l]?ii(o[l],r[l],s):o[l]=Array.prototype.slice.call(r[l]);else ii(o,r,a);o.length=r.length}else t[n]=e[n]}function oi(t,e,n,i,r,o,a,s){for(var l=[],u=[],h=z(i),c=r.duration,p=r.delay,d=r.additive,f=r.setToFinal,g=!Y(o),y=0;y<h.length;y++){if(null!=n[I=h[y]]&&null!=i[I]&&(g||o[I]))if(Y(i[I])&&!k(i[I])){if(e){s||(n[I]=i[I],t.updateDuringAnimation(e));continue}oi(t,I,n[I],i[I],r,o&&o[I],a,s)}else l.push(I),u.push(I);else s||(n[I]=i[I],t.updateDuringAnimation(e),u.push(I))}var v=l.length;if(v>0||r.force&&!a.length){for(var m=t.animators,_=[],x=0;x<m.length;x++)m[x].targetName===e&&_.push(m[x]);if(!d&&_.length)for(x=0;x<_.length;x++){if(_[x].stopTracks(u)){var b=A(m,_[x]);m.splice(b,1)}}var w=void 0,S=void 0,M=void 0;if(s){S={},f&&(w={});for(x=0;x<v;x++){S[I=l[x]]=n[I],f?w[I]=i[I]:n[I]=i[I]}}else if(f){M={};for(x=0;x<v;x++){var I;M[I=l[x]]=mn(n[I]),ri(n,i,I)}}var T=new Mn(n,!1,d?_:null);T.targetName=e,r.scope&&(T.scope=r.scope),f&&w&&T.whenWithKeys(0,w,l),M&&T.whenWithKeys(0,M,l),T.whenWithKeys(null==c?500:c,s?S:i,l).delay(p||0),t.addAnimator(T,e),a.push(T)}}L(ei,Ft),L(ei,ke);function ai(t,e,n,i){var r=e+1;if(r===n)return 1;if(i(t[r++],t[e])<0){for(;r<n&&i(t[r],t[r-1])<0;)r++;!function(t,e,n){n--;for(;e<n;){var i=t[e];t[e++]=t[n],t[n--]=i}}(t,e,r)}else for(;r<n&&i(t[r],t[r-1])>=0;)r++;return r-e}function si(t,e,n,i,r){for(i===e&&i++;i<n;i++){for(var o,a=t[i],s=e,l=i;s<l;)r(a,t[o=s+l>>>1])<0?l=o:s=o+1;var u=i-s;switch(u){case 3:t[s+3]=t[s+2];case 2:t[s+2]=t[s+1];case 1:t[s+1]=t[s];break;default:for(;u>0;)t[s+u]=t[s+u-1],u--}t[s]=a}}function li(t,e,n,i,r,o){var a=0,s=0,l=1;if(o(t,e[n+r])>0){for(s=i-r;l<s&&o(t,e[n+r+l])>0;)a=l,(l=1+(l<<1))<=0&&(l=s);l>s&&(l=s),a+=r,l+=r}else{for(s=r+1;l<s&&o(t,e[n+r-l])<=0;)a=l,(l=1+(l<<1))<=0&&(l=s);l>s&&(l=s);var u=a;a=r-l,l=r-u}for(a++;a<l;){var h=a+(l-a>>>1);o(t,e[n+h])>0?a=h+1:l=h}return l}function ui(t,e,n,i,r,o){var a=0,s=0,l=1;if(o(t,e[n+r])<0){for(s=r+1;l<s&&o(t,e[n+r-l])<0;)a=l,(l=1+(l<<1))<=0&&(l=s);l>s&&(l=s);var u=a;a=r-l,l=r-u}else{for(s=i-r;l<s&&o(t,e[n+r+l])>=0;)a=l,(l=1+(l<<1))<=0&&(l=s);l>s&&(l=s),a+=r,l+=r}for(a++;a<l;){var h=a+(l-a>>>1);o(t,e[n+h])<0?l=h:a=h+1}return l}function hi(t,e){var n,i,r=7,o=0;t.length;var a=[];function s(s){var l=n[s],u=i[s],h=n[s+1],c=i[s+1];i[s]=u+c,s===o-3&&(n[s+1]=n[s+2],i[s+1]=i[s+2]),o--;var p=ui(t[h],t,l,u,0,e);l+=p,0!==(u-=p)&&0!==(c=li(t[l+u-1],t,h,c,c-1,e))&&(u<=c?function(n,i,o,s){var l=0;for(l=0;l<i;l++)a[l]=t[n+l];var u=0,h=o,c=n;if(t[c++]=t[h++],0==--s){for(l=0;l<i;l++)t[c+l]=a[u+l];return}if(1===i){for(l=0;l<s;l++)t[c+l]=t[h+l];return void(t[c+s]=a[u])}var p,d,f,g=r;for(;;){p=0,d=0,f=!1;do{if(e(t[h],a[u])<0){if(t[c++]=t[h++],d++,p=0,0==--s){f=!0;break}}else if(t[c++]=a[u++],p++,d=0,1==--i){f=!0;break}}while((p|d)<g);if(f)break;do{if(0!==(p=ui(t[h],a,u,i,0,e))){for(l=0;l<p;l++)t[c+l]=a[u+l];if(c+=p,u+=p,(i-=p)<=1){f=!0;break}}if(t[c++]=t[h++],0==--s){f=!0;break}if(0!==(d=li(a[u],t,h,s,0,e))){for(l=0;l<d;l++)t[c+l]=t[h+l];if(c+=d,h+=d,0===(s-=d)){f=!0;break}}if(t[c++]=a[u++],1==--i){f=!0;break}g--}while(p>=7||d>=7);if(f)break;g<0&&(g=0),g+=2}if((r=g)<1&&(r=1),1===i){for(l=0;l<s;l++)t[c+l]=t[h+l];t[c+s]=a[u]}else{if(0===i)throw new Error;for(l=0;l<i;l++)t[c+l]=a[u+l]}}(l,u,h,c):function(n,i,o,s){var l=0;for(l=0;l<s;l++)a[l]=t[o+l];var u=n+i-1,h=s-1,c=o+s-1,p=0,d=0;if(t[c--]=t[u--],0==--i){for(p=c-(s-1),l=0;l<s;l++)t[p+l]=a[l];return}if(1===s){for(d=(c-=i)+1,p=(u-=i)+1,l=i-1;l>=0;l--)t[d+l]=t[p+l];return void(t[c]=a[h])}var f=r;for(;;){var g=0,y=0,v=!1;do{if(e(a[h],t[u])<0){if(t[c--]=t[u--],g++,y=0,0==--i){v=!0;break}}else if(t[c--]=a[h--],y++,g=0,1==--s){v=!0;break}}while((g|y)<f);if(v)break;do{if(0!==(g=i-ui(a[h],t,n,i,i-1,e))){for(i-=g,d=(c-=g)+1,p=(u-=g)+1,l=g-1;l>=0;l--)t[d+l]=t[p+l];if(0===i){v=!0;break}}if(t[c--]=a[h--],1==--s){v=!0;break}if(0!==(y=s-li(t[u],a,0,s,s-1,e))){for(s-=y,d=(c-=y)+1,p=(h-=y)+1,l=0;l<y;l++)t[d+l]=a[p+l];if(s<=1){v=!0;break}}if(t[c--]=t[u--],0==--i){v=!0;break}f--}while(g>=7||y>=7);if(v)break;f<0&&(f=0),f+=2}(r=f)<1&&(r=1);if(1===s){for(d=(c-=i)+1,p=(u-=i)+1,l=i-1;l>=0;l--)t[d+l]=t[p+l];t[c]=a[h]}else{if(0===s)throw new Error;for(p=c-(s-1),l=0;l<s;l++)t[p+l]=a[l]}}(l,u,h,c))}return n=[],i=[],{mergeRuns:function(){for(;o>1;){var t=o-2;if(t>=1&&i[t-1]<=i[t]+i[t+1]||t>=2&&i[t-2]<=i[t]+i[t-1])i[t-1]<i[t+1]&&t--;else if(i[t]>i[t+1])break;s(t)}},forceMergeRuns:function(){for(;o>1;){var t=o-2;t>0&&i[t-1]<i[t+1]&&t--,s(t)}},pushRun:function(t,e){n[o]=t,i[o]=e,o+=1}}}function ci(t,e,n,i){n||(n=0),i||(i=t.length);var r=i-n;if(!(r<2)){var o=0;if(r<32)si(t,n,i,n+(o=ai(t,n,i,e)),e);else{var a=hi(t,e),s=function(t){for(var e=0;t>=32;)e|=1&t,t>>=1;return t+e}(r);do{if((o=ai(t,n,i,e))<s){var l=r;l>s&&(l=s),si(t,n,n+l,n+o,e),o=l}a.pushRun(n,o),a.mergeRuns(),r-=o,n+=o}while(0!==r);a.forceMergeRuns()}}}var pi=!1;function di(){pi||(pi=!0,console.warn("z / z2 / zlevel of displayable is invalid, which may cause unexpected errors"))}function fi(t,e){return t.zlevel===e.zlevel?t.z===e.z?t.z2-e.z2:t.z-e.z:t.zlevel-e.zlevel}var gi,yi,vi=function(){function t(){this._roots=[],this._displayList=[],this._displayListLen=0,this.displayableSortFunc=fi}return t.prototype.traverse=function(t,e){for(var n=0;n<this._roots.length;n++)this._roots[n].traverse(t,e)},t.prototype.getDisplayList=function(t,e){e=e||!1;var n=this._displayList;return!t&&n.length||this.updateDisplayList(e),n},t.prototype.updateDisplayList=function(t){this._displayListLen=0;for(var e=this._roots,n=this._displayList,i=0,r=e.length;i<r;i++)this._updateAndAddDisplayable(e[i],null,t);n.length=this._displayListLen,a.canvasSupported&&ci(n,fi)},t.prototype._updateAndAddDisplayable=function(t,e,n){if(!t.ignore||n){t.beforeUpdate(),t.update(),t.afterUpdate();var i=t.getClipPath();if(t.ignoreClip)e=null;else if(i){e=e?e.slice():[];for(var r=i,o=t;r;)r.parent=o,r.updateTransform(),e.push(r),o=r,r=r.getClipPath()}if(t.childrenRef){for(var a=t.childrenRef(),s=0;s<a.length;s++){var l=a[s];t.__dirty&&(l.__dirty|=ei.REDARAW_BIT),this._updateAndAddDisplayable(l,e,n)}t.__dirty=0}else{var u=t;e&&e.length?u.__clipPaths=e:u.__clipPaths&&u.__clipPaths.length>0&&(u.__clipPaths=[]),isNaN(u.z)&&(di(),u.z=0),isNaN(u.z2)&&(di(),u.z2=0),isNaN(u.zlevel)&&(di(),u.zlevel=0),this._displayList[this._displayListLen++]=u}var h=t.getDecalElement&&t.getDecalElement();h&&this._updateAndAddDisplayable(h,e,n);var c=t.getTextGuideLine();c&&this._updateAndAddDisplayable(c,e,n);var p=t.getTextContent();p&&this._updateAndAddDisplayable(p,e,n)}},t.prototype.addRoot=function(t){t.__zr&&t.__zr.storage===this||this._roots.push(t)},t.prototype.delRoot=function(t){if(t instanceof Array)for(var e=0,n=t.length;e<n;e++)this.delRoot(t[e]);else{var i=A(this._roots,t);i>=0&&this._roots.splice(i,1)}},t.prototype.delAllRoots=function(){this._roots=[],this._displayList=[],this._displayListLen=0},t.prototype.getRoots=function(){return this._roots},t.prototype.dispose=function(){this._displayList=null,this._roots=null},t}(),mi="undefined"!=typeof window&&(window.requestAnimationFrame&&window.requestAnimationFrame.bind(window)||window.msRequestAnimationFrame&&window.msRequestAnimationFrame.bind(window)||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame)||function(t){return setTimeout(t,16)},_i=function(t){function e(e){var n=t.call(this)||this;return n._running=!1,n._time=0,n._pausedTime=0,n._pauseStart=0,n._paused=!1,e=e||{},n.stage=e.stage||{},n.onframe=e.onframe||function(){},n}return n(e,t),e.prototype.addClip=function(t){t.animation&&this.removeClip(t),this._clipsHead?(this._clipsTail.next=t,t.prev=this._clipsTail,t.next=null,this._clipsTail=t):this._clipsHead=this._clipsTail=t,t.animation=this},e.prototype.addAnimator=function(t){t.animation=this;var e=t.getClip();e&&this.addClip(e)},e.prototype.removeClip=function(t){if(t.animation){var e=t.prev,n=t.next;e?e.next=n:this._clipsHead=n,n?n.prev=e:this._clipsTail=e,t.next=t.prev=t.animation=null}},e.prototype.removeAnimator=function(t){var e=t.getClip();e&&this.removeClip(e),t.animation=null},e.prototype.update=function(t){for(var e=(new Date).getTime()-this._pausedTime,n=e-this._time,i=this._clipsHead;i;){var r=i.next;i.step(e,n)?(i.ondestroy&&i.ondestroy(),this.removeClip(i),i=r):i=r}this._time=e,t||(this.onframe(n),this.trigger("frame",n),this.stage.update&&this.stage.update())},e.prototype._startLoop=function(){var t=this;this._running=!0,mi((function e(){t._running&&(mi(e),!t._paused&&t.update())}))},e.prototype.start=function(){this._running||(this._time=(new Date).getTime(),this._pausedTime=0,this._startLoop())},e.prototype.stop=function(){this._running=!1},e.prototype.pause=function(){this._paused||(this._pauseStart=(new Date).getTime(),this._paused=!0)},e.prototype.resume=function(){this._paused&&(this._pausedTime+=(new Date).getTime()-this._pauseStart,this._paused=!1)},e.prototype.clear=function(){for(var t=this._clipsHead;t;){var e=t.next;t.prev=t.next=t.animation=null,t=e}this._clipsHead=this._clipsTail=null},e.prototype.isFinished=function(){return null==this._clipsHead},e.prototype.animate=function(t,e){e=e||{},this.start();var n=new Mn(t,e.loop);return this.addAnimator(n),n},e}(Ft),xi=a.domSupported,bi=(yi={pointerdown:1,pointerup:1,pointermove:1,pointerout:1},{mouse:gi=["click","dblclick","mousewheel","wheel","mouseout","mouseup","mousedown","mousemove","contextmenu"],touch:["touchstart","touchend","touchmove"],pointer:O(gi,(function(t){var e=t.replace("mouse","pointer");return yi.hasOwnProperty(e)?e:t}))}),wi=["mousemove","mouseup"],Si=["pointermove","pointerup"],Mi=!1;function Ii(t){var e=t.pointerType;return"pen"===e||"touch"===e}function Ti(t){t&&(t.zrByTouch=!0)}function Ci(t,e){for(var n=e,i=!1;n&&9!==n.nodeType&&!(i=n.domBelongToZr||n!==e&&n===t.painterRoot);)n=n.parentNode;return i}var Ai=function(t,e){this.stopPropagation=ft,this.stopImmediatePropagation=ft,this.preventDefault=ft,this.type=e.type,this.target=this.currentTarget=t.dom,this.pointerType=e.pointerType,this.clientX=e.clientX,this.clientY=e.clientY},Di={mousedown:function(t){t=Qt(this.dom,t),this.__mayPointerCapture=[t.zrX,t.zrY],this.trigger("mousedown",t)},mousemove:function(t){t=Qt(this.dom,t);var e=this.__mayPointerCapture;!e||t.zrX===e[0]&&t.zrY===e[1]||this.__togglePointerCapture(!0),this.trigger("mousemove",t)},mouseup:function(t){t=Qt(this.dom,t),this.__togglePointerCapture(!1),this.trigger("mouseup",t)},mouseout:function(t){Ci(this,(t=Qt(this.dom,t)).toElement||t.relatedTarget)||(this.__pointerCapturing&&(t.zrEventControl="no_globalout"),this.trigger("mouseout",t))},wheel:function(t){Mi=!0,t=Qt(this.dom,t),this.trigger("mousewheel",t)},mousewheel:function(t){Mi||(t=Qt(this.dom,t),this.trigger("mousewheel",t))},touchstart:function(t){Ti(t=Qt(this.dom,t)),this.__lastTouchMoment=new Date,this.handler.processGesture(t,"start"),Di.mousemove.call(this,t),Di.mousedown.call(this,t)},touchmove:function(t){Ti(t=Qt(this.dom,t)),this.handler.processGesture(t,"change"),Di.mousemove.call(this,t)},touchend:function(t){Ti(t=Qt(this.dom,t)),this.handler.processGesture(t,"end"),Di.mouseup.call(this,t),+new Date-+this.__lastTouchMoment<300&&Di.click.call(this,t)},pointerdown:function(t){Di.mousedown.call(this,t)},pointermove:function(t){Ii(t)||Di.mousemove.call(this,t)},pointerup:function(t){Di.mouseup.call(this,t)},pointerout:function(t){Ii(t)||Di.mouseout.call(this,t)}};P(["click","dblclick","contextmenu"],(function(t){Di[t]=function(e){e=Qt(this.dom,e),this.trigger(t,e)}}));var Li={pointermove:function(t){Ii(t)||Li.mousemove.call(this,t)},pointerup:function(t){Li.mouseup.call(this,t)},mousemove:function(t){this.trigger("mousemove",t)},mouseup:function(t){var e=this.__pointerCapturing;this.__togglePointerCapture(!1),this.trigger("mouseup",t),e&&(t.zrEventControl="only_globalout",this.trigger("mouseout",t))}};function ki(t,e){var n=e.domHandlers;a.pointerEventsSupported?P(bi.pointer,(function(i){Oi(e,i,(function(e){n[i].call(t,e)}))})):(a.touchEventsSupported&&P(bi.touch,(function(i){Oi(e,i,(function(r){n[i].call(t,r),function(t){t.touching=!0,null!=t.touchTimer&&(clearTimeout(t.touchTimer),t.touchTimer=null),t.touchTimer=setTimeout((function(){t.touching=!1,t.touchTimer=null}),700)}(e)}))})),P(bi.mouse,(function(i){Oi(e,i,(function(r){r=Jt(r),e.touching||n[i].call(t,r)}))})))}function Pi(t,e){function n(n){Oi(e,n,(function(i){i=Jt(i),Ci(t,i.target)||(i=function(t,e){return Qt(t.dom,new Ai(t,e),!0)}(t,i),e.domHandlers[n].call(t,i))}),{capture:!0})}a.pointerEventsSupported?P(Si,n):a.touchEventsSupported||P(wi,n)}function Oi(t,e,n,i){t.mounted[e]=n,t.listenerOpts[e]=i,te(t.domTarget,e,n,i)}function Ri(t){var e,n,i,r,o=t.mounted;for(var a in o)o.hasOwnProperty(a)&&(e=t.domTarget,n=a,i=o[a],r=t.listenerOpts[a],Zt?e.removeEventListener(n,i,r):e.detachEvent("on"+n,i));t.mounted={}}var Ni=function(t,e){this.mounted={},this.listenerOpts={},this.touching=!1,this.domTarget=t,this.domHandlers=e},Ei=function(t){function e(e,n){var i=t.call(this)||this;return i.__pointerCapturing=!1,i.dom=e,i.painterRoot=n,i._localHandlerScope=new Ni(e,Di),xi&&(i._globalHandlerScope=new Ni(document,Li)),ki(i,i._localHandlerScope),i}return n(e,t),e.prototype.dispose=function(){Ri(this._localHandlerScope),xi&&Ri(this._globalHandlerScope)},e.prototype.setCursor=function(t){this.dom.style&&(this.dom.style.cursor=t||"default")},e.prototype.__togglePointerCapture=function(t){if(this.__mayPointerCapture=null,xi&&+this.__pointerCapturing^+t){this.__pointerCapturing=t;var e=this._globalHandlerScope;t?Pi(this,e):Ri(e)}},e}(Ft),zi=function(t){function e(e){var n=t.call(this)||this;return n.isGroup=!0,n._children=[],n.attr(e),n}return n(e,t),e.prototype.childrenRef=function(){return this._children},e.prototype.children=function(){return this._children.slice()},e.prototype.childAt=function(t){return this._children[t]},e.prototype.childOfName=function(t){for(var e=this._children,n=0;n<e.length;n++)if(e[n].name===t)return e[n]},e.prototype.childCount=function(){return this._children.length},e.prototype.add=function(t){if(t&&(t!==this&&t.parent!==this&&(this._children.push(t),this._doAdd(t)),t.__hostTarget))throw"This elemenet has been used as an attachment";return this},e.prototype.addBefore=function(t,e){if(t&&t!==this&&t.parent!==this&&e&&e.parent===this){var n=this._children,i=n.indexOf(e);i>=0&&(n.splice(i,0,t),this._doAdd(t))}return this},e.prototype.replaceAt=function(t,e){var n=this._children,i=n[e];if(t&&t!==this&&t.parent!==this&&t!==i){n[e]=t,i.parent=null;var r=this.__zr;r&&i.removeSelfFromZr(r),this._doAdd(t)}return this},e.prototype._doAdd=function(t){t.parent&&t.parent.remove(t),t.parent=this;var e=this.__zr;e&&e!==t.__zr&&t.addSelfToZr(e),e&&e.refresh()},e.prototype.remove=function(t){var e=this.__zr,n=this._children,i=A(n,t);return i<0||(n.splice(i,1),t.parent=null,e&&t.removeSelfFromZr(e),e&&e.refresh()),this},e.prototype.removeAll=function(){for(var t=this._children,e=this.__zr,n=0;n<t.length;n++){var i=t[n];e&&i.removeSelfFromZr(e),i.parent=null}return t.length=0,this},e.prototype.eachChild=function(t,e){for(var n=this._children,i=0;i<n.length;i++){var r=n[i];t.call(e,r,i)}return this},e.prototype.traverse=function(t,e){for(var n=0;n<this._children.length;n++){var i=this._children[n],r=t.call(e,i);i.isGroup&&!r&&i.traverse(t,e)}return this},e.prototype.addSelfToZr=function(e){t.prototype.addSelfToZr.call(this,e);for(var n=0;n<this._children.length;n++){this._children[n].addSelfToZr(e)}},e.prototype.removeSelfFromZr=function(e){t.prototype.removeSelfFromZr.call(this,e);for(var n=0;n<this._children.length;n++){this._children[n].removeSelfFromZr(e)}},e.prototype.getBoundingRect=function(t){for(var e=new Rn(0,0,0,0),n=t||this._children,i=[],r=null,o=0;o<n.length;o++){var a=n[o];if(!a.ignore&&!a.invisible){var s=a.getBoundingRect(),l=a.getLocalTransform(i);l?(Rn.applyTransform(e,s,l),(r=r||e.clone()).union(e)):(r=r||s.clone()).union(s)}}return r||e},e}(ei);zi.prototype.type="group";
 /*!
     * ZRender, a high performance 2d drawing library.
     *
diff --git a/src/Login.vue b/src/Login.vue
index fc921259..c196ddfa 100644
--- a/src/Login.vue
+++ b/src/Login.vue
@@ -2,14 +2,11 @@
   <div class="logins">
     <div class="inside">
       <div class="title">
-        <img src="../public/images/logo-title.svg" />
+        <img src="../public/images/logo-title.svg" alt=""/>
       </div>
       <el-form class="login__box">
         <el-form-item>
-          <el-input
-              class="login--input login__input"
-            v-model="username"
-          >
+          <el-input class="login--input login__input" v-model="username">
             <template #prefix>
               <i class="cn-icon cn-icon-user2"></i>
             </template>
@@ -21,7 +18,7 @@
               prefix-icon="Lock"
               type="password"
               @keyup.enter="login"
-            v-model="pin"
+              v-model="pin"
           ></el-input>
         </el-form-item>
         <el-form-item>
@@ -49,7 +46,7 @@
         <el-form-item v-if="licenseStatus !== -1 && licenseStatus !== 0">
           <div class="license-error-msg">{{licenseStatusErrMsg}}</div>
           <div class="license-file">
-            <button style="position: relative;" class="license__btn margin-r-20" @click.prevent="downloadFile" @keyup.enter="login">
+            <button class="license__btn margin-r-20" @click.prevent="downloadFile" @keyup.enter="login">
               <i class="cn-icon-download1 cn-icon margin-r-6"></i><span>Download c2v file</span>
             </button>
             <el-upload :action="`${baseUrl}sys/license/upload`"
@@ -63,7 +60,7 @@
                        :on-change="fileChange"
                        :on-success="uploadSuccess"
                        :on-error="uploadError">
-              <button style="position: relative;" class="license__btn" @click.prevent="">
+              <button class="license__btn" @click.prevent="">
                 <i class="cn-icon-upload1 cn-icon margin-r-6"></i><span>Upload license</span>
               </button>
             </el-upload>
@@ -84,6 +81,7 @@ import dayjs from 'dayjs'
 import _ from 'lodash'
 import utc from 'dayjs/plugin/utc'
 import { ref } from 'vue'
+
 dayjs.extend(utc)
 
 export default {
@@ -170,7 +168,7 @@ export default {
       }, error => {
         const $self = this
         const reader = new FileReader()
-        reader.onload = function (event) {
+        reader.onload = function () {
           const responseText = reader.result
           const exception = JSON.parse(responseText)
           if (exception.message) {
@@ -192,7 +190,7 @@ export default {
         this.$refs.licenseUpload.submit()
       }
     },
-    uploadSuccess (response) {
+    uploadSuccess () {
       this.$message.success('Success')
       this.licenseStatus = 0
     },
@@ -250,7 +248,7 @@ export default {
     this.queryAppearance()
     this.checkLicenseStatus()
   },
-  setup (props) {
+  setup () {
     const { currentRoute } = useRouter()
     return {
       loginSuccessPath: currentRoute.value.query.redirect,
@@ -262,11 +260,8 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style>
 .logins {
-  background-color: #000C18;
-  background-size: auto;
-  background-repeat: round;
   background-image: url('../public/images/bg.png');
   display: flex;
   height: 100%;
diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss
index b71258f1..108c64a7 100644
--- a/src/assets/css/common.scss
+++ b/src/assets/css/common.scss
@@ -17,6 +17,7 @@ body {
   cursor: default !important;
   overflow: hidden;
 }
+// 在计算文本实际宽度的逻辑中使用到的临时dom
 .temp-dom {
   visibility: hidden;
   position: fixed;
@@ -39,10 +40,6 @@ body {
 .fade-leave-to {
   opacity: 0;
 }
-/* 调整表单错误提示上边距 */
-.el-form-item__error {
-  padding-top: 0 !important;
-}
 
 /* 请求报错样式关于popover的修改 */
 .error-popover {
@@ -69,3 +66,19 @@ body {
 .el-table .cell {
   word-break: break-word !important;
 }
+
+.el-popper.search-show-hint-popover {
+  visibility: hidden !important;
+}
+
+.list-page .cn-table .el-table:not(.chart-table) td {
+  padding: 8px 0;
+}
+
+.cn-dialog {
+  overflow: hidden;
+}
+
+.upload-body{
+  text-align: center;
+}
diff --git a/src/assets/css/common/button.scss b/src/assets/css/common/button.scss
new file mode 100644
index 00000000..54d404e8
--- /dev/null
+++ b/src/assets/css/common/button.scss
@@ -0,0 +1,36 @@
+// 通用的 business 色的 button 和白色 button 样式的颜色，包括 top-tool、right-box 的 footer、各页面保存按钮 等.
+// business 色的 class 为 'business-button'，白色的 class 为 'business-button business-button--light'
+.business-button {
+  color: var(--el-color-white);
+  background-color: var(--el-color-business);
+  border: 1px solid var(--el-color-business-dark-2);
+  border-radius: var(--el-border-radius-small);
+  transition: all linear .1s;
+  cursor: pointer;
+  outline: none;
+
+  &:hover:not(:disabled) {
+    background-color: var(--el-color-business-light-2);
+  }
+  &:focus:not(:disabled) {
+    background-color: var(--el-color-business-dark-1);
+  }
+
+  &.business-button--light {
+    color: var(--el-text-color-primary);
+    background-color: var(--el-fill-color-blank);
+    border: 1px solid var(--el-color-info-light-7);
+
+    &:hover:not(:disabled) {
+      background-color: var(--el-fill-color);
+    }
+    &:focus:not(:disabled) {
+      background-color: var(--el-fill-color-darker);
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.66;
+  }
+}
diff --git a/src/assets/css/common/cover-element-plus.scss b/src/assets/css/common/cover-element-plus.scss
index 6eeb4fe3..bec0b6c0 100644
--- a/src/assets/css/common/cover-element-plus.scss
+++ b/src/assets/css/common/cover-element-plus.scss
@@ -14,7 +14,7 @@
   height: 0 !important;
 }*/
 
-.el-select__wrapper {
+/*.el-select__wrapper {
   min-height: 28px !important;
 }
 .el-input__wrapper {
@@ -26,7 +26,7 @@
 }
 .el-table td.el-table__cell div {
   margin-left: -1px;
-}
+}*/
 .el-table .sort-caret.ascending {
   border-bottom-color: #c0c4cc !important;
 }
@@ -80,7 +80,6 @@
 }
 .el-switch {
   --el-switch-on-color: #38ACD2;
-  --el-switch-off-color: #C0CEDB;
 }
 //.el-button:hover {
 //  color: $--color-primary !important;
diff --git a/src/assets/css/common/index.scss b/src/assets/css/common/index.scss
index 39aad316..5ca508e3 100644
--- a/src/assets/css/common/index.scss
+++ b/src/assets/css/common/index.scss
@@ -1,6 +1,6 @@
-@import 'right-box-common';
-@import 'table-common';
-@import 'part-select';
+@use 'right-box-common';
+@use 'table-common';
+@use 'button';
 
 /* 通用css */
 .panel-chart__no-data {
diff --git a/src/assets/css/common/part-select.scss b/src/assets/css/common/part-select.scss
deleted file mode 100644
index 52cad4d3..00000000
--- a/src/assets/css/common/part-select.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-// 部分 select 通用样式
-.el-select-dropdown {
-  .el-scrollbar {
-    .el-select-dropdown__wrap {
-      .el-scrollbar__view.el-select-dropdown__list {
-        .el-select-dropdown__item {
-          padding: 0 8px;
-          height: 24px;
-          line-height: 24px;
-          font-size: 12px;
-          font-weight: 400;
-        }
-        .el-select-dropdown__item.selected {
-          color: #2C72C6;
-        }
-        .el-select-dropdown__item:hover {
-          color: #2C72C6;
-          background: #F7F7F7;
-        }
-      }
-    }
-  }
-}
diff --git a/src/assets/css/common/right-box-common.scss b/src/assets/css/common/right-box-common.scss
index 4c00f6c4..b0759e89 100644
--- a/src/assets/css/common/right-box-common.scss
+++ b/src/assets/css/common/right-box-common.scss
@@ -1,3 +1,5 @@
+$border-radius-small: 2px;
+
 .common-right-box {
   height: 100%;
 
@@ -25,16 +27,17 @@
     align-items: center;
     height: 60px;
     padding: 0 20px;
-    border-bottom: 1px solid $--right-box-border-color;
+    border-bottom: 1px solid var(--el-border-color-light);
 
     .header__title {
       font-size: 16px;
       font-weight: bold;
-      color: #333;
+      color: var(--el-text-color-primary);
     }
+
     .header__operation {
       i {
-        color: #999;
+        color: var(--el-color-info);
         font-size: 14px;
       }
     }
@@ -46,105 +49,41 @@
     overflow-x: hidden;
     overflow-y: auto;
 
-    .el-textarea__inner {
-      padding: 5px 70px 4px 15px;
-    }
-    .container__form-width.container__form{
-      .input-box {
-        .el-textarea {
-          .el-textarea__inner {
-            width: 530px;
-            height: 32px;
-            padding: 5px 70px 4px 10px;
-          }
-          .el-input__count {
-            right: -40px;
-            line-height: 29px;
-            height: 25px;
-          }
-        }
-      }
-    }
-    .container__form {
-
-    }
-    .el-form-item__content {
-      .input-box {
-        .el-textarea {
-          .el-textarea__inner {
-            width: 517px;
-            height: 32px;
-            padding: 5px 70px 4px 10px;
-          }
-          .el-input__count {
-            right: -40px;
-            line-height: 29px;
-            height: 25px;
-          }
-        }
-      }
-    }
-    .form-row-item {
-      .input-box {
-        .el-textarea {
-          .el-textarea__inner {
-            width: 466px;
-            height: 32px;
-            padding: 5px 70px 4px 10px;
-          }
-          .el-input__count {
-            right: 0;
-          }
-        }
-      }
-    }
     .el-form-item {
       .el-input__count {
         line-height: 29px;
         height: 25px;
       }
     }
-    .el-form-item {
-      .el-input--small.not-fixed-height {
-        height: 32px;
-        .el-input__count {
-          line-height: 29px;
-          height: 25px;
-        }
-      }
-    }
+
     .el-input__inner, .el-textarea__inner {
-      padding: 0 10px;
-      border-radius: $--border-radius-primary;
-      border: 1px solid $--right-box-border-color;
+      border-radius: $border-radius-small;
     }
+
     .el-textarea__inner {
-      padding: 5px 70px 4px 15px;
+      padding-right: 70px;
     }
+
     .el-form {
       padding-top: 20px;
 
       .el-form-item {
         margin-bottom: 16px;
-        .el-form-item__label{
+
+        .el-form-item__label {
           padding-bottom: 6px;
           font-size: 14px;
           line-height: 16px;
-          color: #666;
+          color: var(--el-text-color-regular);
         }
 
-        .el-input__inner:hover {
-          border-color: darken($--right-box-border-color, 10%);
-        }
-        .el-input__inner:focus {
-          border-color: darken($--right-box-border-color, 20%);
-        }
         .el-form-item__label {
           padding-bottom: 2px;
         }
       }
+
       .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus, .el-message-box__input input.invalid, .el-message-box__input input.invalid:focus {
-        border-color: #F56C6C
+        border-color: var(--el-color-danger);
       }
 
       .form__sub-title {
@@ -155,15 +94,16 @@
         line-height: 32px;
         font-size: 14px;
         font-weight: bold;
-        color: #555;
-        background-color: #F6F6F6;
+        color: var(--el-text-color-regular);
+        background-color: var(--el-fill-color-light);
       }
+
       /* 虚线框类型的form-item */
       .form__dotted-item {
         padding: 10px 10px 6px 10px;
         margin-bottom: 10px;
-        border: 1px dashed $--border-color-primary;
-        border-radius: $--border-radius-primary;
+        border: 1px dashed var(--el-color-info-light-7);
+        border-radius: $border-radius-small;
 
         .el-form-item {
           margin-bottom: 0;
@@ -171,42 +111,36 @@
           .el-form-item__label {
             width: 100%;
           }
+
           .form__labels-label {
             display: flex;
             justify-content: space-between;
           }
         }
       }
-      .form__create-btn {
-        margin-bottom: 20px;
-        width: 300px;
-        height: 28px;
-        border: 1px solid lighten($--color-primary, 60%);
-        border-radius: $--border-radius-primary;
-        background-color: lighten($--color-primary, 95%);
 
-        i {
-          color: $--color-primary;
-        }
-      }
       .form__flex-container {
         display: flex;
         justify-content: center;
         align-items: center;
       }
-      .one-third-form-item-left{
+
+      .one-third-form-item-left {
         display: inline-block;
         width: calc(50% - 5px);
       }
-      .one-third-form-item-right{
+
+      .one-third-form-item-right {
         display: inline-block;
         width: calc(50% - 5px);
       }
-      .form-item--half-width-other-two{
+
+      .form-item--half-width-other-two {
         display: inline-block;
         width: calc(50% - 10px);
       }
-      .form-item--half-width-other{
+
+      .form-item--half-width-other {
         display: inline-block;
         width: calc(50% - 10px);
       }
@@ -218,40 +152,17 @@
     align-items: center;
     justify-content: center;
     height: 70px;
-    box-shadow: -3px 0 8px -3px rgba(205,205,205,0.77);
+    box-shadow: -3px 0 8px -3px rgba(205, 205, 205, 0.77);
 
-    .footer__btn {
+    .business-button {
       margin: 0 15px;
       height: 30px;
       min-width: 74px;
       padding: 0 15px;
-      color: white;
-      background-color: $--color-primary;
-      border: none;
-      border-radius: 4px;
-      outline: none;
       font-size: 14px;
-      cursor: pointer;
-      transition: background-color linear .2s, color linear .1s;
-    }
-    .footer__btn:hover:not(.footer__btn--disabled) {
-      background-color: lighten($--color-primary, 10%);
-    }
-    .footer__btn--light {
-      background-color: white;
-      border: 1px solid $--border-color-primary;
-      color: #333;
-    }
-    .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
-      background-color: white;
-      border-color: lighten($--color-primary, 40%);
-      color: $--color-primary;
-    }
-    .footer__btn--disabled {
-      opacity: .6;
-      cursor: default;
     }
   }
+
   /* 隐藏label新增按钮处级联选择器的input */
   .hide-casc-input {
     position: relative;
@@ -263,16 +174,20 @@
       opacity: 0;
     }
   }
+
   .label__multi-text {
     display: flex;
     justify-content: space-between;
   }
+
   .right-box__select {
     width: 100%;
   }
+
   .el-select-last.right-box-select-dropdown {
     left: 1698px;
   }
+
   .limit-height .el-cascader-menu {
     max-height: 200px;
     overflow: auto;
@@ -291,6 +206,7 @@
       }
     }
   }
+
   .cn-icon-minus-position {
     display: inline-flex;
     flex-direction: column;
@@ -301,31 +217,8 @@
     transform: translateY(-50%);
     justify-content: space-between;
   }
-  .form-item--end-with-btn { // 末尾留出btn宽度空间的form item
 
-  }
   .el-form-item__content .el-autocomplete .el-input-group {
     vertical-align: unset;
   }
-  .el-input__wrapper {
-    border-radius: 2px;
-    height: 32px !important;
-    line-height: 32px !important;
-    //box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
-    box-shadow: 0 0 0 1px #e7eaed inset;
-  }
-  .el-input__inner, .el-textarea__inner {
-    border: none !important;
-  }
-  .el-select__wrapper {
-    height: 32px;
-    line-height: 32px;
-  }
-  .el-switch {
-    --el-switch-on-color: #699DC9;
-    --el-switch-off-color: #C0CEDB;
-  }
-  .el-textarea__inner {
-    font-size: 12px;
-  }
 }
diff --git a/src/assets/css/common/table-common.scss b/src/assets/css/common/table-common.scss
index 1ca388fb..094c6656 100644
--- a/src/assets/css/common/table-common.scss
+++ b/src/assets/css/common/table-common.scss
@@ -2,10 +2,13 @@
 .list-page {
   height: 100%;
   width: 100%;
-  background-color: #f6f6f6;
+  background-color: var(--el-bg-color-page);
+  $border-color: var(--el-color-info-light-7);
+  $border-radius: 2px;
+  $color-white: var(--el-color-white);
 
   .main-list {
-    background-color: white;
+    background-color: var(--el-fill-color-blank);
     position: relative;
     display: flex;
     flex-direction: column;
@@ -13,16 +16,20 @@
     width: 100%;
     z-index: 0;
   }
+
   .main-container {
     padding: 0;
     height: 100%;
-    &>div {
-      background-color: white;
+
+    & > div {
+      background-color: var(--el-fill-color-blank);
     }
   }
+
   .main-list.main-list-with-sub {
     height: 50%;
   }
+
   .main-modal {
     position: absolute;
     height: 100%;
@@ -30,9 +37,10 @@
     display: none;
     z-index: 100;
   }
+
   .top-tools {
     display: flex;
-    align-items : center;
+    align-items: center;
     position: relative;
     justify-content: space-between;
     padding: 12px 20px;
@@ -41,165 +49,96 @@
       align-items: center;
       padding: 0 70px 0 15px;
       height: 44px;
-      background-color: white;
-      border: 1px solid #E6EAED;
-
+      background-color: var(--el-fill-color-blank);
+      border: 1px solid var(--el-border-color-light);
     }
+
     .top-tool-search {
-      .top-tool-btn {
-        border-left: none;
+      .top-tool-search__display {
+        display: flex;
       }
+
       .top-tool-btn--search {
         width: 28px !important;
-        height:28px !important;
-        padding:unset !important;
+        height: 28px !important;
+        padding: unset !important;
         display: flex;
         align-items: center;
         justify-content: center;
+        border-radius: 0 var(--el-border-radius-small) var(--el-border-radius-small) 0 !important;
+        border-left: none;
+
         i {
           font-size: 14px;
-          color: $--text-color-2;
-          margin-right:unset !important;
+          margin-right: unset !important;
         }
       }
-      .top-tool-btn--search:hover {
-        border-left: none !important;
+
+      .el-input__wrapper, .el-input__inner {
+        border-radius: var(--el-border-radius-small) 0 0 var(--el-border-radius-small) !important;
       }
-      .top-tool-btn--search:focus {
-        border-left: none !important;
-      }
-      .el-input--small .el-input__wrapper {
-        height: 28px !important;
-        border-radius: 2px 0 0 2px !important;
-      }
-      .el-input--small{
+
+      .el-input {
         width: 214px !important;
-        line-height: 27px;
-      }
-      .el-input--small .el-input__inner {
-        height: 28px;
-        border-radius: 2px 0 0 2px;
       }
     }
 
     .top-tool-right {
       display: flex;
     }
+
     .top-tool-left {
       display: flex;
+      min-width: 300px;
     }
+
     .top-tool-btn-group {
       display: flex;
+
       .top-tool-btn:not(:last-of-type):not(:first-of-type) {
         border-left: none;
         border-radius: 0;
       }
+
       .top-tool-btn:first-of-type:not(:last-of-type) {
-        border-radius: $--button-border-radius 0 0 $--button-border-radius;
+        border-radius: $border-radius 0 0 $border-radius;
       }
+
       .top-tool-btn:last-of-type:not(:first-of-type) {
-        border-radius: 0 $--button-border-radius $--button-border-radius 0;
+        border-radius: 0 $border-radius $border-radius 0;
         border-left: none;
       }
     }
-    .top-tool-btn {
-      cursor: pointer;
+
+    .business-button {
       height: 28px;
       width: 72px;
-      border: 1px solid $--border-color-primary;
-      outline: none;
-      border-radius: $--button-border-radius;
-      background-color: $--button-gray-background-color;
-      transition: background-color linear .1s;
-      font-size:12px;
-      font-weight: 500;
+      font-size: 12px;
+
       i {
         font-size: 14px;
-        color: #575757;
-        margin-right:4px;
-      }
-    }
-
-    .top-tool-btn:disabled {
-      cursor: not-allowed;
-      opacity: 0.66;
-      i {
-
-      }
-    }
-
-    .top-tool-btn.top-tool-btn--text {
-      padding: 0 8px;
-      width: unset;
-      color: #666;
-    }
-    .top-tool-btn:hover:not(.cn-btn-disabled) {
-      border: 1px solid $--border-color-primary;
-      background-color: $--button-gray-hover-background-color;
-    }
-    .top-tool-btn:focus:not(.cn-btn-disabled), .top-tool-btn.is-focus {
-      background-color: $--button-gray-active-background-color;
-      border: 1px solid $--border-color-primary;
-      i {
-        color: #575757;
-      }
-    }
-    .top-tool-btn--delete.top-tool-btn:focus:not(.cn-btn-disabled) {
-      background-color: $--button-gray-hover-background-color;
-      border-color: #FFC4B9;
-
-      i {
-        color: #F0745A;
-      }
-    }
-    .top-tool-btn--create {
-      background-color: #38ACD2 !important;
-      border-color: #2E88A6 !important;
-      color:#FFFFFF;
-      i {
-        color: #FFFFFF;
-      }
-    }
-    .top-tool-btn--create:hover {
-      background-color: #57B8D9 !important;
-      border-color: #2E88A6 !important;
-      color:#FFFFFF;
-      i {
-        color: #FFFFFF;
-      }
-    }
-    .top-tool-btn--create:focus {
-      background-color: #31A5CD !important;
-      border-color: #2E88A6 !important;
-      color:#FFFFFF !important;
-      i {
-        color: #FFFFFF !important;
-      }
-    }
-    .top-tool-btn--create:disabled {
-      opacity: 0.66;
-      background-color: #38ACD2 !important;
-      border-color: #2E88A6 !important;
-      color:#FFFFFF;
-      i {
-        color: #FFFFFF;
+        margin-right: 4px;
       }
     }
 
     .btn-customize {
-      color: #2E88A6;
+      color: var(--el-color-primary);
       font-size: 12px;
-      .icon-gear{
-        color: #2E88A6;
-        width:12px;
-        height:12px;
-        margin-right:2px;
-        font-size:12px;
+      padding: 2px 11px;
+
+      .icon-gear {
+        color: var(--el-color-primary);
+        width: 12px;
+        height: 12px;
+        margin-right: 2px;
+        font-size: 12px;
       }
     }
 
     .btn-customize:hover {
-      cursor:pointer;
+      cursor: pointer;
+      background: var(--el-color-primary-light-9);
+      border-radius: 2px;
     }
 
     .top-tool-btn--dropdown {
@@ -220,188 +159,17 @@
       border-bottom: none;
 
       thead {
-        color: #333;
+        color: var(--el-text-color-primary);
       }
+
       .el-switch {
         height: auto;
-        --el-switch-on-color: #38ACD2;
-        --el-switch-off-color: #C0CEDB;
-      }
-      .el-checkbox__input {
-        --el-checkbox-checked-bg-color: #38ACD2;
       }
     }
   }
-  /*.cn-table {
-    position: relative;
-    padding: 0 20px;
-    width: 100%;
 
-    flex: auto;
-    height: calc(100% - 58px);
-
-    .el-table:not(.chart-table) {
-      position: absolute;
-      width: calc(100% - 40px);
-      // border: 1px solid $--right-box-border-color;
-      //border-bottom: none;
-      border-radius:4px;
-
-      .caret-wrapper {
-        height: 23px;
-        .sort-caret.ascending {
-          top: 1px;
-        }
-        .sort-caret.descending {
-          bottom: 0;
-        }
-      }
-      .el-switch {
-        height: auto;
-        --el-switch-on-color: #699DC9;
-        --el-switch-off-color: #C0CEDB;
-      }
-
-      .el-table-column--selection {
-        width: 55px !important;
-      }
-
-      td {
-        padding: 3px 0 4px 0;
-        border-bottom: 1px solid $--right-box-border-color;
-      }
-      th {
-        border-color: $--right-box-border-color;
-        padding: 8px 0;
-        background: #FFF;
-        border-right:0px;
-      }
-      .el-table__header th:first-of-type {
-        border-left: none;
-      }
-      .gutter {
-        position: fixed;
-        right: 31px;
-        height: 49px;
-        border-bottom: 1px solid $--right-box-border-color;
-        background-color: white;
-      }
-      thead {
-        color: #333;
-      }
-
-      .el-table__body tr:hover>td, .el-table__body tr.hover-row.current-row>td,
-      .el-table__body tr.hover-row.el-table__row--striped.current-row>td,
-      .el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td {
-        background-color: lighten($--color-primary, 95%) !important;
-      }
-      .table-operation-title {
-        text-align: center;
-      }
-      .table-operation-items {
-        display: flex;
-        justify-content: center;
-        .table-operation-item {
-          display: flex;
-          height: 22px;
-          border-radius: $--button-border-radius;
-          outline: none;
-          transition: background-color linear .1s;
-        }
-        .table-operation-item.table-operation-item--disable{
-          border: 1px solid $--border-color-primary;
-          background-color: #DEDEDE;
-          opacity: 0.6;
-          outline: none;
-          i {
-            font-size: 14px;
-            color: #fff;
-          }
-        }
-        &>.table-operation-item {
-          justify-content: center;
-          align-items: center;
-          width: 30px;
-          margin-right: 10px;
-          border: none;
-          border-radius: $--button-border-radius;
-          background-color: $--button-primary-background-color;
-          opacity: 1;
-          cursor: pointer;
-          transition: all .2s;
-          i {
-            color: $--button-primary-color;
-            font-size: 12px;
-          }
-        }
-        &>.table-operation-item:hover {
-          opacity: .8;
-        }
-        .table-operation-item.table-operation-item--more {
-          justify-content: center;
-          align-items: center;
-          border: 1px solid $--border-color-primary;
-          width: 30px;
-          i {
-            color: #999;
-            font-size: 12px;
-          }
-        }
-      }
-    }
-  }
-  !* start--覆盖el-table边框、gutter等样式 *!
-  .el-table__body-wrapper, .el-table__fixed-body-wrapper {
-    box-shadow: 1px 0 $--right-box-border-color;
-
-    .cell {
-      color: #333;
-    }
-  }
-  .el-table__body-wrapper .is-hidden, .el-table__header-wrapper .is-hidden {
-    visibility: hidden;
-  }
-  .cn-table {
-    .el-table--border td {
-      border-right: none !important;
-    }
-    !* 最后一列用box-shadow模拟边框 *!
-    !*.el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__body-wrapper td:nth-last-child(2) {
-      box-shadow: 1px 0 $--right-box-border-color;
-    }
-    .el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__header-wrapper th:nth-last-child(3) {
-      //border-right: none !important;
-      box-shadow: 1px 0 $--right-box-border-color;
-    }
-    .el-table__fixed-body-wrapper {
-      td:not(.is-hidden) {
-        border-left: 1px solid $--right-box-border-color;
-      }
-    }
-    .el-table__fixed-header-wrapper {
-      th:not(.is-hidden) {
-        border-left: 1px solid $--right-box-border-color;
-      }
-      th:last-of-type {
-        border-right: none !important;
-      }
-    }*!
-    .el-table--border:not(.chart-table)::after, .el-table--group:not(.chart-table)::after {
-      // width: 0;
-    }
-    .el-table--border {
-      border-bottom: 1px solid #E7EAED;
-
-      .el-table__inner-wrapper {
-        height: 100% !important;
-      }
-      .el-table__inner-wrapper::before {
-        height: 0;
-      }
-    }
-  }*/
   /* end--覆盖el-table边框、gutter等样式 */
-  .cn-pagination{
+  .cn-pagination {
     position: absolute;
     bottom: 8px;
     height: 48px;
@@ -414,45 +182,13 @@
   .el-scrollbar__view {
     height: 100%;
   }
+
   // 令no data出现时table底部不出现滚动条
   .el-table__empty-block {
     width: calc(100% - 8px) !important;
   }
 }
-/*.operation-dropdown-text {
-  display: inline-block;
-  font-size: 13px;
-}
 
-.search-box {
-  padding: 0 20px 20px;
-}
-.click-search-dropdown {
-  width: calc(100% - 300px) !important;
-  left: 270px !important;
-  margin-top: -3px !important;
-  box-shadow: none;
-
-  border-radius: 0;
-  border-color: #c7c7c7;
-
-  .popper__arrow {
-    display: none;
-  }
-  .el-cascader-menu__list {
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-    max-height: 120px;
-  }
-}
-.el-popper.el-cascader__dropdown.click-search-dropdown::after {
-  content: '';
-  position: absolute;
-  top: -1px;
-  height: 1px;
-  background-color: white;
-}*/
 .col-resize-area {
   position: absolute;
   top: 0;
@@ -461,22 +197,44 @@
   height: 100%;
   cursor: col-resize;
 }
-.margin-r-10{
+
+.margin-r-10 {
   margin-right: 10px;
 }
-.margin-r-20{
+
+.margin-r-20 {
   margin-right: 20px;
 }
-.margin-l-10{
+
+.margin-l-10 {
   margin-left: 10px;
 }
-.margin-t-20{
+
+.margin-t-20 {
   margin-top: 20px;
 }
-.margin-r-3{
+
+.margin-r-3 {
   margin-right: 3px;
 }
-.tooltip-column-name {
-  color: #aeb0b9;
-  height:40px;
+
+.margin-r-30 {
+  margin-right: 30px;
+}
+
+.margin-l-6 {
+  margin-left: 6px;
+}
+
+.margin-b-10 {
+  margin-bottom: 10px;
+}
+
+.padding-r-20 {
+  padding-right: 20px;
+}
+
+.tooltip-column-name {
+  color: var(--el-color-info-light-3);
+  height: 40px;
 }
diff --git a/src/assets/css/components/components/advancedSearch/advanced-search2.scss b/src/assets/css/components/components/advancedSearch/advanced-search2.scss
index f32d71e1..8465d6c4 100644
--- a/src/assets/css/components/components/advancedSearch/advanced-search2.scss
+++ b/src/assets/css/components/components/advancedSearch/advanced-search2.scss
@@ -1,3 +1,4 @@
+$color-primary: var(--el-color-primary);
 .advanced-search {
   position: relative;
   height: 100%;
@@ -7,7 +8,7 @@
 
     &.entity-explorer-home {
       margin-right: 1px;
-      color: #3976CB;
+      color: $color-primary;
 
       &.search__suffixes--text-mode, &.search__suffixes--tag-mode {
         .search__suffix:last-of-type {
@@ -17,7 +18,7 @@
           background-color: transparent;
 
           i {
-            color: #3976CB;
+            color: $color-primary;
           }
         }
       }
@@ -37,7 +38,7 @@
         border-radius: 0 2px 2px 0;
 
         .cn-icon-search-advance, .cn-icon-search-normal, .cn-icon-filter {
-          color: #A6AAAE;
+          color: var(--el-color-info);
           font-size: 18px;
         }
 
@@ -49,18 +50,18 @@
           width: 41px;
           height: 38px;
           line-height: 39px;
-          background: #38ACD2;
+          background: var(--el-color-business);
 
           i {
             font-size: 22px;
-            color: #fff;
+            color: var(--el-color-white);
           }
         }
       }
       .search__suffix-close {
         i {
           font-size: 17px;
-          color: #C4C4C4;
+          color: var(--el-text-color-regular);
           cursor: pointer;
         }
       }
@@ -70,13 +71,13 @@
     }
 
     &.search__suffixes--tag-mode__block {
-      background: #fff;
+      background: var(--el-bg-color);
     }
   }
   .HintInfo {
     height: 280px;
     overflow: auto;
-    background: #fff;
+    background: var(--el-bg-color);
 
     ul {
       min-width: 300px;
@@ -88,13 +89,12 @@
     .relative-item {
       text-indent: 1em;
       font-size: 14px !important;
-      color: #575757;
+      color: var(--el-text-color-regular);
       height: 24px;
       line-height: 24px !important;
 
       &:hover {
-        background-color: #f0f5fa;
-        color: #046ECA;
+        background-color: var(--el-fill-color-light);
       }
     }
     .hint-clear {
@@ -104,7 +104,7 @@
 }
 .detections {
   .tag-search, .CodeMirror {
-    border: 1px solid #E2E5EC;
+    border: 1px solid var(--el-border-color-light);
   }
 }
 .tag-search {
@@ -115,8 +115,8 @@
   border-radius: 2px;
   padding-left: 10px;
   padding-right: 80px;
-  background-color: $--select-bg-color-1;
-  border: 1px solid #DEDEDE;
+  background-color: var(--el-bg-color);
+  border: 1px solid var(--el-color-info-light-7);
 
   &::-webkit-scrollbar {
     width: 8px;
@@ -134,17 +134,17 @@
     height: 22px;
     padding: 0 4px;
     font-size: 12px;
-    color: #333;
-    background-color: #F5F6F7;
-    border: 1px solid #D7D7D7;
+    color: var(--el-text-color-primary);
+    background-color: var(--el-fill-color-light);
+    border: 1px solid var(--el-border-color-dark);
     border-radius: 1px;
     cursor: pointer;
     transition: all linear .1s;
     margin-right: 30px;
 
     &:hover {
-      background-color: white;
-      color: #111;
+      background-color: var(--el-bg-color);
+      color: var(--el-text-color-primary);
     }
   }
 
@@ -153,7 +153,7 @@
     height: 22px;
     padding: 0 6px;
     font-size: 12px;
-    background-color: #F5F6F7;
+    background-color: var(--el-fill-color-light);
 
     &>div:not(:last-of-type) {
       margin-right: 6px;
@@ -163,22 +163,23 @@
       .condition__delete {
         display: flex;
         align-items: center;
-        color: #bcbdbd;
+        color: var(--el-text-color-disabled);
         font-size: 16px;
         margin-right: 6px;
         cursor: pointer;
         transition: all linear .1s;
 
         &:hover {
-          color: #999;
+          color: var(--el-color-info);
         }
       }
       .condition__column, .condition__operator, .condition__value {
         display: flex;
         align-items: center;
-        color: #333;
+        color: var(--el-text-color-primary);
         font-weight: bold;
         cursor: text;
+
         .el-select {
           min-width: 210px !important;
           min-height: 20px !important;
@@ -190,12 +191,9 @@
           margin-top: -4px;
           cursor: pointer;
         }
-        .el-select__wrapper.is-focused {
-          box-shadow: 0 0 0 1px $--color-primary inset !important;
-        }
       }
       .condition__operator {
-        color: #3976CB;
+        color: $color-primary;
       }
       .condition__operation-select {
         display: flex;
@@ -203,7 +201,7 @@
 
         .condition__operation {
           margin: 0 5px;
-          color: #3976CB;
+          color: $color-primary;
         }
       }
     }
@@ -211,7 +209,7 @@
       .connection__value {
         display: flex;
         align-items: center;
-        color: #3976CB;
+        color: $color-primary;
         font-weight: bold;
         cursor: text;
       }
@@ -227,9 +225,3 @@
   min-width: 125px !important;
   padding: 8px 10px !important;
 }
-.el-input__wrapper.is-focus {
-  box-shadow: 0 0 0 1px $--color-primary inset !important;
-}
-.el-select-dropdown__item.is-selected {
-  color: #2c72c6 !important;
-}
diff --git a/src/assets/css/components/components/common/TimeRange/date-time-range.scss b/src/assets/css/components/components/common/TimeRange/date-time-range.scss
index 4157c91b..39636d7d 100644
--- a/src/assets/css/components/components/common/TimeRange/date-time-range.scss
+++ b/src/assets/css/components/components/common/TimeRange/date-time-range.scss
@@ -1,9 +1,10 @@
+@use 'element-plus/theme-chalk/src/select.scss' as *;
 .date-range-box {
   font-size: 14px;
-  border-radius: 2px;
-  //margin-right: 10px;
+  border-radius: var(--el-border-radius-base);
   display: flex;
   cursor: pointer;
+  transition: var(--el-transition-duration);
 
   .date-range-refresh {
     margin-left: 10px;
@@ -32,15 +33,18 @@
     padding: 0 10px;
     display: flex;
     justify-content: space-around;
-    //background: #FFFFFF;
-    background: var(--el-fill-color-blank);
-    //border: 1px solid #DEDEDE;
-    border: 1px solid var(--el-border-color);
-    box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
-    border-radius: 2px;
+    @include mixed-input-border(var(--el-border-color));
+    border-radius: var(--el-border-radius-base);
     height: 28px;
     line-height: 28px;
-    transition: width .3s;
+    transition: all var(--el-transition-duration);
+
+    &:hover {
+      @include mixed-input-border(var(--el-border-color-hover));
+    }
+    &:focus {
+      @include mixed-input-border(var(--el-color-primary));
+    }
 
     .cn-icon {
       font-size: 14px;
@@ -58,26 +62,22 @@
 
   .date-range-title {
     font-size: 14px;
-    //color: #666666;
-    color: $--text-color-4;
-    font-weight: 600;
+    color: var(--el-text-color-regular);
+    font-weight: bold;
     padding: 14px 0 7px 8px;
   }
 
-  .calendar-popover-text.calendar-popover__small {
-    i {
-      font-weight: 300;
-      color: #575757;
-    }
-  }
   .calendar-popover-text {
     white-space: nowrap;
     display: inline-block;
     margin: 0 5px;
-    //color: #353636;
-    color: $--text-color-1;
+    color: var(--el-text-color-primary);
+
     .cn-icon-Data {
-      color: #575757;
+      color: var(--el-text-color-regular);
+    }
+    .cn-icon-dropdown {
+      color: var(--el-text-color-placeholder);
     }
   }
 
@@ -92,9 +92,8 @@
   .date-range-panel {
     height: 426px;
     width: 500px;
-    //background: #FFFFFF;
-    background: $--select-bg-color-1;
-    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    background-color: var(--el-fill-color-blank);
+    box-shadow: var(--el-box-shadow-light);
     position: absolute;
     right: 10px !important;
     z-index: 2;
@@ -106,25 +105,23 @@
 
       .content-title {
         font-size: 14px;
-        //color: #666666;
-        color: var(--el-text-color-primary);
-        font-weight: 400;
+        color: var(--el-text-color-regular);
         margin-bottom: 12px;
       }
 
       .content-input {
-        border: 1px solid #E7EAED;
-        border-radius: 2px;
+        border: 1px solid var(--el-border-color);
+        color: var(--el-text-color-primary);
+        border-radius: var(--el-border-radius-base);
         width: 230px;
         padding: 0 8px;
         height: 30px;
         line-height: 30px;
         margin-bottom: 12px;
-        outline: #169AFF;
       }
 
       .content-input:focus {
-        border: 1px solid #169AFF;
+        border: 1px solid var(--el-border-color-hover);
       }
 
       .date-range-history {
@@ -133,14 +130,13 @@
         overflow-y: auto;
 
         .date-range-history-item {
+          color: var(--el-text-color-regular);
           padding: 5px 0;
           cursor: pointer;
         }
 
         .date-range-history-item:hover {
-          /*font-weight: 600;*/
-          //background: #f9f9f9;
-          background: $--select-bg-color-hover-1;
+          background-color: var(--el-fill-color-light);
         }
       }
       .el-range-editor.el-input__wrapper{
@@ -151,6 +147,7 @@
     .date-range-panel-content-right {
       display: flex;
       flex-direction: column;
+      border-left: 1px solid var(--el-border-color-light);
 
       ul {
         flex: 1;
@@ -165,33 +162,26 @@
           display: flex;
           flex-direction: column;
           justify-content: center;
-          //color: #333333;
-          color: var(--el-text-color-primary);
-          font-weight: 400;
+          color: var(--el-text-color-regular);
           padding: 0 10px;
           cursor: pointer;
         }
 
+        li:hover {
+          background-color: var(--el-fill-color-light);
+          color: var(--el-text-color-regular);
+        }
+
         li.active {
-          //background: #F2F9FF;
-          //color: #0091FF;
-          background: $--select-bg-color-1;
           color: var(--el-color-primary);
-          font-weight: 400;
+          font-weight: bold;
 
           .cn-icon-check {
-            color: #0091FF;
+            color: var(--el-color-primary);
             position: absolute;
             right: 7px;
           }
         }
-
-        li:hover {
-          //background: #F2F9FF;
-          background: var(--el-color-primary-light-9);
-          //color: #0091FF;
-          color: var(--el-color-primary);
-        }
       }
     }
   }
@@ -203,7 +193,7 @@
   .date-range-panel-bottom {
     height: 44px;
     line-height: 44px;
-    border-top: 1px solid rgba(0, 0, 0, 0.09);
+    border-top: 1px solid var(--el-border-color-light);
     padding: 0 10px;
     display: flex;
     justify-content: space-between;
@@ -234,6 +224,6 @@
     left: -6px !important;
   }
   .el-popper__arrow::before {
-    border: 1px solid #E7EAED !important;
+    border: 1px solid var(--el-border-color-light) !important;
   }
 }
diff --git a/src/assets/css/components/components/common/TimeRange/time-refresh.scss b/src/assets/css/components/components/common/TimeRange/time-refresh.scss
index 2caf3d8e..eb2a7685 100644
--- a/src/assets/css/components/components/common/TimeRange/time-refresh.scss
+++ b/src/assets/css/components/components/common/TimeRange/time-refresh.scss
@@ -2,13 +2,12 @@
   position: relative;
   font-size: 14px;
 
-  .cn-icon-refresh{
+  .cn-icon-refresh1 {
     font-size: 14px;
-    color:  #575757;
   }
   .cn-icon-dropdown {
     font-size: 14px;
-    transition: all .3s;
+    transition: all var(--el-transition-duration);
     display: inline-block;
   }
   .cn-icon-dropdown.active{
@@ -17,53 +16,55 @@
   .refresh-list{
     position: absolute;
     z-index: 2;
-    //background: #FFFFFF;
-    background: $--select-bg-color-1;
     border: 1px solid var(--el-border-color);
-    box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
-    border-radius: 2px;
+    background-color: var(--el-fill-color-blank);
+    box-shadow: var(--el-box-shadow-light);
+    border-radius: var(--el-border-radius-base);
     top: 30px;
     right: 0;
+
     .refresh-list-item{
       width: 82px;
       flex: 1;
       display: flex;
       flex-direction: column;
       justify-content: center;
-      color: $--text-color-5;
+      color: var(--el-text-color-regular);
       cursor: pointer;
       position: relative;
       padding: 8px 0 8px 12px;
     }
     .refresh-list-item.active{
-      background: $--select-bg-color-1;
-      color: #0091FF;
-      font-weight: 400;
+      color: var(--el-color-primary);
+      font-weight: bold;
+
       .cn-icon-check{
-        color: #0091FF;
+        color: var(--el-color-primary);
         position: absolute;
         right: 7px;
       }
     }
     .refresh-list-item:hover{
-      //background: #F2F9FF;
-      background: $--select-bg-color-hover-1;
-      color: #0091FF;
+      background-color: var(--el-fill-color-light);
     }
   }
-  .el-button--small.cn-button {
+  .el-button--small.el-button--icon {
     span {
       font-size: 14px;
-      color: #2C72C6;
-      font-weight: 400;
-      .cn-button-label {
+      color: var(--el-color-primary);
+
+      .button-label {
         padding: 0 8px 0 3px;
       }
       i {
         font-size: 14px;
-        color: #575757;
+        color: var(--el-text-color-regular);
       }
     }
+
+    &:hover span i {
+      color: var(--el-button-hover-text-color);
+    }
   }
   .el-button--small{
     padding: 4px 6px !important;
diff --git a/src/assets/css/components/components/common/chart-tab.scss b/src/assets/css/components/components/common/chart-tab.scss
index df0019cd..e3036862 100644
--- a/src/assets/css/components/components/common/chart-tab.scss
+++ b/src/assets/css/components/components/common/chart-tab.scss
@@ -5,10 +5,11 @@
     position: absolute;
     height: 3px;
     top: 0;
-    background-color: #046EC9;
+    background-color: var(--el-color-primary);
     border-radius: 5px 5px 0 0;
-    transition: all linear .2s;
+    transition: all linear var(--el-transition-duration-fast);
   }
+
   .el-tabs.el-tabs--border-card {
     position: absolute;
     top: 3px;
@@ -16,22 +17,24 @@
     border: none;
     box-shadow: none;
 
-    &>.el-tabs__header {
-      //background-color: white;
-      background-color: $--select-bg-color-1;
-      border-color: $--border-color-2;
+    & > .el-tabs__header {
+      background-color: var(--el-fill-color-blank);
+      border-color: var(--el-border-color-light);
 
       .el-tabs__nav-wrap {
         padding-left: 27px;
       }
+
       .el-tabs__item:first-child {
         margin-left: 0;
       }
     }
+
     .el-tabs__content {
       display: none;
     }
   }
+
   .el-tabs__nav {
     z-index: 1;
     display: inline-block;
@@ -42,7 +45,7 @@
     line-height: 35px;
 
     .chart-tabs__label {
-      color: $--text-color-1;
+      color: var(--el-text-color-primary);
       font-size: 14px;
       font-weight: bold;
       box-sizing: border-box;
@@ -53,12 +56,13 @@
         font-weight: normal;
       }
     }
+
     &.is-active {
       .chart-tabs__label {
-        color: $--text-color-1;
+        color: var(--el-text-color-primary);
 
         i {
-          color: #046EC9;
+          color: var(--el-color-primary);
         }
       }
     }
diff --git a/src/assets/css/components/components/common/login.scss b/src/assets/css/components/components/common/login.scss
new file mode 100644
index 00000000..29ea43b8
--- /dev/null
+++ b/src/assets/css/components/components/common/login.scss
@@ -0,0 +1,154 @@
+$color-white: var(--el-color-white);
+$border-radius: var(--el-fill-color-blank);
+$color-btn: #21B4ED;
+$color-bg: #0B325C;
+$color-input-icon: #6DBBFF;
+$color-input-border: #295688;
+
+.logins {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  background-color: var(--el-color-black);
+  background-size: auto;
+  background-repeat: round;
+  //background-image: url("../public/images/bg.png");
+
+  .el-input__inner {
+    border: none;
+    font-size: 14px;
+  }
+
+  .el-loading-mask {
+    background-color: transparent;
+  }
+
+  input {
+    font-size: 14px;
+    -webkit-text-fill-color: rgba(231, 234, 237, .8) !important;
+    transition: background-color 500000000000000000s ease-in-out 0s !important;
+    caret-color: $color-white;
+  }
+
+  .inside {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 414px;
+    height: fit-content;
+    border: 1px solid rgba(103, 179, 245, 0.65);
+    background: $color-bg;
+    border-radius: $border-radius;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.38);
+
+    .title {
+      margin-top: 65px;
+      margin-bottom: 44px;
+      text-align: center;
+
+      img {
+        height: 135px;
+      }
+    }
+
+    .login__box {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      align-items: center;
+
+      .is-disabled {
+        color: $color-white;
+        background: $color-btn;
+        opacity: 0.6;
+      }
+
+      .license-error-msg {
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        width: 100%;
+        height: 40px;
+        color: var(--el-color-error);
+      }
+
+      .license-file {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+
+        .license__btn {
+          position: relative;
+          min-width: 74px;
+          height: 40px;
+          padding-left: 10px;
+          padding-right: 10px;
+          border: none;
+          background-color: $color-btn;
+          color: $color-white;
+          font-size: 14px;
+          border-radius: $border-radius;
+          outline: none;
+          cursor: pointer;
+          transition: background-color linear .2s, color linear .1s;
+        }
+      }
+    }
+
+    .el-form-item {
+      width: 334px;
+    }
+
+    .el-input__prefix {
+      color: $color-input-icon;
+    }
+
+    .el-input__prefix i {
+      width: 17px;
+      font-size: 17px;
+    }
+
+    .login__box .el-form-item:nth-child(3) {
+      margin-bottom: 0;
+    }
+
+    .login--button {
+      width: 334px;
+      height: 52px;
+      line-height: 22px;
+      margin-top: 25px;
+      margin-bottom: 65px;
+      border: 0;
+      background: $color-btn;
+      color: $color-white;
+      font-size: 16px;
+      font-weight: 400;
+      border-radius: $border-radius;
+    }
+
+    .login-btn__license-error {
+      height: 40px;
+      margin-top: 25px;
+      margin-bottom: 10px;
+    }
+
+    .login--input {
+      .el-input__wrapper {
+        height: 40px;
+        line-height: 40px;
+        padding: 1px 4px 2px 5px;
+        border-bottom: 1px solid $color-input-border;
+        background-color: $color-bg;
+        font-size: 14px;
+        border-radius: 0;
+        box-shadow: none;
+      }
+
+      .el-input__wrapper.is-focus {
+        box-shadow: none !important;
+      }
+    }
+  }
+}
diff --git a/src/assets/css/components/components/common/pagination.scss b/src/assets/css/components/components/common/pagination.scss
index 0e47c661..c5d79a49 100644
--- a/src/assets/css/components/components/common/pagination.scss
+++ b/src/assets/css/components/components/common/pagination.scss
@@ -1,125 +1,56 @@
-//.pagination {
-//  padding-top: 8px;
-//  text-align: center;
-//  max-height: 42px;
-//
-//  .el-pagination {
-//    max-height: 42px;
-//    padding-right: 0;
-//  }
-//  .pagination-size-select .el-input--small .el-input__inner{
-//    height: 20px;
-//    line-height: 20px;
-//    margin: 5px 0 5px 5px;
-//  }
-//  .el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
-//    margin:5px 5px 0 5px;
-//    padding: 0 4px;
-//    font-size: 13px;
-//    min-width: 20px;
-//    height: 20px;
-//    line-height: 20px;
-//    text-align: center;
-//    border: 1px solid rgba(154,154,154,0.20);
-//    border-radius: 2px;
-//  }
-//  .el-pagination .el-pager li.btn-quicknext, .el-pager li.btn-quickprev {
-//    line-height: 20px;
-//  }
-//  .el-pagination .el-pager .more::before {
-//    line-height: 20px;
-//  }
-//  .el-pagination .el-pager .more {
-//    background-color: $--content-right-background-color;
-//  }
-//  .btn-next, .btn-prev {
-//    background-color: $--content-right-background-color !important;
-//  }
-//  input {
-//    background-color: $--content-right-background-color !important;
-//  }
-//  .el-pager li.number {
-//    color: #666666;
-//    letter-spacing: 0;
-//    font-weight:normal;
-//    background-color: $--content-right-background-color;
-//  }
-//  .el-pager li.number.active {
-//    color: #FFFFFF;
-//    letter-spacing: 0;
-//  }
-//
-//  .el-pagination .el-pager li.active {
-//    background-color: $--color-primary;
-//    border-radius: 2px;
-//  }
-//  .el-pager li:hover, .el-pagination .btn-next:hover, .el-pagination .btn-prev:hover {
-//    color: #666666;
-//    letter-spacing: 0;
-//    font-weight:normal;
-//  }
-//  .el-pagination__sizes .el-input .el-input__inner, .el-pagination__editor.el-input .el-input__inner {
-//    height: 20px;
-//    border-color: rgba(154,154,154,0.20);
-//  }
-//  .el-pagination__sizes .el-input .el-input__inner:hover {
-//    border-color: rgba(154,154,154,0.20);
-//  }
-//}
-//.entity__pagination .pagination {
-//  .el-pager li.more + li {
-//    display: none;
-//  }
-//  .el-pager li.number:not(:last-of-type) {
-//    display: inline-block !important;
-//  }
-//}
-
 .pagination {
-  //max-height: 42px;
   padding-top: 8px;
   display: flex;
   justify-content: center;
   align-items: center;
+
   .el-pagination__total {
     margin-right: 10px;
     font-size: 13px;
   }
+
   .el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
-    margin:5px 5px 0 5px;
+    margin: 5px 5px 0 5px;
     padding: 0 4px;
     font-size: 13px;
     min-width: 20px;
     height: 20px;
     line-height: 20px;
     text-align: center;
-    border: 1px solid rgba(154,154,154,0.20);
+    border: 1px solid rgba(154, 154, 154, 0.20);
     border-radius: 2px;
   }
+
   .el-pagination .btn-prev {
-    background-color: $--content-right-background-color !important;
+    background-color: var(--el-fill-color-blank) !important;
   }
+
   .el-pager li:hover, .el-pagination .btn-next:hover, .el-pagination .btn-prev:hover {
-    color: #666666;
+    color: var(--el-text-color-regular);
     letter-spacing: 0;
-    font-weight:normal;
+    font-weight: normal;
   }
+
   .btn-next, .btn-prev {
-    background-color: $--content-right-background-color !important;
+    background-color: var(--el-fill-color-blank) !important;
   }
+
   .el-pager li.is-active {
-    background-color: #699dc9;
-    color: #fff;
+    background-color: var(--el-color-business);
+    color: var(--el-color-white);
     font-weight: 500;
   }
+
   .el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
     margin-top: 0;
   }
+
   .el-select {
     width: 100px !important;
     margin-left: 3px;
   }
-  .pagination-size-select .el-select__wrapper{
+
+  .pagination-size-select .el-select__wrapper {
     width: 100px;
     height: 20px;
     line-height: 20px;
@@ -129,11 +60,11 @@
     font-size: 12px;
     border-radius: 2px;
   }
+
   .el-select__suffix {
     svg {
       width: 12px;
       height: 12px;
     }
   }
-  //el-icon el-select__caret el-select__icon
 }
diff --git a/src/assets/css/components/components/common/simple-loading.scss b/src/assets/css/components/components/common/simple-loading.scss
new file mode 100644
index 00000000..098b63ef
--- /dev/null
+++ b/src/assets/css/components/components/common/simple-loading.scss
@@ -0,0 +1,191 @@
+$color-loading: #3c76cc;
+
+.simple-loading {
+  position: absolute;
+  z-index: 1;
+
+  &.simple-loading--top, &.simple-loading--top-start, &.simple-loading--top-end, &.simple-loading--left-start, &.simple-loading--right-start {
+    top: 2px
+  }
+
+  &.simple-loading--bottom, &.simple-loading--bottom-start, &.simple-loading--bottom-end, &.simple-loading--left-end, &.simple-loading--right-end {
+    bottom: 2px;
+  }
+
+  &.simple-loading--left, &.simple-loading--top-start, &.simple-loading--bottom-start, &.simple-loading--left-start, &.simple-loading--left-end {
+    left: 2px
+  }
+
+  &.simple-loading--right, &.simple-loading--top-end, &.simple-loading--bottom-end, &.simple-loading--right-start, &.simple-loading--right-end {
+    right: 2px;
+  }
+
+  &.simple-loading--top, &.simple-loading--bottom {
+    left: 50%;
+  }
+
+  &.simple-loading--left, &.simple-loading--right {
+    top: 50%;
+  }
+
+  &.simple-loading--top {
+    .simple-loading__box {
+      transform: translateX(-50%);
+    }
+  }
+
+  &.simple-loading--left {
+    .simple-loading__box {
+      transform: translateY(-50%);
+    }
+  }
+
+  &.simple-loading--top-end, &.simple-loading--right-start {
+    .simple-loading__box {
+      transform: translateX(-100%);
+    }
+  }
+
+  &.simple-loading--right {
+    .simple-loading__box {
+      transform: translate(-100%, -50%);
+    }
+  }
+
+  &.simple-loading--bottom-start, &.simple-loading--left-end {
+    .simple-loading__box {
+      transform: translateY(-100%);
+    }
+  }
+
+  &.simple-loading--bottom {
+    .simple-loading__box {
+      transform: translate(-50%, -100%);
+    }
+  }
+
+  &.simple-loading--bottom-end, &.simple-loading--right-end {
+    .simple-loading__box {
+      transform: translate(-100%, -100%);
+    }
+  }
+
+  &.simple-loading--center {
+    left: 50%;
+    top: 50%;
+
+    .simple-loading__box {
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  @keyframes simple-loading__inner {
+    0% {
+      opacity: 1
+    }
+    100% {
+      opacity: 0
+    }
+  }
+
+  .simple-loading__box {
+    position: absolute;
+    display: inline-block;
+    overflow: hidden;
+    background: transparent;
+
+    &.simple-loading--default {
+      width: 27px;
+      height: 27px;
+
+      .simple-loading__inner {
+        div {
+          width: 6px;
+          height: 6px;
+          border-radius: 3px / 3px;
+          transform-origin: 3px 13px;
+        }
+      }
+    }
+
+    &.simple-loading--small {
+      width: 20px;
+      height: 20px;
+
+      .simple-loading__inner {
+        div {
+          width: 5px;
+          height: 5px;
+          border-radius: 3px / 3px;
+          transform-origin: 0 9px;
+        }
+      }
+    }
+
+    .simple-loading__inner {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      transform: translateZ(0) scale(1);
+      backface-visibility: hidden;
+      transform-origin: 0 0;
+
+      div {
+        left: 10px;
+        top: 0;
+        position: absolute;
+        animation: simple-loading__inner linear 1s infinite;
+        background: $color-loading;
+        box-sizing: content-box;
+      }
+
+      div:nth-child(1) {
+        transform: rotate(0deg);
+        animation-delay: -0.875s;
+        background: $color-loading;
+      }
+
+      div:nth-child(2) {
+        transform: rotate(45deg);
+        animation-delay: -0.75s;
+        background: $color-loading;
+      }
+
+      div:nth-child(3) {
+        transform: rotate(90deg);
+        animation-delay: -0.625s;
+        background: $color-loading;
+      }
+
+      div:nth-child(4) {
+        transform: rotate(135deg);
+        animation-delay: -0.5s;
+        background: $color-loading;
+      }
+
+      div:nth-child(5) {
+        transform: rotate(180deg);
+        animation-delay: -0.375s;
+        background: $color-loading;
+      }
+
+      div:nth-child(6) {
+        transform: rotate(225deg);
+        animation-delay: -0.25s;
+        background: $color-loading;
+      }
+
+      div:nth-child(7) {
+        transform: rotate(270deg);
+        animation-delay: -0.125s;
+        background: $color-loading;
+      }
+
+      div:nth-child(8) {
+        transform: rotate(315deg);
+        animation-delay: 0s;
+        background: $color-loading;
+      }
+    }
+  }
+}
diff --git a/src/assets/css/components/components/common/time-line.scss b/src/assets/css/components/components/common/time-line.scss
new file mode 100644
index 00000000..4b74dd97
--- /dev/null
+++ b/src/assets/css/components/components/common/time-line.scss
@@ -0,0 +1,49 @@
+.time-line {
+  width: 100%;
+  height: 40px !important;
+  padding: 0 6px;
+  position: relative;
+
+  .time-line-slider {
+    position: absolute;
+    width: calc(100% - 16px);
+    height: 40px;
+    top: -6px;
+
+    .el-slider__runway {
+      padding: 0 6px;
+      height: 40px;
+      background-color: rgba(0, 0, 0, 0);
+      margin: 0;
+
+      .el-slider__bar {
+        background-color: rgba(0, 0, 0, 0);
+      }
+
+      .el-slider__button-wrapper {
+        width: 10px;
+        height: 10px;
+        margin-top: 7px;
+      }
+
+      .el-slider__button {
+        width: 0;
+        height: 0;
+        border-color: var(--el-color-black) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
+        border-style: solid;
+        border-width: 8px 8px 0 8px;
+        background-color: rgba(0, 0, 0, 0);
+        border-radius: 0;
+      }
+    }
+  }
+
+  .time-line-container {
+    height: 40px;
+    line-height: 40px;
+    background-color: rgba(255, 255, 255, 0.50);
+    display: flex;
+    justify-content: space-between;
+    padding: 0 6px;
+  }
+}
diff --git a/src/assets/css/components/components/entities/entities.scss b/src/assets/css/components/components/entities/entities.scss
index 0add7be8..cb0f7fba 100644
--- a/src/assets/css/components/components/entities/entities.scss
+++ b/src/assets/css/components/components/entities/entities.scss
@@ -1,3 +1,6 @@
+$color-white: var(--el-fill-color-blank);
+$color-primary: var(--el-text-color-primary); // 老版为#8FA1BE
+
 .cn-entities {
   display: grid;
   grid-template-rows: 40px auto;
@@ -13,20 +16,6 @@
     overflow: hidden;
     position: relative;
 
-    .entity__loading {
-      position: absolute;
-      height: 100%;
-      width: 100%;
-      z-index: 1;
-
-      i {
-        position: absolute;
-        left: calc(50% - 15px);
-        top: calc(50% - 15px);
-        font-size: 30px;
-        color: #aaa;
-      }
-    }
     .entity-list__content {
       display: flex;
       flex-wrap: wrap;
@@ -38,34 +27,35 @@
       width: calc(100% - 10px);
       overflow: hidden auto;
 
-      .cn-entity:hover{
-          box-shadow:  0 0 10px #ccc;
-        .content__title{
-          color: #ffffff !important;
+      .cn-entity:hover {
+        box-shadow: 0 0 10px var(--el-color-info-light-5);
+
+        .content__title {
+          color: $color-white !important;
         }
-        .cn-entity__header{
-          background: #FFFFFF;
+
+        .cn-entity__header {
+          background: $color-white;
         }
-        .header__icon{
-          background: #8FA1BE;
-          border: 2px solid #FFFFFF;
+
+        .header__icon {
+          background: $color-primary;
+          border: 2px solid $color-white;
         }
       }
+
       .cn-entity {
         box-sizing: border-box;
         margin: 0 10px 30px;
         width: 328px;
         height: 329px;
-        background: #FFFFFF;
+        background: $color-white;
         border-radius: 2px;
-        transition: all .2s;
+        transition: all var(--el-border-radius-base);
 
-        &:hover .cn-entity__header .header__content {
-
-        }
         .cn-entity__header {
           position: relative;
-          background-color: #FFFFFF;
+          background-color: $color-white;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -73,19 +63,19 @@
           width: 328px;
           height: 89px;
           box-sizing: border-box;
-          transition: all .2s;
+          transition: all var(--el-transition-duration-fast);
 
           .header__bottom__line {
-            width:288px;
-            height:1px;
-            border-top:solid 1px #eff2f5;
+            width: 288px;
+            height: 1px;
+            border-top: solid 1px var(--el-bg-color-page);
             position: absolute;
             top: 88px;
           }
 
           .header__icon {
-            overflow: hidden;
             position: absolute;
+            overflow: hidden;
             top: 20px;
             left: 20px;
             display: flex;
@@ -95,23 +85,24 @@
             width: 52px;
             height: 52px;
             border-radius: 50%;
-            background: #e8fbf9;
-            border: 2px solid #e8fbf9;
+            background: var(--el-color-primary-light-9);
+            border: 2px solid var(--el-color-primary-light-9);
 
             i {
               font-size: 22px;
             }
           }
+
           .header__content {
             font-size: 22px;
-            color: #333333;
+            color: var(--el-text-color-primary);
             font-weight: 500;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
 
-            .content__desc{
-              color: #999999;
+            .content__desc {
+              color: var(--el-color-info);
               width: 200px;
               font-size: 12px;
               margin-top: 3px;
@@ -130,29 +121,33 @@
             }
           }
         }
+
         .cn-entity__body {
           overflow: hidden;
-          padding-top:10px;
+          padding-top: 10px;
           font-size: 14px;
           position: relative;
-          height:240px;
+          height: 240px;
 
           .body__row {
             display: flex;
             align-items: center;
             margin: 0 30px;
-            color: #666666;
+            color: var(--el-text-color-regular);
             padding: 5px 0;
             justify-content: left;
           }
+
           .body__drawing-box {
             position: relative;
             height: 100px;
+
             .chart__loading {
               top: 0;
               height: 100%;
             }
           }
+
           .body__drawing {
             position: absolute;
             padding: 10px 30px;
@@ -161,27 +156,30 @@
           }
 
           .body__row-label {
-            padding-right: 0px;
-            color: #999999;
+            padding-right: 0;
+            color: var(--el-color-info);
             font-size: 14px;
             font-weight: 400;
             white-space: nowrap;
             line-height: 16px;
+
             i {
               font-size: 13px;
-              color:#8FA1BE;
+              color: $color-primary;
               margin-right: 9px;
             }
           }
+
           .body__row-value {
             width: calc(100% - 69px);
             text-overflow: ellipsis;
             overflow: hidden;
             white-space: nowrap;
             font-size: 14px;
-            color: #666666;
+            color: var(--el-text-color-regular);
             font-weight: 400;
           }
+
           .body__statics {
             position: absolute;
             bottom: 20px;
@@ -189,32 +187,34 @@
             width: 100%;
             padding: 0 30px;
             font-size: 14px;
-            color: #666666;
-            .entity-statics-down{
+            color: var(--el-text-color-regular);
+
+            .entity-statics-down {
               padding-right: 20px;
               min-width: 80px;
 
               i {
-                color:#5881B7;
-                font-size:14px;
-                padding-right:6px;
+                color: #5881B7; // card.vue里所带的样式，暂时保留，后续删除card.vue再将样式删除
+                font-size: 14px;
+                padding-right: 6px;
               }
             }
 
-            .entity-statics-up{
+            .entity-statics-up {
               padding-right: 20px;
               min-width: 80px;;
+
               i {
                 color: #62B16C;
                 font-size: 14px;
                 padding-right: 6px;
               }
-
             }
+
             .body__detail {
               cursor: pointer;
               font-size: 14px;
-              color: #8FA1BE;
+              color: $color-primary;
               position: absolute;
               right: 30px;
             }
@@ -222,6 +222,7 @@
         }
       }
     }
+
     .entity-list__pagination {
       display: flex;
       justify-content: center;
@@ -236,15 +237,6 @@
     }
   }
 }
-.ip-green {
-  color: #23BF9A;
-}
-.domain-blue {
-  color: #0290FF;
-}
-.app-orange {
-  color: #FFA200;
-}
 
 .entity-left-filter {
   display: flex;
@@ -252,18 +244,18 @@
   margin-top: 10px;
   width: 100%;
   height: 100%;
-  // border: 1px solid $--right-box-border-color;
   overflow: auto;
 
   .filter__header {
-    background-color: #E1E6ED;
+    background-color: var(--el-fill-color-darker);
     margin-bottom: 10px;
     padding-left: 8px;
     height: 36px;
     line-height: 36px;
-    color: #666;
+    color: var(--el-text-color-regular);
     font-size: 14px;
   }
+
   .filter__body {
     display: flex;
     flex-direction: column;
@@ -274,21 +266,25 @@
       .el-collapse-item {
         margin-bottom: 10px;
       }
+
       .el-collapse-item__header {
         padding-left: 15px;
         padding-top: 8px;
-        color: #8FA1BE;
+        color: $color-primary;
         border-bottom: none !important;
       }
+
       .collapse-header {
         display: flex;
         width: 100%;
-        border-bottom: 1px solid $--content-right-background-color;
+        border-bottom: 1px solid var(--el-bg-color-page);
       }
+
       .collapse-header__icon {
         padding-right: 6px;
         font-size: 14px;
       }
+
       .el-collapse-item__wrap {
         padding-top: 14px !important;
 
@@ -296,18 +292,21 @@
           padding-bottom: 15px;
 
           .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
-            background-color: $--tree-node-hover-background-color;
+            background-color: var(--el-bg-color-page);
           }
+
           .el-tree-node.is-expanded, .el-tree-node.is-current {
-            &>.el-tree-node__content>.filter-item {
+            & > .el-tree-node__content > .filter-item {
               font-weight: bold;
             }
           }
+
           .el-tree-node__content {
             height: 30px;
             padding-right: 10px;
           }
         }
+
         .filter-item {
           display: flex;
           justify-content: space-between;
@@ -320,14 +319,16 @@
             text-overflow: ellipsis;
           }
         }
+
         .filter__more {
           padding-left: 24px;
           line-height: 36px;
-          color: #8FA1BE;
+          color: $color-primary;
           cursor: pointer;
         }
+
         .filter__more.filter__more--disabled {
-          color: #ccc;
+          color: var(--el-color-info-light-5);
           cursor: default;
         }
       }
diff --git a/src/assets/css/components/components/layout/layout.scss b/src/assets/css/components/components/layout/layout.scss
index 120698a5..86ce7d83 100644
--- a/src/assets/css/components/components/layout/layout.scss
+++ b/src/assets/css/components/components/layout/layout.scss
@@ -1,8 +1,8 @@
 .cn-container {
   height: calc(100% - 100px);
-  //background-color: $--content-right-background-color;
-  background-color: var(--bg-color);
+  background-color: var(--el-fill-color-blank);
   width: 100%;
+
   &>div {
     height: 100%;
   }
@@ -17,7 +17,7 @@
   .cn-header__banner {
     display: flex;
     height: 60px;
-    background-color: #233447;
+    background-color: #233447; // TODO 暂无变量
 
     .banner__left {
       display: flex;
@@ -34,13 +34,13 @@
         border-radius: 4px;
         margin-left: 14px;
         margin-right: 10px;
-        color: #F7F7F7;
+        color: var(--el-fill-color-lighter);
         cursor: pointer;
         background-color: transparent;
-        transition: all linear .2s;
+        transition: all linear var(--el-transition-duration);
 
         &.shrink-button--collapse {
-          background-color: #334355;
+          background-color: var(--el-text-color-primary);
         }
       }
     }
@@ -50,22 +50,22 @@
     display: flex;
     align-items: center;
     height: 40px;
-    //background-color: #f7f7f7;
     background-color: var(--el-bg-color-overlay);
-    border-bottom: 1px solid $--border-color;
+    border-bottom: 1px solid var(--el-border-color-light);
 
     .cn-icon-a-NetworkAnalytics {
       margin-left: 20px;
       margin-right: 10px;
       font-size: 17px;
-      color: #046ECA;
+      color: var(--el-color-primary);
     }
     .header__left-breadcrumb{
-      display:flex;
-      align-items:center;
+      display: flex;
+      align-items: center;
+
       .route-menu:hover{
         cursor: pointer;
-        color:  #2C72C6;
+        color: var(--el-color-primary);
       }
       .header__left-breadcrumb-item-select{
         display:flex;
@@ -87,17 +87,18 @@
         flex: 1;
         padding: 12px 10px 10px 20px;
         max-width: 290px;
-        border-right: 1px solid #D8D8D8;
+        border-right: 1px solid var(--el-border-color);
 
         .left-menu {
           padding: 8px 0;
           font-size: 14px;
-          color: #575757;
-          transition: all linear .2s;
+          color: var(--el-text-color-primary);
+          cursor: pointer;
 
           &:hover {
-            cursor: pointer;
-            color: #157FF3;
+            span {
+              text-decoration: underline;
+            }
           }
           .cn-icon:first-of-type {
             font-size: 17px;
@@ -125,19 +126,20 @@
             padding: 8px 0;
             font-size: 14px;
             font-weight: bolder;
-            color: #353636;
-            border-bottom: 1px dashed #D8D8D8;
+            color: var(--el-text-color-primary);
+            border-bottom: 1px dashed var(--el-border-color);
           }
           .middle-menus__body {
             display: flex;
             padding-top: 8px;
+
             .middle-menu {
               padding: 5px 0;
               font-size: 14px;
-              color: #353636;
+              color: var(--el-text-color-primary);
+              cursor: pointer;
 
               &:hover {
-                cursor: pointer;
                 text-decoration: underline;
               }
             }
@@ -156,43 +158,31 @@
 
   .personal {
     display: flex;
+
     .el-dropdown {
-      color: #fff;
+      color: var(--el-fill-color-blank);
       height: 40px;
       line-height: 60px;
       text-align: center;
       margin: 0 20px 0 10px;
     }
     .login-user {
-      color: #fff;
+      color: var(--el-color-white);
+
       i {
-        color: #fff;
+        color: var(--el-color-white);
         font-size: 12px;
       }
     }
-    .header-menu--item {
+    .header-menu__item {
       outline-style: initial;
     }
   }
-  .left-menu--pin {
-    width: 20px;
-    font-size: 20px;
-    font-weight: 100;
-    color: #999999;
-    transition: all .4s;
-    height: 100%;
-    line-height: 50px;
-    margin-left: 10px;
-    i {
-      transform: rotateY(0);
-      transition: transform .4s;
-    }
-    i.icon-reverse {
-      transform: rotateY(180deg);
-    }
-  }
 }
-
+.personal-dropdown-item.is-active {
+  color: var(--el-color-primary);
+  font-weight: bold;
+}
 .cn-home {
   display: flex;
   flex-direction: column;
@@ -211,12 +201,10 @@
   width:10px;
 }
 #breadcrumbSelectDropdown::-webkit-scrollbar-track-piece {
-  background: #ECECEC;
   border-radius: 0 0 2px 0;
 }
 #breadcrumbSelectDropdown::-webkit-scrollbar-thumb {
   background-clip: content-box !important;
-  background: #C5C5C5;
   border-radius: 4px;
   border: 2px solid transparent;
 }
@@ -225,57 +213,53 @@
   top: 96px !important;
   width: 180px !important;
   min-width: 180px;
-  max-height:206px;
-  overflow:hidden;
+  max-height: 206px;
+  overflow: hidden;
   padding: 0 !important;
-  background: #963131;
-  border:1px solid #C5C5C5 !important;
-  box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important;
   border-radius: 2px !important;
-  .el-row {
-    width: 100% !important;
-  }
-  .selected {
-    color: #0091ff;
-    font-weight: bold;
-  }
+
   .el-popper {
     max-height: 405px;
   }
   .select-dropdown {
-    max-height:172px;
-    width:100%;
-    margin: 1px 0px;
-    overflow:auto;
+    max-height: 172px;
+    width: 100%;
+    margin: 1px 0;
+    overflow: auto;
     list-style: none;
-    padding:4px 0px;
+    padding: 4px 0;
     box-sizing: border-box;
-    .select-dropdown__item:hover{
-      background-color: #F5F7FA !important;
-    }
+
     .select-dropdown__item{
-      width:100%;
-      height:30px;
-      padding:0px 11px;
-      line-height:30px;
+      width: 100%;
+      height: 30px;
+      padding: 0 11px;
+      line-height: 30px;
       position: relative;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      color: #666665;
       display: list-item;
       text-align: -webkit-match-parent;
       box-sizing: border-box;
       cursor: pointer;
       font-size: 12px;
-      font-weight: 400;
+
+      &:hover {
+        background-color: var(--el-fill-color-light);
+      }
+      &.is-active {
+        color: var(--el-color-primary);
+        font-weight: bold;
+      }
     }
   }
 }
 
 .search-input{
-  width:100%;
-  padding: 4px 4px 0px 4px;
+  width: 100%;
+  padding: 4px 4px 0 4px;
+
   .el-input__inner{
     border-radius: 2px;
     font-size: 12px;
@@ -289,14 +273,17 @@
   height: 24px;
   justify-content: center;
   line-height: 24px;
-  padding: 0px 6px;
+  padding: 0 6px;
+
   span {
     margin-right: 6px;
   }
+  i {
+    font-size: 12px;
+  }
 }
 .breadcrumb-button:hover,.breadcrumb-button__active {
-  cursor:pointer;
-  background: rgba(113,113,113,0.10);
-  box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+  cursor: pointer;
+  background-color: var(--el-fill-color);
   border-radius: 2px;
 }
diff --git a/src/assets/css/components/components/rightBox/administration/chart-box.scss b/src/assets/css/components/components/rightBox/administration/chart-box.scss
deleted file mode 100644
index e1c6362f..00000000
--- a/src/assets/css/components/components/rightBox/administration/chart-box.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.my-editor {
-  margin-top: 4px;
-  border: 1px solid $--right-box-border-color;
-
-  .prism-editor__textarea {
-    outline: none;
-  }
-}
diff --git a/src/assets/css/components/components/rightBox/report/reportBox.scss b/src/assets/css/components/components/rightBox/report/reportBox.scss
index a369c36b..83c18ffc 100644
--- a/src/assets/css/components/components/rightBox/report/reportBox.scss
+++ b/src/assets/css/components/components/rightBox/report/reportBox.scss
@@ -6,158 +6,175 @@
         line-height: 28px;
         margin-top: -2px;
       }
+
       .el-checkbox-group {
         line-height: 28px;
       }
+
       .el-height.el-form-item {
         margin-bottom: 18px;
+
         .el-form-item__content {
           height: 20px;
           line-height: 20px;
         }
       }
+
       .enable-tab {
         display: flex;
         width: 100%;
+
         .enable-tabs {
           flex: 1;
           height: 32px;
           width: 160px;
           text-align: center;
-          border: 1px solid #E7EAED;
+          border: 1px solid var(--el-border-color-light);
           border-right: none;
           line-height: 32px;
-          color: #333;
+          color: var(--el-text-color-primary);
         }
+
         .enable-tabs:nth-of-type(4) {
-          border-right: 1px solid #E7EAED;
+          border-right: 1px solid var(--el-border-color-light);
         }
+
         .enable-tabs.active {
-          border: 1px solid #1890FF;
+          border: 1px solid var(--el-color-primary);
           border-radius: 2px;
-          color: #1890FF;
+          color: var(--el-color-primary);
         }
+
         .enable-tabs.disable {
           cursor: not-allowed;
         }
       }
+
       .enable-tabs-per-month {
         margin-top: 10px;
+
         .enable-month-tab {
           display: flex;
+
           .enable-month-tabs {
             height: 32px;
             width: 290px;
             text-align: center;
-            border: 1px solid #E7EAED;
+            border: 1px solid var(--el-border-color-light);
             border-right: none;
             line-height: 32px;
-            color: #333;
+            color: var(--el-text-color-primary);
           }
+
           .enable-month-tabs:nth-of-type(2) {
-            border-right: 1px solid #E7EAED;
+            border-right: 1px solid var(--el-border-color-light);
           }
+
           .enable-month-tabs.active {
-            border: 1px solid #1890FF;
+            border: 1px solid var(--el-color-primary);
             border-radius: 2px;
-            color: #1890FF;
+            color: var(--el-color-primary);
           }
+
           .enable-month-tabs.disable {
             cursor: not-allowed;
           }
+
           .el-checkbox {
             padding-left: 10px;
             margin-right: 0;
           }
         }
+
         .enable-month-data-tab {
           margin-bottom: 20px;
+
           .enable-month-value {
             font-size: 12px;
-            color: #666666;
+            color: var(--el-text-color-regular);
             height: 16px;
             line-height: 16px;
           }
         }
       }
+
       .enable-month-moon-custom, .enable-tabs-custom {
         height: 32px;
         line-height: 40px;
-        color: #666;
+        color: var(--el-text-color-regular);
       }
-      .enable-month-all, .enable-month-data-tabs {
-        display: flex;
-      }
-      .enable-month-week {
+
+      .enable-tabs-weekly, .enable-month-all, .enable-month-data-tabs, .enable-month-week {
         display: flex;
+        margin-top: 10px;
       }
+
       .el-input-single {
         width: 140px;
-        height: 32px;
         margin-top: 10px;
+
         .el-input__inner {
           text-align: center;
         }
+
         .el-input-group__prepend, .el-input-group__append {
           padding: 0 10px;
+
           i {
             font-size: 12px;
           }
         }
       }
+
       .right-box__select-single {
-        height: 32px;
         margin: 10px 0 0 10px;
       }
+
       .el-input__wrapper {
-        height: 32px !important;
-        padding: 1px 11px !important;
         border-radius: 2px;
       }
-      .el-input__inner {
-        padding: 0;
+
+      .report__display {
+        width: 100%;
+        display: flex;
       }
 
-      .el-form-item__content {
-        line-height: 40px !important;
+      .demo-datetime-picker {
+        width: 100%;
+
+        .block {
+          width: 100%;
+        }
+
+        .el-date-editor.el-input, .el-date-editor.el-input__wrapper {
+          width: 100%;
+        }
+      }
+
+      .report__params-vertical {
+        vertical-align: unset;
       }
     }
-    .el-input__inner {
-      border: none;
-    }
-    .el-select--small .el-select__wrapper {
-      padding: 0 10px;
-      min-height: 32px !important;
-      line-height: 32px !important;
-      margin-top: -2px;
-      border-radius: 2px;
-    }
+
   }
+
   .right-box__select--param {
-    //.el-select--small .el-select__prefix {
-    //  left: 0;
-    //  background-color: #f5f7fa;
-    //  color: #999;
-    //  padding: 0 1.07143rem;
-    //  border: 1px solid #dcdfe6;
-    //  border-radius: 2px 0 0 2px;
-    //}
     .el-select__prefix {
       line-height:30px;
     }
     .el-select__prefix, .el-input__prefix {
-      left: 0;
-      background-color: #f5f7fa;
-      color: #999;
+      background-color: var(--el-border-color-extra-light);
+      color: var(--el-color-info);
       padding: 0 15px;
-      border: 1px solid #dcdfe6;
       border-radius: 2px 0 0 2px;
     }
+
     .el-select__wrapper {
-      padding-left: 0 !important;
+      padding-left: 1px !important;
     }
   }
 }
+
 .my-form-item .el-form-item__content {
   display: block !important;
 }
diff --git a/src/assets/css/components/components/setting/galaxy-proxy-debug.scss b/src/assets/css/components/components/setting/galaxy-proxy-debug.scss
deleted file mode 100644
index 1e9325dc..00000000
--- a/src/assets/css/components/components/setting/galaxy-proxy-debug.scss
+++ /dev/null
@@ -1,233 +0,0 @@
-.proxy-debug__dialog {
-  height: 90vh;
-  overflow: hidden;
-  .el-dialog__header {
-    display: none;
-  }
-  .el-dialog__body {
-    height: 100%;
-    padding: 0;
-  }
-}
-.debug-wrapper{
-  width: 100%;
-  height:100%;
-  background: #fff;
-  text-align: center;
-  display: grid;
-  grid-template-columns: 25% auto;
-  grid-template-rows: 60px auto;
-  grid-row-gap: 20px;
-  grid-column-gap: 20px;
-  padding:25px;
-
-  .item{
-    border:1px solid #bbbbbb;
-    color: #000C18;
-    line-height: 60px;
-    font-size: 16px;
-    text-align: left;
-  }
-
-  .item-1 {
-    border: 0;
-  }
-
-  .item-2 {
-    background-color: #ffffff;
-    border: 0;
-    .el-input__inner {
-      border-radius: 0px;
-      border-left: 0px;
-      border-right: 0;
-      border-top: 1px solid #bbbbbb;
-      border-bottom: 1px solid #bbbbbb;
-      color: #606266;
-      height: 60px;
-      line-height: 60px;
-      padding: 0 15px;
-    }
-  }
-
-  .sub-grid-send{
-    width: 100%;
-    height:100%;
-    background: #fff;
-    text-align: center;
-    display: grid;
-    grid-template-columns: 100px auto 80px;
-    grid-template-rows: 60px;
-    grid-row-gap: 0px;
-    grid-column-gap: 0px;
-    padding: 0;
-  }
-
-  .item-3 {
-    background-color: #ffffff;
-    .el-input__inner{
-      border: 0px;
-    }
-    .el-input__inner:hover {
-      border: 0px;
-    }
-    .el-input__inner:focus {
-      border: 1px solid #bbbbbb;
-    }
-
-    .el-table__header, .el-table__body{
-      witdh:100% !important;
-    }
-
-    .el-table__header-wrapper{
-      height: 60px;
-    }
-
-    .el-table__empty-block{
-      height: 0;
-      min-height: 0;
-    }
-
-    .el-table th.is-leaf, .el-table td {
-      border-top: 1px solid #bbbbbb;
-      border-left: 1px solid #bbbbbb;
-      border-right: 0px;
-      padding-top: 3px;
-      padding-bottom: 3px;
-    }
-
-    .el-table{
-      border-bottom: 1px solid #bbbbbb;
-      border-right: 0px solid #bbbbbb;
-      border-left: 0px solid #bbbbbb;
-    }
-
-    .el-table .cell {
-      line-height: 23px;
-      padding-left: 3px;
-      padding-right: 3px;
-      text-align: center;
-    }
-
-    .el-table__body tr:hover >td {
-      background-color: #ffffff;
-    }
-
-    .el-table__body tr:focus >td {
-      background-color: cadetblue;
-    }
-    .debug__params-delete:hover{
-      color:#0091FF;
-      cursor: pointer;
-    }
-  }
-
-  .item-4 {
-    height:100%;
-    overflow:hidden;
-    background-color: #ffffff;
-    display: grid;
-    grid-template-columns: 40% 60%;
-    grid-template-rows: 60px  minmax(100px, 1fr) 60px minmax(100px, 2fr);
-    grid-row-gap: 0px;
-    grid-column-gap: 0px;
-
-    pre {outline: 0px; padding: 0px; margin: 0px;height:360px;line-height: 20px; font-family: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;}
-    .color-pre__style{
-      height: 95%;
-      width: 95%;
-    }
-    .request-header {
-      grid-column-start: 1;
-      grid-column-end: 3;
-      border-bottom:1px solid #bbbbbb;
-      padding-left: 15px;
-    }
-
-    .request-header-content{
-      grid-column-start: 1;
-      grid-column-end: 3;
-      border-bottom:1px solid #bbbbbb;
-      padding-left: 0px;
-      overflow:scroll;
-      height: 100%;
-      width:100%;
-      line-height: 30px;
-    }
-
-    .response-header {
-      border-right:1px solid #bbbbbb;
-      border-bottom:1px solid #bbbbbb;
-      padding-left: 15px;
-    }
-
-    .response-header-content {
-      border-right:1px solid #bbbbbb;
-      padding-left: 0px;
-      height: 100%;
-      width:100%;
-      overflow:scroll;
-      line-height: 30px;
-    }
-
-    .response-body {
-      border-bottom:1px solid #bbbbbb;
-      padding-left: 15px;
-    }
-
-    .response-body-content {
-      padding-left: 5px;
-      height:100%;
-      width:100%;
-      overflow:scroll;
-    }
-  }
-
-  .sub-grid-params{
-    width: 100%;
-    height:100%;
-    background: #fff;
-    text-align: center;
-    display: grid;
-    grid-template-columns: 100%;
-    grid-template-rows: 60px auto;
-    grid-row-gap: 0px;
-    grid-column-gap: 0px;
-    padding: 0;
-    justify-items: center;
-
-  }
-
-  .sub-grid-params-add{
-    width: 96%;
-    height:100%;
-    background: #fff;
-    text-align: left;
-    display: grid;
-    grid-template-columns: 70% 30%;
-    grid-template-rows:100%;
-    grid-row-gap: 0;
-    grid-column-gap: 0;
-    padding: 0;
-  }
-
-  .el-select .el-input .el-input__inner{
-    height: 60px;
-    border-radius: 0;
-    border:1px solid #bbbbbb;
-  }
-  .el-select .el-input .el-select__caret {
-    line-height:60px;
-    font-weight: bolder;
-    color:black;
-  }
-
-  .el-button {
-    border-color: #bbbbbb;
-  }
-
-  .sub-grid-params-add  .el-button {
-    height: 38px;
-    margin-top: 11px;
-    margin-right: 10px;
-  }
-}
diff --git a/src/assets/css/components/components/table/administration/galaxy-proxy-table.scss b/src/assets/css/components/components/table/administration/galaxy-proxy-table.scss
deleted file mode 100644
index f5fc3550..00000000
--- a/src/assets/css/components/components/table/administration/galaxy-proxy-table.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.galaxy-proxy-table {
-  .js-code-highlight {
-    height: 250px;
-
-    .highlight-box {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      overflow: auto;
-
-      .highlight-box__copy-btn {
-        position: absolute;
-        right: 5px;
-        top: 5px;
-        cursor: pointer;
-      }
-    }
-  }
-  pre code.hljs {
-    overflow-x: visible;
-  }
-}
diff --git a/src/assets/css/components/components/table/common.scss b/src/assets/css/components/components/table/common.scss
index eaa1673b..af20b17b 100644
--- a/src/assets/css/components/components/table/common.scss
+++ b/src/assets/css/components/components/table/common.scss
@@ -1,6 +1,6 @@
 .pop-custom {
   padding: 12px;
-  border: 1px solid #EBEEF5;
+  border: 1px solid var(--el-border-color-lighter);
   position: absolute;
   top: 55px;
   right: 20px;
diff --git a/src/assets/css/components/index.scss b/src/assets/css/components/index.scss
index 7761e294..8618123b 100644
--- a/src/assets/css/components/index.scss
+++ b/src/assets/css/components/index.scss
@@ -1,14 +1,9 @@
 @import './components/advancedSearch/advanced-search2';
 @import './components/advancedSearch/codemirror';
-// @import './components/charts/panel';
 @import './components/common/TimeRange/date-time-range';
 @import './components/common/TimeRange/time-refresh';
 @import './components/common/pagination';
-// @import './components/entities/entities';
 @import './components/layout/layout';
-@import 'components/rightBox/administration/chart-box';
-@import 'components/setting/galaxy-proxy-debug';
-@import 'components/table/administration/galaxy-proxy-table';
 @import './components/table/common';
 @import './views/charts/chart';
 @import 'views/entityExplorer/entity-explorer';
@@ -25,24 +20,9 @@
 @import './views/detections/detection-list/detection-list';
 @import './views/detections/detection-list/row';
 @import './views/detections/detection-overview';
-@import './views/charts/chartSingleValue';
 @import './views/charts/panel';
-@import 'views/charts/chartIpOpenPortBar';
-@import './views/charts/chartTable';
-@import './views/charts/chartCryptocurrencyEventList';
-@import './views/charts/chartAppBasicInfo';
-@import './views/charts/chartDomainDnsRecord';
-@import './views/charts/chartDomainWhois';
-@import './views/charts/chartEchartWithTable';
-@import './views/charts/ipBasicInfo';
-@import './views/charts/chartEchartIpHostedDomain';
-@import './views/charts/chartEchartAppRelateDomain';
-@import './views/charts/ChartOneSituationStatistics';
-@import './views/charts/ChartTwoSituationStatistics';
-@import './views/charts/chartAlarmInfo';
 @import './views/chartHeader';
 @import './views/charts/chartMap';
-@import 'views/charts/chartRelationShipList';
 @import 'views/report/report';
 @import 'views/tag/tag';
 @import 'components/rightBox/report/reportBox';
@@ -70,11 +50,6 @@
 @import './views/charts2/domainNameResolution.scss';
 @import './views/charts2/informationAggregation.scss';
 @import 'views/charts2/linkTrafficLine';
-@import 'views/charts2/dnsTrafficLine';
-@import 'views/charts2/dnsRecentEvents';
-@import 'views/charts2/dnsActiveMaliciousDomain';
-@import 'views/charts2/dnsEventChart';
-@import './views/charts2/dnsEventChartByPie';
 //@import '../chart';
 @import './components/common/chart-error';
 @import './components/common/chart-tab';
@@ -104,3 +79,12 @@
 @import "views/detections/detection-table";
 @import "views/detections/detection-create/detection-form";
 @import "views/detections/detection-create/detection-form-setting";
+@import "views/detections/detection-create/detection-history";
+
+@import "views/entityExplorer/helper-info";
+
+@import "./components/common/time-line";
+@import "./components/common/login";
+@import "./components/common/simple-loading";
+
+@import "views/location/location";
diff --git a/src/assets/css/components/views/administration/AdministrationTabs.scss b/src/assets/css/components/views/administration/AdministrationTabs.scss
index 2435b86b..28250d19 100644
--- a/src/assets/css/components/views/administration/AdministrationTabs.scss
+++ b/src/assets/css/components/views/administration/AdministrationTabs.scss
@@ -2,6 +2,12 @@
   .administration-tabs {
     height: 18px;
   }
+
+  .administration__tabs {
+    width: 100%;
+    padding-bottom: 26px;
+  }
+
   .administration-container {
     height: calc(100% - 86px);
     flex-direction: column;
@@ -10,10 +16,15 @@
     .list-page {
       .main-container {
         padding: 0;
+
         .cn-pagination {
           height: 34px;
         }
       }
     }
+
+    .administration-container__body {
+      height: 100%;
+    }
   }
 }
diff --git a/src/assets/css/components/views/administration/Appearance.scss b/src/assets/css/components/views/administration/Appearance.scss
index 2af45dcd..04b4b1c5 100644
--- a/src/assets/css/components/views/administration/Appearance.scss
+++ b/src/assets/css/components/views/administration/Appearance.scss
@@ -1,77 +1,64 @@
-.appearance{
+.appearance {
   height: 100%;
-  display:flex;
-  flex-direction:column;
+  display: flex;
+  flex-direction: column;
+
   .appearance-form {
-    padding-top:40px;
-    padding-left:100px;
-    background-color: white;
+    padding-top: 40px;
+    padding-left: 100px;
+    background-color: var(--el-fill-color-blank);
     position: relative;
     display: flex;
     flex-direction: column;
     height: 100%;
+
     .el-form-item {
       margin-bottom: 27px;
     }
+
     .el-form-item__content {
       width: 600px;
+
       .el-select__wrapper {
-        min-height: 32px !important;
-        line-height: 32px;
         padding: 0 10px 0 16px;
         font-size: 13px;
       }
     }
+
     .el-form--default.el-form--label-top .el-form-item .el-form-item__label {
       margin-bottom: 4px;
     }
+
     .el-input {
-      width:600px;
+      width: 600px;
     }
+
     .el-form .el-form-item .el-form-item__label {
       padding-bottom: 6px;
       font-size: 14px;
       line-height: 16px;
     }
+
+    .appearance__option {
+      display: flex;
+      justify-content: space-between;
+    }
   }
+
   .edit-appearance-base__footer {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     height: 100px;
     margin-top: 3px;
-    padding-left:200px;
+    padding-left: 200px;
 
-    .footer__btn {
-      margin: 0 10px;
+    .business-button {
+      margin: 0 15px;
       height: 30px;
       min-width: 74px;
       padding: 0 15px;
-      color: white;
-      background-color: #38ACD2;
-      border: none;
-      border-radius: 4px;
-      outline: none;
       font-size: 14px;
-      cursor: pointer;
-      transition: background-color linear .2s, color linear .1s;
-    }
-    .footer__btn:hover:not(.footer__btn--disabled) {
-      background-color: lighten(#38ACD2, 10%);
-    }
-    .footer__btn--light {
-      background-color: #F5F6F7;
-      border: 1px solid $--border-color-primary;
-      color: #333;
-    }
-    .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
-      background-color: white;
-      border-color: lighten(#38ACD2, 40%);
-      color: #38ACD2;
-    }
-    .footer__btn--disabled {
-      opacity: .6;
-      cursor: default;
     }
   }
 }
diff --git a/src/assets/css/components/views/administration/License.scss b/src/assets/css/components/views/administration/License.scss
index eb0a7975..5ef07679 100644
--- a/src/assets/css/components/views/administration/License.scss
+++ b/src/assets/css/components/views/administration/License.scss
@@ -1,61 +1,40 @@
-.license{
+.license {
   height: 100%;
+
   .license-form {
-    padding-top:40px;
-    padding-left:100px;
-    background-color: white;
+    padding-top: 40px;
+    padding-left: 100px;
+    background-color: var(--el-fill-color-blank);
     position: relative;
     display: flex;
     flex-direction: column;
     height: 100%;
+
     .license-file {
       display: flex;
       flex-direction: row;
       height: 100%;
       margin-top: 3px;
-      .license__btn {
+
+      .business-button {
         height: 30px;
         min-width: 74px;
-        color: white;
-        background-color: #38ACD2;
-        border: none;
-        border-radius: 4px;
-        outline: none;
         font-size: 14px;
-        cursor: pointer;
-        transition: background-color linear .2s, color linear .1s;
-      }
-      .license__btn:hover:not(.footer__btn--disabled) {
-        background-color: lighten(#38ACD2, 10%);
-      }
-      .license__btn--light {
-        background-color: #F5F6F7;
-        border: 1px solid $--border-color-primary;
-        color: #333;
-      }
-      .license__btn.license__btn--light:hover:not(.license__btn--disabled) {
-        background-color: white;
-        border-color: lighten(#38ACD2, 40%);
-        color: #38ACD2;
-      }
-      .license__btn--disabled {
-        opacity: .6;
-        cursor: default;
       }
     }
 
     .el-form .el-form-item {
       margin-bottom: 0;
-      padding:4px 0;
+      padding: 4px 0;
 
       .el-form-item__label {
-        color: #262626 !important;
+        color: var(--el-text-color-primary) !important;
         font-weight: bold;
         font-size: 14px;
       }
+
       .el-form-item__content {
-        color: #262626 !important;
-        font-weight: 400;
+        color: var(--el-text-color-primary) !important;
         font-size: 14px;
       }
     }
diff --git a/src/assets/css/components/views/charts/ChartOneSituationStatistics.scss b/src/assets/css/components/views/charts/ChartOneSituationStatistics.scss
deleted file mode 100644
index a5c7ca7f..00000000
--- a/src/assets/css/components/views/charts/ChartOneSituationStatistics.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.cn-chart__one-situation-statistics{
-    height: 100%;
-    .one-situation-statistics__box {
-        display: flex;
-        align-items: center;
-        margin-left: 33px;
-        height: 100%;
-        .box__progress {
-            display: block;
-            .el-progress-circle {
-                height: 80px !important;
-                width: 80px !important;
-            }
-            .el-progress__text span{
-                font-size: 16px;
-            }
-        }
-        .box__count{
-            margin-left: 22px;
-            :first-child{
-                font-size: 18px;
-                color: #333;
-            }
-            :last-child{
-                margin-top: 5px;
-                font-size: 14px;
-                color: #666666;
-            }
-        }
-      }
-}
diff --git a/src/assets/css/components/views/charts/ChartTwoSituationStatistics.scss b/src/assets/css/components/views/charts/ChartTwoSituationStatistics.scss
deleted file mode 100644
index 602d5120..00000000
--- a/src/assets/css/components/views/charts/ChartTwoSituationStatistics.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-
-.cn-chart__two-situation-statistics{
-    padding-top: 22px;
-    .box__body {
-        display: flex;
-        align-items: center;
-        margin-left: 33px;
-        padding-top: 22px;
-        .body__progress{
-            display: block;
-            .el-progress__text span{
-                font-size: 16px;
-            }
-        }
-        .body__count{
-            margin-left: 22px;
-            :first-child{
-                font-size: 18px;
-                color: #333;
-            }
-            :last-child{
-                margin-top: 5px;
-                font-size: 14px;
-                color: #666666;
-            }
-        }
-      }
-}
\ No newline at end of file
diff --git a/src/assets/css/components/views/charts/chartAlarmInfo.scss b/src/assets/css/components/views/charts/chartAlarmInfo.scss
deleted file mode 100644
index b923ba8a..00000000
--- a/src/assets/css/components/views/charts/chartAlarmInfo.scss
+++ /dev/null
@@ -1,154 +0,0 @@
-.cn-chart__alarm-info {
-    width: 100%;
-    height: 100%;
-    position: relative;
-
-    .alarm-info__box {
-        height: calc(100% - 40px);
-        width: 100%;
-        overflow: auto;
-
-        .box__body {
-            display: flex;
-            margin-left: 30px;
-            margin-right: 30px;
-            justify-content: flex-start;
-            align-items: center;
-            //height: calc(100% / 9);
-            min-height: 78px;
-            border-bottom: 1px solid #E7EAED;
-
-            .body__content {
-                display: flex;
-
-                .content__icon-box {
-                    position: relative;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-
-                    .icon-box__icon {
-                        width: 30px;
-                        height: 30px;
-                        border-radius: 50%;
-                        display: flex;
-                        justify-content: center;
-                        align-items: center;
-                    }
-
-                    .cn-icon-alert {
-                        width: 12px;
-                        position: absolute;
-                        top: calc(50% - 8px);
-                        left: calc(50% - 8px);
-                    }
-                }
-
-                .content__text-box {
-                    margin: 2px 0 2px 17px;
-
-                    .text-box__title {
-                        font-size: 16px;
-                        line-height: 19px;
-                        color: #333333;
-                        font-weight: 400;
-                        div {
-                            max-width: 300px;
-                            white-space: nowrap;
-                            text-overflow: ellipsis;
-                            overflow: hidden;
-                        }
-                    }
-
-                    .text-box__text {
-                        font-size: 12px;
-                        line-height: 14px;
-                        text-align: center;
-                        margin-top: 10px;
-                        display: flex;
-                        align-items: center;
-                        flex-wrap: wrap;
-
-                        &>div {
-                            margin-bottom: 8px;
-                        }
-
-                        .text__time-box {
-                            display: flex;
-                            margin-right: 8px;
-
-                            .cn-icon-time2 {
-                                color: #8FA1BE;
-                                width: 10px;
-                                height: 10px;
-                                font-size: 12px;
-                            }
-
-                            .time-box__start-time {
-                                font-size: 12px;
-                                color: #999999;
-                                line-height: 14px;
-                                font-weight: 400;
-                            }
-                        }
-
-                        .text__duration-box {
-                            height: 14px;
-                            display: flex;
-                            justify-content: center;
-                            align-items: center;
-
-                            .cn-icon-time2 {
-                                color: #8FA1BE;
-                                width: 12px;
-                                height: 12px;
-                                font-size: 12px;
-                                line-height: 12px;
-                            }
-
-                            .time-box__start-time {
-                                font-size: 12px;
-                                color: #999999;
-                                font-weight: 400;
-                            }
-                        }
-
-                        .text__type {
-                            width: auto;
-                            line-height: 16px;
-                            font-size: 12px;
-                            border: 1px solid;
-                            font-weight: 400;
-                            max-width: 150px;
-                            padding-left: 2px;
-                            padding-right: 2px;
-                            margin-right: 8px;
-                            white-space: nowrap;
-                            text-overflow: ellipsis;
-                            overflow: hidden;
-                            word-break: break-all;
-                        }
-
-                        .duration-box__circle {
-                            display: inline-block;
-                            width: 5px;
-                            height: 5px;
-                            border-radius: 50%;
-                            font-size: 12px;
-                            color: #666666;
-                            line-height: 17px;
-                            font-weight: 400;
-                        }
-                    }
-
-                }
-
-            }
-        }
-    }
-
-    .alarm-info__pagination {
-        height: 40px !important;
-        width: 100%;
-    }
-}
diff --git a/src/assets/css/components/views/charts/chartAppBasicInfo.scss b/src/assets/css/components/views/charts/chartAppBasicInfo.scss
deleted file mode 100644
index 17c8244f..00000000
--- a/src/assets/css/components/views/charts/chartAppBasicInfo.scss
+++ /dev/null
@@ -1,103 +0,0 @@
-.cn-chart__app-basic {
-  display: flex;
-  flex-direction: column;
-  .cn-chart__body {
-    flex: auto;
-    display: flex;
-    .el-descriptions {
-      padding-top: 30px;
-    }
-    &>.el-descriptions {
-      flex: 0 0 350px;
-      padding: 30px 36px;
-    }
-    .chart-location {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-      padding: 0 20px 20px 0;
-    }
-    .el-descriptions__content {
-      color: #3976CB;
-    }
-    .cn-chart__body-single {
-      display: flex;
-      .cn-chart__body-single-table {
-        display: flex;
-        width: 250px;
-        align-items: center;
-      }
-      .cn-chart__body-single-table:nth-of-type(3) {
-        margin-right: 126px;
-      }
-      .single-value-icon__box {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex: 0 0 40%;
-      }
-      .single-value__icon {
-        display: flex;
-        justify-content: center;
-        width: 72px;
-        height: 72px;
-        background-color: $--chart-single-value-icon-background-color;
-        border-radius: 50%;
-
-        i {
-          display: flex;
-          align-items: center;
-          font-size: 28px;
-          color: $--color-primary;
-        }
-      }
-      .single-value-color-g.single-value__icon {
-        background-color: #E2FCEF;
-        i {
-          color: #41D389;
-        }
-      }
-      .single-value-color-y.single-value__icon {
-        background-color: #FFF0DA;
-        i {
-          color: #FA901C;
-        }
-      }
-      .single-value__content {
-        display: flex;
-        flex-direction: column;
-        max-width: 60%;
-        padding-left: 10px;
-
-        div:nth-of-type(1) {
-          margin-bottom: 10px;
-        }
-
-        .content__data {
-          padding-bottom: 7%;
-          font-size: 24px;
-          color: #333333;
-          font-weight: bold;
-        }
-        .content__title {
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          font-size: 16px;
-          color: #666666;
-        }
-        &.single-value__content--with-chart {
-          .content__title {
-            border-bottom: 1px solid $--content-right-background-color;
-          }
-        }
-        .single-value__unit {
-          font-weight: normal;
-          padding-left: 10px;
-          color: #666;
-          font-size: 20px;
-        }
-      }
-    }
-  }
-}
diff --git a/src/assets/css/components/views/charts/chartCryptocurrencyEventList.scss b/src/assets/css/components/views/charts/chartCryptocurrencyEventList.scss
deleted file mode 100644
index 3215599c..00000000
--- a/src/assets/css/components/views/charts/chartCryptocurrencyEventList.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-.cn-chart__table.eventList {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-  .cn-chart__body {
-    flex: auto;
-    display: flex;
-    height: 100%;
-    width: 100%;
-    .el-descriptions {
-      padding-top: 30px;
-    }
-    &>.el-descriptions {
-      flex: 0 0 350px;
-      padding: 30px 36px;
-    }
-    .chart-location {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-      padding: 0 20px 20px 0;
-    }
-    .el-descriptions__content {
-      color: #3976CB;
-    }
-    .crypto-eventList__record {
-      display: flex;
-      height: 100%;
-      width: 100%;
-      .record__table {
-        display: table;
-        height: 100%;
-        width: 100%;
-
-        .record__table-row {
-          display: table-row;
-          font-size: 14px;
-          color: #333333;
-        }
-        .record__table-row.record__table-row--header {
-          padding: 13px 30px 0;
-          height: 40px;
-          color: #6B717B;
-        }
-        .record__table-cell {
-          display: table-cell;
-          vertical-align: middle;
-          padding: 15px 10px;
-          .record_second{
-            color:#7e8088;
-            font-size:12px;
-          }
-          .circle-red {
-            color: #EC7F66;
-            font-size: 28px;
-          }
-        }
-        .record__table-cell:first-of-type {
-          padding-left:30px;
-        }
-      }
-    }
-  }
-}
diff --git a/src/assets/css/components/views/charts/chartDomainDnsRecord.scss b/src/assets/css/components/views/charts/chartDomainDnsRecord.scss
deleted file mode 100644
index 45de90d9..00000000
--- a/src/assets/css/components/views/charts/chartDomainDnsRecord.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.cn-chart__dns-record {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-  .cn-chart__body {
-    flex: auto;
-    display: flex;
-    height: 100%;
-    width: 100%;
-    .el-descriptions {
-      padding-top: 30px;
-    }
-    &>.el-descriptions {
-      flex: 0 0 350px;
-      padding: 30px 36px;
-    }
-    .chart-location {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-      padding: 0 20px 20px 0;
-    }
-    .el-descriptions__content {
-      color: #3976CB;
-    }
-  }
-}
-
diff --git a/src/assets/css/components/views/charts/chartDomainWhois.scss b/src/assets/css/components/views/charts/chartDomainWhois.scss
deleted file mode 100644
index 876d8181..00000000
--- a/src/assets/css/components/views/charts/chartDomainWhois.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.cn-chart__whois {
-  overflow: auto;
-}
-
diff --git a/src/assets/css/components/views/charts/chartEchartAppRelateDomain.scss b/src/assets/css/components/views/charts/chartEchartAppRelateDomain.scss
deleted file mode 100644
index 8a799862..00000000
--- a/src/assets/css/components/views/charts/chartEchartAppRelateDomain.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-.cn-panel2 {
-  position: relative;
-  .chart-list {
-    .vue-grid-layout > .vue-grid-item {
-      .cn-chart {
-        .app-detail__related-domain {
-          display: flex;
-          flex-direction: row;
-          height: 100%;
-          width: 100%;
-          .related-domain__list {
-            display: flex;
-            flex-direction: column;
-            flex: 0 0 25%;
-            overflow: auto;
-            padding-bottom: 20px;
-            //border-bottom: 1px solid $--right-box-border-color;
-
-            .related-domain__list-title {
-              padding: 13px 30px 0;
-              height: 40px;
-              color: #6B717B;
-            }
-
-            .related-domain__list-body {
-              display: flex;
-              flex-direction: column;
-              height: calc(100% - 40px);
-              overflow: hidden auto;
-            }
-
-            .related-domain__list-row {
-              padding: 5px 30px;
-              color: #3976CB;
-
-              i {
-                color: #B8C1D1;
-              }
-            }
-          }
-
-          .related-domain__chart {
-            display: flex;
-            flex-direction: row;
-            flex: 1;
-
-            & > div {
-              flex: 0 0 50%;
-              display: flex;
-              flex-direction: column;
-
-              .related-domain__chart-title {
-                padding-left: 20px;
-                line-height: 50px;
-                flex: 0 0 50px;
-              }
-
-              .chart-drawing {
-                flex: 1;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-.cn-panel2 .chart-list > .vue-grid-layout > .vue-grid-item > .panel-chart .chart-header,.cn-panel2 .chart-list > .dns-screen> .panel-chart .chart-header {
-  border-bottom: 1px solid $--right-box-border-color;
-}
-.cn-panel2 .chart-list > .vue-grid-layout > .vue-grid-item > .panel-chart .chart-header.is-group-collapse {
-  border-bottom: none;
-}
diff --git a/src/assets/css/components/views/charts/chartEchartIpHostedDomain.scss b/src/assets/css/components/views/charts/chartEchartIpHostedDomain.scss
deleted file mode 100644
index cb8de62e..00000000
--- a/src/assets/css/components/views/charts/chartEchartIpHostedDomain.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-.cn-panel2 {
-  position: relative;
-  .chart-list {
-    .vue-grid-layout > .vue-grid-item {
-      .cn-chart {
-        .ip-detail__hosted-domain {
-          display: flex;
-          flex-direction: column;
-          height: 100%;
-          width: 100%;
-          .hosted-domain__list {
-            display: flex;
-            flex-direction: column;
-            flex: 0 0 25%;
-            overflow: auto;
-            padding-bottom: 20px;
-            border-bottom: 1px solid $--right-box-border-color;
-
-            .hosted-domain__list-title {
-              padding: 13px 30px 0;
-              height: 40px;
-              color: #6B717B;
-            }
-
-            .hosted-domain__list-body {
-              display: flex;
-              flex-direction: column;
-              height: calc(100% - 40px);
-              overflow: hidden auto;
-            }
-
-            .hosted-domain__list-row {
-              padding: 5px 30px;
-              color: #3976CB;
-
-              i {
-                color: #B8C1D1;
-              }
-            }
-          }
-
-          .hosted-domain__chart {
-            display: flex;
-            flex-direction: column;
-            flex: 1;
-
-            & > div {
-              flex: 0 0 50%;
-              display: flex;
-              flex-direction: column;
-
-              .hosted-domain__chart-title {
-                padding-left: 20px;
-                line-height: 50px;
-                flex: 0 0 50px;
-              }
-
-              .chart-drawing {
-                flex: 1;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/src/assets/css/components/views/charts/chartEchartWithTable.scss b/src/assets/css/components/views/charts/chartEchartWithTable.scss
deleted file mode 100644
index b675b2be..00000000
--- a/src/assets/css/components/views/charts/chartEchartWithTable.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-.cn-panel2 {
-  position: relative;
-  .chart-list {
-    .vue-grid-layout>.vue-grid-item {
-      .cn-chart {
-        .cn-chart__echarts {
-          display: flex;
-          flex-direction: column;
-          height:100%;
-          .cn-chart__body {
-            flex: auto;
-            display: flex;
-
-            .el-table {
-              padding: 0 10px;
-
-              &:before {
-                height: 0;
-              }
-              thead {
-                color: #333;
-              }
-              th.is-leaf, td {
-                border-bottom: none;
-              }
-              th {
-                padding-bottom: 5px;
-              }
-              td {
-                padding: 4px 0;
-                color: #333;
-              }
-            }
-
-            /*.chart-drawing{
-              height: calc(100% - 36px) !important;
-            }*/
-          }
-          //.cn-chart__body.pie-with-table {
-          //  flex-basis: 60%;
-          //}
-          .cn-chart__footer.pie-with-table {
-            padding: 10px 30px 30px;
-            overflow: auto;
-            .pie-table .el-table__body-wrapper {
-              height: calc(100% - 40px) !important;
-            }
-          }
-        }
-        .pie-table {
-          font-size: 12px;
-          color: #333333;
-          font-weight: 500;
-          border-bottom: none !important;
-
-          .el-table__header-wrapper {
-            .cell {
-              color: #333;
-            }
-          }
-          .el-table__expanded-cell[class*=cell] {
-            padding: 0;
-          }
-          .el-table__expanded-cell[class*=cell]:last-child {
-            border-bottom: none;
-          }
-
-          .expand-table .el-table__body .el-table__row:last-of-type td {
-            border: none;
-          }
-          .expand-table {
-            font-weight: 400;
-            color: #606266;
-
-            .el-table__body-wrapper {
-              height: auto !important;
-            }
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/src/assets/css/components/views/charts/chartIpOpenPortBar.scss b/src/assets/css/components/views/charts/chartIpOpenPortBar.scss
deleted file mode 100644
index 1c655d1c..00000000
--- a/src/assets/css/components/views/charts/chartIpOpenPortBar.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-.chart-ip-open-port-bar {
-    display: flex;
-    height: 100%;
-    .el-table--border {
-        border: none;
-        .el-table__body-wrapper {
-            overflow-y: auto;
-            height: 261px !important;
-            .el-table__body {
-                tr td:nth-of-type(1) {
-                    padding-left: 28px;
-                }
-            }
-        }
-        .el-table__header-wrapper {
-            .has-gutter {
-                tr th:nth-of-type(1) {
-                    padding-left: 28px;
-                }
-            }
-        }
-    }
-    .el-table--border td{
-        border: none !important;
-    }
-    .el-table--border th{
-        border-right: none !important;
-    }
-    .chart-box{
-        width: 30%;
-        height: 100%;
-        >.title{
-            height: 36px;
-            line-height: 36px;
-            box-sizing: border-box;
-            padding: 0 10px;
-            color: #909399;
-            font-size: 12px;
-            font-weight: bold;
-        }
-        .chart-drawing{
-            height: calc(100% - 36px) !important;
-        }
-    }
-
-}
diff --git a/src/assets/css/components/views/charts/chartRelationShipList.scss b/src/assets/css/components/views/charts/chartRelationShipList.scss
deleted file mode 100644
index 5355c794..00000000
--- a/src/assets/css/components/views/charts/chartRelationShipList.scss
+++ /dev/null
@@ -1,155 +0,0 @@
-.ship--show.ship {
-  visibility: visible;
-}
-.chart-drawing-ship__width {
-  width: 1542px !important;
-}
-.ship {
-  width: 320px;
-  background: #FFFFFF;
-  border: 1px solid rgba(119,131,145,0.60);
-  box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
-  border-radius: 3px;
-  position: absolute;
-  display: flex;
-  visibility: hidden;
-  flex-direction: column;
-  .ship-title {
-    display: flex;
-    height: 49px;
-    border-bottom: 1px solid #E6EAED;
-    padding-left: 10px;
-    .ship-title-name {
-      line-height: 49px;
-      font-size: 16px;
-      color: #333333;
-      letter-spacing: 0;
-      font-weight: 500;
-    }
-    .ship-title-symbol {
-      padding-right: 5px;
-      line-height: 65px;
-      img {
-        width: 30px;
-        height: 30px;
-      }
-    }
-  }
-  .ship-body {
-    display: flex;
-    flex-direction: column;
-    margin: 7px;
-    .ship-body-basicInfo {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-    }
-    .ship-body-list.ship-body-child {
-      display: flex;
-      flex-direction: column;
-      .ship-body-list-child {
-        position: relative;
-        .ship-body-list-child-left {
-          margin: 3px 0 3px 10px;
-          display: flex;
-          font-size: 12px;
-          color: #999999;
-          font-weight: 400;
-          .ship-body-list-child-title {
-            width: 120px;
-          }
-          .ship-body-list-child-trip {
-            width: 160px;
-          }
-          .ship-body-list-child-value {
-            display: flex;
-            .ship-body-list-child-msg {
-              margin-right: 7px;
-            }
-            .ship-body-list-child-loading {
-              .ship-body-list-child-charts {
-                width: 38px;
-                height: 16px;
-              }
-            }
-          }
-        }
-      }
-    }
-    .ship-body-list {
-      margin:0 0 5px 20px;
-      text-align: left;
-      display: flex;
-      width: calc(100% - 20px);
-      position: relative;
-      .ship-body-list-title {
-        width: 130px;
-        font-size: 14px;
-        color: #666666;
-        letter-spacing: 0;
-        font-weight: 400;
-        display: flex;
-        flex: 1;
-      }
-      .security.ship-body-list-security-length {
-        width: 140px;
-      }
-      .ship-body-list-value {
-        font-size: 14px;
-        color: #333333;
-        letter-spacing: 0;
-        font-weight: 400;
-        display: flex;
-        flex: 1;
-      }
-      .ship-body-list-value.security {
-        font-size: 12px;
-        color: #FFFFFF;
-        font-weight: 400;
-        border-radius: 2px;
-        margin: 0 3px;
-        width: 200px;
-        flex-wrap: wrap;
-        .ship-severity {
-          margin-bottom: 3px;
-        }
-        .ship-body-list-security-alert {
-          padding: 1px;
-          text-align: center;
-        }
-        .ship-body-list-security-length {
-          margin: 0 10px 0 3px;
-          font-size: 14px;
-          color: #333333;
-          letter-spacing: 0;
-          font-weight: 400;
-        }
-        .no-recent-alerts {
-          font-size: 12px;
-          color: #333333;
-          font-weight: 400;
-          line-height: 19px;
-          i {
-            color: #23BF9A;
-            margin-right: 4px;
-          }
-        }
-        .ship-body-list-security-alert.critical {
-          background-color: #D84C4C;
-        }
-        .ship-body-list-security-alert.high {
-          background-color: #FF9A79;
-        }
-        .ship-body-list-security-alert.info {
-          background-color: #D1BD50;
-        }
-        .ship-body-list-security-alert.medium {
-          background-color: #FFB65A;
-        }
-        .ship-body-list-security-alert.low {
-          background-color: #FFD82D;
-        }
-      }
-    }
-  }
-}
diff --git a/src/assets/css/components/views/charts/chartSingleValue.scss b/src/assets/css/components/views/charts/chartSingleValue.scss
deleted file mode 100644
index aa2981b2..00000000
--- a/src/assets/css/components/views/charts/chartSingleValue.scss
+++ /dev/null
@@ -1,670 +0,0 @@
-.cn-chart__single-value {
-  .single-value__unit {
-    padding-left: 6px;
-  }
-
-  &.cn-chart__single-value--detail-overview.cn-chart__single-value--icon-left {
-    width: unset;
-    flex: 0 0 240px;
-    flex-wrap: wrap;
-
-    .single-value__icon {
-      width: 38px;
-      height: 38px;
-
-      i {
-        font-size: 15px;
-      }
-    }
-
-    .single-value__content {
-      .content__data {
-        font-size: 14px;
-        color: #333;
-
-        .single-value__unit {
-          font-size: 14px;
-          color: #333;
-        }
-      }
-
-      .content__title {
-        font-size: 12px;
-      }
-    }
-  }
-
-  &.cn-chart__single-value--icon-left {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-
-    .single-value-icon__box {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex: 0 0 100px;
-    }
-
-    .single-value__icon {
-      display: flex;
-      justify-content: center;
-      width: 56px;
-      height: 56px;
-      background-color: $--chart-single-value-icon-background-color;
-      border-radius: 50%;
-
-      i {
-        display: flex;
-        align-items: center;
-        font-size: 28px;
-        color: $--color-primary;
-      }
-    }
-
-    .single-value__content {
-      display: flex;
-      flex-direction: column;
-      padding-right: 10px;
-
-      .content__data {
-        padding-bottom: 10px;
-        font-size: 18px;
-        color: #333333;
-        font-weight: bold;
-      }
-
-      .content__title {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        font-size: 14px;
-        color: #666666;
-      }
-
-      &.single-value__content--with-chart {
-        .content__title {
-          border-bottom: 1px solid $--content-right-background-color;
-        }
-      }
-
-      .single-value__unit {
-        font-weight: normal;
-        padding-left: 10px;
-        color: #666;
-        font-size: 20px;
-      }
-    }
-  }
-
-  &.cn-chart__single-value--icon-right {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: space-around;
-    align-items: center;
-    height: 100%;
-    width: 90%;
-    margin: auto;
-
-    .single-value-icon__box {
-      flex: 0 0 74px;
-    }
-
-    .single-value__icon {
-      background-color: $--chart-single-value-icon-background-color;
-      border-radius: 50%;
-      position: relative;
-      width: 56px;
-      height: 56px;
-
-      i {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        font-size: 24px;
-        color: $--color-primary;
-      }
-    }
-
-    .single-value__content {
-      display: flex;
-      height: 100%;
-      flex-direction: column;
-      padding: 0 10px;
-
-      .content__title {
-        display: flex;
-        align-items: center;
-        height: 50%;
-        font-size: 16px;
-        color: #666666;
-      }
-
-      .content__data {
-        display: flex;
-        padding-top: 5%;
-        height: 50%;
-        flex: auto;
-        font-size: 24px;
-        color: #333333;
-        font-weight: bold;
-      }
-    }
-  }
-
-  &.cn-chart__single-value--icon-right--color {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: space-around;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-
-    .single-value__content {
-      display: flex;
-      height: 100%;
-      width: 100%;
-      flex-direction: row-reverse;
-      justify-content: space-between;
-      align-items: center;
-
-      .single-value-icon__box {
-        padding-right: 30px;
-
-        .single-value__icon {
-          border-radius: 50%;
-          position: relative;
-          margin-right: 7.5%;
-          margin-top: 30%;
-
-          .cn-icon-svg {
-            width: 50px;
-            height: 50px;
-            vertical-align: middle;
-            fill: currentColor;
-            overflow: hidden;
-          }
-
-          i {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            font-size: 24px;
-          }
-        }
-      }
-
-      .single-value__data {
-        display: flex;
-        height: 100%;
-        flex-direction: column;
-        padding-left: 20px;
-
-        .content__title {
-          display: flex;
-          align-items: flex-end;
-          height: 50%;
-          font-size: 16px;
-          color: #666666;
-          padding-bottom: 5px;
-        }
-
-        .content__data {
-          display: flex;
-          padding-top: 5%;
-          height: 50%;
-          flex: auto;
-          font-size: 24px;
-          color: #333333;
-          font-weight: bold;
-        }
-      }
-    }
-  }
-
-  &.cn-chart__single-value--chart {
-    display: flex;
-    padding: 13px 20px;
-    height: 100%;
-    width: 100%;
-
-    .single-value__content {
-      display: flex;
-      height: 100%;
-      width: 100%;
-      flex-direction: column;
-
-      .content__title {
-        display: flex;
-        align-items: center;
-        height: 30%;
-        font-size: 16px;
-        color: #666666;
-      }
-
-      .content__data {
-        display: flex;
-        align-items: center;
-        height: 25%;
-        font-size: 18px;
-        color: #333333;
-        font-weight: bold;
-      }
-
-      .content__chart {
-        flex: auto
-      }
-    }
-  }
-
-  &.cn-chart__single-value--icon-doh {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: space-between;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-    background: #FFFFFF;
-    border: 1px solid #E7EAED;
-    box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
-    border-radius: 2px;
-
-    .single-value-icon__box {
-      flex: 0 0 80px;
-    }
-
-    .single-value__icon {
-      background-color: $--chart-single-value-icon-background-color;
-      border-radius: 50%;
-      position: relative;
-      width: 56px;
-      height: 56px;
-
-      i {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        font-size: 24px;
-        color: $--color-primary;
-      }
-    }
-
-    .single-value__content {
-      display: flex;
-      height: 100%;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      padding: 0 10px;
-      margin-left: 20px;
-
-      .content__title {
-        display: flex;
-        align-items: center;
-        margin: 16px 0 27px 0;
-        font-size: 16px;
-        color: #333333;
-        line-height: 22px;
-        font-weight: 500;
-      }
-
-      .content__data {
-        display: flex;
-        padding-top: 5%;
-        height: 50%;
-        flex: auto;
-        font-size: 24px;
-        color: #333333;
-        font-weight: bold;
-
-        .content__data__doh {
-          .content__data__doh__count {
-            font-size: 30px;
-            color: #333333;
-            font-weight: 500;
-          }
-
-          .content__data__doh__percent {
-            margin-top: 10px;
-            font-size: 14px;
-            color: #666666;
-            font-weight: 400;
-
-            span {
-              font-size: 14px;
-              color: #FC8157;
-              font-weight: 500;
-              margin-left: 10px;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &.cn-chart__single-value--protocol {
-    height: 100%;
-    width: 100%;
-    .single-value__content {
-      display: flex;
-      width: 100%;
-      height: 100%;
-      flex-direction: column;
-      .single-value__data {
-        display: flex;
-        flex-direction: column;
-        padding: 10px 20px 10px 18px;
-        .content__title {
-          font-size: 16px;
-          color: #333333;
-        }
-      }
-      .content__data {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-      }
-      .content__data-protocol:nth-of-type(1) {
-        margin-bottom: 50px;
-        span:nth-of-type(2) {
-          font-size: 12px;
-          color: #FC8157;
-          font-weight: 500;
-        }
-      }
-      .content__data-protocol:nth-of-type(2) {
-        span:nth-of-type(2) {
-          font-size: 12px;
-          color: #FBA342;
-          font-weight: 500;
-        }
-      }
-      .content__data-protocol {
-        display: flex;
-        height: 68px;
-        text-align: left;
-        .content__data-protocol-all {
-          flex: 1.5;
-        }
-        .content__data-protocol-icon {
-          display: flex;
-          width: 68px;
-          height: 100%;
-          margin: auto;
-          line-height: 68px;
-          border-radius: 100%;
-          justify-content: center;
-          i {
-            font-size: 26px;
-          }
-        }
-        .content__data-protocol-value {
-          flex: 2;
-          display: flex;
-          justify-content: space-between;
-          flex-direction: column;
-          .content__data-protocol-value-title {
-            margin-bottom: 7px;
-            font-size: 14px;
-            color: #666666;
-            font-weight: 400;
-          }
-          .content__data-protocol-value-num {
-            font-size: 26px;
-            color: #333333;
-            font-weight: 500;
-          }
-        }
-        .content__data-protocol-percent {
-          flex: 2;
-          display: flex;
-          justify-content: center;
-          height: 68px;
-          text-align: left;
-          font-size: 14px;
-          color: #666666;
-          font-weight: 400;
-          line-height: 95px;
-        }
-      }
-    }
-  }
-
-  &.cn-chart__single-value--percentile-right {
-    display: flex;
-    align-items: center;
-    justify-content: left;
-    height: 100%;
-    flex: 0 0 auto;
-    flex-wrap: nowrap;
-    margin-bottom: 10px;
-
-    .single-value-icon__box {
-      display: flex;
-      align-items: center;
-      justify-content: left;
-      margin-right: 5px;
-      flex: 0 0 80;
-    }
-
-    .single-value__icon {
-      display: flex;
-      justify-content: center;
-      width: 40px;
-      height: 40px;
-      background-color: $--chart-single-value-icon-background-color;
-      border-radius: 50%;
-
-      i {
-        display: flex;
-        align-items: center;
-        font-size: 20px;
-        color: $--color-primary;
-      }
-    }
-
-    .single-value__content {
-      display: flex;
-      flex-direction: column;
-      max-width: 60%;
-      padding-right: 10px;
-
-      .data__title-in-one {
-        display:flex;
-        flex-direction: row;
-        align-items: center;
-      }
-
-      .content__data {
-        margin-bottom: 5px;
-        font-size: 14px;
-        color: #333333;
-        font-weight: bold;
-      }
-
-      .content__title {
-        white-space: nowrap;
-        font-size: 12px !important;
-        color: #7e8081;
-        margin-bottom: 5px;
-        padding: 3px 4px 3px 3px;
-      }
-
-      .title-background-color {
-        background-color: #EFF6FE;
-        border-radius: 4px;
-      }
-
-      .content__percentile {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        font-size: 12px;
-        color: #666666;
-        display:flex;
-        flex-direction: row;
-
-        .circle__content {
-          display:flex;
-          flex-display:row;
-          margin-right:4px;
-
-          .percentile__title-color {
-            color:#9b9b9b
-          }
-        }
-      }
-
-      .circle {
-        position: relative;
-        width: 6px;
-        height: 6px;
-        line-height: 6px;
-        border-radius: 50%;
-        -moz-border-radius: 50%;
-        margin: auto;
-        margin-right: 4px;
-        z-index: 1;
-      }
-
-      .circle.circle-p50 {
-        background: #ffa200;
-
-      }
-      .circle.circle-p90 {
-        background: #23bf9a;
-      }
-
-      &.single-value__content--with-chart {
-        .content__title {
-          border-bottom: 1px solid $--content-right-background-color;
-        }
-      }
-
-      .single-value__unit {
-        padding-left:0px;
-        padding-right: 5px;
-        color: #333333;
-        font-size: 14px;
-        font-weight: bold;
-      }
-    }
-  }
-
-  &.cn-chart__single-value--percentile-left {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: space-around;
-    align-items: center;
-    height: 100%;
-    width: unset;
-
-    .single-value-icon__box {
-      display: flex;
-      align-items: flex-start;
-      justify-content: right;
-      margin: 0 22px 22px 0;
-      flex: 0 0 80;
-    }
-
-    .single-value__icon {
-      display: flex;
-      justify-content: center;
-      width: 60px;
-      height: 60px;
-      background-color: $--chart-single-value-icon-background-color;
-      border-radius: 50%;
-
-      i {
-        display: flex;
-        align-items: center;
-        font-size: 28px;
-        color: $--color-primary;
-      }
-    }
-
-    .single-value__content {
-      display: flex;
-      flex-direction: column;
-      max-width: 60%;
-      padding-right: 10px;
-      margin-left:25px;
-
-      .content__data {
-        margin-bottom: 5%;
-        font-size: 22px;
-        color: #333333;
-        font-weight: bold;
-      }
-
-      .content__title {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        font-size: 14px !important;
-        color: #7e8081;
-        margin-bottom: 7%;
-        font-weight:400;
-      }
-
-      .content__percentile {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        font-size: 12px;
-        color: #666666;
-        display:flex;
-        flex-direction: row;
-        font-weight: bold;
-
-        .circle__content {
-          display:flex;
-          flex-display:row;
-          margin-right:15px;
-
-          .percentile__title-color {
-            color:#9b9b9b;
-            font-weight: 500;
-          }
-        }
-      }
-
-      .circle {
-        position: relative;
-        width: 7px;
-        height: 7px;
-        line-height: 7px;
-        border-radius: 50%;
-        -moz-border-radius: 50%;
-        margin: auto;
-        margin-right: 4px;
-        z-index: 1;
-      }
-
-      .circle.circle-p50 {
-        background: #ffa200;
-
-      }
-      .circle.circle-p90 {
-        background: #23bf9a;
-      }
-
-      &.single-value__content--with-chart {
-        .content__title {
-          border-bottom: 1px solid $--content-right-background-color;
-        }
-      }
-
-      .single-value__unit {
-        color: #333333;
-        font-size: 22px;
-        font-weight: bold;
-      }
-    }
-  }
-
-}
diff --git a/src/assets/css/components/views/charts/chartTable.scss b/src/assets/css/components/views/charts/chartTable.scss
deleted file mode 100644
index 62591375..00000000
--- a/src/assets/css/components/views/charts/chartTable.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-.active-ip.cn-chart__table {
-  height: calc(100% - 47px) !important;
-}
-.cn-chart__table{
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  .cn-chart__body {
-    flex: auto;
-    overflow-y: auto;
-    height: 100%;
-    width: 100%;
-
-    .el-table {
-      padding: 0 10px;
-      font-size: 14px;
-      .el-table__body-wrapper.is-scrolling-none {
-        height: 100%;
-        overflow-y: auto;
-      }
-
-      &:before {
-        height: 0;
-      }
-      thead {
-        color: #333;
-      }
-      th.is-leaf, td {
-        border-bottom: none;
-      }
-      th {
-        padding-bottom: 5px;
-      }
-      td {
-        padding: 4px 0;
-        color: #333;
-      }
-    }
-    .active-ip__icon {
-      overflow: hidden;
-      position: absolute;
-      top: 8px;
-      left: 6px;
-      display: flex;
-      justify-content: center;
-      justify-items: center;
-      align-items: center;
-      width: 23px;
-      height: 23px;
-      border-radius: 50%;
-      background: #e8fbf9;
-      border: 2px solid #e8fbf9;
-    }
-    .ip-green {
-      color: #23BF9A;
-    }
-    .active-ip__content {
-      position: absolute;
-      top: 7px;
-      left: 35px;
-      overflow: hidden;
-    }
-  }
-  .chart-table-pagination.el-pagination {
-    padding: 12px 0 9px 0;
-    text-align: center;
-
-    .el-pagination__jump {
-      margin-left: 10px;
-    }
-  }
-}
diff --git a/src/assets/css/components/views/charts/ipBasicInfo.scss b/src/assets/css/components/views/charts/ipBasicInfo.scss
deleted file mode 100644
index 678d62d5..00000000
--- a/src/assets/css/components/views/charts/ipBasicInfo.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.cn-chart__ip-basic {
-  display: flex;
-  padding: 30px  60px 0 30px;
-  .cn-chart__ip-basic-info {
-    padding-right: 80px;
-  }
-  &>.el-descriptions {
-    flex: 0 0 350px;
-  }
-  .chart-location {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-  }
-  .el-descriptions :not(.is-bordered) td {
-    padding-bottom: 5px !important;
-  }
-  .el-descriptions__content {
-    color: #3976CB;
-  }
-}
-
diff --git a/src/assets/css/components/views/charts2/digitalCertificate.scss b/src/assets/css/components/views/charts2/digitalCertificate.scss
index 41511a94..3ea77fd3 100644
--- a/src/assets/css/components/views/charts2/digitalCertificate.scss
+++ b/src/assets/css/components/views/charts2/digitalCertificate.scss
@@ -8,7 +8,7 @@
     .digital-certificate-header__icon {
       width: 4px;
       height: 16px;
-      background: #38ACD2;
+      background: var(--el-color-business);
       border-radius: 1px;
       margin-right: 6px;
     }
@@ -16,8 +16,8 @@
     .digital-certificate-header-name {
       font-family: PingFangSC-Semibold;
       font-size: 14px;
-      color: #575757;
-      font-weight: 600;
+      color: var(--el-text-color-regular);
+      font-weight: bold;
     }
   }
 
@@ -25,9 +25,9 @@
     height: auto;
     min-height: 262px;
     padding: 20px;
-    background: rgba(113, 113, 113, 0.04);
-    border: 1px solid #E2E5ECFF;
-    border-radius: 4px;
+    background: var(--el-fill-color-lighter);
+    border: 1px solid var(--el-border-color-light);
+    border-radius: var(--el-border-radius-base);
 
     .digital-certificate-body-tags {
       display: flex;
@@ -48,21 +48,19 @@
         width: 176px;
         font-family: $font-family;
         font-size: 14px;
-        color: #717171;
-        font-weight: 400;
+        color: var(--el-text-color-regular);
       }
 
       .certificate-list-item__value, .certificate-list-item__value1 {
         width: calc(100% - 176px - 75px);
         font-family: $font-family;
         font-size: 14px;
-        color: #353636;
-        font-weight: 400;
+        color: var(--el-text-color-primary);
       }
 
       .certificate-list-item__value1 {
         padding-bottom: 2px;
-        border-bottom: 1px #353636 solid;
+        border-bottom: 1px var(--el-text-color-primary) solid;
         word-break: break-word;
       }
     }
diff --git a/src/assets/css/components/views/charts2/dnsActiveMaliciousDomain.scss b/src/assets/css/components/views/charts2/dnsActiveMaliciousDomain.scss
deleted file mode 100644
index faa7f81a..00000000
--- a/src/assets/css/components/views/charts2/dnsActiveMaliciousDomain.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-.dns-mailcious-domain {
-  $blue: #046ECA;
-  $fontFamily: NotoSansHans-Medium;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .dns-mailcious-domain-title {
-    font-size: 14px;
-    color: #353636;
-    margin-bottom: 12px;
-  }
-
-  .dns-mailcious-domain-table {
-    height: calc(100% - 30px) !important;
-    border: 1px solid #E2E5EC;
-    border-radius: 4px;
-    font-size: 12px;
-    padding: 1px;
-
-    .el-table__header-wrapper {
-      tr th {
-        padding: 4px 0;
-
-        .dns-column__span {
-          font-size: 12px;
-          color: #353636;
-          font-weight: 600;
-        }
-      }
-    }
-    .el-table__body-wrapper.is-scrolling-none {
-      tr td {
-        padding: 6.49px 0;
-      }
-    }
-  }
-
-  .data-mailcious-domain-table {
-    display: flex !important;
-    height: auto;
-    line-height: 20.4px;
-    flex-direction: row;
-    align-items: center;
-    flex-wrap: wrap;
-
-    .data-column-domain, .data-column-ips {
-      font-family: NotoSansSChineseRegular;
-      width: 210px;
-      font-size: 12px;
-      color: $blue;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-
-      .data-column-ips-hover-block {
-        height: 24px;
-        line-height: 24px;
-        color: #046ECA;
-      }
-    }
-  }
-
-  .el-table--group::after, .el-table--border::after, .el-table::before {
-    height: 0px;
-  }
-}
diff --git a/src/assets/css/components/views/charts2/dnsEventChart.scss b/src/assets/css/components/views/charts2/dnsEventChart.scss
deleted file mode 100644
index 33ebec62..00000000
--- a/src/assets/css/components/views/charts2/dnsEventChart.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.dns-event-chart {
-  width: 100%;
-  height: 100%;
-  border: 1px solid $--border-color;
-  border-radius: 4px;
-  display: flex;
-  justify-content: space-between;
-
-  .dns-event-chart-pie {
-    width: 33%;
-    height: 100%;
-  }
-
-  .dns-event-chart-bar {
-    width: 67%;
-    height: 100%;
-  }
-
-}
diff --git a/src/assets/css/components/views/charts2/dnsEventChartByPie.scss b/src/assets/css/components/views/charts2/dnsEventChartByPie.scss
deleted file mode 100644
index f0b7f3c5..00000000
--- a/src/assets/css/components/views/charts2/dnsEventChartByPie.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.dns-event {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  border: none;
-
-  .dns-event-pie {
-    width: 100%;
-    height: 100%;
-    border-radius: 4px;
-    display: flex;
-    border: none;
-
-    .dns-event-pies {
-      height: 100%;
-      width: 100%;
-      display: flex;
-      align-items: center;
-
-      .chart-drawing {
-        height: 100%;
-        width: 50%;
-      }
-
-      .color-block {
-        width: 8px;
-        height: 8px;
-        margin-right: 8px;
-        margin-top: 3px;
-      }
-    }
-  }
-}
-
diff --git a/src/assets/css/components/views/charts2/dnsRecentEvents.scss b/src/assets/css/components/views/charts2/dnsRecentEvents.scss
deleted file mode 100644
index 35b840ea..00000000
--- a/src/assets/css/components/views/charts2/dnsRecentEvents.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-.dns-recent-event.npm-app-event {
-  .npm-app-event-table.dns-recent-event-table {
-    .el-table__body-wrapper.is-scrolling-none {
-      tr td {
-        padding: 6.49px 0;
-      }
-    }
-  }
-  .data-applications {
-    font-size: 12px;
-    color: #353636;
-    .cn-icon-events-type {
-      font-size: 12px;
-    }
-    .cn-icon-events-type.performance {
-      color: #D9C74B;
-    }
-    .cn-icon-events-type.security {
-      color: #E99F67;
-    }
-  }
-  .dns-recent-event-header {
-    display: flex;
-    justify-content: space-between;
-    .dns-recent-event-title {
-      font-size: 14px;
-      color: #353636;
-      margin-bottom: 13px;
-    }
-    .dns-recent-event-select {
-      display: flex;
-      .metric-select:nth-of-type(2) {
-        margin-left: 20px;
-      }
-      .metric-select:nth-of-type(1) {
-        .option__select.select-column {
-          .el-input__inner {
-            width: 155px;
-          }
-        }
-      }
-    }
-  }
-  .data-eventType {
-    background: none;
-    padding: 0;
-    margin-right: 0;
-    margin-bottom: 0;
-    font-weight: 600;
-  }
-}
diff --git a/src/assets/css/components/views/charts2/dnsTrafficLine.scss b/src/assets/css/components/views/charts2/dnsTrafficLine.scss
deleted file mode 100644
index 0b08f51a..00000000
--- a/src/assets/css/components/views/charts2/dnsTrafficLine.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.line.network.dns-traffic-line {
-  
-}
diff --git a/src/assets/css/components/views/charts2/domainNameResolution.scss b/src/assets/css/components/views/charts2/domainNameResolution.scss
index f32b5432..689399f3 100644
--- a/src/assets/css/components/views/charts2/domainNameResolution.scss
+++ b/src/assets/css/components/views/charts2/domainNameResolution.scss
@@ -1,69 +1,74 @@
 .type-data__column {
-  display:flex;
+  display: flex;
   flex-direction: column;
-  margin-left:5px;
-  margin-right:0px;
-  margin-top:0px;
+  margin-left: 5px;
+  margin-right: 0;
+  margin-top: 0;
+
   .type-data {
-    display:flex;
-    flex-flow:row wrap;
-    margin-top:0px;
+    display: flex;
+    flex-flow: row wrap;
+    margin-top: 0;
+
     .type-title {
-      display:flex;
+      display: flex;
       flex-direction: row;
       justify-content: center;
       align-items: center;
-      margin-bottom:15px;
-      margin-right:10px;
-      font-family: PingFangSC-Semibold;
+      margin-bottom: 15px;
+      margin-right: 10px;
       font-size: 14px;
-      color: #575757;
+      color: var(--el-text-color-regular);
       line-height: 20px;
       font-weight: 600;
+
       .title-mark {
         width: 4px;
         height: 16px;
-        margin-left:0px;
+        margin-left: 0;
         margin-right: 6px;
-        background: #38ACD2;
+        background: var(--el-color-business);
         border-radius: 1px;
       }
+
       .type-title-word {
         margin-right: 6px;
       }
     }
 
-    .more{
-      margin-bottom:20px;
+    .more {
+      margin-bottom: 20px;
+
       .button {
-        color:#909399;
+        color: var(--el-color-info);
         cursor: pointer;
       }
     }
+
     .type-content {
-      margin-bottom:0px;
-      display:flex;
+      margin-bottom: 0;
+      display: flex;
       flex-flow: row wrap;
-      width:100%;
+      width: 100%;
+
       .data-item {
         display: flex;
         justify-content: center;
         align-items: center;
-        background: rgba(119,131,145,0.06);
-        border: 1px solid rgba(119,131,145,0.36);
+        background: var(--cn-bg-color-lighter);
+        border: 1px solid var(--el-color-info-light-5);
         border-radius: 2px;
-        height:28px;
-        padding:8px 15px;
-        margin-right:10px;
-        margin-bottom:15px;
+        height: 28px;
+        padding: 8px 15px;
+        margin-right: 10px;
+        margin-bottom: 15px;
         font-size: 12px;
-        color: #353636;
-        font-weight: 400;
+        color: var(--el-text-color-primary);
       }
     }
 
     .type-error-content {
-      width:100%;
+      width: 100%;
       height: 40px;
       margin-bottom: 12px;
       position: relative;
diff --git a/src/assets/css/components/views/charts2/entityDetailBasicInfo.scss b/src/assets/css/components/views/charts2/entityDetailBasicInfo.scss
index c3984d3f..0fb3fddc 100644
--- a/src/assets/css/components/views/charts2/entityDetailBasicInfo.scss
+++ b/src/assets/css/components/views/charts2/entityDetailBasicInfo.scss
@@ -1,13 +1,14 @@
 .el-popper.analysis-popper {
   margin-top: -5px !important;
   padding: 0;
-  border: 1px solid #C5C5C5 !important;
-  border-radius: 4px;
-  box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+  border: 1px solid var(--el-border-color);
+  border-radius: var(--el-border-radius-base); // 4px
+  box-shadow: var(--el-box-shadow-light);
 
   .el-popper__arrow {
     display: none;
   }
+
   .analysis-entry {
     display: flex;
     flex-direction: column;
@@ -15,11 +16,12 @@
     .analysis-entry__header {
       height: 42px;
       line-height: 42px;
-      background-color: #F7F7F7;
+      background-color: var(--cn-bg-color-lighter);
       padding-left: 20px;
-      color: #353636;
-      border-radius: 4px 4px 0 0;
+      color: var(--el-text-color-primary);
+      border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0;
     }
+
     .analysis-entry__body {
       display: flex;
       height: 134px;
@@ -35,9 +37,10 @@
 
         &:hover {
           div i, span {
-            color: #046ECA;
+            color: var(--el-color-primary);
           }
         }
+
         div {
           display: flex;
           align-items: center;
@@ -46,37 +49,43 @@
           height: 46px;
           width: 46px;
           border-radius: 50%;
-          background-color: #F5F6F8;
+          //background-color: #F5F6F8;
+          background-color: var(--el-color-info-light-9);
 
           i {
-            color: #353636;
+            color: var(--el-text-color-primary);
             font-size: 22px;
           }
         }
+
         span {
           font-size: 12px;
-          color: #353636;
+          color: var(--el-text-color-primary);
         }
       }
     }
   }
 }
+
 .entity-detail-basic-info {
   position: relative;
   padding: 35px 30px 0 30px;
   height: 100%;
-  border: 1px solid #E2E5EC;
-  border-radius: 4px;
+  border: 1px solid var(--el-border-color-light);
+  border-radius: var(--el-border-radius-base);
 
   .dividing-line {
     height: 1px;
     width: 100%;
     margin-top: 21px;
-    background-color: #EFF2F5;
+    //background-color: #EFF2F5;
+    background-color: var(--el-bg-color-page);
   }
+
   .entity-type {
-    color: #717171;
+    color: var(--el-text-color-regular);
   }
+
   .entity-basic-info {
     display: flex;
     align-items: center;
@@ -90,9 +99,10 @@
         padding-right: 12px;
         font-family: Helvetica-Bold;
         font-size: 32px;
-        color: #353636;
+        color: var(--el-text-color-primary);
         font-weight: bold;
       }
+
       div {
         display: flex;
         justify-content: center;
@@ -100,15 +110,17 @@
         height: 28px;
         width: 28px;
         border-radius: 50%;
-        background-color: #EFF1F4;
+        //background-color: #EFF1F4;
+        background-color: var(--el-bg-color-page);
         cursor: pointer;
 
         i {
-          color: #717171;
+          color: var(--el-text-color-regular);
           font-size: 12px;
         }
       }
     }
+
     .analysis-btn {
       display: flex;
       align-items: center;
@@ -116,21 +128,24 @@
       height: 24px;
       padding: 0 10px;
       font-size: 12px;
-      color: #046ECA;
+      color: var(--el-color-primary);
       cursor: pointer;
-      background-color: #FFF;
-      transition: background-color linear .2s;
+      background-color: var(--el-fill-color-blank);
+      transition: background-color linear var(--el-transition-duration);
 
       &.analysis-btn--active {
-        background-color: #EBF7FA;
-        border-radius: 2px;
+        //background-color: #EBF7FA;
+        background-color: var(--el-color-primary-light-9);
+        border-radius: var(--el-border-radius-small); // 2px
       }
+
       i {
         padding-right: 4px;
         font-size: 14px;
       }
     }
   }
+
   .entity-tags {
     display: flex;
     flex-wrap: wrap;
@@ -147,6 +162,7 @@
       }
     }
   }
+
   .entity-detail-info {
     display: flex;
     flex-flow: row wrap;
@@ -162,21 +178,24 @@
 
       i {
         font-size: 22px;
-        color: #353636;
+        color: var(--el-text-color-primary);
         margin-right: 14px;
       }
+
       .detail-card__text {
         .detail-card__label {
           margin-bottom: 6px;
           font-size: 12px;
-          color: #717171;
+          color: var(--el-text-color-regular);
         }
+
         .detail-card__value {
           display: -webkit-box;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 3;
           overflow: hidden;
-          color: #222;
+          //color: #222;
+          color: var(--el-text-color-primary);
           line-height: 18px;
           font-size: 14px;
         }
diff --git a/src/assets/css/components/views/charts2/entityDetailLine.scss b/src/assets/css/components/views/charts2/entityDetailLine.scss
index 0ff946a6..6d80e03d 100644
--- a/src/assets/css/components/views/charts2/entityDetailLine.scss
+++ b/src/assets/css/components/views/charts2/entityDetailLine.scss
@@ -13,13 +13,13 @@
 
         .select-prefix {
           font-size: 14px;
-          color: #999;
+          color: var(--el-text-color-secondary);
           padding: 0 6px 0 3px;
         }
 
         .el-input__inner {
           font-size: 14px;
-          color: #353636;
+          color: var(--el-text-color-regular);
         }
 
         .common-select {
@@ -41,10 +41,9 @@
         min-height: 24px !important;
         padding-left: 4px;
         font-size: 12px;
-        font-weight: 400;
-        border-radius: 2px;
+        border-radius: var(--el-border-radius-base);
         .el-select__placeholder {
-          color: #2C72C6 !important;
+          color: var(--el-color-primary) !important;
           margin-left: 1px;
         }
         .el-select__suffix {
@@ -71,7 +70,15 @@
       margin-right: 10px;
       height: 24px;
       line-height: 24px;
-      border: 1px solid #DCDFE6;
     }
   }
 }
+
+.line__block {
+  position: relative;
+  height: calc(100% - 74px);
+}
+
+.line-metric__select {
+  width: 127px;
+}
diff --git a/src/assets/css/components/views/charts2/entityDetailSubscriberMap.scss b/src/assets/css/components/views/charts2/entityDetailSubscriberMap.scss
index 022ab7bb..5dc4961f 100644
--- a/src/assets/css/components/views/charts2/entityDetailSubscriberMap.scss
+++ b/src/assets/css/components/views/charts2/entityDetailSubscriberMap.scss
@@ -1,14 +1,25 @@
+$text-color-primary: var(--el-text-color-primary);
+$color-white: var(--el-color-white);
+$color-inactive: var(--el-color-info-light-5);
+$color-regular: var(--el-text-color-regular);
+$color-text-primary: var(--el-text-color-primary);
+$color-human: #233447; // 以下是颜色暂无替代的
+$color-base-station: #585B5F;
+$color-circle: #DE3434;
+$color-highlight: #CC4444;
+
 .subscriber-map {
   height: 100%;
 
   svg {
-    fill: #fff;
+    fill: var(--el-fill-color-blank);
   }
+
   .subscriber-map-header {
     height: 34px;
     padding-bottom: 10px;
     font-size: 14px;
-    color: #353636;
+    color: $text-color-primary;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -18,9 +29,10 @@
       overflow: hidden;
     }
   }
+
   .subscriber-map-body {
     position: relative;
-    border: 1px solid #E2E5EC;
+    border: 1px solid var(--el-border-color-light);
     border-radius: 4px;
     height: calc(100% - 34px);
 
@@ -31,6 +43,7 @@
       .maplibregl-canvas:focus-visible {
         outline: none;
       }
+
       .map-marker {
         display: flex;
         align-items: center;
@@ -44,11 +57,11 @@
 
         svg {
           transition: height .1s linear, width .1s linear;
-          fill: #fff;
+          fill: var(--el-fill-color-blank);
         }
 
         &.map-marker--human {
-          background-color: #233447;
+          background-color: $color-human;
           cursor: pointer;
 
           svg {
@@ -56,34 +69,38 @@
             height: 14px;
           }
         }
+
         &.map-marker--base-station {
-          background-color: #585B5F;
+          background-color: $color-base-station;
 
           svg {
             width: 12px;
             height: 12px;
           }
         }
+
         &.map-marker--hover {
           width: 30px;
           height: 30px;
-          border: 2px solid rgba(255,255,255,1);
+          border: 2px solid $color-white;
           z-index: 2;
 
           &.map-marker--human svg {
             width: 21px;
             height: 21px;
           }
+
           &.map-marker--base-station svg {
             width: 18px;
             height: 18px;
           }
         }
+
         &.map-marker--highlight {
           width: 30px;
           height: 30px;
-          border: 2px solid #fff;
-          background-color: rgb(204,68,68);
+          border: 2px solid $color-white;
+          background-color: $color-highlight;
           z-index: 3;
 
           svg {
@@ -92,6 +109,7 @@
           }
         }
       }
+
       .map-tracking-marker {
         width: 36px;
         height: 36px;
@@ -99,7 +117,7 @@
         align-items: center;
         justify-content: center;
         animation: pulse 2s infinite;
-        background-color: rgba(204,68,68,0.50);
+        background-color: rgba(204, 68, 68, 0.50);
         border-radius: 50%;
 
         .tracking-marker__inner-circle {
@@ -108,7 +126,7 @@
           display: flex;
           align-items: center;
           justify-content: center;
-          background-color: rgba(204,68,68,0.80);
+          background-color: rgba(204, 68, 68, 0.80);
           border-radius: 50%;
 
           svg {
@@ -152,6 +170,7 @@
           .subscriber__body {
             padding: 0 12px;
             margin-top: -10px;
+
             .body__item {
               display: flex;
 
@@ -160,12 +179,13 @@
                 text-align: right;
                 width: 60px;
                 font-size: 12px;
-                color: #353636;
+                color: $text-color-primary;
               }
+
               .item__value {
                 font-size: 12px;
                 font-weight: bold;
-                color: #233447;
+                color: $color-human;
               }
             }
 
@@ -175,14 +195,16 @@
               .item-record__header {
                 font-family: Helvetica;
                 font-size: 16px;
-                color: #353636;
+                color: $text-color-primary;
                 font-weight: 400;
                 height: 38px;
                 line-height: 38px;
               }
+
               .item-record__info {
 
               }
+
               .item-record__timeline {
                 margin-left: 6px;
 
@@ -197,20 +219,24 @@
 
                   .el-timeline-item {
                     padding-bottom: 0;
+
                     .el-timeline-item__tail {
-                      border-left: 2px dotted #cccccc;
+                      border-left: 2px dotted $color-inactive;
                       margin-left: 2px;
                     }
+
                     .el-timeline-item__node--normal {
-                      background-image: radial-gradient(#DE3434 20%, transparent);
-                      outline: #F7F7F7 solid 6px;
+                      background-image: radial-gradient($color-circle 20%, transparent);
+                      outline: var(--cn-bg-color-lighter) solid 6px;
                       margin-left: 2px;
                     }
                   }
+
                   .el-timeline-item:last-child {
                     padding-bottom: 0;
                   }
                 }
+
                 .timeline__info {
                   display: flex;
                   padding-bottom: 10px;
@@ -218,56 +244,63 @@
                   .timeline__info--circle {
                     display: flex;
                     flex-direction: column;
+
                     .info__circle {
                       width: 17px;
                       height: 17px;
                       margin-left: -2px;
                       border-radius: 50%;
-                      background-image: radial-gradient(#DE3434 20%, transparent);
-                      outline: rgba(222,52,52,0.30) solid 4px;
+                      background-image: radial-gradient($color-circle 20%, transparent);
+                      outline: rgba(222, 52, 52, 0.30) solid 4px;
                       margin-top: 2px;
                     }
+
                     .info__line {
-                      border-left: 2px #cccccc dotted;
+                      border-left: 2px $color-inactive dotted;
                       height: 34px;
                       margin-left: 6px;
-                      transition: all 0.2s;
+                      transition: all var(--el-transition-duration-fast);
                     }
                   }
+
                   .timeline__info--item {
                     padding-left: 13px;
                     display: flex;
                     flex-direction: column;
                     font-size: 12px;
-                    color: #666666;
+                    color: $color-regular;
 
                     .info--item__value {
-                      color: #333;
+                      color: $color-text-primary;
                       font-weight: 500;
                       margin-left: 4px;
                     }
                   }
                 }
+
                 .timeline__item {
                   display: flex;
                   flex-direction: column;
                   font-size: 12px;
-                  color: #666666;
+                  color: $color-regular;
 
                   .item__value {
-                    color: #333;
+                    color: $color-text-primary;
                     font-weight: 500;
                     margin-left: 4px;
                   }
                 }
+
                 .item-record__btn, .item-record__btn-disabled {
                   padding-right: 6px;
                   cursor: pointer;
                   text-align: center;
                 }
+
                 .item-record__btn-disabled {
                   cursor: no-drop;
                 }
+
                 .scroll-view {
                   width: 100%;
                   height: 604px;
@@ -282,19 +315,21 @@
                     .item-circle {
                       display: flex;
                       flex-direction: column;
+
                       .circle-circle {
                         width: 10px;
                         height: 10px;
                         margin-left: 2px;
                         border-radius: 50%;
-                        background-color: #DE3434;
+                        background-color: $color-circle;
                       }
+
                       .circle-line {
-                        border-left: 2px #cccccc dotted;
+                        border-left: 2px $color-inactive dotted;
                         height: 34px;
                         margin-left: 6px;
                         margin-top: 6px;
-                        transition: all 0.2s;
+                        transition: all var(--el-transition-duration-fast);
                       }
                     }
 
@@ -302,16 +337,17 @@
                       display: flex;
                       flex-direction: column;
                       font-size: 12px;
-                      color: #666666;
+                      color: $color-regular;
                       padding-left: 16px;
 
                       .item__value {
-                        color: #333;
+                        color: $color-text-primary;
                         font-weight: 500;
                         margin-left: 4px;
                       }
                     }
                   }
+
                   .scroll-list {
                     position: absolute;
                     top: 0;
@@ -329,18 +365,19 @@
 
   .subscriber-map-point-tooltip {
     position: fixed;
-    background-color: white;
+    background-color: $color-white;
     width: 200px;
-    border: 1px solid #C5C5C5;
-    box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+    border: 1px solid var(--el-border-color-light);
+    box-shadow: -1px 1px 10px -1px rgba(205, 205, 205, 0.85);
     border-radius: 2px;
 
     .subscriber-map-point-tooltip__time {
       padding: 10px;
       font-size: 12px;
-      color: #353636;
+      color: $text-color-primary;
       font-weight: bold;
     }
+
     .subscriber-map-point-tooltip__coordinates {
       padding: 0 10px 10px;
 
@@ -350,20 +387,22 @@
         .coordinate__label {
           width: 115px;
           font-size: 12px;
-          color: #575757;
+          color: $color-regular;
         }
+
         .coordinate__value {
           font-size: 12px;
-          color: #353636;
+          color: $text-color-primary;
           font-weight: bold;
         }
       }
     }
   }
+
   .geo-analysis__hexagon-tooltip {
     position: fixed;
-    background-color: rgba(255,255,255,0.80);
-    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.5);
+    background-color: rgba(255, 255, 255, 0.80);
+    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.5);
     border-radius: 2px;
     min-width: 185px;
     z-index: 3;
@@ -372,25 +411,28 @@
     }*/
     &.geo-analysis__hexagon-tooltip--human {
       .icon__box {
-        background-color: #233447;
+        background-color: $color-human;
       }
     }
+
     &.geo-analysis__hexagon-tooltip--base-station {
       .icon__box {
-        background-color: #585B5F;
+        background-color: $color-base-station;
       }
+
       .hexagon-tooltip__body {
         .body__item .item__label {
           width: 140px;
         }
       }
     }
+
     .hexagon-tooltip__header {
       position: relative;
       display: flex;
       flex-direction: column;
       padding: 10px 0 10px 63px;
-      color: white;
+      color: $color-white;
 
       .header__icon {
         position: absolute;
@@ -406,13 +448,16 @@
           border-radius: 50%;
         }
       }
+
       .header__title {
         font-size: 16px;
       }
+
       .header__content {
         font-size: 14px;
       }
     }
+
     .hexagon-tooltip__body {
       padding: 8px 18px;
 
@@ -427,9 +472,10 @@
           width: 8px;
           height: 8px;
           border-radius: 50%;
-          background-color: #DE3434;
+          background-color: $color-circle;
         }
       }
+
       .body__item {
         display: flex;
 
@@ -438,18 +484,20 @@
           text-align: right;
           width: 60px;
           font-size: 12px;
-          color: #353636;
+          color: $text-color-primary;
         }
+
         .item__value {
           font-size: 12px;
           font-weight: bold;
-          color: #233447;
+          color: $color-human;
         }
       }
+
       .body__tracking {
         padding-top: 6px;
         font-size: 12px;
-        color: #38ACD2;
+        color: var(--el-color-business);
         text-decoration: underline;
         cursor: pointer;
       }
diff --git a/src/assets/css/components/views/charts2/entityDetailTabs.scss b/src/assets/css/components/views/charts2/entityDetailTabs.scss
index c09be874..f198a22e 100644
--- a/src/assets/css/components/views/charts2/entityDetailTabs.scss
+++ b/src/assets/css/components/views/charts2/entityDetailTabs.scss
@@ -1,16 +1,16 @@
 .entity-detail-tabs {
   position: relative;
-  $tab-border-color: #E2E5EC;
-  $tab-border-radius: 4px;
+  $tab-border-color: var(--el-border-color-light);
+  $tab-border-radius: var(--el-border-radius-base);
   height: 100%;
 
   .entity-detail-tabs__active-bar {
     position: absolute;
     height: 3px;
     top: 1px;
-    background-color: #046EC9;
-    border-radius: 4px 4px 0 0;
-    transition: all linear .2s;
+    background-color: var(--el-color-primary);
+    border-radius: $tab-border-radius $tab-border-radius 0 0;
+    transition: all linear var(--el-transition-duration-fast);
     z-index: 3;
   }
 
@@ -20,11 +20,11 @@
     box-shadow: none;
 
     & > .el-tabs__header {
-      background-color: #fff;
+      background-color: var(--el-fill-color-blank);
       border-bottom: 1px solid $tab-border-color;
 
       .el-tabs__item {
-        color: #353636;
+        color: var(--el-text-color-primary);
         user-select: none; // 避免鼠标框选文字
 
         i {
@@ -34,19 +34,19 @@
       }
 
       .el-tabs__item:not(.is-disabled):not(.is-active):hover {
-        color: #353636;
+        color: var(--el-text-color-primary);
       }
 
       .el-tabs__item.is-active {
-        color: #046ECA;
-        background-color: #FFFFFF;
+        color: var(--el-color-primary);
+        background-color: var(--el-fill-color-blank);
         border-right-color: $tab-border-color;
         border-left-color: $tab-border-color;
-        border-radius: 4px 4px 0 0;
+        border-radius: $tab-border-radius $tab-border-radius 0 0;
         box-shadow: 0 1px $tab-border-color inset;
 
         &:hover {
-          color: #046ECA;
+          color: var(--el-color-primary);
         }
       }
 
@@ -67,85 +67,95 @@
       height: 100%;
       overflow: auto;
     }
+
     .tab-pane-warn--icon {
       width: 16px;
-      color: #E48F3E;
+      color: var(--el-color-warning);
       margin-left: 10px;
       margin-right: 0 !important;
     }
   }
 
   .entity-detail-event-border {
-    border: 1px solid #E2E5EC;
+    border: 1px solid var(--el-border-color-light);
     border-radius: $tab-border-radius;
     margin-bottom: 10px;
   }
 
   .entity-detail-event-block {
     width: calc(100% - 2px);
+
     .behavior-pattern {
-      height:100% ;
+      height: 100%;
       position: relative;
-      display:flex;
+      display: flex;
       flex-direction: row;
+
       .behavior-pattern-legend {
-        display:flex;
+        display: flex;
         flex-direction: column;
         justify-content: center;
         height: 100%;
-        padding:10px 18px 10px 18px;
-        width:400px;
+        padding: 10px 18px 10px 18px;
+        width: 400px;
+
         .behavior-pattern-legend__item {
-          display:flex;
+          display: flex;
           flex-direction: row;
           font-size: 12px;
-          color: #353636;
+          color: var(--el-text-color-primary);
           line-height: 12px;
-          margin-bottom:11px;
+          margin-bottom: 11px;
+
           .legend-icon {
             width: 8px;
             height: 8px;
             margin: 3px 8px 0 0;
             border-radius: 1px;;
           }
+
           .legend-name {
-            width:180px;
-            font-weight: 400;
+            width: 180px;
           }
-          .legend-value{
+
+          .legend-value {
             display: flex;
             justify-content: left;
-            margin-left:20px;
-            width:90px;
-            font-weight: 500;
+            margin-left: 20px;
+            width: 90px;
           }
+
           .legend-percent {
-            margin-left:20px;
-            width:70px;
+            margin-left: 20px;
+            width: 70px;
             justify-content: left;
             display: flex;
-            font-weight: 500;
           }
         }
       }
-      .behavior-pattern-chart{
+
+      .behavior-pattern-chart {
         height: calc(100% - 50px);
-        width:calc(100% - 400px);
+        width: calc(100% - 400px);
         position: relative
       }
+
       .chart-bottom-dot__left {
         position: absolute;
         height: 0;
         width: 195px;
         border-bottom: 1px dashed #d3d3d3;
-        top: 319px;left: 575px;
+        top: 319px;
+        left: 575px;
       }
+
       .chart-bottom-dot__right {
         position: absolute;
         height: 0;
         width: 195px;
         border-bottom: 1px dashed #d3d3d3;
-        top: 319px;left: 830px;
+        top: 319px;
+        left: 830px;
       }
     }
   }
@@ -156,10 +166,11 @@
   }
 
   .entity-subscriber-detail-error {
-    margin-top: 0px;
-    margin-left: 0px;
+    margin-top: 0;
+    margin-left: 0;
+
     .error-block {
-      margin:0px;
+      margin: 0;
     }
   }
 
@@ -172,4 +183,9 @@
     height: 70px;
     border-radius: $tab-border-radius;
   }
+
+  .el-tag {
+    font-size: 12px !important;
+    border-radius: 20px !important;
+  }
 }
diff --git a/src/assets/css/components/views/charts2/linkBlock.scss b/src/assets/css/components/views/charts2/linkBlock.scss
index 7cd672f2..1b8f9af3 100644
--- a/src/assets/css/components/views/charts2/linkBlock.scss
+++ b/src/assets/css/components/views/charts2/linkBlock.scss
@@ -1,7 +1,4 @@
 .link-blocks {
-  $blue: #046ECA;
-  $grey: #353636;
-
   display: flex;
   justify-content: space-between;
   height: 100%;
@@ -11,14 +8,14 @@
     display: flex;
     position: relative;
     width: calc(50% - 10px);
-    border: 1px solid #E2E5EC;
+    border: 1px solid var(--el-border-color-light);
     border-radius: 4px;
-    background-color: #F7F7F7;
+    background-color: var(--el-fill-color-lighter);
 
     .block-list__title {
       position: absolute;
       font-size: 14px;
-      color: #046ECA;
+      color: var(--el-color-primary);
       top: 16px;
       left: 20px;
     }
@@ -36,7 +33,7 @@
 
         &:hover {
           .block-hex-in {
-            box-shadow: 0 1px 3px 0 #046ECA, 0 1px 3px 0 rgba(0,0,0,0.50);
+            box-shadow: 0 1px 3px 0 var(--el-color-primary);
           }
         }
         .block-hex {
@@ -65,124 +62,23 @@
     }
   }
 }
-/*.link-blocks {
-  $blue: #046ECA;
-  $grey: #353636;
-
-  border: 1px solid #E2E5EC;
-  height: 100%;
-  width: 100%;
-  border-radius: 4px;
-  background-color: #F7F7F7;
-
-  .el-tabs {
-    margin-left: 20px;
-
-    .el-tabs__nav-wrap {
-      padding-top: 5px;
-
-      &::after {
-        height: 1px;
-        background-color: transparent ;
-      }
-    }
-    .el-tabs__nav.is-top {
-      height: 33px;
-
-      .el-tabs__active-bar {
-        background-color: $blue;
-      }
-      .el-tabs__item {
-        padding: 0 10px;
-        height: 33px;
-        color: $grey;
-        font-size: 14px;
-
-        &.el-tabs__item.is-top.is-active {
-          color: $blue;
-        }
-        &:nth-child(2) {
-          padding-left: 0;
-        }
-      }
-    }
-  }
-
-  .block-list {
-    display: flex;
-    flex-wrap: wrap;
-    padding: 8px 14px 0 20px;
-
-    .link-block {
-      height: 30px;
-      width: 30px;
-      border-radius: 2px;
-      margin: 0 6px 6px 0;
-      cursor: pointer;
-
-      &:hover {
-        box-shadow: 0 1px 4px 0 #046eca;
-        border: 1px solid #046eca;
-      }
-    }
-  }
-  .block-heat-legend {
-    display: flex;
-    padding-right: 20px;
-    justify-content: flex-end;
-    padding-top: 10px;
-
-    .legend__box {
-      display: flex;
-      flex-direction: column;
-      flex-basis: 220px;
-
-      .legend__value {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding-bottom: 5px;
-        font-size: 12px;
-        color: #353636;
-      }
-      .legend__color-piece {
-        width: 100%;
-        height: 13px;
-        background-image: linear-gradient(to right, #40537E, #FF005C);
-      }
-      .legend__desc {
-        font-size: 12px;
-        color: #353636;
-        padding-top: 5px;
-      }
-    }
-  }
-}*/
 .link-block__popper {
-  background-color: #1F2B33 !important;
-  border-color: #F7F7F7 !important;
-
-  .el-popper__arrow::before {
-    background-color: #1F2B33 !important;
-    // border-color: #F7F7F7 !important;
-  }
-
   .popper-content {
     .popper-content__link-id {
       padding-bottom: 4px;
       font-size: 14px;
-      color: white;
+      color: var(--el-color-white);
     }
     .popper-content__link-info {
       display: flex;
       font-size: 12px;
 
       .info__label {
-        color: #D8D8D8;
+        color: var(--el-color-info-light-7);
         flex-basis: 110px;
       }
       .info__value {
-        color: white;
+        color: var(--el-color-white);
       }
     }
   }
diff --git a/src/assets/css/components/views/charts2/linkDirectionGrid.scss b/src/assets/css/components/views/charts2/linkDirectionGrid.scss
index e69bfa89..89603e80 100644
--- a/src/assets/css/components/views/charts2/linkDirectionGrid.scss
+++ b/src/assets/css/components/views/charts2/linkDirectionGrid.scss
@@ -1,6 +1,6 @@
 .link-direction-grid {
   display: flex;
-  border: 1px solid #E2E5EC;
+  border: 1px solid var(--el-border-color-light);
   height: 100%;
   width: 100%;
   border-radius: 4px;
@@ -11,7 +11,7 @@
 
     .dimension-title {
       font-size: 14px;
-      color: #046ECA;
+      color: var(--el-color-primary);
     }
     .link-block-error {
       position: absolute;
@@ -21,6 +21,7 @@
     }
     .data-grid {
       height: 100px;
+
       .egress-row {
         padding-left: 190px;
         height: 100%;
@@ -33,7 +34,7 @@
           height: 100%;
           margin-right: 8px;
           transform: rotate(-45deg) translate(-5px,-15px);
-          color: #353636;
+          color: var(--el-text-color-primary);
           font-size: 12px;
         }
       }
@@ -48,7 +49,7 @@
           height: 50px;
           margin-bottom: 10px;
           padding-right: 12px;
-          color: #353636;
+          color: var(--el-text-color-primary);
           font-size: 12px;
         }
         .data-item, .data-item-no-data {
@@ -58,40 +59,39 @@
           height: 50px;
           width: 50px;
           margin: 0 8px 8px 0;
-          border: 1px solid #DEDEDE;
+          border: 1px solid var(--el-color-info-light-7);
           border-radius: 4px;
 
           .data-item__point, .data-item__point-red {
             height: 8px;
             width: 8px;
             border-radius: 50%;
-            background-color: #749F4D;
+            background-color: var(--el-color-success);
 
             &:first-of-type {
               margin-right: 6px;
             }
           }
           .data-item__point-red {
-            background-color: #E26154;
+            background-color: var(--el-color-error);
           }
         }
 
         .data-item-no-data {
-          background: rgb(247, 247, 247);
+          background: var(--el-color-info-light-9);
         }
       }
     }
   }
 }
 
-$blue: #046ECA;
 .item-popover-header {
   display: flex;
   align-items: center;
   padding: 10px 0;
   line-height: 14px;
   font-size: 14px;
-  font-weight: 600;
+  font-weight: bold;
 
   .item-popover-header-icon {
     font-size: 20px;
@@ -103,7 +103,7 @@ $blue: #046ECA;
   .item-popover-block-title {
     line-height: 24px;
     font-size: 13px;
-    color: $blue;
+    color: var(--el-color-primary);
     font-weight: 600;
   }
 
@@ -125,7 +125,7 @@ $blue: #046ECA;
       display: flex;
       min-width: 75px;
       width: 150px;
-      font-weight: 600;
+      font-weight: bold;
     }
   }
 }
@@ -139,14 +139,14 @@ $blue: #046ECA;
     width: 7px;
     height: 7px;
     border-radius: 50%;
-    background: #749F4D;
+    background: var(--el-color-success);
   }
 
   .red-dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
-    background: #E26154;
+    background: var(--el-color-error);
   }
 }
 
@@ -157,7 +157,6 @@ $blue: #046ECA;
 
 .data-item__hover:hover {
   transition: background 0.2s, box-shadow 0.2s;
-  background: #F4F9FD;
-  border: 2px $blue solid !important;
-  box-shadow: 1px 1px 5px #a1a1a1 !important;
+  background: var(--el-fill-color-light);
+  border: 1px var(--el-color-primary) solid !important;
 }
diff --git a/src/assets/css/components/views/charts2/linkTrafficLine.scss b/src/assets/css/components/views/charts2/linkTrafficLine.scss
index 5989b1e9..8e650fc5 100644
--- a/src/assets/css/components/views/charts2/linkTrafficLine.scss
+++ b/src/assets/css/components/views/charts2/linkTrafficLine.scss
@@ -2,10 +2,12 @@
   height: 100%;
   width: 100%;
   display: flex;
-  border: 1px solid #E2E5EC;
+  border: 1px solid var(--el-border-color-light);
+
   .line.network.link-traffic {
     border: none;
     flex: 6.5;
+
     .line-select-metric {
       margin-right: 20px;
     }
@@ -16,7 +18,8 @@
     flex: 1;
     position: relative;
     padding: 20px 20px 0 20px;
-    border-right: 1px solid #E2E5EC;
+    border-right: 1px solid var(--el-border-color-light);
+
     .link-traffic-list-center:nth-of-type(1) {
       margin-top: 0;
     }
@@ -24,16 +27,16 @@
       display: flex;
       flex-direction: column;
       margin-top: 5px;
+
       .link-traffic-list-center-label {
         margin-bottom: 2px;
         font-size: 12px;
-        color: #717171;
-        font-weight: 400;
+        color: var(--el-text-color-regular);
       }
       .link-traffic-list-center-value {
         font-size: 14px;
-        color: #046ECA;
-        font-weight: 600;
+        color: var(--el-color-primary);
+        font-weight: bold;
       }
     }
   }
diff --git a/src/assets/css/components/views/charts2/linkTrafficSankey.scss b/src/assets/css/components/views/charts2/linkTrafficSankey.scss
index e9f5babe..7b3b43f7 100644
--- a/src/assets/css/components/views/charts2/linkTrafficSankey.scss
+++ b/src/assets/css/components/views/charts2/linkTrafficSankey.scss
@@ -1,8 +1,5 @@
 .link-traffic-sankey {
-  $blue: #046ECA;
-  $grey: #353636;
-
-  border: 1px solid #E2E5EC;
+  border: 1px solid var(--el-border-color-light);
   height: 100%;
   width: 100%;
   border-radius: 4px;
@@ -10,10 +7,9 @@
 
   .sankey__label {
     position: absolute;
-    color: #333;
+    color: var(--el-text-color-primary);
     bottom: 50px;
     font-size: 12px;
-    font-weight: 500;
     transform: translateX(-50%);
   }
   .el-tabs {
@@ -32,16 +28,16 @@
       margin-left: 20px;
 
       .el-tabs__active-bar {
-        background-color: $blue;
+        background-color: var(--el-color-primary);
       }
       .el-tabs__item {
         padding: 0 10px;
         height: 33px;
-        color: $grey;
+        color: var(--el-text-color-primary);
         font-size: 14px;
 
         &.el-tabs__item.is-top.is-active {
-          color: $blue;
+          color: var(--el-color-primary);
         }
         &:nth-child(2) {
           padding-left: 0;
@@ -51,40 +47,43 @@
     .el-tabs__content {
       height: calc(100% - 52px);
       width: 100%;
+
       .el-tab-pane {
         height: 100%;
         width: 100%;
+
         .chart-drawing {
           height: 100%;
           width: 100%;
+
           .traffic-sankey {
             width: 100%;
             height: 100%;
             display: flex;
             justify-content: center;
             flex-direction: column;
+
             .traffic-sankey-row-header {
               .traffic-sankey__row-value {
                 font-size: 12px;
-                color: $blue;
-                font-weight: 500;
+                color: var(--el-color-primary);
               }
             }
             .traffic-sankey-row-body {
               display: flex;
+
               .traffic-sankey__tooltip-right {
                 .traffic-sankey__row-value {
                   font-size: 12px;
-                  color: #353636;
-                  font-weight: 600;
+                  color: var(--el-text-color-primary);
+                  font-weight: bold;
                 }
               }
               .traffic-sankey__tooltip-left {
                 .traffic-sankey__row-label {
                   margin-right: 20px;
                   font-size: 12px;
-                  color: #575757;
-                  font-weight: 400;
+                  color: var(--el-text-color-regular);
                 }
               }
             }
diff --git a/src/assets/css/components/views/charts2/networkOverviewApps.scss b/src/assets/css/components/views/charts2/networkOverviewApps.scss
index a49039cc..37a942bf 100644
--- a/src/assets/css/components/views/charts2/networkOverviewApps.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewApps.scss
@@ -3,54 +3,14 @@
 
   .network-overview-apps-header {
     display: flex;
-    //justify-content: space-between;
 
     .network-overview-apps-title {
       font-size: 14px;
-      color: $--text-color-1;
-      font-weight: 600;
+      color: var(--el-text-color-primary);
+      font-weight: bold;
       display: flex;
       align-items: flex-end;
     }
-
-    .line-select-metric {
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-
-      &>span {
-        font-size: 12px;
-        color: $--text-color-2;
-        font-weight: 400;
-        margin-right: 3px;
-      }
-      .line-select__operation {
-        height: 24px;
-        margin-left: 3px;
-        box-shadow: none;
-        border-radius: 2px;
-        .el-input__inner {
-          width: 100px;
-          height: 24px;
-          padding-left: 4px;
-          line-height: 24px;
-          font-size: 12px;
-          color: #2C72C6;
-          font-weight: 400;
-        }
-        .el-input__suffix {
-          display: flex;
-          .el-input__suffix-inner {
-            line-height: 24px;
-            .el-select__caret {
-              line-height: 24px;
-              width: 16px;
-              color: $--text-color-2;
-            }
-          }
-        }
-      }
-    }
   }
 
   .app-cards {
@@ -62,26 +22,26 @@
     padding-top: 10px;
 
     .app-card {
-      border: 1px solid $--border-color;
+      border: 1px solid var(--el-border-color-light);
       border-radius: 4px;
       display: flex;
       height: 100px;
       flex-direction: column;
 
       &.app-card--create {
-        background-color: $--block-bg-color-1;
+        background-color: var(--el-bg-color-page);
         justify-content: center;
         align-items: center;
 
         .cn-icon {
           padding-bottom: 2px;
           font-size: 17px;
-          color: #38ACD2;
+          color: var(--el-color-business);
           cursor: pointer;
         }
         span {
           font-size: 12px;
-          color: $--text-color-1;
+          color: var(--el-text-color-primary);
           cursor: pointer;
         }
       }
@@ -90,58 +50,33 @@
         padding: 0 12px;
         margin-top: 6px;
         justify-content: space-between;
+
         .app-card-title-name {
           span {
             font-size: 16px;
-            color: #046ECA;
+            color: var(--el-color-primary);
             cursor: pointer;
           }
           i {
-            color: #38ACD2;
+            color: var(--el-color-business);
             font-size: 16px;
             padding-right: 4px;
           }
         }
         .app-card-title-more {
-          position: relative;
-          .app-card-title-more-delete {
-            z-index: 1;
-            font-family: Helvetica-Bold;
-            position: absolute;
-            min-width: 96px;
-            line-height: 32px;
-            height: 32px;
-            top: 14px;
-            left: -68px;
-            background: #FFFFFF;
-            border: 1px solid #C5C5C5;
-            box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
-            border-radius: 2px;
-            font-size: 12px;
-            padding-left: 6.8px;
-            color: $--text-color-1;
-            font-weight: 400;
-            i {
-              margin-right: 5.67px;
-              font-size: 12px;
-              color: $--text-color-2;
-            }
-          }
-          .app-card-title-more-delete:hover {
-            background: #EBF1F4;
-            border: 1px solid rgba(0,0,0,0.15);
-          }
-          .app-card-title-more-delete:active {
-            background: #E0E7EA;
-            border: 1px solid rgba(0,0,0,0.15);
+          cursor: pointer;
+
+          span {
+            color: var(--el-text-color-regular);
           }
         }
       }
-      .app-card__bodys {
+      .app-card__bodies {
         display: flex;
         margin-top: 4px;
         flex: 1;
       }
+
       .app-card__body {
         flex: 1;
         padding-left: 12px;
@@ -151,11 +86,13 @@
       .app-card__body-content {
         display: flex;
         margin-bottom: 0;
+
         .app-card__body-content-value {
           display: flex;
+
           .app-card__body-content-number {
             font-size: 14px;
-            color: $--text-color-1;
+            color: var(--el-text-color-primary);
             font-weight: 700;
             margin-right: 6px;
           }
@@ -171,30 +108,30 @@
           justify-content: center;
           position: relative;
           top: 50%;
-          color: $--text-color-3;
+          color: var(--el-text-color-regular);
           margin-top: -10px;
           background-color: rgba(113, 113, 113, 0.12);
         }
         .app-card__body-content-percent.red {
           color: #fff;
-          background-color: rgb(226, 97, 84);
+          background-color: var(--el-color-error);
         }
         .app-card__body-content-percent.green {
           color: #fff;
-          background-color: rgb(126, 159, 84);
+          background-color: var(--el-color-success);
         }
       }
       .app-card__body-unit {
         margin-top: -2px;
         margin-bottom: 2px;
         font-size: 12px;
-        color: $--text-color-3;
+        color: var(--el-text-color-regular);
       }
       .app-card__body-previous {
         display: flex;
         font-size: 12px;
-        color: $--text-color-1;
-        font-weight: 400;
+        color: var(--el-text-color-primary);
+
         div:nth-of-type(1) {
           margin-right: 5px;
         }
@@ -220,18 +157,19 @@
         display: flex;
         justify-content: space-between;
         height: 46px;
-        background-color: $--select-bg-color-1;
+        background-color: var(--el-bg-color);
 
         .header__title {
           padding-left: 20px;
           font-size: 16px;
           font-weight: bold;
           line-height: 46px;
-          color: $--text-color-1;
+          color: var(--el-text-color-primary);
         }
         .header__operations {
           display: flex;
           align-items: center;
+
           .no-records {
             background: #21B4ED;
             color: #FFFFFF !important;
@@ -239,23 +177,10 @@
             cursor: not-allowed !important;
           }
           .header__operation {
-            width: 80px;
+            min-width: 72px;
             height: 30px;
             margin-right: 20px;
-            line-height: 30px;
-            border-radius: 4px;
             text-align: center;
-            cursor: pointer;
-
-            &.header__operation--cancel {
-              border: 1px solid rgba(0,0,0,0.15);
-              color: #333;
-            }
-            &.header__operation--save {
-              background-color: #38ACD2;
-              color: white;
-            }
-
           }
         }
       }
@@ -264,7 +189,8 @@
         flex-direction: column;
         position: relative;
         flex: 1;
-        background-color: #EBF1F4;
+        background-color: var(--cn-bg-color-light);
+
         .body__loading {
           width: 100%;
           flex: 1;
@@ -274,18 +200,18 @@
           display: inline-block;
         }
         .el-tabs__item:hover {
-          color: #046eca;
+          color: var(--el-color-primary);
         }
         .el-tabs__item.is-top {
           height: 50px;
           line-height: 60px;
 
           &.is-active {
-            color: #046eca;
+            color: var(--el-color-primary);
           }
         }
         .el-tabs__active-bar {
-          background-color: #306DC2;
+          background-color: var(--el-color-primary);
         }
         .el-tabs__item.is-top:nth-child(2) {
           padding: 0;
@@ -295,32 +221,27 @@
           right: 28px;
           top: 11px;
           width: 280px;
+
           .el-input__wrapper {
             border-radius: 14px;
             font-size: 12px;
+
             .el-input.el-input--small {
               .el-input__inner {
                 font-size: 12px !important;
-                //background: #FFFFFF;
-                //border: 1px solid #DEDEDE;
-                //box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
-                //border-radius: 14px;
               }
             }
             .el-input__prefix-inner {
               i {
-                color: $--text-color-2;
+                color: var(--el-text-color-regular);
                 font-size: 16px;
-                font-weight: 600;
+                font-weight: bold;
                 margin-left: -2px;
                 margin-right: 6px
               }
             }
           }
         }
-        /*.el-tabs__nav-wrap::after {
-          height: 0;
-        }*/
         .el-tabs__header {
           padding-left: 20px;
         }
@@ -345,41 +266,43 @@
             background-color: #a0a0a0;
             border-radius: 5px;
           }
-          .body__app.app-show,
-          .body__app.provide-show {
-            background: #FFFFFF;
-            border: 1px solid #C5C5C5;
-            box-shadow: 0 2px 4px 0 rgba(51,51,51,0.10);
+          .body__app.app-show, .body__app.provide-show {
+            background-color: var(--el-fill-color-blank);
+            border: 1px solid var(--el-color-primary-light-5);
             border-radius: 4px;
+
             .body__app-content .body__app-left .body__app-left-title {
-              color: #046ECA;
+              color: var(--el-color-primary);
             }
           }
           .body__app {
             height: 120px;
-            background: #FFFFFF;
-            border: 1px solid #E2E5EC;
+            background-color: var(--el-fill-color-blank);
+            border: 1px solid var(--el-border-color-light);
             border-radius: 4px;
             padding: 18px 16px;
             cursor: pointer;
             display: flex;
             flex-direction: column;
+
             .body__app-content {
               display: flex;
               justify-content: space-between;
+
               .body__app-left {
                 display: flex;
+
                 .body__app-left-title {
                   font-family: Helvetica-Bold;
                   font-size: 16px;
-                  color: $--text-color-1;
-                  font-weight: 700;
+                  color: var(--el-text-color-primary);
+                  font-weight: bold;
                   margin-bottom: 6px;
                 }
 
                 span {
                   i {
-                    color: #38ACD2;
+                    color: var(--el-color-business);
                     margin-right: 2px;
                     font-size: 16px;
                   }
@@ -388,7 +311,7 @@
               .body__app-content-right {
                 span {
                   i {
-                    color: #046ECA;
+                    color: var(--el-color-primary);
                     margin-right: 2px;
                     font-size: 16px;
                   }
@@ -397,9 +320,8 @@
             }
             .body__app-value {
               font-size: 12px;
-              color: $--text-color-3;
+              color: var(--el-text-color-regular);
               line-height: 18px;
-              font-weight: 400;
               max-height: 54px;
               overflow: hidden; //超出的文本隐藏
               text-overflow: ellipsis; //溢出用省略号显示
diff --git a/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss b/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss
index 14bcf362..bf2551f1 100644
--- a/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss
@@ -1,19 +1,21 @@
 .ddos-detection {
   height: 100%;
-  border: 1px solid $--border-color;
+  border: 1px solid var(--el-border-color-light);
   border-radius: 4px;
-  background: rgba(113,113,113,0.06);
+  background-color: var(--cn-bg-color-lighter);
+
   .ddos-detection-title {
     font-size: 14px;
-    color: $--text-color-1;
-    font-weight: 600;
+    color: var(--el-text-color-primary);
+    font-weight: bold;
     margin-top: 15px;
+
     i {
       font-size: 16px;
       width: 16px;
       height: 16px;
-      color: #38ACD2;
-      margin:0 8px 0 10px;
+      color: var(--el-color-business);
+      margin: 0 8px 0 10px;
     }
   }
   .ddos-detection-value {
@@ -21,6 +23,7 @@
     padding: 0 20px;
     display: flex;
     flex-direction: column;
+
     .panel-chart__no-data {
       height: calc(100% - 46px);
     }
@@ -29,24 +32,25 @@
       justify-content: space-between;
       height: calc(100% - 65px);
       margin-top: 20px;
+
       .ddos-detection-type-value {
         display: flex;
         flex-direction: column;
+
         .ddos-detection-type-value-name {
           font-size: 12px;
-          color: $--text-color-2;
+          color: var(--el-text-color-regular);
           line-height: 12px;
-          font-weight: 400;
           margin-bottom: 12px;
         }
         .ddos-detection-type-value-number.ddos-event {
-          color: #E48F3E;
+          color: var(--el-color-warning);
         }
         .ddos-detection-type-value-number {
           font-size: 18px;
-          color: #E26154;
+          color: var(--el-color-danger);
           line-height: 12px;
-          font-weight: 700;
+          font-weight: bold;
         }
       }
     }
@@ -55,24 +59,24 @@
       width: 117px;
       height: 29.6px;
       min-height: 28px;
-      background: $--button-color-1;
-      border: 1px solid $--border-color-1;
-      box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+      background-color: var(--el-fill-color-blank);
+      border: 1px solid var(--el-border-color-darker);
       border-radius: 4px;
       padding: 8px 5px;
+      transition: all var(--el-transition-duration-fast);
+
       span {
         font-size: 12px;
-        color: $--text-color-2;
-        font-weight: 500;
+        color: var(--el-text-color-regular);
+
         i {
-          //transform: rotate(-90deg);
-          color: $--text-color-2;
+          color: var(--el-text-color-regular);
           font-size: 12px;
           margin-left: 4px;
         }
       }
       &:hover {
-        background: $--button-bg-color-1 !important;
+        background: var(--el-fill-color) !important;
       }
     }
   }
diff --git a/src/assets/css/components/views/charts2/networkOverviewLine.scss b/src/assets/css/components/views/charts2/networkOverviewLine.scss
index e7c736cf..0f6a94ff 100644
--- a/src/assets/css/components/views/charts2/networkOverviewLine.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewLine.scss
@@ -2,24 +2,29 @@
   height: 100%;
   width: 100%;
   position: relative;
-  border: 1px solid $--border-color;
+  border: 1px solid var(--el-border-color-light);
   border-radius: 4px;
+
   .chart-drawing {
     height: 100%;
     width: 100%;
+
     .echarts-tooltip.echarts-tooltip-dark {
+
       .cn-chart-body {
         display: flex;
+
         .cn-chart-tooltip {
           display: flex;
           flex-direction: column;
           flex: 1;
+
           .cn-chart-tooltip-box {
             margin-right: 10px;
           }
           .cn-chart-tooltip-value.cn-chart-tooltip__color {
             font-size: 12px;
-            color: #353636;
+            color: var(--el-text-color-primary);
             line-height: 21px;
             font-weight: 600;
           }
@@ -31,25 +36,14 @@
     display: flex;
     justify-content: space-between;
     height: 73px;
+
     .line-select.line-header-right {
       display: flex;
-      //flex: 1;
-      .line-select__operation {
-        .el-select__wrapper {
-          height: 24px !important;
-          min-height: 24px !important;
-        }
-        .el-input__inner {
-          width: 100px;
-        }
-      }
+
       .line-select-reference-line {
         margin-right: 20px;
+
         .line-select__operation {
-          .el-select__wrapper {
-            height: 24px !important;
-            min-height: 24px !important;
-          }
           .el-input__inner {
             width: 127px;
           }
@@ -61,47 +55,22 @@
       .line-select-metric,.line-select-reference-line {
         display: flex;
         align-items: center;
+
         .line-select__operation {
           min-width: 127px;
-          height: 24px;
           margin-left: 3px;
           box-shadow: none;
           border-radius: 2px;
+
           .el-select__wrapper {
             min-height: 24px !important;
-            //padding-left: 4px;
-            line-height: 24px !important;
-            height: 24px;
             font-size: 12px;
-            color: $--text-color-6;
+            color: var(--el-color-primary);
             font-weight: 400;
             padding: 5px 6px 4px 5px !important;
+
             .el-select__placeholder {
-              color: $--text-color-6;
-            }
-            .el-select__suffix {
-              .el-icon {
-                color: #575757;
-              }
-            }
-            //.el-input__inner {
-            //  padding-left: 4px;
-            //  line-height: 24px;
-            //  height: 24px;
-            //  font-size: 12px;
-            //  color: #2C72C6;
-            //  font-weight: 400;
-            //}
-          }
-          .el-input__suffix {
-            display: flex;
-            .el-input__suffix-inner {
-              line-height: 24px;
-              .el-select__caret {
-                line-height: 24px;
-                width: 16px;
-                color: #575757;
-              }
+              color: var(--el-color-primary);
             }
           }
         }
@@ -116,47 +85,51 @@
         position: absolute;
         height: 3px;
         border-radius: 4px 0 0 0;
-        background: #046ECA;
+        background: var(--el-color-primary);
         top: 0;
         z-index: 1;
         transition: all linear .2s;
       }
       .line-value {
-        //position: absolute;
-        //top: 0;
-        //left: 0;
         display: flex;
+
         .line-value-tabs.mousemove-cursor {
-          border-top: 4px solid #D3D0D8;
+          border-top: 4px solid var(--el-border-color-dark);
           z-index: 0;
         }
         .line-value-tabs {
           cursor: pointer;
           padding: 16px 0 0 20px;
           border-top: 4px solid transparent;
+
           .line-value-unit {
             .line-value-unit-number {
               font-family: Helvetica-Bold;
               font-size: 28px;
-              color: $--text-color-1;
+              color: var(--el-text-color-primary);
               margin-right: 4px;
             }
             .line-value-unit-number2 {
               font-size: 0;
               span {
                 font-size: 12px;
-                color: $--text-color-2;
-                font-weight: 400;
+                color: var(--el-text-color-regular);
               }
             }
           }
           .line-value-tabs-name {
             position: relative;
             display: flex;
+
             .tabs-name {
               flex: 1;
               padding-left: 19px;
             }
+
+            .tabs-name1 {
+              padding-left: 0;
+            }
+
             .total,.inbound,.outbound,.internal,.through,.other,.ingress,.egress {
               width: 14px;
               height: 14px;
diff --git a/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss b/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss
index 1a68dcb7..c0eef831 100644
--- a/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss
@@ -1,30 +1,33 @@
 .performance-event {
   height: 100%;
-  border: 1px solid $--border-color;
+  border: 1px solid var(--el-border-color-light);
   border-radius: 4px;
-  background: rgba(113,113,113,0.06);
+  background-color: var(--cn-bg-color-lighter);
+
   .performance-event-title {
     margin-top: 15px;
     font-size: 14px;
-    color: $--text-color-1;
-    font-weight: 600;
+    color: var(--el-text-color-primary);
+    font-weight: bold;
     line-height: 1;
+
     i {
       font-size: 16px;
       width: 16px;
       height: 16px;
-      color: #38ACD2;
-      margin:0 8px 0 10px;
+      color: var(--el-color-business);
+      margin: 0 8px 0 10px;
     }
   }
   .performance-event-value {
     width: 100%;
     height: calc(100% - 81px);
+
     .performance-event-pie-hr {
       height: 1px;
       width: calc(100% - 40px);
       margin: auto;
-      background: $--border-color;
+      background: var(--el-border-color-light);
     }
     .performance-event-pie {
       position: relative;
@@ -43,25 +46,25 @@
   .el-button {
     width: 117px;
     min-height: 28px;
-    background: $--button-color-1;
-    border: 1px solid $--border-color-1;
-    box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+    background-color: var(--el-fill-color-blank);
+    border: 1px solid var(--el-border-color-darker);
     border-radius: 4px;
     padding: 8px 5px;
     margin-left: 30px;
+    transition: all var(--el-transition-duration-fast);
+
     span {
       font-size: 12px;
-      color: $--text-color-2;
-      font-weight: 500;
+      color: var(--el-text-color-regular);
+
       i {
-        //transform: rotate(-90deg);
-        color: $--text-color-2;
+        color: var(--el-text-color-regular);
         font-size: 12px;
         margin-left: 4px;
       }
     }
     &:hover {
-      background: $--button-bg-color-1 !important;
+      background: var(--el-fill-color) !important;
     }
   }
 }
diff --git a/src/assets/css/components/views/charts2/networkOverviewTabs.scss b/src/assets/css/components/views/charts2/networkOverviewTabs.scss
index 68a9942f..838ec6ac 100644
--- a/src/assets/css/components/views/charts2/networkOverviewTabs.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewTabs.scss
@@ -1,36 +1,39 @@
 .tabs {
-  $blue: #046ECA;
-  $grey: #353636;
-  height:calc(100% - 64px);
-  font-size:12px;
-  .tab-hide{
-    margin-top:42px;
+  height: calc(100% - 64px);
+  font-size: 12px;
+
+  .tab-hide {
+    margin-top: 42px;
   }
   .cn-chart__tabs {
-    height:100%;
+    height: 100%;
+
     .tab-pane {
       height:100%;
+
       .title-search {
-        display:flex;
-        flex-direction:row;
+        display: flex;
+        flex-direction: row;
         align-items: center;
         justify-content: flex-start;
-        width:100%;
-        height:36px;
+        width: 100%;
+        height: 36px;
+
         .title-search__span {
-          margin-right:6px;
+          margin-right: 6px;
         }
         .tab-search-input {
-          width:100%;
+          width: 100%;
+
           .el-input__prefix {
             i {
-              font-size:12px !important;
-              color:#575757;
+              font-size: 12px !important;
+              color: var(--el-text-color-regular);
             }
           }
           .el-input__suffix {
             i {
-              font-size:12px !important;
+              font-size: 12px !important;
             }
           }
         }
@@ -38,49 +41,94 @@
           align-items: center;
           height: 24px;
           justify-content: center;
-          line-height: 24px;
-          //padding: 0px 7px;
+          line-height: 27px; // 使搜索图标与header文本齐平
           span {
             margin-right: 7px;
           }
         }
         &:hover {
-          cursor:pointer;
+          cursor: pointer;
         }
       }
       .title-unit {
         display:flex;
         flex-direction:column;
         align-items: flex-start;
-        color: $--text-color-3;
-        font-weight: 400;
+        color: var(--el-text-color-regular);
+
         .data-column__span {
           font-weight: bold;
-          color: $--text-color-1;
+          color: var(--el-text-color-primary);
         }
         .unit__span {
-          color: #778391;
-          font-weight: 400;
+          color: var(--el-text-color-regular);
         }
       }
       .column-loading {
         display: flex;
         flex-direction: row;
         position:relative;
+
         .loading-icon {
-          position:absolute;
+          position: absolute;
           left: -20px;
           transform: translateZ(0) scale(0.5);
-          width:20px;
-          height:20px;
-          margin-right:3px;
+          width: 20px;
+          height: 20px;
+          margin-right: 3px;
         }
       }
       .tab-table {
-        border: 1px solid #E2E5EC;
+        border: 1px solid var(--el-border-color-light);
+        border-bottom: none;
         border-radius: 4px 4px 0 0;
         padding: 1px;
 
+        .data-click:hover{
+          cursor: pointer;
+        }
+        .el-table__inner-wrapper {
+          width: calc(100% + 2px); // 防止横向出现滚动条
+        }
+      }
+      .dns-in-ex {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        justify-content: center;
+
+        .dns-percent-pic {
+          display: flex !important;
+          width: 100px;
+          height: 26px;
+          justify-content: center;
+          align-items: center;
+
+          .div-yellow {
+            height: 12px;
+            background: var(--el-color-warning);
+            border-left: none;
+          }
+          .div-green {
+            height: 12px;
+            background: var(--el-color-success);
+            border-right: none;
+          }
+        }
+        .dns-percent{
+          display: flex;
+          align-items: center;
+          height: 100%;
+          min-width: 90px;
+          padding-left: 10px;
+          justify-content: left;
+        }
+      }
+      .tab-table__average {
+        border: 1px solid var(--el-border-color-light);
+        border-bottom: none;
+        border-radius: 4px 4px 0 0;
+
         .data-click:hover{
           cursor: pointer;
         }
@@ -88,77 +136,28 @@
           width: calc(100% + 2px);
         }
         .el-table__header {
-          width:100% !important;
+          width: 100% !important;
         }
         .el-table__body {
-          width:100% !important;
-        }
-      }
-      .dns-in-ex {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        justify-content: center;
-        .dns-percent-pic {
-          display: flex !important;
-          width: 100px;
-          height: 26px;
-          justify-content: center;
-          align-items: center;
-          .div-yellow {
-            height: 12px;
-            background: #e5a219;
-            border-left: none;
-          }
-          .div-green {
-            height: 12px;
-            background: #749f4d;
-            border-right: none;
-          }
-        }
-        .dns-percent{
-          display:flex;
-          align-items:center;
-          height:100%;
-          min-width:90px;
-          padding-left:10px;
-          justify-content: left;
-        }
-      }
-      .tab-table__average {
-        border: 1px solid $--border-color;
-        border-bottom: none;
-        border-radius: 4px 4px 0 0;
-        //padding: 1px;
-        .data-click:hover{
-          cursor: pointer;
-        }
-        .el-table__inner-wrapper {
-          width: calc(100% + 2px);
-        }
-        .el-table__header {
-          width:100% !important;
-        }
-        .el-table__body {
-          height:100%;
+          height: 100%;
           width:100% !important;
         }
       }
       .tab-table__no-bottom {
         border-radius: 4px !important;
       }
-      .data-total{
+      .data-total {
         display: flex !important;
-        justify-content:center;
+        justify-content: center;
       }
-      .data-value{
+      .data-value {
         display: flex !important;
-        justify-content:right;
-        width:50%;
+        justify-content: right;
+        width: 50%;
       }
-      .data-trend{
+      .data-trend {
         display: flex;
-        width:50%;
+        width: 50%;
       }
       .data-total-trend {
         display: flex;
@@ -167,48 +166,47 @@
         align-items: center;
         margin-top: 2px;
         border-radius: 10px;
-        font-weight:500;
-        padding:0px 9px;
+        padding: 0 9px;
+
         span {
           width: max-content;
         }
       }
       .data-total-trend-black {
-        background-color: rgba(113,113,113,0.12);
-        color: #717171;
+        background-color: var(--el-fill-color-dark);
+        color: var(--el-text-color-regular);
         height: 20px;
       }
       .data-total-trend-green {
-        background-color: rgba(126,159,84,0.12);
+        background-color: rgba(var(--el-color-success-rgb),0.12);
         height: 20px;
-        color:#7E9F54;
+        color: var(--el-color-success);
       }
       .data-total-trend-red {
-        background-color: rgba(226,97,84,0.12);
+        background-color: rgba(var(--el-color-danger-rgb),0.12);
         height: 20px;
-        color:#E26154;
+        color: var(--el-color-danger);
+
         .cn-icon-rise1{
-          color: #E44D3E;
+          color: var(--el-color-danger);
         }
       }
-      .el-table--group::after,.el-table--border::after, .el-table::before {
-        height: 0px;
-      }
       .el-table thead {
-        color: $--text-color-1;
+        color: var(--el-text-color-primary);
       }
       .el-table__empty-text{
-        line-height:20px !important;
+        line-height: 20px !important;
       }
       .el-table__header th .cell {
-        display:flex;
-        flex-direction:row;
+        display: flex;
+        flex-direction: row;
         justify-content: center;
         align-items: flex-start;
-        line-height:18px;
+        line-height: 18px;
         padding: 1px 10px 0 11px !important;
+
         .caret-wrapper {
-          margin-top:3px;
+          margin-top: 3px;
         }
       }
       .el-table__header tr th:nth-of-type(1) .cell {
@@ -217,33 +215,29 @@
       .score-cell {
         display: flex !important;
         justify-content: center;
+
         .data-score {
           border-radius: 10px;
           font-size: 12px;
-          color: #FFFFFF;
-          font-weight: 500;
+          color: var(--el-color-white);
           height: 20px;
           width: 34px;
           line-height: 20px;
           text-align: center;
         }
         .data-score-red {
-          background: #E26154;
+          background: var(--el-color-danger);
         }
         .data-score-yellow {
-          background: #E5A219;
+          background: var(--el-color-warning);
         }
         .data-score-green {
-          background: #749F4D;
+          background: var(--el-color-success);
         }
       }
       .el-table__border-left-patch {
         width: 0;
       }
-      .el-table__inner-wrapper::after, .el-table__inner-wrapper::before {
-        width: 0;
-        height: 0;
-      }
     }
     .el-tabs__header {
       margin-bottom: 10px;
@@ -257,16 +251,16 @@
       height: 33px;
 
       .el-tabs__active-bar {
-        background-color: $blue;
+        background-color: var(--el-color-primary);
       }
       .el-tabs__item {
         padding: 0 10px;
         height: 40px;
-        color: $--text-color-1;
+        color: var(--el-text-color-primary);
         font-size: 14px;
 
         &.el-tabs__item.is-top.is-active {
-          color:$blue;
+          color:var(--el-color-primary);
         }
         &:nth-child(2) {
           padding-left: 0;
@@ -276,7 +270,8 @@
     }
     .el-tabs__content {
       height: calc(100% - 40px);
-      border:none;
+      border: none;
+
       .el-table__body-wrapper {
         height: calc(100% - 45px) !important;
       }
@@ -287,40 +282,44 @@
       height: 100% !important;
     }
     .el-tabs__header {
-      display:none;
+      display: none;
     }
   }
   .tab-search {
-    position:absolute;
-    height:40px;
-    top:0px;
-    display:flex;
+    position: absolute;
+    height: 40px;
+    top: 0;
+    display: flex;
     align-items: center;
-    right:0px;
+    right: 0;
+
     .search-select {
-      color:#575757;
-      margin-right:10px;
+      color: var(--el-text-color-regular);
+      margin-right: 10px;
+
       span {
-        margin-right:3px;
+        margin-right: 3px;
       }
       .option__select.select-column {
-        margin-left:3px;
+        margin-left: 3px;
         border-radius: 2px;
+
         .el-input__inner {
           width: 100px;
-          height:24px;
+          height: 24px;
           padding-left: 4px;
-          color: $blue;
-          font-weight:400;
+          color: var(--el-color-primary);
         }
         .el-input__suffix {
           display: flex;
+
           .el-input__suffix-inner {
             line-height: 24px;
+
             .el-select__caret {
               line-height: 24px;
               width: 16px;
-              color: #575757;
+              color: var(--el-text-color-regular);
             }
           }
         }
@@ -328,27 +327,27 @@
       .option-popper {
         .el-select-dropdown__item.selected {
           span{
-            color: $blue !important;
+            color: var(--el-color-primary) !important;
           }
         }
       }
     }
     .search-customize-tab {
-      color:$blue;
-      height:24px;
-      padding:2px 11px;
+      color: var(--el-color-primary);
+      height: 24px;
+      padding: 2px 11px;
+
       .icon-gear{
-        color:#2C72C6;
-        width:12px;
-        height:12px;
-        margin-right:2px;
+        color: var(--el-color-primary);
+        width: 12px;
+        height: 12px;
+        margin-right: 2px;
         font-size: 12px;
       }
     }
     .search-customize-tab:hover,.search-customize-tab__active {
-      cursor:pointer;
-      background: rgba(56,172,210,0.10);
-      box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+      cursor: pointer;
+      background: var(--el-color-primary-light-9);
       border-radius: 2px;
     }
     .grid-content{
@@ -357,23 +356,19 @@
   }
 }
 .customize-tab__popper{
-  max-height:405px;/*calc(100% - 136px);*/
-  overflow:hidden;
-  padding: 0px !important;
-  background: #FFFFFF;
-  /*border: 1px solid #C5C5C5;*/
-  border:1px solid #C5C5C5 !important;
-  box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important;
+  max-height: 405px;
+  overflow: hidden;
+  padding: 0 !important;
+  background-color: var(--el-fill-color-blank);
   border-radius: 2px !important;
+
   .el-popper {
     max-height: 405px;
   }
   .el-tabs__header{
     font-size: 12px;
-    color:green !important;
-    font-weight: 500;
-    margin: 0px ;
-    border-bottom: 1px solid #E2E5EC;
+    margin: 0;
+    border-bottom: 1px solid var(--el-border-color-light);
     height: 30px !important;
   }
   .el-tabs__content {
@@ -384,7 +379,7 @@
     width:100%;
   }
   .el-tabs__nav-wrap {
-    margin-bottom: 0px !important;
+    margin-bottom: 0 !important;
   }
   .el-tabs__item{
     width: 50%;
@@ -393,23 +388,22 @@
     height: 30px;
     line-height: 30px;
     font-size: 12px;
-    color: #353636;
-    font-weight: 500;
+    color: var(--el-text-color-primary);
   }
   .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
-    border-top: 3px solid #38ACD2;
+    border-top: 3px solid var(--el-color-business);
   }
   .el-tabs--card > .el-tabs__header .el-tabs__item:first-child{
     border-radius: 2.5px 0 0 0;
   }
   .el-tabs--card > .el-tabs__header .el-tabs__item:last-child{
     border-radius: 0 2.5px 0 0 ;
-    border-left: 1px #E2E5EC solid !important;
+    border-left: 1px var(--el-border-color-light) solid !important;
   }
   .el-tabs--card > .el-tabs__header .el-tabs__item{
     border-bottom: 0;
-    border-top: 3px solid white;
-    color: #353636;
+    border-top: 3px solid var(--el-fill-color-blank);
+    color: var(--el-text-color-primary);
   }
   .el-tabs--card > .el-tabs__header .el-tabs__nav {
     border: 0;
@@ -419,90 +413,86 @@
   display:flex;
   justify-content: flex-start;
   align-items: center;
-  //background: white;
   background: var(--el-bg-color);
   width: 100%;
   height:40px;
-  border:solid 1px $--border-color;
-  //border: 1px solid var(var(--el-border-color-lighter));
-  padding-left:10px !important;
+  border: solid 1px var(--el-border-color-light);
+  padding-left: 10px !important;
   text-align: left;
   border-radius:0 0 4px 4px;
-  color:#046eca;
+  color: var(--el-color-primary);
+
   .fixed-button {
-    display:flex;
+    display: flex;
     justify-content: center;
-    padding:7px 10px;
+    padding: 7px 10px;
     align-items: center;
     height: 30px;
-  }
-  .fixed-button:hover {
-    cursor:pointer;
-    background: #e6f4ff;
-    box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+    cursor: pointer;
     border-radius: 4px;
   }
+  .fixed-button:hover {
+    background: var(--el-color-primary-light-9);
+  }
 }
-.btn-up{
-  margin-top:40px;
+.btn-up {
+  margin-top: 40px;
 }
 .tab-search__popper{
   margin-top: -7px;
-  width:auto !important;
-  max-height:206px;
-  overflow:hidden;
-  padding: 0px !important;
-  background: #FFFFFF;
-  border:1px solid #C5C5C5 !important;
-  box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important;
+  width: auto !important;
+  max-height: 206px;
+  overflow: hidden;
+  padding: 0 !important;
   border-radius: 2px !important;
+
   .search-input{
-    width:100%;
-    padding: 4px 4px 0px 4px;
+    width: 100%;
+    padding: 4px 4px 0 4px;
+
     .el-input__inner{
       border-radius: 2px;
       font-size: 12px;
       letter-spacing: 0;
-      font-weight: 400;
     }
   }
   .el-row {
     width: 100% !important;
   }
   .selected {
-    color: #0091ff;
+    color: var(--el-color-primary);
     font-weight: bold;
   }
   .el-popper {
     max-height: 405px;
   }
   .select-dropdown {
-    max-height:172px;
-    width:100%;
-    margin: 1px 0px;
-    overflow:auto;
+    max-height: 172px;
+    width: 100%;
+    margin: 1px 0;
+    overflow: auto;
     list-style: none;
-    padding:4px 0px;
+    padding: 4px 0;
     box-sizing: border-box;
-    .select-dropdown__item:hover{
-      background-color: #F5F7FA !important;
+
+    .select-dropdown__item:hover {
+      background-color: var(--el-fill-color-light) !important;
     }
     .select-dropdown__item{
-      width:100%;
-      height:30px;
-      padding:0px 11px;
-      line-height:30px;
+      width: 100%;
+      height: 30px;
+      padding: 0 11px;
+      line-height: 30px;
       position: relative;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      color: #666665;
+      color: var(--el-text-color-regular);
       display: list-item;
       text-align: -webkit-match-parent;
       box-sizing: border-box;
       cursor: pointer;
       font-size: 12px;
-      font-weight: 400;
     }
   }
 }
diff --git a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss b/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
index da3f3c5b..a2b39b62 100644
--- a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
+++ b/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
@@ -1,13 +1,14 @@
 .npm-app {
-  $grey:#353636;
   height: 100%;
   width: 100%;
   display: flex;
+
   .npm-app-left {
     position: relative;
     height: 100%;
     display: flex;
     flex: 1;
+
     .npm-app-letter-no-data.npm-app-letter {
       min-width: 500px;
     }
@@ -15,6 +16,7 @@
       display: flex;
       flex-direction: column-reverse;
       justify-content: space-between;
+
       div {
         width: 40px;
         height: 40px;
@@ -22,8 +24,7 @@
         text-align: center;
         margin: 0 5px 12.3px 0;
         font-size: 14px;
-        color: #353636;
-        font-weight: 500;
+        color: var(--el-text-color-primary);
       }
       div:nth-of-type(1) {
         height: 25px;
@@ -32,24 +33,26 @@
     }
     .npm-app-body {
       display: flex;
+
       .npm-app-body-patch {
         display: flex;
         flex-direction: column-reverse;
+
         .npm-app-body-color {
           width: 40px;
           height: 40px;
           margin: 0 36px 12.3px 0;
-          background: #EFEFEF;
+          background: var(--el-fill-color-dark);
           border-radius: 4px;;
         }
         .npm-app-body-color.score-color:nth-child(2),.npm-app-body-color.score-color:nth-child(3) {
-          background: #E26154;
+          background: var(--el-color-error);
         }
         .npm-app-body-color.score-color:nth-child(4),.npm-app-body-color.score-color:nth-child(5) {
-          background: #E5A219;
+          background: var(--el-color-warning);
         }
         .npm-app-body-color.score-color:nth-child(6),.npm-app-body-color.score-color:nth-child(7) {
-          background: #749F4D;
+          background: var(--el-color-success);
         }
         .npm-app-body-icon {
           width: 40px;
@@ -57,6 +60,7 @@
           line-height: 25px;
           text-align: center;
           margin-right: 36px;
+
           span {
             i {
               font-size: 20px;
@@ -67,15 +71,17 @@
     }
   }
   .app-table.el-table {
-    border: 1px solid #E2E5EC;
+    border: 1px solid var(--el-border-color-light);
     border-bottom: none;
+
     .el-table__header-wrapper {
       tr th {
         padding: 5px 0;
+
         .data-column__span {
           font-size: 12px;
-          color: $--text-color-1;
-          font-weight: 600;
+          color: var(--el-text-color-primary);
+          font-weight: bold;
         }
       }
     }
@@ -89,11 +95,13 @@
     }
     .el-table__body-wrapper.is-scrolling-none {
       height: 306px !important;
+
       tr td {
         padding: 13px 0 !important;
       }
       tr td:nth-last-child(-n+3) {
         text-align: center;
+
         .data-total {
           justify-content: center;
         }
@@ -102,25 +110,25 @@
   }
   .data-total {
     display: flex !important;
+
     .data-total-category-icon {
       margin-left: -2px;
+
       i {
         font-size: 16px;
         margin-right: 12px;
-        color:  #717171;
+        color: var(--el-text-color-regular);
       }
     }
     .data-total-category-value {
       font-size: 12px;
-      color: #353636;
-      font-weight: 400;
+      color: var(--el-text-color-primary);
       cursor: pointer;
     }
     .data-score {
       border-radius: 10px;
       font-size: 12px;
-      color: #FFFFFF;
-      font-weight: 500;
+      color: var(--el-color-white);
       height: 20px;
       width: 34px;
       line-height: 20px;
@@ -128,13 +136,13 @@
       margin-left: -2px;
     }
     .data-score.data-score-red {
-      background: #E26154;
+      background: var(--el-color-danger);
     }
     .data-score.data-score-yellow {
-      background: #E5A219;
+      background: var(--el-color-warning);
     }
     .data-score.data-score-green {
-      background: #749F4D;
+      background: var(--el-color-success);
     }
     .data-score-no-data {
       width: 34px;
@@ -147,8 +155,7 @@
     justify-content: right;
     width: 50%;
     font-size: 12px;
-    color: #353636;
-    font-weight: 400;
+    color: var(--el-text-color-primary);
   }
   .data-trend{
     display: flex;
@@ -156,40 +163,38 @@
   }
   .data-total-trend {
     display: flex;
-    justify-content: left;
     margin-left: 6px;
-    font-size: 12px;
     justify-content: center;
     margin-top: 2px;
     border-radius: 10px;
-    font-weight: 500;
     font-size: 12px;
     height: 20px;
     padding: 0 5px;
   }
   .data-total-trend-black {
-    background-color: rgba(113,113,113,0.12);
-    color: #717171;
+    background-color: var(--el-fill-color-dark);
+    color: var(--el-text-color-regular);
     width: 36px;
   }
   .data-total-trend-green {
-    background-color: rgba(126,159,84,0.12);
-    color: #7E9F54;
+    background-color: rgba(var(--el-color-success-rgb),0.12);
+    color: var(--el-color-success);
   }
   .data-total-trend-red {
-    background-color: rgba(226,97,84,0.12);
-    color: #E26154;
+    background-color: rgba(var(--el-color-error-rgb),0.12);
+    color: var(--el-color-error);
+
     .cn-icon-rise1{
-      color: #E44D3E;
+      color: var(--el-color-error);
     }
   }
   .el-table--group::after,.el-table--border::after, .el-table::before {
-    height: 0px;
+    height: 0;
   }
   .el-table thead {
-    color: $grey;
+    color: var(--el-text-color-primary);
   }
 }
 .npm-app-border {
-  border: 1px solid #E2E5EC;
+  border: 1px solid var(--el-border-color-light);
 }
diff --git a/src/assets/css/components/views/charts2/npmAppEventTable.scss b/src/assets/css/components/views/charts2/npmAppEventTable.scss
index cad88d6b..c1adadbf 100644
--- a/src/assets/css/components/views/charts2/npmAppEventTable.scss
+++ b/src/assets/css/components/views/charts2/npmAppEventTable.scss
@@ -1,54 +1,49 @@
 .npm-app-event {
-  $blue:#046ECA;
   height: 100%;
   width: 100%;
   display: flex;
   flex-direction: column;
+
   .metric-select {
-    color:#575757;
+    color: var(--el-text-color-regular);
     display: flex;
     margin-bottom: 10px;
     flex-direction: row-reverse;
     align-items: center;
-    .el-scrollbar {
-      width:100%;
-    }
+
     span {
       font-size: 12px;
-      font-weight: 400;
     }
     .option__select.select-column {
       border-radius: 2px;
+
       .el-input__inner {
         width: 100px;
-        height:24px;
+        height: 24px;
         padding-left: 4px;
         font-size: 12px;
-        color: #2C72C6;
-        font-weight:400;
       }
     }
     .option-popper {
-      margin-bottom:0px;
-      .el-select-dropdown__item.selected {
-        span{
-          color: #2C72C6 !important;
-        }
-      }
+      margin-bottom: 0;
     }
   }
   .npm-app-event-table {
     height: calc(100% - 30px) !important;
-    border: 1px solid #E2E5EC;
+    border: 1px solid var(--el-border-color-light);
     border-radius: 4px;
-    padding: 1px;
+
+    .el-table__inner-wrapper::before {
+      height: 0; // 去掉底部的边框
+    }
     .el-table__header-wrapper {
       tr th {
         padding: 4px 0;
+
         .data-column__span {
           font-size: 12px;
-          color: $--text-color-1;
-          font-weight: 600;
+          color: var(--el-text-color-primary);
+          font-weight: bold;
         }
       }
     }
@@ -65,50 +60,48 @@
     flex-direction: row;
     align-items: center;
     flex-wrap: wrap;
+
     .data-severity {
       font-size: 12px;
-      color: #353636;
-      font-weight: 400;
-      margin-left:6px;
+      color: var(--el-text-color-primary);
+      margin-left: 6px;
     }
     .red-dot {
-      width:6px;
-      height:6px;
-      background: #E26154;
+      width: 6px;
+      height: 6px;
+      background: var(--el-color-error);
       border-radius: 3px;
       margin-right:4px;
     }
     .grey-dot {
       opacity: 0.35;
-      background: #717171;
+      background: var(--el-text-color-regular);
       border-radius: 3px;
-      width:6px;
-      height:6px;
-      margin-right:4px;
+      width: 6px;
+      height: 6px;
+      margin-right: 4px;
     }
     .data-applications {
       font-size: 12px;
-      color: $blue;
-      font-weight: 400;
+      color: var(--el-color-primary);
     }
     .data-eventType {
       padding: 0 6px;
       font-size: 12px;
-      color: $blue;
-      font-weight: 600;
-      background: #EBF1F4;
+      color: var(--el-color-primary);
+      font-weight: bold;
+      background: var(--cn-bg-color-light);
       border-radius: 4px;
       min-width: fit-content;
     }
     .data-eventCount {
       font-size: 12px;
-      color: #046ECA;
-      font-weight: 500;
-      width:200px;
+      color: var(--el-color-primary);
+      width: 200px;
     }
   }
   .el-table--group::after,.el-table--border::after,.el-table::before {
-    height: 0px;
+    height: 0;
   }
   .table-error {
     position: absolute;
diff --git a/src/assets/css/components/views/charts2/npmEventsByType.scss b/src/assets/css/components/views/charts2/npmEventsByType.scss
index de0904e5..4c4f49e6 100644
--- a/src/assets/css/components/views/charts2/npmEventsByType.scss
+++ b/src/assets/css/components/views/charts2/npmEventsByType.scss
@@ -2,19 +2,21 @@
   position: relative;
   width: 100%;
   height: 100%;
+
   .npm-event-title {
     display: flex;
     font-size: 14px;
-    color: #353636;
-    font-weight: 600;
+    color: var(--el-text-color-primary);
+    font-weight: bold;
     margin-bottom: 10px;
   }
   .npm-event-pie {
     width: 100%;
     height: calc(100% - 30px);
-    border: 1px solid #E2E5EC;
+    border: 1px solid var(--el-border-color-light);
     border-radius: 4px;
     display: flex;
+
     .panel-chart__no-data {
       height: calc(100% - 30px);
     }
@@ -23,6 +25,7 @@
       width: 100%;
       display: flex;
       align-items: center;
+
       .chart-drawing {
         height: 100%;
         width: 50%;
@@ -31,12 +34,12 @@
         display: flex;
         width: 40%;
         justify-content: space-around;
+
         .npm-event-pie-legend {
           .npm-event-pie-legend-title {
             font-size: 12px;
-            color: #575757;
+            color: var(--el-text-color-regular);
             line-height: 12px;
-            font-weight: 400;
             margin-bottom: 15px;
           }
           .npm-event-pie-legend-type {
@@ -51,31 +54,30 @@
             .npm-event-pie-legend-type-severity {
               font-size: 12px;
               line-height: 12px;
-              color: #353636;
-              font-weight: 400;
+              color: var(--el-text-color-primary);
               text-transform: capitalize;
             }
             .critical {
-              background: rgb(226,97,84);
+              background: var(--cn-color-critical);
             }
             .high {
-              background: rgb(228,142,77);
+              background: var(--cn-color-high);
             }
             .info {
-              background: rgb(136,175,101);
+              background: var(--cn-color-info);
             }
             .medium {
-              background: rgb(231,179,78);
+              background: var(--cn-color-medium);
             }
             .low {
-              background: rgb(218,199,75);
+              background: var(--cn-color-low);
             }
           }
           .npm-event-pie-legend-total {
             font-size: 12px;
-            color: #353636;
+            color: var(--el-text-color-primary);
             line-height: 12px;
-            font-weight: 600;
+            font-weight: bold;
             margin-bottom: 11px;
           }
         }
diff --git a/src/assets/css/components/views/charts2/npmEventsHeader.scss b/src/assets/css/components/views/charts2/npmEventsHeader.scss
index a7854c2f..dce29d65 100644
--- a/src/assets/css/components/views/charts2/npmEventsHeader.scss
+++ b/src/assets/css/components/views/charts2/npmEventsHeader.scss
@@ -1,6 +1,7 @@
 .npm-header {
   display: flex;
   height: 100%;
+
   .npm-header-body:nth-of-type(5) {
     margin-right: 0;
   }
@@ -8,16 +9,18 @@
     height: 100%;
     display: flex;
     justify-content: space-between;
-    background: rgba(113,113,113,0.06);
-    border: 1px solid #E2E5EC;
+    background: var(--el-fill-color-lighter);
+    border: 1px solid var(--el-border-color-light);
     border-radius: 4px;
     padding: 0 14px 0 16px;
     margin-right: 12px;
     align-items: center;
     flex: 1;
+
     .npm-header-body-severity {
       display: flex;
       align-items: center;
+
       .npm-header-body-severity-icon {
         border-radius: 6px;
         width: 12px;
@@ -25,32 +28,32 @@
         margin-right: 10px;
       }
       .critical {
-        background: rgb(226,97,84);
+        background: var(--cn-color-critical);
       }
       .high {
-        background: rgb(228,142,77);
+        background: var(--cn-color-high);
       }
       .info {
-        background: rgb(136,175,101);
+        background: var(--cn-color-info);
       }
       .medium {
-        background: rgb(231,179,78);
+        background: var(--cn-color-medium);
       }
       .low {
-        background: rgb(218,199,75);
+        background: var(--cn-color-low);
       }
       .npm-header-body-severity-value {
         font-size: 12px;
-        color: #575757;
-        font-weight: 900;
+        color: var(--el-text-color-regular);
+        font-weight: bold;
         text-transform: capitalize;
       }
     }
     .npm-header-body-total {
       font-family: Helvetica-Bold;
       font-size: 16px;
-      color: #353636;
-      font-weight: 700;
+      color: var(--el-text-color-primary);
+      font-weight: bold;
     }
   }
 }
diff --git a/src/assets/css/components/views/charts2/npmLine.scss b/src/assets/css/components/views/charts2/npmLine.scss
index 6b92f002..8ac7d387 100644
--- a/src/assets/css/components/views/charts2/npmLine.scss
+++ b/src/assets/css/components/views/charts2/npmLine.scss
@@ -2,26 +2,27 @@
   position: relative;
   height: 100%;
   width: 100%;
-  border: 1px solid #f0f0f0;
+  border: 1px solid var(--el-border-color-lighter);
+
   .npm-line-title {
     display: flex;
     font-size: 14px;
-    color: #353636;
-    font-weight: 500;
+    color: var(--el-text-color-primary);
     margin: 20px 0 0 20px;
   }
   .npm-line-header {
     display: flex;
     margin: 20px 20px 0 20px;
     justify-content: space-between;
+
     .npm-line-header-title {
       display: flex;
       font-size: 14px;
-      color: #353636;
-      font-weight: 500;
+      color: var(--el-text-color-primary);
     }
     .npm-line-header-rights {
       display: flex;
+
       .npm-line-header-right {
         display: flex;
         margin-right: 10px;
@@ -33,10 +34,10 @@
     }
     .npm-line-header-right.active {
       .npm-line-header-icon {
-        background: #ccc;
+        background: var(--el-color-info-light-5);
       }
       .npm-line-header-value {
-        color: #ccc;
+        color: var(--el-color-info-light-5);
       }
     }
     .npm-line-header-icon {
@@ -46,39 +47,41 @@
       margin-right: 4px;
     }
     .npm-line-header-icon.icon0 {
-      background: #749F4D;
+      background: var(--el-color-success);
     }
     .npm-line-header-icon.icon1 {
-      background: #98709B;
+      background: #98709B; // TODO 暂无变量
     }
     .npm-line-header-icon.icon2 {
-      background: #E5A219;
+      background: var(--el-color-warning);
     }
     .npm-line-header-value {
       font-size: 12px;
-      color: #717171;
+      color: var(--el-text-color-regular);
       line-height: 12px;
-      font-weight: 400;
     }
   }
   .chart-drawing {
     height: calc(100% - 41px);
     width: 100%;
+
     .echarts-tooltip.echarts-tooltip-dark {
       .cn-chart-body {
         display: flex;
+
         .cn-chart-tooltip {
           display: flex;
           flex-direction: column;
           flex: 1;
+
           .cn-chart-tooltip-box {
             margin-right: 10px;
           }
           .cn-chart-tooltip-value.cn-chart-tooltip__color {
             font-size: 12px;
-            color: #353636;
+            color: var(--el-text-color-primary);
             line-height: 21px;
-            font-weight: 600;
+            font-weight: bold;
           }
         }
       }
diff --git a/src/assets/css/components/views/charts2/npmMap.scss b/src/assets/css/components/views/charts2/npmMap.scss
index 2d0273f2..26c6c21e 100644
--- a/src/assets/css/components/views/charts2/npmMap.scss
+++ b/src/assets/css/components/views/charts2/npmMap.scss
@@ -1,7 +1,7 @@
 .cn-chart__map-title {
   display: flex;
   font-size: 14px;
-  color: #353636;
+  color: var(--el-text-color-regular);
   font-weight: 600;
   margin-bottom: 10px;
 }
@@ -18,7 +18,7 @@
   .map-canvas {
     height: 100%;
     width: 100%;
-    background-color: #CAD2D3;
+    background-color: var(--cn-map-bg-color);
   }
   .map-filter {
     position: absolute;
@@ -32,7 +32,7 @@
     }
     .el-select__placeholder {
       padding-left: 16px;
-      color: #2c72c6;
+      color: var(--el-color-primary);
     }
     .el-select__prefix {
       padding-left: 5px;
@@ -45,7 +45,7 @@
       margin-left: 10px;
 
       .el-input__inner {
-        color: #2C72C6;
+        color: var(--el-color-primary);
       }
       &.map-select__direction {
         width: 110px;
@@ -60,7 +60,7 @@
         height: 28px;
         .el-select__placeholder {
           padding-left: 4px;
-          color: #c0c4cc;
+          color: var(--el-color-info-light-5);
         }
       }
     }
@@ -74,7 +74,7 @@
     left: 10px;
     position: absolute;
     padding: 0 10px;
-    background-color: white;
+    background-color: var(--el-fill-color-blank);
 
     .map-legend__row {
       display: flex;
@@ -87,18 +87,18 @@
         border-radius: 50%;
 
         &.map-legend__symbol--green {
-          background-color: #7E9F54;
+          background-color: var(--el-color-success-dark-2);
         }
         &.map-legend__symbol--yellow {
-          background-color: #E5A219;
+          background-color: var(--el-color-warning);
         }
         &.map-legend__symbol--red {
-          background-color: #E26154;
+          background-color: var(--el-color-error);
         }
       }
       .map-legend__desc {
         padding-left: 5px;
-        color: #575757;
+        color: var(--el-text-color-regular);
       }
     }
   }
diff --git a/src/assets/css/components/views/charts2/npmNetworkQuantity.scss b/src/assets/css/components/views/charts2/npmNetworkQuantity.scss
index 23f76456..7d699fee 100644
--- a/src/assets/css/components/views/charts2/npmNetworkQuantity.scss
+++ b/src/assets/css/components/views/charts2/npmNetworkQuantity.scss
@@ -1,9 +1,10 @@
 .npm-network-quantity {
   display: flex;
-  border: 1px solid #E2E5EC;
+  border: 1px solid var(--el-border-color-light);
   height: 100%;
   width: 100%;
   border-radius: 4px;
+
   .single-value:nth-of-type(1) {
     border-left: none;
   }
@@ -12,24 +13,25 @@
     padding-left: 20px;
     height: calc(100% - 48px);
     margin: auto;
-    border-left: 1px solid #E2E5EC;
+    border-left: 1px solid var(--el-border-color-light);
     display: flex;
     flex-direction: column;
     justify-content: center;
+
     .single-value__title {
       font-size: 14px;
-      color: #575757;
-      font-weight: 400;
+      color: var(--el-text-color-regular);
     }
     .single-value__content {
       margin: 10px 0 12px 0;
       display: flex;
       align-items: center;
+
       .single-value__content-number {
         font-family: Helvetica-Bold;
         font-size: 24px;
-        color: #353636;
-        font-weight: 700;
+        color: var(--el-text-color-primary);
+        font-weight: bold;
         margin-right: 12px;
       }
       .single-value__content-trend {
@@ -39,33 +41,33 @@
         justify-content: center;
         margin-top: 2px;
         border-radius: 10px;
-        font-weight:500;
         font-size: 12px;
         height: 20px;
         padding: 0 5px;
       }
       .single-value__content-trend-black {
-        background-color: rgba(113,113,113,0.12);
-        color: #717171;
+        background-color: var(--el-fill-color-dark);
+        color: var(--el-text-color-regular);
         width: 36px;
       }
       .single-value__content-trend-green {
-        background-color: rgba(126,159,84,0.12);
-        color:#7E9F54;
+        background-color: rgba(var(--el-color-success-rgb),0.12);
+        color: var(--el-color-success);
       }
       .single-value__content-trend-red {
-        background-color: rgba(226,97,84,0.12);
-        color:#E26154;
+        background-color: rgba(var(--el-color-error-rgb),0.12);
+        color: var(--el-color-error);
+
         .cn-icon-rise1 {
-          color: #E44D3E;
+          color: var(--el-color-error);
         }
       }
     }
     .single-value__circle {
       display: flex;
       font-size: 12px;
-      color: #717171;
-      font-weight: 400;
+      color: var(--el-text-color-regular);
+
       .single-value__circle-p95 {
         margin-right: 10px;
       }
diff --git a/src/assets/css/components/views/charts2/npmRecentEvents.scss b/src/assets/css/components/views/charts2/npmRecentEvents.scss
index c85bd123..a2d37c5e 100644
--- a/src/assets/css/components/views/charts2/npmRecentEvents.scss
+++ b/src/assets/css/components/views/charts2/npmRecentEvents.scss
@@ -1,11 +1,12 @@
 .npm-recent {
   height: 100%;
   width: 100%;
+
   .npm-recent-title {
     display: flex;
     font-size: 14px;
-    color: #353636;
-    font-weight: 600;
+    color: var(--el-text-color-primary);
+    font-weight: bold;
     margin-bottom: 10px;
   }
   .npm-recent-table-ten.npm-recent-table {
@@ -17,21 +18,16 @@
   }
   .npm-recent-table {
     height: calc(100% - 30px) !important;
-    border: 1px solid #E2E5EC;
+    border: 1px solid var(--el-border-color-light);
     border-radius: 4px;
-    padding: 1px;
 
-    .el-scrollbar__thumb {
-      background: rgba(0,0,0,0);
-      //width: calc(100% - 200px) !important;
-    }
-    .el-table__empty-block {
-      width: calc(100% - 2px) !important;
+    .el-table__inner-wrapper::before {
+      height: 0; // 去掉底部的边框
     }
     .el-table__empty-text {
       line-height: 25px !important;
+
       .table-no-data {
-        //margin-left: -2px !important;
         .icon {
           width: 30px;
           height: 30px;
@@ -39,18 +35,18 @@
         }
         .table-no-data__title {
           font-size: 14px;
-          color: #575757;
-          font-weight: 400;
+          color: var(--el-text-color-regular);
         }
       }
     }
     .el-table__header-wrapper {
       tr th {
         padding: 4px 0;
+
         .data-column__span {
           font-size: 12px;
-          color: $--text-color-1;
-          font-weight: 600;
+          color: var(--el-text-color-primary);
+          font-weight: bold;
         }
       }
     }
@@ -64,59 +60,51 @@
     display: flex !important;
     height: 20px;
     line-height: 20px;
+
     .data-recent-table-severity {
       font-size: 12px;
-      font-weight: 500;
       border-radius: 4px;
       padding: 0 6px;
       text-transform: capitalize;
     }
     .critical {
-      color: #E26154;
-      background: rgba(226,97,84, .18);
+      color: var(--cn-color-critical);
+      background: rgba(var(--cn-color-critical-rgb), .18);
     }
     .high {
-      color: #E48E4D;
-      background: rgba(228,142,77, .18);
+      color: var(--cn-color-high);
+      background: rgba(var(--cn-color-high-rgb), .18);
     }
     .info {
-      color: #88AF65;
-      background: rgba(136,175,101, .18);
+      color: var(--cn-color-info);
+      background: rgba(var(--cn-color-info-rgb), .18);
     }
     .medium {
-      color: #E7B34E;
-      background: rgba(231,179,78, .18);
+      color: var(--cn-color-medium);
+      background: rgba(var(--cn-color-medium-rgb), .18);
     }
     .low {
-      color: #DAC74B;
-      background: rgba(218,199,75, .18);
+      color: var(--cn-color-low);
+      background: rgba(var(--cn-color-low-rgb), .18);
     }
     .data-recent-table-entity {
       font-size: 12px;
-      color: #046ECA;
-      font-weight: 400
+      color: var(--el-color-primary);
     }
     .click-active {
       cursor: pointer;
     }
     .data-recent-table-eventType {
       font-size: 12px;
-      color: #046ECA;
-      font-weight: 600;
-      background: #EBF1F4;
+      color: var(--el-color-primary);
+      font-weight: bold;
+      background: var(--cn-bg-color-light);
       border-radius: 4px;
       padding: 0 6px;
     }
     span {
       font-size: 12px;
-      color: #353636;
-      font-weight: 400;
+      color: var(--el-text-color-primary);
     }
   }
-  .el-table--group::after,.el-table--border::after, .el-table::before {
-    height: 0px;
-  }
-  .el-table .cell {
-    padding: 0 10px !important;
-  }
 }
diff --git a/src/assets/css/components/views/charts2/npmRelatedSessions.scss b/src/assets/css/components/views/charts2/npmRelatedSessions.scss
index f4230603..47215895 100644
--- a/src/assets/css/components/views/charts2/npmRelatedSessions.scss
+++ b/src/assets/css/components/views/charts2/npmRelatedSessions.scss
@@ -1,37 +1,38 @@
 .npm-sessions {
   height: 100%;
   width: 100%;
+
   .npm-sessions-title {
     display: flex;
     font-size: 14px;
-    color: #353636;
-    font-weight: 500;
+    color: var(--el-text-color-primary);
   }
   .npm-sessions-div {
     display: flex;
     margin: 10px 0 10px 0;
     width: 100%;
     height: 12px;
+
     .npm-sessions-div-red {
       height: 100%;
-      background: #E26154;
-      border: 1px solid #E26154;
+      background: var(--el-color-error);
+      border: 1px solid var(--el-color-error);
       border-top-right-radius: 4px;
       border-bottom-right-radius: 4px;
       border-left: none;
     }
     .npm-sessions-div-green {
       height: 100%;
-      background: #7E9F54;
-      border: 1px solid #7E9F54;
+      background: var(--el-color-success);
+      border: 1px solid var(--el-color-success);
       border-top-left-radius: 4px;
       border-bottom-left-radius: 4px;
       border-right: none;
     }
     .npm-sessions-div-gray {
       height: 100%;
-      background: rgba(113,113,113,0.30);
-      border: 1px solid rgba(113,113,113,0.30);
+      background: var(--el-color-info-light-7);
+      border: 1px solid var(--el-color-info-light-7);
       border-top-left-radius: 4px;
       border-bottom-left-radius: 4px;
       border-right: none;
@@ -41,8 +42,10 @@
   .npm-sessions-body {
     display: flex;
     justify-content: space-between;
+
     .npm-sessions-body-left {
       display: flex;
+
       .npm-sessions-as-clients.right {
         margin-right: 45px;
       }
@@ -50,13 +53,14 @@
         display: flex;
         flex-direction: column;
         align-items: center;
+
         .npm-sessions-as-client {
           display: flex;
           align-items: center;
+
           .npm-sessions-as-client-i18n {
             font-size: 12px;
-            color: #717171;
-            font-weight: 400;
+            color: var(--el-text-color-regular);
           }
           .npm-sessions-as-client-green,.npm-sessions-as-client-red {
             width: 8px;
@@ -64,32 +68,31 @@
             border-radius: 50%;
           }
           .npm-sessions-as-client-green {
-            background: green;
+            background: var(--el-color-success);
           }
           .npm-sessions-as-client-red {
-            background: red;
+            background: var(--el-color-error);
           }
         }
         .npm-sessions-as-client-percent {
           font-size: 18px;
-          color: #353636;
-          font-weight: 700;
+          color: var(--el-text-color-primary);
+          font-weight: bold;
         }
       }
     }
     .npm-sessions-body-right {
       text-align: right;
+
       .npm-sessions-Progress-number {
         font-size: 14px;
-        color: #353636;
-        font-weight: 700;
+        color: var(--el-text-color-primary);
+        font-weight: bold;
       }
       .npm-sessions-Progress-unit {
         font-size: 12px;
-        color: #717171;
-        font-weight: 400;
+        color: var(--el-text-color-regular);
       }
     }
-
   }
 }
diff --git a/src/assets/css/components/views/charts2/npmTabs.scss b/src/assets/css/components/views/charts2/npmTabs.scss
index af7618d9..350da67e 100644
--- a/src/assets/css/components/views/charts2/npmTabs.scss
+++ b/src/assets/css/components/views/charts2/npmTabs.scss
@@ -5,7 +5,7 @@
     position: absolute;
     height: 3px;
     top: 0;
-    background-color: #046EC9;
+    background-color: var(--el-color-primary);
     border-radius: 5px 5px 0 0;
     transition: all linear .2s;
   }
@@ -17,15 +17,14 @@
     box-shadow: none;
 
     &>.el-tabs__header {
-      background-color: white;
-      //background-color: #f00;
-      border-color: #E2E5EC;
+      background-color: var(--el-fill-color-blank);
+      border-color: var(--el-border-color-light);
 
       .el-tabs__nav-wrap {
         padding-left: 27px;
       }
       .el-tabs__item:first-child {
-       margin-left: 0;
+        margin-left: 0;
       }
     }
     .el-tabs__content {
@@ -38,7 +37,7 @@
     line-height: 35px;
 
     .npm-tab__label {
-      color: #353636;
+      color: var(--el-text-color-primary);
       font-size: 14px;
       font-weight: bold;
       box-sizing: border-box;
@@ -51,10 +50,10 @@
     }
     &.is-active {
       .npm-tab__label {
-        color: #353636;
+        color: var(--el-text-color-primary);
 
         i {
-          color: #046EC9;
+          color: var(--el-color-primary);
         }
       }
     }
diff --git a/src/assets/css/components/views/charts2/npmTrafficLine.scss b/src/assets/css/components/views/charts2/npmTrafficLine.scss
index 0ad8ee47..42224e0d 100644
--- a/src/assets/css/components/views/charts2/npmTrafficLine.scss
+++ b/src/assets/css/components/views/charts2/npmTrafficLine.scss
@@ -1,13 +1,15 @@
 .npm-traffic-line {
   height: 100%;
   width: 100%;
+
   .npm-traffic-line-header {
     display: flex;
     justify-content: space-between;
+
     .npm-traffic-line-title {
       font-size: 14px;
-      color: #353636;
-      font-weight: 600;
+      color: var(--el-text-color-primary);
+      font-weight: bold;
       height: 32px;
     }
     .line-select-metric {
@@ -16,8 +18,7 @@
 
       &>span {
         font-size: 12px;
-        color: #575757;
-        font-weight: 400;
+        color: var(--el-text-color-regular);
         margin-right: 3px;
       }
       .line-select__operation {
@@ -26,6 +27,7 @@
         margin-left: 3px;
         box-shadow: none;
         border-radius: 2px;
+
         .el-select__wrapper {
           width: 225px;
           height: 24px !important;
@@ -33,9 +35,9 @@
           padding-left: 4px;
           line-height: 24px;
           font-size: 12px;
-          font-weight: 400;
+
           .el-select__placeholder {
-            color: #2C72C6;
+            color: var(--el-color-primary);
             margin-left: 1px;
           }
           .el-input__inner {
@@ -44,23 +46,24 @@
             padding-left: 4px;
             line-height: 24px;
             font-size: 12px;
-            color: #2C72C6;
-            font-weight: 400;
+            color: var(--el-color-primary);
           }
           .el-select__suffix {
             i {
-              color: #575757 !important;
+              color: var(--el-color-primary) !important;
             }
           }
         }
         .el-input__suffix {
           display: flex;
+
           .el-input__suffix-inner {
             line-height: 24px;
+
             .el-select__caret {
               line-height: 24px;
               width: 16px;
-              color: #575757;
+              color: var(--el-color-primary);
             }
           }
         }
@@ -68,31 +71,35 @@
     }
   }
   .npm-traffic-line-body {
-    border: 1px solid #E2E5EC;
+    border: 1px solid var(--el-border-color-light);
     border-radius: 4px;
     height: calc(100% - 32px);
     width: 100%;
+
     .panel-chart__no-data {
       height: calc(100% - 32px);
     }
     .chart-drawing {
       height: 100%;
       width: 100%;
+
       .echarts-tooltip.echarts-tooltip-dark {
         .cn-chart-body {
           display: flex;
+
           .cn-chart-tooltip {
             display: flex;
             flex-direction: column;
             flex: 1;
+
             .cn-chart-tooltip-box {
               margin-right: 10px;
             }
             .cn-chart-tooltip-value.cn-chart-tooltip__color {
               font-size: 12px;
-              color: #353636;
+              color: var(--el-text-color-primary);
               line-height: 21px;
-              font-weight: 600;
+              font-weight: bold;
             }
           }
         }
diff --git a/src/assets/css/components/views/charts2/panel.scss b/src/assets/css/components/views/charts2/panel.scss
index 54aedca4..5e8d9f58 100644
--- a/src/assets/css/components/views/charts2/panel.scss
+++ b/src/assets/css/components/views/charts2/panel.scss
@@ -11,6 +11,7 @@
 }
 .panel-box2 {
   height: calc(100% - 20px);
+
   .panel__header {
     display: flex;
     justify-content: space-between;
@@ -20,10 +21,10 @@
     .panel__title {
       font-size: 24px;
       line-height: 24px;
-      font-weight: 900;
-      //color: #353636;
-      color: $--text-color-1;
-      display:flex;
+      font-weight: bold;
+      color: var(--el-text-color-primary);
+      display: flex;
+
       .score {
         .circle-icon {
           border-radius: 3px;
@@ -33,25 +34,23 @@
           margin-right: 4px;
         }
         .data-score-red {
-          background: #E26154;
+          background: var(--el-color-error);
         }
         .data-score-yellow {
-          background: #E5A219;
+          background: var(--el-color-warning);
         }
         .data-score-green {
-          background: #749F4D;
+          background: var(--el-color-success);
         }
-        height:24px;
+        height: 24px;
         font-size: 12px;
-        color: #353636;
-        font-weight: 500;
-        margin-left:8px;
-        padding-right:13px;
-        background: #F7F7F7;
-        border: 1px solid #E2E5EC;
-        box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+        color: var(--el-text-color-primary);
+        margin-left: 8px;
+        padding-right: 13px;
+        background: var(--el-fill-color-light);
+        border: 1px solid var(--el-border-color-light);
         border-radius: 4px;
-        display:flex;
+        display: flex;
         align-items: center;
         justify-content: center;
       }
@@ -68,8 +67,7 @@
         i {
           font-size: 18px;
           cursor: pointer;
-          color: #626262;
-          font-weight: 500;
+          color: var(--el-text-color-regular);
         }
       }
     }
@@ -77,59 +75,47 @@
       display: flex;
 
       &>.el-select {
-        width: 162px !important;
+        width: 175px !important;
         margin-right: 10px;
 
         .select-prefix {
           font-size: 14px;
-          color: #999;
+          color: var(--el-text-color-secondary);
           padding: 0 6px 0 3px;
         }
         .el-input__inner {
           font-size: 14px;
-          color: #353636;
-          background-color: #FFFFFF;
+          color: var(--el-text-color-primary);
+          background-color: var(--el-fill-color-blank);
         }
       }
       .panel__time {
         display: flex;
       }
-      .el-select__wrapper {
-        height: 28px !important;
-        min-height: 20px !important;
-        padding: 5px 7px 4px 5px !important;
-        .el-select__prefix {
-          .select-prefix {
-            margin-right: -5px !important;
-          }
-        }
-        .el-select__suffix {
-          .el-icon {
-            margin-left: -17px !important;
-            margin-top: -2px !important;
-          }
-        }
+      .el-select__wrapper .el-select__prefix .select-prefix {
+        margin-right: -5px !important;
       }
     }
   }
   .chart-list {
     height: calc(100% - 68px);
     overflow: auto;
+
     &>.vue-grid-layout {
       margin-top: -20px;
       .header__operation--cancel:hover,.el-button:hover,.app-card-title-more-delete:hover {
-        background: #EBF1F4;
-        border: 1px solid rgba(0,0,0,0.15);
+        background: var(--cn-bg-color-light);
+        border: 1px solid var(--el-border-color-light);
       }
       .header__operation--cancel:active,.el-button:active,.app-card-title-more-delete:active {
-        background: #E0E7EA;
-        border: 1px solid rgba(0,0,0,0.15);
+        background: var(--el-fill-color-darker);
+        border: 1px solid var(--el-border-color-light);
       }
       .header__operation--save:hover {
-        background: #57B8D9;
+        background: var(--el-color-business-light-1);
       }
       .header__operation--save:active {
-        background: #31A5CD;
+        background: var(--el-color-business);
       }
     }
   }
diff --git a/src/assets/css/components/views/detections/detection-create/detection-form-setting.scss b/src/assets/css/components/views/detections/detection-create/detection-form-setting.scss
index 2443dc8e..26e94f28 100644
--- a/src/assets/css/components/views/detections/detection-create/detection-form-setting.scss
+++ b/src/assets/css/components/views/detections/detection-create/detection-form-setting.scss
@@ -1,3 +1,10 @@
+$color-primary: var(--el-text-color-primary);
+$fill-color-light: var(--el-fill-color-light);
+$color-regular: var(--el-text-color-regular);
+$border-color-light: var(--el-border-color-light);
+$fill-color-blank: var(--el-fill-color-blank);
+$color-info-light: var(--el-color-info-light-7);
+
 .form-setting__block {
   width: 620px;
 
@@ -5,35 +12,26 @@
     margin-bottom: 20px;
     margin-top: -4px;
   }
-  .el-select__wrapper, .el-input__wrapper {
-    min-height: 24px !important;
-    height: 24px !important;
-  }
+
   .el-switch__label.is-active {
-    color: $--text-color-1;
+    color: $color-primary;
   }
+
   .el-form-item__label {
     height: 14px;
     line-height: 14px;
     padding: 0;
     margin-bottom: 12px;
-    font-family: NotoSansHans-Medium;
     font-size: 14px;
-    color: #333333;
-    font-weight: 500;
-  }
-
-  .el-form-item__content {
-    height: 24px;
-    line-height: 24px;
+    color: $color-primary;
   }
 
   .block-mode {
     width: 300px;
     height: 125px;
     padding: 16px;
-    background: #FFFFFF;
-    border: 1px solid rgba(226, 229, 236, 1);
+    background: $fill-color-blank;
+    border: 1px solid $border-color-light;
     border-radius: 2px;
     margin-right: 20px;
     display: flex;
@@ -57,19 +55,15 @@
       flex-direction: column;
 
       .block-mode-title {
-        font-family: NotoSansSChineseRegular;
         font-size: 14px;
-        color: #353636;
-        font-weight: 400;
+        color: $color-primary;
         line-height: 14px;
       }
 
       .block-mode-content {
-        font-family: NotoSansSChineseRegular;
         font-size: 12px;
-        color: #717171;
+        color: $color-regular;
         line-height: 15px;
-        font-weight: 400;
         margin: 10px 0;
       }
 
@@ -78,60 +72,38 @@
         height: 28px;
         line-height: 28px;
         text-align: center;
-        background: #F5F6F7;
+        background: $fill-color-light;
         border-radius: 2px;
-        font-family: NotoSansHans-Medium;
         font-size: 12px;
-        color: #353636;
-        font-weight: 500;
+        color: $color-primary;
         cursor: pointer;
-        transition: all 0.2s;
+        transition: all var(--el-transition-duration-fast);
       }
 
       .block-mode-btn-active {
-        background: #7E9F54;
-        color: #FFFFFF;
+        background: var(--el-color-success);
+        color: $fill-color-blank;
       }
     }
   }
 
   .block-title {
-    font-family: NotoSansHans-Medium;
     font-size: 14px;
     line-height: 14px;
-    color: #333333;
-    font-weight: 500;
+    color: $color-primary;
     margin-bottom: 12px;
   }
 
   .block-title1 {
-    font-family: NotoSansHans-Medium;
     font-size: 12px;
     line-height: 12px;
-    color: #353636;
+    color: $color-primary;
     font-weight: 500;
     margin-bottom: 12px;
   }
 
   .form-setting__select {
     width: 620px !important;
-
-    .el-input--small .el-input__inner {
-      height: 24px !important;
-      line-height: 24px !important;
-    }
-  }
-
-  .form-setting__input {
-    &.el-input {
-      height: 24px !important;
-      line-height: 24px !important;
-    }
-
-    .el-input__inner {
-      height: 24px;
-      line-height: 24px;
-    }
   }
 
   .form-setting__textarea {
@@ -141,17 +113,15 @@
   }
 
   .el-switch__label, .form-setting__block .el-switch__label {
-    font-family: NotoSansSChineseRegular;
     font-size: 14px;
-    color: #353636;
-    font-weight: 400;
+    color: $color-primary;
   }
 
   .block-dimension {
     width: 620px;
     height: 24px;
     line-height: 24px;
-    border: 1px solid #e2e5ec;
+    border: 1px solid $border-color-light;
     display: flex;
     align-items: center;
 
@@ -159,21 +129,14 @@
       width: auto;
       height: 19px;
       line-height: 19px;
-      background: #E5E8EB;
+      background: var(--el-fill-color-darker);
       border-radius: 2px;
       opacity: 0.6;
-      font-family: NotoSansSChineseRegular;
       font-size: 12px;
-      color: #353636;
-      font-weight: 400;
+      color: $color-primary;
       margin-right: 4px;
     }
   }
-
-  .el-input--small .el-input__inner {
-    height: 24px !important;
-    line-height: 24px !important;
-  }
 }
 
 .form-setting__block-key {
@@ -183,14 +146,12 @@
 
   .block-key {
     height: 28px;
-    background: #F5F8FA;
-    border: 1px solid rgba(222, 222, 222, 1);
+    background: $fill-color-light;
+    border: 1px solid $color-info-light;
     box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
     border-radius: 2px;
-    font-family: NotoSansHans-Medium;
     font-size: 12px;
-    color: #353636;
-    font-weight: 500;
+    color: $color-primary;
     margin-left: 12px;
     display: flex;
     align-items: center;
@@ -200,7 +161,7 @@
     i {
       font-size: 12px;
       margin-right: 4px;
-      color: #575757;
+      color: $color-regular;
     }
   }
 }
@@ -210,30 +171,15 @@
   display: flex;
   justify-content: flex-end;
 
-  .el-button {
-    width: 80px !important;
-    height: 30px !important;
-    min-height: 30px !important;
-    line-height: 30px !important;
-    background: #38ACD2;
-    border: 1px solid rgba(46, 136, 166, 1);
-    border-radius: 2px;
-    font-family: NotoSansHans-Medium;
-    font-size: 12px;
-    color: #FFFFFF;
-    font-weight: 500;
-    padding: 0 14px;
-  }
-
-  .btn1 {
-    margin-right: 10px;
-    .el-button {
-      background: #F5F6F7;
-      border: 1px solid rgba(215,215,215,1);
-      color: #353636;
-    }
+  .business-button {
+    min-width: 74px;
+    height: 30px;
+    font-size: 14px;
+    padding: 0 15px;
+    margin: 0 15px;
   }
 }
+
 .policy-form__footer__btn {
   justify-content: center;
   margin-top: 8px;
@@ -242,6 +188,7 @@
     margin-right: 16px;
   }
 }
+
 .form-setting__btn1, .policy-form__footer__btn {
   .el-button {
     padding: 0 11px !important;
@@ -254,12 +201,12 @@
   right: 0;
 
   .el-input__inner {
-    border-color: #DEDEDE !important;
+    border-color: $color-info-light !important;
   }
 }
 
 .definition-filter-block {
-  border: 1px #E2E5EC solid;
+  border: 1px $border-color-light solid;
   min-height: 196px;
   display: flex;
   flex-direction: column;
@@ -280,15 +227,10 @@
       width: 170px;
     }
 
-    .el-input--small .el-input__inner {
-      height: 24px;
-      line-height: 24px;
-    }
-
     i {
       font-size: 12px !important;
       font-variant-caps: all-small-caps;
-      color: #575757;
+      color: $color-regular;
       cursor: pointer;
     }
   }
@@ -304,7 +246,7 @@
     i {
       font-size: 12px;
       font-variant-caps: all-small-caps;
-      color: #575757;
+      color: $color-regular;
       cursor: pointer;
     }
   }
@@ -313,11 +255,11 @@
 .block-filter-add {
   height: 24px;
   line-height: 24px;
-  background: #F5F8FA;
-  border: 1px solid rgba(222, 222, 222, 1);
+  background: $fill-color-light;
+  border: 1px solid $color-info-light;
   box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
   border-radius: 2px;
-  color: #575757;
+  color: $color-regular;
   text-align: center;
   cursor: pointer;
 }
@@ -326,7 +268,7 @@
   width: 396px;
 
   .el-drawer__body {
-    border: 1px #E2E5EC solid;
+    border: 1px $border-color-light solid;
   }
 
   .el-overlay {
@@ -348,8 +290,8 @@
       font-family: NotoSansHans-Medium;
       font-weight: 500;
       padding: 0 0 0 12px;
-      color: #353636;
-      background: #F9F9F9;
+      color: $color-primary;
+      background: var(--el-fill-color-lighter);
       height: 30px;
       border: 0 !important;
     }
@@ -359,26 +301,26 @@
       font-weight: 400;
       padding: 0 0 0 12px;
       font-size: 14px;
-      color: #353636;
+      color: $color-primary;
       height: 28px;
       border: 0 !important;
     }
 
     .el-table::before {
-      background-color: #FFFFFF;
+      background-color: $fill-color-blank;
     }
   }
 }
 
 .definition-condition-block {
-  border: 1px #E2E5EC solid;
+  border: 1px $border-color-light solid;
   padding: 20px;
   margin-bottom: 10px;
 
   .condition-title {
     font-family: NotoSansHans-Medium;
     font-size: 14px;
-    color: #333333;
+    color: $color-primary;
     font-weight: 500;
     margin-bottom: 12px;
     height: 14px;
@@ -403,10 +345,8 @@
   }
 
   .condition-metric {
-    font-family: NotoSansSChineseRegular;
     font-size: 14px;
-    color: #353636;
-    font-weight: 400;
+    color: $color-primary;
     display: flex;
     flex-direction: column;
 
@@ -420,7 +360,7 @@
         height: 24px;
         font-family: NotoSansSChineseRegular;
         font-size: 14px;
-        color: #353636;
+        color: $color-primary;
         font-weight: 400;
         display: flex;
       }
@@ -432,12 +372,12 @@
       }
 
       .metric-item1-close {
-        color: #E26154;
+        color: var(--el-color-danger);
         margin-left: 12px;
       }
 
       .metric-item1-close-disable {
-        color: #ecb2ad;
+        color: var(--el-color-error-light-5);
         margin-left: 12px;
         cursor: no-drop;
       }
@@ -497,14 +437,12 @@
 .condition-add {
   width: 100%;
   height: 24px;
-  background: #F5F8FA;
-  border: 1px solid rgba(222, 222, 222, 1);
+  background: $fill-color-light;
+  border: 1px solid $color-info-light;
   box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
   border-radius: 2px;
-  font-family: NotoSansHans-Medium;
   font-size: 12px;
-  color: #353636;
-  font-weight: 500;
+  color: $color-primary;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -519,14 +457,12 @@
 }
 
 .condition-divider {
-  border: 1px #ECECEC dashed;
+  border: 1px var(--el-color-info-light-8) dashed;
 
   .el-divider__text {
     padding: 0 4px;
-    font-family: NotoSansSChineseRegular;
     font-size: 12px;
-    color: #BEBEBE;
-    font-weight: 400;
+    color: var(--el-text-color-disabled);
   }
 }
 
diff --git a/src/assets/css/components/views/detections/detection-create/detection-form.scss b/src/assets/css/components/views/detections/detection-create/detection-form.scss
index eb7ef26e..1449a17c 100644
--- a/src/assets/css/components/views/detections/detection-create/detection-form.scss
+++ b/src/assets/css/components/views/detections/detection-create/detection-form.scss
@@ -1,10 +1,13 @@
+$text-color-primary: var(--el-text-color-primary);
+$bg-color-page: var(--el-bg-color-page);
+
 .detection-form {
   padding: 20px;
 
   .detection-form-header {
     font-size: 24px;
-    color: #353636;
-    font-weight: 900;
+    color: $text-color-primary;
+    font-weight: bold;
     margin-top: 10px;
   }
 
@@ -17,12 +20,16 @@
       margin-top: 20px;
       width: 1200px;
 
+      .rule-definition {
+        position: relative;
+      }
+
       .el-collapse-item__header {
         width: 1200px !important;
         height: 56px !important;
-        background: #FFFFFF !important;
-        border-left: 1px solid #EFF2F5;
-        border-right: 1px solid #EFF2F5;
+        background: var(--el-fill-color-blank) !important;
+        border-left: 1px solid $bg-color-page;
+        border-right: 1px solid $bg-color-page;
         //box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02) !important;
         border-radius: 4px !important;
         display: flex;
@@ -38,7 +45,7 @@
       }
 
       .el-collapse-item__wrap {
-        border: 1px solid #EFF2F5;
+        border: 1px solid $bg-color-page;
         border-top: none;
       }
 
@@ -52,28 +59,25 @@
           height: 24px;
           line-height: 24px;
           text-align: center;
-          font-family: NotoSansHans-Medium;
           font-size: 16px;
-          font-weight: 500;
           border-radius: 50%;
           margin-right: 10px;
           transition: 0.5s all;
         }
 
         .form-collapse-header-no {
-          background: #E2E5EC;
-          color: #333333;
+          background: var(--el-border-color-light);
+          color: $text-color-primary;
         }
 
         .form-collapse-header-no-active {
-          background: #38ACD2;
-          color: #FFFFFF;
+          background: var(--el-color-business);
+          color: var(--el-color-white);
         }
 
         .form-collapse-header-title {
           font-size: 16px;
-          color: #333333;
-          font-weight: 500;
+          color: $text-color-primary;
         }
       }
 
@@ -82,22 +86,18 @@
 
         .trigger-block {
           width: 620px;
-          height: 90px;
-          padding: 16px 12px;
+          padding: 16px 12px 0 12px;
           border-radius: 2px;
-          border: 1px #E2E5EC solid;
+          border: 1px var(--el-border-color-light) solid;
           display: flex;
           flex-direction: column;
           font-size: 14px;
-          color: #353636;
-          font-weight: 400;
+          color: $text-color-primary;
 
           .trigger-block-item {
             display: flex;
             align-items: flex-start;
             justify-content: flex-start;
-            height: 24px;
-            line-height: 24px;
 
             .policy-form-item {
               .el-form-item__error {
@@ -106,24 +106,21 @@
             }
           }
 
-          .el-input--small .el-input__inner {
-            width: 112px;
+          .el-form-item__content {
             margin: 0 12px;
           }
+          .el-input--small {
+            .el-input__inner {
+              width: 112px;
+            }
+          }
 
           .el-select .el-input .el-select__caret {
-            height: 24px;
-            line-height: 24px;
             margin-right: 12px;
           }
 
-          .form-trigger__select {
-            margin-left: -12px;
-          }
-
-          .el-form-item__content {
-            height: 24px;
-            line-height: 24px !important;
+          .form-trigger__select .el-form-item__content {
+            margin-left: 0;
           }
         }
       }
@@ -132,13 +129,11 @@
         .el-collapse-item__content {
           padding-bottom: 0 !important;
         }
+
         .el-input__wrapper, .el-select__wrapper {
-          height: 24px !important;
-          line-height: 24px !important;
-          min-height: 24px !important;
           width: 112px;
-          margin: 0 12px;
         }
+
         .el-input__inner {
           padding: 0 15px !important;
         }
@@ -146,8 +141,6 @@
     }
 
     .el-input--small, .el-input--small .el-input__inner {
-      height: 24px !important;
-      line-height: 24px !important;
       border-radius: 2px !important;
     }
   }
@@ -160,7 +153,7 @@
     width: calc(100% + 40px);
     height: 60px;
     margin-left: -20px;
-    box-shadow: 0 -1px 4px 0 rgba(0,0,0,0.10);
+    box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.10);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -169,9 +162,11 @@
   .el-overlay-message-box, .el-message-box {
     padding: 0 !important;
   }
+
   .el-overlay-message-box {
     text-align: center !important;
   }
+
   .is-message-box .el-overlay-message-box {
     display: flex;
     justify-content: center;
@@ -179,102 +174,6 @@
   }
 
   .el-switch {
-    --el-switch-on-color: #38ACD2;
-    --el-switch-off-color: #C0CEDB;
-  }
-  .del-model {
-    &.el-message-box {
-      max-width: 480px !important;
-    }
-    display: flex;
-    flex-direction: column;
-    padding-bottom: 0 !important;
-    width: 480px !important;
-    height: 190px;
-
-    .el-message-box__header {
-      display: flex;
-      flex-direction: row;
-      border-bottom: 1px solid #eee;
-      height: 42px;
-      background: #F7F7F7;
-      box-shadow: 0 1px 0 0 rgba(53, 54, 54, 0.08);
-      padding-left: 21px;
-      padding-top: 10px;
-      padding-bottom: 14px;
-
-      .el-message-box__headerbtn {
-        display: flex !important;
-        flex-direction: row-reverse;
-        justify-content: center;
-        align-items: center;
-        font-size: 10px;
-        line-height: 10px;
-        padding-right: 10px !important;
-
-        i {
-          width: 10px;
-          height: 10px;
-        }
-      }
-
-      .el-message-box__title {
-        font-size: 14px !important;
-        color: #353636;
-        letter-spacing: 0;
-        font-weight: 400;
-      }
-    }
-
-    .el-message-box__content {
-      height: 96px;
-      font-size: 14px;
-      color: #353636;
-      letter-spacing: 0;
-      line-height: 22px;
-      font-weight: 400;
-      padding-top: 9px;
-      padding-right: 20px;
-      padding-left: 21px;
-
-      .el-message-box__message {
-        padding-left: 0 !important;
-        padding-right: 0 !important;
-      }
-    }
-
-    .el-message-box__btns {
-      height: 52px;
-      border-top: 1px solid #eee;
-      box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.07);
-      padding: 13px 1px 12px 0 !important;
-
-      .el-button {
-        font-size: 12px;
-      }
-      .el-button--small {
-        padding: 8px 21px !important;
-        line-height: 12px;
-        font-size: 12px;
-        font-weight: 500;
-        min-height: 28px;
-      }
-
-      .el-button:nth-child(1) {
-        margin-right: 20px;
-        width: 80px;
-        height: 28px;
-        color: #353636;
-      }
-
-      .el-button:nth-child(2) {
-        width: 80px;
-        height: 28px;
-        margin-right: 20px;
-        margin-left: 0 !important;
-        background-color: #2d8cf0;
-        border-color: #2d8cf0;
-      }
-    }
+    --el-switch-on-color: var(--el-color-business);
   }
 }
diff --git a/src/assets/css/components/views/detections/detection-create/detection-history.scss b/src/assets/css/components/views/detections/detection-create/detection-history.scss
new file mode 100644
index 00000000..33b88c34
--- /dev/null
+++ b/src/assets/css/components/views/detections/detection-create/detection-history.scss
@@ -0,0 +1,73 @@
+.history-top-key {
+  width: 396px;
+  height: 520px;
+
+  .el-drawer__body {
+    border: 1px var(--el-border-color-light) solid;
+  }
+
+  .key-header {
+    height: 41px;
+    background: var(--cn-bg-color-lighter);
+    box-shadow: 0 1px 0 0 var(--el-border-color-light);
+    border-radius: 2px 2px 0 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 12px;
+    font-family: NotoSansHans-Medium;
+    font-size: 14px;
+    color: var(--el-text-color-primary);
+    font-weight: 500;
+
+    i {
+      font-size: 12px;
+      color: var(--el-text-color-regular);
+      cursor: pointer;
+    }
+  }
+
+  .key-search {
+    margin-left: 12px;
+    margin-top: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .key-search-icon {
+      font-size: 13px;
+      color: var(--el-color-info);
+    }
+
+    .key-refresh {
+      margin: 0 10px;
+      color: var(--el-color-business);
+      font-size: 14px;
+      height: 28px;
+      line-height: 28px;
+      cursor: pointer;
+    }
+  }
+
+  .key-total {
+    margin: 10px 12px;
+    font-family: NotoSansSChineseRegular;
+    font-size: 14px;
+    color: var(--el-color-info);
+    line-height: 21px;
+    font-weight: 400;
+
+    .key-total-number {
+      color: var(--el-text-color-regular);
+      margin-left: 4px;
+    }
+  }
+
+  .el-table .key-click-row {
+    background: var(--el-border-color-extra-light) !important;
+  }
+
+  .chart-error__setting {
+    line-height: 0;
+  }
+}
diff --git a/src/assets/css/components/views/detections/detection-drawer.scss b/src/assets/css/components/views/detections/detection-drawer.scss
index 3d9eb68c..beb6afbf 100644
--- a/src/assets/css/components/views/detections/detection-drawer.scss
+++ b/src/assets/css/components/views/detections/detection-drawer.scss
@@ -1,11 +1,14 @@
+$text-color-primary: var(--el-text-color-primary);
+
 .detection-drawer {
-  padding: 20px;
-  height: 100%;
+  height: 100vh;
   overflow: scroll;
+  padding: 20px 20px 90px;
 
   .el-drawer {
     width: 440px !important;
   }
+
   .el-collapse-item__content {
     padding-bottom: 0 !important;
   }
@@ -18,7 +21,7 @@
   .detection-drawer-title, .basic-function-value, basic-description-value, .drawer-trigger-minutes {
     font-family: NotoSansSChineseRegular;
     font-size: 14px;
-    color: #717171;
+    color: var(--el-text-color-regular);
     font-weight: 400;
     line-height: 14px;
     display: flex;
@@ -28,7 +31,7 @@
     .drawer-basic-header {
       font-family: NotoSansHans-Black;
       font-size: 16px;
-      color: #353636;
+      color: $text-color-primary;
       font-weight: 900;
       margin-bottom: 20px;
 
@@ -51,37 +54,45 @@
     margin-bottom: 20px;
   }
 
+  .padding-b-0 {
+    padding-bottom: 0;
+  }
+
   .detection-drawer-title {
     margin-bottom: 8px;
+
+    .drawer-title__equal {
+      margin: 0 6px;
+    }
   }
 
   .basic-description-value {
     font-family: NotoSansSChineseRegular;
     font-size: 14px;
-    color: #353636;
+    color: $text-color-primary;
     line-height: 18px;
     font-weight: 400;
   }
 
   .basic-function-value {
-    color: #046ECA;
+    color: var(--el-color-primary);
   }
 
   .drawer-trigger-minutes {
-    color: #353636;
+    color: $text-color-primary;
   }
 
   .detection-drawer-collapse {
-    background: #FFFFFF;
-    border: 1px solid rgba(226, 229, 236, 1);
-    border-radius: 4px;
+    background: var(--el-fill-color-blank);
+    border: 1px solid var(--el-border-color-light);
+    border-radius: var(--el-border-radius-base);
     //box-shadow: 0 1px 0 0 rgba(226, 229, 236, 1);
 
     .el-collapse-item__header {
       height: 32px !important;
-      background-color: #F7F7F7 !important;
+      background-color: var(--cn-bg-color-lighter) !important;
       padding-left: 12px !important;
-      border-radius: 4px 4px 0 0;
+      border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0;
     }
 
     .drawer-collapse-content {
@@ -97,11 +108,19 @@
       .drawer-collapse-trigger {
         font-family: NotoSansSChineseRegular;
         font-size: 14px;
-        color: #353636;
+        color: $text-color-primary;
         line-height: 18px;
         font-weight: 400;
         margin-bottom: 20px;
+
+        .trigger__value {
+          color: var(--el-color-primary);
+        }
       }
     }
   }
+
+  .detection-drawer-collapse__margin {
+    margin: 20px 0;
+  }
 }
diff --git a/src/assets/css/components/views/detections/detection-filter.scss b/src/assets/css/components/views/detections/detection-filter.scss
index 6f83343d..bf6063c3 100644
--- a/src/assets/css/components/views/detections/detection-filter.scss
+++ b/src/assets/css/components/views/detections/detection-filter.scss
@@ -5,18 +5,18 @@
   margin-right: 12px;
   overflow: auto;
   z-index: 1;
-  border: 1px solid rgba(226, 229, 236, 1) !important;
-  border-radius: 4px !important;
+  border: 1px solid var(--el-border-color-light) !important;
+  border-radius: var(--el-border-radius-base) !important;
 
   .filter-case__header {
     padding-left: 8px;
     height: 36px;
     line-height: 36px;
-    color: #666;
+    color: var(--el-text-color-regular);
     font-size: 14px;
-    background: #F7F7F7;
-    box-shadow: 0 1px 0 0 rgba(226,229,236,1);
-    border-radius: 4px 4px 0 0;
+    background: var(--cn-bg-color-lighter);
+    box-shadow: 0 1px 0 0 var(--el-border-color-light);
+    border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0;
   }
 
   .filter__header {
@@ -24,8 +24,7 @@
     line-height: 46px;
     margin: 0 20px;
     font-size: 14px;
-    color: #353636;
-    font-weight: 500;
+    color: var(--el-text-color-primary);
   }
 
   .filter__body {
@@ -47,20 +46,19 @@
         display: flex;
         align-items: center;
         font-size: 14px;
-        color: #353636;
+        color: var(--el-text-color-primary);
         font-weight: 400;
 
         .filter__body-item-left-index {
           width: 16px;
           height: 16px;
           text-align: center;
-          background: #EFF2F5;
+          background: var(--el-bg-color-page);
           border-radius: 2px;
           margin-right: 6px;
-          font-family: NotoSansHans-Black;
           font-size: 9px;
-          color: #96A2B0;
-          font-weight: 900;
+          color: var(--el-color-info);
+          font-weight: bold;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -68,10 +66,8 @@
 
         .filter__body-item-left-label {
           max-width: 180px;
-          font-family: NotoSansSChineseRegular;
           font-size: 14px;
-          color: #353636;
-          font-weight: 400;
+          color: var(--el-text-color-primary);
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
@@ -80,10 +76,8 @@
 
       .filter__body-item-right {
         flex-shrink: 0;
-        font-family: NotoSansSChineseRegular;
         font-size: 12px;
-        color: #717171;
-        font-weight: 400;
+        color: var(--el-text-color-regular);
         margin-right: 10px;
       }
     }
@@ -94,7 +88,7 @@
   width: 18px;
   height: 12px;
   margin-right: 6px;
-  border: 1px solid #E8E8E8;
+  border: 1px solid var(--el-color-info-light-8);
 }
 
 .filter-show-more, .filter-no-show-more {
@@ -102,13 +96,14 @@
   height: 26px;
   line-height: 26px;
   margin-left: 20px;
-  color: #046ECA;
+  color: var(--el-color-primary);
   user-select: none; // 禁止文本选中
   font-size: 12px;
 }
+
 .filter-no-show-more {
   cursor: not-allowed;
-  color: rgba(16, 16, 16, 0.3);
+  color: var(--el-text-color-disabled);
 }
 
 .filter-hr {
@@ -116,32 +111,34 @@
   margin-left: 20px;
   margin-top: 6px;
   height: 1px;
-  background: #EFF2F5;
-  //background: #000;
+  background: var(--el-bg-color-page);
 }
 
 .new-detection-filter-title {
   height: 32px;
   line-height: 32px;
-  background: #F7F7F7;
+  background: var(--cn-bg-color-lighter);
   padding: 0 20px;
-  box-shadow: 0 1px 0 0 rgba(226, 229, 236, 1);
-  border-radius: 4px 4px 0 0;
+  box-shadow: 0 1px 0 0 var(--el-border-color-light);
+  border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0;
 }
+
 .new-detection-filter-content {
   padding: 20px;
+
   .el-checkbox {
     display: inline-block !important;
     height: auto !important;
   }
+
   .new-filter-content-title {
-    font-family: NotoSansHans-Medium;
     font-size: 14px;
     line-height: 14px;
     margin-bottom: 10px;
-    color: #353636;
+    color: var(--el-text-color-primary);
     font-weight: 500;
   }
+
   .new-filter-content-content {
     display: flex;
     flex-direction: column;
@@ -150,49 +147,19 @@
       line-height: 16px;
       margin-bottom: 13.6px;
       font-size: 14px;
-      color: #353636;
-      font-weight: 400;
+      color: var(--el-text-color-primary);
       display: flex !important;
 
-      .el-checkbox__inner {
-        width: 16px !important;
-        height: 16px !important;
-        text-align: center !important;
-        line-height: 16px !important;
-      }
-
-      .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-        border-color: #38ACD2;
-        background: #38ACD2;
-        border-radius: 2px;
-      }
-      .el-checkbox__input.is-indeterminate .el-checkbox__inner:before {
-        background: #FFFFFF;
-        border-radius: 1px;
-      }
-      .el-checkbox__inner::after {
-        top: 2px;
-        left: 5px;
-      }
-      .el-checkbox__input.is-checked {
-        .el-checkbox__inner {
-          border-color: #38ACD2;
-          background: #38ACD2;
-          border-radius: 2px;
-        }
-      }
-      .el-checkbox__input.is-focus {
-        .el-checkbox__inner {
-          border-color: #38ACD2;
-        }
-      }
-
       .el-checkbox__label {
         font-size: 14px;
-        color: #353636;
-        font-weight: 400;
+        color: var(--el-text-color-primary);
         padding-left: 10px !important;
       }
     }
+
+    .content__display {
+      display: flex;
+      flex-direction: column;
+    }
   }
 }
diff --git a/src/assets/css/components/views/detections/detection-list/detection-list.scss b/src/assets/css/components/views/detections/detection-list/detection-list.scss
index e19a8e86..f707e33e 100644
--- a/src/assets/css/components/views/detections/detection-list/detection-list.scss
+++ b/src/assets/css/components/views/detections/detection-list/detection-list.scss
@@ -4,21 +4,6 @@
   flex: 1;
   position: relative;
 
-  .detection__loading {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    z-index: 1;
-
-    i {
-      position: absolute;
-      left: calc(50% - 15px);
-      top: calc(50% - 15px);
-      font-size: 30px;
-      color: #aaa;
-    }
-  }
-
   .detection-list__content {
     height: 100%;
     width: 100%;
@@ -34,6 +19,7 @@
       height: 100%;
       overflow: auto;
     }
+
     .detection-list--list {
       display: flex;
       flex-direction: column;
@@ -43,7 +29,7 @@
       .cn-detection__shadow, .new-cn-detection__shadow {
         position: fixed;
         height: 100vh;
-        width:100vw;
+        width: 100vw;
         left: 0;
         top: 0;
         z-index: 1;
@@ -56,8 +42,7 @@
     }
   }
 
-
-  .detection__pagination{
+  .detection__pagination {
     position: absolute;
     bottom: 9px;
     height: 40px;
diff --git a/src/assets/css/components/views/detections/detection-list/row.scss b/src/assets/css/components/views/detections/detection-list/row.scss
index f992811b..4427d85e 100644
--- a/src/assets/css/components/views/detections/detection-list/row.scss
+++ b/src/assets/css/components/views/detections/detection-list/row.scss
@@ -1,3 +1,5 @@
+$bg-color-page: var(--el-bg-color-page);
+
 .cn-detection--list {
   display: flex;
 
@@ -8,7 +10,7 @@
     align-items: flex-start;
     margin-bottom: 1px;
     //padding-top: 18px;
-    background-color: #EFF2F5;
+    background-color: $bg-color-page;
 
     .cn-detection__collapse-block {
       min-height: 66px;
@@ -21,7 +23,7 @@
 
     span {
       transform: rotate(0);
-      transition: all linear .2s;
+      transition: all linear var(--el-transition-duration-fast);
       padding-top: 0;
 
       &.reg-down {
@@ -35,7 +37,7 @@
     }
 
     .cn-icon-arrow-right {
-      color: #ADBCCA;
+      color: var(--el-text-color-placeholder);
       font-size: 12px;
     }
   }
@@ -46,7 +48,7 @@
     flex-wrap: wrap;
     padding: 9px 0;
     margin-bottom: 1px;
-    background-color: white;
+    background-color: var(--el-fill-color-blank);
 
     .cn-detection__icon {
       margin-left: 13px;
@@ -75,17 +77,18 @@
         flex-wrap: nowrap;
         font-size: 16px;
         padding-bottom: 3px;
-        color: #333333;
+        color: var(--el-text-color-primary);
         align-items: center;
 
         i {
-          color: #7b8fa2;
+          //color: #7b8fa2;
+          color: var(--el-color-info);
           margin-right: 5px;
           font-size: 18px;
         }
 
         .line {
-          color: #da5656;
+          color: var(--el-color-error);
           margin-left: 12px;
           font-size: xx-small;
           font-weight: bold;
@@ -95,17 +98,17 @@
         .circle {
           width: 10px;
           height: 10px;
-          border: 2px solid #da5656;
+          border: 2px solid var(--el-color-error);
           border-radius: 10px;
           margin-top: 1px;
           margin-right: 12px;
         }
 
         .domain {
-          background: #EFF2F5;
+          background: $bg-color-page;
           border-radius: 2px;
           font-size: 14px;
-          color: #333333;
+          color: var(--el-text-color-primary);
           letter-spacing: 0;
           line-height: 14px;
           margin-left: 5px;
@@ -113,6 +116,7 @@
           padding: 0 2px;
           font-weight: 500;
         }
+
         .detection-event-severity-color-block {
           width: 5px;
           height: 20px;
@@ -120,16 +124,17 @@
           margin-left: -16px;
           margin-right: 12px;
         }
+
         .detection-event-severity-block {
           height: 20px;
           line-height: 20px;
           font-size: 12px;
-          color: #046EC9;
+          color: var(--el-color-primary);
           font-weight: 500;
           padding: 0 10px;
-          background: rgba(56,172,210,0.10);
-          border: 1px solid #ADC7DB;
-          box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+          background: rgba(56, 172, 210, 0.10);
+          border: 1px solid var(--el-color-primary-light-7);
+          box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
           border-radius: 3px;
           margin-right: 10px;
         }
@@ -156,7 +161,7 @@
 
               i {
                 padding-right: 5px;
-                color: #8FA1BE;
+                color: var(--el-color-info);
                 font-size: 14px;
               }
 
@@ -165,16 +170,29 @@
               }
 
               span:first-of-type {
-                color: #999;
+                color: var(--el-color-info);
               }
 
               span:last-of-type {
-                color: #666;
+                color: var(--el-text-color-regular);
+              }
+
+              .detection-row-active {
+                height: 20px;
+                line-height: 20px;
+                padding: 0 7px;
+                background: var(--el-color-success-light-8);
+                border-radius: 2px;
+                font-family: NotoSansHans-Medium;
+                font-size: 12px;
+                color: var(--el-color-success);
+                font-weight: 500;
               }
             }
+
             .basic-info__item1 {
               span: {
-                color: #666;
+                color: var(--el-text-color-regular);
               }
             }
           }
@@ -183,7 +201,7 @@
             flex-shrink: 0;
             padding: 0 30px;
             font-size: 12px;
-            color: #3976CB;
+            color: var(--el-color-primary);
 
             &:hover {
               cursor: pointer;
@@ -198,32 +216,37 @@
       padding: 0 10px;
 
       .el-divider {
-        background-color: #EFF2F5;
+        background-color: $bg-color-page;
       }
     }
   }
 }
 
-.security.cn-detection--list,.service.cn-detection--list {
+.security.cn-detection--list, .service.cn-detection--list {
   height: 100%;
   flex-direction: column;
   justify-content: space-between;
+
   .cn-detection__case {
-    background: #FFFFFF;
-    border: 1px solid #E7EAED;
+    background: var(--el-fill-color-blank);
+    border: 1px solid var(--el-border-color-light);
     border-radius: 2px;
     margin-bottom: 10px;
   }
+
   .cn-detection__case {
     padding: 10px 0;
     flex: unset;
   }
+
   .cn-detection__header {
     margin-bottom: 2px;
   }
+
   .cn-detection-table {
     overflow: auto;
   }
+
   .cn-detection__case-severity {
     display: flex;
     width: 38px;
@@ -233,42 +256,52 @@
     margin-right: 20px;
     margin-left: 29px;
     line-height: 34px;
+
     i {
       font-size: 40px;
     }
   }
+
   .el-pagination__jump {
     margin-left: 0 !important;
   }
+
   .cn-detection__footer {
-    background: #FFFFFF;
+    background: var(--el-fill-color-blank);
     position: relative;
-    box-shadow: 0 0 4px 0 rgba(0,0,0,0.06);
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.06);
+
     .el-pagination__total {
       position: absolute;
       left: 0;
     }
   }
+
   .domain.cn-detection-domain {
     height: 20px;
     line-height: 20px !important;
     padding: 0 4px;
     font-style: italic;
   }
+
   .critical {
-    color: #D84C4C !important;
+    color: var(--cn-color-critical) !important;
   }
+
   .high {
-    color: #FF9A79 !important;
+    color: var(--cn-color-high) !important;
   }
+
   .info {
-    color: #D1BD50 !important;
+    color: var(--cn-color-info) !important;
   }
+
   .medium {
-    color: #FFB65A !important;
+    color: var(--cn-color-medium) !important;
   }
+
   .low {
-    color: #FFD82D !important;
+    color: var(--cn-color-low) !important;
   }
 }
 
diff --git a/src/assets/css/components/views/detections/detection-overview.scss b/src/assets/css/components/views/detections/detection-overview.scss
index 6c5756d8..df3be2a7 100644
--- a/src/assets/css/components/views/detections/detection-overview.scss
+++ b/src/assets/css/components/views/detections/detection-overview.scss
@@ -1,3 +1,6 @@
+$color-primary: var(--el-color-primary);
+$color-regular: var(--el-text-color-regular);
+
 .detection-detail-overview {
   display: flex;
   position: relative;
@@ -23,7 +26,7 @@
 
     .overview__title {
       padding: 10px 0;
-      color: #333;
+      color: var(--el-text-color-primary);
       font-weight: bold;
       font-size: 14px;
 
@@ -42,9 +45,10 @@
       word-break: break-all;
 
       .row__label {
+        width: 176px;
         padding-right: 20px;
         min-width: 100px;
-        color: #6B717B;
+        color: $color-regular;
         line-height: 14px;
         word-break: normal;
       }
@@ -57,15 +61,14 @@
       .row__content--metric {
         display: flex;
         flex-wrap: nowrap;
-        color: #666666;
+        color: $color-regular;
         font-size:14px;
         font-weight: 400;
       }
 
       .row__content, .row__content1 {
         display: flex;
-        //color: #3976CB;
-        color: #046ECA;
+        color: $color-primary;
         font-weight: 500;
         font-size: 14px;
         align-items: center;
@@ -75,28 +78,28 @@
         &.row__content--link {
           font-style: italic;
           text-decoration: underline;
-          color: #1890FF;
+          color: $color-primary;
           cursor: pointer;
         }
         .row__content--link{
           font-style: italic;
           text-decoration: underline;
-          color: #1890FF;
+          color: $color-primary;
           cursor: pointer;
         }
         span{
           font-style: italic;
-          color: #046ECA;
+          color: $color-primary;
         }
         .row__content--span {
           font-style: italic;
-          color: #1890FF;
+          color: $color-primary;
         }
 
         .row__content__icon {
           font-size: 14px;
           margin-right: 5px;
-          color: #1890FF;
+          color: $color-primary;
         }
 
         .row__content__svg {
@@ -104,6 +107,10 @@
           margin-right: 7px;
         }
       }
+      .row__content {
+        width: calc(100% - 176px);
+        padding-right: 50px;
+      }
       .row__content1 {
         display: block;
         padding-right: 50px;
@@ -115,7 +122,7 @@
   display: flex;
   flex-wrap: wrap;
   padding: 17px;
-  background-color: #F9F9F9;
+  background-color: var(--el-fill-color-lighter);
 
   .row-timeline {
     flex: 0 0 110px;
@@ -128,7 +135,7 @@
       align-items: center;
       flex-basis: 16px;
       font-size: 12px;
-      color: #666666;
+      color: $color-regular;
     }
     .row-timeline__line {
       display: flex;
@@ -136,7 +143,7 @@
       align-items: center;
       height: 1px;
       margin: 5px 0;
-      background-color: #CBD0D5;
+      background-color: var(--el-border-color-darker);
       overflow: visible;
 
       .line-point-larger {
@@ -146,18 +153,19 @@
         height: 12px;
         width: 12px;
         border-radius: 50%;
-        background-color: #F9F9F9;
-        border: 1px solid #666;
+        background-color: var(--el-fill-color-lighter);
+        border: 1px solid $color-regular;
 
         .line-point {
-          background-color: #666;
+          background-color: $color-regular;
         }
       }
       .line-point {
         height: 6px;
         width: 6px;
         border-radius: 50%;
-        background-color: #A0B5CA;
+        //background-color: #A0B5CA;
+        background-color: var(--el-text-color-placeholder);
       }
     }
     .row-timeline__card {
@@ -167,7 +175,7 @@
         display: flex;
         flex-direction: column;
         padding: 10px;
-        background-color: #EFF2F5;
+        background-color: var(--el-bg-color-page);
         border-radius: 2px;
 
         .timeline__severity {
@@ -176,19 +184,19 @@
           margin-bottom: 10px;
 
           &.timeline__severity--critical i {
-            color: #D84C4C;
+            color: var(--cn-color-critical);
           }
           &.timeline__severity--high i {
-            color: #FE845D;
+            color: var(--cn-color-high);
           }
           &.timeline__severity--medium i {
-            color: #FEB65A;
+            color: var(--cn-color-medium);
           }
           &.timeline__severity--low i {
-            color: #F6C738;
+            color: var(--cn-color-low);
           }
           &.timeline__severity--info i {
-            color: #D1BD50;
+            color: var(--cn-color-info);
           }
           i {
             font-size: 16px;
@@ -197,20 +205,20 @@
             padding-left: 5px;
             font-size: 14px;
             //color: #3976CB;
-            color: #046ECA;
+            color: $color-primary;
             font-weight: 600 !important;
           }
         }
         .timeline__security-type {
           font-size: 12px;
-          color: #046ECA;
+          color: $color-primary;
           margin-bottom: 10px;
           font-weight: 500;
           height: 36px;
         }
         .timeline__start-time {
           font-size: 12px;
-          color: #666666;
+          color: $color-regular;
         }
       }
     }
@@ -223,11 +231,11 @@
         display: flex;
         align-items: center;
         padding-left: 5px;
-        color: #666;
+        color: $color-regular;
         font-size: 12px;
 
         &.detection-ip__current {
-          color: #D84C4C;
+          color: var(--cn-color-critical);
         }
         i {
           font-size: 12px;
@@ -247,13 +255,13 @@
   height: 16px;
   font-size: 12px;
   font-weight: 400;
-  color: #fff;
+  color: var(--el-color-white);
   border-radius: 2px;
 }
 
 .performance-event-remark {
   font-family: NotoSansSChineseRegular;
   font-size: 12px;
-  color: #353636;
+  color: var(--el-text-color-primary);
   font-weight: 400;
 }
diff --git a/src/assets/css/components/views/detections/detection-table.scss b/src/assets/css/components/views/detections/detection-table.scss
index 9279c4e8..691e1f95 100644
--- a/src/assets/css/components/views/detections/detection-table.scss
+++ b/src/assets/css/components/views/detections/detection-table.scss
@@ -1,18 +1,24 @@
+$color-primary: var(--el-color-primary);
+
 .detection-table {
+  position: relative;
   .el-table td, .el-table th {
     padding: 12px 0;
   }
+
   .el-table th > .cell, .el-table .cell {
     padding-left: 0 !important;
     padding-right: 0 !important;
     line-height: 16px;
   }
+
   .el-table--enable-row-transition .el-table__body td, .el-table--border th {
     border-left: 0 !important;
     border-right: 0 !important;
     font-size: 12px;
-    color: #353636;
+    color: var(--el-text-color-primary);
   }
+
   .el-table--border th {
     font-weight: 500;
     padding: 0;
@@ -21,7 +27,7 @@
   .el-table__header-wrapper {
     height: 32px !important;
     line-height: 32px !important;
-    border-bottom: 1px solid #EBEEF5;
+    border-bottom: 1px solid var(--el-border-color-lighter);
   }
 
   .el-table__body td {
@@ -32,15 +38,17 @@
     height: 32px !important;
   }
 }
+
 .policy-library-tip {
   max-width: 180px;
   padding: 4px;
 
   .tip__header {
-    color: #353636;
+    color: var(--el-text-color-primary);
     font-weight: bold;
     font-size: 14px;
   }
+
   .tip__tags {
     display: flex;
     margin-top: 8px;
@@ -48,21 +56,23 @@
     .tip__tag {
       margin-right: 10px;
       padding: 2px 10px;
-      background-color: #EBF7FA;
-      color: #046ECA;
-      box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+      background-color: var(--el-color-primary-light-9);
+      color: $color-primary;
+      box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
       border-radius: 12px;
     }
   }
+
   .tip__description {
     margin-top: 14px;
-    color: #666;
+    color: var(--el-text-color-regular);
 
     &.tip__description--non {
-      color: #999;
+      color: var(--el-color-info);
     }
   }
 }
+
 .detection-tag-blue, .detection-tag-red, .detection-tag-gray, .detection-tag-status0, .detection-tag-status1 {
   display: inline-block;
   border-radius: 10px;
@@ -76,35 +86,35 @@
 .detection-tag-blue {
   background: rgba(56, 172, 210, 0.10);
   box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
-  color: #046ECA;
+  color: $color-primary;
 }
 
 .detection-tag-red {
   background: rgba(226, 97, 84, 0.12);
-  color: #E26154;
+  color: var(--el-color-danger);
 }
 
 .detection-tag-gray {
   background: rgba(113, 113, 113, 0.12);
-  color: #717171;
+  color: var(--el-text-color-regular);
 }
 
 .detection-tag-status0 {
   font-weight: 500;
   background: rgba(113, 113, 113, 0.12);
-  color: #717171;
+  color: var(--el-text-color-regular);
   padding: 0 10px;
 }
 
 .detection-tag-status1 {
   font-weight: 500;
   background: rgba(126, 159, 84, 0.12);
-  color: #7E9F54;
+  color: var(--el-color-success);
   padding: 0 10px;
 }
 
 .detection-table-library {
   font-size: 12px;
-  color: #046ECA;
+  color: $color-primary;
   font-weight: 400;
 }
diff --git a/src/assets/css/components/views/detections/detection-tools.scss b/src/assets/css/components/views/detections/detection-tools.scss
index a5e97b10..4baa2373 100644
--- a/src/assets/css/components/views/detections/detection-tools.scss
+++ b/src/assets/css/components/views/detections/detection-tools.scss
@@ -1,103 +1,26 @@
+$color-white: var(--el-color-white);
+$color-create: var(el-color-business-dark-2);
+
 .top-tools__left {
   display: flex;
   align-items: center;
   flex-direction: row;
 
-  .top-tool-btn {
-    cursor: pointer;
+  .business-button {
     height: 28px;
-    width: 28px;
-    border: 1px solid #DEDEDE;
-    outline: none;
-    border-radius: 2px;
-    background-color: #F9F9F9;
-    transition: background-color linear .1s;
+    width: 72px;
     font-size: 12px;
-    font-weight: 500;
-    //font-family: $fontFamily !important;
+
     i {
       font-size: 14px;
-      color: #575757;
       margin-right: 4px;
     }
   }
 
-  .top-tool-btn:disabled {
-    cursor: not-allowed;
-    opacity: 0.66;
-
-    i {
-
-    }
-  }
-
-  .top-tool-btn:hover:not(.cn-btn-disabled) {
-    border: 1px solid #DEDEDE;
-    background-color: #EBF1F4;
-  }
-
-  .top-tool-btn:focus:not(.cn-btn-disabled), .top-tool-btn.is-focus {
-    background-color: #E0E7EA;
-    border: 1px solid #DEDEDE;
-
-    i {
-      color: #575757;
-    }
-  }
-
-  .top-tool-btn--delete.top-tool-btn:focus:not(.cn-btn-disabled) {
-    background-color: #EBF1F4;
-    border-color: #FFC4B9;
-
-    i {
-      color: #F0745A;
-    }
-  }
-
-  .top-tool-btn--create {
-    background-color: #38ACD2 !important;
-    border-color: #2E88A6 !important;
-    color: #FFFFFF;
-
-    i {
-      color: #FFFFFF;
-    }
-  }
-
-  .top-tool-btn--create:hover {
-    background-color: #57B8D9 !important;
-    border-color: #2E88A6 !important;
-    color: #FFFFFF;
-
-    i {
-      color: #FFFFFF;
-    }
-  }
-
-  .top-tool-btn--create:focus {
-    background-color: #31A5CD !important;
-    border-color: #2E88A6 !important;
-    color: #FFFFFF !important;
-
-    i {
-      color: #FFFFFF !important;
-    }
-  }
-
-  .top-tool-btn--create:disabled {
-    opacity: 0.66;
-    background-color: #38ACD2 !important;
-    border-color: #2E88A6 !important;
-    color: #FFFFFF;
-
-    i {
-      color: #FFFFFF;
-    }
-  }
-
   .top-tool-search {
     display: flex;
     width: 242px; //calc(100% - 256px);
+
     .el-input--small {
       line-height: 27px;
 
@@ -106,20 +29,20 @@
         border-radius: 2px 0 0 2px;
       }
     }
-
-    .top-tool-btn {
+    .top-tool-btn--search {
+      width: 28px !important;
+      height: 28px !important;
+      padding: unset !important;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 0 var(--el-border-radius-small) var(--el-border-radius-small) 0 !important;
       border-left: none;
-      border-radius: 0 2px 2px 0 !important;
-    }
 
-    .top-tool-btn--search:hover {
-      border-left: none !important;
-      border-radius: 0 2px 2px 0 !important;
-    }
-
-    .top-tool-btn--search:focus {
-      border-left: none !important;
-      border-radius: 0 2px 2px 0 !important;
+      i {
+        font-size: 14px;
+        margin-right: unset !important;
+      }
     }
   }
 
@@ -127,8 +50,13 @@
     display: flex;
     width: 100%;
 
+    .search__input {
+      height: 28px !important;
+    }
+
     .el-input--small {
       line-height: 27px;
+
       .el-input__wrapper {
         height: 28px !important;
         border-radius: 2px 0 0 2px !important;
diff --git a/src/assets/css/components/views/detections/detections.scss b/src/assets/css/components/views/detections/detections.scss
index 4d526da3..fdd3be0a 100644
--- a/src/assets/css/components/views/detections/detections.scss
+++ b/src/assets/css/components/views/detections/detections.scss
@@ -1,21 +1,74 @@
 .detection__event-severity-bar {
   flex: 0 0 175px;
-  background-color: white;
+  background-color: var(--el-fill-color-blank);
   width: 100%;
   margin-bottom: 10px;
 }
+
 .detections {
-  .entity__pagination{
+  .entity__pagination {
     bottom: 9px;
     height: 40px;
     width: 100%;
   }
+
   .detections__container {
     display: flex;
     flex-direction: column;
     padding-bottom: 20px;
   }
 }
+
+.detection {
+  padding: 20px;
+  height: 100%;
+  overflow: auto;
+
+  .detection-title {
+    line-height: 24px;
+    font-size: 24px;
+    color: var(--el-text-color-primary);
+    font-weight: bold;
+    display: flex;
+    flex-direction: column;
+
+    .detection-title-label {
+      font-size: 12px;
+      color: var(--el-text-color-regular);
+      letter-spacing: 0;
+      line-height: 18px;
+      margin-top: 5px;
+    }
+  }
+
+  .detection-content {
+    margin-top: 15px;
+    width: 100%;
+    height: calc(100% - 96px);
+    display: flex;
+
+    .detection-filter {
+      width: 320px;
+      height: calc(100% + 34px);
+      background: var(--el-fill-color-blank);
+      border: 1px solid var(--el-border-color-light);
+      border-radius: var(--el-border-radius-base);
+      margin-right: 20px;
+    }
+
+    .detection-block {
+      width: calc(100% - 340px);
+
+      .detection-table {
+        width: 100%;
+        height: calc(100% - 44px);
+        border-radius: var(--el-border-radius-base);
+        margin-top: 12px;
+      }
+    }
+  }
+}
+
 .detection__list {
   display: flex;
   flex-direction: column;
@@ -26,19 +79,19 @@
     flex: 0 0 192px;
     margin-bottom: 10px;
     width: 100%;
-    background-color: white;
+    background-color: var(--el-bg-color);
 
     .chart-header {
       display: flex;
-      justify-content:space-between;
-      align-items:center;
+      justify-content: space-between;
+      align-items: center;
       padding: 10px 20px 10px 0;
       flex: 0 0 40px;
 
       font-size: 14px;
-      color: $--color-text-primary;
-      transition: all 0.2s;
-      border-bottom: 1px solid #E7EAED;
+      color: var(--el-text-color-primary);
+      transition: all var(--el-transition-duration-fast);
+      border-bottom: 1px solid var(--el-border-color-light);
 
       .chart-header__title {
         max-width: calc(100% - 100px);
@@ -51,26 +104,30 @@
     .chart-content {
       height: 147px;
     }
+
     .statistics__severity {
       width: 33%;
-      margin-left:15px;
-      margin-right:15px;
+      margin-left: 15px;
+      margin-right: 15px;
     }
+
     .statistics__category {
       width: 34%;
-      margin-left:15px;
-      margin-right:15px;
+      margin-left: 15px;
+      margin-right: 15px;
     }
+
     .statistics__active-attack {
       width: 33%;
-      margin-left:15px;
-      margin-right:15px;
+      margin-left: 15px;
+      margin-right: 15px;
     }
   }
 }
+
 .filter__more {
   padding-top: 5px;
   font-size: 14px;
-  color: $--color-primary;
+  color: var(--el-color-business);
   cursor: pointer;
 }
diff --git a/src/assets/css/components/views/entityExplorer/entity-detail.scss b/src/assets/css/components/views/entityExplorer/entity-detail.scss
index b38eb36f..c3061f3b 100644
--- a/src/assets/css/components/views/entityExplorer/entity-detail.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-detail.scss
@@ -15,158 +15,59 @@
       padding: 0 6px;
       font-size: 12px;
     }
-    $normal-color: #778391;
-    $normal-light-color: #F7F8F9;
-    $negative-color: #E26154;
+
+    $normal-color: #778391; // 颜色暂时保留
+    $normal-light-color: var(--el-fill-color-light);
+    $negative-color: var(--el-color-danger);
     $negative-light-color: #FEF6F5;
-    $positive-color: #749F4D;
+    $positive-color: var(--el-color-success);
     $positive-light-color: #F7FAF5;
+    $color-white: var(--el-color-white);
+
     &.entity-tag--level-one-normal {
       border-color: $normal-color;
-      color: white;
+      color: $color-white;
       background-color: $normal-color;
     }
+
     &.entity-tag--level-one-negative {
       border-color: $negative-color;
-      color: white;
+      color: $color-white;
       background-color: $negative-color;
     }
+
     &.entity-tag--level-one-positive {
       border-color: $positive-color;
-      color: white;
+      color: $color-white;
       background-color: $positive-color;
     }
+
     &.entity-tag--level-two-normal {
       border-color: $normal-color;
       color: $normal-color;
       background-color: $normal-light-color;
     }
+
     &.entity-tag--level-two-negative {
       border-color: $negative-color;
       color: $negative-color;
       background-color: $negative-light-color;
     }
+
     &.entity-tag--level-two-positive {
       border-color: $positive-color;
       color: $positive-color;
       background-color: $positive-light-color;
     }
+
     &.entity-tag--level-two-negative-no-background {
       border-color: $negative-color;
       color: $negative-color;
     }
+
     &.entity-tag--level-two-positive-no-background {
       border-color: $positive-color;
       color: $positive-color;
     }
   }
 }
-/*
-.entity-detail.cn-home {
-  .panel-chart {
-    width: 100%;
-  }
-
-  flex-direction: column;
-
-  .entity-detail__header {
-    flex: 0 0 80px;
-    display: flex;
-    align-items: center;
-
-    .cn-entity__name {
-      font-size: 20px;
-      color: #333333;
-      font-weight: bold;
-    }
-    .cn-entity__icon {
-      margin-left: 26px;
-      margin-right: 10px;
-      overflow: hidden;
-      display: flex;
-      justify-content: center;
-      justify-items: center;
-      align-items: center;
-      width: 52px;
-      height: 52px;
-      border-radius: 50%;
-      background-color: #F3F7FA;
-
-      i {
-        font-size: 26px;
-        color: #4E84B4;
-      }
-    }
-  }
-  &>.entity-detail__body {
-    width: 100%;
-    height: calc(100% - 52px);
-    display: flex;
-    flex-direction: row;
-
-    .cn-panel2 .chart-list {
-      .vue-grid-layout .vue-grid-item {
-        .panel-chart-group.panel-chart {
-          .panel-chart {
-            border: none;
-            box-shadow: none;
-            .chart-header {
-              border: none;
-            }
-          }
-        }
-      }
-    }
-
-    .entity-detail__menu {
-      flex: 0 0 240px;
-      display: flex;
-      flex-direction: column;
-      padding-top: 23px;
-      border-top: 1px solid $--content-right-background-color;
-
-      .menu-item {
-        display: flex;
-        align-items: center;
-        padding: 7px 0 7px 30px;
-        font-size: 14px;
-        color: #666666;
-
-        span {
-          padding-left: 10px;
-          cursor: pointer;
-        }
-
-        &.menu-item--active {
-          color: #1890FF;
-
-          span {
-            border-left: 2px solid #1890FF;
-          }
-        }
-      }
-    }
-    .entity-detail__content {
-      height: calc(100% - 28px);
-      flex: 1;
-      padding: 10px;
-      overflow: auto;
-      //background-color: $--content-right-background-color;
-      background-color: rgb(239, 242, 245);
-
-      &>.cn-entity-detail .entity-detail__body>.cn-panel2 {
-        .panel-chart {
-          .chart-header.panel-chart-block {
-            border: none;
-          }
-        }
-        .panel-chart-table.panel-chart {
-          .cn-chart {
-            height: calc(100% - 47px) !important;
-          }
-        }
-      }
-    }
-  }
-}
-*/
diff --git a/src/assets/css/components/views/entityExplorer/entity-explorer.scss b/src/assets/css/components/views/entityExplorer/entity-explorer.scss
index dfaeaa6d..afc19abf 100644
--- a/src/assets/css/components/views/entityExplorer/entity-explorer.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-explorer.scss
@@ -1,13 +1,14 @@
 .entity-explorer {
   display: flex;
   flex-direction: column;
-  background-color: white;
+  background-color: var(--el-fill-color-blank);
   margin: 20px;
   height: calc(100% - 40px) !important;
   justify-content: center;
-  transition: all linear .2s;
+  transition: all linear var(--el-transition-duration-fast);
+  $text-color-primary: var(--el-text-color-primary);
 
-  .entity__loading {
+  /* .entity__loading {
     position: absolute;
     height: 100%;
     width: 100%;
@@ -20,7 +21,7 @@
       font-size: 30px;
       color: #aaa;
     }
-  }
+  } */
   &.entity-explorer--show-list {
     background-color: unset;
     justify-content: flex-start;
@@ -32,103 +33,146 @@
     align-items: center;
     padding-bottom: 18px;
 
-    &>div {
+    & > div {
       padding: 0 0 0 10px;
     }
-    .el-button--small{
+
+    .el-button--small {
       padding: 4px 6px !important;
       min-height: 28px !important;
+
       &.active i {
-        color: $--color-primary;
+        color: var(--el-color-primary);
       }
+
       i {
         font-size: 14px;
       }
     }
   }
+
   .explorer-entity-top-tools {
     width: 100%;
   }
+
   .explorer-detection-top-tools, .explorer-entity-top-tools {
     display: flex;
     justify-content: space-between;
   }
+
   .explorer-top-tools-new {
     display: flex;
     justify-content: space-between;
+    margin: 2px 0;
   }
+
   .explorer-top-tools-title {
     font-size: 24px;
     line-height: 24px;
     font-weight: 900;
-    color: #353636;
+    color: $text-color-primary;
   }
+
+  .tools-title__margin {
+    padding: 0;
+    margin-left: -10px;
+  }
+
   .explorer-top-tools-block {
     height: 28px;
     line-height: 28px;
-    background: #F5F8FA;
+    background: var(--el-fill-color-light);
     font-size: 14px;
-    color: #353636;
+    color: $text-color-primary;
     font-weight: 500;
     padding: 0 10px;
     margin-right: 20px;
-    border: 1px solid #E2E5EC;
+    border: 1px solid var(--el-border-color-light);
     border-radius: 2px;
     cursor: pointer;
   }
+
   .detection-icon-setting {
     margin-right: 10px;
     font-size: 14px;
   }
+
   .detection-border {
-    border: 1px solid #E2E5EC;
-    border-radius: 4px;
+    border: 1px solid var(--el-border-color-light);
+    border-radius: var(--el-border-radius-base);
   }
+
   .explorer-result {
     margin-top: 10px;
     margin-bottom: 18px;
     font-size: 14px;
-    color: #353636;
+    color: $text-color-primary;
     font-weight: 400;
     height: 20.8px;
     line-height: 20.8px;
 
     .entity-hide-entity {
       margin-left: 20px;
+
       .el-checkbox__label {
         padding-left: 6px;
       }
+
+      .margin-l__10 {
+        margin-left: -10px;
+      }
+    }
+
+    .explorer-result-loading {
+      width: 240px;
     }
   }
+
+  .explorer-content {
+    display: flex;
+    flex-direction: row;
+    padding-bottom: 20px;
+  }
+
   .explorer-container, .explorer-container-new {
     display: flex;
     overflow: visible; /*overflow: hidden;*/
     height: calc(100% - 120px);
     position: relative;
   }
+
   .explorer-container-new {
+    width: calc(100% - 340px);
     height: calc(100% - 62px);
     flex-direction: column;
-    width: calc(100% - 340px);
+
+    .explorer-list {
+      display: flex;
+      flex-direction: column;
+      height: calc(100% - 42px);
+    }
   }
+
   .explorer-foot {
     display: flex;
     justify-content: center;
     align-items: flex-start;
     height: 17vh;
 
-    &>div {
+    & > div {
       width: 100%;
       max-width: 1200px;
       display: flex;
       justify-content: space-between;
       align-items: center;
     }
+
     .el-divider {
       width: 2px;
       height: 40px;
-      background-color: #cecece;
+      background-color: var(--el-color-info-light-5);
     }
+
     .entity-overview {
       display: flex;
 
@@ -140,22 +184,26 @@
 
         .overview-left-span {
           font-size: 16px;
-          color: #666666;
+          color: var(--el-text-color-regular);
         }
+
         .overview-left-loading {
           display: inline-block;
           position: relative;
+
           .overview-left-loading-span {
             font-family: NotoSansHans-Medium;
             font-size: 18px;
-            color: #575757;
+            color: var(--el-text-color-regular);
             font-weight: 500;
           }
+
           .chart__loading i.el-icon-loading {
             top: calc(50% - 12px);
           }
         }
       }
+
       .overview-right {
         display: flex;
         flex-direction: column;
@@ -167,13 +215,15 @@
           height: 18px;
           line-height: 18px;
           align-items: center;
-          color: #666666;
+          color: var(--el-text-color-regular);
 
           .right-label-loading {
             position: relative;
+
             .chart__loading {
               width: auto;
             }
+
             .chart__loading i.el-icon-loading {
               padding: 0;
               top: calc(50% - 8px);
@@ -184,46 +234,51 @@
           .right-label {
             width: 55px;
             font-size: 14px;
-            color: #666666;
+            color: var(--el-text-color-regular);
           }
+
           .right-value {
             font-size: 14px;
-            color: #333333;
+            color: var(--el-text-color-primary);
             font-weight: bold;
           }
+
           .right-value-block {
             font-family: NotoSansHans-Medium;
             font-size: 14px;
-            color: #353636;
+            color: $text-color-primary;
             font-weight: 600;
 
             .last-hour {
               font-family: NotoSansSChineseRegular;
               font-size: 12px;
-              color: #717171;
+              color: var(--el-text-color-regular);
               font-weight: 400;
             }
           }
+
           i {
             padding-right: 4px;
             font-size: 19px;
           }
-          .cn-icon-increase {
+
+          /* .cn-icon-increase {
             color: #23BF9A;
-          }
+          } */
           .cn-icon-active {
-            color: #35ADDA;
+            color: var(--el-color-business);
           }
+
           .entity-explorer-total__icon {
             width: 18px;
             height: 18px;
             line-height: 18px;
             padding-left: 3px;
-            background-color: #04A6AB;
-            color: #fff;
+            background-color: #04A6AB; // todo 保留原颜色
+            color: var(--el-color-white);
             border-radius: 50%;
             font-size: 12px;
-            font-weight: 500;
+            //font-weight: 500;
             margin-right: 4px;
             margin-left: 1px;
           }
diff --git a/src/assets/css/components/views/entityExplorer/entity-filter.scss b/src/assets/css/components/views/entityExplorer/entity-filter.scss
index 9b236b24..a26ae291 100644
--- a/src/assets/css/components/views/entityExplorer/entity-filter.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-filter.scss
@@ -5,26 +5,27 @@
   margin-right: 12px;
   overflow: auto;
   z-index: 1;
-  border: 1px solid rgba(226, 229, 236, 1) !important;
+  border: 1px solid var(--el-border-color-light) !important;
   border-radius: 4px !important;
+  $color-primary: var(--el-text-color-primary);
 
   .filter-case__header {
-      padding-left: 8px;
-      height: 36px;
-      line-height: 36px;
-      color: #666;
-      font-size: 14px;
-      background: #F7F7F7;
-      box-shadow: 0 1px 0 0 rgba(226,229,236,1);
-      border-radius: 4px 4px 0 0;
-    }
+    padding-left: 8px;
+    height: 36px;
+    line-height: 36px;
+    color: var(--el-text-color-regular);
+    font-size: 14px;
+    background: var(--cn-bg-color-lighter);
+    box-shadow: 0 1px 0 0 var(--el-border-color-light);
+    border-radius: 4px 4px 0 0;
+  }
 
   .filter__header {
     height: 46px;
     line-height: 46px;
     margin: 0 20px;
     font-size: 14px;
-    color: #353636;
+    color: $color-primary;
     font-weight: 500;
   }
 
@@ -35,6 +36,10 @@
     overflow-y: scroll;
     overflow-x: hidden;
 
+    .filter__body-loading {
+      top: -5px;
+    }
+
     .filter__body-item {
       height: 26px;
       line-height: 26px;
@@ -47,19 +52,19 @@
         display: flex;
         align-items: center;
         font-size: 14px;
-        color: #353636;
+        color: $color-primary;
         font-weight: 400;
 
         .filter__body-item-left-index {
           width: 16px;
           height: 16px;
           text-align: center;
-          background: #EFF2F5;
+          background: var(--el-bg-color-page);
           border-radius: 2px;
           margin-right: 6px;
           font-family: NotoSansHans-Black;
           font-size: 9px;
-          color: #96A2B0;
+          color: var(--el-color-info);
           font-weight: 900;
           display: flex;
           align-items: center;
@@ -70,7 +75,7 @@
           max-width: 180px;
           font-family: NotoSansSChineseRegular;
           font-size: 14px;
-          color: #353636;
+          color: $color-primary;
           font-weight: 400;
           overflow: hidden;
           white-space: nowrap;
@@ -82,19 +87,23 @@
         flex-shrink: 0;
         font-family: NotoSansSChineseRegular;
         font-size: 12px;
-        color: #717171;
+        color: var(--el-text-color-regular);
         font-weight: 400;
         margin-right: 10px;
       }
     }
   }
+
+  .padding-t-40 {
+    padding-top: 40px;
+  }
 }
 
 .filter-country-flag {
   width: 18px;
   height: 12px;
   margin-right: 6px;
-  border: 1px solid #E8E8E8;
+  border: 1px solid var(--el-border-color-light);
 }
 
 .filter-show-more, .filter-no-show-more {
@@ -102,13 +111,14 @@
   height: 26px;
   line-height: 26px;
   margin-left: 20px;
-  color: #046ECA;
+  color: var(--el-color-primary);
   user-select: none; // 禁止文本选中
   font-size: 12px;
 }
+
 .filter-no-show-more {
   cursor: not-allowed;
-  color: rgba(16, 16, 16, 0.3);
+  color: var(--el-text-color-disabled);
 }
 
 .filter-hr {
@@ -116,6 +126,5 @@
   margin-left: 20px;
   margin-top: 6px;
   height: 1px;
-  background: #EFF2F5;
-  //background: #000;
+  background: var(--el-bg-color-page);
 }
diff --git a/src/assets/css/components/views/entityExplorer/entity-graph.scss b/src/assets/css/components/views/entityExplorer/entity-graph.scss
index d1d2b805..e23434f1 100644
--- a/src/assets/css/components/views/entityExplorer/entity-graph.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-graph.scss
@@ -1,3 +1,6 @@
+$color-business: var(--el-color-business);
+$color-primary: var(--el-text-color-primary);
+$color-regular: var(--el-text-color-regular);
 .graph-toolbar {
   position: fixed;
   top: 100px;
@@ -15,12 +18,13 @@
       cursor: pointer;
 
       i {
-        color: #575757;
+        color: $color-regular;
         font-size: 18px;
       }
 
       &.toolbar--unactivated {
         cursor: default;
+
         i {
           opacity: .4;
         }
@@ -28,6 +32,7 @@
     }
   }
 }
+
 .entity-graph {
   display: flex;
 
@@ -39,12 +44,12 @@
       flex-direction: column;
       align-items: center;
       background-color: transparent !important;
-      transition: linear all .2s;
+      transition: linear all var(--el-transition-duration-fast);
 
       .graph-node__text {
         width: 120px;
         font-size: 12px;
-        color: #353636;
+        color: $color-primary;
       }
 
       &.graph-node--root {
@@ -57,30 +62,38 @@
           box-shadow: none;
           animation: none;
         }
+
         &.graph-node--ip {
-          border-color: #CBD9BB !important;
-          box-shadow: 0 0 0 8px rgba(126,159,84,0.14);
+          border-color: var(--el-color-success-light-5) !important;
+          box-shadow: 0 0 0 8px rgba(126, 159, 84, 0.14);
+
           i {
-            color: #7E9F54;
+            color: var(--el-color-success);
           }
         }
+
         &.graph-node--domain {
-          border-color: #AFDEED !important;
-          box-shadow: 0 0 0 8px rgba(56,172,210,0.14);
+          border-color: var(--el-color-primary-light-7) !important;
+          box-shadow: 0 0 0 8px rgba(56, 172, 210, 0.14);
+
           i {
-            color: #38ACD2;
+            color: $color-business;
           }
         }
+
         &.graph-node--app {
-          border-color: #F5DAA3 !important;
-          box-shadow: 0 0 0 8px rgba(229,162,25,0.14);
+          border-color: var(--el-color-warning-light-5) !important;
+          box-shadow: 0 0 0 8px rgba(229, 162, 25, 0.14);
+
           i {
-            color: #E5A219;
+            color: var(--el-color-warning);
           }
         }
+
         i {
           font-size: 36px;
         }
+
         .graph-node__text {
           padding-top: 30px;
         }
@@ -90,19 +103,21 @@
         padding-top: 20px;
         width: 66px;
         height: 66px;
-        border: 1px solid #A7B0B9 !important;
+        border: 1px solid #A7B0B9 !important; // 该class并未使用到
         box-shadow: none;
 
         // 覆盖自带的node点击效果
         &.rel-node-checked {
-          box-shadow: 0 0 0 5px rgba(151,151,151,0.21);
+          box-shadow: 0 0 0 5px rgba(151, 151, 151, 0.21);
           animation: none;
-          border-color: #778391 !important;
+          border-color: $color-regular !important;
         }
+
         i {
           font-size: 24px;
-          color: #778391;
+          color: $color-regular;
         }
+
         .graph-node__text {
           padding-top: 24px;
         }
@@ -116,19 +131,22 @@
 
         &.graph-node--ip {
           i {
-            color: #7E9F54;
+            color: var(--el-color-success);
           }
         }
+
         &.graph-node--domain {
           i {
-            color: #38ACD2;
+            color: $color-business;
           }
         }
+
         &.graph-node--app {
           i {
-            color: #E5A219;
+            color: var(--el-color-warning);
           }
         }
+
         i {
           font-size: 21px;
         }
@@ -141,6 +159,7 @@
       left: unset !important;
       right: 0 !important;
     }
+
     .entity-graph__detail {
       height: calc(100% - 100px) !important;
       top: 100px !important;
@@ -151,7 +170,7 @@
   }
 
   .g6-component-tooltip {
-    box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+    box-shadow: -1px 1px 10px -1px rgba(205, 205, 205, 0.85);
 
     .primary-node-tooltip {
       padding: 5px;
@@ -161,19 +180,21 @@
         align-items: center;
 
         i {
-          color: #717171;
+          color: $color-regular;
           font-size: 14px;
         }
+
         .tooltip__title {
           padding-left: 6px;
           font-size: 15px;
           line-height: 15px;
-          color: #111;
+          color: $color-primary;
         }
       }
+
       .tooltip__content {
         padding-top: 10px;
-        color: #222;
+        color: $color-primary;
         font-size: 12px;
 
         span:first-of-type {
@@ -181,6 +202,7 @@
         }
       }
     }
+
     .entity-node-tooltip {
       width: 300px;
       padding: 5px;
@@ -193,7 +215,7 @@
         .tooltip__title {
           font-size: 15px;
           line-height: 15px;
-          color: #111;
+          color: $color-primary;
         }
       }
 
@@ -208,11 +230,12 @@
           .header-icon {
             width: 3px !important;
             height: 12px !important;
-            background: #38ACD2;
+            background: $color-business;
             border-radius: 1px;
             margin-right: 6px;
           }
         }
+
         .content-tag-list {
           display: flex;
           align-items: flex-start;
@@ -226,22 +249,25 @@
             border: 1px solid;
             border-radius: 2px;
 
-            $normal-color: #778391;
-            $normal-light-color: #F7F8F9;
-            $negative-color: #E26154;
-            $negative-light-color: #FEF6F5;
-            $positive-color: #749F4D;
-            $positive-light-color: #F7FAF5;
+            $normal-color: $color-regular;
+            $normal-light-color: var(--el-fill-color-light);
+            $negative-color: var(--el-color-danger);
+            $negative-light-color: var(--el-color-danger-light-9);
+            $positive-color: var(--el-color-success);
+            $positive-light-color: var(--el-color-success-light-9);
+
             &.entity-tag--level-two-normal {
               border-color: $normal-color;
               color: $normal-color;
               background-color: $normal-light-color;
             }
+
             &.entity-tag--level-two-negative {
               border-color: $negative-color;
               color: $negative-color;
               background-color: $negative-light-color;
             }
+
             &.entity-tag--level-two-positive {
               border-color: $positive-color;
               color: $positive-color;
diff --git a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
index 12e76557..4ed5afae 100644
--- a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
@@ -3,6 +3,9 @@
   position: relative;
   flex-direction: column;
   padding: 0 30px;
+  $color-text-primary: var(--el-text-color-primary);
+  $color-primary: var(--el-color-primary);
+  $color-primary9: var(--el-color-primary-light-9);
 
   .overview-map {
     position: absolute;
@@ -14,37 +17,48 @@
     &.overview-map--ip {
       height: 210px;
     }
+
     &.overview-map--app {
       height: 260px;
     }
+
     .cn-chart {
       height: 100%;
       width: 100%;
+
       .chart-drawing {
         height: 100%;
         width: 100%;
       }
     }
   }
+
   .overview-item {
     display: flex;
     flex-direction: column;
     padding-bottom: 10px;
 
     .overview__title {
-      color: #333;
+      color: $color-text-primary;
       font-size: 14px;
       font-weight: 600;
     }
-    .overview__content-loading.overview__content {
+
+    .overview__content-loading {
       position: relative;
+
       .chart__loading i.el-icon-loading {
         left: calc(50% - 428px);
       }
+      .content-loading {
+        width: 50%;
+      }
     }
+
     .overview__content-loading-net.overview__content {
       position: relative;
     }
+
     .overview__content {
       display: flex;
       flex-direction: column;
@@ -56,13 +70,15 @@
         flex-wrap: wrap;
         padding: 2px 0;
         font-size: 14px;
+
         .no-recent-alerts {
           font-size: 12px;
-          color: #333333;
+          color: $color-text-primary;
           font-weight: 400;
           line-height: 19px;
+
           i {
-            color: #23BF9A;
+            color: var(--el-color-success);
             margin-right: 4px;
             margin-top: 2px;
           }
@@ -71,82 +87,105 @@
         &.overview__row--small-font {
           font-size: 12px;
         }
+
         .show-more.show-more-disabled {
-          color: #8FA1BE;
+          color: var(--el-text-color-disabled);
         }
+
         .show-more {
-          color: #3976CB;
+          color: $color-primary;
           cursor: pointer;
         }
+
         &.overview__row--single-value {
           flex-wrap: wrap;
+
           .cn-chart__single-value--detail-overview {
             margin-right: 30px;
           }
         }
+
         .row__label {
-          color: #6B717B;
+          color: var(--el-text-color-regular);
           padding-right: 20px;
 
           &.row__label--width130 {
             flex-basis: 140px;
             padding-right: unset;
           }
+
           &.row__label--width160 {
             flex-basis: 160px;
             padding-right: unset;
           }
         }
+
         .row__content {
           display: flex;
-          color: #046ECA;
+          color: $color-primary;
           word-wrap: break-word;
           max-width: 30%;
 
+          .row__content__word {
+            word-break: break-word;
+          }
+
           .alert-level-tag {
             display: flex;
             padding: 1px 4px;
             margin-right: 6px;
             border-radius: 2px;
-            color: white;
+            color: var(--el-color-white);
 
-            &.alert-level-tag--high.critical {
-              background-color: #D84C4C;
+            &.alert-level-tag--critical {
+              background-color: var(--cn-color-critical);
             }
-            &.alert-level-tag--high.high {
-              background-color: #FF9A79;
+
+            &.alert-level-tag--high {
+              background-color: var(--cn-color-high);
             }
-            &.alert-level-tag--high.info {
-              background-color: #D1BD50;
+
+            &.alert-level-tag--info {
+              background-color: var(--cn-color-info);
             }
-            &.alert-level-tag--high.medium {
-              background-color: #FFB65A;
-            }
-            &.alert-level-tag--high.low {
-              background-color: #FFD82D;
-            }
-            &.alert-level-tag--middle {
-              background-color: #FFAB66;
+
+            &.alert-level-tag--medium {
+              background-color: var(--cn-color-medium);
             }
+
             &.alert-level-tag--low {
-              background-color: #F6C738;
+              background-color: var(--cn-color-low);
             }
           }
+
           &.row__content--width90 {
             width: 90px;
           }
+
           &.row__content--width200 {
             width: 200px;
           }
+
           .row__content-loading {
             position: relative;
+
             .chart__loading i.el-icon-loading {
               font-size: 14px;
               top: calc(50% - 5px);
               left: calc(50% - 4px);
             }
           }
+
+          .relationship-one__loading, .relationship-two__loading {
+            width: 450px;
+            position: relative;
+
+            .one__loading {
+              left: 1rem;
+            }
+          }
         }
+
         .row__contents {
           display: flex;
           //flex-direction: column;
@@ -158,6 +197,7 @@
             &:first-of-type {
               padding-top: 0;
             }
+
             &:last-of-type {
               padding-bottom: 0;
             }
@@ -165,6 +205,10 @@
             .el-popper {
               min-width: 90px !important;
             }
+
+            .row__content-display {
+              display: flex;
+            }
           }
           .row__content-sent {
             margin-right: 39px;
@@ -172,14 +216,17 @@
           .row__content-accept {
             //margin-left: 39px;
           }
+
           .row__charts-msg {
             width: auto;
             padding-right: 10px;
           }
+
           .new-row__charts-msg {
             width: auto;
             padding-right: 10px;
           }
+
           .row__charts {
             height: 20px;
             width: 60px;
@@ -192,12 +239,13 @@
           flex-wrap: wrap;
         }
         .row__charts {
-          width:80px;
-          height:20px;
+          width: 80px;
+          height: 20px;
           padding-bottom: 5px;
         }
+
         .row__desc {
-          color: #666666;
+          color: var(--el-text-color-regular);
         }
       }
 
@@ -212,75 +260,86 @@
       .overview__tags.domain__tags {
         flex-direction: column;
         width: 70%;
+
         .overview__domain-tabs-loading.overview__domain-tabs {
           position: relative;
         }
+
         .overview__domain-tabs {
           display: flex;
           margin: 0 0 8px 0;
+
           .overview__domain-tab {
             display: flex;
           }
+
           .overview__tag.domain__tag {
             display: unset;
-             padding: 6px 15px;
-             margin: 0 12px 0 0;
-             text-align: center;
-             white-space: nowrap;
-             height: 32px;
-             line-height: 1.5;
-             background-color: #EFF6FE;
-             font-size: 14px;
-             border-radius: 4px;
-           }
+            padding: 6px 15px;
+            margin: 0 12px 0 0;
+            text-align: center;
+            white-space: nowrap;
+            height: 32px;
+            line-height: 1.5;
+            //background-color: #EFF6FE;
+            background-color: $color-primary9;
+            font-size: 14px;
+            border-radius: 4px;
+          }
+
           .overview__tag.domain__tag-list {
             padding: 6px 15px;
             margin: 4px 12px 0 0;
             text-align: center;
             height: 24px;
             line-height: 0.9;
-            background-color: #EFF6FE;
-            color: #3976CB;
+            background-color: $color-primary9;
+            color: $color-primary;
             font-size: 14px;
             font-weight: 400;
             border-radius: 15px;
           }
+
           .overview__domain-btn {
             .overview__domain-more {
-              background-color: #EFF6FE;
+              background-color: $color-primary9;
               width: 44px;
               height: 24px;
               border-radius: 15px;
-              color: #3976CB;
+              color: $color-primary;
               text-align: center;
               margin: 4px 12px 0 0;
               padding: 6px 15px;
               line-height: .3;
               cursor: pointer;
             }
+
             position: relative;
           }
+
           .overview__domain-more-tabs::-webkit-scrollbar {
             width: 10px;
           }
+
           .overview__domain-more-tabs {
             min-width: 150px;
             max-height: 180px;
             overflow: auto;
-            background: #FFFFFF;
-            box-shadow: 0 3px 6px -4px rgba(0,0,0,0.12), 0 6px 16px 0 rgba(0,0,0,0.08), 0 9px 28px 8px rgba(0,0,0,0.05);
+            background: var(--el-fill-color-blank);
+            box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
             border-radius: 2px;
             padding: 5px;
             z-index: 1;
             position: absolute;
             right: -120px;
             top: -180px;
+
             .domain-more-tab {
               height: 24px;
               padding: 6px 12px;
               text-align: center;
               font-size: 12px;
-              color: #666666;
+              color: var(--el-text-color-regular);
               letter-spacing: 0;
               line-height: 12px;
               font-weight: 400;
@@ -296,52 +355,68 @@
 
     .overview__tags {
       display: flex;
+
       .overview__tag-loading.overview__tag {
         position: relative;
       }
+
       .overview__tag {
         display: flex;
         padding: 0 15px;
         height: 31px;
         align-items: center;
         margin-right: 20px;
-        background-color: #EFF6FE;
+        background-color: $color-primary9;
         font-size: 14px;
         border-radius: 4px;
 
         .tag__value {
-          color: #3976CB;
+          color: $color-primary;
           font-weight: bold;
         }
+
         .tag__desc {
           padding-right: 5px;
-          color: #3976CB;
+          color: $color-primary;
           white-space: nowrap;
         }
       }
     }
+
     .data-item {
       display: flex;
       justify-content: center;
       align-items: center;
-      background: rgba(119,131,145,0.06);
-      border: 1px solid rgba(119,131,145,0.36);
+      background: rgba(119, 131, 145, 0.06);
+      border: 1px solid rgba(119, 131, 145, 0.36);
       border-radius: 2px;
-      height:28px;
-      padding:8px 15px;
-      margin-right:10px;
+      height: 28px;
+      padding: 8px 15px;
+      margin-right: 10px;
       //margin-bottom:15px;
       font-size: 12px;
-      color: #353636;
+      color: var(--el-text-color-primary);
       font-weight: 400;
       white-space: nowrap;
     }
+
     .show-more-related {
       height: 28px;
       line-height: 28px;
       padding-bottom: 12px;
       cursor: pointer;
+      position: relative;
     }
+
+    .entity-score__block {
+      position: relative;
+
+      .entity-score__loading {
+        width: 50%;
+        left: 1rem;
+      }
+    }
+
     .entity-score {
       .circle-icon {
         border-radius: 3px;
@@ -349,59 +424,72 @@
         height: 6px;
         margin-right: 4px;
       }
+
+      .entity-score__padding {
+        padding-left: 4px;
+      }
+
       .data-score-red {
-        background: #E26154;
+        background: var(--el-color-danger);
       }
+
       .data-score-yellow {
-        background: #E5A219;
+        background: var(--el-color-warning);
       }
+
       .data-score-green {
-        background: #749F4D;
+        background: var(--el-color-success);
       }
+
       .score-dot {
         display: inline-block;
         margin-bottom: 2px;
         width: 6px;
         height: 6px;
         border-radius: 50%;
-        background-color: #CBCBCB;
+        background-color: var(--el-color-info-light-5);
         margin-right: 4px;
 
         &.score-dot--red {
-          background-color: #E26154;
+          background-color: var(--el-color-danger);
         }
+
         &.score-dot--yellow {
-          background-color: #E5A219;
+          background-color: var(--el-color-warning);
         }
+
         &.score-dot--green {
-          background-color: #749F4D;
+          background-color: var(--el-color-success);
         }
       }
-      height:24px;
+
+      height: 24px;
       font-size: 14px;
-      color: #046ECA;
+      color: $color-primary;
       font-weight: 500;
-      display:flex;
+      display: flex;
       align-items: center;
       justify-content: center;
     }
+
     .cn-detection__header {
       display: flex;
       flex-direction: row;
       flex-wrap: nowrap;
       padding-bottom: 3px;
-      color: #333333;
+      color: $color-text-primary;
       align-items: center;
       font-size: 12px;
 
       i {
-        color: #7b8fa2;
+        //color: #7b8fa2; // todo 待确定
+        color: var(--el-color-info);
         margin-right: 5px;
         font-size: 18px;
       }
 
       .line {
-        color: #da5656;
+        color: var(--el-color-error);
         margin-left: 12px;
         font-size: xx-small;
         font-weight: bold;
@@ -410,17 +498,17 @@
       .circle {
         width: 10px;
         height: 10px;
-        border: 2px solid #da5656;
+        border: 2px solid var(--el-color-error);
         border-radius: 10px;
         margin-top: 4px;
         margin-right: 12px;
       }
 
       .domain {
-        background: #EFF2F5;
+        background: var(--el-bg-color-page);
         border-radius: 2px;
         font-size: 14px;
-        color: #333333;
+        color: $color-text-primary;
         letter-spacing: 0;
         line-height: 14px;
         margin-left: 5px;
@@ -429,26 +517,29 @@
         font-weight: 500;
       }
     }
+
     .app-popover_block, .domain-popover_block {
       position: absolute;
-      border: 1px solid #E7EAED;
+      border: 1px solid var(--el-border-color-light);
       max-height: 180px;
       width: auto;
       max-width: 220px;
-      color: #666665;
+      color: var(--el-text-color-regular);
       line-height: 24px;
       overflow: scroll;
       padding: 12px 12px 4px;
-      background: #fff;
+      background: var(--el-fill-color-blank);
       z-index: 1;
       box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
       border-radius: 4px;
     }
+
     .domain-popover_block {
       //top: 194px;
     }
   }
 }
+
 .margin-l-140 {
   margin-left: 140px;
 }
diff --git a/src/assets/css/components/views/entityExplorer/entityList/entity-list.scss b/src/assets/css/components/views/entityExplorer/entityList/entity-list.scss
index 8542d855..7d6d3863 100644
--- a/src/assets/css/components/views/entityExplorer/entityList/entity-list.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/entity-list.scss
@@ -18,6 +18,7 @@
       width: calc(100% - 10px);
       height: 100%;
     }
+
     .entity-list--list {
       display: flex;
       flex-direction: column;
@@ -36,8 +37,7 @@
     }
   }
 
-
-  .entity__pagination{
+  .entity__pagination {
     position: absolute;
     bottom: 9px;
     height: 40px;
diff --git a/src/assets/css/components/views/entityExplorer/entityList/row.scss b/src/assets/css/components/views/entityExplorer/entityList/row.scss
index bde8ba60..073d6936 100644
--- a/src/assets/css/components/views/entityExplorer/entityList/row.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/row.scss
@@ -1,8 +1,11 @@
 .cn-entity--list {
   display: flex;
-  border: 1px #E2E5EC solid;
+  border: 1px var(--el-border-color-light) solid;
   margin-bottom: 10px;
-  border-radius: 4px;
+  $border-radius: var(--el-border-radius-base);
+  border-radius: $border-radius;
+  $color-info: var(--el-color-info);
+  $color-regular: var(--el-text-color-regular);
 
   .cn-entity__collapse {
     margin-bottom: 1px;
@@ -11,12 +14,12 @@
     display: flex;
     justify-content: center;
     align-items: flex-start;
-    background-color: #F3F7FA;
-    border-radius: 4px 0 0 4px;
+    background-color: var(--el-fill-color-light);
+    border-radius: $border-radius 0 0 $border-radius;
 
     span {
       transform: rotate(0);
-      transition: all linear .2s;
+      transition: all linear var(--el-transition-duration-fast);
       padding-top: 0;
 
       &.reg-down {
@@ -30,7 +33,7 @@
     }
 
     .cn-icon-arrow-right {
-      color: #ADBCCA;
+      color: var(--el-text-color-placeholder);
       font-size: 12px;
     }
   }
@@ -44,7 +47,7 @@
     padding: 16px 0;
     margin-bottom: 1px;
     //background-color: white;
-    border-radius: 0 4px 4px 0;
+    border-radius: 0 $border-radius $border-radius 0;
 
     .cn-entity__icon {
       margin-left: 26px;
@@ -57,11 +60,11 @@
       width: 52px;
       height: 52px;
       border-radius: 50%;
-      background-color: #F3F7FA;
+      background-color: var(--el-fill-color-light);
 
       i {
         font-size: 26px;
-        color: #4E84B4;
+        color: #4E84B4; // todo 颜色待确定
       }
     }
 
@@ -75,13 +78,15 @@
       .cn-entity__header {
         font-size: 16px;
         padding-bottom: 3px;
-        color: #333333;
+        color: var(--el-text-color-primary);
+
         .cn-entity__header-icon {
           margin-left: 10px;
         }
+
         .entity-related-entity {
           font-size: 12px;
-          color: #717171;
+          color: var(--el-text-color-regular);
           cursor: pointer;
           margin-right: 6px;
         }
@@ -116,9 +121,11 @@
                 display: flex;
                 align-items: center;
                 flex-direction: row;
+
                 .item-box-loading {
                   position: relative;
                   display: flex;
+
                   .chart__loading i.el-icon-loading {
                     font-size: 14px;
                     padding: 0;
@@ -129,7 +136,7 @@
 
                 i {
                   padding-right: 5px;
-                  color: #8FA1BE;
+                  color: var(--el-text-color-primary);
                   font-size: 12px;
                   height: 13px;
                 }
@@ -139,11 +146,11 @@
                 }
 
                 span:first-of-type {
-                  color: #999;
+                  color: $color-info;
                 }
 
                 span:last-of-type {
-                  color: #666;
+                  color: $color-regular;
                 }
 
                 .row__charts {
@@ -156,7 +163,7 @@
 
               i {
                 padding-right: 6px;
-                color: #8FA1BE;
+                color: var(--el-text-color-primary);
                 font-size: 12px;
               }
 
@@ -165,36 +172,37 @@
               }
 
               span:first-of-type {
-                color: #999;
+                color: $color-info;
               }
 
               span:last-of-type {
-                color: #666;
+                color: $color-regular;
               }
             }
+
             .basic-info__item1 {
-              span: {
-                color: #666;
+              span {
+                color: $color-regular;
               }
+
               span:first-of-type {
-                color: #666;
+                color: $color-regular;
               }
+
               .row-item-label {
-                color: #999 !important;
+                color: $color-info !important;
               }
             }
 
             .row-item-label {
-              font-family: NotoSansSChineseRegular;
               font-size: 14px;
-              color: #717171;
+              color: var(--el-text-color-regular);
               font-weight: 400;
             }
 
             .row-item-value {
-              font-family: NotoSansSChineseRegular;
               font-size: 14px;
-              color: #353636;
+              color: var(--el-text-color-primary);
               font-weight: 400;
 
               .score-dot {
@@ -203,17 +211,19 @@
                 width: 6px;
                 height: 6px;
                 border-radius: 50%;
-                background-color: #CBCBCB;
+                background-color: var(--el-color-info-light-5);
                 margin-right: 4px;
 
                 &.score-dot--red {
-                  background-color: #E26154;
+                  background-color: var(--el-color-danger);
                 }
+
                 &.score-dot--yellow {
-                  background-color: #E5A219;
+                  background-color: var(--el-color-warning);
                 }
+
                 &.score-dot--green {
-                  background-color: #749F4D;
+                  background-color: var(--el-color-success);
                 }
               }
             }
@@ -231,8 +241,8 @@
       flex-shrink: 0;
       padding: 0 30px;
       font-size: 12px;
-      color: #2C72C6;
-      font-weight: 400;
+      //color: #2C72C6;
+      color: var(--el-color-primary);
       display: flex;
       flex-direction: column;
       justify-content: space-around;
@@ -254,8 +264,21 @@
       overflow: hidden;
 
       .el-divider {
-        background-color: #EFF2F5;
+        background-color: var(--el-bg-color-page);
       }
     }
   }
+
+  .my__display {
+    display: flex;
+    align-items: center;
+  }
+
+  .my__display1 {
+    display: flex;
+  }
+
+  .padding-l-4 {
+    padding-left: 4px;
+  }
 }
diff --git a/src/assets/css/components/views/entityExplorer/graphRightDetailBlock.scss b/src/assets/css/components/views/entityExplorer/graphRightDetailBlock.scss
index 41ab1046..d5c9ebee 100644
--- a/src/assets/css/components/views/entityExplorer/graphRightDetailBlock.scss
+++ b/src/assets/css/components/views/entityExplorer/graphRightDetailBlock.scss
@@ -1,4 +1,6 @@
 $font-size: 12px;
+$color-regular: var(--el-text-color-regular);
+$color-primary: var(--el-text-color-primary);
 .graph-detail-basic-info {
   position: relative;
   padding-bottom: 12px;
@@ -6,19 +8,23 @@ $font-size: 12px;
   justify-content: space-between;
   //height: 100%;
 
+  .graph-detail-basic-info__block {
+    display: flex;
+  }
+
   .graph-detail-header {
     display: flex;
     flex-direction: column;
 
     .entity-graph-type {
       font-size: 12px;
-      color: #717171;
+      color: $color-regular;
       font-weight: 400;
     }
   }
 
   .entity-type {
-    color: #717171;
+    color: $color-regular;
   }
 
   .graph-basic-info {
@@ -34,7 +40,7 @@ $font-size: 12px;
         padding-right: 10px;
         max-width: 260px;
         font-size: 20px;
-        color: #353636;
+        color: $color-primary;
         font-weight: 700;
         white-space: nowrap;
         overflow: hidden;
@@ -48,12 +54,12 @@ $font-size: 12px;
         height: 18px;
         width: 18px;
         border-radius: 50%;
-        background-color: #EFF1F4;
+        background-color: var(--el-bg-color-page);
         cursor: pointer;
         flex-shrink: 0;
 
         i {
-          color: #717171;
+          color: $color-regular;
           font-size: 10px;
           -webkit-transform: scale(0.8); // 强制给文字进行缩放，达到12px以下小字体的效果
         }
@@ -71,17 +77,17 @@ $font-size: 12px;
     align-items: center;
     margin-right: 10px;
     border-radius: 50%;
-    background-color: #F3F7FA;
+    background-color: var(--el-fill-color-light);
 
     i {
       font-size: 26px;
-      color: #4E84B4;
+      color: #4E84B4; // todo 待确定
     }
   }
 }
 
 .graph-close {
-  color: #575757;
+  color: $color-regular;
   font-size: 8px;
   cursor: pointer;
 }
@@ -108,7 +114,7 @@ $font-size: 12px;
         width: 130px;
         font-family: NotoSansSChineseRegular;
         font-size: $font-size;
-        color: #717171;
+        color: $color-regular;
         font-weight: 400;
         padding-right: 10px;
         flex-shrink: 0;
@@ -116,7 +122,7 @@ $font-size: 12px;
 
       .graph-content-item-value {
         width: 230px;
-        color: #353636;
+        color: $color-primary;
         font-weight: 400;
         overflow-wrap: break-word;
         line-height: normal;
@@ -130,7 +136,7 @@ $font-size: 12px;
 
       .graph-relationship-item-label, .graph-relationship-item-value {
         font-size: $font-size;
-        color: #353636;
+        color: $color-primary;
         font-weight: 400;
         //height: 40px;
         display: flex;
@@ -143,7 +149,7 @@ $font-size: 12px;
       }
 
       .graph-relationship-item-value {
-        color: #717171;
+        color: $color-regular;
 
         i {
           cursor: pointer;
@@ -152,6 +158,10 @@ $font-size: 12px;
     }
   }
 
+  .margin-t--4 {
+    margin-top: -4px;
+  }
+
   .graph-tag-list {
     display: flex;
     align-items: flex-start;
@@ -184,14 +194,14 @@ $font-size: 12px;
 //修改popover样式
 .graph-popover {
   width: auto !important;
-  background: #303133 !important;
-  color: #fff !important;
+  background: $color-primary !important;
+  color: var(--el-color-white) !important;
   font-size: 12px !important;
   padding: 10px !important;
 }
 
 .graph-popover .el-popper__arrow::before {
-  background: #303133 !important;
+  background: $color-primary !important;
 }
 
 .graph-expand-relationship__icon {
@@ -200,6 +210,6 @@ $font-size: 12px;
 
 .graph-basic-info__block-title {
   font-size: 13px;
-  color: #353636;
+  color: $color-primary;
   font-weight: 600;
 }
diff --git a/src/assets/css/components/views/entityExplorer/graphRightListBlock.scss b/src/assets/css/components/views/entityExplorer/graphRightListBlock.scss
index 5d448ed4..ed895195 100644
--- a/src/assets/css/components/views/entityExplorer/graphRightListBlock.scss
+++ b/src/assets/css/components/views/entityExplorer/graphRightListBlock.scss
@@ -1,4 +1,6 @@
 $font-size: 12px;
+$color-primary: var(--el-text-color-primary);
+$color-regular: var(--el-text-color-regular);
 .graph-list-header {
   display: flex;
   justify-content: space-between;
@@ -10,21 +12,21 @@ $font-size: 12px;
 
     span {
       font-size: 16px;
-      color: #353636;
+      color: $color-primary;
       line-height: 21px;
       font-weight: 600;
     }
 
     .graph-list-header-icon {
       font-size: 21px;
-      color: #717171;
+      color: $color-regular;
       margin-right: 9px;
     }
   }
 
   .graph-list-header-number {
     font-size: 12px;
-    color: #717171;
+    color: $color-regular;
     font-weight: 400;
 
     span {
@@ -37,20 +39,24 @@ $font-size: 12px;
   margin-top: 16px;
   margin-bottom: 24px;
 
+  .graph-list-expand-btn__display {
+    display: inline-flex;
+  }
+
   .graph-list-expand-btn {
     height: 28px;
     line-height: 28px;
-    background: #38ACD2;
+    background: var(--el-color-business);
     border-radius: 3px;
     font-size: 12px;
-    color: #FFFFFF;
+    color: var(--el-color-white);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 500;
     padding: 14px 10px;
     cursor: pointer;
-    border: 1px solid rgba(46,136,166,0.85);
+    border: 1px solid rgba(46, 136, 166, 0.85);
 
     i {
       font-size: 16px;
@@ -66,7 +72,7 @@ $font-size: 12px;
 
 .graph-list-content-header {
   font-size: 14px;
-  color: #353636;
+  color: $color-primary;
   font-weight: 500;
 }
 
@@ -76,14 +82,14 @@ $font-size: 12px;
   .graph-list-item-ip {
     margin-bottom: 10px;
     font-size: $font-size;
-    color: #353636;
+    color: $color-primary;
     font-weight: 400;
   }
 
   .graph-list-item-block {
     width: 100%;
-    background: rgba(247, 247, 247, 1);
-    border: 1px solid rgba(226, 229, 236, 1);
+    background: var(--el-fill-color-light);
+    border: 1px solid var(--el-border-color-light);
     border-radius: 2px;
     padding: 10px 15px;
 
@@ -94,7 +100,7 @@ $font-size: 12px;
         width: 72px;
         //margin-right: 15px;
         font-size: $font-size;
-        color: #717171;
+        color: $color-regular;
         font-weight: 400;
         flex-shrink: 0;
       }
@@ -110,12 +116,12 @@ $font-size: 12px;
         width: 14px;
         height: 10px;
         margin-right: 5px;
-        border: 1px solid #E8E8E8;
+        border: 1px solid var(--el-color-info-light-8);
       }
 
       .graph-list-item-value {
         font-size: $font-size;
-        color: #353636;
+        color: $color-primary;
         font-weight: 400;
         line-height: 18px;
         display: flex;
@@ -125,7 +131,12 @@ $font-size: 12px;
 
       .graph-list-item-value1 {
         display: flex;
-        align-content: center;
+        align-items: center;
+        line-height: 14px;
+
+        div {
+          line-height: 10px;
+        }
       }
     }
 
@@ -150,6 +161,6 @@ $font-size: 12px;
 .graph-list-dividing-line {
   width: 300px;
   height: 1px;
-  background: #ECECEC;
+  background: var(--el-color-info-light-8);
   margin: 11px 0;
 }
diff --git a/src/assets/css/components/views/entityExplorer/helper-info.scss b/src/assets/css/components/views/entityExplorer/helper-info.scss
new file mode 100644
index 00000000..0c9f4d5f
--- /dev/null
+++ b/src/assets/css/components/views/entityExplorer/helper-info.scss
@@ -0,0 +1,50 @@
+.helper-info {
+  min-width: 450px;
+  background-color: var(--el-fill-color-blank);
+  height: 294px;
+  box-sizing: border-box;
+  overflow: auto;
+  z-index: 99;
+
+  .tips-container {
+    padding: 12px;
+
+    ul li {
+      list-style: inside;
+      line-height: 20px;
+    }
+
+    h3 {
+      margin: 8px 0;
+      line-height: 22px;
+    }
+
+    p {
+      line-height: 22px;
+      word-break: break-all;
+    }
+
+    code, .code {
+      background: initial;
+      border: 1px solid var(--el-color-info-light-7);
+      height: 24px;
+      line-height: 24px;
+      padding: 0 12px;
+      margin: 6px 0;
+      display: block;
+    }
+
+    .sub-url {
+      padding-left: 18px;
+    }
+
+    .sub-url li {
+      list-style: inside circle;
+    }
+
+    i.ref-txt {
+      line-height: 20px;
+      color: var(--el-text-color-placeholder);
+    }
+  }
+}
diff --git a/src/assets/css/components/views/entityExplorer/search/explorer-search.scss b/src/assets/css/components/views/entityExplorer/search/explorer-search.scss
index 510c17f9..decc6ae9 100644
--- a/src/assets/css/components/views/entityExplorer/search/explorer-search.scss
+++ b/src/assets/css/components/views/entityExplorer/search/explorer-search.scss
@@ -8,17 +8,20 @@
   background-position: 0 100%;
   background-size: 100%;
   margin-bottom: 10px;
+  $color-primary: var(--el-color-primary);
 
   &.explorer-search--show-list {
     flex: 0 0 40px;
     background-image: none;
   }
+
   .explorer-search__title {
     height: 112px;
     text-align: center;
     font-size: 42px;
-    color: #3976CB;
+    color: $color-primary;
   }
+
   .explorer-search__input-case {
     display: flex;
     flex-direction: column;
@@ -36,24 +39,27 @@
       }
 
       .explorer-search__input--border .CodeMirror {
-        border: 1px solid #DEDEDE;
+        border: 1px solid var(--el-color-info-light-7);
       }
     }
+
     .search-symbol-inline {
       display: flex;
       align-items: center;
       justify-content: center;
-      color: #666;
+      color: var(--el-text-color-regular);
       font-size: 16px;
       padding: 0 10px;
       cursor: pointer;
     }
+
     .explorer-search__input {
       width: 100%;
       max-width: 1000px;
       height: 40px;
     }
-    .explorer-search__foot,.explorer-search__foot-list {
+
+    .explorer-search__foot, .explorer-search__foot-list {
       display: flex;
       padding-top: 9px;
       width: 100%;
@@ -66,10 +72,10 @@
         display: flex;
         align-items: center;
         font-size: 14px;
-        color: #3976CB;
+        color: $color-primary;
 
         .el-divider {
-          background-color: #3976CB;
+          background-color: $color-primary;
         }
 
         i, span {
@@ -80,6 +86,7 @@
           transition: all linear .1s;
           transform: rotate(0) translate(0, 0);
         }
+
         i.arrow-rotate {
           transform: rotate(90deg) translate(2px, 3px);
         }
@@ -95,76 +102,42 @@
         max-width: 1000px;
         z-index: 2;
         //top: 47px;
-        border: 1px solid rgba(226,229,236,1);
+        border: 1px solid var(--el-border-color-light);
         border-radius: 2px;
-        background-color: white;
-
-        .history__items {
-          max-height: 300px;
-          overflow: auto;
-          .history__item {
-            height: 35px;
-            display: flex;
-            align-items: center;
-            padding-left: 30px;
-            font-weight: normal;
-            font-size: 14px;
-            flex-shrink: 0;
-
-            &.clear-all span {
-              cursor: pointer;
-            }
-            div {
-              color: #999;
-            }
-            .item-date {
-              color: #bbb;
-              padding: 0 20px 0 0;
-            }
-            .item-value {
-              flex-basis: calc(100% - 200px);
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-              word-break: break-all;
-              color: #444;
-            }
-          }
-          .history__item {
-            cursor: pointer;
-          }
-          .history__item:hover {
-            background-color: #ecf5ff;
-            color: #66b1ff;
-          }
-        }
+        background-color: var(--el-fill-color-blank);
 
         .history__items-new {
           max-height: 300px;
           overflow: auto;
-          .el-table th,.el-table td {
+
+          .el-table th, .el-table td {
             padding: 6px 0;
             border: none !important;
           }
+
           .el-table {
             font-family: NotoSansSChineseRegular;
             font-size: 14px;
-            color: #575757;
+            color: var(--el-text-color-regular);
             font-weight: 400;
+
             thead {
               font-family: NotoSansHans-Medium;
               font-size: 14px;
-              color: #353636;
+              color: var(--el-text-color-primary);
               font-weight: 500;
             }
+
             .cell {
               padding-left: 18px;
             }
           }
+
           .el-scrollbar__bar {
             visibility: hidden;
           }
         }
+
         .clear-all {
           padding-left: 18px;
           font-weight: normal;
@@ -172,7 +145,7 @@
           height: 35px;
           display: flex;
           align-items: center;
-          color: #3976CB;
+          color: $color-primary;
 
           span {
             cursor: pointer;
@@ -180,28 +153,35 @@
         }
       }
     }
+
     .explorer-search__foot-list {
       max-width: 756px;
       position: absolute;
       left: 196px;
       top: 44px;
+
       .search__history {
         top: 6px;
         max-width: 756px;
         margin-left: -196px;
+
         .history__items-new {
           max-height: 300px;
           overflow: auto;
-          .el-table th,.el-table td {
+
+          .el-table th, .el-table td {
             padding: 4px 0;
             border: none !important;
           }
+
           .el-table {
             font-size: 12px;
+
             thead {
               font-size: 12px;
             }
           }
+
           .el-table--scrollable-x .el-table__body-wrapper {
             overflow-x: hidden;
           }
@@ -211,21 +191,26 @@
   }
 
 }
+
 .highlight__text {
-  background: #FEECC2;
+  background: var(--el-color-warning-light-7);
   padding: 0 3px;
 }
+
 .highlight__block {
-  background: #FEECC2;
+  background: var(--el-color-warning-light-7);
 }
+
 .explorer-search__foot-list .explorer-search__block {
   margin-left: -196px;
   top: -44px;
 }
+
 .explorer-search__foot .explorer-search__block {
   margin-left: 0;
   top: -40px;
 }
+
 .explorer-search__block {
   position: absolute;
   padding-left: 15px;
@@ -237,13 +222,13 @@
 
   i {
     font-size: 20px;
-    color: #999;
+    color: var(--el-color-info);
   }
 
   .search-dividing-line {
     width: 1px;
     height: 26px;
-    background: #DEDEDE;
+    background: var(--el-color-info-light-7);
     margin-left: 15px;
     margin-top: 2px;
   }
diff --git a/src/assets/css/components/views/location/location.scss b/src/assets/css/components/views/location/location.scss
new file mode 100644
index 00000000..2b9d43c2
--- /dev/null
+++ b/src/assets/css/components/views/location/location.scss
@@ -0,0 +1,835 @@
+$color-white: var(--el-color-white);
+$color-business: var(--el-color-business);
+$color-inactive: var(--el-color-info-light-5);
+$color-regular: var(--el-text-color-regular);
+$color-text-primary: var(--el-text-color-primary);
+$color-primary: var(--el-color-primary);
+$color-human: #233447; // 以下是颜色暂无替代的
+$color-circle: #DE3434;
+$color-base-station: #585B5F;
+$color-search-follow: #6f6f6e;
+$color-highlight: #CC4444;
+
+.geo-analysis {
+  display: flex;
+  flex-direction: column;
+  padding: 0 20px 20px;
+  position: relative;
+
+  .location-tabs {
+    .traceTracking-tabs_label {
+      display: flex;
+      flex-display: row;
+
+      .traceTracking-num {
+        margin-top: 5px;
+        border-radius: 10px;
+        font-size: 12px;
+        color: $color-white;
+        height: 20px;
+        width: fit-content;
+        min-width: 20px;
+        padding: 0 5px 0 5px;
+        line-height: 20px;
+        text-align: center;
+        background: var(--el-color-danger);
+      }
+    }
+  }
+
+  svg {
+    fill: $color-white;
+  }
+
+  .maplibregl-canvas:focus-visible {
+    outline: none;
+  }
+
+  .geo-tools {
+    position: absolute;
+    display: flex;
+    top: 11px;
+    right: 20px;
+
+    .location__select {
+      width: 250px;
+      margin-right: 10px;
+
+      .location__select-empty {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 40px;
+        padding: 10px 0;
+        color: var(--el-color-info);
+        font-size: 12px;
+        text-align: center;
+
+        .padding-t-10 {
+          padding-top: 10px;
+        }
+      }
+    }
+
+    .el-select .el-input__inner {
+      cursor: text;
+    }
+
+    .el-select .el-input .el-select__caret {
+      cursor: text;
+    }
+
+    .panel__time {
+      display: flex;
+    }
+
+    .el-select {
+      .search-active {
+        float: left;
+        border-radius: 3px;
+        width: 6px;
+        height: 6px;
+        margin-right: 10px;
+        position: relative;
+        top: 50%;
+        transform: translateY(-50%);
+        text-align: center;
+      }
+
+      .search-value {
+        font-size: 14px;
+        margin-right: 20px;
+      }
+
+      .search-id {
+        color: var(--el-color-info);
+      }
+
+      .search-follow__icon {
+        position: absolute;
+        top: 50%;
+        right: 10px;
+        transform: translateY(-50%);
+        color: $color-search-follow;
+        margin-right: 10px;
+        text-align: center;
+
+        i {
+          font-size: 12px;
+        }
+      }
+
+      .search-content {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        justify-content: center;
+      }
+
+      .active-icon {
+        background: $color-business;
+      }
+
+      .inactive-icon {
+        background: $color-inactive;
+      }
+
+      .search-select {
+        max-height: 250px;
+      }
+
+      .search-select .el-scrollbar__wrap {
+        max-height: 250px;
+        overflow-y: auto;
+      }
+
+      .el-select-dropdown .el-scrollbar .el-select-dropdown__wrap .el-scrollbar__view.el-select-dropdown__list .el-select-dropdown__item {
+        position: relative;
+        height: 48px;
+        line-height: 16px;
+      }
+    }
+  }
+
+  .el-tabs {
+    .el-tabs__header {
+      margin-bottom: 0;
+    }
+
+    .el-tabs__nav-wrap::after {
+      height: 0;
+    }
+
+    .el-tabs__active-bar {
+      height: 3px;
+      background-color: $color-primary;
+      bottom: 1px;
+    }
+
+    .el-tabs__item {
+      &.is-active {
+        color: $color-primary;
+      }
+
+      height: 50px;
+      line-height: 50px;
+      font-size: 20px;
+      color: $color-text-primary;
+    }
+  }
+
+  .geo-analysis__container {
+    height: calc(100% - 50px);
+    display: flex;
+    position: relative;
+
+    .analysis-map {
+      flex: 1;
+      position: relative;
+
+      #analysisMap {
+        border-radius: 2px;
+        height: 100%;
+        width: 100%;
+      }
+
+      .maplibregl-ctrl-bottom-right {
+        top: 0;
+        left: 0;
+        bottom: unset;
+        right: unset;
+      }
+
+      .map-marker {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        cursor: default;
+        padding: 0;
+        transition: height .1s linear, width .1s linear;
+
+        svg {
+          transition: height .1s linear, width .1s linear;
+          fill: $color-white;
+        }
+
+        &.map-marker--human {
+          background-color: $color-human;
+          cursor: pointer;
+
+          svg {
+            width: 14px;
+            height: 14px;
+          }
+        }
+
+        &.map-marker--base-station {
+          background-color: $color-base-station;
+
+          svg {
+            width: 12px;
+            height: 12px;
+          }
+        }
+
+        &.map-marker--hover {
+          width: 30px;
+          height: 30px;
+          border: 2px solid $color-white;
+          z-index: 2;
+
+          &.map-marker--human svg {
+            width: 21px;
+            height: 21px;
+          }
+
+          &.map-marker--base-station svg {
+            width: 18px;
+            height: 18px;
+          }
+        }
+
+        &.map-marker--highlight {
+          width: 30px;
+          height: 30px;
+          border: 2px solid $color-white;
+          background-color: $color-highlight;
+          z-index: 3;
+
+          svg {
+            width: 21px;
+            height: 21px;
+          }
+        }
+      }
+
+      .map-tracking-marker {
+        width: 36px;
+        height: 36px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        animation: pulse 2s infinite;
+        background-color: rgba(204, 68, 68, 0.50);
+        border-radius: 50%;
+
+        .tracking-marker__inner-circle {
+          width: 25px;
+          height: 25px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background-color: rgba(204, 68, 68, 0.80);
+          border-radius: 50%;
+
+          svg {
+            width: 20px;
+            height: 20px;
+          }
+        }
+      }
+    }
+
+    .map-time-line {
+      position: absolute;
+      bottom: 0;
+      left: -6px;
+      width: calc(100% - 318px);
+    }
+
+    .analysis-statistics {
+      width: 330px;
+      overflow-y: auto;
+      padding-right: 5px;
+
+      .analysis-statistics__chart {
+        margin: 0 0 10px 20px;
+        height: 148px;
+        background: rgba(113, 113, 113, 0.06);
+        border: 1px solid var(--el-border-color-light);
+        border-radius: 4px;
+        position: relative;
+
+        .chart__header {
+          padding: 8px 0 0 10px;
+          color: $color-text-primary;
+          font-size: 16px;
+        }
+
+        .chart__body {
+          display: flex;
+          flex-direction: row;
+          width: 100%;
+          height: calc(100% - 32px);
+
+          .chart__legend {
+            width: calc(60% - 22px);
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+
+            .legend-item {
+              display: flex;
+              flex-direction: row;
+              justify-content: left;
+              align-items: center;
+              padding-top: 2px;
+              padding-bottom: 2px;
+
+              .legend-icon {
+                width: 16px;
+                height: 6px;
+                border-radius: 2px;
+                margin-right: 10px;
+              }
+
+              .legend-range {
+                margin-right: 40px;
+                width: 54px;
+                font-family: Helvetica;
+                font-size: 12px;
+                color: $color-regular;
+                line-height: 12px;
+                font-weight: 400;
+              }
+
+              .legend-count {
+                font-family: Helvetica;
+                font-size: 12px;
+                color: $color-text-primary;
+                line-height: 12px;
+                font-weight: 400;
+              }
+            }
+          }
+        }
+
+        .chart__statistics {
+          display: flex;
+          height: 20px;
+          padding-left: 10px;
+
+          .statistics-number {
+            margin-right: 8px;
+            color: $color-text-primary;
+            font-size: 16px;
+            line-height: 22px;
+          }
+
+          .statistics-trend {
+            padding: 0 10px;
+            background: var(--el-color-success);
+            border-radius: 10px;
+            text-align: center;
+            font-size: 12px;
+            color: $color-white;
+          }
+        }
+
+        .chart__drawing {
+          height: 100%;
+          width: calc(40% + 12px);
+          margin-right: 10px;
+        }
+
+        .chart-line__drawing {
+          height: calc(100% - 32px);
+        }
+
+        #activeSubscribersChart {
+          height: calc(100% - 52px);
+        }
+      }
+
+      .analysis-statistics__title {
+        position: relative;
+        margin-bottom: 10px;
+        padding-left: 20px;
+        font-size: 16px;
+        color: $color-text-primary;
+      }
+
+      .analysis-statistics__no-tracking-tip {
+        padding: 0 20px;
+        cursor: pointer;
+        color: $color-primary;
+        text-decoration: underline;
+      }
+
+      .analysis-statistics__subscribers {
+        padding-left: 20px;
+
+        .analysis-statistics__subscriber {
+          margin-bottom: 10px;
+
+          &:last-of-type {
+            margin-bottom: 0;
+          }
+
+          &.analysis-statistics__subscriber--active {
+            border: 1px solid $color-business;
+            box-shadow: 0 1px 3px 0 $color-business;
+          }
+
+          background-color: var(--cn-bg-color-lighter);
+          border: 1px solid var(--el-border-color-light);
+          border-radius: 2px;
+
+          .subscriber__header {
+            background-color: $color-business;
+
+            &.subscriber__header-inactive {
+              background-color: $color-inactive;
+            }
+          }
+
+          .subscriber__header {
+            position: relative;
+            flex-direction: column;
+            padding: 6px 0 0 70px;
+            color: $color-white;
+            height: 58px;
+
+            .header__icon {
+              position: absolute;
+              left: 20px;
+              top: 14px;
+
+              .icon__box {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 30px;
+                width: 30px;
+                background-color: $color-human;
+                border-radius: 50%;
+              }
+            }
+
+            .header__right {
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+
+              .header-msisdn {
+                display: flex;
+                flex-direction: column;
+
+                .header__title {
+                  font-size: 16px;
+                }
+
+                .header__content {
+                  font-size: 14px;
+                }
+              }
+
+              .header__operation {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+
+                .trajectory-text {
+                  margin-right: 12px;
+                  font-family: Helvetica-Bold;
+                  font-size: 12px;
+                  color: $color-human;
+                  font-weight: 700;
+                  cursor: pointer;
+
+                  i {
+                    font-size: 12px !important;
+                    font-weight: bolder;
+                    margin-right: 3px;
+                    color: $color-human;
+                  }
+                }
+
+                .cancel-follow {
+                  margin-right: 14px;
+
+                  i {
+                    cursor: pointer;
+                    font-size: 8px;
+                  }
+                }
+              }
+            }
+          }
+
+          .subscriber__body {
+            padding: 10px 18px;
+
+            .body__item {
+              display: flex;
+
+              .item__label {
+                padding-right: 10px;
+                text-align: right;
+                width: 60px;
+                font-size: 12px;
+                color: $color-text-primary;
+              }
+
+              .item__value {
+                font-size: 12px;
+                font-weight: bold;
+                color: $color-human;
+              }
+            }
+
+            .body-item-record {
+              margin-top: 10px;
+
+              .item-record__header {
+                font-family: Helvetica;
+                font-size: 16px;
+                color: $color-text-primary;
+                font-weight: 400;
+                height: 38px;
+                line-height: 38px;
+              }
+
+              .item-record__info {
+
+              }
+
+              .item-record__timeline {
+                margin-left: 6px;
+
+                .el-timeline {
+                  padding-left: 0;
+                  //min-height: 300px;
+                  height: 300px;
+                  overflow: auto;
+
+                  &.el-timeline--hide {
+                  }
+
+                  .el-timeline-item {
+                    padding-bottom: 0;
+
+                    .el-timeline-item__tail {
+                      border-left: 2px dotted $color-inactive;
+                      margin-left: 2px;
+                    }
+
+                    .el-timeline-item__node--normal {
+                      background-image: radial-gradient($color-circle 20%, transparent);
+                      outline: var(--cn-bg-color-lighter) solid 6px;
+                      margin-left: 2px;
+                    }
+                  }
+
+                  .el-timeline-item:last-child {
+                    padding-bottom: 0;
+                  }
+                }
+
+                .timeline__info {
+                  display: flex;
+                  padding-bottom: 10px;
+
+                  .timeline__info--circle {
+                    display: flex;
+                    flex-direction: column;
+
+                    .info__circle {
+                      width: 17px;
+                      height: 17px;
+                      margin-left: -2px;
+                      border-radius: 50%;
+                      background-image: radial-gradient($color-circle 20%, transparent);
+                      outline: rgba(222, 52, 52, 0.30) solid 4px;
+                      margin-top: 2px;
+                    }
+
+                    .info__line {
+                      border-left: 2px $color-inactive dotted;
+                      height: 34px;
+                      margin-left: 6px;
+                      transition: all 0.2s;
+                    }
+                  }
+
+                  .timeline__info--item {
+                    padding-left: 13px;
+                    display: flex;
+                    flex-direction: column;
+                    font-size: 12px;
+                    color: $color-regular;
+
+                    .info--item__value {
+                      color: $color-text-primary;
+                      font-weight: 500;
+                      margin-left: 4px;
+                    }
+                  }
+                }
+
+                .timeline__item {
+                  display: flex;
+                  flex-direction: column;
+                  font-size: 12px;
+                  color: $color-regular;
+
+                  .item__value {
+                    color: $color-text-primary;
+                    font-weight: 500;
+                    margin-left: 4px;
+                  }
+                }
+
+                .item-record__btn, .item-record__btn-disabled {
+                  padding-right: 6px;
+                  cursor: pointer;
+                  text-align: center;
+                }
+
+                .item-record__btn-disabled {
+                  cursor: no-drop;
+                }
+
+                .scroll-view {
+                  width: 100%;
+                  height: 300px;
+                  overflow-y: scroll;
+                  position: relative;
+
+                  .scroll__item {
+                    width: 100%;
+                    height: 58px;
+                    display: flex;
+
+                    .item-circle {
+                      display: flex;
+                      flex-direction: column;
+
+                      .circle-circle {
+                        width: 10px;
+                        height: 10px;
+                        margin-left: 2px;
+                        border-radius: 50%;
+                        background-color: $color-circle;
+                      }
+
+                      .circle-line {
+                        border-left: 2px $color-inactive dotted;
+                        height: 34px;
+                        margin-left: 6px;
+                        margin-top: 6px;
+                        transition: all 0.2s;
+                      }
+                    }
+
+                    .item-content {
+                      display: flex;
+                      flex-direction: column;
+                      font-size: 12px;
+                      color: $color-regular;
+                      padding-left: 16px;
+
+                      .item__value {
+                        color: $color-text-primary;
+                        font-weight: 500;
+                        margin-left: 4px;
+                      }
+                    }
+                  }
+
+                  .scroll-list {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    cursor: pointer;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .geo-analysis__hexagon-tooltip {
+    position: fixed;
+    background-color: rgba(255, 255, 255, 0.80);
+    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.5);
+    border-radius: 2px;
+    min-width: 185px;
+    z-index: 3;
+
+    /*&.geo-analysis__hexagon-tooltip--hexagon {
+    }*/
+    &.geo-analysis__hexagon-tooltip--human {
+      .icon__box {
+        background-color: $color-human;
+      }
+    }
+
+    &.geo-analysis__hexagon-tooltip--base-station {
+      .icon__box {
+        background-color: $color-base-station;
+      }
+
+      .hexagon-tooltip__body {
+        .body__item .item__label {
+          width: 140px;
+        }
+      }
+    }
+
+    .hexagon-tooltip__header {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      padding: 10px 0 10px 63px;
+      color: $color-white;
+
+      .header__icon {
+        position: absolute;
+        left: 14px;
+        top: 16px;
+
+        .icon__box {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 32px;
+          width: 32px;
+          border-radius: 50%;
+        }
+      }
+
+      .header__title {
+        font-size: 16px;
+      }
+
+      .header__content {
+        font-size: 14px;
+      }
+    }
+
+    .hexagon-tooltip__body {
+      padding: 8px 18px;
+
+      .body__timeline {
+        display: flex;
+        flex-direction: row;
+        padding: 3px 0;
+
+        .timeline-symbol {
+          margin-top: 6px;
+          margin-right: 6px;
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background-color: $color-circle;
+        }
+      }
+
+      .body__item {
+        display: flex;
+
+        .item__label {
+          padding-right: 10px;
+          text-align: right;
+          width: 60px;
+          font-size: 12px;
+          color: $color-text-primary;
+        }
+
+        .item__value {
+          font-size: 12px;
+          font-weight: bold;
+          color: $color-human;
+        }
+      }
+
+      .body__tracking {
+        padding-top: 6px;
+        font-size: 12px;
+        color: $color-business;
+        text-decoration: underline;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  70% {
+    opacity: 0.6;
+  }
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/src/assets/css/components/views/report/report.scss b/src/assets/css/components/views/report/report.scss
index 906ded73..83495e5b 100644
--- a/src/assets/css/components/views/report/report.scss
+++ b/src/assets/css/components/views/report/report.scss
@@ -1,39 +1,49 @@
+$fill-color-blank: var(--el-fill-color-blank);
+$color-regular: var(--el-text-color-regular);
+$bg-color-dark: var(--el-border-color-dark);
+
 .cn-report {
-  background: #fff;
+  background: $fill-color-blank;
   margin: 10px;
   height: calc(100% - 20px) !important;
   display: flex;
   flex-direction: row;
+
   .cn-report-left {
     width: 288px;
     height: 100%;
-    border-right: 1px solid  #E7EAED;
+    border-right: 1px solid var(--el-border-color-light);
     position: relative;
     overflow: auto;
+
     .cn-report-left-title {
       padding: 28px 0 26px 13px;
       font-size: 16px;
-      color: #333333;
+      color: var(--el-text-color-primary);
       letter-spacing: 0;
     }
+
     .cn-report-left-menu {
       width: 250px;
       word-break: normal;
       margin: auto;
       font-size: 14px;
-      color: #333333;
+      color: var(--el-text-color-primary);
       letter-spacing: 0;
       padding: 14px;
       cursor: pointer;
     }
+
     .cn-report-left-menu.cn-active {
-      background: #F4FAFF;
+      background: var(--el-color-business-light-9);
       border-radius: 2px;
-      color: #0091FF;
+      color: var(--el-color-business);
     }
   }
+
   .cn-report-right {
     flex: 1;
+
     .list-page .main-container {
       padding: 0;
 
@@ -43,159 +53,194 @@
         .el-table--fit.el-table--border {
           height: calc(100% - 55px) !important;
         }
+
         .el-table__header th:first-of-type {
           border-right: none;
         }
+
         .has-gutter .el-table-column--selection .el-checkbox {
           border-left: none;
           display: none;
         }
+
         .el-scrollbar__bar.is-vertical {
           z-index: 1000;
         }
+
         .el-table__row .el-table-column--selection .cell {
           padding: 0;
         }
+
         .el-table__row.expanded {
           td {
             border-bottom: none;
           }
         }
+
         .el-table__body-wrapper {
           .el-table__expanded-cell {
             z-index: 100;
           }
         }
+
         .el-table__fixed,
         .el-table__fixed-right {
           .el-table__expanded-cell {
             visibility: hidden;
           }
         }
+
         .el-table__expanded-cell {
           .down {
             margin-left: 32px;
             height: 100%;
             width: calc(100% - 32px);
-            background: #fff; //盖住fixed产生的阴影
+            background: $fill-color-blank; //盖住fixed产生的阴影
             :deep .is-leaf {
-              color: #1b2e3b;
-              background: #ebeef5;
+              color: var(--el-text-color-primary);
+              background: var(--el-border-color-lighter);
             }
+
             .el-range-editor--small.el-input__wrapper {
               height: 32px;
               line-height: 32px;
             }
+
             .cn-detection__footer {
               text-align: center;
               display: flex;
               justify-content: center;
+
               .el-pagination__jump {
                 margin-left: 3px;
               }
+
               .el-pagination__goto {
                 display: none;
               }
+
               .el-input--small {
                 width: 46px !important;
+
                 .el-input__wrapper {
                   height: 22px;
                 }
               }
+
               .el-pagination--small {
                 .btn-prev {
                   margin-right: 10px;
                 }
+
                 .btn-next {
                   margin-left: 10px;
                 }
+
                 &span {
-                  color: $--color-text-primary;
+                  color: var(--el-text-color-primary);
                 }
               }
             }
           }
+
           .block.drop-down-time {
             margin: 15px 0 14px 0;
+
             .el-date-editor {
               justify-content: center;
+
               .el-range-separator {
                 width: 24px;
               }
+
               .el-input__icon.el-range__close-icon {
                 display: none;
               }
             }
           }
+
           .expand {
             min-height: 95px;
             display: flex;
             flex-wrap: wrap;
             position: relative;
+
             .panel-chart__no-data {
               line-height: 95px;
             }
+
             .expand-cell {
               display: flex;
-              background: #FFFFFF;
-              border: 1px solid #E7EAED;
+              background: $fill-color-blank;
+              border: 1px solid var(--el-border-color-light);
               border-radius: 2px;
               margin: 0 12px 16px 0;
               width: 300px;
               height: 97px;
+
               .expand-right {
-                background: #F9F9F9;
+                background: var(--el-fill-color-lighter);
                 border-radius: 2px;
                 width: 97px;
                 height: 94px;
                 position: relative;
+
                 .demo-progress {
                   position: absolute;
                   top: 21px;
                   left: 18.5px;
                 }
-                .demo-progress,.demo-progress .el-progress-circle {
+
+                .demo-progress, .demo-progress .el-progress-circle {
                   width: 57px !important;
                   height: 57px !important;
                 }
               }
+
               .expand-left {
                 text-align: center;
                 width: calc(100% - 97px);
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
+
                 .expand-name {
                   font-size: 12px;
-                  color: #666666;
+                  color: $color-regular;
                   font-weight: 400;
                   margin-bottom: 4px;
                   display: flex;
                   align-items: center;
                   justify-content: center;
+
                   i {
                     padding: 2px 3px 0 0;
                   }
                 }
+
                 .expand-time {
                   font-size: 12px;
-                  color: #666666;
+                  color: $color-regular;
                   margin-bottom: 4px;
+
                   div:nth-of-type(1) {
                     font-size: 12px;
-                    color: #999999;
+                    color: var(--el-color-info);
                   }
                 }
+
                 .expand-icon {
                   display: flex;
                   justify-content: space-evenly;
                   margin: 0 8px;
                   font-size: 14px;
+
                   .table-operation-item--no-border {
                     cursor: pointer;
                     position: relative;
                     font-size: 16px;
                   }
+
                   .table-operation-item--disabled {
                     cursor: not-allowed;
                     filter: grayscale(1);
@@ -208,7 +253,8 @@
         }
       }
     }
-    .table-operation-all {
+
+    /*.table-operation-all {
       width: 300px;
       position: absolute;
       bottom: 17px;
@@ -217,57 +263,68 @@
       line-height: 24px;
       height: 24px;
       display: flex;
+
       .el-checkbox {
         width: 14px;
         height: 14px;
         padding: 0;
-        .el-checkbox__input,.el-checkbox__inner {
+
+        .el-checkbox__input, .el-checkbox__inner {
           width: 100%;
           height: 100%;
           min-width: unset;
         }
       }
+
       .table-operation-all-span {
         height: 24px;
         display: flex;
+
         span {
           margin: 0 10px;
           font-size: 14px;
-          color: #666666;
+          color: $color-regular;
           letter-spacing: 0;
           font-weight: 400;
         }
+
         .table-operation-back-down {
           font-weight: 500;
           height: 24px;
-          background: #D7D7D7;
+          background: $bg-color-dark;
           border-radius: 2px;
           cursor: not-allowed;
+
           span {
             margin: 3px 8px;
             font-size: 12px;
-            color: #FFFFFF;
+            color: var(--el-color-white);
           }
         }
+
         .table-operation-back-down div {
-          color: #FFFFFF;
+          color: var(--el-color-white);
           height: 24px;
-          background: #D7D7D7;
+          background: $bg-color-dark;
           border-radius: 2px;
+
           i {
             font-size: 25px;
             top: calc(50% - 12px);
           }
         }
+
         .table-operation-back-down.table-operation-all-checkbox {
           background: #0091ff;
           cursor: pointer;
-         }
+        }
+
         .table-operation-back-down.table-operation-all-loading {
-          background: #D7D7D7;
-         }
+          background: $bg-color-dark;
+        }
       }
-    }
+    }*/
+
     .table-operation-items {
       .table-operation-item--no-border {
         margin-right: 16px;
@@ -275,9 +332,11 @@
         position: relative;
         font-size: 16px;
       }
+
       .table-operation-item--no-border:last-of-type {
         margin-right: 0;
       }
+
       .table-operation-item--no-border {
         display: flex;
         justify-content: center;
diff --git a/src/assets/css/components/views/setting/knowledgeBase.scss b/src/assets/css/components/views/setting/knowledgeBase.scss
index 980c82c6..8ad0d23b 100644
--- a/src/assets/css/components/views/setting/knowledgeBase.scss
+++ b/src/assets/css/components/views/setting/knowledgeBase.scss
@@ -1,128 +1,162 @@
+$color-primary: var(--el-color-primary);
+$color-text-primary: var(--el-text-color-primary);
+$color-fill-light: var(--el-fill-color-light);
+$color-regular: var(--el-text-color-regular);
+$color-info: var(--el-color-info);
+$color-white: var(--el-fill-color-blank);
+$color-business: var(--el-color-business);
+$color-info-light-7: var(--el-color-info-light-7);
+$color-bg-lighter: var(--cn-bg-color-lighter);
+$color-border-light: var(--el-border-color-light);
+$color-border-lighter: var(--el-border-color-lighter);
+$color-border-dark: var(--el-border-color-dark);
+$color-business-hover: var(--el-color-business-light-1);
+$color-business-border-hover: var(--el-color-business-dark-2);
+$transition-duration: var(--el-transition-duration-fast);
+$color-total: #00A7AB; // 以下三个颜色找不到匹配，故保留
+$color-new: #98709B;
+$color-mousemove-cursor: #D3D0D8;
+
 .knowledge-base {
   height: 100%;
-  overflow:auto;
+  overflow: auto;
+
   &.list-page {
     height: calc(100% - 52px);
   }
+
   .type-tag {
     display: inline-block;
     padding: 0 10px;
-    background-color: #EBF7FA;
-    color: #046ECA;
-    box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+    background-color: var(--el-color-primary-light-9);
+    color: $color-primary;
+    box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
     border-radius: 12px;
   }
 
-  .list-desc{
+  .list-desc {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
   .knowledge-base__top {
-    display:flex;
-    justify-content: space-between ;
-    align-items:center;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
     .top-title {
       font-size: 24px;
-      color: #353636;
-      font-weight: 900;
+      color: $color-text-primary;
+      font-weight: bold;
       line-height: 24px;
       display: flex;
       align-items: center;
       padding-bottom: 8px;
       padding-top: 20px;
-      margin-left:20px;
+      margin-left: 20px;
     }
+
     .builtIn-to-user-defined {
-      margin-right:20px;
+      margin-right: 20px;
       margin-top: 20px;
     }
   }
+
   .top-tool-btn--user_defined_library {
-    background: #F5F8FA;
-    border: 1px solid rgba(222,222,222,1);
-    box-shadow: 0px 2px 4px 0px rgba(51,51,51,0.02);
+    background: $color-fill-light;
+    border: 1px solid $color-info-light-7;
+    box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
     border-radius: 2px;
-    height:28px;
-    padding:8px 10px;
+    height: 28px;
+    padding: 8px 10px;
     font-size: 12px;
-    color: #353636;
+    color: $color-text-primary;
     font-weight: 500;
     line-height: 28px;
     display: flex;
     justify-content: center;
     align-items: center;
+
     i {
-      color: #575757;
-      font-size:14px !important;
-      margin-right:6px;
+      color: $color-regular;
+      font-size: 14px !important;
+      margin-right: 6px;
     }
   }
+
   .top-tool-btn--user_defined_library:hover {
     border: 1px solid $--border-color-primary;
     background-color: $--button-gray-hover-background-color;
     cursor: pointer;
   }
+
   .knowledge-base-built-in__content {
-    display:flex;
-    flex-direction:row;
-    padding:12px 0 20px 20px;
-    height:calc(100% - 52px);
+    display: flex;
+    flex-direction: row;
+    padding: 12px 0 20px 20px;
+    height: calc(100% - 52px);
+
     .list-card {
-      display:flex;
-      flex-direction:column;
+      display: flex;
+      flex-direction: column;
       justify-content: space-between;
       width: 100%;
+
       .card-type-title {
         font-size: 14px;
-        color: #353636;
+        color: $color-text-primary;
         font-weight: bold;
+        margin-top: 4px;
 
         display: flex;
         align-items: center;
 
         margin-bottom: 6px;
       }
+
       .list-mode__card {
         width: 100%;
         padding-right: 2px;
-        position:relative;
+        position: relative;
 
-        .table-no-data{
+        .table-no-data {
           height: 100%;
           display: flex;
           align-items: center;
           justify-content: center;
           line-height: 60px;
-          color: #909399;
+          color: $color-info;
         }
+
         .el-checkbox-group {
           display: flex;
           flex-wrap: wrap;
-          flex-direction:row;
+          flex-direction: row;
         }
-        .card-selected{
-          box-shadow: 3px 3px 11px 0 rgba(0,0,0,0.1);
-          border: 1px solid rgba(197,197,197,1) !important;
+
+        .card-selected {
+          box-shadow: 3px 3px 11px 0 rgba(0, 0, 0, 0.1);
+          border: 1px solid $color-border-light !important;
         }
+
         .card-box {
           display: inline-block;
-          background: #FFFFFF;
+          background: $color-white;
           padding-bottom: 16px;
           padding-right: 16px;
           height: 274px;
 
-          @media only screen  and (min-width: 1024px) {
+          @media only screen and (min-width: 1024px) {
             width: 25%;
           }
-          @media only screen  and (min-width: 1440px) {
+          @media only screen and (min-width: 1440px) {
             width: 20%;
           }
-          @media only screen  and (min-width: 1920px) {
+          @media only screen and (min-width: 1920px) {
             width: 16.65%
           }
-          @media only screen  and (min-width: 2560px) {
+          @media only screen and (min-width: 2560px) {
             width: 12.5%
           }
         }
@@ -130,142 +164,162 @@
         .card-item {
           display: flex;
           flex-direction: column;
-          border: 1px solid rgba(226,229,236,1);
+          border: 1px solid $color-border-light;
           border-radius: 4px;
           height: 100%;
+
           .card-content {
-            height:calc(100% - 32px);
-            padding:15px;
-            display:flex;
+            height: calc(100% - 32px);
+            padding: 15px;
+            display: flex;
             flex-direction: column;
+
             .card-operate {
-              position:relative;
+              position: relative;
+
               .card-enable {
-                position:absolute;
-                right:0px;
-                top:0px;
+                position: absolute;
+                right: 0;
+                top: 0;
               }
             }
+
             .card-icon {
-              margin-top:9px;
-              width:100%;
-              height:50px;
-              color:red;
-              display:flex;
-              justify-content: center;
-              align-items: center;
-              .cn-icon-add-knowledge-base {
-                font-size:50px;
-              }
-            }
-            .card-title {
-              font-size: 16px;
-              color: #353636;
-              font-weight: 700;
-              margin-bottom:15px;
-              margin-top:10px;
+              margin-top: 9px;
+              width: 100%;
+              height: 50px;
+              color: red;
               display: flex;
               justify-content: center;
               align-items: center;
+
+              .cn-icon-add-knowledge-base {
+                font-size: 50px;
+              }
+            }
+
+            .card-title {
+              font-size: 16px;
+              color: $color-text-primary;
+              font-weight: 700;
+              margin-bottom: 15px;
+              margin-top: 10px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+
               .card-title-name {
-                width:100%;
+                width: 100%;
                 height: 19.2px;
                 line-height: 19.2px;
                 overflow: hidden; //超出的文本隐藏
                 text-overflow: ellipsis; //溢出用省略号显示
-                white-space:nowrap;
+                white-space: nowrap;
                 word-break: break-all;
                 text-align: center;
 
                 font-family: NotoSansSC-Bold;
                 font-size: 14px;
-                color: #333333;
+                color: $color-text-primary;
                 letter-spacing: 0;
                 font-weight: 700;
               }
+
               .card-title-more {
                 position: relative;
-                color:#575757;
+                color: $color-regular;
+
                 .el-checkbox__input.is-checked .el-checkbox__inner {
-                  background-color: #38ACD2;
-                  border-color: #38ACD2;
+                  background-color: $color-business;
+                  border-color: $color-business;
                 }
+
                 .el-checkbox__input.is-checked .el-checkbox__inner::after {
                   left: 5px;
                   top: 2px;
                 }
+
                 .el-checkbox__inner {
                   border-radius: 50%;
-                  width:16px;
-                  height:16px;
-                  background-color: #DEDEDE;
-                  border-color: #DEDEDE;
-                  z-index:1;
+                  width: 16px;
+                  height: 16px;
+                  background-color: $color-info-light-7;
+                  border-color: $color-info-light-7;
+                  z-index: 1;
                 }
+
                 .el-checkbox__inner::after {
                   left: 5px;
                   top: 2px;
                   transform: rotate(45deg) scaleY(1);
                 }
+
                 .card-operate {
-                  background: #FFFFFF;
-                  border: 1px solid rgba(197,197,197,1);
-                  box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+                  background: $color-white;
+                  border: 1px solid $color-border-light;
+                  box-shadow: -1px 1px 10px -1px rgba(205, 205, 205, 0.85);
                   border-radius: 2px;
                   position: absolute;
                   top: 20px;
                   right: -10px;
                   height: 56px;
                   width: 80px;
-                  display:flex;
+                  display: flex;
                   flex-direction: column;
-                  padding-top:4px;
-                  padding-bottom:4px;
+                  padding-top: 4px;
+                  padding-bottom: 4px;
                   font-family: Helvetica;
                   font-size: 12px;
                   font-weight: 400;
+
                   .card-title-more-delete {
                     z-index: 1;
                     line-height: 24px;
                     height: 24px;
-                    background: #FFFFFF;
+                    background: $color-white;
                     padding-left: 9px;
-                    color: #666666;
+                    color: $color-regular;
                   }
+
                   .card-title-more-delete:hover {
-                    background: #F7F7F7;
-                    color: #046ECA;
+                    background: $color-bg-lighter;
+                    color: $color-primary;
                   }
+
                   .card-title-more-delete:active {
-                    background: #F7F7F7;
-                    color: #046ECA;
+                    background: $color-bg-lighter;
+                    color: $color-primary;
                   }
+
                   .card-title-more-edit {
                     z-index: 1;
                     line-height: 24px;
                     height: 24px;
-                    background: #FFFFFF;
+                    background: $color-white;
                     padding-left: 9px;
-                    color: #666666;
+                    color: $color-regular;
                   }
+
                   .card-title-more-edit:hover {
-                    background: #F7F7F7;
-                    color: #046ECA;
+                    background: $color-bg-lighter;
+                    color: $color-primary;
                   }
+
                   .card-title-more-edit:active {
-                    background: #F7F7F7;
-                    color: #046ECA;
+                    background: $color-bg-lighter;
+                    color: $color-primary;
                   }
                 }
               }
             }
+
             .card-desc {
               font-size: 12px;
-              color: #717171;
+              color: $color-regular;
               line-height: 18px;
               font-weight: 400;
-              margin-bottom:0;
-              max-height:88px;
+              margin-bottom: 0;
+              max-height: 88px;
 
               overflow: hidden;
               display: -webkit-box;
@@ -274,164 +328,188 @@
               -webkit-box-orient: vertical;
             }
           }
+
           .card-operate__footer {
-            height:40px;
-            display:flex;
+            height: 40px;
+            display: flex;
             flex-direction: row;
-            justify-content:center;
+            justify-content: center;
             font-size: 14px;
             font-weight: 400;
             align-items: center;
-            padding-left:16px;
-            padding-right:16px;
-            padding-bottom:20px;
+            padding-left: 16px;
+            padding-right: 16px;
+            padding-bottom: 20px;
+
             .top-tool-btn--update {
-              background-color: #38ACD2 !important;
-              padding-left:7px;
-              padding-right:7px;
-              color:#FFFFFF;
+              background-color: $color-business !important;
+              padding-left: 7px;
+              padding-right: 7px;
+              color: $color-white;
               font-size: 12px;
               font-weight: 500;
-              border: 1px solid rgba(46,136,166,0.85);
+              border: 1px solid rgba(46, 136, 166, 0.85);
               border-radius: 2px;
               line-height: 28px;
-              height:28px;
+              height: 28px;
               cursor: pointer;
               display: flex;
               justify-content: center;
               align-items: center;
+
               i {
-                color: #FFFFFF;
-                font-size:14px !important;
-                margin-right:5px;
+                color: $color-white;
+                font-size: 14px !important;
+                margin-right: 5px;
               }
             }
+
             .top-tool-btn--update:hover {
-              background-color: #57B8D9 !important;
-              border-color: #2E88A6 !important;
+              background-color: $color-business-hover !important;
+              border-color: $color-business-border-hover !important;
             }
+
             .card-type {
-              display:flex;
-              flex-direction:row;
+              display: flex;
+              flex-direction: row;
+
               .card-category {
                 font-size: 12px;
                 line-height: 16px;
-                color: #38ACD2;
+                color: $color-business;
                 font-weight: 400;
-                border: 1px solid rgba(56,172,210,1);
-                height:20px;
+                border: 1px solid $color-business;
+                height: 20px;
                 width: fit-content;
-                padding-left:11px;
-                padding-right:11px;
-                box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+                padding-left: 11px;
+                padding-right: 11px;
+                box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
                 border-radius: 10px;
-                margin-right:4px;
+                margin-right: 4px;
               }
+
               .card-source {
-                height:20px;
+                height: 20px;
                 width: fit-content;
-                padding-left:11px;
-                padding-right:11px;
-                background: rgba(56,172,210,0.10);
-                box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+                padding-left: 11px;
+                padding-right: 11px;
+                background: rgba(56, 172, 210, 0.10);
+                box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
                 border-radius: 10px;
                 font-size: 12px;
-                color: #046ECA;
+                color: $color-primary;
                 font-weight: 400;
               }
             }
+
             .card-enable {
             }
           }
         }
-        .card-item:hover{
-          background: rgba(56,172,210,0.04);
-          border: 1px solid rgba(56,172,210,0.48);
-          box-shadow: 0px 1px 4px 0px rgba(56,172,210,0.13);
+
+        .card-item:hover {
+          background: rgba(56, 172, 210, 0.04);
+          border: 1px solid rgba(56, 172, 210, 0.48);
+          box-shadow: 0 1px 4px 0 rgba(56, 172, 210, 0.13);
           border-radius: 4px;
         }
+
         .card-item__enable {
-          background: #FFFFFF;
-          border: 1px solid rgba(226,229,236,1);
-          box-shadow: 3px 3px 11px 0 rgba(0,0,0,0.1);
+          background: $color-white;
+          border: 1px solid $color-border-light;
+          box-shadow: 3px 3px 11px 0 rgba(0, 0, 0, 0.1);
           border-radius: 4px;
         }
       }
     }
   }
+
   .knowledge-base-user-defined__content {
-    display:flex;
-    flex-direction:row;
-    padding:12px 20px 20px 20px;
-    height:calc(100% - 52px);
+    display: flex;
+    flex-direction: row;
+    padding: 12px 20px 20px 20px;
+    height: calc(100% - 52px);
+
     .left-filter {
-      margin-right:20px;
-      width:320px;
-      min-width:320px;
-      height:100%;
-      display:flex;
-      flex-direction:column;
-      background: #FFFFFF;
-      border: 1px solid rgba(226,229,236,1);
+      margin-right: 20px;
+      width: 320px;
+      min-width: 320px;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      background: $color-white;
+      border: 1px solid $color-border-light;
       border-radius: 4px;
       overflow: auto;
+
       .filter-title {
-        height:32px;
-        padding-left:20px;
+        height: 32px;
+        padding-left: 20px;
         align-items: center;
         display: flex;
-        background: #F7F7F7;
-        box-shadow: 0 1px 0 0 rgba(226,229,236,1);
+        background: $color-bg-lighter;
+        box-shadow: 0 1px 0 0 $color-border-light;
         border-radius: 4px 4px 0 0;
         font-size: 14px;
-        color: #353636;
+        color: $color-text-primary;
         font-weight: 500;
       }
+
       .knowledge-filter {
         display: flex;
         flex-direction: column;
         margin-bottom: 0;
+
         .filter__header {
           display: flex;
           flex: 0 0 32px;
           align-items: center;
           padding-left: 20px;
-          color: #666;
+          color: $color-regular;
           cursor: pointer;
-          margin-top:15px;
+          margin-top: 15px;
+
           span {
             font-size: 14px;
             padding-left: 0;
           }
+
           i {
             font-size: 12px;
             transition: all linear .1s;
             transform: rotate(0) translate(0, 2px);
           }
+
           i.arrow-rotate {
             transform: rotate(90deg) translate(2px, 3px);
           }
+
           .new-knowledge-filter-header-title {
             font-size: 14px;
-            color: #353636;
+            color: $color-text-primary;
             font-weight: 500;
           }
+
           .new-knowledge-filter-icon {
             margin-left: 8px;
             margin-bottom: 2px;
             font-weight: bold !important;
-            color: #575757;
+            color: $color-regular;
           }
         }
+
         .filter__body {
           padding: 3px 0 0 20px;
+
           .el-tree {
-            font-size:14px;
-            color: #353636;
+            font-size: 14px;
+            color: $color-text-primary;
             font-weight: 400;
+
             .el-tree-node {
               .el-tree-node__content {
                 margin-bottom: 2px;
+
                 .custom-tree-node {
                   flex: 1;
                   display: flex;
@@ -440,75 +518,88 @@
                   padding-right: 20px;
                   font-size: 14px;
                   font-weight: 400;
+
                   .count-tree-node {
-                    color: #717171;
+                    color: $color-regular;
                   }
                 }
               }
             }
           }
+
           .el-checkbox-group {
             display: flex;
             flex-direction: column;
           }
+
           .el-checkbox {
             display: flex;
             align-items: center;
             padding: 5px 0;
             margin-right: 5px;
+
             .el-checkbox__input {
               .el-checkbox__inner {
-                background: #F2F7F9;
-                border: 1px solid rgba(0,0,0,0.15);
+                background: var(--el-color-business-light-9);
+                border: 1px solid rgba(0, 0, 0, 0.15);
                 border-radius: 2px;
               }
             }
+
             .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-              border-color: #38ACD2;
-              background: #38ACD2;
+              border-color: $color-business;
+              background: $color-business;
               border-radius: 2px;
             }
+
             .el-checkbox__input.is-indeterminate .el-checkbox__inner:before {
-              background: #FFFFFF;
+              background: $color-white;
               border-radius: 1px;
             }
+
             .el-checkbox__input.is-checked {
               .el-checkbox__inner {
-                border-color: #38ACD2;
-                background: #38ACD2;
+                border-color: $color-business;
+                background: $color-business;
                 border-radius: 2px;
               }
             }
+
             .el-checkbox__input.is-focus {
               .el-checkbox__inner {
-                border-color: #38ACD2;
+                border-color: $color-business;
               }
             }
 
             .el-checkbox__label {
               width: 100%;
-              padding-right:15px;
-              padding-left:7px;
+              padding-right: 15px;
+              padding-left: 7px;
             }
+
             .filter__checkbox-label {
               display: flex;
               justify-content: space-between;
               align-items: center;
               font-weight: 400;
-              color: #353636;
+              color: $color-text-primary;
               font-size: 14px;
+
               .filter-label {
                 display: flex;
               }
+
               .filter-count {
-                color: #717171 !important;
+                color: $color-regular !important;
               }
+
               .severity-color-block {
                 width: 4px;
                 height: 15px;
                 border-radius: 2px;
               }
             }
+
             &:last-of-type {
               padding-bottom: 0;
             }
@@ -518,48 +609,58 @@
 
       .knowledge-filter:last-child {
         .filter__header {
-          margin-top:10px !important;
+          margin-top: 10px !important;
         }
       }
     }
+
     .right-list-card {
-      display:flex;
-      flex-direction:column;
+      display: flex;
+      flex-direction: column;
       justify-content: space-between;
       width: 100%;
-      height:100%;
+      height: 100%;
+
       .top-tools {
         display: flex;
-        align-items : center;
-        flex-direction:row;
-        justify-content: space-between ;
-        width:100%;
-        margin-bottom:20px;
+        align-items: center;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 100%;
+        margin-bottom: 20px;
+
         .top-tools__right {
           display: flex;
           justify-content: flex-end;
           align-items: center;
-          &>div {
+
+          & > div {
             //padding: 0 0 0 10px;
           }
+
           .el-button {
-            color: #575757;
+            color: $color-regular;
           }
+
           .el-button--small {
             padding: 7px 9px !important;
             min-height: 28px !important;
+
             &.active i {
-              color: #046ECA;
+              color: $color-primary;
             }
+
             i {
               font-size: 12px;
             }
           }
         }
+
         .top-tools__left {
           display: flex;
-          align-items : center;
-          flex-direction:row;
+          align-items: center;
+          flex-direction: row;
+
           .top-tool-btn {
             cursor: pointer;
             height: 28px;
@@ -569,105 +670,129 @@
             border-radius: $--button-border-radius;
             background-color: $--button-gray-background-color;
             transition: background-color linear .1s;
-            font-size:12px;
+            font-size: 12px;
             font-weight: 500;
+
             i {
               font-size: 14px;
-              color: #575757;
-              margin-right:4px;
+              color: $color-regular;
+              margin-right: 4px;
             }
           }
+
           .top-tool-btn:disabled {
             cursor: not-allowed;
             opacity: 0.66;
+
             i {
             }
           }
+
           .top-tool-btn:hover:not(.cn-btn-disabled) {
             border: 1px solid $--border-color-primary;
             background-color: $--button-gray-hover-background-color;
           }
+
           .top-tool-btn:focus:not(.cn-btn-disabled), .top-tool-btn.is-focus {
             background-color: $--button-gray-active-background-color;
             border: 1px solid $--border-color-primary;
+
             i {
-              color: #575757;
+              color: $color-regular;
             }
           }
+
           .top-tool-btn--delete.top-tool-btn:focus:not(.cn-btn-disabled) {
             background-color: $--button-gray-hover-background-color;
-            border-color: #FFC4B9;
+            border-color: var(--el-color-danger-light-7);
+
             i {
-              color: #F0745A;
+              color: var(--el-color-danger);
             }
           }
+
           .top-tool-btn--create {
-            background-color: #38ACD2 !important;
-            border-color: #2E88A6 !important;
-            color:#FFFFFF;
+            background-color: $color-business !important;
+            border-color: $color-business-border-hover !important;
+            color: $color-white;
+
             i {
-              color: #FFFFFF;
+              color: $color-white;
             }
           }
+
           .top-tool-btn--user_defined_library {
-            background: #F5F8FA !important;
-            border: 1px solid rgba(222,222,222,1);
-            box-shadow: 0px 2px 4px 0px rgba(51,51,51,0.02);
+            background: $color-fill-light !important;
+            border: 1px solid $color-info-light-7;
+            box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
             border-radius: 2px;
-            height:28px;
-            padding:8px 10px;
+            height: 28px;
+            padding: 8px 10px;
             font-size: 12px;
-            color: #353636;
+            color: $color-text-primary;
             font-weight: 500;
+
             i {
-              color: #575757;
-              font-size:14px !important;
-              margin-right:6px;
+              color: $color-regular;
+              font-size: 14px !important;
+              margin-right: 6px;
             }
           }
+
           .top-tool-btn--create:hover {
-            background-color: #57B8D9 !important;
-            border-color: #2E88A6 !important;
-            color:#FFFFFF;
+            background-color: $color-business-hover !important;
+            border-color: $color-business-border-hover !important;
+            color: $color-white;
+
             i {
-              color: #FFFFFF;
+              color: $color-white;
             }
           }
+
           .top-tool-btn--create:focus {
-            background-color: #31A5CD !important;
-            border-color: #2E88A6 !important;
-            color:#FFFFFF !important;
+            background-color: var(--el-color-business) !important;
+            border-color: $color-business-border-hover !important;
+            color: $color-white !important;
+
             i {
-              color: #FFFFFF !important;
+              color: $color-white !important;
             }
           }
+
           .top-tool-btn--create:disabled {
             opacity: 0.66;
-            background-color: #38ACD2 !important;
-            border-color: #2E88A6 !important;
-            color:#FFFFFF;
+            background-color: $color-business !important;
+            border-color: $color-business-border-hover !important;
+            color: $color-white;
+
             i {
-              color: #FFFFFF;
+              color: $color-white;
             }
           }
+
           .top-tool-search {
-            display:flex;
-            width:242px;
-            .el-input--small{
+            display: flex;
+            width: 242px;
+
+            .el-input--small {
               line-height: 27px;
+
               .el-input__inner {
                 height: 28px;
                 border-radius: 2px 0 0 2px;
               }
             }
+
             .top-tool-btn {
               border-left: none;
               border-radius: 0 2px 2px 0 !important;
             }
+
             .top-tool-btn--search:hover {
               border-left: none !important;
               border-radius: 0 2px 2px 0 !important;
             }
+
             .top-tool-btn--search:focus {
               border-left: none !important;
               border-radius: 0 2px 2px 0 !important;
@@ -675,6 +800,7 @@
           }
         }
       }
+
       .list-mode__row {
         width: 100%;
         height: calc(100% - 80px);
@@ -691,17 +817,19 @@
             padding-bottom: 6px;
             font-size: 12px;
             line-height: 12px;
-            color: #333;
+            color: $color-text-primary;
             font-weight: 500;
           }
+
           td {
             padding-top: 8px;
             padding-bottom: 8px;
             font-size: 12px;
             line-height: 12px;
-            color: #353636;
+            color: $color-text-primary;
             font-weight: 400;
           }
+
           .cell {
             height: fit-content;
             line-height: 20px;
@@ -717,177 +845,201 @@
                 .reference-tag {
                   display: inline-block;
                   padding: 0 10px;
-                  background-color: #EBF7FA;
-                  color: #046ECA;
-                  box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+                  background-color: var(--el-color-primary-light-9);
+                  color: $color-primary;
+                  box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
                   border-radius: 12px;
                   margin-bottom: 8px;
                   width: fit-content;
                   min-width: fit-content;
                 }
+
                 .reference-tag:last-of-type {
                   margin-bottom: 0 !important;
                   margin-right: 6px;
                 }
               }
+
               .reference-more {
                 display: flex;
                 flex-direction: column-reverse;
               }
             }
           }
+
           .el-switch {
             height: auto;
-            --el-switch-on-color: #38ACD2;
-            --el-switch-off-color: #C0CEDB;
+            --el-switch-on-color: $color-business;
           }
+
           .el-checkbox__input {
-            --el-checkbox-checked-bg-color: #38ACD2;
+            --el-checkbox-checked-bg-color: $color-business;
           }
         }
       }
+
       .list-mode__card {
         width: 100%;
-        height:calc(100% - 134px);
-        overflow-y:auto;
+        height: calc(100% - 134px);
+        overflow-y: auto;
         padding-right: 2px;
-        margin-bottom:30px;
-        .table-no-data{
+        margin-bottom: 30px;
+
+        .table-no-data {
           height: 100%;
           display: flex;
           align-items: center;
           justify-content: center;
           line-height: 60px;
-          color: #909399;
+          color: $color-info;
         }
+
         .el-checkbox-group {
           display: grid;
           grid-template-rows: repeat(auto-fill, 218px);
           grid-template-columns: repeat(auto-fit, minmax(282px, 1fr));
           grid-gap: 30px;
         }
-        .card-selected{
-          box-shadow: 3px 3px 11px 0 rgba(0,0,0,0.1);
-          border: 1px solid rgba(197,197,197,1) !important;
+
+        .card-selected {
+          box-shadow: 3px 3px 11px 0 rgba(0, 0, 0, 0.1);
+          border: 1px solid $color-border-light !important;
         }
+
         .card-item {
-          background: #FFFFFF;
-          border: 1px solid rgba(226,229,236,1);
+          background: $color-white;
+          border: 1px solid $color-border-light;
           border-radius: 4px;
-          height:218px;
-          display:flex;
-          flex-direction:column;
+          height: 218px;
+          display: flex;
+          flex-direction: column;
 
           .card-content {
-            height:calc(100% - 32px);
-            padding:16px;
-            display:flex;
+            height: calc(100% - 32px);
+            padding: 16px;
+            display: flex;
             flex-direction: column;
+
             .card-title {
               font-size: 16px;
-              color: #353636;
+              color: $color-text-primary;
               font-weight: 700;
-              margin-bottom:6px;
+              margin-bottom: 6px;
               display: flex;
               flex-direction: row;
               justify-content: space-between;
+
               .card-title-name {
-                width:210px;
+                width: 210px;
                 overflow: hidden; //超出的文本隐藏
                 text-overflow: ellipsis; //溢出用省略号显示
-                white-space:nowrap;
+                white-space: nowrap;
                 word-break: break-all;
               }
+
               .card-title-more {
                 position: relative;
-                color:#575757;
+                color: $color-regular;
+
                 .el-checkbox__input.is-checked .el-checkbox__inner {
-                  background-color: #38ACD2;
-                  border-color: #38ACD2;
+                  background-color: $color-business;
+                  border-color: $color-business;
                 }
+
                 .el-checkbox__input.is-checked .el-checkbox__inner::after {
                   left: 5px;
                   top: 2px;
                 }
+
                 .el-checkbox__inner {
                   border-radius: 50%;
-                  width:16px;
-                  height:16px;
-                  background-color: #DEDEDE;
-                  border-color: #DEDEDE;
-                  z-index:1;
+                  width: 16px;
+                  height: 16px;
+                  background-color: $color-info-light-7;
+                  border-color: $color-info-light-7;
+                  z-index: 1;
                 }
+
                 .el-checkbox__inner::after {
                   left: 5px;
                   top: 2px;
                   transform: rotate(45deg) scaleY(1);
                 }
+
                 .card-operate {
-                  background: #FFFFFF;
-                  border: 1px solid rgba(197,197,197,1);
-                  box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+                  background: $color-white;
+                  border: 1px solid $color-border-light;
+                  box-shadow: -1px 1px 10px -1px rgba(205, 205, 205, 0.85);
                   border-radius: 2px;
                   position: absolute;
                   top: 20px;
                   right: -10px;
                   height: 56px;
                   width: 80px;
-                  display:flex;
+                  display: flex;
                   flex-direction: column;
-                  padding-top:4px;
-                  padding-bottom:4px;
+                  padding-top: 4px;
+                  padding-bottom: 4px;
                   font-family: Helvetica;
                   font-size: 12px;
                   font-weight: 400;
+
                   .card-title-more-delete {
                     z-index: 1;
                     line-height: 24px;
                     height: 24px;
-                    background: #FFFFFF;
+                    background: $color-white;
                     padding-left: 9px;
-                    color: #666666;
+                    color: $color-regular;
                   }
+
                   .card-title-more-delete:hover {
-                    background: #F7F7F7;
-                    color: #046ECA;
+                    background: $color-bg-lighter;
+                    color: $color-primary;
                   }
+
                   .card-title-more-delete:active {
-                    background: #F7F7F7;
-                    color: #046ECA;
+                    background: $color-bg-lighter;
+                    color: $color-primary;
                   }
+
                   .card-title-more-edit {
                     z-index: 1;
                     line-height: 24px;
                     height: 24px;
-                    background: #FFFFFF;
+                    background: $color-white;
                     padding-left: 9px;
-                    color: #666666;
+                    color: $color-regular;
                   }
+
                   .card-title-more-edit:hover {
-                    background: #F7F7F7;
-                    color: #046ECA;
+                    background: $color-bg-lighter;
+                    color: $color-primary;
                   }
+
                   .card-title-more-edit:active {
-                    background: #F7F7F7;
-                    color: #046ECA;
+                    background: $color-bg-lighter;
+                    color: $color-primary;
                   }
                 }
               }
             }
+
             .card-id {
               font-size: 12px;
-              color: #999999;
+              color: $color-info;
               font-weight: 400;
-              margin-bottom:16px;
+              margin-bottom: 16px;
               line-height: 12px;
             }
+
             .card-desc {
               font-size: 12px;
-              color: #717171;
+              color: $color-regular;
               line-height: 18px;
               font-weight: 400;
-              margin-bottom:0px;
-              max-height:88px;
+              margin-bottom: 0;
+              max-height: 88px;
 
               overflow: hidden;
               display: -webkit-box;
@@ -896,66 +1048,74 @@
               -webkit-box-orient: vertical;
             }
           }
+
           .card-operate__footer {
-            height:40px;
-            display:flex;
+            height: 40px;
+            display: flex;
             flex-direction: row;
-            justify-content:space-between ;
+            justify-content: space-between;
             font-size: 14px;
             font-weight: 400;
             align-items: center;
-            padding-left:16px;
-            padding-right:16px;
-            padding-bottom:20px;
+            padding-left: 16px;
+            padding-right: 16px;
+            padding-bottom: 20px;
+
             .card-type {
-              display:flex;
-              flex-direction:row;
+              display: flex;
+              flex-direction: row;
+
               .card-category {
                 font-size: 12px;
                 line-height: 16px;
-                color: #38ACD2;
+                color: $color-business;
                 font-weight: 400;
-                border: 1px solid rgba(56,172,210,1);
-                height:20px;
+                border: 1px solid $color-business;
+                height: 20px;
                 width: fit-content;
-                padding-left:11px;
-                padding-right:11px;
-                box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+                padding-left: 11px;
+                padding-right: 11px;
+                box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
                 border-radius: 10px;
-                margin-right:4px;
+                margin-right: 4px;
               }
+
               .card-source {
-                height:20px;
+                height: 20px;
                 width: fit-content;
-                padding-left:11px;
-                padding-right:11px;
-                background: rgba(56,172,210,0.10);
-                box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+                padding-left: 11px;
+                padding-right: 11px;
+                background: rgba(56, 172, 210, 0.10);
+                box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
                 border-radius: 10px;
                 font-size: 12px;
-                color: #046ECA;
+                color: $color-primary;
                 font-weight: 400;
               }
             }
+
             .card-enable {
             }
           }
         }
-        .card-item:hover{
-          box-shadow: 3px 3px 11px 0 rgba(0,0,0,0.1);
+
+        .card-item:hover {
+          box-shadow: 3px 3px 11px 0 rgba(0, 0, 0, 0.1);
         }
+
         .card-item__enable {
-          background: #FFFFFF;
-          border: 1px solid rgba(226,229,236,1);
-          box-shadow: 3px 3px 11px 0 rgba(0,0,0,0.1);
+          background: $color-white;
+          border: 1px solid $color-border-light;
+          box-shadow: 3px 3px 11px 0 rgba(0, 0, 0, 0.1);
           border-radius: 4px;
         }
       }
+
       .knowledge-pagination {
         position: relative;
         height: 56px;
         width: 100%;
-        background: #FFFFFF;
+        background: $color-white;
 
         .el-pagination {
           position: absolute;
@@ -965,22 +1125,25 @@
     }
   }
 }
+
 .reference-tag__tip {
   display: flex;
   flex-direction: column;
   font-size: 12px;
-  color: #575757;
+  color: $color-regular;
   font-weight: 400;
-  min-width:130px;
-  max-height:240px;
-  overflow-y:auto;
-  cursor:pointer;
+  min-width: 130px;
+  max-height: 240px;
+  overflow-y: auto;
+  cursor: pointer;
+
   .reference-tag {
-    height:24px;
-    min-height:24px;
+    height: 24px;
+    min-height: 24px;
     padding-top: 3px;
   }
 }
+
 .edit-knowledge-base {
   height: 100%;
 
@@ -988,9 +1151,10 @@
     padding: 30px 0 30px 20px;
     font-size: 24px;
     line-height: 24px;
-    font-weight: 900;
-    color: #353636;
+    font-weight: bold;
+    color: $color-text-primary;
   }
+
   .edit-knowledge-base__body {
     display: flex;
     height: calc(100% - 147px);
@@ -1003,29 +1167,31 @@
 
     .enable-form__mt {
       .el-form {
-        margin-top:6px;
+        margin-top: 6px;
       }
     }
 
     .el-steps {
       margin-left: 10px;
+
       .el-step {
         transition: flex-basis ease-in-out .28s;
       }
+
       .el-step__head {
         .el-step__line {
           top: 26px;
           bottom: 2px;
-          background-color: #38ACD2;
+          background-color: $color-business;
           border-color: transparent;
           opacity: 0.66;
         }
 
         &.is-finish, &.is-process {
           .el-step__icon {
-            border-color: #38ACD2;
-            color: white;
-            background: #38ACD2;
+            border-color: $color-business;
+            color: $color-white;
+            background: $color-business;
           }
         }
 
@@ -1037,8 +1203,8 @@
 
         &.is-wait {
           .el-step__icon {
-            border-color: #38ACD2;
-            color: #38ACD2;
+            border-color: $color-business;
+            color: $color-business;
           }
         }
 
@@ -1060,6 +1226,7 @@
           height: 260px;
         }
       }
+
       .el-collapse-item {
         min-height: 58px;
         position: relative;
@@ -1069,87 +1236,100 @@
           line-height: unset;
           border: none;
           font-size: 16px;
-          color: #333333;
+          color: $color-text-primary;
 
           &.focusing:focus:not(:hover) {
             color: unset;
           }
+
           .form-sub-title {
             padding-left: 35px;
           }
         }
+
         [role|=tab] {
           display: flex;
           align-items: flex-start;
         }
+
         .el-collapse-item__arrow {
           position: absolute;
-          color: #38ACD2;
+          color: $color-business;
           font-weight: bold;
         }
+
         .el-collapse-item__wrap {
           padding-left: 35px;
           border: none;
           overflow: visible;
         }
+
         .el-collapse-item__content {
           position: relative;
           padding-bottom: 20px;
         }
-        .form-input .el-input__inner{
+
+        .form-input .el-input__inner {
           padding-right: 50px !important;
         }
 
         .upload-error-tip, .preview-error-tip {
           color: $--color-danger;
         }
+
         .upload-error-tip {
           margin-top: -11px;
         }
+
         .el-upload {
           margin-top: 12px;
 
           .upload-tip {
             font-size: 12px;
-            color: #999999;
+            color: $color-info;
 
             span {
               padding-left: 6px;
-              color: #326EC3;
+              color: var(--el-color-primary);
             }
           }
+
           .el-upload-dragger {
             padding-top: 20px;
             width: 320px;
             border-radius: 2px;
-            transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+            transition: border-color $transition-duration cubic-bezier(0.645, 0.045, 0.355, 1);
 
             .cn-icon-upload2 {
               font-size: 40px;
-              color: #999;
+              color: $color-info;
             }
           }
 
         }
+
         .el-upload--error .el-upload-dragger {
           border-color: $--color-danger;
         }
+
         .el-upload-list {
           .el-upload-list__item {
             padding: 0 5px;
             margin-top: unset;
             height: 36px;
             line-height: 36px;
-            background: #F5F8FA;
+            background: $color-fill-light;
             border-radius: 2px;
-            color: #353636;
+            color: $color-text-primary;
 
             .el-icon-close {
               top: 11px;
             }
+
             .el-icon-close-tip {
               top: 11px;
             }
+
             .el-progress.el-progress--line {
               top: unset;
             }
@@ -1161,24 +1341,27 @@
     .el-form {
       margin-top: 20px;
       width: 620px;
+
       label {
         padding-bottom: 6px;
         font-size: 14px;
-        color: #333333;
+        color: $color-text-primary;
         line-height: unset;
       }
 
       .el-form-item {
         margin-bottom: 12px;
       }
+
       .el-form-item__content {
         line-height: unset;
 
         .el-input__inner {
           padding-left: 8px;
           font-size: 14px;
-          color: #353636;
+          color: $color-text-primary;
         }
+
         .el-textarea__inner {
           padding-left: 8px;
           font-size: 12px;
@@ -1188,85 +1371,87 @@
           width: 100%;
 
           .el-input__inner {
-            background-color: #F5F8FA;
+            background-color: $color-fill-light;
           }
         }
+
         .form-select__enable {
           width: 100%;
 
-          .el-select__wrapper {
-            //padding-left: 22px !important;
-            .el-select__inner {
-              background-color: #521919 !important;
-              padding-left: 22px !important;
-            }
-          }
           .el-input__inner {
-            background-color: white !important;
+            background-color: $color-white !important;
             padding-left: 22px !important;
           }
         }
       }
     }
+
     .skeleton-border {
       position: relative;
       margin-top: 12px;
       padding: 15px;
-      border: 1px solid #DCDFE6;
+      border: 1px solid var(--el-color-primary-light-9);
       border-radius: 2px;
 
       .skeleton-item-row:not(:nth-of-type(6)) {
         margin-bottom: 5px;
       }
+
       .el-skeleton__item {
-        background: #F5F8FA;
+        background: $color-fill-light;
       }
+
       .skeleton-tip {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         font-size: 14px;
-        color: #353636;
+        color: $color-text-primary;
       }
     }
+
     .imported-tip {
       margin-top: 8px;
       margin-bottom: 4px;
       font-size: 14px;
-      color: #333333;
+      color: $color-text-primary;
 
       .cn-icon {
         font-size: 16px;
-        color: #38ACD2;
+        color: $color-business;
       }
     }
+
     .imported-table-box {
       position: relative;
       height: 394px !important;
-      border: 1px solid #DEDEDE;
+      border: 1px solid $color-info-light-7;
       border-radius: 2px;
-      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+      transition: border-color $transition-duration cubic-bezier(0.645, 0.045, 0.355, 1);
 
       &.imported-table-box--error {
         border-color: $--color-danger;
       }
+
       .entity-format-tip {
         position: absolute;
         left: 100%;
         padding-left: 10px;
         width: 200px;
-        color: #353636;
+        color: $color-text-primary;
 
         div {
           display: flex;
         }
+
         span {
           padding-right: 10px;
 
-          color: #909399;
+          color: $color-info;
         }
       }
+
       .imported-table {
         padding: 0 12px;
         width: 100%;
@@ -1275,12 +1460,14 @@
         th {
           text-align: left;
           font-size: 14px;
-          color: #353636;;
+          color: $color-text-primary;;
         }
+
         td {
           font-size: 14px;
-          color: #353636;
+          color: $color-text-primary;
         }
+
         .imported-data-msg, .imported-data-item, .imported-data-value {
           white-space: nowrap;
           overflow: hidden;
@@ -1300,24 +1487,27 @@
             border-radius: 2px;
           }
         }
+
         .imported-data-msg {
           width: 200px;
         }
 
         .el-icon-close {
-          color: #666;
+          color: $color-regular;
           font-weight: bold;
           cursor: pointer;
 
           &:hover {
-            color: #111;
+            color: var(--el-color-black);
           }
         }
+
         .el-icon-success {
-          color: #749F4D;
+          color: var(--el-color-success);
         }
+
         .el-icon-error {
-          color: #E26154;
+          color: var(--el-color-error);
         }
 
         .imported-data-btn {
@@ -1328,17 +1518,17 @@
           .imported-data-left-btn {
             font-size: 14px;
             margin: 0 7px;
-            color: #666;
+            color: $color-regular;
             cursor: pointer;
           }
 
           .imported-data-back {
-            color: #666;
+            color: $color-regular;
             cursor: pointer;
           }
 
           .imported-data-save {
-            color: #38ACD2;
+            color: $color-business;
             cursor: pointer;
           }
         }
@@ -1351,10 +1541,10 @@
         bottom: 42px !important;
         margin-top: 4px;
         padding-top: 10px;
-        border-top: 1px solid #eee;
+        border-top: 1px solid $color-border-lighter;
 
         border-top: 0 !important;
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid $color-border-lighter;
         margin-bottom: 0;
         padding-bottom: 0;
 
@@ -1366,12 +1556,14 @@
           border: none;
           font-size: 12px;
         }
+
         .el-pagination .el-pager li {
-          color: #353636;
+          color: $color-text-primary;
         }
+
         .el-pagination .el-pager li.active {
-          background-color: #38ACD2;
-          color: white;
+          background-color: $color-business;
+          color: $color-white;
         }
       }
 
@@ -1393,97 +1585,106 @@
       }
     }
   }
+
   .edit-knowledge-base__footer {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 60px;
     margin-top: 3px;
-    box-shadow: 0 -1px 4px 0 rgba(0,0,0,0.10);
+    box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.10);
 
     .footer__btn {
       margin: 0 10px;
       height: 30px;
       min-width: 74px;
       padding: 0 15px;
-      color: white;
-      background-color: #699DC9;
+      color: $color-white;
+      background-color: var(--el-color-business);
       border: none;
       border-radius: 4px;
       outline: none;
       font-size: 14px;
       cursor: pointer;
-      transition: background-color linear .2s, color linear .1s;
+      transition: background-color linear $transition-duration, color linear .1s;
     }
+
     .footer__btn:hover:not(.footer__btn--disabled) {
-      background-color: lighten(#699DC9, 10%);
+      background-color: var(--el-color-business-light-2);
     }
+
     .footer__btn--light {
-      background-color: #F5F6F7;
+      background-color: $color-fill-light;
       border: 1px solid $--border-color-primary;
-      color: #333;
+      color: $color-text-primary;
     }
+
     .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
-      background-color: white;
-      border-color: lighten(#38ACD2, 40%);
-      color: #38ACD2;
+      background-color: $color-white;
+      border-color: var(--el-color-business-light-5);
+      color: $color-business;
     }
+
     .footer__btn--disabled {
       opacity: .6;
       cursor: default;
     }
   }
 }
+
 .addTagBtn {
   position: absolute;
   bottom: 9px;
-  height:24px !important;
+  height: 24px !important;
   min-height: 24px !important;
   font-size: 12px;
-  color: #353636;
+  color: $color-text-primary;
   font-weight: 500;
   width: 598px;
   margin-left: 10px;
-  background: rgb(245, 248, 250);
-  border: 1px #DEDEDE solid;
+  background: $color-fill-light;
+  border: 1px $color-info-light-7 solid;
   padding: 0 !important;
-  box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+  box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
   border-radius: 2px;
-  font-family:NotoSansHans-Medium !important;
+  font-family: NotoSansHans-Medium !important;
 
   .add-tag-btn {
-    color: #575757 !important;
+    color: $color-regular !important;
     font-size: 9px !important;
     margin: 0 8px 2px 8px;
   }
 
   &:hover {
-   i {
-     color: #699DC9 !important;
-   }
+    i {
+      color: var(--el-color-business) !important;
+    }
   }
 
   span {
-    font-family:NotoSansHans-Medium !important;
+    font-family: NotoSansHans-Medium !important;
   }
 }
+
 .del-model-hint {
-  display:flex;
+  display: flex;
   flex-direction: column;
-  padding-bottom:0px !important;
-  width:480px !important;
-  height:300px !important;
-  .el-dialog__header{
+  padding-bottom: 0 !important;
+  width: 480px !important;
+  height: 300px !important;
+
+  .el-dialog__header {
     display: flex;
     flex-direction: row;
-    border-bottom:1px solid #eee;
-    height:42px;
-    min-height:42px;
-    background: #F7F7F7;
-    box-shadow: 0 1px 0 0 rgba(53,54,54,0.08);
-    padding-left:20px;
-    padding-top:14px;
-    padding-bottom:14px;
+    border-bottom: 1px solid $color-border-lighter;
+    height: 42px;
+    min-height: 42px;
+    background: $color-bg-lighter;
+    box-shadow: 0 1px 0 0 rgba(53, 54, 54, 0.08);
+    padding-left: 20px;
+    padding-top: 14px;
+    padding-bottom: 14px;
+
     .el-dialog__headerbtn {
       display: flex !important;
       flex-direction: row-reverse;
@@ -1492,77 +1693,54 @@
       font-size: 10px;
       line-height: 10px;
       padding-right: 5px !important;
+
       i {
-        width:10px;
-        height:10px;
+        width: 10px;
+        height: 10px;
       }
     }
+
     .el-dialog__title {
       font-size: 14px !important;
-      color: #353636;
+      color: $color-text-primary;
       letter-spacing: 0;
       font-weight: 400;
     }
   }
+
   .el-dialog__body {
-    height:206px;
-    min-height:206px;
+    height: 206px;
+    min-height: 206px;
     font-size: 14px;
-    color: #353636;
+    color: $color-text-primary;
     letter-spacing: 0;
     line-height: 22px;
     font-weight: 400;
-    padding-top:8px;
-    padding-right:20px;
-    padding-left:20px;
+    padding-top: 8px;
+    padding-right: 20px;
+    padding-left: 20px;
+
     .dialog-message {
-      padding-left:0px !important;
-      padding-right:0px !important;
+      padding-left: 0 !important;
+      padding-right: 0 !important;
     }
+
     .dialog-table {
-      margin-top:10px;
+      margin-top: 10px;
     }
+
     .el-checkbox__input.is-checked .el-checkbox__inner {
-      background-color: #38ACD2;
-      border-color: #38ACD2;
+      background-color: $color-business;
+      border-color: $color-business;
     }
+
     .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-      background-color: #38ACD2;
-      border-color: #38ACD2;
-    }
-  }
-  .el-dialog__footer {
-    height:52px;
-    min-height:52px;
-    border-top:1px solid #eee;
-    box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.07);
-    padding:11px 0 12px!important;
-    .el-button {
-      padding:8px 21px !important;
-      line-height: 12px;
-      font-size: 12px;
-      font-weight: 500;
-      min-height: 28px;
-    }
-    .el-button:nth-child(1) {
-      margin-right:20px;
-      width:80px;
-      height:28px;
-      color: #353636;
-      background: #F5F6F7;
-      border: 1px solid rgba(215,215,215,1);
-      border-radius: 2px;
-    }
-    .el-button:nth-child(2) {
-      width:80px;
-      height:28px;
-      margin-right:20px;
-      margin-left:0px !important;
-      background-color:#2d8cf0;
-      border-color:#2d8cf0;
+      background-color: $color-business;
+      border-color: $color-business;
     }
   }
 }
+
 .confirm-knowledge-switch {
   display: flex;
   flex-direction: column;
@@ -1570,13 +1748,13 @@
   .el-dialog__header {
     display: flex;
     flex-direction: row;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid $color-border-lighter;
     height: 42px;
     min-height: 42px;
     padding-left: 20px;
     padding-top: 10px;
     padding-bottom: 14px;
-    background: #F7F7F7;
+    background: $color-bg-lighter;
 
     .el-dialog__headerbtn {
       display: flex !important;
@@ -1586,31 +1764,34 @@
       padding-right: 5px !important;
       top: 16px;
       right: 10px;
+
       i {
         font-size: 12px;
       }
     }
+
     .el-dialog__title {
       font-size: 14px !important;
-      color: #353636;
+      color: $color-text-primary;
       letter-spacing: 0;
       font-weight: 400;
     }
   }
 }
+
 .update-knowledge-tip, .confirm-knowledge-switch {
-  display:flex;
+  display: flex;
   flex-direction: column;
   padding-bottom: 0 !important;
 
-  .el-dialog__header{
+  .el-dialog__header {
     display: flex;
     flex-direction: row;
-    border-bottom:1px solid #eee;
+    border-bottom: 1px solid $color-border-lighter;
     height: 42px;
-    min-height:42px;
-    background: #F7F7F7;
-    box-shadow: 0 1px 0 0 rgba(53,54,54,0.08);
+    min-height: 42px;
+    background: $color-bg-lighter;
+    box-shadow: 0 1px 0 0 rgba(53, 54, 54, 0.08);
     padding-left: 20px;
     padding-top: 10px;
     padding-bottom: 14px;
@@ -1628,441 +1809,519 @@
         font-size: 12px;
       }
     }
+
     .el-dialog__title {
       font-size: 14px !important;
-      color: #353636;
+      color: $color-text-primary;
       letter-spacing: 0;
       font-weight: 400;
     }
   }
+
   .el-dialog__body {
-    height:96px;
-    min-height:96px;
+    height: 96px;
+    min-height: 96px;
     font-size: 14px;
-    color: #353636;
+    color: $color-text-primary;
     letter-spacing: 0;
     line-height: 22px;
-    padding-top:12px;
+    padding-top: 12px;
     padding-right: 20px;
     padding-left: 20px;
   }
+
   .el-dialog__footer {
-    height:52px;
-    min-height:52px;
-    border-top:1px solid #eee;
-    box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.07);
-    padding:11px 0 12px!important;
+    height: 52px;
+    min-height: 52px;
+    border-top: 1px solid $color-border-lighter;
+    box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.07);
+    padding: 11px 0 12px !important;
+
     .el-button {
-      padding:8px 21px !important;
+      padding: 8px 21px !important;
       line-height: 12px;
       font-size: 12px;
       font-weight: 500;
       min-height: 28px;
     }
+
     .el-button:nth-child(1) {
-      margin-right:20px;
-      width:80px;
-      height:28px;
-      color: #353636;
-      background: #F5F6F7;
-      border: 1px solid rgba(215,215,215,1);
+      margin-right: 20px;
+      width: 80px;
+      height: 28px;
+      color: $color-text-primary;
+      background: $color-fill-light;
+      border: 1px solid $color-border-dark;
       border-radius: 2px;
     }
+
     .el-button:nth-child(2) {
-      width:80px;
-      height:28px;
-      margin-right:20px;
-      margin-left:0px !important;
-      background: #38ACD2;
-      border: 1px solid rgba(46,136,166,1);
+      width: 80px;
+      height: 28px;
+      margin-right: 20px;
+      margin-left: 0 !important;
+      background: $color-business;
+      border: 1px solid $color-business-border-hover;
       border-radius: 2px;
     }
   }
 }
+
 .center-dialog {
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
 .update-knowledge {
-  display:flex;
+  display: flex;
   flex-direction: column;
-  padding-bottom:0 !important;
+  padding-bottom: 0 !important;
   width: 1080px !important;
   height: 90vh;
-  margin-top:5vh !important;
+  margin-top: 5vh !important;
   overflow: hidden;
+
   &.update-knowledge--upload {
     height: auto;
   }
+
   .el-dialog__body {
     height: calc(100% - 32px);
     overflow: hidden;
   }
+
   .knowledge-update__top {
     display: flex;
     flex-direction: row;
-    margin-bottom:22px;
+    margin-bottom: 22px;
+
     .update-left__icon {
-      margin-top:3px;
-      width:107px;
-      height:60px;
-      color:red;
-      display:flex;
+      margin-top: 3px;
+      width: 107px;
+      height: 60px;
+      color: red;
+      display: flex;
       justify-content: center;
       align-items: center;
+
       .cn-icon-add-knowledge-base {
-        font-size:60px;
+        font-size: 60px;
       }
     }
+
     .update-right {
       display: flex;
       flex-direction: column;
-      width:893px;
+      width: 893px;
+
       .knowledge-enable {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
-        margin-bottom:7px;
+        margin-bottom: 7px;
+
         .update-title {
           font-size: 16px;
-          color: #333333;
+          color: $color-text-primary;
           letter-spacing: 0;
           font-weight: 500;
-          height:24px;
+          height: 24px;
           font-family: NotoSansSC-Medium;
         }
       }
+
       .knowledge-desc {
         font-family: Roboto-Regular;
         word-break: normal;
         font-size: 14px;
-        color: #717171;
+        color: $color-regular;
         letter-spacing: 0;
         line-height: 16px;
         font-weight: 400;
       }
     }
   }
+
   .knowledge-update__tab {
-    position:relative;
+    position: relative;
+
     .update-log-tab {
       .el-tabs__header {
-        margin-bottom:10px;
+        margin-bottom: 10px;
+
         .el-tabs__active-bar {
-          background-color:#046ECA;
-          height:2px;
+          background-color: $color-primary;
+          height: 2px;
         }
+
         .el-tabs__item {
           font-family: NotoSansSC-Bold;
           font-size: 14px;
-          //color: #353636;
+          //color: $color-text-primary;
           font-weight: 700;
-          padding:0 16px 0 0;
+          padding: 0 16px 0 0;
         }
+
         .el-tabs__item:hover {
-          color:#353636;
+          color: $color-text-primary;
         }
+
         .el-tabs__item.is-active {
-          color: #046ECA;
+          color: $color-primary;
         }
+
         .el-tabs__nav-wrap::after {
-          height:1px;
+          height: 1px;
         }
       }
+
       .update-title {
         line-height: 14px;
         font-family: NotoSansSC-Bold;
         font-size: 14px;
-        color: #353636;
+        color: $color-text-primary;
         font-weight: 700;
       }
     }
+
     .update-operate {
       position: absolute;
-      top: 0px;
+      top: 0;
       display: flex;
       align-items: center;
-      right: 0px;
+      right: 0;
 
-      height:28px;
+      height: 28px;
       flex-direction: row;
-      justify-content:center;
+      justify-content: center;
       font-size: 14px;
       font-weight: 400;
+
       .top-tool-btn--update {
-        background-color: #38ACD2 !important;
-        padding-left:7px;
-        padding-right:7px;
-        color:#FFFFFF;
+        background-color: $color-business !important;
+        padding-left: 7px;
+        padding-right: 7px;
+        color: $color-white;
         font-size: 12px;
         font-weight: 500;
-        border: 1px solid rgba(46,136,166,0.85);
+        border: 1px solid rgba(46, 136, 166, 0.85);
         border-radius: 2px;
         line-height: 28px;
-        height:28px;
+        height: 28px;
         cursor: pointer;
         display: flex;
         justify-content: center;
         align-items: center;
+
         i {
-          color: #FFFFFF;
-          font-size:14px !important;
-          margin-right:5px;
+          color: $color-white;
+          font-size: 14px !important;
+          margin-right: 5px;
         }
       }
+
       .top-tool-btn--update:disabled {
         cursor: not-allowed;
         opacity: 0.66;
+
         i {
         }
       }
+
       .top-tool-btn--update:hover {
-        background-color: #57B8D9 !important;
-        border-color: #2E88A6 !important;
+        background-color: $color-business-hover !important;
+        border-color: $color-business-border-hover !important;
       }
     }
   }
+
   .knowledge-update {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    align-items:flex-end;
-    margin-bottom:12px;
+    align-items: flex-end;
+    margin-bottom: 12px;
+
     .update-title {
       line-height: 14px;
       font-family: NotoSansSC-Bold;
       font-size: 14px;
-      color: #353636;
+      color: $color-text-primary;
       font-weight: 700;
     }
+
     .update-operate {
-      height:28px;
-      display:flex;
+      height: 28px;
+      display: flex;
       flex-direction: row;
-      justify-content:center;
+      justify-content: center;
       font-size: 14px;
       font-weight: 400;
       align-items: center;
+
       .top-tool-btn--update {
-        background-color: #38ACD2 !important;
-        padding-left:7px;
-        padding-right:7px;
-        color:#FFFFFF;
+        background-color: $color-business !important;
+        padding-left: 7px;
+        padding-right: 7px;
+        color: $color-white;
         font-size: 12px;
         font-weight: 500;
-        border: 1px solid rgba(46,136,166,0.85);
+        border: 1px solid rgba(46, 136, 166, 0.85);
         border-radius: 2px;
         line-height: 28px;
-        height:28px;
+        height: 28px;
         cursor: pointer;
         display: flex;
         justify-content: center;
         align-items: center;
+
         i {
-          color: #FFFFFF;
-          font-size:14px !important;
-          margin-right:5px;
+          color: $color-white;
+          font-size: 14px !important;
+          margin-right: 5px;
         }
       }
+
       .top-tool-btn--update:disabled {
         cursor: not-allowed;
         opacity: 0.66;
+
         i {
         }
       }
+
       .top-tool-btn--update:hover {
-        background-color: #57B8D9 !important;
-        border-color: #2E88A6 !important;
+        background-color: $color-business-hover !important;
+        border-color: $color-business-border-hover !important;
       }
     }
   }
-  .el-dialog__header{
+
+  .el-dialog__header {
     display: flex;
     flex-direction: row;
-    height:32px;
-    min-height:32px;
-    padding-left:20px;
-    padding-top:20px;
-    padding-bottom:0px;
+    height: 32px;
+    min-height: 32px;
+    padding-left: 20px;
+    padding-top: 20px;
+    padding-bottom: 0;
+
     .el-dialog__headerbtn {
       display: flex !important;
       flex-direction: row-reverse;
       justify-content: center;
       align-items: center;
       line-height: 12px;
+
       i {
-        font-size:12px;
-        color:#999999;
+        font-size: 12px;
+        color: $color-info;
       }
     }
+
     .el-dialog__title {
       font-size: 14px !important;
-      color: #353636;
+      color: $color-text-primary;
       letter-spacing: 0;
       font-weight: 400;
     }
   }
+
   .el-dialog__body {
     font-size: 14px;
-    color: #353636;
+    color: $color-text-primary;
     letter-spacing: 0;
     line-height: 22px;
     font-weight: 400;
-    padding-top:0px;
-    padding-right:30px;
-    padding-left:30px;
-    padding-bottom:30px;
+    padding-top: 0;
+    padding-right: 30px;
+    padding-left: 30px;
+    padding-bottom: 30px;
+
     .dialog-message {
-      padding-left:0px !important;
-      padding-right:0px !important;
+      padding-left: 0 !important;
+      padding-right: 0 !important;
     }
+
     .update-dialog__table {
       border-bottom: none;
       border-radius: 0.28571rem;
-      height: calc(100% - 125px);//dialog为屏幕的90% - 表格以上内容的高度 - pishon3柱状图的高度 - 表格和柱状图之间的距离 - 底部留白的距离
+      height: calc(100% - 125px); //dialog为屏幕的90% - 表格以上内容的高度 - pishon3柱状图的高度 - 表格和柱状图之间的距离 - 底部留白的距离
       .el-table--border th, .el-table--border td {
         border-right: none;
       }
+
       .el-table__body-wrapper {
         height: calc(100% - 48px);
         overflow-y: auto;
       }
+
       &.update-dialog__table--psiphon3 {
         height: calc(90vh - 190px - 200px - 50px - 10px);
       }
+
       &.update-dialog__table--system-user {
         height: calc(100% - 139px);
       }
+
       &.el-table .el-table__cell {
         padding: 12px 0 !important;
       }
+
       &.el-table .el-table__row .el-table__cell {
         padding: 8px 0 !important;
       }
     }
+
     .update-knowledge-form {
       .el-upload {
-        width:100%;
+        width: 100%;
       }
+
       .form-input {
         .el-input__wrapper {
           padding: 1px 16px !important;
         }
-        .el-input__inner{
+
+        .el-input__inner {
           padding-right: 50px !important;
           font-size: 14px;
         }
       }
+
       .uploadBtn {
-        background: #F5F8FA;
-        border: 1px solid rgba(222,222,222,1);
-        box-shadow: 0px 2px 4px 0px rgba(51,51,51,0.02);
+        background: $color-fill-light;
+        border: 1px solid $color-info-light-7;
+        box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
         border-radius: 2px;
         //width:100%;
         width: 1020px;
-        height:28px;
-        min-height:28px !important;
-        color: #575757;
-        padding-top:0px;
-        padding-bottom:0px;
+        height: 28px;
+        min-height: 28px !important;
+        color: $color-regular;
+        padding-top: 0;
+        padding-bottom: 0;
+
         i {
-         font-size:12px;
+          font-size: 12px;
         }
       }
+
       .el-form-item__label {
         font-family: NotoSansHans-Medium;
         font-size: 14px;
-        color: #333333;
+        color: $color-text-primary;
         font-weight: 500;
-        padding-bottom:12px;
-        line-height:14px;
+        padding-bottom: 12px;
+        line-height: 14px;
       }
+
       .el-form-item__content {
-        line-height:normal;
+        line-height: normal;
+
+        .item__content__margin {
+          margin-bottom: -10px;
+        }
       }
+
       .el-form-item {
-        margin-bottom:20px;
+        margin-bottom: 20px;
       }
+
       .knowledge-remark {
-        margin-bottom:0px !important;
+        margin-bottom: 0 !important;
+
         .el-textarea__inner {
           font-size: 12px;
           padding: 5px 15px;
         }
       }
+
       .el-form--label-top .el-form-item .el-form-item__label {
         margin-bottom: 0 !important;
       }
+
       .el-form--default.el-form--label-top .el-form-item .el-form-item__label {
         line-height: 14px;
       }
     }
+
     .dialog-footer {
-      display:flex;
+      display: flex;
       justify-content: flex-end;
-      padding-top:32px;
+      padding-top: 32px;
+
       .el-button {
-        padding:10px 21px !important;
+        padding: 10px 21px !important;
         line-height: 12px;
         font-size: 12px;
         font-weight: 500;
         min-height: 32px;
-        width:80px;
-        height:32px;
+        width: 80px;
+        height: 32px;
       }
+
       .el-button:nth-child(1) {
-        margin-right:20px;
-        color: #353636;
-        background: #F5F6F7;
-        border: 1px solid rgba(215,215,215,1);
+        margin-right: 20px;
+        color: $color-text-primary;
+        background: $color-fill-light;
+        border: 1px solid $color-border-dark;
         border-radius: 2px;
       }
+
       .el-button:nth-child(2) {
-        color: #FFFFFF;
-        margin-left:0px !important;
-        background: #38ACD2;
-        border: 1px solid rgba(46,136,166,1);
+        color: $color-white;
+        margin-left: 0 !important;
+        background: $color-business;
+        border: 1px solid $color-business-border-hover;
         border-radius: 2px;
       }
     }
   }
-  .psiphon3{
-    display:flex;
+
+  .psiphon3 {
+    display: flex;
     flex-direction: column;
-    margin-top:25px;
+    margin-top: 25px;
+
     .psiphon3-title {
       font-family: NotoSansSC-Medium;
       font-size: 12px;
-      color: #353636;
+      color: $color-text-primary;
       letter-spacing: 0;
       line-height: 14px;
       font-weight: 500;
     }
+
     .psiphon3-bar {
       height: 200px;
       width: 100%;
       position: relative;
-      border: 1px solid #E2E5EC;
+      border: 1px solid $color-border-light;
       border-radius: 4px;
-      margin-top:10px;
+      margin-top: 10px;
       //min-height:250px;
       .chart-drawing {
         height: 100%;
         width: 100%;
+
         .echarts-tooltip.echarts-tooltip-dark {
           .cn-chart-body {
             display: flex;
+
             .cn-chart-tooltip {
               display: flex;
               flex-direction: column;
               flex: 1;
+
               .cn-chart-tooltip-box {
                 margin-right: 10px;
               }
+
               .cn-chart-tooltip-value.cn-chart-tooltip__color {
                 font-size: 12px;
-                color: #353636;
+                color: var(--el-text-color-primary);
                 line-height: 21px;
                 font-weight: 600;
               }
@@ -2070,11 +2329,13 @@
           }
         }
       }
+
       .bar-header {
         display: flex;
         justify-content: space-between;
         //height: 73px;
-        margin-right:20px;
+        margin-right: 20px;
+
         .bar-select.bar-header-right {
           display: flex;
           //flex: 1;
@@ -2083,117 +2344,145 @@
               width: 132px;
             }
           }
+
           .bar-select-time {
             display: flex;
             align-items: flex-end;
+
             .bar-select__operation {
               height: 24px;
               margin-left: 3px;
               box-shadow: none;
               border-radius: 2px;
+
               .cn-icon-Data {
-                color: #353636;
+                color: $color-text-primary;
               }
+
               .el-input__inner {
                 padding-left: 4px;
                 line-height: 24px;
                 height: 24px;
                 font-size: 12px;
-                color: #353636;
+                color: $color-text-primary;
                 font-weight: 400;
               }
+
               .el-input__suffix {
                 display: flex;
+
                 .el-input__suffix-inner {
                   line-height: 24px;
+
                   .el-select__caret {
                     line-height: 24px;
                     width: 16px;
-                    color: #353636;
+                    color: $color-text-primary;
                   }
                 }
               }
             }
           }
         }
+
         .bar-header-left {
           .bar-value-active {
             position: absolute;
             height: 4px;
             border-radius: 4px 0 0 0;
-            background: #046ECA;
+            background: $color-primary;
             top: 0;
             z-index: 1;
-            transition: all linear .2s;
+            transition: all linear $transition-duration;
           }
+
           .bar-value {
             font-size: 12px;
-            color: #717171;
+            color: $color-regular;
             font-weight: 400;
             display: flex;
             justify-content: center;
+
             .is-active {
-              color: #353636;
+              color: $color-text-primary;
             }
+
             .bar-value-tabs.mousemove-cursor {
-              border-top: 4px solid #D3D0D8;
+              border-top: 4px solid $color-mousemove-cursor;
               z-index: 0;
             }
+
             .bar-value-tabs {
               cursor: pointer;
               padding: 10px 0 0 20px;
               border-top: 4px solid transparent;
-              width:88px;
+              width: 88px;
+
               .bar-value-tabs-name {
                 position: relative;
                 display: flex;
+
                 .tabs-name {
                   flex: 1;
                   padding-left: 19px;
                 }
-                .total,.active,.new {
+
+                .total, .active, .new {
                   width: 10px;
                   height: 10px;
                   border-radius: 50%;
                   position: absolute;
                   top: 6px;
                 }
+
                 .total {
-                  background: #00A7AB;
+                  background: $color-total;
                 }
+
                 .active {
-                  background: #7FA054;
+                  background: var(--el-color-success);
                 }
+
                 .new {
-                  background: #98709B;
+                  background: $color-new;
                 }
               }
             }
           }
         }
       }
+
+      .bar-chart {
+        position: relative;
+        height: calc(100% - 24px);
+      }
     }
   }
 
 }
+
 .knowledge-color {
-  display:flex;
+  display: flex;
   flex-direction: row;
   align-items: center;
+
   .knowledge-color__icon {
     width: 10px;
     height: 10px;
     border-radius: 2px;
-    margin-right:6px;
-    margin-left:2px;
+    margin-right: 6px;
+    margin-left: 2px;
   }
 }
+
 .info {
-  background-color:rgb(119,131,145)
+  background-color: rgb(119, 131, 145) // 需要与js里的knowledgeBaseColor进行匹配，故保留
 }
+
 .benign {
-  background-color:rgb(116,159,77)
+  background-color: rgb(116, 159, 77)
 }
+
 .malicious {
-  background-color:rgb(226,97,84)
+  background-color: rgb(226, 97, 84)
 }
diff --git a/src/assets/css/components/views/system/Plugin.scss b/src/assets/css/components/views/system/Plugin.scss
index 541a0932..a90b91d6 100644
--- a/src/assets/css/components/views/system/Plugin.scss
+++ b/src/assets/css/components/views/system/Plugin.scss
@@ -1,64 +1,76 @@
-.plugin-management .list-page {
-  .cn-table {
-    height: 100%;
-    .el-table {
+.plugin-management {
+  .list-page {
+    .cn-table {
       height: 100%;
-    }
-    .el-table--group::after,.el-table--border::after, .el-table::before {
-      height: 0;
-    }
-  }
-  .cn-pagination {
-    display: none;
-  }
-}
-.plugin {
-  font-size: 12px;
-  color: #353636;
-  line-height: 14px;
-  font-weight: 400;
-  .type-tag {
-    display: inline-block;
-    padding: 0 10px;
-    background-color: #EBF7FA;
-    color: #046ECA;
-    box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
-    border-radius: 12px;
-    margin-right:10px;
-  }
-  .plugin-name {
-    display: flex;
-    flex-direction: row;
-    justify-content: left;
-    align-items: center;
-    .icon-background {
-      display:flex;
-      justify-content: center;
-      align-items: center;
-      width:32px;
-      height:32px;
-      background: #ECECEC;
-      border-radius: 4px;
-      margin-right:6px;
-      .plugin-name-icon {
-        width:25px;
-        height:25px;
-        color:red;
-        display:flex;
-        justify-content: center;
-        align-items: center;
+
+      .el-table {
+        height: 100%;
+      }
+
+      .el-table--group::after, .el-table--border::after, .el-table::before {
+        height: 0;
       }
     }
+
+    .cn-pagination {
+      display: none;
+    }
   }
-  .two-line {
-    overflow: hidden; //超出的文本隐藏
-    text-overflow: ellipsis; //溢出用省略号显示
-    display: -webkit-box;
-    line-clamp:2 ;
-    -webkit-line-clamp: 2; // 超出多少行
-    -webkit-box-orient: vertical;
-  }
-  .cn-table .el-table:not(.chart-table) td {
-    padding: 8px 0 !important;
+
+  .plugin {
+    font-size: 12px;
+    color: var(--el-text-color-primary);
+    line-height: 14px;
+    font-weight: 400;
+
+    .type-tag {
+      display: inline-block;
+      padding: 0 10px;
+      background-color: var(--el-color-primary-light-9);
+      color: var(--el-color-primary);
+      box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
+      border-radius: 12px;
+      margin-right: 10px;
+    }
+
+    .plugin-name {
+      display: flex;
+      flex-direction: row;
+      justify-content: left;
+      align-items: center;
+
+      .icon-background {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 32px;
+        height: 32px;
+        background: var(--el-color-info-light-8);
+        border-radius: 4px;
+        margin-right: 6px;
+
+        .plugin-name-icon {
+          width: 25px;
+          height: 25px;
+          color: var(--el-color-danger);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+    }
+
+    .two-line {
+      overflow: hidden; //超出的文本隐藏
+      text-overflow: ellipsis; //溢出用省略号显示
+      display: -webkit-box;
+      line-clamp: 2;
+      -webkit-line-clamp: 2; // 超出多少行
+      -webkit-box-orient: vertical;
+    }
+
+    .cn-table .el-table:not(.chart-table) td {
+      padding: 8px 0 !important;
+    }
   }
 }
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index 39a0ef95..2f49afd0 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -1,12 +1,96 @@
-/*@font-face { // 由于主题嵌套原因，原ele的icon图标字体加载会出错，需重写
-  font-family: 'element-icons';
-  src: url('~@/assets/css/themes/src/fonts/element-icons.woff') format('woff'), !* chrome, firefox *!
-  url('~@/assets/css/themes/src/fonts/element-icons.ttf') format('truetype'); !* chrome, firefox, opera, Safari, Android, iOS 4.2+*!
-  font-weight: normal;
-  font-display: auto;
-  font-style: normal;
+@use 'sass:map';
+@use 'sass:math';
+
+@use './common.scss';
+/* 主题 */
+// 按需重写、新增element变量值
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  /* 颜色 */
+  $colors: (
+    'primary': (
+      'base': #046ECA
+    ),
+    // 新增一个业务色，暂命名为business
+    'business': (
+      'base': #38ACD2
+    ),
+    'success': (
+      'base': #7E9F54,
+    ),
+    'danger': (
+      'base': #E26154,
+    ),
+    'error': (
+      'base': #E26154,
+    )
+  ),
+  /* select相关 */
+  // select input中的边距，控制select框的大小
+  $select-wrapper-padding: (
+    'large': 8px 16px,
+    'default': 2px 12px,
+    'small': 2px 8px,
+  ),
+  $select-option: (
+    'height': 28px
+  ),
+  // 通用尺寸
+  $common-component-size: (
+    'large': 32px,
+    'default': 28px,
+    'small': 24px
+  ),
+  // dropdown
+  $dropdown: (
+    'menuItem-hover-fill': var(--el-fill-color-light),
+    'menuItem-hover-color': var(--el-text-color-regular)
+  ),
+  $checkbox: (
+    'checked-input-border-color': var(--el-color-business),
+    'checked-bg-color': var(--el-color-business),
+  )
+);
+// 导出重写后的var.scss，暴露内部变量供别处使用
+@use 'element-plus/theme-chalk/src/common/var.scss' as css-var;
+// 引入element样式
+@use 'element-plus/theme-chalk/src/index.scss' as *;
+// 引入element定义的sass函数
+@use 'element-plus/theme-chalk/src/mixins/_var' as var;
+
+:root {
+  // 为新增的业务色设置css变量
+  @include var.set-css-var-value(('color', 'business'), map.get(css-var.$colors, 'business', 'base'));
+  // 生成 business 的 light 色值
+  @for $i from 1 through 9 {
+    @include var.set-css-var-value(('color', 'business', 'light', $i), mix(
+        css-var.$color-white,
+        map.get(css-var.$colors, 'business', 'base'),
+        math.percentage(math.div($i, 10))
+    ));
+  }
+  // 生成 business 的 dark2色值
+  @for $i from 1 through 2 {
+    @include var.set-css-var-value(('color', 'business', 'dark', $i), mix(
+        css-var.$color-black,
+        map.get(css-var.$colors, 'business', 'base'),
+        math.percentage(math.div($i, 10))
+    ));
+  }
+
+  --cn-bg-color-light: #EBF1F4; // 一个用得比较多的背景色
+  --cn-bg-color-lighter: #F7F7F7; // 一个用得比较多的背景色
+  --cn-color-critical: #D84C4C; // critical 严重等级分布
+  --cn-color-critical-rgb: 216,76,76; // critical 严重等级分布
+  --cn-color-high: #FF9A79; // high
+  --cn-color-high-rgb: 255,154,121; // high
+  --cn-color-info: #D1BD50; // info
+  --cn-color-info-rgb: 209,189,80; // info
+  --cn-color-medium: #FFB65A; // medium
+  --cn-color-medium-rgb: 255,182,90; // medium
+  --cn-color-low: #FFD82D; // low
+  --cn-color-low-rgb: 255,216,45; // low
+  --cn-map-bg-color: #CAD2D3; // 地图底色
 }
-$--font-path: '~@/assets/css/themes/src/fonts'; // 避免ele原字体加载语句出错*/
 
 @font-face {
   font-family: 'NotoSansSChineseRegular';
@@ -23,9 +107,6 @@ $--font-path: '~@/assets/css/themes/src/fonts'; // 避免ele原字体加载语
   font-style: normal;
 }
 
-@import './common.scss';
-
-/* 主题 */
 
 $--color-text-primary: #303133 !default;
 $--border-color: #E2E5EC;
diff --git a/src/assets/css/themes/src/affix.scss b/src/assets/css/themes/src/affix.scss
deleted file mode 100644
index 4d0268eb..00000000
--- a/src/assets/css/themes/src/affix.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import "mixins/mixins";
-
-@include b(affix) {
-  @include m(fixed) {
-    position: fixed;
-  }
-}
diff --git a/src/assets/css/themes/src/alert.scss b/src/assets/css/themes/src/alert.scss
deleted file mode 100644
index 56d8c845..00000000
--- a/src/assets/css/themes/src/alert.scss
+++ /dev/null
@@ -1,147 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(alert) {
-  width: 100%;
-  padding: $--alert-padding;
-  margin: 0;
-  box-sizing: border-box;
-  border-radius: $--alert-border-radius;
-  position: relative;
-  background-color: $--color-white;
-  overflow: hidden;
-  opacity: 1;
-  display: flex;
-  align-items: center;
-  transition: opacity .2s;
-
-  @include when(light) {
-    .#{$namespace}-alert__closebtn {
-      color: $--color-text-placeholder;
-    }
-  }
-
-  @include when(dark) {
-    .#{$namespace}-alert__closebtn {
-      color: $--color-white;
-    }
-    .#{$namespace}-alert__description {
-      color: $--color-white;
-    }
-  }
-
-  @include when(center) {
-    justify-content: center;
-  }
-
-  @include m(success) {
-    &.is-light {
-      background-color: $--alert-success-color;
-      color: $--color-success;
-
-      .#{$namespace}-alert__description {
-        color: $--color-success;
-      }
-    }
-
-    &.is-dark {
-      background-color: $--color-success;
-      color: $--color-white;
-    }
-  }
-
-  @include m(info) {
-    &.is-light {
-      background-color: $--alert-info-color;
-      color: $--color-info;
-    }
-
-    &.is-dark {
-      background-color: $--color-info;
-      color: $--color-white;
-    }
-
-    .#{$namespace}-alert__description {
-      color: $--color-info;
-    }
-  }
-
-  @include m(warning) {
-    &.is-light {
-      background-color: $--alert-warning-color;
-      color: $--color-warning;
-
-      .#{$namespace}-alert__description {
-        color: $--color-warning;
-      }
-    }
-
-    &.is-dark {
-      background-color: $--color-warning;
-      color: $--color-white;
-    }
-  }
-
-  @include m(error) {
-    &.is-light {
-      background-color: $--alert-danger-color;
-      color: $--color-danger;
-
-      .#{$namespace}-alert__description {
-        color: $--color-danger;
-      }
-    }
-
-    &.is-dark {
-      background-color: $--color-danger;
-      color: $--color-white;
-    }
-  }
-
-  @include e(content) {
-    display: table-cell;
-    padding: 0 8px;
-  }
-
-  @include e(icon) {
-    font-size: $--alert-icon-size;
-    width: $--alert-icon-size;
-    @include when(big) {
-      font-size: $--alert-icon-large-size;
-      width: $--alert-icon-large-size;
-    }
-  }
-
-  @include e(title) {
-    font-size: $--alert-title-font-size;
-    line-height: 18px;
-    @include when(bold) {
-      font-weight: bold;
-    }
-  }
-
-  & .#{$namespace}-alert__description {
-    font-size: $--alert-description-font-size;
-    margin: 5px 0 0 0;
-  }
-
-  @include e(closebtn) {
-    font-size: $--alert-close-font-size;
-    opacity: 1;
-    position: absolute;
-    top: 12px;
-    right: 15px;
-    cursor: pointer;
-
-    @include when(customed) {
-      font-style: normal;
-      font-size: $--alert-close-customed-font-size;
-      top: 9px;
-    }
-  }
-}
-
-.#{$namespace}-alert-fade-enter-from,
-.#{$namespace}-alert-fade-leave-active {
-  opacity: 0;
-}
diff --git a/src/assets/css/themes/src/aside.scss b/src/assets/css/themes/src/aside.scss
deleted file mode 100644
index b82749f3..00000000
--- a/src/assets/css/themes/src/aside.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import "mixins/mixins";
-
-@include b(aside) {
-  overflow: auto;
-  box-sizing: border-box;
-  flex-shrink: 0;
-}
diff --git a/src/assets/css/themes/src/autocomplete.scss b/src/assets/css/themes/src/autocomplete.scss
deleted file mode 100644
index cd9d3b71..00000000
--- a/src/assets/css/themes/src/autocomplete.scss
+++ /dev/null
@@ -1,85 +0,0 @@
-@import "mixins/mixins";
-@import "mixins/utils";
-@import "common/var";
-@import "./input.scss";
-@import "./scrollbar.scss";
-@import "./popper";
-
-@include b(autocomplete) {
-  position: relative;
-  display: inline-block;
-
-  @include e(popper) {
-    @include picker-popper(
-      $--color-white,
-      1px solid $--border-color-light,
-      $--box-shadow-light,
-    );
-  }
-}
-
-@include b(autocomplete-suggestion) {
-  border-radius: $--border-radius-base;
-  box-sizing: border-box;
-
-  @include e(wrap) {
-    max-height: 280px;
-    padding: 10px 0;
-    box-sizing: border-box;
-  }
-
-  @include e(list) {
-    margin: 0;
-    padding: 0;
-  }
-
-  & li {
-    padding: 0 20px;
-    margin: 0;
-    line-height: 34px;
-    cursor: pointer;
-    color: $--color-text-regular;
-    font-size: $--font-size-base;
-    list-style: none;
-    text-align: left;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &:hover {
-      background-color: $--select-option-hover-background;
-    }
-
-    &.highlighted {
-      background-color: $--select-option-hover-background;
-    }
-
-    &.divider {
-      margin-top: 6px;
-      border-top: 1px solid $--color-black;
-    }
-
-    &.divider:last-child {
-      margin-bottom: -6px;
-    }
-  }
-
-  @include when(loading) {
-    li {
-      text-align: center;
-      height: 100px;
-      line-height: 100px;
-      font-size: 20px;
-      color: #999;
-      @include utils-vertical-center;
-
-      &:hover {
-        background-color: $--color-white;
-      }
-    }
-
-    & .#{$namespace}-icon-loading {
-      vertical-align: middle;
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/avatar.scss b/src/assets/css/themes/src/avatar.scss
deleted file mode 100644
index d5ed1eb7..00000000
--- a/src/assets/css/themes/src/avatar.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(avatar) {
-  display: inline-block;
-  box-sizing: border-box;
-  text-align: center;
-  overflow: hidden;
-  color: $--avatar-font-color;
-  background: $--avatar-background-color;
-  width: $--avatar-large-size;
-  height: $--avatar-large-size;
-  line-height: $--avatar-large-size;
-  font-size: $--avatar-text-font-size;
-
-  >img {
-    display: block;
-    height: 100%;
-    vertical-align: middle;
-  }
-
-  @include m(circle) {
-    border-radius: 50%;
-  }
-
-  @include m(square) {
-    border-radius: $--avatar-border-radius;
-  }
-
-  @include m(icon) {
-    font-size: $--avatar-icon-font-size;
-  }
-
-  @include m(large) {
-    width: $--avatar-large-size;
-    height: $--avatar-large-size;
-    line-height: $--avatar-large-size;
-  }
-
-  @include m(medium) {
-    width: $--avatar-medium-size;
-    height: $--avatar-medium-size;
-    line-height: $--avatar-medium-size;
-  }
-
-  @include m(small) {
-    width: $--avatar-small-size;
-    height: $--avatar-small-size;
-    line-height: $--avatar-small-size;
-  }
-}
diff --git a/src/assets/css/themes/src/backtop.scss b/src/assets/css/themes/src/backtop.scss
deleted file mode 100644
index f4152435..00000000
--- a/src/assets/css/themes/src/backtop.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(backtop) {
-  position: fixed;
-  background-color: $--backtop-background-color;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  color: $--backtop-font-color;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 20px;
-  box-shadow: 0 0 6px rgba(0,0,0, .12);
-  cursor: pointer;
-  z-index: 5;
-
-  &:hover {
-    background-color: $--backtop-hover-background-color
-  }
-}
diff --git a/src/assets/css/themes/src/badge.scss b/src/assets/css/themes/src/badge.scss
deleted file mode 100644
index 4776e677..00000000
--- a/src/assets/css/themes/src/badge.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(badge) {
-  position: relative;
-  vertical-align: middle;
-  display: inline-block;
-
-  @include e(content) {
-    background-color: $--badge-background-color;
-    border-radius: $--badge-radius;
-    color: $--color-white;
-    display: inline-block;
-    font-size: $--badge-font-size;
-    height: $--badge-size;
-    line-height: $--badge-size;
-    padding: 0 $--badge-padding;
-    text-align: center;
-    white-space: nowrap;
-    border: 1px solid $--color-white;
-
-    @include when(fixed) {
-      position: absolute;
-      top: 0;
-      right: #{1 + $--badge-size / 2};
-      transform: translateY(-50%) translateX(100%);
-
-      @include when(dot) {
-        right: 5px;
-      }
-    }
-
-    @include when(dot) {
-      height: 8px;
-      width: 8px;
-      padding: 0;
-      right: 0;
-      border-radius: 50%;
-    }
-
-    @each $type in (primary, success, warning, info, danger) {
-      @include m($type) {
-        @if $type == primary {
-          background-color: $--color-primary;
-        } @else if $type == success {
-          background-color: $--color-success;
-        } @else if $type == warning {
-          background-color: $--color-warning;
-        } @else if $type == info {
-          background-color: $--color-info;
-        } @else {
-          background-color: $--color-danger;
-        }
-      }
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/base.scss b/src/assets/css/themes/src/base.scss
deleted file mode 100644
index 380b79f5..00000000
--- a/src/assets/css/themes/src/base.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "common/transition.scss";
-@import "icon.scss";
diff --git a/src/assets/css/themes/src/breadcrumb-item.scss b/src/assets/css/themes/src/breadcrumb-item.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/assets/css/themes/src/breadcrumb.scss b/src/assets/css/themes/src/breadcrumb.scss
deleted file mode 100644
index c20cc3b8..00000000
--- a/src/assets/css/themes/src/breadcrumb.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-@import "mixins/mixins";
-@import "mixins/utils";
-@import "common/var";
-
-@include b(breadcrumb) {
-  font-size: 14px;
-  line-height: 1;
-  @include utils-clearfix;
-
-  @include e(separator) {
-    margin: 0 9px;
-    font-weight: bold;
-    color: $--color-text-placeholder;
-
-    &[class*=icon] {
-      margin: 0 6px;
-      font-weight: normal;
-    }
-  }
-
-  @include e(item) {
-    float: left;
-
-    @include e(inner) {
-      color: $--color-text-regular;
-
-      &.is-link, & a {
-        font-weight: bold;
-        text-decoration: none;
-        transition: $--color-transition-base;
-        color: $--color-text-primary;
-
-        &:hover {
-          color: $--color-primary;
-          cursor: pointer;
-        }
-      }
-    }
-
-    &:last-child {
-      .#{$namespace}-breadcrumb__inner,
-      .#{$namespace}-breadcrumb__inner a {
-        &, &:hover {
-          font-weight: normal;
-          color: $--color-text-regular;
-          cursor: text;
-        }
-      }
-
-      .#{$namespace}-breadcrumb__separator {
-        display: none;
-      }
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/button-group.scss b/src/assets/css/themes/src/button-group.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/assets/css/themes/src/button.scss b/src/assets/css/themes/src/button.scss
deleted file mode 100644
index c3c17ce5..00000000
--- a/src/assets/css/themes/src/button.scss
+++ /dev/null
@@ -1,264 +0,0 @@
-@charset "UTF-8";
-@import "common/var";
-@import "mixins/button";
-@import "mixins/mixins";
-@import "mixins/utils";
-
-@include b(button) {
-  display: inline-block;
-  line-height: 1;
-  min-height: $--input-height;
-  white-space: nowrap;
-  cursor: pointer;
-  background: $--button-default-background-color;
-  border: $--border-base;
-  border-color: $--button-default-border-color;
-  color: $--button-default-font-color;
-  -webkit-appearance: none;
-  text-align: center;
-  box-sizing: border-box;
-  outline: none;
-  margin: 0;
-  transition: .1s;
-  font-weight: $--button-font-weight;
-  @include utils-user-select(none);
-  & + & {
-    margin-left: 10px;
-  }
-
-  @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, $--button-border-radius);
-
-  &:hover,
-  &:focus {
-    color: $--color-primary;
-    border-color: $--color-primary-light-7;
-    background-color: $--color-primary-light-9;
-  }
-
-  &:active {
-    color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
-    border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
-    outline: none;
-  }
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  & [class*="#{$namespace}-icon-"] {
-    & + span {
-      margin-left: 5px;
-    }
-  }
-
-  @include when(plain) {
-    &:hover,
-    &:focus {
-      background: $--color-white;
-      border-color: $--color-primary;
-      color: $--color-primary;
-    }
-
-    &:active {
-      background: $--color-white;
-      border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
-      color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
-      outline: none;
-    }
-  }
-
-  @include when(active) {
-    color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
-    border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
-  }
-
-  @include when(disabled) {
-    &,
-    &:hover,
-    &:focus {
-      color: $--button-disabled-font-color;
-      cursor: not-allowed;
-      background-image: none;
-      background-color: $--button-disabled-background-color;
-      border-color: $--button-disabled-border-color;
-    }
-
-    &.#{$namespace}-button--text {
-      background-color: transparent;
-    }
-
-    &.is-plain {
-      &,
-      &:hover,
-      &:focus {
-        background-color: $--color-white;
-        border-color: $--button-disabled-border-color;
-        color: $--button-disabled-font-color;
-      }
-    }
-  }
-
-  @include when(loading) {
-    position: relative;
-    pointer-events: none;
-
-    &:before {
-      pointer-events: none;
-      content: '';
-      position: absolute;
-      left: -1px;
-      top: -1px;
-      right: -1px;
-      bottom: -1px;
-      border-radius: inherit;
-      background-color: rgba(255,255,255,.35);
-    }
-  }
-  @include when(round) {
-    border-radius: 20px;
-    padding: 12px 23px;
-  }
-  @include when(circle) {
-    border-radius: 50%;
-    padding: $--button-padding-vertical;
-  }
-  @include m(primary) {
-    @include button-variant($--button-primary-font-color, $--button-primary-background-color, $--button-primary-border-color);
-  }
-  @include m(success) {
-    @include button-variant($--button-success-font-color, $--button-success-background-color, $--button-success-border-color);
-  }
-  @include m(warning) {
-    @include button-variant($--button-warning-font-color, $--button-warning-background-color, $--button-warning-border-color);
-  }
-  @include m(danger) {
-    @include button-variant($--button-danger-font-color, $--button-danger-background-color, $--button-danger-border-color);
-  }
-  @include m(info) {
-    @include button-variant($--button-info-font-color, $--button-info-background-color, $--button-info-border-color);
-  }
-  @include m(medium) {
-    min-height: $--input-medium-height;
-
-    @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, $--button-medium-border-radius);
-    @include when(circle) {
-      padding: $--button-medium-padding-vertical;
-    }
-  }
-  @include m(small) {
-    min-height: $--input-small-height;
-
-    @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, $--button-small-border-radius);
-    @include when(circle) {
-      padding: $--button-small-padding-vertical;
-    }
-  }
-  @include m(mini) {
-    min-height: $--input-mini-height;
-
-    @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, $--button-mini-border-radius);
-    @include when(circle) {
-      padding: $--button-mini-padding-vertical;
-    }
-  }
-  @include m(text) {
-    border-color: transparent;
-    color: $--color-primary;
-    background: transparent;
-    padding-left: 0;
-    padding-right: 0;
-
-    &:hover,
-    &:focus {
-      color: mix($--color-white, $--color-primary, $--button-hover-tint-percent);
-      border-color: transparent;
-      background-color: transparent;
-    }
-    &:active {
-      color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
-      border-color: transparent;
-      background-color: transparent;
-    }
-
-    &.is-disabled,
-    &.is-disabled:hover,
-    &.is-disabled:focus {
-      border-color: transparent;
-    }
-  }
-}
-
-@include b(button-group) {
-  @include utils-clearfix;
-  display: inline-block;
-  vertical-align: middle;
-
-  & > .#{$namespace}-button {
-    float: left;
-    position: relative;
-    & + .#{$namespace}-button {
-      margin-left: 0;
-    }
-    &:first-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-    &:last-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-    &:first-child:last-child {
-      border-top-right-radius: $--button-border-radius;
-      border-bottom-right-radius: $--button-border-radius;
-      border-top-left-radius: $--button-border-radius;
-      border-bottom-left-radius: $--button-border-radius;
-
-      &.is-round {
-        border-radius: 20px;
-      }
-
-      &.is-circle {
-        border-radius: 50%;
-      }
-    }
-    &:not(:first-child):not(:last-child) {
-      border-radius: 0;
-    }
-    &:not(:last-child) {
-      margin-right: -1px;
-    }
-
-    &:hover,
-    &:focus,
-    &:active {
-      z-index: 1;
-    }
-
-    @include when(active) {
-      z-index: 1;
-    }
-  }
-
-  & > .#{$namespace}-dropdown {
-    & > .#{$namespace}-button {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      border-left-color: rgba($--color-white, 0.5);
-    }
-  }
-
-  @each $type in (primary, success, warning, danger, info) {
-    .#{$namespace}-button--#{$type} {
-      &:first-child {
-        border-right-color: rgba($--color-white, 0.5);
-      }
-      &:last-child {
-        border-left-color: rgba($--color-white, 0.5);
-      }
-      &:not(:first-child):not(:last-child) {
-        border-left-color: rgba($--color-white, 0.5);
-        border-right-color: rgba($--color-white, 0.5);
-      }
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/calendar.scss b/src/assets/css/themes/src/calendar.scss
deleted file mode 100644
index ae517c7d..00000000
--- a/src/assets/css/themes/src/calendar.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-@import "button";
-@import "button-group";
-
-@include b(calendar) {
-  background-color:#fff;
-
-  @include e(header) {
-    display: flex;
-    justify-content: space-between;
-    padding: 12px 20px;
-    border-bottom: $--table-border;
-  }
-
-  @include e(title) {
-    color: #000000;
-    align-self: center;
-  }
-
-  @include e(body) {
-    padding: 12px 20px 35px;
-  }
-}
-
-@include b(calendar-table) {
-  table-layout: fixed;
-  width: 100%;
-
-  thead th {
-    padding: 12px 0;
-    color: $--color-text-regular;
-    font-weight: normal;
-  }
-
-  &:not(.is-range) {
-    td.prev,
-    td.next {
-      color: $--color-text-placeholder;
-    }
-  }
-
-  td {
-    border-bottom: $--calendar-border;
-    border-right: $--calendar-border;
-    vertical-align: top;
-    transition: background-color 0.2s ease;
-
-    @include when(selected) {
-      background-color: $--calendar-selected-background-color;
-    }
-
-    @include when(today) {
-      color: $--color-primary;
-    }
-  }
-
-  tr:first-child td {
-    border-top: $--calendar-border;
-  }
-
-  tr td:first-child {
-    border-left: $--calendar-border;
-  }
-
-  tr.#{$namespace}-calendar-table__row--hide-border td {
-    border-top: none;
-  }
-
-  @include b(calendar-day) {
-    box-sizing: border-box;
-    padding: 8px;
-    height: $--calendar-cell-width;
-    &:hover {
-      cursor: pointer;
-      background-color: $--calendar-selected-background-color;
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/card.scss b/src/assets/css/themes/src/card.scss
deleted file mode 100644
index 1a5b2478..00000000
--- a/src/assets/css/themes/src/card.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(card) {
-  border-radius: $--card-border-radius;
-  border: 1px solid $--card-border-color;
-  background-color: $--color-white;
-  overflow: hidden;
-  color: $--color-text-primary;
-  transition: 0.3s;
-
-  @include when(always-shadow) {
-    box-shadow: $--box-shadow-light;
-  }
-
-  @include when(hover-shadow) {
-    &:hover,
-    &:focus {
-      box-shadow: $--box-shadow-light;
-    }
-  }
-
-  @include e(header) {
-    padding: #{$--card-padding - 2 $--card-padding};
-    border-bottom: 1px solid $--card-border-color;
-    box-sizing: border-box;
-  }
-
-  @include e(body) {
-    padding: $--card-padding;
-  }
-}
diff --git a/src/assets/css/themes/src/carousel-item.scss b/src/assets/css/themes/src/carousel-item.scss
deleted file mode 100644
index 16f07921..00000000
--- a/src/assets/css/themes/src/carousel-item.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(carousel) {
-  @include e(item) {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: inline-block;
-    overflow: hidden;
-    z-index: #{$--index-normal - 1};
-
-    @include when(active) {
-      z-index: #{$--index-normal + 1};
-    }
-
-    @include when(animating) {
-      transition: transform .4s ease-in-out;
-    }
-
-    @include m(card) {
-      width: 50%;
-      transition: transform .4s ease-in-out;
-      &.is-in-stage {
-        cursor: pointer;
-        z-index: $--index-normal;
-        &:hover .#{$namespace}-carousel__mask,
-        &.is-hover .#{$namespace}-carousel__mask {
-          opacity: 0.12;
-        }
-      }
-      &.is-active {
-        z-index: #{$--index-normal + 1};
-      }
-    }
-  }
-
-  @include e(mask) {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    background-color: $--color-white;
-    opacity: 0.24;
-    transition: .2s;
-  }
-}
\ No newline at end of file
diff --git a/src/assets/css/themes/src/carousel.scss b/src/assets/css/themes/src/carousel.scss
deleted file mode 100644
index c26881f1..00000000
--- a/src/assets/css/themes/src/carousel.scss
+++ /dev/null
@@ -1,161 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(carousel) {
-  position: relative;
-
-  @include m(horizontal) {
-    overflow-x: hidden;
-  }
-
-  @include m(vertical) {
-    overflow-y: hidden;
-  }
-
-  @include e(container) {
-    position: relative;
-    height: 300px;
-  }
-
-  @include e(arrow) {
-    border: none;
-    outline: none;
-    padding: 0;
-    margin: 0;
-    height: $--carousel-arrow-size;
-    width: $--carousel-arrow-size;
-    cursor: pointer;
-    transition: .3s;
-    border-radius: 50%;
-    background-color: $--carousel-arrow-background;
-    color: $--color-white;
-    position: absolute;
-    top: 50%;
-    z-index: 10;
-    transform: translateY(-50%);
-    text-align: center;
-    font-size: $--carousel-arrow-font-size;
-
-    @include m(left) {
-      left: 16px;
-    }
-
-    @include m(right) {
-      right: 16px;
-    }
-
-    &:hover {
-      background-color: $--carousel-arrow-hover-background;
-    }
-
-    & i {
-      cursor: pointer;
-    }
-  }
-
-  @include e(indicators) {
-    position: absolute;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    z-index: #{$--index-normal + 1};
-
-    @include m(horizontal) {
-      bottom: 0;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    @include m(vertical) {
-      right: 0;
-      top: 50%;
-      transform: translateY(-50%);
-    }
-
-    @include m(outside) {
-      bottom: #{$--carousel-indicator-height + $--carousel-indicator-padding-vertical * 2};
-      text-align: center;
-      position: static;
-      transform: none;
-      .#{$namespace}-carousel__indicator:hover button {
-        opacity: 0.64;
-      }
-      button {
-        background-color: $--carousel-indicator-out-color;
-        opacity: 0.24;
-      }
-    }
-
-    @include m(labels) {
-      left: 0;
-      right: 0;
-      transform: none;
-      text-align: center;
-
-      .#{$namespace}-carousel__button {
-        height: auto;
-        width: auto;
-        padding: 2px 18px;
-        font-size: 12px;
-      }
-
-      .#{$namespace}-carousel__indicator {
-        padding: 6px 4px;
-      }
-    }
-  }
-
-  @include e(indicator) {
-    background-color: transparent;
-    cursor: pointer;
-
-    &:hover button {
-      opacity: 0.72;
-    }
-
-    @include m(horizontal) {
-      display: inline-block;
-      padding: $--carousel-indicator-padding-vertical $--carousel-indicator-padding-horizontal;
-    }
-
-    @include m(vertical) {
-      padding: $--carousel-indicator-padding-horizontal $--carousel-indicator-padding-vertical;
-      .#{$namespace}-carousel__button {
-        width: $--carousel-indicator-height;
-        height: #{$--carousel-indicator-width / 2};
-      }
-    }
-
-    @include when(active) {
-      button {
-        opacity: 1;
-      }
-    }
-  }
-
-  @include e(button) {
-    display: block;
-    opacity: 0.48;
-    width: $--carousel-indicator-width;
-    height: $--carousel-indicator-height;
-    background-color: $--color-white;
-    border: none;
-    outline: none;
-    padding: 0;
-    margin: 0;
-    cursor: pointer;
-    transition: .3s;
-  }
-}
-
-.carousel-arrow-left-enter-from,
-.carousel-arrow-left-leave-active {
-  transform: translateY(-50%) translateX(-10px);
-  opacity: 0;
-}
-
-.carousel-arrow-right-enter-from,
-.carousel-arrow-right-leave-active {
-  transform: translateY(-50%) translateX(10px);
-  opacity: 0;
-}
diff --git a/src/assets/css/themes/src/cascader-panel.scss b/src/assets/css/themes/src/cascader-panel.scss
deleted file mode 100644
index a6398142..00000000
--- a/src/assets/css/themes/src/cascader-panel.scss
+++ /dev/null
@@ -1,121 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-@import "./checkbox";
-@import "./radio";
-@import "./scrollbar";
-
-@include b(cascader-panel) {
-  display: flex;
-  border-radius: $--cascader-menu-radius;
-  font-size: $--cascader-menu-font-size;
-
-  @include when(bordered) {
-    border: $--cascader-menu-border;
-    border-radius: $--cascader-menu-radius;
-  }
-}
-
-@include b(cascader-menu) {
-  min-width: 180px;
-  box-sizing: border-box;
-  color: $--cascader-menu-font-color;
-  border-right: $--cascader-menu-border;
-
-  &:last-child {
-    border-right: none;
-    .#{$namespace}-cascader-node {
-      padding-right: 20px;
-    }
-  }
-
-  @include e(wrap) {
-    height: 204px;
-  }
-
-  @include e(list) {
-    position: relative;
-    min-height: 100%;
-    margin: 0;
-    padding: 6px 0;
-    list-style: none;
-    box-sizing: border-box;
-  }
-
-  @include e(hover-zone) {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-  }
-
-  @include e(empty-text) {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    text-align: center;
-    color: $--cascader-color-empty;
-  }
-}
-
-@include b(cascader-node) {
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: 0 30px 0 20px;
-  height: 34px;
-  line-height: 34px;
-  outline: none;
-
-  &.is-selectable.in-active-path {
-    color: $--cascader-menu-font-color;
-  }
-
-  &.in-active-path,
-  &.is-selectable.in-checked-path,
-  &.is-active {
-    color: $--cascader-menu-selected-font-color;
-    font-weight: bold;
-  }
-
-  &:not(.is-disabled) {
-    cursor: pointer;
-    &:hover, &:focus {
-      background: $--cascader-node-background-hover;
-    }
-  }
-
-  @include when(disabled) {
-    color: $--cascader-node-color-disabled;
-    cursor: not-allowed;
-  }
-
-  @include e(prefix) {
-    position: absolute;
-    left: 10px;
-  }
-
-  @include e(postfix) {
-    position: absolute;
-    right: 10px;
-  }
-
-  @include e(label) {
-    flex: 1;
-    text-align: left;
-    padding: 0 10px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  > .#{$namespace}-radio {
-    margin-right: 0;
-
-    .#{$namespace}-radio__label {
-      padding-left: 0;
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/cascader.scss b/src/assets/css/themes/src/cascader.scss
deleted file mode 100644
index 496d7fd7..00000000
--- a/src/assets/css/themes/src/cascader.scss
+++ /dev/null
@@ -1,185 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-@import "./input";
-@import "./popper";
-@import "./tag";
-@import "./cascader-panel";
-
-@include b(cascader) {
-  display: inline-block;
-  position: relative;
-  font-size: $--font-size-base;
-  line-height: $--input-height;
-  outline: none;
-
-  &:not(.is-disabled):hover {
-    .#{$namespace}-input__inner {
-      cursor: pointer;
-      border-color: $--input-hover-border;
-    }
-  }
-
-  .#{$namespace}-input {
-    cursor: pointer;
-
-    .#{$namespace}-input__inner {
-      text-overflow: ellipsis;
-
-      &:focus {
-        border-color: $--input-focus-border;
-      }
-    }
-
-    .#{$namespace}-icon-arrow-down {
-      transition: transform .3s;
-      font-size: 14px;
-
-      @include when(reverse) {
-        transform: rotateZ(180deg);
-      }
-    }
-
-    .#{$namespace}-icon-circle-close:hover {
-      color: $--input-clear-hover-color;
-    }
-
-    @include when(focus) {
-      .#{$namespace}-input__inner {
-        border-color: $--input-focus-border;
-      }
-    }
-  }
-
-  @include m(medium) {
-    font-size: $--input-medium-font-size;
-    line-height: $--input-medium-height;
-  }
-
-  @include m(small) {
-    font-size: $--input-small-font-size;
-    line-height: $--input-small-height;
-  }
-
-  @include m(mini) {
-    font-size: $--input-mini-font-size;
-    line-height: $--input-mini-height;
-  }
-
-  @include when(disabled) {
-    .#{$namespace}-cascader__label {
-      z-index: #{$--index-normal + 1};
-      color: $--disabled-color-base;
-    }
-  }
-
-  @include e(dropdown) {
-    font-size: $--cascader-menu-font-size;
-    border-radius: $--cascader-menu-radius;
-
-    @include picker-popper(
-      $--cascader-menu-fill,
-      $--cascader-menu-border,
-      $--cascader-menu-shadow,
-    );
-  }
-
-  @include e(tags) {
-    position: absolute;
-    left: 0;
-    right: 30px;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    flex-wrap: wrap;
-    line-height: normal;
-    text-align: left;
-    box-sizing: border-box;
-
-    .#{$namespace}-tag {
-      display: inline-flex;
-      align-items: center;
-      max-width: 100%;
-      margin: 2px 0 2px 6px;
-      text-overflow: ellipsis;
-      background: $--cascader-tag-background;
-
-      &:not(.is-hit) {
-        border-color: transparent;
-      }
-
-      > span {
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      .#{$namespace}-icon-close {
-        flex: none;
-        background-color: $--color-text-placeholder;
-        color: $--color-white;
-
-        &:hover {
-          background-color: $--color-text-secondary;
-        }
-      }
-    }
-  }
-
-  @include e(suggestion-panel) {
-    border-radius: $--cascader-menu-radius;
-  }
-
-  @include e(suggestion-list) {
-    max-height: 204px;
-    margin: 0;
-    padding: 6px 0;
-    font-size: $--font-size-base;
-    color: $--cascader-menu-font-color;
-    text-align: center;
-  }
-
-  @include e(suggestion-item) {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 34px;
-    padding: 0 15px;
-    text-align: left;
-    outline: none;
-    cursor: pointer;
-
-    &:hover, &:focus {
-      background: $--cascader-node-background-hover;
-    }
-
-    &.is-checked {
-      color: $--cascader-menu-selected-font-color;
-      font-weight: bold;
-    }
-
-    > span {
-      margin-right: 10px;
-    }
-  }
-
-  @include e(empty-text) {
-    margin: 10px 0;
-    color: $--cascader-color-empty;
-  }
-
-  @include e(search-input) {
-    flex: 1;
-    height: 24px;
-    min-width: 60px;
-    margin: 2px 0 2px 15px;
-    padding: 0;
-    color: $--cascader-menu-font-color;
-    border: none;
-    outline: none;
-    box-sizing: border-box;
-
-    &::placeholder {
-      color: $--color-text-placeholder;
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/check-tag.scss b/src/assets/css/themes/src/check-tag.scss
deleted file mode 100644
index dadef437..00000000
--- a/src/assets/css/themes/src/check-tag.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(check-tag) {
-  background-color: $--background-color-base;
-  border-radius: $--border-radius-base;
-  color: $--color-info;
-  cursor: pointer;
-  display: inline-block;
-  font-size: $--font-size-base;
-  line-height: $--font-size-base;
-  padding: 7px 15px;
-  transition: $--all-transition;
-  font-weight: bold;
-  &:hover {
-    background-color: rgb(220, 223, 230);
-  }
-
-  @include when(checked) {
-    background-color: #DEEDFC;
-    color: $--color-primary-light-1;
-    &:hover {
-      background-color: $--color-primary-light-7;
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/checkbox-button.scss b/src/assets/css/themes/src/checkbox-button.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/assets/css/themes/src/checkbox-group.scss b/src/assets/css/themes/src/checkbox-group.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/assets/css/themes/src/checkbox.scss b/src/assets/css/themes/src/checkbox.scss
deleted file mode 100644
index 397b1876..00000000
--- a/src/assets/css/themes/src/checkbox.scss
+++ /dev/null
@@ -1,359 +0,0 @@
-@import "common/var";
-@import "mixins/mixins";
-@import "mixins/_button";
-@import "mixins/utils";
-
-@include b(checkbox) {
-  color: $--checkbox-font-color;
-  font-weight: $--checkbox-font-weight;
-  font-size: $--font-size-base;
-  position: relative;
-  cursor: pointer;
-  display: inline-block;
-  white-space: nowrap;
-  user-select: none;
-  margin-right: 30px;
-
-  @include when(bordered) {
-    padding: $--checkbox-bordered-padding;
-    border-radius: $--border-radius-base;
-    border: $--border-base;
-    box-sizing: border-box;
-    line-height: normal;
-    height: $--checkbox-bordered-height;
-
-    &.is-checked {
-      border-color: $--color-primary;
-    }
-
-    &.is-disabled {
-      border-color: $--border-color-lighter;
-      cursor: not-allowed;
-    }
-
-    & + .#{$namespace}-checkbox.is-bordered {
-      margin-left: 10px;
-    }
-
-    &.#{$namespace}-checkbox--medium {
-      padding: $--checkbox-bordered-medium-padding;
-      border-radius: $--button-medium-border-radius;
-      height: $--checkbox-bordered-medium-height;
-
-      .#{$namespace}-checkbox__label {
-        line-height: 17px;
-        font-size: $--button-medium-font-size;
-      }
-
-      .#{$namespace}-checkbox__inner {
-        height: $--checkbox-bordered-medium-input-height;
-        width: $--checkbox-bordered-medium-input-width;
-      }
-    }
-
-    &.#{$namespace}-checkbox--small {
-      padding: $--checkbox-bordered-small-padding;
-      border-radius: $--button-small-border-radius;
-      height: $--checkbox-bordered-small-height;
-
-      .#{$namespace}-checkbox__label {
-        line-height: 15px;
-        font-size: $--button-small-font-size;
-      }
-
-      .#{$namespace}-checkbox__inner {
-        height: $--checkbox-bordered-small-input-height;
-        width: $--checkbox-bordered-small-input-width;
-
-        &::after {
-          height: 6px;
-          width: 2px;
-        }
-      }
-    }
-
-    &.#{$namespace}-checkbox--mini {
-      padding: $--checkbox-bordered-mini-padding;
-      border-radius: $--button-mini-border-radius;
-      height: $--checkbox-bordered-mini-height;
-
-      .#{$namespace}-checkbox__label {
-        line-height: 12px;
-        font-size: $--button-mini-font-size;
-      }
-
-      .#{$namespace}-checkbox__inner {
-        height: $--checkbox-bordered-mini-input-height;
-        width: $--checkbox-bordered-mini-input-width;
-        &::after {
-          height: 6px;
-          width: 2px;
-        }
-      }
-    }
-  }
-
-  @include e(input) {
-    white-space: nowrap;
-    cursor: pointer;
-    outline: none;
-    display: inline-block;
-    line-height: 1;
-    position: relative;
-    vertical-align: middle;
-
-    @include when(disabled) {
-      .#{$namespace}-checkbox__inner {
-        background-color: $--checkbox-disabled-input-fill;
-        border-color: $--checkbox-disabled-border-color;
-        cursor: not-allowed;
-
-        &::after {
-          cursor: not-allowed;
-          border-color: $--checkbox-disabled-icon-color;
-        }
-
-        & + .#{$namespace}-checkbox__label {
-          cursor: not-allowed;
-        }
-      }
-
-      &.is-checked {
-        .#{$namespace}-checkbox__inner {
-          background-color: $--checkbox-disabled-checked-input-fill;
-          border-color: $--checkbox-disabled-checked-input-border-color;
-
-          &::after {
-            border-color: $--checkbox-disabled-checked-icon-color;
-          }
-        }
-      }
-
-      &.is-indeterminate {
-        .#{$namespace}-checkbox__inner {
-          background-color: $--checkbox-disabled-checked-input-fill;
-          border-color: $--checkbox-disabled-checked-input-border-color;
-
-          &::before {
-            background-color: $--checkbox-disabled-checked-icon-color;
-            border-color: $--checkbox-disabled-checked-icon-color;
-          }
-        }
-      }
-
-      & + span.#{$namespace}-checkbox__label {
-        color: $--disabled-color-base;
-        cursor: not-allowed;
-      }
-    }
-
-    @include when(checked) {
-      .#{$namespace}-checkbox__inner {
-        background-color: $--checkbox-checked-background-color;
-        border-color: $--checkbox-checked-input-border-color;
-
-        &::after {
-          transform: rotate(45deg) scaleY(1);
-        }
-      }
-
-      & + .#{$namespace}-checkbox__label {
-        color: $--checkbox-checked-font-color;
-      }
-    }
-    @include when(focus) { /*focus时 视觉上区分*/
-      .#{$namespace}-checkbox__inner {
-        border-color: $--checkbox-input-border-color-hover;
-      }
-    }
-    @include when(indeterminate) {
-      .#{$namespace}-checkbox__inner {
-        background-color: $--checkbox-checked-background-color;
-        border-color: $--checkbox-checked-input-border-color;
-
-        &::before {
-          content: '';
-          position: absolute;
-          display: block;
-          background-color: $--checkbox-checked-icon-color;
-          height: 2px;
-          transform: scale(0.5);
-          left: 0;
-          right: 0;
-          top: 5px;
-        }
-
-        &::after {
-          display: none;
-        }
-      }
-    }
-  }
-  @include e(inner) {
-    display: inline-block;
-    position: relative;
-    border: $--checkbox-input-border;
-    border-radius: $--checkbox-border-radius;
-    box-sizing: border-box;
-    width: $--checkbox-input-width;
-    height: $--checkbox-input-height;
-    background-color: $--checkbox-background-color;
-    z-index: $--index-normal;
-    transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
-    background-color .25s cubic-bezier(.71,-.46,.29,1.46);
-
-    &:hover {
-      border-color: $--checkbox-input-border-color-hover;
-    }
-
-    &::after {
-      box-sizing: content-box;
-      content: "";
-      border: 1px solid $--checkbox-checked-icon-color;
-      border-left: 0;
-      border-top: 0;
-      height: 7px;
-      left: 4px;
-      position: absolute;
-      top: 1px;
-      transform: rotate(45deg) scaleY(0);
-      width: 3px;
-      transition: transform .15s ease-in .05s;
-      transform-origin: center;
-    }
-  }
-
-  @include e(original) {
-    opacity: 0;
-    outline: none;
-    position: absolute;
-    margin: 0;
-    width: 0;
-    height: 0;
-    z-index: -1;
-  }
-
-  @include e(label) {
-    display: inline-block;
-    padding-left: 10px;
-    line-height: 19px;
-    font-size: $--checkbox-font-size;
-  }
-
-  &:last-of-type {
-    margin-right: 0;
-  }
-}
-
-@include b(checkbox-button) {
-  position: relative;
-  display: inline-block;
-
-  @include e(inner) {
-    display: inline-block;
-    line-height: 1;
-    font-weight: $--checkbox-font-weight;
-    white-space: nowrap;
-    vertical-align: middle;
-    cursor: pointer;
-    background: $--button-default-background-color;
-    border: $--border-base;
-    border-left: 0;
-    color: $--button-default-font-color;
-    -webkit-appearance: none;
-    text-align: center;
-    box-sizing: border-box;
-    outline: none;
-    margin: 0;
-    position: relative;
-    transition: $--all-transition;
-    @include utils-user-select(none);
-
-    @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, 0);
-
-    &:hover {
-      color: $--color-primary;
-    }
-
-    & [class*="#{$namespace}-icon-"] {
-      line-height: 0.9;
-
-      & + span {
-        margin-left: 5px;
-      }
-    }
-  }
-
-  @include e(original) {
-    opacity: 0;
-    outline: none;
-    position: absolute;
-    margin: 0;
-    z-index: -1;
-  }
-
-  &.is-checked {
-    & .#{$namespace}-checkbox-button__inner {
-      color: $--checkbox-button-checked-font-color;
-      background-color: $--checkbox-button-checked-background-color;
-      border-color: $--checkbox-button-checked-border-color;
-      box-shadow: -1px 0 0 0 $--color-primary-light-4;
-    }
-    &:first-child .#{$namespace}-checkbox-button__inner {
-      border-left-color: $--checkbox-button-checked-border-color;
-    }
-  }
-
-  &.is-disabled {
-    & .#{$namespace}-checkbox-button__inner {
-      color: $--button-disabled-font-color;
-      cursor: not-allowed;
-      background-image: none;
-      background-color: $--button-disabled-background-color;
-      border-color: $--button-disabled-border-color;
-      box-shadow: none;
-    }
-    &:first-child .#{$namespace}-checkbox-button__inner {
-      border-left-color: $--button-disabled-border-color;
-    }
-  }
-
-  &:first-child {
-    .#{$namespace}-checkbox-button__inner {
-      border-left: $--border-base;
-      border-radius: $--border-radius-base 0 0 $--border-radius-base;
-      box-shadow: none !important;
-    }
-  }
-
-  &.is-focus {
-    & .#{$namespace}-checkbox-button__inner {
-      border-color: $--checkbox-button-checked-border-color;
-    }
-  }
-
-  &:last-child {
-    .#{$namespace}-checkbox-button__inner {
-      border-radius: 0 $--border-radius-base $--border-radius-base 0;
-    }
-  }
-  @include m(medium) {
-    .#{$namespace}-checkbox-button__inner {
-      @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, 0);
-    }
-  }
-  @include m(small) {
-    .#{$namespace}-checkbox-button__inner {
-      @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, 0);
-    }
-  }
-  @include m(mini) {
-    .#{$namespace}-checkbox-button__inner {
-      @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, 0);
-    }
-  }
-}
-
-@include b(checkbox-group) {
-  font-size: 0;
-}
diff --git a/src/assets/css/themes/src/col.scss b/src/assets/css/themes/src/col.scss
deleted file mode 100644
index 0dd32bf5..00000000
--- a/src/assets/css/themes/src/col.scss
+++ /dev/null
@@ -1,200 +0,0 @@
-@import './common/var.scss';
-@import './mixins/mixins.scss';
-
-[class*='#{$namespace}-col-'] {
-  float: left;
-  box-sizing: border-box;
-  @include when(guttered) {
-    display: block;
-    min-height: 1px;
-  }
-}
-
-.#{$namespace}-col-0 {
-  display: none;
-  // to avoid introducing !important syntax, redundant css rule is required due to selector priority.
-  @include when(guttered) {
-    display: none;
-  }
-}
-
-@for $i from 0 through 24 {
-  .#{$namespace}-col-#{$i} {
-    max-width: (1 / 24 * $i * 100) * 1%;
-    flex: 0 0 (1 / 24 * $i * 100) * 1%;
-  }
-
-  .#{$namespace}-col-offset-#{$i} {
-    margin-left: (1 / 24 * $i * 100) * 1%;
-  }
-
-  .#{$namespace}-col-pull-#{$i} {
-    position: relative;
-    right: (1 / 24 * $i * 100) * 1%;
-  }
-
-  .#{$namespace}-col-push-#{$i} {
-    position: relative;
-    left: (1 / 24 * $i * 100) * 1%;
-  }
-}
-
-@include res(xs) {
-  .#{$namespace}-col-xs-0 {
-    display: none;
-    @include when(guttered) {
-      display: none;
-    }
-  }
-  @for $i from 0 through 24 {
-    .#{$namespace}-col-xs-#{$i} {
-      @if $i != 0 {
-        display: block;
-      }
-      max-width: (1 / 24 * $i * 100) * 1%;
-      flex: 0 0 (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-xs-offset-#{$i} {
-      margin-left: (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-xs-pull-#{$i} {
-      position: relative;
-      right: (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-xs-push-#{$i} {
-      position: relative;
-      left: (1 / 24 * $i * 100) * 1%;
-    }
-  }
-}
-
-@include res(sm) {
-  .#{$namespace}-col-sm-0 {
-    display: none;
-    @include when(guttered) {
-      display: none;
-    }
-  }
-  @for $i from 0 through 24 {
-    .#{$namespace}-col-sm-#{$i} {
-      @if $i != 0 {
-        display: block;
-      }
-      max-width: (1 / 24 * $i * 100) * 1%;
-      flex: 0 0 (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-sm-offset-#{$i} {
-      margin-left: (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-sm-pull-#{$i} {
-      position: relative;
-      right: (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-sm-push-#{$i} {
-      position: relative;
-      left: (1 / 24 * $i * 100) * 1%;
-    }
-  }
-}
-
-@include res(md) {
-  .#{$namespace}-col-md-0 {
-    display: none;
-    @include when(guttered) {
-      display: none;
-    }
-  }
-  @for $i from 0 through 24 {
-    .#{$namespace}-col-md-#{$i} {
-      @if $i != 0 {
-        display: block;
-      }
-      max-width: (1 / 24 * $i * 100) * 1%;
-      flex: 0 0 (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-md-offset-#{$i} {
-      margin-left: (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-md-pull-#{$i} {
-      position: relative;
-      right: (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-md-push-#{$i} {
-      position: relative;
-      left: (1 / 24 * $i * 100) * 1%;
-    }
-  }
-}
-
-@include res(lg) {
-  .#{$namespace}-col-lg-0 {
-    display: none;
-    @include when(guttered) {
-      display: none;
-    }
-  }
-  @for $i from 0 through 24 {
-    .#{$namespace}-col-lg-#{$i} {
-      @if $i != 0 {
-        display: block;
-      }
-      max-width: (1 / 24 * $i * 100) * 1%;
-      flex: 0 0 (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-lg-offset-#{$i} {
-      margin-left: (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-lg-pull-#{$i} {
-      position: relative;
-      right: (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-lg-push-#{$i} {
-      position: relative;
-      left: (1 / 24 * $i * 100) * 1%;
-    }
-  }
-}
-
-@include res(xl) {
-  .#{$namespace}-col-xl-0 {
-    display: none;
-    @include when(guttered) {
-      display: none;
-    }
-  }
-  @for $i from 0 through 24 {
-    .#{$namespace}-col-xl-#{$i} {
-      @if $i != 0 {
-        display: block;
-      }
-      max-width: (1 / 24 * $i * 100) * 1%;
-      flex: 0 0 (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-xl-offset-#{$i} {
-      margin-left: (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-xl-pull-#{$i} {
-      position: relative;
-      right: (1 / 24 * $i * 100) * 1%;
-    }
-
-    .#{$namespace}-col-xl-push-#{$i} {
-      position: relative;
-      left: (1 / 24 * $i * 100) * 1%;
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/collapse-item.scss b/src/assets/css/themes/src/collapse-item.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/assets/css/themes/src/collapse-transition.scss b/src/assets/css/themes/src/collapse-transition.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/assets/css/themes/src/collapse.scss b/src/assets/css/themes/src/collapse.scss
deleted file mode 100644
index feccaf7b..00000000
--- a/src/assets/css/themes/src/collapse.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-@import "common/transition";
-
-@include b(collapse) {
-  border-top: 1px solid $--collapse-border-color;
-  border-bottom: 1px solid $--collapse-border-color;
-}
-@include b(collapse-item) {
-  @include when(disabled) {
-    .#{$namespace}-collapse-item__header {
-      color: $--font-color-disabled-base;
-      cursor: not-allowed;
-    }
-  }
-  @include e(header) {
-    display: flex;
-    align-items: center;
-    height: $--collapse-header-height;
-    line-height: $--collapse-header-height;
-    background-color: $--collapse-header-background-color;
-    color: $--collapse-header-font-color;
-    cursor: pointer;
-    border-bottom: 1px solid $--collapse-border-color;
-    font-size: $--collapse-header-font-size;
-    font-weight: 500;
-    transition: border-bottom-color .3s;
-    outline: none;
-    @include e(arrow) {
-      margin: 0 8px 0 auto;
-      transition: transform .3s;
-      font-weight: 300;
-      @include when(active) {
-        transform: rotate(90deg);
-      }
-    }
-    &.focusing:focus:not(:hover){
-      color: $--color-primary;
-    }
-    @include when(active) {
-      border-bottom-color: transparent;
-    }
-  }
-
-  @include e(wrap) {
-    will-change: height;
-    background-color: $--collapse-content-background-color;
-    overflow: hidden;
-    box-sizing: border-box;
-    border-bottom: 1px solid $--collapse-border-color;
-  }
-
-  @include e(content) {
-    padding-bottom: 25px;
-    font-size: $--collapse-content-font-size;
-    color: $--collapse-content-font-color;
-    line-height: 1.769230769230769;
-  }
-
-  &:last-child {
-    margin-bottom: -1px;
-  }
-}
diff --git a/src/assets/css/themes/src/color-picker.scss b/src/assets/css/themes/src/color-picker.scss
deleted file mode 100644
index d179f516..00000000
--- a/src/assets/css/themes/src/color-picker.scss
+++ /dev/null
@@ -1,387 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(color-predefine) {
-  display: flex;
-  font-size: 12px;
-  margin-top: 8px;
-  width: 280px;
-
-  @include e(colors) {
-    display: flex;
-    flex: 1;
-    flex-wrap: wrap;
-  }
-
-  @include e(color-selector) {
-    margin: 0 0 8px 8px;
-    width: 20px;
-    height: 20px;
-    border-radius: 4px;
-    cursor: pointer;
-
-    &:nth-child(10n + 1) {
-      margin-left: 0;
-    }
-
-    &.selected {
-      box-shadow: 0 0 3px 2px $--color-primary;
-    }
-
-    > div {
-      display: flex;
-      height: 100%;
-      border-radius: 3px;
-    }
-
-    @include when(alpha) {
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
-    }
-  }
-}
-
-@include b(color-hue-slider) {
-  position: relative;
-  box-sizing: border-box;
-  width: 280px;
-  height: 12px;
-  background-color: #f00;
-  padding: 0 2px;
-  float: right;
-
-  @include e(bar) {
-    position: relative;
-    background: linear-gradient(
-      to right, #f00 0%,
-      #ff0 17%, #0f0 33%,
-      #0ff 50%, #00f 67%,
-      #f0f 83%, #f00 100%);
-    height: 100%;
-  }
-
-  @include e(thumb) {
-    position: absolute;
-    cursor: pointer;
-    box-sizing: border-box;
-    left: 0;
-    top: 0;
-    width: 4px;
-    height: 100%;
-    border-radius: 1px;
-    background: #fff;
-    border: 1px solid #f0f0f0;
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
-    z-index: 1;
-  }
-
-  @include when(vertical) {
-    width: 12px;
-    height: 180px;
-    padding: 2px 0;
-
-    .#{$namespace}-color-hue-slider__bar {
-      background: linear-gradient(
-        to bottom, #f00 0%,
-        #ff0 17%, #0f0 33%,
-        #0ff 50%, #00f 67%,
-        #f0f 83%, #f00 100%);
-    }
-
-    .#{$namespace}-color-hue-slider__thumb {
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 4px;
-    }
-  }
-}
-
-@include b(color-svpanel) {
-  position: relative;
-  width: 280px;
-  height: 180px;
-
-  @include e(('white', 'black')) {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-
-  @include e('white') {
-    background: linear-gradient(to right, #fff, rgba(255,255,255,0));
-  }
-
-  @include e('black') {
-    background: linear-gradient(to top, #000, rgba(0,0,0,0));
-  }
-
-  @include e(cursor) {
-    position: absolute;
-
-    > div {
-      cursor: head;
-      width: 4px;
-      height: 4px;
-      box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,0.3), 0 0 1px 2px rgba(0,0,0,0.4);
-      border-radius: 50%;
-      transform: translate(-2px, -2px);
-    }
-  }
-}
-
-@include b(color-alpha-slider) {
-  position: relative;
-  box-sizing: border-box;
-  width: 280px;
-  height: 12px;
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
-
-  @include e(bar) {
-    position: relative;
-    background: linear-gradient(
-      to right, rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 1) 100%);
-    height: 100%;
-  }
-
-  @include e(thumb) {
-    position: absolute;
-    cursor: pointer;
-    box-sizing: border-box;
-    left: 0;
-    top: 0;
-    width: 4px;
-    height: 100%;
-    border-radius: 1px;
-    background: #fff;
-    border: 1px solid #f0f0f0;
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
-    z-index: 1;
-  }
-
-  @include when(vertical) {
-    width: 20px;
-    height: 180px;
-
-    .#{$namespace}-color-alpha-slider__bar {
-      background: linear-gradient(
-        to bottom, rgba(255, 255, 255, 0) 0%,
-        rgba(255, 255, 255, 1) 100%);
-    }
-
-    .#{$namespace}-color-alpha-slider__thumb {
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 4px;
-    }
-  }
-}
-
-@include b(color-dropdown) {
-  width: 300px;
-
-  @include e(main-wrapper) {
-    margin-bottom: 6px;
-
-    &::after {
-      content: "";
-      display: table;
-      clear: both;
-    }
-  }
-
-  @include e(btns) {
-    margin-top: 6px;
-    text-align: right;
-  }
-
-  @include e(value) {
-    float: left;
-    line-height: 26px;
-    font-size: 12px;
-    color: $--color-black;
-    width: 160px;
-  }
-
-  @include e(btn) {
-    border: 1px solid #dcdcdc;
-    color: #333;
-    line-height: 24px;
-    border-radius: 2px;
-    padding: 0 20px;
-    cursor: pointer;
-    background-color: transparent;
-    outline: none;
-    font-size: 12px;
-
-    &[disabled] {
-      color: #cccccc;
-      cursor: not-allowed;
-    }
-    &:hover {
-      color: $--color-primary;
-      border-color: $--color-primary;
-    }
-  }
-
-  @include e(link-btn) {
-    cursor: pointer;
-    color: $--color-primary;
-    text-decoration: none;
-    padding: 15px;
-    font-size: 12px;
-    &:hover {
-      color: tint($--color-primary, $--button-hover-tint-percent);
-    }
-  }
-}
-
-@include b(color-picker) {
-  display: inline-block;
-  position: relative;
-  line-height: normal;
-  height: 40px;
-
-  @include when(disabled) {
-    .#{$namespace}-color-picker__trigger {
-      cursor: not-allowed;
-    }
-  }
-
-  @include m(medium) {
-    height: 36px;
-
-    .#{$namespace}-color-picker__trigger {
-      height: 36px;
-      width: 36px;
-    }
-
-    .#{$namespace}-color-picker__mask {
-      height: 34px;
-      width: 34px;
-    }
-  }
-
-  @include m(small) {
-    height: 32px;
-
-    .#{$namespace}-color-picker__trigger {
-      height: 32px;
-      width: 32px;
-    }
-
-    .#{$namespace}-color-picker__mask {
-      height: 30px;
-      width: 30px;
-    }
-
-    .#{$namespace}-color-picker__icon,
-    .#{$namespace}-color-picker__empty {
-      transform: translate3d(-50%, -50%, 0) scale(0.8);
-    }
-  }
-
-  @include m(mini) {
-    height: 28px;
-
-    .#{$namespace}-color-picker__trigger {
-      height: 28px;
-      width: 28px;
-    }
-
-    .#{$namespace}-color-picker__mask {
-      height: 26px;
-      width: 26px;
-    }
-
-    .#{$namespace}-color-picker__icon,
-    .#{$namespace}-color-picker__empty {
-      transform: translate3d(-50%, -50%, 0) scale(0.8);
-    }
-  }
-
-  @include e(mask) {
-    height: 38px;
-    width: 38px;
-    border-radius: 4px;
-    position: absolute;
-    top: 1px;
-    left: 1px;
-    z-index: 1;
-    cursor: not-allowed;
-    background-color: rgba(255, 255, 255, .7);
-  }
-
-  @include e(trigger) {
-    display: inline-block;
-    box-sizing: border-box;
-    height: 40px;
-    width: 40px;
-    padding: 4px;
-    border: 1px solid #e6e6e6;
-    border-radius: 4px;
-    font-size: 0;
-    position: relative;
-    cursor: pointer;
-  }
-
-  @include e(color) {
-    position: relative;
-    display: block;
-    box-sizing: border-box;
-    border: 1px solid #999;
-    border-radius: $--border-radius-small;
-    width: 100%;
-    height: 100%;
-    text-align: center;
-
-    @include when(alpha) {
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
-    }
-  }
-
-  @include e(color-inner) {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-  }
-
-  @include e(empty) {
-    font-size: 12px;
-    color: #999;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate3d(-50%, -50%, 0);
-  }
-
-  @include e(icon) {
-    display: inline-block;
-    position: absolute;
-    width: 100%;
-    top: 50%;
-    left: 50%;
-    transform: translate3d(-50%, -50%, 0);
-    color: $--color-white;
-    text-align: center;
-    font-size: 12px;
-  }
-
-  @include e(panel) {
-    position: absolute;
-    z-index: 10;
-    padding: 6px;
-    box-sizing: content-box;
-    background-color: $--color-white;
-    border-radius: $--border-radius-base;
-    box-shadow: $--dropdown-menu-box-shadow;
-    &.#{$namespace}-popper{
-      border: 1px solid $--border-color-lighter;
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/common/popup.scss b/src/assets/css/themes/src/common/popup.scss
deleted file mode 100644
index 00030ba6..00000000
--- a/src/assets/css/themes/src/common/popup.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@import "./var.scss";
-@import "../mixins/mixins";
-
-.v-modal-enter {
-  animation: v-modal-in .2s ease;
-}
-
-.v-modal-leave {
-  animation: v-modal-out .2s ease forwards;
-}
-
-@keyframes v-modal-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-  }
-}
-
-@keyframes v-modal-out {
-  0% {
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-.v-modal {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  opacity: $--popup-modal-opacity;
-  background: $--popup-modal-background-color;
-}
-
-@include b(popup-parent) {
-  @include m(hidden) {
-    overflow: hidden;
-  }
-}
diff --git a/src/assets/css/themes/src/common/transition.scss b/src/assets/css/themes/src/common/transition.scss
deleted file mode 100644
index eb39d7ed..00000000
--- a/src/assets/css/themes/src/common/transition.scss
+++ /dev/null
@@ -1,103 +0,0 @@
-@import '../mixins/config';
-@import "var";
-
-.fade-in-linear-enter-active,
-.fade-in-linear-leave-active {
-  transition: $--fade-linear-transition;
-}
-
-.fade-in-linear-enter-from,
-.fade-in-linear-leave-to {
-  opacity: 0;
-}
-
-.#{$namespace}-fade-in-linear-enter-active,
-.#{$namespace}-fade-in-linear-leave-active {
-  transition: $--fade-linear-transition;
-}
-.#{$namespace}-fade-in-linear-enter-from,
-.#{$namespace}-fade-in-linear-leave-to {
-  opacity: 0;
-}
-
-.#{$namespace}-fade-in-enter-active,
-.#{$namespace}-fade-in-leave-active {
-  transition: all .3s cubic-bezier(.55,0,.1,1);
-}
-.#{$namespace}-fade-in-enter-from,
-.#{$namespace}-fade-in-leave-active {
-  opacity: 0;
-}
-
-.#{$namespace}-zoom-in-center-enter-active,
-.#{$namespace}-zoom-in-center-leave-active {
-  transition: all .3s cubic-bezier(.55,0,.1,1);
-}
-.#{$namespace}-zoom-in-center-enter-from,
-.#{$namespace}-zoom-in-center-leave-active {
-  opacity: 0;
-  transform: scaleX(0);
-}
-
-.#{$namespace}-zoom-in-top-enter-active,
-.#{$namespace}-zoom-in-top-leave-active {
-  opacity: 1;
-  transform: scaleY(1);
-  transition: $--md-fade-transition;
-  transform-origin: center top;
-
-  &[data-popper-placement^="top"] {
-    transform-origin: center bottom;
-  }
-}
-.#{$namespace}-zoom-in-top-enter-from,
-.#{$namespace}-zoom-in-top-leave-active {
-  opacity: 0;
-  transform: scaleY(0);
-}
-
-.#{$namespace}-zoom-in-bottom-enter-active,
-.#{$namespace}-zoom-in-bottom-leave-active {
-  opacity: 1;
-  transform: scaleY(1);
-  transition: $--md-fade-transition;
-  transform-origin: center bottom;
-}
-.#{$namespace}-zoom-in-bottom-enter-from,
-.#{$namespace}-zoom-in-bottom-leave-active {
-  opacity: 0;
-  transform: scaleY(0);
-}
-
-.#{$namespace}-zoom-in-left-enter-active,
-.#{$namespace}-zoom-in-left-leave-active {
-  opacity: 1;
-  transform: scale(1, 1);
-  transition: $--md-fade-transition;
-  transform-origin: top left;
-}
-.#{$namespace}-zoom-in-left-enter-from,
-.#{$namespace}-zoom-in-left-leave-active {
-  opacity: 0;
-  transform: scale(.45, .45);
-}
-
-.collapse-transition {
-  transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
-}
-.horizontal-collapse-transition {
-  transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
-}
-
-.#{$namespace}-list-enter-active,
-.#{$namespace}-list-leave-active {
-  transition: all 1s;
-}
-.#{$namespace}-list-enter-from, .#{$namespace}-list-leave-active {
-  opacity: 0;
-  transform: translateY(-30px);
-}
-
-.#{$namespace}-opacity-transition {
-  transition: opacity .3s cubic-bezier(.55,0,.1,1);
-}
diff --git a/src/assets/css/themes/src/common/var.scss b/src/assets/css/themes/src/common/var.scss
deleted file mode 100644
index f1128959..00000000
--- a/src/assets/css/themes/src/common/var.scss
+++ /dev/null
@@ -1,1035 +0,0 @@
-$--theme: light !default;
-/* Element Chalk Variables */
-@import "../mixins/config";
-
-// Special comment for theme configurator
-// type|skipAutoTranslation|Category|Order
-// skipAutoTranslation 1
-
-/* Transition
--------------------------- */
-$--all-transition: all .3s cubic-bezier(.645, .045, .355, 1) !default;
-$--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
-$--fade-linear-transition: opacity 200ms linear !default;
-$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
-$--border-transition-base: border-color .2s cubic-bezier(.645, .045, .355, 1) !default;
-$--color-transition-base: color .2s cubic-bezier(.645, .045, .355, 1) !default;
-
-/* Color
--------------------------- */
-/// color|1|Brand Color|0
-$--color-primary: #409EFF !default;
-/// color|1|Background Color|4
-$--color-white: #FFFFFF !default;
-/// color|1|Background Color|4
-$--color-black: #000000 !default;
-$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
-$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
-$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
-$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
-$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
-$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
-$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
-$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
-$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
-/// color|1|Functional Color|1
-$--color-success: #67C23A !default;
-/// color|1|Functional Color|1
-$--color-warning: #E6A23C !default;
-/// color|1|Functional Color|1
-$--color-danger: #F56C6C !default;
-/// color|1|Functional Color|1
-$--color-info: #909399 !default;
-
-$--color-success-light: mix($--color-white, $--color-success, 80%) !default;
-$--color-warning-light: mix($--color-white, $--color-warning, 80%) !default;
-$--color-danger-light: mix($--color-white, $--color-danger, 80%) !default;
-$--color-info-light: mix($--color-white, $--color-info, 80%) !default;
-
-$--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;
-$--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
-$--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
-$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
-/// color|1|Font Color|2
-$--color-text-primary: #303133 !default;
-/// color|1|Font Color|2
-$--color-text-regular: #606266 !default;
-/// color|1|Font Color|2
-$--color-text-secondary: #909399 !default;
-/// color|1|Font Color|2
-$--color-text-placeholder: #C0C4CC !default;
-/// color|1|Border Color|3
-$--border-color-base: #DCDFE6 !default;
-/// color|1|Border Color|3
-$--border-color-light: #E4E7ED !default;
-/// color|1|Border Color|3
-$--border-color-lighter: #EBEEF5 !default;
-/// color|1|Border Color|3
-$--border-color-extra-light: #F2F6FC !default;
-
-// Variants
-
-$--heading-padding: 20px 0 !default;
-
-// Background
-/// color|1|Background Color|4
-$--background-color-base: #F5F7FA !default;
-
-/* Link
--------------------------- */
-$--link-color: $--color-primary-light-2 !default;
-$--link-hover-color: $--color-primary !default;
-
-/* Border
--------------------------- */
-$--border-width-base: 1px !default;
-$--border-style-base: solid !default;
-$--border-color-hover: $--color-text-placeholder !default;
-$--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
-/// borderRadius|1|Radius|0
-$--border-radius-base: 4px !default;
-/// borderRadius|1|Radius|0
-$--border-radius-small: 2px !default;
-/// borderRadius|1|Radius|0
-$--border-radius-circle: 100% !default;
-/// borderRadius|1|Radius|0
-$--border-radius-zero: 0 !default;
-
-// Box-shadow
-/// boxShadow|1|Shadow|1
-$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
-// boxShadow|1|Shadow|1
-$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
-/// boxShadow|1|Shadow|1
-$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
-/* Svg
---------------- */
-$--svg-monochrome-grey: #DCDDE0 !default;
-
-/* Fill
--------------------------- */
-$--fill-base: $--color-white !default;
-
-/* Typography
--------------------------- */
-$--font-path: 'fonts' !default;
-$--font-display: 'auto' !default;
-/// fontSize|1|Font Size|0
-$--font-size-extra-large: 20px !default;
-/// fontSize|1|Font Size|0
-$--font-size-large: 18px !default;
-/// fontSize|1|Font Size|0
-$--font-size-medium: 16px !default;
-/// fontSize|1|Font Size|0
-$--font-size-base: 14px !default;
-/// fontSize|1|Font Size|0
-$--font-size-small: 13px !default;
-/// fontSize|1|Font Size|0
-$--font-size-extra-small: 12px !default;
-/// fontWeight|1|Font Weight|1
-$--font-weight-primary: 500 !default;
-/// fontWeight|1|Font Weight|1
-$--font-weight-secondary: 100 !default;
-/// fontLineHeight|1|Line Height|2
-$--font-line-height-primary: 24px !default;
-/// fontLineHeight|1|Line Height|2
-$--font-line-height-secondary: 16px !default;
-$--font-color-disabled-base: #bbb !default;
-/* Size
--------------------------- */
-$--size-base: 14px !default;
-
-/* z-index
--------------------------- */
-$--index-normal: 1 !default;
-$--index-top: 1000 !default;
-$--index-popper: 2000 !default;
-
-/* Disable base
--------------------------- */
-$--disabled-fill-base: $--background-color-base !default;
-$--disabled-color-base: $--color-text-placeholder !default;
-$--disabled-border-base: $--border-color-light !default;
-
-/* Icon
--------------------------- */
-$--icon-color: #666 !default;
-$--icon-color-base: $--color-info !default;
-
-/* Checkbox
--------------------------- */
-/// fontSize||Font|1
-$--checkbox-font-size: 14px !default;
-/// fontWeight||Font|1
-$--checkbox-font-weight: $--font-weight-primary !default;
-/// color||Color|0
-$--checkbox-font-color: $--color-text-regular !default;
-$--checkbox-input-height: 14px !default;
-$--checkbox-input-width: 14px !default;
-/// borderRadius||Border|2
-$--checkbox-border-radius: $--border-radius-small !default;
-/// color||Color|0
-$--checkbox-background-color: $--color-white !default;
-$--checkbox-input-border: $--border-base !default;
-
-/// color||Color|0
-$--checkbox-disabled-border-color: $--border-color-base !default;
-$--checkbox-disabled-input-fill: #edf2fc !default;
-$--checkbox-disabled-icon-color: $--color-text-placeholder !default;
-
-$--checkbox-disabled-checked-input-fill: $--border-color-extra-light !default;
-$--checkbox-disabled-checked-input-border-color: $--border-color-base !default;
-$--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default;
-
-/// color||Color|0
-$--checkbox-checked-font-color: $--color-primary !default;
-$--checkbox-checked-input-border-color: $--color-primary !default;
-/// color||Color|0
-$--checkbox-checked-background-color: $--color-primary !default;
-$--checkbox-checked-icon-color: $--fill-base !default;
-
-$--checkbox-input-border-color-hover: $--color-primary !default;
-/// height||Other|4
-$--checkbox-bordered-height: 40px !default;
-/// padding||Spacing|3
-$--checkbox-bordered-padding: 9px 20px 9px 10px !default;
-/// padding||Spacing|3
-$--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default;
-/// padding||Spacing|3
-$--checkbox-bordered-small-padding: 5px 15px 5px 10px !default;
-/// padding||Spacing|3
-$--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default;
-$--checkbox-bordered-medium-input-height: 14px !default;
-$--checkbox-bordered-medium-input-width: 14px !default;
-/// height||Other|4
-$--checkbox-bordered-medium-height: 36px !default;
-$--checkbox-bordered-small-input-height: 12px !default;
-$--checkbox-bordered-small-input-width: 12px !default;
-/// height||Other|4
-$--checkbox-bordered-small-height: 32px !default;
-$--checkbox-bordered-mini-input-height: 12px !default;
-$--checkbox-bordered-mini-input-width: 12px !default;
-/// height||Other|4
-$--checkbox-bordered-mini-height: 28px !default;
-
-/// color||Color|0
-$--checkbox-button-checked-background-color: $--color-primary !default;
-/// color||Color|0
-$--checkbox-button-checked-font-color: $--color-white !default;
-/// color||Color|0
-$--checkbox-button-checked-border-color: $--color-primary !default;
-
-
-/* Radio
--------------------------- */
-/// fontSize||Font|1
-$--radio-font-size: $--font-size-base !default;
-/// fontWeight||Font|1
-$--radio-font-weight: $--font-weight-primary !default;
-/// color||Color|0
-$--radio-font-color: $--color-text-regular !default;
-$--radio-input-height: 14px !default;
-$--radio-input-width: 14px !default;
-/// borderRadius||Border|2
-$--radio-input-border-radius: $--border-radius-circle !default;
-/// color||Color|0
-$--radio-input-background-color: $--color-white !default;
-$--radio-input-border: $--border-base !default;
-/// color||Color|0
-$--radio-input-border-color: $--border-color-base !default;
-/// color||Color|0
-$--radio-icon-color: $--color-white !default;
-
-$--radio-disabled-input-border-color: $--disabled-border-base !default;
-$--radio-disabled-input-fill: $--disabled-fill-base !default;
-$--radio-disabled-icon-color: $--disabled-fill-base !default;
-
-$--radio-disabled-checked-input-border-color: $--disabled-border-base !default;
-$--radio-disabled-checked-input-fill: $--disabled-fill-base !default;
-$--radio-disabled-checked-icon-color: $--color-text-placeholder !default;
-
-/// color||Color|0
-$--radio-checked-font-color: $--color-primary !default;
-/// color||Color|0
-$--radio-checked-input-border-color: $--color-primary !default;
-/// color||Color|0
-$--radio-checked-input-background-color: $--color-white !default;
-/// color||Color|0
-$--radio-checked-icon-color: $--color-primary !default;
-
-$--radio-input-border-color-hover: $--color-primary !default;
-
-$--radio-bordered-height: 40px !default;
-$--radio-bordered-padding: 12px 20px 0 10px !default;
-$--radio-bordered-medium-padding: 10px 20px 0 10px !default;
-$--radio-bordered-small-padding: 8px 15px 0 10px !default;
-$--radio-bordered-mini-padding: 6px 15px 0 10px !default;
-$--radio-bordered-medium-input-height: 14px !default;
-$--radio-bordered-medium-input-width: 14px !default;
-$--radio-bordered-medium-height: 36px !default;
-$--radio-bordered-small-input-height: 12px !default;
-$--radio-bordered-small-input-width: 12px !default;
-$--radio-bordered-small-height: 32px !default;
-$--radio-bordered-mini-input-height: 12px !default;
-$--radio-bordered-mini-input-width: 12px !default;
-$--radio-bordered-mini-height: 28px !default;
-
-/// fontSize||Font|1
-$--radio-button-font-size: $--font-size-base !default;
-/// color||Color|0
-$--radio-button-checked-background-color: $--color-primary !default;
-/// color||Color|0
-$--radio-button-checked-font-color: $--color-white !default;
-/// color||Color|0
-$--radio-button-checked-border-color: $--color-primary !default;
-$--radio-button-disabled-checked-fill: $--border-color-extra-light !default;
-
-/* Select
--------------------------- */
-$--select-border-color-hover: $--border-color-hover !default;
-$--select-disabled-border: $--disabled-border-base !default;
-/// fontSize||Font|1
-$--select-font-size: $--font-size-base !default;
-$--select-close-hover-color: $--color-text-secondary !default;
-
-$--select-input-color: $--color-text-placeholder !default;
-$--select-multiple-input-color: #666 !default;
-/// color||Color|0
-$--select-input-focus-border-color: $--color-primary !default;
-/// fontSize||Font|1
-$--select-input-font-size: 14px !default;
-
-$--select-option-color: $--color-text-regular !default;
-$--select-option-disabled-color: $--color-text-placeholder !default;
-$--select-option-disabled-background: $--color-white !default;
-/// height||Other|4
-$--select-option-height: 34px !default;
-$--select-option-hover-background: $--background-color-base !default;
-/// color||Color|0
-$--select-option-selected-font-color: $--color-primary !default;
-$--select-option-selected-hover: $--background-color-base !default;
-
-$--select-group-color: $--color-info !default;
-$--select-group-height: 30px !default;
-$--select-group-font-size: 12px !default;
-
-$--select-dropdown-background: $--color-white !default;
-$--select-dropdown-shadow: $--box-shadow-light !default;
-$--select-dropdown-empty-color: #999 !default;
-/// height||Other|4
-$--select-dropdown-max-height: 274px !default;
-$--select-dropdown-padding: 6px 0 !default;
-$--select-dropdown-empty-padding: 10px 0 !default;
-$--select-dropdown-border: solid 1px $--border-color-light !default;
-
-/* Alert
--------------------------- */
-$--alert-padding: 8px 16px !default;
-/// borderRadius||Border|2
-$--alert-border-radius: $--border-radius-base !default;
-/// fontSize||Font|1
-$--alert-title-font-size: 13px !default;
-/// fontSize||Font|1
-$--alert-description-font-size: 12px !default;
-/// fontSize||Font|1
-$--alert-close-font-size: 12px !default;
-/// fontSize||Font|1
-$--alert-close-customed-font-size: 13px !default;
-
-$--alert-success-color: $--color-success-lighter !default;
-$--alert-info-color: $--color-info-lighter !default;
-$--alert-warning-color: $--color-warning-lighter !default;
-$--alert-danger-color: $--color-danger-lighter !default;
-
-/// height||Other|4
-$--alert-icon-size: 16px !default;
-/// height||Other|4
-$--alert-icon-large-size: 28px !default;
-
-/* MessageBox
--------------------------- */
-/// color||Color|0
-$--messagebox-title-color: $--color-text-primary !default;
-$--msgbox-width: 420px !default;
-$--msgbox-border-radius: 4px !default;
-/// fontSize||Font|1
-$--messagebox-font-size: $--font-size-large !default;
-/// fontSize||Font|1
-$--messagebox-content-font-size: $--font-size-base !default;
-/// color||Color|0
-$--messagebox-content-color: $--color-text-regular !default;
-/// fontSize||Font|1
-$--messagebox-error-font-size: 12px !default;
-$--msgbox-padding-primary: 15px !default;
-/// color||Color|0
-$--messagebox-success-color: $--color-success !default;
-/// color||Color|0
-$--messagebox-info-color: $--color-info !default;
-/// color||Color|0
-$--messagebox-warning-color: $--color-warning !default;
-/// color||Color|0
-$--messagebox-danger-color: $--color-danger !default;
-
-/* Message
--------------------------- */
-$--message-shadow: $--box-shadow-base !default;
-$--message-min-width: 380px !default;
-$--message-background-color: #edf2fc !default;
-$--message-padding: 15px 15px 15px 20px !default;
-/// color||Color|0
-$--message-close-icon-color: $--color-text-placeholder !default;
-/// height||Other|4
-$--message-close-size: 16px !default;
-/// color||Color|0
-$--message-close-hover-color: $--color-text-secondary !default;
-
-/// color||Color|0
-$--message-success-font-color: $--color-success !default;
-/// color||Color|0
-$--message-info-font-color: $--color-info !default;
-/// color||Color|0
-$--message-warning-font-color: $--color-warning !default;
-/// color||Color|0
-$--message-danger-font-color: $--color-danger !default;
-
-/* Notification
--------------------------- */
-$--notification-width: 330px !default;
-/// padding||Spacing|3
-$--notification-padding: 14px 26px 14px 13px !default;
-$--notification-radius: 8px !default;
-$--notification-shadow: $--box-shadow-light !default;
-/// color||Color|0
-$--notification-border-color: $--border-color-lighter !default;
-$--notification-icon-size: 24px !default;
-$--notification-close-font-size: $--message-close-size !default;
-$--notification-group-margin-left: 13px !default;
-$--notification-group-margin-right: 8px !default;
-/// fontSize||Font|1
-$--notification-content-font-size: $--font-size-base !default;
-/// color||Color|0
-$--notification-content-color: $--color-text-regular !default;
-/// fontSize||Font|1
-$--notification-title-font-size: 16px !default;
-/// color||Color|0
-$--notification-title-color: $--color-text-primary !default;
-
-/// color||Color|0
-$--notification-close-color: $--color-text-secondary !default;
-/// color||Color|0
-$--notification-close-hover-color: $--color-text-regular !default;
-
-/// color||Color|0
-$--notification-success-icon-color: $--color-success !default;
-/// color||Color|0
-$--notification-info-icon-color: $--color-info !default;
-/// color||Color|0
-$--notification-warning-icon-color: $--color-warning !default;
-/// color||Color|0
-$--notification-danger-icon-color: $--color-danger !default;
-
-/* Input
--------------------------- */
-/// color||Color|0
-$--input-font-color: $--color-text-regular !default;
-/// width||Other|4
-$--input-width: 140px !default;
-
-$--input-border: $--border-base !default;
-$--input-border-color: $--border-color-base !default;
-/// borderRadius||Border|2
-$--input-border-radius: $--border-radius-base !default;
-$--input-border-color-hover: $--border-color-hover !default;
-/// color||Color|0
-$--input-background-color: $--color-white !default;
-$--input-fill-disabled: $--disabled-fill-base !default;
-$--input-color-disabled: $--font-color-disabled-base !default;
-/// color||Color|0
-$--input-icon-color: $--color-text-placeholder !default;
-/// color||Color|0
-$--input-placeholder-color: $--color-text-placeholder !default;
-$--input-max-width: 314px !default;
-
-$--input-hover-border: $--border-color-hover !default;
-$--input-clear-hover-color: $--color-text-secondary !default;
-
-$--input-focus-border: $--color-primary !default;
-$--input-focus-fill: $--color-white !default;
-
-$--input-disabled-fill: $--disabled-fill-base !default;
-$--input-disabled-border: $--disabled-border-base !default;
-$--input-disabled-color: $--disabled-color-base !default;
-$--input-disabled-placeholder-color: $--color-text-placeholder !default;
-
-/// fontSize||Font|1
-$--input-font-size: $--font-size-base !default;
-/// height||Other|4
-$--input-height: 40px !default;
-/// fontSize||Font|1
-$--input-medium-font-size: 14px !default;
-/// height||Other|4
-$--input-medium-height: 36px !default;
-/// fontSize||Font|1
-$--input-small-font-size: 13px !default;
-/// height||Other|4
-$--input-small-height: 32px !default;
-/// fontSize||Font|1
-$--input-mini-font-size: 12px !default;
-/// height||Other|4
-$--input-mini-height: 28px !default;
-
-/* Cascader
--------------------------- */
-/// color||Color|0
-$--cascader-menu-font-color: $--color-text-regular !default;
-/// color||Color|0
-$--cascader-menu-selected-font-color: $--color-primary !default;
-$--cascader-menu-fill: $--fill-base !default;
-$--cascader-menu-font-size: $--font-size-base !default;
-$--cascader-menu-radius: $--border-radius-base !default;
-$--cascader-menu-border: solid 1px $--border-color-light !default;
-$--cascader-menu-shadow: $--box-shadow-light !default;
-$--cascader-node-background-hover: $--background-color-base !default;
-$--cascader-node-color-disabled: $--color-text-placeholder !default;
-$--cascader-color-empty: $--color-text-placeholder !default;
-$--cascader-tag-background: #f0f2f5 !default;
-
-/* Group
--------------------------- */
-$--group-option-flex: 0 0 (1/5) * 100% !default;
-$--group-option-offset-bottom: 12px !default;
-$--group-option-fill-hover: rgba($--color-black, 0.06) !default;
-$--group-title-color: $--color-black !default;
-$--group-title-font-size: $--font-size-base !default;
-$--group-title-width: 66px !default;
-
-/* Tab
--------------------------- */
-$--tab-font-size: $--font-size-base !default;
-$--tab-border-line: 1px solid #e4e4e4 !default;
-$--tab-header-color-active: $--color-text-secondary !default;
-$--tab-header-color-hover: $--color-text-regular !default;
-$--tab-header-color: $--color-text-regular !default;
-$--tab-header-fill-active: rgba($--color-black, 0.06) !default;
-$--tab-header-fill-hover: rgba($--color-black, 0.06) !default;
-$--tab-vertical-header-width: 90px !default;
-$--tab-vertical-header-count-color: $--color-white !default;
-$--tab-vertical-header-count-fill: $--color-text-secondary !default;
-
-/* Button
--------------------------- */
-/// fontSize||Font|1
-$--button-font-size: $--font-size-base !default;
-/// fontWeight||Font|1
-$--button-font-weight: $--font-weight-primary !default;
-/// borderRadius||Border|2
-$--button-border-radius: $--border-radius-base !default;
-/// padding||Spacing|3
-$--button-padding-vertical: 12px !default;
-/// padding||Spacing|3
-$--button-padding-horizontal: 20px !default;
-
-/// fontSize||Font|1
-$--button-medium-font-size: $--font-size-base !default;
-/// borderRadius||Border|2
-$--button-medium-border-radius: $--border-radius-base !default;
-/// padding||Spacing|3
-$--button-medium-padding-vertical: 10px !default;
-/// padding||Spacing|3
-$--button-medium-padding-horizontal: 20px !default;
-
-/// fontSize||Font|1
-$--button-small-font-size: 12px !default;
-$--button-small-border-radius: #{$--border-radius-base - 1} !default;
-/// padding||Spacing|3
-$--button-small-padding-vertical: 9px !default;
-/// padding||Spacing|3
-$--button-small-padding-horizontal: 15px !default;
-/// fontSize||Font|1
-$--button-mini-font-size: 12px !default;
-$--button-mini-border-radius: #{$--border-radius-base - 1} !default;
-/// padding||Spacing|3
-$--button-mini-padding-vertical: 7px !default;
-/// padding||Spacing|3
-$--button-mini-padding-horizontal: 15px !default;
-
-/// color||Color|0
-$--button-default-font-color: $--color-text-regular !default;
-/// color||Color|0
-$--button-default-background-color: $--color-white !default;
-/// color||Color|0
-$--button-default-border-color: $--border-color-base !default;
-
-/// color||Color|0
-$--button-disabled-font-color: $--color-text-placeholder !default;
-/// color||Color|0
-$--button-disabled-background-color: $--color-white !default;
-/// color||Color|0
-$--button-disabled-border-color: $--border-color-lighter !default;
-
-/// color||Color|0
-$--button-primary-border-color: $--color-primary !default;
-/// color||Color|0
-$--button-primary-font-color: $--color-white !default;
-/// color||Color|0
-$--button-primary-background-color: $--color-primary !default;
-/// color||Color|0
-$--button-success-border-color: $--color-success !default;
-/// color||Color|0
-$--button-success-font-color: $--color-white !default;
-/// color||Color|0
-$--button-success-background-color: $--color-success !default;
-/// color||Color|0
-$--button-warning-border-color: $--color-warning !default;
-/// color||Color|0
-$--button-warning-font-color: $--color-white !default;
-/// color||Color|0
-$--button-warning-background-color: $--color-warning !default;
-/// color||Color|0
-$--button-danger-border-color: $--color-danger !default;
-/// color||Color|0
-$--button-danger-font-color: $--color-white !default;
-/// color||Color|0
-$--button-danger-background-color: $--color-danger !default;
-/// color||Color|0
-$--button-info-border-color: $--color-info !default;
-/// color||Color|0
-$--button-info-font-color: $--color-white !default;
-/// color||Color|0
-$--button-info-background-color: $--color-info !default;
-
-$--button-hover-tint-percent: 20% !default;
-$--button-active-shade-percent: 10% !default;
-
-
-/* cascader
--------------------------- */
-$--cascader-height: 200px !default;
-
-/* Switch
--------------------------- */
-/// color||Color|0
-$--switch-on-color: $--color-primary !default;
-/// color||Color|0
-$--switch-off-color: $--border-color-base !default;
-/// fontSize||Font|1
-$--switch-font-size: $--font-size-base !default;
-$--switch-core-border-radius: 10px !default;
-// height||Other|4 TODO: width 代码写死的40px 所以下面这三个属性都没意义
-$--switch-width: 40px !default;
-// height||Other|4
-$--switch-height: 20px !default;
-// height||Other|4
-$--switch-button-size: 16px !default;
-
-/* Dialog
--------------------------- */
-$--dialog-background-color: $--color-white !default;
-$--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default;
-/// fontSize||Font|1
-$--dialog-title-font-size: $--font-size-large !default;
-/// fontSize||Font|1
-$--dialog-content-font-size: 14px !default;
-/// fontLineHeight||LineHeight|2
-$--dialog-font-line-height: $--font-line-height-primary !default;
-/// padding||Spacing|3
-$--dialog-padding-primary: 20px !default;
-
-/* Table
--------------------------- */
-/// color||Color|0
-$--table-border-color: $--border-color-lighter !default;
-$--table-border: 1px solid $--table-border-color !default;
-/// color||Color|0
-$--table-font-color: $--color-text-regular !default;
-/// color||Color|0
-$--table-header-font-color: $--color-text-secondary !default;
-/// color||Color|0
-$--table-row-hover-background-color: $--background-color-base !default;
-$--table-current-row-background-color: $--color-primary-light-9 !default;
-/// color||Color|0
-$--table-header-background-color: $--color-white !default;
-$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;
-
-/* Pagination
--------------------------- */
-/// fontSize||Font|1
-$--pagination-font-size: 13px !default;
-/// color||Color|0
-$--pagination-background-color: $--color-white !default;
-/// color||Color|0
-$--pagination-font-color: $--color-text-primary !default;
-$--pagination-border-radius: 3px !default;
-/// color||Color|0
-$--pagination-button-color: $--color-text-primary !default;
-/// height||Other|4
-$--pagination-button-width: 35.5px !default;
-/// height||Other|4
-$--pagination-button-height: 28px !default;
-/// color||Color|0
-$--pagination-button-disabled-color: $--color-text-placeholder !default;
-/// color||Color|0
-$--pagination-button-disabled-background-color: $--color-white !default;
-/// color||Color|0
-$--pagination-hover-color: $--color-primary !default;
-
-/* Popup
--------------------------- */
-/// color||Color|0
-$--popup-modal-background-color: $--color-black !default;
-/// opacity||Other|1
-$--popup-modal-opacity: 0.5 !default;
-
-/* Popover
--------------------------- */
-/// color||Color|0
-$--popover-background-color: $--color-white !default;
-/// fontSize||Font|1
-$--popover-font-size: $--font-size-base !default;
-/// color||Color|0
-$--popover-border-color: $--border-color-lighter !default;
-$--popover-arrow-size: 6px !default;
-/// padding||Spacing|3
-$--popover-padding: 12px !default;
-$--popover-padding-large: 18px 20px !default;
-/// fontSize||Font|1
-$--popover-title-font-size: 16px !default;
-/// color||Color|0
-$--popover-title-font-color: $--color-text-primary !default;
-
-/* Tooltip
--------------------------- */
-/// color|1|Color|0
-$--tooltip-fill: $--color-text-primary !default;
-/// color|1|Color|0
-$--tooltip-color: $--color-white !default;
-/// fontSize||Font|1
-$--tooltip-font-size: 12px !default;
-/// color||Color|0
-$--tooltip-border-color: $--color-text-primary !default;
-$--tooltip-arrow-size: 6px !default;
-/// padding||Spacing|3
-$--tooltip-padding: 10px !default;
-
-/* Tag
--------------------------- */
-/// color||Color|0
-$--tag-info-color: $--color-info !default;
-/// color||Color|0
-$--tag-primary-color: $--color-primary !default;
-/// color||Color|0
-$--tag-success-color: $--color-success !default;
-/// color||Color|0
-$--tag-warning-color: $--color-warning !default;
-/// color||Color|0
-$--tag-danger-color: $--color-danger !default;
-/// fontSize||Font|1
-$--tag-font-size: 12px !default;
-$--tag-border-radius: 4px !default;
-$--tag-padding: 0 10px !default;
-
-/* Tree
--------------------------- */
-/// color||Color|0
-$--tree-node-hover-background-color: $--background-color-base !default;
-/// color||Color|0
-$--tree-font-color: $--color-text-regular !default;
-/// color||Color|0
-$--tree-expand-icon-color: $--color-text-placeholder !default;
-
-/* Dropdown
--------------------------- */
-$--dropdown-menu-box-shadow: $--box-shadow-light !default;
-$--dropdown-menuItem-hover-fill: $--color-primary-light-9 !default;
-$--dropdown-menuItem-hover-color: $--link-color !default;
-$--dropdown-menu-index: 10 !default;
-
-/* Badge
--------------------------- */
-/// color||Color|0
-$--badge-background-color: $--color-danger !default;
-$--badge-radius: 10px !default;
-/// fontSize||Font|1
-$--badge-font-size: 12px !default;
-/// padding||Spacing|3
-$--badge-padding: 6px !default;
-/// height||Other|4
-$--badge-size: 18px !default;
-
-/* Card
---------------------------*/
-/// color||Color|0
-$--card-border-color: $--border-color-lighter !default;
-$--card-border-radius: 4px !default;
-/// padding||Spacing|3
-$--card-padding: 20px !default;
-
-/* Slider
---------------------------*/
-/// color||Color|0
-$--slider-main-background-color: $--color-primary !default;
-/// color||Color|0
-$--slider-runway-background-color: $--border-color-light !default;
-$--slider-button-hover-color: mix($--color-primary, black, 97%) !default;
-$--slider-stop-background-color: $--color-white !default;
-$--slider-disable-color: $--color-text-placeholder !default;
-$--slider-margin: 16px 0 !default;
-$--slider-border-radius: 3px !default;
-/// height|1|Other|4
-$--slider-height: 6px !default;
-/// height||Other|4
-$--slider-button-size: 20px !default;
-$--slider-button-wrapper-size: 36px !default;
-$--slider-button-wrapper-offset: -15px !default;
-
-/* Steps
---------------------------*/
-$--steps-border-color: $--disabled-border-base !default;
-$--steps-border-radius: 4px !default;
-$--steps-padding: 20px !default;
-
-/* Menu
---------------------------*/
-/// fontSize||Font|1
-$--menu-item-font-size: $--font-size-base !default;
-/// color||Color|0
-$--menu-item-font-color: $--color-text-primary !default;
-/// color||Color|0
-$--menu-background-color: $--color-white !default;
-$--menu-item-hover-fill: $--color-primary-light-9 !default;
-
-/* Rate
---------------------------*/
-$--rate-height: 20px !default;
-/// fontSize||Font|1
-$--rate-font-size: $--font-size-base !default;
-/// height||Other|3
-$--rate-icon-size: 18px !default;
-/// margin||Spacing|2
-$--rate-icon-margin: 6px !default;
-$--rate-icon-color: $--color-text-placeholder !default;
-
-/* DatePicker
---------------------------*/
-$--datepicker-font-color: $--color-text-regular !default;
-/// color|1|Color|0
-$--datepicker-off-font-color: $--color-text-placeholder !default;
-/// color||Color|0
-$--datepicker-header-font-color: $--color-text-regular !default;
-$--datepicker-icon-color: $--color-text-primary !default;
-$--datepicker-border-color: $--disabled-border-base !default;
-$--datepicker-inner-border-color: #e4e4e4 !default;
-/// color||Color|0
-$--datepicker-inrange-background-color: $--border-color-extra-light !default;
-/// color||Color|0
-$--datepicker-inrange-hover-background-color: $--border-color-extra-light !default;
-/// color||Color|0
-$--datepicker-active-color: $--color-primary !default;
-/// color||Color|0
-$--datepicker-hover-font-color: $--color-primary !default;
-$--datepicker-cell-hover-color: #fff !default;
-
-/* Loading
---------------------------*/
-/// height||Other|4
-$--loading-spinner-size: 42px !default;
-/// height||Other|4
-$--loading-fullscreen-spinner-size: 50px !default;
-
-/* Scrollbar
---------------------------*/
-$--scrollbar-background-color: rgba($--color-text-secondary, .3) !default;
-$--scrollbar-hover-background-color: rgba($--color-text-secondary, .5) !default;
-
-/* Carousel
---------------------------*/
-/// fontSize||Font|1
-$--carousel-arrow-font-size: 12px !default;
-$--carousel-arrow-size: 36px !default;
-$--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default;
-$--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default;
-/// width||Other|4
-$--carousel-indicator-width: 30px !default;
-/// height||Other|4
-$--carousel-indicator-height: 2px !default;
-$--carousel-indicator-padding-horizontal: 4px !default;
-$--carousel-indicator-padding-vertical: 12px !default;
-$--carousel-indicator-out-color: $--border-color-hover !default;
-
-/* Collapse
---------------------------*/
-/// color||Color|0
-$--collapse-border-color: $--border-color-lighter !default;
-/// height||Other|4
-$--collapse-header-height: 48px !default;
-/// color||Color|0
-$--collapse-header-background-color: $--color-white !default;
-/// color||Color|0
-$--collapse-header-font-color: $--color-text-primary !default;
-/// fontSize||Font|1
-$--collapse-header-font-size: 13px !default;
-/// color||Color|0
-$--collapse-content-background-color: $--color-white !default;
-/// fontSize||Font|1
-$--collapse-content-font-size: 13px !default;
-/// color||Color|0
-$--collapse-content-font-color: $--color-text-primary !default;
-
-/* Transfer
---------------------------*/
-$--transfer-border-color: $--border-color-lighter !default;
-$--transfer-border-radius: $--border-radius-base !default;
-/// height||Other|4
-$--transfer-panel-width: 200px !default;
-/// height||Other|4
-$--transfer-panel-header-height: 40px !default;
-/// color||Color|0
-$--transfer-panel-header-background-color: $--background-color-base !default;
-/// height||Other|4
-$--transfer-panel-footer-height: 40px !default;
-/// height||Other|4
-$--transfer-panel-body-height: 246px !default;
-/// height||Other|4
-$--transfer-item-height: 30px !default;
-/// height||Other|4
-$--transfer-filter-height: 32px !default;
-
-/* Header
-  --------------------------*/
-$--header-padding: 0 20px !default;
-
-/* Footer
---------------------------*/
-$--footer-padding: 0 20px !default;
-
-/* Main
---------------------------*/
-$--main-padding: 20px !default;
-
-/* Timeline
---------------------------*/
-$--timeline-node-size-normal: 12px !default;
-$--timeline-node-size-large: 14px !default;
-$--timeline-node-color: $--border-color-light !default;
-
-/* Backtop
---------------------------*/
-/// color||Color|0
-$--backtop-background-color: $--color-white !default;
-/// color||Color|0
-$--backtop-font-color: $--color-primary !default;
-/// color||Color|0
-$--backtop-hover-background-color: $--border-color-extra-light !default;
-
-/* Link
---------------------------*/
-/// fontSize||Font|1
-$--link-font-size: $--font-size-base !default;
-/// fontWeight||Font|1
-$--link-font-weight: $--font-weight-primary !default;
-/// color||Color|0
-$--link-default-font-color: $--color-text-regular !default;
-/// color||Color|0
-$--link-default-active-color: $--color-primary !default;
-/// color||Color|0
-$--link-disabled-font-color: $--color-text-placeholder !default;
-/// color||Color|0
-$--link-primary-font-color: $--color-primary !default;
-/// color||Color|0
-$--link-success-font-color: $--color-success !default;
-/// color||Color|0
-$--link-warning-font-color: $--color-warning !default;
-/// color||Color|0
-$--link-danger-font-color: $--color-danger !default;
-/// color||Color|0
-$--link-info-font-color: $--color-info !default;
-/* Calendar
---------------------------*/
-/// border||Other|4
-$--calendar-border: $--table-border !default;
-/// color||Other|4
-$--calendar-selected-background-color: #F2F8FE !default;
-$--calendar-cell-width: 85px !default;
-
-/* Form
--------------------------- */
-/// fontSize||Font|1
-$--form-label-font-size: $--font-size-base !default;
-
-/* Avatar
---------------------------*/
-/// color||Color|0
-$--avatar-font-color: #fff !default;
-/// color||Color|0
-$--avatar-background-color: #C0C4CC !default;
-/// fontSize||Font Size|1
-$--avatar-text-font-size: 14px !default;
-/// fontSize||Font Size|1
-$--avatar-icon-font-size: 18px !default;
-/// borderRadius||Border|2
-$--avatar-border-radius: $--border-radius-base !default;
-/// size|1|Avatar Size|3
-$--avatar-large-size: 40px !default;
-/// size|1|Avatar Size|3
-$--avatar-medium-size: 36px !default;
-/// size|1|Avatar Size|3
-$--avatar-small-size: 28px !default;
-
-$--skeleton-color: #f2f2f2 !default;
-$--skeleton-to-color: #e6e6e6 !default;
-
-/* Empty
--------------------------- */
-$--empty-padding: 40px 0 !default;
-$--empty-image-width: 160px !default;
-$--empty-description-margin-top: 20px !default;
-$--empty-bottom-margin-top: 20px !default;
-
-/* Descriptions
--------------------------- */
-$--descriptions-header-margin-bottom: 20px !default;
-$--descriptions-title-font-size: 16px !default;
-$--descriptions-table-border: 1px solid $--border-color-lighter !default;
-$--descriptions-item-bordered-label-background: #fafafa !default;
-
-/* Result
--------------------------- */
-$--result-padding: 40px 30px !default;
-$--result-icon-font-size: 64px !default;
-$--result-title-font-size: 20px !default;
-$--result-title-margin-top: 20px !default;
-$--result-subtitle-margin-top: 10px !default;
-$--result-extra-margin-top: 30px !default;
-$--result-info-color: $--color-info !default;
-$--result-success-color: $--color-success !default;
-$--result-warning-color: $--color-warning !default;
-$--result-danger-color: $--color-danger !default;
-
-/* Break-point
---------------------------*/
-$--sm: 768px !default;
-$--md: 992px !default;
-$--lg: 1200px !default;
-$--xl: 1920px !default;
-
-$--breakpoints: (
-  'xs' : "(max-width: #{$--sm})",
-  'sm' : "(min-width: #{$--sm})",
-  'md' : "(min-width: #{$--md})",
-  'lg' : "(min-width: #{$--lg})",
-  'xl' : "(min-width: #{$--xl})"
-) !default;
-
-$--breakpoints-spec: (
-  'xs-only' : "(max-width: #{$--sm})",
-  'sm-and-up' : "(min-width: #{$--sm})",
-  'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md})",
-  'sm-and-down': "(max-width: #{$--md})",
-  'md-and-up' : "(min-width: #{$--md})",
-  'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg})",
-  'md-and-down': "(max-width: #{$--lg})",
-  'lg-and-up' : "(min-width: #{$--lg})",
-  'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl})",
-  'lg-and-down': "(max-width: #{$--xl})",
-  'xl-only' : "(min-width: #{$--xl})",
-) !default;
diff --git a/src/assets/css/themes/src/container.scss b/src/assets/css/themes/src/container.scss
deleted file mode 100644
index df7b2aff..00000000
--- a/src/assets/css/themes/src/container.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import "mixins/mixins";
-
-@include b(container) {
-  display: flex;
-  flex-direction: row;
-  flex: 1;
-  flex-basis: auto;
-  box-sizing: border-box;
-  min-width: 0;
-
-  @include when(vertical) {
-    flex-direction: column;
-  }
-}
diff --git a/src/assets/css/themes/src/date-picker.scss b/src/assets/css/themes/src/date-picker.scss
deleted file mode 100644
index 516f0561..00000000
--- a/src/assets/css/themes/src/date-picker.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@import "./date-picker/date-table.scss";
-@import "./date-picker/month-table.scss";
-@import "./date-picker/year-table.scss";
-@import "./date-picker/time-spinner.scss";
-@import "./date-picker/picker.scss";
-@import "./date-picker/date-picker.scss";
-@import "./date-picker/date-range-picker.scss";
-@import "./date-picker/time-range-picker.scss";
-@import "./date-picker/time-picker.scss";
-@import "./input.scss";
-@import "./scrollbar.scss";
-@import "./popper";
\ No newline at end of file
diff --git a/src/assets/css/themes/src/date-picker/date-picker.scss b/src/assets/css/themes/src/date-picker/date-picker.scss
deleted file mode 100644
index fe161662..00000000
--- a/src/assets/css/themes/src/date-picker/date-picker.scss
+++ /dev/null
@@ -1,101 +0,0 @@
-@import "../common/var";
-@import "../mixins/mixins";
-@import "./picker-panel.scss";
-
-@include b(date-picker) {
-  width: 322px;
-
-  &.has-sidebar.has-time {
-    width: 434px;
-  }
-
-  &.has-sidebar {
-    width: 438px;
-  }
-
-  &.has-time .#{$namespace}-picker-panel__body-wrapper {
-    position: relative;
-  }
-
-  .#{$namespace}-picker-panel__content {
-    width: 292px;
-  }
-
-  table {
-    table-layout: fixed;
-    width: 100%;
-  }
-
-  @include e(editor-wrap) {
-    position: relative;
-    display: table-cell;
-    padding: 0 5px;
-  }
-
-  @include e(time-header) {
-    position: relative;
-    border-bottom: 1px solid $--datepicker-inner-border-color;
-    font-size: 12px;
-    padding: 8px 5px 5px 5px;
-    display: table;
-    width: 100%;
-    box-sizing: border-box;
-  }
-
-  @include e(header) {
-    margin: 12px;
-    text-align: center;
-
-    @include m(bordered) {
-      margin-bottom: 0;
-      padding-bottom: 12px;
-      border-bottom: solid 1px $--border-color-lighter;
-
-      & + .#{$namespace}-picker-panel__content {
-        margin-top: 0;
-      }
-    }
-  }
-
-  @include e(header-label) {
-    font-size: 16px;
-    font-weight: 500;
-    padding: 0 5px;
-    line-height: 22px;
-    text-align: center;
-    cursor: pointer;
-    color: $--color-text-regular;
-
-    &:hover {
-      color: $--datepicker-hover-font-color;
-    }
-
-    &.active {
-      color: $--datepicker-active-color;
-    }
-  }
-
-  @include e(prev-btn) {
-    float: left;
-  }
-
-  @include e(next-btn) {
-    float: right;
-  }
-
-  @include e(time-wrap) {
-    padding: 10px;
-    text-align: center;
-  }
-
-  @include e(time-label) {
-    float: left;
-    cursor: pointer;
-    line-height: 30px;
-    margin-left: 10px;
-  }
-
-  .#{$namespace}-time-panel {
-    position: absolute;
-  }
-}
diff --git a/src/assets/css/themes/src/date-picker/date-range-picker.scss b/src/assets/css/themes/src/date-picker/date-range-picker.scss
deleted file mode 100644
index 20292b2b..00000000
--- a/src/assets/css/themes/src/date-picker/date-range-picker.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-@import "../common/var";
-
-@include b(date-range-picker) {
-  width: 646px;
-
-  &.has-sidebar {
-    width: 756px;
-  }
-
-  table {
-    table-layout: fixed;
-    width: 100%;
-  }
-
-  .#{$namespace}-picker-panel__body {
-    min-width: 513px;
-  }
-
-  .#{$namespace}-picker-panel__content {
-    margin: 0;
-  }
-
-  @include e(header) {
-    position: relative;
-    text-align: center;
-    height: 28px;
-
-    [class*=arrow-left] {
-      float: left;
-    }
-
-    [class*=arrow-right] {
-      float: right;
-    }
-
-    div {
-      font-size: 16px;
-      font-weight: 500;
-      margin-right: 50px;
-    }
-  }
-
-  @include e(content) {
-    float: left;
-    width: 50%;
-    box-sizing: border-box;
-    margin: 0;
-    padding: 16px;
-
-    @include when(left) {
-      border-right: 1px solid $--datepicker-inner-border-color;
-    }
-    .#{$namespace}-date-range-picker__header {
-
-      div {
-        margin-left: 50px;
-        margin-right: 50px;
-      }
-    }
-  }
-
-  @include e(editors-wrap) {
-    box-sizing: border-box;
-    display: table-cell;
-
-    @include when(right) {
-      text-align: right;
-    }
-  }
-
-  @include e(time-header) {
-    position: relative;
-    border-bottom: 1px solid $--datepicker-inner-border-color;
-    font-size: 12px;
-    padding: 8px 5px 5px 5px;
-    display: table;
-    width: 100%;
-    box-sizing: border-box;
-
-    > .#{$namespace}-icon-arrow-right {
-      font-size: 20px;
-      vertical-align: middle;
-      display: table-cell;
-      color: $--datepicker-icon-color;
-    }
-  }
-
-  @include e(time-picker-wrap) {
-    position: relative;
-    display: table-cell;
-    padding: 0 5px;
-
-    .#{$namespace}-picker-panel {
-      position: absolute;
-      top: 13px;
-      right: 0;
-      z-index: 1;
-      background: $--color-white;
-    }
-    .#{$namespace}-time-panel {
-      position: absolute;
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/date-picker/date-table.scss b/src/assets/css/themes/src/date-picker/date-table.scss
deleted file mode 100644
index 01e7f9c3..00000000
--- a/src/assets/css/themes/src/date-picker/date-table.scss
+++ /dev/null
@@ -1,151 +0,0 @@
-@import "../common/var";
-@import "../mixins/mixins";
-
-@include b(date-table) {
-  font-size: 12px;
-  user-select: none;
-
-  @include when(week-mode) {
-    .#{$namespace}-date-table__row {
-      &:hover {
-        div {
-          background-color: $--datepicker-inrange-background-color;
-        }
-        td.available:hover {
-          color: $--datepicker-font-color;
-        }
-        td:first-child div {
-          margin-left: 5px;
-          border-top-left-radius: 15px;
-          border-bottom-left-radius: 15px;
-        }
-        td:last-child div {
-          margin-right: 5px;
-          border-top-right-radius: 15px;
-          border-bottom-right-radius: 15px;
-        }
-      }
-
-      &.current div {
-        background-color: $--datepicker-inrange-background-color;
-      }
-    }
-  }
-
-  td {
-    width: 32px;
-    height: 30px;
-    padding: 4px 0;
-    box-sizing: border-box;
-    text-align: center;
-    cursor: pointer;
-    position: relative;
-
-    & div {
-      height: 30px;
-      padding: 3px 0;
-      box-sizing: border-box;
-    }
-
-    & span {
-      width: 24px;
-      height: 24px;
-      display: block;
-      margin: 0 auto;
-      line-height: 24px;
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      border-radius: 50%;
-    }
-
-    &.next-month,
-    &.prev-month {
-      color: $--datepicker-off-font-color;
-    }
-
-    &.today {
-      position: relative;
-      span {
-        color: $--color-primary;
-        font-weight: bold;
-      }
-      &.start-date span,
-      &.end-date span {
-        color: $--color-white;
-      }
-    }
-
-    &.available:hover {
-      color: $--datepicker-hover-font-color;
-    }
-
-    &.in-range div {
-      background-color: $--datepicker-inrange-background-color;
-      &:hover {
-        background-color: $--datepicker-inrange-hover-background-color;
-      }
-    }
-
-    &.current:not(.disabled) span {
-      color: $--color-white;
-      background-color: $--datepicker-active-color;
-    }
-    &.start-date div,
-    &.end-date div {
-      color: $--color-white;
-    }
-
-    &.start-date span,
-    &.end-date span {
-      background-color: $--datepicker-active-color;
-    }
-
-    &.start-date div {
-      margin-left: 5px;
-      border-top-left-radius: 15px;
-      border-bottom-left-radius: 15px;
-    }
-
-    &.end-date div {
-      margin-right: 5px;
-      border-top-right-radius: 15px;
-      border-bottom-right-radius: 15px;
-    }
-
-    &.disabled div {
-      background-color: $--background-color-base;
-      opacity: 1;
-      cursor: not-allowed;
-      color: $--color-text-placeholder;
-    }
-
-    &.selected div {
-      margin-left: 5px;
-      margin-right: 5px;
-      background-color: $--datepicker-inrange-background-color;
-      border-radius: 15px;
-      &:hover {
-        background-color: $--datepicker-inrange-hover-background-color;
-      }
-    }
-
-    &.selected span {
-      background-color: $--datepicker-active-color;
-      color: $--color-white;
-      border-radius: 15px;
-    }
-
-    &.week {
-      font-size: 80%;
-      color: $--datepicker-header-font-color;
-    }
-  }
-
-  th {
-    padding: 5px;
-    color: $--datepicker-header-font-color;
-    font-weight: 400;
-    border-bottom: solid 1px $--border-color-lighter;
-  }
-}
diff --git a/src/assets/css/themes/src/date-picker/month-table.scss b/src/assets/css/themes/src/date-picker/month-table.scss
deleted file mode 100644
index 1164f70b..00000000
--- a/src/assets/css/themes/src/date-picker/month-table.scss
+++ /dev/null
@@ -1,82 +0,0 @@
-@import "../common/var";
-
-@include b(month-table) {
-  font-size: 12px;
-  margin: -1px;
-  border-collapse: collapse;
-
-  td {
-    text-align: center;
-    padding: 8px 0px;
-    cursor: pointer;
-    & div {
-      height: 48px;
-      padding: 6px 0;
-      box-sizing: border-box;
-    }
-    &.today {
-      .cell {
-        color: $--color-primary;
-        font-weight: bold;
-      }
-      &.start-date .cell,
-      &.end-date .cell {
-        color: $--color-white;
-      }
-    }
-
-    &.disabled .cell {
-      background-color: $--background-color-base;
-      cursor: not-allowed;
-      color: $--color-text-placeholder;
-
-      &:hover {
-        color: $--color-text-placeholder;
-      }
-    }
-
-    .cell {
-      width: 60px;
-      height: 36px;
-      display: block;
-      line-height: 36px;
-      color: $--datepicker-font-color;
-      margin: 0 auto;
-      border-radius: 18px;
-      &:hover {
-        color: $--datepicker-hover-font-color;
-      }
-    }
-
-    &.in-range div {
-      background-color: $--datepicker-inrange-background-color;
-      &:hover {
-        background-color: $--datepicker-inrange-hover-background-color;
-      }
-    }
-    &.start-date div,
-    &.end-date div {
-      color: $--color-white;
-    }
-
-    &.start-date .cell,
-    &.end-date .cell {
-      color: $--color-white;
-      background-color: $--datepicker-active-color;
-    }
-
-    &.start-date div {
-      border-top-left-radius: 24px;
-      border-bottom-left-radius: 24px;
-    }
-
-    &.end-date div {
-      border-top-right-radius: 24px;
-      border-bottom-right-radius: 24px;
-    }
-
-    &.current:not(.disabled) .cell {
-      color: $--datepicker-active-color;
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/date-picker/picker-panel.scss b/src/assets/css/themes/src/date-picker/picker-panel.scss
deleted file mode 100644
index da808d68..00000000
--- a/src/assets/css/themes/src/date-picker/picker-panel.scss
+++ /dev/null
@@ -1,122 +0,0 @@
-@import "../common/var";
-
-@include b(picker-panel) {
-  position: relative;
-  color: $--color-text-regular;
-  background: $--color-white;
-  border-radius: $--border-radius-base;
-  line-height: 30px;
-
-  .#{$namespace}-time-panel {
-    margin: 5px 0;
-    border: solid 1px $--datepicker-border-color;
-    background-color: $--color-white;
-    box-shadow: $--box-shadow-light;
-  }
-
-  @include e((body, body-wrapper)) {
-    &::after {
-      content: "";
-      display: table;
-      clear: both;
-    }
-  }
-
-  @include e(content) {
-    position: relative;
-    margin: 15px;
-  }
-
-  @include e(footer) {
-    border-top: 1px solid $--datepicker-inner-border-color;
-    padding: 4px;
-    text-align: right;
-    background-color: $--color-white;
-    position: relative;
-    font-size: 0;
-  }
-
-  @include e(shortcut) {
-    display: block;
-    width: 100%;
-    border: 0;
-    background-color: transparent;
-    line-height: 28px;
-    font-size: 14px;
-    color: $--datepicker-font-color;
-    padding-left: 12px;
-    text-align: left;
-    outline: none;
-    cursor: pointer;
-
-    &:hover {
-      color: $--datepicker-hover-font-color;
-    }
-
-    &.active {
-      background-color: #e6f1fe;
-      color: $--datepicker-active-color;
-    }
-  }
-
-  @include e(btn) {
-    border: 1px solid #dcdcdc;
-    color: #333;
-    line-height: 24px;
-    border-radius: 2px;
-    padding: 0 20px;
-    cursor: pointer;
-    background-color: transparent;
-    outline: none;
-    font-size: 12px;
-
-    &[disabled] {
-      color: #cccccc;
-      cursor: not-allowed;
-    }
-  }
-
-  @include e(icon-btn) {
-    font-size: 12px;
-    color: $--datepicker-icon-color;
-    border: 0;
-    background: transparent;
-    cursor: pointer;
-    outline: none;
-    margin-top: 8px;
-
-    &:hover {
-      color: $--datepicker-hover-font-color;
-    }
-
-    @include when(disabled) {
-      color: $--font-color-disabled-base;
-
-      &:hover {
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  @include e(link-btn) {
-    vertical-align: middle;
-  }
-}
-
-.#{$namespace}-picker-panel *[slot=sidebar],
-.#{$namespace}-picker-panel__sidebar {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 110px;
-  border-right: 1px solid $--datepicker-inner-border-color;
-  box-sizing: border-box;
-  padding-top: 6px;
-  background-color: $--color-white;
-  overflow: auto;
-}
-
-.#{$namespace}-picker-panel *[slot=sidebar] + .#{$namespace}-picker-panel__body,
-.#{$namespace}-picker-panel__sidebar + .#{$namespace}-picker-panel__body {
-  margin-left: 110px;
-}
diff --git a/src/assets/css/themes/src/date-picker/picker.scss b/src/assets/css/themes/src/date-picker/picker.scss
deleted file mode 100644
index b3b213b2..00000000
--- a/src/assets/css/themes/src/date-picker/picker.scss
+++ /dev/null
@@ -1,213 +0,0 @@
-@import "../mixins/mixins";
-@import "../common/var";
-@import "../common/transition";
-
-@include b(picker) {
-  @include e(popper) {
-    @include picker-popper(
-      $--color-white,
-      1px solid $--datepicker-border-color,
-      $--box-shadow-light,
-    );
-  }
-}
-
-@include b(date-editor) {
-  position: relative;
-  display: inline-block;
-  text-align: left;
-
-  &.#{$namespace}-input,
-  &.#{$namespace}-input__inner {
-    width: 220px;
-  }
-
-  @include m((monthrange)) {
-    &.#{$namespace}-input,
-    &.#{$namespace}-input__inner {
-      width: 300px;
-    }
-  }
-
-  @include m((daterange, timerange)) {
-    &.#{$namespace}-input,
-    &.#{$namespace}-input__inner {
-      width: 350px;
-    }
-  }
-
-  @include m(datetimerange) {
-    &.#{$namespace}-input,
-    &.#{$namespace}-input__inner {
-      width: 400px;
-    }
-  }
-
-  @include m(dates) {
-    .#{$namespace}-input__inner {
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  .#{$namespace}-icon-circle-close {
-    cursor: pointer;
-  }
-
-  .#{$namespace}-range__icon {
-    font-size: 14px;
-    margin-left: -5px;
-    color: $--color-text-placeholder;
-    float: left;
-    line-height: 32px;
-  }
-
-  .#{$namespace}-range-input {
-    appearance: none;
-    border: none;
-    outline: none;
-    display: inline-block;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    width: 39%;
-    text-align: center;
-    font-size: $--font-size-base;
-    color: $--color-text-regular;
-
-    &::placeholder {
-      color: $--color-text-placeholder;
-    }
-  }
-
-  .#{$namespace}-range-separator {
-    display: inline-block;
-    height: 100%;
-    padding: 0 5px;
-    margin: 0;
-    text-align: center;
-    line-height: 32px;
-    font-size: 14px;
-    width: 5%;
-    color: $--color-text-primary;
-  }
-
-  .#{$namespace}-range__close-icon {
-    font-size: 14px;
-    color: $--color-text-placeholder;
-    width: 25px;
-    display: inline-block;
-    float: right;
-    line-height: 32px;
-  }
-}
-
-@include b(range-editor) {
-  &.#{$namespace}-input__inner {
-    display: inline-flex;
-    align-items: center;
-    padding: 3px 10px;
-  }
-
-  .#{$namespace}-range-input {
-    line-height: 1;
-  }
-
-  @include when(active) {
-    border-color: $--color-primary;
-
-    &:hover {
-      border-color: $--color-primary;
-    }
-  }
-
-  @include m(medium) {
-    line-height: $--input-medium-height;
-
-    &.#{$namespace}-input__inner {
-      height: $--input-medium-height;
-    }
-
-    .#{$namespace}-range-separator {
-      line-height: 28px;
-      font-size: $--input-medium-font-size;
-    }
-
-    .#{$namespace}-range-input {
-      font-size: $--input-medium-font-size;
-    }
-
-    .#{$namespace}-range__icon,
-    .#{$namespace}-range__close-icon {
-      line-height: 28px;
-    }
-  }
-
-  @include m(small) {
-    line-height: $--input-small-height;
-
-    &.#{$namespace}-input__inner {
-      height: $--input-small-height;
-    }
-
-    .#{$namespace}-range-separator {
-      line-height: 24px;
-      font-size: $--input-small-font-size;
-    }
-
-    .#{$namespace}-range-input {
-      font-size: $--input-small-font-size;
-    }
-
-    .#{$namespace}-range__icon,
-    .#{$namespace}-range__close-icon {
-      line-height: 24px;
-    }
-  }
-
-  @include m(mini) {
-    line-height: $--input-mini-height;
-
-    &.#{$namespace}-input__inner {
-      height: $--input-mini-height;
-    }
-
-    .#{$namespace}-range-separator {
-      line-height: 20px;
-      font-size: $--input-mini-font-size;
-    }
-
-    .#{$namespace}-range-input {
-      font-size: $--input-mini-font-size;
-    }
-
-    .#{$namespace}-range__icon,
-    .#{$namespace}-range__close-icon {
-      line-height: 20px;
-    }
-  }
-
-  @include when(disabled) {
-    background-color: $--input-disabled-fill;
-    border-color: $--input-disabled-border;
-    color: $--input-disabled-color;
-    cursor: not-allowed;
-
-    &:hover, &:focus {
-      border-color: $--input-disabled-border;
-    }
-
-    input {
-      background-color: $--input-disabled-fill;
-      color: $--input-disabled-color;
-      cursor: not-allowed;
-      &::placeholder {
-        color: $--input-disabled-placeholder-color;
-      }
-    }
-
-    .#{$namespace}-range-separator {
-      color: $--input-disabled-color;
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/date-picker/time-picker.scss b/src/assets/css/themes/src/date-picker/time-picker.scss
deleted file mode 100644
index ace865b4..00000000
--- a/src/assets/css/themes/src/date-picker/time-picker.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-@import "../common/var";
-
-@include b(time-panel) {
-  border-radius: 2px;
-  position: relative;
-  width: 180px;
-  left: 0;
-  z-index: $--index-top;
-  user-select: none;
-  box-sizing: content-box;
-
-  @include e(content) {
-    font-size: 0;
-    position: relative;
-    overflow: hidden;
-
-    &::after, &::before {
-      content: "";
-      top: 50%;
-      position: absolute;
-      margin-top: -15px;
-      height: 32px;
-      z-index: -1;
-      left: 0;
-      right: 0;
-      box-sizing: border-box;
-      padding-top: 6px;
-      text-align: left;
-      border-top: 1px solid $--border-color-light;
-      border-bottom: 1px solid $--border-color-light;
-    }
-
-    &::after {
-      left: 50%;
-      margin-left: 12%;
-      margin-right: 12%;
-    }
-
-    &::before {
-      padding-left: 50%;
-      margin-right: 12%;
-      margin-left: 12%;
-    }
-
-    &.has-seconds {
-      &::after {
-        left: calc(100% / 3 * 2);
-      }
-
-      &::before {
-        padding-left: calc(100% / 3);
-      }
-    }
-  }
-
-  @include e(footer) {
-    border-top: 1px solid $--datepicker-inner-border-color;
-    padding: 4px;
-    height: 36px;
-    line-height: 25px;
-    text-align: right;
-    box-sizing: border-box;
-  }
-
-  @include e(btn) {
-    border: none;
-    line-height: 28px;
-    padding: 0 5px;
-    margin: 0 5px;
-    cursor: pointer;
-    background-color: transparent;
-    outline: none;
-    font-size: 12px;
-    color: $--color-text-primary;
-
-    &.confirm {
-      font-weight: 800;
-      color: $--datepicker-active-color;
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/date-picker/time-range-picker.scss b/src/assets/css/themes/src/date-picker/time-range-picker.scss
deleted file mode 100644
index 1ee5c23a..00000000
--- a/src/assets/css/themes/src/date-picker/time-range-picker.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@import "../common/var";
-
-@include b(time-range-picker) {
-  width: 354px;
-  overflow: visible;
-
-  @include e(content) {
-    position: relative;
-    text-align: center;
-    padding: 10px;
-    z-index: 1;
-  }
-
-  @include e(cell) {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 4px 7px 7px;
-    width: 50%;
-    display: inline-block;
-  }
-
-  @include e(header) {
-    margin-bottom: 5px;
-    text-align: center;
-    font-size: 14px;
-  }
-
-  @include e(body) {
-    border-radius:2px;
-    border: 1px solid $--datepicker-border-color;
-  }
-}
diff --git a/src/assets/css/themes/src/date-picker/time-spinner.scss b/src/assets/css/themes/src/date-picker/time-spinner.scss
deleted file mode 100644
index 4e058eb8..00000000
--- a/src/assets/css/themes/src/date-picker/time-spinner.scss
+++ /dev/null
@@ -1,110 +0,0 @@
-@import "../common/var";
-
-@include b(time-spinner) {
-  &.has-seconds {
-    .#{$namespace}-time-spinner__wrapper {
-      width: 33.3%;
-    }
-  }
-
-  @include e(wrapper) {
-    max-height: 190px;
-    overflow: auto;
-    display: inline-block;
-    width: 50%;
-    vertical-align: top;
-    position: relative;
-
-    & .#{$namespace}-scrollbar__wrap:not(.#{$namespace}-scrollbar__wrap--hidden-default) {
-      padding-bottom: 15px;
-    }
-
-    @include when(arrow) {
-      box-sizing: border-box;
-      text-align: center;
-      overflow: hidden;
-
-      .#{$namespace}-time-spinner__list {
-        transform: translateY(-32px);
-      }
-
-      .#{$namespace}-time-spinner__item:hover:not(.disabled):not(.active) {
-        background: $--color-white;
-        cursor: default;
-      }
-    }
-  }
-
-  @include e(arrow) {
-    font-size: 12px;
-    color: $--color-text-secondary;
-    position: absolute;
-    left: 0;
-    width: 100%;
-    z-index: $--index-normal;
-    text-align: center;
-    height: 30px;
-    line-height: 30px;
-    cursor: pointer;
-
-    &:hover {
-      color: $--color-primary;
-    }
-
-    &.#{$namespace}-icon-arrow-up {
-      top: 10px;
-    }
-
-    &.#{$namespace}-icon-arrow-down {
-      bottom: 10px;
-    }
-  }
-
-  @include e(input) {
-    &.#{$namespace}-input {
-      width: 70%;
-
-      .#{$namespace}-input__inner {
-        padding: 0;
-        text-align: center;
-      }
-    }
-  }
-
-  @include e(list) {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    text-align: center;
-
-    &::after,
-    &::before {
-      content: '';
-      display: block;
-      width: 100%;
-      height: 80px;
-    }
-  }
-
-  @include e(item) {
-    height: 32px;
-    line-height: 32px;
-    font-size: 12px;
-    color: $--color-text-regular;
-
-    &:hover:not(.disabled):not(.active) {
-      background: $--background-color-base;
-      cursor: pointer;
-    }
-
-    &.active:not(.disabled) {
-      color: $--color-text-primary;
-      font-weight: bold;
-    }
-
-    &.disabled {
-      color: $--color-text-placeholder;
-      cursor: not-allowed;
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/date-picker/year-table.scss b/src/assets/css/themes/src/date-picker/year-table.scss
deleted file mode 100644
index 56f345e8..00000000
--- a/src/assets/css/themes/src/date-picker/year-table.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-@import "../common/var";
-
-@include b(year-table) {
-  font-size: 12px;
-  margin: -1px;
-  border-collapse: collapse;
-
-  .#{$namespace}-icon {
-    color: $--datepicker-icon-color;
-  }
-
-  td {
-    text-align: center;
-    padding: 20px 3px;
-    cursor: pointer;
-
-    &.today {
-      .cell {
-        color: $--color-primary;
-        font-weight: bold;
-      }
-    }
-
-    &.disabled .cell {
-      background-color: $--background-color-base;
-      cursor: not-allowed;
-      color: $--color-text-placeholder;
-
-      &:hover {
-        color: $--color-text-placeholder;
-      }
-    }
-
-    .cell {
-      width: 48px;
-      height: 32px;
-      display: block;
-      line-height: 32px;
-      color: $--datepicker-font-color;
-      margin: 0 auto;
-
-      &:hover {
-        color: $--datepicker-hover-font-color;
-      }
-    }
-
-    &.current:not(.disabled) .cell {
-      color: $--datepicker-active-color;
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/descriptions-item.scss b/src/assets/css/themes/src/descriptions-item.scss
deleted file mode 100644
index 007c1d5a..00000000
--- a/src/assets/css/themes/src/descriptions-item.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@import 'mixins/mixins';
-@import 'common/var';
-
-@include b(descriptions) {
-  @include e(label) {
-    &.is-bordered-label {
-      font-weight: bold;
-      color: $--color-text-secondary;
-      background: $--descriptions-item-bordered-label-background;
-    }
-
-    &:not(.is-bordered-label) {
-      margin-right: 10px;
-    }
-  }
-
-  @include e(content) {
-
-  }
-}
diff --git a/src/assets/css/themes/src/descriptions.scss b/src/assets/css/themes/src/descriptions.scss
deleted file mode 100644
index c5ec15b2..00000000
--- a/src/assets/css/themes/src/descriptions.scss
+++ /dev/null
@@ -1,96 +0,0 @@
-@import 'mixins/mixins';
-@import 'common/var';
-@import 'descriptions-item';
-
-@include b(descriptions) {
-  box-sizing: border-box;
-  font-size: $--font-size-base;
-  color: $--color-text-primary;
-
-  @include e(header) {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: $--descriptions-header-margin-bottom;
-
-    @include e(title) {
-      font-size: $--descriptions-title-font-size;
-      font-weight: bold;
-    }
-  }
-
-  @include e(body) {
-    color: $--color-text-regular;
-    background-color: $--color-white;
-
-    table {
-      border-collapse: collapse;
-      width: 100%;
-
-      th, td {
-        text-align: left;
-        font-weight: normal;
-        line-height: 1.5;
-      }
-    }
-  }
-
-  .is-bordered {
-    th, td {
-      border: $--descriptions-table-border;
-      padding: 12px 10px;
-    }
-  }
-
-  :not(.is-bordered) {
-    th, td {
-      padding-bottom: 12px;
-    }
-  }
-
-  @include m(medium) {
-    &.is-bordered {
-      th, td {
-        padding: 10px;
-      }
-    }
-
-    &:not(.is-bordered) {
-      th, td {
-        padding-bottom: 10px;
-      }
-    }
-  }
-
-  @include m(small) {
-    font-size: 12px;
-
-    &.is-bordered {
-      th, td {
-        padding: 8px 10px;
-      }
-    }
-
-    &:not(.is-bordered) {
-      th, td {
-        padding-bottom: 8px;
-      }
-    }
-  }
-
-  @include m(mini) {
-    font-size: 12px;
-
-    &.is-bordered {
-      th, td {
-        padding: 6px 10px;
-      }
-    }
-
-    &:not(.is-bordered) {
-      th, td {
-        padding-bottom: 6px;
-      }
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/dialog.scss b/src/assets/css/themes/src/dialog.scss
deleted file mode 100644
index ee1cdc09..00000000
--- a/src/assets/css/themes/src/dialog.scss
+++ /dev/null
@@ -1,153 +0,0 @@
-@import 'mixins/mixins';
-@import 'mixins/utils';
-@import 'common/var';
-@import 'common/popup';
-@import './overlay.scss';
-
-@include b(dialog) {
-  position: relative;
-  margin: 0 auto 50px;
-  background: $--dialog-background-color;
-  border-radius: $--border-radius-small;
-  box-shadow: $--dialog-box-shadow;
-  box-sizing: border-box;
-  width: 50%;
-
-  @include when(fullscreen) {
-    width: 100%;
-    margin-top: 0;
-    margin-bottom: 0;
-    height: 100%;
-    overflow: auto;
-  }
-
-  @include e(wrapper) {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    overflow: auto;
-    margin: 0;
-  }
-
-  @include e(header) {
-    padding: $--dialog-padding-primary;
-    padding-bottom: 10px;
-  }
-
-  @include e(headerbtn) {
-    position: absolute;
-    top: $--dialog-padding-primary;
-    right: $--dialog-padding-primary;
-    padding: 0;
-    background: transparent;
-    border: none;
-    outline: none;
-    cursor: pointer;
-    font-size: $--message-close-size;
-
-    .#{$namespace}-dialog__close {
-      color: $--color-info;
-    }
-
-    &:focus,
-    &:hover {
-      .#{$namespace}-dialog__close {
-        color: $--color-primary;
-      }
-    }
-  }
-
-  @include e(title) {
-    line-height: $--dialog-font-line-height;
-    font-size: $--dialog-title-font-size;
-    color: $--color-text-primary;
-  }
-
-  @include e(body) {
-    padding: ($--dialog-padding-primary + 10px) $--dialog-padding-primary;
-    color: $--color-text-regular;
-    font-size: $--dialog-content-font-size;
-    word-break: break-all;
-  }
-
-  @include e(footer) {
-    padding: $--dialog-padding-primary;
-    padding-top: 10px;
-    text-align: right;
-    box-sizing: border-box;
-  }
-
-  // 内容居中布局
-  @include m(center) {
-    text-align: center;
-
-    @include e(body) {
-      text-align: initial;
-      padding: 25px ($--dialog-padding-primary + 5px) 30px;
-    }
-
-    @include e(footer) {
-      text-align: inherit;
-    }
-  }
-}
-
-.dialog-fade-enter-active {
-  animation: modal-fade-in 0.3s !important;
-  .#{$namespace}-dialog {
-    animation: dialog-fade-in 0.3s;
-  }
-}
-
-.dialog-fade-leave-active {
-  animation: modal-fade-out 0.3s;
-  .#{$namespace}-dialog {
-    animation: dialog-fade-out 0.3s;
-  }
-}
-
-
-
-
-@keyframes dialog-fade-in {
-  0% {
-    transform: translate3d(0, -20px, 0);
-    opacity: 0;
-  }
-  100% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes dialog-fade-out {
-  0% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-  100% {
-    transform: translate3d(0, -20px, 0);
-    opacity: 0;
-  }
-}
-
-@keyframes modal-fade-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes modal-fade-out {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
diff --git a/src/assets/css/themes/src/display.scss b/src/assets/css/themes/src/display.scss
deleted file mode 100644
index fac8b494..00000000
--- a/src/assets/css/themes/src/display.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@import "common/var";
-@import "mixins/mixins";
-
-.hidden {
-  @each $break-point-name, $value in $--breakpoints-spec {
-    &-#{$break-point-name} {
-      @include res($break-point-name, $--breakpoints-spec) {
-        display: none !important;
-      }
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/divider.scss b/src/assets/css/themes/src/divider.scss
deleted file mode 100644
index 4ed94ee5..00000000
--- a/src/assets/css/themes/src/divider.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-@import "common/var";
-@import "mixins/mixins";
-
-@include b(divider) {
-  background-color: $--border-color-base;
-  position: relative;
-
-  @include m(horizontal) {
-    display: block;
-    height: 1px;
-    width: 100%;
-    margin: 24px 0;
-  }
-
-  @include m(vertical) {
-    display: inline-block;
-    width: 1px;
-    height: 1em;
-    margin: 0 8px;
-    vertical-align: middle;
-    position: relative;
-  }
-
-  @include e(text) {
-    position: absolute;
-    background-color: $--color-white;
-    padding: 0 20px;
-    font-weight: 500;
-    color: $--color-text-primary;
-    font-size: 14px;
-
-    @include when(left) {
-      left: 20px;
-      transform: translateY(-50%);
-    }
-
-    @include when(center)  {
-      left: 50%;
-      transform: translateX(-50%) translateY(-50%);
-    }
-
-    @include when(right)  {
-      right: 20px;
-      transform: translateY(-50%);
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/assets/css/themes/src/drawer.scss b/src/assets/css/themes/src/drawer.scss
deleted file mode 100644
index 72ebc699..00000000
--- a/src/assets/css/themes/src/drawer.scss
+++ /dev/null
@@ -1,172 +0,0 @@
-@import 'mixins/mixins';
-@import 'common/var';
-@import './overlay.scss';
-
-@keyframes #{$namespace}-drawer-fade-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@mixin drawer-animation($direction) {
-  @keyframes #{$direction}-drawer-animation {
-    0% {
-      @if $direction == ltr {
-        transform: translate(0px, 0px);
-      }
-
-      @if $direction == rtl {
-        transform: translate(0px, 0px);
-      }
-
-      @if $direction == ttb {
-        transform: translate(0px, 0px);
-      }
-
-      @if $direction == btt {
-        transform: translate(0px, 0px);
-      }
-    }
-
-    100% {
-      @if $direction == ltr {
-        transform: translate(-100%, 0px);
-      }
-
-      @if $direction == rtl {
-        transform: translate(100%, 0px);
-      }
-
-      @if $direction == ttb {
-        transform: translate(0px, -100%);
-      }
-
-      @if $direction == btt {
-        transform: translate(0px, 100%);
-      }
-    }
-  }
-}
-
-@mixin animation-in($direction) {
-  &.#{$direction} {
-    animation: #{$direction}-drawer-animation 0.3s linear reverse;
-  }
-}
-
-@mixin animation-out($direction) {
-  &.#{$direction} {
-    animation: #{$direction}-drawer-animation 0.3s linear;
-  }
-}
-
-@include drawer-animation(rtl);
-@include drawer-animation(ltr);
-@include drawer-animation(ttb);
-@include drawer-animation(btt);
-
-$directions: rtl, ltr, ttb, btt;
-
-@include b(drawer) {
-  position: absolute;
-  box-sizing: border-box;
-  background-color: $--dialog-background-color;
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
-    0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
-  overflow: hidden;
-
-  @each $direction in $directions {
-    .#{$namespace}-drawer-fade-enter-active & {
-      @include animation-in($direction);
-    }
-
-    .#{$namespace}-drawer-fade-leave-active & {
-      @include animation-out($direction);
-    }
-  }
-
-  &__header {
-    align-items: center;
-    color: rgb(114, 118, 123);
-    display: flex;
-    margin-bottom: 32px;
-    padding: $--dialog-padding-primary;
-    padding-bottom: 0;
-    & > :first-child {
-      flex: 1;
-    }
-  }
-
-  &__title {
-    margin: 0;
-    flex: 1;
-    line-height: inherit;
-    font-size: 1rem;
-  }
-
-  &__close-btn {
-    border: none;
-    cursor: pointer;
-    font-size: $--font-size-extra-large;
-    color: inherit;
-    background-color: transparent;
-    outline: none;
-    &:hover {
-      i {
-        color: $--color-primary;
-      }
-    }
-  }
-
-  &__body {
-    flex: 1;
-    & > * {
-      box-sizing: border-box;
-    }
-  }
-
-  &.ltr,
-  &.rtl {
-    height: 100%;
-    top: 0;
-    bottom: 0;
-  }
-
-  &.ttb,
-  &.btt {
-    width: 100%;
-    left: 0;
-    right: 0;
-  }
-
-  &.ltr {
-    left: 0;
-  }
-
-  &.rtl {
-    right: 0;
-  }
-
-  &.ttb {
-    top: 0;
-  }
-
-  &.btt {
-    bottom: 0;
-  }
-}
-
-.#{$namespace}-drawer-fade-enter-active {
-  animation: #{$namespace}-drawer-fade-in 0.3s;
-  overflow: hidden !important;
-}
-
-.#{$namespace}-drawer-fade-leave-active {
-  overflow: hidden !important;
-  animation: #{$namespace}-drawer-fade-in 0.3s reverse;
-}
diff --git a/src/assets/css/themes/src/dropdown-item.scss b/src/assets/css/themes/src/dropdown-item.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/assets/css/themes/src/dropdown-menu.scss b/src/assets/css/themes/src/dropdown-menu.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/assets/css/themes/src/dropdown.scss b/src/assets/css/themes/src/dropdown.scss
deleted file mode 100644
index 2402386a..00000000
--- a/src/assets/css/themes/src/dropdown.scss
+++ /dev/null
@@ -1,204 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-@import "button";
-
-@include b(dropdown) {
-  display: inline-block;
-  position: relative;
-  color: $--color-text-regular;
-  font-size: $--font-size-base;
-  line-height: 1;
-
-  @include e(popper) {
-    // using attributes selector to override
-
-    @include picker-popper(
-        $--color-white,
-        1px solid $--border-color-light,
-        $--dropdown-menu-box-shadow,
-    );
-
-    .#{$namespace}-dropdown-menu {
-      border: none;
-    }
-
-    #{& + '-selfdefine'} {
-      outline: none;
-    }
-
-    @include b(scrollbar__bar) {
-      z-index: #{$--dropdown-menu-index + 1};
-    }
-
-    @include b(dropdown__list) {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-      box-sizing: border-box;
-    }
-  }
-
-  .#{$namespace}-button-group {
-    display: block;
-
-    .#{$namespace}-button {
-      float: none;
-    }
-  }
-
-  & .#{$namespace}-dropdown__caret-button {
-    padding-left: 5px;
-    padding-right: 5px;
-    position: relative;
-    border-left: none;
-
-    &::before {
-      $gap: 5px;
-
-      content: '';
-      position: absolute;
-      display: block;
-      width: 1px;
-      top: $gap;
-      bottom: $gap;
-      left: 0;
-      background: mix(white, transparent, 50%);
-    }
-
-    &.#{$namespace}-button--default::before {
-      background: mix($--button-default-border-color, transparent, 50%);
-    }
-
-    &:hover {
-      &::before {
-        top: 0;
-        bottom: 0;
-      }
-    }
-
-    & .#{$namespace}-dropdown__icon {
-      padding-left: 0;
-    }
-  }
-  @include e(icon) {
-    font-size: 12px;
-    margin: 0 3px;
-  }
-
-  .#{$namespace}-dropdown-selfdefine { // 自定义
-    outline: none;
-  }
-}
-
-@include b(dropdown-menu) {
-  position: relative;
-  top: 0;
-  left: 0;
-  z-index: $--dropdown-menu-index;
-  padding: 10px 0;
-  margin: 0;
-  background-color: $--color-white;
-  border: none;
-  border-radius: $--border-radius-base;
-  box-shadow: none;
-
-  @include e(item) {
-    list-style: none;
-    line-height: 36px;
-    padding: 0 20px;
-    margin: 0;
-    font-size: $--font-size-base;
-    color: $--color-text-regular;
-    cursor: pointer;
-    outline: none;
-    &:not(.is-disabled):hover, &:focus {
-      background-color: $--dropdown-menuItem-hover-fill;
-      color: $--dropdown-menuItem-hover-color;
-    }
-
-    i {
-      margin-right: 5px;
-    }
-
-    @include m(divided) {
-      $divided-offset: 6px;
-
-      position: relative;
-      margin-top: $divided-offset;
-      border-top: 1px solid $--border-color-lighter;
-
-      &:before {
-        content: '';
-        height: $divided-offset;
-        display: block;
-        margin: 0 -20px;
-        background-color: $--color-white;
-      }
-    }
-
-    @include when(disabled) {
-      cursor: not-allowed;
-      color: $--font-color-disabled-base;
-    }
-  }
-
-  @include m(medium) {
-    padding: 6px 0;
-
-    @include e(item) {
-      line-height: 30px;
-      padding: 0 17px;
-      font-size: 14px;
-
-      &.#{$namespace}-dropdown-menu__item--divided {
-        $divided-offset: 6px;
-        margin-top: $divided-offset;
-
-        &:before {
-          height: $divided-offset;
-          margin: 0 -17px;
-        }
-      }
-    }
-  }
-
-  @include m(small) {
-    padding: 6px 0;
-
-    @include e(item) {
-      line-height: 27px;
-      padding: 0 15px;
-      font-size: 13px;
-
-      &.#{$namespace}-dropdown-menu__item--divided {
-        $divided-offset: 4px;
-        margin-top: $divided-offset;
-
-        &:before {
-          height: $divided-offset;
-          margin: 0 -15px;
-        }
-      }
-    }
-  }
-
-  @include m(mini) {
-    padding: 3px 0;
-
-    @include e(item) {
-      line-height: 24px;
-      padding: 0 10px;
-      font-size: 12px;
-
-      &.#{$namespace}-dropdown-menu__item--divided {
-        $divided-offset: 3px;
-        margin-top: $divided-offset;
-
-        &:before {
-          height: $divided-offset;
-          margin: 0 -10px;
-        }
-      }
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/empty.scss b/src/assets/css/themes/src/empty.scss
deleted file mode 100644
index 76a384f0..00000000
--- a/src/assets/css/themes/src/empty.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(empty) {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  text-align: center;
-  box-sizing: border-box;
-  padding: $--empty-padding;
-
-  @include e(image) {
-    width: $--empty-image-width;
-
-    img {
-      user-select: none;
-      width: 100%;
-      height: 100%;
-      vertical-align: top;
-      object-fit: contain;
-    }
-
-    svg {
-      fill: $--svg-monochrome-grey;
-      width: 100%;
-      height: 100%;
-      vertical-align: top;
-    }
-  }
-
-  @include e(description) {
-    margin-top: $--empty-description-margin-top;
-
-    p {
-      margin: 0;
-      font-size: $--font-size-base;
-      color: $--color-text-secondary;
-    }
-  }
-
-  @include e(bottom) {
-    margin-top: $--empty-bottom-margin-top;
-  }
-}
diff --git a/src/assets/css/themes/src/fonts/element-icons.ttf b/src/assets/css/themes/src/fonts/element-icons.ttf
deleted file mode 100644
index c0e5e067..00000000
Binary files a/src/assets/css/themes/src/fonts/element-icons.ttf and /dev/null differ
diff --git a/src/assets/css/themes/src/fonts/element-icons.woff b/src/assets/css/themes/src/fonts/element-icons.woff
deleted file mode 100644
index c3fa4b9e..00000000
Binary files a/src/assets/css/themes/src/fonts/element-icons.woff and /dev/null differ
diff --git a/src/assets/css/themes/src/footer.scss b/src/assets/css/themes/src/footer.scss
deleted file mode 100644
index 71a67b00..00000000
--- a/src/assets/css/themes/src/footer.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(footer) {
-  padding: $--footer-padding;
-  box-sizing: border-box;
-  flex-shrink: 0;
-}
diff --git a/src/assets/css/themes/src/form-item.scss b/src/assets/css/themes/src/form-item.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/assets/css/themes/src/form.scss b/src/assets/css/themes/src/form.scss
deleted file mode 100644
index e5c13338..00000000
--- a/src/assets/css/themes/src/form.scss
+++ /dev/null
@@ -1,167 +0,0 @@
-@import "mixins/mixins";
-@import "mixins/utils";
-@import "common/var";
-
-@include b(form) {
-  @include m(label-left) {
-    & .#{$namespace}-form-item__label {
-      text-align: left;
-    }
-  }
-  @include m(label-top) {
-    & .#{$namespace}-form-item__label {
-      float: none;
-      display: inline-block;
-      text-align: left;
-      padding: 0 0 10px 0;
-    }
-  }
-  @include m(inline) {
-    & .#{$namespace}-form-item {
-      display: inline-block;
-      margin-right: 10px;
-      vertical-align: top;
-    }
-    & .#{$namespace}-form-item__label {
-      float: none;
-      display: inline-block;
-    }
-    & .#{$namespace}-form-item__content {
-      display: inline-block;
-      vertical-align: top;
-    }
-    &.#{$namespace}-form--label-top .#{$namespace}-form-item__content {
-      display: block;
-    }
-  }
-}
-@include b(form-item) {
-  margin-bottom: 22px;
-  @include utils-clearfix;
-
-  & .#{$namespace}-form-item {
-    margin-bottom: 0;
-  }
-
-  & .#{$namespace}-input__validateIcon {
-    display: none;
-  }
-
-  @include m(medium) {
-    .#{$namespace}-form-item__label {
-      line-height: 36px;
-    }
-    .#{$namespace}-form-item__content {
-      line-height: 36px;
-    }
-  }
-  @include m(small) {
-    .#{$namespace}-form-item__label {
-      line-height: 32px;
-    }
-    .#{$namespace}-form-item__content {
-      line-height: 32px;
-    }
-    &.#{$namespace}-form-item {
-      margin-bottom: 18px;
-    }
-    .#{$namespace}-form-item__error {
-      padding-top: 2px;
-    }
-  }
-  @include m(mini) {
-    .#{$namespace}-form-item__label {
-      line-height: 28px;
-    }
-    .#{$namespace}-form-item__content {
-      line-height: 28px;
-    }
-    &.#{$namespace}-form-item {
-      margin-bottom: 18px;
-    }
-    .#{$namespace}-form-item__error {
-      padding-top: 1px;
-    }
-  }
-
-  @include e(label-wrap) {
-    float: left;
-    .#{$namespace}-form-item__label {
-      display: inline-block;
-      float: none;
-    }
-  }
-
-  @include e(label) {
-    text-align: right;
-    vertical-align: middle;
-    float: left;
-    font-size: $--form-label-font-size;
-    color: $--color-text-regular;
-    line-height: 40px;
-    padding: 0 12px 0 0;
-    box-sizing: border-box;
-  }
-  @include e(content) {
-    line-height: 40px;
-    position: relative;
-    font-size: 14px;
-    @include utils-clearfix;
-
-    .#{$namespace}-input-group {
-      vertical-align: top;
-    }
-  }
-  @include e(error) {
-    color: $--color-danger;
-    font-size: 12px;
-    line-height: 1;
-    padding-top: 4px;
-    position: absolute;
-    top: 100%;
-    left: 0;
-
-    @include m(inline) {
-      position: relative;
-      top: auto;
-      left: auto;
-      display: inline-block;
-      margin-left: 10px;
-    }
-  }
-
-  @include when(required) {
-    @include pseudo('not(.is-no-asterisk)') {
-      & > .#{$namespace}-form-item__label:before,
-      & .#{$namespace}-form-item__label-wrap > .#{$namespace}-form-item__label:before {
-        content: '*';
-        color: $--color-danger;
-        margin-right: 4px;
-      }
-    }
-  }
-
-  @include when(error) {
-    & .#{$namespace}-input__inner,
-    & .#{$namespace}-textarea__inner {
-      &, &:focus {
-        border-color: $--color-danger;
-      }
-    }
-    & .#{$namespace}-input-group__append,
-    & .#{$namespace}-input-group__prepend {
-      & .#{$namespace}-input__inner {
-        border-color: transparent;
-      }
-    }
-    .#{$namespace}-input__validateIcon {
-      color: $--color-danger;
-    }
-  }
-
-  @include m(feedback) {
-    .#{$namespace}-input__validateIcon {
-      display: inline-block;
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/header.scss b/src/assets/css/themes/src/header.scss
deleted file mode 100644
index 9e8a1d8e..00000000
--- a/src/assets/css/themes/src/header.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(header) {
-  padding: $--header-padding;
-  box-sizing: border-box;
-  flex-shrink: 0;
-}
diff --git a/src/assets/css/themes/src/icon.scss b/src/assets/css/themes/src/icon.scss
deleted file mode 100644
index dbd8e689..00000000
--- a/src/assets/css/themes/src/icon.scss
+++ /dev/null
@@ -1,1167 +0,0 @@
-@import "common/var";
-
-@font-face {
-  font-family: 'element-icons';
-  src: url('#{$--font-path}/element-icons.woff') format('woff'), /* chrome, firefox */
-       url('#{$--font-path}/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  font-weight: normal;
-  font-display: $--font-display;
-  font-style: normal;
-}
-
-[class^="#{$namespace}-icon-"], [class*=" #{$namespace}-icon-"] {
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: 'element-icons' !important;
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  vertical-align: baseline;
-  display: inline-block;
-
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.#{$namespace}-icon-ice-cream-round:before {
-  content: "\e6a0";
-}
-
-.#{$namespace}-icon-ice-cream-square:before {
-  content: "\e6a3";
-}
-
-.#{$namespace}-icon-lollipop:before {
-  content: "\e6a4";
-}
-
-.#{$namespace}-icon-potato-strips:before {
-  content: "\e6a5";
-}
-
-.#{$namespace}-icon-milk-tea:before {
-  content: "\e6a6";
-}
-
-.#{$namespace}-icon-ice-drink:before {
-  content: "\e6a7";
-}
-
-.#{$namespace}-icon-ice-tea:before {
-  content: "\e6a9";
-}
-
-.#{$namespace}-icon-coffee:before {
-  content: "\e6aa";
-}
-
-.#{$namespace}-icon-orange:before {
-  content: "\e6ab";
-}
-
-.#{$namespace}-icon-pear:before {
-  content: "\e6ac";
-}
-
-.#{$namespace}-icon-apple:before {
-  content: "\e6ad";
-}
-
-.#{$namespace}-icon-cherry:before {
-  content: "\e6ae";
-}
-
-.#{$namespace}-icon-watermelon:before {
-  content: "\e6af";
-}
-
-.#{$namespace}-icon-grape:before {
-  content: "\e6b0";
-}
-
-.#{$namespace}-icon-refrigerator:before {
-  content: "\e6b1";
-}
-
-.#{$namespace}-icon-goblet-square-full:before {
-  content: "\e6b2";
-}
-
-.#{$namespace}-icon-goblet-square:before {
-  content: "\e6b3";
-}
-
-.#{$namespace}-icon-goblet-full:before {
-  content: "\e6b4";
-}
-
-.#{$namespace}-icon-goblet:before {
-  content: "\e6b5";
-}
-
-.#{$namespace}-icon-cold-drink:before {
-  content: "\e6b6";
-}
-
-.#{$namespace}-icon-coffee-cup:before {
-  content: "\e6b8";
-}
-
-.#{$namespace}-icon-water-cup:before {
-  content: "\e6b9";
-}
-
-.#{$namespace}-icon-hot-water:before {
-  content: "\e6ba";
-}
-
-.#{$namespace}-icon-ice-cream:before {
-  content: "\e6bb";
-}
-
-.#{$namespace}-icon-dessert:before {
-  content: "\e6bc";
-}
-
-.#{$namespace}-icon-sugar:before {
-  content: "\e6bd";
-}
-
-.#{$namespace}-icon-tableware:before {
-  content: "\e6be";
-}
-
-.#{$namespace}-icon-burger:before {
-  content: "\e6bf";
-}
-
-.#{$namespace}-icon-knife-fork:before {
-  content: "\e6c1";
-}
-
-.#{$namespace}-icon-fork-spoon:before {
-  content: "\e6c2";
-}
-
-.#{$namespace}-icon-chicken:before {
-  content: "\e6c3";
-}
-
-.#{$namespace}-icon-food:before {
-  content: "\e6c4";
-}
-
-.#{$namespace}-icon-dish-1:before {
-  content: "\e6c5";
-}
-
-.#{$namespace}-icon-dish:before {
-  content: "\e6c6";
-}
-
-.#{$namespace}-icon-moon-night:before {
-  content: "\e6ee";
-}
-
-.#{$namespace}-icon-moon:before {
-  content: "\e6f0";
-}
-
-.#{$namespace}-icon-cloudy-and-sunny:before {
-  content: "\e6f1";
-}
-
-.#{$namespace}-icon-partly-cloudy:before {
-  content: "\e6f2";
-}
-
-.#{$namespace}-icon-cloudy:before {
-  content: "\e6f3";
-}
-
-.#{$namespace}-icon-sunny:before {
-  content: "\e6f6";
-}
-
-.#{$namespace}-icon-sunset:before {
-  content: "\e6f7";
-}
-
-.#{$namespace}-icon-sunrise-1:before {
-  content: "\e6f8";
-}
-
-.#{$namespace}-icon-sunrise:before {
-  content: "\e6f9";
-}
-
-.#{$namespace}-icon-heavy-rain:before {
-  content: "\e6fa";
-}
-
-.#{$namespace}-icon-lightning:before {
-  content: "\e6fb";
-}
-
-.#{$namespace}-icon-light-rain:before {
-  content: "\e6fc";
-}
-
-.#{$namespace}-icon-wind-power:before {
-  content: "\e6fd";
-}
-
-.#{$namespace}-icon-baseball:before {
-  content: "\e712";
-}
-
-.#{$namespace}-icon-soccer:before {
-  content: "\e713";
-}
-
-.#{$namespace}-icon-football:before {
-  content: "\e715";
-}
-
-.#{$namespace}-icon-basketball:before {
-  content: "\e716";
-}
-
-.#{$namespace}-icon-ship:before {
-  content: "\e73f";
-}
-
-.#{$namespace}-icon-truck:before {
-  content: "\e740";
-}
-
-.#{$namespace}-icon-bicycle:before {
-  content: "\e741";
-}
-
-.#{$namespace}-icon-mobile-phone:before {
-  content: "\e6d3";
-}
-
-.#{$namespace}-icon-service:before {
-  content: "\e6d4";
-}
-
-.#{$namespace}-icon-key:before {
-  content: "\e6e2";
-}
-
-.#{$namespace}-icon-unlock:before {
-  content: "\e6e4";
-}
-
-.#{$namespace}-icon-lock:before {
-  content: "\e6e5";
-}
-
-.#{$namespace}-icon-watch:before {
-  content: "\e6fe";
-}
-
-.#{$namespace}-icon-watch-1:before {
-  content: "\e6ff";
-}
-
-.#{$namespace}-icon-timer:before {
-  content: "\e702";
-}
-
-.#{$namespace}-icon-alarm-clock:before {
-  content: "\e703";
-}
-
-.#{$namespace}-icon-map-location:before {
-  content: "\e704";
-}
-
-.#{$namespace}-icon-delete-location:before {
-  content: "\e705";
-}
-
-.#{$namespace}-icon-add-location:before {
-  content: "\e706";
-}
-
-.#{$namespace}-icon-location-information:before {
-  content: "\e707";
-}
-
-.#{$namespace}-icon-location-outline:before {
-  content: "\e708";
-}
-
-.#{$namespace}-icon-location:before {
-  content: "\e79e";
-}
-
-.#{$namespace}-icon-place:before {
-  content: "\e709";
-}
-
-.#{$namespace}-icon-discover:before {
-  content: "\e70a";
-}
-
-.#{$namespace}-icon-first-aid-kit:before {
-  content: "\e70b";
-}
-
-.#{$namespace}-icon-trophy-1:before {
-  content: "\e70c";
-}
-
-.#{$namespace}-icon-trophy:before {
-  content: "\e70d";
-}
-
-.#{$namespace}-icon-medal:before {
-  content: "\e70e";
-}
-
-.#{$namespace}-icon-medal-1:before {
-  content: "\e70f";
-}
-
-.#{$namespace}-icon-stopwatch:before {
-  content: "\e710";
-}
-
-.#{$namespace}-icon-mic:before {
-  content: "\e711";
-}
-
-.#{$namespace}-icon-copy-document:before {
-  content: "\e718";
-}
-
-.#{$namespace}-icon-full-screen:before {
-  content: "\e719";
-}
-
-.#{$namespace}-icon-switch-button:before {
-  content: "\e71b";
-}
-
-.#{$namespace}-icon-aim:before {
-  content: "\e71c";
-}
-
-.#{$namespace}-icon-crop:before {
-  content: "\e71d";
-}
-
-.#{$namespace}-icon-odometer:before {
-  content: "\e71e";
-}
-
-.#{$namespace}-icon-time:before {
-  content: "\e71f";
-}
-
-.#{$namespace}-icon-bangzhu:before {
-  content: "\e724";
-}
-
-.#{$namespace}-icon-close-notification:before {
-  content: "\e726";
-}
-
-.#{$namespace}-icon-microphone:before {
-  content: "\e727";
-}
-
-.#{$namespace}-icon-turn-off-microphone:before {
-  content: "\e728";
-}
-
-.#{$namespace}-icon-position:before {
-  content: "\e729";
-}
-
-.#{$namespace}-icon-postcard:before {
-  content: "\e72a";
-}
-
-.#{$namespace}-icon-message:before {
-  content: "\e72b";
-}
-
-.#{$namespace}-icon-chat-line-square:before {
-  content: "\e72d";
-}
-
-.#{$namespace}-icon-chat-dot-square:before {
-  content: "\e72e";
-}
-
-.#{$namespace}-icon-chat-dot-round:before {
-  content: "\e72f";
-}
-
-.#{$namespace}-icon-chat-square:before {
-  content: "\e730";
-}
-
-.#{$namespace}-icon-chat-line-round:before {
-  content: "\e731";
-}
-
-.#{$namespace}-icon-chat-round:before {
-  content: "\e732";
-}
-
-.#{$namespace}-icon-set-up:before {
-  content: "\e733";
-}
-
-.#{$namespace}-icon-turn-off:before {
-  content: "\e734";
-}
-
-.#{$namespace}-icon-open:before {
-  content: "\e735";
-}
-
-.#{$namespace}-icon-connection:before {
-  content: "\e736";
-}
-
-.#{$namespace}-icon-link:before {
-  content: "\e737";
-}
-
-.#{$namespace}-icon-cpu:before {
-  content: "\e738";
-}
-
-.#{$namespace}-icon-thumb:before {
-  content: "\e739";
-}
-
-.#{$namespace}-icon-female:before {
-  content: "\e73a";
-}
-
-.#{$namespace}-icon-male:before {
-  content: "\e73b";
-}
-
-.#{$namespace}-icon-guide:before {
-  content: "\e73c";
-}
-
-.#{$namespace}-icon-news:before {
-  content: "\e73e";
-}
-
-.#{$namespace}-icon-price-tag:before {
-  content: "\e744";
-}
-
-.#{$namespace}-icon-discount:before {
-  content: "\e745";
-}
-
-.#{$namespace}-icon-wallet:before {
-  content: "\e747";
-}
-
-.#{$namespace}-icon-coin:before {
-  content: "\e748";
-}
-
-.#{$namespace}-icon-money:before {
-  content: "\e749";
-}
-
-.#{$namespace}-icon-bank-card:before {
-  content: "\e74a";
-}
-
-.#{$namespace}-icon-box:before {
-  content: "\e74b";
-}
-
-.#{$namespace}-icon-present:before {
-  content: "\e74c";
-}
-
-.#{$namespace}-icon-sell:before {
-  content: "\e6d5";
-}
-
-.#{$namespace}-icon-sold-out:before {
-  content: "\e6d6";
-}
-
-.#{$namespace}-icon-shopping-bag-2:before {
-  content: "\e74d";
-}
-
-.#{$namespace}-icon-shopping-bag-1:before {
-  content: "\e74e";
-}
-
-.#{$namespace}-icon-shopping-cart-2:before {
-  content: "\e74f";
-}
-
-.#{$namespace}-icon-shopping-cart-1:before {
-  content: "\e750";
-}
-
-.#{$namespace}-icon-shopping-cart-full:before {
-  content: "\e751";
-}
-
-.#{$namespace}-icon-smoking:before {
-  content: "\e752";
-}
-
-.#{$namespace}-icon-no-smoking:before {
-  content: "\e753";
-}
-
-.#{$namespace}-icon-house:before {
-  content: "\e754";
-}
-
-.#{$namespace}-icon-table-lamp:before {
-  content: "\e755";
-}
-
-.#{$namespace}-icon-school:before {
-  content: "\e756";
-}
-
-.#{$namespace}-icon-office-building:before {
-  content: "\e757";
-}
-
-.#{$namespace}-icon-toilet-paper:before {
-  content: "\e758";
-}
-
-.#{$namespace}-icon-notebook-2:before {
-  content: "\e759";
-}
-
-.#{$namespace}-icon-notebook-1:before {
-  content: "\e75a";
-}
-
-.#{$namespace}-icon-files:before {
-  content: "\e75b";
-}
-
-.#{$namespace}-icon-collection:before {
-  content: "\e75c";
-}
-
-.#{$namespace}-icon-receiving:before {
-  content: "\e75d";
-}
-
-.#{$namespace}-icon-suitcase-1:before {
-  content: "\e760";
-}
-
-.#{$namespace}-icon-suitcase:before {
-  content: "\e761";
-}
-
-.#{$namespace}-icon-film:before {
-  content: "\e763";
-}
-
-.#{$namespace}-icon-collection-tag:before {
-  content: "\e765";
-}
-
-.#{$namespace}-icon-data-analysis:before {
-  content: "\e766";
-}
-
-.#{$namespace}-icon-pie-chart:before {
-  content: "\e767";
-}
-
-.#{$namespace}-icon-data-board:before {
-  content: "\e768";
-}
-
-.#{$namespace}-icon-data-line:before {
-  content: "\e76d";
-}
-
-.#{$namespace}-icon-reading:before {
-  content: "\e769";
-}
-
-.#{$namespace}-icon-magic-stick:before {
-  content: "\e76a";
-}
-
-.#{$namespace}-icon-coordinate:before {
-  content: "\e76b";
-}
-
-.#{$namespace}-icon-mouse:before {
-  content: "\e76c";
-}
-
-.#{$namespace}-icon-brush:before {
-  content: "\e76e";
-}
-
-.#{$namespace}-icon-headset:before {
-  content: "\e76f";
-}
-
-.#{$namespace}-icon-umbrella:before {
-  content: "\e770";
-}
-
-.#{$namespace}-icon-scissors:before {
-  content: "\e771";
-}
-
-.#{$namespace}-icon-mobile:before {
-  content: "\e773";
-}
-
-.#{$namespace}-icon-attract:before {
-  content: "\e774";
-}
-
-.#{$namespace}-icon-monitor:before {
-  content: "\e775";
-}
-
-.#{$namespace}-icon-search:before {
-  content: "\e778";
-}
-
-.#{$namespace}-icon-takeaway-box:before {
-  content: "\e77a";
-}
-
-.#{$namespace}-icon-paperclip:before {
-  content: "\e77d";
-}
-
-.#{$namespace}-icon-printer:before {
-  content: "\e77e";
-}
-
-.#{$namespace}-icon-document-add:before {
-  content: "\e782";
-}
-
-.#{$namespace}-icon-document:before {
-  content: "\e785";
-}
-
-.#{$namespace}-icon-document-checked:before {
-  content: "\e786";
-}
-
-.#{$namespace}-icon-document-copy:before {
-  content: "\e787";
-}
-
-.#{$namespace}-icon-document-delete:before {
-  content: "\e788";
-}
-
-.#{$namespace}-icon-document-remove:before {
-  content: "\e789";
-}
-
-.#{$namespace}-icon-tickets:before {
-  content: "\e78b";
-}
-
-.#{$namespace}-icon-folder-checked:before {
-  content: "\e77f";
-}
-
-.#{$namespace}-icon-folder-delete:before {
-  content: "\e780";
-}
-
-.#{$namespace}-icon-folder-remove:before {
-  content: "\e781";
-}
-
-.#{$namespace}-icon-folder-add:before {
-  content: "\e783";
-}
-
-.#{$namespace}-icon-folder-opened:before {
-  content: "\e784";
-}
-
-.#{$namespace}-icon-folder:before {
-  content: "\e78a";
-}
-
-.#{$namespace}-icon-edit-outline:before {
-  content: "\e764";
-}
-
-.#{$namespace}-icon-edit:before {
-  content: "\e78c";
-}
-
-.#{$namespace}-icon-date:before {
-  content: "\e78e";
-}
-
-.#{$namespace}-icon-c-scale-to-original:before {
-  content: "\e7c6";
-}
-
-.#{$namespace}-icon-view:before {
-  content: "\e6ce";
-}
-
-.#{$namespace}-icon-loading:before {
-  content: "\e6cf";
-}
-
-.#{$namespace}-icon-rank:before {
-  content: "\e6d1";
-}
-
-.#{$namespace}-icon-sort-down:before {
-  content: "\e7c4";
-}
-
-.#{$namespace}-icon-sort-up:before {
-  content: "\e7c5";
-}
-
-.#{$namespace}-icon-sort:before {
-  content: "\e6d2";
-}
-
-.#{$namespace}-icon-finished:before {
-  content: "\e6cd";
-}
-
-.#{$namespace}-icon-refresh-left:before {
-  content: "\e6c7";
-}
-
-.#{$namespace}-icon-refresh-right:before {
-  content: "\e6c8";
-}
-
-.#{$namespace}-icon-refresh:before {
-  content: "\e6d0";
-}
-
-.#{$namespace}-icon-video-play:before {
-  content: "\e7c0";
-}
-
-.#{$namespace}-icon-video-pause:before {
-  content: "\e7c1";
-}
-
-.#{$namespace}-icon-d-arrow-right:before {
-  content: "\e6dc";
-}
-
-.#{$namespace}-icon-d-arrow-left:before {
-  content: "\e6dd";
-}
-
-.#{$namespace}-icon-arrow-up:before {
-  content: "\e6e1";
-}
-
-.#{$namespace}-icon-arrow-down:before {
-  content: "\e6df";
-}
-
-.#{$namespace}-icon-arrow-right:before {
-  content: "\e6e0";
-}
-
-.#{$namespace}-icon-arrow-left:before {
-  content: "\e6de";
-}
-
-.#{$namespace}-icon-top-right:before {
-  content: "\e6e7";
-}
-
-.#{$namespace}-icon-top-left:before {
-  content: "\e6e8";
-}
-
-.#{$namespace}-icon-top:before {
-  content: "\e6e6";
-}
-
-.#{$namespace}-icon-bottom:before {
-  content: "\e6eb";
-}
-
-.#{$namespace}-icon-right:before {
-  content: "\e6e9";
-}
-
-.#{$namespace}-icon-back:before {
-  content: "\e6ea";
-}
-
-.#{$namespace}-icon-bottom-right:before {
-  content: "\e6ec";
-}
-
-.#{$namespace}-icon-bottom-left:before {
-  content: "\e6ed";
-}
-
-.#{$namespace}-icon-caret-top:before {
-  content: "\e78f";
-}
-
-.#{$namespace}-icon-caret-bottom:before {
-  content: "\e790";
-}
-
-.#{$namespace}-icon-caret-right:before {
-  content: "\e791";
-}
-
-.#{$namespace}-icon-caret-left:before {
-  content: "\e792";
-}
-
-.#{$namespace}-icon-d-caret:before {
-  content: "\e79a";
-}
-
-.#{$namespace}-icon-share:before {
-  content: "\e793";
-}
-
-.#{$namespace}-icon-menu:before {
-  content: "\e798";
-}
-
-.#{$namespace}-icon-s-grid:before {
-  content: "\e7a6";
-}
-
-.#{$namespace}-icon-s-check:before {
-  content: "\e7a7";
-}
-
-.#{$namespace}-icon-s-data:before {
-  content: "\e7a8";
-}
-
-.#{$namespace}-icon-s-opportunity:before {
-  content: "\e7aa";
-}
-
-.#{$namespace}-icon-s-custom:before {
-  content: "\e7ab";
-}
-
-.#{$namespace}-icon-s-claim:before {
-  content: "\e7ad";
-}
-
-.#{$namespace}-icon-s-finance:before {
-  content: "\e7ae";
-}
-
-.#{$namespace}-icon-s-comment:before {
-  content: "\e7af";
-}
-
-.#{$namespace}-icon-s-flag:before {
-  content: "\e7b0";
-}
-
-.#{$namespace}-icon-s-marketing:before {
-  content: "\e7b1";
-}
-
-.#{$namespace}-icon-s-shop:before {
-  content: "\e7b4";
-}
-
-.#{$namespace}-icon-s-open:before {
-  content: "\e7b5";
-}
-
-.#{$namespace}-icon-s-management:before {
-  content: "\e7b6";
-}
-
-.#{$namespace}-icon-s-ticket:before {
-  content: "\e7b7";
-}
-
-.#{$namespace}-icon-s-release:before {
-  content: "\e7b8";
-}
-
-.#{$namespace}-icon-s-home:before {
-  content: "\e7b9";
-}
-
-.#{$namespace}-icon-s-promotion:before {
-  content: "\e7ba";
-}
-
-.#{$namespace}-icon-s-operation:before {
-  content: "\e7bb";
-}
-
-.#{$namespace}-icon-s-unfold:before {
-  content: "\e7bc";
-}
-
-.#{$namespace}-icon-s-fold:before {
-  content: "\e7a9";
-}
-
-.#{$namespace}-icon-s-platform:before {
-  content: "\e7bd";
-}
-
-.#{$namespace}-icon-s-order:before {
-  content: "\e7be";
-}
-
-.#{$namespace}-icon-s-cooperation:before {
-  content: "\e7bf";
-}
-
-.#{$namespace}-icon-bell:before {
-  content: "\e725";
-}
-
-.#{$namespace}-icon-message-solid:before {
-  content: "\e799";
-}
-
-.#{$namespace}-icon-video-camera:before {
-  content: "\e772";
-}
-
-.#{$namespace}-icon-video-camera-solid:before {
-  content: "\e796";
-}
-
-.#{$namespace}-icon-camera:before {
-  content: "\e779";
-}
-
-.#{$namespace}-icon-camera-solid:before {
-  content: "\e79b";
-}
-
-.#{$namespace}-icon-download:before {
-  content: "\e77c";
-}
-
-.#{$namespace}-icon-upload2:before {
-  content: "\e77b";
-}
-
-.#{$namespace}-icon-upload:before {
-  content: "\e7c3";
-}
-
-.#{$namespace}-icon-picture-outline-round:before {
-  content: "\e75f";
-}
-
-.#{$namespace}-icon-picture-outline:before {
-  content: "\e75e";
-}
-
-.#{$namespace}-icon-picture:before {
-  content: "\e79f";
-}
-
-.#{$namespace}-icon-close:before {
-  content: "\e6db";
-}
-
-.#{$namespace}-icon-check:before {
-  content: "\e6da";
-}
-
-.#{$namespace}-icon-plus:before {
-  content: "\e6d9";
-}
-
-.#{$namespace}-icon-minus:before {
-  content: "\e6d8";
-}
-
-.#{$namespace}-icon-help:before {
-  content: "\e73d";
-}
-
-.#{$namespace}-icon-s-help:before {
-  content: "\e7b3";
-}
-
-.#{$namespace}-icon-circle-close:before {
-  content: "\e78d";
-}
-
-.#{$namespace}-icon-circle-check:before {
-  content: "\e720";
-}
-
-.#{$namespace}-icon-circle-plus-outline:before {
-  content: "\e723";
-}
-
-.#{$namespace}-icon-remove-outline:before {
-  content: "\e722";
-}
-
-.#{$namespace}-icon-zoom-out:before {
-  content: "\e776";
-}
-
-.#{$namespace}-icon-zoom-in:before {
-  content: "\e777";
-}
-
-.#{$namespace}-icon-error:before {
-  content: "\e79d";
-}
-
-.#{$namespace}-icon-success:before {
-  content: "\e79c";
-}
-
-.#{$namespace}-icon-circle-plus:before {
-  content: "\e7a0";
-}
-
-.#{$namespace}-icon-remove:before {
-  content: "\e7a2";
-}
-
-.#{$namespace}-icon-info:before {
-  content: "\e7a1";
-}
-
-.#{$namespace}-icon-question:before {
-  content: "\e7a4";
-}
-
-.#{$namespace}-icon-warning-outline:before {
-  content: "\e6c9";
-}
-
-.#{$namespace}-icon-warning:before {
-  content: "\e7a3";
-}
-
-.#{$namespace}-icon-goods:before {
-  content: "\e7c2";
-}
-
-.#{$namespace}-icon-s-goods:before {
-  content: "\e7b2";
-}
-
-.#{$namespace}-icon-star-off:before {
-  content: "\e717";
-}
-
-.#{$namespace}-icon-star-on:before {
-  content: "\e797";
-}
-
-.#{$namespace}-icon-more-outline:before {
-  content: "\e6cc";
-}
-
-.#{$namespace}-icon-more:before {
-  content: "\e794";
-}
-
-.#{$namespace}-icon-phone-outline:before {
-  content: "\e6cb";
-}
-
-.#{$namespace}-icon-phone:before {
-  content: "\e795";
-}
-
-.#{$namespace}-icon-user:before {
-  content: "\e6e3";
-}
-
-.#{$namespace}-icon-user-solid:before {
-  content: "\e7a5";
-}
-
-.#{$namespace}-icon-setting:before {
-  content: "\e6ca";
-}
-
-.#{$namespace}-icon-s-tools:before {
-  content: "\e7ac";
-}
-
-.#{$namespace}-icon-delete:before {
-  content: "\e6d7";
-}
-
-.#{$namespace}-icon-delete-solid:before {
-  content: "\e7c9";
-}
-
-.#{$namespace}-icon-eleme:before {
-  content: "\e7c7";
-}
-
-.#{$namespace}-icon-platform-eleme:before {
-  content: "\e7ca";
-}
-
-.#{$namespace}-icon-loading {
-  animation: rotating 2s linear infinite;
-}
-
-.#{$namespace}-icon--right {
-  margin-left: 5px;
-}
-.#{$namespace}-icon--left {
-  margin-right: 5px;
-}
-
-@keyframes rotating {
-  0% {
-    transform: rotateZ(0deg);
-  }
-  100% {
-    transform: rotateZ(360deg);
-  }
-}
diff --git a/src/assets/css/themes/src/image-viewer.scss b/src/assets/css/themes/src/image-viewer.scss
deleted file mode 100644
index 4e9ab3bd..00000000
--- a/src/assets/css/themes/src/image-viewer.scss
+++ /dev/null
@@ -1,134 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@mixin op-icon() {
-  width: 44px;
-  height: 44px;
-  font-size: 24px;
-  color: #fff;
-  background-color: $--color-text-regular;
-  border-color: #fff;
-}
-
-@include b(image-viewer) {
-
-  @include e(wrapper) {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  @include e(btn) {
-    position: absolute;
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    opacity: .8;
-    cursor: pointer;
-    box-sizing: border-box;
-    user-select: none;
-  }
-
-  @include e(close) {
-    top: 40px;
-    right: 40px;
-    width: 40px;
-    height: 40px;
-    font-size: 40px;
-  }
-
-  @include e(canvas) {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  @include e(actions) {
-    left: 50%;
-    bottom: 30px;
-    transform: translateX(-50%);
-    width: 282px;
-    height: 44px;
-    padding: 0 23px;
-    background-color: $--color-text-regular;
-    border-color: #fff;
-    border-radius: 22px;
-
-    @include e(actions__inner) {
-      width: 100%;
-      height: 100%;
-      text-align: justify;
-      cursor: default;
-      font-size: 23px;
-      color: #fff;
-      display: flex;
-      align-items: center;
-      justify-content: space-around;
-    }
-  }
-
-  @include e(prev){
-    top: 50%;
-    transform: translateY(-50%);
-    left: 40px;
-    @include op-icon()
-  }
-
-  @include e(next){
-    top: 50%;
-    transform: translateY(-50%);
-    right: 40px;
-    text-indent: 2px;
-    @include op-icon();
-  }
-
-  @include e(close) {
-    @include op-icon();
-  }
-
-  @include e(mask) {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    opacity: .5;
-    background: #000;
-  }
-}
-
-.viewer-fade-enter-active {
-  animation: viewer-fade-in .3s;
-}
-
-.viewer-fade-leave-active {
-  animation: viewer-fade-out .3s;
-}
-
-@keyframes viewer-fade-in {
-  0% {
-    transform: translate3d(0, -20px, 0);
-    opacity: 0;
-  }
-  100% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes viewer-fade-out {
-  0% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-  100% {
-    transform: translate3d(0, -20px, 0);
-    opacity: 0;
-  }
-}
\ No newline at end of file
diff --git a/src/assets/css/themes/src/image.scss b/src/assets/css/themes/src/image.scss
deleted file mode 100644
index 4333e4b3..00000000
--- a/src/assets/css/themes/src/image.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-@import "./image-viewer.scss";
-
-%size {
-  width: 100%;
-  height: 100%;
-}
-
-@include b(image) {
-  position: relative;
-  display: inline-block;
-  overflow: hidden;
-
-  @include e(inner) {
-    @extend %size;
-    vertical-align: top;
-
-    @include m(center) {
-      position: relative;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      display: block;
-    }
-  }
-
-  @include e(placeholder) {
-    @extend %size;
-    background: $--background-color-base;
-  }
-
-  @include e(error) {
-    @extend %size;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 14px;
-    background: $--background-color-base;
-    color: $--color-text-placeholder;
-    vertical-align: middle;
-  }
-
-  @include e(preview) {
-    cursor: pointer;
-  }
-}
-
diff --git a/src/assets/css/themes/src/index.scss b/src/assets/css/themes/src/index.scss
deleted file mode 100644
index b428a4ff..00000000
--- a/src/assets/css/themes/src/index.scss
+++ /dev/null
@@ -1,92 +0,0 @@
-@import "./base.scss";
-@import "./pagination.scss";
-@import "./dialog.scss";
-@import "./autocomplete.scss";
-@import "./dropdown.scss";
-@import "./dropdown-menu.scss";
-@import "./dropdown-item.scss";
-@import "./menu.scss";
-@import "./submenu.scss";
-@import "./menu-item.scss";
-@import "./menu-item-group.scss";
-@import "./input.scss";
-@import "./input-number.scss";
-@import "./radio.scss";
-@import "./radio-group.scss";
-@import "./radio-button.scss";
-@import "./checkbox.scss";
-@import "./checkbox-button.scss";
-@import "./checkbox-group.scss";
-@import "./switch.scss";
-@import "./select.scss";
-@import "./button.scss";
-@import "./button-group.scss";
-@import "./table.scss";
-@import "./table-column.scss";
-@import "./date-picker.scss";
-@import "./time-select.scss";
-@import "./time-picker.scss";
-@import "./popover.scss";
-@import "./tooltip.scss";
-@import "./message-box.scss";
-@import "./breadcrumb.scss";
-@import "./breadcrumb-item.scss";
-@import "./form.scss";
-@import "./form-item.scss";
-@import "./tabs.scss";
-@import "./tab-pane.scss";
-@import "./tag.scss";
-@import "./tree.scss";
-@import "./alert.scss";
-@import "./notification.scss";
-@import "./slider.scss";
-@import "./loading.scss";
-@import "./row.scss";
-@import "./col.scss";
-@import "./upload.scss";
-@import "./progress.scss";
-@import "./spinner.scss";
-@import "./message.scss";
-@import "./badge.scss";
-@import "./card.scss";
-@import "./rate.scss";
-@import "./steps.scss";
-@import "./step.scss";
-@import "./carousel.scss";
-@import "./scrollbar.scss";
-@import "./carousel-item.scss";
-@import "./collapse.scss";
-@import "./collapse-item.scss";
-@import "./cascader.scss";
-@import "./color-picker.scss";
-@import "./transfer.scss";
-@import "./container.scss";
-@import "./header.scss";
-@import "./aside.scss";
-@import "./main.scss";
-@import "./footer.scss";
-@import "./timeline.scss";
-@import "./timeline-item.scss";
-@import "./link.scss";
-@import "./divider.scss";
-@import "./image.scss";
-@import "./image-viewer.scss";
-@import "./calendar.scss";
-@import "./backtop.scss";
-@import "./infinite-scroll.scss";
-@import "./page-header.scss";
-@import "./cascader-panel.scss";
-@import "./avatar.scss";
-@import "./drawer.scss";
-@import "./popconfirm.scss";
-@import "./overlay.scss";
-@import "./virtual-list.scss";
-@import "./space.scss";
-@import "./skeleton.scss";
-@import "./skeleton-item.scss";
-@import "./empty.scss";
-@import "./affix.scss";
-@import "./check-tag.scss";
-@import "./descriptions";
-@import "./descriptions-item";
-@import "./result.scss";
diff --git a/src/assets/css/themes/src/infinite-scroll.scss b/src/assets/css/themes/src/infinite-scroll.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/assets/css/themes/src/infiniteScroll.scss b/src/assets/css/themes/src/infiniteScroll.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/assets/css/themes/src/input-number.scss b/src/assets/css/themes/src/input-number.scss
deleted file mode 100644
index ad6d63bd..00000000
--- a/src/assets/css/themes/src/input-number.scss
+++ /dev/null
@@ -1,180 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-@import "input";
-
-@include b(input-number) {
-  position: relative;
-  display: inline-block;
-  width: 180px;
-  line-height: #{$--input-height - 2};
-
-  .#{$namespace}-input {
-    display: block;
-
-    &__inner {
-      -webkit-appearance: none;
-      padding-left: #{$--input-height + 10};
-      padding-right: #{$--input-height + 10};
-      text-align: center;
-    }
-  }
-
-  @include e((increase, decrease)) {
-    position: absolute;
-    z-index: 1;
-    top: 1px;
-    width: $--input-height;
-    height: auto;
-    text-align: center;
-    background: $--background-color-base;
-    color: $--color-text-regular;
-    cursor: pointer;
-    font-size: 13px;
-
-    &:hover {
-      color: $--color-primary;
-
-      &:not(.is-disabled) ~ .#{$namespace}-input .#{$namespace}-input__inner:not(.is-disabled) {
-        border-color: $--input-focus-border;
-      }
-    }
-
-    &.is-disabled {
-      color: $--disabled-color-base;
-      cursor: not-allowed;
-    }
-  }
-
-  @include e(increase) {
-    right: 1px;
-    border-radius: 0 $--border-radius-base $--border-radius-base 0;
-    border-left: $--border-base;
-  }
-
-  @include e(decrease) {
-    left: 1px;
-    border-radius: $--border-radius-base 0 0 $--border-radius-base;
-    border-right: $--border-base;
-  }
-
-  @include when(disabled) {
-    @include e((increase, decrease)) {
-      border-color: $--disabled-border-base;
-      color: $--disabled-border-base;
-
-      &:hover {
-        color: $--disabled-border-base;
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  @include m(medium) {
-    width: 200px;
-    line-height: #{$--input-medium-height - 2};
-
-    @include e((increase, decrease)) {
-      width: $--input-medium-height;
-      font-size: $--input-medium-font-size;
-    }
-
-    .#{$namespace}-input__inner {
-      padding-left: #{$--input-medium-height + 7};
-      padding-right: #{$--input-medium-height + 7};
-    }
-  }
-
-  @include m(small) {
-    width: 130px;
-    line-height: #{$--input-small-height - 2};
-
-    @include e((increase, decrease)) {
-      width: $--input-small-height;
-      font-size: $--input-small-font-size;
-
-      [class*=#{$namespace}-icon] {
-        transform: scale(.9);
-      }
-    }
-
-    .#{$namespace}-input__inner {
-      padding-left: #{$--input-small-height + 7};
-      padding-right: #{$--input-small-height + 7};
-    }
-  }
-
-  @include m(mini) {
-    width: 130px;
-    line-height: #{$--input-mini-height - 2};
-
-    @include e((increase, decrease)) {
-      width: $--input-mini-height;
-      font-size: $--input-mini-font-size;
-
-      [class*=#{$namespace}-icon] {
-        transform: scale(.8);
-      }
-    }
-
-    .#{$namespace}-input__inner {
-      padding-left: #{$--input-mini-height + 7};
-      padding-right: #{$--input-mini-height + 7};
-    }
-  }
-
-  @include when(without-controls) {
-    .#{$namespace}-input__inner {
-      padding-left: 15px;
-      padding-right: 15px;
-    }
-  }
-
-  @include when(controls-right) {
-    .#{$namespace}-input__inner {
-      padding-left: 15px;
-      padding-right: #{$--input-height + 10};
-    }
-
-    @include e((increase, decrease)) {
-      height: auto;
-      line-height: #{($--input-height - 2) / 2};
-
-      [class*=#{$namespace}-icon] {
-        transform: scale(.8);
-      }
-    }
-
-    @include e(increase) {
-      border-radius: 0 $--border-radius-base 0 0;
-      border-bottom: $--border-base;
-    }
-
-    @include e(decrease) {
-      right: 1px;
-      bottom: 1px;
-      top: auto;
-      left: auto;
-      border-right: none;
-      border-left: $--border-base;
-      border-radius: 0 0 $--border-radius-base 0;
-    }
-
-    &[class*=medium] {
-      [class*=increase], [class*=decrease] {
-        line-height: #{($--input-medium-height - 2) / 2};
-      }
-    }
-
-    &[class*=small] {
-      [class*=increase], [class*=decrease] {
-        line-height: #{($--input-small-height - 2) / 2};
-      }
-    }
-
-    &[class*=mini] {
-      [class*=increase], [class*=decrease] {
-        line-height: #{($--input-mini-height - 2) / 2};
-      }
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/input.scss b/src/assets/css/themes/src/input.scss
deleted file mode 100644
index 15362b04..00000000
--- a/src/assets/css/themes/src/input.scss
+++ /dev/null
@@ -1,360 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(textarea) {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  vertical-align: bottom;
-  font-size: $--font-size-base;
-
-  @include e(inner) {
-    display: block;
-    resize: vertical;
-    padding: 5px 15px;
-    line-height: 1.5;
-    box-sizing: border-box;
-    width: 100%;
-    font-size: inherit;
-    color: $--input-font-color;
-    background-color: $--input-background-color;
-    background-image: none;
-    border: $--input-border;
-    border-radius: $--input-border-radius;
-    transition: $--border-transition-base;
-
-    &::placeholder {
-      color: $--input-placeholder-color;
-    }
-
-    &:hover {
-      border-color: $--input-hover-border;
-    }
-
-    &:focus {
-      outline: none;
-      border-color: $--input-focus-border;
-    }
-  }
-
-  & .#{$namespace}-input__count {
-    color: $--color-info;
-    background: $--color-white;
-    position: absolute;
-    font-size: 12px;
-    line-height: 14px;
-    bottom: 5px;
-    right: 10px;
-  }
-
-  @include when(disabled) {
-    .#{$namespace}-textarea__inner {
-      background-color: $--input-disabled-fill;
-      border-color: $--input-disabled-border;
-      color: $--input-disabled-color;
-      cursor: not-allowed;
-
-      &::placeholder {
-        color: $--input-disabled-placeholder-color;
-      }
-    }
-  }
-
-  @include when(exceed) {
-    .#{$namespace}-textarea__inner {
-      border-color: $--color-danger;
-    }
-
-    .#{$namespace}-input__count {
-      color: $--color-danger;
-    }
-  }
-}
-
-@include b(input) {
-  position: relative;
-  font-size: $--font-size-base;
-  display: inline-block;
-  width: 100%;
-  line-height: $--input-height;
-  @include scroll-bar;
-
-  & .#{$namespace}-input__clear {
-    color: $--input-icon-color;
-    font-size: $--input-font-size;
-    cursor: pointer;
-    transition: $--color-transition-base;
-
-    &:hover {
-      color: $--input-clear-hover-color;
-    }
-  }
-
-  & .#{$namespace}-input__count {
-    height: 100%;
-    display: inline-flex;
-    align-items: center;
-    color: $--color-info;
-    font-size: 12px;
-
-    .#{$namespace}-input__count-inner {
-      background: $--color-white;
-      line-height: initial;
-      display: inline-block;
-      padding: 0 5px;
-    }
-  }
-
-  @include e(inner) {
-    -webkit-appearance: none;
-    background-color: $--input-background-color;
-    background-image: none;
-    border-radius: $--input-border-radius;
-    border: $--input-border;
-    box-sizing: border-box;
-    color: $--input-font-color;
-    display: inline-block;
-    font-size: inherit;
-    height: $--input-height;
-    line-height: $--input-height;
-    outline: none;
-    padding: 0 15px;
-    transition: $--border-transition-base;
-    width: 100%;
-
-    &::placeholder {
-      color: $--input-placeholder-color;
-    }
-
-    &:hover {
-      border-color: $--input-hover-border;
-    }
-
-    &:focus {
-      outline: none;
-      border-color: $--input-focus-border;
-    }
-  }
-
-  @include e(suffix) {
-    position: absolute;
-    height: 100%;
-    right: 5px;
-    top: 0;
-    text-align: center;
-    color: $--input-icon-color;
-    transition: all .3s;
-    pointer-events: none;
-  }
-
-  @include e(suffix-inner) {
-    pointer-events: all;
-  }
-
-  @include e(prefix) {
-    position: absolute;
-    height: 100%;
-    left: 5px;
-    top: 0;
-    text-align: center;
-    color: $--input-icon-color;
-    transition: all .3s;
-  }
-
-  @include e(icon) {
-    width: 25px;
-    text-align: center;
-    transition: all .3s;
-    line-height: $--input-height;
-
-    &:after {
-      content: '';
-      height: 100%;
-      width: 0;
-      display: inline-block;
-      vertical-align: middle;
-    }
-  }
-
-  @include e(validateIcon) {
-    pointer-events: none;
-  }
-
-  @include when(active) {
-    .#{$namespace}-input__inner {
-      outline: none;
-      border-color: $--input-focus-border;
-    }
-  }
-
-  @include when(disabled) {
-    .#{$namespace}-input__inner {
-      background-color: $--input-disabled-fill;
-      border-color: $--input-disabled-border;
-      color: $--input-disabled-color;
-      cursor: not-allowed;
-
-      &::placeholder {
-        color: $--input-disabled-placeholder-color;
-      }
-    }
-
-    .#{$namespace}-input__icon {
-      cursor: not-allowed;
-    }
-  }
-
-  @include when(exceed) {
-    .#{$namespace}-input__inner {
-      border-color: $--color-danger;
-    }
-
-    .#{$namespace}-input__suffix {
-      .#{$namespace}-input__count {
-        color: $--color-danger;
-      }
-    }
-  }
-
-  @include m(suffix) {
-    .#{$namespace}-input__inner {
-      padding-right: 30px;
-    }
-  }
-
-  @include m(prefix) {
-    .#{$namespace}-input__inner {
-      padding-left: 30px;
-    }
-  }
-
-  @include m(medium) {
-    font-size: $--input-medium-font-size;
-    line-height: $--input-medium-height;
-
-    @include e(inner) {
-      height: $--input-medium-height;
-      line-height: $--input-medium-height;
-    }
-
-    .#{$namespace}-input__icon {
-      line-height: $--input-medium-height;
-    }
-  }
-  @include m(small) {
-    font-size: $--input-small-font-size;
-    line-height: $--input-small-height;
-
-    @include e(inner) {
-      height: $--input-small-height;
-      line-height: $--input-small-height;
-    }
-
-    .#{$namespace}-input__icon {
-      line-height: $--input-small-height;
-    }
-  }
-  @include m(mini) {
-    font-size: $--input-mini-font-size;
-    line-height: $--input-mini-height;
-
-    @include e(inner) {
-      height: $--input-mini-height;
-      line-height: $--input-mini-height;
-    }
-
-    .#{$namespace}-input__icon {
-      line-height: $--input-mini-height;
-    }
-  }
-}
-
-@include b(input-group) {
-  line-height: normal;
-  display: inline-table;
-  width: 100%;
-  border-collapse: separate;
-  border-spacing:0;
-
-  > .#{$namespace}-input__inner {
-    vertical-align: middle;
-    display: table-cell;
-  }
-
-  @include e((append, prepend)) {
-    background-color: $--background-color-base;
-    color: $--color-info;
-    vertical-align: middle;
-    display: table-cell;
-    position: relative;
-    border: $--border-base;
-    border-radius: $--input-border-radius;
-    padding: 0 20px;
-    width: 1px;
-    white-space: nowrap;
-
-    &:focus {
-      outline: none;
-    }
-
-    .#{$namespace}-select,
-    .#{$namespace}-button {
-      display: inline-block;
-      margin: -10px -20px;
-    }
-
-    button.#{$namespace}-button,
-    div.#{$namespace}-select .#{$namespace}-input__inner,
-    div.#{$namespace}-select:hover .#{$namespace}-input__inner {
-      border-color: transparent;
-      background-color: transparent;
-      color: inherit;
-      border-top: 0;
-      border-bottom: 0;
-    }
-
-    .#{$namespace}-button,
-    .#{$namespace}-input {
-      font-size: inherit;
-    }
-  }
-
-  @include e(prepend) {
-    border-right: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  @include e(append) {
-    border-left: 0;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  @include m(prepend) {
-    .#{$namespace}-input__inner {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-    .#{$namespace}-select .#{$namespace}-input.is-focus .#{$namespace}-input__inner {
-      border-color: transparent;
-    }
-  }
-
-  @include m(append) {
-    .#{$namespace}-input__inner {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-    .#{$namespace}-select .#{$namespace}-input.is-focus .#{$namespace}-input__inner {
-      border-color: transparent;
-    }
-  }
-}
-
-/** disalbe default clear on IE */
-.#{$namespace}-input__inner::-ms-clear {
-  display: none;
-  width: 0;
-  height: 0;
-}
diff --git a/src/assets/css/themes/src/link.scss b/src/assets/css/themes/src/link.scss
deleted file mode 100644
index e17348fd..00000000
--- a/src/assets/css/themes/src/link.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-$typeMap: (
-  primary: $--link-primary-font-color, 
-  danger: $--link-danger-font-color, 
-  success: $--link-success-font-color, 
-  warning: $--link-warning-font-color, 
-  info: $--link-info-font-color);
-
-@include b(link) {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  position: relative;
-  text-decoration: none;
-  outline: none;
-  cursor: pointer;
-  padding: 0;
-  font-size: $--link-font-size;
-  font-weight: $--link-font-weight;
-
-  @include when(underline) {
-    &:hover:after {
-      content: "";
-      position: absolute;
-      left: 0;
-      right: 0;
-      height: 0;
-      bottom: 0;
-      border-bottom: 1px solid $--link-default-active-color
-    }
-  }
-
-  @include when(disabled) {
-    cursor: not-allowed;
-  } 
-
-  & [class*="#{$namespace}-icon-"] {
-    & + span {
-      margin-left: 5px;
-    }
-  }
-    
-    
-  &.#{$namespace}-link--default  {
-    color: $--link-default-font-color;
-    &:hover {
-      color: $--link-default-active-color
-    }
-    &:after {
-      border-color: $--link-default-active-color
-    }
-    @include when(disabled) {
-      color: $--link-disabled-font-color
-    }
-  }
-
-  @each $type, $primaryColor in $typeMap {
-    &.#{$namespace}-link--#{$type} {
-      color: $primaryColor;
-      &:hover {
-        color: mix($primaryColor, $--color-white, 80%)
-      }
-      &:after {
-        border-color: $primaryColor
-      }
-      @include when(disabled) {
-        color: mix($primaryColor, $--color-white, 50%)
-      }
-      @include when(underline) {
-        &:hover:after {
-          border-color: $primaryColor
-        }
-      }
-    }
-  }
-    
-}
diff --git a/src/assets/css/themes/src/loading.scss b/src/assets/css/themes/src/loading.scss
deleted file mode 100644
index 9dd1d5bb..00000000
--- a/src/assets/css/themes/src/loading.scss
+++ /dev/null
@@ -1,96 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(loading-parent) {
-  @include m(relative) {
-    position: relative !important;
-  }
-
-  @include m(hidden) {
-    overflow: hidden !important;
-  }
-}
-
-@include b(loading-mask) {
-  position: absolute;
-  z-index: 2000;
-  background-color: rgba(255, 255, 255, .9);
-  margin: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  transition: opacity 0.3s;
-
-  @include when(fullscreen) {
-    position: fixed;
-
-    .#{$namespace}-loading-spinner {
-      margin-top: #{- $--loading-fullscreen-spinner-size / 2};
-
-      .circular {
-        height: $--loading-fullscreen-spinner-size;
-        width: $--loading-fullscreen-spinner-size;
-      }
-    }
-  }
-}
-
-@include b(loading-spinner) {
-  top: 50%;
-  margin-top: #{- $--loading-spinner-size / 2};
-  width: 100%;
-  text-align: center;
-  position: absolute;
-
-  .#{$namespace}-loading-text {
-    color: $--color-primary;
-    margin: 3px 0;
-    font-size: 14px;
-  }
-
-  .circular {
-    height: $--loading-spinner-size;
-    width: $--loading-spinner-size;
-    animation: loading-rotate 2s linear infinite;
-  }
-
-  .path {
-    animation: loading-dash 1.5s ease-in-out infinite;
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: 0;
-    stroke-width: 2;
-    stroke: $--color-primary;
-    stroke-linecap: round;
-  }
-
-  i {
-    color: $--color-primary;
-  }
-}
-
-.#{$namespace}-loading-fade-enter-from,
-.#{$namespace}-loading-fade-leave-to {
-  opacity: 0;
-}
-
-@keyframes loading-rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes loading-dash {
-  0% {
-    stroke-dasharray: 1, 200;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -40px;
-  }
-  100% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -120px;
-  }
-}
diff --git a/src/assets/css/themes/src/main.scss b/src/assets/css/themes/src/main.scss
deleted file mode 100644
index 3765af5a..00000000
--- a/src/assets/css/themes/src/main.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(main) {
-  // IE11 supports the <main> element partially https://caniuse.com/#search=main
-  display: block;
-  flex: 1;
-  flex-basis: auto;
-  overflow: auto;
-  box-sizing: border-box;
-  padding: $--main-padding;
-}
diff --git a/src/assets/css/themes/src/menu-item-group.scss b/src/assets/css/themes/src/menu-item-group.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/assets/css/themes/src/menu-item.scss b/src/assets/css/themes/src/menu-item.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/assets/css/themes/src/menu.scss b/src/assets/css/themes/src/menu.scss
deleted file mode 100644
index 9fa8419f..00000000
--- a/src/assets/css/themes/src/menu.scss
+++ /dev/null
@@ -1,281 +0,0 @@
-@import 'mixins/mixins';
-@import 'mixins/utils';
-@import 'common/var';
-@import 'common/transition';
-
-@mixin menu-item {
-  height: 56px;
-  line-height: 56px;
-  font-size: $--menu-item-font-size;
-  color: $--menu-item-font-color;
-  padding: 0 20px;
-  list-style: none;
-  cursor: pointer;
-  position: relative;
-  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
-  box-sizing: border-box;
-  white-space: nowrap;
-
-  * {
-    vertical-align: middle;
-  }
-
-  i {
-    color: $--color-text-secondary;
-  }
-
-  &:hover,
-  &:focus {
-    outline: none;
-    background-color: $--menu-item-hover-fill;
-  }
-
-  @include when(disabled) {
-    opacity: 0.25;
-    cursor: not-allowed;
-    background: none !important;
-  }
-}
-
-@include b(menu) {
-  border-right: solid 1px #e6e6e6;
-  list-style: none;
-  position: relative;
-  margin: 0;
-  padding-left: 0;
-  background-color: $--menu-background-color;
-  @include utils-clearfix;
-  &.#{$namespace}-menu--horizontal {
-    border-bottom: solid 1px #e6e6e6;
-  }
-
-  @include m(horizontal) {
-    border-right: none;
-    & > .#{$namespace}-menu-item {
-      float: left;
-      height: 60px;
-      line-height: 60px;
-      margin: 0;
-      border-bottom: 2px solid transparent;
-      color: $--color-text-secondary;
-
-      a,
-      a:hover {
-        color: inherit;
-      }
-
-      &:not(.is-disabled):hover,
-      &:not(.is-disabled):focus {
-        background-color: #fff;
-      }
-    }
-    & > .#{$namespace}-submenu {
-      float: left;
-
-      &:focus,
-      &:hover {
-        outline: none;
-        .#{$namespace}-submenu__title {
-          color: $--color-text-primary;
-        }
-      }
-
-      &.is-active {
-        .#{$namespace}-submenu__title {
-          border-bottom: 2px solid $--color-primary;
-          color: $--color-text-primary;
-        }
-      }
-
-      & .#{$namespace}-submenu__title {
-        height: 60px;
-        line-height: 60px;
-        border-bottom: 2px solid transparent;
-        color: $--color-text-secondary;
-
-        &:hover {
-          background-color: #fff;
-        }
-      }
-      & .#{$namespace}-submenu__icon-arrow {
-        position: static;
-        vertical-align: middle;
-        margin-left: 8px;
-        margin-top: -3px;
-      }
-    }
-    & .#{$namespace}-menu {
-      & .#{$namespace}-menu-item,
-      & .#{$namespace}-submenu__title {
-        background-color: $--color-white;
-        float: none;
-        height: 36px;
-        line-height: 36px;
-        padding: 0 10px;
-        color: $--color-text-secondary;
-      }
-      & .#{$namespace}-menu-item.is-active,
-      & .#{$namespace}-submenu.is-active > .#{$namespace}-submenu__title {
-        color: $--color-text-primary;
-      }
-    }
-    & .#{$namespace}-menu-item:not(.is-disabled):hover,
-    & .#{$namespace}-menu-item:not(.is-disabled):focus {
-      outline: none;
-      color: $--color-text-primary;
-    }
-    & > .#{$namespace}-menu-item.is-active {
-      border-bottom: 2px solid $--color-primary;
-      color: $--color-text-primary;
-    }
-  }
-  @include m(collapse) {
-    width: 64px;
-
-    > .#{$namespace}-menu-item,
-    > .#{$namespace}-submenu > .#{$namespace}-submenu__title {
-      [class^='#{$namespace}-icon-'] {
-        margin: 0;
-        vertical-align: middle;
-        width: 24px;
-        text-align: center;
-      }
-      .#{$namespace}-submenu__icon-arrow {
-        display: none;
-      }
-      span {
-        height: 0;
-        width: 0;
-        overflow: hidden;
-        visibility: hidden;
-        display: inline-block;
-      }
-    }
-
-    > .#{$namespace}-menu-item.is-active i {
-      color: inherit;
-    }
-
-    .#{$namespace}-menu .#{$namespace}-submenu {
-      min-width: 200px;
-    }
-
-    .#{$namespace}-submenu {
-      position: relative;
-      & .#{$namespace}-menu {
-        position: absolute;
-        margin-left: 5px;
-        top: 0;
-        left: 100%;
-        z-index: 10;
-        border: 1px solid $--border-color-light;
-        border-radius: $--border-radius-small;
-        box-shadow: $--box-shadow-light;
-      }
-
-      &.is-opened {
-        > .#{$namespace}-submenu__title .#{$namespace}-submenu__icon-arrow {
-          transform: none;
-        }
-      }
-    }
-  }
-  @include m(popup) {
-    z-index: 100;
-    min-width: 200px;
-    border: none;
-    padding: 5px 0;
-    border-radius: $--border-radius-small;
-    box-shadow: $--box-shadow-light;
-  }
-}
-@include b(menu-item) {
-  @include menu-item;
-
-  & [class^='#{$namespace}-icon-'] {
-    margin-right: 5px;
-    width: 24px;
-    text-align: center;
-    font-size: 18px;
-    vertical-align: middle;
-  }
-  @include when(active) {
-    color: $--color-primary;
-    i {
-      color: inherit;
-    }
-  }
-}
-
-@include b(submenu) {
-  list-style: none;
-  margin: 0;
-  padding-left: 0;
-
-  @include e(title) {
-    @include menu-item;
-
-    &:hover {
-      background-color: $--menu-item-hover-fill;
-    }
-  }
-  & .#{$namespace}-menu {
-    border: none;
-  }
-  & .#{$namespace}-menu-item {
-    height: 50px;
-    line-height: 50px;
-    padding: 0 45px;
-    min-width: 200px;
-  }
-  @include e(icon-arrow) {
-    position: absolute;
-    top: 50%;
-    right: 20px;
-    margin-top: -7px;
-    transition: transform 0.3s;
-    font-size: 12px;
-  }
-  @include when(active) {
-    .#{$namespace}-submenu__title {
-      border-bottom-color: $--color-primary;
-    }
-  }
-  @include when(opened) {
-    > .#{$namespace}-submenu__title .#{$namespace}-submenu__icon-arrow {
-      transform: rotateZ(180deg);
-    }
-  }
-  @include when(disabled) {
-    .#{$namespace}-submenu__title,
-    .#{$namespace}-menu-item {
-      opacity: 0.25;
-      cursor: not-allowed;
-      background: none !important;
-    }
-  }
-  [class^='#{$namespace}-icon-'] {
-    vertical-align: middle;
-    margin-right: 5px;
-    width: 24px;
-    text-align: center;
-    font-size: 18px;
-  }
-}
-
-@include b(menu-item-group) {
-  > ul {
-    padding: 0;
-  }
-  @include e(title) {
-    padding: 7px 0 7px 20px;
-    line-height: normal;
-    font-size: 12px;
-    color: $--color-text-secondary;
-  }
-}
-
-.horizontal-collapse-transition .#{$namespace}-submenu__title .#{$namespace}-submenu__icon-arrow {
-  transition: 0.2s;
-  opacity: 0;
-}
diff --git a/src/assets/css/themes/src/message-box.scss b/src/assets/css/themes/src/message-box.scss
deleted file mode 100644
index 52713e3a..00000000
--- a/src/assets/css/themes/src/message-box.scss
+++ /dev/null
@@ -1,226 +0,0 @@
-@import 'mixins/mixins';
-@import 'common/var';
-@import 'common/popup';
-@import 'button';
-@import 'input';
-@import 'overlay';
-
-@include b(message-box) {
-  display: inline-block;
-  width: $--msgbox-width;
-  padding-bottom: 10px;
-  vertical-align: middle;
-  background-color: $--color-white;
-  border-radius: $--msgbox-border-radius;
-  border: 1px solid $--border-color-lighter;
-  font-size: $--messagebox-font-size;
-  box-shadow: $--box-shadow-light;
-  text-align: left;
-  overflow: hidden;
-  backface-visibility: hidden;
-
-  @at-root .#{$namespace}-overlay.is-message-box {
-    text-align: center;
-    &::after {
-      content: '';
-      display: inline-block;
-      height: 100%;
-      width: 0;
-      vertical-align: middle;
-    }
-  }
-
-
-  @include e(header) {
-    position: relative;
-    padding: $--msgbox-padding-primary;
-    padding-bottom: 10px;
-  }
-
-  @include e(title) {
-    padding-left: 0;
-    margin-bottom: 0;
-    font-size: $--messagebox-font-size;
-    line-height: 1;
-    color: $--messagebox-title-color;
-  }
-
-  @include e(headerbtn) {
-    position: absolute;
-    top: $--msgbox-padding-primary;
-    right: $--msgbox-padding-primary;
-    padding: 0;
-    border: none;
-    outline: none;
-    background: transparent;
-    font-size: $--message-close-size;
-    cursor: pointer;
-
-    .#{$namespace}-message-box__close {
-      color: $--color-info;
-    }
-
-    &:focus,
-    &:hover {
-      .#{$namespace}-message-box__close {
-        color: $--color-primary;
-      }
-    }
-  }
-
-  @include e(content) {
-    padding: 10px $--msgbox-padding-primary;
-    color: $--messagebox-content-color;
-    font-size: $--messagebox-content-font-size;
-  }
-
-  @include e(container) {
-    position: relative;
-  }
-
-  @include e(input) {
-    padding-top: 15px;
-
-    & div.invalid > input {
-      border-color: $--color-danger;
-      &:focus {
-        border-color: $--color-danger;
-      }
-    }
-  }
-
-  @include e(status) {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 24px !important;
-
-    &::before {
-      // 防止图标切割
-      padding-left: 1px;
-    }
-
-    + .#{$namespace}-message-box__message {
-      padding-left: 36px;
-      padding-right: 12px;
-    }
-
-    &.#{$namespace}-icon-success {
-      color: $--messagebox-success-color;
-    }
-
-    &.#{$namespace}-icon-info {
-      color: $--messagebox-info-color;
-    }
-
-    &.#{$namespace}-icon-warning {
-      color: $--messagebox-warning-color;
-    }
-
-    &.#{$namespace}-icon-error {
-      color: $--messagebox-danger-color;
-    }
-  }
-
-  @include e(message) {
-    margin: 0;
-
-    & p {
-      margin: 0;
-      line-height: 24px;
-    }
-  }
-
-  @include e(errormsg) {
-    color: $--color-danger;
-    font-size: $--messagebox-error-font-size;
-    min-height: 18px;
-    margin-top: 2px;
-  }
-
-  @include e(btns) {
-    padding: 5px 15px 0;
-    text-align: right;
-
-    & button:nth-child(2) {
-      margin-left: 10px;
-    }
-  }
-
-  @include e(btns-reverse) {
-    flex-direction: row-reverse;
-  }
-
-  // centerAlign 布局
-  @include m(center) {
-    padding-bottom: 30px;
-
-    @include e(header) {
-      padding-top: 30px;
-    }
-
-    @include e(title) {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    @include e(status) {
-      position: relative;
-      top: auto;
-      padding-right: 5px;
-      text-align: center;
-      transform: translateY(-1px);
-    }
-
-    @include e(message) {
-      margin-left: 0;
-    }
-
-    @include e((btns, content)) {
-      text-align: center;
-    }
-
-    @include e(content) {
-      $padding-horizontal: $--msgbox-padding-primary + 12px;
-
-      padding-left: $padding-horizontal;
-      padding-right: $padding-horizontal;
-    }
-  }
-}
-
-.fade-in-linear-enter-active {
-  .#{$namespace}-message-box {
-    animation: msgbox-fade-in 0.3s;
-  }
-}
-
-.fade-in-linear-leave-active {
-  .#{$namespace}-message-box {
-    animation: msgbox-fade-in 0.3s reverse;
-  }
-}
-
-@keyframes msgbox-fade-in {
-  0% {
-    transform: translate3d(0, -20px, 0);
-    opacity: 0;
-  }
-  100% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes msgbox-fade-out {
-  0% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-  100% {
-    transform: translate3d(0, -20px, 0);
-    opacity: 0;
-  }
-}
diff --git a/src/assets/css/themes/src/message.scss b/src/assets/css/themes/src/message.scss
deleted file mode 100644
index e3f78e05..00000000
--- a/src/assets/css/themes/src/message.scss
+++ /dev/null
@@ -1,120 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(message) {
-  min-width: $--message-min-width;
-  box-sizing: border-box;
-  border-radius: $--border-radius-base;
-  border-width: $--border-width-base;
-  border-style: $--border-style-base;
-  border-color: $--border-color-lighter;
-  position: fixed;
-  left: 50%;
-  top: 20px;
-  transform: translateX(-50%);
-  background-color: $--message-background-color;
-  transition: opacity 0.3s, transform .4s, top 0.4s;
-  overflow: hidden;
-  padding: $--message-padding;
-  display: flex;
-  align-items: center;
-
-  @include when(center) {
-    justify-content: center;
-  }
-
-  @include when(closable) {
-    .#{$namespace}-message__content {
-      padding-right: 16px;
-    }
-  }
-
-  p {
-    margin: 0;
-  }
-
-  @include m(info) {
-    .#{$namespace}-message__content {
-      color: $--message-info-font-color;
-    }
-  }
-
-  @include m(success) {
-    background-color: $--color-success-lighter;
-    border-color: $--color-success-light;
-
-    .#{$namespace}-message__content {
-      color: $--message-success-font-color;
-    }
-  }
-
-  @include m(warning) {
-    background-color: $--color-warning-lighter;
-    border-color: $--color-warning-light;
-
-    .#{$namespace}-message__content {
-      color: $--message-warning-font-color;
-    }
-  }
-
-  @include m(error) {
-    background-color: $--color-danger-lighter;
-    border-color: $--color-danger-light;
-
-    .#{$namespace}-message__content {
-      color: $--message-danger-font-color;
-    }
-  }
-
-  @include e(icon) {
-    margin-right: 10px;
-  }
-
-  @include e(content) {
-    padding: 0;
-    font-size: 14px;
-    line-height: 1;
-    &:focus {
-      outline-width: 0;
-    }
-  }
-
-  @include e(closeBtn) {
-    position: absolute;
-    top: 50%;
-    right: 15px;
-    transform: translateY(-50%);
-    cursor: pointer;
-    color: $--message-close-icon-color;
-    font-size: $--message-close-size;
-
-    &:focus {
-      outline-width: 0;
-    }
-    &:hover {
-      color: $--message-close-hover-color;
-    }
-  }
-
-  & .#{$namespace}-icon-success {
-    color: $--message-success-font-color;
-  }
-
-  & .#{$namespace}-icon-error {
-    color: $--message-danger-font-color;
-  }
-
-  & .#{$namespace}-icon-info {
-    color: $--message-info-font-color;
-  }
-
-  & .#{$namespace}-icon-warning {
-    color: $--message-warning-font-color;
-  }
-}
-
-.#{$namespace}-message-fade-enter-from,
-.#{$namespace}-message-fade-leave-to {
-  opacity: 0;
-  transform: translate(-50%, -100%);
-}
diff --git a/src/assets/css/themes/src/mixins/_button.scss b/src/assets/css/themes/src/mixins/_button.scss
deleted file mode 100644
index 03c86e52..00000000
--- a/src/assets/css/themes/src/mixins/_button.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-@import "../common/var";
-@mixin button-plain($color) {
-  color: $color;
-  background: mix($--color-white, $color, 90%);
-  border-color: mix($--color-white, $color, 60%);
-
-  &:hover,
-  &:focus {
-    background: $color;
-    border-color: $color;
-    color: $--color-white;
-  }
-
-  &:active {
-    background: mix($--color-black, $color, $--button-active-shade-percent);
-    border-color: mix($--color-black, $color, $--button-active-shade-percent);
-    color: $--color-white;
-    outline: none;
-  }
-
-  &.is-disabled {
-    &,
-    &:hover,
-    &:focus,
-    &:active {
-      color: mix($--color-white, $color, 40%);
-      background-color: mix($--color-white, $color, 90%);
-      border-color: mix($--color-white, $color, 80%);
-    }
-  }
-}
-
-@mixin button-variant($color, $background-color, $border-color) {
-  color: $color;
-  background-color: $background-color;
-  border-color: $border-color;
-
-  &:hover,
-  &:focus {
-    background: mix($--color-white, $background-color, $--button-hover-tint-percent);
-    border-color: mix($--color-white, $border-color, $--button-hover-tint-percent);
-    color: $color;
-  }
-  
-  &:active {
-    background: mix($--color-black, $background-color, $--button-active-shade-percent);
-    border-color: mix($--color-black, $border-color, $--button-active-shade-percent);
-    color: $color;
-    outline: none;
-  }
-
-  &.is-active {
-    background: mix($--color-black, $background-color, $--button-active-shade-percent);
-    border-color: mix($--color-black, $border-color, $--button-active-shade-percent);
-    color: $color;
-  }
-
-  &.is-disabled {
-    &,
-    &:hover,
-    &:focus,
-    &:active {
-      color: $--color-white;
-      background-color: mix($background-color, $--color-white);
-      border-color: mix($border-color, $--color-white);
-    }
-  }
-
-  &.is-plain {
-    @include button-plain($background-color);
-  }
-}
-
-@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
-  padding: $padding-vertical $padding-horizontal;
-  font-size: $font-size;
-  border-radius: $border-radius;
-  &.is-round {
-    padding: $padding-vertical $padding-horizontal;
-  }
-}
diff --git a/src/assets/css/themes/src/mixins/config.scss b/src/assets/css/themes/src/mixins/config.scss
deleted file mode 100644
index 87e29b45..00000000
--- a/src/assets/css/themes/src/mixins/config.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-$namespace: 'el';
-$element-separator: '__';
-$modifier-separator: '--';
-$state-prefix: 'is-';
diff --git a/src/assets/css/themes/src/mixins/function.scss b/src/assets/css/themes/src/mixins/function.scss
deleted file mode 100644
index f348cb60..00000000
--- a/src/assets/css/themes/src/mixins/function.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-@import "config";
-
-/* BEM support Func
- -------------------------- */
-@function selectorToString($selector) {
-  $selector: inspect($selector);
-  $selector: str-slice($selector, 2, -2);
-  @return $selector;
-}
-
-@function containsModifier($selector) {
-  $selector: selectorToString($selector);
-
-  @if str-index($selector, $modifier-separator) {
-    @return true;
-  } @else {
-    @return false;
-  }
-}
-
-@function containWhenFlag($selector) {
-  $selector: selectorToString($selector);
-
-  @if str-index($selector, '.' + $state-prefix) {
-    @return true
-  } @else {
-    @return false
-  }
-}
-
-@function containPseudoClass($selector) {
-  $selector: selectorToString($selector);
-
-  @if str-index($selector, ':') {
-    @return true
-  } @else {
-    @return false
-  }
-}
-
-@function hitAllSpecialNestRule($selector) {
-
-  @return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
-}
diff --git a/src/assets/css/themes/src/mixins/mixins.scss b/src/assets/css/themes/src/mixins/mixins.scss
deleted file mode 100644
index 59c6f537..00000000
--- a/src/assets/css/themes/src/mixins/mixins.scss
+++ /dev/null
@@ -1,234 +0,0 @@
-@import "function";
-@import "../common/var";
-
-/* Break-points
- -------------------------- */
-@mixin res($key, $map: $--breakpoints) {
-  // 循环断点Map，如果存在则返回
-  @if map-has-key($map, $key) {
-    @media only screen and #{unquote(map-get($map, $key))} {
-      @content;
-    }
-  } @else {
-    @warn "Undefeined points: `#{$map}`";
-  }
-}
-
-/* Scrollbar
- -------------------------- */
-@mixin scroll-bar {
-  $--scrollbar-thumb-background: #b4bccc;
-  $--scrollbar-track-background: #fff;
-
-  &::-webkit-scrollbar {
-    z-index: 11;
-    width: 6px;
-
-    &:horizontal {
-      height: 6px;
-    }
-
-    &-thumb {
-      border-radius: 5px;
-      width: 6px;
-      background: $--scrollbar-thumb-background;
-    }
-
-    &-corner {
-      background: $--scrollbar-track-background;
-    }
-
-    &-track {
-      background: $--scrollbar-track-background;
-
-      &-piece {
-        background: $--scrollbar-track-background;
-        width: 6px;
-      }
-    }
-  }
-}
-
-/* Placeholder
- -------------------------- */
-@mixin placeholder {
-  &::-webkit-input-placeholder {
-    @content
-  }
-
-  &::-moz-placeholder {
-    @content
-  }
-
-  &:-ms-input-placeholder {
-    @content
-  }
-}
-
-/* BEM
- -------------------------- */
-@mixin b($block) {
-  $selector: &;
-  $B: $namespace+'-'+$block !global;
-
-  #{renderThemeClass($selector)}.#{$B} {
-    @content;
-  }
-}
-@mixin e($element) {
-  $E: $element !global;
-  $selector: &;
-  $currentSelector: "";
-  @each $unit in $element {
-    $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
-  }
-
-  @if hitAllSpecialNestRule($selector) {
-    @at-root {
-      #{renderThemeClass($selector)}#{$selector} {
-        #{$currentSelector} {
-          @content;
-        }
-      }
-    }
-  } @else {
-    @at-root {
-      #{renderThemeClass($currentSelector)}#{$currentSelector} {
-        @content;
-      }
-    }
-  }
-}
-
-@mixin m($modifier) {
-  $selector: &;
-  $currentSelector: "";
-  @each $unit in $modifier {
-    $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
-  }
-
-  @at-root {
-    #{renderThemeClass($currentSelector)}#{$currentSelector} {
-      @content;
-    }
-  }
-}
-
-@mixin configurable-m($modifier, $E-flag: false) {
-  $selector: &;
-  $interpolation: '';
-
-  @if $E-flag {
-    $interpolation: $element-separator + $E-flag;
-  }
-
-  @at-root {
-    #{renderThemeClass($selector)}#{$selector} {
-      .#{$B+$interpolation+$modifier-separator+$modifier} {
-        @content;
-      }
-    }
-  }
-}
-
-@mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B) {
-  $selector: &;
-  $modifierCombo: '';
-
-  @if $modifier {
-    $modifierCombo: $modifier-separator + $modifier;
-  }
-
-  @at-root {
-    #{renderThemeClass($selector)}#{&}#{$specSelector}.#{$block+$element-separator+$element+$modifierCombo} {
-      @content;
-    }
-  }
-}
-
-@mixin meb($modifier: false, $element: $E, $block: $B) {
-  $selector: &;
-  $modifierCombo: '';
-
-  @if $modifier {
-    $modifierCombo: $modifier-separator + $modifier;
-  }
-
-  @at-root {
-    #{renderThemeClass($selector)}#{$selector} {
-      .#{$block+$element-separator+$element+$modifierCombo} {
-        @content;
-      }
-    }
-  }
-}
-
-@mixin when($state) {
-  @at-root {
-    &.#{$state-prefix + $state} {
-      @content;
-    }
-  }
-}
-
-@mixin extend-rule($name) {
-  @extend #{'%shared-'+$name};
-}
-
-@mixin share-rule($name) {
-  $selector: &;
-  $rule-name: '%shared-'+$name;
-
-  @at-root #{renderThemeClass($selector)}#{$rule-name} {
-    @content;
-  }
-}
-
-@mixin pseudo($pseudo) {
-  $selector: &;
-  @at-root #{renderThemeClass($selector)}#{&}#{':#{$pseudo}'} {
-    @content;
-  }
-}
-
-@mixin picker-popper($background, $border, $box-shadow) {
-  &.#{$namespace}-popper[role="tooltip"] {
-    background: $background;
-    border: $border;
-    box-shadow: $box-shadow;
-
-    .#{$namespace}-popper__arrow {
-      &::before {
-        border: $border;
-      }
-    }
-
-    @each $placement,
-      $adjacency
-      in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top')
-    {
-      &[data-popper-placement^='#{$placement}'] {
-        .#{$namespace}-popper__arrow::before {
-          border-#{$placement}-color: transparent;
-          border-#{$adjacency}-color: transparent;
-        }
-      }
-    }
-  }
-}
-
-@function containThemeString($str) {
-  @if str-index($str, 'theme') {
-    @return true
-  } @else {
-    @return false
-  }
-}
-
-@function renderThemeClass($selector) {
-  @if containThemeString(inspect($selector)) {
-    @return ''
-  } @else {
-    @return '.theme-' + $--theme + ' '
-  }
-}
diff --git a/src/assets/css/themes/src/mixins/utils.scss b/src/assets/css/themes/src/mixins/utils.scss
deleted file mode 100644
index a6423266..00000000
--- a/src/assets/css/themes/src/mixins/utils.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@mixin utils-user-select($value) {
-  -moz-user-select: $value;
-  -webkit-user-select: $value;
-  -ms-user-select: $value;
-}
-
-@mixin utils-clearfix {
-  $selector: &;
-
-  @at-root {
-    #{$selector}::before,
-    #{$selector}::after {
-      display: table;
-      content: "";
-    }
-    #{$selector}::after {
-      clear: both
-    }
-  }
-}
-
-@mixin utils-vertical-center {
-  $selector: &;
-
-  @at-root {
-    #{$selector}::after {
-      display: inline-block;
-      content: "";
-      height: 100%;
-      vertical-align: middle
-    }
-  }
-}
-
-@mixin utils-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
\ No newline at end of file
diff --git a/src/assets/css/themes/src/notification.scss b/src/assets/css/themes/src/notification.scss
deleted file mode 100644
index ac8e7cc0..00000000
--- a/src/assets/css/themes/src/notification.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(notification) {
-  display: flex;
-  width: $--notification-width;
-  padding: $--notification-padding;
-  border-radius: $--notification-radius;
-  box-sizing: border-box;
-  border: 1px solid $--notification-border-color;
-  position: fixed;
-  background-color: $--color-white;
-  box-shadow: $--notification-shadow;
-  transition: opacity .3s, transform .3s, left .3s, right .3s, top 0.4s, bottom .3s;
-  overflow-wrap: anywhere;
-  overflow: hidden;
-  z-index: 9999;
-
-  &.right {
-    right: 16px;
-  }
-
-  &.left {
-    left: 16px;
-  }
-
-  @include e(group) {
-    margin-left: $--notification-group-margin-left;
-    margin-right: $--notification-group-margin-right;
-  }
-
-  @include e(title) {
-    font-weight: bold;
-    font-size: $--notification-title-font-size;
-    line-height: $--notification-icon-size;
-    color: $--notification-title-color;
-    margin: 0;
-  }
-
-  @include e(content) {
-    font-size: $--notification-content-font-size;
-    line-height: 24px;
-    margin: 6px 0 0 0;
-    color: $--notification-content-color;
-    text-align: justify;
-
-    p {
-      margin: 0;
-    }
-  }
-
-  @include e(icon) {
-    height: $--notification-icon-size;
-    width: $--notification-icon-size;
-    font-size: $--notification-icon-size;
-  }
-
-  @include e(closeBtn) {
-    position: absolute;
-    top: 18px;
-    right: 15px;
-    cursor: pointer;
-    color: $--notification-close-color;
-    font-size: $--notification-close-font-size;
-
-    &:hover {
-      color: $--notification-close-hover-color;
-    }
-  }
-
-  .#{$namespace}-icon-success {
-    color: $--notification-success-icon-color;
-  }
-
-  .#{$namespace}-icon-error {
-    color: $--notification-danger-icon-color;
-  }
-
-  .#{$namespace}-icon-info {
-    color: $--notification-info-icon-color;
-  }
-
-  .#{$namespace}-icon-warning {
-    color: $--notification-warning-icon-color;
-  }
-}
-
-.#{$namespace}-notification-fade-enter-from {
-  &.right {
-    right: 0;
-    transform: translateX(100%);
-  }
-
-  &.left {
-    left: 0;
-    transform: translateX(-100%);
-  }
-}
-
-.#{$namespace}-notification-fade-leave-to {
-  opacity: 0;
-}
diff --git a/src/assets/css/themes/src/option-group.scss b/src/assets/css/themes/src/option-group.scss
deleted file mode 100644
index d989caee..00000000
--- a/src/assets/css/themes/src/option-group.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(select-group) {
-  $gap: 20px;
-
-  margin: 0;
-  padding: 0;
-
-  @include e(wrap) {
-    position: relative;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-
-    &:not(:last-of-type) {
-      padding-bottom: 24px;
-
-      &::after {
-        content: '';
-        position: absolute;
-        display: block;
-        left: $gap;
-        right: $gap;
-        bottom: 12px;
-        height: 1px;
-        background: $--border-color-light;
-      }
-    }
-  }
-
-  @include e(title) {
-    padding-left: $gap;
-    font-size: $--select-group-font-size;
-    color: $--select-group-color;
-    line-height: $--select-group-height;
-  }
-
-  & .#{$namespace}-select-dropdown__item {
-    padding-left: $gap;
-  }
-}
diff --git a/src/assets/css/themes/src/option.scss b/src/assets/css/themes/src/option.scss
deleted file mode 100644
index ee5a383e..00000000
--- a/src/assets/css/themes/src/option.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(select-dropdown) {
-  @include e(item) {
-    font-size: $--select-font-size;
-    padding: 0 20px;
-    position: relative;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: $--select-option-color;
-    height: $--select-option-height;
-    line-height: $--select-option-height;
-    box-sizing: border-box;
-    cursor: pointer;
-
-    @include when(disabled) {
-      color: $--select-option-disabled-color;
-      cursor: not-allowed;
-
-      &:hover {
-        background-color: $--color-white;
-      }
-    }
-
-    &.hover, &:hover {
-      background-color: $--select-option-hover-background;
-    }
-
-    &.selected {
-      color: $--select-option-selected-font-color;
-      font-weight: bold;
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/overlay.scss b/src/assets/css/themes/src/overlay.scss
deleted file mode 100644
index 9d2d00db..00000000
--- a/src/assets/css/themes/src/overlay.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(overlay) {
-  #{& + '-root'} {
-      height: 0;
-  }
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 2000;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  overflow: auto;
-}
diff --git a/src/assets/css/themes/src/page-header.scss b/src/assets/css/themes/src/page-header.scss
deleted file mode 100644
index 8e246066..00000000
--- a/src/assets/css/themes/src/page-header.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(page-header) {
-  display: flex;
-  line-height: 24px;
-
-  @include e(left) {
-    display: flex;
-    cursor: pointer;
-    margin-right: 40px;
-    position: relative;
-
-    &::after {
-      content: "";
-      position: absolute;
-      width: 1px;
-      height: 16px;
-      right: -20px;
-      top: 50%;
-      transform: translateY(-50%);
-      background-color: $--border-color-base;
-    }
-
-    @include e(icon) {
-      font-size: 18px;
-      margin-right: 6px;
-      display: flex;
-      align-items: center;
-    }
-
-    @include e(title) {
-      font-size: 14px;
-      font-weight: 500;
-    }
-  }
-
-  @include e(content) {
-    font-size: 18px;
-    color: $--color-text-primary;
-  }
-}
diff --git a/src/assets/css/themes/src/pagination.scss b/src/assets/css/themes/src/pagination.scss
deleted file mode 100644
index df609b2c..00000000
--- a/src/assets/css/themes/src/pagination.scss
+++ /dev/null
@@ -1,314 +0,0 @@
-@import "mixins/mixins";
-@import "mixins/utils";
-@import "common/var";
-@import "select";
-
-$--pagination-height-extra-small: 22px !default;
-$--pagination-line-height-extra-small: $--pagination-height-extra-small !default;
-
-@include b(pagination) {
-  white-space: nowrap;
-  padding: 2px 5px;
-  color: $--pagination-font-color;
-  font-weight: bold;
-  @include utils-clearfix;
-
-  span:not([class*=suffix]),
-  button {
-    display: inline-block;
-    font-size: $--pagination-font-size;
-    min-width: $--pagination-button-width;
-    height: $--pagination-button-height;
-    line-height: $--pagination-button-height;
-    vertical-align: top;
-    box-sizing: border-box;
-  }
-
-  .#{$namespace}-input__inner {
-    text-align: center;
-    -moz-appearance: textfield;
-    line-height: normal;
-  }
-
-  // pagesize 的下拉 icon
-  .#{$namespace}-input__suffix {
-    right: 0;
-    transform: scale(.8);
-  }
-
-  .#{$namespace}-select .#{$namespace}-input {
-    width: 100px;
-    margin: 0 5px;
-
-    .#{$namespace}-input__inner {
-      padding-right: 25px;
-      border-radius: $--pagination-border-radius;
-    }
-  }
-
-  button {
-    border: none;
-    padding: 0 6px;
-    background: transparent;
-
-    &:focus {
-      outline: none;
-    }
-
-    &:hover {
-      color: $--pagination-hover-color;
-    }
-
-    &:disabled {
-      color: $--pagination-button-disabled-color;
-      background-color: $--pagination-button-disabled-background-color;
-      cursor: not-allowed;
-    }
-  }
-
-  .btn-prev,
-  .btn-next {
-    background: center center no-repeat;
-    background-size: 16px;
-    background-color: $--pagination-background-color;
-    cursor: pointer;
-    margin: 0;
-    color: $--pagination-button-color;
-
-    .#{$namespace}-icon {
-      display: block;
-      font-size: 12px;
-      font-weight: bold;
-    }
-  }
-
-  .btn-prev {
-    padding-right: 12px;
-  }
-
-  .btn-next {
-    padding-left: 12px;    
-  }
-
-  .#{$namespace}-pager li.disabled {
-    color: $--color-text-placeholder;
-    cursor: not-allowed;
-  }
-
-  @include m(small) {
-    .btn-prev,
-    .btn-next,
-    .#{$namespace}-pager li,
-    .#{$namespace}-pager li.btn-quicknext,
-    .#{$namespace}-pager li.btn-quickprev,
-    .#{$namespace}-pager li:last-child {
-      border-color: transparent;
-      font-size: $--font-size-extra-small;
-      line-height: $--pagination-line-height-extra-small;
-      height: $--pagination-height-extra-small;
-      min-width: 22px;
-    }
-
-    .arrow.disabled {
-      visibility: hidden;
-    }
-
-    .more::before,
-    li.more::before {
-      line-height: $--pagination-line-height-extra-small;
-    }
-
-    span:not([class*=suffix]),
-    button {
-      height: $--pagination-height-extra-small;
-      line-height: $--pagination-line-height-extra-small;
-    }
-
-    @include e(editor) {
-      height: $--pagination-line-height-extra-small;
-      &.#{$namespace}-input .#{$namespace}-input__inner {
-        height: $--pagination-height-extra-small;
-      }
-    }
-
-    .#{$namespace}-input__inner,
-    .#{$namespace}-input--mini {
-      height: $--pagination-height-extra-small !important;
-      line-height: $--pagination-line-height-extra-small;
-    }
-
-    .#{$namespace}-input__suffix {
-      line-height: $--pagination-line-height-extra-small;
-      .#{$namespace}-input__suffix-inner {
-        line-height: $--pagination-line-height-extra-small;
-        i.el-select__caret {
-          line-height: $--pagination-line-height-extra-small;
-        }
-      }
-    }
-  }
-
-  @include e(sizes) {
-    margin: 0 10px 0 0;
-    font-weight: normal;
-    color: $--color-text-regular;
-
-    .#{$namespace}-input .#{$namespace}-input__inner {
-      font-size: $--pagination-font-size;
-      padding-left: 8px;
-
-      &:hover {
-        border-color: $--pagination-hover-color;
-      }
-    }
-  }
-
-  @include e(total) {
-    margin-right: 10px;
-    font-weight: normal;
-    color: $--color-text-regular;
-  }
-
-  @include e(jump) {
-    margin-left: 24px;
-    font-weight: normal;
-    color: $--color-text-regular;
-
-    .#{$namespace}-input__inner {
-      padding: 0 3px;
-    }
-  }
-
-  @include e(rightwrapper) {
-    float: right;
-  }
-
-  @include e(editor) {
-    line-height: 18px;
-    padding: 0 2px;
-    height: $--pagination-button-height;
-      
-    text-align: center;
-    margin: 0 2px;
-    box-sizing: border-box;
-    border-radius: $--pagination-border-radius;
-
-    &.#{$namespace}-input {
-      width: 50px;
-    }
-
-    &.#{$namespace}-input .#{$namespace}-input__inner {
-      height: $--pagination-button-height;
-    }
-
-    .#{$namespace}-input__inner::-webkit-inner-spin-button,
-    .#{$namespace}-input__inner::-webkit-outer-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-  }
-
-  @include when(background) {
-    .btn-prev,
-    .btn-next,
-    .#{$namespace}-pager li {
-      margin: 0 5px;
-      background-color: $--color-info-lighter;
-      color: $--color-text-regular;
-      min-width: 30px;
-      border-radius: 2px;
-
-      &.disabled {
-        color: $--color-text-placeholder;
-      }
-    }
-
-    .btn-prev, .btn-next {
-      padding: 0;
-
-      &:disabled {
-        color: $--color-text-placeholder;
-      }
-    }
-
-    .#{$namespace}-pager li:not(.disabled) {
-      &:hover {
-        color: $--pagination-hover-color;
-      }
-
-      &.active {
-        background-color: $--color-primary;
-        color: $--color-white;
-      }
-    }
-
-    &.#{$namespace}-pagination--small {
-      .btn-prev,
-      .btn-next,
-      .#{$namespace}-pager li {
-        margin: 0 3px;
-        min-width: 22px;
-      }
-    }
-  }
-}
-
-@include b(pager) {
-  user-select: none;
-  list-style: none;
-  display: inline-block;
-  vertical-align: top;
-  font-size: 0;
-  padding: 0;
-  margin: 0;
-
-  .more::before {
-    line-height: 30px;
-  }
-
-  li {
-    padding: 0 4px;
-    background: $--pagination-background-color;
-    vertical-align: top;
-    display: inline-block;
-    font-size: $--pagination-font-size;
-    min-width: $--pagination-button-width;
-    height: $--pagination-button-height;
-    line-height: $--pagination-button-height;
-    cursor: pointer;
-    box-sizing: border-box;
-    text-align: center;
-    margin: 0;
-
-    &.btn-quicknext,
-    &.btn-quickprev {
-      line-height: 28px;
-      color: $--pagination-button-color;
-
-      &.disabled {
-        color: $--color-text-placeholder;
-      }
-    }
-
-    &.btn-quickprev:hover {
-      cursor: pointer;
-    }
-
-    &.btn-quicknext:hover {
-      cursor: pointer;
-    }
-
-    &.active + li {
-      border-left: 0;
-    }
-
-    &:hover {
-      color: $--pagination-hover-color;
-    }
-
-    &.active {
-      color: $--pagination-hover-color;
-      cursor: default;
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/popconfirm.scss b/src/assets/css/themes/src/popconfirm.scss
deleted file mode 100644
index bc4bb526..00000000
--- a/src/assets/css/themes/src/popconfirm.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(popconfirm) {
-  @include e(main) {
-    display: flex;
-    align-items: center;
-  }
-  @include e(icon) {
-    margin-right: 5px;
-  }
-  @include e(action) {
-    text-align: right; 
-    margin: 0
-  }
-}
diff --git a/src/assets/css/themes/src/popover.scss b/src/assets/css/themes/src/popover.scss
deleted file mode 100644
index d680572f..00000000
--- a/src/assets/css/themes/src/popover.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-@import 'mixins/mixins';
-@import 'common/var';
-@import 'popper';
-
-@include b(popover) {
-  &.#{$namespace}-popper {
-    background: $--popover-background-color;
-    min-width: 150px;
-    border-radius: 4px;
-    border: 1px solid $--popover-border-color;
-    padding: $--popover-padding;
-    z-index: $--index-popper;
-    color: $--color-text-regular;
-    line-height: 1.4;
-    text-align: justify;
-    font-size: $--popover-font-size;
-    box-shadow: $--box-shadow-light;
-    word-break: break-all;
-
-    @include m(plain) {
-      padding: $--popover-padding-large;
-    }
-
-    @include e(title) {
-      color: $--popover-title-font-color;
-      font-size: $--popover-title-font-size;
-      line-height: 1;
-      margin-bottom: 12px;
-    }
-
-    @include e(reference) {
-      &:focus:not(.focusing),
-      &:focus:hover {
-        outline-width: 0;
-      }
-    }
-
-    &:focus:active,
-    &:focus {
-      outline-width: 0;
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/popper.scss b/src/assets/css/themes/src/popper.scss
deleted file mode 100644
index 636ae97f..00000000
--- a/src/assets/css/themes/src/popper.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-@import 'mixins/mixins';
-@import 'common/var';
-
-@include b(popper) {
-  position: absolute;
-  border-radius: 4px;
-  padding: 10px;
-  z-index: 2000;
-  font-size: 12px;
-  line-height: 1.2;
-  min-width: 10px;
-  word-wrap: break-word;
-  visibility: visible;
-
-  // $arrow-selector: #{& + '__arrow'};
-  $arrow-selector: '.el-popper__arrow';
-
-  @include when(dark) {
-    color: $--color-white;
-    background: $--color-text-primary;
-    #{$arrow-selector}::before {
-      background: $--color-text-primary;
-      right: 0;
-    }
-  }
-
-  @include when(light) {
-    background: $--color-white;
-    border: 1px solid $--border-color-light;
-
-    #{$arrow-selector}::before {
-      border: 1px solid $--border-color-light;
-      background: $--color-white;
-      right: 0;
-    }
-  }
-
-  @include when(pure) {
-    padding: 0;
-  }
-
-  @include e(arrow) {
-    position: absolute;
-    width: 10px;
-    height: 10px;
-    z-index: -1;
-
-    &::before {
-      position: absolute;
-      width: 10px;
-      height: 10px;
-      z-index: -1;
-      content: ' ';
-      transform: rotate(45deg);
-      background: $--color-text-primary;
-      box-sizing: border-box;
-    }
-  }
-
-  $placements: (
-    'top': 'bottom',
-    'bottom': 'top',
-    'left': 'right',
-    'right': 'left',
-  );
-
-  @each $placement, $opposite in $placements {
-    &[data-popper-placement^='#{$placement}'] > #{$arrow-selector} {
-      #{$opposite}: -5px;
-    }
-  }
-
-  @each $placement,
-    $adjacency
-      in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top')
-  {
-    &.is-light[data-popper-placement^='#{$placement}'] {
-      #{$arrow-selector}::before {
-        border-#{$placement}-color: transparent;
-        border-#{$adjacency}-color: transparent;
-      }
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/progress.scss b/src/assets/css/themes/src/progress.scss
deleted file mode 100644
index a09d346c..00000000
--- a/src/assets/css/themes/src/progress.scss
+++ /dev/null
@@ -1,154 +0,0 @@
-@import "mixins/mixins";
-@import "mixins/utils";
-@import "common/var";
-
-@include b(progress) {
-  position: relative;
-  line-height: 1;
-  display: flex;
-  align-items: center;
-
-  @include e(text) {
-    font-size: 14px;
-    color: $--color-text-regular;
-    margin-left: 5px;
-    min-width: 50px;
-    line-height: 1;
-
-    i {
-      vertical-align: middle;
-      display: block;
-    }
-  }
-
-  @include m((circle, dashboard)) {
-    display: inline-block;
-
-    .#{$namespace}-progress__text {
-      position: absolute;
-      top: 50%;
-      left: 0;
-      width: 100%;
-      text-align: center;
-      margin: 0;
-      transform: translate(0, -50%);
-
-      i {
-        vertical-align: middle;
-        display: inline-block;
-      }
-    }
-  }
-
-
-  @include m(without-text) {
-    .#{$namespace}-progress__text {
-      display: none;
-    }
-
-    .#{$namespace}-progress-bar {
-      padding-right: 0;
-      margin-right: 0;
-      display: block;
-    }
-  }
-
-  @include m(text-inside) {
-    .#{$namespace}-progress-bar {
-      padding-right: 0;
-      margin-right: 0;
-    }
-  }
-
-  @include when(success) {
-    .#{$namespace}-progress-bar__inner {
-      background-color: $--color-success;
-    }
-
-    .#{$namespace}-progress__text {
-      color: $--color-success;
-    }
-  }
-
-  @include when(warning) {
-    .#{$namespace}-progress-bar__inner {
-      background-color: $--color-warning;
-    }
-
-    .#{$namespace}-progress__text {
-      color: $--color-warning;
-    }
-  }
-
-  @include when(exception) {
-    .#{$namespace}-progress-bar__inner {
-      background-color: $--color-danger;
-    }
-
-    .#{$namespace}-progress__text {
-      color: $--color-danger;
-    }
-  }
-
-}
-
-@include b(progress-bar) {
-  flex-grow: 1;
-  box-sizing: border-box;
-
-  @include e(outer) {
-    height: 6px;
-    border-radius: 100px;
-    background-color: $--border-color-lighter;
-    overflow: hidden;
-    position: relative;
-    vertical-align: middle;
-  }
-  @include e(inner) {
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    background-color: $--color-primary;
-    text-align: right;
-    border-radius: 100px;
-    line-height: 1;
-    white-space: nowrap;
-    transition: width 0.6s ease;
-
-    @include utils-vertical-center;
-
-    @include m(indeterminate) {
-      transform: translateZ(0);
-      animation: indeterminate 3s infinite;
-    }
-  }
-
-  @include e(innerText) {
-    display: inline-block;
-    vertical-align: middle;
-    color: $--color-white;
-    font-size: 12px;
-    margin: 0 5px;
-  }
-}
-
-@keyframes progress {
-  0% {
-    background-position: 0 0;
-  }
-
-  100% {
-    background-position: 32px 0;
-  }
-}
-
-@keyframes indeterminate {
-  0% {
-    left: -100%;
-  }
-
-  100% {
-    left: 100%;
-  }
-}
diff --git a/src/assets/css/themes/src/radio-button.scss b/src/assets/css/themes/src/radio-button.scss
deleted file mode 100644
index 4a121608..00000000
--- a/src/assets/css/themes/src/radio-button.scss
+++ /dev/null
@@ -1,113 +0,0 @@
-@import "mixins/mixins";
-@import "mixins/_button";
-@import "common/var";
-
-@include b(radio-button) {
-  position: relative;
-  display: inline-block;
-  outline: none;
-
-  @include e(inner) {
-    display: inline-block;
-    line-height: 1;
-    white-space: nowrap;
-    vertical-align: middle;
-    background: $--button-default-background-color;
-    border: $--border-base;
-    font-weight: $--button-font-weight;
-    border-left: 0;
-    color: $--button-default-font-color;
-    -webkit-appearance: none;
-    text-align: center;
-    box-sizing: border-box;
-    outline: none;
-    margin: 0;
-    position: relative;
-    cursor: pointer;
-    transition: $--all-transition;
-
-    @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, 0);
-
-    &:hover {
-      color: $--color-primary;
-    }
-
-    & [class*="#{$namespace}-icon-"] {
-      line-height: 0.9;
-
-      & + span {
-        margin-left: 5px;
-      }
-    }
-  }
-
-  &:first-child {
-    .#{$namespace}-radio-button__inner {
-      border-left: $--border-base;
-      border-radius: $--border-radius-base 0 0 $--border-radius-base;
-      box-shadow: none !important;
-    }
-  }
-
-  @include e(orig-radio) {
-    opacity: 0;
-    outline: none;
-    position: absolute;
-    z-index: -1;
-
-    &:checked {
-      & + .#{$namespace}-radio-button__inner {
-        color: $--radio-button-checked-font-color;
-        background-color: $--radio-button-checked-background-color;
-        border-color: $--radio-button-checked-border-color;
-        box-shadow: -1px 0 0 0 $--radio-button-checked-border-color;
-      }
-    }
-
-    &:disabled {
-      & + .#{$namespace}-radio-button__inner {
-        color: $--button-disabled-font-color;
-        cursor: not-allowed;
-        background-image: none;
-        background-color: $--button-disabled-background-color;
-        border-color: $--button-disabled-border-color;
-        box-shadow: none;
-      }
-      &:checked + .#{$namespace}-radio-button__inner {
-        background-color: $--radio-button-disabled-checked-fill;
-      }
-    }
-  }
-
-  &:last-child {
-    .#{$namespace}-radio-button__inner {
-      border-radius: 0 $--border-radius-base $--border-radius-base 0;
-    }
-  }
-
-  &:first-child:last-child {
-    .#{$namespace}-radio-button__inner {
-      border-radius: $--border-radius-base;
-    }
-  }
-
-  @include m(medium) {
-    & .#{$namespace}-radio-button__inner {
-      @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, 0);
-    }
-  }
-  @include m(small) {
-    & .#{$namespace}-radio-button__inner {
-      @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, 0);
-    }
-  }
-  @include m(mini) {
-    & .#{$namespace}-radio-button__inner {
-      @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, 0);
-    }
-  }
-
-  &:focus:not(.is-focus):not(:active):not(.is-disabled){ /*获得焦点时 样式提醒*/
-    box-shadow: 0 0 2px 2px $--radio-button-checked-border-color;
-  }
-}
diff --git a/src/assets/css/themes/src/radio-group.scss b/src/assets/css/themes/src/radio-group.scss
deleted file mode 100644
index 2ee95a79..00000000
--- a/src/assets/css/themes/src/radio-group.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(radio-group) {
-  display: inline-block;
-  line-height: 1;
-  vertical-align: middle;
-  font-size: 0;
-}
diff --git a/src/assets/css/themes/src/radio.scss b/src/assets/css/themes/src/radio.scss
deleted file mode 100644
index 9c569026..00000000
--- a/src/assets/css/themes/src/radio.scss
+++ /dev/null
@@ -1,199 +0,0 @@
-@import "mixins/mixins";
-@import "mixins/utils";
-@import 'mixins/button';
-@import "common/var";
-
-@include b(radio) {
-  color: $--radio-font-color;
-  font-weight: $--radio-font-weight;
-  line-height: 1;
-  position: relative;
-  cursor: pointer;
-  display: inline-block;
-  white-space: nowrap;
-  outline: none;
-  font-size: $--font-size-base;
-  margin-right: 30px;
-  @include utils-user-select(none);
-
-  @include when(bordered) {
-    padding: $--radio-bordered-padding;
-    border-radius: $--border-radius-base;
-    border: $--border-base;
-    box-sizing: border-box;
-    height: $--radio-bordered-height;
-
-    &.is-checked {
-      border-color: $--color-primary;
-    }
-
-    &.is-disabled {
-      cursor: not-allowed;
-      border-color: $--border-color-lighter;
-    }
-
-    & + .#{$namespace}-radio.is-bordered {
-      margin-left: 10px;
-    }
-  }
-
-  @include m(medium) {
-    &.is-bordered {
-      padding: $--radio-bordered-medium-padding;
-      border-radius: $--button-medium-border-radius;
-      height: $--radio-bordered-medium-height;
-      .#{$namespace}-radio__label {
-        font-size: $--button-medium-font-size;
-      }
-      .#{$namespace}-radio__inner {
-        height: $--radio-bordered-medium-input-height;
-        width: $--radio-bordered-medium-input-width;
-      }
-    }
-  }
-  @include m(small) {
-    &.is-bordered {
-      padding: $--radio-bordered-small-padding;
-      border-radius: $--button-small-border-radius;
-      height: $--radio-bordered-small-height;
-      .#{$namespace}-radio__label {
-        font-size: $--button-small-font-size;
-      }
-      .#{$namespace}-radio__inner {
-        height: $--radio-bordered-small-input-height;
-        width: $--radio-bordered-small-input-width;
-      }
-    }
-  }
-  @include m(mini) {
-    &.is-bordered {
-      padding: $--radio-bordered-mini-padding;
-      border-radius: $--button-mini-border-radius;
-      height: $--radio-bordered-mini-height;
-      .#{$namespace}-radio__label {
-        font-size: $--button-mini-font-size;
-      }
-      .#{$namespace}-radio__inner {
-        height: $--radio-bordered-mini-input-height;
-        width: $--radio-bordered-mini-input-width;
-      }
-    }
-  }
-
-  &:last-child {
-    margin-right: 0;
-  }
-
-  @include e(input) {
-    white-space: nowrap;
-    cursor: pointer;
-    outline: none;
-    display: inline-block;
-    line-height: 1;
-    position: relative;
-    vertical-align: middle;
-
-    @include when(disabled) {
-      .#{$namespace}-radio__inner {
-        background-color: $--radio-disabled-input-fill;
-        border-color: $--radio-disabled-input-border-color;
-        cursor: not-allowed;
-
-        &::after {
-          cursor: not-allowed;
-          background-color: $--radio-disabled-icon-color;
-        }
-
-        & + .#{$namespace}-radio__label {
-          cursor: not-allowed;
-        }
-      }
-      &.is-checked {
-        .#{$namespace}-radio__inner {
-          background-color: $--radio-disabled-checked-input-fill;
-          border-color: $--radio-disabled-checked-input-border-color;
-
-          &::after {
-            background-color: $--radio-disabled-checked-icon-color;
-          }
-        }
-      }
-      & + span.#{$namespace}-radio__label {
-        color: $--color-text-placeholder;
-        cursor: not-allowed;
-      }
-    }
-
-    @include when(checked) {
-      .#{$namespace}-radio__inner {
-        border-color: $--radio-checked-input-border-color;
-        background: $--radio-checked-icon-color;
-
-        &::after {
-          transform: translate(-50%, -50%) scale(1);
-        }
-      }
-
-      & + .#{$namespace}-radio__label {
-        color: $--radio-checked-font-color;
-      }
-    }
-
-    @include when(focus) {
-      .#{$namespace}-radio__inner {
-        border-color: $--radio-input-border-color-hover;
-      }
-    }
-  }
-  @include e(inner) {
-    border: $--radio-input-border;
-    border-radius: $--radio-input-border-radius;
-    width: $--radio-input-width;
-    height: $--radio-input-height;
-    background-color: $--radio-input-background-color;
-    position: relative;
-    cursor: pointer;
-    display: inline-block;
-    box-sizing: border-box;
-
-    &:hover {
-      border-color: $--radio-input-border-color-hover;
-    }
-
-    &::after {
-      width: 4px;
-      height: 4px;
-      border-radius: $--radio-input-border-radius;
-      background-color: $--color-white;
-      content: "";
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%) scale(0);
-      transition: transform .15s ease-in;
-    }
-  }
-
-  @include e(original) {
-    opacity: 0;
-    outline: none;
-    position: absolute;
-    z-index: -1;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: 0;
-  }
-
-  &:focus:not(.is-focus):not(:active):not(.is-disabled) { /*获得焦点时 样式提醒*/
-    .#{$namespace}-radio__inner {
-      box-shadow: 0 0 2px 2px $--radio-input-border-color-hover;
-    }
-  }
-
-  @include e(label) {
-    font-size: $--radio-font-size;
-    padding-left: 10px;
-  }
-}
diff --git a/src/assets/css/themes/src/rate.scss b/src/assets/css/themes/src/rate.scss
deleted file mode 100644
index 99d7d045..00000000
--- a/src/assets/css/themes/src/rate.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(rate) {
-  height: $--rate-height;
-  line-height: 1;
-
-  &:focus, &:active {
-    outline-width: 0;
-  }
-
-  @include e(item) {
-    display: inline-block;
-    position: relative;
-    font-size: 0;
-    vertical-align: middle;
-  }
-
-  @include e(icon) {
-    position: relative;
-    display: inline-block;
-    font-size: $--rate-icon-size;
-    margin-right: $--rate-icon-margin;
-    color: $--rate-icon-color;
-    transition: .3s;
-    &.hover {
-      transform: scale(1.15);
-    }
-
-    .path2 {
-      position: absolute;
-      left: 0;
-      top: 0;
-    }
-  }
-
-  @include e(decimal) {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: inline-block;
-    overflow: hidden;
-  }
-
-  @include e(text) {
-    font-size: $--rate-font-size;
-    vertical-align: middle;
-  }
-}
diff --git a/src/assets/css/themes/src/reset.scss b/src/assets/css/themes/src/reset.scss
deleted file mode 100644
index a13e0deb..00000000
--- a/src/assets/css/themes/src/reset.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-@import 'common/var';
-
-body {
-  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
-  font-weight: 400;
-  font-size: $--font-size-base;
-  color: $--color-black;
-  -webkit-font-smoothing: antialiased;
-}
-
-a {
-  color: $--color-primary;
-  text-decoration: none;
-
-  &:hover,
-  &:focus {
-    color: mix($--color-white, $--color-primary, $--button-hover-tint-percent);
-  }
-
-  &:active {
-    color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
-  }
-}
-
-h1, h2, h3, h4, h5, h6 {
-  color: $--color-text-regular;
-  font-weight: inherit;
-
-  &:first-child {
-    margin-top: 0;
-  }
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-h1 {
-  font-size: #{$--font-size-base + 6px};
-}
-
-h2 {
-  font-size: #{$--font-size-base + 4px};
-}
-
-h3 {
-  font-size: #{$--font-size-base + 2px};
-}
-
-h4, h5, h6, p {
-  font-size: inherit;
-}
-
-p {
-  line-height: 1.8;
-
-  &:first-child {
-    margin-top: 0;
-  }
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-sup, sub {
-  font-size: #{$--font-size-base - 1px};
-}
-
-small {
-  font-size: #{$--font-size-base - 2px};
-}
-
-hr {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  border: 0;
-  border-top: 1px solid #eeeeee;
-}
diff --git a/src/assets/css/themes/src/result.scss b/src/assets/css/themes/src/result.scss
deleted file mode 100644
index 2d69085b..00000000
--- a/src/assets/css/themes/src/result.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-@import 'mixins/mixins';
-@import 'common/var';
-
-@include b(result) {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  text-align: center;
-  box-sizing: border-box;
-  padding: $--result-padding;
-
-  @include e(icon) {
-    svg {
-      width: $--result-icon-font-size;
-      height: $--result-icon-font-size;
-    }
-  }
-
-  @include e(title) {
-    margin-top: $--result-title-margin-top;
-
-    p {
-      margin: 0;
-      font-size: $--result-title-font-size;
-      color: $--color-text-primary;
-      line-height: 1.3;
-    }
-  }
-
-  @include e(subtitle) {
-    margin-top: $--result-subtitle-margin-top;
-
-    p {
-      margin: 0;
-      font-size: $--font-size-base;
-      color: $--color-text-regular;
-      line-height: 1.3;
-    }
-  }
-
-  @include e(extra) {
-    margin-top: $--result-extra-margin-top;
-  }
-
-  .icon-success {
-    fill: $--result-success-color;
-  }
-
-  .icon-error {
-    fill: $--result-danger-color;
-  }
-
-  .icon-info {
-    fill: $--result-info-color;
-  }
-
-  .icon-warning {
-    fill: $--result-warning-color;
-  }
-}
diff --git a/src/assets/css/themes/src/row.scss b/src/assets/css/themes/src/row.scss
deleted file mode 100644
index a25763b5..00000000
--- a/src/assets/css/themes/src/row.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-@import "common/var";
-@import "mixins/mixins";
-@import "mixins/utils";
-
-@include b(row) {
-  display: flex;
-  flex-wrap: wrap;
-  position: relative;
-  box-sizing: border-box;
-  @include utils-clearfix;
-
-  @include m(flex) {
-    display: flex;
-    &:before,
-    &:after {
-      display: none;
-    }
-
-    @include when(justify-center) {
-      justify-content: center;
-    }
-    @include when(justify-end) {
-      justify-content: flex-end;
-    }
-    @include when(justify-space-between) {
-      justify-content: space-between;
-    }
-    @include when(justify-space-around) {
-      justify-content: space-around;
-    }
-
-    @include when(align-middle) {
-      align-items: center;
-    }
-    @include when(align-bottom) {
-      align-items: flex-end;
-    }
-  }
-
-}
-
diff --git a/src/assets/css/themes/src/scrollbar.scss b/src/assets/css/themes/src/scrollbar.scss
deleted file mode 100644
index f451414e..00000000
--- a/src/assets/css/themes/src/scrollbar.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(scrollbar) {
-  overflow: hidden;
-  position: relative;
-  height: 100%;
-
-  @include e(wrap) {
-    overflow: auto;
-    height: 100%;
-
-    @include m(hidden-default) {
-      scrollbar-width: none;
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-  }
-
-  @include e(thumb) {
-    position: relative;
-    display: block;
-    width: 0;
-    height: 0;
-    cursor: pointer;
-    border-radius: inherit;
-    background-color: $--scrollbar-background-color;
-    transition: .3s background-color;
-
-    &:hover {
-      background-color: $--scrollbar-hover-background-color;
-    }
-  }
-
-  @include e(bar) {
-    position: absolute;
-    right: 2px;
-    bottom: 2px;
-    z-index: 1;
-    border-radius: 4px;
-
-    @include when(vertical) {
-      width: 6px;
-      top: 2px;
-
-      > div {
-        width: 100%;
-      }
-    }
-
-    @include when(horizontal) {
-      height: 6px;
-      left: 2px;
-
-      > div {
-        height: 100%;
-      }
-    }
-  }
-}
-
-.#{$namespace}-scrollbar-fade-enter-active {
-  transition: opacity 340ms ease-out;
-}
-
-.#{$namespace}-scrollbar-fade-leave-active {
-  transition: opacity 120ms ease-out;
-}
-
-.#{$namespace}-scrollbar-fade-enter-from,
-.#{$namespace}-scrollbar-fade-leave-active {
-  opacity: 0;
-}
diff --git a/src/assets/css/themes/src/select-dropdown.scss b/src/assets/css/themes/src/select-dropdown.scss
deleted file mode 100644
index 0b4f3504..00000000
--- a/src/assets/css/themes/src/select-dropdown.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-@import "./popper";
-
-@include b(select-dropdown) {
-  z-index: #{$--index-top + 1};
-  border-radius: $--border-radius-base;
-  box-sizing: border-box;
-
-  @include when(multiple) {
-    & .#{$namespace}-select-dropdown__item.selected {
-      color: $--select-option-selected-font-color;
-      background-color: $--select-dropdown-background;
-
-      &.hover {
-        background-color: $--select-option-hover-background;
-      }
-
-      &::after {
-        position: absolute;
-        right: 20px;
-        font-family: 'element-icons';
-        content: "\e6da";
-        font-size: 12px;
-        font-weight: bold;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-      }
-    }
-  }
-
-  .#{$namespace}-scrollbar.is-empty .#{$namespace}-select-dropdown__list{
-    padding: 0;
-  }
-}
-
-@include b(select-dropdown__empty) {
-  padding: $--select-dropdown-empty-padding;
-  margin: 0;
-  text-align: center;
-  color: $--select-dropdown-empty-color;
-  font-size: $--select-font-size;
-}
-
-@include b(select-dropdown__wrap) {
-  max-height: $--select-dropdown-max-height;
-}
-
-@include b(select-dropdown__list) {
-  list-style: none;
-  padding: $--select-dropdown-padding;
-  margin: 0;
-  box-sizing: border-box;
-}
diff --git a/src/assets/css/themes/src/select.scss b/src/assets/css/themes/src/select.scss
deleted file mode 100644
index e8a8fc5f..00000000
--- a/src/assets/css/themes/src/select.scss
+++ /dev/null
@@ -1,174 +0,0 @@
-@import 'mixins/mixins';
-@import 'mixins/utils';
-@import 'common/var';
-@import 'select-dropdown';
-@import 'input';
-@import 'tag';
-@import 'option';
-@import 'option-group';
-@import 'scrollbar';
-
-@include b(select) {
-  display: inline-block;
-  position: relative;
-  line-height: $--input-height;
-
-  @include e(popper) {
-    @include picker-popper(
-      $--select-dropdown-background,
-      $--select-dropdown-border,
-      $--select-dropdown-shadow,
-    );
-  }
-
-  @include m(mini) {
-    line-height: $--input-mini-height;
-  }
-
-  @include m(small) {
-    line-height: $--input-small-height;
-  }
-
-  @include m(medium) {
-    line-height: $--input-medium-height;
-  }
-
-  .#{$namespace}-select__tags > span {
-    display: inline-block;
-  }
-
-  &:hover {
-    .#{$namespace}-input__inner {
-      border-color: $--select-border-color-hover;
-    }
-  }
-
-  .#{$namespace}-select__tags-text {
-    text-overflow: ellipsis;
-    display: inline-block;
-    overflow-x: hidden;
-    vertical-align: bottom;
-  }
-
-  .#{$namespace}-input__inner {
-    cursor: pointer;
-    padding-right: 35px;
-    display: block;
-
-    &:focus {
-      border-color: $--select-input-focus-border-color;
-    }
-  }
-
-  .#{$namespace}-input {
-    display: block;
-
-    & .#{$namespace}-select__caret {
-      color: $--select-input-color;
-      font-size: $--select-input-font-size;
-      transition: transform 0.3s;
-      transform: rotateZ(180deg);
-      cursor: pointer;
-
-      @include when(reverse) {
-        transform: rotateZ(0deg);
-      }
-
-      @include when(show-close) {
-        font-size: $--select-font-size;
-        text-align: center;
-        transform: rotateZ(180deg);
-        border-radius: $--border-radius-circle;
-        color: $--select-input-color;
-        transition: $--color-transition-base;
-
-        &:hover {
-          color: $--select-close-hover-color;
-        }
-      }
-    }
-
-    &.is-disabled {
-      & .#{$namespace}-input__inner {
-        cursor: not-allowed;
-
-        &:hover {
-          border-color: $--select-disabled-border;
-        }
-      }
-    }
-
-    &.is-focus .#{$namespace}-input__inner {
-      border-color: $--select-input-focus-border-color;
-    }
-  }
-
-  @include e(input) {
-    border: none;
-    outline: none;
-    padding: 0;
-    margin-left: 15px;
-    color: $--select-multiple-input-color;
-    font-size: $--select-font-size;
-    appearance: none;
-    height: 28px;
-    background-color: transparent;
-    @include when(mini) {
-      height: 14px;
-    }
-  }
-
-  @include e(close) {
-    cursor: pointer;
-    position: absolute;
-    top: 8px;
-    z-index: $--index-top;
-    right: 25px;
-    color: $--select-input-color;
-    line-height: 18px;
-    font-size: $--select-input-font-size;
-
-    &:hover {
-      color: $--select-close-hover-color;
-    }
-  }
-
-  @include e(tags) {
-    position: absolute;
-    line-height: normal;
-    white-space: normal;
-    z-index: $--index-normal;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-  }
-
-  .#{$namespace}-tag__close {
-    margin-top: -2px;
-  }
-
-  .#{$namespace}-select__tags .#{$namespace}-tag {
-    box-sizing: border-box;
-    border-color: transparent;
-    margin: 2px 0 2px 6px;
-    background-color: #f0f2f5;
-
-    .#{$namespace}-icon-close {
-      background-color: $--color-text-placeholder;
-      right: -7px;
-      top: 0;
-      color: $--color-white;
-
-      &:hover {
-        background-color: $--color-text-secondary;
-      }
-
-      &::before {
-        display: block;
-        transform: translate(0, 0.5px);
-      }
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/skeleton-item.scss b/src/assets/css/themes/src/skeleton-item.scss
deleted file mode 100644
index 687c3c4e..00000000
--- a/src/assets/css/themes/src/skeleton-item.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-@import 'mixins/mixins';
-@import 'common/var';
-
-@mixin circle-size($size) {
-  width: $size;
-  height: $size;
-  line-height: $size;
-}
-
-@include b(skeleton) {
-  @include e(item) {
-    background: $--skeleton-color;
-    display: inline-block;
-    height: 16px;
-    border-radius: $--border-radius-base;
-    width: 100%;
-  }
-
-  @include e(circle) {
-    border-radius: 50%;
-    @include circle-size($--avatar-medium-size);
-
-    @include m(lg) {
-      @include circle-size($--avatar-large-size);
-    }
-
-    @include m(md) {
-      @include circle-size($--avatar-small-size);
-    }
-  }
-
-  @include e(button) {
-    height: 40px;
-    width: 64px;
-    border-radius: 4px;
-  }
-
-  @include e(p) {
-    width: 100%;
-    @include when(last) {
-      width: 61%;
-    }
-
-    @include when(first) {
-      width: 33%;
-    }
-  }
-
-  @include e(text) {
-    width: 100%;
-    height: $--font-size-small;
-  }
-
-  @include e(caption) {
-    height: $--font-size-extra-small;
-  }
-
-  @include e(h1) {
-    height: $--font-size-extra-large;
-  }
-
-  @include e(h3) {
-    height: $--font-size-large;
-  }
-
-  @include e(h5) {
-    height: $--font-size-medium;
-  }
-
-  @include e(image) {
-    width: unset;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0;
-
-    svg {
-      fill: $--svg-monochrome-grey;
-      width: 22%;
-      height: 22%;
-    }
-  }
-
-}
diff --git a/src/assets/css/themes/src/skeleton.scss b/src/assets/css/themes/src/skeleton.scss
deleted file mode 100644
index 5bbfa08f..00000000
--- a/src/assets/css/themes/src/skeleton.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-@import 'mixins/mixins';
-@import 'common/var';
-@import "./skeleton-item.scss";
-
-@mixin skeleton-color() {
-  background: linear-gradient(
-    90deg,
-    $--skeleton-color 25%,
-    $--skeleton-to-color 37%,
-    $--skeleton-color 63%
-  );
-  background-size: 400% 100%;
-  animation: #{$namespace}-skeleton-loading 1.4s ease infinite;
-}
-
-@keyframes #{$namespace}-skeleton-loading {
-  0% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0 50%;
-  }
-}
-
-@include b(skeleton) {
-  width: 100%;
-  @each $unit in (first-line, paragraph) {
-    @include e($unit) {
-      height: 16px;
-      margin-top: 16px;
-      background: $--skeleton-color;
-    }
-  }
-
-  @include when(animated) {
-    .#{$namespace}-skeleton__item {
-      @include skeleton-color();
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/slider.scss b/src/assets/css/themes/src/slider.scss
deleted file mode 100644
index fe0895ce..00000000
--- a/src/assets/css/themes/src/slider.scss
+++ /dev/null
@@ -1,249 +0,0 @@
-@import "mixins/mixins";
-@import "mixins/utils";
-@import "input-number";
-@import "tooltip";
-@import "common/var";
-
-@include b(slider) {
-
-  @include utils-clearfix;
-
-  @include e(runway) {
-    width: 100%;
-    height: $--slider-height;
-    margin: $--slider-margin;
-    background-color: $--slider-runway-background-color;
-    border-radius: $--slider-border-radius;
-    position: relative;
-    cursor: pointer;
-    vertical-align: middle;
-
-    &.show-input {
-      margin-right: 160px;
-      width: auto;
-    }
-
-    &.disabled {
-      cursor: default;
-
-      .#{$namespace}-slider__bar {
-        background-color: $--slider-disable-color;
-      }
-
-      .#{$namespace}-slider__button {
-        border-color: $--slider-disable-color;
-      }
-
-      .#{$namespace}-slider__button-wrapper {
-        &:hover,
-        &.hover {
-          cursor: not-allowed;
-        }
-
-        &.dragging {
-          cursor: not-allowed;
-        }
-      }
-
-      .#{$namespace}-slider__button {
-        &:hover,
-        &.hover,
-        &.dragging {
-          transform: scale(1);
-        }
-
-        &:hover,
-        &.hover {
-          cursor: not-allowed;
-        }
-
-        &.dragging {
-          cursor: not-allowed;
-        }
-      }
-    }
-  }
-
-  @include e(input) {
-    float: right;
-    margin-top: 3px;
-    width: 130px;
-
-    &.#{$namespace}-input-number--mini {
-      margin-top: 5px;
-    }
-
-    &.#{$namespace}-input-number--medium {
-      margin-top: 0;
-    }
-
-    &.#{$namespace}-input-number--large {
-      margin-top: -2px;
-    }
-  }
-
-  @include e(bar) {
-    height: $--slider-height;
-    background-color: $--slider-main-background-color;
-    border-top-left-radius: $--slider-border-radius;
-    border-bottom-left-radius: $--slider-border-radius;
-    position: absolute;
-  }
-
-  @include e(button-wrapper) {
-    height: $--slider-button-wrapper-size;
-    width: $--slider-button-wrapper-size;
-    position: absolute;
-    z-index: 1;
-    top: $--slider-button-wrapper-offset;
-    transform: translateX(-50%);
-    background-color: transparent;
-    text-align: center;
-    user-select: none;
-    line-height: normal;
-    outline: none;
-    @include utils-vertical-center;
-
-    &:hover,
-    &.hover {
-      cursor: grab;
-    }
-
-    &.dragging {
-      cursor: grabbing;
-    }
-  }
-
-  @include e(button) {
-    display: inline-block;
-    width: $--slider-button-size;
-    height: $--slider-button-size;
-    vertical-align: middle;
-    border: solid 2px $--slider-main-background-color;
-    background-color: $--color-white;
-    border-radius: 50%;
-    box-sizing: border-box;
-    transition: .2s;
-    user-select: none;
-
-    &:hover,
-    &.hover,
-    &.dragging {
-      transform: scale(1.2);
-    }
-
-    &:hover,
-    &.hover {
-      cursor: grab;
-    }
-
-    &.dragging {
-      cursor: grabbing;
-    }
-  }
-
-  @include e(stop) {
-    position: absolute;
-    height: $--slider-height;
-    width: $--slider-height;
-    border-radius: $--border-radius-circle;
-    background-color: $--slider-stop-background-color;
-    transform: translateX(-50%);
-  }
-
-  @include e(marks) {
-    top: 0;
-    left: 12px;
-    width: 18px;
-    height: 100%;
-
-    @include e(marks-text) {
-      position: absolute;
-      transform: translateX(-50%);
-      font-size: 14px;
-      color: $--color-info;
-      margin-top: 15px;
-    }
-  }
-
-  @include when(vertical) {
-    position: relative;
-    .#{$namespace}-slider__runway {
-      width: $--slider-height;
-      height: 100%;
-      margin: 0 16px;
-    }
-    .#{$namespace}-slider__bar {
-      width: $--slider-height;
-      height: auto;
-      border-radius: 0 0 3px 3px;
-    }
-    .#{$namespace}-slider__button-wrapper {
-      top: auto;
-      left: $--slider-button-wrapper-offset;
-      transform: translateY(50%);
-    }
-    .#{$namespace}-slider__stop {
-      transform: translateY(50%);
-    }
-    &.#{$namespace}-slider--with-input {
-      padding-bottom: #{$--input-medium-height + 22px};
-      .#{$namespace}-slider__input {
-        overflow: visible;
-        float: none;
-        position: absolute;
-        bottom: 22px;
-        width: 36px;
-        margin-top: 15px;
-        .#{$namespace}-input__inner {
-          text-align: center;
-          padding-left: 5px;
-          padding-right: 5px;
-        }
-        .#{$namespace}-input-number__decrease,
-        .#{$namespace}-input-number__increase
-        {
-          top: $--input-small-height;
-          margin-top: -1px;
-          border: $--input-border;
-          line-height: 20px;
-          box-sizing: border-box;
-          transition: $--border-transition-base;
-        }
-        .#{$namespace}-input-number__decrease {
-          width: 18px;
-          right: 18px;
-          border-bottom-left-radius: $--input-border-radius;
-        }
-        .#{$namespace}-input-number__increase {
-          width: 19px;
-          border-bottom-right-radius: $--input-border-radius;
-          & ~ .#{$namespace}-input .#{$namespace}-input__inner {
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
-          }
-        }
-        &:hover {
-          .#{$namespace}-input-number__decrease,
-          .#{$namespace}-input-number__increase
-          {
-            border-color: $--input-hover-border;
-          }
-        }
-        &:active {
-          .#{$namespace}-input-number__decrease,
-          .#{$namespace}-input-number__increase
-          {
-            border-color: $--input-focus-border;
-          }
-        }
-      }
-    }
-
-    @include e(marks-text) {
-      margin-top: 0;
-      left: 15px;
-      transform: translateY(50%);
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/space.scss b/src/assets/css/themes/src/space.scss
deleted file mode 100644
index a9f6352b..00000000
--- a/src/assets/css/themes/src/space.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(space) {
-  display: inline-flex;
-
-  @include m(vertical) {
-    flex-direction: column;
-  }
-}
\ No newline at end of file
diff --git a/src/assets/css/themes/src/spinner.scss b/src/assets/css/themes/src/spinner.scss
deleted file mode 100644
index b76ffc09..00000000
--- a/src/assets/css/themes/src/spinner.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-@import "mixins/mixins";
-
-@include b(time-spinner) {
-  width: 100%;
-  white-space: nowrap;
-}
-
-@include b(spinner) {
-  display: inline-block;
-  vertical-align: middle;
-}
-@include b(spinner-inner) {
-  animation: rotate 2s linear infinite;
-  width: 50px;
-  height: 50px;
-
-  & .path {
-    stroke: #ececec;
-    stroke-linecap: round;
-    animation: dash 1.5s ease-in-out infinite;
-  }
-
-}
-
-@keyframes rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes dash {
-  0% {
-    stroke-dasharray: 1, 150;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -35;
-  }
-  100% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -124;
-  }
-}
diff --git a/src/assets/css/themes/src/step.scss b/src/assets/css/themes/src/step.scss
deleted file mode 100644
index 08bc1bc2..00000000
--- a/src/assets/css/themes/src/step.scss
+++ /dev/null
@@ -1,317 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(step) {
-  position: relative;
-  flex-shrink: 1;
-
-  @include pseudo(last-of-type) {
-    @include e(line) {
-      display: none;
-    }
-
-    // 只有未设置 space 的情况下才自适应宽度
-    @include when(flex) {
-      flex-basis: auto !important;
-      flex-shrink: 0;
-      flex-grow: 0;
-    }
-
-    @include e((main, description)) {
-      padding-right: 0;
-    }
-  }
-
-  @include e(head) {
-    position: relative;
-    width: 100%;
-
-    @include when(process) {
-      color: $--color-text-primary;
-      border-color: $--color-text-primary;
-    }
-
-    @include when(wait) {
-      color: $--color-text-placeholder;
-      border-color: $--color-text-placeholder;
-    }
-
-    @include when(success) {
-      color: $--color-success;
-      border-color: $--color-success;
-    }
-
-    @include when(error) {
-      color: $--color-danger;
-      border-color: $--color-danger;
-    }
-
-    @include when(finish) {
-      color: $--color-primary;
-      border-color: $--color-primary;
-    }
-  }
-
-  @include e(icon) {
-    position: relative;
-    z-index: 1;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    width: 24px;
-    height: 24px;
-    font-size: 14px;
-    box-sizing: border-box;
-    background: $--color-white;
-    transition: .15s ease-out;
-
-    @include when(text) {
-      border-radius: 50%;
-      border: 2px solid;
-      border-color: inherit;
-    }
-
-    @include when(icon) {
-      width: 40px;
-    }
-  }
-
-  @include e(icon-inner) {
-    display: inline-block;
-    user-select: none;
-    text-align: center;
-    font-weight: bold;
-    line-height: 1;
-    color: inherit;
-
-    &[class*=#{$namespace}-icon]:not(.is-status) {
-      font-size: 25px;
-      font-weight: normal;
-    }
-
-    // 组件自身表示状态的图标
-    @include when(status) {
-      transform: translateY(1px);
-    }
-  }
-
-  @include e(line) {
-    position: absolute;
-    border-color: inherit;
-    background-color: $--color-text-placeholder;
-  }
-
-  @include e(line-inner) {
-    display: block;
-    border-width: 1px;
-    border-style: solid;
-    border-color: inherit;
-    transition: .15s ease-out;
-    box-sizing: border-box;
-    width: 0;
-    height: 0;
-  }
-
-  @include e(main) {
-    white-space: normal;
-    text-align: left;
-  }
-
-  @include e(title) {
-    font-size: 16px;
-    line-height: 38px;
-
-    @include when(process) {
-      font-weight: bold;
-      color: $--color-text-primary;
-    }
-
-    @include when(wait) {
-      color: $--color-text-placeholder;
-    }
-
-    @include when(success) {
-      color: $--color-success;
-    }
-
-    @include when(error) {
-      color: $--color-danger;
-    }
-
-    @include when(finish) {
-      color: $--color-primary;
-    }
-  }
-
-  @include e(description) {
-    padding-right: 10%;
-    margin-top: -5px;
-    font-size: 12px;
-    line-height: 20px;
-    font-weight: normal;
-
-    @include when(process) {
-      color: $--color-text-primary;
-    }
-
-    @include when(wait) {
-      color: $--color-text-placeholder;
-    }
-
-    @include when(success) {
-      color: $--color-success;
-    }
-
-    @include when(error) {
-      color: $--color-danger;
-    }
-
-    @include when(finish) {
-      color: $--color-primary;
-    }
-  }
-
-  @include when(horizontal) {
-    display: inline-block;
-
-    @include e(line) {
-      height: 2px;
-      top: 11px;
-      left: 0;
-      right: 0;
-    }
-  }
-
-  @include when(vertical) {
-    display: flex;
-
-    @include e(head) {
-      flex-grow: 0;
-      width: 24px;
-    }
-
-    @include e(main) {
-      padding-left: 10px;
-      flex-grow: 1;
-    }
-
-    @include e(title) {
-      line-height: 24px;
-      padding-bottom: 8px;
-    }
-
-    @include e(line) {
-      width: 2px;
-      top: 0;
-      bottom: 0;
-      left: 11px;
-    }
-
-    @include e(icon) {
-      @include when(icon) {
-        width: 24px;
-      }
-    }
-  }
-
-  @include when(center) {
-
-    @include e(head) {
-      text-align: center;
-    }
-
-    @include e(main) {
-      text-align: center;
-    }
-
-    @include e(description) {
-      padding-left: 20%;
-      padding-right: 20%;
-    }
-
-    @include e(line) {
-      left: 50%;
-      right: -50%;
-    }
-  }
-
-  @include when(simple) {
-    display: flex;
-    align-items: center;
-
-    @include e(head) {
-      width: auto;
-      font-size: 0;
-      padding-right: 10px;
-    }
-
-    @include e(icon) {
-      background: transparent;
-      width: 16px;
-      height: 16px;
-      font-size: 12px;
-    }
-
-    @include e(icon-inner) {
-      &[class*=#{$namespace}-icon]:not(.is-status) {
-        font-size: 18px;
-      }
-
-      &.is-status {
-        transform: scale(.8) translateY(1px);
-      }
-    }
-
-    @include e(main) {
-      position: relative;
-      display: flex;
-      align-items: stretch;
-      flex-grow: 1;
-    }
-
-    @include e(title) {
-      font-size: 16px;
-      line-height: 20px;
-    }
-
-    @include pseudo('not(:last-of-type)') {
-      @include e(title) {
-        max-width: 50%;
-        word-break: break-all;
-      }
-    }
-
-    @include e(arrow) {
-      flex-grow: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      &::before,
-      &::after {
-        content: '';
-        display: inline-block;
-        position: absolute;
-        height: 15px;
-        width: 1px;
-        background: $--color-text-placeholder;
-      }
-
-      &::before {
-        transform: rotate(-45deg) translateY(-4px);
-        transform-origin: 0 0;
-      }
-
-      &::after {
-        transform: rotate(45deg) translateY(4px);
-        transform-origin: 100% 100%;
-      }
-    }
-
-    @include pseudo(last-of-type) {
-      @include e(arrow) {
-        display: none;
-      }
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/steps.scss b/src/assets/css/themes/src/steps.scss
deleted file mode 100644
index aa3464ee..00000000
--- a/src/assets/css/themes/src/steps.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@import "mixins/mixins";
-
-@include b(steps) {
-  display: flex;
-
-  @include m(simple) {
-    padding: 13px 8%;
-    border-radius: 4px;
-    background: $--background-color-base;
-  }
-
-  @include m(horizontal) {
-    white-space: nowrap;
-  }
-
-  @include m(vertical) {
-    height: 100%;
-    flex-flow: column;
-  }
-}
diff --git a/src/assets/css/themes/src/submenu.scss b/src/assets/css/themes/src/submenu.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/assets/css/themes/src/switch.scss b/src/assets/css/themes/src/switch.scss
deleted file mode 100644
index 92f84910..00000000
--- a/src/assets/css/themes/src/switch.scss
+++ /dev/null
@@ -1,120 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(switch) {
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  font-size: $--switch-font-size;
-  line-height: $--switch-height;
-  height: $--switch-height;
-  vertical-align: middle;
-  @include when(disabled) {
-    & .#{$namespace}-switch__core,
-    & .#{$namespace}-switch__label {
-      cursor: not-allowed;
-    }
-  }
-
-  @include e(label) {
-    transition: .2s;
-    height: $--switch-height;
-    display: inline-block;
-    font-size: $--switch-font-size;
-    font-weight: 500;
-    cursor: pointer;
-    vertical-align: middle;
-    color: $--color-text-primary;
-
-    @include when(active) {
-      color: $--color-primary;
-    }
-
-    @include m(left) {
-      margin-right: 10px;
-    }
-    @include m(right) {
-      margin-left: 10px;
-    }
-    & * {
-      line-height: 1;
-      font-size: $--switch-font-size;
-      display: inline-block;
-    }
-  }
-
-  @include e(input) {
-    position: absolute;
-    width: 0;
-    height: 0;
-    opacity: 0;
-    margin: 0;
-  }
-
-  @include e(core) {
-    margin: 0;
-    display: inline-block;
-    position: relative;
-    width: $--switch-width;
-    height: $--switch-height;
-    border: 1px solid $--switch-off-color;
-    outline: none;
-    border-radius: $--switch-core-border-radius;
-    box-sizing: border-box;
-    background: $--switch-off-color;
-    cursor: pointer;
-    transition: border-color .3s, background-color .3s;
-    vertical-align: middle;
-
-    .#{$namespace}-switch__action{
-      position: absolute;
-      top: 1px;
-      left: 1px;
-      border-radius: $--border-radius-circle;
-      transition: all .3s;
-      width: $--switch-button-size;
-      height: $--switch-button-size;
-      background-color: $--color-white;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: $--switch-off-color;
-    }
-  }
-
-  @include when(checked) {
-    .#{$namespace}-switch__core {
-      border-color: $--switch-on-color;
-      background-color: $--switch-on-color;
-      .#{$namespace}-switch__action{
-        left: 100%;
-        margin-left: -$--switch-button-size - 1px;
-        color:$--switch-on-color ;
-      }
-    }
-  }
-
-  @include when(disabled) {
-    opacity: 0.6;
-  }
-
-  @include m(wide) {
-    .#{$namespace}-switch__label {
-      &.#{$namespace}-switch__label--left {
-        span {
-          left: 10px;
-        }
-      }
-      &.#{$namespace}-switch__label--right {
-        span {
-          right: 10px;
-        }
-      }
-    }
-  }
-
-  & .label-fade-enter-from,
-  & .label-fade-leave-active {
-    opacity: 0;
-  }
-}
diff --git a/src/assets/css/themes/src/tab-pane.scss b/src/assets/css/themes/src/tab-pane.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/assets/css/themes/src/table-column.scss b/src/assets/css/themes/src/table-column.scss
deleted file mode 100644
index 31bbc429..00000000
--- a/src/assets/css/themes/src/table-column.scss
+++ /dev/null
@@ -1,97 +0,0 @@
-@import "mixins/mixins";
-@import "checkbox";
-@import "tag";
-@import "common/var";
-
-@include b(table-column) {
-  @include m(selection) {
-    .cell {
-      padding-left: 14px;
-      padding-right: 14px;
-    }
-  }
-}
-
-@include b(table-filter) {
-  border: solid 1px $--border-color-lighter;
-  border-radius: 2px;
-  background-color: $--color-white;
-  box-shadow: $--dropdown-menu-box-shadow;
-  box-sizing: border-box;
-  margin: 2px 0;
-
-  /** used for dropdown mode */
-  @include e(list) {
-    padding: 5px 0;
-    margin: 0;
-    list-style: none;
-    min-width: 100px;
-  }
-
-  @include e(list-item) {
-    line-height: 36px;
-    padding: 0 10px;
-    cursor: pointer;
-    font-size: $--font-size-base;
-
-    &:hover {
-      background-color: $--dropdown-menuItem-hover-fill;
-      color: $--dropdown-menuItem-hover-color;
-    }
-
-    @include when(active) {
-      background-color: $--color-primary;
-      color: $--color-white;
-    }
-  }
-
-  @include e(content) {
-    min-width: 100px;
-  }
-
-  @include e(bottom) {
-    border-top: 1px solid $--border-color-lighter;
-    padding: 8px;
-
-    button {
-      background: transparent;
-      border: none;
-      color: $--color-text-regular;
-      cursor: pointer;
-      font-size: $--font-size-small;
-      padding: 0 3px;
-
-      &:hover {
-        color: $--color-primary;
-      }
-
-      &:focus {
-        outline: none;
-      }
-
-      &.is-disabled {
-        color: $--disabled-color-base;
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  @include e(wrap) {
-    max-height: 280px;
-  }
-
-  @include e(checkbox-group) {
-    padding: 10px;
-
-    label.#{$namespace}-checkbox {
-      display: block;
-      margin-right: 5px;
-      margin-bottom: 8px;
-      margin-left: 5px;
-    }
-
-    .#{$namespace}-checkbox:last-child {
-      margin-bottom: 0;
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/table.scss b/src/assets/css/themes/src/table.scss
deleted file mode 100644
index 6b43cfa0..00000000
--- a/src/assets/css/themes/src/table.scss
+++ /dev/null
@@ -1,562 +0,0 @@
-@import "mixins/mixins";
-@import "checkbox";
-@import "tag";
-@import "tooltip";
-@import "common/var";
-
-@include b(table) {
-  position: relative;
-  overflow: hidden;
-  box-sizing: border-box;
-  height: fit-content;
-  width: 100%;
-  max-width: 100%;
-  background-color: $--color-white;
-  font-size: 14px;
-  color: $--table-font-color;
-
-  // 数据为空
-  @include e(empty-block) {
-    min-height: 60px;
-    text-align: center;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  @include e(empty-text) {
-    // min-height doesn't work in IE10 and IE11 https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
-    // set empty text line height up to contrainer min-height as workaround.
-    line-height: 60px;
-    width: 50%;
-    color: $--color-text-secondary;
-  }
-
-  // 展开行
-  @include e(expand-column) {
-    .cell {
-      padding: 0;
-      text-align: center;
-    }
-  }
-
-  @include e(expand-icon) {
-    position: relative;
-    cursor: pointer;
-    color: #666;
-    font-size: 12px;
-    transition: transform 0.2s ease-in-out;
-    height: 20px;
-
-    @include m(expanded) {
-      transform: rotate(90deg);
-    }
-
-    > .#{$namespace}-icon {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      margin-left: -5px;
-      margin-top: -5px;
-    }
-  }
-
-  @include e(expanded-cell) {
-    background-color: $--color-white;
-
-    // 纯属为了增加权重
-    &[class*=cell] {
-      padding: 20px 50px;
-    }
-
-    &:hover {
-      background-color: transparent !important;
-    }
-  }
-
-  @include e(placeholder) {
-    display: inline-block;
-    width: 20px;
-  }
-
-  @include e(append-wrapper) {
-    // 避免外边距重合 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
-    overflow: hidden;
-  }
-
-  @include m(fit) {
-    border-right: 0;
-    border-bottom: 0;
-
-    th.gutter, td.gutter {
-      border-right-width: 1px;
-    }
-  }
-
-  @include m(scrollable-x) {
-    .#{$namespace}-table__body-wrapper {
-      overflow-x: auto;
-    }
-  }
-
-  @include m(scrollable-y) {
-    .#{$namespace}-table__body-wrapper {
-      overflow-y: auto;
-    }
-  }
-
-  thead {
-    color: $--table-header-font-color;
-    font-weight: 500;
-
-    &.is-group {
-      th {
-        background: $--background-color-base;
-      }
-    }
-  }
-
-  th, td {
-    padding: 12px 0;
-    min-width: 0;
-    box-sizing: border-box;
-    text-overflow: ellipsis;
-    vertical-align: middle;
-    position: relative;
-    text-align: left;
-
-    @include when(center) {
-      text-align: center;
-    }
-
-    @include when(right) {
-      text-align: right;
-    }
-
-    &.gutter {
-      width: 15px;
-      border-right-width: 0;
-      border-bottom-width: 0;
-      padding: 0;
-    }
-
-    &.is-hidden {
-      > * {
-        visibility: hidden;
-      }
-    }
-  }
-
-  @include m(medium) {
-    th, td {
-      padding: 10px 0;
-    }
-  }
-
-  @include m(small) {
-    font-size: 12px;
-    th, td {
-      padding: 8px 0;
-    }
-  }
-
-  @include m(mini) {
-    font-size: 12px;
-    th, td {
-      padding: 6px 0;
-    }
-  }
-
-  tr {
-    background-color: $--color-white;
-
-    input[type="checkbox"] {
-      margin: 0;
-    }
-  }
-
-  th.is-leaf, td {
-    border-bottom: $--table-border;
-  }
-
-  th.is-sortable {
-    cursor: pointer;
-  }
-
-  th {
-    overflow: hidden;
-    user-select: none;
-    background-color: $--table-header-background-color;
-
-    > .cell {
-      display: inline-block;
-      box-sizing: border-box;
-      position: relative;
-      vertical-align: middle;
-      width: 100%;
-
-      &.highlight {
-        color: $--color-primary;
-      }
-    }
-
-    &.required > div::before {
-      display: inline-block;
-      content: "";
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: #ff4d51;
-      margin-right: 5px;
-      vertical-align: middle;
-    }
-  }
-
-  td {
-    div {
-      box-sizing: border-box;
-    }
-
-    &.gutter {
-      width: 0;
-    }
-  }
-
-  .cell {
-    box-sizing: border-box;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: normal;
-    word-break: break-all;
-    line-height: 23px;
-    padding-left: 10px;
-    padding-right: 10px;
-
-    &.#{$namespace}-tooltip {
-      white-space: nowrap;
-      min-width: 50px;
-    }
-  }
-
-  // 拥有多级表头
-  @include m((group, border)) {
-    border: $--table-border;
-
-    @include share-rule(border-pseudo) {
-      content: '';
-      position: absolute;
-      background-color: $--table-border-color;
-      z-index: 1;
-    }
-
-    // 表格右部伪 border
-    &::after {
-      @include extend-rule(border-pseudo);
-      top: 0;
-      right: 0;
-      width: 1px;
-      height: 100%;
-    }
-  }
-
-  // 表格底部伪 border，总是有的
-  &::before {
-    @include extend-rule(border-pseudo);
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 1px;
-  }
-
-  // table--border
-  @include m(border) {
-    border-right: none;
-    border-bottom: none;
-
-    // fix: #1013
-    // &.#{$namespace}-loading-parent--relative {
-    //   border-color: transparent;
-    // }
-
-    th, td {
-      border-right: $--table-border;
-
-      &:first-child .cell {
-        padding-left: 10px;
-      }
-    }
-
-    th.gutter:last-of-type {
-      border-bottom: $--table-border;
-      border-bottom-width: 1px;
-    }
-
-    & th {
-      border-bottom: $--table-border;
-    }
-  }
-
-  @include m(hidden) {
-    visibility: hidden;
-  }
-
-  @include e((fixed, fixed-right)) {
-    position: absolute;
-    top: 0;
-    left: 0;
-    overflow-x: hidden;
-    overflow-y: hidden;
-    box-shadow: $--table-fixed-box-shadow;
-
-    &::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      width: 100%;
-      height: 1px;
-      background-color: $--border-color-lighter;
-      z-index: 4;
-    }
-  }
-
-  @include e(fixed-right-patch) {
-    position: absolute;
-    top: -1px;
-    right: 0;
-    background-color: $--color-white;
-    border-bottom: $--table-border;
-  }
-
-  @include e(fixed-right) {
-    top: 0;
-    left: auto;
-    right: 0;
-
-    .#{$namespace}-table__fixed-header-wrapper,
-    .#{$namespace}-table__fixed-body-wrapper,
-    .#{$namespace}-table__fixed-footer-wrapper {
-      left: auto;
-      right: 0;
-    }
-  }
-
-  @include e(fixed-header-wrapper) {
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 3;
-  }
-
-  @include e(fixed-footer-wrapper) {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    z-index: 3;
-
-    & tbody td {
-      border-top: $--table-border;
-      background-color: $--table-row-hover-background-color;
-      color: $--table-font-color;
-    }
-  }
-
-  @include e(fixed-body-wrapper) {
-    position: absolute;
-    left: 0;
-    top: 37px;
-    overflow: hidden;
-    z-index: 3;
-  }
-
-  @include e((header-wrapper, body-wrapper, footer-wrapper)) {
-    width: 100%;
-  }
-
-  @include e(footer-wrapper) {
-    margin-top: -1px;
-    td {
-      border-top: $--table-border;
-    }
-  }
-
-  @include e((header, body, footer)) {
-    table-layout: fixed;
-    border-collapse: separate;
-  }
-
-  @include e((header-wrapper, footer-wrapper)) {
-    overflow: hidden;
-
-    & tbody td {
-      background-color: $--table-row-hover-background-color;
-      color: $--table-font-color;
-    }
-  }
-
-  @include e(body-wrapper) {
-    overflow: hidden;
-    position: relative;
-
-    @include when(scrolling-none) {
-      ~ .#{$namespace}-table__fixed,
-      ~ .#{$namespace}-table__fixed-right {
-        box-shadow: none;
-      }
-    }
-
-    @include when(scrolling-left) {
-      ~ .#{$namespace}-table__fixed {
-        box-shadow: none;
-      }
-    }
-
-    @include when(scrolling-right) {
-      ~ .#{$namespace}-table__fixed-right {
-        box-shadow: none;
-      }
-    }
-
-    .#{$namespace}-table--border {
-      @include when(scrolling-right) {
-        ~ .#{$namespace}-table__fixed-right {
-          border-left: $--table-border;
-        }
-      }
-
-      @include when(scrolling-left) {
-        ~ .#{$namespace}-table__fixed {
-          border-right: $--table-border;
-        }
-      }
-    }
-  }
-
-  .caret-wrapper {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    height: 14px;
-    width: 24px;
-    vertical-align: middle;
-    cursor: pointer;
-    overflow: initial;
-    position: relative;
-  }
-
-  .sort-caret {
-    width: 0;
-    height: 0;
-    border: solid 5px transparent;
-    position: absolute;
-    left: 7px;
-
-    &.ascending {
-      border-bottom-color: $--color-text-placeholder;
-      top: -5px;
-    }
-
-    &.descending {
-      border-top-color: $--color-text-placeholder;
-      bottom: -3px;
-    }
-  }
-
-  .ascending .sort-caret.ascending {
-    border-bottom-color: $--color-primary;
-  }
-
-  .descending .sort-caret.descending {
-    border-top-color: $--color-primary;
-  }
-
-  .hidden-columns {
-    visibility: hidden;
-    position: absolute;
-    z-index: -1;
-  }
-
-  @include m(striped) {
-    & .#{$namespace}-table__body {
-      & tr.#{$namespace}-table__row--striped {
-        td {
-          background: #FAFAFA;
-        }
-
-        &.current-row td {
-          background-color: $--table-current-row-background-color;
-        }
-      }
-    }
-  }
-
-  @include e(body) {
-    tr.hover-row {
-      &, &.#{$namespace}-table__row--striped {
-        &, &.current-row {
-          > td {
-            background-color: $--table-row-hover-background-color;
-          }
-        }
-      }
-    }
-
-    tr.current-row > td {
-      background-color: $--table-current-row-background-color;
-    }
-  }
-
-  @include e(column-resize-proxy) {
-    position: absolute;
-    left: 200px;
-    top: 0;
-    bottom: 0;
-    width: 0;
-    border-left: $--table-border;
-    z-index: 10;
-  }
-
-  @include e(column-filter-trigger) {
-    display: inline-block;
-    cursor: pointer;
-
-    & i {
-      color: $--color-info;
-      font-size: 12px;
-      vertical-align: middle;
-      transform: scale(.75);
-    }
-  }
-
-  @include m(enable-row-transition) {
-    .#{$namespace}-table__body td {
-      transition: background-color .25s ease;
-    }
-  }
-
-  @include m(enable-row-hover) {
-    .#{$namespace}-table__body tr:hover > td {
-      background-color: $--table-row-hover-background-color;
-    }
-  }
-
-  @include m(fluid-height) {
-    .#{$namespace}-table__fixed,
-    .#{$namespace}-table__fixed-right {
-      bottom: 0;
-      overflow: hidden;
-    }
-  }
-
-  [class*=#{$namespace}-table__row--level] {
-    .#{$namespace}-table__expand-icon {
-      display: inline-block;
-      width: 20px;
-      line-height: 20px;
-      height: 20px;
-      text-align: center;
-      margin-right: 3px;
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/tabs.scss b/src/assets/css/themes/src/tabs.scss
deleted file mode 100644
index 15f83793..00000000
--- a/src/assets/css/themes/src/tabs.scss
+++ /dev/null
@@ -1,597 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(tabs) {
-  @include e(header) {
-    padding: 0;
-    position: relative;
-    margin: 0 0 15px;
-  }
-  @include e(active-bar) {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 2px;
-    background-color: $--color-primary;
-    z-index: 1;
-    transition: transform .3s cubic-bezier(.645,.045,.355,1);
-    list-style: none;
-  }
-  @include e(new-tab) {
-    float: right;
-    border: 1px solid #d3dce6;
-    height: 18px;
-    width: 18px;
-    line-height: 18px;
-    margin: 12px 0 9px 10px;
-    border-radius: 3px;
-    text-align: center;
-    font-size: 12px;
-    color: #d3dce6;
-    cursor: pointer;
-    transition: all .15s;
-
-    .#{$namespace}-icon-plus {
-      transform: scale(0.8, 0.8);
-    }
-
-    &:hover {
-      color: $--color-primary;
-    }
-  }
-  @include e(nav-wrap) {
-    overflow: hidden;
-    margin-bottom: -1px;
-    position: relative;
-
-    &::after {
-      content: "";
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      width: 100%;
-      height: 2px;
-      background-color: $--border-color-light;
-      z-index: $--index-normal;
-    }
-
-    @include when(scrollable) {
-      padding: 0 20px;
-      box-sizing: border-box;
-    }
-  }
-  @include e(nav-scroll) {
-    overflow: hidden;
-  }
-  @include e((nav-next, nav-prev)) {
-    position: absolute;
-    cursor: pointer;
-    line-height: 44px;
-    font-size: 12px;
-    color: $--color-text-secondary;
-  }
-  @include e(nav-next) {
-    right: 0;
-  }
-  @include e(nav-prev) {
-    left: 0;
-  }
-  @include e(nav) {
-    white-space: nowrap;
-    position: relative;
-    transition: transform .3s;
-    float: left;
-    z-index: #{$--index-normal + 1};
-
-    @include when(stretch) {
-      min-width: 100%;
-      display: flex;
-      & > * {
-        flex: 1;
-        text-align: center;
-      }
-    }
-  }
-  @include e(item) {
-    padding: 0 20px;
-    height: 40px;
-    box-sizing: border-box;
-    line-height: 40px;
-    display: inline-block;
-    list-style: none;
-    font-size: 14px;
-    font-weight: 500;
-    color: $--color-text-primary;
-    position: relative;
-
-    &:focus, &:focus:active {
-      outline: none;
-    }
-
-    & .#{$namespace}-icon-close {
-      border-radius: 50%;
-      text-align: center;
-      transition: all .3s cubic-bezier(.645,.045,.355,1);
-      margin-left: 5px;
-      &:before {
-        transform: scale(.9);
-        display: inline-block;
-      }
-
-      &:hover {
-        background-color: $--color-text-placeholder;
-        color: $--color-white;
-      }
-    }
-
-    @include when(active) {
-      color: $--color-primary;
-    }
-
-    &:hover {
-      color: $--color-primary;
-      cursor: pointer;
-    }
-
-    @include when(disabled) {
-      color: $--disabled-color-base;
-      cursor: default;
-    }
-  }
-  @include e(content) {
-    overflow: hidden;
-    position: relative;
-  }
-  @include m(card) {
-    > .#{$namespace}-tabs__header {
-      border-bottom: 1px solid $--border-color-light;
-    }
-    > .#{$namespace}-tabs__header .#{$namespace}-tabs__nav-wrap::after {
-      content: none;
-    }
-    > .#{$namespace}-tabs__header .#{$namespace}-tabs__nav {
-      border: 1px solid $--border-color-light;
-      border-bottom: none;
-      border-radius: 4px 4px 0 0;
-      box-sizing: border-box;
-    }
-    > .#{$namespace}-tabs__header .#{$namespace}-tabs__active-bar {
-      display: none;
-    }
-    > .#{$namespace}-tabs__header .#{$namespace}-tabs__item .#{$namespace}-icon-close {
-      position: relative;
-      font-size: 12px;
-      width: 0;
-      height: 14px;
-      vertical-align: middle;
-      line-height: 15px;
-      overflow: hidden;
-      top: -1px;
-      right: -2px;
-      transform-origin: 100% 50%;
-    }
-    > .#{$namespace}-tabs__header .#{$namespace}-tabs__item {
-      border-bottom: 1px solid transparent;
-      border-left: 1px solid $--border-color-light;
-      transition: color .3s cubic-bezier(.645,.045,.355,1), padding .3s cubic-bezier(.645,.045,.355,1);
-      &:first-child {
-        border-left: none;
-      }
-      &.is-closable {
-        &:hover {
-          padding-left: 13px;
-          padding-right: 13px;
-
-          & .#{$namespace}-icon-close {
-            width: 14px;
-          }
-        }
-      }
-      &.is-active {
-        border-bottom-color: $--color-white;
-
-        &.is-closable {
-          padding-left: 20px;
-          padding-right: 20px;
-
-          .#{$namespace}-icon-close {
-            width: 14px;
-          }
-        }
-      }
-    }
-  }
-  @include m(border-card) {
-    background: $--color-white;
-    border: 1px solid $--border-color-base;
-    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04);
-
-    > .#{$namespace}-tabs__content {
-      padding: 15px;
-    }
-    > .#{$namespace}-tabs__header {
-      background-color: $--background-color-base;
-      border-bottom: 1px solid $--border-color-light;
-      margin: 0;
-    }
-    > .#{$namespace}-tabs__header .#{$namespace}-tabs__nav-wrap::after {
-      content: none;
-    }
-    > .#{$namespace}-tabs__header .#{$namespace}-tabs__item {
-      transition: all .3s cubic-bezier(.645,.045,.355,1);
-      border: 1px solid transparent;
-      margin-top: -1px;
-      color: $--color-text-secondary;
-
-      &:first-child {
-        margin-left: -1px;
-      }
-
-      & + .#{$namespace}-tabs__item {
-        margin-left: -1px;
-      }
-
-      &.is-active {
-        color: $--color-primary;
-        background-color: $--color-white;
-        border-right-color: $--border-color-base;
-        border-left-color: $--border-color-base;
-      }
-      &:not(.is-disabled):hover {
-        color: $--color-primary;
-      }
-      &.is-disabled {
-        color: $--disabled-color-base;
-      }
-    }
-
-    > .#{$namespace}-tabs__header .is-scrollable .#{$namespace}-tabs__item:first-child {
-      margin-left: 0;
-    }
-  }
-  @include m((top, bottom)) {
-    .#{$namespace}-tabs__item.is-top:nth-child(2),
-    .#{$namespace}-tabs__item.is-bottom:nth-child(2) {
-      padding-left: 0;
-    }
-    .#{$namespace}-tabs__item.is-top:last-child,
-    .#{$namespace}-tabs__item.is-bottom:last-child {
-      padding-right: 0;
-    }
-
-    &.#{$namespace}-tabs--border-card, &.#{$namespace}-tabs--card,
-    .#{$namespace}-tabs--left, .#{$namespace}-tabs--right {
-      > .#{$namespace}-tabs__header {
-        .#{$namespace}-tabs__item:nth-child(2) {
-          padding-left: 20px;
-        }
-        .#{$namespace}-tabs__item:last-child {
-          padding-right: 20px;
-        }
-      }
-    }
-  }
-  @include m(bottom) {
-    .#{$namespace}-tabs__header.is-bottom {
-      margin-bottom: 0;
-      margin-top: 10px;
-    }
-    &.#{$namespace}-tabs--border-card {
-      .#{$namespace}-tabs__header.is-bottom {
-        border-bottom: 0;
-        border-top: 1px solid $--border-color-base;
-      }
-      .#{$namespace}-tabs__nav-wrap.is-bottom {
-        margin-top: -1px;
-        margin-bottom: 0;
-      }
-      .#{$namespace}-tabs__item.is-bottom:not(.is-active) {
-        border: 1px solid transparent;
-      }
-      .#{$namespace}-tabs__item.is-bottom {
-        margin: 0 -1px -1px -1px;
-      }
-    }
-  }
-  @include m((left, right)) {
-    overflow: hidden;
-
-    .#{$namespace}-tabs__header.is-left,
-    .#{$namespace}-tabs__header.is-right,
-    .#{$namespace}-tabs__nav-wrap.is-left,
-    .#{$namespace}-tabs__nav-wrap.is-right,
-    .#{$namespace}-tabs__nav-scroll {
-      height: 100%;
-    }
-
-    .#{$namespace}-tabs__active-bar.is-left,
-    .#{$namespace}-tabs__active-bar.is-right {
-      top: 0;
-      bottom: auto;
-      width: 2px;
-      height: auto;
-    }
-
-    .#{$namespace}-tabs__nav-wrap.is-left,
-    .#{$namespace}-tabs__nav-wrap.is-right {
-      margin-bottom: 0;
-
-      > .#{$namespace}-tabs__nav-prev,
-      > .#{$namespace}-tabs__nav-next {
-        height: 30px;
-        line-height: 30px;
-        width: 100%;
-        text-align: center;
-        cursor: pointer;
-
-        i {
-          transform: rotateZ(90deg);
-        }
-      }
-      > .#{$namespace}-tabs__nav-prev {
-        left: auto;
-        top: 0;
-      }
-      > .#{$namespace}-tabs__nav-next {
-        right: auto;
-        bottom: 0;
-      }
-
-      &.is-scrollable {
-        padding: 30px 0;
-      }
-
-      &::after {
-        height: 100%;
-        width: 2px;
-        bottom: auto;
-        top: 0;
-      }
-    }
-
-    .#{$namespace}-tabs__nav.is-left,
-    .#{$namespace}-tabs__nav.is-right {
-      float: none;
-    }
-    .#{$namespace}-tabs__item.is-left,
-    .#{$namespace}-tabs__item.is-right {
-      display: block;
-    }
-  }
-  @include m(left) {
-    .#{$namespace}-tabs__header.is-left {
-      float: left;
-      margin-bottom: 0;
-      margin-right: 10px;
-    }
-    .#{$namespace}-tabs__nav-wrap.is-left {
-      margin-right: -1px;
-      &::after {
-        left: auto;
-        right: 0;
-      }
-    }
-    .#{$namespace}-tabs__active-bar.is-left {
-      right: 0;
-      left: auto;
-    }
-    .#{$namespace}-tabs__item.is-left {
-      text-align: right;
-    }
-
-    &.#{$namespace}-tabs--card {
-      .#{$namespace}-tabs__active-bar.is-left {
-        display: none;
-      }
-      .#{$namespace}-tabs__item.is-left {
-        border-left: none;
-        border-right: 1px solid $--border-color-light;
-        border-bottom: none;
-        border-top: 1px solid $--border-color-light;
-        text-align: left;
-      }
-      .#{$namespace}-tabs__item.is-left:first-child {
-        border-right: 1px solid $--border-color-light;
-        border-top: none;
-      }
-      .#{$namespace}-tabs__item.is-left.is-active {
-        border: 1px solid $--border-color-light;
-        border-right-color: #fff;
-        border-left: none;
-        border-bottom: none;
-
-        &:first-child {
-          border-top: none;
-        }
-        &:last-child {
-          border-bottom: none;
-        }
-      }
-
-      .#{$namespace}-tabs__nav {
-        border-radius: 4px 0 0 4px;
-        border-bottom: 1px solid $--border-color-light;
-        border-right: none;
-      }
-
-      .#{$namespace}-tabs__new-tab {
-        float: none;
-      }
-    }
-
-    &.#{$namespace}-tabs--border-card {
-      .#{$namespace}-tabs__header.is-left {
-        border-right: 1px solid #dfe4ed;
-      }
-      .#{$namespace}-tabs__item.is-left {
-        border: 1px solid transparent;
-        margin: -1px 0 -1px -1px;
-
-        &.is-active {
-          border-color: transparent;
-          border-top-color: rgb(209, 219, 229);
-          border-bottom-color: rgb(209, 219, 229);
-        }
-      }
-    }
-  }
-  @include m(right) {
-    .#{$namespace}-tabs__header.is-right {
-      float: right;
-      margin-bottom: 0;
-      margin-left: 10px;
-    }
-
-    .#{$namespace}-tabs__nav-wrap.is-right {
-      margin-left: -1px;
-      &::after {
-        left: 0;
-        right: auto;
-      }
-    }
-
-    .#{$namespace}-tabs__active-bar.is-right {
-      left: 0;
-    }
-
-    &.#{$namespace}-tabs--card {
-      .#{$namespace}-tabs__active-bar.is-right {
-        display: none;
-      }
-      .#{$namespace}-tabs__item.is-right {
-        border-bottom: none;
-        border-top: 1px solid $--border-color-light;
-      }
-      .#{$namespace}-tabs__item.is-right:first-child {
-        border-left: 1px solid $--border-color-light;
-        border-top: none;
-      }
-      .#{$namespace}-tabs__item.is-right.is-active {
-        border: 1px solid $--border-color-light;
-        border-left-color: #fff;
-        border-right: none;
-        border-bottom: none;
-
-        &:first-child {
-          border-top: none;
-        }
-        &:last-child {
-          border-bottom: none;
-        }
-      }
-
-      .#{$namespace}-tabs__nav {
-        border-radius: 0 4px 4px 0;
-        border-bottom: 1px solid $--border-color-light;
-        border-left: none;
-      }
-    }
-    &.#{$namespace}-tabs--border-card {
-      .#{$namespace}-tabs__header.is-right {
-        border-left: 1px solid #dfe4ed;
-      }
-      .#{$namespace}-tabs__item.is-right {
-        border: 1px solid transparent;
-        margin: -1px -1px -1px 0;
-
-        &.is-active {
-          border-color: transparent;
-          border-top-color: rgb(209, 219, 229);
-          border-bottom-color: rgb(209, 219, 229);
-        }
-      }
-    }
-  }
-}
-
-.slideInRight-transition,
-.slideInLeft-transition {
-  display: inline-block;
-}
-.slideInRight-enter {
-  animation: slideInRight-enter .3s;
-}
-.slideInRight-leave {
-  position: absolute;
-  left: 0;
-  right: 0;
-  animation: slideInRight-leave .3s;
-}
-.slideInLeft-enter {
-  animation: slideInLeft-enter .3s;
-}
-.slideInLeft-leave {
-  position: absolute;
-  left: 0;
-  right: 0;
-  animation: slideInLeft-leave .3s;
-}
-
-@keyframes slideInRight-enter {
-  0% {
-    opacity: 0;
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateX(100%);
-    transform: translateX(100%)
-  }
-
-  to {
-    opacity: 1;
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateX(0);
-    transform: translateX(0)
-  }
-}
-@keyframes slideInRight-leave {
-  0% {
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-    opacity: 1
-  }
-
-  100% {
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateX(100%);
-    transform: translateX(100%);
-    opacity: 0
-  }
-}
-@keyframes slideInLeft-enter {
-  0% {
-    opacity: 0;
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateX(-100%);
-    transform: translateX(-100%)
-  }
-
-  to {
-    opacity: 1;
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateX(0);
-    transform: translateX(0)
-  }
-}
-@keyframes slideInLeft-leave {
-  0% {
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-    opacity: 1
-  }
-
-  100% {
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateX(-100%);
-    transform: translateX(-100%);
-    opacity: 0
-  }
-}
diff --git a/src/assets/css/themes/src/tag.scss b/src/assets/css/themes/src/tag.scss
deleted file mode 100644
index 707c1105..00000000
--- a/src/assets/css/themes/src/tag.scss
+++ /dev/null
@@ -1,163 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@mixin genTheme($backgroundColorWeight, $borderColorWeight, $fontColorWeight, $hoverColorWeight) {
-  background-color: mix($--tag-primary-color, $--color-white, $backgroundColorWeight);
-  border-color: mix($--tag-primary-color, $--color-white, $borderColorWeight);
-  color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
-
-  @include when(hit) {
-    border-color: $--tag-primary-color;
-  }
-
-  .#{$namespace}-tag__close {
-    color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
-    &:hover {
-      color: $--color-white;
-      background-color: mix($--tag-primary-color, $--color-white, $hoverColorWeight);
-    }
-  }
-
-  &.#{$namespace}-tag--info {
-    background-color: mix($--tag-info-color, $--color-white, $backgroundColorWeight);
-    border-color: mix($--tag-info-color, $--color-white, $borderColorWeight);
-    color: mix($--tag-info-color, $--color-white, $fontColorWeight);
-
-    @include when(hit) {
-      border-color: $--tag-info-color;
-    }
-
-    .#{$namespace}-tag__close {
-      color: mix($--tag-info-color, $--color-white, $fontColorWeight);
-      &:hover {
-        color: $--color-white;
-        background-color: mix($--tag-info-color, $--color-white, $hoverColorWeight);
-      }
-    }
-  }
-
-  &.#{$namespace}-tag--success {
-    background-color: mix($--tag-success-color, $--color-white, $backgroundColorWeight);
-    border-color: mix($--tag-success-color, $--color-white, $borderColorWeight);
-    color: mix($--tag-success-color, $--color-white, $fontColorWeight);
-
-    @include when(hit) {
-      border-color: $--tag-success-color;
-    }
-
-    .#{$namespace}-tag__close {
-      color: mix($--tag-success-color, $--color-white, $fontColorWeight);
-      &:hover {
-        color: $--color-white;
-        background-color: mix($--tag-success-color, $--color-white, $hoverColorWeight);
-      }
-    }
-  }
-
-  &.#{$namespace}-tag--warning {
-    background-color: mix($--tag-warning-color, $--color-white, $backgroundColorWeight);
-    border-color: mix($--tag-warning-color, $--color-white, $borderColorWeight);
-    color: mix($--tag-warning-color, $--color-white, $fontColorWeight);
-
-    @include when(hit) {
-      border-color: $--tag-warning-color;
-    }
-
-    .#{$namespace}-tag__close {
-      color: mix($--tag-warning-color, $--color-white, $fontColorWeight);
-      &:hover {
-        color: $--color-white;
-        background-color: mix($--tag-warning-color, $--color-white, $hoverColorWeight);
-      }
-    }
-  }
-
-  &.#{$namespace}-tag--danger {
-    background-color: mix($--tag-danger-color, $--color-white, $backgroundColorWeight);
-    border-color: mix($--tag-danger-color, $--color-white, $borderColorWeight);
-    color: mix($--tag-danger-color, $--color-white, $fontColorWeight);
-
-    @include when(hit) {
-      border-color: $--tag-danger-color;
-    }
-
-    .#{$namespace}-tag__close {
-      color: mix($--tag-danger-color, $--color-white, $fontColorWeight);
-      &:hover {
-        color: $--color-white;
-        background-color: mix($--tag-danger-color, $--color-white, $hoverColorWeight);
-      }
-    }
-  }
-}
-
-@include b(tag) {
-  @include genTheme(10%, 20%, 100%, 100%);
-  display: inline-block;
-  height: 32px;
-  padding: $--tag-padding;
-  line-height: 30px;
-  font-size: $--tag-font-size;
-  color: $--tag-primary-color;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: $--tag-border-radius;
-  box-sizing: border-box;
-  white-space: nowrap;
-
-  .#{$namespace}-icon-close {
-    border-radius: 50%;
-    text-align: center;
-    position: relative;
-    cursor: pointer;
-    font-size: 12px;
-    height: 16px;
-    width: 16px;
-    line-height: 16px;
-    vertical-align: middle;
-    top: -1px;
-    right: -5px;
-
-    &::before {
-      display: block;
-    }
-  }
-
-  @include m(dark) {
-    @include genTheme(100%, 100%, 0, 80%);
-  }
-
-  @include m(plain) {
-    @include genTheme(0, 40%, 100%, 100%);
-  }
-
-  @include m(medium) {
-    height: 28px;
-    line-height: 26px;
-
-    .#{$namespace}-icon-close {
-      transform: scale(.8);
-    }
-  }
-
-  @include m(small) {
-    height: 24px;
-    padding: 0 8px;
-    line-height: 22px;
-
-    .#{$namespace}-icon-close {
-      transform: scale(.8);
-    }
-  }
-
-  @include m(mini) {
-    height: 20px;
-    padding: 0 5px;
-    line-height: 19px;
-
-    .#{$namespace}-icon-close {
-      margin-left: -3px;
-      transform: scale(.7);
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/time-picker.scss b/src/assets/css/themes/src/time-picker.scss
deleted file mode 100644
index 10aaf54f..00000000
--- a/src/assets/css/themes/src/time-picker.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import "./date-picker/picker.scss";
-@import "./date-picker/picker-panel.scss";
-@import "./date-picker/time-spinner.scss";
-@import "./date-picker/time-picker.scss";
-@import "./date-picker/time-range-picker.scss";
-@import "./input.scss";
-@import "./scrollbar.scss";
-@import "./popper";
diff --git a/src/assets/css/themes/src/time-select.scss b/src/assets/css/themes/src/time-select.scss
deleted file mode 100644
index 99ab9a56..00000000
--- a/src/assets/css/themes/src/time-select.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@import "common/var";
-@import "./date-picker/picker.scss";
-@import "./date-picker/date-picker.scss";
-@import "./scrollbar.scss";
-@import "./popper";
-
-.time-select {
-  margin: 5px 0;
-  min-width: 0;
-}
-
-.time-select .#{$namespace}-picker-panel__content {
-  max-height: 200px;
-  margin: 0;
-}
-
-.time-select-item {
-  padding: 8px 10px;
-  font-size: 14px;
-  line-height: 20px;
-}
-
-.time-select-item.selected:not(.disabled) {
-  color: $--color-primary;
-  font-weight: bold;
-}
-
-.time-select-item.disabled {
-  color: $--datepicker-border-color;
-  cursor: not-allowed;
-}
-
-.time-select-item:hover {
-  background-color: $--background-color-base;
-  font-weight: bold;
-  cursor: pointer;
-}
diff --git a/src/assets/css/themes/src/timeline-item.scss b/src/assets/css/themes/src/timeline-item.scss
deleted file mode 100644
index b36ed2b3..00000000
--- a/src/assets/css/themes/src/timeline-item.scss
+++ /dev/null
@@ -1,86 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(timeline-item) {
-  position: relative;
-  padding-bottom: 20px;
-
-  @include e(wrapper) {
-    position: relative;
-    padding-left: 28px;
-    top: -3px;
-  }
-
-  @include e(tail) {
-    position: absolute;
-    left: 4px;
-    height: 100%;
-    border-left: 2px solid $--timeline-node-color;
-  }
-
-  @include e(icon) {
-    color: $--color-white;
-    font-size: $--font-size-small;
-  }
-
-  @include e(node) {
-    position: absolute;
-    background-color: $--timeline-node-color;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    @include m(normal) {
-      left: -1px;
-      width: $--timeline-node-size-normal;
-      height: $--timeline-node-size-normal;
-    }
-    @include m(large) {
-      left: -2px;
-      width: $--timeline-node-size-large;
-      height: $--timeline-node-size-large;
-    }
-
-    @include m(primary) {
-      background-color: $--color-primary;
-    }
-    @include m(success) {
-      background-color: $--color-success;
-    }
-    @include m(warning) {
-      background-color: $--color-warning;
-    }
-    @include m(danger) {
-      background-color: $--color-danger;
-    }
-    @include m(info) {
-      background-color: $--color-info;
-    }
-  }
-
-  @include e(dot) {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  @include e(content) {
-    color: $--color-text-primary;
-  }
-
-  @include e(timestamp) {
-    color: $--color-text-secondary;
-    line-height: 1;
-    font-size: $--font-size-small;
-
-    @include when(top) {
-      margin-bottom: 8px;
-      padding-top: 4px;
-    }
-    @include when(bottom) {
-      margin-top: 8px;
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/timeline.scss b/src/assets/css/themes/src/timeline.scss
deleted file mode 100644
index 4ff8e3c7..00000000
--- a/src/assets/css/themes/src/timeline.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(timeline) {
-  margin: 0;
-  font-size: $--font-size-base;
-  list-style: none;
-
-  & .#{$namespace}-timeline-item:last-child {
-    & .#{$namespace}-timeline-item__tail {
-      display: none;
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/tooltip.scss b/src/assets/css/themes/src/tooltip.scss
deleted file mode 100644
index 0a016a85..00000000
--- a/src/assets/css/themes/src/tooltip.scss
+++ /dev/null
@@ -1,141 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(tooltip) {
-  &:focus:not(.focusing), &:focus:hover {
-    outline-width: 0;
-  }
-  @include e(popper) {
-    position: absolute;
-    border-radius: 4px;
-    padding: $--tooltip-padding;
-    z-index: $--index-popper;
-    font-size: $--tooltip-font-size;
-    line-height: 1.2;
-    min-width: 10px;
-    word-wrap: break-word;
-
-    .popper__arrow,
-    .popper__arrow::after {
-      position: absolute;
-      display: block;
-      width: 0;
-      height: 0;
-      border-color: transparent;
-      border-style: solid;
-    }
-
-    .popper__arrow {
-      border-width: $--tooltip-arrow-size;
-    }
-
-    .popper__arrow::after {
-      content: " ";
-      border-width: 5px;
-    }
-
-    &[x-placement^="top"] {
-      margin-bottom: #{$--tooltip-arrow-size + 6px};
-    }
-
-    &[x-placement^="top"] .popper__arrow {
-      bottom: -$--tooltip-arrow-size;
-      border-top-color: $--tooltip-border-color;
-      border-bottom-width: 0;
-
-      &::after {
-        bottom: 1px;
-        margin-left: -5px;
-        border-top-color: $--tooltip-fill;
-        border-bottom-width: 0;
-      }
-    }
-
-    &[x-placement^="bottom"] {
-      margin-top: #{$--tooltip-arrow-size + 6px};
-    }
-
-    &[x-placement^="bottom"] .popper__arrow {
-      top: -$--tooltip-arrow-size;
-      border-top-width: 0;
-      border-bottom-color: $--tooltip-border-color;
-
-      &::after {
-        top: 1px;
-        margin-left: -5px;
-        border-top-width: 0;
-        border-bottom-color: $--tooltip-fill;
-      }
-    }
-
-    &[x-placement^="right"] {
-      margin-left: #{$--tooltip-arrow-size + 6px};
-    }
-
-    &[x-placement^="right"] .popper__arrow {
-      left: -$--tooltip-arrow-size;
-      border-right-color: $--tooltip-border-color;
-      border-left-width: 0;
-
-      &::after {
-        bottom: -5px;
-        left: 1px;
-        border-right-color: $--tooltip-fill;
-        border-left-width: 0;
-      }
-    }
-
-    &[x-placement^="left"] {
-      margin-right: #{$--tooltip-arrow-size + 6px};
-    }
-
-    &[x-placement^="left"] .popper__arrow {
-      right: -$--tooltip-arrow-size;
-      border-right-width: 0;
-      border-left-color: $--tooltip-border-color;
-
-      &::after {
-        right: 1px;
-        bottom: -5px;
-        margin-left: -5px;
-        border-right-width: 0;
-        border-left-color: $--tooltip-fill;
-      }
-    }
-
-    @include when(dark) {
-      background: $--tooltip-fill;
-      color: $--tooltip-color;
-    }
-
-    @include when(light) {
-      background: $--tooltip-color;
-      border: 1px solid $--tooltip-fill;
-
-      &[x-placement^="top"] .popper__arrow {
-        border-top-color: $--tooltip-fill;
-        &::after {
-          border-top-color: $--tooltip-color;
-        }
-      }
-      &[x-placement^="bottom"] .popper__arrow {
-        border-bottom-color: $--tooltip-fill;
-        &::after {
-          border-bottom-color: $--tooltip-color;
-        }
-      }
-      &[x-placement^="left"] .popper__arrow {
-        border-left-color: $--tooltip-fill;
-        &::after {
-          border-left-color: $--tooltip-color;
-        }
-      }
-      &[x-placement^="right"] .popper__arrow {
-        border-right-color: $--tooltip-fill;
-        &::after {
-          border-right-color: $--tooltip-color;
-        }
-      }
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/transfer.scss b/src/assets/css/themes/src/transfer.scss
deleted file mode 100644
index 7c318780..00000000
--- a/src/assets/css/themes/src/transfer.scss
+++ /dev/null
@@ -1,215 +0,0 @@
-@import "mixins/mixins";
-@import "mixins/utils";
-@import "common/var";
-@import "input";
-@import "button";
-@import "checkbox";
-@import "checkbox-group";
-
-@include b(transfer) {
-  font-size: $--font-size-base;
-
-  @include e(buttons) {
-    display: inline-block;
-    vertical-align: middle;
-    padding: 0 30px;
-  }
-
-  @include e(button) {
-    @include when(disabled) {
-      border: $--border-base;
-      background-color: $--background-color-base;
-      color: $--color-text-placeholder;
-
-      &:hover {
-        border: $--border-base;
-        background-color: $--background-color-base;
-        color: $--color-text-placeholder;
-      }
-    }
-
-    &:first-child {
-      margin-bottom: 10px;
-    }
-
-    &:nth-child(2) {
-      margin: 0;
-    }
-
-    i, span {
-      font-size: 14px;
-    }
-
-    & [class*="#{$namespace}-icon-"] + span {
-      margin-left: 0;
-    }
-  }
-}
-
-@include b(transfer-panel) {
-  border: 1px solid $--transfer-border-color;
-  border-radius: $--transfer-border-radius;
-  overflow: hidden;
-  background: $--color-white;
-  display: inline-block;
-  vertical-align: middle;
-  width: $--transfer-panel-width;
-  max-height: 100%;
-  box-sizing: border-box;
-  position: relative;
-
-  @include e(body) {
-    height: $--transfer-panel-body-height;
-
-    @include when(with-footer) {
-      padding-bottom: $--transfer-panel-footer-height;
-    }
-  }
-
-  @include e(list) {
-    margin: 0;
-    padding: 6px 0;
-    list-style: none;
-    height: $--transfer-panel-body-height;
-    overflow: auto;
-    box-sizing: border-box;
-
-    @include when(filterable) {
-      height: #{$--transfer-panel-body-height - $--transfer-filter-height - 20px};
-      padding-top: 0;
-    }
-  }
-
-  @include e(item) {
-    height: $--transfer-item-height;
-    line-height: $--transfer-item-height;
-    padding-left: 15px;
-    display: block !important;
-
-    & + .#{$namespace}-transfer-panel__item {
-      margin-left: 0;
-    }
-
-    &.#{$namespace}-checkbox {
-      color: $--color-text-regular;
-    }
-
-    &:hover {
-      color: $--color-primary;
-    }
-
-    &.#{$namespace}-checkbox .#{$namespace}-checkbox__label {
-      width: 100%;
-      @include utils-ellipsis;
-      display: block;
-      box-sizing: border-box;
-      padding-left: 24px;
-      line-height: $--transfer-item-height;
-    }
-
-    .#{$namespace}-checkbox__input {
-      position: absolute;
-      top: 8px;
-    }
-  }
-
-  @include e(filter) {
-    text-align: center;
-    margin: 15px;
-    box-sizing: border-box;
-    display: block;
-    width: auto;
-
-    .#{$namespace}-input__inner {
-      height: $--transfer-filter-height;
-      width: 100%;
-      font-size: 12px;
-      display: inline-block;
-      box-sizing: border-box;
-      border-radius: #{$--transfer-filter-height / 2};
-      padding-right: 10px;
-      padding-left: 30px;
-    }
-
-    .#{$namespace}-input__icon {
-      margin-left: 5px;
-    }
-
-    .#{$namespace}-icon-circle-close {
-      cursor: pointer;
-    }
-  }
-
-  .#{$namespace}-transfer-panel__header {
-    height: $--transfer-panel-header-height;
-    line-height: $--transfer-panel-header-height;
-    background: $--transfer-panel-header-background-color;
-    margin: 0;
-    padding-left: 15px;
-    border-bottom: 1px solid $--transfer-border-color;
-    box-sizing: border-box;
-    color: $--color-black;
-
-    .#{$namespace}-checkbox {
-      display: block;
-      line-height: 40px;
-
-      .#{$namespace}-checkbox__label {
-        font-size: 16px;
-        color: $--color-text-primary;
-        font-weight: normal;
-
-        span {
-          position: absolute;
-          right: 15px;
-          color: $--color-text-secondary;
-          font-size: 12px;
-          font-weight: normal;
-        }
-      }
-    }
-  }
-
-  .#{$namespace}-transfer-panel__footer {
-    height: $--transfer-panel-footer-height;
-    background: $--color-white;
-    margin: 0;
-    padding: 0;
-    border-top: 1px solid $--transfer-border-color;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    z-index: $--index-normal;
-    @include utils-vertical-center;
-
-    .#{$namespace}-checkbox {
-      padding-left: 20px;
-      color: $--color-text-regular;
-    }
-  }
-
-  .#{$namespace}-transfer-panel__empty {
-    margin: 0;
-    height: $--transfer-item-height;
-    line-height: $--transfer-item-height;
-    padding: 6px 15px 0;
-    color: $--color-text-secondary;
-    text-align: center;
-  }
-
-  .#{$namespace}-checkbox__label {
-    padding-left: 8px;
-  }
-
-  .#{$namespace}-checkbox__inner {
-    height: 14px;
-    width: 14px;
-    border-radius: 3px;
-    &::after {
-      height: 6px;
-      width: 3px;
-      left: 4px;
-    }
-  }
-}
diff --git a/src/assets/css/themes/src/tree.scss b/src/assets/css/themes/src/tree.scss
deleted file mode 100644
index ab9777c3..00000000
--- a/src/assets/css/themes/src/tree.scss
+++ /dev/null
@@ -1,123 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-@import "common/transition";
-@import "checkbox";
-
-@include b(tree) {
-  position: relative;
-  cursor: default;
-  background: $--color-white;
-  color: $--tree-font-color;
-
-  @include e(empty-block) {
-    position: relative;
-    min-height: 60px;
-    text-align: center;
-    width: 100%;
-    height: 100%;
-  }
-
-  @include e(empty-text) {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    color: $--color-text-secondary;
-    font-size: $--font-size-base;
-  }
-
-  @include e(drop-indicator) {
-    position: absolute;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background-color: $--color-primary;
-  }
-}
-
-@include b(tree-node) {
-  white-space: nowrap;
-  outline: none;
-  &:focus { /* focus */
-    > .#{$namespace}-tree-node__content {
-      background-color: $--tree-node-hover-background-color;
-    }
-  }
-
-  @include when(drop-inner) {
-    > .#{$namespace}-tree-node__content .#{$namespace}-tree-node__label {
-      background-color: $--color-primary;
-      color: #fff;
-    }
-  }
-
-  @include e(content) {
-    display: flex;
-    align-items: center;
-    height: 26px;
-    cursor: pointer;
-
-    & > .#{$namespace}-tree-node__expand-icon {
-      padding: 6px;
-    }
-    & > label.#{$namespace}-checkbox {
-      margin-right: 8px;
-    }
-    &:hover {
-      background-color: $--tree-node-hover-background-color;
-    }
-
-    .#{$namespace}-tree.is-dragging & {
-      cursor: move;
-
-      & * {
-        pointer-events: none;
-      }
-    }
-
-    .#{$namespace}-tree.is-dragging.is-drop-not-allow & {
-      cursor: not-allowed;
-    }
-  }
-
-  @include e(expand-icon) {
-    cursor: pointer;
-    color: $--tree-expand-icon-color;
-    font-size: 12px;
-
-    transform: rotate(0deg);
-    transition: transform 0.3s ease-in-out;
-
-    &.expanded {
-      transform: rotate(90deg);
-    }
-
-    &.is-leaf {
-      color: transparent;
-      cursor: default;
-    }
-  }
-
-  @include e(label) {
-    font-size: $--font-size-base;
-  }
-
-  @include e(loading-icon) {
-    margin-right: 8px;
-    font-size: $--font-size-base;
-    color: $--tree-expand-icon-color;
-  }
-
-  & > .#{$namespace}-tree-node__children {
-    overflow: hidden;
-    background-color: transparent;
-  }
-
-  &.is-expanded > .#{$namespace}-tree-node__children {
-    display: block;
-  }
-}
-
-.#{$namespace}-tree--highlight-current .#{$namespace}-tree-node.is-current > .#{$namespace}-tree-node__content {
-  background-color: mix($--color-white, $--color-primary, 92%);
-}
diff --git a/src/assets/css/themes/src/upload.scss b/src/assets/css/themes/src/upload.scss
deleted file mode 100644
index c14c55f9..00000000
--- a/src/assets/css/themes/src/upload.scss
+++ /dev/null
@@ -1,603 +0,0 @@
-@import "mixins/mixins";
-@import "progress";
-@import "common/var";
-
-@include b(upload) {
-  display: inline-block;
-  text-align: center;
-  cursor: pointer;
-  outline: none;
-  @include e(input) {
-    display: none;
-  }
-
-  @include e(tip) {
-    font-size: 12px;
-    color: $--color-text-regular;
-    margin-top: 7px;
-  }
-
-  iframe {
-    position: absolute;
-    z-index: -1;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    filter: alpha(opacity=0);
-  }
-
-  /* 照片墙模式 */
-  @include m(picture-card) {
-    background-color: #fbfdff;
-    border: 1px dashed #c0ccda;
-    border-radius: 6px;
-    box-sizing: border-box;
-    width: 148px;
-    height: 148px;
-    cursor: pointer;
-    line-height: 146px;
-    vertical-align: top;
-
-    i {
-      font-size: 28px;
-      color: #8c939d;
-    }
-
-    &:hover {
-      border-color: $--color-primary;
-      color: $--color-primary;
-    }
-  }
-  &:focus {
-    border-color: $--color-primary;
-    color: $--color-primary;
-
-    .#{$namespace}-upload-dragger {
-      border-color: $--color-primary;
-    }
-  }
-}
-
-@include b(upload-dragger) {
-  background-color: #fff;
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  box-sizing: border-box;
-  width: 360px;
-  height: 180px;
-  text-align: center;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-
-  .#{$namespace}-icon-upload {
-    font-size: 67px;
-    color: $--color-text-placeholder;
-    margin: 40px 0 16px;
-    line-height: 50px;
-  }
-
-  + .#{$namespace}-upload__tip {
-    text-align: center;
-  }
-
-  ~ .#{$namespace}-upload__files {
-    border-top: $--border-base;
-    margin-top: 7px;
-    padding-top: 5px;
-  }
-
-  .#{$namespace}-upload__text {
-    color: $--color-text-regular;
-    font-size: 14px;
-    text-align: center;
-
-    em {
-      color: $--color-primary;
-      font-style: normal;
-    }
-  }
-
-  &:hover {
-    border-color: $--color-primary;
-  }
-
-  @include when(dragover) {
-    background-color: rgba(32, 159, 255, .06);
-    border: 2px dashed $--color-primary;
-  }
-}
-
-@include b(upload-list) {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-
-  @include e(item) {
-    transition: all .5s cubic-bezier(.55,0,.1,1);
-    font-size: 14px;
-    color: $--color-text-regular;
-    line-height: 1.8;
-    margin-top: 5px;
-    position: relative;
-    box-sizing: border-box;
-    border-radius: 4px;
-    width: 100%;
-
-    .#{$namespace}-progress {
-      position: absolute;
-      top: 20px;
-      width: 100%;
-    }
-
-    .#{$namespace}-progress__text {
-      position: absolute;
-      right: 0;
-      top: -13px;
-    }
-
-    .#{$namespace}-progress-bar {
-      margin-right: 0;
-      padding-right: 0;
-    }
-
-    &:first-child {
-      margin-top: 10px;
-    }
-
-    & .#{$namespace}-icon-upload-success {
-      color: $--color-success;
-    }
-
-    .#{$namespace}-icon-close {
-      display: none;
-      position: absolute;
-      top: 5px;
-      right: 5px;
-      cursor: pointer;
-      opacity: .75;
-      color: $--color-text-regular;
-      //transform: scale(.7);
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-
-    & .#{$namespace}-icon-close-tip {
-      display: none;
-      position: absolute;
-      top: 5px;
-      right: 5px;
-      font-size: 12px;
-      cursor: pointer;
-      opacity: 1;
-      color: $--color-primary;
-    }
-    
-    &:hover {
-      background-color: $--background-color-base;
-
-      .#{$namespace}-icon-close {
-        display: inline-block;
-      }
-
-      .#{$namespace}-progress__text {
-        display: none;
-      }
-    }
-
-    @include when(success) {
-      .#{$namespace}-upload-list__item-status-label {
-        display: block;
-      }
-
-      .#{$namespace}-upload-list__item-name:hover, .#{$namespace}-upload-list__item-name:focus {
-        color: $--link-hover-color;
-        cursor: pointer;
-      }
-
-      &:focus:not(:hover) {  /* 键盘focus */
-        .#{$namespace}-icon-close-tip {
-          display: inline-block;
-        }
-      }
-
-      &:not(.focusing):focus, &:active { /* click时 */
-        outline-width: 0;
-        .#{$namespace}-icon-close-tip {
-          display: none;
-        }
-      }
-
-      &:hover, &:focus {
-        .#{$namespace}-upload-list__item-status-label {
-          display: none;
-        }
-      }
-    }
-  }
-
-  @include when(disabled) {
-    .#{$namespace}-upload-list__item:hover .#{$namespace}-upload-list__item-status-label {
-      display: block;
-    }
-  }
-
-  @include e(item-name) {
-    color: $--color-text-regular;
-    display: block;
-    margin-right: 40px;
-    overflow: hidden;
-    padding-left: 4px;
-    text-overflow: ellipsis;
-    transition: color .3s;
-    white-space: nowrap;
-
-    [class^="#{$namespace}-icon"] {
-      height: 100%;
-      margin-right: 7px;
-      color: $--color-text-secondary;
-      line-height: inherit;
-    }
-  }
-
-  @include e(item-status-label) {
-    position: absolute;
-    right: 5px;
-    top: 0;
-    line-height: inherit;
-    display: none;
-  }
-
-  @include e(item-delete) {
-    position: absolute;
-    right: 10px;
-    top: 0;
-    font-size: 12px;
-    color: $--color-text-regular;
-    display: none;
-
-    &:hover {
-      color: $--color-primary;
-    }
-  }
-
-  @include m(picture-card) {
-    margin: 0;
-    display: inline;
-    vertical-align: top;
-
-    .#{$namespace}-upload-list__item {
-      overflow: hidden;
-      background-color: #fff;
-      border: 1px solid #c0ccda;
-      border-radius: 6px;
-      box-sizing: border-box;
-      width: 148px;
-      height: 148px;
-      margin: 0 8px 8px 0;
-      display: inline-block;
-
-      .#{$namespace}-icon-check,
-      .#{$namespace}-icon-circle-check {
-        color: $--color-white;
-      }
-
-      .#{$namespace}-icon-close {
-        display: none;
-      }
-      &:hover {
-        .#{$namespace}-upload-list__item-status-label {
-          display: none;
-        }
-
-        .#{$namespace}-progress__text {
-          display: block;
-        }
-      }
-    }
-
-    .#{$namespace}-upload-list__item-name {
-      display: none;
-    }
-
-    .#{$namespace}-upload-list__item-thumbnail {
-      width: 100%;
-      height: 100%;
-    }
-
-    .#{$namespace}-upload-list__item-status-label {
-      position: absolute;
-      right: -15px;
-      top: -6px;
-      width: 40px;
-      height: 24px;
-      background: #13ce66;
-      text-align: center;
-      transform: rotate(45deg);
-      box-shadow: 0 0 1pc 1px rgba(0,0,0,0.2);
-
-      i {
-        font-size: 12px;
-        margin-top: 11px;
-        transform: rotate(-45deg);
-      }
-    }
-
-    .#{$namespace}-upload-list__item-actions {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      left: 0;
-      top: 0;
-      cursor: default;
-      text-align: center;
-      color: #fff;
-      opacity: 0;
-      font-size: 20px;
-      background-color: rgba(0, 0, 0, .5);
-      transition: opacity .3s;
-      &::after {
-        display: inline-block;
-        content: "";
-        height: 100%;
-        vertical-align: middle
-      }
-
-      span {
-        display: none;
-        cursor: pointer;
-      }
-
-      span + span {
-        margin-left: 15px;
-      }
-
-      .#{$namespace}-upload-list__item-delete {
-        position: static;
-        font-size: inherit;
-        color: inherit;
-      }
-
-      &:hover {
-        opacity: 1;
-        span {
-          display: inline-block;
-        }
-      }
-    }
-
-    .#{$namespace}-progress {
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      bottom: auto;
-      width: 126px;
-
-      .#{$namespace}-progress__text {
-        top: 50%;
-      }
-    }
-  }
-
-  @include m(picture) {
-    .#{$namespace}-upload-list__item {
-      overflow: hidden;
-      z-index: 0;
-      background-color: #fff;
-      border: 1px solid #c0ccda;
-      border-radius: 6px;
-      box-sizing: border-box;
-      margin-top: 10px;
-      padding: 10px 10px 10px 90px;
-      height: 92px;
-
-      .#{$namespace}-icon-check,
-      .#{$namespace}-icon-circle-check {
-        color: $--color-white;
-      }
-
-      &:hover {
-        .#{$namespace}-upload-list__item-status-label {
-          background: transparent;
-          box-shadow: none;
-          top: -2px;
-          right: -12px;
-        }
-
-        .#{$namespace}-progress__text {
-          display: block;
-        }
-      }
-
-      &.is-success {
-        .#{$namespace}-upload-list__item-name {
-          line-height: 70px;
-          margin-top: 0;
-          i {
-            display: none;
-          }
-        }
-      }
-    }
-
-    .#{$namespace}-upload-list__item-thumbnail {
-      vertical-align: middle;
-      display: inline-block;
-      width: 70px;
-      height: 70px;
-      float: left;
-      position: relative;
-      z-index: 1;
-      margin-left: -80px;
-      background-color: $--color-white
-    }
-
-    .#{$namespace}-upload-list__item-name {
-      display: block;
-      margin-top: 20px;
-
-      i {
-        font-size: 70px;
-        line-height: 1;
-        position: absolute;
-        left: 9px;
-        top: 10px;
-      }
-    }
-
-    .#{$namespace}-upload-list__item-status-label {
-      position: absolute;
-      right: -17px;
-      top: -7px;
-      width: 46px;
-      height: 26px;
-      background: #13ce66;
-      text-align: center;
-      transform: rotate(45deg);
-      box-shadow: 0 1px 1px #ccc;
-
-      i {
-        font-size: 12px;
-        margin-top: 12px;
-        transform: rotate(-45deg);
-      }
-    }
-
-    .#{$namespace}-progress {
-      position: relative;
-      top: -7px;
-    }
-  }
-}
-
-@include b(upload-cover) {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  z-index: 10;
-  cursor: default;
-  @include utils-vertical-center;
-
-  img {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-
-  @include e(label) {
-    position: absolute;
-    right: -15px;
-    top: -6px;
-    width: 40px;
-    height: 24px;
-    background: #13ce66;
-    text-align: center;
-    transform: rotate(45deg);
-    box-shadow: 0 0 1pc 1px rgba(0,0,0,0.2);
-
-    i {
-      font-size: 12px;
-      margin-top: 11px;
-      transform: rotate(-45deg);
-      color: #fff;
-    }
-  }
-
-  @include e(progress) {
-    display: inline-block;
-    vertical-align: middle;
-    position: static;
-    width: 243px;
-
-    + .#{$namespace}-upload__inner {
-      opacity: 0;
-    }
-  }
-
-  @include e(content) {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  @include e(interact) {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(#000, .72);
-    text-align: center;
-
-    .btn {
-      display: inline-block;
-      color: $--color-white;
-      font-size: 14px;
-      cursor: pointer;
-      vertical-align: middle;
-      transition: $--md-fade-transition;
-      margin-top: 60px;
-
-      i {
-        margin-top: 0;
-      }
-
-      span {
-        opacity: 0;
-        transition: opacity .15s linear;
-      }
-
-      &:not(:first-child) {
-        margin-left: 35px;
-      }
-
-      &:hover {
-        transform: translateY(-13px);
-
-        span {
-          opacity: 1;
-        }
-      }
-
-      i {
-        color: $--color-white;
-        display: block;
-        font-size: 24px;
-        line-height: inherit;
-        margin: 0 auto 5px;
-      }
-    }
-  }
-
-  @include e(title) {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    background-color: $--color-white;
-    height: 36px;
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-weight: normal;
-    text-align: left;
-    padding: 0 10px;
-    margin: 0;
-    line-height: 36px;
-    font-size: 14px;
-    color: $--color-text-primary;
-  }
-
-  + .#{$namespace}-upload__inner {
-    opacity: 0;
-    position: relative;
-    z-index: 1;
-  }
-}
diff --git a/src/assets/css/themes/src/virtual-list.scss b/src/assets/css/themes/src/virtual-list.scss
deleted file mode 100644
index 6deee28e..00000000
--- a/src/assets/css/themes/src/virtual-list.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@import "mixins/mixins";
-@import "common/var";
-
-@include b(vl) {
-  @include e(viewport) {
-    overflow: auto;
-  }
-
-  @include e(content) {
-    overflow: hidden;
-    will-change: transform;
-    position: relative;
-  }
-
-  @include e(item-container) {
-    will-change: transform; 
-    display: flex;
-
-    &[data-direction="v"] {
-      flex-direction: column;
-    }
-
-    &[data-direction="h"] {
-      flex-direction: row;
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/assets/css/themes/theme-dark.scss b/src/assets/css/themes/theme-dark.scss
index 90484333..c0af2ff4 100644
--- a/src/assets/css/themes/theme-dark.scss
+++ b/src/assets/css/themes/theme-dark.scss
@@ -78,5 +78,3 @@ $--border-color-2: #6C6E72;
 $--select-bg-color-1: #1D1E1F;
 $--select-bg-color-hover-1: #18222C;
 $--select-bg-color-hover-2: #18222C;
-
-$--block-bg-color-1: #181818;
diff --git a/src/assets/css/themes/theme-light.scss b/src/assets/css/themes/theme-light.scss
index cc08f726..a2fc0ece 100644
--- a/src/assets/css/themes/theme-light.scss
+++ b/src/assets/css/themes/theme-light.scss
@@ -78,5 +78,3 @@ $--border-color-3: #DEDEDE;
 $--select-bg-color-1: #FFFFFF;
 $--select-bg-color-hover-1: #f9f9f9;
 $--select-bg-color-hover-2: #F2F9FF;
-
-$--block-bg-color-1: #F7F7F7;
diff --git a/src/components/advancedSearch/TextMode.vue b/src/components/advancedSearch/TextMode.vue
index 7d4521a9..311ac8ab 100644
--- a/src/components/advancedSearch/TextMode.vue
+++ b/src/components/advancedSearch/TextMode.vue
@@ -504,9 +504,3 @@ export default {
   }
 }
 </script>
-
-<style>
-.el-popper.search-show-hint-popover {
-  visibility: hidden !important;
-}
-</style>
diff --git a/src/components/advancedSearch/showhint/Hint/HelperInfo.vue b/src/components/advancedSearch/showhint/Hint/HelperInfo.vue
index 4a105daf..ee3b2976 100644
--- a/src/components/advancedSearch/showhint/Hint/HelperInfo.vue
+++ b/src/components/advancedSearch/showhint/Hint/HelperInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="HelperInfo">
+  <div class="helper-info">
     <div class="tips-container">
       <Renderer ref="renderVm" :renderProps="renderProps" :renderFun="helperDataFun"></Renderer>
     </div>
@@ -12,7 +12,6 @@ import defaultTips from '@/components/advancedSearch/showhint/const/defaultTips.
 import sqlTips from '@/components/advancedSearch/showhint/const/sqlTips.js'
 import functionTips from '@/components/advancedSearch/showhint/const/functionTips.js'
 import filterTips from '@/components/advancedSearch/showhint/const/filterTips.js'
-import varTips from '@/components/advancedSearch/showhint/const/varTips.js'
 
 import { fieldRender } from '@/components/advancedSearch/showhint/const/fieldTips.js'
 import { EN, storageKey, ZH } from '@/utils/constants'
@@ -115,57 +114,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-  .HelperInfo {
-    min-width: 450px;
-    background-color: #fff;
-    height: 294px;
-    box-sizing: border-box;
-    overflow: auto;
-    z-index: 99;
-  }
-
-  .tips-container {
-    padding: 12px;
-  }
-
-  /deep/ ul li {
-    list-style: inside;
-    line-height: 20px;
-  }
-
-  /deep/ h3 {
-    margin: 8px 0;
-    line-height: 22px;
-  }
-
-  /deep/ p {
-    line-height: 22px;
-    word-break: break-all;
-  }
-
-  /deep/ code,
-  .code {
-    background: initial;
-    border: 1px solid #DEDEDE;
-    height: 24px;
-    line-height: 24px;
-    padding: 0 12px;
-    margin: 6px 0;
-    display: block;
-  }
-
-  /deep/ .sub-url {
-    padding-left: 18px;
-  }
-
-  /deep/ .sub-url li {
-    list-style: inside circle;
-  }
-
-  /deep/ i.ref-txt {
-    line-height: 20px;
-    color: #aaa;
-  }
-</style>
diff --git a/src/components/common/Pagination.vue b/src/components/common/Pagination.vue
index 0a094cfc..a01828f4 100644
--- a/src/components/common/Pagination.vue
+++ b/src/components/common/Pagination.vue
@@ -31,7 +31,6 @@ import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { parseInt } from 'lodash'
-import ElConfigProvider from 'element-plus'
 import cn from 'element-plus/lib/locale/lang/zh-cn'
 import en from 'element-plus/lib/locale/lang/en'
 
diff --git a/src/components/common/SimpleLoading.vue b/src/components/common/SimpleLoading.vue
index f60e6acd..0aacb96c 100644
--- a/src/components/common/SimpleLoading.vue
+++ b/src/components/common/SimpleLoading.vue
@@ -74,168 +74,3 @@ export default {
   }
 }
 </script>
-<style lang="scss">
-.simple-loading {
-  position: absolute;
-  z-index: 1;
-
-  &.simple-loading--top, &.simple-loading--top-start, &.simple-loading--top-end, &.simple-loading--left-start, &.simple-loading--right-start {
-    top: 2px
-  }
-  &.simple-loading--bottom, &.simple-loading--bottom-start, &.simple-loading--bottom-end, &.simple-loading--left-end, &.simple-loading--right-end {
-    bottom: 2px;
-  }
-  &.simple-loading--left, &.simple-loading--top-start, &.simple-loading--bottom-start, &.simple-loading--left-start, &.simple-loading--left-end {
-    left: 2px
-  }
-  &.simple-loading--right, &.simple-loading--top-end, &.simple-loading--bottom-end, &.simple-loading--right-start, &.simple-loading--right-end {
-    right: 2px;
-  }
-  &.simple-loading--top, &.simple-loading--bottom {
-    left: 50%;
-  }
-  &.simple-loading--left, &.simple-loading--right {
-    top: 50%;
-  }
-  &.simple-loading--top {
-    .simple-loading__box {
-      transform: translateX(-50%);
-    }
-  }
-  &.simple-loading--left {
-    .simple-loading__box {
-      transform: translateY(-50%);
-    }
-  }
-  &.simple-loading--top-end, &.simple-loading--right-start {
-    .simple-loading__box {
-      transform: translateX(-100%);
-    }
-  }
-  &.simple-loading--right {
-    .simple-loading__box {
-      transform: translate(-100%, -50%);
-    }
-  }
-  &.simple-loading--bottom-start, &.simple-loading--left-end {
-    .simple-loading__box {
-      transform: translateY(-100%);
-    }
-  }
-  &.simple-loading--bottom {
-    .simple-loading__box {
-      transform: translate(-50%, -100%);
-    }
-  }
-  &.simple-loading--bottom-end, &.simple-loading--right-end {
-    .simple-loading__box {
-      transform: translate(-100%, -100%);
-    }
-  }
-  &.simple-loading--center {
-    left: 50%;
-    top: 50%;
-
-    .simple-loading__box {
-      transform: translate(-50%, -50%);
-    }
-  }
-
-  @keyframes simple-loading__inner {
-    0% { opacity: 1 }
-    100% { opacity: 0 }
-  }
-
-  .simple-loading__box {
-    position: absolute;
-    display: inline-block;
-    overflow: hidden;
-    background: transparent;
-
-    &.simple-loading--default {
-      width: 27px;
-      height: 27px;
-
-      .simple-loading__inner {
-        div {
-          width: 6px;
-          height: 6px;
-          border-radius: 3px / 3px;
-          transform-origin: 3px 13px;
-        }
-      }
-    }
-
-    &.simple-loading--small {
-      width: 20px;
-      height: 20px;
-
-      .simple-loading__inner {
-        div {
-          width: 5px;
-          height: 5px;
-          border-radius: 3px / 3px;
-          transform-origin: 0 9px;
-        }
-      }
-    }
-    .simple-loading__inner {
-      width: 100%;
-      height: 100%;
-      position: relative;
-      transform: translateZ(0) scale(1);
-      backface-visibility: hidden;
-      transform-origin: 0 0;
-
-      div {
-        left: 10px;
-        top: 0;
-        position: absolute;
-        animation: simple-loading__inner linear 1s infinite;
-        background: #3c76cc;
-        box-sizing: content-box;
-      }
-      div:nth-child(1) {
-        transform: rotate(0deg);
-        animation-delay: -0.875s;
-        background: #3c76cc;
-      }
-      div:nth-child(2) {
-        transform: rotate(45deg);
-        animation-delay: -0.75s;
-        background: #3c76cc;
-      }
-      div:nth-child(3) {
-        transform: rotate(90deg);
-        animation-delay: -0.625s;
-        background: #3c76cc;
-      }
-      div:nth-child(4) {
-        transform: rotate(135deg);
-        animation-delay: -0.5s;
-        background: #3c76cc;
-      }
-      div:nth-child(5) {
-        transform: rotate(180deg);
-        animation-delay: -0.375s;
-        background: #3c76cc;
-      }
-      div:nth-child(6) {
-        transform: rotate(225deg);
-        animation-delay: -0.25s;
-        background: #3c76cc;
-      }
-      div:nth-child(7) {
-        transform: rotate(270deg);
-        animation-delay: -0.125s;
-        background: #3c76cc;
-      }
-      div:nth-child(8) {
-        transform: rotate(315deg);
-        animation-delay: 0s;
-        background: #3c76cc;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/components/common/TimeLine.vue b/src/components/common/TimeLine.vue
index ef096812..50727ae2 100644
--- a/src/components/common/TimeLine.vue
+++ b/src/components/common/TimeLine.vue
@@ -236,62 +236,3 @@ export default {
   }
 }
 </script>
-
-<style scoped lang="scss">
-.time-line {
-  width: 100%;
-  height: 40px !important;
-  padding: 0 6px;
-  position: relative;
-
-  .time-line-slider {
-    position: absolute;
-    width: calc(100% - 16px);
-    height: 40px;
-    top: -6px;
-
-    :deep .el-slider__runway {
-      //width: calc(100% - 18px);
-      padding: 0 6px;
-      height: 40px;
-      background-color: rgba(0, 0, 0, 0);
-      margin: 0;
-
-      .el-slider__bar {
-        background-color: rgba(0, 0, 0, 0);
-      }
-      .el-slider__button-wrapper {
-        width: 10px;
-        height: 10px;
-        margin-top: 7px;
-      }
-
-      .el-slider__button {
-        width: 0;
-        height: 0;
-        border-color: #000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
-        border-style: solid;
-        border-width: 8px 8px 0 8px;
-        background-color: rgba(0, 0, 0, 0);
-        border-radius: 0;
-      }
-    }
-  }
-
-  .time-line-container {
-    height: 40px;
-    line-height: 40px;
-    background-color: rgba(255, 255, 255, 0.50);
-    //background-color: rgb(89, 173, 201);
-    display: flex;
-    justify-content: space-between;
-    padding: 0 6px;
-
-    .test-line {
-      width: 1px;
-      height: 40px;
-      background-color: #000;
-    }
-  }
-}
-</style>
diff --git a/src/components/common/TimeRange/DateTimeRange.vue b/src/components/common/TimeRange/DateTimeRange.vue
index 381e24cc..69265d3a 100644
--- a/src/components/common/TimeRange/DateTimeRange.vue
+++ b/src/components/common/TimeRange/DateTimeRange.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-ele-click-outside="changeDropdown" style="position: relative;" class="date-range-box">
-    <div @click="showDropdown" class="date-range-text" :class="myClass" :style="style">
+    <div @click="showDropdown" tabindex="1" class="date-range-text" :class="myClass" :style="style">
       <div class="calendar-popover-text"><i class="cn-icon cn-icon-Data"></i></div>
       <div class="calendar-popover-text" style="display: flex" v-if="isCustom" :title="`${dateFormatByAppearance(getMillisecond(startTime))} -${dateFormatByAppearance(getMillisecond(endTime))}`">
         <div class="calendar-popover-text" :style="showPosition === 'left' ? 'width: 90px;text-overflow: ellipsis;overflow: hidden;' : ''" >{{ dateFormatByAppearance(getMillisecond(startTime)) }}</div>
@@ -56,7 +56,7 @@
           <el-col
               :span="8"
               class="date-range-panel-content date-range-panel-content-right"
-              style="border-left: 1px solid rgba(0,0,0,0.09);">
+          >
             <div class="date-range-title">{{$t('dateTime.relativeTimeRanges')}}</div>
             <ul class="date-range-item">
               <li v-for="item in dateRangeArr"
diff --git a/src/components/common/TimeRange/TimeRefresh.vue b/src/components/common/TimeRange/TimeRefresh.vue
index 337f970c..957da769 100644
--- a/src/components/common/TimeRange/TimeRefresh.vue
+++ b/src/components/common/TimeRange/TimeRefresh.vue
@@ -1,23 +1,23 @@
 <template>
-    <div class="cn-refresh-box" v-ele-click-outside="dropdownShowFalse">
-        <span>
-            <el-button-group size="small">
-              <el-button size="small" @click="$emit('change')"><i class="cn-icon cn-icon-refresh1"></i></el-button>
-              <el-button class="cn-button" size="small" @click="showRefreshList">
-                  <span class="cn-button-label" v-if="interLabel">{{interLabel}}</span>
-                  <i class="cn-icon cn-icon-dropdown" :class="dropdownShow?'active' : ''"></i>
-              </el-button>
-            </el-button-group>
-        </span>
-        <transition name="el-zoom-in-top">
-            <div v-if="dropdownShow" class="refresh-list">
-                <div v-for="(item, index) in refreshArr" :key="index" @click="setRefresh(item)" class="refresh-list-item" :class="item.value==interval ? 'active' : ''">
-                  {{ item.label }}
-                  <i v-if="item.value===interval" class="cn-icon cn-icon-check"></i>
-                </div>
-            </div>
-        </transition>
-    </div>
+  <div class="cn-refresh-box" v-ele-click-outside="dropdownShowFalse">
+    <span>
+      <el-button-group size="small">
+        <el-button size="small" @click="$emit('change')"><i class="cn-icon cn-icon-refresh1"></i></el-button>
+        <el-button class="el-button--icon" size="small" @click="showRefreshList">
+          <span class="button-label" v-if="interLabel">{{interLabel}}</span>
+          <i class="cn-icon cn-icon-dropdown" :class="dropdownShow?'active' : ''"></i>
+        </el-button>
+      </el-button-group>
+    </span>
+    <transition name="el-zoom-in-top">
+      <div v-if="dropdownShow" class="refresh-list">
+        <div v-for="(item, index) in refreshArr" :key="index" @click="setRefresh(item)" class="refresh-list-item" :class="item.value==interval ? 'active' : ''">
+          {{ item.label }}
+          <i v-if="item.value===interval" class="cn-icon cn-icon-check"></i>
+        </div>
+      </div>
+    </transition>
+  </div>
 </template>
 
 <script>
diff --git a/src/components/common/collapse.vue b/src/components/common/collapse.vue
deleted file mode 100644
index 433786d7..00000000
--- a/src/components/common/collapse.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-  <transition
-      :name="transitionName"
-      @before-enter="collapseBeforeEnter"
-      @enter="collapseEnter"
-      @after-enter="collapseAfterEnter"
-      @before-leave="collapseBeforeLeave"
-      @leave="collapseLeave"
-      @after-leave="collapseAfterLeave">
-    <slot></slot>
-  </transition>
-</template>
-
-<script>
-/**
- * 元素折叠过度效果
- */
-export default {
-  name: 'CollapseTransition',
-  props: {
-    transitionName: {
-      type: String,
-      default: 'collapse-transition'
-    }
-  },
-  data () {
-    return {
-      oldPaddingTop: '',
-      oldPaddingBottom: '',
-      oldOverflow: ''
-    }
-  },
-  methods: {
-    collapseBeforeEnter (el) {
-      // console.log('11, collapseBeforeEnter')
-      this.oldPaddingBottom = el.style.paddingBottom
-      this.oldPaddingTop = el.style.paddingTop
-      // 过渡效果开始前设置元素的maxHeight为0，让元素maxHeight有一个初始值
-      el.style.paddingTop = '0'
-      el.style.paddingBottom = '0'
-      el.style.maxHeight = '0'
-    },
-    collapseEnter (el, done) {
-      // console.log('22, collapseEnter')
-      this.oldOverflow = el.style.overflow
-      const elHeight = el.scrollHeight
-      // 过渡效果进入后将元素的maxHeight设置为元素本身的高度，将元素maxHeight设置为auto不会有过渡效果
-      if (elHeight > 0) {
-        el.style.maxHeight = elHeight + 'px'
-      } else {
-        el.style.maxHeight = '0'
-      }
-      el.style.paddingTop = this.oldPaddingTop
-      el.style.paddingBottom = this.oldPaddingBottom
-
-      el.style.overflow = 'hidden'
-      const onTransitionDone = function () {
-        done()
-        el.removeEventListener('transitionend', onTransitionDone, false)
-        el.removeEventListener('transitioncancel', onTransitionDone, false)
-      }
-      // 绑定元素的transition完成事件，在transition完成后立即完成vue的过度动效
-      el.addEventListener('transitionend', onTransitionDone, false)
-      el.addEventListener('transitioncancel', onTransitionDone, false)
-    },
-    collapseAfterEnter (el) {
-      // 过渡效果完成后恢复元素的maxHeight
-      el.style.maxHeight = ''
-      el.style.overflow = this.oldOverflow
-    },
-
-    collapseBeforeLeave (el) {
-      this.oldPaddingBottom = el.style.paddingBottom
-      this.oldPaddingTop = el.style.paddingTop
-      this.oldOverflow = el.style.overflow
-
-      el.style.maxHeight = el.scrollHeight + 'px'
-      el.style.overflow = 'hidden'
-    },
-    collapseLeave (el, done) {
-      if (el.scrollHeight !== 0) {
-        el.style.maxHeight = '0'
-        el.style.paddingBottom = '0'
-        el.style.paddingTop = '0'
-      }
-      const onTransitionDone = function () {
-        done()
-        el.removeEventListener('transitionend', onTransitionDone, false)
-        el.removeEventListener('transitioncancel', onTransitionDone, false)
-      }
-      // 绑定元素的transition完成事件，在transition完成后立即完成vue的过度动效
-      el.addEventListener('transitionend', onTransitionDone, false)
-      el.addEventListener('transitioncancel', onTransitionDone, false)
-    },
-    collapseAfterLeave (el) {
-      el.style.maxHeight = ''
-      el.style.overflow = this.oldOverflow
-      el.style.paddingBottom = this.oldPaddingBottom
-      el.style.paddingTop = this.oldPaddingTop
-
-      this.oldOverflow = this.oldPaddingBottom = this.oldPaddingTop = ''
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.collapse-transition-enter-active,
-.collapse-transition-leave-active {
-  transition: height .3s ease-in-out, padding .3s ease-in-out, max-height .3s ease-in-out;
-}
-</style>
diff --git a/src/components/common/popBox/TopToolMoreOptions.vue b/src/components/common/popBox/TopToolMoreOptions.vue
index c091b63d..1fdec479 100644
--- a/src/components/common/popBox/TopToolMoreOptions.vue
+++ b/src/components/common/popBox/TopToolMoreOptions.vue
@@ -232,12 +232,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-  .cn-dialog {
-    overflow: hidden;
-  }
-  .upload-body{
-    text-align: center;
-  }
-</style>
diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue
index a31dc21f..e7f886c4 100644
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -9,16 +9,16 @@
       <!--个人操作-->
       <div class="personal">
         <el-dropdown>
-          <div class="header-menu--item"><i class="cn-icon cn-icon-language"></i></div>
+          <div class="header-menu__item"><i class="cn-icon cn-icon-language"></i></div>
           <template #dropdown>
             <el-dropdown-menu>
               <el-dropdown-item>
-                <div id="header-to-english" :style="language === EN?'color:#0091ff':''" @click="changeLocal(EN)">
+                <div id="header-to-english" class="personal-dropdown-item" :class="language === EN ? 'is-active' : ''" @click="changeLocal(EN)">
                   English
                 </div>
               </el-dropdown-item>
               <el-dropdown-item>
-                <div id="header-to-chinese" :style="language === ZH?'color:#0091ff':''" @click="changeLocal(ZH)">
+                <div id="header-to-chinese" class="personal-dropdown-item" :class="language === ZH ? 'is-active' : ''" @click="changeLocal(ZH)">
                   中文
                 </div>
               </el-dropdown-item>
@@ -26,7 +26,7 @@
           </template>
         </el-dropdown>
         <el-dropdown>
-          <div class='login-user header-menu--item'>{{ nickName }}&nbsp;<i class="cn-icon cn-icon-arrow-down"></i></div>
+          <div class='login-user header-menu__item'>{{ nickName }}&nbsp;<i class="cn-icon cn-icon-arrow-down"></i></div>
           <template #dropdown>
             <el-dropdown-menu>
               <el-dropdown-item>
@@ -601,9 +601,9 @@ export default {
                   itemName = this.dnsRcodeMapData.get(item)
                 }
                 if (itemName === currentValue) {
-                  selectedDom.style.cssText = 'color:#0091ff;font-weight: bold;'
+                  selectedDom.classList.add('is-active')
                 } else {
-                  selectedDom.style.cssText = ''
+                  selectedDom.classList.remove('is-active')
                 }
               }
             })
diff --git a/src/components/rightBox/report/ReportBox.vue b/src/components/rightBox/report/ReportBox.vue
index c2c459aa..090e07b0 100644
--- a/src/components/rightBox/report/ReportBox.vue
+++ b/src/components/rightBox/report/ReportBox.vue
@@ -11,7 +11,7 @@
         <el-form ref="reportForm" :model="editObject" :rules="rules" label-position="top" label-width="120px">
           <!--name-->
           <el-form-item :label="$t('report.name')" prop="name">
-            <el-input id="account-input-name" v-model="editObject.name" maxlength="64" placeholder=" " show-word-limit size="small" type="text"></el-input>
+            <el-input id="account-input-name" v-model="editObject.name" maxlength="64" placeholder=" " show-word-limit type="text"></el-input>
           </el-form-item>
           <!--time limit-->
           <el-form-item :label="$t('report.timeLimit')" prop="timeLimit">
@@ -20,8 +20,6 @@
                        class="right-box__select"
                        collapse-tags
                        placeholder=" "
-                       popper-class="right-box-select-dropdown right-box-select-report "
-                       size="small"
                        @change="timeConfigTypeChange"
             >
               <template v-for="time in timeRuleList" :key="time.value">
@@ -34,16 +32,15 @@
                          class="right-box__select"
                          collapse-tags
                          placeholder=" "
-                         popper-class="right-box-select-dropdown right-box-select-report "
-                         size="small"
+                         style="margin-top: 10px;"
                          @change="()=>{ this.$forceUpdate() }">
                 <template v-for="time in timeUnitList" :key="time.value">
                   <el-option :label="$t(time.name)" :value="time.value"></el-option>
                 </template>
               </el-select>
             </template>
-            <div v-else-if="editObject.config.timeConfig.type === 'last' || editObject.config.timeConfig.type === 'previous'" style="display: flex;">
-              <el-input-number v-model.number="editObject.config.timeConfig.offset" size="small" class="el-input-single" placeholder=" ">
+            <div v-else-if="editObject.config.timeConfig.type === 'last' || editObject.config.timeConfig.type === 'previous'" class="report__display">
+              <el-input-number v-model.number="editObject.config.timeConfig.offset" class="el-input-single" placeholder=" ">
                 <template #prepend><i @click="timeOffsetHandle('m')" class="cn-icon cn-icon-a-"></i></template>
                 <template #append><i @click="timeOffsetHandle('p')" class="cn-icon cn-icon-a-1"></i></template>
               </el-input-number>
@@ -53,7 +50,6 @@
                          collapse-tags
                          placeholder=" "
                          popper-class="right-box-select-dropdown  el-select-last"
-                         size="small"
                          @change="()=>{ this.$forceUpdate() }">
                 <template v-for="time in timeUnitList" :key="time.value">
                   <el-option :label="$t(time.name)" :value="time.value"></el-option>
@@ -66,9 +62,7 @@
             <div class="demo-datetime-picker">
               <div class="block">
                 <el-date-picker
-                    style="width: 100%"
                     v-model="editObject.config.startTime"
-                    size="small"
                     :format="dateFormat"
                     :disabled-date="startDisabledDate"
                     @change="startTimeChang"
@@ -84,9 +78,7 @@
             <div class="demo-datetime-picker">
               <div class="block">
                 <el-date-picker
-                    style="width: 100%"
                     v-model="editObject.config.endTime"
-                    size="small"
                     :format="dateFormat"
                     :disabled-date="endDisabledDate"
                     @change="endTimeChange"
@@ -107,17 +99,17 @@
             </div>
             <div class="enable-tabs-daily" v-if="scheduleType === scheduleTypeList[0].value">
               <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
-              <el-input-number v-model.number="editObject.config.schedulerConfig.interval" size="small" placeholder=" " style="margin-top: 0.3125rem;">
+              <el-input-number v-model.number="editObject.config.schedulerConfig.interval" placeholder=" ">
                 <template #append>{{$t('report.day')}}</template>
               </el-input-number>
             </div>
             <div class="enable-tabs-weekly" v-else-if="scheduleType === scheduleTypeList[1].value">
               <!-- 每隔几周暂时隐藏 -->
               <!-- <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
-              <el-input-number v-model="editObject.config.schedulerConfig.interval" size="small" placeholder="Please input">
+              <el-input v-model="editObject.config.schedulerConfig.interval" placeholder="Please input">
                 <template #append>{{$t('report.week')}}</template>
               </el-input>-->
-              <el-checkbox-group v-model="editObject.config.schedulerConfig.weekDates" style="margin-top: 0.3125rem">
+              <el-checkbox-group v-model="editObject.config.schedulerConfig.weekDates">
                 <el-checkbox v-for="(item, index) in weekdayList" :key="index" :label="item.value">{{$t(item.name)}}</el-checkbox>
               </el-checkbox-group>
             </div>
@@ -132,7 +124,7 @@
                 <!-- 自定义月，循环 -->
                 <template v-if="monthIsCycle">
                   <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
-                  <el-input-number v-model="editObject.config.schedulerConfig.interval" size="small" placeholder=" " style="margin-top: 0.3125rem;">
+                  <el-input-number v-model="editObject.config.schedulerConfig.interval" placeholder=" ">
                     <template #append>{{$t('report.month')}}</template>
                   </el-input-number>
                 </template>
@@ -160,10 +152,9 @@
                   <el-select id="account-input-roleIds"
                              v-model="editObject.config.schedulerConfig.monthWeekDates"
                              class="right-box__select"
+                             style="margin-top: 10px;"
                              multiple
                              placeholder=" "
-                             popper-class="right-box-select-dropdown right-box-select-report"
-                             size="small"
                              @change="()=>{ this.$forceUpdate() }">
                     <template v-for="time in weekOptions" :key="time.value">
                       <el-option :label="$t(time.name)" :value="time.value"></el-option>
@@ -184,9 +175,7 @@
             <div class="demo-datetime-picker">
               <div class="block">
                 <el-date-picker
-                    style="width: 100%"
                     v-model="editObject.schedulerStart"
-                    size="small"
                     :format="dateFormat"
                     prefix-icon=""
                     type="datetime"
@@ -200,9 +189,7 @@
             <div class="demo-datetime-picker">
               <div class="block">
                 <el-date-picker
-                    style="width: 100%"
                     v-model="editObject.schedulerEnd"
-                    size="small"
                     :format="dateFormat"
                     prefix-icon=""
                     type="datetime"
@@ -219,8 +206,6 @@
                        collapse-tags
                        placeholder=" "
                        :disabled="!!editObject.id"
-                       popper-class="right-box-select-dropdown right-box-select-report"
-                       size="small"
             >
               <template v-for="category in categoryList" :key="category.id">
                 <el-option :label="category.name" :value="category.id"></el-option>
@@ -229,11 +214,11 @@
           </el-form-item>
           <!-- 参数 -->
           <el-form-item :label="$t('config.operationlog.params')" prop="categoryParams" v-if="editObject.categoryParams && editObject.categoryParams.length > 0">
-<!--            <el-input-number v-model="param.value" placeholder=" " v-for="(param, index) in editObject.categoryParams" :key="index" size="small" style="vertical-align: unset;" :disabled="!!editObject.id">
+<!--            <el-input v-model="param.value" placeholder=" " v-for="(param, index) in editObject.categoryParams" :key="index" size="small" style="vertical-align: unset;" :disabled="!!editObject.id">
               <template #prepend>{{param.key}}</template>
             </el-input-number>-->
             <template v-for="(param, index) in editObject.categoryParams" :key="index">
-              <el-input-number v-if="param.labelType === 'input'" v-model="param.value" placeholder=" " size="small" style="vertical-align: unset;" :disabled="!!editObject.id">
+              <el-input-number v-if="param.labelType === 'input'" v-model="param.value" placeholder=" " class="report__params-vertical" :disabled="!!editObject.id">
                 <template #prepend>{{param.key}}</template>
               </el-input-number>
               <el-select v-model="param.value"
@@ -242,8 +227,6 @@
                          placeholder=" "
                          filterable
                          :disabled="!!editObject.id"
-                         popper-class="right-box-select-dropdown right-box-select-report "
-                         size="small"
               >
                 <template #prefix>
                   {{$t(param.i18n)}}
@@ -260,10 +243,10 @@
       </div>
     </div>
     <div class="right-box__footer">
-      <button id="asset-edit-cancel" v-cancel="{object: editObject, func: esc}" class="footer__btn footer__btn--light">
+      <button id="asset-edit-cancel" v-cancel="{object: editObject, func: esc}" class="business-button business-button--light">
         <span>{{$t('overall.cancel')}}</span>
       </button>
-      <button id="asset-edit-save" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save">
+      <button id="asset-edit-save" :disabled="blockOperation.save" class="business-button" @click="save">
         <span>{{$t('overall.save')}}</span>
       </button>
     </div>
@@ -528,8 +511,8 @@ export default {
   methods: {
     initDateCalendarPreIcon() {
       this.$nextTick(() => {
-        let datePrefixIcon = document.getElementsByClassName('el-input__prefix-inner')
-        if(datePrefixIcon && datePrefixIcon.length > 0) {
+        const datePrefixIcon = document.getElementsByClassName('el-input__prefix-inner')
+        if (datePrefixIcon && datePrefixIcon.length > 0) {
           Array.prototype.forEach.call(datePrefixIcon, function (element) {
             element.innerHTML = '<i class="el-input__icon cn-icon cn-icon-shijian"></i>'
           })
diff --git a/src/components/rightBox/settings/I18nBox.vue b/src/components/rightBox/settings/I18nBox.vue
index 47653fb4..82b9ed8a 100644
--- a/src/components/rightBox/settings/I18nBox.vue
+++ b/src/components/rightBox/settings/I18nBox.vue
@@ -12,12 +12,12 @@
           <!--name-->
           <el-form-item :label="$t('overall.name')" prop="name">
             <el-input id="account-input-name" v-model="editObject.name" :disabled="editObject.name==='admin' && editObject.id === 1"
-                      maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
+                      maxlength="64" placeholder="" show-word-limit type="text"></el-input>
           </el-form-item>
           <!--code-->
           <el-form-item :label="$t('config.i18n.code')" prop="code">
             <el-input id="account-input-code" v-model="editObject.code" :disabled="editObject.code==='admin' && editObject.id === 1"
-                      maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
+                      maxlength="64" placeholder="" show-word-limit type="text"></el-input>
           </el-form-item>
           <!--lang-->
           <el-form-item :label="$t('config.i18n.lang')" prop="lang">
@@ -28,7 +28,7 @@
                        collapse-tags
                        placeholder=" "
                        popper-class="right-box-select-dropdown prevent-clickoutside"
-                       size="small"
+
                        @change="()=>{ this.$forceUpdate() }">
               <template v-for="role in langData" :key="role.value">
                 <el-option :label="role.value" :value="role.value"></el-option>
@@ -38,7 +38,7 @@
           <!--value-->
           <el-form-item :label="$t('config.i18n.value')" label-width="200px" prop="value">
             <el-input id="account-input-value" v-model="editObject.value"  maxlength="256" placeholder=""
-                      show-word-limit size="small"></el-input>
+                      show-word-limit></el-input>
           </el-form-item>
         </el-form>
       </div>
diff --git a/src/components/rightBox/settings/RoleBox.vue b/src/components/rightBox/settings/RoleBox.vue
index 7f6ce74f..f8f0fbee 100644
--- a/src/components/rightBox/settings/RoleBox.vue
+++ b/src/components/rightBox/settings/RoleBox.vue
@@ -12,7 +12,7 @@
           <!--name-->
           <el-form-item :label="$t('config.roles.name')" prop="name">
             <el-input  maxlength="64" placeholder="" id="role-box-input-name"
-                       show-word-limit size="small" type="text" v-model="editRole.name"></el-input>
+                       show-word-limit type="text" v-model="editRole.name"></el-input>
           </el-form-item>
           <el-form-item :label="$t('overall.remark')">
             <el-input maxlength="255" show-word-limit :rows="2" size='mini' type="textarea" v-model="editRole.remark" id="role-box-input-remark"/>
@@ -38,10 +38,10 @@
       </div>
     </div>
     <div class="right-box__footer">
-      <button id="asset-edit-cancel" v-cancel="{object: editRole, func: esc}" class="footer__btn footer__btn--light">
+      <button id="asset-edit-cancel" v-cancel="{object: editRole, func: esc}" class="business-button business-button--light">
         <span>{{$t('overall.cancel')}}</span>
       </button>
-      <button id="asset-edit-save" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save">
+      <button id="asset-edit-save" :disabled="blockOperation.save" class="business-button" @click="save">
         <span>{{$t('overall.save')}}</span>
       </button>
     </div>
diff --git a/src/components/rightBox/settings/UserBox.vue b/src/components/rightBox/settings/UserBox.vue
index a6cfa6c9..a4c55479 100644
--- a/src/components/rightBox/settings/UserBox.vue
+++ b/src/components/rightBox/settings/UserBox.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="right-box right-box-user">
     <div class="right-box__header">
-      <div class="header__title">{{editObject.id ? $t('config.user.editUser') : $t('config.user.createUser')}}</div>
+      <div class="header__title">{{ editObject.id ? $t('config.user.editUser') : $t('config.user.createUser') }}</div>
       <div class="header__operation">
         <span v-cancel="{object: editObject, func: esc}"><i class="cn-icon cn-icon-close"></i></span>
       </div>
@@ -11,31 +11,33 @@
         <el-form ref="userForm" :model="editObject" :rules="editObject.id ? rules2 : rules" label-position="top" label-width="120px">
           <!--name-->
           <el-form-item :label="$t('config.user.name')" prop="name">
-            <el-input id="account-input-name" v-model="editObject.name" :disabled="editObject.username==='admin' && editObject.id === 1"
-                      minlength="2" maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
+            <el-input id="account-input-name" v-model="editObject.name"
+                      :disabled="editObject.username==='admin' && editObject.id === 1"
+                      minlength="2" maxlength="64" placeholder="" show-word-limit type="text"></el-input>
           </el-form-item>
           <!--username-->
           <el-form-item :label="$t('config.user.username')" prop="username">
-            <el-input id="account-input-username" v-model="editObject.username" :disabled="editObject.username==='admin' && editObject.id === 1"
-                      minlength="2" maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
+            <el-input id="account-input-username" v-model="editObject.username"
+                      :disabled="editObject.username==='admin' && editObject.id === 1"
+                      minlength="2" maxlength="64" placeholder="" show-word-limit type="text"></el-input>
           </el-form-item>
           <!--password-->
           <el-form-item :label="$t('config.user.pin')" prop="pin">
             <el-input id="account-input-password" v-model="editObject.pin" minlength="5" maxlength="64" placeholder=""
-                      show-word-limit size="small" type="password" @blur="pinBlur" autocomplete="new-password"></el-input>
+                      show-word-limit type="password" @blur="pinBlur" autocomplete="new-password"></el-input>
           </el-form-item>
           <!--pinChange-->
           <el-form-item :label="$t('config.user.confirmPin')" label-width="200px" prop="pinChange">
             <el-input id="account-input-pinChange" v-model="editObject.pinChange" minlength="5" maxlength="64" placeholder=""
-                      show-word-limit size="small" type="password"></el-input>
+                      show-word-limit type="password"></el-input>
           </el-form-item>
           <!--email-->
           <el-form-item label="E-mail" prop="email">
-            <el-input id="account-input-email" v-model="editObject.email" maxlength="35" show-word-limit placeholder="" size="small" type="text"></el-input>
+            <el-input id="account-input-email" v-model="editObject.email" maxlength="35" show-word-limit placeholder="" type="text"></el-input>
           </el-form-item>
           <!--mobile-->
           <el-form-item :label="$t('config.user.mobile')" prop="mobile">
-            <el-input id="account-input-mobile" v-model.number="editObject.mobile" maxlength="11" show-word-limit placeholder="" size="small" type="text"></el-input>
+            <el-input id="account-input-mobile" v-model.number="editObject.mobile" maxlength="11" show-word-limit placeholder="" type="text"></el-input>
           </el-form-item>
           <!--roles-->
           <el-form-item :label="$t('config.user.roles')" prop="roleIds">
@@ -47,7 +49,7 @@
                        collapse-tags
                        placeholder=" "
                        popper-class="right-box-select-dropdown prevent-clickoutside"
-                       size="small"
+
                        @change="()=>{ this.$forceUpdate() }">
               <template v-for="role in roleData" :key="role.id">
                 <el-option :label="role.name" :value="role.id"></el-option>
@@ -63,51 +65,34 @@
                        collapse-tags
                        placeholder=" "
                        popper-class="right-box-select-dropdown prevent-clickoutside"
-                       size="small">
+            >
               <template v-for="lang in langData" :key="lang.value">
                 <el-option :label="lang.label" :value="lang.value"></el-option>
               </template>
             </el-select>
           </el-form-item>
-          <!--theme-->
-<!--          <el-form-item :label="$t('config.user.theme')" prop="i18n">
-            <el-select id="account-input-roleIds"
-                       v-model="editObject.theme"
-                       class="right-box__select"
-                       clearable
-                       collapse-tags
-                       placeholder=" "
-                       popper-class="right-box-select-dropdown prevent-clickoutside"
-                       size="small">
-              <template v-for="theme in themeData" :key="theme.value">
-                <el-option :label="theme.label" :value="theme.value"></el-option>
-              </template>
-            </el-select>
-          </el-form-item>-->
-          <!--enable-->
           <el-form-item :label="$t('config.user.enable')">
             <el-switch
-               id="account-input-status"
-               v-model="editObject.status"
-               :disabled="(editObject.username === loginName) || (editObject.username === 'admin' && editObject.id === 1)"
-               :active-value="1"
-               :inactive-value="0">
+                id="account-input-status"
+                v-model="editObject.status"
+                :disabled="(editObject.username === loginName) || (editObject.username === 'admin' && editObject.id === 1)"
+                :active-value="1"
+                :inactive-value="0">
             </el-switch>
           </el-form-item>
 
           <el-form-item v-if="editObject.id" :label="$t('config.user.createTime')">
-            <div class="right-box-form-content-txt">{{editObject.ctime}}</div>
+            <div class="right-box-form-content-txt">{{ editObject.ctime }}</div>
           </el-form-item>
-
         </el-form>
       </div>
     </div>
     <div class="right-box__footer">
-      <button id="asset-edit-cancel" v-cancel="{object: editObject, func: esc}" class="footer__btn footer__btn--light">
-        <span>{{$t('overall.cancel')}}</span>
+      <button id="asset-edit-cancel" v-cancel="{object: editObject, func: esc}" class="business-button business-button--light">
+        <span>{{ $t('overall.cancel') }}</span>
       </button>
-      <button id="asset-edit-save" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save">
-        <span>{{$t('overall.save')}}</span>
+      <button id="asset-edit-save" :disabled="blockOperation.save" class="business-button" @click="save">
+        <span>{{ $t('overall.save') }}</span>
       </button>
     </div>
   </div>
@@ -241,7 +226,9 @@ export default {
       }
     },
     save () {
-      if (this.blockOperation.save) { return }
+      if (this.blockOperation.save) {
+        return
+      }
       this.blockOperation.save = true
 
       this.$refs.userForm.validate((valid) => {
@@ -250,7 +237,11 @@ export default {
             axios.put(this.url, this.editObject).then(res => {
               this.blockOperation.save = false
               if (res.status === 200) {
-                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.$message({
+                  duration: 2000,
+                  type: 'success',
+                  message: this.$t('tip.saveSuccess')
+                })
                 if (this.editObject.lang && this.editObject.id == localStorage.getItem(storageKey.userId)) {
                   const currentLang = localStorage.getItem(storageKey.language)
                   if (currentLang !== this.editObject.lang) {
@@ -271,7 +262,11 @@ export default {
             axios.post(this.url, this.editObject).then(res => {
               this.blockOperation.save = false
               if (res.status === 200) {
-                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.$message({
+                  duration: 2000,
+                  type: 'success',
+                  message: this.$t('tip.saveSuccess')
+                })
                 this.esc(true)
               } else {
                 this.$message.error(res.data.msg || res.data.message)
diff --git a/src/components/table/CnDataList.vue b/src/components/table/CnDataList.vue
index cbde0f95..a1d86022 100644
--- a/src/components/table/CnDataList.vue
+++ b/src/components/table/CnDataList.vue
@@ -5,23 +5,18 @@
       <div class="main-container">
         <!-- 顶部工具栏 -->
         <div class="top-tools">
-          <div class="top-tool-left" style="min-width: 300px">
+          <div class="top-tool-left">
             <slot name="top-tool-left"></slot>
             <div v-if="showLayout.indexOf('search') > -1" class="top-tool-search margin-r-20">
-              <div style="display: flex">
-                <el-input v-model="keyWord"  size="small" @keyup.enter="onSearch"></el-input>
-                <!--                <el-button icon="el-icon-search" @click="onSearch" size="small"></el-button>-->
-                <button class="top-tool-btn top-tool-btn--search" style="border-radius: 0 2px 2px 0 !important;" @click="onSearch">
+              <div class="top-tool-search__display">
+                <el-input v-model="keyWord" @keyup.enter="onSearch"></el-input>
+                <button class="business-button business-button--light top-tool-btn--search" @click="onSearch">
                   <el-icon><Search /></el-icon>
-                  <!--<i class="el-icon-search"></i>-->
                 </button>
               </div>
             </div>
           </div>
           <div class="top-tool-right">
-<!--           <el-input v-model="keyWord" value="keyWord"></el-input>
-            <el-button @click="onSearch" icon="el-icon-search" type="info" size="small" style="margin-right: 10px"></el-button>-->
-
             <slot name="top-tool-right"></slot>
             <div  v-if="showLayout.indexOf('elementSet') > -1" class="btn-customize"  @click="tools.showCustomTableTitle = true">
               <i class="cn-icon-gear cn-icon icon-gear"></i> <span> {{$t('network.customize')}}</span>
diff --git a/src/components/table/administration/OperationLogTable.vue b/src/components/table/administration/OperationLogTable.vue
index fd98207f..e31db3c2 100644
--- a/src/components/table/administration/OperationLogTable.vue
+++ b/src/components/table/administration/OperationLogTable.vue
@@ -154,9 +154,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-.list-page .cn-table .el-table:not(.chart-table) td {
-  padding: 8px 0;
-}
-</style>
diff --git a/src/components/table/administration/RoleTable.vue b/src/components/table/administration/RoleTable.vue
index 73d94bd3..6261f2cc 100644
--- a/src/components/table/administration/RoleTable.vue
+++ b/src/components/table/administration/RoleTable.vue
@@ -1,55 +1,55 @@
 <template>
   <el-table
-    id="roleTable"
-    ref="dataTable"
-    :data="tableData"
-    tooltip-effect="light"
-    empty-text=" "
-    @header-dragend="dragend"
-    @sort-change="tableDataSort"
-    @selection-change="selectionChange"
+      id="roleTable"
+      ref="dataTable"
+      :data="tableData"
+      tooltip-effect="light"
+      empty-text=" "
+      @header-dragend="dragend"
+      @sort-change="tableDataSort"
+      @selection-change="selectionChange"
   >
     <el-table-column
-      :resizable="false"
-      align="center"
-      type="selection"
-      :selectable="checkSelectable"
-      width="55">
+        :resizable="false"
+        align="center"
+        type="selection"
+        :selectable="checkSelectable"
+        width="55">
     </el-table-column>
     <!--key只使用item.prop的话，拖拽后，界面无响应，添加index后问题解决-->
     <el-table-column
-      v-for="(item, index) in customTableTitles"
-      :key="item.prop+index"
-      :fixed="item.fixed"
-      :label="item.label"
-      :min-width="`${item.minWidth}`"
-      :prop="item.prop"
-      :resizable="true"
-      :sort-orders="['ascending', 'descending']"
-      :sortable="item.sortable"
-      :width="`${item.width}`"
-      class="data-column"
+        v-for="(item, index) in customTableTitles"
+        :key="item.prop+index"
+        :fixed="item.fixed"
+        :label="item.label"
+        :min-width="`${item.minWidth}`"
+        :prop="item.prop"
+        :resizable="true"
+        :sort-orders="['ascending', 'descending']"
+        :sortable="item.sortable"
+        :width="`${item.width}`"
+        class="data-column"
     >
       <template #header>
-        <span class="data-column__span">{{item.label}}</span>
+        <span class="data-column__span">{{ item.label }}</span>
         <div class="col-resize-area"></div>
       </template>
-      <template  #default="scope" :column="item">
+      <template #default="scope" :column="item">
         <template v-if="item.prop === 'name'">
           <template v-if="scope.row.name">
-            <span>{{$t(scope.row.name)}}</span>
+            <span>{{ $t(scope.row.name) }}</span>
           </template>
           <template v-else-if="scope.row.i18n">
-            <span>{{scope.row.i18n}}</span>
+            <span>{{ scope.row.i18n }}</span>
           </template>
           <template v-else>
             <span>-</span>
           </template>
         </template>
-        <span v-else>{{scope.row[item.prop] || '-'}}</span>
+        <span v-else>{{ scope.row[item.prop] || '-' }}</span>
       </template>
     </el-table-column>
-    <template v-slot:empty >
+    <template v-slot:empty>
       <div class="table-no-data" v-if="isNoData">
         <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
       </div>
@@ -59,6 +59,7 @@
 
 <script>
 import table from '@/mixins/table'
+
 export default {
   name: 'roleTable',
   mixins: [table],
diff --git a/src/components/table/detection/GeneralSettings.vue b/src/components/table/detection/GeneralSettings.vue
index 8ea11b0a..15e438f9 100644
--- a/src/components/table/detection/GeneralSettings.vue
+++ b/src/components/table/detection/GeneralSettings.vue
@@ -43,7 +43,7 @@
     <!--category-->
     <el-form ref="form" :model="settingObj" label-position="top" :rules="rules">
       <el-form-item :label="$t('overall.category')" prop="category" class="form-setting__block margin-b-20">
-        <el-select :disabled="settingObj.ruleId" v-model="settingObj.category" class="form-setting__select" placeholder=" " size="small" @change="changeEditFlag">
+        <el-select :disabled="settingObj.ruleId" v-model="settingObj.category" class="form-setting__select" placeholder=" " @change="changeEditFlag">
           <el-option
               v-for="item in categoryList"
               :key="item.value"
@@ -55,7 +55,7 @@
 
       <!--type-->
       <el-form-item :label="$t('overall.type')" prop="eventType" class="form-setting__block margin-b-20">
-        <el-select v-model="settingObj.eventType" placeholder=" " size="small" class="form-setting__select" @change="changeEditFlag">
+        <el-select v-model="settingObj.eventType" placeholder=" " class="form-setting__select" @change="changeEditFlag">
           <el-option
               v-for="item in eventTypeList"
               :key="item.value"
@@ -101,7 +101,7 @@
     </div>
 
     <div class="form-setting__btn">
-      <el-button @click="onContinue">{{ $t('detection.create.continue') }}</el-button>
+      <button @click="onContinue" class="business-button">{{ $t('detection.create.continue') }}</button>
     </div>
   </div>
 </template>
diff --git a/src/components/table/detection/HistoryTopKeys.vue b/src/components/table/detection/HistoryTopKeys.vue
index 01fc4e6f..e633f573 100644
--- a/src/components/table/detection/HistoryTopKeys.vue
+++ b/src/components/table/detection/HistoryTopKeys.vue
@@ -49,7 +49,7 @@
           </el-table-column>
 
           <template v-slot:empty >
-            <chart-error v-if="showError" :content="errorMsg" style="line-height: 0" />
+            <chart-error v-if="showError" :content="errorMsg" class="chart-error__setting" />
           </template>
         </el-table>
       </div>
@@ -183,74 +183,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-.history-top-key {
-  width: 396px;
-  height: 520px;
-
-  .el-drawer__body {
-    border: 1px #E2E5EC solid;
-  }
-}
-.key-header {
-  height: 41px;
-  background: #F7F7F7;
-  box-shadow: 0 1px 0 0 rgba(226,229,236,1);
-  border-radius: 2px 2px 0 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 12px;
-  font-family: NotoSansHans-Medium;
-  font-size: 14px;
-  color: #353636;
-  font-weight: 500;
-
-  i {
-    font-size: 12px;
-    color: #575757;
-    cursor: pointer;
-  }
-}
-
-.key-search {
-  margin-left: 12px;
-  margin-top: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .key-search-icon {
-    font-size: 13px;
-    color: #999999;
-  }
-
-  .key-refresh {
-    margin: 0 10px;
-    color: #38ACD2;
-    font-size: 14px;
-    height: 28px;
-    line-height: 28px;
-    cursor: pointer;
-  }
-}
-
-.key-total {
-  margin: 10px 12px;
-  font-family: NotoSansSChineseRegular;
-  font-size: 14px;
-  color: #999999;
-  line-height: 21px;
-  font-weight: 400;
-
-  .key-total-number {
-    color: #666666;
-    margin-left: 4px;
-  }
-}
-
-.el-table .key-click-row {
-  background: #F5F7FA !important;
-}
-</style>
diff --git a/src/components/table/detection/RuleDefinition.vue b/src/components/table/detection/RuleDefinition.vue
index f1dba07f..0bd9e4c8 100644
--- a/src/components/table/detection/RuleDefinition.vue
+++ b/src/components/table/detection/RuleDefinition.vue
@@ -5,7 +5,7 @@
         <el-form ref="form" :model="thresholdRuleObj" label-position="top" :rules="rules">
           <!--source-->
           <el-form-item :label="$t('config.user.source')" prop="dataSource" class="form-setting__block margin-b-20">
-            <el-select v-model="thresholdRuleObj.dataSource" placeholder=" " size="small" class="form-setting__select">
+            <el-select v-model="thresholdRuleObj.dataSource" placeholder=" " class="form-setting__select">
               <el-option
                   v-for="item in sourceList"
                   :key="item.value"
@@ -38,7 +38,7 @@
           <div class="block-title1">{{ $t('detections.filters') }}</div>
           <div class="definition-filter-block" v-if="showFilter">
             <div class="definition-filter-item" v-for="(item, index) in thresholdRuleObj.filterList" :key="index">
-              <el-select class="filter-item__select margin-r-8" v-model="item.filter" placeholder=" " size="small">
+              <el-select class="filter-item__select margin-r-8" v-model="item.filter" placeholder=" ">
                 <el-option
                     v-for="item in selectList"
                     :key="item.value"
@@ -46,10 +46,10 @@
                     :value="item.value"
                 />
               </el-select>
-              <el-input class="filter-item__input margin-r-8" size="small" disabled placeholder="equal"></el-input>
+              <el-input class="filter-item__input margin-r-8" disabled placeholder="equal"></el-input>
               <el-input
                   class="filter-item__input margin-r-8"
-                  size="small"
+
                   oninput="value=value.replace(/[^\d]/g,'')"
                   v-model="item.value"></el-input>
               <i class="cn-icon cn-icon-close" @click="delFilterItem(index, item)"></i>
@@ -70,7 +70,7 @@
           <el-form ref="form2" :model="thresholdRuleObj" label-position="top">
           <div class="definition-condition-block" v-for="(item, index) in thresholdRuleObj.conditionData" :key="index">
             <el-form-item :label="$t('detection.level')" :prop="`conditionData.${index}.level`" :rules="rules.level">
-              <el-select class="condition__select margin-b-20" v-model="item.level" placeholder=" " size="small">
+              <el-select class="condition__select margin-b-20" v-model="item.level" placeholder=" ">
                 <template #prefix>
                   <div
                       class="condition__select__icon"
@@ -92,7 +92,7 @@
                 <div class="metric-item1__text">
                   <span style="margin-right: 9px;">If</span>
                   <el-form-item :prop="`conditionData.${index}.list.${i}.metric`" :rules="rules.metric">
-                    <el-select v-model="data.metric" placeholder=" " size="small">
+                    <el-select v-model="data.metric" placeholder=" ">
                       <el-option
                           v-for="item in metricList"
                           :key="item.label"
@@ -116,7 +116,7 @@
               <div class="condition-metric-item2">
                 <div style="height: 24px;line-height: 24px;display: flex;">
                   <el-form-item :prop="`conditionData.${index}.list.${i}.condition`" :rules="rules.condition">
-                    <el-select class="metric-item2__select" v-model="data.condition" placeholder=" " size="small">
+                    <el-select class="metric-item2__select" v-model="data.condition" placeholder=" ">
                       <el-option
                           v-for="item in conditionList"
                           :key="item.label"
@@ -132,7 +132,7 @@
                         class="metric-item2__input"
                         v-model.number="data.value"
                         oninput="value=value.replace(/[^\d]/g,'')"
-                        size="small"></el-input>
+                       ></el-input>
                   </el-form-item>
                 </div>
 
@@ -165,7 +165,7 @@
       <el-form ref="form" :model="indicatorRuleObj" label-position="top" :rules="rules">
         <!--Source-->
         <el-form-item :label="$t('config.user.source')" prop="dataSource" class="form-setting__block margin-b-20">
-          <el-select v-model="indicatorRuleObj.dataSource" class="form-setting__select" placeholder=" " size="small" @change="handleParamsComplete">
+          <el-select v-model="indicatorRuleObj.dataSource" class="form-setting__select" placeholder=" " @change="handleParamsComplete">
             <el-option
                 v-for="item in sourceList"
                 :key="item.value"
@@ -177,7 +177,7 @@
 
         <!--Library-->
         <el-form-item :label="$t('detection.library')" prop="knowledgeId" class="form-setting__block margin-b-20">
-          <el-select v-model="indicatorRuleObj.knowledgeId" class="form-setting__select" filterable placeholder=" " size="small" @change="handleParamsComplete">
+          <el-select v-model="indicatorRuleObj.knowledgeId" class="form-setting__select" filterable placeholder=" " @change="handleParamsComplete">
             <el-option
                 v-for="item in libraryList"
                 :key="item.knowledgeId"
@@ -189,7 +189,7 @@
 
         <!--Level-->
         <el-form-item :label="$t('detection.level')" prop="level" class="form-setting__block">
-          <el-select v-model="indicatorRuleObj.level" class="condition__select form-setting__select" placeholder=" " size="small" @change="handleParamsComplete">
+          <el-select v-model="indicatorRuleObj.level" class="condition__select form-setting__select" placeholder=" " @change="handleParamsComplete">
             <template #prefix>
               <div
                   class="condition__select__icon"
@@ -208,7 +208,7 @@
     </div>
 
     <div class="form-setting__btn">
-      <el-button @click="onContinue">{{ $t('detection.create.continue') }}</el-button>
+      <button @click="onContinue" class="business-button">{{ $t('detection.create.continue') }}</button>
     </div>
   </div>
 </template>
diff --git a/src/components/table/setting/knowledgeBaseTableForCard.vue b/src/components/table/setting/knowledgeBaseTableForCard.vue
index 2405ee10..0993115d 100644
--- a/src/components/table/setting/knowledgeBaseTableForCard.vue
+++ b/src/components/table/setting/knowledgeBaseTableForCard.vue
@@ -1,23 +1,23 @@
 <template>
   <template v-if="!isNoData">
-    <div class="card-type-title" style="margin-top:4px;"  v-if="websketchList.length > 0">{{$t('knowledgeBase.websketchIntegration')}}</div>
-    <el-checkbox-group v-model="checkList" >
+    <div class="card-type-title" v-if="websketchList.length > 0">{{ $t('knowledgeBase.websketchIntegration') }}</div>
+    <el-checkbox-group v-model="checkList">
       <div class="card-box" v-for="data in websketchList" :key="data.knowledgeId">
-        <div @click="isSelectedStatus && data.isBuiltIn !== 1 && clickCard(data,$event)"  @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" class="card-item"  :class="data.isSelected ? 'card-selected' : ''">
+        <div @click="isSelectedStatus && data.isBuiltIn !== 1 && clickCard(data,$event)" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" class="card-item" :class="data.isSelected ? 'card-selected' : ''">
           <div class="card-content">
             <div class="card-icon">
-              <img :src="data.iconUrl"/>
+              <img :src="data.iconUrl" alt=""/>
             </div>
             <div class="card-title">
-              <div class="card-title-name" :title="$t(data.label)">{{$t(data.label)}}</div>
+              <div class="card-title-name" :title="$t(data.label)">{{ $t(data.label) }}</div>
             </div>
-            <div class="card-desc" :title="data.desc ? $t(data.desc) : '—'">{{data.desc ? $t(data.desc) : '—'}}</div>
+            <div class="card-desc" :title="data.desc ? $t(data.desc) : '—'">{{ data.desc ? $t(data.desc) : '—' }}</div>
           </div>
           <div class="card-operate__footer">
             <button v-if="data.showUpdate && hasPermission('editBuiltInKnowledgeBase')" :title="$t('overall.update')" class="top-tool-btn--update"
                     @click="jumpToUpdatePage(data,false)">
               <i class="cn-icon-update-knowledge-base cn-icon"></i>
-              <span>{{$t('overall.update')}}</span>
+              <span>{{ $t('overall.update') }}</span>
             </button>
           </div>
         </div>
@@ -35,17 +35,17 @@
                :class="showAddUpdateDialog ? 'update-knowledge update-knowledge--upload' : 'update-knowledge'"
                :before-close="beforeClose"
                :after-close="handleClose">
-      <div class="knowledge-update__top" >
+      <div class="knowledge-update__top">
         <div class="update-left__icon">
-          <img width="60" height="60" :src="updateKnowledge.iconUrl"/>
+          <img width="60" height="60" :src="updateKnowledge.iconUrl" alt=""/>
         </div>
         <div class="update-right">
           <div class="knowledge-enable">
             <div class="update-title">
-              <div class="card-title-name" :title="$t(updateKnowledge.label)">{{$t(updateKnowledge.label)}}</div>
+              <div class="card-title-name" :title="$t(updateKnowledge.label)">{{ $t(updateKnowledge.label) }}</div>
             </div>
             <el-switch v-model="updateKnowledge.status"
-                       active-color="#38ACD2"
+                       active-color="var(--el-color-business)"
                        inactive-color="#C0CEDB"
                        :active-value="1"
                        :inactive-value="0"
@@ -54,43 +54,43 @@
             >
             </el-switch>
           </div>
-          <div class="knowledge-desc" :title="updateKnowledge.desc ? $t(updateKnowledge.desc) : '-'">{{updateKnowledge.desc ? $t(updateKnowledge.desc) : '-'}}</div>
+          <div class="knowledge-desc" :title="updateKnowledge.desc ? $t(updateKnowledge.desc) : '-'">{{ updateKnowledge.desc ? $t(updateKnowledge.desc) : '-' }}</div>
         </div>
       </div>
       <template v-if="!showAddUpdateDialog">
         <div class="knowledge-update__tab" v-if="showEnable">
-          <el-tabs  v-model="activeTab"
-                    class="update-log-tab"
-                    @tab-click="handleClick"
+          <el-tabs v-model="activeTab"
+                   class="update-log-tab"
+                   @tab-click="handleClick"
           >
-            <el-tab-pane  :label="$t('knowledgeBase.updateRecord')"
-                          name="updateRecord"
-                          key="updateRecord"
-                          ref="knowledgeUpdateRecordTab">
+            <el-tab-pane :label="$t('knowledgeBase.updateRecord')"
+                         name="updateRecord"
+                         key="updateRecord"
+                         ref="knowledgeUpdateRecordTab">
             </el-tab-pane>
-            <el-tab-pane  :label="$t('knowledgeBase.learningEngineLogs')"
-                          name="intelligenceLearning"
-                          key="intelligenceLearning"
-                          ref="knowledgeIntelligenceLearningTab">
+            <el-tab-pane :label="$t('knowledgeBase.learningEngineLogs')"
+                         name="intelligenceLearning"
+                         key="intelligenceLearning"
+                         ref="knowledgeIntelligenceLearningTab">
             </el-tab-pane>
           </el-tabs>
           <div class="update-operate">
             <button :title="$t('overall.update')" class="top-tool-btn--update"
                     @click="uploadRecord"><!--:disabled="hasUpdatingRecord"-->
               <i class="cn-icon-update-knowledge-base cn-icon"></i>
-              <span>{{$t('overall.update')}}</span>
+              <span>{{ $t('overall.update') }}</span>
             </button>
           </div>
         </div>
         <div class="knowledge-update" v-else>
-          <div class="update-title" >
-            <div class="card-title-name">{{$t('knowledgeBase.updateRecord')}}</div>
+          <div class="update-title">
+            <div class="card-title-name">{{ $t('knowledgeBase.updateRecord') }}</div>
           </div>
           <div class="update-operate">
             <button :title="$t('overall.update')" class="top-tool-btn--update"
                     @click="uploadRecord"><!--   :disabled="hasUpdatingRecord" -->
               <i class="cn-icon-update-knowledge-base cn-icon"></i>
-              <span>{{$t('overall.update')}}</span>
+              <span>{{ $t('overall.update') }}</span>
             </button>
           </div>
         </div>
@@ -109,19 +109,19 @@
                   }"
                   :cell-style="myCellStyle"
                   :header-cell-style="myHeaderCellStyle">
-          <el-table-column prop="opTime" :label="$t('entities.tab.informationAggregation.updateTime')" width="150" >
+          <el-table-column prop="opTime" :label="$t('entities.tab.informationAggregation.updateTime')" width="150">
             <template #default="scope" :column="item">
-              <span>{{scope.row.opTime ? dateFormatByAppearance(scope.row.opTime) : '-'}}</span>
+              <span>{{ scope.row.opTime ? dateFormatByAppearance(scope.row.opTime) : '-' }}</span>
             </template>
           </el-table-column>
           <el-table-column prop="user" :label="$t('knowledgeBase.operator')" width="150" v-if="updateKnowledge.source !== 'cn_psiphon3_ip' || activeTab === 'updateRecord'">
             <template #default="scope" :column="item">
-              <span>{{$_.get(scope.row, 'user.name', '-')}}</span>
+              <span>{{ $_.get(scope.row, 'user.name', '-') }}</span>
             </template>
           </el-table-column>
-          <el-table-column prop="commitVersion" :label="$t('overall.version')" width="150"  ></el-table-column>
+          <el-table-column prop="commitVersion" :label="$t('overall.version')" width="150"></el-table-column>
           <el-table-column prop="description" :label="$t('overall.remark')"></el-table-column>
-          <template v-slot:empty >
+          <template v-slot:empty>
             <div class="table-no-data" v-if="updateHistoryList.length === 0 && !updateLogLoading">
               <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
             </div>
@@ -130,12 +130,12 @@
         </el-table>
 
         <div class="psiphon3" v-if="updateKnowledge.source === 'cn_psiphon3_ip' && activeTab === 'intelligenceLearning'">
-          <div class="psiphon3-title">{{$t('knowledgeBase.psiphon3IpCount')}}</div>
+          <div class="psiphon3-title">{{ $t('knowledgeBase.psiphon3IpCount') }}</div>
           <div class="psiphon3-bar">
             <chart-error v-if="showErrorForPsiphon3" :content="errorMsgForPsiphon3"/>
             <div class="bar-header" v-else>
               <div class="bar-header-left">
-                <div class="bar-value-active" ></div>
+                <div class="bar-value-active"></div>
                 <div class="bar-value">
                   <template v-for="(item, index) in tabs" :key="index">
                     <div class="bar-value-tabs"
@@ -146,7 +146,7 @@
                     >
                       <div class="bar-value-tabs-name">
                         <div :class="item.class"></div>
-                        <div class="tabs-name" >{{ $t(item.name) }}</div>
+                        <div class="tabs-name">{{ $t(item.name) }}</div>
                       </div>
                     </div>
                   </template>
@@ -156,12 +156,11 @@
                 <div class="bar-select-time">
                   <div class="bar-select__operation">
                     <el-select
-                            size="small"
-                            v-model="selectTime"
-                            placeholder=" "
-                            popper-class="common-select"
-                            :teleported="false"
-                            @change="timeChange"
+                        v-model="selectTime"
+                        placeholder=" "
+                        popper-class="common-select"
+                        :teleported="false"
+                        @change="timeChange"
                     >
                       <template #prefix>
                         <div class="calendar-popover-text"><i class="cn-icon cn-icon-Data"></i></div>
@@ -172,7 +171,7 @@
                 </div>
               </div>
             </div>
-            <div style="height: calc(100% - 24px); position: relative">
+            <div class="bar-chart">
               <chart-no-data v-if="isNoDataForPsiphon3 && !showErrorForPsiphon3 && !psiphon3Loading"></chart-no-data>
               <loading :loading="psiphon3Loading"></loading>
               <div class="chart-drawing" v-show="!isNoDataForPsiphon3 && !showErrorForPsiphon3" id="psiphonBarChart"></div>
@@ -187,7 +186,7 @@
             <!--name-->
             <el-form-item :label="$t('overall.name')" prop="name">
               <el-input class="form-input" maxlength="64" placeholder="" disabled show-word-limit
-                        size="small" type="text" v-model="updateObject.label"></el-input>
+                        type="text" v-model="updateObject.label"></el-input>
             </el-form-item>
             <el-form-item :label="$t('knowledge.upload')" prop="file">
               <el-upload :action="`${baseUrl}${apiVersion}/knowledgeBase/items/batch`"
@@ -201,7 +200,7 @@
                          :on-error="uploadError"
                          :class="uploadErrorTip ? 'el-upload--error' : ''"
                          :accept="fileTypeLimit"
-                         style="margin-bottom: -10px"
+                         class="item__content__margin"
                          :auto-upload="false"
                          ref="knowledgeUpload"
                          id="knowledgeUpload"
@@ -212,11 +211,11 @@
 
             <el-form-item :label="$t('knowledge.version')" prop="version">
               <el-input class="form-input" maxlength="64" placeholder="" disabled show-word-limit
-                        size="small" type="text" v-model="currentVersion"></el-input>
+                        type="text" v-model="currentVersion"></el-input>
             </el-form-item>
             <el-form-item :label="$t('overall.remark')" prop="description" class="knowledge-remark">
-              <el-input  maxlength="255" show-word-limit :rows="4" size='mini' type="textarea" resize='none'
-                         v-model="updateObject.description" id="role-box-input-remark"/>
+              <el-input maxlength="255" show-word-limit :rows="4" size='mini' type="textarea" resize='none'
+                        v-model="updateObject.description" id="role-box-input-remark"/>
             </el-form-item>
           </el-form>
         </div>
@@ -231,7 +230,7 @@
                class="update-knowledge-tip"
                :width="480"
                :before-close="handleConfirmClose">
-      <div class="dialog-message">{{$t('knowledge.updateTips')}}</div>
+      <div class="dialog-message">{{ $t('knowledge.updateTips') }}</div>
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="showConfirmDialog = false">{{ $t('overall.cancel') }}</el-button>
@@ -243,206 +242,227 @@
 </template>
 
 <script>
-  import table from '@/mixins/table'
-  import Loading from '@/components/common/Loading'
-  import { getSecond, getMillisecond, xAxisTimeFormatter, xAxisTimeRich } from '@/utils/date-util'
-  import { knowledgeCategoryValue, unitTypes, storageKey, builtInKnowledgeBaseBasicInfo, knowledgeCardUpdateRecordType } from '@/utils/constants'
-  import { ref, shallowRef } from 'vue'
-  import { api } from '@/utils/api'
-  import { detectionTooltipFormatter } from '@/views/charts/charts/tools'
-  import ChartNoData from '@/views/charts/charts/ChartNoData'
-  import axios from 'axios'
-  import _ from 'lodash'
-  import * as echarts from 'echarts'
-  import unitConvert from '@/utils/unit-convert'
+import table from '@/mixins/table'
+import Loading from '@/components/common/Loading'
+import { getSecond, getMillisecond, xAxisTimeFormatter, xAxisTimeRich } from '@/utils/date-util'
+import {
+  knowledgeCategoryValue,
+  unitTypes,
+  storageKey,
+  builtInKnowledgeBaseBasicInfo,
+  knowledgeCardUpdateRecordType
+} from '@/utils/constants'
+import { ref, shallowRef } from 'vue'
+import { api } from '@/utils/api'
+import { detectionTooltipFormatter } from '@/views/charts/charts/tools'
+import ChartNoData from '@/views/charts/charts/ChartNoData'
+import axios from 'axios'
+import _ from 'lodash'
+import * as echarts from 'echarts'
+import unitConvert from '@/utils/unit-convert'
 
-  export default {
-    name: 'knowledgeBaseTableForCard',
-    mixins: [table],
-    props: {
-      isNoData: {
-        type: Boolean,
-        default: false
-      },
-      isSelectedStatus: {
-        type: Boolean
-      }
+export default {
+  name: 'knowledgeBaseTableForCard',
+  mixins: [table],
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
     },
-    components: {
-      Loading,
-      ChartNoData
-    },
-    data () {
-      return {
-        tableTitle: [],
-        checkList: [],
-        websketchList: [],
-        showUpdateDialog: false,
-        showConfirmDialog: false,
-        showAddUpdateDialog: false,
-        updateKnowledge: {},
-        showEnable: false,
-        updateHistoryList: [],
-        updateObject: {},
-        currentVersion: 0,
-        uploadLoading: false,
-        psiphon3Loading: false,
-        updateLogLoading: false,
-        showConfirmSwitch: false,
-        // timer: null,
-        switchKnowledgeId: '',
-        activeTab: 'updateRecord',
-        isNoDataForPsiphon3: false,
-        showErrorForPsiphon3: false,
-        errorMsgForPsiphon3: '',
-        leftOffset: 0,
-        tabType: 'total',
-        mousemoveCursor: '',
-        selectTime: 1440,
-        // hasUpdatingRecord: false,
-        tabs: [
-          {
-            name: 'knowledgeBase.total',
-            class: 'total',
-            color: '#00A7AB',
-            data: []
-          },
-          {
-            name: 'knowledgeBase.active',
-            class: 'active',
-            color: '#7FA054',
-            data: []
-          },
-          {
-            name: 'knowledgeBase.new',
-            class: 'new',
-            color: '#98709B',
-            data: []
-          }
-        ],
-        dateRangeArr: [
-          { value: 1440, name: this.$t('dateTime.last1Day') },
-          { value: 2880, name: this.$t('dateTime.last2Days') },
-          { value: 10080, name: this.$t('dateTime.last7Days') },
-          { value: 21600, name: this.$t('dateTime.last15Days') },
-          { value: 43200, name: this.$t('dateTime.last30Days') }
-        ],
-        myCellStyle: {
-          padding: '6px 0px',
-          'font-size': '12px',
-          color: '#353636',
-          'font-weight': 400,
-          'line-height': '20px',
-          'border-right': 'none'
+    isSelectedStatus: {
+      type: Boolean
+    }
+  },
+  components: {
+    Loading,
+    ChartNoData
+  },
+  data () {
+    return {
+      tableTitle: [],
+      checkList: [],
+      websketchList: [],
+      showUpdateDialog: false,
+      showConfirmDialog: false,
+      showAddUpdateDialog: false,
+      updateKnowledge: {},
+      showEnable: false,
+      updateHistoryList: [],
+      updateObject: {},
+      currentVersion: 0,
+      uploadLoading: false,
+      psiphon3Loading: false,
+      updateLogLoading: false,
+      showConfirmSwitch: false,
+      // timer: null,
+      switchKnowledgeId: '',
+      activeTab: 'updateRecord',
+      isNoDataForPsiphon3: false,
+      showErrorForPsiphon3: false,
+      errorMsgForPsiphon3: '',
+      leftOffset: 0,
+      tabType: 'total',
+      mousemoveCursor: '',
+      selectTime: 1440,
+      // hasUpdatingRecord: false,
+      tabs: [
+        {
+          name: 'knowledgeBase.total',
+          class: 'total',
+          color: '#00A7AB',
+          data: []
         },
-        myHeaderCellStyle: {
-          padding: '8px 0px',
-          'font-size': '12px',
-          color: '#353636',
-          'font-weight': 500,
-          'border-right': 'none',
-          background: '#f5f7fa',
-          fontWeight: '400',
-          fontSize: '12px',
-          borderRight: 'none',
-          borderBottom: 'none'
+        {
+          name: 'knowledgeBase.active',
+          class: 'active',
+          color: 'var(--el-color-success)',
+          data: []
+        },
+        {
+          name: 'knowledgeBase.new',
+          class: 'new',
+          color: '#98709B',
+          data: []
         }
-      }
-    },
-    setup () {
-      // 没上传过文件的提示
-      const uploadErrorTip = ref('')
-      return {
-        baseUrl: BASE_CONFIG.baseUrl,
-        apiVersion: BASE_CONFIG.apiVersion,
-        uploadHeaders: {
-          'Cn-Authorization': localStorage.getItem(storageKey.token)
+      ],
+      dateRangeArr: [
+        {
+          value: 1440,
+          name: this.$t('dateTime.last1Day')
         },
-        uploadErrorTip,
-        fileTypeLimit: '.csv',
-        fileList: ref([]),
-        uploadFileSizeLimit: 1024 * 1024 * 1024,
-        myChart: shallowRef(null),
-        chartOption: shallowRef(null)
+        {
+          value: 2880,
+          name: this.$t('dateTime.last2Days')
+        },
+        {
+          value: 10080,
+          name: this.$t('dateTime.last7Days')
+        },
+        {
+          value: 21600,
+          name: this.$t('dateTime.last15Days')
+        },
+        {
+          value: 43200,
+          name: this.$t('dateTime.last30Days')
+        }
+      ],
+      myCellStyle: {
+        padding: '6px 0px',
+        'font-size': '12px',
+        color: 'var(--el-text-color-primary)',
+        'font-weight': 400,
+        'line-height': '20px',
+        'border-right': 'none'
+      },
+      myHeaderCellStyle: {
+        padding: '8px 0px',
+        'font-size': '12px',
+        color: 'var(--el-text-color-primary)',
+        'font-weight': 500,
+        'border-right': 'none',
+        background: 'var(--el-border-color-extra-light)',
+        fontWeight: '400',
+        fontSize: '12px',
+        borderRight: 'none',
+        borderBottom: 'none'
       }
-    },
-    methods: {
-      echartsInit (echartsData) {
-        const _this = this
-        const curTab = this.tabs.find(item => item.class === _this.tabType)
-        this.chartOption = {
-          color: curTab.color,
-          legend: {
+    }
+  },
+  setup () {
+    // 没上传过文件的提示
+    const uploadErrorTip = ref('')
+    return {
+      baseUrl: BASE_CONFIG.baseUrl,
+      apiVersion: BASE_CONFIG.apiVersion,
+      uploadHeaders: {
+        'Cn-Authorization': localStorage.getItem(storageKey.token)
+      },
+      uploadErrorTip,
+      fileTypeLimit: '.csv',
+      fileList: ref([]),
+      uploadFileSizeLimit: 1024 * 1024 * 1024,
+      myChart: shallowRef(null),
+      chartOption: shallowRef(null)
+    }
+  },
+  methods: {
+    echartsInit (echartsData) {
+      const _this = this
+      const curTab = this.tabs.find(item => item.class === _this.tabType)
+      this.chartOption = {
+        color: curTab.color,
+        legend: {
+          show: false
+        },
+        tooltip: {
+          show: true,
+          formatter: (params) => {
+            params.seriesName = this.$t(params.seriesName)
+            params.borderColor = params.color
+            return detectionTooltipFormatter(params)
+          }
+        },
+        grid: {
+          top: '12%',
+          left: '2%',
+          right: '2%',
+          bottom: 24,
+          containLabel: true
+        },
+        xAxis: {
+          type: 'time',
+          axisLine: {
             show: false
           },
-          tooltip: {
-            show: true,
-            formatter: (params) => {
-              params.seriesName = this.$t(params.seriesName)
-              params.borderColor = params.color
-              return detectionTooltipFormatter(params)
-            }
+          axisTick: {
+            show: false
           },
-          grid: {
-            top: '12%',
-            left: '2%',
-            right: '2%',
-            bottom: 24,
-            containLabel: true
-          },
-          xAxis: {
-            type: 'time',
-            axisLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
-            axisLabel: {
-              formatter: xAxisTimeFormatter,
-              rich: xAxisTimeRich
-            }
-          },
-          yAxis: {
-            type: 'value',
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: '#ECECEC'
-              }
-            },
-            axisLabel: {
-              margin: 20
-            },
-            minInterval: 1
-          },
-          series: [
-            {
-              name: curTab.name,
-              data: echartsData,
-              type: 'bar',
-              barWidth: 26
-            }
-          ]
-        }
-
-        this.$nextTick(() => {
-          if (!this.myChart) {
-            this.myChart = echarts.init(document.getElementById('psiphonBarChart'))
+          axisLabel: {
+            formatter: xAxisTimeFormatter,
+            rich: xAxisTimeRich
           }
-          this.myChart.setOption(this.chartOption)
-        })
-      },
-      init () {
-        this.psiphon3Loading = true
-        const endTime = window.$dayJs.tz().valueOf()
-        const params = {
-          startTime: getSecond(endTime - this.selectTime * 60 * 1000),
-          endTime: getSecond(endTime)
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#ECECEC'
+            }
+          },
+          axisLabel: {
+            margin: 20
+          },
+          minInterval: 1
+        },
+        series: [
+          {
+            name: curTab.name,
+            data: echartsData,
+            type: 'bar',
+            barWidth: 26
+          }
+        ]
+      }
+
+      this.$nextTick(() => {
+        if (!this.myChart) {
+          this.myChart = echarts.init(document.getElementById('psiphonBarChart'))
         }
-        const url = api.knowledgeBaseTimedistribution.replace('{{knowledgeId}}', this.updateKnowledge.knowledgeId).replace('{{type}}', this.tabType)
-        axios.get(url, { params: params }).then(response => {
-          const res = response.data
+        this.myChart.setOption(this.chartOption)
+      })
+    },
+    init () {
+      this.psiphon3Loading = true
+      const endTime = window.$dayJs.tz().valueOf()
+      const params = {
+        startTime: getSecond(endTime - this.selectTime * 60 * 1000),
+        endTime: getSecond(endTime)
+      }
+      const url = api.knowledgeBaseTimedistribution.replace('{{knowledgeId}}', this.updateKnowledge.knowledgeId).replace('{{type}}', this.tabType)
+      axios.get(url, { params: params }).then(response => {
+        const res = response.data
 
           if (response.status === 200) {
             this.isNoDataForPsiphon3 = res.data.result.length === 0
@@ -667,174 +687,171 @@
             }
           })
 
-   */
-        }).catch(e => {
-          console.error(e)
-        }).finally(() => {
-          this.updateLogLoading = false
-        })
-      },
-      // 切换tab
-      handleClick (tab) {
-        this.getCurTabData()
-        if (tab.index === '1') {
-          this.timeChange()
-        }
-      },
-      clearSelect () {
-        this.$nextTick(() => {
-          this.checkList = []
-          if (this.tableData && this.tableData.length > 0) {
-            this.tableData.forEach(data => {
-              data.isSelected = false
-            })
-          }
-        })
-      },
-      mouseenter (card) {
-        card.showUpdate = true
-      },
-      mouseleave (card) {
-        card.showUpdate = false
-      },
-      del (data) {
-        this.$emit('delete', data)
-      },
-      edit (id) {
-        const pageNo = this.$router.currentRoute.value.query.pageNo
-        const dataType = this.$router.currentRoute.value.query.dataType
-        this.$router.push({
-          path: '/knowledgeBase/edit',
-          query: {
-            t: +new Date(),
-            pageNoForTable: pageNo || 1,
-            id: id,
-            dataType: dataType
-          }
-        })
-      },
-      confirmSwitchLearning (id) {
-        this.showConfirmSwitch = true
-        this.switchKnowledgeId = id
-        return false
-      },
-      cancleSwitch () {
-        this.showConfirmSwitch = false
-      },
-      switchLearning () {
-        const hint = this.aiTaggingList.find(d => d.knowledgeId === this.switchKnowledgeId)
-        const toStatus = hint.status === 0 ? 1 : 0
-        const url = toStatus === 0 ? api.knowledgeBaseLearningStop : api.knowledgeBaseLearningStart
-        axios.post(`${url}?knowledgeId=${hint.knowledgeId}`).then(res => {
-          if (res.status === 200) {
-            hint.status = toStatus
-            this.$message.success(this.$t('tip.success'))
-          } else {
-            console.error(res.message)
-            this.$message.error(this.errorMsgHandler(res))
-          }
-        }).catch(e => {
-          console.error(e)
-          this.$message.error(this.errorMsgHandler(e))
-        }).finally(() => {
-          this.showConfirmSwitch = false
-        })
+ */
+      }).catch(e => {
+        console.error(e)
+      }).finally(() => {
+        this.updateLogLoading = false
+      })
+    },
+    // 切换tab
+    handleClick (tab) {
+      this.getCurTabData()
+      if (tab.index === '1') {
+        this.timeChange()
       }
     },
-    watch: {
-      tabType (n) {
-        this.timeChange()
-      },
-      /*
-      hasUpdatingRecord (n) {
-        if (n) { // update record页存在“正在更新”的记录时，每20秒自动请求一次接口
-          this.timer = setTimeout(() => {
-            this.getCurTabData()
-          }, 20000)
-        } else { // 直到出现新的记录,出现新记录后（失败或者成功）,取消定时请求接口，右上角"update"按钮恢复可用。"正在更新"和"失败”都会有对应的强调样式。
-          clearTimeout(this.timer)
+    clearSelect () {
+      this.$nextTick(() => {
+        this.checkList = []
+        if (this.tableData && this.tableData.length > 0) {
+          this.tableData.forEach(data => {
+            data.isSelected = false
+          })
         }
-      },
-      */
-      tableData: {
-        handler (n) {
-          if (this.tableData && this.tableData.length > 0) {
-            this.websketchList = []
-            this.tableData.forEach(item => {
-              item.showUpdate = false
-              const basicInfo = builtInKnowledgeBaseBasicInfo.find(bi => bi.knowledgeId === item.knowledgeId)
-              if (basicInfo) {
-                item = {
-                  ...item,
-                  ...basicInfo
-                }
-                if (item.category === knowledgeCategoryValue.webSketch) {
-                  this.websketchList.push(item)
-                }
+      })
+    },
+    mouseenter (card) {
+      card.showUpdate = true
+    },
+    mouseleave (card) {
+      card.showUpdate = false
+    },
+    del (data) {
+      this.$emit('delete', data)
+    },
+    edit (id) {
+      const pageNo = this.$router.currentRoute.value.query.pageNo
+      const dataType = this.$router.currentRoute.value.query.dataType
+      this.$router.push({
+        path: '/knowledgeBase/edit',
+        query: {
+          t: +new Date(),
+          pageNoForTable: pageNo || 1,
+          id: id,
+          dataType: dataType
+        }
+      })
+    },
+    confirmSwitchLearning (id) {
+      this.showConfirmSwitch = true
+      this.switchKnowledgeId = id
+      return false
+    },
+    switchLearning () {
+      const hint = this.aiTaggingList.find(d => d.knowledgeId === this.switchKnowledgeId)
+      const toStatus = hint.status === 0 ? 1 : 0
+      const url = toStatus === 0 ? api.knowledgeBaseLearningStop : api.knowledgeBaseLearningStart
+      axios.post(`${url}?knowledgeId=${hint.knowledgeId}`).then(res => {
+        if (res.status === 200) {
+          hint.status = toStatus
+          this.$message.success(this.$t('tip.success'))
+        } else {
+          console.error(res.message)
+          this.$message.error(this.errorMsgHandler(res))
+        }
+      }).catch(e => {
+        console.error(e)
+        this.$message.error(this.errorMsgHandler(e))
+      }).finally(() => {
+        this.showConfirmSwitch = false
+      })
+    }
+  },
+  watch: {
+    tabType () {
+      this.timeChange()
+    },
+    /*
+    hasUpdatingRecord (n) {
+      if (n) { // update record页存在“正在更新”的记录时，每20秒自动请求一次接口
+        this.timer = setTimeout(() => {
+          this.getCurTabData()
+        }, 20000)
+      } else { // 直到出现新的记录,出现新记录后（失败或者成功）,取消定时请求接口，右上角"update"按钮恢复可用。"正在更新"和"失败”都会有对应的强调样式。
+        clearTimeout(this.timer)
+      }
+    },
+    */
+    tableData: {
+      handler () {
+        if (this.tableData && this.tableData.length > 0) {
+          this.websketchList = []
+          this.tableData.forEach(item => {
+            item.showUpdate = false
+            const basicInfo = builtInKnowledgeBaseBasicInfo.find(bi => bi.knowledgeId === item.knowledgeId)
+            if (basicInfo) {
+              item = {
+                ...item,
+                ...basicInfo
               }
-            })
-          }
+              if (item.category === knowledgeCategoryValue.webSketch) {
+                this.websketchList.push(item)
+              }
+            }
+          })
         }
-      },
-      activeTab (n) {
-        if (n === 'updateRecord') {
+      }
+    },
+    activeTab (n) {
+      if (n === 'updateRecord') {
+        if (this.myChart) {
+          this.myChart.dispose()
+          this.myChart = null
+        }
+      }
+    },
+    showAddUpdateDialog: {
+      handler (n) {
+        if (!n) {
+          this.fileList = []
+          this.timeChange()
+        } else {
           if (this.myChart) {
             this.myChart.dispose()
             this.myChart = null
           }
         }
-      },
-      showAddUpdateDialog: {
-        handler (n) {
-          if (!n) {
-            this.fileList = []
-            this.timeChange()
-          } else {
-            if (this.myChart) {
-              this.myChart.dispose()
-              this.myChart = null
-            }
-          }
-        }
       }
-    },
-    mounted () {
-      this.myChart = null
-      this.chartOption = null
-      window.addEventListener('resize', this.resize)
+    }
+  },
+  mounted () {
+    this.myChart = null
+    this.chartOption = null
+    window.addEventListener('resize', this.resize)
 
-      this.websketchList = []
-      this.tableData.forEach(item => {
-        item.showUpdate = false
-        if (item.category === knowledgeCategoryValue.webSketch) {
-          this.websketchList.push(item)
-        }
-      })
-    },
-    beforeUnmount () {
-      // clearTimeout(this.timer)
-      window.removeEventListener('resize', this.resize)
-      const dom = document.getElementById('psiphonBarChart')
-      if (dom) {
-        let myChart = echarts.getInstanceByDom(document.getElementById('psiphonBarChart'))
-        if (myChart) {
-          echarts.dispose(myChart)
-        }
-        myChart = null
+    this.websketchList = []
+    this.tableData.forEach(item => {
+      item.showUpdate = false
+      if (item.category === knowledgeCategoryValue.webSketch) {
+        this.websketchList.push(item)
       }
+    })
+  },
+  beforeUnmount () {
+    // clearTimeout(this.timer)
+    window.removeEventListener('resize', this.resize)
+    const dom = document.getElementById('psiphonBarChart')
+    if (dom) {
+      let myChart = echarts.getInstanceByDom(document.getElementById('psiphonBarChart'))
+      if (myChart) {
+        echarts.dispose(myChart)
+      }
+      myChart = null
+    }
 
-      if (this.myChart) {
-        echarts.dispose(this.myChart)
-      }
-    },
-    computed: {
-      uploadParams () {
-        return {
-          knowledgeId: this.updateKnowledge.knowledgeId,
-          action: 'overwrite',
-          description: this.updateObject.description
-        }
+    if (this.myChart) {
+      echarts.dispose(this.myChart)
+    }
+  },
+  computed: {
+    uploadParams () {
+      return {
+        knowledgeId: this.updateKnowledge.knowledgeId,
+        action: 'overwrite',
+        description: this.updateObject.description
       }
     }
   }
+}
 </script>
diff --git a/src/main.js b/src/main.js
index 56336bca..91836aa4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -15,7 +15,6 @@ import 'highlight.js/styles/color-brewer.css'
 import '@/assets/css/main.scss' // 样式入口
 import VueGridLayout from 'vue-grid-layout'
 import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
 import bus from 'tiny-emitter'
 
 import DateTimeRange from '@/components/common/TimeRange/DateTimeRange'
@@ -24,7 +23,6 @@ import PanelChartList from '@/views/charts/PanelChartList'
 import Error from '@/components/common/Error'
 import Renderer from '@/components/advancedSearch/showhint/Hint/Renderer'
 import 'lib-flexible'
-import 'element-plus/theme-chalk/dark/css-vars.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
 const emitter = new bus()
diff --git a/src/utils/constants.js b/src/utils/constants.js
index 39c5467b..4ed8b033 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -232,32 +232,32 @@ export const eventSeverity = {
   info: 'info'
 }
 export const eventSeverityColor = {
-  critical: '#D84C4C',
-  high: '#FE845D',
-  medium: '#FFB65A',
-  low: '#FFD82D',
-  info: '#D1BD50'
+  critical: 'var(--cn-color-critical)',
+  high: 'var(--cn-color-high)',
+  medium: 'var(--cn-color-medium)',
+  low: 'var(--cn-color-low)',
+  info: 'var(--cn-color-info)'
 }
 export const riskLevelColor = {
-  5: '#D84C4C',
-  4: '#FE845D',
-  3: '#FFB65A',
-  2: '#FFD82D',
-  1: '#D1BD50'
+  5: 'var(--cn-color-critical)',
+  4: 'var(--cn-color-high)',
+  3: 'var(--cn-color-medium)',
+  2: 'var(--cn-color-low)',
+  1: 'var(--cn-color-info)'
 }
 export const riskLevelColor1 = {
-  'High Risk': '#D84C4C',
-  Suspicious: '#FE845D',
-  'Moderate Risk': '#FFB65A',
-  'Low Risk': '#FFD82D',
-  Trustworthy: '#D1BD50'
+  'High Risk': 'var(--cn-color-critical)',
+  Suspicious: 'var(--cn-color-high)',
+  'Moderate Risk': 'var(--cn-color-medium)',
+  'Low Risk': 'var(--cn-color-low)',
+  Trustworthy: 'var(--cn-color-info)'
 }
 export const eventSeverityColor1 = {
-  Critical: '#D84C4C',
-  High: '#FE845D',
-  Medium: '#FFB65A',
-  Low: '#FFD82D',
-  Info: '#D1BD50'
+  Critical: 'var(--cn-color-critical)',
+  High: 'var(--cn-color-high)',
+  Medium: 'var(--cn-color-medium)',
+  Low: 'var(--cn-color-low)',
+  Info: 'var(--cn-color-info)'
 }
 export const securityType = {
   commandAndControl: 'common and control',
@@ -2797,27 +2797,27 @@ export const securityLevel = [
   {
     value: 'critical',
     label: 'overall.critical',
-    color: '#D84C4C'
+    color: 'var(--cn-color-critical)'
   },
   {
     value: 'high',
     label: 'overall.high',
-    color: '#FE845D'
+    color: 'var(--cn-color-high)'
   },
   {
     value: 'medium',
     label: 'overall.medium',
-    color: '#FFB65A'
+    color: 'var(--cn-color-medium)'
   },
   {
     value: 'low',
     label: 'overall.low',
-    color: '#FFD82D'
+    color: 'var(--cn-color-low)'
   },
   {
     value: 'info',
     label: 'overall.info',
-    color: '#D1BD50'
+    color: 'var(--cn-color-info)'
   }
 ]
 
diff --git a/src/utils/tools.js b/src/utils/tools.js
index 6facd4d6..32fc4282 100644
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -1440,7 +1440,7 @@ export const myHighLight = {
           if (newText && newText !== '-') {
             // 此处不用el.className.indexOf('high-light-block')判断，是因为block可能会有多个，有一个满足所有的都会渲染
             if (newText.indexOf('highlight__block') > -1) {
-              el.style.cssText = el.style.cssText + 'background: #FEECC2;'
+              el.style.cssText = el.style.cssText + 'background: var(--el-color-warning-light-7);'
               // 此处是相关app、相关ip、相关domain弹窗获取不到dom的操作
               let dom
               if (document.getElementById('showRelatedApp')) {
@@ -1454,7 +1454,7 @@ export const myHighLight = {
                 if (itemDom) {
                   for (let i = 0; i < itemDom.length; i++) {
                     if (itemDom[i].innerHTML === el.innerHTML) {
-                      itemDom[i].style.cssText = itemDom[i].style.cssText + 'background: #FEECC2;'
+                      itemDom[i].style.cssText = itemDom[i].style.cssText + 'background: var(--el-color-warning-light-7);'
                     }
                   }
                 }
diff --git a/src/views/administration/Appearance.vue b/src/views/administration/Appearance.vue
index e5c4a0f2..7114041f 100644
--- a/src/views/administration/Appearance.vue
+++ b/src/views/administration/Appearance.vue
@@ -1,18 +1,17 @@
 <template>
   <div class="appearance" :class="from">
     <div class="appearance-form">
-      <el-form ref="appearanceForm" :model="appearanceObject"  label-position="top" label-width="120px">
+      <el-form ref="appearanceForm" :model="appearanceObject" label-position="top" label-width="120px">
         <el-form-item :label="$t('config.appearance.dateFormat')" prop="date_format">
           <el-select id="appearance-dateFormat"
-                     v-model="appearanceObject.date_format"
-                     collapse-tags
-                     placeholder=" "
-                     popper-class="right-box-select-dropdown right-box-select-report "
-                     size="small">
+              v-model="appearanceObject.date_format"
+              collapse-tags
+              placeholder=" "
+          >
             <template v-for="dateFormat in dateFormatList" :key="dateFormat.id">
-              <el-option :label="dateFormat.label" :value="dateFormat.value">
-                <span style="float: left">{{ dateFormat.label }}</span>
-                <span style="float: right;">{{ dateFormat.example }}</span>
+              <el-option :label="dateFormat.label" :value="dateFormat.value" class="appearance__option">
+                <span>{{ dateFormat.label }}</span>
+                <span>{{ dateFormat.example }}</span>
               </el-option>
             </template>
           </el-select>
@@ -22,8 +21,7 @@
                      v-model="appearanceObject.lang"
                      collapse-tags
                      placeholder=" "
-                     popper-class="right-box-select-dropdown right-box-select-report "
-                     size="small">
+          >
             <template v-for="lang in langList" :key="lang.id">
               <el-option :label="lang.label" :value="lang.value"></el-option>
             </template>
@@ -35,12 +33,11 @@
                      collapse-tags
                      filterable
                      placeholder=" "
-                     popper-class="right-box-select-dropdown right-box-select-report "
-                     size="small">
+          >
             <template v-for="timezone in timezoneList" :key="timezone.id">
-              <el-option :label="timezone.name" :value="timezone.name">
-                <span style="float: left">{{ timezone.name }}</span>
-                <span style="float: right;">{{ timezone.offset}}</span>
+              <el-option :label="timezone.name" :value="timezone.name" class="appearance__option">
+                <span>{{ timezone.name }}</span>
+                <span>{{ timezone.offset }}</span>
               </el-option>
             </template>
           </el-select>
@@ -48,11 +45,14 @@
         </el-form-item>
       </el-form>
       <div class="edit-appearance-base__footer">
-        <button style="position: relative;" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save"
-                v-if="hasPermission('editAppearence')"
+        <button
+            :disabled="blockOperation.save"
+            class="business-button"
+            @click="save"
+            v-if="hasPermission('editAppearence')"
         >
-          <el-loading size="small" :loading="blockOperation.save"></el-loading>
-          <span>{{$t('overall.save')}}</span>
+          <simple-loading size="small" :loading="blockOperation.save"></simple-loading>
+          <span>{{ $t('overall.save') }}</span>
         </button>
       </div>
     </div>
@@ -63,9 +63,11 @@ import { api } from '@/utils/api'
 import { storageKey, ZH, EN } from '@/utils/constants'
 import axios from 'axios'
 import dayjs from 'dayjs'
+import SimpleLoading from '@/components/common/SimpleLoading'
 
 export default {
   name: 'Appearance',
+  components: { SimpleLoading },
   data () {
     return {
       url: api.appearance,
diff --git a/src/views/administration/I18n.vue b/src/views/administration/I18n.vue
index c37f41cc..d7448a96 100644
--- a/src/views/administration/I18n.vue
+++ b/src/views/administration/I18n.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="height: 100%;">
+  <div class="administration-container__body">
     <cn-data-list
         ref="dataList"
         :tableId="tableId"
@@ -10,21 +10,17 @@
         @search="search"
     >
       <template #top-tool-left>
-        <button id="i18n-add"
-                class="top-tool-btn margin-r-10 top-tool-btn--create"
-                @click="add">
+        <button id="i18n-add" class="top-tool-btn margin-r-10 top-tool-btn--create" @click="add">
           <i class="cn-icon-xinjian cn-icon"></i>
-          <span>{{$t('overall.create')}}</span>
+          <span>{{ $t('overall.create') }}</span>
         </button>
-        <button id="i18n-edit"  class="top-tool-btn margin-r-10"  :disabled="disableEdit"
-                @click="editSelectRecord">
+        <button id="i18n-edit" class="top-tool-btn margin-r-10" :disabled="disableEdit" @click="editSelectRecord">
           <i class="cn-icon-edit cn-icon"></i>
-          <span>{{$t('overall.edit')}}</span>
+          <span>{{ $t('overall.edit') }}</span>
         </button>
-        <button id="i18n-delete"  class="top-tool-btn margin-r-10" :disabled="disableDelete"
-                @click="delBatch">
+        <button id="i18n-delete" class="top-tool-btn margin-r-10" :disabled="disableDelete" @click="delBatch">
           <i class="cn-icon-delete cn-icon"></i>
-          <span>{{$t('overall.delete')}}</span>
+          <span>{{ $t('overall.delete') }}</span>
         </button>
       </template>
       <template #default>
@@ -90,7 +86,6 @@ export default {
       tableId: 'i18nTable'
     }
   },
-  methods: {
-  }
+  methods: {}
 }
 </script>
diff --git a/src/views/administration/Index.vue b/src/views/administration/Index.vue
index 8f9dab19..e2622dc7 100644
--- a/src/views/administration/Index.vue
+++ b/src/views/administration/Index.vue
@@ -2,14 +2,14 @@
   <div class="administration entity-explorer entity-explorer--show-list">
     <!-- 顶部工具栏，在列表页显示 -->
     <div class="explorer-top-tools explorer-detection-top-tools">
-      <div class="explorer-top-tools-title">{{$t('overall.administration')}}</div>
+      <div class="explorer-top-tools-title">{{ $t('overall.administration') }}</div>
     </div>
-    <div style="width: 100%;padding-bottom: 26px;">
+    <div class="administration__tabs">
       <chart-tabs :data="tabsData" router></chart-tabs>
     </div>
     <!-- 内容区 -->
     <div class="explorer-container administration-container">
-      <router-view />
+      <router-view/>
     </div>
   </div>
 </template>
@@ -17,6 +17,7 @@
 <script>
 import ChartTabs from '@/components/common/ChartTabs'
 import { useStore } from 'vuex'
+
 export default {
   name: 'index',
   components: {
diff --git a/src/views/administration/License.vue b/src/views/administration/License.vue
index aa8ca120..43be87f6 100644
--- a/src/views/administration/License.vue
+++ b/src/views/administration/License.vue
@@ -1,26 +1,26 @@
 <template>
   <div class="license" :class="from">
     <div class="license-form">
-      <el-form ref="licenseForm" :model="licenseObject"  label-position="left" label-width="134px" size="small">
-        <el-form-item  :label="`${$t('license.type')}：`" prop="type">
-          {{licenseObject.type}}
+      <el-form ref="licenseForm" :model="licenseObject" label-position="left" label-width="134px" size="small">
+        <el-form-item :label="`${$t('license.type')}：`" prop="type">
+          {{ licenseObject.type }}
         </el-form-item>
         <el-form-item :label="`${$t('license.organization')}：`" prop="organization">
-          <div class="">{{licenseObject.organization}}</div>
+          <div class="">{{ licenseObject.organization }}</div>
         </el-form-item>
         <el-form-item :label="`${$t('license.supportId')}：`" prop="supportID">
-          <div class="">{{licenseObject.supportID}}</div>
+          <div class="">{{ licenseObject.supportID }}</div>
         </el-form-item>
         <el-form-item :label="`${$t('license.dateIssued')}：`" prop="dateIssued">
-          <div class="">{{licenseObject.dateIssued}}</div>
+          <div class="">{{ licenseObject.dateIssued }}</div>
         </el-form-item>
         <el-form-item :label="`${$t('license.dateExpires')}：`" prop="dateExpires">
-          <div class="">{{licenseObject.dateExpires}}</div>
+          <div class="">{{ licenseObject.dateExpires }}</div>
         </el-form-item>
-        <el-form-item :label="`${$t('license.licenseFile')}：`" >
+        <el-form-item :label="`${$t('license.licenseFile')}：`">
           <div class="license-file">
-            <button style="position: relative;" class="license__btn margin-r-20" @click.prevent="downloadFile">
-              <i class="cn-icon-download1 cn-icon margin-r-6"></i><span>{{$t('license.download')}}</span>
+            <button class="business-button margin-r-20" @click.prevent="downloadFile">
+              <i class="cn-icon-download1 cn-icon margin-r-6"></i><span>{{ $t('license.download') }}</span>
             </button>
             <el-upload :action="`${baseUrl}sys/license/upload`"
                        ref="licenseUpload"
@@ -34,13 +34,12 @@
                        :on-change="fileChange"
                        :on-success="uploadSuccess"
                        :on-error="uploadError">
-              <button style="position: relative;" class="license__btn" @click.prevent="">
-                <i class="cn-icon-upload1 cn-icon margin-r-6"></i><span>{{$t('license.upload')}}</span>
+              <button class="business-button" @click.prevent="">
+                <i class="cn-icon-upload1 cn-icon margin-r-6"></i><span>{{ $t('license.upload') }}</span>
               </button>
             </el-upload>
           </div>
         </el-form-item>
-
       </el-form>
     </div>
   </div>
diff --git a/src/views/administration/OperationLog.vue b/src/views/administration/OperationLog.vue
index 3c18db94..80ad938b 100644
--- a/src/views/administration/OperationLog.vue
+++ b/src/views/administration/OperationLog.vue
@@ -1,29 +1,29 @@
 <template>
-  <div style="height: 100%;">
+  <div class="administration-container__body">
     <cn-data-list
-      ref="dataList"
-      :api="url"
-      :tableId="tableId"
-      :layout="['search', 'elementSet','search']"
-      v-model:custom-table-title="tools.customTableTitle"
-      :from="fromRoute.operationLog"
-      @search="search">
+        ref="dataList"
+        :api="url"
+        :tableId="tableId"
+        :layout="['search', 'elementSet','search']"
+        v-model:custom-table-title="tools.customTableTitle"
+        :from="fromRoute.operationLog"
+        @search="search">
       <template v-slot:default>
         <loading :loading="loading"></loading>
         <operation-log-table
-          ref="dataTable"
-          :api="url"
-          :isNoData="isNoData"
-          :custom-table-title="tools.customTableTitle"
-          :height="mainTableHeight"
-          :table-data="tableData"
-          @del="del"
-          @edit="edit"
-          @orderBy="tableDataSort"
-          @reload="getTableData"
-          @selectionChange="selectionChange"
-          @search="search"
-          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></operation-log-table>
+            ref="dataTable"
+            :api="url"
+            :isNoData="isNoData"
+            :custom-table-title="tools.customTableTitle"
+            :height="mainTableHeight"
+            :table-data="tableData"
+            @del="del"
+            @edit="edit"
+            @orderBy="tableDataSort"
+            @reload="getTableData"
+            @selectionChange="selectionChange"
+            @search="search"
+            @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></operation-log-table>
       </template>
       <!-- 分页组件 -->
       <template #pagination>
diff --git a/src/views/administration/Roles.vue b/src/views/administration/Roles.vue
index b749702f..08698837 100644
--- a/src/views/administration/Roles.vue
+++ b/src/views/administration/Roles.vue
@@ -1,50 +1,46 @@
 <template>
-  <div style="height: 100%;">
+  <div class="administration-container__body">
     <cn-data-list
-            ref="dataList"
-            :tableId="tableId"
-            v-model:custom-table-title="tools.customTableTitle"
-            :api="url"
-            :from="fromRoute.roles"
-            :layout="['columnCustomize','elementSet','search']"
-            @search="search"
+        ref="dataList"
+        :tableId="tableId"
+        v-model:custom-table-title="tools.customTableTitle"
+        :api="url"
+        :from="fromRoute.roles"
+        :layout="['columnCustomize','elementSet','search']"
+        @search="search"
     >
       <template v-slot:top-tool-left>
-        <button id="roles-add"  class="top-tool-btn margin-r-10 top-tool-btn--create"
+        <button id="roles-add" class="business-button margin-r-10"
                 v-if="hasPermission('createRole')"
                 @click="add">
           <i class="cn-icon-xinjian cn-icon"></i>
-          <span>{{$t('overall.create')}}</span>
+          <span>{{ $t('overall.create') }}</span>
         </button>
-        <button id="roles-edit"  class="top-tool-btn margin-r-10" :disabled="disableEdit"
+        <button id="roles-edit" class="business-button business-button--light margin-r-10" :disabled="disableEdit"
                 v-if="hasPermission('editRole')"
                 @click="edit">
           <i class="cn-icon-edit cn-icon"></i>
-          <span>{{$t('overall.edit')}}</span>
+          <span>{{ $t('overall.edit') }}</span>
         </button>
-        <button id="roles-delete"  class="top-tool-btn margin-r-10" :disabled="disableDelete"
-                v-if="hasPermission('deleteRole')"
-                @click="delBatch">
+        <button id="roles-delete" class="business-button business-button--light margin-r-10" :disabled="disableDelete" v-if="hasPermission('deleteRole')" @click="delBatch">
           <i class="cn-icon-delete cn-icon"></i>
-          <span>{{$t('overall.delete')}}</span>
+          <span>{{ $t('overall.delete') }}</span>
         </button>
-
-        <delete-button id="role-list-batch-delete" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
       </template>
       <template v-slot:default>
         <loading :loading="loading"></loading>
         <roles-table
-          ref="dataTable"
-          :api="url"
-          :isNoData="isNoData"
-          :custom-table-title="tools.customTableTitle"
-          :height="mainTableHeight"
-          :table-data="tableData"
-          @delete="del"
-          @edit="edit"
-          @orderBy="tableDataSort"
-          @reload="getTableData"
-          @selectionChange="selectionChange"
+            ref="dataTable"
+            :api="url"
+            :isNoData="isNoData"
+            :custom-table-title="tools.customTableTitle"
+            :height="mainTableHeight"
+            :table-data="tableData"
+            @delete="del"
+            @edit="edit"
+            @orderBy="tableDataSort"
+            @reload="getTableData"
+            @selectionChange="selectionChange"
         ></roles-table>
       </template>
       <!-- 分页组件 -->
@@ -53,12 +49,12 @@
       </template>
     </cn-data-list>
     <el-drawer
-            v-model="rightBox.show"
-            direction="rtl"
-            class="common-right-box"
-            :with-header="false"
-            :size="700"
-            destroy-on-close>
+        v-model="rightBox.show"
+        direction="rtl"
+        class="common-right-box"
+        :with-header="false"
+        :size="700"
+        destroy-on-close>
       <role-box :object="object" @close="closeRightBox"></role-box>
     </el-drawer>
   </div>
@@ -101,7 +97,8 @@ export default {
         this.$alert(this.$t('tip.pleaseSelectForEdit'), {
           confirmButtonText: this.$t('tip.yes'),
           type: 'warning'
-        }).catch(() => {})
+        }).catch(() => {
+        })
       } else {
         axios.get(`${this.url}`, { params: { ids: this.batchDeleteObjs[0].id } }).then(response => {
           if (response.status === 200) {
diff --git a/src/views/administration/User.vue b/src/views/administration/User.vue
index be65e22a..2f4e4017 100644
--- a/src/views/administration/User.vue
+++ b/src/views/administration/User.vue
@@ -1,47 +1,47 @@
 <template>
-  <div style="height: 100%;">
+  <div class="administration-container__body">
     <cn-data-list
-      ref="dataList"
-      :tableId="tableId"
-      v-model:custom-table-title="tools.customTableTitle"
-      :api="url"
-      :from="fromRoute.user"
-      :layout="['columnCustomize','elementSet','search']"
-      @search="search"
+        ref="dataList"
+        :tableId="tableId"
+        v-model:custom-table-title="tools.customTableTitle"
+        :api="url"
+        :from="fromRoute.user"
+        :layout="['columnCustomize','elementSet','search']"
+        @search="search"
     >
       <template #top-tool-left>
-        <button id="account-add" class="top-tool-btn margin-r-10 top-tool-btn--create"
+        <button id="account-add" class="business-button margin-r-10"
                 v-if="hasPermission('createUser')"
                 @click="add">
           <i class="cn-icon-xinjian cn-icon"></i>
-          <span>{{$t('overall.create')}}</span>
+          <span>{{ $t('overall.create') }}</span>
         </button>
-        <button id="account-edit"  class="top-tool-btn margin-r-10" :disabled="disableEdit"
+        <button id="account-edit" class="business-button business-button--light margin-r-10" :disabled="disableEdit"
                 v-if="hasPermission('editUser')"
                 @click="editSelectRecord">
           <i class="cn-icon-edit cn-icon"></i>
-          <span>{{$t('overall.edit')}}</span>
+          <span>{{ $t('overall.edit') }}</span>
         </button>
-        <button id="account-delete"  class="top-tool-btn margin-r-10" :disabled="disableDelete"
+        <button id="account-delete" class="business-button business-button--light margin-r-10" :disabled="disableDelete"
                 v-if="hasPermission('deleteUser')"
                 @click="delBatch">
           <i class="cn-icon-delete cn-icon"></i>
-          <span>{{$t('overall.delete')}}</span>
+          <span>{{ $t('overall.delete') }}</span>
         </button>
       </template>
       <template #default>
         <loading :loading="loading"></loading>
         <user-table
-          ref="dataTable"
-          :api="url"
-          :isNoData="isNoData"
-          :custom-table-title="tools.customTableTitle"
-          :table-data="tableData"
-          @delete="del"
-          @edit="edit"
-          @orderBy="tableDataSort"
-          @reload="getTableData"
-          @selectionChange="selectionChange"
+            ref="dataTable"
+            :api="url"
+            :isNoData="isNoData"
+            :custom-table-title="tools.customTableTitle"
+            :table-data="tableData"
+            @delete="del"
+            @edit="edit"
+            @orderBy="tableDataSort"
+            @reload="getTableData"
+            @selectionChange="selectionChange"
         />
       </template>
       <template #pagination>
@@ -49,16 +49,13 @@
       </template>
     </cn-data-list>
     <el-drawer
-            v-model="rightBox.show"
-            direction="rtl"
-            class="common-right-box"
-            :size="700"
-            :with-header="false"
-            destroy-on-close>
-      <user-box
-              :object="object"
-              @close="closeRightBox"
-      />
+        v-model="rightBox.show"
+        direction="rtl"
+        class="common-right-box"
+        :size="700"
+        :with-header="false"
+        destroy-on-close>
+      <user-box :object="object" @close="closeRightBox"/>
     </el-drawer>
   </div>
 </template>
diff --git a/src/views/charts2/Chart.vue b/src/views/charts2/Chart.vue
index 688ae741..231d7d52 100644
--- a/src/views/charts2/Chart.vue
+++ b/src/views/charts2/Chart.vue
@@ -136,24 +136,6 @@
         :chart="chart"
         @toggleLoading="toggleLoading"
     ></link-direction-grid>
-    <dns-active-malicious-domain
-        v-else-if="chart.type === typeMapping.dnsInsight.dnsActiveMaliciousDomain"
-        :time-filter="timeFilter"
-        :chart="chart"
-        @toggleLoading="toggleLoading"
-    ></dns-active-malicious-domain>
-    <dns-event-chart
-        v-else-if="chart.type === typeMapping.dnsInsight.dnsEventChart"
-        :time-filter="timeFilter"
-        :chart="chart"
-        @toggleLoading="toggleLoading"
-    ></dns-event-chart>
-    <dns-recent-events
-        v-else-if="chart.type === typeMapping.dnsInsight.dnsRecentEvents"
-        :time-filter="timeFilter"
-        :chart="chart"
-        @toggleLoading="toggleLoading"
-    ></dns-recent-events>
     <dns-traffic-line
         v-else-if="chart.type === typeMapping.dnsInsight.dnsTrafficLine"
         :time-filter="timeFilter"
@@ -228,9 +210,6 @@ import NpmTrafficLine from '@/views/charts2/charts/npm/NpmTrafficLine'
 import LinkBlock from '@/views/charts2/charts/linkMonitor/LinkBlock'
 import LinkTrafficSankey from '@/views/charts2/charts/linkMonitor/LinkTrafficSankey'
 import LinkTrafficLine from '@/views/charts2/charts/linkMonitor/LinkTrafficLine'
-import DnsActiveMaliciousDomain from '@/views/charts2/charts/dnsInsight/DnsActiveMaliciousDomain'
-import DnsEventChart from '@/views/charts2/charts/dnsInsight/DnsEventChart'
-import DnsRecentEvents from '@/views/charts2/charts/dnsInsight/DnsRecentEvents'
 import DnsTrafficLine from '@/views/charts2/charts/dnsInsight/DnsTrafficLine'
 import EntityDetailBasicInfo from '@/views/charts2/charts/entityDetail/EntityDetailBasicInfo'
 import EntityDetailLine from '@/views/charts2/charts/entityDetail/EntityDetailLine'
@@ -268,9 +247,6 @@ export default {
     LinkBlock,
     LinkTrafficSankey,
     LinkTrafficLine,
-    DnsActiveMaliciousDomain,
-    DnsEventChart,
-    DnsRecentEvents,
     DnsTrafficLine,
     EntityDetailBasicInfo,
     EntityDetailSubscriberKpi,
diff --git a/src/views/charts2/Panel.vue b/src/views/charts2/Panel.vue
index eb22d3d7..f3bec690 100644
--- a/src/views/charts2/Panel.vue
+++ b/src/views/charts2/Panel.vue
@@ -22,7 +22,6 @@
       </div>
       <div class="panel__tools">
         <el-select
-            size="small"
             v-model="metric"
             placeholder=" "
             v-if="showMetric"
diff --git a/src/views/charts2/charts/dnsInsight/DnsActiveMaliciousDomain.vue b/src/views/charts2/charts/dnsInsight/DnsActiveMaliciousDomain.vue
deleted file mode 100644
index 70ea24b2..00000000
--- a/src/views/charts2/charts/dnsInsight/DnsActiveMaliciousDomain.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<template>
-  <div class="dns-mailcious-domain">
-    <div class="dns-mailcious-domain-title">
-      {{ $t('dns.activeMaliciousDomains') }}
-    </div>
-    <el-table :data="tableData" class="dns-mailcious-domain-table" height="100%">
-      <template v-for="(item, index) in customTableTitles" :key="index">
-        <el-table-column class="data-column">
-          <!--表头-->
-          <template #header>
-            <span class="dns-column__span">{{ $t(item.label) }}</span>
-          </template>
-          <!--表格内容-->
-          <template #default="scope" :column="item">
-            <div class="data-mailcious-domain-table">
-              <template v-if="item.prop === 'domain'">
-                <span class="data-column-domain">{{ $t(scope.row[item.prop]) }}</span>
-              </template>
-
-              <template v-else-if="item.prop === 'ips'">
-                <el-popover placement="right" :width="126" trigger="hover" v-if="scope.row['ips'].split(',').length >=3">
-                  <template #reference>
-                    <span class="data-column-ips">{{ $t(scope.row[item.prop]) }}</span>
-                  </template>
-                  <!--超过3个ip就省略号显示，移动鼠标block块展示，并换行-->
-                  <pre style="max-height: 152px;margin: 0 -10px -15px 0;overflow: scroll;"><span style="height: 24px;line-height: 24px;color: #046ECA;">{{scope.row[item.prop].replace(/,/g, '\n')}}</span></pre>
-                </el-popover>
-                <span v-else class="data-column-ips">{{ $t(scope.row[item.prop]) }}</span>
-              </template>
-
-              <template v-else-if="item.prop === 'numberOfIPs'">
-                <span>{{ scope.row['ips'].split(',').length }}</span>
-              </template>
-
-              <template v-else-if="item.prop === 'queries'">
-                <span>{{ scope.row[item.prop] }}</span>
-              </template>
-
-              <template v-else-if="item.prop === 'firstSeenTime'">
-                <span>{{ dateFormatByAppearance(scope.row[item.prop]) }}</span>
-              </template>
-
-              <template v-else-if="item.prop === 'lastSeenTime'">
-                <span>{{ dateFormatByAppearance(scope.row[item.prop]) }}</span>
-              </template>
-              <span v-else>-</span>
-            </div>
-          </template>
-        </el-table-column>
-      </template>
-
-      <template v-slot:empty>
-        <div class="table-no-data" v-show="isNoData">
-          <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
-        </div>
-      </template>
-    </el-table>
-  </div>
-</template>
-
-<script>
-import { api } from '@/utils/api'
-import { getSecond } from '@/utils/date-util'
-import axios from 'axios'
-import chartMixin from '@/views/charts2/chart-mixin'
-
-export default {
-  name: 'DnsActiveMaliciousDomain',
-  data () {
-    return {
-      tableData: [], // 表格数据
-      // 表头数据
-      customTableTitles: [
-        {
-          label: 'dns.domain',
-          prop: 'domain'
-        },
-        {
-          label: 'dns.IPs',
-          prop: 'ips'
-        },
-        {
-          label: 'dns.numberOfIPs',
-          prop: 'numberOfIPs'
-        },
-        {
-          label: 'dns.queries',
-          prop: 'queries'
-        },
-        {
-          label: 'dns.firstSeenTime',
-          prop: 'firstSeenTime'
-        },
-        {
-          label: 'dns.lastSeenTime',
-          prop: 'lastSeenTime'
-        }
-      ],
-      isNoData: false // 无数据标识，true为无数据，false有数据
-    }
-  },
-  mixins: [chartMixin],
-  watch: {
-    timeFilter: {
-      handler (n) {
-        if (n) {
-          this.initData()
-        }
-      }
-    }
-  },
-  mounted () {
-    this.initData()
-  },
-  methods: {
-    initData () {
-      this.toggleLoading(true)
-
-      this.tableData = []
-
-      const params = {
-        startTime: getSecond(this.timeFilter.startTime),
-        endTime: getSecond(this.timeFilter.endTime)
-      }
-      this.toggleLoading(true)
-      axios.get(api.dnsInsight.activeMaliciousDomain, { params: params }).then(response => {
-        const res = response.data
-        if (response.status === 200) {
-          this.isNoData = res.data.result.length === 0
-          this.tableData = res.data.result
-        } else {
-          this.isNoData = true
-          this.tableData = []
-        }
-      }).finally(() => {
-        this.toggleLoading(false)
-      })
-    }
-  },
-  computed: {}
-}
-</script>
diff --git a/src/views/charts2/charts/dnsInsight/DnsEventChart.vue b/src/views/charts2/charts/dnsInsight/DnsEventChart.vue
deleted file mode 100644
index 8991cbe3..00000000
--- a/src/views/charts2/charts/dnsInsight/DnsEventChart.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-  <div class="dns-event-chart">
-    <chart-no-data v-if="isNoData"></chart-no-data>
-    <template v-else>
-      <div class="dns-event-chart-pie">
-        <dns-event-chart-by-pie :timeFilter="timeFilter" :pieData="pieData"/>
-      </div>
-      <div class="dns-event-chart-bar">
-        <dns-event-chart-by-bar :timeFilter="timeFilter" :series="series"/>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-import { shallowRef } from 'vue'
-import axios from 'axios'
-import { api } from '@/utils/api'
-import chartMixin from '@/views/charts2/chart-mixin'
-import dnsEventChartByPie from './DnsEventChartByPie'
-import dnsEventChartByBar from './DnsEventChartByBar'
-import { getSecond } from '@/utils/date-util'
-import ChartNoData from '@/views/charts/charts/ChartNoData'
-
-export default {
-  name: 'DnsEventChart',
-  props: {
-    type: String
-  },
-  components: {
-    ChartNoData,
-    dnsEventChartByPie,
-    dnsEventChartByBar
-  },
-  mixins: [chartMixin],
-  setup () {
-    return {
-      myChart: shallowRef(null)
-    }
-  },
-  data () {
-    return {
-      pieData: [], // 饼状图数据
-      series: [], // 柱状图的series数据
-      isNoData: false
-    }
-  },
-  watch: {
-    timeFilter: {
-      handler (n) {
-        this.initData()
-      }
-    }
-  },
-  mounted () {
-    this.initData()
-  },
-  methods: {
-    initData () {
-      const params = {
-        startTime: getSecond(this.timeFilter.startTime),
-        endTime: getSecond(this.timeFilter.endTime)
-      }
-      this.toggleLoading(true)
-      axios.get(api.dnsInsight.eventChart, { params }).then(res => {
-        const data = res.data.data.result
-        this.pieData = []
-
-        if (data !== undefined && data.length > 0) {
-          this.isNoData = false
-          const series = []
-          data.forEach((item, index) => {
-            this.pieData.push({
-              name: item.type,
-              value: item.analysis.sum
-            })
-
-            const tempArr = []
-            tempArr.push(item.values)
-            series.push({
-              data: item.values,
-              stack: 'total',
-              name: item.type,
-              barWidth: 26,
-              type: 'bar',
-              emphasis: {
-                focus: 'series'
-              }
-            })
-          })
-          this.series = series
-        } else {
-          this.isNoData = true
-        }
-      }).catch(e => {
-        console.error(e)
-        this.isNoData = true
-      }).finally(() => {
-        this.toggleLoading(false)
-      })
-    },
-    resize () {
-      this.myChart.resize()
-    }
-  },
-  beforeUnmount () {
-    window.removeEventListener('resize', this.resize)
-  }
-}
-</script>
diff --git a/src/views/charts2/charts/dnsInsight/DnsEventChartByBar.vue b/src/views/charts2/charts/dnsInsight/DnsEventChartByBar.vue
deleted file mode 100644
index d03d0913..00000000
--- a/src/views/charts2/charts/dnsInsight/DnsEventChartByBar.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-  <div class="npm-event dns-event">
-    <div class="npm-event-pie dns-event-pie">
-      <chart-no-data v-if="isNoData"></chart-no-data>
-
-      <div class="npm-event-pies dns-event-pies" v-else>
-        <!--堆叠柱状图-->
-        <div style="width: 100%;height: 100%" id="chart"></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { shallowRef } from 'vue'
-import * as echarts from 'echarts'
-import { stackedBarChartOption } from '@/views/charts2/charts/options/echartOption'
-import ChartNoData from '@/views/charts/charts/ChartNoData'
-import chartMixin from '@/views/charts2/chart-mixin'
-
-export default {
-  name: 'DnsEventChartByPie',
-  props: {
-    type: String,
-    timeFilter: Object,
-    series: Array
-  },
-  components: {
-    ChartNoData
-  },
-  mixins: [chartMixin],
-  setup () {
-    return {
-      myChart: shallowRef(null)
-    }
-  },
-  data () {
-    return {
-      chartData: [],
-      timer: null,
-      isNoData: false
-    }
-  },
-  watch: {
-    timeFilter: {
-      handler (n) {
-        this.eventsByTypeData()
-      }
-    },
-    series: {
-      deep: true,
-      handler (n) {
-        this.eventsByTypeData()
-      }
-    }
-  },
-  mounted () {
-    this.$nextTick(() => {
-      this.eventsByTypeData()
-    })
-    window.addEventListener('resize', this.resize)
-  },
-  methods: {
-    init () {
-      const _this = this
-      const dom = document.getElementById('chart')
-      if (!this.myChart) {
-        this.myChart = echarts.init(dom)
-        this.chartOption = stackedBarChartOption
-        this.chartOption.series = this.series
-
-        this.myChart.on('mouseover', function (params) {
-          _this.myChart.setOption(_this.chartOption)
-        })
-        this.myChart.on('mouseout', function (params) {
-          _this.myChart.setOption(_this.chartOption)
-        })
-
-        this.myChart.setOption(this.chartOption)
-      } else {
-        this.chartOption.series = this.series
-        this.myChart.setOption(this.chartOption)
-      }
-    },
-    eventsByTypeData () {
-      this.toggleLoading(false)
-      if (this.series.length > 0) {
-        this.init()
-        this.toggleLoading(true)
-      }
-    },
-    resize () {
-      this.myChart.resize()
-    }
-  },
-  beforeUnmount () {
-    window.removeEventListener('resize', this.resize)
-    if (this.myChart) {
-      echarts.dispose(this.myChart)
-    }
-  }
-}
-</script>
diff --git a/src/views/charts2/charts/dnsInsight/DnsEventChartByPie.vue b/src/views/charts2/charts/dnsInsight/DnsEventChartByPie.vue
deleted file mode 100644
index da46039c..00000000
--- a/src/views/charts2/charts/dnsInsight/DnsEventChartByPie.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
-  <div class="npm-event dns-event">
-    <div class="npm-event-pie dns-event-pie">
-      <chart-no-data v-if="isNoData"></chart-no-data>
-
-      <div class="npm-event-pies dns-event-pies" v-else>
-        <!--pie图-->
-        <div class="chart-drawing" id="chart1"></div>
-
-        <div class="npm-event-pie-legends">
-          <div class="npm-event-pie-legend">
-            <div class="npm-event-pie-legend-title" v-if="chartData.length > 0">{{ $t('overall.type') }}</div>
-            <template v-for="(legend, index) in chartData" :key="index">
-              <div class="npm-event-pie-legend-type">
-                <span class="color-block" :style="{background: chartColor6[index]}"></span>
-                <div class="npm-event-pie-legend-type-severity">{{ legend.name }}</div>
-              </div>
-            </template>
-          </div>
-
-          <div class="npm-event-pie-legend">
-            <div class="npm-event-pie-legend-title" v-if="chartData.length > 0">{{ $t('network.total') }}</div>
-            <template v-for="(legend, index) in chartData" :key="index">
-              <div class="npm-event-pie-legend-total">{{ legend.value }}</div>
-            </template>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { shallowRef } from 'vue'
-import * as echarts from 'echarts'
-import { pieChartOption3 } from '@/views/charts2/charts/options/echartOption'
-import ChartNoData from '@/views/charts/charts/ChartNoData'
-import chartMixin from '@/views/charts2/chart-mixin'
-import { chartColor6 } from '@/utils/constants'
-
-export default {
-  name: 'DnsEventChartByPie',
-  props: {
-    type: String,
-    timeFilter: Object,
-    pieData: Array
-  },
-  components: {
-    ChartNoData
-  },
-  mixins: [chartMixin],
-  setup () {
-    return {
-      myChart: shallowRef(null)
-    }
-  },
-  data () {
-    return {
-      chartData: [],
-      timer: null,
-      isNoData: false,
-      chartColor6: chartColor6
-    }
-  },
-  watch: {
-    timeFilter: {
-      handler (n) {
-        this.eventsByTypeData()
-      }
-    },
-    pieData: {
-      deep: true,
-      handler (n) {
-        this.eventsByTypeData()
-      }
-    }
-  },
-  methods: {
-    init () {
-      const _this = this
-      const dom = document.getElementById('chart1')
-      if (!this.myChart) {
-        this.myChart = echarts.init(dom)
-        this.chartOption = pieChartOption3
-        this.chartOption.color = chartColor6
-        this.chartOption.series[0].data = this.chartData
-        this.chartOption.series[0].label = {
-          show: true,
-          position: 'center',
-          fontFamily: 'NotoSansHans-Medium',
-          fontSize: 20,
-          fontWeight: 500,
-          formatter: function () {
-            let num = 0
-            _this.chartData.forEach(t => {
-              num += t.value
-            })
-            return num
-          }
-        }
-        this.myChart.on('mouseover', function (params) {
-          _this.chartOption.series[0].label.show = false
-          _this.myChart.setOption(_this.chartOption)
-        })
-        this.myChart.on('mouseout', function (params) {
-          _this.chartOption.series[0].label.show = true
-          _this.myChart.setOption(_this.chartOption)
-        })
-        this.myChart.setOption(this.chartOption)
-      } else {
-        this.chartOption.color = chartColor6
-        this.chartOption.series[0].data = this.chartData
-        this.chartOption.series[0].label = {
-          show: true,
-          position: 'center',
-          fontFamily: 'NotoSansHans-Medium',
-          fontSize: 20,
-          fontWeight: 500,
-          formatter: function () {
-            let num = 0
-            _this.chartData.forEach(t => {
-              num += t.value
-            })
-            return num
-          }
-        }
-        this.myChart.setOption(this.chartOption)
-      }
-    },
-    eventsByTypeData () {
-      this.toggleLoading(false)
-      if (this.pieData.length > 0) {
-        this.chartData = this.pieData
-        this.init()
-        this.toggleLoading(true)
-      }
-    },
-    resize () {
-      this.myChart.resize()
-    }
-  },
-  mounted () {
-    this.$nextTick(() => {
-      this.eventsByTypeData()
-    })
-    window.addEventListener('resize', this.resize)
-  },
-  beforeUnmount () {
-    window.removeEventListener('resize', this.resize)
-    if (this.myChart) {
-      echarts.dispose(this.myChart)
-    }
-  }
-}
-</script>
diff --git a/src/views/charts2/charts/dnsInsight/DnsRecentEvents.vue b/src/views/charts2/charts/dnsInsight/DnsRecentEvents.vue
deleted file mode 100644
index 145e4413..00000000
--- a/src/views/charts2/charts/dnsInsight/DnsRecentEvents.vue
+++ /dev/null
@@ -1,244 +0,0 @@
-<template>
-  <div class="dns-recent-event npm-app-event">
-    <div class="dns-recent-event-header">
-      <div class="dns-recent-event-title">{{ $t('network.recentEvents') }}</div>
-      <div class="dns-recent-event-select">
-        <div class="metric-select">
-          <el-select v-model="tableType"
-                     class="option__select select-column"
-                     popper-class="option-popper common-select"
-                     :teleported="false"
-                     key="tabMetric"
-                     :placeholder="$t('overall.select')"
-                     @change="changeMetric"
-                     size="small"
-                     width="100">
-            <el-option
-                v-for="item in options"
-                :key="item.label"
-                :label="item.label"
-                :value="item.value"
-            />
-          </el-select>
-          <span>{{$t('overall.type')}}：</span>
-        </div>
-        <div class="metric-select">
-          <el-select v-model="tableSeverity"
-                     class="option__select select-column"
-                     popper-class="option-popper common-select"
-                     :teleported="false"
-                     key="tabMetric"
-                     :placeholder="$t('overall.select')"
-                     @change="changeMetric"
-                     size="small"
-                     width="100">
-            <el-option
-                v-for="item in severityOption"
-                :key="item.label"
-                :label="item.label"
-                :value="item.value"
-            />
-          </el-select>
-          <span>{{$t('network.severity')}}：</span>
-        </div>
-      </div>
-    </div>
-    <el-table
-        id="tabTable"
-        ref="dataTable"
-        :data="tableData"
-        class="npm-app-event-table dns-recent-event-table"
-        height="100%"
-        empty-text=""
-    >
-      <template v-for="(item, index) in customTableTitles" :key="index">
-        <el-table-column class="data-column" :min-width="columnWidth(index)">
-          <template #header>
-            <span class="data-column__span">{{$t(item.label)}}</span>
-          </template>
-          <template  #default="scope" :column="item">
-            <div class="data-app-event-table">
-              <template v-if="item.prop === 'type'">
-                <span v-if="scope.row[item.prop] === 'Performance Event'" class="data-applications">
-                  <span class="cn-icon cn-icon-events-type performance">&nbsp;</span>
-                  {{scope.row[item.prop]}}
-                </span>
-                <span v-else class="data-applications">
-                  <span class="cn-icon cn-icon-events-type security">&nbsp;</span>
-                  {{scope.row[item.prop]}}
-                </span>
-              </template>
-              <template v-else-if="item.prop === 'event'">
-                <span class="data-eventType">{{scope.row[item.prop]}}</span>
-              </template>
-              <template v-else-if="item.prop === 'severity'">
-                <template v-if="scope.row[item.prop]==='critical'">
-                  <div v-for="(item, index) in 5" class="red-dot" :key="index"></div>
-                </template>
-                <template v-else-if="scope.row[item.prop]==='high'">
-                  <div v-for="(item, index) in 4" class="red-dot" :key="index"></div>
-                  <div class="grey-dot"></div>
-                </template>
-                <template v-else-if="scope.row[item.prop]==='medium'">
-                  <div v-for="(item, index) in 3" class="red-dot" :key="index"></div>
-                  <div v-for="(item, index) in 2" class="grey-dot" :key="index"></div>
-                </template>
-                <template v-else-if="scope.row[item.prop]==='low'">
-                  <div v-for="(item, index) in 2" class="red-dot" :key="index"></div>
-                  <div v-for="(item, index) in 3" class="grey-dot" :key="index"></div>
-                </template>
-                <template v-else-if="scope.row[item.prop]==='info'">
-                  <div v-for="(item, index) in 1" class="red-dot" :key="index"></div>
-                  <div v-for="(item, index) in 4" class="grey-dot" :key="index"></div>
-                </template>
-                <span class="data-severity" >{{scope.row[item.prop]}}</span>
-              </template>
-              <span v-else>-</span>
-            </div>
-          </template>
-        </el-table-column>
-      </template>
-      <template v-slot:empty>
-        <div class="table-no-data" v-show="isNoData">
-          <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
-        </div>
-      </template>
-    </el-table>
-  </div>
-</template>
-
-<script>
-import { api } from '@/utils/api'
-import { getSecond } from '@/utils/date-util'
-import axios from 'axios'
-import chartMixin from '@/views/charts2/chart-mixin'
-import { useRoute } from 'vue-router'
-import { ref } from 'vue'
-import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
-
-export default {
-  name: 'DnsRecentEvents',
-  setup () {
-    const { query } = useRoute()
-    const tableType = ref(query.tableType || '')
-    const tableSeverity = ref(query.tableSeverity || '')
-    return {
-      tableType,
-      tableSeverity
-    }
-  },
-  data () {
-    return {
-      options: [
-        {
-          label: this.$t('dnsInsight.securityEvent'),
-          value: 'securityEvent'
-        },
-        {
-          label: this.$t('dnsInsight.PerEvent'),
-          value: 'performanceEvent'
-        }
-      ],
-      severityOption: [
-        {
-          value: 'critical',
-          label: 'Critical'
-        },
-        {
-          value: 'high',
-          label: 'High'
-        },
-        {
-          value: 'medium',
-          label: 'Medium'
-        },
-        {
-          value: 'low',
-          label: 'Low'
-        },
-        {
-          value: 'info',
-          label: 'Info'
-        }
-      ],
-      tableData: [],
-      customTableTitles: [
-        { label: 'overall.type', prop: 'type' },
-        { label: 'dnsInsight.event', prop: 'event' },
-        { label: 'network.severity', prop: 'severity' }
-      ]
-    }
-  },
-  mixins: [chartMixin],
-  watch: {
-    timeFilter: {
-      handler (n) {
-        this.dnsRecentEventData()
-      }
-    },
-    tableType (n) {
-      const { query } = this.$route
-      const newUrl = urlParamsHandler(window.location.href, query, {
-        tableType: n
-      })
-      overwriteUrl(newUrl)
-    },
-    tableSeverity (n) {
-      const { query } = this.$route
-      const newUrl = urlParamsHandler(window.location.href, query, {
-        tableSeverity: n
-      })
-      overwriteUrl(newUrl)
-    }
-  },
-  mounted () {
-    this.dnsRecentEventData()
-  },
-  methods: {
-    dnsRecentEventData () {
-      this.toggleLoading(true)
-      this.tableData = []
-      const params = {
-        startTime: getSecond(this.timeFilter.startTime),
-        endTime: getSecond(this.timeFilter.endTime),
-        limit: 8,
-        type: this.tableType,
-        severity: this.tableSeverity
-      }
-      this.toggleLoading(true)
-      axios.get(api.dnsInsight.recentEvents, { params }).then(res => {
-        if (res.status === 200) {
-          this.isNoData = res.data.data.result.length === 0
-          this.tableData = res.data.data.result
-          this.tableData.forEach((t, index) => {
-            if (index > 5) {
-              t.type = 'Security Event'
-            } else {
-              t.type = 'Performance Event'
-            }
-          })
-        } else {
-          this.isNoData = true
-        }
-      }).finally(() => {
-        this.toggleLoading(false)
-      })
-    },
-    changeMetric () {
-      this.dnsRecentEventData()
-    },
-    columnWidth (index) {
-      if (index === 0 || index === 1) {
-        return '50%'
-      } else if (index === 2) {
-        return '25%'
-      } else if (index === 3) {
-        return '15%'
-      }
-    }
-
-  },
-  computed: {
-  }
-}
-</script>
diff --git a/src/views/charts2/charts/entityDetail/EntityDetailBasicInfo.vue b/src/views/charts2/charts/entityDetail/EntityDetailBasicInfo.vue
index 9346d3d4..a449451b 100644
--- a/src/views/charts2/charts/entityDetail/EntityDetailBasicInfo.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailBasicInfo.vue
@@ -50,7 +50,7 @@
           <div v-if="card.name==='reputationLevel'"
                class="detail-card__value row__tag row__tag__level"
                :title="card.value"
-               :style="`background-color:${riskLevelColor1[card.level]};text-align: center;color: ${card.value !== '-' ? '#fff' : ''}`">
+               :style="`background-color:${riskLevelColor1[card.level]};text-align: center;color: ${card.value !== '-' ? 'var(--el-color-white)' : ''}`">
             {{card.value || '-'}}
           </div>
           <div v-else class="detail-card__value" :title="card.value">{{card.value || '-'}}</div>
diff --git a/src/views/charts2/charts/entityDetail/EntityDetailLine.vue b/src/views/charts2/charts/entityDetail/EntityDetailLine.vue
index a3ae0af4..ad7387d7 100644
--- a/src/views/charts2/charts/entityDetail/EntityDetailLine.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailLine.vue
@@ -47,23 +47,23 @@
             </div>
             <div class="line-select-metric">
               <span class="select-prefix line-margin-right">{{$t('network.metric')}}:</span>
-              <el-select
-                  size="small"
-                  v-model="metric"
-                  placeholder=" "
-                  popper-class="common-select"
-                  :teleported="false"
-                  @change="metricChange"
-              >
-                <el-option v-for="item in metricOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
-              </el-select>
+              <div class="line-metric__select">
+                <el-select
+                    v-model="metric"
+                    placeholder=" "
+                    popper-class="common-select"
+                    :teleported="false"
+                    @change="metricChange"
+                >
+                  <el-option v-for="item in metricOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
+                </el-select>
+              </div>
             </div>
           </div>
           <div class="line-select-reference-line">
             <span class="line-margin-right">{{ $t('network.referenceLine') }}:</span>
             <div class="line-select__operation">
               <el-select
-                  size="small"
                   v-model="lineRefer"
                   :disabled="!lineTab"
                   placeholder=" "
@@ -79,7 +79,7 @@
           </div>
         </div>
       </div>
-      <div style="height: calc(100% - 74px); position: relative">
+      <div class="line__block">
         <chart-no-data v-if="isNoData && !showError"></chart-no-data>
         <div class="chart-drawing" v-show="showMarkLine && !isNoData && !showError" ref="overviewLineChart"></div>
       </div>
diff --git a/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue b/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
index 70179dc5..a69fd697 100644
--- a/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
@@ -10,9 +10,7 @@
         <template #label>
           <!--<div class="el-tabs__active-bar is-top" style="width: 80.9998px; transform: translateX(177px);"></div>-->
           <i :class="tab.icon"></i>{{$t(tab.label)}}
-          <el-tag size="small" style="margin-left: 6px" :color="tab.name === activeTab ? 'rgb(223,237,248)' : 'rgb(237,237,237)'" round>
-            <span :style="{color: tab.name === activeTab ? '#046ECA' : '#717171'}">{{ tab.tag }}</span>
-          </el-tag>
+          <el-tag :type="tab.name === activeTab ? 'primary' : 'info'" size="small" class="margin-l-6" round>{{ tab.tag }}</el-tag>
         </template>
         <information-aggregation v-if="tab.name === entityDetailTabsName.informationAggregation && tab.name === activeTab" @toggleLoading="setLoading"  :entity="entity" @checkTag="setTag"></information-aggregation>
         <domain-name-resolution v-else-if="tab.name === entityDetailTabsName.relatedEntity && tab.name === activeTab" @toggleLoading="setLoading" :entity="entity"  @checkTag="setTag"></domain-name-resolution>
@@ -267,10 +265,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.el-tag {
-  font-size: 12px !important;
-  border-radius: 20px !important;
-}
-</style>
diff --git a/src/views/charts2/charts/entityDetail/lines/App.vue b/src/views/charts2/charts/entityDetail/lines/App.vue
index 702b5277..02657d36 100644
--- a/src/views/charts2/charts/entityDetail/lines/App.vue
+++ b/src/views/charts2/charts/entityDetail/lines/App.vue
@@ -16,7 +16,7 @@
                  :test-id="`tab${index}`"
             >
               <div class="line-value-tabs-name">
-                <div class="tabs-name" :test-id="`tabTitle${index}`" style="padding-left: 0;">{{ $t(item.name) }}</div>
+                <div class="tabs-name tabs-name1" :test-id="`tabTitle${index}`">{{ $t(item.name) }}</div>
               </div>
               <div class="line-value-unit" :test-id="`tabContent${index}`">
             <span class="line-value-unit-number">
@@ -45,21 +45,22 @@
           </div>
           <div class="line-select-metric">
             <span class="select-prefix line-margin-right">{{$t('network.metric')}}:</span>
-            <el-select
-                size="small"
-                v-model="metric"
-                placeholder=" "
-                popper-class="common-select"
-                :teleported="false"
-                @change="metricChange"
-            >
-              <el-option v-for="item in metricOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
-            </el-select>
+            <div class="line-metric__select">
+              <el-select
+                  v-model="metric"
+                  placeholder=" "
+                  popper-class="common-select"
+                  :teleported="false"
+                  @change="metricChange"
+              >
+                <el-option v-for="item in metricOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
+              </el-select>
+            </div>
           </div>
         </div>
       </div>
     </div>
-    <div style="height: calc(100% - 74px); position: relative">
+    <div class="line__block">
       <chart-no-data v-if="isNoData && !showError"></chart-no-data>
       <div class="chart-drawing" v-show="!isNoData && !showError" ref="overviewLineChart"></div>
     </div>
diff --git a/src/views/charts2/charts/entityDetail/lines/ServiceName.vue b/src/views/charts2/charts/entityDetail/lines/ServiceName.vue
index b3e884d0..84f180f3 100644
--- a/src/views/charts2/charts/entityDetail/lines/ServiceName.vue
+++ b/src/views/charts2/charts/entityDetail/lines/ServiceName.vue
@@ -46,16 +46,17 @@
           </div>
           <div class="line-select-metric">
             <span class="select-prefix line-margin-right">{{$t('network.metric')}}:</span>
-            <el-select
-                size="small"
-                v-model="metric"
-                placeholder=" "
-                popper-class="common-select"
-                :teleported="false"
-                @change="metricChange"
-            >
-              <el-option v-for="item in metricOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
-            </el-select>
+            <div class="line-metric__select">
+              <el-select
+                  v-model="metric"
+                  placeholder=" "
+                  popper-class="common-select"
+                  :teleported="false"
+                  @change="metricChange"
+              >
+                <el-option v-for="item in metricOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
+              </el-select>
+            </div>
           </div>
         </div>
         <div class="line-select-reference-line">
@@ -78,7 +79,7 @@
         </div>
       </div>
     </div>
-    <div style="height: calc(100% - 74px); position: relative">
+    <div class="line__block">
       <chart-no-data v-if="isNoData && !showError"></chart-no-data>
       <div class="chart-drawing" v-show="showMarkLine && !isNoData && !showError" ref="overviewLineChart"></div>
     </div>
diff --git a/src/views/charts2/charts/entityDetail/tabs/BehaviorPattern.vue b/src/views/charts2/charts/entityDetail/tabs/BehaviorPattern.vue
index b86aa43a..9831ab7e 100644
--- a/src/views/charts2/charts/entityDetail/tabs/BehaviorPattern.vue
+++ b/src/views/charts2/charts/entityDetail/tabs/BehaviorPattern.vue
@@ -1,5 +1,5 @@
 <template>
-  <chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
+  <chart-error v-if="showError" :content="errorMsg"></chart-error>
   <chart-no-data v-if="isNoData && !showError"></chart-no-data>
 
   <div v-if="!isNoData && !showError" class="entity-detail-event-block" style="height: 100%;width: 100%;position: relative;">
diff --git a/src/views/charts2/charts/entityDetail/tabs/DigitalCertificate.vue b/src/views/charts2/charts/entityDetail/tabs/DigitalCertificate.vue
index 9860cbb4..77b8a168 100644
--- a/src/views/charts2/charts/entityDetail/tabs/DigitalCertificate.vue
+++ b/src/views/charts2/charts/entityDetail/tabs/DigitalCertificate.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
+    <chart-error v-if="showError" :content="errorMsg"></chart-error>
     <chart-no-data v-if="isNoData && !showError"></chart-no-data>
 
     <div v-if="!isNoData && !showError && !loading" class="digital-certificate" :style="{width: moreCertificatesWidth}">
@@ -12,7 +12,7 @@
         </div>
       </div>
 
-      <div v-for="(item, index) in infoList" :key="index" style="margin-top: 20px">
+      <div v-for="(item, index) in infoList" :key="index" class="margin-t-20">
         <div class="digital-certificate-body">
           <div class="digital-certificate-body-tags">
             <div :class="item.flag === '0' ? 'entity-tag entity-tag--level-two-negative-no-background' : 'entity-tag entity-tag--level-two-positive-no-background'">{{ this.$t(getTrusted(item.flag)) }}</div>
diff --git a/src/views/charts2/charts/entityDetail/tabs/InformationAggregation.vue b/src/views/charts2/charts/entityDetail/tabs/InformationAggregation.vue
index 0a364d6f..d677ce20 100644
--- a/src/views/charts2/charts/entityDetail/tabs/InformationAggregation.vue
+++ b/src/views/charts2/charts/entityDetail/tabs/InformationAggregation.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <!--初步方案：error提示替换table。后续若改为table内error提示，记得在此修改-->
-    <chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
+    <chart-error v-if="showError" :content="errorMsg"></chart-error>
     <chart-no-data v-if="isNoData && !showError" test-id="no-data"></chart-no-data>
     <div v-if="!isNoData && !showError && !loading" class="information-aggregation__table">
       <el-table
diff --git a/src/views/charts2/charts/entityDetail/tabs/OpenPort.vue b/src/views/charts2/charts/entityDetail/tabs/OpenPort.vue
index 72088c36..0ae15c86 100644
--- a/src/views/charts2/charts/entityDetail/tabs/OpenPort.vue
+++ b/src/views/charts2/charts/entityDetail/tabs/OpenPort.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
+    <chart-error v-if="showError" :content="errorMsg"></chart-error>
     <chart-no-data v-if="isNoData && !showError"></chart-no-data>
 
     <div v-if="!showError && !isNoData && initFlag" class="type-data__column">
@@ -15,7 +15,12 @@
           </div>
         </div>
         <div class="more" v-if="openPortList.length > entityDetailRelatedEntitiesShowSize">
-          <span class="button" :style="{'opacity': openPortList.length > showOpenPortListInfo.num ? 1 : 0.6}"  @click="showMore(showOpenPortListInfo,openPortList)">{{ $t('overall.more') }} > </span>
+          <span
+              class="button"
+              :style="{'opacity': openPortList.length > showOpenPortListInfo.num ? 1 : 0.6}"
+              @click="showMore(showOpenPortListInfo,openPortList)">
+            {{ $t('overall.more') }} >
+          </span>
         </div>
       </div>
     </div>
@@ -33,8 +38,7 @@ import { getNowTime } from '@/utils/date-util'
 export default {
   name: 'OpenPort',
   mixins: [chartMixin],
-  props: {
-  },
+  props: {},
   data () {
     return {
       openPortList: [],
@@ -98,9 +102,12 @@ export default {
     },
     getUrlByEntityType (type) {
       switch (type) {
-        case 'ip': return api.entity.openPortOfIp
-        case 'domain': return api.entity.openPortOfDomain
-        case 'app': return api.entity.openPortOfApp
+        case 'ip':
+          return api.entity.openPortOfIp
+        case 'domain':
+          return api.entity.openPortOfDomain
+        case 'app':
+          return api.entity.openPortOfApp
       }
     }
   }
diff --git a/src/views/charts2/charts/entityDetail/tabs/PerformanceEvent.vue b/src/views/charts2/charts/entityDetail/tabs/PerformanceEvent.vue
index f976fc2f..638587bd 100644
--- a/src/views/charts2/charts/entityDetail/tabs/PerformanceEvent.vue
+++ b/src/views/charts2/charts/entityDetail/tabs/PerformanceEvent.vue
@@ -1,5 +1,5 @@
 <template>
-  <chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
+  <chart-error v-if="showError" :content="errorMsg"></chart-error>
   <chart-no-data v-if="isNoData && !showError"></chart-no-data>
 
   <div v-if="!isNoData && !showError" class="entity-detail-event-block">
@@ -17,7 +17,7 @@
                 class="detection-event-severity-color-block"
                 :style="`background-color: ${eventSeverityColor[item.eventSeverity]}`">
             </span>
-              <span class="detection-event-severity-block" style="margin-right: 30px">
+              <span class="detection-event-severity-block margin-r-30">
               {{ toUpperCaseByString(item.eventType) || '-' }}
             </span>
               <div class="cn-detection__body">
diff --git a/src/views/charts2/charts/entityDetail/tabs/SecurityEvent.vue b/src/views/charts2/charts/entityDetail/tabs/SecurityEvent.vue
index e804111f..539dcf81 100644
--- a/src/views/charts2/charts/entityDetail/tabs/SecurityEvent.vue
+++ b/src/views/charts2/charts/entityDetail/tabs/SecurityEvent.vue
@@ -1,5 +1,5 @@
 <template>
-  <chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
+  <chart-error v-if="showError" :content="errorMsg"></chart-error>
   <chart-no-data v-if="isNoData && !showError" test-id="no-data"></chart-no-data>
 
   <div v-if="!isNoData && !showError" class="entity-detail-event-block">
diff --git a/src/views/charts2/charts/linkMonitor/LinkBlock.vue b/src/views/charts2/charts/linkMonitor/LinkBlock.vue
index f6c154ba..517a225a 100644
--- a/src/views/charts2/charts/linkMonitor/LinkBlock.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkBlock.vue
@@ -10,6 +10,7 @@
       <div class="block-list__list" v-show="!linkNoData" v-else>
         <el-popover
             placement="bottom"
+            effect="dark"
             trigger="hover"
             popper-class="link-block__popper"
             v-for="(item, index) in linkData"
@@ -122,7 +123,6 @@ import { drillDownPanelTypeMapping, storageKey, unitTypes } from '@/utils/consta
 import { getSecond } from '@/utils/date-util'
 import ChartError from '@/components/common/Error'
 import axios from 'axios'
-import { analysis, analysisOneWay, nextHopAnalysis, nextHopAnalysisOneWay} from './test-data'
 
 export default {
   name: 'LinkBlock',
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
index e3d0d48a..b63abc77 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
@@ -13,11 +13,10 @@
             <span @click="drillDownData(app.type, app.name)" :test-id="`name${index}`">{{app.name}}</span>
           </div>
           <div class="app-card-title-more">
-            <span v-show="app.showMore"><i class="cn-icon cn-icon-more-dark" @mouseenter="mouseenterMore(app)" test-id="mouseenter-dark"></i></span>
-            <span class="app-card-title-more-delete" @click="del(app, index)" v-show="app.moreOptions" @mouseleave="mouseleaveMore(app)" test-id="mouseleave-more"><i class="cn-icon cn-icon-delete"></i>{{$t('overall.delete')}}</span>
+            <span v-show="app.showMore" @click="del(app, index)"><i class="cn-icon cn-icon-delete" test-id="mouseenter-dark"></i></span>
           </div>
         </div>
-        <div class="app-card__bodys">
+        <div class="app-card__bodies">
           <div class="app-card__body">
             <div class="app-card__body-content">
               <div class="app-card__body-content-value">
@@ -63,8 +62,8 @@
         <div class="add-app__header">
           <div class="header__title">{{$t('overall.add')}}</div>
           <div class="header__operations">
-            <div class="header__operation header__operation--cancel" @click="cancelApp" test-id="cancel-app">{{$t('overall.cancel')}}</div>
-            <div class="header__operation header__operation--save" :class="{'no-records':toSaveApp.length === 0}" @click="save">{{$t('overall.save')}}</div>
+            <button class="business-button business-button--light" @click="cancelApp" test-id="cancel-app">{{$t('overall.cancel')}}</button>
+            <button class="business-button" :class="{'no-records':toSaveApp.length === 0}" @click="save">{{$t('overall.save')}}</button>
           </div>
         </div>
         <div class="add-app__body">
@@ -699,20 +698,6 @@ export default {
         t.resize()
       })
     },
-    mouseenterMore (app) {
-      this.appData.forEach(t => {
-        if (t.name === app.name && t.type === app.type) {
-          t.moreOptions = true
-        }
-      })
-    },
-    mouseleaveMore (app) {
-      this.appData.forEach(t => {
-        if (t.name === app.name && t.type === app.type) {
-          t.moreOptions = false
-        }
-      })
-    },
     mouseenter (app) {
       this.appData.forEach(t => {
         if (t.name === app.name && t.type === app.type) {
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
index c74fa376..e02ece73 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
@@ -58,10 +58,9 @@
                     >
                       <template #reference>
                         <div :ref="`tabSearchRef${tab.prop}`">
-                          <div class="tab-search-button" :id="`tabSearchButton${tab.prop}`" v-show="showSearchButton"
+                          <div class="tab-search-button" :id="`tabSearchButton${tab.prop}`"
                                @click="handlePopoverShow(item.prop,tab.prop)">
-                            <el-icon style="color:#575757;"><Search /></el-icon>
-                            <!--<i class="el-icon-search" style="color:#575757;" ></i>-->
+                            <el-icon style="color: var(--el-text-color-regular);"><Search/></el-icon>
                           </div>
                           <div class="tab-search-input"  v-show="showSearchInput">
                             <el-input :id="`tabSearchValue${tab.prop}`"
@@ -592,7 +591,7 @@ export default {
                   itemName = this.dnsRcodeMapData.get(item)
                 }
                 if (itemName === currentValue) {
-                  selectedDom.style.cssText = 'color:#0091ff;font-weight: bold;'
+                  selectedDom.style.cssText = 'color: var(--el-color-primary); font-weight: bold;'
                 } else {
                   selectedDom.style.cssText = ''
                 }
@@ -1856,7 +1855,7 @@ export default {
       // element-plus 2.5以上版本表头样式支持对象而不是字符串
       let style = { 'border-right': '0px', 'font-size': '12px', padding: '7px 0 7px 1px !important', 'border-bottom': '1px solid var(--el-table-border-color)', height: '39.54px !important' }
       if (columnIndex === 0) {
-        style = { ...style, color: '#046ECA', 'text-align': 'left' }
+        style = { ...style, color: 'var(--el-color-primary)', 'text-align': 'left' }
       }
       return style
     },
diff --git a/src/views/charts2/charts/npm/NpmAppEventTable.vue b/src/views/charts2/charts/npm/NpmAppEventTable.vue
index a4f628eb..460c3245 100644
--- a/src/views/charts2/charts/npm/NpmAppEventTable.vue
+++ b/src/views/charts2/charts/npm/NpmAppEventTable.vue
@@ -6,7 +6,6 @@
         :data="tableData"
         class="npm-app-event-table"
         :row-class-name="rowClassName"
-        height="100%"
         empty-text=""
     >
       <template v-for="(item, index) in customTableTitles" :key="index">
diff --git a/src/views/charts2/charts/npm/NpmIpMap.vue b/src/views/charts2/charts/npm/NpmIpMap.vue
index 0f5e0d9b..5e3100ce 100644
--- a/src/views/charts2/charts/npm/NpmIpMap.vue
+++ b/src/views/charts2/charts/npm/NpmIpMap.vue
@@ -218,7 +218,7 @@ export default {
     generatePolygonTooltipHTML () {
       const html = `
         <div class="map-tooltip" style="padding-bottom: 10px;">
-          <div class="map-tooltip__title"><img src="/images/flag/{id}.png" style="width: 18px;display: {tooltip.display};height: 12px;margin-right: 6px;border: 1px solid #E8E8E8;"/>{name}</div>
+          <div class="map-tooltip__title"><img src="/images/flag/{id}.png" style="width: 18px;display: {tooltip.display};height: 12px;margin-right: 6px;border: 1px solid var(--el-color-info-light-8);"/>{name}</div>
           <div class="map-tooltip__content">
             <div class="content-title">{tooltip.text.traffic}</div>
             <div class="content-row">
diff --git a/src/views/charts2/charts/npm/NpmMap.vue b/src/views/charts2/charts/npm/NpmMap.vue
index b875772d..2c41d235 100644
--- a/src/views/charts2/charts/npm/NpmMap.vue
+++ b/src/views/charts2/charts/npm/NpmMap.vue
@@ -250,7 +250,7 @@ export default {
     generatePolygonTooltipHTML () {
       const html = `
         <div class="map-tooltip" style="padding-bottom: 10px;">
-          <div class="map-tooltip__title"><img src="/images/flag/{id}.png" style="width: 18px;display: {tooltip.display};height: 12px;margin-right: 6px;border: 1px solid #E8E8E8;"/>{name}</div>
+          <div class="map-tooltip__title"><img src="/images/flag/{id}.png" style="width: 18px;display: {tooltip.display};height: 12px;margin-right: 6px;border: 1px solid var(--el-color-info-light-8);"/>{name}</div>
           <div class="map-tooltip__content">
             <div class="content-title">{tooltip.text.traffic}</div>
             <div class="content-row">
diff --git a/src/views/charts2/charts/npm/NpmRecentEvents.vue b/src/views/charts2/charts/npm/NpmRecentEvents.vue
index f68d85dd..bd1aa418 100644
--- a/src/views/charts2/charts/npm/NpmRecentEvents.vue
+++ b/src/views/charts2/charts/npm/NpmRecentEvents.vue
@@ -11,7 +11,6 @@
         class="npm-recent-table"
         :class="{'npm-recent-table-ten': tableData.length === 10}"
         empty-text=""
-        height="100%"
     >
       <template v-for="(item, index) in customTableTitles" :key="index">
         <el-table-column class="data-column">
diff --git a/src/views/detections/DetectionFilter.vue b/src/views/detections/DetectionFilter.vue
index 6581af27..7ba252fb 100644
--- a/src/views/detections/DetectionFilter.vue
+++ b/src/views/detections/DetectionFilter.vue
@@ -7,8 +7,6 @@
         <div class="filter__header">{{filter.title}}</div>
 
         <div class="filter__body" style="position: relative">
-<!--          <loading :loading="false" style="top: -5px;"></loading>-->
-
           <div class="filter__body-item"
                v-for="(data, i) in filter.data.slice(0, filter.showIndex)"
                :key="i"
diff --git a/src/views/detections/DetectionList.vue b/src/views/detections/DetectionList.vue
index b742a72e..9f4d56fb 100644
--- a/src/views/detections/DetectionList.vue
+++ b/src/views/detections/DetectionList.vue
@@ -6,8 +6,7 @@
         <div class="no-data" v-if="myListData.length===0">{{ $t('npm.noData') }}</div>
         <div v-if="!isCollapse" @click="collapse" class="cn-detection__shadow new-cn-detection__shadow"></div>
         <detection-row
-            style="margin-bottom: 10px"
-            class="detection-border"
+            class="detection-border margin-b-10"
             v-for="(data, index) in myListData"
             :detection="data"
             :page-type="pageType"
diff --git a/src/views/detections/DetectionRow.vue b/src/views/detections/DetectionRow.vue
index 586cf970..68f94807 100644
--- a/src/views/detections/DetectionRow.vue
+++ b/src/views/detections/DetectionRow.vue
@@ -169,7 +169,7 @@ export default {
         let color = '#8FA1BE'
         if (detection.startTime && detection.endTime) {
           if (getMillisecond(detection.endTime) - getMillisecond(detection.startTime) < 5 * 60 * 1000) {
-            color = '#D84C4C'
+            color = 'var(--cn-color-critical)'
           }
         }
         return { backgroundColor: color }
@@ -248,17 +248,3 @@ export default {
   }
 }
 </script>
-
-<style>
-.detection-row-active {
-  height: 20px;
-  line-height: 20px;
-  padding: 0 7px;
-  background: #E9EFE1;
-  border-radius: 2px;
-  font-family: NotoSansHans-Medium;
-  font-size: 12px;
-  color: #7E9F54;
-  font-weight: 500;
-}
-</style>
diff --git a/src/views/detections/detectionPolicies/Index.vue b/src/views/detections/detectionPolicies/Index.vue
index cfa20151..72a2497b 100644
--- a/src/views/detections/detectionPolicies/Index.vue
+++ b/src/views/detections/detectionPolicies/Index.vue
@@ -21,7 +21,7 @@
             :disableEdit="disableEdit"
             :disableDelete="disableDelete"/>
 
-        <div class="detection-table" style="position: relative">
+        <div class="detection-table">
           <loading :loading="loading"></loading>
           <detection-table
               ref="dataTable"
@@ -50,7 +50,7 @@
       v-model="showConfirmDialog"
       :title="$t('overall.hint')"
       width="480px"
-      custom-class="del-model-hint"
+      class="del-model-hint"
       :before-close="handleClose">
     <div class="dialog-message">{{ $t('knowledge.deleteDataHint') }}</div>
     <el-table v-model="delItemList"
@@ -126,14 +126,14 @@ export default {
       myCellStyle: {
         padding: '4px 0px',
         'font-size': '12px',
-        color: '#353636',
+        color: 'var(--el-text-color-primary)',
         'font-weight': 400
       },
       myHeaderCellStyle: {
         padding: '4px 0px',
-        background: '#F5F8FA',
+        background: 'var(--el-fill-color-light)',
         'font-size': '12px',
-        color: '#353636',
+        color: 'var(--el-text-color-primary)',
         'font-weight': 500
       }
     }
@@ -347,58 +347,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.detection {
-  padding: 20px;
-  height: 100%;
-  overflow: auto;
-
-  .detection-title {
-    font-family: NotoSansHans-Black;
-    line-height: 24px;
-    font-size: 24px;
-    color: #353636;
-    font-weight: 900;
-    display: flex;
-    flex-direction: column;
-
-    .detection-title-label {
-      font-family: NotoSansSChineseRegular;
-      font-size: 12px;
-      color: #717171;
-      letter-spacing: 0;
-      line-height: 18px;
-      font-weight: 400;
-      margin-top: 5px;
-    }
-  }
-
-  .detection-content {
-    margin-top: 15px;
-    width: 100%;
-    height: calc(100% - 96px);
-    display: flex;
-
-    .detection-filter {
-      width: 320px;
-      height: calc(100% + 34px);
-      background: #FFFFFF;
-      border: 1px solid rgba(226, 229, 236, 1);
-      border-radius: 4px;
-      margin-right: 20px;
-    }
-
-    .detection-block {
-      width: calc(100% - 340px);
-
-      .detection-table {
-        width: 100%;
-        height: calc(100% - 44px);
-        border-radius: 4px;
-        margin-top: 12px;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/views/detections/detectionPolicies/PolicyDrawer.vue b/src/views/detections/detectionPolicies/PolicyDrawer.vue
index f1a9f058..d531c2d1 100644
--- a/src/views/detections/detectionPolicies/PolicyDrawer.vue
+++ b/src/views/detections/detectionPolicies/PolicyDrawer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="detection-drawer" style="height: 100vh;overflow: scroll;padding-bottom: 90px">
+  <div class="detection-drawer">
     <div class="drawer-basic">
       <div class="drawer-basic-header">
         <div class="drawer-basic-id">
@@ -91,11 +91,10 @@
               <div class="drawer-basic-function">
                 <div class="detection-drawer-title">{{ $t('detections.filters') }}</div>
                 <span class="detection-tag-blue">Source Port</span>
-                <span style="margin: 0 6px;">{{ $t('detections.equal') }}</span><span>19890</span>
+                <span class="drawer-title__equal">{{ $t('detections.equal') }}</span><span>19890</span>
               </div>
 
-              <div class="drawer-basic-function" v-for="item in severityList" :key="item.severity"
-                   style="padding-bottom: 0">
+              <div class="drawer-basic-function padding-b-0" v-for="item in severityList" :key="item.severity">
                 <div class="detection-drawer-title">
                   <div class="detection__icon" :style="`background-color: ${eventSeverityColor[item.severity]}`"></div>
                   <div>{{ toUpperCaseByString(item.severity) }}</div>
@@ -112,16 +111,16 @@
       </el-collapse>
     </div>
 
-    <div class="detection-drawer-collapse" style="margin: 20px 0">
+    <div class="detection-drawer-collapse detection-drawer-collapse__margin">
       <el-collapse v-model="activeTrigger">
         <el-collapse-item :title="$t('detection.create.trigger')" name="trigger">
           <div class="drawer-collapse-content" v-if="language===EN">
             <div class="drawer-collapse-trigger">
               Triggered when conditions occur at least
-              <span style="color: #046ECA">
+              <span class="trigger__value">
                 {{ atLeast }} {{ times }}
               </span> in
-              <span style="color: #046ECA">
+              <span class="trigger__value">
                 {{ getNumberFromStr($_.get(detailData, 'ruleTriggerObj.interval', '0')) || '-' }}
                 {{ $_.get(detailData, 'ruleTriggerObj.intervalVal', '-') || '-' }}
               </span>
@@ -138,11 +137,11 @@
           <div class="drawer-collapse-content" v-if="language===ZH">
             <div class="drawer-collapse-trigger">
               当条件为
-              <span style="color: #046ECA">
+              <span class="trigger__value">
                 {{ getNumberFromStr($_.get(detailData, 'ruleTriggerObj.interval', '0')) || '-' }}
                 {{ changeValueToLabel(detailData.ruleTriggerObj) }}
               </span>内至少出现
-              <span style="color: #046ECA">
+              <span class="trigger__value">
                 {{ $_.get(detailData, 'ruleTriggerObj.atLeast', '-') || '-' }} 次
               </span>时触发
             </div>
diff --git a/src/views/detections/detectionPolicies/PolicyFilter.vue b/src/views/detections/detectionPolicies/PolicyFilter.vue
index 6d635a99..48788754 100644
--- a/src/views/detections/detectionPolicies/PolicyFilter.vue
+++ b/src/views/detections/detectionPolicies/PolicyFilter.vue
@@ -7,7 +7,7 @@
       <div>
         <div class="new-filter-content-title">{{ $t('overall.status') }}</div>
         <div class="new-filter-content-content">
-          <el-checkbox-group v-model="checkStatus" @change="onChangeCategory" style="display: flex;flex-direction: column">
+          <el-checkbox-group v-model="checkStatus" @change="onChangeCategory" class="content__display">
             <el-checkbox v-for="item in statusList" :key="item.name" class="new-filter-content-checkbox" :label="item.status">
               <div>{{ item.name }}</div>
             </el-checkbox>
@@ -29,7 +29,7 @@
       <div>
         <div class="new-filter-content-title">{{ $t('overall.type') }}</div>
         <div class="new-filter-content-content">
-          <el-checkbox-group v-model="checkEventType" @change="onChangeCategory" style="display: flex;flex-direction: column">
+          <el-checkbox-group v-model="checkEventType" @change="onChangeCategory" class="content__display">
             <el-checkbox v-for="item in eventTypeList" :key="item.name" class="new-filter-content-checkbox" :label="item.name">
               {{ item.name }}
             </el-checkbox>
diff --git a/src/views/detections/detectionPolicies/PolicyForm.vue b/src/views/detections/detectionPolicies/PolicyForm.vue
index 76c85e38..77deae90 100644
--- a/src/views/detections/detectionPolicies/PolicyForm.vue
+++ b/src/views/detections/detectionPolicies/PolicyForm.vue
@@ -26,7 +26,7 @@
 
       <!--第二步：Rule Definition-->
       <div class="detection-form-collapse">
-        <el-collapse v-model="activeNames" style="position: relative;">
+        <el-collapse v-model="activeNames" class="rule-definition">
           <el-collapse-item name="2">
             <template #title>
               <div class="form-collapse-header">
@@ -57,16 +57,16 @@
                 <div class="trigger-block-item margin-b-10">
                   <div>At least</div>
                   <el-form-item prop="atLeast">
-                    <el-input size="small" maxlength="5" v-model="triggerObj.atLeast" oninput="value=value.replace(/[^\d]/g,'')" @input="resetEditFlag"></el-input>
+                    <el-input maxlength="5" size="small" v-model="triggerObj.atLeast" oninput="value=value.replace(/[^\d]/g,'')" @input="resetEditFlag"></el-input>
                   </el-form-item>
                   <div>times within</div>
 
                   <el-form-item prop="interval" class="policy-form-item">
-                    <el-input size="small" maxlength="5" v-model="triggerObj.interval" oninput="value=value.replace(/[^\d]/g,'')" @input="resetEditFlag"></el-input>
+                    <el-input maxlength="5" size="small" v-model="triggerObj.interval" oninput="value=value.replace(/[^\d]/g,'')" @input="resetEditFlag"></el-input>
                   </el-form-item>
 
-                  <el-form-item prop="intervalVal">
-                    <el-select v-model="triggerObj.intervalVal" class="form-trigger__select" placeholder=" " size="small" @change="resetEditFlag">
+                  <el-form-item prop="intervalVal" class="form-trigger__select">
+                    <el-select v-model="triggerObj.intervalVal" placeholder=" " size="small" @change="resetEditFlag">
                       <el-option
                           v-for="item in intervalList"
                           :key="item.value"
@@ -80,10 +80,10 @@
                 <div class="trigger-block-item">
                   <div>With the counter resetting after no activity for</div>
                   <el-form-item prop="resetInterval" class="policy-form-item">
-                    <el-input size="small" maxlength="5" v-model="triggerObj.resetInterval" oninput="value=value.replace(/[^\d]/g,'')" @input="resetEditFlag"></el-input>
+                    <el-input maxlength="5" size="small" v-model="triggerObj.resetInterval" oninput="value=value.replace(/[^\d]/g,'')" @input="resetEditFlag"></el-input>
                   </el-form-item>
-                  <el-form-item prop="resetIntervalVal">
-                    <el-select v-model="triggerObj.resetIntervalVal" class="form-trigger__select" placeholder=" " size="small"  @change="resetEditFlag">
+                  <el-form-item prop="resetIntervalVal" class="form-trigger__select">
+                    <el-select v-model="triggerObj.resetIntervalVal" placeholder=" " size="small" @change="resetEditFlag">
                       <el-option
                           v-for="item in intervalList"
                           :key="item.value"
@@ -101,8 +101,8 @@
                     <el-input size="small" maxlength="5" v-model="triggerObj.interval" oninput="value=value.replace(/[^\d]/g,'')" @input="resetEditFlag"></el-input>
                   </el-form-item>
 
-                  <el-form-item prop="intervalVal">
-                    <el-select v-model="triggerObj.intervalVal" class="form-trigger__select" placeholder=" " size="small" @change="resetEditFlag">
+                  <el-form-item prop="intervalVal" class="form-trigger__select">
+                    <el-select size="small" v-model="triggerObj.intervalVal" placeholder=" " @change="resetEditFlag">
                       <el-option
                           v-for="item in intervalList"
                           :key="item.value"
@@ -123,8 +123,8 @@
                   <el-form-item prop="resetInterval">
                     <el-input size="small" maxlength="5" v-model="triggerObj.resetInterval" oninput="value=value.replace(/[^\d]/g,'')" @input="resetEditFlag"></el-input>
                   </el-form-item>
-                  <el-form-item prop="resetIntervalVal">
-                    <el-select v-model="triggerObj.resetIntervalVal" class="form-trigger__select" placeholder=" " size="small" @change="resetEditFlag">
+                  <el-form-item prop="resetIntervalVal" class="form-trigger__select">
+                    <el-select size="small" v-model="triggerObj.resetIntervalVal" placeholder=" " @change="resetEditFlag">
                       <el-option
                           v-for="item in intervalList"
                           :key="item.value"
@@ -144,10 +144,8 @@
 
     <div class="policy-form__footer">
       <div class="policy-form__footer__btn">
-        <div class="btn1">
-          <el-button @click="cancel">{{ $t('overall.cancel') }}</el-button>
-        </div>
-        <el-button @click="createPolicy">{{ $t('overall.save') }}</el-button>
+        <button class="business-button business-button--light" @click="cancel">{{ $t('overall.cancel') }}</button>
+        <button class="business-button" @click="createPolicy">{{ $t('overall.save') }}</button>
       </div>
     </div>
   </div>
diff --git a/src/views/detections/detectionPolicies/PolicyTable.vue b/src/views/detections/detectionPolicies/PolicyTable.vue
index 9110b011..f2c78b3e 100644
--- a/src/views/detections/detectionPolicies/PolicyTable.vue
+++ b/src/views/detections/detectionPolicies/PolicyTable.vue
@@ -59,7 +59,7 @@
           {{ changeCategory(scope.row[item.prop]) }}
         </template>
         <template v-else-if="item.prop === 'description'">
-          <div style="padding-right: 20px">{{ scope.row[item.prop] }}</div>
+          <div class="padding-r-20">{{ scope.row[item.prop] }}</div>
         </template>
         <template v-else-if="item.prop === 'dimensions' && scope.row[item.prop]">
           <span class="detection-tag-blue">{{ scope.row[item.prop] }}</span>
@@ -83,7 +83,7 @@
                   <div
                       class="tip__tag"
                       v-if="$_.get(scope.row.ruleConfigObj, 'knowledgeBase.color')"
-                      :style="{backgroundColor: $_.get(scope.row.ruleConfigObj, 'knowledgeBase.color'), color: 'white'}"
+                      :style="{backgroundColor: $_.get(scope.row.ruleConfigObj, 'knowledgeBase.color'), color: 'var(--el-color-white)'}"
                   >{{colorText($_.get(scope.row.ruleConfigObj, 'knowledgeBase.color'))}}</div>
                 </div>
                 <div class="tip__description" :class="{ 'tip__description--non': !($_.get(scope.row.ruleConfigObj, 'knowledgeBase.description')) }">
@@ -239,7 +239,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-
-</style>
diff --git a/src/views/detections/detectionPolicies/PolicyTools.vue b/src/views/detections/detectionPolicies/PolicyTools.vue
index f2238fe3..082b8a08 100644
--- a/src/views/detections/detectionPolicies/PolicyTools.vue
+++ b/src/views/detections/detectionPolicies/PolicyTools.vue
@@ -2,12 +2,11 @@
   <div>
     <div class="top-tools__left">
       <button
-          id="knowledge-base-add"
+          id="policy-base-add"
           v-if="hasPermission('createDetectionPolicy')"
           :title="$t('knowledgeBase.createKnowledgeBase')"
-          class="top-tool-btn margin-r-10 top-tool-btn--create"
-          @click="onCreate"
-          style="width:72px;">
+          class="business-button margin-r-10"
+          @click="onCreate">
         <i class="cn-icon-xinjian cn-icon"></i>
         <span>{{ $t('overall.create') }}</span>
       </button>
@@ -17,9 +16,8 @@
           v-if="hasPermission('editDetectionPolicy')"
           id="knowledge-base-edit"
           :title="$t('knowledgeBase.editKnowledgeBase')"
-          class="top-tool-btn margin-r-10"
-          @click="onEdit"
-          style="width:72px;">
+          class="business-button business-button--light margin-r-10"
+          @click="onEdit">
         <i class="cn-icon-edit cn-icon" ></i>
         <span>{{$t('overall.edit')}}</span>
       </button>
@@ -29,21 +27,18 @@
           v-if="hasPermission('deleteDetectionPolicy')"
           id="knowledge-base-delete"
           :title="$t('knowledgeBase.deleteKnowledgeBase')"
-          class="top-tool-btn margin-r-10"
-          @click="onDelete"
-          style="width:72px;">
+          class="business-button business-button--light margin-r-10"
+          @click="onDelete">
         <i class="cn-icon-delete cn-icon"></i>
         <span>{{ $t('overall.delete') }}</span>
       </button>
 
       <div class="top-tool-search margin-l-10">
-        <el-input v-model="keyWord" size="small" style="height: 28px;" @keyup.enter="onSearch"></el-input>
+        <el-input v-model="keyWord" size="small" class="search__input" @keyup.enter="onSearch"></el-input>
         <button
-            class="top-tool-btn top-tool-btn--search"
-            style="border-radius: 0 2px 2px 0 !important;"
+            class="business-button business-button--light top-tool-btn--search"
             @click="onSearch">
           <el-icon><Search /></el-icon>
-<!--          <i class="el-icon-search"></i>-->
         </button>
       </div>
     </div>
@@ -107,7 +102,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/src/views/detections/overview/DetectionSecurityEventOverview.vue b/src/views/detections/overview/DetectionSecurityEventOverview.vue
index 892b93a3..b107c035 100644
--- a/src/views/detections/overview/DetectionSecurityEventOverview.vue
+++ b/src/views/detections/overview/DetectionSecurityEventOverview.vue
@@ -532,13 +532,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.row__label {
-  width: 176px;
-}
-.row__content {
-  width: calc(100% - 176px);
-  padding-right: 50px;
-}
-</style>
diff --git a/src/views/entityExplorer/EntityExplorer.vue b/src/views/entityExplorer/EntityExplorer.vue
index e9d882d3..a7e9275d 100644
--- a/src/views/entityExplorer/EntityExplorer.vue
+++ b/src/views/entityExplorer/EntityExplorer.vue
@@ -3,9 +3,9 @@
       class="entity-explorer"
       :class="{'entity-explorer--show-list': showList}">
     <!-- 顶部工具栏，在列表页显示 -->
-    <div class="explorer-top-tools explorer-top-tools-new" style="margin: 2px 0;" v-show="showList">
+    <div class="explorer-top-tools explorer-top-tools-new" v-show="showList">
       <div class="explorer-entity-top-tools">
-        <div class="explorer-top-tools-title" style="padding: 0;margin-left: -10px;">{{$t('network.entity')}}</div>
+        <div class="explorer-top-tools-title tools-title__margin">{{$t('network.entity')}}</div>
         <date-time-range
             class="date-time-range"
             :start-time="timeFilter.startTime"
@@ -25,7 +25,7 @@
         @search="search"
     ></explorer-search>
     <!-- 内容区 -->
-    <div v-if="showList" style="display: flex;flex-direction: row;padding-bottom: 20px;">
+    <div v-if="showList" class="explorer-content">
       <entity-filter
           :filter-data="newFilterData"
           :q="q"
@@ -40,9 +40,9 @@
             @search="search"
         ></explorer-search>
 
-        <div style="display: flex;flex-direction: column;height: calc(100% - 42px);">
+        <div class="explorer-list">
           <div class="explorer-result" v-if="showList" style="position: relative;display: flex">
-            <loading :loading="loadingCount" style="width: 240px"></loading>
+            <loading :loading="loadingCount" class="explorer-result-loading"></loading>
             <span>{{ summaryCount.totalCount }}&nbsp;</span>{{$t('overall.results')}}，IP<span class="margin-r-3"></span>
             <span>{{ summaryCount.ipCount }}</span>，{{$t('overall.domain')}}<span class="margin-r-3"></span>
             <span>{{ summaryCount.domainCount }}</span>，APP<span class="margin-r-3"></span>
@@ -50,18 +50,10 @@
             <span>{{ summaryCount.subscriberCount }}</span>
 
             <span class="entity-hide-entity" v-if="q">
-<!--              <span v-if="listData.length !== 0">-->
-<!--                <el-checkbox-->
-<!--                    v-model="isHideRelatedEntities"-->
-<!--                    :label="$t('entity.hideRelatedEntities')"-->
-<!--                    :disabled="listData.length===0"-->
-<!--                    @change="hideRelatedEntities"-->
-<!--                    size="large" />-->
-                <el-radio-group v-model="isHideRelatedEntities" @change="hideRelatedEntities" class="ml-4">
-                  <el-radio :label="true" size="large">{{ $t('entity.entityMode') }}</el-radio>
-                  <el-radio :label="false" style="margin-left: -10px;" size="large">{{ $t('entity.relatedMode') }}</el-radio>
-                </el-radio-group>
-<!--              </span>-->
+              <el-radio-group v-model="isHideRelatedEntities" @change="hideRelatedEntities" class="ml-4">
+                <el-radio :label="true" size="large">{{ $t('entity.entityMode') }}</el-radio>
+                <el-radio :label="false" class="margin-l__10" size="large">{{ $t('entity.relatedMode') }}</el-radio>
+              </el-radio-group>
             </span>
           </div>
 
diff --git a/src/views/entityExplorer/EntityFilter.vue b/src/views/entityExplorer/EntityFilter.vue
index 6614e451..d82758da 100644
--- a/src/views/entityExplorer/EntityFilter.vue
+++ b/src/views/entityExplorer/EntityFilter.vue
@@ -11,7 +11,7 @@
           </div>
 
           <div class="filter__body" style="position: relative">
-            <loading :loading="item.loading" style="top: -5px;"></loading>
+            <loading :loading="item.loading" class="filter__body-loading"></loading>
 
             <div class="filter__body-item"
                  v-for="(data, i) in item.data.slice(0, item.showNum)"
@@ -46,8 +46,7 @@
       </div>
     </div>
     <loading v-else-if="isFirstLoad" :loading="isFirstLoad"></loading>
-    <chart-no-data v-else style="padding-top: 40px"></chart-no-data>
-
+    <chart-no-data v-else class="padding-t-40"></chart-no-data>
   </div>
 </template>
 
diff --git a/src/views/entityExplorer/entityGraph/GraphEntityDetail.vue b/src/views/entityExplorer/entityGraph/GraphEntityDetail.vue
index 4d9ddd4a..dff3acbc 100644
--- a/src/views/entityExplorer/entityGraph/GraphEntityDetail.vue
+++ b/src/views/entityExplorer/entityGraph/GraphEntityDetail.vue
@@ -1,7 +1,7 @@
 <template>
   <!--title-->
   <div class="graph-detail-basic-info">
-    <div style="display: flex">
+    <div class="graph-detail-basic-info__block">
       <div class="graph-detail__icon"><i :class="iconClass"></i></div>
 
       <div class="graph-detail-header">
@@ -47,7 +47,7 @@
       </div>
     </div>
 
-    <div class="graph-basic-info__block-content" style="margin-top: -4px;">
+    <div class="graph-basic-info__block-content margin-t--4">
       <div v-for="item in relationList" :key="item.name">
         <div class="graph-content-item graph-content-relationship-item" v-if="item.value === item.total">
           <div class="graph-relationship-item-label">
diff --git a/src/views/entityExplorer/entityGraph/GraphEntityList.vue b/src/views/entityExplorer/entityGraph/GraphEntityList.vue
index c478843a..1d377e7a 100644
--- a/src/views/entityExplorer/entityGraph/GraphEntityList.vue
+++ b/src/views/entityExplorer/entityGraph/GraphEntityList.vue
@@ -16,7 +16,7 @@
     </div>
 
     <div class="graph-list-expand-btn-block">
-      <div class="graph-list-expand-btn" :class="{ 'graph-list-expand-btn--disabled': expandBtnDisable }" style="display: inline-flex;" @click="expandList">
+      <div class="graph-list-expand-btn graph-list-expand-btn__display" :class="{ 'graph-list-expand-btn--disabled': expandBtnDisable }" @click="expandList">
           <i class="cn-icon cn-icon-expand-continue graph-expand-continue"></i>
         {{ $t('entity.graph.continueToExpand') }}
       </div>
@@ -39,8 +39,8 @@
               <div class="graph-list-item-block">
                 <div class="graph-list-item padding-b-4">
                   <div class="graph-list-item-label">{{ $t('overall.location') }}:</div>
-                  <div class="graph-list-item-value graph-list-item-value1" style="display: flex;align-items: center;line-height: 14px;">
-                    <div style="line-height: 10px">
+                  <div class="graph-list-item-value graph-list-item-value1">
+                    <div>
                       <img v-if="getCountry(item.detail)===countryNameIdMapping.Unknown || !countryNameIdMapping[getCountry(item.detail)]" src="../../../../public/images/flag/Unknown.svg" class="graph-list-country-flag">
                       <img v-else :src="require(`../../../../public/images/flag/${countryNameIdMapping[getCountry(item.detail)]}.png`)" class="graph-list-country-flag" >
                     </div>
diff --git a/src/views/entityExplorer/entityList/Row.vue b/src/views/entityExplorer/entityList/Row.vue
index ead654ce..4875e4f5 100644
--- a/src/views/entityExplorer/entityList/Row.vue
+++ b/src/views/entityExplorer/entityList/Row.vue
@@ -10,7 +10,7 @@
       <div class="cn-entity__icon"><i :class="iconClass"></i></div>
       <div class="cn-entity__row">
         <!--标签-->
-        <div class="cn-entity__header" style="display: flex;">
+        <div class="cn-entity__header my__display1">
           <template v-if="entityData.entityType">
             <span v-if="entityData.entityType==='subscriber_id'" v-high-light="keywordList">{{ entityData.phone_number }}</span>
             <span v-else v-high-light="keywordList">{{ entityData.entityValue || 'Unknown' }}</span>
@@ -137,7 +137,7 @@
               </div>
 
               <!--score分数-->
-              <div class="basic-info__item" style="display: flex;align-items: center;" v-if="entityData.entityType !== 'subscriber_id'">
+              <div class="basic-info__item my__display">
                 <i class="cn-icon cn-icon-Score"></i>
                 <div class="row-item-label">
                   <span class="row-item-label">{{ $t('network.score') }}&nbsp;:&nbsp;&nbsp;</span>
@@ -145,7 +145,7 @@
                     <template v-if="!loadingNetworkQuality && score !=='-'">
                       <span v-for="(dot, i) in scoreDot" :key="i" :class="dot.class"></span>
                     </template>
-                    <span style="padding-left: 4px;">{{score}}</span>
+                    <span class="padding-l-4">{{score}}</span>
                     <loading :loading="loadingNetworkQuality" size="small"></loading>
                   </span>
                 </div>
@@ -153,17 +153,14 @@
 
               <!--事件数量，即Performance和security事件总和-->
               <div class="basic-info__item" style="position: relative">
-                <div v-if="eventNum>0 && !loadingEvent" style="display: flex;align-items: center;">
+                <div v-if="eventNum>0 && !loadingEvent" class="my__display">
                   <i class="cn-icon cn-icon-Event1"></i>
                   <div class="row-item-label">
                     <span class="row-item-label">{{ $t('dnsInsight.event') }}&nbsp;:&nbsp;&nbsp;</span>
                     <span class="row-item-value">{{ eventNum }}</span>
                   </div>
                 </div>
-
-<!--                <loading :loading="loadingEvent" size="small" style="width: 90px"></loading>-->
               </div>
-
             </div>
           </div>
         </div>
@@ -313,7 +310,7 @@ export default {
       if (this.isCollapse) {
         this.$refs.rowBlock.style.cssText = 'background-color: none'
       } else {
-        this.$refs.rowBlock.style.cssText = 'background-color: #fff'
+        this.$refs.rowBlock.style.cssText = 'background-color: var(--el-fill-color-blank)'
       }
       this.$emit('switchCollapse', this.isCollapse, this.index)
     },
diff --git a/src/views/entityExplorer/entityList/detailOverview/App.vue b/src/views/entityExplorer/entityList/detailOverview/App.vue
index c9431c56..f776dc71 100644
--- a/src/views/entityExplorer/entityList/detailOverview/App.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/App.vue
@@ -29,7 +29,7 @@
   <div class="overview-item">
     <div class="overview__title">{{$t('overall.traffic')}}</div>
     <div class="overview__content overview__content-loading">
-      <loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" style="width: 50%;"></loading>
+      <loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" class="content-loading"></loading>
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
         <div class="row__content">
@@ -68,13 +68,13 @@
 
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('entities.networkQualityRating')}}</div>
-        <div style="position: relative;">
+        <div class="entity-score__block">
           <div class="entity-score" v-if="!loadingNetworkQuality && score !=='-'">
             <span v-for="(dot, i) in scoreDot" :key="i" :class="dot.class"></span>
-            <span style="padding-left: 4px;">{{score}}</span>
+            <span class="entity-score__padding">{{score}}</span>
           </div>
           <div class="entity-score" v-else>{{score}}</div>
-          <loading :loading="loadingNetworkQuality" size="small" style="left: 1rem;width: 50%;"></loading>
+          <loading :loading="loadingNetworkQuality" size="small" class="entity-score__loading"></loading>
         </div>
       </div>
     </div>
@@ -87,8 +87,8 @@
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('entities.tab.relatedDomain')}}</div>
         <div class="row__content overview__row-related">
-          <div v-if="loadingRelationshipOne" style="position: relative;width: 450px;">
-            <loading :loading="loadingRelationshipOne" size="small" style="left: 1rem;"></loading>
+          <div v-if="loadingRelationshipOne" class="relationship-one__loading">
+            <loading :loading="loadingRelationshipOne" size="small" class="one__loading"></loading>
           </div>
 
           <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
@@ -97,7 +97,7 @@
           <div v-if="relationshipDataOne.length===0 && !loadingRelationshipOne">-</div>
 
           <div v-if="relationshipShowOne">
-            <div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp" style="position: relative">...</div>
+            <div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp">...</div>
             <div v-if="isShowMoreApp" class="app-popover_block" id="showRelatedApp">
               <div class="popover-content" v-for="(item, index) in relationshipDataOne" :key="index">
                 <span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
@@ -111,8 +111,8 @@
         <div class="row__label row__label--width130">{{$t('entities.tab.relatedIp')}}</div>
 
         <div class="row__content">
-          <div v-if="loadingRelationshipTwo" style="position: relative;width: 450px;">
-            <loading :loading="loadingRelationshipTwo" size="small" style="left: 1rem;"></loading>
+          <div v-if="loadingRelationshipTwo" class="relationship-two__loading">
+            <loading :loading="loadingRelationshipTwo" size="small" class="one__loading"></loading>
           </div>
 
           <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataTwo" :key="index">
@@ -121,7 +121,7 @@
           <div v-if="relationshipDataTwo.length===0 && !loadingRelationshipTwo">-</div>
 
           <div v-if="relationshipShowTwo">
-            <div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain" style="position: relative">...</div>
+            <div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain">...</div>
             <div v-if="isShowMoreDomain" class="domain-popover_block" id="showRelatedDomain">
               <div v-for="(item, index) in relationshipDataTwo" :key="index">
                 <span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
@@ -147,9 +147,9 @@
       <div class="overview__row overview__row--small-font" v-for="(performance, index) in entityData.performanceList" :key="index">
         <div class="row__label row__label--width130">{{dateFormatByAppearance(performance.startTime) || '-'}}</div>
         <div class="row__content row__content--width90">
-          <div class="alert-level-tag alert-level-tag--high" :class="iconClass(performance)">{{performance.eventSeverity}}</div>
+          <div class="alert-level-tag" :class="`alert-level-tag--${iconClass(performance)}`">{{performance.eventSeverity}}</div>
         </div>
-        <div class="row__content-loading" style="position: relative;">
+        <div class="row__content-loading">
           <div class="performance-event-remark">{{performance.eventType}}</div>
         </div>
         <div class="row__desc"></div>
@@ -174,7 +174,7 @@
       <div class="overview__row overview__row--small-font" v-for="(security, index) in entityData.securityList" :key="index">
         <div class="row__label row__label--width130">{{security.startTime ? dateFormatByAppearance(Number(security.startTime)) : '-'}}</div>
         <div class="row__content row__content--width90">
-          <div class="alert-level-tag alert-level-tag--high" :class="iconClass(security)">{{security.eventSeverity}}</div>
+          <div class="alert-level-tag" :class="`alert-level-tag--${iconClass(security)}`">{{security.eventSeverity}}</div>
         </div>
         <div class="cn-detection__header">
           <i class="cn-icon cn-icon-attacker"></i>
diff --git a/src/views/entityExplorer/entityList/detailOverview/Domain.vue b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
index e720f8d4..596c84cf 100644
--- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
@@ -35,7 +35,7 @@
   <div class="overview-item">
     <div class="overview__title">{{$t('overall.traffic')}}</div>
     <div class="overview__content overview__content-loading">
-      <loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" style="width: 50%;"></loading>
+      <loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" class="content-loading"></loading>
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
         <div class="row__content">
@@ -74,13 +74,13 @@
 
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('entities.networkQualityRating')}}</div>
-        <div style="position: relative;">
+        <div class="entity-score__block">
           <div class="entity-score" v-if="!loadingNetworkQuality && score !=='-'">
             <span v-for="(dot, i) in scoreDot" :key="i" :class="dot.class"></span>
-            <span style="padding-left: 4px;">{{score}}</span>
+            <span class="entity-score__padding">{{score}}</span>
           </div>
           <div class="entity-score" v-else>{{score}}</div>
-          <loading :loading="loadingNetworkQuality" size="small" style="left: 1rem;width: 50%;"></loading>
+          <loading :loading="loadingNetworkQuality" size="small" class="entity-score__loading"></loading>
         </div>
       </div>
     </div>
@@ -93,8 +93,8 @@
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('entities.tab.relatedApp')}}</div>
         <div class="row__content overview__row-related">
-          <div v-if="loadingRelationshipOne" style="position: relative;width: 450px;">
-            <loading :loading="loadingRelationshipOne" size="small" style="left: 1rem;"></loading>
+          <div v-if="loadingRelationshipOne" class="relationship-one__loading">
+            <loading :loading="loadingRelationshipOne" size="small" class="one__loading"></loading>
           </div>
 
           <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
@@ -103,7 +103,7 @@
           <div v-if="relationshipDataOne.length===0 && !loadingRelationshipOne">-</div>
 
           <div v-if="relationshipShowOne">
-            <div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp" style="position: relative">...</div>
+            <div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp">...</div>
             <div v-if="isShowMoreApp" class="app-popover_block" id="showRelatedApp">
               <div class="popover-content" v-for="(item, index) in relationshipDataOne" :key="index">
                 <span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
@@ -116,8 +116,8 @@
       <div class="overview__row overview__row-related">
         <div class="row__label row__label--width130">{{$t('entities.tab.relatedIp')}}</div>
         <div class="row__content">
-          <div v-if="loadingRelationshipTwo" style="position: relative;width: 450px;">
-            <loading :loading="loadingRelationshipTwo" size="small" style="left: 1rem;"></loading>
+          <div v-if="loadingRelationshipTwo" class="relationship-two__loading">
+            <loading :loading="loadingRelationshipTwo" size="small" class="one__loading"></loading>
           </div>
           <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataTwo" :key="index">
             {{item.value}}
@@ -125,7 +125,7 @@
           <div v-if="relationshipDataTwo.length===0 && !loadingRelationshipTwo">-</div>
 
           <div v-if="relationshipShowTwo">
-            <div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain" style="position: relative">...</div>
+            <div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain">...</div>
             <div v-if="isShowMoreDomain" class="domain-popover_block" id="showRelatedDomain">
               <div v-for="(item, index) in relationshipDataTwo" :key="index">
                 <span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
@@ -151,9 +151,9 @@
       <div class="overview__row overview__row--small-font" v-for="(performance, index) in entityData.performanceList" :key="index">
         <div class="row__label row__label--width130">{{performance.startTime ? dateFormatByAppearance(Number(performance.startTime)) : '-'}}</div>
         <div class="row__content row__content--width90">
-          <div class="alert-level-tag alert-level-tag--high" :class="iconClass(performance)">{{performance.eventSeverity}}</div>
+          <div class="alert-level-tag" :class="`alert-level-tag--${iconClass(performance)}`">{{performance.eventSeverity}}</div>
         </div>
-        <div class="row__content-loading" style="position: relative;">
+        <div class="row__content-loading">
           <div class="performance-event-remark">{{performance.eventType}}</div>
         </div>
         <div class="row__desc"></div>
@@ -178,7 +178,7 @@
       <div class="overview__row overview__row--small-font" v-for="(security, i) in entityData.securityList" :key="i">
         <div class="row__label row__label--width130">{{security.startTime ? dateFormatByAppearance(Number(security.startTime)) : '-'}}</div>
         <div class="row__content row__content--width90">
-          <div class="alert-level-tag alert-level-tag--high" :class="iconClass(security)">{{security.eventSeverity}}</div>
+          <div class="alert-level-tag" :class="`alert-level-tag--${iconClass(security)}`">{{security.eventSeverity}}</div>
         </div>
         <div class="cn-detection__header">
           <i class="cn-icon cn-icon-attacker"></i>
diff --git a/src/views/entityExplorer/entityList/detailOverview/Ip.vue b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
index 428cae91..85afeb04 100644
--- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
@@ -5,7 +5,7 @@
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('overall.location')}}</div>
         <div class="row__content">
-          <div v-if="entity.location" style="display: flex">
+          <div v-if="entity.location" class="row__content-display">
             <div v-if="entity.location.country">
               <img v-if="entity.location.country===countryNameIdMapping.Unknown || !countryNameIdMapping[entity.location.country]" src="../../../../../public/images/flag/Unknown.svg" class="filter-country-flag">
               <img v-else :src="require(`../../../../../public/images/flag/${countryNameIdMapping[entity.location.country]}.png`)" class="filter-country-flag" >
@@ -25,14 +25,14 @@
       </div>
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('entities.openPort')}}</div>
-        <div class="row__content high-location" style="word-break: break-word;" v-high-light="keywordList">{{ openPort }}</div>
+        <div class="row__content high-location row__content__word" v-high-light="keywordList">{{ openPort }}</div>
       </div>
     </div>
   </div>
   <div class="overview-item" v-if="entityData.dnsServerRole">
     <div class="overview__title">{{$t('overall.dnsServerInfo')}}</div>
     <div class="overview__content overview__content-loading">
-      <loading :loading="loadingDns" size="small" inner-style="left: 8.75rem;" style="width: 50%;"></loading>
+      <loading :loading="loadingDns" size="small" inner-style="left: 8.75rem;" class="content-loading"></loading>
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('overall.dnsServerInfo.role')}}</div>
         <div class="row__content">{{$_.get(entityData, 'dnsServerRole') || '-'}}</div>
@@ -71,7 +71,7 @@
   <div class="overview-item">
     <div class="overview__title">{{$t('overall.traffic')}}</div>
     <div class="overview__content overview__content-loading">
-      <loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" style="width: 50%;"></loading>
+      <loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" class="content-loading"></loading>
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
         <div class="row__content">
@@ -109,13 +109,13 @@
       </div>
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('entities.networkQualityRating')}}</div>
-        <div style="position: relative;">
+        <div class="entity-score__block">
           <div class="entity-score" v-if="!loadingNetworkQuality && score !=='-'">
             <span v-for="(dot, i) in scoreDot" :key="i" :class="dot.class"></span>
-            <span style="padding-left: 4px;">{{score}}</span>
+            <span class="entity-score__padding">{{score}}</span>
           </div>
           <div class="entity-score" v-else>{{score}}</div>
-          <loading :loading="loadingNetworkQuality" size="small" style="left: 1rem;width: 50%;"></loading>
+          <loading :loading="loadingNetworkQuality" size="small" class="entity-score__loading"></loading>
         </div>
       </div>
     </div>
@@ -128,8 +128,8 @@
       <div class="overview__row overview__row-related">
         <div class="row__label row__label--width130">{{$t('entities.tab.relatedApp')}}</div>
         <div class="row__content">
-          <div v-if="loadingRelationshipOne" style="position: relative;width: 450px;">
-            <loading :loading="loadingRelationshipOne" size="small" style="left: 1rem;"></loading>
+          <div v-if="loadingRelationshipOne" class="relationship-one__loading">
+            <loading :loading="loadingRelationshipOne" size="small" class="one__loading"></loading>
           </div>
 
           <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
@@ -138,7 +138,7 @@
           <div v-if="relationshipDataOne.length===0 && !loadingRelationshipOne">-</div>
 
           <div v-if="relationshipShowOne">
-            <div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp" style="position: relative">...</div>
+            <div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp">...</div>
             <div v-if="isShowMoreApp" class="app-popover_block" id="showRelatedApp">
               <div class="popover-content" v-for="(item, index) in relationshipDataOne" :key="index">
                 <span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
@@ -151,8 +151,8 @@
       <div class="overview__row overview__row-related">
         <div class="row__label row__label--width130">{{$t('entities.relatedDomain')}}</div>
         <div class="row__content">
-          <div v-if="loadingRelationshipTwo" style="position: relative;width: 450px;">
-            <loading :loading="loadingRelationshipTwo" size="small" style="left: 1rem;"></loading>
+          <div v-if="loadingRelationshipTwo" class="relationship-two__loading">
+            <loading :loading="loadingRelationshipTwo" size="small" class="one__loading"></loading>
           </div>
 
           <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataTwo" :key="index">
@@ -161,7 +161,7 @@
           <div v-if="relationshipDataTwo.length===0 && !loadingRelationshipTwo">-</div>
 
           <div v-if="relationshipShowTwo">
-            <div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain" style="position: relative">...</div>
+            <div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain">...</div>
             <div v-if="isShowMoreDomain" class="domain-popover_block" id="showRelatedDomain">
               <div v-for="(item, index) in relationshipDataTwo" :key="index">
                 <span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
@@ -187,9 +187,9 @@
       <div class="overview__row overview__row--small-font" v-for="(performance, index) in entityData.performanceList" :key="index">
         <div class="row__label row__label--width130">{{performance.startTime ? dateFormatByAppearance(Number(performance.startTime)) : '-'}}</div>
         <div class="row__content row__content--width90">
-          <div class="alert-level-tag alert-level-tag--high" :class="iconClass(performance)">{{performance.eventSeverity}}</div>
+          <div class="alert-level-tag" :class="`alert-level-tag--${iconClass(performance)}`">{{performance.eventSeverity}}</div>
         </div>
-        <div class="row__content-loading" style="position: relative;">
+        <div class="row__content-loading">
           <div class="performance-event-remark">{{performance.eventType}}</div>
         </div>
         <div class="row__desc"></div>
@@ -201,7 +201,7 @@
   </div>
   <div class="overview-item">
     <div class="overview__title">{{$t('entities.securityEvents')}}</div>
-    <div class="overview__content overview__content-loading">
+    <div class="overview__content overview__content-loading" style="position: relative">
       <loading :loading="loadingSecurityEvents" size="small" inner-style="left: 10rem"></loading>
       <div class="overview__row" v-if="securityData.length === 0">
         <span class="no-recent-alerts"><el-icon><SuccessFilled /></el-icon>{{$t('relationShip.noRecentAlerts')}}</span>
@@ -214,9 +214,9 @@
       <div class="overview__row overview__row--small-font" v-for="(security, index) in entityData.securityList" :key="index">
         <div class="row__label row__label--width130">{{security.startTime ? dateFormatByAppearance(Number(security.startTime)) : '-'}}</div>
         <div class="row__content row__content--width90">
-          <div class="alert-level-tag alert-level-tag--high" :class="iconClass(security)">{{security.eventSeverity}}</div>
+          <div class="alert-level-tag" :class="`alert-level-tag--${iconClass(security)}`">{{security.eventSeverity}}</div>
         </div>
-        <div class="cn-detection__header" >
+        <div class="cn-detection__header">
           <i class="cn-icon cn-icon-attacker"></i>
           <span>{{ security.offenderIp }}</span>
           <div class="domain" v-if="security.offenderIp===security.serverIp">{{ security.domain }}</div>
diff --git a/src/views/location/Index.vue b/src/views/location/Index.vue
index 1ec94562..4b465711 100644
--- a/src/views/location/Index.vue
+++ b/src/views/location/Index.vue
@@ -31,7 +31,7 @@
               @visible-change="visibleChange"
               :remote-method="dropDownSearch"
               v-select-load-more="onLoadMore"
-              style="margin-right: 10px; width:250px;"
+              class="location__select"
       >
         <el-option
                 v-for="item in searchValueListShow"
@@ -41,7 +41,7 @@
           <span class="search-active" :class="item.active === 1 ? 'active-icon' : 'inactive-icon'"></span>
           <div class="search-content">
             <span class="search-value">{{ item.phoneNumber }}</span>
-            <span class="" style="color: #999;">ID&nbsp;&nbsp;{{ item.subscriberId }}</span>
+            <span class="search-id">ID&nbsp;&nbsp;{{ item.subscriberId }}</span>
           </div>
           <span class="search-follow__icon" @click.stop="followSubscribers(item)">
             <i class="cn-icon-follow-fill cn-icon" v-if="item.follow === 1"></i>
@@ -49,10 +49,10 @@
           </span>
         </el-option>
         <template #empty>
-          <div v-if="loading.searchLoading" style="height:40px;padding:10px 0;text-align: center;color:#909399;font-size:12px;display:flex;align-items: center;justify-content: center;">
-            <simple-loading style="padding-top:10px;" size="small" placement="top" :loading="loading.searchLoading" ></simple-loading>
+          <div v-if="loading.searchLoading" class="location__select-empty">
+            <simple-loading class="padding-t-10" size="small" placement="top" :loading="loading.searchLoading" ></simple-loading>
           </div>
-          <div v-else-if="emptyTip !== ''" style="height:40px;padding:10px 0;text-align: center;color:#909399;font-size:12px;display:flex;align-items: center;justify-content: center;">
+          <div v-else-if="emptyTip !== ''" class="location__select-empty">
             {{emptyTip}}
           </div>
         </template>
@@ -265,8 +265,8 @@
                       </div>
 
                       <div :class="trackingSubscriberRecordMap[subscriber.subscriberId].length === 1 ? 'item-record__btn-disabled' : 'item-record__btn'" @click.stop="clickTrackBlock(index)">
-                        <span v-if="!subscriber.show"><i class="cn-icon cn-icon-down2" :style="trackingSubscriberRecordMap[subscriber.subscriberId].length === 1 ? 'color: #C0C4CC' : ''"></i></span>
-                        <span v-if="subscriber.show"><i class="cn-icon cn-icon-up2" :style="trackingSubscriberRecordMap[subscriber.subscriberId].length === 1 ? 'color: #C0C4CC' : ''"></i></span>
+                        <span v-if="!subscriber.show"><i class="cn-icon cn-icon-down2" :style="trackingSubscriberRecordMap[subscriber.subscriberId].length === 1 ? 'color: var(var(--el-color-info-light-5))' : ''"></i></span>
+                        <span v-if="subscriber.show"><i class="cn-icon cn-icon-up2" :style="trackingSubscriberRecordMap[subscriber.subscriberId].length === 1 ? 'color: var(var(--el-color-info-light-5)' : ''"></i></span>
                       </div>
                     </div>
                   </template>
@@ -1582,7 +1582,7 @@ export default {
         color[2] = color[2].split(']')[0]
         return `rgba(${color.join(',')},.8)`
       } else if (this.tooltip.type === this.tooltipType.human) {
-        return '#38ACD2'
+        return 'var(--el-color-business)'
       } else if (this.tooltip.type === this.tooltipType.baseStation) {
         return '#233447'
       }
@@ -1747,724 +1747,3 @@ export default {
   }
 }
 </script>
-<style lang="scss">
-.geo-analysis {
-  display: flex;
-  flex-direction: column;
-  padding: 0 20px 20px;
-  position: relative;
-  .location-tabs  {
-    .traceTracking-tabs_label {
-      display:flex;
-      flex-display: row;
-      .traceTracking-num {
-        margin-top: 5px;
-        border-radius: 10px;
-        font-size: 12px;
-        color: #FFFFFF;
-        font-weight: 500;
-        height: 20px;
-        width: fit-content;
-        min-width: 20px;
-        padding:0 5px 0 5px;
-        line-height: 20px;
-        text-align: center;
-        background: #E26154;
-      }
-    }
-  }
-
-  svg {
-    fill: #fff;
-  }
-
-  .maplibregl-canvas:focus-visible {
-    outline: none;
-  }
-  .geo-tools {
-    position: absolute;
-    display: flex;
-    top: 11px;
-    right: 20px;
-    .el-select .el-input__inner {
-      cursor: text;
-    }
-    .el-select .el-input .el-select__caret {
-      cursor: text;
-    }
-    .panel__time {
-      display: flex;
-    }
-    .el-select {
-      .search-active {
-        float: left;
-        border-radius: 3px;
-        width: 6px;
-        height: 6px;
-        margin-right: 10px;
-        position:relative;
-        top:50%;
-        transform: translateY(-50%);
-        text-align:center;
-      }
-      .search-value {
-        font-size: 14px;
-        margin-right:20px;
-      }
-      .search-follow__icon {
-        position: absolute;
-        top: 50%;
-        right: 10px;
-        transform: translateY(-50%);
-        color: #6f6f6e;
-        margin-right: 10px;
-        text-align: center;
-        i {
-          font-size: 12px;
-        }
-      }
-      .search-content {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        justify-content: center;
-      }
-      .active-icon {
-        background: #38ACD2;
-      }
-      .inactive-icon {
-        background: #CCCCCC;
-      }
-      .search-select {
-        max-height: 250px;
-      }
-      .search-select .el-scrollbar__wrap{
-        max-height: 250px;
-        overflow-y: auto;
-      }
-      .el-select-dropdown .el-scrollbar .el-select-dropdown__wrap .el-scrollbar__view.el-select-dropdown__list .el-select-dropdown__item {
-        position: relative;
-        height: 48px;
-        line-height: 16px;
-      }
-    }
-  }
-  .el-tabs {
-    .el-tabs__header {
-      margin-bottom: 0;
-    }
-    .el-tabs__nav-wrap::after {
-      height: 0;
-    }
-    .el-tabs__active-bar {
-      height: 3px;
-      background-color: #046eca;
-      bottom: 1px;
-    }
-    .el-tabs__item {
-      &.is-active {
-        color: #046eca;
-      }
-      height: 50px;
-      line-height: 50px;
-      font-size: 20px;
-      color: #353636;
-    }
-  }
-
-  .geo-analysis__container {
-    height: calc(100% - 50px);
-    display: flex;
-    position: relative;
-
-    .analysis-map {
-      flex: 1;
-      position: relative;
-
-      #analysisMap {
-        border-radius: 2px;
-        height: 100%;
-        width: 100%;
-      }
-      .maplibregl-ctrl-bottom-right {
-        top: 0;
-        left: 0;
-        bottom: unset;
-        right: unset;
-      }
-      .map-marker {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-        cursor: default;
-        padding: 0;
-        transition: height .1s linear, width .1s linear;
-
-        svg {
-          transition: height .1s linear, width .1s linear;
-          fill: #fff;
-        }
-
-        &.map-marker--human {
-          background-color: #233447;
-          cursor: pointer;
-
-          svg {
-            width: 14px;
-            height: 14px;
-          }
-        }
-        &.map-marker--base-station {
-          background-color: #585B5F;
-
-          svg {
-            width: 12px;
-            height: 12px;
-          }
-        }
-        &.map-marker--hover {
-          width: 30px;
-          height: 30px;
-          border: 2px solid rgba(255,255,255,1);
-          z-index: 2;
-
-          &.map-marker--human svg {
-            width: 21px;
-            height: 21px;
-          }
-          &.map-marker--base-station svg {
-            width: 18px;
-            height: 18px;
-          }
-        }
-        &.map-marker--highlight {
-          width: 30px;
-          height: 30px;
-          border: 2px solid #fff;
-          background-color: rgb(204,68,68);
-          z-index: 3;
-
-          svg {
-            width: 21px;
-            height: 21px;
-          }
-        }
-      }
-      .map-tracking-marker {
-        width: 36px;
-        height: 36px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        animation: pulse 2s infinite;
-        background-color: rgba(204,68,68,0.50);
-        border-radius: 50%;
-
-        .tracking-marker__inner-circle {
-          width: 25px;
-          height: 25px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          background-color: rgba(204,68,68,0.80);
-          border-radius: 50%;
-
-          svg {
-            width: 20px;
-            height: 20px;
-          }
-        }
-      }
-    }
-    .map-time-line {
-      position: absolute;
-      bottom: 0;
-      left: -6px;
-      width: calc(100% - 318px);
-    }
-    .analysis-statistics {
-      width: 330px;
-      overflow-y: auto;
-      padding-right: 5px;
-
-      .analysis-statistics__chart {
-        margin: 0 0 10px 20px;
-        height: 148px;
-        background: rgba(113,113,113,0.06);
-        border: 1px solid rgba(226,229,236,1);
-        border-radius: 4px;
-        position: relative;
-
-        .chart__header {
-          padding: 8px 0 0 10px;
-          color: #353636;
-          font-size: 16px;
-        }
-        .chart__body {
-          display:flex;
-          flex-direction:row;
-          width:100%;
-          height:calc(100% - 32px);
-          .chart__legend {
-            width:calc(60% - 22px);
-            height: 100%;
-            display:flex;
-            flex-direction:column;
-            justify-content: center;
-            .legend-item {
-              display:flex;
-              flex-direction:row;
-              justify-content: left;
-              align-items: center;
-              padding-top:2px;
-              padding-bottom:2px;
-              .legend-icon {
-                width:16px;
-                height:6px;
-                border-radius: 2px;
-                margin-right:10px;
-              }
-              .legend-range {
-                margin-right:40px;
-                width:54px;
-                font-family: Helvetica;
-                font-size: 12px;
-                color: #575757;
-                line-height: 12px;
-                font-weight: 400;
-              }
-              .legend-count {
-                font-family: Helvetica;
-                font-size: 12px;
-                color: #353636;
-                line-height: 12px;
-                font-weight: 400;
-              }
-            }
-          }
-        }
-        .chart__statistics {
-          display: flex;
-          height: 20px;
-          padding-left: 10px;
-
-          .statistics-number {
-            margin-right: 8px;
-            color: #353636;
-            font-size: 16px;
-            line-height: 22px;
-          }
-          .statistics-trend {
-            padding: 0 10px;
-            background: #7E9F54;
-            border-radius: 10px;
-            text-align: center;
-            font-size: 12px;
-            color: white;
-          }
-        }
-        .chart__drawing {
-          height: 100%;
-          width:calc(40% + 12px);
-          margin-right:10px;
-        }
-        .chart-line__drawing {
-          height: calc(100% - 32px);
-        }
-        #activeSubscribersChart {
-          height: calc(100% - 52px);
-        }
-      }
-      .analysis-statistics__title {
-        position: relative;
-        margin-bottom: 10px;
-        padding-left: 20px;
-        font-size: 16px;
-        color: #353636;
-      }
-      .analysis-statistics__no-tracking-tip {
-        padding: 0 20px;
-        cursor: pointer;
-        color: #046eca;
-        text-decoration: underline;
-      }
-      .analysis-statistics__subscribers {
-        padding-left: 20px;
-
-        .analysis-statistics__subscriber {
-          margin-bottom: 10px;
-
-          &:last-of-type {
-            margin-bottom: 0;
-          }
-          &.analysis-statistics__subscriber--active {
-            border: 1px solid #38acd2;
-            box-shadow: 0 1px 3px 0 #38acd2;
-          }
-
-          background-color: #F7F7F7;
-          border: 1px solid rgb(226,229,236);
-          border-radius: 2px;
-
-          .subscriber__header {
-            background-color: #38ACD2;
-
-            &.subscriber__header-inactive {
-              background-color: #CCCCCC;
-            }
-          }
-
-          .subscriber__header {
-            position: relative;
-            flex-direction: column;
-            padding: 6px 0 0 70px;
-            color: white;
-            height: 58px;
-
-            .header__icon {
-              position: absolute;
-              left: 20px;
-              top: 14px;
-
-              .icon__box {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                height: 30px;
-                width: 30px;
-                background-color: #233447;
-                border-radius: 50%;
-              }
-            }
-            .header__right {
-              display:flex;
-              flex-direction: row;
-              justify-content: space-between;
-              .header-msisdn {
-                display:flex;
-                flex-direction: column;
-                .header__title {
-                  font-size: 16px;
-                }
-                .header__content {
-                  font-size: 14px;
-                }
-              }
-              .header__operation {
-                display:flex;
-                flex-direction: row;
-                align-items: center;
-
-                .trajectory-text {
-                  margin-right:12px;
-                  font-family: Helvetica-Bold;
-                  font-size: 12px;
-                  color: #233447;
-                  font-weight: 700;
-                  cursor: pointer;
-
-                  i {
-                    font-size: 12px !important;
-                    font-weight: bolder;
-                    margin-right:3px;
-                    color: #233447;
-                  }
-                }
-                .cancel-follow {
-                  margin-right:14px;
-                  i {
-                    cursor: pointer;
-                    font-size:8px;
-                  }
-                }
-              }
-            }
-          }
-          .subscriber__body {
-            padding: 10px 18px;
-            .body__item {
-              display: flex;
-
-              .item__label {
-                padding-right: 10px;
-                text-align: right;
-                width: 60px;
-                font-size: 12px;
-                color: #353636;
-              }
-              .item__value {
-                font-size: 12px;
-                font-weight: bold;
-                color: #233447;
-              }
-            }
-
-            .body-item-record {
-              margin-top: 10px;
-
-              .item-record__header {
-                font-family: Helvetica;
-                font-size: 16px;
-                color: #353636;
-                font-weight: 400;
-                height: 38px;
-                line-height: 38px;
-              }
-              .item-record__info {
-
-              }
-              .item-record__timeline {
-                margin-left: 6px;
-
-                .el-timeline {
-                  padding-left: 0;
-                  //min-height: 300px;
-                  height: 300px;
-                  overflow: auto;
-
-                  &.el-timeline--hide {
-                  }
-
-                  .el-timeline-item {
-                    padding-bottom: 0;
-                    .el-timeline-item__tail {
-                      border-left: 2px dotted #cccccc;
-                      margin-left: 2px;
-                    }
-                    .el-timeline-item__node--normal {
-                      background-image: radial-gradient(#DE3434 20%, transparent);
-                      outline: #F7F7F7 solid 6px;
-                      margin-left: 2px;
-                    }
-                  }
-                  .el-timeline-item:last-child {
-                    padding-bottom: 0;
-                  }
-                }
-                .timeline__info {
-                  display: flex;
-                  padding-bottom: 10px;
-
-                  .timeline__info--circle {
-                    display: flex;
-                    flex-direction: column;
-                    .info__circle {
-                      width: 17px;
-                      height: 17px;
-                      margin-left: -2px;
-                      border-radius: 50%;
-                      background-image: radial-gradient(#DE3434 20%, transparent);
-                      outline: rgba(222,52,52,0.30) solid 4px;
-                      margin-top: 2px;
-                    }
-                    .info__line {
-                      border-left: 2px #cccccc dotted;
-                      height: 34px;
-                      margin-left: 6px;
-                      transition: all 0.2s;
-                    }
-                  }
-                  .timeline__info--item {
-                    padding-left: 13px;
-                    display: flex;
-                    flex-direction: column;
-                    font-size: 12px;
-                    color: #666666;
-
-                    .info--item__value {
-                      color: #333;
-                      font-weight: 500;
-                      margin-left: 4px;
-                    }
-                  }
-                }
-                .timeline__item {
-                  display: flex;
-                  flex-direction: column;
-                  font-size: 12px;
-                  color: #666666;
-
-                  .item__value {
-                    color: #333;
-                    font-weight: 500;
-                    margin-left: 4px;
-                  }
-                }
-                .item-record__btn, .item-record__btn-disabled {
-                  padding-right: 6px;
-                  cursor: pointer;
-                  text-align: center;
-                }
-                .item-record__btn-disabled {
-                  cursor: no-drop;
-                }
-                .scroll-view {
-                  width: 100%;
-                  height: 300px;
-                  overflow-y: scroll;
-                  position: relative;
-
-                  .scroll__item {
-                    width: 100%;
-                    height: 58px;
-                    display: flex;
-
-                    .item-circle {
-                      display: flex;
-                      flex-direction: column;
-                      .circle-circle {
-                        width: 10px;
-                        height: 10px;
-                        margin-left: 2px;
-                        border-radius: 50%;
-                        background-color: #DE3434;
-                      }
-                      .circle-line {
-                        border-left: 2px #cccccc dotted;
-                        height: 34px;
-                        margin-left: 6px;
-                        margin-top: 6px;
-                        transition: all 0.2s;
-                      }
-                    }
-
-                    .item-content {
-                      display: flex;
-                      flex-direction: column;
-                      font-size: 12px;
-                      color: #666666;
-                      padding-left: 16px;
-
-                      .item__value {
-                        color: #333;
-                        font-weight: 500;
-                        margin-left: 4px;
-                      }
-                    }
-                  }
-                  .scroll-list {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    cursor: pointer;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .geo-analysis__hexagon-tooltip {
-    position: fixed;
-    background-color: rgba(255,255,255,0.80);
-    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.5);
-    border-radius: 2px;
-    min-width: 185px;
-    z-index: 3;
-
-    /*&.geo-analysis__hexagon-tooltip--hexagon {
-    }*/
-    &.geo-analysis__hexagon-tooltip--human {
-      .icon__box {
-        background-color: #233447;
-      }
-    }
-    &.geo-analysis__hexagon-tooltip--base-station {
-      .icon__box {
-        background-color: #585B5F;
-      }
-      .hexagon-tooltip__body {
-        .body__item .item__label {
-          width: 140px;
-        }
-      }
-    }
-    .hexagon-tooltip__header {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      padding: 10px 0 10px 63px;
-      color: white;
-
-      .header__icon {
-        position: absolute;
-        left: 14px;
-        top: 16px;
-
-        .icon__box {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          height: 32px;
-          width: 32px;
-          border-radius: 50%;
-        }
-      }
-      .header__title {
-        font-size: 16px;
-      }
-      .header__content {
-        font-size: 14px;
-      }
-    }
-    .hexagon-tooltip__body {
-      padding: 8px 18px;
-
-      .body__timeline {
-        display: flex;
-        flex-direction: row;
-        padding: 3px 0;
-
-        .timeline-symbol {
-          margin-top: 6px;
-          margin-right: 6px;
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-          background-color: #DE3434;
-        }
-      }
-      .body__item {
-        display: flex;
-
-        .item__label {
-          padding-right: 10px;
-          text-align: right;
-          width: 60px;
-          font-size: 12px;
-          color: #353636;
-        }
-        .item__value {
-          font-size: 12px;
-          font-weight: bold;
-          color: #233447;
-        }
-      }
-      .body__tracking {
-        padding-top: 6px;
-        font-size: 12px;
-        color: #38ACD2;
-        text-decoration: underline;
-        cursor: pointer;
-      }
-    }
-  }
-}
-@keyframes pulse {
-  0% {
-    opacity: 1;
-  }
-  70% {
-    opacity: 0.6;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-</style>
diff --git a/src/views/report/Report.vue b/src/views/report/Report.vue
index 8324351a..491bd5e3 100644
--- a/src/views/report/Report.vue
+++ b/src/views/report/Report.vue
@@ -23,19 +23,19 @@
           @search="search"
       >
         <template #top-tool-left>
-          <button id="account-add"  class="top-tool-btn margin-r-10 top-tool-btn--create"
+          <button id="account-add"  class="business-button margin-r-10"
                   v-if="hasPermission('createReport')"
                   @click="add">
             <i class="cn-icon-xinjian cn-icon"></i>
             <span>{{$t('overall.create')}}</span>
           </button>
-          <button id="report-edit"  class="top-tool-btn margin-r-10" :disabled="disableEdit"
+          <button id="report-edit"  class="business-button business-button--light margin-r-10" :disabled="disableEdit"
                   v-if="hasPermission('editReport')"
                   @click="editReport">
             <i class="cn-icon-edit cn-icon"></i>
             <span>{{$t('overall.edit')}}</span>
           </button>
-          <button id="report-delete"  class="top-tool-btn margin-r-10" :disabled="disableDelete"
+          <button id="report-delete" class="business-button business-button--light margin-r-10" :disabled="disableDelete"
                   v-if="hasPermission('deleteReport')"
                   @click="delBatch">
             <i class="cn-icon-delete cn-icon"></i>
diff --git a/src/views/setting/Index.vue b/src/views/setting/Index.vue
index 157f8181..b63511a8 100644
--- a/src/views/setting/Index.vue
+++ b/src/views/setting/Index.vue
@@ -4,7 +4,7 @@
     <div class="explorer-top-tools explorer-detection-top-tools">
       <div class="explorer-top-tools-title">{{$t('overall.knowledgeBase')}}</div>
     </div>
-    <div style="width: 100%;padding-bottom: 26px;">
+    <div class="administration__tabs">
       <chart-tabs :data="tabsData" router></chart-tabs>
     </div>
     <!-- 内容区 -->
@@ -35,7 +35,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/setting/KnowledgeBase.vue b/src/views/setting/KnowledgeBase.vue
index 7d16c8ae..c5a61c97 100644
--- a/src/views/setting/KnowledgeBase.vue
+++ b/src/views/setting/KnowledgeBase.vue
@@ -4,14 +4,14 @@
       <div class="top-title">
         {{$t('overall.knowledgeBase')}}
       </div>
-      <div class="builtIn-to-user-defined" >
-        <button :title="$t('knowledgeBase.userDefinedLibrary')" class="top-tool-btn--user_defined_library"
-                v-if="hasPermission('userDefinedLibrary')"
-                @click="changeToUserDefinedList">
-          <i class="cn-icon-add-knowledge-base cn-icon" ></i>
-          <span>{{$t('knowledgeBase.userDefinedLibrary')}}</span>
-        </button>
-      </div>
+<!--      <div class="builtIn-to-user-defined" >-->
+<!--        <button :title="$t('knowledgeBase.userDefinedLibrary')" class="top-tool-btn&#45;&#45;user_defined_library"-->
+<!--                v-if="hasPermission('userDefinedLibrary')"-->
+<!--                @click="changeToUserDefinedList">-->
+<!--          <i class="cn-icon-add-knowledge-base cn-icon" ></i>-->
+<!--          <span>{{$t('knowledgeBase.userDefinedLibrary')}}</span>-->
+<!--        </button>-->
+<!--      </div>-->
     </div>
 
     <!-- 内置库列表 -->
diff --git a/src/views/setting/KnowledgeBaseUserDefinedList.vue b/src/views/setting/KnowledgeBaseUserDefinedList.vue
index 345358aa..7233a0f7 100644
--- a/src/views/setting/KnowledgeBaseUserDefinedList.vue
+++ b/src/views/setting/KnowledgeBaseUserDefinedList.vue
@@ -33,7 +33,7 @@
             </button>
             <div class="top-tool-search margin-l-10" >
               <el-input v-model="keyWord"  size="small" @keyup.enter="onSearch"></el-input>
-              <button class="top-tool-btn top-tool-btn--search" style="border-radius: 0 2px 2px 0 !important;" @click="onSearch">
+              <button class="top-tool-btn top-tool-btn--search" @click="onSearch">
                 <el-icon><Search /></el-icon>
                 <!--<i class="el-icon-search"></i>-->
               </button>
diff --git a/src/views/system/Index.vue b/src/views/system/Index.vue
index 5d87825a..d5791c56 100644
--- a/src/views/system/Index.vue
+++ b/src/views/system/Index.vue
@@ -4,7 +4,7 @@
     <div class="explorer-top-tools explorer-detection-top-tools">
       <div class="explorer-top-tools-title">{{$t('overall.system')}}</div>
     </div>
-    <div style="width: 100%;padding-bottom: 26px;">
+    <div class="administration__tabs">
       <chart-tabs :data="tabsData" router></chart-tabs>
     </div>
     <!-- 内容区 -->
diff --git a/src/views/system/Plugin.vue b/src/views/system/Plugin.vue
index b878c8cd..7e4c1b16 100644
--- a/src/views/system/Plugin.vue
+++ b/src/views/system/Plugin.vue
@@ -1,28 +1,28 @@
 <template>
-  <div style="height: 100%;" class="plugin-management">
+  <div class="plugin-management">
     <cn-data-list
-            ref="dataList"
-            :tableId="tableId"
-            v-model:custom-table-title="tools.customTableTitle"
-            :api="url"
-            :from="fromRoute.plugin"
-            :layout="['columnCustomize']"
-            @search="search"
+        ref="dataList"
+        :tableId="tableId"
+        v-model:custom-table-title="tools.customTableTitle"
+        :api="url"
+        :from="fromRoute.plugin"
+        :layout="['columnCustomize']"
+        @search="search"
     >
       <template #default>
         <loading :loading="loading"></loading>
         <plugin-table
-                ref="dataTable"
-                :api="url"
-                :isNoData="isNoData"
-                :custom-table-title="tools.customTableTitle"
-                :height="mainTableHeight"
-                :table-data="tableData"
-                @delete="del"
-                @edit="edit"
-                @orderBy="tableDataSort"
-                @reload="getTableData"
-                @selectionChange="selectionChange"
+            ref="dataTable"
+            :api="url"
+            :isNoData="isNoData"
+            :custom-table-title="tools.customTableTitle"
+            :height="mainTableHeight"
+            :table-data="tableData"
+            @delete="del"
+            @edit="edit"
+            @orderBy="tableDataSort"
+            @reload="getTableData"
+            @selectionChange="selectionChange"
         />
       </template>
       <template #pagination>
@@ -71,7 +71,11 @@ export default {
         this.searchLabel = { ...this.searchLabel, ...params }
       }
       // this.searchLabel = { ...this.searchLabel, ...this.pageObj }
-      this.searchLabel = { ...this.searchLabel, jobGroup: 3, pageSize: -1 }
+      this.searchLabel = {
+        ...this.searchLabel,
+        jobGroup: 3,
+        pageSize: -1
+      }
       this.isNoData = false
       this.toggleLoading(true)
       delete this.searchLabel.total
@@ -87,7 +91,7 @@ export default {
             response.data.data.list[i].triggerStatus = response.data.data.list[i].triggerStatus + ''
             const basicInfo = pluginBasicInfo.find(plugin => plugin.id === response.data.data.list[i].id)
             if (basicInfo) {
-              filterDataList.push(Object.assign({},basicInfo,response.data.data.list[i]))
+              filterDataList.push(Object.assign({}, basicInfo, response.data.data.list[i]))
             }
           }
           this.tableData = filterDataList
diff --git a/vue.config.js b/vue.config.js
index dd2b58ce..551d1acc 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -6,12 +6,6 @@ function resolve (dir) {
 module.exports = {
   transpileDependencies: ['/@intlify'],
   css: {
-    /* loaderOptions: {
-      // scss变量全局应用
-      scss: {
-        prependData: '@import "~@/assets/css/main.scss";'
-      }
-    }, */
     sourceMap: false // 开启浏览器调试css定位
   },
   chainWebpack: (config) => {