tree_report.py

"""Generate a static left-to-right file tree from scan-result.json."""

from __future__ import annotations

import html
import json
import os
from collections import Counter
from pathlib import Path
from typing import Any
from urllib.parse import quote


PROJECT_DIR = Path(__file__).resolve().parent
INPUT_PATH = PROJECT_DIR / "outputs" / "scan-result.json"
OUTPUT_PATH = PROJECT_DIR / "outputs" / "tree.html"
MAX_PRIMARY_FILE_TYPES = 6
FOLDER_ICON = "📁"
DEFAULT_FILE_ICON = "📄"
FILE_ICONS = {
    ".py": "🐍",
    ".md": "📓",
    ".txt": "📝",
    ".pdf": "📕",
    ".doc": "📘",
    ".docx": "📘",
    ".xls": "📊",
    ".xlsx": "📊",
    ".csv": "📊",
    ".png": "🖼️",
    ".jpg": "🖼️",
    ".jpeg": "🖼️",
    ".gif": "🖼️",
    ".webp": "🖼️",
    ".mp4": "🎬",
    ".mkv": "🎬",
    ".avi": "🎬",
    ".mov": "🎬",
    ".mp3": "🎵",
    ".wav": "🎵",
    ".flac": "🎵",
    ".zip": "🗜️",
    ".rar": "🗜️",
    ".7z": "🗜️",
    ".html": "🌐",
    ".htm": "🌐",
    ".css": "🎨",
    ".js": "📜",
    ".ts": "📜",
    ".json": "🧩",
    ".yaml": "🧩",
    ".yml": "🧩",
    ".toml": "🧩",
}


def load_scan_result(path: Path = INPUT_PATH) -> dict[str, Any]:
    """Load and minimally validate a scan result JSON file."""

    with path.open("r", encoding="utf-8") as input_file:
        data = json.load(input_file)

    if not isinstance(data, dict) or not isinstance(data.get("root"), dict):
        raise ValueError("JSON 中缺少有效的 root 节点")
    return data


def _select_icon(node: dict[str, Any]) -> str:
    if node.get("type") == "directory":
        return FOLDER_ICON

    extension = Path(str(node.get("name", ""))).suffix.casefold()
    return FILE_ICONS.get(extension, DEFAULT_FILE_ICON)


def _format_size(size: int) -> str:
    units = ("B", "KB", "MB", "GB", "TB")
    value = float(size)
    for unit in units:
        if value < 1024 or unit == units[-1]:
            return f"{int(value)} {unit}" if unit == "B" else f"{value:.2f} {unit}"
        value /= 1024
    return f"{size} B"


def _summary_number(data: dict[str, Any], key: str) -> int:
    value = data.get(key, 0)
    return value if isinstance(value, int) and not isinstance(value, bool) else 0


def _collect_extension_counts(root: dict[str, Any]) -> Counter[str]:
    counts: Counter[str] = Counter()
    pending = [root]
    while pending:
        node = pending.pop()
        if node.get("type") == "file":
            extension = Path(str(node.get("name", ""))).suffix.casefold()
            counts[extension] += 1

        children = node.get("children", [])
        if isinstance(children, list):
            pending.extend(child for child in children if isinstance(child, dict))
    return counts


