add preset header
This commit is contained in:
wjqserver
parent
47b6f4903f
commit
cc429c44f9
5 changed files with 268 additions and 79 deletions
|
|
@ -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; }
|
||||
}
|
||||
|
|
@ -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">
|
||||
<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="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>
|
||||
<div class="caddy-control-panel">
|
||||
<div id="caddy-status-indicator" class="caddy-status">
|
||||
<span class="status-dot checking"></span>
|
||||
<span class="status-text">检查中...</span>
|
||||
</div>
|
||||
<div id="caddy-status-indicator" class="caddy-status"><span class="status-dot checking"></span><span class="status-text">检查中...</span></div>
|
||||
<div id="caddy-action-button-container"></div>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
</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">
|
||||
<i class="fa-solid fa-plus"></i> <span class="btn-text">创建新配置</span>
|
||||
</button>
|
||||
<button id="add-new-config-btn" class="btn btn-primary"><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="返回列表">
|
||||
<i class="fa-solid fa-arrow-left"></i>
|
||||
</button>
|
||||
<button id="back-to-list-btn" class="btn-icon" title="返回列表"><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">
|
||||
<i class="fa-solid fa-plus"></i> 添加上游服务器
|
||||
</button>
|
||||
<button type="button" id="add-multi-upstream-btn" class="btn btn-secondary btn-small"><i class="fa-solid fa-plus"></i> 添加上游服务器</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>
|
||||
<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 id="upstream-headers-container"></div>
|
||||
<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">
|
||||
<legend>全局请求头 (Headers)</legend>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -4,4 +4,5 @@ export const state = {
|
|||
isEditing: false,
|
||||
initialFormState: '', // 用于检测表单是否有未保存的更改
|
||||
availableTemplates: [], // 存储从后端获取的可用模板名称
|
||||
headerPresets: [],
|
||||
};
|
||||
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue