846 lines
34 KiB
JavaScript
846 lines
34 KiB
JavaScript
/**
|
||
* 模型组模块
|
||
*/
|
||
import { createModal, markEdited } from './utils.js';
|
||
import { getCPUAffinityOptions } from './environment-section.js';
|
||
|
||
/**
|
||
* 渲染模型组部分
|
||
* @param {HTMLElement} component - 组件实例
|
||
* @param {HTMLElement} container - 容器元素
|
||
* @param {Element} rootElement - XML根元素
|
||
*/
|
||
export function renderModelGroupsSection(component, container, rootElement) {
|
||
const section = document.createElement('div');
|
||
section.className = 'editor-section';
|
||
|
||
const title = document.createElement('div');
|
||
title.className = 'section-title';
|
||
title.textContent = '模型组配置';
|
||
section.appendChild(title);
|
||
|
||
// 获取所有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', () => deleteModelGroup(component, 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 = getCPUAffinityOptions(component.xmlDoc);
|
||
|
||
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';
|
||
}
|
||
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
||
});
|
||
|
||
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';
|
||
}
|
||
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
||
});
|
||
|
||
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', () => {
|
||
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
||
});
|
||
|
||
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', () => {
|
||
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
||
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', () => {
|
||
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
||
});
|
||
|
||
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) => {
|
||
renderModelItem(component, modelsContainer, model, modelIndex, index);
|
||
});
|
||
}
|
||
|
||
groupItem.appendChild(modelsContainer);
|
||
|
||
// 添加模型按钮
|
||
const addModelButton = document.createElement('button');
|
||
addModelButton.className = 'add-button';
|
||
addModelButton.style.marginTop = '12px';
|
||
addModelButton.textContent = '添加模型';
|
||
addModelButton.title = '添加新模型到当前模型组';
|
||
addModelButton.addEventListener('click', () => showAddModelDialog(component, 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', () => showAddModelGroupDialog(component));
|
||
section.appendChild(addButton);
|
||
|
||
container.appendChild(section);
|
||
}
|
||
|
||
/**
|
||
* 渲染模型项
|
||
* @param {HTMLElement} component - 组件实例
|
||
* @param {HTMLElement} container - 容器元素
|
||
* @param {Element} model - 模型XML元素
|
||
* @param {number} modelIndex - 模型索引
|
||
* @param {number} groupIndex - 模型组索引
|
||
*/
|
||
function renderModelItem(component, container, model, modelIndex, groupIndex) {
|
||
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', () => deleteModel(component, groupIndex, 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[${groupIndex}]/Model[${modelIndex}]@${attr.name}`;
|
||
nameInput.title = '模型名称';
|
||
nameInput.addEventListener('change', () => {
|
||
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
||
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[${groupIndex}]/Model[${modelIndex}]@ClassName`;
|
||
classInput.title = '模型C++类名';
|
||
classInput.addEventListener('change', () => {
|
||
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
||
});
|
||
|
||
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[${groupIndex}]/Model[${modelIndex}]@Name`;
|
||
nameInput.title = '模型名称';
|
||
nameInput.addEventListener('change', () => {
|
||
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
||
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[${groupIndex}]/Model[${modelIndex}]@ClassName`;
|
||
classInput.title = '模型C++类名';
|
||
classInput.addEventListener('change', () => {
|
||
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
||
});
|
||
|
||
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[${groupIndex}]/Model[${modelIndex}]@${attr.name}`;
|
||
input.addEventListener('change', () => {
|
||
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
||
});
|
||
|
||
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);
|
||
}
|
||
});
|
||
|
||
container.appendChild(modelItem);
|
||
}
|
||
|
||
/**
|
||
* 显示添加模型组对话框
|
||
* @param {HTMLElement} component - 组件实例
|
||
*/
|
||
export function showAddModelGroupDialog(component) {
|
||
// 创建表单内容
|
||
const formContent = document.createElement('div');
|
||
formContent.className = 'modal-form';
|
||
|
||
// 获取可用的CPU核心选项
|
||
const availableCores = getCPUAffinityOptions(component.xmlDoc);
|
||
|
||
// 常用属性输入字段
|
||
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);
|
||
|
||
// 显示对话框
|
||
createModal(component.shadowRoot, '添加新模型组', formContent, () => {
|
||
const props = {
|
||
Name: nameInput.value,
|
||
FreqGroup: freqGroupInput.value,
|
||
Priority: priorityInput.value,
|
||
CPUAff: cpuAffSelect.value
|
||
};
|
||
|
||
addModelGroup(component, props);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 显示添加模型对话框
|
||
* @param {HTMLElement} component - 组件实例
|
||
* @param {number} groupIndex - 模型组索引
|
||
*/
|
||
export function showAddModelDialog(component, 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);
|
||
|
||
// 显示对话框
|
||
createModal(component.shadowRoot, '添加新模型', formContent, () => {
|
||
const props = {};
|
||
formContent.querySelectorAll('.form-input').forEach(input => {
|
||
props[input.name] = input.value;
|
||
});
|
||
|
||
addModel(component, groupIndex, props);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 添加模型组
|
||
* @param {HTMLElement} component - 组件实例
|
||
* @param {Object} properties - 属性对象
|
||
*/
|
||
export function addModelGroup(component, properties = {}) {
|
||
const parser = new DOMParser();
|
||
const xmlDoc = parser.parseFromString(component.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);
|
||
}
|
||
|
||
// 查找或创建ModelGroupList容器
|
||
let modelGroupList = xmlDoc.querySelector('ModelGroupList');
|
||
if (!modelGroupList) {
|
||
modelGroupList = xmlDoc.createElement('ModelGroupList');
|
||
xmlDoc.documentElement.appendChild(modelGroupList);
|
||
}
|
||
|
||
// 添加到ModelGroupList
|
||
modelGroupList.appendChild(newGroup);
|
||
|
||
// 重新生成XML内容
|
||
const serializer = new XMLSerializer();
|
||
component.xmlContent = serializer.serializeToString(xmlDoc);
|
||
|
||
// 更新编辑器
|
||
component.updateFileContent();
|
||
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
||
}
|
||
|
||
/**
|
||
* 删除模型组
|
||
* @param {HTMLElement} component - 组件实例
|
||
* @param {number} groupIndex - 模型组索引
|
||
*/
|
||
export function deleteModelGroup(component, groupIndex) {
|
||
if (confirm('确定要删除此模型组吗？此操作不可撤销。')) {
|
||
const parser = new DOMParser();
|
||
const xmlDoc = parser.parseFromString(component.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();
|
||
component.xmlContent = serializer.serializeToString(xmlDoc);
|
||
|
||
// 更新编辑器
|
||
component.updateFileContent();
|
||
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 添加模型
|
||
* @param {HTMLElement} component - 组件实例
|
||
* @param {number} groupIndex - 模型组索引
|
||
* @param {Object} properties - 属性对象
|
||
*/
|
||
export function addModel(component, groupIndex, properties = {}) {
|
||
const parser = new DOMParser();
|
||
const xmlDoc = parser.parseFromString(component.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)) {
|
||
newModel.setAttribute(name, value);
|
||
}
|
||
|
||
// 添加到模型组
|
||
group.appendChild(newModel);
|
||
|
||
// 重新生成XML内容
|
||
const serializer = new XMLSerializer();
|
||
component.xmlContent = serializer.serializeToString(xmlDoc);
|
||
|
||
// 更新编辑器
|
||
component.updateFileContent();
|
||
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 删除模型
|
||
* @param {HTMLElement} component - 组件实例
|
||
* @param {number} groupIndex - 模型组索引
|
||
* @param {number} modelIndex - 模型索引
|
||
*/
|
||
export function deleteModel(component, groupIndex, modelIndex) {
|
||
if (confirm('确定要删除此模型吗？此操作不可撤销。')) {
|
||
const parser = new DOMParser();
|
||
const xmlDoc = parser.parseFromString(component.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();
|
||
component.xmlContent = serializer.serializeToString(xmlDoc);
|
||
|
||
// 更新编辑器
|
||
component.updateFileContent();
|
||
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
||
}
|
||
}
|
||
}
|
||
}
|