iter(g112): 消息提示支持撤销类操作

packages/skin/ui/src/toast.ts

@@ -29,8 +29,11 @@ export function showToast(props: ToastProps): HTMLElement {
   let startedAt = 0;     // 本段计时起点，用于折算剩余
   const item = h(
     'div',
-    { class: `ua-toast ua-toast-${props.variant ?? 'info'}${props.closable ? ' is-closable' : ''}`, role: 'status', id: `ua-toast-${++seq}` },
+    { class: `ua-toast ua-toast-${props.variant ?? 'info'}${props.closable ? ' is-closable' : ''}${props.actionLabel ? ' is-action' : ''}`, role: 'status', id: `ua-toast-${++seq}` },
     h('span', { class: 'ua-toast-msg' }, props.message),
+    props.actionLabel
+      ? h('button', { type: 'button', class: 'ua-toast-action', onClick: () => { dismiss(item); props.onAction?.(); } }, props.actionLabel) // 操作按钮（如撤销）：点完立即收起再回调
+      : null,
     props.closable ? h('button', { type: 'button', class: 'ua-toast-close', 'aria-label': '关闭提示', onClick: () => dismiss(item) }, '×') : null,
   );
   const stack = ensureHost();

packages/skin/ui/src/types.ts

@@ -311,6 +311,8 @@ export interface ToastProps {
   duration?: number; // 自动消失毫秒；缺省 3000
   closable?: boolean; // 是否显示关闭按钮（手动立即收起）；缺省 false
   variant?: 'info' | 'success' | 'warning' | 'danger'; // 语义色；缺省 info
+  actionLabel?: string; // 操作按钮文案（如「撤销」）；传了才渲染，点后立即收起
+  onAction?: () => void; // 操作按钮回调（在收起之后触发）
 }
 
 /*** 加载指示器入参 ***/

packages/skin/ui/ua.manifest.json

@@ -1015,6 +1015,17 @@
             "t": "'info' | 'success' | 'warning' | 'danger'",
             "d": "语义色；缺省 info（toast.error 对应 danger）",
             "df": "info"
+          },
+          {
+            "n": "actionLabel",
+            "t": "string",
+            "d": "操作按钮文案（如「撤销」）；传了才渲染，点后 toast 立即收起"
+          },
+          {
+            "n": "onAction",
+            "t": "() => void",
+            "k": 1,
+            "d": "操作按钮回调，在 toast 收起之后触发（撤销删除之类）"
           }
         ],
         "example": "toast.success('保存成功'); toast.error('网络请求失败', 5000)",
@@ -1023,7 +1034,8 @@
           "不传 duration 时默认停留 3 秒后自动淡出并移除节点",
           "多条消息在右上角自动纵向堆叠，互不遮挡",
           "需要完整入参（含 variant）时用 showToast(props)；组件挂载容器由内部懒创建，样式随 ui.css 一起引入",
-          "同屏最多 4 条，超出自动挤掉最早一条；需要用户主动确认的消息用 showToast({ closable: true }) 给个 ×"
+          "同屏最多 4 条，超出自动挤掉最早一条；需要用户主动确认的消息用 showToast({ closable: true }) 给个 ×",
+          "要「撤销」这类操作时给 showToast 传 actionLabel 与 onAction：按钮出现在文案右侧，点完先收起再回调，duration 建议放到 5000 让用户来得及点"
         ]
       },
       {

packages/skin/ui/ui.css

@@ -3804,3 +3804,25 @@ button.ua-step-dot:hover {
   outline: 2px solid var(--ua-color-accent);
   outline-offset: 1px;
 }
+
+/* —— toast 操作按钮（撤销类） —— */
+.ua-toast.is-action {
+  pointer-events: auto;
+}
+.ua-toast-action {
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--ua-color-accent);
+  font-size: var(--ua-font-size-md);
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+.ua-toast-action:hover {
+  text-decoration: underline;
+}
+.ua-toast-action:focus-visible {
+  outline: 2px solid var(--ua-color-accent);
+  outline-offset: 2px;
+}