add preset header
This commit is contained in:
wjqserver
parent
47b6f4903f
commit
cc429c44f9
5 changed files with 268 additions and 79 deletions
|
|
@ -15,11 +15,11 @@ export const DOMElements = {
|
|||
headersContainer: document.getElementById('headers-container'),
|
||||
addNewConfigBtn: document.getElementById('add-new-config-btn'),
|
||||
cancelEditBtn: document.getElementById('cancel-edit-btn'),
|
||||
addHeaderBtn: document.getElementById('add-header-btn'),
|
||||
configListContainer: document.getElementById('config-list'),
|
||||
renderedContentCode: document.getElementById('rendered-content'),
|
||||
toastContainer: document.getElementById('toast-container'),
|
||||
dialogContainer: document.getElementById('dialog-container'),
|
||||
modalContainer: document.getElementById('modal-container'),
|
||||
themeToggleInput: document.getElementById('theme-toggle-input'),
|
||||
caddyStatusIndicator: document.getElementById('caddy-status-indicator'),
|
||||
caddyActionButtonContainer: document.getElementById('caddy-action-button-container'),
|
||||
|
|
@ -28,7 +28,6 @@ export const DOMElements = {
|
|||
upstreamFieldset: document.getElementById('upstream-fieldset'),
|
||||
fileserverFieldset: document.getElementById('fileserver-fieldset'),
|
||||
upstreamHeadersContainer: document.getElementById('upstream-headers-container'),
|
||||
addUpstreamHeaderBtn: document.getElementById('add-upstream-header-btn'),
|
||||
mutiUpstreamCheckbox: document.getElementById('muti_upstream'),
|
||||
singleUpstreamGroup: document.getElementById('single-upstream-group'),
|
||||
multiUpstreamGroup: document.getElementById('multi-upstream-group'),
|
||||
|
|
@ -82,28 +81,16 @@ export function addSingleInput(container, inputName, placeholder, value = '') {
|
|||
container.appendChild(div);
|
||||
}
|
||||
|
||||
// 修正: 确保正确更新分段控件的UI
|
||||
export function fillForm(config, originalFilename) {
|
||||
DOMElements.originalFilenameInput.value = originalFilename;
|
||||
DOMElements.domainInput.value = config.domain_config?.domain || '';
|
||||
|
||||
// 确定模式
|
||||
const enableUpstream = config.upstream_config?.enable_upstream || false;
|
||||
const enableFileServer = config.file_server_config?.enable_file_server || false;
|
||||
let mode = 'none';
|
||||
if (enableUpstream) {
|
||||
mode = 'reverse_proxy';
|
||||
} else if (enableFileServer) {
|
||||
mode = 'file_server';
|
||||
}
|
||||
|
||||
// 关键修正: 找到对应的按钮并手动调用UI更新函数
|
||||
if (enableUpstream) mode = 'reverse_proxy';
|
||||
else if (enableFileServer) mode = 'file_server';
|
||||
const activeButton = DOMElements.serviceModeControl.querySelector(`[data-mode="${mode}"]`);
|
||||
if (activeButton) {
|
||||
updateSegmentedControl(activeButton);
|
||||
}
|
||||
|
||||
// 填充上游配置
|
||||
if (activeButton) updateSegmentedControl(activeButton);
|
||||
const upstreamConfig = config.upstream_config || {};
|
||||
DOMElements.mutiUpstreamCheckbox.checked = upstreamConfig.muti_upstream || false;
|
||||
document.getElementById('upstream').value = upstreamConfig.upstream || '';
|
||||
|
|
@ -117,21 +104,13 @@ export function fillForm(config, originalFilename) {
|
|||
if (upstreamConfig.upstream_headers) {
|
||||
Object.entries(upstreamConfig.upstream_headers).forEach(([k, v]) => v.forEach(val => addKeyValueInput(DOMElements.upstreamHeadersContainer, 'upstream_header_key', 'upstream_header_value', k, val)));
|
||||
}
|
||||
|
||||
// 填充文件服务配置
|
||||
document.getElementById('file_dir_path').value = config.file_server_config?.file_dir_path || '';
|
||||
document.getElementById('enable_browser').checked = config.file_server_config?.enable_browser || false;
|
||||
|
||||
// 填充全局请求头
|
||||
DOMElements.headersContainer.innerHTML = '';
|
||||
if (config.headers) Object.entries(config.headers).forEach(([k, v]) => v.forEach(val => addKeyValueInput(DOMElements.headersContainer, 'header_key', 'header_value', k, val)));
|
||||
|
||||
// 填充附加功能
|
||||
document.getElementById('enable_log').checked = config.log_config?.enable_log || false;
|
||||
document.getElementById('enable_error_page').checked = config.error_page_config?.enable_error_page || false;
|
||||
document.getElementById('enable_encode').checked = config.encode_config?.enable_encode || false;
|
||||
|
||||
// 确保多上游UI的可见性正确
|
||||
updateMultiUpstreamView(DOMElements.mutiUpstreamCheckbox.checked);
|
||||
}
|
||||
|
||||
|
|
@ -188,17 +167,64 @@ export function updateMultiUpstreamView(isMulti) {
|
|||
DOMElements.multiUpstreamGroup.classList.toggle('hidden', !isMulti);
|
||||
}
|
||||
|
||||
// 修正: 使用 offsetLeft 来进行更可靠的定位
|
||||
export function updateSegmentedControl(activeButton) {
|
||||
const slider = document.getElementById('segmented-control-slider');
|
||||
const control = DOMElements.serviceModeControl;
|
||||
if (!activeButton || !slider || !control) return;
|
||||
|
||||
// 更新按钮的 active 状态
|
||||
control.querySelectorAll('button').forEach(btn => btn.classList.remove('active'));
|
||||
activeButton.classList.add('active');
|
||||
|
||||
// 移动滑块到新位置
|
||||
slider.style.width = `${activeButton.offsetWidth}px`;
|
||||
slider.style.transform = `translateX(${activeButton.offsetLeft}px)`;
|
||||
}
|
||||
|
||||
// 彻底重构: 使用 Promise 并管理自己的事件监听器生命周期
|
||||
export function createPresetSelectionModal(presets) {
|
||||
return new Promise(resolve => {
|
||||
const modalContainer = DOMElements.modalContainer;
|
||||
if (!modalContainer) return resolve(null); // 安全退出
|
||||
|
||||
const presetItems = presets.map(p => `
|
||||
<li data-preset-id="${p.id}">
|
||||
<strong>${p.name}</strong>
|
||||
<p>${p.description}</p>
|
||||
</li>
|
||||
`).join('');
|
||||
|
||||
const modalHTML = `
|
||||
<div class="modal-overlay"></div>
|
||||
<div class="modal-box">
|
||||
<header class="modal-header">
|
||||
<h3>从预设填充</h3>
|
||||
<button class="btn-icon" data-modal-close><i class="fa-solid fa-xmark"></i></button>
|
||||
</header>
|
||||
<div class="modal-content">
|
||||
<ul class="preset-list">${presetItems}</ul>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
modalContainer.innerHTML = modalHTML;
|
||||
requestAnimationFrame(() => modalContainer.classList.add('active'));
|
||||
|
||||
const cleanupAndResolve = (value) => {
|
||||
modalContainer.removeEventListener('click', eventHandler);
|
||||
modalContainer.classList.remove('active');
|
||||
setTimeout(() => {
|
||||
modalContainer.innerHTML = '';
|
||||
resolve(value);
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const eventHandler = (e) => {
|
||||
if (e.target.classList.contains('modal-overlay') || e.target.closest('[data-modal-close]')) {
|
||||
cleanupAndResolve(null); // 用户取消
|
||||
}
|
||||
const listItem = e.target.closest('li[data-preset-id]');
|
||||
if (listItem) {
|
||||
cleanupAndResolve(listItem.dataset.presetId); // 用户选择
|
||||
}
|
||||
};
|
||||
|
||||
modalContainer.addEventListener('click', eventHandler);
|
||||
});
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue