Repository: Tencent/tdesign-mobile-vue
Pull request #557 (2023-04-03 12:41:19)

fix(Skeleton): remove content attr
<!--
首先，感谢你的贡献！😄
请阅读并遵循 [TDesign 贡献指南](https://github.com/Tencent/tdesign/blob/main/docs/contributing.md)，填写以下 pull request 的信息。
PR 在维护者审核通过后会合并，谢谢！
-->

### 🤔 这个 PR 的性质是？

- [ ] 日常 bug 修复
- [ ] 新特性提交
- [ ] 文档改进
- [ ] 演示代码改进
- [ ] 组件样式/交互改进
- [ ] CI/CD 改进
- [ ] 重构
- [ ] 代码风格优化
- [ ] 测试用例
- [ ] 分支合并
- [ ] 其他

### 🔗 相关 Issue
### 相关 pr
common： https://github.com/Tencent/tdesign-common/pull/1243
<!--
1. 描述相关需求的来源，如相关的 issue 讨论链接。
-->

### 💡 需求背景和解决方案

<!--
1. 要解决的具体问题。
2. 列出最终的 API 实现和用法。
3. 涉及UI/交互变动需要有截图或 GIF。
-->

### 📝 更新日志

<!--
从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
-->

- break(Skeleton): 移除 content 属性相关
- break(Skeleton): 取消 rowCol 默认值

- [ ] 本条 PR 不需要纳入 Changelog

### ☑️ 请求合并前的自查清单

⚠️ 请自检并全部**勾选全部选项**。⚠️

- [ ] 文档已补充或无须补充
- [ ] 代码演示已提供或无须提供
- [ ] TypeScript 定义已补充或无须补充
- [ ] Changelog 已提供或无须提供


github-actions[bot]: **Size Change:** -5 B (0%) 

**Total Size:** 399 kB

| Filename | Size | Change |
| :--- | :---: | :---: |
| `./dist/tdesign.css` | 34.6 kB | +89 B (0%) |
| `./dist/tdesign.js` | 228 kB | -94 B (0%) |
| `./dist/tdesign.min.css` | 26.4 kB | +68 B (0%) |
| `./dist/tdesign.min.js` | 109 kB | -68 B (0%) |
github-actions[bot]: [<img height="96" alt="失败" src="https://user-images.githubusercontent.com/5378891/75333447-1e63a280-58c1-11ea-975d-235367fd1522.png">](https://github.com/Tencent/tdesign-mobile-vue/actions/runs/4596847501)
<!-- AUTO_PREVIEW_HOOK -->
github-actions[bot]: **Size Change:** -5 B (0%) 

**Total Size:** 399 kB

| Filename | Size | Change |
| :--- | :---: | :---: |
| `./dist/tdesign.css` | 34.6 kB | +89 B (0%) |
| `./dist/tdesign.js` | 228 kB | -94 B (0%) |
| `./dist/tdesign.min.css` | 26.4 kB | +68 B (0%) |
| `./dist/tdesign.min.js` | 109 kB | -68 B (0%) |

Patch:
diff --git a/site/styles/mobile/demo.less b/site/styles/mobile/demo.less
index 9698ecbb..a5a702ed 100644
--- a/site/styles/mobile/demo.less
+++ b/site/styles/mobile/demo.less
@@ -7,7 +7,7 @@
     font-size: 24px;
     font-weight: 700;
     line-height: 32px;
-    margin: 24px 16px 0;
+    padding: 24px 16px 0;
     color: rgba(0, 0, 0, .9);
   }
 
diff --git a/site/styles/mobile/index.less b/site/styles/mobile/index.less
index 9ae52921..65cb4e8c 100644
--- a/site/styles/mobile/index.less
+++ b/site/styles/mobile/index.less
@@ -80,7 +80,7 @@ body {
   justify-content: center;
   height: 50px;
   background-color: #fff;
-  box-shadow: @shadow-level-1;
+  // box-shadow: @shadow-level-1;
   &-title{
     font-size: 18px;
   }
diff --git a/src/_common b/src/_common
index 1ee6d5c4..f8c5776d 160000
--- a/src/_common
+++ b/src/_common
@@ -1,1 +1,1 @@
-Subproject commit 1ee6d5c472b3e1c3ff3c1e597babdd4416525e64
+Subproject commit f8c5776dab7ed17729b907f71867dbee84aa5f5e
diff --git a/src/skeleton/demos/animation.vue b/src/skeleton/demos/animation.vue
new file mode 100644
index 00000000..0c9115c0
--- /dev/null
+++ b/src/skeleton/demos/animation.vue
@@ -0,0 +1,35 @@
+<template>
+  <div v-for="(animationItem, index) in animationList" :key="index">
+    <div class="demo-section__desc">{{ animationItem.title }}</div>
+    <div class="demo-section__content">
+      <t-skeleton theme="paragraph" :animation="animationItem.value" :loading="animationItem.loading"></t-skeleton>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+const animationList = [
+  {
+    title: '渐变加载效果',
+    value: 'gradient',
+    loading: true,
+  },
+  {
+    title: '闪烁加载效果',
+    value: 'flashed',
+    loading: true,
+  },
+];
+</script>
+<style lang="less" scoped>
+.demo-section__desc {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.4);
+  margin-top: 8px;
+  line-height: 22px;
+}
+
+.demo-section__content {
+  margin-top: 16px;
+  margin-bottom: 24px;
+}
+</style>
diff --git a/src/skeleton/demos/avatar-text.vue b/src/skeleton/demos/avatar-text.vue
deleted file mode 100644
index 514149ab..00000000
--- a/src/skeleton/demos/avatar-text.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <div class="group">
-    <t-skeleton class="group-avatar" :row-col="rowColsAvater" :loading="loading"></t-skeleton>
-    <t-skeleton class="group-content" :row-col="rowColsContent" :loading="loading"></t-skeleton>
-  </div>
-</template>
-<script lang="ts" setup>
-import { toRefs, defineProps } from 'vue';
-
-const props = defineProps({
-  loading: Boolean,
-});
-
-const { loading } = toRefs(props);
-const rowColsAvater = [{ size: '48px', type: 'circle' }];
-const rowColsContent = [{ width: '50%' }, { width: '100%' }];
-</script>
-<style lang="less" scoped>
-.group {
-  display: flex;
-  margin-bottom: 16px;
-}
-
-.group-avatar {
-  margin-right: 12px;
-}
-
-.group-content {
-  width: 100%;
-}
-</style>
diff --git a/src/skeleton/demos/base.vue b/src/skeleton/demos/base.vue
deleted file mode 100644
index 890c0290..00000000
--- a/src/skeleton/demos/base.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <t-skeleton :theme="theme" :loading="loading" />
-</template>
-<script lang="ts" setup>
-import { toRefs, defineProps } from 'vue';
-
-const props = defineProps({
-  theme: String,
-  loading: Boolean,
-});
-
-const { loading } = toRefs(props);
-</script>
diff --git a/src/skeleton/demos/cell-group.vue b/src/skeleton/demos/cell-group.vue
new file mode 100644
index 00000000..1382b751
--- /dev/null
+++ b/src/skeleton/demos/cell-group.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="group">
+    <t-skeleton class="group-avatar" :row-col="rowColsAvater" loading></t-skeleton>
+    <t-skeleton class="group-content" :row-col="rowColsContent" loading></t-skeleton>
+  </div>
+
+  <div class="group">
+    <t-skeleton class="group-avatar" :row-col="rowColsImage" loading></t-skeleton>
+    <t-skeleton class="group-content" :row-col="rowColsContent" loading></t-skeleton>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const rowColsAvater = [{ size: '48px', type: 'circle' }];
+const rowColsImage = [{ size: '48px', type: 'rect' }];
+const rowColsContent = [{ width: '50%' }, { width: '100%' }];
+</script>
+
+<style lang="less" scoped>
+.group {
+  display: flex;
+  align-items: center;
+  margin-top: 16px;
+}
+
+.group-avatar {
+  margin-right: 12px;
+}
+
+.group-content {
+  width: 283px;
+}
+</style>
diff --git a/src/skeleton/demos/flashed.vue b/src/skeleton/demos/flashed.vue
deleted file mode 100644
index abf34d05..00000000
--- a/src/skeleton/demos/flashed.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <div class="group">
-    <t-skeleton class="group-avatar" :row-col="rowColsAvater" :loading="loading"></t-skeleton>
-    <t-skeleton class="group-content" animation="flashed" theme="paragraph" :loading="loading" />
-  </div>
-</template>
-<script lang="ts" setup>
-import { toRefs, defineProps } from 'vue';
-
-const props = defineProps({
-  loading: Boolean,
-});
-
-const { loading } = toRefs(props);
-const rowColsAvater = [{ size: '48px', type: 'circle' }];
-</script>
-
-<style lang="less" scoped>
-.group {
-  display: flex;
-}
-
-.group-avatar {
-  margin-right: 12px;
-}
-
-.group-content {
-  width: 100%;
-}
-</style>
diff --git a/src/skeleton/demos/gradient.vue b/src/skeleton/demos/gradient.vue
deleted file mode 100644
index 59a4b170..00000000
--- a/src/skeleton/demos/gradient.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <t-skeleton animation="gradient" theme="paragraph" :loading="loading" />
-</template>
-<script lang="ts" setup>
-import { toRefs, defineProps } from 'vue';
-
-const props = defineProps({
-  loading: Boolean,
-});
-
-const { loading } = toRefs(props);
-</script>
diff --git a/src/skeleton/demos/grid.vue b/src/skeleton/demos/grid.vue
index ce96684c..90711202 100644
--- a/src/skeleton/demos/grid.vue
+++ b/src/skeleton/demos/grid.vue
@@ -1,28 +1,21 @@
 <template>
-  <t-skeleton :row-col="grid" :loading="loading"></t-skeleton>
+  <t-skeleton :row-col="grid" :loading="true"></t-skeleton>
 </template>
 <script lang="ts" setup>
-import { toRefs, defineProps } from 'vue';
-
-const props = defineProps({
-  loading: Boolean,
-});
-
-const { loading } = toRefs(props);
 const grid = [
   [
-    { width: '48px', height: '48px' },
-    { width: '48px', height: '48px' },
-    { width: '48px', height: '48px' },
-    { width: '48px', height: '48px' },
-    { width: '48px', height: '48px' },
+    { width: '48px', height: '48px', borderRadius: '6px' },
+    { width: '48px', height: '48px', borderRadius: '6px' },
+    { width: '48px', height: '48px', borderRadius: '6px' },
+    { width: '48px', height: '48px', borderRadius: '6px' },
+    { width: '48px', height: '48px', borderRadius: '6px' },
   ],
   [
-    { width: '48px', height: '16px' },
-    { width: '48px', height: '16px' },
-    { width: '48px', height: '16px' },
-    { width: '48px', height: '16px' },
-    { width: '48px', height: '16px' },
+    { width: '48px', height: '16px', borderRadius: '3px' },
+    { width: '48px', height: '16px', borderRadius: '3px' },
+    { width: '48px', height: '16px', borderRadius: '3px' },
+    { width: '48px', height: '16px', borderRadius: '3px' },
+    { width: '48px', height: '16px', borderRadius: '3px' },
   ],
 ];
 </script>
diff --git a/src/skeleton/demos/image-group.vue b/src/skeleton/demos/image-group.vue
index 5e2bc121..58503a0e 100644
--- a/src/skeleton/demos/image-group.vue
+++ b/src/skeleton/demos/image-group.vue
@@ -1,30 +1,19 @@
 <template>
   <div class="group">
-    <t-skeleton :row-col="rowCols" class="item" :loading="loading"></t-skeleton>
-    <t-skeleton :row-col="rowCols" class="item" :loading="loading"></t-skeleton>
+    <t-skeleton :row-col="rowCols" :loading="loading"></t-skeleton>
+    <t-skeleton :row-col="rowCols" :loading="loading"></t-skeleton>
   </div>
 </template>
 <script lang="ts" setup>
-import { toRefs, defineProps } from 'vue';
+import { ref } from 'vue';
 
-const props = defineProps({
-  loading: Boolean,
-});
-
-const { loading } = toRefs(props);
-const rowCols = [
-  { height: '171px' },
-  1,
-  { width: '107px' },
-  [{ width: '93px' }, { width: '32px', marginLeft: '41px' }],
-];
+const loading = ref(true);
+const rowCols = [{ size: '163.5px', borderRadius: '12px' }, 1, { width: '61%' }];
 </script>
 <style lang="less" scoped>
 .group {
   display: flex;
   justify-content: space-between;
-  .item {
-    width: 47%;
-  }
+  margin-top: 16px;
 }
 </style>
diff --git a/src/skeleton/demos/mobile.vue b/src/skeleton/demos/mobile.vue
index e1f2ccd4..780b81d7 100644
--- a/src/skeleton/demos/mobile.vue
+++ b/src/skeleton/demos/mobile.vue
@@ -2,76 +2,33 @@
   <div class="tdesign-mobile-demo">
     <h1 class="title">Skeleton 骨架屏</h1>
     <p class="summary">当网络较慢时，在页面真实数据加载之前，给用户展示出页面的大致结构。</p>
-    <tdesign-demo-block title="01 类型"></tdesign-demo-block>
-    <tdesign-demo-block v-for="(item, index) in themeList" :key="index" :summary="item.title">
-      <div class="skeleton-demo">
-        <Base :theme="item.value" :loading="item.loading" />
-      </div>
+    <tdesign-demo-block title="01 类型" :padding="true">
+      <theme />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="宫格骨架屏">
-      <div class="skeleton-demo">
-        <Grid loading />
-      </div>
+    <tdesign-demo-block summary="单元格骨架屏" :padding="true">
+      <cellGroup />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="单元格骨架屏">
-      <div class="skeleton-demo">
-        <AvatarText loading />
-      </div>
-      <div class="skeleton-demo">
-        <PicText loading />
-      </div>
+    <tdesign-demo-block summary="宫格骨架屏" :padding="true">
+      <grid />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="图片组合骨架屏">
-      <div class="skeleton-demo">
-        <ImageGroup loading />
-      </div>
+    <tdesign-demo-block summary="图文组合骨架屏" :padding="true">
+      <imageGroup />
     </tdesign-demo-block>
-    <tdesign-demo-block title="02 动画" summary="渐变加载动画">
-      <div class="skeleton-demo">
-        <Gradient loading />
-      </div>
-    </tdesign-demo-block>
-    <tdesign-demo-block summary="闪烁加载动画">
-      <div class="skeleton-demo">
-        <Flashed loading />
-      </div>
+    <tdesign-demo-block title="02 组件动效" :padding="true">
+      <animation />
     </tdesign-demo-block>
   </div>
 </template>
 <script lang="ts" setup>
-import Base from './base.vue';
-import AvatarText from './avatar-text.vue';
-import PicText from './pic-text.vue';
-import ImageGroup from './image-group.vue';
-import Flashed from './flashed.vue';
-import Gradient from './gradient.vue';
-import Grid from './grid.vue';
-
-const themeList = [
-  {
-    title: '头像骨架屏',
-    value: 'avatar',
-    loading: true,
-  },
-  {
-    title: '图片骨架屏',
-    value: 'image',
-    loading: true,
-  },
-  {
-    title: '文本骨架屏',
-    value: 'text',
-    loading: true,
-  },
-  {
-    title: '段落骨架屏',
-    value: 'paragraph',
-    loading: true,
-  },
-];
+import theme from './theme.vue';
+import animation from './animation.vue';
+import cellGroup from './cell-group.vue';
+import grid from './grid.vue';
+import imageGroup from './image-group.vue';
 </script>
-<style scoped lang="less">
-.skeleton-demo {
-  margin: 0 16px;
+
+<style lang="less" scoped>
+.tdesign-mobile-demo {
+  background-color: #fff;
 }
 </style>
diff --git a/src/skeleton/demos/pic-text.vue b/src/skeleton/demos/pic-text.vue
deleted file mode 100644
index 74cce689..00000000
--- a/src/skeleton/demos/pic-text.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <div class="group">
-    <t-skeleton class="group-avatar" :row-col="rowColsImage" :loading="loading"></t-skeleton>
-    <t-skeleton class="group-content" :row-col="rowColsContent" :loading="loading"></t-skeleton>
-  </div>
-</template>
-<script lang="ts" setup>
-import { toRefs, defineProps } from 'vue';
-
-const props = defineProps({
-  loading: Boolean,
-});
-
-const { loading } = toRefs(props);
-const rowColsImage = [{ size: '48px', type: 'rect' }];
-const rowColsContent = [{ width: '50%' }, { width: '100%' }];
-</script>
-<style lang="less" scoped>
-.group {
-  display: flex;
-}
-
-.group-avatar {
-  margin-right: 12px;
-}
-
-.group-content {
-  width: 100%;
-}
-</style>
diff --git a/src/skeleton/demos/theme.vue b/src/skeleton/demos/theme.vue
new file mode 100644
index 00000000..8836a283
--- /dev/null
+++ b/src/skeleton/demos/theme.vue
@@ -0,0 +1,46 @@
+<template>
+  <div v-for="(themeItem, index) in themeList" :key="index">
+    <div class="demo-section__desc">{{ themeItem.title }}</div>
+    <div class="demo-section__content">
+      <t-skeleton :theme="themeItem.value" :loading="themeItem.loading"></t-skeleton>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+const themeList = [
+  {
+    title: '头像骨架屏',
+    value: 'avatar',
+    loading: true,
+  },
+  {
+    title: '图片骨架屏',
+    value: 'image',
+    loading: true,
+  },
+  {
+    title: '文本骨架屏',
+    value: 'text',
+    loading: true,
+  },
+  {
+    title: '段落骨架屏',
+    value: 'paragraph',
+    loading: true,
+  },
+];
+</script>
+
+<style lang="less" scoped>
+.demo-section__desc {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.4);
+  margin-top: 8px;
+  line-height: 22px;
+}
+
+.demo-section__content {
+  margin-top: 16px;
+  margin-bottom: 24px;
+}
+</style>
diff --git a/src/skeleton/props.ts b/src/skeleton/props.ts
index 79deb286..3c131254 100644
--- a/src/skeleton/props.ts
+++ b/src/skeleton/props.ts
@@ -8,23 +8,16 @@ import { TdSkeletonProps } from './type';
 import { PropType } from 'vue';
 
 export default {
-  /** 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为空则表示没有动画 */
+  /** 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为 'none' 则表示没有动画 */
   animation: {
     type: String as PropType<TdSkeletonProps['animation']>,
+    default: 'none' as TdSkeletonProps['animation'],
     validator(val: TdSkeletonProps['animation']): boolean {
       if (!val) return true;
-      return ['gradient', 'flashed'].includes(val!);
+      return ['gradient', 'flashed', 'none'].includes(val);
     },
   },
-  /** 加载完成的内容 */
-  content: {
-    type: [String, Function] as PropType<TdSkeletonProps['content']>,
-  },
-  /** 加载完成的内容，同 content */
-  default: {
-    type: [String, Function] as PropType<TdSkeletonProps['default']>,
-  },
-  /** 【开发中】延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 */
+  /** 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 */
   delay: {
     type: Number,
     default: 0,
@@ -34,7 +27,7 @@ export default {
     type: Boolean,
     default: true,
   },
-  /** 用于设置行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度和间距 */
+  /** 高级设置，用于自定义行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度、尺寸（圆形或方形使用）、间距、内容等 */
   rowCol: {
     type: Array as PropType<TdSkeletonProps['rowCol']>,
   },
@@ -44,7 +37,7 @@ export default {
     default: 'text' as TdSkeletonProps['theme'],
     validator(val: TdSkeletonProps['theme']): boolean {
       if (!val) return true;
-      return ['text', 'avatar', 'paragraph', 'image'].includes(val!);
+      return ['avatar', 'image', 'text', 'paragraph'].includes(val);
     },
   },
 };
diff --git a/src/skeleton/skeleton.en-US.md b/src/skeleton/skeleton.en-US.md
new file mode 100644
index 00000000..21602f5b
--- /dev/null
+++ b/src/skeleton/skeleton.en-US.md
@@ -0,0 +1,13 @@
+:: BASE_DOC ::
+
+## API
+
+### Skeleton Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+animation | String | none | options：gradient/flashed/none | N
+delay | Number | 0 | \- | N
+loading | Boolean | true | \- | N
+rowCol | Array | - | Typescript：`SkeletonRowCol` `type SkeletonRowCol = Array<Number \| SkeletonRowColObj \| Array<SkeletonRowColObj>>` `interface SkeletonRowColObj { width?: string; height?: string; size?: string; marginRight?: string; marginLeft?: string; margin?: string; content?: string \| TNode; type?: 'rect' \| 'circle' \| 'text' }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/skeleton/type.ts) | N
+theme | String | text | options：avatar/image/text/paragraph | N
diff --git a/src/skeleton/skeleton.md b/src/skeleton/skeleton.md
index 3b9ce6ac..2544d7fb 100644
--- a/src/skeleton/skeleton.md
+++ b/src/skeleton/skeleton.md
@@ -1,15 +1,12 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Skeleton Props
 
-| 名称      | 类型                     | 默认值                      | 说明                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | 必传 |
-| --------- | ------------------------ | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---- |
-| animation | String                   | -                           | 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为空则表示没有动画。可选项：gradient/flashed                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | N    |
-| content   | String / Slot / Function | -                           | 加载完成的内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | N    |
-| default   | String / Slot / Function | -                           | 加载完成的内容，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | N    |
-| delay     | Number                   | 0                           | 【开发中】延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | N    |
-| loading   | Boolean                  | true                        | 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | N    |
-| rowCol    | Array                    | [1, 1, 1, { width: '70%' }] | 用于设置行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度和间距。TS 类型：`SkeletonRowCol` `type SkeletonRowCol = Array<Number | SkeletonRowColObj | Array<SkeletonRowColObj>>` `interface SkeletonRowColObj { width?: string; height?: string; marginRight?: string; marginLeft?: string; margin?: string; }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/skeleton/type.ts) | N    |
-| theme     | String                   | text                        | 骨架图风格，有头像、图片、文本、段落等5大类。可选项：avatar/image/text/paragraph  | N    |
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+animation | String | none | 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为 'none' 则表示没有动画。可选项：gradient/flashed/none | N
+delay | Number | 0 | 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 | N
+loading | Boolean | true | 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容 | N
+rowCol | Array | - | 高级设置，用于自定义行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度、尺寸（圆形或方形使用）、间距、内容等。TS 类型：`SkeletonRowCol` `type SkeletonRowCol = Array<Number \| SkeletonRowColObj \| Array<SkeletonRowColObj>>` `interface SkeletonRowColObj { width?: string; height?: string; size?: string; marginRight?: string; marginLeft?: string; margin?: string; content?: string \| TNode; type?: 'rect' \| 'circle' \| 'text' }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/skeleton/type.ts) | N
+theme | String | text | 骨架图风格，有基础、头像组合等两大类。可选项：avatar/image/text/paragraph | N
diff --git a/src/skeleton/skeleton.vue b/src/skeleton/skeleton.vue
index f6d78f6f..1f7313e1 100644
--- a/src/skeleton/skeleton.vue
+++ b/src/skeleton/skeleton.vue
@@ -1,22 +1,17 @@
 <template>
-  <div :class="rootClasses">
-    <template v-if="showContent">
-      <t-node :content="skeletonContent" />
-    </template>
-    <template v-else>
-      <div v-if="parsedRowcols.length" :class="`${baseClass}__content`">
-        <div v-for="(row, index) of parsedRowcols" :key="`row-${index}`" :class="`${baseClass}__row`">
-          <div v-for="(col, idx) of row" :key="`col-${idx}`" :class="col.class" :style="col.style"></div>
-        </div>
+  <div v-if="loading" :class="`${name}`">
+    <template v-if="parsedRowcols.length">
+      <div v-for="(row, index) of parsedRowcols" :key="`row-${index}`" :class="`${name}__row`">
+        <div v-for="(col, idx) of row" :key="`col-${idx}`" :class="col.class" :style="col.style"></div>
       </div>
     </template>
   </div>
+  <slot v-else />
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, toRefs, watchEffect, ref, getCurrentInstance } from 'vue';
+import { defineComponent, computed, toRefs, watchEffect, ref } from 'vue';
 import isNumber from 'lodash/isNumber';
-import { renderContent, TNode } from '../shared';
 import config from '../config';
 import SkeletonProps from './props';
 import { SkeletonRowColObj } from './type';
@@ -25,33 +20,23 @@ import { ClassName, Styles } from '../common';
 const { prefix } = config;
 const name = `${prefix}-skeleton`;
 const ThemeMap = {
-  avatar: [{ type: 'circle', height: '64px', width: '64px' }],
-  image: [{ type: 'rect', height: '64px', width: '64px' }],
+  avatar: [{ type: 'circle', size: '48px' }],
+  image: [{ type: 'rect', size: '72px' }],
   text: [
-    1,
     [
       { width: '24%', height: '16px', marginRight: '16px' },
       { width: '76%', height: '16px' },
     ],
+    1,
   ],
   paragraph: [1, 1, 1, { width: '55%' }],
 };
 
 export default defineComponent({
   name,
-  components: {
-    TNode,
-  },
   props: SkeletonProps,
   setup(props) {
-    const { loading, animation } = toRefs(props);
-    const showContent = computed(() => !loading.value);
-
-    const internalInstance = getCurrentInstance();
-    const skeletonContent = computed(() => renderContent(internalInstance, 'default', 'content'));
-    const baseClass = name;
-    const rootClasses = computed(() => [`${name}`]);
-
+    const { animation } = toRefs(props);
     const rowCols = ref<any>([]);
 
     watchEffect(() => {
@@ -65,8 +50,9 @@ export default defineComponent({
     const getColItemClass = (obj: SkeletonRowColObj): ClassName => [
       `${name}__col`,
       `${name}--type-${obj.type || 'text'}`,
-      { [`${name}--animation-${animation.value}`]: animation.value },
+      `${name}--animation-${animation.value}`,
     ];
+
     const getColItemStyle = (obj: SkeletonRowColObj): Styles => {
       const styleName = [
         'width',
@@ -125,11 +111,8 @@ export default defineComponent({
     });
 
     return {
-      baseClass,
-      rootClasses,
+      name,
       parsedRowcols,
-      showContent,
-      skeletonContent,
     };
   },
 });
diff --git a/src/skeleton/style/index.js b/src/skeleton/style/index.js
index 7a8da86c..e14531eb 100644
--- a/src/skeleton/style/index.js
+++ b/src/skeleton/style/index.js
@@ -1,1 +1,1 @@
-import '../../_common/style/mobile/components/skeleton/_index.less';
+import '../../_common/style/mobile/components/skeleton/v2/_index.less';
diff --git a/src/skeleton/type.ts b/src/skeleton/type.ts
index efc6160a..3b1c0648 100644
--- a/src/skeleton/type.ts
+++ b/src/skeleton/type.ts
@@ -8,19 +8,12 @@ import { TNode } from '../common';
 
 export interface TdSkeletonProps {
   /**
-   * 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为空则表示没有动画
+   * 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为 'none' 则表示没有动画
+   * @default none
    */
-  animation?: 'gradient' | 'flashed';
+  animation?: 'gradient' | 'flashed' | 'none';
   /**
-   * 加载完成的内容
-   */
-  content?: string | TNode;
-  /**
-   * 加载完成的内容，同 content
-   */
-  default?: string | TNode;
-  /**
-   * 【开发中】延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒
+   * 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒
    * @default 0
    */
   delay?: number;
@@ -30,16 +23,18 @@ export interface TdSkeletonProps {
    */
   loading?: boolean;
   /**
-   * 用于设置行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度和间距
+   * 高级设置，用于自定义行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度、尺寸（圆形或方形使用）、间距、内容等
    */
   rowCol?: SkeletonRowCol;
   /**
    * 骨架图风格，有基础、头像组合等两大类
    * @default text
    */
-  theme?: 'text' | 'avatar' | 'paragraph' | 'image';
+  theme?: 'avatar' | 'image' | 'text' | 'paragraph';
 }
 
+export type SkeletonRowCol = Array<Number | SkeletonRowColObj | Array<SkeletonRowColObj>>;
+
 export interface SkeletonRowColObj {
   width?: string;
   height?: string;
@@ -47,7 +42,6 @@ export interface SkeletonRowColObj {
   marginRight?: string;
   marginLeft?: string;
   margin?: string;
+  content?: string | TNode;
   type?: 'rect' | 'circle' | 'text';
 }
-
-export type SkeletonRowCol = Array<Number | SkeletonRowColObj | Array<SkeletonRowColObj>>;


Test patch:
diff --git a/src/back-top/__test__/__snapshots__/demo.test.jsx.snap b/src/back-top/__test__/__snapshots__/demo.test.jsx.snap
index 19bdd722..b970abe5 100644
--- a/src/back-top/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/back-top/__test__/__snapshots__/demo.test.jsx.snap
@@ -319,38 +319,32 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
         >
           
           <div
-            class="t-skeleton__content"
+            class="t-skeleton__row"
           >
             
             <div
-              class="t-skeleton__row"
-            >
-              
-              <div
-                class="t-skeleton__col t-skeleton--type-text"
-                style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-              />
-              
-            </div>
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+              style="width: 165.5px; height: 165.5px; border-radius: 12px;"
+            />
+            
+          </div>
+          <div
+            class="t-skeleton__row"
+          >
+            
             <div
-              class="t-skeleton__row"
-            >
-              
-              <div
-                class="t-skeleton__col t-skeleton--type-text"
-              />
-              
-            </div>
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+            />
+            
+          </div>
+          <div
+            class="t-skeleton__row"
+          >
+            
             <div
-              class="t-skeleton__row"
-            >
-              
-              <div
-                class="t-skeleton__col t-skeleton--type-text"
-                style="width: 100px;"
-              />
-              
-            </div>
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+              style="width: 100px;"
+            />
             
           </div>
           
@@ -361,38 +355,32 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
         >
           
           <div
-            class="t-skeleton__content"
+            class="t-skeleton__row"
           >
             
             <div
-              class="t-skeleton__row"
-            >
-              
-              <div
-                class="t-skeleton__col t-skeleton--type-text"
-                style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-              />
-              
-            </div>
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+              style="width: 165.5px; height: 165.5px; border-radius: 12px;"
+            />
+            
+          </div>
+          <div
+            class="t-skeleton__row"
+          >
+            
             <div
-              class="t-skeleton__row"
-            >
-              
-              <div
-                class="t-skeleton__col t-skeleton--type-text"
-              />
-              
-            </div>
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+            />
+            
+          </div>
+          <div
+            class="t-skeleton__row"
+          >
+            
             <div
-              class="t-skeleton__row"
-            >
-              
-              <div
-                class="t-skeleton__col t-skeleton--type-text"
-                style="width: 100px;"
-              />
-              
-            </div>
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+              style="width: 100px;"
+            />
             
           </div>
           
@@ -403,38 +391,32 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
         >
           
           <div
-            class="t-skeleton__content"
+            class="t-skeleton__row"
           >
             
             <div
-              class="t-skeleton__row"
-            >
-              
-              <div
-                class="t-skeleton__col t-skeleton--type-text"
-                style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-              />
-              
-            </div>
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+              style="width: 165.5px; height: 165.5px; border-radius: 12px;"
+            />
+            
+          </div>
+          <div
+            class="t-skeleton__row"
+          >
+            
             <div
-              class="t-skeleton__row"
-            >
-              
-              <div
-                class="t-skeleton__col t-skeleton--type-text"
-              />
-              
-            </div>
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+            />
+            
+          </div>
+          <div
+            class="t-skeleton__row"
+          >
+            
             <div
-              class="t-skeleton__row"
-            >
-              
-              <div
-                class="t-skeleton__col t-skeleton--type-text"
-                style="width: 100px;"
-              />
-              
-            </div>
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+              style="width: 100px;"
+            />
             
           </div>
           
@@ -445,38 +427,32 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
         >
           
           <div
-            class="t-skeleton__content"
+            class="t-skeleton__row"
           >
             
             <div
-              class="t-skeleton__row"
-            >
-              
-              <div
-                class="t-skeleton__col t-skeleton--type-text"
-                style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-              />
-              
-            </div>
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+              style="width: 165.5px; height: 165.5px; border-radius: 12px;"
+            />
+            
+          </div>
+          <div
+            class="t-skeleton__row"
+          >
+            
             <div
-              class="t-skeleton__row"
-            >
-              
-              <div
-                class="t-skeleton__col t-skeleton--type-text"
-              />
-              
-            </div>
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+            />
+            
+          </div>
+          <div
+            class="t-skeleton__row"
+          >
+            
             <div
-              class="t-skeleton__row"
-            >
-              
-              <div
-                class="t-skeleton__col t-skeleton--type-text"
-                style="width: 100px;"
-              />
-              
-            </div>
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+              style="width: 100px;"
+            />
             
           </div>
           
diff --git a/src/pull-down-refresh/__test__/__snapshots__/demo.test.jsx.snap b/src/pull-down-refresh/__test__/__snapshots__/demo.test.jsx.snap
index f54390eb..df68706e 100644
--- a/src/pull-down-refresh/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/pull-down-refresh/__test__/__snapshots__/demo.test.jsx.snap
@@ -134,38 +134,32 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
             >
               
               <div
-                class="t-skeleton__content"
+                class="t-skeleton__row"
               >
                 
                 <div
-                  class="t-skeleton__row"
-                >
-                  
-                  <div
-                    class="t-skeleton__col t-skeleton--type-text"
-                  />
-                  
-                </div>
+                  class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+                />
+                
+              </div>
+              <div
+                class="t-skeleton__row"
+              >
+                
                 <div
-                  class="t-skeleton__row"
-                >
-                  
-                  <div
-                    class="t-skeleton__col t-skeleton--type-text"
-                    style="width: 100px;"
-                  />
-                  
-                </div>
+                  class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+                  style="width: 100px;"
+                />
+                
+              </div>
+              <div
+                class="t-skeleton__row"
+              >
+                
                 <div
-                  class="t-skeleton__row"
-                >
-                  
-                  <div
-                    class="t-skeleton__col t-skeleton--type-text"
-                    style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-                  />
-                  
-                </div>
+                  class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+                  style="width: 165.5px; height: 165.5px; border-radius: 12px;"
+                />
                 
               </div>
               
@@ -176,38 +170,32 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
             >
               
               <div
-                class="t-skeleton__content"
+                class="t-skeleton__row"
               >
                 
                 <div
-                  class="t-skeleton__row"
-                >
-                  
-                  <div
-                    class="t-skeleton__col t-skeleton--type-text"
-                  />
-                  
-                </div>
+                  class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+                />
+                
+              </div>
+              <div
+                class="t-skeleton__row"
+              >
+                
                 <div
-                  class="t-skeleton__row"
-                >
-                  
-                  <div
-                    class="t-skeleton__col t-skeleton--type-text"
-                    style="width: 100px;"
-                  />
-                  
-                </div>
+                  class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+                  style="width: 100px;"
+                />
+                
+              </div>
+              <div
+                class="t-skeleton__row"
+              >
+                
                 <div
-                  class="t-skeleton__row"
-                >
-                  
-                  <div
-                    class="t-skeleton__col t-skeleton--type-text"
-                    style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-                  />
-                  
-                </div>
+                  class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+                  style="width: 165.5px; height: 165.5px; border-radius: 12px;"
+                />
                 
               </div>
               
diff --git a/src/skeleton/__test__/__snapshots__/demo.test.jsx.snap b/src/skeleton/__test__/__snapshots__/demo.test.jsx.snap
index e25e990e..73f9bb79 100644
--- a/src/skeleton/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/skeleton/__test__/__snapshots__/demo.test.jsx.snap
@@ -1,58 +1,236 @@
 // Vitest Snapshot v1
 
-exports[`Skeleton > Skeleton avatarTextVue demo works fine 1`] = `
+exports[`Skeleton > Skeleton animationVue demo works fine 1`] = `
 <div
-  class="group"
-  data-v-3ed9d44e=""
+  data-v-app=""
 >
+  
   <div
-    class="t-skeleton group-avatar"
-    data-v-3ed9d44e=""
+    data-v-5431dabc=""
   >
-    <!---->
+    <div
+      class="demo-section__desc"
+      data-v-5431dabc=""
+    >
+      渐变加载效果
+    </div>
+    <div
+      class="demo-section__content"
+      data-v-5431dabc=""
+    >
+      <div
+        class="t-skeleton"
+        data-v-5431dabc=""
+      >
+        
+        <div
+          class="t-skeleton__row"
+        >
+          
+          <div
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-gradient"
+          />
+          
+        </div>
+        <div
+          class="t-skeleton__row"
+        >
+          
+          <div
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-gradient"
+          />
+          
+        </div>
+        <div
+          class="t-skeleton__row"
+        >
+          
+          <div
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-gradient"
+          />
+          
+        </div>
+        <div
+          class="t-skeleton__row"
+        >
+          
+          <div
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-gradient"
+            style="width: 55%;"
+          />
+          
+        </div>
+        
+      </div>
+    </div>
   </div>
   <div
-    class="t-skeleton group-content"
-    data-v-3ed9d44e=""
+    data-v-5431dabc=""
   >
-    <!---->
+    <div
+      class="demo-section__desc"
+      data-v-5431dabc=""
+    >
+      闪烁加载效果
+    </div>
+    <div
+      class="demo-section__content"
+      data-v-5431dabc=""
+    >
+      <div
+        class="t-skeleton"
+        data-v-5431dabc=""
+      >
+        
+        <div
+          class="t-skeleton__row"
+        >
+          
+          <div
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
+          />
+          
+        </div>
+        <div
+          class="t-skeleton__row"
+        >
+          
+          <div
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
+          />
+          
+        </div>
+        <div
+          class="t-skeleton__row"
+        >
+          
+          <div
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
+          />
+          
+        </div>
+        <div
+          class="t-skeleton__row"
+        >
+          
+          <div
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
+            style="width: 55%;"
+          />
+          
+        </div>
+        
+      </div>
+    </div>
   </div>
+  
 </div>
 `;
 
-exports[`Skeleton > Skeleton baseVue demo works fine 1`] = `
-<div
-  class="t-skeleton"
->
-  <!---->
-</div>
-`;
-
-exports[`Skeleton > Skeleton flashedVue demo works fine 1`] = `
+exports[`Skeleton > Skeleton cellGroupVue demo works fine 1`] = `
 <div
-  class="group"
-  data-v-51a62a47=""
+  data-v-app=""
 >
+  
   <div
-    class="t-skeleton group-avatar"
-    data-v-51a62a47=""
+    class="group"
+    data-v-b5595f68=""
   >
-    <!---->
+    <div
+      class="t-skeleton group-avatar"
+      data-v-b5595f68=""
+    >
+      
+      <div
+        class="t-skeleton__row"
+      >
+        
+        <div
+          class="t-skeleton__col t-skeleton--type-circle t-skeleton--animation-none"
+          style="width: 48px; height: 48px;"
+        />
+        
+      </div>
+      
+    </div>
+    <div
+      class="t-skeleton group-content"
+      data-v-b5595f68=""
+    >
+      
+      <div
+        class="t-skeleton__row"
+      >
+        
+        <div
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+          style="width: 50%;"
+        />
+        
+      </div>
+      <div
+        class="t-skeleton__row"
+      >
+        
+        <div
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+          style="width: 100%;"
+        />
+        
+      </div>
+      
+    </div>
   </div>
   <div
-    class="t-skeleton group-content"
-    data-v-51a62a47=""
+    class="group"
+    data-v-b5595f68=""
   >
-    <!---->
+    <div
+      class="t-skeleton group-avatar"
+      data-v-b5595f68=""
+    >
+      
+      <div
+        class="t-skeleton__row"
+      >
+        
+        <div
+          class="t-skeleton__col t-skeleton--type-rect t-skeleton--animation-none"
+          style="width: 48px; height: 48px;"
+        />
+        
+      </div>
+      
+    </div>
+    <div
+      class="t-skeleton group-content"
+      data-v-b5595f68=""
+    >
+      
+      <div
+        class="t-skeleton__row"
+      >
+        
+        <div
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+          style="width: 50%;"
+        />
+        
+      </div>
+      <div
+        class="t-skeleton__row"
+      >
+        
+        <div
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+          style="width: 100%;"
+        />
+        
+      </div>
+      
+    </div>
   </div>
-</div>
-`;
-
-exports[`Skeleton > Skeleton gradientVue demo works fine 1`] = `
-<div
-  class="t-skeleton"
->
-  <!---->
+  
 </div>
 `;
 
@@ -60,7 +238,60 @@ exports[`Skeleton > Skeleton gridVue demo works fine 1`] = `
 <div
   class="t-skeleton"
 >
-  <!---->
+  
+  <div
+    class="t-skeleton__row"
+  >
+    
+    <div
+      class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+      style="width: 48px; height: 48px; border-radius: 6px;"
+    />
+    <div
+      class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+      style="width: 48px; height: 48px; border-radius: 6px;"
+    />
+    <div
+      class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+      style="width: 48px; height: 48px; border-radius: 6px;"
+    />
+    <div
+      class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+      style="width: 48px; height: 48px; border-radius: 6px;"
+    />
+    <div
+      class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+      style="width: 48px; height: 48px; border-radius: 6px;"
+    />
+    
+  </div>
+  <div
+    class="t-skeleton__row"
+  >
+    
+    <div
+      class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+      style="width: 48px; height: 16px; border-radius: 3px;"
+    />
+    <div
+      class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+      style="width: 48px; height: 16px; border-radius: 3px;"
+    />
+    <div
+      class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+      style="width: 48px; height: 16px; border-radius: 3px;"
+    />
+    <div
+      class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+      style="width: 48px; height: 16px; border-radius: 3px;"
+    />
+    <div
+      class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+      style="width: 48px; height: 16px; border-radius: 3px;"
+    />
+    
+  </div>
+  
 </div>
 `;
 
@@ -70,16 +301,76 @@ exports[`Skeleton > Skeleton imageGroupVue demo works fine 1`] = `
   data-v-ac6b2376=""
 >
   <div
-    class="t-skeleton item"
+    class="t-skeleton"
     data-v-ac6b2376=""
   >
-    <!---->
+    
+    <div
+      class="t-skeleton__row"
+    >
+      
+      <div
+        class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+        style="width: 163.5px; height: 163.5px; border-radius: 12px;"
+      />
+      
+    </div>
+    <div
+      class="t-skeleton__row"
+    >
+      
+      <div
+        class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+      />
+      
+    </div>
+    <div
+      class="t-skeleton__row"
+    >
+      
+      <div
+        class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+        style="width: 61%;"
+      />
+      
+    </div>
+    
   </div>
   <div
-    class="t-skeleton item"
+    class="t-skeleton"
     data-v-ac6b2376=""
   >
-    <!---->
+    
+    <div
+      class="t-skeleton__row"
+    >
+      
+      <div
+        class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+        style="width: 163.5px; height: 163.5px; border-radius: 12px;"
+      />
+      
+    </div>
+    <div
+      class="t-skeleton__row"
+    >
+      
+      <div
+        class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+      />
+      
+    </div>
+    <div
+      class="t-skeleton__row"
+    >
+      
+      <div
+        class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+        style="width: 61%;"
+      />
+      
+    </div>
+    
   </div>
 </div>
 `;
@@ -116,42 +407,26 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
       <!--v-if-->
     </div>
     <div
-      class="tdesign-mobile-demo-block__slot"
+      class="tdesign-mobile-demo-block__slot with-padding"
     >
       
       
-    </div>
-  </div>
-  
-  <div
-    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
-    data-v-9b6b90cc=""
-  >
-    <div
-      class="tdesign-mobile-demo-block__header"
-    >
-      <!--v-if-->
-      <p
-        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
-      >
-        头像骨架屏
-      </p>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block__slot"
-    >
-      
       <div
-        class="skeleton-demo"
-        data-v-9b6b90cc=""
+        data-v-7e69da81=""
       >
         <div
-          class="t-skeleton"
-          data-v-9b6b90cc=""
+          class="demo-section__desc"
+          data-v-7e69da81=""
+        >
+          头像骨架屏
+        </div>
+        <div
+          class="demo-section__content"
+          data-v-7e69da81=""
         >
-          
           <div
-            class="t-skeleton__content"
+            class="t-skeleton"
+            data-v-7e69da81=""
           >
             
             <div
@@ -159,48 +434,31 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             >
               
               <div
-                class="t-skeleton__col t-skeleton--type-circle"
-                style="width: 64px; height: 64px;"
+                class="t-skeleton__col t-skeleton--type-circle t-skeleton--animation-none"
+                style="width: 48px; height: 48px;"
               />
               
             </div>
             
           </div>
-          
         </div>
       </div>
-      
-    </div>
-  </div>
-  <div
-    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
-    data-v-9b6b90cc=""
-  >
-    <div
-      class="tdesign-mobile-demo-block__header"
-    >
-      <!--v-if-->
-      <p
-        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
-      >
-        图片骨架屏
-      </p>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block__slot"
-    >
-      
       <div
-        class="skeleton-demo"
-        data-v-9b6b90cc=""
+        data-v-7e69da81=""
       >
         <div
-          class="t-skeleton"
-          data-v-9b6b90cc=""
+          class="demo-section__desc"
+          data-v-7e69da81=""
+        >
+          图片骨架屏
+        </div>
+        <div
+          class="demo-section__content"
+          data-v-7e69da81=""
         >
-          
           <div
-            class="t-skeleton__content"
+            class="t-skeleton"
+            data-v-7e69da81=""
           >
             
             <div
@@ -208,48 +466,31 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             >
               
               <div
-                class="t-skeleton__col t-skeleton--type-rect"
-                style="width: 64px; height: 64px;"
+                class="t-skeleton__col t-skeleton--type-rect t-skeleton--animation-none"
+                style="width: 72px; height: 72px;"
               />
               
             </div>
             
           </div>
-          
         </div>
       </div>
-      
-    </div>
-  </div>
-  <div
-    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
-    data-v-9b6b90cc=""
-  >
-    <div
-      class="tdesign-mobile-demo-block__header"
-    >
-      <!--v-if-->
-      <p
-        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
-      >
-        文本骨架屏
-      </p>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block__slot"
-    >
-      
       <div
-        class="skeleton-demo"
-        data-v-9b6b90cc=""
+        data-v-7e69da81=""
       >
         <div
-          class="t-skeleton"
-          data-v-9b6b90cc=""
+          class="demo-section__desc"
+          data-v-7e69da81=""
+        >
+          文本骨架屏
+        </div>
+        <div
+          class="demo-section__content"
+          data-v-7e69da81=""
         >
-          
           <div
-            class="t-skeleton__content"
+            class="t-skeleton"
+            data-v-7e69da81=""
           >
             
             <div
@@ -257,7 +498,12 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             >
               
               <div
-                class="t-skeleton__col t-skeleton--type-text"
+                class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+                style="width: 24%; height: 16px; margin-right: 16px;"
+              />
+              <div
+                class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+                style="width: 76%; height: 16px;"
               />
               
             </div>
@@ -266,52 +512,30 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             >
               
               <div
-                class="t-skeleton__col t-skeleton--type-text"
-                style="width: 24%; height: 16px; margin-right: 16px;"
-              />
-              <div
-                class="t-skeleton__col t-skeleton--type-text"
-                style="width: 76%; height: 16px;"
+                class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               />
               
             </div>
             
           </div>
-          
         </div>
       </div>
-      
-    </div>
-  </div>
-  <div
-    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
-    data-v-9b6b90cc=""
-  >
-    <div
-      class="tdesign-mobile-demo-block__header"
-    >
-      <!--v-if-->
-      <p
-        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
-      >
-        段落骨架屏
-      </p>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block__slot"
-    >
-      
       <div
-        class="skeleton-demo"
-        data-v-9b6b90cc=""
+        data-v-7e69da81=""
       >
         <div
-          class="t-skeleton"
-          data-v-9b6b90cc=""
+          class="demo-section__desc"
+          data-v-7e69da81=""
+        >
+          段落骨架屏
+        </div>
+        <div
+          class="demo-section__content"
+          data-v-7e69da81=""
         >
-          
           <div
-            class="t-skeleton__content"
+            class="t-skeleton"
+            data-v-7e69da81=""
           >
             
             <div
@@ -319,7 +543,7 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             >
               
               <div
-                class="t-skeleton__col t-skeleton--type-text"
+                class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               />
               
             </div>
@@ -328,7 +552,7 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             >
               
               <div
-                class="t-skeleton__col t-skeleton--type-text"
+                class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               />
               
             </div>
@@ -337,7 +561,7 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             >
               
               <div
-                class="t-skeleton__col t-skeleton--type-text"
+                class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               />
               
             </div>
@@ -346,20 +570,19 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             >
               
               <div
-                class="t-skeleton__col t-skeleton--type-text"
+                class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                 style="width: 55%;"
               />
               
             </div>
             
           </div>
-          
         </div>
       </div>
       
+      
     </div>
   </div>
-  
   <div
     class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
     data-v-9b6b90cc=""
@@ -371,83 +594,193 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
       <p
         class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
       >
-        宫格骨架屏
+        单元格骨架屏
       </p>
     </div>
     <div
-      class="tdesign-mobile-demo-block__slot"
+      class="tdesign-mobile-demo-block__slot with-padding"
     >
       
+      
       <div
-        class="skeleton-demo"
-        data-v-9b6b90cc=""
+        class="group"
+        data-v-b5595f68=""
       >
         <div
-          class="t-skeleton"
-          data-v-9b6b90cc=""
+          class="t-skeleton group-avatar"
+          data-v-b5595f68=""
         >
           
           <div
-            class="t-skeleton__content"
+            class="t-skeleton__row"
           >
             
             <div
-              class="t-skeleton__row"
-            >
-              
-              <div
-                class="t-skeleton__col t-skeleton--type-text"
-                style="width: 48px; height: 48px;"
-              />
-              <div
-                class="t-skeleton__col t-skeleton--type-text"
-                style="width: 48px; height: 48px;"
-              />
-              <div
-                class="t-skeleton__col t-skeleton--type-text"
-                style="width: 48px; height: 48px;"
-              />
-              <div
-                class="t-skeleton__col t-skeleton--type-text"
-                style="width: 48px; height: 48px;"
-              />
-              <div
-                class="t-skeleton__col t-skeleton--type-text"
-                style="width: 48px; height: 48px;"
-              />
-              
-            </div>
+              class="t-skeleton__col t-skeleton--type-circle t-skeleton--animation-none"
+              style="width: 48px; height: 48px;"
+            />
+            
+          </div>
+          
+        </div>
+        <div
+          class="t-skeleton group-content"
+          data-v-b5595f68=""
+        >
+          
+          <div
+            class="t-skeleton__row"
+          >
+            
             <div
-              class="t-skeleton__row"
-            >
-              
-              <div
-                class="t-skeleton__col t-skeleton--type-text"
-                style="width: 48px; height: 16px;"
-              />
-              <div
-                class="t-skeleton__col t-skeleton--type-text"
-                style="width: 48px; height: 16px;"
-              />
-              <div
-                class="t-skeleton__col t-skeleton--type-text"
-                style="width: 48px; height: 16px;"
-              />
-              <div
-                class="t-skeleton__col t-skeleton--type-text"
-                style="width: 48px; height: 16px;"
-              />
-              <div
-                class="t-skeleton__col t-skeleton--type-text"
-                style="width: 48px; height: 16px;"
-              />
-              
-            </div>
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+              style="width: 50%;"
+            />
+            
+          </div>
+          <div
+            class="t-skeleton__row"
+          >
+            
+            <div
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+              style="width: 100%;"
+            />
             
           </div>
           
         </div>
       </div>
+      <div
+        class="group"
+        data-v-b5595f68=""
+      >
+        <div
+          class="t-skeleton group-avatar"
+          data-v-b5595f68=""
+        >
+          
+          <div
+            class="t-skeleton__row"
+          >
+            
+            <div
+              class="t-skeleton__col t-skeleton--type-rect t-skeleton--animation-none"
+              style="width: 48px; height: 48px;"
+            />
+            
+          </div>
+          
+        </div>
+        <div
+          class="t-skeleton group-content"
+          data-v-b5595f68=""
+        >
+          
+          <div
+            class="t-skeleton__row"
+          >
+            
+            <div
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+              style="width: 50%;"
+            />
+            
+          </div>
+          <div
+            class="t-skeleton__row"
+          >
+            
+            <div
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+              style="width: 100%;"
+            />
+            
+          </div>
+          
+        </div>
+      </div>
+      
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+    data-v-9b6b90cc=""
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        宫格骨架屏
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot with-padding"
+    >
+      
+      <div
+        class="t-skeleton"
+        data-v-9b6b90cc=""
+      >
+        
+        <div
+          class="t-skeleton__row"
+        >
+          
+          <div
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+            style="width: 48px; height: 48px; border-radius: 6px;"
+          />
+          <div
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+            style="width: 48px; height: 48px; border-radius: 6px;"
+          />
+          <div
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+            style="width: 48px; height: 48px; border-radius: 6px;"
+          />
+          <div
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+            style="width: 48px; height: 48px; border-radius: 6px;"
+          />
+          <div
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+            style="width: 48px; height: 48px; border-radius: 6px;"
+          />
+          
+        </div>
+        <div
+          class="t-skeleton__row"
+        >
+          
+          <div
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+            style="width: 48px; height: 16px; border-radius: 3px;"
+          />
+          <div
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+            style="width: 48px; height: 16px; border-radius: 3px;"
+          />
+          <div
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+            style="width: 48px; height: 16px; border-radius: 3px;"
+          />
+          <div
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+            style="width: 48px; height: 16px; border-radius: 3px;"
+          />
+          <div
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+            style="width: 48px; height: 16px; border-radius: 3px;"
+          />
+          
+        </div>
+        
+      </div>
       
     </div>
   </div>
@@ -462,289 +795,89 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
       <p
         class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
       >
-        单元格骨架屏
+        图文组合骨架屏
       </p>
     </div>
     <div
-      class="tdesign-mobile-demo-block__slot"
+      class="tdesign-mobile-demo-block__slot with-padding"
     >
       
       <div
-        class="skeleton-demo"
+        class="group"
         data-v-9b6b90cc=""
+        data-v-ac6b2376=""
       >
         <div
-          class="group"
-          data-v-3ed9d44e=""
-          data-v-9b6b90cc=""
+          class="t-skeleton"
+          data-v-ac6b2376=""
         >
+          
           <div
-            class="t-skeleton group-avatar"
-            data-v-3ed9d44e=""
+            class="t-skeleton__row"
           >
             
             <div
-              class="t-skeleton__content"
-            >
-              
-              <div
-                class="t-skeleton__row"
-              >
-                
-                <div
-                  class="t-skeleton__col t-skeleton--type-circle"
-                  style="width: 48px; height: 48px;"
-                />
-                
-              </div>
-              
-            </div>
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+              style="width: 163.5px; height: 163.5px; border-radius: 12px;"
+            />
             
           </div>
           <div
-            class="t-skeleton group-content"
-            data-v-3ed9d44e=""
+            class="t-skeleton__row"
           >
             
             <div
-              class="t-skeleton__content"
-            >
-              
-              <div
-                class="t-skeleton__row"
-              >
-                
-                <div
-                  class="t-skeleton__col t-skeleton--type-text"
-                  style="width: 50%;"
-                />
-                
-              </div>
-              <div
-                class="t-skeleton__row"
-              >
-                
-                <div
-                  class="t-skeleton__col t-skeleton--type-text"
-                  style="width: 100%;"
-                />
-                
-              </div>
-              
-            </div>
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+            />
             
           </div>
-        </div>
-      </div>
-      <div
-        class="skeleton-demo"
-        data-v-9b6b90cc=""
-      >
-        <div
-          class="group"
-          data-v-58b278f0=""
-          data-v-9b6b90cc=""
-        >
           <div
-            class="t-skeleton group-avatar"
-            data-v-58b278f0=""
+            class="t-skeleton__row"
           >
             
             <div
-              class="t-skeleton__content"
-            >
-              
-              <div
-                class="t-skeleton__row"
-              >
-                
-                <div
-                  class="t-skeleton__col t-skeleton--type-rect"
-                  style="width: 48px; height: 48px;"
-                />
-                
-              </div>
-              
-            </div>
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+              style="width: 61%;"
+            />
             
           </div>
+          
+        </div>
+        <div
+          class="t-skeleton"
+          data-v-ac6b2376=""
+        >
+          
           <div
-            class="t-skeleton group-content"
-            data-v-58b278f0=""
+            class="t-skeleton__row"
           >
             
             <div
-              class="t-skeleton__content"
-            >
-              
-              <div
-                class="t-skeleton__row"
-              >
-                
-                <div
-                  class="t-skeleton__col t-skeleton--type-text"
-                  style="width: 50%;"
-                />
-                
-              </div>
-              <div
-                class="t-skeleton__row"
-              >
-                
-                <div
-                  class="t-skeleton__col t-skeleton--type-text"
-                  style="width: 100%;"
-                />
-                
-              </div>
-              
-            </div>
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+              style="width: 163.5px; height: 163.5px; border-radius: 12px;"
+            />
             
           </div>
-        </div>
-      </div>
-      
-    </div>
-  </div>
-  <div
-    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
-    data-v-9b6b90cc=""
-  >
-    <div
-      class="tdesign-mobile-demo-block__header"
-    >
-      <!--v-if-->
-      <p
-        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
-      >
-        图片组合骨架屏
-      </p>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block__slot"
-    >
-      
-      <div
-        class="skeleton-demo"
-        data-v-9b6b90cc=""
-      >
-        <div
-          class="group"
-          data-v-9b6b90cc=""
-          data-v-ac6b2376=""
-        >
           <div
-            class="t-skeleton item"
-            data-v-ac6b2376=""
+            class="t-skeleton__row"
           >
             
             <div
-              class="t-skeleton__content"
-            >
-              
-              <div
-                class="t-skeleton__row"
-              >
-                
-                <div
-                  class="t-skeleton__col t-skeleton--type-text"
-                  style="height: 171px;"
-                />
-                
-              </div>
-              <div
-                class="t-skeleton__row"
-              >
-                
-                <div
-                  class="t-skeleton__col t-skeleton--type-text"
-                />
-                
-              </div>
-              <div
-                class="t-skeleton__row"
-              >
-                
-                <div
-                  class="t-skeleton__col t-skeleton--type-text"
-                  style="width: 107px;"
-                />
-                
-              </div>
-              <div
-                class="t-skeleton__row"
-              >
-                
-                <div
-                  class="t-skeleton__col t-skeleton--type-text"
-                  style="width: 93px;"
-                />
-                <div
-                  class="t-skeleton__col t-skeleton--type-text"
-                  style="width: 32px; margin-left: 41px;"
-                />
-                
-              </div>
-              
-            </div>
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+            />
             
           </div>
           <div
-            class="t-skeleton item"
-            data-v-ac6b2376=""
+            class="t-skeleton__row"
           >
             
             <div
-              class="t-skeleton__content"
-            >
-              
-              <div
-                class="t-skeleton__row"
-              >
-                
-                <div
-                  class="t-skeleton__col t-skeleton--type-text"
-                  style="height: 171px;"
-                />
-                
-              </div>
-              <div
-                class="t-skeleton__row"
-              >
-                
-                <div
-                  class="t-skeleton__col t-skeleton--type-text"
-                />
-                
-              </div>
-              <div
-                class="t-skeleton__row"
-              >
-                
-                <div
-                  class="t-skeleton__col t-skeleton--type-text"
-                  style="width: 107px;"
-                />
-                
-              </div>
-              <div
-                class="t-skeleton__row"
-              >
-                
-                <div
-                  class="t-skeleton__col t-skeleton--type-text"
-                  style="width: 93px;"
-                />
-                <div
-                  class="t-skeleton__col t-skeleton--type-text"
-                  style="width: 32px; margin-left: 41px;"
-                />
-                
-              </div>
-              
-            </div>
+              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+              style="width: 61%;"
+            />
             
           </div>
+          
         </div>
       </div>
       
@@ -760,29 +893,31 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
       <h2
         class="tdesign-mobile-demo-block__title"
       >
-        02 动画
+        02 组件动效
       </h2>
-      <p
-        class="tdesign-mobile-demo-block__summary"
-      >
-        渐变加载动画
-      </p>
+      <!--v-if-->
     </div>
     <div
-      class="tdesign-mobile-demo-block__slot"
+      class="tdesign-mobile-demo-block__slot with-padding"
     >
       
+      
       <div
-        class="skeleton-demo"
-        data-v-9b6b90cc=""
+        data-v-5431dabc=""
       >
         <div
-          class="t-skeleton"
-          data-v-9b6b90cc=""
+          class="demo-section__desc"
+          data-v-5431dabc=""
+        >
+          渐变加载效果
+        </div>
+        <div
+          class="demo-section__content"
+          data-v-5431dabc=""
         >
-          
           <div
-            class="t-skeleton__content"
+            class="t-skeleton"
+            data-v-5431dabc=""
           >
             
             <div
@@ -824,108 +959,61 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             </div>
             
           </div>
-          
         </div>
       </div>
-      
-    </div>
-  </div>
-  <div
-    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
-    data-v-9b6b90cc=""
-  >
-    <div
-      class="tdesign-mobile-demo-block__header"
-    >
-      <!--v-if-->
-      <p
-        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
-      >
-        闪烁加载动画
-      </p>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block__slot"
-    >
-      
       <div
-        class="skeleton-demo"
-        data-v-9b6b90cc=""
+        data-v-5431dabc=""
       >
         <div
-          class="group"
-          data-v-51a62a47=""
-          data-v-9b6b90cc=""
+          class="demo-section__desc"
+          data-v-5431dabc=""
+        >
+          闪烁加载效果
+        </div>
+        <div
+          class="demo-section__content"
+          data-v-5431dabc=""
         >
           <div
-            class="t-skeleton group-avatar"
-            data-v-51a62a47=""
+            class="t-skeleton"
+            data-v-5431dabc=""
           >
             
             <div
-              class="t-skeleton__content"
+              class="t-skeleton__row"
             >
               
               <div
-                class="t-skeleton__row"
-              >
-                
-                <div
-                  class="t-skeleton__col t-skeleton--type-circle"
-                  style="width: 48px; height: 48px;"
-                />
-                
-              </div>
+                class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
+              />
               
             </div>
-            
-          </div>
-          <div
-            class="t-skeleton group-content"
-            data-v-51a62a47=""
-          >
-            
             <div
-              class="t-skeleton__content"
+              class="t-skeleton__row"
             >
               
               <div
-                class="t-skeleton__row"
-              >
-                
-                <div
-                  class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
-                />
-                
-              </div>
-              <div
-                class="t-skeleton__row"
-              >
-                
-                <div
-                  class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
-                />
-                
-              </div>
+                class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
+              />
+              
+            </div>
+            <div
+              class="t-skeleton__row"
+            >
+              
               <div
-                class="t-skeleton__row"
-              >
-                
-                <div
-                  class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
-                />
-                
-              </div>
+                class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
+              />
+              
+            </div>
+            <div
+              class="t-skeleton__row"
+            >
+              
               <div
-                class="t-skeleton__row"
-              >
-                
-                <div
-                  class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
-                  style="width: 55%;"
-                />
-                
-              </div>
+                class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
+                style="width: 55%;"
+              />
               
             </div>
             
@@ -933,27 +1021,185 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
         </div>
       </div>
       
+      
     </div>
   </div>
 </div>
 `;
 
-exports[`Skeleton > Skeleton picTextVue demo works fine 1`] = `
+exports[`Skeleton > Skeleton themeVue demo works fine 1`] = `
 <div
-  class="group"
-  data-v-58b278f0=""
+  data-v-app=""
 >
+  
+  <div
+    data-v-7e69da81=""
+  >
+    <div
+      class="demo-section__desc"
+      data-v-7e69da81=""
+    >
+      头像骨架屏
+    </div>
+    <div
+      class="demo-section__content"
+      data-v-7e69da81=""
+    >
+      <div
+        class="t-skeleton"
+        data-v-7e69da81=""
+      >
+        
+        <div
+          class="t-skeleton__row"
+        >
+          
+          <div
+            class="t-skeleton__col t-skeleton--type-circle t-skeleton--animation-none"
+            style="width: 48px; height: 48px;"
+          />
+          
+        </div>
+        
+      </div>
+    </div>
+  </div>
+  <div
+    data-v-7e69da81=""
+  >
+    <div
+      class="demo-section__desc"
+      data-v-7e69da81=""
+    >
+      图片骨架屏
+    </div>
+    <div
+      class="demo-section__content"
+      data-v-7e69da81=""
+    >
+      <div
+        class="t-skeleton"
+        data-v-7e69da81=""
+      >
+        
+        <div
+          class="t-skeleton__row"
+        >
+          
+          <div
+            class="t-skeleton__col t-skeleton--type-rect t-skeleton--animation-none"
+            style="width: 72px; height: 72px;"
+          />
+          
+        </div>
+        
+      </div>
+    </div>
+  </div>
   <div
-    class="t-skeleton group-avatar"
-    data-v-58b278f0=""
+    data-v-7e69da81=""
   >
-    <!---->
+    <div
+      class="demo-section__desc"
+      data-v-7e69da81=""
+    >
+      文本骨架屏
+    </div>
+    <div
+      class="demo-section__content"
+      data-v-7e69da81=""
+    >
+      <div
+        class="t-skeleton"
+        data-v-7e69da81=""
+      >
+        
+        <div
+          class="t-skeleton__row"
+        >
+          
+          <div
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+            style="width: 24%; height: 16px; margin-right: 16px;"
+          />
+          <div
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+            style="width: 76%; height: 16px;"
+          />
+          
+        </div>
+        <div
+          class="t-skeleton__row"
+        >
+          
+          <div
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+          />
+          
+        </div>
+        
+      </div>
+    </div>
   </div>
   <div
-    class="t-skeleton group-content"
-    data-v-58b278f0=""
+    data-v-7e69da81=""
   >
-    <!---->
+    <div
+      class="demo-section__desc"
+      data-v-7e69da81=""
+    >
+      段落骨架屏
+    </div>
+    <div
+      class="demo-section__content"
+      data-v-7e69da81=""
+    >
+      <div
+        class="t-skeleton"
+        data-v-7e69da81=""
+      >
+        
+        <div
+          class="t-skeleton__row"
+        >
+          
+          <div
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+          />
+          
+        </div>
+        <div
+          class="t-skeleton__row"
+        >
+          
+          <div
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+          />
+          
+        </div>
+        <div
+          class="t-skeleton__row"
+        >
+          
+          <div
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+          />
+          
+        </div>
+        <div
+          class="t-skeleton__row"
+        >
+          
+          <div
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
+            style="width: 55%;"
+          />
+          
+        </div>
+        
+      </div>
+    </div>
   </div>
+  
 </div>
 `;
diff --git a/src/skeleton/__test__/demo.test.jsx b/src/skeleton/__test__/demo.test.jsx
index 0304df56..ab2ebd53 100644
--- a/src/skeleton/__test__/demo.test.jsx
+++ b/src/skeleton/__test__/demo.test.jsx
@@ -3,24 +3,20 @@
  */
 
 import { mount } from '@vue/test-utils';
-import avatarTextVue from '@/skeleton/demos/avatar-text.vue';
-import baseVue from '@/skeleton/demos/base.vue';
-import flashedVue from '@/skeleton/demos/flashed.vue';
-import gradientVue from '@/skeleton/demos/gradient.vue';
+import animationVue from '@/skeleton/demos/animation.vue';
+import cellGroupVue from '@/skeleton/demos/cell-group.vue';
 import gridVue from '@/skeleton/demos/grid.vue';
 import imageGroupVue from '@/skeleton/demos/image-group.vue';
 import mobileVue from '@/skeleton/demos/mobile.vue';
-import picTextVue from '@/skeleton/demos/pic-text.vue';
+import themeVue from '@/skeleton/demos/theme.vue';
 
 const mapper = {
-  avatarTextVue,
-  baseVue,
-  flashedVue,
-  gradientVue,
+  animationVue,
+  cellGroupVue,
   gridVue,
   imageGroupVue,
   mobileVue,
-  picTextVue,
+  themeVue,
 };
 
 describe('Skeleton', () => {
diff --git a/src/skeleton/__test__/index.test.jsx b/src/skeleton/__test__/index.test.jsx
index 5bf9756c..5ede75d3 100644
--- a/src/skeleton/__test__/index.test.jsx
+++ b/src/skeleton/__test__/index.test.jsx
@@ -19,14 +19,14 @@ describe('Skeleton', () => {
       const $rows = $skeleton.findAll(`.${name}__row`);
       // 2行
       expect($rows.length).toBe(2);
-      // 第1行1列， 第2行2列
+      // 第1行2列， 第2行1列
       const firstRowCol = $rows[0].findAll(`.${name}__col`);
       const secondRowCol = $rows[1].findAll(`.${name}__col`);
-      expect(firstRowCol.length).toBe(1);
+      expect(firstRowCol.length).toBe(2);
       expect(firstRowCol[0].classes()).toContain(`${name}--type-text`);
-      expect(secondRowCol.length).toBe(2);
+      expect(firstRowCol[1].classes()).toContain(`${name}--type-text`);
+      expect(secondRowCol.length).toBe(1);
       expect(secondRowCol[0].classes()).toContain(`${name}--type-text`);
-      expect(secondRowCol[1].classes()).toContain(`${name}--type-text`);
 
       const image = 'image';
       await wrapper.setProps({
@@ -40,22 +40,13 @@ describe('Skeleton', () => {
     });
 
     it(': loading', async () => {
-      const loading = false;
       const wrapper = mount(Skeleton, {
         props: {
-          loading,
-          content: TEXT,
+          loading: true,
         },
       });
       const $skeleton = wrapper.findComponent(Skeleton);
-      // loading = false, 非加载状态, 显示加载完成的内容
-      expect($skeleton.text()).toEqual(TEXT);
-      expect($skeleton.find(`.${name}__content`).exists()).toBeFalsy();
-      await wrapper.setProps({
-        loading: true,
-      });
       // loading = true, 加载状态, 默认取 theme = 'text', 2行
-      expect($skeleton.find(`.${name}__content`).exists()).toBeTruthy();
       const $rows = $skeleton.findAll(`.${name}__row`);
       expect($rows.length).toBe(2);
     });