iter(g286): 新增 noticeBar 单行通知条组件

2026-10-26 23:16:30 +08:00
parent c4cf0afc7b
commit 85812abb6c
12 changed files with 288 additions and 12 deletions
@@ -0,0 +1,37 @@
+import { h, signal } from '@ui-arch/frame';
+import type { NoticeBarProps } from './types.js';
+
+// 语义色配符号：只靠颜色区分在灰度/色弱下会失效，符号是第二条线索
+const ICONS: Record<string, string> = { info: 'ℹ', success: '✓', warning: '!', danger: '×' };
+
+/*** 通知条：单行横条，语义色 + 可选跑马灯与关闭；关闭即整条隐藏并回调 ***/
+export function noticeBar(props: NoticeBarProps): HTMLElement {
+  const variant = props.variant ?? 'info';
+  const open = signal(true); // 关闭状态：隐藏而非摘节点，调用方仍可拿到元素句柄
+  return h(
+    'div',
+    {
+      class: `ua-notice ua-notice-${variant}${props.scroll ? ' is-roll' : ''}`,
+      role: 'status',
+      title: props.text, // 滚动/裁切时仍能悬停读到完整原文
+      hidden: () => !open(),
+    },
+    h('span', { class: 'ua-notice-icon', 'aria-hidden': 'true' }, props.icon ?? ICONS[variant]),
+    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?.();
+            },
+          },
+          '×',
+        ),
+  );
+}