Repository: Tencent/tdesign-mobile-vue
Pull request #611 (2023-04-20 13:39:19)

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


github-actions[bot]: [<img height="96" alt="失败" src="https://user-images.githubusercontent.com/5378891/75333447-1e63a280-58c1-11ea-975d-235367fd1522.png">](https://github.com/Tencent/tdesign-mobile-vue/actions/runs/4755016835)
<!-- AUTO_PREVIEW_HOOK -->

Patch:
diff --git a/src/toast/demos/base.vue b/src/toast/demos/base.vue
new file mode 100644
index 00000000..a83316e6
--- /dev/null
+++ b/src/toast/demos/base.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="toast-demo">
+    <t-button block size="large" theme="primary" variant="outline" @click="showText()">纯文本</t-button>
+    <t-button block size="large" theme="primary" variant="outline" @click="showMultiText()">多行文字</t-button>
+    <t-button block size="large" theme="primary" variant="outline" @click="showHorizontalText()">带横向图标</t-button>
+    <t-button block size="large" theme="primary" variant="outline" @click="showVerticalText()">带竖向图标</t-button>
+    <t-button block size="large" theme="primary" variant="outline" @click="showLoading()">加载状态</t-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { h, ref } from 'vue';
+import { Toast } from 'tdesign-mobile-vue';
+
+const showText = () => {
+  Toast('轻提示文字内容');
+};
+const showMultiText = () => {
+  Toast('最多一行展示十个汉字宽度限制最多不超过三行文字行文字行文字');
+};
+const showHorizontalText = () => {
+  Toast({
+    theme: 'success',
+    direction: 'row',
+    message: '轻提示文字内容',
+  });
+};
+const showVerticalText = () => {
+  Toast({
+    theme: 'success',
+    direction: 'column',
+    message: '轻提示文字内容',
+  });
+};
+const showLoading = () => {
+  Toast({
+    theme: 'loading',
+    message: '轻提示文字内容',
+  });
+};
+</script>
diff --git a/src/toast/demos/close.vue b/src/toast/demos/close.vue
new file mode 100644
index 00000000..442e0960
--- /dev/null
+++ b/src/toast/demos/close.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="toast-demo">
+    <t-button block size="large" theme="primary" variant="outline" @click="showOverlay">显示提示</t-button>
+    <t-button block size="large" theme="primary" variant="outline" @click="hideToast">关闭提示</t-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Toast } from 'tdesign-mobile-vue';
+
+const showOverlay = () => {
+  Toast({
+    message: '未知点击事件',
+    onClose: () => {
+      console.log('onClose');
+    },
+    onDestroy: () => {
+      console.log('onDestroy');
+    },
+  });
+};
+const hideToast = () => {
+  Toast.clear();
+};
+</script>
diff --git a/src/toast/demos/preventScrollThrough.vue b/src/toast/demos/cover.vue
similarity index 72%
rename from src/toast/demos/preventScrollThrough.vue
rename to src/toast/demos/cover.vue
index b0e34bde..527d3294 100644
--- a/src/toast/demos/preventScrollThrough.vue
+++ b/src/toast/demos/cover.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="toast-demo">
-    <t-button block size="large" variant="outline" @click="showPreventScrollThrough">禁止滑动和点击</t-button>
+    <t-button block size="large" theme="primary" variant="outline" @click="showPreventScrollThrough"
+      >禁止滑动和点击</t-button
+    >
   </div>
 </template>
 
@@ -16,6 +18,7 @@ const showPreventScrollThrough = () => {
     placement: 'bottom',
     duration: 5000,
     preventScrollThrough: true,
+    showOverlay: true,
     icon: () => h(PoweroffIcon),
   });
 };
