700 lines
24 KiB
JavaScript
700 lines
24 KiB
JavaScript
|
/**
|
|||
|
|
* 命令对话框模块，处理添加和编辑命令功能
|
|||
|
|
* @type {module}
|
|||
|
|
*/
|
|||
|
|
import { XmlUtils } from './xml-utils.js';
|
|||
|
|
|
|||
|
|
export class CommandDialog {
|
|||
|
|
/**
|
|||
|
|
* 显示添加命令对话框
|
|||
|
|
* @param {HTMLElement} parentElement - 父元素，用于挂载对话框
|
|||
|
|
* @param {Element} commandListElement - XML 命令列表元素
|
|||
|
|
* @param {Document} xmlDoc - XML文档
|
|||
|
|
* @param {Function} onSuccess - 成功回调函数
|
|||
|
|
*/
|
|||
|
|
static showAddDialog(parentElement, commandListElement, xmlDoc, onSuccess) {
|
|||
|
|
// 创建模态框
|
|||
|
|
const modal = document.createElement('div');
|
|||
|
|
modal.className = 'modal';
|
|||
|
|
modal.id = 'addCommandModal';
|
|||
|
|
|
|||
|
|
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: 10% auto;
|
|||
|
|
padding: 20px;
|
|||
|
|
border: 1px solid #888;
|
|||
|
|
width: 50%;
|
|||
|
|
max-width: 500px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-title {
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 18px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.close {
|
|||
|
|
color: #aaa;
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.close:hover {
|
|||
|
|
color: black;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-footer {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
gap: 10px;
|
|||
|
|
margin-top: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-group {
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-group label {
|
|||
|
|
display: block;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-control {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 8px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border: 1px solid #ccc;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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:hover {
|
|||
|
|
background-color: #6875D6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-button.secondary {
|
|||
|
|
background-color: #f0f0f0;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-button.secondary:hover {
|
|||
|
|
background-color: #e0e0e0;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<div class="modal-content">
|
|||
|
|
<div class="modal-header">
|
|||
|
|
<div class="modal-title">添加指令</div>
|
|||
|
|
<span class="close">×</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-body">
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="commandName">指令名称</label>
|
|||
|
|
<input type="text" id="commandName" class="form-control" placeholder="输入指令名称" />
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="commandCall">指令调用</label>
|
|||
|
|
<input type="text" id="commandCall" class="form-control" placeholder="输入指令调用" />
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="commandDescription">指令描述</label>
|
|||
|
|
<input type="text" id="commandDescription" class="form-control" placeholder="输入指令描述" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-footer">
|
|||
|
|
<button id="cancelAddCommand" class="action-button secondary">取消</button>
|
|||
|
|
<button id="confirmAddCommand" class="action-button">添加</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
// 添加到父元素
|
|||
|
|
parentElement.appendChild(modal);
|
|||
|
|
|
|||
|
|
// 事件处理
|
|||
|
|
const closeBtn = modal.querySelector('.close');
|
|||
|
|
const cancelBtn = modal.querySelector('#cancelAddCommand');
|
|||
|
|
const confirmBtn = modal.querySelector('#confirmAddCommand');
|
|||
|
|
const nameInput = modal.querySelector('#commandName');
|
|||
|
|
const callInput = modal.querySelector('#commandCall');
|
|||
|
|
const descInput = modal.querySelector('#commandDescription');
|
|||
|
|
|
|||
|
|
const closeModal = () => {
|
|||
|
|
if (parentElement.contains(modal)) {
|
|||
|
|
parentElement.removeChild(modal);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
closeBtn.addEventListener('click', closeModal);
|
|||
|
|
cancelBtn.addEventListener('click', closeModal);
|
|||
|
|
|
|||
|
|
confirmBtn.addEventListener('click', () => {
|
|||
|
|
const name = nameInput.value.trim();
|
|||
|
|
const call = callInput.value.trim();
|
|||
|
|
const description = descInput.value.trim();
|
|||
|
|
|
|||
|
|
if (!name) {
|
|||
|
|
alert('指令名称不能为空');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 创建新命令元素
|
|||
|
|
const newCommand = xmlDoc.createElement('Command');
|
|||
|
|
newCommand.setAttribute('Name', name);
|
|||
|
|
newCommand.setAttribute('Call', call);
|
|||
|
|
newCommand.setAttribute('Description', description || `${name}描述`);
|
|||
|
|
|
|||
|
|
// 添加到命令列表
|
|||
|
|
commandListElement.appendChild(newCommand);
|
|||
|
|
|
|||
|
|
// 调用成功回调
|
|||
|
|
if (onSuccess) {
|
|||
|
|
onSuccess();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
closeModal();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('添加指令失败:', error);
|
|||
|
|
alert('添加指令失败: ' + error.message);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 点击模态窗口外部关闭
|
|||
|
|
modal.addEventListener('click', (event) => {
|
|||
|
|
if (event.target === modal) {
|
|||
|
|
closeModal();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 显示编辑命令对话框
|
|||
|
|
* @param {HTMLElement} parentElement - 父元素，用于挂载对话框
|
|||
|
|
* @param {Element} commandElement - 要编辑的命令元素
|
|||
|
|
* @param {number} index - 命令索引
|
|||
|
|
* @param {Function} onSuccess - 成功回调函数
|
|||
|
|
*/
|
|||
|
|
static showEditDialog(parentElement, commandElement, index, onSuccess) {
|
|||
|
|
// 获取当前命令属性
|
|||
|
|
const name = commandElement.getAttribute('Name') || '';
|
|||
|
|
const call = commandElement.getAttribute('Call') || '';
|
|||
|
|
const description = commandElement.getAttribute('Description') || '';
|
|||
|
|
|
|||
|
|
// 创建模态框
|
|||
|
|
const modal = document.createElement('div');
|
|||
|
|
modal.className = 'modal';
|
|||
|
|
modal.id = 'editCommandModal';
|
|||
|
|
|
|||
|
|
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: 10% auto;
|
|||
|
|
padding: 20px;
|
|||
|
|
border: 1px solid #888;
|
|||
|
|
width: 50%;
|
|||
|
|
max-width: 500px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-title {
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 18px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.close {
|
|||
|
|
color: #aaa;
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.close:hover {
|
|||
|
|
color: black;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-footer {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
gap: 10px;
|
|||
|
|
margin-top: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-group {
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-group label {
|
|||
|
|
display: block;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-control {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 8px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border: 1px solid #ccc;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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:hover {
|
|||
|
|
background-color: #6875D6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-button.secondary {
|
|||
|
|
background-color: #f0f0f0;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-button.secondary:hover {
|
|||
|
|
background-color: #e0e0e0;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<div class="modal-content">
|
|||
|
|
<div class="modal-header">
|
|||
|
|
<div class="modal-title">编辑指令</div>
|
|||
|
|
<span class="close">×</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-body">
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="commandName">指令名称</label>
|
|||
|
|
<input type="text" id="commandName" class="form-control" value="${XmlUtils.escapeHtml(name)}" placeholder="输入指令名称" />
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="commandCall">指令调用</label>
|
|||
|
|
<input type="text" id="commandCall" class="form-control" value="${XmlUtils.escapeHtml(call)}" placeholder="输入指令调用" />
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="commandDescription">指令描述</label>
|
|||
|
|
<input type="text" id="commandDescription" class="form-control" value="${XmlUtils.escapeHtml(description)}" placeholder="输入指令描述" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-footer">
|
|||
|
|
<button id="cancelEditCommand" class="action-button secondary">取消</button>
|
|||
|
|
<button id="confirmEditCommand" class="action-button">保存</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
// 添加到父元素
|
|||
|
|
parentElement.appendChild(modal);
|
|||
|
|
|
|||
|
|
// 事件处理
|
|||
|
|
const closeBtn = modal.querySelector('.close');
|
|||
|
|
const cancelBtn = modal.querySelector('#cancelEditCommand');
|
|||
|
|
const confirmBtn = modal.querySelector('#confirmEditCommand');
|
|||
|
|
const nameInput = modal.querySelector('#commandName');
|
|||
|
|
const callInput = modal.querySelector('#commandCall');
|
|||
|
|
const descInput = modal.querySelector('#commandDescription');
|
|||
|
|
|
|||
|
|
const closeModal = () => {
|
|||
|
|
if (parentElement.contains(modal)) {
|
|||
|
|
parentElement.removeChild(modal);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
closeBtn.addEventListener('click', closeModal);
|
|||
|
|
cancelBtn.addEventListener('click', closeModal);
|
|||
|
|
|
|||
|
|
confirmBtn.addEventListener('click', () => {
|
|||
|
|
const newName = nameInput.value.trim();
|
|||
|
|
const newCall = callInput.value.trim();
|
|||
|
|
const newDescription = descInput.value.trim();
|
|||
|
|
|
|||
|
|
if (!newName) {
|
|||
|
|
alert('指令名称不能为空');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 更新命令属性
|
|||
|
|
commandElement.setAttribute('Name', newName);
|
|||
|
|
commandElement.setAttribute('Call', newCall);
|
|||
|
|
commandElement.setAttribute('Description', newDescription || `${newName}描述`);
|
|||
|
|
|
|||
|
|
// 调用成功回调
|
|||
|
|
if (onSuccess) {
|
|||
|
|
onSuccess();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
closeModal();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('编辑指令失败:', error);
|
|||
|
|
alert('编辑指令失败: ' + error.message);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 点击模态窗口外部关闭
|
|||
|
|
modal.addEventListener('click', (event) => {
|
|||
|
|
if (event.target === modal) {
|
|||
|
|
closeModal();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 显示新建配置对话框
|
|||
|
|
* @param {Function} onConfirm - 确认回调函数，参数为文件名
|
|||
|
|
*/
|
|||
|
|
static showNewConfigDialog(onConfirm) {
|
|||
|
|
// 创建模态框
|
|||
|
|
const modal = document.createElement('div');
|
|||
|
|
modal.className = 'modal';
|
|||
|
|
modal.id = 'newConfigModal';
|
|||
|
|
|
|||
|
|
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: 500px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.modal-title {
|
|||
|
|
margin-top: 0;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
.close {
|
|||
|
|
color: #aaa;
|
|||
|
|
position: absolute;
|
|||
|
|
right: 20px;
|
|||
|
|
top: 10px;
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.close:hover {
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
.form-group {
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
.form-group label {
|
|||
|
|
display: block;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
.form-group input {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 8px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border: 1px solid #ddd;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
.form-footer {
|
|||
|
|
text-align: right;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
}
|
|||
|
|
.btn {
|
|||
|
|
padding: 8px 15px;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 14px;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
}
|
|||
|
|
.btn-cancel {
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
.btn-confirm {
|
|||
|
|
background-color: #7986E7;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<div class="modal-content">
|
|||
|
|
<span class="close">×</span>
|
|||
|
|
<h3 class="modal-title">新建服务配置文件</h3>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="newFileName">文件名</label>
|
|||
|
|
<input type="text" id="newFileName" placeholder="请输入文件名" />
|
|||
|
|
</div>
|
|||
|
|
<div class="form-footer">
|
|||
|
|
<button class="btn btn-cancel" id="cancelBtn">取消</button>
|
|||
|
|
<button class="btn btn-confirm" id="confirmBtn">创建</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
document.body.appendChild(modal);
|
|||
|
|
|
|||
|
|
const closeBtn = modal.querySelector('.close');
|
|||
|
|
const cancelBtn = modal.querySelector('#cancelBtn');
|
|||
|
|
const confirmBtn = modal.querySelector('#confirmBtn');
|
|||
|
|
const fileNameInput = modal.querySelector('#newFileName');
|
|||
|
|
|
|||
|
|
const closeModal = () => {
|
|||
|
|
document.body.removeChild(modal);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
closeBtn.addEventListener('click', closeModal);
|
|||
|
|
cancelBtn.addEventListener('click', closeModal);
|
|||
|
|
|
|||
|
|
confirmBtn.addEventListener('click', async () => {
|
|||
|
|
let fileName = fileNameInput.value.trim();
|
|||
|
|
|
|||
|
|
if (!fileName) {
|
|||
|
|
alert('请输入文件名');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 确保文件名以.scfg结尾
|
|||
|
|
if (!fileName.toLowerCase().endsWith('.scfg')) {
|
|||
|
|
fileName += '.scfg';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
closeModal();
|
|||
|
|
|
|||
|
|
// 调用确认回调
|
|||
|
|
if (onConfirm) {
|
|||
|
|
onConfirm(fileName);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 处理回车键
|
|||
|
|
fileNameInput.addEventListener('keyup', (e) => {
|
|||
|
|
if (e.key === 'Enter') {
|
|||
|
|
confirmBtn.click();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 打开后聚焦输入框
|
|||
|
|
setTimeout(() => {
|
|||
|
|
fileNameInput.focus();
|
|||
|
|
}, 100);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 显示另存为对话框
|
|||
|
|
* @param {string} currentFileName - 当前文件名
|
|||
|
|
* @param {Function} onConfirm - 确认回调函数，参数为文件名
|
|||
|
|
*/
|
|||
|
|
static showSaveAsDialog(currentFileName, onConfirm) {
|
|||
|
|
// 创建模态框
|
|||
|
|
const modal = document.createElement('div');
|
|||
|
|
modal.className = 'modal';
|
|||
|
|
modal.id = 'saveAsModal';
|
|||
|
|
|
|||
|
|
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: 500px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.modal-title {
|
|||
|
|
margin-top: 0;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
.close {
|
|||
|
|
color: #aaa;
|
|||
|
|
position: absolute;
|
|||
|
|
right: 20px;
|
|||
|
|
top: 10px;
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.close:hover {
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
.form-group {
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
.form-group label {
|
|||
|
|
display: block;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
.form-group input {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 8px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border: 1px solid #ddd;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
.form-footer {
|
|||
|
|
text-align: right;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
}
|
|||
|
|
.btn {
|
|||
|
|
padding: 8px 15px;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 14px;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
}
|
|||
|
|
.btn-cancel {
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
.btn-confirm {
|
|||
|
|
background-color: #7986E7;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<div class="modal-content">
|
|||
|
|
<span class="close">×</span>
|
|||
|
|
<h3 class="modal-title">另存为新文件</h3>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="saveAsFileName">文件名</label>
|
|||
|
|
<input type="text" id="saveAsFileName" placeholder="请输入文件名" />
|
|||
|
|
</div>
|
|||
|
|
<div class="form-footer">
|
|||
|
|
<button class="btn btn-cancel" id="cancelBtn">取消</button>
|
|||
|
|
<button class="btn btn-confirm" id="confirmBtn">保存</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
document.body.appendChild(modal);
|
|||
|
|
|
|||
|
|
const closeBtn = modal.querySelector('.close');
|
|||
|
|
const cancelBtn = modal.querySelector('#cancelBtn');
|
|||
|
|
const confirmBtn = modal.querySelector('#confirmBtn');
|
|||
|
|
const fileNameInput = modal.querySelector('#saveAsFileName');
|
|||
|
|
|
|||
|
|
// 填充当前文件名
|
|||
|
|
if (currentFileName) {
|
|||
|
|
const fileName = currentFileName.split('/').pop();
|
|||
|
|
fileNameInput.value = fileName;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const closeModal = () => {
|
|||
|
|
document.body.removeChild(modal);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
closeBtn.addEventListener('click', closeModal);
|
|||
|
|
cancelBtn.addEventListener('click', closeModal);
|
|||
|
|
|
|||
|
|
confirmBtn.addEventListener('click', () => {
|
|||
|
|
let fileName = fileNameInput.value.trim();
|
|||
|
|
|
|||
|
|
if (!fileName) {
|
|||
|
|
alert('请输入文件名');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 确保文件名以.scfg结尾
|
|||
|
|
if (!fileName.toLowerCase().endsWith('.scfg')) {
|
|||
|
|
fileName += '.scfg';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
closeModal();
|
|||
|
|
|
|||
|
|
// 调用确认回调
|
|||
|
|
if (onConfirm) {
|
|||
|
|
onConfirm(fileName);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 处理回车键
|
|||
|
|
fileNameInput.addEventListener('keyup', (e) => {
|
|||
|
|
if (e.key === 'Enter') {
|
|||
|
|
confirmBtn.click();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 打开后聚焦输入框
|
|||
|
|
setTimeout(() => {
|
|||
|
|
fileNameInput.focus();
|
|||
|
|
fileNameInput.select(); // 全选文本，方便修改
|
|||
|
|
}, 100);
|
|||
|
|
}
|
|||
|
|
}
|