From b358053c97881a268c9306e231ffe978cc602aea Mon Sep 17 00:00:00 2001
From: Pilotager <yin.bighang@gmail.com>
Date: Sun, 13 Oct 2024 15:57:17 +0800
Subject: [PATCH] =?UTF-8?q?fix(Uploader):=20=E4=BF=AE=E5=A4=8D=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E5=8A=A0=E8=BD=BD=E4=B8=AD=E6=88=96=E8=80=85=E6=9C=AA?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E5=87=BA=E6=9D=A5=E6=A0=B7=E5=BC=8F=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/core/src/image/image.tsx             | 23 +++++++++++++++----
 packages/core/src/uploader/uploader-image.tsx |  1 +
 packages/core/src/uploader/uploader.scss      | 14 +++++++----
 3 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/packages/core/src/image/image.tsx b/packages/core/src/image/image.tsx
index 4de13c24c..a277d54ed 100644
--- a/packages/core/src/image/image.tsx
+++ b/packages/core/src/image/image.tsx
@@ -43,6 +43,7 @@ function useImageShape(shape?: ImageShape, round?: boolean) {
 }
 
 export interface ImageProps extends ViewProps {
+  wrapperClassName?: string
   src?: string
   alt?: string
   width?: string | number
@@ -63,6 +64,7 @@ export interface ImageProps extends ViewProps {
 export default function Image(props: ImageProps) {
   const {
     className,
+    wrapperClassName,
     src,
     alt,
     width: widthProp,
@@ -86,12 +88,23 @@ export default function Image(props: ImageProps) {
   const isLoadedRef = useRef(false)
 
   const [viewStyle, imgStyle] = useMemo(() => {
-    const width = widthProp ? typeof widthProp === "number" ? pxTransform(widthProp) : widthProp : undefined
-    const height = heightProp ? typeof heightProp === "number" ? pxTransform(heightProp) : heightProp : undefined
+    const width = widthProp
+      ? typeof widthProp === "number"
+        ? pxTransform(widthProp)
+        : widthProp
+      : undefined
+    const height = heightProp
+      ? typeof heightProp === "number"
+        ? pxTransform(heightProp)
+        : heightProp
+      : undefined
     const imgStyle = mergeStyle(styleProp, {})
     imgStyle.width = width || imgStyle.width
     imgStyle.height = height || imgStyle.height
-    return [{ width: imgStyle.width || "100%", height: imgStyle.height || "100%", position: "relative" }, imgStyle] as const
+    return [
+      { width: imgStyle.width || "100%", height: imgStyle.height || "100%", position: "relative" },
+      imgStyle,
+    ] as const
   }, [styleProp, widthProp, heightProp])
 
   const handleLoad = useMemoizedFn(() => {
@@ -115,10 +128,10 @@ export default function Image(props: ImageProps) {
     } else {
       setLoading(true)
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [src])
   return (
-    <View style={viewStyle}>
+    <View style={viewStyle} className={wrapperClassName}>
       {!failed && src && (
         <TaroImage
           ref={taroImageRef}
diff --git a/packages/core/src/uploader/uploader-image.tsx b/packages/core/src/uploader/uploader-image.tsx
index 6cf0fd744..bd22d06cf 100644
--- a/packages/core/src/uploader/uploader-image.tsx
+++ b/packages/core/src/uploader/uploader-image.tsx
@@ -45,6 +45,7 @@ function UploaderImage(props: UploaderImageProps) {
     if (isImageFile({ type, url })) {
       return (
         <Image
+          wrapperClassName={prefixClassname("uploader__preview-image-wrapper")}
           className={prefixClassname("uploader__preview-image")}
           src={url}
           mode={mode}
diff --git a/packages/core/src/uploader/uploader.scss b/packages/core/src/uploader/uploader.scss
index 62e767963..4b6a50408 100644
--- a/packages/core/src/uploader/uploader.scss
+++ b/packages/core/src/uploader/uploader.scss
@@ -39,7 +39,7 @@
       background: $uploader-upload-background-color;
     }
 
-    &-icon {
+    .#{$component-prefix}uploader__upload-icon {
       font-size: $uploader-upload-icon-font-size;
       color: $uploader-upload-icon-color;
     }
@@ -58,8 +58,14 @@
 
     &-image {
       display: block;
-      width: $uploader-preview-image-width;
-      height: $uploader-preview-image-height;
+      width: 100%;
+      height: 100%;
+    }
+
+    &-image-wrapper {
+      display: block;
+      width: $uploader-preview-image-width !important;
+      height: $uploader-preview-image-height !important;
       overflow: hidden;
     }
 
@@ -72,7 +78,7 @@
       background: $uploader-remove-background-color;
       border-radius: $uploader-remove-border-radius;
 
-      &-icon {
+      .#{$component-prefix}uploader__preview-remove-icon {
         position: absolute;
         top: -2px * $hd;
         right: -2px * $hd;