v2.0: 4 分类真实数据替换 + 手册彩色重做 + 网页版改版

数据 (定位销/勾销缸/翻转缸/电缸 → Univer 真实数模)
- 新增 19 系列 1124 型号 (PIN 303 / HOK 73 / ROT 741 / ELEC 9)
- 命名规则取自官方图册 CODIFICATION KEY (pdftotext 提取), 非推测
- 解析用「官方值域校验 + 左对齐 DFS 填空」, 可处理省略空位的型号
- 参数组合唯一性门禁: 1124 型号全部通过 (避免选型静默错配)
- 占位/测试文件 (如 USP50J_0___K0 销径为空) 在解析阶段丢弃
- catalog.json 分类系列表同步; crossref 失效引用清理

手册页
- 全部 42 系列改为彩色 (此前脚本误写死 csGRAY 转灰度), 346 页
- 修复 UCBT 附图只有 1 页 (筛选条件写死 UCBT40 且漏 CLAMPING ARMS)
- gen-pending-series.py 改为扫描 manual 目录自动生成附件清单,
  避免重跑脚本把多页附件覆盖回单页

网页版
- 首页改为系列缩略图网格 (40 张: 27 张真实产品图 + 13 张占位图),
  按大类分组; 图放 web/series/<系列码>.webp, 覆盖同名文件即可替换
- 左侧树改手风琴 (默认收起, 一次展开一个), 父级带 SVG 图标,
  悬停放大动画, 按钮间距随高度均匀分布; 可收起为图标窄条
- 修复分隔条被拖出容器后无法找回 (上限改为容器感知 + resize 重夹取
  + 双击复位); 同时阻止图片原生拖拽
- 购物车打包改取 .step.gz 副档 (传输量降至约 1/4.5), 无副档自动回退
- 修复搜索到型号后点结果内容区空白 (switchTab('dim') 已失效)
- OpcPackage 超大包 (>1.5GB) 改走临时文件, 绕过 MemoryStream 2GB 上限

工具
- gen-pending-series/manual, copy-pending-step, gen-step-gz,
  gen-series-thumbs, scan-pending-series 等 11 个脚本

Co-Authored-By: Claude Code <noreply@anthropic.com>

web/app.js

@@ -14,7 +14,10 @@
     cart: [],              // 购物车 (2026-08-24; 刷新页面才清空, 与选型状态解耦)
     ranges: {},            // 数值参数范围 {code: [min|null, max|null]}
     searchIndex: [],       // [{series, variant, code, text}]
-    searchResult: []
+    searchResult: [],
+    onHome: true,          // 是否停留在首页缩略图 (false = 选型页)
+    treeCollapsed: false,  // 左树侧边栏默认展开 (底部箭头按钮可收起/展开)
+    expandedCat: null      // 左树当前展开的大类 (手风琴: 同时只展开一个)
   };
 
   // ---------- 工具 ----------
