状态与异常 UI

订单状态、业务状态、按钮层级、弹层与空/错/载入态

01 · 订单状态(12 态)

全端唯一口径:文案、颜色、主操作一致。禁止出现「已接单 / 已退回 / 售后中」等旧文案。

待支付 10 待接单 20 待开工 30 服务中 40 待审核 50 报备驳回 55 待确认 60 已完成 70 已结算 80 已退款 91 已取消 92 已关闭 93

02 · 业务状态

提现、退款、报备与工单使用同一套色板,避免后台与 C 端两套语义。

待审核 待打款 已打款 已驳回 打款失败 处理中 已结案

03 · 按钮层级

一屏仅一个主按钮;危险操作二次确认;提交中必须 loading 并禁用。

Primary / 主操作
Secondary / 次操作
Outline / 轻量动作
Danger / 危险操作
Disabled / 不可用
Loading / 提交中

04 · 标签、徽标与输入

标签用于状态与属性;输入聚焦为电光蓝,错误态同时给颜色与文案。

Tags
待接单待确认已完成 已退款已取消
Input / Default
Input / Error
手机号需为 11 位
Switch
在线 / 离线
Upload
Segmented

05 · 弹层与反馈

确认弹窗、原因弹窗、底部 Sheet、Toast 四类覆盖全部业务动作。

06 · 页面状态

加载、空、错误、无权限、404 均有独立出口,不允许白屏或 dead-end。

Skeleton / 加载中
Empty / 空数据
🔍
还没有订单

去首页看看服务

Error / 网络错误
!
网络开小差了

请检查网络后重试

403 / 无权限
🔒
没有访问权限

缺少订单查看权限

404 / 页面不存在
404
页面不存在

链接可能已失效

Maintenance / 降级
🛠
服务升级中

预计 30 分钟后恢复

07 · 主题

深色为默认;浅色模式通过同一套 CSS 变量切换,业务组件无需改结构。

当前:dark