<!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>树图生成器</title>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' width='200' height='200'%3E%3Cdefs%3E%3ClinearGradient id='redGradient' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23FF4757;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23E84118;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='20' y='20' width='160' height='160' rx='35' fill='url(%23redGradient)'/%3E%3Cg transform='translate(100, 100)'%3E%3Cg%3E%3Ccircle cx='0' cy='0' r='40' fill='none' stroke='%23FFFFFF' stroke-width='18'/%3E%3Crect x='-7' y='-55' width='14' height='18' fill='%23FFFFFF' rx='3'/%3E%3Crect x='-7' y='37' width='14' height='18' fill='%23FFFFFF' rx='3'/%3E%3Cg transform='rotate(60)'%3E%3Crect x='-7' y='-55' width='14' height='18' fill='%23FFFFFF' rx='3'/%3E%3Crect x='-7' y='37' width='14' height='18' fill='%23FFFFFF' rx='3'/%3E%3C/g%3E%3Cg transform='rotate(120)'%3E%3Crect x='-7' y='-55' width='14' height='18' fill='%23FFFFFF' rx='3'/%3E%3Crect x='-7' y='37' width='14' height='18' fill='%23FFFFFF' rx='3'/%3E%3C/g%3E%3Cline x1='24' y1='24' x2='42' y2='42' stroke='%23FFFFFF' stroke-width='18' stroke-linecap='round'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M -18 -2 L -8 8 L 18 -18' fill='none' stroke='%23FFFFFF' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M 12 -22 A 28 28 0 0 0 -20 0' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='6' stroke-linecap='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E">    
<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        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: white;
            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, #a8e6cf 0%, #81d4af 50%, #6fd3a9 100%);
            color: #083b2f;
            padding: 16px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
        }
        .header h1 {
            font-size: 24px;
            line-height: 1.2;
        }
        .header p {
            font-size: 12px;
            opacity: 0.8;
        }
        .header-buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .header-btn {
            padding: 10px 16px;
            font-size: 14px;
            background: rgba(255, 255, 255, 0.28);
            color: #085c47;
            border: 1px solid rgba(8, 92, 71, 0.35);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.25s;
            backdrop-filter: blur(8px);
        }
        .header-btn:hover {
            background: rgba(255, 255, 255, 0.38);
            border-color: rgba(8, 92, 71, 0.6);
            color: #064538;
        }
        .header-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .width-controls {
            display: flex;
            gap: 8px;
            align-items: center;
            margin-left: 12px;
            padding-left: 12px;
            border-left: 1px solid rgba(8, 92, 71, 0.25);
        }
        .width-btn {
            padding: 8px 14px;
            font-size: 14px;
            background: rgba(255, 255, 255, 0.28);
            color: #085c47;
            border: 1px solid rgba(8, 92, 71, 0.35);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.25s;
            backdrop-filter: blur(8px);
        }
        .width-btn:hover {
            background: rgba(255, 255, 255, 0.38);
            border-color: rgba(8, 92, 71, 0.6);
            color: #064538;
        }
        .toolbar {
            padding: 12px 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;
        }
        .layout-selector {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .layout-btn {
            padding: 8px 16px;
            border: 2px solid #cdebdc;
            border-radius: 6px;
            background: white;
            cursor: pointer;
            transition: all 0.25s;
            font-size: 14px;
            color: #085c47;
        }
        .layout-btn:hover {
            border-color: #81d4af;
            background: #f2fbf7;
        }
        .layout-btn.active {
            border-color: #6fd3a9;
            background: #6fd3a9;
            color: white;
        }
        .history-info {
            font-size: 12px;
            color: #666;
            margin-left: 12px;
            padding-left: 12px;
            border-left: 1px solid #e0e0e0;
        }
        .toolbar-right {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .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;
        }
        .node {
position: absolute;
background: white;
border: 2px solid #000000;
border-radius: 6px;
padding: 4px 8px;
min-width: 80px;
max-width: 180px;
min-height: 30px;
display: flex;
align-items: center;
justify-content: center;
cursor: default;
user-select: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
transition: box-shadow 0.3s, left 0.3s ease-out, top 0.3s ease-out;
word-wrap: break-word;
word-break: break-all;
}
        .node:hover {
            box-shadow: 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;
            word-wrap: break-word;
            word-break: normal;
            white-space: nowrap;
            overflow-wrap: break-word;
            line-height: 1.4;
            resize: none;
            overflow: hidden;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
        }
        .node-controls {
            position: absolute;
            display: flex;
            gap: 6px;
        }
        .node-controls.tower {
            bottom: -32px;
            left: 50%;
            transform: translateX(-50%);
        }
        .node-controls.lateral {
            right: -32px;
            top: 50%;
            transform: translateY(-50%);
            flex-direction: column;
        }
        .control-btn {
            width: 28px;
            height: 28px;
            border: 1px solid #3b8a68;
            border-radius: 6px;
            background: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: bold;
            transition: all 0.2s;
            color: #2a6b52;
        }
        .control-btn:hover {
            background: #6fd3a9;
            color: white;
            border-color: #6fd3a9;
        }
        .delete-btn {
            position: absolute;
            top: -12px;
            right: -12px;
            width: 24px;
            height: 24px;
            border: 1px solid #dc3545;
            border-radius: 50%;
            background: #dc3545;
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: bold;
            opacity: 0;
            transition: opacity 0.2s;
        }
        .node:hover .delete-btn {
            opacity: 1;
        }
        .delete-btn:hover {
            background: #c82333;
            border-color: #c82333;
        }
        svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
        }
        .node {
            z-index: 1;
        }
        .message-toast {
            position: fixed;
            top: 16px;
            right: 16px;
            padding: 10px 16px;
            background: #28a745;
            color: white;
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 10000;
            font-size: 14px;
            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 12px;
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }
            .header h1 {
                font-size: 20px;
            }
            .header-buttons {
                width: 100%;
                gap: 8px;
            }
            .header-btn, .width-btn {
                padding: 8px 12px;
                font-size: 13px;
            }
            .toolbar {
                padding: 10px 12px;
                gap: 8px;
            }
            .layout-btn {
                padding: 8px 12px;
                font-size: 13px;
            }
            .history-info {
                font-size: 12px;
            }
            .toolbar-right {
                gap: 8px;
            }
            .canvas {
                padding: 24px;
            }
            .node {
                border-width: 2px;
                border-radius: 6px;
                min-width: 70px;
                max-width: 160px;
            }
            .control-btn {
                width: 26px;
                height: 26px;
                font-size: 16px;
            }
            .node-controls.tower {
                bottom: -28px;
            }
            .node-controls.lateral {
                right: -28px;
            }
            .message-toast {
                top: 12px;
                right: 12px;
                padding: 8px 12px;
                font-size: 13px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
       <div class="header">
            <div style="display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 10px; flex-wrap: wrap;">
                <div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
                    <button onclick="window.location.href='../index.html'" style="padding: 10px 16px; font-size: 14px; background: rgba(255, 255, 255, 0.28); color: #085c47; border: 1px solid rgba(8, 92, 71, 0.35); border-radius: 6px; cursor: pointer; transition: all 0.25s; backdrop-filter: blur(8px);" onmouseover="this.style.background='rgba(255, 255, 255, 0.38)'; this.style.borderColor='rgba(8, 92, 71, 0.6)'; this.style.color='#064538';" onmouseout="this.style.background='rgba(255, 255, 255, 0.28)'; this.style.borderColor='rgba(8, 92, 71, 0.35)'; this.style.color='#085c47';">← 返回</button>
                    <div>
                        <h1>🌳 树图生成器</h1>
                        <p>Generator by eminstan</p>
                    </div>
                </div>
                <div class="header-buttons">
                    <!-- 移除了撤销/重做按钮，保留其余按钮 -->
                    <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="clearAutoSave()">🗑️ 清除缓存</button>
                    <button class="header-btn" onclick="resetAll()">🔄 重置</button>
                    <div class="width-controls">
                        <button class="width-btn" onclick="adjustWidth('narrow')">◀ 缩窄</button>
                        <button class="width-btn" onclick="adjustWidth('widen')">加宽 ▶</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="toolbar">
            <label>布局方式：</label>
            <div class="layout-selector">
                <button class="layout-btn" onclick="changeLayout('tower')">🏛️ 宝塔型</button>
                <button class="layout-btn active" onclick="changeLayout('lateral')">➡️ 侧向型</button>
            </div>
            <div class="toolbar-right">
                <button class="header-btn" id="undoBtn" onclick="undo()">↶ 撤销</button>
                <button class="header-btn" id="redoBtn" onclick="redo()">↷ 重做</button>
                <div class="history-info" id="historyInfo">可撤销: 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 currentLayout = 'lateral';
        let nodeCounter = 0;
        let nodes = {};
        let rootNode = null;

        // 撤销重做系统
        let undoStack = [];
        let redoStack = [];
        const MAX_HISTORY = 50;
        let isApplyingHistory = false; // 标记是否正在应用历史状态

        // 节点尺寸配置
        let NODE_MIN_WIDTH = 40;
        let NODE_MAX_WIDTH = 180;
        const NODE_WIDTH = 80;
        const NODE_HEIGHT = 60;
        let HORIZONTAL_SPACING = 30;
        const VERTICAL_SPACING = 100;
        let LATERAL_HORIZONTAL_SPACING = 100;
        let LATERAL_VERTICAL_SPACING = 20;

        // 初始化
        window.onload = function() {
            // 优先尝试加载历史栈
            loadHistoryStacks();
            // 如果历史里已有状态，则应用最新状态；否则创建根节点并保存初始状态
            if (undoStack.length > 0) {
                const latest = JSON.parse(undoStack[undoStack.length - 1]);
                applyConfigWithoutSave(latest);
                updateHistoryButtons();
            } else {
                createRootNode();
                saveToUndoStack(); // 保存初始状态
            }

            // 加载自动保存（若无历史或历史只有根节点，也能恢复）
            loadAutoSave();
        };

        // 创建默认示例（如果没有自动保存数据）
        function createDefaultExample() {
            // 默认不创建示例，保持空白
        }

        // 创建根节点（主题）
        function createRootNode() {
            const canvas = document.getElementById('canvas');
            const node = createNode(null, '主题', true);
            canvas.appendChild(node);
            rootNode = node;
            relayoutAllNodes();
        };

        // 创建节点
        function createNode(parentId, text = '', isRoot = false, customId = null) {
            if (!customId) {
                nodeCounter++;
                customId = 'node' + nodeCounter;
            }
            const nodeId = customId;
            
            const node = document.createElement('div');
            node.className = 'node';
            node.id = nodeId;
            node.dataset.parent = parentId || '';
            node.dataset.children = '';

            const input = document.createElement('textarea');
            input.className = 'node-input';
            input.value = text;
            input.placeholder = isRoot ? '输入主题' : '输入内容';
            input.rows = 1;
            let inputTimer = null;
            input.addEventListener('input', function() {
                adjustNodeSize(node);
                // 防抖：输入停止后1秒保存
                clearTimeout(inputTimer);
                inputTimer = setTimeout(() => {
                    if (!isApplyingHistory) {
                        saveToUndoStack();
                        autoSaveData();
                    }
                }, 1000);
            });
            input.addEventListener('click', function(e) {
                e.stopPropagation();
            });
            node.appendChild(input);

            // 添加控制按钮
            if (!isRoot) {
                const deleteBtn = document.createElement('div');
                deleteBtn.className = 'delete-btn';
                deleteBtn.innerHTML = '−';
                deleteBtn.onclick = function(e) {
                    e.stopPropagation();
                    deleteNode(nodeId);
                };
                node.appendChild(deleteBtn);
            }

            const controls = document.createElement('div');
            controls.className = 'node-controls ' + currentLayout;
            
            const addBtn = document.createElement('div');
            addBtn.className = 'control-btn';
            addBtn.innerHTML = '+';
            addBtn.onclick = function(e) {
                e.stopPropagation();
                addChildNode(nodeId);
            };
            
            controls.appendChild(addBtn);
            node.appendChild(controls);

            nodes[nodeId] = node;
            
            // 初始化节点大小
            adjustNodeSize(node);

            return node;
        }

        // 自动调整节点大小
        function adjustNodeSize(node) {
            const input = node.querySelector('.node-input');
            const text = input.value || input.placeholder;
            
            // 计算文本长度（汉字算1个字符）
            const textLength = text.length;
            
            // 创建临时元素测量文本宽度
            const temp = document.createElement('div');
            temp.style.cssText = 'position: absolute; visibility: hidden; white-space: nowrap; font-size: 14px; font-family: "Microsoft YaHei", Arial, sans-serif; padding: 0 5px;';
            temp.textContent = text;
            document.body.appendChild(temp);
            
            let width = temp.offsetWidth + 12;
            
            // 根据文本长度决定是否换行（10个字符换行）
            const maxWidthFor10Chars = 180;
            if (width > maxWidthFor10Chars) {
                width = maxWidthFor10Chars;
                input.style.whiteSpace = 'pre-wrap';
                input.style.wordBreak = 'break-all';
            } else {
                width = Math.max(NODE_MIN_WIDTH, Math.min(maxWidthFor10Chars, width));
                input.style.whiteSpace = 'nowrap';
                input.style.wordBreak = 'normal';
            }
            
            document.body.removeChild(temp);
            
            // 设置宽度
            node.style.width = width + 'px';
            
            // 重置textarea高度以获取正确的scrollHeight
            input.style.height = 'auto';
            
            // 获取实际内容高度（加上padding 4px）
            const contentHeight = input.scrollHeight + 4;
            
            // 设置高度，最小25px
            const newHeight = Math.max(25, contentHeight);
            node.style.height = newHeight + 'px';
            input.style.height = (newHeight - 4) + 'px';
            
            // 触发重新布局与连线更新，确保侧向模式下线条同步
            relayoutAllNodes();
            updateLines(); // 关键修复：输入导致尺寸变化时立即刷新引出线
        }

        // ========== 撤销重做功能（持久化） ==========
        function getCurrentConfig() {
            const config = {
                layout: currentLayout,
                nodeCounter: nodeCounter,
                nodes: {},
                widthConfig: {
                    NODE_MIN_WIDTH: NODE_MIN_WIDTH,
                    NODE_MAX_WIDTH: NODE_MAX_WIDTH,
                    HORIZONTAL_SPACING: HORIZONTAL_SPACING,
                    LATERAL_HORIZONTAL_SPACING: LATERAL_HORIZONTAL_SPACING,
                    LATERAL_VERTICAL_SPACING: LATERAL_VERTICAL_SPACING
                }
            };

            Object.keys(nodes).forEach(nodeId => {
                const node = nodes[nodeId];
                config.nodes[nodeId] = {
                    id: nodeId,
                    text: node.querySelector('.node-input').value,
                    parent: node.dataset.parent,
                    children: node.dataset.children,
                    isRoot: node === rootNode,
                    width: node.style.width,
                    height: node.style.height
                };
            });

            return config;
        }

        function saveToUndoStack() {
            if (isApplyingHistory) return;

            const config = getCurrentConfig();
            const configStr = JSON.stringify(config);
            
            // 如果和上一个状态相同，不保存
            if (undoStack.length > 0 && undoStack[undoStack.length - 1] === configStr) {
                return;
            }
            
            undoStack.push(configStr);
            
            // 限制历史记录数量
            if (undoStack.length > MAX_HISTORY) {
                undoStack.shift();
            }
            
            // 清空重做栈
            redoStack = [];
            
            // 持久化到 localStorage
            persistHistoryStacks();

            updateHistoryButtons();
        }

        function undo() {
            if (undoStack.length <= 1) {
                showMessage('没有可撤销的操作', 'error');
                return;
            }
            
            // 将当前状态移到重做栈
            const currentState = undoStack.pop();
            redoStack.push(currentState);
            
            // 应用上一个状态
            const previousState = undoStack[undoStack.length - 1];
            const config = JSON.parse(previousState);
            applyConfigWithoutSave(config);
            
            // 持久化到 localStorage
            persistHistoryStacks();

            updateHistoryButtons();
            showMessage('已撤销', 'success');
        }

        function redo() {
            if (redoStack.length === 0) {
                showMessage('没有可重做的操作', 'error');
                return;
            }
            
            // 从重做栈取出状态
            const nextState = redoStack.pop();
            undoStack.push(nextState);
            
            // 应用状态
            const config = JSON.parse(nextState);
            applyConfigWithoutSave(config);
            
            // 持久化到 localStorage
            persistHistoryStacks();

            updateHistoryButtons();
            showMessage('已重做', 'success');
        }

        function applyConfigWithoutSave(config) {
            isApplyingHistory = true;

            // 清空现有节点
            Object.values(nodes).forEach(node => node.remove());
            nodes = {};
            rootNode = null;

            // 恢复节点计数器
            nodeCounter = config.nodeCounter || 0;

            // 恢复宽度配置
            if (config.widthConfig) {
                NODE_MIN_WIDTH = config.widthConfig.NODE_MIN_WIDTH;
                NODE_MAX_WIDTH = config.widthConfig.NODE_MAX_WIDTH;
                HORIZONTAL_SPACING = config.widthConfig.HORIZONTAL_SPACING;
                LATERAL_HORIZONTAL_SPACING = config.widthConfig.LATERAL_HORIZONTAL_SPACING;
                LATERAL_VERTICAL_SPACING = config.widthConfig.LATERAL_VERTICAL_SPACING;
            }

            // 设置布局
            currentLayout = config.layout || 'lateral';
            document.querySelectorAll('.layout-btn').forEach(btn => btn.classList.remove('active'));
            const activeBtn = document.querySelector(`.layout-btn[onclick="changeLayout('${currentLayout}')"]`);
            if (activeBtn) activeBtn.classList.add('active');

            const canvas = document.getElementById('canvas');

            // 重建节点
            Object.keys(config.nodes).forEach(nodeId => {
                const nodeData = config.nodes[nodeId];
                const node = createNode(nodeData.parent, nodeData.text, nodeData.isRoot, nodeId);
                node.dataset.parent = nodeData.parent;
                node.dataset.children = nodeData.children;
                if (nodeData.width) node.style.width = nodeData.width;
                if (nodeData.height) node.style.height = nodeData.height;
                canvas.appendChild(node);
                nodes[nodeId] = node;
                if (nodeData.isRoot) {
                    rootNode = node;
                }
            });

            // 更新控制按钮样式
            Object.values(nodes).forEach(node => {
                const controls = node.querySelector('.node-controls');
                if (controls) {
                    controls.className = 'node-controls ' + currentLayout;
                }
            });

            relayoutAllNodes();

            isApplyingHistory = false;
        }

        function updateHistoryButtons() {
            const undoBtn = document.getElementById('undoBtn');
            const redoBtn = document.getElementById('redoBtn');
            const historyInfo = document.getElementById('historyInfo');
            
            // 更新按钮状态
            if (undoStack.length <= 1) {
                undoBtn.disabled = true;
            } else {
                undoBtn.disabled = false;
            }
            
            if (redoStack.length === 0) {
                redoBtn.disabled = true;
            } else {
                redoBtn.disabled = false;
            }
            
            // 更新历史信息
            historyInfo.textContent = `可撤销: ${Math.max(0, undoStack.length - 1)} | 可重做: ${redoStack.length}`;
        }

        // 持久化历史栈
        function persistHistoryStacks() {
            try {
                localStorage.setItem('treeMapHistoryUndo', JSON.stringify(undoStack));
                localStorage.setItem('treeMapHistoryRedo', JSON.stringify(redoStack));
            } catch (e) {
                console.error('历史栈持久化失败:', e);
            }
        }

        // 加载历史栈
        function loadHistoryStacks() {
            try {
                const undoSaved = localStorage.getItem('treeMapHistoryUndo');
                const redoSaved = localStorage.getItem('treeMapHistoryRedo');
                if (undoSaved) {
                    const parsedUndo = JSON.parse(undoSaved);
                    if (Array.isArray(parsedUndo) && parsedUndo.length > 0) {
                        undoStack = parsedUndo.slice(-MAX_HISTORY); // 保证最多50
                    }
                }
                if (redoSaved) {
                    const parsedRedo = JSON.parse(redoSaved);
                    if (Array.isArray(parsedRedo)) {
                        redoStack = parsedRedo.slice(-MAX_HISTORY);
                    }
                }
            } catch (e) {
                console.error('加载历史栈失败:', e);
            }
        }

        // ========== 自动保存功能 ==========
        let autoSaveTimer = null;

        // 启动自动保存
        function startAutoSave() {
            // 清除已有的定时器
            if (autoSaveTimer) {
                clearInterval(autoSaveTimer);
            }
            // 每10秒保存一次
            autoSaveTimer = setInterval(() => {
                autoSaveData();
            }, 10000);
        }

        // 自动保存数据到 localStorage
        function autoSaveData() {
            try {
                const config = getCurrentConfig();
                config.timestamp = new Date().getTime();
                localStorage.setItem('treeMapAutoSave', JSON.stringify(config));
                console.log('自动保存成功:', new Date().toLocaleTimeString());
            } catch (error) {
                console.error('自动保存失败:', error);
            }
        }

        // 加载自动保存的数据
        function loadAutoSave() {
            try {
                const savedData = localStorage.getItem('treeMapAutoSave');
                if (!undoStack.length) {
                    if (savedData) {
                        const config = JSON.parse(savedData);
                        // 如果有保存的数据且不只是根节点
                        if (config.nodes && Object.keys(config.nodes).length > 1) {
                            applyConfig(config);
                            const saveTime = new Date(config.timestamp).toLocaleString();
                            showMessage(`已加载上次编辑内容 (${saveTime})`, 'success');
                        }
                    }
                }
                // 启动自动保存定时器
                startAutoSave();
            } catch (error) {
                console.error('加载自动保存数据失败:', error);
                startAutoSave();
            }
        }

        // 清除自动保存数据
        function clearAutoSave() {
            if (confirm('确定要清除自动保存的数据吗？')) {
                localStorage.removeItem('treeMapAutoSave');
                showMessage('自动保存数据已清除', 'success');
            }
        }

        // 添加子节点
        function addChildNode(parentId) {
            const parent = nodes[parentId];
            if (!parent) return;

            const canvas = document.getElementById('canvas');
            const child = createNode(parentId, '');
            
            // 更新父节点的子节点列表
            let children = parent.dataset.children ? parent.dataset.children.split(',').filter(c => c) : [];
            children.push(child.id);
            parent.dataset.children = children.join(',');

            canvas.appendChild(child);
            
            // 重新布局整棵树
            relayoutAllNodes();
            
            // 保存到撤销栈
            saveToUndoStack();
            // 触发自动保存
            autoSaveData();
        }

        // 删除节点
        function deleteNode(nodeId) {
            const node = nodes[nodeId];
            if (!node) return;

            // 递归删除所有子节点
            const children = node.dataset.children ? node.dataset.children.split(',').filter(c => c) : [];
            children.forEach(childId => deleteNode(childId));

            // 从父节点的子节点列表中移除
            const parentId = node.dataset.parent;
            if (parentId && nodes[parentId]) {
                const parent = nodes[parentId];
                let siblings = parent.dataset.children.split(',').filter(c => c);
                siblings = siblings.filter(id => id !== nodeId);
                parent.dataset.children = siblings.join(',');
            }

            // 删除节点
            node.remove();
            delete nodes[nodeId];
            
            // 重新布局整棵树
            relayoutAllNodes();
            
            // 保存到撤销栈
            saveToUndoStack();
            // 触发自动保存
            autoSaveData();
        }

        // 计算子树的宽度（宝塔型）
        function calculateSubtreeWidth(nodeId) {
            const node = nodes[nodeId];
            if (!node) return NODE_WIDTH;

            const children = node.dataset.children ? node.dataset.children.split(',').filter(c => c) : [];
            
            if (children.length === 0) {
                return parseFloat(node.style.width) || NODE_MIN_WIDTH;
            }

            let totalWidth = 0;
            children.forEach(childId => {
                totalWidth += calculateSubtreeWidth(childId);
            });
            
            totalWidth += (children.length - 1) * HORIZONTAL_SPACING;
            
            return Math.max(totalWidth, parseFloat(node.style.width) || NODE_MIN_WIDTH);
        }

        // 计算子树的高度（侧向型）
        function calculateSubtreeHeight(nodeId) {
            const node = nodes[nodeId];
            if (!node) return NODE_HEIGHT;

            const children = node.dataset.children ? node.dataset.children.split(',').filter(c => c) : [];
            
            if (children.length === 0) {
                return parseFloat(node.style.height) || NODE_HEIGHT;
            }

            let totalHeight = 0;
            children.forEach(childId => {
                totalHeight += calculateSubtreeHeight(childId);
            });
            
            totalHeight += (children.length - 1) * LATERAL_VERTICAL_SPACING;
            
            return Math.max(totalHeight, parseFloat(node.style.height) || NODE_HEIGHT);
        }

        // 宝塔型布局
        function layoutTower(nodeId, centerX, y) {
            const node = nodes[nodeId];
            if (!node) return;

            const nodeWidth = parseFloat(node.style.width) || NODE_WIDTH;
            const nodeHeight = parseFloat(node.style.height) || NODE_HEIGHT;
            const nodeX = centerX - nodeWidth / 2;
            node.style.left = nodeX + 'px';
            node.style.top = y + 'px';

            const children = node.dataset.children ? node.dataset.children.split(',').filter(c => c) : [];
            
            if (children.length === 0) return;

            const childWidths = children.map(childId => calculateSubtreeWidth(childId));
            const totalChildWidth = childWidths.reduce((sum, w) => sum + w, 0) + 
                                   (children.length - 1) * HORIZONTAL_SPACING;

            let childCenterX = centerX - totalChildWidth / 2;
            const childY = y + nodeHeight + VERTICAL_SPACING;

            children.forEach((childId, index) => {
                const childWidth = childWidths[index];
                layoutTower(childId, childCenterX + childWidth / 2, childY);
                childCenterX += childWidth + HORIZONTAL_SPACING;
            });
        }

        // 侧向型布局
        function layoutLateral(nodeId, x, centerY, level = 0) {
            const node = nodes[nodeId];
            if (!node) return;

            node.dataset.level = level;

            const nodeWidth = parseFloat(node.style.width) || NODE_MIN_WIDTH;
            const nodeHeight = parseFloat(node.style.height) || NODE_HEIGHT;
            const nodeY = centerY - nodeHeight / 2;
            node.style.left = x + 'px';
            node.style.top = nodeY + 'px';

            const children = node.dataset.children ? node.dataset.children.split(',').filter(c => c) : [];
            
            if (children.length === 0) return;

            const childHeights = children.map(childId => calculateSubtreeHeight(childId));
            const totalChildHeight = childHeights.reduce((sum, h) => sum + h, 0) + 
                                    (children.length - 1) * LATERAL_VERTICAL_SPACING;

            let childCenterY = centerY - totalChildHeight / 2;

            // 关键修复：使用父节点实际宽度作为基准，避免固定列导致重叠
            const parentRight = x + nodeWidth;
            const childXBase = parentRight + LATERAL_HORIZONTAL_SPACING;

            children.forEach((childId, index) => {
                const childHeight = childHeights[index];
                layoutLateral(childId, childXBase, childCenterY + childHeight / 2, level + 1);
                childCenterY += childHeight + LATERAL_VERTICAL_SPACING;
            });
        }

        // 重新布局所有节点
        function relayoutAllNodes() {
            if (!rootNode) return;

            if (currentLayout === 'tower') {
                const treeWidth = calculateSubtreeWidth(rootNode.id);
                const startCenterX = Math.max(treeWidth / 2, 300);
                const startY = 80;
                layoutTower(rootNode.id, startCenterX, startY);
            } else {
                // 侧向型起始位置以根节点宽度动态计算，减少线条重叠
                const treeHeight = calculateSubtreeHeight(rootNode.id);
                const startX = 100;
                const rootWidth = parseFloat(rootNode.style.width) || NODE_MIN_WIDTH;
                const startCenterY = Math.max(treeHeight / 2, 200);
                layoutLateral(rootNode.id, startX, startCenterY, 0);
            }

            updateLines();
        }

        // 更新连线
        function updateLines() {
            const svg = document.getElementById('linesSvg');
            svg.innerHTML = '';

            const canvas = document.getElementById('canvas');

            // 计算所需的画布大小
            let maxX = 0, maxY = 0;
            Object.values(nodes).forEach(node => {
                const left = parseFloat(node.style.left) || 0;
                const top = parseFloat(node.style.top) || 0;
                const width = parseFloat(node.style.width) || NODE_WIDTH;
                const height = parseFloat(node.style.height) || NODE_HEIGHT;
                maxX = Math.max(maxX, left + width + 200);
                maxY = Math.max(maxY, top + height + 200);
            });

            canvas.style.width = Math.max(maxX, window.innerWidth - 40) + 'px';
            canvas.style.height = Math.max(maxY, window.innerHeight - 200) + 'px';

            // 绘制连线
            Object.values(nodes).forEach(node => {
                const children = node.dataset.children ? node.dataset.children.split(',').filter(c => c) : [];
                children.forEach(childId => {
                    const child = nodes[childId];
                    if (child) {
                        drawLine(node, child);
                    }
                });
            });
        }

        // 绘制直角折线
        function drawLine(parent, child) {
            const svg = document.getElementById('linesSvg');
            
            const parentLeft = parseFloat(parent.style.left);
            const parentTop = parseFloat(parent.style.top);
            const childLeft = parseFloat(child.style.left);
            const childTop = parseFloat(child.style.top);

            let x1, y1, x2, y2;

            if (currentLayout === 'tower') {
                const parentWidth = parseFloat(parent.style.width) || NODE_WIDTH;
                const parentHeight = parseFloat(parent.style.height) || NODE_HEIGHT;
                const childWidth = parseFloat(child.style.width) || NODE_WIDTH;
                
                x1 = parentLeft + parentWidth / 2;
                y1 = parentTop + parentHeight;
                x2 = childLeft + childWidth / 2;
                y2 = childTop;

                const midY = (y1 + y2) / 2;

                const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                path.setAttribute('d', `M ${x1} ${y1} L ${x1} ${midY} L ${x2} ${midY} L ${x2} ${y2}`);
                path.setAttribute('stroke', 'black');
                path.setAttribute('stroke-width', '2');
                path.setAttribute('fill', 'none');
                svg.appendChild(path);
            } else {
                const parentWidth = parseFloat(parent.style.width) || NODE_MIN_WIDTH;
                const parentHeight = parseFloat(parent.style.height) || NODE_HEIGHT;
                const childWidth = parseFloat(child.style.width) || NODE_MIN_WIDTH;
                const childHeight = parseFloat(child.style.height) || NODE_HEIGHT;
                
                // 关键修复：基于当前节点真实宽高计算端点，避免输入导致的尺寸变化未同步
                x1 = parentLeft + parentWidth;
                y1 = parentTop + parentHeight / 2;
                x2 = childLeft;
                y2 = childTop + childHeight / 2;

                // 关键修复：中线使用动态中点，减少与相邻连线重叠概率
                const midX = x1 + (LATERAL_HORIZONTAL_SPACING / 2);

                const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                path.setAttribute('d', `M ${x1} ${y1} L ${midX} ${y1} L ${midX} ${y2} L ${x2} ${y2}`);
                path.setAttribute('stroke', 'black');
                path.setAttribute('stroke-width', '2');
                path.setAttribute('fill', 'none');
                svg.appendChild(path);
            }
        }

        // 切换布局
        function changeLayout(layout) {
            currentLayout = layout;
            document.querySelectorAll('.layout-btn').forEach(btn => btn.classList.remove('active'));
            document.querySelectorAll('.layout-btn').forEach(btn => {
                if (btn.onclick.toString().includes(`'${layout}'`)) {
                    btn.classList.add('active');
                }
            });

            // 更新所有控制按钮的位置
            Object.values(nodes).forEach(node => {
                const controls = node.querySelector('.node-controls');
                if (controls) {
                    controls.className = 'node-controls ' + layout;
                }
            });

            // 重新布局所有节点
            relayoutAllNodes();

            // 保存到撤销栈
            saveToUndoStack();
        }

        // 复制图片到剪贴板
        function copyImage() {
            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 = function() {
                    performCopy();
                };
                document.head.appendChild(script);
            } else {
                performCopy();
            }
        }

        function performCopy() {
            const canvas = document.getElementById('canvas');
            
            // 计算实际内容区域
            let minX = Infinity, minY = Infinity, maxX = 0, maxY = 0;
            Object.values(nodes).forEach(node => {
                const left = parseFloat(node.style.left) || 0;
                const top = parseFloat(node.style.top) || 0;
                const width = parseFloat(node.style.width) || NODE_WIDTH;
                const height = parseFloat(node.style.height) || NODE_HEIGHT;
                minX = Math.min(minX, left);
                minY = Math.min(minY, top);
                maxX = Math.max(maxX, left + width);
                maxY = Math.max(maxY, top + height);
            });
            
            // 添加边距
            const padding = 30;
            minX -= padding;
            minY -= padding;
            maxX += padding;
            maxY += padding;
            
            // 隐藏所有控制按钮
            document.querySelectorAll('.node-controls, .delete-btn').forEach(el => {
                el.style.display = 'none';
            });

            // 将所有textarea转换为div
            const textareaBackups = [];
            document.querySelectorAll('.node-input').forEach(textarea => {
                const div = document.createElement('div');
                div.className = 'node-input';
                div.textContent = textarea.value;
                div.style.cssText = window.getComputedStyle(textarea).cssText;
                div.style.whiteSpace = 'pre-wrap';
                div.style.wordBreak = 'break-all';
                div.style.overflowY = 'hidden';
                div.style.border = 'none';
                div.style.outline = 'none';
                div.style.resize = 'none';
                
                textareaBackups.push({
                    textarea: textarea,
                    parent: textarea.parentNode
                });
                
                textarea.parentNode.replaceChild(div, textarea);
            });

            html2canvas(canvas, {
                backgroundColor: '#ffffff',
                scale: 2,
                x: minX,
                y: minY,
                width: maxX - minX,
                height: maxY - minY
            }).then(canvas => {
                // 恢复textarea
                document.querySelectorAll('.node-input').forEach((div, index) => {
                    if (textareaBackups[index]) {
                        textareaBackups[index].parent.replaceChild(textareaBackups[index].textarea, div);
                    }
                });
                
                // 恢复控制按钮显示
                document.querySelectorAll('.node-controls, .delete-btn').forEach(el => {
                    el.style.display = '';
                });
                
                canvas.toBlob(blob => {
                    const item = new ClipboardItem({ 'image/png': blob });
                    navigator.clipboard.write([item]).then(() => {
                        showMessage('图片已复制到剪贴板！', 'success');
                    }).catch(err => {
                        showMessage('复制失败，请使用导出功能', 'error');
                    });
                });
            });
        }

        // 导出为PNG
        function exportImage() {
            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 = function() {
                    performExport();
                };
                document.head.appendChild(script);
            } else {
                performExport();
            }
        }

        function performExport() {
            const canvas = document.getElementById('canvas');
            
            // 计算实际内容区域
            let minX = Infinity, minY = Infinity, maxX = 0, maxY = 0;
            Object.values(nodes).forEach(node => {
                const left = parseFloat(node.style.left) || 0;
                const top = parseFloat(node.style.top) || 0;
                const width = parseFloat(node.style.width) || NODE_WIDTH;
                const height = parseFloat(node.style.height) || NODE_HEIGHT;
                minX = Math.min(minX, left);
                minY = Math.min(minY, top);
                maxX = Math.max(maxX, left + width);
                maxY = Math.max(maxY, top + height);
            });
            
            // 添加边距
            const padding = 30;
            minX -= padding;
            minY -= padding;
            maxX += padding;
            maxY += padding;
            
            // 隐藏所有控制按钮
            document.querySelectorAll('.node-controls, .delete-btn').forEach(el => {
                el.style.display = 'none';
            });

            // 将所有textarea转换为div
            const textareaBackups = [];
            document.querySelectorAll('.node-input').forEach(textarea => {
                const div = document.createElement('div');
                div.className = 'node-input';
                div.textContent = textarea.value;
                div.style.cssText = window.getComputedStyle(textarea).cssText;
                div.style.whiteSpace = 'pre-wrap';
                div.style.wordBreak = 'break-all';
                div.style.overflowY = 'hidden';
                div.style.border = 'none';
                div.style.outline = 'none';
                div.style.resize = 'none';
                
                textareaBackups.push({
                    textarea: textarea,
                    parent: textarea.parentNode
                });
                
                textarea.parentNode.replaceChild(div, textarea);
            });

            html2canvas(canvas, {
                backgroundColor: '#ffffff',
                scale: 2,
                x: minX,
                y: minY,
                width: maxX - minX,
                height: maxY - minY
            }).then(canvas => {
                // 恢复textarea
                document.querySelectorAll('.node-input').forEach((div, index) => {
                    if (textareaBackups[index]) {
                        textareaBackups[index].parent.replaceChild(textareaBackups[index].textarea, div);
                    }
                });
                
                // 恢复控制按钮显示
                document.querySelectorAll('.node-controls, .delete-btn').forEach(el => {
                    el.style.display = '';
                });
                
                const link = document.createElement('a');
                link.download = `树图_${new Date().getTime()}.png`;
                link.href = canvas.toDataURL();
                link.click();
                showMessage('图片导出成功！', 'success');
            });
        }

        // 保存树图
        function saveConfig() {
            const config = getCurrentConfig();
            config.timestamp = new Date().getTime();

            const blob = new Blob([JSON.stringify(config, null, 2)], { type: 'application/json' });
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.download = `树图配置_${new Date().getTime()}.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 config = JSON.parse(event.target.result);
                        applyConfig(config);
                        showMessage('配置加载成功！', 'success');
                    } catch (error) {
                        showMessage('配置文件格式错误！', 'error');
                    }
                };
                reader.readAsText(file);
            };
            input.click();
        }

        // 应用配置（并重置历史为该状态）
        function applyConfig(config) {
            // 清空现有节点
            Object.values(nodes).forEach(node => node.remove());
            nodes = {};
            rootNode = null;

            // 恢复节点计数器
            nodeCounter = config.nodeCounter || 0;

            // 恢复宽度配置
            if (config.widthConfig) {
                NODE_MIN_WIDTH = config.widthConfig.NODE_MIN_WIDTH;
                NODE_MAX_WIDTH = config.widthConfig.NODE_MAX_WIDTH;
                HORIZONTAL_SPACING = config.widthConfig.HORIZONTAL_SPACING;
                LATERAL_HORIZONTAL_SPACING = config.widthConfig.LATERAL_HORIZONTAL_SPACING;
                LATERAL_VERTICAL_SPACING = config.widthConfig.LATERAL_VERTICAL_SPACING;
            }

            // 设置布局
            currentLayout = config.layout || 'lateral';
            document.querySelectorAll('.layout-btn').forEach(btn => btn.classList.remove('active'));
            const activeBtn = document.querySelector(`.layout-btn[onclick="changeLayout('${currentLayout}')"]`);
            if (activeBtn) activeBtn.classList.add('active');

            const canvas = document.getElementById('canvas');

            // 重建节点
            Object.keys(config.nodes).forEach(nodeId => {
                const nodeData = config.nodes[nodeId];
                const node = createNode(nodeData.parent, nodeData.text, nodeData.isRoot, nodeId);
                node.dataset.parent = nodeData.parent;
                node.dataset.children = nodeData.children;
                if (nodeData.width) node.style.width = nodeData.width;
                if (nodeData.height) node.style.height = nodeData.height;
                canvas.appendChild(node);
                nodes[nodeId] = node;
                if (nodeData.isRoot) {
                    rootNode = node;
                }
            });

            // 更新控制按钮样式
            Object.values(nodes).forEach(node => {
                const controls = node.querySelector('.node-controls');
                if (controls) {
                    controls.className = 'node-controls ' + currentLayout;
                }
            });

            relayoutAllNodes();

            // 清空历史记录并保存当前状态
            undoStack = [];
            redoStack = [];
            saveToUndoStack();
        }

        // 重置
        function resetAll() {
            if (confirm('确定要重置吗？所有内容将被清空，包括自动保存的数据。')) {
                Object.values(nodes).forEach(node => node.remove());
                nodes = {};
                nodeCounter = 0;
                rootNode = null;
                currentLayout = 'lateral';
                document.querySelectorAll('.layout-btn').forEach(btn => btn.classList.remove('active'));
                document.querySelectorAll('.layout-btn').forEach(btn => {
                    if (btn.onclick.toString().includes("'lateral'")) {
                        btn.classList.add('active');
                    }
                });
                // 清除自动保存数据
                localStorage.removeItem('treeMapAutoSave');
                
                // 清空历史记录并持久化
                undoStack = [];
                redoStack = [];
                persistHistoryStacks();
                
                createRootNode();
                saveToUndoStack();
                showMessage('已重置', 'success');
            }
        }

        // 显示消息
        function showMessage(message, type) {
            const existingMsg = document.querySelector('.message-toast');
            if (existingMsg) {
                existingMsg.remove();
            }
            const toast = document.createElement('div');
            toast.className = 'message-toast';
            toast.textContent = message;
            const colors = {
                success: '#28a745',
                error: '#dc3545'
            };
            toast.style.background = colors[type] || colors.success;
            document.body.appendChild(toast);
            setTimeout(() => {
                toast.style.animation = 'slideOut 0.3s ease-out';
                setTimeout(() => toast.remove(), 300);
            }, 3000);
        }

        // 调整整体宽度
        function adjustWidth(action) {
            if (action === 'widen') {
                NODE_MIN_WIDTH += 20;
                NODE_MAX_WIDTH += 40;
                HORIZONTAL_SPACING += 10;
                LATERAL_HORIZONTAL_SPACING += 20;
                LATERAL_VERTICAL_SPACING += 5;
                showMessage('已加宽图形', 'success');
            } else if (action === 'narrow') {
                if (NODE_MIN_WIDTH > 30) {
                    NODE_MIN_WIDTH -= 20;
                    NODE_MAX_WIDTH -= 40;
                    HORIZONTAL_SPACING = Math.max(10, HORIZONTAL_SPACING - 10);
                    LATERAL_HORIZONTAL_SPACING = Math.max(50, LATERAL_HORIZONTAL_SPACING - 20);
                    LATERAL_VERTICAL_SPACING = Math.max(10, LATERAL_VERTICAL_SPACING - 5);
                    showMessage('已缩窄图形', 'success');
                } else {
                    showMessage('已达到最小宽度', 'error');
                    return;
                }
            }
            
            // 重新调整所有节点大小
            Object.values(nodes).forEach(node => {
                node.style.width = '';
                adjustNodeSize(node);
            });
            
            // 重新布局
            relayoutAllNodes();

            // 保存到撤销栈
            saveToUndoStack();
        }

        // 键盘快捷键
        document.addEventListener('keydown', function(e) {
            // Ctrl+Z 撤销
            if (e.ctrlKey && e.key === 'z' && !e.shiftKey) {
                e.preventDefault();
                undo();
            }
            // Ctrl+Shift+Z 或 Ctrl+Y 重做
            if ((e.ctrlKey && e.shiftKey && e.key === 'Z') || (e.ctrlKey && e.key === 'y')) {
                e.preventDefault();
                redo();
            }
        });

        // 窗口大小改变时更新连线
        window.addEventListener('resize', function() {
            updateLines();
        });
    </script>
</body>
</html>