@@ -234,11 +237,14 @@
       .then(function (r) { if (!r.ok) throw new Error('HTTP ' + r.status); return r.json(); })
       .then(function (cat) {
         state.catalog = cat;
-        $('ver').textContent = cat.catalogName + ' v' + cat.catalogVersion;
+        if ($('ver')) $('ver').textContent = '';   // 版本标签不显示
         buildSearchIndex();
         renderTree();
+        renderHome();   // 首屏: 全部大类的系列缩略图铺在一页
         renderCrossRef();
-        setStatus(t('目录加载完成，请选择产品系列', 'Catalog loaded, select a series'));
+        applyTreeCollapsed(state.treeCollapsed);   // 左树默认折叠, 底部按钮可见
+        setStatus(t('目录加载完成，点击缩略图或左侧系列开始选型',
+          'Catalog loaded - click a thumbnail or pick a series'));
         if (location.search.indexOf('selftest=1') >= 0) runSelfTest();
       })
       .catch(function (e) {
@@ -248,29 +254,252 @@
   }
 
   // ---------- 目录树 ----------
+  // 大类图标 (内联 SVG, 24x24 线性, stroke=currentColor → 随主题色/选中态自动变色)
+  var CAT_ICONS = {
+    AUT:  '<rect x="2.5" y="7" width="12.5" height="10" rx="2"/><path d="M15 12h4.5"/><path d="M19.5 9.5v5"/><path d="M5 10.5v3"/>',
+    MIN:  '<rect x="7" y="8.5" width="9" height="7" rx="1.5"/><path d="M16 12h3"/><path d="M5 10.5v3"/>',
+    ALU:  '<rect x="4" y="8" width="11.5" height="8" rx="1.5"/><path d="M15.5 11h4"/><path d="M7.5 8v8M10.5 8v8"/>',
+    CLM:  '<path d="M4 5v6.5A3.5 3.5 0 0 0 7.5 15H11"/><path d="M20 19v-6.5A3.5 3.5 0 0 0 16.5 9H13"/><path d="M11 15V9l3 3z"/><path d="M13 9V15l-3-3z"/>',
+    PIN:  '<path d="M12 3v9"/><path d="M8 12h8l-4 8z"/><path d="M6.5 5.5h11"/>',
+    HOK:  '<path d="M7 4v7.5a5 5 0 0 0 10 0V9"/><path d="M17 9l-2.2-2.2M17 9l2.2-2.2"/>',
+    GRP:  '<path d="M6 4v5.5A3.5 3.5 0 0 0 9.5 13H12"/><path d="M18 4v5.5A3.5 3.5 0 0 1 14.5 13H12"/><path d="M9 16.5h6"/><path d="M12 13v8"/>',
+    ROT:  '<path d="M20 12a8 7.5 0 1 1-2.4-5.4"/><path d="M20.5 3.5v4h-4"/>',
+    ELEC: '<rect x="3.5" y="8.5" width="10" height="7" rx="1.5"/><path d="M13.5 12h7"/><path d="M10 3.5L7 9h3.5l-2 5.5"/>',
+  };
+
+  function catIcon(code) {
+    var svg = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" ' +
+      'stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">' +
+      (CAT_ICONS[code] || CAT_ICONS.AUT) + '</svg>';
+    var sp = document.createElement('span');
+    sp.className = 'cat-ico';
+    sp.innerHTML = svg;      // 常量字符串, 无注入风险
+    return sp;
+  }
+
   function renderTree() {
     var tree = $('tree');
     tree.innerHTML = '';
+    tree.classList.toggle('rail', !!state.treeCollapsed);   // 收起态: 只显示图标
+    // 内层容器: 撑满侧栏高度并 space-evenly 均匀留白 (按钮本身不被拉伸)
+    var inner = document.createElement('div');
+    inner.className = 'tree-inner';
+    tree.appendChild(inner);
     state.catalog.categories.forEach(function (cat) {
+      var isOpen = state.expandedCat === cat.code;
+
+      // 父级标题行: 图标 + 文字 (+ 展开箭头); 收起态只留图标
       var catDiv = document.createElement('div');
-      catDiv.className = 'cat';
-      catDiv.textContent = t(cat.nameZh, cat.nameEn);
-      tree.appendChild(catDiv);
+      catDiv.className = 'cat' + (isOpen ? ' open' : '');
+      catDiv.title = t(cat.nameZh, cat.nameEn);
+      catDiv.appendChild(catIcon(cat.code));
+      var tspan = document.createElement('span');
+      tspan.className = 'cat-name';
+      tspan.textContent = t(cat.nameZh, cat.nameEn);
+      catDiv.appendChild(tspan);
+      var arrow = document.createElement('span');
+      arrow.className = 'cat-arrow';
+      arrow.textContent = isOpen ? '▾' : '▸';
+      catDiv.appendChild(arrow);
+
+      // 点父级: 展开本类 + 自动收起其他 (手风琴), 右侧同步只显示该大类
+      catDiv.onclick = function () {
+        if (state.expandedCat === cat.code) {
+          state.expandedCat = null;
+          if (state.onHome) renderHome();
+        } else {
+          state.expandedCat = cat.code;
+          if (!state.onHome) showHome();
+          renderHome(cat.code);
+        }
+        renderTree();   // 图标窄条模式下只切右侧, 不改变宽度 (由底部按钮控制)
+      };
+      inner.appendChild(catDiv);
+
+      // 子级 (系列); 默认收起, 仅展开当前父级
+      var kids = document.createElement('div');
+      kids.className = 'cat-kids' + (isOpen ? '' : ' hidden');
       cat.series.forEach(function (code) {
         var s = state.catalog.series.filter(function (x) { return x.code === code; })[0];
         if (!s) return;
         var div = document.createElement('div');
         div.className = 'series';
         div.textContent = t(s.nameZh, s.nameEn);
-        div.onclick = function () {
+        if (state.series === s) div.classList.add('active');
+        div.onclick = function (ev) {
+          ev.stopPropagation();
           var all = tree.querySelectorAll('.series');
           for (var i = 0; i < all.length; i++) all[i].classList.remove('active');
           div.classList.add('active');
           selectSeries(s);
         };
-        tree.appendChild(div);
+        kids.appendChild(div);
+      });
+      inner.appendChild(kids);
+    });
+  }
+
+  // ---------- 首页：系列缩略图网格 ----------
+  // 图放在 web/series/<系列码>.webp (真图覆盖同名文件即可, 无需改代码);
+  // 后补的图若是 png/jpg, 由 onerror 依次回退。
+  var THUMB_EXTS = ['webp', 'png', 'jpg', 'jpeg', 'svg'];
+
+  function thumbImg(code) {
+    var img = document.createElement('img');
+    img.alt = code;
+    img.loading = 'lazy';
+    img.decoding = 'async';
+    var idx = 0;
+    img.onerror = function () {
+      idx++;
+      // 依次尝试其他扩展名; 全失败则撤掉 img (留白色图位, 不显示裂图)
+      if (idx < THUMB_EXTS.length) img.src = 'series/' + code + '.' + THUMB_EXTS[idx];
+      else if (img.parentNode) img.parentNode.removeChild(img);
+    };
+    img.src = 'series/' + code + '.' + THUMB_EXTS[0];
+    return img;
+  }
+
+  // 渲染一张系列卡片 (首页所有大类共用)
+  function makeSeriesCard(code) {
+    var s = state.catalog.series.filter(function (x) { return x.code === code; })[0];
+    if (!s) return null;
+    var card = document.createElement('div');
+    card.className = 'sf-card' + (state.series === s ? ' on' : '');
+
+    var fig = document.createElement('div');
+    fig.className = 'sf-fig';
+    fig.appendChild(thumbImg(code));
+    card.appendChild(fig);
+
+    var codeEl = document.createElement('div');
+    codeEl.className = 'sf-code';
+    codeEl.textContent = code;
+    card.appendChild(codeEl);
+
+    var nameEl = document.createElement('div');
+    nameEl.className = 'sf-name';
+    nameEl.textContent = t(s.nameZh, s.nameEn);
+    nameEl.title = t(s.nameZh, s.nameEn);
+    card.appendChild(nameEl);
+
+    card.onclick = function () {
+      // selectSeries 不负责树高亮与视图切换 (既有契约), 由这里补齐
+      var all = $('tree').querySelectorAll('.series');
+      for (var i = 0; i < all.length; i++) all[i].classList.remove('active');
+      var nm = t(s.nameZh, s.nameEn);
+      for (var j = 0; j < all.length; j++) {
+        if (all[j].textContent === nm) { all[j].classList.add('active'); break; }
+      }
+      selectSeries(s);
+    };
+    return card;
+  }
+
+  // 首页: 系列缩略图。catCode 为空 → 全部大类分组铺开; 指定大类 → 只显示该大类
+  function renderHome(catCode) {
+    if (!state.catalog) return;
+    var all = state.catalog.categories;
+    var cats = catCode
+      ? all.filter(function (c) { return c.code === catCode; })
+      : all;
+    if (!cats.length) cats = all;
+
+    var nSeries = 0, nModels = 0;
+    cats.forEach(function (c) {
+      c.series.forEach(function (code) {
+        var s = state.catalog.series.filter(function (x) { return x.code === code; })[0];
+        if (!s) return;
+        nSeries++;
+        nModels += (s.variants || []).length;
       });
     });
+    if (catCode && cats.length) {
+      $('homeTitle').textContent = t(cats[0].nameZh, cats[0].nameEn);
+      $('homeCount').textContent = nSeries + t(' 系列 · ', ' series · ') +
+        nModels + t(' 型号', ' models');
+    } else {
+      $('homeTitle').textContent = t('全部产品', 'All Products');
+      $('homeCount').textContent = cats.length + t(' 大类 · ', ' categories · ') +
+        nSeries + t(' 系列 · ', ' series · ') + nModels + t(' 型号', ' models');
+    }
+    $('homeHint').textContent = t('点击缩略图进入选型', 'Click a thumbnail to configure');
+
+    var box = $('matrix');
+    box.innerHTML = '';
+    cats.forEach(function (cat) {
+      var cards = [];
+      cat.series.forEach(function (code) {
+        var c = makeSeriesCard(code);
+        if (c) cards.push(c);
+      });
+      if (!cards.length) return;
+
+      var sec = document.createElement('div');
+      sec.className = 'home-sec';
+
+      // 只显示单个大类时不再重复标题 (顶栏已有), 多类分组时保留分组标题
+      if (!catCode) {
+        var head = document.createElement('div');
+        head.className = 'home-sec-head';
+        var h3 = document.createElement('h3');
+        h3.textContent = t(cat.nameZh, cat.nameEn);
+        head.appendChild(h3);
+        var cnt = document.createElement('span');
+        cnt.className = 'n';
+        cnt.textContent = cards.length + t(' 个系列', ' series');
+        head.appendChild(cnt);
+        sec.appendChild(head);
+      }
+
+      var grid = document.createElement('div');
+      grid.className = 'sf-grid';
+      cards.forEach(function (c) { grid.appendChild(c); });
+      sec.appendChild(grid);
+      box.appendChild(sec);
+    });
+  }
+
+  // 首页 ↔ 选型页 切换。左树的显隐只由折叠状态决定 (首页也能展开浏览), 与视图无关。
+  function showHome() {
+    state.onHome = true;
+    $('home').classList.remove('hidden');
+    $('params').classList.add('hidden');
+    $('content').classList.add('hidden');
+    $('split2').classList.add('hidden');
+    applyTreeCollapsed(state.treeCollapsed);
+  }
+  function hideHome() {
+    state.onHome = false;
+    $('home').classList.add('hidden');
+    $('params').classList.remove('hidden');
+    $('content').classList.remove('hidden');
+    $('split2').classList.remove('hidden');
+    applyTreeCollapsed(state.treeCollapsed);
+  }
+
+  // 侧边栏折叠/展开 (默认折叠; 底部按钮切换)
+  // 侧边栏收起/展开。收起 = 窄条只留图标 (rail); 展开 = 图标 + 文字
+  function applyTreeCollapsed(collapsed) {
+    state.treeCollapsed = collapsed;
+    var tree = $('tree');
+    if (collapsed) {
+      tree.classList.add('rail');     // 不隐藏, 变成图标窄条 (点图标仍可切大类)
+      $('split1').classList.add('hidden');
+    } else {
+      tree.classList.remove('rail');
+      $('split1').classList.remove('hidden');
+    }
+    var b = $('btnTreeToggle');
+    if (!b) return;
+    b.classList.remove('hidden');
+    // 展开时显示左箭头 (点了往左收起); 收起时显示右箭头 (点了往右展开)
+    b.textContent = collapsed
+      ? t('▶ 展开', '▶ Show')
+      : t('◀ 收起', '◀ Hide');
+    b.title = collapsed
+      ? t('展开系列栏 (显示文字)', 'Expand series panel')
+      : t('收起为图标栏', 'Collapse to icon rail');
   }
 
   // ---------- 选型 ----------
@@ -279,6 +508,7 @@
     state.sel = {};
     state.ranges = {};
     state.tableFilter = {};   // 换系列重置参数表列筛选
+    hideHome();               // 离开首页缩略图, 显示选型面板
     var panel = $('paramPanel');
     panel.innerHTML = '';
     s.parameters.forEach(function (p) {
@@ -356,6 +586,7 @@
       im.className = 'manual-img';
       im.src = a.path;
       im.alt = a.path;
+      im.draggable = false;      // 阻止原生图片拖拽 (见下方全局 dragstart 拦截)
       mw.appendChild(cap);
       mw.appendChild(im);
     });
@@ -735,7 +966,7 @@
         state.sel = {};
         it.series.parameters.forEach(function (p) { state.sel[p.code] = it.variant.params[p.code]; });
         refreshOptions();
-        switchTab('dim');
+        switchTab('3d');   // 尺寸图已并入 3D 页 (原为 'dim', 会导致四个面板全被隐藏)
       };
       tbody.appendChild(tr);
     });
