@nutui/nutui-react-taro 3.0.0-beta.11 → 3.0.0-beta.13

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

@@ -3,16 +3,22 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-animate {
-  /* Animation css */
+  /* Animation CSS */
+  /* Slide Animations */
+  /* Shake Animation */
+  /* Ripple Animation */
+  /* Breath Animation */
+  /* Twinkle Animation */
+  /* Flicker Animation */
+  /* Jump Animation */
+  /* Float Animation */
+  /* Loop Animation */
 }
 .nut-animate [class*=nut-animate-] {
   animation-duration: 0.5s;
   animation-timing-function: ease-out;
   animation-fill-mode: both;
 }
-.nut-animate .nut-animate-slide-right {
-  animation-name: slide-right;
-}
 @keyframes slide-right {
   0% {
     opacity: 0;
@@ -23,9 +29,6 @@
     transform: translateX(0);
   }
 }
-.nut-animate .nut-animate-slide-left {
-  animation-name: slide-left;
-}
 @keyframes slide-left {
   0% {
     opacity: 0;
@@ -36,9 +39,6 @@
     transform: translateX(0);
   }
 }
-.nut-animate .nut-animate-slide-top {
-  animation-name: slide-top;
-}
 @keyframes slide-top {
   0% {
     opacity: 0;
@@ -49,9 +49,6 @@
     transform: translateY(0);
   }
 }
-.nut-animate .nut-animate-slide-bottom {
-  animation-name: slide-bottom;
-}
 @keyframes slide-bottom {
   0% {
     opacity: 0;
@@ -62,8 +59,17 @@
     transform: translateY(0);
   }
 }
