update

sku3d/sku3d/test/index.html

@@ -10,6 +10,29 @@
             max-width: 200px;
             max-height: 200px;
             margin: 10px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            padding: 5px;
+        }
+        .preview-container {
+            margin: 10px 0;
+            min-height: 100px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .loading {
+            position: relative;
+            min-height: 200px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: rgba(255, 255, 255, 0.8);
+        }
+        .loading::after {
+            content: "搜索中...";
+            font-size: 16px;
+            color: #666;
         }
         .result-card {
             border: 1px solid #ddd;
@@ -85,8 +108,8 @@
                     <label for="searchImageUrl" class="form-label">搜索图片URL</label>
                     <input type="text" class="form-control" id="searchImageUrl" placeholder="输入搜索图片URL">
                 </div>
-                <div id="searchPreview"></div>
-                <button class="btn btn-primary" onclick="searchImage()">搜索</button>
+                <div id="searchPreview" class="preview-container"></div>
+                <button class="btn btn-primary" onclick="searchImage()" id="searchBtn">搜索</button>
             </div>
         </div>
 
@@ -109,7 +132,7 @@
             previewImageUrl(this.value, 'uploadPreview');
         });
 
-        document.getElementById('searchImageUrl').addEventListener('change', function(e) {
+        document.getElementById('searchImageUrl').addEventListener('input', function(e) {
             previewImageUrl(this.value, 'searchPreview');
         });
 
@@ -131,9 +154,18 @@
         }
 
         function previewImageUrl(url, previewId) {
-            if (!url) return;
+            if (!url) {
+                document.getElementById(previewId).innerHTML = '';
+                return;
+            }
+            const cleanedUrl = cleanImageUrl(url);
             const previewDiv = document.getElementById(previewId);
-            previewDiv.innerHTML = `<img src="${url}" class="preview-image" onerror="this.style.display='none'">`;
+            previewDiv.innerHTML = `
+                <img src="${cleanedUrl}" 
+                    class="preview-image" 
+                    onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTYiIGZpbGw9IiNhYWEiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj7lm77niYfliqDovb3lpLHotKU8L3RleHQ+PC9zdmc+'" 
+                    alt="预览图片">
+            `;
         }
 
         async function uploadImage() {
@@ -186,6 +218,12 @@
                 return;
             }
 
+            // 禁用搜索按钮并显示加载状态
+            const searchBtn = document.getElementById('searchBtn');
+            const resultsDiv = document.getElementById('searchResults');
+            searchBtn.disabled = true;
+            resultsDiv.innerHTML = '<div class="loading"></div>';
+
             try {
                 const cleanedUrl = cleanImageUrl(imageUrl);
                 const encodedUrl = encodeURIComponent(cleanedUrl);
@@ -201,10 +239,17 @@
                 if (response.ok && data.errorNo === 200) {
                     displayResults(data.result);
                 } else {
-                    alert('搜索失败: ' + (data.errorDesc || JSON.stringify(data)));
+                    resultsDiv.innerHTML = `<div class="alert alert-danger" role="alert">
+                        搜索失败: ${data.errorDesc || JSON.stringify(data)}
+                    </div>`;
                 }
             } catch (error) {
-                alert('搜索出错: ' + error.message);
+                resultsDiv.innerHTML = `<div class="alert alert-danger" role="alert">
+                    搜索出错: ${error.message}
+                </div>`;
+            } finally {
+                // 恢复搜索按钮状态
+                searchBtn.disabled = false;
             }
         }