zkxw/docs/superpowers/specs/2026-08-10-mobile-h5-empty-state-design.md

mobile-h5 全局空态（Empty State）设计

日期： 2026-08-10
范围： mobile-h5 空态组件视觉统一
选定方案： B（虚线软卡）
参考 Demo： mobile-ui/zkxw-mobile-empty-state-demo.html（方案 B）

背景

主页功能菜单清空后，VanEmpty 当前以「∅ + 灰色文案」展示，视觉偏弱且与三墙 Demo / zkxw-mobile-vant-ui-demo 中的空态风格不一致。需统一全局空态样式。

目标

• 全局默认空态采用方案 B：薄荷绿渐变虚线框 + 圆形插画 + 主文案（+ 可选副文案）
• 所有使用 van-empty / VanEmpty 的页面样式一致
• 仅改组件实现，业务文案由调用方传入

非目标

• 不引入方案 E（横向紧凑）变体（后续如需再开）
• 不改业务文案含义（如「暂无可用菜单权限」仍由页面传入）
• 不引入真实 Vant Weapp 依赖；继续使用 H5 shim 组件

视觉规格（方案 B）

项	值
容器背景	linear-gradient(165deg, #eef9f3 0%, #ffffff 55%)
边框	1.5px / 3rpx 虚线 #b7e5d0
圆角	约 14px / 28rpx（对齐卡片节奏）
插画区	圆形，径向渐变 #fff → #d8f3e7，内嵌 inbox SVG，描边 #0a9f6d
主文案	26rpx，颜色 #5d746a
副文案（可选）	22rpx，颜色 #8aa198，居中
内边距	约 44rpx 28rpx 40rpx
Token	三墙绿链，禁止使用管理端 #10b981

组件 API

文件：mobile-h5/components/van-empty/van-empty.vue

Prop	类型	默认	说明
description	String	''（展示时回落「暂无数据」）	主文案
tip	String	''	副文案；空则不渲染

结构：

.v-empty
  .v-empty__card
    .v-empty__blob（inbox SVG）
    .v-empty__desc
    .v-empty__tip（v-if tip）

调用约定

页面	用法
pages/index/index.vue	description="暂无可用菜单权限"，可选 tip="请联系管理员开通功能入口"
pages/demo/list.vue	description="暂无数据"
pages/demo/comps.vue	description="暂无相关数据"，可带 tip 演示副文案

样式只维护在 van-empty.vue（scoped）；不在各页面覆盖空态视觉。

验收

1. 主页无菜单时显示方案 B 样式，非 ∅ 符号
2. demo 列表空数据、组件演示页空态与主页视觉一致
3. 色值符合三墙 Token；无管理端薄荷绿混用
4. 未传 tip 时不出现空白副文案占位

参考

• Demo 对比页：mobile-ui/zkxw-mobile-empty-state-demo.html
• 既有 Demo 组件区：mobile-ui/zkxw-mobile-vant-ui-demo.html（.comp-empty-box）