From 47efca28d4e76bc23466f3f7cf892cb2f742f5dc Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Sun, 17 Dec 2023 22:14:26 +0800
Subject: [PATCH] chore(skeleton): split demo (#2757)

---
 .../src/exhibition/pages/skeleton/avatar.vue  |   3 +
 .../src/exhibition/pages/skeleton/basic.vue   |   3 +
 .../src/exhibition/pages/skeleton/index.vue   | 106 ++++++---------
 .../src/exhibition/pages/skeleton/picture.vue |  15 +++
 .../src/exhibition/pages/skeleton/round.vue   |   3 +
 .../src/exhibition/pages/skeleton/row.vue     |   3 +
 .../src/exhibition/pages/skeleton/sub.vue     |  46 +++++++
 src/packages/__VUE/skeleton/demo.vue          | 112 ----------------
 src/packages/__VUE/skeleton/demo/avatar.vue   |   3 +
 src/packages/__VUE/skeleton/demo/basic.vue    |   3 +
 src/packages/__VUE/skeleton/demo/index.vue    |  50 +++++++
 src/packages/__VUE/skeleton/demo/picture.vue  |  15 +++
 src/packages/__VUE/skeleton/demo/round.vue    |   3 +
 src/packages/__VUE/skeleton/demo/row.vue      |   3 +
 src/packages/__VUE/skeleton/demo/sub.vue      |  46 +++++++
 src/packages/__VUE/skeleton/doc.en-US.md      | 125 ++---------------
 src/packages/__VUE/skeleton/doc.md            | 119 +----------------
 src/packages/__VUE/skeleton/doc.taro.md       | 126 ++----------------
 18 files changed, 257 insertions(+), 527 deletions(-)
 create mode 100644 packages/nutui-taro-demo/src/exhibition/pages/skeleton/avatar.vue
 create mode 100644 packages/nutui-taro-demo/src/exhibition/pages/skeleton/basic.vue
 create mode 100644 packages/nutui-taro-demo/src/exhibition/pages/skeleton/picture.vue
 create mode 100644 packages/nutui-taro-demo/src/exhibition/pages/skeleton/round.vue
 create mode 100644 packages/nutui-taro-demo/src/exhibition/pages/skeleton/row.vue
 create mode 100644 packages/nutui-taro-demo/src/exhibition/pages/skeleton/sub.vue
 delete mode 100644 src/packages/__VUE/skeleton/demo.vue
 create mode 100644 src/packages/__VUE/skeleton/demo/avatar.vue
 create mode 100644 src/packages/__VUE/skeleton/demo/basic.vue
 create mode 100644 src/packages/__VUE/skeleton/demo/index.vue
 create mode 100644 src/packages/__VUE/skeleton/demo/picture.vue
 create mode 100644 src/packages/__VUE/skeleton/demo/round.vue
 create mode 100644 src/packages/__VUE/skeleton/demo/row.vue
 create mode 100644 src/packages/__VUE/skeleton/demo/sub.vue

diff --git a/packages/nutui-taro-demo/src/exhibition/pages/skeleton/avatar.vue b/packages/nutui-taro-demo/src/exhibition/pages/skeleton/avatar.vue
new file mode 100644
index 0000000000..7490495eff
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/skeleton/avatar.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-skeleton width="250px" height="15px" animated avatar avatar-size="60px" row="3"> </nut-skeleton>
+</template>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/skeleton/basic.vue b/packages/nutui-taro-demo/src/exhibition/pages/skeleton/basic.vue
new file mode 100644
index 0000000000..ed6b629bb1
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/skeleton/basic.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-skeleton width="200px" height="15px" animated></nut-skeleton>
+</template>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/skeleton/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/skeleton/index.vue
index d8fc90de31..5ce96c39e7 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/skeleton/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/skeleton/index.vue
@@ -1,80 +1,50 @@
 <template>
   <Demo>
-    <h2>基础用法</h2>
-    <nut-skeleton width="250px" height="15px" animated> </nut-skeleton>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <h2>传入多行</h2>
-    <nut-skeleton width="250px" height="15px" title animated row="3"> </nut-skeleton>
+    <h2>{{ t('row') }}</h2>
+    <Row />
 
-    <h2>显示头像</h2>
-    <nut-skeleton width="250px" height="15px" title animated avatar row="3"> </nut-skeleton>
+    <h2>{{ t('avatar') }}</h2>
+    <Avatar />
 
-    <h2>标题段落圆角风格</h2>
-    <nut-skeleton width="250px" height="15px" animated round></nut-skeleton>
+    <h2>{{ t('round') }}</h2>
+    <Round />
 
-    <h2>图片组合</h2>
+    <h2>{{ t('picture') }}</h2>
+    <Picture />
 
-    <div class="pic-compose">
-      <nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton>
-      <nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton>
-    </div>
-
-    <h2>显示子组件</h2>
-    <view class="content">
-      <nut-switch v-model="checked" />
-      <nut-skeleton width="250px" height="15px" title animated avatar row="3" :loading="!checked">
-        <view class="container">
-          <nut-avatar size="50">
-            <img
-              src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
-            />
-          </nut-avatar>
-          <view class="right-content">
-            <view class="title">NutUI</view>
-            <view class="desc"
-              >一套京东风格的轻量级移动端Vue组库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。</view
-            >
-          </view>
-        </view>
-      </nut-skeleton>
-    </view>
+    <h2>{{ t('sub') }}</h2>
+    <Sub />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-const checked = ref(false);
-</script>
-
-<style lang="scss">
-.content {
-  .nut-switch {
-    margin: 0 16px 8px 0;
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Row from './row.vue';
+import Avatar from './avatar.vue';
+import Round from './round.vue';
+import Picture from './picture.vue';
+import Sub from './sub.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    row: '传入多行',
+    avatar: '显示头像',
+    round: '标题段落圆角风格',
+    picture: '图片组合',
+    sub: '显示子组件'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    row: 'Multi lines',
+    avatar: 'Show Avatar',
+    round: 'Round Style',
+    picture: 'Picture combination',
+    sub: 'Display sub-component'
   }
-  .container {
-    display: flex;
-    .right-content {
-      margin-left: 19px;
-      font-family: PingFangSC;
-      display: flex;
-      flex-direction: column;
-      .title {
-        font-size: 14px;
-        color: rgba(51, 51, 51, 1);
-      }
-      .desc {
-        margin-top: 10px;
-        font-size: 13px;
-        color: rgba(154, 155, 157, 1);
-      }
-    }
-  }
-}
-.pic-compose {
-  display: flex;
-  justify-content: space-between;
-  .item {
-    width: 47%;
-  }
-}
-</style>
+});
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/skeleton/picture.vue b/packages/nutui-taro-demo/src/exhibition/pages/skeleton/picture.vue
new file mode 100644
index 0000000000..4603c739b0
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/skeleton/picture.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="skeleton-picture">
+    <nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton>
+    <nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton>
+  </div>
+</template>
+<style>
+.skeleton-picture {
+  display: flex;
+  justify-content: space-between;
+  .item {
+    width: 47%;
+  }
+}
+</style>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/skeleton/round.vue b/packages/nutui-taro-demo/src/exhibition/pages/skeleton/round.vue
new file mode 100644
index 0000000000..c55163d397
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/skeleton/round.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-skeleton width="250px" height="15px" animated round></nut-skeleton>
+</template>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/skeleton/row.vue b/packages/nutui-taro-demo/src/exhibition/pages/skeleton/row.vue
new file mode 100644
index 0000000000..1a7412ab7e
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/skeleton/row.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-skeleton width="250px" height="15px" animated row="3"> </nut-skeleton>
+</template>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/skeleton/sub.vue b/packages/nutui-taro-demo/src/exhibition/pages/skeleton/sub.vue
new file mode 100644
index 0000000000..656fbd4f28
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/skeleton/sub.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="demo-skeleton">
+    <nut-switch v-model="checked" />
+    <nut-skeleton width="250px" height="15px" title animated avatar row="3" :loading="!checked">
+      <div class="container">
+        <nut-avatar :size="50">
+          <img
+            src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
+          />
+        </nut-avatar>
+        <div class="right-content">
+          <div class="title">NutUI</div>
+          <div class="desc">
+            一套京东风格的轻量级移动端Vue组库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。
+          </div>
+        </div>
+      </div>
+    </nut-skeleton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const checked = ref(false);
+</script>
+
+<style>
+.demo-skeleton .container {
+  display: flex;
+}
+.demo-skeleton .right-content {
+  margin-left: 19px;
+  font-family: PingFangSC;
+  display: flex;
+  flex-direction: column;
+}
+.demo-skeleton .title {
+  font-size: 14px;
+  color: rgba(51, 51, 51, 1);
+}
+.demo-skeleton .desc {
+  margin-top: 10px;
+  font-size: 13px;
+  color: rgba(154, 155, 157, 1);
+}
+</style>
diff --git a/src/packages/__VUE/skeleton/demo.vue b/src/packages/__VUE/skeleton/demo.vue
deleted file mode 100644
index 6aadeb9492..0000000000
--- a/src/packages/__VUE/skeleton/demo.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-  <view class="demo">
-    <h2>{{ translate('basic') }}</h2>
-
-    <nut-skeleton width="250px" height="15px" animated> </nut-skeleton>
-
-    <h2>{{ translate('title') }}</h2>
-
-    <nut-skeleton width="250px" height="15px" title animated row="3"> </nut-skeleton>
-
-    <h2>{{ translate('title1') }}</h2>
-    <nut-skeleton width="250px" height="15px" title animated avatar avatar-size="60px" row="3"> </nut-skeleton>
-
-    <h2>{{ translate('title2') }}</h2>
-    <nut-skeleton width="250px" height="15px" animated round></nut-skeleton>
-
-    <h2>{{ translate('title3') }}</h2>
-
-    <div class="pic-compose">
-      <nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton>
-      <nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton>
-    </div>
-
-    <h2>{{ translate('title4') }}</h2>
-
-    <view class="content">
-      <nut-switch v-model="checked" />
-
-      <nut-skeleton width="250px" height="15px" title animated avatar row="3" :loading="!checked">
-        <view class="container">
-          <nut-avatar size="50">
-            <img
-              src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
-            />
-          </nut-avatar>
-          <view class="right-content">
-            <view class="title">NutUI</view>
-            <view class="desc">{{ translate('desc') }}</view>
-          </view>
-        </view>
-      </nut-skeleton>
-    </view>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-const translate = useTranslate({
-  'zh-CN': {
-    basic: '基础用法',
-    title: '传入多行',
-    title1: '显示头像',
-    title2: '标题段落圆角风格',
-    title3: '图片组合',
-    title4: '显示子组件',
-    desc: '一套京东风格的轻量级移动端Vue组库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。'
-  },
-  'en-US': {
-    basic: 'Basic Usage',
-    title: 'Incoming multiline',
-    title1: 'Show Faces',
-    title2: 'Title paragraph fillet style',
-    title3: 'Picture combination',
-    title4: 'Display subcomponents',
-    desc: 'A set of JD style lightweight mobile terminal Vue group library provides rich basic components and business components to help developers quickly build mobile applications.'
-  }
-});
-
-const checked = ref(false);
-</script>
-
-<style lang="scss">
-.content {
-  margin-bottom: 20px;
-
-  .nut-switch {
-    margin: 0 16px 8px 0;
-  }
-
-  .container {
-    display: flex;
-
-    .right-content {
-      margin-left: 19px;
-      font-family: PingFangSC;
-      display: flex;
-      flex-direction: column;
-
-      .title {
-        font-size: 14px;
-        color: rgba(51, 51, 51, 1);
-      }
-
-      .desc {
-        margin-top: 10px;
-        font-size: 13px;
-        color: rgba(154, 155, 157, 1);
-      }
-    }
-  }
-}
-
-.pic-compose {
-  display: flex;
-  justify-content: space-between;
-
-  .item {
-    width: 47%;
-  }
-}
-</style>
diff --git a/src/packages/__VUE/skeleton/demo/avatar.vue b/src/packages/__VUE/skeleton/demo/avatar.vue
new file mode 100644
index 0000000000..7490495eff
--- /dev/null
+++ b/src/packages/__VUE/skeleton/demo/avatar.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-skeleton width="250px" height="15px" animated avatar avatar-size="60px" row="3"> </nut-skeleton>
+</template>
diff --git a/src/packages/__VUE/skeleton/demo/basic.vue b/src/packages/__VUE/skeleton/demo/basic.vue
new file mode 100644
index 0000000000..ed6b629bb1
--- /dev/null
+++ b/src/packages/__VUE/skeleton/demo/basic.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-skeleton width="200px" height="15px" animated></nut-skeleton>
+</template>
diff --git a/src/packages/__VUE/skeleton/demo/index.vue b/src/packages/__VUE/skeleton/demo/index.vue
new file mode 100644
index 0000000000..b3af5ae3b8
--- /dev/null
+++ b/src/packages/__VUE/skeleton/demo/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('row') }}</h2>
+    <Row />
+
+    <h2>{{ t('avatar') }}</h2>
+    <Avatar />
+
+    <h2>{{ t('round') }}</h2>
+    <Round />
+
+    <h2>{{ t('picture') }}</h2>
+    <Picture />
+
+    <h2>{{ t('sub') }}</h2>
+    <Sub />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Row from './row.vue';
+import Avatar from './avatar.vue';
+import Round from './round.vue';
+import Picture from './picture.vue';
+import Sub from './sub.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    row: '传入多行',
+    avatar: '显示头像',
+    round: '标题段落圆角风格',
+    picture: '图片组合',
+    sub: '显示子组件'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    row: 'Multi lines',
+    avatar: 'Show Avatar',
+    round: 'Round Style',
+    picture: 'Picture combination',
+    sub: 'Display sub-component'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/skeleton/demo/picture.vue b/src/packages/__VUE/skeleton/demo/picture.vue
new file mode 100644
index 0000000000..4603c739b0
--- /dev/null
+++ b/src/packages/__VUE/skeleton/demo/picture.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="skeleton-picture">
+    <nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton>
+    <nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton>
+  </div>
+</template>
+<style>
+.skeleton-picture {
+  display: flex;
+  justify-content: space-between;
+  .item {
+    width: 47%;
+  }
+}
+</style>
diff --git a/src/packages/__VUE/skeleton/demo/round.vue b/src/packages/__VUE/skeleton/demo/round.vue
new file mode 100644
index 0000000000..c55163d397
--- /dev/null
+++ b/src/packages/__VUE/skeleton/demo/round.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-skeleton width="250px" height="15px" animated round></nut-skeleton>
+</template>
diff --git a/src/packages/__VUE/skeleton/demo/row.vue b/src/packages/__VUE/skeleton/demo/row.vue
new file mode 100644
index 0000000000..1a7412ab7e
--- /dev/null
+++ b/src/packages/__VUE/skeleton/demo/row.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-skeleton width="250px" height="15px" animated row="3"> </nut-skeleton>
+</template>
diff --git a/src/packages/__VUE/skeleton/demo/sub.vue b/src/packages/__VUE/skeleton/demo/sub.vue
new file mode 100644
index 0000000000..656fbd4f28
--- /dev/null
+++ b/src/packages/__VUE/skeleton/demo/sub.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="demo-skeleton">
+    <nut-switch v-model="checked" />
+    <nut-skeleton width="250px" height="15px" title animated avatar row="3" :loading="!checked">
+      <div class="container">
+        <nut-avatar :size="50">
+          <img
+            src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
+          />
+        </nut-avatar>
+        <div class="right-content">
+          <div class="title">NutUI</div>
+          <div class="desc">
+            一套京东风格的轻量级移动端Vue组库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。
+          </div>
+        </div>
+      </div>
+    </nut-skeleton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const checked = ref(false);
+</script>
+
+<style>
+.demo-skeleton .container {
+  display: flex;
+}
+.demo-skeleton .right-content {
+  margin-left: 19px;
+  font-family: PingFangSC;
+  display: flex;
+  flex-direction: column;
+}
+.demo-skeleton .title {
+  font-size: 14px;
+  color: rgba(51, 51, 51, 1);
+}
+.demo-skeleton .desc {
+  margin-top: 10px;
+  font-size: 13px;
+  color: rgba(154, 155, 157, 1);
+}
+</style>
diff --git a/src/packages/__VUE/skeleton/doc.en-US.md b/src/packages/__VUE/skeleton/doc.en-US.md
index 25bc976c94..d62e0de739 100644
--- a/src/packages/__VUE/skeleton/doc.en-US.md
+++ b/src/packages/__VUE/skeleton/doc.en-US.md
@@ -16,134 +16,27 @@ app.use(Skeleton);
 
 ### Basic usage
 
