shanxia2.0/docs/fresh-mint-pl-feedback-kv-polish-demo.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Fresh Mint · 回传卡片 KV 重设计 Demo</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <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;
      --border-soft: #e2e8f0;
      --surface: #fff;
      --table-head: #f8fafc;
      --danger: #dc2626;
      --warn: #d97706;
      --radius: 10px;
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: Inter, -apple-system, sans-serif;
      font-size: 14px;
      line-height: 1.5;
      color: var(--text);
      background: #eef2f6;
    }

    .page { max-width: 1200px; margin: 0 auto; padding: 32px 20px 72px; }
    .head { margin-bottom: 28px; }
    .head h1 { margin: 0 0 8px; font-size: 24px; font-weight: 700; }
    .head h1 span { color: var(--primary-dark); }
    .head p { margin: 0; color: var(--text-muted); max-width: 760px; }

    .block { margin-bottom: 36px; }
    .block > h2 {
      margin: 0 0 6px;
      font-size: 16px;
      font-weight: 700;
    }
    .block > .desc {
      margin: 0 0 14px;
      font-size: 13px;
      color: var(--text-muted);
    }
    .pick {
      display: inline-block;
      margin-left: 8px;
      padding: 1px 8px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 600;
      vertical-align: middle;
    }
    .pick-1 { background: #ecfdf5; color: var(--primary-dark); }
    .pick-2 { background: #eff6ff; color: #1d4ed8; }
    .pick-3 { background: #fff7ed; color: #c2410c; }

    .row3 {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }
    @media (max-width: 980px) {
      .row3 { grid-template-columns: 1fr; }
    }

    .panel {
      background: var(--surface);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius);
      padding: 14px;
      min-height: 300px;
      display: flex;
      flex-direction: column;
    }
    .panel-hd {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 12px;
    }
    .panel-hd h3 {
      margin: 0;
      padding-left: 10px;
      border-left: 3px solid var(--primary);
      color: var(--primary-dark);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.2;
    }
    .ops { display: flex; gap: 6px; }
    .btn {
      height: 28px;
      padding: 0 10px;
      border-radius: 6px;
      border: 1px solid var(--border-soft);
      background: #fff;
      font-size: 12px;
      font-weight: 500;
      color: var(--text);
    }
    .btn-p { background: var(--primary); border-color: var(--primary); color: #fff; }

    /* ========== 方案 1：单据表（系统原生 ViewKv 表格式） ========== */
    .kv-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
    }
    .kv-table th,
    .kv-table td {
      padding: 9px 12px;
      border-bottom: 1px solid #eef2f6;
      border-right: 1px solid #eef2f6;
      vertical-align: top;
      text-align: left;
      line-height: 1.4;
    }
    .kv-table tr:last-child th,
    .kv-table tr:last-child td { border-bottom: none; }
    .kv-table th {
      width: 78px;
      background: var(--table-head);
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 500;
      white-space: nowrap;
    }
    .kv-table td {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      word-break: break-word;
    }
    .kv-table td.red { color: var(--danger); font-size: 15px; }
    .kv-table .tag {
      display: inline-block;
      padding: 1px 8px;
      border-radius: 4px;
      background: #059669;
      color: #fff;
      font-size: 12px;
      font-weight: 600;
    }
    .kv-table .thumbs {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .kv-table .thumb {
      width: 40px;
      height: 40px;
      border-radius: 6px;
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      display: grid;
      place-items: center;
      font-size: 11px;
      color: var(--primary-dark);
      font-weight: 600;
    }

    /* ========== 方案 2：一句摘要 + 次要元信息 ========== */
    .summary-card { display: flex; flex-direction: column; gap: 12px; }
    .summary-hero {
      padding: 14px 14px 12px;
      border-radius: 8px;
      background: #0f172a;
      color: #f8fafc;
    }
    .summary-hero .kicker {
      font-size: 11px;
      font-weight: 500;
      color: #94a3b8;
      margin-bottom: 6px;
    }
    .summary-hero .main {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.25;
    }
    .summary-hero .main strong { color: #fca5a5; font-weight: 700; }
    .summary-hero .sub {
      margin-top: 8px;
      font-size: 12px;
      color: #cbd5e1;
      line-height: 1.45;
    }
    .chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
    .chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      max-width: 100%;
      padding: 6px 10px;
      border-radius: 999px;
      background: #f8fafc;
      border: 1px solid var(--border-soft);
      font-size: 12px;
      color: var(--text);
    }
    .chip b { color: var(--text-muted); font-weight: 500; }
    .chip .t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
    .media-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-top: 2px;
    }
    .media-row .lab { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
    .media-row .thumb {
      width: 44px;
      height: 44px;
      border-radius: 8px;
      object-fit: cover;
      background: linear-gradient(135deg, #d1fae5, #a7f3d0);
      border: 1px solid #a7f3d0;
    }

    /* ========== 方案 3：回执 / 小票式 ========== */
    .ticket {
      border: 1px solid var(--border-soft);
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
    }
    .ticket-band {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 10px 12px;
      background: linear-gradient(90deg, #ecfdf5 0%, #f0fdf4 60%, #fff 100%);
      border-bottom: 1px solid #d1fae5;
    }
    .ticket-band .who {
      font-size: 12px;
      font-weight: 600;
      color: var(--primary-dark);
    }
    .ticket-band .when {
      font-size: 12px;
      color: var(--text-muted);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    .ticket-qty {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      border-bottom: 1px dashed #e2e8f0;
    }
    .ticket-qty > div {
      padding: 12px;
      text-align: center;
    }
    .ticket-qty > div + div { border-left: 1px dashed #e2e8f0; }
    .ticket-qty .lab {
      font-size: 11px;
      color: var(--text-muted);
      margin-bottom: 4px;
    }
    .ticket-qty .val {
      font-size: 22px;
      font-weight: 700;
      color: var(--danger);
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
      line-height: 1.1;
    }
    .ticket-qty .val.sm { font-size: 14px; line-height: 1.35; }
    .ticket-lines { padding: 4px 0; }
    .ticket-line {
      display: grid;
      grid-template-columns: 72px 1fr;
      gap: 8px;
      padding: 7px 12px;
      font-size: 13px;
    }
    .ticket-line .lab { color: var(--text-muted); }
    .ticket-line .val { font-weight: 600; color: var(--text); word-break: break-word; }
    .ticket-foot {
      padding: 10px 12px;
      border-top: 1px dashed #e2e8f0;
      background: #f8fafc;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .ticket-foot .lab { font-size: 12px; color: var(--text-muted); }
    .ticket-foot .thumb {
      width: 36px;
      height: 36px;
      border-radius: 6px;
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
    }

    .footer-note {
      margin-top: 8px;
      padding: 14px 16px;
      background: #fff;
      border: 1px solid var(--border-soft);
      border-radius: 8px;
      font-size: 13px;
      color: var(--text-muted);
    }
    .footer-note strong { color: var(--text); }
  </style>
</head>
<body>
  <div class="page">
    <header class="head">
      <h1>回传卡片 · <span>重新设计</span></h1>
      <p>
        上一版三种「上下 KV / 指标卡 / 左右行」都不合适。本页换成三种完全不同的语言：
        <b>单据表</b>、<b>摘要优先</b>、<b>回执小票</b>。请直接点名要哪一种（或混搭）。
      </p>
    </header>

    <!-- 1 -->
    <section class="block">
      <h2>方案 1 · 单据表 <span class="pick pick-1">贴近现有 ViewKvTable</span></h2>
      <p class="desc">放弃「漂浮的上下摆」，改成管理端熟悉的「左标签右值」表格。数量单元格加大、红色。信息密度高、和系统其它查看弹窗一致。</p>
      <div class="row3">
        <article class="panel">
          <div class="panel-hd">
            <h3>司机回传信息</h3>
            <div class="ops"><button class="btn btn-p" type="button">编辑</button></div>
          </div>
          <table class="kv-table">
            <tr>
              <th>实际数量</th>
              <td class="red">28.5 吨</td>
              <th>品牌数量</th>
              <td class="red">云化 18.5 / 华谊 10</td>
            </tr>
            <tr>
              <th>回传时间</th>
              <td>2026-07-31 14:22</td>
              <th>回传备注</th>
              <td>货已装完，现场确认无误</td>
            </tr>
            <tr>
              <th>回传附件</th>
              <td colspan="3">
                <div class="thumbs"><span class="thumb">图1</span><span class="thumb">图2</span></div>
              </td>
            </tr>
          </table>
        </article>

        <article class="panel">
          <div class="panel-hd">
            <h3>出库单回传</h3>
            <div class="ops"><button class="btn btn-p" type="button">编辑</button></div>
          </div>
          <table class="kv-table">
            <tr>
              <th>单号</th>
              <td>CK20260731001</td>
              <th>状态</th>
              <td><span class="tag">已完成</span></td>
            </tr>
            <tr>
              <th>计划号</th>
              <td>PL-202607-088</td>
              <th>车牌</th>
              <td>皖H·D1234</td>
            </tr>
            <tr>
              <th>往来单位</th>
              <td colspan="3">安庆某某化工有限公司</td>
            </tr>
            <tr>
              <th>实际数量</th>
              <td class="red">28.5 吨</td>
              <th>品牌数量</th>
              <td class="red">云化 18.5 / 华谊 10</td>
            </tr>
            <tr>
              <th>现场备注</th>
              <td>过磅完成，单据已签</td>
              <th>现场附件</th>
              <td><div class="thumbs"><span class="thumb">图1</span></div></td>
            </tr>
          </table>
        </article>

        <article class="panel">
          <div class="panel-hd"><h3>地磅单信息（示意）</h3></div>
          <table class="kv-table">
            <tr>
              <th>出入库单号</th>
              <td>RK20260731008</td>
              <th>业务类型</th>
              <td><span class="tag">出库</span></td>
            </tr>
            <tr>
              <th>毛重</th>
              <td>42580 kg</td>
              <th>皮重</th>
              <td>14200 kg</td>
            </tr>
            <tr>
              <th>净重</th>
              <td class="red">28380 kg</td>
              <th>车牌</th>
              <td>皖H·D1234</td>
            </tr>
          </table>
        </article>
      </div>
    </section>

    <!-- 2 -->
    <section class="block">
      <h2>方案 2 · 摘要优先 <span class="pick pick-2">先看结论</span></h2>
      <p class="desc">卡片顶部用一句「结论句」把数量讲清楚，其余降级成胶囊标签。适合一眼扫量，弱化字段罗列感。</p>
      <div class="row3">
        <article class="panel">
          <div class="panel-hd">
            <h3>司机回传信息</h3>
            <div class="ops"><button class="btn btn-p" type="button">编辑</button></div>
          </div>
          <div class="summary-card">
            <div class="summary-hero">
              <div class="kicker">司机已回传</div>
              <div class="main">实际 <strong>28.5</strong> 吨</div>
              <div class="sub">品牌构成：云化 18.5 · 华谊 10</div>
            </div>
            <div class="chip-row">
              <span class="chip"><b>时间</b><span class="t">2026-07-31 14:22</span></span>
              <span class="chip"><b>备注</b><span class="t">货已装完，现场确认无误</span></span>
            </div>
            <div class="media-row">
              <span class="lab">附件</span>
              <span class="thumb"></span>
              <span class="thumb"></span>
            </div>
          </div>
        </article>

        <article class="panel">
          <div class="panel-hd">
            <h3>出库单回传</h3>
            <div class="ops"><button class="btn btn-p" type="button">编辑</button></div>
          </div>
          <div class="summary-card">
            <div class="summary-hero">
              <div class="kicker">出库单 · 已完成 · CK20260731001</div>
              <div class="main">实际 <strong>28.5</strong> 吨</div>
              <div class="sub">云化 18.5 · 华谊 10　｜　皖H·D1234</div>
            </div>
            <div class="chip-row">
              <span class="chip"><b>计划</b><span class="t">PL-202607-088</span></span>
              <span class="chip"><b>往来</b><span class="t">安庆某某化工有限公司</span></span>
              <span class="chip"><b>备注</b><span class="t">过磅完成，单据已签</span></span>
            </div>
            <div class="media-row">
              <span class="lab">附件</span>
              <span class="thumb"></span>
            </div>
          </div>
        </article>

        <article class="panel">
          <div class="panel-hd"><h3>地磅单信息（示意）</h3></div>
          <div class="summary-card">
            <div class="summary-hero">
              <div class="kicker">地磅 · 出库 · RK20260731008</div>
              <div class="main">净重 <strong>28.38</strong> 吨</div>
              <div class="sub">毛重 42.58 · 皮重 14.20　｜　皖H·D1234</div>
            </div>
            <div class="chip-row">
              <span class="chip"><b>往来</b><span class="t">安庆某某化工</span></span>
              <span class="chip"><b>状态</b><span class="t">已过磅</span></span>
            </div>
          </div>
        </article>
      </div>
    </section>

    <!-- 3 -->
    <section class="block">
      <h2>方案 3 · 回执小票 <span class="pick pick-3">像一张回执</span></h2>
      <p class="desc">顶部条带写时间/身份，中间居中放大数量，下方清单式字段。结构像「装车回执」，不是普通表单字段堆叠。</p>
      <div class="row3">
        <article class="panel">
          <div class="panel-hd">
            <h3>司机回传信息</h3>
            <div class="ops"><button class="btn btn-p" type="button">编辑</button></div>
          </div>
          <div class="ticket">
            <div class="ticket-band">
              <span class="who">司机回传回执</span>
              <span class="when">2026-07-31 14:22</span>
            </div>
            <div class="ticket-qty">
              <div>
                <div class="lab">实际数量（吨）</div>
                <div class="val">28.5</div>
              </div>
              <div>
                <div class="lab">品牌数量</div>
                <div class="val sm">云化 18.5<br />华谊 10</div>
              </div>
            </div>
            <div class="ticket-lines">
              <div class="ticket-line"><span class="lab">回传备注</span><span class="val">货已装完，现场确认无误</span></div>
            </div>
            <div class="ticket-foot">
              <span class="lab">附件</span>
              <span class="thumb"></span>
              <span class="thumb"></span>
            </div>
          </div>
        </article>

        <article class="panel">
          <div class="panel-hd">
            <h3>出库单回传</h3>
            <div class="ops"><button class="btn btn-p" type="button">编辑</button></div>
          </div>
          <div class="ticket">
            <div class="ticket-band">
              <span class="who">出库单 CK20260731001 · 已完成</span>
              <span class="when">PL-202607-088</span>
            </div>
            <div class="ticket-qty">
              <div>
                <div class="lab">实际数量（吨）</div>
                <div class="val">28.5</div>
              </div>
              <div>
                <div class="lab">品牌数量</div>
                <div class="val sm">云化 18.5 / 华谊 10</div>
              </div>
            </div>
            <div class="ticket-lines">
              <div class="ticket-line"><span class="lab">车牌</span><span class="val">皖H·D1234</span></div>
              <div class="ticket-line"><span class="lab">往来单位</span><span class="val">安庆某某化工有限公司</span></div>
              <div class="ticket-line"><span class="lab">现场备注</span><span class="val">过磅完成，单据已签</span></div>
            </div>
            <div class="ticket-foot">
              <span class="lab">附件</span>
              <span class="thumb"></span>
            </div>
          </div>
        </article>

        <article class="panel">
          <div class="panel-hd"><h3>地磅单信息（示意）</h3></div>
          <div class="ticket">
            <div class="ticket-band">
              <span class="who">地磅回执 · 出库</span>
              <span class="when">RK20260731008</span>
            </div>
            <div class="ticket-qty">
              <div>
                <div class="lab">净重（吨）</div>
                <div class="val">28.38</div>
              </div>
              <div>
                <div class="lab">毛重 / 皮重</div>
                <div class="val sm">42.58 / 14.20</div>
              </div>
            </div>
            <div class="ticket-lines">
              <div class="ticket-line"><span class="lab">车牌</span><span class="val">皖H·D1234</span></div>
              <div class="ticket-line"><span class="lab">往来单位</span><span class="val">安庆某某化工</span></div>
            </div>
          </div>
        </article>
      </div>
    </section>

    <div class="footer-note">
      <strong>怎么选：</strong>
      要和系统其它查看页统一 → 选 <strong>方案 1</strong>；
      归档时最关心「装了多少」→ 选 <strong>方案 2</strong>；
      想强调「这是一份回传凭证」→ 选 <strong>方案 3</strong>。
      也可以说「1 的表格 + 2 的顶部结论」这类混搭。文件：
      <code>docs/fresh-mint-pl-feedback-kv-polish-demo.html</code>
    </div>
  </div>
</body>
</html>