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

packages/skin/ui/ui.css

@@ -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 过渡属于第三类空间动效：
    折叠箭头旋转、卡片按压缩放都靠它提供手感。减少动效下把过渡属性收窄成「只留颜色类」，