add i18n step1
This commit is contained in:
wjqserver
parent
34d553a890
commit
79e3db6078
23 changed files with 2309 additions and 450 deletions
|
|
@ -1,5 +1,13 @@
|
|||
// js/ui.js - 管理所有与UI渲染和DOM操作相关的函数
|
||||
|
||||
// 模块级私有变量, 用于存储翻译函数
|
||||
let t;
|
||||
|
||||
// 新增: 初始化函数, 用于接收翻译函数
|
||||
export function initUI(translator) {
|
||||
t = translator;
|
||||
}
|
||||
|
||||
export const DOMElements = {
|
||||
sidebar: document.getElementById('sidebar'),
|
||||
menuToggleBtn: document.getElementById('menu-toggle-btn'),
|
||||
|
|
@ -45,14 +53,14 @@ export function switchView(viewToShow) {
|
|||
export function renderConfigList(filenames) {
|
||||
DOMElements.configListContainer.innerHTML = '';
|
||||
if (!filenames || filenames.length === 0) {
|
||||
DOMElements.configListContainer.innerHTML = '<p>还没有任何配置，请创建一个。</p>';
|
||||
DOMElements.configListContainer.innerHTML = `<p>${t('configs.no_configs')}</p>`;
|
||||
return;
|
||||
}
|
||||
filenames.forEach(filename => {
|
||||
const item = document.createElement('li');
|
||||
item.className = 'config-item';
|
||||
item.dataset.filename = filename;
|
||||
item.innerHTML = `<span class="config-item-name">${filename}</span><div class="config-item-actions"><button class="btn-icon edit-btn" title="编辑"><i class="fa-solid fa-pen-to-square"></i></button><button class="btn-icon delete-btn" title="删除"><i class="fa-solid fa-trash-can"></i></button></div>`;
|
||||
item.innerHTML = `<span class="config-item-name">${filename}</span><div class="config-item-actions"><button class="btn-icon edit-btn" title="${t('common.edit')}"><i class="fa-solid fa-pen-to-square"></i></button><button class="btn-icon delete-btn" title="${t('common.delete')}"><i class="fa-solid fa-trash-can"></i></button></div>`;
|
||||
DOMElements.configListContainer.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
|
@ -61,21 +69,21 @@ export function addKeyValueInput(container, keyName, valueName, key = '', value
|
|||
const div = document.createElement('div');
|
||||
div.className = 'header-entry';
|
||||
div.innerHTML = `
|
||||
<input type="text" name="${keyName}" placeholder="Key" value="${key}">
|
||||
<input type="text" name="${valueName}" placeholder="Value" value="${value}">
|
||||
<button type="button" class="btn-icon" onclick="this.parentElement.remove()" title="移除此条目">
|
||||
<input type="text" name="${keyName}" placeholder="${t('form.key_placeholder')}" value="${key}">
|
||||
<input type="text" name="${valueName}" placeholder="${t('form.value_placeholder')}" value="${value}">
|
||||
<button type="button" class="btn-icon" onclick="this.parentElement.remove()" title="${t('common.remove_item')}">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</button>`;
|
||||
container.appendChild(div);
|
||||
}
|
||||
|
||||
export function addSingleInput(container, inputName, placeholder, value = '') {
|
||||
export function addSingleInput(container, inputName, placeholderKey, value = '') {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'header-entry';
|
||||
div.style.gridTemplateColumns = '1fr auto';
|
||||
div.innerHTML = `
|
||||
<input type="text" name="${inputName}" placeholder="${placeholder}" value="${value}">
|
||||
<button type="button" class="btn-icon" onclick="this.parentElement.remove()" title="移除此上游">
|
||||
<input type="text" name="${inputName}" placeholder="${t(placeholderKey)}" value="${value}">
|
||||
<button type="button" class="btn-icon" onclick="this.parentElement.remove()" title="${t('common.remove_upstream')}">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</button>`;
|
||||
container.appendChild(div);
|
||||
|
|
@ -97,7 +105,7 @@ export function fillForm(config, originalFilename) {
|
|||
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);
|
||||
addSingleInput(DOMElements.multiUpstreamContainer, 'upstream_servers', 'form.upstream_server_placeholder', server);
|
||||
});
|
||||
}
|
||||
DOMElements.upstreamHeadersContainer.innerHTML = '';
|
||||
|
|
@ -137,21 +145,22 @@ export function updateCaddyStatusView(status, handlers) {
|
|||
const dot = DOMElements.caddyStatusIndicator.querySelector('.status-dot');
|
||||
const text = DOMElements.caddyStatusIndicator.querySelector('.status-text');
|
||||
const buttonContainer = DOMElements.caddyActionButtonContainer;
|
||||
if (!dot || !text || !buttonContainer) return;
|
||||
dot.className = 'status-dot';
|
||||
buttonContainer.innerHTML = '';
|
||||
let statusText, dotClass;
|
||||
switch (status) {
|
||||
case 'running':
|
||||
statusText = '运行中'; dotClass = 'running';
|
||||
buttonContainer.appendChild(createButton('重载配置', 'btn-warning', handleReloadCaddy));
|
||||
buttonContainer.appendChild(createButton('停止 Caddy', 'btn-danger', handleStopCaddy));
|
||||
statusText = t('status.running'); dotClass = 'running';
|
||||
buttonContainer.appendChild(createButton(t('caddy.reload_btn'), 'btn-warning', handleReloadCaddy));
|
||||
buttonContainer.appendChild(createButton(t('caddy.stop_btn'), 'btn-danger', handleStopCaddy));
|
||||
break;
|
||||
case 'stopped':
|
||||
statusText = '已停止'; dotClass = 'stopped';
|
||||
buttonContainer.appendChild(createButton('启动 Caddy', 'btn-success', handleStartCaddy));
|
||||
statusText = t('status.stopped'); dotClass = 'stopped';
|
||||
buttonContainer.appendChild(createButton(t('caddy.start_btn'), 'btn-success', handleStartCaddy));
|
||||
break;
|
||||
case 'checking': statusText = '检查中...'; dotClass = 'checking'; break;
|
||||
default: statusText = '状态未知'; dotClass = 'error'; break;
|
||||
case 'checking': statusText = t('status.checking'); dotClass = 'checking'; break;
|
||||
default: statusText = t('status.unknown'); dotClass = 'error'; break;
|
||||
}
|
||||
text.textContent = statusText;
|
||||
dot.classList.add(dotClass);
|
||||
|
|
@ -177,24 +186,21 @@ export function updateSegmentedControl(activeButton) {
|
|||
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); // 安全退出
|
||||
|
||||
if (!modalContainer) return resolve(null);
|
||||
const presetItems = presets.map(p => `
|
||||
<li data-preset-id="${p.id}">
|
||||
<strong>${p.name}</strong>
|
||||
<p>${p.description}</p>
|
||||
<strong>${t(p.name_key) || p.name}</strong>
|
||||
<p>${t(p.desc_key) || p.description}</p>
|
||||
</li>
|
||||
`).join('');
|
||||
|
||||
const modalHTML = `
|
||||
<div class="modal-overlay"></div>
|
||||
<div class="modal-box">
|
||||
<header class="modal-header">
|
||||
<h3>从预设填充</h3>
|
||||
<h3>${t('form.fill_from_preset')}</h3>
|
||||
<button class="btn-icon" data-modal-close><i class="fa-solid fa-xmark"></i></button>
|
||||
</header>
|
||||
<div class="modal-content">
|
||||
|
|
@ -202,29 +208,22 @@ export function createPresetSelectionModal(presets) {
|
|||
</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);
|
||||
setTimeout(() => { modalContainer.innerHTML = ''; resolve(value); }, 300);
|
||||
};
|
||||
|
||||
const eventHandler = (e) => {
|
||||
if (e.target.classList.contains('modal-overlay') || e.target.closest('[data-modal-close]')) {
|
||||
cleanupAndResolve(null); // 用户取消
|
||||
cleanupAndResolve(null);
|
||||
}
|
||||
const listItem = e.target.closest('li[data-preset-id]');
|
||||
if (listItem) {
|
||||
cleanupAndResolve(listItem.dataset.presetId); // 用户选择
|
||||
cleanupAndResolve(listItem.dataset.presetId);
|
||||
}
|
||||
};
|
||||
|
||||
modalContainer.addEventListener('click', eventHandler);
|
||||
});
|
||||
}
|
||||
|
|
@ -233,28 +232,30 @@ export function createCustomSelect(containerId, options, onSelect) {
|
|||
const container = document.getElementById(containerId);
|
||||
if (!container) return;
|
||||
|
||||
// 从容器的ID动态生成隐藏input的name属性
|
||||
// 例如, id 'select-log-level' -> name 'log_level'
|
||||
const inputName = container.id.replace('select-', '').replace(/-/g, '_');
|
||||
|
||||
container.innerHTML = `<div class="select-selected"></div><div class="select-items"></div><input type="hidden" name="${inputName}">`;
|
||||
|
||||
const selectedDiv = container.querySelector('.select-selected');
|
||||
const itemsDiv = container.querySelector('.select-items');
|
||||
const hiddenInput = container.querySelector('input[type="hidden"]');
|
||||
itemsDiv.innerHTML = '';
|
||||
|
||||
if (!options || options.length === 0) {
|
||||
selectedDiv.textContent = '无可用选项';
|
||||
selectedDiv.textContent = t('common.no_options');
|
||||
return;
|
||||
}
|
||||
|
||||
options.forEach((option, index) => {
|
||||
const item = document.createElement('div');
|
||||
item.textContent = option;
|
||||
item.dataset.value = option;
|
||||
const optionText = typeof option === 'object' ? option.name : option;
|
||||
const optionValue = typeof option === 'object' ? option.value : option;
|
||||
|
||||
item.textContent = optionText;
|
||||
item.dataset.value = optionValue;
|
||||
|
||||
if (index === 0) {
|
||||
selectedDiv.textContent = option;
|
||||
hiddenInput.value = option;
|
||||
selectedDiv.textContent = optionText;
|
||||
hiddenInput.value = optionValue;
|
||||
}
|
||||
item.addEventListener('click', function(e) {
|
||||
selectedDiv.textContent = this.textContent;
|
||||
|
|
@ -266,6 +267,7 @@ export function createCustomSelect(containerId, options, onSelect) {
|
|||
});
|
||||
itemsDiv.appendChild(item);
|
||||
});
|
||||
|
||||
selectedDiv.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
document.querySelectorAll('.select-items.select-show').forEach(openSelect => {
|
||||
|
|
@ -277,6 +279,7 @@ export function createCustomSelect(containerId, options, onSelect) {
|
|||
itemsDiv.classList.toggle('select-show');
|
||||
selectedDiv.classList.toggle('select-arrow-active');
|
||||
});
|
||||
|
||||
document.addEventListener('click', () => {
|
||||
itemsDiv.classList.remove('select-show');
|
||||
if(selectedDiv) selectedDiv.classList.remove('select-arrow-active');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue