组合式 API 弹窗服务核心是解耦状态与 UI、脱离模板依赖、支持跨组件调用，通过定义 open/close/register 接口、创建全局状态管理器、实现通用 ModalContainer 容器及可复用弹窗组件，使弹窗成为可注入、可编程的服务。
用组合式 API 实现弹窗服务，核心在于脱离模板依赖、解耦状态与 UI、支持跨组件调用。它不是写一个 <modal></modal> 组件再 v-if 控制显隐，而是把“打开弹窗”变成一个可注入、可复用、可编程的函数调用 —— 类似 message.success() 那样的体验。
1. 定义弹窗服务接口（不绑定 DOM）
先抽象能力，不关心怎么渲染，只约定行为：
- open(options)：接收配置（标题、内容、按钮文案、是否可关闭等），返回 Promise，resolve 时携带用户操作结果（如点击了“确定”还是“取消”）
- close()：手动关闭当前弹窗（用于超时、全局取消等场景）
- register(component)：允许动态注册任意 Vue 组件作为弹窗内容（支持自定义表单、确认框、加载中提示等）
2. 创建全局状态管理器（useModalStore）
用 createPinia 或纯响应式对象封装弹窗生命周期：
- 用
ref管理当前弹窗实例（currentModal）、是否显示（visible）、传入的 props 和 resolve/reject 函数 - 每次
open()时生成唯一 ID，保存 resolve 回调，让弹窗组件内部能主动触发完成逻辑 - 关闭时清空状态，并调用上一次挂起的 resolve 或 reject（例如用户点击遮罩层关闭 → reject({ type: 'cancel' })）
3. 实现弹窗容器组件（ModalContainer）
这是唯一需要挂载到 DOM 的组件，但它是通用的、无业务逻辑的壳：
- 监听
visible和currentModal，用<component :is="currentModal.component" v-bind="currentModal.props"></component>渲染任意注册组件 - 提供默认布局：遮罩层、居中卡片、过渡动画（用
<transition></transition>封装） - 暴露插槽给子组件控制底部按钮（如
<template></template>），或通过 props 透传 action 按钮配置
4. 构建可复用的弹窗组件（Confirm、FormModal、LoadingTip）
这些组件不管理自身显隐，只专注内容和交互：
- 接收
onConfirm、onCancel等回调 props（由 ModalContainer 注入），点击后调用对应函数即可关闭并返回结果 - 支持 setup 语法糖 + defineEmits，例如：
const emit = defineEmits(['confirm', 'cancel']) - 表单类弹窗可结合
useForm组合式函数，提交成功后调用emit('confirm', formData)，自动 resolve Promise
这种设计让弹窗真正成为“服务”：可以在 setup 中直接 const result = await modal.open({ component: Confirm, title: '删除？' })，也可以在 pinia action、路由守卫甚至错误拦截器里调用，无需父子传 ref、不依赖 context、不污染组件树。本质上是把 UI 副作用封装进响应式系统，让调用方保持纯粹逻辑。
