@vueuse/core – createTemplatePromise：把任意 Vue 模板转成 Promise，实现「打开即等待」的体验。

@portal-vue/portal – Wormhole：提供跨组件渲染通道，使得多个子组件Neng够向同一个占位符注入内容。

ulid：a simple library for generating collision‑free unique IDs，用来区分不同实例之间的数据流。

// 创建唯一标识，用于区分不同 dialog 实例
const senderId = ulid;
// 将 BusDialog 本身包装成 Promise
const DialogPromise = createTemplatePromise<{
    result: any;
}, >;
// 自动清理函数——在 resolve / reject 时关闭 Wormhole
function wrapHandlers{
    const cleanResolve =  => {
        Wormhole.close;
        resolve;
    };
    const cleanReject =  => {
        Wormhole.close;
        reject;
    };
    return { cleanResolve, cleanReject };
}
// 对外暴露的方法
export function useBusDialog{
    return {
        async open{
            // 把内容注入到统一 portal
            Wormhole.open({
                to:'bus-dialog',
                from:senderId,
                content: BusDialog // 真正渲染的组件
            });
            // 启动 Promise 并返回结果
            return await DialogPromise.start;
        }
    };
}

*小贴士*：这里使用了 ES2022 的顶层 await 特性，在 Vite 环境下无需额外包装函数即可直接调用。

await openBusDialog;

await openBusDialog({
   render:=>(
      
   )
});

// 删除操作，只需三行代码
async function handleRemove{
   try{
       await openBusDialog({
           title:'删除确认',
           width:'360px',
           message:`编号 ${id} 将被永久删除，继续吗？`
       });
       await apiDelete;
       ElMessage.success;
   }catch{
       ElMessage.info;
   }
}

// 编辑用户信息，用渲染函数直接返回 JSX
async function editUser{
   try{
       const result = await openBusDialog({
           title:'编辑用户资料',
           width:'560px',
           render:=>(
               {
                      await apiUpdate;
                      resolve;
                  }}
                  onCancel={reject}
               />
           )
       });
       console.log;
   }catch{
       console.warn;
   }
}

import {openBusDialog} from '@/hooks/bus-dialog';
=>{
  try{
     await openBusDialog({
        title:'快速体验',
        message:'点我就算完成！'
     });
     console.log;
  }catch{
     console.log;
  }
});