Open Source

2025-04-22 09:11:40 +08:00
commit a4bf39a958
14 changed files with 1043 additions and 0 deletions
--- a/frontend/v2/index.html
+++ b/frontend/v2/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Kenney 资源库</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.8.3/css/lightgallery.min.css" integrity="sha512-QMCloGTsG2vNSnHcsxYTapI6pFQNnUP6yNizuLL5Wh3ha6AraI6HrJ3ABBaw6SIUHqlSTPQDs/SydiR98oTeaQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.8.3/lightgallery.min.js" integrity="sha512-n02TbYimj64qb98ed5WwkNiSw/i9Xlvv4Ehvhg0jLp3qMAMWCYUHbOMbppZ0vimtyiyw9NqNqxUZC4hq86f4aQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.8.3/css/lg-zoom.min.css" integrity="sha512-S/hU6dGSK3D7SRpCvRF/IEufIr6Ikgp5vDiJarhdeFGEnw36hWZ6gVBjnwBbzjA+NEP7D8Gdm+5LL1HEsyiB1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.8.3/plugins/zoom/lg-zoom.min.js" integrity="sha512-fwxc/NvaA3du4ZRE6J/Ilrqi2xwOB1QfHBR4neA+ha13/pkweiRfPgBiV4VbfAf/Vi3rXAXdQ3zexUJ1V2bWrg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.8.3/css/lg-thumbnail.min.css" integrity="sha512-rKuOh3xlF/027KUPuMok0ESsZ2zWPRzkniD3n5zZKCAtbiVkYw66DR4KtVAGf8dLPLr5DdyQs05BlSmEyXctkQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.8.3/plugins/thumbnail/lg-thumbnail.min.js" integrity="sha512-jZxB8WysJ6S6e4Hz5IZpAzR1WiflBl0hBxriHGlLkUN32T18+rD1aLNifa1KTll/zx8lIfWVP1NqEjHi/Khy5w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <aside class="sidebar">
+        <input type="text" id="searchInput" placeholder="🔍 搜索资源名称..." />
+        <ul id="resourceList"></ul>
+      </aside>
+
+      <main class="content">
+        <div id="details" class="hidden">
+          <h2 id="detailTitle"></h2>
+          <div id="detailTags"></div>
+          <div id="galleryWrapper"></div>
+          <div id="downloadBlock"></div>
+          <div id="versionTableWrapper"></div>
+        </div>
+        <div id="placeholder" class="placeholder">
+          ← 请选择左侧资源以查看详情
+        </div>
+      </main>
+    </div>
+
+    <script src="libs/lightgallery.min.js"></script>
+    <script src="libs/lg-thumbnail.min.js"></script>
+    <script src="libs/lg-zoom.min.js"></script>
+    <script src="script.js"></script>
+  </body>
+</html>
--- a/frontend/v2/script.js
+++ b/frontend/v2/script.js
@@ -0,0 +1,108 @@
+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);
+  });
--- a/frontend/v2/style.css
+++ b/frontend/v2/style.css
@@ -0,0 +1,115 @@
+body {
+  margin: 0;
+  font-family: "Segoe UI", sans-serif;
+  background-color: #f0f2f5;
+}
+
+.container {
+  display: flex;
+  height: 100vh;
+}
+
+.sidebar {
+  width: 320px;
+  background: #fff;
+  border-right: 1px solid #ddd;
+  padding: 1rem;
+  overflow-y: auto;
+}
+
+.sidebar input {
+  width: 100%;
+  padding: 0.5rem;
+  margin-bottom: 1rem;
+  font-size: 1rem;
+}
+
+.sidebar ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.sidebar li {
+  padding: 0.5rem;
+  margin-bottom: 0.5rem;
+  cursor: pointer;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  transition: background 0.2s;
+}
+
+.sidebar li:hover,
+.sidebar li.active {
+  background-color: #e6f7ff;
+}
+
+.sidebar img.thumb {
+  width: 48px;
+  height: 48px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+.content {
+  flex: 1;
+  padding: 2rem;
+  overflow-y: auto;
+}
+
+.placeholder {
+  font-size: 1.2rem;
+  color: #999;
+}
+
+.hidden {
+  display: none;
+}
+
+#galleryWrapper {
+  margin-top: 1rem;
+}
+
+#galleryWrapper a img {
+  height: 120px;
+  margin: 5px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+#detailTags {
+  margin-bottom: 1rem;
+  color: #666;
+  font-size: 0.9rem;
+}
+
+#downloadBlock {
+  margin: 1rem 0;
+}
+
+.download-btn {
+  padding: 0.5rem 1rem;
+  background-color: #4caf50;
+  color: white;
+  border-radius: 6px;
+  text-decoration: none;
+  font-size: 0.95rem;
+}
+
+.download-btn:hover {
+  background-color: #45a049;
+}
+
+#versionTableWrapper table {
+  margin-top: 1rem;
+  width: 100%;
+  border-collapse: collapse;
+}
+
+#versionTableWrapper th,
+#versionTableWrapper td {
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+}