Repository: Tencent/tdesign-mobile-vue
Pull request #435 (2022-10-27 02:26:50)

docs(fab): update docs and demo
### 🤔 这个 PR 的性质是？

- [x]  演示代码改进


### 🔗 相关 Issue

#413 

### 📝 更新日志

- feat(Fab): 更新示例代码



Patch:
diff --git a/src/_common b/src/_common
index 0f49a897..f452e784 160000
--- a/src/_common
+++ b/src/_common
@@ -1,1 +1,1 @@
-Subproject commit 0f49a89751a960aefce24fc1b8e4f50f49613397
+Subproject commit f452e784d57d30e1f5a226d4515e555322fe46e7
diff --git a/src/badge/demos/base.vue b/src/badge/demos/base.vue
deleted file mode 100644
index 65b24154..00000000
--- a/src/badge/demos/base.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="tdesign-mobile-demo">
-    <div class="badge-demo">
-      <div class="badge-item">
-        <t-badge dot>消息</t-badge>
-      </div>
-      <div class="badge-item">
-        <t-badge count="16">消息</t-badge>
-      </div>
-      <div class="badge-item">
-        <t-badge count="NEW">消息</t-badge>
-      </div>
-      <div class="badge-item">
-        <t-badge count="···">消息</t-badge>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/src/badge/demos/basic.vue b/src/badge/demos/basic.vue
new file mode 100644
index 00000000..fa66b865
--- /dev/null
+++ b/src/badge/demos/basic.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="tdesign-mobile-demo">
+    <t-cell-group>
+      <div class="badge-demo">
+        <div class="badge-item">
+          <t-badge :count="16">消息</t-badge>
+        </div>
+        <div class="badge-item">
+          <t-badge dot>消息</t-badge>
+        </div>
+        <div class="badge-item">
+          <t-badge content="NEW">消息</t-badge>
+        </div>
+        <div class="badge-item">
+          <t-badge content="···">消息</t-badge>
+        </div>
+      </div>
+    </t-cell-group>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({});
+</script>
diff --git a/src/badge/demos/button.vue b/src/badge/demos/button.vue
deleted file mode 100644
index 1af8f977..00000000
--- a/src/badge/demos/button.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <div class="tdesign-mobile-demo">
-    <div class="badge-demo">
-      <div class="badge-item">
-        <t-badge dot>
-          <t-button size="small" variant="outline">小按钮</t-button>
-        </t-badge>
-      </div>
-      <div class="badge-item">
-        <t-badge count="16">
-          <t-button size="small" variant="outline">小按钮</t-button>
-        </t-badge>
-      </div>
-      <div class="badge-item">
-        <t-badge count="NEW">
-          <t-button size="small" variant="outline">小按钮</t-button>
-        </t-badge>
-      </div>
-      <div class="badge-item">
-        <t-badge count="···">
-          <t-button size="small" variant="outline">小按钮</t-button>
-        </t-badge>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/src/badge/demos/cell.vue b/src/badge/demos/cell.vue
deleted file mode 100644
index 735fd6bf..00000000
--- a/src/badge/demos/cell.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div>
-    <t-cell-group style="overflow: hidden">
-      <t-cell title="单行标题" arrow>
-        <template #note>
-          <t-badge dot></t-badge>
-        </template>
-      </t-cell>
-      <t-cell title="单行标题" arrow>
-        <template #note>
-          <t-badge count="16"></t-badge>
-        </template>
-      </t-cell>
-      <t-cell title="单行标题" arrow>
-        <template #note>
-          <t-badge count="NEW" shape="round" />
-          <t-badge count="NEW" style="margin-left: 8px" />
-        </template>
-      </t-cell>
-      <t-cell title="单行标题">
-        <template #note>
-          <t-badge shape="ribbon" count="NEW"></t-badge>
-        </template>
-      </t-cell>
-    </t-cell-group>
-  </div>
-</template>
diff --git a/src/badge/demos/color.vue b/src/badge/demos/color.vue
new file mode 100644
index 00000000..a4b52ef5
--- /dev/null
+++ b/src/badge/demos/color.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="tdesign-mobile-demo">
+    <t-cell-group>
+      <div class="badge-demo">
+        <div class="badge-item">
+          <t-badge :count="12" class="badge-item">
+            <t-button size="small">按钮</t-button>
+          </t-badge>
+          <t-badge :count="999" color="#52c41a" class="badge-item">
+            <t-button size="small">绿色</t-button>
+          </t-badge>
+          <t-badge :count="1" color="#f52fff" class="badge-item">
+            <t-button size="small">自定义颜色</t-button>
+          </t-badge>
+        </div>
+      </div>
+    </t-cell-group>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({});
+</script>
diff --git a/src/badge/demos/dist.vue b/src/badge/demos/dist.vue
new file mode 100644
index 00000000..655d8822
--- /dev/null
+++ b/src/badge/demos/dist.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="tdesign-mobile-demo">
+    <div class="badge-wrap">
+      <t-badge dot class="badge-item">
+        <t-button size="small">按钮</t-button>
+      </t-badge>
+    </div>
+    <div class="badge-wrap">
+      <t-cell-group>
+        <t-cell value-align="left">
+          <span>单行标题</span>
+          <t-badge dot :offset="[10, 0]" class="list-item-badge" />
+        </t-cell>
+      </t-cell-group>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({});
+</script>
+
+<style lang="less" scoped>
+.badge-wrap {
+  padding: 10px 0;
+}
+
+.list-item-badge {
+  float: right;
+  vertical-align: middle;
+}
+</style>
diff --git a/src/badge/demos/max-count.vue b/src/badge/demos/max-count.vue
new file mode 100644
index 00000000..47f370f5
--- /dev/null
+++ b/src/badge/demos/max-count.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="tdesign-mobile-demo">
+    <div class="badge-demo">
+      <t-badge :count="12" :max-count="44" class="badge-item">
+        <t-button size="small">14</t-button>
+      </t-badge>
+      <t-badge :count="109" class="badge-item">
+        <t-button size="small">默认max:99</t-button>
+      </t-badge>
+      <t-badge :count="45" :max-count="44" class="badge-item">
+        <t-button size="small">max:44</t-button>
+      </t-badge>
+      <t-badge :count="106" :max-count="105" class="badge-item">
+        <t-button size="small">max:105</t-button>
+      </t-badge>
+    </div>
+    <div class="badge-demo">
+      <t-cell-group>
+        <t-cell value-align="left">
+          <span>单行标题</span>
+          <t-badge :count="16" :offset="[10, 0]" class="list-item-badge" />
+        </t-cell>
+      </t-cell-group>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({});
+</script>
diff --git a/src/badge/demos/mobile.vue b/src/badge/demos/mobile.vue
index de69c657..6fd49e87 100644
--- a/src/badge/demos/mobile.vue
+++ b/src/badge/demos/mobile.vue
@@ -3,26 +3,65 @@
     <h1 class="title">Badge 徽标</h1>
     <p class="summary">用于告知用户，该区域的状态变化或者待处理任务的数量。</p>
     <tdesign-demo-block title="01 类型" summary="徽标主要分红点、数字、文字和角标提醒">
-      <BaseDemo />
-    </tdesign-demo-block>
-    <tdesign-demo-block>
-      <ButtonDemo />
-    </tdesign-demo-block>
-    <tdesign-demo-block>
-      <CellDemo />
+      <div class="badge-demo">
+        <div class="badge-item">
+          <t-badge dot>消息</t-badge>
+        </div>
+        <div class="badge-item">
+          <t-badge count="16">消息</t-badge>
+        </div>
+        <div class="badge-item">
+          <t-badge count="NEW">消息</t-badge>
+        </div>
+        <div class="badge-item">
+          <t-badge count="···">消息</t-badge>
+        </div>
+      </div>
+      <div class="badge-demo">
+        <div class="badge-item">
+          <t-badge dot>
+            <t-button size="small" variant="outline">小按钮</t-button>
+          </t-badge>
+        </div>
+        <div class="badge-item">
+          <t-badge count="16">
+            <t-button size="small" variant="outline">小按钮</t-button>
+          </t-badge>
+        </div>
+        <div class="badge-item">
+          <t-badge count="NEW">
+            <t-button size="small" variant="outline">小按钮</t-button>
+          </t-badge>
+        </div>
+        <div class="badge-item">
+          <t-badge count="···">
+            <t-button size="small" variant="outline">小按钮</t-button>
+          </t-badge>
+        </div>
+      </div>
+      <t-cell-group style="overflow: hidden">
+        <t-cell title="单行标题" arrow>
+          <template #note>
+            <t-badge dot></t-badge>
+          </template>
+        </t-cell>
+        <t-cell title="单行标题" arrow>
+          <template #note>
+            <t-badge count="16"></t-badge>
+          </template>
+        </t-cell>
+        <t-cell title="单行标题" arrow>
+          <template #note>
+            <t-badge count="NEW" shape="round" />
+            <t-badge count="NEW" style="margin-left: 8px" />
+          </template>
+        </t-cell>
+        <t-cell title="单行标题">
+          <template #note>
+            <t-badge shape="ribbon" count="NEW"> </t-badge>
+          </template>
+        </t-cell>
+      </t-cell-group>
     </tdesign-demo-block>
   </div>
 </template>
-
-<script lang="ts" setup>
-import BaseDemo from './base.vue';
-import ButtonDemo from './button.vue';
-import CellDemo from './cell.vue';
-</script>
-
-<style>
-.tdesign-mobile-demo-block .badge-demo .badge-item {
-  width: 24%;
-  text-align: center;
-}
-</style>
diff --git a/src/badge/demos/offset.vue b/src/badge/demos/offset.vue
new file mode 100644
index 00000000..3dd3cbe4
--- /dev/null
+++ b/src/badge/demos/offset.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="tdesign-mobile-demo">
+    <div class="badge-demo">
+      <div class="badge-line">
+        <span>offset: [10, 10]</span>
+        <t-badge :count="12" :offset="[10, 10]" class="badge-item">
+          <t-button size="small">按钮</t-button>
+        </t-badge>
+      </div>
+      <div class="badge-line">
+        <span>offset: [-10, 10]</span>
+        <t-badge :count="12" :offset="[-10, 10]" class="badge-item">
+          <t-button size="small">按钮</t-button>
+        </t-badge>
+      </div>
+      <div class="badge-line">
+        <span>offset: [-10, -10]</span>
+        <t-badge :count="12" :offset="[-10, -10]" class="badge-item">
+          <t-button size="small">按钮</t-button>
+        </t-badge>
+      </div>
+      <div class="badge-line">
+        <span>offset: [10, -10]</span>
+        <t-badge :count="12" :offset="[10, -10]" class="badge-item">
+          <t-button size="small">按钮</t-button>
+        </t-badge>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({});
+</script>
diff --git a/src/badge/demos/shape.vue b/src/badge/demos/shape.vue
new file mode 100644
index 00000000..765939f3
--- /dev/null
+++ b/src/badge/demos/shape.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="tdesign-mobile-demo">
+    <div class="badge-demo">
+      <t-badge :count="12" class="badge-item">
+        <t-button size="small">circle</t-button>
+      </t-badge>
+      <t-badge :count="12" shape="round" class="badge-item">
+        <t-button size="small">round</t-button>
+      </t-badge>
+      <t-cell-group title="列表带徽标">
+        <t-cell label="单行标题">
+          <t-badge dot />
+        </t-cell>
+        <t-cell label="单行标题">
+          <t-badge content="NEW" :offset="[5, 0]" shape="ribbon" />
+        </t-cell>
+      </t-cell-group>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({});
+</script>
diff --git a/src/badge/demos/text.vue b/src/badge/demos/text.vue
new file mode 100644
index 00000000..70fd1035
--- /dev/null
+++ b/src/badge/demos/text.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="tdesign-mobile-demo">
+    <div class="badge-demo">
+      <t-badge content="NEW" class="badge-item">
+        <t-button size="small">NEW</t-button>
+      </t-badge>
+      <t-badge content="···" class="badge-item">
+        <t-button size="small">省略号</t-button>
+      </t-badge>
+    </div>
+    <div class="badge-wrap">
+      <t-cell-group>
+        <t-cell value-align="left">
+          <span>单行标题</span>
+          <div class="badge-tag-wrap">
+            <t-badge content="NEW" shape="round" class="badge-tag" />
+            <t-badge content="NEW" shape="round" class="badge-tag" />
+            <t-badge content="NEW" shape="circle" class="badge-tag" />
+            <t-badge content="NEW" shape="circle" class="badge-tag" />
+          </div>
+        </t-cell>
+      </t-cell-group>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({});
+</script>
+
+<style lang="less" scoped>
+.badge-tag {
+  margin-right: 8px;
+}
+</style>
diff --git a/src/fab/demos/mobile.vue b/src/fab/demos/mobile.vue
index 97003be4..67f5b1c7 100644
--- a/src/fab/demos/mobile.vue
+++ b/src/fab/demos/mobile.vue
@@ -2,13 +2,24 @@
   <div class="tdesign-mobile-demo">
     <h1 class="title">Fab 悬浮按钮</h1>
     <p class="summary">当功能使用图标即可表示清楚时，可使用纯图标悬浮按钮，例如：添加、发布。</p>
