在线工具:元器件:datasheet多站查询
差别
这里会显示出您选择的修订版和当前版本之间的差别。
| 两侧同时换到之前的修订记录前一修订版后一修订版 | 前一修订版 | ||
| 在线工具:元器件:datasheet多站查询 [2026/10/09 08:42] – 移除 - 外部编辑 (Unknown date) 127.0.0.1 | 在线工具:元器件:datasheet多站查询 [2026/10/09 08:47] (当前版本) – hwwiki | ||
|---|---|---|---|
| 行 1: | 行 1: | ||
| + | < | ||
| + | < | ||
| + | :root { | ||
| + | --primary: #1a6ee0; | ||
| + | --primary-dark: | ||
| + | --bg: #ffffff; | ||
| + | --card: #ffffff; | ||
| + | --border: #e2e8f0; | ||
| + | --text: #1e293b; | ||
| + | --text-2: #64748b; | ||
| + | } | ||
| + | * { box-sizing: border-box; margin: 0; padding: 0; } | ||
| + | .datasheet-widget { | ||
| + | font-family: | ||
| + | " | ||
| + | background: var(--bg); | ||
| + | color: var(--text); | ||
| + | min-height: 100vh; | ||
| + | display: flex; | ||
| + | justify-content: | ||
| + | padding: 24px 12px; | ||
| + | } | ||
| + | .app { width: 100%; max-width: 560px; } | ||
| + | .logo { display: flex; align-items: | ||
| + | .logo h1 { font-size: 17px; font-weight: | ||
| + | .logo .sub { font-size: 12px; color: var(--text-2); | ||
| + | .card { | ||
| + | background: var(--card); | ||
| + | border: 1px solid var(--border); | ||
| + | border-radius: | ||
| + | padding: 16px; | ||
| + | box-shadow: 0 1px 3px rgba(0, | ||
| + | margin-bottom: | ||
| + | } | ||
| + | .row { display: flex; gap: 10px; } | ||
| + | .field { flex: 1; } | ||
| + | .field label { display: block; font-size: 12px; color: var(--text-2); | ||
| + | input[type=" | ||
| + | width: 100%; | ||
| + | padding: 9px 11px; | ||
| + | border: 1px solid var(--border); | ||
| + | border-radius: | ||
| + | font-size: 14px; | ||
| + | outline: none; | ||
| + | transition: border-color .15s, box-shadow .15s; | ||
| + | background: #fff; | ||
| + | } | ||
| + | input[type=" | ||
| + | border-color: | ||
| + | box-shadow: 0 0 0 3px rgba(26, | ||
| + | } | ||
| + | .btn { | ||
| + | padding: 9px 22px; | ||
| + | background: var(--primary); | ||
| + | color: #fff; | ||
| + | border: none; | ||
| + | border-radius: | ||
| + | font-size: 14px; | ||
| + | font-weight: | ||
| + | cursor: pointer; | ||
| + | align-self: flex-end; | ||
| + | transition: background .15s; | ||
| + | } | ||
| + | .btn:hover { background: var(--primary-dark); | ||
| + | .placeholder { text-align: center; color: var(--text-2); | ||
| + | .xsearch .xs-title { font-size: 12px; color: var(--text-2); | ||
| + | .xsearch .xs-title b { color: var(--text); | ||
| + | .xsearch .xs-toolbar { display: flex; align-items: | ||
| + | .xs-btn { | ||
| + | font-size: 12px; padding: 4px 12px; border-radius: | ||
| + | border: 1px solid var(--primary); | ||
| + | cursor: pointer; transition: all .15s; | ||
| + | } | ||
| + | .xs-btn: | ||
| + | .xs-btn.ghost { border-color: | ||
| + | .xs-btn.ghost: | ||
| + | .xs-count { font-size: 11px; color: var(--text-2); | ||
| + | .xsearch .xs-hint { font-size: 11px; color: #b45309; margin-top: 6px; display: none; } | ||
| + | .xsearch .xs-hint.show { display: block; } | ||
| + | .xsearch .xs-group { font-size: 11px; color: var(--text-2); | ||
| + | .xsearch .xs-group: | ||
| + | .chips { display: flex; flex-wrap: wrap; gap: 6px; } | ||
| + | .chip { | ||
| + | font-size: 12px; | ||
| + | padding: 5px 13px; | ||
| + | border-radius: | ||
| + | border: 1px solid var(--border); | ||
| + | color: var(--text); | ||
| + | background: #fff; | ||
| + | transition: border-color .15s; | ||
| + | display: inline-flex; | ||
| + | align-items: | ||
| + | gap: 6px; | ||
| + | } | ||
| + | .chip a { color: inherit; text-decoration: | ||
| + | .chip a:hover { color: var(--primary); | ||
| + | .chip:hover { border-color: | ||
| + | .chip input[type=" | ||
| + | .chip.off { opacity: .55; } | ||
| + | .chip.off a { color: var(--text-2); | ||
| + | </ | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | <svg width=" | ||
| + | <path d="M6 2h9l5 5v15H6z" | ||
| + | <path d="M15 2v5h5" stroke="# | ||
| + | <path d="M9 12h6M9 15.5h6M9 19h3" stroke="# | ||
| + | </ | ||
| + | < | ||
| + | </ | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | <label for=" | ||
| + | <input type=" | ||
| + | </ | ||
| + | <div class=" | ||
| + | <label for=" | ||
| + | <input type=" | ||
| + | </ | ||
| + | <button class=" | ||
| + | </ | ||
| + | </ | ||
| + | <div id=" | ||
| + | </ | ||
| + | < | ||
| + | (function () { | ||
| + | // 哨兵:脚本只初始化一次(DokuWiki 等环境可能把内容渲染两份导致脚本执行两次) | ||
| + | if (window.__datasheetWidgetLoaded) return; | ||
| + | window.__datasheetWidgetLoaded = true; | ||
| + | var $ = function (id) { return document.getElementById(id); | ||
| + | var params = new URLSearchParams(location.search); | ||
| + | var mEl = $(" | ||
| + | var resultsEl = $(" | ||
| + | if (params.get(" | ||
| + | if (params.get(" | ||
| + | function qs(s) { return encodeURIComponent(s); | ||
| + | // ===== 站点列表(URL 模板均已实测验证)===== | ||
| + | // 默认勾选仅 def:true 的站点;引擎类查询词:厂商 + 型号 + pdf | ||
| + | function engineQ(m, p) { return (m ? m + " " : "" | ||
| + | var SITES = [ | ||
| + | // ---- 商城 ---- | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | // ---- 专业查询网站 ---- | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | // ---- 搜索引擎 ---- | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | // ---- 其他 ---- | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | ]; | ||
| + | function buildPanel() { | ||
| + | var m = mEl.value.trim(), | ||
| + | var card = document.createElement(" | ||
| + | card.className = "card xsearch"; | ||
| + | var title = document.createElement(" | ||
| + | title.className = " | ||
| + | if (p) { | ||
| + | var b = document.createElement(" | ||
| + | b.textContent = (m ? m + " " : "" | ||
| + | title.appendChild(document.createTextNode(" | ||
| + | title.appendChild(b); | ||
| + | title.appendChild(document.createTextNode(" | ||
| + | } else { | ||
| + | title.appendChild(document.createTextNode(" | ||
| + | } | ||
| + | card.appendChild(title); | ||
| + | // 工具栏:全选开关 + 已选计数 | ||
| + | var toolbar = document.createElement(" | ||
| + | toolbar.className = " | ||
| + | var selAll = document.createElement(" | ||
| + | selAll.type = " | ||
| + | selAll.className = " | ||
| + | var countSpan = document.createElement(" | ||
| + | countSpan.className = " | ||
| + | toolbar.appendChild(selAll); | ||
| + | toolbar.appendChild(countSpan); | ||
| + | card.appendChild(toolbar); | ||
| + | var hint = document.createElement(" | ||
| + | hint.className = " | ||
| + | var boxes = []; | ||
| + | var lastGroup = null, chips = null; | ||
| + | SITES.forEach(function (s, idx) { | ||
| + | if (s.g !== lastGroup) { | ||
| + | lastGroup = s.g; | ||
| + | var g = document.createElement(" | ||
| + | g.className = " | ||
| + | g.textContent = s.g; | ||
| + | card.appendChild(g); | ||
| + | chips = document.createElement(" | ||
| + | chips.className = " | ||
| + | card.appendChild(chips); | ||
| + | } | ||
| + | var span = document.createElement(" | ||
| + | span.className = " | ||
| + | var cb = document.createElement(" | ||
| + | cb.type = " | ||
| + | cb.checked = savedChecks[idx]; | ||
| + | cb.addEventListener(" | ||
| + | var a = document.createElement(" | ||
| + | a.textContent = s.name; | ||
| + | if (p) { | ||
| + | a.href = s.u(m, p); | ||
| + | a.target = " | ||
| + | a.rel = " | ||
| + | } | ||
| + | span.appendChild(cb); | ||
| + | span.appendChild(a); | ||
| + | boxes.push(cb); | ||
| + | chips.appendChild(span); | ||
| + | }); | ||
| + | card.appendChild(hint); | ||
| + | function updateCount() { | ||
| + | var n = 0; | ||
| + | boxes.forEach(function (cb) { if (cb.checked) n++; }); | ||
| + | countSpan.textContent = " | ||
| + | selAll.textContent = n === boxes.length ? " | ||
| + | return n; | ||
| + | } | ||
| + | selAll.addEventListener(" | ||
| + | var all = boxes.every(function (cb) { return cb.checked; }); | ||
| + | boxes.forEach(function (cb, i) { cb.checked = !all; savedChecks[i] = cb.checked; }); | ||
| + | updateCount(); | ||
| + | }); | ||
| + | // 打开逻辑暴露给「搜索」按钮(点击即打开所选网站) | ||
| + | currentOpen = function () { | ||
| + | hint.className = " | ||
| + | if (!pEl.value.trim()) { | ||
| + | hint.textContent = " | ||
| + | hint.className = " | ||
| + | pEl.focus(); | ||
| + | return; | ||
| + | } | ||
| + | var blocked = 0; | ||
| + | boxes.forEach(function (cb) { | ||
| + | if (!cb.checked) return; | ||
| + | var a = cb.nextElementSibling; | ||
| + | if (!a.href) return; | ||
| + | var w = window.open(a.href, | ||
| + | if (!w) blocked++; | ||
| + | }); | ||
| + | if (blocked > 0) { | ||
| + | hint.textContent = | ||
| + | " | ||
| + | " | ||
| + | hint.className = " | ||
| + | } | ||
| + | }; | ||
| + | updateCount(); | ||
| + | return card; | ||
| + | } | ||
| + | // 勾选状态跨刷新保留(仅 def:true 的站点默认勾选) | ||
| + | var savedChecks = SITES.map(function (s) { return s.def === true; }); | ||
| + | var currentOpen = null; | ||
| + | function render() { | ||
| + | resultsEl.innerHTML = ""; | ||
| + | resultsEl.appendChild(buildPanel()); | ||
| + | } | ||
| + | // 输入实时刷新链接(保留勾选状态) | ||
| + | var t = null; | ||
| + | [mEl, pEl].forEach(function (el) { | ||
| + | el.addEventListener(" | ||
| + | if (t) clearTimeout(t); | ||
| + | t = setTimeout(render, | ||
| + | }); | ||
| + | }); | ||
| + | // 「搜索」= 打开所选的全部网站(点击即开,无需先生成) | ||
| + | // opening 防重入:同一时刻只允许一轮打开(防事件重复绑定导致每站开两次) | ||
| + | var opening = false; | ||
| + | function search() { | ||
| + | if (opening) return; | ||
| + | opening = true; | ||
| + | setTimeout(function () { opening = false; }, 500); | ||
| + | if (t) { clearTimeout(t); | ||
| + | render(); | ||
| + | if (currentOpen) currentOpen(); | ||
| + | } | ||
| + | goEl.addEventListener(" | ||
| + | [mEl, pEl].forEach(function (el) { | ||
| + | el.addEventListener(" | ||
| + | if (ev.key === " | ||
| + | }); | ||
| + | }); | ||
| + | // 面板初始即显示(无论是否带 URL 参数) | ||
| + | render(); | ||
| + | })(); | ||
| + | </ | ||
| + | </ | ||
| + | < | ||
| + | (function () { | ||
| + | // 哨兵:脚本只初始化一次(DokuWiki 等环境可能把内容渲染两份导致脚本执行两次) | ||
| + | if (window.__datasheetWidgetLoaded) return; | ||
| + | window.__datasheetWidgetLoaded = true; | ||
| + | var $ = function (id) { return document.getElementById(id); | ||
| + | var params = new URLSearchParams(location.search); | ||
| + | var mEl = $(" | ||
| + | var resultsEl = $(" | ||
| + | if (params.get(" | ||
| + | if (params.get(" | ||
| + | function qs(s) { return encodeURIComponent(s); | ||
| + | // ===== 站点列表(URL 模板均已实测验证)===== | ||
| + | // 默认勾选仅 def:true 的站点;引擎类查询词:厂商 + 型号 + pdf | ||
| + | function engineQ(m, p) { return (m ? m + " " : "" | ||
| + | var SITES = [ | ||
| + | // ---- 商城 ---- | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | // ---- 专业查询网站 ---- | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | // ---- 搜索引擎 ---- | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | // ---- 其他 ---- | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | { g: " | ||
| + | u: function (m, p) { return " | ||
| + | ]; | ||
| + | function buildPanel() { | ||
| + | var m = mEl.value.trim(), | ||
| + | var card = document.createElement(" | ||
| + | card.className = "card xsearch"; | ||
| + | var title = document.createElement(" | ||
| + | title.className = " | ||
| + | if (p) { | ||
| + | var b = document.createElement(" | ||
| + | b.textContent = (m ? m + " " : "" | ||
| + | title.appendChild(document.createTextNode(" | ||
| + | title.appendChild(b); | ||
| + | title.appendChild(document.createTextNode(" | ||
| + | } else { | ||
| + | title.appendChild(document.createTextNode(" | ||
| + | } | ||
| + | card.appendChild(title); | ||
| + | // 工具栏:全选开关 + 已选计数 | ||
| + | var toolbar = document.createElement(" | ||
| + | toolbar.className = " | ||
| + | var selAll = document.createElement(" | ||
| + | selAll.type = " | ||
| + | selAll.className = " | ||
| + | var countSpan = document.createElement(" | ||
| + | countSpan.className = " | ||
| + | toolbar.appendChild(selAll); | ||
| + | toolbar.appendChild(countSpan); | ||
| + | card.appendChild(toolbar); | ||
| + | var hint = document.createElement(" | ||
| + | hint.className = " | ||
| + | var boxes = []; | ||
| + | var lastGroup = null, chips = null; | ||
| + | SITES.forEach(function (s, idx) { | ||
| + | if (s.g !== lastGroup) { | ||
| + | lastGroup = s.g; | ||
| + | var g = document.createElement(" | ||
| + | g.className = " | ||
| + | g.textContent = s.g; | ||
| + | card.appendChild(g); | ||
| + | chips = document.createElement(" | ||
| + | chips.className = " | ||
| + | card.appendChild(chips); | ||
| + | } | ||
| + | var span = document.createElement(" | ||
| + | span.className = " | ||
| + | var cb = document.createElement(" | ||
| + | cb.type = " | ||
| + | cb.checked = savedChecks[idx]; | ||
| + | cb.addEventListener(" | ||
| + | var a = document.createElement(" | ||
| + | a.textContent = s.name; | ||
| + | if (p) { | ||
| + | a.href = s.u(m, p); | ||
| + | a.target = " | ||
| + | a.rel = " | ||
| + | } | ||
| + | span.appendChild(cb); | ||
| + | span.appendChild(a); | ||
| + | boxes.push(cb); | ||
| + | chips.appendChild(span); | ||
| + | }); | ||
| + | card.appendChild(hint); | ||
| + | function updateCount() { | ||
| + | var n = 0; | ||
| + | boxes.forEach(function (cb) { if (cb.checked) n++; }); | ||
| + | countSpan.textContent = " | ||
| + | selAll.textContent = n === boxes.length ? " | ||
| + | return n; | ||
| + | } | ||
| + | selAll.addEventListener(" | ||
| + | var all = boxes.every(function (cb) { return cb.checked; }); | ||
| + | boxes.forEach(function (cb, i) { cb.checked = !all; savedChecks[i] = cb.checked; }); | ||
| + | updateCount(); | ||
| + | }); | ||
| + | // 打开逻辑暴露给「搜索」按钮(点击即打开所选网站) | ||
| + | currentOpen = function () { | ||
| + | hint.className = " | ||
| + | if (!pEl.value.trim()) { | ||
| + | hint.textContent = " | ||
| + | hint.className = " | ||
| + | pEl.focus(); | ||
| + | return; | ||
| + | } | ||
| + | var blocked = 0; | ||
| + | boxes.forEach(function (cb) { | ||
| + | if (!cb.checked) return; | ||
| + | var a = cb.nextElementSibling; | ||
| + | if (!a.href) return; | ||
| + | var w = window.open(a.href, | ||
| + | if (!w) blocked++; | ||
| + | }); | ||
| + | if (blocked > 0) { | ||
| + | hint.textContent = | ||
| + | " | ||
| + | " | ||
| + | hint.className = " | ||
| + | } | ||
| + | }; | ||
| + | updateCount(); | ||
| + | return card; | ||
| + | } | ||
| + | // 勾选状态跨刷新保留(仅 def:true 的站点默认勾选) | ||
| + | var savedChecks = SITES.map(function (s) { return s.def === true; }); | ||
| + | var currentOpen = null; | ||
| + | function render() { | ||
| + | resultsEl.innerHTML = ""; | ||
| + | resultsEl.appendChild(buildPanel()); | ||
| + | } | ||
| + | // 输入实时刷新链接(保留勾选状态) | ||
| + | var t = null; | ||
| + | [mEl, pEl].forEach(function (el) { | ||
| + | el.addEventListener(" | ||
| + | if (t) clearTimeout(t); | ||
| + | t = setTimeout(render, | ||
| + | }); | ||
| + | }); | ||
| + | // 「搜索」= 打开所选的全部网站(点击即开,无需先生成) | ||
| + | // opening 防重入:同一时刻只允许一轮打开(防事件重复绑定导致每站开两次) | ||
| + | var opening = false; | ||
| + | function search() { | ||
| + | if (opening) return; | ||
| + | opening = true; | ||
| + | setTimeout(function () { opening = false; }, 500); | ||
| + | if (t) { clearTimeout(t); | ||
| + | render(); | ||
| + | if (currentOpen) currentOpen(); | ||
| + | } | ||
| + | goEl.addEventListener(" | ||
| + | [mEl, pEl].forEach(function (el) { | ||
| + | el.addEventListener(" | ||
| + | if (ev.key === " | ||
| + | }); | ||
| + | }); | ||
| + | // 面板初始即显示(无论是否带 URL 参数) | ||
| + | render(); | ||
| + | })(); | ||
| + | </ | ||
| + | </ | ||