From df9f046a19d2d39c873aec6e0cf44609a915b7b3 Mon Sep 17 00:00:00 2001
From: xiamiao <xiamiao@xiaomi.com>
Date: Tue, 4 Jun 2024 15:34:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(message):=20=E6=94=AF=E6=8C=81=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89zIndex=E5=8A=9F=E8=83=BD(#2852)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/message/src/Message.tsx         | 15 +++++++++++++--
 packages/ui/message/src/styles/message.scss |  1 +
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/ui/message/src/Message.tsx b/packages/ui/message/src/Message.tsx
index fd3150019..6c06e85db 100644
--- a/packages/ui/message/src/Message.tsx
+++ b/packages/ui/message/src/Message.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
-import { cx, getPrefixCls } from '@hi-ui/classname'
+import { cx, getPrefixCls, getPrefixStyleVar } from '@hi-ui/classname'
 import { __DEV__ } from '@hi-ui/env'
 import { HiBaseHTMLProps } from '@hi-ui/core'
 import { CSSTransition } from 'react-transition-group'
@@ -35,6 +35,7 @@ export const Message = forwardRef<HTMLDivElement | null, MessageProps>(
       duration = 5000,
       autoClose = true,
       type = 'info',
+      zIndex,
       destroy,
       onClose,
       ...rest
@@ -98,7 +99,13 @@ export const Message = forwardRef<HTMLDivElement | null, MessageProps>(
         }}
       >
         <div ref={motionElRef} className={`${prefixCls}-container`}>
-          <div ref={ref} role={role} className={cls} {...rest}>
+          <div
+            ref={ref}
+            role={role}
+            className={cls}
+            {...rest}
+            style={{ [`${getPrefixStyleVar('z-index')}`]: zIndex }}
+          >
             {messageIconMap[type]}
             {title}
           </div>
@@ -121,6 +128,10 @@ export interface MessageProps extends Omit<HiBaseHTMLProps<'div'>, 'title'> {
    * 通知框标题
    */
   title: React.ReactNode
+  /**
+   * 自定义css展示层级
+   */
+  zIndex?: number
   /**
    * 通知框类型
    */
diff --git a/packages/ui/message/src/styles/message.scss b/packages/ui/message/src/styles/message.scss
index 7237d991b..e71119493 100644
--- a/packages/ui/message/src/styles/message.scss
+++ b/packages/ui/message/src/styles/message.scss
@@ -16,6 +16,7 @@ $prefix: '#{$component-prefix}-message' !default;
   line-height: use-text-lineheight('normal');
   background-color: use-color-static('white');
   color: use-color('gray', 700);
+  z-index: var(--hi-v4-z-index, 1000);
 
   &--type {
     &-info {