@@ -909,6 +1140,34 @@
     return (window.GEN_CONFIG && window.GEN_CONFIG.api) ? window.GEN_CONFIG.api.replace(/\/+$/, '') : '';
   }
 
+  // 数模取用: 优先取 .step.gz 压缩副档 (发布时预生成), 浏览器端解压 —
+  // 购物车打包从"逐个下载原始大文件"变为约 1/4.5 传输量。
+  // 无 gz 副档时回退原始文件, 老部署目录不受影响。
+  // 浏览器不支持 DecompressionStream (旧 Edge/Safari) 时同样回退原始文件。
+  function canGunzip() {
+    return typeof DecompressionStream === 'function';
+  }
+
+  async function fetchStepAsset(stepPath) {
+    if (canGunzip()) {
+      try {
+        var gzResp = await fetch(stepPath + '.gz');
+        if (gzResp.ok && gzResp.body) {
+          // 防"gz 请求被 SPA 回退成 index.html": 校验 gzip 魔数 0x1f 0x8b
+          var head = new Uint8Array(await gzResp.clone().arrayBuffer());
+          if (head.length > 2 && head[0] === 0x1f && head[1] === 0x8b) {
+            var ds = new DecompressionStream('gzip');
+            var stream = gzResp.body.pipeThrough(ds);
+            return await new Response(stream).blob();
+          }
+        }
+      } catch (e) { /* 回退原始文件 */ }
+    }
+    var resp = await fetch(stepPath);
+    if (!resp.ok) throw new Error('HTTP ' + resp.status);
+    return await resp.blob();
+  }
+
   function triggerDownload(url, name) {
     var a = document.createElement('a');
     a.href = url;
@@ -1087,9 +1346,7 @@
         if (used[name]) name = it.modelCode + '_' + it.seriesCode + ext;   // 重名冲突加系列码
         used[name] = true;
         try {
-          var resp = await fetch(it.stepPath);
-          if (!resp.ok) throw new Error('HTTP ' + resp.status);
-          zip.file(name, await resp.blob());
+          zip.file(name, await fetchStepAsset(it.stepPath));
         } catch (e) { missing.push(it.modelCode); }
         csv += [i + 1, it.modelCode, it.seriesCode, it.seriesName, it.qty, it.paramsSummary, name].map(csvEscape).join(',') + '\r\n';
       }
@@ -1114,6 +1371,22 @@
     }
   }
 
+  // 返回系列总览 (首页缩略图): 清除系列选中与展开的大类, 回到全部产品
+  $('btnBackHome').onclick = function () {
+    var all = $('tree').querySelectorAll('.series');
+    for (var i = 0; i < all.length; i++) all[i].classList.remove('active');
+    state.series = null;
+    state.expandedCat = null;
+    state.sel = {};
+    showHome();
+    renderHome();
+    renderTree();
+    setStatus(t('已返回系列总览', 'Back to series overview'));
+  };
+
+  // 侧边栏折叠/展开
+  $('btnTreeToggle').onclick = function () { applyTreeCollapsed(!state.treeCollapsed); };
+
   $('btnCart').onclick = openCart;
   $('cartClose').onclick = closeCart;
   $('cartOverlay').onclick = closeCart;
@@ -1141,7 +1414,10 @@
     tabs[2].textContent = t('搜索结果', 'Search');
     tabs[3].textContent = t('平替对照', 'Cross-Reference');
     renderTree();
-    if (state.series) selectSeries(state.series);
+    if (state.onHome) renderHome(state.expandedCat);   // 保持当前大类筛选
+    else if (state.series) selectSeries(state.series);
+    if ($('btnTreeToggle')) applyTreeCollapsed(state.treeCollapsed);
+    if ($('btnBackHome')) $('btnBackHome').textContent = t('← 返回系列总览', '← Back to overview');
   }
 
   // ---------- 自测 (与离线版 --selftest 对齐的关键场景) ----------
@@ -1333,30 +1609,94 @@
   })();
 
   // ---------- 面板拖拽调宽 (目录树/参数面板, 与桌面版一致) ----------
