fix(avatar): 恢复icon，适配鸿蒙 (#2719)

jdf2e · Nov 11, 2024 · f085b67 · f085b67
1 parent 9f827e2
commit f085b67
Show file tree

Hide file tree

Showing 11 changed files with 77 additions and 251 deletions.
diff --git a/src/packages/avatar/avatar.harmony.css b/src/packages/avatar/avatar.harmony.css
@@ -73,6 +73,11 @@
 .nut-avatar {
   position: relative;
   flex: 0 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
 }
 .nut-avatar-round {
   border-radius: 999px;
@@ -96,75 +101,32 @@
 .nut-avatar-icon {
   background-size: 100% 100%;
 }
-.nut-avatar .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
 .nut-avatar-text {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 100%;
-  height: 100%;
 }
 .nut-avatar-large {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   width: 60px;
   height: 60px;
 }
 .nut-avatar-large-img {
   width: 60px;
   height: 60px;
 }
-.nut-avatar-large-img-image {
-  width: 60px;
-  height: 60px;
-}
 .nut-avatar-large-icon {
   width: 60px;
   height: 60px;
 }
-.nut-avatar-large .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
 .nut-avatar-large-text {
   width: 60px;
   height: 60px;
 }
 .nut-avatar-small {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 32px;
-  height: 32px;
-}
-.nut-avatar-small-img-image {
   width: 32px;
   height: 32px;
 }
 .nut-avatar-small-text {
   width: 32px;
   height: 32px;
-}
-.nut-avatar-normal {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 40px;
-  height: 40px;
-}
-.nut-avatar-normal-img-image {
-  width: 40px;
-  height: 40px;
-}
-.nut-avatar-normal .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
-.nut-avatar-normal-text {
-  width: 40px;
-  height: 40px;
 }
diff --git a/src/packages/avatar/avatar.scss b/src/packages/avatar/avatar.scss
@@ -4,6 +4,13 @@
 .nut-avatar {
   position: relative;
   flex: 0 0 auto; // 防止被压缩
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: $avatar-normal-width;
+  height: $avatar-normal-height;
+
   &-round {
     border-radius: 999px;
     overflow: hidden;
@@ -31,97 +38,37 @@
     background-size: 100% 100%;
   }
 
-  .nut-icon-img {
-    width: 100%;
-    height: 100%;
-  }
-
   &-text {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 100%;
-    height: 100%;
   }
 
   &-large {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     width: $avatar-large-width;
     height: $avatar-large-height;
-
     &-img {
       width: $avatar-large-width;
       height: $avatar-large-height;
-      &-image {
-        width: $avatar-large-width;
-        height: $avatar-large-height;
-      }
     }
-
     &-icon {
       width: $avatar-large-width;
       height: $avatar-large-height;
     }
-
-    .nut-icon-img {
-      width: 100%;
-      height: 100%;
-    }
-
     &-text {
       width: $avatar-large-width;
       height: $avatar-large-height;
     }
   }
 
   &-small {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     width: $avatar-small-width;
     height: $avatar-small-height;
-
-    &-img-image {
-      width: $avatar-small-width;
-      height: $avatar-small-height;
-    }
-    &-icon {
-      // width: $avatar-small-width;
-      // height: $avatar-small-height;
-    }
     &-text {
       width: $avatar-small-width;
       height: $avatar-small-height;
     }
   }
-
-  &-normal {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: $avatar-normal-width;
-    height: $avatar-normal-height;
-
-    &-img-image {
-      width: $avatar-normal-width;
-      height: $avatar-normal-height;
-    }
-
-    &-icon {
-    }
-
-    .nut-icon-img {
-      width: 100%;
-      height: 100%;
-    }
-
-    &-text {
-      width: $avatar-normal-width;
-      height: $avatar-normal-height;
-    }
-  }
 }
 
 // [dir='rtl'] .nut-avatar,

diff --git a/src/packages/avatar/avatar.taro.tsx b/src/packages/avatar/avatar.taro.tsx
@@ -136,7 +136,6 @@ export const Avatar: FunctionComponent<
       {(showMax || !groupMax || avatarIndex <= groupMax) && (
         <View
           className={cls}
-          // {...rest}
           style={!showMax ? styles : maxStyles}
           onClick={clickAvatar}
           ref={avatarRef}
@@ -147,35 +146,38 @@ export const Avatar: FunctionComponent<
                 <Image
                   className={`nut-avatar-img nut-avatar-${groupSize || size || 'normal'}-img`}
                   src={src}
-                  style={{ objectFit: fit, ...styles }}
+                  style={{ objectFit: fit }}
                   onError={errorEvent}
                 />
               )}
-              {React.isValidElement(icon)
-                ? React.cloneElement<any>(icon, {
+              {React.isValidElement(icon) ? (
+                <View className="nut-avatar-text">
+                  {React.cloneElement<any>(icon, {
                     ...icon.props,
                     className: `${icon.props.className || ''} nut-avatar-icon nut-avatar-${groupSize || size || 'normal'}-icon`,
-                    style: { position: 'absolute' },
-                  })
-                : null}
+                  })}
+                </View>
+              ) : null}
               {children && (
                 <View
                   className={`nut-avatar-text nut-avatar-${groupSize || size || 'normal'}-text`}
                 >
                   {children}
                 </View>
               )}
-              {!src && !icon && !children && !harmonyAndRn() && (
-                <User
-                  className={`nut-avatar-icon nut-avatar-${groupSize || size || 'normal'}-icon`}
-                  style={{ position: 'absolute' }}
-                />
+              {!src && !icon && !children && (
+                <View className="nut-avatar-text">
+                  <User
+                    className={`nut-avatar-icon nut-avatar-${groupSize || size || 'normal'}-icon`}
+                  />
+                </View>
               )}
             </>
           )}
           {showMax && (
             <View
               className={`nut-avatar-text nut-avatar-${groupSize || 'normal'}-text`}
+              style={{ ...maxStyles }}
             >
               {propAvatarGroup?.maxContent
                 ? propAvatarGroup?.maxContent

diff --git a/src/packages/avatar/demo.taro.tsx b/src/packages/avatar/demo.taro.tsx
@@ -13,7 +13,6 @@ import Demo6 from './demos/taro/demo6'
 import Demo7 from './demos/taro/demo7'
 import Demo8 from './demos/taro/demo8'
 import Demo9 from './demos/taro/demo9'
-import { harmonyAndRn } from '@/utils/platform-taro'
 
 const AvatarDemo = () => {
   const [translated] = useTranslate({
@@ -65,14 +64,10 @@ const AvatarDemo = () => {
         <Demo2 />
         <View className="h2">{translated['049b6a97']}</View>
         <Demo3 />
-        {harmonyAndRn() ? null : (
-          <>
-            <View className="h2">{translated.a304dabf}</View>
-            <Demo4 />
-            <View className="h2">{translated['89bca4e7']}</View>
-            <Demo5 />
-          </>
-        )}
+        <View className="h2">{translated.a304dabf}</View>
+        <Demo4 />
+        <View className="h2">{translated['89bca4e7']}</View>
+        <Demo5 />
         <View className="h2">{translated.e981579e}</View>
         <Demo6 />
         <View className="h2">{translated.f645fc65}</View>

diff --git a/src/packages/avatar/demos/taro/demo2.tsx b/src/packages/avatar/demos/taro/demo2.tsx
@@ -1,22 +1,12 @@
 import React from 'react'
 import { Avatar, Cell } from '@nutui/nutui-react-taro'
 import { User } from '@nutui/icons-react-taro'
-import { harmonyAndRn } from '@/utils/platform-taro'
 
 const Demo2 = () => {
   return (
     <Cell className="cell-avatar">
-      {harmonyAndRn() ? (
-        <>
-          <Avatar shape="square">N</Avatar>
-          <Avatar shape="round">N</Avatar>
-        </>
-      ) : (
-        <>
-          <Avatar icon={<User />} shape="square" />
-          <Avatar icon={<User />} shape="round" />
-        </>
-      )}
+      <Avatar icon={<User />} shape="square" />
+      <Avatar icon={<User />} shape="round" />
     </Cell>
   )
 }

diff --git a/src/packages/avatar/demos/taro/demo3.tsx b/src/packages/avatar/demos/taro/demo3.tsx
@@ -1,24 +1,13 @@
 import React from 'react'
 import { Avatar, Cell } from '@nutui/nutui-react-taro'
 import { User } from '@nutui/icons-react-taro'
-import { harmonyAndRn } from '@/utils/platform-taro'
 
 const Demo3 = () => {
   return (
     <Cell className="cell-avatar">
-      {harmonyAndRn() ? (
-        <>
-          <Avatar src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png" />
-          <Avatar>N</Avatar>
-          <Avatar>N</Avatar>
-        </>
-      ) : (
-        <>
-          <Avatar src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png" />
-          <Avatar icon={<User />} />
-          <Avatar>N</Avatar>
-        </>
-      )}
+      <Avatar src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png" />
+      <Avatar icon={<User />} />
+      <Avatar>N</Avatar>
     </Cell>
   )
 }

diff --git a/src/packages/avatar/demos/taro/demo4.tsx b/src/packages/avatar/demos/taro/demo4.tsx
@@ -1,17 +1,19 @@
 import React from 'react'
 import { Avatar, Cell } from '@nutui/nutui-react-taro'
+import { User } from '@nutui/icons-react-taro'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 const Demo4 = () => {
   return (
     <Cell className="cell-avatar">
       <Avatar
-        color="#fff"
-        background="var(--nutui-color-primary)"
-        // icon={<User />}
+        color="#ffffff"
+        background={`${harmonyAndRn() ? '#ff0f23' : 'var(--nutui-color-primary)'}`}
+        icon={<User />}
       />
       <Avatar
-        color="var(--nutui-color-primary)"
-        background="var(--nutui-color-primary-light-pressed)"
+        color={`${harmonyAndRn() ? '#ff0f23' : 'var(--nutui-color-primary)'}`}
+        background={`${harmonyAndRn() ? '#ffebf1' : 'var(--nutui-color-primary-light-pressed)'}`}
       >
         U
       </Avatar>