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

2026-10-26 23:16:30 +08:00
parent c4cf0afc7b
commit 85812abb6c
12 changed files with 288 additions and 12 deletions
@@ -86,3 +86,4 @@ export { relativeTime } from './relativeTime.js';
 export { sparkline } from './sparkline.js';
 export { heatmap } from './heatmap.js';
 export { progressRing } from './progressRing.js';
+export { noticeBar } from './noticeBar.js';
@@ -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?.();
+            },
+          },
+          '×',
+        ),
+  );
+}
@@ -1111,11 +1111,20 @@ export interface HeatmapProps {
  formatValue?: (count: number, date: string) => string; // 悬停提示文案；缺省「日期 · 数量」
 }

-/*** 环形进度入参 ***/
-export interface ProgressRingProps {
+/*** 环形进度入参 ***/export interface ProgressRingProps {
  value: number | Signal<number>; // 当前进度 0-100；超出范围自动夹取，信号变化时自动重绘
  size?: number;                  // 外径（px）；缺省 96
  thickness?: number;             // 环宽（px）；缺省 8
  showText?: boolean;             // 是否显示中心文字；缺省 true（关掉时请自行保证 aria 可读）
  label?: string;                 // 中心文字；缺省「N%」
 }
+
+/*** 通知条入参 ***/
+export interface NoticeBarProps {
+  text: string;                   // 通知正文；单行不换行，超宽需配合 scroll
+  variant?: 'info' | 'success' | 'warning' | 'danger'; // 语义色；缺省 info
+  icon?: string;                  // 左侧符号；缺省按 variant 取（ℹ / ✓ / ! / ×）
+  scroll?: boolean;               // 正文超宽时跑马灯滚动；缺省 false（静态，超出裁切）
+  closable?: boolean;             // 是否显示关闭按钮；缺省 true
+  onClose?: () => void;           // 关闭回调
+}
@@ -100,7 +100,8 @@
      "relativeTime(props)：把时间戳渲染成「3 分钟前」并自动刷新，超阈值改显示绝对日期，title 恒给精确值",
      "sparkline(props)：迷你趋势线，把数值序列压成折线（可填充 + 末点标记），无坐标轴无交互",
      "heatmap(props)：日历热力图，按周列 × 星期行铺格子、四档浓度表示当天数量，悬停看明细",
-      "progressRing(props)：环形进度，SVG 双圆靠 dasharray 画弧 + 中心百分比，value 可传信号自动重绘"
+      "progressRing(props)：环形进度，SVG 双圆靠 dasharray 画弧 + 中心百分比，value 可传信号自动重绘",
+      "noticeBar(props)：单行通知条，语义色 + 左侧符号 + 可选跑马灯与关闭，适合页顶常驻播报"
    ],
    "keyTypes": [
      "ButtonProps",
@@ -4452,6 +4453,51 @@
          "换色在父级设 color：进度弧读 currentColor，底环固定描边色（--ua-color-border），不引入第二个色源",
          "这是个「环形进度条」，不是仪表盘：只表达 0-100 单一进度，多段占比请用饼图类组件"
        ]
+      },
+      {
+        "id": "noticeBar",
+        "title": "通知条 NoticeBar",
+        "demo": "sec-notice",
+        "props": [
+          {
+            "n": "text",
+            "t": "string",
+            "d": "通知正文；单行不换行，超宽需配合 scroll"
+          },
+          {
+            "n": "variant",
+            "t": "'info' | 'success' | 'warning' | 'danger'",
+            "d": "语义色；缺省 info"
+          },
+          {
+            "n": "icon",
+            "t": "string",
+            "d": "左侧符号；缺省按 variant 取（ℹ / ✓ / ! / ×）"
+          },
+          {
+            "n": "scroll",
+            "t": "boolean",
+            "d": "正文超宽时跑马灯滚动；缺省 false（静态，超出裁切）"
+          },
+          {
+            "n": "closable",
+            "t": "boolean",
+            "d": "是否显示关闭按钮；缺省 true"
+          },
+          {
+            "n": "onClose",
+            "t": "() => void",
+            "d": "关闭回调"
+          }
+        ],
+        "example": "noticeBar({ text: '系统将于今晚 23:00 维护 10 分钟', scroll: true })",
+        "steps": [
+          "和 alert 的分工：alert 可多行带标题、占块；通知条只占一行，适合页顶常驻播报（维护公告、试用期提醒）",
+          "文案比容器宽就传 scroll: true：正文从右向左匀速走，悬停自动暂停，读得完不用追",
+          "只想播报不需要关闭就传 closable: false：右侧不再留 × 位，横条更紧凑",
+          "颜色只是第二线索：左侧符号按 variant 自动配（ℹ / ✓ / ! / ×），色弱或灰度打印也能分辨",
+          "跑马灯在减少动效偏好下自动停成静态首屏——完整原文始终在 title 里，不必为可访问性另写一份"
+        ]
      }
    ]
  }
