XNSim/XNSimHtml/components/run-env-config/console-log.js

/**
 * 控制台和日志模块
 * @type {module}
 */
import { markEdited } from './utils.js';

/**
 * 渲染控制台和日志部分
 * @param {HTMLElement} component - 组件实例
 * @param {HTMLElement} container - 容器元素
 * @param {Element} rootElement - XML根元素
 */
export function renderConsoleAndLogSection(component, container, rootElement) {
    const section = document.createElement('div');
    section.className = 'editor-section';
    
    const title = document.createElement('div');
    title.className = 'section-title';
    title.textContent = '控制台和日志设置';
    section.appendChild(title);
    
    const propertyGroup = document.createElement('div');
    propertyGroup.className = 'property-group';
    
    // 处理ConsoleOutput元素
    const consoleElement = rootElement.querySelector('ConsoleOutput');
    if (consoleElement) {
        const consoleTitle = document.createElement('div');
        consoleTitle.style.gridColumn = '1 / -1';
        consoleTitle.style.fontWeight = 'bold';
        consoleTitle.textContent = '控制台输出';
        propertyGroup.appendChild(consoleTitle);
        
        Array.from(consoleElement.attributes).forEach(attr => {
            const propertyItem = document.createElement('div');
            propertyItem.className = 'property-item';
            propertyItem.style.display = 'flex';
            propertyItem.style.alignItems = 'center';
            
            const checkboxContainer = document.createElement('div');
            checkboxContainer.style.display = 'flex';
            checkboxContainer.style.alignItems = 'center';
            
            const checkbox = document.createElement('input');
            checkbox.className = 'property-checkbox';
            checkbox.type = 'checkbox';
            checkbox.checked = attr.value === '1';
            checkbox.dataset.path = `ConsoleOutput@${attr.name}`;
            checkbox.id = `console-${attr.name}`;
            checkbox.style.marginRight = '8px';
            
            // 添加提示
            if (attr.name === 'Debug') {
                checkbox.title = '是否输出调试信息';
            } else if (attr.name === 'Info') {
                checkbox.title = '是否输出提示信息';
            } else if (attr.name === 'Error') {
                checkbox.title = '是否输出错误信息';
            } else if (attr.name === 'Warning') {
                checkbox.title = '是否输出警告信息';
            } else {
                checkbox.title = `是否启用${attr.name}`;
            }
            
            checkbox.addEventListener('change', () => {
                // 更新XML数据
                updateConsoleOrLogCheckbox(component, checkbox, 'ConsoleOutput', attr.name);
                component.isEdited = markEdited(component.shadowRoot, component.isEdited);
            });
            
            const label = document.createElement('label');
            label.className = 'property-label';
            label.textContent = attr.name;
            label.htmlFor = `console-${attr.name}`;
            label.style.cursor = 'pointer';
            
            checkboxContainer.appendChild(checkbox);
            checkboxContainer.appendChild(label);
            propertyItem.appendChild(checkboxContainer);
            propertyGroup.appendChild(propertyItem);
        });
    }
    
    // 处理Log元素
    const logElement = rootElement.querySelector('Log');
    if (logElement) {
        const logTitle = document.createElement('div');
        logTitle.style.gridColumn = '1 / -1';
        logTitle.style.fontWeight = 'bold';
        logTitle.style.marginTop = '12px';
        logTitle.textContent = '日志设置';
        propertyGroup.appendChild(logTitle);
        
        Array.from(logElement.attributes).forEach(attr => {
            const propertyItem = document.createElement('div');
            propertyItem.className = 'property-item';
            propertyItem.style.display = 'flex';
            propertyItem.style.alignItems = 'center';
            
            const checkboxContainer = document.createElement('div');
            checkboxContainer.style.display = 'flex';
            checkboxContainer.style.alignItems = 'center';
            
            const checkbox = document.createElement('input');
            checkbox.className = 'property-checkbox';
            checkbox.type = 'checkbox';
            checkbox.checked = attr.value === '1';
            checkbox.dataset.path = `Log@${attr.name}`;
            checkbox.id = `log-${attr.name}`;
            checkbox.style.marginRight = '8px';
            
            // 添加提示
            if (attr.name === 'Debug') {
                checkbox.title = '是否记录调试信息';
            } else if (attr.name === 'Info') {
                checkbox.title = '是否记录提示信息';
            } else if (attr.name === 'Error') {
                checkbox.title = '是否记录错误信息';
            } else if (attr.name === 'Warning') {
                checkbox.title = '是否记录警告信息';
            } else {
                checkbox.title = `是否启用${attr.name}日志`;
            }
            
            checkbox.addEventListener('change', () => {
                // 更新XML数据
                updateConsoleOrLogCheckbox(component, checkbox, 'Log', attr.name);
                component.isEdited = markEdited(component.shadowRoot, component.isEdited);
            });
            
            const label = document.createElement('label');
            label.className = 'property-label';
            label.textContent = attr.name;
            label.htmlFor = `log-${attr.name}`;
            label.style.cursor = 'pointer';
            
            checkboxContainer.appendChild(checkbox);
            checkboxContainer.appendChild(label);
            propertyItem.appendChild(checkboxContainer);
            propertyGroup.appendChild(propertyItem);
        });
    }
    
    section.appendChild(propertyGroup);
    container.appendChild(section);
}

/**
 * 更新控制台或日志复选框值到XML
 * @param {HTMLElement} component - 组件实例
 * @param {HTMLInputElement} checkbox - 复选框元素
 * @param {string} elementName - 元素名称
 * @param {string} attrName - 属性名
 */
export function updateConsoleOrLogCheckbox(component, checkbox, elementName, attrName) {
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(component.xmlContent, 'text/xml');
    const element = xmlDoc.querySelector(elementName);
    
    if (element) {
        // 设置属性值为0或1
        element.setAttribute(attrName, checkbox.checked ? '1' : '0');
        
        // 更新XML内容
        const serializer = new XMLSerializer();
        component.xmlContent = serializer.serializeToString(xmlDoc);
        
        component.isEdited = markEdited(component.shadowRoot, component.isEdited);
    }
}