iter(g68): alert 增加语义图标与通栏形态

packages/skin/ui/src/alert.ts

@@ -1,15 +1,24 @@
 import { h } from '@ui-arch/frame';
 import type { AlertProps } from './types.js';
 
-/*** 提示条：variant 决定语义色，可选标题与关闭按钮；关闭即退场并从 DOM 移除（内容由调用方持有） ***/
+const DEFAULT_ICON: Record<string, string> = { info: 'ℹ', success: '✓', warning: '!', danger: '✕' }; // 语义缺省图标
+
+/*** 提示条：variant 决定语义色，可选标题/语义图标/关闭按钮；banner 为通栏形态，关闭即退场并从 DOM 移除 ***/
 export function alert(props: AlertProps): HTMLElement {
+  const variant = props.variant ?? 'info'; // 语义档位
   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);
+  const glyph = props.icon ?? (props.showIcon ? DEFAULT_ICON[variant] : null); // 自定义图标优先
+  const el = h(
+    'div',
+    { class: `ua-alert ua-alert-${variant}${props.banner ? ' is-banner' : ''}`, role: 'alert' },
+    glyph ? h('span', { class: 'ua-alert-icon', 'aria-hidden': 'true' }, glyph) : null, // 图标纯装饰，读屏靠正文
+    body,
+  );
 
   if (!props.closable) return el; // 纯展示形态
   el.append(

packages/skin/ui/src/types.ts

@@ -274,6 +274,9 @@ export interface AlertProps {
   variant?: 'info' | 'success' | 'warning' | 'danger'; // 语义色；缺省 info
   closable?: boolean; // 显示 × 关闭按钮（退场后从 DOM 移除）；缺省 false
   onClose?: () => void; // 关闭回调，供调用方同步业务状态
+  banner?: boolean;   // 通栏形态：去圆角、只留下边框、左右撑满；适合页面顶部通知
+  showIcon?: boolean; // 显示语义图标（info ℹ / success ✓ / warning ! / danger ✕）；缺省 false
+  icon?: string | HTMLElement; // 自定义图标节点，传了即覆盖语义图标
 }
 
 /*** 骨架屏入参 ***/

packages/skin/ui/ua.manifest.json

@@ -899,6 +899,23 @@
             "t": "() => void",
             "k": 1,
             "d": "关闭回调，供调用方同步业务状态"
+          },
+          {
+            "n": "banner",
+            "t": "boolean",
+            "df": "false",
+            "d": "通栏形态：去圆角、只保留下边框、左右撑满，适合页面顶部通知"
+          },
+          {
+            "n": "showIcon",
+            "t": "boolean",
+            "df": "false",
+            "d": "显示语义图标（info ℹ / success ✓ / warning ! / danger ✕），纯装饰不进读屏"
+          },
+          {
+            "n": "icon",
+            "t": "string | HTMLElement",
+            "d": "自定义图标节点，传了即覆盖语义图标"
           }
         ],
         "example": "alert({ message: '操作可能存在风险', variant: 'warning' })",
@@ -907,7 +924,8 @@
           "传入 message 即可，入场自带下滑动画",
           "需要可关闭或带操作按钮时，外层用 h() 组合 button 自行拼装，alert 只负责语义底色",
           "需要用户可自行消除的提示传 closable: true：点 × 淡出并从 DOM 移除，配合 onClose 同步业务状态",
-          "有标题与正文两层信息时传 title（加粗首行），正文仍走 message"
+          "有标题与正文两层信息时传 title（加粗首行），正文仍走 message",
+          "banner: true 出通栏形态（圆角与左右边框归零），页面顶部通知直接铺满容器即可，不需要额外包裹层"
         ]
       },
       {

packages/skin/ui/ui.css

@@ -1037,6 +1037,26 @@ button.ua-step-dot:hover {
     transform: translateY(-6px);
   }
 }
+.ua-alert-icon {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-top: 1px;
+  border: 1px solid currentColor;
+  border-radius: 50%;
+  font-size: 11px;
+  line-height: 1;
+  opacity: 0.85;
+}
+.ua-alert.is-banner {
+  padding: 10px 16px;
+  border-width: 0 0 1px;
+  border-radius: 0;
+}
+
 .ua-alert-body {
   flex: 1;
   min-width: 0;