diff --git a/packages/opendesign/src/_utils/vue-utils.ts b/packages/opendesign/src/_utils/vue-utils.ts
index 4a52e24a7b8fc798ab5662b597dc92916e71f0a4..f1e33db4482a2827726a5373dfecfeb98fcdb616 100644
--- a/packages/opendesign/src/_utils/vue-utils.ts
+++ b/packages/opendesign/src/_utils/vue-utils.ts
@@ -1,6 +1,7 @@
-import { Component, onMounted, ref, Slots, Slot, VNode, VNodeTypes, Comment, ComponentPublicInstance, watchEffect, Ref, isRef } from 'vue';
+import { Component, onMounted, ref, Slots, Slot, VNode, VNodeTypes, Comment, ComponentPublicInstance, watchEffect, Ref, isRef, watch } from 'vue';
 import { isArray } from './is';
 import { isHtmlElement } from './dom';
+import { log } from './log.ts';
 
 // 来着vuejs/core
 // https://github.com/vuejs/core/blob/main/packages/shared/src/shapeFlags.ts
@@ -160,52 +161,41 @@ export function useSlotFirstElement(): { setSlot: (nodes: VNode[] | undefined) =
   };
 }
 
+type ElementQuery = string | HTMLElement | ComponentPublicInstance | null | undefined;
+const queryElement = (el: string | HTMLElement | null | undefined): HTMLElement | null => {
+  if (typeof el === 'string') {
+    return document.querySelector(el);
+  } else if (isHtmlElement(el)) {
+    return el;
+  }
+  return null;
+};
 export const resolveHtmlElement = (
-  elRef: Ref<string | ComponentPublicInstance | HTMLElement | null | undefined> | HTMLElement | string | undefined | ComponentPublicInstance
+  elRef: Ref<ElementQuery> | ElementQuery
 ): Promise<HTMLElement | null> => {
-  const queryElement = (el: string | HTMLElement | null | undefined): HTMLElement | null => {
-    if (typeof el === 'string') {
-      return document.querySelector(el);
-    } else if (isHtmlElement(el)) {
-      return el;
-    }
-    return null;
-  };
-
   return new Promise((resolve) => {
+    const resolveElement = (el: ElementQuery) => {
+      if (isComponentPublicInstance(el)) {
+        resolve(el.$el);
+      } else {
+        resolve(queryElement(el));
+      }
+    };
     if (isRef(elRef)) {
-      watchEffect(() => {
-        const { value } = elRef;
-        if (value) {
-          if (isComponentPublicInstance(value)) {
-            resolve(value.$el);
+      if (elRef.value) {
+        resolveElement(elRef.value);
+      } else {
+        const closeWatch = watch(elRef, (el, oldEl) => {
+          if (el) {
+            resolveElement(el);
+            closeWatch();
           } else {
-            resolve(queryElement(value));
+            log.warn(`resolveHtmlElement: elRef value is falsy, this might be a bug and could cause the promise to remain pending. Please check elRef.value: ${oldEl} -> ${el}`);
           }
-        }
-      });
-    } else if (isComponentPublicInstance(elRef)) {
-      resolve(elRef.$el);
-    } else {
-      resolve(queryElement(elRef));
-    }
-  });
-};
-
-export const getHtmlElement = (elRef: Ref<string | ComponentPublicInstance | HTMLElement | null>): Promise<HTMLElement | null> => {
-  return new Promise((resolve) => {
-    if (isHtmlElement(elRef.value)) {
-      resolve(elRef.value as HTMLElement);
-    } else if (typeof elRef.value === 'string') {
-      resolve(document.querySelector(elRef.value) as HTMLElement);
+        });
+      }
     } else {
-      watchEffect(() => {
-        if (isHtmlElement(elRef.value)) {
-          resolve(elRef.value as HTMLElement);
-        } else if (elRef.value) {
-          resolve((elRef.value as ComponentPublicInstance).$el);
-        }
-      });
+      resolveElement(elRef);
     }
   });
 };
diff --git a/packages/opendesign/src/message/OMessage.vue b/packages/opendesign/src/message/OMessage.vue
index 5994696663810ab6f83eaf6172d88decf95a1073..e24d938e6e046ec16053361a15e5cb05c5a13376 100644
--- a/packages/opendesign/src/message/OMessage.vue
+++ b/packages/opendesign/src/message/OMessage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { messageProps } from './types';
 import { IconWarning, IconDanger, IconLoading, IconInfo, IconSuccess, IconClose } from '../_utils/icons';
 import { isFunction, isUndefined } from '../_utils/is';
@@ -16,16 +16,8 @@ const iconMap = {
 
 const icon = computed(() => iconMap[props.status]);
 
-const isVisible = ref(props.visible ?? props.defaultVisible);
-
-watch(
-  () => props.visible,
-  (val) => {
-    if (!isUndefined(val)) {
-      isVisible.value = val;
-    }
-  }
-);
+const innerIsVisible = ref(props.visible ?? props.defaultVisible);
+const isVisible = computed(() => props.visible ?? innerIsVisible.value);
 
 const emits = defineEmits<{
   (e: 'duration-end'): void;
@@ -49,8 +41,8 @@ const startTimer = () => {
 
   timer = window.setTimeout(() => {
     emits('duration-end');
-    isVisible.value = false;
-    emits('update:visible', isVisible.value);
+    innerIsVisible.value = false;
+    emits('update:visible', innerIsVisible.value);
     clearTimer();
   }, props.duration);
 };
@@ -60,15 +52,15 @@ const onClose = async (ev?: MouseEvent) => {
   if (isFunction(props.beforeClose)) {
     const rlt = await props.beforeClose();
     if (rlt) {
-      isVisible.value = false;
-      emits('update:visible', isVisible.value);
+      innerIsVisible.value = false;
+      emits('update:visible', innerIsVisible.value);
       emits('close', ev);
       return;
     }
   }
 
-  isVisible.value = false;
-  emits('update:visible', isVisible.value);
+  innerIsVisible.value = false;
+  emits('update:visible', innerIsVisible.value);
   emits('close', ev);
 };
 
diff --git a/packages/opendesign/src/message/OMessageList.vue b/packages/opendesign/src/message/OMessageList.vue
index 2ae852b85a613bceea9f998718e68b3af052e0d2..ba38d10609fe818a26586533f2d3b34b52749b6e 100644
--- a/packages/opendesign/src/message/OMessageList.vue
+++ b/packages/opendesign/src/message/OMessageList.vue
@@ -28,22 +28,24 @@ const add = (params: MessageParamsT) => {
     option.icon = shallowRef(params.icon);
   }
   optionList.value.push(option);
+  return option.id;
 };
 
 const remove = (idx: number) => {
   optionList.value.splice(idx, 1);
+  if (optionList.value.length === 0 && props.onDestroy) {
+    props.onDestroy();
+  }
 };
 
 const removeAll = () => {
   optionList.value = [];
+  props.onDestroy?.();
 };
 
 const close = (id: number) => {
   const idx = optionList.value.findIndex((option) => option.id === id);
   remove(idx);
-  if (optionList.value.length === 0 && props.onDestory) {
-    props.onDestory();
-  }
 };
 
 const handleDurationEnd = (item: MessageListOptionT) => {
@@ -58,7 +60,7 @@ const handleClose = (item: MessageListOptionT, ev?: MouseEvent) => {
   close(id);
 };
 
-defineExpose({ add, remove, removeAll });
+defineExpose({ add, close, remove, removeAll });
 </script>
 
 <template>
diff --git a/packages/opendesign/src/message/__demo__/MessageBasic.vue b/packages/opendesign/src/message/__demo__/MessageBasic.vue
index 7456f15018a877ebc1edc4f2242480fc098f169f..eb3dd46826b83a6ffd272067b655c024d2c2d193 100644
--- a/packages/opendesign/src/message/__demo__/MessageBasic.vue
+++ b/packages/opendesign/src/message/__demo__/MessageBasic.vue
@@ -8,15 +8,11 @@ import '../../button/style';
 const message = useMessage();
 
 const handleInfoBtnClick = () => {
-  message.info({
-    content: '用于表示普通操作信息提示，3秒后消失',
-  });
+  message.show('用于表示普通操作信息提示，3秒后消失');
 };
 
 const handleSuccessBtnClick = () => {
-  message.success({
-    content: '用于表示操作顺利达成，3秒后消失',
-  });
+  message.success('用于表示操作顺利达成，3秒后消失');
 };
 
 const handleWarningBtnClick = () => {
diff --git a/packages/opendesign/src/message/__demo__/MessageClose.vue b/packages/opendesign/src/message/__demo__/MessageClose.vue
new file mode 100644
index 0000000000000000000000000000000000000000..920863d03119869d888a19b41389acc8c0e09835
--- /dev/null
+++ b/packages/opendesign/src/message/__demo__/MessageClose.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import '../style';
+import { useMessage } from '../use-message';
+
+import { OButton } from '../../button';
+import '../../button/style';
+
+const target = ref('#msg-target-1');
+const message1 = useMessage(target);
+const message2 = useMessage();
+const openInfo1 = () => {
+  if (target.value === '#msg-target-1') {
+    target.value = '#msg-target-2';
+  } else {
+    target.value = '#msg-target-1';
+  }
+  message1.info({ content: 'info1', duration: 0 });
+};
+</script>
+<template>
+  <h4>关闭方法</h4>
+  <section>
+    <OButton @click="openInfo1">info1</OButton>
+    <OButton @click="message1.close()">关闭info1</OButton>
+  </section>
+  <section>
+    <OButton @click="message2.info({ content: 'info2', duration: 0 })">info2</OButton>
+    <OButton @click="message2.close()">关闭info2</OButton>
+  </section>
+  <section>
+    <OButton @click="message1.closeAll()">关闭所有 info1</OButton>
+    <OButton @click="message2.closeAll()">关闭所有 info2</OButton>
+  </section>
+  <div class="target-group">
+    <div id="msg-target-1"></div>
+    <div id="msg-target-2"></div>
+  </div>
+</template>
+<style lang="scss">
+.target-group {
+  display: flex;
+  gap: 12px;
+  > div {
+    flex: 1;
+    height: 200px;
+    border: solid 1px red;
+  }
+}
+</style>
diff --git a/packages/opendesign/src/message/__demo__/MessageInline.vue b/packages/opendesign/src/message/__demo__/MessageInline.vue
index 460f60729f633f48f229d9b3bed7412fe372f61e..50014c37e4dd9d558e1cf00581cf4baf1783ec1d 100644
--- a/packages/opendesign/src/message/__demo__/MessageInline.vue
+++ b/packages/opendesign/src/message/__demo__/MessageInline.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import '../style';
 import { OMessage } from '../index';
+import { ref } from 'vue';
+
+const visible = ref(true);
 </script>
 
 <template>
@@ -15,7 +18,8 @@ import { OMessage } from '../index';
     </div>
 
     <div>
-      <OMessage status="info" closable>用于表示普通操作信息提示（提示常驻，可手动关闭）</OMessage>
+      <OMessage v-model:visible="visible" status="info" closable>用于表示普通操作信息提示（提示常驻，可手动关闭）</OMessage>
+      <OMessage :visible="visible" status="info" closable>用于表示普通操作信息提示（提示常驻，可手动关闭）受控</OMessage>
       <OMessage status="success" :duration="3000">用于表示操作顺利达成（提示3秒后消失）</OMessage>
       <OMessage status="warning" :duration="5000">用于表示操作引起一定后果（提示5秒后消失）</OMessage>
       <OMessage status="danger" :duration="8000">用于表示操作引起严重的后果（提示8秒后消失）</OMessage>
diff --git a/packages/opendesign/src/message/__demo__/MessageTarget.vue b/packages/opendesign/src/message/__demo__/MessageTarget.vue
index dc94573d4ded39eee3ad55adfce01ff1d96a42be..b73c95f1a68cf80273052d41da0e68107f7bf2d4 100644
--- a/packages/opendesign/src/message/__demo__/MessageTarget.vue
+++ b/packages/opendesign/src/message/__demo__/MessageTarget.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, shallowReactive } from 'vue';
 import '../style';
 import { useMessage } from '../use-message';
 
@@ -27,15 +27,21 @@ const message8 = useMessage(btn8);
 const message9 = useMessage(btn9);
 const message10 = useMessage(btn10);
 
+const closeMessage = shallowReactive<Record<string, () => void>>({});
+let count = 1;
 const handleInfoBtnClick = () => {
-  message1.info({
-    content: '用于表示普通操作信息提示，3秒后消失',
+  const currentCount = count++;
+  const close = message1.info({
+    content: `${currentCount} 用于表示普通操作信息提示，手动关闭`,
     duration: 0,
   });
+  closeMessage[currentCount] = () => {
+    close();
+    delete closeMessage[currentCount];
+  };
 };
 
 const handleSuccessBtnClick = () => {
-  message2.close();
   message2.success({
     content: '用于表示操作顺利达成，3秒后消失',
   });
@@ -106,6 +112,10 @@ const handleLoadingBtnClick2 = () => {
     <OButton ref="btn4" color="danger" @click="handleDangerBtnClick">Danger Message</OButton>
     <OButton ref="btn5" color="primary" @click="handleLoadingBtnClick">Loading Message</OButton>
   </section>
+  <h4>关闭</h4>
+  <section>
+    <OButton v-for="[index, close] in Object.entries(closeMessage)" :key="index" @click="close">关闭{{ index }}</OButton>
+  </section>
 
   <h4>Target 显示到指定元素 下方</h4>
   <section>
diff --git a/packages/opendesign/src/message/__demo__/TheIndex.vue b/packages/opendesign/src/message/__demo__/TheIndex.vue
index 9042447b84889acdca710782e8658e7bae4f48a3..dce2829a34a7ef63da0a1610fb6787aebf9d9b4e 100644
--- a/packages/opendesign/src/message/__demo__/TheIndex.vue
+++ b/packages/opendesign/src/message/__demo__/TheIndex.vue
@@ -7,12 +7,14 @@ import MessageCustomContent from './MessageCustomContent.vue';
 import MessageCustomIcon from './MessageCustomIcon.vue';
 import MessageInline from './MessageInline.vue';
 import MessageColorful from './MessageColorful.vue';
+import MessageClose from './MessageClose.vue';
 </script>
 
 <template>
   <div class="page-demo">
     <MessageBasic />
     <MessageTarget />
+    <MessageClose />
     <MessageCustomContent />
     <MessageCustomIcon />
     <MessageClosable />
diff --git a/packages/opendesign/src/message/style/media.scss b/packages/opendesign/src/message/style/media.scss
index 4acfb5fa24cc428a0cff49210c9a4943156c9b9e..3c29a473b22f3c316abf3b64d24d45daf5166172 100644
--- a/packages/opendesign/src/message/style/media.scss
+++ b/packages/opendesign/src/message/style/media.scss
@@ -1,16 +1,16 @@
 @use '../../_styles/mixin.scss' as *;
 
-@include respond-to('laptop') {
+@include respond-to('laptop-pc_s') {
   .o-message {
     --message-text-size: var(--o-font_size-tip1);
     --message-text-height: var(--o-line_height-tip1);
     --message-padding: 7px 12px;
     --message-icon-size: var(--o-icon_size_control-s);
     --message-icon-gap: 8px;
+    --message-icon-gap-suffix: 12px;
     --message-gap: 12px;
   }
 }
-
 @include respond-to('<=pad') {
   .o-message {
     --message-text-size: var(--o-font_size-tip2);
@@ -18,6 +18,7 @@
     --message-padding: 7px 12px;
     --message-icon-size: var(--o-icon_size_control-xs);
     --message-icon-gap: 8px;
+    --message-icon-gap-suffix: 12px;
     --message-gap: 8px;
   }
 }
diff --git a/packages/opendesign/src/message/style/style.scss b/packages/opendesign/src/message/style/style.scss
index c689cbe971d98c58b17f1242879c6a59f99d1d85..b18580a9ad690ef7151f17d25554e3fd0a9424d1 100644
--- a/packages/opendesign/src/message/style/style.scss
+++ b/packages/opendesign/src/message/style/style.scss
@@ -37,7 +37,7 @@
   display: inline-flex;
   align-items: center;
   cursor: pointer;
-  margin-left: calc(var(--message-icon-gap) * 2);
+  margin-left: var(--message-icon-gap-suffix);
   font-size: var(--message-icon-size);
   color: var(--message-icon-close-color);
   transition: color var(--o-duration-s) var(--o-easing-standard);
@@ -62,14 +62,14 @@
 }
 
 .o-message-list-top {
-  top: var(--message-list-offset);
+  top: var(--message-list-top-offset);
   .o-message + .o-message {
     margin-top: var(--message-gap);
   }
 }
 
 .o-message-list-bottom {
-  bottom: var(--message-list-offset);
+  bottom: var(--message-list-bottom-offset);
   .o-message + .o-message {
     margin-top: var(--message-gap);
   }
diff --git a/packages/opendesign/src/message/style/var.scss b/packages/opendesign/src/message/style/var.scss
index 1597d6d0eb6a61f6b6d5aa6ef60a703687ef5ae5..7c8cdd760e9ccdbce6a517bf50eba67262e4e0fa 100644
--- a/packages/opendesign/src/message/style/var.scss
+++ b/packages/opendesign/src/message/style/var.scss
@@ -16,6 +16,7 @@
 
   --message-icon-size: var(--o-icon_size_control-m);
   --message-icon-gap: 8px;
+  --message-icon-gap-suffix: 16px;
 
   --message-icon-close-color: var(--o-color-info2);
   --message-icon-close-color-hover: var(--o-color-info1);
@@ -69,4 +70,6 @@
 
 .o-message-list {
   --message-list-offset: 32px;
+  --message-list-top-offset: var(--message-list-offset);
+  --message-list-bottom-offset: var(--message-list-offset);
 }
diff --git a/packages/opendesign/src/message/types.ts b/packages/opendesign/src/message/types.ts
index a262e9070f51eff4425cf906b9dcc18671e64d95..21b1807d5b0869cedf16c7df9dd7406395219252 100644
--- a/packages/opendesign/src/message/types.ts
+++ b/packages/opendesign/src/message/types.ts
@@ -66,7 +66,7 @@ export const messageListProps = {
   /**
    * 消息列表销毁前的钩子函数
    */
-  onDestory: {
+  onDestroy: {
     type: Function as PropType<() => void>,
   },
 };
@@ -78,7 +78,6 @@ export type MessageParamsT = Partial<
   MessagePropsT & {
     content: string | VNode | Component;
     position: MessagePositionT;
-    target?: string | ComponentPublicInstance | HTMLElement | null;
     targetAlign?: 'center' | 'left' | 'right';
     icon: VNode | Component;
     onDurationEnd: () => void;
diff --git a/packages/opendesign/src/message/use-message.ts b/packages/opendesign/src/message/use-message.ts
index 380aa336645c860f651a251ee19628e238334ed8..936157ce71d845f23b701a22ceec2bc2723dde79 100644
--- a/packages/opendesign/src/message/use-message.ts
+++ b/packages/opendesign/src/message/use-message.ts
@@ -1,19 +1,19 @@
-import { h, render, ComponentPublicInstance } from 'vue';
+import { h, render, nextTick, type Ref, ComponentInternalInstance, ComponentPublicInstance } from 'vue';
 import { isString } from '../_utils/is';
 import { MessageParamsT } from './types';
 import OMessageList from './OMessageList.vue';
 import { resolveHtmlElement } from '../_utils/vue-utils';
 
-const DEFAULT_OPTIONS: MessageParamsT = {
+const DEFAULT_OPTIONS = {
   status: 'info',
   position: 'top',
   duration: 3000,
-};
+} satisfies MessageParamsT;
 
-const instanceMap = new Map();
+const instanceMap = new Map<'top' | 'bottom' | HTMLElement, ComponentInternalInstance>();
 const targetOffset = 8;
 
-const normalizeOptions = (params: MessageParamsT) => {
+const normalizeOptions = (params: MessageParamsT | string) => {
   const options: MessageParamsT = !params || isString(params) ? { content: params } : params;
 
   const normalized = {
@@ -24,15 +24,10 @@ const normalizeOptions = (params: MessageParamsT) => {
   return normalized;
 };
 
-const getMessageStyle = async (
-  target?: string | ComponentPublicInstance | HTMLElement | null,
-  position: 'top' | 'bottom' = 'top',
-  align: 'center' | 'left' | 'right' = 'center'
-) => {
-  if (!target) {
-    return;
-  }
-  const targetEl = await resolveHtmlElement(target);
+type MessageTarget = string | ComponentPublicInstance | HTMLElement | null | undefined;
+type MaybeRef<T> = T | Ref<T>;
+
+const getMessageStyle = (targetEl: HTMLElement | null, position: 'top' | 'bottom' = 'top', align: 'center' | 'left' | 'right' = 'center') => {
   if (!targetEl) {
     return;
   }
@@ -63,111 +58,118 @@ const getMessageStyle = async (
   return {
     position: pos,
     '--message-list-offset': `${top}px`,
+    [`--message-list-${pos}-offset`]: `${top}px`,
     left: `${left}px`,
     transform,
   };
 };
 
-export function useMessage(target: string | ComponentPublicInstance | HTMLElement | null) {
-  const showMessage = async (params: MessageParamsT) => {
-    const options: MessageParamsT = normalizeOptions(params);
-    const { position, targetAlign } = options;
-
-    const msgStyle = await getMessageStyle(target, position, targetAlign);
+const createMessageListVnode = ({
+  position,
+  wrap,
+  style,
+  targetEl,
+}: {
+  position: 'top' | 'bottom';
+  wrap: HTMLDivElement;
+  style?: ReturnType<typeof getMessageStyle>;
+  targetEl: HTMLElement | null;
+}) => {
+  return h(OMessageList, {
+    position: style?.position ?? position,
+    onDestroy: async () => {
+      if (wrap) {
+        // 卸载组件，使组件树所有的 onUnMounted 等hook正常执行
+        render(null, wrap);
+        await nextTick();
+        document.body.removeChild(wrap);
+      }
+      instanceMap.delete(targetEl ?? position);
+    },
+    style,
+  });
+};
+/**
+ * 显示一个消息
+ * @returns 关闭本条消息的方法
+ */
+const showMessage = (target: MaybeRef<MessageTarget>, closeHandlers: Set<() => void>, params: MessageParamsT | string) => {
+  const options = normalizeOptions(params);
+  const { position, targetAlign } = options;
+
+  let id = -1;
+  let instance: ComponentInternalInstance | undefined = undefined;
+  let isClosed = false;
+  resolveHtmlElement(target).then((targetEl) => {
+    if (isClosed) {
+      // 在渲染之前关闭
+      return;
+    }
+    const msgStyle = getMessageStyle(targetEl, position, targetAlign);
 
-    let instance = instanceMap.get(target ?? position);
+    instance = instanceMap.get(targetEl ?? position);
     if (!instance) {
-      let wrap: HTMLDivElement | null = document.createElement('div');
-
-      const vnode = h(OMessageList, {
-        position: msgStyle?.position ?? position,
-        onDestory: () => {
-          if (wrap) {
-            document.body.removeChild(wrap);
-            wrap = null;
-          }
-          instanceMap.set(target ?? position, undefined);
-        },
+      const wrap = document.createElement('div');
+
+      const vnode = createMessageListVnode({
+        position,
+        wrap,
         style: msgStyle,
+        targetEl,
       });
 
       render(vnode, wrap);
 
       const vm = vnode.component!;
-      vm.exposed?.add(options);
+      id = vm.exposed?.add(options);
 
       instance = vm;
 
-      instanceMap.set(target ?? position, instance);
+      instanceMap.set(targetEl ?? position, instance);
 
       document.body.appendChild(wrap);
     } else {
-      instance.exposed?.add(options);
-    }
-  };
-
-  const info = (params: MessageParamsT) => {
-    return showMessage({
-      ...params,
-      status: 'info',
-    });
-  };
-
-  const success = (params: MessageParamsT) => {
-    return showMessage({
-      ...params,
-      status: 'success',
-    });
-  };
-
-  const warning = (params: MessageParamsT) => {
-    return showMessage({
-      ...params,
-      status: 'warning',
-    });
-  };
-
-  const danger = (params: MessageParamsT) => {
-    return showMessage({
-      ...params,
-      status: 'danger',
-    });
-  };
-
-  const loading = (params: MessageParamsT) => {
-    return showMessage({
-      ...params,
-      status: 'loading',
-    });
-  };
-
-  const show = (params: MessageParamsT) => {
-    return showMessage({
-      ...params,
-    });
-  };
-
-  const closeAll = () => {
-    for (const ins of instanceMap.values()) {
-      ins?.exposed?.removeAll();
+      id = instance.exposed?.add(options);
     }
+  });
+  const closeHandler = () => {
+    isClosed = true;
+    instance?.exposed?.close(id);
+    closeHandlers.delete(closeHandler);
   };
+  closeHandlers.add(closeHandler);
+  return closeHandler;
+};
+const showMessageWithStatus = (
+  status: MessageParamsT['status'],
+  target: MaybeRef<MessageTarget>,
+  closeHandlers: Set<() => void>,
+  params: Omit<MessageParamsT, 'status'> | string
+) => {
+  return showMessage(target, closeHandlers, { ...normalizeOptions(params), status });
+};
+const closeAll = () => {
+  for (const ins of instanceMap.values()) {
+    ins?.exposed?.removeAll();
+  }
+};
 
-  const close = () => {
-    if (target) {
-      const instance = instanceMap.get(target);
-      instance?.exposed?.remove();
-    }
-  };
+const close = (closeHandlers: Set<() => void>) => {
+  closeHandlers.forEach((handler) => handler());
+};
 
+export function useMessage(target?: MaybeRef<MessageTarget>) {
+  const closeHandlers = new Set<() => void>();
   return {
-    info,
-    success,
-    warning,
-    danger,
-    loading,
-    show,
-    close,
+    show: showMessage.bind(null, target, closeHandlers),
+    info: showMessageWithStatus.bind(null, 'info', target, closeHandlers),
+    success: showMessageWithStatus.bind(null, 'success', target, closeHandlers),
+    warning: showMessageWithStatus.bind(null, 'warning', target, closeHandlers),
+    danger: showMessageWithStatus.bind(null, 'danger', target, closeHandlers),
+    loading: showMessageWithStatus.bind(null, 'loading', target, closeHandlers),
+    /** 关闭本 useMessage 实例渲染的所有消息 */
+    close: close.bind(null, closeHandlers),
+    /** 关闭所有实例渲染的所有消息 */
     closeAll,
   };
 }