跳转正文

YConfirmDialog ​

适用范围:Legacy Admin Kit / Schema 与旧 admin-vue。新 admin-nuxtui 的开发入口见管理端 Nuxt UI 指南。

定位 / Owner ​

YConfirmDialog 是显式确认 facade,拥有 confirm/cancel、busy、关闭原因和 focus restore。它不替用户决定是否应该执行某个业务动作;业务 owner 先决定“需要确认”,组件只负责安全呈现确认任务。

基础用法 ​

vue
<YConfirmDialog
  v-model:open="confirmOpen"
  title="删除记录?"
  description="删除后无法从当前列表恢复。"
  confirm-text="删除"
  tone="destructive"
  @confirm="remove"
/>

Public API ​

v-model:open。主要 props:title、description、confirmText、cancelText、tone、closeOnConfirm、confirmDisabled、cancelDisabled、busy、busyText、testIdPrefix。default slot 可插入额外确认上下文。

Events:confirm、close-request(reason);reason 为 cancel | escape | mask | close。

关键交互 ​

  • 默认将焦点放在确认动作。
  • busy 时禁止 confirm/cancel/escape close。
  • 关闭后恢复原触发点或顶层 overlay 合理 focus target。

Anti-pattern ​

不要让 E2E/feature 依赖内部 AlertDialog DOM 或精确 role 作为 Yoyo 跨 renderer ABI;业务只依赖可访问名称、按钮和结果。

Live Workbench ​

Admin Vue 稳定路径:

/frontend-module-demo/component-workbench/confirm-dialog

该路径只标识 live scenario,不固化部署 Host;官方文档站与 Admin Vue 可以独立部署。

Verification / Source ​

  • packages/yoyo-admin/admin-kit/src/ui/components/confirm-dialog/YConfirmDialog.vue
  • confirm-host focused tests
  • Live Component Workbench

YoyoBoot · 从真实项目走向可复用能力