@@ -5901,6 +5901,96 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
  font-variant-numeric: tabular-nums; /* 等宽数字：进度跳到 100% 时文字不会左右晃 */
 }

+/* ---- 通知条：单行横条（与 alert 的分工：alert 可多行带标题，通知条只占一行，适合页顶常驻播报） ---- */
+.ua-notice {
+  display: flex;
+  align-items: center;
+  gap: var(--ua-space-2);
+  width: 100%;
+  padding: var(--ua-space-2) var(--ua-space-3);
+  border: 1px solid transparent;
+  border-radius: var(--ua-radius-md);
+  color: var(--ua-color-text);
+}
+
+.ua-notice-icon {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  font-weight: var(--ua-weight-semibold);
+}
+
+.ua-notice-body {
+  flex: 1;
+  min-width: 0; /* 不写这行，flex 子项不会收缩，跑马灯的 100% 基准会算成整行宽 */
+  overflow: hidden;
+}
+
+.ua-notice-text {
+  display: inline-block;
+  white-space: nowrap; /* 通知条只占一行：换行就不是「条」了 */
+}
+
+.ua-notice.is-roll .ua-notice-text {
+  animation: ua-notice-roll var(--ua-duration-loop-long) linear infinite;
+}
+
+.ua-notice.is-roll:hover .ua-notice-text {
+  animation-play-state: paused; /* 悬停暂停：想读完的人不用追着跑 */
+}
+
+.ua-notice-close {
+  flex: none;
+  padding: 0 var(--ua-space-05);
+  border: none;
+  background: none;
+  color: var(--ua-color-text-muted);
+  font-size: var(--ua-font-size-lg);
+  cursor: pointer;
+}
+
+.ua-notice-close:hover {
+  color: var(--ua-color-text);
+}
+
+.ua-notice-info {
+  border-color: var(--ua-color-accent);
+  background: var(--ua-color-tint-accent);
+}
+
+.ua-notice-success {
+  border-color: var(--ua-color-success);
+  background: color-mix(in srgb, var(--ua-color-success) var(--ua-alpha-soft), transparent);
+}
+
+.ua-notice-warning {
+  border-color: var(--ua-color-warning);
+  background: color-mix(in srgb, var(--ua-color-warning) var(--ua-alpha-soft), transparent);
+}
+
+.ua-notice-danger {
+  border-color: var(--ua-color-danger);
+  background: color-mix(in srgb, var(--ua-color-danger) var(--ua-alpha-soft), transparent);
+}
+
+@keyframes ua-notice-roll {
+  from {
+    transform: translateX(100%); /* 从右边缘进入 */
+  }
+  to {
+    transform: translateX(-100%); /* 从左侧走出 */
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ua-notice.is-roll .ua-notice-text {
+    animation: none; /* 减少动效：跑马灯停成静态首屏，完整原文靠 title */
+  }
+}
+
 /* ---- 减少动效：旋转 / 缩放一律退化为瞬时 ----
   前两类（无限动画、悬停位移）已有专门兜底，但 rotate / scale 过渡属于第三类空间动效：
   折叠箭头旋转、卡片按压缩放都靠它提供手感。减少动效下把过渡属性收窄成「只留颜色类」，