From 8987e5269cc378fe4bceaaf4d035f373bb0c1e58 Mon Sep 17 00:00:00 2001
From: "Alex.hxy" <1872591453@qq.com>
Date: Mon, 11 Nov 2024 14:26:02 +0800
Subject: [PATCH 1/3] chore(image): icon demo

---
 src/packages/image/demo.taro.tsx        | 13 ++++++-------
 src/packages/image/demos/taro/demo3.tsx | 11 ++++++-----
 src/packages/image/demos/taro/demo4.tsx | 18 ++++++++++++++----
 src/packages/image/image.taro.tsx       | 11 ++++-------
 4 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/src/packages/image/demo.taro.tsx b/src/packages/image/demo.taro.tsx
index 0f6f149721..aad1d97e27 100644
--- a/src/packages/image/demo.taro.tsx
+++ b/src/packages/image/demo.taro.tsx
@@ -12,7 +12,7 @@ import Demo5 from './demos/taro/demo5'
 import Demo6 from './demos/taro/demo6'
 import Demo7 from './demos/taro/demo7'
 import Demo8 from './demos/taro/demo8'
-import { harmonyAndRn } from '@/utils/platform-taro'
+import { harmony, harmonyAndRn } from '@/utils/platform-taro'
 
 const ImageDemo = () => {
   const [translated] = useTranslate({
@@ -49,19 +49,18 @@ const ImageDemo = () => {
         <Cell>
           <Demo2 />
         </Cell>
-        {!harmonyAndRn() && (
+        <View className="h2">{translated.loading}</View>
+        <Cell>
+          <Demo3 />
+        </Cell>
+        {!harmony() && (
           <>
-            <View className="h2">{translated.loading}</View>
-            <Cell>
-              <Demo3 />
-            </Cell>
             <View className="h2">{translated.error}</View>
             <Cell>
               <Demo4 />
             </Cell>
           </>
         )}
-
         <View className="h2">{translated.imageText}</View>
         <Cell>
           <Demo5 />
diff --git a/src/packages/image/demos/taro/demo3.tsx b/src/packages/image/demos/taro/demo3.tsx
index a060e1f9e4..35fe299b81 100644
--- a/src/packages/image/demos/taro/demo3.tsx
+++ b/src/packages/image/demos/taro/demo3.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { Image } from '@nutui/nutui-react-taro'
 import { Loading } from '@nutui/icons-react-taro'
 import { View } from '@tarojs/components'
+import pxTransform from '@/utils/px-transform'
 
 const Demo3 = () => {
   const imageText: React.CSSProperties = {
@@ -13,14 +14,14 @@ const Demo3 = () => {
   return (
     <>
       <View style={{ display: 'flex', flexWrap: 'wrap' }}>
-        <View style={{ width: 98 }}>
-          <Image width="80" height="80" />
+        <View style={{ width: pxTransform(98) }}>
+          <Image width={pxTransform(80)} height={pxTransform(80)} />
           <View style={imageText}>默认</View>
         </View>
-        <View style={{ width: 98 }}>
+        <View style={{ width: pxTransform(98) }}>
           <Image
-            width="80"
-            height="80"
+            width={pxTransform(80)}
+            height={pxTransform(80)}
             loading={<Loading className="nut-icon-loading" />}
           />
           <View style={imageText}>自定义</View>
diff --git a/src/packages/image/demos/taro/demo4.tsx b/src/packages/image/demos/taro/demo4.tsx
index 35798348e4..c1181c295b 100644
--- a/src/packages/image/demos/taro/demo4.tsx
+++ b/src/packages/image/demos/taro/demo4.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { Image } from '@nutui/nutui-react-taro'
 import { Failure } from '@nutui/icons-react-taro'
 import { View } from '@tarojs/components'
+import pxTransform from '@/utils/px-transform'
 
 const Demo4 = () => {
   const imageText: React.CSSProperties = {
@@ -13,12 +14,21 @@ const Demo4 = () => {
   return (
     <>
       <View style={{ display: 'flex', flexWrap: 'wrap' }}>
-        <View style={{ width: 98 }}>
-          <Image src="https://x" width="80" height="80" />
+        <View style={{ width: pxTransform(98) }}>
+          <Image
+            src="https://x"
+            width={pxTransform(80)}
+            height={pxTransform(80)}
+          />
           <View style={imageText}>默认</View>
         </View>
-        <View style={{ width: 98 }}>
-          <Image src="https://x" width="80" height="80" error={<Failure />} />
+        <View style={{ width: pxTransform(98) }}>
+          <Image
+            src="https://x"
+            width={pxTransform(80)}
+            height={pxTransform(80)}
+            error={<Failure />}
+          />
           <View style={imageText}>自定义</View>
         </View>
       </View>
diff --git a/src/packages/image/image.taro.tsx b/src/packages/image/image.taro.tsx
index a1ae21c547..f51bc161d2 100644
--- a/src/packages/image/image.taro.tsx
+++ b/src/packages/image/image.taro.tsx
@@ -14,7 +14,6 @@ import {
 import { Image as ImageIcon, ImageError } from '@nutui/icons-react-taro'
 import classNames from 'classnames'
 import { BaseEventOrig } from '@tarojs/components/types/common'
-import { harmonyAndRn } from '@/utils/platform-taro'
 
 export interface ImageProps extends Omit<TImageProps, 'style'> {
   style?: CSSProperties
@@ -139,12 +138,10 @@ export const Image: FunctionComponent<Partial<ImageProps>> = (props) => {
         onLoad={(e) => handleLoad(e)}
         onError={(e) => handleError(e)}
       />
-      {!harmonyAndRn() && (
-        <>
-          {renderLoading()}
-          {renderErrorImg()}
-        </>
-      )}
+      <>
+        {renderLoading()}
+        {renderErrorImg()}
+      </>
     </View>
   )
 }

From bbe11b494172199f9c208876c702c1eb8362350d Mon Sep 17 00:00:00 2001
From: "Alex.hxy" <1872591453@qq.com>
Date: Mon, 11 Nov 2024 21:14:59 +0800
Subject: [PATCH 2/3] chore: update

---
 src/packages/image/demos/taro/demo1.tsx |  3 +--
 src/packages/image/demos/taro/demo2.tsx | 18 +++++++++---------
 src/packages/image/demos/taro/demo3.tsx |  6 +++---
 src/packages/image/demos/taro/demo4.tsx | 13 ++-----------
 src/packages/image/demos/taro/demo5.tsx |  4 ++--
 src/packages/image/demos/taro/demo6.tsx |  7 +------
 src/packages/image/demos/taro/demo7.tsx |  7 +------
 src/packages/image/image.taro.tsx       | 19 ++++---------------
 8 files changed, 23 insertions(+), 54 deletions(-)

diff --git a/src/packages/image/demos/taro/demo1.tsx b/src/packages/image/demos/taro/demo1.tsx
index 2b325d1284..6a55fcce12 100644
--- a/src/packages/image/demos/taro/demo1.tsx
+++ b/src/packages/image/demos/taro/demo1.tsx
@@ -1,13 +1,12 @@
 import React from 'react'
 import { Image } from '@nutui/nutui-react-taro'
-import pxTransform from '@/utils/px-transform'
 
 const Demo1 = () => {
   const src =
     'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png'
   return (
     <>
-      <Image src={src} height={pxTransform(200)} />
+      <Image src={src} height={200} />
     </>
   )
 }
diff --git a/src/packages/image/demos/taro/demo2.tsx b/src/packages/image/demos/taro/demo2.tsx
index 409ea7ef44..d164cdae3d 100644
--- a/src/packages/image/demos/taro/demo2.tsx
+++ b/src/packages/image/demos/taro/demo2.tsx
@@ -13,27 +13,27 @@ const Demo2 = () => {
           <Image
             src={src}
             mode="aspectFit"
-            width={pxTransform(80)}
-            height={pxTransform(80)}
-            radius={pxTransform(40)}
+            width={80}
+            height={80}
+            radius={40}
           />
         </View>
         <View style={{ width: pxTransform(98) }}>
           <Image
             src={src}
             mode="scaleToFill"
-            width={pxTransform(80)}
-            height={pxTransform(80)}
-            radius={pxTransform(40)}
+            width={80}
+            height={80}
+            radius={40}
           />
         </View>
         <View style={{ width: pxTransform(98) }}>
           <Image
             src={src}
             mode="scaleToFill"
-            width={pxTransform(80)}
-            height={pxTransform(80)}
-            radius={pxTransform(10)}
+            width={80}
+            height={80}
+            radius={10}
           />
         </View>
       </View>
diff --git a/src/packages/image/demos/taro/demo3.tsx b/src/packages/image/demos/taro/demo3.tsx
index 35fe299b81..e7a4905f11 100644
--- a/src/packages/image/demos/taro/demo3.tsx
+++ b/src/packages/image/demos/taro/demo3.tsx
@@ -15,13 +15,13 @@ const Demo3 = () => {
     <>
       <View style={{ display: 'flex', flexWrap: 'wrap' }}>
         <View style={{ width: pxTransform(98) }}>
-          <Image width={pxTransform(80)} height={pxTransform(80)} />
+          <Image width={80} height={80} />
           <View style={imageText}>默认</View>
         </View>
         <View style={{ width: pxTransform(98) }}>
           <Image
-            width={pxTransform(80)}
-            height={pxTransform(80)}
+            width={80}
+            height={80}
             loading={<Loading className="nut-icon-loading" />}
           />
           <View style={imageText}>自定义</View>
diff --git a/src/packages/image/demos/taro/demo4.tsx b/src/packages/image/demos/taro/demo4.tsx
index c1181c295b..6542962e93 100644
--- a/src/packages/image/demos/taro/demo4.tsx
+++ b/src/packages/image/demos/taro/demo4.tsx
@@ -15,20 +15,11 @@ const Demo4 = () => {
     <>
       <View style={{ display: 'flex', flexWrap: 'wrap' }}>
         <View style={{ width: pxTransform(98) }}>
-          <Image
-            src="https://x"
-            width={pxTransform(80)}
-            height={pxTransform(80)}
-          />
+          <Image src="https://x" width={80} height={80} />
           <View style={imageText}>默认</View>
         </View>
         <View style={{ width: pxTransform(98) }}>
-          <Image
-            src="https://x"
-            width={pxTransform(80)}
-            height={pxTransform(80)}
-            error={<Failure />}
-          />
+          <Image src="https://x" width={80} height={80} error={<Failure />} />
           <View style={imageText}>自定义</View>
         </View>
       </View>
diff --git a/src/packages/image/demos/taro/demo5.tsx b/src/packages/image/demos/taro/demo5.tsx
index 413df41941..7b805664d0 100644
--- a/src/packages/image/demos/taro/demo5.tsx
+++ b/src/packages/image/demos/taro/demo5.tsx
@@ -8,8 +8,8 @@ const Demo5 = () => {
     <>
       <Image
         src="http://m.360buyimg.com/babel/s181x181_jfs/t1/210178/19/10205/31538/619bbcd9E5071aed5/8e1b7eb632aeed49.png"
-        width={pxTransform(30)}
-        height={pxTransform(30)}
+        width={30}
+        height={30}
       />
       <View
         style={{
diff --git a/src/packages/image/demos/taro/demo6.tsx b/src/packages/image/demos/taro/demo6.tsx
index d4fca0ada1..db91a42086 100644
--- a/src/packages/image/demos/taro/demo6.tsx
+++ b/src/packages/image/demos/taro/demo6.tsx
@@ -26,12 +26,7 @@ const Demo6 = () => {
               }}
               key={mode}
             >
-              <Image
-                src={src}
-                mode={mode as any}
-                width={pxTransform(80)}
-                height={pxTransform(80)}
-              />
+              <Image src={src} mode={mode as any} width={80} height={80} />
             </View>
           )
         })}
diff --git a/src/packages/image/demos/taro/demo7.tsx b/src/packages/image/demos/taro/demo7.tsx
index b1b300903b..407f2c9647 100644
--- a/src/packages/image/demos/taro/demo7.tsx
+++ b/src/packages/image/demos/taro/demo7.tsx
@@ -30,12 +30,7 @@ const Demo7 = () => {
               }}
               key={mode}
             >
-              <Image
-                src={src}
-                mode={mode as any}
-                width={pxTransform(80)}
-                height={pxTransform(80)}
-              />
+              <Image src={src} mode={mode as any} width={80} height={80} />
             </View>
           )
         })}
diff --git a/src/packages/image/image.taro.tsx b/src/packages/image/image.taro.tsx
index f51bc161d2..6434143636 100644
--- a/src/packages/image/image.taro.tsx
+++ b/src/packages/image/image.taro.tsx
@@ -14,6 +14,7 @@ import {
 import { Image as ImageIcon, ImageError } from '@nutui/icons-react-taro'
 import classNames from 'classnames'
 import { BaseEventOrig } from '@tarojs/components/types/common'
+import pxTransform from '@/utils/px-transform'
 
 export interface ImageProps extends Omit<TImageProps, 'style'> {
   style?: CSSProperties
@@ -49,7 +50,7 @@ export const Image: FunctionComponent<Partial<ImageProps>> = (props) => {
   const [isError, setIsError] = useState(false)
 
   const pxCheck = (value: string | number): string => {
-    return Number.isNaN(Number(value)) ? String(value) : `${value}px`
+    return Number.isNaN(Number(value)) ? String(value) : pxTransform(+value)
   }
 
   // 图片加载
@@ -68,21 +69,9 @@ export const Image: FunctionComponent<Partial<ImageProps>> = (props) => {
 
   const containerStyle = {
     // eslint-disable-next-line no-nested-ternary
-    height: height
-      ? Taro.getEnv() === 'RN'
-        ? height
-        : pxCheck(height)
-      : Taro.getEnv() === 'WEB'
-        ? ''
-        : '100%',
+    height: height ? pxCheck(height) : Taro.getEnv() === 'WEB' ? '' : '100%',
     // eslint-disable-next-line no-nested-ternary
-    width: width
-      ? Taro.getEnv() === 'RN'
-        ? width
-        : pxCheck(width)
-      : Taro.getEnv() === 'WEB'
-        ? ''
-        : '100%',
+    width: width ? pxCheck(width) : Taro.getEnv() === 'WEB' ? '' : '100%',
     overflow: radius !== undefined && radius !== null ? 'hidden' : '',
     borderRadius:
       // eslint-disable-next-line no-nested-ternary

From 06e00a370345813ce1fa2f5c45f85d5c85ae1852 Mon Sep 17 00:00:00 2001
From: "Alex.hxy" <1872591453@qq.com>
Date: Mon, 11 Nov 2024 21:42:35 +0800
Subject: [PATCH 3/3] chore: update

---
 src/packages/image/demo.taro.tsx        | 29 ++++++-------------------
 src/packages/image/demos/taro/demo1.tsx |  6 ++---
 src/packages/image/demos/taro/demo2.tsx |  6 ++---
 src/packages/image/demos/taro/demo3.tsx |  6 ++---
 src/packages/image/demos/taro/demo4.tsx |  6 ++---
 src/packages/image/demos/taro/demo5.tsx |  6 ++---
 src/packages/image/demos/taro/demo6.tsx |  6 ++---
 src/packages/image/demos/taro/demo7.tsx |  6 ++---
 8 files changed, 28 insertions(+), 43 deletions(-)

diff --git a/src/packages/image/demo.taro.tsx b/src/packages/image/demo.taro.tsx
index aad1d97e27..2b7573de8e 100644
--- a/src/packages/image/demo.taro.tsx
+++ b/src/packages/image/demo.taro.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
 import { ScrollView, View } from '@tarojs/components'
-import { Cell } from '@nutui/nutui-react-taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
@@ -42,37 +41,23 @@ const ImageDemo = () => {
       <Header />
       <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <View className="h2">{translated.basic}</View>
-        <Cell>
-          <Demo1 />
-        </Cell>
+        <Demo1 />
         <View className="h2">{translated.circle}</View>
-        <Cell>
-          <Demo2 />
-        </Cell>
+        <Demo2 />
         <View className="h2">{translated.loading}</View>
-        <Cell>
-          <Demo3 />
-        </Cell>
+        <Demo3 />
         {!harmony() && (
           <>
             <View className="h2">{translated.error}</View>
-            <Cell>
-              <Demo4 />
-            </Cell>
+            <Demo4 />
           </>
         )}
         <View className="h2">{translated.imageText}</View>
-        <Cell>
-          <Demo5 />
-        </Cell>
+        <Demo5 />
         <View className="h2">{translated.fill}</View>
-        <Cell style={{ flexWrap: 'wrap' }}>
-          <Demo6 />
-        </Cell>
+        <Demo6 />
         <View className="h2">{translated.position}</View>
-        <Cell style={{ flexWrap: 'wrap' }}>
-          <Demo7 />
-        </Cell>
+        <Demo7 />
         {!harmonyAndRn() && (
           <>
             <View className="h2">{translated.lazyload}</View>
diff --git a/src/packages/image/demos/taro/demo1.tsx b/src/packages/image/demos/taro/demo1.tsx
index 6a55fcce12..467b8319f8 100644
--- a/src/packages/image/demos/taro/demo1.tsx
+++ b/src/packages/image/demos/taro/demo1.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
-import { Image } from '@nutui/nutui-react-taro'
+import { Cell, Image } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
   const src =
     'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png'
   return (
-    <>
+    <Cell>
       <Image src={src} height={200} />
-    </>
+    </Cell>
   )
 }
 export default Demo1
diff --git a/src/packages/image/demos/taro/demo2.tsx b/src/packages/image/demos/taro/demo2.tsx
index d164cdae3d..492d6dcb98 100644
--- a/src/packages/image/demos/taro/demo2.tsx
+++ b/src/packages/image/demos/taro/demo2.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Image } from '@nutui/nutui-react-taro'
+import { Cell, Image } from '@nutui/nutui-react-taro'
 import { View } from '@tarojs/components'
 import pxTransform from '@/utils/px-transform'
 
@@ -7,7 +7,7 @@ const Demo2 = () => {
   const src =
     'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png'
   return (
-    <>
+    <Cell>
       <View style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'row' }}>
         <View style={{ width: pxTransform(98) }}>
           <Image
@@ -37,7 +37,7 @@ const Demo2 = () => {
           />
         </View>
       </View>
-    </>
+    </Cell>
   )
 }
 export default Demo2
diff --git a/src/packages/image/demos/taro/demo3.tsx b/src/packages/image/demos/taro/demo3.tsx
index e7a4905f11..f37808f98f 100644
--- a/src/packages/image/demos/taro/demo3.tsx
+++ b/src/packages/image/demos/taro/demo3.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Image } from '@nutui/nutui-react-taro'
+import { Cell, Image } from '@nutui/nutui-react-taro'
 import { Loading } from '@nutui/icons-react-taro'
 import { View } from '@tarojs/components'
 import pxTransform from '@/utils/px-transform'
@@ -12,7 +12,7 @@ const Demo3 = () => {
     color: '#999',
   }
   return (
-    <>
+    <Cell>
       <View style={{ display: 'flex', flexWrap: 'wrap' }}>
         <View style={{ width: pxTransform(98) }}>
           <Image width={80} height={80} />
@@ -27,7 +27,7 @@ const Demo3 = () => {
           <View style={imageText}>自定义</View>
         </View>
       </View>
-    </>
+    </Cell>
   )
 }
 export default Demo3
diff --git a/src/packages/image/demos/taro/demo4.tsx b/src/packages/image/demos/taro/demo4.tsx
index 6542962e93..c58e4fdb0c 100644
--- a/src/packages/image/demos/taro/demo4.tsx
+++ b/src/packages/image/demos/taro/demo4.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Image } from '@nutui/nutui-react-taro'
+import { Cell, Image } from '@nutui/nutui-react-taro'
 import { Failure } from '@nutui/icons-react-taro'
 import { View } from '@tarojs/components'
 import pxTransform from '@/utils/px-transform'
@@ -12,7 +12,7 @@ const Demo4 = () => {
     color: '#999',
   }
   return (
-    <>
+    <Cell>
       <View style={{ display: 'flex', flexWrap: 'wrap' }}>
         <View style={{ width: pxTransform(98) }}>
           <Image src="https://x" width={80} height={80} />
@@ -23,7 +23,7 @@ const Demo4 = () => {
           <View style={imageText}>自定义</View>
         </View>
       </View>
-    </>
+    </Cell>
   )
 }
 export default Demo4
diff --git a/src/packages/image/demos/taro/demo5.tsx b/src/packages/image/demos/taro/demo5.tsx
index 7b805664d0..25160d49eb 100644
--- a/src/packages/image/demos/taro/demo5.tsx
+++ b/src/packages/image/demos/taro/demo5.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Image } from '@nutui/nutui-react-taro'
+import { Cell, Image } from '@nutui/nutui-react-taro'
 import { View } from '@tarojs/components'
 import pxTransform from '@/utils/px-transform'
 
 const Demo5 = () => {
   return (
-    <>
+    <Cell>
       <Image
         src="http://m.360buyimg.com/babel/s181x181_jfs/t1/210178/19/10205/31538/619bbcd9E5071aed5/8e1b7eb632aeed49.png"
         width={30}
@@ -19,7 +19,7 @@ const Demo5 = () => {
       >
         雪纺衫女2021年春季新款洋气轻熟上衣
       </View>
-    </>
+    </Cell>
   )
 }
 export default Demo5
diff --git a/src/packages/image/demos/taro/demo6.tsx b/src/packages/image/demos/taro/demo6.tsx
index db91a42086..dc0b68122a 100644
--- a/src/packages/image/demos/taro/demo6.tsx
+++ b/src/packages/image/demos/taro/demo6.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Image } from '@nutui/nutui-react-taro'
+import { Cell, Image } from '@nutui/nutui-react-taro'
 import { View } from '@tarojs/components'
 import pxTransform from '@/utils/px-transform'
 
@@ -15,7 +15,7 @@ const Demo6 = () => {
   ]
 
   return (
-    <>
+    <Cell style={{ flexWrap: 'wrap' }}>
       <View style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'row' }}>
         {modes.map((mode) => {
           return (
@@ -31,7 +31,7 @@ const Demo6 = () => {
           )
         })}
       </View>
-    </>
+    </Cell>
   )
 }
 export default Demo6
diff --git a/src/packages/image/demos/taro/demo7.tsx b/src/packages/image/demos/taro/demo7.tsx
index 407f2c9647..43009694e3 100644
--- a/src/packages/image/demos/taro/demo7.tsx
+++ b/src/packages/image/demos/taro/demo7.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Image } from '@nutui/nutui-react-taro'
+import { Cell, Image } from '@nutui/nutui-react-taro'
 import { View } from '@tarojs/components'
 import pxTransform from '@/utils/px-transform'
 
@@ -19,7 +19,7 @@ const Demo7 = () => {
   ]
 
   return (
-    <>
+    <Cell style={{ flexWrap: 'wrap' }}>
       <View style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'row' }}>
         {modes.map((mode) => {
           return (
@@ -35,7 +35,7 @@ const Demo7 = () => {
           )
         })}
       </View>
-    </>
+    </Cell>
   )
 }
 export default Demo7