zkxw/docs/my-material-usage-tab-demos/06-pill-with-hint.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>06 左对齐胶囊 + 引导提示 · 我的物料领用记录 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>
      .btn { height: 36px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 500; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: default; }
      .btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
    </style>
  </head>
  <body>
    <header class="demo-banner">
      <div>
        <h1><span class="demo-badge">06 左对齐胶囊 + 引导</span> 我的物料领用记录 · Tab 样式 Demo</h1>
        <p>保留胶囊风格但左对齐加大，上方加引导文案 · 渐进改良方案</p>
      </div>
      <div class="demo-banner__actions">
        <a href="index.html">← 选型索引</a>
        <a href="01-current-baseline.html">01 基线对比</a>
      </div>
    </header>

    <div class="page-wrap">
      <section class="panel" id="panel-root">
        <div class="panel-top"><h2>我的物料领用记录</h2></div>
        <div class="panel-tab-zone">
          <div class="tab-zone-06">
            <div class="tab-zone-06__hint">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 16V4m0 0L3 8m4-4l4 4"/><path d="M17 8v12m0 0l4-4m-4 4l-4-4"/></svg>
              <span>点击下方切换查看不同记录类型</span>
            </div>
            <nav class="tabs-06" role="tablist">
              <button type="button" class="tab-btn is-active" data-tab="usage" role="tab">领用记录</button>
              <button type="button" class="tab-btn" data-tab="consumption" role="tab">消耗明细</button>
            </nav>
          </div>
        </div>
        <div class="tab-panel is-active" data-panel="usage" id="content"></div>
      </section>
      <p class="style-note">
        <strong>渐进改良：</strong>在现有胶囊风格基础上左对齐、加大按钮尺寸，并增加一行引导提示。改动最小，适合不想大改布局的场景。
        <div class="pros-cons">
          <div class="pro">✓ 改动量小、与全站胶囊风格兼容、引导文案降低学习成本</div>
          <div class="con">✗ 引导文案可能显得冗余（用户熟悉后可考虑隐藏）</div>
        </div>
      </p>
    </div>

    <script src="_demo-shell.js"></script>
    <script>
      document.getElementById('content').innerHTML = mockContent('usage')
      initPanelTabs('panel-root')
    </script>
  </body>
</html>