@nutui/nutui-react-taro 3.0.21-cpp → 3.1.0-beta.1

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

@@ -1,11 +1,21 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
+
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
 .nut-hoverbutton-item-container {
-  width: var(--nutui-hoverbutton-item-size, 40px);
-  height: var(--nutui-hoverbutton-item-size, 40px);
-  border-radius: var(--nutui-hoverbutton-item-size, 40px);
+  width: var(--nutui-hoverbutton-item-size, calc(40px * var(--nut-scale-f, 1)));
+  height: var(--nutui-hoverbutton-item-size, calc(40px * var(--nut-scale-f, 1)));
+  border-radius: var(--nutui-hoverbutton-item-size, calc(40px * var(--nut-scale-f, 1)));
   border: 1px solid var(--nutui-hoverbutton-item-border-color, rgba(0, 0, 0, 0.12));
   background-color: var(--nutui-hoverbutton-item-background, var(--nutui-white-12));
 }
@@ -13,7 +23,7 @@
   background-color: var(--nutui-hoverbutton-item-background-active, rgba(247, 248, 252, 0.9));
 }
 .nut-hoverbutton-item-container-harmony {
-  margin-bottom: var(--nutui-hoverbutton-spacing, var(--nutui-spacing-base, 8px));
+  margin-bottom: var(--nutui-hoverbutton-spacing, var(--nutui-spacing-base, calc(8px * var(--nut-scale-f, 1))));
 }
 .nut-hoverbutton-item-container-harmony:last-child {
   margin-bottom: 0;
@@ -27,7 +37,7 @@
   display: block;
   width: 14px;
   height: 14px;
-  font-size: 14px;
+  font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }
 .nut-hoverbutton-item-icon {
   width: 20px;
@@ -40,7 +50,7 @@
   display: block;
   width: 20px;
   height: 20px;
-  font-size: 20px;
+  font-size: var(--nutui-font-size-2xl, calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }
 .nut-hoverbutton-item-container:active .nut-hoverbutton-item-icon {
   color: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-color-title, #1a1a1a));
@@ -51,7 +61,7 @@
   height: 5px;
 }
 .nut-hoverbutton-item-text {
-  font-size: 10px;
+  font-size: var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   margin-top: 5px;
   line-height: 9px;
 }
@@ -59,17 +69,17 @@
 .nut-hoverbutton {
   display: flex;
   flex-direction: column;
-  gap: var(--nutui-hoverbutton-spacing, var(--nutui-spacing-base, 8px));
+  gap: var(--nutui-hoverbutton-spacing, var(--nutui-spacing-base, calc(8px * var(--nut-scale-f, 1))));
 }
 .nut-hoverbutton-container {
   position: fixed;
-  right: var(--nutui-hoverbutton-position-right, var(--nutui-spacing-base, 8px));
-  bottom: var(--nutui-hoverbutton-position-bottom, 60px);
+  right: var(--nutui-hoverbutton-position-right, var(--nutui-spacing-base, calc(8px * var(--nut-scale-f, 1))));
+  bottom: var(--nutui-hoverbutton-position-bottom, calc(60px * var(--nut-scale-f, 1)));
   z-index: 10;
 }
 
 [dir=rtl] .nut-hoverbutton-container,
 .nut-hoverbutton-container-rtl {
   right: auto;
-  left: var(--nutui-hoverbutton-position-right, var(--nutui-spacing-base, 8px));
+  left: var(--nutui-hoverbutton-position-right, var(--nutui-spacing-base, calc(8px * var(--nut-scale-f, 1))));
 }

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

@@ -3,7 +3,7 @@
     width: $hoverbutton-item-size;
     height: $hoverbutton-item-size;
     border-radius: $hoverbutton-item-size;
-    border: 1px solid $hoverbutton-item-border-color;
+    border: scale-px(1px) solid $hoverbutton-item-border-color;
     background-color: $hoverbutton-item-background;
 
     &:active,
@@ -26,25 +26,25 @@
 
       .nut-icon {
         display: block;
-        width: 14px;
-        height: 14px;
-        font-size: 14px;
+        width: scale-px(14px);
+        height: scale-px(14px);
+        font-size: $font-size-base;
       }
     }
   }
 
   &-icon {
-    width: 20px;
-    height: 20px;
-    margin: 9px;
+    width: scale-px(20px);
+    height: scale-px(20px);
+    margin: scale-px(9px);
     color: $hoverbutton-item-icon-color;
     fill: $hoverbutton-item-icon-color;
 
     .nut-icon {
       display: block;
-      width: 20px;
-      height: 20px;
-      font-size: 20px;
+      width: scale-px(20px);
+      height: scale-px(20px);
+      font-size: $font-size-2xl;
     }
   }
 
