From 9610663aebd35046af1fa239f6b4cad1fe9ced7d Mon Sep 17 00:00:00 2001
From: xiamiao <xiamiao@xiaomi.com>
Date: Sun, 28 Apr 2024 17:10:49 +0800
Subject: [PATCH 1/8] =?UTF-8?q?feat(message):=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E6=8C=87=E5=AE=9Aportal=E6=8C=82=E8=BD=BD(#2715)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/message/src/Message.tsx    |  4 ++++
 packages/ui/toast/src/ToastAPI.tsx     | 18 ++++++++++--------
 packages/ui/toast/src/ToastManager.tsx |  2 +-
 packages/ui/toast/src/types.ts         |  4 ++++
 4 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/ui/message/src/Message.tsx b/packages/ui/message/src/Message.tsx
index fd3150019..97429013c 100644
--- a/packages/ui/message/src/Message.tsx
+++ b/packages/ui/message/src/Message.tsx
@@ -133,6 +133,10 @@ export interface MessageProps extends Omit<HiBaseHTMLProps<'div'>, 'title'> {
    * 是否开启自动关闭
    */
   autoClose?: boolean
+  /**
+   * 指定 portal 的容器
+   */
+  container?: Element | undefined
   /**
    * 执行销毁，内部使用，勿覆盖。暂不对外暴露
    * @private
diff --git a/packages/ui/toast/src/ToastAPI.tsx b/packages/ui/toast/src/ToastAPI.tsx
index f1c4e39a3..c4bf91275 100644
--- a/packages/ui/toast/src/ToastAPI.tsx
+++ b/packages/ui/toast/src/ToastAPI.tsx
@@ -6,7 +6,7 @@ import { ToastEventOptions } from './types'
 import { withDefaultProps } from '@hi-ui/react-utils'
 import { uuid } from '@hi-ui/use-id'
 
-export class ToastAPI<T = ToastEventOptions> {
+export class ToastAPI<T extends ToastEventOptions> {
   static defaultOptions = {
     prefixCls: _prefix,
   }
@@ -18,11 +18,9 @@ export class ToastAPI<T = ToastEventOptions> {
 
   constructor(toastAPIOptions: ToastAPIOptions) {
     this.options = withDefaultProps(toastAPIOptions, ToastAPI.defaultOptions)
-
     // Ensure that Toast is a singleton.
     this.id = uuid()
-
-    this.initManager()
+    // this.initManager()
   }
 
   static create(options: ToastAPIOptions) {
@@ -33,17 +31,21 @@ export class ToastAPI<T = ToastEventOptions> {
     return `.${this.options.prefixCls}__portal__${this.id}`
   }
 
-  initManager() {
-    this.container = Container.getContainer(this.selector)
+  initManager(container: Element | undefined) {
+    this.container = Container.getContainer(this.selector, document, container)
     this.toastManager = React.createRef<ToastManager>()
-
     render(<ToastManager {...this.options} ref={this.toastManager} />, this.container)
   }
 
   open = (props: T) => {
+    const container = props.container ?? document.body
+    if (this.container?.parentNode !== container) {
+      this.destroy()
+    }
     if (!this.container) {
-      this.initManager()
+      this.initManager(container)
     }
+
     return this.toastManager.current?.open(props)
   }
 
diff --git a/packages/ui/toast/src/ToastManager.tsx b/packages/ui/toast/src/ToastManager.tsx
index f3eb426ff..3efdc69f8 100644
--- a/packages/ui/toast/src/ToastManager.tsx
+++ b/packages/ui/toast/src/ToastManager.tsx
@@ -89,7 +89,7 @@ export class ToastManager extends Component<ToastManagerProps, ToastManagerState
     return {
       // @DesignToken zIndex: `toast`
       zIndex: 1010,
-      position: 'fixed',
+      position: 'absolute',
       pointerEvents: 'none',
       transform,
       top,
diff --git a/packages/ui/toast/src/types.ts b/packages/ui/toast/src/types.ts
index b887d70d9..fb187b67b 100644
--- a/packages/ui/toast/src/types.ts
+++ b/packages/ui/toast/src/types.ts
@@ -15,6 +15,10 @@ export interface ToastEventOptions {
    * toast 默认展示 title
    */
   title?: React.ReactNode
+  /**
+   * 指定 portal 的容器
+   */
+  container?: Element | undefined
 }
 
 export interface ToastOptions extends ToastEventOptions {

From 2af39b16ed12ccefef9e959632117e71d1c3c2df Mon Sep 17 00:00:00 2001
From: xiamiao <xiamiao@xiaomi.com>
Date: Sun, 28 Apr 2024 17:15:34 +0800
Subject: [PATCH 2/8] =?UTF-8?q?chore(message):=20=E7=94=9F=E6=88=90?=
 =?UTF-8?q?=E5=8F=98=E6=9B=B4=E8=AE=B0=E5=BD=95=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/eight-items-battle.md | 5 +++++
 .changeset/old-doors-sin.md      | 6 ++++++
 2 files changed, 11 insertions(+)
 create mode 100644 .changeset/eight-items-battle.md
 create mode 100644 .changeset/old-doors-sin.md

diff --git a/.changeset/eight-items-battle.md b/.changeset/eight-items-battle.md
new file mode 100644
index 000000000..721a64e10
--- /dev/null
+++ b/.changeset/eight-items-battle.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(message): 支持指定 portal 挂载
diff --git a/.changeset/old-doors-sin.md b/.changeset/old-doors-sin.md
new file mode 100644
index 000000000..2444bf145
--- /dev/null
+++ b/.changeset/old-doors-sin.md
@@ -0,0 +1,6 @@
+---
+"@hi-ui/message": minor
+"@hi-ui/toast": minor
+---
+
+feat: 支持指定 portal 挂载

From 2aee9e3cb9e102543ea0d39594fe433db90c51dc Mon Sep 17 00:00:00 2001
From: xiamiao <xiamiao@xiaomi.com>
Date: Fri, 10 May 2024 18:01:53 +0800
Subject: [PATCH 3/8] =?UTF-8?q?chore(message):=20=E5=A2=9E=E6=B7=BB?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B(#2715)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/message/stories/container.stories.tsx  | 29 +++++++++++++++++++
 packages/ui/message/stories/index.stories.tsx |  1 +
 2 files changed, 30 insertions(+)
 create mode 100644 packages/ui/message/stories/container.stories.tsx

diff --git a/packages/ui/message/stories/container.stories.tsx b/packages/ui/message/stories/container.stories.tsx
new file mode 100644
index 000000000..a6cc68c05
--- /dev/null
+++ b/packages/ui/message/stories/container.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import message from '../src'
+import Button from '@hi-ui/button'
+
+/**
+ * @title portal挂载
+ * @desc 挂载在当前div
+ *
+ */
+export const Container = () => {
+  return (
+    <>
+      <h1>Basic</h1>
+      <div className="message-container__wrap">
+        <Button
+          onClick={() => {
+            message.open({
+              title: '欢迎使用 HiUI 组件库',
+              type: 'success',
+              container: document.querySelector('.message-container__wrap'),
+            })
+          }}
+        >
+          Toast
+        </Button>
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/message/stories/index.stories.tsx b/packages/ui/message/stories/index.stories.tsx
index ebfc3d375..a4e819f4f 100644
--- a/packages/ui/message/stories/index.stories.tsx
+++ b/packages/ui/message/stories/index.stories.tsx
@@ -5,6 +5,7 @@ export * from './basic.stories'
 export * from './type.stories'
 export * from './close.stories'
 export * from './auto-close.stories'
+export * from './container.stories'
 
 export default {
   title: 'FeedBack/Message',

From 0d548fc523e9db417be58fc7b1b701afda836e48 Mon Sep 17 00:00:00 2001
From: xiamiao <xiamiao@xiaomi.com>
Date: Tue, 21 May 2024 15:42:28 +0800
Subject: [PATCH 4/8] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=AE=B9=E5=99=A8?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/message/src/Message.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/message/src/Message.tsx b/packages/ui/message/src/Message.tsx
index 97429013c..3d97691ee 100644
--- a/packages/ui/message/src/Message.tsx
+++ b/packages/ui/message/src/Message.tsx
@@ -136,7 +136,7 @@ export interface MessageProps extends Omit<HiBaseHTMLProps<'div'>, 'title'> {
   /**
    * 指定 portal 的容器
    */
-  container?: Element | undefined
+  container?: Element | null
   /**
    * 执行销毁，内部使用，勿覆盖。暂不对外暴露
    * @private

From 460832fffc39dc5eadae09270917d7e3cdddaeb9 Mon Sep 17 00:00:00 2001
From: xiamiao <xiamiao@xiaomi.com>
Date: Tue, 18 Jun 2024 10:22:59 +0800
Subject: [PATCH 5/8] =?UTF-8?q?feat(message):=20=E9=87=8D=E5=86=99?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89portal=E5=92=8CzIndex=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD(#2715)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/message/src/Message.tsx           |  4 --
 packages/ui/message/src/MessageAPI.tsx        |  6 ++-
 .../ui/message/stories/container.stories.tsx  | 34 +++++++++++---
 packages/ui/message/stories/index.stories.tsx |  1 +
 .../ui/message/stories/z-index.stories.tsx    | 45 +++++++++++++++++++
 packages/ui/toast/src/ToastAPI.tsx            | 10 ++---
 packages/ui/toast/src/ToastManager.tsx        | 25 ++++++++---
 packages/ui/toast/src/types.ts                |  6 ++-
 8 files changed, 106 insertions(+), 25 deletions(-)
 create mode 100644 packages/ui/message/stories/z-index.stories.tsx

diff --git a/packages/ui/message/src/Message.tsx b/packages/ui/message/src/Message.tsx
index 3d97691ee..fd3150019 100644
--- a/packages/ui/message/src/Message.tsx
+++ b/packages/ui/message/src/Message.tsx
@@ -133,10 +133,6 @@ export interface MessageProps extends Omit<HiBaseHTMLProps<'div'>, 'title'> {
    * 是否开启自动关闭
    */
   autoClose?: boolean
-  /**
-   * 指定 portal 的容器
-   */
-  container?: Element | null
   /**
    * 执行销毁，内部使用，勿覆盖。暂不对外暴露
    * @private
diff --git a/packages/ui/message/src/MessageAPI.tsx b/packages/ui/message/src/MessageAPI.tsx
index 75afb3d9f..81cefbfde 100644
--- a/packages/ui/message/src/MessageAPI.tsx
+++ b/packages/ui/message/src/MessageAPI.tsx
@@ -17,4 +17,8 @@ export interface MessageAPIOptions extends ToastAPIOptions {}
 
 export interface MessageOptions extends Omit<MessageProps, 'destroy' | 'visible'> {}
 
-export const message = new MessageAPI({ component: MessageComponent })
+export const createMessage = (options?: Omit<MessageAPIOptions, 'component'>) => {
+  return new MessageAPI({ component: MessageComponent, ...options })
+}
+
+export const message = createMessage({})
diff --git a/packages/ui/message/stories/container.stories.tsx b/packages/ui/message/stories/container.stories.tsx
index a6cc68c05..41f28d8c5 100644
--- a/packages/ui/message/stories/container.stories.tsx
+++ b/packages/ui/message/stories/container.stories.tsx
@@ -1,23 +1,43 @@
-import React from 'react'
-import message from '../src'
+import React, { useState } from 'react'
+import { createMessage } from '../src'
 import Button from '@hi-ui/button'
 
 /**
- * @title portal挂载
- * @desc 挂载在当前div
+ * @title 局部容器挂载
  *
  */
+
 export const Container = () => {
+  const [container, setContainer] = useState<HTMLElement | null>(null)
+  const messageWithContainer = createMessage({
+    container: container,
+  })
+
   return (
     <>
-      <h1>Basic</h1>
+      <h1>Container</h1>
       <div className="message-container__wrap">
+        <div
+          ref={(e) => {
+            setContainer(e)
+          }}
+          id="ddd"
+          style={{
+            width: 800,
+            height: 600,
+            background: 'red',
+
+            // Need add it
+            position: 'relative',
+            overflow: 'hidden',
+          }}
+        ></div>
         <Button
           onClick={() => {
-            message.open({
+            messageWithContainer.open({
               title: '欢迎使用 HiUI 组件库',
               type: 'success',
-              container: document.querySelector('.message-container__wrap'),
+              autoClose: false,
             })
           }}
         >
diff --git a/packages/ui/message/stories/index.stories.tsx b/packages/ui/message/stories/index.stories.tsx
index a4e819f4f..6037af93f 100644
--- a/packages/ui/message/stories/index.stories.tsx
+++ b/packages/ui/message/stories/index.stories.tsx
@@ -6,6 +6,7 @@ export * from './type.stories'
 export * from './close.stories'
 export * from './auto-close.stories'
 export * from './container.stories'
+export * from './z-index.stories'
 
 export default {
   title: 'FeedBack/Message',
diff --git a/packages/ui/message/stories/z-index.stories.tsx b/packages/ui/message/stories/z-index.stories.tsx
new file mode 100644
index 000000000..1c0471e19
--- /dev/null
+++ b/packages/ui/message/stories/z-index.stories.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import { createMessage } from '../src'
+import Button from '@hi-ui/button'
+
+/**
+ * @title 自定义css展示层级
+ *
+ */
+
+export const ZIndex = () => {
+  const messageWithZIndex = createMessage({
+    zIndex: 2000,
+  })
+
+  return (
+    <>
+      <h1>zIndex</h1>
+      <div className="message-container__wrap">
+        <div
+          id="ddd"
+          style={{
+            top: 0,
+            width: 1000,
+            height: 200,
+            background: 'red',
+
+            // Need add it
+            zIndex: 1500,
+            position: 'fixed',
+          }}
+        ></div>
+        <Button
+          onClick={() => {
+            messageWithZIndex.open({
+              title: '欢迎使用 HiUI 组件库',
+              type: 'success',
+            })
+          }}
+        >
+          Toast
+        </Button>
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/toast/src/ToastAPI.tsx b/packages/ui/toast/src/ToastAPI.tsx
index c4bf91275..41ac705f7 100644
--- a/packages/ui/toast/src/ToastAPI.tsx
+++ b/packages/ui/toast/src/ToastAPI.tsx
@@ -20,7 +20,7 @@ export class ToastAPI<T extends ToastEventOptions> {
     this.options = withDefaultProps(toastAPIOptions, ToastAPI.defaultOptions)
     // Ensure that Toast is a singleton.
     this.id = uuid()
-    // this.initManager()
+    this.initManager(this.options.container)
   }
 
   static create(options: ToastAPIOptions) {
@@ -31,19 +31,15 @@ export class ToastAPI<T extends ToastEventOptions> {
     return `.${this.options.prefixCls}__portal__${this.id}`
   }
 
-  initManager(container: Element | undefined) {
+  initManager(container: HTMLElement | undefined) {
     this.container = Container.getContainer(this.selector, document, container)
     this.toastManager = React.createRef<ToastManager>()
     render(<ToastManager {...this.options} ref={this.toastManager} />, this.container)
   }
 
   open = (props: T) => {
-    const container = props.container ?? document.body
-    if (this.container?.parentNode !== container) {
-      this.destroy()
-    }
     if (!this.container) {
-      this.initManager(container)
+      this.initManager(this.options.container as HTMLElement)
     }
 
     return this.toastManager.current?.open(props)
diff --git a/packages/ui/toast/src/ToastManager.tsx b/packages/ui/toast/src/ToastManager.tsx
index 3efdc69f8..d30ff3843 100644
--- a/packages/ui/toast/src/ToastManager.tsx
+++ b/packages/ui/toast/src/ToastManager.tsx
@@ -68,7 +68,11 @@ export class ToastManager extends Component<ToastManagerProps, ToastManagerState
     })
   }
 
-  private getStyle = (placement: ToastPlacement): React.CSSProperties => {
+  private getStyle = (
+    placement: ToastPlacement,
+    container: HTMLElement | undefined,
+    zIndex: number | undefined
+  ): React.CSSProperties => {
     let top: string | undefined
     let bottom: string | undefined
     let transform: string | undefined
@@ -88,8 +92,8 @@ export class ToastManager extends Component<ToastManagerProps, ToastManagerState
 
     return {
       // @DesignToken zIndex: `toast`
-      zIndex: 1010,
-      position: 'absolute',
+      zIndex: zIndex ?? 1010,
+      position: container ? 'absolute' : 'fixed',
       pointerEvents: 'none',
       transform,
       top,
@@ -101,12 +105,14 @@ export class ToastManager extends Component<ToastManagerProps, ToastManagerState
 
   render() {
     const { queue } = this.state
-    const { prefixCls, placement, component: As, render } = this.props
+    const { prefixCls, placement, component: As, render, container, zIndex } = this.props
+
+    console.log(this.props)
 
     return (
       <div
         className={cx(`${prefixCls}-manager`, `${prefixCls}-manager--placement-${placement}`)}
-        style={this.getStyle(placement!)}
+        style={this.getStyle(placement!, container, zIndex)}
       >
         {queue.map((notice) => {
           if (As) return <As {...notice} />
@@ -140,4 +146,13 @@ export interface ToastManagerProps {
    * 放置 toast 的位置
    */
   placement?: ToastPlacement
+
+  /**
+   * 指定 portal 的容器
+   */
+  container?: HTMLElement | undefined
+  /**
+   * 自定义css展示层级
+   */
+  zIndex?: number | undefined
 }
diff --git a/packages/ui/toast/src/types.ts b/packages/ui/toast/src/types.ts
index fb187b67b..0d4bfabb0 100644
--- a/packages/ui/toast/src/types.ts
+++ b/packages/ui/toast/src/types.ts
@@ -18,7 +18,11 @@ export interface ToastEventOptions {
   /**
    * 指定 portal 的容器
    */
-  container?: Element | undefined
+  container?: HTMLElement | undefined
+  /**
+   * 指定 css 展示层级
+   */
+  zIndex?: number
 }
 
 export interface ToastOptions extends ToastEventOptions {

From 5f0f7156a718b3b378d940ab99f562db7787b5a4 Mon Sep 17 00:00:00 2001
From: xiamiao <xiamiao@xiaomi.com>
Date: Tue, 18 Jun 2024 16:25:36 +0800
Subject: [PATCH 6/8] =?UTF-8?q?feat(message):=20=E9=87=8D=E5=86=99?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B(#2715)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...ntainer.stories.tsx => custom.stories.tsx} | 13 +++---
 packages/ui/message/stories/index.stories.tsx |  3 +-
 .../ui/message/stories/z-index.stories.tsx    | 45 -------------------
 packages/ui/toast/src/ToastAPI.tsx            |  4 +-
 packages/ui/toast/src/ToastManager.tsx        | 14 +++---
 packages/ui/toast/src/types.ts                |  8 ----
 6 files changed, 16 insertions(+), 71 deletions(-)
 rename packages/ui/message/stories/{container.stories.tsx => custom.stories.tsx} (82%)
 delete mode 100644 packages/ui/message/stories/z-index.stories.tsx

diff --git a/packages/ui/message/stories/container.stories.tsx b/packages/ui/message/stories/custom.stories.tsx
similarity index 82%
rename from packages/ui/message/stories/container.stories.tsx
rename to packages/ui/message/stories/custom.stories.tsx
index 41f28d8c5..6ef62145f 100644
--- a/packages/ui/message/stories/container.stories.tsx
+++ b/packages/ui/message/stories/custom.stories.tsx
@@ -3,19 +3,20 @@ import { createMessage } from '../src'
 import Button from '@hi-ui/button'
 
 /**
- * @title 局部容器挂载
+ * @title message属性自定义
  *
  */
 
-export const Container = () => {
+export const Custom = () => {
   const [container, setContainer] = useState<HTMLElement | null>(null)
-  const messageWithContainer = createMessage({
+  const message = createMessage({
     container: container,
+    zIndex: 1000,
   })
 
   return (
     <>
-      <h1>Container</h1>
+      <h1>Custom</h1>
       <div className="message-container__wrap">
         <div
           ref={(e) => {
@@ -26,7 +27,7 @@ export const Container = () => {
             width: 800,
             height: 600,
             background: 'red',
-
+            zIndex: 1500,
             // Need add it
             position: 'relative',
             overflow: 'hidden',
@@ -34,7 +35,7 @@ export const Container = () => {
         ></div>
         <Button
           onClick={() => {
-            messageWithContainer.open({
+            message.open({
               title: '欢迎使用 HiUI 组件库',
               type: 'success',
               autoClose: false,
diff --git a/packages/ui/message/stories/index.stories.tsx b/packages/ui/message/stories/index.stories.tsx
index 6037af93f..83fb40769 100644
--- a/packages/ui/message/stories/index.stories.tsx
+++ b/packages/ui/message/stories/index.stories.tsx
@@ -5,8 +5,7 @@ export * from './basic.stories'
 export * from './type.stories'
 export * from './close.stories'
 export * from './auto-close.stories'
-export * from './container.stories'
-export * from './z-index.stories'
+export * from './custom.stories'
 
 export default {
   title: 'FeedBack/Message',
diff --git a/packages/ui/message/stories/z-index.stories.tsx b/packages/ui/message/stories/z-index.stories.tsx
deleted file mode 100644
index 1c0471e19..000000000
--- a/packages/ui/message/stories/z-index.stories.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react'
-import { createMessage } from '../src'
-import Button from '@hi-ui/button'
-
-/**
- * @title 自定义css展示层级
- *
- */
-
-export const ZIndex = () => {
-  const messageWithZIndex = createMessage({
-    zIndex: 2000,
-  })
-
-  return (
-    <>
-      <h1>zIndex</h1>
-      <div className="message-container__wrap">
-        <div
-          id="ddd"
-          style={{
-            top: 0,
-            width: 1000,
-            height: 200,
-            background: 'red',
-
-            // Need add it
-            zIndex: 1500,
-            position: 'fixed',
-          }}
-        ></div>
-        <Button
-          onClick={() => {
-            messageWithZIndex.open({
-              title: '欢迎使用 HiUI 组件库',
-              type: 'success',
-            })
-          }}
-        >
-          Toast
-        </Button>
-      </div>
-    </>
-  )
-}
diff --git a/packages/ui/toast/src/ToastAPI.tsx b/packages/ui/toast/src/ToastAPI.tsx
index 41ac705f7..1bd58b249 100644
--- a/packages/ui/toast/src/ToastAPI.tsx
+++ b/packages/ui/toast/src/ToastAPI.tsx
@@ -6,7 +6,7 @@ import { ToastEventOptions } from './types'
 import { withDefaultProps } from '@hi-ui/react-utils'
 import { uuid } from '@hi-ui/use-id'
 
-export class ToastAPI<T extends ToastEventOptions> {
+export class ToastAPI<T = ToastEventOptions> {
   static defaultOptions = {
     prefixCls: _prefix,
   }
@@ -31,7 +31,7 @@ export class ToastAPI<T extends ToastEventOptions> {
     return `.${this.options.prefixCls}__portal__${this.id}`
   }
 
-  initManager(container: HTMLElement | undefined) {
+  initManager(container?: HTMLElement) {
     this.container = Container.getContainer(this.selector, document, container)
     this.toastManager = React.createRef<ToastManager>()
     render(<ToastManager {...this.options} ref={this.toastManager} />, this.container)
diff --git a/packages/ui/toast/src/ToastManager.tsx b/packages/ui/toast/src/ToastManager.tsx
index d30ff3843..9fe216b37 100644
--- a/packages/ui/toast/src/ToastManager.tsx
+++ b/packages/ui/toast/src/ToastManager.tsx
@@ -69,9 +69,9 @@ export class ToastManager extends Component<ToastManagerProps, ToastManagerState
   }
 
   private getStyle = (
-    placement: ToastPlacement,
-    container: HTMLElement | undefined,
-    zIndex: number | undefined
+    placement: ToastPlacement = 'top',
+    container?: HTMLElement,
+    zIndex?: number
   ): React.CSSProperties => {
     let top: string | undefined
     let bottom: string | undefined
@@ -107,12 +107,10 @@ export class ToastManager extends Component<ToastManagerProps, ToastManagerState
     const { queue } = this.state
     const { prefixCls, placement, component: As, render, container, zIndex } = this.props
 
-    console.log(this.props)
-
     return (
       <div
         className={cx(`${prefixCls}-manager`, `${prefixCls}-manager--placement-${placement}`)}
-        style={this.getStyle(placement!, container, zIndex)}
+        style={this.getStyle(placement, container, zIndex)}
       >
         {queue.map((notice) => {
           if (As) return <As {...notice} />
@@ -150,9 +148,9 @@ export interface ToastManagerProps {
   /**
    * 指定 portal 的容器
    */
-  container?: HTMLElement | undefined
+  container?: HTMLElement
   /**
    * 自定义css展示层级
    */
-  zIndex?: number | undefined
+  zIndex?: number
 }
diff --git a/packages/ui/toast/src/types.ts b/packages/ui/toast/src/types.ts
index 0d4bfabb0..b887d70d9 100644
--- a/packages/ui/toast/src/types.ts
+++ b/packages/ui/toast/src/types.ts
@@ -15,14 +15,6 @@ export interface ToastEventOptions {
    * toast 默认展示 title
    */
   title?: React.ReactNode
-  /**
-   * 指定 portal 的容器
-   */
-  container?: HTMLElement | undefined
-  /**
-   * 指定 css 展示层级
-   */
-  zIndex?: number
 }
 
 export interface ToastOptions extends ToastEventOptions {

From 5dbd01c7376fd5ed416f17cf9453bf5fbf5a969a Mon Sep 17 00:00:00 2001
From: xiamiao <xiamiao@xiaomi.com>
Date: Tue, 18 Jun 2024 16:29:06 +0800
Subject: [PATCH 7/8] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/message/stories/custom.stories.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/ui/message/stories/custom.stories.tsx b/packages/ui/message/stories/custom.stories.tsx
index 6ef62145f..8f7efcde7 100644
--- a/packages/ui/message/stories/custom.stories.tsx
+++ b/packages/ui/message/stories/custom.stories.tsx
@@ -24,9 +24,9 @@ export const Custom = () => {
           }}
           id="ddd"
           style={{
-            width: 800,
-            height: 600,
-            background: 'red',
+            width: 400,
+            height: 300,
+            background: 'rgb(245, 247, 250)',
             zIndex: 1500,
             // Need add it
             position: 'relative',
@@ -38,7 +38,6 @@ export const Custom = () => {
             message.open({
               title: '欢迎使用 HiUI 组件库',
               type: 'success',
-              autoClose: false,
             })
           }}
         >

From b15f864cb99c4f4d7f729543103aac39b23a796d Mon Sep 17 00:00:00 2001
From: xiamiao <xiamiao@xiaomi.com>
Date: Tue, 18 Jun 2024 17:33:12 +0800
Subject: [PATCH 8/8] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/message/stories/custom.stories.tsx     | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/ui/message/stories/custom.stories.tsx b/packages/ui/message/stories/custom.stories.tsx
index 8f7efcde7..8e39442a8 100644
--- a/packages/ui/message/stories/custom.stories.tsx
+++ b/packages/ui/message/stories/custom.stories.tsx
@@ -1,31 +1,34 @@
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import { createMessage } from '../src'
 import Button from '@hi-ui/button'
 
 /**
- * @title message属性自定义
+ * @title message 属性自定义
  *
  */
 
 export const Custom = () => {
   const [container, setContainer] = useState<HTMLElement | null>(null)
-  const message = createMessage({
-    container: container,
-    zIndex: 1000,
-  })
-
+  const message = useMemo(
+    () =>
+      createMessage({
+        container,
+        zIndex: 1000,
+      }),
+    [container]
+  )
   return (
     <>
       <h1>Custom</h1>
-      <div className="message-container__wrap">
+      <div className="message-custom__wrap">
         <div
           ref={(e) => {
             setContainer(e)
           }}
           id="ddd"
           style={{
-            width: 400,
-            height: 300,
+            width: 700,
+            height: 400,
             background: 'rgb(245, 247, 250)',
             zIndex: 1500,
             // Need add it