1. Card (卡片容器)

<Card> 组件是排版的基础容器,支持 7 种主题色(blue, green, orange, red, yellow, purple, slate)和 4 种变体(soft, filled, border, left-border)。

Variant: soft (柔和背景 - 默认)

Blue Soft
蓝色柔和背景卡片
Green Soft
绿色柔和背景卡片
Orange Soft
橙色柔和背景卡片

Variant: filled (实心背景)

Blue Filled
蓝色实心背景卡片,文字自动反白。
Red Filled
红色实心背景卡片。
Slate Filled
灰石色实心背景卡片。

Variant: border (仅边框)

Blue Border
蓝色边框卡片,背景透明(白色)。
Purple Border
紫色边框卡片。

Variant: left-border (左侧粗线 - 适用于延伸阅读)

延伸阅读 · 推荐

《3亿美元,5个信号 | DeepSeek 首次融资》

这是一张 left-border 变体的卡片,左侧有一条与主题色相同的加粗边线。


2. Flow & FlowRow (拓扑流 / 替代 Mermaid)

利用 <Flow> 容器和 <FlowRow> 行组件,可以轻松拼接出垂直排布的流程图或拓扑图结构。

▾ 完整形态展示 ▾
顶层节点 (Filled)
分支节点
子节点 A
子节点 B
子节点 C
子节点 D

保值 × 风险

容错之争

风险 × 招商

三个”不”

招商 × 保值

退出难

结论:管资产 → 管资本 (left-border)

3. List & ListItem (增强列表)

支持三种结构变体:block(卡片块)、split(左侧分割线)、circle(实心圆圈序号)。

Variant: block (全宽卡片块列表)

Variant: split (左侧垂直分割线前缀列表)

Variant: circle (实心圆圈序号列表)


4. BadgeGroup & Badge (彩色胶囊标签)

AIC直投扩大 (blue)国家创投母基金 (green)社保基金入场 (orange)高风险警告 (red)待观察项目 (yellow)科创债券 (purple)常规标签 (slate)

5. BarChart & Bar (轻量数据可视化)

可以直接指定颜色。如果设置了 percent(0-100),进度条就会相应填充。

各轮次融资降幅对比
种子轮 (red)
71%
天使轮 (orange)762 → 192
-75%
A轮 (yellow)1,114 → 363
-67%
B轮 (blue)545 → 278
-49%
C轮 (green)270 → 133
-51%
D轮 (purple)150 → 90
-40%
E轮及以后 (slate)50 → 45
-10%
ℹ️说明
note:标准说明,蓝色底框。
💡专业小技巧
tip:技巧提示,绿色底框。可自定义标题。
⚠️注意
warning:警告踩坑,黄色底框。
🚨警告:高风险操作
danger:高危警告,红色底框。
ℹ️说明
💡专业小技巧
⚠️注意
🚨警告:高风险操作
note:标准说明,蓝色底框。
tip:技巧提示,绿色底框。可自定义标题。
warning:警告踩坑,黄色底框。
danger:高危警告,红色底框。