<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" />
  <title>🐟 因果图生成器 - by eminstan</title>
  <!-- by eminstan -->
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
    }

    body {
      font-family: 'Microsoft YaHei', Arial, sans-serif;
      background: #f5f5f5;
      padding: 16px;
      overflow: hidden;
    }

    .container {
      max-width: 1200px;
      height: calc(100vh - 32px);
      margin: 0 auto;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .header {
      background: linear-gradient(135deg, #dfe7f2 0%, #c9dbef 60%, #b5cfea 100%);
      color: #223a5f;
      padding: 16px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
      flex-wrap: wrap;
      gap: 10px;
    }

    .header h1 {
      font-size: 22px;
      line-height: 1.2;
    }

    .header p {
      font-size: 12px;
      opacity: 0.85;
    }

    .header-btn {
      padding: 10px 16px;
      font-size: 14px;
      background: rgba(255, 255, 255, 0.7);
      color: #223a5f;
      border: 1px solid rgba(34, 58, 95, 0.3);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .header-btn:hover {
      background: #eef3f9;
    }

    .toolbar {
      padding: 10px 20px;
      background: #f8f9fa;
      border-bottom: 1px solid #e0e0e0;
      display: flex;
      gap: 12px;
      align-items: center;
      flex-shrink: 0;
      flex-wrap: wrap;
    }

    .toolbar label {
      font-weight: bold;
      margin-right: 6px;
    }

    .canvas-container {
      flex: 1;
      overflow: auto;
      position: relative;
      background: #fafafa;
      -webkit-overflow-scrolling: touch;
    }

    .canvas {
      position: relative;
      min-width: 100%;
      min-height: 100%;
      padding: 40px;
    }

    svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
    }

    /* 节点样式：参考示例为白底黑框矩形 */
    .node {
      position: absolute;
      background: #fff;
      border: 1.8px solid #000;
      border-radius: 4px;
      padding: 4px 8px;
      min-width: 60px;
      max-width: 320px;
      min-height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      transition: box-shadow 0.2s, border-color 0.2s;
      z-index: 2;
    }

    .node:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }

    /* 选中状态 */
    .node.selected {
      border-color: #4a90e2;
      border-width: 2.5px;
      box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .node-input {
      border: none;
      outline: none;
      text-align: center;
      font-size: 14px;
      width: 100%;
      background: transparent;
      cursor: text;
      white-space: pre-wrap;
      word-break: break-word;
      line-height: 1.4;
      resize: none;
      overflow: hidden;
      font-family: 'Microsoft YaHei', Arial, sans-serif;
    }

    .delete-btn {
      position: absolute;
      top: -10px;
      right: -10px;
      width: 22px;
      height: 22px;
      border: 1px solid #dc3545;
      border-radius: 50%;
      background: #dc3545;
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: bold;
      opacity: 0;
      transition: opacity 0.2s;
      z-index: 10;
    }

    .node:hover .delete-btn {
      opacity: 1;
    }

    /* 原因类别添加一级原因的按钮：始终显示（绘图时常显），导出/复制时由JS临时隐藏 */
    .add-primary-btn {
      position: absolute;
      width: 20px;
      height: 20px;
      border: 1px solid #28a745;
      border-radius: 50%;
      background: #28a745;
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: bold;
      opacity: 1;
      /* 改为常显 */
      transition: opacity 0.2s;
      z-index: 10;
    }

    .add-primary-btn:hover {
      background: #218838;
    }

    .add-primary-left {
      left: -10px;
      top: 50%;
      transform: translateY(-50%);
    }

    .add-primary-right {
      right: -10px;
      top: 50%;
      transform: translateY(-50%);
    }

    /* 一级原因文本样式 - 改为可编辑的输入框 */
    .primary-cause-text {
      position: absolute;
      background: transparent;
      border: none;
      padding: 2px 6px;
      font-size: 13px;
      text-align: left;
      /* 修改：靠左对齐 */
      white-space: normal;
      word-break: break-word;
      z-index: 3;
      cursor: text;
      /* 修改：光标改为文本编辑 */
      user-select: text;
      /* 修改：允许选择文本 */
      line-height: 1.2;
      outline: none;
      /* 添加：去除焦点轮廓 */
      resize: none;
      /* 添加：禁止手动调整大小 */
      overflow: hidden;
      /* 添加：隐藏溢出 */
      font-family: 'Microsoft YaHei', Arial, sans-serif;
    }

    .primary-cause-text:hover {
      background: rgba(255, 255, 255, 0.9);
      border-radius: 3px;
    }

    .primary-cause-text:focus {
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid #4a90e2;
      border-radius: 3px;
    }

    /* 一级原因删除按钮 */
    .primary-delete-btn {
      position: absolute;
      width: 16px;
      height: 16px;
      border: 1px solid #dc3545;
      border-radius: 50%;
      background: #dc3545;
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: bold;
      opacity: 1;
      /* 改为常显 */
      transition: opacity 0.2s;
      z-index: 10;
    }

    /* 删除按钮常显后，无需依赖 hover 显示 */

    /* 二级原因文本与按钮样式 */
    .secondary-cause-text {
      position: absolute;
      background: transparent;
      border: none;
      padding: 2px 6px;
      font-size: 12px;
      text-align: left;
      white-space: normal;
      word-break: break-word;
      z-index: 3;
      cursor: text;
      user-select: text;
      line-height: 1.2;
      outline: none;
      resize: none;
      overflow: hidden;
      font-family: 'Microsoft YaHei', Arial, sans-serif;
    }

    .secondary-cause-text:focus {
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid #4a90e2;
      border-radius: 3px;
    }

    .secondary-delete-btn {
      position: absolute;
      width: 14px;
      height: 14px;
      border: 1px solid #dc3545;
      border-radius: 50%;
      background: #dc3545;
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: bold;
      opacity: 1;
      transition: opacity 0.2s;
      /* 常显 */
      z-index: 10;
    }

    /* 常显后不再依赖 hover */

    .add-secondary-btn {
      position: absolute;
      width: 16px;
      height: 16px;
      border: 1px solid #28a745;
      border-radius: 50%;
      background: #28a745;
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: bold;
      opacity: 1;
      transition: opacity 0.2s;
      z-index: 10;
    }

    .add-secondary-btn:hover {
      background: #218838;
    }

    /* 三级原因样式，与二级一致但可独立调参 */
    .tertiary-cause-text {
      position: absolute;
      background: transparent;
      border: none;
      padding: 2px 6px;
      font-size: 12px;
      text-align: left;
      white-space: normal;
      word-break: break-word;
      z-index: 3;
      cursor: text;
      user-select: text;
      line-height: 1.2;
      outline: none;
      resize: none;
      overflow: hidden;
      font-family: 'Microsoft YaHei', Arial, sans-serif;
    }

    .tertiary-cause-text:focus {
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid #4a90e2;
      border-radius: 3px;
    }

    .tertiary-delete-btn {
      position: absolute;
      width: 14px;
      height: 14px;
      border: 1px solid #dc3545;
      border-radius: 50%;
      background: #dc3545;
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: bold;
      opacity: 1;
      transition: opacity 0.2s;
      /* 常显 */
      z-index: 10;
    }

    /* 常显后不再依赖 hover */

    .add-tertiary-btn {
      position: absolute;
      width: 16px;
      height: 16px;
      border: 1px solid #28a745;
      border-radius: 50%;
      background: #28a745;
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: bold;
      opacity: 1;
      transition: opacity 0.2s;
      z-index: 10;
    }

    .add-tertiary-btn:hover {
      background: #218838;
    }

    /* 一级原因拖拽按钮（常显，放在添加/删除按钮外侧） */
    .primary-drag-btn {
      position: absolute;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 1px solid #6c757d;
      background: #6c757d;
      color: #fff;
      display: flex;
      /* 常显 */
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: bold;
      cursor: grab;
      z-index: 11;
    }

    .primary-drag-btn:active {
      cursor: grabbing;
    }

    .message-toast {
      position: fixed;
      top: 14px;
      right: 14px;
      padding: 9px 14px;
      background: #28a745;
      color: white;
      border-radius: 6px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      z-index: 9999;
      font-size: 13px;
      animation: slideIn 0.3s ease-out;
    }

    @keyframes slideIn {
      from {
        transform: translateX(400px);
        opacity: 0;
      }

      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @keyframes slideOut {
      from {
        transform: translateX(0);
        opacity: 1;
      }

      to {
        transform: translateX(400px);
        opacity: 0;
      }
    }

    @media (max-width: 768px) {
      body {
        padding: 10px;
      }

      .container {
        height: calc(100vh - 20px);
        border-radius: 8px;
        max-width: 100%;
      }

      .header {
        padding: 12px;
      }

      .header h1 {
        font-size: 18px;
      }

      .header-btn {
        padding: 8px 12px;
        font-size: 13px;
      }

      .toolbar {
        padding: 8px 12px;
        gap: 8px;
      }

      .canvas {
        padding: 24px;
      }

      .message-toast {
        top: 12px;
        right: 12px;
        padding: 8px 12px;
        font-size: 12px;
      }
    }

    /* 结果竖排文本：固定宽度，高度自适应 */
    .vertical-text {
      /* 结果文本框：单列宽度=30px，文字竖排，高度随内容增长 */
      width: 30px !important;
      max-width: 30px !important;
      min-width: 30px !important;
      /* 覆盖 .node 的 min-width:60px */
      min-height: 80px;
      max-height: none !important;
      padding: 15px 0 !important;
      /* 保证列宽即为内容宽度 */
      display: flex;
      /* 使内部内容在水平方向可居中 */
      align-items: center;
      /* 与竖排配合，保证左右居中视觉 */
      justify-content: center;
    }

    .vertical-text .node-input {
      writing-mode: vertical-rl;
      text-orientation: upright;
      line-height: 1;
      letter-spacing: 0.1em;
      text-align: center;
      font-weight: bold;
      /* 结果文本加粗 */
      white-space: pre-wrap;
      /* 保留换行以正确增长高度 */
      word-break: break-all;
      width: auto !important;
      /* 让内部宽度随内容自适应，配合父级 flex 居中 */
      padding: 0 !important;
      /* 去掉横向padding避免影响高度测量 */
      height: auto !important;
      overflow: visible !important;
      display: block;
      min-height: 1em;
      /* 空内容时也可放置光标 */
    }

    /* 末端原因（无下级）默认样式：加粗、红色 */
    .leaf-cause {
      color: #d93025;
      /* Google 红 或可用 #dc3545 */
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="header">
      <div style="display:flex; align-items:center; gap:12px; flex-wrap:wrap;">
        <button onclick="window.location.href='../index.html'" class="header-btn" aria-label="返回首页"
          style="background: rgba(255,255,255,0.25); color: #223a5f; border: 1px solid rgba(34,58,95,0.3); border-radius: 6px; backdrop-filter: blur(8px);"
          onmouseover="this.style.background='rgba(255,255,255,0.35)'"
          onmouseout="this.style.background='rgba(255,255,255,0.25)'">← 返回</button>
        <div>
          <h1>🐟 因果图</h1>
          <p>by eminstan</p>
        </div>
      </div>
      <div style="display:flex; gap:10px; flex-wrap:wrap;">
        <button class="header-btn" onclick="copyImage()">📋 复制图片</button>
        <button class="header-btn" onclick="exportImage()">📥 导出PNG</button>
        <button class="header-btn" onclick="saveConfig()">💾 保存配置</button>
        <button class="header-btn" onclick="loadConfig()">📂 加载配置</button>
        <button class="header-btn" onclick="resetAll()">🔄 重置</button>
      </div>
    </div>

    <div class="toolbar" style="gap:16px; align-items:center;">
      <div style="display:flex; align-items:center; gap:10px; flex-wrap:wrap;">
        <label style="font-size:12px; color:#333;">
          类别垂直距
          <span id="vertOffsetVal" style="display:inline-block; min-width:34px; text-align:right;">225</span>
        </label>
        <input id="vertOffsetSlider" type="range" min="120" max="360" step="1" value="225" />

        <label style="font-size:12px; color:#333; margin-left:10px;">
          主干长度
          <span id="spineLenVal" style="display:inline-block; min-width:34px; text-align:right;">780</span>
        </label>
        <input id="spineLenSlider" type="range" min="300" max="1200" step="10" value="780" />
      </div>
      <div style="margin-left:auto; display:flex; gap:10px;">
        <button class="header-btn" onclick="addCategoryAuto()">➕ 添加"原因类别"</button>
        <button class="header-btn" onclick="undo()">↶ 撤销</button>
        <button class="header-btn" onclick="redo()">↷ 重做</button>
        <div id="historyInfo" style="font-size:12px; color:#666;">可撤销: 0 | 可重做: 0</div>
      </div>
    </div>

    <div class="canvas-container" id="canvasContainer">
      <div class="canvas" id="canvas">
        <svg id="linesSvg"></svg>
      </div>
    </div>
  </div>

  <script>
    // 数据结构
    let nodes = {};
    let nodeCounter = 0;
    let undoStack = [];
    let redoStack = [];
    const MAX_HISTORY = 50;
    const STORAGE_KEY = 'fishbone_history_v1';

    // 布局参数
    let HEAD_X = 920; // 动态鱼头 X，将在 relayout 中基于容器宽度重新计算
    const HEAD_Y = 260;
    let SPINE_START_X = 140; // 主干起点X（由 SPINE_LENGTH 和 HEAD_X 推导）
    let SPINE_LENGTH = 780;  // 新增：主干长度（由滑块控制，保持不变）
    const SPINE_Y = HEAD_Y;
    const SPINE_THICKNESS = 2.5;
    const SPINE_ARROW = true;

    // 垂直距离、水平距离与分布范围
    let CATEGORY_VERTICAL_OFFSET = 225; // 可调：类别到主干的垂直距离
    const CATEGORY_ANCHOR_LEFT_MARGIN = 0;
    const CATEGORY_ANCHOR_RIGHT_TO_ARROW = 50;

    const NODE_HEIGHT_DEFAULT = 38;

    // 类别斜线角度：与“类别垂直距离 CATEGORY_VERTICAL_OFFSET (x)”相关联（动态角度）
    // 修正公式：y = −0.0000000675*x^4 + 0.0000615*x^3 − 0.0195*x^2 + 2.407*x − 5.182
    function computeArrowAngleDegFromYOffset(x) {
      const xx = Number(x) || 0;
      const y = (-0.0000000675 * Math.pow(xx, 4))
        + (0.0000615 * Math.pow(xx, 3))
        - (0.0195 * Math.pow(xx, 2))
        + (2.407 * xx)
        - 5.182;
      return y;
    }
    let FIXED_ARROW_ANGLE_DEG = computeArrowAngleDegFromYOffset(CATEGORY_VERTICAL_OFFSET);

    // 上下侧箭头端在主干上的错开距离（px）
    const ANCHOR_STAGGER_OFFSET = 40;

    // 新增：一级原因在支干上的错开距离（px，左右互相交错）
    const PRIMARY_STAGGER_OFFSET = 30;

    // 新增：整体左移距离（仅用于原因类别及其箭头线）
    const CATEGORY_GLOBAL_SHIFT_X = -80;

    // 一级原因水平线长度
    const PRIMARY_LINE_LENGTH = 120;

    // 二级/三级“小骨”角度与长度（保持与当前实现一致，不改行为）
    const SMALL_BRANCH_ANGLE_DEG = 60; // 小骨固定角度（度）
    const SECONDARY_HORIZ_LENGTH = 100; // 水平段长度（S→B）固定为 100 像素
    const SECONDARY_TEXT_GAP = 2; // 与一级原因文本之间的垂直间距

    // 三级原因固定参数（参照二级）
    const TERTIARY_HORIZ_LENGTH = 90; // 三级水平段更短一点
    const TERTIARY_TEXT_GAP = 2;      // 与二级文本之间的垂直间距

    let nextSide = 'top';

    let model = {
      result: null,
      categories: []
    };

    // 初始化
    window.onload = function () {
      try {
        const persisted = localStorage.getItem(STORAGE_KEY);
        if (persisted) {
          const { undo, redo } = JSON.parse(persisted);
          if (Array.isArray(undo) && undo.length > 0 && Array.isArray(redo)) {
            undoStack = undo.slice(-MAX_HISTORY);
            redoStack = redo;
            const last = JSON.parse(undoStack[undoStack.length - 1]);
            applyConfig(last); // 注意：applyConfig 不再自动入栈
            updateHistoryInfo();
            relayout();
            initSliders();
            centerSoon();
            return;
          }
        }
      } catch { }

      // 无持久化历史时，创建默认初始图
      createResult();
      addDefaultSixCategories();
      saveHistory();
      relayout();
      // 初始化滑动条UI
      initSliders();
      centerSoon();
    };

    // 初始化滑动条与联动
    function initSliders() {
      const vertSlider = document.getElementById('vertOffsetSlider');
      const vertVal = document.getElementById('vertOffsetVal');
      const spineSlider = document.getElementById('spineLenSlider');
      const spineVal = document.getElementById('spineLenVal');

      // 同步当前值
      vertSlider.value = String(CATEGORY_VERTICAL_OFFSET);
      vertVal.textContent = String(CATEGORY_VERTICAL_OFFSET);
      // 以固定的 SPINE_LENGTH 为准（避免动态 HEAD_X 导致显示抖动）
      spineSlider.value = String(Math.max(100, SPINE_LENGTH));
      spineVal.textContent = String(Math.max(100, SPINE_LENGTH));

      vertSlider.addEventListener('input', () => {
        CATEGORY_VERTICAL_OFFSET = parseInt(vertSlider.value || '225');
        vertVal.textContent = String(CATEGORY_VERTICAL_OFFSET);
        // 垂直距离变化时，按公式更新类别斜线角度
        FIXED_ARROW_ANGLE_DEG = computeArrowAngleDegFromYOffset(CATEGORY_VERTICAL_OFFSET);
        relayout();
        deferredSave();
        centerSoon();
      });

      spineSlider.addEventListener('input', () => {
        const len = Math.max(100, parseInt(spineSlider.value || '780'));
        SPINE_LENGTH = len; // 仅更新期望主干长度，具体坐标在 relayout 中统一计算
        spineVal.textContent = String(len);
        relayout();
        deferredSave();
        centerSoon();
      });
    }

    // 添加默认六类（3上侧，3下侧，名称按要求）
    function addDefaultSixCategories() {
      const defaults = ['人员', '设备', '材料', '方法', '环境', '测量'];
      defaults.forEach((name, idx) => {
        const side = idx < 3 ? 'top' : 'bottom';
        const labelId = createNode(name, 0, 0, true, '', true);
        model.categories.push({
          id: newId('cat'),
          side,
          anchorX: 0,
          anchorY: 0,
          labelId,
          primaryCauses: []  // 一级原因数组
        });
      });
    }

    // 基础工具
    function newId(prefix = 'node') { nodeCounter++; return prefix + nodeCounter; }

    function createNode(text = '', x = 0, y = 0, deletable = true, extraClass = '', isCategory = false) {
      const id = newId();
      const node = document.createElement('div');
      node.className = 'node' + (extraClass ? ' ' + extraClass : '');
      node.id = id;
      node.style.left = x + 'px';
      node.style.top = y + 'px';

      const isVertical = (extraClass || '').split(' ').includes('vertical-text');
      const input = isVertical ? document.createElement('div') : document.createElement('textarea');
      input.className = 'node-input';
      if (isVertical) {
        input.contentEditable = 'true';
        input.textContent = (text || '').replace(/[\u200B\r\n]/g, '') || '\u200B';
        // 禁止回车产生新列，保持单列竖排
        input.addEventListener('beforeinput', (e) => {
          if (e.inputType === 'insertParagraph' || e.inputType === 'insertLineBreak') {
            e.preventDefault();
          }
        });
      } else {
        input.value = text;
        input.rows = 1;
      }

      // 输入时：竖排结果不实时自适应（防止编辑时换列抖动），在失焦时统一测量并调整；其他节点实时自适应
      input.addEventListener('input', () => {
        if (isVertical) {
          // 清理不可见字符与换行，保持单列
          let txt = (input.textContent || '').replace(/[\u200B\r\n]/g, '');
          if (txt.length === 0) {
            input.textContent = '\u200B';
          } else if (input.textContent !== txt) {
            input.textContent = txt;
          }
          // 竖排不在输入时自适应，避免抖动；仅重绘连线
          redrawLines();
        } else {
          autoSize(node);
          redrawLines();
        }
      });

      input.addEventListener('blur', () => {
        adjustLabelPositionByAnchor(id);
        relayout();
        deferredSave();
      });

      input.addEventListener('focus', () => {
        document.querySelectorAll('.node').forEach(n => n.classList.remove('selected'));
        node.classList.add('selected');
      });

      node.appendChild(input);

      if (deletable) {
        const del = document.createElement('div');
        del.className = 'delete-btn';
        del.textContent = '−';
        del.onclick = (e) => {
          e.stopPropagation();
          deleteNode(id);
          removeFromModelByNodeId(id);
          relayout();
          saveHistory();
        };
        node.appendChild(del);
      }

      // 如果是原因类别节点，添加左右两个+号按钮（始终显示）
      if (isCategory) {
        const addLeft = document.createElement('div');
        addLeft.className = 'add-primary-btn add-primary-left';
        addLeft.textContent = '+';
        addLeft.onclick = (e) => {
          e.stopPropagation();
          addPrimaryCause(id, 'left');
        };
        node.appendChild(addLeft);

        const addRight = document.createElement('div');
        addRight.className = 'add-primary-btn add-primary-right';
        addRight.textContent = '+';
        addRight.onclick = (e) => {
          e.stopPropagation();
          addPrimaryCause(id, 'right');
        };
        node.appendChild(addRight);
      }

      nodes[id] = node;
      document.getElementById('canvas').appendChild(node);

      autoSize(node);
      return id;
    }

    function autoSize(node) {
      const input = node.querySelector('.node-input');

      if (node.classList.contains('vertical-text')) {
        node.style.width = '30px';
        // 新思路：按单列竖排逐字计高（不依赖 scrollHeight），在失焦/触发布局时重算
        const cs = getComputedStyle(input);
        const fontSize = parseFloat(cs.fontSize) || 14;
        // 计算 letter-spacing 的像素值（可能是 normal/px/em），用于竖排字距累加
        let lsRaw = cs.letterSpacing || '0';
        let letterPx = 0;
        if (lsRaw === 'normal') {
          letterPx = 0; // 已在 CSS 设为 0.1em，若浏览器返回 normal 则忽略
        } else if (lsRaw.endsWith('px')) {
          letterPx = parseFloat(lsRaw) || 0;
        } else if (lsRaw.endsWith('em')) {
          letterPx = (parseFloat(lsRaw) || 0) * fontSize;
        }
        const perChar = Math.max(1, fontSize + letterPx);
        const rawAll = (input.tagName === 'TEXTAREA') ? (input.value || '') : (input.textContent || '');
        const raw = rawAll.replace(/[\u200B\r\n]/g, ''); // 忽略零宽与换行，单列严格按字符
        const charCount = Array.from(raw).length || 1;
        const innerNeeded = Math.ceil(charCount * perChar);
        // 考虑边框厚度，给少量富余，避免最后一个字换到第二列
        const ns = getComputedStyle(node);
        const nb = (parseFloat(ns.borderTopWidth) || 0) + (parseFloat(ns.borderBottomWidth) || 0);
        const padTop = parseFloat(ns.paddingTop) || 0;
        const padBottom = parseFloat(ns.paddingBottom) || 0;
        let measured = innerNeeded + nb + padTop + padBottom + 1; // +1 作为抗舍入误差富余
        measured = Math.max(80, Math.ceil(measured));
        node.style.height = measured + 'px';
        return;
      }

      const temp = document.createElement('div');
      temp.style.cssText = `
        position:absolute;visibility:hidden;white-space:pre-wrap;
        word-break:break-word;line-height:${getComputedStyle(input).lineHeight};
        font-size:${getComputedStyle(input).fontSize};
        font-family:${getComputedStyle(input).fontFamily};
        padding:0 6px;
      `;
      temp.textContent = input.value || input.placeholder || '';
      document.body.appendChild(temp);

      const minW = 60;
      const maxW = 320;
      let width = Math.min(maxW, Math.max(minW, temp.offsetWidth + 16));
      document.body.removeChild(temp);
      node.style.width = width + 'px';

      input.style.height = 'auto';
      const measured = Math.max(NODE_HEIGHT_DEFAULT, input.scrollHeight);
      const maxHeight = NODE_HEIGHT_DEFAULT * 2;
      node.style.height = Math.min(measured, maxHeight) + 'px';
      input.style.height = (Math.min(measured, maxHeight) - 8) + 'px';
    }

    function createResult() {
      const id = createNode('结果', HEAD_X, HEAD_Y, false, 'vertical-text');
      model.result = { id };
    }

    // 删除了 editResult 按钮的调用，保留函数以防外部引用需要
    function editResult() {
      const el = nodes[model.result.id];
      el.querySelector('.node-input').focus();
    }

    // 添加原因类别：按上下两侧数量少的一侧添加，数量一致时添加到上侧
    function addCategoryAuto() {
      const topCount = model.categories.filter(c => c.side === 'top').length;
      const bottomCount = model.categories.filter(c => c.side === 'bottom').length;
      const side = (topCount <= bottomCount) ? 'top' : 'bottom';

      const labelId = createNode('原因类别', 0, 0, true, '', true);

      model.categories.push({
        id: newId('cat'),
        side,
        anchorX: 0,
        anchorY: 0,
        labelId,
        primaryCauses: []
      });

      relayout();
      saveHistory();
    }

    // 添加一级原因
    function addPrimaryCause(categoryLabelId, side) {
      const cat = model.categories.find(c => c.labelId === categoryLabelId);
      if (!cat) return;

      const primaryId = newId('primary');
      cat.primaryCauses.push({
        id: primaryId,
        text: '一级原因',
        side: side,  // 'left' or 'right'
        subCauses: [] // 二级原因数组
      });

      relayout();
      saveHistory();
    }

    // 删除一级原因
    function deletePrimaryCause(categoryId, primaryId) {
      const cat = model.categories.find(c => c.id === categoryId);
      if (!cat) return;
      cat.primaryCauses = cat.primaryCauses.filter(p => p.id !== primaryId);
      relayout();
      saveHistory();
    }

    function removeFromModelByNodeId(nodeId) {
      if (model.result && model.result.id === nodeId) return;
      model.categories = model.categories.filter(c => c.labelId !== nodeId);
    }

    function deleteNode(id) {
      if (model.result && model.result.id === id) {
        showMessage('结果节点不可删除', 'error');
        return;
      }
      const el = nodes[id];
      if (el) { el.remove(); delete nodes[id]; }
    }

    // 分布计算：从主干左侧到主干箭头左侧 50px 处，按照 1/n, 2/n, ..., 终点 的规则分布
    function computeDistributedAnchors(count, spineStartX, spineArrowTipX) {
      const usableStart = spineStartX + CATEGORY_ANCHOR_LEFT_MARGIN;
      const usableEnd = spineArrowTipX - CATEGORY_ANCHOR_RIGHT_TO_ARROW;
      const usableLen = Math.max(0, usableEnd - usableStart);
      const anchors = [];
      if (count <= 0 || usableLen <= 0) return anchors;

      if (count === 1) {
        anchors.push(usableEnd);
        return anchors;
      }
      for (let i = 1; i <= count; i++) {
        const pos = usableStart + (usableLen * i) / count;
        anchors.push(pos);
      }
      return anchors;
    }

    // 计算锚点错开：使上下侧箭头端在主干上交错40px
    function applyStaggerToAnchors(topAnchors, bottomAnchors) {
      const topShifted = topAnchors.map(x => x + ANCHOR_STAGGER_OFFSET / 2);
      const bottomShifted = bottomAnchors.map(x => x - ANCHOR_STAGGER_OFFSET / 2);
      return { topShifted, bottomShifted };
    }

    // 根据锚点和动态角度计算起点，并返回推荐的文本框位置（使其靠近该角度的连线）
    function computeStartAtFixedAngle(anchorX, anchorY, isTop, labelWidth, labelHeight) {
      // 保持箭头端位置不变（anchorX, anchorY），线角度由公式动态计算（单位：度）
      const theta = (isTop ? FIXED_ARROW_ANGLE_DEG : -FIXED_ARROW_ANGLE_DEG) * Math.PI / 180;
      const dirX = Math.cos(theta);
      const dirY = Math.sin(theta);

      // 文本框的目标接触边：上侧使用下边缘，下侧使用上边缘
      const labelTop = isTop
        ? (SPINE_Y + nodes[model.result.id].offsetHeight / 2 - CATEGORY_VERTICAL_OFFSET - labelHeight)
        : (SPINE_Y + nodes[model.result.id].offsetHeight / 2 + CATEGORY_VERTICAL_OFFSET);

      const targetY = isTop ? (labelTop + labelHeight) : labelTop;

      // 沿固定角度，从锚点反向追溯到目标Y处的线起点
      const t = (anchorY - targetY) / dirY;
      let startX = anchorX - t * dirX;
      let startY = targetY;

      // 将文本框中心与线起点对齐（使文本框贴近线）
      let labelLeft = startX - labelWidth / 2;

      // 防止越界到画布左侧
      labelLeft = Math.max(0, labelLeft);

      // 整体左移（需求中保持）
      startX = startX + CATEGORY_GLOBAL_SHIFT_X;
      labelLeft = labelLeft + CATEGORY_GLOBAL_SHIFT_X;

      return { startX, startY, labelLeft, labelTop };
    }

    // 根据当前类别的锚点在失焦时微调文本框位置（同步到当前动态角度）
    function adjustLabelPositionByAnchor(nodeId) {
      const cat = model.categories.find(c => c.labelId === nodeId);
      if (!cat) return;
      const labelEl = nodes[cat.labelId];
      autoSize(labelEl);
      const w = labelEl.offsetWidth;
      const h = labelEl.offsetHeight;

      const fixed = computeStartAtFixedAngle(cat.anchorX, cat.anchorY, cat.side === 'top', w, h);
      labelEl.style.left = fixed.labelLeft + 'px';
      labelEl.style.top = fixed.labelTop + 'px';
    }

    function relayout() {
      const svg = document.getElementById('linesSvg');
      svg.innerHTML = '';

      // 清除所有一级/二级/三级原因相关的DOM元素
      document.querySelectorAll('.primary-cause-text, .primary-delete-btn, .primary-drag-btn, .secondary-cause-text, .secondary-delete-btn, .tertiary-cause-text, .tertiary-delete-btn, .add-secondary-btn, .add-tertiary-btn').forEach(el => el.remove());

      // 根据当前垂直距离，动态更新类别斜线角度
      FIXED_ARROW_ANGLE_DEG = computeArrowAngleDegFromYOffset(CATEGORY_VERTICAL_OFFSET);

      // 动态计算鱼头位置与主干起点，使主干（SPINE_LENGTH）在容器可视宽度中心左右对称
      try {
        const container = document.getElementById('canvasContainer');
        const canvas = document.getElementById('canvas');
        const cs = getComputedStyle(canvas);
        const padL = parseFloat(cs.paddingLeft) || 0;
        const viewportCenterX = padL + container.clientWidth / 2; // 以 content 区坐标系为基准
        const half = Math.max(50, SPINE_LENGTH / 2);
        SPINE_START_X = Math.round(viewportCenterX - half);
        HEAD_X = Math.round(viewportCenterX + half);
      } catch { }

      const headEl = nodes[model.result.id];
      headEl.style.left = HEAD_X + 'px';
      headEl.style.top = HEAD_Y + 'px';
      autoSize(headEl);

      const spineY = SPINE_Y + headEl.offsetHeight / 2;

      // 主干线从 SPINE_START_X 到 鱼头左边 8 像素处
      drawMainSpine(SPINE_START_X, spineY, HEAD_X - 8, spineY);

      const topCats = model.categories.filter(c => c.side === 'top');
      const bottomCats = model.categories.filter(c => c.side === 'bottom');

      // 计算锚点分布范围：终点取主干箭头的尖端（HEAD_X - 8）
      const topAnchorsXBase = computeDistributedAnchors(topCats.length, SPINE_START_X, HEAD_X - 8);
      const bottomAnchorsXBase = computeDistributedAnchors(bottomCats.length, SPINE_START_X, HEAD_X - 8);

      // 同步移除最右侧下侧的额外左移，让下侧与上侧统一交错距离
      const bottomAnchorsAdjustedBase = bottomAnchorsXBase;

      // 应用上下侧锚点错开40（总差异40px，分别±20）
      const { topShifted: topAnchorsXRaw, bottomShifted: bottomAnchorsXRaw } =
        applyStaggerToAnchors(topAnchorsXBase, bottomAnchorsAdjustedBase);

      // 应用整体左移
      const topAnchorsX = topAnchorsXRaw.map(x => x + CATEGORY_GLOBAL_SHIFT_X);
      const bottomAnchorsX = bottomAnchorsXRaw.map(x => x + CATEGORY_GLOBAL_SHIFT_X);

      // 上侧节点定位与连线（固定角度70度，箭头端位置维持不变）
      for (let i = 0; i < topCats.length; i++) {
        const cat = topCats[i];
        const anchorX = topAnchorsX[i];
        const anchorY = spineY;
        cat.anchorX = anchorX;
        cat.anchorY = anchorY;

        const labelEl = nodes[cat.labelId];
        autoSize(labelEl);
        const w = labelEl.offsetWidth;
        const h = labelEl.offsetHeight;

        const fixed = computeStartAtFixedAngle(anchorX, anchorY, true, w, h);
        labelEl.style.left = fixed.labelLeft + 'px';
        labelEl.style.top = fixed.labelTop + 'px';

        drawCategoryConnection(fixed.startX, fixed.startY, anchorX, anchorY, true);
        // 记录类别支干起点
        cat.lineStartX = fixed.startX;
        cat.lineStartY = fixed.startY;

        // 绘制一级原因（包含左右错开）
        drawPrimaryCauses(cat, fixed.startX, fixed.startY, anchorX, anchorY, true);
      }

      // 下侧节点定位与连线（固定角度70度，箭头端位置维持不变）
      for (let i = 0; i < bottomCats.length; i++) {
        const cat = bottomCats[i];
        const anchorX = bottomAnchorsX[i];
        const anchorY = spineY;
        cat.anchorX = anchorX;
        cat.anchorY = anchorY;

        const labelEl = nodes[cat.labelId];
        autoSize(labelEl);
        const w = labelEl.offsetWidth;
        const h = labelEl.offsetHeight;

        const fixed = computeStartAtFixedAngle(anchorX, anchorY, false, w, h);
        labelEl.style.left = fixed.labelLeft + 'px';
        labelEl.style.top = fixed.labelTop + 'px';

        drawCategoryConnection(fixed.startX, fixed.startY, anchorX, anchorY, false);
        // 记录类别支干起点
        cat.lineStartX = fixed.startX;
        cat.lineStartY = fixed.startY;

        // 绘制一级原因（包含左右错开）
        drawPrimaryCauses(cat, fixed.startX, fixed.startY, anchorX, anchorY, false);
      }

      updateCanvasSize();
      updateHistoryInfo();
      // 任何重布局后都尝试居中视图，保证超长主干也能完整可见
      if (typeof centerSoon === 'function') centerSoon();
    }

    // 绘制一级原因（在支干上左右交错）
    function drawPrimaryCauses(category, lineStartX, lineStartY, lineEndX, lineEndY, isTop) {
      const primaryCauses = category.primaryCauses;
      if (!primaryCauses || primaryCauses.length === 0) return;

      // 计算支干线的长度和方向
      const lineLength = Math.sqrt(Math.pow(lineEndX - lineStartX, 2) + Math.pow(lineEndY - lineStartY, 2));
      const dirX = (lineEndX - lineStartX) / lineLength;
      const dirY = (lineEndY - lineStartY) / lineLength;

      // 分左右两侧
      const leftCauses = primaryCauses.filter(p => p.side === 'left');
      const rightCauses = primaryCauses.filter(p => p.side === 'right');

      // 左右分别均匀分布的基础位置（沿支干的距离）
      const leftAnchors = computePrimaryAnchors(leftCauses.length, lineLength);
      const rightAnchors = computePrimaryAnchors(rightCauses.length, lineLength);

      // 错开逻辑
      const staggerTowardStart = PRIMARY_STAGGER_OFFSET;   // 向起点（类别框）方向的偏移
      const staggerTowardEnd = PRIMARY_STAGGER_OFFSET;     // 向终点（主干锚点）方向的偏移

      // 初始化未设置位置（pos）的一次性默认分布；若已有 pos（0..1），则使用该位置
      if (leftCauses.length > 0) {
        leftCauses.forEach((primary, idx) => {
          if (primary.pos == null || isNaN(primary.pos)) {
            let tBase = leftAnchors[idx];
            let t = Math.max(0, Math.min(lineLength, tBase - staggerTowardStart));
            primary.pos = Math.max(0, Math.min(1, t / lineLength));
          }
          const t = primary.pos * lineLength;
          const anchorX = lineStartX + dirX * t;
          const anchorY = lineStartY + dirY * t;
          drawSinglePrimaryCause(category.id, category, primary, anchorX, anchorY, lineStartX, lineStartY, lineEndX, lineEndY, 'left', isTop);
        });
      }

      // 绘制右侧一级原因
      if (rightCauses.length > 0) {
        rightCauses.forEach((primary, idx) => {
          if (primary.pos == null || isNaN(primary.pos)) {
            let tBase = rightAnchors[idx];
            let t = Math.max(0, Math.min(lineLength, tBase + staggerTowardEnd));
            primary.pos = Math.max(0, Math.min(1, t / lineLength));
          }
          const t = primary.pos * lineLength;
          const anchorX = lineStartX + dirX * t;
          const anchorY = lineStartY + dirY * t;
          drawSinglePrimaryCause(category.id, category, primary, anchorX, anchorY, lineStartX, lineStartY, lineEndX, lineEndY, 'right', isTop);
        });
      }
    }

    // 计算一级原因在支干上的均匀分布位置（返回距离起点的长度数组）
    function computePrimaryAnchors(count, lineLength) {
      const anchors = [];
      if (count <= 0) return anchors;

      // 留出起点和终点的边距
      const margin = 20;
      const usableLength = Math.max(0, lineLength - 2 * margin);

      if (count === 1) {
        anchors.push(margin + usableLength / 2);
        return anchors;
      }

      for (let i = 1; i <= count; i++) {
        const pos = margin + (usableLength * i) / (count + 1);
        anchors.push(pos);
      }
      return anchors;
    }

    // 绘制单个一级原因（改为可编辑的textarea，文本始终在箭头线上方）
    function drawSinglePrimaryCause(categoryId, category, primary, anchorX, anchorY, lineStartX, lineStartY, lineEndX, lineEndY, side, isTop) {
      // 水平线方向：左侧向左，右侧向右
      const direction = side === 'left' ? -1 : 1;
      const startX = anchorX + direction * PRIMARY_LINE_LENGTH;
      const startY = anchorY;

      // 绘制水平箭头线（箭头端在锚点）
      const l1 = drawLine(startX, startY, anchorX, anchorY, 1.5, '#000');
      l1.classList.add('pri-line');
      l1.dataset.primaryId = primary.id;
      const [pa1, pa2] = drawArrowAtEnd(anchorX, anchorY, startX, startY, 1.5, '#000');
      pa1.classList.add('pri-arrow'); pa2.classList.add('pri-arrow');
      pa1.dataset.primaryId = primary.id; pa2.dataset.primaryId = primary.id;

      const textWidth = Math.abs(startX - anchorX);

      // 创建可编辑的textarea元素
      const textArea = document.createElement('textarea');
      textArea.className = 'primary-cause-text';
      textArea.value = primary.text;
      textArea.dataset.primaryId = primary.id;
      textArea.style.left = (Math.min(startX, anchorX)) + 'px';
      textArea.style.width = textWidth + 'px';
      textArea.style.maxWidth = textWidth + 'px';
      // 右侧一级原因文本靠右对齐
      textArea.style.textAlign = (side === 'right') ? 'right' : 'left';
      textArea.rows = 1;
      // 若为末端（无二级）则加粗红色
      if (!primary.subCauses || primary.subCauses.length === 0) {
        textArea.classList.add('leaf-cause');
      }

      // 自动调整高度并更新位置（使文本始终在箭头线上方）
      const autoResizeTextarea = () => {
        textArea.style.height = 'auto';
        const actualHeight = textArea.scrollHeight;
        textArea.style.height = actualHeight + 'px';
        // 关键修改：根据实际高度计算top，使文本底部在箭头线上方留出4px间距
        textArea.style.top = (startY - actualHeight - 4) + 'px';
      };

      // 输入时自动调整高度并更新数据
      textArea.addEventListener('input', () => {
        autoResizeTextarea();
        primary.text = textArea.value;
      });

      // 失焦时保存历史
      textArea.addEventListener('blur', () => {
        deferredSave();
      });

      document.getElementById('canvas').appendChild(textArea);

      // 初始化高度和位置
      autoResizeTextarea();

      // 创建删除按钮（跟随文本块中心，位置也需要根据文本高度调整）
      const deleteBtn = document.createElement('div');
      deleteBtn.className = 'primary-delete-btn';
      deleteBtn.textContent = '×';
      deleteBtn.dataset.primaryId = primary.id;
      // 删除按钮位置：移动到当前“添加二级原因”按钮的位置（水平段起点处）
      deleteBtn.style.left = (startX - 8) + 'px';
      deleteBtn.style.top = (startY - 8) + 'px';
      deleteBtn.onclick = (e) => {
        e.stopPropagation();
        deletePrimaryCause(categoryId, primary.id);
      };
      document.getElementById('canvas').appendChild(deleteBtn);

      // 添加“+”按钮用于新增二级原因（与删除按钮水平排列，避免重叠）
      const addBtn = document.createElement('div');
      addBtn.className = 'add-secondary-btn';
      addBtn.textContent = '+';
      addBtn.dataset.primaryId = primary.id;
      // 与删除按钮水平排列：根据左右侧决定向外的方向
      const btnGapPrimary = 22 * (side === 'right' ? 1 : -1);
      addBtn.style.left = (startX - 8 + btnGapPrimary) + 'px';
      addBtn.style.top = (startY - 8) + 'px';
      addBtn.onclick = (e) => {
        e.stopPropagation();
        addSecondaryCause(categoryId, primary.id);
      };
      document.getElementById('canvas').appendChild(addBtn);

      // 创建拖拽按钮（常显，位于添加/删除按钮外侧）
      const dragBtn = document.createElement('div');
      dragBtn.className = 'primary-drag-btn';
      dragBtn.innerHTML = '<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">\
<polygon points="6,1 4.5,3 7.5,3" fill="#fff"/>\
<polygon points="6,11 4.5,9 7.5,9" fill="#fff"/>\
<polygon points="1,6 3,4.5 3,7.5" fill="#fff"/>\
<polygon points="11,6 9,4.5 9,7.5" fill="#fff"/>\
<rect x="4.5" y="4.5" width="3" height="3" fill="#fff"/>\
</svg>';
      dragBtn.title = '拖拽移动（松手自动贴线）';
      dragBtn.dataset.primaryId = primary.id;
      // 与删除/添加按钮水平排列：删除（起点），添加（±22px），拖拽（±44px）
      dragBtn.style.left = (startX - 8 + btnGapPrimary * 2) + 'px';
      dragBtn.style.top = (startY - 8) + 'px';
      document.getElementById('canvas').appendChild(dragBtn);

      // 绘制二级原因
      drawSecondaryCauses(categoryId, primary, startX, startY, anchorX, anchorY, side, isTop);

      // 当一级原因文本高度变化时，联动上方的二级原因文本位置（不重绘线，避免中断编辑）
      textArea.addEventListener('input', () => {
        const secText = document.querySelector(`.secondary-cause-text[data-primary-id="${primary.id}"]`);
        // 基于当前 primary.pos 重新计算该一级的主连线与按钮位置，避免错位
        {
          const ex0 = category.anchorX; const ey0 = category.anchorY;
          // 使用已记录的类别支干起点，避免因重复计算造成微偏移
          let sx0 = category.lineStartX; let sy0 = category.lineStartY;
          if (typeof sx0 !== 'number' || typeof sy0 !== 'number') {
            const labelEl = nodes[category.labelId];
            const w0 = labelEl.offsetWidth; const h0 = labelEl.offsetHeight;
            const start = computeLineStartAtAngleFixed(labelEl.offsetLeft, labelEl.offsetTop, w0, h0, ex0, ey0, category.side === 'top', FIXED_ARROW_ANGLE_DEG);
            sx0 = start.x; sy0 = start.y;
          }
          const len0 = Math.max(1, Math.hypot(ex0 - sx0, ey0 - sy0));
          const pos0 = (primary.pos == null) ? 0.5 : primary.pos;
          const ax0 = sx0 + (ex0 - sx0) * pos0;
          const ay0 = sy0 + (ey0 - sy0) * pos0;
          const startHX0 = ax0 + (side === 'left' ? -1 : 1) * PRIMARY_LINE_LENGTH;

          // 重绘主连线
          document.querySelectorAll(`line.pri-line[data-primary-id="${primary.id}"]`).forEach(el => el.remove());
          document.querySelectorAll(`line.pri-arrow[data-primary-id="${primary.id}"]`).forEach(el => el.remove());
          const lMain0 = drawLine(startHX0, ay0, ax0, ay0, 1.5, '#000');
          lMain0.classList.add('pri-line'); lMain0.dataset.primaryId = primary.id;
          const [pa0a, pa0b] = drawArrowAtEnd(ax0, ay0, startHX0, ay0, 1.5, '#000');
          pa0a.classList.add('pri-arrow'); pa0b.classList.add('pri-arrow'); pa0a.dataset.primaryId = primary.id; pa0b.dataset.primaryId = primary.id;

          // 同步一级按钮位置（删、加、拖）
          const delP = document.querySelector(`.primary-delete-btn[data-primary-id="${primary.id}"]`);
          if (delP) { delP.style.left = (startHX0 - 8) + 'px'; delP.style.top = (ay0 - 8) + 'px'; }
          const addP = document.querySelector(`.add-secondary-btn[data-primary-id="${primary.id}"]`);
          if (addP) { const gap = 22 * (side === 'right' ? 1 : -1); addP.style.left = (startHX0 - 8 + gap) + 'px'; addP.style.top = (ay0 - 8) + 'px'; }
          const dragP = document.querySelector(`.primary-drag-btn[data-primary-id="${primary.id}"]`);
          if (dragP) { const gap = 22 * (side === 'right' ? 1 : -1); dragP.style.left = (startHX0 - 8 + gap * 2) + 'px'; dragP.style.top = (ay0 - 8) + 'px'; }

          // 同步一级文本框尺寸与位置（保持底对齐到 startHY=ay0）
          textArea.style.left = (Math.min(startHX0, ax0)) + 'px';
          textArea.style.width = Math.abs(startHX0 - ax0) + 'px';
          textArea.style.height = 'auto';
          const newH0 = textArea.scrollHeight; textArea.style.height = newH0 + 'px';
          textArea.style.top = (ay0 - newH0 - 4) + 'px';
        }

        if (secText) {
          // 基于当前 primary.pos 重新计算 anchor 与 start
          const ex0 = category.anchorX; const ey0 = category.anchorY;
          let sx0 = category.lineStartX; let sy0 = category.lineStartY;
          if (typeof sx0 !== 'number' || typeof sy0 !== 'number') {
            const labelEl = nodes[category.labelId];
            const w0 = labelEl.offsetWidth; const h0 = labelEl.offsetHeight;
            const start = computeLineStartAtAngleFixed(labelEl.offsetLeft, labelEl.offsetTop, w0, h0, ex0, ey0, category.side === 'top', FIXED_ARROW_ANGLE_DEG);
            sx0 = start.x; sy0 = start.y;
          }
          const len0 = Math.max(1, Math.hypot(ex0 - sx0, ey0 - sy0));
          const pos1 = (primary.pos == null || isNaN(primary.pos)) ? 0.5 : primary.pos;
          const ax0 = sx0 + (ex0 - sx0) * pos1;
          const ay0 = sy0 + (ey0 - sy0) * pos1;
          const startHX0 = ax0 + (side === 'left' ? -1 : 1) * PRIMARY_LINE_LENGTH;

          secText.style.height = 'auto';
          const h = secText.scrollHeight;
          secText.style.height = h + 'px';
          secText.style.top = (textArea.offsetTop - h - SECONDARY_TEXT_GAP) + 'px';

          // 移除旧二级线
          document.querySelectorAll(`line.sec-line[data-primary-id="${primary.id}"]`).forEach(el => el.remove());
          document.querySelectorAll(`line.sec-arrow[data-primary-id="${primary.id}"]`).forEach(el => el.remove());

          const Sy = parseFloat(secText.style.top) + secText.scrollHeight;
          const offsetE = (side === 'right') ? 15 : -15;
          let Ex = (ax0) + offsetE;
          const Ey = ay0;
          const minX = Math.min(startHX0, ax0) + 6;
          const maxX = Math.max(startHX0, ax0) - 6;
          if (Ex < minX) Ex = minX;
          if (Ex > maxX) Ex = maxX;

          const thetaSec = (isTop ? SMALL_BRANCH_ANGLE_DEG : -SMALL_BRANCH_ANGLE_DEG) * Math.PI / 180;
          const deltaY = Ey - Sy;
          const deltaX = deltaY / Math.tan(thetaSec);
          const Bx = Ex - deltaX;
          const By = Sy;
          const Sx = (side === 'right') ? (Bx + SECONDARY_HORIZ_LENGTH) : (Bx - SECONDARY_HORIZ_LENGTH);

          // 对齐二级文本到 Sx
          const textWidth = SECONDARY_HORIZ_LENGTH;
          if (side === 'right') secText.style.left = (Sx - textWidth) + 'px'; else secText.style.left = Sx + 'px';

          const lH = drawLine(Sx, Sy, Bx, By, 1.2, '#000'); lH.classList.add('sec-line'); lH.dataset.primaryId = primary.id;
          const lS = drawLine(Bx, By, Ex, Ey, 1.5, '#000'); lS.classList.add('sec-line'); lS.dataset.primaryId = primary.id;
          const [a1, a2] = drawArrowAtEnd(Ex, Ey, Bx, By, 1.5, '#000'); a1.classList.add('sec-arrow'); a2.classList.add('sec-arrow'); a1.dataset.primaryId = primary.id; a2.dataset.primaryId = primary.id;

          // 同步删除按钮位置（参考一级：位于水平段起点 Sx,Sy）
          const delBtn = document.querySelector(`.secondary-delete-btn[data-primary-id="${primary.id}"]`);
          if (delBtn) { delBtn.style.left = (Sx - 8) + 'px'; delBtn.style.top = (Sy - 8) + 'px'; }

          // 同步三级原因（若存在）
          const secObj = (primary.subCauses || [])[0];
          const terText = secObj ? document.querySelector(`.tertiary-cause-text[data-secondary-id="${secObj.id}"]`) : null;
          if (terText) {
            terText.style.height = 'auto';
            const th = terText.scrollHeight; terText.style.height = th + 'px';
            terText.style.top = (parseFloat(secText.style.top) - th - TERTIARY_TEXT_GAP) + 'px';
            document.querySelectorAll(`line.ter-line[data-secondary-id="${secObj.id}"]`).forEach(el => el.remove());
            document.querySelectorAll(`line.ter-arrow[data-secondary-id="${secObj.id}"]`).forEach(el => el.remove());
            placeAndDrawTertiary(terText, secObj.id, Sx, Sy, Bx, side, isTop);
          }
        }
      });

      // ========= 拖拽一级原因：沿所属类别斜线移动 =========
      const canvas = document.getElementById('canvas');
      const onMouseDown = (e) => {
        if (e.button !== 0) return; // 仅左键
        e.preventDefault();
        const moveHandler = (ev) => {
          const rect = canvas.getBoundingClientRect();
          const mx = ev.clientX - rect.left;
          const my = ev.clientY - rect.top;

          // 计算当前类别支干的起点（基于现有布局，以固定角度贴合类别框）
          // 使用记录的类别支干起点，拖拽期间不重复计算
          let sx = category.lineStartX; let sy = category.lineStartY;
          if (typeof sx !== 'number' || typeof sy !== 'number') {
            const labelEl = nodes[category.labelId];
            const w = labelEl.offsetWidth; const h = labelEl.offsetHeight;
            const start = computeLineStartAtAngleFixed(labelEl.offsetLeft, labelEl.offsetTop, w, h, category.anchorX, category.anchorY, category.side === 'top', FIXED_ARROW_ANGLE_DEG);
            sx = start.x; sy = start.y;
          }
          const ex = category.anchorX; const ey = category.anchorY;
          const vx = ex - sx; const vy = ey - sy;
          const len = Math.max(1, Math.hypot(vx, vy));
          const dirx = vx / len; const diry = vy / len;

          // 投影到线段上，限制在边距内
          const px = mx - sx; const py = my - sy;
          let t = px * dirx + py * diry; // 标量投影
          const margin = 20;
          t = Math.max(margin, Math.min(len - margin, t));
          primary.pos = Math.max(0, Math.min(1, t / len));

          // 依据新的锚点，更新本一级的几何和连线
          const ax = sx + dirx * t; const ay = sy + diry * t;
          // 更新主连线：先移除旧线
          document.querySelectorAll(`line.pri-line[data-primary-id="${primary.id}"]`).forEach(el => el.remove());
          document.querySelectorAll(`line.pri-arrow[data-primary-id="${primary.id}"]`).forEach(el => el.remove());

          const startHX = ax + (side === 'left' ? -1 : 1) * PRIMARY_LINE_LENGTH;
          const startHY = ay;
          const lMain = drawLine(startHX, startHY, ax, ay, 1.5, '#000');
          lMain.classList.add('pri-line'); lMain.dataset.primaryId = primary.id;
          const [paA, paB] = drawArrowAtEnd(ax, ay, startHX, startHY, 1.5, '#000');
          paA.classList.add('pri-arrow'); paB.classList.add('pri-arrow');
          paA.dataset.primaryId = primary.id; paB.dataset.primaryId = primary.id;

          // 更新文本框位置与高度
          textArea.style.left = (Math.min(startHX, ax)) + 'px';
          textArea.style.width = Math.abs(startHX - ax) + 'px';
          // 重新计算高度和 top（底对齐到水平线 startHY）
          textArea.style.height = 'auto';
          const newH = textArea.scrollHeight;
          textArea.style.height = newH + 'px';
          textArea.style.top = (startHY - newH - 4) + 'px';


          // 同步一级删除/添加按钮位置
          const delBtn = document.querySelector(`.primary-delete-btn[data-primary-id="${primary.id}"]`);
          if (delBtn) { delBtn.style.left = (startHX - 8) + 'px'; delBtn.style.top = (startHY - 8) + 'px'; }
          const addSecBtn = document.querySelector(`.add-secondary-btn[data-primary-id="${primary.id}"]`);
          if (addSecBtn) {
            const gap = 22 * (side === 'right' ? 1 : -1);
            addSecBtn.style.left = (startHX - 8 + gap) + 'px';
            addSecBtn.style.top = (startHY - 8) + 'px';
          }
          const dragP2 = document.querySelector(`.primary-drag-btn[data-primary-id="${primary.id}"]`);
          if (dragP2) {
            const gap = 22 * (side === 'right' ? 1 : -1);
            dragP2.style.left = (startHX - 8 + gap * 2) + 'px';
            dragP2.style.top = (startHY - 8) + 'px';
          }

          // 更新二级/三级（若存在），参考已有局部更新逻辑
          const secText = document.querySelector(`.secondary-cause-text[data-primary-id="${primary.id}"]`);
          if (secText) {
            secText.style.height = 'auto';
            const sh = secText.scrollHeight;
            secText.style.height = sh + 'px';
            secText.style.top = (textArea.offsetTop - sh - SECONDARY_TEXT_GAP) + 'px';

            // 移除旧二级线
            document.querySelectorAll(`line.sec-line[data-primary-id="${primary.id}"]`).forEach(el => el.remove());
            document.querySelectorAll(`line.sec-arrow[data-primary-id="${primary.id}"]`).forEach(el => el.remove());

            const Sy = parseFloat(secText.style.top) + secText.scrollHeight;
            const offsetE = (side === 'right') ? 15 : -15;
            let Ex = (ax) + offsetE; // 终点靠近锚点
            const Ey = startHY;
            const minX = Math.min(startHX, ax) + 6;
            const maxX = Math.max(startHX, ax) - 6;
            if (Ex < minX) Ex = minX;
            if (Ex > maxX) Ex = maxX;
            const thetaSec = (isTop ? 60 : -60) * Math.PI / 180;
            const deltaY = Ey - Sy;
            const deltaX = deltaY / Math.tan(thetaSec);
            const Bx = Ex - deltaX;
            const By = Sy;
            const Sx = (side === 'right') ? (Bx + SECONDARY_HORIZ_LENGTH) : (Bx - SECONDARY_HORIZ_LENGTH);

            // 对齐二级文本到 Sx
            const textWidth = SECONDARY_HORIZ_LENGTH;
            if (side === 'right') secText.style.left = (Sx - textWidth) + 'px'; else secText.style.left = Sx + 'px';

            const lH = drawLine(Sx, Sy, Bx, By, 1.2, '#000'); lH.classList.add('sec-line'); lH.dataset.primaryId = primary.id;
            const lS = drawLine(Bx, By, Ex, Ey, 1.5, '#000'); lS.classList.add('sec-line'); lS.dataset.primaryId = primary.id;
            const [sa1, sa2] = drawArrowAtEnd(Ex, Ey, Bx, By, 1.5, '#000'); sa1.classList.add('sec-arrow'); sa2.classList.add('sec-arrow'); sa1.dataset.primaryId = primary.id; sa2.dataset.primaryId = primary.id;

            // 同步二级按钮
            const secDel = document.querySelector(`.secondary-delete-btn[data-primary-id="${primary.id}"]`);
            if (secDel) { secDel.style.left = (Sx - 8) + 'px'; secDel.style.top = (Sy - 8) + 'px'; }
            const secObj2 = (primary.subCauses || [])[0];
            if (secObj2) {
              const addTer = document.querySelector(`.add-tertiary-btn[data-secondary-id="${secObj2.id}"]`);
              if (addTer) {
                const gap2 = 22 * (side === 'right' ? 1 : -1);
                addTer.style.left = (Sx - 8 + gap2) + 'px'; addTer.style.top = (Sy - 8) + 'px';
              }
            }

            // 三级
            const secObj = (primary.subCauses || [])[0];
            if (secObj) {
              const terText = document.querySelector(`.tertiary-cause-text[data-secondary-id="${secObj.id}"]`);
              if (terText) {
                terText.style.height = 'auto';
                const th = terText.scrollHeight; terText.style.height = th + 'px';
                const baseTopTer = parseFloat(secText.style.top);
                terText.style.top = (baseTopTer - th - TERTIARY_TEXT_GAP) + 'px';
                // 重绘三级
                document.querySelectorAll(`line.ter-line[data-secondary-id="${secObj.id}"]`).forEach(el => el.remove());
                document.querySelectorAll(`line.ter-arrow[data-secondary-id="${secObj.id}"]`).forEach(el => el.remove());
                placeAndDrawTertiary(terText, secObj.id, Sx, Sy, Bx, side, isTop);
              }
            }
          }
        };
        const upHandler = () => {
          document.removeEventListener('mousemove', moveHandler);
          document.removeEventListener('mouseup', upHandler);
          // 松手时立即按当前 primary.pos 重新布局一次，确保“自动贴线”
          relayout();
          deferredSave();
        };
        document.addEventListener('mousemove', moveHandler);
        document.addEventListener('mouseup', upHandler);
      };
      // 仅拖拽按钮触发拖动（文本框用于编辑，不参与拖拽）
      dragBtn.addEventListener('mousedown', onMouseDown);

      // 输入/拖动时，拖拽钮位置已在上方各处同步更新，无需额外函数占位
    }

    // 仅重绘连接线，不改变布局（维持锚点不变，角度按公式动态计算）
    function redrawLines() {
      const svg = document.getElementById('linesSvg');
      svg.innerHTML = '';

      // 清除所有一级/二级/三级原因相关的DOM元素
      document.querySelectorAll('.primary-cause-text, .primary-delete-btn, .primary-drag-btn, .secondary-cause-text, .secondary-delete-btn, .tertiary-cause-text, .tertiary-delete-btn, .add-secondary-btn, .add-tertiary-btn').forEach(el => el.remove());

      // 线重绘前，同步角度（以应对外部仅调整文本不触发 relayout 的情况）
      FIXED_ARROW_ANGLE_DEG = computeArrowAngleDegFromYOffset(CATEGORY_VERTICAL_OFFSET);

      const headEl = nodes[model.result.id];
      const spineY = SPINE_Y + headEl.offsetHeight / 2;

      drawMainSpine(SPINE_START_X, spineY, HEAD_X - 8, spineY);

      const topCats = model.categories.filter(c => c.side === 'top');
      const bottomCats = model.categories.filter(c => c.side === 'bottom');

      const topAnchorsXBase = computeDistributedAnchors(topCats.length, SPINE_START_X, HEAD_X - 8);
      const bottomAnchorsXBase = computeDistributedAnchors(bottomCats.length, SPINE_START_X, HEAD_X - 8);

      const bottomAnchorsAdjustedBase = bottomAnchorsXBase;

      const { topShifted: topAnchorsXRaw, bottomShifted: bottomAnchorsXRaw } =
        applyStaggerToAnchors(topAnchorsXBase, bottomAnchorsAdjustedBase);

      const topAnchorsX = topAnchorsXRaw.map(x => x + CATEGORY_GLOBAL_SHIFT_X);
      const bottomAnchorsX = bottomAnchorsXRaw.map(x => x + CATEGORY_GLOBAL_SHIFT_X);

      for (let i = 0; i < topCats.length; i++) {
        const cat = topCats[i];
        const anchorX = topAnchorsX[i];
        const anchorY = spineY;
        cat.anchorX = anchorX;
        cat.anchorY = anchorY;

        const labelEl = nodes[cat.labelId];
        const labelLeft = labelEl.offsetLeft;
        const labelTop = labelEl.offsetTop;
        const w = labelEl.offsetWidth;
        const h = labelEl.offsetHeight;

        const start = computeLineStartAtAngleFixed(labelLeft, labelTop, w, h, anchorX, anchorY, true, FIXED_ARROW_ANGLE_DEG);
        drawCategoryConnection(start.x, start.y, anchorX, anchorY, true);
        // 记录类别支干起点，供局部重绘时复用，避免重复计算引入偏移
        cat.lineStartX = start.x;
        cat.lineStartY = start.y;

        // 绘制一级原因（包含左右错开）
        drawPrimaryCauses(cat, start.x, start.y, anchorX, anchorY, true);
      }

      for (let i = 0; i < bottomCats.length; i++) {
        const cat = bottomCats[i];
        const anchorX = bottomAnchorsX[i];
        const anchorY = spineY;
        cat.anchorX = anchorX;
        cat.anchorY = anchorY;

        const labelEl = nodes[cat.labelId];
        const labelLeft = labelEl.offsetLeft;
        const labelTop = labelEl.offsetTop;
        const w = labelEl.offsetWidth;
        const h = labelEl.offsetHeight;

        const start = computeLineStartAtAngleFixed(labelLeft, labelTop, w, h, anchorX, anchorY, false, FIXED_ARROW_ANGLE_DEG);
        drawCategoryConnection(start.x, start.y, anchorX, anchorY, false);
        // 记录类别支干起点
        cat.lineStartX = start.x;
        cat.lineStartY = start.y;

        // 绘制一级原因（包含左右错开）
        drawPrimaryCauses(cat, start.x, start.y, anchorX, anchorY, false);
      }
    }

    // 固定角度下，从类别框到主干锚点的连线起点计算（不移动文本框，仅用于重绘）
    function computeLineStartAtAngleFixed(labelLeft, labelTop, labelWidth, labelHeight, anchorX, anchorY, isTop, angleDeg) {
      const theta = (isTop ? angleDeg : -angleDeg) * Math.PI / 180;
      const dirX = Math.cos(theta);
      const dirY = Math.sin(theta);

      const targetY = isTop ? (labelTop + labelHeight) : labelTop;

      // 线参数方程：P(t) = (anchorX, anchorY) - t*(dirX, dirY)
      const t = (anchorY - targetY) / dirY;
      let startX = anchorX - t * dirX;
      let startY = targetY;

      const minX = labelLeft;
      const maxX = labelLeft + labelWidth;
      if (startX < minX) startX = minX;
      if (startX > maxX) startX = maxX;

      // 注意：labelLeft 与 anchorX 已经包含全局偏移（CATEGORY_GLOBAL_SHIFT_X），此处不再重复叠加
      return { x: startX, y: startY };
    }

    function drawCategoryConnection(startX, startY, endX, endY, isTop) {
      drawLine(startX, startY, endX, endY, 2, '#000');
      drawArrowAtEnd(endX, endY, startX, startY, 2, '#000');
    }

    function drawMainSpine(x1, y1, x2, y2) {
      drawLine(x1, y1, x2, y2, SPINE_THICKNESS, '#000');
      if (SPINE_ARROW) {
        const arrowSize = 10;
        drawLine(x2, y2, x2 - arrowSize, y2 - arrowSize / 2, SPINE_THICKNESS, '#000');
        drawLine(x2, y2, x2 - arrowSize, y2 + arrowSize / 2, SPINE_THICKNESS, '#000');
      }
    }

    function drawLine(x1, y1, x2, y2, width = 2, color = 'black') {
      const svg = document.getElementById('linesSvg');
      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      line.setAttribute('x1', x1); line.setAttribute('y1', y1);
      line.setAttribute('x2', x2); line.setAttribute('y2', y2);
      line.setAttribute('stroke', color);
      line.setAttribute('stroke-width', width);
      line.setAttribute('stroke-linecap', 'round');
      svg.appendChild(line);
      return line;
    }

    function drawArrowAtEnd(endX, endY, fromX, fromY, width = 2, color = 'black') {
      const len = 8;
      const angle = Math.atan2(endY - fromY, endX - fromX);
      const a1 = angle + Math.PI - 0.5;
      const a2 = angle + Math.PI + 0.5;
      const ax1 = endX + Math.cos(a1) * len;
      const ay1 = endY + Math.sin(a1) * len;
      const ax2 = endX + Math.cos(a2) * len;
      const ay2 = endY + Math.sin(a2) * len;
      const l1 = drawLine(endX, endY, ax1, ay1, width, color);
      const l2 = drawLine(endX, endY, ax2, ay2, width, color);
      return [l1, l2];
    }

    function updateCanvasSize() {
      const canvas = document.getElementById('canvas');
      // 统计内容范围，包含节点、文本、线条
      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
      // 节点
      for (const id in nodes) {
        const el = nodes[id];
        const x = el.offsetLeft;
        const y = el.offsetTop;
        const w = el.offsetWidth;
        const h = el.offsetHeight;
        if (!isNaN(x) && !isNaN(y)) {
          minX = Math.min(minX, x);
          minY = Math.min(minY, y);
          maxX = Math.max(maxX, x + w);
          maxY = Math.max(maxY, y + h);
        }
      }
      // 文本
      ['.primary-cause-text', '.secondary-cause-text', '.tertiary-cause-text'].forEach(sel => {
        document.querySelectorAll(sel).forEach(el => {
          const x = parseFloat(el.style.left) || el.offsetLeft || 0;
          const y = parseFloat(el.style.top) || el.offsetTop || 0;
          const w = el.offsetWidth;
          const h = el.scrollHeight || el.offsetHeight;
          minX = Math.min(minX, x);
          minY = Math.min(minY, y);
          maxX = Math.max(maxX, x + w);
          maxY = Math.max(maxY, y + h);
        });
      });
      // 线条
      document.querySelectorAll('#linesSvg line').forEach(line => {
        const x1 = parseFloat(line.getAttribute('x1')) || 0;
        const y1 = parseFloat(line.getAttribute('y1')) || 0;
        const x2 = parseFloat(line.getAttribute('x2')) || 0;
        const y2 = parseFloat(line.getAttribute('y2')) || 0;
        minX = Math.min(minX, x1, x2);
        minY = Math.min(minY, y1, y2);
        maxX = Math.max(maxX, x1, x2);
        maxY = Math.max(maxY, y1, y2);
      });

      if (!isFinite(minX)) { minX = 0; minY = 0; maxX = 0; maxY = 0; }

      // 根据最小坐标为负的情况，增加左/上内边距，避免内容被裁掉
      const basePad = 40;
      const leftPad = basePad + Math.max(0, -Math.floor(minX));
      const topPad = basePad + Math.max(0, -Math.floor(minY));
      const rightPad = basePad;
      const bottomPad = basePad;

      canvas.style.paddingLeft = leftPad + 'px';
      canvas.style.paddingTop = topPad + 'px';
      canvas.style.paddingRight = rightPad + 'px';
      canvas.style.paddingBottom = bottomPad + 'px';

      const totalW = Math.ceil(leftPad + Math.max(0, maxX) + rightPad);
      const totalH = Math.ceil(topPad + Math.max(0, maxY) + bottomPad);
      canvas.style.width = Math.max(totalW, window.innerWidth - 40) + 'px';
      canvas.style.height = Math.max(totalH, window.innerHeight - 200) + 'px';
    }

    // 将内容居中到可视区域（画布中心视图）
    function centerCanvasView() {
      const container = document.getElementById('canvasContainer');
      const canvas = document.getElementById('canvas');
      const bounds = computeContentBounds();
      const cs = getComputedStyle(canvas);
      const padL = parseFloat(cs.paddingLeft) || 0;
      const padT = parseFloat(cs.paddingTop) || 0;
      // 内容中心点（相对容器左上）
      const cx = padL + bounds.x + bounds.width / 2;
      const cy = padT + bounds.y + bounds.height / 2;
      const targetLeft = Math.max(0, cx - container.clientWidth / 2);
      const targetTop = Math.max(0, cy - container.clientHeight / 2);
      container.scrollLeft = Math.min(targetLeft, container.scrollWidth - container.clientWidth);
      container.scrollTop = Math.min(targetTop, container.scrollHeight - container.clientHeight);
    }

    // 在下一帧（或两帧）再居中，确保DOM已完成布局
    function centerSoon() {
      requestAnimationFrame(() => requestAnimationFrame(centerCanvasView));
    }

    function ensureHtml2Canvas(callback) {
      if (typeof html2canvas === 'undefined') {
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js';
        script.onload = callback;
        document.head.appendChild(script);
      } else { callback(); }
    }

    // 计算 #canvas 内部实际内容的包围盒（包含节点、文本、以及 SVG 线条）
    function computeContentBounds() {
      const canvas = document.getElementById('canvas');
      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;

      // 所有节点（结果/类别）
      document.querySelectorAll('#canvas .node').forEach(el => {
        const x = el.offsetLeft;
        const y = el.offsetTop;
        const w = el.offsetWidth;
        const h = el.offsetHeight;
        if (!isNaN(x) && !isNaN(y)) {
          minX = Math.min(minX, x);
          minY = Math.min(minY, y);
          maxX = Math.max(maxX, x + w);
          maxY = Math.max(maxY, y + h);
        }
      });

      // 一级/二级/三级原因文本（绝对定位于 #canvas）
      ['.primary-cause-text', '.secondary-cause-text', '.tertiary-cause-text'].forEach(sel => {
        document.querySelectorAll(sel).forEach(el => {
          const x = parseFloat(el.style.left) || el.offsetLeft;
          const y = parseFloat(el.style.top) || el.offsetTop;
          const w = el.offsetWidth;
          const h = el.scrollHeight || el.offsetHeight;
          if (!isNaN(x) && !isNaN(y)) {
            minX = Math.min(minX, x);
            minY = Math.min(minY, y);
            maxX = Math.max(maxX, x + w);
            maxY = Math.max(maxY, y + h);
          }
        });
      });

      // SVG 线条（坐标直接使用其属性）
      document.querySelectorAll('#linesSvg line').forEach(line => {
        const x1 = parseFloat(line.getAttribute('x1')) || 0;
        const y1 = parseFloat(line.getAttribute('y1')) || 0;
        const x2 = parseFloat(line.getAttribute('x2')) || 0;
        const y2 = parseFloat(line.getAttribute('y2')) || 0;
        minX = Math.min(minX, x1, x2);
        minY = Math.min(minY, y1, y2);
        maxX = Math.max(maxX, x1, x2);
        maxY = Math.max(maxY, y1, y2);
      });

      if (!isFinite(minX) || !isFinite(minY) || !isFinite(maxX) || !isFinite(maxY)) {
        // 回退：若无内容（极少见），返回整个画布
        return { x: 0, y: 0, width: canvas.clientWidth, height: canvas.clientHeight };
      }

      // 加一点边距更好看
      const margin = 12;
      const x = Math.max(0, Math.floor(minX - margin));
      const y = Math.max(0, Math.floor(minY - margin));
      const width = Math.ceil((maxX - minX) + margin * 2);
      const height = Math.ceil((maxY - minY) + margin * 2);
      return { x, y, width, height };
    }

    function copyImage() { ensureHtml2Canvas(() => performCapture(true)); }
    function exportImage() { ensureHtml2Canvas(() => performCapture(false)); }

    function performCapture(toClipboard = false) {
      const canvasEl = document.getElementById('canvas');
      const restore = [];
      const clones = [];
      // 在导出/复制时临时隐藏：删除按钮、一级/二级/三级原因删除按钮、添加一级/二级/三级原因按钮、选中态
      document.querySelectorAll('.delete-btn, .primary-delete-btn, .primary-drag-btn, .secondary-delete-btn, .tertiary-delete-btn, .add-primary-btn, .add-secondary-btn, .add-tertiary-btn, .node.selected').forEach(el => {
        if (el.classList.contains('selected')) {
          restore.push({ el, className: el.className });
          el.classList.remove('selected');
        } else {
          restore.push({ el, display: el.style.display });
          el.style.display = 'none';
        }
      });

      // 修复文本区域在截图中显示不全的问题：将所有输入文本（textarea 或 contenteditable）临时用 div 克隆覆盖
      const makeCloneForTextarea = (el, opts = {}) => {
        const cs = getComputedStyle(el);
        const clone = document.createElement('div');
        clone.className = 'capture-text-clone';
        const content = el.tagName === 'TEXTAREA' ? el.value : el.textContent;
        clone.textContent = (content ?? '').toString();
        clone.style.position = 'absolute';
        clone.style.whiteSpace = 'pre-wrap';
        clone.style.wordBreak = 'break-word';
        clone.style.lineHeight = cs.lineHeight;
        clone.style.fontSize = cs.fontSize;
        clone.style.fontFamily = cs.fontFamily;
        clone.style.fontWeight = cs.fontWeight;
        clone.style.letterSpacing = cs.letterSpacing;
        clone.style.textAlign = cs.textAlign;
        clone.style.color = cs.color;
        clone.style.background = 'transparent';
        clone.style.padding = cs.padding;
        clone.style.border = 'none';
        clone.style.pointerEvents = 'none';
        clone.style.zIndex = '5';
        if (opts.vertical) {
          clone.style.writingMode = 'vertical-rl';
          clone.style.textOrientation = 'upright';
          clone.style.lineHeight = '1';
        }
        if (opts.container) {
          // 相对于容器绝对定位
          const left = parseFloat(el.style.left || '0');
          const top = parseFloat(el.style.top || '0');
          const width = parseFloat(el.style.width || el.clientWidth || 0);
          const height = el.scrollHeight || el.clientHeight || 0;
          clone.style.left = left + 'px';
          clone.style.top = top + 'px';
          clone.style.width = width + 'px';
          clone.style.height = height + 'px';
          opts.container.appendChild(clone);
        } else if (opts.insideNode) {
          // 作为 .node 内部覆盖
          clone.style.left = '0px';
          clone.style.top = '0px';
          clone.style.width = '100%';
          clone.style.height = '100%';
          clone.style.display = 'flex';
          clone.style.alignItems = 'center';
          clone.style.justifyContent = 'center';
          opts.insideNode.appendChild(clone);
        }
        // 隐藏原 textarea，避免重叠且不影响布局
        restore.push({ el, visibility: el.style.visibility });
        el.style.visibility = 'hidden';
        clones.push(clone);
      };

      // 为 .node 内部的标题输入创建克隆（node-input，可能是 textarea 或 contenteditable div）
      document.querySelectorAll('.node .node-input').forEach(input => {
        const node = input.closest('.node');
        const vertical = node && node.classList.contains('vertical-text');
        makeCloneForTextarea(input, { insideNode: node, vertical });
      });
      // 为一级/二级/三级原因的 textarea 创建绝对定位克隆
      const canvas = document.getElementById('canvas');
      document.querySelectorAll('.primary-cause-text').forEach(el => makeCloneForTextarea(el, { container: canvas }));
      document.querySelectorAll('.secondary-cause-text').forEach(el => makeCloneForTextarea(el, { container: canvas }));
      document.querySelectorAll('.tertiary-cause-text').forEach(el => makeCloneForTextarea(el, { container: canvas }));

      // 先计算内容包围盒（在克隆覆盖和按钮隐藏之后），确保尺寸和导出一致
      const bounds = computeContentBounds();

      html2canvas(canvasEl, { backgroundColor: '#ffffff', scale: 2, useCORS: true }).then(cnv => {
        restore.forEach(r => {
          if (r.className) r.el.className = r.className;
          else r.el.style.display = r.display;
          if (r.visibility !== undefined) r.el.style.visibility = r.visibility;
        });
        // 移除克隆
        clones.forEach(cl => cl.remove());

        // 对渲染结果进行二次裁剪，只导出有内容的区域
        try {
          const scaleFactor = cnv.width / canvasEl.clientWidth;
          const sx = Math.max(0, Math.floor(bounds.x * scaleFactor));
          const sy = Math.max(0, Math.floor(bounds.y * scaleFactor));
          const sw = Math.min(cnv.width - sx, Math.ceil(bounds.width * scaleFactor));
          const sh = Math.min(cnv.height - sy, Math.ceil(bounds.height * scaleFactor));

          const crop = document.createElement('canvas');
          crop.width = sw;
          crop.height = sh;
          const ctx = crop.getContext('2d');
          ctx.drawImage(cnv, sx, sy, sw, sh, 0, 0, sw, sh);

          if (toClipboard) {
            crop.toBlob(blob => {
              const item = new ClipboardItem({ 'image/png': blob });
              navigator.clipboard.write([item]).then(() => showMessage('图片已复制到剪贴板！', 'success'))
                .catch(() => showMessage('复制失败，请使用导出功能', 'error'));
            });
          } else {
            const link = document.createElement('a');
            link.download = `因果图_${Date.now()}.png`;
            link.href = crop.toDataURL();
            link.click();
            showMessage('图片导出成功！', 'success');
          }
        } catch (e) {
          // 发生异常时回退到未裁剪图
          if (toClipboard) {
            cnv.toBlob(blob => {
              const item = new ClipboardItem({ 'image/png': blob });
              navigator.clipboard.write([item]).then(() => showMessage('图片已复制到剪贴板！', 'success'))
                .catch(() => showMessage('复制失败，请使用导出功能', 'error'));
            });
          } else {
            const link = document.createElement('a');
            link.download = `因果图_${Date.now()}.png`;
            link.href = cnv.toDataURL();
            link.click();
            showMessage('图片导出成功（未裁剪回退）', 'success');
          }
        }
      });
    }

    function getConfig() {
      const cfg = {
        nodeCounter,
        nodes: Object.keys(nodes).map(id => ({
          id,
          text: (() => {
            const el = nodes[id].querySelector('.node-input');
            if (!el) return '';
            if (el.tagName === 'TEXTAREA') return el.value;
            // contenteditable：去掉零宽与换行，保持单列纯文本
            return (el.textContent || '').replace(/[\u200B\r\n]/g, '');
          })(),
          left: nodes[id].style.left,
          top: nodes[id].style.top,
          width: nodes[id].style.width,
          height: nodes[id].style.height,
          extraClass: nodes[id].className
        })),
        model,
        nextSide,
        layout: {
          spineStartX: SPINE_START_X, // 兼容旧配置
          spineLength: SPINE_LENGTH,  // 新增：保存固定主干长度
          categoryVerticalOffset: CATEGORY_VERTICAL_OFFSET
        },
        timestamp: Date.now()
      };
      return cfg;
    }

    function applyConfig(cfg) {
      for (const id in nodes) nodes[id].remove();
      nodes = {};
      nodeCounter = cfg.nodeCounter || 0;
      model = cfg.model;
      nextSide = cfg.nextSide || 'top';
      // 恢复布局设置（如存在）
      if (cfg.layout) {
        if (typeof cfg.layout.categoryVerticalOffset === 'number') CATEGORY_VERTICAL_OFFSET = cfg.layout.categoryVerticalOffset;
        // 恢复垂直距后，先按公式更新角度
        FIXED_ARROW_ANGLE_DEG = computeArrowAngleDegFromYOffset(CATEGORY_VERTICAL_OFFSET);
        if (typeof cfg.layout.spineLength === 'number') {
          SPINE_LENGTH = Math.max(100, cfg.layout.spineLength);
        } else {
          // 兼容旧配置：没有长度时，尝试用当前 HEAD_X 与保存的 SPINE_START_X 估算
          if (typeof cfg.layout.spineStartX === 'number') {
            SPINE_LENGTH = Math.max(100, Math.abs(HEAD_X - cfg.layout.spineStartX));
          } else {
            SPINE_LENGTH = Math.max(100, SPINE_LENGTH || 780);
          }
        }
      }

      // 确保每个类别都有 primaryCauses 数组，且每个一级原因都有 subCauses 数组；每个二级也有 subCauses
      model.categories.forEach(cat => {
        if (!cat.primaryCauses) cat.primaryCauses = [];
        cat.primaryCauses.forEach(p => {
          if (!p.subCauses) p.subCauses = [];
          if (p.subCauses.length > 1) p.subCauses = [p.subCauses[0]]; // 兼容旧配置：只保留一个
          p.subCauses.forEach(s => {
            if (!s.subCauses) s.subCauses = [];
            if (s.subCauses.length > 1) s.subCauses = [s.subCauses[0]];
          });
        });
      });

      const canvas = document.getElementById('canvas');
      cfg.nodes.forEach(n => {
        const el = document.createElement('div');
        el.className = n.extraClass || 'node';
        el.id = n.id;
        el.style.left = n.left;
        el.style.top = n.top;
        el.style.width = n.width;
        el.style.height = n.height;

        const isVertical = (el.className || '').split(' ').includes('vertical-text');
        const input = isVertical ? document.createElement('div') : document.createElement('textarea');
        input.className = 'node-input';
        if (isVertical) {
          input.contentEditable = 'true';
          input.textContent = (n.text || '').replace(/[\u200B\r\n]/g, '') || '\u200B';
          input.addEventListener('beforeinput', (e) => {
            if (e.inputType === 'insertParagraph' || e.inputType === 'insertLineBreak') {
              e.preventDefault();
            }
          });
        } else {
          input.value = n.text;
          input.rows = 1;
        }

        input.addEventListener('input', () => {
          const isVerticalNode = el.classList.contains('vertical-text');
          if (isVerticalNode) {
            let txt = (input.textContent || '').replace(/[\u200B\r\n]/g, '');
            if (txt.length === 0) {
              input.textContent = '\u200B';
            } else if (input.textContent !== txt) {
              input.textContent = txt;
            }
            redrawLines();
          } else {
            autoSize(el);
            redrawLines();
          }
        });
        input.addEventListener('blur', () => {
          adjustLabelPositionByAnchor(n.id);
          relayout();
          deferredSave();
        });

        input.addEventListener('focus', () => {
          document.querySelectorAll('.node').forEach(node => node.classList.remove('selected'));
          el.classList.add('selected');
        });
        el.appendChild(input);

        const isResult = model.result && model.result.id === n.id;
        const isCategory = model.categories.some(c => c.labelId === n.id);

        if (!isResult) {
          const del = document.createElement('div');
          del.className = 'delete-btn';
          del.textContent = '−';
          del.onclick = (e) => {
            e.stopPropagation();
            deleteNode(n.id);
            removeFromModelByNodeId(n.id);
            relayout();
            saveHistory();
          };
          el.appendChild(del);
        }

        if (isCategory) {
          const addLeft = document.createElement('div');
          addLeft.className = 'add-primary-btn add-primary-left';
          addLeft.textContent = '+';
          addLeft.onclick = (e) => {
            e.stopPropagation();
            addPrimaryCause(n.id, 'left');
          };
          el.appendChild(addLeft);

          const addRight = document.createElement('div');
          addRight.className = 'add-primary-btn add-primary-right';
          addRight.textContent = '+';
          addRight.onclick = (e) => {
            e.stopPropagation();
            addPrimaryCause(n.id, 'right');
          };
          el.appendChild(addRight);
        }

        nodes[n.id] = el;
        canvas.appendChild(el);
      });

      relayout();
      // 更新滑动条显示
      if (typeof initSliders === 'function') initSliders();
    }

    function saveConfig() {
      const cfg = getConfig();
      const blob = new Blob([JSON.stringify(cfg, null, 2)], { type: 'application/json' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.download = `因果图配置_${Date.now()}.json`;
      link.href = url;
      link.click();
      URL.revokeObjectURL(url);
      showMessage('配置保存成功！', 'success');
    }

    function loadConfig() {
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = '.json';
      input.onchange = function (e) {
        const file = e.target.files[0];
        if (!file) return;
        const reader = new FileReader();
        reader.onload = function (event) {
          try {
            const cfg = JSON.parse(event.target.result);
            applyConfig(cfg);
            saveHistory(); // 手动入栈并持久化
            showMessage('配置加载成功！', 'success');
          } catch {
            showMessage('配置文件格式错误！', 'error');
          }
        };
        reader.readAsText(file);
      };
      input.click();
    }

    function saveHistory() {
      const cfgStr = JSON.stringify(getConfig());
      if (undoStack.length && undoStack[undoStack.length - 1] === cfgStr) return;
      undoStack.push(cfgStr);
      if (undoStack.length > MAX_HISTORY) undoStack.shift();
      redoStack = [];
      updateHistoryInfo();
      persistHistory();
    }

    function persistHistory() {
      try {
        localStorage.setItem(STORAGE_KEY, JSON.stringify({ undo: undoStack, redo: redoStack }));
      } catch { }
    }

    let saveTimer = null;
    function deferredSave() {
      if (saveTimer) clearTimeout(saveTimer);
      saveTimer = setTimeout(() => saveHistory(), 700);
    }

    function undo() {
      if (undoStack.length <= 1) { showMessage('没有可撤销的操作', 'error'); return; }
      const current = undoStack.pop();
      redoStack.push(current);
      const prev = JSON.parse(undoStack[undoStack.length - 1]);
      applyConfig(prev);
      updateHistoryInfo();
      persistHistory();
      showMessage('已撤销', 'success');
    }

    function redo() {
      if (redoStack.length === 0) { showMessage('没有可重做的操作', 'error'); return; }
      const next = redoStack.pop();
      undoStack.push(next);
      const cfg = JSON.parse(next);
      applyConfig(cfg);
      updateHistoryInfo();
      persistHistory();
      showMessage('已重做', 'success');
    }

    function updateHistoryInfo() {
      const info = document.getElementById('historyInfo');
      info.textContent = `可撤销: ${Math.max(0, undoStack.length - 1)} | 可重做: ${redoStack.length}`;
    }

    function showMessage(message, type = 'success') {
      const existing = document.querySelector('.message-toast');
      if (existing) existing.remove();
      const toast = document.createElement('div');
      toast.className = 'message-toast';
      toast.textContent = message;
      toast.style.background = type === 'success' ? '#28a745' : '#dc3545';
      document.body.appendChild(toast);
      setTimeout(() => {
        toast.style.animation = 'slideOut 0.3s ease-out';
        setTimeout(() => toast.remove(), 300);
      }, 2400);
    }

    document.addEventListener('keydown', function (e) {
      if (e.ctrlKey && e.key === 'z' && !e.shiftKey) { e.preventDefault(); undo(); }
      if ((e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'z') || (e.ctrlKey && e.key.toLowerCase() === 'y')) {
        e.preventDefault(); redo();
      }
    });

    window.addEventListener('resize', () => { relayout(); centerSoon(); });

    function resetAll() {
      for (const id in nodes) nodes[id].remove();
      nodes = {};
      nodeCounter = 0;
      undoStack = [];
      redoStack = [];
      model = { result: null, categories: [] };
      nextSide = 'top';
      createResult();
      // 重置后也恢复默认六类
      addDefaultSixCategories();
      saveHistory();
      relayout();
      showMessage('已重置', 'success');
    }

    // ========= 新增：二级原因 相关 =========
    function addSecondaryCause(categoryId, primaryId) {
      const cat = model.categories.find(c => c.id === categoryId);
      if (!cat) return;
      const primary = cat.primaryCauses.find(p => p.id === primaryId);
      if (!primary) return;
      if (!primary.subCauses) primary.subCauses = [];
      if (primary.subCauses.length >= 1) {
        showMessage('该一级原因已存在一个二级原因', 'error');
        return;
      }
      const sid = newId('secondary');
      primary.subCauses.push({ id: sid, text: '二级原因', subCauses: [] });
      relayout();
      saveHistory();
    }

    function deleteSecondaryCause(categoryId, primaryId, secondaryId) {
      const cat = model.categories.find(c => c.id === categoryId);
      if (!cat) return;
      const primary = cat.primaryCauses.find(p => p.id === primaryId);
      if (!primary) return;
      primary.subCauses = (primary.subCauses || []).filter(s => s.id !== secondaryId);
      relayout();
      saveHistory();
    }

    // （移除未使用的 computeSecondaryAnchors，保留精简代码）

    // ========= 新增：三级原因 相关 =========
    function addTertiaryCause(categoryId, primaryId, secondaryId) {
      const cat = model.categories.find(c => c.id === categoryId);
      if (!cat) return;
      const primary = cat.primaryCauses.find(p => p.id === primaryId);
      if (!primary) return;
      const sec = (primary.subCauses || []).find(s => s.id === secondaryId);
      if (!sec) return;
      if (!sec.subCauses) sec.subCauses = [];
      if (sec.subCauses.length >= 1) {
        showMessage('该二级原因已存在一个三级原因', 'error');
        return;
      }
      const tid = newId('tertiary');
      sec.subCauses.push({ id: tid, text: '三级原因' });
      relayout();
      saveHistory();
    }

    function deleteTertiaryCause(categoryId, primaryId, secondaryId, tertiaryId) {
      const cat = model.categories.find(c => c.id === categoryId);
      if (!cat) return;
      const primary = cat.primaryCauses.find(p => p.id === primaryId);
      if (!primary) return;
      const sec = (primary.subCauses || []).find(s => s.id === secondaryId);
      if (!sec) return;
      sec.subCauses = (sec.subCauses || []).filter(t => t.id !== tertiaryId);
      relayout();
      saveHistory();
    }

    function drawSecondaryCauses(categoryId, primary, lineStartX, lineStartY, lineEndX, lineEndY, side, isTop) {
      const subs = primary.subCauses || [];
      if (subs.length === 0) return;
      // 仅绘制一个二级原因，位于对应一级原因的正上方
      const sec = subs[0];
      const primaryTextEl = document.querySelector(`.primary-cause-text[data-primary-id="${primary.id}"]`);
      // 文本宽度与水平段长度严格一致，保证“位置、大小”与水平段匹配
      const textWidth = SECONDARY_HORIZ_LENGTH;
      const textArea = document.createElement('textarea');
      textArea.className = 'secondary-cause-text';
      textArea.value = sec.text;
      textArea.dataset.primaryId = primary.id;
      textArea.style.width = textWidth + 'px';
      textArea.style.maxWidth = textWidth + 'px';
      // 若属于右侧一级原因，则二级原因文本靠右对齐
      textArea.style.textAlign = (side === 'right') ? 'right' : 'left';
      textArea.rows = 1;
      // 先临时放置，之后根据固定水平段长度居中到 Sx
      textArea.style.left = '0px';
      document.getElementById('canvas').appendChild(textArea);
      // 若为末端（无三级）则加粗红色
      if (!sec.subCauses || sec.subCauses.length === 0) {
        textArea.classList.add('leaf-cause');
      }

      const autoResizeAndPlace = () => {
        textArea.style.height = 'auto';
        const h = textArea.scrollHeight;
        textArea.style.height = h + 'px';
        const baseTop = primaryTextEl ? primaryTextEl.offsetTop : (lineStartY - 26);
        textArea.style.top = (baseTop - h - SECONDARY_TEXT_GAP) + 'px';
      };
      autoResizeAndPlace();

      textArea.addEventListener('input', () => {
        sec.text = textArea.value;
        autoResizeAndPlace();
        // 不在输入时重绘全局，避免中断编辑；仅更新该 primary 的二级连线
        document.querySelectorAll(`line.sec-line[data-primary-id="${primary.id}"], line.sec-arrow[data-primary-id="${primary.id}"]`).forEach(el => el.remove());
        const Sy2 = parseFloat(textArea.style.top) + textArea.scrollHeight;
        const offsetE2 = (side === 'right') ? 15 : -15;
        let Ex2 = lineEndX + offsetE2;
        const Ey2 = lineStartY;
        const minX2 = Math.min(lineStartX, lineEndX) + 6;
        const maxX2 = Math.max(lineStartX, lineEndX) - 6;
        if (Ex2 < minX2) Ex2 = minX2;
        if (Ex2 > maxX2) Ex2 = maxX2;
        const thetaSec2 = (isTop ? SMALL_BRANCH_ANGLE_DEG : -SMALL_BRANCH_ANGLE_DEG) * Math.PI / 180;
        const deltaY2 = Ey2 - Sy2;
        const deltaX2 = deltaY2 / Math.tan(thetaSec2);
        const Bx2 = Ex2 - deltaX2;
        const By2 = Sy2;
        const Sx2 = (side === 'right') ? (Bx2 + SECONDARY_HORIZ_LENGTH) : (Bx2 - SECONDARY_HORIZ_LENGTH);
        // 同步文本与水平段端点
        if (side === 'right') {
          textArea.style.left = (Sx2 - textWidth) + 'px';
        } else {
          textArea.style.left = Sx2 + 'px';
        }
        const lH2 = drawLine(Sx2, Sy2, Bx2, By2, 1.2, '#000');
        lH2.classList.add('sec-line');
        lH2.dataset.primaryId = primary.id;
        const lS2 = drawLine(Bx2, By2, Ex2, Ey2, 1.5, '#000');
        lS2.classList.add('sec-line');
        lS2.dataset.primaryId = primary.id;
        const [aa1, aa2] = drawArrowAtEnd(Ex2, Ey2, Bx2, By2, 1.5, '#000');
        aa1.classList.add('sec-arrow'); aa2.classList.add('sec-arrow');
        aa1.dataset.primaryId = primary.id; aa2.dataset.primaryId = primary.id;

        // 同步删除按钮位置（参考一级：位于水平段起点 Sx2,Sy2）
        const delBtn = document.querySelector(`.secondary-delete-btn[data-primary-id="${primary.id}"]`);
        if (delBtn) {
          delBtn.style.left = (Sx2 - 8) + 'px';
          delBtn.style.top = (Sy2 - 8) + 'px';
        }

        // 同步添加三级按钮位置（与删除水平排列，避免重叠）
        const addBtnTer = document.querySelector(`.add-tertiary-btn[data-secondary-id="${sec.id}"]`);
        if (addBtnTer) {
          const btnGapSecondary = 22 * (side === 'right' ? 1 : -1);
          addBtnTer.style.left = (Sx2 - 8 + btnGapSecondary) + 'px';
          addBtnTer.style.top = (Sy2 - 8) + 'px';
        }

        // 同步三级原因（若存在）
        const terText = document.querySelector(`.tertiary-cause-text[data-secondary-id="${sec.id}"]`);
        if (terText) {
          // 根据新的二级几何，重置三级文本顶部
          terText.style.height = 'auto';
          const th = terText.scrollHeight;
          terText.style.height = th + 'px';
          const baseTopTer = parseFloat(textArea.style.top);
          terText.style.top = (baseTopTer - th - TERTIARY_TEXT_GAP) + 'px';
          // 重绘三级连线与按钮
          document.querySelectorAll(`line.ter-line[data-secondary-id="${sec.id}"]`).forEach(el => el.remove());
          document.querySelectorAll(`line.ter-arrow[data-secondary-id="${sec.id}"]`).forEach(el => el.remove());
          placeAndDrawTertiary(terText, sec.id, Sx2, Sy2, Bx2, side, isTop);
        }
      });
      textArea.addEventListener('blur', () => deferredSave());

      // 画折线：S(文本底部边缘) -> B(先水平) -> E(固定为一级原因箭头端左右偏移15且与类别线平行落于水平线)
      const Sy = parseFloat(textArea.style.top) + textArea.scrollHeight;
      // 优先固定 E：以一级原因箭头端(lineEndX,lineStartY)为基准，左右偏移15px，并限制在水平段内
      const offsetE = (side === 'right') ? 15 : -15;
      let Ex = lineEndX + offsetE;
      const Ey = lineStartY;
      const minX = Math.min(lineStartX, lineEndX) + 6;
      const maxX = Math.max(lineStartX, lineEndX) - 6;
      if (Ex < minX) Ex = minX;
      if (Ex > maxX) Ex = maxX;

      // 固定角度
      const thetaSec = (isTop ? SMALL_BRANCH_ANGLE_DEG : -SMALL_BRANCH_ANGLE_DEG) * Math.PI / 180;

      // 计算 B：使 B→E 保持固定角度
      const deltaY = Ey - Sy; // y 方向的距离
      const deltaX = deltaY / Math.tan(thetaSec); // 根据固定角度计算 x 方向距离

      const Bx = Ex - deltaX; // 从 E 反推 B 的 x 坐标
      const By = Sy;

      // 按照“水平段长度 = SECONDARY_HORIZ_LENGTH”确定 S 的水平位置
      // 与需求对齐：S 位于原因类别斜线的左/右侧，取决于一级原因在左/右侧
      // 右侧一级原因：S 在 B 的右侧；左侧一级原因：S 在 B 的左侧
      const Sx = (side === 'right') ? (Bx + SECONDARY_HORIZ_LENGTH) : (Bx - SECONDARY_HORIZ_LENGTH);

      // 将文本与水平段对齐：
      // - 右侧：S 为文本底边的右端点；- 左侧：S 为文本底边的左端点
      if (side === 'right') {
        textArea.style.left = (Sx - textWidth) + 'px';
      } else {
        textArea.style.left = Sx + 'px';
      }

      // 先画 S→B 的水平线，再画 B→E 的斜线；并打上标记，便于后续更新/删除
      const lH = drawLine(Sx, Sy, Bx, By, 1.2, '#000');
      lH.classList.add('sec-line');
      lH.dataset.primaryId = primary.id;
      const lS = drawLine(Bx, By, Ex, Ey, 1.5, '#000');
      lS.classList.add('sec-line');
      lS.dataset.primaryId = primary.id;
      const [a1, a2] = drawArrowAtEnd(Ex, Ey, Bx, By, 1.5, '#000');
      a1.classList.add('sec-arrow'); a2.classList.add('sec-arrow');
      a1.dataset.primaryId = primary.id; a2.dataset.primaryId = primary.id;

      // 删除按钮（参考一级：布置在水平段起点 Sx,Sy 处，常显）
      const del = document.createElement('div');
      del.className = 'secondary-delete-btn';
      del.textContent = '×';
      del.style.left = (Sx - 8) + 'px';
      del.style.top = (Sy - 8) + 'px';
      del.dataset.primaryId = primary.id;
      del.onclick = (e) => {
        e.stopPropagation();
        deleteSecondaryCause(categoryId, primary.id, sec.id);
      };
      document.getElementById('canvas').appendChild(del);

      // 添加“+”按钮用于新增三级原因（与删除按钮水平排列，避免重叠）
      const addTerBtn = document.createElement('div');
      addTerBtn.className = 'add-tertiary-btn';
      addTerBtn.textContent = '+';
      addTerBtn.dataset.secondaryId = sec.id;
      const btnGapSecondary = 22 * (side === 'right' ? 1 : -1);
      addTerBtn.style.left = (Sx - 8 + btnGapSecondary) + 'px';
      addTerBtn.style.top = (Sy - 8) + 'px';
      addTerBtn.onclick = (e) => {
        e.stopPropagation();
        addTertiaryCause(categoryId, primary.id, sec.id);
      };
      document.getElementById('canvas').appendChild(addTerBtn);

      // 绘制三级原因（如存在）
      drawTertiaryCauses(categoryId, primary, sec, { Sx, Sy, Bx, By, Ex, Ey }, side, isTop);
    }

    function drawTertiaryCauses(categoryId, primary, secondary, secGeom, side, isTop) {
      const ters = (secondary.subCauses || []);
      if (!ters.length) return;
      const ter = ters[0];
      const canvas = document.getElementById('canvas');

      const { Sx: Sx2, Sy: Sy2, Bx: Bx2 } = secGeom;

      // 创建三级文本
      const textWidth = TERTIARY_HORIZ_LENGTH;
      const textArea = document.createElement('textarea');
      textArea.className = 'tertiary-cause-text';
      textArea.value = ter.text;
      textArea.dataset.secondaryId = secondary.id;
      textArea.rows = 1;
      textArea.style.width = textWidth + 'px';
      textArea.style.maxWidth = textWidth + 'px';
      textArea.style.textAlign = (side === 'right') ? 'right' : 'left';
      textArea.style.left = '0px';
      canvas.appendChild(textArea);
      // 三级为末端，默认加粗红色
      textArea.classList.add('leaf-cause');

      const autoResizeAndPlaceTer = () => {
        textArea.style.height = 'auto';
        const h = textArea.scrollHeight;
        textArea.style.height = h + 'px';
        // 三级位于二级文本之上
        const secText = document.querySelector(`.secondary-cause-text[data-primary-id="${primary.id}"]`);
        const baseTop = secText ? parseFloat(secText.style.top) : (Sy2 - 26);
        textArea.style.top = (baseTop - h - TERTIARY_TEXT_GAP) + 'px';
      };
      autoResizeAndPlaceTer();

      textArea.addEventListener('input', () => {
        ter.text = textArea.value;
        autoResizeAndPlaceTer();
        // 重绘本三级的连线
        document.querySelectorAll(`line.ter-line[data-secondary-id="${secondary.id}"], line.ter-arrow[data-secondary-id="${secondary.id}"]`).forEach(el => el.remove());
        placeAndDrawTertiary(textArea, secondary.id, Sx2, Sy2, Bx2, side, isTop);
      });
      textArea.addEventListener('blur', () => deferredSave());

      // 删除按钮（参考一级：布置在三级水平段起点，稍后由绘制函数同步定位）
      const del = document.createElement('div');
      del.className = 'tertiary-delete-btn';
      del.textContent = '×';
      del.dataset.secondaryId = secondary.id;
      del.onclick = (e) => {
        e.stopPropagation();
        deleteTertiaryCause(categoryId, primary.id, secondary.id, ter.id);
      };
      canvas.appendChild(del);

      // 初次绘制连线（会同步定位删除按钮）
      placeAndDrawTertiary(textArea, secondary.id, Sx2, Sy2, Bx2, side, isTop);
    }

    function placeAndDrawTertiary(textArea, secondaryId, Sx2, Sy2, Bx2, side, isTop) {
      const textWidth = TERTIARY_HORIZ_LENGTH;
      // 三级：S3→B3（水平方向），B3→E3（固定角度，落到二级水平线 Sy2）
      const Sy3 = parseFloat(textArea.style.top) + textArea.scrollHeight;
      // 选择 E3：靠近 Bx2 一侧，避免靠近自由端
      const offsetNear = (side === 'right') ? -12 : 12;
      const minX = Math.min(Sx2, Bx2) + 6;
      const maxX = Math.max(Sx2, Bx2) - 6;
      let Ex3 = Bx2 + offsetNear;
      if (Ex3 < minX) Ex3 = minX;
      if (Ex3 > maxX) Ex3 = maxX;
      const Ey3 = Sy2;

      const theta = (isTop ? SMALL_BRANCH_ANGLE_DEG : -SMALL_BRANCH_ANGLE_DEG) * Math.PI / 180;
      const deltaY3 = Ey3 - Sy3;
      const deltaX3 = deltaY3 / Math.tan(theta);
      const Bx3 = Ex3 - deltaX3;
      const By3 = Sy3;
      const Sx3 = (side === 'right') ? (Bx3 + TERTIARY_HORIZ_LENGTH) : (Bx3 - TERTIARY_HORIZ_LENGTH);

      // 文本对齐到 Sx3
      if (side === 'right') {
        textArea.style.left = (Sx3 - textWidth) + 'px';
      } else {
        textArea.style.left = Sx3 + 'px';
      }

      // 画线
      document.querySelectorAll(`line.ter-line[data-secondary-id="${secondaryId}"]`).forEach(el => el.remove());
      document.querySelectorAll(`line.ter-arrow[data-secondary-id="${secondaryId}"]`).forEach(el => el.remove());
      const lH3 = drawLine(Sx3, Sy3, Bx3, By3, 1.1, '#000');
      lH3.classList.add('ter-line');
      lH3.dataset.secondaryId = secondaryId;
      const lS3 = drawLine(Bx3, By3, Ex3, Ey3, 1.4, '#000');
      lS3.classList.add('ter-line');
      lS3.dataset.secondaryId = secondaryId;
      const [ta1, ta2] = drawArrowAtEnd(Ex3, Ey3, Bx3, By3, 1.4, '#000');
      ta1.classList.add('ter-arrow'); ta2.classList.add('ter-arrow');
      ta1.dataset.secondaryId = secondaryId; ta2.dataset.secondaryId = secondaryId;

      // 同步“添加三级原因”按钮到 Sx2（二级的自由端），与删除水平排列
      const addBtn = document.querySelector(`.add-tertiary-btn[data-secondary-id="${secondaryId}"]`);
      if (addBtn) {
        const btnGapSecondary = 22 * (side === 'right' ? 1 : -1);
        addBtn.style.left = (Sx2 - 8 + btnGapSecondary) + 'px';
        addBtn.style.top = (Sy2 - 8) + 'px';
      }

      // 同步删除按钮位置（参考一级：位于三级水平段起点 Sx3,Sy3）
      const delBtn = document.querySelector(`.tertiary-delete-btn[data-secondary-id="${secondaryId}"]`);
      if (delBtn) {
        delBtn.style.left = (Sx3 - 8) + 'px';
        delBtn.style.top = (Sy3 - 8) + 'px';
      }
    }
  </script>
</body>

</html>