Quellcode durchsuchen

refactor: 精简可视化导航栏匹配信息显示

优化:
- 移除导航栏中的层级路径显示
- 移除Top排名显示
- 采用紧凑布局:[灵感分类] 名称 分数
- 简化样式,提升可读性

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
yangxiaohui vor 2 Wochen
Ursprung
Commit
063d92a925
1 geänderte Dateien mit 23 neuen und 75 gelöschten Zeilen
  1. 23 75
      visualize_inspiration_points.py

+ 23 - 75
visualize_inspiration_points.py

@@ -860,7 +860,6 @@ def generate_inspiration_card_html(
                         <div class="match-header-right">
                             <span class="detail-label">[灵感分类]</span>
                             <span class="match-category">{html_module.escape(element_name)}</span>
-                            <span class="match-hierarchy">({hierarchy_html})</span>
                         </div>
                     </div>
                     <div class="match-toggle-main">▼</div>
@@ -1450,32 +1449,16 @@ def generate_detail_modal_content_js() -> str:
             if (index === 0) navItem.classList.add('active');
             navItem.dataset.cardIndex = index;
 
-            // 生成匹配列表HTML
+            // 生成匹配列表HTML - 精简版:只显示[灵感分类]名称 score
             let matchesHtml = '';
             if (top3Matches && top3Matches.length > 0) {
                 matchesHtml = '<div class="nav-item-matches">';
                 top3Matches.forEach((match, i) => {
-                    // 生成层级路径
-                    let hierarchyHtml = '';
-                    if (match.hierarchy && match.hierarchy.length > 0) {
-                        hierarchyHtml = '<div class="nav-match-hierarchy">';
-                        match.hierarchy.forEach((level, idx) => {
-                            if (idx > 0) {
-                                hierarchyHtml += '<span class="hierarchy-separator">›</span>';
-                            }
-                            hierarchyHtml += `<span class="hierarchy-item">${level}</span>`;
-                        });
-                        hierarchyHtml += '</div>';
-                    }
-
                     matchesHtml += `
-                        <div class="nav-match-item">
-                            <span class="nav-match-rank rank-${match.rank}">Top${match.rank}</span>
-                            <div class="nav-match-content">
-                                <span class="nav-match-name">${match.name}</span>
-                                ${hierarchyHtml}
-                                <span class="nav-match-score">${match.score.toFixed(2)}</span>
-                            </div>
+                        <div class="nav-match-item-compact">
+                            <span class="nav-match-label">[灵感分类]</span>
+                            <span class="nav-match-name-compact">${match.name}</span>
+                            <span class="nav-match-score-compact">${match.score.toFixed(2)}</span>
                         </div>
                     `;
                 });
@@ -1925,75 +1908,40 @@ def generate_html(
             border-top: 1px solid #e5e7eb;
         }}
 
-        .nav-match-item {{
-            padding: 8px 0;
+        .nav-match-item-compact {{
+            padding: 6px 0;
             font-size: 12px;
-            color: #6b7280;
             display: flex;
-            align-items: flex-start;
+            align-items: center;
             gap: 6px;
+            line-height: 1.4;
         }}
 
-        .nav-match-item:not(:last-child) {{
+        .nav-match-item-compact:not(:last-child) {{
             border-bottom: 1px dashed #e5e7eb;
         }}
 
-        .nav-match-rank {{
-            font-weight: 700;
-            color: #9ca3af;
-            min-width: 20px;
-            flex-shrink: 0;
-        }}
-
-        .nav-match-rank.rank-1 {{
-            color: #f59e0b;
-        }}
-
-        .nav-match-rank.rank-2 {{
-            color: #c0c0c0;
-        }}
-
-        .nav-match-rank.rank-3 {{
-            color: #cd7f32;
-        }}
-
-        .nav-match-content {{
-            flex: 1;
-            line-height: 1.6;
-            min-width: 0;
-        }}
-
-        .nav-match-name {{
-            color: #1f2937;
+        .nav-match-label {{
+            color: #10b981;
             font-weight: 600;
-            display: block;
-            margin-bottom: 4px;
-        }}
-
-        .nav-match-hierarchy {{
             font-size: 11px;
-            color: #9ca3af;
-            display: flex;
-            align-items: center;
-            gap: 4px;
-            flex-wrap: wrap;
-            margin-bottom: 3px;
-        }}
-
-        .hierarchy-item {{
-            display: inline-flex;
-            align-items: center;
-            gap: 4px;
+            flex-shrink: 0;
         }}
 
-        .hierarchy-separator {{
-            color: #d1d5db;
+        .nav-match-name-compact {{
+            color: #1f2937;
+            font-weight: 500;
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }}
 
-        .nav-match-score {{
+        .nav-match-score-compact {{
             color: #667eea;
             font-weight: 700;
-            font-size: 13px;
+            font-size: 12px;
+            flex-shrink: 0;
         }}
 
         .inspirations-section {{