跳到主要内容
AI TradeDesign System
Design System / Data display

数据展示

先看身份,再比较数字,最后追溯依据。

与工作台共享外观偏好

DataTable / StockLink / Num

点击涨跌幅表头排序。数值与表头同时右对齐,单位在表头声明。

指数演示数据
指数点位
示例指数 AA100.00+1.00%上涨
示例指数 BB100.00−1.00%下跌
查看用法
<DataTable caption="指数示例" columns={columns} rows={indices}
  getRowKey={(row) => row.instrument_id} />

SourceBadge

点击标签查看来源、口径和时间。demo_only 与数据质量是独立标记。

查看用法
<SourceBadge meta={meta} />

MetricGrid / MetricList

同一组数据的横向摘要与纵向清单。

示例点位
100.00冻结演示数据
涨跌幅
+1.00%上涨相对前收盘
缺失字段
--该字段未提供

示例点位
100.00冻结演示数据
涨跌幅
+1.00%上涨相对前收盘
缺失字段
--该字段未提供
查看用法
<MetricGrid items={items} columns={3} />
<MetricList items={items} />

StatTile / Sparkline

指标标题、主值、变化与走势共享一套结构。

示例指数 A100.00+1.00%上涨冻结样例 · 非实时行情
查看用法
<StatTile label="上证指数" value={<Num … />}
  aside={<Sparkline points={points} direction="up" label="示例走势" />} />

ScoreRing / ScoreBar

评分由数字和位置编码,不代表上涨概率;缺失不能补零。

72示例评分/ 100
规则评分 · 演示72
缺失维度--
查看用法
<ScoreRing value={72} label="示例评分" />
<ScoreBar value={null} label="缺失维度" />

RangeMeter

展示当前值与统计区间的距离,不是目标价或买卖区间。

区间下沿 80.00区间上沿 110.00

固定演示区间,仅用于组件展示,不构成价格预测。

查看用法
<RangeMeter low="80" high="110" current="96.42" meta={meta} />

所有数据示例仅用于组件排版演练,不构成投资建议。