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);
 }

packages/skin/ui/src/types.ts

@@ -239,8 +239,11 @@ export interface DividerProps {
 
 /*** 徽标入参 ***/
 export interface BadgeProps {
-  label: string; // 徽标文案
+  label?: string;  // 徽标文案；与 count / dot 三选一
   variant?: 'default' | 'success' | 'warning' | 'danger'; // 语义色；缺省 default
+  count?: number;  // 数字角标：非负整数渲染为数字，超过 max 显示 `${max}+`
+  max?: number;    // 数字上限；缺省 99
+  dot?: boolean;   // 只显示小红点（不带文字），用 label 作可访问名
 }
 
 /*** 头像入参 ***/