optimize config display && unused old config

This commit is contained in:
wjqserver 2025-06-20 18:06:50 +08:00
parent 30da719d57
commit 8736847912
6 changed files with 39 additions and 17 deletions

View file

@ -10,6 +10,12 @@
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<style>
#init-form .form-group {
text-align: left;
margin-bottom: 20px;
}
</style>
</head> </head>
<body class="login-page-body"> <body class="login-page-body">

View file

@ -81,8 +81,11 @@ async function handleEditConfig(originalFilename) {
DOMElements.formTitle.textContent = '编辑配置'; DOMElements.formTitle.textContent = '编辑配置';
fillForm(config, originalFilename); fillForm(config, originalFilename);
showRenderedConfig(rendered, originalFilename); showRenderedConfig(rendered, originalFilename);
// 关键修正: 在填充表单后, 根据数据更新服务模式的fieldset可见性
const mode = config.upstream_config?.enable_upstream ? 'reverse_proxy' : (config.file_server_config?.enable_file_server ? 'file_server' : 'none'); const mode = config.upstream_config?.enable_upstream ? 'reverse_proxy' : (config.file_server_config?.enable_file_server ? 'file_server' : 'none');
updateServiceModeView(mode); updateServiceModeView(mode);
state.initialFormState = getFormStateAsString(); state.initialFormState = getFormStateAsString();
} catch(error) { notification.toast(`加载配置详情失败: ${error.message}`, 'error'); } } catch(error) { notification.toast(`加载配置详情失败: ${error.message}`, 'error'); }
} }

View file

@ -82,45 +82,56 @@ export function addSingleInput(container, inputName, placeholder, value = '') {
container.appendChild(div); container.appendChild(div);
} }
// 修正: 确保正确更新分段控件的UI
export function fillForm(config, originalFilename) { export function fillForm(config, originalFilename) {
DOMElements.originalFilenameInput.value = originalFilename; DOMElements.originalFilenameInput.value = originalFilename;
DOMElements.domainInput.value = config.domain_config?.domain || ''; DOMElements.domainInput.value = config.domain_config?.domain || '';
// 确定模式
const enableUpstream = config.upstream_config?.enable_upstream || false; const enableUpstream = config.upstream_config?.enable_upstream || false;
const enableFileServer = config.file_server_config?.enable_file_server || false; const enableFileServer = config.file_server_config?.enable_file_server || false;
let mode = 'none'; let mode = 'none';
if (enableUpstream) mode = 'reverse_proxy'; if (enableUpstream) {
else if (enableFileServer) mode = 'file_server'; mode = 'reverse_proxy';
} else if (enableFileServer) {
mode = 'file_server';
}
// 关键修正: 找到对应的按钮并手动调用UI更新函数
const activeButton = DOMElements.serviceModeControl.querySelector(`[data-mode="${mode}"]`); const activeButton = DOMElements.serviceModeControl.querySelector(`[data-mode="${mode}"]`);
if (activeButton) updateSegmentedControl(activeButton); if (activeButton) {
updateSegmentedControl(activeButton);
}
// 填充上游配置
const upstreamConfig = config.upstream_config || {}; const upstreamConfig = config.upstream_config || {};
DOMElements.mutiUpstreamCheckbox.checked = upstreamConfig.muti_upstream || false; DOMElements.mutiUpstreamCheckbox.checked = upstreamConfig.muti_upstream || false;
document.getElementById('upstream').value = upstreamConfig.upstream || ''; document.getElementById('upstream').value = upstreamConfig.upstream || '';
DOMElements.multiUpstreamContainer.innerHTML = ''; DOMElements.multiUpstreamContainer.innerHTML = '';
if (upstreamConfig.muti_upstream && upstreamConfig.upstream_servers) { if (upstreamConfig.muti_upstream && upstreamConfig.upstream_servers) {
upstreamConfig.upstream_servers.forEach(server => { upstreamConfig.upstream_servers.forEach(server => {
addSingleInput(DOMElements.multiUpstreamContainer, 'upstream_servers', '例如: 127.0.0.1:8081', server); addSingleInput(DOMElements.multiUpstreamContainer, 'upstream_servers', '例如: 127.0.0.1:8081', server);
}); });
} }
DOMElements.upstreamHeadersContainer.innerHTML = ''; DOMElements.upstreamHeadersContainer.innerHTML = '';
if (upstreamConfig.upstream_headers) { 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))); 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('file_dir_path').value = config.file_server_config?.file_dir_path || '';
document.getElementById('enable_browser').checked = config.file_server_config?.enable_browser || false; document.getElementById('enable_browser').checked = config.file_server_config?.enable_browser || false;
// 填充全局请求头
DOMElements.headersContainer.innerHTML = ''; 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))); 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_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_error_page').checked = config.error_page_config?.enable_error_page || false;
document.getElementById('enable_encode').checked = config.encode_config?.enable_encode || false; document.getElementById('enable_encode').checked = config.encode_config?.enable_encode || false;
// 确保多上游UI的可见性正确
updateMultiUpstreamView(DOMElements.mutiUpstreamCheckbox.checked); updateMultiUpstreamView(DOMElements.mutiUpstreamCheckbox.checked);
} }
@ -177,17 +188,17 @@ export function updateMultiUpstreamView(isMulti) {
DOMElements.multiUpstreamGroup.classList.toggle('hidden', !isMulti); DOMElements.multiUpstreamGroup.classList.toggle('hidden', !isMulti);
} }
// 修正: 使用 offsetLeft 来进行更可靠的定位
export function updateSegmentedControl(activeButton) { export function updateSegmentedControl(activeButton) {
const slider = document.getElementById('segmented-control-slider'); const slider = document.getElementById('segmented-control-slider');
const control = DOMElements.serviceModeControl; const control = DOMElements.serviceModeControl;
if (!activeButton || !slider || !control) return; if (!activeButton || !slider || !control) return;
// 更新按钮的 active 状态
control.querySelectorAll('button').forEach(btn => btn.classList.remove('active')); control.querySelectorAll('button').forEach(btn => btn.classList.remove('active'));
activeButton.classList.add('active'); activeButton.classList.add('active');
const controlRect = control.getBoundingClientRect(); // 移动滑块到新位置
const buttonRect = activeButton.getBoundingClientRect(); slider.style.width = `${activeButton.offsetWidth}px`;
slider.style.transform = `translateX(${activeButton.offsetLeft}px)`;
slider.style.width = `${buttonRect.width}px`;
slider.style.transform = `translateX(${activeButton.offsetLeft - control.clientLeft - 4}px)`;
} }