diff --git a/src/toast/demos/iconText.vue b/src/toast/demos/iconText.vue
deleted file mode 100644
index 32b0a614..00000000
--- a/src/toast/demos/iconText.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-  <div class="toast-demo">
-    <t-button block size="large" variant="outline" @click="showSuccessRow('成功文案')">成功-横向</t-button>
-    <t-button block size="large" variant="outline" @click="showFailRow('失败文案')">警告-横向</t-button>
-    <t-button block size="large" variant="outline" @click="showSuccess('成功文案')">成功-竖向</t-button>
-    <t-button block size="large" variant="outline" @click="showFail('失败文案')">警告-竖向</t-button>
-    <t-button block size="large" variant="outline" @click="showLoading('加载中...')">加载</t-button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Toast } from 'tdesign-mobile-vue';
-
-const showSuccess = (message?: string) => {
-  Toast({
-    theme: 'success',
-    direction: 'column',
-    message,
-  });
-};
-const showFail = (message: string) => {
-  Toast({
-    theme: 'fail',
-    direction: 'column',
-    message,
-  });
-};
-const showSuccessRow = (message: string) => {
-  Toast({
-    theme: 'success',
-    direction: 'row',
-    message,
-  });
-};
-const showFailRow = (message: string) => {
-  Toast({
-    theme: 'fail',
-    direction: 'row',
-    message,
-  });
-};
-
-const showLoading = (message: string) => {
-  Toast({
-    theme: 'loading',
-    message,
-  });
-};
-</script>
diff --git a/src/toast/demos/mask.vue b/src/toast/demos/mask.vue
deleted file mode 100644
index 88341ff1..00000000
--- a/src/toast/demos/mask.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <div class="toast-demo">
-    <t-button block size="large" variant="outline" @click="showOverlay">显示提示</t-button>
-    <t-button block size="large" variant="outline" @click="hideToast">关闭提示</t-button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Toast } from 'tdesign-mobile-vue';
-
-const showOverlay = () => {
-  Toast({ message: '未知点击事件' });
-};
-const hideToast = () => {
-  Toast.clear();
-};
-</script>
diff --git a/src/toast/demos/mobile.vue b/src/toast/demos/mobile.vue
index e441f784..98300a52 100644
--- a/src/toast/demos/mobile.vue
+++ b/src/toast/demos/mobile.vue
@@ -2,32 +2,24 @@
   <div class="tdesign-mobile-demo">
     <h1 class="title">Toast 轻提示</h1>
     <p class="summary">一种轻量级反馈或提示，不会打断用户操作。</p>
-    <tdesign-demo-block title="01 类型" summary="基础提示">
-      <textDemo />
+    <tdesign-demo-block title="01 组件类型" summary="基础提示">
+      <baseDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="默认提示">
-      <iconTextDemo />
-    </tdesign-demo-block>
-    <tdesign-demo-block title="02 展示位置和展示时间" summary="弹窗展示位置为顶部、中部、底部三种，展示时间可自定义">
-      <positionDemo />
+    <tdesign-demo-block title="01 组件状态" summary="内置主题">
+      <themeDemo />
     </tdesign-demo-block>
     <tdesign-demo-block title="03 显示遮罩" summary="弹窗可显示遮罩，禁止滑动和点击">
-      <preventScrollThroughDemo />
+      <coverDemo />
     </tdesign-demo-block>
     <tdesign-demo-block title="04 手动关闭" summary="手动关闭轻提示">
-      <maskDemo />
-    </tdesign-demo-block>
-    <tdesign-demo-block title="05 透传 Overlay" summary="向 Overlay 遮罩透传属性">
-      <overlayDemo />
+      <closeDemo />
     </tdesign-demo-block>
   </div>
 </template>
 
 <script lang="ts" setup>
-import textDemo from './text.vue';
-import iconTextDemo from './iconText.vue';
-import positionDemo from './position.vue';
-import maskDemo from './mask.vue';
-import preventScrollThroughDemo from './preventScrollThrough.vue';
-import overlayDemo from './overlay.vue';
+import baseDemo from './base.vue';
+import themeDemo from './theme.vue';
+import coverDemo from './cover.vue';
+import closeDemo from './close.vue';
 </script>
