前端: 将不支持格式提示改为毛玻璃居中弹窗

templates/index.html

@@ -60,6 +60,31 @@
     .supported { margin-top: 1rem; font-size: 0.8rem; color: #636e72; }
     .supported span { color: #0984e3; font-weight: 600; }
 
+    /* 弹窗模态框 - 毛玻璃居中效果 */
+    .modal-overlay {
+      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+      background: rgba(0, 0, 0, 0.45);
+      display: flex; align-items: center; justify-content: center;
+      z-index: 10000;
+    }
+    .modal-content {
+      background: rgba(255, 255, 255, 0.25);
+      border-radius: 16px; padding: 1.8rem 1.5rem;
+      text-align: center; width: 340px; max-width: 90%;
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      border: 1px solid rgba(255, 255, 255, 0.35);
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+    }
+    .modal-content h3 { color: #2d3436; font-size: 1.1rem; margin-bottom: 0.5rem; }
+    .modal-content p { color: #636e72; font-size: 0.85rem; margin-bottom: 1.2rem; line-height: 1.4; }
+    .modal-btn {
+      padding: 0.5rem 1.5rem; background: #0984e3; color: #fff;
+      border: none; border-radius: 8px; font-size: 0.9rem; cursor: pointer;
+      transition: background .2s;
+    }
+    .modal-btn:hover { background: #074c8a; }
+
     @media (max-width: 480px) {
       body { padding: 1rem; }
       h1 { font-size: 1.2rem; }
@@ -111,6 +136,20 @@
 
     const SUPPORTED_EXTENSIONS = ['.ncm', '.kgm', '.kgma', '.vpr'];
 
+    function showModal(message) {
+      const existing = document.querySelector('.modal-overlay');
+      if (existing) existing.remove();
+      const overlay = document.createElement('div');
+      overlay.className = 'modal-overlay';
+      overlay.innerHTML =
+        '<div class="modal-content">' +
+        '<h3>⚠️ 文件格式不支持</h3>' +
+        '<p>' + message + '</p>' +
+        '<button class="modal-btn" onclick="this.closest(\'.modal-overlay\').remove()">确定</button>' +
+        '</div>';
+      document.body.appendChild(overlay);
+    }
+
     // 点击上传区域选择文件
     dropZone.addEventListener('click', () => fileInput.click());
 
@@ -143,7 +182,7 @@
       for (const f of fileListObj) {
         const ext = f.name.slice(f.name.lastIndexOf('.')).toLowerCase();
         if (!SUPPORTED_EXTENSIONS.includes(ext)) {
-          alert('不支持的文件格式: ' + f.name + '\\n仅支持: .ncm / .kgm / .kgma / .vpr');
+          showModal('文件 "' + f.name + '" 格式不受支持<br>仅支持: .ncm / .kgm / .kgma / .vpr 格式的音乐文件');
           continue;
         }
         if (files.some(existing => existing.name === f.name)) continue;