/**
* UI渲染模块
* @type {module}
*/
import { escapeHtml } from './utils.js';
import { renderEnvironmentSection } from './environment-section.js';
import { renderModelGroupsSection } from './model-groups.js';
import { renderServicesSection } from './services.js';
import { renderConsoleAndLogSection } from './console-log.js';
/**
* 渲染基本UI
* @param {HTMLElement} component - 组件实例
*/
export function renderBasicUI(component) {
component.shadowRoot.innerHTML = `
`;
}
/**
* 更新文件内容显示
* @param {HTMLElement} component - 组件实例
*/
export function updateFileContent(component) {
const contentElement = component.shadowRoot.getElementById('fileContent');
if (!contentElement) {
return;
}
if (!component.xmlContent) {
contentElement.innerHTML = '请选择一个运行环境配置文件查看内容
';
return;
}
try {
// 尝试解析XML
const parser = new DOMParser();
component.xmlDoc = parser.parseFromString(component.xmlContent, 'text/xml');
// 检查解析错误
const parseError = component.xmlDoc.querySelector('parsererror');
if (parseError) {
contentElement.innerHTML = `${escapeHtml(component.xmlContent)}`;
return;
}
// 创建可视化编辑器
contentElement.innerHTML = '';
renderVisualEditor(component, contentElement, component.xmlDoc);
} catch (error) {
contentElement.innerHTML = `${escapeHtml(component.xmlContent)}`;
}
}
/**
* 渲染可视化编辑界面
* @param {HTMLElement} component - 组件实例
* @param {HTMLElement} container - 容器元素
* @param {Document} xmlDoc - XML文档
*/
export function renderVisualEditor(component, container, xmlDoc) {
// 清空容器
container.innerHTML = '';
// 创建编辑器容器
const visualEditor = document.createElement('div');
visualEditor.className = 'visual-editor';
// 获取根元素
const rootElement = xmlDoc.documentElement;
// 只处理Scenario根元素
if (rootElement.nodeName === 'Scenario') {
// 创建模态对话框容器
const modalContainer = document.createElement('div');
modalContainer.className = 'modal';
modalContainer.id = 'propertyModal';
container.appendChild(modalContainer);
// 渲染Environment部分
renderEnvironmentSection(component, visualEditor, rootElement);
// 渲染Console输出和日志部分
renderConsoleAndLogSection(component, visualEditor, rootElement);
// 渲染ModelGroup部分
renderModelGroupsSection(component, visualEditor, rootElement);
// 渲染Services部分
renderServicesSection(component, visualEditor, rootElement);
} else {
// 不是Scenario根元素，显示错误信息
visualEditor.innerHTML = `
无法编辑：XML文档的根元素不是Scenario。
请确保XML文档的根元素是Scenario。
`;
}
container.appendChild(visualEditor);
// 自动保存配置到XML
autoSaveToXml(component);
}
/**
* 自动保存表单内容到XML
* @param {HTMLElement} component - 组件实例
*/
export function autoSaveToXml(component) {
// 为所有输入框添加change事件
const inputs = component.shadowRoot.querySelectorAll('.property-input');
inputs.forEach(input => {
input.addEventListener('change', () => {
if (component.updateXmlFromVisualEditor) {
component.updateXmlFromVisualEditor();
}
});
});
}