| export const esc = (value) => |
| String(value ?? "").replace( |
| /[&<>"']/g, |
| (c) => |
| ({ |
| "&": "&", |
| "<": "<", |
| ">": ">", |
| '"': """, |
| "'": "'", |
| })[c], |
| ); |
|
|
| export const number = (value) => |
| Number.isFinite(value) |
| ? value.toLocaleString("zh-CN", { maximumFractionDigits: 1 }) |
| : "—"; |
|
|
| export function icon(name, label, attributes = "") { |
| return `<button type="button" class="icon-button synth-icon" aria-label="${esc(label)}" title="${esc(label)}" ${attributes}><i data-lucide="${name}" aria-hidden="true"></i></button>`; |
| } |
|
|
| export function external(label, url) { |
| return `<a href="${esc(url)}" target="_blank" rel="noopener noreferrer">${esc(label)}<i data-lucide="arrow-up-right" aria-hidden="true"></i></a>`; |
| } |
|
|
| export function section(title, body, id = "") { |
| return `<section class="section" ${id ? `id="${id}"` : ""}><h2>${esc(title)}</h2>${body}</section>`; |
| } |
|
|
| export function table(headings, rows, className = "") { |
| return `<div class="table-scroll ${className}" tabindex="0" role="region" aria-label="${esc(headings.join("、"))}"><table><thead><tr>${headings.map((h) => `<th scope="col">${esc(h)}</th>`).join("")}</tr></thead><tbody>${rows.join("")}</tbody></table></div>`; |
| } |
|
|
| export function empty(message = "没有匹配的数据集", reset = false) { |
| return `<div class="empty-state"><i data-lucide="search-x" aria-hidden="true"></i><p>${esc(message)}</p>${reset ? '<button type="button" class="text-button" data-clear-filters>重置筛选</button>' : ""}</div>`; |
| } |
|
|
| export function enhance() { |
| window.lucide?.createIcons(); |
| } |
|
|
| export function fact(label, value) { |
| return `<div><dt>${esc(label)}</dt><dd>${value}</dd></div>`; |
| } |
|
|
| export function tier(id, meta) { |
| const value = meta.tier[id]; |
| return `<span class="tier tier-${esc(id)}" title="${esc(value?.name + " · " + value?.desc)}">${esc(id === "-" ? "—" : id)}</span>`; |
| } |
|
|
| export function status(id, meta) { |
| return `<span class="status status-${esc(id)}" title="${esc(meta.status[id]?.desc)}">${esc(meta.status[id]?.name || id)}</span>`; |
| } |
|
|
| export function thumbnail(dataset, context) { |
| const preview = context.previews[dataset.id]?.[0]; |
| const figure = context.figures[dataset.id]?.figures?.[0]?.images?.[0]; |
| return preview || figure |
| ? `<img class="dataset-thumb" src="${esc(preview?.rgb || figure.src)}" alt="${esc(dataset.name)}${preview ? "样例" : "官方图"}" loading="lazy" decoding="async">` |
| : '<span class="dataset-thumb no-thumb"><i data-lucide="images" aria-hidden="true"></i></span>'; |
| } |
|
|
| export async function readJSON(path, { optional = false, fallback = {} } = {}) { |
| try { |
| const response = await fetch(path); |
| if (!response.ok) throw new Error(`${path}: ${response.status}`); |
| return await response.json(); |
| } catch (error) { |
| if (!optional) throw error; |
| return fallback; |
| } |
| } |
|
|
