108 lines
3.9 KiB
JavaScript
108 lines
3.9 KiB
JavaScript
|
/**
|
|||
|
|
* 核心模块 - 运行环境配置组件
|
|||
|
|
* @type {module}
|
|||
|
|
*/
|
|||
|
|
import { setupEventListeners } from './event-handlers.js';
|
|||
|
|
import { loadScenarioFiles } from './file-operations.js';
|
|||
|
|
import { renderBasicUI, updateFileContent } from './ui-renderer.js';
|
|||
|
|
import { resetEditState } from './utils.js';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 初始化组件
|
|||
|
|
* @param {HTMLElement} component - RunEnvConfig组件实例
|
|||
|
|
*/
|
|||
|
|
export function initializeComponent(component) {
|
|||
|
|
// 设置初始状态
|
|||
|
|
component.currentFile = null;
|
|||
|
|
component.xmlContent = '';
|
|||
|
|
component.scenarioFiles = [];
|
|||
|
|
component.isEdited = false;
|
|||
|
|
component.xmlDoc = null;
|
|||
|
|
|
|||
|
|
// 创建Shadow DOM
|
|||
|
|
component.attachShadow({ mode: 'open' });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 组件连接回调
|
|||
|
|
* @param {HTMLElement} component - RunEnvConfig组件实例
|
|||
|
|
*/
|
|||
|
|
export async function connectedCallback(component) {
|
|||
|
|
// 先渲染UI
|
|||
|
|
renderBasicUI(component);
|
|||
|
|
setupEventListeners(component);
|
|||
|
|
|
|||
|
|
// 然后加载文件列表
|
|||
|
|
await loadScenarioFiles(component);
|
|||
|
|
|
|||
|
|
// 检查是否有renderComplete方法，如果有则调用
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if (typeof component.renderComplete === 'function') {
|
|||
|
|
component.renderComplete();
|
|||
|
|
}
|
|||
|
|
}, 100);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 在完成渲染后同时处理状态恢复
|
|||
|
|
* @param {HTMLElement} component - RunEnvConfig组件实例
|
|||
|
|
*/
|
|||
|
|
export function renderComplete(component) {
|
|||
|
|
// 在DOM渲染完成后更新文件选择器
|
|||
|
|
setTimeout(() => {
|
|||
|
|
// 如果有当前文件，尝试选择它
|
|||
|
|
if (component.currentFile && component.xmlContent) {
|
|||
|
|
const fileSelector = component.shadowRoot.getElementById('scenarioFile');
|
|||
|
|
if (fileSelector) {
|
|||
|
|
// 确认文件在列表中
|
|||
|
|
const fileExists = Array.from(fileSelector.options).some(opt => opt.value === component.currentFile);
|
|||
|
|
|
|||
|
|
if (fileExists) {
|
|||
|
|
// 设置选中的文件
|
|||
|
|
fileSelector.value = component.currentFile;
|
|||
|
|
|
|||
|
|
// 解析XML内容
|
|||
|
|
try {
|
|||
|
|
const parser = new DOMParser();
|
|||
|
|
component.xmlDoc = parser.parseFromString(component.xmlContent, 'text/xml');
|
|||
|
|
|
|||
|
|
// 更新内容显示
|
|||
|
|
const contentElement = component.shadowRoot.getElementById('fileContent');
|
|||
|
|
if (contentElement) {
|
|||
|
|
contentElement.innerHTML = '';
|
|||
|
|
component.renderVisualEditor(contentElement, component.xmlDoc);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果有编辑状态，恢复它
|
|||
|
|
if (component.isEdited) {
|
|||
|
|
const saveButton = component.shadowRoot.getElementById('saveConfig');
|
|||
|
|
if (saveButton) {
|
|||
|
|
saveButton.classList.add('modified');
|
|||
|
|
saveButton.title = '文件已修改，请保存';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('恢复XML内容失败:', error);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 文件不存在，清除状态
|
|||
|
|
component.currentFile = null;
|
|||
|
|
component.xmlContent = '';
|
|||
|
|
component.isEdited = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, 50); // 增加延迟确保DOM已经完全加载
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 组件销毁回调
|
|||
|
|
* @param {HTMLElement} component - RunEnvConfig组件实例
|
|||
|
|
*/
|
|||
|
|
export function disconnectedCallback(component) {
|
|||
|
|
// 移除可能的事件监听器
|
|||
|
|
const fileSelector = component.shadowRoot.getElementById('scenarioFile');
|
|||
|
|
if (fileSelector) {
|
|||
|
|
fileSelector.removeEventListener('change', component.handleFileSelectorChange);
|
|||
|
|
}
|
|||
|
|
}
|