iter: d23 alert 标题行 + 可关闭 + role=alert

packages/skin/ui/src/alert.ts

@@ -1,7 +1,32 @@
 import { h } from '@ui-arch/frame';
 import type { AlertProps } from './types.js';
 
-/*** 提示条：variant 决定语义色，纯展示不持有状态 ***/
+/*** 提示条：variant 决定语义色，可选标题与关闭按钮；关闭即退场并从 DOM 移除（内容由调用方持有） ***/
 export function alert(props: AlertProps): HTMLElement {
-  return h('div', { class: `ua-alert ua-alert-${props.variant ?? 'info'}` }, props.message);
+  const body = h(
+    'div',
+    { class: 'ua-alert-body' },
+    props.title ? h('div', { class: 'ua-alert-title' }, props.title) : null,
+    h('div', { class: 'ua-alert-message' }, props.message),
+  );
+  const el = h('div', { class: `ua-alert ua-alert-${props.variant ?? 'info'}`, role: 'alert' }, body);
+
+  if (!props.closable) return el; // 纯展示形态
+  el.append(
+    h(
+      'button',
+      {
+        type: 'button',
+        class: 'ua-alert-close',
+        'aria-label': '关闭提示',
+        onClick: () => {
+          el.classList.add('ua-alert-out');                                   // 先退场
+          window.setTimeout(() => el.isConnected && el.remove(), 200);        // 过渡结束再摘除
+          props.onClose?.();
+        },
+      },
+      '×',
+    ),
+  );
+  return el;
 }

packages/skin/ui/src/types.ts

@@ -189,7 +189,10 @@ export interface TagProps {
 /*** 提示条入参 ***/
 export interface AlertProps {
   message: string; // 提示内容
+  title?: string;  // 可选的加粗标题行；缺省只渲染正文
   variant?: 'info' | 'success' | 'warning' | 'danger'; // 语义色；缺省 info
+  closable?: boolean; // 显示 × 关闭按钮（退场后从 DOM 移除）；缺省 false
+  onClose?: () => void; // 关闭回调，供调用方同步业务状态
 }
 
 /*** 骨架屏入参 ***/

packages/skin/ui/ua.manifest.json

@@ -28,7 +28,7 @@
       "badge(props)：徽标，variant = default | success | warning | danger",
       "tag(props)：可关闭标签，variant 五档语义色，closable + onClose 支持从数据源移除（纯展示请用 badge）",
       "avatar(props)：头像，有 src 渲染图片（alt 用名称）、无 src 用首字占位，size 可调 + 四档语义底色",
-      "alert(props)：提示条，variant = info | success | warning | danger",
+      "alert(props)：提示条，variant 四档语义色 + 可选 title 与 closable 关闭按钮，role=alert 读屏可播报",
       "toast.info/success/warning/error(message, duration?)：消息提示工厂，右上角堆叠，默认 3s 自动消失，出入场微动画；showToast(props) 为完整入参版本（closable 显示关闭按钮，同屏最多 4 条）",
       "tooltip(props, trigger)：悬浮提示，包裹触发器，hover / focus 延迟 150ms 出场，移出 / 失焦 / Esc 收起",
       "popover(props, trigger)：可交互气泡卡片，包裹触发器，默认点击开合 + 点外部 / Esc 收起，content 可放按钮等交互元素",
@@ -659,18 +659,37 @@
             "r": 1,
             "d": "提示内容"
           },
+          {
+            "n": "title",
+            "t": "string",
+            "d": "加粗标题行；缺省只渲染正文"
+          },
           {
             "n": "variant",
             "t": "'info' | 'success' | 'warning' | 'danger'",
             "d": "语义色；缺省 info",
             "df": "info"
+          },
+          {
+            "n": "closable",
+            "t": "boolean",
+            "d": "显示 × 关闭按钮，退场后从 DOM 移除；缺省 false",
+            "df": "false"
+          },
+          {
+            "n": "onClose",
+            "t": "() => void",
+            "k": 1,
+            "d": "关闭回调，供调用方同步业务状态"
           }
         ],
         "example": "alert({ message: '操作可能存在风险', variant: 'warning' })",
         "steps": [
           "按信息级别选 variant：info 提示、success 成功、warning 警告、danger 错误",
           "传入 message 即可，入场自带下滑动画",
-          "需要可关闭或带操作按钮时，外层用 h() 组合 button 自行拼装，alert 只负责语义底色"
+          "需要可关闭或带操作按钮时，外层用 h() 组合 button 自行拼装，alert 只负责语义底色",
+          "需要用户可自行消除的提示传 closable: true：点 × 淡出并从 DOM 移除，配合 onClose 同步业务状态",
+          "有标题与正文两层信息时传 title（加粗首行），正文仍走 message"
         ]
       },
       {

packages/skin/ui/ui.css

@@ -697,8 +697,12 @@
 
 /* —— 提示条 —— */
 .ua-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ua-space-2);
   width: 100%;
   padding: 8px 12px;
+  transition: opacity 0.2s ease, transform 0.2s ease;
   border-radius: var(--ua-radius-md);
   border: 1px solid;
   font-size: var(--ua-font-size-md);
@@ -710,6 +714,33 @@
     transform: translateY(-6px);
   }
 }
+.ua-alert-body {
+  flex: 1;
+  min-width: 0;
+}
+.ua-alert-title {
+  margin-bottom: 2px;
+  font-weight: 600;
+}
+.ua-alert-close {
+  flex: none;
+  padding: 0 2px;
+  border: none;
+  background: none;
+  color: var(--ua-color-text-muted);
+  font-size: 14px;
+  line-height: 1.4;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+.ua-alert-close:hover {
+  color: var(--ua-color-text);
+}
+/* 关闭退场：淡出 + 轻微上移，配合 200ms 后摘除节点 */
+.ua-alert-out {
+  opacity: 0;
+  transform: translateY(-4px);
+}
 .ua-alert-info {
   border-color: var(--ua-color-accent);
   background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent);