423 lines
13 KiB
HTML
423 lines
13 KiB
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 Demo</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>
|
||
/* ── 共享：胶囊按钮内容（对齐现网 QcWorkOrderSampleGroup） ── */
|
||
.pill-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
min-height: 34px;
|
||
padding: 8px 16px;
|
||
border-radius: 10px;
|
||
font-size: 12px;
|
||
font-family: inherit;
|
||
color: #1e293b;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
transition:
|
||
background 0.15s,
|
||
color 0.15s,
|
||
border-color 0.15s,
|
||
box-shadow 0.15s;
|
||
}
|
||
|
||
.pill-btn:focus-visible {
|
||
outline: 2px solid #10b981;
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.pill-index {
|
||
flex-shrink: 0;
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 50%;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
background: #e2e8f0;
|
||
}
|
||
|
||
.pill-source {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 1px 6px;
|
||
border-radius: 4px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
background: #f1f5f9;
|
||
}
|
||
|
||
.pill-source--reception {
|
||
color: var(--reception);
|
||
background: var(--reception-bg);
|
||
}
|
||
|
||
.pill-source--production {
|
||
color: var(--production);
|
||
background: var(--production-bg);
|
||
}
|
||
|
||
.pill-source__dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: currentColor;
|
||
}
|
||
|
||
.pill-no {
|
||
font-family: ui-monospace, Menlo, monospace;
|
||
}
|
||
|
||
.pill-btn.is-active {
|
||
color: #fff;
|
||
background: var(--primary);
|
||
border-color: var(--primary);
|
||
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.28);
|
||
}
|
||
|
||
.pill-btn.is-active .pill-index {
|
||
color: #fff;
|
||
background: rgb(255 255 255 / 28%);
|
||
}
|
||
|
||
.pill-btn.is-active .pill-source,
|
||
.pill-btn.is-active .pill-source--reception,
|
||
.pill-btn.is-active .pill-source--production {
|
||
color: #fff;
|
||
background: rgb(255 255 255 / 22%);
|
||
}
|
||
|
||
.pill-btn.is-active .tag {
|
||
background: rgb(255 255 255 / 22%);
|
||
color: #fff;
|
||
border-color: rgb(255 255 255 / 35%);
|
||
}
|
||
|
||
.pill-btn:not(.is-active) .tag {
|
||
background: #f1f5f9;
|
||
color: #1e293b;
|
||
border-color: #e2e8f0;
|
||
}
|
||
|
||
/* ── A · 现网：轨道内连体 ── */
|
||
.grouped-zone {
|
||
padding: 8px 16px;
|
||
border-bottom: 1px solid var(--border);
|
||
background: #f8fafc;
|
||
}
|
||
|
||
.grouped-track {
|
||
display: inline-flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
padding: 6px;
|
||
background: linear-gradient(180deg, var(--primary-bg) 0%, #fff 100%);
|
||
border: 1px solid #d1fae5;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.grouped-track .pill-btn {
|
||
border: none;
|
||
border-radius: 8px;
|
||
background: transparent;
|
||
}
|
||
|
||
.grouped-track .pill-btn:hover:not(.is-active) {
|
||
background: #f1f5f9;
|
||
}
|
||
|
||
/* ── B/C/D · 独立胶囊 ── */
|
||
.indep-zone {
|
||
padding: 12px 16px;
|
||
border-bottom: 1px solid var(--border);
|
||
background: #f8fafc;
|
||
}
|
||
|
||
.indep-zone__hint {
|
||
margin-bottom: 10px;
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.indep-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
}
|
||
|
||
.indep-row--gap-md {
|
||
gap: 16px;
|
||
}
|
||
|
||
.indep-row--gap-lg {
|
||
gap: 24px;
|
||
}
|
||
|
||
.indep-row--gap-xl {
|
||
gap: 32px;
|
||
}
|
||
|
||
/* 每个胶囊独立边框 + 白底 */
|
||
.indep-row .pill-btn {
|
||
border: 2px solid #e2e8f0;
|
||
background: #fff;
|
||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
|
||
}
|
||
|
||
.indep-row .pill-btn:hover:not(.is-active) {
|
||
border-color: #cbd5e1;
|
||
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
|
||
}
|
||
|
||
/* 未选中时按来源保留边框色 */
|
||
.indep-row .pill-btn[data-source='reception']:not(.is-active) {
|
||
border-color: var(--reception-border);
|
||
}
|
||
|
||
.indep-row .pill-btn[data-source='production']:not(.is-active) {
|
||
border-color: var(--production-border);
|
||
}
|
||
|
||
.indep-row .pill-btn[data-source='reception']:not(.is-active):hover {
|
||
border-color: var(--reception);
|
||
background: var(--reception-bg);
|
||
}
|
||
|
||
.indep-row .pill-btn[data-source='production']:not(.is-active):hover {
|
||
border-color: var(--production);
|
||
background: var(--production-bg);
|
||
}
|
||
|
||
/* D · 独立 + 更大胶囊 */
|
||
.indep-row--large .pill-btn {
|
||
min-height: 40px;
|
||
padding: 10px 18px;
|
||
font-size: 13px;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.indep-row--large .pill-source {
|
||
font-size: 12px;
|
||
padding: 2px 8px;
|
||
}
|
||
|
||
.gap-label {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
height: 22px;
|
||
padding: 0 8px;
|
||
margin-left: 8px;
|
||
border-radius: 6px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
background: #f1f5f9;
|
||
color: var(--text-muted);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header class="demo-banner">
|
||
<div>
|
||
<h1>独立胶囊 Tab · 对比 Demo</h1>
|
||
<p>
|
||
在现网胶囊内容结构不变的前提下，将每个 Tab 从<strong>轨道连体</strong>改为<strong>独立胶囊</strong>，并加大间距。
|
||
下方 A 为现网对照，B/C/D 为独立方案（间距 16 / 24 / 32px，均可点击切换）。
|
||
</p>
|
||
</div>
|
||
<div class="demo-banner__actions">
|
||
<a class="demo-link" href="index.html">← 索引</a>
|
||
<a class="demo-link" href="compare-all-v2.html">第二组方案</a>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="page-container">
|
||
<div class="compare-stack">
|
||
<section class="compare-block">
|
||
<div class="compare-block__label">
|
||
<h2>
|
||
<span class="variant-tag variant-tag--baseline">A</span>
|
||
现网 · 轨道内连体（对照）
|
||
</h2>
|
||
<p>多个 Tab 包在同一 <code>panel-pill-tabs__track</code> 绿底容器内，胶囊之间 gap 10px，视觉上像一组。</p>
|
||
</div>
|
||
<div class="compare-block__body" id="block-a"></div>
|
||
</section>
|
||
|
||
<section class="compare-block">
|
||
<div class="compare-block__label">
|
||
<h2>
|
||
<span class="variant-tag variant-tag--rec">推荐</span>
|
||
<span class="variant-tag">B</span>
|
||
独立胶囊 · 间距 16px
|
||
</h2>
|
||
<p>去掉外层轨道，每个 Tab 自带白底 + 2px 边框 + 轻阴影；未选中按来源保留绿/琥珀边框色。</p>
|
||
</div>
|
||
<div class="compare-block__body" id="block-b"></div>
|
||
</section>
|
||
|
||
<section class="compare-block">
|
||
<div class="compare-block__label">
|
||
<h2><span class="variant-tag">C</span> 独立胶囊 · 间距 24px</h2>
|
||
<p>同 B，胶囊间距加大到 24px，分离感更强。</p>
|
||
</div>
|
||
<div class="compare-block__body" id="block-c"></div>
|
||
</section>
|
||
|
||
<section class="compare-block">
|
||
<div class="compare-block__label">
|
||
<h2><span class="variant-tag">D</span> 独立胶囊 · 间距 32px + 略放大</h2>
|
||
<p>间距 32px，胶囊 min-height 40px、圆角 12px，点击区域更大。</p>
|
||
</div>
|
||
<div class="compare-block__body" id="block-d"></div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const MOCK = {
|
||
sampleCode: 'YB-2025-0618-0042',
|
||
subtitle: '张三 · 间充质干细胞 · 5×10⁶/支',
|
||
workOrders: [
|
||
{
|
||
id: 'wo-reception',
|
||
source: 'reception',
|
||
label: '样本接收',
|
||
no: 'QC-IN-20250618-0012',
|
||
statusLabel: '已完成',
|
||
statusClass: 'tag--success'
|
||
},
|
||
{
|
||
id: 'wo-production',
|
||
source: 'production',
|
||
label: '生产过程',
|
||
no: 'QC-IN-20250620-0038',
|
||
statusLabel: '已配置',
|
||
statusClass: 'tag--warning'
|
||
}
|
||
]
|
||
}
|
||
|
||
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 pillBtn(wo, i, activeId) {
|
||
const active = wo.id === activeId
|
||
return `
|
||
<button type="button" class="pill-btn tab-btn ${active ? 'is-active' : ''}"
|
||
data-id="${wo.id}" data-source="${wo.source}" role="tab" aria-selected="${active}">
|
||
<span class="pill-index">${i + 1}</span>
|
||
<span class="pill-source pill-source--${wo.source}">
|
||
<span class="pill-source__dot"></span>${wo.label}
|
||
</span>
|
||
<span class="pill-no">${wo.no}</span>
|
||
<span class="tag ${wo.statusClass}">${wo.statusLabel}</span>
|
||
</button>`
|
||
}
|
||
|
||
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__tasks">▼ 质检任务列表（${wo.label}）</div>
|
||
</div>`
|
||
}
|
||
|
||
function wrap(tabsHtml, activeId) {
|
||
const active = MOCK.workOrders.find((w) => w.id === activeId)
|
||
return `
|
||
<article class="qc-sample-row">
|
||
${ctxHeader()}
|
||
${tabsHtml}
|
||
${cardPlaceholder(active)}
|
||
</article>`
|
||
}
|
||
|
||
function renderGrouped(activeId) {
|
||
const pills = MOCK.workOrders.map((wo, i) => pillBtn(wo, i, activeId)).join('')
|
||
return wrap(
|
||
`<div class="grouped-zone">
|
||
<div class="grouped-track" role="tablist" aria-label="同样本质检工单">${pills}</div>
|
||
</div>`,
|
||
activeId
|
||
)
|
||
}
|
||
|
||
function renderIndependent(activeId, gapClass, extraRowClass, hint) {
|
||
const pills = MOCK.workOrders.map((wo, i) => pillBtn(wo, i, activeId)).join('')
|
||
const gapLabel = gapClass.replace('indep-row--gap-', '') + 'px'
|
||
return wrap(
|
||
`<div class="indep-zone">
|
||
${hint ? `<div class="indep-zone__hint">${hint}</div>` : ''}
|
||
<div class="indep-row ${gapClass} ${extraRowClass || ''}" role="tablist" aria-label="同样本质检工单">
|
||
${pills}
|
||
</div>
|
||
</div>`,
|
||
activeId
|
||
)
|
||
}
|
||
|
||
const BLOCKS = {
|
||
a: { render: (id) => renderGrouped(id), default: 'wo-reception' },
|
||
b: {
|
||
render: (id) =>
|
||
renderIndependent(id, 'indep-row--gap-md', '', '每个胶囊独立展示，间距 16px'),
|
||
default: 'wo-reception'
|
||
},
|
||
c: {
|
||
render: (id) =>
|
||
renderIndependent(id, 'indep-row--gap-lg', '', '每个胶囊独立展示，间距 24px'),
|
||
default: 'wo-reception'
|
||
},
|
||
d: {
|
||
render: (id) =>
|
||
renderIndependent(
|
||
id,
|
||
'indep-row--gap-xl',
|
||
'indep-row--large',
|
||
'每个胶囊独立展示，间距 32px，尺寸略放大'
|
||
),
|
||
default: 'wo-reception'
|
||
}
|
||
}
|
||
|
||
const state = Object.fromEntries(Object.entries(BLOCKS).map(([k, v]) => [k, v.default]))
|
||
|
||
function mount(key) {
|
||
const el = document.getElementById(`block-${key}`)
|
||
el.innerHTML = BLOCKS[key].render(state[key])
|
||
el.querySelectorAll('[data-id]').forEach((btn) => {
|
||
btn.addEventListener('click', () => {
|
||
state[key] = btn.dataset.id
|
||
mount(key)
|
||
})
|
||
})
|
||
}
|
||
|
||
Object.keys(BLOCKS).forEach(mount)
|
||
</script>
|
||
</body>
|
||
</html>
|