zkxw/docs/panel-tab-demos/_demo-shell.js

/** 面板 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>
  `
}