Repository: Tencent/tdesign-mobile-vue
Pull request #478 (2022-11-11 02:54:45)

docs(image): update image demo
#413
<!--
首先，感谢你的贡献！😄
请阅读并遵循 [TDesign 贡献指南](https://github.com/Tencent/tdesign/blob/main/docs/contributing.md)，填写以下 pull request 的信息。
PR 在维护者审核通过后会合并，谢谢！
-->

### 🤔 这个 PR 的性质是？

- [x] 演示代码改进


### 📝 更新日志

<!--
从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
-->

- docs(Image): 更新示例代码



Patch:
diff --git a/src/count-down/demos/base.vue b/src/count-down/demos/base.vue
index 3cc147ff..3a21e151 100644
--- a/src/count-down/demos/base.vue
+++ b/src/count-down/demos/base.vue
@@ -1,91 +1,121 @@
 <template>
-  <div>
-    <!-- 时分秒 -->
-    <div class="demo__box">
-      <t-countdown
-        content="ok"
-        :time="900000"
-        :auto-start="true"
-        :millisecond="false"
-        format="HH:mm:ss"
-        @change="onChange"
-        @finish="onFinish"
-      />
-      <p class="format">时分秒</p>
-    </div>
-    <!-- 带毫秒 -->
-    <div class="demo__box">
-      <t-countdown
-        content="ok"
-        :time="900123"
-        :auto-start="true"
-        :millisecond="true"
-        format="HH:mm:ss:sss"
-        @change="onChange"
-        @finish="onFinish"
-      />
-      <p class="format">带毫秒</p>
-    </div>
-    <!-- 带圆底 -->
-    <div class="demo__box t-countdown__circular-bottom">
-      <t-countdown
-        content="ok"
-        :time="1211211120000"
-        :auto-start="true"
-        :millisecond="false"
-        format="HH:mm:ss"
-        theme="round"
-        @change="onChange"
-        @finish="onFinish"
-      />
-      <p class="format">带圆底</p>
-    </div>
-    <!-- 带方形底 -->
-    <div class="demo__box t-countdown__square-bottom">
-      <t-countdown
-        content="ok"
-        :time="900000"
-        :auto-start="true"
-        :millisecond="false"
-        format="HH:mm:ss"
-        theme="square"
-        @change="onChange"
-        @finish="onFinish"
-      />
-      <p class="format">带方形底</p>
-    </div>
-    <!-- 带单位 -->
-    <div class="demo__box t-countdown__has-unit">
-      <t-countdown
-        content="ok"
-        :time="111120000"
-        :auto-start="true"
-        :millisecond="false"
-        format="DD天HH时mm分ss秒"
-        theme="square"
-        @change="onChange"
-        @finish="onFinish"
-      />
-      <p class="format">带单位</p>
-    </div>
+  <div class="tdesign-mobile-demo">
+    <h1 class="title">CountDown 倒计时</h1>
+    <p class="summary">用于实时展示倒计时数值。</p>
+    <tdesign-demo-block title="01类型" summary="动态倒计时间主要有时间数字和时分秒分割组成">
+      <!-- 时分秒 -->
+      <div class="demo__box">
+        <t-countdown
+          content="ok"
+          :time="900000"
+          :auto-start="true"
+          :millisecond="false"
+          format="HH:mm:ss"
+          @change="onChange"
+          @finish="onFinish"
+        />
+        <p class="format">时分秒</p>
+      </div>
+      <!-- 带毫秒 -->
+      <div class="demo__box">
+        <t-countdown
+          content="ok"
+          :time="900123"
+          :auto-start="true"
+          :millisecond="true"
+          format="HH:mm:ss:sss"
+          @change="onChange"
+          @finish="onFinish"
+        />
+        <p class="format">带毫秒</p>
+      </div>
+      <!-- 带圆底 -->
+      <div class="demo__box t-countdown__circular-bottom">
+        <t-countdown
+          content="ok"
+          :time="1211211120000"
+          :auto-start="true"
+          :millisecond="false"
+          format="HH:mm:ss"
+          theme="round"
+          @change="onChange"
+          @finish="onFinish"
+        />
+        <p class="format">带圆底</p>
+      </div>
+      <!-- 带方形底 -->
+      <div class="demo__box t-countdown__square-bottom">
+        <t-countdown
+          content="ok"
+          :time="900000"
+          :auto-start="true"
+          :millisecond="false"
+          format="HH:mm:ss"
+          theme="square"
+          @change="onChange"
+          @finish="onFinish"
+        />
+        <p class="format">带方形底</p>
+      </div>
+      <!-- 带单位 -->
+      <div class="demo__box t-countdown__has-unit">
+        <t-countdown
+          content="ok"
+          :time="111120000"
+          :auto-start="true"
+          :millisecond="false"
+          format="DD天HH时mm分ss秒"
+          theme="square"
+          @change="onChange"
+          @finish="onFinish"
+        />
+        <p class="format">带单位</p>
+      </div>
+      <!-- 无底色带单位 -->
+      <!-- <div class="demo__box t-countdown__has-unit2">
+        <t-countdown
+          content="ok"
+          :time="111120000"
+          :auto-start="true"
+          :millisecond="false"
+          format="DD天HH时mm分ss秒"
+          @change="onChange"
+          @finish="onFinish"
+        />
+        <p class="format">无底色带单位</p>
+      </div> -->
+    </tdesign-demo-block>
+    <tdesign-demo-block title="02规格" summary="动倒计时带方底和圆底各尺寸规格">
+      <div class="demo-count-down">
+        <demo-specs />
+      </div>
+    </tdesign-demo-block>
   </div>
 </template>
 
-<script lang="ts" setup>
-interface TimeData {
-  days: number;
-  hours: number;
-  minutes: number;
-  seconds: number;
-  milliseconds: number;
-}
+<script lang="ts">
+import { defineComponent } from 'vue';
+import specs from './specs.vue';
+import { TimeData } from '../type';
+
+export default defineComponent({
+  components: {
+    'demo-specs': specs,
+  },
+  setup() {
+    const onChange = (val: TimeData) => {
+      // console.log('onChange', val);
+    };
+    const onFinish = () => {
+      // console.log('onFinish');
+    };
 
-const onChange = (val: TimeData) => {
-  console.log('onChange', val);
-};
-const onFinish = () => {
-  console.log('onFinish');
-};
+    return {
+      onChange,
+      onFinish,
+    };
+  },
+});
 </script>
 
 <style lang="less">
diff --git a/src/count-down/demos/mobile.vue b/src/count-down/demos/mobile.vue
index 4a8027eb..3a21e151 100644
--- a/src/count-down/demos/mobile.vue
+++ b/src/count-down/demos/mobile.vue
@@ -2,20 +2,120 @@
   <div class="tdesign-mobile-demo">
     <h1 class="title">CountDown 倒计时</h1>
     <p class="summary">用于实时展示倒计时数值。</p>
-    <tdesign-demo-block title="01 类型" summary="动态倒计时间主要有时间数字和时分秒分割组成">
-      <BaseDemo />
+    <tdesign-demo-block title="01类型" summary="动态倒计时间主要有时间数字和时分秒分割组成">
+      <!-- 时分秒 -->
+      <div class="demo__box">
+        <t-countdown
+          content="ok"
+          :time="900000"
+          :auto-start="true"
+          :millisecond="false"
+          format="HH:mm:ss"
+          @change="onChange"
+          @finish="onFinish"
+        />
+        <p class="format">时分秒</p>
+      </div>
+      <!-- 带毫秒 -->
+      <div class="demo__box">
+        <t-countdown
+          content="ok"
+          :time="900123"
+          :auto-start="true"
+          :millisecond="true"
+          format="HH:mm:ss:sss"
+          @change="onChange"
+          @finish="onFinish"
+        />
+        <p class="format">带毫秒</p>
+      </div>
+      <!-- 带圆底 -->
+      <div class="demo__box t-countdown__circular-bottom">
+        <t-countdown
+          content="ok"
+          :time="1211211120000"
+          :auto-start="true"
+          :millisecond="false"
+          format="HH:mm:ss"
+          theme="round"
+          @change="onChange"
+          @finish="onFinish"
+        />
+        <p class="format">带圆底</p>
+      </div>
+      <!-- 带方形底 -->
+      <div class="demo__box t-countdown__square-bottom">
+        <t-countdown
+          content="ok"
+          :time="900000"
+          :auto-start="true"
+          :millisecond="false"
+          format="HH:mm:ss"
+          theme="square"
+          @change="onChange"
+          @finish="onFinish"
+        />
+        <p class="format">带方形底</p>
+      </div>
+      <!-- 带单位 -->
+      <div class="demo__box t-countdown__has-unit">
+        <t-countdown
+          content="ok"
+          :time="111120000"
+          :auto-start="true"
+          :millisecond="false"
+          format="DD天HH时mm分ss秒"
+          theme="square"
+          @change="onChange"
+          @finish="onFinish"
+        />
+        <p class="format">带单位</p>
+      </div>
+      <!-- 无底色带单位 -->
+      <!-- <div class="demo__box t-countdown__has-unit2">
+        <t-countdown
+          content="ok"
+          :time="111120000"
+          :auto-start="true"
+          :millisecond="false"
+          format="DD天HH时mm分ss秒"
+          @change="onChange"
+          @finish="onFinish"
+        />
+        <p class="format">无底色带单位</p>
+      </div> -->
     </tdesign-demo-block>
-    <tdesign-demo-block title="02 规格" summary="动倒计时带方底和圆底各尺寸规格">
+    <tdesign-demo-block title="02规格" summary="动倒计时带方底和圆底各尺寸规格">
       <div class="demo-count-down">
-        <SpecDemo />
+        <demo-specs />
       </div>
     </tdesign-demo-block>
   </div>
 </template>
 
-<script lang="ts" setup>
-import SpecDemo from './specs.vue';
-import BaseDemo from './base.vue';
+<script lang="ts">
+import { defineComponent } from 'vue';
+import specs from './specs.vue';
+import { TimeData } from '../type';
+
+export default defineComponent({
+  components: {
+    'demo-specs': specs,
+  },
+  setup() {
+    const onChange = (val: TimeData) => {
+      // console.log('onChange', val);
+    };
+    const onFinish = () => {
+      // console.log('onFinish');
+    };
+
+    return {
+      onChange,
+      onFinish,
+    };
+  },
+});
 </script>
 
 <style lang="less">
diff --git a/src/count-down/demos/specs.vue b/src/count-down/demos/specs.vue
index e2a01149..9029faa7 100644
--- a/src/count-down/demos/specs.vue
+++ b/src/count-down/demos/specs.vue
@@ -77,21 +77,25 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-interface TimeData {
-  days: number;
-  hours: number;
-  minutes: number;
-  seconds: number;
-  milliseconds: number;
-}
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { TimeData } from '../type';
+
+export default defineComponent({
+  setup() {
+    const onChange = (val: TimeData) => {
+      // console.log('onChange', val);
+    };
+    const onFinish = () => {
+      console.log('onFinish');
+    };
 
-const onChange = (val: TimeData) => {
-  console.log('onChange', val);
-};
-const onFinish = () => {
-  console.log('onFinish');
-};
+    return {
+      onChange,
+      onFinish,
+    };
+  },
+});
 </script>
 
 <style lang="less">
diff --git a/src/image/demos/base.vue b/src/image/demos/base.vue
deleted file mode 100644
index a01c9bb5..00000000
--- a/src/image/demos/base.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <div>
-    <div class="tdesign-demo-block">
-      <t-image class="image-container" src="https://tdesign.gtimg.com/site/upload1.png" alt="一张图片"></t-image>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({});
-</script>
-
-<style scoped>
-.image-container {
-  width: 72px;
-  height: 72px;
-}
-</style>
diff --git a/src/image/demos/crop.vue b/src/image/demos/crop.vue
new file mode 100644
index 00000000..b2485434
--- /dev/null
+++ b/src/image/demos/crop.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="image-group">
+    <div class="image-demo">
+      <t-image class="image-container" fit="cover" :src="imageSrc"></t-image>
+      <p class="image-demo-tip">裁切</p>
+    </div>
+    <div class="image-demo">
+      <t-image class="image-container" fit="contain" :src="imageSrc"></t-image>
+      <p class="image-demo-tip">适应高</p>
+    </div>
+    <div class="image-demo" style="width: 134px">
+      <t-image class="image-container" fit="fill" :src="imageSrc"></t-image>
+      <p class="image-demo-tip">拉伸</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const imageSrc = ref('https://tdesign.gtimg.com/site/upload1.png');
+</script>
+
+<style lang="less" scoped>
+.image-group {
+  display: flex;
+  padding: 0 16px;
+  flex-wrap: wrap;
+  margin-bottom: -10px;
+  .image-demo {
+    margin-bottom: 10px;
+    margin-right: 7%;
+    width: 72px;
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+    .image-container {
+      width: 100%;
+      height: 72px;
+    }
+    .image-demo-tip {
+      color: #646566;
+      font-size: 14px;
+      text-align: center;
+      white-space: nowrap;
+    }
+  }
+}
+</style>
diff --git a/src/image/demos/error.vue b/src/image/demos/error.vue
deleted file mode 100644
index 8e511e4f..00000000
--- a/src/image/demos/error.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div class="image-group">
-    <div class="image-demo">
-      <t-image class="image-container" src="x"></t-image>
-      <p class="image-demo-tip">默认提示</p>
-    </div>
-    <div class="image-demo">
-      <t-image lazy class="image-container" src="x">
-        <template #error>
-          <div class="error-text-tip">加载失败</div>
-        </template>
-      </t-image>
-      <p class="image-demo-tip">自定义提示</p>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({});
-</script>
diff --git a/src/image/demos/fit.vue b/src/image/demos/fit.vue
deleted file mode 100644
index bb48dfe2..00000000
--- a/src/image/demos/fit.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div>
-    <t-image class="image-container" src="https://tdesign.gtimg.com/site/upload1.png" fit="fill"></t-image>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({});
-</script>
-
-<style scoped>
-.image-container {
-  width: 72px;
-  height: 72px;
-}
-</style>
diff --git a/src/image/demos/lazy.vue b/src/image/demos/lazy.vue
deleted file mode 100644
index 4d525fe9..00000000
--- a/src/image/demos/lazy.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div>
-    <t-image class="image-container" src="https://tdesign.gtimg.com/site/upload1.png" lazy></t-image>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({});
-</script>
-
-<style scoped>
-.image-container {
-  width: 72px;
-  height: 72px;
-}
-</style>
diff --git a/src/image/demos/loading-error.vue b/src/image/demos/loading-error.vue
new file mode 100644
index 00000000..441bf73c
--- /dev/null
+++ b/src/image/demos/loading-error.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="image-group">
+    <div class="image-demo">
+      <t-image class="image-container" src="x"></t-image>
+      <p class="image-demo-tip">默认提示</p>
+    </div>
+    <div class="image-demo">
+      <t-image lazy class="image-container" src="x">
+        <template #error>
+          <div class="error-text-tip">加载失败</div>
+        </template>
+      </t-image>
+      <p class="image-demo-tip">自定义提示</p>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.image-group {
+  display: flex;
+  padding: 0 16px;
+  flex-wrap: wrap;
+  margin-bottom: -10px;
+  .image-demo {
+    margin-bottom: 10px;
+    margin-right: 7%;
+    width: 72px;
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+    .image-container {
+      width: 100%;
+      height: 72px;
+      .error-text-tip {
+        font-size: 12px;
+      }
+    }
+    .image-demo-tip {
+      color: #646566;
+      font-size: 14px;
+      text-align: center;
+      white-space: nowrap;
+    }
+  }
+}
+</style>
diff --git a/src/image/demos/loading-tip.vue b/src/image/demos/loading-tip.vue
new file mode 100644
index 00000000..17eef9b4
--- /dev/null
+++ b/src/image/demos/loading-tip.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="image-group">
+    <div class="image-demo">
+      <t-image class="image-container"></t-image>
+      <p class="image-demo-tip">默认提示</p>
+    </div>
+    <div class="image-demo">
+      <t-image class="image-container">
+        <template #loading>
+          <t-icon-loading />
+        </template>
+      </t-image>
+      <p class="image-demo-tip">自定义提示</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { LoadingIcon as TIconLoading } from 'tdesign-icons-vue-next';
+</script>
+
+<style lang="less" scoped>
+.image-group {
+  display: flex;
+  padding: 0 16px;
+  flex-wrap: wrap;
+  margin-bottom: -10px;
+  .image-demo {
+    margin-bottom: 10px;
+    margin-right: 7%;
+    width: 72px;
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+    .image-container {
+      width: 100%;
+      height: 72px;
+    }
+    .image-demo-tip {
+      color: #646566;
+      font-size: 14px;
+      text-align: center;
+      white-space: nowrap;
+    }
+  }
+}
+</style>
diff --git a/src/image/demos/loading.vue b/src/image/demos/loading.vue
deleted file mode 100644
index 68f112dc..00000000
--- a/src/image/demos/loading.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div class="image-group">
-    <div class="image-demo">
-      <t-image class="image-container"></t-image>
-      <p class="image-demo-tip">默认提示</p>
-    </div>
-    <div class="image-demo">
-      <t-image class="image-container">
-        <template #loading>
-          <t-icon-loading />
-        </template>
-      </t-image>
-      <p class="image-demo-tip">自定义提示</p>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({});
-</script>
diff --git a/src/image/demos/mobile.vue b/src/image/demos/mobile.vue
index 1111b233..4234046c 100644
--- a/src/image/demos/mobile.vue
+++ b/src/image/demos/mobile.vue
@@ -2,136 +2,26 @@
   <div class="tdesign-mobile-demo">
     <h1 class="title">Image 图片</h1>
     <p class="summary">用于展示效果，主要为上下左右居中裁切、拉伸、平铺等方式。</p>
-    <tdesign-demo-block title="01 基本类型" summary="图片样式可为圆形、圆角方形、方形">
-      <div class="image-group">
-        <div class="image-demo">
-          <t-image class="image-container" alt="一张图片" :src="imageSrc" shape="circle"></t-image>
-        </div>
-        <div class="image-demo">
-          <t-image class="image-container" :src="imageSrc" shape="round"></t-image>
-        </div>
-        <div class="image-demo">
-          <t-image class="image-container" :src="imageSrc" shape="square"></t-image>
-        </div>
-      </div>
+    <tdesign-demo-block title="01 类型" summary="裁切样式">
+      <CropDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block title="02 填充方式" summary="可以个性化设置图片的填充模式和填充位置">
-      <div class="image-group">
-        <div class="image-demo">
-          <t-image class="image-container" fit="contain" :src="imageSrc"></t-image>
-          <p class="image-demo-tip">自适应宽高</p>
-        </div>
-        <div class="image-demo">
-          <t-image class="image-container" fit="cover" :src="imageSrc"></t-image>
-          <p class="image-demo-tip">裁剪</p>
-        </div>
-        <div class="image-demo" style="width: 150px">
-          <t-image class="image-container" fit="fill" :src="imageSrc"></t-image>
-          <p class="image-demo-tip">拉伸</p>
-        </div>
-        <div class="image-demo">
-          <t-image class="image-container" fit="contain" position="center top" :src="imageSrc"></t-image>
-          <p class="image-demo-tip">center top</p>
-        </div>
-        <div class="image-demo">
-          <t-image class="image-container" fit="contain" position="0px 5px" :src="imageSrc"></t-image>
-          <p class="image-demo-tip">0px 10px</p>
-        </div>
-        <div class="image-demo">
-          <t-image class="image-container" fit="contain" position="50%" :src="imageSrc"></t-image>
-          <p class="image-demo-tip">50%</p>
-        </div>
-      </div>
+    <tdesign-demo-block summary="圆角样式">
+      <RoundedDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block title="03 图片状态" summary="加载中提示">
-      <div class="image-group">
-        <div class="image-demo">
-          <t-image class="image-container"></t-image>
-          <p class="image-demo-tip">默认提示</p>
-        </div>
-        <div class="image-demo">
-          <t-image class="image-container">
-            <template #loading>
-              <t-icon-loading />
-            </template>
-          </t-image>
-          <p class="image-demo-tip">自定义提示</p>
-        </div>
-      </div>
+    <tdesign-demo-block title="02 状态" summary="加载中提示">
+      <LoadingTipDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block title="" summary="加载失败提示">
-      <div class="image-group">
-        <div class="image-demo">
-          <t-image class="image-container" src="x"></t-image>
-          <p class="image-demo-tip">默认提示</p>
-        </div>
-        <div class="image-demo">
-          <t-image lazy class="image-container" src="x">
-            <template #error>
-              <div class="error-text-tip">加载失败</div>
-            </template>
-          </t-image>
-          <p class="image-demo-tip">自定义提示</p>
-        </div>
-      </div>
-    </tdesign-demo-block>
-    <tdesign-demo-block title="04 懒加载" summary="通过设置lazy属性，实现图片懒加载">
-      <div class="image-group">
-        <div class="image-demo">
-          <t-image class="image-container" lazy :src="imageSrc"></t-image>
-          <p class="image-demo-tip">懒加载图片</p>
-        </div>
-      </div>
+    <tdesign-demo-block summary="加载失败提示">
+      <LoadingErrorDemo />
     </tdesign-demo-block>
+    <tdesign-demo-block title="03 规格" summary="常用图片尺寸"> <SizeDemo /> </tdesign-demo-block>
   </div>
 </template>
 
-<script lang="ts">
-import { ref, defineComponent } from 'vue';
-import { LoadingIcon as TIconLoading } from 'tdesign-icons-vue-next';
-
-export default defineComponent({
-  components: {
-    TIconLoading,
-  },
-  setup() {
-    return {
-      imageSrc: 'https://tdesign.gtimg.com/site/upload1.png',
-    };
-  },
-  data() {
-    return {};
-  },
-  methods: {},
-});
+<script lang="ts" setup>
+import CropDemo from './crop.vue';
+import RoundedDemo from './rounded.vue';
+import LoadingTipDemo from './loading-tip.vue';
+import LoadingErrorDemo from './loading-error.vue';
+import SizeDemo from './size.vue';
 </script>
-
-<style lang="less" scoped>
-.image-group {
-  display: flex;
-  padding: 0 16px;
-  flex-wrap: wrap;
-  margin-bottom: -10px;
-  .image-demo {
-    margin-bottom: 10px;
-    margin-right: 7%;
-    width: 72px;
-    &:nth-child(3n) {
-      margin-right: 0;
-    }
-    .image-container {
-      width: 100%;
-      height: 72px;
-      .error-text-tip {
-        font-size: 12px;
-      }
-    }
-    .image-demo-tip {
-      color: #646566;
-      font-size: 14px;
-      text-align: center;
-      white-space: nowrap;
-    }
-  }
-}
-</style>
diff --git a/src/image/demos/position.vue b/src/image/demos/position.vue
deleted file mode 100644
index 67786a38..00000000
--- a/src/image/demos/position.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <div>
-    <t-image
-      class="image-container"
-      src="https://tdesign.gtimg.com/site/upload1.png"
-      fit="contain"
-      position="left top"
-    ></t-image>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({});
-</script>
-
-<style scoped>
-.image-container {
-  width: 72px;
-  height: 72px;
-}
-</style>
diff --git a/src/image/demos/rounded.vue b/src/image/demos/rounded.vue
new file mode 100644
index 00000000..461eff55
--- /dev/null
+++ b/src/image/demos/rounded.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="image-group">
+    <div class="image-demo">
+      <t-image class="image-container" :src="imageSrc" shape="round"></t-image>
+      <p class="image-demo-tip">方形</p>
+    </div>
+    <div class="image-demo">
+      <t-image class="image-container" :src="imageSrc" shape="square"></t-image>
+      <p class="image-demo-tip">圆角方形</p>
+    </div>
+    <div class="image-demo">
+      <t-image class="image-container" alt="一张图片" :src="imageSrc" shape="circle"></t-image>
+      <p class="image-demo-tip">圆形</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const imageSrc = ref('https://tdesign.gtimg.com/site/upload1.png');
+</script>
+
+<style lang="less" scoped>
+.image-group {
+  display: flex;
+  padding: 0 16px;
+  flex-wrap: wrap;
+  margin-bottom: -10px;
+  .image-demo {
+    margin-bottom: 10px;
+    margin-right: 7%;
+    width: 72px;
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+    .image-container {
+      width: 100%;
+      height: 72px;
+    }
+    .image-demo-tip {
+      color: #646566;
+      font-size: 14px;
+      text-align: center;
+      white-space: nowrap;
+    }
+  }
+}
+</style>
diff --git a/src/image/demos/shape.vue b/src/image/demos/shape.vue
deleted file mode 100644
index f7097b28..00000000
--- a/src/image/demos/shape.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div>
-    <t-image class="image-container" src="https://tdesign.gtimg.com/site/upload1.png" shape="circle"></t-image>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({});
-</script>
-
-<style scoped>
-.image-container {
-  width: 72px;
-  height: 72px;
-}
-</style>
diff --git a/src/image/demos/size.vue b/src/image/demos/size.vue
new file mode 100644
index 00000000..5b4561a1
--- /dev/null
+++ b/src/image/demos/size.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="image-group">
+    <div class="image-demo">
+      <t-image class="image-container" :src="imageSrc" style="width: 56px; height: 56px"></t-image>
+      <p class="image-demo-tip">56</p>
+    </div>
+    <div class="image-demo">
+      <t-image class="image-container" :src="imageSrc" style="width: 48px; height: 48px"></t-image>
+      <p class="image-demo-tip">48</p>
+    </div>
+    <div class="image-demo">
+      <t-image class="image-container" :src="imageSrc" style="width: 32px; height: 32px"></t-image>
+      <p class="image-demo-tip">32</p>
+    </div>
+    <div class="image-demo">
+      <t-image class="image-container" :src="imageSrc" style="width: 24px; height: 24px"></t-image>
+      <p class="image-demo-tip">24</p>
+    </div>
+  </div>
+  <div class="image-group">
+    <div class="image-demo">
+      <t-image class="image-container" :src="imageSrc" style="width: 120px; height: 120px"></t-image>
+      <p class="image-demo-tip">120</p>
+    </div>
+    <div class="image-demo">
+      <t-image class="image-container" :src="imageSrc" style="width: 72px; height: 72px"></t-image>
+      <p class="image-demo-tip">72</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const imageSrc = ref('https://tdesign.gtimg.com/site/upload1.png');
+</script>
+
+<style lang="less" scoped>
+.image-group {
+  display: flex;
+  padding: 0 16px;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: flex-end;
+  .image-demo {
+    margin-bottom: 10px;
+    margin-right: 7%;
+    &:last-child {
+      margin-right: 0;
+    }
+    .image-container {
+      width: 100%;
+      height: 72px;
+    }
+    .image-demo-tip {
+      color: #646566;
+      font-size: 14px;
+      text-align: center;
+      white-space: nowrap;
+    }
+  }
+}
+</style>


Test patch:
diff --git a/src/count-down/__test__/__snapshots__/demo.test.jsx.snap b/src/count-down/__test__/__snapshots__/demo.test.jsx.snap
index 8404a8fe..1ff302c9 100644
--- a/src/count-down/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/count-down/__test__/__snapshots__/demo.test.jsx.snap
@@ -1,330 +1,357 @@
 // Vitest Snapshot v1
 
 exports[`CountDown > CountDown baseVue demo works fine 1`] = `
-<div>
-  <!-- 时分秒 -->
+<div
+  class="tdesign-mobile-demo"
+>
+  <h1
+    class="title"
+  >
+    CountDown 倒计时
+  </h1>
+  <p
+    class="summary"
+  >
+    用于实时展示倒计时数值。
+  </p>
   <div
-    class="demo__box"
+    class="tdesign-mobile-demo-block"
   >
-    
-    <!--v-if-->
-    <span
-      class="t-countdown t-countdown--default t-countdown--small"
+    <h2
+      class="tdesign-mobile-demo-block__title"
     >
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        00
-      </span>
-      <span
-        class="t-countdown__unit"
-      >
-        :
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        15
-      </span>
-      <span
-        class="t-countdown__unit"
-      >
-        :
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        00
-      </span>
-      <!--v-if-->
-      
-      
-    </span>
-    
+      01类型
+    </h2>
     <p
-      class="format"
+      class="tdesign-mobile-demo-block__summary"
     >
-      时分秒
+      动态倒计时间主要有时间数字和时分秒分割组成
     </p>
-  </div>
-  <!-- 带毫秒 -->
-  <div
-    class="demo__box"
-  >
     
-    <!--v-if-->
-    <span
-      class="t-countdown t-countdown--default t-countdown--small"
+    <!-- 时分秒 -->
+    <div
+      class="demo__box"
     >
       
-      
-      <span
-        class="t-countdown__digit"
-      >
-        00
-      </span>
-      <span
-        class="t-countdown__unit"
-      >
-        :
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        15
-      </span>
-      <span
-        class="t-countdown__unit"
-      >
-        :
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        00
-      </span>
+      <!--v-if-->
       <span
-        class="t-countdown__unit"
+        class="t-countdown t-countdown--default t-countdown--small"
       >
-        :
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          00
+        </span>
+        <span
+          class="t-countdown__unit"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          15
+        </span>
+        <span
+          class="t-countdown__unit"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          00
+        </span>
+        <!--v-if-->
+        
+        
       </span>
       
-      
-      <span
-        class="t-countdown__digit"
+      <p
+        class="format"
       >
-        123
-      </span>
-      <!--v-if-->
-      
-      
-    </span>
-    
-    <p
-      class="format"
-    >
-      带毫秒
-    </p>
-  </div>
-  <!-- 带圆底 -->
-  <div
-    class="demo__box t-countdown__circular-bottom"
-  >
-    
-    <!--v-if-->
-    <span
-      class="t-countdown t-countdown--round t-countdown--small"
+        时分秒
+      </p>
+    </div>
+    <!-- 带毫秒 -->
+    <div
+      class="demo__box"
     >
       
-      
-      <span
-        class="t-countdown__digit"
-      >
-        15
-      </span>
-      <span
-        class="t-countdown__unit"
-      >
-        :
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        32
-      </span>
+      <!--v-if-->
       <span
-        class="t-countdown__unit"
+        class="t-countdown t-countdown--default t-countdown--small"
       >
-        :
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          00
+        </span>
+        <span
+          class="t-countdown__unit"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          15
+        </span>
+        <span
+          class="t-countdown__unit"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          00
+        </span>
+        <span
+          class="t-countdown__unit"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          123
+        </span>
+        <!--v-if-->
+        
+        
       </span>
       
-      
-      <span
-        class="t-countdown__digit"
+      <p
+        class="format"
       >
-        00
-      </span>
-      <!--v-if-->
-      
-      
-    </span>
-    
-    <p
-      class="format"
-    >
-      带圆底
-    </p>
-  </div>
-  <!-- 带方形底 -->
-  <div
-    class="demo__box t-countdown__square-bottom"
-  >
-    
-    <!--v-if-->
-    <span
-      class="t-countdown t-countdown--square t-countdown--small"
+        带毫秒
+      </p>
+    </div>
+    <!-- 带圆底 -->
+    <div
+      class="demo__box t-countdown__circular-bottom"
     >
       
-      
-      <span
-        class="t-countdown__digit"
-      >
-        00
-      </span>
-      <span
-        class="t-countdown__unit"
-      >
-        :
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        15
-      </span>
+      <!--v-if-->
       <span
-        class="t-countdown__unit"
+        class="t-countdown t-countdown--round t-countdown--small"
       >
-        :
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          15
+        </span>
+        <span
+          class="t-countdown__unit"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          32
+        </span>
+        <span
+          class="t-countdown__unit"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          00
+        </span>
+        <!--v-if-->
+        
+        
       </span>
       
-      
-      <span
-        class="t-countdown__digit"
+      <p
+        class="format"
       >
-        00
-      </span>
-      <!--v-if-->
-      
-      
-    </span>
-    
-    <p
-      class="format"
-    >
-      带方形底
-    </p>
-  </div>
-  <!-- 带单位 -->
-  <div
-    class="demo__box t-countdown__has-unit"
-  >
-    
-    <!--v-if-->
-    <span
-      class="t-countdown t-countdown--square t-countdown--small t-countdown--split-with-unit"
+        带圆底
+      </p>
+    </div>
+    <!-- 带方形底 -->
+    <div
+      class="demo__box t-countdown__square-bottom"
     >
       
-      
-      <span
-        class="t-countdown__digit"
-      >
-        01
-      </span>
+      <!--v-if-->
       <span
-        class="t-countdown__unit"
+        class="t-countdown t-countdown--square t-countdown--small"
       >
-        天
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          00
+        </span>
+        <span
+          class="t-countdown__unit"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          15
+        </span>
+        <span
+          class="t-countdown__unit"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          00
+        </span>
+        <!--v-if-->
+        
+        
       </span>
       
-      
-      <span
-        class="t-countdown__digit"
-      >
-        06
-      </span>
-      <span
-        class="t-countdown__unit"
+      <p
+        class="format"
       >
-        时
-      </span>
-      
+        带方形底
+      </p>
+    </div>
+    <!-- 带单位 -->
+    <div
+      class="demo__box t-countdown__has-unit"
+    >
       
+      <!--v-if-->
       <span
-        class="t-countdown__digit"
-      >
-        52
-      </span>
-      <span
-        class="t-countdown__unit"
+        class="t-countdown t-countdown--square t-countdown--small t-countdown--split-with-unit"
       >
-        分
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          01
+        </span>
+        <span
+          class="t-countdown__unit"
+        >
+          天
+        </span>
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          06
+        </span>
+        <span
+          class="t-countdown__unit"
+        >
+          时
+        </span>
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          52
+        </span>
+        <span
+          class="t-countdown__unit"
+        >
+          分
+        </span>
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          00
+        </span>
+        <span
+          class="t-countdown__unit"
+        >
+          秒
+        </span>
+        
+        
       </span>
       
-      
-      <span
-        class="t-countdown__digit"
+      <p
+        class="format"
       >
-        00
-      </span>
-      <span
-        class="t-countdown__unit"
-      >
-        秒
-      </span>
-      
-      
-    </span>
+        带单位
+      </p>
+    </div>
+    <!-- 无底色带单位 -->
+    <!-- &lt;div class="demo__box t-countdown__has-unit2"&gt;
+        &lt;t-countdown
+          content="ok"
+          :time="111120000"
+          :auto-start="true"
+          :millisecond="false"
+          format="DD天HH时mm分ss秒"
+          @change="onChange"
+          @finish="onFinish"
+        /&gt;
+        &lt;p class="format"&gt;无底色带单位&lt;/p&gt;
+      &lt;/div&gt; -->
     
-    <p
-      class="format"
-    >
-      带单位
-    </p>
   </div>
-</div>
-`;
-
-exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
-<div
-  class="tdesign-mobile-demo"
->
-  <h1
-    class="title"
-  >
-    CountDown 倒计时
-  </h1>
-  <p
-    class="summary"
-  >
-    用于实时展示倒计时数值。
-  </p>
   <div
     class="tdesign-mobile-demo-block"
   >
     <h2
       class="tdesign-mobile-demo-block__title"
     >
-      01 类型
+      02规格
     </h2>
     <p
       class="tdesign-mobile-demo-block__summary"
     >
-      动态倒计时间主要有时间数字和时分秒分割组成
+      动倒计时带方底和圆底各尺寸规格
     </p>
     
-    <div>
-      <!-- 时分秒 -->
+    <div
+      class="demo-count-down"
+    >
+      
+      <!-- S -->
       <div
-        class="demo__box"
+        class="demo-size__box"
       >
         
         <!--v-if-->
         <span
-          class="t-countdown t-countdown--default t-countdown--small"
+          class="t-countdown t-countdown--round t-countdown--small"
         >
           
           
@@ -362,20 +389,10 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
           
         </span>
         
-        <p
-          class="format"
-        >
-          时分秒
-        </p>
-      </div>
-      <!-- 带毫秒 -->
-      <div
-        class="demo__box"
-      >
         
         <!--v-if-->
         <span
-          class="t-countdown t-countdown--default t-countdown--small"
+          class="t-countdown t-countdown--square t-countdown--small"
         >
           
           
@@ -403,6 +420,33 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
           </span>
           
           
+          <span
+            class="t-countdown__digit"
+          >
+            00
+          </span>
+          <!--v-if-->
+          
+          
+        </span>
+        
+        <p
+          class="format"
+        >
+          S
+        </p>
+      </div>
+      <!-- M -->
+      <div
+        class="demo-size__box"
+      >
+        
+        <!--v-if-->
+        <span
+          class="t-countdown t-countdown--round t-countdown--medium"
+        >
+          
+          
           <span
             class="t-countdown__digit"
           >
@@ -418,34 +462,36 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
           <span
             class="t-countdown__digit"
           >
-            123
+            15
+          </span>
+          <span
+            class="t-countdown__unit"
+          >
+            :
+          </span>
+          
+          
+          <span
+            class="t-countdown__digit"
+          >
+            00
           </span>
           <!--v-if-->
           
           
         </span>
         
-        <p
-          class="format"
-        >
-          带毫秒
-        </p>
-      </div>
-      <!-- 带圆底 -->
-      <div
-        class="demo__box t-countdown__circular-bottom"
-      >
         
         <!--v-if-->
         <span
-          class="t-countdown t-countdown--round t-countdown--small"
+          class="t-countdown t-countdown--square t-countdown--medium"
         >
           
           
           <span
             class="t-countdown__digit"
           >
-            15
+            00
           </span>
           <span
             class="t-countdown__unit"
@@ -457,7 +503,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
           <span
             class="t-countdown__digit"
           >
-            32
+            15
           </span>
           <span
             class="t-countdown__unit"
@@ -479,17 +525,17 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
         <p
           class="format"
         >
-          带圆底
+          M
         </p>
       </div>
-      <!-- 带方形底 -->
+      <!-- L -->
       <div
-        class="demo__box t-countdown__square-bottom"
+        class="demo-size__box"
       >
         
         <!--v-if-->
         <span
-          class="t-countdown t-countdown--square t-countdown--small"
+          class="t-countdown t-countdown--round t-countdown--large"
         >
           
           
@@ -527,56 +573,34 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
           
         </span>
         
-        <p
-          class="format"
-        >
-          带方形底
-        </p>
-      </div>
-      <!-- 带单位 -->
-      <div
-        class="demo__box t-countdown__has-unit"
-      >
         
         <!--v-if-->
         <span
-          class="t-countdown t-countdown--square t-countdown--small t-countdown--split-with-unit"
+          class="t-countdown t-countdown--square t-countdown--large"
         >
           
           
           <span
             class="t-countdown__digit"
           >
-            01
-          </span>
-          <span
-            class="t-countdown__unit"
-          >
-            天
-          </span>
-          
-          
-          <span
-            class="t-countdown__digit"
-          >
-            06
+            00
           </span>
           <span
             class="t-countdown__unit"
           >
-            时
+            :
           </span>
           
           
           <span
             class="t-countdown__digit"
           >
-            52
+            15
           </span>
           <span
             class="t-countdown__unit"
           >
-            分
+            :
           </span>
           
           
@@ -585,11 +609,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
           >
             00
           </span>
-          <span
-            class="t-countdown__unit"
-          >
-            秒
-          </span>
+          <!--v-if-->
           
           
         </span>
@@ -597,10 +617,340 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
         <p
           class="format"
         >
-          带单位
+          L
         </p>
       </div>
+      
+    </div>
+    
+  </div>
+</div>
+`;
+
+exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
+<div
+  class="tdesign-mobile-demo"
+>
+  <h1
+    class="title"
+  >
+    CountDown 倒计时
+  </h1>
+  <p
+    class="summary"
+  >
+    用于实时展示倒计时数值。
+  </p>
+  <div
+    class="tdesign-mobile-demo-block"
+  >
+    <h2
+      class="tdesign-mobile-demo-block__title"
+    >
+      01类型
+    </h2>
+    <p
+      class="tdesign-mobile-demo-block__summary"
+    >
+      动态倒计时间主要有时间数字和时分秒分割组成
+    </p>
+    
+    <!-- 时分秒 -->
+    <div
+      class="demo__box"
+    >
+      
+      <!--v-if-->
+      <span
+        class="t-countdown t-countdown--default t-countdown--small"
+      >
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          00
+        </span>
+        <span
+          class="t-countdown__unit"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          15
+        </span>
+        <span
+          class="t-countdown__unit"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          00
+        </span>
+        <!--v-if-->
+        
+        
+      </span>
+      
+      <p
+        class="format"
+      >
+        时分秒
+      </p>
+    </div>
+    <!-- 带毫秒 -->
+    <div
+      class="demo__box"
+    >
+      
+      <!--v-if-->
+      <span
+        class="t-countdown t-countdown--default t-countdown--small"
+      >
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          00
+        </span>
+        <span
+          class="t-countdown__unit"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          15
+        </span>
+        <span
+          class="t-countdown__unit"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          00
+        </span>
+        <span
+          class="t-countdown__unit"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          123
+        </span>
+        <!--v-if-->
+        
+        
+      </span>
+      
+      <p
+        class="format"
+      >
+        带毫秒
+      </p>
+    </div>
+    <!-- 带圆底 -->
+    <div
+      class="demo__box t-countdown__circular-bottom"
+    >
+      
+      <!--v-if-->
+      <span
+        class="t-countdown t-countdown--round t-countdown--small"
+      >
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          15
+        </span>
+        <span
+          class="t-countdown__unit"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          32
+        </span>
+        <span
+          class="t-countdown__unit"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          00
+        </span>
+        <!--v-if-->
+        
+        
+      </span>
+      
+      <p
+        class="format"
+      >
+        带圆底
+      </p>
+    </div>
+    <!-- 带方形底 -->
+    <div
+      class="demo__box t-countdown__square-bottom"
+    >
+      
+      <!--v-if-->
+      <span
+        class="t-countdown t-countdown--square t-countdown--small"
+      >
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          00
+        </span>
+        <span
+          class="t-countdown__unit"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          15
+        </span>
+        <span
+          class="t-countdown__unit"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          00
+        </span>
+        <!--v-if-->
+        
+        
+      </span>
+      
+      <p
+        class="format"
+      >
+        带方形底
+      </p>
+    </div>
+    <!-- 带单位 -->
+    <div
+      class="demo__box t-countdown__has-unit"
+    >
+      
+      <!--v-if-->
+      <span
+        class="t-countdown t-countdown--square t-countdown--small t-countdown--split-with-unit"
+      >
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          01
+        </span>
+        <span
+          class="t-countdown__unit"
+        >
+          天
+        </span>
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          06
+        </span>
+        <span
+          class="t-countdown__unit"
+        >
+          时
+        </span>
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          52
+        </span>
+        <span
+          class="t-countdown__unit"
+        >
+          分
+        </span>
+        
+        
+        <span
+          class="t-countdown__digit"
+        >
+          00
+        </span>
+        <span
+          class="t-countdown__unit"
+        >
+          秒
+        </span>
+        
+        
+      </span>
+      
+      <p
+        class="format"
+      >
+        带单位
+      </p>
     </div>
+    <!-- 无底色带单位 -->
+    <!-- &lt;div class="demo__box t-countdown__has-unit2"&gt;
+        &lt;t-countdown
+          content="ok"
+          :time="111120000"
+          :auto-start="true"
+          :millisecond="false"
+          format="DD天HH时mm分ss秒"
+          @change="onChange"
+          @finish="onFinish"
+        /&gt;
+        &lt;p class="format"&gt;无底色带单位&lt;/p&gt;
+      &lt;/div&gt; -->
     
   </div>
   <div
@@ -609,7 +959,7 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
     <h2
       class="tdesign-mobile-demo-block__title"
     >
-      02 规格
+      02规格
     </h2>
     <p
       class="tdesign-mobile-demo-block__summary"
diff --git a/src/image/__test__/__snapshots__/demo.test.jsx.snap b/src/image/__test__/__snapshots__/demo.test.jsx.snap
index 6bd52f4c..bd67511b 100644
--- a/src/image/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/image/__test__/__snapshots__/demo.test.jsx.snap
@@ -1,16 +1,17 @@
 // Vitest Snapshot v1
 
-exports[`Image > Image baseVue demo works fine 1`] = `
+exports[`Image > Image cropVue demo works fine 1`] = `
 <div
-  data-v-37d8259d=""
+  class="image-group"
+  data-v-1ccae1dc=""
 >
   <div
-    class="tdesign-demo-block"
-    data-v-37d8259d=""
+    class="image-demo"
+    data-v-1ccae1dc=""
   >
     <div
       class="t-image t-image--round image-container"
-      data-v-37d8259d=""
+      data-v-1ccae1dc=""
     >
       <div
         class="t-image__status"
@@ -30,25 +31,26 @@ exports[`Image > Image baseVue demo works fine 1`] = `
         </svg>
       </div>
       <img
-        alt="一张图片"
+        alt=""
         class="t-image__img"
         src="https://tdesign.gtimg.com/site/upload1.png"
-        style="object-fit: fill; object-position: center;"
+        style="object-fit: cover; object-position: center;"
       />
     </div>
+    <p
+      class="image-demo-tip"
+      data-v-1ccae1dc=""
+    >
+      裁切
+    </p>
   </div>
-</div>
-`;
-
-exports[`Image > Image errorVue demo works fine 1`] = `
-<div
-  class="image-group"
->
   <div
     class="image-demo"
+    data-v-1ccae1dc=""
   >
     <div
       class="t-image t-image--round image-container"
+      data-v-1ccae1dc=""
     >
       <div
         class="t-image__status"
@@ -70,21 +72,25 @@ exports[`Image > Image errorVue demo works fine 1`] = `
       <img
         alt=""
         class="t-image__img"
-        src="x"
-        style="object-fit: fill; object-position: center;"
+        src="https://tdesign.gtimg.com/site/upload1.png"
+        style="object-fit: contain; object-position: center;"
       />
     </div>
     <p
       class="image-demo-tip"
+      data-v-1ccae1dc=""
     >
-      默认提示
+      适应高
     </p>
   </div>
   <div
     class="image-demo"
+    data-v-1ccae1dc=""
+    style="width: 134px;"
   >
     <div
       class="t-image t-image--round image-container"
+      data-v-1ccae1dc=""
     >
       <div
         class="t-image__status"
@@ -106,98 +112,118 @@ exports[`Image > Image errorVue demo works fine 1`] = `
       <img
         alt=""
         class="t-image__img"
-        src=""
+        src="https://tdesign.gtimg.com/site/upload1.png"
         style="object-fit: fill; object-position: center;"
       />
     </div>
     <p
       class="image-demo-tip"
+      data-v-1ccae1dc=""
     >
-      自定义提示
+      拉伸
     </p>
   </div>
 </div>
 `;
 
-exports[`Image > Image fitVue demo works fine 1`] = `
+exports[`Image > Image loadingErrorVue demo works fine 1`] = `
 <div
-  data-v-77a82af5=""
+  class="image-group"
+  data-v-0c83771b=""
 >
   <div
-    class="t-image t-image--round image-container"
-    data-v-77a82af5=""
+    class="image-demo"
+    data-v-0c83771b=""
   >
     <div
-      class="t-image__status"
-    >
-      <svg
-        class="t-icon t-icon-ellipsis"
-        fill="none"
-        height="1em"
-        viewBox="0 0 16 16"
-        width="1em"
-      >
-        <path
-          d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
-          fill="currentColor"
-          fill-opacity="0.9"
-        />
-      </svg>
+      class="t-image t-image--round image-container"
+      data-v-0c83771b=""
+    >
+      <div
+        class="t-image__status"
+      >
+        <svg
+          class="t-icon t-icon-ellipsis"
+          fill="none"
+          height="1em"
+          viewBox="0 0 16 16"
+          width="1em"
+        >
+          <path
+            d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+            fill="currentColor"
+            fill-opacity="0.9"
+          />
+        </svg>
+      </div>
+      <img
+        alt=""
+        class="t-image__img"
+        src="x"
+        style="object-fit: fill; object-position: center;"
+      />
     </div>
-    <img
-      alt=""
-      class="t-image__img"
-      src="https://tdesign.gtimg.com/site/upload1.png"
-      style="object-fit: fill; object-position: center;"
-    />
+    <p
+      class="image-demo-tip"
+      data-v-0c83771b=""
+    >
+      默认提示
+    </p>
   </div>
-</div>
-`;
-
-exports[`Image > Image lazyVue demo works fine 1`] = `
-<div
-  data-v-53afa8c0=""
->
   <div
-    class="t-image t-image--round image-container"
-    data-v-53afa8c0=""
+    class="image-demo"
+    data-v-0c83771b=""
   >
     <div
-      class="t-image__status"
-    >
-      <svg
-        class="t-icon t-icon-ellipsis"
-        fill="none"
-        height="1em"
-        viewBox="0 0 16 16"
-        width="1em"
-      >
-        <path
-          d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
-          fill="currentColor"
-          fill-opacity="0.9"
-        />
-      </svg>
+      class="t-image t-image--round image-container"
+      data-v-0c83771b=""
+    >
+      <div
+        class="t-image__status"
+      >
+        <svg
+          class="t-icon t-icon-ellipsis"
+          fill="none"
+          height="1em"
+          viewBox="0 0 16 16"
+          width="1em"
+        >
+          <path
+            d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+            fill="currentColor"
+            fill-opacity="0.9"
+          />
+        </svg>
+      </div>
+      <img
+        alt=""
+        class="t-image__img"
+        src=""
+        style="object-fit: fill; object-position: center;"
+      />
     </div>
-    <img
-      alt=""
-      class="t-image__img"
-      src=""
-      style="object-fit: fill; object-position: center;"
-    />
+    <p
+      class="image-demo-tip"
+      data-v-0c83771b=""
+    >
+      自定义提示
+    </p>
   </div>
 </div>
 `;
 
-exports[`Image > Image loadingVue demo works fine 1`] = `
+exports[`Image > Image loadingTipVue demo works fine 1`] = `
 <div
   class="image-group"
+  data-v-be9b7224=""
 >
   <div
     class="image-demo"
+    data-v-be9b7224=""
   >
     <div
       class="t-image t-image--round image-container"
+      data-v-be9b7224=""
     >
       <div
         class="t-image__status"
@@ -225,21 +251,37 @@ exports[`Image > Image loadingVue demo works fine 1`] = `
     </div>
     <p
       class="image-demo-tip"
+      data-v-be9b7224=""
     >
       默认提示
     </p>
   </div>
   <div
     class="image-demo"
+    data-v-be9b7224=""
   >
     <div
       class="t-image t-image--round image-container"
+      data-v-be9b7224=""
     >
       <div
         class="t-image__status"
       >
         
-        <t-icon-loading />
+        <svg
+          class="t-icon t-icon-loading"
+          data-v-be9b7224=""
+          fill="none"
+          height="1em"
+          viewBox="0 0 16 16"
+          width="1em"
+        >
+          <path
+            d="M8 1.5a6.5 6.5 0 000 13v-1.63A4.87 4.87 0 1112.88 8h1.62A6.5 6.5 0 008 1.5z"
+            fill="currentColor"
+            fill-opacity="0.9"
+          />
+        </svg>
         
       </div>
       <img
@@ -251,6 +293,7 @@ exports[`Image > Image loadingVue demo works fine 1`] = `
     </div>
     <p
       class="image-demo-tip"
+      data-v-be9b7224=""
     >
       自定义提示
     </p>
@@ -261,46 +304,42 @@ exports[`Image > Image loadingVue demo works fine 1`] = `
 exports[`Image > Image mobileVue demo works fine 1`] = `
 <div
   class="tdesign-mobile-demo"
-  data-v-d8a5fc24=""
 >
   <h1
     class="title"
-    data-v-d8a5fc24=""
   >
     Image 图片
   </h1>
   <p
     class="summary"
-    data-v-d8a5fc24=""
   >
     用于展示效果，主要为上下左右居中裁切、拉伸、平铺等方式。
   </p>
   <div
     class="tdesign-mobile-demo-block"
-    data-v-d8a5fc24=""
   >
     <h2
       class="tdesign-mobile-demo-block__title"
     >
-      01 基本类型
+      01 类型
     </h2>
     <p
       class="tdesign-mobile-demo-block__summary"
     >
-      图片样式可为圆形、圆角方形、方形
+      裁切样式
     </p>
     
     <div
       class="image-group"
-      data-v-d8a5fc24=""
+      data-v-1ccae1dc=""
     >
       <div
         class="image-demo"
-        data-v-d8a5fc24=""
+        data-v-1ccae1dc=""
       >
         <div
-          class="t-image t-image--circle image-container"
-          data-v-d8a5fc24=""
+          class="t-image t-image--round image-container"
+          data-v-1ccae1dc=""
         >
           <div
             class="t-image__status"
@@ -320,20 +359,26 @@ exports[`Image > Image mobileVue demo works fine 1`] = `
             </svg>
           </div>
           <img
-            alt="一张图片"
+            alt=""
             class="t-image__img"
             src="https://tdesign.gtimg.com/site/upload1.png"
-            style="object-fit: fill; object-position: center;"
+            style="object-fit: cover; object-position: center;"
           />
         </div>
+        <p
+          class="image-demo-tip"
+          data-v-1ccae1dc=""
+        >
+          裁切
+        </p>
       </div>
       <div
         class="image-demo"
-        data-v-d8a5fc24=""
+        data-v-1ccae1dc=""
       >
         <div
           class="t-image t-image--round image-container"
-          data-v-d8a5fc24=""
+          data-v-1ccae1dc=""
         >
           <div
             class="t-image__status"
@@ -356,17 +401,24 @@ exports[`Image > Image mobileVue demo works fine 1`] = `
             alt=""
             class="t-image__img"
             src="https://tdesign.gtimg.com/site/upload1.png"
-            style="object-fit: fill; object-position: center;"
+            style="object-fit: contain; object-position: center;"
           />
         </div>
+        <p
+          class="image-demo-tip"
+          data-v-1ccae1dc=""
+        >
+          适应高
+        </p>
       </div>
       <div
         class="image-demo"
-        data-v-d8a5fc24=""
+        data-v-1ccae1dc=""
+        style="width: 134px;"
       >
         <div
-          class="t-image t-image--square image-container"
-          data-v-d8a5fc24=""
+          class="t-image t-image--round image-container"
+          data-v-1ccae1dc=""
         >
           <div
             class="t-image__status"
@@ -392,36 +444,37 @@ exports[`Image > Image mobileVue demo works fine 1`] = `
             style="object-fit: fill; object-position: center;"
           />
         </div>
+        <p
+          class="image-demo-tip"
+          data-v-1ccae1dc=""
+        >
+          拉伸
+        </p>
       </div>
     </div>
     
   </div>
   <div
     class="tdesign-mobile-demo-block"
-    data-v-d8a5fc24=""
   >
-    <h2
-      class="tdesign-mobile-demo-block__title"
-    >
-      02 填充方式
-    </h2>
+    <!--v-if-->
     <p
       class="tdesign-mobile-demo-block__summary"
     >
-      可以个性化设置图片的填充模式和填充位置
+      圆角样式
     </p>
     
     <div
       class="image-group"
-      data-v-d8a5fc24=""
+      data-v-2e8b3d91=""
     >
       <div
         class="image-demo"
-        data-v-d8a5fc24=""
+        data-v-2e8b3d91=""
       >
         <div
           class="t-image t-image--round image-container"
-          data-v-d8a5fc24=""
+          data-v-2e8b3d91=""
         >
           <div
             class="t-image__status"
@@ -444,23 +497,23 @@ exports[`Image > Image mobileVue demo works fine 1`] = `
             alt=""
             class="t-image__img"
             src="https://tdesign.gtimg.com/site/upload1.png"
-            style="object-fit: contain; object-position: center;"
+            style="object-fit: fill; object-position: center;"
           />
         </div>
         <p
           class="image-demo-tip"
-          data-v-d8a5fc24=""
+          data-v-2e8b3d91=""
         >
-          自适应宽高
+          方形
         </p>
       </div>
       <div
         class="image-demo"
-        data-v-d8a5fc24=""
+        data-v-2e8b3d91=""
       >
         <div
-          class="t-image t-image--round image-container"
-          data-v-d8a5fc24=""
+          class="t-image t-image--square image-container"
+          data-v-2e8b3d91=""
         >
           <div
             class="t-image__status"
@@ -483,24 +536,23 @@ exports[`Image > Image mobileVue demo works fine 1`] = `
             alt=""
             class="t-image__img"
             src="https://tdesign.gtimg.com/site/upload1.png"
-            style="object-fit: cover; object-position: center;"
+            style="object-fit: fill; object-position: center;"
           />
         </div>
         <p
           class="image-demo-tip"
-          data-v-d8a5fc24=""
+          data-v-2e8b3d91=""
         >
-          裁剪
+          圆角方形
         </p>
       </div>
       <div
         class="image-demo"
-        data-v-d8a5fc24=""
-        style="width: 150px;"
+        data-v-2e8b3d91=""
       >
         <div
-          class="t-image t-image--round image-container"
-          data-v-d8a5fc24=""
+          class="t-image t-image--circle image-container"
+          data-v-2e8b3d91=""
         >
           <div
             class="t-image__status"
@@ -520,7 +572,7 @@ exports[`Image > Image mobileVue demo works fine 1`] = `
             </svg>
           </div>
           <img
-            alt=""
+            alt="一张图片"
             class="t-image__img"
             src="https://tdesign.gtimg.com/site/upload1.png"
             style="object-fit: fill; object-position: center;"
@@ -528,18 +580,39 @@ exports[`Image > Image mobileVue demo works fine 1`] = `
         </div>
         <p
           class="image-demo-tip"
-          data-v-d8a5fc24=""
+          data-v-2e8b3d91=""
         >
-          拉伸
+          圆形
         </p>
       </div>
+    </div>
+    
+  </div>
+  <div
+    class="tdesign-mobile-demo-block"
+  >
+    <h2
+      class="tdesign-mobile-demo-block__title"
+    >
+      02 状态
+    </h2>
+    <p
+      class="tdesign-mobile-demo-block__summary"
+    >
+      加载中提示
+    </p>
+    
+    <div
+      class="image-group"
+      data-v-be9b7224=""
+    >
       <div
         class="image-demo"
-        data-v-d8a5fc24=""
+        data-v-be9b7224=""
       >
         <div
           class="t-image t-image--round image-container"
-          data-v-d8a5fc24=""
+          data-v-be9b7224=""
         >
           <div
             class="t-image__status"
@@ -561,24 +634,83 @@ exports[`Image > Image mobileVue demo works fine 1`] = `
           <img
             alt=""
             class="t-image__img"
-            src="https://tdesign.gtimg.com/site/upload1.png"
-            style="object-fit: contain; object-position: center top;"
+            src=""
+            style="object-fit: fill; object-position: center;"
+          />
+        </div>
+        <p
+          class="image-demo-tip"
+          data-v-be9b7224=""
+        >
+          默认提示
+        </p>
+      </div>
+      <div
+        class="image-demo"
+        data-v-be9b7224=""
+      >
+        <div
+          class="t-image t-image--round image-container"
+          data-v-be9b7224=""
+        >
+          <div
+            class="t-image__status"
+          >
+            
+            <svg
+              class="t-icon t-icon-loading"
+              data-v-be9b7224=""
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M8 1.5a6.5 6.5 0 000 13v-1.63A4.87 4.87 0 1112.88 8h1.62A6.5 6.5 0 008 1.5z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+            
+          </div>
+          <img
+            alt=""
+            class="t-image__img"
+            src=""
+            style="object-fit: fill; object-position: center;"
           />
         </div>
         <p
           class="image-demo-tip"
-          data-v-d8a5fc24=""
+          data-v-be9b7224=""
         >
-          center top
+          自定义提示
         </p>
       </div>
+    </div>
+    
+  </div>
+  <div
+    class="tdesign-mobile-demo-block"
+  >
+    <!--v-if-->
+    <p
+      class="tdesign-mobile-demo-block__summary"
+    >
+      加载失败提示
+    </p>
+    
+    <div
+      class="image-group"
+      data-v-0c83771b=""
+    >
       <div
         class="image-demo"
-        data-v-d8a5fc24=""
+        data-v-0c83771b=""
       >
         <div
           class="t-image t-image--round image-container"
-          data-v-d8a5fc24=""
+          data-v-0c83771b=""
         >
           <div
             class="t-image__status"
@@ -600,24 +732,24 @@ exports[`Image > Image mobileVue demo works fine 1`] = `
           <img
             alt=""
             class="t-image__img"
-            src="https://tdesign.gtimg.com/site/upload1.png"
-            style="object-fit: contain; object-position: 0px 5px;"
+            src="x"
+            style="object-fit: fill; object-position: center;"
           />
         </div>
         <p
           class="image-demo-tip"
-          data-v-d8a5fc24=""
+          data-v-0c83771b=""
         >
-          0px 10px
+          默认提示
         </p>
       </div>
       <div
         class="image-demo"
-        data-v-d8a5fc24=""
+        data-v-0c83771b=""
       >
         <div
           class="t-image t-image--round image-container"
-          data-v-d8a5fc24=""
+          data-v-0c83771b=""
         >
           <div
             class="t-image__status"
@@ -639,15 +771,15 @@ exports[`Image > Image mobileVue demo works fine 1`] = `
           <img
             alt=""
             class="t-image__img"
-            src="https://tdesign.gtimg.com/site/upload1.png"
-            style="object-fit: contain; object-position: 50%;"
+            src=""
+            style="object-fit: fill; object-position: center;"
           />
         </div>
         <p
           class="image-demo-tip"
-          data-v-d8a5fc24=""
+          data-v-0c83771b=""
         >
-          50%
+          自定义提示
         </p>
       </div>
     </div>
@@ -655,30 +787,31 @@ exports[`Image > Image mobileVue demo works fine 1`] = `
   </div>
   <div
     class="tdesign-mobile-demo-block"
-    data-v-d8a5fc24=""
   >
     <h2
       class="tdesign-mobile-demo-block__title"
     >
-      03 图片状态
+      03 规格
     </h2>
     <p
       class="tdesign-mobile-demo-block__summary"
     >
-      加载中提示
+      常用图片尺寸
     </p>
     
+    
     <div
       class="image-group"
-      data-v-d8a5fc24=""
+      data-v-5e203266=""
     >
       <div
         class="image-demo"
-        data-v-d8a5fc24=""
+        data-v-5e203266=""
       >
         <div
           class="t-image t-image--round image-container"
-          data-v-d8a5fc24=""
+          data-v-5e203266=""
+          style="width: 56px; height: 56px;"
         >
           <div
             class="t-image__status"
@@ -700,84 +833,65 @@ exports[`Image > Image mobileVue demo works fine 1`] = `
           <img
             alt=""
             class="t-image__img"
-            src=""
+            src="https://tdesign.gtimg.com/site/upload1.png"
             style="object-fit: fill; object-position: center;"
           />
         </div>
         <p
           class="image-demo-tip"
-          data-v-d8a5fc24=""
+          data-v-5e203266=""
         >
-          默认提示
+          56
         </p>
       </div>
       <div
         class="image-demo"
-        data-v-d8a5fc24=""
+        data-v-5e203266=""
       >
         <div
           class="t-image t-image--round image-container"
-          data-v-d8a5fc24=""
+          data-v-5e203266=""
+          style="width: 48px; height: 48px;"
         >
           <div
             class="t-image__status"
           >
-            
             <svg
-              class="t-icon t-icon-loading"
-              data-v-d8a5fc24=""
+              class="t-icon t-icon-ellipsis"
               fill="none"
               height="1em"
               viewBox="0 0 16 16"
               width="1em"
             >
               <path
-                d="M8 1.5a6.5 6.5 0 000 13v-1.63A4.87 4.87 0 1112.88 8h1.62A6.5 6.5 0 008 1.5z"
+                d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
                 fill="currentColor"
                 fill-opacity="0.9"
               />
             </svg>
-            
           </div>
           <img
             alt=""
             class="t-image__img"
-            src=""
+            src="https://tdesign.gtimg.com/site/upload1.png"
             style="object-fit: fill; object-position: center;"
           />
         </div>
         <p
           class="image-demo-tip"
-          data-v-d8a5fc24=""
+          data-v-5e203266=""
         >
-          自定义提示
+          48
         </p>
       </div>
-    </div>
-    
-  </div>
-  <div
-    class="tdesign-mobile-demo-block"
-    data-v-d8a5fc24=""
-  >
-    <!--v-if-->
-    <p
-      class="tdesign-mobile-demo-block__summary"
-    >
-      加载失败提示
-    </p>
-    
-    <div
-      class="image-group"
-      data-v-d8a5fc24=""
-    >
       <div
         class="image-demo"
-        data-v-d8a5fc24=""
+        data-v-5e203266=""
       >
         <div
           class="t-image t-image--round image-container"
-          data-v-d8a5fc24=""
+          data-v-5e203266=""
+          style="width: 32px; height: 32px;"
         >
           <div
             class="t-image__status"
@@ -799,24 +913,25 @@ exports[`Image > Image mobileVue demo works fine 1`] = `
           <img
             alt=""
             class="t-image__img"
-            src="x"
+            src="https://tdesign.gtimg.com/site/upload1.png"
             style="object-fit: fill; object-position: center;"
           />
         </div>
         <p
           class="image-demo-tip"
-          data-v-d8a5fc24=""
+          data-v-5e203266=""
         >
-          默认提示
+          32
         </p>
       </div>
       <div
         class="image-demo"
-        data-v-d8a5fc24=""
+        data-v-5e203266=""
       >
         <div
           class="t-image t-image--round image-container"
-          data-v-d8a5fc24=""
+          data-v-5e203266=""
+          style="width: 24px; height: 24px;"
         >
           <div
             class="t-image__status"
@@ -838,46 +953,30 @@ exports[`Image > Image mobileVue demo works fine 1`] = `
           <img
             alt=""
             class="t-image__img"
-            src=""
+            src="https://tdesign.gtimg.com/site/upload1.png"
             style="object-fit: fill; object-position: center;"
           />
         </div>
         <p
           class="image-demo-tip"
-          data-v-d8a5fc24=""
+          data-v-5e203266=""
         >
-          自定义提示
+          24
         </p>
       </div>
     </div>
-    
-  </div>
-  <div
-    class="tdesign-mobile-demo-block"
-    data-v-d8a5fc24=""
-  >
-    <h2
-      class="tdesign-mobile-demo-block__title"
-    >
-      04 懒加载
-    </h2>
-    <p
-      class="tdesign-mobile-demo-block__summary"
-    >
-      通过设置lazy属性，实现图片懒加载
-    </p>
-    
     <div
       class="image-group"
-      data-v-d8a5fc24=""
+      data-v-5e203266=""
     >
       <div
         class="image-demo"
-        data-v-d8a5fc24=""
+        data-v-5e203266=""
       >
         <div
           class="t-image t-image--round image-container"
-          data-v-d8a5fc24=""
+          data-v-5e203266=""
+          style="width: 120px; height: 120px;"
         >
           <div
             class="t-image__status"
@@ -899,89 +998,444 @@ exports[`Image > Image mobileVue demo works fine 1`] = `
           <img
             alt=""
             class="t-image__img"
-            src=""
+            src="https://tdesign.gtimg.com/site/upload1.png"
+            style="object-fit: fill; object-position: center;"
+          />
+        </div>
+        <p
+          class="image-demo-tip"
+          data-v-5e203266=""
+        >
+          120
+        </p>
+      </div>
+      <div
+        class="image-demo"
+        data-v-5e203266=""
+      >
+        <div
+          class="t-image t-image--round image-container"
+          data-v-5e203266=""
+          style="width: 72px; height: 72px;"
+        >
+          <div
+            class="t-image__status"
+          >
+            <svg
+              class="t-icon t-icon-ellipsis"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </div>
+          <img
+            alt=""
+            class="t-image__img"
+            src="https://tdesign.gtimg.com/site/upload1.png"
             style="object-fit: fill; object-position: center;"
           />
         </div>
         <p
           class="image-demo-tip"
-          data-v-d8a5fc24=""
+          data-v-5e203266=""
         >
-          懒加载图片
+          72
         </p>
       </div>
     </div>
     
+    
   </div>
 </div>
 `;
 
-exports[`Image > Image positionVue demo works fine 1`] = `
+exports[`Image > Image roundedVue demo works fine 1`] = `
 <div
-  data-v-2d6651f5=""
+  class="image-group"
+  data-v-2e8b3d91=""
 >
   <div
-    class="t-image t-image--round image-container"
-    data-v-2d6651f5=""
+    class="image-demo"
+    data-v-2e8b3d91=""
   >
     <div
-      class="t-image__status"
-    >
-      <svg
-        class="t-icon t-icon-ellipsis"
-        fill="none"
-        height="1em"
-        viewBox="0 0 16 16"
-        width="1em"
-      >
-        <path
-          d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
-          fill="currentColor"
-          fill-opacity="0.9"
-        />
-      </svg>
+      class="t-image t-image--round image-container"
+      data-v-2e8b3d91=""
+    >
+      <div
+        class="t-image__status"
+      >
+        <svg
+          class="t-icon t-icon-ellipsis"
+          fill="none"
+          height="1em"
+          viewBox="0 0 16 16"
+          width="1em"
+        >
+          <path
+            d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+            fill="currentColor"
+            fill-opacity="0.9"
+          />
+        </svg>
+      </div>
+      <img
+        alt=""
+        class="t-image__img"
+        src="https://tdesign.gtimg.com/site/upload1.png"
+        style="object-fit: fill; object-position: center;"
+      />
     </div>
-    <img
-      alt=""
-      class="t-image__img"
-      src="https://tdesign.gtimg.com/site/upload1.png"
-      style="object-fit: contain; object-position: left top;"
-    />
+    <p
+      class="image-demo-tip"
+      data-v-2e8b3d91=""
+    >
+      方形
+    </p>
+  </div>
+  <div
+    class="image-demo"
+    data-v-2e8b3d91=""
+  >
+    <div
+      class="t-image t-image--square image-container"
+      data-v-2e8b3d91=""
+    >
+      <div
+        class="t-image__status"
+      >
+        <svg
+          class="t-icon t-icon-ellipsis"
+          fill="none"
+          height="1em"
+          viewBox="0 0 16 16"
+          width="1em"
+        >
+          <path
+            d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+            fill="currentColor"
+            fill-opacity="0.9"
+          />
+        </svg>
+      </div>
+      <img
+        alt=""
+        class="t-image__img"
+        src="https://tdesign.gtimg.com/site/upload1.png"
+        style="object-fit: fill; object-position: center;"
+      />
+    </div>
+    <p
+      class="image-demo-tip"
+      data-v-2e8b3d91=""
+    >
+      圆角方形
+    </p>
+  </div>
+  <div
+    class="image-demo"
+    data-v-2e8b3d91=""
+  >
+    <div
+      class="t-image t-image--circle image-container"
+      data-v-2e8b3d91=""
+    >
+      <div
+        class="t-image__status"
+      >
+        <svg
+          class="t-icon t-icon-ellipsis"
+          fill="none"
+          height="1em"
+          viewBox="0 0 16 16"
+          width="1em"
+        >
+          <path
+            d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+            fill="currentColor"
+            fill-opacity="0.9"
+          />
+        </svg>
+      </div>
+      <img
+        alt="一张图片"
+        class="t-image__img"
+        src="https://tdesign.gtimg.com/site/upload1.png"
+        style="object-fit: fill; object-position: center;"
+      />
+    </div>
+    <p
+      class="image-demo-tip"
+      data-v-2e8b3d91=""
+    >
+      圆形
+    </p>
   </div>
 </div>
 `;
 
-exports[`Image > Image shapeVue demo works fine 1`] = `
+exports[`Image > Image sizeVue demo works fine 1`] = `
 <div
-  data-v-5f48b8f6=""
+  data-v-app=""
 >
+  
   <div
-    class="t-image t-image--circle image-container"
-    data-v-5f48b8f6=""
+    class="image-group"
+    data-v-5e203266=""
   >
     <div
-      class="t-image__status"
-    >
-      <svg
-        class="t-icon t-icon-ellipsis"
-        fill="none"
-        height="1em"
-        viewBox="0 0 16 16"
-        width="1em"
-      >
-        <path
-          d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
-          fill="currentColor"
-          fill-opacity="0.9"
+      class="image-demo"
+      data-v-5e203266=""
+    >
+      <div
+        class="t-image t-image--round image-container"
+        data-v-5e203266=""
+        style="width: 56px; height: 56px;"
+      >
+        <div
+          class="t-image__status"
+        >
+          <svg
+            class="t-icon t-icon-ellipsis"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
+        <img
+          alt=""
+          class="t-image__img"
+          src="https://tdesign.gtimg.com/site/upload1.png"
+          style="object-fit: fill; object-position: center;"
         />
-      </svg>
+      </div>
+      <p
+        class="image-demo-tip"
+        data-v-5e203266=""
+      >
+        56
+      </p>
+    </div>
+    <div
+      class="image-demo"
+      data-v-5e203266=""
+    >
+      <div
+        class="t-image t-image--round image-container"
+        data-v-5e203266=""
+        style="width: 48px; height: 48px;"
+      >
+        <div
+          class="t-image__status"
+        >
+          <svg
+            class="t-icon t-icon-ellipsis"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
+        <img
+          alt=""
+          class="t-image__img"
+          src="https://tdesign.gtimg.com/site/upload1.png"
+          style="object-fit: fill; object-position: center;"
+        />
+      </div>
+      <p
+        class="image-demo-tip"
+        data-v-5e203266=""
+      >
+        48
+      </p>
+    </div>
+    <div
+      class="image-demo"
+      data-v-5e203266=""
+    >
+      <div
+        class="t-image t-image--round image-container"
+        data-v-5e203266=""
+        style="width: 32px; height: 32px;"
+      >
+        <div
+          class="t-image__status"
+        >
+          <svg
+            class="t-icon t-icon-ellipsis"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
+        <img
+          alt=""
+          class="t-image__img"
+          src="https://tdesign.gtimg.com/site/upload1.png"
+          style="object-fit: fill; object-position: center;"
+        />
+      </div>
+      <p
+        class="image-demo-tip"
+        data-v-5e203266=""
+      >
+        32
+      </p>
+    </div>
+    <div
+      class="image-demo"
+      data-v-5e203266=""
+    >
+      <div
+        class="t-image t-image--round image-container"
+        data-v-5e203266=""
+        style="width: 24px; height: 24px;"
+      >
+        <div
+          class="t-image__status"
+        >
+          <svg
+            class="t-icon t-icon-ellipsis"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
+        <img
+          alt=""
+          class="t-image__img"
+          src="https://tdesign.gtimg.com/site/upload1.png"
+          style="object-fit: fill; object-position: center;"
+        />
+      </div>
+      <p
+        class="image-demo-tip"
+        data-v-5e203266=""
+      >
+        24
+      </p>
+    </div>
+  </div>
+  <div
+    class="image-group"
+    data-v-5e203266=""
+  >
+    <div
+      class="image-demo"
+      data-v-5e203266=""
+    >
+      <div
+        class="t-image t-image--round image-container"
+        data-v-5e203266=""
+        style="width: 120px; height: 120px;"
+      >
+        <div
+          class="t-image__status"
+        >
+          <svg
+            class="t-icon t-icon-ellipsis"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
+        <img
+          alt=""
+          class="t-image__img"
+          src="https://tdesign.gtimg.com/site/upload1.png"
+          style="object-fit: fill; object-position: center;"
+        />
+      </div>
+      <p
+        class="image-demo-tip"
+        data-v-5e203266=""
+      >
+        120
+      </p>
+    </div>
+    <div
+      class="image-demo"
+      data-v-5e203266=""
+    >
+      <div
+        class="t-image t-image--round image-container"
+        data-v-5e203266=""
+        style="width: 72px; height: 72px;"
+      >
+        <div
+          class="t-image__status"
+        >
+          <svg
+            class="t-icon t-icon-ellipsis"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
+        <img
+          alt=""
+          class="t-image__img"
+          src="https://tdesign.gtimg.com/site/upload1.png"
+          style="object-fit: fill; object-position: center;"
+        />
+      </div>
+      <p
+        class="image-demo-tip"
+        data-v-5e203266=""
+      >
+        72
+      </p>
     </div>
-    <img
-      alt=""
-      class="t-image__img"
-      src="https://tdesign.gtimg.com/site/upload1.png"
-      style="object-fit: fill; object-position: center;"
-    />
   </div>
+  
 </div>
 `;
diff --git a/src/image/__test__/demo.test.jsx b/src/image/__test__/demo.test.jsx
index 6b9913b1..99c4456d 100644
--- a/src/image/__test__/demo.test.jsx
+++ b/src/image/__test__/demo.test.jsx
@@ -3,24 +3,20 @@
  */
 
 import { mount } from '@vue/test-utils';
-import baseVue from '@/image/demos/base.vue';
-import errorVue from '@/image/demos/error.vue';
-import fitVue from '@/image/demos/fit.vue';
-import lazyVue from '@/image/demos/lazy.vue';
-import loadingVue from '@/image/demos/loading.vue';
+import cropVue from '@/image/demos/crop.vue';
+import loadingErrorVue from '@/image/demos/loading-error.vue';
+import loadingTipVue from '@/image/demos/loading-tip.vue';
 import mobileVue from '@/image/demos/mobile.vue';
-import positionVue from '@/image/demos/position.vue';
-import shapeVue from '@/image/demos/shape.vue';
+import roundedVue from '@/image/demos/rounded.vue';
+import sizeVue from '@/image/demos/size.vue';
 
 const mapper = {
-  baseVue,
-  errorVue,
-  fitVue,
-  lazyVue,
-  loadingVue,
+  cropVue,
+  loadingErrorVue,
+  loadingTipVue,
   mobileVue,
-  positionVue,
-  shapeVue,
+  roundedVue,
+  sizeVue,
 };
 
 describe('Image', () => {