diff --git a/src/assets/css/components/views/charts2/linkBlock.scss b/src/assets/css/components/views/charts2/linkBlock.scss
index 14f291ef..1b8f9af3 100644
--- a/src/assets/css/components/views/charts2/linkBlock.scss
+++ b/src/assets/css/components/views/charts2/linkBlock.scss
@@ -8,9 +8,9 @@
     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;
@@ -33,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 {
@@ -62,124 +62,23 @@
     }
   }
 }
-/*.link-blocks {
-  $blue: var(--el-color-primary);
-  $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/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/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',