110 lines
3.8 KiB
JavaScript
110 lines
3.8 KiB
JavaScript
/** 面板 Tab Demo 通用交互 */
|
||
function initPanelTabs(rootId) {
|
||
const root = document.getElementById(rootId)
|
||
if (!root) return
|
||
|
||
const tabBtns = root.querySelectorAll('[data-tab]')
|
||
const panels = root.querySelectorAll('[data-panel]')
|
||
const track = root.querySelector('.tabs-06')
|
||
const singleContent = root.querySelector('#content')
|
||
|
||
function activate(name, index) {
|
||
tabBtns.forEach((btn) => {
|
||
btn.classList.toggle('is-active', btn.dataset.tab === name)
|
||
})
|
||
panels.forEach((panel) => {
|
||
panel.classList.toggle('is-active', panel.dataset.panel === name)
|
||
})
|
||
if (track) {
|
||
track.dataset.active = String(index)
|
||
}
|
||
if (singleContent && typeof mockContent === 'function') {
|
||
singleContent.innerHTML = mockContent(name)
|
||
}
|
||
}
|
||
|
||
tabBtns.forEach((btn, index) => {
|
||
btn.addEventListener('click', () => activate(btn.dataset.tab, index))
|
||
})
|
||
}
|
||
|
||
function buildBanner(currentFile, styleName, styleDesc) {
|
||
const files = [
|
||
{ id: '01', file: '01-underline-default.html', label: '01 下划线' },
|
||
{ id: '02', file: '02-pill-segmented.html', label: '02 胶囊分段' },
|
||
{ id: '03', file: '03-card-tabs.html', label: '03 卡片 Tab' },
|
||
{ id: '04', file: '04-icon-blocks.html', label: '04 图标块' },
|
||
{ id: '05', file: '05-bar-accent.html', label: '05 竖条强调' },
|
||
{ id: '06', file: '06-full-track.html', label: '06 全宽滑轨' },
|
||
{ id: '07', file: '07-minimal-dot.html', label: '07 极简圆点' }
|
||
]
|
||
|
||
const links = files
|
||
.map((f) => {
|
||
const current = f.file === currentFile ? ' is-current' : ''
|
||
return `<a href="${f.file}" class="${current.trim()}">${f.label}</a>`
|
||
})
|
||
.join('')
|
||
|
||
return `
|
||
<header class="demo-banner">
|
||
<div>
|
||
<h1><span class="demo-badge">${styleName}</span> 质检物料库 · Tab 样式 Demo</h1>
|
||
<p>${styleDesc} · 点击下方 Tab 可切换模拟内容</p>
|
||
</div>
|
||
<div class="demo-banner__actions">
|
||
<a href="index.html">← 选型索引</a>
|
||
${links}
|
||
</div>
|
||
</header>
|
||
`
|
||
}
|
||
|
||
function mockContent(tabName) {
|
||
const labels = {
|
||
list: '物料列表',
|
||
usage: '变动记录',
|
||
stockCheck: '库存盘点'
|
||
}
|
||
return `
|
||
<div class="mock-content">
|
||
<div class="filter-block">
|
||
<div class="filter-grid">
|
||
<div class="filter-item">
|
||
<label>关键词</label>
|
||
<div class="fake-input">物料编码/名称</div>
|
||
</div>
|
||
<div class="filter-item">
|
||
<label>状态</label>
|
||
<div class="fake-input">全部</div>
|
||
</div>
|
||
<div class="filter-item">
|
||
<label>时间范围</label>
|
||
<div class="fake-input">开始日期 — 结束日期</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="list-toolbar">
|
||
<span class="sel-hint">已选 <strong>0</strong> 项</span>
|
||
<button class="btn btn-primary">入库</button>
|
||
<button class="btn">批量入库</button>
|
||
<button class="btn">导出</button>
|
||
</div>
|
||
<div class="list-body">
|
||
<div class="fake-table">
|
||
<div class="fake-table-head">
|
||
<span>序号</span><span>入库编号</span><span>物料名称</span><span>批号</span><span>剩余数量</span>
|
||
</div>
|
||
<div class="fake-table-row">
|
||
<span>1</span><span>RK-20260601-001</span><span>DMEM培养基</span><span>BN20260501</span><span>20 瓶</span>
|
||
</div>
|
||
<div class="fake-table-row">
|
||
<span>2</span><span>RK-20260601-002</span><span>胎牛血清</span><span>BN20260415</span><span>6 瓶</span>
|
||
</div>
|
||
</div>
|
||
<p style="margin:12px 0 0;font-size:12px;color:var(--text-muted)">当前 Tab：<strong>${labels[tabName] || tabName}</strong>（示意内容相同，仅 Tab 样式不同）</p>
|
||
</div>
|
||
</div>
|
||
`
|
||
}
|