|
|
@@ -59,29 +59,33 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
|
|
flex-direction: column;
|
|
|
}}
|
|
|
|
|
|
- /* 帖子选择器样式 */
|
|
|
- .post-selector-container {{
|
|
|
+ /* 顶部栏样式 */
|
|
|
+ .top-bar {{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
background: #0f3460;
|
|
|
- padding: 8px 20px;
|
|
|
+ padding: 6px 20px;
|
|
|
flex-shrink: 0;
|
|
|
- gap: 12px;
|
|
|
+ gap: 20px;
|
|
|
+ }}
|
|
|
+ .post-selector-container {{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
}}
|
|
|
.post-selector-label {{
|
|
|
color: #888;
|
|
|
- font-size: 13px;
|
|
|
+ font-size: 12px;
|
|
|
white-space: nowrap;
|
|
|
}}
|
|
|
.post-selector {{
|
|
|
- flex: 1;
|
|
|
- max-width: 400px;
|
|
|
- padding: 8px 12px;
|
|
|
+ width: 280px;
|
|
|
+ padding: 6px 10px;
|
|
|
background: #1a1a2e;
|
|
|
border: 1px solid #0f3460;
|
|
|
- border-radius: 6px;
|
|
|
+ border-radius: 4px;
|
|
|
color: #fff;
|
|
|
- font-size: 13px;
|
|
|
+ font-size: 12px;
|
|
|
cursor: pointer;
|
|
|
outline: none;
|
|
|
transition: all 0.2s;
|
|
|
@@ -96,7 +100,40 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
|
|
.post-selector option {{
|
|
|
background: #1a1a2e;
|
|
|
color: #fff;
|
|
|
- padding: 8px;
|
|
|
+ }}
|
|
|
+ /* 顶部图例样式 */
|
|
|
+ .top-legend {{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 16px;
|
|
|
+ margin-left: auto;
|
|
|
+ }}
|
|
|
+ .top-legend-group {{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ }}
|
|
|
+ .top-legend-title {{
|
|
|
+ color: #666;
|
|
|
+ font-size: 11px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }}
|
|
|
+ .top-legend-item {{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 11px;
|
|
|
+ color: #aaa;
|
|
|
+ gap: 4px;
|
|
|
+ }}
|
|
|
+ .top-legend-color {{
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 1.5px solid #fff;
|
|
|
+ }}
|
|
|
+ .top-legend-line {{
|
|
|
+ width: 16px;
|
|
|
+ height: 2px;
|
|
|
}}
|
|
|
|
|
|
/* 主内容区 */
|
|
|
@@ -456,32 +493,6 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
|
|
margin: 10px 0 6px;
|
|
|
color: #0f9b8e;
|
|
|
}}
|
|
|
- .legend {{
|
|
|
- margin-top: 10px;
|
|
|
- }}
|
|
|
- .legend-grid {{
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 1fr 1fr;
|
|
|
- gap: 4px 8px;
|
|
|
- }}
|
|
|
- .legend-item {{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-size: 11px;
|
|
|
- }}
|
|
|
- .legend-color {{
|
|
|
- width: 12px;
|
|
|
- height: 12px;
|
|
|
- border-radius: 50%;
|
|
|
- margin-right: 6px;
|
|
|
- flex-shrink: 0;
|
|
|
- }}
|
|
|
- .legend-line {{
|
|
|
- width: 20px;
|
|
|
- height: 3px;
|
|
|
- margin-right: 6px;
|
|
|
- flex-shrink: 0;
|
|
|
- }}
|
|
|
.detail-panel {{
|
|
|
margin-top: 20px;
|
|
|
padding: 15px;
|
|
|
@@ -951,11 +962,29 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="container">
|
|
|
- <div class="post-selector-container">
|
|
|
- <span class="post-selector-label">选择帖子:</span>
|
|
|
- <select class="post-selector" id="post-selector" onchange="switchTab(this.value)">
|
|
|
- {tabs_html}
|
|
|
- </select>
|
|
|
+ <div class="top-bar">
|
|
|
+ <div class="post-selector-container">
|
|
|
+ <span class="post-selector-label">帖子:</span>
|
|
|
+ <select class="post-selector" id="post-selector" onchange="switchTab(this.value)">
|
|
|
+ {tabs_html}
|
|
|
+ </select>
|
|
|
+ </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>
|
|
|
+ </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" 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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="main-content">
|
|
|
<div id="left-panel">
|
|
|
@@ -1022,51 +1051,6 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
|
|
<p style="color: #888; font-size: 11px;">点击图中的节点或边，这里会显示详细信息</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="legend">
|
|
|
- <h2>节点</h2>
|
|
|
- <div class="legend-grid">
|
|
|
- <div class="legend-item">
|
|
|
- <div class="legend-color" style="background: #f39c12; border: 2px solid #fff;"></div>
|
|
|
- <span>灵感点</span>
|
|
|
- </div>
|
|
|
- <div class="legend-item">
|
|
|
- <div class="legend-color" style="background: #3498db; border: 2px solid #fff;"></div>
|
|
|
- <span>目的点</span>
|
|
|
- </div>
|
|
|
- <div class="legend-item">
|
|
|
- <div class="legend-color" style="background: #9b59b6; border: 2px solid #fff;"></div>
|
|
|
- <span>关键点</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <h2>边</h2>
|
|
|
- <div class="legend-grid">
|
|
|
- <div class="legend-item">
|
|
|
- <div class="legend-line" style="background: #e94560;"></div>
|
|
|
- <span>相同(≥0.8)</span>
|
|
|
- </div>
|
|
|
- <div class="legend-item">
|
|
|
- <div class="legend-line" style="background: linear-gradient(90deg, #e94560 0%, #e94560 40%, transparent 40%, transparent 60%, #e94560 60%);"></div>
|
|
|
- <span>相似(0.5-0.8)</span>
|
|
|
- </div>
|
|
|
- <div class="legend-item">
|
|
|
- <div class="legend-line" style="background: #9b59b6;"></div>
|
|
|
- <span>属于</span>
|
|
|
- </div>
|
|
|
- <div class="legend-item">
|
|
|
- <div class="legend-line" style="background: #2ecc71;"></div>
|
|
|
- <span>分类共现(跨)</span>
|
|
|
- </div>
|
|
|
- <div class="legend-item">
|
|
|
- <div class="legend-line" style="background: #3498db;"></div>
|
|
|
- <span>分类共现(内)</span>
|
|
|
- </div>
|
|
|
- <div class="legend-item">
|
|
|
- <div class="legend-line" style="background: #f39c12;"></div>
|
|
|
- <span>标签共现</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
