wjqserver/caddydash
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add preset header

Browse source
This commit is contained in:
wjqserver 2025-06-22 17:56:35 +08:00
parent 47b6f4903f
commit cc429c44f9
5 changed files with 268 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

104
frontend/js/app.js
View file

@ -2,12 +2,14 @@
import { state } from './state.js';
import { api } from './api.js';
import { theme, toast, activateNav } from './common.js';
import { theme, activateNav } from './common.js';
import { notification } from './notifications.js';
import { initCaddyStatus } from './caddy.js';
import { DOMElements, switchView, renderConfigList, addKeyValueInput, addSingleInput, fillForm, showRenderedConfig, updateSegmentedControl, updateServiceModeView, updateMultiUpstreamView } from './ui.js';
import { DOMElements, switchView, renderConfigList, addKeyValueInput, addSingleInput, fillForm, showRenderedConfig, updateCaddyStatusView, updateSegmentedControl, updateServiceModeView, updateMultiUpstreamView, createPresetSelectionModal } from './ui.js';
const POLLING_INTERVAL = 5000;
let caddyStatusInterval;
// --- 事件处理与逻辑流 ---
function getFormStateAsString() {
const formData = new FormData(DOMElements.configForm);
const data = {};
@ -116,15 +118,71 @@ async function handleSaveConfig(e) {
} catch(error) { notification.toast(`保存失败: ${error.message}`, 'error'); }
}
// --- 初始化与事件绑定 ---
async function openPresetModal(targetType) {
const applicablePresets = state.headerPresets.filter(p => p.target === targetType || p.target === 'any');
if (applicablePresets.length === 0) {
notification.toast(`没有适用于此区域的预设。`, 'info');
return;
}
const presetId = await createPresetSelectionModal(applicablePresets);
if (!presetId) return; // 用户取消了选择
let targetContainer, keyName, valueName;
if (targetType === 'global') {
targetContainer = DOMElements.headersContainer;
keyName = 'header_key';
valueName = 'header_value';
} else if (targetType === 'upstream') {
targetContainer = DOMElements.upstreamHeadersContainer;
keyName = 'upstream_header_key';
valueName = 'upstream_header_value';
} else {
return;
}
// 在获取到presetId后，再执行填充逻辑
try {
notification.toast('正在加载预设...', 'info', 1000);
const preset = await api.get(`/config/headers-presets/${presetId}`);
if (!preset.headers) {
notification.toast('此预设无数据。', 'info');
return;
}
const choice = await notification.confirm('如何填充预设？', '选择填充方式', { confirmText: '追加', cancelText: '替换' });
if (choice === false) { // 用户选择了“替换”
targetContainer.innerHTML = '';
}
Object.entries(preset.headers).forEach(([key, values]) => {
values.forEach(value => {
addKeyValueInput(targetContainer, keyName, valueName, key, value);
});
});
notification.toast(`已成功填充预设 "${preset.name}"`, 'success');
} catch (error) {
notification.toast(`加载预设失败: ${error.message}`, 'error');
}
}
function init() {
theme.init(DOMElements.themeToggleInput);
notification.init(DOMElements.toastContainer, DOMElements.dialogContainer);
activateNav('configs');
initCaddyStatus(); // 初始化通用Caddy状态检查
notification.init(DOMElements.toastContainer, DOMElements.dialogContainer, DOMElements.modalContainer);
initCaddyStatus();
loadAllConfigs();
api.get('/config/headers-presets')
.then(presets => {
state.headerPresets = presets || [];
})
.catch(err => {
if (err.message) notification.toast(`加载Header预设失败: ${err.message}`, 'error');
});
DOMElements.menuToggleBtn.addEventListener('click', () => DOMElements.sidebar.classList.toggle('is-open'));
DOMElements.mainContent.addEventListener('click', () => DOMElements.sidebar.classList.remove('is-open'));
@ -149,10 +207,6 @@ function init() {
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);
@ -164,9 +218,35 @@ function init() {
if (button.classList.contains('delete-btn')) handleDeleteConfig(filename);
});
DOMElements.configForm.querySelector('button[data-add-target="global"]').addEventListener('click', (e) => {
e.preventDefault();
addKeyValueInput(DOMElements.headersContainer, 'header_key', 'header_value');
});
DOMElements.configForm.querySelector('button[data-add-target="upstream"]').addEventListener('click', (e) => {
e.preventDefault();
addKeyValueInput(DOMElements.upstreamHeadersContainer, 'upstream_header_key', 'upstream_header_value');
});
DOMElements.configForm.querySelector('button[data-preset-target="global"]').addEventListener('click', (e) => {
e.preventDefault();
openPresetModal('global');
});
DOMElements.configForm.querySelector('button[data-preset-target="upstream"]').addEventListener('click', (e) => {
e.preventDefault();
openPresetModal('upstream');
});
DOMElements.addMultiUpstreamBtn.addEventListener('click', (e) => {
e.preventDefault();
addSingleInput(DOMElements.multiUpstreamContainer, 'upstream_servers', '例如: 127.0.0.1:8081');
});
DOMElements.serviceModeControl.addEventListener('click', (e) => {
const button = e.target.closest('button');
if (button) {
e.preventDefault();
const mode = button.dataset.mode;
updateSegmentedControl(button);
updateServiceModeView(mode);

1
frontend/js/state.js
View file

@ -4,4 +4,5 @@ export const state = {
isEditing: false,
initialFormState: '', // 用于检测表单是否有未保存的更改
availableTemplates: [], // 存储从后端获取的可用模板名称
headerPresets: [],
};

86
frontend/js/ui.js
View file

@ -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);
});
}