-    <tdesign-demo-block title="01 类型" summary="纯图标悬浮按钮"></tdesign-demo-block>
-    <BaseDemo />
+    <tdesign-demo-block title="01 类型" summary="纯图标悬浮按钮">
+      <div class="toast-demo">
+        <t-button block size="large" variant="outline" @click="changeType('base')">基础使用</t-button>
+        <t-button block size="large" variant="outline" @click="changeType('advanced')">进阶使用</t-button>
+      </div>
+    </tdesign-demo-block>
+    <BaseDemo v-if="type === 'base'" />
+    <TextDemo v-if="type === 'advanced'" />
   </div>
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue';
 import BaseDemo from './display.vue';
+import TextDemo from './text.vue';
+
+const type = ref('base');
+const changeType = (t: string) => (type.value = t);
 </script>
 
 <style lang="less" scoped></style>
diff --git a/src/fab/demos/text.vue b/src/fab/demos/text.vue
index de486de8..d04e4c87 100644
--- a/src/fab/demos/text.vue
+++ b/src/fab/demos/text.vue
@@ -10,10 +10,9 @@ import { AddIcon } from 'tdesign-icons-vue-next';
 
 const iconFunc = () => h(AddIcon);
 const baseButtonProps = {
-  shape: 'round',
-  theme: 'default',
+  variant: 'outline',
 };
-const customStyle = 'right: 16px; bottom: 96px;';
+const customStyle = 'right: 16px; bottom: 32px;';
 const onClick = () => {
   console.log('click Fab');
 };
diff --git a/src/message/demos/align.vue b/src/message/demos/align.vue
new file mode 100644
index 00000000..f00aeb40
--- /dev/null
+++ b/src/message/demos/align.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="tdesign-demo-block">
+    <t-button variant="outline" @click="visible = true">居中对齐</t-button>
+  </div>
+  <t-message v-model="visible" content="居中对齐" align="center" />
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const visible = ref(false);
+    return { visible };
+  },
+});
+</script>
diff --git a/src/message/demos/base.vue b/src/message/demos/base.vue
deleted file mode 100644
index 11503e22..00000000
--- a/src/message/demos/base.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-  <div class="button-demo" style="margin: 0 16px">
-    <t-button block size="large" variant="outline" @click="showTextMessage">纯文字通知</t-button>
-    <t-button block size="large" variant="outline" @click="showIconMessage">带图标通知</t-button>
-    <t-button block size="large" variant="outline" @click="showCloseMessage">带关闭通知</t-button>
-    <t-button block size="large" variant="outline" @click="showScrollMessage">滚动通知</t-button>
-    <t-button block size="large" variant="outline" @click="showBtnMessage">带按钮通知</t-button>
-  </div>
-
-  <!-- 纯文字通知 -->
-  <t-message v-model="visible" :icon="false" :offset="[20, 32]" :duration="5000"
-    >这是一条纯文字的消息通知 5s消失
-  </t-message>
-
-  <!-- 带图标通知 -->
-  <t-message v-model="visible1" :offset="['20px', '32px']" :duration="5000" content="这是一条带图标的消息通知 5s消失">
-  </t-message>
-
-  <!-- 带关闭通知 -->
-  <t-message
-    v-model="visible2"
-    :offset="['20px', 32]"
-    :close-btn="true"
-    :duration="-1"
-    content="这是一条带关闭的消息通知，常驻可关闭"
-  ></t-message>
-
-  <!-- 滚动通知 -->
-  <t-message
-    v-model="visible3"
-    :offset="[20, 32]"
-    :marquee="{ speed: 50, loop: -1, delay: 5000 }"
-    :duration="-1"
-    content="这是一条 5s后开始滚动的通知信息"
-  ></t-message>
-
-  <!-- 带按钮通知 -->
-  <t-message
-    v-model="visible4"
-    :icon="iconContent"
-    :offset="[20, 32]"
-    :duration="-1"
-    content="这是一条带操作的消息通知"
-  >
-    <template #closeBtn>
-      <t-button class="close-btn" theme="primary" variant="outline" size="small" shape="round">按钮</t-button>
-    </template>
-  </t-message>
-</template>
-
-<script lang="ts" setup>
-import { h, ref } from 'vue';
-import { NotificationIcon } from 'tdesign-icons-vue-next';
-
-const visible = ref(false);
-const visible1 = ref(false);
-const visible2 = ref(false);
-const visible3 = ref(false);
-const visible4 = ref(false);
-
-const iconContent = () => h(NotificationIcon);
-
-const showTextMessage = () => {
-  visible.value = true;
-};
-
-const showIconMessage = () => {
-  visible1.value = true;
-};
-
-const showCloseMessage = () => {
-  visible2.value = true;
-};
-const showScrollMessage = () => {
-  visible3.value = true;
-};
-
-const showBtnMessage = () => {
-  visible4.value = true;
-};
-</script>
-
-<style lang="less" scoped>
-.close-btn {
-  margin-left: 8px;
-  font-size: inherit;
-  line-height: inherit;
-  height: 22px;
-  line-height: 22px;
-  border-radius: 4px;
-  border-color: inherit;
-  color: inherit;
-  min-height: 0;
-  background: transparent;
-}
-</style>
diff --git a/src/message/demos/close.vue b/src/message/demos/close.vue
new file mode 100644
index 00000000..f57836a1
--- /dev/null
+++ b/src/message/demos/close.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="tdesign-demo-block">
+    <t-button variant="outline" @click="visible = true">带关闭通知</t-button>
+    <t-button variant="outline" @click="visible1 = true">带按钮通知</t-button>
+  </div>
+  <t-message
+    v-model="visible"
+    content="这是一条带关闭的消息通知，常驻可关闭"
+    :close-btn="true"
+    :duration="0"
+  ></t-message>
+  <t-message v-model="visible1" content="这是一条带操作的消息通知">
+    <template #closeBtn>
+      <t-button theme="primary" variant="outline" size="small" shape="round">按钮</t-button>
+    </template>
+  </t-message>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const visible = ref(false);
+    const visible1 = ref(false);
+    return { visible, visible1 };
+  },
+});
+</script>
diff --git a/src/message/demos/duration.vue b/src/message/demos/duration.vue
new file mode 100644
index 00000000..00046cb8
--- /dev/null
+++ b/src/message/demos/duration.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="tdesign-demo-block">
+    <t-button variant="outline" @click="visible = true">5000ms</t-button>
+  </div>
+  <t-message v-model="visible" content="5000ms后消失" :duration="5000" />
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const visible = ref(false);
+    return { visible };
+  },
+});
+</script>
diff --git a/src/message/demos/function.vue b/src/message/demos/function.vue
new file mode 100644
index 00000000..ade0f12c
--- /dev/null
+++ b/src/message/demos/function.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="tdesign-demo-block">
+    <t-button size="large" variant="outline" @click="onClick('info')">普通</t-button>
+    <t-button size="large" variant="outline" style="margin-top: 8px" @click="onClick('success')">成功</t-button>
+    <t-button size="large" variant="outline" style="margin-top: 8px" @click="useThisMessage('warning')">警示</t-button>
+    <t-button size="large" variant="outline" style="margin-top: 8px" @click="useThisMessage('error')">错误</t-button>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import Message from '../index';
+
+export default defineComponent({
+  setup() {
+    return {
+      onClick: (type) => Message[type](type),
+    };
+  },
+  methods: {
+    useThisMessage(type) {
+      this.$message[type](type);
+    },
+  },
+});
+</script>
diff --git a/src/message/demos/mobile.vue b/src/message/demos/mobile.vue
index 77d9c352..9526689e 100644
--- a/src/message/demos/mobile.vue
+++ b/src/message/demos/mobile.vue
@@ -3,17 +3,95 @@
     <h1 class="title">Message 消息通知</h1>
     <p class="summary">用于页面消息通知提示，具有成功提示、提醒、警示等功能，通常在顶部出现，可以自动消失或点击关闭</p>
     <tdesign-demo-block title="01 类型" summary="弹窗内容为存文本、标题和副标题、带输入框">
-      <!-- <functionDemo /> -->
-      <baseDemo />
+      <div class="button-demo" style="margin: 0 16px">
+        <t-button block size="large" variant="outline" @click="visible = true">纯文字通知</t-button>
+        <t-button block size="large" variant="outline" @click="visible1 = true">带图标通知</t-button>
+        <t-button block size="large" variant="outline" @click="visible2 = true">带关闭通知</t-button>
+        <t-button block size="large" variant="outline" @click="visible3 = true">带按钮通知</t-button>
+      </div>
     </tdesign-demo-block>
 
     <tdesign-demo-block title="02 状态" summary="弹窗内容为存文本、标题和副标题、带输入框">
-      <themeDemo />
+      <div class="button-demo" style="margin: 0 16px">
+        <t-button block size="large" variant="outline" @click="visible4 = true">普通通知</t-button>
+        <t-button block size="large" variant="outline" @click="visible5 = true">成功提示通知</t-button>
+        <t-button block size="large" variant="outline" @click="visible6 = true">警示提示通知</t-button>
+        <t-button block size="large" variant="outline" @click="visible7 = true">错误提示通知</t-button>
+      </div>
     </tdesign-demo-block>
+
+    <t-message v-model="visible">这是一条纯文字的消息通知</t-message>
+    <t-message v-model="visible1" content="这是一条带图标的消息通知"></t-message>
+    <t-message
+      v-model="visible2"
+      content="这是一条带关闭的消息通知，常驻可关闭"
+      :close-btn="true"
+      :duration="0"
+    ></t-message>
+    <t-message v-model="visible3" content="这是一条带操作的消息通知">
+      <template #closeBtn>
+        <t-button theme="primary" variant="outline" size="small" shape="round">按钮</t-button>
+      </template>
+    </t-message>
+    <t-message v-model="visible4" content="这是一条普通的通知信息" theme="info"></t-message>
+    <t-message v-model="visible5" content="这是一条需要成功的提示消息" theme="success"></t-message>
+    <t-message v-model="visible6" content="这是一条需要用户关注到的警示通知" theme="warning"></t-message>
+    <t-message v-model="visible7" content="这是一条错误提示通知" theme="error"></t-message>
   </div>
 </template>
 
-<script lang="ts" setup>
-import themeDemo from './theme.vue';
-import baseDemo from './base.vue';
+<script>
+import { defineComponent, ref } from 'vue';
+import TButton from '../../button';
+import TMessage from '../index';
+
+export default defineComponent({
+  components: { TButton },
+  setup() {
+    const visible = ref(false);
+    const visible1 = ref(false);
+    const visible2 = ref(false);
+    const visible3 = ref(false);
+    const visible4 = ref(false);
+    const visible5 = ref(false);
+    const visible6 = ref(false);
+    const visible7 = ref(false);
+    const visible8 = ref(false);
+    const visible9 = ref(false);
+    const visible10 = ref(false);
+    const visible11 = ref(false);
+    const visible12 = ref(false);
+
+    return {
+      visible,
+      visible1,
+      visible2,
+      visible3,
+      visible4,
+      visible5,
+      visible6,
+      visible7,
+      visible8,
+      visible9,
+      visible10,
+      visible11,
+      visible12,
+      onClick: (type) => TMessage[type](type),
+    };
+  },
+});
 </script>
