947 lines
34 KiB
JavaScript
947 lines
34 KiB
JavaScript
|
/**
|
|||
|
|
* 模型配置组件
|
|||
|
|
* @type {module}
|
|||
|
|
*/
|
|||
|
|
import {
|
|||
|
|
formatXml, escapeHtml, isValidElementName
|
|||
|
|
} from './model-config/utils.js';
|
|||
|
|
|
|||
|
|
import {
|
|||
|
|
loadModelFiles as apiLoadModelFiles,
|
|||
|
|
loadFileContent as apiLoadFileContent,
|
|||
|
|
saveFileContent as apiSaveFileContent,
|
|||
|
|
createNewConfig as apiCreateNewConfig,
|
|||
|
|
saveFileAs as apiSaveFileAs
|
|||
|
|
} from './model-config/api.js';
|
|||
|
|
|
|||
|
|
import {
|
|||
|
|
parseXmlContent, updateXmlFromVisualEditor, ensureCommandListFormat,
|
|||
|
|
updateElementByPath, updateElementValue, addElement, deleteElement
|
|||
|
|
} from './model-config/xml-handler.js';
|
|||
|
|
|
|||
|
|
import {
|
|||
|
|
renderBasicInfoSection, renderAdvancedSection, renderElements, renderOtherSettingsSection
|
|||
|
|
} from './model-config/ui-elements.js';
|
|||
|
|
|
|||
|
|
import {
|
|||
|
|
renderCommandListTable, renderCommandList
|
|||
|
|
} from './model-config/command-handler.js';
|
|||
|
|
|
|||
|
|
import {
|
|||
|
|
showDateTimeDialog
|
|||
|
|
} from './model-config/datetime.js';
|
|||
|
|
|
|||
|
|
import {
|
|||
|
|
showAddElementDialog, showEditElementDialog, showNewConfigDialog,
|
|||
|
|
showSaveAsDialog, showAddCommandDialog, showEditCommandDialog
|
|||
|
|
} from './model-config/dialogs.js';
|
|||
|
|
|
|||
|
|
import {
|
|||
|
|
getStyles
|
|||
|
|
} from './model-config/styles.js';
|
|||
|
|
|
|||
|
|
class ModelConfig extends HTMLElement {
|
|||
|
|
constructor() {
|
|||
|
|
super();
|
|||
|
|
this.attachShadow({ mode: 'open' });
|
|||
|
|
this.selectedFile = null;
|
|||
|
|
this.xmlContent = '';
|
|||
|
|
this.xmlDoc = null;
|
|||
|
|
this.isEdited = false;
|
|||
|
|
this.modelFiles = [];
|
|||
|
|
this.isActive = true; // 添加活动状态标记
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async connectedCallback() {
|
|||
|
|
this.isActive = true;
|
|||
|
|
this.render();
|
|||
|
|
await this.loadModelFiles();
|
|||
|
|
this.setupEventListeners();
|
|||
|
|
|
|||
|
|
// 延迟调用renderComplete，确保DOM已更新
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.renderComplete();
|
|||
|
|
}, 100);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
disconnectedCallback() {
|
|||
|
|
this.isActive = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 在组件完成渲染后恢复状态（与run-env-config组件一致）
|
|||
|
|
renderComplete() {
|
|||
|
|
// 在DOM渲染完成后更新文件选择器
|
|||
|
|
setTimeout(() => {
|
|||
|
|
// 如果有选中的文件，尝试恢复它
|
|||
|
|
if (this.selectedFile && (this.xmlContent || this.xmlDoc)) {
|
|||
|
|
const fileSelector = this.shadowRoot.getElementById('fileSelector');
|
|||
|
|
if (fileSelector) {
|
|||
|
|
// 确认文件在列表中
|
|||
|
|
const fileExists = Array.from(fileSelector.options).some(opt => opt.value === this.selectedFile);
|
|||
|
|
|
|||
|
|
if (fileExists) {
|
|||
|
|
// 设置选中的文件
|
|||
|
|
fileSelector.value = this.selectedFile;
|
|||
|
|
|
|||
|
|
// 更新内容显示
|
|||
|
|
const contentArea = this.shadowRoot.querySelector('#contentArea');
|
|||
|
|
if (contentArea && this.xmlDoc) {
|
|||
|
|
contentArea.innerHTML = `
|
|||
|
|
<div class="editor-container">
|
|||
|
|
<div class="editor-panel active" id="visualEditor"></div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
const visualEditor = this.shadowRoot.querySelector('#visualEditor');
|
|||
|
|
if (visualEditor) {
|
|||
|
|
this.renderVisualEditor(visualEditor, this.xmlDoc);
|
|||
|
|
|
|||
|
|
// 恢复编辑状态标记
|
|||
|
|
if (this.isEdited) {
|
|||
|
|
this.markEdited();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
console.log('ModelConfig: 无法找到内容区域或XML文档不存在');
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 文件不存在，清除状态
|
|||
|
|
this.selectedFile = null;
|
|||
|
|
this.xmlContent = '';
|
|||
|
|
this.xmlDoc = null;
|
|||
|
|
this.isEdited = false;
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
console.log('ModelConfig: 未找到文件选择器');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, 50); // 增加延迟确保DOM已经完全加载
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 重新激活组件的方法（当标签页重新被选中时调用）
|
|||
|
|
async reactivate() {
|
|||
|
|
if (this.isActive) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.isActive = true;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 先重新渲染一次UI以确保Shadow DOM结构完整
|
|||
|
|
this.render();
|
|||
|
|
|
|||
|
|
// 加载文件列表
|
|||
|
|
await this.loadModelFiles();
|
|||
|
|
|
|||
|
|
// 设置事件监听器
|
|||
|
|
this.setupEventListeners();
|
|||
|
|
|
|||
|
|
// 调用renderComplete来恢复状态（这是核心改进）
|
|||
|
|
this.renderComplete();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('ModelConfig: 重新激活组件时出错:', error);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async loadModelFiles() {
|
|||
|
|
try {
|
|||
|
|
this.modelFiles = await apiLoadModelFiles();
|
|||
|
|
this.updateFileSelector();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载模型文件失败:', error);
|
|||
|
|
|
|||
|
|
// 如果请求失败，可能是API不存在，等待一段时间后重试
|
|||
|
|
const retryLoadFiles = async () => {
|
|||
|
|
try {
|
|||
|
|
console.log('尝试重新加载模型文件列表...');
|
|||
|
|
this.modelFiles = await apiLoadModelFiles();
|
|||
|
|
this.updateFileSelector();
|
|||
|
|
} catch (retryError) {
|
|||
|
|
console.error('重试加载模型文件失败:', retryError);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 延迟3秒后重试
|
|||
|
|
setTimeout(retryLoadFiles, 3000);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
updateFileSelector() {
|
|||
|
|
const fileSelector = this.shadowRoot.getElementById('fileSelector');
|
|||
|
|
if (!fileSelector) return;
|
|||
|
|
|
|||
|
|
// 清空现有选项
|
|||
|
|
fileSelector.innerHTML = '<option value="">-- 选择模型配置文件 --</option>';
|
|||
|
|
|
|||
|
|
// 按修改时间排序，最新的在前面
|
|||
|
|
const sortedFiles = [...this.modelFiles].sort((a, b) =>
|
|||
|
|
new Date(b.mtime) - new Date(a.mtime)
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 添加文件到选择器
|
|||
|
|
sortedFiles.forEach(file => {
|
|||
|
|
const option = document.createElement('option');
|
|||
|
|
option.value = file.path;
|
|||
|
|
option.textContent = file.name;
|
|||
|
|
fileSelector.appendChild(option);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async loadFileContent(filePath) {
|
|||
|
|
try {
|
|||
|
|
const content = await apiLoadFileContent(filePath);
|
|||
|
|
this.selectedFile = filePath;
|
|||
|
|
this.xmlContent = content;
|
|||
|
|
|
|||
|
|
// 解析XML内容
|
|||
|
|
const { xmlDoc, error, basicXml } = parseXmlContent(content);
|
|||
|
|
|
|||
|
|
if (error && !basicXml) {
|
|||
|
|
// 显示错误信息
|
|||
|
|
const configContent = this.shadowRoot.querySelector('.config-content');
|
|||
|
|
configContent.innerHTML = `
|
|||
|
|
<div class="error-message">
|
|||
|
|
<h3>XML解析错误</h3>
|
|||
|
|
<p>文件内容不是有效的XML格式。</p>
|
|||
|
|
<pre>${escapeHtml(content)}</pre>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.xmlDoc = xmlDoc;
|
|||
|
|
|
|||
|
|
if (basicXml) {
|
|||
|
|
this.xmlContent = basicXml;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 特殊处理CommandList元素，确保命令以属性方式存储
|
|||
|
|
ensureCommandListFormat(this.xmlDoc);
|
|||
|
|
|
|||
|
|
this.updateFileContent();
|
|||
|
|
this.resetEditState();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载文件内容失败:', error);
|
|||
|
|
const configContent = this.shadowRoot.querySelector('.config-content');
|
|||
|
|
configContent.innerHTML = `
|
|||
|
|
<div class="error-message">
|
|||
|
|
<h3>加载失败</h3>
|
|||
|
|
<p>${error.message}</p>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
updateFileContent() {
|
|||
|
|
const contentArea = this.shadowRoot.querySelector('#contentArea');
|
|||
|
|
|
|||
|
|
if (!this.xmlDoc || !this.selectedFile) {
|
|||
|
|
contentArea.innerHTML = `<div class="no-file-selected">请选择一个模型配置文件查看内容</div>`;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
contentArea.innerHTML = `
|
|||
|
|
<div class="editor-container">
|
|||
|
|
<div class="editor-panel active" id="visualEditor"></div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
const visualEditor = this.shadowRoot.querySelector('#visualEditor');
|
|||
|
|
this.renderVisualEditor(visualEditor, this.xmlDoc);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
render() {
|
|||
|
|
this.shadowRoot.innerHTML = `
|
|||
|
|
<style>${getStyles()}</style>
|
|||
|
|
<div class="config-container">
|
|||
|
|
<div class="config-header">
|
|||
|
|
<div class="file-selector-header">
|
|||
|
|
<div class="file-selector-label">模型配置文件：</div>
|
|||
|
|
<select id="fileSelector">
|
|||
|
|
<option value="">-- 请选择模型配置文件 --</option>
|
|||
|
|
</select>
|
|||
|
|
<button class="refresh-button" id="refreshFiles" 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 id="contentArea">
|
|||
|
|
<div class="no-file-selected">请选择一个模型配置文件查看内容</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setupEventListeners() {
|
|||
|
|
// 文件选择器
|
|||
|
|
const fileSelector = this.shadowRoot.getElementById('fileSelector');
|
|||
|
|
fileSelector.addEventListener('change', async (e) => {
|
|||
|
|
const filePath = e.target.value;
|
|||
|
|
if (filePath) {
|
|||
|
|
// 检查是否需要保存当前文件
|
|||
|
|
if (await this.checkSaveNeeded()) {
|
|||
|
|
this.loadFileContent(filePath);
|
|||
|
|
} else {
|
|||
|
|
// 如果用户取消或保存失败，恢复选择器的值
|
|||
|
|
fileSelector.value = this.selectedFile || '';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 刷新文件列表
|
|||
|
|
const refreshButton = this.shadowRoot.getElementById('refreshFiles');
|
|||
|
|
refreshButton.addEventListener('click', async () => {
|
|||
|
|
// 检查是否需要保存当前文件
|
|||
|
|
if (await this.checkSaveNeeded()) {
|
|||
|
|
refreshButton.classList.add('refreshing');
|
|||
|
|
try {
|
|||
|
|
// 重新加载文件列表
|
|||
|
|
await this.loadModelFiles();
|
|||
|
|
|
|||
|
|
// 清除编辑状态和内容
|
|||
|
|
this.resetEditState();
|
|||
|
|
|
|||
|
|
// 清空内容区域
|
|||
|
|
this.xmlContent = '';
|
|||
|
|
this.xmlDoc = null;
|
|||
|
|
|
|||
|
|
const contentArea = this.shadowRoot.querySelector('#contentArea');
|
|||
|
|
if (contentArea) {
|
|||
|
|
contentArea.innerHTML = `<div class="no-file-selected">请选择一个模型配置文件查看内容</div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 清空文件选择
|
|||
|
|
const fileSelector = this.shadowRoot.getElementById('fileSelector');
|
|||
|
|
if (fileSelector) {
|
|||
|
|
fileSelector.value = '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 重置选中的文件
|
|||
|
|
this.selectedFile = null;
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('刷新文件列表失败:', error);
|
|||
|
|
alert('刷新文件列表失败: ' + error.message);
|
|||
|
|
} finally {
|
|||
|
|
// 无论成功失败，都移除刷新动画
|
|||
|
|
setTimeout(() => {
|
|||
|
|
refreshButton.classList.remove('refreshing');
|
|||
|
|
}, 500);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 如果用户点击取消，什么也不做，保留当前内容
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 新建配置
|
|||
|
|
const newButton = this.shadowRoot.getElementById('newConfig');
|
|||
|
|
newButton.addEventListener('click', async () => {
|
|||
|
|
// 检查是否需要保存当前文件
|
|||
|
|
if (await this.checkSaveNeeded()) {
|
|||
|
|
showNewConfigDialog(async (result) => {
|
|||
|
|
await this.loadModelFiles();
|
|||
|
|
await this.loadFileContent(result.path);
|
|||
|
|
}, this);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 保存配置
|
|||
|
|
const saveButton = this.shadowRoot.getElementById('saveConfig');
|
|||
|
|
saveButton.addEventListener('click', async () => {
|
|||
|
|
if (!this.selectedFile) {
|
|||
|
|
alert('请先选择一个文件或创建新文件');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
await this.saveCurrentFile();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 另存为
|
|||
|
|
const saveAsButton = this.shadowRoot.getElementById('saveAsConfig');
|
|||
|
|
saveAsButton.addEventListener('click', () => {
|
|||
|
|
if (!this.xmlContent) {
|
|||
|
|
alert('没有内容可保存');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
showSaveAsDialog(this.xmlContent, this.selectedFile, async (result) => {
|
|||
|
|
this.selectedFile = result.path;
|
|||
|
|
this.resetEditState();
|
|||
|
|
await this.loadModelFiles();
|
|||
|
|
}, this);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
renderVisualEditor(container, xmlDoc) {
|
|||
|
|
if (!xmlDoc || !container) return;
|
|||
|
|
|
|||
|
|
// 添加样式
|
|||
|
|
const style = document.createElement('style');
|
|||
|
|
style.textContent = `
|
|||
|
|
.visual-editor {
|
|||
|
|
padding: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
color: #333;
|
|||
|
|
border-bottom: 1px solid #e0e0e0;
|
|||
|
|
padding-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
background-color: white;
|
|||
|
|
border: 1px solid #e0e0e0;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
padding: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.property-row {
|
|||
|
|
display: flex;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.property-label {
|
|||
|
|
width: 150px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #555;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.property-input {
|
|||
|
|
flex: 1;
|
|||
|
|
padding: 8px 10px;
|
|||
|
|
border: 1px solid #ddd;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.property-input:focus {
|
|||
|
|
border-color: #7986E7;
|
|||
|
|
outline: none;
|
|||
|
|
box-shadow: 0 0 0 2px rgba(121, 134, 231, 0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title-text {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-buttons {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-button {
|
|||
|
|
background-color: #7986E7;
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
padding: 6px 12px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 14px;
|
|||
|
|
transition: background-color 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-button:hover {
|
|||
|
|
background-color: #6875D6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.error-message {
|
|||
|
|
color: #d32f2f;
|
|||
|
|
background-color: #ffebee;
|
|||
|
|
padding: 10px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
const visualEditor = document.createElement('div');
|
|||
|
|
visualEditor.className = 'visual-editor';
|
|||
|
|
|
|||
|
|
// 获取根元素
|
|||
|
|
const rootElement = xmlDoc.documentElement;
|
|||
|
|
|
|||
|
|
// 只处理Model根元素
|
|||
|
|
if (rootElement.nodeName === 'Model') {
|
|||
|
|
// 创建模态对话框容器
|
|||
|
|
const modalContainer = document.createElement('div');
|
|||
|
|
modalContainer.className = 'modal';
|
|||
|
|
modalContainer.id = 'propertyModal';
|
|||
|
|
container.appendChild(modalContainer);
|
|||
|
|
|
|||
|
|
// 渲染基本信息部分
|
|||
|
|
renderBasicInfoSection(
|
|||
|
|
visualEditor,
|
|||
|
|
rootElement,
|
|||
|
|
xmlDoc,
|
|||
|
|
(inputElement) => this.showDateTimeDialogWrapper(inputElement),
|
|||
|
|
() => this.markEdited()
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 渲染高级设置部分
|
|||
|
|
renderAdvancedSection(
|
|||
|
|
visualEditor,
|
|||
|
|
rootElement,
|
|||
|
|
xmlDoc,
|
|||
|
|
(container, rootElement) => this.renderCommandListTableWrapper(container, rootElement),
|
|||
|
|
() => this.markEdited()
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 渲染其他设置部分
|
|||
|
|
renderOtherSettingsSection(
|
|||
|
|
visualEditor,
|
|||
|
|
rootElement,
|
|||
|
|
(container, parentElement, parentPath, level = 0) => this.renderElementsWrapper(
|
|||
|
|
container, parentElement, parentPath, level
|
|||
|
|
)
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
// 不是Model根元素，显示错误信息
|
|||
|
|
visualEditor.innerHTML = `<div class="error-message">
|
|||
|
|
无法编辑：XML文档的根元素不是Model。
|
|||
|
|
请确保XML文档的根元素是Model。
|
|||
|
|
</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(); // 更新XML
|
|||
|
|
this.markEdited(); // 标记已编辑
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示日期时间对话框包装方法
|
|||
|
|
showDateTimeDialogWrapper(inputElement) {
|
|||
|
|
showDateTimeDialog(inputElement, this.xmlDoc, () => this.markEdited(), this);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 渲染命令列表表格包装方法
|
|||
|
|
renderCommandListTableWrapper(container, rootElement) {
|
|||
|
|
renderCommandListTable(
|
|||
|
|
container,
|
|||
|
|
rootElement,
|
|||
|
|
(rootElement) => this.showAddCommandDialogWrapper(rootElement),
|
|||
|
|
(command, index) => this.showEditCommandDialogWrapper(command, index),
|
|||
|
|
(command, index) => this.deleteCommandWrapper(command, index)
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 渲染元素包装方法
|
|||
|
|
renderElementsWrapper(container, parentElement, parentPath, level = 0) {
|
|||
|
|
renderElements(
|
|||
|
|
container,
|
|||
|
|
parentElement,
|
|||
|
|
parentPath,
|
|||
|
|
level,
|
|||
|
|
isValidElementName,
|
|||
|
|
(path, value) => this.updateElementByPathWrapper(path, value),
|
|||
|
|
(element, elementPath) => this.deleteElementWrapper(element, elementPath),
|
|||
|
|
(parentElement, name, value) => this.addElementWrapper(parentElement, name, value),
|
|||
|
|
(parentElement, parentPath) => this.showAddElementDialogWrapper(parentElement, parentPath),
|
|||
|
|
(element, elementPath) => this.showEditElementDialogWrapper(element, elementPath)
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新元素路径包装方法
|
|||
|
|
updateElementByPathWrapper(path, value) {
|
|||
|
|
if (updateElementByPath(this.xmlDoc, path, value)) {
|
|||
|
|
this.updateXmlFromVisualEditor();
|
|||
|
|
this.markEdited();
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 删除元素包装方法
|
|||
|
|
deleteElementWrapper(element, elementPath) {
|
|||
|
|
// 确认删除
|
|||
|
|
if (!confirm(`确定要删除元素 ${element.nodeName} 吗？此操作不可撤销。`)) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (deleteElement(element)) {
|
|||
|
|
this.updateXmlFromVisualEditor();
|
|||
|
|
this.markEdited();
|
|||
|
|
|
|||
|
|
// 重新渲染元素列表
|
|||
|
|
const container = this.shadowRoot.querySelector('#otherSettingsContainer');
|
|||
|
|
if (container) {
|
|||
|
|
container.innerHTML = '';
|
|||
|
|
this.renderElementsWrapper(container, this.xmlDoc.documentElement, '/' + this.xmlDoc.documentElement.nodeName);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 添加元素包装方法
|
|||
|
|
addElementWrapper(parentElement, name, value) {
|
|||
|
|
const newElement = addElement(this.xmlDoc, parentElement, name, value);
|
|||
|
|
if (newElement) {
|
|||
|
|
this.updateXmlFromVisualEditor();
|
|||
|
|
this.markEdited();
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示添加元素对话框包装方法
|
|||
|
|
showAddElementDialogWrapper(parentElement, parentPath) {
|
|||
|
|
showAddElementDialog(parentElement, parentPath, this.xmlDoc, () => {
|
|||
|
|
this.updateXmlFromVisualEditor();
|
|||
|
|
this.markEdited();
|
|||
|
|
|
|||
|
|
// 重新渲染元素列表
|
|||
|
|
const container = this.shadowRoot.querySelector('#otherSettingsContainer');
|
|||
|
|
if (container) {
|
|||
|
|
container.innerHTML = '';
|
|||
|
|
this.renderElementsWrapper(container, this.xmlDoc.documentElement, '/' + this.xmlDoc.documentElement.nodeName);
|
|||
|
|
}
|
|||
|
|
}, this);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示编辑元素对话框包装方法
|
|||
|
|
showEditElementDialogWrapper(element, elementPath) {
|
|||
|
|
showEditElementDialog(element, elementPath, this.xmlDoc, () => {
|
|||
|
|
this.updateXmlFromVisualEditor();
|
|||
|
|
this.markEdited();
|
|||
|
|
|
|||
|
|
// 更新UI中的值
|
|||
|
|
const inputElement = this.shadowRoot.querySelector(`input[data-path="${elementPath}"]`);
|
|||
|
|
if (inputElement) {
|
|||
|
|
inputElement.value = element.textContent;
|
|||
|
|
}
|
|||
|
|
}, this);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示添加命令对话框包装方法
|
|||
|
|
showAddCommandDialogWrapper(rootElement) {
|
|||
|
|
showAddCommandDialog(rootElement, this.xmlDoc, () => {
|
|||
|
|
this.updateXmlFromVisualEditor();
|
|||
|
|
this.markEdited();
|
|||
|
|
|
|||
|
|
// 重新渲染命令列表
|
|||
|
|
const commandListContainer = this.shadowRoot.querySelector('#commandListContainer');
|
|||
|
|
const visualEditor = this.shadowRoot.querySelector('#visualEditor');
|
|||
|
|
if (commandListContainer && visualEditor) {
|
|||
|
|
// 清空当前渲染
|
|||
|
|
visualEditor.innerHTML = '';
|
|||
|
|
// 重新渲染整个编辑器
|
|||
|
|
this.renderVisualEditor(visualEditor, this.xmlDoc);
|
|||
|
|
}
|
|||
|
|
}, this);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示编辑命令对话框包装方法
|
|||
|
|
showEditCommandDialogWrapper(commandElement, index) {
|
|||
|
|
showEditCommandDialog(commandElement, index, () => {
|
|||
|
|
this.updateXmlFromVisualEditor();
|
|||
|
|
this.markEdited();
|
|||
|
|
|
|||
|
|
// 更新表格行
|
|||
|
|
const row = this.shadowRoot.querySelector(`.command-row[data-index="${index}"]`);
|
|||
|
|
if (row) {
|
|||
|
|
const name = commandElement.getAttribute('Name') || '';
|
|||
|
|
const call = commandElement.getAttribute('Call') || '';
|
|||
|
|
const description = commandElement.getAttribute('Description') || '';
|
|||
|
|
|
|||
|
|
row.querySelectorAll('.command-cell')[0].textContent = name;
|
|||
|
|
row.querySelectorAll('.command-cell')[1].textContent = call;
|
|||
|
|
row.querySelectorAll('.command-cell')[2].textContent = description || `${name}描述`;
|
|||
|
|
} else {
|
|||
|
|
// 如果找不到行，重新渲染整个编辑器
|
|||
|
|
const visualEditor = this.shadowRoot.querySelector('#visualEditor');
|
|||
|
|
if (visualEditor) {
|
|||
|
|
visualEditor.innerHTML = '';
|
|||
|
|
this.renderVisualEditor(visualEditor, this.xmlDoc);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, this);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 删除命令包装方法
|
|||
|
|
deleteCommandWrapper(commandElement, index) {
|
|||
|
|
if (!confirm('确定要删除此命令吗？此操作不可撤销。')) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (deleteElement(commandElement)) {
|
|||
|
|
this.updateXmlFromVisualEditor();
|
|||
|
|
this.markEdited();
|
|||
|
|
|
|||
|
|
// 从表格中移除行
|
|||
|
|
const row = this.shadowRoot.querySelector(`.command-row[data-index="${index}"]`);
|
|||
|
|
if (row) {
|
|||
|
|
row.parentNode.removeChild(row);
|
|||
|
|
|
|||
|
|
// 更新索引
|
|||
|
|
const rows = this.shadowRoot.querySelectorAll('.command-row');
|
|||
|
|
rows.forEach((r, i) => {
|
|||
|
|
r.dataset.index = i;
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
// 如果找不到行，重新渲染整个编辑器
|
|||
|
|
const visualEditor = this.shadowRoot.querySelector('#visualEditor');
|
|||
|
|
if (visualEditor) {
|
|||
|
|
visualEditor.innerHTML = '';
|
|||
|
|
this.renderVisualEditor(visualEditor, this.xmlDoc);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 从可视化编辑器更新XML
|
|||
|
|
updateXmlFromVisualEditor() {
|
|||
|
|
if (!this.xmlDoc) return;
|
|||
|
|
|
|||
|
|
this.xmlContent = updateXmlFromVisualEditor(this.xmlDoc);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 标记为已编辑
|
|||
|
|
markEdited() {
|
|||
|
|
this.isEdited = true;
|
|||
|
|
// 更新保存按钮样式
|
|||
|
|
const saveButton = this.shadowRoot.getElementById('saveConfig');
|
|||
|
|
if (saveButton) {
|
|||
|
|
saveButton.classList.add('modified');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 重置编辑状态
|
|||
|
|
resetEditState() {
|
|||
|
|
this.isEdited = false;
|
|||
|
|
// 更新保存按钮样式
|
|||
|
|
const saveButton = this.shadowRoot.getElementById('saveConfig');
|
|||
|
|
if (saveButton) {
|
|||
|
|
saveButton.classList.remove('modified');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新命令列表部分
|
|||
|
|
updateCommandListSection() {
|
|||
|
|
if (!this.xmlDoc) return;
|
|||
|
|
|
|||
|
|
const visualEditorContainer = document.getElementById('visualEditorContainer');
|
|||
|
|
if (!visualEditorContainer) return;
|
|||
|
|
|
|||
|
|
// 移除已有的命令列表容器
|
|||
|
|
const existingContainer = document.getElementById('commandListContainer');
|
|||
|
|
if (existingContainer) {
|
|||
|
|
existingContainer.remove();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取根元素和命令列表元素
|
|||
|
|
const rootElement = this.xmlDoc.documentElement;
|
|||
|
|
const commandListElement = ensureCommandListFormat(this.xmlDoc);
|
|||
|
|
|
|||
|
|
// 渲染命令列表
|
|||
|
|
renderCommandList(
|
|||
|
|
visualEditorContainer,
|
|||
|
|
commandListElement,
|
|||
|
|
rootElement,
|
|||
|
|
(rootElement) => this.showAddCommandDialogWrapper(rootElement),
|
|||
|
|
(command, index) => this.showEditCommandDialogWrapper(command, index),
|
|||
|
|
(command, index) => this.deleteCommandWrapper(command, index)
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 添加检查未保存更改的方法
|
|||
|
|
async checkSaveNeeded() {
|
|||
|
|
if (this.isEdited) {
|
|||
|
|
// 使用自定义对话框替代简单的confirm
|
|||
|
|
const dialogResult = await new Promise(resolve => {
|
|||
|
|
// 创建模态框
|
|||
|
|
const modal = document.createElement('div');
|
|||
|
|
modal.className = 'modal';
|
|||
|
|
modal.id = 'saveConfirmModal';
|
|||
|
|
|
|||
|
|
modal.innerHTML = `
|
|||
|
|
<style>
|
|||
|
|
.modal {
|
|||
|
|
display: block;
|
|||
|
|
position: fixed;
|
|||
|
|
z-index: 1000;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
overflow: auto;
|
|||
|
|
background-color: rgba(0,0,0,0.4);
|
|||
|
|
}
|
|||
|
|
.modal-content {
|
|||
|
|
background-color: #fefefe;
|
|||
|
|
margin: 15% auto;
|
|||
|
|
padding: 20px;
|
|||
|
|
border: 1px solid #888;
|
|||
|
|
width: 80%;
|
|||
|
|
max-width: 400px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
position: relative;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.modal-title {
|
|||
|
|
margin-top: 0;
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 18px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
.modal-buttons {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
}
|
|||
|
|
.btn {
|
|||
|
|
padding: 8px 15px;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 14px;
|
|||
|
|
min-width: 80px;
|
|||
|
|
}
|
|||
|
|
.btn-save {
|
|||
|
|
background-color: #7986E7;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
.btn-save:hover {
|
|||
|
|
background-color: #6875D6;
|
|||
|
|
}
|
|||
|
|
.btn-dont-save {
|
|||
|
|
background-color: #E77979;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
.btn-dont-save:hover {
|
|||
|
|
background-color: #D66868;
|
|||
|
|
}
|
|||
|
|
.btn-cancel {
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
.btn-cancel:hover {
|
|||
|
|
background-color: #e0e0e0;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<div class="modal-content">
|
|||
|
|
<h3 class="modal-title">当前文件有未保存的更改</h3>
|
|||
|
|
<p>您想要保存这些更改吗？</p>
|
|||
|
|
<div class="modal-buttons">
|
|||
|
|
<button class="btn btn-save" id="saveBtn">保存</button>
|
|||
|
|
<button class="btn btn-dont-save" id="dontSaveBtn">不保存</button>
|
|||
|
|
<button class="btn btn-cancel" id="cancelBtn">取消</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
document.body.appendChild(modal);
|
|||
|
|
|
|||
|
|
// 添加事件监听
|
|||
|
|
const saveBtn = modal.querySelector('#saveBtn');
|
|||
|
|
const dontSaveBtn = modal.querySelector('#dontSaveBtn');
|
|||
|
|
const cancelBtn = modal.querySelector('#cancelBtn');
|
|||
|
|
|
|||
|
|
const closeModal = () => {
|
|||
|
|
document.body.removeChild(modal);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
saveBtn.addEventListener('click', () => {
|
|||
|
|
closeModal();
|
|||
|
|
resolve('save');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
dontSaveBtn.addEventListener('click', () => {
|
|||
|
|
closeModal();
|
|||
|
|
resolve('dont-save');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
cancelBtn.addEventListener('click', () => {
|
|||
|
|
closeModal();
|
|||
|
|
resolve('cancel');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 点击模态窗口外部也取消
|
|||
|
|
modal.addEventListener('click', (event) => {
|
|||
|
|
if (event.target === modal) {
|
|||
|
|
closeModal();
|
|||
|
|
resolve('cancel');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 根据对话框结果执行相应操作
|
|||
|
|
if (dialogResult === 'save') {
|
|||
|
|
try {
|
|||
|
|
await this.saveCurrentFile();
|
|||
|
|
return true; // 继续执行后续操作
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('保存出错:', error);
|
|||
|
|
return false; // 保存失败，不继续执行
|
|||
|
|
}
|
|||
|
|
} else if (dialogResult === 'dont-save') {
|
|||
|
|
// 不保存，但继续执行后续操作
|
|||
|
|
return true;
|
|||
|
|
} else {
|
|||
|
|
// 用户取消，不执行后续操作
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 没有编辑状态，直接返回true允许继续操作
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 检查未保存更改 (兼容旧版的使用)
|
|||
|
|
checkUnsavedChanges() {
|
|||
|
|
// 由于无法同步返回Promise结果，这个方法保留为返回布尔值
|
|||
|
|
// 但为了向前兼容，仍保留这个方法
|
|||
|
|
return this.isEdited;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 保存当前文件
|
|||
|
|
async saveCurrentFile() {
|
|||
|
|
if (!this.selectedFile || !this.isEdited) return false;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
await apiSaveFileContent(this.selectedFile, this.xmlContent);
|
|||
|
|
this.resetEditState();
|
|||
|
|
return true;
|
|||
|
|
} catch (error) {
|
|||
|
|
alert('保存失败: ' + error.message);
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
customElements.define('model-config', ModelConfig);
|