Format Badge

Format Badge 组件用于显示数据的格式类型，如 email、uuid、date-time 等，通过不同的颜色主题来区分不同类型的格式。

Open in

数字格式

int32int64floatdouble

日期格式

datedate-time

标识符格式

emailuuidurihostnameipv4ipv6

二进制格式

bytebinary

敏感格式

password

自定义主题

string(primary)

string(secondary)

string(success)

string(warning)

string(danger)

string(neutral)

安装

使用方法

import { FormatBadge } from "@/components/pivot/format-badge";

<FormatBadge format="email" />

示例

基本用法

<div className="flex flex-wrap items-center gap-2">
  <FormatBadge format="email" />
  <FormatBadge format="uuid" />
  <FormatBadge format="date-time" />
  <FormatBadge format="int32" />
</div>

数字格式

<div className="space-y-3">
  <div className="flex items-center gap-3">
    <span className="w-20 text-sm">整数:</span>
    <FormatBadge format="int32" />
    <FormatBadge format="int64" />
  </div>
 
  <div className="flex items-center gap-3">
    <span className="w-20 text-sm">浮点数:</span>
    <FormatBadge format="float" />
    <FormatBadge format="double" />
  </div>
</div>

日期时间格式

<div className="space-y-3">
  <div className="flex items-center gap-3">
    <span className="w-20 text-sm">日期:</span>
    <FormatBadge format="date" />
  </div>
 
  <div className="flex items-center gap-3">
    <span className="w-20 text-sm">日期时间:</span>
    <FormatBadge format="date-time" />
  </div>
</div>

标识符格式

<div className="space-y-3">
  <div className="flex items-center gap-3">
    <span className="w-20 text-sm">邮箱:</span>
    <FormatBadge format="email" />
  </div>
 
  <div className="flex items-center gap-3">
    <span className="w-20 text-sm">UUID:</span>
    <FormatBadge format="uuid" />
  </div>
 
  <div className="flex items-center gap-3">
    <span className="w-20 text-sm">URI:</span>
    <FormatBadge format="uri" />
  </div>
 
  <div className="flex items-center gap-3">
    <span className="w-20 text-sm">主机名:</span>
    <FormatBadge format="hostname" />
  </div>
</div>

网络格式

<div className="space-y-3">
  <div className="flex items-center gap-3">
    <span className="w-20 text-sm">IPv4:</span>
    <FormatBadge format="ipv4" />
  </div>
 
  <div className="flex items-center gap-3">
    <span className="w-20 text-sm">IPv6:</span>
    <FormatBadge format="ipv6" />
  </div>
</div>

二进制格式

<div className="space-y-3">
  <div className="flex items-center gap-3">
    <span className="w-20 text-sm">字节:</span>
    <FormatBadge format="byte" />
  </div>
 
  <div className="flex items-center gap-3">
    <span className="w-20 text-sm">二进制:</span>
    <FormatBadge format="binary" />
  </div>
</div>

敏感数据格式

<div className="flex items-center gap-3">
  <span className="w-20 text-sm">密码:</span>
  <FormatBadge format="password" />
</div>

自定义主题

<div className="space-y-3">
  <div className="flex items-center gap-3">
    <span className="w-20 text-sm">Primary:</span>
    <FormatBadge format="custom" theme="primary" />
  </div>
 
  <div className="flex items-center gap-3">
    <span className="w-20 text-sm">Success:</span>
    <FormatBadge format="custom" theme="success" />
  </div>
 
  <div className="flex items-center gap-3">
    <span className="w-20 text-sm">Warning:</span>
    <FormatBadge format="custom" theme="warning" />
  </div>
 
  <div className="flex items-center gap-3">
    <span className="w-20 text-sm">Danger:</span>
    <FormatBadge format="custom" theme="danger" />
  </div>
</div>

在 API 文档中使用

<div className="space-y-3">
  <div className="flex items-center gap-3 p-3 border rounded">
    <code className="font-mono">email</code>
    <TypeIndicator type="string" />
    <FormatBadge format="email" />
    <span className="text-sm text-muted-foreground">用户邮箱地址</span>
  </div>
 
  <div className="flex items-center gap-3 p-3 border rounded">
    <code className="font-mono">created_at</code>
    <TypeIndicator type="string" />
    <FormatBadge format="date-time" />
    <span className="text-sm text-muted-foreground">创建时间</span>
  </div>
 
  <div className="flex items-center gap-3 p-3 border rounded">
    <code className="font-mono">user_id</code>
    <TypeIndicator type="string" />
    <FormatBadge format="uuid" />
    <span className="text-sm text-muted-foreground">用户唯一标识</span>
  </div>
</div>

API 参考

Props

属性	类型	默认值	描述
`format`	`FormatType`	-	格式类型
`theme`	`"primary" \| "secondary" \| "success" \| "warning" \| "danger" \| "neutral" \| "auto"`	`"auto"`	主题颜色
`className`	`string`	-	额外的 CSS 类名

FormatType

支持的格式类型包括：

数字格式

int32 - 32 位整数
int64 - 64 位整数
float - 单精度浮点数
double - 双精度浮点数

日期时间格式

date - 日期格式 (YYYY-MM-DD)
date-time - 日期时间格式 (ISO 8601)

标识符格式

email - 邮箱地址
uuid - UUID 格式
uri - URI 格式
hostname - 主机名

网络格式

ipv4 - IPv4 地址
ipv6 - IPv6 地址

二进制格式

byte - 字节数据
binary - 二进制数据

敏感数据格式

password - 密码字段

主题颜色

primary (蓝色) - 数字类型格式
secondary (紫色) - 日期时间格式
success (绿色) - 标识符格式
warning (黄色) - 二进制格式
danger (红色) - 敏感数据格式
neutral (灰色) - 默认格式
auto - 根据格式类型自动选择主题

最佳实践

语义化使用 - 确保格式标识与实际数据格式一致
一致性 - 在整个应用中保持格式标识的一致性
自动主题 - 使用 theme="auto" 让组件自动选择合适的颜色
上下文相关 - 与类型指示器等其他组件配合使用

无障碍性

使用等宽字体确保格式文本清晰可读
颜色编码不是唯一的信息传达方式（同时显示格式名称）
支持屏幕阅读器
具有足够的颜色对比度

使用场景

API 文档 - 显示参数和响应字段的格式
数据表格 - 标识列的数据格式
表单验证 - 显示输入字段的期望格式
配置界面 - 标识配置项的数据格式