shanxia2.0/bak/mobile-ui/shanxia-mp-empty-state-demo.html

<!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" />
  <title>山峡化工 · 全局空态 Empty State Demo</title>
  <link rel="stylesheet" href="shanxia-mp-base.css" />
  <style>
    body { background: #e8eeeb; }
    .page-wrap {
      max-width: 1100px;
      margin: 0 auto;
      padding: 20px 16px 48px;
    }
    .hero {
      background: var(--header-gradient);
      color: #fff;
      border-radius: 20px;
      padding: 22px 20px;
      margin-bottom: 16px;
      box-shadow: var(--shadow-md);
    }
    .hero h1 { font-size: 20px; margin-bottom: 6px; }
    .hero p { font-size: 13px; opacity: 0.92; line-height: 1.55; }
    .pick-bar {
      position: sticky;
      top: 8px;
      z-index: 20;
      background: rgba(255,255,255,0.96);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 12px;
      margin-bottom: 16px;
      box-shadow: var(--shadow-sm);
      backdrop-filter: blur(8px);
    }
    .pick-bar__label {
      font-size: 11px;
      color: var(--text-muted);
      margin-bottom: 8px;
    }
    .pick-tabs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }
    @media (max-width: 720px) {
      .pick-tabs { grid-template-columns: repeat(2, 1fr); }
    }
    .pick-tab {
      border: 1px solid var(--border);
      background: #f6faf8;
      border-radius: 12px;
      padding: 10px 8px;
      text-align: center;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      line-height: 1.35;
    }
    .pick-tab small {
      display: block;
      font-weight: 400;
      font-size: 10px;
      margin-top: 2px;
      opacity: 0.9;
    }
    .pick-tab.active {
      color: var(--brand-green-dark);
      background: var(--brand-green-soft);
      border-color: #b7e6d2;
      box-shadow: 0 0 0 2px rgba(10, 159, 109, 0.12);
    }
    .note {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.55;
      margin: 0 0 16px;
      padding: 12px 14px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 12px;
    }
    .note strong { color: var(--text-primary); }
    .stage {
      display: none;
    }
    .stage.active { display: block; }
    .phone-frame {
      max-width: 390px;
      margin: 0 auto;
      background: var(--bg-page);
      border-radius: 22px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-md);
      overflow: hidden;
      min-height: 640px;
    }
    .mp-subpage-back { color: #fff; font-size: 13px; opacity: 0.95; }

    /* ════════ 方案公共 ════════ */
    .empty {
      padding: 48px 28px 40px;
      text-align: center;
    }
    .empty__title {
      margin: 0;
      font-size: 15px;
      font-weight: 650;
      color: var(--text-primary);
    }
    .empty__desc {
      margin: 8px 0 0;
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.55;
    }
    .empty__actions {
      margin-top: 18px;
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    /* ════════ A · 柔和圆底 + 清单图标 ════════ */
    .empty-a__badge {
      width: 88px;
      height: 88px;
      margin: 0 auto 16px;
      border-radius: 50%;
      background: linear-gradient(145deg, #e9f9f2, #dcebe4);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: inset 0 0 0 1px rgba(10, 159, 109, 0.08);
    }
    .empty-a__badge svg { width: 42px; height: 42px; }

    /* ════════ B · 插画卡片（文件夹） ════════ */
    .empty-b__art {
      width: 148px;
      height: 112px;
      margin: 0 auto 18px;
      position: relative;
    }
    .empty-b__shadow {
      position: absolute;
      left: 24px; right: 24px; bottom: 6px;
      height: 12px;
      border-radius: 50%;
      background: rgba(15, 30, 25, 0.08);
      filter: blur(2px);
    }
    .empty-b__folder {
      position: absolute;
      left: 50%;
      top: 10px;
      transform: translateX(-50%);
      width: 108px;
      height: 78px;
    }
    .empty-b__folder-back {
      position: absolute;
      inset: 0;
      border-radius: 12px 12px 14px 14px;
      background: linear-gradient(160deg, #b7e6d2, #7dcea0);
    }
    .empty-b__folder-tab {
      position: absolute;
      left: 10px; top: -10px;
      width: 38px; height: 16px;
      border-radius: 8px 8px 0 0;
      background: #87d4b0;
    }
    .empty-b__folder-front {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 58px;
      border-radius: 10px 14px 14px 14px;
      background: linear-gradient(180deg, #ecfdf5, #dff7ec);
      border: 1px solid rgba(8, 127, 87, 0.18);
      box-shadow: 0 8px 18px rgba(10, 159, 109, 0.12);
    }
    .empty-b__lines {
      position: absolute;
      left: 18px; right: 18px; top: 18px;
    }
    .empty-b__lines i {
      display: block;
      height: 6px;
      border-radius: 999px;
      background: #cfe9dc;
      margin-bottom: 8px;
    }
    .empty-b__lines i:nth-child(2) { width: 70%; }
    .empty-b__lines i:nth-child(3) { width: 48%; margin-bottom: 0; }

    /* ════════ C · 极简线条图标 ════════ */
    .empty-c__glyph {
      width: 72px;
      height: 72px;
      margin: 0 auto 14px;
      color: #9aa8a1;
    }
    .empty-c__glyph svg { width: 100%; height: 100%; }
    .empty-c .empty__title { font-weight: 600; color: #5f6f68; }
    .empty-c .empty__desc { max-width: 220px; margin-left: auto; margin-right: auto; }

    /* ════════ D · 虚线卡片容器 ════════ */
    .empty-d__panel {
      margin: 8px 8px 0;
      border: 1.5px dashed #b7d9c8;
      border-radius: 18px;
      background: #fbfefc;
      padding: 36px 20px 28px;
    }
    .empty-d__icon {
      width: 56px;
      height: 56px;
      margin: 0 auto 14px;
      border-radius: 16px;
      background: var(--brand-green-soft);
      color: var(--brand-green-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: 700;
    }

    /* 搜索无结果变体提示条 */
    .scene-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 12px 16px 0;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 11px;
      background: #fff7e8;
      color: #a67a1f;
      border: 1px solid #f0e0b8;
    }
  </style>
</head>
<body>
  <nav class="proto-nav">
    <strong>Demo 导航</strong>
    <a href="shanxia-mp-index.html">索引</a>
    <a href="shanxia-mp-pattern-index.html">Pattern</a>
    <a class="active" href="shanxia-mp-empty-state-demo.html">空态</a>
  </nav>

  <div class="page-wrap">
    <header class="hero">
      <h1>全局空态 Empty State</h1>
      <p>用于列表无数据 / 搜索无结果。<strong>已采用方案 B · 插画文件夹</strong>，落地组件 <code>miniprogram/components/mp-empty</code>。下方可继续对比未选方案。</p>
    </header>

    <div class="pick-bar">
      <div class="pick-bar__label">已采用 B；点击可切换对比其他方案</div>
      <div class="pick-tabs">
        <button class="pick-tab" type="button" data-stage="a">A 圆底图标<small>未采用</small></button>
        <button class="pick-tab active" type="button" data-stage="b">B 插画文件夹<small>已采用</small></button>
        <button class="pick-tab" type="button" data-stage="c">C 极简线条<small>未采用</small></button>
        <button class="pick-tab" type="button" data-stage="d">D 虚线卡片<small>未采用</small></button>
      </div>
    </div>

    <p class="note" id="note-a" style="display:none">
      <strong>方案 A · 柔和圆底 + SVG 清单图标</strong><br />
      保留「圆底」结构，补上可识别图形与标题/说明/主按钮。选型时备选，未采用。
    </p>
    <p class="note" id="note-b">
      <strong>方案 B · 插画风文件夹（已采用）</strong><br />
      用 CSS 拼出文件夹，品牌绿更明显。对应实现：<code>mp-empty</code> + <code>mp-biz.scss</code> / <code>shanxia-mp-base.css</code> 中的 <code>.mp-empty__*</code>。
    </p>
    <p class="note" id="note-c" style="display:none">
      <strong>方案 C · 极简线条</strong><br />
      单色 stroke 图标，信息密度最低。适合「搜索无结果」或希望页面更安静的场景。
    </p>
    <p class="note" id="note-d" style="display:none">
      <strong>方案 D · 虚线卡片容器</strong><br />
      把空态放进虚线面板，CTA 更突出。适合「尚未创建任何数据，引导新增」的首次空态。
    </p>

    <!-- ── A ── -->
    <section class="stage" id="stage-a">
      <div class="phone-frame">
        <header class="mp-header">
          <div class="mp-header__row">
            <a class="mp-subpage-back" href="shanxia-mp-workbench-demo.html">← 工作台</a>
            <button class="mp-header__action" type="button">+ 新增</button>
          </div>
          <h1 class="mp-header__title" style="margin-top:8px">产品分类</h1>
          <div class="mp-header__search" style="margin-top:10px">
            <span class="mp-header__search-dot"></span>搜索分类名称
          </div>
        </header>
        <span class="scene-tag">场景：列表无数据</span>
        <div class="empty empty-a">
          <div class="empty-a__badge" aria-hidden="true">
            <svg viewBox="0 0 48 48" fill="none">
              <rect x="10" y="8" width="28" height="34" rx="4" stroke="#0a9f6d" stroke-width="2.2"/>
              <path d="M16 18h16M16 25h16M16 32h10" stroke="#0a9f6d" stroke-width="2.2" stroke-linecap="round"/>
              <circle cx="34" cy="34" r="9" fill="#e9f9f2" stroke="#087f57" stroke-width="2"/>
              <path d="M34 30v8M30 34h8" stroke="#087f57" stroke-width="2" stroke-linecap="round"/>
            </svg>
          </div>
          <p class="empty__title">暂无产品分类</p>
          <p class="empty__desc">还没有分类数据，可先新增一个顶级分类</p>
          <div class="empty__actions">
            <button class="mp-btn mp-btn--primary" type="button">新增分类</button>
          </div>
        </div>
      </div>
    </section>

    <!-- ── B（已采用） ── -->
    <section class="stage active" id="stage-b">
      <div class="phone-frame">
        <header class="mp-header">
          <div class="mp-header__row">
            <a class="mp-subpage-back" href="shanxia-mp-workbench-demo.html">← 工作台</a>
            <button class="mp-header__action" type="button">+ 新增</button>
          </div>
          <h1 class="mp-header__title" style="margin-top:8px">产品分类</h1>
          <div class="mp-header__search" style="margin-top:10px">
            <span class="mp-header__search-dot"></span>搜索分类名称
          </div>
        </header>
        <span class="scene-tag">场景：列表无数据</span>
        <div class="empty empty-b">
          <div class="empty-b__art" aria-hidden="true">
            <div class="empty-b__shadow"></div>
            <div class="empty-b__folder">
              <div class="empty-b__folder-tab"></div>
              <div class="empty-b__folder-back"></div>
              <div class="empty-b__folder-front">
                <div class="empty-b__lines"><i></i><i></i><i></i></div>
              </div>
            </div>
          </div>
          <p class="empty__title">暂无产品分类</p>
          <p class="empty__desc">分类树为空，创建后即可在产品中引用</p>
          <div class="empty__actions">
            <button class="mp-btn mp-btn--ghost" type="button">刷新</button>
            <button class="mp-btn mp-btn--primary" type="button">新增分类</button>
          </div>
        </div>
      </div>
    </section>

    <!-- ── C ── -->
    <section class="stage" id="stage-c">
      <div class="phone-frame">
        <header class="mp-header">
          <div class="mp-header__row">
            <a class="mp-subpage-back" href="shanxia-mp-workbench-demo.html">← 工作台</a>
            <button class="mp-header__action" type="button">+ 新增</button>
          </div>
          <h1 class="mp-header__title" style="margin-top:8px">产品分类</h1>
          <div class="mp-header__search" style="margin-top:10px">
            <span class="mp-header__search-dot"></span>有机溶剂zzz
          </div>
        </header>
        <span class="scene-tag">场景：搜索无结果</span>
        <div class="empty empty-c">
          <div class="empty-c__glyph" aria-hidden="true">
            <svg viewBox="0 0 64 64" fill="none">
              <circle cx="28" cy="28" r="14" stroke="currentColor" stroke-width="2.4"/>
              <path d="M38 38l12 12" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/>
              <path d="M22 28h12M28 22v12" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.45"/>
            </svg>
          </div>
          <p class="empty__title">未找到相关分类</p>
          <p class="empty__desc">试试更短的关键词，或清除筛选后查看全部</p>
          <div class="empty__actions">
            <button class="mp-btn mp-btn--ghost" type="button">清除条件</button>
          </div>
        </div>
      </div>
    </section>

    <!-- ── D ── -->
    <section class="stage" id="stage-d">
      <div class="phone-frame">
        <header class="mp-header">
          <div class="mp-header__row">
            <a class="mp-subpage-back" href="shanxia-mp-workbench-demo.html">← 工作台</a>
            <button class="mp-header__action" type="button">+ 新增</button>
          </div>
          <h1 class="mp-header__title" style="margin-top:8px">产品分类</h1>
        </header>
        <span class="scene-tag">场景：首次引导创建</span>
        <div class="empty empty-d">
          <div class="empty-d__panel">
            <div class="empty-d__icon" aria-hidden="true">+</div>
            <p class="empty__title">还没有产品分类</p>
            <p class="empty__desc">建议先建一级分类（如原料、助剂），再按需添加子类</p>
            <div class="empty__actions">
              <button class="mp-btn mp-btn--primary" type="button">立即新增</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <script>
    const notes = {
      a: document.getElementById('note-a'),
      b: document.getElementById('note-b'),
      c: document.getElementById('note-c'),
      d: document.getElementById('note-d')
    }
    document.querySelectorAll('.pick-tab').forEach((tab) => {
      tab.addEventListener('click', () => {
        const key = tab.dataset.stage
        document.querySelectorAll('.pick-tab').forEach((t) => t.classList.remove('active'))
        document.querySelectorAll('.stage').forEach((s) => s.classList.remove('active'))
        Object.values(notes).forEach((n) => { n.style.display = 'none' })
        tab.classList.add('active')
        document.getElementById('stage-' + key).classList.add('active')
        notes[key].style.display = 'block'
      })
    })
  </script>
</body>
</html>