@@ -54,13 +54,13 @@
   }
 
   &-text-icon {
-    width: 14px;
-    height: 5px;
+    width: scale-px(14px);
+    height: scale-px(5px);
   }
 
   &-text {
-    font-size: 10px;
-    margin-top: 5px;
-    line-height: 9px;
+    font-size: $font-size-xxs;
+    margin-top: scale-px(5px);
+    line-height: scale-px(9px);
   }
 }

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

@@ -1,19 +1,29 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
+
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
 .nut-hoverbutton-item-container {
-  width: var(--nutui-hoverbutton-item-size, 40px);
-  height: var(--nutui-hoverbutton-item-size, 40px);
-  border-radius: var(--nutui-hoverbutton-item-size, 40px);
-  border: 1px solid var(--nutui-hoverbutton-item-border-color, rgba(0, 0, 0, 0.12));
+  width: var(--nutui-hoverbutton-item-size, calc(40px * var(--nut-scale-f, 1)));
+  height: var(--nutui-hoverbutton-item-size, calc(40px * var(--nut-scale-f, 1)));
+  border-radius: var(--nutui-hoverbutton-item-size, calc(40px * var(--nut-scale-f, 1)));
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-hoverbutton-item-border-color, rgba(0, 0, 0, 0.12));
   background-color: var(--nutui-hoverbutton-item-background, var(--nutui-white-12));
 }
 .nut-hoverbutton-item-container:active, .nut-hoverbutton-item-container-active {
   background-color: var(--nutui-hoverbutton-item-background-active, rgba(247, 248, 252, 0.9));
 }
 .nut-hoverbutton-item-container-harmony {
-  margin-bottom: var(--nutui-hoverbutton-spacing, var(--nutui-spacing-base, 8px));
+  margin-bottom: var(--nutui-hoverbutton-spacing, var(--nutui-spacing-base, calc(8px * var(--nut-scale-f, 1))));
 }
 .nut-hoverbutton-item-container-harmony:last-child {
   margin-bottom: 0;
@@ -25,33 +35,33 @@
 }
 .nut-hoverbutton-item-container-icontext .nut-icon {
   display: block;
-  width: 14px;
-  height: 14px;
-  font-size: 14px;
+  width: calc(14px * var(--nut-scale-f, 1));
+  height: calc(14px * var(--nut-scale-f, 1));
+  font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }
 .nut-hoverbutton-item-icon {
-  width: 20px;
-  height: 20px;
-  margin: 9px;
+  width: calc(20px * var(--nut-scale-f, 1));
+  height: calc(20px * var(--nut-scale-f, 1));
+  margin: calc(9px * var(--nut-scale-f, 1));
   color: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a));
   fill: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-hoverbutton-item-icon .nut-icon {
   display: block;
-  width: 20px;
-  height: 20px;
-  font-size: 20px;
+  width: calc(20px * var(--nut-scale-f, 1));
+  height: calc(20px * var(--nut-scale-f, 1));
+  font-size: var(--nutui-font-size-2xl, calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }
 .nut-hoverbutton-item-container:active .nut-hoverbutton-item-icon {
   color: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-color-title, #1a1a1a));
   fill: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-color-title, #1a1a1a));
 }
 .nut-hoverbutton-item-text-icon {
-  width: 14px;
-  height: 5px;
+  width: calc(14px * var(--nut-scale-f, 1));
+  height: calc(5px * var(--nut-scale-f, 1));
 }
 .nut-hoverbutton-item-text {
-  font-size: 10px;
-  margin-top: 5px;
-  line-height: 9px;
+  font-size: var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  margin-top: calc(5px * var(--nut-scale-f, 1));
+  line-height: calc(9px * var(--nut-scale-f, 1));
 }

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

@@ -1,19 +1,29 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
+
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
 .nut-hoverbutton-item-container {
-  width: var(--nutui-hoverbutton-item-size, 40px);
-  height: var(--nutui-hoverbutton-item-size, 40px);
-  border-radius: var(--nutui-hoverbutton-item-size, 40px);
-  border: 1px solid var(--nutui-hoverbutton-item-border-color, rgba(0, 0, 0, 0.12));
+  width: var(--nutui-hoverbutton-item-size, calc(40px * var(--nut-scale-f, 1)));
+  height: var(--nutui-hoverbutton-item-size, calc(40px * var(--nut-scale-f, 1)));
+  border-radius: var(--nutui-hoverbutton-item-size, calc(40px * var(--nut-scale-f, 1)));
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-hoverbutton-item-border-color, rgba(0, 0, 0, 0.12));
   background-color: var(--nutui-hoverbutton-item-background, var(--nutui-white-12));
 }
 .nut-hoverbutton-item-container:active, .nut-hoverbutton-item-container-active {
   background-color: var(--nutui-hoverbutton-item-background-active, rgba(247, 248, 252, 0.9));
 }
 .nut-hoverbutton-item-container-harmony {
-  margin-bottom: var(--nutui-hoverbutton-spacing, var(--nutui-spacing-base, 8px));
+  margin-bottom: var(--nutui-hoverbutton-spacing, var(--nutui-spacing-base, calc(8px * var(--nut-scale-f, 1))));
 }
 .nut-hoverbutton-item-container-harmony:last-child {
   margin-bottom: 0;
@@ -25,33 +35,33 @@
 }
 .nut-hoverbutton-item-container-icontext .nut-icon {
   display: block;
-  width: 14px;
-  height: 14px;
-  font-size: 14px;
+  width: calc(14px * var(--nut-scale-f, 1));
+  height: calc(14px * var(--nut-scale-f, 1));
+  font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }
 .nut-hoverbutton-item-icon {
-  width: 20px;
-  height: 20px;
-  margin: 9px;
+  width: calc(20px * var(--nut-scale-f, 1));
+  height: calc(20px * var(--nut-scale-f, 1));
+  margin: calc(9px * var(--nut-scale-f, 1));
   color: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a));
   fill: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-hoverbutton-item-icon .nut-icon {
   display: block;
-  width: 20px;
-  height: 20px;
-  font-size: 20px;
+  width: calc(20px * var(--nut-scale-f, 1));
+  height: calc(20px * var(--nut-scale-f, 1));
+  font-size: var(--nutui-font-size-2xl, calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }
 .nut-hoverbutton-item-container:active .nut-hoverbutton-item-icon {
   color: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-color-title, #1a1a1a));
   fill: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-color-title, #1a1a1a));
 }
 .nut-hoverbutton-item-text-icon {
-  width: 14px;
-  height: 5px;
+  width: calc(14px * var(--nut-scale-f, 1));
+  height: calc(5px * var(--nut-scale-f, 1));
 }
 .nut-hoverbutton-item-text {
-  font-size: 10px;
-  margin-top: 5px;
-  line-height: 9px;
+  font-size: var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  margin-top: calc(5px * var(--nut-scale-f, 1));
+  line-height: calc(9px * var(--nut-scale-f, 1));
 }

package/dist/es/packages/hoverbuttonitem/style-jmapp/hoverbuttonitem.scss

@@ -3,7 +3,7 @@
     width: $hoverbutton-item-size;
     height: $hoverbutton-item-size;
     border-radius: $hoverbutton-item-size;
-    border: 1px solid $hoverbutton-item-border-color;
+    border: scale-px(1px) solid $hoverbutton-item-border-color;
     background-color: $hoverbutton-item-background;
 
     &:active,
@@ -26,25 +26,25 @@
 
       .nut-icon {
         display: block;
-        width: 14px;
-        height: 14px;
-        font-size: 14px;
+        width: scale-px(14px);
+        height: scale-px(14px);
+        font-size: $font-size-base;
       }
     }
   }
 
   &-icon {
-    width: 20px;
-    height: 20px;
-    margin: 9px;
+    width: scale-px(20px);
+    height: scale-px(20px);
+    margin: scale-px(9px);
     color: $hoverbutton-item-icon-color;
     fill: $hoverbutton-item-icon-color;
 
     .nut-icon {
       display: block;
-      width: 20px;
-      height: 20px;
-      font-size: 20px;
+      width: scale-px(20px);
+      height: scale-px(20px);
+      font-size: $font-size-2xl;
     }
   }
 
