From e964c30e405fd4cedfc163285eae70a178562915 Mon Sep 17 00:00:00 2001
From: xiaoyatong <hanyuxingint@sina.cn>
Date: Fri, 31 May 2024 16:58:38 +0800
Subject: [PATCH 1/8] feat: skeleton rn

---
 .../scripts/taro/adapted.js                   | 21 ++++++++++++++++++-
 .../src/feedback/pages/skeleton/index.tsx     |  3 ++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/nutui-taro-demo-rn/scripts/taro/adapted.js b/packages/nutui-taro-demo-rn/scripts/taro/adapted.js
index 3ad60dc76a..0756835bf5 100644
--- a/packages/nutui-taro-demo-rn/scripts/taro/adapted.js
+++ b/packages/nutui-taro-demo-rn/scripts/taro/adapted.js
@@ -1 +1,20 @@
-exports = module.exports = ["cell", "cellgroup", "overlay", "button", "switch", "countdown", "empty","price","tag","layout","row","col","space", "grid", "griditem", "divider", ,"resultpage"];
+exports = module.exports = [
+  'cell',
+  'cellgroup',
+  'overlay',
+  'button',
+  'switch',
+  'countdown',
+  'empty',
+  'price',
+  'tag',
+  'layout',
+  'row',
+  'col',
+  'space',
+  'grid',
+  'griditem',
+  'divider',
+  'resultpage',
+  'skeleton',
+]
diff --git a/packages/nutui-taro-demo-rn/src/feedback/pages/skeleton/index.tsx b/packages/nutui-taro-demo-rn/src/feedback/pages/skeleton/index.tsx
index 039e05e8ec..337c2e3124 100644
--- a/packages/nutui-taro-demo-rn/src/feedback/pages/skeleton/index.tsx
+++ b/packages/nutui-taro-demo-rn/src/feedback/pages/skeleton/index.tsx
@@ -1 +1,2 @@
-export default <>button</>;
\ No newline at end of file
+import Demo from '@/packages/skeleton/demo.taro'
+export default Demo

From e1bc256d85ee98b7a3a086efb8ac4289baebc094 Mon Sep 17 00:00:00 2001
From: xiaoyatong <hanyuxingint@sina.cn>
Date: Fri, 31 May 2024 17:16:58 +0800
Subject: [PATCH 2/8] feat: skeleton rn

---
 src/packages/skeleton/demo.taro.tsx        |   2 +-
 src/packages/skeleton/demos/taro/demo5.tsx |   2 +-
 src/packages/skeleton/skeleton.harmony.css | 164 ++++++++++++++++++++-
 src/packages/skeleton/skeleton.scss        |  20 +--
 src/packages/skeleton/skeleton.tsx         |  10 +-
 5 files changed, 176 insertions(+), 22 deletions(-)

