iter(g10): 新增 statistic 统计数值组件

packages/skin/ui/ua.manifest.json

@@ -50,7 +50,8 @@
       "image(props)：图片，缩略图点击 / 回车开遮罩大图预览（Esc 或点击遮罩关闭），width 控制缩略宽",
       "timeline(props)：时间线，items 按序渲染纵向事件流（标题 / 时间 / 正文 + 语义色节点），mode 控制轴线左右，pending 追加进行中节点",
       "segmented(props)：分段控制器，胶囊分段 + 滑动滑块，value 信号双向绑定，←→ 环形导航，整组或单项可禁用",
-      "descriptions(props)：描述列表，items(label/value/span) 铺进 column 列网格，bordered 切表格形态，窄屏自动单列"
+      "descriptions(props)：描述列表，items(label/value/span) 铺进 column 列网格，bordered 切表格形态，窄屏自动单列",
+      "statistic(props)：统计数值，标题 + 大号数字 + 前后缀 + 环比趋势，value 变化时 rAF 滚动过渡（400ms easeOutCubic），减弱动效偏好下直落终值"
     ],
     "keyTypes": [
       "ButtonProps",
@@ -92,7 +93,8 @@
       "TimelineProps",
       "SegmentedProps",
       "DescriptionItem",
-      "DescriptionsProps"
+      "DescriptionsProps",
+      "StatisticProps"
     ]
   },
   "usage": "const checked = signal(false); checkbox({ label: '同意', checked }); const open = signal(false); modal({ title: '确认', open }, '内容')",
@@ -1582,6 +1584,54 @@
           "窄屏自动降为单列，无需在调用方写媒体查询",
           "纯展示组件，无状态无回调：值变了由调用方重新渲染或传函数式 value"
         ]
+      },
+      {
+        "id": "statistic",
+        "title": "统计数值 Statistic",
+        "demo": "sec-statistic",
+        "props": [
+          {
+            "n": "title",
+            "t": "string",
+            "d": "指标名（小字灰标题）；缺省不渲染"
+          },
+          {
+            "n": "value",
+            "t": "Signal<number>",
+            "r": 1,
+            "d": "数值信号：变化时从当前显示值滚动到新值，首跑即入场动画"
+          },
+          {
+            "n": "precision",
+            "t": "number",
+            "d": "小数位，千分位分隔自动带；缺省 0",
+            "df": "0"
+          },
+          {
+            "n": "prefix",
+            "t": "string",
+            "d": "数字前缀（如 ¥）；缺省不渲染"
+          },
+          {
+            "n": "suffix",
+            "t": "string",
+            "d": "数字后缀（如 元 / %）；缺省不渲染"
+          },
+          {
+            "n": "trend",
+            "t": "'up' | 'down'",
+            "d": "环比方向：up 红 / down 绿（A 股涨红跌绿口径）；缺省不渲染"
+          }
+        ],
+        "example": "const gmv = signal(128000); statistic({ title: '本月 GMV', value: gmv, prefix: '¥', precision: 2, trend: 'up' })",
+        "steps": [
+          "value 必须传信号：组件用 effect 监听，值变了自动滚动过渡，不要在外部手动改文本",
+          "首跑也会从 0 滚到目标值（入场动画）；不想要就初始化信号为终值后在挂载后再改",
+          "precision 控制小数位，千分位由 toLocaleString 自动加，不要自己拼格式化",
+          "trend 只表达方向与颜色（涨红跌绿），数值本身与环比幅度仍由调用方组织",
+          "多条指标并排时用 descriptions 或 flex 容器排列，本组件不自带网格",
+          "用户开启「减弱动效」时组件直接落终值，无需调用方判断"
+        ]
       }
     ]
   }