-.nut-animate .nut-animate-shake {
-  animation-name: shake;
+.nut-animate .nut-animate-slide-right {
+  animation-name: slide-right;
+}
+.nut-animate .nut-animate-slide-left {
+  animation-name: slide-left;
+}
+.nut-animate .nut-animate-slide-top {
+  animation-name: slide-top;
+}
+.nut-animate .nut-animate-slide-bottom {
+  animation-name: slide-bottom;
 }
 @keyframes shake {
   0%, 100% {
@@ -97,8 +103,8 @@
     transform: translateX(-1px);
   }
 }
-.nut-animate .nut-animate-ripple {
-  animation-name: ripple;
+.nut-animate .nut-animate-shake {
+  animation-name: shake;
 }
 @keyframes ripple {
   0% {
@@ -108,22 +114,22 @@
     transform: scale(1.1);
   }
 }
-.nut-animate .nut-animate-breath {
-  animation-name: breath;
-  animation-duration: 2700ms;
-  animation-timing-function: ease-in-out;
-  animation-direction: alternate;
+.nut-animate .nut-animate-ripple {
+  animation-name: ripple;
 }
 @keyframes breath {
-  0% {
+  0%, 100% {
     transform: scale(1);
   }
   50% {
     transform: scale(1.1);
   }
-  100% {
-    transform: scale(1);
-  }
+}
+.nut-animate .nut-animate-breath {
+  animation-name: breath;
+  animation-duration: 2700ms;
+  animation-timing-function: ease-in-out;
+  animation-direction: alternate;
 }
 .nut-animate .nut-animate-twinkle {
   position: relative;
@@ -137,7 +143,7 @@
   position: absolute;
   border-radius: 30px;
   right: 50%;
-  margin-top: -15px;
+  margin-top: -30px;
   margin-right: -30px;
   z-index: 1;
   transform: scale(0);
@@ -183,39 +189,30 @@
     transform: translateX(150px) skewX(-20deg);
   }
 }
-.nut-animate .nut-animate-jump {
-  transform-origin: center center;
-  animation: jump 0.7s linear;
-}
 @keyframes jump {
   0% {
-    animation-timing-function: ease-in;
-    transform: rotate(0deg) translateY(0);
+    transform: rotate(0) translateY(0);
   }
   25% {
-    animation-timing-function: ease-out;
     transform: rotate(10deg) translateY(20px);
   }
   50% {
-    animation-timing-function: ease-in;
-    transform: rotate(0deg) translateY(-10px);
+    transform: rotate(0) translateY(-10px);
   }
   75% {
-    animation-timing-function: ease-out;
     transform: rotate(-10deg) translateY(20px);
   }
   100% {
-    animation-timing-function: ease-in;
-    transform: rotate(0deg) translateY(0);
+    transform: rotate(0) translateY(0);
   }
 }
-.nut-animate .nut-animate-float {
-  position: relative;
-  animation-name: float-pop;
+.nut-animate .nut-animate-jump {
+  transform-origin: center center;
+  animation: jump 0.7s linear;
 }
 @keyframes float-pop {
   0% {
-    top: 0px;
+    top: 0;
   }
   25% {
     top: 1px;
@@ -227,9 +224,13 @@
     top: 1px;
   }
   100% {
-    top: 0px;
+    top: 0;
   }
 }
+.nut-animate .nut-animate-float {
+  position: relative;
+  animation-name: float-pop;
+}
 .nut-animate .loop {
   animation-iteration-count: infinite;
 }

package/dist/es/packages/animatingnumbers/style/style.css

@@ -17,14 +17,14 @@
 .nut-countup-listitem-number {
   margin: 0 var(--nutui-countup-lr-margin, 0);
   border-radius: var(--nutui-countup-border-radius, 4px);
-  color: var(--nutui-countup-color, var(--nutui-gray-7));
+  color: var(--nutui-countup-color, var(--nutui-color-title, #1a1a1a));
   background-color: var(--nutui-countup-bg-color, inherit);
 }
 .nut-countup-separator {
   display: flex;
   height: 80%;
   align-items: flex-end;
-  color: var(--nutui-countup-separator-color, var(--nutui-gray-7));
+  color: var(--nutui-countup-separator-color, var(--nutui-color-title, #1a1a1a));
   font-size: var(--nutui-countup-base-size, 18px);
   font-weight: var(--nutui-font-weight-bold, 600);
 }
@@ -39,7 +39,7 @@
 .nut-countup-number-text {
   height: var(--nutui-countup-height, 32px);
   line-height: var(--nutui-countup-height, 32px);
-  color: var(--nutui-countup-color, var(--nutui-gray-7));
+  color: var(--nutui-countup-color, var(--nutui-color-title, #1a1a1a));
   font-size: var(--nutui-countup-base-size, 18px);
   font-weight: var(--nutui-font-weight-bold, 600);
 }

package/dist/es/packages/audio/audio.d.ts

@@ -2,9 +2,21 @@ import React, { CSSProperties, FunctionComponent } from 'react';
 import { InnerAudioContext } from '@tarojs/taro';
 import { BasicComponent } from "../../utils/typings";
 export interface AudioProps extends BasicComponent {
-    className?: string;
-    style?: CSSProperties;
-    url: string;
+    /**
+    * 类名
+    * @default -
+    */
+    className?: string
+    /**
+    * css样式
+    * @default {}
+    */
+    style?: CSSProperties
+    /**
+    * 语音资源链接
+    * @default -
+    */
+    url: string
     autoplay?: boolean;
     /**
     * 是否循环播放
@@ -13,25 +25,33 @@ export interface AudioProps extends BasicComponent {
     loop?: boolean
     /**
     * 展示形式，可选值：controls 控制面板 progress 进度条 icon 图标 none 自定义
-    * @default progress
+    * @default 'progress'
     */
     type: string
-    onFastBack?: (ctx: InnerAudioContext) => void;
     /**
-    * 语音快进回调，type = progress 时生效
-    * @default -
+    * 语音快退回调,type=progress时生效
+    * @default 
+    */
+    onFastBack?: (ctx: InnerAudioContext) => void
+    /**
+    * 语音快进回调,type=progress时生效
+    * @default 
     */
     onForward?: (ctx: InnerAudioContext) => void
     /**
     * 暂停回调
-    * @default -
+    * @default 
     */
     onPause?: any
     onPlay?: any;
-    onPlayEnd?: (ctx: InnerAudioContext) => void;
+    /**
+    * 语音播放完成，loop=false时生效
+    * @default 
+    */
+    onPlayEnd?: (ctx: InnerAudioContext) => void
     /**
     * 可以播放媒体时触发
-    * @default -
+    * @default 
     */
     onCanPlay?: (ctx: InnerAudioContext) => void
 }

package/dist/es/packages/audio/style/style.css

@@ -6,10 +6,10 @@
   position: relative;
   display: flex;
   display: inline-block;
-  /* #ifdef rn harmony*/
+  /* #ifdef harmony*/
   width: 80px;
   /* #endif */
-  /* #ifndef rn harmony*/
+  /* #ifndef harmony*/
   width: auto;
   /* #endif */
   flex-direction: row;
@@ -29,7 +29,7 @@
   touch-action: manipulation;
   -webkit-appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  color: var(--nutui-button-default-color, var(--nutui-gray-7));
+  color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a));
   background: var(--nutui-button-default-background-color, transparent);
   border-width: var(--nutui-button-border-width, 0.5px);
 }
@@ -50,9 +50,9 @@
   left: 50%;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-black-10);
+  background-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7));
   border: inherit;
-  border-color: var(--nutui-black-10);
+  border-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7));
   border-radius: inherit;
   transform: translate(-50%, -50%);
   opacity: 0;
@@ -71,7 +71,7 @@
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  /* #ifndef rn harmony */
+  /* #ifndef harmony */
   background: initial;
   /* #endif */
 }
@@ -109,20 +109,20 @@
 .nut-button-default {
   padding: var(--nutui-button-default-padding, 0px 12px);
   border-style: solid;
-  border-color: var(--nutui-button-default-border-color, var(--nutui-gray-4));
+  border-color: var(--nutui-button-default-border-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-button-default-disabled, .nut-button-default-solid-disabled {
   color: var(--nutui-button-primary-color, #ffffff);
-  background: var(--nutui-button-default-disabled, var(--nutui-gray-4));
-  border-color: var(--nutui-button-default-disabled, var(--nutui-gray-4));
+  background: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
+  border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-button-default-none-disabled {
-  color: var(--nutui-button-default-disabled-color, var(--nutui-gray-5));
+  color: var(--nutui-button-default-disabled-color, var(--nutui-color-text-help, #888b94));
 }
 .nut-button-default-outline-disabled, .nut-button-default-dashed-disabled {
   background: transparent;
-  color: var(--nutui-button-default-disabled, var(--nutui-gray-4));
-  border-color: var(--nutui-button-default-disabled, var(--nutui-gray-4));
+  color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
+  border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-button-normal {
   padding: var(--nutui-button-normal-padding, 0px 12px);
@@ -214,37 +214,37 @@
 }
 .nut-button-primary-disabled, .nut-button-primary-solid-disabled {
   color: var(--nutui-button-primary-color, #ffffff);
-  background: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  background: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
 }
 .nut-button-primary-none {
-  color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
+  color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-button-primary-none-disabled {
-  color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
 }
 .nut-button-primary-outline {
-  color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
-  border-color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
+  color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
+  border-color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-button-primary-outline-disabled {
-  color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
 }
 .nut-button-primary-dashed {
-  color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
-  border-color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
+  color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
+  border-color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-button-primary-dashed-disabled {
-  color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
 }
 .nut-button-primary.nut-button-solid.nut-button-normal {
   font-weight: var(--nutui-font-weight-bold, 600);
 }
 .nut-button-success {
   color: var(--nutui-button-success-color, #ffffff);
-  background: var(--nutui-button-success-background-color, var(--nutui-green-2));
+  background: var(--nutui-button-success-background-color, var(--nutui-color-success, #00d900));
   background-origin: border-box;
   border-color: transparent;
 }
@@ -256,15 +256,15 @@
   border-color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
 }
 .nut-button-success-outline, .nut-button-success-dashed {
-  color: var(--nutui-button-success-border-color, var(--nutui-green-2));
-  border-color: var(--nutui-button-success-border-color, var(--nutui-green-2));
+  color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900));
+  border-color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900));
 }
 .nut-button-success-outline-disabled, .nut-button-success-dashed-disabled {
-  color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
 }
 .nut-button-success-none {
-  color: var(--nutui-button-success-border-color, var(--nutui-green-2));
+  color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900));
 }
 .nut-button-success-none-disabled {
   color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
@@ -298,7 +298,7 @@
 }
 .nut-button-danger {
   color: var(--nutui-button-danger-color, #ffffff);
-  background: var(--nutui-button-danger-background-color, var(--nutui-red-2));
+  background: var(--nutui-button-danger-background-color, var(--nutui-color-danger, #ff0f23));
   background-origin: border-box;
   border-color: transparent;
 }
@@ -306,26 +306,26 @@
   color: var(--nutui-button-danger-color, #ffffff);
 }
 .nut-button-danger-solid-disabled {
-  background: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
-  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
+  background: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
+  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
 }
 .nut-button-danger-outline, .nut-button-danger-dashed {
-  color: var(--nutui-button-danger-border-color, var(--nutui-red-2));
-  border-color: var(--nutui-button-danger-border-color, var(--nutui-red-2));
+  color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23));
+  border-color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23));
 }
 .nut-button-danger-outline-disabled, .nut-button-danger-dashed-disabled {
-  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
-  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
+  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
+  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
 }
 .nut-button-danger-none {
-  color: var(--nutui-button-danger-border-color, var(--nutui-red-2));
+  color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23));
 }
 .nut-button-danger-none-disabled {
-  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
+  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
 }
 .nut-button-warning {
   color: var(--nutui-button-warning-color, #ffffff);
-  background: var(--nutui-button-warning-background-color, var(--nutui-yellow-2));
+  background: var(--nutui-button-warning-background-color, var(--nutui-color-warning, #ffbf00));
   background-origin: border-box;
   border-color: transparent;
 }
@@ -338,15 +338,15 @@
   border-color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
 }
 .nut-button-warning-outline, .nut-button-warning-dashed {
-  color: var(--nutui-button-warning-border-color, var(--nutui-yellow-2));
-  border-color: var(--nutui-button-warning-border-color, var(--nutui-yellow-2));
+  color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00));
+  border-color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00));
 }
 .nut-button-warning-outline-disabled, .nut-button-warning-dashed-disabled {
   color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
   border-color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
 }
 .nut-button-warning-none {
-  color: var(--nutui-button-warning-border-color, var(--nutui-yellow-2));
+  color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00));
 }
 .nut-button-warning-none-disabled {
   color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
@@ -409,7 +409,7 @@
   position: relative;
   height: var(--nutui-range-height, 4px);
   margin: 0 var(--nutui-range-margin, 15px);
-  background-color: var(--nutui-range-inactive-color, var(--nutui-brand-1));
+  background-color: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
   border-radius: 2px;
   flex: 1;
   cursor: pointer;
@@ -422,7 +422,7 @@
 }
 .nut-range-min, .nut-range-max {
   font-size: var(--nutui-font-size-s, 12px);
-  color: var(--nutui-range-color, var(--nutui-gray-7));
+  color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a));
   user-select: none;
 }
 .nut-range-bar {
@@ -432,7 +432,7 @@
   height: 100%;
   max-width: 100%;
   max-height: 100%;
-  background: var(--nutui-range-active-color, var(--nutui-brand-6));
+  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
   border-radius: 2px;
   transition: all 0.2s;
 }