diff --git a/src/packages/skeleton/demo.taro.tsx b/src/packages/skeleton/demo.taro.tsx
index ced49f8b07..276b18f737 100644
--- a/src/packages/skeleton/demo.taro.tsx
+++ b/src/packages/skeleton/demo.taro.tsx
@@ -54,7 +54,7 @@ const SkeletonDemo = () => {
         </Cell>
         <View className="h2">{translated['0a001122']}</View>
         <Cell className="ske-cell-single">
-          <Demo4 />
+          {Taro.getEnv() !== 'RN' ? <Demo4 /> : null}
         </Cell>
         <View className="h2">{translated['07d62d5c']}</View>
         <Cell>
diff --git a/src/packages/skeleton/demos/taro/demo5.tsx b/src/packages/skeleton/demos/taro/demo5.tsx
index a4d15b1216..a73b698433 100644
--- a/src/packages/skeleton/demos/taro/demo5.tsx
+++ b/src/packages/skeleton/demos/taro/demo5.tsx
@@ -13,7 +13,7 @@ const Demo5 = () => {
   }
   return (
     <View className="content" style={{ width: '100%' }}>
-      <Switch onChange={(value, event) => changeStatus(value, event)} />
+      <Switch onChange={(value, event: any) => changeStatus(value, event)} />
       <Skeleton title animated avatar rows={3} visible={checked}>
         <View className="nut-skeleton-content">
           <Avatar
diff --git a/src/packages/skeleton/skeleton.harmony.css b/src/packages/skeleton/skeleton.harmony.css
index a00db0f425..517af70228 100644
--- a/src/packages/skeleton/skeleton.harmony.css
+++ b/src/packages/skeleton/skeleton.harmony.css
@@ -1,3 +1,152 @@
+.nut-avatar-group {
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center center;
+  display: inline-block;
+  position: relative;
+  flex: 0 0 auto;
+}
+.nut-avatar-group .nut-avatar {
+  border: 1px solid #fff;
+}
+.nut-avatar-group .nut-avatar:not(:first-of-type) {
+  margin-left: -8px;
+}
+
+[dir=rtl] .nut-avatar-group .nut-avatar:not(:first-of-type),
+.nut-rtl .nut-avatar-group .nut-avatar:not(:first-of-type) {
+  margin-left: 0;
+  margin-right: -8px;
+}
+
+.nut-image {
+  display: block;
+  position: relative;
+}
+.nut-image .nut-img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.nut-image.nut-image-round {
+  border-radius: 50%;
+  overflow: hidden;
+}
+.nut-image .nut-img-loading {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #f5f6fa;
+  background-size: 100% 100%;
+}
+.nut-image .nut-img-error {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #f5f6fa;
+  background-size: 100% 100%;
+}
+
+[dir=rtl] .nut-image .nut-img-loading,
+.nut-rtl .nut-image .nut-img-loading {
+  left: auto;
+  right: 0;
+}
+[dir=rtl] .nut-image .nut-img-error,
+.nut-rtl .nut-image .nut-img-error {
+  left: auto;
+  right: 0;
+}
+
+.nut-avatar {
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center center;
+  display: inline-block;
+  position: relative;
+  flex: 0 0 auto;
+  text-align: center;
+}
+.nut-avatar .avatar-img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  flex-shrink: 0;
+}
+.nut-avatar .icon {
+  background-size: 100% 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.nut-avatar .nut-icon-img {
+  width: 100%;
+  height: 100%;
+}
+.nut-avatar .text {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  overflow: hidden;
+}
+
+[dir=rtl] .nut-avatar .avatar-img,
+.nut-rtl .nut-avatar .avatar-img {
+  left: auto;
+  right: 50%;
+  transform: translate(50%, -50%);
+}
+[dir=rtl] .nut-avatar .icon,
+.nut-rtl .nut-avatar .icon {
+  left: auto;
+  right: 50%;
+  transform: translate(50%, -50%);
+}
+
+.nut-avatar-large {
+  width: 60px;
+  height: 60px;
+  line-height: 60px;
+}
+
+.nut-avatar-small {
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+}
+
+.nut-avatar-normal {
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+}
+
+.nut-avatar-round {
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.nut-avatar-square {
+  border-radius: 5px;
+}
+
 .nut-skeleton {
   display: inline-block;
   position: relative;
@@ -8,14 +157,14 @@
 .nut-skeleton-content {
   display: flex;
 }
-.nut-skeleton-content .nut-avatar {
+.nut-skeleton-content-avatar {
   margin-right: 20px;
-  background: #F7F8FC !important;
+  background: #f5f6fa !important;
 }
-.nut-skeleton-content .nut-skeleton-block {
+.nut-skeleton-content-block {
   width: 100%;
   height: 15px;
-  background: #F7F8FC;
+  background: #f5f6fa;
   margin-top: 10px;
   border-radius: 0;
 }
@@ -24,12 +173,12 @@
   display: flex;
   flex-direction: column;
 }
-.nut-skeleton-content-line .nut-skeleton-title {
+.nut-skeleton-content-line .nut-skeleton-content-title {
   width: 30%;
   height: 15px;
-  background: #F7F8FC;
+  background: #f5f6fa;
 }
-.nut-skeleton-content-line .nut-skeleton-block:last-child {
+.nut-skeleton-content-line .nut-skeleton-content-block:last-child {
   width: 70%;
 }
 .nut-skeleton-animation {
@@ -39,7 +188,6 @@
   width: 100%;
   height: 100%;
   z-index: 1;
-  background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 80%);
   animation: nut-skeleton 2s ease-in-out 0s infinite;
 }
 @keyframes nut-skeleton {
diff --git a/src/packages/skeleton/skeleton.scss b/src/packages/skeleton/skeleton.scss
index 4394b47e28..b473c8b705 100644
--- a/src/packages/skeleton/skeleton.scss
+++ b/src/packages/skeleton/skeleton.scss
@@ -10,12 +10,12 @@
   &-content {
     display: flex;
 
-    .nut-avatar {
+    &-avatar {
       margin-right: 20px;
       background: $skeleton-background !important;
     }
 
-    .nut-skeleton-block {
+    &-block {
       width: $skeleton-line-width;
       height: $skeleton-line-height;
       background: $skeleton-background;
@@ -28,13 +28,13 @@
       display: flex;
       flex-direction: column;
 
-      .nut-skeleton-title {
+      .nut-skeleton-content-title {
         width: 30%;
         height: $skeleton-line-height;
         background: $skeleton-background;
       }
 
-      .nut-skeleton-block:last-child {
+      .nut-skeleton-content-block:last-child {
         width: 70%;
       }
     }
@@ -47,12 +47,12 @@
     width: 100%;
     height: 100%;
     z-index: 1;
-    background: linear-gradient(
-      90deg,
-      hsla(0, 0%, 100%, 0),
-      hsla(0, 0%, 100%, 0.5) 50%,
-      hsla(0, 0%, 100%, 0) 80%
-    );
+    // background: linear-gradient(
+    //   90deg,
+    //   hsla(0, 0%, 100%, 0),
+    //   hsla(0, 0%, 100%, 0.5) 50%,
+    //   hsla(0, 0%, 100%, 0) 80%
+    // );
     animation: nut-skeleton 2s ease-in-out 0s infinite;
   }
 
diff --git a/src/packages/skeleton/skeleton.tsx b/src/packages/skeleton/skeleton.tsx
index 03dc00b257..b76f27fbed 100644
--- a/src/packages/skeleton/skeleton.tsx
+++ b/src/packages/skeleton/skeleton.tsx
@@ -46,6 +46,7 @@ export const Skeleton: FunctionComponent<Partial<SkeletonProps>> = (props) => {
   const classes = classNames(classPrefix, className)
   const avatarClass = classNames({
     [`nut-avatar`]: true,
+    [`nut-skeleton-content-avatar`]: true,
     [`avatar-${avatarShape}`]: avatarShape,
   })
 
@@ -83,12 +84,17 @@ export const Skeleton: FunctionComponent<Partial<SkeletonProps>> = (props) => {
               />
             )}
             {rows === 1 ? (
-              <div className={`${classPrefix}-block`} />
+              <div className={`${classPrefix}-content-block`} />
             ) : (
               <div className={`${classPrefix}-content-line`}>
                 {title && <div className={`${classPrefix}-title`} />}
                 {repeatLines(rows).map((item, index) => {
-                  return <div className={`${classPrefix}-block`} key={index} />
+                  return (
+                    <div
+                      className={`${classPrefix}-content-block`}
+                      key={index}
+                    />
+                  )
                 })}
               </div>
             )}

From 69ca86e3616f4c442155dcac6b384610a2a526a8 Mon Sep 17 00:00:00 2001
From: xiaoyatong <hanyuxingint@sina.cn>
Date: Fri, 31 May 2024 17:19:13 +0800
Subject: [PATCH 3/8] feat: skeleton rn

---
 src/packages/skeleton/skeleton.taro.tsx | 27 ++++++++++++++++---------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/packages/skeleton/skeleton.taro.tsx b/src/packages/skeleton/skeleton.taro.tsx
index fd69c374d5..202572994a 100644
--- a/src/packages/skeleton/skeleton.taro.tsx
+++ b/src/packages/skeleton/skeleton.taro.tsx
@@ -1,4 +1,5 @@
 import React, { FunctionComponent } from 'react'
+import { View } from '@tarojs/components'
 import classNames from 'classnames'
 import Avatar from '@/packages/avatar/index.taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
@@ -46,6 +47,7 @@ export const Skeleton: FunctionComponent<Partial<SkeletonProps>> = (props) => {
   const classes = classNames(classPrefix, className)
   const avatarClass = classNames({
     [`nut-avatar`]: true,
+    [`nut-skeleton-content-avatar`]: true,
     [`avatar-${avatarShape}`]: avatarShape,
   })
 
@@ -71,9 +73,9 @@ export const Skeleton: FunctionComponent<Partial<SkeletonProps>> = (props) => {
       {visible ? (
         <>{children}</>
       ) : (
-        <div className={classes} {...rest}>
-          {animated && <div className={`${classPrefix}-animation`} />}
-          <div className={`${classPrefix}-content`}>
+        <View className={classes} {...rest}>
+          {animated && <View className={`${classPrefix}-animation`} />}
+          <View className={`${classPrefix}-content`}>
             {avatar && (
               <Avatar
                 className={avatarClass}
@@ -84,17 +86,22 @@ export const Skeleton: FunctionComponent<Partial<SkeletonProps>> = (props) => {
               />
             )}
             {rows === 1 ? (
-              <div className={`${classPrefix}-block`} />
+              <View className={`${classPrefix}-content-block`} />
             ) : (
-              <div className={`${classPrefix}-content-line`}>
-                {title && <div className={`${classPrefix}-title`} />}
+              <View className={`${classPrefix}-content-line`}>
+                {title && <View className={`${classPrefix}-content-title`} />}
                 {repeatLines(rows).map((item, index) => {
-                  return <div className={`${classPrefix}-block`} key={index} />
+                  return (
+                    <View
+                      className={`${classPrefix}-content-block`}
+                      key={index}
+                    />
+                  )
                 })}
-              </div>
+              </View>
             )}
-          </div>
-        </div>
+          </View>
+        </View>
       )}
     </>
   )

From 81bca7d5097475e95f0f88afb92654b225e7383e Mon Sep 17 00:00:00 2001
From: xiaoyatong <hanyuxingint@sina.cn>
Date: Fri, 31 May 2024 17:44:54 +0800
Subject: [PATCH 4/8] fix: last child

---
 src/packages/skeleton/skeleton.harmony.css |  7 +++++--
 src/packages/skeleton/skeleton.scss        | 17 ++++++++++-------
 src/packages/skeleton/skeleton.taro.tsx    |  2 +-
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/packages/skeleton/skeleton.harmony.css b/src/packages/skeleton/skeleton.harmony.css
index 517af70228..8623858630 100644
--- a/src/packages/skeleton/skeleton.harmony.css
+++ b/src/packages/skeleton/skeleton.harmony.css
@@ -173,12 +173,15 @@
   display: flex;
   flex-direction: column;
 }
-.nut-skeleton-content-line .nut-skeleton-content-title {
+.nut-skeleton-content-line .nut-skeleton-content-block:last-child {
+  width: 70%;
+}
+.nut-skeleton-content-title {
   width: 30%;
   height: 15px;
   background: #f5f6fa;
 }
-.nut-skeleton-content-line .nut-skeleton-content-block:last-child {
+.nut-skeleton-content-block-last-child {
   width: 70%;
 }
 .nut-skeleton-animation {
diff --git a/src/packages/skeleton/skeleton.scss b/src/packages/skeleton/skeleton.scss
index b473c8b705..bc2261f914 100644
--- a/src/packages/skeleton/skeleton.scss
+++ b/src/packages/skeleton/skeleton.scss
@@ -27,17 +27,20 @@
       width: 100%;
       display: flex;
       flex-direction: column;
-
-      .nut-skeleton-content-title {
-        width: 30%;
-        height: $skeleton-line-height;
-        background: $skeleton-background;
-      }
-
       .nut-skeleton-content-block:last-child {
         width: 70%;
       }
     }
+
+    &-title {
+      width: 30%;
+      height: $skeleton-line-height;
+      background: $skeleton-background;
+    }
+
+    &-block-last-child {
+      width: 70%;
+    }
   }
 
   &-animation {
diff --git a/src/packages/skeleton/skeleton.taro.tsx b/src/packages/skeleton/skeleton.taro.tsx
index 202572994a..e2c6c7f60f 100644
--- a/src/packages/skeleton/skeleton.taro.tsx
+++ b/src/packages/skeleton/skeleton.taro.tsx
@@ -93,7 +93,7 @@ export const Skeleton: FunctionComponent<Partial<SkeletonProps>> = (props) => {
                 {repeatLines(rows).map((item, index) => {
                   return (
                     <View
-                      className={`${classPrefix}-content-block`}
+                      className={`${classPrefix}-content-block ${index === repeatLines(rows).length - 1 ? `${classPrefix}-content-block-last-child` : ''}`}
                       key={index}
                     />
                   )

From 4c752880582624c454b460216e1fc01bd054b1e3 Mon Sep 17 00:00:00 2001
From: xiaoyatong <hanyuxingint@sina.cn>
Date: Mon, 17 Jun 2024 19:33:26 +0800
Subject: [PATCH 5/8] =?UTF-8?q?fix:=20=E6=A0=B7=E5=BC=8F=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=20rn=20=E5=92=8C=E9=B8=BF=E8=92=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/skeleton/demo.taro.tsx        | 13 +++++++++----
 src/packages/skeleton/demos/taro/demo5.tsx |  6 +++++-
 src/packages/skeleton/skeleton.harmony.css |  4 ++--
 src/packages/skeleton/skeleton.scss        | 15 ++++++++-------
 src/packages/skeleton/skeleton.taro.tsx    |  9 +++++----
 5 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/packages/skeleton/demo.taro.tsx b/src/packages/skeleton/demo.taro.tsx
index e0342b0fc6..fde0542001 100644
--- a/src/packages/skeleton/demo.taro.tsx
+++ b/src/packages/skeleton/demo.taro.tsx
@@ -10,6 +10,7 @@ import Demo2 from './demos/taro/demo2'
 import Demo3 from './demos/taro/demo3'
 import Demo4 from './demos/taro/demo4'
 import Demo5 from './demos/taro/demo5'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 const SkeletonDemo = () => {
   const [translated] = useTranslate({
@@ -52,10 +53,14 @@ const SkeletonDemo = () => {
         <Cell>
           <Demo3 />
         </Cell>
-        <View className="h2">{translated['0a001122']}</View>
-        <Cell className="ske-cell-single">
-          {Taro.getEnv() !== 'RN' ? <Demo4 /> : null}
-        </Cell>
+        {harmonyAndRn() ? null : (
+          <>
+            <View className="h2">{translated['0a001122']}</View>
+            <Cell className="ske-cell-single">
+              <Demo4 />
+            </Cell>
+          </>
+        )}
         <View className="h2">{translated['07d62d5c']}</View>
         <Cell>
           <Demo5 />
diff --git a/src/packages/skeleton/demos/taro/demo5.tsx b/src/packages/skeleton/demos/taro/demo5.tsx
index a73b698433..53bee8c28b 100644
--- a/src/packages/skeleton/demos/taro/demo5.tsx
+++ b/src/packages/skeleton/demos/taro/demo5.tsx
@@ -1,6 +1,7 @@
 import { Avatar, Image, Skeleton, Switch } from '@nutui/nutui-react-taro'
 import React, { useState } from 'react'
 import { View, Text } from '@tarojs/components'
+import pxTransform from '@/utils/px-transform'
 
 const Demo5 = () => {
   const [checked, setChecked] = useState(false)
@@ -13,7 +14,10 @@ const Demo5 = () => {
   }
   return (
     <View className="content" style={{ width: '100%' }}>
-      <Switch onChange={(value, event: any) => changeStatus(value, event)} />
+      <Switch
+        onChange={(value, event: any) => changeStatus(value, event)}
+        style={{ marginBottom: pxTransform(8) }}
+      />
       <Skeleton title animated avatar rows={3} visible={checked}>
         <View className="nut-skeleton-content">
           <Avatar
diff --git a/src/packages/skeleton/skeleton.harmony.css b/src/packages/skeleton/skeleton.harmony.css
index 8623858630..29db693092 100644
--- a/src/packages/skeleton/skeleton.harmony.css
+++ b/src/packages/skeleton/skeleton.harmony.css
@@ -156,6 +156,7 @@
 }
 .nut-skeleton-content {
   display: flex;
+  flex-direction: row;
 }
 .nut-skeleton-content-avatar {
   margin-right: 20px;
@@ -182,7 +183,7 @@
   background: #f5f6fa;
 }
 .nut-skeleton-content-block-last-child {
-  width: 70%;
+  width: 55%;
 }
 .nut-skeleton-animation {
   position: absolute;
@@ -211,7 +212,6 @@
 .nut-rtl .nut-skeleton-animation {
   left: auto;
   right: 0;
-  background: linear-gradient(-90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 80%);
   animation: nut-skeleton-rtl 2s ease-in-out 0s infinite;
 }
 @keyframes nut-skeleton-rtl {
diff --git a/src/packages/skeleton/skeleton.scss b/src/packages/skeleton/skeleton.scss
index bc2261f914..a9642faaae 100644
--- a/src/packages/skeleton/skeleton.scss
+++ b/src/packages/skeleton/skeleton.scss
@@ -9,6 +9,7 @@
 
   &-content {
     display: flex;
+    flex-direction: row;
 
     &-avatar {
       margin-right: 20px;
@@ -39,7 +40,7 @@
     }
 
     &-block-last-child {
-      width: 70%;
+      width: 55%;
     }
   }
 
@@ -81,12 +82,12 @@
   &-animation {
     left: auto;
     right: 0;
-    background: linear-gradient(
-      -90deg,
-      hsla(0, 0%, 100%, 0),
-      hsla(0, 0%, 100%, 0.5) 50%,
-      hsla(0, 0%, 100%, 0) 80%
-    );
+    // background: linear-gradient(
+    //   -90deg,
+    //   hsla(0, 0%, 100%, 0),
+    //   hsla(0, 0%, 100%, 0.5) 50%,
+    //   hsla(0, 0%, 100%, 0) 80%
+    // );
     animation: nut-skeleton-rtl 2s ease-in-out 0s infinite;
   }
 
diff --git a/src/packages/skeleton/skeleton.taro.tsx b/src/packages/skeleton/skeleton.taro.tsx
index e2c6c7f60f..7bd6e14e5e 100644
--- a/src/packages/skeleton/skeleton.taro.tsx
+++ b/src/packages/skeleton/skeleton.taro.tsx
@@ -3,6 +3,7 @@ import { View } from '@tarojs/components'
 import classNames from 'classnames'
 import Avatar from '@/packages/avatar/index.taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import pxTransform from '@/utils/px-transform'
 
 type avatarShape = 'round' | 'square'
 
@@ -58,13 +59,13 @@ export const Skeleton: FunctionComponent<Partial<SkeletonProps>> = (props) => {
   const getStyle = () => {
     if (avatarSize) {
       return {
-        width: avatarSize,
-        height: avatarSize,
+        width: pxTransform(parseInt(avatarSize)),
+        height: pxTransform(parseInt(avatarSize)),
       }
     }
     return {
-      width: '50px',
-      height: '50px',
+      width: pxTransform(50),
+      height: pxTransform(50),
     }
   }
 

From 7d9173f64923c4b9859880676a4fca72730ebc8d Mon Sep 17 00:00:00 2001
From: xiaoyatong <hanyuxingint@sina.cn>
Date: Mon, 17 Jun 2024 19:36:46 +0800
Subject: [PATCH 6/8] fix: conflicts

---
 packages/nutui-taro-demo-rn/scripts/taro/adapted.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/nutui-taro-demo-rn/scripts/taro/adapted.js b/packages/nutui-taro-demo-rn/scripts/taro/adapted.js
index dc6268e9f4..a01b4af19f 100644
--- a/packages/nutui-taro-demo-rn/scripts/taro/adapted.js
+++ b/packages/nutui-taro-demo-rn/scripts/taro/adapted.js
@@ -26,5 +26,4 @@ exports = module.exports = [
   'hoverbutton',
   'safearea',
   'hoverbuttonitem',
-  'skeleton',
 ]

From 2009689548f3d58eeacd6a885d110014559d3100 Mon Sep 17 00:00:00 2001
From: xiaoyatong <hanyuxingint@sina.cn>
Date: Mon, 17 Jun 2024 21:08:22 +0800
Subject: [PATCH 7/8] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=BA=AFweb?=
 =?UTF-8?q?=E4=B8=8Bclassname,=E4=BF=AE=E6=94=B9=E5=88=87=E6=8D=A2switch?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/skeleton/demo.scss            | 45 ----------------------
 src/packages/skeleton/demo.taro.tsx        |  6 +--
 src/packages/skeleton/demo.tsx             |  6 +--
 src/packages/skeleton/demos/h5/demo5.tsx   | 14 ++++---
 src/packages/skeleton/demos/taro/demo5.tsx | 15 +++++---
 src/packages/skeleton/skeleton.harmony.css |  6 +++
 src/packages/skeleton/skeleton.scss        | 30 +++++++++------
 src/packages/skeleton/skeleton.tsx         |  2 +-
 8 files changed, 50 insertions(+), 74 deletions(-)

diff --git a/src/packages/skeleton/demo.scss b/src/packages/skeleton/demo.scss
index 70382ff79b..e69de29bb2 100644
--- a/src/packages/skeleton/demo.scss
+++ b/src/packages/skeleton/demo.scss
@@ -1,45 +0,0 @@
-.content {
-  .nut-switch {
-    display: flex;
-    margin: 0 16px 8px 0;
-  }
-
-  .nut-skeleton-content {
-    display: flex;
-
-    .right-content {
-      font-family: PingFangSC;
-      display: flex;
-      flex-direction: column;
-
-      .title {
-        font-size: 14px;
-        color: rgba(51, 51, 51, 1);
-      }
-
-      .description {
-        margin-top: 10px;
-        font-size: 13px;
-        color: rgba(154, 155, 157, 1);
-      }
-    }
-  }
-}
-
-.pic-compose {
-  display: flex;
-  justify-content: space-between;
-
-  .item {
-    width: 47%;
-  }
-}
-
-.ske-cell-single {
-  display: block;
-  padding-top: 3px;
-}
-
-.ske-cell-double {
-  display: block;
-}
diff --git a/src/packages/skeleton/demo.taro.tsx b/src/packages/skeleton/demo.taro.tsx
index fde0542001..40e31b5ba3 100644
--- a/src/packages/skeleton/demo.taro.tsx
+++ b/src/packages/skeleton/demo.taro.tsx
@@ -42,11 +42,11 @@ const SkeletonDemo = () => {
       <Header />
       <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <View className="h2">{translated['84aa6bce']}</View>
-        <Cell className="ske-cell-single">
+        <Cell style={{ display: 'block', paddingTop: '3px' }}>
           <Demo1 />
         </Cell>
         <View className="h2">{translated.ea3bc18a}</View>
-        <Cell className="ske-cell-double">
+        <Cell style={{ display: 'block' }}>
           <Demo2 />
         </Cell>
         <View className="h2">{translated['02a53df5']}</View>
@@ -56,7 +56,7 @@ const SkeletonDemo = () => {
         {harmonyAndRn() ? null : (
           <>
             <View className="h2">{translated['0a001122']}</View>
-            <Cell className="ske-cell-single">
+            <Cell style={{ display: 'block' }}>
               <Demo4 />
             </Cell>
           </>
diff --git a/src/packages/skeleton/demo.tsx b/src/packages/skeleton/demo.tsx
index 809c259561..53a5016b30 100644
--- a/src/packages/skeleton/demo.tsx
+++ b/src/packages/skeleton/demo.tsx
@@ -37,11 +37,11 @@ const SkeletonDemo = () => {
     <>
       <div className="demo">
         <h2>{translated['84aa6bce']}</h2>
-        <Cell className="ske-cell-single">
+        <Cell style={{ display: 'block' }}>
           <Demo1 />
         </Cell>
         <h2>{translated.ea3bc18a}</h2>
-        <Cell className="ske-cell-double">
+        <Cell style={{ display: 'block', paddingTop: '3px' }}>
           <Demo2 />
         </Cell>
         <h2>{translated['02a53df5']}</h2>
@@ -49,7 +49,7 @@ const SkeletonDemo = () => {
           <Demo3 />
         </Cell>
         <h2>{translated['0a001122']}</h2>
-        <Cell className="ske-cell-single">
+        <Cell style={{ display: 'block' }}>
           <Demo4 />
         </Cell>
         <h2>{translated['07d62d5c']}</h2>
diff --git a/src/packages/skeleton/demos/h5/demo5.tsx b/src/packages/skeleton/demos/h5/demo5.tsx
index ffa1bf87f0..d007ed1bfd 100644
--- a/src/packages/skeleton/demos/h5/demo5.tsx
+++ b/src/packages/skeleton/demos/h5/demo5.tsx
@@ -11,11 +11,15 @@ const Demo5 = () => {
     setChecked(value)
   }
   return (
-    <div className="content" style={{ width: '100%' }}>
-      <Switch onChange={(value, event) => changeStatus(value, event)} />
+    <div style={{ width: '100%' }}>
+      <Switch
+        onChange={(value, event) => changeStatus(value, event)}
+        style={{ display: 'flex', marginBottom: '8px' }}
+      />
       <Skeleton title animated avatar rows={3} visible={checked}>
         <div className="nut-skeleton-content">
           <Avatar
+            className="nut-skeleton-content-avatar"
             size="50"
             icon={
               <Image
@@ -24,9 +28,9 @@ const Demo5 = () => {
               />
             }
           />
-          <div className="right-content">
-            <span className="title">NutUI-React</span>
-            <div className="description">
+          <div>
+            <span>NutUI-React</span>
+            <div>
               一套京东风格的轻量级移动端React组件库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。
             </div>
           </div>
diff --git a/src/packages/skeleton/demos/taro/demo5.tsx b/src/packages/skeleton/demos/taro/demo5.tsx
index 53bee8c28b..85be784261 100644
--- a/src/packages/skeleton/demos/taro/demo5.tsx
+++ b/src/packages/skeleton/demos/taro/demo5.tsx
@@ -13,14 +13,19 @@ const Demo5 = () => {
     setChecked(value)
   }
   return (
-    <View className="content" style={{ width: '100%' }}>
+    <View style={{ width: '100%' }}>
       <Switch
         onChange={(value, event: any) => changeStatus(value, event)}
-        style={{ marginBottom: pxTransform(8) }}
+        style={{ display: 'flex', marginBottom: pxTransform(8) }}
       />
       <Skeleton title animated avatar rows={3} visible={checked}>
-        <View className="nut-skeleton-content">
+        <View
+          className="nut-skeleton-content"
+          style={{ display: 'flex', flexDirection: 'row' }}
+        >
           <Avatar
+            className="nut-skeleton-content-avatar"
+            style={{ marginRight: '20px' }}
             size="50"
             icon={
               <Image
@@ -29,8 +34,8 @@ const Demo5 = () => {
               />
             }
           />
-          <View className="right-content">
-            <Text className="title">NutUI-React</Text>
+          <View className="nut-skeleton-content-line">
+            <Text className="nut-skeleton-content-title">NutUI-React</Text>
             <View className="description">
               一套京东风格的轻量级移动端React组件库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。
             </View>
diff --git a/src/packages/skeleton/skeleton.harmony.css b/src/packages/skeleton/skeleton.harmony.css
index 29db693092..34bf352a46 100644
--- a/src/packages/skeleton/skeleton.harmony.css
+++ b/src/packages/skeleton/skeleton.harmony.css
@@ -192,6 +192,9 @@
   width: 100%;
   height: 100%;
   z-index: 1;
+  /* #ifndef rn */
+  background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 80%);
+  /* #endif */
   animation: nut-skeleton 2s ease-in-out 0s infinite;
 }
 @keyframes nut-skeleton {
@@ -212,6 +215,9 @@
 .nut-rtl .nut-skeleton-animation {
   left: auto;
   right: 0;
+  /* #ifndef rn */
+  background: linear-gradient(-90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 80%);
+  /* #endif */
   animation: nut-skeleton-rtl 2s ease-in-out 0s infinite;
 }
 @keyframes nut-skeleton-rtl {
diff --git a/src/packages/skeleton/skeleton.scss b/src/packages/skeleton/skeleton.scss
index a9642faaae..74730e6aca 100644
--- a/src/packages/skeleton/skeleton.scss
+++ b/src/packages/skeleton/skeleton.scss
@@ -51,12 +51,15 @@
     width: 100%;
     height: 100%;
     z-index: 1;
-    // background: linear-gradient(
-    //   90deg,
-    //   hsla(0, 0%, 100%, 0),
-    //   hsla(0, 0%, 100%, 0.5) 50%,
-    //   hsla(0, 0%, 100%, 0) 80%
-    // );
+
+    /* #ifndef rn */
+    background: linear-gradient(
+      90deg,
+      hsla(0, 0%, 100%, 0),
+      hsla(0, 0%, 100%, 0.5) 50%,
+      hsla(0, 0%, 100%, 0) 80%
+    );
+    /* #endif */
     animation: nut-skeleton 2s ease-in-out 0s infinite;
   }
 
@@ -82,12 +85,15 @@
   &-animation {
     left: auto;
     right: 0;
-    // background: linear-gradient(
-    //   -90deg,
-    //   hsla(0, 0%, 100%, 0),
-    //   hsla(0, 0%, 100%, 0.5) 50%,
-    //   hsla(0, 0%, 100%, 0) 80%
-    // );
+
+    /* #ifndef rn */
+    background: linear-gradient(
+      -90deg,
+      hsla(0, 0%, 100%, 0),
+      hsla(0, 0%, 100%, 0.5) 50%,
+      hsla(0, 0%, 100%, 0) 80%
+    );
+    /* #endif */
     animation: nut-skeleton-rtl 2s ease-in-out 0s infinite;
   }
 
diff --git a/src/packages/skeleton/skeleton.tsx b/src/packages/skeleton/skeleton.tsx
index b76f27fbed..09cf9c6abb 100644
--- a/src/packages/skeleton/skeleton.tsx
+++ b/src/packages/skeleton/skeleton.tsx
@@ -87,7 +87,7 @@ export const Skeleton: FunctionComponent<Partial<SkeletonProps>> = (props) => {
               <div className={`${classPrefix}-content-block`} />
             ) : (
               <div className={`${classPrefix}-content-line`}>
-                {title && <div className={`${classPrefix}-title`} />}
+                {title && <div className={`${classPrefix}-content-title`} />}
                 {repeatLines(rows).map((item, index) => {
                   return (
                     <div

From d4d30cc59894bf33296386e05eec2a8a6b314f18 Mon Sep 17 00:00:00 2001
From: xiaoyatong <hanyuxingint@sina.cn>
Date: Mon, 17 Jun 2024 21:25:39 +0800
Subject: [PATCH 8/8] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E7=89=88=E6=9C=AC?=
 =?UTF-8?q?=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/config.json b/src/config.json
index 39f79d5019..e778d01cee 100644
--- a/src/config.json
+++ b/src/config.json
@@ -850,7 +850,7 @@
           "author": "oasis"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "Skeleton",
           "type": "component",
           "cName": "骨架屏",