View file

@ -1,14 +1,17 @@
{{- if .DomainConfig.MutiDomains -}} {{- if .DomainConfig.MutiDomains -}}
{{- range .DomainConfig.Domains}}{{.}} {{end -}} {{- range $i, $domain := .DomainConfig.Domains -}}
{{- if $i}} {{" "}}{{- end -}}
{{- . -}}
{{- end -}} {
{{- else -}} {{- else -}}
{{- .DomainConfig.Domain -}} {{- .DomainConfig.Domain}} {
{{- end -}} { {{- end -}}
{{- if .Upsteam.EnableUpStream}} {{- if .Upstream.EnableUpStream}}
reverse_proxy { reverse_proxy {
to{{if .Upsteam.MutiUpStreams}}{{range .Upsteam.UpStreams}} {{.}}{{end}}{{else}} {{.Upsteam.UpStream}}{{end}} to{{if .Upstream.MutiUpStreams}}{{range .Upstream.UpStreams}} {{.}}{{end}}{{else}} {{.Upstream.UpStream}}{{end}}
{{- range $key, $values := .Upsteam.UpStreamHeaders}} {{- range $key, $values := .Upstream.UpStreamHeaders}}
{{- range $values}} {{- range $values}}
header_up {{$key}} "{{.}}" header_up {{$key}} "{{.}}"
{{- end}} {{- end}}
@ -16,7 +19,6 @@
} }
{{- else if .FileServer.EnableFileServer}} {{- else if .FileServer.EnableFileServer}}
root * {{.FileServer.FileDirPath}} root * {{.FileServer.FileDirPath}}
file_server{{if .FileServer.EnableBrowser}} browse{{end}} file_server{{if .FileServer.EnableBrowser}} browse{{end}}
{{- end}} {{- end}}