zkxw/docs/mockups/ui-richness-P03-timeline.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>P03 · 时间线 / 操作动态</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">模式 P03</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">详情弹窗或侧栏中用时间线替代纯文字日志列表。</p>
    </header>
    <div class="compare-row">
      <div class="compare-col plain">
        <h3>❌ 素：纯文字日志表</h3>
        <section class="panel">
          <table class="data-table">
            <thead><tr><th class="cell-left">时间</th><th class="cell-left">操作</th><th>操作人</th></tr></thead>
            <tbody>
              <tr><td class="cell-left">03-12 14:30</td><td class="cell-left">已签收</td><td>张配送</td></tr>
              <tr><td class="cell-left">03-12 10:15</td><td class="cell-left">开始配送</td><td>张配送</td></tr>
              <tr><td class="cell-left">03-12 08:00</td><td class="cell-left">仓库出库</td><td>李仓管</td></tr>
            </tbody>
          </table>
        </section>
      </div>
      <div class="compare-col rich">
        <h3>✓ 丰：图标时间线</h3>
        <section class="panel">
          <div class="panel-top"><h2 class="title-bar-heading">流转记录</h2></div>
          <div class="timeline">
            <div class="timeline-item">
              <span class="timeline-dot"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg></span>
              <div class="timeline-body"><strong>客户已签收</strong><p>签收人：王主任 · 备注：货品完好</p></div>
              <span class="timeline-time">03-12 14:30</span>
            </div>
            <div class="timeline-item">
              <span class="timeline-dot"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 18V6a2 2 0 00-2-2H4a2 2 0 00-2 2v11a1 1 0 001 1h2"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg></span>
              <div class="timeline-body"><strong>配送员已出发</strong><p>张配送 · 沪A·12345 · 预计 14:00 送达</p></div>
              <span class="timeline-time">03-12 10:15</span>
            </div>
            <div class="timeline-item">
              <span class="timeline-dot"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/></svg></span>
              <div class="timeline-body"><strong>仓库已出库</strong><p>李仓管 · 出库单 OUT-8842 · 20 箱</p></div>
              <span class="timeline-time">03-12 08:00</span>
            </div>
            <div class="timeline-item">
              <span class="timeline-dot warn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4"/></svg></span>
              <div class="timeline-body"><strong>订单已创建</strong><p>系统自动 · 来源：客户 APP 下单</p></div>
              <span class="timeline-time">03-11 22:18</span>
            </div>
          </div>
        </section>
      </div>
    </div>
    <p class="dim-note"><strong>适用：</strong>订单跟踪、审批流、样本流转、操作审计。节点图标按事件类型映射（完成=绿、异常=琥珀）。</p>
  </div>
</body>
</html>