| 类型 | 背景 | 文字 / 图标 | 说明 |
|---|---|---|---|
| 通用 | — | — | 高度 24px，左右内边距 6px，圆角 4px，字号 14px，字重 400 |
| 标签 1 | #3388FF |
#FFFFFF |
主品牌色实心标签 |
| 标签 2 | #F0F9FF |
#3388FF |
浅色品牌色标签 |
| 标签 3 | #F5F7FA |
#223355 |
右侧关闭图标 12×12px，颜色 #223355，可关闭 |
| 标签 4 | #F5F7FA |
#223355 |
左侧图标 12×12px + 文字，图标和文字同色 #223355 |
| 差异点 | 规格值 |
|---|---|
| 高度 | 20px |
| 字号 | 12px |
| 其余 | 背景、文字色、图标、关闭按钮等均与 24px 标签一致 |
| 类型 | 默认 | 悬停 (Hover) | 点击 (Active) |
|---|---|---|---|
| 主要 | #3388FF |
#5CA5FF |
#2167D9 |
| 警示 | #FF6600 |
#FF8629 |
#D94F00 |
| 错误 | #FF4433 |
#FF6F5C |
#D92A21 |
| 成功 | #06A17F |
#11C79B |
#007A64 |
| 默认 | #6B7A99 |
#C3CAD9 |
#223355 |
| 通用 | 文字色统一 #FFFFFF，尺寸沿用 24px / 20px 标签规格 |
||
| 类型 | 背景 | 默认文字 | Hover 文字 | Active 文字 |
|---|---|---|---|---|
| 主要 | #F0F9FF |
#3388FF |
#5CA5FF |
#2167D9 |
| 警示 | #FFD4A3 |
#D94F00 |
#FF6600 |
#B33B00 |
| 错误 | #FFF4F0 |
#FF4433 |
#FF6F5C |
#D92A21 |
| 成功 | #B6FAE0 |
#06A17F |
#11C79B |
#007A64 |
| 默认 | #F5F7FA |
#223355 |
#6B7A99 |
#081126 |
| 类型 | 描边 / 文字色 |
|---|---|
| 主要 | #3388FF |
| 警示 | #D94F00 |
| 错误 | #FF4433 |
| 失败 | #FF4433 |
| 默认 | #223355 |
| 通用 | 背景透明，描边 1px，尺寸沿用 24px / 20px 标签规格 |
| 描边 / 图标 / 文字 | 依次为 #3388FF / #D94F00 / #FF4433 / #FF4433 / #223355（同色） |
| 图标尺寸 | 12×12px |
| 图标位置 | 文字左侧 |
| 图标与文字间距 | 4px |
| 背景 | 透明 |
| 标签背景 / 文字 | #F5F7FA / #223355 |
| Hover 背景 | #E9ECF2 |
| 关闭图标 | 12×12px，颜色 #223355 |
| 新增按钮 | "+" 图标 + "新增"文字，颜色均为 #3388FF |
| 新增交互 | 点击新增按钮后变为输入框（高 32px，边框 1px solid #DDE1EB，圆角 4px），回车或失焦后生成新标签 |