UI 组件总览

集中查看前台通用组件，以及账户、结账、评价和回收流程中使用的控件。所有示例均使用本地演示数据。

按钮与链接

账户 Button / IconButton · antd Button · 通用 InteractiveLink

浏览 iPhone

表单控件

账户 Input · antd Form、Input、Select、Checkbox、Radio、Upload · 用于账户、评价与回收表单

请选择
请选择
0 / 200

仅本地预览，不会上传文件。

前台通用组件

modules/common/components · 展示现有控件及商品标识，保留各自当前样式

SelectionRow · 单选（radio）

单选优先使用此整行样式。点击整行即可选择，每组只能选一项。

容量
等级
电池

SelectionRow · 多选（checkbox）

多选使用相同的整行样式，控件改为 checkbox，各项可独立勾选或取消。

配件
禁用状态

Input · 浮动标签

通用 Input

NativeSelect · 结账国家选择

CheckboxWithLabel · 地址选项

FilterRadioGroup · 排序

RadioGroup

Badge / IconBadge

成功
错误
信息
警告
禁用状态

GradeBadge · 商品成色

S 级
A 级
B 级
C 级

Rating · 4.5 分，满分 5 分

RatingInput · 评价表单

4 星

Button / IconButton

Heading / Text / Label / Container

UI 组件总览

现有通用文字及容器样式。

商品与购物车组件

Thumbnail · CartTotals · SkeletonProductPreview · 现有商品与结账展示组件

Thumbnail · 商品图片缺省状态

CartTotals · 演示订单汇总

商品小计（不含运费和税费）€499.00
运费€10.00
优惠- €20.00
税费€0.00
合计€489.00

SkeletonProductPreview · 商品加载状态

反馈与状态

antd Alert、Tag、Spin、Skeleton、Empty、Result · 用于账户、订单与回收页面

成功
处理中
警告
错误
禁用状态
加载中

No data
暂无演示记录
预览完成
此处展示操作结果组件。

数据展示与导航

antd Table、Statistic、Progress、Steps、Timeline、Collapse、Pagination、Menu · 用于账户、订单与回收页面

演示商品
6

进度

66%
已提交
2
已检测
3
已完成
商品容量状态价格
iPhone 15128 GB可用€499.00
iPhone 14256 GB处理中€399.00
iPhone 13512 GB可用€499.00

弹窗与表单

账户 Modal 与通用 Modal · 表单校验和提交仅在本页演示

尝试直接提交或填写错误内容，查看表单校验。