-  function makeSplitter(id, prevSel, minW, maxW) {
+  // 全局阻止图片被原生拖拽: 手册页/尺寸图都是扫描大图, 一旦触发浏览器原生拖拽
+  // 会浮出半透明拖影、松手可能在新标签打开图片, 且拖拽期间 mousemove/mouseup 被浏览器
+  // 接管 → 分隔条卡死 (用户反馈"点击拖动就弹出来, 缩不回去")。
+  document.addEventListener('dragstart', function (e) {
+    var t = e.target;
+    if (t && t.tagName === 'IMG') e.preventDefault();
+  });
+
+  // 分隔条拖拽: 用 pointer 事件 + setPointerCapture (指针移出窗口/经过图片也不丢 pointerup)。
+  // 另有两道护栏, 否则分隔条会被拖出容器:
+  //   1) 夹取上限取 min(静态 maxW, 容器可用宽 - 分隔条 - 右侧最小宽) —— 固定 maxW(900) 在窄屏
+  //      会超过容器宽, 一旦写进 inline width 就把分隔条挤出 #tab-3d (overflow:hidden),
+  //      既看不见也点不到 → "缩不回去/没法自定义拖拽" (实测 ≤1512px 必然发生)。
+  //   2) 窗口 resize 时把已拖出的宽重新夹回容器可用宽。
+  function makeSplitter(id, prevSel, minW, maxW, minRight) {
     var el = $(id);
     var prev = document.querySelector(prevSel);
-    el.addEventListener('mousedown', function (e) {
+    if (!el || !prev) return;
+    minRight = minRight || 0;
+    // 可视上限 = min(静态 maxW, 容器可用宽 - 分隔条 - 右侧最小宽)
+    function liveLimit() {
+      var box = el.parentElement;
+      var avail = (box ? box.clientWidth : 0) - el.offsetWidth - minRight;
+      return Math.max(minW, Math.min(maxW, avail));
+    }
+    // 双击复位为默认宽度 (CSS 里的初始比例)
+    el.addEventListener('dblclick', function () { prev.style.width = ''; prev.style.flex = ''; });
+
+    el.addEventListener('pointerdown', function (e) {
+      if (e.button !== 0) return;             // 只响应左键
       e.preventDefault();
       el.classList.add('dragging');
-      var startX = e.clientX, startW = prev.offsetWidth;
+      var startW = Math.min(prev.offsetWidth, liveLimit());
+      var startX = e.clientX;
+      var pid = e.pointerId;
+      try { el.setPointerCapture(pid); } catch (err) { /* 个别环境不支持, 退化为普通监听 */ }
+
+      function apply(w) { prev.style.width = w + 'px'; prev.style.flex = 'none'; }
       function move(ev) {
-        var w = Math.max(minW, Math.min(maxW, startW + ev.clientX - startX));
-        prev.style.width = w + 'px';
-        prev.style.flex = 'none';
+        if (ev.pointerId !== pid) return;
+        apply(Math.max(minW, Math.min(liveLimit(), startW + ev.clientX - startX)));
       }
-      function up() {
+      function up(ev) {
+        if (ev && ev.pointerId !== pid) return;
         el.classList.remove('dragging');
-        document.removeEventListener('mousemove', move);
-        document.removeEventListener('mouseup', up);
+        try { el.releasePointerCapture(pid); } catch (err) { }
+        el.removeEventListener('pointermove', move);
+        el.removeEventListener('pointerup', up);
+        el.removeEventListener('pointercancel', up);
+        window.removeEventListener('blur', up);       // 切窗口/失焦也要收尾
       }
-      document.addEventListener('mousemove', move);
-      document.addEventListener('mouseup', up);
+      el.addEventListener('pointermove', move);
+      el.addEventListener('pointerup', up);
+      el.addEventListener('pointercancel', up);
+      window.addEventListener('blur', up);
+      // 兜底: 指针已松开却仍在拖拽态 (事件丢失) → 下次移动即纠正
+      document.addEventListener('pointermove', function watchdog(ev) {
+        if (ev.buttons === 0 && el.classList.contains('dragging')) up({ pointerId: pid });
+        else if (!el.classList.contains('dragging')) document.removeEventListener('pointermove', watchdog);
+      });
     });
   }
   makeSplitter('split1', '.tree', 150, 420);
   makeSplitter('split2', '.params', 220, 520);
-  makeSplitter('split3', '.hsplit-left', 260, 900);   // 3D/尺寸图 分栏分隔条 (同页内拖拽)
+  // minW 260→220 让窄屏 3D 区仍可用; minRight=180 防止尺寸图/手册页被压成细条
+  makeSplitter('split3', '.hsplit-left', 220, 900, 180);   // 3D/尺寸图 分栏分隔条 (同页内拖拽)
+
+  // 窗口尺寸变化时, 把已拖出的像素宽重新夹回容器可用宽 ——
+  // 1920px 下拉出的 900px 在缩到 1366px 后仍会挤走分隔条, 仅靠拖拽时的夹取防不住。
+  (function () {
+    var PREV = { split1: '.tree', split2: '.params', split3: '.hsplit-left' };
+    var MINW = { split1: 150, split2: 220, split3: 220 };
+    var MINR = { split1: 0, split2: 0, split3: 180 };
+    var t = null;
+    window.addEventListener('resize', function () {
+      if (t) clearTimeout(t);
+      t = setTimeout(function () {
+        Object.keys(PREV).forEach(function (id) {
+          var el = $(id), prev = document.querySelector(PREV[id]);
+          if (!el || !prev || !prev.style.width) return;
+          if (!el.offsetWidth) return;   // 分隔条被隐藏 (左树 rail) 时不干预
+          var avail = el.parentElement.clientWidth - el.offsetWidth - MINR[id];
+          var w = Math.max(MINW[id], Math.min(parseFloat(prev.style.width), avail));
+          prev.style.width = w + 'px';
+        });
+      }, 120);
+    });
+  })();
 
   // ---------- 初始化 ----------
   // 下载点击反馈: 立即提示 + 3 秒内防重复点击 (此前无反馈, 用户多次点击导致重复下载)

web/index.html

@@ -3,13 +3,12 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>欧霓博气动目录 ONEBOT Catalog</title>
-<link rel="stylesheet" href="style.css?v=8">
+<title>OneBot数模下载</title>
+<link rel="stylesheet" href="style.css?v=11">
 </head>
 <body>
 <header>
-  <div class="brand"><img src="OneBot-logo.png" class="logo" alt="OneBot"> 欧霓博气动目录 <span class="brand-en">ONEBOT Catalog</span>
-    <span id="ver" class="ver"></span>
+  <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="搜索型号 / 关键词 / 拼音">
@@ -23,7 +22,18 @@
   <nav id="tree" class="tree"></nav>
   <div id="split1" class="split" title="拖拽调整宽度"></div>
 
-  <section id="params" class="params">
+  <!-- 首页：全部大类的系列缩略图, 一页铺开 (左树默认展开, 底部箭头可收起) -->
+  <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="paramPanel"></div>
     <div id="actions">
@@ -37,15 +47,18 @@
       <button id="btnAddCart" class="btn hidden">加入清单</button>
     </div>
   </section>
-  <div id="split2" class="split" title="拖拽调整宽度"></div>
+  <div id="split2" class="split hidden" title="拖拽调整宽度"></div>
 
-  <section id="content" class="content">
+  <section id="content" class="content hidden">
     <div class="tabs">
       <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>
     </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">
@@ -76,8 +89,9 @@
   </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>
@@ -101,6 +115,6 @@
 
 <script src="libs/jszip.min.js?v=1"></script>
 <script src="config.js?v=1"></script>
-<script src="app.js?v=15"></script>
+<script src="app.js?v=18"></script>
 </body>
 </html>

web/style.css

@@ -1,148 +1,552 @@
-/* 欧霓博在线目录 - 简洁单页样式 */
+/* 欧霓博在线目录 - 现代柔和卡片风
+ * 视觉参照 bom-viewer (D:\开发\bom-viewer)：青/teal 主色 + 大圆角 + 柔和阴影 + 玻璃顶栏。
+ * 保留既有类名 (tree/params/content/tab/split/cart/...) 以免破坏 app.js 引用，仅重新配色。
+ */
+
+/* ------------------------------------------------------------ 设计令牌 */
+:root {
+  --primary-50:  #f0fdfa;
+  --primary-100: #ccfbf1;
+  --primary-200: #99f6e4;
+  --primary-300: #5eead4;
+  --primary-400: #2dd4bf;
+  --primary-500: #14b8a6;
+  --primary-600: #0d9488;
+  --primary-700: #0f766e;
+  --primary-800: #115e59;
+  --primary-900: #134e4a;
+
+  --gray-50:  #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+
+  --surface: #ffffff;
+  --bg: var(--gray-50);
+  --border: var(--gray-200);
+  --border-soft: var(--gray-100);
+
+  --text: var(--gray-900);
+  --text-dim: var(--gray-500);
+  --text-faint: var(--gray-400);
+
+  --shadow-card: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
+  --shadow-hover: 0 10px 40px rgba(0,0,0,.08);
+  --shadow-glass: 0 8px 32px rgba(0,0,0,.06);
+  --shadow-btn: 0 4px 12px rgba(20,184,166,.25);
+
+  --radius: 16px;
+  --radius-sm: 10px;
+  --radius-xs: 8px;
+}
+
 * { box-sizing: border-box; margin: 0; padding: 0; }
+
 body {
-  font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+               Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
   display: flex; flex-direction: column; height: 100vh;
-  color: #222; background: #f5f6f8;
+  font-size: 13px; color: var(--text); background: var(--bg);
+  -webkit-font-smoothing: antialiased;
 }
+
+/* 纤细滚动条，悬停才显形 */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; transition: background .2s; }
+*:hover::-webkit-scrollbar-thumb { background: rgba(156,163,175,.5); }
+*:hover::-webkit-scrollbar-thumb:hover { background: rgba(107,114,128,.7); }
+::selection { background: rgba(20,184,166,.2); }
+
+/* ------------------------------------------------------------ 顶栏（玻璃） */
 header {
-  display: flex; justify-content: space-between; align-items: center;
-  padding: 10px 16px; background: #1b4f8c; color: #fff;
+  height: 58px; display: flex; justify-content: space-between; align-items: center;
+  gap: 14px; padding: 0 18px;
+  background: rgba(255,255,255,.8);
+  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--border-soft);
+  box-shadow: var(--shadow-glass);
+  position: relative; z-index: 20;
 }
-.brand { font-size: 18px; font-weight: bold; display: flex; align-items: center; }
-.brand .logo { height: 30px; margin-right: 10px; }
-.brand-en { font-size: 13px; font-weight: normal; opacity: .85; }
-.ver { font-size: 12px; opacity: .8; margin-left: 10px; }
-.srv-status {
-  display: flex; align-items: center; gap: 6px;
-  font-size: 12px; color: #666; flex: none;
+.brand {
+  font-size: 15px; font-weight: 700; white-space: nowrap;
+  color: var(--gray-900); letter-spacing: -.2px;
+  display: flex; align-items: center;
 }
-.srv-status .dot {
-  width: 10px; height: 10px; border-radius: 50%;
-  background: #9e9e9e; flex: none; transition: background .2s;
+.brand .logo { height: 26px; margin-right: 9px; }
+.brand-en { font-weight: 500; font-size: 12px; color: var(--text-dim); margin-left: 7px; }
+.ver {
+  font-weight: 500; margin-left: 8px; font-size: 10.5px;
+  font-family: ui-monospace, Consolas, monospace;
+  color: var(--primary-600); background: var(--primary-50);
+  border: 1px solid var(--primary-200);
+  padding: 1.5px 6px; border-radius: 999px; vertical-align: 1px;
 }
-.srv-status .text { white-space: nowrap; }
-.srv-status.ready .dot { background: #2e7d32; }
-.srv-status.no-worker .dot { background: #ef6c00; }
-.srv-status.idle .dot { background: #2e7d32; }
-.srv-status.down .dot { background: #c62828; }
+
+/* 搜索框：整体一个圆角容器，输入 + 按钮分段 */
+.toolbar { display: flex; align-items: center; gap: 10px; }
 .toolbar input {
-  width: 260px; padding: 6px 10px; border: none; border-radius: 4px 0 0 4px; font-size: 14px;
+  height: 36px; width: 260px; padding: 0 13px; font-size: 13px;
+  background: var(--surface); color: var(--text);
+  border: 1px solid var(--border); border-radius: var(--radius-sm);
+  outline: none; transition: border-color .2s, box-shadow .2s;
+}
+.toolbar input:focus {
+  border-color: var(--primary-500);
+  box-shadow: 0 0 0 3px rgba(20,184,166,.15);
 }
 .toolbar button {
-  padding: 6px 14px; border: none; background: #4a90d9; color: #fff;
-  font-size: 14px; cursor: pointer;
+  height: 36px; padding: 0 16px; border: 1px solid var(--border);
+  background: var(--surface); color: var(--gray-700);
+  border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 500;
+  cursor: pointer; transition: all .18s; box-shadow: var(--shadow-card);
 }
-#btnLang { border-radius: 0 4px 4px 0; margin-left: 2px; }
+.toolbar button:hover {
+  color: var(--primary-700); border-color: var(--primary-300); background: var(--primary-50);
+}
+#btnSearch {
+  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
+  border-color: transparent; color: #fff; font-weight: 600;
+}
+#btnSearch:hover { filter: brightness(.94); background: linear-gradient(135deg, var(--primary-500), var(--primary-600)); color: #fff; }
+
+.srv-status { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-dim); flex: none; }
+.srv-status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gray-400); flex: none; transition: background .2s; }
+.srv-status .text { white-space: nowrap; }
+.srv-status.ready .dot { background: #059669; }
+.srv-status.no-worker .dot { background: #d97706; }
+.srv-status.idle .dot { background: #059669; }
+.srv-status.down .dot { background: #dc2626; }
+
+/* ------------------------------------------------------------ 主区 */
 main { flex: 1; display: flex; min-height: 0; }
-.split { width: 5px; cursor: col-resize; background: #e3e6e8; flex: none; }
-.split:hover, .split.dragging { background: #4a90d9; }
+/* 分隔条: 视觉 5px, 实际 11px 热区 (负外边距, 不占布局) — 更好抓 */
+.split {
+  width: 5px; cursor: col-resize; background: var(--gray-100); flex: none;
+  transition: background .2s; position: relative;
+}
+.split::after {
+  content: ''; position: absolute; top: 0; bottom: 0; left: -3px; right: -3px;
+}
+.split:hover, .split.dragging { background: var(--primary-400); }
+.split.dragging { z-index: 5; }
+
+/* 左侧树: 外层可滚动, 内层按剩余高度均匀分布 (按钮不被拉伸, 间隙随高度变化) */
 .tree {
-  width: 240px; background: #fff; border-right: 1px solid #ddd;
+  width: 250px; background: var(--surface);
+  border-right: 1px solid var(--border-soft);
   padding: 8px; overflow-y: auto;
+  transition: width .25s cubic-bezier(.2,.8,.3,1);
 }
-.tree .cat { font-weight: bold; margin: 8px 0 4px; color: #1b4f8c; }
+.tree.rail { width: 60px; padding: 8px 6px; }
+/* 内层: min-height 100% + space-evenly —— 有富余高度时均匀留白;
+   内容超高时自动退化为普通排列 (不会像直接对滚动容器用 space-evenly 那样裁掉顶部) */
+.tree-inner {
+  min-height: 100%; display: flex; flex-direction: column;
+  justify-content: space-evenly; gap: 8px;
+}
+
+/* 大类标题: 图标 + 文字; 悬停放大动画 (与缩略图卡片同款手感) */
+.tree .cat {
+  display: flex; align-items: center; gap: 9px;
+  flex: none; min-height: 44px;
+  font-size: 12px; font-weight: 800; letter-spacing: .2px;
+  color: var(--gray-900);
+  background: var(--gray-100);
+  border-left: 3px solid var(--primary-500);
+  padding: 8px 12px; border-radius: var(--radius-sm);
+  cursor: pointer; user-select: none;
+  box-shadow: var(--shadow-card);
+  transition: transform .32s cubic-bezier(.2,.8,.3,1),
+              box-shadow .32s cubic-bezier(.2,.8,.3,1),
+              background .2s, color .2s, border-color .2s;
+  will-change: transform;
+}
+/* 悬停: 抬升 + 放大 + 青色投影 (与 .sf-card 一致) */
+.tree .cat:hover {
+  transform: translateY(-3px) scale(1.035);
+  box-shadow: 0 10px 26px rgba(20,184,166,.22), 0 3px 10px rgba(0,0,0,.08);
+  background: var(--primary-100); color: var(--primary-800);
+  border-left-color: var(--primary-600);
+  z-index: 2;
+}
+.tree .cat:active { transform: translateY(-1px) scale(1.01); }
+.tree .cat.open {
+  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
+  color: #fff; border-left-color: var(--primary-700);
+}
+.tree .cat.open:hover {
+  box-shadow: 0 10px 26px rgba(20,184,166,.35), 0 3px 10px rgba(0,0,0,.10);
+  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
+  color: #fff;
+}
+
+/* 图标: 24x24 线性 SVG, 随 currentColor 变色 */
+.tree .cat-ico {
+  flex: none; width: 22px; height: 22px;
+  display: flex; align-items: center; justify-content: center;
+  transition: transform .32s cubic-bezier(.2,.8,.3,1);
+}
+.tree .cat-ico svg { width: 22px; height: 22px; display: block; }
+.tree .cat:hover .cat-ico { transform: scale(1.12); }
+
+.tree .cat-name {
+  flex: 1; min-width: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.tree .cat-arrow {
+  font-size: 9px; flex: none; opacity: .7;
+  transition: transform .2s;
+}
+
+/* 收起态 (rail): 只留图标, 文字与箭头隐藏; 子级一并收起 */
+.tree.rail .cat {
+  flex: none; justify-content: center;
+  padding: 8px; border-left-width: 0;
+  border-radius: var(--radius-sm); width: 100%;
+}
+.tree.rail .cat-name,
+.tree.rail .cat-arrow { display: none; }
+.tree.rail .cat-kids { display: none !important; }
+.tree.rail .cat-ico svg { width: 24px; height: 24px; }
+
+/* 折叠动画 (展开子级时淡入上滑) */
+.tree .cat-kids { margin: 0 0 4px; animation: kidsIn .22s ease-out; }
+@keyframes kidsIn {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
 .tree .series {
-  padding: 7px 10px; margin: 2px 0; border-radius: 4px; cursor: pointer; font-size: 14px;
+  padding: 9px 12px; margin: 1px 0; border-radius: var(--radius-xs);
+  cursor: pointer; font-size: 13px; color: var(--gray-700);
+  border-left: 3px solid transparent;
+  transition: background .15s, color .15s, border-color .15s;
 }
-.tree .series:hover { background: #e8f0fa; }
-.tree .series.active { background: #4a90d9; color: #fff; }
+.tree .series:hover { background: var(--primary-50); color: var(--primary-700); }
+.tree .series.active {
+  background: var(--primary-50); color: var(--primary-700);
+  border-left-color: var(--primary-500); font-weight: 600;
+}
+
+/* 参数列 */
 .params {
-  width: 320px; background: #fff; border-right: 1px solid #ddd;
-  padding: 12px; overflow-y: auto;
+  width: 330px; background: var(--surface);
+  border-right: 1px solid var(--border-soft);
+  padding: 16px; overflow-y: auto;
+}
+.model-title {
+  font-size: 16px; font-weight: 700; margin-bottom: 12px;
+  color: var(--gray-900); letter-spacing: -.3px; line-height: 1.4;
+}
+.param-row { margin-bottom: 11px; }
+.param-row label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
+.param-row select, .param-input {
+  width: 100%; height: 36px; padding: 0 10px; font-size: 13px;
+  border: 1px solid var(--border); border-radius: var(--radius-sm);
+  background: var(--surface); color: var(--text); outline: none;
+  transition: border-color .2s, box-shadow .2s;
+}
+.param-row select:focus, .param-input:focus {
+  border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(20,184,166,.15);
 }
-.model-title { font-size: 16px; font-weight: bold; margin-bottom: 10px; }
-.param-row { margin-bottom: 10px; }
-.param-row label { display: block; font-size: 13px; color: #555; margin-bottom: 3px; }
-.param-row select { width: 100%; padding: 6px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; }
 #actions { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
+
+/* ------------------------------------------------------------ 按钮 */
 .btn {
-  display: inline-block; padding: 9px 18px; border-radius: 4px; text-decoration: none;
-  font-size: 14px; background: #e9ecef; color: #333; border: 1px solid #ccc;
+  display: inline-flex; align-items: center; justify-content: center;
+  height: 38px; padding: 0 18px; border-radius: var(--radius-sm);
+  text-decoration: none; font-size: 13px; font-weight: 500; cursor: pointer;
+  background: var(--surface); color: var(--gray-700);
+  border: 1px solid var(--border); box-shadow: var(--shadow-card);
+  transition: all .18s;
 }
-.btn.primary { background: #1b4f8c; color: #fff; border: none; }
+.btn:hover { color: var(--primary-700); border-color: var(--primary-300); background: var(--primary-50); }
+.btn.primary {
+  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
+  border-color: transparent; color: #fff; font-weight: 600;
+  box-shadow: var(--shadow-btn);
+}
+.btn.primary:hover { filter: brightness(.94); color: #fff; }
+.btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
+.btn[disabled]:hover { filter: none; border-color: var(--border); background: var(--surface); color: var(--gray-700); }
+.btn.primary[disabled]:hover { background: linear-gradient(135deg, var(--primary-500), var(--primary-600)); color: #fff; }
+
 .hidden { display: none !important; }
-.content { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 10px; }
-.tabs { display: flex; gap: 4px; margin-bottom: 8px; }
+
+/* ------------------------------------------------------------ 内容区 / 标签页 */
+.content { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 14px; }
+.tabs { display: flex; gap: 6px; flex: none; }
+.content-back { flex: none; margin: 10px 0 0; }
 .tab {
-  padding: 7px 16px; border: 1px solid #ccc; border-radius: 4px 4px 0 0;
-  background: #e9ecef; cursor: pointer; font-size: 14px;
+  height: 36px; padding: 0 16px; border: 1px solid var(--border);
+  border-radius: var(--radius-sm); background: var(--surface);
+  color: var(--gray-700); cursor: pointer; font-size: 12.5px; font-weight: 500;
+  transition: all .18s; box-shadow: var(--shadow-card);
+}
+.tab:hover { color: var(--primary-700); border-color: var(--primary-300); background: var(--primary-50); }
+.tab.active {
+  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
+  border-color: transparent; color: #fff;
+}
+.tab-body {
+  flex: 1; overflow: auto; background: var(--surface);
+  border: 1px solid var(--border-soft); border-radius: var(--radius);
+  padding: 14px; box-shadow: var(--shadow-card); margin-top: 10px;
 }
-.tab.active { background: #fff; border-bottom-color: #fff; font-weight: bold; }
-.tab-body { flex: 1; overflow: auto; background: #fff; border: 1px solid #ddd; border-radius: 0 4px 4px 4px; padding: 12px; }
 .tab-body iframe { width: 100%; height: 100%; border: none; display: block; }
 #viewer3d { display: block; }
 #dimImage { max-width: 100%; max-height: 100%; }
+
 /* 3D + 尺寸图同页布局 (左右分栏, 中间分隔条可拖拽) */
 #tab-3d { display: flex; overflow: hidden; padding: 0; }
 .hsplit { flex: 1; display: flex; min-width: 0; min-height: 0; }
-.hsplit-left { width: 62%; flex: none; min-width: 0; position: relative; overflow: auto; padding: 12px; }
-.hsplit-right { flex: 1; min-width: 0; overflow-y: auto; padding: 12px; border-left: none; }
-.split.v { cursor: col-resize; }
+/* max-width 与 JS 的 minRight 护栏对齐 (185 = 5px 分隔条 + 180px 右栏下限):
+   否则拖拽写进的 inline width 会把分隔条挤到容器外, 再也抓不回来 */
+.hsplit-left {
+  width: 62%; flex: none; min-width: 0;
+  max-width: calc(100% - 185px);
+  position: relative; overflow: auto; padding: 14px;
+}
+.hsplit-right { flex: 1; min-width: 160px; overflow-y: auto; padding: 14px; border-left: none; }
+.split.v { cursor: col-resize; touch-action: none; }
+
 /* 表格标签页: 筛选栏固定顶部, 表格独立滚动 (表头 sticky 不露缝) */
 #tab-table, #tab-search, #tab-cross { display: flex; flex-direction: column; overflow: hidden; }
-#tab-table .range-row, #tab-cross .range-row { flex: none; margin-bottom: 6px; }
-.table-scroll { flex: 1; overflow: auto; min-height: 0; }
+#tab-table .range-row, #tab-cross .range-row { flex: none; margin-bottom: 8px; }
+.table-scroll { flex: 1; overflow: auto; min-height: 0; border-radius: var(--radius-sm); }
+
 /* 参数表列筛选: 表头可点 + 取值下拉 */
 th.col-filter { cursor: pointer; user-select: none; }
-th.col-filter:hover { background: #dde6f0; }
+th.col-filter:hover { background: var(--primary-100); }
 .col-filter-pop {
-  position: absolute; background: #fff; border: 1px solid #ccc; border-radius: 4px;
-  box-shadow: 0 4px 12px rgba(0,0,0,.15); z-index: 1000; max-height: 260px;
-  overflow-y: auto; min-width: 140px;
+  position: absolute; background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  box-shadow: 0 12px 32px rgba(0,0,0,.14); z-index: 1000; max-height: 260px;
+  overflow-y: auto; min-width: 140px; padding: 4px;
+}
+.col-filter-item { padding: 7px 11px; font-size: 12.5px; cursor: pointer; white-space: nowrap; border-radius: 7px; }
+.col-filter-item:hover { background: var(--primary-50); color: var(--primary-700); }
+.col-filter-item.sel { background: var(--primary-50); color: var(--primary-700); font-weight: 600; }
+
+.manual-cap { margin: 14px 0 5px; font-weight: 600; font-size: 12.5px; color: var(--text-dim); }
+/* 手册页: 限制高度避免超高图把面板撑破; 禁用拖拽与选中, 拖不动也就不会误触原生拖拽 */
+.manual-img {
+  max-width: 100%; max-height: 78vh; object-fit: contain;
+  border: 1px solid var(--border); border-radius: var(--radius-sm);
+  -webkit-user-drag: none; user-select: none;
+  display: block;
+}
+.hint { color: var(--text-faint); font-size: 12.5px; line-height: 1.6; }
+
+table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
+th, td { border: 1px solid var(--border-soft); padding: 7px 9px; text-align: left; }
+th {
+  background: var(--gray-50); position: sticky; top: 0; z-index: 1;
+  font-size: 11px; font-weight: 700; color: var(--text-dim);
+  text-transform: uppercase; letter-spacing: .4px;
+}
+tr:hover td { background: var(--primary-50); cursor: pointer; }
+
+.range-row {
+  margin-bottom: 8px; display: flex; gap: 12px; flex-wrap: wrap;
+  align-items: center; font-size: 12.5px; color: var(--text-dim);
+}
+.range-row input {
+  width: 66px; height: 32px; padding: 0 9px; font-size: 12.5px;
+  border: 1px solid var(--border); border-radius: var(--radius-xs); outline: none;
+}
+.range-row input:focus { border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(20,184,166,.15); }
+.range-row select {
+  height: 32px; padding: 0 9px; font-size: 12.5px;
+  border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface);
+}
+
+/* ------------------------------------------------------------ 底栏 */
+footer {
+  height: 34px; padding: 0 18px; font-size: 12px; color: var(--text-dim);
+  background: var(--surface); border-top: 1px solid var(--border-soft);
+  display: flex; align-items: center; gap: 12px;
 }
-.col-filter-item { padding: 6px 12px; font-size: 13px; cursor: pointer; white-space: nowrap; }
-.col-filter-item:hover { background: #e8f0fa; }
-.col-filter-item.sel { background: #dbe9f8; font-weight: bold; }
-.manual-cap { margin: 14px 0 4px; font-weight: bold; color: #555; }
-.manual-img { max-width: 100%; border: 1px solid #ddd; }
-.hint { color: #888; font-size: 14px; }
-table { width: 100%; border-collapse: collapse; font-size: 13px; }
-th, td { border: 1px solid #ddd; padding: 6px 8px; text-align: left; }
-th { background: #f0f3f7; position: sticky; top: 0; }
-tr:hover td { background: #f7fafd; cursor: pointer; }
-.range-row { margin-bottom: 8px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 13px; }
-.range-row input { width: 60px; padding: 4px; border: 1px solid #ccc; border-radius: 4px; }
-footer { padding: 6px 16px; font-size: 13px; color: #666; background: #fff; border-top: 1px solid #ddd; display: flex; align-items: center; justify-content: space-between; }
 footer #statusMsg { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
-/* 购物车 (淘宝式清单, 2026-08-24) */
-.cart-badge {
-  padding: 6px 12px; border: 1px solid #fff; background: transparent; color: #fff;
-  font-size: 13px; cursor: pointer; border-radius: 4px; margin-left: 8px;
+/* 侧边栏折叠按钮 (底部左侧) */
+.tree-toggle {
+  flex: none; height: 24px; padding: 0 11px;
+  border: 1px solid var(--border); border-radius: 999px;
+  background: var(--surface); color: var(--gray-700);
+  font-size: 11.5px; font-weight: 500; cursor: pointer;
+  transition: all .18s;
 }
-.cart-badge:hover { background: rgba(255,255,255,.15); }
-.cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 500; }
-.cart-panel {
-  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw;
-  background: #fff; z-index: 501; display: flex; flex-direction: column;
-  box-shadow: -4px 0 16px rgba(0,0,0,.2);
+.tree-toggle:hover {
+  color: var(--primary-700); border-color: var(--primary-300); background: var(--primary-50);
 }
-.cart-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #ddd; font-size: 16px; font-weight: bold; }
-.cart-close { border: none; background: transparent; font-size: 16px; cursor: pointer; color: #666; }
-.cart-list { flex: 1; overflow-y: auto; padding: 10px 16px; }
-.cart-item { border-bottom: 1px solid #eee; padding: 8px 0; font-size: 13px; }
-.cart-item .ci-model { font-weight: bold; font-size: 14px; }
-.cart-item .ci-sub { color: #888; margin-top: 2px; word-break: break-all; }
-.cart-item .ci-ops { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
-.cart-item .ci-ops input { width: 56px; padding: 3px 6px; border: 1px solid #ccc; border-radius: 4px; }
-.cart-item .ci-del { border: 1px solid #ccc; background: #fff; color: #c0392b; border-radius: 4px; padding: 3px 10px; cursor: pointer; font-size: 12px; }
-.cart-foot { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid #ddd; }
-.cart-foot .btn { flex: 1; text-align: center; }
-.add-cart-btn {
-  border: 1px solid #ccc; background: #fff; color: #1b4f8c; border-radius: 4px;
-  padding: 2px 8px; cursor: pointer; font-size: 13px; line-height: 1.4;
-}
-.add-cart-btn:hover { background: #e8f0fa; }
 
-/* 参数化选型 (2026-08-25): range 输入框 + 非标档位徽标 + 下载置灰 */
-.param-input {
-  width: 100%; padding: 6px; font-size: 14px;
-  border: 1px solid #ccc; border-radius: 4px;
+/* ============================================================ 首页：系列缩略图网格 */
+.home { flex: 1; overflow-y: auto; padding: 18px 20px 24px; min-width: 0; }
+
+.sf-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 18px 2px; }
+.sf-head h2 {
+  margin: 0; font-size: 18px; font-weight: 700; color: var(--gray-900);
+  letter-spacing: -.3px;
 }
+.sf-head .n { font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
+.sf-head .grow { flex: 1; }
+
+/* 首页按大类分组: 父标题 + 该类的系列缩略图网格 */
+.home-sec { margin-bottom: 26px; }
+.home-sec-head {
+  display: flex; align-items: baseline; gap: 10px;
+  margin: 0 0 12px 2px; padding-bottom: 8px;
+  border-bottom: 2px solid var(--border-soft);
+}
+.home-sec-head h3 {
+  margin: 0; font-size: 15px; font-weight: 800; color: var(--gray-900);
+  letter-spacing: -.2px;
+  border-left: 3px solid var(--primary-500); padding-left: 9px; line-height: 1.25;
+}
+.home-sec-head .n { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
+
+.sf-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
+  gap: 16px;
+}
+
+/* 卡片：大圆角，接近小米那种圆润感 */
+.sf-card {
+  position: relative; cursor: pointer; overflow: hidden;
+  border-radius: 20px;
+  background: var(--surface);
+  border: 1px solid var(--border-soft);
+  box-shadow: var(--shadow-card);
+  transition: transform .32s cubic-bezier(.2,.8,.3,1),
+              box-shadow .32s cubic-bezier(.2,.8,.3,1),
+              border-color .32s;
+  display: flex; flex-direction: column; align-items: center;
+  padding: 16px 14px 14px;
+  will-change: transform;
+}
+/* 悬停：抬升 + 放大一点点 + 阴影加深 + 青色描边 */
+.sf-card:hover {
+  transform: translateY(-7px) scale(1.028);
+  box-shadow: 0 18px 44px rgba(20,184,166,.20), 0 6px 18px rgba(0,0,0,.09);
+  border-color: var(--primary-300);
+  z-index: 2;
+}
+.sf-card:active { transform: translateY(-3px) scale(1.01); }
+
+/* 悬停时卡片底部泛出的青色渐变 */
+.sf-card::after {
+  content: ''; position: absolute; inset: auto 0 0 0; height: 44%;
+  background: linear-gradient(180deg, transparent, rgba(20,184,166,.10));
+  opacity: 0; transition: opacity .32s; pointer-events: none;
+}
+.sf-card:hover::after { opacity: 1; }
+
+.sf-fig {
+  width: 100%; height: 150px; display: flex; align-items: center;
+  justify-content: center; overflow: hidden;
+  border-radius: 14px; background: #fff;
+  margin-bottom: 11px;
+}
+.sf-fig img {
+  max-width: 100%; max-height: 100%; object-fit: contain;
+  transition: transform .42s cubic-bezier(.2,.8,.3,1);
+}
+.sf-card:hover .sf-fig img { transform: scale(1.13) rotate(-1.2deg); }
+
+.sf-code {
+  font-family: ui-monospace, Consolas, monospace; font-weight: 700;
+  font-size: 15.5px; color: var(--primary-700); letter-spacing: -.3px;
+  transition: color .2s;
+}
+.sf-card:hover .sf-code { color: var(--primary-600); }
+.sf-name {
+  font-size: 11.5px; color: var(--text-dim); margin-top: 4px;
+  text-align: center; line-height: 1.35;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  max-width: 100%;
+}
+/* 选中态 */
+.sf-card.on {
+  border-color: var(--primary-500);
+  box-shadow: 0 0 0 2px rgba(20,184,166,.28), var(--shadow-card);
+}
+
+/* ------------------------------------------------------------ 购物车 */
+.cart-badge {
+  height: 36px; padding: 0 15px; border: 1px solid var(--border);
+  background: var(--surface); color: var(--gray-700);
+  font-size: 12.5px; font-weight: 500; cursor: pointer;
+  border-radius: var(--radius-sm); transition: all .18s; box-shadow: var(--shadow-card);
+}
+.cart-badge:hover { color: var(--primary-700); border-color: var(--primary-300); background: var(--primary-50); }
+.cart-overlay { position: fixed; inset: 0; background: rgba(17,24,39,.35); backdrop-filter: blur(2px); z-index: 500; }
+.cart-panel {
+  position: fixed; top: 0; right: 0; bottom: 0; width: 430px; max-width: 92vw;
+  background: var(--surface); z-index: 501; display: flex; flex-direction: column;
+  box-shadow: -12px 0 40px rgba(0,0,0,.18);
+}
+.cart-head {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 16px 20px; border-bottom: 1px solid var(--border-soft);
+  font-size: 15px; font-weight: 700; color: var(--gray-900);
+}
+.cart-close { border: none; background: transparent; font-size: 16px; cursor: pointer; color: var(--text-dim); }
+.cart-close:hover { color: var(--gray-900); }
+.cart-list { flex: 1; overflow-y: auto; padding: 12px 20px; }
+.cart-item { border-bottom: 1px solid var(--border-soft); padding: 11px 0; font-size: 12.5px; }
+.cart-item .ci-model { font-weight: 700; font-size: 13.5px; color: var(--primary-700); font-family: ui-monospace, Consolas, monospace; }
+.cart-item .ci-sub { color: var(--text-dim); margin-top: 3px; word-break: break-all; line-height: 1.45; }
+.cart-item .ci-ops { display: flex; align-items: center; gap: 10px; margin-top: 8px; color: var(--text-dim); }
+.cart-item .ci-ops input {
+  width: 60px; height: 30px; padding: 0 8px; font-size: 12.5px;
+  border: 1px solid var(--border); border-radius: var(--radius-xs); outline: none;
+}
+.cart-item .ci-ops input:focus { border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(20,184,166,.15); }
+.cart-item .ci-del {
+  height: 30px; padding: 0 12px; border: 1px solid var(--border); background: var(--surface);
+  color: #dc2626; border-radius: var(--radius-xs); cursor: pointer; font-size: 12px;
+  transition: all .15s;
+}
+.cart-item .ci-del:hover { background: #fef2f2; border-color: #fca5a5; }
+.cart-foot { display: flex; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--border-soft); }
+.cart-foot .btn { flex: 1; }
+
+.add-cart-btn {
+  height: 30px; padding: 0 12px; border: 1px solid var(--border);
+  background: var(--surface); color: var(--primary-700);
+  border-radius: var(--radius-xs); cursor: pointer; font-size: 12px;
+  transition: all .15s;
+}
+.add-cart-btn:hover { background: var(--primary-50); border-color: var(--primary-300); }
+
+/* ------------------------------------------------------------ 参数化选型 */
 .nonstd-badge {
-  display: inline-block; margin-left: 8px; padding: 2px 8px;
-  background: #fff3cd; color: #8a6d3b; border: 1px solid #e0c069;
-  border-radius: 3px; font-size: 12px; font-weight: normal; vertical-align: middle;
+  display: inline-block; margin-left: 8px; padding: 2px 9px;
+  background: #fffbeb; color: #b45309; border: 1px solid #fde68a;
+  border-radius: 999px; font-size: 11.5px; font-weight: normal; vertical-align: middle;
+}
+
+/* ------------------------------------------------------------ 响应式 */
+@media (max-width: 860px) {
+  .tree { width: 200px; }
+  .params { width: 280px; }
+  .toolbar input { width: 180px; }
+  .home { padding: 12px; }
+  .sf-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
+  .sf-fig { height: 118px; margin-bottom: 9px; }
+  .sf-card { border-radius: 16px; padding: 12px 10px 11px; }
+  .sf-card:hover { transform: none; }   /* 触屏无悬停，别留悬浮态 */
+  .sf-code { font-size: 14px; }
+}
+@media (max-width: 420px) {
+  .sf-fig { height: 104px; }
 }
-.btn[disabled] { opacity: .55; cursor: not-allowed; }