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 作可访问名
 }
 
 /*** 头像入参 ***/

packages/skin/ui/ua.manifest.json

@@ -762,21 +762,34 @@
           {
             "n": "label",
             "t": "string",
-            "r": 1,
-            "d": "徽标文案"
+            "d": "徽标文案；与 count / dot 三选一，dot 时作可访问名"
           },
           {
             "n": "variant",
             "t": "'default' | 'success' | 'warning' | 'danger'",
-            "d": "语义色；缺省 default",
-            "df": "default"
+            "d": "语义色；缺省 default"
+          },
+          {
+            "n": "count",
+            "t": "number",
+            "d": "数字角标：超过 max 显示 N+，负数归零"
+          },
+          {
+            "n": "max",
+            "t": "number",
+            "d": "数字上限；缺省 99"
+          },
+          {
+            "n": "dot",
+            "t": "boolean",
+            "d": "只显示小红点（无文字），role=img + label 作名称"
           }
         ],
         "example": "badge({ label: '成功', variant: 'success' })",
         "steps": [
-          "选择语义色：default 中性、success 成功、warning 警告、danger 危险",
-          "传入 label 即可，纯展示组件无状态",
-          "状态语义靠 variant 承载，不要自造颜色；纯展示不可交互，需要操作请配 button"
+          "纯状态文案直接传 label，配 variant 定语义色",
+          "要显示数量传 count（如未读数），超过 max（缺省 99）自动渲染成 99+",
+          "只提示「有更新」用 dot: true，配合 label 给出读屏名（如「有未读消息」）"
         ]
       },
       {

packages/skin/ui/ui.css

@@ -1039,6 +1039,21 @@ button.ua-step-dot:hover {
   font-size: var(--ua-font-size-sm);
   line-height: 1.6;
 }
+.ua-badge-count {
+  min-width: 18px;
+  padding: 0 5px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  background: var(--ua-color-danger);
+  color: var(--ua-color-bg);
+}
+.ua-badge-dot {
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border-radius: 999px;
+  background: var(--ua-color-danger);
+}
 .ua-badge-default {
   background: var(--ua-color-border);
   color: var(--ua-color-text);