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 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">
<style>
#init-form .form-group {
text-align: left;
margin-bottom: 20px;
}
</style>
</head>
<body class="login-page-body">

View file

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

View file

@ -82,45 +82,56 @@ 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';
if (enableUpstream) {
mode = 'reverse_proxy';
} else if (enableFileServer) {
mode = 'file_server';
}
// 关键修正: 找到对应的按钮并手动调用UI更新函数
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 || '';
DOMElements.multiUpstreamContainer.innerHTML = '';
if (upstreamConfig.muti_upstream && upstreamConfig.upstream_servers) {
upstreamConfig.upstream_servers.forEach(server => {
addSingleInput(DOMElements.multiUpstreamContainer, 'upstream_servers', '例如: 127.0.0.1:8081', server);
});
}
DOMElements.upstreamHeadersContainer.innerHTML = '';
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);
}
@ -177,17 +188,17 @@ 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');
const controlRect = control.getBoundingClientRect();
const buttonRect = activeButton.getBoundingClientRect();
slider.style.width = `${buttonRect.width}px`;
slider.style.transform = `translateX(${activeButton.offsetLeft - control.clientLeft - 4}px)`;
// 移动滑块到新位置
slider.style.width = `${activeButton.offsetWidth}px`;
slider.style.transform = `translateX(${activeButton.offsetLeft}px)`;
}

View file

@ -1,14 +1,17 @@
{{- if .DomainConfig.MutiDomains -}}
{{- range .DomainConfig.Domains}}{{.}} {{end -}}
{{- range $i, $domain := .DomainConfig.Domains -}}
{{- if $i}} {{" "}}{{- end -}}
{{- . -}}
{{- end -}} {
{{- else -}}
{{- .DomainConfig.Domain -}}
{{- end -}} {
{{- .DomainConfig.Domain}} {
{{- end -}}
{{- if .Upsteam.EnableUpStream}}
{{- if .Upstream.EnableUpStream}}
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}}
header_up {{$key}} "{{.}}"
{{- end}}
@ -16,7 +19,6 @@
}
{{- else if .FileServer.EnableFileServer}}
root * {{.FileServer.FileDirPath}}
file_server{{if .FileServer.EnableBrowser}} browse{{end}}
{{- end}}