-:::demo
+> demo: skeleton basic
 
-```vue
-<template>
-  <nut-skeleton width="250px" height="15px" animated> </nut-skeleton>
-</template>
-```
-
-:::
-
-### Incoming multiline
+### Multi-lines
 
-:::demo
-
-```vue
-<template>
-  <nut-skeleton width="250px" height="15px" title animated row="3"> </nut-skeleton>
-</template>
-```
+> demo: skeleton row
 
-:::
-
-### Show Faces
-
-:::demo
-
-```vue
-<template>
-  <nut-skeleton width="250px" height="15px" title animated avatar avatarSize="60px" row="3"> </nut-skeleton>
-</template>
-```
+### Show Avatar
 
-:::
+> demo: skeleton avatar
 
-### Title paragraph fillet style
+### Round Style
 
-:::demo
-
-```vue
-<template>
-  <nut-skeleton width="250px" height="15px" animated round></nut-skeleton>
-</template>
-```
-
-:::
+> demo: skeleton round
 
 ### Picture combination
 
-:::demo
-
-```vue
-<template>
-  <div class="pic-compose">
-    <nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton>
-    <nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton>
-  </div>
-</template>
-<style>
-.pic-compose {
-  display: flex;
-  justify-content: space-between;
-}
-.item {
-  width: 47%;
-}
-</style>
-```
-
-:::
+> demo: skeleton picture
 
 ### Display subcomponents
 
