设计基础 / 04
基础原子
把界面拆到不可再分的最小单元：文本、图形、形状、交互、表单、数据六族原子。所有复杂组件都由这些原子拼装而成。
文本原子
price / num / date / status / badge / quote / code价格 Price
¥299起
¥1,299¥1,999
$ 49.00 / 月
¥0免费额度
.price 使用等宽字体，原价走 .old 删除线。
数字 Number
1,284,930
+12.4% 环比
↑ 8,420
↓ 1,205
18.6s · 42.1KB · 94.2%
数字统一 JetBrains Mono，便于小数点与千分位对齐。
日期与时间 Date
2026-10-03 完整日期
14:30 时间
10-03 14:30 省略年份
3 分钟前 · 昨天 · 上周三
2026 / Q4
状态 Status
运行中
维护中
已中断
发布中
已停止
9
新
Hot
角标 Badge · 计数
3
99+
消息 12
待办 5
草稿 草
数字角标走等宽字体；超过 99 显示 99+；纯红点使用 .badge.dot。
引用与代码原子
引用一句话，用于观点强调或用户评价。
行内代码
npm run build
快捷键
⌘K
标签芯片
设计
前端
图形原子
logo / icon / avatar / thumb / divider / dot / placeholderLogo 标识
N
Nexus UIComponent Library
N
UI
Nx
方标 / 圆标 / 渐变标 三种形态。
头像 Avatar
陈
李
王
赵
周
访
A
B
C
+8
缩略图 · 占位图
渐变块
空位
一律用渐变块 + 内联 SVG 模拟图片，不引入外部图片资源。
分割线 · 徽章圆点
文本分割线
分隔符垂直分割行内使用
圆点徽章 / 呼吸点
更多图形原子
加载 spin
音浪 eq
星级 stars
环形 ring
形状容器
radius / circle / mask / gradient圆角四档
rounded-tag
rounded-btn
rounded-card
rounded-wrap
圆形
68
遮罩 Mask
纯色遮罩 45%
渐变块
渐变色号取自已定义状态色，深浅色模式下都保持可用对比度。
交互原子
close / wish / like / copy / scrollbar / clear / play关闭 · 清除
标签
收藏 · 点赞 · 复制
1,284
326
42
播放 · 暂停
01:12
03:20
滚动条与可滚区域
这是纵向滚动容器，滚动条宽度 10px、圆角 10px、滑块使用 bd-strong 颜色，并留出 3px 透明描边，视觉上更轻。
内容继续追加…
第 3 行
第 4 行
第 5 行
第 6 行
第 7 行
第 8 行
第 9 行
第 10 行
内容继续追加…
第 3 行
第 4 行
第 5 行
第 6 行
第 7 行
第 8 行
第 9 行
第 10 行
卡片 1
卡片 2
卡片 3
卡片 4
其他交互原子
表单原子
caret / radio / checkbox / upload / arrow / req / suffix单选 · 复选 · 开关
单选
开关
必填星标 · 单位后缀
GB
¥元 / 月
s
下拉箭头 · 光标
nexus
聚焦态：2px 前景色描边 + 光标闪烁
上传原子
点击或拖拽上传
支持 PNG / JPG / SVG
松开鼠标即可上传（拖拽中高亮）
SVG
logo-mark.svg
数字步进 · 标签输入
原子
数据原子
percent / stars / progress / pager / status light百分比
已完成94.2%
增长12.4%
下降2.8%
72环形百分比
星级评分
4.2
可点击评分（data-rate）
0.0
进度色块
默认68%
成功100%
危险24%
细线 thin52%
页码 · 状态灯
服务正常
负载偏高
服务中断
正在重启
已下线