zkxw/docs/mockups/ui-richness-L3-console-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" />
</head>
<body>
  <div class="demo-banner">
    <div>
      <span class="level-tag level-L3">L3 丰富</span>
      <strong>业务工作台</strong> — 对齐 Fresh Mint 规范参考版（fresh-mint-green.html 工作台段落）
    </div>
    <a href="ui-richness-index.html">← 返回对比入口</a>
  </div>

  <div class="page-wrap">
    <header class="page-head">
      <h1>工作台</h1>
      <p class="page-desc">今日业务概览与待办入口。数据每 5 分钟自动刷新；点击指标卡可跳转对应列表。</p>
    </header>

    <div class="alert-bar">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
      <div><strong>3 项时效预警：</strong>2 个样本接收超时、1 个质检工单待分配。请优先处理。</div>
    </div>

    <section class="stats" aria-label="数据概览">
      <div class="stat">
        <div class="stat-hd"><span class="stat-ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M16 3v4M8 3v4"/></svg></span></div>
        <div class="stat-main"><div class="k">今日订单</div><div class="stat-side"><div class="v">186</div><div class="hint">较昨日 +12</div></div></div>
      </div>
      <div class="stat">
        <div class="stat-hd"><span class="stat-ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg></span></div>
        <div class="stat-main"><div class="k">今日营业额</div><div class="stat-side"><div class="v">¥42.8万</div><div class="hint">较昨日 +6.2%</div></div></div>
      </div>
      <div class="stat">
        <div class="stat-hd"><span class="stat-ic"><svg 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></span></div>
        <div class="stat-main"><div class="k">待处理工单</div><div class="stat-side"><div class="v">24</div><div class="hint">质检 8 · 生产 16</div></div></div>
      </div>
      <div class="stat warn">
        <div class="stat-hd"><span class="stat-ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/></svg></span></div>
        <div class="stat-main"><div class="k">待配送</div><div class="stat-side"><div class="v">7</div><div class="hint">30 分钟内需出发</div></div></div>
      </div>
      <div class="stat">
        <div class="stat-hd"><span class="stat-ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></span></div>
        <div class="stat-main"><div class="k">样本在库</div><div class="stat-side"><div class="v">1,024</div><div class="hint">占用率 78%</div></div></div>
      </div>
      <div class="stat">
        <div class="stat-hd"><span class="stat-ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg></span></div>
        <div class="stat-main"><div class="k">活跃客户</div><div class="stat-side"><div class="v">89</div><div class="hint">本月有订单</div></div></div>
      </div>
    </section>

    <div class="trend-grid">
      <section class="panel">
        <div class="panel-top"><h2 class="title-bar-heading">近 30 日营业额趋势</h2></div>
        <div class="chart-panel">
          <div class="chart-bars" aria-hidden="true">
            <div class="chart-bar" style="height:45%"></div>
            <div class="chart-bar" style="height:52%"></div>
            <div class="chart-bar" style="height:48%"></div>
            <div class="chart-bar" style="height:61%"></div>
            <div class="chart-bar" style="height:55%"></div>
            <div class="chart-bar" style="height:70%"></div>
            <div class="chart-bar" style="height:68%"></div>
            <div class="chart-bar" style="height:75%"></div>
            <div class="chart-bar" style="height:82%"></div>
            <div class="chart-bar" style="height:78%"></div>
            <div class="chart-bar" style="height:88%"></div>
            <div class="chart-bar" style="height:92%"></div>
          </div>
        </div>
      </section>
      <section class="panel">
        <div class="panel-top"><h2 class="title-bar-heading">近 30 日订单量趋势</h2></div>
        <div class="chart-panel">
          <div class="chart-bars" aria-hidden="true">
            <div class="chart-bar" style="height:38%;opacity:.7"></div>
            <div class="chart-bar" style="height:42%;opacity:.7"></div>
            <div class="chart-bar" style="height:50%;opacity:.7"></div>
            <div class="chart-bar" style="height:47%;opacity:.7"></div>
            <div class="chart-bar" style="height:58%;opacity:.7"></div>
            <div class="chart-bar" style="height:62%;opacity:.7"></div>
            <div class="chart-bar" style="height:60%;opacity:.7"></div>
            <div class="chart-bar" style="height:71%;opacity:.7"></div>
            <div class="chart-bar" style="height:69%;opacity:.7"></div>
            <div class="chart-bar" style="height:76%;opacity:.7"></div>
            <div class="chart-bar" style="height:80%;opacity:.7"></div>
            <div class="chart-bar" style="height:85%;opacity:.7"></div>
          </div>
        </div>
      </section>
    </div>

    <section class="panel" style="margin-bottom:16px">
      <div class="panel-top">
        <h2 class="title-bar-heading">快捷入口</h2>
      </div>
      <div class="quick-grid">
        <a class="quick-card" href="#"><span class="quick-card-ic"><svg 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></span><span>新建订单</span></a>
        <a class="quick-card" href="#"><span class="quick-card-ic"><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><span>配送调度</span></a>
        <a class="quick-card" href="#"><span class="quick-card-ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg></span><span>待办任务</span></a>
        <a class="quick-card" href="#"><span class="quick-card-ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></span><span>客户管理</span></a>
        <a class="quick-card" href="#"><span class="quick-card-ic"><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><span>样本接收</span></a>
        <a class="quick-card" href="#"><span class="quick-card-ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg></span><span>质检工单</span></a>
      </div>
    </section>

    <section class="panel">
      <div class="panel-top">
        <h2 class="title-bar-heading">我的待办</h2>
        <button class="btn btn-ghost" type="button" style="height:32px;font-size:12px">查看全部</button>
      </div>
      <table class="data-table">
        <thead><tr><th class="cell-left">任务</th><th>类型</th><th>状态</th><th>截止时间</th><th>操作</th></tr></thead>
        <tbody>
          <tr>
            <td class="cell-left"><strong>样本 SP-20260312-001 接收确认</strong><div class="cell-sub">来自：上海市第一人民医院</div></td>
            <td><span class="tag info">样本</span></td>
            <td><span class="tag warning">待处理</span></td>
            <td>今天 18:00</td>
            <td><button class="btn btn-op primary" type="button">处理</button></td>
          </tr>
          <tr>
            <td class="cell-left"><strong>质检工单 QC-8842 结果录入</strong><div class="cell-sub">检测项：细胞活性</div></td>
            <td><span class="tag muted">质检</span></td>
            <td><span class="tag warning">进行中</span></td>
            <td>明天 12:00</td>
            <td><button class="btn btn-op primary" type="button">处理</button></td>
          </tr>
        </tbody>
      </table>
    </section>

    <p class="dim-note">
      <strong>L3 丰富来源：</strong>指标卡图标区、预警条、趋势图、快捷宫格（图标+文案）、待办副标题——均在 Fresh Mint 规范内，仍保持薄荷绿+Slate 克制配色。
      <br><strong>对比：</strong><a href="ui-richness-L1-console-plain.html">L1 精简工作台</a>
    </p>
  </div>
</body>
</html>