diff --git a/frontend/css/style.css b/frontend/css/style.css
index b2c67f5..34b3b5c 100644
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -37,6 +37,8 @@ body {
transition: background-color var(--transition-speed), color var(--transition-speed);
}
.hidden { display: none !important; }
+
+/* --- 登录页 --- */
.login-page-body {
display: flex;
align-items: center;
@@ -65,7 +67,7 @@ body {
margin-bottom: 8px;
}
.login-header p { color: var(--text-color-secondary); }
-#login-form .form-group {
+#login-form .form-group, #init-form .form-group {
text-align: left;
margin-bottom: 20px;
}
@@ -76,6 +78,8 @@ body {
padding-left: 24px;
padding-right: 24px;
}
+
+/* --- 通知系统 --- */
.toast-container {
position: fixed;
top: 20px;
@@ -109,6 +113,7 @@ body {
.toast.success .toast-icon { color: var(--success-color); }
.toast.error .toast-icon { color: var(--danger-color); }
.toast.info .toast-icon { color: var(--primary-color); }
+
#dialog-container {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
z-index: 1000; display: flex; align-items: center; justify-content: center;
@@ -132,6 +137,66 @@ body {
.dialog-message { margin: 16px 0 24px; font-size: 1rem; color: var(--text-color-secondary); }
.dialog-actions { display: flex; justify-content: center; gap: 12px; }
.dialog-actions .btn { width: auto; }
+
+#modal-container {
+ position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+ z-index: 1500; display: flex; align-items: center; justify-content: center;
+ background-color: rgba(0,0,0,0.4);
+ opacity: 0; visibility: hidden;
+ transition: opacity 0.2s ease, visibility 0.2s;
+}
+#modal-container.active {
+ opacity: 1; visibility: visible;
+}
+#modal-container .modal-box {
+ background-color: var(--surface-color);
+ border-radius: var(--border-radius-large);
+ width: 90%; max-width: 500px;
+ text-align: left;
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+ transform: scale(0.95) translateY(-10px);
+ transition: transform 0.25s ease;
+}
+#modal-container.active .modal-box {
+ transform: scale(1) translateY(0);
+}
+.modal-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 16px 24px;
+ border-bottom: 1px solid var(--border-color);
+}
+.modal-header h3 {
+ margin: 0;
+ font-size: 1.2rem;
+}
+.modal-content {
+ padding: 24px;
+ max-height: 60vh;
+ overflow-y: auto;
+}
+ul.preset-list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+ul.preset-list li {
+ padding: 12px 16px;
+ border-radius: var(--border-radius-small);
+ cursor: pointer;
+ transition: background-color 0.2s ease;
+}
+ul.preset-list li:hover {
+ background-color: var(--bg-color);
+}
+ul.preset-list li p {
+ font-size: 0.85rem;
+ color: var(--text-color-secondary);
+ margin-top: 4px;
+}
+
+/* --- 主应用布局 --- */
.app-container { display: flex; height: 100vh; }
.main-content { flex-grow: 1; padding: 24px 32px; overflow-y: auto; }
#view-container { position: relative; }
@@ -285,6 +350,18 @@ input:checked + .slider:before { transform: translateX(20px); }
width: auto;
}
.btn-icon:hover { background-color: var(--bg-color); color: var(--text-color); }
+.btn-link {
+ background: none;
+ border: none;
+ color: var(--primary-color);
+ cursor: pointer;
+ font-weight: 600;
+ padding: 4px 8px;
+ width: auto;
+}
+.btn-link:hover {
+ text-decoration: underline;
+}
.main-header .btn-primary { width: auto; }
.form-actions .btn { width: auto; }
.config-list-container { display: flex; flex-direction: column; gap: 12px; }
@@ -315,6 +392,15 @@ fieldset { border: none; padding: 0; margin: 0 0 24px 0; }
padding: 16px;
margin-top: 20px;
}
+.sub-legend-group {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 12px;
+}
+.sub-legend-group .sub-legend {
+ margin-bottom: 0;
+}
.sub-legend {
font-weight: 500;
color: var(--text-color-secondary);
@@ -398,6 +484,7 @@ fieldset { border: none; padding: 0; margin: 0 0 24px 0; }
.sidebar.is-open { transform: translateX(0); }
#menu-toggle-btn { display: inline-flex; }
.main-header .btn-text { display: none; }
- .sidebar-nav span, .sidebar-footer span { display: inline; }
+ .sidebar-nav span, .logout-section span { display: inline; }
+ .caddy-control-panel .btn span { display: inline; }
.main-content { padding: 16px; }
}
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
index 288af39..003966a 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -19,29 +19,18 @@
@@ -49,9 +38,7 @@
diff --git a/frontend/js/app.js b/frontend/js/app.js
index 7054d6e..8aba2a2 100644
--- a/frontend/js/app.js
+++ b/frontend/js/app.js
@@ -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);
diff --git a/frontend/js/state.js b/frontend/js/state.js
index 3b25d1e..8a580db 100644
--- a/frontend/js/state.js
+++ b/frontend/js/state.js
@@ -4,4 +4,5 @@ export const state = {
isEditing: false,
initialFormState: '', // 用于检测表单是否有未保存的更改
availableTemplates: [], // 存储从后端获取的可用模板名称
+ headerPresets: [],
};
\ No newline at end of file
diff --git a/frontend/js/ui.js b/frontend/js/ui.js
index fe24d58..2063ac9 100644
--- a/frontend/js/ui.js
+++ b/frontend/js/ui.js
@@ -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 => `
+