diff --git a/src/toast/demos/overlay.vue b/src/toast/demos/overlay.vue
deleted file mode 100644
index a449d4e4..00000000
--- a/src/toast/demos/overlay.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <div class="toast-demo">
-    <div class="toast-demo">
-      <t-button block size="large" variant="outline" @click="showOverlayProps">可滑动和点击透明遮罩</t-button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Toast } from 'tdesign-mobile-vue';
-
-const showOverlayProps = () => {
-  Toast({
-    theme: 'loading',
-    message: '加载中...',
-    showOverlay: true,
-    overlayProps: { backgroundColor: 'transparent', visible: true },
-    preventScrollThrough: false,
-  });
-};
-</script>
diff --git a/src/toast/demos/position.vue b/src/toast/demos/position.vue
deleted file mode 100644
index 3bfb8d74..00000000
--- a/src/toast/demos/position.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <div class="toast-demo">
-    <t-button block size="large" variant="outline" @click="showPositionAndDuration('top', 1000, '顶部-展示1秒')"
-      >顶部展示1秒</t-button
-    >
-    <t-button block size="large" variant="outline" @click="showPositionAndDuration('middle', 2000, '中间-展示2秒')"
-      >中间展示2秒</t-button
-    >
-    <t-button block size="large" variant="outline" @click="showPositionAndDuration('bottom', 3000, '底部-展示3秒')"
-      >底部展示3秒</t-button
-    >
-  </div>
-</template>
-
-<script setup lang="ts">
-import { h } from 'vue';
-import { StarIcon } from 'tdesign-icons-vue-next';
-import { Toast } from 'tdesign-mobile-vue';
-
-type Placement = 'top' | 'middle' | 'bottom';
-
-const showPositionAndDuration = (placement: Placement, duration: number, message: string) => {
-  Toast({
-    placement,
-    message,
-    duration,
-    icon: () => h(StarIcon),
-    direction: 'column',
-  });
-};
-</script>
diff --git a/src/toast/demos/text.vue b/src/toast/demos/text.vue
deleted file mode 100644
index e7acd2a2..00000000
--- a/src/toast/demos/text.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <div class="toast-demo">
-    <t-button block size="large" variant="outline" @click="showText(text1)">纯文本</t-button>
-    <t-button block size="large" variant="outline" @click="showWithIcon(text1, 'row')">带图标-横向</t-button>
-    <t-button block size="large" variant="outline" @click="showWithIcon(text1, 'column')">带图标-竖向</t-button>
-    <t-button block size="large" variant="outline" @click="showText(text2)">纯文本最大高度</t-button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { h, ref } from 'vue';
-import { UserIcon } from 'tdesign-icons-vue-next';
-import { Toast } from 'tdesign-mobile-vue';
-
-const text1 = ref('轻提示文字内容');
-const text2 = ref('最多一行展示十个汉字宽度限制最多不超过三行文字行文字行文字');
-const showText = (message: string) => {
-  Toast(message);
-};
-const showWithIcon = (message: string, direction: any) => {
-  Toast({
-    icon: () => h(UserIcon),
-    direction,
-    duration: 10000,
-    message,
-  });
-};
-</script>
diff --git a/src/toast/demos/theme.vue b/src/toast/demos/theme.vue
new file mode 100644
index 00000000..8be58eb2
--- /dev/null
+++ b/src/toast/demos/theme.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="toast-demo">
+    <t-button block size="large" theme="primary" variant="outline" @click="showSuccessToast()">成功提示</t-button>
+    <t-button block size="large" theme="primary" variant="outline" @click="showWarningToast()">警告提示</t-button>
+    <t-button block size="large" theme="primary" variant="outline" @click="showErrorToast()">错误提示</t-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { h, ref } from 'vue';
+import { Toast } from 'tdesign-mobile-vue';
+import { ErrorCircleIcon } from 'tdesign-icons-vue-next';
+
+const showSuccessToast = () => {
+  Toast({
+    theme: 'success',
+    direction: 'column',
+    message: '轻提示文字内容',
+  });
+};
+const showWarningToast = () => {
+  Toast({
+    icon: () => h(ErrorCircleIcon),
+    direction: 'column',
+    message: '轻提示文字内容',
+  });
+};
+const showErrorToast = () => {
+  Toast({
+    theme: 'error',
+    direction: 'column',
+    message: '轻提示文字内容',
+  });
+};
+</script>
diff --git a/src/toast/index.ts b/src/toast/index.ts
index 860890cd..141f8c29 100644
--- a/src/toast/index.ts
+++ b/src/toast/index.ts
@@ -31,10 +31,19 @@ function Toast(props: string | Partial<TdToastProps>): DefineComponent<TdToastPr
     clearTimeout(instance.timer);
     app.unmount();
     root.remove();
