add preset header

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

frontend/index.html

@@ -19,29 +19,18 @@
             </header>
             <nav class="sidebar-nav">
                 <ul>
-                    <li><a href="/" class="active"><i class="fa-solid fa-sitemap"></i> <span>配置管理</span></a></li>
+                    <li><a href="/" data-nav-id="configs" class="active"><i class="fa-solid fa-sitemap"></i> <span>站点配置</span></a></li>
+                    <li><a href="/global.html" data-nav-id="global"><i class="fa-solid fa-globe"></i> <span>全局配置</span></a></li>
                     <li><a href="/settings.html" data-nav-id="settings"><i class="fa-solid fa-gears"></i> <span>面板设置</span></a></li>
                 </ul>
             </nav>
             <div class="sidebar-bottom">
-                <div class="theme-switcher">
+                <div class="theme-switcher"><i class="fa-solid fa-sun"></i><label class="switch"><input type="checkbox" id="theme-toggle-input"><span class="slider"></span></label><i class="fa-solid fa-moon"></i></div>
-                    <i class="fa-solid fa-sun"></i>
-                    <label class="switch"><input type="checkbox" id="theme-toggle-input"><span class="slider"></span></label>
-                    <i class="fa-solid fa-moon"></i>
-                </div>
                 <div class="caddy-control-panel">
-                    <div id="caddy-status-indicator" class="caddy-status">
+                    <div id="caddy-status-indicator" class="caddy-status"><span class="status-dot checking"></span><span class="status-text">检查中...</span></div>
-                        <span class="status-dot checking"></span>
-                        <span class="status-text">检查中...</span>
-                    </div>
                     <div id="caddy-action-button-container"></div>
                 </div>
-                <div class="logout-section">
+                <div class="logout-section"><button id="logout-btn" class="btn btn-secondary"><i class="fa-solid fa-right-from-bracket"></i><span>退出登录</span></button></div>
-                    <button id="logout-btn" class="btn btn-secondary">
-                        <i class="fa-solid fa-right-from-bracket"></i>
-                        <span>退出登录</span>
-                    </button>
-                </div>
             </div>
         </aside>
 
@@ -49,9 +38,7 @@
             <header class="main-header">
                 <button class="btn-icon" id="menu-toggle-btn"><i class="fa-solid fa-bars"></i></button>
                 <h2>配置管理</h2>
-                <button id="add-new-config-btn" class="btn btn-primary">
+                <button id="add-new-config-btn" class="btn btn-primary"><i class="fa-solid fa-plus"></i> <span class="btn-text">创建新配置</span></button>
-                    <i class="fa-solid fa-plus"></i> <span class="btn-text">创建新配置</span>
-                </button>
             </header>
 
             <div id="view-container">
@@ -60,9 +47,7 @@
                 </section>
                 <section id="config-form-panel" class="card-panel view hidden">
                     <div class="form-panel-header">
-                        <button id="back-to-list-btn" class="btn-icon" title="返回列表">
+                        <button id="back-to-list-btn" class="btn-icon" title="返回列表"><i class="fa-solid fa-arrow-left"></i></button>
-                            <i class="fa-solid fa-arrow-left"></i>
-                        </button>
                         <h3 id="form-title">创建新配置</h3>
                     </div>
                     <form id="config-form">
@@ -88,14 +73,10 @@
                         
                         <fieldset id="upstream-fieldset" class="hidden">
                             <legend>反向代理配置</legend>
-                            
-                            <!-- 单上游输入框, 在多上游模式下隐藏 -->
                             <div class="form-group" id="single-upstream-group">
                                <label for="upstream">上游服务地址</label>
                                <input type="text" id="upstream" name="upstream" placeholder="例如: 127.0.0.1:8080">
                            </div>
-
-                           <!-- 多上游配置区域 -->
                            <div class="sub-fieldset">
                                <label class="custom-checkbox">
                                    <input type="checkbox" id="muti_upstream" name="muti_upstream">
@@ -104,16 +85,21 @@
                                <div id="multi-upstream-group" class="hidden" style="margin-top: 16px;">
                                    <p class="sub-legend">上游服务器列表</p>
                                    <div id="multi-upstream-container"></div>
-                                   <button type="button" id="add-multi-upstream-btn" class="btn btn-secondary btn-small">
+                                   <button type="button" id="add-multi-upstream-btn" class="btn btn-secondary btn-small"><i class="fa-solid fa-plus"></i> 添加上游服务器</button>
-                                       <i class="fa-solid fa-plus"></i> 添加上游服务器
+                               </div>
+                           </div>
+                           <div class="sub-fieldset">
+                                <div class="sub-legend-group">
+                                    <p class="sub-legend">上游请求头 (Upstream Headers)</p>
+                                    <button type="button" class="btn-link" data-preset-target="upstream">
+                                        <i class="fa-solid fa-wand-magic-sparkles"></i>
+                                        <span>从预设填充</span>
                                     </button>
                                 </div>
-                           </div>
-                           
-                           <div class="sub-fieldset">
-                               <p class="sub-legend">上游请求头 (Upstream Headers)</p>
                                 <div id="upstream-headers-container"></div>
-                               <button type="button" id="add-upstream-header-btn" class="btn btn-secondary btn-small"><i class="fa-solid fa-plus"></i> 添加上游请求头</button>
+                                <button type="button" class="btn btn-secondary btn-small" data-add-target="upstream">
+                                    <i class="fa-solid fa-plus"></i> 添加请求头
+                                </button>
                            </div>
                         </fieldset>
 
@@ -130,9 +116,17 @@
                         </fieldset>
                         
                         <fieldset id="headers-fieldset">
+                             <div class="sub-legend-group">
                                 <legend>全局请求头 (Headers)</legend>
+                                <button type="button" class="btn-link" data-preset-target="global">
+                                    <i class="fa-solid fa-wand-magic-sparkles"></i>
+                                    <span>从预设填充</span>
+                                </button>
+                            </div>
                             <div id="headers-container"></div>
-                            <button type="button" id="add-header-btn" class="btn btn-secondary btn-small"><i class="fa-solid fa-plus"></i> 添加全局请求头</button>
+                            <button type="button" class="btn btn-secondary btn-small" data-add-target="global">
+                                <i class="fa-solid fa-plus"></i> 添加请求头
+                            </button>
                         </fieldset>
 
                         <fieldset>
@@ -159,6 +153,7 @@
     
     <div id="toast-container" class="toast-container"></div>
     <div id="dialog-container"></div>
+    <div id="modal-container"></div> <!-- 新增: 通用模态框容器 -->
 
     <script type="module" src="js/app.js"></script>
 </body>

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);
+    notification.init(DOMElements.toastContainer, DOMElements.dialogContainer, DOMElements.modalContainer);
-    activateNav('configs');
+    initCaddyStatus();
-    initCaddyStatus(); // 初始化通用Caddy状态检查
     
     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);

frontend/js/state.js

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

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) {
+    if (enableUpstream) mode = 'reverse_proxy';
-        mode = 'reverse_proxy';
+    else if (enableFileServer) mode = 'file_server';
-    } else if (enableFileServer) {
-        mode = 'file_server';
-    }
-    
-    // 关键修正: 找到对应的按钮并手动调用UI更新函数
     const activeButton = DOMElements.serviceModeControl.querySelector(`[data-mode="${mode}"]`);
-    if (activeButton) {
+    if (activeButton) updateSegmentedControl(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);
+    });
+}