111/static/script.js

// 代码解释与修复助手 - 前端JavaScript交互逻辑

// DOM元素
const codeInput = document.getElementById('codeInput');
const languageSelect = document.getElementById('languageSelect');
const taskTypeSelect = document.getElementById('taskTypeSelect');
const depthSelect = document.getElementById('depthSelect');
const depthGroup = document.getElementById('depthGroup');
const startBtn = document.getElementById('startBtn');
const clearBtn = document.getElementById('clearBtn');
const statusIndicator = document.getElementById('statusIndicator');
const loadingIndicator = document.getElementById('loadingIndicator');
const resultContent = document.getElementById('resultContent');

// 任务类型切换
function toggleDepthOption() {
    if (taskTypeSelect.value === 'explain') {
        depthGroup.style.display = 'block';
    } else {
        depthGroup.style.display = 'none';
    }
}

// 初始化事件监听
function initEventListeners() {
    // 任务类型选择变化
    taskTypeSelect.addEventListener('change', toggleDepthOption);
    
    // 开始分析按钮
    startBtn.addEventListener('click', analyzeCode);
    
    // 清空按钮
    clearBtn.addEventListener('click', clearAll);
    
    // 键盘快捷键
    codeInput.addEventListener('keydown', (e) => {
        // Ctrl+Enter 或 Cmd+Enter 触发分析
        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
            e.preventDefault();
            analyzeCode();
        }
    });
}

// 更新状态显示
function updateStatus(status, message) {
    statusIndicator.className = `status status-${status}`;
    statusIndicator.innerHTML = `<i class="fas fa-circle"></i> ${message}`;
}

// 显示加载状态
function showLoading() {
    loadingIndicator.style.display = 'flex';
    resultContent.style.display = 'none';
}

// 隐藏加载状态
function hideLoading() {
    loadingIndicator.style.display = 'none';
    resultContent.style.display = 'block';
}

// 显示结果
function showResult(data) {
    if (data.success) {
        resultContent.innerHTML = `
            <div class="result-header">
                <h3>
                    <i class="fas fa-check-circle success-icon"></i>
                    分析完成
                </h3>
                <div class="task-info">
                    <span class="language-tag">${getLanguageName(languageSelect.value)}</span>
                    <span class="task-type">${taskTypeSelect.value === 'explain' ? '代码解释' : '代码修复'}</span>
                </div>
            </div>
            <div class="result-body">
                ${formatResult(data.result)}
            </div>
        `;
    } else {
        resultContent.innerHTML = `
            <div class="error-state">
                <i class="fas fa-exclamation-circle error-icon"></i>
                <h3>分析失败</h3>
                <p class="error-message">${data.error || '发生未知错误'}</p>
            </div>
        `;
    }
}

// 格式化结果为HTML
function formatResult(result) {
    if (!result) return '<p>无结果</p>';
    
    // 简单的Markdown到HTML转换
    let html = result
        .replace(/^# (.*$)/gm, '<h3>$1</h3>')
        .replace(/^## (.*$)/gm, '<h4>$1</h4>')
        .replace(/`(.*?)`/g, '<code>$1</code>')
        .replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
        .replace(/\n/g, '<br>');
    
    return html;
}

// 获取语言名称
function getLanguageName(langCode) {
    const languages = {
        'python': 'Python',
        'javascript': 'JavaScript',
        'typescript': 'TypeScript',
        'java': 'Java',
        'cpp': 'C++',
        'c': 'C',
        'go': 'Go',
        'rust': 'Rust',
        'ruby': 'Ruby',
        'php': 'PHP'
    };
    return languages[langCode] || langCode;
}

// 分析代码
async function analyzeCode() {
    const code = codeInput.value.trim();
    const language = languageSelect.value;
    const taskType = taskTypeSelect.value;
    const depth = taskType === 'explain' ? depthSelect.value : undefined;
    
    // 验证输入
    if (!code) {
        alert('请输入代码后再进行分析');
        codeInput.focus();
        return;
    }
    
    // 更新状态
    updateStatus('loading', '正在分析...');
    showLoading();
    
    try {
        // 发送请求
        const response = await fetch('/auto', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                code: code,
                language: language,
                task_type: taskType,
                depth: depth
            })
        });
        
        const data = await response.json();
        
        // 显示结果
        hideLoading();
        showResult(data);
        updateStatus(data.success ? 'success' : 'error', data.success ? '分析完成' : '分析失败');
    } catch (error) {
        hideLoading();
        updateStatus('error', '请求失败');
        resultContent.innerHTML = `
            <div class="error-state">
                <i class="fas fa-exclamation-circle error-icon"></i>
                <h3>网络错误</h3>
                <p class="error-message">无法连接到服务器，请检查网络连接</p>
            </div>
        `;
        console.error('请求错误:', error);
    }
}

// 清空所有内容
function clearAll() {
    codeInput.value = '';
    languageSelect.value = 'python';
    taskTypeSelect.value = 'explain';
    depthSelect.value = 'detailed';
    toggleDepthOption();
    
    resultContent.innerHTML = `
        <div class="empty-state">
            <i class="fas fa-lightbulb"></i>
            <p>输入代码并点击"开始分析"按钮，获取AI分析结果</p>
        </div>
    `;
    updateStatus('idle', '就绪');
    
    codeInput.focus();
}

// 初始化应用
function initApp() {
    toggleDepthOption();
    initEventListeners();
    codeInput.focus();
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', initApp);