+
+<style lang="less">
+.tdesign-demo-block {
+  .t-button:not(:last-child) {
+    margin-bottom: 12px;
+  }
+}
+.tdesign-text-message-btn {
+  .t-button:not(:last-child) {
+    margin-right: 6px;
+    margin-bottom: 12px;
+  }
+}
+</style>
diff --git a/src/message/demos/offset.vue b/src/message/demos/offset.vue
new file mode 100644
index 00000000..7e89c6e9
--- /dev/null
+++ b/src/message/demos/offset.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="tdesign-demo-block"></div>
+  <t-button variant="outline" @click="visible = true"> 偏移 </t-button>
+  <t-message v-model="visible" content="偏移" :offset="[400, 100, 100]" />
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const visible = ref(false);
+    return { visible };
+  },
+});
+</script>
diff --git a/src/message/demos/text.vue b/src/message/demos/text.vue
new file mode 100644
index 00000000..6608816d
--- /dev/null
+++ b/src/message/demos/text.vue
@@ -0,0 +1,37 @@
+<template>
+  <t-cell value-align="left" class="tdesign-text-message-btn">
+    <t-button size="large" variant="outline" @click="visible = true">普通</t-button>
+    <t-button size="large" variant="outline" @click="visible8 = true">成功</t-button>
+    <t-button size="large" variant="outline" @click="visible9 = true">警示</t-button>
+    <t-button size="large" variant="outline" @click="visible10 = true">错误</t-button>
+  </t-cell>
+  <t-message v-model="visible">纯文本，不带icon</t-message>
+  <t-message v-model="visible8" theme="success">纯文本，不带icon</t-message>
+  <t-message v-model="visible9" theme="warning">纯文本，不带icon</t-message>
+  <t-message v-model="visible10" theme="error">纯文本，不带icon</t-message>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const visible = ref(false);
+    const visible8 = ref(false);
+    const visible9 = ref(false);
+    const visible10 = ref(false);
+    const visible12 = ref(false);
+    return { visible, visible8, visible9, visible10, visible12 };
+  },
+});
+</script>
+
+<style lang="less" scoped>
+.tdesign-text-message-btn {
+  background: transparent;
+  .t-button:not(:last-child) {
+    margin-right: 20px;
+    margin-bottom: 12px;
+  }
+}
+</style>
diff --git a/src/message/demos/theme.vue b/src/message/demos/theme.vue
index 997acbc0..9aa33900 100644
--- a/src/message/demos/theme.vue
+++ b/src/message/demos/theme.vue
@@ -1,40 +1,32 @@
 <template>
-  <div class="button-demo" style="margin: 0 16px">
-    <t-button block size="large" variant="outline" @click="showInfoMessage">普通通知</t-button>
-    <t-button block size="large" variant="outline" @click="showWarnMessage">警示提示通知</t-button>
-    <t-button block size="large" variant="outline" @click="showSuccessMessage">成功提示通知</t-button>
-    <t-button block size="large" variant="outline" @click="showErrorMessage">错误提示通知</t-button>
+  <div class="tdesign-demo-block">
+    <t-button size="large" variant="outline" @click="visible = true">普通</t-button>
+    <t-button size="large" variant="outline" style="margin-top: 8px" @click="visible1 = true">成功</t-button>
+    <t-button size="large" variant="outline" style="margin-top: 8px" @click="visible2 = true">警示</t-button>
+    <t-button size="large" variant="outline" style="margin-top: 8px" @click="visible3 = true">错误</t-button>
   </div>
+  <t-message v-model="visible" content="普通消息" />
+  <t-message v-model="visible1" content="成功消息" theme="success" />
+  <t-message v-model="visible2" content="警示消息" theme="warning" />
+  <t-message v-model="visible3" content="错误消息" theme="error" />
 </template>
 
-<script lang="ts" setup>
-import Message from '../index';
+<script>
+import { defineComponent, ref } from 'vue';
 
-const showInfoMessage = () =>
-  Message.info({
-    offset: [20, 32],
-    duration: 5000,
-    content: '这是一条普通通知信息',
-  });
+export default defineComponent({
+  setup() {
+    const visible = ref(false);
+    const visible1 = ref(false);
+    const visible2 = ref(false);
+    const visible3 = ref(false);
 
-const showWarnMessage = () =>
-  Message.warning({
-    offset: [20, 32],
-    duration: -1,
-    content: '这是一条需要用户关注到的警示通知',
-  });
-
-const showSuccessMessage = () =>
-  Message.success({
-    offset: [20, 32],
-    duration: -1,
-    content: '这是一条需要成功的提示消息',
-  });
-
-const showErrorMessage = () =>
-  Message.error({
-    offset: [20, 32],
-    duration: -1,
-    content: '这是一条错误提示通知',
-  });
+    return {
+      visible,
+      visible1,
+      visible2,
+      visible3,
+    };
+  },
+});
 </script>
