zkxw/docs/mockups/ui-richness-P02-card-grid.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>P02 · 卡片网格视图</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="ui-richness-shared.css" />
</head>
<body>
  <div class="demo-banner">
    <div><span class="level-tag level-PAT">模式 P02</span> <strong>卡片网格视图</strong> — 表格之外的实体展示</div>
    <a href="ui-richness-index.html">← 返回对比入口</a>
  </div>
  <div class="page-wrap">
    <header class="page-head">
      <h1>商品管理</h1>
      <p class="page-desc">工具栏提供「列表 / 卡片」切换；卡片视图用封面 + Tag + 价格强化实体感。</p>
    </header>
    <section class="panel">
      <div class="panel-top">
        <h2 class="title-bar-heading">商品卡片</h2>
        <div style="display:flex;gap:6px">
          <button class="btn btn-ghost" type="button" style="height:32px;font-size:12px">列表</button>
          <button class="btn btn-main" type="button" style="height:32px;font-size:12px">卡片</button>
        </div>
      </div>
      <div class="card-grid">
        <article class="entity-card">
          <div class="entity-card-cover"><img src="https://picsum.photos/seed/p1/400/240" alt="" /></div>
          <div class="entity-card-body">
            <h3 class="entity-card-title">鲜切草莓 500g</h3>
            <div class="entity-card-meta">SKU-10021 · 水果 / 浆果</div>
            <div style="display:flex;gap:6px;margin-bottom:8px"><span class="tag success">上架</span><span class="tag muted">库存 128</span></div>
            <div class="entity-card-ft"><span style="color:var(--primary-dark);font-weight:700">¥28.00</span><button class="btn btn-op primary" type="button">查看</button></div>
          </div>
        </article>
        <article class="entity-card">
          <div class="entity-card-cover"><img src="https://picsum.photos/seed/p2/400/240" alt="" /></div>
          <div class="entity-card-body">
            <h3 class="entity-card-title">有机菠菜 300g</h3>
            <div class="entity-card-meta">SKU-10035 · 蔬菜 / 叶菜</div>
            <div style="display:flex;gap:6px;margin-bottom:8px"><span class="tag success">上架</span><span class="tag warning">库存 12</span></div>
            <div class="entity-card-ft"><span style="color:var(--primary-dark);font-weight:700">¥6.50</span><button class="btn btn-op primary" type="button">查看</button></div>
          </div>
        </article>
        <article class="entity-card">
          <div class="entity-card-cover"><img src="https://picsum.photos/seed/p3/400/240" alt="" /></div>
          <div class="entity-card-body">
            <h3 class="entity-card-title">精品苹果 2kg</h3>
            <div class="entity-card-meta">SKU-10008 · 水果 / 苹果</div>
            <div style="display:flex;gap:6px;margin-bottom:8px"><span class="tag muted">下架</span><span class="tag muted">库存 0</span></div>
            <div class="entity-card-ft"><span style="color:var(--primary-dark);font-weight:700">¥32.00</span><button class="btn btn-op primary" type="button">查看</button></div>
          </div>
        </article>
        <article class="entity-card">
          <div class="entity-card-cover" style="border:2px dashed var(--border);background:var(--primary-bg)">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--primary-dark)" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
          </div>
          <div class="entity-card-body" style="text-align:center;padding:24px">
            <h3 class="entity-card-title">新增商品</h3>
            <p class="entity-card-meta">点击创建新商品</p>
          </div>
        </article>
      </div>
    </section>
    <p class="dim-note"><strong>适用：</strong>商品、设备、工艺路线、SOP 文档等「有封面/图标」的实体。不必全站卡片化，可作为视图切换选项。</p>
  </div>
</body>
</html>