update

sku3d/sku3d/test/index.html

@@ -11,17 +11,38 @@
             max-height: 200px;
             margin: 10px;
         }
+        .result-card {
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            padding: 10px;
+            margin: 10px;
+            width: 250px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
         .result-image {
-            max-width: 150px;
-            max-height: 150px;
-            margin: 5px;
-            cursor: pointer;
+            max-width: 230px;
+            max-height: 230px;
+            object-fit: contain;
+            display: block;
+            margin: 0 auto;
         }
         .results-container {
             display: flex;
             flex-wrap: wrap;
-            gap: 10px;
+            gap: 15px;
             margin-top: 20px;
+            justify-content: flex-start;
+        }
+        .result-info {
+            margin-top: 10px;
+            font-size: 14px;
+        }
+        .score-badge {
+            background-color: #007bff;
+            color: white;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-size: 12px;
         }
     </style>
 </head>
@@ -150,14 +171,18 @@
 
             try {
                 const response = await fetch(`${baseUrl}/image/fassi/list?url=${imageUrl}`, {
-                    method: 'GET'
+                    method: 'GET',
+                    headers: {
+                        'Authorization': token,
+                        'Content-Type': 'application/json'
+                    }
                 });
 
                 const data = await response.json();
-                if (response.ok) {
-                    displayResults(data);
+                if (response.ok && data.errorNo === 200) {
+                    displayResults(data.result);
                 } else {
-                    alert('搜索失败: ' + JSON.stringify(data));
+                    alert('搜索失败: ' + (data.errorDesc || JSON.stringify(data)));
                 }
             } catch (error) {
                 alert('搜索出错: ' + error.message);
@@ -174,13 +199,33 @@
             }
 
             results.forEach(result => {
-                const imgUrl = result.rawImage?.url || result.thumbnail?.url;
+                const imgUrl = result.rawImage?.url;
                 if (imgUrl) {
-                    const img = document.createElement('img');
-                    img.src = imgUrl;
-                    img.className = 'result-image';
-                    img.title = result.nameCn || '未命名';
-                    resultsDiv.appendChild(img);
+                    const resultCard = document.createElement('div');
+                    resultCard.className = 'result-card';
+                    
+                    // 格式化时间
+                    const createTime = new Date(result.createTime);
+                    const formattedTime = createTime.toLocaleString('zh-CN', {
+                        year: 'numeric',
+                        month: '2-digit',
+                        day: '2-digit',
+                        hour: '2-digit',
+                        minute: '2-digit'
+                    });
+
+                    // 格式化相似度分数
+                    const score = (result.score * 100).toFixed(2);
+                    
+                    resultCard.innerHTML = `
+                        <img src="${imgUrl}" class="result-image" onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTYiIGZpbGw9IiNhYWEiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj7lm77niYfliqDovb3lpLHotKU8L3RleHQ+PC9zdmc+'" alt="${result.nameCn || '未命名'}">
+                        <div class="result-info">
+                            <div><strong>${result.nameCn || '未命名'}</strong></div>
+                            <div>相似度: <span class="score-badge">${score}%</span></div>
+                            <div>创建时间: ${formattedTime}</div>
+                        </div>
+                    `;
+                    resultsDiv.appendChild(resultCard);
                 }
             });
         }