Tracking 状态追踪

Tracking 组件用于以紧凑的色块序列可视化展示持续状态监控数据，如服务器可用性、服务健康度等。

基础用法

通过 items 配置色块数据，不同状态自动映射不同颜色。

<TTracking :items="items" />

无数据态

status: 'none' 显示透明色块，表示该时段无数据。

<TTracking :items="[{ status: 'none', label: 'No data' }, ...]" />

色块尺寸

通过 block-size 调整色块大小。

<TTracking :items="items" block-size="sm" />

卡片集成

配合 Card 组件构建完整监控面板。

<div class="card">
  <div class="card-body">
    <div class="d-flex align-items-center">
      <div class="subheader">Status monitoring</div>
    </div>
    <div class="d-flex align-items-baseline mt-3">
      <div class="h1 mb-0 me-2">99.5%</div>
      <span class="text-green d-inline-flex align-items-center lh-1">2% ↑</span>
    </div>
    <TTracking :items="items" class="mt-2" />
  </div>
</div>

API

Props

Prop	说明	类型	默认值
items	数据源	TrackingItem[]	[]
status-map	状态到颜色类的映射	Record<string, string>	—
block-size	色块尺寸	'sm' | 'md' | 'lg'	'md'
gap	色块间距(px)	number	2
height	自定义色块高度(px)	number	—
tooltip-placement	Tooltip 方向	'top' | 'bottom' | 'left' | 'right'	'top'
empty-text	空数据提示	string	'暂无数据'

TrackingItem

属性	类型	说明
id	string | number	唯一标识
status	'success' | 'danger' | 'warning' | 'info' | 'none'	状态标识
timestamp	string | number	时间点
label	string	Tooltip 文案
color	string	覆盖 statusMap 的自定义颜色类

Emits

事件	参数	说明
block-click	(item, index)	点击色块

Slots

插槽	说明
empty	空数据状态