From 169781a7023ab3436d42ef9659645b6bb1e0bc0a Mon Sep 17 00:00:00 2001
From: zlwu <704541015@qq.com>
Date: Mon, 10 Aug 2026 15:34:24 +0800
Subject: [PATCH] docs: add mobile-h5 empty state design (scheme B)

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>
---
 ...2026-08-10-mobile-h5-empty-state-design.md |  76 ++++
 mobile-ui/zkxw-mobile-empty-state-demo.html   | 373 ++++++++++++++++++
 2 files changed, 449 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-08-10-mobile-h5-empty-state-design.md
 create mode 100644 mobile-ui/zkxw-mobile-empty-state-demo.html

diff --git a/docs/superpowers/specs/2026-08-10-mobile-h5-empty-state-design.md b/docs/superpowers/specs/2026-08-10-mobile-h5-empty-state-design.md
new file mode 100644
index 00000000..f8c89b3e
--- /dev/null
+++ b/docs/superpowers/specs/2026-08-10-mobile-h5-empty-state-design.md
@@ -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`）
diff --git a/mobile-ui/zkxw-mobile-empty-state-demo.html b/mobile-ui/zkxw-mobile-empty-state-demo.html
new file mode 100644
index 00000000..df5846e8
--- /dev/null
+++ b/mobile-ui/zkxw-mobile-empty-state-demo.html
@@ -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>