// 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();