3295 lines
137 KiB
JavaScript
3295 lines
137 KiB
JavaScript
class RunEnvConfig extends HTMLElement {
|
||
constructor() {
|
||
super();
|
||
this.attachShadow({ mode: 'open' });
|
||
this.currentFile = null;
|
||
this.xmlContent = '';
|
||
this.scenarioFiles = [];
|
||
this.isEdited = false; // 是否已编辑
|
||
this.xmlDoc = null; // 当前XML文档对象
|
||
}
|
||
|
||
async connectedCallback() {
|
||
// 先渲染UI
|
||
this.render();
|
||
this.setupEventListeners();
|
||
|
||
// 然后加载文件列表
|
||
await this.loadScenarioFiles();
|
||
|
||
// 检查是否有renderComplete方法，如果有则调用
|
||
setTimeout(() => {
|
||
if (typeof this.renderComplete === 'function') {
|
||
this.renderComplete();
|
||
}
|
||
}, 100);
|
||
}
|
||
|
||
async loadScenarioFiles() {
|
||
// 设置按钮为刷新中状态
|
||
const refreshButton = this.shadowRoot.getElementById('refreshButton');
|
||
if (refreshButton) {
|
||
refreshButton.classList.add('refreshing');
|
||
}
|
||
|
||
let retryCount = 0;
|
||
const maxRetries = 3; // 最多重试3次
|
||
|
||
const tryLoadFiles = async () => {
|
||
try {
|
||
const response = await fetch('/api/scenario-files');
|
||
|
||
if (!response.ok) {
|
||
throw new Error(`服务器返回错误: ${response.status} ${response.statusText}`);
|
||
}
|
||
|
||
const files = await response.json();
|
||
this.scenarioFiles = files;
|
||
|
||
// 更新文件选择器
|
||
this.updateFileSelector();
|
||
|
||
return true;
|
||
} catch (error) {
|
||
if (retryCount < maxRetries) {
|
||
retryCount++;
|
||
// 指数级退避重试
|
||
const retryDelay = Math.pow(2, retryCount) * 500;
|
||
await new Promise(resolve => setTimeout(resolve, retryDelay));
|
||
return tryLoadFiles();
|
||
}
|
||
|
||
alert(`加载文件列表失败: ${error.message}`);
|
||
return false;
|
||
} finally {
|
||
// 无论成功失败，移除刷新中状态
|
||
if (refreshButton) {
|
||
refreshButton.classList.remove('refreshing');
|
||
}
|
||
}
|
||
};
|
||
|
||
const success = await tryLoadFiles();
|
||
|
||
// 检查是否是用户通过刷新按钮手动触发的刷新
|
||
const isManualRefresh = document.activeElement === refreshButton;
|
||
|
||
if (success && isManualRefresh) {
|
||
// 只有在用户明确点击刷新按钮时才清空当前文件
|
||
this.currentFile = null;
|
||
this.xmlContent = '';
|
||
this.updateFileContent();
|
||
this.resetEditState();
|
||
|
||
// 更新文件选择器，确保没有文件被选中
|
||
const fileSelector = this.shadowRoot.getElementById('scenarioFile');
|
||
if (fileSelector) {
|
||
fileSelector.value = '';
|
||
}
|
||
}
|
||
|
||
return success;
|
||
}
|
||
|
||
updateFileSelector() {
|
||
const fileSelector = this.shadowRoot.getElementById('scenarioFile');
|
||
if (fileSelector) {
|
||
// 清除现有选项，保留第一个
|
||
while (fileSelector.options.length > 1) {
|
||
fileSelector.remove(1);
|
||
}
|
||
|
||
// 添加文件选项
|
||
this.scenarioFiles.forEach(file => {
|
||
const option = document.createElement('option');
|
||
option.value = file.path;
|
||
option.textContent = file.name;
|
||
fileSelector.appendChild(option);
|
||
});
|
||
|
||
// 验证文件选择器选项
|
||
const options = Array.from(fileSelector.options);
|
||
options.forEach((opt, index) => {
|
||
if (index === 0) return; // 跳过第一个空选项
|
||
});
|
||
} else {
|
||
console.log('未找到文件选择器元素');
|
||
}
|
||
}
|
||
|
||
async loadFileContent(filePath) {
|
||
try {
|
||
const response = await fetch(`/api/file-content?path=${encodeURIComponent(filePath)}`);
|
||
if (!response.ok) {
|
||
throw new Error(`加载文件内容失败: ${response.status} ${response.statusText}`);
|
||
}
|
||
|
||
this.xmlContent = await response.text();
|
||
this.currentFile = filePath;
|
||
|
||
// 检查内容是否为空
|
||
if (!this.xmlContent.trim()) {
|
||
// 如果是.sce文件且内容为空，则报文件内容为空的错误
|
||
if (filePath.toLowerCase().endsWith('.sce')) {
|
||
throw new Error('文件内容为空');
|
||
}
|
||
}
|
||
|
||
this.updateFileContent();
|
||
|
||
// 重置编辑状态，因为刚刚加载了新文件
|
||
this.resetEditState();
|
||
} catch (error) {
|
||
console.error('加载文件内容失败:', error);
|
||
this.xmlContent = '<!-- 加载文件内容失败 -->';
|
||
this.updateFileContent();
|
||
}
|
||
}
|
||
|
||
// 更新文件内容显示
|
||
updateFileContent() {
|
||
const contentElement = this.shadowRoot.getElementById('fileContent');
|
||
|
||
if (!contentElement) {
|
||
return;
|
||
}
|
||
|
||
if (!this.xmlContent) {
|
||
contentElement.innerHTML = '<div class="no-file-selected">请选择一个运行环境配置文件查看内容</div>';
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// 尝试解析XML
|
||
const parser = new DOMParser();
|
||
this.xmlDoc = parser.parseFromString(this.xmlContent, 'text/xml');
|
||
|
||
// 检查解析错误
|
||
const parseError = this.xmlDoc.querySelector('parsererror');
|
||
if (parseError) {
|
||
contentElement.innerHTML = `<pre>${this.escapeHtml(this.xmlContent)}</pre>`;
|
||
return;
|
||
}
|
||
|
||
// 创建可视化编辑器
|
||
contentElement.innerHTML = '';
|
||
this.renderVisualEditor(contentElement, this.xmlDoc);
|
||
} catch (error) {
|
||
contentElement.innerHTML = `<pre>${this.escapeHtml(this.xmlContent)}</pre>`;
|
||
}
|
||
}
|
||
|
||
// 渲染可视化编辑界面
|
||
renderVisualEditor(container, xmlDoc) {
|
||
// 清空容器
|
||
container.innerHTML = '';
|
||
|
||
// 创建编辑器样式
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
.visual-editor {
|
||
font-family: Arial, sans-serif;
|
||
color: #333;
|
||
}
|
||
|
||
.editor-section {
|
||
margin-bottom: 20px;
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 4px;
|
||
padding: 16px;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.section-title {
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
margin-bottom: 16px;
|
||
color: #444;
|
||
border-bottom: 1px solid #eee;
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
.property-group {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||
gap: 16px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.property-item {
|
||
margin-bottom: 12px;
|
||
background-color: #f9f9f9;
|
||
padding: 10px;
|
||
border-radius: 4px;
|
||
border: 1px solid #eee;
|
||
}
|
||
|
||
.property-label {
|
||
display: block;
|
||
font-size: 14px;
|
||
margin-bottom: 6px;
|
||
color: #555;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.property-input {
|
||
width: 100%;
|
||
padding: 8px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.property-input:focus {
|
||
border-color: #7986E7;
|
||
outline: none;
|
||
box-shadow: 0 0 0 2px rgba(121, 134, 231, 0.2);
|
||
}
|
||
|
||
.add-button {
|
||
background-color: #7986E7;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
padding: 8px 12px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.add-button:hover {
|
||
background-color: #6875D6;
|
||
}
|
||
|
||
.list-item {
|
||
border: 1px solid #eee;
|
||
border-radius: 4px;
|
||
padding: 12px;
|
||
margin-bottom: 12px;
|
||
background-color: #f9f9f9;
|
||
}
|
||
|
||
.list-item-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.list-item-title {
|
||
font-weight: bold;
|
||
color: #555;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.list-item-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.action-icon {
|
||
cursor: pointer;
|
||
color: #7986E7;
|
||
font-size: 18px;
|
||
width: 24px;
|
||
height: 24px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.action-icon:hover {
|
||
color: #6875D6;
|
||
background-color: #f0f0f0;
|
||
}
|
||
|
||
/* 模态对话框样式 */
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
z-index: 1000;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.modal-content {
|
||
background-color: white;
|
||
border-radius: 6px;
|
||
padding: 24px;
|
||
width: 500px;
|
||
max-width: 90%;
|
||
max-height: 90vh;
|
||
overflow-y: auto;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.modal-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
margin-bottom: 16px;
|
||
color: #333;
|
||
}
|
||
|
||
.modal-form {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.form-row {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.form-label {
|
||
display: block;
|
||
margin-bottom: 6px;
|
||
font-weight: bold;
|
||
color: #555;
|
||
}
|
||
|
||
.form-input {
|
||
width: 100%;
|
||
padding: 8px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.form-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 12px;
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.modal-button {
|
||
padding: 8px 16px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
border: none;
|
||
}
|
||
|
||
.cancel-button {
|
||
background-color: #f0f0f0;
|
||
color: #333;
|
||
}
|
||
|
||
.submit-button {
|
||
background-color: #7986E7;
|
||
color: white;
|
||
}
|
||
|
||
.submit-button:hover {
|
||
background-color: #6875D6;
|
||
}
|
||
`;
|
||
|
||
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部分
|
||
this.renderEnvironmentSection(visualEditor, rootElement);
|
||
|
||
// 渲染Console输出和日志部分
|
||
this.renderConsoleAndLogSection(visualEditor, rootElement);
|
||
|
||
// 渲染ModelGroup部分
|
||
this.renderModelGroupsSection(visualEditor, rootElement);
|
||
|
||
// 渲染Services部分
|
||
this.renderServicesSection(visualEditor, rootElement);
|
||
} else {
|
||
// 不是Scenario根元素，显示错误信息
|
||
visualEditor.innerHTML = `<div style="color: red; padding: 16px;">
|
||
无法编辑：XML文档的根元素不是Scenario。
|
||
请确保XML文档的根元素是Scenario。
|
||
</div>`;
|
||
}
|
||
|
||
container.appendChild(style);
|
||
container.appendChild(visualEditor);
|
||
|
||
// 自动保存配置到XML
|
||
this.autoSaveToXml();
|
||
}
|
||
|
||
// 自动保存表单内容到XML
|
||
autoSaveToXml() {
|
||
// 为所有输入框添加change事件
|
||
const inputs = this.shadowRoot.querySelectorAll('.property-input');
|
||
inputs.forEach(input => {
|
||
input.addEventListener('change', () => {
|
||
this.updateXmlFromVisualEditor();
|
||
});
|
||
});
|
||
}
|
||
|
||
// 创建模态对话框
|
||
createModal(title, content, confirmCallback) {
|
||
// 创建模态框容器
|
||
const modalOverlay = document.createElement('div');
|
||
modalOverlay.className = 'modal-overlay active';
|
||
modalOverlay.style.position = 'fixed';
|
||
modalOverlay.style.top = '0';
|
||
modalOverlay.style.left = '0';
|
||
modalOverlay.style.right = '0';
|
||
modalOverlay.style.bottom = '0';
|
||
modalOverlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
|
||
modalOverlay.style.display = 'flex';
|
||
modalOverlay.style.alignItems = 'center';
|
||
modalOverlay.style.justifyContent = 'center';
|
||
modalOverlay.style.zIndex = '1000';
|
||
|
||
// 创建模态框
|
||
const modal = document.createElement('div');
|
||
modal.className = 'modal-content';
|
||
modal.style.backgroundColor = 'white';
|
||
modal.style.borderRadius = '12px';
|
||
modal.style.padding = '24px';
|
||
modal.style.width = '500px';
|
||
modal.style.maxWidth = '90%';
|
||
modal.style.maxHeight = '90vh';
|
||
modal.style.overflowY = 'auto';
|
||
modal.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
|
||
|
||
// 创建模态框头部
|
||
const modalHeader = document.createElement('div');
|
||
modalHeader.className = 'modal-header';
|
||
modalHeader.style.display = 'flex';
|
||
modalHeader.style.justifyContent = 'space-between';
|
||
modalHeader.style.alignItems = 'center';
|
||
modalHeader.style.marginBottom = '16px';
|
||
|
||
// 创建标题
|
||
const modalTitle = document.createElement('h2');
|
||
modalTitle.className = 'modal-title';
|
||
modalTitle.textContent = title;
|
||
modalTitle.style.fontSize = '20px';
|
||
modalTitle.style.fontWeight = 'bold';
|
||
modalTitle.style.color = '#2c3e50';
|
||
modalTitle.style.margin = '0';
|
||
|
||
// 关闭按钮
|
||
const closeBtn = document.createElement('button');
|
||
closeBtn.className = 'close-btn';
|
||
closeBtn.innerHTML = '×';
|
||
closeBtn.style.background = 'none';
|
||
closeBtn.style.border = 'none';
|
||
closeBtn.style.fontSize = '24px';
|
||
closeBtn.style.cursor = 'pointer';
|
||
closeBtn.style.color = '#718096';
|
||
closeBtn.style.lineHeight = '1';
|
||
closeBtn.style.padding = '0';
|
||
|
||
// 添加关闭按钮事件
|
||
closeBtn.onclick = () => {
|
||
modalOverlay.remove();
|
||
};
|
||
|
||
// 组装头部
|
||
modalHeader.appendChild(modalTitle);
|
||
modalHeader.appendChild(closeBtn);
|
||
|
||
// 创建表单容器
|
||
const formContainer = document.createElement('form');
|
||
formContainer.style.marginBottom = '0';
|
||
|
||
// 添加内容
|
||
if (content) {
|
||
// 如果内容已经是DOM元素，直接使用
|
||
if (content instanceof HTMLElement) {
|
||
// 为内容添加样式
|
||
content.style.margin = '0 0 20px 0';
|
||
formContainer.appendChild(content);
|
||
} else {
|
||
// 否则创建新的内容容器
|
||
const contentDiv = document.createElement('div');
|
||
contentDiv.innerHTML = content;
|
||
contentDiv.style.margin = '0 0 20px 0';
|
||
formContainer.appendChild(contentDiv);
|
||
}
|
||
}
|
||
|
||
// 创建按钮容器
|
||
const modalFooter = document.createElement('div');
|
||
modalFooter.className = 'modal-footer';
|
||
modalFooter.style.display = 'flex';
|
||
modalFooter.style.justifyContent = 'flex-end';
|
||
modalFooter.style.gap = '12px';
|
||
modalFooter.style.marginTop = '24px';
|
||
|
||
// 取消按钮
|
||
const cancelButton = document.createElement('button');
|
||
cancelButton.className = 'btn btn-secondary';
|
||
cancelButton.type = 'button';
|
||
cancelButton.textContent = '取消';
|
||
cancelButton.style.padding = '10px 16px';
|
||
cancelButton.style.borderRadius = '6px';
|
||
cancelButton.style.fontSize = '15px';
|
||
cancelButton.style.cursor = 'pointer';
|
||
cancelButton.style.transition = 'all 0.3s';
|
||
cancelButton.style.backgroundColor = '#f8f9fa';
|
||
cancelButton.style.border = '1px solid #ddd';
|
||
cancelButton.style.color = '#718096';
|
||
|
||
// 添加取消按钮事件
|
||
cancelButton.onclick = () => {
|
||
modalOverlay.remove();
|
||
};
|
||
|
||
// 确定按钮
|
||
const confirmButton = document.createElement('button');
|
||
confirmButton.className = 'btn btn-primary';
|
||
confirmButton.type = 'button';
|
||
confirmButton.textContent = '确定';
|
||
confirmButton.style.padding = '10px 16px';
|
||
confirmButton.style.borderRadius = '6px';
|
||
confirmButton.style.fontSize = '15px';
|
||
confirmButton.style.cursor = 'pointer';
|
||
confirmButton.style.transition = 'all 0.3s';
|
||
confirmButton.style.background = 'linear-gradient(135deg, #667eea, #764ba2)';
|
||
confirmButton.style.border = 'none';
|
||
confirmButton.style.color = 'white';
|
||
|
||
// 添加确定按钮事件
|
||
confirmButton.onclick = () => {
|
||
if (confirmCallback) {
|
||
confirmCallback();
|
||
modalOverlay.remove(); // 确保回调执行后关闭对话框
|
||
}
|
||
};
|
||
|
||
// 点击背景关闭
|
||
modalOverlay.onclick = (e) => {
|
||
if (e.target === modalOverlay) {
|
||
modalOverlay.remove();
|
||
}
|
||
};
|
||
|
||
// 组装底部按钮
|
||
modalFooter.appendChild(cancelButton);
|
||
modalFooter.appendChild(confirmButton);
|
||
|
||
// 组装表单
|
||
formContainer.appendChild(modalFooter);
|
||
|
||
// 阻止表单提交默认行为
|
||
formContainer.onsubmit = (e) => {
|
||
e.preventDefault();
|
||
if (confirmCallback) {
|
||
confirmCallback();
|
||
modalOverlay.remove(); // 确保回调执行后关闭对话框
|
||
}
|
||
return false;
|
||
};
|
||
|
||
// 组装整个模态框
|
||
modal.appendChild(modalHeader);
|
||
modal.appendChild(formContainer);
|
||
modalOverlay.appendChild(modal);
|
||
|
||
// 添加到DOM
|
||
this.shadowRoot.appendChild(modalOverlay);
|
||
|
||
// 返回引用
|
||
return {
|
||
modal: modalOverlay,
|
||
confirmButton: confirmButton
|
||
};
|
||
}
|
||
|
||
// 渲染Environment部分
|
||
renderEnvironmentSection(container, rootElement) {
|
||
const envElement = rootElement.querySelector('Environment');
|
||
|
||
if (!envElement) {
|
||
return; // 如果找不到Environment元素，直接返回
|
||
}
|
||
|
||
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';
|
||
|
||
// 获取并显示所有Environment属性
|
||
Array.from(envElement.attributes).forEach(attr => {
|
||
const propertyItem = document.createElement('div');
|
||
propertyItem.className = 'property-item';
|
||
|
||
const label = document.createElement('label');
|
||
label.className = 'property-label';
|
||
label.textContent = attr.name;
|
||
|
||
// 对CPUAffinity属性使用特殊处理
|
||
if (attr.name === 'CPUAffinity') {
|
||
const inputContainer = document.createElement('div');
|
||
inputContainer.style.display = 'flex';
|
||
inputContainer.style.position = 'relative';
|
||
|
||
const input = document.createElement('input');
|
||
input.className = 'property-input';
|
||
input.type = 'text';
|
||
input.value = attr.value;
|
||
input.dataset.path = `Environment@${attr.name}`;
|
||
input.style.flexGrow = '1';
|
||
input.title = 'CPU亲和性';
|
||
input.addEventListener('change', () => this.markEdited());
|
||
|
||
const dropdownButton = document.createElement('button');
|
||
dropdownButton.className = 'dropdown-button';
|
||
dropdownButton.type = 'button'; // 确保按钮类型为button
|
||
dropdownButton.innerHTML = '▼';
|
||
dropdownButton.style.width = '30px';
|
||
dropdownButton.style.border = '1px solid #ddd';
|
||
dropdownButton.style.borderLeft = 'none';
|
||
dropdownButton.style.borderRadius = '0 4px 4px 0';
|
||
dropdownButton.style.backgroundColor = '#f5f5f5';
|
||
dropdownButton.style.cursor = 'pointer';
|
||
|
||
// 创建下拉框容器
|
||
const dropdown = document.createElement('div');
|
||
dropdown.className = 'cpu-dropdown';
|
||
dropdown.style.position = 'absolute';
|
||
dropdown.style.top = '100%';
|
||
dropdown.style.left = '0';
|
||
dropdown.style.right = '0';
|
||
dropdown.style.backgroundColor = 'white';
|
||
dropdown.style.border = '1px solid #ddd';
|
||
dropdown.style.borderRadius = '4px';
|
||
dropdown.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
|
||
dropdown.style.zIndex = '50'; // 提高z-index确保在最上层
|
||
dropdown.style.padding = '10px';
|
||
dropdown.style.display = 'none';
|
||
|
||
// 生成CPU核心选项
|
||
const cpuCount = 16; // 假设最多16个核心
|
||
|
||
const selectedCores = attr.value.split(',').map(core => parseInt(core.trim())).filter(core => !isNaN(core));
|
||
|
||
for (let i = 0; i < cpuCount; i++) {
|
||
const checkboxContainer = document.createElement('div');
|
||
checkboxContainer.style.marginBottom = '6px';
|
||
|
||
const checkbox = document.createElement('input');
|
||
checkbox.type = 'checkbox';
|
||
checkbox.id = `cpu-${i}`;
|
||
checkbox.value = i;
|
||
checkbox.checked = selectedCores.includes(i);
|
||
checkbox.style.marginRight = '6px';
|
||
|
||
const checkboxLabel = document.createElement('label');
|
||
checkboxLabel.htmlFor = `cpu-${i}`;
|
||
checkboxLabel.textContent = `CPU ${i}`;
|
||
|
||
checkbox.addEventListener('change', () => {
|
||
// 获取所有选中的核心
|
||
const checkedCores = Array.from(dropdown.querySelectorAll('input[type="checkbox"]:checked'))
|
||
.map(cb => cb.value)
|
||
.sort((a, b) => a - b);
|
||
|
||
// 更新输入框的值
|
||
input.value = checkedCores.join(',');
|
||
input.dispatchEvent(new Event('change'));
|
||
});
|
||
|
||
checkboxContainer.appendChild(checkbox);
|
||
checkboxContainer.appendChild(checkboxLabel);
|
||
dropdown.appendChild(checkboxContainer);
|
||
}
|
||
|
||
// 添加应用和取消按钮
|
||
const buttonContainer = document.createElement('div');
|
||
buttonContainer.style.display = 'flex';
|
||
buttonContainer.style.justifyContent = 'flex-end';
|
||
buttonContainer.style.marginTop = '10px';
|
||
buttonContainer.style.gap = '8px';
|
||
|
||
const closeButton = document.createElement('button');
|
||
closeButton.textContent = '关闭';
|
||
closeButton.style.padding = '6px 12px';
|
||
closeButton.style.backgroundColor = '#f0f0f0';
|
||
closeButton.style.border = '1px solid #ddd';
|
||
closeButton.style.borderRadius = '4px';
|
||
closeButton.style.cursor = 'pointer';
|
||
|
||
closeButton.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
dropdown.style.display = 'none';
|
||
});
|
||
|
||
buttonContainer.appendChild(closeButton);
|
||
dropdown.appendChild(buttonContainer);
|
||
|
||
// 使用更可靠的方法显示下拉菜单
|
||
const toggleDropdown = (e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
if (dropdown.style.display === 'none' || !dropdown.style.display) {
|
||
dropdown.style.display = 'block';
|
||
// 添加全局一次性点击事件，用于关闭下拉框
|
||
setTimeout(() => {
|
||
const closeDropdown = (event) => {
|
||
if (!dropdown.contains(event.target) && event.target !== dropdownButton) {
|
||
dropdown.style.display = 'none';
|
||
document.removeEventListener('click', closeDropdown);
|
||
}
|
||
};
|
||
document.addEventListener('click', closeDropdown);
|
||
}, 0);
|
||
} else {
|
||
dropdown.style.display = 'none';
|
||
}
|
||
};
|
||
|
||
// 点击下拉按钮时显示或隐藏下拉框
|
||
dropdownButton.addEventListener('click', toggleDropdown);
|
||
|
||
inputContainer.appendChild(input);
|
||
inputContainer.appendChild(dropdownButton);
|
||
inputContainer.appendChild(dropdown);
|
||
|
||
propertyItem.appendChild(label);
|
||
propertyItem.appendChild(inputContainer);
|
||
} else if (attr.name === 'BaseFrequency') {
|
||
// 对数字类型的属性使用number类型输入框
|
||
const input = document.createElement('input');
|
||
input.className = 'property-input';
|
||
input.type = 'number';
|
||
input.min = '0';
|
||
input.value = attr.value;
|
||
input.dataset.path = `Environment@${attr.name}`;
|
||
input.title = '仿真运行基础频率，单位Hz';
|
||
input.addEventListener('change', () => this.markEdited());
|
||
|
||
propertyItem.appendChild(label);
|
||
propertyItem.appendChild(input);
|
||
} else if (attr.name === 'OSName') {
|
||
const input = document.createElement('input');
|
||
input.className = 'property-input';
|
||
input.type = 'text';
|
||
input.value = attr.value;
|
||
input.dataset.path = `Environment@${attr.name}`;
|
||
input.title = '操作系统名称';
|
||
input.addEventListener('change', () => this.markEdited());
|
||
|
||
propertyItem.appendChild(label);
|
||
propertyItem.appendChild(input);
|
||
} else if (attr.name === 'Version') {
|
||
const input = document.createElement('input');
|
||
input.className = 'property-input';
|
||
input.type = 'text';
|
||
input.value = attr.value;
|
||
input.dataset.path = `Environment@${attr.name}`;
|
||
input.title = '操作系统版本';
|
||
input.addEventListener('change', () => this.markEdited());
|
||
|
||
propertyItem.appendChild(label);
|
||
propertyItem.appendChild(input);
|
||
} else if (attr.name === 'RTXVersion') {
|
||
const input = document.createElement('input');
|
||
input.className = 'property-input';
|
||
input.type = 'text';
|
||
input.value = attr.value;
|
||
input.dataset.path = `Environment@${attr.name}`;
|
||
input.title = '实时内核版本';
|
||
input.addEventListener('change', () => this.markEdited());
|
||
|
||
propertyItem.appendChild(label);
|
||
propertyItem.appendChild(input);
|
||
} else if (attr.name === 'WorkPath') {
|
||
const input = document.createElement('input');
|
||
input.className = 'property-input';
|
||
input.type = 'text';
|
||
input.value = attr.value;
|
||
input.dataset.path = `Environment@${attr.name}`;
|
||
input.title = '仿真工作路径，XNCore环境变量所在路径';
|
||
input.addEventListener('change', () => this.markEdited());
|
||
|
||
propertyItem.appendChild(label);
|
||
propertyItem.appendChild(input);
|
||
} else if (attr.name === 'ModelsPath') {
|
||
const input = document.createElement('input');
|
||
input.className = 'property-input';
|
||
input.type = 'text';
|
||
input.value = attr.value;
|
||
input.dataset.path = `Environment@${attr.name}`;
|
||
input.title = '模型相对路径，相对于仿真工作路径';
|
||
input.addEventListener('change', () => this.markEdited());
|
||
|
||
propertyItem.appendChild(label);
|
||
propertyItem.appendChild(input);
|
||
} else if (attr.name === 'ServicesPath') {
|
||
const input = document.createElement('input');
|
||
input.className = 'property-input';
|
||
input.type = 'text';
|
||
input.value = attr.value;
|
||
input.dataset.path = `Environment@${attr.name}`;
|
||
input.title = '服务相对路径，相对于仿真工作路径';
|
||
input.addEventListener('change', () => this.markEdited());
|
||
|
||
propertyItem.appendChild(label);
|
||
propertyItem.appendChild(input);
|
||
} else if (attr.name === 'DomainID') {
|
||
// 对数字类型的属性使用number类型输入框
|
||
const input = document.createElement('input');
|
||
input.className = 'property-input';
|
||
input.type = 'number';
|
||
input.min = '0';
|
||
input.value = attr.value;
|
||
input.dataset.path = `Environment@${attr.name}`;
|
||
input.title = 'DDS通信域ID';
|
||
input.addEventListener('change', () => this.markEdited());
|
||
|
||
propertyItem.appendChild(label);
|
||
propertyItem.appendChild(input);
|
||
} else {
|
||
const input = document.createElement('input');
|
||
input.className = 'property-input';
|
||
input.type = 'text';
|
||
input.value = attr.value;
|
||
input.dataset.path = `Environment@${attr.name}`;
|
||
input.addEventListener('change', () => this.markEdited());
|
||
|
||
propertyItem.appendChild(label);
|
||
propertyItem.appendChild(input);
|
||
}
|
||
|
||
propertyGroup.appendChild(propertyItem);
|
||
});
|
||
|
||
section.appendChild(propertyGroup);
|
||
|
||
// 添加"添加新属性"按钮
|
||
const addButton = document.createElement('button');
|
||
addButton.className = 'add-button';
|
||
addButton.textContent = '添加新属性';
|
||
addButton.title = '添加新的运行环境属性';
|
||
addButton.addEventListener('click', () => this.showAddPropertyDialog('Environment'));
|
||
section.appendChild(addButton);
|
||
|
||
container.appendChild(section);
|
||
}
|
||
|
||
// 添加新属性对话框
|
||
showAddPropertyDialog(elementName) {
|
||
// 创建表单内容
|
||
const formContent = document.createElement('div');
|
||
formContent.className = 'modal-form';
|
||
|
||
// 属性名输入
|
||
const nameRow = document.createElement('div');
|
||
nameRow.className = 'form-row';
|
||
|
||
const nameLabel = document.createElement('label');
|
||
nameLabel.className = 'form-label';
|
||
nameLabel.textContent = '属性名称';
|
||
|
||
const nameInput = document.createElement('input');
|
||
nameInput.className = 'form-input';
|
||
nameInput.type = 'text';
|
||
nameInput.placeholder = '请输入属性名称';
|
||
|
||
nameRow.appendChild(nameLabel);
|
||
nameRow.appendChild(nameInput);
|
||
formContent.appendChild(nameRow);
|
||
|
||
// 属性值输入
|
||
const valueRow = document.createElement('div');
|
||
valueRow.className = 'form-row';
|
||
|
||
const valueLabel = document.createElement('label');
|
||
valueLabel.className = 'form-label';
|
||
valueLabel.textContent = '属性值';
|
||
|
||
const valueInput = document.createElement('input');
|
||
valueInput.className = 'form-input';
|
||
valueInput.type = 'text';
|
||
valueInput.placeholder = '请输入属性值';
|
||
|
||
valueRow.appendChild(valueLabel);
|
||
valueRow.appendChild(valueInput);
|
||
formContent.appendChild(valueRow);
|
||
|
||
// 显示对话框
|
||
this.createModal('添加新属性', formContent, () => {
|
||
const propertyName = nameInput.value.trim();
|
||
const propertyValue = valueInput.value;
|
||
|
||
if (propertyName) {
|
||
this.addNewProperty(elementName, propertyName, propertyValue);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 添加新属性
|
||
addNewProperty(elementName, propertyName, propertyValue) {
|
||
// 更新UI
|
||
const section = Array.from(this.shadowRoot.querySelectorAll('.section-title')).find(el => {
|
||
if (elementName === 'Environment' && el.textContent === '环境配置') return true;
|
||
return false;
|
||
})?.parentElement;
|
||
|
||
if (section) {
|
||
const propertyGroup = section.querySelector('.property-group');
|
||
if (propertyGroup) {
|
||
const propertyItem = document.createElement('div');
|
||
propertyItem.className = 'property-item';
|
||
|
||
const label = document.createElement('label');
|
||
label.className = 'property-label';
|
||
label.textContent = propertyName;
|
||
|
||
const input = document.createElement('input');
|
||
input.className = 'property-input';
|
||
input.type = 'text';
|
||
input.value = propertyValue;
|
||
input.dataset.path = `${elementName}@${propertyName}`;
|
||
input.dataset.isNew = 'true';
|
||
input.addEventListener('change', () => this.markEdited());
|
||
|
||
propertyItem.appendChild(label);
|
||
propertyItem.appendChild(input);
|
||
propertyGroup.appendChild(propertyItem);
|
||
|
||
this.markEdited();
|
||
this.updateXmlFromVisualEditor(true); // 静默更新XML
|
||
}
|
||
}
|
||
}
|
||
|
||
// 全局变量，用于存储CPU亲和性设置
|
||
updateCPUAffinityOptions() {
|
||
// 从环境配置中获取CPUAffinity的值
|
||
const envElement = this.xmlDoc.querySelector('Environment');
|
||
if (!envElement) return [];
|
||
|
||
const cpuAffinity = envElement.getAttribute('CPUAffinity') || '0';
|
||
const availableCores = cpuAffinity.split(',').map(core => parseInt(core.trim())).filter(core => !isNaN(core));
|
||
return availableCores;
|
||
}
|
||
|
||
// 渲染模型组部分
|
||
renderModelGroupsSection(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);
|
||
|
||
// 获取所有ModelGroup元素
|
||
const modelGroups = rootElement.querySelectorAll('ModelGroup');
|
||
|
||
if (modelGroups.length === 0) {
|
||
const emptyMsg = document.createElement('div');
|
||
emptyMsg.textContent = '没有找到模型组配置';
|
||
emptyMsg.style.color = '#888';
|
||
emptyMsg.style.fontStyle = 'italic';
|
||
emptyMsg.style.marginBottom = '16px';
|
||
section.appendChild(emptyMsg);
|
||
} else {
|
||
// 为每个ModelGroup创建一个列表项
|
||
modelGroups.forEach((modelGroup, index) => {
|
||
const groupItem = document.createElement('div');
|
||
groupItem.className = 'list-item';
|
||
groupItem.dataset.index = index;
|
||
|
||
// 创建组标题和操作按钮
|
||
const header = document.createElement('div');
|
||
header.className = 'list-item-header';
|
||
|
||
const groupTitle = document.createElement('div');
|
||
groupTitle.className = 'list-item-title';
|
||
groupTitle.textContent = modelGroup.getAttribute('Name') || `模型组 ${index + 1}`;
|
||
|
||
const actions = document.createElement('div');
|
||
actions.className = 'list-item-actions';
|
||
|
||
const deleteButton = document.createElement('button');
|
||
deleteButton.className = 'action-icon';
|
||
deleteButton.title = '删除模型组';
|
||
deleteButton.style.border = 'none';
|
||
deleteButton.style.background = 'none';
|
||
deleteButton.style.cursor = 'pointer';
|
||
deleteButton.style.padding = '4px';
|
||
deleteButton.style.display = 'flex';
|
||
deleteButton.style.alignItems = 'center';
|
||
deleteButton.style.justifyContent = 'center';
|
||
|
||
const deleteImg = document.createElement('img');
|
||
deleteImg.src = 'assets/icons/png/delete_b.png';
|
||
deleteImg.alt = '删除';
|
||
deleteImg.style.width = '16px';
|
||
deleteImg.style.height = '16px';
|
||
|
||
deleteButton.appendChild(deleteImg);
|
||
deleteButton.addEventListener('click', () => this.deleteModelGroup(index));
|
||
|
||
actions.appendChild(deleteButton);
|
||
|
||
header.appendChild(groupTitle);
|
||
header.appendChild(actions);
|
||
groupItem.appendChild(header);
|
||
|
||
// 显示模型组属性
|
||
const propertiesContainer = document.createElement('div');
|
||
propertiesContainer.className = 'property-group';
|
||
propertiesContainer.style.marginTop = '12px';
|
||
|
||
// 获取可用的CPU核心选项
|
||
const availableCores = this.updateCPUAffinityOptions();
|
||
|
||
Array.from(modelGroup.attributes).forEach(attr => {
|
||
const propertyItem = document.createElement('div');
|
||
propertyItem.className = 'property-item';
|
||
|
||
const label = document.createElement('label');
|
||
label.className = 'property-label';
|
||
label.textContent = attr.name;
|
||
|
||
// 根据属性名使用不同的输入控件
|
||
if (attr.name === 'FreqGroup') {
|
||
// FreqGroup使用限制范围的数字输入框
|
||
const input = document.createElement('input');
|
||
input.className = 'property-input';
|
||
input.type = 'number';
|
||
input.min = '0';
|
||
input.max = '6';
|
||
input.value = attr.value;
|
||
input.dataset.path = `ModelGroup[${index}]@${attr.name}`;
|
||
input.title = '频率组，取值范围0-6';
|
||
input.addEventListener('change', () => {
|
||
// 确保值在有效范围内
|
||
if (parseInt(input.value) > 6) {
|
||
input.value = '6';
|
||
}
|
||
this.markEdited();
|
||
});
|
||
|
||
propertyItem.appendChild(label);
|
||
propertyItem.appendChild(input);
|
||
} else if (attr.name === 'Priority') {
|
||
// Priority使用限制范围的数字输入框
|
||
const input = document.createElement('input');
|
||
input.className = 'property-input';
|
||
input.type = 'number';
|
||
input.min = '0';
|
||
input.max = '99';
|
||
input.value = attr.value;
|
||
input.dataset.path = `ModelGroup[${index}]@${attr.name}`;
|
||
input.title = '线程优先级，取值范围0-99';
|
||
input.addEventListener('change', () => {
|
||
// 确保值在有效范围内
|
||
if (parseInt(input.value) > 99) {
|
||
input.value = '99';
|
||
}
|
||
this.markEdited();
|
||
});
|
||
|
||
propertyItem.appendChild(label);
|
||
propertyItem.appendChild(input);
|
||
} else if (attr.name === 'CPUAff') {
|
||
// CPUAff使用下拉框
|
||
const select = document.createElement('select');
|
||
select.className = 'property-input';
|
||
select.dataset.path = `ModelGroup[${index}]@${attr.name}`;
|
||
select.title = '选择一个可用的亲和CPU核心';
|
||
|
||
// 添加可用的CPU核心选项
|
||
availableCores.forEach(core => {
|
||
const option = document.createElement('option');
|
||
option.value = core;
|
||
option.textContent = `CPU ${core}`;
|
||
|
||
// 如果当前值匹配，设为选中
|
||
if (parseInt(attr.value) === core) {
|
||
option.selected = true;
|
||
}
|
||
|
||
select.appendChild(option);
|
||
});
|
||
|
||
// 如果没有可用选项，添加一个默认选项
|
||
if (availableCores.length === 0) {
|
||
const option = document.createElement('option');
|
||
option.value = attr.value;
|
||
option.textContent = `CPU ${attr.value}`;
|
||
option.selected = true;
|
||
select.appendChild(option);
|
||
}
|
||
|
||
select.addEventListener('change', () => {
|
||
this.markEdited();
|
||
});
|
||
|
||
propertyItem.appendChild(label);
|
||
propertyItem.appendChild(select);
|
||
} else if (attr.name === 'Name') {
|
||
// 模型组名称
|
||
const input = document.createElement('input');
|
||
input.className = 'property-input';
|
||
input.type = 'text';
|
||
input.value = attr.value;
|
||
input.dataset.path = `ModelGroup[${index}]@${attr.name}`;
|
||
input.title = '模型组名称';
|
||
input.addEventListener('change', () => {
|
||
this.markEdited();
|
||
groupTitle.textContent = input.value || `模型组 ${index + 1}`;
|
||
});
|
||
|
||
propertyItem.appendChild(label);
|
||
propertyItem.appendChild(input);
|
||
} else {
|
||
// 其他属性使用文本输入框
|
||
const input = document.createElement('input');
|
||
input.className = 'property-input';
|
||
input.type = 'text';
|
||
input.value = attr.value;
|
||
input.dataset.path = `ModelGroup[${index}]@${attr.name}`;
|
||
input.addEventListener('change', () => {
|
||
this.markEdited();
|
||
});
|
||
|
||
propertyItem.appendChild(label);
|
||
propertyItem.appendChild(input);
|
||
}
|
||
|
||
propertiesContainer.appendChild(propertyItem);
|
||
});
|
||
|
||
groupItem.appendChild(propertiesContainer);
|
||
|
||
// 显示模型列表
|
||
const modelsTitle = document.createElement('div');
|
||
modelsTitle.textContent = '模型列表';
|
||
modelsTitle.style.fontWeight = 'bold';
|
||
modelsTitle.style.margin = '16px 0 12px';
|
||
groupItem.appendChild(modelsTitle);
|
||
|
||
const models = modelGroup.querySelectorAll('Model');
|
||
const modelsContainer = document.createElement('div');
|
||
modelsContainer.style.marginLeft = '16px';
|
||
|
||
if (models.length === 0) {
|
||
const emptyModelMsg = document.createElement('div');
|
||
emptyModelMsg.textContent = '没有找到模型';
|
||
emptyModelMsg.style.color = '#888';
|
||
emptyModelMsg.style.fontStyle = 'italic';
|
||
emptyModelMsg.style.marginBottom = '12px';
|
||
modelsContainer.appendChild(emptyModelMsg);
|
||
} else {
|
||
models.forEach((model, modelIndex) => {
|
||
const modelItem = document.createElement('div');
|
||
modelItem.className = 'list-item';
|
||
modelItem.style.marginBottom = '12px';
|
||
|
||
const modelHeader = document.createElement('div');
|
||
modelHeader.className = 'list-item-header';
|
||
|
||
const modelTitle = document.createElement('div');
|
||
modelTitle.className = 'list-item-title';
|
||
modelTitle.textContent = model.getAttribute('Name') || `模型 ${modelIndex + 1}`;
|
||
|
||
const modelActions = document.createElement('div');
|
||
modelActions.className = 'list-item-actions';
|
||
|
||
const deleteModelButton = document.createElement('button');
|
||
deleteModelButton.className = 'action-icon';
|
||
deleteModelButton.title = '删除模型';
|
||
deleteModelButton.style.border = 'none';
|
||
deleteModelButton.style.background = 'none';
|
||
deleteModelButton.style.cursor = 'pointer';
|
||
deleteModelButton.style.padding = '4px';
|
||
deleteModelButton.style.display = 'flex';
|
||
deleteModelButton.style.alignItems = 'center';
|
||
deleteModelButton.style.justifyContent = 'center';
|
||
|
||
const deleteModelImg = document.createElement('img');
|
||
deleteModelImg.src = 'assets/icons/png/delete_b.png';
|
||
deleteModelImg.alt = '删除';
|
||
deleteModelImg.style.width = '16px';
|
||
deleteModelImg.style.height = '16px';
|
||
|
||
deleteModelButton.appendChild(deleteModelImg);
|
||
deleteModelButton.addEventListener('click', () => this.deleteModel(index, modelIndex));
|
||
|
||
modelActions.appendChild(deleteModelButton);
|
||
|
||
modelHeader.appendChild(modelTitle);
|
||
modelHeader.appendChild(modelActions);
|
||
modelItem.appendChild(modelHeader);
|
||
|
||
// 显示模型属性
|
||
const modelProperties = document.createElement('div');
|
||
modelProperties.className = 'property-group';
|
||
modelProperties.style.marginTop = '12px';
|
||
|
||
Array.from(model.attributes).forEach(attr => {
|
||
if (attr.name === 'Name') {
|
||
// 如果是Name属性，我们需要查看是否有ClassName属性
|
||
const classNameAttr = model.getAttribute('ClassName');
|
||
|
||
// 创建一个行容器，直接放在标题下方
|
||
const rowContainer = document.createElement('div');
|
||
rowContainer.style.display = 'flex';
|
||
rowContainer.style.width = '100%';
|
||
rowContainer.style.gap = '10px';
|
||
rowContainer.style.marginTop = '8px';
|
||
rowContainer.style.marginBottom = '8px';
|
||
|
||
// 名称标签和输入框组
|
||
const nameGroup = document.createElement('div');
|
||
nameGroup.style.display = 'flex';
|
||
nameGroup.style.alignItems = 'center';
|
||
nameGroup.style.flex = '1';
|
||
|
||
const nameLabel = document.createElement('label');
|
||
nameLabel.className = 'property-label';
|
||
nameLabel.textContent = 'Name';
|
||
nameLabel.style.marginRight = '5px';
|
||
nameLabel.style.minWidth = '60px';
|
||
|
||
const nameInput = document.createElement('input');
|
||
nameInput.className = 'property-input';
|
||
nameInput.type = 'text';
|
||
nameInput.value = attr.value;
|
||
nameInput.dataset.path = `ModelGroup[${index}]/Model[${modelIndex}]@${attr.name}`;
|
||
nameInput.title = '模型名称';
|
||
nameInput.addEventListener('change', () => {
|
||
this.markEdited();
|
||
modelTitle.textContent = nameInput.value || `模型 ${modelIndex + 1}`;
|
||
});
|
||
|
||
nameGroup.appendChild(nameLabel);
|
||
nameGroup.appendChild(nameInput);
|
||
|
||
// 类名标签和输入框组
|
||
const classGroup = document.createElement('div');
|
||
classGroup.style.display = 'flex';
|
||
classGroup.style.alignItems = 'center';
|
||
classGroup.style.flex = '1';
|
||
|
||
const classLabel = document.createElement('label');
|
||
classLabel.className = 'property-label';
|
||
classLabel.textContent = 'ClassName';
|
||
classLabel.style.marginRight = '5px';
|
||
classLabel.style.minWidth = '80px';
|
||
|
||
const classInput = document.createElement('input');
|
||
classInput.className = 'property-input';
|
||
classInput.type = 'text';
|
||
classInput.value = classNameAttr || '';
|
||
classInput.dataset.path = `ModelGroup[${index}]/Model[${modelIndex}]@ClassName`;
|
||
classInput.title = '模型C++类名';
|
||
classInput.addEventListener('change', () => {
|
||
this.markEdited();
|
||
});
|
||
|
||
classGroup.appendChild(classLabel);
|
||
classGroup.appendChild(classInput);
|
||
|
||
// 将名称组和类名组添加到行容器
|
||
rowContainer.appendChild(nameGroup);
|
||
rowContainer.appendChild(classGroup);
|
||
|
||
// 直接添加到modelItem，而不是添加到modelProperties
|
||
modelItem.appendChild(rowContainer);
|
||
|
||
// 将ClassName标记为已处理，后面不需要再处理
|
||
model.setAttribute('ClassName_processed', 'true');
|
||
} else if (attr.name === 'ClassName') {
|
||
// 如果是ClassName且已处理，则跳过
|
||
if (model.getAttribute('ClassName_processed') === 'true') {
|
||
return;
|
||
}
|
||
|
||
// 如果Name还没被处理，我们需要创建完整的行
|
||
const nameAttr = model.getAttribute('Name');
|
||
|
||
// 创建一个行容器
|
||
const rowContainer = document.createElement('div');
|
||
rowContainer.style.display = 'flex';
|
||
rowContainer.style.width = '100%';
|
||
rowContainer.style.gap = '10px';
|
||
rowContainer.style.marginTop = '8px';
|
||
rowContainer.style.marginBottom = '8px';
|
||
|
||
// 名称标签和输入框组
|
||
const nameGroup = document.createElement('div');
|
||
nameGroup.style.display = 'flex';
|
||
nameGroup.style.alignItems = 'center';
|
||
nameGroup.style.flex = '1';
|
||
|
||
const nameLabel = document.createElement('label');
|
||
nameLabel.className = 'property-label';
|
||
nameLabel.textContent = 'Name';
|
||
nameLabel.style.marginRight = '5px';
|
||
nameLabel.style.minWidth = '60px';
|
||
|
||
const nameInput = document.createElement('input');
|
||
nameInput.className = 'property-input';
|
||
nameInput.type = 'text';
|
||
nameInput.value = nameAttr || '';
|
||
nameInput.dataset.path = `ModelGroup[${index}]/Model[${modelIndex}]@Name`;
|
||
nameInput.title = '模型名称';
|
||
nameInput.addEventListener('change', () => {
|
||
this.markEdited();
|
||
modelTitle.textContent = nameInput.value || `模型 ${modelIndex + 1}`;
|
||
});
|
||
|
||
nameGroup.appendChild(nameLabel);
|
||
nameGroup.appendChild(nameInput);
|
||
|
||
// 类名标签和输入框组
|
||
const classGroup = document.createElement('div');
|
||
classGroup.style.display = 'flex';
|
||
classGroup.style.alignItems = 'center';
|
||
classGroup.style.flex = '1';
|
||
|
||
const classLabel = document.createElement('label');
|
||
classLabel.className = 'property-label';
|
||
classLabel.textContent = 'ClassName';
|
||
classLabel.style.marginRight = '5px';
|
||
classLabel.style.minWidth = '80px';
|
||
|
||
const classInput = document.createElement('input');
|
||
classInput.className = 'property-input';
|
||
classInput.type = 'text';
|
||
classInput.value = attr.value;
|
||
classInput.dataset.path = `ModelGroup[${index}]/Model[${modelIndex}]@ClassName`;
|
||
classInput.title = '模型C++类名';
|
||
classInput.addEventListener('change', () => {
|
||
this.markEdited();
|
||
});
|
||
|
||
classGroup.appendChild(classLabel);
|
||
classGroup.appendChild(classInput);
|
||
|
||
// 将名称组和类名组添加到行容器
|
||
rowContainer.appendChild(nameGroup);
|
||
rowContainer.appendChild(classGroup);
|
||
|
||
// 直接添加到modelItem，而不是添加到modelProperties
|
||
modelItem.appendChild(rowContainer);
|
||
|
||
// 将Name标记为已处理
|
||
model.setAttribute('Name_processed', 'true');
|
||
} else {
|
||
// 其他属性加入属性组
|
||
const propertyItem = document.createElement('div');
|
||
propertyItem.className = 'property-item';
|
||
|
||
const label = document.createElement('label');
|
||
label.className = 'property-label';
|
||
label.textContent = attr.name;
|
||
|
||
const input = document.createElement('input');
|
||
input.className = 'property-input';
|
||
input.type = 'text';
|
||
input.value = attr.value;
|
||
input.dataset.path = `ModelGroup[${index}]/Model[${modelIndex}]@${attr.name}`;
|
||
input.addEventListener('change', () => {
|
||
this.markEdited();
|
||
});
|
||
|
||
propertyItem.appendChild(label);
|
||
propertyItem.appendChild(input);
|
||
modelProperties.appendChild(propertyItem);
|
||
}
|
||
});
|
||
|
||
// 只有当有其他属性时才添加属性组
|
||
if (modelProperties.children.length > 0) {
|
||
// 添加一个标题来分隔基本属性和其他属性
|
||
const otherPropsTitle = document.createElement('div');
|
||
otherPropsTitle.textContent = '其他属性';
|
||
otherPropsTitle.style.fontWeight = 'bold';
|
||
otherPropsTitle.style.fontSize = '0.9em';
|
||
otherPropsTitle.style.margin = '8px 0';
|
||
modelItem.appendChild(otherPropsTitle);
|
||
|
||
modelItem.appendChild(modelProperties);
|
||
}
|
||
|
||
// 清除处理标记
|
||
Array.from(model.attributes).forEach(attr => {
|
||
if (attr.name === 'Name_processed' || attr.name === 'ClassName_processed') {
|
||
model.removeAttribute(attr.name);
|
||
}
|
||
});
|
||
|
||
modelItem.appendChild(modelProperties);
|
||
modelsContainer.appendChild(modelItem);
|
||
});
|
||
}
|
||
|
||
groupItem.appendChild(modelsContainer);
|
||
|
||
// 添加模型按钮
|
||
const addModelButton = document.createElement('button');
|
||
addModelButton.className = 'add-button';
|
||
addModelButton.style.marginTop = '12px';
|
||
addModelButton.textContent = '添加模型';
|
||
addModelButton.title = '添加新模型到当前模型组';
|
||
addModelButton.addEventListener('click', () => this.showAddModelDialog(index));
|
||
groupItem.appendChild(addModelButton);
|
||
|
||
section.appendChild(groupItem);
|
||
});
|
||
}
|
||
|
||
// 添加新模型组按钮
|
||
const addButton = document.createElement('button');
|
||
addButton.className = 'add-button';
|
||
addButton.style.marginTop = '16px';
|
||
addButton.textContent = '添加模型组';
|
||
addButton.title = '添加新的模型组';
|
||
addButton.addEventListener('click', () => this.showAddModelGroupDialog());
|
||
section.appendChild(addButton);
|
||
|
||
container.appendChild(section);
|
||
}
|
||
|
||
// 渲染服务部分
|
||
renderServicesSection(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);
|
||
|
||
// 获取ServicesList元素
|
||
const servicesList = rootElement.querySelector('ServicesList');
|
||
|
||
if (!servicesList) {
|
||
const emptyMsg = document.createElement('div');
|
||
emptyMsg.textContent = '没有找到服务列表配置';
|
||
emptyMsg.style.color = '#888';
|
||
emptyMsg.style.fontStyle = 'italic';
|
||
emptyMsg.style.marginBottom = '16px';
|
||
section.appendChild(emptyMsg);
|
||
} else {
|
||
// 获取所有Service元素
|
||
const services = servicesList.querySelectorAll('Service');
|
||
|
||
if (services.length === 0) {
|
||
const emptyMsg = document.createElement('div');
|
||
emptyMsg.textContent = '没有找到服务配置';
|
||
emptyMsg.style.color = '#888';
|
||
emptyMsg.style.fontStyle = 'italic';
|
||
emptyMsg.style.marginBottom = '16px';
|
||
section.appendChild(emptyMsg);
|
||
} else {
|
||
// 为每个Service创建一个列表项
|
||
services.forEach((service, index) => {
|
||
const serviceItem = document.createElement('div');
|
||
serviceItem.className = 'list-item';
|
||
|
||
// 创建服务标题和操作按钮
|
||
const header = document.createElement('div');
|
||
header.className = 'list-item-header';
|
||
|
||
const serviceTitle = document.createElement('div');
|
||
serviceTitle.className = 'list-item-title';
|
||
serviceTitle.textContent = service.getAttribute('Name') || `服务 ${index + 1}`;
|
||
|
||
const actions = document.createElement('div');
|
||
actions.className = 'list-item-actions';
|
||
|
||
const deleteButton = document.createElement('button');
|
||
deleteButton.className = 'action-icon';
|
||
deleteButton.title = '删除服务';
|
||
deleteButton.style.border = 'none';
|
||
deleteButton.style.background = 'none';
|
||
deleteButton.style.cursor = 'pointer';
|
||
deleteButton.style.padding = '4px';
|
||
deleteButton.style.display = 'flex';
|
||
deleteButton.style.alignItems = 'center';
|
||
deleteButton.style.justifyContent = 'center';
|
||
|
||
const deleteImg = document.createElement('img');
|
||
deleteImg.src = 'assets/icons/png/delete_b.png';
|
||
deleteImg.alt = '删除';
|
||
deleteImg.style.width = '16px';
|
||
deleteImg.style.height = '16px';
|
||
|
||
deleteButton.appendChild(deleteImg);
|
||
deleteButton.addEventListener('click', () => this.deleteService(index));
|
||
|
||
actions.appendChild(deleteButton);
|
||
|
||
header.appendChild(serviceTitle);
|
||
header.appendChild(actions);
|
||
serviceItem.appendChild(header);
|
||
|
||
// 显示服务属性
|
||
const propertiesContainer = document.createElement('div');
|
||
propertiesContainer.className = 'property-group';
|
||
propertiesContainer.style.marginTop = '12px';
|
||
|
||
Array.from(service.attributes).forEach(attr => {
|
||
const propertyItem = document.createElement('div');
|
||
propertyItem.className = 'property-item';
|
||
|
||
const label = document.createElement('label');
|
||
label.className = 'property-label';
|
||
label.textContent = attr.name;
|
||
|
||
if (attr.name === 'Name') {
|
||
// 如果是Name属性，我们需要查看是否有ClassName属性
|
||
const classNameAttr = service.getAttribute('ClassName');
|
||
|
||
// 创建一个行容器，直接放在标题下方
|
||
const rowContainer = document.createElement('div');
|
||
rowContainer.style.display = 'flex';
|
||
rowContainer.style.width = '100%';
|
||
rowContainer.style.gap = '10px';
|
||
rowContainer.style.marginTop = '8px';
|
||
rowContainer.style.marginBottom = '8px';
|
||
|
||
// 名称标签和输入框组
|
||
const nameGroup = document.createElement('div');
|
||
nameGroup.style.display = 'flex';
|
||
nameGroup.style.alignItems = 'center';
|
||
nameGroup.style.flex = '1';
|
||
|
||
const nameLabel = document.createElement('label');
|
||
nameLabel.className = 'property-label';
|
||
nameLabel.textContent = 'Name';
|
||
nameLabel.style.marginRight = '5px';
|
||
nameLabel.style.minWidth = '60px';
|
||
|
||
const nameInput = document.createElement('input');
|
||
nameInput.className = 'property-input';
|
||
nameInput.type = 'text';
|
||
nameInput.value = attr.value;
|
||
nameInput.dataset.path = `ServicesList/Service[${index}]@${attr.name}`;
|
||
nameInput.title = '服务名称';
|
||
nameInput.addEventListener('change', () => {
|
||
this.markEdited();
|
||
serviceTitle.textContent = nameInput.value || `服务 ${index + 1}`;
|
||
});
|
||
|
||
nameGroup.appendChild(nameLabel);
|
||
nameGroup.appendChild(nameInput);
|
||
|
||
// 类名标签和输入框组
|
||
const classGroup = document.createElement('div');
|
||
classGroup.style.display = 'flex';
|
||
classGroup.style.alignItems = 'center';
|
||
classGroup.style.flex = '1';
|
||
|
||
const classLabel = document.createElement('label');
|
||
classLabel.className = 'property-label';
|
||
classLabel.textContent = 'ClassName';
|
||
classLabel.style.marginRight = '5px';
|
||
classLabel.style.minWidth = '80px';
|
||
|
||
const classInput = document.createElement('input');
|
||
classInput.className = 'property-input';
|
||
classInput.type = 'text';
|
||
classInput.value = classNameAttr || '';
|
||
classInput.dataset.path = `ServicesList/Service[${index}]@ClassName`;
|
||
classInput.title = '服务C++类名';
|
||
classInput.addEventListener('change', () => {
|
||
this.markEdited();
|
||
});
|
||
|
||
classGroup.appendChild(classLabel);
|
||
classGroup.appendChild(classInput);
|
||
|
||
// 将名称组和类名组添加到行容器
|
||
rowContainer.appendChild(nameGroup);
|
||
rowContainer.appendChild(classGroup);
|
||
|
||
// 直接添加到serviceItem，而不是添加到propertiesContainer
|
||
serviceItem.appendChild(rowContainer);
|
||
|
||
// 将ClassName标记为已处理，后面不需要再处理
|
||
service.setAttribute('ClassName_processed', 'true');
|
||
} else if (attr.name === 'ClassName') {
|
||
// 如果是ClassName且已处理，则跳过
|
||
if (service.getAttribute('ClassName_processed') === 'true') {
|
||
return;
|
||
}
|
||
|
||
// 如果Name还没被处理，我们需要创建完整的行
|
||
const nameAttr = service.getAttribute('Name');
|
||
|
||
// 创建一个行容器
|
||
const rowContainer = document.createElement('div');
|
||
rowContainer.style.display = 'flex';
|
||
rowContainer.style.width = '100%';
|
||
rowContainer.style.gap = '10px';
|
||
rowContainer.style.marginTop = '8px';
|
||
rowContainer.style.marginBottom = '8px';
|
||
|
||
// 名称标签和输入框组
|
||
const nameGroup = document.createElement('div');
|
||
nameGroup.style.display = 'flex';
|
||
nameGroup.style.alignItems = 'center';
|
||
nameGroup.style.flex = '1';
|
||
|
||
const nameLabel = document.createElement('label');
|
||
nameLabel.className = 'property-label';
|
||
nameLabel.textContent = 'Name';
|
||
nameLabel.style.marginRight = '5px';
|
||
nameLabel.style.minWidth = '60px';
|
||
|
||
const nameInput = document.createElement('input');
|
||
nameInput.className = 'property-input';
|
||
nameInput.type = 'text';
|
||
nameInput.value = nameAttr || '';
|
||
nameInput.dataset.path = `ServicesList/Service[${index}]@Name`;
|
||
nameInput.title = '服务名称';
|
||
nameInput.addEventListener('change', () => {
|
||
this.markEdited();
|
||
serviceTitle.textContent = nameInput.value || `服务 ${index + 1}`;
|
||
});
|
||
|
||
nameGroup.appendChild(nameLabel);
|
||
nameGroup.appendChild(nameInput);
|
||
|
||
// 类名标签和输入框组
|
||
const classGroup = document.createElement('div');
|
||
classGroup.style.display = 'flex';
|
||
classGroup.style.alignItems = 'center';
|
||
classGroup.style.flex = '1';
|
||
|
||
const classLabel = document.createElement('label');
|
||
classLabel.className = 'property-label';
|
||
classLabel.textContent = 'ClassName';
|
||
classLabel.style.marginRight = '5px';
|
||
classLabel.style.minWidth = '80px';
|
||
|
||
const classInput = document.createElement('input');
|
||
classInput.className = 'property-input';
|
||
classInput.type = 'text';
|
||
classInput.value = attr.value;
|
||
classInput.dataset.path = `ServicesList/Service[${index}]@ClassName`;
|
||
classInput.title = '服务C++类名';
|
||
classInput.addEventListener('change', () => {
|
||
this.markEdited();
|
||
});
|
||
|
||
classGroup.appendChild(classLabel);
|
||
classGroup.appendChild(classInput);
|
||
|
||
// 将名称组和类名组添加到行容器
|
||
rowContainer.appendChild(nameGroup);
|
||
rowContainer.appendChild(classGroup);
|
||
|
||
propertyItem.appendChild(rowContainer);
|
||
propertiesContainer.appendChild(propertyItem);
|
||
|
||
// 将Name标记为已处理
|
||
service.setAttribute('Name_processed', 'true');
|
||
} else {
|
||
// 其他属性
|
||
const input = document.createElement('input');
|
||
input.className = 'property-input';
|
||
input.type = 'text';
|
||
input.value = attr.value;
|
||
input.dataset.path = `ServicesList/Service[${index}]@${attr.name}`;
|
||
input.addEventListener('change', () => {
|
||
this.markEdited();
|
||
});
|
||
|
||
propertyItem.appendChild(label);
|
||
propertyItem.appendChild(input);
|
||
propertiesContainer.appendChild(propertyItem);
|
||
}
|
||
});
|
||
|
||
// 只有当有其他属性时才添加属性组
|
||
if (propertiesContainer.children.length > 0) {
|
||
// 添加一个标题来分隔基本属性和其他属性
|
||
const otherPropsTitle = document.createElement('div');
|
||
otherPropsTitle.textContent = '其他属性';
|
||
otherPropsTitle.style.fontWeight = 'bold';
|
||
otherPropsTitle.style.fontSize = '0.9em';
|
||
otherPropsTitle.style.margin = '8px 0';
|
||
serviceItem.appendChild(otherPropsTitle);
|
||
|
||
serviceItem.appendChild(propertiesContainer);
|
||
}
|
||
|
||
// 清除处理标记
|
||
Array.from(service.attributes).forEach(attr => {
|
||
if (attr.name === 'Name_processed' || attr.name === 'ClassName_processed') {
|
||
service.removeAttribute(attr.name);
|
||
}
|
||
});
|
||
|
||
serviceItem.appendChild(propertiesContainer);
|
||
section.appendChild(serviceItem);
|
||
});
|
||
}
|
||
|
||
// 添加新服务按钮
|
||
const addButton = document.createElement('button');
|
||
addButton.className = 'add-button';
|
||
addButton.style.marginTop = '16px';
|
||
addButton.textContent = '添加服务';
|
||
addButton.title = '添加新的服务';
|
||
addButton.addEventListener('click', () => this.showAddServiceDialog());
|
||
section.appendChild(addButton);
|
||
}
|
||
|
||
container.appendChild(section);
|
||
}
|
||
|
||
// 标记编辑状态
|
||
markEdited() {
|
||
if (!this.isEdited) {
|
||
this.isEdited = true;
|
||
|
||
// 更新保存按钮样式
|
||
const saveButton = this.shadowRoot.getElementById('saveConfig');
|
||
if (saveButton) {
|
||
saveButton.classList.add('modified');
|
||
saveButton.title = '文件已修改，请保存';
|
||
}
|
||
}
|
||
}
|
||
|
||
// 重置编辑状态
|
||
resetEditState() {
|
||
this.isEdited = false;
|
||
|
||
// 更新保存按钮样式
|
||
const saveButton = this.shadowRoot.getElementById('saveConfig');
|
||
if (saveButton) {
|
||
saveButton.classList.remove('modified');
|
||
saveButton.title = '';
|
||
}
|
||
}
|
||
|
||
// 渲染Console输出和日志部分
|
||
renderConsoleAndLogSection(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数据
|
||
this.updateConsoleOrLogCheckbox(checkbox, 'ConsoleOutput', attr.name);
|
||
this.markEdited();
|
||
});
|
||
|
||
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数据
|
||
this.updateConsoleOrLogCheckbox(checkbox, 'Log', attr.name);
|
||
this.markEdited();
|
||
});
|
||
|
||
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
|
||
updateConsoleOrLogCheckbox(checkbox, elementName, attrName) {
|
||
const parser = new DOMParser();
|
||
const xmlDoc = parser.parseFromString(this.xmlContent, 'text/xml');
|
||
const element = xmlDoc.querySelector(elementName);
|
||
|
||
if (element) {
|
||
// 设置属性值为0或1
|
||
element.setAttribute(attrName, checkbox.checked ? '1' : '0');
|
||
|
||
// 更新XML内容
|
||
const serializer = new XMLSerializer();
|
||
this.xmlContent = serializer.serializeToString(xmlDoc);
|
||
|
||
this.markEdited();
|
||
}
|
||
}
|
||
|
||
// 显示添加模型组对话框
|
||
showAddModelGroupDialog() {
|
||
// 创建表单内容
|
||
const formContent = document.createElement('div');
|
||
formContent.className = 'modal-form';
|
||
|
||
// 获取可用的CPU核心选项
|
||
const availableCores = this.updateCPUAffinityOptions();
|
||
|
||
// 常用属性输入字段
|
||
const nameRow = document.createElement('div');
|
||
nameRow.className = 'form-row';
|
||
|
||
const nameLabel = document.createElement('label');
|
||
nameLabel.className = 'form-label';
|
||
nameLabel.textContent = '名称';
|
||
|
||
const nameInput = document.createElement('input');
|
||
nameInput.className = 'form-input';
|
||
nameInput.name = 'Name';
|
||
nameInput.type = 'text';
|
||
nameInput.value = '新模型组';
|
||
|
||
nameRow.appendChild(nameLabel);
|
||
nameRow.appendChild(nameInput);
|
||
formContent.appendChild(nameRow);
|
||
|
||
// FreqGroup输入字段
|
||
const freqGroupRow = document.createElement('div');
|
||
freqGroupRow.className = 'form-row';
|
||
|
||
const freqGroupLabel = document.createElement('label');
|
||
freqGroupLabel.className = 'form-label';
|
||
freqGroupLabel.textContent = '频率组';
|
||
|
||
const freqGroupInput = document.createElement('input');
|
||
freqGroupInput.className = 'form-input';
|
||
freqGroupInput.name = 'FreqGroup';
|
||
freqGroupInput.type = 'number';
|
||
freqGroupInput.min = '0';
|
||
freqGroupInput.max = '6';
|
||
freqGroupInput.value = '0';
|
||
freqGroupInput.title = '频率组，取值范围0-6';
|
||
|
||
freqGroupRow.appendChild(freqGroupLabel);
|
||
freqGroupRow.appendChild(freqGroupInput);
|
||
formContent.appendChild(freqGroupRow);
|
||
|
||
// Priority输入字段
|
||
const priorityRow = document.createElement('div');
|
||
priorityRow.className = 'form-row';
|
||
|
||
const priorityLabel = document.createElement('label');
|
||
priorityLabel.className = 'form-label';
|
||
priorityLabel.textContent = '优先级';
|
||
|
||
const priorityInput = document.createElement('input');
|
||
priorityInput.className = 'form-input';
|
||
priorityInput.name = 'Priority';
|
||
priorityInput.type = 'number';
|
||
priorityInput.min = '0';
|
||
priorityInput.max = '99';
|
||
priorityInput.value = '99';
|
||
priorityInput.title = '线程优先级，取值范围0-99';
|
||
|
||
priorityRow.appendChild(priorityLabel);
|
||
priorityRow.appendChild(priorityInput);
|
||
formContent.appendChild(priorityRow);
|
||
|
||
// CPUAff下拉字段
|
||
const cpuAffRow = document.createElement('div');
|
||
cpuAffRow.className = 'form-row';
|
||
|
||
const cpuAffLabel = document.createElement('label');
|
||
cpuAffLabel.className = 'form-label';
|
||
cpuAffLabel.textContent = 'CPU亲和性';
|
||
|
||
const cpuAffSelect = document.createElement('select');
|
||
cpuAffSelect.className = 'form-input';
|
||
cpuAffSelect.name = 'CPUAff';
|
||
cpuAffSelect.title = '选择一个可用的CPU核心';
|
||
|
||
// 添加可用的CPU核心选项
|
||
if (availableCores.length > 0) {
|
||
availableCores.forEach(core => {
|
||
const option = document.createElement('option');
|
||
option.value = core;
|
||
option.textContent = `CPU ${core}`;
|
||
cpuAffSelect.appendChild(option);
|
||
});
|
||
} else {
|
||
// 如果没有可用选项，添加一个默认选项
|
||
const option = document.createElement('option');
|
||
option.value = '0';
|
||
option.textContent = `CPU 0`;
|
||
cpuAffSelect.appendChild(option);
|
||
}
|
||
|
||
cpuAffRow.appendChild(cpuAffLabel);
|
||
cpuAffRow.appendChild(cpuAffSelect);
|
||
formContent.appendChild(cpuAffRow);
|
||
|
||
// 显示对话框
|
||
this.createModal('添加新模型组', formContent, () => {
|
||
const props = {
|
||
Name: nameInput.value,
|
||
FreqGroup: freqGroupInput.value,
|
||
Priority: priorityInput.value,
|
||
CPUAff: cpuAffSelect.value
|
||
};
|
||
|
||
this.addModelGroup(props);
|
||
});
|
||
}
|
||
|
||
// 显示添加模型对话框
|
||
showAddModelDialog(groupIndex) {
|
||
// 创建表单内容
|
||
const formContent = document.createElement('div');
|
||
formContent.className = 'modal-form';
|
||
|
||
// 创建一个行容器来放置Name和ClassName
|
||
const rowContainer = document.createElement('div');
|
||
rowContainer.style.display = 'flex';
|
||
rowContainer.style.width = '100%';
|
||
rowContainer.style.gap = '10px';
|
||
rowContainer.style.marginBottom = '10px';
|
||
|
||
// 名称部分
|
||
const nameGroup = document.createElement('div');
|
||
nameGroup.style.display = 'flex';
|
||
nameGroup.style.flexDirection = 'column';
|
||
nameGroup.style.flex = '1';
|
||
|
||
const nameLabel = document.createElement('label');
|
||
nameLabel.className = 'form-label';
|
||
nameLabel.textContent = '名称';
|
||
nameLabel.style.marginBottom = '5px';
|
||
|
||
const nameInput = document.createElement('input');
|
||
nameInput.className = 'form-input';
|
||
nameInput.name = 'Name';
|
||
nameInput.type = 'text';
|
||
nameInput.value = '新模型';
|
||
|
||
nameGroup.appendChild(nameLabel);
|
||
nameGroup.appendChild(nameInput);
|
||
|
||
// 类名部分
|
||
const classGroup = document.createElement('div');
|
||
classGroup.style.display = 'flex';
|
||
classGroup.style.flexDirection = 'column';
|
||
classGroup.style.flex = '1';
|
||
|
||
const classLabel = document.createElement('label');
|
||
classLabel.className = 'form-label';
|
||
classLabel.textContent = '类名';
|
||
classLabel.style.marginBottom = '5px';
|
||
|
||
const classInput = document.createElement('input');
|
||
classInput.className = 'form-input';
|
||
classInput.name = 'ClassName';
|
||
classInput.type = 'text';
|
||
classInput.value = 'XNModel';
|
||
|
||
classGroup.appendChild(classLabel);
|
||
classGroup.appendChild(classInput);
|
||
|
||
// 将两个组添加到容器中
|
||
rowContainer.appendChild(nameGroup);
|
||
rowContainer.appendChild(classGroup);
|
||
|
||
// 将容器添加到表单中
|
||
formContent.appendChild(rowContainer);
|
||
|
||
// 显示对话框
|
||
this.createModal('添加新模型', formContent, () => {
|
||
const props = {};
|
||
formContent.querySelectorAll('.form-input').forEach(input => {
|
||
props[input.name] = input.value;
|
||
});
|
||
|
||
this.addModel(groupIndex, props);
|
||
});
|
||
}
|
||
|
||
// 显示添加服务对话框
|
||
showAddServiceDialog() {
|
||
// 创建表单内容
|
||
const formContent = document.createElement('div');
|
||
formContent.className = 'modal-form';
|
||
|
||
// 创建一个行容器来放置Name和ClassName
|
||
const rowContainer = document.createElement('div');
|
||
rowContainer.style.display = 'flex';
|
||
rowContainer.style.width = '100%';
|
||
rowContainer.style.gap = '10px';
|
||
rowContainer.style.marginBottom = '10px';
|
||
|
||
// 名称部分
|
||
const nameGroup = document.createElement('div');
|
||
nameGroup.style.display = 'flex';
|
||
nameGroup.style.flexDirection = 'column';
|
||
nameGroup.style.flex = '1';
|
||
|
||
const nameLabel = document.createElement('label');
|
||
nameLabel.className = 'form-label';
|
||
nameLabel.textContent = '名称';
|
||
nameLabel.style.marginBottom = '5px';
|
||
|
||
const nameInput = document.createElement('input');
|
||
nameInput.className = 'form-input';
|
||
nameInput.name = 'Name';
|
||
nameInput.type = 'text';
|
||
nameInput.value = '新服务';
|
||
|
||
nameGroup.appendChild(nameLabel);
|
||
nameGroup.appendChild(nameInput);
|
||
|
||
// 类名部分
|
||
const classGroup = document.createElement('div');
|
||
classGroup.style.display = 'flex';
|
||
classGroup.style.flexDirection = 'column';
|
||
classGroup.style.flex = '1';
|
||
|
||
const classLabel = document.createElement('label');
|
||
classLabel.className = 'form-label';
|
||
classLabel.textContent = '类名';
|
||
classLabel.style.marginBottom = '5px';
|
||
|
||
const classInput = document.createElement('input');
|
||
classInput.className = 'form-input';
|
||
classInput.name = 'ClassName';
|
||
classInput.type = 'text';
|
||
classInput.value = 'XNService';
|
||
|
||
classGroup.appendChild(classLabel);
|
||
classGroup.appendChild(classInput);
|
||
|
||
// 将两个组添加到容器中
|
||
rowContainer.appendChild(nameGroup);
|
||
rowContainer.appendChild(classGroup);
|
||
|
||
// 将容器添加到表单中
|
||
formContent.appendChild(rowContainer);
|
||
|
||
// 显示对话框
|
||
this.createModal('添加新服务', formContent, () => {
|
||
const props = {};
|
||
formContent.querySelectorAll('.form-input').forEach(input => {
|
||
props[input.name] = input.value;
|
||
});
|
||
|
||
this.addService(props);
|
||
});
|
||
}
|
||
|
||
// 格式化XML字符串
|
||
formatXml(xml) {
|
||
if (!xml || !xml.trim()) return '';
|
||
|
||
try {
|
||
let formatted = '';
|
||
const parser = new DOMParser();
|
||
const doc = parser.parseFromString(xml, 'text/xml');
|
||
|
||
// 检查是否解析错误
|
||
const parseError = doc.querySelector('parsererror');
|
||
if (parseError) {
|
||
console.warn('XML解析错误，返回原始文本');
|
||
return xml; // 如果解析错误，返回原始文本
|
||
}
|
||
|
||
// 使用XMLSerializer序列化为字符串
|
||
const serializer = new XMLSerializer();
|
||
formatted = serializer.serializeToString(doc);
|
||
|
||
// 简单格式化：替换'><'为'>\n<'添加换行
|
||
formatted = formatted.replace(/><(?!\/)/g, '>\n<');
|
||
|
||
// 添加缩进
|
||
const lines = formatted.split('\n');
|
||
let indent = 0;
|
||
formatted = lines.map(line => {
|
||
if (line.match(/<\/[^>]+>/)) {
|
||
// 关闭标签，减少缩进
|
||
indent--;
|
||
}
|
||
|
||
const result = ' '.repeat(Math.max(0, indent * 2)) + line;
|
||
|
||
if (line.match(/<[^\/][^>]*[^\/]>/) && !line.match(/<.*\/>/) && !line.match(/<[^>]+><\/[^>]+>/)) {
|
||
// 开放标签，增加缩进
|
||
indent++;
|
||
}
|
||
|
||
return result;
|
||
}).join('\n');
|
||
|
||
return formatted;
|
||
} catch (e) {
|
||
console.error('XML格式化失败:', e);
|
||
return xml;
|
||
}
|
||
}
|
||
|
||
// 转义HTML字符
|
||
escapeHtml(unsafe) {
|
||
return unsafe
|
||
.replace(/&/g, "&")
|
||
.replace(/</g, "<")
|
||
.replace(/>/g, ">")
|
||
.replace(/"/g, """)
|
||
.replace(/'/g, "'");
|
||
}
|
||
|
||
render() {
|
||
this.shadowRoot.innerHTML = `
|
||
<style>
|
||
:host {
|
||
display: block;
|
||
height: 100%;
|
||
overflow: auto;
|
||
padding: 16px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.config-container {
|
||
background-color: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
padding: 16px;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.config-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid #e0e0e0;
|
||
}
|
||
|
||
.file-selector-header {
|
||
flex-grow: 1;
|
||
margin-right: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.file-selector-label {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-right: 10px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.file-selector-header select {
|
||
flex-grow: 1;
|
||
padding: 6px;
|
||
border-radius: 4px;
|
||
border: 1px solid #e0e0e0;
|
||
}
|
||
|
||
.refresh-button {
|
||
width: 28px;
|
||
height: 28px;
|
||
cursor: pointer;
|
||
margin-left: 8px;
|
||
border: none;
|
||
background-color: transparent;
|
||
background-size: contain;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
background-image: url('assets/icons/png/refresh_b.png');
|
||
transition: transform 0.3s ease;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.refresh-button:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
.refresh-button.refreshing {
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
.action-buttons {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.action-button {
|
||
background-color: #7986E7;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
padding: 6px 12px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
transition: background-color 0.3s;
|
||
}
|
||
|
||
.action-button.save-button.modified {
|
||
background-color: #E77979;
|
||
}
|
||
|
||
.action-button.save-button.modified:hover {
|
||
background-color: #D66868;
|
||
}
|
||
|
||
.action-button:hover {
|
||
background-color: #6875D6;
|
||
}
|
||
|
||
.config-content {
|
||
padding: 0;
|
||
flex-grow: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.file-content {
|
||
flex-grow: 1;
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 4px;
|
||
padding: 12px;
|
||
overflow: auto;
|
||
background-color: #f9f9f9;
|
||
min-height: 200px;
|
||
}
|
||
|
||
.file-content pre {
|
||
margin: 0;
|
||
font-family: monospace;
|
||
white-space: pre-wrap;
|
||
word-wrap: break-word;
|
||
}
|
||
|
||
.no-file-selected {
|
||
color: #888;
|
||
font-style: italic;
|
||
text-align: center;
|
||
margin-top: 80px;
|
||
}
|
||
</style>
|
||
<div class="config-container">
|
||
<div class="config-header">
|
||
<div class="file-selector-header">
|
||
<div class="file-selector-label">运行环境配置文件：</div>
|
||
<select id="scenarioFile">
|
||
<option value="">-- 请选择运行环境配置文件 --</option>
|
||
</select>
|
||
<button class="refresh-button" id="refreshButton" title="刷新文件列表"></button>
|
||
</div>
|
||
<div class="action-buttons">
|
||
<button class="action-button" id="newConfig">新建</button>
|
||
<button class="action-button save-button" id="saveConfig">保存</button>
|
||
<button class="action-button" id="saveAsConfig">另存为</button>
|
||
</div>
|
||
</div>
|
||
<div class="config-content">
|
||
<div class="file-content" id="fileContent">
|
||
<div class="no-file-selected">请选择一个运行环境配置文件查看内容</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// 在完成渲染后同时处理状态恢复
|
||
renderComplete() {
|
||
// 在DOM渲染完成后更新文件选择器
|
||
setTimeout(() => {
|
||
this.updateFileSelector();
|
||
|
||
// 如果有当前文件，尝试选择它
|
||
if (this.currentFile && this.xmlContent) {
|
||
const fileSelector = this.shadowRoot.getElementById('scenarioFile');
|
||
if (fileSelector) {
|
||
// 确认文件在列表中
|
||
const fileExists = Array.from(fileSelector.options).some(opt => opt.value === this.currentFile);
|
||
|
||
if (fileExists) {
|
||
// 设置选中的文件
|
||
fileSelector.value = this.currentFile;
|
||
|
||
// 解析XML内容
|
||
try {
|
||
const parser = new DOMParser();
|
||
this.xmlDoc = parser.parseFromString(this.xmlContent, 'text/xml');
|
||
|
||
// 更新内容显示
|
||
const contentElement = this.shadowRoot.getElementById('fileContent');
|
||
if (contentElement) {
|
||
contentElement.innerHTML = '';
|
||
this.renderVisualEditor(contentElement, this.xmlDoc);
|
||
}
|
||
|
||
// 如果有编辑状态，恢复它
|
||
if (this.isEdited) {
|
||
const saveButton = this.shadowRoot.getElementById('saveConfig');
|
||
if (saveButton) {
|
||
saveButton.classList.add('modified');
|
||
saveButton.title = '文件已修改，请保存';
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('恢复XML内容失败:', error);
|
||
}
|
||
} else {
|
||
// 文件不存在，清除状态
|
||
this.currentFile = null;
|
||
this.xmlContent = '';
|
||
this.isEdited = false;
|
||
}
|
||
}
|
||
}
|
||
}, 50); // 增加延迟确保DOM已经完全加载
|
||
}
|
||
|
||
setupEventListeners() {
|
||
// 新建按钮
|
||
const newButton = this.shadowRoot.getElementById('newConfig');
|
||
newButton.addEventListener('click', () => {
|
||
this.showNewConfigDialog();
|
||
});
|
||
|
||
// 保存按钮
|
||
const saveButton = this.shadowRoot.getElementById('saveConfig');
|
||
saveButton.addEventListener('click', () => {
|
||
if (this.currentFile && this.xmlContent) {
|
||
this.saveFileContent(this.currentFile, this.xmlContent);
|
||
} else {
|
||
// 如果没有选择文件，则提示另存为
|
||
if (this.xmlContent) {
|
||
this.showSaveAsDialog();
|
||
}
|
||
}
|
||
});
|
||
|
||
// 另存为按钮
|
||
const saveAsButton = this.shadowRoot.getElementById('saveAsConfig');
|
||
saveAsButton.addEventListener('click', () => {
|
||
this.showSaveAsDialog();
|
||
});
|
||
|
||
// 刷新按钮
|
||
const refreshButton = this.shadowRoot.getElementById('refreshButton');
|
||
refreshButton.addEventListener('click', () => {
|
||
// 使用更可靠的方法检查是否有未保存的修改 - 通过保存按钮的class
|
||
const saveButton = this.shadowRoot.getElementById('saveConfig');
|
||
const hasUnsavedChanges = saveButton && saveButton.classList.contains('modified');
|
||
|
||
// 如果有未保存的修改，先确认是否要放弃修改
|
||
if (hasUnsavedChanges) {
|
||
const confirmResult = confirm('当前文件有未保存的修改，刷新将丢失这些修改。是否继续？');
|
||
|
||
if (!confirmResult) {
|
||
return;
|
||
}
|
||
}
|
||
|
||
this.loadScenarioFiles();
|
||
});
|
||
|
||
// 文件选择下拉框
|
||
const fileSelector = this.shadowRoot.getElementById('scenarioFile');
|
||
fileSelector.addEventListener('change', (e) => {
|
||
// 使用更可靠的方法检查是否有未保存的修改 - 通过保存按钮的class
|
||
const saveButton = this.shadowRoot.getElementById('saveConfig');
|
||
const hasUnsavedChanges = saveButton && saveButton.classList.contains('modified');
|
||
|
||
// 如果当前文件有修改，提示用户保存
|
||
if (hasUnsavedChanges) {
|
||
const confirmResult = confirm('当前文件已修改但未保存，是否放弃修改？');
|
||
|
||
if (!confirmResult) {
|
||
// 恢复之前的选择
|
||
fileSelector.value = this.currentFile || '';
|
||
return;
|
||
}
|
||
}
|
||
|
||
const selectedFile = e.target.value;
|
||
if (selectedFile) {
|
||
this.loadFileContent(selectedFile);
|
||
} else {
|
||
this.currentFile = null;
|
||
this.xmlContent = '';
|
||
const contentElement = this.shadowRoot.getElementById('fileContent');
|
||
contentElement.innerHTML = '<div class="no-file-selected">请选择一个运行环境配置文件查看内容</div>';
|
||
this.resetEditState();
|
||
}
|
||
});
|
||
}
|
||
|
||
// 显示新建配置对话框
|
||
showNewConfigDialog() {
|
||
// 使用更可靠的方法检查是否有未保存的修改 - 通过保存按钮的class
|
||
const saveButton = this.shadowRoot.getElementById('saveConfig');
|
||
const hasUnsavedChanges = saveButton && saveButton.classList.contains('modified');
|
||
|
||
// 如果当前文件有修改，提示用户保存
|
||
if (hasUnsavedChanges) {
|
||
const confirmResult = confirm('当前文件已修改但未保存，是否放弃修改？');
|
||
|
||
if (!confirmResult) {
|
||
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';
|
||
|
||
// 创建输入框
|
||
const input = document.createElement('input');
|
||
input.id = 'fileName';
|
||
input.className = 'form-control';
|
||
input.type = 'text';
|
||
input.value = 'NewConfig.xml';
|
||
input.placeholder = '请输入文件名（以.xml或.sce结尾）';
|
||
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';
|
||
|
||
// 组装表单组
|
||
formGroup.appendChild(label);
|
||
formGroup.appendChild(input);
|
||
formContent.appendChild(formGroup);
|
||
|
||
// 显示对话框
|
||
const modal = this.createModal('新建配置文件', formContent, () => {
|
||
const fileName = input.value.trim();
|
||
|
||
if (!fileName) {
|
||
alert('文件名不能为空');
|
||
return;
|
||
}
|
||
|
||
// 验证文件名
|
||
if (!fileName.endsWith('.xml') && !fileName.endsWith('.sce')) {
|
||
alert('文件名必须以.xml或.sce结尾');
|
||
return;
|
||
}
|
||
|
||
// 创建新文件
|
||
this.createNewConfig(fileName);
|
||
|
||
// 关闭模态框
|
||
modal.modal.remove();
|
||
});
|
||
}
|
||
|
||
// 显示另存为对话框
|
||
showSaveAsDialog() {
|
||
if (!this.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';
|
||
|
||
// 创建输入框
|
||
const input = document.createElement('input');
|
||
input.id = 'fileName';
|
||
input.className = 'form-control';
|
||
input.type = 'text';
|
||
input.value = 'NewConfig.xml';
|
||
input.placeholder = '请输入文件名（以.xml或.sce结尾）';
|
||
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';
|
||
|
||
// 如果当前文件存在，提取文件名作为默认值
|
||
if (this.currentFile) {
|
||
const pathParts = this.currentFile.split('/');
|
||
const currentFileName = pathParts[pathParts.length - 1];
|
||
input.value = currentFileName;
|
||
}
|
||
|
||
// 组装表单组
|
||
formGroup.appendChild(label);
|
||
formGroup.appendChild(input);
|
||
formContent.appendChild(formGroup);
|
||
|
||
// 显示对话框
|
||
const modal = this.createModal('另存为', formContent, async () => {
|
||
const fileName = input.value.trim();
|
||
|
||
if (!fileName) {
|
||
alert('文件名不能为空');
|
||
return;
|
||
}
|
||
|
||
// 验证文件名
|
||
if (!fileName.endsWith('.xml') && !fileName.endsWith('.sce')) {
|
||
alert('文件名必须以.xml或.sce结尾');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// 调用API保存文件
|
||
const response = await fetch('/api/save-as-file', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
fileName: fileName,
|
||
content: this.xmlContent,
|
||
currentFile: this.currentFile || ''
|
||
})
|
||
});
|
||
|
||
if (!response.ok) {
|
||
const errorData = await response.json();
|
||
|
||
// 如果是文件已存在错误，询问是否覆盖
|
||
if (errorData.code === 'FILE_EXISTS') {
|
||
if (!confirm('文件已存在，是否覆盖？')) {
|
||
return;
|
||
}
|
||
|
||
// 用户确认覆盖，再次发送请求并添加覆盖标记
|
||
const overwriteResponse = await fetch('/api/save-as-file', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
fileName: fileName,
|
||
content: this.xmlContent,
|
||
currentFile: this.currentFile || '',
|
||
overwrite: true
|
||
})
|
||
});
|
||
|
||
if (!overwriteResponse.ok) {
|
||
const overwriteError = await overwriteResponse.json();
|
||
throw new Error(overwriteError.error || '保存文件失败');
|
||
}
|
||
|
||
const overwriteData = await overwriteResponse.json();
|
||
|
||
// 更新当前文件路径
|
||
this.currentFile = overwriteData.path;
|
||
} else {
|
||
throw new Error(errorData.error || '保存文件失败');
|
||
}
|
||
} else {
|
||
const data = await response.json();
|
||
|
||
// 更新当前文件路径
|
||
this.currentFile = data.path;
|
||
}
|
||
|
||
// 重新加载文件列表
|
||
await this.loadScenarioFiles();
|
||
|
||
// 在文件列表中选择新保存的文件
|
||
const fileSelector = this.shadowRoot.getElementById('scenarioFile');
|
||
fileSelector.value = this.currentFile;
|
||
|
||
// 重置编辑状态
|
||
this.resetEditState();
|
||
|
||
// 关闭模态框
|
||
modal.modal.remove();
|
||
} catch (error) {
|
||
console.error('另存为失败:', error);
|
||
alert(`另存为失败: ${error.message}`);
|
||
}
|
||
});
|
||
}
|
||
|
||
async saveFileContent(filePath, content) {
|
||
try {
|
||
// 更新XML内容
|
||
if (this.autoSaveToXml) {
|
||
this.updateXmlFromVisualEditor();
|
||
}
|
||
|
||
// 格式化XML内容
|
||
const formattedContent = this.formatXml(this.xmlContent);
|
||
|
||
const response = await fetch('/api/save-file', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
path: filePath,
|
||
content: formattedContent
|
||
})
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error(`保存文件失败: ${response.status} ${response.statusText}`);
|
||
}
|
||
|
||
// 重置编辑状态
|
||
this.resetEditState();
|
||
|
||
// 更新当前文件
|
||
this.currentFile = filePath;
|
||
|
||
// 刷新文件列表
|
||
await this.loadScenarioFiles();
|
||
|
||
// 选中当前文件
|
||
const fileSelector = this.shadowRoot.getElementById('scenarioFile');
|
||
if (fileSelector && this.currentFile) {
|
||
fileSelector.value = this.currentFile;
|
||
}
|
||
|
||
alert('文件保存成功');
|
||
} catch (error) {
|
||
console.error('保存文件失败:', error);
|
||
alert(`保存文件失败: ${error.message}`);
|
||
}
|
||
}
|
||
|
||
// 编辑模型组
|
||
editModelGroup(groupIndex) {
|
||
const parser = new DOMParser();
|
||
const xmlDoc = parser.parseFromString(this.xmlContent, 'text/xml');
|
||
const modelGroups = xmlDoc.querySelectorAll('ModelGroup');
|
||
|
||
if (groupIndex >= 0 && groupIndex < modelGroups.length) {
|
||
const group = modelGroups[groupIndex];
|
||
|
||
let properties = {};
|
||
Array.from(group.attributes).forEach(attr => {
|
||
properties[attr.name] = attr.value;
|
||
});
|
||
|
||
// 显示一个简单的属性编辑对话框
|
||
const propertyNames = Object.keys(properties).join(', ');
|
||
const message = `请编辑模型组属性，格式为：\n属性名1=值1, 属性名2=值2, ...\n\n当前属性: ${propertyNames}`;
|
||
const input = prompt(message, Object.entries(properties).map(([k, v]) => `${k}=${v}`).join(', '));
|
||
|
||
if (input !== null) {
|
||
// 解析输入的属性值
|
||
const pairs = input.split(',').map(pair => pair.trim());
|
||
const newProps = {};
|
||
|
||
pairs.forEach(pair => {
|
||
const [key, value] = pair.split('=').map(item => item.trim());
|
||
if (key && value !== undefined) {
|
||
newProps[key] = value;
|
||
}
|
||
});
|
||
|
||
// 更新属性
|
||
for (const [name, value] of Object.entries(newProps)) {
|
||
group.setAttribute(name, value);
|
||
}
|
||
|
||
// 重新生成XML内容
|
||
const serializer = new XMLSerializer();
|
||
this.xmlContent = serializer.serializeToString(xmlDoc);
|
||
|
||
// 更新编辑器
|
||
this.updateFileContent();
|
||
this.markEdited();
|
||
}
|
||
}
|
||
}
|
||
|
||
// 删除模型组
|
||
deleteModelGroup(groupIndex) {
|
||
if (confirm('确定要删除此模型组吗？此操作不可撤销。')) {
|
||
const parser = new DOMParser();
|
||
const xmlDoc = parser.parseFromString(this.xmlContent, 'text/xml');
|
||
const modelGroups = xmlDoc.querySelectorAll('ModelGroup');
|
||
|
||
if (groupIndex >= 0 && groupIndex < modelGroups.length) {
|
||
const group = modelGroups[groupIndex];
|
||
group.parentNode.removeChild(group);
|
||
|
||
// 重新生成XML内容
|
||
const serializer = new XMLSerializer();
|
||
this.xmlContent = serializer.serializeToString(xmlDoc);
|
||
|
||
// 更新编辑器
|
||
this.updateFileContent();
|
||
this.markEdited();
|
||
}
|
||
}
|
||
}
|
||
|
||
// 添加模型组
|
||
addModelGroup(properties = {}) {
|
||
const parser = new DOMParser();
|
||
const xmlDoc = parser.parseFromString(this.xmlContent, 'text/xml');
|
||
|
||
// 创建新的模型组
|
||
const newGroup = xmlDoc.createElement('ModelGroup');
|
||
|
||
// 设置默认属性
|
||
const defaultProps = {
|
||
Name: '新模型组',
|
||
FreqGroup: '0',
|
||
Priority: '99',
|
||
CPUAff: '0'
|
||
};
|
||
|
||
// 合并默认属性和传入的属性
|
||
const finalProps = { ...defaultProps, ...properties };
|
||
|
||
// 设置属性
|
||
for (const [name, value] of Object.entries(finalProps)) {
|
||
newGroup.setAttribute(name, value);
|
||
}
|
||
|
||
// 添加到根元素
|
||
xmlDoc.documentElement.appendChild(newGroup);
|
||
|
||
// 重新生成XML内容
|
||
const serializer = new XMLSerializer();
|
||
this.xmlContent = serializer.serializeToString(xmlDoc);
|
||
|
||
// 更新编辑器
|
||
this.updateFileContent();
|
||
this.markEdited();
|
||
}
|
||
|
||
// 编辑模型
|
||
editModel(groupIndex, modelIndex) {
|
||
const parser = new DOMParser();
|
||
const xmlDoc = parser.parseFromString(this.xmlContent, 'text/xml');
|
||
const modelGroups = xmlDoc.querySelectorAll('ModelGroup');
|
||
|
||
if (groupIndex >= 0 && groupIndex < modelGroups.length) {
|
||
const group = modelGroups[groupIndex];
|
||
const models = group.querySelectorAll('Model');
|
||
|
||
if (modelIndex >= 0 && modelIndex < models.length) {
|
||
const model = models[modelIndex];
|
||
|
||
let properties = {};
|
||
Array.from(model.attributes).forEach(attr => {
|
||
properties[attr.name] = attr.value;
|
||
});
|
||
|
||
// 显示一个简单的属性编辑对话框
|
||
const propertyNames = Object.keys(properties).join(', ');
|
||
const message = `请编辑模型属性，格式为：\n属性名1=值1, 属性名2=值2, ...\n\n当前属性: ${propertyNames}`;
|
||
const input = prompt(message, Object.entries(properties).map(([k, v]) => `${k}=${v}`).join(', '));
|
||
|
||
if (input !== null) {
|
||
// 解析输入的属性值
|
||
const pairs = input.split(',').map(pair => pair.trim());
|
||
const newProps = {};
|
||
|
||
pairs.forEach(pair => {
|
||
const [key, value] = pair.split('=').map(item => item.trim());
|
||
if (key && value !== undefined) {
|
||
newProps[key] = value;
|
||
}
|
||
});
|
||
|
||
// 更新属性
|
||
for (const [name, value] of Object.entries(newProps)) {
|
||
model.setAttribute(name, value);
|
||
}
|
||
|
||
// 重新生成XML内容
|
||
const serializer = new XMLSerializer();
|
||
this.xmlContent = serializer.serializeToString(xmlDoc);
|
||
|
||
// 更新编辑器
|
||
this.updateFileContent();
|
||
this.markEdited();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 删除模型
|
||
deleteModel(groupIndex, modelIndex) {
|
||
if (confirm('确定要删除此模型吗？此操作不可撤销。')) {
|
||
const parser = new DOMParser();
|
||
const xmlDoc = parser.parseFromString(this.xmlContent, 'text/xml');
|
||
const modelGroups = xmlDoc.querySelectorAll('ModelGroup');
|
||
|
||
if (groupIndex >= 0 && groupIndex < modelGroups.length) {
|
||
const group = modelGroups[groupIndex];
|
||
const models = group.querySelectorAll('Model');
|
||
|
||
if (modelIndex >= 0 && modelIndex < models.length) {
|
||
const model = models[modelIndex];
|
||
model.parentNode.removeChild(model);
|
||
|
||
// 重新生成XML内容
|
||
const serializer = new XMLSerializer();
|
||
this.xmlContent = serializer.serializeToString(xmlDoc);
|
||
|
||
// 更新编辑器
|
||
this.updateFileContent();
|
||
this.markEdited();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 添加模型
|
||
addModel(groupIndex, properties = {}) {
|
||
const parser = new DOMParser();
|
||
const xmlDoc = parser.parseFromString(this.xmlContent, 'text/xml');
|
||
const modelGroups = xmlDoc.querySelectorAll('ModelGroup');
|
||
|
||
if (groupIndex >= 0 && groupIndex < modelGroups.length) {
|
||
const group = modelGroups[groupIndex];
|
||
|
||
// 创建新的模型元素
|
||
const newModel = xmlDoc.createElement('Model');
|
||
|
||
// 设置默认属性
|
||
const defaultProps = {
|
||
Name: '新模型',
|
||
ClassName: 'XNModel'
|
||
};
|
||
|
||
// 合并默认属性和传入的属性
|
||
const finalProps = { ...defaultProps, ...properties };
|
||
|
||
// 设置属性
|
||
for (const [name, value] of Object.entries(finalProps)) {
|
||
if (value.trim()) {
|
||
newModel.setAttribute(name, value);
|
||
}
|
||
}
|
||
|
||
// 添加到模型组
|
||
group.appendChild(newModel);
|
||
|
||
// 重新生成XML内容
|
||
const serializer = new XMLSerializer();
|
||
this.xmlContent = serializer.serializeToString(xmlDoc);
|
||
|
||
// 更新编辑器
|
||
this.updateFileContent();
|
||
this.markEdited();
|
||
}
|
||
}
|
||
|
||
// 编辑服务
|
||
editService(serviceIndex) {
|
||
const parser = new DOMParser();
|
||
const xmlDoc = parser.parseFromString(this.xmlContent, 'text/xml');
|
||
const servicesList = xmlDoc.querySelector('ServicesList');
|
||
|
||
if (servicesList) {
|
||
const services = servicesList.querySelectorAll('Service');
|
||
|
||
if (serviceIndex >= 0 && serviceIndex < services.length) {
|
||
const service = services[serviceIndex];
|
||
|
||
let properties = {};
|
||
Array.from(service.attributes).forEach(attr => {
|
||
properties[attr.name] = attr.value;
|
||
});
|
||
|
||
// 显示一个简单的属性编辑对话框
|
||
const propertyNames = Object.keys(properties).join(', ');
|
||
const message = `请编辑服务属性，格式为：\n属性名1=值1, 属性名2=值2, ...\n\n当前属性: ${propertyNames}`;
|
||
const input = prompt(message, Object.entries(properties).map(([k, v]) => `${k}=${v}`).join(', '));
|
||
|
||
if (input !== null) {
|
||
// 解析输入的属性值
|
||
const pairs = input.split(',').map(pair => pair.trim());
|
||
const newProps = {};
|
||
|
||
pairs.forEach(pair => {
|
||
const [key, value] = pair.split('=').map(item => item.trim());
|
||
if (key && value !== undefined) {
|
||
newProps[key] = value;
|
||
}
|
||
});
|
||
|
||
// 更新属性
|
||
for (const [name, value] of Object.entries(newProps)) {
|
||
service.setAttribute(name, value);
|
||
}
|
||
|
||
// 重新生成XML内容
|
||
const serializer = new XMLSerializer();
|
||
this.xmlContent = serializer.serializeToString(xmlDoc);
|
||
|
||
// 更新编辑器
|
||
this.updateFileContent();
|
||
this.markEdited();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 删除服务
|
||
deleteService(serviceIndex) {
|
||
if (confirm('确定要删除此服务吗？此操作不可撤销。')) {
|
||
const parser = new DOMParser();
|
||
const xmlDoc = parser.parseFromString(this.xmlContent, 'text/xml');
|
||
const servicesList = xmlDoc.querySelector('ServicesList');
|
||
|
||
if (servicesList) {
|
||
const services = servicesList.querySelectorAll('Service');
|
||
|
||
if (serviceIndex >= 0 && serviceIndex < services.length) {
|
||
const service = services[serviceIndex];
|
||
service.parentNode.removeChild(service);
|
||
|
||
// 重新生成XML内容
|
||
const serializer = new XMLSerializer();
|
||
this.xmlContent = serializer.serializeToString(xmlDoc);
|
||
|
||
// 更新编辑器
|
||
this.updateFileContent();
|
||
this.markEdited();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 添加服务
|
||
addService(properties = {}) {
|
||
const parser = new DOMParser();
|
||
const xmlDoc = parser.parseFromString(this.xmlContent, 'text/xml');
|
||
let servicesList = xmlDoc.querySelector('ServicesList');
|
||
|
||
if (!servicesList) {
|
||
// 如果没有ServicesList，创建一个
|
||
servicesList = xmlDoc.createElement('ServicesList');
|
||
xmlDoc.documentElement.appendChild(servicesList);
|
||
}
|
||
|
||
// 创建新的服务元素
|
||
const newService = xmlDoc.createElement('Service');
|
||
|
||
// 设置默认属性
|
||
const defaultProps = {
|
||
Name: '新服务',
|
||
ClassName: 'XNService'
|
||
};
|
||
|
||
// 合并默认属性和传入的属性
|
||
const finalProps = { ...defaultProps, ...properties };
|
||
|
||
// 设置属性
|
||
for (const [name, value] of Object.entries(finalProps)) {
|
||
if (value.trim()) {
|
||
newService.setAttribute(name, value);
|
||
}
|
||
}
|
||
|
||
// 添加到服务列表
|
||
servicesList.appendChild(newService);
|
||
|
||
// 重新生成XML内容
|
||
const serializer = new XMLSerializer();
|
||
this.xmlContent = serializer.serializeToString(xmlDoc);
|
||
|
||
// 更新编辑器
|
||
this.updateFileContent();
|
||
this.markEdited();
|
||
}
|
||
|
||
// 更新XML内容
|
||
updateXmlFromVisualEditor(silent = true) {
|
||
// 获取所有输入控件
|
||
const inputs = Array.from(this.shadowRoot.querySelectorAll('.property-input'));
|
||
|
||
// 解析当前XML
|
||
const parser = new DOMParser();
|
||
const xmlDoc = parser.parseFromString(this.xmlContent, 'text/xml');
|
||
|
||
// 更新XML值
|
||
inputs.forEach(input => {
|
||
const path = input.dataset.path;
|
||
if (!path) return;
|
||
|
||
// 解析路径
|
||
if (path.includes('@')) {
|
||
const [elementPath, attrName] = path.split('@');
|
||
|
||
let element = null;
|
||
|
||
// 处理不同类型的元素路径
|
||
if (elementPath.includes('[') && elementPath.includes(']')) {
|
||
// 复杂路径（如 ModelGroup[0]/Model[1]）
|
||
const parts = elementPath.split('/');
|
||
|
||
let currentNode = xmlDoc.documentElement;
|
||
for (const part of parts) {
|
||
const match = part.match(/^(\w+)(?:\[(\d+)\])?$/);
|
||
if (match) {
|
||
const [, tagName, indexStr] = match;
|
||
const targetNodes = currentNode.getElementsByTagName(tagName);
|
||
|
||
if (indexStr !== undefined) {
|
||
const index = parseInt(indexStr, 10);
|
||
if (index < targetNodes.length) {
|
||
currentNode = targetNodes[index];
|
||
} else {
|
||
console.error(`Index out of range: ${part}`);
|
||
return;
|
||
}
|
||
} else if (targetNodes.length > 0) {
|
||
currentNode = targetNodes[0];
|
||
} else {
|
||
console.error(`Element not found: ${part}`);
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
|
||
element = currentNode;
|
||
} else {
|
||
// 简单路径（如 Environment）
|
||
element = xmlDoc.getElementsByTagName(elementPath)[0];
|
||
}
|
||
|
||
if (element) {
|
||
// 检查是否为新添加的属性
|
||
if (input.dataset.isNew === 'true') {
|
||
element.setAttribute(attrName, input.value);
|
||
} else {
|
||
// 更新现有属性
|
||
if (element.hasAttribute(attrName)) {
|
||
element.setAttribute(attrName, input.value);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
// 更新XML内容
|
||
const serializer = new XMLSerializer();
|
||
this.xmlContent = serializer.serializeToString(xmlDoc);
|
||
|
||
// 不再提示更新成功
|
||
this.isEdited = false;
|
||
}
|
||
|
||
// 创建新配置文件
|
||
async createNewConfig(fileName) {
|
||
try {
|
||
// 直接调用后端API创建新文件
|
||
const response = await fetch('/api/create-config-file', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
fileName: fileName
|
||
})
|
||
});
|
||
|
||
if (!response.ok) {
|
||
const errorData = await response.json();
|
||
throw new Error(errorData.error || '创建文件失败');
|
||
}
|
||
|
||
const data = await response.json();
|
||
|
||
// 更新当前文件
|
||
this.currentFile = data.path;
|
||
this.xmlContent = data.content;
|
||
|
||
// 更新内容区域
|
||
this.updateFileContent();
|
||
|
||
// 重新加载文件列表
|
||
await this.loadScenarioFiles();
|
||
|
||
// 选择新文件
|
||
const fileSelector = this.shadowRoot.getElementById('scenarioFile');
|
||
fileSelector.value = this.currentFile;
|
||
|
||
// 重置编辑状态
|
||
this.resetEditState();
|
||
|
||
return true;
|
||
} catch (error) {
|
||
console.error('创建新配置文件失败:', error);
|
||
alert(`创建新配置文件失败: ${error.message}`);
|
||
return false;
|
||
}
|
||
}
|
||
|
||
// 组件销毁时移除事件监听器
|
||
disconnectedCallback() {
|
||
// 移除可能的事件监听器
|
||
const fileSelector = this.shadowRoot.getElementById('scenarioFile');
|
||
if (fileSelector) {
|
||
fileSelector.removeEventListener('change', this.handleFileSelectorChange);
|
||
}
|
||
}
|
||
}
|
||
|
||
customElements.define('run-env-config', RunEnvConfig);
|