function handleCompareJson()

in spring-ai-alibaba-jmanus/src/main/resources/static/plan-template/js/plan-template.js [808:887]


function handleCompareJson() {
    if (planVersions.length <= 1) {
        alert('没有多个版本可供对比');
        return;
    }

    // 创建一个简单的版本选择对话框
    const currentVersion = planVersions[currentVersionIndex];
    const versionOptions = planVersions.map((_, i) =>
        `<option value="${i}" ${i === currentVersionIndex ? 'selected' : ''}>版本 ${i + 1}</option>`).join('');

    const dialog = document.createElement('div');
    dialog.className = 'dialog-overlay show';
    dialog.innerHTML = `
        <div class="dialog-container">
            <div class="dialog-header">
                <h3>版本对比</h3>
                <button class="close-btn" id="closeCompareDialog">&times;</button>
            </div>
            <div class="dialog-content">
                <div style="display: flex; margin-bottom: 15px;">
                    <div style="flex: 1; margin-right: 10px;">
                        <label>对比版本: </label>
                        <select id="compareVersionSelect">
                            ${versionOptions}
                        </select>
                    </div>
                    <div style="flex: 1;">
                        <label>与版本: </label>
                        <select id="targetVersionSelect">
                            ${versionOptions}
                        </select>
                    </div>
                </div>
                <div style="display: flex; height: 300px;">
                    <textarea readonly style="flex: 1; margin-right: 5px; font-family: monospace;" id="compareVersionText"></textarea>
                    <textarea readonly style="flex: 1; font-family: monospace;" id="targetVersionText"></textarea>
                </div>
            </div>
            <div class="dialog-footer">
                <button class="secondary-btn" id="closeCompareBtn">关闭</button>
            </div>
        </div>
    `;

    document.body.appendChild(dialog);

    // 获取元素引用
    const compareVersionSelect = document.getElementById('compareVersionSelect');
    const targetVersionSelect = document.getElementById('targetVersionSelect');
    const compareVersionText = document.getElementById('compareVersionText');
    const targetVersionText = document.getElementById('targetVersionText');
    const closeCompareBtn = document.getElementById('closeCompareBtn');
    const closeCompareDialog = document.getElementById('closeCompareDialog');

    // 设置左侧默认显示前一个版本(当前版本-1)
    if (currentVersionIndex > 0) {
        compareVersionSelect.value = currentVersionIndex - 1;
    }

    // 设置初始内容
    updateCompareContent();

    // 绑定事件
    compareVersionSelect.addEventListener('change', updateCompareContent);
    targetVersionSelect.addEventListener('change', updateCompareContent);
    closeCompareBtn.addEventListener('click', () => document.body.removeChild(dialog));
    closeCompareDialog.addEventListener('click', () => document.body.removeChild(dialog));

    // 更新对比内容
    function updateCompareContent() {
        const compareIndex = parseInt(compareVersionSelect.value, 10);
        const targetIndex = parseInt(targetVersionSelect.value, 10);

        compareVersionText.value = planVersions[compareIndex] || '';
        targetVersionText.value = planVersions[targetIndex] || '';

        console.log(`对比版本 ${compareIndex + 1} 和版本 ${targetIndex + 1}`);
    }
}