@@ -54,13 +54,13 @@
   }
 
   &-text-icon {
-    width: 14px;
-    height: 5px;
+    width: scale-px(14px);
+    height: scale-px(5px);
   }
 
   &-text {
-    font-size: 10px;
-    margin-top: 5px;
-    line-height: 9px;
+    font-size: $font-size-xxs;
+    margin-top: scale-px(5px);
+    line-height: scale-px(9px);
   }
 }

package/dist/es/packages/hoverbuttonitem/style-jmapp/style.css

@@ -6,7 +6,7 @@
   width: var(--nutui-hoverbutton-item-size, 40px);
   height: var(--nutui-hoverbutton-item-size, 40px);
   border-radius: var(--nutui-hoverbutton-item-size, 40px);
-  border: 1px solid var(--nutui-hoverbutton-item-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)));
+  border: scale-px(1px) solid var(--nutui-hoverbutton-item-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)));
   background-color: var(--nutui-hoverbutton-item-background, var(--nutui-gray-1, #ffffff));
 }
 .nut-hoverbutton-item-container:active, .nut-hoverbutton-item-container-active {
@@ -25,33 +25,33 @@
 }
 .nut-hoverbutton-item-container-icontext .nut-icon {
   display: block;
-  width: 14px;
-  height: 14px;
-  font-size: 14px;
+  width: scale-px(14px);
+  height: scale-px(14px);
+  font-size: var(--nutui-font-text);
 }
 .nut-hoverbutton-item-icon {
-  width: 20px;
-  height: 20px;
-  margin: 9px;
+  width: scale-px(20px);
+  height: scale-px(20px);
+  margin: scale-px(9px);
   color: var(--nutui-hoverbutton-item-icon-color, var(--nutui-gray-7, #1a1a1a));
   fill: var(--nutui-hoverbutton-item-icon-color, var(--nutui-gray-7, #1a1a1a));
 }
 .nut-hoverbutton-item-icon .nut-icon {
   display: block;
-  width: 20px;
-  height: 20px;
-  font-size: 20px;
+  width: scale-px(20px);
+  height: scale-px(20px);
+  font-size: var(--nutui-font-size-2xl, 20px);
 }
 .nut-hoverbutton-item-container:active .nut-hoverbutton-item-icon {
   color: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-gray-6, #595959));
   fill: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-gray-6, #595959));
 }
 .nut-hoverbutton-item-text-icon {
-  width: 14px;
-  height: 5px;
+  width: scale-px(14px);
+  height: scale-px(5px);
 }
 .nut-hoverbutton-item-text {
-  font-size: 10px;
-  margin-top: 5px;
-  line-height: 9px;
+  font-size: var(--nutui-font-text-mini);
+  margin-top: scale-px(5px);
+  line-height: scale-px(9px);
 }

package/dist/es/packages/hoverbuttonitem/style-jrkf/hoverbuttonitem.scss

@@ -3,7 +3,7 @@
     width: $hoverbutton-item-size;
     height: $hoverbutton-item-size;
     border-radius: $hoverbutton-item-size;
-    border: 1px solid $hoverbutton-item-border-color;
+    border: scale-px(1px) solid $hoverbutton-item-border-color;
     background-color: $hoverbutton-item-background;
 
     &:active,
@@ -26,25 +26,25 @@
 
       .nut-icon {
         display: block;
-        width: 14px;
-        height: 14px;
-        font-size: 14px;
+        width: scale-px(14px);
+        height: scale-px(14px);
+        font-size: $font-size-base;
       }
     }
   }
 
   &-icon {
-    width: 20px;
-    height: 20px;
-    margin: 9px;
+    width: scale-px(20px);
+    height: scale-px(20px);
+    margin: scale-px(9px);
     color: $hoverbutton-item-icon-color;
     fill: $hoverbutton-item-icon-color;
 
     .nut-icon {
       display: block;
-      width: 20px;
-      height: 20px;
-      font-size: 20px;
+      width: scale-px(20px);
+      height: scale-px(20px);
+      font-size: $font-size-2xl;
     }
   }
 
@@ -54,13 +54,13 @@
   }
 
   &-text-icon {
-    width: 14px;
-    height: 5px;
+    width: scale-px(14px);
+    height: scale-px(5px);
   }
 
   &-text {
-    font-size: 10px;
-    margin-top: 5px;
-    line-height: 9px;
+    font-size: $font-size-xxs;
+    margin-top: scale-px(5px);
+    line-height: scale-px(9px);
   }
 }

package/dist/es/packages/hoverbuttonitem/style-jrkf/style.css

@@ -6,7 +6,7 @@
   width: var(--nutui-hoverbutton-item-size, 40px);
   height: var(--nutui-hoverbutton-item-size, 40px);
   border-radius: var(--nutui-hoverbutton-item-size, 40px);
-  border: 1px solid var(--nutui-hoverbutton-item-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)));
+  border: scale-px(1px) solid var(--nutui-hoverbutton-item-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)));
   background-color: var(--nutui-hoverbutton-item-background, var(--nutui-gray-1, #ffffff));
 }
 .nut-hoverbutton-item-container:active, .nut-hoverbutton-item-container-active {
@@ -25,33 +25,33 @@
 }
 .nut-hoverbutton-item-container-icontext .nut-icon {
   display: block;
-  width: 14px;
-  height: 14px;
-  font-size: 14px;
+  width: scale-px(14px);
+  height: scale-px(14px);
+  font-size: var(--nutui-font-text);
 }
 .nut-hoverbutton-item-icon {
-  width: 20px;
-  height: 20px;
-  margin: 9px;
+  width: scale-px(20px);
+  height: scale-px(20px);
+  margin: scale-px(9px);
   color: var(--nutui-hoverbutton-item-icon-color, var(--nutui-gray-7, #1a1a1a));
   fill: var(--nutui-hoverbutton-item-icon-color, var(--nutui-gray-7, #1a1a1a));
 }
 .nut-hoverbutton-item-icon .nut-icon {
   display: block;
-  width: 20px;
-  height: 20px;
-  font-size: 20px;
+  width: scale-px(20px);
+  height: scale-px(20px);
+  font-size: var(--nutui-font-size-2xl, 20px);
 }
 .nut-hoverbutton-item-container:active .nut-hoverbutton-item-icon {
   color: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-gray-6, #595959));
   fill: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-gray-6, #595959));
 }
 .nut-hoverbutton-item-text-icon {
-  width: 14px;
-  height: 5px;
+  width: scale-px(14px);
+  height: scale-px(5px);
 }
 .nut-hoverbutton-item-text {
-  font-size: 10px;
-  margin-top: 5px;
-  line-height: 9px;
+  font-size: var(--nutui-font-text-mini);
+  margin-top: scale-px(5px);
+  line-height: scale-px(9px);
 }

package/dist/es/packages/image/image.js

@@ -9,7 +9,6 @@ import { Image as TImage, View } from "@tarojs/components";
 import { Image as ImageIcon, ImageError } from "@nutui/icons-react-taro";
 import classNames from "classnames";
 import { pxTransform } from "../../utils/taro/px-transform";
-import { useConfig } from "../configprovider/index";
 var defaultProps = {
     src: '',
     error: true,
@@ -31,7 +30,6 @@ export var Image = function(props) {
     ]);
     var _useState = _sliced_to_array(useState(true), 2), innerLoading = _useState[0], setInnerLoading = _useState[1];
     var _useState1 = _sliced_to_array(useState(false), 2), isError = _useState1[0], setIsError = _useState1[1];
-    var locale = useConfig().locale;
     var pxCheck = function(value) {
         return Number.isNaN(Number(value)) ? String(value) : pxTransform(+value);
     };
@@ -64,11 +62,8 @@ export var Image = function(props) {
         if (!isError) return null;
         if (typeof error === 'boolean' && error === true && !innerLoading) {
             return /*#__PURE__*/ React.createElement(View, {
-                className: "".concat(classPrefix, "-error"),
-                ariaLabel: locale.image.errorTip || ''
-            }, /*#__PURE__*/ React.createElement(ImageError, {
-                ariaHidden: true
-            }));
+                className: "".concat(classPrefix, "-error")
+            }, /*#__PURE__*/ React.createElement(ImageError, null));
         }
         if (/*#__PURE__*/ React.isValidElement(error) && !innerLoading) {
             return /*#__PURE__*/ React.createElement(View, {
@@ -79,8 +74,7 @@ export var Image = function(props) {
     }, [
         error,
         isError,
-        innerLoading,
-        locale
+        innerLoading
     ]);
     var renderLoading = useCallback(function() {
         if (!loading) return null;
@@ -106,8 +100,6 @@ export var Image = function(props) {
         className: classNames("".concat(classPrefix, "-default"), className && "".concat(className, "-image"), _define_property({}, "".concat(classPrefix, "-error"), isError)),
         style: imgStyle,
         src: src,
-        // @ts-ignore
-        ariaHidden: isError,
         onLoad: function(e) {
             return handleLoad(e);
         },

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

@@ -1,3 +1,13 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
+
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */

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

@@ -1,3 +1,13 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
+
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */