对话框

用途

应用级确认 / 提示对话框,布局对齐 macOS 26 原生 NSAlert。本例为双钮 + 破坏性确认;信息提示则用单钮「好」。

布局规则

• 单钮:居中布局(items-center text-center);双钮及以上:左对齐(items-start text-left)——macOS 26 NSAlert 的两种形态。
• 按钮行 flex-1 等宽铺排,取消在左、确认在右;确认位用「胶囊按钮」的主钮或破坏性主钮。
• Return 触发 default 按钮、Esc 触发取消钮(窗口级键盘监听)。

设计规范 · macOS 26 / 27

• 面板固定宽 260px;应用图标坐在白色圆角底板上(底板 50px / 圆角 12,内图 42px / 圆角 9——同心圆角)。
• 标题与正文同为 13px / 17px 行高,以粗细分层;正文超长内部滚动(max-h 200px)且 select-text 可复制。
• 面板底明 #ececec / 暗 #3a3e40;宿主支持时可切半透明亚克力底。

参考实现

Web 参考:alert/App.vue。窗口即面板——本例的外圆角与阴影在生产中由宿主窗口 / DWM 负责;pywebview 宿主给图标与标题加 pywebview-drag-region 充当拖拽区;内容高度经 fit() 上报宿主调整窗口并居中。

预览与代码中的图标路径为本文档站的 /nteye/nteye.webp;生产环境中为相对路径 nteye.webp。