diff --git a/js/global-config/locale/ko_KR.ts b/js/global-config/locale/ko_KR.ts
index d960a50205..e88dfd6ec2 100644
--- a/js/global-config/locale/ko_KR.ts
+++ b/js/global-config/locale/ko_KR.ts
@@ -23,7 +23,7 @@ export default {
     thisMonth: '이번 달',
     week: '하나,둘,셋,넷,다섯,여섯,하루',
     cellMonth: '1월,2월,3월,4월,5월,6월,7월,8월,9월,10월,11월,12월',
- },
+  },
   transfer: {
     title: '{checked} / {total} 안건',
     empty: '데이터 없음',
diff --git a/style/web/components/alert/_index.less b/style/web/components/alert/_index.less
index 178dd916ea..015a9bd919 100644
--- a/style/web/components/alert/_index.less
+++ b/style/web/components/alert/_index.less
@@ -6,8 +6,12 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 /* Alert */
 .@{prefix}-alert {
+  .reset;
+
   display: flex;
   padding: @alert-padding;
   opacity: 1;
diff --git a/style/web/components/anchor/_index.less b/style/web/components/anchor/_index.less
index a313eaf318..8b544f01b2 100644
--- a/style/web/components/anchor/_index.less
+++ b/style/web/components/anchor/_index.less
@@ -4,7 +4,11 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-anchor {
+  .reset;
+
   position: relative;
   background: @anchor-bg-color;
   width: @anchor-width-default;
diff --git a/style/web/components/avatar/_index.less b/style/web/components/avatar/_index.less
index 8a0a32db51..6ae121c8a7 100644
--- a/style/web/components/avatar/_index.less
+++ b/style/web/components/avatar/_index.less
@@ -4,7 +4,11 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-avatar {
+  .reset;
+
   position: relative;
   display: inline-flex;
   background: @avatar-bg-color;
diff --git a/style/web/components/badge/_index.less b/style/web/components/badge/_index.less
index d7351f16cb..024a3995be 100644
--- a/style/web/components/badge/_index.less
+++ b/style/web/components/badge/_index.less
@@ -6,8 +6,12 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 // Badge
 .@{prefix}-badge {
+  .reset;
+
   position: relative;
   display: inline-block;
 
diff --git a/style/web/components/breadcrumb/_index.less b/style/web/components/breadcrumb/_index.less
index c024bc723a..2e301f3efd 100644
--- a/style/web/components/breadcrumb/_index.less
+++ b/style/web/components/breadcrumb/_index.less
@@ -4,7 +4,10 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-breadcrumb {
+  .reset;
   .breadcrumb;
 
   &__separator {
diff --git a/style/web/components/button/_index.less b/style/web/components/button/_index.less
index 76b89a8e8a..87c5770f4a 100644
--- a/style/web/components/button/_index.less
+++ b/style/web/components/button/_index.less
@@ -4,6 +4,8 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .button-attr-color(@theme, @attr, @ghost: false) {
   &:hover {
     @{attr}: @@theme-hover;
@@ -26,6 +28,7 @@
 }
 
 .@{prefix}-button {
+  .reset;
   .button;
 
   .@{prefix}-button__text,
diff --git a/style/web/components/calendar/_index.less b/style/web/components/calendar/_index.less
index 05205c577f..105dbc2ed3 100644
--- a/style/web/components/calendar/_index.less
+++ b/style/web/components/calendar/_index.less
@@ -4,7 +4,11 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-calendar {
+  .reset;
+
   border: 1px solid @calendar-border-color;
   background-color: @calendar-bg;
 
@@ -275,6 +279,7 @@
   }
 
   &__panel {
+    box-sizing: border-box;
     width: 100%;
   }
 
diff --git a/style/web/components/card/_index.less b/style/web/components/card/_index.less
index 45a072cf4a..ecb282131c 100644
--- a/style/web/components/card/_index.less
+++ b/style/web/components/card/_index.less
@@ -6,7 +6,11 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-card {
+  .reset;
+
   position: relative;
   box-sizing: border-box;
   border-radius: @card-border-radius;
diff --git a/style/web/components/cascader/_index.less b/style/web/components/cascader/_index.less
index 943bc531d1..a2776d1583 100644
--- a/style/web/components/cascader/_index.less
+++ b/style/web/components/cascader/_index.less
@@ -8,7 +8,11 @@
 
 @import "../../mixins/_text.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-cascader {
+  .reset;
+
   position: relative;
   border: @cascader-border;
   border-radius: @border-radius;
diff --git a/style/web/components/checkbox/_index.less b/style/web/components/checkbox/_index.less
index 1126925172..d0e7583a74 100644
--- a/style/web/components/checkbox/_index.less
+++ b/style/web/components/checkbox/_index.less
@@ -8,14 +8,20 @@
 
 @import "../../mixins/_layout.less";
 
+@import "../../mixins/_reset.less";
+
 // <name> 替换为组件名
 .@{checkbox-cls}-group {
+  .reset;
+
   display: inline-flex;
   flex-wrap: wrap;
   gap: @checkbox-group-gap;
 }
 
 .@{checkbox-cls} {
+  .reset;
+
   display: inline-flex;
   align-items: center;
   position: relative;
@@ -39,11 +45,13 @@
     border: 1px solid @checkbox-border-color;
     border-radius: @checkbox-border-radius;
     background-color: @checkbox-input-color;
+    box-sizing: border-box;
 
     &::after {
       content: "";
       position: absolute;
       opacity: 0;
+      box-sizing: border-box;
     }
   }
 
diff --git a/style/web/components/collapse/_index.less b/style/web/components/collapse/_index.less
index 7fc1e3e1d2..60f959cb22 100644
--- a/style/web/components/collapse/_index.less
+++ b/style/web/components/collapse/_index.less
@@ -6,7 +6,11 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{collapse-cls} {
+  .reset;
+
   border: @collapse-border-size;
   border-bottom: 0;
   background: @bg-color-container;
diff --git a/style/web/components/color-picker/_index.less b/style/web/components/color-picker/_index.less
index 3ffd3ea6c9..8b6f6653ab 100644
--- a/style/web/components/color-picker/_index.less
+++ b/style/web/components/color-picker/_index.less
@@ -6,6 +6,8 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-color-picker__panel {
   padding: 0;
   width: @color-picker-panel-width;
@@ -26,6 +28,8 @@
 }
 
 .@{prefix}-color-picker {
+  .reset;
+
   &__icon {
     width: @color-picker-icon-size;
     height: @color-picker-icon-size;
@@ -102,6 +106,7 @@
   background: white;
   color: @text-color-brand;
   padding: @color-picker-slider-thumb-padding;
+  box-sizing: border-box;
 
   &::before {
     content: "";
@@ -448,6 +453,7 @@
       position: relative;
       transform-origin: center;
       transition: all @anim-duration-base @anim-time-fn-easing;
+      box-sizing: border-box;
 
       // 暂时先不删，待react同步后再删除
       &__color {
@@ -457,6 +463,7 @@
         overflow: hidden;
         border: 1px solid @component-border;
         border-radius: 50%;
+        flex-shrink: 0;
       }
 
       // 暂时先不删，待react同步后再删除
@@ -484,6 +491,7 @@
       overflow: hidden;
       border: 1px solid @component-border;
       border-radius: 50%;
+      box-sizing: border-box;
     }
 
     &--inner {
diff --git a/style/web/components/comment/_index.less b/style/web/components/comment/_index.less
index 3e92197b1f..ae4fa392ee 100644
--- a/style/web/components/comment/_index.less
+++ b/style/web/components/comment/_index.less
@@ -6,7 +6,11 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-comment {
+  .reset;
+
   width: 100%;
   color: @comment-text-color-default;
 
@@ -70,6 +74,8 @@
     margin-top: @comment-actions-margin-top;
     display: flex;
     justify-content: flex-end;
+    list-style: none;
+    padding: 0;
 
     & > li {
       color: @comment-text-color-secondary;
diff --git a/style/web/components/date-picker-new/_index.less b/style/web/components/date-picker-new/_index.less
new file mode 100644
index 0000000000..ede0a0de9d
--- /dev/null
+++ b/style/web/components/date-picker-new/_index.less
@@ -0,0 +1,363 @@
+// 组件允许单个组件打包，因此默认引入公共基础样式
+
+@import "../../base.less";
+
+@import "./_var.less";
+
+@import "./_mixin.less";
+
+@import "../../mixins/_reset.less";
+
+.@{prefix}-date-picker,
+.@{prefix}-date-range-picker {
+  .reset;
+
+  display: inline-flex;
+}
+
+.@{prefix}-date-picker__panel-container,
+.@{prefix}-date-range-picker__panel-container {
+  padding: 0;
+  min-width: @datepicker-panel-container-min-width;
+}
+
+.@{prefix}-date-picker__panel,
+.@{prefix}-date-range-picker__panel {
+  display: flex;
+  flex-direction: column;
+
+  &--direction-row {
+    flex-direction: row;
+  }
+
+  .@{prefix}-select__dropdown {
+    max-height: @datepicker-panel-select-max-width;
+  }
+
+  // 配合time-picker使用 需重置部分样式
+  .@{prefix}-time-picker__panel {
+    width: @datepicker-time-panel-width;
+
+    &-section-body {
+      padding: 0;
+    }
+
+    &-body {
+      margin: 0;
+    }
+  }
+}
+
+.@{prefix}-date-picker__panel--content,
+.@{prefix}-date-range-picker__panel--content,
+.@{prefix}-date-range-picker__panel--content-wrapper {
+  display: flex;
+}
+.@{prefix}-date-range-picker__panel--content-wrapper {
+  gap: 6px;
+}
+
+.@{prefix}-date-picker__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: @spacer-l;
+  width: 100%;
+
+  &-controller {
+    display: inline-flex;
+    gap: @spacer;
+
+    .@{prefix}-date-picker__header-controller--month {
+      width: @datepicker-month-controller-width;
+    }
+
+    .@{prefix}-date-picker__header-controller--year {
+      width: @datepicker-year-controller-width;
+    }
+  }
+}
+
+.@{prefix}-date-picker__table {
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  th {
+    text-align: center;
+    color: @datepicker-th-font-color;
+    font-weight: @datepicker-th-font-weight;
+  }
+
+  td {
+    text-align: center;
+    font-weight: @datepicker-font-weight-medium;
+  }
+
+  thead::after {
+    content: "-";
+    display: block;
+    line-height: @spacer-s - 1px;
+    color: transparent;
+  }
+}
+
+.@{prefix}-date-picker__footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: @datepicker-presets-padding;
+  gap: @datepicker-presets-gap;
+
+  &--bottom {
+    border-top: 1px solid @datepicker-panel-divider-color;
+  }
+
+  &--top {
+    border-bottom: 1px solid @datepicker-panel-divider-color;
+  }
+
+  &--left {
+    flex-direction: column;
+    border-right: 1px solid @datepicker-panel-divider-color;
+  }
+
+  &--right {
+    flex-direction: column;
+    border-left: 1px solid @datepicker-panel-divider-color;
+  }
+}
+
+.@{prefix}-date-picker__presets {
+  display: flex;
+  gap: @datepicker-presets-gap;
+  white-space: nowrap;
+  min-width: @datepicker-presets-min-width;
+
+  .@{prefix}-button {
+    cursor: pointer;
+  }
+
+  a {
+    color: @datepicker-presets-text-color;
+
+    &:hover {
+      color: @datepicker-presets-text-color-hover;
+    }
+  }
+}
+
+.@{prefix}-date-picker__panel--time,
+.@{prefix}-date-range-picker__panel--time {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: @datepicker-time-panel-padding;
+  border-left: 1px solid @datepicker-panel-divider-color;
+
+  &-viewer {
+    display: flex;
+    height: 32px;
+    line-height: 22px;
+    align-items: center;
+    justify-content: center;
+    color: @text-color-primary;
+  }
+
+  .@{prefix}-time-picker__panel-body {
+    margin: 0;
+  }
+}
+
+.@{prefix}-date-picker__panel--year,
+.@{prefix}-date-picker__panel--month,
+.@{prefix}-date-picker__panel--date {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: @spacer-l;
+  gap: @spacer-l;
+  max-width: @datepicker-panel-max-width;
+}
+
+.@{prefix}-date-picker__panel--year,
+.@{prefix}-date-picker__panel--month {
+  .@{prefix}-date-picker__header-controller--year {
+    width: 130px;
+  }
+
+  .@{prefix}-date-picker__table {
+    table {
+      tbody {
+        width: 100%;
+        display: flex;
+        gap: @spacer-2;
+        flex-direction: column;
+
+        tr {
+          display: flex;
+          justify-content: space-between;
+        }
+      }
+    }
+  }
+
+  .@{prefix}-date-picker__cell--disabled + .@{prefix}-date-picker__cell--disabled:before {
+    left: -@spacer-7;
+  }
+
+  .@{prefix}-date-picker__cell:nth-child(1) {
+    text-align: left;
+  }
+
+  .@{prefix}-date-picker__cell:nth-child(3) {
+    text-align: right;
+  }
+
+  .@{prefix}-date-picker__cell-inner {
+    width: @datepicker-cell-min-width-l;
+  }
+}
+
+.@{prefix}-date-picker__cell {
+  cursor: pointer;
+  position: relative;
+  padding: 0;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    right: 0;
+    left: 0;
+    z-index: 1;
+    height: @datepicker-cell-height;
+    transform: translateY(-50%);
+    transition: all .2s @anim-time-fn-easing;
+  }
+
+  &:hover {
+    .@{prefix}-date-picker__cell-inner {
+      box-shadow: inset 0 0 0 1px @brand-color;
+    }
+  }
+
+  &-inner {
+    position: relative;
+    z-index: 5;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: @datepicker-cell-min-width;
+    height: @datepicker-cell-height;
+    margin: @spacer-s - 1px;
+    border-radius: @datepicker-panel-border-radius;
+    transition: @datepicker-transition;
+  }
+
+  &--now {
+    .@{prefix}-date-picker__cell-inner {
+      color: @datepicker-now-text-color;
+      background: @datepicker-now-background-color;
+    }
+  }
+
+  &--hover-highlight {
+    &::after {
+      background-color: @datepicker-highlight-color;
+    }
+  }
+
+  &--hover-highlight + &--hover-highlight {
+    &::after {
+      left: -28px;
+    }
+  }
+
+  &--highlight + &--highlight {
+    &::before {
+      left: -28px;
+    }
+  }
+
+  &--highlight {
+    &::before {
+      background-color: @datepicker-highlight-color;
+    }
+
+    &.@{prefix}-date-picker__cell--hover-highlight {
+      &::after {
+        background-color: @datepicker-hover-highlight-color;
+      }
+    }
+  }
+
+  &--additional {
+    &:hover {
+      .@{prefix}-date-picker__cell-inner {
+        box-shadow: none;
+        border-color: @datepicker-cell-hover-background;
+        background-color: @datepicker-cell-hover-background;
+      }
+    }
+
+    .@{prefix}-date-picker__cell-inner {
+      color: @datepicker-cell-disabled-color;
+    }
+  }
+
+  &--active {
+    .@{prefix}-date-picker__cell-inner {
+      color: @datepicker-cell-active-color;
+      background-color: @datepicker-cell-active-background;
+    }
+
+    &-start {
+      &::before {
+        left: 6px;
+        border-top-left-radius: @border-radius;
+        border-bottom-left-radius: @border-radius;
+      }
+    }
+
+    &-end {
+      &::before {
+        right: 6px;
+        border-top-right-radius: @border-radius;
+        border-bottom-right-radius: @border-radius;
+      }
+    }
+  }
+
+  &--disabled {
+    &:hover {
+      .@{prefix}-date-picker__cell-inner {
+        box-shadow: none;
+        background-color: @datepicker-cell-disable-background-color;
+      }
+    }
+
+    .@{prefix}-date-picker__cell-inner {
+      cursor: not-allowed;
+      color: @datepicker-cell-disabled-color;
+      background-color: @datepicker-cell-disable-background-color;
+    }
+  }
+
+  &--disabled + &--disabled {
+    &::before {
+      left: -@spacer-4;
+      right: @spacer-l;
+      background-color: @datepicker-cell-disable-background-color;
+    }
+  }
+}
+
+// hover 日期淡化输入框
+.@{prefix}-date-picker__input--placeholder {
+  input {
+    color: @text-color-placeholder;
+  }
+}
diff --git a/style/web/components/date-picker/_index.less b/style/web/components/date-picker/_index.less
index a7b27edb8f..f12bde81b7 100644
--- a/style/web/components/date-picker/_index.less
+++ b/style/web/components/date-picker/_index.less
@@ -6,9 +6,12 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-date-picker,
 .@{prefix}-date-range-picker {
   display: inline-flex;
+  .reset;
 }
 
 .@{prefix}-date-picker__panel-container,
diff --git a/style/web/components/dialog/_index.less b/style/web/components/dialog/_index.less
index fd8ac9cbc0..cb3087883e 100644
--- a/style/web/components/dialog/_index.less
+++ b/style/web/components/dialog/_index.less
@@ -8,8 +8,12 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 // <name> 替换为组件名
 .@{prefix}-dialog {
+  .reset;
+
   width: @dialog-width;
   background-color: @dialog-bg-color;
   position: relative;
diff --git a/style/web/components/divider/_index.less b/style/web/components/divider/_index.less
index 3c69670320..0d5c7bcc65 100644
--- a/style/web/components/divider/_index.less
+++ b/style/web/components/divider/_index.less
@@ -6,7 +6,11 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-divider {
+  .reset;
+
   margin: @divider-horizontal-margin;
   font-size: @divider-font-size;
   border-top: @divider-border-width solid  @divider-border-color;
diff --git a/style/web/components/drawer/_index.less b/style/web/components/drawer/_index.less
index 72389a7d31..b752700ffb 100644
--- a/style/web/components/drawer/_index.less
+++ b/style/web/components/drawer/_index.less
@@ -5,9 +5,13 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 @componentName: drawer;
 
 .@{prefix}-@{componentName} {
+  .reset;
+
   position: fixed;
   z-index: 1500;
   width: 100%;
@@ -125,6 +129,7 @@
     color: @drawer-header-text-color;
     border-bottom: 1px solid @drawer-border-color;
     border-radius: @drawer-header-border-radius;
+    box-sizing: border-box;
   }
 
   &__body {
@@ -140,6 +145,7 @@
     text-align: @drawer-footer-text-align;
     border-top: 1px solid @drawer-border-color;
     background-color: @drawer-bg-color;
+    box-sizing: border-box;
 
     .@{prefix}-button {
       margin-left: @drawer-footer-btn-margin-left;
diff --git a/style/web/components/dropdown/_index.less b/style/web/components/dropdown/_index.less
index d659e32da2..6cfb1e19b5 100644
--- a/style/web/components/dropdown/_index.less
+++ b/style/web/components/dropdown/_index.less
@@ -6,7 +6,11 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-dropdown {
+  .reset;
+
   background-color: @dropdown-bg-color;
   position: relative;
   border-radius: @border-radius;
diff --git a/style/web/components/form/_index.less b/style/web/components/form/_index.less
index f014579e5a..e8dcf7346e 100644
--- a/style/web/components/form/_index.less
+++ b/style/web/components/form/_index.less
@@ -6,7 +6,11 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-form {
+  .reset;
+
   font-size: @form-font-size;
 
   &:not(.@{prefix}-form-inline) {
diff --git a/style/web/components/grid/_index.less b/style/web/components/grid/_index.less
index ba48c7e8c1..f890ec382d 100644
--- a/style/web/components/grid/_index.less
+++ b/style/web/components/grid/_index.less
@@ -6,8 +6,12 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 // Grid system
 .@{prefix}-row {
+  .reset;
+
   display: flex;
   flex-flow: row wrap;
 }
diff --git a/style/web/components/input-adornment/_index.less b/style/web/components/input-adornment/_index.less
index 35702e5ca3..559ae12b39 100644
--- a/style/web/components/input-adornment/_index.less
+++ b/style/web/components/input-adornment/_index.less
@@ -6,7 +6,11 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-input-adornment {
+  .reset;
+
   display: flex;
 
   .input-adornment-item(prepend);
diff --git a/style/web/components/input-number/_index.less b/style/web/components/input-number/_index.less
index c78016c23e..890458f9a6 100644
--- a/style/web/components/input-number/_index.less
+++ b/style/web/components/input-number/_index.less
@@ -8,10 +8,14 @@
 
 @import "../../utilities/_animation.less";
 
+@import "../../mixins/_reset.less";
+
 @inputCls: ~"@{prefix}-input";
 @inputNumberCls: ~"@{prefix}-input-number";
 
 .@{inputNumberCls} {
+  .reset;
+
   display: inline-block;
   position: relative;
   box-sizing: border-box;
diff --git a/style/web/components/input/_index.less b/style/web/components/input/_index.less
index 3f2dd2c16a..00ef7ee1e0 100644
--- a/style/web/components/input/_index.less
+++ b/style/web/components/input/_index.less
@@ -6,7 +6,11 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-input {
+  .reset;
+
   width: 100%;
   position: relative;
   box-sizing: border-box;
@@ -35,6 +39,8 @@
     color: @input-text-color-default;
     line-height: inherit;
     background-color: transparent;
+    box-sizing: border-box;
+    height: 100%;
 
     &:read-only {
       cursor: pointer;
diff --git a/style/web/components/layout/_index.less b/style/web/components/layout/_index.less
index bb6bc533bf..799217b232 100644
--- a/style/web/components/layout/_index.less
+++ b/style/web/components/layout/_index.less
@@ -6,9 +6,10 @@
 
 @import "./_mixin.less";
 
-.@{prefix}-layout,
-.@{prefix}-layout * {
-  box-sizing: border-box;
+@import "../../mixins/_reset.less";
+
+.@{prefix}-layout {
+  .reset;
 }
 
 .@{prefix}-layout,
diff --git a/style/web/components/list/_index.less b/style/web/components/list/_index.less
index a0dcaebc3c..2360f35f1b 100644
--- a/style/web/components/list/_index.less
+++ b/style/web/components/list/_index.less
@@ -8,7 +8,11 @@
 
 @import "../../mixins/_layout.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-list {
+  .reset;
+
   overflow: auto;
   color: @list-font-color;
 
diff --git a/style/web/components/loading/_index.less b/style/web/components/loading/_index.less
index 227b8fd16e..718a1c4137 100644
--- a/style/web/components/loading/_index.less
+++ b/style/web/components/loading/_index.less
@@ -6,7 +6,11 @@
 
 @import "../../utilities/_animation.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-loading {
+  .reset;
+
   position: relative;
   color: @loading-color;
   font-size: @loading-icon-size;
diff --git a/style/web/components/menu/_index-v2.less b/style/web/components/menu/_index-v2.less
index 71c4a0fed7..46a902b7df 100644
--- a/style/web/components/menu/_index-v2.less
+++ b/style/web/components/menu/_index-v2.less
@@ -8,6 +8,8 @@
 
 @import "../../mixins/_layout.less";
 
+@import "../../mixins/_reset.less";
+
 a.@{prefix}-menu__item {
   text-decoration: none;
   color: unset;
@@ -20,6 +22,8 @@ a.@{prefix}-menu__item {
 
 // head-menu
 .@{prefix}-head-menu {
+  .reset;
+
   position: relative;
   width: 100%;
   background-color: @menu-theme-light;
@@ -151,6 +155,7 @@ a.@{prefix}-menu__item {
       min-width: 100%;
       margin-left: 0;
       color: @head-menu-popup-item-color;
+      box-sizing: border-box;
     }
 
     li + li {
@@ -190,6 +195,8 @@ a.@{prefix}-menu__item {
 
 // default-menu
 .@{prefix}-default-menu {
+  .reset;
+
   position: relative;
   width: @default-menu-width;
   display: inline-block;
@@ -337,6 +344,7 @@ a.@{prefix}-menu__item {
     .@{prefix}-menu-group__title {
       padding: 0;
       font-size: 0;
+      box-sizing: border-box;
 
       &::after {
         content: "";
@@ -416,6 +424,7 @@ a.@{prefix}-menu__item {
       padding: 8px;
       cursor: pointer;
       color: @menu-operations-color;
+      box-sizing: border-box;
     }
   }
 
diff --git a/style/web/components/menu/_index.less b/style/web/components/menu/_index.less
index 61b7dcfae5..6342c4aa58 100644
--- a/style/web/components/menu/_index.less
+++ b/style/web/components/menu/_index.less
@@ -8,6 +8,8 @@
 
 @import "../../mixins/_layout.less";
 
+@import "../../mixins/_reset.less";
+
 a.@{prefix}-menu__item {
   text-decoration: none;
   color: unset;
@@ -20,6 +22,8 @@ a.@{prefix}-menu__item {
 
 // head-menu
 .@{prefix}-head-menu {
+  .reset;
+
   position: relative;
   width: 100%;
   background-color: @menu-theme-light;
@@ -68,6 +72,7 @@ a.@{prefix}-menu__item {
       height: 40px;
       padding: 8px;
       line-height: 40px;
+      box-sizing: border-box;
     }
   }
 
@@ -150,6 +155,7 @@ a.@{prefix}-menu__item {
       min-width: 100%;
       margin-left: 0;
       color: @head-menu-popup-item-color;
+      box-sizing: border-box;
     }
 
     li + li {
@@ -189,6 +195,8 @@ a.@{prefix}-menu__item {
 
 // default-menu
 .@{prefix}-default-menu {
+  .reset;
+
   position: relative;
   width: @default-menu-width;
   display: inline-block;
@@ -393,6 +401,7 @@ a.@{prefix}-menu__item {
         line-height: 20px;
         color: @menu-menu-group-title-color;
         font-size: @menu-extra-fontsize;
+        box-sizing: border-box;
       }
     }
   }
@@ -419,6 +428,7 @@ a.@{prefix}-menu__item {
       padding: 8px;
       cursor: pointer;
       color: @menu-operations-color;
+      box-sizing: border-box;
     }
   }
 
diff --git a/style/web/components/message/_index.less b/style/web/components/message/_index.less
index 1735b5b078..a6b61920aa 100644
--- a/style/web/components/message/_index.less
+++ b/style/web/components/message/_index.less
@@ -6,8 +6,11 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 // <name> 替换为组件名
 .@{prefix}-message {
+  .reset;
   .message;
 
   @{msg-icon-selector} {
diff --git a/style/web/components/notification/_index.less b/style/web/components/notification/_index.less
index 7e60ed49c7..4bc27da5cf 100644
--- a/style/web/components/notification/_index.less
+++ b/style/web/components/notification/_index.less
@@ -5,7 +5,10 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-notification {
+  .reset;
   .notification;
 
   &__icon {
diff --git a/style/web/components/pagination/_index.less b/style/web/components/pagination/_index.less
index 08ddbdbf1e..15226faff4 100644
--- a/style/web/components/pagination/_index.less
+++ b/style/web/components/pagination/_index.less
@@ -6,7 +6,11 @@
 
 @import "../../mixins/_layout.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-pagination {
+  .reset;
+
   width: 100%;
   display: flex;
   align-items: center;
@@ -89,6 +93,7 @@
     border-radius: @pagination-border-radius-base;
     cursor: pointer;
     background-color: @pagination-bg-color-default;
+    box-sizing: border-box;
 
     .pagination-number--size(
       @pagination-height-default; @pagination-font-default;
diff --git a/style/web/components/popconfirm/_index.less b/style/web/components/popconfirm/_index.less
index 1f1cab26a5..3b1b9cafd4 100644
--- a/style/web/components/popconfirm/_index.less
+++ b/style/web/components/popconfirm/_index.less
@@ -6,7 +6,11 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{popconfirm-cls} {
+  .reset;
+
   border-radius: @popconfirm-border-radius;
 
   &__content {
diff --git a/style/web/components/popup/_index.less b/style/web/components/popup/_index.less
index ec80553fd3..78e61944c6 100644
--- a/style/web/components/popup/_index.less
+++ b/style/web/components/popup/_index.less
@@ -8,7 +8,11 @@
 
 @import "../../mixins/_layout.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-popup {
+  .reset;
+
   color: @popup-text-color;
   display: inline-block;
   z-index: 5500;
@@ -21,6 +25,7 @@
     padding: @popup-padding;
     font-size: @popup-content-font-size;
     line-height: @popup-content-line-height;
+    box-sizing: border-box;
   }
 
   &__reference {
diff --git a/style/web/components/progress/_index.less b/style/web/components/progress/_index.less
index 8bec07b1b6..3076d40fad 100644
--- a/style/web/components/progress/_index.less
+++ b/style/web/components/progress/_index.less
@@ -5,8 +5,13 @@
 @import "./_var.less";
 
 @import "./_mixin.less";
+
+@import "../../mixins/_reset.less";
+
 // 进度条基本样式
 .@{prefix}-progress {
+  .reset;
+
   &__inner {
     position: relative;
     height: 100%;
diff --git a/style/web/components/radio/_index.less b/style/web/components/radio/_index.less
index 4e5f1582d9..5f21db98d4 100644
--- a/style/web/components/radio/_index.less
+++ b/style/web/components/radio/_index.less
@@ -8,8 +8,12 @@
 
 @import "../../mixins/_scrollbar.less";
 
+@import "../../mixins/_reset.less";
+
 // <name> 替换为组件名
 .@{radio-cls}-group {
+  .reset;
+
   display: inline-flex;
   align-items: center;
   width: fit-content;
@@ -219,6 +223,7 @@
     transition: @radio-button-transition;
     color: @radio-label-color;
     white-space: nowrap;
+    box-sizing: border-box;
 
     &:first-child {
       border-radius: @radio-button-border-radius 0 0 @radio-button-border-radius;
@@ -234,6 +239,7 @@
       opacity: @radio-opacity-transparent;
       height: 0;
       width: 0;
+      .reset;
     }
 
     &:hover {
@@ -276,10 +282,14 @@
 }
 
 .@{radio-cls} {
+  .reset;
+
   position: relative;
   cursor: pointer;
 
   &__former {
+    .reset;
+
     opacity: @radio-opacity-transparent;
     position: absolute;
   }
diff --git a/style/web/components/range-input/_index.less b/style/web/components/range-input/_index.less
index 680acde4f6..59c29daea6 100644
--- a/style/web/components/range-input/_index.less
+++ b/style/web/components/range-input/_index.less
@@ -4,7 +4,11 @@
 
 @import "./_var.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-range-input {
+  .reset;
+
   width: 100%;
   position: relative;
   height: @range-input-height-default;
diff --git a/style/web/components/select-input/_index.less b/style/web/components/select-input/_index.less
index e2ec18fe8d..2f17f9a145 100644
--- a/style/web/components/select-input/_index.less
+++ b/style/web/components/select-input/_index.less
@@ -2,8 +2,12 @@
 
 @import "./_var.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-select-input,
 .@{prefix}-select-input__wrap {
+  .reset;
+
   width: 100%;
   display: inline-block;
 }
diff --git a/style/web/components/select/_index.less b/style/web/components/select/_index.less
index eeeec78d6e..77b1fbac5b 100644
--- a/style/web/components/select/_index.less
+++ b/style/web/components/select/_index.less
@@ -4,6 +4,8 @@
 
 @import "../../mixins/_text.less";
 
+@import "../../mixins/_reset.less";
+
 // select
 .@{prefix}-select__wrap {
   width: 100%;
@@ -16,10 +18,11 @@
 }
 
 .@{prefix}-select {
+  .reset;
+
   position: relative;
   display: inline-flex;
   width: 100%;
-  box-sizing: border-box;
   vertical-align: middle;
   line-height: (@select-height-default - 2px);
   background: @select-bg-color;
@@ -323,6 +326,7 @@
     height: @select-option-height-default;
     line-height: @select-option-line-height;
     padding: @select-option-padding-default;
+    box-sizing: border-box;
     .text-ellipsis();
   }
 }
@@ -347,6 +351,7 @@
   padding: @select-option-padding-default;
   color: @select-option-color;
   transition: background-color @anim-duration-base @anim-time-fn-easing;
+  box-sizing: border-box;
   .text-ellipsis();
 
   span {
diff --git a/style/web/components/skeleton/_index.less b/style/web/components/skeleton/_index.less
index f72be27d23..10a76aa892 100644
--- a/style/web/components/skeleton/_index.less
+++ b/style/web/components/skeleton/_index.less
@@ -5,7 +5,11 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-skeleton {
+  .reset;
+
   &__row {
     display: flex;
     margin-bottom: 10px;
diff --git a/style/web/components/slider/_index.less b/style/web/components/slider/_index.less
index d546dc9e70..84f6e86fac 100644
--- a/style/web/components/slider/_index.less
+++ b/style/web/components/slider/_index.less
@@ -6,6 +6,8 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-slider__input-container {
   display: flex;
   align-items: center;
@@ -25,6 +27,8 @@
 }
 
 .@{prefix}-slider {
+  .reset;
+
   height: @slider-height;
   width: 100%;
   position: relative;
@@ -84,6 +88,7 @@
     border-radius: 50%;
     transition: .2s;
     user-select: none;
+    box-sizing: border-box;
 
     &--dragging {
       box-shadow: @slider-input-shadow;
diff --git a/style/web/components/steps/_index.less b/style/web/components/steps/_index.less
index dd7d869c29..de4c3f8408 100644
--- a/style/web/components/steps/_index.less
+++ b/style/web/components/steps/_index.less
@@ -6,7 +6,11 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-steps {
+  .reset;
+
   display: flex;
   width: 100%;
   .step-item-basic();
diff --git a/style/web/components/swiper/_index.less b/style/web/components/swiper/_index.less
index b7450bd11f..36e5db125c 100644
--- a/style/web/components/swiper/_index.less
+++ b/style/web/components/swiper/_index.less
@@ -6,8 +6,12 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 /* Swiper */
 .@{prefix}-swiper {
+  .reset;
+
   position: relative;
 
   &__wrap {
diff --git a/style/web/components/switch/_index.less b/style/web/components/switch/_index.less
index 250826f1c8..9d81841ea7 100644
--- a/style/web/components/switch/_index.less
+++ b/style/web/components/switch/_index.less
@@ -4,7 +4,11 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-switch {
+  .reset;
+
   position: relative;
   display: inline-flex;
   vertical-align: middle;
@@ -73,6 +77,7 @@
   }
 
   &__content {
+    box-sizing: border-box;
     display: inline-flex;
     align-items: center;
     color: @switch-content-color-unchecked;
diff --git a/style/web/components/table/_index.less b/style/web/components/table/_index.less
index 7932b25af4..f3e704b659 100644
--- a/style/web/components/table/_index.less
+++ b/style/web/components/table/_index.less
@@ -8,6 +8,8 @@
 
 @import "../../mixins/_scrollbar.less";
 
+@import "../../mixins/_reset.less";
+
 @border: 1px solid @table-border-color;
 
 @table-fixed-column-z-index: 30;
@@ -52,6 +54,8 @@
 }
 
 .@{prefix}-table {
+  .reset;
+
   width: 100%;
   font-size: @table-font-size;
   color: @table--text-color;
@@ -124,6 +128,7 @@
     font-weight: normal;
     overflow-wrap: break-word;
     background-color: inherit;
+    box-sizing: border-box;
 
     &:not([align]) {
       text-align: left;
diff --git a/style/web/components/tabs/_index.less b/style/web/components/tabs/_index.less
index 3f9ad73a21..e03fcb2061 100644
--- a/style/web/components/tabs/_index.less
+++ b/style/web/components/tabs/_index.less
@@ -6,7 +6,11 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-tabs {
+  .reset;
+
   overflow: hidden;
   background-color: @tab-default-bg;
 
diff --git a/style/web/components/tag-input/_index.less b/style/web/components/tag-input/_index.less
index bb99d62adb..9b9f74975d 100644
--- a/style/web/components/tag-input/_index.less
+++ b/style/web/components/tag-input/_index.less
@@ -4,8 +4,10 @@
 
 @import "../../utilities/_animation.less";
 
-.@{prefix}-tag-input {
+@import "../../mixins/_reset.less";
 
+.@{prefix}-tag-input {
+  .reset;
   .@{prefix}-tag {
     margin-right: @spacer-s;
     animation: t-fade-in .1s ease-in-out;
diff --git a/style/web/components/tag/_index.less b/style/web/components/tag/_index.less
index a396611df5..236934ea8d 100644
--- a/style/web/components/tag/_index.less
+++ b/style/web/components/tag/_index.less
@@ -6,7 +6,11 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-tag {
+  .reset;
+
   display: inline-flex;
   align-items: center;
   flex-direction: row;
@@ -15,7 +19,6 @@
   font-size: @tag-medium-font-size;
   line-height: @tag-line-height-medium;
   color: @tag-text-color;
-  box-sizing: border-box;
   border-radius: @tag-border-radius-square;
   border: @tag-default-border-width solid @tag-default-border-color;
   white-space: nowrap;
diff --git a/style/web/components/textarea/_index.less b/style/web/components/textarea/_index.less
index 88b41f0522..f95e3db997 100644
--- a/style/web/components/textarea/_index.less
+++ b/style/web/components/textarea/_index.less
@@ -6,72 +6,75 @@
 
 @import "./_mixin.less";
 
-.@{prefix} {
-  &-textarea {
-    position: relative;
+@import "../../mixins/_reset.less";
+
+.@{prefix}-textarea {
+  .reset;
+
+  position: relative;
+  width: 100%;
+
+  &__inner {
+    display: flex;
     width: 100%;
+    height: @textarea-height;
+    min-height: @textarea-height;
+    border: 1px solid @textarea-border-color;
+    border-radius: @textarea-border-radius;
+    padding: @textarea-padding;
+    background-color: @textarea-bg-color-default;
+    font-family: PingFangSC-Regular;
+    font-size: @textarea-font-size;
+    color: @textarea-text-color;
+    resize: vertical;
+    outline: none;
+    line-height: @textarea-line-height;
+    transition: all @anim-time-fn-easing @anim-duration-base, height 0s;
+    box-sizing: border-box;
+
+    &:hover {
+      border-color: @textarea-border-color-hover;
+    }
 
-    &__inner {
-      display: flex;
-      width: 100%;
-      height: @textarea-height;
-      min-height: @textarea-height;
-      border: 1px solid @textarea-border-color;
-      border-radius: @textarea-border-radius;
-      padding: @textarea-padding;
-      background-color: @textarea-bg-color-default;
-      font-family: PingFangSC-Regular;
-      font-size: @textarea-font-size;
-      color: @textarea-text-color;
-      resize: vertical;
-      outline: none;
-      line-height: @textarea-line-height;
-      transition: all @anim-time-fn-easing @anim-duration-base, height 0s;
-
-      &:hover {
-        border-color: @textarea-border-color-hover;
-      }
-
-      &:focus {
-        border-color: @textarea-border-color-focus;
-        box-shadow: 0 0 0 2px @textarea-box-shadow-color-focus;
-      }
-
-      &::placeholder {
-        color: @textarea-placeholder-color;
-      }
-
-      .textarea-status(success);
-      .textarea-status(warning);
-      .textarea-status(error);
+    &:focus {
+      border-color: @textarea-border-color-focus;
+      box-shadow: 0 0 0 2px @textarea-box-shadow-color-focus;
     }
 
-    &__limit {
-      position: absolute;
-      bottom: @textarea-limit-position-bottom;
-      right: @textarea-limit-position-right;
-      font-size: @textarea-font-size;
-      color: @textarea-limit-color;
+    &::placeholder {
+      color: @textarea-placeholder-color;
     }
 
-    .@{prefix}-is-disabled {
-      color: @textarea-color-text-disabled;
-      background-color: @textarea-bg-color-disabled;
-      cursor: not-allowed;
+    .textarea-status(success);
+    .textarea-status(warning);
+    .textarea-status(error);
+  }
 
-      &:hover {
-        border-color: @textarea-border-color;
-      }
+  &__limit {
+    position: absolute;
+    bottom: @textarea-limit-position-bottom;
+    right: @textarea-limit-position-right;
+    font-size: @textarea-font-size;
+    color: @textarea-limit-color;
+  }
+
+  .@{prefix}-is-disabled {
+    color: @textarea-color-text-disabled;
+    background-color: @textarea-bg-color-disabled;
+    cursor: not-allowed;
 
-      &::placeholder {
-        color: @textarea-color-text-disabled;
-      }
+    &:hover {
+      border-color: @textarea-border-color;
     }
 
-    .@{prefix}-resize-none {
-      resize: none;
+    &::placeholder {
+      color: @textarea-color-text-disabled;
     }
   }
+
+  .@{prefix}-resize-none {
+    resize: none;
+  }
 }
 
 .@{prefix}-textarea__tips {
diff --git a/style/web/components/time-picker-new/_index.less b/style/web/components/time-picker-new/_index.less
new file mode 100644
index 0000000000..21f0fdd104
--- /dev/null
+++ b/style/web/components/time-picker-new/_index.less
@@ -0,0 +1,241 @@
+// 组件允许单个组件打包，因此默认引入公共基础样式
+
+@import "../../base.less";
+
+@import "./_var.less";
+
+@import "./_mixin.less";
+
+@import "../../mixins/_layout.less";
+
+@import "../../mixins/_reset.less";
+
+.@{prefix}-time-picker,.@{prefix}-time-range-picker {
+  .reset;
+
+  width: @time-picker-width;
+  background: @time-picker-background-color-common;
+  display: inline-block;
+  position: relative;
+  font-size: @time-picker-font-size;
+  color: @time-picker-input-text-color;
+
+  &.@{prefix}-is-disabled {
+    cursor: not-allowed;
+  }
+
+  & > *:focus,
+  & > *:active {
+    outline: 0;
+  }
+
+  &__group {
+    position: relative;
+
+    &.@{prefix}-is-focused {
+      .@{prefix}-input__suffix {
+        .@{prefix}-icon:not(.@{prefix}-input__suffix-clear) {
+          color: @time-picker-input-color-focused;
+        }
+      }
+    }
+
+    &.active {
+      border: @time-picker-input-border-active;
+      box-shadow: @time-picker-input-shadow-active;
+
+      & + .@{prefix}-time-picker__icon-wrap > .@{prefix}-time-picker__icon-clear {
+        display: block;
+      }
+    }
+
+    &-text {
+      color: @time-picker-input-text-color;
+    }
+
+    input {
+      cursor: pointer;
+    }
+  }
+
+  &__input {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    padding: @time-picker-input-padding;
+    z-index: 1;
+    border-radius: @border-radius;
+    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
+    font-size: @time-picker-font-size;
+    .flex-center;
+
+    &:hover {
+      border-color: @time-picker-input-border-color-hover;
+    }
+
+    &-placeholder {
+      margin-left: @time-picker-input-placeholder-margin-left;
+      color: @time-picker-panel-input-placeholder-color;
+    }
+
+    &-item {
+      height: 22px;
+
+      &-disabled {
+        color: @time-picker-input-color-disabled;
+      }
+
+      &-input {
+        margin: @time-picker-input-item-input-margin;
+        color: inherit;
+        background: none;
+        cursor: pointer;
+        height: inherit;
+        outline: none;
+        width: @time-picker-input-item-input-width;
+        text-align: center;
+        border-radius: @time-picker-input-item-input-radius;
+        border: 0;
+        line-height: 22px;
+
+        &-meridiem {
+          width: @time-picker-input-item-input-meridiem-width;
+        }
+
+        &:focus {
+          border-color: @bg-color-page;
+          background-color: @bg-color-container-hover;
+        }
+      }
+    }
+  }
+
+  &__input-disabled {
+    border: @time-picker-input-border-disabled;
+    background-color: @bg-color-container-hover;
+
+    &-placeholder {
+      color: @text-color-disabled;
+    }
+
+    &-item {
+      &-input {
+        pointer-events: none;
+      }
+    }
+  }
+}
+
+.@{prefix}-time-range-picker {
+  width: auto;
+}
+
+.@{prefix}-time-picker__panel {
+  width: @time-picker-panel-width;
+  background: @time-picker-background-color-common;
+  border-radius: @border-radius;
+  display: inline-block;
+  position: relative;
+  font-size: @time-picker-font-size;
+
+  &-body {
+    width: 100%;
+    height: @time-picker-panel-body-height;
+    position: relative;
+    user-select: none;
+    margin: @time-picker-panel-body-margin;
+
+    &-active-mask {
+      position: absolute;
+      top: 50%;
+      height: @time-picker-panel-item-height;
+      width: 100%;
+      display: flex;
+
+      > div {
+        flex: 1;
+        transform: translateY(
+          -((@time-picker-panel-item-height + @time-picker-panel-item-margin-vertical) /2)
+        );
+        height: @time-picker-panel-item-height;
+        background-color: @time-picker-panel-item-background-color-current;
+        margin: @time-picker-panel-item-margin;
+        border-radius: @time-picker-panel-item-border-radius;
+      }
+    }
+    .flex-center;
+
+    &-scroll {
+      flex: 1;
+      height: 100%;
+      overflow-y: scroll;
+      text-align: center;
+      position: relative;
+      .list-style-none();
+
+      &::-webkit-scrollbar {
+        width: 0; // 不展示滚动
+      }
+
+      &::after,
+      &::before {
+        display: block;
+        height: 50%;
+        content: "";
+      }
+
+      &:last-child {
+        border-right: 0;
+      }
+
+      &-item {
+        height: @time-picker-panel-item-height;
+        font-size: @time-picker-font-size;
+        line-height: @time-picker-panel-item-height;
+        color: @time-picker-panel-item-color;
+        margin: @time-picker-panel-item-margin;
+        border-radius: @time-picker-panel-item-border-radius;
+        text-align: center;
+        cursor: pointer;
+        transition: background-color @anim-duration-base;
+
+        &:not(&.@{prefix}-is-current):not(&.@{prefix}-is-disabled):hover {
+          color: @time-picker-panel-item-color-hover;
+        }
+
+        &:not(&.@{prefix}-is-current):not(&.@{prefix}-is-disabled):active {
+          background-color: @time-picker-panel-item-background-color-active;
+        }
+
+        &.@{prefix}-is-disabled {
+          color: @text-color-disabled;
+          cursor: not-allowed;
+        }
+
+        &.@{prefix}-is-hidden {
+          display: none;
+          cursor: not-allowed;
+        }
+
+        &.@{prefix}-is-current {
+          color: @time-picker-panel-item-color-current;
+        }
+      }
+    }
+  }
+}
+
+.@{prefix}-time-picker__panel-section {
+  &-footer {
+    width: 100%;
+    height: @time-picker-panel-footer-height;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row-reverse; // 确定按钮一定有 此刻按钮不一定有
+    align-items: center;
+    background-color: @time-picker-background-color-common;
+    position: relative;
+    border-top: 1px solid @border-level-1-color;
+    box-sizing: border-box;
+  }
+}
diff --git a/style/web/components/time-picker/_index.less b/style/web/components/time-picker/_index.less
index b45d47be7e..ac1c1ea79a 100644
--- a/style/web/components/time-picker/_index.less
+++ b/style/web/components/time-picker/_index.less
@@ -8,13 +8,17 @@
 
 @import "../../mixins/_layout.less";
 
-.@{prefix}-time-picker,.@{prefix}-time-range-picker {
+@import "../../mixins/_reset.less";
+
+.@{prefix}-time-picker,
+.@{prefix}-time-range-picker {
   width: @time-picker-width;
   background: @time-picker-background-color-common;
   display: inline-block;
   position: relative;
   font-size: @time-picker-font-size;
   color: @time-picker-input-text-color;
+  .reset;
 
   &.@{prefix}-is-disabled {
     cursor: not-allowed;
@@ -232,5 +236,6 @@
     background-color: @time-picker-background-color-common;
     position: relative;
     border-top: 1px solid @border-level-1-color;
+    box-sizing: border-box;
   }
 }
diff --git a/style/web/components/tooltip/_index.less b/style/web/components/tooltip/_index.less
index f0ac187be9..97ae118c96 100644
--- a/style/web/components/tooltip/_index.less
+++ b/style/web/components/tooltip/_index.less
@@ -13,6 +13,7 @@
     margin-bottom: 1px;
     max-width: @tooltip-max-width;
     word-break: break-word;
+    box-sizing: border-box;
 
     &:not(.@{prefix}-tooltip--light) {
       color: @tooltip-text-color;
diff --git a/style/web/components/transfer/_index.less b/style/web/components/transfer/_index.less
index c7d926cc42..f8ed71d6bc 100644
--- a/style/web/components/transfer/_index.less
+++ b/style/web/components/transfer/_index.less
@@ -2,9 +2,11 @@
 
 @import "./_var.less";
 
-@import "../../_variables.less";
+@import "../../mixins/_reset.less";
 
 .@{prefix}-transfer {
+  .reset;
+
   font-size: @transfer-font-size;
   line-height: @transfer-line-height;
   position: relative;
@@ -41,6 +43,7 @@
       width: @transfer-list-header-width;
       padding: @transfer-list-header-padding;
       margin: @transfer-list-header-margin;
+      box-sizing: border-box;
 
       & + :not(.@{prefix}-transfer__list--with-search) {
         border-top: @transfer-border;
@@ -71,6 +74,7 @@
       position: relative;
       height: 100%;
       padding: @transfer-list-body-padding;
+      box-sizing: border-box;
     }
 
     &--with-search {
@@ -206,6 +210,7 @@
     top: 0;
     width: 100%;
     padding: @transfer-list-search-wrapper-margin;
+    box-sizing: border-box;
   }
 }
 
diff --git a/style/web/components/tree-select/_index.less b/style/web/components/tree-select/_index.less
index 5004b7053b..f544ea96d8 100644
--- a/style/web/components/tree-select/_index.less
+++ b/style/web/components/tree-select/_index.less
@@ -1,6 +1,10 @@
 @import "../../base.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-tree-select {
+  .reset;
+
   &--without-input {
     input {
       display: none;
diff --git a/style/web/components/tree/_index.less b/style/web/components/tree/_index.less
index f7777d54f2..e8db173c1d 100644
--- a/style/web/components/tree/_index.less
+++ b/style/web/components/tree/_index.less
@@ -6,8 +6,12 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 // <name> 替换为组件名
 .@{prefix}-tree {
+  .reset;
+
   line-height: @tree-node-item-line-height;
   font-size: @tree-font-size;
   color: @tree-node-text-color;
diff --git a/style/web/components/upload/_index.less b/style/web/components/upload/_index.less
index cb0124f070..a9e8e87f20 100644
--- a/style/web/components/upload/_index.less
+++ b/style/web/components/upload/_index.less
@@ -10,7 +10,10 @@
 
 @import "../../mixins/_layout.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-upload {
+  .reset;
 
   .@{prefix}-size-s {
     display: block;
@@ -216,6 +219,7 @@
       flex-direction: column;
       background-color: @upload-card-container-bg-color;
       border: @upload-card-contariner-border;
+      box-sizing: border-box;
 
       > .@{prefix}-icon,
       .@{prefix}-loading {
@@ -225,6 +229,7 @@
 
       > p {
         color: @text-color-placeholder;
+        margin: 0;
       }
     }
 
diff --git a/style/web/mixins/_reset.less b/style/web/mixins/_reset.less
new file mode 100644
index 0000000000..6582450362
--- /dev/null
+++ b/style/web/mixins/_reset.less
@@ -0,0 +1,12 @@
+@import "../_variables.less";
+
+.reset() {
+  font-family: @font-family;
+  font-size: @font-size-base;
+  line-height: @text-line-height-base;
+  color: @text-color-primary;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}