-:::demo
-
-```vue
-<template>
-  <div class="content">
-    <nut-switch v-model="checked" />
-    <nut-skeleton width="250px" height="15px" title animated avatar row="3" :loading="!checked">
-      <div class="container">
-        <nut-avatar size="50">
-          <img
-            src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
-          />
-        </nut-avatar>
-      <div class="right-content">
-        <div class="title">NutUI</div>
-        <div class="desc"
-            >A set of JD style lightweight mobile terminal Vue group library provides rich basic components and business components to help developers quickly build mobile applications.
-        </div>
-      </div>
-    </nut-skeleton>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const checked = ref(false);
-</script>
-
-<style>
-  .nut-switch {
-    display: flex;
-    margin: 0 16px 8px 0;
-  }
-  .container {
-    display: flex;
-  }
-  .right-content {
-    margin-left: 19px;
-    font-family: PingFangSC;
-    display: flex;
-    flex-direction: column;
-  }
-  .title {
-    font-size: 14px;
-    color: rgba(51, 51, 51, 1);
-  }
-  .desc {
-    margin-top: 10px;
-    font-size: 13px;
-    color: rgba(154, 155, 157, 1);
-  }
-</style>
-
-```
-
-:::
+> demo: skeleton sub
 
 ## API
 
diff --git a/src/packages/__VUE/skeleton/doc.md b/src/packages/__VUE/skeleton/doc.md
index 97d6d07f44..b4aca6b0de 100644
--- a/src/packages/__VUE/skeleton/doc.md
+++ b/src/packages/__VUE/skeleton/doc.md
@@ -16,134 +16,27 @@ app.use(Skeleton);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-skeleton width="250px" height="15px" animated> </nut-skeleton>
-</template>
-```
-
-:::
+> demo: skeleton basic
 
 ### 传入多行
 
-:::demo
-
-```vue
-<template>
-  <nut-skeleton width="250px" height="15px" title animated row="3"> </nut-skeleton>
-</template>
-```
-
-:::
+> demo: skeleton row
 
 ### 显示头像
 
-:::demo
-
-```vue
-<template>
-  <nut-skeleton width="250px" height="15px" title animated avatar avatarSize="60px" row="3"> </nut-skeleton>
-</template>
-```
-
-:::
+> demo: skeleton avatar
 
 ### 标题段落圆角风格
 
-:::demo
-
-```vue
-<template>
-  <nut-skeleton width="250px" height="15px" animated round></nut-skeleton>
-</template>
-```
-
-:::
+> demo: skeleton round
 
 ### 图片组合
 
-:::demo
-
-```vue
-<template>
-  <div class="pic-compose">
-    <nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton>
-    <nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton>
-  </div>
-</template>
-<style>
-.pic-compose {
-  display: flex;
-  justify-content: space-between;
-  .item {
-    width: 47%;
-  }
-}
-</style>
-```
-
-:::
+> demo: skeleton picture
 
 ### 显示子组件
 
-:::demo
-
-```vue
-<template>
-  <div class="content">
-    <nut-switch v-model="checked" />
-    <nut-skeleton width="250px" height="15px" title animated avatar row="3" :loading="!checked">
-      <div class="container">
-        <nut-avatar size="50">
-          <img
-            src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
-          />
-        </nut-avatar>
-        <div class="right-content">
-          <div class="title">NutUI</div>
-          <div class="desc"
-            >一套京东风格的轻量级移动端Vue组库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。</div
-          >
-        </div>
-      </div>
-    </nut-skeleton>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const checked = ref(false);
-</script>
-
-<style>
-.nut-switch {
-  display: flex;
-  margin: 0 16px 8px 0;
-}
-.container {
-  display: flex;
-}
-.right-content {
-  margin-left: 19px;
-  font-family: PingFangSC;
-  display: flex;
-  flex-direction: column;
-}
-.title {
-  font-size: 14px;
-  color: rgba(51, 51, 51, 1);
-}
-.desc {
-  margin-top: 10px;
-  font-size: 13px;
-  color: rgba(154, 155, 157, 1);
-}
-</style>
-```
-
-:::
+> demo: skeleton sub
 
 ## API
 
diff --git a/src/packages/__VUE/skeleton/doc.taro.md b/src/packages/__VUE/skeleton/doc.taro.md
index 4c2f775bc2..607d6bacde 100644
--- a/src/packages/__VUE/skeleton/doc.taro.md
+++ b/src/packages/__VUE/skeleton/doc.taro.md
@@ -16,137 +16,27 @@ app.use(Skeleton);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-skeleton width="250px" height="15px" animated> </nut-skeleton>
-</template>
-```
-
-:::
+> demo: skeleton basic exhibition
 
 ### 传入多行
 