diff --git a/src/message/index.ts b/src/message/index.ts
index fc6432bd..b153c5f5 100644
--- a/src/message/index.ts
+++ b/src/message/index.ts
@@ -34,7 +34,7 @@ function create(props: TdMessageProps): void {
 
 const defaultProps: TdMessageProps = {
   align: 'left',
-  closeBtn: false,
+  closeBtn: '',
   content: '',
   duration: 3000,
   theme: 'info',
diff --git a/src/message/message.en-US.md b/src/message/message.en-US.md
deleted file mode 100644
index b98e4862..00000000
--- a/src/message/message.en-US.md
+++ /dev/null
@@ -1,33 +0,0 @@
-:: BASE_DOC ::
-
-## API
-### Message Props
-
-name | type | default | description | required
--- | -- | -- | -- | --
-align | String | left | options：left/center。Typescript：`MessageAlignType` `type MessageAlignType = 'left' | 'center'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
-closeBtn | Boolean / Slot / Function | false | Typescript：` boolean | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-content | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-duration | Number | 3000 | - | N
-icon | Boolean / Slot / Function | true | Typescript：` boolean | TNode`。| N
-marquee | Boolean / Object | false | Typescript：`boolean | DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
-offset | Array | - | Typescript：`Array<string | number>` | N
-theme | String | info | options：info/success/warning/error。Typescript：`MessageThemeList` `type MessageThemeList = 'info' | 'success' | 'warning' | 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
-visible | Boolean | false | `v-model` and `v-model:visible` is supported | N
-defaultVisible | Boolean | false | uncontrolled property | N
-zIndex | Number | - | - | N
-onChange | Function |  | Typescript：`(visible: boolean) => void`<br/> | N
-onClose | Function |  | Typescript：`() => void`<br/>close message event | N
-onClosed | Function |  | Typescript：`() => void`<br/> | N
-onOpen | Function |  | Typescript：`() => void`<br/> | N
-onOpened | Function |  | Typescript：`() => void`<br/> | N
-
-### Message Events
-
-name | params | description
--- | -- | --
-change | `(visible: boolean)` | -
-close | - | close message event
-closed | - | -
-open | - | -
-opened | - | -
diff --git a/src/message/message.md b/src/message/message.md
index ec2a198b..bfc4ce89 100644
--- a/src/message/message.md
+++ b/src/message/message.md
@@ -6,12 +6,10 @@
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 align | String | left | 文本对齐方式。可选项：left/center。TS 类型：`MessageAlignType` `type MessageAlignType = 'left' | 'center'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
-closeBtn | Boolean / Slot / Function | false | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮，也可以完全自定义按钮。TS 类型：`string | boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+closeBtn | String / Boolean / Slot / Function | undefined | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。也可以完全自定义按钮。TS 类型：`string | boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 content | String / Slot / Function | - | 用于自定义消息弹出内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 duration | Number | 3000 | 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器。 | N
-icon | Boolean / Slot / Function | true | 消息提醒前面的图标。值为 true 则根据 theme 显示对应的图标，值为 false 则不显示图标，也可以完全自定义图标节点。TS 类型：`boolean | 'info' | 'bell'` | N
 marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean | DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
-offset | Array | - | 相对于 placement 的偏移量，示例：[-10, 20] 或 ['10rpx', '8rpx']。TS 类型：`Array<string | number>` | N
 theme | String | info | 消息组件风格。可选项：info/success/warning/error。TS 类型：`MessageThemeList` `type MessageThemeList = 'info' | 'success' | 'warning' | 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
 visible | Boolean | false | 是否显示，隐藏时默认销毁组件。支持语法糖 `v-model` 或 `v-model:visible` | N
 defaultVisible | Boolean | false | 是否显示，隐藏时默认销毁组件。非受控属性 | N
diff --git a/src/message/message.vue b/src/message/message.vue
index b543035c..4f5726a9 100644
--- a/src/message/message.vue
+++ b/src/message/message.vue
@@ -1,248 +1,77 @@
 <template>
   <transition name="message" @after-leave="afterLeave" @after-enter="afterEnter">
     <div v-if="currentVisible" ref="root" :class="rootClasses" :style="rootStyles">
-      <t-node v-if="computedPrefixIcon" :content="computedPrefixIcon"></t-node>
-      <div ref="textWrapDOM" :class="textWrapClasses">
-        <div
-          ref="textDOM"
-          :class="`${name}__text`"
-          :style="scroll.marquee ? animateStyle : ''"
-          @transitionend="handleTransitionend()"
-        >
-          <t-node v-if="computedContent" :content="computedContent"></t-node>
-        </div>
-      </div>
-      <div v-if="computedCloseBtn" @click="onClose">
-        <t-node :content="computedCloseBtn"></t-node>
-      </div>
+      <slot>
+        <slot name="icon">
+          <check-circle-filled-icon v-if="theme === 'success'" />
+          <error-circle-filled-icon v-else />
+        </slot>
+        <span :class="`${name}--txt`">{{ content }}</span>
+        <close-icon v-if="closeBtn === true" @click="onClose" />
+        <t-node v-else :content="closeBtnContent" />
+      </slot>
     </div>
   </transition>
 </template>
 
 <script lang="ts">
-import {
-  h,
-  ref,
-  computed,
-  watch,
-  defineComponent,
-  getCurrentInstance,
-  SetupContext,
-  toRefs,
-  reactive,
-  nextTick,
-  onMounted,
-} from 'vue';
+import { ref, computed, watch, defineComponent, getCurrentInstance, SetupContext, toRefs } from 'vue';
 import { CheckCircleFilledIcon, ErrorCircleFilledIcon, CloseIcon } from 'tdesign-icons-vue-next';
-import { isFunction } from 'lodash';
-import { off } from 'process';
 import messageProps from './props';
-import { DrawMarquee } from './type';
 import config from '../config';
-import { renderContent, renderTNode, TNode, useEmitEvent, useVModel } from '../shared';
+import { renderTNode, TNode, useEmitEvent, useVModel } from '../shared';
 
 const { prefix } = config;
 const name = `${prefix}-message`;
-const iconDefault = {
-  info: h(ErrorCircleFilledIcon),
-  success: h(CheckCircleFilledIcon),
-  warning: h(ErrorCircleFilledIcon),
-  error: h(ErrorCircleFilledIcon),
-};
 
 export default defineComponent({
   name,
-  components: { TNode },
+  components: { CheckCircleFilledIcon, ErrorCircleFilledIcon, CloseIcon, TNode },
   props: messageProps,
-  emits: ['change', 'open', 'opened', 'close', 'closed'],
+  emits: ['visible-change', 'open', 'opened', 'close', 'closed'],
   setup(props: any, context: SetupContext) {
     const emitEvent = useEmitEvent(props, context.emit);
+    const root = ref(null);
     const internalInstance = getCurrentInstance();
-
-    // 初始化动画相关数据
-    const state = reactive({
-      duration: 0,
-      offset: 0,
-      listWidth: 0,
-      itemWidth: 0,
-      scroll: {
-        marquee: false,
-        speed: 50,
-        loop: -1, // 值为 -1 表示循环播放，值为 0 表示不循环播放
-        delay: 0,
-      },
-    });
-
+    const closeBtnContent = computed(() => renderTNode(internalInstance, 'closeBtn'));
     const { visible, modelValue } = toRefs(props);
-    const [currentVisible, setVisible] = useVModel(visible, modelValue, props.defaultVisible, props.onChange);
+    const [currentVisible, setVisible] = useVModel(visible, modelValue, props.defaultValue, props.onChange);
     const rootClasses = computed(() => ({
       [name]: true,
       [`${name}--${props.theme}`]: true,
       [`${name}-align--${props.align}`]: !!props.align,
     }));
-
-    const textWrapClasses = computed(() => ({
-      [`${name}__text-wrap`]: true,
-      [`${name}__text-nowrap`]: props.marquee,
-    }));
-
-    const changeNumToStr = (arr: []) => {
-      return arr.map(function (item) {
-        return typeof item === 'number' ? `${item}px` : item;
-      });
-    };
-
-    const getMessageStylesOffset = (offset: []) => {
-      const arr = changeNumToStr(offset);
-      return {
-        top: arr[0],
-        right: arr[1],
-        left: arr[1],
-      };
-    };
-
-    const rootStyles = computed(() => {
-      const { offset } = props;
-      const offsetStyle = offset ? getMessageStylesOffset(offset) : [];
-      return {
-        zIndex: props.zIndex,
-        ...offsetStyle,
-      };
-    });
-
-    const computedPrefixIcon = computed(() => {
-      const { icon } = props;
-      if (!icon) return null;
-      if (icon && !context.slots.icon && !isFunction(icon)) {
-        const theme = props.theme as string;
-        return iconDefault?.[theme] || null;
-      }
-      return renderTNode(internalInstance, 'icon');
-    });
-
-    // content
-    const computedContent = computed(() => renderContent(internalInstance, 'default', 'content'));
-
-    // closeBtn
-    const computedCloseBtn = computed(() => {
-      const { closeBtn } = props;
-      if (isFunction(closeBtn || context.slots.closeBtn)) {
-        return renderTNode(internalInstance, 'closeBtn');
-      }
-      if (closeBtn) {
-        const closeIcon = h(CloseIcon);
-        return closeIcon;
-      }
-      return null;
-    });
-
-    // 动画
-    const animateStyle = computed(() => ({
-      transform: state.offset ? `translateX(${state.offset}px)` : '',
-      transitionDuration: `${state.duration}s`,
-      transitionTimingFunction: 'linear',
+    const rootStyles = computed(() => ({
+      zIndex: props.zIndex,
     }));
 
-    const textWrapDOM = ref();
-    const textDOM = ref();
-
-    const handleScrolling = () => {
-      if (!props?.marquee || (props?.marquee as DrawMarquee)?.loop === 0) {
-        return;
-      }
-      // 初始化动画参数
-      if (typeof props.marquee === 'boolean') {
-        state.scroll = { ...state.scroll, marquee: props.marquee };
-      }
-      const marquee = props.marquee as DrawMarquee;
-      state.scroll = {
-        marquee: true,
-        loop: typeof marquee?.loop === 'undefined' ? state.scroll.loop : marquee.loop,
-        speed: marquee.speed ?? state.scroll.speed,
-        delay: marquee.delay ?? state.scroll.delay,
-      };
-      // 设置动画
-      setTimeout(() => {
-        const textWrapDOMWidth = textWrapDOM.value?.getBoundingClientRect().width;
-        const textDOMWidth = textDOM.value?.getBoundingClientRect().width;
-        state.offset = -textDOMWidth;
-        state.duration = textDOMWidth / state.scroll.speed;
-        state.listWidth = textWrapDOMWidth;
-        state.itemWidth = textDOMWidth;
-      }, state.scroll.delay);
-    };
-
-    // 动画结束后，初始化动画
-    const handleTransitionend = () => {
-      state.scroll.loop = --state.scroll.loop;
-      if (state.scroll.loop === 0) {
-        state.scroll = {
-          ...state.scroll,
-          marquee: false,
-        };
-        return;
-      }
-      state.offset = state.listWidth;
-      state.duration = 0;
-
-      setTimeout(() => {
-        state.offset = -state.itemWidth;
-        state.duration = (state.itemWidth + state.listWidth) / state.scroll.speed;
-      }, 0);
-    };
-
     const onClose = () => {
       emitEvent('close');
       setVisible(false);
     };
 
-    const handleDuration = () => {
-      if (props.duration > 0) {
-        setTimeout(() => {
-          emitEvent('durationEnd');
-          onClose();
-        }, props.duration);
-      }
-    };
-
-    onMounted(() => {
-      nextTick(() => {
-        if (currentVisible.value) {
-          handleScrolling();
-        }
-      });
-    });
-
     watch(
       () => currentVisible.value,
       (val) => {
         if (val === false) return;
+
         emitEvent('open');
         setVisible(true);
-        handleDuration();
-        nextTick(() => {
-          state.offset = state.listWidth;
-          state.duration = 0;
-          handleScrolling();
-        });
+
+        if (props.duration > 0) {
+          setTimeout(onClose, props.duration);
+        }
       },
     );
 
     return {
       name: ref(name),
-      ...toRefs(state),
+      root,
       currentVisible,
       rootClasses,
-      textWrapClasses,
       rootStyles,
-      computedPrefixIcon,
-      computedContent,
-      computedCloseBtn,
-      textWrapDOM,
-      textDOM,
-      animateStyle,
+      closeBtnContent,
       onClose,
-      handleTransitionend,
       afterEnter: () => emitEvent('opened'),
       afterLeave: () => emitEvent('closed'),
     };
diff --git a/src/message/props.ts b/src/message/props.ts
index 65d44e28..ec0ce22e 100644
--- a/src/message/props.ts
+++ b/src/message/props.ts
@@ -19,8 +19,8 @@ export default {
   },
   /** 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。也可以完全自定义按钮 */
   closeBtn: {
-    type: [Boolean, Function] as PropType<TdMessageProps['closeBtn']>,
-    default: false,
+    type: [String, Boolean, Function] as PropType<TdMessageProps['closeBtn']>,
+    default: undefined,
   },
   /** 用于自定义消息弹出内容 */
   content: {
@@ -31,20 +31,11 @@ export default {
     type: Number,
     default: 3000,
   },
-  /** 消息提醒前面的图标。值为 true 则根据 theme 显示对应的图标，值为 false 则不显示图标。值为 'info' 或 'bell' 则显示组件内置图标。也可以完全自定义图标节点 */
-  icon: {
-    type: [Boolean, Function] as PropType<TdMessageProps['icon']>,
-    default: true,
-  },
   /** 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放 */
   marquee: {
     type: [Boolean, Object] as PropType<TdMessageProps['marquee']>,
     default: false,
   },
-  /** 相对于 placement 的偏移量，示例：[-10, 20] 或 ['10rpx', '8rpx'] */
-  offset: {
-    type: Array as PropType<TdMessageProps['offset']>,
-  },
   /** 消息组件风格 */
   theme: {
     type: String as PropType<TdMessageProps['theme']>,
@@ -71,7 +62,7 @@ export default {
   },
   /** 可见性变化时触发 */
   onChange: Function as PropType<TdMessageProps['onChange']>,
-  /** 关闭消息时触发 */
+  /** 关闭Message时触发 */
   onClose: Function as PropType<TdMessageProps['onClose']>,
   /** 关闭Message时并且动画结束后触发 */
   onClosed: Function as PropType<TdMessageProps['onClosed']>,
diff --git a/src/message/type.ts b/src/message/type.ts
index 9ad6056f..b3252c41 100644
--- a/src/message/type.ts
+++ b/src/message/type.ts
@@ -15,7 +15,7 @@ export interface TdMessageProps {
   /**
    * 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。也可以完全自定义按钮
    */
-  closeBtn?: boolean | TNode;
+  closeBtn?: string | boolean | TNode;
   /**
    * 用于自定义消息弹出内容
    */
@@ -25,20 +25,11 @@ export interface TdMessageProps {
    * @default 3000
    */
   duration?: number;
-  /**
-   * 消息提醒前面的图标。值为 true 则根据 theme 显示对应的图标，值为 false 则不显示图标。值为 'info' 或 'bell' 则显示组件内置图标。也可以完全自定义图标节点
-   * @default true
-   */
-  icon?: boolean | TNode;
   /**
    * 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放
    * @default false
    */
   marquee?: boolean | DrawMarquee;
-  /**
-   * 相对于 placement 的偏移量，示例：[-10, 20] 或 ['10rpx', '8rpx']
-   */
-  offset?: Array<string | number>;
   /**
    * 消息组件风格
    * @default info
@@ -64,13 +55,9 @@ export interface TdMessageProps {
    */
   zIndex?: number;
   /**
-   * 可见性变化时触发
-   */
-  onChange?: (visible: boolean) => void;
-  /**
-   * 关闭消息时触发
+   * 关闭Message时触发
    */
-  onClose?: (context?: { trigger: 'duration' | 'close-click' }) => void;
+  onClose?: () => void;
   /**
    * 关闭Message时并且动画结束后触发
    */
@@ -83,6 +70,10 @@ export interface TdMessageProps {
    * 展示Message时并且动画结束后触发
    */
   onOpened?: () => void;
+  /**
+   * 可见性变化时触发
+   */
+  onChange?: (visible: boolean) => void;
 }
 
 export type MessageAlignType = 'left' | 'center';


Test patch:
diff --git a/src/badge/__test__/__snapshots__/demo.test.jsx.snap b/src/badge/__test__/__snapshots__/demo.test.jsx.snap
index 21c61c47..09fe232a 100644
--- a/src/badge/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/badge/__test__/__snapshots__/demo.test.jsx.snap
@@ -1,81 +1,868 @@
 // Vitest Snapshot v1
 
-exports[`Badge > Badge baseVue demo works fine 1`] = `
+exports[`Badge > Badge basicVue demo works fine 1`] = `
 <div
   class="tdesign-mobile-demo"
 >
+  <div
+    class="t-cell-group"
+  >
+    <!--v-if-->
+    <div
+      class="t-cell-group__container"
+    >
+      
+      <div
+        class="badge-demo"
+      >
+        <div
+          class="badge-item"
+        >
+          <div
+            class="t-badge"
+          >
+            <div
+              class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
+            >
+              16
+            </div>
+            
+            消息
+            
+          </div>
+        </div>
+        <div
+          class="badge-item"
+        >
+          <div
+            class="t-badge"
+          >
+            <div
+              class="t-badge__inner t-badge--has-children t-badge--medium t-badge--dot"
+            >
+              
+            </div>
+            
+            消息
+            
+          </div>
+        </div>
+        <div
+          class="badge-item"
+        >
+          <div
+            class="t-badge"
+          >
+            <!--v-if-->
+            
+            消息
+            
+          </div>
+        </div>
+        <div
+          class="badge-item"
+        >
+          <div
+            class="t-badge"
+          >
+            <!--v-if-->
+            
+            消息
+            
+          </div>
+        </div>
+      </div>
+      
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Badge > Badge colorVue demo works fine 1`] = `
+<div
+  class="tdesign-mobile-demo"
+>
+  <div
+    class="t-cell-group"
+  >
+    <!--v-if-->
+    <div
+      class="t-cell-group__container"
+    >
+      
+      <div
+        class="badge-demo"
+      >
+        <div
+          class="badge-item"
+        >
+          <div
+            class="t-badge badge-item"
+          >
+            <div
+              class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
+            >
+              12
+            </div>
+            
+            <button
+              aria-disabled="false"
+              class="t-button t-size-s t-button--base t-button--default t-button--shape-rectangle"
+              role="button"
+            >
+              <!---->
+              <span
+                class="t-button__text"
+              >
+                
+                按钮
+                
+              </span>
+            </button>
+            
+          </div>
+          <div
+            class="t-badge badge-item"
+          >
+            <div
+              class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
+              style="background: rgb(82, 196, 26);"
+            >
+              99+
+            </div>
+            
+            <button
+              aria-disabled="false"
+              class="t-button t-size-s t-button--base t-button--default t-button--shape-rectangle"
+              role="button"
+            >
+              <!---->
+              <span
+                class="t-button__text"
+              >
+                
+                绿色
+                
+              </span>
+            </button>
+            
+          </div>
+          <div
+            class="t-badge badge-item"
+          >
+            <div
+              class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
+              style="background: rgb(245, 47, 255);"
+            >
+              1
+            </div>
+            
+            <button
+              aria-disabled="false"
+              class="t-button t-size-s t-button--base t-button--default t-button--shape-rectangle"
+              role="button"
+            >
+              <!---->
+              <span
+                class="t-button__text"
+              >
+                
+                自定义颜色
+                
+              </span>
+            </button>
+            
+          </div>
+        </div>
+      </div>
+      
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Badge > Badge distVue demo works fine 1`] = `
+<div
+  class="tdesign-mobile-demo"
+  data-v-03ebeeaa=""
+>
+  <div
+    class="badge-wrap"
+    data-v-03ebeeaa=""
+  >
+    <div
+      class="t-badge badge-item"
+      data-v-03ebeeaa=""
+    >
+      <div
+        class="t-badge__inner t-badge--has-children t-badge--medium t-badge--dot"
+      >
+        
+      </div>
+      
+      <button
+        aria-disabled="false"
+        class="t-button t-size-s t-button--base t-button--default t-button--shape-rectangle"
+        data-v-03ebeeaa=""
+        role="button"
+      >
+        <!---->
+        <span
+          class="t-button__text"
+        >
+          
+          按钮
+          
+        </span>
+      </button>
+      
+    </div>
+  </div>
+  <div
+    class="badge-wrap"
+    data-v-03ebeeaa=""
+  >
+    <div
+      class="t-cell-group"
+      data-v-03ebeeaa=""
+    >
+      <!--v-if-->
+      <div
+        class="t-cell-group__container"
+      >
+        
+        <div
+          class="t-cell t-cell--middle t-cell--bordered"
+          data-v-03ebeeaa=""
+          value-align="left"
+        >
+          <div
+            class="t-cell__left-icon"
+          >
+            <!--v-if-->
+            <!--v-if-->
+          </div>
+          <!--v-if-->
+          <div
+            class="t-cell__note"
+          >
+            
+            <span
+              data-v-03ebeeaa=""
+            >
+              单行标题
+            </span>
+            <div
+              class="t-badge list-item-badge"
+              data-v-03ebeeaa=""
+            >
+              <div
+                class="t-badge__inner t-badge--medium t-badge--dot"
+                style="right: 10px; top: 0px;"
+              >
+                
+              </div>
+              <!---->
+            </div>
+            
+          </div>
+          <!--v-if-->
+        </div>
+        
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Badge > Badge maxCountVue demo works fine 1`] = `
+<div
+  class="tdesign-mobile-demo"
+>
+  <div
+    class="badge-demo"
+  >
+    <div
+      class="t-badge badge-item"
+    >
+      <div
+        class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
+      >
+        12
+      </div>
+      
+      <button
+        aria-disabled="false"
+        class="t-button t-size-s t-button--base t-button--default t-button--shape-rectangle"
+        role="button"
+      >
+        <!---->
+        <span
+          class="t-button__text"
+        >
+          
+          14
+          
+        </span>
+      </button>
+      
+    </div>
+    <div
+      class="t-badge badge-item"
+    >
+      <div
+        class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
+      >
+        99+
+      </div>
+      
+      <button
+        aria-disabled="false"
+        class="t-button t-size-s t-button--base t-button--default t-button--shape-rectangle"
+        role="button"
+      >
+        <!---->
+        <span
+          class="t-button__text"
+        >
+          
+          默认max:99
+          
+        </span>
+      </button>
+      
+    </div>
+    <div
+      class="t-badge badge-item"
+    >
+      <div
+        class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
+      >
+        44+
+      </div>
+      
+      <button
+        aria-disabled="false"
+        class="t-button t-size-s t-button--base t-button--default t-button--shape-rectangle"
+        role="button"
+      >
+        <!---->
+        <span
+          class="t-button__text"
+        >
+          
+          max:44
+          
+        </span>
+      </button>
+      
+    </div>
+    <div
+      class="t-badge badge-item"
+    >
+      <div
+        class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
+      >
+        105+
+      </div>
+      
+      <button
+        aria-disabled="false"
+        class="t-button t-size-s t-button--base t-button--default t-button--shape-rectangle"
+        role="button"
+      >
+        <!---->
+        <span
+          class="t-button__text"
+        >
+          
+          max:105
+          
+        </span>
+      </button>
+      
+    </div>
+  </div>
   <div
     class="badge-demo"
   >
     <div
-      class="badge-item"
+      class="t-cell-group"
     >
+      <!--v-if-->
       <div
-        class="t-badge"
+        class="t-cell-group__container"
       >
+        
         <div
-          class="t-badge__inner t-badge--has-children t-badge--medium t-badge--dot"
+          class="t-cell t-cell--middle t-cell--bordered"
+          value-align="left"
         >
-          
+          <div
+            class="t-cell__left-icon"
+          >
+            <!--v-if-->
+            <!--v-if-->
+          </div>
+          <!--v-if-->
+          <div
+            class="t-cell__note"
+          >
+            
+            <span>
+              单行标题
+            </span>
+            <div
+              class="t-badge list-item-badge"
+            >
+              <div
+                class="t-badge__inner t-badge--medium t-badge--circle"
+                style="right: 10px; top: 0px;"
+              >
+                16
+              </div>
+              <!---->
+            </div>
+            
+          </div>
+          <!--v-if-->
         </div>
         
-        消息
-        
       </div>
     </div>
+  </div>
+</div>
+`;
+
+exports[`Badge > Badge mobileVue demo works fine 1`] = `
+<div
+  class="tdesign-mobile-demo"
+>
+  <h1
+    class="title"
+  >
+    Badge 徽标
+  </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="badge-item"
+      class="badge-demo"
     >
       <div
-        class="t-badge"
+        class="badge-item"
       >
         <div
-          class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
+          class="t-badge"
         >
-          16
+          <div
+            class="t-badge__inner t-badge--has-children t-badge--medium t-badge--dot"
+          >
+            
+          </div>
+          
+          消息
+          
+        </div>
+      </div>
+      <div
+        class="badge-item"
+      >
+        <div
+          class="t-badge"
+        >
+          <div
+            class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
+          >
+            16
+          </div>
+          
+          消息
+          
+        </div>
+      </div>
+      <div
+        class="badge-item"
+      >
+        <div
+          class="t-badge"
+        >
+          <div
+            class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
+          >
+            NEW
+          </div>
+          
+          消息
+          
+        </div>
+      </div>
+      <div
+        class="badge-item"
+      >
+        <div
+          class="t-badge"
+        >
+          <div
+            class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
+          >
+            ···
+          </div>
+          
+          消息
+          
         </div>
-        
-        消息
-        
       </div>
     </div>
     <div
-      class="badge-item"
+      class="badge-demo"
     >
       <div
-        class="t-badge"
+        class="badge-item"
       >
         <div
-          class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
+          class="t-badge"
         >
-          NEW
+          <div
+            class="t-badge__inner t-badge--has-children t-badge--medium t-badge--dot"
+          >
+            
+          </div>
+          
+          <button
+            aria-disabled="false"
+            class="t-button t-size-s t-button--outline t-button--default t-button--shape-rectangle"
+            role="button"
+          >
+            <!---->
+            <span
+              class="t-button__text"
+            >
+              
+              小按钮
+              
+            </span>
+          </button>
+          
+        </div>
+      </div>
+      <div
+        class="badge-item"
+      >
+        <div
+          class="t-badge"
+        >
+          <div
+            class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
+          >
+            16
+          </div>
+          
+          <button
+            aria-disabled="false"
+            class="t-button t-size-s t-button--outline t-button--default t-button--shape-rectangle"
+            role="button"
+          >
+            <!---->
+            <span
+              class="t-button__text"
+            >
+              
+              小按钮
+              
+            </span>
+          </button>
+          
+        </div>
+      </div>
+      <div
+        class="badge-item"
+      >
+        <div
+          class="t-badge"
+        >
+          <div
+            class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
+          >
+            NEW
+          </div>
+          
+          <button
+            aria-disabled="false"
+            class="t-button t-size-s t-button--outline t-button--default t-button--shape-rectangle"
+            role="button"
+          >
+            <!---->
+            <span
+              class="t-button__text"
+            >
+              
+              小按钮
+              
+            </span>
+          </button>
+          
+        </div>
+      </div>
+      <div
+        class="badge-item"
+      >
+        <div
+          class="t-badge"
+        >
+          <div
+            class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
+          >
+            ···
+          </div>
+          
+          <button
+            aria-disabled="false"
+            class="t-button t-size-s t-button--outline t-button--default t-button--shape-rectangle"
+            role="button"
+          >
+            <!---->
+            <span
+              class="t-button__text"
+            >
+              
+              小按钮
+              
+            </span>
+          </button>
+          
         </div>
-        
-        消息
-        
       </div>
     </div>
     <div
-      class="badge-item"
+      class="t-cell-group"
+      style="overflow: hidden;"
     >
+      <!--v-if-->
       <div
-        class="t-badge"
+        class="t-cell-group__container"
       >
+        
+        <div
+          class="t-cell t-cell--middle t-cell--bordered"
+        >
+          <div
+            class="t-cell__left-icon"
+          >
+            <!--v-if-->
+            <!--v-if-->
+          </div>
+          <div
+            class="t-cell__title"
+          >
+            单行标题
+            <!--v-if-->
+            <!--v-if-->
+          </div>
+          <div
+            class="t-cell__note"
+          >
+            
+            <div
+              class="t-badge"
+            >
+              <div
+                class="t-badge__inner t-badge--medium t-badge--dot"
+              >
+                
+              </div>
+              <!---->
+            </div>
+            
+          </div>
+          <div
+            class="t-cell__right-icon"
+          >
+            <svg
+              class="t-icon t-icon-chevron-right"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </div>
+        </div>
+        <div
+          class="t-cell t-cell--middle t-cell--bordered"
+        >
+          <div
+            class="t-cell__left-icon"
+          >
+            <!--v-if-->
+            <!--v-if-->
+          </div>
+          <div
+            class="t-cell__title"
+          >
+            单行标题
+            <!--v-if-->
+            <!--v-if-->
+          </div>
+          <div
+            class="t-cell__note"
+          >
+            
+            <div
+              class="t-badge"
+            >
+              <div
+                class="t-badge__inner t-badge--medium t-badge--circle"
+              >
+                16
+              </div>
+              <!---->
+            </div>
+            
+          </div>
+          <div
+            class="t-cell__right-icon"
+          >
+            <svg
+              class="t-icon t-icon-chevron-right"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </div>
+        </div>
+        <div
+          class="t-cell t-cell--middle t-cell--bordered"
+        >
+          <div
+            class="t-cell__left-icon"
+          >
+            <!--v-if-->
+            <!--v-if-->
+          </div>
+          <div
+            class="t-cell__title"
+          >
+            单行标题
+            <!--v-if-->
+            <!--v-if-->
+          </div>
+          <div
+            class="t-cell__note"
+          >
+            
+            <div
+              class="t-badge"
+            >
+              <div
+                class="t-badge__inner t-badge--medium t-badge--round"
+              >
+                NEW
+              </div>
+              <!---->
+            </div>
+            <div
+              class="t-badge"
+              style="margin-left: 8px;"
+            >
+              <div
+                class="t-badge__inner t-badge--medium t-badge--circle"
+              >
+                NEW
+              </div>
+              <!---->
+            </div>
+            
+          </div>
+          <div
+            class="t-cell__right-icon"
+          >
+            <svg
+              class="t-icon t-icon-chevron-right"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </div>
+        </div>
         <div
-          class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
+          class="t-cell t-cell--middle t-cell--bordered"
         >
-          ···
+          <div
+            class="t-cell__left-icon"
+          >
+            <!--v-if-->
+            <!--v-if-->
+          </div>
+          <div
+            class="t-cell__title"
+          >
+            单行标题
+            <!--v-if-->
+            <!--v-if-->
+          </div>
+          <div
+            class="t-cell__note"
+          >
+            
+            <div
+              class="t-badge t-badge__ribbon--outer"
+            >
+              <div
+                class="t-badge__inner t-badge--medium t-badge--ribbon"
+              >
+                NEW
+              </div>
+              <!---->
+            </div>
+            
+          </div>
+          <!--v-if-->
         </div>
         
-        消息
-        
       </div>
     </div>
+    
   </div>
 </div>
 `;
 
-exports[`Badge > Badge buttonVue demo works fine 1`] = `
+exports[`Badge > Badge offsetVue demo works fine 1`] = `
 <div
   class="tdesign-mobile-demo"
 >
@@ -83,20 +870,24 @@ exports[`Badge > Badge buttonVue demo works fine 1`] = `
     class="badge-demo"
   >
     <div
-      class="badge-item"
+      class="badge-line"
     >
+      <span>
+        offset: [10, 10]
+      </span>
       <div
-        class="t-badge"
+        class="t-badge badge-item"
       >
         <div
-          class="t-badge__inner t-badge--has-children t-badge--medium t-badge--dot"
+          class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
+          style="right: 10px; top: 10px;"
         >
-          
+          12
         </div>
         
         <button
           aria-disabled="false"
-          class="t-button t-size-s t-button--outline t-button--default t-button--shape-rectangle"
+          class="t-button t-size-s t-button--base t-button--default t-button--shape-rectangle"
           role="button"
         >
           <!---->
@@ -104,7 +895,7 @@ exports[`Badge > Badge buttonVue demo works fine 1`] = `
             class="t-button__text"
           >
             
-            小按钮
+            按钮
             
           </span>
         </button>
@@ -112,20 +903,24 @@ exports[`Badge > Badge buttonVue demo works fine 1`] = `
       </div>
     </div>
     <div
-      class="badge-item"
+      class="badge-line"
     >
+      <span>
+        offset: [-10, 10]
+      </span>
       <div
-        class="t-badge"
+        class="t-badge badge-item"
       >
         <div
           class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
+          style="right: -10px; top: 10px;"
         >
-          16
+          12
         </div>
         
         <button
           aria-disabled="false"
-          class="t-button t-size-s t-button--outline t-button--default t-button--shape-rectangle"
+          class="t-button t-size-s t-button--base t-button--default t-button--shape-rectangle"
           role="button"
         >
           <!---->
@@ -133,7 +928,7 @@ exports[`Badge > Badge buttonVue demo works fine 1`] = `
             class="t-button__text"
           >
             
-            小按钮
+            按钮
             
           </span>
         </button>
@@ -141,20 +936,24 @@ exports[`Badge > Badge buttonVue demo works fine 1`] = `
       </div>
     </div>
     <div
-      class="badge-item"
+      class="badge-line"
     >
+      <span>
+        offset: [-10, -10]
+      </span>
       <div
-        class="t-badge"
+        class="t-badge badge-item"
       >
         <div
           class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
+          style="right: -10px; top: -10px;"
         >
-          NEW
+          12
         </div>
         
         <button
           aria-disabled="false"
-          class="t-button t-size-s t-button--outline t-button--default t-button--shape-rectangle"
+          class="t-button t-size-s t-button--base t-button--default t-button--shape-rectangle"
           role="button"
         >
           <!---->
@@ -162,7 +961,7 @@ exports[`Badge > Badge buttonVue demo works fine 1`] = `
             class="t-button__text"
           >
             
-            小按钮
+            按钮
             
           </span>
         </button>
@@ -170,20 +969,24 @@ exports[`Badge > Badge buttonVue demo works fine 1`] = `
       </div>
     </div>
     <div
-      class="badge-item"
+      class="badge-line"
     >
+      <span>
+        offset: [10, -10]
+      </span>
       <div
-        class="t-badge"
+        class="t-badge badge-item"
       >
         <div
           class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
+          style="right: 10px; top: -10px;"
         >
-          ···
+          12
         </div>
         
         <button
           aria-disabled="false"
-          class="t-button t-size-s t-button--outline t-button--default t-button--shape-rectangle"
+          class="t-button t-size-s t-button--base t-button--default t-button--shape-rectangle"
           role="button"
         >
           <!---->
@@ -191,7 +994,7 @@ exports[`Badge > Badge buttonVue demo works fine 1`] = `
             class="t-button__text"
           >
             
-            小按钮
+            按钮
             
           </span>
         </button>
@@ -202,668 +1005,268 @@ exports[`Badge > Badge buttonVue demo works fine 1`] = `
 </div>
 `;
 
-exports[`Badge > Badge cellVue demo works fine 1`] = `
-<div>
-  <div
-    class="t-cell-group"
-    style="overflow: hidden;"
-  >
-    <!--v-if-->
-    <div
-      class="t-cell-group__container"
-    >
-      
-      <div
-        class="t-cell t-cell--middle t-cell--bordered"
-      >
-        <div
-          class="t-cell__left-icon"
-        >
-          <!--v-if-->
-          <!--v-if-->
-        </div>
-        <div
-          class="t-cell__title"
-        >
-          单行标题
-          <!--v-if-->
-          <!--v-if-->
-        </div>
-        <div
-          class="t-cell__note"
-        >
-          
-          <div
-            class="t-badge"
-          >
-            <div
-              class="t-badge__inner t-badge--medium t-badge--dot"
-            >
-              
-            </div>
-            <!---->
-          </div>
-          
-        </div>
-        <div
-          class="t-cell__right-icon"
-        >
-          <svg
-            class="t-icon t-icon-chevron-right"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </div>
-      </div>
-      <div
-        class="t-cell t-cell--middle t-cell--bordered"
-      >
-        <div
-          class="t-cell__left-icon"
-        >
-          <!--v-if-->
-          <!--v-if-->
-        </div>
-        <div
-          class="t-cell__title"
-        >
-          单行标题
-          <!--v-if-->
-          <!--v-if-->
-        </div>
-        <div
-          class="t-cell__note"
-        >
-          
-          <div
-            class="t-badge"
-          >
-            <div
-              class="t-badge__inner t-badge--medium t-badge--circle"
-            >
-              16
-            </div>
-            <!---->
-          </div>
-          
-        </div>
-        <div
-          class="t-cell__right-icon"
-        >
-          <svg
-            class="t-icon t-icon-chevron-right"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </div>
-      </div>
-      <div
-        class="t-cell t-cell--middle t-cell--bordered"
-      >
-        <div
-          class="t-cell__left-icon"
-        >
-          <!--v-if-->
-          <!--v-if-->
-        </div>
-        <div
-          class="t-cell__title"
-        >
-          单行标题
-          <!--v-if-->
-          <!--v-if-->
-        </div>
-        <div
-          class="t-cell__note"
-        >
-          
-          <div
-            class="t-badge"
-          >
-            <div
-              class="t-badge__inner t-badge--medium t-badge--round"
-            >
-              NEW
-            </div>
-            <!---->
-          </div>
-          <div
-            class="t-badge"
-            style="margin-left: 8px;"
-          >
-            <div
-              class="t-badge__inner t-badge--medium t-badge--circle"
-            >
-              NEW
-            </div>
-            <!---->
-          </div>
-          
-        </div>
-        <div
-          class="t-cell__right-icon"
-        >
-          <svg
-            class="t-icon t-icon-chevron-right"
-            fill="none"
-            height="1em"
-            viewBox="0 0 16 16"
-            width="1em"
-          >
-            <path
-              d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-              fill="currentColor"
-              fill-opacity="0.9"
-            />
-          </svg>
-        </div>
-      </div>
-      <div
-        class="t-cell t-cell--middle t-cell--bordered"
-      >
-        <div
-          class="t-cell__left-icon"
-        >
-          <!--v-if-->
-          <!--v-if-->
-        </div>
-        <div
-          class="t-cell__title"
-        >
-          单行标题
-          <!--v-if-->
-          <!--v-if-->
-        </div>
-        <div
-          class="t-cell__note"
-        >
-          
-          <div
-            class="t-badge t-badge__ribbon--outer"
-          >
-            <div
-              class="t-badge__inner t-badge--medium t-badge--ribbon"
-            >
-              NEW
-            </div>
-            <!---->
-          </div>
-          
-        </div>
-        <!--v-if-->
-      </div>
-      
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Badge > Badge mobileVue demo works fine 1`] = `
+exports[`Badge > Badge shapeVue demo works fine 1`] = `
 <div
   class="tdesign-mobile-demo"
 >
-  <h1
-    class="title"
-  >
-    Badge 徽标
-  </h1>
-  <p
-    class="summary"
-  >
-    用于告知用户，该区域的状态变化或者待处理任务的数量。
-  </p>
   <div
-    class="tdesign-mobile-demo-block"
+    class="badge-demo"
   >
-    <h2
-      class="tdesign-mobile-demo-block__title"
-    >
-      01 类型
-    </h2>
-    <p
-      class="tdesign-mobile-demo-block__summary"
-    >
-      徽标主要分红点、数字、文字和角标提醒
-    </p>
-    
     <div
-      class="tdesign-mobile-demo"
+      class="t-badge badge-item"
     >
       <div
-        class="badge-demo"
+        class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
       >
-        <div
-          class="badge-item"
-        >
-          <div
-            class="t-badge"
-          >
-            <div
-              class="t-badge__inner t-badge--has-children t-badge--medium t-badge--dot"
-            >
-              
-            </div>
-            
-            消息
-            
-          </div>
-        </div>
-        <div
-          class="badge-item"
-        >
-          <div
-            class="t-badge"
-          >
-            <div
-              class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
-            >
-              16
-            </div>
-            
-            消息
-            
-          </div>
-        </div>
-        <div
-          class="badge-item"
-        >
-          <div
-            class="t-badge"
-          >
-            <div
-              class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
-            >
-              NEW
-            </div>
-            
-            消息
-            
-          </div>
-        </div>
-        <div
-          class="badge-item"
-        >
-          <div
-            class="t-badge"
-          >
-            <div
-              class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
-            >
-              ···
-            </div>
-            
-            消息
-            
-          </div>
-        </div>
+        12
+      </div>
+      
+      <button
+        aria-disabled="false"
+        class="t-button t-size-s t-button--base t-button--default t-button--shape-rectangle"
+        role="button"
+      >
+        <!---->
+        <span
+          class="t-button__text"
+        >
+          
+          circle
+          
+        </span>
+      </button>
+      
+    </div>
+    <div
+      class="t-badge badge-item"
+    >
+      <div
+        class="t-badge__inner t-badge--has-children t-badge--medium t-badge--round"
+      >
+        12
       </div>
+      
+      <button
+        aria-disabled="false"
+        class="t-button t-size-s t-button--base t-button--default t-button--shape-rectangle"
+        role="button"
+      >
+        <!---->
+        <span
+          class="t-button__text"
+        >
+          
+          round
+          
+        </span>
+      </button>
+      
     </div>
-    
-  </div>
-  <div
-    class="tdesign-mobile-demo-block"
-  >
-    <!--v-if-->
-    <!--v-if-->
-    
     <div
-      class="tdesign-mobile-demo"
+      class="t-cell-group"
     >
       <div
-        class="badge-demo"
+        class="t-cell-group__title"
+      >
+        
+        列表带徽标
+        
+      </div>
+      <div
+        class="t-cell-group__container"
       >
+        
         <div
-          class="badge-item"
+          class="t-cell t-cell--middle t-cell--bordered"
+          label="单行标题"
         >
           <div
-            class="t-badge"
+            class="t-cell__left-icon"
           >
-            <div
-              class="t-badge__inner t-badge--has-children t-badge--medium t-badge--dot"
-            >
-              
-            </div>
-            
-            <button
-              aria-disabled="false"
-              class="t-button t-size-s t-button--outline t-button--default t-button--shape-rectangle"
-              role="button"
-            >
-              <!---->
-              <span
-                class="t-button__text"
-              >
-                
-                小按钮
-                
-              </span>
-            </button>
-            
+            <!--v-if-->
+            <!--v-if-->
           </div>
-        </div>
-        <div
-          class="badge-item"
-        >
+          <!--v-if-->
           <div
-            class="t-badge"
+            class="t-cell__note"
           >
-            <div
-              class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
-            >
-              16
-            </div>
             
-            <button
-              aria-disabled="false"
-              class="t-button t-size-s t-button--outline t-button--default t-button--shape-rectangle"
-              role="button"
+            <div
+              class="t-badge"
             >
-              <!---->
-              <span
-                class="t-button__text"
+              <div
+                class="t-badge__inner t-badge--medium t-badge--dot"
               >
                 
-                小按钮
-                
-              </span>
-            </button>
+              </div>
+              <!---->
+            </div>
             
           </div>
+          <!--v-if-->
         </div>
         <div
-          class="badge-item"
+          class="t-cell t-cell--middle t-cell--bordered"
+          label="单行标题"
         >
           <div
-            class="t-badge"
+            class="t-cell__left-icon"
           >
-            <div
-              class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
-            >
-              NEW
-            </div>
-            
-            <button
-              aria-disabled="false"
-              class="t-button t-size-s t-button--outline t-button--default t-button--shape-rectangle"
-              role="button"
-            >
-              <!---->
-              <span
-                class="t-button__text"
-              >
-                
-                小按钮
-                
-              </span>
-            </button>
-            
+            <!--v-if-->
+            <!--v-if-->
           </div>
-        </div>
-        <div
-          class="badge-item"
-        >
+          <!--v-if-->
           <div
-            class="t-badge"
+            class="t-cell__note"
           >
+            
             <div
-              class="t-badge__inner t-badge--has-children t-badge--medium t-badge--circle"
+              class="t-badge t-badge__ribbon--outer"
             >
-              ···
+              <!--v-if-->
+              NEW
             </div>
             
-            <button
-              aria-disabled="false"
-              class="t-button t-size-s t-button--outline t-button--default t-button--shape-rectangle"
-              role="button"
-            >
-              <!---->
-              <span
-                class="t-button__text"
-              >
-                
-                小按钮
-                
-              </span>
-            </button>
-            
           </div>
+          <!--v-if-->
         </div>
+        
       </div>
     </div>
-    
   </div>
+</div>
+`;
+
+exports[`Badge > Badge textVue demo works fine 1`] = `
+<div
+  class="tdesign-mobile-demo"
+  data-v-9223ea9e=""
+>
   <div
-    class="tdesign-mobile-demo-block"
+    class="badge-demo"
+    data-v-9223ea9e=""
   >
-    <!--v-if-->
-    <!--v-if-->
-    
-    <div>
+    <div
+      class="t-badge badge-item"
+      data-v-9223ea9e=""
+    >
+      <!--v-if-->
+      
+      <button
+        aria-disabled="false"
+        class="t-button t-size-s t-button--base t-button--default t-button--shape-rectangle"
+        data-v-9223ea9e=""
+        role="button"
+      >
+        <!---->
+        <span
+          class="t-button__text"
+        >
+          
+          NEW
+          
+        </span>
+      </button>
+      
+    </div>
+    <div
+      class="t-badge badge-item"
+      data-v-9223ea9e=""
+    >
+      <!--v-if-->
+      
+      <button
+        aria-disabled="false"
+        class="t-button t-size-s t-button--base t-button--default t-button--shape-rectangle"
+        data-v-9223ea9e=""
+        role="button"
+      >
+        <!---->
+        <span
+          class="t-button__text"
+        >
+          
+          省略号
+          
+        </span>
+      </button>
+      
+    </div>
+  </div>
+  <div
+    class="badge-wrap"
+    data-v-9223ea9e=""
+  >
+    <div
+      class="t-cell-group"
+      data-v-9223ea9e=""
+    >
+      <!--v-if-->
       <div
-        class="t-cell-group"
-        style="overflow: hidden;"
+        class="t-cell-group__container"
       >
-        <!--v-if-->
+        
         <div
-          class="t-cell-group__container"
+          class="t-cell t-cell--middle t-cell--bordered"
+          data-v-9223ea9e=""
+          value-align="left"
         >
-          
           <div
-            class="t-cell t-cell--middle t-cell--bordered"
+            class="t-cell__left-icon"
           >
-            <div
-              class="t-cell__left-icon"
-            >
-              <!--v-if-->
-              <!--v-if-->
-            </div>
-            <div
-              class="t-cell__title"
-            >
-              单行标题
-              <!--v-if-->
-              <!--v-if-->
-            </div>
-            <div
-              class="t-cell__note"
-            >
-              
-              <div
-                class="t-badge"
-              >
-                <div
-                  class="t-badge__inner t-badge--medium t-badge--dot"
-                >
-                  
-                </div>
-                <!---->
-              </div>
-              
-            </div>
-            <div
-              class="t-cell__right-icon"
-            >
-              <svg
-                class="t-icon t-icon-chevron-right"
-                fill="none"
-                height="1em"
-                viewBox="0 0 16 16"
-                width="1em"
-              >
-                <path
-                  d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-                  fill="currentColor"
-                  fill-opacity="0.9"
-                />
-              </svg>
-            </div>
+            <!--v-if-->
+            <!--v-if-->
           </div>
+          <!--v-if-->
           <div
-            class="t-cell t-cell--middle t-cell--bordered"
+            class="t-cell__note"
           >
-            <div
-              class="t-cell__left-icon"
-            >
-              <!--v-if-->
-              <!--v-if-->
-            </div>
-            <div
-              class="t-cell__title"
+            
+            <span
+              data-v-9223ea9e=""
             >
               单行标题
-              <!--v-if-->
-              <!--v-if-->
-            </div>
+            </span>
             <div
-              class="t-cell__note"
+              class="badge-tag-wrap"
+              data-v-9223ea9e=""
             >
-              
               <div
-                class="t-badge"
+                class="t-badge badge-tag"
+                data-v-9223ea9e=""
               >
-                <div
-                  class="t-badge__inner t-badge--medium t-badge--circle"
-                >
-                  16
-                </div>
-                <!---->
+                <!--v-if-->
+                NEW
               </div>
-              
-            </div>
-            <div
-              class="t-cell__right-icon"
-            >
-              <svg
-                class="t-icon t-icon-chevron-right"
-                fill="none"
-                height="1em"
-                viewBox="0 0 16 16"
-                width="1em"
-              >
-                <path
-                  d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-                  fill="currentColor"
-                  fill-opacity="0.9"
-                />
-              </svg>
-            </div>
-          </div>
-          <div
-            class="t-cell t-cell--middle t-cell--bordered"
-          >
-            <div
-              class="t-cell__left-icon"
-            >
-              <!--v-if-->
-              <!--v-if-->
-            </div>
-            <div
-              class="t-cell__title"
-            >
-              单行标题
-              <!--v-if-->
-              <!--v-if-->
-            </div>
-            <div
-              class="t-cell__note"
-            >
-              
               <div
-                class="t-badge"
+                class="t-badge badge-tag"
+                data-v-9223ea9e=""
               >
-                <div
-                  class="t-badge__inner t-badge--medium t-badge--round"
-                >
-                  NEW
-                </div>
-                <!---->
+                <!--v-if-->
+                NEW
               </div>
               <div
-                class="t-badge"
-                style="margin-left: 8px;"
+                class="t-badge badge-tag"
+                data-v-9223ea9e=""
               >
-                <div
-                  class="t-badge__inner t-badge--medium t-badge--circle"
-                >
-                  NEW
-                </div>
-                <!---->
+                <!--v-if-->
+                NEW
               </div>
-              
-            </div>
-            <div
-              class="t-cell__right-icon"
-            >
-              <svg
-                class="t-icon t-icon-chevron-right"
-                fill="none"
-                height="1em"
-                viewBox="0 0 16 16"
-                width="1em"
-              >
-                <path
-                  d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-                  fill="currentColor"
-                  fill-opacity="0.9"
-                />
-              </svg>
-            </div>
-          </div>
-          <div
-            class="t-cell t-cell--middle t-cell--bordered"
-          >
-            <div
-              class="t-cell__left-icon"
-            >
-              <!--v-if-->
-              <!--v-if-->
-            </div>
-            <div
-              class="t-cell__title"
-            >
-              单行标题
-              <!--v-if-->
-              <!--v-if-->
-            </div>
-            <div
-              class="t-cell__note"
-            >
-              
               <div
-                class="t-badge t-badge__ribbon--outer"
+                class="t-badge badge-tag"
+                data-v-9223ea9e=""
               >
-                <div
-                  class="t-badge__inner t-badge--medium t-badge--ribbon"
-                >
-                  NEW
-                </div>
-                <!---->
+                <!--v-if-->
+                NEW
               </div>
-              
             </div>
-            <!--v-if-->
+            
           </div>
-          
+          <!--v-if-->
         </div>
+        
       </div>
     </div>
-    
   </div>
 </div>
 `;
diff --git a/src/badge/__test__/demo.test.jsx b/src/badge/__test__/demo.test.jsx
index be6a0d77..9bd67cff 100644
--- a/src/badge/__test__/demo.test.jsx
+++ b/src/badge/__test__/demo.test.jsx
@@ -3,16 +3,24 @@
  */
 
 import { mount } from '@vue/test-utils';
-import baseVue from '@/badge/demos/base.vue';
-import buttonVue from '@/badge/demos/button.vue';
-import cellVue from '@/badge/demos/cell.vue';
+import basicVue from '@/badge/demos/basic.vue';
+import colorVue from '@/badge/demos/color.vue';
+import distVue from '@/badge/demos/dist.vue';
+import maxCountVue from '@/badge/demos/max-count.vue';
 import mobileVue from '@/badge/demos/mobile.vue';
+import offsetVue from '@/badge/demos/offset.vue';
+import shapeVue from '@/badge/demos/shape.vue';
+import textVue from '@/badge/demos/text.vue';
 
 const mapper = {
-  baseVue,
-  buttonVue,
-  cellVue,
+  basicVue,
+  colorVue,
+  distVue,
+  maxCountVue,
   mobileVue,
+  offsetVue,
+  shapeVue,
+  textVue,
 };
 
 describe('Badge', () => {
diff --git a/src/fab/__test__/__snapshots__/demo.test.jsx.snap b/src/fab/__test__/__snapshots__/demo.test.jsx.snap
index 2c8ee804..fce53e75 100644
--- a/src/fab/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/fab/__test__/__snapshots__/demo.test.jsx.snap
@@ -61,6 +61,38 @@ exports[`Fab > Fab mobileVue demo works fine 1`] = `
       纯图标悬浮按钮
     </p>
     
+    <div
+      class="toast-demo"
+    >
+      <button
+        aria-disabled="false"
+        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+        role="button"
+      >
+        <!---->
+        <span
+          class="t-button__text"
+        >
+          
+          基础使用
+          
+        </span>
+      </button>
+      <button
+        aria-disabled="false"
+        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+        role="button"
+      >
+        <!---->
+        <span
+          class="t-button__text"
+        >
+          
+          进阶使用
+          
+        </span>
+      </button>
+    </div>
     
   </div>
   <div>
@@ -93,6 +125,7 @@ exports[`Fab > Fab mobileVue demo works fine 1`] = `
       </span>
     </button>
   </div>
+  <!--v-if-->
 </div>
 `;
 
@@ -100,9 +133,9 @@ exports[`Fab > Fab textVue demo works fine 1`] = `
 <div>
   <button
     aria-disabled="false"
-    class="t-button t-button--base t-button--default t-button--shape-round t-fab"
+    class="t-button t-button--outline t-button--primary t-button--shape-round t-fab"
     role="button"
-    style="right: 16px; bottom: 96px;"
+    style="right: 16px; bottom: 32px;"
   >
     <!---->
     <span
diff --git a/src/message/__test__/__snapshots__/demo.test.jsx.snap b/src/message/__test__/__snapshots__/demo.test.jsx.snap
index 2d80fc43..b46ae126 100644
--- a/src/message/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/message/__test__/__snapshots__/demo.test.jsx.snap
@@ -1,19 +1,16 @@
 // Vitest Snapshot v1
 
-exports[`Message > Message baseVue demo works fine 1`] = `
+exports[`Message > Message alignVue demo works fine 1`] = `
 <div
   data-v-app=""
 >
   
   <div
-    class="button-demo"
-    data-v-e60c559e=""
-    style="margin: 0px 16px;"
+    class="tdesign-demo-block"
   >
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-      data-v-e60c559e=""
+      class="t-button t-size-m t-button--outline t-button--default t-button--shape-rectangle"
       role="button"
     >
       <!---->
@@ -21,29 +18,34 @@ exports[`Message > Message baseVue demo works fine 1`] = `
         class="t-button__text"
       >
         
-        纯文字通知
-        
-      </span>
-    </button>
-    <button
-      aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-      data-v-e60c559e=""
-      role="button"
-    >
-      <!---->
-      <span
-        class="t-button__text"
-      >
-        
-        带图标通知
+        居中对齐
         
       </span>
     </button>
+  </div>
+  <transition-stub
+    appear="false"
+    css="true"
+    name="message"
+    persisted="false"
+  >
+    <!--v-if-->
+  </transition-stub>
+  
+</div>
+`;
+
+exports[`Message > Message closeVue demo works fine 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <div
+    class="tdesign-demo-block"
+  >
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-      data-v-e60c559e=""
+      class="t-button t-size-m t-button--outline t-button--default t-button--shape-rectangle"
       role="button"
     >
       <!---->
@@ -57,23 +59,7 @@ exports[`Message > Message baseVue demo works fine 1`] = `
     </button>
     <button
       aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-      data-v-e60c559e=""
-      role="button"
-    >
-      <!---->
-      <span
-        class="t-button__text"
-      >
-        
-        滚动通知
-        
-      </span>
-    </button>
-    <button
-      aria-disabled="false"
-      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-      data-v-e60c559e=""
+      class="t-button t-size-m t-button--outline t-button--default t-button--shape-rectangle"
       role="button"
     >
       <!---->
@@ -86,51 +72,52 @@ exports[`Message > Message baseVue demo works fine 1`] = `
       </span>
     </button>
   </div>
-  <!-- 纯文字通知 -->
   <transition-stub
     appear="false"
     css="true"
-    data-v-e60c559e=""
     name="message"
     persisted="false"
   >
     <!--v-if-->
   </transition-stub>
-  <!-- 带图标通知 -->
   <transition-stub
     appear="false"
     css="true"
-    data-v-e60c559e=""
     name="message"
     persisted="false"
   >
     <!--v-if-->
   </transition-stub>
-  <!-- 带关闭通知 -->
-  <transition-stub
-    appear="false"
-    css="true"
-    data-v-e60c559e=""
-    name="message"
-    persisted="false"
-  >
-    <!--v-if-->
-  </transition-stub>
-  <!-- 滚动通知 -->
-  <transition-stub
-    appear="false"
-    css="true"
-    data-v-e60c559e=""
-    name="message"
-    persisted="false"
+  
+</div>
+`;
+
+exports[`Message > Message durationVue demo works fine 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <div
+    class="tdesign-demo-block"
   >
-    <!--v-if-->
-  </transition-stub>
-  <!-- 带按钮通知 -->
+    <button
+      aria-disabled="false"
+      class="t-button t-size-m t-button--outline t-button--default t-button--shape-rectangle"
+      role="button"
+    >
+      <!---->
+      <span
+        class="t-button__text"
+      >
+        
+        5000ms
+        
+      </span>
+    </button>
+  </div>
   <transition-stub
     appear="false"
     css="true"
-    data-v-e60c559e=""
     name="message"
     persisted="false"
   >
@@ -140,6 +127,72 @@ exports[`Message > Message baseVue demo works fine 1`] = `
 </div>
 `;
 
+exports[`Message > Message functionVue demo works fine 1`] = `
+<div
+  class="tdesign-demo-block"
+>
+  <button
+    aria-disabled="false"
+    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle"
+    role="button"
+  >
+    <!---->
+    <span
+      class="t-button__text"
+    >
+      
+      普通
+      
+    </span>
+  </button>
+  <button
+    aria-disabled="false"
+    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle"
+    role="button"
+    style="margin-top: 8px;"
+  >
+    <!---->
+    <span
+      class="t-button__text"
+    >
+      
+      成功
+      
+    </span>
+  </button>
+  <button
+    aria-disabled="false"
+    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle"
+    role="button"
+    style="margin-top: 8px;"
+  >
+    <!---->
+    <span
+      class="t-button__text"
+    >
+      
+      警示
+      
+    </span>
+  </button>
+  <button
+    aria-disabled="false"
+    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle"
+    role="button"
+    style="margin-top: 8px;"
+  >
+    <!---->
+    <span
+      class="t-button__text"
+    >
+      
+      错误
+      
+    </span>
+  </button>
+</div>
+`;
+
 exports[`Message > Message mobileVue demo works fine 1`] = `
 <div
   class="tdesign-mobile-demo"
@@ -168,17 +221,13 @@ exports[`Message > Message mobileVue demo works fine 1`] = `
       弹窗内容为存文本、标题和副标题、带输入框
     </p>
     
-    <!-- &lt;functionDemo /&gt; -->
-    
     <div
       class="button-demo"
-      data-v-e60c559e=""
       style="margin: 0px 16px;"
     >
       <button
         aria-disabled="false"
         class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-        data-v-e60c559e=""
         role="button"
       >
         <!---->
@@ -193,7 +242,6 @@ exports[`Message > Message mobileVue demo works fine 1`] = `
       <button
         aria-disabled="false"
         class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-        data-v-e60c559e=""
         role="button"
       >
         <!---->
@@ -208,7 +256,6 @@ exports[`Message > Message mobileVue demo works fine 1`] = `
       <button
         aria-disabled="false"
         class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-        data-v-e60c559e=""
         role="button"
       >
         <!---->
@@ -223,22 +270,6 @@ exports[`Message > Message mobileVue demo works fine 1`] = `
       <button
         aria-disabled="false"
         class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-        data-v-e60c559e=""
-        role="button"
-      >
-        <!---->
-        <span
-          class="t-button__text"
-        >
-          
-          滚动通知
-          
-        </span>
-      </button>
-      <button
-        aria-disabled="false"
-        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-        data-v-e60c559e=""
         role="button"
       >
         <!---->
@@ -251,57 +282,6 @@ exports[`Message > Message mobileVue demo works fine 1`] = `
         </span>
       </button>
     </div>
-    <!-- 纯文字通知 -->
-    <transition-stub
-      appear="false"
-      css="true"
-      data-v-e60c559e=""
-      name="message"
-      persisted="false"
-    >
-      <!--v-if-->
-    </transition-stub>
-    <!-- 带图标通知 -->
-    <transition-stub
-      appear="false"
-      css="true"
-      data-v-e60c559e=""
-      name="message"
-      persisted="false"
-    >
-      <!--v-if-->
-    </transition-stub>
-    <!-- 带关闭通知 -->
-    <transition-stub
-      appear="false"
-      css="true"
-      data-v-e60c559e=""
-      name="message"
-      persisted="false"
-    >
-      <!--v-if-->
-    </transition-stub>
-    <!-- 滚动通知 -->
-    <transition-stub
-      appear="false"
-      css="true"
-      data-v-e60c559e=""
-      name="message"
-      persisted="false"
-    >
-      <!--v-if-->
-    </transition-stub>
-    <!-- 带按钮通知 -->
-    <transition-stub
-      appear="false"
-      css="true"
-      data-v-e60c559e=""
-      name="message"
-      persisted="false"
-    >
-      <!--v-if-->
-    </transition-stub>
-    
     
   </div>
   <div
@@ -346,7 +326,7 @@ exports[`Message > Message mobileVue demo works fine 1`] = `
           class="t-button__text"
         >
           
-          警示提示通知
+          成功提示通知
           
         </span>
       </button>
@@ -360,7 +340,7 @@ exports[`Message > Message mobileVue demo works fine 1`] = `
           class="t-button__text"
         >
           
-          成功提示通知
+          警示提示通知
           
         </span>
       </button>
@@ -381,17 +361,84 @@ exports[`Message > Message mobileVue demo works fine 1`] = `
     </div>
     
   </div>
+  <transition-stub
+    appear="false"
+    css="true"
+    name="message"
+    persisted="false"
+  >
+    <!--v-if-->
+  </transition-stub>
+  <transition-stub
+    appear="false"
+    css="true"
+    name="message"
+    persisted="false"
+  >
+    <!--v-if-->
+  </transition-stub>
+  <transition-stub
+    appear="false"
+    css="true"
+    name="message"
+    persisted="false"
+  >
+    <!--v-if-->
+  </transition-stub>
+  <transition-stub
+    appear="false"
+    css="true"
+    name="message"
+    persisted="false"
+  >
+    <!--v-if-->
+  </transition-stub>
+  <transition-stub
+    appear="false"
+    css="true"
+    name="message"
+    persisted="false"
+  >
+    <!--v-if-->
+  </transition-stub>
+  <transition-stub
+    appear="false"
+    css="true"
+    name="message"
+    persisted="false"
+  >
+    <!--v-if-->
+  </transition-stub>
+  <transition-stub
+    appear="false"
+    css="true"
+    name="message"
+    persisted="false"
+  >
+    <!--v-if-->
+  </transition-stub>
+  <transition-stub
+    appear="false"
+    css="true"
+    name="message"
+    persisted="false"
+  >
+    <!--v-if-->
+  </transition-stub>
 </div>
 `;
 
-exports[`Message > Message themeVue demo works fine 1`] = `
+exports[`Message > Message offsetVue demo works fine 1`] = `
 <div
-  class="button-demo"
-  style="margin: 0px 16px;"
+  data-v-app=""
 >
+  
+  <div
+    class="tdesign-demo-block"
+  />
   <button
     aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
+    class="t-button t-size-m t-button--outline t-button--default t-button--shape-rectangle"
     role="button"
   >
     <!---->
@@ -399,51 +446,248 @@ exports[`Message > Message themeVue demo works fine 1`] = `
       class="t-button__text"
     >
       
-      普通通知
+       偏移 
       
     </span>
   </button>
-  <button
-    aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-    role="button"
+  <transition-stub
+    appear="false"
+    css="true"
+    name="message"
+    offset="400,100,100"
+    persisted="false"
   >
-    <!---->
-    <span
-      class="t-button__text"
-    >
-      
-      警示提示通知
-      
-    </span>
-  </button>
-  <button
-    aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-    role="button"
+    <!--v-if-->
+  </transition-stub>
+  
+</div>
+`;
+
+exports[`Message > Message textVue demo works fine 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <div
+    class="t-cell t-cell--middle t-cell--bordered tdesign-text-message-btn"
+    data-v-9078f4e6=""
+    value-align="left"
   >
-    <!---->
-    <span
-      class="t-button__text"
+    <div
+      class="t-cell__left-icon"
+    >
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+    <div
+      class="t-cell__note"
     >
       
-      成功提示通知
+      <button
+        aria-disabled="false"
+        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle"
+        data-v-9078f4e6=""
+        role="button"
+      >
+        <!---->
+        <span
+          class="t-button__text"
+        >
+          
+          普通
+          
+        </span>
+      </button>
+      <button
+        aria-disabled="false"
+        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle"
+        data-v-9078f4e6=""
+        role="button"
+      >
+        <!---->
+        <span
+          class="t-button__text"
+        >
+          
+          成功
+          
+        </span>
+      </button>
+      <button
+        aria-disabled="false"
+        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle"
+        data-v-9078f4e6=""
+        role="button"
+      >
+        <!---->
+        <span
+          class="t-button__text"
+        >
+          
+          警示
+          
+        </span>
+      </button>
+      <button
+        aria-disabled="false"
+        class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle"
+        data-v-9078f4e6=""
+        role="button"
+      >
+        <!---->
+        <span
+          class="t-button__text"
+        >
+          
+          错误
+          
+        </span>
+      </button>
       
-    </span>
-  </button>
-  <button
-    aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-    role="button"
+    </div>
+    <!--v-if-->
+  </div>
+  <transition-stub
+    appear="false"
+    css="true"
+    data-v-9078f4e6=""
+    name="message"
+    persisted="false"
   >
-    <!---->
-    <span
-      class="t-button__text"
+    <!--v-if-->
+  </transition-stub>
+  <transition-stub
+    appear="false"
+    css="true"
+    data-v-9078f4e6=""
+    name="message"
+    persisted="false"
+  >
+    <!--v-if-->
+  </transition-stub>
+  <transition-stub
+    appear="false"
+    css="true"
+    data-v-9078f4e6=""
+    name="message"
+    persisted="false"
+  >
+    <!--v-if-->
+  </transition-stub>
+  <transition-stub
+    appear="false"
+    css="true"
+    data-v-9078f4e6=""
+    name="message"
+    persisted="false"
+  >
+    <!--v-if-->
+  </transition-stub>
+  
+</div>
+`;
+
+exports[`Message > Message themeVue demo works fine 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <div
+    class="tdesign-demo-block"
+  >
+    <button
+      aria-disabled="false"
+      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle"
+      role="button"
     >
-      
-      错误提示通知
-      
-    </span>
-  </button>
+      <!---->
+      <span
+        class="t-button__text"
+      >
+        
+        普通
+        
+      </span>
+    </button>
+    <button
+      aria-disabled="false"
+      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle"
+      role="button"
+      style="margin-top: 8px;"
+    >
+      <!---->
+      <span
+        class="t-button__text"
+      >
+        
+        成功
+        
+      </span>
+    </button>
+    <button
+      aria-disabled="false"
+      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle"
+      role="button"
+      style="margin-top: 8px;"
+    >
+      <!---->
+      <span
+        class="t-button__text"
+      >
+        
+        警示
+        
+      </span>
+    </button>
+    <button
+      aria-disabled="false"
+      class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle"
+      role="button"
+      style="margin-top: 8px;"
+    >
+      <!---->
+      <span
+        class="t-button__text"
+      >
+        
+        错误
+        
+      </span>
+    </button>
+  </div>
+  <transition-stub
+    appear="false"
+    css="true"
+    name="message"
+    persisted="false"
+  >
+    <!--v-if-->
+  </transition-stub>
+  <transition-stub
+    appear="false"
+    css="true"
+    name="message"
+    persisted="false"
+  >
+    <!--v-if-->
+  </transition-stub>
+  <transition-stub
+    appear="false"
+    css="true"
+    name="message"
+    persisted="false"
+  >
+    <!--v-if-->
+  </transition-stub>
+  <transition-stub
+    appear="false"
+    css="true"
+    name="message"
+    persisted="false"
+  >
+    <!--v-if-->
+  </transition-stub>
+  
 </div>
 `;
diff --git a/src/message/__test__/demo.test.jsx b/src/message/__test__/demo.test.jsx
index dd471baa..042f74b5 100644
--- a/src/message/__test__/demo.test.jsx
+++ b/src/message/__test__/demo.test.jsx
@@ -3,13 +3,23 @@
  */
 
 import { mount } from '@vue/test-utils';
-import baseVue from '@/message/demos/base.vue';
+import alignVue from '@/message/demos/align.vue';
+import closeVue from '@/message/demos/close.vue';
+import durationVue from '@/message/demos/duration.vue';
+import functionVue from '@/message/demos/function.vue';
 import mobileVue from '@/message/demos/mobile.vue';
+import offsetVue from '@/message/demos/offset.vue';
+import textVue from '@/message/demos/text.vue';
 import themeVue from '@/message/demos/theme.vue';
 
 const mapper = {
-  baseVue,
+  alignVue,
+  closeVue,
+  durationVue,
+  functionVue,
   mobileVue,
+  offsetVue,
+  textVue,
   themeVue,
 };