add multupstream && new select
This commit is contained in:
wjqserver
parent
b10790c212
commit
30da719d57
4 changed files with 218 additions and 163 deletions
|
|
@ -4,7 +4,7 @@ import { state } from './state.js';
|
|||
import { api } from './api.js';
|
||||
import { initTheme } from './theme.js';
|
||||
import { notification } from './notifications.js';
|
||||
import { DOMElements, switchView, renderConfigList, createCustomSelect, addKeyValueInput, fillForm, showRenderedConfig, updateCaddyStatusView, updateFormVisibility } from './ui.js';
|
||||
import { DOMElements, switchView, renderConfigList, addKeyValueInput, addSingleInput, fillForm, showRenderedConfig, updateCaddyStatusView, updateSegmentedControl, updateServiceModeView, updateMultiUpstreamView } from './ui.js';
|
||||
|
||||
const POLLING_INTERVAL = 5000;
|
||||
let caddyStatusInterval;
|
||||
|
|
@ -12,6 +12,8 @@ let caddyStatusInterval;
|
|||
function getFormStateAsString() {
|
||||
const formData = new FormData(DOMElements.configForm);
|
||||
const data = {};
|
||||
const activeModeButton = DOMElements.serviceModeControl.querySelector('button.active');
|
||||
data.active_mode = activeModeButton ? activeModeButton.dataset.mode : 'none';
|
||||
for (const [key, value] of formData.entries()) {
|
||||
const el = DOMElements.configForm.querySelector(`[name="${key}"]`);
|
||||
if (el?.type === 'checkbox') data[key] = el.checked;
|
||||
|
|
@ -79,7 +81,8 @@ async function handleEditConfig(originalFilename) {
|
|||
DOMElements.formTitle.textContent = '编辑配置';
|
||||
fillForm(config, originalFilename);
|
||||
showRenderedConfig(rendered, originalFilename);
|
||||
updateFormVisibility(config.tmpl_type, state.availableTemplates);
|
||||
const mode = config.upstream_config?.enable_upstream ? 'reverse_proxy' : (config.file_server_config?.enable_file_server ? 'file_server' : 'none');
|
||||
updateServiceModeView(mode);
|
||||
state.initialFormState = getFormStateAsString();
|
||||
} catch(error) { notification.toast(`加载配置详情失败: ${error.message}`, 'error'); }
|
||||
}
|
||||
|
|
@ -94,8 +97,8 @@ async function handleDeleteConfig(filename) {
|
|||
async function handleSaveConfig(e) {
|
||||
e.preventDefault();
|
||||
const formData = new FormData(DOMElements.configForm);
|
||||
const filename = formData.get('domain');
|
||||
if (!filename) {
|
||||
const domain = formData.get('domain');
|
||||
if (!domain) {
|
||||
notification.toast('域名不能为空。', 'error');
|
||||
return;
|
||||
}
|
||||
|
|
@ -109,20 +112,32 @@ async function handleSaveConfig(e) {
|
|||
});
|
||||
return headers;
|
||||
};
|
||||
const globalHeaders = getHeadersMap('header_key', 'header_value');
|
||||
const upstreamHeaders = getHeadersMap('upstream_header_key', 'upstream_header_value');
|
||||
const activeModeButton = DOMElements.serviceModeControl.querySelector('button.active');
|
||||
const activeMode = activeModeButton ? activeModeButton.dataset.mode : 'none';
|
||||
const isMutiUpstream = DOMElements.mutiUpstreamCheckbox.checked;
|
||||
|
||||
const configData = {
|
||||
domain: filename,
|
||||
tmpl_type: formData.get('tmpl_type'),
|
||||
upstream: { upstream: formData.get('upstream'), muti_upstream: false, upstreams: [], upstream_headers: upstreamHeaders },
|
||||
file_server: { file_dir_path: formData.get('file_dir_path'), enable_browser: DOMElements.configForm.querySelector('#enable_browser').checked },
|
||||
headers: globalHeaders,
|
||||
log: { enable_log: DOMElements.configForm.querySelector('#enable_log').checked, log_domain: filename },
|
||||
error_page: { enable_error_page: DOMElements.configForm.querySelector('#enable_error_page').checked },
|
||||
encode: { enable_encode: DOMElements.configForm.querySelector('#enable_encode').checked }
|
||||
mode: "uni",
|
||||
domain_config: { domain: domain, muti_domains: false, domains: [] },
|
||||
upstream_config: {
|
||||
enable_upstream: activeMode === 'reverse_proxy',
|
||||
upstream: formData.get('upstream'),
|
||||
muti_upstream: isMutiUpstream,
|
||||
upstream_servers: formData.getAll('upstream_servers').filter(s => s),
|
||||
upstream_headers: getHeadersMap('upstream_header_key', 'upstream_header_value'),
|
||||
},
|
||||
file_server_config: {
|
||||
enable_file_server: activeMode === 'file_server',
|
||||
file_dir_path: formData.get('file_dir_path'),
|
||||
enable_browser: DOMElements.configForm.querySelector('#enable_browser').checked
|
||||
},
|
||||
headers: getHeadersMap('header_key', 'header_value'),
|
||||
log_config: { enable_log: DOMElements.configForm.querySelector('#enable_log').checked, log_domain: domain },
|
||||
error_page_config: { enable_error_page: DOMElements.configForm.querySelector('#enable_error_page').checked },
|
||||
encode_config: { enable_encode: DOMElements.configForm.querySelector('#enable_encode').checked }
|
||||
};
|
||||
try {
|
||||
const result = await api.put(`/config/file/${filename}`, configData);
|
||||
const result = await api.put(`/config/file/${domain}`, configData);
|
||||
state.isEditing = false;
|
||||
notification.toast(result.message || '配置已成功保存。', 'success');
|
||||
setTimeout(() => {
|
||||
|
|
@ -131,46 +146,45 @@ async function handleSaveConfig(e) {
|
|||
}, 500);
|
||||
} catch(error) { notification.toast(`保存失败: ${error.message}`, 'error'); }
|
||||
}
|
||||
|
||||
function init() {
|
||||
initTheme(DOMElements.themeToggleInput);
|
||||
notification.init(DOMElements.toastContainer, DOMElements.dialogContainer);
|
||||
loadAllConfigs();
|
||||
api.get('/config/templates')
|
||||
.then(templates => {
|
||||
state.availableTemplates = templates || [];
|
||||
const options = state.availableTemplates.length > 0 ? state.availableTemplates : ['无可用模板'];
|
||||
createCustomSelect('custom-select-tmpl', options, (selectedValue) => {
|
||||
updateFormVisibility(selectedValue, state.availableTemplates);
|
||||
});
|
||||
if (options[0] !== '无可用模板') updateFormVisibility(options[0], state.availableTemplates);
|
||||
})
|
||||
.catch(err => { if(err.message) notification.toast(`加载模板失败: ${err.message}`, 'error') });
|
||||
checkCaddyStatus();
|
||||
caddyStatusInterval = setInterval(checkCaddyStatus, POLLING_INTERVAL);
|
||||
|
||||
DOMElements.menuToggleBtn.addEventListener('click', () => DOMElements.sidebar.classList.toggle('is-open'));
|
||||
DOMElements.mainContent.addEventListener('click', () => DOMElements.sidebar.classList.remove('is-open'));
|
||||
|
||||
DOMElements.addNewConfigBtn.addEventListener('click', () => {
|
||||
state.isEditing = false;
|
||||
switchView(DOMElements.configFormPanel);
|
||||
DOMElements.formTitle.textContent = '创建新配置';
|
||||
DOMElements.configForm.reset();
|
||||
if (state.availableTemplates.length > 0) {
|
||||
const selectContainer = document.getElementById('custom-select-tmpl');
|
||||
selectContainer.querySelector('.select-selected').textContent = state.availableTemplates[0];
|
||||
selectContainer.querySelector('input[type="hidden"]').value = state.availableTemplates[0];
|
||||
updateFormVisibility(state.availableTemplates[0], state.availableTemplates);
|
||||
}
|
||||
|
||||
const noneButton = DOMElements.serviceModeControl.querySelector('[data-mode="none"]');
|
||||
if(noneButton) updateSegmentedControl(noneButton);
|
||||
updateServiceModeView('none');
|
||||
updateMultiUpstreamView(false);
|
||||
|
||||
state.initialFormState = getFormStateAsString();
|
||||
DOMElements.headersContainer.innerHTML = '';
|
||||
DOMElements.upstreamHeadersContainer.innerHTML = '';
|
||||
DOMElements.multiUpstreamContainer.innerHTML = '';
|
||||
DOMElements.originalFilenameInput.value = '';
|
||||
});
|
||||
|
||||
DOMElements.backToListBtn.addEventListener('click', attemptExitForm);
|
||||
DOMElements.cancelEditBtn.addEventListener('click', attemptExitForm);
|
||||
|
||||
DOMElements.addHeaderBtn.addEventListener('click', () => addKeyValueInput(DOMElements.headersContainer, 'header_key', 'header_value'));
|
||||
DOMElements.addUpstreamHeaderBtn.addEventListener('click', () => addKeyValueInput(DOMElements.upstreamHeadersContainer, 'upstream_header_key', 'upstream_header_value'));
|
||||
DOMElements.addMultiUpstreamBtn.addEventListener('click', () => addSingleInput(DOMElements.multiUpstreamContainer, 'upstream_servers', '例如: 127.0.0.1:8081'));
|
||||
|
||||
DOMElements.configForm.addEventListener('submit', handleSaveConfig);
|
||||
DOMElements.logoutBtn.addEventListener('click', handleLogout);
|
||||
|
||||
DOMElements.configListContainer.addEventListener('click', e => {
|
||||
const button = e.target.closest('button');
|
||||
if (!button) return;
|
||||
|
|
@ -178,5 +192,19 @@ function init() {
|
|||
if (button.classList.contains('edit-btn')) handleEditConfig(filename);
|
||||
if (button.classList.contains('delete-btn')) handleDeleteConfig(filename);
|
||||
});
|
||||
|
||||
DOMElements.serviceModeControl.addEventListener('click', (e) => {
|
||||
const button = e.target.closest('button');
|
||||
if (button) {
|
||||
const mode = button.dataset.mode;
|
||||
updateSegmentedControl(button);
|
||||
updateServiceModeView(mode);
|
||||
}
|
||||
});
|
||||
|
||||
DOMElements.mutiUpstreamCheckbox.addEventListener('change', (e) => {
|
||||
updateMultiUpstreamView(e.target.checked);
|
||||
});
|
||||
}
|
||||
|
||||
init();
|
||||
Loading…
Add table
Add a link
Reference in a new issue