diff --git a/devui/toast/index.ts b/devui/toast/index.ts
index f67734333521b6e1c24edde008a595be9ed4f04c..de346b3442243e6286e8ae2fe78e2f2452812464 100644
--- a/devui/toast/index.ts
+++ b/devui/toast/index.ts
@@ -2,11 +2,17 @@ import type { App } from 'vue'
 import Toast from './src/toast'
 import ToastService from './src/toast-service'
 
-Toast.install = function (app: App) {
+Toast.install = function(app: App) {
   app.component(Toast.name, Toast)
-  app.config.globalProperties.$toastService = ToastService
 }
 
-export { ToastService }
+export { Toast, ToastService }
 
-export default Toast
+export default {
+  title: 'Toast 全局提示',
+  category: '反馈',
+  install(app: App): void {
+    app.use(Toast as any)
+    app.config.globalProperties.$toastService = ToastService
+  }
+}
diff --git a/devui/toast/hooks/use-toast-constant.ts b/devui/toast/src/hooks/use-toast-constant.ts
similarity index 100%
rename from devui/toast/hooks/use-toast-constant.ts
rename to devui/toast/src/hooks/use-toast-constant.ts
diff --git a/devui/toast/hooks/use-toast-event.ts b/devui/toast/src/hooks/use-toast-event.ts
similarity index 92%
rename from devui/toast/hooks/use-toast-event.ts
rename to devui/toast/src/hooks/use-toast-event.ts
index 26ff6e036b15bb26aeca38d2c2729bab95f82915..45c7f16fa90c48990214f21058f0d17f7606c061 100644
--- a/devui/toast/hooks/use-toast-event.ts
+++ b/devui/toast/src/hooks/use-toast-event.ts
@@ -1,5 +1,5 @@
 import { getCurrentInstance } from 'vue'
-import { Message } from '../src/toast.type'
+import { Message } from '../toast-types'
 import { useToastConstant } from './use-toast-constant'
 
 const { ANIMATION_TIME } = useToastConstant()
diff --git a/devui/toast/hooks/use-toast-helper.ts b/devui/toast/src/hooks/use-toast-helper.ts
similarity index 100%
rename from devui/toast/hooks/use-toast-helper.ts
rename to devui/toast/src/hooks/use-toast-helper.ts
diff --git a/devui/toast/src/hooks/use-toast-z-index.ts b/devui/toast/src/hooks/use-toast-z-index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..22e2519012a7176b0921bc3c8b1e5bd4abe521bf
--- /dev/null
+++ b/devui/toast/src/hooks/use-toast-z-index.ts
@@ -0,0 +1,5 @@
+export let toastZIndex = 1060
+
+export function toastIncrease() {
+  toastZIndex++
+}
diff --git a/devui/toast/src/toast-icon-close.tsx b/devui/toast/src/toast-icon-close.tsx
index f1aa549353e6a7ca4641adb3c695628672ff333b..6ded5f19fb3cae699bb74a8ee518b9bbe97f9f26 100644
--- a/devui/toast/src/toast-icon-close.tsx
+++ b/devui/toast/src/toast-icon-close.tsx
@@ -1,5 +1,5 @@
 import { defineComponent, PropType } from 'vue'
-import DIcon from '../../icon'
+import { Icon } from '../../icon'
 
 export default defineComponent({
   name: 'DToastIconClose',
@@ -15,7 +15,7 @@ export default defineComponent({
 
     return (
       <div class={wrapperCls} onClick={(e) => $emit('click', e)}>
-        <DIcon name="close" size="14px" />
+        <Icon name="close" size="14px" />
       </div>
     )
   }
diff --git a/devui/toast/src/toast-image.tsx b/devui/toast/src/toast-image.tsx
index d009677d287d7804e5ea3393b66d114ea62fb047..8c6c74242471e7705bb63fa30dc0db0a71677da5 100644
--- a/devui/toast/src/toast-image.tsx
+++ b/devui/toast/src/toast-image.tsx
@@ -1,6 +1,6 @@
 import { defineComponent, PropType } from 'vue'
-import { IToastSeverity } from './toast.type'
-import DIcon from '../../icon'
+import { IToastSeverity } from './toast-types'
+import { Icon } from '../../icon'
 
 export default defineComponent({
   name: 'DToastImage',
@@ -22,6 +22,6 @@ export default defineComponent({
 
     const showIcon = () => severity !== 'common'
 
-    return <span class={wrapperCls}>{showIcon() ? <DIcon name={severityIconMap[severity]} /> : null}</span>
+    return <span class={wrapperCls}>{showIcon() ? <Icon name={severityIconMap[severity]} size="14px" /> : null}</span>
   }
 })
diff --git a/devui/toast/src/toast-service.ts b/devui/toast/src/toast-service.ts
index e1813e55496cc4271e99e2903cd9caabce9fe120..bb72303cc24e700c6f96cdafa5e9556d93f408cb 100644
--- a/devui/toast/src/toast-service.ts
+++ b/devui/toast/src/toast-service.ts
@@ -1,9 +1,9 @@
-import { App, ComponentPublicInstance, createApp, onUnmounted } from 'vue'
-import { ToastProps } from './toast.type'
-import DToast from './toast'
+import { createApp, onUnmounted } from 'vue'
+import { ToastProps } from './toast-types'
+import Toast from './toast'
 
 function createToastApp(props: Record<string, any>) {
-  return createApp(DToast, props)
+  return createApp(Toast, props)
 }
 
 class ToastService {
diff --git a/devui/toast/src/toast.type.ts b/devui/toast/src/toast-types.ts
similarity index 100%
rename from devui/toast/src/toast.type.ts
rename to devui/toast/src/toast-types.ts
diff --git a/devui/toast/src/toast.scss b/devui/toast/src/toast.scss
index 210b45e55c785495d73b4ebc870010eb4eeb8a7f..3f8c25127153904b0b75f22c09057057868c90cd 100644
--- a/devui/toast/src/toast.scss
+++ b/devui/toast/src/toast.scss
@@ -79,13 +79,9 @@
   height: 16px;
   border-radius: 50%;
   left: 16px;
-  top: 14px;
+  top: 10px;
   padding: 0;
 
-  & i.icon {
-    vertical-align: 0;
-  }
-
   &.devui-toast-image-warn i.icon {
     color: $devui-warning !important;
   }
diff --git a/devui/toast/src/toast.tsx b/devui/toast/src/toast.tsx
index 11d0c88691591f78c1a054af79578289cd489daf..5f925c361d101e215315cfc73b9511178e522edf 100644
--- a/devui/toast/src/toast.tsx
+++ b/devui/toast/src/toast.tsx
@@ -1,13 +1,14 @@
 import './toast.scss'
 
 import { computed, defineComponent, nextTick, onUnmounted, ref, watch } from 'vue'
-import { Message, ToastProps, toastProps } from './toast.type'
-import DToastIconClose from './toast-icon-close'
-import DToastImage from './toast-image'
+import { Message, ToastProps, toastProps } from './toast-types'
+import ToastIconClose from './toast-icon-close'
+import ToastImage from './toast-image'
 import { cloneDeep, isEqual, merge, omit, throttle } from 'lodash-es'
-import { useToastEvent } from '../hooks/use-toast-event'
-import { useToastHelper } from '../hooks/use-toast-helper'
-import { useToastConstant } from '../hooks/use-toast-constant'
+import { useToastEvent } from './hooks/use-toast-event'
+import { useToastHelper } from './hooks/use-toast-helper'
+import { useToastConstant } from './hooks/use-toast-constant'
+import { toastZIndex, toastIncrease } from './hooks/use-toast-z-index'
 
 const { ANIMATION_NAME, ANIMATION_TIME, ID_PREFIX } = useToastConstant()
 
@@ -24,7 +25,6 @@ export default defineComponent({
 
     const messages = ref<Message[]>([])
     const msgAnimations = ref<Message[]>([])
-    const zIndex = ref(1060)
 
     const containerRef = ref<any>()
     const msgItemRefs = ref<any[]>([])
@@ -85,7 +85,7 @@ export default defineComponent({
     }
 
     function handleValueChange() {
-      zIndex.value++
+      toastIncrease()
 
       setTimeout(() => {
         messages.value.forEach((msg) => msgAnimations.value.push(msg))
@@ -244,7 +244,6 @@ export default defineComponent({
     return {
       messages,
       msgAnimations,
-      zIndex,
       containerRef,
       msgItemRefs,
       interrupt,
@@ -258,7 +257,6 @@ export default defineComponent({
     const {
       style: extraStyle,
       styleClass: extraClass,
-      zIndex,
       messages,
       msgAnimations,
       msgItemRefs,
@@ -272,7 +270,7 @@ export default defineComponent({
 
     const prefixCls = 'devui-toast'
 
-    const wrapperStyles = [`z-index: ${zIndex}`, extraStyle]
+    const wrapperStyles = [`z-index: ${toastZIndex}`, extraStyle]
     const wrapperCls = [prefixCls, extraClass]
 
     const msgCls = (msg: Message) => [
@@ -318,8 +316,8 @@ export default defineComponent({
             onMouseleave={() => removeReset(i, msg)}
           >
             <div class={`${prefixCls}-item`}>
-              {showClose(msg) ? <DToastIconClose prefixCls={prefixCls} onClick={() => removeThrottle(i)} /> : null}
-              {showImage(msg) ? <DToastImage prefixCls={prefixCls} severity={msg.severity} /> : null}
+              {showClose(msg) ? <ToastIconClose prefixCls={prefixCls} onClick={() => removeThrottle(i)} /> : null}
+              {showImage(msg) ? <ToastImage prefixCls={prefixCls} severity={msg.severity} /> : null}
               <div class="devui-toast-message">
                 {showSummary(msg) ? <span class="devui-toast-title">{msg.summary}</span> : null}
                 {showContent(msg) ? msgContent(msg) : null}