<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <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:%23004098;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23004098;stop-opacity:0.85' /%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">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { height: 100%; }
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: #f5f5f5;
            padding: 10px;
        }
        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
            overflow: hidden;
        }
        .header {
            background: linear-gradient(135deg, rgba(0,64,152,1) 0%, rgba(0,64,152,0.85) 100%);
            color: white;
            padding: 14px 16px;
            text-align: center;
        }
        .header h1 {
            font-size: 20px;
            margin-bottom: 4px;
        }
        .main-content {
            display: flex;
            min-height: 560px;
        }
        .sidebar {
            width: 420px;
            border-right: 1px solid #e0e0e0;
            padding: 16px;
            overflow-y: auto;
            max-height: calc(100vh - 160px);
            transition: max-height 0.3s ease, height 0.3s ease;
        }
        .sidebar-toggle {
            display: none;
            width: 100%;
            border: none;
            background: #004098;
            color: #fff;
            padding: 10px 12px;
            font-size: 16px;
            border-radius: 6px;
            margin-bottom: 10px;
        }
        .sidebar::-webkit-scrollbar { width: 8px; }
        .sidebar::-webkit-scrollbar-track { background: #f1f1f1; }
        .sidebar::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }
        .sidebar::-webkit-scrollbar-thumb:hover { background: #555; }
        .chart-area {
            flex: 1;
            padding: 12px;
            display: flex;
            flex-direction: row;
            position: relative;
            gap: 0;
        }
        .chart-container {
            position: relative;
            flex: 1;
            min-height: 640px;
            background: #fff;
        }
        #radarChart {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
        }
        #circleCanvas {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;
        }
        .section {
            margin-bottom: 18px;
            padding-bottom: 14px;
            border-bottom: 1px solid #f0f0f0;
        }
        .section:last-child { border-bottom: none; }
        .section-title {
            font-size: 15px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
        .section-title::before {
            content: '';
            width: 4px; height: 16px;
            background: #004098;
            margin-right: 8px;
            border-radius: 2px;
        }
        .form-group { margin-bottom: 12px; }
        label { display: block; font-size: 13px; color: #666; margin-bottom: 5px; }
        input[type="text"],
        input[type="number"],
        input[type="color"],
        select,
        textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            transition: border-color 0.2s;
        }
        textarea { resize: vertical; min-height: 120px; font-family: 'Consolas', monospace; font-size: 13px; }
        input[type="color"] { height: 40px; cursor: pointer; padding: 0; }
        input[type="text"]:focus,
        input[type="number"]:focus,
        select:focus,
        textarea:focus {
            outline: none;
            border-color: #004098;
            box-shadow: 0 0 0 3px rgba(0,64,152,0.12);
        }
        .btn {
            padding: 10px 14px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
            margin-right: 8px;
            margin-bottom: 8px;
        }
        .btn-primary { background: #004098; color: white; }
        .btn-primary:hover { background: #00357f; }
        .btn-secondary { background: #6c757d; color: white; }
        .btn-secondary:hover { background: #5a6268; }
        .btn-success { background: #28a745; color: white; }
        .btn-success:hover { background: #218838; }
        .btn-danger { background: #dc3545; color: white; }
        .btn-danger:hover { background: #c82333; }
        .btn-warning { background: #ffc107; color: #333; }
        .btn-warning:hover { background: #e0a800; }
        .btn-sm { padding: 6px 10px; font-size: 12px; }
        .dimension-item { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; }
        .dimension-item input { flex: 1; }
        .dataset-item {
            background: #f8f9fa;
            padding: 12px;
            border-radius: 6px;
            margin-bottom: 12px;
            border: 1px solid #e0e0e0;
        }
        .dataset-header { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
        .dataset-name-row { display: flex; align-items: center; gap: 10px; }
        .dataset-name-row input[type="text"] { flex: 1; }
        .dataset-controls-row {
            display: grid;
            grid-template-columns: 1fr 1fr auto;
            gap: 10px;
            align-items: center;
        }
        .color-picker-wrapper { display: flex; flex-direction: column; }
        .color-picker-wrapper label { font-size: 12px; margin-bottom: 3px; }
        .dataset-name { font-weight: bold; color: #333; }
        .data-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .data-input-group { display: flex; flex-direction: column; }
        .data-input-group label { font-size: 12px; margin-bottom: 3px; }
        .data-input-group input { padding: 8px 10px; }
        .toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
        .theme-selector { display: flex; gap: 10px; flex-wrap: wrap; }
        .theme-btn {
            padding: 8px 16px;
            border: 2px solid #ddd;
            border-radius: 6px;
            background: white;
            cursor: pointer;
            transition: all 0.2s;
        }
        .theme-btn.active { border-color: #004098; background: #004098; color: white; }
        .history-info { font-size: 12px; color: #999; margin-top: 5px; }
        .draggable-module {
            position: absolute;
            background: transparent;
            border: none;
            border-radius: 0;
            padding: 0;
            box-shadow: none;
            cursor: move;
            z-index: 1000;
            min-width: 180px;
            touch-action: none;
        }
        .draggable-module.dragging { opacity: 0.9; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        .legend-section {
            display: flex;
            flex-direction: column;
            gap: 12px;
            background: rgba(255, 255, 255, 0.95);
            padding: 12px;
            border-radius: 6px;
        }
        .custom-legend-item { display: flex; align-items: center; gap: 10px; }
        .custom-legend-item svg { display: block; flex-shrink: 0; }
        .custom-legend-item span { font-size: 13px; color: #333; line-height: 1.4; }
        .region-info {
            display: flex;
            flex-direction: column;
            gap: 8px;
            background: rgba(255, 255, 255, 0.95);
            padding: 12px;
            border-radius: 6px;
        }
        .region-info-item { font-size: 13px; color: #333; line-height: 1.6; }
        .position-controls {
            display: flex;
            gap: 5px;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #e0e0e0;
        }
        .position-controls button {
            flex: 1;
            padding: 6px 8px;
            font-size: 12px;
            border: 1px solid #ddd;
            background: white;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .position-controls button:hover { background: #004098; color: white; border-color: #004098; }
        @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: 1200px) {
            .main-content { flex-direction: column; }
            .sidebar { width: 100%; border-right: none; border-bottom: 1px solid #e0e0e0; max-height: none; }
            .chart-container { min-height: 560px; }
            .chart-area { flex-direction: column; }
        }
        @media (max-width: 768px) {
            body { padding: 6px; }
            .header { padding: 12px; }
            .header h1 { font-size: 18px; }
            .container { border-radius: 10px; }
            .sidebar-toggle { display: block; }
            .sidebar.collapsed { max-height: 0; height: 0; padding-top: 0; padding-bottom: 0; border: none; overflow: hidden; }
            .dataset-controls-row { grid-template-columns: 1fr; }
            .data-inputs { grid-template-columns: 1fr; }
            .btn { padding: 10px 12px; font-size: 14px; }
            .position-controls button { font-size: 12px; padding: 6px 8px; }
            .chart-container { min-height: 420px; }
            #legendModule, #regionModule { min-width: 160px; }
        }
        @media (max-width: 420px) {
            .header h1 { font-size: 16px; }
            .btn { font-size: 13px; padding: 9px 10px; }
            input[type="text"], input[type="number"], select, textarea { font-size: 13px; }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div style="display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;">
                <div style="display: flex; align-items: center; gap: 10px; flex: 1 1 auto;">
                    <button onclick="window.location.href='../index.html'"
                            style="padding: 8px 12px; font-size: 14px; background: rgba(255,255,255,0.25); color: white; border: 1px solid rgba(255,255,255,0.4); border-radius: 6px; cursor: pointer; transition: all 0.2s; 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 style="font-size: 12px; opacity: 0.9;">by eminstan</p>
                    </div>
                </div>
                <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                    <button onclick="undo()" style="padding: 8px 12px; font-size: 14px; background: rgba(255,255,255,0.25); color: white; border: 1px solid rgba(255,255,255,0.4); border-radius: 6px; cursor: pointer; transition: all 0.2s; 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>
                    <button onclick="redo()" style="padding: 8px 12px; font-size: 14px; background: rgba(255,255,255,0.25); color: white; border: 1px solid rgba(255,255,255,0.4); border-radius: 6px; cursor: pointer; transition: all 0.2s; 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>
                    <button onclick="saveConfig()" style="padding: 8px 12px; font-size: 14px; background: rgba(255,255,255,0.25); color: white; border: 1px solid rgba(255,255,255,0.4); border-radius: 6px; cursor: pointer; transition: all 0.2s; 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>
                    <button onclick="loadConfig()" style="padding: 8px 12px; font-size: 14px; background: rgba(255,255,255,0.25); color: white; border: 1px solid rgba(255,255,255,0.4); border-radius: 6px; cursor: pointer; transition: all 0.2s; 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>
                    <button onclick="resetAll()" style="padding: 8px 12px; font-size: 14px; background: rgba(255,255,255,0.25); color: white; border: 1px solid rgba(255,255,255,0.4); border-radius: 6px; cursor: pointer; transition: all 0.2s; 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>
                    <button onclick="copyImage()" style="padding: 8px 12px; font-size: 14px; background: rgba(255,255,255,0.25); color: white; border: 1px solid rgba(255,255,255,0.4); border-radius: 6px; cursor: pointer; transition: all 0.2s; backdrop-filter: blur(8px);"
                        onmouseover="this.style.background='rgba(255,255,255,0.35)'" onmouseout="this.style.background='rgba(255,255,255,0.25)'">📋 复制PNG</button>
                    <button onclick="exportImage()" style="padding: 8px 12px; font-size: 14px; background: rgba(255,255,255,0.25); color: white; border: 1px solid rgba(255,255,255,0.4); border-radius: 6px; cursor: pointer; transition: all 0.2s; backdrop-filter: blur(8px);"
                        onmouseover="this.style.background='rgba(255,255,255,0.35)'" onmouseout="this.style.background='rgba(255,255,255,0.25)'">📥 导出PNG</button>
                </div>
            </div>
        </div>

        <div class="main-content">
            <button class="sidebar-toggle" onclick="toggleSidebar()">📁 显示/隐藏配置面板</button>
            <div class="sidebar" id="sidebar">
                <div class="section">
                    <div class="section-title">基础配置</div>
                    <div class="form-group">
                        <label>维度数量 (3-10个)</label>
                        <input type="number" id="dimensionCount" value="5" min="3" max="10">
                    </div>
                </div>

                <div class="section">
                    <div class="section-title">维度设置</div>
                    <div id="dimensionList"></div>
                </div>

                <div class="section">
                    <div class="section-title">数据导入</div>
                    <div class="form-group">
                        <label>粘贴数据（支持从Excel或Word表格复制）</label>
                        <textarea id="dataImport" placeholder="请粘贴带制表符的数据，格式如：
评价内容    活动前（分）    活动后（分）
质量意识    7.2    9.0
改进意识    6.8    8.8
办公软件能力    5.6    8.8"></textarea>
                    </div>
                    <button class="btn btn-primary" onclick="importData()">📊 导入数据</button>
                    <button class="btn btn-secondary" onclick="clearImport()">🗑 清空</button>
                </div>

                <div class="section">
                    <div class="section-title">数据集管理</div>
                    <button class="btn btn-success" onclick="addDataset()">➕ 添加数据集</button>
                    <div id="datasetList"></div>
                </div>

                <div class="section">
                    <div class="section-title">主题样式</div>
                    <div class="theme-selector">
                        <button class="theme-btn active" onclick="changeTheme('default')">默认</button>
                        <button class="theme-btn" onclick="changeTheme('dark')">暗黑</button>
                        <button class="theme-btn" onclick="changeTheme('colorful')">多彩</button>
                        <button class="theme-btn" onclick="changeTheme('business')">商务</button>
                    </div>
                </div>

                <div class="section">
                    <div class="section-title">图例位置管理</div>
                    <button class="btn btn-primary" onclick="toggleModule('legend')">📊 显示/隐藏数据组图例</button>
                    <button class="btn btn-primary" onclick="toggleModule('region')">📍 显示/隐藏ABC区说明</button>
                    <button class="btn btn-warning" onclick="resetModulePositions()">🔄 重置图例位置</button>
                </div>

                <div class="section">
                    <div class="section-title">操作</div>
                    <div class="toolbar">
                        <button class="btn btn-primary" onclick="updateChart()">🔄 更新图表</button>
                    </div>
                    <div class="history-info" id="historyInfo">历史记录: 0/50</div>
                </div>
            </div>

            <div class="chart-area">
                <div class="chart-container">
                    <div id="radarChart"></div>
                    <canvas id="circleCanvas"></canvas>
                    
                    <div id="legendModule" class="draggable-module" style="left: 20px; top: 20px;">
                        <div class="legend-section" id="customLegend"></div>
                        <div class="position-controls">
                            <button onclick="saveModulePosition('legend')">💾 保存位置(可拖拽)</button>
                        </div>
                    </div>
                    
                    <div id="regionModule" class="draggable-module" style="left: 20px; top: 250px;">
                        <div class="region-info">
                            <div class="region-info-item">A区：理想水平</div>
                            <div class="region-info-item">B区：平均水平</div>
                            <div class="region-info-item">C区：不理想水平</div>
                        </div>
                        <div class="position-controls">
                            <button onclick="saveModulePosition('region')">💾 保存位置(可拖拽)</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let chart = null;
        let canvas = null;
        let ctx = null;
        let currentTheme = 'default';
        const MAX_HISTORY = 50;
        let history = [];
        let historyIndex = -1;
        let isApplyingHistory = false;

        let datasetCounter = 0;
        let autoSaveTimer = null;

        let modulePositions = {
            legend: { x: 20, y: 20, visible: true },
            region: { x: 20, y: 250, visible: true }
        };

        let draggedElement = null;
        let dragOffset = { x: 0, y: 0 };

        const lineStyles = [
            { type: 'solid', color: '#000', width: 2, name: '实线' },
            { type: 'dashed', color: '#666', width: 2, name: '虚线' },
            { type: 'dotted', color: '#999', width: 2, name: '点线' },
            { type: [5, 5], color: '#333', width: 2, name: '长虚线' },
            { type: [2, 2], color: '#555', width: 2, name: '短虚线' },
            { type: [10, 5, 2, 5], color: '#444', width: 2, name: '点划线' }
        ];

        const themes = {
            default: {
                backgroundColor: '#fff',
                textColor: '#333',
                lineColors: ['#e74c3c', '#3498db', '#2ecc71', '#f39c12', '#9b59b6', '#1abc9c'],
                circleColor: '#000'
            },
            dark: {
                backgroundColor: '#1a1a1a',
                textColor: '#fff',
                lineColors: ['#4dabf7', '#ff6b6b', '#51cf66', '#ffd43b', '#ff8787', '#748ffc'],
                circleColor: '#fff'
            },
            colorful: {
                backgroundColor: '#fff',
                textColor: '#333',
                lineColors: ['#e74c3c', '#3498db', '#2ecc71', '#f39c12', '#9b59b6', '#1abc9c'],
                circleColor: '#000'
            },
            business: {
                backgroundColor: '#f8f9fa',
                textColor: '#2c3e50',
                lineColors: ['#2c3e50', '#34495e', '#7f8c8d', '#95a5a6', '#bdc3c7', '#5d6d7e'],
                circleColor: '#2c3e50'
            }
        };

        const defaultDatasetNames = ['活动前', '活动后'];
        const DEFAULT_MAX_VALUE = 10;

        window.onload = function() {
            initializeApp();
        };

        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            sidebar.classList.toggle('collapsed');
        }

        function initializeApp() {
            chart = echarts.init(document.getElementById('radarChart'));
            canvas = document.getElementById('circleCanvas');
            ctx = canvas.getContext('2d');

            resizeCanvas();
            initDraggable();
            loadModulePositions();
            bindEventListeners();

            // 优先尝试恢复历史（如果成功，则不进行默认初始化，不push初始状态）
            const restored = restoreHistoryFromLocal();
            if (!restored) {
                // 尝试恢复自动保存（只在没有历史时）
                const autoSaved = restoreAutoSave(true); // 仅当没有历史时恢复; 传参表示返回布尔
                if (!autoSaved) {
                    // 完全无历史与自动保存，初始化默认数据
                    initializeDimensions();
                    addDataset();
                    addDataset();
                    updateChart();
                    pushHistoryState();
                } else {
                    // 已应用自动保存配置但不入栈，这里补一次入栈，保持首帧
                    pushHistoryState();
                }
            }

            // 快捷键
            document.addEventListener('keydown', e => {
                const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
                const ctrl = isMac ? e.metaKey : e.ctrlKey;
                if (ctrl && e.key.toLowerCase() === 'z') {
                    e.preventDefault();
                    if (e.shiftKey) redo(); else undo();
                } else if (ctrl && e.key.toLowerCase() === 'y') {
                    e.preventDefault();
                    redo();
                }
            });
        }

        function bindEventListeners() {
            document.getElementById('dimensionCount').addEventListener('change', () => {
                handleDimensionCountChange.call(document.getElementById('dimensionCount'));
                pushHistoryState();
            });

            window.addEventListener('resize', handleWindowResize);
            window.addEventListener('beforeunload', autoSave);

            addTouchDragSupport();

            if (autoSaveTimer) clearInterval(autoSaveTimer);
            autoSaveTimer = setInterval(autoSave, 30000);
        }

        function addTouchDragSupport() {
            const modules = document.querySelectorAll('.draggable-module');

            modules.forEach(module => {
                module.addEventListener('touchstart', function(e) {
                    if (e.target.tagName === 'BUTTON') return;
                    const touch = e.touches[0];
                    draggedElement = module;
                    const rect = module.getBoundingClientRect();

                    dragOffset.x = touch.clientX - rect.left;
                    dragOffset.y = touch.clientY - rect.top;

                    module.classList.add('dragging');
                    e.preventDefault();
                }, { passive: false });
            });

            document.addEventListener('touchmove', function(e) {
                if (!draggedElement) return;
                const touch = e.touches[0];
                const containerRect = draggedElement.parentElement.getBoundingClientRect();

                let x = touch.clientX - containerRect.left - dragOffset.x;
                let y = touch.clientY - containerRect.top - dragOffset.y;

                x = Math.max(0, Math.min(x, containerRect.width - draggedElement.offsetWidth));
                y = Math.max(0, Math.min(y, containerRect.height - draggedElement.offsetHeight));

                draggedElement.style.left = x + 'px';
                draggedElement.style.top = y + 'px';
                e.preventDefault();
            }, { passive: false });

            document.addEventListener('touchend', function() {
                if (draggedElement) {
                    draggedElement.classList.remove('dragging');
                    const moduleId = draggedElement.id === 'legendModule' ? 'legend' : 'region';
                    const x = parseInt(draggedElement.style.left);
                    const y = parseInt(draggedElement.style.top);
                    modulePositions[moduleId].x = x;
                    modulePositions[moduleId].y = y;
                    localStorage.setItem('radarModulePositions', JSON.stringify(modulePositions));
                    draggedElement = null;
                    pushHistoryState();
                }
            });
        }

        function handleDimensionCountChange() {
            const count = parseInt(this.value);
            if (count >= 3 && count <= 10) {
                initializeDimensions();
                updateDatasetInputs(count);
                validateAndUpdate();
            }
        }

        function handleWindowResize() {
            resizeCanvas();
            if (chart) {
                chart.resize();
                drawCircles();
            }
        }

        function updateDatasetInputs(count) {
            const datasetElements = document.querySelectorAll('.dataset-item');
            datasetElements.forEach(element => {
                const id = element.id.replace('dataset', '');
                const dataInputsDiv = element.querySelector('.data-inputs');
                
                let dataInputsHTML = '';
                for (let i = 0; i < count; i++) {
                    const dimName = document.getElementById(`dim${i}`)?.value || `维度${i + 1}`;
                    dataInputsHTML += `
                        <div class="data-input-group">
                            <label>${dimName}</label>
                            <input type="number" class="dataset-value" data-dataset="${id}" data-index="${i}" value="${Math.floor(Math.random() * 5) + 3}" min="0" max="${DEFAULT_MAX_VALUE}" onchange="onFormChange(this)">
                        </div>
                    `;
                }
                dataInputsDiv.innerHTML = dataInputsHTML;
            });
        }

        function initDraggable() {
            const modules = document.querySelectorAll('.draggable-module');
            
            modules.forEach(module => {
                module.addEventListener('mousedown', function(e) {
                    if (e.target.tagName === 'BUTTON') return;
                    draggedElement = module;
                    const rect = module.getBoundingClientRect();
                    dragOffset.x = e.clientX - rect.left;
                    dragOffset.y = e.clientY - rect.top;
                    module.classList.add('dragging');
                    e.preventDefault();
                    e.stopPropagation();
                });
            });

            document.addEventListener('mousemove', handleMouseMove);
            document.addEventListener('mouseup', handleMouseUp);
        }

        function handleMouseMove(e) {
            if (draggedElement) {
                const containerRect = draggedElement.parentElement.getBoundingClientRect();
                let x = e.clientX - containerRect.left - dragOffset.x;
                let y = e.clientY - containerRect.top - dragOffset.y;
                x = Math.max(0, Math.min(x, containerRect.width - draggedElement.offsetWidth));
                y = Math.max(0, Math.min(y, containerRect.height - draggedElement.offsetHeight));
                draggedElement.style.left = x + 'px';
                draggedElement.style.top = y + 'px';
                e.preventDefault();
            }
        }

        function handleMouseUp() {
            if (draggedElement) {
                draggedElement.classList.remove('dragging');
                const moduleId = draggedElement.id === 'legendModule' ? 'legend' : 'region';
                const x = parseInt(draggedElement.style.left);
                const y = parseInt(draggedElement.style.top);
                modulePositions[moduleId].x = x;
                modulePositions[moduleId].y = y;
                localStorage.setItem('radarModulePositions', JSON.stringify(modulePositions));
                draggedElement = null;
                pushHistoryState();
            }
        }

        function saveModulePosition(moduleId) {
            const module = document.getElementById(moduleId + 'Module');
            const x = parseInt(module.style.left);
            const y = parseInt(module.style.top);
            modulePositions[moduleId].x = x;
            modulePositions[moduleId].y = y;
            localStorage.setItem('radarModulePositions', JSON.stringify(modulePositions));
            showMessage(`${moduleId === 'legend' ? '数据组图例' : 'ABC区说明'}位置已保存`, 'success');
            pushHistoryState();
        }

        function loadModulePositions() {
            const saved = localStorage.getItem('radarModulePositions');
            if (saved) {
                try {
                    modulePositions = JSON.parse(saved);
                } catch (e) {}
            }
            applyModulePositions();
        }

        function applyModulePositions() {
            const legendModule = document.getElementById('legendModule');
            const regionModule = document.getElementById('regionModule');
            legendModule.style.left = modulePositions.legend.x + 'px';
            legendModule.style.top = modulePositions.legend.y + 'px';
            legendModule.style.display = modulePositions.legend.visible ? 'block' : 'none';
            regionModule.style.left = modulePositions.region.x + 'px';
            regionModule.style.top = modulePositions.region.y + 'px';
            regionModule.style.display = modulePositions.region.visible ? 'block' : 'none';
        }

        function toggleModule(moduleId) {
            const module = document.getElementById(moduleId + 'Module');
            modulePositions[moduleId].visible = !modulePositions[moduleId].visible;
            module.style.display = modulePositions[moduleId].visible ? 'block' : 'none';
            localStorage.setItem('radarModulePositions', JSON.stringify(modulePositions));
            pushHistoryState();
        }

        function resetModulePositions() {
            modulePositions = {
                legend: { x: 20, y: 20, visible: true },
                region: { x: 20, y: 250, visible: true }
            };
            applyModulePositions();
            localStorage.setItem('radarModulePositions', JSON.stringify(modulePositions));
            showMessage('图例位置已重置', 'success');
            pushHistoryState();
        }

        function resizeCanvas() {
            const container = canvas ? canvas.parentElement : null;
            if (!container) return;
            const dpr = window.devicePixelRatio || 1;
            canvas.width = container.offsetWidth * dpr;
            canvas.height = container.offsetHeight * dpr;
            canvas.style.width = container.offsetWidth + 'px';
            canvas.style.height = container.offsetHeight + 'px';
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.scale(dpr, dpr);
        }

        function drawCircles() {
    const container = canvas.parentElement;
    const width = container.offsetWidth;
    const height = container.offsetHeight;
    const centerX = width / 2;
    const centerY = height * 0.52;
    const maxValue = DEFAULT_MAX_VALUE;
    const baseRadius = Math.min(width, height) * 0.45;
    ctx.clearRect(0, 0, width, height);
    const theme = themes[currentTheme];
    const radii = [1, 2, 3, 4, 5].map(v => baseRadius * (v / maxValue));
    ctx.strokeStyle = theme.circleColor;
    ctx.lineWidth = 3;
    ctx.setLineDash([]);
    [radii[0], radii[2], radii[4]].forEach(r => {
        ctx.beginPath();
        ctx.arc(centerX, centerY, r, 0, Math.PI * 2);
        ctx.stroke();
    });
    ctx.lineWidth = 1.5;
    ctx.setLineDash([7.5, 7.5]);
    [radii[1], radii[3]].forEach(r => {
        ctx.beginPath();
        ctx.arc(centerX, centerY, r, 0, Math.PI * 2);
        ctx.stroke();
    });
    ctx.setLineDash([]);
    
    // 在12点钟位置标注数值
    const values = [2, 4, 6, 8, 10];
    ctx.font = 'bold 13px Microsoft YaHei';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    radii.forEach((r, index) => {
        const labelY = centerY - r;
        ctx.strokeStyle = '#FFFFFF';
        ctx.lineWidth = 3;
        ctx.strokeText(values[index].toString(), centerX, labelY + 4);
        ctx.fillStyle = theme.circleColor;
        ctx.fillText(values[index].toString(), centerX, labelY + 4);
    });
    ctx.textAlign = 'left';
    ctx.textBaseline = 'alphabetic';
            const angle = 0;
            const cos = Math.cos(angle);
            const sin = Math.sin(angle);
            const cRegionStart = 0;
            const cRegionEnd = radii[1];
            const cRegionCenter = (cRegionStart + cRegionEnd) / 2;
            drawRegionLabel(centerX + cRegionCenter * cos, centerY + cRegionCenter * sin, 'C区', '#000', cRegionEnd - cRegionStart);
            const bRegionStart = radii[1];
            const bRegionEnd = radii[3];
            const bRegionCenter = (bRegionStart + bRegionEnd) / 2;
            drawRegionLabel(centerX + bRegionCenter * cos, centerY + bRegionCenter * sin, 'B区', '#000', bRegionEnd - bRegionStart);
            const aRegionStart = radii[3];
            const aRegionEnd = radii[4];
            const aRegionCenter = (aRegionStart + aRegionEnd) / 2;
            drawRegionLabel(centerX + aRegionCenter * cos, centerY + aRegionCenter * sin, 'A区', '#000', aRegionEnd - aRegionStart);
        }

        function drawRegionLabel(x, y, text, color, length) {
    ctx.strokeStyle = color;
    ctx.fillStyle = color;
    ctx.lineWidth = 3;
    ctx.beginPath();
    ctx.moveTo(x - length / 2, y);
    ctx.lineTo(x + length / 2, y);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x - length / 2, y);
    ctx.lineTo(x - length / 2 + 7.5, y - 4.5);
    ctx.lineTo(x - length / 2 + 7.5, y + 4.5);
    ctx.closePath();
    ctx.fill();
    ctx.beginPath();
    ctx.moveTo(x + length / 2, y);
    ctx.lineTo(x + length / 2 - 7.5, y - 4.5);
    ctx.lineTo(x + length / 2 - 7.5, y + 4.5);
    ctx.closePath();
    ctx.fill();
    ctx.font = 'bold 13px Microsoft YaHei';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.strokeStyle = '#FFFFFF';
    ctx.lineWidth = 3;
    ctx.strokeText(text, x, y - 8);
    ctx.fillStyle = color;
    ctx.fillText(text, x, y - 8);
    ctx.textAlign = 'left';
    ctx.textBaseline = 'alphabetic';
}

        function initializeDimensions() {
            const count = parseInt(document.getElementById('dimensionCount').value);
            const defaultDimensions = ['团队精神', '质量意识', '个人能力', '解决问题信心', '工作热情和干劲', 
                                      '创新能力', '沟通能力', '学习能力', '执行力', '责任心'];
            const dimensionList = document.getElementById('dimensionList');
            dimensionList.innerHTML = '';
            for (let i = 0; i < count; i++) {
                const div = document.createElement('div');
                div.className = 'dimension-item';
                div.innerHTML = `<input type="text" id="dim${i}" value="${defaultDimensions[i] || '维度' + (i + 1)}" placeholder="维度名称" onchange="onFormChange(this)">`;
                dimensionList.appendChild(div);
            }
        }

        function addDataset() {
            datasetCounter++;
            const count = parseInt(document.getElementById('dimensionCount').value);
            const datasetList = document.getElementById('datasetList');
            const div = document.createElement('div');
            div.className = 'dataset-item';
            div.id = `dataset${datasetCounter}`;
            let dataInputsHTML = '';
            for (let i = 0; i < count; i++) {
                const dimName = document.getElementById(`dim${i}`)?.value || `维度${i + 1}`;
                dataInputsHTML += `
                    <div class="data-input-group">
                        <label>${dimName}</label>
                        <input type="number" class="dataset-value" data-dataset="${datasetCounter}" data-index="${i}" value="${Math.floor(Math.random() * 5) + 3}" min="0" max="${DEFAULT_MAX_VALUE}" onchange="onFormChange(this)">
                    </div>
                `;
            }
            const styleIndex = (datasetCounter - 1) % lineStyles.length;
            const defaultName = defaultDatasetNames[datasetCounter - 1] || `数据组${datasetCounter}`;
            const theme = themes[currentTheme];
            const defaultColor = theme.lineColors[(datasetCounter - 1) % theme.lineColors.length];
            div.innerHTML = `
                <div class="dataset-header">
                    <div class="dataset-name-row">
                        <input type="text" class="dataset-name" id="datasetName${datasetCounter}" value="${defaultName}" style="border: 1px solid #ddd; background: white; font-weight: bold; padding: 6px 10px; border-radius: 6px;" onchange="onFormChange(this)" placeholder="输入数据组名称">
                    </div>
                    <div class="dataset-controls-row">
                        <div class="color-picker-wrapper">
                            <label>线条颜色</label>
                            <input type="color" id="lineColor${datasetCounter}" value="${defaultColor}" onchange="onFormChange(this)">
                        </div>
                        <div class="color-picker-wrapper">
                            <label>线型</label>
                            <select id="lineStyle${datasetCounter}" onchange="onFormChange(this)" style="width: 100%; padding: 8px;">
                                ${lineStyles.map((style, idx) => `<option value="${idx}" ${idx === styleIndex ? 'selected' : ''}>${style.name}</option>`).join('')}
                            </select>
                        </div>
                        <button class="btn btn-danger btn-sm" onclick="removeDataset(${datasetCounter}); pushHistoryState();" style="align-self: flex-end; margin-bottom: 0;">删除</button>
                    </div>
                </div>
                <div class="data-inputs">${dataInputsHTML}</div>
            `;
            datasetList.appendChild(div);
            validateAndUpdate();
            pushHistoryState();
        }

        function removeDataset(id) {
            const element = document.getElementById(`dataset${id}`);
            if (element) {
                element.remove();
                validateAndUpdate();
            }
        }

        function onFormChange() {
            validateAndUpdate();
            pushHistoryState();
        }

        function validateData() {
            const maxValue = DEFAULT_MAX_VALUE;
            const inputs = document.querySelectorAll('.dataset-value');
            let isValid = true;
            inputs.forEach(input => {
                const value = parseFloat(input.value);
                if (isNaN(value) || value < 0 || value > maxValue) {
                    input.style.borderColor = '#dc3545';
                    isValid = false;
                } else {
                    input.style.borderColor = '#28a745';
                }
            });
            return isValid;
        }

        function validateAndUpdate() {
            if (validateData()) {
                updateChart();
            }
        }

        function updateChart() {
            const maxValue = DEFAULT_MAX_VALUE;
            const dimensionCount = parseInt(document.getElementById('dimensionCount').value);
            const dimensions = [];
            for (let i = 0; i < dimensionCount; i++) {
                const dimInput = document.getElementById(`dim${i}`);
                dimensions.push(dimInput ? dimInput.value : `维度${i + 1}`);
            }
            const datasets = [];
            const datasetElements = document.querySelectorAll('.dataset-item');
            datasetElements.forEach(element => {
                const id = element.id.replace('dataset', '');
                const nameInput = document.getElementById(`datasetName${id}`);
                const lineStyleSelect = document.getElementById(`lineStyle${id}`);
                const lineColorInput = document.getElementById(`lineColor${id}`);
                if (nameInput && lineStyleSelect && lineColorInput) {
                    const values = [];
                    const inputs = element.querySelectorAll('.dataset-value');
                    inputs.forEach(input => values.push(parseFloat(input.value) || 0));
                    const styleIndex = parseInt(lineStyleSelect.value);
                    const style = lineStyles[styleIndex];
                    const customColor = lineColorInput.value;
                    datasets.push({
                        name: nameInput.value,
                        values: values,
                        style: style,
                        color: customColor
                    });
                }
            });
            const option = buildChartOption(dimensions, datasets, maxValue);
            chart.setOption(option, true);
            drawCircles();
            updateCustomLegend(datasets);
        }

        function updateCustomLegend(datasets) {
            const theme = themes[currentTheme];
            const legendContainer = document.getElementById('customLegend');
            legendContainer.innerHTML = '';
            datasets.forEach(dataset => {
                const style = dataset.style;
                const color = dataset.color;
                const legendItem = document.createElement('div');
                legendItem.className = 'custom-legend-item';
                const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
                svg.setAttribute('width', '40');
                svg.setAttribute('height', '20');
                const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
                line.setAttribute('x1', '0');
                line.setAttribute('y1', '10');
                line.setAttribute('x2', '40');
                line.setAttribute('y2', '10');
                line.setAttribute('stroke', color);
                line.setAttribute('stroke-width', style.width * 1.5);
                if (style.type === 'dashed' || Array.isArray(style.type)) {
                    const dashArray = Array.isArray(style.type) ? style.type.join(',') : '5,5';
                    line.setAttribute('stroke-dasharray', dashArray);
                } else if (style.type === 'dotted') {
                    line.setAttribute('stroke-dasharray', '2,2');
                }
                svg.appendChild(line);
                const label = document.createElement('span');
                label.textContent = dataset.name;
                label.style.color = theme.textColor;
                legendItem.appendChild(svg);
                legendItem.appendChild(label);
                legendContainer.appendChild(legendItem);
            });
        }

        function buildChartOption(dimensions, datasets, maxValue) {
            const theme = themes[currentTheme];
            const indicator = dimensions.map(name => ({ name: name, max: 5 }));
            const seriesData = datasets.map(dataset => {
                const style = dataset.style;
                const color = dataset.color;
                const convertedValues = dataset.values.map(v => (v / maxValue) * 5);
                return {
                    name: dataset.name,
                    value: convertedValues,
                    lineStyle: {
                        type: style.type,
                        color: color,
                        width: style.width * 1.5
                    },
                    itemStyle: { color: color },
                    symbol: 'circle',
                    symbolSize: 9
                };
            });
            return {
                backgroundColor: theme.backgroundColor,
                title: { show: false },
                legend: { show: false },
                radar: {
                    indicator: indicator,
                    center: ['50%', '52%'],
                    radius: '45%',
                    startAngle: 90,
                    splitNumber: 5,
                    shape: 'circle',
                    name: {
                        textStyle: {
                            color: theme.textColor,
                            fontSize: 14
                        }
                    },
                    splitLine: { lineStyle: { color: 'transparent' } },
                    splitArea: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: theme.textColor,
                            opacity: 0.3
                        }
                    }
                },
                series: [{ type: 'radar', data: seriesData }]
            };
        }

        function changeTheme(themeName) {
            currentTheme = themeName;
            document.querySelectorAll('.theme-btn').forEach(btn => btn.classList.remove('active'));
            event.target.classList.add('active');
            updateChart();
            pushHistoryState();
        }

        function exportImage() {
            generateImageCanvas(function(croppedCanvas) {
                const url = croppedCanvas.toDataURL('image/png');
                const link = document.createElement('a');
                link.download = `雷达图_${new Date().getTime()}.png`;
                link.href = url;
                link.click();
                URL.revokeObjectURL(url);
                showMessage('图片导出成功！', 'success');
            });
        }

        function copyImage() {
            generateImageCanvas(function(croppedCanvas) {
                croppedCanvas.toBlob(function(blob) {
                    if (!blob) {
                        showMessage('生成图片失败', 'error');
                        return;
                    }
                    const item = new ClipboardItem({ 'image/png': blob });
                    navigator.clipboard.write([item]).then(function() {
                        showMessage('图片已复制到剪贴板！', 'success');
                    }).catch(function(error) {
                        console.error('复制失败:', error);
                        showMessage('复制失败，请使用导出PNG功能', 'error');
                    });
                }, 'image/png');
            });
        }

        function generateImageCanvas(callback) {
            const chartContainer = document.getElementById('radarChart');
            const tempCanvas = document.createElement('canvas');
            const dpr = window.devicePixelRatio || 1;
            const containerWidth = chartContainer.offsetWidth;
            const containerHeight = chartContainer.offsetHeight;
            tempCanvas.width = containerWidth * dpr;
            tempCanvas.height = containerHeight * dpr;
            const tempCtx = tempCanvas.getContext('2d');
            tempCtx.scale(dpr, dpr);
            const theme = themes[currentTheme];
            tempCtx.fillStyle = theme.backgroundColor;
            tempCtx.fillRect(0, 0, containerWidth, containerHeight);
            const chartImage = new Image();
            chartImage.src = chart.getDataURL({
                type: 'png',
                pixelRatio: dpr,
                backgroundColor: theme.backgroundColor
            });
            chartImage.onload = function() {
                tempCtx.drawImage(chartImage, 0, 0, containerWidth, containerHeight);
                drawCirclesOnCanvas(tempCtx, containerWidth, containerHeight);
                drawModulesOnCanvas(tempCtx, containerWidth, containerHeight, theme);
                const croppedCanvas = cropCanvas(tempCanvas, 40);
                callback(croppedCanvas);
            };
            chartImage.onerror = function() {
                showMessage('生成图片失败', 'error');
            };
        }

        function drawCirclesOnCanvas(context, width, height) {
    const centerX = width / 2;
    const centerY = height * 0.52;
    const maxValue = DEFAULT_MAX_VALUE;
    const baseRadius = Math.min(width, height) * 0.45;
    const radii = [1, 2, 3, 4, 5].map(v => baseRadius * (v / maxValue));
    const theme = themes[currentTheme];
    context.strokeStyle = theme.circleColor;
    context.lineWidth = 3;
    context.setLineDash([]);
    [radii[0], radii[2], radii[4]].forEach(r => {
        context.beginPath();
        context.arc(centerX, centerY, r, 0, Math.PI * 2);
        context.stroke();
    });
    context.lineWidth = 1.5;
    context.setLineDash([7.5, 7.5]);
    [radii[1], radii[3]].forEach(r => {
        context.beginPath();
        context.arc(centerX, centerY, r, 0, Math.PI * 2);
        context.stroke();
    });
    context.setLineDash([]);
    
    // 在12点钟位置标注数值
    const values = [2, 4, 6, 8, 10];
    context.font = 'bold 13px Microsoft YaHei';
    context.textAlign = 'center';
    context.textBaseline = 'bottom';
    radii.forEach((r, index) => {
        const labelY = centerY - r;
        context.strokeStyle = '#FFFFFF';
        context.lineWidth = 3;
        context.strokeText(values[index].toString(), centerX, labelY + 4);
        context.fillStyle = theme.circleColor;
        context.fillText(values[index].toString(), centerX, labelY + 4);
    });
    context.textAlign = 'left';
    context.textBaseline = 'alphabetic';
            const angle = 0;
            const cos = Math.cos(angle);
            const sin = Math.sin(angle);
            const cRegionStart = 0;
            const cRegionEnd = radii[1];
            const cRegionCenter = (cRegionStart + cRegionEnd) / 2;
            drawRegionLabelOnContext(context, centerX + cRegionCenter * cos, centerY + cRegionCenter * sin, 'C区', '#000', cRegionEnd - cRegionStart);
            const bRegionStart = radii[1];
            const bRegionEnd = radii[3];
            const bRegionCenter = (bRegionStart + bRegionEnd) / 2;
            drawRegionLabelOnContext(context, centerX + bRegionCenter * cos, centerY + bRegionCenter * sin, 'B区', '#000', bRegionEnd - bRegionStart);
            const aRegionStart = radii[3];
            const aRegionEnd = radii[4];
            const aRegionCenter = (aRegionStart + aRegionEnd) / 2;
            drawRegionLabelOnContext(context, centerX + aRegionCenter * cos, centerY + aRegionCenter * sin, 'A区', '#000', aRegionEnd - aRegionStart);
        }

        function drawModulesOnCanvas(context, width, height, theme) {
            if (modulePositions.legend.visible) {
                drawLegendOnCanvas(context, theme);
            }
            if (modulePositions.region.visible) {
                drawRegionInfoOnCanvas(context, theme);
            }
        }

        function drawLegendOnCanvas(context, theme) {
            const legendModule = document.getElementById('legendModule');
            const legendSection = legendModule.querySelector('.legend-section');
            const legendX = modulePositions.legend.x;
            const legendY = modulePositions.legend.y;
            const legendWidth = legendSection.offsetWidth;
            const legendHeight = legendSection.offsetHeight;
            context.fillStyle = 'rgba(255, 255, 255, 0.95)';
            context.fillRect(legendX, legendY, legendWidth, legendHeight);
            const datasetElements = document.querySelectorAll('.dataset-item');
            const datasets = [];
            datasetElements.forEach(element => {
                const id = element.id.replace('dataset', '');
                const nameInput = document.getElementById(`datasetName${id}`);
                const lineStyleSelect = document.getElementById(`lineStyle${id}`);
                const lineColorInput = document.getElementById(`lineColor${id}`);
                if (nameInput && lineStyleSelect && lineColorInput) {
                    const values = [];
                    const inputs = element.querySelectorAll('.dataset-value');
                    inputs.forEach(input => values.push(parseFloat(input.value) || 0));
                    const styleIndex = parseInt(lineStyleSelect.value);
                    const style = lineStyles[styleIndex];
                    const customColor = lineColorInput.value;
                    datasets.push({
                        name: nameInput.value,
                        values: values,
                        style: style,
                        color: customColor
                    });
                }
            });
            let itemY = legendY + 12;
            datasets.forEach(dataset => {
                const style = dataset.style;
                const color = dataset.color;
                context.strokeStyle = color;
                context.lineWidth = style.width * 1.5;
                if (style.type === 'dashed' || Array.isArray(style.type)) {
                    const dashArray = Array.isArray(style.type) ? style.type : [5, 5];
                    context.setLineDash(dashArray);
                } else if (style.type === 'dotted') {
                    context.setLineDash([2, 2]);
                } else {
                    context.setLineDash([]);
                }
                context.beginPath();
                context.moveTo(legendX + 12, itemY + 10);
                context.lineTo(legendX + 52, itemY + 10);
                context.stroke();
                context.setLineDash([]);
                context.fillStyle = theme.textColor;
                context.font = '13px Microsoft YaHei';
                context.textAlign = 'left';
                context.fillText(dataset.name, legendX + 62, itemY + 14);
                itemY += 32;
            });
        }

        function drawRegionInfoOnCanvas(context, theme) {
            const regionModule = document.getElementById('regionModule');
            const regionInfo = regionModule.querySelector('.region-info');
            const regionX = modulePositions.region.x;
            const regionY = modulePositions.region.y;
            const regionWidth = regionInfo.offsetWidth;
            const regionHeight = regionInfo.offsetHeight;
            context.fillStyle = 'rgba(255, 255, 255, 0.95)';
            context.fillRect(regionX, regionY, regionWidth, regionHeight);
            context.fillStyle = theme.textColor;
            context.font = '13px Microsoft YaHei';
            context.textAlign = 'left';
            context.fillText('A区：理想水平', regionX + 12, regionY + 22);
            context.fillText('B区：平均水平', regionX + 12, regionY + 46);
            context.fillText('C区：不理想水平', regionX + 12, regionY + 70);
        }

        function drawRegionLabelOnContext(context, x, y, text, color, length) {
            context.strokeStyle = color;
            context.fillStyle = color;
            context.lineWidth = 3;
            context.beginPath();
            context.moveTo(x - length / 2, y);
            context.lineTo(x + length / 2, y);
            context.stroke();
            context.beginPath();
            context.moveTo(x - length / 2, y);
            context.lineTo(x - length / 2 + 7.5, y - 4.5);
            context.lineTo(x - length / 2 + 7.5, y + 4.5);
            context.closePath();
            context.fill();
            context.beginPath();
            context.moveTo(x + length / 2, y);
            context.lineTo(x + length / 2 - 7.5, y - 4.5);
            context.lineTo(x + length / 2 - 7.5, y + 4.5);
            context.closePath();
            context.fill();
            context.font = 'bold 13px Microsoft YaHei';
            context.textAlign = 'center';
            context.textBaseline = 'bottom';
            context.strokeStyle = '#FFFFFF';
            context.lineWidth = 3;
            context.strokeText(text, x, y - 8);
            context.fillText(text, x, y - 8);
            context.textAlign = 'left';
            context.textBaseline = 'alphabetic';
        }

        function cropCanvas(sourceCanvas, padding = 40) {
            const ctx2 = sourceCanvas.getContext('2d');
            const width = sourceCanvas.width;
            const height = sourceCanvas.height;
            const imageData = ctx2.getImageData(0, 0, width, height);
            const pixels = imageData.data;
            let minX = width, minY = height, maxX = 0, maxY = 0;
            let hasContent = false;
            const step = 4;
            for (let y = 0; y < height; y += step) {
                for (let x = 0; x < width; x += step) {
                    const index = (y * width + x) * 4;
                    const alpha = pixels[index + 3];
                    if (alpha > 0) {
                        const r = pixels[index];
                        const g = pixels[index + 1];
                        const b = pixels[index + 2];
                        if (!(r > 250 && g > 250 && b > 250)) {
                            hasContent = true;
                            if (x < minX) minX = x;
                            if (x > maxX) maxX = x;
                            if (y < minY) minY = y;
                            if (y > maxY) maxY = y;
                        }
                    }
                }
            }
            if (!hasContent || minX >= maxX || minY >= maxY) {
                return sourceCanvas;
            }
            minX = Math.max(0, minX - padding);
            minY = Math.max(0, minY - padding);
            maxX = Math.min(width, maxX + padding);
            maxY = Math.min(height, maxY + padding);
            const croppedWidth = maxX - minX;
            const croppedHeight = maxY - minY;
            const croppedCanvas = document.createElement('canvas');
            croppedCanvas.width = croppedWidth;
            croppedCanvas.height = croppedHeight;
            const croppedCtx = croppedCanvas.getContext('2d');
            croppedCtx.drawImage(sourceCanvas, minX, minY, croppedWidth, croppedHeight, 0, 0, croppedWidth, croppedHeight);
            return croppedCanvas;
        }

        function saveConfig() {
            try {
                const config = getCurrentConfig();
                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();
                setTimeout(() => URL.revokeObjectURL(url), 100);
                showMessage('配置保存成功！', 'success');
            } catch (error) {
                console.error('保存配置失败:', error);
                showMessage('保存配置失败', 'error');
            }
        }

        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, { skipHistory: false });
                        pushHistoryState();
                        showMessage('配置加载成功！', 'success');
                    } catch (error) {
                        console.error('加载配置失败:', error);
                        showMessage('配置文件格式错误！', 'error');
                    }
                };
                reader.onerror = function() {
                    showMessage('读取文件失败', 'error');
                };
                reader.readAsText(file);
            };
            input.click();
        }

        function getCurrentConfig() {
            const config = {
                dimensionCount: parseInt(document.getElementById('dimensionCount').value),
                maxValue: DEFAULT_MAX_VALUE,
                theme: currentTheme,
                dimensions: [],
                datasets: [],
                modulePositions: modulePositions
            };
            for (let i = 0; i < config.dimensionCount; i++) {
                const dimInput = document.getElementById(`dim${i}`);
                config.dimensions.push(dimInput ? dimInput.value : `维度${i + 1}`);
            }
            const datasetElements = document.querySelectorAll('.dataset-item');
            datasetElements.forEach(element => {
                const id = element.id.replace('dataset', '');
                const nameInput = document.getElementById(`datasetName${id}`);
                const lineStyleSelect = document.getElementById(`lineStyle${id}`);
                const lineColorInput = document.getElementById(`lineColor${id}`);
                if (nameInput && lineStyleSelect && lineColorInput) {
                    const values = [];
                    const inputs = element.querySelectorAll('.dataset-value');
                    inputs.forEach(input => values.push(parseFloat(input.value) || 0));
                    config.datasets.push({
                        name: nameInput.value,
                        values: values,
                        lineStyle: parseInt(lineStyleSelect.value),
                        color: lineColorInput.value
                    });
                }
            });
            return config;
        }

        // 新增 options: { skipHistory: boolean }
        function applyConfig(config, options = {}) {
            const { skipHistory = false } = options;
            isApplyingHistory = true;
            try {
                document.getElementById('dimensionCount').value = config.dimensionCount || 5;
                currentTheme = config.theme || 'default';
                document.querySelectorAll('.theme-btn').forEach(btn => btn.classList.remove('active'));
                document.querySelector(`.theme-btn[onclick="changeTheme('${currentTheme}')"]`)?.classList.add('active');
                initializeDimensions();
                if (config.dimensions) {
                    config.dimensions.forEach((name, index) => {
                        const dimInput = document.getElementById(`dim${index}`);
                        if (dimInput) dimInput.value = name;
                    });
                }
                document.getElementById('datasetList').innerHTML = '';
                datasetCounter = 0;
                if (config.datasets && config.datasets.length > 0) {
                    config.datasets.forEach(dataset => {
                        datasetCounter++;
                        const datasetList = document.getElementById('datasetList');
                        const div = document.createElement('div');
                        div.className = 'dataset-item';
                        div.id = `dataset${datasetCounter}`;
                        let dataInputsHTML = '';
                        dataset.values.forEach((value, index) => {
                            const dimName = config.dimensions?.[index] || `维度${index + 1}`;
                            dataInputsHTML += `
                                <div class="data-input-group">
                                    <label>${dimName}</label>
                                    <input type="number" class="dataset-value" data-dataset="${datasetCounter}" data-index="${index}" value="${value}" min="0" max="${DEFAULT_MAX_VALUE}" onchange="onFormChange(this)">
                                </div>
                            `;
                        });
                        const theme = themes[currentTheme];
                        const defaultColor = dataset.color || theme.lineColors[(datasetCounter - 1) % theme.lineColors.length];
                        div.innerHTML = `
                            <div class="dataset-header">
                                <div class="dataset-name-row">
                                    <input type="text" class="dataset-name" id="datasetName${datasetCounter}" value="${dataset.name}" style="border: 1px solid #ddd; background: white; font-weight: bold; padding: 6px 10px; border-radius: 6px;" onchange="onFormChange(this)" placeholder="输入数据组名称">
                                </div>
                                <div class="dataset-controls-row">
                                    <div class="color-picker-wrapper">
                                        <label>线条颜色</label>
                                        <input type="color" id="lineColor${datasetCounter}" value="${defaultColor}" onchange="onFormChange(this)">
                                    </div>
                                    <div class="color-picker-wrapper">
                                        <label>线型</label>
                                        <select id="lineStyle${datasetCounter}" onchange="onFormChange(this)" style="width: 100%; padding: 8px;">
                                            ${lineStyles.map((style, idx) => `<option value="${idx}" ${idx === dataset.lineStyle ? 'selected' : ''}>${style.name}</option>`).join('')}
                                        </select>
                                    </div>
                                    <button class="btn btn-danger btn-sm" onclick="removeDataset(${datasetCounter}); pushHistoryState();" style="align-self: flex-end; margin-bottom: 0;">删除</button>
                                </div>
                            </div>
                            <div class="data-inputs">${dataInputsHTML}</div>
                        `;
                        datasetList.appendChild(div);
                    });
                } else {
                    addDataset();
                    addDataset();
                }
                if (config.modulePositions) {
                    modulePositions = config.modulePositions;
                    applyModulePositions();
                }
                updateChart();
            } finally {
                isApplyingHistory = false;
            }
            if (!skipHistory) {
                pushHistoryState();
            }
        }

        function pushHistoryState() {
            if (isApplyingHistory) return;
            const config = getCurrentConfig();
            const snapshot = JSON.stringify(config);
            if (historyIndex < history.length - 1) {
                history = history.slice(0, historyIndex + 1);
            }
            history.push(snapshot);
            if (history.length > MAX_HISTORY) {
                history.shift();
            } else {
                historyIndex++;
            }
            // 如果发生了shift，historyIndex需要保持指向尾部
            if (history.length > 0 && historyIndex >= history.length) {
                historyIndex = history.length - 1;
            }
            updateHistoryInfo();
            persistHistory();
        }

        function undo() {
            if (historyIndex > 0) {
                historyIndex--;
                const config = JSON.parse(history[historyIndex]);
                applyConfig(config, { skipHistory: true });
                updateHistoryInfo();
                persistHistory();
                showMessage('已撤销', 'success');
            } else {
                showMessage('没有可撤销的操作', 'error');
            }
        }

        function redo() {
            if (historyIndex < history.length - 1) {
                historyIndex++;
                const config = JSON.parse(history[historyIndex]);
                applyConfig(config, { skipHistory: true });
                updateHistoryInfo();
                persistHistory();
                showMessage('已重做', 'success');
            } else {
                showMessage('没有可重做的操作', 'error');
            }
        }

        function updateHistoryInfo() {
            const info = document.getElementById('historyInfo');
            info.textContent = `历史记录: ${historyIndex + 1}/${history.length} (最多${MAX_HISTORY}条)`;
        }

        function persistHistory() {
            try {
                localStorage.setItem('radarChartHistory_v2_list', JSON.stringify(history));
                localStorage.setItem('radarChartHistory_v2_index', historyIndex.toString());
            } catch (e) {
                console.error('保存历史记录失败:', e);
            }
        }

        // 返回布尔：是否恢复成功
        function restoreHistoryFromLocal() {
            try {
                const savedHistory = localStorage.getItem('radarChartHistory_v2_list');
                const savedIndex = localStorage.getItem('radarChartHistory_v2_index');
                if (savedHistory && savedIndex !== null) {
                    const list = JSON.parse(savedHistory);
                    const idx = parseInt(savedIndex);
                    if (Array.isArray(list) && list.length > 0 && idx >= 0 && idx < list.length) {
                        history = list;
                        historyIndex = idx;
                        const config = JSON.parse(history[historyIndex]);
                        applyConfig(config, { skipHistory: true });
                        updateHistoryInfo();
                        // 不再弹提示，避免干扰初始化；关键是不要再 pushHistoryState
                        return true;
                    }
                }
            } catch (e) {
                console.error('恢复历史记录失败:', e);
            }
            history = [];
            historyIndex = -1;
            updateHistoryInfo();
            return false;
        }

        function resetAll() {
            if (confirm('确定要重置所有配置吗？此操作不可撤销。')) {
                document.getElementById('dimensionCount').value = 5;
                currentTheme = 'default';
                document.querySelectorAll('.theme-btn').forEach(btn => btn.classList.remove('active'));
                document.querySelector('.theme-btn').classList.add('active');
                initializeDimensions();
                document.getElementById('datasetList').innerHTML = '';
                datasetCounter = 0;
                addDataset();
                addDataset();
                resetModulePositions();
                updateChart();
                history = [];
                historyIndex = -1;
                pushHistoryState();
                showMessage('已重置所有配置', 'success');
            }
        }

        function importData() {
            const importText = document.getElementById('dataImport').value.trim();
            if (!importText) {
                showMessage('请先输入数据！', 'error');
                return;
            }
            try {
                const lines = importText.split('\n').filter(line => line.trim());
                if (lines.length < 2) {
                    showMessage('数据格式错误：至少需要标题行和一行数据', 'error');
                    return;
                }
                const headers = lines[0].split('\t').map(h => h.trim());
                if (headers.length < 2) {
                    showMessage('数据格式错误：至少需要一个维度列和一个数据列', 'error');
                    return;
                }
                const datasetNames = headers.slice(1);
                const dimensions = [];
                const datasetsValues = Array(datasetNames.length).fill(null).map(() => []);
                for (let i = 1; i < lines.length; i++) {
                    const cells = lines[i].split('\t').map(c => c.trim());
                    if (cells.length < 2) continue;
                    dimensions.push(cells[0]);
                    for (let j = 1; j < cells.length && j < headers.length; j++) {
                        const value = parseFloat(cells[j]);
                        datasetsValues[j - 1].push(isNaN(value) ? 0 : value);
                    }
                }
                if (dimensions.length < 3) {
                    showMessage('至少需要3个维度', 'error');
                    return;
                }
                if (dimensions.length > 10) {
                    showMessage('最多支持10个维度', 'error');
                    return;
                }
                for (let i = 0; i < datasetsValues.length; i++) {
                    if (datasetsValues[i].length !== dimensions.length) {
                        showMessage(`数据集"${datasetNames[i]}"的数据数量与维度数量不匹配`, 'error');
                        return;
                    }
                }

                document.getElementById('dimensionCount').value = dimensions.length;
                initializeDimensions();
                dimensions.forEach((name, index) => {
                    const dimInput = document.getElementById(`dim${index}`);
                    if (dimInput) dimInput.value = name;
                });

                document.getElementById('datasetList').innerHTML = '';
                datasetCounter = 0;

                datasetNames.forEach((name, datasetIndex) => {
                    datasetCounter++;
                    const datasetList = document.getElementById('datasetList');
                    const div = document.createElement('div');
                    div.className = 'dataset-item';
                    div.id = `dataset${datasetCounter}`;
                    let dataInputsHTML = '';
                    datasetsValues[datasetIndex].forEach((value, dimIndex) => {
                        const dimName = dimensions[dimIndex];
                        dataInputsHTML += `
                            <div class="data-input-group">
                                <label>${dimName}</label>
                                <input type="number" class="dataset-value" data-dataset="${datasetCounter}" data-index="${dimIndex}" value="${value}" min="0" max="${DEFAULT_MAX_VALUE}" onchange="onFormChange(this)">
                            </div>
                        `;
                    });
                    const styleIndex = (datasetCounter - 1) % lineStyles.length;
                    const theme = themes[currentTheme];
                    const defaultColor = theme.lineColors[(datasetCounter - 1) % theme.lineColors.length];
                    div.innerHTML = `
                        <div class="dataset-header">
                            <div class="dataset-name-row">
                                <input type="text" class="dataset-name" id="datasetName${datasetCounter}" value="${name}" style="border: 1px solid #ddd; background: white; font-weight: bold; padding: 6px 10px; border-radius: 6px;" onchange="onFormChange(this)" placeholder="输入数据组名称">
                            </div>
                            <div class="dataset-controls-row">
                                <div class="color-picker-wrapper">
                                    <label>线条颜色</label>
                                    <input type="color" id="lineColor${datasetCounter}" value="${defaultColor}" onchange="onFormChange(this)">
                                </div>
                                <div class="color-picker-wrapper">
                                    <label>线型</label>
                                    <select id="lineStyle${datasetCounter}" onchange="onFormChange(this)" style="width: 100%; padding: 8px;">
                                        ${lineStyles.map((style, idx) => `<option value="${idx}" ${idx === styleIndex ? 'selected' : ''}>${style.name}</option>`).join('')}
                                    </select>
                                </div>
                                <button class="btn btn-danger btn-sm" onclick="removeDataset(${datasetCounter}); pushHistoryState();" style="align-self: flex-end; margin-bottom: 0;">删除</button>
                            </div>
                        </div>
                        <div class="data-inputs">${dataInputsHTML}</div>
                    `;
                    datasetList.appendChild(div);
                });

                updateChart();
                pushHistoryState();
                showMessage(`成功导入 ${dimensions.length} 个维度，${datasetNames.length} 组数据`, 'success');
            } catch (error) {
                console.error('导入数据错误:', error);
                showMessage('数据解析失败，请检查格式是否正确', 'error');
            }
        }

        function clearImport() {
            document.getElementById('dataImport').value = '';
            showMessage('已清空导入区域', 'success');
        }

        function showMessage(message, type) {
            const messageDiv = document.createElement('div');
            messageDiv.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                padding: 12px 14px;
                border-radius: 6px;
                color: white;
                font-size: 14px;
                z-index: 10000;
                animation: slideIn 0.25s ease-out;
                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            `;
            if (type === 'success') { messageDiv.style.background = '#28a745'; }
            else if (type === 'error') { messageDiv.style.background = '#dc3545'; }
            else { messageDiv.style.background = '#004098'; }
            messageDiv.textContent = message;
            document.body.appendChild(messageDiv);
            setTimeout(() => {
                messageDiv.style.animation = 'slideOut 0.25s ease-in';
                setTimeout(() => { if (messageDiv.parentNode) messageDiv.remove(); }, 250);
            }, 2000);
        }

        function autoSave() {
            try {
                const config = getCurrentConfig();
                localStorage.setItem('radarChartAutoSave', JSON.stringify(config));
            } catch (error) {
                console.error('自动保存失败:', error);
            }
        }

        // 当 noHistoryOnly = true 时，仅在没有历史恢复成功时才尝试自动恢复; 返回是否应用了自动保存
        function restoreAutoSave(noHistoryOnly = false) {
            if (noHistoryOnly && history.length > 0) {
                return false;
            }
            const saved = localStorage.getItem('radarChartAutoSave');
            if (saved) {
                try {
                    const config = JSON.parse(saved);
                    applyConfig(config, { skipHistory: true });
                    showMessage('已恢复上次的配置', 'success');
                    return true;
                } catch (error) {
                    console.error('恢复自动保存失败', error);
                }
            }
            return false;
        }
    </script>
</body>
</html>