iter(g15): toast 悬停暂停自动关闭

packages/skin/ui/src/toast.ts

@@ -24,6 +24,9 @@ function dismiss(item: HTMLElement): void {
 export function showToast(props: ToastProps): HTMLElement {
   // —— 状态集中声明 ——
   const duration = props.duration ?? 3000; // 停留时长毫秒
+  let timer = 0;         // 自动关闭计时器句柄
+  let remain = duration; // 悬停暂停时记下的剩余时长
+  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}` },
@@ -35,7 +38,12 @@ export function showToast(props: ToastProps): HTMLElement {
 
   stack.appendChild(item);
   requestAnimationFrame(() => item.classList.add('ua-open')); // 下一帧入场，保证过渡生效
-  window.setTimeout(() => dismiss(item), duration);
+  const arm = (ms: number): void => { startedAt = Date.now(); timer = window.setTimeout(() => dismiss(item), ms); }; // 重新武装倒计时
+  if (duration > 0) {
+    arm(duration);
+    item.addEventListener('pointerenter', () => { window.clearTimeout(timer); remain -= Date.now() - startedAt; }); // 悬停暂停：记下剩余时长
+    item.addEventListener('pointerleave', () => arm(remain)); // 移出后按剩余时长继续
+  }
   return item;
 }
 

packages/skin/ui/ua.manifest.json

@@ -31,7 +31,7 @@
       "tag(props)：可关闭标签，variant 五档语义色，closable + onClose 支持从数据源移除（纯展示请用 badge）",
       "avatar(props)：头像，有 src 渲染图片（alt 用名称）、无 src 用首字占位，size 可调 + 四档语义底色",
       "alert(props)：提示条，variant 四档语义色 + 可选 title 与 closable 关闭按钮，role=alert 读屏可播报",
-      "toast.info/success/warning/error(message, duration?)：消息提示工厂，右上角堆叠，默认 3s 自动消失，出入场微动画；showToast(props) 为完整入参版本（closable 显示关闭按钮，同屏最多 4 条）",
+      "toast.info/success/warning/error(message, duration?)：消息提示工厂，右上角堆叠，默认 3s 自动消失（悬停暂停、移出续时），出入场微动画；showToast(props) 为完整入参版本（closable 显示关闭按钮，同屏最多 4 条）",
       "tooltip(props, trigger)：悬浮提示，包裹触发器，hover / focus 延迟 150ms 出场，移出 / 失焦 / Esc 收起；视口一侧空间不足时自动翻转",
       "popover(props, trigger)：可交互气泡卡片，包裹触发器，默认点击开合 + 点外部 / Esc 收起，content 可放按钮等交互元素；视口一侧空间不足时自动翻转",
       "skeleton(props)：骨架屏占位，variant = text | rect | circle，text 支持 rows 多行，扫光微动画",