iter(g92): 徽标支持数字角标与红点

packages/skin/ui/src/badge.ts

@@ -1,7 +1,17 @@
 import { h } from '@ui-arch/frame';
 import type { BadgeProps } from './types.js';
 
-/*** 徽标：variant 决定语义色，纯展示不持有状态 ***/
+/*** 徽标：文字 / 数字角标 / 纯红点三种形态，variant 决定语义色，纯展示不持有状态 ***/
 export function badge(props: BadgeProps): HTMLElement {
-  return h('span', { class: `ua-badge ua-badge-${props.variant ?? 'default'}` }, props.label);
+  const tone = `ua-badge ua-badge-${props.variant ?? 'default'}`;
+  if (props.dot) {
+    // 红点：无可见文字，靠 aria-label 给出含义（如「有未读」）
+    return h('span', { class: `${tone} ua-badge-dot`, role: 'img', 'aria-label': props.label ?? '有更新' });
+  }
+  if (props.count != null) {
+    const max = props.max ?? 99; // 缺省上限 99
+    const shown = props.count > max ? `${max}+` : String(Math.max(0, props.count)); // 负数归零，超限折成 N+
+    return h('span', { class: `${tone} ua-badge-count`, 'aria-label': props.label ? `${props.label} ${shown}` : undefined }, shown);
+  }
+  return h('span', { class: tone }, props.label);
 }