caddydash/frontend/js/app.js

// js/app.js - 主应用入口

import { state } from './state.js';
import { api } from './api.js';
import { initTheme } from './theme.js';
import { notification } from './notifications.js';
import { DOMElements, switchView, renderConfigList, createCustomSelect, addKeyValueInput, fillForm, showRenderedConfig, updateCaddyStatusView, updateFormVisibility } from './ui.js';

const POLLING_INTERVAL = 5000;
let caddyStatusInterval;

function getFormStateAsString() {
    const formData = new FormData(DOMElements.configForm);
    const data = {};
    for (const [key, value] of formData.entries()) {
        const el = DOMElements.configForm.querySelector(`[name="${key}"]`);
        if (el?.type === 'checkbox') data[key] = el.checked;
        else if (data[key]) {
            if (!Array.isArray(data[key])) data[key] = [data[key]];
            data[key].push(value);
        } else data[key] = value;
    }
    return JSON.stringify(data);
}
async function attemptExitForm() {
    if (getFormStateAsString() !== state.initialFormState) {
        if (await notification.confirm('您有未保存的更改。确定要放弃吗？')) switchView(DOMElements.configListPanel);
    } else switchView(DOMElements.configListPanel);
}
async function checkCaddyStatus() {
    try {
        const response = await api.get('/caddy/status');
        updateCaddyStatusView(response.message === 'Caddy is running' ? 'running' : 'stopped', caddyHandlers);
    } catch (error) { console.error('Error checking Caddy status:', error); updateCaddyStatusView('error', caddyHandlers); }
}
async function handleStartCaddy() {
    try {
        const result = await api.post('/caddy/run');
        notification.toast(result.message || '启动命令已发送。', 'success');
        setTimeout(checkCaddyStatus, 500);
    } catch (error) { notification.toast(`启动失败: ${error.message}`, 'error'); }
}
async function handleStopCaddy() {
    if (!await notification.confirm('您确定要停止 Caddy 实例吗?')) return;
    try {
        const result = await api.post('/caddy/stop');
        notification.toast(result.message || '停止命令已发送。', 'info');
        setTimeout(checkCaddyStatus, 500);
    } catch(error) { notification.toast(`操作失败: ${error.message}`, 'error'); }
}
async function handleReloadCaddy() {
    if (!await notification.confirm('确定要重载 Caddy 配置吗?')) return;
    try {
        const result = await api.post('/caddy/restart');
        notification.toast(result.message || '重载命令已发送。', 'success');
        setTimeout(checkCaddyStatus, 500);
    } catch(error) { notification.toast(`重载失败: ${error.message}`, 'error'); }
}
const caddyHandlers = { handleStartCaddy, handleStopCaddy, handleReloadCaddy };
async function handleLogout() {
    if (!await notification.confirm('您确定要退出登录吗?')) return;
    notification.toast('正在退出...', 'info');
    setTimeout(() => { window.location.href = `/v0/api/auth/logout`; }, 500);
}
async function loadAllConfigs() {
    try {
        const filenames = await api.get('/config/filenames');
        renderConfigList(filenames);
    } catch(error) { if (error.message) notification.toast(`加载配置列表失败: ${error.message}`, 'error'); }
}
async function handleEditConfig(originalFilename) {
    try {
        const [config, rendered] = await Promise.all([
            api.get(`/config/file/${originalFilename}`),
            api.get('/config/files/rendered')
        ]);
        state.isEditing = true;
        switchView(DOMElements.configFormPanel);
        DOMElements.formTitle.textContent = '编辑配置';
        fillForm(config, originalFilename);
        showRenderedConfig(rendered, originalFilename);
        updateFormVisibility(config.tmpl_type, state.availableTemplates);
        state.initialFormState = getFormStateAsString();
    } catch(error) { notification.toast(`加载配置详情失败: ${error.message}`, 'error'); }
}
async function handleDeleteConfig(filename) {
    if (!await notification.confirm(`确定要删除配置 "${filename}" 吗？`)) return;
    try {
        await api.delete(`/config/file/${filename}`);
        notification.toast('配置已成功删除。', 'success');
        loadAllConfigs();
    } catch(error) { notification.toast(`删除失败: ${error.message}`, 'error'); }
}
async function handleSaveConfig(e) {
    e.preventDefault();
    const formData = new FormData(DOMElements.configForm);
    const filename = formData.get('domain');
    if (!filename) {
        notification.toast('域名不能为空。', 'error');
        return;
    }
    const getHeadersMap = (keyName, valueName) => {
        const headers = {};
        formData.getAll(keyName).forEach((key, i) => {
            if (key) {
                if (!headers[key]) headers[key] = [];
                headers[key].push(formData.getAll(valueName)[i]);
            }
        });
        return headers;
    };
    const globalHeaders = getHeadersMap('header_key', 'header_value');
    const upstreamHeaders = getHeadersMap('upstream_header_key', 'upstream_header_value');
    const configData = {
        domain: filename,
        tmpl_type: formData.get('tmpl_type'),
        upstream: { upstream: formData.get('upstream'), muti_upstream: false, upstreams: [], upstream_headers: upstreamHeaders },
        file_server: { file_dir_path: formData.get('file_dir_path'), enable_browser: DOMElements.configForm.querySelector('#enable_browser').checked },
        headers: globalHeaders,
        log: { enable_log: DOMElements.configForm.querySelector('#enable_log').checked, log_domain: filename },
        error_page: { enable_error_page: DOMElements.configForm.querySelector('#enable_error_page').checked },
        encode: { enable_encode: DOMElements.configForm.querySelector('#enable_encode').checked }
    };
    try {
        const result = await api.put(`/config/file/${filename}`, configData);
        state.isEditing = false;
        notification.toast(result.message || '配置已成功保存。', 'success');
        setTimeout(() => {
            switchView(DOMElements.configListPanel);
            loadAllConfigs();
        }, 500);
    } catch(error) { notification.toast(`保存失败: ${error.message}`, 'error'); }
}
function init() {
    initTheme(DOMElements.themeToggleInput);
    notification.init(DOMElements.toastContainer, DOMElements.dialogContainer);
    loadAllConfigs();
    api.get('/config/templates')
        .then(templates => {
            state.availableTemplates = templates || [];
            const options = state.availableTemplates.length > 0 ? state.availableTemplates : ['无可用模板'];
            createCustomSelect('custom-select-tmpl', options, (selectedValue) => {
                updateFormVisibility(selectedValue, state.availableTemplates);
            });
            if (options[0] !== '无可用模板') updateFormVisibility(options[0], state.availableTemplates);
        })
        .catch(err => { if(err.message) notification.toast(`加载模板失败: ${err.message}`, 'error') });
    checkCaddyStatus();
    caddyStatusInterval = setInterval(checkCaddyStatus, POLLING_INTERVAL);
    DOMElements.menuToggleBtn.addEventListener('click', () => DOMElements.sidebar.classList.toggle('is-open'));
    DOMElements.mainContent.addEventListener('click', () => DOMElements.sidebar.classList.remove('is-open'));
    DOMElements.addNewConfigBtn.addEventListener('click', () => {
        state.isEditing = false;
        switchView(DOMElements.configFormPanel);
        DOMElements.formTitle.textContent = '创建新配置';
        DOMElements.configForm.reset();
        if (state.availableTemplates.length > 0) {
            const selectContainer = document.getElementById('custom-select-tmpl');
            selectContainer.querySelector('.select-selected').textContent = state.availableTemplates[0];
            selectContainer.querySelector('input[type="hidden"]').value = state.availableTemplates[0];
            updateFormVisibility(state.availableTemplates[0], state.availableTemplates);
        }
        state.initialFormState = getFormStateAsString();
        DOMElements.headersContainer.innerHTML = '';
        DOMElements.upstreamHeadersContainer.innerHTML = '';
        DOMElements.originalFilenameInput.value = '';
    });
    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.configForm.addEventListener('submit', handleSaveConfig);
    DOMElements.logoutBtn.addEventListener('click', handleLogout);
    DOMElements.configListContainer.addEventListener('click', e => {
        const button = e.target.closest('button');
        if (!button) return;
        const filename = button.closest('.config-item').dataset.filename;
        if (button.classList.contains('edit-btn')) handleEditConfig(filename);
        if (button.classList.contains('delete-btn')) handleDeleteConfig(filename);
    });
}
init();