OnebotCatalog/web/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OneBot数模下载</title>
<link rel="stylesheet" href="style.css?v=12">
</head>
<body>
<header>
  <div class="brand"><img src="OneBot-logo.png" class="logo" alt="OneBot"> OneBot数模下载 <span class="brand-en">ONEBOT Catalog</span>
  </div>
  <div class="toolbar">
    <input id="searchBox" type="text" placeholder="搜索型号 / 关键词 / 拼音">
    <button id="btnSearch">搜索</button>
    <button id="btnLang">EN</button>
    <button id="btnCart" class="cart-badge">清单 (0)</button>
  </div>
</header>

<main>
  <nav id="tree" class="tree"></nav>
  <div id="split1" class="split" title="拖拽调整宽度"></div>

  <!-- 首页：全部大类的系列缩略图, 一页铺开 (左树默认展开, 底部箭头可收起) -->
  <section id="home" class="home">
    <div class="sf-head">
      <h2 id="homeTitle"></h2>
      <span id="homeCount" class="n"></span>
      <span class="grow"></span>
      <span class="hint" id="homeHint"></span>
    </div>
    <div id="matrix"></div>
  </section>

  <section id="params" class="params hidden">
    <div id="modelTitle" class="model-title">请选择产品系列</div>
    <!-- 零件号实时条: 边选边拼, 已确定片段高亮 / 待定片段虚化 -->
    <div id="skuBar" class="sku-bar">
      <div class="sku-label" id="skuLabel">零件号 Part Number</div>
      <div class="sku-code" id="skuCode"></div>
      <div class="sku-prog"><i id="skuProg"></i></div>
      <div class="sku-hint" id="skuHint"></div>
    </div>
    <div id="paramPanel"></div>
  </section>
  <div id="split2" class="split hidden" title="拖拽调整宽度"></div>

  <section id="content" class="content hidden">
    <div class="tabs" id="tabsBar">
      <button class="tab active" data-tab="3d">3D / 尺寸图</button>
      <button class="tab" data-tab="table">参数表</button>
      <button class="tab" data-tab="search">搜索结果</button>
      <button class="tab" data-tab="cross">平替对照</button>
      <span class="tabs-spacer"></span>
      <div id="actions">
        <a id="btnDownload" class="btn primary hidden" download>下载 STEP</a>
        <select id="btnGenFmt" class="hidden" title="下载格式 (仅非标档位在线生成)">
          <option value="zip">全格式 zip</option>
          <option value="step">STEP</option>
          <option value="iges">IGES</option>
        </select>
        <a id="btnDatasheet" class="btn hidden">下载 PDF</a>
        <button id="btnAddCart" class="btn hidden">加入清单</button>
      </div>
    </div>
    <div class="content-back">
      <button id="btnBackHome" class="btn">← 返回系列总览</button>
    </div>
    <div id="tab-3d" class="tab-body">
      <div class="hsplit">
        <div id="viewer3dBox" class="hsplit-left">
          <iframe id="viewerFrame" class="hidden" allowfullscreen></iframe>
          <canvas id="viewer3d" width="900" height="640" class="hidden"></canvas>
          <p id="viewer3dHint" class="hint">选型完成后显示 3D 外形 (拖拽旋转 / 滚轮缩放)</p>
        </div>
        <div id="split3" class="split v" title="拖拽调整大小"></div>
        <div id="dimBox" class="hsplit-right">
          <img id="dimImage" alt="尺寸图" class="hidden">
          <p id="dimHint" class="hint">选型完成后显示尺寸图</p>
          <div id="manualWrap"></div>
        </div>
      </div>
    </div>
    <div id="tab-table" class="tab-body hidden">
      <div class="range-row" id="rangeRow"></div>
      <div class="table-scroll"><table id="variantTable"><thead></thead><tbody></tbody></table></div>
    </div>
    <div id="tab-search" class="tab-body hidden">
      <div class="table-scroll"><table id="searchTable"><thead><tr><th>型号</th><th>系列</th><th>STEP</th></tr></thead><tbody></tbody></table></div>
    </div>
    <div id="tab-cross" class="tab-body hidden">
      <div class="range-row"><span>品牌筛选: </span><select id="crossBrand"></select>
        <span class="hint" style="margin-left:12px;">只显示当前型号的平替数据; 点击行跳转</span></div>
      <div class="table-scroll"><table id="crossTable"><thead><tr><th>品牌</th><th>竞品型号</th><th>我方型号</th><th>备注</th></tr></thead><tbody></tbody></table></div>
    </div>
  </section>
</main>

<!-- 底部信息栏: 左侧 = 侧边栏折叠按钮 + 状态文字, 右侧 = 服务器状态圆球 (绿=就绪/红=故障) -->
<footer id="status">
  <button id="btnTreeToggle" class="tree-toggle" title="收起系列栏">◀ 收起系列栏</button>
  <span id="statusMsg">加载中...</span>
  <div id="srvStatus" class="srv-status" title="服务检测中…">
    <span class="dot"></span>
    <span id="srvStatusText" class="text">服务器状态</span>
  </div>
</footer>

<!-- 购物车抽屉 (淘宝式清单, 2026-08-24; 刷新页面才清空) -->
<div id="cartOverlay" class="cart-overlay hidden"></div>
<div id="cartPanel" class="cart-panel hidden">
  <div class="cart-head">
    <span id="cartTitle">我的清单</span>
    <button id="cartClose" class="cart-close">✕</button>
  </div>
  <div id="cartList" class="cart-list"></div>
  <div class="cart-foot">
    <button id="cartClear" class="btn">清空</button>
    <button id="cartDownload" class="btn primary">下载全部 (zip + BOM)</button>
  </div>
</div>

<script src="libs/jszip.min.js?v=1"></script>
<script src="config.js?v=1"></script>
<script src="app.js?v=19"></script>
</body>
</html>