def _render_statistics(data: dict[str, Any]) -> str:
    extension_counts = _collect_extension_counts(data["root"])
    ranked_types = sorted(
        extension_counts.items(), key=lambda item: (-item[1], item[0])
    )
    primary_types = ranked_types[:MAX_PRIMARY_FILE_TYPES]
    other_count = sum(count for _, count in ranked_types[MAX_PRIMARY_FILE_TYPES:])

    type_items = []
    for extension, count in primary_types:
        label = extension or "无扩展名"
        icon = FILE_ICONS.get(extension, DEFAULT_FILE_ICON)
        type_items.append(
            '<span class="type-item">'
            f'<span aria-hidden="true">{icon}</span>'
            f'<span>{html.escape(label)}</span>'
            f"<strong>{count:,}</strong>"
            "</span>"
        )
    if other_count:
        type_items.append(
            '<span class="type-item">'
            '<span aria-hidden="true">📦</span>'
            "<span>其他</span>"
            f"<strong>{other_count:,}</strong>"
            "</span>"
        )
    if not type_items:
        type_items.append('<span class="type-empty">没有文件</span>')

    directory_count = _summary_number(data, "directory_count")
    file_count = _summary_number(data, "file_count")
    total_size = _summary_number(data, "total_size")
    return (
        '<section class="directory-statistics" aria-label="目录统计">'
        '<div class="stat-item"><span>文件夹数量</span>'
        f"<strong>{directory_count:,}</strong></div>"
        '<div class="stat-item"><span>文件数量</span>'
        f"<strong>{file_count:,}</strong></div>"
        '<div class="stat-item"><span>总大小</span>'
        f'<strong title="{total_size:,} 字节">{_format_size(total_size)}</strong></div>'
        '<div class="type-statistics"><span class="type-label">主要文件类型</span>'
        f'<div class="type-list">{"".join(type_items)}</div></div>'
        "</section>"
    )


def _prepare_tree(node: dict[str, Any]) -> dict[str, Any]:
    children = node.get("children", [])
    prepared_children = (
        [_prepare_tree(child) for child in children if isinstance(child, dict)]
        if isinstance(children, list)
        else []
    )
    return {
        "name": str(node.get("name", "未命名")),
        "path": str(node.get("path", "")),
        "type": "directory" if node.get("type") == "directory" else "file",
        "icon": _select_icon(node),
        "children": prepared_children,
    }


def _serialize_tree(node: dict[str, Any]) -> str:
    tree_json = json.dumps(
        _prepare_tree(node), ensure_ascii=False, separators=(",", ":")
    )
    return (
        tree_json.replace("&", "\\u0026")
        .replace("<", "\\u003c")
        .replace(">", "\\u003e")
        .replace("\u2028", "\\u2028")
        .replace("\u2029", "\\u2029")
    )


def _render_svg_export_button(
    svg_export_path: Path | None,
    html_output_path: Path,
) -> str:
    """Return a safe relative download link for an existing SVG export."""

    if svg_export_path is None:
        return ""

    svg_path = Path(svg_export_path).resolve()
    if not svg_path.is_file():
        return ""

    try:
        relative_path = os.path.relpath(
            svg_path, start=Path(html_output_path).resolve().parent
        )
    except ValueError:
        return ""

    href = quote(Path(relative_path).as_posix(), safe="/")
    return (
        '<a class="toolbar-button export-button" '
        f'href="{html.escape(href, quote=True)}" '
        f'download="{html.escape(svg_path.name, quote=True)}" '
        'title="下载独立 SVG 文件树">导出 SVG</a>'
    )


