@nutui/nutui-react-taro 4.0.0-beta.5 → 4.0.0-beta.7

package/dist/es/packages/resultpage/style/style.harmony.css

@@ -162,7 +162,6 @@ page {
   padding: var(--nutui-button-xlarge-padding, 0px calc(20px * var(--nut-scale-f, 1)));
   font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, calc(8px * var(--nut-scale-f, 1))));
-  font-weight: var(--nutui-font-weight-bold, 600);
 }
 .nut-button-xlarge .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, calc(6px * var(--nut-scale-f, 1)));
@@ -178,12 +177,14 @@ page {
 .nut-button-xlarge-children {
   font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
+.nut-button-xlarge {
+  font-weight: var(--nutui-font-weight-bold, 600);
+}
 .nut-button-44 {
   height: var(--nutui-button-44-height, calc(44px * var(--nut-scale-f, 1)));
   padding: var(--nutui-button-44-padding, 0px calc(16px * var(--nut-scale-f, 1)));
   font-size: var(--nutui-button-44-font-size, var(--nutui-font-size-15));
   border-radius: var(--nutui-button-44-border-radius, var(--nutui-radius-base, calc(8px * var(--nut-scale-f, 1))));
-  font-weight: var(--nutui-font-weight-bold, 600);
 }
 .nut-button-44 .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, calc(6px * var(--nut-scale-f, 1)));
@@ -199,12 +200,14 @@ page {
 .nut-button-44-children {
   font-size: var(--nutui-button-44-font-size, var(--nutui-font-size-15));
 }
+.nut-button-44 {
+  font-weight: var(--nutui-font-weight-bold, 600);
+}
 .nut-button-large {
   height: var(--nutui-button-large-height, calc(40px * var(--nut-scale-f, 1)));
   padding: var(--nutui-button-large-padding, 0px calc(12px * var(--nut-scale-f, 1)));
   font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-base, calc(8px * var(--nut-scale-f, 1))));
-  min-width: calc(84px * var(--nut-scale-f, 1));
 }
 .nut-button-large .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, calc(6px * var(--nut-scale-f, 1)));
@@ -220,12 +223,14 @@ page {
 .nut-button-large-children {
   font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
+.nut-button-large {
+  min-width: calc(84px * var(--nut-scale-f, 1));
+}
 .nut-button-36 {
   height: var(--nutui-button-36-height, calc(36px * var(--nut-scale-f, 1)));
   padding: var(--nutui-button-36-padding, 0px calc(12px * var(--nut-scale-f, 1)));
   font-size: var(--nutui-button-36-font-size, var(--nutui-font-size-14));
   border-radius: var(--nutui-button-36-border-radius, var(--nutui-radius-base, calc(8px * var(--nut-scale-f, 1))));
-  min-width: calc(66px * var(--nut-scale-f, 1));
 }
 .nut-button-36 .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, calc(6px * var(--nut-scale-f, 1)));
@@ -241,13 +246,14 @@ page {
 .nut-button-36-children {
   font-size: var(--nutui-button-36-font-size, var(--nutui-font-size-14));
 }
+.nut-button-36 {
+  min-width: calc(66px * var(--nut-scale-f, 1));
+}
 .nut-button-small {
   height: var(--nutui-button-small-height, calc(28px * var(--nut-scale-f, 1)));
   padding: var(--nutui-button-small-padding, 0px calc(8px * var(--nut-scale-f, 1)));
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-s, calc(6px * var(--nut-scale-f, 1))));
-  min-width: calc(52px * var(--nut-scale-f, 1));
-  font-weight: var(--nutui-font-weight, 400);
 }
 .nut-button-small .nut-icon {
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
@@ -257,13 +263,15 @@ page {
 .nut-button-small-children {
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
+.nut-button-small {
+  min-width: calc(52px * var(--nut-scale-f, 1));
+  font-weight: var(--nutui-font-weight, 400);
+}
 .nut-button-mini {
   height: var(--nutui-button-mini-height, calc(24px * var(--nut-scale-f, 1)));
   padding: var(--nutui-button-mini-padding, 0px calc(6px * var(--nut-scale-f, 1)));
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, calc(4px * var(--nut-scale-f, 1))));
-  min-width: calc(48px * var(--nut-scale-f, 1));
-  font-weight: var(--nutui-font-weight, 400);
 }
 .nut-button-mini .nut-icon {
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
@@ -273,6 +281,10 @@ page {
 .nut-button-mini-children {
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
+.nut-button-mini {
+  min-width: calc(48px * var(--nut-scale-f, 1));
+  font-weight: var(--nutui-font-weight, 400);
+}
 .nut-button-primary {
   color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
   background: var(--nutui-button-primary-background-color, var(--nutui-color-primary, #ff0f23));

package/dist/es/packages/shortpassword/style/style.harmony.css

@@ -189,12 +189,6 @@ page {
 .nut-popup-top.nut-popup-round {
   border-radius: 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1)))) var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1))));
 }