+    if (propsObject.onClose) {
+      propsObject.onClose();
+    }
+    instance = null;
   };
 
   if (propsObject.duration && propsObject.duration > 0) {
-    instance.timer = setTimeout(instance.clear, propsObject.duration);
+    instance.timer = setTimeout(() => {
+      instance.clear();
+      if (propsObject.onDestroy) {
+        propsObject.onDestroy();
+      }
+    }, propsObject.duration);
   }
 
   app = createApp(instance, { ...propsObject });
@@ -49,7 +58,7 @@ Toast.clear = () => {
   }
 };
 
-(['loading', 'success', 'fail'] as TdToastProps['theme'][]).forEach((type): void => {
+(['loading', 'success', 'error'] as TdToastProps['theme'][]).forEach((type): void => {
   if (!type) {
     return;
   }
@@ -87,7 +96,7 @@ type ToastApi = {
   /** 展示成功提示 */
   success: (options?: Partial<TdToastProps> | string) => void;
   /** 展示失败提示 */
-  fail: (options?: Partial<TdToastProps> | string) => void;
+  error: (options?: Partial<TdToastProps> | string) => void;
   /** 关闭提示 */
   clear: () => void;
 };
diff --git a/src/toast/props.ts b/src/toast/props.ts
index 106ced7e..2128808f 100644
--- a/src/toast/props.ts
+++ b/src/toast/props.ts
@@ -53,7 +53,11 @@ export default {
     type: String as PropType<TdToastProps['theme']>,
     validator(val: TdToastProps['theme']): boolean {
       if (!val) return true;
-      return ['loading', 'success', 'fail'].includes(val);
+      return ['loading', 'success', 'error'].includes(val);
     },
   },
+  /** 轻提示隐藏的时候触发 */
+  onClose: Function as PropType<TdToastProps['onClose']>,
+  /** 轻提示销毁的时候触发 */
+  onDestroy: Function as PropType<TdToastProps['onDestroy']>,
 };
diff --git a/src/toast/style/index.js b/src/toast/style/index.js
index a60c367d..30fac025 100644
--- a/src/toast/style/index.js
+++ b/src/toast/style/index.js
@@ -1,1 +1,2 @@
-import '../../_common/style/mobile/components/toast/_index.less';
+// import '../../_common/style/mobile/components/toast/_index.less';
+import '../../_common/style/mobile/components/toast/v2/_index.less';
diff --git a/src/toast/toast.en-US.md b/src/toast/toast.en-US.md
new file mode 100644
index 00000000..77faaec7
--- /dev/null
+++ b/src/toast/toast.en-US.md
@@ -0,0 +1,24 @@
+:: BASE_DOC ::
+
+## API
+### Toast Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+direction | String | row | options：row/column | N
+duration | Number | 2000 | \- | N
+icon | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+message | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+overlayProps | Object | {} | Typescript：`OverlayProps `，[Overlay API Documents](./overlay?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/toast/type.ts) | N
+preventScrollThrough | Boolean | false | \- | N
+showOverlay | Boolean | false | \- | N
+theme | String | - | options：loading/success/error | N
+onClose | Function |  | Typescript：`() => void`<br/> | N
+onDestroy | Function |  | Typescript：`() => void`<br/> | N
+
+### Toast Events
+
+name | params | description
+-- | -- | --
+close | \- | \-
+Destroy | \- | \-
diff --git a/src/toast/toast.md b/src/toast/toast.md
index 703b1755..3d07c945 100644
--- a/src/toast/toast.md
+++ b/src/toast/toast.md
@@ -7,10 +7,19 @@
 -- | -- | -- | -- | --
 direction | String | row | 图标排列方式。可选项：row/column | N
 duration | Number | 2000 | 弹窗显示毫秒数 | N
-icon | String / Slot / Function | - | 自定义图标。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-message | String / Slot / Function | - | 弹窗显示文字。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-overlayProps | Object | {} | 遮罩层属性，透传至 Overlay | N
+icon | String / Slot / Function | - | 自定义图标。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+message | String / Slot / Function | - | 弹窗显示文字。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+overlayProps | Object | {} | 遮罩层属性，透传至 Overlay。TS 类型：`OverlayProps `，[Overlay API Documents](./overlay?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/toast/type.ts) | N
 placement | String | middle | 弹窗展示位置。可选项： top/middle/bottom | N
 preventScrollThrough | Boolean | false | 防止滚动穿透，即不允许点击和滚动 | N
 showOverlay | Boolean | false | 是否显示遮罩层 | N
-theme | String | - | 提示类型。可选项：loading/success/fail | N
+theme | String | - | 提示类型。可选项：loading/success/error | N
+onClose | Function |  | TS 类型：`() => void`<br/>轻提示隐藏的时候触发 | N
+onDestroy | Function |  | TS 类型：`() => void`<br/>轻提示销毁的时候触发 | N
+
+### Toast Events
+
+名称 | 参数 | 描述
+-- | -- | --
+close | \- | 轻提示隐藏的时候触发
+destroy | \- | 轻提示销毁的时候触发
diff --git a/src/toast/toast.vue b/src/toast/toast.vue
index e750c7fd..fa3fc93b 100644
--- a/src/toast/toast.vue
+++ b/src/toast/toast.vue
@@ -1,9 +1,11 @@
 <template>
   <div>
     <t-overlay v-bind="customOverlayProps" />
-    <div :class="classes">
-      <t-node :content="iconContent"></t-node>
-      <div v-if="messageContent" :class="`${name}__text`">
+    <div :class="classes" :style="{ top: placement === 'top' ? '25%' : placement === 'bottom' ? '75%' : '45%' }">
+      <div :class="iconClasses">
+        <t-node :content="iconContent"></t-node>
+      </div>
+      <div v-if="messageContent" :class="textClasses">
         <t-node :content="messageContent"></t-node>
       </div>
     </div>
@@ -11,7 +13,7 @@
 </template>
 
 <script lang="ts">
-import { LoadingIcon, CheckCircleIcon, ErrorCircleIcon } from 'tdesign-icons-vue-next';
+import { LoadingIcon, CheckCircleIcon, CloseCircleIcon } from 'tdesign-icons-vue-next';
 import { computed, toRefs, ref, defineComponent, getCurrentInstance, h } from 'vue';
 import { renderTNode, TNode } from '../shared';
 import TOverlay from '../overlay';
@@ -29,10 +31,13 @@ export default defineComponent({
     const toastTypeIcon = {
       loading: LoadingIcon,
       success: CheckCircleIcon,
-      fail: ErrorCircleIcon,
+      error: CloseCircleIcon,
     };
+    // 获取当前实例-单例
     const internalInstance = getCurrentInstance();
+    // 内容渲染
     const messageContent = computed(() => renderTNode(internalInstance, 'message'));
+    // 图标渲染
     const iconContent = computed(() => {
       let iconNode = renderTNode(internalInstance, 'icon');
       if (iconNode === undefined && props.theme) {
@@ -43,13 +48,25 @@ export default defineComponent({
 
     const classes = computed(() => [
       `${name}`,
+      `${name}__content`,
+      `${name}__icon`,
       {
         [`${name}--${props.direction}`]: props.direction,
-        [`${name}--text`]: !iconContent.value,
-        [`${name}--icononly`]: !messageContent.value && iconContent.value,
-        [`${name}--top`]: props.placement === 'top',
-        [`${name}--middle`]: props.placement === 'middle',
-        [`${name}--bottom`]: props.placement === 'bottom',
+        [`${name}__content--${props.direction}`]: props.direction,
+        [`${name}--loading`]: props.theme === 'loading',
+      },
+    ]);
+
+    const textClasses = computed(() => [
+      {
+        [`${name}__text`]: !iconContent.value,
+        [`${name}__text--${props.direction}`]: props.direction,
+      },
+    ]);
+
+    const iconClasses = computed(() => [
+      {
+        [`${name}__icon--${props.direction}`]: props.direction,
       },
     ]);
 
@@ -68,6 +85,8 @@ export default defineComponent({
     return {
       name: ref(name),
       classes,
+      textClasses,
+      iconClasses,
       iconContent,
       messageContent,
       customOverlayProps,
diff --git a/src/toast/type.ts b/src/toast/type.ts
index f8b7720d..572bc584 100644
--- a/src/toast/type.ts
+++ b/src/toast/type.ts
@@ -49,5 +49,13 @@ export interface TdToastProps {
   /**
    * 提示类型
    */
-  theme?: 'loading' | 'success' | 'fail';
+  theme?: 'loading' | 'success' | 'error';
+  /**
+   * 轻提示隐藏的时候触发
+   */
+  onClose?: () => void;
+  /**
+   * 轻提示销毁的时候触发
+   */
+  onDestroy?: () => void;
 }


Test patch:
diff --git a/src/toast/__test__/__snapshots__/demo.test.jsx.snap b/src/toast/__test__/__snapshots__/demo.test.jsx.snap
index dde0f953..3221d6a6 100644
--- a/src/toast/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/toast/__test__/__snapshots__/demo.test.jsx.snap
@@ -1,12 +1,12 @@
 // Vitest Snapshot v1
 
-exports[`Toast > Toast iconTextVue demo works fine 1`] = `
+exports[`Toast > Toast baseVue demo works fine 1`] = `
 <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"
+    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
     role="button"
   >
     <!---->
@@ -14,13 +14,13 @@ exports[`Toast > Toast iconTextVue 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"
+    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
     role="button"
   >
     <!---->
@@ -28,13 +28,13 @@ exports[`Toast > Toast iconTextVue 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"
+    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
     role="button"
   >
     <!---->
@@ -42,13 +42,13 @@ exports[`Toast > Toast iconTextVue 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"
+    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
     role="button"
   >
     <!---->
@@ -56,13 +56,13 @@ exports[`Toast > Toast iconTextVue 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"
+    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
     role="button"
   >
     <!---->
@@ -70,20 +70,20 @@ exports[`Toast > Toast iconTextVue demo works fine 1`] = `
       class="t-button__text"
     >
       
-      加载
+      加载状态
       
     </span>
   </button>
 </div>
 `;
 
-exports[`Toast > Toast maskVue demo works fine 1`] = `
+exports[`Toast > Toast closeVue demo works fine 1`] = `
 <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"
+    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
     role="button"
   >
     <!---->
@@ -97,7 +97,7 @@ exports[`Toast > Toast maskVue 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"
+    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
     role="button"
   >
     <!---->
@@ -112,6 +112,27 @@ exports[`Toast > Toast maskVue demo works fine 1`] = `
 </div>
 `;
 
+exports[`Toast > Toast coverVue demo works fine 1`] = `
+<div
+  class="toast-demo"
+>
+  <button
+    aria-disabled="false"
+    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
+    role="button"
+  >
+    <!---->
+    <span
+      class="t-button__text"
+    >
+      
+      禁止滑动和点击
+      
+    </span>
+  </button>
+</div>
+`;
+
 exports[`Toast > Toast mobileVue demo works fine 1`] = `
 <div
   class="tdesign-mobile-demo"
@@ -135,7 +156,7 @@ exports[`Toast > Toast mobileVue demo works fine 1`] = `
       <h2
         class="tdesign-mobile-demo-block__title"
       >
-        01 类型
+        01 组件类型
       </h2>
       <p
         class="tdesign-mobile-demo-block__summary"
@@ -152,7 +173,7 @@ exports[`Toast > Toast 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"
+          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
           role="button"
         >
           <!---->
@@ -166,7 +187,7 @@ exports[`Toast > Toast mobileVue 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"
+          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
           role="button"
         >
           <!---->
@@ -174,13 +195,13 @@ exports[`Toast > Toast mobileVue 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"
+          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
           role="button"
         >
           <!---->
@@ -188,13 +209,13 @@ exports[`Toast > Toast mobileVue 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"
+          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
           role="button"
         >
           <!---->
@@ -202,37 +223,13 @@ exports[`Toast > Toast mobileVue demo works fine 1`] = `
             class="t-button__text"
           >
             
-            纯文本最大高度
+            带竖向图标
             
           </span>
         </button>
-      </div>
-      
-    </div>
-  </div>
-  <div
-    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
-  >
-    <div
-      class="tdesign-mobile-demo-block__header"
-    >
-      <!--v-if-->
-      <p
-        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
-      >
-        默认提示
-      </p>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block__slot"
-    >
-      
-      <div
-        class="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"
+          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
           role="button"
         >
           <!---->
@@ -240,63 +237,7 @@ exports[`Toast > Toast mobileVue 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"
-        >
-          <!---->
-          <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>
-        <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>
@@ -313,12 +254,12 @@ exports[`Toast > Toast mobileVue demo works fine 1`] = `
       <h2
         class="tdesign-mobile-demo-block__title"
       >
-        02 展示位置和展示时间
+        01 组件状态
       </h2>
       <p
         class="tdesign-mobile-demo-block__summary"
       >
-        弹窗展示位置为顶部、中部、底部三种，展示时间可自定义
+        内置主题
       </p>
     </div>
     <div
@@ -330,7 +271,7 @@ exports[`Toast > Toast 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"
+          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
           role="button"
         >
           <!---->
@@ -338,13 +279,13 @@ exports[`Toast > Toast mobileVue demo works fine 1`] = `
             class="t-button__text"
           >
             
-            顶部展示1秒
+            成功提示
             
           </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"
+          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
           role="button"
         >
           <!---->
@@ -352,13 +293,13 @@ exports[`Toast > Toast mobileVue demo works fine 1`] = `
             class="t-button__text"
           >
             
-            中间展示2秒
+            警告提示
             
           </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"
+          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
           role="button"
         >
           <!---->
@@ -366,7 +307,7 @@ exports[`Toast > Toast mobileVue demo works fine 1`] = `
             class="t-button__text"
           >
             
-            底部展示3秒
+            错误提示
             
           </span>
         </button>
@@ -400,7 +341,7 @@ exports[`Toast > Toast 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"
+          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
           role="button"
         >
           <!---->
@@ -442,7 +383,7 @@ exports[`Toast > Toast 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"
+          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
           role="button"
         >
           <!---->
@@ -456,7 +397,7 @@ exports[`Toast > Toast mobileVue 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"
+          class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
           role="button"
         >
           <!---->
@@ -472,171 +413,16 @@ exports[`Toast > Toast mobileVue demo works fine 1`] = `
       
     </div>
   </div>
-  <div
-    class="tdesign-mobile-demo-block"
-  >
-    <div
-      class="tdesign-mobile-demo-block__header"
-    >
-      <h2
-        class="tdesign-mobile-demo-block__title"
-      >
-        05 透传 Overlay
-      </h2>
-      <p
-        class="tdesign-mobile-demo-block__summary"
-      >
-        向 Overlay 遮罩透传属性
-      </p>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block__slot"
-    >
-      
-      <div
-        class="toast-demo"
-      >
-        <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>
-        </div>
-      </div>
-      
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Toast > Toast overlayVue demo works fine 1`] = `
-<div
-  class="toast-demo"
->
-  <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>
-  </div>
-</div>
-`;
-
-exports[`Toast > Toast positionVue demo works fine 1`] = `
-<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"
-    >
-      
-      顶部展示1秒
-      
-    </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"
-    >
-      
-      中间展示2秒
-      
-    </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"
-    >
-      
-      底部展示3秒
-      
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Toast > Toast preventScrollThroughVue demo works fine 1`] = `
-<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>
 </div>
 `;
 
-exports[`Toast > Toast textVue demo works fine 1`] = `
+exports[`Toast > Toast themeVue demo works fine 1`] = `
 <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"
+    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
     role="button"
   >
     <!---->
@@ -644,13 +430,13 @@ exports[`Toast > Toast textVue 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"
+    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
     role="button"
   >
     <!---->
@@ -658,13 +444,13 @@ exports[`Toast > Toast textVue 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"
+    class="t-button t-size-l t-button--outline t-button--primary t-button--shape-rectangle t-is-block"
     role="button"
   >
     <!---->
@@ -672,7 +458,7 @@ exports[`Toast > Toast textVue demo works fine 1`] = `
       class="t-button__text"
     >
       
-      纯文本最大高度
+      错误提示
       
     </span>
   </button>
diff --git a/src/toast/__test__/demo.test.jsx b/src/toast/__test__/demo.test.jsx
index e0125bda..f61dab9b 100644
--- a/src/toast/__test__/demo.test.jsx
+++ b/src/toast/__test__/demo.test.jsx
@@ -3,22 +3,18 @@
  */
 
 import { mount } from '@vue/test-utils';
-import iconTextVue from '@/toast/demos/iconText.vue';
-import maskVue from '@/toast/demos/mask.vue';
+import baseVue from '@/toast/demos/base.vue';
+import closeVue from '@/toast/demos/close.vue';
+import coverVue from '@/toast/demos/cover.vue';
 import mobileVue from '@/toast/demos/mobile.vue';
-import overlayVue from '@/toast/demos/overlay.vue';
-import positionVue from '@/toast/demos/position.vue';
-import preventScrollThroughVue from '@/toast/demos/preventScrollThrough.vue';
-import textVue from '@/toast/demos/text.vue';
+import themeVue from '@/toast/demos/theme.vue';
 
 const mapper = {
-  iconTextVue,
-  maskVue,
+  baseVue,
+  closeVue,
+  coverVue,
   mobileVue,
-  overlayVue,
-  positionVue,
-  preventScrollThroughVue,
-  textVue,
+  themeVue,
 };
 
 describe('Toast', () => {
diff --git a/src/toast/__test__/index.test.jsx b/src/toast/__test__/index.test.jsx
index d2ce7bcc..1f9ab569 100644
--- a/src/toast/__test__/index.test.jsx
+++ b/src/toast/__test__/index.test.jsx
@@ -25,7 +25,7 @@ describe('Toast', () => {
           icon,
         },
       });
-      expect(wrapper.find('.t-toast > svg').classes()).toContain('t-icon');
+      expect(wrapper.findComponent(LoadingIcon).exists()).toBeTruthy();
     });
 
     it(': message', async () => {
@@ -47,20 +47,6 @@ describe('Toast', () => {
       expect(wrapper.findComponent(Overlay).vm.duration).toEqual(1000);
     });
 
-    it(': placement', async () => {
-      const wrapper = mount(Toast, {
-        props: {
-          placement: 'top',
-        },
-      });
-      expect(wrapper.find('.t-toast').classes()).toContain('t-toast--top');
-      await wrapper.setProps({
-        placement: 'bottom',
-      });
-      expect(wrapper.find('.t-toast').classes()).not.toContain('t-toast--top');
-      expect(wrapper.find('.t-toast').classes()).toContain('t-toast--bottom');
-    });
-
     it(': showOverlay', async () => {
       const wrapper = mount(Toast, {
         props: {