shanxia2.0/docs/crm-product-view-dialog-demos.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>产品查看弹窗 · 信息展示样式 Demo（非表格）</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <style>
    :root {
      --primary: #10b981;
      --primary-dark: #059669;
      --primary-bg: #ecfdf5;
      --text: #1e293b;
      --text-muted: #64748b;
      --border: #d9e8e2;
      --surface: #fff;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: Inter, -apple-system, sans-serif;
      font-size: 14px;
      line-height: 1.45;
      color: var(--text);
      background: #f4f7f6;
      padding: 24px 20px 48px;
    }

    .page { max-width: 760px; margin: 0 auto; }
    .page h1 { margin: 0 0 6px; font-size: 20px; font-weight: 700; }
    .page > .sub { margin: 0 0 14px; color: var(--text-muted); font-size: 13px; line-height: 1.5; }

    .tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 12px;
    }

    .tab {
      border: 1px solid var(--border);
      background: var(--surface);
      border-radius: 8px;
      padding: 7px 12px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      font-family: inherit;
      color: var(--text);
    }

    .tab.is-active {
      background: var(--primary-bg);
      border-color: #a7f3d0;
      color: var(--primary-dark);
    }

    .panel { display: none; }
    .panel.is-active { display: block; }

    .note {
      margin: 0 0 12px;
      padding: 8px 12px;
      border-radius: 8px;
      background: var(--primary-bg);
      border: 1px solid #a7f3d0;
      color: var(--primary-dark);
      font-size: 12px;
      line-height: 1.55;
    }

    .note strong { font-weight: 600; }

    /* ── 弹窗壳（统一） ── */
    .dialog {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 8px 28px rgba(15, 23, 42, 0.1);
      overflow: hidden;
    }

    .hero {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 12px 16px 8px;
      border-bottom: 1px solid #f1f5f9;
    }

    .hero-main { flex: 1; min-width: 0; }
    .hero h2 { margin: 0 0 2px; font-size: 16px; font-weight: 700; }
    .hero .meta { margin: 0; font-size: 12px; color: var(--text-muted); }
    .hero-actions { display: flex; gap: 6px; flex-shrink: 0; }

    .body { padding: 10px 16px 12px; }

    .footer {
      padding: 10px 16px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: flex-end;
      background: #f8fafc;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      height: 32px;
      padding: 0 12px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: #fff;
      font-size: 13px;
      font-weight: 500;
      font-family: inherit;
      cursor: default;
    }

    .btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
    .btn-danger { color: #dc2626; border-color: #fecaca; }
    .btn-ghost { color: var(--text); }

    .tag {
      display: inline-flex;
      height: 20px;
      padding: 0 7px;
      border-radius: 5px;
      font-size: 11px;
      font-weight: 600;
      align-items: center;
      background: #ecfdf5;
      color: #059669;
    }

    .tag.danger { background: #fef2f2; color: #dc2626; }
    .money { color: var(--primary-dark); font-weight: 700; }

    .field-label {
      margin: 10px 0 6px;
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 500;
    }

    .imgs { display: flex; gap: 6px; flex-wrap: wrap; }

    .imgs img {
      width: 48px;
      height: 48px;
      border-radius: 6px;
      object-fit: cover;
      border: 1px solid var(--border);
    }

    /* ══ 方案 A：四列栅格（ViewKvGrid，label 上 value 下）══ */
    .kv-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px 14px;
    }

    .kv-grid .kv dt {
      margin: 0 0 3px;
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 500;
    }

    .kv-grid .kv dd {
      margin: 0;
      font-size: 13px;
      font-weight: 600;
      word-break: break-word;
      line-height: 1.4;
    }

    .kv-grid .kv.span-2 { grid-column: span 2; }
    .kv-grid .kv.span-full { grid-column: 1 / -1; }
    .kv-grid .kv dd.muted { font-weight: 400; line-height: 1.5; }

    /* ══ 方案 B：左右行列表（label 左 value 右，无表格线）══ */
    .kv-rows { display: grid; gap: 0; }

    .kv-row {
      display: grid;
      grid-template-columns: 108px 1fr;
      gap: 10px;
      padding: 7px 0;
      border-bottom: 1px solid #f1f5f9;
      align-items: start;
    }

    .kv-row:last-child { border-bottom: none; }

    .kv-row .k {
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 500;
      line-height: 1.45;
    }

    .kv-row .v {
      font-size: 13px;
      font-weight: 600;
      word-break: break-word;
      line-height: 1.45;
    }

    .kv-row .v.muted { font-weight: 400; }

    .kv-row.is-core .v { color: var(--primary-dark); font-weight: 700; }

    /* ══ 方案 C：核心指标条 + 双列紧凑栅格 ══ */
    .core-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #f1f5f9;
    }

    .core-chip {
      flex: 1 1 140px;
      min-width: 0;
      padding: 8px 10px;
      border-radius: 8px;
      background: var(--primary-bg);
      border: 1px solid #a7f3d0;
    }

    .core-chip .k { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
    .core-chip .v { font-size: 15px; font-weight: 700; color: var(--primary-dark); }

    .kv-grid-2 {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px 16px;
    }

    .kv-grid-2 .kv dt { margin: 0 0 2px; font-size: 12px; color: var(--text-muted); }
    .kv-grid-2 .kv dd { margin: 0; font-size: 13px; font-weight: 600; }
    .kv-grid-2 .kv.span-full { grid-column: 1 / -1; }
    .kv-grid-2 .kv dd.muted { font-weight: 400; line-height: 1.5; }

    /* ══ 方案 D：分组标签 + 内联文本（最简）══ */
    .group { margin-bottom: 10px; }
    .group:last-child { margin-bottom: 0; }

    .group-title {
      margin: 0 0 6px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .inline-kv {
      margin: 0;
      font-size: 13px;
      line-height: 1.65;
      color: var(--text);
    }

    .inline-kv .pair { white-space: nowrap; }
    .inline-kv .pair .k { color: var(--text-muted); font-weight: 500; }
    .inline-kv .pair .k::after { content: ' '; }
    .inline-kv .pair .v { font-weight: 600; }
    .inline-kv .sep { color: #cbd5e1; margin: 0 8px; user-select: none; }

    .inline-kv-block {
      margin: 0;
      font-size: 13px;
      line-height: 1.55;
    }

    .inline-kv-block .k {
      color: var(--text-muted);
      font-weight: 500;
      margin-right: 6px;
    }

    @media (max-width: 640px) {
      .kv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .kv-row { grid-template-columns: 88px 1fr; }
    }
  </style>
</head>
<body>
  <div class="page">
    <h1>产品查看弹窗 · 信息展示样式（非表格）</h1>
    <p class="sub">先在 Demo 中对比选型，确认后再改 <code>SystemViewDialog</code> / 产品管理页代码。以下均<strong>不含 table 表格模式</strong>。</p>

    <div class="tabs">
      <button class="tab is-active" data-target="demo-a">A · 四列栅格</button>
      <button class="tab" data-target="demo-b">B · 左右行列表</button>
      <button class="tab" data-target="demo-c">C · 核心条 + 双列</button>
      <button class="tab" data-target="demo-d">D · 分组内联</button>
    </div>

    <!-- 方案 A -->
    <section id="demo-a" class="panel is-active">
      <p class="note"><strong>对应组件：</strong><code>ViewKvGrid</code>（4 列，label 在上 value 在下）。规范默认方案，与 <code>SystemViewDialog</code> 原生一致，改造成本最低。</p>
      <div class="dialog">
        <div class="hero">
          <div class="hero-main">
            <h2>工业级无水乙醇</h2>
            <p class="meta">产品编号：P20260328001</p>
          </div>
          <div class="hero-actions">
            <button class="btn btn-primary" type="button">编辑</button>
            <button class="btn btn-danger" type="button">删除</button>
          </div>
        </div>
        <div class="body">
          <dl class="kv-grid">
            <div class="kv"><dt>标准价（元）</dt><dd class="money">¥86.00</dd></div>
            <div class="kv"><dt>成本价（元）</dt><dd class="money">¥52.50</dd></div>
            <div class="kv"><dt>库存数量</dt><dd>128 瓶</dd></div>
            <div class="kv"><dt>状态</dt><dd><span class="tag">在售</span></dd></div>
            <div class="kv"><dt>产品分类</dt><dd>化工原料 / 有机溶剂</dd></div>
            <div class="kv"><dt>规格型号</dt><dd>AR 500ml</dd></div>
            <div class="kv"><dt>条码</dt><dd>6901234567890</dd></div>
            <div class="kv"><dt>库存预警值</dt><dd>20</dd></div>
            <div class="kv"><dt>销售次数</dt><dd>36</dd></div>
            <div class="kv"><dt>税率</dt><dd>13%</dd></div>
            <div class="kv"><dt>是否易制毒</dt><dd><span class="tag danger">是</span></dd></div>
            <div class="kv"><dt>是否易制爆</dt><dd>否</dd></div>
            <div class="kv span-2"><dt>创建时间</dt><dd>2026-03-28 14:32:10</dd></div>
            <div class="kv span-full"><dt>产品描述</dt><dd class="muted">适用于实验室分析、工业清洗；阴凉干燥储存，远离火源。</dd></div>
            <div class="kv span-full"><dt>备注</dt><dd class="muted">2026 Q1 采购批次，供应商资质已核验。</dd></div>
          </dl>
          <div class="field-label">产品图片</div>
          <div class="imgs">
            <img src="https://picsum.photos/seed/p1/96/96" alt="" />
            <img src="https://picsum.photos/seed/p2/96/96" alt="" />
          </div>
        </div>
        <div class="footer"><button class="btn btn-ghost" type="button">关闭</button></div>
      </div>
    </section>

    <!-- 方案 B -->
    <section id="demo-b" class="panel">
      <p class="note"><strong>特点：</strong>每行「标签左 · 值右」，无竖线表格感，纵向阅读清晰；长文本自然换行。需新增 <code>ViewKvRows</code> 或在 dense 模式加 <code>layout="rows"</code>。</p>
      <div class="dialog">
        <div class="hero">
          <div class="hero-main">
            <h2>工业级无水乙醇</h2>
            <p class="meta">产品编号：P20260328001</p>
          </div>
          <div class="hero-actions">
            <button class="btn btn-primary" type="button">编辑</button>
            <button class="btn btn-danger" type="button">删除</button>
          </div>
        </div>
        <div class="body">
          <div class="kv-rows">
            <div class="kv-row is-core"><span class="k">标准价（元）</span><span class="v money">¥86.00</span></div>
            <div class="kv-row is-core"><span class="k">成本价（元）</span><span class="v money">¥52.50</span></div>
            <div class="kv-row is-core"><span class="k">库存数量</span><span class="v">128 瓶</span></div>
            <div class="kv-row"><span class="k">状态</span><span class="v"><span class="tag">在售</span></span></div>
            <div class="kv-row"><span class="k">产品分类</span><span class="v">化工原料 / 有机溶剂</span></div>
            <div class="kv-row"><span class="k">规格型号</span><span class="v">AR 500ml</span></div>
            <div class="kv-row"><span class="k">条码</span><span class="v">6901234567890</span></div>
            <div class="kv-row"><span class="k">库存预警值</span><span class="v">20</span></div>
            <div class="kv-row"><span class="k">销售次数</span><span class="v">36</span></div>
            <div class="kv-row"><span class="k">税率</span><span class="v">13%</span></div>
            <div class="kv-row"><span class="k">是否易制毒</span><span class="v"><span class="tag danger">是</span></span></div>
            <div class="kv-row"><span class="k">是否易制爆</span><span class="v">否</span></div>
            <div class="kv-row"><span class="k">创建时间</span><span class="v">2026-03-28 14:32:10</span></div>
            <div class="kv-row"><span class="k">产品描述</span><span class="v muted">适用于实验室分析、工业清洗；阴凉干燥储存，远离火源。</span></div>
            <div class="kv-row"><span class="k">备注</span><span class="v muted">2026 Q1 采购批次，供应商资质已核验。</span></div>
          </div>
          <div class="field-label">产品图片</div>
          <div class="imgs">
            <img src="https://picsum.photos/seed/p1/96/96" alt="" />
            <img src="https://picsum.photos/seed/p2/96/96" alt="" />
          </div>
        </div>
        <div class="footer"><button class="btn btn-ghost" type="button">关闭</button></div>
      </div>
    </section>

    <!-- 方案 C -->
    <section id="demo-c" class="panel">
      <p class="note"><strong>特点：</strong>价/库存/状态先「核心条」高亮，其余字段双列栅格；信息聚拢、层次清楚。可复用现有 <code>highlights</code> + <code>ViewKvGrid</code> 两列。</p>
      <div class="dialog">
        <div class="hero">
          <div class="hero-main">
            <h2>工业级无水乙醇</h2>
            <p class="meta">产品编号：P20260328001</p>
          </div>
          <div class="hero-actions">
            <button class="btn btn-primary" type="button">编辑</button>
            <button class="btn btn-danger" type="button">删除</button>
          </div>
        </div>
        <div class="body">
          <div class="core-strip">
            <div class="core-chip"><div class="k">标准价</div><div class="v">¥86.00</div></div>
            <div class="core-chip"><div class="k">成本价</div><div class="v">¥52.50</div></div>
            <div class="core-chip"><div class="k">库存</div><div class="v">128 瓶</div></div>
            <div class="core-chip"><div class="k">状态</div><div class="v"><span class="tag">在售</span></div></div>
          </div>
          <dl class="kv-grid-2">
            <div class="kv"><dt>产品分类</dt><dd>化工原料 / 有机溶剂</dd></div>
            <div class="kv"><dt>规格型号</dt><dd>AR 500ml</dd></div>
            <div class="kv"><dt>条码</dt><dd>6901234567890</dd></div>
            <div class="kv"><dt>库存预警值</dt><dd>20</dd></div>
            <div class="kv"><dt>销售次数</dt><dd>36</dd></div>
            <div class="kv"><dt>税率</dt><dd>13%</dd></div>
            <div class="kv"><dt>是否易制毒</dt><dd><span class="tag danger">是</span></dd></div>
            <div class="kv"><dt>是否易制爆</dt><dd>否</dd></div>
            <div class="kv span-full"><dt>创建时间</dt><dd>2026-03-28 14:32:10</dd></div>
            <div class="kv span-full"><dt>产品描述</dt><dd class="muted">适用于实验室分析、工业清洗；阴凉干燥储存。</dd></div>
            <div class="kv span-full"><dt>备注</dt><dd class="muted">2026 Q1 采购批次。</dd></div>
          </dl>
          <div class="field-label">产品图片</div>
          <div class="imgs">
            <img src="https://picsum.photos/seed/p1/96/96" alt="" />
            <img src="https://picsum.photos/seed/p2/96/96" alt="" />
          </div>
        </div>
        <div class="footer"><button class="btn btn-ghost" type="button">关闭</button></div>
      </div>
    </section>

    <!-- 方案 D -->
    <section id="demo-d" class="panel">
      <p class="note"><strong>特点：</strong>按「价格 / 库存 / 其他 / 说明」分组，组内用「标签 值 · 标签 值」内联，最省纵向空间。适合字段多但希望一屏看完。</p>
      <div class="dialog">
        <div class="hero">
          <div class="hero-main">
            <h2>工业级无水乙醇</h2>
            <p class="meta">产品编号：P20260328001</p>
          </div>
          <div class="hero-actions">
            <button class="btn btn-primary" type="button">编辑</button>
            <button class="btn btn-danger" type="button">删除</button>
          </div>
        </div>
        <div class="body">
          <div class="group">
            <div class="group-title">价格与状态</div>
            <p class="inline-kv">
              <span class="pair"><span class="k">标准价</span><span class="v money">¥86.00</span></span><span class="sep">·</span>
              <span class="pair"><span class="k">成本价</span><span class="v money">¥52.50</span></span><span class="sep">·</span>
              <span class="pair"><span class="k">状态</span><span class="v"><span class="tag">在售</span></span></span>
            </p>
          </div>
          <div class="group">
            <div class="group-title">库存</div>
            <p class="inline-kv">
              <span class="pair"><span class="k">库存数量</span><span class="v">128 瓶</span></span><span class="sep">·</span>
              <span class="pair"><span class="k">预警值</span><span class="v">20</span></span><span class="sep">·</span>
              <span class="pair"><span class="k">销售次数</span><span class="v">36</span></span>
            </p>
          </div>
          <div class="group">
            <div class="group-title">基本信息</div>
            <p class="inline-kv">
              <span class="pair"><span class="k">分类</span><span class="v">化工原料 / 有机溶剂</span></span><span class="sep">·</span>
              <span class="pair"><span class="k">规格</span><span class="v">AR 500ml</span></span><span class="sep">·</span>
              <span class="pair"><span class="k">条码</span><span class="v">6901234567890</span></span><span class="sep">·</span>
              <span class="pair"><span class="k">税率</span><span class="v">13%</span></span><span class="sep">·</span>
              <span class="pair"><span class="k">易制毒</span><span class="v"><span class="tag danger">是</span></span></span><span class="sep">·</span>
              <span class="pair"><span class="k">易制爆</span><span class="v">否</span></span><span class="sep">·</span>
              <span class="pair"><span class="k">创建</span><span class="v">2026-03-28 14:32</span></span>
            </p>
          </div>
          <div class="group">
            <div class="group-title">说明</div>
            <p class="inline-kv-block"><span class="k">产品描述</span>适用于实验室分析、工业清洗；阴凉干燥储存。</p>
            <p class="inline-kv-block" style="margin-top:6px"><span class="k">备注</span>2026 Q1 采购批次。</p>
          </div>
          <div class="field-label">产品图片</div>
          <div class="imgs">
            <img src="https://picsum.photos/seed/p1/96/96" alt="" />
            <img src="https://picsum.photos/seed/p2/96/96" alt="" />
          </div>
        </div>
        <div class="footer"><button class="btn btn-ghost" type="button">关闭</button></div>
      </div>
    </section>
  </div>

  <script>
    document.querySelectorAll('.tab').forEach((tab) => {
      tab.addEventListener('click', () => {
        document.querySelectorAll('.tab').forEach((t) => t.classList.remove('is-active'))
        document.querySelectorAll('.panel').forEach((p) => p.classList.remove('is-active'))
        tab.classList.add('is-active')
        document.getElementById(tab.dataset.target).classList.add('is-active')
      })
    })
  </script>
</body>
</html>