K-hermes
edf4dfcd52
- 基于OpenResty的RESTful API服务 - 支持Cookie/Token等数据类型的存储和管理 - 登录认证保护 - Web管理界面 - 数据过期管理
445 lines
14 KiB
HTML
445 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>通用数据同步服务 - 管理面板</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.header {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 30px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
h1 {
|
|
color: #667eea;
|
|
font-size: 32px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.subtitle {
|
|
color: #666;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 25px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.stat-label {
|
|
color: #999;
|
|
font-size: 14px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.stat-icon {
|
|
font-size: 40px;
|
|
float: right;
|
|
}
|
|
|
|
.data-list {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 30px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.data-item {
|
|
border-bottom: 1px solid #eee;
|
|
padding: 20px 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.data-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.data-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.data-tag {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.data-meta {
|
|
color: #999;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.status-badge {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.status-valid {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
}
|
|
|
|
.status-warning {
|
|
background: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
|
|
.status-expired {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
|
|
.btn {
|
|
padding: 8px 16px;
|
|
border-radius: 6px;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
margin-left: 10px;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #667eea;
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #5568d3;
|
|
}
|
|
|
|
.btn-danger {
|
|
background: #dc3545;
|
|
color: white;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background: #c82333;
|
|
}
|
|
|
|
.loading {
|
|
text-align: center;
|
|
padding: 40px;
|
|
color: #999;
|
|
}
|
|
|
|
.empty {
|
|
text-align: center;
|
|
padding: 60px;
|
|
color: #999;
|
|
}
|
|
|
|
.refresh-btn {
|
|
position: fixed;
|
|
bottom: 30px;
|
|
right: 30px;
|
|
width: 60px;
|
|
height: 60px;
|
|
background: #667eea;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 50%;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.refresh-btn:hover {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 6px 30px rgba(102, 126, 234, 0.6);
|
|
}
|
|
|
|
.api-docs {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 30px;
|
|
margin-top: 20px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.api-endpoint {
|
|
background: #f8f9fa;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin-bottom: 15px;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
|
|
.method {
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.method-get { background: #28a745; color: white; }
|
|
.method-post { background: #007bff; color: white; }
|
|
.method-delete { background: #dc3545; color: white; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<h1>🔄 通用数据同步服务</h1>
|
|
<p class="subtitle">Cookie / Token / Credential 管理面板</p>
|
|
</div>
|
|
|
|
<!-- Stats -->
|
|
<div class="stats">
|
|
<div class="stat-card">
|
|
<div class="stat-icon">📦</div>
|
|
<div class="stat-label">总数据</div>
|
|
<div class="stat-value" id="total-count">-</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon">✅</div>
|
|
<div class="stat-label">正常</div>
|
|
<div class="stat-value" id="valid-count">-</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon">⚠️</div>
|
|
<div class="stat-label">即将过期</div>
|
|
<div class="stat-value" id="warning-count">-</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon">❌</div>
|
|
<div class="stat-label">已过期</div>
|
|
<div class="stat-value" id="expired-count">-</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data List -->
|
|
<div class="data-list">
|
|
<h2 style="margin-bottom: 20px;">📋 数据列表</h2>
|
|
<div id="data-container">
|
|
<div class="loading">正在加载...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- API Docs -->
|
|
<div class="api-docs">
|
|
<h2 style="margin-bottom: 20px;">📚 API 文档</h2>
|
|
<div class="api-endpoint">
|
|
<span class="method method-get">GET</span>
|
|
<code>/api/data</code> - 列出所有数据
|
|
</div>
|
|
<div class="api-endpoint">
|
|
<span class="method method-get">GET</span>
|
|
<code>/api/data/:tag</code> - 获取指定数据（需要 X-Password 头）
|
|
</div>
|
|
<div class="api-endpoint">
|
|
<span class="method method-post">POST</span>
|
|
<code>/api/data</code> - 上传数据（需要 password 字段）
|
|
</div>
|
|
<div class="api-endpoint">
|
|
<span class="method method-delete">DELETE</span>
|
|
<code>/api/data/:tag</code> - 删除数据（需要 X-Password 头）
|
|
</div>
|
|
<div class="api-endpoint">
|
|
<span class="method method-get">GET</span>
|
|
<code>/api/data/copy/:tag</code> - 获取复制配置
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Refresh Button -->
|
|
<button class="refresh-btn" onclick="loadData()" title="刷新">🔄</button>
|
|
|
|
<script>
|
|
async function loadData() {
|
|
try {
|
|
const response = await fetch('/api/data');
|
|
const data = await response.json();
|
|
|
|
const tags = data.tags || {};
|
|
const tagArray = Object.entries(tags).map(([tag, info]) => ({
|
|
tag,
|
|
...info
|
|
}));
|
|
|
|
// 统计
|
|
let validCount = 0;
|
|
let warningCount = 0;
|
|
let expiredCount = 0;
|
|
|
|
tagArray.forEach(item => {
|
|
const expiresAt = new Date(item.expires_at);
|
|
const now = new Date();
|
|
const remaining = (expiresAt - now) / 1000 / 3600 / 24; // 天数
|
|
|
|
if (remaining < 0) {
|
|
expiredCount++;
|
|
item.status = 'expired';
|
|
} else if (remaining < 2) {
|
|
warningCount++;
|
|
item.status = 'warning';
|
|
} else {
|
|
validCount++;
|
|
item.status = 'valid';
|
|
}
|
|
});
|
|
|
|
// 更新统计
|
|
document.getElementById('total-count').textContent = tagArray.length;
|
|
document.getElementById('valid-count').textContent = validCount;
|
|
document.getElementById('warning-count').textContent = warningCount;
|
|
document.getElementById('expired-count').textContent = expiredCount;
|
|
|
|
// 渲染列表
|
|
const container = document.getElementById('data-container');
|
|
|
|
if (tagArray.length === 0) {
|
|
container.innerHTML = '<div class="empty">📭 暂无数据</div>';
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = tagArray.map((item, index) => {
|
|
const statusClass = `status-${item.status}`;
|
|
const statusText = {
|
|
'valid': '正常',
|
|
'warning': '即将过期',
|
|
'expired': '已过期'
|
|
}[item.status];
|
|
|
|
const escapedTag = item.tag.replace(/'/g, "\\'").replace(/"/g, '\\"');
|
|
|
|
return `
|
|
<div class="data-item">
|
|
<div class="data-info">
|
|
<div class="data-tag">
|
|
${item.tag}
|
|
<span class="status-badge ${statusClass}">${statusText}</span>
|
|
</div>
|
|
<div class="data-meta">
|
|
类型: ${item.type} |
|
|
创建: ${item.created_at} |
|
|
过期: ${item.expires_at}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-primary" onclick="viewData('${escapedTag}')">查看</button>
|
|
<button class="btn btn-primary" onclick="copyConfig('${escapedTag}')">复制配置</button>
|
|
<button class="btn btn-danger" onclick="deleteData('${escapedTag}')">删除</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
} catch (error) {
|
|
console.error('加载失败:', error);
|
|
document.getElementById('data-container').innerHTML =
|
|
'<div class="empty">❌ 加载失败，请刷新重试</div>';
|
|
}
|
|
}
|
|
|
|
async function viewData(tag) {
|
|
const password = prompt('请输入密码：');
|
|
if (!password) return;
|
|
|
|
try {
|
|
const response = await fetch(`/api/data/${tag}`, {
|
|
headers: { 'X-Password': password }
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
alert(JSON.stringify(data, null, 2));
|
|
} else {
|
|
alert('获取失败：' + response.statusText);
|
|
}
|
|
} catch (error) {
|
|
alert('请求失败：' + error.message);
|
|
}
|
|
}
|
|
|
|
async function copyConfig(tag) {
|
|
try {
|
|
const response = await fetch(`/api/data/copy/${tag}`);
|
|
const data = await response.json();
|
|
|
|
await navigator.clipboard.writeText(data.copy_text);
|
|
alert('✅ 配置已复制到剪贴板！');
|
|
} catch (error) {
|
|
alert('复制失败：' + error.message);
|
|
}
|
|
}
|
|
|
|
async function deleteData(tag) {
|
|
if (!confirm(`确定要删除 ${tag} 吗？`)) return;
|
|
|
|
const password = prompt('请输入密码：');
|
|
if (!password) return;
|
|
|
|
try {
|
|
const response = await fetch(`/api/data/${tag}`, {
|
|
method: 'DELETE',
|
|
headers: { 'X-Password': password }
|
|
});
|
|
|
|
if (response.ok) {
|
|
alert('✅ 删除成功！');
|
|
loadData();
|
|
} else {
|
|
alert('删除失败：' + response.statusText);
|
|
}
|
|
} catch (error) {
|
|
alert('请求失败：' + error.message);
|
|
}
|
|
}
|
|
|
|
// 页面加载时获取数据
|
|
loadData();
|
|
|
|
// 每30秒自动刷新
|
|
setInterval(loadData, 30000);
|
|
</script>
|
|
</body>
|
|
</html>
|