zkxw/docs/qc-wo-sample-tab-demos/index.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>质检工单 · 同样本多工单 Tab 选型 · 索引</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="_shared.css" />
    <style>
      .index-hero {
        max-width: 960px;
        margin: 0 auto;
        padding: 32px 24px 12px;
      }

      .index-hero h1 {
        margin: 0 0 8px;
        font-size: 22px;
      }

      .index-hero p {
        margin: 0;
        color: var(--text-muted);
        max-width: 720px;
        line-height: 1.6;
      }

      .index-cta {
        max-width: 960px;
        margin: 0 auto;
        padding: 8px 24px 12px;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
      }

      .index-cta a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 44px;
        padding: 0 20px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        transition: background 0.15s;
      }

      .index-cta a.primary {
        background: var(--primary);
        color: #fff;
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
      }

      .index-cta a.primary:hover {
        background: var(--primary-dark);
      }

      .index-cta a.secondary {
        background: var(--surface);
        color: var(--text);
        border: 1px solid var(--border);
      }

      .index-cta a.secondary:hover {
        border-color: #a7f3d0;
        background: var(--primary-bg);
        color: var(--primary-dark);
      }

      .batch-section {
        max-width: 960px;
        margin: 0 auto;
        padding: 16px 24px 8px;
      }

      .batch-section h2 {
        margin: 0 0 4px;
        font-size: 16px;
        font-weight: 600;
      }

      .batch-section p {
        margin: 0 0 12px;
        font-size: 13px;
        color: var(--text-muted);
      }

      .index-grid {
        max-width: 960px;
        margin: 0 auto;
        padding: 0 24px 32px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 16px;
      }

      .index-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 18px;
      }

      .index-card h3 {
        margin: 0 0 6px;
        font-size: 15px;
        font-weight: 600;
        color: var(--primary-dark);
      }

      .index-card p {
        margin: 0;
        font-size: 13px;
        color: var(--text-muted);
        line-height: 1.5;
      }

      .index-card .tag {
        display: inline-block;
        margin-top: 12px;
        padding: 2px 8px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 600;
        background: #f1f5f9;
        color: var(--text-muted);
      }

      .index-card .tag--rec {
        background: var(--primary-bg);
        color: var(--primary-dark);
        border: 1px solid #a7f3d0;
      }

      .index-card .tag--new {
        background: #fffbeb;
        color: #b45309;
        border: 1px solid #fcd34d;
      }

      .context-box {
        max-width: 960px;
        margin: 0 auto 8px;
        padding: 0 24px;
      }

      .context-box-inner {
        padding: 14px 16px;
        background: #fffbeb;
        border: 1px solid #fcd34d;
        border-radius: 10px;
        font-size: 13px;
        color: #92400e;
        line-height: 1.55;
      }
    </style>
  </head>
  <body>
    <div class="index-hero">
      <h1>质检工单 · 细胞存储 · 同样本多工单 Tab 选型</h1>
      <p>
        针对 <code>QcWorkOrderSampleGroup.vue</code> 中「同一样本下样本接收 + 生产过程两条工单」的切换区域。
        共两组 HTML 原型，均可点击交互。
      </p>
    </div>

    <div class="context-box">
      <div class="context-box-inner">
        <strong>问题：</strong>用户难以感知卡片内存在两类不同质检工单，且需要点击切换。
      </div>
    </div>

    <div class="index-cta">
      <a class="primary" href="independent-pills.html">独立胶囊 Tab（最新）→</a>
      <a class="secondary" href="compare-all-v2.html">第二组 · 强对比方案</a>
      <a class="secondary" href="compare-all.html">第一组 · 渐进改良方案</a>
    </div>

    <div class="batch-section">
      <h2>独立胶囊 Tab（现网结构 + 分离间距）</h2>
      <p>去掉轨道连体容器，每个 Tab 独立白底胶囊，间距 16 / 24 / 32px 三档对比。</p>
    </div>
    <div class="index-grid">
      <div class="index-card">
        <h3>A · 轨道内连体</h3>
        <p>现网对照：<code>panel-pill-tabs__track</code> 绿底容器。</p>
        <span class="tag">对照</span>
      </div>
      <div class="index-card">
        <h3>B · 独立胶囊 16px</h3>
        <p>独立边框 + 来源色，间距 16px。</p>
        <span class="tag tag--rec">推荐</span>
        <span class="tag tag--new">最新</span>
      </div>
      <div class="index-card">
        <h3>C · 独立胶囊 24px</h3>
        <p>分离感更强。</p>
        <span class="tag tag--new">最新</span>
      </div>
      <div class="index-card">
        <h3>D · 独立胶囊 32px 放大</h3>
        <p>最大间距 + 略放大点击区域。</p>
        <span class="tag tag--new">最新</span>
      </div>
    </div>

    <div class="batch-section">
      <h2>第二组 · 强对比（推荐先看）</h2>
      <p>加大色块面积、两条工单始终可见、未选中显式「切换/点击」 affordance。</p>
    </div>
    <div class="index-grid">
      <div class="index-card">
        <h3>N1 · 双色分栏顶栏</h3>
        <p>整宽 50/50 绿/琥珀分栏，未选中降饱和 + 👆 动画提示。</p>
        <span class="tag tag--rec">推荐</span>
        <span class="tag tag--new">第二组</span>
      </div>
      <div class="index-card">
        <h3>N2 · 双行 Radio 清单</h3>
        <p>列表单选形态，未选中行「切换至此」按钮。</p>
        <span class="tag tag--new">第二组</span>
      </div>
      <div class="index-card">
        <h3>N3 · 大开关 Toggle</h3>
        <p>居中 oversized 二选一开关，emoji + 粗体类别名。</p>
        <span class="tag tag--rec">推荐</span>
        <span class="tag tag--new">第二组</span>
      </div>
      <div class="index-card">
        <h3>N4 · 图标宫格</h3>
        <p>56px 大图标 + 虚线边框 = 可点击，视觉重量最大。</p>
        <span class="tag tag--new">第二组</span>
      </div>
      <div class="index-card">
        <h3>N5 · 双摘要条</h3>
        <p>提示横幅 + 并排 Chip，未选中绿色「切换」按钮。</p>
        <span class="tag tag--new">第二组</span>
      </div>
      <div class="index-card">
        <h3>N6 · 左导航 + 右预览</h3>
        <p>Master-Detail，左侧工单列表始终可见。</p>
        <span class="tag tag--new">第二组</span>
      </div>
    </div>

    <div class="batch-section">
      <h2>第一组 · 渐进改良</h2>
      <p>在现有 pill-tab 形态上微调，改动量较小。</p>
    </div>
    <div class="index-grid">
      <div class="index-card">
        <h3>V0–V5</h3>
        <p>胶囊 Tab、双卡片、步骤条、Segmented、色条 Tab 等 6 套。</p>
        <span class="tag">第一组</span>
      </div>
    </div>
  </body>
</html>