From 3122841900f05016fd716b425d021ca619255ecd Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Thu, 13 Mar 2025 18:54:37 +0800
Subject: [PATCH 01/18] =?UTF-8?q?feat:=20=E6=9A=82=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config.json                            |  2 +-
 src/packages/skeleton/demo.scss            |  0
 src/packages/skeleton/demo.taro.tsx        |  1 -
 src/packages/skeleton/demo.tsx             | 19 +++--
 src/packages/skeleton/demos/h5/demo1.tsx   |  4 +-
 src/packages/skeleton/demos/h5/demo2.tsx   |  4 +-
 src/packages/skeleton/demos/h5/demo3.tsx   |  7 +-
 src/packages/skeleton/demos/h5/demo4.tsx   | 20 +++--
 src/packages/skeleton/demos/taro/demo1.tsx |  4 +-
 src/packages/skeleton/demos/taro/demo2.tsx |  4 +-
 src/packages/skeleton/demos/taro/demo3.tsx |  7 +-
 src/packages/skeleton/demos/taro/demo4.tsx | 21 ++++--
 src/packages/skeleton/skeleton.scss        | 80 ++++++++------------
 src/packages/skeleton/skeleton.taro.tsx    | 88 +++++++---------------
 src/packages/skeleton/skeleton.tsx         | 78 ++++++-------------
 src/types/spec/skeleton/base.ts            | 18 +++--
 16 files changed, 153 insertions(+), 204 deletions(-)
 delete mode 100644 src/packages/skeleton/demo.scss

diff --git a/src/config.json b/src/config.json
index 7b054c0244..ac042b519e 100644
--- a/src/config.json
+++ b/src/config.json
@@ -1013,7 +1013,7 @@
           "sort": 15,
           "show": true,
           "taro": true,
-          "v15": 2,
+          "v15": 1,
           "author": "swag~jun",
           "dd": true
         },
diff --git a/src/packages/skeleton/demo.scss b/src/packages/skeleton/demo.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/packages/skeleton/demo.taro.tsx b/src/packages/skeleton/demo.taro.tsx
index 9f33d74b64..b54e3b63cb 100644
--- a/src/packages/skeleton/demo.taro.tsx
+++ b/src/packages/skeleton/demo.taro.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
 import { ScrollView, View } from '@tarojs/components'
-import './demo.scss'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
diff --git a/src/packages/skeleton/demo.tsx b/src/packages/skeleton/demo.tsx
index 5e2cc79e2f..37c83ab323 100644
--- a/src/packages/skeleton/demo.tsx
+++ b/src/packages/skeleton/demo.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { useTranslate } from '@/sites/assets/locale'
-import './demo.scss'
 import Demo1 from './demos/h5/demo1'
 import Demo2 from './demos/h5/demo2'
 import Demo3 from './demos/h5/demo3'
@@ -10,23 +9,23 @@ import Demo5 from './demos/h5/demo5'
 const SkeletonDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
-      '84aa6bce': '基础用法',
-      ea3bc18a: '传入多行',
-      '02a53df5': '显示头像',
+      '84aa6bce': '标题',
+      ea3bc18a: '正文',
+      '02a53df5': '模拟头像',
       '0a001122': '标题段落圆角风格',
       '07d62d5c': '显示子组件',
     },
     'zh-TW': {
-      '84aa6bce': '基礎用法',
-      ea3bc18a: '傳入多行',
-      '02a53df5': '顯示頭像',
+      '84aa6bce': '标题',
+      ea3bc18a: '正文',
+      '02a53df5': '模拟头像',
       '0a001122': '標題段落圓角風格',
       '07d62d5c': '圖片組合',
     },
     'en-US': {
-      '84aa6bce': 'Basic usage',
-      ea3bc18a: 'Pass in multiple lines',
-      '02a53df5': 'show avatar',
+      '84aa6bce': 'Title',
+      ea3bc18a: 'Paragraph',
+      '02a53df5': 'Mock Avatar',
       '0a001122': 'Heading Paragraph Rounded Corner Style',
       '07d62d5c': 'show subcomponents',
     },
diff --git a/src/packages/skeleton/demos/h5/demo1.tsx b/src/packages/skeleton/demos/h5/demo1.tsx
index 568f0cb55b..eea0438cb8 100644
--- a/src/packages/skeleton/demos/h5/demo1.tsx
+++ b/src/packages/skeleton/demos/h5/demo1.tsx
@@ -3,8 +3,8 @@ import { Cell, Skeleton } from '@nutui/nutui-react'
 
 const Demo1 = () => {
   return (
-    <Cell style={{ display: 'block' }}>
-      <Skeleton animated />
+    <Cell>
+      <Skeleton animated size="large" style={{ width: '100%' }} />
     </Cell>
   )
 }
diff --git a/src/packages/skeleton/demos/h5/demo2.tsx b/src/packages/skeleton/demos/h5/demo2.tsx
index ba33053f22..d2cb89c358 100644
--- a/src/packages/skeleton/demos/h5/demo2.tsx
+++ b/src/packages/skeleton/demos/h5/demo2.tsx
@@ -3,8 +3,8 @@ import { Cell, Skeleton } from '@nutui/nutui-react'
 
 const Demo2 = () => {
   return (
-    <Cell style={{ display: 'block', paddingTop: '3px' }}>
-      <Skeleton rows={3} title animated />
+    <Cell>
+      <Skeleton rows={3} animated size="small" style={{ width: '100%' }} />
     </Cell>
   )
 }
diff --git a/src/packages/skeleton/demos/h5/demo3.tsx b/src/packages/skeleton/demos/h5/demo3.tsx
index 33ac5a533b..0a9b8da310 100644
--- a/src/packages/skeleton/demos/h5/demo3.tsx
+++ b/src/packages/skeleton/demos/h5/demo3.tsx
@@ -1,10 +1,13 @@
 import React from 'react'
-import { Cell, Skeleton } from '@nutui/nutui-react'
+import { Cell, Skeleton, Space } from '@nutui/nutui-react'
 
 const Demo3 = () => {
   return (
     <Cell>
-      <Skeleton rows={3} title animated avatar avatarSize="100px" />
+      <Space>
+        <Skeleton width={60} height={60} />
+        <Skeleton width={60} height={60} shape="circle" />
+      </Space>
     </Cell>
   )
 }
diff --git a/src/packages/skeleton/demos/h5/demo4.tsx b/src/packages/skeleton/demos/h5/demo4.tsx
index 48671847d9..01ebd9f3ce 100644
--- a/src/packages/skeleton/demos/h5/demo4.tsx
+++ b/src/packages/skeleton/demos/h5/demo4.tsx
@@ -1,16 +1,22 @@
 import React from 'react'