-.nut-popup-slide {
-  /* 从顶部滑出 */
-  /* 从右侧滑出 */
-  /* 从底部滑出 */
-  /* 从左侧滑出 */
-}
 @keyframes popup-scale-fade-in {
   from {
     opacity: 0;
@@ -251,6 +245,9 @@ page {
   animation-name: popup-fade-out;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从顶部滑出 */
+}
 @keyframes popup-slide-top-enter {
   from {
     transform: translate3d(0, -100%, 0);
@@ -278,6 +275,9 @@ page {
   animation-name: popup-slide-top-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从右侧滑出 */
+}
 @keyframes popup-slide-right-enter {
   from {
     transform: translate3d(100%, 0, 0);
@@ -305,6 +305,9 @@ page {
   animation-name: popup-slide-right-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从底部滑出 */
+}
 @keyframes popup-slide-bottom-enter {
   from {
     transform: translate3d(0, 100%, 0);
@@ -332,6 +335,9 @@ page {
   animation-name: slide-bottom-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从左侧滑出 */
+}
 @keyframes popup-slide-left-enter {
   from {
     transform: translate3d(-100%, 0, 0);

package/dist/es/packages/skeleton/skeleton.js

@@ -15,21 +15,6 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     duration: 0.6
 });
 export var Skeleton = function Skeleton(props) {
-    var shapeStyle = function shapeStyle() {
-        if (shape === 'circle') return {
-            borderRadius: '50%'
-        };
-        if (shape === 'square') return {
-            borderRadius: '0'
-        };
-        return {};
-    };
-    var durationStyle = function durationStyle() {
-        if (typeof duration !== 'undefined') return {
-            animationDuration: "".concat(duration, "s")
-        };
-        return {};
-    };
     var _$_object_spread = _object_spread({}, defaultProps, props), className = _$_object_spread.className, width = _$_object_spread.width, height = _$_object_spread.height, shape = _$_object_spread.shape, animated = _$_object_spread.animated, rows = _$_object_spread.rows, visible = _$_object_spread.visible, size = _$_object_spread.size, duration = _$_object_spread.duration, children = _$_object_spread.children, rest = _object_without_properties(_$_object_spread, [
         "className",
         "width",
@@ -51,6 +36,21 @@ export var Skeleton = function Skeleton(props) {
             return i;
         });
     };
+    function shapeStyle() {
+        if (shape === 'circle') return {
+            borderRadius: '50%'
+        };
+        if (shape === 'square') return {
+            borderRadius: '0'
+        };
+        return {};
+    }
+    function durationStyle() {
+        if (typeof duration !== 'undefined') return {
+            animationDuration: "".concat(duration, "s")
+        };
+        return {};
+    }
     var _useState = _sliced_to_array(useState(false), 2), animate = _useState[0], setAnimate = _useState[1];
     var playAnimation = function playAnimation() {
         setAnimate(false);

package/dist/es/packages/timeselect/style/style.harmony.css

@@ -189,12 +189,6 @@ page {
 .nut-popup-top.nut-popup-round {
   border-radius: 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1)))) var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1))));
 }
-.nut-popup-slide {
-  /* 从顶部滑出 */
-  /* 从右侧滑出 */
-  /* 从底部滑出 */
-  /* 从左侧滑出 */
-}
 @keyframes popup-scale-fade-in {
   from {
     opacity: 0;
@@ -251,6 +245,9 @@ page {
   animation-name: popup-fade-out;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从顶部滑出 */
+}
 @keyframes popup-slide-top-enter {
   from {
     transform: translate3d(0, -100%, 0);
@@ -278,6 +275,9 @@ page {
   animation-name: popup-slide-top-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从右侧滑出 */
+}
 @keyframes popup-slide-right-enter {
   from {
     transform: translate3d(100%, 0, 0);
@@ -305,6 +305,9 @@ page {
   animation-name: popup-slide-right-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从底部滑出 */
+}
 @keyframes popup-slide-bottom-enter {
   from {
     transform: translate3d(0, 100%, 0);
@@ -332,6 +335,9 @@ page {
   animation-name: slide-bottom-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从左侧滑出 */
+}
 @keyframes popup-slide-left-enter {
   from {
     transform: translate3d(-100%, 0, 0);

package/dist/es/packages/tour/style/style.harmony.css

@@ -189,12 +189,6 @@ page {
 .nut-popup-top.nut-popup-round {
   border-radius: 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1)))) var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1))));
 }
-.nut-popup-slide {
-  /* 从顶部滑出 */
-  /* 从右侧滑出 */
-  /* 从底部滑出 */
-  /* 从左侧滑出 */
-}
 @keyframes popup-scale-fade-in {
   from {
     opacity: 0;
@@ -251,6 +245,9 @@ page {
   animation-name: popup-fade-out;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从顶部滑出 */
+}
 @keyframes popup-slide-top-enter {
   from {
     transform: translate3d(0, -100%, 0);
@@ -278,6 +275,9 @@ page {
   animation-name: popup-slide-top-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从右侧滑出 */
+}
 @keyframes popup-slide-right-enter {
   from {
     transform: translate3d(100%, 0, 0);
@@ -305,6 +305,9 @@ page {
   animation-name: popup-slide-right-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从底部滑出 */
+}
 @keyframes popup-slide-bottom-enter {
   from {
     transform: translate3d(0, 100%, 0);
@@ -332,6 +335,9 @@ page {
   animation-name: slide-bottom-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从左侧滑出 */
+}
 @keyframes popup-slide-left-enter {
   from {
     transform: translate3d(-100%, 0, 0);
@@ -420,22 +426,22 @@ page {
 .nut-popover-arrow {
   position: absolute;
   width: 8px;
-  height: 4px;
+  height: 8px;
 }
 .nut-popover-arrow .nut-icon-ArrowRadius {
   position: absolute;
-  color: var(--nutui-popover-content-background-color, #ffffff);
+  color: var(--nutui-popover-content-background-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
   width: 8px;
-  height: 4px;
+  height: 8px;
 }
 .nut-popover-arrow-top {
-  bottom: -4px;
+  bottom: -8px;
 }
 .nut-popover-arrow-bottom {
-  top: -4px;
+  top: -8px;
 }
 .nut-popover-arrow-left {
-  right: -6px;
+  right: -8px;
   transform-origin: center top;
 }
 .nut-popover-arrow-left.nut-popover-arrow-left {
@@ -443,14 +449,11 @@ page {
   transform: rotate(90deg) translateY(-50%);
 }
 .nut-popover-arrow-left.nut-popover-arrow-left-top {
-  top: 16px;
-  right: -8px;
+  right: -12px;
   transform: rotate(90deg) translateY(0%);
 }
 .nut-popover-arrow-left.nut-popover-arrow-left-bottom {
-  top: auto;
-  bottom: 16px;
-  right: -8px;
+  right: -12px;
   transform: rotate(90deg) translateY(0%);
 }
 .nut-popover-arrow-right {
@@ -458,70 +461,83 @@ page {
 }
 .nut-popover-arrow-right.nut-popover-arrow-right {
   top: 50%;
-  left: -6px;
+  left: -8px;
   transform: rotate(-90deg) translateY(-50%);
 }
 .nut-popover-arrow-right.nut-popover-arrow-right-top {
-  top: 16px;
-  left: -8px;
+  left: -12px;
   transform: rotate(-90deg) translateY(0%);
 }
 .nut-popover-arrow-right.nut-popover-arrow-right-bottom {
-  bottom: 16px;
-  left: -8px;
+  left: -12px;
   transform: rotate(-90deg) translateY(0%);
 }
 .nut-popover .nut-popover-content {
   position: absolute;
-  background: var(--nutui-popover-content-background-color, #ffffff);
-  border-radius: var(--nutui-popover-border-radius, var(--nutui-radius-xs, calc(4px * var(--nut-scale-f, 1))));
+  background: var(--nutui-popover-content-background-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
+  border-radius: var(--nutui-popover-border-radius, var(--nutui-radius-s, calc(6px * var(--nut-scale-f, 1))));
   font-size: var(--nutui-popover-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
-  color: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
-  line-height: 28px;
+  color: var(--nutui-popover-text-color, var(--nutui-color-primary-text, #ffffff));
   /* #ifndef dynamic*/
   max-height: initial;
   overflow-y: initial;
   /* #endif */
 }
 .nut-popover .nut-popover-content-group {
-  padding: 0 var(--nutui-popover-padding, calc(8px * var(--nut-scale-f, 1)));
+  padding: 0 var(--nutui-popover-padding-horizontal, calc(8px * var(--nut-scale-f, 1)));
+  overflow: visible;
 }
 .nut-popover .nut-popover-content .nut-popover-item {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-bottom: 1px solid var(--nutui-popover-divider-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
-  max-width: var(--nutui-popover-item-width, calc(160px * var(--nut-scale-f, 1)));
+  min-height: var(--nutui-popover-height, calc(28px * var(--nut-scale-f, 1)));
+  padding: var(--nutui-popover-padding-vertical, calc(6px * var(--nut-scale-f, 1))) 0;
+  border-bottom: 1px solid var(--nutui-popover-divider-color, rgba(255, 255, 255, 0.12));
   word-wrap: break-word;
 }
 .nut-popover .nut-popover-content .nut-popover-item:last-child {
-  margin-bottom: 0px;
+  margin-bottom: 0;
   border-bottom: none;
 }
 .nut-popover .nut-popover-content .nut-popover-item-icon, .nut-popover .nut-popover-content .nut-popover-item-action-icon {
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
-  width: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
-  height: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
-  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  flex-shrink: 0;
+  align-self: stretch;
+  width: var(--nutui-popover-icon-size, calc(12px * var(--nut-scale-f, 1)));
+  color: var(--nutui-popover-icon-color, rgba(255, 255, 255, 0.8));
+}
+.nut-popover .nut-popover-content .nut-popover-item-icon::before, .nut-popover .nut-popover-content .nut-popover-item-action-icon::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: var(--nutui-popover-action-hotspot-size, calc(36px * var(--nut-scale-f, 1)));
+  transform: translateX(-50%);
 }
 .nut-popover .nut-popover-content .nut-popover-item-icon .nut-icon, .nut-popover .nut-popover-content .nut-popover-item-action-icon .nut-icon {
-  width: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
-  height: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
-  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  position: relative;
+  z-index: 1;
+  width: var(--nutui-popover-icon-size, calc(12px * var(--nut-scale-f, 1)));
+  height: var(--nutui-popover-icon-size, calc(12px * var(--nut-scale-f, 1)));
 }
 .nut-popover .nut-popover-content .nut-popover-item-icon {
   margin-right: var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-popover .nut-popover-content .nut-popover-item-name {
-  width: calc(100% - 34px);
   word-break: keep-all;
   flex: 1;
+  min-width: 0;
+  text-align: center;
+  line-height: calc(var(--nutui-popover-height, calc(28px * var(--nut-scale-f, 1))) - var(--nutui-popover-padding-vertical, calc(6px * var(--nut-scale-f, 1))) * 2);
 }
 .nut-popover .nut-popover-content .nut-popover-item-action-icon {
-  color: var(--nutui-color-text, #505259);
-  margin-left: var(--nutui-spacing-base, calc(8px * var(--nut-scale-f, 1)));
+  margin-left: var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-popover .nut-popover-content .nut-popover-item.nut-popover-item-disabled {
   color: var(--nutui-popover-disable-color, var(--nutui-color-text-disabled, #b4b8bf));
@@ -539,17 +555,15 @@ page {
   right: 0;
 }
 .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right {
-  right: 16px;
-  bottom: -3.5px;
-  transform: rotate(180deg) translateX(0%);
+  transform-origin: center right;
+  transform: rotate(180deg) translateX(50%);
 }
 .nut-popover .nut-popover-content-top-left {
   left: 0;
 }
 .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left {
-  left: 16px;
-  bottom: -3.5px;
-  transform: rotate(180deg) translateX(0%);
+  transform-origin: center left;
+  transform: rotate(180deg) translateX(-50%);
 }
 .nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom {
   left: 50%;
@@ -559,15 +573,13 @@ page {
   right: 0;
 }
 .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right {
-  right: 16px;
-  transform: translateX(0%);
+  transform: translateX(50%);
 }
 .nut-popover .nut-popover-content-bottom-left {
   left: 0;
 }
 .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left {
-  left: 16px;
-  transform: translateX(0%);
+  transform: translateX(-50%);
 }
 .nut-popover .nut-popover-content-left-bottom {
   bottom: 0;
@@ -581,30 +593,40 @@ page {
 .nut-popover .nut-popover-content-right-top {
   top: 0;
 }
+.nut-popover--status .nut-popover-content .nut-popover-item {
+  max-width: var(--nutui-popover-status-max-width, calc(240px * var(--nut-scale-f, 1)));
+}
+.nut-popover--description .nut-popover-content .nut-popover-item {
+  max-width: var(--nutui-popover-description-max-width, calc(208px * var(--nut-scale-f, 1)));
+}
 
-.nut-popover-dark {
-  background: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
-  color: var(--nutui-popover-content-background-color, #ffffff);
+.nut-popover-light .nut-popover-arrow .nut-icon-ArrowRadius,
+.nut-popover-light .nut-popover-arrow .nut-popover-arrow-svg {
+  color: var(--nutui-popover-light-content-background-color, #ffffff);
 }
-.nut-popover-dark .nut-popover-arrow .nut-icon-ArrowRadius {
-  color: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
+.nut-popover-light .nut-popover-content {
+  background: var(--nutui-popover-light-content-background-color, #ffffff) !important;
+  color: var(--nutui-popover-light-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))) !important;
 }
-.nut-popover-dark .nut-popover-content {
-  background: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))) !important;
-  color: var(--nutui-popover-content-background-color, #ffffff) !important;
+.nut-popover-light .nut-popover-content .nut-popover-item {
+  border-bottom-color: var(--nutui-popover-light-divider-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
-.nut-popover-dark .nut-popover-content .nut-popover-item-action-icon {
-  color: rgba(255, 255, 255, 0.8);
+.nut-popover-light .nut-popover-content .nut-popover-item-icon, .nut-popover-light .nut-popover-content .nut-popover-item-action-icon {
+  color: var(--nutui-popover-light-icon-color, rgba(17, 20, 26, 0.8));
+}
+.nut-popover-light .nut-popover-content .nut-popover-item-icon .nut-icon, .nut-popover-light .nut-popover-content .nut-popover-item-action-icon .nut-icon {
+  color: var(--nutui-popover-light-icon-color, rgba(17, 20, 26, 0.8));
 }
 
-[dir=rtl] .nut-popover .nut-popover-content .nut-popover-item-name,
-.nut-rtl .nut-popover .nut-popover-content .nut-popover-item-name {
-  margin-left: 0;
-  margin-right: 4px;
+[dir=rtl] .nut-popover .nut-popover-content .nut-popover-item-icon,
+.nut-rtl .nut-popover .nut-popover-content .nut-popover-item-icon {
+  margin-right: 0;
+  margin-left: var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-popover .nut-popover-content .nut-popover-item-action-icon,
 .nut-rtl .nut-popover .nut-popover-content .nut-popover-item-action-icon {
-  right: auto;
+  margin-left: 0;
+  margin-right: var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-popover .nut-popover-content-top .nut-popover-arrow-top,
 .nut-rtl .nut-popover .nut-popover-content-top .nut-popover-arrow-top {
@@ -620,7 +642,6 @@ page {
 [dir=rtl] .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right,
 .nut-rtl .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right {
   right: auto;
-  left: 16px;
 }
 [dir=rtl] .nut-popover .nut-popover-content-top-left,
 .nut-rtl .nut-popover .nut-popover-content-top-left {
@@ -630,7 +651,6 @@ page {
 [dir=rtl] .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left,
 .nut-rtl .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left {
   left: auto;
-  right: 16px;
 }
 [dir=rtl] .nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom,
 .nut-rtl .nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom {
@@ -646,7 +666,6 @@ page {
 [dir=rtl] .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right,
 .nut-rtl .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right {
   right: auto;
-  left: 16px;
 }
 [dir=rtl] .nut-popover .nut-popover-content-bottom-left,
 .nut-rtl .nut-popover .nut-popover-content-bottom-left {
@@ -656,7 +675,6 @@ page {
 [dir=rtl] .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left,
 .nut-rtl .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left {
   left: auto;
-  right: 16px;
 }
 
 .nut-popover-enter-from,

package/dist/es/packages/tour/tour.js

@@ -136,7 +136,7 @@ export var Tour = function Tour(props) {
                 0,
                 8
             ],
-            arrowOffset: item.arrowOffset || 0
+            arrowOffset: item.arrowOffset || 20
         }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null, children || /*#__PURE__*/ React.createElement(React.Fragment, null, type === 'step' && /*#__PURE__*/ React.createElement(View, {
             className: "nut-tour-content"
         }, title && /*#__PURE__*/ React.createElement(View, {

package/dist/es/types/spec/noticebar/base.d.ts

@@ -31,14 +31,30 @@ export interface BaseNoticeBar extends BaseProps {
     */
     leftIcon: ReactNode
     /**
-    * closeable 模式下，默认为 <Close />
+    * closeable 模式下，默认为 <MaskClose />
     */
     rightIcon: ReactNode
     /**
-    * 区别于rightIcon，为右边自定义区域，仅用于 direction='horizontal' 模式
+    * ~~已废弃，建议使用 action 替代~~ 右边自定义区域，仅用于 direction='horizontal' 模式
     */
     right: ReactNode
     /**
+    * 副文本内容，显示在主文本下方
+    */
+    description: ReactNode
+    /**
+    * 信息标图标，显示在文案右侧，尺寸 12×12
+    */
+    tag: ReactNode
+    /**
+    * 操作按钮区域，支持弱行动（文字链接）和强行动（按钮），最大宽度 99px
+    */
+    action: ReactNode
+    /**
+    * 自动关闭延时（毫秒），0 或不传为手动关闭
+    */
+    autoClose: number
+    /**
     * 延时多少秒
     */
     delay: string | number
@@ -55,7 +71,7 @@ export interface BaseNoticeBar extends BaseProps {
     /**
     * 关闭通知栏时触发
     */
-    onClose?: (event: any) => void
+    onClose?: (event?: any) => void
     /**
     * 外层点击事件回调
     */

package/dist/es/types/spec/popover/base.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { BaseProps } from '../../base/props';
 import { FullPosition, SimpleValues, UITheme } from '../../base/atoms';
+export type PopoverType = 'status' | 'description';
 export interface PopoverList {
     key?: string;
     name: string;
@@ -20,7 +21,14 @@ export interface WrapperPosition {
     right: number;
 }
 export type BasePopover<POPUP_PROPS> = POPUP_PROPS & BaseProps & {
-    theme: UITheme;
+    /**
+    * 气泡类型，status 状态型（图标+文案+关闭），description 说明型（仅文案）
+    */
+    type: PopoverType
+    /**
+    * 主题风格，默认 dark 为设计规范深色气泡；light 为明亮风格（白底深字）
+    */
+    theme: UITheme
     /**
     * 弹出位置，里面具体的参数值可以参考上面的位置自定义例子
     */
@@ -37,7 +45,10 @@ export type BasePopover<POPUP_PROPS> = POPUP_PROPS & BaseProps & {
     * 出现位置的偏移量
     */
     offset: SimpleValues
-    arrowOffset: number;
+    /**
+    * 小箭头的偏移量
+    */
+    arrowOffset: number
     /**
     * 自定义目标元素 id
     */
@@ -54,6 +65,14 @@ export type BasePopover<POPUP_PROPS> = POPUP_PROPS & BaseProps & {
     * 是否在点击选项后关闭
     */
     closeOnActionClick: boolean
+    /**
+    * 是否自动弹出，需配合 onOpen 更新 visible
+    */
+    autoShow: boolean
+    /**
+    * 自动关闭时长（ms），0 表示不自动关闭
+    */
+    duration: number
     children?: ReactNode;
     /**
     * 点击切换 popover 展示状态