448 lines
20 KiB
JavaScript
448 lines
20 KiB
JavaScript
/**
|
||
* 服务模块
|
||
* @type {module}
|
||
*/
|
||
import { createModal, markEdited } from './utils.js';
|
||
|
||
/**
|
||
* 渲染服务部分
|
||
* @param {HTMLElement} component - 组件实例
|
||
* @param {HTMLElement} container - 容器元素
|
||
* @param {Element} rootElement - XML根元素
|
||
*/
|
||
export function renderServicesSection(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);
|
||
|
||
// 获取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', () => deleteService(component, 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', () => {
|
||
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
||
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', () => {
|
||
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
||
});
|
||
|
||
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', () => {
|
||
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
||
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', () => {
|
||
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
||
});
|
||
|
||
classGroup.appendChild(classLabel);
|
||
classGroup.appendChild(classInput);
|
||
|
||
// 将名称组和类名组添加到行容器
|
||
rowContainer.appendChild(nameGroup);
|
||
rowContainer.appendChild(classGroup);
|
||
|
||
serviceItem.appendChild(rowContainer);
|
||
|
||
// 将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', () => {
|
||
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
||
});
|
||
|
||
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);
|
||
}
|
||
});
|
||
|
||
section.appendChild(serviceItem);
|
||
});
|
||
}
|
||
|
||
// 添加新服务按钮
|
||
const addButton = document.createElement('button');
|
||
addButton.className = 'add-button';
|
||
addButton.style.marginTop = '16px';
|
||
addButton.textContent = '添加服务';
|
||
addButton.title = '添加新的服务';
|
||
addButton.addEventListener('click', () => showAddServiceDialog(component));
|
||
section.appendChild(addButton);
|
||
}
|
||
|
||
container.appendChild(section);
|
||
}
|
||
|
||
/**
|
||
* 显示添加服务对话框
|
||
* @param {HTMLElement} component - 组件实例
|
||
*/
|
||
export function showAddServiceDialog(component) {
|
||
// 创建表单内容
|
||
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);
|
||
|
||
// 显示对话框
|
||
createModal(component.shadowRoot, '添加新服务', formContent, () => {
|
||
const props = {};
|
||
formContent.querySelectorAll('.form-input').forEach(input => {
|
||
props[input.name] = input.value;
|
||
});
|
||
|
||
addService(component, props);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 添加服务
|
||
* @param {HTMLElement} component - 组件实例
|
||
* @param {Object} properties - 属性对象
|
||
*/
|
||
export function addService(component, properties = {}) {
|
||
const parser = new DOMParser();
|
||
const xmlDoc = parser.parseFromString(component.xmlContent, 'text/xml');
|
||
|
||
// 查找或创建ServicesList容器
|
||
let servicesList = xmlDoc.querySelector('ServicesList');
|
||
if (!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)) {
|
||
newService.setAttribute(name, value);
|
||
}
|
||
|
||
// 添加到服务列表
|
||
servicesList.appendChild(newService);
|
||
|
||
// 重新生成XML内容
|
||
const serializer = new XMLSerializer();
|
||
component.xmlContent = serializer.serializeToString(xmlDoc);
|
||
|
||
// 更新编辑器
|
||
component.updateFileContent();
|
||
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
||
}
|
||
|
||
/**
|
||
* 删除服务
|
||
* @param {HTMLElement} component - 组件实例
|
||
* @param {number} serviceIndex - 服务索引
|
||
*/
|
||
export function deleteService(component, serviceIndex) {
|
||
if (confirm('确定要删除此服务吗？此操作不可撤销。')) {
|
||
const parser = new DOMParser();
|
||
const xmlDoc = parser.parseFromString(component.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();
|
||
component.xmlContent = serializer.serializeToString(xmlDoc);
|
||
|
||
// 更新编辑器
|
||
component.updateFileContent();
|
||
component.isEdited = markEdited(component.shadowRoot, component.isEdited);
|
||
}
|
||
}
|
||
}
|
||
}
|