zkxw/docs/mockups/ui-richness-P04-kanban.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>P04 · 看板 Kanban</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">模式 P04</span> <strong>看板 Kanban</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>
    <section class="stats" style="grid-template-columns:repeat(4,1fr);margin-bottom:16px">
      <div class="stat" style="min-height:72px"><div class="stat-main"><div class="k">待排产</div><div class="stat-side"><div class="v" style="font-size:18px">8</div></div></div></div>
      <div class="stat" style="min-height:72px"><div class="stat-main"><div class="k">生产中</div><div class="stat-side"><div class="v" style="font-size:18px;color:var(--warn)">12</div></div></div></div>
      <div class="stat" style="min-height:72px"><div class="stat-main"><div class="k">待质检</div><div class="stat-side"><div class="v" style="font-size:18px">5</div></div></div></div>
      <div class="stat" style="min-height:72px"><div class="stat-main"><div class="k">已完成</div><div class="stat-side"><div class="v" style="font-size:18px">36</div></div></div></div>
    </section>
    <section class="panel">
      <div class="panel-top">
        <h2 class="title-bar-heading">工单看板</h2>
        <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>
      </div>
      <div class="kanban">
        <div class="kanban-col">
          <div class="kanban-col-hd">待排产 <span class="kanban-count">3</span></div>
          <div class="kanban-list">
            <div class="kanban-card"><div class="kanban-card-id">WO-20260312-001</div><div class="kanban-card-title">细胞扩增 · 批次 B-884</div><div class="kanban-card-ft"><span class="tag muted">中</span><span class="avatar" style="width:24px;height:24px;font-size:10px">李</span></div></div>
            <div class="kanban-card"><div class="kanban-card-id">WO-20260312-003</div><div class="kanban-card-title">冻存入库 · 样本 SP-991</div><div class="kanban-card-ft"><span class="tag warning">高</span><span class="avatar" style="width:24px;height:24px;font-size:10px">王</span></div></div>
          </div>
        </div>
        <div class="kanban-col">
          <div class="kanban-col-hd">生产中 <span class="kanban-count">2</span></div>
          <div class="kanban-list">
            <div class="kanban-card"><div class="kanban-card-id">WO-20260311-018</div><div class="kanban-card-title">传代培养 · 第 3 代</div><div class="progress-bar" style="margin-bottom:8px"><div class="progress-fill" style="width:60%"></div></div><div class="kanban-card-ft"><span class="tag success">进行中</span><span class="avatar" style="width:24px;height:24px;font-size:10px">张</span></div></div>
          </div>
        </div>
        <div class="kanban-col">
          <div class="kanban-col-hd">待质检 <span class="kanban-count">2</span></div>
          <div class="kanban-list">
            <div class="kanban-card"><div class="kanban-card-id">WO-20260310-042</div><div class="kanban-card-title">活性检测 · QC 项 3/5</div><div class="kanban-card-ft"><span class="tag info">待检</span><span class="avatar" style="width:24px;height:24px;font-size:10px">赵</span></div></div>
          </div>
        </div>
        <div class="kanban-col">
          <div class="kanban-col-hd">已完成 <span class="kanban-count">4</span></div>
          <div class="kanban-list">
            <div class="kanban-card" style="opacity:.85"><div class="kanban-card-id">WO-20260309-007</div><div class="kanban-card-title">制剂分装 · 已完成</div><div class="kanban-card-ft"><span class="tag success">通过</span><span class="avatar" style="width:24px;height:24px;font-size:10px">陈</span></div></div>
          </div>
        </div>
      </div>
    </section>
    <p class="dim-note"><strong>适用：</strong>工单、待办、审批任务。可与列表视图并存；拖拽可选做二期。</p>
  </div>
</body>
</html>