cykj/zkxw
1
0 Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

docs: add mobile-h5 empty state design (scheme B)

Browse Source 
Record the dashed soft-card empty state as the global van-empty default, with a visual demo for review.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
zlwuandCursor committed 2026-08-10 15:34:24 +08:00
1 parent 01e4b3b494
commit 169781a702
2 files changed
+449
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/superpowers/specs/2026-08-10-mobile-h5-empty-state-design.md
+76
View File
@@ -0,0 +1,76 @@
# 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`）
mobile-ui/zkxw-mobile-empty-state-demo.html
+373
View File
@@ -0,0 +1,373 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<title>中科兴皖 · 空态 Empty State UI Demo</title>
<style>
:root {
--brand-green: #0a9f6d;
--brand-green-dark: #087f57;
--brand-green-soft: #e9f9f2;
--barley-yellow: #d6a343;
--barley-yellow-soft: #fff7e8;
--bg-page: #f5f8f7;
--surface: #ffffff;
--text-primary: #1f2a26;
--text-muted: #6b7b74;
--border: #dcebe4;
--shadow-soft: 0 4px 16px rgba(8, 127, 87, 0.08);
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
min-height: 100%;
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
color: var(--text-primary);
background:
radial-gradient(900px 420px at 10% -10%, rgba(10, 159, 109, 0.14), transparent 55%),
radial-gradient(700px 380px at 90% 0%, rgba(214, 163, 67, 0.12), transparent 50%),
linear-gradient(180deg, #eef6f2 0%, #f7faf9 40%, #f3f6f5 100%);
}
body { padding: 24px 16px 48px; }
.page { max-width: 1180px; margin: 0 auto; }
.hero {
background: rgba(255, 255, 255, 0.92);
border: 1px solid var(--border);
border-radius: 18px;
padding: 22px 22px 18px;
box-shadow: var(--shadow-soft);
margin-bottom: 20px;
}
.hero h1 {
margin: 0 0 6px;
font-size: 22px;
color: var(--brand-green-dark);
}
.hero .sub {
margin: 0;
font-size: 13px;
color: var(--text-muted);
line-height: 1.55;
max-width: 720px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
}
.card {
background: #fff;
border: 1px solid var(--border);
border-radius: 18px;
overflow: hidden;
box-shadow: var(--shadow-soft);
}
.card-label {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 14px;
border-bottom: 1px solid #eef3f1;
background: #fafcfb;
}
.badge {
width: 24px; height: 24px; border-radius: 7px;
background: var(--brand-green-soft);
color: var(--brand-green-dark);
font-size: 12px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
}
.card-label h3 { margin: 0; font-size: 14px; }
.card-label p { margin: 2px 0 0; font-size: 11px; color: var(--text-muted); }
.phone {
background: var(--bg-page);
padding: 14px;
min-height: 260px;
}
.phone-header {
background: linear-gradient(135deg, var(--brand-green), var(--brand-green-dark));
color: #fff;
border-radius: 14px 14px 18px 18px;
padding: 12px 14px 16px;
margin: -14px -14px 12px;
}
.phone-header .brand { font-size: 11px; opacity: .9; }
.phone-header .hello { font-size: 15px; font-weight: 600; margin-top: 4px; }
.panel {
background: #fff;
border-radius: 14px;
border: 1px solid var(--border);
padding: 12px;
}
.panel-hd {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 6px;
}
.panel-hd .t { font-size: 13px; font-weight: 600; }
.panel-hd .h { font-size: 11px; color: var(--text-muted); }
.card-foot {
padding: 12px 14px 14px;
font-size: 12px;
color: var(--text-muted);
line-height: 1.5;
border-top: 1px solid #eef3f1;
}
/* A */
.empty-a {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 36px 12px; gap: 8px;
}
.empty-a .ico { font-size: 36px; color: #b7c7bf; line-height: 1; }
.empty-a .txt { font-size: 13px; color: var(--text-muted); }
/* B */
.empty-b {
border-radius: 14px;
background: linear-gradient(165deg, #eef9f3 0%, #ffffff 55%);
border: 1.5px dashed #b7e5d0;
padding: 28px 14px 22px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
}
.empty-b .blob {
width: 72px; height: 72px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fff, #d8f3e7 70%);
display: flex; align-items: center; justify-content: center;
}
.empty-b .blob svg { width: 30px; height: 30px; }
.empty-b .txt { font-size: 13px; color: #5d746a; }
.empty-b .tip { font-size: 11px; color: #8aa198; text-align: center; line-height: 1.4; }
/* C */
.empty-c {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 40px 12px; gap: 12px;
}
.empty-c .ico-wrap {
width: 56px; height: 56px; border-radius: 16px;
background: var(--brand-green-soft);
display: flex; align-items: center; justify-content: center;
}
.empty-c .ico-wrap svg { width: 26px; height: 26px; }
.empty-c .txt { font-size: 13px; color: var(--text-muted); font-weight: 500; }
/* D */
.empty-d {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 32px 12px; gap: 10px;
}
.empty-d .ring {
width: 72px; height: 72px; border-radius: 50%;
background: var(--barley-yellow-soft);
border: 2px solid #f0d9a8;
display: flex; align-items: center; justify-content: center;
}
.empty-d .ring svg { width: 30px; height: 30px; }
.empty-d .txt { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.empty-d .tip { font-size: 11px; color: var(--text-muted); }
/* E */
.empty-e {
display: flex; align-items: center; justify-content: center; gap: 12px;
padding: 40px 12px;
}
.empty-e .dot {
width: 40px; height: 40px; border-radius: 12px;
background: var(--brand-green-soft);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.empty-e .dot svg { width: 20px; height: 20px; }
.empty-e .col { display: flex; flex-direction: column; gap: 2px; }
.empty-e .txt { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.empty-e .tip { font-size: 11px; color: var(--text-muted); }
.note {
margin-top: 20px;
padding: 14px 16px;
background: rgba(255,255,255,.9);
border: 1px solid var(--border);
border-radius: 14px;
font-size: 13px;
color: var(--text-muted);
line-height: 1.55;
}
.note strong { color: var(--brand-green-dark); }
</style>
</head>
<body>
<div class="page">
<div class="hero">
<h1>空态 Empty State · 方案对比</h1>
<p class="sub">对齐三墙 Token（品牌绿 #0a9f6d）。选定后将统一到 <code>mobile-h5/components/van-empty</code>，主页 / 列表 / 组件演示页共用。</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol id="i-inbox" viewBox="0 0 24 24" fill="none" stroke="#0a9f6d" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/>
<path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
</symbol>
<symbol id="i-folder" viewBox="0 0 24 24" fill="none" stroke="#0a9f6d" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
</symbol>
<symbol id="i-box" viewBox="0 0 24 24" fill="none" stroke="#d6a343" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
<polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
<line x1="12" y1="22.08" x2="12" y2="12"/>
</symbol>
<symbol id="i-search" viewBox="0 0 24 24" fill="none" stroke="#0a9f6d" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="7"/>
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
</symbol>
</svg>
<div class="grid">
<!-- A -->
<article class="card">
<div class="card-label">
<span class="badge">A</span>
<div>
<h3>现状 · 符号空态</h3>
<p>当前 ∅ 实现</p>
</div>
</div>
<div class="phone">
<div class="phone-header">
<div class="brand">中科兴皖 · 移动工作台</div>
<div class="hello">功能菜单</div>
</div>
<div class="panel">
<div class="panel-hd"><span class="t">功能菜单</span><span class="h">共 0 项</span></div>
<div class="empty-a">
<div class="ico">∅</div>
<div class="txt">暂无可用菜单权限</div>
</div>
</div>
</div>
<div class="card-foot">简洁但偏弱，辨识度一般，不建议作为全局定稿。</div>
</article>
<!-- B -->
<article class="card">
<div class="card-label">
<span class="badge">B</span>
<div>
<h3>虚线软卡 · 推荐</h3>
<p>对齐 vant Demo 组件区</p>
</div>
</div>
<div class="phone">
<div class="phone-header">
<div class="brand">中科兴皖 · 移动工作台</div>
<div class="hello">功能菜单</div>
</div>
<div class="panel">
<div class="panel-hd"><span class="t">功能菜单</span><span class="h">共 0 项</span></div>
<div class="empty-b">
<div class="blob"><svg><use href="#i-inbox"/></svg></div>
<div class="txt">暂无可用菜单权限</div>
<div class="tip">请联系管理员开通功能入口</div>
</div>
</div>
</div>
<div class="card-foot">薄荷绿渐变虚线框 + 圆形插画 + 主副文案，适合作为全局默认空态。</div>
</article>
<!-- C -->
<article class="card">
<div class="card-label">
<span class="badge">C</span>
<div>
<h3>极简徽章</h3>
<p>圆角图标底板</p>
</div>
</div>
<div class="phone">
<div class="phone-header">
<div class="brand">中科兴皖 · 移动工作台</div>
<div class="hello">功能菜单</div>
</div>
<div class="panel">
<div class="panel-hd"><span class="t">功能菜单</span><span class="h">共 0 项</span></div>
<div class="empty-c">
<div class="ico-wrap"><svg><use href="#i-folder"/></svg></div>
<div class="txt">暂无可用菜单权限</div>
</div>
</div>
</div>
<div class="card-foot">留白多、视觉轻；适合卡片内嵌，副文案可选。</div>
</article>
<!-- D -->
<article class="card">
<div class="card-label">
<span class="badge">D</span>
<div>
<h3>大麦黄点缀</h3>
<p>辅助色圆环</p>
</div>
</div>
<div class="phone">
<div class="phone-header">
<div class="brand">中科兴皖 · 移动工作台</div>
<div class="hello">功能菜单</div>
</div>
<div class="panel">
<div class="panel-hd"><span class="t">功能菜单</span><span class="h">共 0 项</span></div>
<div class="empty-d">
<div class="ring"><svg><use href="#i-box"/></svg></div>
<div class="txt">暂无可用菜单权限</div>
<div class="tip">当前角色暂无功能入口</div>
</div>
</div>
</div>
<div class="card-foot">更醒目，适合「权限不足 / 需关注」类提示；日常空列表可能略抢眼。</div>
</article>
<!-- E -->
<article class="card">
<div class="card-label">
<span class="badge">E</span>
<div>
<h3>横向紧凑</h3>
<p>列表矮空态变体</p>
</div>
</div>
<div class="phone">
<div class="phone-header">
<div class="brand">中科兴皖 · 移动工作台</div>
<div class="hello">待办列表</div>
</div>
<div class="panel">
<div class="panel-hd"><span class="t">待办列表</span><span class="h">0 条</span></div>
<div class="empty-e">
<div class="dot"><svg><use href="#i-search"/></svg></div>
<div class="col">
<div class="txt">暂无数据</div>
<div class="tip">可下拉刷新或调整筛选条件</div>
</div>
</div>
</div>
</div>
<div class="card-foot">图标与文案横排，适合列表矮区域；可与 B/C 主样式通过 layout 属性切换。</div>
</article>
</div>
<div class="note">
<strong>建议：</strong>全局默认选 <strong>B</strong> 或 <strong>C</strong>；列表矮场景可加 <strong>E</strong> 作为变体。
选定后改 <code>van-empty</code> 一处，主页 / demo 列表 / 组件页自动一致。
</div>
</div>
</body>
</html>