109 lines
3.1 KiB
JavaScript
109 lines
3.1 KiB
JavaScript
let allData = [];
|
|
let currentActive = null;
|
|
|
|
// 定义一个函数，用于将字符串中的反斜杠替换为正斜杠
|
|
function sanitize(str) {
|
|
return str.replaceAll("\\", "/");
|
|
}
|
|
|
|
function renderList(data) {
|
|
const list = document.getElementById("resourceList");
|
|
list.innerHTML = "";
|
|
|
|
data.forEach((item, index) => {
|
|
const li = document.createElement("li");
|
|
li.setAttribute("data-index", index);
|
|
|
|
const thumb = item.images?.[0] ? sanitize(item.images[0]) : "";
|
|
const name = item.title;
|
|
const assets = item.properties?.Assets || "未知";
|
|
|
|
li.innerHTML = `
|
|
<img src="${thumb}" class="thumb" alt="">
|
|
<div>
|
|
<div><strong>${name}</strong></div>
|
|
<div style="font-size:0.85rem; color: #666;">素材量: ${assets}</div>
|
|
</div>
|
|
`;
|
|
|
|
li.addEventListener("click", () => showDetails(item, li));
|
|
list.appendChild(li);
|
|
});
|
|
}
|
|
|
|
function showDetails(item, li) {
|
|
if (currentActive) currentActive.classList.remove("active");
|
|
currentActive = li;
|
|
currentActive.classList.add("active");
|
|
|
|
document.getElementById("placeholder").classList.add("hidden");
|
|
document.getElementById("details").classList.remove("hidden");
|
|
|
|
document.getElementById("detailTitle").textContent = item.title;
|
|
document.getElementById("detailTags").textContent = `分类: ${
|
|
item.properties?.Category?.[0] || "N/A"
|
|
} | 标签: ${(item.properties?.Tags || []).join(", ")}`;
|
|
|
|
// 下载链接
|
|
const download = sanitize(item.download);
|
|
document.getElementById(
|
|
"downloadBlock"
|
|
).innerHTML = `<a class="download-btn" href="${download}" download>⬇️ 下载资源</a>`;
|
|
|
|
// 图集
|
|
const gallery = document.createElement("div");
|
|
gallery.id = "gallery";
|
|
item.images?.forEach((img) => {
|
|
img = sanitize(img);
|
|
const a = document.createElement("a");
|
|
a.href = img;
|
|
a.innerHTML = `<img src="${img}" alt="">`;
|
|
gallery.appendChild(a);
|
|
});
|
|
const galleryWrapper = document.getElementById("galleryWrapper");
|
|
galleryWrapper.innerHTML = "";
|
|
galleryWrapper.appendChild(gallery);
|
|
|
|
lightGallery(gallery, {
|
|
selector: "a",
|
|
thumbnail: true,
|
|
zoom: true,
|
|
});
|
|
|
|
// 版本信息
|
|
const versionBlock = document.getElementById("versionTableWrapper");
|
|
if (item.changelog?.length > 0) {
|
|
let table = `<table><tr><th>日期</th><th>版本</th><th>描述</th></tr>`;
|
|
item.changelog.forEach((row) => {
|
|
table += `<tr><td>${row.date}</td><td>${row.version}</td><td>${
|
|
row.description || ""
|
|
}</td></tr>`;
|
|
});
|
|
table += `</table>`;
|
|
versionBlock.innerHTML = table;
|
|
} else {
|
|
versionBlock.innerHTML = "";
|
|
}
|
|
}
|
|
|
|
function handleSearch() {
|
|
const keyword = document
|
|
.getElementById("searchInput")
|
|
.value.trim()
|
|
.toLowerCase();
|
|
const filtered = allData.filter((item) =>
|
|
item.title.toLowerCase().includes(keyword)
|
|
);
|
|
renderList(filtered);
|
|
}
|
|
|
|
fetch("data/kenney_data_local.json")
|
|
.then((res) => res.json())
|
|
.then((data) => {
|
|
allData = data;
|
|
renderList(data);
|
|
document
|
|
.getElementById("searchInput")
|
|
.addEventListener("input", handleSearch);
|
|
});
|