feat: redesign admin interface

This commit is contained in:
2026-09-15 06:41:26 +08:00
parent 32daa27712
commit 68e3d0bfce
6 changed files with 73 additions and 896 deletions
File diff suppressed because one or more lines are too long
+9 -175
View File
@@ -1,176 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Categories - ToNav</title><link rel="stylesheet" href="/static/css/admin.css"><script>document.documentElement.classList.toggle('dark',localStorage.getItem('tonav-theme')==='dark')</script></head><body><div class="admin-shell"><aside class="admin-sidebar"><div class="admin-brand">ToNav</div><div class="admin-label">OVERVIEW</div><a class="admin-nav" href="/admin/dashboard">Overview</a><div class="admin-label" style="margin-top:22px">SERVICES</div><a class="admin-nav" href="/admin/services">Services</a><a class="admin-nav active" href="/admin/categories">Categories</a><div class="admin-label" style="margin-top:22px">SYSTEM</div><a class="admin-nav" href="/admin/dashboard#settings">Settings</a><div class="admin-sidebar-foot"><a href="/">← Open navigation</a><br><a href="/admin/logout">Sign out</a></div></aside><main class="admin-content"><div class="admin-main"><header class="admin-topbar"><div><h1>Categories</h1><div class="admin-sub">Organize services into groups</div></div><div class="top-actions"><a class="btn" href="/admin/services">Services</a><button class="btn btn-primary" onclick="openModal()">+ Add category</button></div></header><section class="section"><div class="panel" id="list"><div class="empty-state">Loading...</div></div></section></div></main></div>
<html lang="zh-CN"> <div id="modal" class="modal-overlay"><div class="modal-content"><div class="modal-head"><h2 id="modalTitle">Add category</h2><button class="close" onclick="closeModal()">×</button></div><input type="hidden" id="editId"><div class="form-group"><label>Name</label><input id="catName" class="input" autofocus></div><div class="form-group"><label>Sort order</label><input id="catOrder" type="number" class="input" value="0"></div><div class="modal-actions"><button class="btn" onclick="closeModal()">Cancel</button><button class="btn btn-primary" onclick="save()">Save</button></div></div></div>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分类管理 - ToNav</title>
<style>
:root { --main-red: #ff4d4f; --primary: #667eea; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "PingFang SC", -apple-system, sans-serif; background: #f0f2f5; padding: 20px; }
a { text-decoration: none; color: inherit; }
.container { max-width: 900px; margin: 0 auto; }
.header { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 20px 25px; border-radius: 15px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.btn { padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; font-weight: bold; display: inline-block; font-size: 14px; transition: all .2s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--main-red); color: #fff; }
.btn-back { background: #eee; color: #333; }
.header-actions { display: flex; gap: 10px; }
.list-card { background: #fff; border-radius: 15px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.item { padding: 15px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; transition: background .15s; }
.item:hover { background: #fafafa; }
.item:last-child { border-bottom: none; }
.item-info { display: flex; align-items: center; gap: 12px; }
.item-order { background: #f0f0f0; border-radius: 6px; padding: 2px 8px; font-size: 12px; color: #999; }
.item-name { font-weight: 600; font-size: 16px; }
.item-actions { display: flex; gap: 8px; }
.item-actions button { background: none; border: none; cursor: pointer; padding: 5px 10px; border-radius: 6px; font-size: 13px; transition: background .15s; }
.btn-edit { color: var(--primary); }
.btn-edit:hover { background: rgba(102,126,234,0.1); }
.btn-del { color: var(--main-red); }
.btn-del:hover { background: rgba(255,77,79,0.1); }
.empty { text-align: center; padding: 40px; color: #999; }
/* 弹窗 */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; z-index: 100; }
.modal-content { background: #fff; padding: 30px; border-radius: 20px; width: 90%; max-width: 450px; }
.input { width: 100%; padding: 10px 12px; border: 1px solid #d9d9d9; border-radius: 8px; box-sizing: border-box; margin-bottom: 12px; font-size: 14px; }
.input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px rgba(102,126,234,0.2); }
.modal-actions { display: flex; gap: 10px; margin-top: 15px; }
.modal-actions .btn { flex: 1; }
@media (max-width: 640px) {
body { padding: 12px; }
.header { flex-direction: column; gap: 12px; text-align: center; padding: 15px; }
.header h1 { font-size: 20px; }
.header-actions { width: 100%; }
.header-actions .btn { flex: 1; text-align: center; }
.item { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; }
.item-actions { align-self: flex-end; }
.modal-content { padding: 20px; border-radius: 16px; }
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>📂 分类管理</h1>
<div class="header-actions">
<button class="btn btn-primary" onclick="openModal()">+ 新增分类</button>
<a href="/admin/dashboard" class="btn btn-back">返回</a>
</div>
</div>
<div class="list-card" id="list">
<div class="empty">加载中...</div>
</div>
</div>
<!-- 新增/编辑弹窗 -->
<div id="modal" class="modal-overlay">
<div class="modal-content">
<h2 id="modalTitle" style="margin-bottom:20px">新增分类</h2>
<input type="hidden" id="editId">
<label style="font-size:13px; color:#666; margin-bottom:4px; display:block">分类名称</label>
<input type="text" id="catName" class="input" placeholder="如:内网服务" autofocus>
<label style="font-size:13px; color:#666; margin-bottom:4px; display:block">排序(数字越大越靠前)</label>
<input type="number" id="catOrder" class="input" placeholder="0" value="0">
<div class="modal-actions">
<button class="btn" style="background:#eee" onclick="closeModal()">取消</button>
<button class="btn btn-primary" onclick="save()">保存</button>
</div>
</div>
</div>
<script> <script>
async function load() { async function load(){const r=await fetch('/admin/api/categories'),d=await r.json();if(!d.data?.length){list.innerHTML='<div class="empty-state">No categories yet.</div>';return}list.innerHTML=d.data.map(c=>`<div style="display:flex;align-items:center;justify-content:space-between;padding:14px;border-bottom:1px solid var(--line)"><div><strong>${escapeHTML(c.name)}</strong><span class="tag" style="margin-left:9px">order ${c.sort_order}</span></div><div><button class="btn" onclick='edit(${JSON.stringify(c)})'>Edit</button> <button class="btn btn-danger" onclick="del(${c.id},'${escapeHTML(c.name)}')">Delete</button></div></div>`).join('')}
const res = await fetch('/admin/api/categories'); function openModal(id,name,order){editId.value=id||'';catName.value=name||'';catOrder.value=order||0;modalTitle.textContent=id?'Edit category':'Add category';modal.style.display='flex';catName.focus()}
const data = await res.json(); function edit(c){openModal(c.id,c.name,c.sort_order)}function closeModal(){modal.style.display='none'}
const list = document.getElementById('list'); async function save(){const id=editId.value,name=catName.value.trim();if(!name)return alert('Name is required');const body={name,sort_order:+catOrder.value||0};if(id)body.id=+id;const r=await fetch(id?'/admin/api/categories/'+id:'/admin/api/categories',{method:id?'PUT':'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)}),d=await r.json();if(d.success){closeModal();load()}else alert(d.message||'Save failed')}
if (!data.data || data.data.length === 0) { async function del(id,name){if(!confirm('Delete '+name+'?'))return;const r=await fetch('/admin/api/categories/'+id,{method:'DELETE'}),d=await r.json();if(d.success)load();else alert(d.message||'Delete failed')}
list.innerHTML = '<div class="empty">暂无分类,点击上方"+ 新增分类"添加</div>'; function escapeHTML(s){const d=document.createElement('div');d.textContent=s||'';return d.innerHTML}document.addEventListener('keydown',e=>{if(e.key==='Escape')closeModal()});load();
return; </script></body></html>
}
list.innerHTML = data.data.map(c => `
<div class="item">
<div class="item-info">
<span class="item-order">${c.sort_order}</span>
<span class="item-name">${escapeHTML(c.name)}</span>
</div>
<div class="item-actions">
<button class="btn-edit" onclick='edit(${JSON.stringify(c)})'>编辑</button>
<button class="btn-del" onclick="del(${c.id}, '${escapeHTML(c.name)}')">删除</button>
</div>
</div>
`).join('');
}
function openModal(id, name, order) {
document.getElementById('editId').value = id || '';
document.getElementById('catName').value = name || '';
document.getElementById('catOrder').value = order || 0;
document.getElementById('modalTitle').textContent = id ? '编辑分类' : '新增分类';
document.getElementById('modal').style.display = 'flex';
document.getElementById('catName').focus();
}
function closeModal() {
document.getElementById('modal').style.display = 'none';
}
function edit(c) {
openModal(c.id, c.name, c.sort_order);
}
async function save() {
const id = document.getElementById('editId').value;
const name = document.getElementById('catName').value.trim();
const order = parseInt(document.getElementById('catOrder').value) || 0;
if (!name) { alert('分类名称不能为空'); return; }
const body = { name, sort_order: order };
if (id) body.id = parseInt(id);
const url = id ? `/admin/api/categories/${id}` : '/admin/api/categories';
const method = id ? 'PUT' : 'POST';
const resp = await fetch(url, {
method,
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(body)
});
const res = await resp.json();
if (res.success) {
closeModal();
load();
} else {
alert(res.message || '保存失败');
}
}
async function del(id, name) {
if (!confirm(`确定删除分类「${name}」?`)) return;
const resp = await fetch('/admin/api/categories/' + id, { method: 'DELETE' });
const res = await resp.json();
if (res.success) {
load();
} else {
alert(res.message || '删除失败');
}
}
function escapeHTML(str) {
const div = document.createElement('div');
div.textContent = str;
return div.innerHTML;
}
// ESC 关闭弹窗
document.addEventListener('keydown', e => {
if (e.key === 'Escape') closeModal();
});
load();
</script>
</body>
</html>
+1 -45
View File
@@ -1,45 +1 @@
<!DOCTYPE html> <!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Change password - ToNav</title><link rel="stylesheet" href="/static/css/admin.css"><script>document.documentElement.classList.toggle('dark',localStorage.getItem('tonav-theme')==='dark')</script></head><body><div class="login-shell"><div class="login-box"><div class="login-brand">Change password</div><div class="login-sub">Update your administrator credentials</div><div class="alert">For security, the initial password must be changed before continuing.</div>{{ if .error }}<div class="error-box">{{ .error }}</div>{{ end }}<form method="POST"><div class="form-group"><label>Current password</label><input class="input" type="password" name="old_password" required autocomplete="current-password"></div><div class="form-group"><label>New password</label><input class="input" type="password" name="new_password" minlength="6" required autocomplete="new-password"></div><div class="form-group"><label>Confirm new password</label><input class="input" type="password" name="confirm_password" minlength="6" required autocomplete="new-password"></div><button class="btn btn-primary" type="submit">Update password</button></form></div></div></body></html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>修改密码 - ToNav</title>
<style>
:root { --main-red: #ff4d4f; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "PingFang SC", -apple-system, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.card { background: #fff; padding: 40px 30px; border-radius: 20px; width: 100%; max-width: 400px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.card h2 { text-align: center; margin-bottom: 20px; font-size: 22px; }
.input { width: 100%; padding: 12px; margin: 8px 0 16px; border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box; font-size: 15px; -webkit-appearance: none; }
.input:focus { border-color: #667eea; outline: none; box-shadow: 0 0 0 2px rgba(102,126,234,0.2); }
.btn { width: 100%; padding: 13px; background: #ff4d4f; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; margin-top: 10px; font-size: 16px; -webkit-appearance: none; }
.btn:active { transform: scale(0.98); }
.error-box { background: #fff2f0; border: 1px solid #ffccc7; color: #ff4d4f; padding: 10px; border-radius: 8px; margin-bottom: 16px; text-align: center; font-size: 14px; }
.alert { background: #e6f7ff; border: 1px solid #91d5ff; color: #1890ff; padding: 10px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; line-height: 1.5; }
label { font-size: 14px; color: #333; font-weight: 500; }
@media (max-width: 420px) {
.card { padding: 30px 20px; border-radius: 16px; }
}
</style>
</head>
<body>
<div class="card">
<h2>🔐 修改密码</h2>
<div class="alert">⚠️ 首次登录请先修改初始密码以启用管理功能。</div>
{{ if .error }}
<div class="error-box">{{ .error }}</div>
{{ end }}
<form method="POST">
<label>当前密码</label>
<input type="password" name="old_password" placeholder="输入当前密码" class="input" required autocomplete="current-password">
<label>新密码</label>
<input type="password" name="new_password" placeholder="至少6位" class="input" required minlength="6" autocomplete="new-password">
<label>确认新密码</label>
<input type="password" name="confirm_password" placeholder="再次输入新密码" class="input" required autocomplete="new-password">
<button type="submit" class="btn">提交修改</button>
</form>
</div>
</body>
</html>
+52 -347
View File
@@ -1,353 +1,58 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Overview - ToNav</title><link rel="stylesheet" href="/static/css/admin.css">
<title>ToNav 管理后台</title> <script>document.documentElement.classList.toggle('dark',localStorage.getItem('tonav-theme')==='dark');</script>
<style>
:root { --main-red: #ff4d4f; --primary: #667eea; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "PingFang SC", -apple-system, sans-serif; background: #f0f2f5; min-height: 100vh; padding: 20px; }
a { text-decoration: none; color: inherit; }
.container { max-width: 900px; margin: 0 auto; }
.admin-header { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; padding: 25px 30px; border-radius: 20px; margin-bottom: 25px; }
.header-actions { display: flex; gap: 10px; }
.btn { padding: 10px 20px; border-radius: 10px; border: none; cursor: pointer; font-weight: 600; display: inline-block; font-size: 14px; transition: all .2s; }
.btn:hover { transform: translateY(-1px); }
.btn-light { background: rgba(255,255,255,0.2); color: #fff; }
.btn-light:hover { background: rgba(255,255,255,0.3); }
.btn-primary { background: var(--main-red); color: #fff; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-bottom: 25px; }
.stat-card { background: #fff; border-radius: 16px; padding: 25px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: transform .2s; }
.stat-card:hover { transform: translateY(-3px); }
.stat-value { font-size: 36px; font-weight: 700; color: #262626; }
.stat-label { font-size: 14px; color: #8c8c8c; margin-top: 5px; }
.stat-online .stat-value { color: #52c41a; }
.stat-offline .stat-value { color: #ff4d4f; }
.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; }
.action-btn { background: #fff; border-radius: 16px; padding: 30px 20px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.06); cursor: pointer; transition: all .2s; font-size: 15px; font-weight: 500; border: none; }
.action-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
.input { width: 100%; padding: 10px 12px; border: 1px solid #d9d9d9; border-radius: 8px; box-sizing: border-box; margin-bottom: 12px; font-size: 14px; }
.input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px rgba(102,126,234,0.2); }
/* 弹窗 */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; z-index: 100; }
.modal-content { background: #fff; padding: 30px; border-radius: 20px; width: 90%; max-width: 600px; max-height: 80vh; overflow-y: auto; }
@media (max-width: 640px) {
body { padding: 12px; }
.admin-header { flex-direction: column; gap: 15px; text-align: center; padding: 20px; }
.admin-header h1 { font-size: 20px; }
.header-actions { flex-wrap: wrap; justify-content: center; }
.header-actions .btn { padding: 8px 14px; font-size: 13px; }
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stat-card { padding: 18px 10px; }
.stat-value { font-size: 28px; }
.stat-label { font-size: 12px; }
.quick-actions { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.action-btn { padding: 20px 10px; font-size: 14px; }
.modal-content { padding: 20px; border-radius: 16px; }
}
</style>
</head> </head>
<body> <body>
<div class="container"> <div class="admin-shell">
<div class="admin-header"> <aside class="admin-sidebar">
<h1>🧭 ToNav 管理后台</h1> <div class="admin-brand">ToNav</div>
<div class="header-actions"> <div class="admin-label">OVERVIEW</div>
<a href="/" class="btn btn-light">查看前台</a> <a class="admin-nav active" href="/admin/dashboard">Overview</a>
<a href="/admin/change-password" class="btn btn-light">修改密码</a> <div class="admin-label" style="margin-top:22px">SERVICES</div>
<a href="/admin/logout" class="btn btn-primary">退出登录</a> <a class="admin-nav" href="/admin/services">Services</a>
</div> <a class="admin-nav" href="/admin/categories">Categories</a>
</div> <div class="admin-label" style="margin-top:22px">SYSTEM</div>
<a class="admin-nav" href="#settings" onclick="showSettings();return false">Settings</a>
<div class="stats-grid"> <div class="admin-sidebar-foot"><a href="/">← Open navigation</a><br><a href="/admin/logout">Sign out</a></div>
<div class="stat-card"> </aside>
<div class="stat-value">{{ .service_count }}</div> <main class="admin-content"><div class="admin-main">
<div class="stat-label">总服务数</div> <header class="admin-topbar"><div><h1>Overview</h1><div class="admin-sub">Service directory and system status</div></div><div class="top-actions"><button class="btn" onclick="toggleTheme()">Theme</button><a class="btn" href="/">Open site</a></div></header>
</div> <section class="section"><div class="section-title">System status</div>
<div class="stat-card"> <div class="metric-strip"><div class="metric"><div class="metric-value">{{ .service_count }}</div><div class="metric-label">Services</div></div><div class="metric"><div class="metric-value">{{ .category_count }}</div><div class="metric-label">Categories</div></div><div class="metric"><div class="metric-value green">{{ .online_count }}</div><div class="metric-label">Online</div></div><div class="metric"><div class="metric-value red">{{ .offline_count }}</div><div class="metric-label">Offline</div></div></div></section>
<div class="stat-value">{{ .category_count }}</div> <section class="section"><div class="section-title">Quick actions</div><div class="panel action-list">
<div class="stat-label">分类数</div> <a class="action" href="/admin/services"><strong>Services</strong><span>Manage service entries</span></a>
</div> <a class="action" href="/admin/categories"><strong>Categories</strong><span>Organize your directory</span></a>
<div class="stat-card stat-online"> <a class="action" href="#settings" onclick="showSettings();return false"><strong>Settings</strong><span>Site, backup and MCP</span></a>
<div class="stat-value">{{ .online_count }}</div> <div class="action" onclick="runBackup()"><strong>Backup</strong><span>Run cloud backup now</span></div>
<div class="stat-label">在线服务</div> </div></section>
</div> </div></main></div>
<div class="stat-card stat-offline"> <div id="settingsModal" class="modal-overlay"><div class="modal-content">
<div class="stat-value">{{ .offline_count }}</div> <div class="modal-head"><h2>System settings</h2><button class="close" onclick="closeSettings()">×</button></div>
<div class="stat-label">离线服务</div> <div class="form-group"><label>Site title</label><input id="cfg_site_title" class="input"></div>
</div> <div class="form-group"><label>WebDAV URL</label><input id="cfg_url" class="input"></div>
</div> <div class="form-row"><div class="form-group"><label>Username</label><input id="cfg_user" class="input"></div><div class="form-group"><label>Password</label><input id="cfg_pass" type="password" class="input"></div></div>
<div class="form-group"><label><input type="checkbox" id="cfg_auto_backup"> Daily backup at 03:00</label></div>
<div class="quick-actions"> <div class="section-title">MCP Server</div><div class="notice"><label><input type="checkbox" id="cfg_mcp_enabled" onchange="toggleMCP()"> Enable MCP endpoint</label><div id="mcpTokenRow" style="display:none;margin-top:12px"><label>Token</label><div class="form-row"><input id="cfg_mcp_token" class="input" readonly><button class="btn" onclick="copyMCPToken(this)">Copy</button><button class="btn" onclick="regenMCPToken()">Regenerate</button></div><div style="margin-top:6px">POST/GET /mcp · changes apply immediately</div></div></div>
<a href="/admin/services" class="action-btn"> <div class="section-title" style="margin-top:20px">Cloud backups</div><div class="panel" style="padding:12px"><div id="backupList" class="admin-sub">Loading...</div></div>
<div style="font-size:32px; margin-bottom:10px">📡</div> <div class="modal-actions"><button class="btn" onclick="closeSettings()">Close</button><button class="btn btn-primary" onclick="saveSettings()">Save changes</button></div>
<div>服务管理</div> </div></div>
</a>
<a href="/admin/categories" class="action-btn">
<div style="font-size:32px; margin-bottom:10px">📂</div>
<div>分类管理</div>
</a>
<div class="action-btn" onclick="runBackup()">
<div style="font-size:32px; margin-bottom:10px">☁️</div>
<div>立即云备份</div>
</div>
<div class="action-btn" onclick="showSettings()">
<div style="font-size:32px; margin-bottom:10px">⚙️</div>
<div>系统设置</div>
</div>
</div>
</div>
<!-- 系统设置弹窗 -->
<div id="settingsModal" class="modal-overlay">
<div class="modal-content">
<h2 style="margin-bottom:20px">⚙️ 系统设置 & 云端备份</h2>
<div style="margin-bottom:20px; padding:15px; background:#f9f9f9; border-radius:10px">
<h3 style="font-size:14px; margin-bottom:10px">站点配置</h3>
<label style="font-size:12px; color:#666">站点标题</label>
<input type="text" id="cfg_site_title" class="input" placeholder="ToNav">
</div>
<div style="margin-bottom:20px; padding:15px; background:#f9f9f9; border-radius:10px">
<h3 style="font-size:14px; margin-bottom:10px">WebDAV 配置</h3>
<label style="font-size:12px; color:#666">WebDAV URL</label>
<input type="text" id="cfg_url" class="input">
<label style="font-size:12px; color:#666">用户名</label>
<input type="text" id="cfg_user" class="input">
<label style="font-size:12px; color:#666">密码</label>
<input type="password" id="cfg_pass" class="input">
</div>
<div style="margin-bottom:20px; padding:15px; background:#f9f9f9; border-radius:10px">
<h3 style="font-size:14px; margin-bottom:10px">自动备份</h3>
<div style="display:flex; align-items:center; gap:8px">
<input type="checkbox" id="cfg_auto_backup" style="width:16px; height:16px">
<label for="cfg_auto_backup" style="margin:0; font-size:13px">每天凌晨 3:00 自动备份到云端</label>
</div>
</div>
<div style="margin-bottom:20px; padding:15px; background:#f9f9f9; border-radius:10px">
<h3 style="font-size:14px; margin-bottom:10px">🤖 MCP Server</h3>
<div style="display:flex; align-items:center; gap:8px; margin-bottom:10px">
<input type="checkbox" id="cfg_mcp_enabled" style="width:16px; height:16px" onchange="toggleMCP()">
<label for="cfg_mcp_enabled" style="margin:0; font-size:13px">启用 MCP 接口(AI 可通过它管理导航页)</label>
</div>
<div id="mcpTokenRow" style="display:none">
<label style="font-size:12px; color:#666">Token</label>
<div style="display:flex; gap:8px; align-items:center">
<input type="text" id="cfg_mcp_token" class="input" readonly style="flex:1; background:#fff; color:#555">
<button class="btn btn-primary" onclick="copyMCPToken(this)" style="padding:8px 14px; white-space:nowrap">📋 复制</button>
<button class="btn btn-primary" onclick="regenMCPToken()" style="padding:8px 14px; white-space:nowrap">🔄 重新生成</button>
</div>
<div style="font-size:11px; color:#999; margin-top:6px">
端点: <code>POST/GET /mcp</code>(Streamable HTTP + SSE)· 改动即时生效,无需重启
</div>
</div>
</div>
<button class="btn btn-primary" onclick="saveSettings()" style="width:100%; margin-bottom:15px">保存设置</button>
<div style="padding:15px; border:1px solid #eee; border-radius:10px">
<h3 style="font-size:14px; margin-bottom:10px">📜 云端备份历史</h3>
<div id="backupList" style="font-size:13px; color:#666">正在获取列表...</div>
</div>
<button class="btn" onclick="document.getElementById('settingsModal').style.display='none'" style="background:#eee; width:100%; margin-top:15px">关闭</button>
</div>
</div>
<script> <script>
async function showSettings() { function toggleTheme(){const dark=!document.documentElement.classList.contains('dark');document.documentElement.classList.toggle('dark',dark);localStorage.setItem('tonav-theme',dark?'dark':'light')}
const resp = await fetch('/admin/api/settings'); function closeSettings(){document.getElementById('settingsModal').style.display='none'}
const data = await resp.json(); async function showSettings(){const r=await fetch('/admin/api/settings'),d=await r.json();cfg_site_title.value=d.site_title||'';cfg_url.value=d.webdav_url||'';cfg_user.value=d.webdav_user||'';cfg_pass.value=d.webdav_password||'';cfg_auto_backup.checked=d.auto_backup==='true';document.getElementById('settingsModal').style.display='flex';loadMCPStatus();loadCloudBackups()}
document.getElementById('cfg_site_title').value = data.site_title || ''; async function loadMCPStatus(){try{const r=await fetch('/admin/api/mcp/status'),d=await r.json();cfg_mcp_enabled.checked=d.enabled;mcpTokenRow.style.display=d.enabled?'block':'none';cfg_mcp_token.value=d.token_masked||'Not generated'}catch(e){}}
document.getElementById('cfg_url').value = data.webdav_url || ''; async function toggleMCP(){const enabled=cfg_mcp_enabled.checked;try{const r=await fetch('/admin/api/mcp/enabled',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({enabled})}),d=await r.json();if(!d.success)throw Error(d.message)}catch(e){alert(e.message||'Failed');cfg_mcp_enabled.checked=!enabled;mcpTokenRow.style.display=enabled?'none':'block'}}
document.getElementById('cfg_user').value = data.webdav_user || ''; async function copyMCPToken(btn){try{const r=await fetch('/admin/api/mcp/token'),d=await r.json();if(!d.success)throw Error(d.message);await navigator.clipboard.writeText(d.token);const old=btn.textContent;btn.textContent='Copied';setTimeout(()=>btn.textContent=old,1200)}catch(e){alert('Copy failed: '+e.message)}}
document.getElementById('cfg_pass').value = data.webdav_password || ''; async function regenMCPToken(){if(!confirm('Regenerate token? The old token will stop working.'))return;const r=await fetch('/admin/api/mcp/token',{method:'POST'}),d=await r.json();if(d.success){alert('New token:\n\n'+d.token);loadMCPStatus()}else alert(d.message)}
document.getElementById('cfg_auto_backup').checked = data.auto_backup === 'true'; async function loadCloudBackups(){const el=backupList;try{const r=await fetch('/admin/api/backup/list'),d=await r.json();if(!d.files?.length){el.textContent='No cloud backups';return}el.innerHTML=d.files.map(f=>`<div style="padding:8px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:10px"><span>${f.name}<small style="display:block;color:var(--faint)">${formatTime(f.mod_time)} · ${formatSize(f.size)}</small></span><span><button class="btn" onclick="restoreBackup('${encodeURIComponent(f.name)}')">Restore</button> <button class="btn btn-danger" onclick="deleteBackup('${encodeURIComponent(f.name)}')">Delete</button></span></div>`).join('')}catch(e){el.textContent='Unable to load backups'}}
document.getElementById('settingsModal').style.display = 'flex'; function formatSize(b){if(!b)return'';if(b<1024)return b+' B';if(b<1048576)return(b/1024).toFixed(1)+' KB';return(b/1048576).toFixed(1)+' MB'}
loadMCPStatus(); function formatTime(s){if(!s)return'';const d=new Date(s);return isNaN(d)?s:d.toLocaleString('zh-CN')}
loadCloudBackups(); async function saveSettings(){const data={site_title:cfg_site_title.value,webdav_url:cfg_url.value,webdav_user:cfg_user.value,webdav_password:cfg_pass.value,auto_backup:cfg_auto_backup.checked?'true':'false'};const r=await fetch('/admin/api/settings',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)}),d=await r.json();alert(d.message||'Saved')}
} async function runBackup(){if(!confirm('Run cloud backup now?'))return;const r=await fetch('/admin/api/backup/webdav',{method:'POST'}),d=await r.json();alert(d.message||'Backup complete')}
async function restoreBackup(name){name=decodeURIComponent(name);if(!confirm('Restore '+name+'? Current database will be backed up first.'))return;const r=await fetch('/admin/api/backup/restore?name='+encodeURIComponent(name),{method:'POST'}),d=await r.json();alert(d.message||'Done');if(d.success)location.reload()}
async function loadMCPStatus() { async function deleteBackup(name){name=decodeURIComponent(name);if(!confirm('Delete '+name+'?'))return;const r=await fetch('/admin/api/backup/delete?name='+encodeURIComponent(name),{method:'DELETE'}),d=await r.json();if(d.success)loadCloudBackups();else alert(d.message)}
try { document.addEventListener('keydown',e=>{if(e.key==='Escape')closeSettings()});
const resp = await fetch('/admin/api/mcp/status'); </script></body></html>
const d = await resp.json();
const cb = document.getElementById('cfg_mcp_enabled');
const row = document.getElementById('mcpTokenRow');
cb.checked = d.enabled;
row.style.display = d.enabled ? 'block' : 'none';
document.getElementById('cfg_mcp_token').value = d.token_masked || '(未生成,点重新生成创建)';
} catch(e) {}
}
function toggleMCP() {
const enabled = document.getElementById('cfg_mcp_enabled').checked;
document.getElementById('mcpTokenRow').style.display = enabled ? 'block' : 'none';
fetch('/admin/api/mcp/enabled', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({enabled: enabled})
}).then(r => r.json()).then(res => {
if (!res.success) {
alert(res.message);
document.getElementById('cfg_mcp_enabled').checked = !enabled;
document.getElementById('mcpTokenRow').style.display = enabled ? 'none' : 'block';
}
});
}
async function copyMCPToken(btn) {
try {
const resp = await fetch('/admin/api/mcp/token');
const res = await resp.json();
if (!res.success) { alert('❌ ' + (res.message || 'Token 未生成')); return; }
const token = res.token;
let copied = false;
try {
await navigator.clipboard.writeText(token);
copied = true;
} catch (e) {
// 非 HTTPS/localhost 环境降级方案
const ta = document.createElement('textarea');
ta.value = token;
ta.style.position = 'fixed';
ta.style.opacity = '0';
document.body.appendChild(ta);
ta.focus(); ta.select();
try { copied = document.execCommand('copy'); } catch (e2) {}
document.body.removeChild(ta);
}
if (copied) {
const old = btn.textContent;
btn.textContent = '✅ 已复制';
setTimeout(() => { btn.textContent = old; }, 1500);
} else {
prompt('自动复制不可用,请手动复制 Token:', token);
}
} catch(e) { alert('获取 Token 失败'); }
}
async function regenMCPToken() {
if (!confirm('确定重新生成 Token?\n\n旧 Token 将立即失效,已接入的 AI 客户端需要更新为新 Token。')) return;
try {
const resp = await fetch('/admin/api/mcp/token', {method: 'POST'});
const res = await resp.json();
if (res.success) {
alert('✅ 新 Token 已生成(仅此一次明文展示,请立即复制):\n\n' + res.token);
loadMCPStatus();
} else {
alert('❌ ' + res.message);
}
} catch(e) { alert('生成失败'); }
}
async function loadCloudBackups() {
const listDiv = document.getElementById('backupList');
try {
const resp = await fetch('/admin/api/backup/list');
const data = await resp.json();
if (data.files && data.files.length > 0) {
listDiv.innerHTML = data.files.map(f => `
<div style="padding:10px 0; border-bottom:1px solid #f0f0f0">
<div style="display:flex; justify-content:space-between; align-items:center">
<div>
<div style="font-weight:500; color:#333">${f.name}</div>
<div style="font-size:11px; color:#999; margin-top:2px">
${formatTime(f.mod_time)}${f.size ? ' · ' + formatSize(f.size) : ''}
</div>
</div>
<div style="display:flex; gap:6px">
<button onclick="restoreBackup('${f.name}')" style="background:none; border:1px solid #1890ff; color:#1890ff; padding:4px 10px; border-radius:6px; cursor:pointer; font-size:12px">恢复</button>
<button onclick="deleteBackup('${f.name}')" style="background:none; border:1px solid #ff4d4f; color:#ff4d4f; padding:4px 10px; border-radius:6px; cursor:pointer; font-size:12px">删除</button>
</div>
</div>
</div>
`).join('');
} else {
listDiv.innerHTML = '暂无云端备份';
}
} catch(e) { listDiv.innerHTML = '获取失败'; }
}
function formatSize(bytes) {
if (!bytes || bytes === 0) return '';
if (bytes < 1024) return bytes + ' B';
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
return (bytes / 1024 / 1024).toFixed(1) + ' MB';
}
function formatTime(str) {
if (!str) return '';
try {
const d = new Date(str);
if (isNaN(d.getTime())) return str;
return d.toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai', year:'numeric', month:'2-digit', day:'2-digit', hour:'2-digit', minute:'2-digit', second:'2-digit' });
} catch(e) { return str; }
}
async function saveSettings() {
const data = {
site_title: document.getElementById('cfg_site_title').value,
webdav_url: document.getElementById('cfg_url').value,
webdav_user: document.getElementById('cfg_user').value,
webdav_password: document.getElementById('cfg_pass').value,
auto_backup: document.getElementById('cfg_auto_backup').checked ? 'true' : 'false'
};
const resp = await fetch('/admin/api/settings', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(data)
});
const res = await resp.json();
alert(res.message || '保存成功');
}
async function runBackup() {
if (!confirm('确定执行云端备份?')) return;
const btn = event.currentTarget;
const oldContent = btn.innerHTML;
btn.innerHTML = '<div style="font-size:32px; margin-bottom:10px">⌛</div><div>正在备份...</div>';
btn.style.pointerEvents = 'none';
try {
const resp = await fetch('/admin/api/backup/webdav', {method: 'POST'});
const res = await resp.json();
alert(res.message);
} catch(e) { alert('备份失败'); }
btn.innerHTML = oldContent;
btn.style.pointerEvents = '';
}
async function restoreBackup(name) {
if (!confirm(`⚠️ 确定从「${name}」恢复?\n\n当前数据库会先自动备份,然后被覆盖为所选版本。`)) return;
try {
const resp = await fetch(`/admin/api/backup/restore?name=${encodeURIComponent(name)}`, {method: 'POST'});
const res = await resp.json();
if (res.success) {
alert('✅ ' + res.message + '\n\n页面将刷新...');
location.reload();
} else {
alert('❌ ' + res.message);
}
} catch(e) { alert('恢复失败'); }
}
async function deleteBackup(name) {
if (!confirm(`确定删除云端备份「${name}」?此操作不可撤销。`)) return;
try {
const resp = await fetch(`/admin/api/backup/delete?name=${encodeURIComponent(name)}`, {method: 'DELETE'});
const res = await resp.json();
if (res.success) {
loadCloudBackups();
} else {
alert(res.message);
}
} catch(e) { alert('删除失败'); }
}
</script>
</body>
</html>
+1 -40
View File
@@ -1,40 +1 @@
<!DOCTYPE html> <!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Sign in - ToNav</title><link rel="stylesheet" href="/static/css/admin.css"><script>document.documentElement.classList.toggle('dark',localStorage.getItem('tonav-theme')==='dark')</script></head><body><div class="login-shell"><div class="login-box"><div class="login-brand">ToNav</div><div class="login-sub">Administration</div>{{ if .error }}<div class="error-box">{{ .error }}</div>{{ end }}<form method="POST"><div class="form-group"><label>Username</label><input class="input" type="text" name="username" required autofocus autocomplete="username"></div><div class="form-group"><label>Password</label><input class="input" type="password" name="password" required autocomplete="current-password"></div><button class="btn btn-primary" type="submit">Sign in</button></form></div></div></body></html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToNav 管理登录</title>
<style>
:root { --main-red: #ff4d4f; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "PingFang SC", -apple-system, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { background: #fff; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); max-width: 400px; width: 100%; padding: 40px 30px; }
.login-card h1 { text-align: center; margin-bottom: 30px; font-size: 28px; }
label { display: block; margin-bottom: 6px; font-size: 14px; color: #333; font-weight: 500; }
.input { width: 100%; padding: 12px; border: 1px solid #d9d9d9; border-radius: 10px; box-sizing: border-box; margin-bottom: 18px; font-size: 15px; -webkit-appearance: none; }
.input:focus { border-color: #667eea; outline: none; box-shadow: 0 0 0 2px rgba(102,126,234,0.2); }
.btn { width: 100%; padding: 13px; border: none; border-radius: 10px; cursor: pointer; font-weight: 600; background: var(--main-red); color: #fff; font-size: 16px; -webkit-appearance: none; }
.btn:active { transform: scale(0.98); }
.error-box { background: #fff2f0; border: 1px solid #ffccc7; color: #ff4d4f; padding: 10px; border-radius: 8px; margin-bottom: 20px; text-align: center; font-size: 14px; }
@media (max-width: 420px) {
.login-card { padding: 30px 20px; border-radius: 16px; }
.login-card h1 { font-size: 24px; }
}
</style>
</head>
<body>
<div class="login-card">
<h1>🧭 ToNav</h1>
{{ if .error }}
<div class="error-box">{{ .error }}</div>
{{ end }}
<form method="POST">
<label>用户名</label>
<input type="text" name="username" class="input" required autofocus autocomplete="username">
<label>密码</label>
<input type="password" name="password" class="input" required autocomplete="current-password">
<button type="submit" class="btn">登 录</button>
</form>
</div>
</body>
</html>
+9 -289
View File
@@ -1,289 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Services - ToNav</title><link rel="stylesheet" href="/static/css/admin.css"><script>document.documentElement.classList.toggle('dark',localStorage.getItem('tonav-theme')==='dark')</script></head><body><div class="admin-shell"><aside class="admin-sidebar"><div class="admin-brand">ToNav</div><div class="admin-label">OVERVIEW</div><a class="admin-nav" href="/admin/dashboard">Overview</a><div class="admin-label" style="margin-top:22px">SERVICES</div><a class="admin-nav active" href="/admin/services">Services</a><a class="admin-nav" href="/admin/categories">Categories</a><div class="admin-label" style="margin-top:22px">SYSTEM</div><a class="admin-nav" href="/admin/dashboard#settings">Settings</a><div class="admin-sidebar-foot"><a href="/">← Open navigation</a><br><a href="/admin/logout">Sign out</a></div></aside><main class="admin-content"><div class="admin-main"><header class="admin-topbar"><div><h1>Services</h1><div class="admin-sub">Manage entries in your service directory</div></div><div class="top-actions"><a class="btn" href="/">Open site</a><button class="btn btn-primary" onclick="openModal()">+ Add service</button></div></header><section class="section"><div class="table-toolbar"><input id="filter" class="search-input" placeholder="Search services..." oninput="load()"></div><div class="panel table-wrap"><table class="data-table"><thead><tr><th>Service</th><th>Category</th><th>Status</th><th>Order</th><th>Actions</th></tr></thead><tbody id="list"></tbody></table><div id="emptyMsg" class="empty-state" style="display:none">No services found.</div></div></section></div></main></div>
<html lang="zh-CN"> <div id="modal" class="modal-overlay"><div class="modal-content"><div class="modal-head"><h2 id="modalTitle">Add service</h2><button class="close" onclick="closeModal()">×</button></div><input type="hidden" id="editId"><div class="form-group"><label>Name *</label><input id="svcName" class="input"></div><div class="form-group"><label>URL *</label><input id="svcUrl" type="url" class="input" placeholder="https://example.com"></div><div class="form-row"><div class="form-group"><label>Icon</label><input id="svcIcon" class="input" maxlength="8" placeholder="◎"></div><div class="form-group"><label>Category</label><select id="svcCategory" class="input"><option value="0">No category</option>{{ range .categories }}<option value="{{ .ID }}">{{ .Name }}</option>{{ end }}</select></div></div><div class="form-group"><label>Description</label><input id="svcDesc" class="input"></div><div class="form-group"><label>Tags (comma separated)</label><input id="svcTags" class="input"></div><div class="form-row"><div class="form-group"><label>Sort order</label><input id="svcOrder" type="number" class="input" value="0"></div><div class="form-group"><label>Health check URL</label><input id="svcHealthUrl" type="url" class="input"></div></div><div class="form-group"><label><input type="checkbox" id="svcEnabled" checked> Enabled</label></div><div class="form-group"><label><input type="checkbox" id="svcHealthEnabled"> Health check enabled</label></div><div class="modal-actions"><button class="btn" onclick="closeModal()">Cancel</button><button class="btn btn-primary" onclick="save()">Save</button></div></div></div>
<head> <script>const categoryMap={};{{ range .categories }}categoryMap[{{ .ID }}]={{ printf "%q" .Name }};{{ end }}
<meta charset="UTF-8"> async function load(){const r=await fetch('/admin/api/services'),d=await r.json(),q=filter.value.toLowerCase();const rows=(d.data||[]).filter(s=>!q||[s.name,s.description,s.tags,s.url].some(x=>(x||'').toLowerCase().includes(q)));emptyMsg.style.display=rows.length?'none':'block';list.innerHTML=rows.map(s=>`<tr><td><div style="display:flex;align-items:center;gap:10px"><span class="service-icon">${escapeHTML(s.icon||'◎')}</span><span><strong>${escapeHTML(s.name)}</strong><small style="display:block;color:var(--muted)">${escapeHTML(s.url)}</small></span></div></td><td>${escapeHTML(categoryMap[s.category_id]||'—')}</td><td><span class="status-inline"><i class="dot ${s.status}"></i>${s.status==='online'?'Online':s.status==='offline'?'Offline':'Unknown'}</span></td><td>${s.sort_order}</td><td><button class="btn" onclick='editSvc(${JSON.stringify(s)})'>Edit</button> <button class="btn btn-danger" onclick="del(${s.id},'${escapeHTML(s.name)}')">Delete</button></td></tr>`).join('')}
<meta name="viewport" content="width=device-width, initial-scale=1.0"> function openModal(){editId.value='';svcName.value='';svcUrl.value='';svcIcon.value='';svcCategory.value='0';svcDesc.value='';svcTags.value='';svcOrder.value='0';svcHealthUrl.value='';svcEnabled.checked=true;svcHealthEnabled.checked=false;modalTitle.textContent='Add service';modal.style.display='flex';svcName.focus()}
<title>服务管理 - ToNav</title> function editSvc(s){editId.value=s.id;svcName.value=s.name;svcUrl.value=s.url;svcIcon.value=s.icon||'';svcCategory.value=s.category_id||'0';svcDesc.value=s.description||'';svcTags.value=s.tags||'';svcOrder.value=s.sort_order||0;svcHealthUrl.value=s.health_check_url||'';svcEnabled.checked=s.is_enabled;svcHealthEnabled.checked=s.health_check_enabled;modalTitle.textContent='Edit service';modal.style.display='flex'}function closeModal(){modal.style.display='none'}
<style> async function save(){const id=editId.value,name=svcName.value.trim(),url=svcUrl.value.trim();if(!name||!url)return alert('Name and URL are required');const body={name,url,icon:svcIcon.value.trim(),category_id:+svcCategory.value||0,description:svcDesc.value.trim(),tags:svcTags.value.trim(),sort_order:+svcOrder.value||0,health_check_url:svcHealthUrl.value.trim(),is_enabled:svcEnabled.checked,health_check_enabled:svcHealthEnabled.checked};if(id)body.id=+id;const r=await fetch(id?'/admin/api/services/'+id:'/admin/api/services',{method:id?'PUT':'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)}),d=await r.json();if(d.success){closeModal();load()}else alert(d.message||'Save failed')}
:root { --main-red: #ff4d4f; --primary: #667eea; } async function del(id,name){if(!confirm('Delete '+name+'?'))return;const r=await fetch('/admin/api/services/'+id,{method:'DELETE'}),d=await r.json();if(d.success)load();else alert(d.message||'Delete failed')}
* { margin: 0; padding: 0; box-sizing: border-box; } function escapeHTML(s){const d=document.createElement('div');d.textContent=s||'';return d.innerHTML}function toggleTheme(){const dark=!document.documentElement.classList.contains('dark');document.documentElement.classList.toggle('dark',dark);localStorage.setItem('tonav-theme',dark?'dark':'light')}document.addEventListener('keydown',e=>{if(e.key==='Escape')closeModal()});load();</script></body></html>
body { font-family: "PingFang SC", -apple-system, sans-serif; background: #f0f2f5; padding: 20px; }
a { text-decoration: none; color: inherit; }
.container { max-width: 1000px; margin: 0 auto; }
.header { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 20px 25px; border-radius: 15px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.btn { padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; font-weight: bold; display: inline-block; font-size: 14px; transition: all .2s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--main-red); color: #fff; }
.btn-back { background: #eee; color: #333; }
.header-actions { display: flex; gap: 10px; }
.table-card { background: #fff; border-radius: 15px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
table { width: 100%; border-collapse: collapse; }
th { background: #fafafa; font-size: 13px; color: #999; text-align: left; padding: 12px 15px; font-weight: 500; }
td { padding: 12px 15px; border-bottom: 1px solid #f5f5f5; font-size: 14px; }
tr:hover td { background: #fafafa; }
.status-badge { padding: 3px 10px; border-radius: 10px; font-size: 12px; font-weight: 500; }
.status-online { background: #f6ffed; color: #52c41a; }
.status-offline { background: #fff2f0; color: #ff4d4f; }
.btn-edit { color: var(--primary); background: none; border: none; cursor: pointer; padding: 4px 8px; border-radius: 4px; }
.btn-edit:hover { background: rgba(102,126,234,0.1); }
.btn-del { color: var(--main-red); background: none; border: none; cursor: pointer; padding: 4px 8px; border-radius: 4px; }
.btn-del:hover { background: rgba(255,77,79,0.1); }
.empty { text-align: center; padding: 40px; color: #999; }
.icon-cell { font-size: 24px; }
/* 弹窗 */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; z-index: 100; }
.modal-content { background: #fff; padding: 30px; border-radius: 20px; width: 90%; max-width: 550px; max-height: 85vh; overflow-y: auto; }
.input { width: 100%; padding: 10px 12px; border: 1px solid #d9d9d9; border-radius: 8px; box-sizing: border-box; margin-bottom: 12px; font-size: 14px; }
.input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px rgba(102,126,234,0.2); }
select.input { appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 12px center/12px; }
.form-row { display: flex; gap: 12px; }
.form-row > div { flex: 1; }
label { font-size: 13px; color: #666; margin-bottom: 4px; display: block; }
.checkbox-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.checkbox-row input[type="checkbox"] { width: 16px; height: 16px; }
.modal-actions { display: flex; gap: 10px; margin-top: 15px; }
.modal-actions .btn { flex: 1; }
@media (max-width: 640px) {
body { padding: 12px; }
.header { flex-direction: column; gap: 12px; text-align: center; padding: 15px; }
.header h1 { font-size: 20px; }
.header-actions { width: 100%; }
.header-actions .btn { flex: 1; text-align: center; }
.form-row { flex-direction: column; gap: 0; }
/* 手机端隐藏状态和排序列 */
th:nth-child(3), td:nth-child(3),
th:nth-child(4), td:nth-child(4),
th:nth-child(5), td:nth-child(5) { display: none; }
th, td { padding: 10px 8px; font-size: 13px; }
.icon-cell { font-size: 20px; }
.modal-content { padding: 20px; border-radius: 16px; }
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>📡 服务管理</h1>
<div class="header-actions">
<button class="btn btn-primary" onclick="openModal()">+ 新增服务</button>
<a href="/admin/dashboard" class="btn btn-back">返回</a>
</div>
</div>
<div class="table-card">
<table>
<thead>
<tr>
<th>图标</th>
<th>名称</th>
<th>分类</th>
<th>状态</th>
<th>排序</th>
<th>操作</th>
</tr>
</thead>
<tbody id="list"></tbody>
</table>
<div id="emptyMsg" class="empty" style="display:none">暂无服务,点击上方"+ 新增服务"添加</div>
</div>
</div>
<!-- 新增/编辑弹窗 -->
<div id="modal" class="modal-overlay">
<div class="modal-content">
<h2 id="modalTitle" style="margin-bottom:20px">新增服务</h2>
<input type="hidden" id="editId">
<label>服务名称 *</label>
<input type="text" id="svcName" class="input" placeholder="如:Gitea" required>
<label>服务地址 *</label>
<input type="url" id="svcUrl" class="input" placeholder="https://example.com">
<div class="form-row">
<div>
<label>图标(emoji)</label>
<input type="text" id="svcIcon" class="input" placeholder="🔧" maxlength="4">
</div>
<div>
<label>所属分类</label>
<select id="svcCategory" class="input">
<option value="0">-- 无分类 --</option>
{{ range .categories }}
<option value="{{ .ID }}">{{ .Name }}</option>
{{ end }}
</select>
</div>
</div>
<label>描述</label>
<input type="text" id="svcDesc" class="input" placeholder="简短描述">
<label>标签(逗号分隔)</label>
<input type="text" id="svcTags" class="input" placeholder="开发,工具">
<div class="form-row">
<div>
<label>排序</label>
<input type="number" id="svcOrder" class="input" value="0">
</div>
<div>
<label>健康检查 URL</label>
<input type="url" id="svcHealthUrl" class="input" placeholder="可选">
</div>
</div>
<div class="checkbox-row">
<input type="checkbox" id="svcEnabled" checked>
<label for="svcEnabled" style="margin:0">启用</label>
</div>
<div class="checkbox-row">
<input type="checkbox" id="svcHealthEnabled">
<label for="svcHealthEnabled" style="margin:0">启用健康检查</label>
</div>
<div class="modal-actions">
<button class="btn" style="background:#eee" onclick="closeModal()">取消</button>
<button class="btn btn-primary" onclick="save()">保存</button>
</div>
</div>
</div>
<script>
// 分类映射
const categoryMap = {};
{{ range .categories }}
categoryMap[{{ .ID }}] = "{{ .Name }}";
{{ end }}
async function load() {
const res = await fetch('/admin/api/services');
const data = await res.json();
const list = document.getElementById('list');
const emptyMsg = document.getElementById('emptyMsg');
if (!data.data || data.data.length === 0) {
list.innerHTML = '';
emptyMsg.style.display = 'block';
return;
}
emptyMsg.style.display = 'none';
list.innerHTML = data.data.map(s => `
<tr>
<td class="icon-cell">${s.icon || '🔗'}</td>
<td><strong>${escapeHTML(s.name)}</strong></td>
<td>${categoryMap[s.category_id] || '-'}</td>
<td><span class="status-badge status-${s.status}">${s.status === 'online' ? '在线' : '离线'}</span></td>
<td>${s.sort_order}</td>
<td>
<button class="btn-edit" onclick='editSvc(${JSON.stringify(s)})'>编辑</button>
<button class="btn-del" onclick="del(${s.id}, '${escapeHTML(s.name)}')">删除</button>
</td>
</tr>
`).join('');
}
function openModal() {
document.getElementById('editId').value = '';
document.getElementById('svcName').value = '';
document.getElementById('svcUrl').value = '';
document.getElementById('svcIcon').value = '';
document.getElementById('svcCategory').value = '0';
document.getElementById('svcDesc').value = '';
document.getElementById('svcTags').value = '';
document.getElementById('svcOrder').value = '0';
document.getElementById('svcHealthUrl').value = '';
document.getElementById('svcEnabled').checked = true;
document.getElementById('svcHealthEnabled').checked = false;
document.getElementById('modalTitle').textContent = '新增服务';
document.getElementById('modal').style.display = 'flex';
document.getElementById('svcName').focus();
}
function editSvc(s) {
document.getElementById('editId').value = s.id;
document.getElementById('svcName').value = s.name;
document.getElementById('svcUrl').value = s.url;
document.getElementById('svcIcon').value = s.icon || '';
document.getElementById('svcCategory').value = s.category_id || '0';
document.getElementById('svcDesc').value = s.description || '';
document.getElementById('svcTags').value = s.tags || '';
document.getElementById('svcOrder').value = s.sort_order || 0;
document.getElementById('svcHealthUrl').value = s.health_check_url || '';
document.getElementById('svcEnabled').checked = s.is_enabled;
document.getElementById('svcHealthEnabled').checked = s.health_check_enabled;
document.getElementById('modalTitle').textContent = '编辑服务';
document.getElementById('modal').style.display = 'flex';
}
function closeModal() {
document.getElementById('modal').style.display = 'none';
}
async function save() {
const id = document.getElementById('editId').value;
const name = document.getElementById('svcName').value.trim();
const url = document.getElementById('svcUrl').value.trim();
if (!name) { alert('服务名称不能为空'); return; }
if (!url) { alert('服务地址不能为空'); return; }
const body = {
name,
url,
icon: document.getElementById('svcIcon').value.trim(),
category_id: parseInt(document.getElementById('svcCategory').value) || 0,
description: document.getElementById('svcDesc').value.trim(),
tags: document.getElementById('svcTags').value.trim(),
sort_order: parseInt(document.getElementById('svcOrder').value) || 0,
health_check_url: document.getElementById('svcHealthUrl').value.trim(),
is_enabled: document.getElementById('svcEnabled').checked,
health_check_enabled: document.getElementById('svcHealthEnabled').checked,
};
if (id) body.id = parseInt(id);
const apiUrl = id ? `/admin/api/services/${id}` : '/admin/api/services';
const method = id ? 'PUT' : 'POST';
const resp = await fetch(apiUrl, {
method,
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(body)
});
const res = await resp.json();
if (res.success) {
closeModal();
load();
} else {
alert(res.message || '保存失败');
}
}
async function del(id, name) {
if (!confirm(`确定删除服务「${name}」?`)) return;
const resp = await fetch('/admin/api/services/' + id, { method: 'DELETE' });
const res = await resp.json();
if (res.success) {
load();
} else {
alert(res.message || '删除失败');
}
}
function escapeHTML(str) {
const div = document.createElement('div');
div.textContent = str || '';
return div.innerHTML;
}
document.addEventListener('keydown', e => {
if (e.key === 'Escape') closeModal();
});
load();
</script>
</body>
</html>