n-empty 空状态
空状态占位与结果页二合一：mode 单枚举 18 个预设——14 个空态场景（data 数据为空 / list 列表 / news 新闻 / message 消息 / search 搜索无结果 / address 地址 / order 订单 / coupon 优惠券 / car 购物车 / favor 收藏 / permission 权限 / history 历史 / wifi 网络 / page 页面不存在）+ 4 个结果态（success / warning / error / waiting）。空态默认 = 品牌淡色圆盘 + 品牌色图标 + 次要灰文案；结果态默认 = 功能色实底圆盘 + 白图标 + 加粗主标题；主文案留空自动取场景预设文案（跟随语言包，切换语言即时刷新）。
- 零配置即用：
<n-empty mode="order" />出完整空态（图标 + 场景文案）；换图标传icon，换文案传text，补第二行说明传description- 结果页用法：
mode="success"圆盘自动换功能色实底、图标转白、主文案转加粗主标题——放default插槽进「返回首页 / 查看订单」等操作按钮即成结果页- 自定义插画放
#icon插槽（image 插画或任意内容，几何自理），整位替换内置圆盘；disc-color="transparent"关闭圆盘得纯图标形态
平台兼容性
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | × | × | × | × |
如何调用
html
<n-empty mode="order" />API
属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| mode | 场景预设（决定默认图标、默认文案与配色）；非法值按 data 处理 | String | "data" | data / list / news / message / search / address / order / coupon / car / favor / permission / history / wifi / page / success / warning / error / waiting |
| icon | 覆盖预设图标：内置图标名或 registerIconFont 注册的自有图标名；图片插画走 #icon 插槽 | String | "" | - |
| icon-size | 图标字号（px） | Number | 44 | - |
| icon-color | 图标颜色；空 = 空态品牌色 / 结果态白色 | String | "" | 与 css 相同 |
| disc-size | 圆盘直径（px）：图标在盘内居中，改盘径即整体缩放插画位 | Number | 96 | - |
| disc-color | 圆盘底色：空 = 空态品牌淡色 / 结果态功能色实底；'transparent' = 关闭圆盘（纯图标形态） | String | "" | 与 css 相同 |
| text | 主文案；空 = 按 mode 取场景预设文案（跟随语言包） | String | "" | - |
| text-size | 主文案字号（px） | Number | 15 | - |
| text-color | 主文案颜色；空 = 空态次要灰 / 结果态主墨（结果态自动加粗为标题观感） | String | "" | 与 css 相同 |
| description | 补充描述（第二行小字）；空串不渲染 | String | "" | - |
| description-size | 描述字号（px） | Number | 13 | - |
| description-color | 描述颜色；空 = 次要灰（跟随主题，深浅自动适配） | String | "" | 与 css 相同 |
| fixed | 贴屏垂直居中：fixed 定位水平铺满 + 垂直居中，只占内容高度（不铺满全屏，内容区外的屏幕照常交互）；false 为常规文档流占位 | Boolean | false | - |
| custom-class | 挂到根节点的额外 class（类需定义在组件样式表内） | String | "" | - |
| custom-style | 根节点行内样式，如 "margin:20px 0"（与相邻元素的排间距也走它） | String | "" | 与 css 相同 |
事件
| 事件名 | 说明 |
|---|---|
| click | 点击组件时触发（用于「点击重试」等场景；操作区按钮各自处理自己的点击） |
插槽
| 插槽名 | 说明 |
|---|---|
| icon | 整位替换内置插画（圆盘 + 图标）：放 image 插画或任意内容，几何自理；提供即接管插画位 |
| default | 操作区：放 n-button 等操作内容，位于描述下方 |
实现说明
- 预设并集：场景枚举取移动端组件库空状态的场景全集（14 个空态场景）并补入结果页组件的四类型（success / warning / error / waiting，命名对齐本库语义色 error）合入单一
mode；参考库用 icon / type / mode 三套枚举重复表达同一维度，本库收敛为单枚举。结果态与空态共用同一套插画位 / 文案 / 操作区结构——结果页本质就是带类型圆盘的空态。 - 插画视觉：参考库的内置插画是多色 SVG 字形或发行图片资产；本库加密发行零静态资源，内置插画位取「圆盘 + 图标字体」：空态 = 品牌淡色盘（
--n-empty-disc-color，品牌色 10% 透明）+ 品牌色图标；结果态 = 功能色实底盘 + 白图标（圆盘观感沿用结果页参考形态）。需要多色插画时用#icon插槽放 image。 - 文案分层：空态主文案取次要灰（轻提示语义）、结果态取主墨加粗（标题语义）——两套语义在参考源中本就并存，按 mode 自动分层即可取得两类场景的默认最优观感；text-color / text-size 显式覆盖。主文案留空回落场景文案（
t()全字面量键，语言切换即时刷新）。 - 装配位重建：插画位（插槽 / 纯图标 / 空态盘 / 自定义色盘 / 结果盘）与盘色种类切换走
:key整子树销毁重建，规避 App 端背景与子节点插拔不重绘的已知问题；盘底色预设走类（引用运行时变量层）、自定义值走行内background-color单属性——单值 + var 链路全端可靠。 - fixed 形态：取「贴屏垂直居中条」而非「全屏铺满 + 点击穿透」——穿透写法（pointer-events: none）在 App 端父层 none 时子元素显式 auto 也不响应，会废掉操作区按钮与 click；条形定位只占内容高度，内容区外的屏幕照常交互，层级走
--n-empty-fixed-z-index（默认 99，低于弹层与轻提示）。 - 不收项：参考元数据中的 close 事件（其源系声明了从未触发的死事件，模板无关闭按钮）、show 显隐 prop（纯静态组件无副作用，v-if 等价）、marginTop prop（间距走 custom-style，与全库定制通道一致）、width/height 图标宽高拆分（圆盘单值 discSize 等价表达）。