yangxiaohui
/
how


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299
							#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
将匹配图谱数据可视化为交互式HTML文件

输入：match_graph目录下的JSON文件
输出：单个HTML文件，包含所有帖子的图谱，可通过Tab切换
"""

import json
from pathlib import Path
from typing import Dict, List
import sys

# 添加项目根目录到路径
project_root = Path(__file__).parent.parent.parent
sys.path.insert(0, str(project_root))

from script.data_processing.path_config import PathConfig


HTML_TEMPLATE = '''<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>匹配图谱可视化</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        * {{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }}
        body {{
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: #1a1a2e;
            color: #eee;
            overflow: hidden;
        }}
        #container {{
            display: flex;
            height: 100vh;
            flex-direction: column;
        }}

        /* Tab样式 */
        .tabs {{
            display: flex;
            background: #0f3460;
            padding: 0 20px;
            overflow-x: auto;
            flex-shrink: 0;
        }}
        .tab {{
            padding: 12px 20px;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            white-space: nowrap;
            font-size: 13px;
            color: #888;
            transition: all 0.2s;
        }}
        .tab:hover {{
            color: #fff;
            background: rgba(255,255,255,0.05);
        }}
        .tab.active {{
            color: #e94560;
            border-bottom-color: #e94560;
            background: rgba(233, 69, 96, 0.1);
        }}

        /* 主内容区 */
        .main-content {{
            display: flex;
            flex: 1;
            overflow: hidden;
        }}
        #graph {{
            flex: 1;
            position: relative;
        }}
        #sidebar {{
            width: 280px;
            background: #16213e;
            padding: 15px;
            overflow-y: auto;
            border-left: 1px solid #0f3460;
        }}
        h1 {{
            font-size: 15px;
            margin-bottom: 10px;
            color: #e94560;
        }}
        h2 {{
            font-size: 12px;
            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;
            background: #0f3460;
            border-radius: 8px;
            display: none;
        }}
        .detail-panel.active {{
            display: block;
        }}
        .detail-panel h3 {{
            font-size: 14px;
            margin-bottom: 10px;
            color: #e94560;
        }}
        .detail-panel p {{
            font-size: 12px;
            line-height: 1.6;
            color: #ccc;
            margin: 5px 0;
        }}
        .detail-panel .label {{
            color: #888;
        }}
        .detail-panel .close-btn {{
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            border: none;
            color: #888;
            cursor: pointer;
            font-size: 16px;
        }}
        .detail-panel .close-btn:hover {{
            color: #e94560;
        }}
        .detail-panel-wrapper {{
            position: relative;
        }}
        .similarity-score {{
            background: #e94560;
            color: #fff;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: bold;
        }}
        .edge-description {{
            background: #1a1a2e;
            padding: 10px;
            border-radius: 4px;
            margin-top: 8px;
            font-size: 11px;
            line-height: 1.5;
        }}
        svg {{
            width: 100%;
            height: 100%;
        }}
        .node {{
            cursor: pointer;
        }}
        .node circle, .node rect {{
            stroke-width: 3px;
        }}
        .node .post-node {{
            stroke: #fff;
            stroke-dasharray: 4,2;
        }}
        .node .persona-node {{
            stroke: #fff;
        }}
        .node text {{
            font-size: 11px;
            fill: #fff;
            pointer-events: none;
        }}
        .link {{
            stroke-opacity: 0.7;
        }}
        .link-hitarea {{
            stroke: transparent;
            stroke-width: 15px;
            cursor: pointer;
            fill: none;
        }}
        .link-hitarea:hover + .link {{
            stroke-opacity: 1;
            stroke-width: 3px;
        }}
        .edge-label {{
            font-size: 10px;
            fill: #fff;
            pointer-events: none;
            text-anchor: middle;
        }}
        .edge-label-bg {{
            fill: rgba(0,0,0,0.7);
        }}
        .link.match {{
            stroke: #e94560;
            stroke-dasharray: 5,5;
        }}
        .link.category-cross {{
            stroke: #2ecc71;
        }}
        .link.category-intra {{
            stroke: #27ae60;
            stroke-dasharray: 3,3;
        }}
        .link.tag-cooccur {{
            stroke: #f39c12;
        }}
        .link.belong {{
            stroke: #9b59b6;
        }}
        .link.contain {{
            stroke: #8e44ad;
            stroke-dasharray: 2,2;
        }}
        /* 镜像边样式（虚线，颜色与原边相同） */
        .link.mirror-category-cross {{
            stroke: #2ecc71;
            stroke-dasharray: 6,3;
        }}
        .link.mirror-category-intra {{
            stroke: #27ae60;
            stroke-dasharray: 6,3;
        }}
        .link.mirror-tag-cooccur {{
            stroke: #f39c12;
            stroke-dasharray: 6,3;
        }}
        .link.mirror-belong {{
            stroke: #9b59b6;
            stroke-dasharray: 6,3;
        }}
        .link.mirror-contain {{
            stroke: #8e44ad;
            stroke-dasharray: 6,3;
        }}
        /* 二阶镜像边样式（点划线） */
        .link.second-order {{
            stroke: #17a2b8;
            stroke-dasharray: 8,3,2,3;
        }}
        /* 高亮/灰化样式 */
        .node.dimmed circle, .node.dimmed rect {{
            opacity: 0.15 !important;
        }}
        .node.dimmed text {{
            opacity: 0.15 !important;
        }}
        .link-group.dimmed .link {{
            stroke-opacity: 0.08 !important;
        }}
        .link-group.dimmed .edge-label-group {{
            opacity: 0.15 !important;
        }}
        .node.highlighted circle, .node.highlighted rect {{
            stroke: #fff !important;
            stroke-width: 4px !important;
            filter: drop-shadow(0 0 8px rgba(255,255,255,0.5));
        }}
        .link-group.highlighted .link {{
            stroke-opacity: 1 !important;
            stroke-width: 3px !important;
            filter: drop-shadow(0 0 4px rgba(255,255,255,0.3));
        }}
        .tooltip {{
            position: absolute;
            background: rgba(0,0,0,0.9);
            color: #fff;
            padding: 10px 15px;
            border-radius: 6px;
            font-size: 12px;
            pointer-events: none;
            max-width: 300px;
            z-index: 1000;
            display: none;
        }}
        .controls {{
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(22, 33, 62, 0.9);
            padding: 15px;
            border-radius: 8px;
            z-index: 100;
        }}
        .controls button {{
            background: #0f3460;
            color: #fff;
            border: none;
            padding: 8px 15px;
            margin: 5px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }}
        .controls button:hover {{
            background: #e94560;
        }}
    </style>
</head>
<body>
    <div id="container">
        <div class="tabs" id="tabs">
            {tabs_html}
        </div>
        <div class="main-content">
            <div id="graph">
                <div class="controls">
                    <button onclick="resetZoom()">重置视图</button>
                    <button onclick="toggleLabels()">切换标签</button>
                </div>
                <div class="tooltip" id="tooltip"></div>
            </div>
            <div id="sidebar">
                <h1>匹配图谱</h1>

                <div class="detail-panel active" id="detailPanel">
                    <h3 id="detailTitle">点击节点或边查看详情</h3>
                    <div id="detailContent">
                        <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: #666; border: 2px dashed #fff;"></div>
                            <span>帖子(虚线)</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background: #666; border: 2px solid #fff;"></div>
                            <span>人设(实线)</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background: #666; border-radius: 50%;"></div>
                            <span>标签(圆)</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background: #666; border-radius: 2px;"></div>
                            <span>分类(方)</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background: #666; opacity: 1;"></div>
                            <span>直接匹配</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background: #666; opacity: 0.5;"></div>
                            <span>扩展节点</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background: #f39c12;"></div>
                            <span>灵感点</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background: #3498db;"></div>
                            <span>目的点</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background: #9b59b6;"></div>
                            <span>关键点</span>
                        </div>
                    </div>
                    <h2>边(人设/实线)</h2>
                    <div class="legend-grid">
                        <div class="legend-item">
                            <div class="legend-line" style="background: #e94560;"></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: #27ae60;"></div>
                            <span>分类共现(内)</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-line" style="background: #f39c12;"></div>
                            <span>标签共现</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: #8e44ad;"></div>
                            <span>包含</span>
                        </div>
                    </div>
                    <h2>帖子镜像边(直接)</h2>
                    <div class="legend-grid">
                        <div class="legend-item">
                            <div class="legend-line" style="background: repeating-linear-gradient(90deg, #2ecc71, #2ecc71 6px, transparent 6px, transparent 9px);"></div>
                            <span>分类共现</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-line" style="background: repeating-linear-gradient(90deg, #f39c12, #f39c12 6px, transparent 6px, transparent 9px);"></div>
                            <span>标签共现</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-line" style="background: repeating-linear-gradient(90deg, #9b59b6, #9b59b6 6px, transparent 6px, transparent 9px);"></div>
                            <span>属于</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-line" style="background: repeating-linear-gradient(90deg, #8e44ad, #8e44ad 6px, transparent 6px, transparent 9px);"></div>
                            <span>包含</span>
                        </div>
                    </div>
                    <h2>帖子镜像边(二阶)</h2>
                    <div class="legend-grid">
                        <div class="legend-item">
                            <div class="legend-line" style="background: repeating-linear-gradient(90deg, #17a2b8, #17a2b8 8px, transparent 8px, transparent 11px, #17a2b8 11px, #17a2b8 13px, transparent 13px, transparent 16px);"></div>
                            <span>通过扩展节点</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 所有帖子的图谱数据
        const allGraphData = {all_graph_data};

        // 当前选中的帖子索引
        let currentIndex = 0;
        let simulation = null;
        let svg = null;
        let g = null;
        let zoom = null;
        let showLabels = true;

        // 初始化
        function init() {{
            const container = document.getElementById("graph");
            const width = container.clientWidth;
            const height = container.clientHeight;

            svg = d3.select("#graph")
                .append("svg")
                .attr("width", width)
                .attr("height", height);

            g = svg.append("g");

            zoom = d3.zoom()
                .scaleExtent([0.1, 4])
                .on("zoom", (event) => {{
                    g.attr("transform", event.transform);
                }});

            svg.call(zoom);

            // 绑定Tab点击事件
            document.querySelectorAll(".tab").forEach((tab, index) => {{
                tab.addEventListener("click", () => switchTab(index));
            }});

            // 显示第一个帖子
            switchTab(0);
        }}

        // 切换Tab
        function switchTab(index) {{
            currentIndex = index;

            // 更新Tab样式
            document.querySelectorAll(".tab").forEach((tab, i) => {{
                tab.classList.toggle("active", i === index);
            }});

            // 更新图谱
            renderGraph(allGraphData[index]);
        }}

        // 渲染图谱
        function renderGraph(data) {{
            // 清空现有图谱
            g.selectAll("*").remove();
            if (simulation) {{
                simulation.stop();
            }}

            const container = document.getElementById("graph");
            const width = container.clientWidth;
            const height = container.clientHeight;

            // 准备数据
            const nodes = data.nodes.map(n => ({{
                ...n,
                id: n.节点ID,
                source: n.节点ID.startsWith("帖子_") ? "帖子" : "人设",
                level: n.节点层级
            }}));

            const links = data.edges.map(e => ({{
                ...e,
                source: e.源节点ID,
                target: e.目标节点ID,
                type: e.边类型
            }}));

            // 分离节点类型
            const postNodes = nodes.filter(n => n.source === "帖子");
            const personaNodes = nodes.filter(n => n.source === "人设" && !n.是否扩展);
            const expandedNodes = nodes.filter(n => n.source === "人设" && n.是否扩展);
            const matchLinks = links.filter(l => l.type === "匹配");

            // 构建帖子节点到人设节点的映射
            const postToPersona = {{}};
            const personaToPost = {{}};
            matchLinks.forEach(l => {{
                const sid = typeof l.source === "object" ? l.source.id : l.source;
                const tid = typeof l.target === "object" ? l.target.id : l.target;
                if (!postToPersona[sid]) postToPersona[sid] = [];
                postToPersona[sid].push(tid);
                if (!personaToPost[tid]) personaToPost[tid] = [];
                personaToPost[tid].push(sid);
            }});

            // 找出所有连通分量
            function findConnectedComponents(nodes, links) {{
                const nodeIds = new Set(nodes.map(n => n.id));
                const adj = {{}};
                nodeIds.forEach(id => adj[id] = []);

                links.forEach(l => {{
                    const sid = typeof l.source === "object" ? l.source.id : l.source;
                    const tid = typeof l.target === "object" ? l.target.id : l.target;
                    if (nodeIds.has(sid) && nodeIds.has(tid)) {{
                        adj[sid].push(tid);
                        adj[tid].push(sid);
                    }}
                }});

                const visited = new Set();
                const components = [];

                nodeIds.forEach(startId => {{
                    if (visited.has(startId)) return;

                    const component = [];
                    const queue = [startId];

                    while (queue.length > 0) {{
                        const id = queue.shift();
                        if (visited.has(id)) continue;
                        visited.add(id);
                        component.push(id);
                        adj[id].forEach(neighbor => {{
                            if (!visited.has(neighbor)) queue.push(neighbor);
                        }});
                    }}

                    components.push(component);
                }});

                return components;
            }}

            // 按大小排序连通分量（大的在前）
            const components = findConnectedComponents(nodes, links)
                .sort((a, b) => b.length - a.length);
            console.log(`找到 ${{components.length}} 个连通分量`);

            // 为每个节点分配连通分量ID和分量内的X范围
            const nodeToComponent = {{}};
            const componentCenters = {{}};
            const componentBounds = {{}};
            const padding = 50;  // 分量之间的间距
            const totalPadding = padding * (components.length - 1);
            const availableWidth = width - totalPadding - 100;  // 留边距

            // 根据分量大小分配宽度
            const totalNodes = nodes.length;
            let currentX = 50;  // 起始边距

            components.forEach((comp, i) => {{
                const compWidth = Math.max(150, (comp.length / totalNodes) * availableWidth);
                const centerX = currentX + compWidth / 2;
                componentCenters[i] = centerX;
                componentBounds[i] = {{ start: currentX, end: currentX + compWidth, width: compWidth }};
                comp.forEach(nodeId => {{
                    nodeToComponent[nodeId] = i;
                }});
                currentX += compWidth + padding;
            }});

            // 使用重心法(Barycenter)减少边交叉
            // 迭代优化：交替调整两层节点的顺序

            const nodeTargetX = {{}};
            const personaXMap = {{}};

            // 对每个连通分量单独处理
            components.forEach((comp, compIdx) => {{
                const bounds = componentBounds[compIdx];
                const compPostNodes = postNodes.filter(n => nodeToComponent[n.id] === compIdx);
                const compPersonaNodes = personaNodes.filter(n => nodeToComponent[n.id] === compIdx);

                if (compPostNodes.length === 0 || compPersonaNodes.length === 0) {{
                    // 没有匹配关系的分量，均匀分布
                    const spacing = bounds.width / (comp.length + 1);
                    comp.forEach((nodeId, i) => {{
                        const node = nodes.find(n => n.id === nodeId);
                        if (node) {{
                            node.x = bounds.start + spacing * (i + 1);
                            nodeTargetX[nodeId] = node.x;
                            if (node.source === "人设") personaXMap[nodeId] = node.x;
                        }}
                    }});
                    return;
                }}

                // 初始化：给人设节点一个初始顺序
                let personaOrder = compPersonaNodes.map((n, i) => ({{ node: n, order: i }}));

                // 迭代优化（3轮）
                for (let iter = 0; iter < 3; iter++) {{
                    // 1. 根据人设节点位置，计算帖子节点的重心
                    const postBarycenter = {{}};
                    compPostNodes.forEach(pn => {{
                        const matched = postToPersona[pn.id] || [];
                        if (matched.length > 0) {{
                            const avgOrder = matched.reduce((sum, pid) => {{
                                const po = personaOrder.find(p => p.node.id === pid);
                                return sum + (po ? po.order : 0);
                            }}, 0) / matched.length;
                            postBarycenter[pn.id] = avgOrder;
                        }} else {{
                            postBarycenter[pn.id] = 0;
                        }}
                    }});

                    // 按重心排序帖子节点
                    const sortedPosts = [...compPostNodes].sort((a, b) =>
                        postBarycenter[a.id] - postBarycenter[b.id]
                    );

                    // 2. 根据帖子节点位置，重新计算人设节点的重心
                    const personaBarycenter = {{}};
                    compPersonaNodes.forEach(pn => {{
                        const matched = personaToPost[pn.id] || [];
                        if (matched.length > 0) {{
                            const avgOrder = matched.reduce((sum, pid) => {{
                                const idx = sortedPosts.findIndex(p => p.id === pid);
                                return sum + (idx >= 0 ? idx : 0);
                            }}, 0) / matched.length;
                            personaBarycenter[pn.id] = avgOrder;
                        }} else {{
                            personaBarycenter[pn.id] = personaOrder.find(p => p.node.id === pn.id)?.order || 0;
                        }}
                    }});

                    // 更新人设节点顺序
                    personaOrder = compPersonaNodes
                        .map(n => ({{ node: n, order: personaBarycenter[n.id] }}))
                        .sort((a, b) => a.order - b.order)
                        .map((item, i) => ({{ node: item.node, order: i }}));
                }}

                // 最终排序
                const finalPersonaOrder = personaOrder.map(p => p.node);
                const postBarycenter = {{}};
                compPostNodes.forEach(pn => {{
                    const matched = postToPersona[pn.id] || [];
                    if (matched.length > 0) {{
                        const avgOrder = matched.reduce((sum, pid) => {{
                            const idx = finalPersonaOrder.findIndex(n => n.id === pid);
                            return sum + (idx >= 0 ? idx : 0);
                        }}, 0) / matched.length;
                        postBarycenter[pn.id] = avgOrder;
                    }} else {{
                        postBarycenter[pn.id] = 0;
                    }}
                }});
                const finalPostOrder = [...compPostNodes].sort((a, b) =>
                    postBarycenter[a.id] - postBarycenter[b.id]
                );

                // 设置位置
                const personaSpacing = bounds.width / (finalPersonaOrder.length + 1);
                finalPersonaOrder.forEach((n, i) => {{
                    n.x = bounds.start + personaSpacing * (i + 1);
                    nodeTargetX[n.id] = n.x;
                    personaXMap[n.id] = n.x;
                }});

                const postSpacing = bounds.width / (finalPostOrder.length + 1);
                finalPostOrder.forEach((n, i) => {{
                    // 帖子节点用重心位置（匹配人设的平均X）
                    const matched = postToPersona[n.id] || [];
                    if (matched.length > 0) {{
                        const avgX = matched.reduce((sum, pid) => sum + (personaXMap[pid] || bounds.start + bounds.width/2), 0) / matched.length;
                        n.x = avgX;
                    }} else {{
                        n.x = bounds.start + postSpacing * (i + 1);
                    }}
                    nodeTargetX[n.id] = n.x;
                }});
            }});

            // 节点颜色
            const levelColors = {{
                "灵感点": "#f39c12",
                "目的点": "#3498db",
                "关键点": "#9b59b6"
            }};

            // 三层Y坐标（带倾斜：右边高，左边低）
            const postBaseY = height * 0.15;        // 帖子节点（顶层）
            const personaBaseY = height * 0.45;     // 直接匹配人设节点（中层）
            const expandedBaseY = height * 0.8;     // 扩展节点（底层）
            const tiltAmount = height * 0.2;        // 倾斜幅度

            // 根据X位置计算Y（右边高，左边低）
            function getTiltedY(baseY, x) {{
                const tilt = tiltAmount * (0.5 - x / width);
                return baseY + tilt;
            }}

            // 获取节点的基准Y
            function getNodeBaseY(d) {{
                if (d.source === "帖子") return postBaseY;
                if (d.是否扩展) return expandedBaseY;
                return personaBaseY;
            }}

            // 力导向模拟
            simulation = d3.forceSimulation(nodes)
                .force("link", d3.forceLink(links).id(d => d.id).distance(80).strength(0.1))
                .force("charge", d3.forceManyBody().strength(-300))
                // X方向：拉向目标位置，但允许被推开
                .force("x", d3.forceX(d => nodeTargetX[d.id] || width / 2).strength(0.15))
                // Y方向力：三层布局+倾斜
                .force("y", d3.forceY(d => {{
                    const baseY = getNodeBaseY(d);
                    return getTiltedY(baseY, d.x || width / 2);
                }}).strength(0.5))
                .force("collision", d3.forceCollide().radius(40));

            // 边类型到CSS类的映射
            const edgeTypeClass = {{
                "匹配": "match",
                "分类共现（跨点）": "category-cross",
                "分类共现（点内）": "category-intra",
                "标签共现": "tag-cooccur",
                "属于": "belong",
                "包含": "contain",
                // 镜像边（帖子节点之间，虚线）
                "镜像_分类共现（跨点）": "mirror-category-cross",
                "镜像_分类共现（点内）": "mirror-category-intra",
                "镜像_标签共现": "mirror-tag-cooccur",
                "镜像_属于": "mirror-belong",
                "镜像_包含": "mirror-contain"
            }};

            // 获取边的CSS类（处理二阶边）
            function getEdgeClass(edgeType) {{
                if (edgeTypeClass[edgeType]) return edgeTypeClass[edgeType];
                if (edgeType.startsWith("二阶_")) return "second-order";
                return "match";
            }}

            // 创建边的容器
            const linkGroup = g.append("g").attr("class", "links");

            // 为每条边创建组
            const linkG = linkGroup.selectAll("g")
                .data(links)
                .join("g")
                .attr("class", "link-group");

            // 绘制点击热区（透明宽线）
            const linkHitarea = linkG.append("line")
                .attr("class", "link-hitarea");

            // 绘制可见的边
            const link = linkG.append("line")
                .attr("class", d => "link " + getEdgeClass(d.type))
                .attr("stroke-width", d => d.type === "匹配" ? 2.5 : 1.5);

            // 为匹配边添加分数标签
            const edgeLabels = linkG.filter(d => d.type === "匹配" && d.边详情 && d.边详情.相似度)
                .append("g")
                .attr("class", "edge-label-group");

            edgeLabels.append("rect")
                .attr("class", "edge-label-bg")
                .attr("rx", 3)
                .attr("ry", 3);

            edgeLabels.append("text")
                .attr("class", "edge-label")
                .text(d => {{
                    const score = d.边详情.相似度;
                    return typeof score === "number" ? score.toFixed(2) : score;
                }});

            // 边的点击事件
            linkHitarea.on("click", (event, d, i) => {{
                event.stopPropagation();
                const linkIndex = links.indexOf(d);
                highlightEdge(d, linkIndex);
                showEdgeInfo(d);
            }})
            .on("mouseover", function(event, d) {{
                d3.select(this.parentNode).select(".link")
                    .attr("stroke-opacity", 1)
                    .attr("stroke-width", 4);
            }})
            .on("mouseout", function(event, d) {{
                d3.select(this.parentNode).select(".link")
                    .attr("stroke-opacity", 0.7)
                    .attr("stroke-width", d.type === "匹配" ? 2.5 : 1.5);
            }});

            // 绘制节点
            const node = g.append("g")
                .selectAll("g")
                .data(nodes)
                .join("g")
                .attr("class", "node")
                .call(d3.drag()
                    .on("start", dragstarted)
                    .on("drag", dragged)
                    .on("end", dragended));

            // 根据节点类型绘制不同形状：标签用圆形，分类用方形
            // 扩展节点用较低透明度表示
            node.each(function(d) {{
                const el = d3.select(this);
                const isExpanded = d.是否扩展 === true;
                const size = d.source === "帖子" ? 12 : (isExpanded ? 8 : 10);
                const fill = levelColors[d.level] || "#666";
                const nodeClass = d.source === "帖子" ? "post-node" : "persona-node";
                const opacity = isExpanded ? 0.5 : 1;

                if (d.节点类型 === "分类") {{
                    // 方形
                    el.append("rect")
                        .attr("width", size * 2)
                        .attr("height", size * 2)
                        .attr("x", -size)
                        .attr("y", -size)
                        .attr("fill", fill)
                        .attr("class", nodeClass)
                        .attr("rx", 3)
                        .attr("opacity", opacity);
                }} else {{
                    // 圆形（标签）
                    el.append("circle")
                        .attr("r", size)
                        .attr("fill", fill)
                        .attr("class", nodeClass)
                        .attr("opacity", opacity);
                }}
            }});

            const labels = node.append("text")
                .attr("dx", 15)
                .attr("dy", 4)
                .text(d => d.节点名称)
                .style("display", showLabels ? "block" : "none");

            // 工具提示
            const tooltip = d3.select("#tooltip");

            node.on("mouseover", (event, d) => {{
                tooltip.style("display", "block")
                    .html(`<strong>${{d.节点名称}}</strong><br/>类型: ${{d.节点类型}}<br/>层级: ${{d.节点层级}}`);
            }})
            .on("mousemove", (event) => {{
                tooltip.style("left", (event.pageX + 15) + "px")
                    .style("top", (event.pageY - 10) + "px");
            }})
            .on("mouseout", () => {{
                tooltip.style("display", "none");
            }})
            .on("click", (event, d) => {{
                event.stopPropagation();
                highlightNode(d);
                showNodeInfo(d);
            }});

            // 更新位置
            simulation.on("tick", () => {{
                // 更新热区线
                linkHitarea
                    .attr("x1", d => d.source.x)
                    .attr("y1", d => d.source.y)
                    .attr("x2", d => d.target.x)
                    .attr("y2", d => d.target.y);

                // 更新可见边
                link
                    .attr("x1", d => d.source.x)
                    .attr("y1", d => d.source.y)
                    .attr("x2", d => d.target.x)
                    .attr("y2", d => d.target.y);

                // 更新边标签位置（放在边的中点）
                edgeLabels.attr("transform", d => {{
                    const midX = (d.source.x + d.target.x) / 2;
                    const midY = (d.source.y + d.target.y) / 2;
                    return `translate(${{midX}},${{midY}})`;
                }});

                // 更新标签背景大小
                edgeLabels.each(function(d) {{
                    const textEl = d3.select(this).select("text").node();
                    if (textEl) {{
                        const bbox = textEl.getBBox();
                        d3.select(this).select("rect")
                            .attr("x", bbox.x - 3)
                            .attr("y", bbox.y - 1)
                            .attr("width", bbox.width + 6)
                            .attr("height", bbox.height + 2);
                    }}
                }});

                node.attr("transform", d => `translate(${{d.x}},${{d.y}})`);
            }});

            // 拖拽函数
            function dragstarted(event, d) {{
                if (!event.active) simulation.alphaTarget(0.3).restart();
                d.fx = d.x;
                d.fy = d.y;
            }}

            function dragged(event, d) {{
                d.fx = event.x;
                d.fy = event.y;
            }}

            function dragended(event, d) {{
                if (!event.active) simulation.alphaTarget(0);
                d.fx = null;
                d.fy = null;
            }}

            // 清除所有高亮
            function clearHighlight() {{
                node.classed("dimmed", false).classed("highlighted", false);
                linkG.classed("dimmed", false).classed("highlighted", false);
            }}

            // 高亮指定的节点和边
            function highlightElements(highlightNodeIds, highlightLinkIndices) {{
                // 先灰化所有
                node.classed("dimmed", true).classed("highlighted", false);
                linkG.classed("dimmed", true).classed("highlighted", false);

                // 高亮指定节点
                node.filter(d => highlightNodeIds.has(d.id))
                    .classed("dimmed", false)
                    .classed("highlighted", true);

                // 高亮指定边
                linkG.filter((d, i) => highlightLinkIndices.has(i))
                    .classed("dimmed", false)
                    .classed("highlighted", true);
            }}

            // 点击节点时的高亮逻辑
            function highlightNode(clickedNode) {{
                const highlightNodeIds = new Set([clickedNode.id]);
                const highlightLinkIndices = new Set();

                links.forEach((link, i) => {{
                    const sourceId = typeof link.source === "object" ? link.source.id : link.source;
                    const targetId = typeof link.target === "object" ? link.target.id : link.target;

                    // 与点击节点直接相连的边
                    if (sourceId === clickedNode.id || targetId === clickedNode.id) {{
                        highlightLinkIndices.add(i);
                        highlightNodeIds.add(sourceId);
                        highlightNodeIds.add(targetId);

                        // 如果是帖子节点，还要高亮对应的镜像边
                        if (clickedNode.source === "帖子") {{
                            // 找到通过该帖子连接的其他帖子（镜像边）
                            links.forEach((otherLink, j) => {{
                                const otherType = otherLink.type;
                                if (otherType.startsWith("镜像_") || otherType.startsWith("二阶_")) {{
                                    const oSrc = typeof otherLink.source === "object" ? otherLink.source.id : otherLink.source;
                                    const oTgt = typeof otherLink.target === "object" ? otherLink.target.id : otherLink.target;
                                    if (oSrc === clickedNode.id || oTgt === clickedNode.id) {{
                                        highlightLinkIndices.add(j);
                                        highlightNodeIds.add(oSrc);
                                        highlightNodeIds.add(oTgt);
                                    }}
                                }}
                            }});
                        }}
                    }}
                }});

                highlightElements(highlightNodeIds, highlightLinkIndices);
            }}

            // 点击边时的高亮逻辑
            function highlightEdge(clickedLink, clickedIndex) {{
                const highlightNodeIds = new Set();
                const highlightLinkIndices = new Set([clickedIndex]);

                const sourceId = typeof clickedLink.source === "object" ? clickedLink.source.id : clickedLink.source;
                const targetId = typeof clickedLink.target === "object" ? clickedLink.target.id : clickedLink.target;

                highlightNodeIds.add(sourceId);
                highlightNodeIds.add(targetId);

                // 如果是二阶边，显示完整路径
                if (clickedLink.type.startsWith("二阶_") && clickedLink.边详情) {{
                    const detail = clickedLink.边详情;
                    // 分类节点
                    if (detail.分类节点1) highlightNodeIds.add(detail.分类节点1);
                    if (detail.分类节点2) highlightNodeIds.add(detail.分类节点2);
                    // 标签节点
                    if (detail.标签节点1) highlightNodeIds.add(detail.标签节点1);
                    if (detail.标签节点2) highlightNodeIds.add(detail.标签节点2);

                    // 找出路径上的边
                    links.forEach((link, i) => {{
                        const lSrc = typeof link.source === "object" ? link.source.id : link.source;
                        const lTgt = typeof link.target === "object" ? link.target.id : link.target;

                        // 帖子->标签 的匹配边
                        if (link.type === "匹配") {{
                            if ((lSrc === sourceId && lTgt === detail.标签节点1) ||
                                (lSrc === targetId && lTgt === detail.标签节点2)) {{
                                highlightLinkIndices.add(i);
                            }}
                        }}
                        // 标签->分类 的属于边
                        if (link.type === "属于") {{
                            if ((lSrc === detail.标签节点1 && lTgt === detail.分类节点1) ||
                                (lSrc === detail.标签节点2 && lTgt === detail.分类节点2)) {{
                                highlightLinkIndices.add(i);
                            }}
                        }}
                        // 分类之间的边
                        if ((lSrc === detail.分类节点1 && lTgt === detail.分类节点2) ||
                            (lSrc === detail.分类节点2 && lTgt === detail.分类节点1)) {{
                            highlightLinkIndices.add(i);
                        }}
                    }});
                }}
                // 如果是镜像边，显示对应的人设边
                else if (clickedLink.type.startsWith("镜像_") && clickedLink.边详情) {{
                    const detail = clickedLink.边详情;
                    if (detail.源人设节点) highlightNodeIds.add(detail.源人设节点);
                    if (detail.目标人设节点) highlightNodeIds.add(detail.目标人设节点);

                    // 找出对应的人设边和匹配边
                    links.forEach((link, i) => {{
                        const lSrc = typeof link.source === "object" ? link.source.id : link.source;
                        const lTgt = typeof link.target === "object" ? link.target.id : link.target;

                        // 匹配边
                        if (link.type === "匹配") {{
                            if ((lSrc === sourceId && lTgt === detail.源人设节点) ||
                                (lSrc === targetId && lTgt === detail.目标人设节点)) {{
                                highlightLinkIndices.add(i);
                            }}
                        }}
                        // 人设边
                        if ((lSrc === detail.源人设节点 && lTgt === detail.目标人设节点) ||
                            (lSrc === detail.目标人设节点 && lTgt === detail.源人设节点)) {{
                            highlightLinkIndices.add(i);
                        }}
                    }});
                }}

                highlightElements(highlightNodeIds, highlightLinkIndices);
            }}

            // 点击空白处清除高亮
            svg.on("click", (event) => {{
                if (event.target === svg.node()) {{
                    clearHighlight();
                    closeDetailPanel();
                }}
            }});
        }}

        // 控制函数
        function resetZoom() {{
            const container = document.getElementById("graph");
            const width = container.clientWidth;
            const height = container.clientHeight;
            svg.transition().duration(750).call(
                zoom.transform,
                d3.zoomIdentity.translate(width/2, height/2).scale(1).translate(-width/2, -height/2)
            );
        }}

        function toggleLabels() {{
            showLabels = !showLabels;
            g.selectAll(".node text").style("display", showLabels ? "block" : "none");
        }}

        function showNodeInfo(d) {{
            const panel = document.getElementById("detailPanel");
            panel.classList.add("active");
            document.getElementById("detailTitle").textContent = d.source === "帖子" ? "📌 帖子节点" : "👤 人设节点";

            let html = `
                <p><span class="label">节点ID:</span> ${{d.节点ID}}</p>
                <p><span class="label">名称:</span> <strong>${{d.节点名称}}</strong></p>
                <p><span class="label">类型:</span> ${{d.节点类型}}</p>
                <p><span class="label">层级:</span> ${{d.节点层级}}</p>
            `;

            if (d.权重) {{
                html += `<p><span class="label">权重:</span> ${{d.权重}}</p>`;
            }}
            if (d.所属分类 && d.所属分类.length > 0) {{
                html += `<p><span class="label">所属分类:</span> ${{d.所属分类.join(" > ")}}</p>`;
            }}
            if (d.帖子数) {{
                html += `<p><span class="label">帖子数:</span> ${{d.帖子数}}</p>`;
            }}
            document.getElementById("detailContent").innerHTML = html;
        }}

        function showEdgeInfo(d) {{
            const panel = document.getElementById("detailPanel");
            panel.classList.add("active");

            const sourceNode = typeof d.source === "object" ? d.source : {{ id: d.source }};
            const targetNode = typeof d.target === "object" ? d.target : {{ id: d.target }};

            // 判断是否为镜像边
            const isMirror = d.type.startsWith("镜像_");
            document.getElementById("detailTitle").textContent = isMirror ? "🪞 镜像边详情" : "🔗 边详情";

            let html = `
                <p><span class="label">边类型:</span> <strong>${{d.type}}</strong></p>
                <p><span class="label">源节点:</span> ${{sourceNode.节点名称 || sourceNode.id}}</p>
                <p><span class="label">目标节点:</span> ${{targetNode.节点名称 || targetNode.id}}</p>
            `;

            if (d.边详情) {{
                if (d.边详情.相似度 !== undefined) {{
                    const score = typeof d.边详情.相似度 === "number" ? d.边详情.相似度.toFixed(2) : d.边详情.相似度;
                    html += `<p><span class="label">相似度:</span> <span class="similarity-score">${{score}}</span></p>`;
                }}
                if (d.边详情.说明) {{
                    html += `<p><span class="label">说明:</span></p><div class="edge-description">${{d.边详情.说明}}</div>`;
                }}
                if (d.边详情.共现次数 !== undefined) {{
                    html += `<p><span class="label">共现次数:</span> ${{d.边详情.共现次数}}</p>`;
                }}
                // 镜像边特有信息
                if (d.边详情.原始边类型) {{
                    html += `<p><span class="label">原始边类型:</span> ${{d.边详情.原始边类型}}</p>`;
                }}
                if (d.边详情.源人设节点) {{
                    html += `<p><span class="label">源人设节点:</span> ${{d.边详情.源人设节点}}</p>`;
                }}
                if (d.边详情.目标人设节点) {{
                    html += `<p><span class="label">目标人设节点:</span> ${{d.边详情.目标人设节点}}</p>`;
                }}
            }}

            document.getElementById("detailContent").innerHTML = html;
        }}

        function closeDetailPanel() {{
            document.getElementById("detailPanel").classList.remove("active");
        }}

        // 页面加载完成后初始化
        window.addEventListener("load", init);
        window.addEventListener("resize", () => {{
            if (currentIndex >= 0) {{
                renderGraph(allGraphData[currentIndex]);
            }}
        }});
    </script>
</body>
</html>
'''


def generate_combined_html(all_graph_data: List[Dict], output_file: Path):
    """
    生成包含所有帖子图谱的HTML文件

    Args:
        all_graph_data: 所有帖子的图谱数据列表
        output_file: 输出文件路径
    """
    # 生成Tab 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
        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'

    # 生成HTML
    html_content = HTML_TEMPLATE.format(
        tabs_html=tabs_html,
        all_graph_data=json.dumps(all_graph_data, ensure_ascii=False)
    )

    with open(output_file, "w", encoding="utf-8") as f:
        f.write(html_content)


def main():
    # 使用路径配置
    config = PathConfig()

    print(f"账号: {config.account_name}")
    print(f"输出版本: {config.output_version}")
    print()

    # 输入目录
    match_graph_dir = config.intermediate_dir / "match_graph"

    # 输出文件
    output_file = config.intermediate_dir / "match_graph.html"

    print(f"输入目录: {match_graph_dir}")
    print(f"输出文件: {output_file}")
    print()

    # 读取所有匹配图谱文件
    graph_files = sorted(match_graph_dir.glob("*_match_graph.json"))
    print(f"找到 {len(graph_files)} 个匹配图谱文件")

    all_graph_data = []
    for i, graph_file in enumerate(graph_files, 1):
        print(f"  [{i}/{len(graph_files)}] 读取: {graph_file.name}")

        with open(graph_file, "r", encoding="utf-8") as f:
            match_graph_data = json.load(f)

        # 提取需要的数据
        graph_data = {
            "postId": match_graph_data["说明"]["帖子ID"],
            "postTitle": match_graph_data["说明"].get("帖子标题", ""),
            "stats": match_graph_data["说明"]["统计"],
            "nodes": match_graph_data["节点列表"],
            "edges": match_graph_data["边列表"]
        }
        all_graph_data.append(graph_data)

    # 生成HTML
    print("\n生成HTML文件...")
    generate_combined_html(all_graph_data, output_file)

    print("\n" + "="*60)
    print("处理完成!")
    print(f"输出文件: {output_file}")


if __name__ == "__main__":
    main()