-import { Cell, Skeleton, ConfigProvider } from '@nutui/nutui-react'
+import { Cell, Skeleton } from '@nutui/nutui-react'
 
 const Demo4 = () => {
   return (
-    <Cell style={{ display: 'block' }}>
-      <ConfigProvider
-        theme={{
-          nutuiSkeletonLineBorderRadius: '10px',
+    <Cell>
+      <Skeleton width={132} height={132} />
+      <div
+        style={{
+          display: 'flex',
+          flexGrow: 1,
+          flexDirection: 'column',
+          marginLeft: 10,
         }}
       >
-        <Skeleton rows={3} animated />
-      </ConfigProvider>
+        <Skeleton size="large" style={{ marginBottom: 5 }} />
+        <Skeleton width="30%" style={{ marginBottom: 5 }} />
+        <Skeleton width="80%" size="small" rows={3} />
+      </div>
     </Cell>
   )
 }
diff --git a/src/packages/skeleton/demos/taro/demo1.tsx b/src/packages/skeleton/demos/taro/demo1.tsx
index 072b8236ee..58987f567c 100644
--- a/src/packages/skeleton/demos/taro/demo1.tsx
+++ b/src/packages/skeleton/demos/taro/demo1.tsx
@@ -3,8 +3,8 @@ import { Cell, Skeleton } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
   return (
-    <Cell style={{ display: 'block', paddingTop: '3px' }}>
-      <Skeleton animated />
+    <Cell>
+      <Skeleton animated size="large" style={{ width: '100%' }} />
     </Cell>
   )
 }
diff --git a/src/packages/skeleton/demos/taro/demo2.tsx b/src/packages/skeleton/demos/taro/demo2.tsx
index b0b5cac29e..9e951412c2 100644
--- a/src/packages/skeleton/demos/taro/demo2.tsx
+++ b/src/packages/skeleton/demos/taro/demo2.tsx
@@ -3,8 +3,8 @@ import { Cell, Skeleton } from '@nutui/nutui-react-taro'
 
 const Demo2 = () => {
   return (
-    <Cell style={{ display: 'block' }}>
-      <Skeleton rows={3} title animated />
+    <Cell>
+      <Skeleton rows={3} animated size="small" style={{ width: '100%' }} />
     </Cell>
   )
 }
diff --git a/src/packages/skeleton/demos/taro/demo3.tsx b/src/packages/skeleton/demos/taro/demo3.tsx
index 204137ad8f..e918bcde98 100644
--- a/src/packages/skeleton/demos/taro/demo3.tsx
+++ b/src/packages/skeleton/demos/taro/demo3.tsx
@@ -1,10 +1,13 @@
 import React from 'react'
-import { Cell, Skeleton } from '@nutui/nutui-react-taro'
+import { Cell, Skeleton, Space } from '@nutui/nutui-react-taro'
 
 const Demo3 = () => {
   return (
     <Cell>
-      <Skeleton rows={3} title animated avatar avatarSize="100px" />
+      <Space>
+        <Skeleton width={60} height={60} />
+        <Skeleton width={60} height={60} shape="circle" />
+      </Space>
     </Cell>
   )
 }
diff --git a/src/packages/skeleton/demos/taro/demo4.tsx b/src/packages/skeleton/demos/taro/demo4.tsx
index 8bf0c9c6e0..d530930cdf 100644
--- a/src/packages/skeleton/demos/taro/demo4.tsx
+++ b/src/packages/skeleton/demos/taro/demo4.tsx
@@ -1,17 +1,22 @@
 import React from 'react'
-import { Cell, Skeleton, ConfigProvider } from '@nutui/nutui-react-taro'
-import pxTransform from '@/utils/px-transform'
+import { Cell, Skeleton } from '@nutui/nutui-react-taro'
 
 const Demo4 = () => {
   return (
-    <Cell style={{ display: 'block' }}>
-      <ConfigProvider
-        theme={{
-          nutuiSkeletonLineBorderRadius: pxTransform(10),
+    <Cell>
+      <Skeleton width={132} height={132} />
+      <div
+        style={{
+          display: 'flex',
+          flexGrow: 1,
+          flexDirection: 'column',
+          marginLeft: 10,
         }}
       >
-        <Skeleton rows={3} animated />
-      </ConfigProvider>
+        <Skeleton size="large" style={{ marginBottom: 5 }} />
+        <Skeleton width="30%" style={{ marginBottom: 5 }} />
+        <Skeleton width="80%" size="small" rows={3} />
+      </div>
     </Cell>
   )
 }
diff --git a/src/packages/skeleton/skeleton.scss b/src/packages/skeleton/skeleton.scss
index d4afb9b775..964c47ede0 100644
--- a/src/packages/skeleton/skeleton.scss
+++ b/src/packages/skeleton/skeleton.scss
@@ -1,46 +1,29 @@
-@import '../avatar/avatar.scss';
-
 .nut-skeleton {
-  display: inline-block;
-  position: relative;
-  overflow: hidden;
-  vertical-align: middle;
-  width: 100%;
+  line-height: 0px;
+  font-size: 0px;
 
   &-content {
-    display: flex;
-    flex-direction: row;
-
-    &-avatar {
-      margin-right: 20px;
-      background: $skeleton-background !important;
-    }
+    position: relative;
+    display: inline-flex;
+    width: 100%;
+    background: #f7f8fc;
+    border-radius: 4px;
+    overflow: hidden;
 
-    &-block {
-      width: $skeleton-line-width;
-      height: $skeleton-line-height;
-      background: $skeleton-background;
-      margin-top: 10px;
-      border-radius: $skeleton-line-border-radius;
+    &-normal {
+      height: 24px;
     }
 
-    &-line {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      .nut-skeleton-content-block:last-child {
-        width: 70%;
-      }
+    &-large {
+      height: 32px;
     }
 
-    &-title {
-      width: 30%;
-      height: $skeleton-line-height;
-      background: $skeleton-background;
+    &-small {
+      height: 16px;
+      margin-top: 8px;
     }
-
-    &-block-last-child {
-      width: 55%;
+    &-small-0 {
+      margin-top: 0;
     }
   }
 
@@ -51,41 +34,42 @@
     width: 100%;
     height: 100%;
     z-index: 1;
-    animation: nut-skeleton 2s ease-in-out 0s infinite;
+    background: linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0.06) 50%,
+      rgba(0, 0, 0, 0) 100%
+    );
+    background-size: 200% 100%;
+    animation: nut-skeleton 0.6s linear 0s infinite;
   }
 
   @keyframes nut-skeleton {
-    0% {
-      background-position-x: -500px;
+    from {
+      background-position: 200% 0;
     }
 
     to {
-      background-position-x: calc(500px + 100%);
+      background-position: -200% 0;
     }
   }
 }
 
 [dir='rtl'] .nut-skeleton,
 .nut-rtl .nut-skeleton {
-  &-content {
-    .nut-avatar {
-      margin-right: 0;
-      margin-left: 20px;
-    }
-  }
   &-animation {
     left: auto;
     right: 0;
-    animation: nut-skeleton-rtl 2s ease-in-out 0s infinite;
+    animation: nut-skeleton-rtl 2s linear 0s infinite;
   }
 
   @keyframes nut-skeleton-rtl {
-    0% {
-      background-position-x: calc(500px + 100%);
+    from {
+      background-position: -200% 0;
     }
 
     to {
-      background-position-x: -500px;
+      background-position: 200% 0;
     }
   }
 }
diff --git a/src/packages/skeleton/skeleton.taro.tsx b/src/packages/skeleton/skeleton.taro.tsx
index 13a290e437..4642065151 100644
--- a/src/packages/skeleton/skeleton.taro.tsx
+++ b/src/packages/skeleton/skeleton.taro.tsx
@@ -1,34 +1,31 @@
-import React, { FunctionComponent } from 'react'
-import { View } from '@tarojs/components'
+import React, { CSSProperties, FunctionComponent } from 'react'
 import classNames from 'classnames'
-import Avatar from '@/packages/avatar/index.taro'
+import { View } from '@tarojs/components'
 import { ComponentDefaults } from '@/utils/typings'
-import pxTransform from '@/utils/px-transform'
-import { TaroSkeletonProps } from '@/types'
+import { WebSkeletonProps } from '@/types'
 
 const defaultProps = {
   ...ComponentDefaults,
   rows: 1,
   animated: false,
-  title: false,
-  avatar: false,
-  avatarSize: '50px',
   visible: false,
-  avatarShape: 'round',
-} as TaroSkeletonProps
-export const Skeleton: FunctionComponent<Partial<TaroSkeletonProps>> = (
+  size: 'normal',
+  shape: 'round',
+  inline: false,
+} as WebSkeletonProps
+export const Skeleton: FunctionComponent<Partial<WebSkeletonProps>> = (
   props
 ) => {
   const {
     className,
+    width,
+    height,
+    shape,
     animated,
     rows,
-    title,
-    avatar,
-    avatarSize,
     visible,
+    size,
     children,
-    avatarShape,
     ...rest
   } = {
     ...defaultProps,
@@ -37,62 +34,35 @@ export const Skeleton: FunctionComponent<Partial<TaroSkeletonProps>> = (
 
   const classPrefix = 'nut-skeleton'
   const classes = classNames(classPrefix, className)
-  const avatarClass = classNames({
-    [`nut-avatar`]: true,
-    [`nut-skeleton-content-avatar`]: true,
-    [`avatar-${avatarShape}`]: avatarShape,
-  })
 
-  const repeatLines = (num: number) => {
+  const repeatCount = (num: number) => {
     return Array.from({ length: num }, (v, i) => i)
   }
 
-  const getStyle = () => {
-    if (avatarSize) {
-      return {
-        width: pxTransform(parseInt(avatarSize)),
-        height: pxTransform(parseInt(avatarSize)),
-      }
-    }
-    return {
-      width: pxTransform(50),
-      height: pxTransform(50),
-    }
+  function shapeStyle(): CSSProperties {
+    if (shape === 'circle') return { borderRadius: '50%' }
+    if (shape === 'square') return { borderRadius: '0' }
+    return {}
   }
 
   return (
     <>
       {visible ? (
-        <>{children}</>
+        children
       ) : (
         <View className={classes} {...rest}>
-          {animated && <View className={`${classPrefix}-animation`} />}
-          <View className={`${classPrefix}-content`}>
-            {avatar && (
-              <Avatar
-                className={avatarClass}
-                background="rgb(239, 239, 239)"
-                shape={avatarShape}
-                style={getStyle()}
-                icon="null"
-              />
-            )}
-            {rows === 1 ? (
-              <View className={`${classPrefix}-content-block`} />
-            ) : (
-              <View className={`${classPrefix}-content-line`}>
-                {title && <View className={`${classPrefix}-content-title`} />}
-                {repeatLines(rows).map((item, index) => {
-                  return (
-                    <View
-                      className={`${classPrefix}-content-block ${index === repeatLines(rows).length - 1 ? `${classPrefix}-content-block-last-child` : ''}`}
-                      key={index}
-                    />
-                  )
-                })}
+          {repeatCount(rows).map((item, index) => {
+            const contentClass = `${classPrefix}-content ${classPrefix}-content-${size} ${classPrefix}-content-${size}-${index}`
+            return (
+              <View
+                className={`${contentClass}`}
+                key={index}
+                style={{ width, height, ...shapeStyle() }}
+              >
+                {animated && <View className={`${classPrefix}-animation`} />}
               </View>
-            )}
-          </View>
+            )
+          })}
         </View>
       )}
     </>
diff --git a/src/packages/skeleton/skeleton.tsx b/src/packages/skeleton/skeleton.tsx
index f239ebca2a..9189d339ef 100644
--- a/src/packages/skeleton/skeleton.tsx
+++ b/src/packages/skeleton/skeleton.tsx
@@ -1,6 +1,5 @@
-import React, { FunctionComponent } from 'react'
+import React, { CSSProperties, FunctionComponent } from 'react'
 import classNames from 'classnames'
-import Avatar from '@/packages/avatar'
 import { ComponentDefaults } from '@/utils/typings'
 import { WebSkeletonProps } from '@/types'
 
@@ -8,25 +7,24 @@ const defaultProps = {
   ...ComponentDefaults,
   rows: 1,
   animated: false,
-  title: false,
-  avatar: false,
-  avatarSize: '50px',
   visible: false,
-  avatarShape: 'round',
+  size: 'normal',
+  shape: 'round',
+  inline: false,
 } as WebSkeletonProps
 export const Skeleton: FunctionComponent<Partial<WebSkeletonProps>> = (
   props
 ) => {
   const {
     className,
+    width,
+    height,
+    shape,
     animated,
     rows,
-    title,
-    avatar,
-    avatarSize,
     visible,
+    size,
     children,
-    avatarShape,
     ...rest
   } = {
     ...defaultProps,
@@ -35,61 +33,35 @@ export const Skeleton: FunctionComponent<Partial<WebSkeletonProps>> = (
 
   const classPrefix = 'nut-skeleton'
   const classes = classNames(classPrefix, className)
-  const avatarClass = classNames({
-    [`nut-avatar`]: true,
-    [`nut-skeleton-content-avatar`]: true,
-    [`avatar-${avatarShape}`]: avatarShape,
-  })
 
-  const repeatLines = (num: number) => {
+  const repeatCount = (num: number) => {
     return Array.from({ length: num }, (v, i) => i)
   }
 
-  const getStyle = () => {
-    if (avatarSize) {
-      return {
-        width: avatarSize,
-        height: avatarSize,
-      }
-    }
-    return {
-      width: '50px',
-      height: '50px',
-    }
+  function shapeStyle(): CSSProperties {
+    if (shape === 'circle') return { borderRadius: '50%' }
+    if (shape === 'square') return { borderRadius: '0' }
+    return {}
   }
 
   return (
     <>
       {visible ? (
-        <>{children}</>
+        children
       ) : (
         <div className={classes} {...rest}>
-          {animated && <div className={`${classPrefix}-animation`} />}
-          <div className={`${classPrefix}-content`}>
-            {avatar && (
-              <Avatar
-                className={avatarClass}
-                shape={avatarShape}
-                style={getStyle()}
-                icon="null"
-              />
-            )}
-            {rows === 1 ? (
-              <div className={`${classPrefix}-content-block`} />
-            ) : (
-              <div className={`${classPrefix}-content-line`}>
-                {title && <div className={`${classPrefix}-content-title`} />}
-                {repeatLines(rows).map((item, index) => {
-                  return (
-                    <div
-                      className={`${classPrefix}-content-block`}
-                      key={index}
-                    />
-                  )
-                })}
+          {repeatCount(rows).map((item, index) => {
+            const contentClass = `${classPrefix}-content ${classPrefix}-content-${size} ${classPrefix}-content-${size}-${index}`
+            return (
+              <div
+                className={`${contentClass}`}
+                key={index}
+                style={{ width, height, ...shapeStyle() }}
+              >
+                {animated && <div className={`${classPrefix}-animation`} />}
               </div>
-            )}
-          </div>
+            )
+          })}
         </div>
       )}
     </>
diff --git a/src/types/spec/skeleton/base.ts b/src/types/spec/skeleton/base.ts
index e18df472f7..7154ca0536 100644
--- a/src/types/spec/skeleton/base.ts
+++ b/src/types/spec/skeleton/base.ts
@@ -1,12 +1,20 @@
 import { BaseProps } from '../../base/props'
+import { SimpleValue, UIRound, UISize } from '../../base/atoms'
 
 export type avatarShape = 'round' | 'square'
 export interface BaseSkeleton extends BaseProps {
-  animated: boolean
   rows: number
-  title: boolean
-  avatar: boolean
-  avatarSize: string
+  size: Extract<UISize, 'small' | 'normal' | 'large'>
+  width: SimpleValue
+  height: SimpleValue
+  shape: UIRound | 'circle'
+  animated: boolean
+  duration: number
+  inline: boolean
   visible: boolean
-  avatarShape: avatarShape
 }
+
+// 不支持行内布局
+// 单独设置 avatar ，需要 row 设置为 0
+// 头像和文本行布局，不便于在复杂场景调整布局
+// 设置宽度和高度不够灵活

From 2392203ced85f902c3afdf197f61137a98c8695d Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Thu, 13 Mar 2025 18:59:35 +0800
Subject: [PATCH 02/18] =?UTF-8?q?feat:=20=E6=9A=82=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/spec/skeleton/base.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/types/spec/skeleton/base.ts b/src/types/spec/skeleton/base.ts
index 7154ca0536..bb1ff0eeb9 100644
--- a/src/types/spec/skeleton/base.ts
+++ b/src/types/spec/skeleton/base.ts
@@ -10,7 +10,6 @@ export interface BaseSkeleton extends BaseProps {
   shape: UIRound | 'circle'
   animated: boolean
   duration: number
-  inline: boolean
   visible: boolean
 }
 

From 5ab7cc4d34924467a9bc975820cd94a34247fff1 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Thu, 13 Mar 2025 19:00:01 +0800
Subject: [PATCH 03/18] =?UTF-8?q?feat:=20=E6=9A=82=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/spec/skeleton/base.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/types/spec/skeleton/base.ts b/src/types/spec/skeleton/base.ts
index bb1ff0eeb9..113b838768 100644
--- a/src/types/spec/skeleton/base.ts
+++ b/src/types/spec/skeleton/base.ts
@@ -12,8 +12,3 @@ export interface BaseSkeleton extends BaseProps {
   duration: number
   visible: boolean
 }
-
-// 不支持行内布局
-// 单独设置 avatar ，需要 row 设置为 0
-// 头像和文本行布局，不便于在复杂场景调整布局
-// 设置宽度和高度不够灵活

From ef7909c5af68a20ef078bdf99bb8068b83bce510 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Fri, 14 Mar 2025 12:41:37 +0800
Subject: [PATCH 04/18] =?UTF-8?q?feat:=20=E4=BF=AE=E8=AE=A2=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/skeleton/demo.taro.tsx        | 28 ++++-----
 src/packages/skeleton/demo.tsx             | 10 ++--
 src/packages/skeleton/demos/h5/demo5.tsx   | 22 +++++--
 src/packages/skeleton/demos/taro/demo5.tsx | 70 ++++++++++------------
 src/packages/skeleton/doc.en-US.md         | 35 ++++++-----
 src/packages/skeleton/doc.md               |  2 +-
 src/packages/skeleton/doc.taro.md          | 25 ++++----
 src/packages/skeleton/doc.zh-TW.md         | 33 +++++-----
 src/packages/skeleton/skeleton.scss        | 24 ++++----
 src/packages/skeleton/skeleton.taro.tsx    | 23 +++++--
 src/packages/skeleton/skeleton.tsx         | 17 +++++-
 src/styles/variables-jmapp.scss            | 13 +++-
 src/styles/variables-jrkf.scss             | 13 +++-
 src/styles/variables.scss                  | 15 ++++-
 src/types/spec/skeleton/base.ts            |  6 +-
 15 files changed, 206 insertions(+), 130 deletions(-)

diff --git a/src/packages/skeleton/demo.taro.tsx b/src/packages/skeleton/demo.taro.tsx
index b54e3b63cb..bbf12ce136 100644
--- a/src/packages/skeleton/demo.taro.tsx
+++ b/src/packages/skeleton/demo.taro.tsx
@@ -12,25 +12,25 @@ import Demo5 from './demos/taro/demo5'
 const SkeletonDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
-      '84aa6bce': '基础用法',
-      ea3bc18a: '传入多行',
-      '02a53df5': '显示头像',
-      '0a001122': '标题段落圆角风格',
+      '84aa6bce': '标题',
+      ea3bc18a: '正文',
+      '02a53df5': '模拟头像',
+      '0a001122': '标题段落',
       '07d62d5c': '显示子组件',
     },
     'zh-TW': {
-      '84aa6bce': '基礎用法',
-      ea3bc18a: '傳入多行',
-      '02a53df5': '顯示頭像',
-      '0a001122': '標題段落圓角風格',
-      '07d62d5c': '圖片組合',
+      '84aa6bce': '标题',
+      ea3bc18a: '正文',
+      '02a53df5': '模拟头像',
+      '0a001122': '標題段落',
+      '07d62d5c': '显示子组件',
     },
     'en-US': {
-      '84aa6bce': 'Basic usage',
-      ea3bc18a: 'Pass in multiple lines',
-      '02a53df5': 'show avatar',
-      '0a001122': 'Heading Paragraph Rounded Corner Style',
-      '07d62d5c': 'show subcomponents',
+      '84aa6bce': 'Title',
+      ea3bc18a: 'Paragraph',
+      '02a53df5': 'Mock Avatar',
+      '0a001122': 'Heading Paragraph',
+      '07d62d5c': 'Show Subcomponents',
     },
   })
 
diff --git a/src/packages/skeleton/demo.tsx b/src/packages/skeleton/demo.tsx
index 37c83ab323..7c5f8402bd 100644
--- a/src/packages/skeleton/demo.tsx
+++ b/src/packages/skeleton/demo.tsx
@@ -12,22 +12,22 @@ const SkeletonDemo = () => {
       '84aa6bce': '标题',
       ea3bc18a: '正文',
       '02a53df5': '模拟头像',
-      '0a001122': '标题段落圆角风格',
+      '0a001122': '标题段落',
       '07d62d5c': '显示子组件',
     },
     'zh-TW': {
       '84aa6bce': '标题',
       ea3bc18a: '正文',
       '02a53df5': '模拟头像',
-      '0a001122': '標題段落圓角風格',
-      '07d62d5c': '圖片組合',
+      '0a001122': '標題段落',
+      '07d62d5c': '显示子组件',
     },
     'en-US': {
       '84aa6bce': 'Title',
       ea3bc18a: 'Paragraph',
       '02a53df5': 'Mock Avatar',
-      '0a001122': 'Heading Paragraph Rounded Corner Style',
-      '07d62d5c': 'show subcomponents',
+      '0a001122': 'Heading Paragraph',
+      '07d62d5c': 'Show Subcomponents',
     },
   })
 
diff --git a/src/packages/skeleton/demos/h5/demo5.tsx b/src/packages/skeleton/demos/h5/demo5.tsx
index 68de14ddd5..9f5728ea33 100644
--- a/src/packages/skeleton/demos/h5/demo5.tsx
+++ b/src/packages/skeleton/demos/h5/demo5.tsx
@@ -1,4 +1,4 @@
-import { Cell, Avatar, Image, Skeleton, Switch } from '@nutui/nutui-react'
+import { Avatar, Cell, Image, Skeleton, Switch } from '@nutui/nutui-react'
 import React, { useState } from 'react'
 
 const Demo5 = () => {
@@ -17,8 +17,9 @@ const Demo5 = () => {
           onChange={(value, event) => changeStatus(value, event)}
           style={{ marginBottom: '8px' }}
         />
-        <Skeleton title animated avatar rows={3} visible={checked}>
-          <div className="nut-skeleton-content">
+
+        <div style={{ display: 'flex' }}>
+          <Skeleton visible={checked} width={50} height={50} shape="circle">
             <Avatar
               className="nut-skeleton-content-avatar"
               size="50"
@@ -29,14 +30,23 @@ const Demo5 = () => {
                 />
               }
             />
-            <div>
+          </Skeleton>
+          <div style={{ flexGrow: 1, marginLeft: 8 }}>
+            <Skeleton
+              visible={checked}
+              size="large"
+              width="30%"
+              style={{ marginBottom: 8 }}
+            >
               <span>NutUI-React</span>
+            </Skeleton>
+            <Skeleton visible={checked} size="small" rows={2}>
               <div>
                 一套京东风格的轻量级移动端React组件库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。
               </div>
-            </div>
+            </Skeleton>
           </div>
-        </Skeleton>
+        </div>
       </div>
     </Cell>
   )
diff --git a/src/packages/skeleton/demos/taro/demo5.tsx b/src/packages/skeleton/demos/taro/demo5.tsx
index 87d7a25b0f..f2274a9c28 100644
--- a/src/packages/skeleton/demos/taro/demo5.tsx
+++ b/src/packages/skeleton/demos/taro/demo5.tsx
@@ -1,54 +1,48 @@
 import { Avatar, Cell, Skeleton, Switch } from '@nutui/nutui-react-taro'
 import React, { useState } from 'react'
 import { View, Text } from '@tarojs/components'
-import { harmony } from '@/utils/platform-taro'
 
 const Demo5 = () => {
   const [checked, setChecked] = useState(false)
-  const changeStatus = (
-    value: boolean,
-    event: React.MouseEvent<Element, MouseEvent>
-  ) => {
+  const changeStatus = (value: boolean) => {
     console.log(`触发了change事件，开关状态：${value}`)
     setChecked(value)
   }
   return (
-    <Cell>
-      <View style={{ width: '100%' }}>
-        <View
-          style={{
-            display: 'flex',
-            justifyContent: 'flex-start',
-          }}
-        >
-          <Switch
-            onChange={(value, event: any) => changeStatus(value, event)}
-            style={{ marginBottom: 8 }}
-          />
-        </View>
-        <Skeleton title animated avatar rows={3} visible={checked}>
-          <View
-            className="nut-skeleton-content"
-            style={{ display: 'flex', flexDirection: 'row' }}
-          >
-            <Avatar
-              className="nut-skeleton-content-avatar"
-              style={{ marginRight: 20 }}
-              size="50"
-              src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
-            />
-            <View className="nut-skeleton-content-line">
-              <Text>NutUI-React</Text>
-              <View
-                style={{ marginTop: 10, width: harmony() ? '80%' : '100%' }}
+    <>
+      <Switch
+        onChange={(value, event) => changeStatus(value)}
+        style={{ marginBottom: 8 }}
+      />
+      <Cell>
+        <View style={{ width: '100%' }}>
+          <View style={{ display: 'flex' }}>
+            <Skeleton visible={checked} width={50} height={50} shape="circle">
+              <Avatar
+                className="nut-skeleton-content-avatar"
+                size="50"
+                src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
+              />
+            </Skeleton>
+            <View style={{ flexGrow: 1, marginLeft: 8 }}>
+              <Skeleton
+                visible={checked}
+                size="large"
+                width="30%"
+                style={{ marginBottom: 8 }}
               >
-                一套京东风格的轻量级移动端React组件库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。
-              </View>
+                <span>NutUI-React</span>
+              </Skeleton>
+              <Skeleton visible={checked} size="small" rows={2}>
+                <Text>
+                  一套京东风格的轻量级移动端React组件库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。
+                </Text>
+              </Skeleton>
             </View>
           </View>
-        </Skeleton>
-      </View>
-    </Cell>
+        </View>
+      </Cell>
+    </>
   )
 }
 export default Demo5
diff --git a/src/packages/skeleton/doc.en-US.md b/src/packages/skeleton/doc.en-US.md
index 9db2a753ba..2eb82e5b47 100644
--- a/src/packages/skeleton/doc.en-US.md
+++ b/src/packages/skeleton/doc.en-US.md
@@ -10,7 +10,7 @@ import { Skeleton } from '@nutui/nutui-react'
 
 ## Code demonstration
 
-### Basic usage
+### Title
 
 :::demo
 
@@ -18,7 +18,7 @@ import { Skeleton } from '@nutui/nutui-react'
 
 :::
 
-### Incoming multiline
+### Paragraph
 
 :::demo
 
@@ -26,7 +26,7 @@ import { Skeleton } from '@nutui/nutui-react'
 
 :::
 
-### Show Faces
+### Mock Avatar
 
 :::demo
 
@@ -34,7 +34,7 @@ import { Skeleton } from '@nutui/nutui-react'
 
 :::
 
-### Title paragraph fillet style
+### Heading Paragraph
 
 :::demo
 
@@ -42,7 +42,7 @@ import { Skeleton } from '@nutui/nutui-react'
 
 :::
 
-### Display subcomponents
+### Show subcomponents
 
 :::demo
 
@@ -56,13 +56,14 @@ import { Skeleton } from '@nutui/nutui-react'
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
-| visible | Whether to display skeleton screen | `boolean` | `false` |
-| animated | Whether to turn on skeleton screen animation | `boolean` | `false` |
-| avatar | Show avatar | `boolean` | `false` |
-| avatarShape | Avatar shape: square / round | `string` | `round` |
-| avatarSize | Avatar size | `string` | `50px` |
-| rows | Set the number of paragraph lines | `number` | `1` |
-| title | Show paragraph titles | `boolean` | `false` |
+| visible | 是否显示骨架屏(true不显示骨架屏，false显示骨架屏) | `boolean` | `true` |
+| animated | 是否开启骨架屏动画 | `boolean` | `false` |
+| size | 指定使用的内置高度 | `'small' \| 'normal' \| 'large'` | `normal` |
+| shape | 设置形状 | `'square' \| 'round' \| 'circle'` | `round` |
+| duration | 动画时长 | `number` | `0.6` |
+| rows | 设置行数 | `number` | `1` |
+| width | 设置宽度，优先级高于 `size` 属性 | `string\|number` | `-` |
+| height | 设置高度，优先级高于 `size` 属性 | `string\|number` | `-` |
 
 ## Theming
 
@@ -72,9 +73,11 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Description | Default |
 | --- | --- | --- |
-| \--nutui-skeleton-background | background | `rgb(239, 239, 239)` |
-| \--nutui-skeleton-line-width | line width | `100%` |
-| \--nutui-skeleton-line-height | line height | `15px` |
-| \--nutui-skeleton-line-border-radius | line borderRadius | `0` |
+| \--nutui-skeleton-background | 背景 | `rgb(239, 239, 239)` |
+| \--nutui-skeleton-line-width | 线条宽度 | `100%` |
+| \--nutui-skeleton-line-small-height | 线条高度 | `16px` |
+| \--nutui-skeleton-line-normal-height | 线条高度 | `24px` |
+| \--nutui-skeleton-line-large-height | 线条高度 | `32px` |
+| \--nutui-skeleton-line-border-radius | 线条边框圆角 | `4px` |
 
 <Contribution name="Skeleton" />
diff --git a/src/packages/skeleton/doc.md b/src/packages/skeleton/doc.md
index f5cec48596..9e7e39d70e 100644
--- a/src/packages/skeleton/doc.md
+++ b/src/packages/skeleton/doc.md
@@ -34,7 +34,7 @@ import { Skeleton } from '@nutui/nutui-react'
 
 :::
 
-### 标题段落圆角风格
+### 标题段落
 
 :::demo
 
diff --git a/src/packages/skeleton/doc.taro.md b/src/packages/skeleton/doc.taro.md
index f8d50aa3e1..a7a25b8491 100644
--- a/src/packages/skeleton/doc.taro.md
+++ b/src/packages/skeleton/doc.taro.md
@@ -10,7 +10,7 @@ import { Skeleton } from '@nutui/nutui-react-taro'
 
 ## 示例代码
 
-### 基础用法
+### 标题
 
 :::demo
 
@@ -18,7 +18,7 @@ import { Skeleton } from '@nutui/nutui-react-taro'
 
 :::
 
-### 传入多行
+### 正文
 
 :::demo
 
@@ -26,7 +26,7 @@ import { Skeleton } from '@nutui/nutui-react-taro'
 
 :::
 
-### 显示头像
+### 模拟头像
 
 :::demo
 
@@ -34,7 +34,7 @@ import { Skeleton } from '@nutui/nutui-react-taro'
 
 :::
 
-### 标题段落圆角风格
+### 标题段落
 
 :::demo
 
@@ -58,11 +58,12 @@ import { Skeleton } from '@nutui/nutui-react-taro'
 | --- | --- | --- | --- |
 | visible | 是否显示骨架屏(true不显示骨架屏，false显示骨架屏) | `boolean` | `true` |
 | animated | 是否开启骨架屏动画 | `boolean` | `false` |
-| avatar | 是否显示头像 | `boolean` | `false` |
-| avatarShape | 头像形状：正方形/圆形 | `string` | `round` |
-| avatarSize | 头像大小 | `string` | `50px` |
-| rows | 设置段落行数 | `number` | `1` |
-| title | 是否显示段落标题 | `boolean` | `true` |
+| size | 指定使用的内置高度 | `'small' \| 'normal' \| 'large'` | `normal` |
+| shape | 设置形状 | `'square' \| 'round' \| 'circle'` | `round` |
+| duration | 动画时长 | `number` | `0.6` |
+| rows | 设置行数 | `number` | `1` |
+| width | 设置宽度，优先级高于 `size` 属性 | `string\|number` | `-` |
+| height | 设置高度，优先级高于 `size` 属性 | `string\|number` | `-` |
 
 ## 主题定制
 
@@ -74,7 +75,9 @@ import { Skeleton } from '@nutui/nutui-react-taro'
 | --- | --- | --- |
 | \--nutui-skeleton-background | 背景 | `rgb(239, 239, 239)` |
 | \--nutui-skeleton-line-width | 线条宽度 | `100%` |
-| \--nutui-skeleton-line-height | 线条高度 | `15px` |
-| \--nutui-skeleton-line-border-radius | 线条边框圆角 | `0` |
+| \--nutui-skeleton-line-small-height | 线条高度 | `16px` |
+| \--nutui-skeleton-line-normal-height | 线条高度 | `24px` |
+| \--nutui-skeleton-line-large-height | 线条高度 | `32px` |
+| \--nutui-skeleton-line-border-radius | 线条边框圆角 | `4px` |
 
 <Contribution name="Skeleton" />
diff --git a/src/packages/skeleton/doc.zh-TW.md b/src/packages/skeleton/doc.zh-TW.md
index 4aeeb342ef..00a48a9b10 100644
--- a/src/packages/skeleton/doc.zh-TW.md
+++ b/src/packages/skeleton/doc.zh-TW.md
@@ -10,7 +10,7 @@ import { Skeleton } from '@nutui/nutui-react'
 
 ## 示例代碼
 
-### 基礎用法
+### 标题
 
 :::demo
 
@@ -18,7 +18,7 @@ import { Skeleton } from '@nutui/nutui-react'
 
 :::
 
-### 傳入多行
+### 正文
 
 :::demo
 
@@ -26,7 +26,7 @@ import { Skeleton } from '@nutui/nutui-react'
 
 :::
 
-### 顯示頭像
+### 模擬頭像
 
 :::demo
 
@@ -34,7 +34,7 @@ import { Skeleton } from '@nutui/nutui-react'
 
 :::
 
-### 標題段落圓角風格
+### 標題段落
 
 :::demo
 
@@ -54,15 +54,16 @@ import { Skeleton } from '@nutui/nutui-react'
 
 ### Props
 
-| 屬性 | 說明 | 類型 | 默認值 |
+| 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| visible | 是否顯示骨架屏(true不顯示骨架屏，false顯示骨架屏) | `boolean` | `true` |
-| animated | 是否開啟骨架屏動畫 | `boolean` | `false` |
-| avatar | 是否顯示頭像 | `boolean` | `false` |
-| avatarShape | 頭像形狀：正方形/圓形 | `string` | `round` |
-| avatarSize | 頭像大小 | `string` | `50px` |
-| rows | 設置段落行數 | `number` | `1` |
-| title | 是否顯示段落標題 | `boolean` | `true` |
+| visible | 是否显示骨架屏(true不显示骨架屏，false显示骨架屏) | `boolean` | `true` |
+| animated | 是否开启骨架屏动画 | `boolean` | `false` |
+| size | 指定使用的内置高度 | `'small' \| 'normal' \| 'large'` | `normal` |
+| shape | 设置形状 | `'square' \| 'round' \| 'circle'` | `round` |
+| duration | 动画时长 | `number` | `0.6` |
+| rows | 设置行数 | `number` | `1` |
+| width | 设置宽度，优先级高于 `size` 属性 | `string\|number` | `-` |
+| height | 设置高度，优先级高于 `size` 属性 | `string\|number` | `-` |
 
 ## 主題定制
 
@@ -73,8 +74,10 @@ import { Skeleton } from '@nutui/nutui-react'
 | 名稱 | 說明 | 默認值 |
 | --- | --- | --- |
 | \--nutui-skeleton-background | 背景 | `rgb(239, 239, 239)` |
-| \--nutui-skeleton-line-width | 線條寬度 | `100%` |
-| \--nutui-skeleton-line-height | 線條高度 | `15px` |
-| \--nutui-skeleton-line-border-radius | 線條邊框圓角 | `0` |
+| \--nutui-skeleton-line-width | 线条宽度 | `100%` |
+| \--nutui-skeleton-line-small-height | 线条高度 | `16px` |
+| \--nutui-skeleton-line-normal-height | 线条高度 | `24px` |
+| \--nutui-skeleton-line-large-height | 线条高度 | `32px` |
+| \--nutui-skeleton-line-border-radius | 线条边框圆角 | `4px` |
 
 <Contribution name="Skeleton" />
diff --git a/src/packages/skeleton/skeleton.scss b/src/packages/skeleton/skeleton.scss
index 964c47ede0..ef0800a4d1 100644
--- a/src/packages/skeleton/skeleton.scss
+++ b/src/packages/skeleton/skeleton.scss
@@ -5,21 +5,21 @@
   &-content {
     position: relative;
     display: inline-flex;
-    width: 100%;
-    background: #f7f8fc;
-    border-radius: 4px;
+    width: $skeleton-line-width;
+    background: $skeleton-background;
+    border-radius: $skeleton-line-border-radius;
     overflow: hidden;
 
     &-normal {
-      height: 24px;
+      height: $skeleton-line-normal-height;
     }
 
     &-large {
-      height: 32px;
+      height: $skeleton-line-large-height;
     }
 
     &-small {
-      height: 16px;
+      height: $skeleton-line-small-height;
       margin-top: 8px;
     }
     &-small-0 {
@@ -40,17 +40,15 @@
       rgba(0, 0, 0, 0.06) 50%,
       rgba(0, 0, 0, 0) 100%
     );
-    background-size: 200% 100%;
-    animation: nut-skeleton 0.6s linear 0s infinite;
   }
 
   @keyframes nut-skeleton {
     from {
-      background-position: 200% 0;
+      transform: translateX(-100%);
     }
 
     to {
-      background-position: -200% 0;
+      transform: translateX(100%);
     }
   }
 }
@@ -65,11 +63,13 @@
 
   @keyframes nut-skeleton-rtl {
     from {
-      background-position: -200% 0;
+      //background-position: -200% 0;
+      transform: translateX(100%);
     }
 
     to {
-      background-position: 200% 0;
+      //background-position: 200% 0;
+      transform: translateX(-100%);
     }
   }
 }
diff --git a/src/packages/skeleton/skeleton.taro.tsx b/src/packages/skeleton/skeleton.taro.tsx
index 4642065151..2fb729da3e 100644
--- a/src/packages/skeleton/skeleton.taro.tsx
+++ b/src/packages/skeleton/skeleton.taro.tsx
@@ -2,7 +2,7 @@ import React, { CSSProperties, FunctionComponent } from 'react'
 import classNames from 'classnames'
 import { View } from '@tarojs/components'
 import { ComponentDefaults } from '@/utils/typings'
-import { WebSkeletonProps } from '@/types'
+import { TaroSkeletonProps } from '@/types'
 
 const defaultProps = {
   ...ComponentDefaults,
@@ -11,9 +11,10 @@ const defaultProps = {
   visible: false,
   size: 'normal',
   shape: 'round',
+  duration: 0.6,
   inline: false,
-} as WebSkeletonProps
-export const Skeleton: FunctionComponent<Partial<WebSkeletonProps>> = (
+} as TaroSkeletonProps
+export const Skeleton: FunctionComponent<Partial<TaroSkeletonProps>> = (
   props
 ) => {
   const {
@@ -25,6 +26,7 @@ export const Skeleton: FunctionComponent<Partial<WebSkeletonProps>> = (
     rows,
     visible,
     size,
+    duration,
     children,
     ...rest
   } = {
@@ -45,6 +47,14 @@ export const Skeleton: FunctionComponent<Partial<WebSkeletonProps>> = (
     return {}
   }
 
+  function durationStyle() {
+    if (typeof duration !== 'undefined')
+      return {
+        animation: `nut-skeleton ${duration}s linear 0s infinite`,
+      }
+    return {}
+  }
+
   return (
     <>
       {visible ? (
@@ -59,7 +69,12 @@ export const Skeleton: FunctionComponent<Partial<WebSkeletonProps>> = (
                 key={index}
                 style={{ width, height, ...shapeStyle() }}
               >
-                {animated && <View className={`${classPrefix}-animation`} />}
+                {animated && (
+                  <View
+                    className={`${classPrefix}-animation`}
+                    style={durationStyle()}
+                  />
+                )}
               </View>
             )
           })}
diff --git a/src/packages/skeleton/skeleton.tsx b/src/packages/skeleton/skeleton.tsx
index 9189d339ef..35d665c00a 100644
--- a/src/packages/skeleton/skeleton.tsx
+++ b/src/packages/skeleton/skeleton.tsx
@@ -10,6 +10,7 @@ const defaultProps = {
   visible: false,
   size: 'normal',
   shape: 'round',
+  duration: 0.6,
   inline: false,
 } as WebSkeletonProps
 export const Skeleton: FunctionComponent<Partial<WebSkeletonProps>> = (
@@ -24,6 +25,7 @@ export const Skeleton: FunctionComponent<Partial<WebSkeletonProps>> = (
     rows,
     visible,
     size,
+    duration,
     children,
     ...rest
   } = {
@@ -44,6 +46,14 @@ export const Skeleton: FunctionComponent<Partial<WebSkeletonProps>> = (
     return {}
   }
 
+  function durationStyle() {
+    if (typeof duration !== 'undefined')
+      return {
+        animation: `nut-skeleton ${duration}s linear 0s infinite`,
+      }
+    return {}
+  }
+
   return (
     <>
       {visible ? (
@@ -58,7 +68,12 @@ export const Skeleton: FunctionComponent<Partial<WebSkeletonProps>> = (
                 key={index}
                 style={{ width, height, ...shapeStyle() }}
               >
-                {animated && <div className={`${classPrefix}-animation`} />}
+                {animated && (
+                  <div
+                    className={`${classPrefix}-animation`}
+                    style={durationStyle()}
+                  />
+                )}
               </div>
             )
           })}
diff --git a/src/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss
index 4a602b1358..3210e9406c 100644
--- a/src/styles/variables-jmapp.scss
+++ b/src/styles/variables-jmapp.scss
@@ -2085,7 +2085,18 @@ $skeleton-background: var(
   $color-background
 ) !default;
 $skeleton-line-width: var(--nutui-skeleton-line-width, 100%) !default;
-$skeleton-line-height: var(--nutui-skeleton-line-height, 15px) !default;
+$skeleton-line-small-height: var(
+  --nutui-skeleton-line-small-height,
+  16px
+) !default;
+$skeleton-line-normal-height: var(
+  --nutui-skeleton-line-normal-height,
+  24px
+) !default;
+$skeleton-line-large-height: var(
+  --nutui-skeleton-line-large-height,
+  32px
+) !default;
 $skeleton-line-border-radius: var(
   --nutui-skeleton-line-border-radius,
   0
diff --git a/src/styles/variables-jrkf.scss b/src/styles/variables-jrkf.scss
index 44b4b0f0bb..1045300d36 100644
--- a/src/styles/variables-jrkf.scss
+++ b/src/styles/variables-jrkf.scss
@@ -2115,7 +2115,18 @@ $skeleton-background: var(
   $color-background
 ) !default;
 $skeleton-line-width: var(--nutui-skeleton-line-width, 100%) !default;
-$skeleton-line-height: var(--nutui-skeleton-line-height, 15px) !default;
+$skeleton-line-small-height: var(
+  --nutui-skeleton-line-small-height,
+  16px
+) !default;
+$skeleton-line-normal-height: var(
+  --nutui-skeleton-line-normal-height,
+  24px
+) !default;
+$skeleton-line-large-height: var(
+  --nutui-skeleton-line-large-height,
+  32px
+) !default;
 $skeleton-line-border-radius: var(
   --nutui-skeleton-line-border-radius,
   0
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 3276b5699d..d6c94e90a3 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -2134,10 +2134,21 @@ $skeleton-background: var(
   $color-background
 ) !default;
 $skeleton-line-width: var(--nutui-skeleton-line-width, 100%) !default;
-$skeleton-line-height: var(--nutui-skeleton-line-height, 15px) !default;
+$skeleton-line-small-height: var(
+  --nutui-skeleton-line-small-height,
+  16px
+) !default;
+$skeleton-line-normal-height: var(
+  --nutui-skeleton-line-normal-height,
+  24px
+) !default;
+$skeleton-line-large-height: var(
+  --nutui-skeleton-line-large-height,
+  32px
+) !default;
 $skeleton-line-border-radius: var(
   --nutui-skeleton-line-border-radius,
-  0
+  $radius-xs
 ) !default;
 
 // card（✅）
diff --git a/src/types/spec/skeleton/base.ts b/src/types/spec/skeleton/base.ts
index 113b838768..daada7cbfe 100644
--- a/src/types/spec/skeleton/base.ts
+++ b/src/types/spec/skeleton/base.ts
@@ -5,10 +5,10 @@ export type avatarShape = 'round' | 'square'
 export interface BaseSkeleton extends BaseProps {
   rows: number
   size: Extract<UISize, 'small' | 'normal' | 'large'>
-  width: SimpleValue
-  height: SimpleValue
+  width?: SimpleValue
+  height?: SimpleValue
   shape: UIRound | 'circle'
   animated: boolean
-  duration: number
+  duration?: number
   visible: boolean
 }

From f15a79fb1fbecc21df9ed2e42b6bc4d66310e45a Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Fri, 14 Mar 2025 12:43:52 +0800
Subject: [PATCH 05/18] =?UTF-8?q?feat:=20=E4=BF=AE=E8=AE=A2=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/skeleton/doc.en-US.md | 28 ++++++++++++++--------------
 src/packages/skeleton/doc.zh-TW.md | 26 +++++++++++++-------------
 2 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/packages/skeleton/doc.en-US.md b/src/packages/skeleton/doc.en-US.md
index 2eb82e5b47..ca44a019bc 100644
--- a/src/packages/skeleton/doc.en-US.md
+++ b/src/packages/skeleton/doc.en-US.md
@@ -56,14 +56,14 @@ import { Skeleton } from '@nutui/nutui-react'
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
-| visible | 是否显示骨架屏(true不显示骨架屏，false显示骨架屏) | `boolean` | `true` |
-| animated | 是否开启骨架屏动画 | `boolean` | `false` |
-| size | 指定使用的内置高度 | `'small' \| 'normal' \| 'large'` | `normal` |
-| shape | 设置形状 | `'square' \| 'round' \| 'circle'` | `round` |
-| duration | 动画时长 | `number` | `0.6` |
-| rows | 设置行数 | `number` | `1` |
-| width | 设置宽度，优先级高于 `size` 属性 | `string\|number` | `-` |
-| height | 设置高度，优先级高于 `size` 属性 | `string\|number` | `-` |
+| visible | Whether to show skeleton screen (true: hide skeleton, false: show skeleton) | `boolean` | `true` |
+| animated | Whether to enable skeleton animation | `boolean` | `false` |
+| size | Specify the built-in height | `'small' \| 'normal' \| 'large'` | `normal` |
+| shape | Set shape | `'square' \| 'round' \| 'circle'` | `round` |
+| duration | Animation duration | `number` | `0.6` |
+| rows | Set number of rows | `number` | `1` |
+| width | Set width, higher priority than `size` property | `string\|number` | `-` |
+| height | Set height, higher priority than `size` property | `string\|number` | `-` |
 
 ## Theming
 
@@ -73,11 +73,11 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Description | Default |
 | --- | --- | --- |
-| \--nutui-skeleton-background | 背景 | `rgb(239, 239, 239)` |
-| \--nutui-skeleton-line-width | 线条宽度 | `100%` |
-| \--nutui-skeleton-line-small-height | 线条高度 | `16px` |
-| \--nutui-skeleton-line-normal-height | 线条高度 | `24px` |
-| \--nutui-skeleton-line-large-height | 线条高度 | `32px` |
-| \--nutui-skeleton-line-border-radius | 线条边框圆角 | `4px` |
+| \--nutui-skeleton-background | Background | `rgb(239, 239, 239)` |
+| \--nutui-skeleton-line-width | Line width | `100%` |
+| \--nutui-skeleton-line-small-height | Line height | `16px` |
+| \--nutui-skeleton-line-normal-height | Line height | `24px` |
+| \--nutui-skeleton-line-large-height | Line height | `32px` |
+| \--nutui-skeleton-line-border-radius | Line border radius | `4px` |
 
 <Contribution name="Skeleton" />
diff --git a/src/packages/skeleton/doc.zh-TW.md b/src/packages/skeleton/doc.zh-TW.md
index 00a48a9b10..8c1b49755b 100644
--- a/src/packages/skeleton/doc.zh-TW.md
+++ b/src/packages/skeleton/doc.zh-TW.md
@@ -56,14 +56,14 @@ import { Skeleton } from '@nutui/nutui-react'
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| visible | 是否显示骨架屏(true不显示骨架屏，false显示骨架屏) | `boolean` | `true` |
-| animated | 是否开启骨架屏动画 | `boolean` | `false` |
-| size | 指定使用的内置高度 | `'small' \| 'normal' \| 'large'` | `normal` |
-| shape | 设置形状 | `'square' \| 'round' \| 'circle'` | `round` |
-| duration | 动画时长 | `number` | `0.6` |
-| rows | 设置行数 | `number` | `1` |
-| width | 设置宽度，优先级高于 `size` 属性 | `string\|number` | `-` |
-| height | 设置高度，优先级高于 `size` 属性 | `string\|number` | `-` |
+| visible | 是否顯示骨架屏(true不顯示骨架屏，false顯示骨架屏) | `boolean` | `true` |
+| animated | 是否開啟骨架屏動畫 | `boolean` | `false` |
+| size | 指定使用的內置高度 | `'small' \| 'normal' \| 'large'` | `normal` |
+| shape | 設置形狀 | `'square' \| 'round' \| 'circle'` | `round` |
+| duration | 動畫時長 | `number` | `0.6` |
+| rows | 設置行數 | `number` | `1` |
+| width | 設置寬度，優先級高於 `size` 屬性 | `string\|number` | `-` |
+| height | 設置高度，優先級高於 `size` 屬性 | `string\|number` | `-` |
 
 ## 主題定制
 
@@ -74,10 +74,10 @@ import { Skeleton } from '@nutui/nutui-react'
 | 名稱 | 說明 | 默認值 |
 | --- | --- | --- |
 | \--nutui-skeleton-background | 背景 | `rgb(239, 239, 239)` |
-| \--nutui-skeleton-line-width | 线条宽度 | `100%` |
-| \--nutui-skeleton-line-small-height | 线条高度 | `16px` |
-| \--nutui-skeleton-line-normal-height | 线条高度 | `24px` |
-| \--nutui-skeleton-line-large-height | 线条高度 | `32px` |
-| \--nutui-skeleton-line-border-radius | 线条边框圆角 | `4px` |
+| \--nutui-skeleton-line-width | 線條寬度 | `100%` |
+| \--nutui-skeleton-line-small-height | 線條高度 | `16px` |
+| \--nutui-skeleton-line-normal-height | 線條高度 | `24px` |
+| \--nutui-skeleton-line-large-height | 線條高度 | `32px` |
+| \--nutui-skeleton-line-border-radius | 線條邊框圓角 | `4px` |
 
 <Contribution name="Skeleton" />

From b67e5783c41aa2bee0a4025dcf9ca8e94f29c3ee Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Fri, 14 Mar 2025 12:54:44 +0800
Subject: [PATCH 06/18] =?UTF-8?q?feat:=20=E4=BF=AE=E8=AE=A2=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/skeleton/doc.md                  | 17 ++++----
 .../doc/docs/react/migrate-from-v2.en-US.md   | 41 +++++++++++--------
 .../doc/docs/react/migrate-from-v2.md         | 41 +++++++++++--------
 .../doc/docs/taro/migrate-from-v2.en-US.md    | 41 +++++++++++--------
 .../doc/docs/taro/migrate-from-v2.md          | 41 +++++++++++--------
 5 files changed, 110 insertions(+), 71 deletions(-)

diff --git a/src/packages/skeleton/doc.md b/src/packages/skeleton/doc.md
index 9e7e39d70e..b109017015 100644
--- a/src/packages/skeleton/doc.md
+++ b/src/packages/skeleton/doc.md
@@ -58,11 +58,12 @@ import { Skeleton } from '@nutui/nutui-react'
 | --- | --- | --- | --- |
 | visible | 是否显示骨架屏(true不显示骨架屏，false显示骨架屏) | `boolean` | `true` |
 | animated | 是否开启骨架屏动画 | `boolean` | `false` |
-| avatar | 是否显示头像 | `boolean` | `false` |
-| avatarShape | 头像形状：正方形/圆形 | `string` | `round` |
-| avatarSize | 头像大小 | `string` | `50px` |
-| rows | 设置段落行数 | `number` | `1` |
-| title | 是否显示段落标题 | `boolean` | `true` |
+| size | 指定使用的内置高度 | `'small' \| 'normal' \| 'large'` | `normal` |
+| shape | 设置形状 | `'square' \| 'round' \| 'circle'` | `round` |
+| duration | 动画时长 | `number` | `0.6` |
+| rows | 设置行数 | `number` | `1` |
+| width | 设置宽度，优先级高于 `size` 属性 | `string\|number` | `-` |
+| height | 设置高度，优先级高于 `size` 属性 | `string\|number` | `-` |
 
 ## 主题定制
 
@@ -74,7 +75,9 @@ import { Skeleton } from '@nutui/nutui-react'
 | --- | --- | --- |
 | \--nutui-skeleton-background | 背景 | `rgb(239, 239, 239)` |
 | \--nutui-skeleton-line-width | 线条宽度 | `100%` |
-| \--nutui-skeleton-line-height | 线条高度 | `15px` |
-| \--nutui-skeleton-line-border-radius | 线条边框圆角 | `0` |
+| \--nutui-skeleton-line-small-height | 线条高度 | `16px` |
+| \--nutui-skeleton-line-normal-height | 线条高度 | `24px` |
+| \--nutui-skeleton-line-large-height | 线条高度 | `32px` |
+| \--nutui-skeleton-line-border-radius | 线条边框圆角 | `4px` |
 
 <Contribution name="Skeleton" />
diff --git a/src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md b/src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md
index 570aa4230b..5b524d3cb6 100644
--- a/src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md
+++ b/src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md
@@ -268,19 +268,28 @@ If your project uses these components, please read the documentation carefully a
 - Added a new color attribute for price types.
 
 [//]: # '#### Progress'
-[//]: # '#### Skeleton'
-[//]: # '#### Steps'
-[//]: # '#### Step'
-[//]: # '#### Swiper'
-[//]: # '#### Table'
-[//]: # '#### Tag'
-[//]: # '#### TrendArrow'
-[//]: # '#### Video'
-[//]: # '#### VirtualList'
-[//]: # '#### WaterMark'
-[//]: # '### 特色组件'
-[//]: # '#### Address'
-[//]: # '#### Barrage'
-[//]: # '#### Card'
-[//]: # '#### Signature'
-[//]: # '#### TimeSelect'
+
+#### Skeleton
+
+- Removed `avatar` attribute, can be simulated using `width` and `height` attributes
+- Removed `avatarShape` attribute, can be set using the `shape` attribute
+- Removed `avatarSize` attribute
+- Added `width` attribute to control width
+- Added `height` attribute to control height
+- Added `duration` attribute to control animation duration
+- Added `size` attribute to select from built-in component heights
+  [//]: # '#### Steps'
+  [//]: # '#### Step'
+  [//]: # '#### Swiper'
+  [//]: # '#### Table'
+  [//]: # '#### Tag'
+  [//]: # '#### TrendArrow'
+  [//]: # '#### Video'
+  [//]: # '#### VirtualList'
+  [//]: # '#### WaterMark'
+  [//]: # '### 特色组件'
+  [//]: # '#### Address'
+  [//]: # '#### Barrage'
+  [//]: # '#### Card'
+  [//]: # '#### Signature'
+  [//]: # '#### TimeSelect'
diff --git a/src/sites/sites-react/doc/docs/react/migrate-from-v2.md b/src/sites/sites-react/doc/docs/react/migrate-from-v2.md
index a9cdf02f2f..49db0e6bef 100644
--- a/src/sites/sites-react/doc/docs/react/migrate-from-v2.md
+++ b/src/sites/sites-react/doc/docs/react/migrate-from-v2.md
@@ -270,19 +270,28 @@ plugins: [
 - 新增 `color`, 价格类型
 
 [//]: # '#### Progress'
-[//]: # '#### Skeleton'
-[//]: # '#### Steps'
-[//]: # '#### Step'
-[//]: # '#### Swiper'
-[//]: # '#### Table'
-[//]: # '#### Tag'
-[//]: # '#### TrendArrow'
-[//]: # '#### Video'
-[//]: # '#### VirtualList'
-[//]: # '#### WaterMark'
-[//]: # '### 特色组件'
-[//]: # '#### Address'
-[//]: # '#### Barrage'
-[//]: # '#### Card'
-[//]: # '#### Signature'
-[//]: # '#### TimeSelect'
+
+#### Skeleton
+
+- 移除 `avatar` 属性，可通过 `width` 和 `height` 属性模拟
+- 移除 `avatarShape` 属性，可通过 `shape` 属性设置
+- 移除 `avatarSize` 属性
+- 新增 `width` 属性，控制宽度
+- 新增 `height` 属性，控制高度
+- 新增 `duration` 属性，控制动画时长
+- 新增 `size` 属性，通过 `size` 属性可选择使用组件内置的高度
+  [//]: # '#### Steps'
+  [//]: # '#### Step'
+  [//]: # '#### Swiper'
+  [//]: # '#### Table'
+  [//]: # '#### Tag'
+  [//]: # '#### TrendArrow'
+  [//]: # '#### Video'
+  [//]: # '#### VirtualList'
+  [//]: # '#### WaterMark'
+  [//]: # '### 特色组件'
+  [//]: # '#### Address'
+  [//]: # '#### Barrage'
+  [//]: # '#### Card'
+  [//]: # '#### Signature'
+  [//]: # '#### TimeSelect'
diff --git a/src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md b/src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md
index 570aa4230b..5b524d3cb6 100644
--- a/src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md
+++ b/src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md
@@ -268,19 +268,28 @@ If your project uses these components, please read the documentation carefully a
 - Added a new color attribute for price types.
 
 [//]: # '#### Progress'
-[//]: # '#### Skeleton'
-[//]: # '#### Steps'
-[//]: # '#### Step'
-[//]: # '#### Swiper'
-[//]: # '#### Table'
-[//]: # '#### Tag'
-[//]: # '#### TrendArrow'
-[//]: # '#### Video'
-[//]: # '#### VirtualList'
-[//]: # '#### WaterMark'
-[//]: # '### 特色组件'
-[//]: # '#### Address'
-[//]: # '#### Barrage'
-[//]: # '#### Card'
-[//]: # '#### Signature'
-[//]: # '#### TimeSelect'
+
+#### Skeleton
+
+- Removed `avatar` attribute, can be simulated using `width` and `height` attributes
+- Removed `avatarShape` attribute, can be set using the `shape` attribute
+- Removed `avatarSize` attribute
+- Added `width` attribute to control width
+- Added `height` attribute to control height
+- Added `duration` attribute to control animation duration
+- Added `size` attribute to select from built-in component heights
+  [//]: # '#### Steps'
+  [//]: # '#### Step'
+  [//]: # '#### Swiper'
+  [//]: # '#### Table'
+  [//]: # '#### Tag'
+  [//]: # '#### TrendArrow'
+  [//]: # '#### Video'
+  [//]: # '#### VirtualList'
+  [//]: # '#### WaterMark'
+  [//]: # '### 特色组件'
+  [//]: # '#### Address'
+  [//]: # '#### Barrage'
+  [//]: # '#### Card'
+  [//]: # '#### Signature'
+  [//]: # '#### TimeSelect'
diff --git a/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md b/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md
index 4d673d5814..22d0fed005 100644
--- a/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md
+++ b/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md
@@ -273,19 +273,28 @@ plugins: [
 - 新增 `color`, 价格类型
 
 [//]: # '#### Progress'
-[//]: # '#### Skeleton'
-[//]: # '#### Steps'
-[//]: # '#### Step'
-[//]: # '#### Swiper'
-[//]: # '#### Table'
-[//]: # '#### Tag'
-[//]: # '#### TrendArrow'
-[//]: # '#### Video'
-[//]: # '#### VirtualList'
-[//]: # '#### WaterMark'
-[//]: # '### 特色组件'
-[//]: # '#### Address'
-[//]: # '#### Barrage'
-[//]: # '#### Card'
-[//]: # '#### Signature'
-[//]: # '#### TimeSelect'
+
+# '#### Skeleton'
+
+- 移除 `avatar` 属性，可通过 `width` 和 `height` 属性模拟
+- 移除 `avatarShape` 属性，可通过 `shape` 属性设置
+- 移除 `avatarSize` 属性
+- 新增 `width` 属性，控制宽度
+- 新增 `height` 属性，控制高度
+- 新增 `duration` 属性，控制动画时长
+- 新增 `size` 属性，通过 `size` 属性可选择使用组件内置的高度
+  [//]: # '#### Steps'
+  [//]: # '#### Step'
+  [//]: # '#### Swiper'
+  [//]: # '#### Table'
+  [//]: # '#### Tag'
+  [//]: # '#### TrendArrow'
+  [//]: # '#### Video'
+  [//]: # '#### VirtualList'
+  [//]: # '#### WaterMark'
+  [//]: # '### 特色组件'
+  [//]: # '#### Address'
+  [//]: # '#### Barrage'
+  [//]: # '#### Card'
+  [//]: # '#### Signature'
+  [//]: # '#### TimeSelect'

From 01ed58a77338b6f8ceedee570beda9d5e386adc2 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Fri, 14 Mar 2025 12:57:15 +0800
Subject: [PATCH 07/18] test: update

---
 src/packages/skeleton/__test__/skeleton.spec.tsx | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/src/packages/skeleton/__test__/skeleton.spec.tsx b/src/packages/skeleton/__test__/skeleton.spec.tsx
index 78e4a23f6a..ef6df314e8 100644
--- a/src/packages/skeleton/__test__/skeleton.spec.tsx
+++ b/src/packages/skeleton/__test__/skeleton.spec.tsx
@@ -8,17 +8,3 @@ test('should allow to disable animation', () => {
   const { container } = render(<Skeleton rows={1} animated={false} />)
   expect(container.querySelector('.skeleton-animation')).toBeFalsy()
 })
-
-test('should change avatar size when using avatarSize prop', () => {
-  const { container } = render(<Skeleton avatar avatarSize="20px" />)
-  expect(container.querySelector('.nut-avatar')).toHaveStyle({
-    width: '20px',
-    height: '20px',
-  })
-  expect(container).toMatchSnapshot()
-})
-
-test('should change avatar shape when using avatarShape prop', () => {
-  const { container } = render(<Skeleton avatar avatarShape="square" />)
-  expect(container.querySelector('.nut-avatar')).toMatchSnapshot()
-})

From 25fa0d5b57b903244361f7a22a4236e95fa76a58 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Fri, 14 Mar 2025 14:39:59 +0800
Subject: [PATCH 08/18] test: update

---
 src/packages/skeleton/__test__/skeleton.spec.tsx | 10 +++++++++-
 src/packages/skeleton/skeleton.taro.tsx          |  2 +-
 src/packages/skeleton/skeleton.tsx               |  2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/packages/skeleton/__test__/skeleton.spec.tsx b/src/packages/skeleton/__test__/skeleton.spec.tsx
index ef6df314e8..a8c82c5667 100644
--- a/src/packages/skeleton/__test__/skeleton.spec.tsx
+++ b/src/packages/skeleton/__test__/skeleton.spec.tsx
@@ -6,5 +6,13 @@ import { Skeleton } from '../skeleton'
 
 test('should allow to disable animation', () => {
   const { container } = render(<Skeleton rows={1} animated={false} />)
-  expect(container.querySelector('.skeleton-animation')).toBeFalsy()
+  expect(container.querySelector('.nut-skeleton-animation')).toBeFalsy()
+})
+
+test('should set duration', () => {
+  const { container } = render(<Skeleton rows={1} duration={2} />)
+  const animation = container.querySelector('.nut-skeleton-animation')
+  expect(animation).toHaveStyle({
+    animation: 'nut-skeleton 2s linear 0s infinite',
+  })
 })
diff --git a/src/packages/skeleton/skeleton.taro.tsx b/src/packages/skeleton/skeleton.taro.tsx
index 2fb729da3e..b391bd4481 100644
--- a/src/packages/skeleton/skeleton.taro.tsx
+++ b/src/packages/skeleton/skeleton.taro.tsx
@@ -7,7 +7,7 @@ import { TaroSkeletonProps } from '@/types'
 const defaultProps = {
   ...ComponentDefaults,
   rows: 1,
-  animated: false,
+  animated: true,
   visible: false,
   size: 'normal',
   shape: 'round',
diff --git a/src/packages/skeleton/skeleton.tsx b/src/packages/skeleton/skeleton.tsx
index 35d665c00a..bfa3bfcd5d 100644
--- a/src/packages/skeleton/skeleton.tsx
+++ b/src/packages/skeleton/skeleton.tsx
@@ -6,7 +6,7 @@ import { WebSkeletonProps } from '@/types'
 const defaultProps = {
   ...ComponentDefaults,
   rows: 1,
-  animated: false,
+  animated: true,
   visible: false,
   size: 'normal',
   shape: 'round',

From 635c3a5a502c2b418ec29d5d79b127820c94a0c1 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Fri, 14 Mar 2025 19:08:25 +0800
Subject: [PATCH 09/18] =?UTF-8?q?feat:=20=E5=8A=A8=E6=95=88=E9=80=82?=
 =?UTF-8?q?=E9=85=8D=E9=B8=BF=E8=92=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/skeleton/skeleton.scss | 8 ++++++++
 src/packages/skeleton/skeleton.tsx  | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/packages/skeleton/skeleton.scss b/src/packages/skeleton/skeleton.scss
index ef0800a4d1..71caa96a3f 100644
--- a/src/packages/skeleton/skeleton.scss
+++ b/src/packages/skeleton/skeleton.scss
@@ -40,6 +40,14 @@
       rgba(0, 0, 0, 0.06) 50%,
       rgba(0, 0, 0, 0) 100%
     );
+    animation-name: nut-skeleton;
+    animation-delay: 0s;
+    animation-duration: 0.6s;
+    animation-direction: normal;
+    animation-fill-mode: both;
+    animation-play-state: running;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
   }
 
   @keyframes nut-skeleton {
diff --git a/src/packages/skeleton/skeleton.tsx b/src/packages/skeleton/skeleton.tsx
index bfa3bfcd5d..2071031e42 100644
--- a/src/packages/skeleton/skeleton.tsx
+++ b/src/packages/skeleton/skeleton.tsx
@@ -49,7 +49,7 @@ export const Skeleton: FunctionComponent<Partial<WebSkeletonProps>> = (
   function durationStyle() {
     if (typeof duration !== 'undefined')
       return {
-        animation: `nut-skeleton ${duration}s linear 0s infinite`,
+        animationDuration: `${duration}s`,
       }
     return {}
   }

From 1f425086b275ce4ba4e6a537f1c334bee6d99a0f Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Fri, 14 Mar 2025 19:12:26 +0800
Subject: [PATCH 10/18] =?UTF-8?q?feat:=20=E5=8A=A8=E6=95=88=E9=80=82?=
 =?UTF-8?q?=E9=85=8D=E9=B8=BF=E8=92=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/skeleton/demos/taro/demo1.tsx | 2 +-
 src/packages/skeleton/skeleton.taro.tsx    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/packages/skeleton/demos/taro/demo1.tsx b/src/packages/skeleton/demos/taro/demo1.tsx
index 58987f567c..2f071d80d8 100644
--- a/src/packages/skeleton/demos/taro/demo1.tsx
+++ b/src/packages/skeleton/demos/taro/demo1.tsx
@@ -4,7 +4,7 @@ import { Cell, Skeleton } from '@nutui/nutui-react-taro'
 const Demo1 = () => {
   return (
     <Cell>
-      <Skeleton animated size="large" style={{ width: '100%' }} />
+      <Skeleton animated size="large" duration={3} style={{ width: '100%' }} />
     </Cell>
   )
 }
diff --git a/src/packages/skeleton/skeleton.taro.tsx b/src/packages/skeleton/skeleton.taro.tsx
index b391bd4481..c05ada3976 100644
--- a/src/packages/skeleton/skeleton.taro.tsx
+++ b/src/packages/skeleton/skeleton.taro.tsx
@@ -50,7 +50,7 @@ export const Skeleton: FunctionComponent<Partial<TaroSkeletonProps>> = (
   function durationStyle() {
     if (typeof duration !== 'undefined')
       return {
-        animation: `nut-skeleton ${duration}s linear 0s infinite`,
+        animationDuration: `${duration}s`,
       }
     return {}
   }

From 61d27fdc3b2e33c6f49ce4754fbf96cafba1fcc6 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Mon, 17 Mar 2025 09:42:59 +0800
Subject: [PATCH 11/18] =?UTF-8?q?feat:=20=E5=8A=A8=E6=95=88=E9=80=82?=
 =?UTF-8?q?=E9=85=8D=E9=B8=BF=E8=92=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/skeleton/demos/taro/demo5.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/packages/skeleton/demos/taro/demo5.tsx b/src/packages/skeleton/demos/taro/demo5.tsx
index f2274a9c28..d649ca470d 100644
--- a/src/packages/skeleton/demos/taro/demo5.tsx
+++ b/src/packages/skeleton/demos/taro/demo5.tsx
@@ -10,10 +10,12 @@ const Demo5 = () => {
   }
   return (
     <>
-      <Switch
-        onChange={(value, event) => changeStatus(value)}
-        style={{ marginBottom: 8 }}
-      />
+      <Cell>
+        <Switch
+          onChange={(value, event) => changeStatus(value)}
+          style={{ marginBottom: 8 }}
+        />
+      </Cell>
       <Cell>
         <View style={{ width: '100%' }}>
           <View style={{ display: 'flex' }}>
@@ -24,7 +26,7 @@ const Demo5 = () => {
                 src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
               />
             </Skeleton>
-            <View style={{ flexGrow: 1, marginLeft: 8 }}>
+            <View style={{ flex: 1, marginLeft: 8 }}>
               <Skeleton
                 visible={checked}
                 size="large"

From 9a76cbccb876fb320a76514abd5cad9b6a05b394 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Tue, 18 Mar 2025 11:03:17 +0800
Subject: [PATCH 12/18] test: update

---
 src/packages/skeleton/__test__/skeleton.spec.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/packages/skeleton/__test__/skeleton.spec.tsx b/src/packages/skeleton/__test__/skeleton.spec.tsx
index a8c82c5667..4b0f816589 100644
--- a/src/packages/skeleton/__test__/skeleton.spec.tsx
+++ b/src/packages/skeleton/__test__/skeleton.spec.tsx
@@ -13,6 +13,6 @@ test('should set duration', () => {
   const { container } = render(<Skeleton rows={1} duration={2} />)
   const animation = container.querySelector('.nut-skeleton-animation')
   expect(animation).toHaveStyle({
-    animation: 'nut-skeleton 2s linear 0s infinite',
+    animationDuration: '2s',
   })
 })

From 84bd666b143a70d3f3554f7eccf2e68a5766844a Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Wed, 26 Mar 2025 14:52:27 +0800
Subject: [PATCH 13/18] fix: ui review

---
 src/packages/skeleton/skeleton.scss     |  2 +-
 src/packages/skeleton/skeleton.taro.tsx | 28 +++++++++++++++++++++++--
 src/packages/skeleton/skeleton.tsx      | 28 +++++++++++++++++++++++--
 src/styles/variables.scss               |  2 +-
 src/types/spec/skeleton/base.ts         |  2 +-
 5 files changed, 55 insertions(+), 7 deletions(-)

diff --git a/src/packages/skeleton/skeleton.scss b/src/packages/skeleton/skeleton.scss
index 71caa96a3f..b27943bfc7 100644
--- a/src/packages/skeleton/skeleton.scss
+++ b/src/packages/skeleton/skeleton.scss
@@ -46,7 +46,7 @@
     animation-direction: normal;
     animation-fill-mode: both;
     animation-play-state: running;
-    animation-iteration-count: infinite;
+    animation-iteration-count: 1;
     animation-timing-function: linear;
   }
 
diff --git a/src/packages/skeleton/skeleton.taro.tsx b/src/packages/skeleton/skeleton.taro.tsx
index c05ada3976..29bcb41b7b 100644
--- a/src/packages/skeleton/skeleton.taro.tsx
+++ b/src/packages/skeleton/skeleton.taro.tsx
@@ -1,4 +1,9 @@
-import React, { CSSProperties, FunctionComponent } from 'react'
+import React, {
+  CSSProperties,
+  FunctionComponent,
+  useEffect,
+  useState,
+} from 'react'
 import classNames from 'classnames'
 import { View } from '@tarojs/components'
 import { ComponentDefaults } from '@/utils/typings'
@@ -55,6 +60,25 @@ export const Skeleton: FunctionComponent<Partial<TaroSkeletonProps>> = (
     return {}
   }
 
+  const [animate, setAnimate] = useState(false)
+
+  const playAnimation = () => {
+    setAnimate(false)
+    setTimeout(() => {
+      setAnimate(true)
+    }, 10)
+  }
+
+  useEffect(() => {
+    if (!animated) return
+    playAnimation()
+    // 每隔 3 秒播放一次动画
+    const intervalId = setInterval(playAnimation, 1000 + duration * 1000) // xs 动画 + 1s 间隔
+
+    // 清理定时器
+    return () => clearInterval(intervalId)
+  }, [])
+
   return (
     <>
       {visible ? (
@@ -71,7 +95,7 @@ export const Skeleton: FunctionComponent<Partial<TaroSkeletonProps>> = (
               >
                 {animated && (
                   <View
-                    className={`${classPrefix}-animation`}
+                    className={`${animate ? `${classPrefix}-animation` : ''}`}
                     style={durationStyle()}
                   />
                 )}
diff --git a/src/packages/skeleton/skeleton.tsx b/src/packages/skeleton/skeleton.tsx
index 2071031e42..a95d019d14 100644
--- a/src/packages/skeleton/skeleton.tsx
+++ b/src/packages/skeleton/skeleton.tsx
@@ -1,4 +1,9 @@
-import React, { CSSProperties, FunctionComponent } from 'react'
+import React, {
+  CSSProperties,
+  FunctionComponent,
+  useEffect,
+  useState,
+} from 'react'
 import classNames from 'classnames'
 import { ComponentDefaults } from '@/utils/typings'
 import { WebSkeletonProps } from '@/types'
@@ -54,6 +59,25 @@ export const Skeleton: FunctionComponent<Partial<WebSkeletonProps>> = (
     return {}
   }
 
+  const [animate, setAnimate] = useState(false)
+
+  const playAnimation = () => {
+    setAnimate(false) // 首先将 animate 设置为 false
+    setTimeout(() => {
+      setAnimate(true) // 1 毫秒后再设置为 true，触发动画
+    }, 10)
+  }
+
+  useEffect(() => {
+    if (!animated) return
+    playAnimation()
+    // 每隔 3 秒播放一次动画
+    const intervalId = setInterval(playAnimation, 1000 + duration * 1000) // xs 动画 + 1s 间隔
+
+    // 清理定时器
+    return () => clearInterval(intervalId)
+  }, [])
+
   return (
     <>
       {visible ? (
@@ -70,7 +94,7 @@ export const Skeleton: FunctionComponent<Partial<WebSkeletonProps>> = (
               >
                 {animated && (
                   <div
-                    className={`${classPrefix}-animation`}
+                    className={`${animate ? `${classPrefix}-animation` : ''}`}
                     style={durationStyle()}
                   />
                 )}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index d6c94e90a3..b0fd3c00aa 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -2131,7 +2131,7 @@ $form-item-tip-text-align: var(--nutui-form-item-tip-text-align, left) !default;
 // skeleton（✅）
 $skeleton-background: var(
   --nutui-skeleton-background,
-  $color-background
+  $color-background-sunken
 ) !default;
 $skeleton-line-width: var(--nutui-skeleton-line-width, 100%) !default;
 $skeleton-line-small-height: var(
diff --git a/src/types/spec/skeleton/base.ts b/src/types/spec/skeleton/base.ts
index daada7cbfe..5df3db68fe 100644
--- a/src/types/spec/skeleton/base.ts
+++ b/src/types/spec/skeleton/base.ts
@@ -9,6 +9,6 @@ export interface BaseSkeleton extends BaseProps {
   height?: SimpleValue
   shape: UIRound | 'circle'
   animated: boolean
-  duration?: number
+  duration: number
   visible: boolean
 }

From d039d886879c0fa882dbe219235fdc979fb46d52 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Wed, 26 Mar 2025 14:57:43 +0800
Subject: [PATCH 14/18] fix: ui review

---
 src/packages/skeleton/demos/taro/demo1.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/packages/skeleton/demos/taro/demo1.tsx b/src/packages/skeleton/demos/taro/demo1.tsx
index 2f071d80d8..58987f567c 100644
--- a/src/packages/skeleton/demos/taro/demo1.tsx
+++ b/src/packages/skeleton/demos/taro/demo1.tsx
@@ -4,7 +4,7 @@ import { Cell, Skeleton } from '@nutui/nutui-react-taro'
 const Demo1 = () => {
   return (
     <Cell>
-      <Skeleton animated size="large" duration={3} style={{ width: '100%' }} />
+      <Skeleton animated size="large" style={{ width: '100%' }} />
     </Cell>
   )
 }

From 2a411ca89fdde88e0b6e568d76c2ac3205403bf4 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Wed, 26 Mar 2025 16:31:44 +0800
Subject: [PATCH 15/18] fix: ui review

---
 src/packages/skeleton/skeleton.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/packages/skeleton/skeleton.scss b/src/packages/skeleton/skeleton.scss
index b27943bfc7..a7b0064fd9 100644
--- a/src/packages/skeleton/skeleton.scss
+++ b/src/packages/skeleton/skeleton.scss
@@ -37,7 +37,7 @@
     background: linear-gradient(
       90deg,
       rgba(0, 0, 0, 0) 0%,
-      rgba(0, 0, 0, 0.06) 50%,
+      rgba(0, 0, 0, 0.02) 50%,
       rgba(0, 0, 0, 0) 100%
     );
     animation-name: nut-skeleton;

From 8b10703c43087a4e620ec4c20e3888b7d0055592 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Wed, 26 Mar 2025 17:14:14 +0800
Subject: [PATCH 16/18] =?UTF-8?q?test:=20=E4=BF=AE=E5=A4=8D=E5=8D=95?=
 =?UTF-8?q?=E6=B5=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/skeleton/__test__/skeleton.spec.tsx | 2 +-
 src/packages/skeleton/skeleton.taro.tsx          | 2 +-
 src/packages/skeleton/skeleton.tsx               | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/packages/skeleton/__test__/skeleton.spec.tsx b/src/packages/skeleton/__test__/skeleton.spec.tsx
index 4b0f816589..6118e3d2e7 100644
--- a/src/packages/skeleton/__test__/skeleton.spec.tsx
+++ b/src/packages/skeleton/__test__/skeleton.spec.tsx
@@ -11,7 +11,7 @@ test('should allow to disable animation', () => {
 
 test('should set duration', () => {
   const { container } = render(<Skeleton rows={1} duration={2} />)
-  const animation = container.querySelector('.nut-skeleton-animation')
+  const animation = container.querySelector('.nut-skeleton-animated')
   expect(animation).toHaveStyle({
     animationDuration: '2s',
   })
diff --git a/src/packages/skeleton/skeleton.taro.tsx b/src/packages/skeleton/skeleton.taro.tsx
index 29bcb41b7b..924a3d47cc 100644
--- a/src/packages/skeleton/skeleton.taro.tsx
+++ b/src/packages/skeleton/skeleton.taro.tsx
@@ -95,7 +95,7 @@ export const Skeleton: FunctionComponent<Partial<TaroSkeletonProps>> = (
               >
                 {animated && (
                   <View
-                    className={`${animate ? `${classPrefix}-animation` : ''}`}
+                    className={`${classPrefix}-animated ${animate ? `${classPrefix}-animation` : ''}`}
                     style={durationStyle()}
                   />
                 )}
diff --git a/src/packages/skeleton/skeleton.tsx b/src/packages/skeleton/skeleton.tsx
index a95d019d14..7e600a99bc 100644
--- a/src/packages/skeleton/skeleton.tsx
+++ b/src/packages/skeleton/skeleton.tsx
@@ -94,7 +94,7 @@ export const Skeleton: FunctionComponent<Partial<WebSkeletonProps>> = (
               >
                 {animated && (
                   <div
-                    className={`${animate ? `${classPrefix}-animation` : ''}`}
+                    className={`${classPrefix}-animated ${animate ? `${classPrefix}-animation` : ''}`}
                     style={durationStyle()}
                   />
                 )}

From 7a394c0c4ac8fd21e5e28e4aa73f564be36bf711 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Fri, 28 Mar 2025 13:26:43 +0800
Subject: [PATCH 17/18] fix: review

---
 src/packages/skeleton/demos/taro/demo3.tsx |  9 +++++++--
 src/packages/skeleton/demos/taro/demo4.tsx |  9 +++++----
 src/packages/skeleton/demos/taro/demo5.tsx | 20 ++++++++++++++------
 3 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/packages/skeleton/demos/taro/demo3.tsx b/src/packages/skeleton/demos/taro/demo3.tsx
index e918bcde98..614986a3b9 100644
--- a/src/packages/skeleton/demos/taro/demo3.tsx
+++ b/src/packages/skeleton/demos/taro/demo3.tsx
@@ -1,12 +1,17 @@
 import React from 'react'
 import { Cell, Skeleton, Space } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo3 = () => {
   return (
     <Cell>
       <Space>
-        <Skeleton width={60} height={60} />
-        <Skeleton width={60} height={60} shape="circle" />
+        <Skeleton width={pxTransform(60)} height={pxTransform(60)} />
+        <Skeleton
+          width={pxTransform(60)}
+          height={pxTransform(60)}
+          shape="circle"
+        />
       </Space>
     </Cell>
   )
diff --git a/src/packages/skeleton/demos/taro/demo4.tsx b/src/packages/skeleton/demos/taro/demo4.tsx
index d530930cdf..edcc4797be 100644
--- a/src/packages/skeleton/demos/taro/demo4.tsx
+++ b/src/packages/skeleton/demos/taro/demo4.tsx
@@ -1,20 +1,21 @@
 import React from 'react'
 import { Cell, Skeleton } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo4 = () => {
   return (
     <Cell>
-      <Skeleton width={132} height={132} />
+      <Skeleton width={pxTransform(132)} height={pxTransform(132)} />
       <div
         style={{
           display: 'flex',
           flexGrow: 1,
           flexDirection: 'column',
-          marginLeft: 10,
+          marginLeft: pxTransform(10),
         }}
       >
-        <Skeleton size="large" style={{ marginBottom: 5 }} />
-        <Skeleton width="30%" style={{ marginBottom: 5 }} />
+        <Skeleton size="large" style={{ marginBottom: pxTransform(5) }} />
+        <Skeleton width="30%" style={{ marginBottom: pxTransform(5) }} />
         <Skeleton width="80%" size="small" rows={3} />
       </div>
     </Cell>
diff --git a/src/packages/skeleton/demos/taro/demo5.tsx b/src/packages/skeleton/demos/taro/demo5.tsx
index d649ca470d..ab3be75351 100644
--- a/src/packages/skeleton/demos/taro/demo5.tsx
+++ b/src/packages/skeleton/demos/taro/demo5.tsx
@@ -1,6 +1,7 @@
 import { Avatar, Cell, 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,30 +14,37 @@ const Demo5 = () => {
       <Cell>
         <Switch
           onChange={(value, event) => changeStatus(value)}
-          style={{ marginBottom: 8 }}
+          style={{ marginBottom: pxTransform(8) }}
         />
       </Cell>
       <Cell>
         <View style={{ width: '100%' }}>
           <View style={{ display: 'flex' }}>
-            <Skeleton visible={checked} width={50} height={50} shape="circle">
+            <Skeleton
+              visible={checked}
+              width={pxTransform(50)}
+              height={pxTransform(50)}
+              shape="circle"
+            >
               <Avatar
                 className="nut-skeleton-content-avatar"
                 size="50"
                 src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
               />
             </Skeleton>
-            <View style={{ flex: 1, marginLeft: 8 }}>
+            <View style={{ flex: 1, marginLeft: pxTransform(8) }}>
               <Skeleton
                 visible={checked}
                 size="large"
                 width="30%"
-                style={{ marginBottom: 8 }}
+                style={{ marginBottom: pxTransform(8) }}
               >
-                <span>NutUI-React</span>
+                <View style={{ lineHeight: 1, height: pxTransform(16) }}>
+                  NutUI-React
+                </View>
               </Skeleton>
               <Skeleton visible={checked} size="small" rows={2}>
-                <Text>
+                <Text style={{ wordBreak: 'break-all' }}>
                   一套京东风格的轻量级移动端React组件库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。
                 </Text>
               </Skeleton>

From 9187b3f88c1f70bebc64b04fa9434e7f9f158a7d Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Fri, 28 Mar 2025 14:04:28 +0800
Subject: [PATCH 18/18] fix: review

---
 src/packages/skeleton/doc.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/packages/skeleton/doc.md b/src/packages/skeleton/doc.md
index b109017015..b8dd5588fa 100644
--- a/src/packages/skeleton/doc.md
+++ b/src/packages/skeleton/doc.md
@@ -10,7 +10,7 @@ import { Skeleton } from '@nutui/nutui-react'
 
 ## 示例代码
 
-### 基础用法
+### 标题
 
 :::demo
 
@@ -18,7 +18,7 @@ import { Skeleton } from '@nutui/nutui-react'
 
 :::
 
-### 传入多行
+### 正文
 
 :::demo
 
@@ -26,7 +26,7 @@ import { Skeleton } from '@nutui/nutui-react'
 
 :::
 
-### 显示头像
+### 模拟头像
 
 :::demo