From bade7ca80989b8d2fa97d0f290132713f80330fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= <ivestszheng@qq.com>
Date: Wed, 13 Oct 2021 17:00:50 +0800
Subject: [PATCH 01/17] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/skeleton/src/skeleton.scss | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/devui/skeleton/src/skeleton.scss b/devui/skeleton/src/skeleton.scss
index 74508318..17ad0751 100644
--- a/devui/skeleton/src/skeleton.scss
+++ b/devui/skeleton/src/skeleton.scss
@@ -1,3 +1,5 @@
+@import '../../styles-var/devui-var.scss';
+
 .devui-skeleton {
   display: flex;
   justify-content: space-between;
@@ -10,7 +12,7 @@
     .avatar {
       width: 40px;
       height: 40px;
-      background-color: #cccccc;
+      background-color: #f2f2f2;
       border-radius: 50%;
     }
   }
@@ -21,7 +23,7 @@
     .devui-skeleton__item {
       width: 100%;
       height: 16px;
-      background-color: #cccccc;
+      background-color: #f2f2f2;
       display: inline-block;
       border-radius: 4px;
     }
@@ -45,7 +47,7 @@
       rgba(255, 255, 255, 0.5) 50%,
       rgba(255, 255, 255, 0) 60%
     )
-    #cccccc;
+    #f2f2f2;
   background-size: 200% 100%;
   background-position-x: 180%;
   animation: 2s loading ease-in-out infinite;
-- 
Gitee


