wjqserver/caddydash
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

init

Browse source
This commit is contained in:
wjqserver 2025-06-20 16:33:27 +08:00
commit b10790c212
40 changed files with 4149 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

411
frontend/css/style.css Normal file
View file

@ -0,0 +1,411 @@
/* --- 全局与变量定义 --- */
:root {
--bg-color: #f8f9fa;
--surface-color: #ffffff;
--primary-color: #4f46e5;
--primary-color-hover: #4338ca;
--danger-color: #e11d48;
--danger-color-hover: #be123c;
--success-color: #22c55e;
--success-color-hover: #16a34a;
--warning-color: #f59e0b;
--warning-color-hover: #d97706;
--checking-color: #f59e0b;
--text-color: #1f2937;
--text-color-secondary: #6b7280;
--border-color: #e5e7eb;
--border-radius-large: 12px;
--border-radius-small: 8px;
--font-family: 'Inter', sans-serif;
--sidebar-width: 260px;
--transition-speed: 0.3s;
}
[data-theme="dark"] {
--bg-color: #111827;
--surface-color: #1f2937;
--text-color: #f9fafb;
--text-color-secondary: #9ca3af;
--border-color: #374151;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--font-family);
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.6;
overflow: hidden;
transition: background-color var(--transition-speed), color var(--transition-speed);
}
.hidden { display: none !important; }
/* --- 登录页 --- */
.login-page-body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.login-container {
width: 100%;
max-width: 400px;
padding: 40px;
background-color: var(--surface-color);
border-radius: var(--border-radius-large);
border: 1px solid var(--border-color);
box-shadow: 0 10px 25px rgba(0,0,0,0.05);
text-align: center;
}
.login-header { margin-bottom: 32px; }
.login-header .fa-rocket {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 16px;
}
.login-header h1 {
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 8px;
}
.login-header p { color: var(--text-color-secondary); }
#login-form .form-group {
text-align: left;
margin-bottom: 20px;
}
#init-form .form-group {
text-align: left;
margin-bottom: 20px;
}
.btn-login {
margin-top: 16px;
width: 100%;
justify-content: space-between;
padding-left: 24px;
padding-right: 24px;
}
.error-text {
color: var(--danger-color);
font-size: 0.875rem;
text-align: left;
margin-top: -12px;
margin-bottom: 16px;
min-height: 1.2em;
}
/* --- Toast 通知 --- */
.toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 2000;
display: flex;
flex-direction: column;
gap: 12px;
}
.toast {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-small);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
width: 320px;
opacity: 0;
transform: translateX(100%);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast-icon { font-size: 1.25rem; }
.toast-message { flex-grow: 1; font-size: 0.9rem; font-weight: 500; }
.toast-close {
background: none; border: none; color: var(--text-color-secondary);
cursor: pointer; font-size: 1.1rem; padding: 4px;
}
.toast.success .toast-icon { color: var(--success-color); }
.toast.error .toast-icon { color: var(--danger-color); }
.toast.info .toast-icon { color: var(--primary-color); }
/* --- 交互式对话框/Modal --- */
#dialog-container {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
z-index: 1000; display: flex; align-items: center; justify-content: center;
background-color: rgba(0,0,0,0.3);
opacity: 0; visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s;
}
#dialog-container.active {
opacity: 1; visibility: visible;
}
.dialog-box {
background-color: var(--surface-color); border-radius: var(--border-radius-large);
padding: 24px; width: 90%; max-width: 400px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1); text-align: center;
transform: scale(0.95);
transition: transform 0.2s ease;
}
#dialog-container.active .dialog-box {
transform: scale(1);
}
.dialog-message { margin: 16px 0 24px; font-size: 1rem; color: var(--text-color-secondary); }
.dialog-actions { display: flex; justify-content: center; gap: 12px; }
.dialog-actions .btn { width: auto; }
/* --- 主应用布局 --- */
.app-container { display: flex; height: 100vh; }
.main-content { flex-grow: 1; padding: 24px 32px; overflow-y: auto; }
#view-container { position: relative; }
.view { animation: fadeIn 0.5s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.sidebar {
width: var(--sidebar-width);
background-color: var(--surface-color);
padding: 24px;
display: flex;
flex-direction: column;
border-right: 1px solid var(--border-color);
flex-shrink: 0;
transition: transform var(--transition-speed) ease, background-color var(--transition-speed), border-color var(--transition-speed);
}
.sidebar-header {
display: flex; align-items: center; gap: 12px;
margin-bottom: 32px; font-size: 1.5rem; color: var(--primary-color);
}
.sidebar-header h1 { font-size: 1.25rem; font-weight: 600; color: var(--text-color); }
.sidebar-nav { flex-grow: 1; }
.sidebar-nav ul li a {
display: flex; align-items: center; gap: 16px; padding: 12px;
border-radius: var(--border-radius-small); color: var(--text-color-secondary);
font-weight: 500; transition: all 0.2s ease;
}
.sidebar-nav ul li a:hover { background-color: var(--bg-color); color: var(--text-color); }
.sidebar-nav ul li a.active { background-color: var(--primary-color); color: white; }
.sidebar-nav ul li a.active i { color: white; }
.sidebar-bottom { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-color); transition: border-color var(--transition-speed); }
.theme-switcher {
display: flex;
justify-content: space-around;
align-items: center;
padding: 12px;
background-color: var(--bg-color);
border-radius: var(--border-radius-small);
margin-bottom: 16px;
transition: background-color var(--transition-speed);
}
.theme-switcher i { color: var(--text-color-secondary); }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
background-color: #ccc; border-radius: 24px;
transition: var(--transition-speed);
}
.slider:before {
position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px;
background-color: white; border-radius: 50%;
transition: var(--transition-speed);
}
input:checked + .slider { background-color: var(--primary-color); }
input:checked + .slider:before { transform: translateX(20px); }
.caddy-control-panel {
margin-top: 16px;
padding: 12px;
background-color: var(--bg-color);
border-radius: var(--border-radius-small);
transition: background-color var(--transition-speed);
}
#caddy-action-button-container {
display: flex;
flex-direction: column;
gap: 8px;
}
.caddy-status {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
transition: background-color var(--transition-speed);
}
.status-dot.running { background-color: var(--success-color); }
.status-dot.stopped { background-color: var(--danger-color); }
.status-dot.checking { background-color: var(--checking-color); }
.status-dot.error { background-color: var(--text-color-secondary); }
.status-text {
font-weight: 500;
font-size: 0.875rem;
color: var(--text-color-secondary);
}
.logout-section {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border-color);
transition: border-color var(--transition-speed);
}
.main-header {
display: flex; align-items: center; margin-bottom: 24px;
}
.main-header h2 { font-size: 1.75rem; font-weight: 700; flex-grow: 1; }
#menu-toggle-btn { display: none; margin-right: 16px; }
.card-panel {
background-color: var(--surface-color);
border-radius: var(--border-radius-large);
padding: 24px;
margin-bottom: 24px;
border: 1px solid var(--border-color);
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
transition: background-color var(--transition-speed), border-color var(--transition-speed);
}
.form-panel-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
}
.form-panel-header h3 {
flex-grow: 1;
}
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 10px 18px; border: 1px solid transparent;
border-radius: var(--border-radius-small); font-weight: 600;
cursor: pointer; transition: all 0.2s ease;
width: 100%;
}
.btn:active { transform: scale(0.97); }
.btn:disabled {
background-color: #e5e7eb;
color: #9ca3af;
cursor: not-allowed;
border-color: transparent;
transform: none;
}
[data-theme="dark"] .btn:disabled {
background-color: #374151;
color: #6b7280;
}
.btn-primary { background-color: var(--primary-color); color: white; }
.btn-primary:hover:not(:disabled) { background-color: var(--primary-color-hover); }
.btn-secondary { background-color: var(--surface-color); color: var(--text-color); border-color: var(--border-color); }
.btn-secondary:hover:not(:disabled) { border-color: #ced4da; background-color: var(--bg-color); }
.btn-danger { background-color: var(--danger-color); color: white; }
.btn-danger:hover:not(:disabled) { background-color: var(--danger-color-hover); }
.btn-success { background-color: var(--success-color); color: white; }
.btn-success:hover:not(:disabled) { background-color: var(--success-color-hover); }
.btn-warning { background-color: var(--warning-color); color: white; }
.btn-warning:hover:not(:disabled) { background-color: var(--warning-color-hover); }
.btn-small { padding: 6px 12px; font-size: 0.875rem; width: auto; }
.btn-icon {
background: none; border: none; color: var(--text-color-secondary); cursor: pointer;
width: 40px; height: 40px; font-size: 1.1rem; border-radius: 50%;
width: auto;
}
.btn-icon:hover { background-color: var(--bg-color); color: var(--text-color); }
.main-header .btn-primary { width: auto; }
.form-actions .btn { width: auto; }
.config-list-container { display: flex; flex-direction: column; gap: 12px; }
.config-item {
display: flex; align-items: center; padding: 12px 16px; background-color: var(--bg-color);
border: 1px solid var(--border-color); border-radius: var(--border-radius-small);
transition: all 0.2s ease;
}
.config-item:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.05); }
.config-item-name { font-weight: 500; flex-grow: 1; }
.config-item-actions { display: flex; gap: 8px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-bottom: 24px; }
.form-group label, fieldset legend {
display: block; font-weight: 500; margin-bottom: 8px; color: var(--text-color-secondary); font-size: 0.875rem;
}
.form-group input {
width: 100%; padding: 12px; background-color: var(--surface-color); border: 1px solid var(--border-color);
border-radius: var(--border-radius-small); color: var(--text-color); font-size: 1rem;
transition: border-color 0.2s, box-shadow 0.2s, background-color var(--transition-speed);
}
.form-group input:focus {
outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}
fieldset { border: none; padding: 0; margin: 0 0 24px 0; }
.sub-fieldset {
border: 1px solid var(--border-color);
border-radius: var(--border-radius-small);
padding: 16px;
margin-top: 20px;
}
.sub-legend {
font-weight: 500;
color: var(--text-color-secondary);
font-size: 0.875rem;
margin-bottom: 12px;
}
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-top: 8px; }
.custom-checkbox {
position: relative; display: inline-flex; align-items: center; cursor: pointer; gap: 12px;
}
.custom-checkbox input { display: none; }
.custom-checkbox .checkmark {
width: 20px; height: 20px; border: 2px solid var(--border-color);
border-radius: 6px; transition: all 0.2s;
}
.custom-checkbox input:checked + .checkmark { background-color: var(--primary-color); border-color: var(--primary-color); }
.custom-checkbox .checkmark::after {
content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
font-size: 12px; color: white; position: absolute; top: 3px; left: 3px;
transform: scale(0); transition: transform 0.2s;
}
.custom-checkbox input:checked + .checkmark::after { transform: scale(1); }
.header-entry {
display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; margin-bottom: 12px;
}
.header-entry input {
width: 100%; padding: 10px; background-color: var(--bg-color); border: 1px solid var(--border-color);
border-radius: var(--border-radius-small); color: var(--text-color);
}
.custom-select { position: relative; }
.select-selected {
display: flex; justify-content: space-between; align-items: center;
padding: 12px; background-color: var(--surface-color); border: 1px solid var(--border-color);
border-radius: var(--border-radius-small); cursor: pointer; user-select: none;
transition: border-color 0.2s, box-shadow 0.2s, background-color var(--transition-speed);
}
.select-selected.select-arrow-active {
border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}
.select-selected::after {
content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
transition: transform var(--transition-speed) ease;
}
.select-selected.select-arrow-active::after { transform: rotate(180deg); }
.select-items {
position: absolute; background-color: var(--surface-color); top: 100%; left: 0; right: 0;
border: 1px solid var(--border-color); border-radius: var(--border-radius-small);
box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 99;
margin-top: 8px; max-height: 200px; overflow-y: auto;
opacity: 0; transform: translateY(-10px); visibility: hidden;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.select-items.select-show { opacity: 1; transform: translateY(0); visibility: visible; }
.select-items div {
padding: 12px 16px; cursor: pointer; transition: background-color 0.2s;
}
.select-items div:hover, .same-as-selected { background-color: var(--bg-color); }
#rendered-output-panel pre {
background-color: var(--bg-color); padding: 16px; border-radius: var(--border-radius-small);
overflow-x: auto; white-space: pre-wrap; word-break: break-all;
border: 1px solid var(--border-color); transition: background-color var(--transition-speed);
}
@media (max-width: 992px) {
.sidebar {
position: fixed; z-index: 200; height: 100%;
transform: translateX(-100%);
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.sidebar.is-open { transform: translateX(0); }
#menu-toggle-btn { display: inline-flex; }
.main-header .btn-text { display: none; }
.sidebar-nav span, .sidebar-footer span { display: inline; }
.main-content { padding: 16px; }
}

148
frontend/index.html Normal file
View file

@ -0,0 +1,148 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CaddyDash</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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">
</head>
<body>
<div class="app-container">
<aside class="sidebar" id="sidebar">
<header class="sidebar-header">
<i class="fa-solid fa-rocket"></i>
<h1>CaddyDash</h1>
</header>
<nav class="sidebar-nav">
<ul>
<li><a href="#" class="active"><i class="fa-solid fa-sitemap"></i> <span>配置管理</span></a></li>
<li><a href="#"><i class="fa-solid fa-chart-line"></i> <span>仪表盘 (预留)</span></a></li>
<li><a href="#"><i class="fa-solid fa-puzzle-piece"></i> <span>模板管理 (预留)</span></a></li>
</ul>
</nav>
<div class="sidebar-bottom">
<div class="theme-switcher">
<i class="fa-solid fa-sun"></i>
<label class="switch"><input type="checkbox" id="theme-toggle-input"><span class="slider"></span></label>
<i class="fa-solid fa-moon"></i>
</div>
<div class="caddy-control-panel">
<div id="caddy-status-indicator" class="caddy-status">
<span class="status-dot checking"></span>
<span class="status-text">检查中...</span>
</div>
<div id="caddy-action-button-container"></div>
</div>
<div class="logout-section">
<button id="logout-btn" class="btn btn-secondary">
<i class="fa-solid fa-right-from-bracket"></i>
<span>退出登录</span>
</button>
</div>
</div>
</aside>
<main class="main-content">
<header class="main-header">
<button class="btn-icon" id="menu-toggle-btn"><i class="fa-solid fa-bars"></i></button>
<h2>配置管理</h2>
<button id="add-new-config-btn" class="btn btn-primary">
<i class="fa-solid fa-plus"></i> <span class="btn-text">创建新配置</span>
</button>
</header>
<div id="view-container">
<section id="config-list-panel" class="card-panel view">
<ul id="config-list" class="config-list-container"></ul>
</section>
<section id="config-form-panel" class="card-panel view hidden">
<div class="form-panel-header">
<button id="back-to-list-btn" class="btn-icon" title="返回列表">
<i class="fa-solid fa-arrow-left"></i>
</button>
<h3 id="form-title">创建新配置</h3>
</div>
<form id="config-form">
<input type="hidden" id="original-filename" value="">
<div class="form-grid">
<div class="form-group">
<label for="domain">域名 (将用作文件名)</label>
<input type="text" id="domain" name="domain" required>
</div>
<div class="form-group">
<label>模板类型</label>
<div id="custom-select-tmpl" class="custom-select"></div>
</div>
</div>
<!-- 反向代理配置 -->
<fieldset id="upstream-fieldset" class="hidden">
<legend>反向代理 (Upstream)</legend>
<div class="form-group">
<label for="upstream">上游服务地址</label>
<input type="text" id="upstream" name="upstream" placeholder="例如: 127.0.0.1:8080">
</div>
<!-- 新增: 上游请求头配置区域 -->
<div class="sub-fieldset">
<p class="sub-legend">上游请求头 (Upstream Headers)</p>
<div id="upstream-headers-container"></div>
<button type="button" id="add-upstream-header-btn" class="btn btn-secondary btn-small">
<i class="fa-solid fa-plus"></i> 添加上游请求头
</button>
</div>
</fieldset>
<!-- 文件服务器配置 -->
<fieldset id="fileserver-fieldset" class="hidden">
<legend>文件服务 (File Server)</legend>
<div class="form-group">
<label for="file_dir_path">根目录路径</label>
<input type="text" id="file_dir_path" name="file_dir_path" placeholder="例如: /srv/www">
</div>
<label class="custom-checkbox">
<input type="checkbox" id="enable_browser" name="enable_browser">
<span class="checkmark"></span> 启用文件浏览器
</label>
</fieldset>
<!-- 全局请求头 -->
<fieldset id="headers-fieldset">
<legend>全局请求头 (Headers)</legend>
<div id="headers-container"></div>
<button type="button" id="add-header-btn" class="btn btn-secondary btn-small"><i class="fa-solid fa-plus"></i> 添加全局请求头</button>
</fieldset>
<fieldset>
<legend>功能开关</legend>
<div class="checkbox-grid">
<label class="custom-checkbox"><input type="checkbox" id="enable_log" name="enable_log"><span class="checkmark"></span> 启用日志</label>
<label class="custom-checkbox"><input type="checkbox" id="enable_error_page" name="enable_error_page"><span class="checkmark"></span> 启用错误页</label>
<label class="custom-checkbox"><input type="checkbox" id="enable_encode" name="enable_encode"><span class="checkmark"></span> 启用压缩</label>
</div>
</fieldset>
<div class="form-actions">
<button type="submit" class="btn btn-primary"><i class="fa-solid fa-save"></i> <span>保存配置</span></button>
<button type="button" id="cancel-edit-btn" class="btn btn-secondary">取消</button>
</div>
</form>
</section>
<section id="rendered-output-panel" class="card-panel view hidden">
<h3>渲染后的 Caddyfile</h3>
<pre><code id="rendered-content"></code></pre>
</section>
</div>
</main>
</div>
<div id="toast-container" class="toast-container"></div>
<div id="dialog-container"></div>
<script type="module" src="js/app.js"></script>
</body>
</html>

50
frontend/init.html Normal file
View file

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首次设置 - CaddyDash</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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">
</head>
<body class="login-page-body">
<div class="login-container">
<header class="login-header">
<i class="fa-solid fa-magic-wand-sparkles"></i>
<h1>欢迎使用 CaddyDash</h1>
<p>请创建您的管理员账户以完成首次设置</p>
</header>
<form id="init-form">
<div class="form-group">
<label for="username">管理员用户名</label>
<input type="text" id="username" name="username" autocomplete="username">
</div>
<div class="form-group">
<label for="password">密码 (至少8位)</label>
<input type="password" id="password" name="password" autocomplete="new-password">
</div>
<div class="form-group">
<label for="confirm_password">确认密码</label>
<input type="password" id="confirm_password" name="confirm_password" autocomplete="new-password">
</div>
<button type="submit" class="btn btn-primary btn-login">
<span>完成设置</span>
<i class="fa-solid fa-check"></i>
</button>
</form>
</div>
<div id="toast-container" class="toast-container"></div>
<script type="module" src="js/init.js"></script>
</body>
</html>

26
frontend/js/api.js Normal file
View file

@ -0,0 +1,26 @@
// js/api.js - 处理所有与后端API的通信
const API_BASE = '/v0/api';
async function handleResponse(response) {
// 如果响应是重定向(通常是session过期), 则让浏览器自动跳转
if (response.redirected) {
window.location.href = response.url;
// 返回一个永远不会 resolve 的 Promise 来中断后续的 .then() 链
return new Promise(() => {});
}
if (!response.ok) {
const errorData = await response.json().catch(() => ({ error: `HTTP error! status: ${response.status}` }));
throw new Error(errorData.error);
}
const text = await response.text();
// 检查响应体是否为空, 避免解析空字符串时出错
return text ? JSON.parse(text) : { success: true };
}
export const api = {
get: (endpoint) => fetch(`${API_BASE}${endpoint}`).then(handleResponse),
post: (endpoint, body = {}) => fetch(`${API_BASE}${endpoint}`, { method: 'POST', body: JSON.stringify(body), headers: {'Content-Type': 'application/json'} }).then(handleResponse),
put: (endpoint, body) => fetch(`${API_BASE}${endpoint}`, { method: 'PUT', body: JSON.stringify(body), headers: {'Content-Type': 'application/json'} }).then(handleResponse),
delete: (endpoint) => fetch(`${API_BASE}${endpoint}`, { method: 'DELETE' }).then(handleResponse),
};

182
frontend/js/app.js Normal file
View file

@ -0,0 +1,182 @@
// 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();

150
frontend/js/init.js Normal file
View file

@ -0,0 +1,150 @@
// js/init.js
document.addEventListener('DOMContentLoaded', () => {
const DOMElements = {
initForm: document.getElementById('init-form'),
initButton: null,
toastContainer: document.getElementById('toast-container'),
usernameInput: document.getElementById('username'),
passwordInput: document.getElementById('password'),
confirmPasswordInput: document.getElementById('confirm_password'),
};
const INIT_API_URL = '/v0/api/auth/init';
const PASSWORD_MIN_LENGTH = 8;
const TOAST_DEFAULT_DURATION = 3000;
const REDIRECT_DELAY_SUCCESS = 1500;
const theme = {
init: () => {
const storedTheme = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const currentTheme = storedTheme || (systemPrefersDark ? 'dark' : 'light');
document.documentElement.dataset.theme = currentTheme;
}
};
const toast = {
_container: null,
_icons: { success: 'fa-check-circle', error: 'fa-times-circle', info: 'fa-info-circle' },
init: (containerElement) => {
if (!containerElement) {
console.error('Toast container element not found.');
return;
}
toast._container = containerElement;
toast._container.addEventListener('click', (e) => {
if (e.target.dataset.toastClose !== undefined) {
toast._hideToast(e.target.closest('.toast'));
}
});
},
show: (message, type = 'info', duration = TOAST_DEFAULT_DURATION) => {
if (!toast._container) {
console.error('Toast module not initialized. Container is missing.');
return;
}
const iconClass = toast._icons[type] || 'fa-info-circle';
const toastElement = document.createElement('div');
toastElement.className = `toast ${type}`;
toastElement.innerHTML = `
<i class="toast-icon fa-solid ${iconClass}"></i>
<p class="toast-message">${message}</p>
<button class="toast-close" data-toast-close>×</button>
`;
toast._container.appendChild(toastElement);
requestAnimationFrame(() => toastElement.classList.add('show'));
setTimeout(() => toast._hideToast(toastElement), duration);
},
_hideToast: (toastElement) => {
if (!toastElement) return;
toastElement.classList.remove('show');
toastElement.addEventListener('transitionend', () => toastElement.remove(), { once: true });
}
};
async function handleInitSubmit(e) {
e.preventDefault();
// 1. 获取并修剪输入值
const username = DOMElements.usernameInput.value.trim(); // 获取用户名并去除前后空格
const password = DOMElements.passwordInput.value.trim();
const confirmPassword = DOMElements.confirmPasswordInput.value.trim();
// 2. 添加用户名输入框的空值验证
if (username === '') {
toast.show('管理员用户名不能为空', 'error');
DOMElements.usernameInput.focus();
return;
}
// 其他密码验证逻辑不变
if (password === '') {
toast.show('密码不能为空', 'error');
DOMElements.passwordInput.focus();
return;
}
if (confirmPassword === '') {
toast.show('确认密码不能为空', 'error');
DOMElements.confirmPasswordInput.focus();
return;
}
if (password !== confirmPassword) {
toast.show('两次输入的密码不匹配', 'error');
DOMElements.passwordInput.focus();
return;
}
if (password.length < PASSWORD_MIN_LENGTH) {
toast.show(`密码长度至少为 ${PASSWORD_MIN_LENGTH} 位`, 'error');
DOMElements.passwordInput.focus();
return;
}
DOMElements.initButton.disabled = true;
DOMElements.initButton.querySelector('span').textContent = '设置中...';
try {
const formData = new FormData(DOMElements.initForm);
formData.set('username', username); // 确保发送的是修剪过的用户名
formData.set('password', password); // 确保发送的是修剪过的密码
formData.delete('confirm_password');
const response = await fetch(INIT_API_URL, {
method: 'POST',
body: new URLSearchParams(formData)
});
const result = await response.json();
if (response.ok) {
toast.show('管理员账户创建成功！正在跳转到登录页面...', 'success');
setTimeout(() => { window.location.href = '/login.html'; }, REDIRECT_DELAY_SUCCESS);
} else {
throw new Error(result.error || `初始化失败: ${response.status}`);
}
} catch (error) {
toast.show(error.message, 'error');
DOMElements.initButton.disabled = false;
DOMElements.initButton.querySelector('span').textContent = '完成设置';
}
}
function initApp() {
theme.init();
if (DOMElements.initForm) {
DOMElements.initButton = DOMElements.initForm.querySelector('button[type="submit"]');
toast.init(DOMElements.toastContainer);
DOMElements.initForm.addEventListener('submit', handleInitSubmit);
} else {
console.error('Init form element not found. Script may not function correctly.');
}
}
initApp();
});

89
frontend/js/login.js Normal file
View file

@ -0,0 +1,89 @@
document.addEventListener('DOMContentLoaded', () => {
const DOMElements = {
loginForm: document.getElementById('login-form'),
toastContainer: document.getElementById('toast-container'),
};
const loginButton = DOMElements.loginForm.querySelector('button[type="submit"]');
const LOGIN_API_URL = '/v0/api/auth/login';
const theme = {
init: () => {
const storedTheme = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const currentTheme = storedTheme || (systemPrefersDark ? 'dark' : 'light');
document.documentElement.dataset.theme = currentTheme;
}
};
const toast = {
show: (message, type = 'info', duration = 3000) => {
const icons = { success: 'fa-check-circle', error: 'fa-times-circle', info: 'fa-info-circle' };
const iconClass = icons[type] || 'fa-info-circle';
const toastElement = document.createElement('div');
toastElement.className = `toast ${type}`;
toastElement.innerHTML = `<i class="toast-icon fa-solid ${iconClass}"></i><p class="toast-message">${message}</p><button class="toast-close" data-toast-close>×</button>`;
DOMElements.toastContainer.appendChild(toastElement);
requestAnimationFrame(() => toastElement.classList.add('show'));
const timeoutId = setTimeout(() => hideToast(toastElement), duration);
toastElement.querySelector('[data-toast-close]').addEventListener('click', () => {
clearTimeout(timeoutId);
hideToast(toastElement);
});
}
};
function hideToast(toastElement) {
if (!toastElement) return;
toastElement.classList.remove('show');
toastElement.addEventListener('transitionend', () => toastElement.remove(), { once: true });
}
async function handleLogin(e) {
e.preventDefault();
// 获取并确认值
const username = DOMElements.loginForm.username.value.trim();
const password = DOMElements.loginForm.password.value.trim();
if (username === '') {
toast.show('用户名不能为空', 'error');
DOMElements.loginForm.username.focus();
return;
}
if (password === '') {
toast.show('密码不能为空', 'error');
DOMElements.loginForm.password.focus();
return;
}
loginButton.disabled = true;
loginButton.querySelector('span').textContent = '登录中...';
try {
const response = await fetch(LOGIN_API_URL, {
method: 'POST',
body: new URLSearchParams(new FormData(DOMElements.loginForm))
});
const result = await response.json();
if (response.ok) {
toast.show('登录成功，正在跳转...', 'success');
setTimeout(() => { window.location.href = '/'; }, 500);
} else {
throw new Error(result.error || `登录失败: ${response.status}`);
}
} catch (error) {
toast.show(error.message, 'error');
loginButton.disabled = false;
loginButton.querySelector('span').textContent = '登录';
}
}
function init() {
theme.init();
if (DOMElements.loginForm) {
DOMElements.loginForm.addEventListener('submit', handleLogin);
}
}
init();
});

57
frontend/js/notifications.js Normal file
View file

@ -0,0 +1,57 @@
// js/notifications.js - 提供Toast和Dialog两种通知
// 这个模块在初始化时需要知道容器的DOM元素
let toastContainer;
let dialogContainer;
function hideToast(toastElement) {
if (!toastElement) return;
toastElement.classList.remove('show');
toastElement.addEventListener('transitionend', () => toastElement.remove(), { once: true });
}
export const notification = {
init: (toastEl, dialogEl) => {
toastContainer = toastEl;
dialogContainer = dialogEl;
},
toast: (message, type = 'info', duration = 3000) => {
const icons = { success: 'fa-check-circle', error: 'fa-times-circle', info: 'fa-info-circle', warning: 'fa-exclamation-triangle' };
const iconClass = icons[type] || 'fa-info-circle';
const toastElement = document.createElement('div');
toastElement.className = `toast ${type}`;
toastElement.innerHTML = `<i class="toast-icon fa-solid ${iconClass}"></i><p class="toast-message">${message}</p><button class="toast-close" data-toast-close>×</button>`;
toastContainer.appendChild(toastElement);
requestAnimationFrame(() => toastElement.classList.add('show'));
const timeoutId = setTimeout(() => hideToast(toastElement), duration);
toastElement.querySelector('[data-toast-close]').addEventListener('click', () => {
clearTimeout(timeoutId);
hideToast(toastElement);
});
},
confirm: (message) => {
return new Promise(resolve => {
const dialogHTML = `
<div class="dialog-box">
<p class="dialog-message">${message}</p>
<div class="dialog-actions">
<button class="btn btn-secondary" data-action="cancel">取消</button>
<button class="btn btn-primary" data-action="confirm">确定</button>
</div>
</div>`;
dialogContainer.innerHTML = dialogHTML;
dialogContainer.classList.add('active');
const eventHandler = (e) => {
const actionButton = e.target.closest('[data-action]');
if (!actionButton) return;
closeDialog(actionButton.dataset.action === 'confirm');
};
const closeDialog = (result) => {
dialogContainer.removeEventListener('click', eventHandler);
dialogContainer.classList.remove('active');
setTimeout(() => { dialogContainer.innerHTML = ''; resolve(result); }, 200);
};
dialogContainer.addEventListener('click', eventHandler);
});
}
};

7
frontend/js/state.js Normal file
View file

@ -0,0 +1,7 @@
// js/state.js - 管理应用的共享状态
export const state = {
isEditing: false,
initialFormState: '', // 用于检测表单是否有未保存的更改
availableTemplates: [], // 存储从后端获取的可用模板名称
};

26
frontend/js/theme.js Normal file
View file

@ -0,0 +1,26 @@
// js/theme.js - 处理深色/浅色主题切换
// 这个模块在初始化时需要知道切换按钮的DOM元素
let themeToggleInput;
function applyTheme(themeName) {
document.documentElement.dataset.theme = themeName;
if (themeToggleInput) {
themeToggleInput.checked = themeName === 'dark';
}
localStorage.setItem('theme', themeName);
}
function handleToggle(e) {
const newTheme = e.target.checked ? 'dark' : 'light';
applyTheme(newTheme);
}
export function initTheme(toggleElement) {
themeToggleInput = toggleElement;
const storedTheme = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const currentTheme = storedTheme || (systemPrefersDark ? 'dark' : 'light');
applyTheme(currentTheme);
themeToggleInput.addEventListener('change', handleToggle);
}

176
frontend/js/ui.js Normal file
View file

@ -0,0 +1,176 @@
// js/ui.js - 管理所有与UI渲染和DOM操作相关的函数
// 集中管理所有需要操作的DOM元素
export const DOMElements = {
sidebar: document.getElementById('sidebar'),
menuToggleBtn: document.getElementById('menu-toggle-btn'),
mainContent: document.querySelector('.main-content'),
configListPanel: document.getElementById('config-list-panel'),
configFormPanel: document.getElementById('config-form-panel'),
renderedOutputPanel: document.getElementById('rendered-output-panel'),
configForm: document.getElementById('config-form'),
formTitle: document.getElementById('form-title'),
backToListBtn: document.getElementById('back-to-list-btn'),
domainInput: document.getElementById('domain'),
originalFilenameInput: document.getElementById('original-filename'),
headersContainer: document.getElementById('headers-container'),
addNewConfigBtn: document.getElementById('add-new-config-btn'),
cancelEditBtn: document.getElementById('cancel-edit-btn'),
addHeaderBtn: document.getElementById('add-header-btn'),
configListContainer: document.getElementById('config-list'),
renderedContentCode: document.getElementById('rendered-content'),
toastContainer: document.getElementById('toast-container'),
dialogContainer: document.getElementById('dialog-container'),
themeToggleInput: document.getElementById('theme-toggle-input'),
caddyStatusIndicator: document.getElementById('caddy-status-indicator'),
caddyActionButtonContainer: document.getElementById('caddy-action-button-container'),
logoutBtn: document.getElementById('logout-btn'),
upstreamFieldset: document.getElementById('upstream-fieldset'),
fileserverFieldset: document.getElementById('fileserver-fieldset'),
upstreamHeadersContainer: document.getElementById('upstream-headers-container'),
addUpstreamHeaderBtn: document.getElementById('add-upstream-header-btn'),
};
export function switchView(viewToShow) {
[DOMElements.configListPanel, DOMElements.configFormPanel, DOMElements.renderedOutputPanel]
.forEach(view => view.classList.add('hidden'));
if (viewToShow) viewToShow.classList.remove('hidden');
DOMElements.addNewConfigBtn.disabled = (viewToShow === DOMElements.configFormPanel);
}
export function renderConfigList(filenames) {
DOMElements.configListContainer.innerHTML = '';
if (!filenames || filenames.length === 0) {
DOMElements.configListContainer.innerHTML = '<p>还没有任何配置，请创建一个。</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>`;
DOMElements.configListContainer.appendChild(item);
});
}
export function createCustomSelect(containerId, options, onSelect) {
const container = document.getElementById(containerId);
container.innerHTML = `<div class="select-selected"></div><div class="select-items"></div><input type="hidden" name="tmpl_type">`;
const selectedDiv = container.querySelector('.select-selected');
const itemsDiv = container.querySelector('.select-items');
const hiddenInput = container.querySelector('input[type="hidden"]');
itemsDiv.innerHTML = '';
options.forEach((option, index) => {
const item = document.createElement('div');
item.textContent = option;
item.dataset.value = option;
if (index === 0) {
selectedDiv.textContent = option;
hiddenInput.value = option;
}
item.addEventListener('click', function(e) {
selectedDiv.textContent = this.textContent;
hiddenInput.value = this.dataset.value;
itemsDiv.classList.remove('select-show');
selectedDiv.classList.remove('select-arrow-active');
onSelect && onSelect(this.dataset.value);
e.stopPropagation();
});
itemsDiv.appendChild(item);
});
selectedDiv.addEventListener('click', (e) => {
e.stopPropagation();
document.querySelectorAll('.select-items.select-show').forEach(openSelect => {
if (openSelect !== itemsDiv) {
openSelect.classList.remove('select-show');
openSelect.previousElementSibling.classList.remove('select-arrow-active');
}
});
itemsDiv.classList.toggle('select-show');
selectedDiv.classList.toggle('select-arrow-active');
});
document.addEventListener('click', () => {
itemsDiv.classList.remove('select-show');
selectedDiv.classList.remove('select-arrow-active');
});
}
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="移除此条目">
<i class="fa-solid fa-xmark"></i>
</button>`;
container.appendChild(div);
}
export function fillForm(config, originalFilename) {
DOMElements.originalFilenameInput.value = originalFilename;
DOMElements.domainInput.value = config.domain;
document.getElementById('upstream').value = config.upstream?.upstream || '';
document.getElementById('file_dir_path').value = config.file_server?.file_dir_path || '';
document.getElementById('enable_browser').checked = config.file_server?.enable_browser || false;
const selectContainer = document.getElementById('custom-select-tmpl');
selectContainer.querySelector('.select-selected').textContent = config.tmpl_type;
selectContainer.querySelector('input[type="hidden"]').value = config.tmpl_type;
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)));
DOMElements.upstreamHeadersContainer.innerHTML = '';
if (config.upstream?.upstream_headers) Object.entries(config.upstream.upstream_headers).forEach(([k, v]) => v.forEach(val => addKeyValueInput(DOMElements.upstreamHeadersContainer, 'upstream_header_key', 'upstream_header_value', k, val)));
document.getElementById('enable_log').checked = config.log?.enable_log || false;
document.getElementById('enable_error_page').checked = config.error_page?.enable_error_page || false;
document.getElementById('enable_encode').checked = config.encode?.enable_encode || false;
}
export function showRenderedConfig(configs, filename) {
const targetConfig = configs.find(c => c.filename === filename);
if (targetConfig && targetConfig.rendered_content) {
DOMElements.renderedContentCode.textContent = atob(targetConfig.rendered_content);
DOMElements.renderedOutputPanel.classList.remove('hidden');
} else {
DOMElements.renderedOutputPanel.classList.add('hidden');
}
}
function createButton(text, className, onClick) {
const button = document.createElement('button');
button.className = `btn ${className}`;
button.innerHTML = `<span>${text}</span>`;
button.addEventListener('click', onClick);
return button;
}
export function updateCaddyStatusView(status, handlers) {
const { handleReloadCaddy, handleStopCaddy, handleStartCaddy } = handlers;
const dot = DOMElements.caddyStatusIndicator.querySelector('.status-dot');
const text = DOMElements.caddyStatusIndicator.querySelector('.status-text');
const buttonContainer = DOMElements.caddyActionButtonContainer;
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));
break;
case 'stopped':
statusText = '已停止'; dotClass = 'stopped';
buttonContainer.appendChild(createButton('启动 Caddy', 'btn-success', handleStartCaddy));
break;
case 'checking': statusText = '检查中...'; dotClass = 'checking'; break;
default: statusText = '状态未知'; dotClass = 'error'; break;
}
text.textContent = statusText;
dot.classList.add(dotClass);
}
export function updateFormVisibility(selectedTemplate, availableTemplates) {
const showUpstream = selectedTemplate === 'reverse_proxy' && availableTemplates.includes('reverse_proxy');
const showFileServer = selectedTemplate === 'file_server' && availableTemplates.includes('file_server');
DOMElements.upstreamFieldset.classList.toggle('hidden', !showUpstream);
DOMElements.fileserverFieldset.classList.toggle('hidden', !showFileServer);
}

44
frontend/login.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录 - CaddyDash</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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">
</head>
<body class="login-page-body">
<div class="login-container">
<header class="login-header">
<i class="fa-solid fa-rocket"></i>
<h1>CaddyDash</h1>
<p>请输入您的凭证以继续</p>
</header>
<form id="login-form">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" name="username" autocomplete="username">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" name="password" autocomplete="current-password">
</div>
<button type="submit" class="btn btn-primary btn-login">
<span>登录</span>
<i class="fa-solid fa-arrow-right"></i>
</button>
</form>
</div>
<!-- 右上角消息通知容器 -->
<div id="toast-container" class="toast-container"></div>
<script src="js/login.js"></script>
</body>
</html>