Home Verkennen Help
Inloggen
yangxiaohui
/
how
1
0
Vork 0
Bestanden Issues 0 Pull-aanvragen 0 Wiki
Bladeren bron

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

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

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

Co-Authored-By: Claude <noreply@anthropic.com>
yangxiaohui 4 dagen geleden
bovenliggende
5359234542
commit
6dbcbd3371
1 gewijzigde bestanden met toevoegingen van 42 en 14 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 42 14
      script/data_processing/visualize_match_graph.py

+ 42 - 14
script/data_processing/visualize_match_graph.py
Bestand weergeven 

@@ -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>