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; // 关闭回调，供调用方同步业务状态
 }
 
 /*** 骨架屏入参 ***/