在 React 里，如何实现一个全局的Dialog组件？

【概念释义】

全局 Dialog 实现：Context + Portal 挂载 body；命令式 API Modal.confirm() 动态 createRoot 渲染；状态机 open/close + 队列；a11y focus trap、aria-modal、Esc 关闭。避免每页各写 modal 导致 z-index 与焦点混乱。

【基础使用】

const DialogContext = createContext({ open: () => {}, close: () => {} });