wangruiguo/OnebotCatalog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
数据 (定位销/勾销缸/翻转缸/电缸 → 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>
This commit is contained in:
wangruiguo
2026-09-15 01:05:17 +08:00
parent 0584ba67b4
commit 3c4f236cba
483 changed files with 6520 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

390
web/app.js
View File

@@ -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 秒内防重复点击 (此前无反馈, 用户多次点击导致重复下载)