|
|
@@ -59,31 +59,44 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
|
|
flex-direction: column;
|
|
|
}}
|
|
|
|
|
|
- /* Tab样式 */
|
|
|
- .tabs {{
|
|
|
+ /* 帖子选择器样式 */
|
|
|
+ .post-selector-container {{
|
|
|
display: flex;
|
|
|
+ align-items: center;
|
|
|
background: #0f3460;
|
|
|
- padding: 0 20px;
|
|
|
- overflow-x: auto;
|
|
|
+ padding: 8px 20px;
|
|
|
flex-shrink: 0;
|
|
|
+ gap: 12px;
|
|
|
}}
|
|
|
- .tab {{
|
|
|
- padding: 12px 20px;
|
|
|
- cursor: pointer;
|
|
|
- border-bottom: 3px solid transparent;
|
|
|
+ .post-selector-label {{
|
|
|
+ color: #888;
|
|
|
+ font-size: 13px;
|
|
|
white-space: nowrap;
|
|
|
+ }}
|
|
|
+ .post-selector {{
|
|
|
+ flex: 1;
|
|
|
+ max-width: 400px;
|
|
|
+ padding: 8px 12px;
|
|
|
+ background: #1a1a2e;
|
|
|
+ border: 1px solid #0f3460;
|
|
|
+ border-radius: 6px;
|
|
|
+ color: #fff;
|
|
|
font-size: 13px;
|
|
|
- color: #888;
|
|
|
+ cursor: pointer;
|
|
|
+ outline: none;
|
|
|
transition: all 0.2s;
|
|
|
}}
|
|
|
- .tab:hover {{
|
|
|
- color: #fff;
|
|
|
- background: rgba(255,255,255,0.05);
|
|
|
+ .post-selector:hover {{
|
|
|
+ border-color: #e94560;
|
|
|
}}
|
|
|
- .tab.active {{
|
|
|
- color: #e94560;
|
|
|
- border-bottom-color: #e94560;
|
|
|
- background: rgba(233, 69, 96, 0.1);
|
|
|
+ .post-selector:focus {{
|
|
|
+ border-color: #e94560;
|
|
|
+ box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.2);
|
|
|
+ }}
|
|
|
+ .post-selector option {{
|
|
|
+ background: #1a1a2e;
|
|
|
+ color: #fff;
|
|
|
+ padding: 8px;
|
|
|
}}
|
|
|
|
|
|
/* 主内容区 */
|
|
|
@@ -938,8 +951,11 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="container">
|
|
|
- <div class="tabs" id="tabs">
|
|
|
- {tabs_html}
|
|
|
+ <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="main-content">
|
|
|
<div id="left-panel">
|
|
|
@@ -1144,11 +1160,6 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
|
|
|
|
|
egoSvg.call(egoZoom);
|
|
|
|
|
|
- // 绑定Tab点击事件
|
|
|
- document.querySelectorAll(".tab").forEach((tab, index) => {{
|
|
|
- tab.addEventListener("click", () => switchTab(index));
|
|
|
- }});
|
|
|
-
|
|
|
// 绑定关系图控制面板事件
|
|
|
// 全选复选框事件
|
|
|
document.querySelectorAll('.select-all input').forEach(cb => {{
|
|
|
@@ -1440,17 +1451,12 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
|
|
}}
|
|
|
}}
|
|
|
|
|
|
- // 切换Tab
|
|
|
+ // 切换帖子
|
|
|
function switchTab(index) {{
|
|
|
- currentIndex = index;
|
|
|
-
|
|
|
- // 更新Tab样式
|
|
|
- document.querySelectorAll(".tab").forEach((tab, i) => {{
|
|
|
- tab.classList.toggle("active", i === index);
|
|
|
- }});
|
|
|
+ currentIndex = parseInt(index);
|
|
|
|
|
|
// 更新图谱
|
|
|
- renderGraph(allGraphData[index]);
|
|
|
+ renderGraph(allGraphData[currentIndex]);
|
|
|
}}
|
|
|
|
|
|
// 渲染图谱
|
|
|
@@ -5282,17 +5288,17 @@ def generate_combined_html(all_graph_data: List[Dict], persona_tree_data: Dict,
|
|
|
persona_tree_data: 完整的人设树数据（节点和边）
|
|
|
output_file: 输出文件路径
|
|
|
"""
|
|
|
- # 生成Tab HTML
|
|
|
+ # 生成帖子选项HTML
|
|
|
tabs_html = ""
|
|
|
for i, data in enumerate(all_graph_data):
|
|
|
post_title = data.get("postTitle", "")
|
|
|
# 使用帖子标题，如果太长则截断
|
|
|
if post_title:
|
|
|
- tab_name = post_title[:15] + "..." if len(post_title) > 15 else post_title
|
|
|
+ option_name = post_title[:30] + "..." if len(post_title) > 30 else post_title
|
|
|
else:
|
|
|
- tab_name = f"帖子 {i+1}"
|
|
|
- active_class = "active" if i == 0 else ""
|
|
|
- tabs_html += f'<div class="tab {active_class}" data-index="{i}">{tab_name}</div>\n'
|
|
|
+ option_name = f"帖子 {i+1}"
|
|
|
+ selected = "selected" if i == 0 else ""
|
|
|
+ tabs_html += f'<option value="{i}" {selected}>{i+1}. {option_name}</option>\n'
|
|
|
|
|
|
# 生成HTML
|
|
|
html_content = HTML_TEMPLATE.format(
|
