Open Source

2025-04-22 09:11:40 +08:00
commit a4bf39a958
14 changed files with 1043 additions and 0 deletions
--- a/frontend/v1/index.html
+++ b/frontend/v1/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charset="UTF-8" />
+    <title>Kenney Asset Gallery</title>
+    <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>
+    <h1>🎮 Kenney Asset Gallery</h1>
+
+    <!-- 筛选栏 -->
+    <div id="filters">
+      <label for="categoryFilter">选择分类：</label>
+      <select name="categoryFilter" id="categoryFilter">
+        <option value="all">📂 所有分类</option>
+      </select>
+      <label for="tagFilter">选择标签：</label>
+      <select name="tagFilter" id="tagFilter">
+        <option value="all">🏷️ 所有标签</option>
+      </select>
+    </div>
+
+    <div id="gallery"></div>
+
+    <script src="script.js"></script>
+  </body>
+</html>
--- a/frontend/v1/script.js
+++ b/frontend/v1/script.js
@@ -0,0 +1,98 @@
+let allData = [];
+
+function sanitize(str) {
+  return str.replaceAll("\\", "/");
+}
+
+function populateFilters(data) {
+  const catSet = new Set();
+  const tagSet = new Set();
+
+  data.forEach(item => {
+    catSet.add(item.properties?.Category?.[0]);
+    (item.properties?.Tags || []).forEach(tag => tagSet.add(tag));
+  });
+
+  const catFilter = document.getElementById("categoryFilter");
+  [...catSet].sort().forEach(cat => {
+    const option = document.createElement("option");
+    option.value = cat;
+    option.textContent = cat;
+    catFilter.appendChild(option);
+  });
+
+  const tagFilter = document.getElementById("tagFilter");
+  [...tagSet].sort().forEach(tag => {
+    const option = document.createElement("option");
+    option.value = tag;
+    option.textContent = tag;
+    tagFilter.appendChild(option);
+  });
+}
+
+function render(data) {
+  const gallery = document.getElementById("gallery");
+  gallery.innerHTML = ""; // clear
+
+  data.forEach((item, index) => {
+    const images = (item.images || []).map(sanitize);
+    const tags = (item.properties?.Tags || []).join(', ');
+    const category = item.properties?.Category?.[0] || 'Uncategorized';
+    const downloadPath = sanitize(item.download);
+
+    const card = document.createElement("div");
+    card.className = "card";
+    card.setAttribute("data-category", category);
+    card.setAttribute("data-tags", tags);
+
+    const galleryGroupId = `gallery-${index}`;
+    card.innerHTML = `
+      <div class="lg-gallery" id="${galleryGroupId}">
+        <a href="${images[0]}" data-lg-size="1400-800">
+          <img src="${images[0]}" alt="${item.title}">
+        </a>
+        ${images.slice(1).map(img => `
+          <a href="${img}" data-lg-size="1400-800" style="display:none;"></a>
+        `).join("")}
+      </div>
+      <div class="card-body">
+        <div class="card-title">${item.title}</div>
+        <div class="card-tags">Tags: ${tags}</div>
+        <div class="card-footer">
+          <a class="download-btn" href="${downloadPath}" download>⬇️ 下载资源</a>
+        </div>
+      </div>
+    `;
+    gallery.appendChild(card);
+
+    // 初始化 lightGallery
+    lightGallery(document.getElementById(galleryGroupId), {
+      selector: 'a',
+      thumbnail: true,
+      zoom: true
+    });
+  });
+}
+
+function filterGallery() {
+  const cat = document.getElementById("categoryFilter").value;
+  const tag = document.getElementById("tagFilter").value;
+
+  const filtered = allData.filter(item => {
+    const matchCat = (cat === 'all') || (item.properties?.Category?.[0] === cat);
+    const matchTag = (tag === 'all') || (item.properties?.Tags || []).includes(tag);
+    return matchCat && matchTag;
+  });
+
+  render(filtered);
+}
+
+fetch("data/kenney_data_local.json")
+  .then(res => res.json())
+  .then(data => {
+    allData = data;
+    populateFilters(data);
+    render(data);
+    document.getElementById("categoryFilter").addEventListener("change", filterGallery);
+    document.getElementById("tagFilter").addEventListener("change", filterGallery);
+  });
--- a/frontend/v1/style.css
+++ b/frontend/v1/style.css
@@ -0,0 +1,82 @@
+body {
+  font-family: "Segoe UI", sans-serif;
+  background-color: #f0f2f5;
+  margin: 0;
+  padding: 2rem;
+  color: #333;
+}
+
+h1 {
+  text-align: center;
+  margin-bottom: 2rem;
+  color: #444;
+}
+
+#gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 1.5rem;
+}
+
+.card {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  transition: transform 0.2s;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+}
+
+.card img {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+}
+
+.card-body {
+  padding: 1rem;
+}
+
+.card-title {
+  font-size: 1.2rem;
+  margin-bottom: 0.5rem;
+}
+
+.card-tags {
+  font-size: 0.85rem;
+  color: #666;
+}
+
+.card-footer {
+  margin-top: 1rem;
+}
+
+.download-btn {
+  display: inline-block;
+  padding: 0.4rem 0.8rem;
+  background: #4caf50;
+  color: white;
+  border-radius: 6px;
+  text-decoration: none;
+  font-size: 0.9rem;
+  transition: background 0.2s;
+}
+
+.download-btn:hover {
+  background: #45a049;
+}
+
+#filters {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+select {
+  padding: 0.5rem;
+  font-size: 1rem;
+}
--- 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;
+}