组件库

AeroInfo Hub 统一设计令牌与可复用组件规范。

设计令牌

--color-primary主色（靛蓝）#4f46e5
--color-accent辅色（航空蓝）#0066CC
--radius-xl卡片圆角1rem
--shadow-card卡片阴影0 4px 20px rgba(0,0,0,.06)

色彩

#4f46e5

#0066CC

#10b981

#f59e0b

#f43f5e

#0f172a

#71717a

#e4e4e7

字体

InterJetBrains MonoNoto Sans SC

基础组件

Button

Input / Select

Badge（验证状态）

已验证待核对冲突核对失败

Switch

Card

资讯卡片

用于展示结构化航旅资讯摘要。

Toast

Skeleton

状态指示

完成 加载中

业务组件

SourceCard（采集源）

中国民用航空局

VerifyBadge（徽章）

已验证待核对冲突核对失败

NewsCard（资讯）

中国民用航空局 · 已验证

某航线因维修暂停部分航班

使用规则

  • 主色仅用于关键操作与强调，避免大面积铺色。
  • 卡片统一使用 --radius-xl 圆角与玻璃态边框。
  • 验证状态必须附带对应色彩徽章，保证可访问性。
  • 间距遵循 4px 基线网格，区块间距为 16/24/32px。
  • 暗色模式通过 class 策略切换，所有色彩需提供暗色变量。