| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057 |
- <!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>
- .batch-note {
- max-width: 960px;
- margin: 0 auto;
- padding: 0 24px 16px;
- }
- .batch-note-inner {
- padding: 12px 16px;
- background: var(--primary-bg);
- border: 1px solid #a7f3d0;
- border-radius: 10px;
- font-size: 13px;
- color: #065f46;
- line-height: 1.55;
- }
- /* ═══ N1 · 双色分栏顶栏 ═══ */
- .n1-switcher {
- display: grid;
- grid-template-columns: 1fr 1fr;
- border-bottom: 3px solid var(--border);
- }
- .n1-half {
- position: relative;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- gap: 6px;
- min-height: 72px;
- padding: 14px 16px;
- border: none;
- font-family: inherit;
- cursor: pointer;
- transition: filter 0.15s, transform 0.1s;
- }
- .n1-half:active {
- transform: scale(0.98);
- }
- .n1-half--reception {
- background: linear-gradient(180deg, #d1fae5 0%, var(--reception-bg) 100%);
- color: var(--reception);
- }
- .n1-half--production {
- background: linear-gradient(180deg, #fef3c7 0%, var(--production-bg) 100%);
- color: var(--production);
- }
- .n1-half:not(.is-active) {
- filter: saturate(0.35) brightness(1.08);
- }
- .n1-half:not(.is-active)::after {
- content: '👆 点击切换';
- position: absolute;
- bottom: 6px;
- font-size: 11px;
- font-weight: 600;
- opacity: 0.85;
- animation: nudge 2s ease-in-out infinite;
- }
- @keyframes nudge {
- 0%,
- 100% {
- transform: translateY(0);
- }
- 50% {
- transform: translateY(-2px);
- }
- }
- .n1-half.is-active {
- box-shadow: inset 0 -4px 0 currentColor;
- filter: none;
- }
- .n1-half.is-active::before {
- content: '当前查看';
- position: absolute;
- top: 6px;
- right: 8px;
- font-size: 10px;
- font-weight: 700;
- padding: 2px 8px;
- border-radius: 999px;
- background: rgb(255 255 255 / 75%);
- }
- .n1-half__title {
- font-size: 16px;
- font-weight: 700;
- letter-spacing: 0.02em;
- }
- .n1-half__sub {
- font-size: 11px;
- font-family: ui-monospace, Menlo, monospace;
- opacity: 0.9;
- }
- .n1-divider {
- position: absolute;
- left: 50%;
- top: 12px;
- bottom: 12px;
- width: 2px;
- background: rgb(15 23 42 / 12%);
- transform: translateX(-50%);
- pointer-events: none;
- z-index: 1;
- }
- .n1-switcher-wrap {
- position: relative;
- }
- /* ═══ N2 · 双行清单 ═══ */
- .n2-list {
- border-bottom: 1px solid var(--border);
- background: #fff;
- }
- .n2-list__head {
- padding: 10px 16px 6px;
- font-size: 12px;
- font-weight: 600;
- color: var(--text-muted);
- }
- .n2-row {
- display: flex;
- align-items: center;
- gap: 12px;
- width: 100%;
- padding: 12px 16px;
- border: none;
- border-top: 1px solid var(--border);
- background: #fff;
- font-family: inherit;
- text-align: left;
- cursor: pointer;
- transition: background 0.15s;
- }
- .n2-row:hover:not(.is-active) {
- background: #f8fafc;
- }
- .n2-row.is-active {
- background: var(--primary-bg);
- box-shadow: inset 4px 0 0 var(--primary);
- }
- .n2-row.is-active[data-source='reception'] {
- background: var(--reception-bg);
- box-shadow: inset 4px 0 0 var(--reception);
- }
- .n2-row.is-active[data-source='production'] {
- background: var(--production-bg);
- box-shadow: inset 4px 0 0 var(--production);
- }
- .n2-row__radio {
- width: 20px;
- height: 20px;
- border-radius: 50%;
- border: 2px solid #cbd5e1;
- flex-shrink: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .n2-row.is-active .n2-row__radio {
- border-color: var(--primary);
- background: var(--primary);
- }
- .n2-row.is-active[data-source='reception'] .n2-row__radio {
- border-color: var(--reception);
- background: var(--reception);
- }
- .n2-row.is-active[data-source='production'] .n2-row__radio {
- border-color: var(--production);
- background: var(--production);
- }
- .n2-row.is-active .n2-row__radio::after {
- content: '';
- width: 8px;
- height: 8px;
- border-radius: 50%;
- background: #fff;
- }
- .n2-row__main {
- flex: 1;
- min-width: 0;
- }
- .n2-row__type {
- font-size: 14px;
- font-weight: 600;
- }
- .n2-row__no {
- font-size: 12px;
- font-family: ui-monospace, Menlo, monospace;
- color: var(--text-muted);
- margin-top: 2px;
- }
- .n2-row:not(.is-active) .n2-row__action {
- flex-shrink: 0;
- font-size: 12px;
- font-weight: 600;
- color: var(--primary-dark);
- padding: 4px 10px;
- border-radius: 6px;
- background: var(--primary-bg);
- border: 1px solid #a7f3d0;
- }
- .n2-row.is-active .n2-row__action {
- flex-shrink: 0;
- font-size: 11px;
- font-weight: 600;
- color: var(--text-muted);
- }
- /* ═══ N3 · 大开关 Toggle ═══ */
- .n3-zone {
- padding: 16px;
- border-bottom: 1px solid var(--border);
- background: #f1f5f9;
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 12px;
- }
- .n3-label {
- font-size: 13px;
- font-weight: 600;
- color: var(--text);
- }
- .n3-toggle {
- display: flex;
- width: 100%;
- max-width: 420px;
- padding: 5px;
- border-radius: 14px;
- background: #e2e8f0;
- border: 2px solid #cbd5e1;
- box-shadow: inset 0 2px 4px rgb(15 23 42 / 8%);
- }
- .n3-toggle__btn {
- flex: 1;
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 4px;
- padding: 14px 12px;
- border: none;
- border-radius: 10px;
- background: transparent;
- font-family: inherit;
- font-size: 15px;
- font-weight: 600;
- color: var(--text-muted);
- cursor: pointer;
- transition: all 0.2s ease;
- }
- .n3-toggle__btn.is-active[data-source='reception'] {
- background: #fff;
- color: var(--reception);
- box-shadow: 0 2px 8px rgb(4 120 87 / 20%);
- }
- .n3-toggle__btn.is-active[data-source='production'] {
- background: #fff;
- color: var(--production);
- box-shadow: 0 2px 8px rgb(180 83 9 / 20%);
- }
- .n3-toggle__btn:not(.is-active):hover {
- color: var(--text);
- background: rgb(255 255 255 / 50%);
- }
- .n3-toggle__icon {
- font-size: 22px;
- line-height: 1;
- }
- .n3-toggle__hint {
- font-size: 10px;
- font-weight: 500;
- opacity: 0.8;
- }
- .n3-current {
- font-size: 12px;
- color: var(--text-muted);
- font-family: ui-monospace, Menlo, monospace;
- }
- /* ═══ N4 · 图标宫格二选一 ═══ */
- .n4-zone {
- padding: 16px;
- border-bottom: 1px solid var(--border);
- background: #fff;
- }
- .n4-head {
- text-align: center;
- margin-bottom: 14px;
- }
- .n4-head__title {
- font-size: 14px;
- font-weight: 700;
- color: var(--text);
- }
- .n4-head__sub {
- font-size: 12px;
- color: var(--text-muted);
- margin-top: 4px;
- }
- .n4-grid {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 12px;
- }
- .n4-tile {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 10px;
- padding: 20px 16px 16px;
- border: 3px solid var(--border);
- border-radius: 14px;
- background: #fff;
- font-family: inherit;
- cursor: pointer;
- transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
- }
- .n4-tile:hover:not(.is-active) {
- transform: translateY(-2px);
- box-shadow: 0 6px 16px rgb(15 23 42 / 10%);
- }
- .n4-tile[data-source='reception']:not(.is-active) {
- border-color: var(--reception-border);
- border-style: dashed;
- }
- .n4-tile[data-source='production']:not(.is-active) {
- border-color: var(--production-border);
- border-style: dashed;
- }
- .n4-tile[data-source='reception'].is-active {
- border-color: var(--reception);
- border-style: solid;
- background: var(--reception-bg);
- box-shadow: 0 4px 12px rgb(4 120 87 / 15%);
- }
- .n4-tile[data-source='production'].is-active {
- border-color: var(--production);
- border-style: solid;
- background: var(--production-bg);
- box-shadow: 0 4px 12px rgb(180 83 9 / 15%);
- }
- .n4-tile__icon {
- width: 56px;
- height: 56px;
- border-radius: 16px;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .n4-tile[data-source='reception'] .n4-tile__icon {
- background: #fff;
- color: var(--reception);
- border: 2px solid var(--reception-border);
- }
- .n4-tile[data-source='production'] .n4-tile__icon {
- background: #fff;
- color: var(--production);
- border: 2px solid var(--production-border);
- }
- .n4-tile__name {
- font-size: 16px;
- font-weight: 700;
- }
- .n4-tile__cta {
- font-size: 12px;
- font-weight: 600;
- padding: 6px 14px;
- border-radius: 999px;
- }
- .n4-tile:not(.is-active) .n4-tile__cta {
- background: #f1f5f9;
- color: var(--text);
- border: 1px solid var(--border);
- }
- .n4-tile[data-source='reception']:not(.is-active) .n4-tile__cta {
- background: var(--reception-bg);
- color: var(--reception);
- border: 1px solid var(--reception-border);
- }
- .n4-tile[data-source='production']:not(.is-active) .n4-tile__cta {
- background: var(--production-bg);
- color: var(--production);
- border: 1px solid var(--production-border);
- }
- .n4-tile.is-active .n4-tile__cta {
- background: rgb(255 255 255 / 80%);
- color: inherit;
- border: 1px solid rgb(0 0 0 / 8%);
- }
- .n4-tile__meta {
- font-size: 11px;
- font-family: ui-monospace, Menlo, monospace;
- color: var(--text-muted);
- }
- /* ═══ N5 · 双摘要条(两条始终可见) ═══ */
- .n5-zone {
- padding: 12px 16px;
- border-bottom: 1px solid var(--border);
- background: #f8fafc;
- display: flex;
- flex-direction: column;
- gap: 8px;
- }
- .n5-banner {
- display: flex;
- align-items: center;
- gap: 8px;
- padding: 8px 12px;
- border-radius: 8px;
- background: #fff;
- border: 1px solid var(--border);
- font-size: 12px;
- color: var(--text-muted);
- }
- .n5-banner strong {
- color: var(--primary-dark);
- }
- .n5-strip {
- display: flex;
- align-items: stretch;
- gap: 8px;
- min-height: 56px;
- }
- .n5-chip {
- flex: 1;
- display: flex;
- align-items: center;
- gap: 10px;
- padding: 10px 12px;
- border: 2px solid var(--border);
- border-radius: 10px;
- background: #fff;
- font-family: inherit;
- text-align: left;
- cursor: pointer;
- transition: all 0.15s;
- }
- .n5-chip:not(.is-active) {
- opacity: 0.72;
- }
- .n5-chip:not(.is-active):hover {
- opacity: 1;
- border-color: #94a3b8;
- }
- .n5-chip.is-active[data-source='reception'] {
- opacity: 1;
- border-color: var(--reception);
- background: var(--reception-bg);
- box-shadow: 0 0 0 1px var(--reception);
- }
- .n5-chip.is-active[data-source='production'] {
- opacity: 1;
- border-color: var(--production);
- background: var(--production-bg);
- box-shadow: 0 0 0 1px var(--production);
- }
- .n5-chip__dot {
- width: 10px;
- height: 10px;
- border-radius: 50%;
- flex-shrink: 0;
- }
- .n5-chip[data-source='reception'] .n5-chip__dot {
- background: var(--reception);
- }
- .n5-chip[data-source='production'] .n5-chip__dot {
- background: var(--production);
- }
- .n5-chip__body {
- flex: 1;
- min-width: 0;
- }
- .n5-chip__type {
- font-size: 13px;
- font-weight: 700;
- }
- .n5-chip__status {
- font-size: 11px;
- color: var(--text-muted);
- margin-top: 1px;
- }
- .n5-chip:not(.is-active) .n5-chip__switch {
- flex-shrink: 0;
- font-size: 11px;
- font-weight: 700;
- color: #fff;
- padding: 4px 10px;
- border-radius: 6px;
- background: var(--primary);
- }
- .n5-chip.is-active .n5-chip__switch {
- flex-shrink: 0;
- font-size: 10px;
- font-weight: 700;
- padding: 3px 8px;
- border-radius: 999px;
- background: rgb(255 255 255 / 70%);
- color: inherit;
- border: 1px solid rgb(0 0 0 / 10%);
- }
- /* ═══ N6 · 左导航 + 右内容预览 ═══ */
- .n6-layout {
- display: flex;
- border-bottom: 1px solid var(--border);
- min-height: 120px;
- }
- @media (max-width: 560px) {
- .n6-layout {
- flex-direction: column;
- }
- }
- .n6-nav {
- width: 200px;
- flex-shrink: 0;
- background: #f1f5f9;
- border-right: 1px solid var(--border);
- padding: 10px 8px;
- display: flex;
- flex-direction: column;
- gap: 6px;
- }
- @media (max-width: 560px) {
- .n6-nav {
- width: 100%;
- flex-direction: row;
- border-right: none;
- border-bottom: 1px solid var(--border);
- }
- }
- .n6-nav__label {
- padding: 4px 8px 6px;
- font-size: 11px;
- font-weight: 700;
- color: var(--text-muted);
- text-transform: uppercase;
- letter-spacing: 0.04em;
- }
- @media (max-width: 560px) {
- .n6-nav__label {
- display: none;
- }
- }
- .n6-nav__btn {
- display: flex;
- flex-direction: column;
- gap: 4px;
- padding: 12px 10px;
- border: 2px solid transparent;
- border-radius: 8px;
- background: #fff;
- font-family: inherit;
- text-align: left;
- cursor: pointer;
- transition: all 0.15s;
- }
- @media (max-width: 560px) {
- .n6-nav__btn {
- flex: 1;
- }
- }
- .n6-nav__btn:not(.is-active):hover {
- border-color: #cbd5e1;
- }
- .n6-nav__btn.is-active[data-source='reception'] {
- border-color: var(--reception);
- background: var(--reception-bg);
- }
- .n6-nav__btn.is-active[data-source='production'] {
- border-color: var(--production);
- background: var(--production-bg);
- }
- .n6-nav__btn:not(.is-active)::after {
- content: '点击';
- font-size: 10px;
- font-weight: 600;
- color: var(--primary);
- }
- .n6-nav__type {
- font-size: 13px;
- font-weight: 700;
- }
- .n6-nav__no {
- font-size: 10px;
- font-family: ui-monospace, Menlo, monospace;
- color: var(--text-muted);
- word-break: break-all;
- }
- .n6-preview {
- flex: 1;
- padding: 12px 16px;
- background: #fff;
- display: flex;
- flex-direction: column;
- justify-content: center;
- }
- .n6-preview__label {
- font-size: 11px;
- color: var(--text-muted);
- margin-bottom: 6px;
- }
- .n6-preview__title {
- font-size: 15px;
- font-weight: 600;
- margin-bottom: 4px;
- }
- .n6-preview__no {
- font-family: ui-monospace, Menlo, monospace;
- font-size: 13px;
- color: var(--text-muted);
- }
- .n6-preview__hint {
- margin-top: 10px;
- font-size: 12px;
- color: var(--primary-dark);
- font-weight: 500;
- }
- </style>
- </head>
- <body>
- <header class="demo-banner">
- <div>
- <h1>第二组 · 强对比方案(6 套)</h1>
- <p>
- 上一组反馈「不够明显」。本组加大触控面积、始终展示两条工单、强化未选中态的视觉提示(虚线边框、👆 动画、Radio
- 清单、大 Toggle 等)。<a href="compare-all.html" style="color: var(--primary-dark)">← 第一组</a>
- </p>
- </div>
- <div class="demo-banner__actions">
- <a class="demo-link" href="index.html">索引</a>
- </div>
- </header>
- <div class="batch-note">
- <div class="batch-note-inner">
- 设计原则:<strong>两条工单信息始终可见</strong>、<strong>未选中必须有明确「可点击」 affordance</strong>、<strong>来源类别用大面积色块区分</strong>(绿=样本接收,琥珀=生产过程)。
- </div>
- </div>
- <div class="page-container">
- <div class="compare-stack">
- <section class="compare-block">
- <div class="compare-block__label">
- <h2>
- <span class="variant-tag variant-tag--rec">推荐</span>
- <span class="variant-tag">N1</span>
- 双色分栏顶栏(整宽可点)
- </h2>
- <p>卡片顶部 50/50 分栏:左绿「样本接收」、右琥珀「生产过程」。未选中侧降饱和 + 底部「👆 点击切换」动画;选中侧底部色条 +「当前查看」角标。</p>
- <div class="pros-cons">
- <div class="pro">✓ 类别与可点击性一眼可见,占用高度适中</div>
- </div>
- </div>
- <div class="compare-block__body" id="block-n1"></div>
- </section>
- <section class="compare-block">
- <div class="compare-block__label">
- <h2><span class="variant-tag">N2</span> 双行 Radio 清单</h2>
- <p>两条工单以列表行始终展示:Radio 圆点 + 类型 + 工单号。未选中行右侧绿色「切换至此」按钮;选中行左侧 4px 色条高亮。</p>
- <div class="pros-cons">
- <div class="pro">✓ 类似表单单选,学习成本最低</div>
- <div class="pro">✓ 两条工单信息完整可见</div>
- </div>
- </div>
- <div class="compare-block__body" id="block-n2"></div>
- </section>
- <section class="compare-block">
- <div class="compare-block__label">
- <h2>
- <span class="variant-tag variant-tag--rec">推荐</span>
- <span class="variant-tag">N3</span>
- 大开关 Toggle(二选一)
- </h2>
- <p>居中 oversized 分段开关,emoji 图标 + 15px 粗体类别名。切换时白底滑块 + 阴影动效,下方显示当前工单号。</p>
- <div class="pros-cons">
- <div class="pro">✓ 二选一语义最直白</div>
- </div>
- </div>
- <div class="compare-block__body" id="block-n3"></div>
- </section>
- <section class="compare-block">
- <div class="compare-block__label">
- <h2><span class="variant-tag">N4</span> 图标宫格(虚线 = 可点)</h2>
- <p>两个 56px 大图标方块并排:未选中虚线边框 +「点击查看」圆角按钮;选中实线边框 + 整卡染色 + 阴影浮起。</p>
- <div class="pros-cons">
- <div class="pro">✓ 视觉重量最大,最难被忽略</div>
- <div class="con">✗ 垂直空间占用较多</div>
- </div>
- </div>
- <div class="compare-block__body" id="block-n4"></div>
- </section>
- <section class="compare-block">
- <div class="compare-block__label">
- <h2><span class="variant-tag">N5</span> 双摘要条 + 切换按钮</h2>
- <p>顶部提示「本样本有 2 条质检工单,请点击切换」;下方两条摘要 Chip 并排,未选中带绿色「切换」实心按钮。</p>
- </div>
- <div class="compare-block__body" id="block-n5"></div>
- </section>
- <section class="compare-block">
- <div class="compare-block__label">
- <h2><span class="variant-tag">N6</span> 左导航 + 右预览</h2>
- <p>左侧固定 200px 导航列列出两条工单(未选中显示「点击」),右侧预览当前选中工单摘要——Master-Detail 模式。</p>
- <div class="pros-cons">
- <div class="pro">✓ 适合 3 条以上工单扩展</div>
- <div class="con">✗ 横向空间占用大</div>
- </div>
- </div>
- <div class="compare-block__body" id="block-n6"></div>
- </section>
- </div>
- </div>
- <script>
- const MOCK = {
- sampleCode: 'YB-2025-0618-0042',
- subtitle: '张三 · 间充质干细胞 · 5×10⁶/支',
- workOrders: [
- {
- id: 'wo-reception',
- source: 'reception',
- label: '样本接收',
- emoji: '📦',
- no: 'QC-IN-20250618-0012',
- statusLabel: '已完成',
- statusClass: 'tag--success'
- },
- {
- id: 'wo-production',
- source: 'production',
- label: '生产过程',
- emoji: '⚙️',
- no: 'QC-IN-20250620-0038',
- statusLabel: '已配置',
- statusClass: 'tag--warning'
- }
- ]
- }
- const ICONS = {
- reception: `<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>`,
- production: `<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>`
- }
- function ctxHeader() {
- return `
- <div class="qc-sample-row__ctx">
- <span class="qc-sample-row__idx">1</span>
- <span class="qc-sample-row__code">${MOCK.sampleCode}</span>
- <span class="qc-sample-row__sub">${MOCK.subtitle}</span>
- <span class="qc-sample-row__badge">${MOCK.workOrders.length} 条质检</span>
- </div>`
- }
- function cardPlaceholder(wo) {
- return `
- <div class="qc-card-placeholder">
- <div class="qc-card-placeholder__head">
- <span class="qc-card-placeholder__no">${wo.no}</span>
- <span class="tag ${wo.statusClass}">${wo.statusLabel}</span>
- <span class="tag tag--${wo.source}">${wo.label}</span>
- </div>
- <div class="qc-card-placeholder__meta">
- <span><strong>触发来源</strong>${wo.label}</span>
- <span><strong>细胞类型</strong>间充质干细胞</span>
- <span><strong>创建时间</strong>2025-06-18 14:32</span>
- </div>
- <div class="qc-card-placeholder__tasks">▼ 质检任务列表(${wo.label})</div>
- </div>`
- }
- function wrap(inner, activeWo) {
- return `<article class="qc-sample-row">${ctxHeader()}${inner}${cardPlaceholder(activeWo)}</article>`
- }
- function renderN1(id) {
- const active = MOCK.workOrders.find((w) => w.id === id)
- const [a, b] = MOCK.workOrders
- return wrap(
- `<div class="n1-switcher-wrap">
- <div class="n1-switcher" role="tablist">
- <button type="button" class="n1-half n1-half--reception tab-btn ${a.id === id ? 'is-active' : ''}"
- data-id="${a.id}" role="tab">
- <span class="n1-half__title">${a.emoji} ${a.label}</span>
- <span class="n1-half__sub">${a.no}</span>
- </button>
- <button type="button" class="n1-half n1-half--production tab-btn ${b.id === id ? 'is-active' : ''}"
- data-id="${b.id}" role="tab">
- <span class="n1-half__title">${b.emoji} ${b.label}</span>
- <span class="n1-half__sub">${b.no}</span>
- </button>
- </div>
- <div class="n1-divider"></div>
- </div>`,
- active
- )
- }
- function renderN2(id) {
- const active = MOCK.workOrders.find((w) => w.id === id)
- const rows = MOCK.workOrders.map(
- (wo) => `
- <button type="button" class="n2-row tab-btn ${wo.id === id ? 'is-active' : ''}"
- data-id="${wo.id}" data-source="${wo.source}" role="tab">
- <span class="n2-row__radio"></span>
- <span class="n2-row__main">
- <div class="n2-row__type">${wo.label}</div>
- <div class="n2-row__no">${wo.no}</div>
- </span>
- <span class="tag ${wo.statusClass}">${wo.statusLabel}</span>
- <span class="n2-row__action">${wo.id === id ? '正在查看' : '切换至此'}</span>
- </button>`
- ).join('')
- return wrap(
- `<div class="n2-list">
- <div class="n2-list__head">请选择要查看的质检工单(共 ${MOCK.workOrders.length} 条)</div>
- ${rows}
- </div>`,
- active
- )
- }
- function renderN3(id) {
- const active = MOCK.workOrders.find((w) => w.id === id)
- const btns = MOCK.workOrders.map(
- (wo) => `
- <button type="button" class="n3-toggle__btn tab-btn ${wo.id === id ? 'is-active' : ''}"
- data-id="${wo.id}" data-source="${wo.source}" role="tab">
- <span class="n3-toggle__icon">${wo.emoji}</span>
- <span>${wo.label}</span>
- ${wo.id !== id ? '<span class="n3-toggle__hint">点击切换</span>' : ''}
- </button>`
- ).join('')
- return wrap(
- `<div class="n3-zone">
- <div class="n3-label">本样本有两条质检工单,请选择查看:</div>
- <div class="n3-toggle" role="tablist">${btns}</div>
- <div class="n3-current">当前:${active.no} · ${active.statusLabel}</div>
- </div>`,
- active
- )
- }
- function renderN4(id) {
- const active = MOCK.workOrders.find((w) => w.id === id)
- const tiles = MOCK.workOrders.map(
- (wo) => `
- <button type="button" class="n4-tile tab-btn ${wo.id === id ? 'is-active' : ''}"
- data-id="${wo.id}" data-source="${wo.source}" role="tab">
- <span class="n4-tile__icon">${ICONS[wo.source]}</span>
- <span class="n4-tile__name">${wo.label}</span>
- <span class="n4-tile__meta">${wo.no}</span>
- <span class="tag ${wo.statusClass}">${wo.statusLabel}</span>
- <span class="n4-tile__cta">${wo.id === id ? '✓ 当前查看' : '点击查看'}</span>
- </button>`
- ).join('')
- return wrap(
- `<div class="n4-zone">
- <div class="n4-head">
- <div class="n4-head__title">选择质检工单类型</div>
- <div class="n4-head__sub">虚线边框 = 可点击切换 · 实线 = 当前查看</div>
- </div>
- <div class="n4-grid">${tiles}</div>
- </div>`,
- active
- )
- }
- function renderN5(id) {
- const active = MOCK.workOrders.find((w) => w.id === id)
- const chips = MOCK.workOrders.map(
- (wo) => `
- <button type="button" class="n5-chip tab-btn ${wo.id === id ? 'is-active' : ''}"
- data-id="${wo.id}" data-source="${wo.source}" role="tab">
- <span class="n5-chip__dot"></span>
- <span class="n5-chip__body">
- <div class="n5-chip__type">${wo.label}</div>
- <div class="n5-chip__status">${wo.no} · ${wo.statusLabel}</div>
- </span>
- <span class="n5-chip__switch">${wo.id === id ? '查看中' : '切换'}</span>
- </button>`
- ).join('')
- return wrap(
- `<div class="n5-zone">
- <div class="n5-banner">
- 💡 本样本有 <strong>2 条</strong>质检工单(样本接收 + 生产过程),请点击下方切换查看
- </div>
- <div class="n5-strip">${chips}</div>
- </div>`,
- active
- )
- }
- function renderN6(id) {
- const active = MOCK.workOrders.find((w) => w.id === id)
- const nav = MOCK.workOrders.map(
- (wo) => `
- <button type="button" class="n6-nav__btn tab-btn ${wo.id === id ? 'is-active' : ''}"
- data-id="${wo.id}" data-source="${wo.source}" role="tab">
- <span class="n6-nav__type">${wo.label}</span>
- <span class="n6-nav__no">${wo.no}</span>
- <span class="tag ${wo.statusClass}" style="margin-top:4px;height:20px;padding:0 6px;font-size:10px">${wo.statusLabel}</span>
- </button>`
- ).join('')
- return wrap(
- `<div class="n6-layout">
- <nav class="n6-nav">
- <div class="n6-nav__label">工单列表</div>
- ${nav}
- </nav>
- <div class="n6-preview">
- <div class="n6-preview__label">当前选中</div>
- <div class="n6-preview__title">${active.label}</div>
- <div class="n6-preview__no">${active.no}</div>
- <span class="tag ${active.statusClass}">${active.statusLabel}</span>
- <div class="n6-preview__hint">← 点击左侧另一条工单可切换</div>
- </div>
- </div>`,
- active
- )
- }
- const VARIANTS = {
- n1: renderN1,
- n2: renderN2,
- n3: renderN3,
- n4: renderN4,
- n5: renderN5,
- n6: renderN6
- }
- const state = Object.fromEntries(Object.keys(VARIANTS).map((k) => [k, 'wo-reception']))
- function mount(key) {
- const el = document.getElementById(`block-${key}`)
- el.innerHTML = VARIANTS[key](state[key])
- el.querySelectorAll('[data-id]').forEach((btn) => {
- btn.addEventListener('click', () => {
- state[key] = btn.dataset.id
- mount(key)
- })
- })
- }
- Object.keys(VARIANTS).forEach(mount)
- </script>
- </body>
- </html>
|