From 45211b55d408f027aae1a8d16946c97f84fbecb9 Mon Sep 17 00:00:00 2001
From: TidySongs <hutidysong@gmail.com>
Date: Mon, 12 Jan 2026 09:08:08 +0000
Subject: [PATCH] fix(Message): fix zIndex for Message Component

---
 packages/components/message/Message.tsx | 22 ++++++++++++++++------
 packages/components/message/config.ts   |  1 +
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/components/message/Message.tsx b/packages/components/message/Message.tsx
index 151e0a3390..ddb11b6595 100644
--- a/packages/components/message/Message.tsx
+++ b/packages/components/message/Message.tsx
@@ -44,6 +44,7 @@ export interface MessagePlugin {
 
 interface MessageContainerProps {
   placement?: MessagePlacementList;
+  zIndex?: number;
   children?: React.ReactNode;
 }
 
@@ -51,6 +52,7 @@ interface ContainerInstance {
   container: HTMLDivElement;
   messages: MessageItem[];
   placement: MessagePlacementList;
+  zIndex?: number;
 }
 
 interface MessageItem extends MessageInstance {
@@ -66,7 +68,7 @@ let messageKey = 1;
 const MessageContainerMaps: Map<HTMLElement, Map<MessagePlacementList, ContainerInstance>> = new Map();
 
 const MessageContainer: React.FC<MessageContainerProps> = (props) => {
-  const { placement, children } = props;
+  const { placement, children, zIndex } = props;
 
   const ref = useRef<HTMLDivElement>(null);
 
@@ -77,6 +79,10 @@ const MessageContainer: React.FC<MessageContainerProps> = (props) => {
   if (placement.includes('top')) {
     style.top = `${globalConfig.top}px`;
   }
+  // 允许自定义消息列表的层级，默认使用全局配置值
+  if (typeof zIndex !== 'undefined') {
+    style.zIndex = zIndex;
+  }
 
   const { tdMessagePlacementClassGenerator, tdMessageListClass } = useMessageClass();
 
@@ -98,13 +104,13 @@ function getAttachNodeMap(attachNode: HTMLElement) {
   return MessageContainerMaps.get(attachNode);
 }
 
-function createContainer(placement: MessagePlacementList, attachNode: HTMLElement): HTMLDivElement {
+function createContainer(placement: MessagePlacementList, attachNode: HTMLElement, zIndex?: number): HTMLDivElement {
   const mGlobalConfig = ConfigProvider.getGlobalConfig();
   const containerWrapper = document.createElement('div');
   attachNode.appendChild(containerWrapper);
   render(
     <PluginContainer globalConfig={mGlobalConfig}>
-      <MessageContainer placement={placement} />
+      <MessageContainer placement={placement} zIndex={zIndex} />
     </PluginContainer>,
     containerWrapper,
   );
@@ -115,7 +121,7 @@ function renderContainer(containerInstance: ContainerInstance) {
   const mGlobalConfig = ConfigProvider.getGlobalConfig();
   render(
     <PluginContainer globalConfig={mGlobalConfig}>
-      <MessageContainer placement={containerInstance.placement}>
+      <MessageContainer placement={containerInstance.placement} zIndex={containerInstance.zIndex}>
         {containerInstance.messages.map((item) => (
           <MessageComponent key={item.key} ref={item.ref} {...item.config} theme={item.theme} />
         ))}
@@ -146,19 +152,23 @@ function destroyContainer(containerInstance: ContainerInstance, attachNode: HTML
 }
 
 function renderElement(theme: MessageThemeList, config: MessageOptions): MessageInstance {
-  const { attach, placement = 'top' } = config;
+  const { attach, placement = 'top', zIndex } = config;
   const attachNode = getAttach(attach);
   const attachNodeMap = getAttachNodeMap(attachNode);
 
   let containerInstance = attachNodeMap.get(placement);
   if (!containerInstance) {
-    const container = createContainer(placement, attachNode);
+    const container = createContainer(placement, attachNode, zIndex);
     containerInstance = {
       container,
       messages: [],
       placement,
+      zIndex,
     };
     attachNodeMap.set(placement, containerInstance);
+  } else if (typeof zIndex !== 'undefined') {
+    // 已有容器也需要更新层级，保持后续调用一致
+    containerInstance.zIndex = zIndex;
   }
 
   let style: React.CSSProperties = { ...config.style };
diff --git a/packages/components/message/config.ts b/packages/components/message/config.ts
index 74fcebb526..f8f54fccc6 100644
--- a/packages/components/message/config.ts
+++ b/packages/components/message/config.ts
@@ -14,6 +14,7 @@ let messageDefaultConfig: MessageOptions = {
   ...messageDefaultProps,
   duration: 3000,
   placement: 'top',
+  zIndex: 5000
 };
 
 /**