193 lines
No EOL
9.7 KiB
JavaScript
193 lines
No EOL
9.7 KiB
JavaScript
// js/ui.js - 管理所有与UI渲染和DOM操作相关的函数
|
|
|
|
export const DOMElements = {
|
|
sidebar: document.getElementById('sidebar'),
|
|
menuToggleBtn: document.getElementById('menu-toggle-btn'),
|
|
mainContent: document.querySelector('.main-content'),
|
|
configListPanel: document.getElementById('config-list-panel'),
|
|
configFormPanel: document.getElementById('config-form-panel'),
|
|
renderedOutputPanel: document.getElementById('rendered-output-panel'),
|
|
configForm: document.getElementById('config-form'),
|
|
formTitle: document.getElementById('form-title'),
|
|
backToListBtn: document.getElementById('back-to-list-btn'),
|
|
domainInput: document.getElementById('domain'),
|
|
originalFilenameInput: document.getElementById('original-filename'),
|
|
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'),
|
|
themeToggleInput: document.getElementById('theme-toggle-input'),
|
|
caddyStatusIndicator: document.getElementById('caddy-status-indicator'),
|
|
caddyActionButtonContainer: document.getElementById('caddy-action-button-container'),
|
|
logoutBtn: document.getElementById('logout-btn'),
|
|
serviceModeControl: document.getElementById('service-mode-control'),
|
|
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'),
|
|
multiUpstreamContainer: document.getElementById('multi-upstream-container'),
|
|
addMultiUpstreamBtn: document.getElementById('add-multi-upstream-btn'),
|
|
};
|
|
|
|
export function switchView(viewToShow) {
|
|
[DOMElements.configListPanel, DOMElements.configFormPanel, DOMElements.renderedOutputPanel]
|
|
.forEach(view => view.classList.add('hidden'));
|
|
if (viewToShow) viewToShow.classList.remove('hidden');
|
|
DOMElements.addNewConfigBtn.disabled = (viewToShow === DOMElements.configFormPanel);
|
|
}
|
|
|
|
export function renderConfigList(filenames) {
|
|
DOMElements.configListContainer.innerHTML = '';
|
|
if (!filenames || filenames.length === 0) {
|
|
DOMElements.configListContainer.innerHTML = '<p>还没有任何配置，请创建一个。</p>';
|
|
return;
|
|
}
|
|
filenames.forEach(filename => {
|
|
const item = document.createElement('li');
|
|
item.className = 'config-item';
|
|
item.dataset.filename = filename;
|
|
item.innerHTML = `<span class="config-item-name">${filename}</span><div class="config-item-actions"><button class="btn-icon edit-btn" title="编辑"><i class="fa-solid fa-pen-to-square"></i></button><button class="btn-icon delete-btn" title="删除"><i class="fa-solid fa-trash-can"></i></button></div>`;
|
|
DOMElements.configListContainer.appendChild(item);
|
|
});
|
|
}
|
|
|
|
export function addKeyValueInput(container, keyName, valueName, key = '', value = '') {
|
|
const div = document.createElement('div');
|
|
div.className = 'header-entry';
|
|
div.innerHTML = `
|
|
<input type="text" name="${keyName}" placeholder="Key" value="${key}">
|
|
<input type="text" name="${valueName}" placeholder="Value" value="${value}">
|
|
<button type="button" class="btn-icon" onclick="this.parentElement.remove()" title="移除此条目">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</button>`;
|
|
container.appendChild(div);
|
|
}
|
|
|
|
export function addSingleInput(container, inputName, placeholder, value = '') {
|
|
const div = document.createElement('div');
|
|
div.className = 'header-entry';
|
|
div.style.gridTemplateColumns = '1fr auto';
|
|
div.innerHTML = `
|
|
<input type="text" name="${inputName}" placeholder="${placeholder}" value="${value}">
|
|
<button type="button" class="btn-icon" onclick="this.parentElement.remove()" title="移除此上游">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</button>`;
|
|
container.appendChild(div);
|
|
}
|
|
|
|
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';
|
|
|
|
const activeButton = DOMElements.serviceModeControl.querySelector(`[data-mode="${mode}"]`);
|
|
if (activeButton) updateSegmentedControl(activeButton);
|
|
|
|
const upstreamConfig = config.upstream_config || {};
|
|
DOMElements.mutiUpstreamCheckbox.checked = upstreamConfig.muti_upstream || false;
|
|
document.getElementById('upstream').value = upstreamConfig.upstream || '';
|
|
|
|
DOMElements.multiUpstreamContainer.innerHTML = '';
|
|
if (upstreamConfig.muti_upstream && upstreamConfig.upstream_servers) {
|
|
upstreamConfig.upstream_servers.forEach(server => {
|
|
addSingleInput(DOMElements.multiUpstreamContainer, 'upstream_servers', '例如: 127.0.0.1:8081', server);
|
|
});
|
|
}
|
|
|
|
DOMElements.upstreamHeadersContainer.innerHTML = '';
|
|
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;
|
|
|
|
updateMultiUpstreamView(DOMElements.mutiUpstreamCheckbox.checked);
|
|
}
|
|
|
|
export function showRenderedConfig(configs, filename) {
|
|
const targetConfig = configs.find(c => c.filename === filename);
|
|
if (targetConfig && targetConfig.rendered_content) {
|
|
DOMElements.renderedContentCode.textContent = atob(targetConfig.rendered_content);
|
|
DOMElements.renderedOutputPanel.classList.remove('hidden');
|
|
} else {
|
|
DOMElements.renderedOutputPanel.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
function createButton(text, className, onClick) {
|
|
const button = document.createElement('button');
|
|
button.className = `btn ${className}`;
|
|
button.innerHTML = `<span>${text}</span>`;
|
|
button.addEventListener('click', onClick);
|
|
return button;
|
|
}
|
|
|
|
export function updateCaddyStatusView(status, handlers) {
|
|
const { handleReloadCaddy, handleStopCaddy, handleStartCaddy } = handlers;
|
|
const dot = DOMElements.caddyStatusIndicator.querySelector('.status-dot');
|
|
const text = DOMElements.caddyStatusIndicator.querySelector('.status-text');
|
|
const buttonContainer = DOMElements.caddyActionButtonContainer;
|
|
dot.className = 'status-dot';
|
|
buttonContainer.innerHTML = '';
|
|
let statusText, dotClass;
|
|
switch (status) {
|
|
case 'running':
|
|
statusText = '运行中'; dotClass = 'running';
|
|
buttonContainer.appendChild(createButton('重载配置', 'btn-warning', handleReloadCaddy));
|
|
buttonContainer.appendChild(createButton('停止 Caddy', 'btn-danger', handleStopCaddy));
|
|
break;
|
|
case 'stopped':
|
|
statusText = '已停止'; dotClass = 'stopped';
|
|
buttonContainer.appendChild(createButton('启动 Caddy', 'btn-success', handleStartCaddy));
|
|
break;
|
|
case 'checking': statusText = '检查中...'; dotClass = 'checking'; break;
|
|
default: statusText = '状态未知'; dotClass = 'error'; break;
|
|
}
|
|
text.textContent = statusText;
|
|
dot.classList.add(dotClass);
|
|
}
|
|
|
|
export function updateServiceModeView(mode) {
|
|
DOMElements.upstreamFieldset.classList.toggle('hidden', mode !== 'reverse_proxy');
|
|
DOMElements.fileserverFieldset.classList.toggle('hidden', mode !== 'file_server');
|
|
}
|
|
|
|
export function updateMultiUpstreamView(isMulti) {
|
|
DOMElements.singleUpstreamGroup.classList.toggle('hidden', isMulti);
|
|
DOMElements.multiUpstreamGroup.classList.toggle('hidden', !isMulti);
|
|
}
|
|
|
|
export function updateSegmentedControl(activeButton) {
|
|
const slider = document.getElementById('segmented-control-slider');
|
|
const control = DOMElements.serviceModeControl;
|
|
if (!activeButton || !slider || !control) return;
|
|
|
|
control.querySelectorAll('button').forEach(btn => btn.classList.remove('active'));
|
|
activeButton.classList.add('active');
|
|
|
|
const controlRect = control.getBoundingClientRect();
|
|
const buttonRect = activeButton.getBoundingClientRect();
|
|
|
|
slider.style.width = `${buttonRect.width}px`;
|
|
slider.style.transform = `translateX(${activeButton.offsetLeft - control.clientLeft - 4}px)`;
|
|
} |