@@ -444,7 +444,7 @@
   background: var(--nutui-range-button-background, #ffffff);
   border-radius: 50%;
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
-  border: var(--nutui-range-button-border, 1px solid var(--nutui-brand-6));
+  border: var(--nutui-range-button-border, 1px solid var(--nutui-color-primary, #ff0f23));
   outline: none;
   align-items: center;
   top: 50%;
@@ -482,7 +482,7 @@
   justify-content: center;
   user-select: none;
   font-size: var(--nutui-font-size-s, 12px);
-  color: var(--nutui-range-color, var(--nutui-gray-7));
+  color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a));
   text-align: center;
   vertical-align: center;
   box-sizing: border-box;
@@ -526,10 +526,10 @@
   height: 11px;
   left: 0px;
   border-radius: 6px;
-  background: var(--nutui-range-inactive-color, var(--nutui-brand-1));
+  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
 }
 .nut-range-tick-active {
-  background: var(--nutui-range-active-color, var(--nutui-brand-6));
+  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
 }
 
 .nut-range-vertical-container {
@@ -592,10 +592,10 @@
   width: 10px;
   height: 10px;
   border-radius: 5px;
-  background: var(--nutui-range-inactive-color, var(--nutui-brand-1));
+  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
 }
 .nut-range-vertical-tick-active {
-  background: var(--nutui-range-active-color, var(--nutui-brand-6));
+  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
 }
 
 [dir=rtl] .nut-range-button-wrapper, [dir=rtl] .nut-range-button-wrapper-right,
@@ -658,7 +658,7 @@
   height: 30px;
   background: #ffffff;
   border-radius: 50%;
-  box-shadow: 0 0 8px var(--nutui-gray-4);
+  box-shadow: 0 0 8px var(--nutui-color-text-disabled, #c2c4cc);
 }
 .nut-audio-icon .nut-audio-icon-stop {
   position: relative;
@@ -671,7 +671,7 @@
   content: "";
   height: 2px;
   width: 30px;
-  background: var(--nutui-gray-4);
+  background: var(--nutui-color-text-disabled, #c2c4cc);
   transform: rotate(45deg);
   transform-origin: 8px -18px;
 }
@@ -706,7 +706,7 @@
   color: blue;
 }
 .nut-audio .nut-audio-none-container .nut-voice {
-  border: 1px solid var(--nutui-gray-7);
+  border: 1px solid var(--nutui-color-title, #1a1a1a);
   align-items: center;
 }
 

package/dist/es/packages/avatar/avatar.js

@@ -9,11 +9,11 @@ import { User } from "@nutui/icons-react-taro";
 import { AvatarContext } from "../avatargroup/context";
 // import Image from '@/packages/image/index.taro'
 import { ComponentDefaults } from "../../utils/typings";
-import { harmonyAndRn } from "../../utils/platform-taro";
+import { harmony } from "../../utils/platform-taro";
 import AvatarGroup from "../avatargroup/index";
 import pxTransform from "../../utils/px-transform";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
-    size: harmonyAndRn() ? '40' : '',
+    size: harmony() ? '40' : '',
     shape: 'round',
     icon: '',
     background: '#eee',
@@ -49,7 +49,7 @@ export var Avatar = function(props) {
         height: sizeValue.indexOf(size) > -1 ? '' : pxTransform(parseInt(size)),
         backgroundColor: "".concat(background),
         color: color
-    }, _define_property(_obj1, harmonyAndRn() ? 'marginRight' : 'marginLeft', avatarIndex !== 1 && (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap) ? "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap, "px") : ''), _define_property(_obj1, "zIndex", (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.level) === 'right' ? Math.abs(groupCount - avatarIndex) : ''), _obj1), style);
+    }, _define_property(_obj1, harmony() ? 'marginRight' : 'marginLeft', avatarIndex !== 1 && (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap) ? "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap, "px") : ''), _define_property(_obj1, "zIndex", (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.level) === 'right' ? Math.abs(groupCount - avatarIndex) : ''), _obj1), style);
     var maxStyles = {
         backgroundColor: "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxBackground),
         color: "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxColor)

package/dist/es/packages/avatar/style/style.css

@@ -25,7 +25,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-gray-3);
+  background: var(--nutui-color-background, #f2f3f5);
   background-size: 100% 100%;
 }
 .nut-image-error {
@@ -38,7 +38,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-gray-3);
+  background: var(--nutui-color-background, #f2f3f5);
   background-size: 100% 100%;
 }
 

package/dist/es/packages/avatarcropper/avatarcropper.js

@@ -8,10 +8,11 @@ import React, { useState, useEffect, useMemo, useCallback } from "react";
 import Taro, { useReady, createSelectorQuery } from "@tarojs/taro";
 import classNames from "classnames";
 import { Canvas, View } from "@tarojs/components";
+import { getWindowInfo } from "../../utils/get-system-info";
 import { Button } from "../button/button";
 import { useConfig } from "../configprovider/index";
 import { ComponentDefaults } from "../../utils/typings";
-import { useTouch } from "../../utils/use-touch";
+import { useTouch } from "../../hooks/use-touch";
 import { clamp, preventDefault } from "../../utils";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     maxZoom: 3,
@@ -84,7 +85,7 @@ export var AvatarCropper = function(props) {
     var _useState = _sliced_to_array(useState(false), 2), visible = _useState[0], setVisible = _useState[1];
     var _useState1 = _sliced_to_array(useState(false), 2), moving = _useState1[0], setMoving = _useState1[1];
     var _useState2 = _sliced_to_array(useState(false), 2), zooming = _useState2[0], setZooming = _useState2[1];
-    var systemInfo = Taro.getSystemInfoSync();
+    var systemInfo = getWindowInfo();
     // 支付宝基础库2.7.0以上支持，需要开启支付宝小程序canvas2d
     var showAlipayCanvas2D = useMemo(function() {
         return Taro.getEnv() === 'ALIPAY' && parseInt(Taro.SDKVersion.replace(/\./g, '')) >= 270;

package/dist/es/packages/backtop/backtop.js

@@ -9,7 +9,6 @@ import classNames from "classnames";
 import { Top } from "@nutui/icons-react-taro";
 import { ComponentDefaults } from "../../utils/typings";
 import HoverButton from "../hoverbutton/index";
-import { rn } from "../../utils/platform-taro";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     threshold: 200,
     zIndex: 900,
@@ -19,8 +18,7 @@ export var BackTop = function(props) {
     var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, threshold = _$_object_spread.threshold, zIndex = _$_object_spread.zIndex, className = _$_object_spread.className, duration = _$_object_spread.duration, icon = _$_object_spread.icon, style = _$_object_spread.style, scrollRes = _$_object_spread.scrollRes, onClick = _$_object_spread.onClick;
     var classPrefix = 'nut-backtop';
     var _useState = _sliced_to_array(useState(false), 2), backTop = _useState[0], setBackTop = _useState[1];
-    var _obj;
-    var cls = classNames(classPrefix, (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-show"), backTop), _define_property(_obj, "".concat(classPrefix, "-rn"), rn()), _obj), className);
+    var cls = classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-show"), backTop), className);
     var systemInfo = useRef({});
     useEffect(function() {
         getSystemInfo().then(function(res) {

package/dist/es/packages/backtop/style/backtop.scss

@@ -1,10 +1,6 @@
 .nut-backtop {
   display: none;
 
-  &-rn {
-    position: absolute;
-  }
-
   &-show {
     display: flex;
     align-items: center;