-:::demo
-
-```vue
-<template>
-  <nut-skeleton width="250px" height="15px" title animated row="3"> </nut-skeleton>
-</template>
-```
-
-:::
+> demo: skeleton row exhibition
 
 ### 显示头像
 
-:::demo
-
-```vue
-<template>
-  <nut-skeleton width="250px" height="15px" title animated avatar avatarSize="60px" row="3"> </nut-skeleton>
-</template>
-```
-
-:::
+> demo: skeleton avatar exhibition
 
 ### 标题段落圆角风格
 
-:::demo
-
-```vue
-<template>
-  <nut-skeleton width="250px" height="15px" animated round></nut-skeleton>
-</template>
-```
-
-:::
+> demo: skeleton round exhibition
 
 ### 图片组合
 
-:::demo
-
-```vue
-<template>
-  <div class="pic-compose">
-    <nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton>
-    <nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton>
-  </div>
-</template>
-```
-
-```css
-<style>
-.pic-compose {
-  display: flex;
-  justify-content: space-between;
-  .item {
-    width: 47%;
-  }
-}
-</style>
-```
-
-:::
+> demo: skeleton picture exhibition
 
 ### 显示子组件
 
-:::demo
-
-```vue
-<template>
-  <div class="content">
-    <nut-switch v-model="checked" />
-    <nut-skeleton width="250px" height="15px" title animated avatar row="3" :loading="!checked">
-      <div class="container">
-        <nut-avatar size="50">
-          <img
-            src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
-          />
-        </nut-avatar>
-        <div class="right-content">
-          <div class="title">NutUI</div>
-          <div class="desc"
-            >一套京东风格的轻量级移动端Vue组库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。</div
-          >
-        </div>
-      </div>
-    </nut-skeleton>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const checked = ref(false);
-</script>
-
-<style>
-.nut-switch {
-  display: flex;
-  margin: 0 16px 8px 0;
-}
-.container {
-  display: flex;
-}
-.right-content {
-  margin-left: 19px;
-  font-family: PingFangSC;
-  display: flex;
-  flex-direction: column;
-}
-.title {
-  font-size: 14px;
-  color: rgba(51, 51, 51, 1);
-}
-.desc {
-  margin-top: 10px;
-  font-size: 13px;
-  color: rgba(154, 155, 157, 1);
-}
-</style>
-```
-
-:::
+> demo: skeleton sub exhibition
 
 ## API
 
@@ -162,8 +52,8 @@ const checked = ref(false);
 | avatar-shape | 头像形状：正方形/圆形 | string | `round` |
 | avatar-size | 头像大小 | string | `50px` |
 | round | 标题/段落是否采用圆角风格 | boolean | `false` |
-| row | 设置段落行数 | string | `1` |
-| title | 是否显示段落标题 | boolean | `true` |
+| title | 是否显示段落标题（第一行显示） | boolean | `true` |
+| row | 设置段落行数（title 下方展示） | string | `1` |
 
 ### Slots