def generate_html(
    data: dict[str, Any],
    svg_export_path: Path | None = None,
    html_output_path: Path = OUTPUT_PATH,
) -> str:
    """Build a standalone left-to-right file tree from scan result data."""

    root = data["root"]
    tree_json = _serialize_tree(root)
    scan_path = html.escape(str(root.get("path", "")), quote=True)
    statistics_html = _render_statistics(data)
    svg_export_button = _render_svg_export_button(
        svg_export_path, html_output_path
    )

    return (
        """<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FolderVisualizer 横向文件树</title>
  <style>
    :root {
      color-scheme: light;
      font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
      color: #182033;
      background: #f4f7fb;
    }
    * { box-sizing: border-box; }
    body { margin: 0; background: #f4f7fb; }
    main { width: min(1600px, calc(100% - 32px)); margin: 28px auto; }
    header { margin-bottom: 16px; }
    h1 { margin: 0 0 8px; font-size: 28px; font-weight: 650; }
    .scan-path { margin: 0; color: #667085; overflow-wrap: anywhere; }
    .directory-statistics {
      display: grid;
      grid-template-columns: 150px 150px 180px minmax(320px, 1fr);
      gap: 10px;
      margin-bottom: 12px;
      padding: 12px;
      border: 1px solid #dfe6ef;
      border-radius: 10px;
      background: #ffffff;
    }
    .stat-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 3px;
      padding: 5px 8px;
      color: #667085;
    }
    .stat-item strong { color: #182033; font-size: 20px; }
    .type-statistics {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      padding: 5px 8px;
      border-left: 1px solid #e5eaf1;
    }
    .type-label { flex: 0 0 auto; color: #667085; }
    .type-list { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
    .type-item {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 7px;
      border-radius: 6px;
      background: #f3f6fa;
      color: #475467;
      white-space: nowrap;
    }
    .type-item strong { color: #182033; }
    .type-empty { color: #98a2b3; }
    .tree-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
    }
    .search-toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      flex: 1 1 620px;
    }
    .search-label { flex: 0 0 auto; font-weight: 600; }
    .search-input {
      min-width: 180px;
      flex: 1 1 360px;
      height: 38px;
      padding: 7px 11px;
      border: 1px solid #cfd8e5;
      border-radius: 8px;
      background: #ffffff;
      color: #182033;
      font: inherit;
    }
    .search-input:focus {
      border-color: #6f9fd5;
      outline: 2px solid #d9e9fb;
      outline-offset: 1px;
    }
    .toolbar-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 38px;
      padding: 0 14px;
      border: 1px solid #cfd8e5;
      border-radius: 8px;
      background: #ffffff;
      color: #344054;
      font: inherit;
      line-height: 1;
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
    }
    .toolbar-button:hover:not(:disabled) { background: #f3f7fc; }
    .toolbar-button:disabled { color: #98a2b3; cursor: default; }
    .search-count {
      min-width: 104px;
      color: #667085;
      text-align: right;
      white-space: nowrap;
    }
    .map-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
    }
    .zoom-controls {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .zoom-button { min-width: 62px; padding: 0 10px; }
    .zoom-level {
      min-width: 58px;
      color: #475467;
      text-align: center;
      white-space: nowrap;
    }
    .fit-button.active {
      border-color: #6f9fd5;
      background: #eaf3fd;
      color: #164a84;
    }
    .export-button {
      border-color: #4d87c5;
      background: #e7f1ff;
      color: #164a84;
      font-weight: 600;
    }
    .export-button:hover { background: #d9eaff; }
    .map-viewport {
      height: clamp(520px, calc(100vh - 295px), 820px);
      overflow: auto;
      background: #ffffff;
      border: 1px solid #dfe6ef;
      border-radius: 12px;
      box-shadow: 0 7px 24px rgba(35, 52, 78, 0.06);
    }
    .map-canvas {
      position: relative;
      min-width: 100%;
      min-height: 100%;
    }
    .map-scene {
      position: absolute;
      left: 0;
      top: 0;
      transform: scale(1);
      transform-origin: 0 0;
    }
    .connectors {
      position: absolute;
      inset: 0;
      overflow: visible;
      pointer-events: none;
    }
    .connector {
      fill: none;
      stroke: #c3ccd8;
      stroke-width: 1;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .nodes { position: absolute; inset: 0; }
    .map-node {
      position: absolute;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 8px;
      width: 240px;
      height: 40px;
      padding: 7px 11px;
      border: 1px solid #dce3ec;
      border-radius: 8px;
      background: #ffffff;
      color: #344054;
      box-shadow: 0 2px 7px rgba(35, 52, 78, 0.05);
    }
    .map-node.directory {
      border-color: #cbdcf3;
      background: #f3f8ff;
      color: #164a84;
      font-weight: 600;
    }
    .map-node.file { cursor: pointer; }
    .map-node.file:focus-visible {
      outline: 2px solid #6f9fd5;
      outline-offset: 2px;
    }
    .map-node.file.name-expanded {
      z-index: 4;
      width: max-content;
      min-width: 240px;
      max-width: 560px;
      height: auto;
      min-height: 40px;
      align-items: flex-start;
    }
    .map-node.file.name-expanded .name {
      overflow: visible;
      text-overflow: clip;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    .map-node.root {
      border-color: #84aee0;
      background: #e7f1ff;
      box-shadow: 0 4px 13px rgba(35, 85, 145, 0.14);
    }
    .map-node.search-match {
      outline: 2px solid #e9b949;
      outline-offset: 2px;
      background: #fff8d9;
    }
    .map-node.search-active {
      z-index: 3;
      outline: 3px solid #df7b24;
      outline-offset: 3px;
      background: #fff0d9;
    }
    .icon { flex: 0 0 auto; line-height: 1; }
    .name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .name.file-name {
      display: flex;
      max-width: 100%;
      text-overflow: clip;
    }
    .file-name-prefix {
      min-width: 0;
      flex: 0 1 auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .file-name-suffix {
      flex: 0 0 auto;
      white-space: nowrap;
    }
    .name.file-name-full { display: block; }
    noscript { display: block; padding: 24px; color: #9b2c2c; }
    @media (max-width: 600px) {
      main { width: min(100% - 20px, 1600px); margin-top: 18px; }
      h1 { font-size: 24px; }
      .directory-statistics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .stat-item { padding: 3px; }
      .stat-item strong { font-size: 17px; }
      .type-statistics {
        grid-column: 1 / -1;
        align-items: flex-start;
        border-top: 1px solid #e5eaf1;
        border-left: 0;
        padding: 9px 3px 3px;
      }
      .tree-toolbar { align-items: stretch; flex-direction: column; }
      .search-toolbar { flex: 0 1 auto; flex-wrap: wrap; }
      .search-label { width: 100%; }
      .search-count { min-width: 86px; }
      .map-actions { flex-wrap: wrap; }
      .map-viewport { height: calc(100vh - 300px); min-height: 440px; }
    }
  </style>
</head>
<body>
  <main>
    <header>
      <h1>横向文件结构树</h1>
      <p class="scan-path">"""
        + scan_path
        + """</p>
    </header>
"""
        + statistics_html
        + """
    <div class="tree-toolbar">
      <div class="search-toolbar" role="search">
        <label class="search-label" for="tree-search">搜索节点</label>
        <input
          id="tree-search"
          class="search-input"
          type="search"
          placeholder="输入文件名或目录名"
          autocomplete="off"
        >
        <button id="search-previous" class="toolbar-button" type="button" disabled>上一个</button>
        <button id="search-next" class="toolbar-button" type="button" disabled>下一个</button>
        <output id="search-count" class="search-count" aria-live="polite">0 个匹配</output>
      </div>
      <div class="map-actions" aria-label="文件树视图操作">
        <div class="zoom-controls" aria-label="缩放控制" title="按住 Ctrl 并滚动鼠标滚轮也可缩放">
          <button id="zoom-out" class="toolbar-button zoom-button" type="button" title="缩小文件树">缩小</button>
          <output id="zoom-level" class="zoom-level" aria-live="polite">100%</output>
          <button id="zoom-in" class="toolbar-button zoom-button" type="button" title="放大文件树">放大</button>
          <button id="zoom-reset" class="toolbar-button zoom-button" type="button" title="恢复到 100%">100%</button>
          <button id="zoom-fit" class="toolbar-button zoom-button fit-button" type="button" aria-pressed="false" title="让完整文件树适应当前窗口">适应窗口</button>
        </div>
        """
        + svg_export_button
        + """
      </div>
    </div>
    <div id="map-viewport" class="map-viewport" aria-label="从左向右展开的完整文件结构树">
      <div id="map-canvas" class="map-canvas">
        <div id="map-scene" class="map-scene">
          <svg id="connectors" class="connectors" aria-hidden="true"></svg>
          <div id="nodes" class="nodes"></div>
        </div>
      </div>
      <noscript>此文件地图需要启用 JavaScript 才能计算节点位置。</noscript>
    </div>
  </main>
  <script>
    "use strict";

    const treeData = """
        + tree_json
        + """;
    const NODE_WIDTH = 240;
    const NODE_HEIGHT = 40;
    const COLUMN_GAP = 96;
    const DEPTH_STEP = NODE_WIDTH + COLUMN_GAP;
    const ROW_GAP = 52;
    const CANVAS_PADDING = 40;
    const SVG_NS = "http://www.w3.org/2000/svg";
    const MIN_MANUAL_SCALE = 0.25;
    const MAX_MANUAL_SCALE = 2.5;
    const ZOOM_STEP = 0.25;
    const MIN_FIT_SCALE = 0.01;

    const viewport = document.getElementById("map-viewport");
    const canvas = document.getElementById("map-canvas");
    const scene = document.getElementById("map-scene");
    const connectorLayer = document.getElementById("connectors");
    const nodesLayer = document.getElementById("nodes");
    const searchInput = document.getElementById("tree-search");
    const previousButton = document.getElementById("search-previous");
    const nextButton = document.getElementById("search-next");
    const searchCount = document.getElementById("search-count");
    const zoomOutButton = document.getElementById("zoom-out");
    const zoomInButton = document.getElementById("zoom-in");
    const zoomResetButton = document.getElementById("zoom-reset");
    const zoomFitButton = document.getElementById("zoom-fit");
    const zoomLevel = document.getElementById("zoom-level");
    let searchableNodes = [];
    let searchMatches = [];
    let activeMatchIndex = -1;
    let currentScale = 1;
    let fitMode = false;
    let logicalCanvasWidth = 0;
    let logicalCanvasHeight = 0;
    const expandedFilePaths = new Set();

    function normalizeNode(node) {
      const children = Array.isArray(node.children)
        ? node.children.map(normalizeNode)
        : [];
      return {
        name: String(node.name ?? "未命名"),
        path: String(node.path ?? ""),
        type: node.type === "directory" ? "directory" : "file",
        icon: String(node.icon ?? "📄"),
        children,
      };
    }

    function layoutTree(root) {
      const positions = [];
      const branchGroups = [];
      let nextLeafY = 0;
      let maxDepth = 0;
      let maxY = 0;

      function visit(node, depth, parent) {
        const position = {
          node,
          depth,
          parent,
          x: CANVAS_PADDING + depth * DEPTH_STEP,
          y: 0,
        };
        positions.push(position);
        maxDepth = Math.max(maxDepth, depth);

        const childPositions = node.children.map((child) =>
          visit(child, depth + 1, position)
        );
        if (childPositions.length === 0) {
          position.y = nextLeafY;
          nextLeafY += ROW_GAP;
        } else {
          position.y = (
            childPositions[0].y + childPositions[childPositions.length - 1].y
          ) / 2;
          branchGroups.push({ parent: position, children: childPositions });
        }

        maxY = Math.max(maxY, position.y);
        return position;
      }

      const rootPosition = visit(root, 0, null);
      return { positions, branchGroups, rootPosition, maxDepth, maxY };
    }

    function renderNameContent(name, node, showFullName = false) {
      name.replaceChildren();
      name.className = "name";

      if (node.type === "directory" || showFullName) {
        if (showFullName) {
          name.className = "name file-name-full";
        }
        name.textContent = node.name;
        return;
      }

      const extensionStart = node.name.lastIndexOf(".");
      if (extensionStart <= 0 || extensionStart === node.name.length - 1) {
        name.textContent = node.name;
        return;
      }

      const stem = node.name.slice(0, extensionStart);
      const extension = node.name.slice(extensionStart);
      const suffixStart = Math.max(0, stem.length - 5);
      const prefixText = stem.slice(0, suffixStart);
      const suffixText = stem.slice(suffixStart) + extension;

      if (!prefixText) {
        name.textContent = suffixText;
        return;
      }

      name.className = "name file-name";
      const prefix = document.createElement("span");
      prefix.className = "file-name-prefix";
      prefix.textContent = prefixText;

      const suffix = document.createElement("span");
      suffix.className = "file-name-suffix";
      suffix.textContent = suffixText;
      name.append(prefix, suffix);
    }

    function createNameElement(node, showFullName = false) {
      const name = document.createElement("span");
      renderNameContent(name, node, showFullName);
      return name;
    }

    function setFileNameExpanded(element, name, node, expanded) {
      element.classList[expanded ? "add" : "remove"]("name-expanded");
      element.setAttribute("aria-expanded", String(expanded));
      if (expanded) {
        expandedFilePaths.add(node.path);
      } else {
        expandedFilePaths.delete(node.path);
      }
      renderNameContent(name, node, expanded);
    }

    function createNode(position, isRoot = false) {
      const element = document.createElement("div");
      element.className = `map-node ${position.node.type}${isRoot ? " root" : ""}`;
      element.style.left = `${position.x}px`;
      element.style.top = `${position.y - NODE_HEIGHT / 2}px`;
      element.title = `${position.node.name}\n${position.node.path}`;
      element.setAttribute("data-depth", String(position.depth));
      element.setAttribute(
        "aria-label",
        `${position.node.type === "directory" ? "目录" : "文件"}：${position.node.name}`
      );

      const icon = document.createElement("span");
      icon.className = "icon";
      icon.setAttribute("aria-hidden", "true");
      icon.textContent = position.node.icon;

      const isExpanded = (
        position.node.type === "file" && expandedFilePaths.has(position.node.path)
      );
      const name = createNameElement(position.node, isExpanded);
      element.append(icon, name);

      if (position.node.type === "file") {
        element.setAttribute("role", "button");
        element.setAttribute("tabindex", "0");
        element.setAttribute("aria-expanded", String(isExpanded));
        if (isExpanded) {
          element.classList.add("name-expanded");
        }
        element.addEventListener("click", () =>
          setFileNameExpanded(
            element,
            name,
            position.node,
            !element.classList.contains("name-expanded")
          )
        );
        element.addEventListener("keydown", (event) => {
          if (event.key === "Enter" || event.key === " ") {
            event.preventDefault();
            setFileNameExpanded(
              element,
              name,
              position.node,
              !element.classList.contains("name-expanded")
            );
          }
        });
      }

      nodesLayer.appendChild(element);
      searchableNodes.push({
        element,
        position,
        normalizedName: position.node.name.toLocaleLowerCase(),
      });
    }

    function clamp(value, minimum, maximum) {
      return Math.min(maximum, Math.max(minimum, value));
    }

    function updateZoomControls() {
      zoomLevel.textContent = `${Math.round(currentScale * 100)}%`;
      zoomOutButton.disabled = currentScale <= MIN_MANUAL_SCALE + 0.0001;
      zoomInButton.disabled = currentScale >= MAX_MANUAL_SCALE - 0.0001;
      zoomFitButton.classList.toggle("active", fitMode);
      zoomFitButton.setAttribute("aria-pressed", String(fitMode));
    }

    function updateSceneDimensions() {
      scene.style.width = `${logicalCanvasWidth}px`;
      scene.style.height = `${logicalCanvasHeight}px`;
      scene.style.transform = `scale(${currentScale})`;

      const scaledWidth = Math.ceil(logicalCanvasWidth * currentScale);
      const scaledHeight = Math.ceil(logicalCanvasHeight * currentScale);
      canvas.style.width = `${Math.max(viewport.clientWidth, scaledWidth)}px`;
      canvas.style.height = `${Math.max(viewport.clientHeight, scaledHeight)}px`;
      updateZoomControls();
    }

    function applyScale(
      nextScale,
      anchorX = viewport.clientWidth / 2,
      anchorY = viewport.clientHeight / 2,
      preserveFitMode = false
    ) {
      if (logicalCanvasWidth <= 0 || logicalCanvasHeight <= 0) {
        return;
      }

      const previousScale = currentScale;
      const logicalAnchorX = (viewport.scrollLeft + anchorX) / previousScale;
      const logicalAnchorY = (viewport.scrollTop + anchorY) / previousScale;
      currentScale = nextScale;
      if (!preserveFitMode) {
        fitMode = false;
      }
      updateSceneDimensions();
      viewport.scrollLeft = Math.max(
        0, logicalAnchorX * currentScale - anchorX
      );
      viewport.scrollTop = Math.max(
        0, logicalAnchorY * currentScale - anchorY
      );
    }

    function applyManualScale(
      requestedScale,
      anchorX = viewport.clientWidth / 2,
      anchorY = viewport.clientHeight / 2
    ) {
      applyScale(
        clamp(requestedScale, MIN_MANUAL_SCALE, MAX_MANUAL_SCALE),
        anchorX,
        anchorY
      );
    }

    function zoomByStep(direction) {
      if (currentScale < MIN_MANUAL_SCALE) {
        if (direction > 0) {
          applyManualScale(MIN_MANUAL_SCALE);
        }
        return;
      }
      applyManualScale(currentScale + direction * ZOOM_STEP);
    }

    function fitTreeToViewport() {
      if (logicalCanvasWidth <= 0 || logicalCanvasHeight <= 0) {
        return;
      }
      const availableWidth = Math.max(1, viewport.clientWidth - 16);
      const availableHeight = Math.max(1, viewport.clientHeight - 16);
      const fitScale = clamp(
        Math.min(
          1,
          availableWidth / logicalCanvasWidth,
          availableHeight / logicalCanvasHeight
        ),
        MIN_FIT_SCALE,
        1
      );
      fitMode = true;
      applyScale(fitScale, 0, 0, true);
      viewport.scrollLeft = 0;
      viewport.scrollTop = 0;
    }

    function updateSearchControls() {
      const matchCount = searchMatches.length;
      searchCount.textContent = matchCount > 0
        ? `${activeMatchIndex + 1} / ${matchCount} 个匹配`
        : "0 个匹配";
      previousButton.disabled = matchCount <= 1;
      nextButton.disabled = matchCount <= 1;
    }

    function scrollToMatch(match) {
      viewport.scrollLeft = Math.max(
        0,
        (match.position.x + NODE_WIDTH / 2) * currentScale
          - viewport.clientWidth / 2
      );
      viewport.scrollTop = Math.max(
        0,
        match.position.y * currentScale - viewport.clientHeight / 2
      );
    }

    function selectMatch(index, shouldScroll = true) {
      searchMatches.forEach((match) =>
        match.element.classList.remove("search-active")
      );
      if (searchMatches.length === 0) {
        activeMatchIndex = -1;
        updateSearchControls();
        return;
      }

      activeMatchIndex = (
        (index % searchMatches.length) + searchMatches.length
      ) % searchMatches.length;
      const activeMatch = searchMatches[activeMatchIndex];
      activeMatch.element.classList.add("search-active");
      updateSearchControls();
      if (shouldScroll) {
        scrollToMatch(activeMatch);
      }
    }

    function runSearch(resetIndex = true, shouldScroll = true) {
      const query = searchInput.value.trim().toLocaleLowerCase();
      searchableNodes.forEach((item) =>
        item.element.classList.remove("search-match", "search-active")
      );
      searchMatches = [];

      if (!query) {
        activeMatchIndex = -1;
        updateSearchControls();
        return;
      }

      searchMatches = searchableNodes.filter((item) =>
        item.normalizedName.includes(query)
      );
      searchMatches.forEach((match) =>
        match.element.classList.add("search-match")
      );

      if (searchMatches.length === 0) {
        activeMatchIndex = -1;
        updateSearchControls();
        return;
      }

      const nextIndex = resetIndex
        ? 0
        : Math.min(Math.max(activeMatchIndex, 0), searchMatches.length - 1);
      selectMatch(nextIndex, shouldScroll);
    }

    function drawBranch(group) {
      const startX = group.parent.x + NODE_WIDTH;
      const branchX = startX + COLUMN_GAP / 2;
      const firstChild = group.children[0];
      const lastChild = group.children[group.children.length - 1];
      const commands = [];

      if (group.children.length === 1) {
        commands.push(`M ${startX} ${group.parent.y} H ${firstChild.x}`);
      } else {
        commands.push(`M ${startX} ${group.parent.y} H ${branchX}`);
        commands.push(`M ${branchX} ${firstChild.y} V ${lastChild.y}`);
        group.children.forEach((child) => {
          commands.push(`M ${branchX} ${child.y} H ${child.x}`);
        });
      }

      const path = document.createElementNS(SVG_NS, "path");
      path.setAttribute("class", "connector");
      path.setAttribute("d", commands.join(" "));
      connectorLayer.appendChild(path);
    }

    function renderMap() {
      connectorLayer.replaceChildren();
      nodesLayer.replaceChildren();
      searchableNodes = [];

      const layout = layoutTree(normalizeNode(treeData));
      const requiredWidth = (
        CANVAS_PADDING * 2
        + (layout.maxDepth + 1) * NODE_WIDTH
        + layout.maxDepth * COLUMN_GAP
      );
      logicalCanvasWidth = requiredWidth;
      logicalCanvasHeight = Math.max(
        layout.maxY + NODE_HEIGHT + CANVAS_PADDING * 2,
        520
      );
      const yOffset = CANVAS_PADDING + NODE_HEIGHT / 2;

      connectorLayer.setAttribute(
        "viewBox", `0 0 ${logicalCanvasWidth} ${logicalCanvasHeight}`
      );
      connectorLayer.setAttribute("width", String(logicalCanvasWidth));
      connectorLayer.setAttribute("height", String(logicalCanvasHeight));

      layout.positions.forEach((position) => { position.y += yOffset; });
      layout.branchGroups.forEach(drawBranch);
      layout.positions.forEach((position) =>
        createNode(position, position === layout.rootPosition)
      );
      updateSceneDimensions();

      viewport.scrollLeft = 0;
      viewport.scrollTop = Math.max(
        0,
        layout.rootPosition.y * currentScale - viewport.clientHeight / 2
      );
      runSearch(false, Boolean(searchInput.value.trim()));
    }

    searchInput.addEventListener("input", () => runSearch(true, true));
    searchInput.addEventListener("keydown", (event) => {
      if (event.key === "Enter" && searchMatches.length > 0) {
        event.preventDefault();
        selectMatch(activeMatchIndex + (event.shiftKey ? -1 : 1), true);
      } else if (event.key === "Escape") {
        searchInput.value = "";
        runSearch(true, false);
      }
    });
    previousButton.addEventListener("click", () =>
      selectMatch(activeMatchIndex - 1, true)
    );
    nextButton.addEventListener("click", () =>
      selectMatch(activeMatchIndex + 1, true)
    );
    zoomOutButton.addEventListener("click", () => zoomByStep(-1));
    zoomInButton.addEventListener("click", () => zoomByStep(1));
    zoomResetButton.addEventListener("click", () => applyManualScale(1));
    zoomFitButton.addEventListener("click", fitTreeToViewport);
    viewport.addEventListener("wheel", (event) => {
      if (!event.ctrlKey) {
        return;
      }
      event.preventDefault();

      const direction = event.deltaY < 0 ? 1 : -1;
      if (currentScale < MIN_MANUAL_SCALE && direction < 0) {
        return;
      }
      const viewportBounds = viewport.getBoundingClientRect();
      const anchorX = event.clientX - viewportBounds.left;
      const anchorY = event.clientY - viewportBounds.top;
      const requestedScale = currentScale < MIN_MANUAL_SCALE
        ? MIN_MANUAL_SCALE
        : currentScale * (direction > 0 ? 1.1 : 0.9);
      applyManualScale(requestedScale, anchorX, anchorY);
    }, { passive: false });

    let resizeTimer;
    window.addEventListener("resize", () => {
      window.clearTimeout(resizeTimer);
      resizeTimer = window.setTimeout(() => {
        if (fitMode) {
          fitTreeToViewport();
        } else {
          updateSceneDimensions();
        }
      }, 100);
    });
    renderMap();
  </script>
</body>
</html>
"""
    )


def save_tree_report(
    data: dict[str, Any],
    path: Path = OUTPUT_PATH,
    svg_export_path: Path | None = None,
) -> Path:
    """Write the generated tree page as UTF-8 HTML."""

    path = Path(path)
    path.parent.mkdir(parents=True, exist_ok=True)
    path.write_text(
        generate_html(
            data,
            svg_export_path=svg_export_path,
            html_output_path=path,
        ),
        encoding="utf-8",
    )
    return path


def main() -> int:
    try:
        data = load_scan_result()
        output_path = save_tree_report(data)
    except FileNotFoundError:
        print(f'错误: 找不到扫描结果 "{INPUT_PATH}"，请先运行 main.py。')
        return 1
    except json.JSONDecodeError as error:
        print(f"错误: scan-result.json 格式无效: {error}")
        return 1
    except (OSError, ValueError) as error:
        print(f"错误: 无法生成文件树: {error}")
        return 1

    print("文件树页面生成完成")
    print(f"页面文件: {output_path}")
    return 0


if __name__ == "__main__":
    raise SystemExit(main())