From af83c8fc802cb6a986ce9a7bd56cf1aea88e96f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= <ivestszheng@qq.com>
Date: Wed, 13 Oct 2021 17:39:35 +0800
Subject: [PATCH 02/17] =?UTF-8?q?refactor:=20=E6=9F=AF=E9=87=8C=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/skeleton/src/skeleton.tsx | 33 ++++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/devui/skeleton/src/skeleton.tsx b/devui/skeleton/src/skeleton.tsx
index 1939a776..654bc0b1 100644
--- a/devui/skeleton/src/skeleton.tsx
+++ b/devui/skeleton/src/skeleton.tsx
@@ -8,22 +8,33 @@ export default defineComponent({
   props: skeletonProps,
   setup(props: SkeletonProps, ctx) {
     const { slots } = ctx;
-    const arr = []
-    for (let index = 0; index < props.row; index++) {
-      arr.push(1)
+
+    function renderAnimate(bool) {
+      return bool ? 'devui-skeleton-animated' : ''
+    }
+    function renderAvatar(bool) {
+      return bool ? <div class="devui-skeleton__avatar"><div class="avatar" /></div> : ''
     }
+    function renderParagraph(num) {
+      const arr = []
+      for (let index = 0; index < num; index++) {
+        arr.push(1)
+      }
+      return <div class="devui-skeleton__item__group">{
+        arr.map(() => {
+          return <div class="devui-skeleton__item" />
+        })
+      }</div>
+    }
+
     return () => {
       if (props.loading) {
-        return <div class={`devui-skeleton ${props.animate ? 'devui-skeleton-animated' : 'devui-skeleton-no-animated'}`}>
-          {props.avatar ? <div class="devui-skeleton__avatar"><div class="avatar" /></div> : null}
-          <div class="devui-skeleton__item__group">{
-            arr.map(() => {
-              return <div class="devui-skeleton__item" />
-            })
-          }</div>
+        return <div class={`devui-skeleton ${renderAnimate(props.animate)}`}>
+          {renderAvatar(props.avatar)}
+          {renderParagraph(props.row)}
         </div>
       }
-      return <div class={`devui-skeleton ${props.animate ? 'devui-skeleton-animated' : ''}`}>{slots.default?.()}
+      return <div class={`devui-skeleton ${renderAnimate(props.animate)}`}>{slots.default?.()}
       </div>
     }
   }
-- 
Gitee


From 38ff71e5312bd8dc782e38fc84f9a0a7a4128c06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= <ivestszheng@qq.com>
Date: Wed, 13 Oct 2021 22:48:55 +0800
Subject: [PATCH 03/17] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/skeleton/src/skeleton-types.ts |  4 +-
 devui/skeleton/src/skeleton.scss     |  2 +-
 devui/skeleton/src/skeleton.tsx      | 21 ++++++-----
 docs/components/skeleton/index.md    | 55 ++++++++++++++++------------
 4 files changed, 46 insertions(+), 36 deletions(-)

diff --git a/devui/skeleton/src/skeleton-types.ts b/devui/skeleton/src/skeleton-types.ts
index 5774b491..15d79005 100644
--- a/devui/skeleton/src/skeleton-types.ts
+++ b/devui/skeleton/src/skeleton-types.ts
@@ -2,8 +2,8 @@ import type { ExtractPropTypes } from 'vue'
 
 export const skeletonProps = {
   row: {
-    type: Number || String,
-    default: 0
+    type: Number,
+    required: true
   },
   animate:{
     type: Boolean,
diff --git a/devui/skeleton/src/skeleton.scss b/devui/skeleton/src/skeleton.scss
index 17ad0751..bdce0a9a 100644
--- a/devui/skeleton/src/skeleton.scss
+++ b/devui/skeleton/src/skeleton.scss
@@ -39,7 +39,7 @@
 }
 
 .devui-skeleton-animated > .devui-skeleton__avatar > .avatar,
-.devui-skeleton-animated > .devui-skeleton__item__group > .devui-skeleton__item {
+.devui-skeleton-animated > .devui-skeleton__item__group > div > .devui-skeleton__item {
   background:
     linear-gradient(
       100deg,
diff --git a/devui/skeleton/src/skeleton.tsx b/devui/skeleton/src/skeleton.tsx
index 654bc0b1..0d06a5ec 100644
--- a/devui/skeleton/src/skeleton.tsx
+++ b/devui/skeleton/src/skeleton.tsx
@@ -9,18 +9,15 @@ export default defineComponent({
   setup(props: SkeletonProps, ctx) {
     const { slots } = ctx;
 
-    function renderAnimate(bool) {
-      return bool ? 'devui-skeleton-animated' : ''
+    function renderAnimate(isAnimate) {
+      return isAnimate ? 'devui-skeleton-animated' : ''
     }
-    function renderAvatar(bool) {
-      return bool ? <div class="devui-skeleton__avatar"><div class="avatar" /></div> : ''
-    }
-    function renderParagraph(num) {
+    function renderParagraph(paragraphRowNum) {
       const arr = []
-      for (let index = 0; index < num; index++) {
+      for (let index = 0; index < paragraphRowNum; index++) {
         arr.push(1)
       }
-      return <div class="devui-skeleton__item__group">{
+      return <div class="devui-skeleton__paragraph" v-show={true}>{
         arr.map(() => {
           return <div class="devui-skeleton__item" />
         })
@@ -30,8 +27,12 @@ export default defineComponent({
     return () => {
       if (props.loading) {
         return <div class={`devui-skeleton ${renderAnimate(props.animate)}`}>
-          {renderAvatar(props.avatar)}
-          {renderParagraph(props.row)}
+          <div class="devui-skeleton__avatar" v-show={props.avatar}>
+            <div class="avatar" />
+          </div>
+          <div class="devui-skeleton__item__group">
+            {renderParagraph(props.row)}
+          </div>
         </div>
       }
       return <div class={`devui-skeleton ${renderAnimate(props.animate)}`}>{slots.default?.()}
diff --git a/docs/components/skeleton/index.md b/docs/components/skeleton/index.md
index f4d8d530..ab0ba0d8 100644
--- a/docs/components/skeleton/index.md
+++ b/docs/components/skeleton/index.md
@@ -5,7 +5,7 @@
 在需要等待加载内容的位置设置一个骨架屏，某些场景下比 Loading 的视觉效果更好。
 
 ### 基本用法
-基础的骨架效果, 通过 `row` 属性配置占位段落行数。
+最基本的占位效果。
 
 :::demo
 
@@ -16,28 +16,27 @@
 ```
 :::
 
-### 显示头像
-通过 avatar 属性显示头像占位图。
 
+### 复杂组合
 :::demo
 
 ```vue
 <template>
-  <d-skeleton :row="6" :avatar="true" />
-</template>
-```
-::: 
-
-
-### 展示子组件
-将 loading 属性设置成 false 表示内容加载完成，此时会隐藏占位图，并显示 Skeleton 的子组件。
-
-:::demo
-
-```vue
-<template>
-  <d-switch v-model:checked="loading"></d-switch>
-  <d-skeleton :row="4" :loading="loading">
+  <div class="skeleton-btn-groups">
+      <div>
+          展示骨架屏：
+         <d-switch v-model:checked="loading" />
+      </div>
+      <div>
+          动画：
+         <d-switch v-model:checked="animate" />
+      </div>
+      <div>
+          显示头像：
+         <d-switch v-model:checked="avatar" />
+      </div>
+  </div>
+  <d-skeleton :row="4" :animate="animate" :avatar="avatar" :loading="loading">
       <div>
         <div>content1</div>
         <div>content2</div>
@@ -51,14 +50,24 @@ import { defineComponent, ref } from 'vue'
 
 export default defineComponent({
   setup () {
-    const loading = ref(false)
+    const loading = ref(true)
+    const animate = ref(true)
+    const avatar = ref(true)
 
     return {
       loading,
+	    animate,
+      avatar
     }
   }
 })
 </script>
+<style>
+.skeleton-btn-groups{
+  display: flex;
+  margin-bottom: 1rem;
+}
+</style>
 ```
 :::
 
@@ -66,8 +75,8 @@ export default defineComponent({
 d-skeleton 参数
 |  参数   |   类型    |  默认   | 说明                                          |
 | :-----: | :-------: | :-----: | :-------------------------------------------- |
-|   row   | `number`  |   `0`   | 段落占位图行数                                |
-| loading | `boolean` | `true`  | 是否显示骨架屏，传 `false` 时会展示子组件内容 |
-| animate | `boolean` | `true`  | 是否开启动画                                  |
-| avatar  | `boolean` | `false` | 是否显示头像占位图                            |
+|   row   | `number`  |   --   | 必选，段落占位图行数                                |
+| loading | `boolean` | `true`  | 可选，是否显示骨架屏，传 `false` 时会展示子组件内容 |
+| animate | `boolean` | `true`  | 可选，是否开启动画                               |
+| avatar  | `boolean` | `false` | 可选，是否显示头像占位图                         |
 
-- 
Gitee


From 22ffdefca7c137c9f38472663b99aaec4750c7f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= <ivestszheng@qq.com>
Date: Thu, 14 Oct 2021 16:37:05 +0800
Subject: [PATCH 04/17] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E6=A0=87=E9=A2=98=E4=B8=8E=E6=98=BE=E7=A4=BA=E6=AE=B5?=
 =?UTF-8?q?=E8=90=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/skeleton/src/skeleton-types.ts | 10 +++++++++-
 devui/skeleton/src/skeleton.scss     | 21 +++++++++++++++++----
 devui/skeleton/src/skeleton.tsx      | 10 +++++++---
 docs/components/skeleton/index.md    | 22 ++++++++++++++++++----
 4 files changed, 51 insertions(+), 12 deletions(-)

diff --git a/devui/skeleton/src/skeleton-types.ts b/devui/skeleton/src/skeleton-types.ts
index 15d79005..d8ed04a1 100644
--- a/devui/skeleton/src/skeleton-types.ts
+++ b/devui/skeleton/src/skeleton-types.ts
@@ -3,7 +3,7 @@ import type { ExtractPropTypes } from 'vue'
 export const skeletonProps = {
   row: {
     type: Number,
-    required: true
+    default: 0
   },
   animate:{
     type: Boolean,
@@ -16,6 +16,14 @@ export const skeletonProps = {
   avatar:{
     type: Boolean,
     default: false
+  },
+  title:{
+    type: Boolean,
+    default: true
+  },
+  paragraph:{
+    type: Boolean,
+    default: true
   }
 } as const
 
diff --git a/devui/skeleton/src/skeleton.scss b/devui/skeleton/src/skeleton.scss
index bdce0a9a..afc6767d 100644
--- a/devui/skeleton/src/skeleton.scss
+++ b/devui/skeleton/src/skeleton.scss
@@ -8,6 +8,7 @@
     display: flex;
     flex: 1;
     justify-content: center;
+    padding-right: 16px;
 
     .avatar {
       width: 40px;
@@ -18,9 +19,10 @@
   }
 
   .devui-skeleton__item__group {
-    flex: 7;
+    flex: 11;
 
-    .devui-skeleton__item {
+    .devui-skeleton__item,
+    .devui-skeleton__title {
       width: 100%;
       height: 16px;
       background-color: #f2f2f2;
@@ -28,8 +30,13 @@
       border-radius: 4px;
     }
 
-    .devui-skeleton__item:first-child {
-      width: 33%;
+    .devui-skeleton__title {
+      margin-top: 24px;
+      width: 55%;
+    }
+
+    .devui-skeleton__paragraph {
+      margin-top: 12px;
     }
 
     .devui-skeleton__item:last-child {
@@ -38,6 +45,7 @@
   }
 }
 
+.devui-skeleton-animated > .devui-skeleton__item__group > .devui-skeleton__title,
 .devui-skeleton-animated > .devui-skeleton__avatar > .avatar,
 .devui-skeleton-animated > .devui-skeleton__item__group > div > .devui-skeleton__item {
   background:
@@ -53,6 +61,11 @@
   animation: 2s loading ease-in-out infinite;
 }
 
+.devui-skeleton__avatar > .avatar,
+.devui-skeleton__item__group > div > .devui-skeleton__item {
+  margin-top: 12px;
+}
+
 .devui-skeleton-animated > .devui-skeleton__avatar > .avatar {
   animation-delay: 0.1s;
 }
diff --git a/devui/skeleton/src/skeleton.tsx b/devui/skeleton/src/skeleton.tsx
index 0d06a5ec..54383e3b 100644
--- a/devui/skeleton/src/skeleton.tsx
+++ b/devui/skeleton/src/skeleton.tsx
@@ -9,20 +9,23 @@ export default defineComponent({
   setup(props: SkeletonProps, ctx) {
     const { slots } = ctx;
 
-    function renderAnimate(isAnimate) {
-      return isAnimate ? 'devui-skeleton-animated' : ''
+    function renderAnimate(isAnimated) {
+      return isAnimated ? 'devui-skeleton-animated' : ''
     }
     function renderParagraph(paragraphRowNum) {
       const arr = []
       for (let index = 0; index < paragraphRowNum; index++) {
         arr.push(1)
       }
-      return <div class="devui-skeleton__paragraph" v-show={true}>{
+      return <div class="devui-skeleton__paragraph" v-show={props.paragraph}>{
         arr.map(() => {
           return <div class="devui-skeleton__item" />
         })
       }</div>
     }
+    function renderTitle(isTitleVisble) {
+      return !isTitleVisble ? 'visibility: hidden;' : null
+    }
 
     return () => {
       if (props.loading) {
@@ -31,6 +34,7 @@ export default defineComponent({
             <div class="avatar" />
           </div>
           <div class="devui-skeleton__item__group">
+            <div class="devui-skeleton__title" style={renderTitle(props.title)} />
             {renderParagraph(props.row)}
           </div>
         </div>
diff --git a/docs/components/skeleton/index.md b/docs/components/skeleton/index.md
index ab0ba0d8..2aa6fe03 100644
--- a/docs/components/skeleton/index.md
+++ b/docs/components/skeleton/index.md
@@ -11,7 +11,7 @@
 
 ```vue
 <template>
-  <d-skeleton :row="6" />
+  <d-skeleton :row="3" />
 </template>
 ```
 :::
@@ -35,8 +35,16 @@
           显示头像：
          <d-switch v-model:checked="avatar" />
       </div>
+      <div>
+          显示标题：
+         <d-switch v-model:checked="title" />
+      </div>
+      <div>
+          显示段落：
+         <d-switch v-model:checked="paragraph" />
+      </div>
   </div>
-  <d-skeleton :row="4" :animate="animate" :avatar="avatar" :loading="loading">
+  <d-skeleton :row="4" :animate="animate" :avatar="avatar" :title="title" :paragraph="paragraph" :loading="loading">
       <div>
         <div>content1</div>
         <div>content2</div>
@@ -53,11 +61,15 @@ export default defineComponent({
     const loading = ref(true)
     const animate = ref(true)
     const avatar = ref(true)
+    const title = ref(true)
+    const paragraph = ref(true)
 
     return {
       loading,
 	    animate,
-      avatar
+      avatar,
+      title,
+      paragraph
     }
   }
 })
@@ -75,8 +87,10 @@ export default defineComponent({
 d-skeleton 参数
 |  参数   |   类型    |  默认   | 说明                                          |
 | :-----: | :-------: | :-----: | :-------------------------------------------- |
-|   row   | `number`  |   --   | 必选，段落占位图行数                                |
+|   row   | `number`  |   `0`   | 可选，段落占位图行数                                |
 | loading | `boolean` | `true`  | 可选，是否显示骨架屏，传 `false` 时会展示子组件内容 |
 | animate | `boolean` | `true`  | 可选，是否开启动画                               |
 | avatar  | `boolean` | `false` | 可选，是否显示头像占位图                         |
+| title | `boolean` | `true` | 可选，是否显示标题占位图 |
+| paragraph | `boolean` | `true` | 可选，是否显示段落占位图 |
 
-- 
Gitee


From 9e98da86963008154177d404b01d2b622e4fa078 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= <ivestszheng@qq.com>
Date: Thu, 14 Oct 2021 17:29:55 +0800
Subject: [PATCH 05/17] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=A4=B4?=
 =?UTF-8?q?=E5=83=8F=E5=BD=A2=E7=8A=B6=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/skeleton/index.md | 34 +++++++++++++++++++++++--------
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/docs/components/skeleton/index.md b/docs/components/skeleton/index.md
index 2aa6fe03..2ece78a6 100644
--- a/docs/components/skeleton/index.md
+++ b/docs/components/skeleton/index.md
@@ -44,7 +44,7 @@
          <d-switch v-model:checked="paragraph" />
       </div>
   </div>
-  <d-skeleton :row="4" :animate="animate" :avatar="avatar" :title="title" :paragraph="paragraph" :loading="loading">
+  <d-skeleton :row="4" :animate="animate" :avatar="avatar" :avatarshape="avatarShape" :title="title" :paragraph="paragraph" :loading="loading">
       <div>
         <div>content1</div>
         <div>content2</div>
@@ -63,6 +63,7 @@ export default defineComponent({
     const avatar = ref(true)
     const title = ref(true)
     const paragraph = ref(true)
+    const avatarShape = ref('square')
 
     return {
       loading,
@@ -84,13 +85,30 @@ export default defineComponent({
 :::
 
 ### API
-d-skeleton 参数
+d-skeleton
 |  参数   |   类型    |  默认   | 说明                                          |
 | :-----: | :-------: | :-----: | :-------------------------------------------- |
-|   row   | `number`  |   `0`   | 可选，段落占位图行数                                |
-| loading | `boolean` | `true`  | 可选，是否显示骨架屏，传 `false` 时会展示子组件内容 |
-| animate | `boolean` | `true`  | 可选，是否开启动画                               |
-| avatar  | `boolean` | `false` | 可选，是否显示头像占位图                         |
-| title | `boolean` | `true` | 可选，是否显示标题占位图 |
-| paragraph | `boolean` | `true` | 可选，是否显示段落占位图 |
+| loading | `boolean` | `true`  | 是否显示骨架屏，传 `false` 时会展示子组件内容 |
+| animate | `boolean` | `true`  | 是否开启动画                               |
+| avatar  | `boolean` | `false` | 是否显示头像占位图                         |
+| title | `boolean` | `true` | 是否显示标题占位图 |
+| paragraph | `boolean` | `true` | 是否显示段落占位图 |
+
+d-skeleton-avatar-props
+|  参数   |   类型    |  默认   | 说明                                          |
+| :-----: | :-------: | :-----: | :-------------------------------------------- |
+|   avatar-shape   | `string`  |   `round`   | 头像占位图形状，可选值为`square`                                |
+
+
+d-skeleton-title-props
+|  参数   |   类型    |  默认   | 说明                                          |
+| :-----: | :-------: | :-----: | :-------------------------------------------- |
+|   row   | `number`  |   `0`   | 段落占位图行数                                |
+
+
+d-skeleton-paragraph-props
+|  参数   |   类型    |  默认   | 说明                                          |
+| :-----: | :-------: | :-----: | :-------------------------------------------- |
+|   row   | `number`  |   `0`   | 段落占位图行数                                |
+
 
-- 
Gitee


From a7c7f0a45e8b0a1668e876d82d0be388ba7fa928 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= <ivestszheng@qq.com>
Date: Fri, 15 Oct 2021 09:42:22 +0800
Subject: [PATCH 06/17] =?UTF-8?q?feat:=20avatar=20=E7=9B=B8=E5=85=B3=20api?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/skeleton/src/skeleton-types.ts |  8 ++++++++
 devui/skeleton/src/skeleton.scss     |  1 -
 devui/skeleton/src/skeleton.tsx      | 14 +++++++++++++-
 docs/components/skeleton/index.md    | 14 +++++++++++---
 4 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/devui/skeleton/src/skeleton-types.ts b/devui/skeleton/src/skeleton-types.ts
index d8ed04a1..d56ebfa3 100644
--- a/devui/skeleton/src/skeleton-types.ts
+++ b/devui/skeleton/src/skeleton-types.ts
@@ -24,6 +24,14 @@ export const skeletonProps = {
   paragraph:{
     type: Boolean,
     default: true
+  },
+  avatarSize:{
+    type: String,
+    default: '40px'
+  },
+  avatarShape:{
+    type: String,
+    default: 'round'
   }
 } as const
 
diff --git a/devui/skeleton/src/skeleton.scss b/devui/skeleton/src/skeleton.scss
index afc6767d..af6fe767 100644
--- a/devui/skeleton/src/skeleton.scss
+++ b/devui/skeleton/src/skeleton.scss
@@ -14,7 +14,6 @@
       width: 40px;
       height: 40px;
       background-color: #f2f2f2;
-      border-radius: 50%;
     }
   }
 
diff --git a/devui/skeleton/src/skeleton.tsx b/devui/skeleton/src/skeleton.tsx
index 54383e3b..88922b40 100644
--- a/devui/skeleton/src/skeleton.tsx
+++ b/devui/skeleton/src/skeleton.tsx
@@ -26,12 +26,24 @@ export default defineComponent({
     function renderTitle(isTitleVisble) {
       return !isTitleVisble ? 'visibility: hidden;' : null
     }
+    function renderAvatarShape(avatarShape) {
+      return avatarShape === 'square' ? '' : 'border-radius:50%;'
+    }
+    function renderAvatarSize(avatarSize) {
+      return `width:${avatarSize};height:${avatarSize};`
+    }
+    function renderAvatarStyle(avatarSize,avatarShape){
+      let res = ''
+      res += renderAvatarSize(avatarSize)
+      res += renderAvatarShape(avatarShape)
+      return  res
+    }
 
     return () => {
       if (props.loading) {
         return <div class={`devui-skeleton ${renderAnimate(props.animate)}`}>
           <div class="devui-skeleton__avatar" v-show={props.avatar}>
-            <div class="avatar" />
+            <div class="avatar" style={renderAvatarStyle(props.avatarSize,props.avatarShape)} />
           </div>
           <div class="devui-skeleton__item__group">
             <div class="devui-skeleton__title" style={renderTitle(props.title)} />
diff --git a/docs/components/skeleton/index.md b/docs/components/skeleton/index.md
index 2ece78a6..6442b212 100644
--- a/docs/components/skeleton/index.md
+++ b/docs/components/skeleton/index.md
@@ -43,8 +43,12 @@
           显示段落：
          <d-switch v-model:checked="paragraph" />
       </div>
+      <div>
+          头像圆角：
+         <d-switch v-model:checked="isRound" />
+      </div>
   </div>
-  <d-skeleton :row="4" :animate="animate" :avatar="avatar" :avatarshape="avatarShape" :title="title" :paragraph="paragraph" :loading="loading">
+  <d-skeleton :row="4" :animate="animate" :avatar="avatar" :avatar-shape="isRound?'':'square'" :title="title" :paragraph="paragraph" :loading="loading" :avatarSize="avatarSize">
       <div>
         <div>content1</div>
         <div>content2</div>
@@ -63,14 +67,17 @@ export default defineComponent({
     const avatar = ref(true)
     const title = ref(true)
     const paragraph = ref(true)
-    const avatarShape = ref('square')
+    const isRound = ref(true)
+    const avatarSize = ref('60px')
 
     return {
       loading,
 	    animate,
       avatar,
       title,
-      paragraph
+      paragraph,
+      isRound,
+      avatarSize
     }
   }
 })
@@ -97,6 +104,7 @@ d-skeleton
 d-skeleton-avatar-props
 |  参数   |   类型    |  默认   | 说明                                          |
 | :-----: | :-------: | :-----: | :-------------------------------------------- |
+|   avatar-size   | `String \| Number`  |   `40px`   | 头像占位图大小                               |
 |   avatar-shape   | `string`  |   `round`   | 头像占位图形状，可选值为`square`                                |
 
 
-- 
Gitee


From 27c5dac1b527bba459182285bd0ed8e330444f65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= <ivestszheng@qq.com>
Date: Fri, 15 Oct 2021 09:57:16 +0800
Subject: [PATCH 07/17] feat: skeleton-title-width

---
 devui/skeleton/src/skeleton-types.ts |  6 +++++-
 devui/skeleton/src/skeleton.scss     |  1 -
 devui/skeleton/src/skeleton.tsx      | 23 +++++++++++++----------
 docs/components/skeleton/index.md    |  4 ++--
 4 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/devui/skeleton/src/skeleton-types.ts b/devui/skeleton/src/skeleton-types.ts
index d56ebfa3..393515be 100644
--- a/devui/skeleton/src/skeleton-types.ts
+++ b/devui/skeleton/src/skeleton-types.ts
@@ -32,7 +32,11 @@ export const skeletonProps = {
   avatarShape:{
     type: String,
     default: 'round'
-  }
+  },
+  titleWidth:{
+    type: String,
+    default: '40%'
+  },
 } as const
 
 export type SkeletonProps = ExtractPropTypes<typeof skeletonProps>
diff --git a/devui/skeleton/src/skeleton.scss b/devui/skeleton/src/skeleton.scss
index af6fe767..9faea3c7 100644
--- a/devui/skeleton/src/skeleton.scss
+++ b/devui/skeleton/src/skeleton.scss
@@ -31,7 +31,6 @@
 
     .devui-skeleton__title {
       margin-top: 24px;
-      width: 55%;
     }
 
     .devui-skeleton__paragraph {
diff --git a/devui/skeleton/src/skeleton.tsx b/devui/skeleton/src/skeleton.tsx
index 88922b40..a7e4c79c 100644
--- a/devui/skeleton/src/skeleton.tsx
+++ b/devui/skeleton/src/skeleton.tsx
@@ -23,30 +23,33 @@ export default defineComponent({
         })
       }</div>
     }
-    function renderTitle(isTitleVisble) {
-      return !isTitleVisble ? 'visibility: hidden;' : null
-    }
     function renderAvatarShape(avatarShape) {
       return avatarShape === 'square' ? '' : 'border-radius:50%;'
     }
     function renderAvatarSize(avatarSize) {
       return `width:${avatarSize};height:${avatarSize};`
     }
-    function renderAvatarStyle(avatarSize,avatarShape){
-      let res = ''
-      res += renderAvatarSize(avatarSize)
-      res += renderAvatarShape(avatarShape)
-      return  res
+    function renderAvatarStyle(avatarSize, avatarShape) {
+      return (renderAvatarSize(avatarSize) + renderAvatarShape(avatarShape))
+    }
+    function renderTitleVisibility(isVisible) {
+      return isVisible ? null : 'visibility: hidden;'
+    }
+    function renderTitleWidth(titleWidth) {
+      return `width: ${titleWidth};`
+    }
+    function renderTitle(isVisible, titleWidth) {
+      return (renderTitleWidth(titleWidth) + renderTitleVisibility(isVisible))
     }
 
     return () => {
       if (props.loading) {
         return <div class={`devui-skeleton ${renderAnimate(props.animate)}`}>
           <div class="devui-skeleton__avatar" v-show={props.avatar}>
-            <div class="avatar" style={renderAvatarStyle(props.avatarSize,props.avatarShape)} />
+            <div class="avatar" style={renderAvatarStyle(props.avatarSize, props.avatarShape)} />
           </div>
           <div class="devui-skeleton__item__group">
-            <div class="devui-skeleton__title" style={renderTitle(props.title)} />
+            <div class="devui-skeleton__title" style={renderTitle(props.title, props.titleWidth)} />
             {renderParagraph(props.row)}
           </div>
         </div>
diff --git a/docs/components/skeleton/index.md b/docs/components/skeleton/index.md
index 6442b212..f6c11525 100644
--- a/docs/components/skeleton/index.md
+++ b/docs/components/skeleton/index.md
@@ -104,14 +104,14 @@ d-skeleton
 d-skeleton-avatar-props
 |  参数   |   类型    |  默认   | 说明                                          |
 | :-----: | :-------: | :-----: | :-------------------------------------------- |
-|   avatar-size   | `String \| Number`  |   `40px`   | 头像占位图大小                               |
+|   avatar-size   | `string \| number`  |   `40px`   | 头像占位图大小                               |
 |   avatar-shape   | `string`  |   `round`   | 头像占位图形状，可选值为`square`                                |
 
 
 d-skeleton-title-props
 |  参数   |   类型    |  默认   | 说明                                          |
 | :-----: | :-------: | :-----: | :-------------------------------------------- |
-|   row   | `number`  |   `0`   | 段落占位图行数                                |
+|   title-width   | `string`  |   `40%`   | 设置标题占位图的宽度                                |
 
 
 d-skeleton-paragraph-props
-- 
Gitee


From 4adc8dd3c2c5fad6a295fc278a057656b9bfdcb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= <ivestszheng@qq.com>
Date: Fri, 15 Oct 2021 10:01:00 +0800
Subject: [PATCH 08/17] =?UTF-8?q?style:=20=E4=BF=AE=E6=94=B9=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB=E5=90=8D=E7=A7=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/skeleton/src/skeleton.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/devui/skeleton/src/skeleton.scss b/devui/skeleton/src/skeleton.scss
index 9faea3c7..42af585d 100644
--- a/devui/skeleton/src/skeleton.scss
+++ b/devui/skeleton/src/skeleton.scss
@@ -56,7 +56,7 @@
     #f2f2f2;
   background-size: 200% 100%;
   background-position-x: 180%;
-  animation: 2s loading ease-in-out infinite;
+  animation: 2s skeletonLoading ease-in-out infinite;
 }
 
 .devui-skeleton__avatar > .avatar,
@@ -68,7 +68,7 @@
   animation-delay: 0.1s;
 }
 
-@keyframes loading {
+@keyframes skeletonLoading {
   to {
     background-position-x: -20%;
   }
-- 
Gitee


From 4ea5576008ea017fa3a79fd4af8a25d4a79a00f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= <ivestszheng@qq.com>
Date: Fri, 15 Oct 2021 10:21:11 +0800
Subject: [PATCH 09/17] =?UTF-8?q?feat:=20avatarSize=20=E5=8F=AF=E4=BB=A5?=
 =?UTF-8?q?=E4=BC=A0=20string=20=E6=88=96=20number?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/skeleton/src/skeleton-types.ts | 5 +++--
 devui/skeleton/src/skeleton.tsx      | 6 +++++-
 docs/components/skeleton/index.md    | 2 +-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/devui/skeleton/src/skeleton-types.ts b/devui/skeleton/src/skeleton-types.ts
index 393515be..c7c451bf 100644
--- a/devui/skeleton/src/skeleton-types.ts
+++ b/devui/skeleton/src/skeleton-types.ts
@@ -1,4 +1,5 @@
-import type { ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes,PropType } from 'vue'
+export type ModelValue = number | string | Array<number | string>
 
 export const skeletonProps = {
   row: {
@@ -26,7 +27,7 @@ export const skeletonProps = {
     default: true
   },
   avatarSize:{
-    type: String,
+    type: [String,Number] as PropType<ModelValue>,
     default: '40px'
   },
   avatarShape:{
diff --git a/devui/skeleton/src/skeleton.tsx b/devui/skeleton/src/skeleton.tsx
index a7e4c79c..cf66c7af 100644
--- a/devui/skeleton/src/skeleton.tsx
+++ b/devui/skeleton/src/skeleton.tsx
@@ -27,7 +27,11 @@ export default defineComponent({
       return avatarShape === 'square' ? '' : 'border-radius:50%;'
     }
     function renderAvatarSize(avatarSize) {
-      return `width:${avatarSize};height:${avatarSize};`
+      if (typeof avatarSize === 'string') {
+        return `width:${avatarSize};height:${avatarSize};`
+      } else if (typeof avatarSize === 'number') {
+        return `width:${avatarSize}px;height:${avatarSize}px;`
+      }
     }
     function renderAvatarStyle(avatarSize, avatarShape) {
       return (renderAvatarSize(avatarSize) + renderAvatarShape(avatarShape))
diff --git a/docs/components/skeleton/index.md b/docs/components/skeleton/index.md
index f6c11525..746f3029 100644
--- a/docs/components/skeleton/index.md
+++ b/docs/components/skeleton/index.md
@@ -68,7 +68,7 @@ export default defineComponent({
     const title = ref(true)
     const paragraph = ref(true)
     const isRound = ref(true)
-    const avatarSize = ref('60px')
+    const avatarSize = ref(60)
 
     return {
       loading,
-- 
Gitee


From 4a1ba06b59add2d5c946e73c249e0714113d98f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= <ivestszheng@qq.com>
Date: Fri, 15 Oct 2021 10:38:41 +0800
Subject: [PATCH 10/17] =?UTF-8?q?feat:=20title-width=20=E7=B1=BB=E5=9E=8B?=
 =?UTF-8?q?=E5=8F=AF=E4=BB=A5=E4=BC=A0=20number=20=E5=92=8C=20string?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/skeleton/src/skeleton-types.ts |  2 +-
 devui/skeleton/src/skeleton.tsx      |  6 +++++-
 docs/components/skeleton/index.md    | 12 +++++-------
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/devui/skeleton/src/skeleton-types.ts b/devui/skeleton/src/skeleton-types.ts
index c7c451bf..bdbe3087 100644
--- a/devui/skeleton/src/skeleton-types.ts
+++ b/devui/skeleton/src/skeleton-types.ts
@@ -35,7 +35,7 @@ export const skeletonProps = {
     default: 'round'
   },
   titleWidth:{
-    type: String,
+    type: String as PropType<ModelValue>,
     default: '40%'
   },
 } as const
diff --git a/devui/skeleton/src/skeleton.tsx b/devui/skeleton/src/skeleton.tsx
index cf66c7af..296801a6 100644
--- a/devui/skeleton/src/skeleton.tsx
+++ b/devui/skeleton/src/skeleton.tsx
@@ -40,7 +40,11 @@ export default defineComponent({
       return isVisible ? null : 'visibility: hidden;'
     }
     function renderTitleWidth(titleWidth) {
-      return `width: ${titleWidth};`
+      if (typeof titleWidth === 'string') {
+        return `width: ${titleWidth};`
+      }else if (typeof titleWidth === 'number') {
+        return `width: ${titleWidth}px;`
+      }
     }
     function renderTitle(isVisible, titleWidth) {
       return (renderTitleWidth(titleWidth) + renderTitleVisibility(isVisible))
diff --git a/docs/components/skeleton/index.md b/docs/components/skeleton/index.md
index 746f3029..2d3f5a4e 100644
--- a/docs/components/skeleton/index.md
+++ b/docs/components/skeleton/index.md
@@ -48,7 +48,7 @@
          <d-switch v-model:checked="isRound" />
       </div>
   </div>
-  <d-skeleton :row="4" :animate="animate" :avatar="avatar" :avatar-shape="isRound?'':'square'" :title="title" :paragraph="paragraph" :loading="loading" :avatarSize="avatarSize">
+  <d-skeleton :row="4" :animate="animate" :avatar="avatar" :avatar-shape="isRound?'':'square'" :title="title" :paragraph="paragraph" :loading="loading">
       <div>
         <div>content1</div>
         <div>content2</div>
@@ -68,7 +68,6 @@ export default defineComponent({
     const title = ref(true)
     const paragraph = ref(true)
     const isRound = ref(true)
-    const avatarSize = ref(60)
 
     return {
       loading,
@@ -76,8 +75,7 @@ export default defineComponent({
       avatar,
       title,
       paragraph,
-      isRound,
-      avatarSize
+      isRound
     }
   }
 })
@@ -104,19 +102,19 @@ d-skeleton
 d-skeleton-avatar-props
 |  参数   |   类型    |  默认   | 说明                                          |
 | :-----: | :-------: | :-----: | :-------------------------------------------- |
-|   avatar-size   | `string \| number`  |   `40px`   | 头像占位图大小                               |
+|   avatar-size   | `number \| string`  |   `40px`   | 头像占位图大小                               |
 |   avatar-shape   | `string`  |   `round`   | 头像占位图形状，可选值为`square`                                |
 
 
 d-skeleton-title-props
 |  参数   |   类型    |  默认   | 说明                                          |
 | :-----: | :-------: | :-----: | :-------------------------------------------- |
-|   title-width   | `string`  |   `40%`   | 设置标题占位图的宽度                                |
+|   title-width   | `number \| string`  |   `40%`   | 设置标题占位图的宽度                                |
 
 
 d-skeleton-paragraph-props
 |  参数   |   类型    |  默认   | 说明                                          |
 | :-----: | :-------: | :-----: | :-------------------------------------------- |
-|   row   | `number`  |   `0`   | 段落占位图行数                                |
+|   row   | `number \| string`  |   `0`   | 段落占位图行数                                |
 
 
-- 
Gitee


From 4e9b1b44716e75e30e148d37952eae77360d0604 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= <ivestszheng@qq.com>
Date: Fri, 15 Oct 2021 11:01:47 +0800
Subject: [PATCH 11/17] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=A0=87?=
 =?UTF-8?q?=E9=A2=98=E5=92=8C=E6=AE=B5=E8=90=BD=E6=98=BE=E7=A4=BA=E4=B8=BA?=
 =?UTF-8?q?=E5=9C=86=E8=A7=92=E9=A3=8E=E6=A0=BC=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/skeleton/src/skeleton-types.ts |  4 ++++
 devui/skeleton/src/skeleton.scss     |  1 -
 devui/skeleton/src/skeleton.tsx      | 13 ++++++-----
 docs/components/skeleton/index.md    | 32 +++++++++++++++++++---------
 4 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/devui/skeleton/src/skeleton-types.ts b/devui/skeleton/src/skeleton-types.ts
index bdbe3087..d08fd405 100644
--- a/devui/skeleton/src/skeleton-types.ts
+++ b/devui/skeleton/src/skeleton-types.ts
@@ -10,6 +10,10 @@ export const skeletonProps = {
     type: Boolean,
     default: true
   },
+  round:{
+    type: Boolean,
+    default: false
+  },
   loading:{
     type: Boolean,
     default: true
diff --git a/devui/skeleton/src/skeleton.scss b/devui/skeleton/src/skeleton.scss
index 42af585d..6c1d6fba 100644
--- a/devui/skeleton/src/skeleton.scss
+++ b/devui/skeleton/src/skeleton.scss
@@ -26,7 +26,6 @@
       height: 16px;
       background-color: #f2f2f2;
       display: inline-block;
-      border-radius: 4px;
     }
 
     .devui-skeleton__title {
diff --git a/devui/skeleton/src/skeleton.tsx b/devui/skeleton/src/skeleton.tsx
index 296801a6..95fee39a 100644
--- a/devui/skeleton/src/skeleton.tsx
+++ b/devui/skeleton/src/skeleton.tsx
@@ -19,7 +19,7 @@ export default defineComponent({
       }
       return <div class="devui-skeleton__paragraph" v-show={props.paragraph}>{
         arr.map(() => {
-          return <div class="devui-skeleton__item" />
+          return <div class="devui-skeleton__item" style={renderBorderRadius(props.round)} />
         })
       }</div>
     }
@@ -42,12 +42,15 @@ export default defineComponent({
     function renderTitleWidth(titleWidth) {
       if (typeof titleWidth === 'string') {
         return `width: ${titleWidth};`
-      }else if (typeof titleWidth === 'number') {
+      } else if (typeof titleWidth === 'number') {
         return `width: ${titleWidth}px;`
       }
     }
-    function renderTitle(isVisible, titleWidth) {
-      return (renderTitleWidth(titleWidth) + renderTitleVisibility(isVisible))
+    function renderTitle(isVisible, titleWidth, isRound) {
+      return (renderTitleWidth(titleWidth) + renderBorderRadius(isRound) + renderTitleVisibility(isVisible))
+    }
+    function renderBorderRadius(isRound) {
+      return isRound?'border-radius: 1em;':''
     }
 
     return () => {
@@ -57,7 +60,7 @@ export default defineComponent({
             <div class="avatar" style={renderAvatarStyle(props.avatarSize, props.avatarShape)} />
           </div>
           <div class="devui-skeleton__item__group">
-            <div class="devui-skeleton__title" style={renderTitle(props.title, props.titleWidth)} />
+            <div class="devui-skeleton__title" style={renderTitle(props.title, props.titleWidth, props.round)} />
             {renderParagraph(props.row)}
           </div>
         </div>
diff --git a/docs/components/skeleton/index.md b/docs/components/skeleton/index.md
index 2d3f5a4e..9e81a089 100644
--- a/docs/components/skeleton/index.md
+++ b/docs/components/skeleton/index.md
@@ -23,32 +23,36 @@
 ```vue
 <template>
   <div class="skeleton-btn-groups">
-      <div>
+      <div class="skeleton-btn">
           展示骨架屏：
          <d-switch v-model:checked="loading" />
       </div>
-      <div>
+      <div class="skeleton-btn">
           动画：
          <d-switch v-model:checked="animate" />
       </div>
-      <div>
+      <div class="skeleton-btn">
           显示头像：
          <d-switch v-model:checked="avatar" />
       </div>
-      <div>
+      <div class="skeleton-btn">
           显示标题：
          <d-switch v-model:checked="title" />
       </div>
-      <div>
+      <div class="skeleton-btn">
           显示段落：
          <d-switch v-model:checked="paragraph" />
       </div>
-      <div>
+      <div class="skeleton-btn">
           头像圆角：
-         <d-switch v-model:checked="isRound" />
+         <d-switch v-model:checked="roundAvatar" />
+      </div>
+      <div class="skeleton-btn">
+          段落和标题圆角：
+         <d-switch v-model:checked="round" />
       </div>
   </div>
-  <d-skeleton :row="4" :animate="animate" :avatar="avatar" :avatar-shape="isRound?'':'square'" :title="title" :paragraph="paragraph" :loading="loading">
+  <d-skeleton :row="4" :animate="animate" :avatar="avatar" :avatar-shape="roundAvatar?'':'square'" :title="title" :paragraph="paragraph" :loading="loading" :round="round">
       <div>
         <div>content1</div>
         <div>content2</div>
@@ -67,7 +71,9 @@ export default defineComponent({
     const avatar = ref(true)
     const title = ref(true)
     const paragraph = ref(true)
-    const isRound = ref(true)
+    const roundAvatar = ref(true)
+    const round = ref(false)
+    
 
     return {
       loading,
@@ -75,7 +81,8 @@ export default defineComponent({
       avatar,
       title,
       paragraph,
-      isRound
+      roundAvatar,
+      round
     }
   }
 })
@@ -85,6 +92,10 @@ export default defineComponent({
   display: flex;
   margin-bottom: 1rem;
 }
+.skeleton-btn{
+  display: flex;
+  flex-direction: column;
+}
 </style>
 ```
 :::
@@ -98,6 +109,7 @@ d-skeleton
 | avatar  | `boolean` | `false` | 是否显示头像占位图                         |
 | title | `boolean` | `true` | 是否显示标题占位图 |
 | paragraph | `boolean` | `true` | 是否显示段落占位图 |
+| round | `boolean` | `false` | 是否将标题和段落显示为圆角风格 |
 
 d-skeleton-avatar-props
 |  参数   |   类型    |  默认   | 说明                                          |
-- 
Gitee


From 6c79329984521667a42fc87dd33b24ece5b21d9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= <ivestszheng@qq.com>
Date: Fri, 15 Oct 2021 14:31:22 +0800
Subject: [PATCH 12/17] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=20row-width=20?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=20api?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/skeleton/src/skeleton-types.ts | 10 ++-
 devui/skeleton/src/skeleton.scss     |  3 +-
 devui/skeleton/src/skeleton.tsx      | 94 +++++++++++++++++++---------
 docs/components/skeleton/index.md    | 33 +++++-----
 4 files changed, 90 insertions(+), 50 deletions(-)

diff --git a/devui/skeleton/src/skeleton-types.ts b/devui/skeleton/src/skeleton-types.ts
index d08fd405..935c9117 100644
--- a/devui/skeleton/src/skeleton-types.ts
+++ b/devui/skeleton/src/skeleton-types.ts
@@ -1,5 +1,7 @@
 import type { ExtractPropTypes,PropType } from 'vue'
-export type ModelValue = number | string | Array<number | string>
+
+export type ModelValue = number | string
+export type ArrayModelValue = number | string | Array<number | string>
 
 export const skeletonProps = {
   row: {
@@ -39,9 +41,13 @@ export const skeletonProps = {
     default: 'round'
   },
   titleWidth:{
-    type: String as PropType<ModelValue>,
+    type: [String,Number] as PropType<ModelValue>,
     default: '40%'
   },
+  rowWidth:{
+    type: [String,Number,Array] as PropType<ArrayModelValue>,
+    default: ['1','1','61%']
+  }
 } as const
 
 export type SkeletonProps = ExtractPropTypes<typeof skeletonProps>
diff --git a/devui/skeleton/src/skeleton.scss b/devui/skeleton/src/skeleton.scss
index 6c1d6fba..936a2672 100644
--- a/devui/skeleton/src/skeleton.scss
+++ b/devui/skeleton/src/skeleton.scss
@@ -25,7 +25,6 @@
       width: 100%;
       height: 16px;
       background-color: #f2f2f2;
-      display: inline-block;
     }
 
     .devui-skeleton__title {
@@ -37,7 +36,7 @@
     }
 
     .devui-skeleton__item:last-child {
-      width: 61%;
+      width: 60%;
     }
   }
 }
diff --git a/devui/skeleton/src/skeleton.tsx b/devui/skeleton/src/skeleton.tsx
index 95fee39a..b90a2a95 100644
--- a/devui/skeleton/src/skeleton.tsx
+++ b/devui/skeleton/src/skeleton.tsx
@@ -12,46 +12,80 @@ export default defineComponent({
     function renderAnimate(isAnimated) {
       return isAnimated ? 'devui-skeleton-animated' : ''
     }
-    function renderParagraph(paragraphRowNum) {
+    function renderBorderRadius(isRound) {
+      return isRound ? 'border-radius: 1em;' : ''
+    }
+    function renderParagraph(isShown, rowNum, rowWidth, round) {
       const arr = []
-      for (let index = 0; index < paragraphRowNum; index++) {
-        arr.push(1)
+
+      function pushIntoArray(type) {
+        for (let index = 0; index < rowNum; index++) {
+          arr.push({ width: type })
+        }
       }
-      return <div class="devui-skeleton__paragraph" v-show={props.paragraph}>{
-        arr.map(() => {
-          return <div class="devui-skeleton__item" style={renderBorderRadius(props.round)} />
+      (function handleRowWidth() {
+        if (rowWidth instanceof Array) {
+          for (let index = 0; index < rowNum; index++) {
+            if (rowWidth[index]) {
+              switch (typeof rowWidth[index]) {
+                case 'string':
+                  arr.push({ width: rowWidth[index] })
+                  break
+                case 'number':
+                  arr.push({ width: `${rowWidth[index]}px` })
+              }
+            } else {
+              arr.push({ width: 1 })
+            }
+          }
+        } else {
+          switch (typeof rowWidth) {
+            case 'string':
+              pushIntoArray(rowWidth)
+              break
+            case 'number':
+              pushIntoArray(`${rowWidth}px`)
+              break
+          }
+        }
+      })()
+
+      return <div class="devui-skeleton__paragraph" v-show={isShown}>{
+        arr.map(item => {
+          return <div class="devui-skeleton__item" style={round ? 'border-radius: 1em;' : '' + `width: ${item.width}`} />
         })
       }</div>
     }
-    function renderAvatarShape(avatarShape) {
-      return avatarShape === 'square' ? '' : 'border-radius:50%;'
-    }
-    function renderAvatarSize(avatarSize) {
-      if (typeof avatarSize === 'string') {
-        return `width:${avatarSize};height:${avatarSize};`
-      } else if (typeof avatarSize === 'number') {
-        return `width:${avatarSize}px;height:${avatarSize}px;`
-      }
-    }
     function renderAvatarStyle(avatarSize, avatarShape) {
-      return (renderAvatarSize(avatarSize) + renderAvatarShape(avatarShape))
-    }
-    function renderTitleVisibility(isVisible) {
-      return isVisible ? null : 'visibility: hidden;'
-    }
-    function renderTitleWidth(titleWidth) {
-      if (typeof titleWidth === 'string') {
-        return `width: ${titleWidth};`
-      } else if (typeof titleWidth === 'number') {
-        return `width: ${titleWidth}px;`
+      function renderAvatarSize(avatarSize) {
+        switch (typeof avatarSize) {
+          case 'string':
+            return `width:${avatarSize};height:${avatarSize};`
+          case 'number':
+            return `width:${avatarSize}px;height:${avatarSize}px;`
+        }
+      }
+      function renderAvatarShape(avatarShape) {
+        return avatarShape === 'square' ? '' : 'border-radius:50%;'
       }
+
+      return (renderAvatarSize(avatarSize) + renderAvatarShape(avatarShape))
     }
     function renderTitle(isVisible, titleWidth, isRound) {
+      function renderTitleWidth(titleWidth) {
+        switch (typeof titleWidth) {
+          case 'string':
+            return `width: ${titleWidth};`
+          case 'number':
+            return `width: ${titleWidth}px;`
+        }
+      }
+      function renderTitleVisibility(isVisible) {
+        return isVisible ? null : 'visibility: hidden;'
+      }
+
       return (renderTitleWidth(titleWidth) + renderBorderRadius(isRound) + renderTitleVisibility(isVisible))
     }
-    function renderBorderRadius(isRound) {
-      return isRound?'border-radius: 1em;':''
-    }
 
     return () => {
       if (props.loading) {
@@ -61,7 +95,7 @@ export default defineComponent({
           </div>
           <div class="devui-skeleton__item__group">
             <div class="devui-skeleton__title" style={renderTitle(props.title, props.titleWidth, props.round)} />
-            {renderParagraph(props.row)}
+            {renderParagraph(props.paragraph, props.row, props.rowWidth, props.round)}
           </div>
         </div>
       }
diff --git a/docs/components/skeleton/index.md b/docs/components/skeleton/index.md
index 9e81a089..00232af6 100644
--- a/docs/components/skeleton/index.md
+++ b/docs/components/skeleton/index.md
@@ -52,12 +52,12 @@
          <d-switch v-model:checked="round" />
       </div>
   </div>
-  <d-skeleton :row="4" :animate="animate" :avatar="avatar" :avatar-shape="roundAvatar?'':'square'" :title="title" :paragraph="paragraph" :loading="loading" :round="round">
+  <d-skeleton :row="3" :animate="animate" :avatar="avatar" :avatar-shape="roundAvatar?'':'square'" :title="title" :paragraph="paragraph" :loading="loading" :round="round">
       <div>
-        <div>content1</div>
-        <div>content2</div>
-        <div>content3</div>
-        <div>content4</div>
+        <div>row one</div>
+        <div>row two</div>
+        <div>row three</div>
+        <div>row four</div>
       </div>
   </d-skeleton>
 </template>
@@ -73,7 +73,6 @@ export default defineComponent({
     const paragraph = ref(true)
     const roundAvatar = ref(true)
     const round = ref(false)
-    
 
     return {
       loading,
@@ -95,6 +94,7 @@ export default defineComponent({
 .skeleton-btn{
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
 }
 </style>
 ```
@@ -102,31 +102,32 @@ export default defineComponent({
 
 ### API
 d-skeleton
-|  参数   |   类型    |  默认   | 说明                                          |
+|  参数   |   类型    |  默认   | 说明 |
 | :-----: | :-------: | :-----: | :-------------------------------------------- |
 | loading | `boolean` | `true`  | 是否显示骨架屏，传 `false` 时会展示子组件内容 |
-| animate | `boolean` | `true`  | 是否开启动画                               |
-| avatar  | `boolean` | `false` | 是否显示头像占位图                         |
+| animate | `boolean` | `true`  | 是否开启动画 |
+| avatar  | `boolean` | `false` | 是否显示头像占位图 |
 | title | `boolean` | `true` | 是否显示标题占位图 |
 | paragraph | `boolean` | `true` | 是否显示段落占位图 |
 | round | `boolean` | `false` | 是否将标题和段落显示为圆角风格 |
 
 d-skeleton-avatar-props
-|  参数   |   类型    |  默认   | 说明                                          |
+|  参数   |   类型    |  默认   | 说明 |
 | :-----: | :-------: | :-----: | :-------------------------------------------- |
-|   avatar-size   | `number \| string`  |   `40px`   | 头像占位图大小                               |
-|   avatar-shape   | `string`  |   `round`   | 头像占位图形状，可选值为`square`                                |
+|   avatar-size   | `number \| string`  |   `40px`   | 头像占位图大小 |
+|   avatar-shape   | `string`  |   `round`   | 头像占位图形状，可选值为`square` |
 
 
 d-skeleton-title-props
-|  参数   |   类型    |  默认   | 说明                                          |
+|  参数   |   类型    |  默认   | 说明 |
 | :-----: | :-------: | :-----: | :-------------------------------------------- |
-|   title-width   | `number \| string`  |   `40%`   | 设置标题占位图的宽度                                |
+|   title-width   | `number \| string`  |   `40%`   | 设置标题占位图的宽度 |
 
 
 d-skeleton-paragraph-props
-|  参数   |   类型    |  默认   | 说明                                          |
+|  参数   |   类型    |  默认   | 说明 |
 | :-----: | :-------: | :-----: | :-------------------------------------------- |
-|   row   | `number \| string`  |   `0`   | 段落占位图行数                                |
+|   row   | `number`  |   `0`   | 段落占位图行数 |
+|   row-width   | `number \| string \| (number \| string)[]`  |   `0`   | 段落占位图宽度，可传数组来设置每一行的宽度 |
 
 
-- 
Gitee


From a3a5941a19f02482b6dcddaee1fb9286abef7a5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= <ivestszheng@qq.com>
Date: Fri, 15 Oct 2021 14:37:12 +0800
Subject: [PATCH 13/17] =?UTF-8?q?style:=20=E6=A0=BC=E5=BC=8F=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/skeleton/src/skeleton.scss | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/devui/skeleton/src/skeleton.scss b/devui/skeleton/src/skeleton.scss
index 936a2672..39c95231 100644
--- a/devui/skeleton/src/skeleton.scss
+++ b/devui/skeleton/src/skeleton.scss
@@ -44,6 +44,12 @@
 .devui-skeleton-animated > .devui-skeleton__item__group > .devui-skeleton__title,
 .devui-skeleton-animated > .devui-skeleton__avatar > .avatar,
 .devui-skeleton-animated > .devui-skeleton__item__group > div > .devui-skeleton__item {
+  @keyframes skeletonLoading {
+    to {
+      background-position-x: -20%;
+    }
+  }
+
   background:
     linear-gradient(
       100deg,
@@ -65,9 +71,3 @@
 .devui-skeleton-animated > .devui-skeleton__avatar > .avatar {
   animation-delay: 0.1s;
 }
-
-@keyframes skeletonLoading {
-  to {
-    background-position-x: -20%;
-  }
-}
-- 
Gitee


From 9a344956ccf973f12d2420c51fc49220bd36136c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= <ivestszheng@qq.com>
Date: Fri, 15 Oct 2021 06:47:34 +0000
Subject: [PATCH 14/17] update devui/skeleton/src/skeleton-types.ts.

---
 devui/skeleton/src/skeleton-types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/devui/skeleton/src/skeleton-types.ts b/devui/skeleton/src/skeleton-types.ts
index 935c9117..6b953ae9 100644
--- a/devui/skeleton/src/skeleton-types.ts
+++ b/devui/skeleton/src/skeleton-types.ts
@@ -46,7 +46,7 @@ export const skeletonProps = {
   },
   rowWidth:{
     type: [String,Number,Array] as PropType<ArrayModelValue>,
-    default: ['1','1','61%']
+    default: 1
   }
 } as const
 
-- 
Gitee


From d82a1cd253c89205660dbc395a8beef7484199c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= <ivestszheng@qq.com>
Date: Fri, 15 Oct 2021 06:49:00 +0000
Subject: [PATCH 15/17] update devui/skeleton/src/skeleton-types.ts.

---
 devui/skeleton/src/skeleton-types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/devui/skeleton/src/skeleton-types.ts b/devui/skeleton/src/skeleton-types.ts
index 6b953ae9..935c9117 100644
--- a/devui/skeleton/src/skeleton-types.ts
+++ b/devui/skeleton/src/skeleton-types.ts
@@ -46,7 +46,7 @@ export const skeletonProps = {
   },
   rowWidth:{
     type: [String,Number,Array] as PropType<ArrayModelValue>,
-    default: 1
+    default: ['1','1','61%']
   }
 } as const
 
-- 
Gitee


From a1911ad782d7c0b52e26c53db672dd120833f916 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= <ivestszheng@qq.com>
Date: Fri, 15 Oct 2021 07:05:17 +0000
Subject: [PATCH 16/17] =?UTF-8?q?update=20devui/skeleton/src/skeleton-type?=
 =?UTF-8?q?s.ts.=20feat:=20=E4=BF=AE=E6=94=B9=E4=BA=86=20rowWidth=20?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0=E7=9A=84=E9=BB=98=E8=AE=A4=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/skeleton/src/skeleton-types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/devui/skeleton/src/skeleton-types.ts b/devui/skeleton/src/skeleton-types.ts
index 935c9117..d36ff283 100644
--- a/devui/skeleton/src/skeleton-types.ts
+++ b/devui/skeleton/src/skeleton-types.ts
@@ -46,7 +46,7 @@ export const skeletonProps = {
   },
   rowWidth:{
     type: [String,Number,Array] as PropType<ArrayModelValue>,
-    default: ['1','1','61%']
+    default: '1'
   }
 } as const
 
-- 
Gitee


From 38f3050b8d33f8cedac4c35f7e200c4e1b26721d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= <ivestszheng@qq.com>
Date: Fri, 15 Oct 2021 07:08:24 +0000
Subject: [PATCH 17/17] =?UTF-8?q?update=20docs/components/skeleton/index.m?=
 =?UTF-8?q?d.=20docs:=20=E4=BF=AE=E6=94=B9=E4=BA=86=20rowWidth=20=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0=E7=9A=84=E9=BB=98=E8=AE=A4=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/skeleton/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/skeleton/index.md b/docs/components/skeleton/index.md
index 00232af6..8d897e1b 100644
--- a/docs/components/skeleton/index.md
+++ b/docs/components/skeleton/index.md
@@ -128,6 +128,6 @@ d-skeleton-paragraph-props
 |  参数   |   类型    |  默认   | 说明 |
 | :-----: | :-------: | :-----: | :-------------------------------------------- |
 |   row   | `number`  |   `0`   | 段落占位图行数 |
-|   row-width   | `number \| string \| (number \| string)[]`  |   `0`   | 段落占位图宽度，可传数组来设置每一行的宽度 |
+|   row-width   | `number \| string \| (number \| string)[]`  |   `"1"`   | 段落占位图宽度，可传数组来设置每一行的宽度 |
 
 
-- 
Gitee