From 5cb7785a38596d80dffc73f0c021abc7d85f58c5 Mon Sep 17 00:00:00 2001
From: kuangji <819823900@qq.com>
Date: Tue, 26 May 2026 10:32:47 +0800
Subject: [PATCH] skills upload function app.js

---
 app/static/app.js | 61 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)

diff --git a/app/static/app.js b/app/static/app.js
index 58c4ee5..9df48d4 100644
--- a/app/static/app.js
+++ b/app/static/app.js
@@ -1,4 +1,7 @@
 const form = document.querySelector("#upload-form");
+const skillUploadForm = document.querySelector("#skill-upload-form");
+const skillCollectionSelect = document.querySelector("#skill-collection");
+const skillUploadStatus = document.querySelector("#skill-upload-status");
 const result = document.querySelector("#result");
 const summary = document.querySelector("#summary");
 const skills = document.querySelector("#skills");
@@ -27,6 +30,64 @@ async function pollTask(statusUrl) {
   }
 }
 
+function renderSkillCollections(collections, selectedSlug) {
+  const currentValue = selectedSlug || skillCollectionSelect.value;
+  skillCollectionSelect.innerHTML = "";
+
+  collections.forEach((collection) => {
+    const option = document.createElement("option");
+    option.value = collection.slug;
+    option.textContent = `${collection.label}（${collection.skill_count}）`;
+    if (collection.slug === currentValue) {
+      option.selected = true;
+    }
+    skillCollectionSelect.appendChild(option);
+  });
+}
+
+async function refreshSkillCollections(selectedSlug) {
+  const response = await fetch("/skill-collections");
+  const payload = await response.json();
+  if (!response.ok) {
+    throw new Error(payload.detail || "技能合集刷新失败");
+  }
+  renderSkillCollections(payload.collections, selectedSlug);
+}
+
+skillUploadForm.addEventListener("submit", async (event) => {
+  event.preventDefault();
+
+  const uploadButton = skillUploadForm.querySelector("button");
+  uploadButton.disabled = true;
+  uploadButton.textContent = "上传中...";
+  skillUploadStatus.textContent = "正在上传并解压技能合集...";
+
+  try {
+    const data = new FormData(skillUploadForm);
+    const response = await fetch("/skill-collections/upload", {
+      method: "POST",
+      body: data,
+    });
+    const payload = await response.json();
+    if (!response.ok) {
+      throw new Error(payload.detail || "上传失败");
+    }
+
+    renderSkillCollections(payload.collections, payload.collection.slug);
+    skillUploadForm.reset();
+    skillUploadStatus.textContent = payload.message;
+  } catch (error) {
+    skillUploadStatus.textContent = error.message;
+  } finally {
+    uploadButton.disabled = false;
+    uploadButton.textContent = "上传合集";
+  }
+});
+
+refreshSkillCollections().catch((error) => {
+  skillUploadStatus.textContent = error.message;
+});
+
 form.addEventListener("submit", async (event) => {
   event.preventDefault();
   button.disabled = true;