Преглед на файлове

style: 完善顶部图例,增加形状说明

- 分三组:形状、颜色、边
- 形状:圆=标签,方块=分类
- 颜色:灵感(橙)、目的(蓝)、关键(紫)、人设(绿)
- 边:相同(实线)、相似(虚线)、属于、分类共现、标签共现
- 各组用深色背景区分,标题用红色醒目显示
- 组内用分隔线区分不同类别

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

Co-Authored-By: Claude <noreply@anthropic.com>
yangxiaohui преди 4 дни
родител
ревизия
6dbcbd3371
променени са 1 файла, в които са добавени 42 реда и са изтрити 14 реда
  1. 42 14
      script/data_processing/visualize_match_graph.py

+ 42 - 14
script/data_processing/visualize_match_graph.py

@@ -105,36 +105,56 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
         .top-legend {{
             display: flex;
             align-items: center;
-            gap: 16px;
+            gap: 6px;
             margin-left: auto;
         }}
         .top-legend-group {{
             display: flex;
             align-items: center;
-            gap: 10px;
+            gap: 8px;
+            padding: 4px 10px;
+            background: rgba(0,0,0,0.3);
+            border-radius: 4px;
         }}
         .top-legend-title {{
-            color: #666;
+            color: #e94560;
             font-size: 11px;
-            margin-right: 4px;
+            font-weight: bold;
+            margin-right: 2px;
         }}
         .top-legend-item {{
             display: flex;
             align-items: center;
-            font-size: 11px;
-            color: #aaa;
-            gap: 4px;
+            font-size: 10px;
+            color: #ccc;
+            gap: 3px;
         }}
-        .top-legend-color {{
+        .top-legend-circle {{
             width: 10px;
             height: 10px;
             border-radius: 50%;
-            border: 1.5px solid #fff;
+            border: 1.5px solid rgba(255,255,255,0.8);
+        }}
+        .top-legend-square {{
+            width: 9px;
+            height: 9px;
+            border-radius: 2px;
+            border: 1.5px solid rgba(255,255,255,0.8);
         }}
         .top-legend-line {{
             width: 16px;
             height: 2px;
         }}
+        .top-legend-line.dashed {{
+            background: none !important;
+            border-top: 2px dashed;
+        }}
+        .top-legend-divider {{
+            width: 1px;
+            height: 16px;
+            background: #444;
+            margin: 0 2px;
+        }}
 
         /* 主内容区 */
         .main-content {{
@@ -971,15 +991,23 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
             </div>
             <div class="top-legend">
                 <div class="top-legend-group">
-                    <span class="top-legend-title">节点</span>
-                    <div class="top-legend-item"><div class="top-legend-color" style="background:#f39c12;"></div>灵感</div>
-                    <div class="top-legend-item"><div class="top-legend-color" style="background:#3498db;"></div>目的</div>
-                    <div class="top-legend-item"><div class="top-legend-color" style="background:#9b59b6;"></div>关键</div>
+                    <span class="top-legend-title">形状</span>
+                    <div class="top-legend-item"><div class="top-legend-circle" style="background:#888;"></div>标签</div>
+                    <div class="top-legend-item"><div class="top-legend-square" style="background:#888;"></div>分类</div>
+                </div>
+                <div class="top-legend-group">
+                    <span class="top-legend-title">颜色</span>
+                    <div class="top-legend-item"><div class="top-legend-circle" style="background:#f39c12;"></div>灵感</div>
+                    <div class="top-legend-item"><div class="top-legend-circle" style="background:#3498db;"></div>目的</div>
+                    <div class="top-legend-item"><div class="top-legend-circle" style="background:#9b59b6;"></div>关键</div>
+                    <div class="top-legend-divider"></div>
+                    <div class="top-legend-item"><div class="top-legend-circle" style="background:#2ecc71;"></div>人设</div>
                 </div>
                 <div class="top-legend-group">
                     <span class="top-legend-title">边</span>
                     <div class="top-legend-item"><div class="top-legend-line" style="background:#e94560;"></div>相同</div>
-                    <div class="top-legend-item"><div class="top-legend-line" style="background:linear-gradient(90deg,#e94560 0%,#e94560 35%,transparent 35%,transparent 65%,#e94560 65%);"></div>相似</div>
+                    <div class="top-legend-item"><div class="top-legend-line dashed" style="border-color:#e94560;"></div>相似</div>
+                    <div class="top-legend-divider"></div>
                     <div class="top-legend-item"><div class="top-legend-line" style="background:#9b59b6;"></div>属于</div>
                     <div class="top-legend-item"><div class="top-legend-line" style="background:#2ecc71;"></div>分类共现</div>
                     <div class="top-legend-item"><div class="top-legend-line" style="background:#f39c12;"></div>标签共现</div>