271 lines
9.2 KiB
JavaScript
271 lines
9.2 KiB
JavaScript
/**
|
||
* 事件处理模块
|
||
* @type {module}
|
||
*/
|
||
import { loadScenarioFiles, loadFileContent, saveFileContent, createNewConfig } from './file-operations.js';
|
||
import { createModal, resetEditState, checkSaveNeeded } from './utils.js';
|
||
|
||
/**
|
||
* 初始化事件监听器
|
||
* @param {HTMLElement} component - 组件实例
|
||
*/
|
||
export function setupEventListeners(component) {
|
||
// 新建按钮
|
||
const newButton = component.shadowRoot.getElementById('newConfig');
|
||
newButton.addEventListener('click', async () => {
|
||
// 检查是否需要保存当前文件
|
||
if (await checkSaveNeeded(component)) {
|
||
showNewConfigDialog(component);
|
||
}
|
||
});
|
||
|
||
// 保存按钮
|
||
const saveButton = component.shadowRoot.getElementById('saveConfig');
|
||
saveButton.addEventListener('click', () => {
|
||
if (component.currentFile && component.xmlContent) {
|
||
saveFileContent(component, component.currentFile, component.xmlContent);
|
||
} else {
|
||
// 如果没有选择文件，则提示另存为
|
||
if (component.xmlContent) {
|
||
showSaveAsDialog(component);
|
||
}
|
||
}
|
||
});
|
||
|
||
// 另存为按钮
|
||
const saveAsButton = component.shadowRoot.getElementById('saveAsConfig');
|
||
saveAsButton.addEventListener('click', () => {
|
||
showSaveAsDialog(component);
|
||
});
|
||
|
||
// 刷新按钮
|
||
const refreshButton = component.shadowRoot.getElementById('refreshButton');
|
||
refreshButton.addEventListener('click', async () => {
|
||
// 检查是否需要保存当前文件
|
||
if (await checkSaveNeeded(component)) {
|
||
// 添加刷新中的样式
|
||
refreshButton.classList.add('refreshing');
|
||
|
||
try {
|
||
// 重新加载文件列表
|
||
await loadScenarioFiles(component);
|
||
|
||
// 清除编辑状态和内容
|
||
resetEditState(component.shadowRoot);
|
||
|
||
// 清空内容区域
|
||
component.xmlContent = '';
|
||
component.xmlDoc = null;
|
||
component.currentFile = null;
|
||
|
||
const contentElement = component.shadowRoot.getElementById('fileContent');
|
||
if (contentElement) {
|
||
contentElement.innerHTML = '<div class="no-file-selected">请选择一个运行环境配置文件查看内容</div>';
|
||
}
|
||
|
||
// 清空文件选择
|
||
const fileSelector = component.shadowRoot.getElementById('scenarioFile');
|
||
if (fileSelector) {
|
||
fileSelector.value = '';
|
||
}
|
||
} catch (error) {
|
||
console.error('刷新文件列表失败:', error);
|
||
alert('刷新文件列表失败: ' + error.message);
|
||
} finally {
|
||
// 移除刷新中的样式
|
||
setTimeout(() => {
|
||
refreshButton.classList.remove('refreshing');
|
||
}, 500);
|
||
}
|
||
}
|
||
// 如果用户点击取消，什么也不做，保留当前内容
|
||
});
|
||
|
||
// 文件选择下拉框
|
||
const fileSelector = component.shadowRoot.getElementById('scenarioFile');
|
||
fileSelector.addEventListener('change', async (e) => {
|
||
// 检查是否需要保存当前文件
|
||
if (await checkSaveNeeded(component)) {
|
||
const selectedFile = e.target.value;
|
||
if (selectedFile) {
|
||
loadFileContent(component, selectedFile);
|
||
} else {
|
||
component.currentFile = null;
|
||
component.xmlContent = '';
|
||
const contentElement = component.shadowRoot.getElementById('fileContent');
|
||
contentElement.innerHTML = '<div class="no-file-selected">请选择一个运行环境配置文件查看内容</div>';
|
||
component.isEdited = resetEditState(component.shadowRoot);
|
||
}
|
||
} else {
|
||
// 恢复之前的选择
|
||
fileSelector.value = component.currentFile || '';
|
||
}
|
||
});
|
||
|
||
// 添加fileSelectorChange处理器供外部调用
|
||
component.handleFileSelectorChange = async (e) => {
|
||
// 检查是否需要保存当前文件
|
||
if (await checkSaveNeeded(component)) {
|
||
const selectedFile = e.target.value;
|
||
if (selectedFile) {
|
||
loadFileContent(component, selectedFile);
|
||
}
|
||
} else {
|
||
// 恢复之前的选择
|
||
fileSelector.value = component.currentFile || '';
|
||
}
|
||
};
|
||
}
|
||
|
||
/**
|
||
* 显示新建配置对话框
|
||
* @param {HTMLElement} component - 组件实例
|
||
*/
|
||
export function showNewConfigDialog(component) {
|
||
// 创建表单容器
|
||
const formContent = document.createElement('div');
|
||
|
||
// 创建文件名输入组
|
||
const formGroup = document.createElement('div');
|
||
formGroup.className = 'form-group';
|
||
formGroup.style.marginBottom = '16px';
|
||
|
||
// 创建标签
|
||
const label = document.createElement('label');
|
||
label.htmlFor = 'fileName';
|
||
label.textContent = '文件名';
|
||
label.style.display = 'block';
|
||
label.style.marginBottom = '8px';
|
||
label.style.fontWeight = '500';
|
||
label.style.color = '#2d3748';
|
||
|
||
// 创建输入框
|
||
const input = document.createElement('input');
|
||
input.id = 'fileName';
|
||
input.className = 'form-control';
|
||
input.type = 'text';
|
||
input.value = 'NewConfig';
|
||
input.placeholder = '请输入文件名';
|
||
input.style.width = '100%';
|
||
input.style.padding = '10px 12px';
|
||
input.style.border = '1px solid #ddd';
|
||
input.style.borderRadius = '6px';
|
||
input.style.fontSize = '15px';
|
||
input.style.boxSizing = 'border-box';
|
||
|
||
// 添加提示信息
|
||
const helpText = document.createElement('div');
|
||
helpText.textContent = '如未指定后缀，将自动添加.sce后缀';
|
||
helpText.style.fontSize = '12px';
|
||
helpText.style.color = '#718096';
|
||
helpText.style.marginTop = '4px';
|
||
|
||
// 组装表单组
|
||
formGroup.appendChild(label);
|
||
formGroup.appendChild(input);
|
||
formGroup.appendChild(helpText);
|
||
formContent.appendChild(formGroup);
|
||
|
||
// 显示对话框
|
||
const modal = createModal(component.shadowRoot, '新建配置文件', formContent, () => {
|
||
let fileName = input.value.trim();
|
||
|
||
if (!fileName) {
|
||
alert('文件名不能为空');
|
||
return;
|
||
}
|
||
|
||
// 自动添加后缀
|
||
const ext = fileName.toLowerCase();
|
||
if (!ext.endsWith('.xml') && !ext.endsWith('.sce')) {
|
||
fileName += '.sce';
|
||
}
|
||
|
||
// 创建新文件
|
||
createNewConfig(component, fileName);
|
||
|
||
// 关闭模态框
|
||
modal.modal.remove();
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 显示另存为对话框
|
||
* @param {HTMLElement} component - 组件实例
|
||
*/
|
||
export function showSaveAsDialog(component) {
|
||
if (!component.xmlContent) {
|
||
alert('没有内容可保存');
|
||
return;
|
||
}
|
||
|
||
// 创建表单容器
|
||
const formContent = document.createElement('div');
|
||
|
||
// 创建文件名输入组
|
||
const formGroup = document.createElement('div');
|
||
formGroup.className = 'form-group';
|
||
formGroup.style.marginBottom = '16px';
|
||
|
||
// 创建标签
|
||
const label = document.createElement('label');
|
||
label.htmlFor = 'fileName';
|
||
label.textContent = '文件名';
|
||
label.style.display = 'block';
|
||
label.style.marginBottom = '8px';
|
||
label.style.fontWeight = '500';
|
||
label.style.color = '#2d3748';
|
||
|
||
// 获取原文件名（不含路径和后缀）
|
||
let defaultFileName = 'NewConfig';
|
||
if (component.currentFile) {
|
||
const fileName = component.currentFile.split('/').pop();
|
||
defaultFileName = fileName.substring(0, fileName.lastIndexOf('.')) || fileName;
|
||
}
|
||
|
||
// 创建输入框
|
||
const input = document.createElement('input');
|
||
input.id = 'fileName';
|
||
input.className = 'form-control';
|
||
input.type = 'text';
|
||
input.value = defaultFileName;
|
||
input.placeholder = '请输入文件名';
|
||
input.style.width = '100%';
|
||
input.style.padding = '10px 12px';
|
||
input.style.border = '1px solid #ddd';
|
||
input.style.borderRadius = '6px';
|
||
input.style.fontSize = '15px';
|
||
input.style.boxSizing = 'border-box';
|
||
|
||
// 添加提示信息
|
||
const helpText = document.createElement('div');
|
||
helpText.textContent = '如未指定后缀，将自动添加.sce后缀';
|
||
helpText.style.fontSize = '12px';
|
||
helpText.style.color = '#718096';
|
||
helpText.style.marginTop = '4px';
|
||
|
||
// 组装表单组
|
||
formGroup.appendChild(label);
|
||
formGroup.appendChild(input);
|
||
formGroup.appendChild(helpText);
|
||
formContent.appendChild(formGroup);
|
||
|
||
// 显示对话框
|
||
createModal(component.shadowRoot, '另存为', formContent, () => {
|
||
let fileName = input.value.trim();
|
||
|
||
if (!fileName) {
|
||
alert('文件名不能为空');
|
||
return;
|
||
}
|
||
|
||
// 自动添加后缀
|
||
const ext = fileName.toLowerCase();
|
||
if (!ext.endsWith('.xml') && !ext.endsWith('.sce')) {
|
||
fileName += '.sce';
|
||
}
|
||
|
||
// 直接使用文件名，saveFileContent 函数会处理成绝对路径
|
||
saveFileContent(component, fileName, component.xmlContent);
|
||
});
|
||
}
|