YDialog（兼容名称）

适用范围：Legacy Admin Kit / Schema（@yoyoboot/yoyo-admin-kit、旧 admin-vue）。新 admin-nuxtui 使用 Nuxt UI；本页不是新宿主的必经开发路线。

正式名称已统一为 YModal。请到新页查看可运行示例、完整 API 与迁移说明。以下保留旧接口说明供迁移参考，新代码不再使用 YDialog。

定位 / Owner

包根已提供正式名称 YModal；YDialog 暂时作为 deprecated 同对象兼容导出。当前页面与 Workbench 的旧 URL 保留；内部 shadcn/Reka Dialog 原语不改名。

YDialog 是 centered overlay facade，拥有 open/close、focus enter/restore、nested overlay 协作、sm | md | lg 尺寸与可选 task footer。它不拥有业务 dirty/busy/loading/error 流程；标准编辑任务优先使用 YEditorPanel。

基础用法

<YDialog v-model:open="open" title="查看详情" description="查看当前记录信息。">
  <DetailView />
</YDialog>

带 actions slot 时会进入 task layout：

<YDialog v-model:open="open" title="编辑资料">
  <Editor />
  <template #actions>
    <YButton variant="outline" @click="open = false">取消</YButton>
    <YButton>保存</YButton>
  </template>
</YDialog>

Public API

v-model:open；props：title、description、size: sm | md | lg（默认 md）、allowFullscreen、closeText、closeDisabled、restoreFocusTo；slots：default、header-actions、actions。

关键交互

• 打开时焦点进入当前顶层 overlay。
• 关闭后恢复到显式 restoreFocusTo 或打开前焦点。
• nested Date/Select popup 存在时 Escape 不越级关闭父 Dialog。
• allowFullscreen 是显式 opt-in；全屏/还原只改变 surface 几何，不重建正文或清空输入。
• header-actions 只承载与当前 task 直接相关的次级操作，按钮必须使用 type="button"。
• mobile task body 为 footer 与 safe area 留出滚动空间。

不什么时候使用

有标准保存/取消、dirty-close、loading/error/empty 的编辑任务不要在 feature 手写 Dialog composition；用 YEditorPanel。

Live Workbench

Admin Vue 稳定路径：

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

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

Verification / Source

• packages/yoyo-admin/admin-kit/src/ui/components/modal/YModal.vue
• packages/yoyo-admin/admin-kit/tests/unit/ui/dialog/dialog-behavior.spec.ts
• Tenant Create / Account 等真实 consumer
• Live Component Workbench