🏆 Ranking · 排行榜

来源：Figma 「排行榜 (31)」+「排名」实例抽取
通用化为"排行榜列表" · 3 个 view · 标准榜 / 金银铜 Top3 高亮 / 横向条形榜

① Standard Ranking · 标准榜（带升降箭头）

最常见的排行形式，左侧排名 + 中间信息 + 右侧数值 + 同比变化（↑绿色 / ↓红色）。

1
🚗
Nissan Versa 2026
紧凑型轿车 · 1.6L
3,842
↑ 12.5%
2
🚙
MG ZS 2025
紧凑型 SUV · 1.5T
2,915
↑ 8.2%
3
🚘
Kia Rio 2025
紧凑型轿车 · 1.6L
2,408
↓ 3.1%
4
🏁
Hyundai GRAND i10 HATCHBACK
小型车 · 1.2L
2,104
↑ 4.7%
5
🚖
Toyota Yaris Sedán 2024
紧凑型 · 1.5L
1,892
↑ 1.3%

② Highlight Top 3 · 金银铜 Top3 高亮

3 列金银铜样式，第 1 名加冕"👑" + 上移 8px + 渐变背景。适合榜单首页 / 推荐模块。

2
🥈
MG ZS
2,915 辆
👑
1
🚗
Nissan Versa
3,842 辆
本月销冠
3
🥉
Kia Rio
2,408 辆

③ Bar Chart Ranking · 横向条形榜

适合品牌 / 类目排行，左右对照清晰。最高值的 bar = 100% 宽度，其他按比例缩短。

1
Nissan
8,521
2
Toyota
6,135
3
Kia
4,943
4
Hyundai
4,089
5
MG
3,068
6
Honda
2,387

🎨 对应 Design Tokens

元素用 Token
Top1 徽章金 #D4AF37
Top2 徽章银 #C0C0C0
Top3 徽章铜 #CD7F32
排名数字--grey-400 默认 / --grey-900 Top3
排行榜行--white 背景 / --grey-50 hover
Top1 高亮卡渐变：--yellow-50 → --white
Bar chart 填充--yellow-500
数值同比 ↑--green-500
数值同比 ↓--red-500