zkxw/docs/mockups/ui-richness-L3-list-rich.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>L3 · 复合信息列表（丰富）</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" />
  <style>
    .sparkline {
      display: flex;
      align-items: flex-end;
      gap: 2px;
      height: 24px;
      justify-content: center;
    }
    .sparkline span {
      width: 4px;
      border-radius: 2px;
      background: var(--primary);
      opacity: 0.75;
    }
    .amount { color: var(--primary-dark); font-weight: 700; font-variant-numeric: tabular-nums; }
  </style>
</head>
<body>
  <div class="demo-banner">
    <div>
      <span class="level-tag level-L3">L3 丰富</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">复合列展示客户、商品与履约进度；金额列高亮；近 7 日趋势用 sparkline 辅助扫读。</p>
    </header>

    <!-- 顶部轻量指标条（列表页也可有） -->
    <section class="stats" style="grid-template-columns:repeat(4,1fr);margin-bottom:16px">
      <div class="stat" style="min-height:88px">
        <div class="stat-main" style="align-items:center">
          <div class="k">今日订单</div>
          <div class="stat-side"><div class="v" style="font-size:20px">186</div></div>
        </div>
      </div>
      <div class="stat" style="min-height:88px">
        <div class="stat-main" style="align-items:center">
          <div class="k">进行中</div>
          <div class="stat-side"><div class="v" style="font-size:20px;color:var(--warn)">42</div></div>
        </div>
      </div>
      <div class="stat" style="min-height:88px">
        <div class="stat-main" style="align-items:center">
          <div class="k">已完成</div>
          <div class="stat-side"><div class="v" style="font-size:20px">128</div></div>
        </div>
      </div>
      <div class="stat" style="min-height:88px">
        <div class="stat-main" style="align-items:center">
          <div class="k">今日成交额</div>
          <div class="stat-side"><div class="v" style="font-size:20px">¥42.8万</div></div>
        </div>
      </div>
    </section>

    <section class="panel">
      <div class="panel-top">
        <h2 class="title-bar-heading">
          <svg class="panel-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2"/><rect x="8" y="2" width="8" height="4" rx="1"/></svg>
          订单列表
        </h2>
      </div>

      <div class="filter-block">
        <div class="filter-grid">
          <div class="filter-field"><label>关键词</label><input class="input" placeholder="订单号/客户" /></div>
          <div class="filter-field"><label>状态</label><select class="select"><option>全部</option></select></div>
          <div class="filter-field"><label>区域</label><select class="select"><option>全部</option></select></div>
          <div class="filter-field"><label>下单时间</label><input class="input" type="date" /></div>
        </div>
        <div class="filter-actions-row">
          <span class="filter-hint">复合列适合订单、客户、商品、工单等实体型列表。</span>
          <div class="filter-actions-end">
            <button class="btn btn-ghost" type="button"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12a9 9 0 109-9"/><path d="M3 3v5h5"/></svg>重置</button>
            <button class="btn btn-main" type="button"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>搜索</button>
          </div>
        </div>
      </div>

      <div class="list-toolbar">
        <div class="list-toolbar-row">
          <span>已选 <span class="sel-num">1</span> 项</span>
          <button class="btn btn-main" type="button"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>新建订单</button>
          <button class="btn btn-ghost" type="button"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>导出</button>
        </div>
      </div>

      <div class="list-body">
        <table class="data-table">
          <thead>
            <tr>
              <th style="width:40px">☐</th>
              <th class="cell-left" style="min-width:200px">客户</th>
              <th class="cell-left" style="min-width:220px">商品</th>
              <th>订单号</th>
              <th>状态</th>
              <th>履约进度</th>
              <th>金额</th>
              <th>近7日</th>
              <th style="min-width:160px">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>☑</td>
              <td class="cell-left">
                <div class="cell-composite">
                  <span class="avatar">上</span>
                  <div><div>上海市第一人民医院</div><div class="cell-sub">CUS-001 · 华东/上海</div></div>
                </div>
              </td>
              <td class="cell-left">
                <div class="cell-composite">
                  <img class="thumb" src="https://picsum.photos/seed/prod-a/80/80" alt="" />
                  <div><div>鲜切草莓 500g</div><div class="cell-sub">SKU-10021 · × 20 箱</div></div>
                </div>
              </td>
              <td><a href="#" style="color:var(--primary-dark);font-weight:600;text-decoration:none">ORD-20260312-0086</a></td>
              <td><span class="tag warning">配送中</span></td>
              <td>
                <div class="progress-wrap">
                  <div class="progress-bar"><div class="progress-fill" style="width:72%"></div></div>
                  <div class="progress-label">72% · 已出库</div>
                </div>
              </td>
              <td><span class="amount">¥12,800.00</span></td>
              <td>
                <div class="sparkline" aria-hidden="true">
                  <span style="height:40%"></span><span style="height:55%"></span><span style="height:48%"></span><span style="height:70%"></span><span style="height:62%"></span><span style="height:80%"></span><span style="height:75%"></span>
                </div>
              </td>
              <td>
                <button class="btn btn-op primary" type="button"><svg class="ic" style="width:12px;height:12px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>查看</button>
                <button class="btn btn-op" type="button">跟踪</button>
              </td>
            </tr>
            <tr>
              <td>☐</td>
              <td class="cell-left">
                <div class="cell-composite">
                  <span class="avatar">合</span>
                  <div><div>合肥兴皖生物</div><div class="cell-sub">CUS-002 · 华东/安徽</div></div>
                </div>
              </td>
              <td class="cell-left">
                <div class="cell-composite">
                  <img class="thumb" src="https://picsum.photos/seed/prod-b/80/80" alt="" />
                  <div><div>有机菠菜 300g</div><div class="cell-sub">SKU-10035 · × 50 袋</div></div>
                </div>
              </td>
              <td><a href="#" style="color:var(--primary-dark);font-weight:600;text-decoration:none">ORD-20260311-0042</a></td>
              <td><span class="tag success">已完成</span></td>
              <td>
                <div class="progress-wrap">
                  <div class="progress-bar"><div class="progress-fill" style="width:100%"></div></div>
                  <div class="progress-label">100% · 已签收</div>
                </div>
              </td>
              <td><span class="amount">¥6,450.00</span></td>
              <td>
                <div class="sparkline" aria-hidden="true">
                  <span style="height:30%"></span><span style="height:35%"></span><span style="height:42%"></span><span style="height:38%"></span><span style="height:50%"></span><span style="height:45%"></span><span style="height:48%"></span>
                </div>
              </td>
              <td>
                <button class="btn btn-op primary" type="button"><svg class="ic" style="width:12px;height:12px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>查看</button>
                <button class="btn btn-op" type="button">复制</button>
              </td>
            </tr>
            <tr>
              <td>☐</td>
              <td class="cell-left">
                <div class="cell-composite">
                  <span class="avatar">南</span>
                  <div><div>南京测试客户</div><div class="cell-sub">CUS-099 · 华东/江苏</div></div>
                </div>
              </td>
              <td class="cell-left">
                <div class="cell-composite">
                  <img class="thumb" src="https://picsum.photos/seed/prod-c/80/80" alt="" />
                  <div><div>精品苹果 2kg</div><div class="cell-sub">SKU-10008 · × 10 箱</div></div>
                </div>
              </td>
              <td><a href="#" style="color:var(--primary-dark);font-weight:600;text-decoration:none">ORD-20260310-0019</a></td>
              <td><span class="tag danger">异常</span></td>
              <td>
                <div class="progress-wrap">
                  <div class="progress-bar"><div class="progress-fill" style="width:35%;background:var(--warn)"></div></div>
                  <div class="progress-label" style="color:var(--warn)">35% · 缺货待补</div>
                </div>
              </td>
              <td><span class="amount">¥3,200.00</span></td>
              <td>
                <div class="sparkline" aria-hidden="true">
                  <span style="height:60%;background:var(--warn)"></span><span style="height:45%;background:var(--warn)"></span><span style="height:30%;background:var(--warn)"></span><span style="height:25%;background:var(--warn)"></span><span style="height:20%;background:var(--warn)"></span><span style="height:18%;background:var(--warn)"></span><span style="height:15%;background:var(--warn)"></span>
                </div>
              </td>
              <td>
                <button class="btn btn-op primary" type="button"><svg class="ic" style="width:12px;height:12px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>查看</button>
                <button class="btn btn-op" type="button">处理</button>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="list-pager-bar">共 186 条 · 第 1/19 页</div>
      </div>
    </section>

    <p class="dim-note">
      <strong>L3 列表新增：</strong>顶部迷你指标条、客户头像+副标题、商品缩略图、进度条、金额高亮、sparkline 趋势列。
      信息密度更高，但仍在 Fresh Mint 色板内——不是「加更多颜色」，而是<strong>加更多形态</strong>。
      <br><strong>对比：</strong><a href="ui-richness-L1-list-plain.html">L1</a> ·
      <a href="ui-richness-L2-list-moderate.html">L2</a>
    </p>
  </div>
</body>
</html>