Update script.js

script.js

@@ -644,6 +644,146 @@ document.addEventListener('DOMContentLoaded', function() {
         console.warn('JSZip 未加载！打包下载功能不可用');
         showDebugInfo('警告：打包下载需要 JSZip 库支持');
     }
+  unction extractDouyinVariant(text) {
+  const re = /(https?:\/\/v\.douyin\.com\/[^\s]+)(?:\s+\d{2}\/\d{2})?/i;
+  const m = text.match(re);
+  if (!m) return null;
+  return {
+    displayUrl: m[0],  // 完整变体，用于 UI 展示
+    cleanUrl:   m[1]   // 纯短链，用于调用接口
+  };
+}
+
+// —— 2. 修复粘贴按钮 —— 
+document.getElementById('clipboard-btn').addEventListener('click', async () => {
+  const videoUrlInput = document.getElementById('urlInput');
+  try {
+    const text = await navigator.clipboard.readText();
+    if (!text) throw new Error('剪贴板为空');
+    videoUrlInput.value = text;
+    const variant = extractDouyinVariant(text);
+    if (variant) {
+      showDebugInfo(`已提取：${variant.displayUrl}`);
+      parseContent(variant.cleanUrl);
+    } else {
+      showAlert('未检测到有效的短链，请检查复制的内容');
+    }
+  } catch (err) {
+    console.warn('读取剪贴板失败', err);
+    showAlert('无法访问剪贴板，请手动粘贴链接');
+    videoUrlInput.focus();
+  }
+});
+
+// —— 3. “解析”按钮 & 回车 同样使用新提取 —— 
+document.getElementById('parse-btn').addEventListener('click', () => {
+  const raw = document.getElementById('urlInput').value.trim();
+  const variant = extractDouyinVariant(raw);
+  if (variant) {
+    showDebugInfo(`调用接口：${variant.cleanUrl}`);
+    parseContent(variant.cleanUrl);
+  } else {
+    showAlert('请输入或粘贴有效的抖音短链');
+  }
+});
+document.getElementById('urlInput').addEventListener('keypress', e => {
+  if (e.key === 'Enter') {
+    const raw = e.target.value.trim();
+    const variant = extractDouyinVariant(raw);
+    if (variant) parseContent(variant.cleanUrl);
+    else showAlert('请输入或粘贴有效的抖音短链');
+  }
+});
+
+// —— 4. 修改 parseContent 接口调用，直接用 cleanUrl —— 
+async function parseContent(cleanUrl) {
+  if (isParsing) return;
+  isParsing = true;
+  toggleLoading(true);
+  try {
+    showDebugInfo(`开始解析：${cleanUrl}`);
+    const apiUrl = `https://api.kxzjoker.cn/api/jiexi_video?url=${encodeURIComponent(cleanUrl)}`;
+    const resp = await fetch(apiUrl);
+    const data = await resp.json();
+    if (!data.success) throw new Error(data.message || '解析失败');
+    renderContent(data.data);
+    saveToHistory({ url: cleanUrl, title: data.data.video_title, cover: data.data.image_url });
+    document.getElementById('share-container').style.display = 'flex';
+  } catch (err) {
+    showDebugInfo(`错误：${err.message}`);
+    showAlert(`❌ 解析失败：${err.message}`);
+  } finally {
+    toggleLoading(false);
+    isParsing = false;
+  }
+}
+
+// —— 5. 图集预览：闭包变量 & 批量绑定 —— 
+let galleryImages = [];
+let currentIndex = 0;
+
+function updateModalImage() {
+  document.getElementById('modal-image').src = galleryImages[currentIndex];
+}
+
+document.getElementById('image-close').addEventListener('click', () => {
+  document.getElementById('image-modal').style.display = 'none';
+});
+document.getElementById('image-prev').addEventListener('click', () => {
+  if (currentIndex > 0) {
+    currentIndex--;
+    updateModalImage();
+  }
+});
+document.getElementById('image-next').addEventListener('click', () => {
+  if (currentIndex < galleryImages.length - 1) {
+    currentIndex++;
+    updateModalImage();
+  }
+});
+
+// —— 6. renderContent 中图集渲染改造示例 —— 
+function renderContent(data) {
+  const contentBox = document.getElementById('contentBox');
+  contentBox.innerHTML = '';
+
+  if (data.images) {
+    // 把 images 赋给闭包
+    galleryImages = data.images;
+
+    // 生成只带 data-index 的缩略图
+    const galleryHTML = data.images.map((img, idx) => `
+      <div class="gallery-item" data-index="${idx}">
+        < img src="${img}" alt="图集 ${idx + 1}"
+             loading="lazy"
+             style="width:100%;aspect-ratio:1/1;object-fit:cover;cursor:pointer;">
+        <div class="image-index">${idx+1}</div>
+      </div>
+    `).join('');
+
+    contentBox.innerHTML = `
+      <div class="media-card">
+        <h2 style="color: var(--primary-color);"><i class="fas fa-images"></i>${data.title||'未命名图集'}</h2>
+        <div id="gallery-grid" style="display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));">
+          ${galleryHTML}
+        </div>
+        <div style="text-align:center;margin-top:15px;">
+          <i class="fas fa-file-archive"></i> 打包下载
+        </div>
+      </div>
+    `;
+    contentBox.style.display = 'block';
+    contentBox.scrollIntoView({ behavior: 'smooth' });
+
+    // 批量绑定点击事件
+    document.querySelectorAll('#gallery-grid .gallery-item').forEach(el => {
+      el.addEventListener('click', () => {
+        currentIndex = parseInt(el.getAttribute('data-index'), 10);
+        updateModalImage();
+        document.getElementById('image-modal').style.display = 'flex';
+      });
+    });
+
 
     setInterval(updateTime, 1000);
     updateTime();