iter(g287): 通知条关闭改为淡出退场

packages/skin/ui/src/noticeBar.ts

@@ -3,12 +3,18 @@ import type { NoticeBarProps } from './types.js';
 
 // 语义色配符号：只靠颜色区分在灰度/色弱下会失效，符号是第二条线索
 const ICONS: Record<string, string> = { info: 'ℹ', success: '✓', warning: '!', danger: '×' };
+const EXIT_MS = 200; // 退场时长：与 alert 的关闭过渡同档，两条播报件消失手感一致
 
-/*** 通知条：单行横条，语义色 + 可选跑马灯与关闭；关闭即整条隐藏并回调 ***/
+/*** 通知条：单行横条，语义色 + 可选跑马灯与关闭；关闭先淡出再隐藏并回调 ***/
 export function noticeBar(props: NoticeBarProps): HTMLElement {
   const variant = props.variant ?? 'info';
-  const open = signal(true); // 关闭状态：隐藏而非摘节点，调用方仍可拿到元素句柄
-  return h(
+  const open = signal(true); // 关闭状态：退场结束后置 false（隐藏而非摘节点，调用方仍持有句柄）
+  const close = (): void => {
+    el.classList.add('is-out'); // 挂退场类：淡出 + 轻微上移，先给观感再隐藏
+    props.onClose?.();
+    window.setTimeout(() => open(false), EXIT_MS); // 与 CSS 过渡时长同源，避免节点在半路消失
+  };
+  const el = h(
     'div',
     {
       class: `ua-notice ua-notice-${variant}${props.scroll ? ' is-roll' : ''}`,
@@ -20,18 +26,7 @@ export function noticeBar(props: NoticeBarProps): HTMLElement {
     h('div', { class: 'ua-notice-body' }, h('span', { class: 'ua-notice-text' }, props.text)),
     props.closable === false
       ? null
-      : h(
-          'button',
-          {
-            type: 'button',
-            class: 'ua-notice-close',
-            'aria-label': '关闭通知',
-            onClick: () => {
-              open(false);
-              props.onClose?.();
-            },
-          },
-          '×',
-        ),
+      : h('button', { type: 'button', class: 'ua-notice-close', 'aria-label': '关闭通知', onClick: close }, '×'),
   );
+  return el;
 }