optimize config display && unused old config
This commit is contained in:
parent
30da719d57
commit
8736847912
6 changed files with 39 additions and 17 deletions
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -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'); }
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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)`;
|
|
||||||
}
|
}
|
||||||
16
tmpl/uni
16
tmpl/uni
|
|
@ -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}}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue