910 lines
30 KiB
HTML
910 lines
30 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>数据库管理 - MIP广告自动化</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
|
|
'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
background: #f0f2f5;
|
|
color: #333;
|
|
}
|
|
|
|
/* 左侧菜单栏 */
|
|
.sidebar {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 200px;
|
|
height: 100vh;
|
|
background: linear-gradient(180deg, #1890ff 0%, #096dd9 100%);
|
|
color: white;
|
|
padding: 20px 0;
|
|
box-shadow: 2px 0 8px rgba(0,0,0,0.1);
|
|
z-index: 100;
|
|
}
|
|
|
|
.logo {
|
|
text-align: center;
|
|
padding: 0 20px 30px;
|
|
border-bottom: 1px solid rgba(255,255,255,0.2);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.logo h2 {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.logo p {
|
|
font-size: 12px;
|
|
opacity: 0.8;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.menu-item {
|
|
padding: 12px 20px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
border-left: 3px solid transparent;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.menu-item:hover {
|
|
background: rgba(255,255,255,0.1);
|
|
border-left-color: white;
|
|
}
|
|
|
|
.menu-item.active {
|
|
background: rgba(255,255,255,0.2);
|
|
border-left-color: white;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.menu-item-icon {
|
|
margin-right: 10px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.menu-divider {
|
|
height: 1px;
|
|
background: rgba(255,255,255,0.2);
|
|
margin: 10px 20px;
|
|
}
|
|
|
|
.menu-back {
|
|
padding: 12px 20px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
border-left: 3px solid transparent;
|
|
display: flex;
|
|
align-items: center;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.menu-back:hover {
|
|
background: rgba(255,255,255,0.1);
|
|
border-left-color: rgba(255,255,255,0.5);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 主内容区 */
|
|
.main-content {
|
|
margin-left: 200px;
|
|
padding: 20px;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.header {
|
|
background: white;
|
|
padding: 20px 30px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.header h1 {
|
|
color: #1890ff;
|
|
font-size: 24px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.header p {
|
|
color: #999;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* 统计卡片 */
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
}
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.stat-card-title {
|
|
font-size: 14px;
|
|
color: #999;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.stat-card-value {
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.stat-card-trend {
|
|
font-size: 12px;
|
|
color: #52c41a;
|
|
}
|
|
|
|
.stat-card.primary .stat-card-value { color: #1890ff; }
|
|
.stat-card.success .stat-card-value { color: #52c41a; }
|
|
.stat-card.warning .stat-card-value { color: #faad14; }
|
|
.stat-card.info .stat-card-value { color: #13c2c2; }
|
|
|
|
/* 内容卡片 */
|
|
.content-card {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 2px solid #f0f2f5;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.card-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* 按钮 */
|
|
.btn {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
transition: all 0.3s;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #1890ff;
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #40a9ff;
|
|
}
|
|
|
|
.btn-success {
|
|
background: #52c41a;
|
|
color: white;
|
|
}
|
|
|
|
.btn-success:hover {
|
|
background: #73d13d;
|
|
}
|
|
|
|
.btn-danger {
|
|
background: #ff4d4f;
|
|
color: white;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background: #ff7875;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: #f0f0f0;
|
|
color: #666;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: #e0e0e0;
|
|
}
|
|
|
|
/* 表格 */
|
|
.table-container {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 14px;
|
|
}
|
|
|
|
thead {
|
|
background: #fafafa;
|
|
}
|
|
|
|
th {
|
|
padding: 12px;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
color: #666;
|
|
border-bottom: 2px solid #f0f2f5;
|
|
}
|
|
|
|
td {
|
|
padding: 12px;
|
|
border-bottom: 1px solid #f0f2f5;
|
|
}
|
|
|
|
tr:hover {
|
|
background: #fafafa;
|
|
}
|
|
|
|
.status-badge {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-active {
|
|
background: #e6f7ff;
|
|
color: #1890ff;
|
|
}
|
|
|
|
.status-success {
|
|
background: #f6ffed;
|
|
color: #52c41a;
|
|
}
|
|
|
|
.status-failed {
|
|
background: #fff1f0;
|
|
color: #ff4d4f;
|
|
}
|
|
|
|
.status-inactive {
|
|
background: #f5f5f5;
|
|
color: #999;
|
|
}
|
|
|
|
/* 空状态 */
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
color: #999;
|
|
}
|
|
|
|
.empty-state-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 20px;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
/* 加载动画 */
|
|
.loading {
|
|
text-align: center;
|
|
padding: 40px;
|
|
color: #1890ff;
|
|
}
|
|
|
|
.loading-spinner {
|
|
border: 3px solid #f0f2f5;
|
|
border-top: 3px solid #1890ff;
|
|
border-radius: 50%;
|
|
width: 40px;
|
|
height: 40px;
|
|
animation: spin 1s linear infinite;
|
|
margin: 0 auto 20px;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Toast提示 */
|
|
.toast {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
background: white;
|
|
padding: 16px 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
z-index: 1000;
|
|
display: none;
|
|
min-width: 300px;
|
|
animation: slideIn 0.3s ease;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.toast.success { border-left: 4px solid #52c41a; }
|
|
.toast.error { border-left: 4px solid #ff4d4f; }
|
|
.toast.info { border-left: 4px solid #1890ff; }
|
|
|
|
/* 响应式 */
|
|
@media (max-width: 768px) {
|
|
.sidebar {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.main-content {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.stats-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* 文本换行 */
|
|
.text-wrap {
|
|
word-break: break-all;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.text-ellipsis {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 300px;
|
|
}
|
|
|
|
/* 分页 */
|
|
.pagination {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.page-btn {
|
|
padding: 6px 12px;
|
|
border: 1px solid #d9d9d9;
|
|
background: white;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.page-btn:hover {
|
|
border-color: #1890ff;
|
|
color: #1890ff;
|
|
}
|
|
|
|
.page-btn.active {
|
|
background: #1890ff;
|
|
color: white;
|
|
border-color: #1890ff;
|
|
}
|
|
|
|
.page-btn:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 左侧菜单 -->
|
|
<div class="sidebar">
|
|
<div class="logo">
|
|
<h2>📊 数据库管理</h2>
|
|
<p>MIP广告自动化系统</p>
|
|
</div>
|
|
<div class="menu-back" onclick="window.location.href='index.html'">
|
|
<span class="menu-item-icon">🏠</span>
|
|
<span>返回主页</span>
|
|
</div>
|
|
<div class="menu-divider"></div>
|
|
<div class="menu-item active" data-view="overview">
|
|
<span class="menu-item-icon">📈</span>
|
|
<span>数据概览</span>
|
|
</div>
|
|
<div class="menu-item" data-view="sites">
|
|
<span class="menu-item-icon">🌐</span>
|
|
<span>站点管理</span>
|
|
</div>
|
|
<div class="menu-item" data-view="clicks">
|
|
<span class="menu-item-icon">👆</span>
|
|
<span>点击记录</span>
|
|
</div>
|
|
<div class="menu-item" data-view="interactions">
|
|
<span class="menu-item-icon">💬</span>
|
|
<span>互动记录</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主内容区 -->
|
|
<div class="main-content">
|
|
<!-- 数据概览视图 -->
|
|
<div id="overview-view" class="view-content">
|
|
<div class="header">
|
|
<h1>数据概览</h1>
|
|
<p>实时查看系统运行统计数据</p>
|
|
</div>
|
|
|
|
<!-- 统计卡片 -->
|
|
<div class="stats-grid">
|
|
<div class="stat-card primary">
|
|
<div class="stat-card-title">总站点数</div>
|
|
<div class="stat-card-value" id="stat-total-sites">-</div>
|
|
<div class="stat-card-trend">活跃: <span id="stat-active-sites">-</span></div>
|
|
</div>
|
|
<div class="stat-card success">
|
|
<div class="stat-card-title">总点击数</div>
|
|
<div class="stat-card-value" id="stat-total-clicks">-</div>
|
|
<div class="stat-card-trend">今日: <span id="stat-today-clicks">-</span></div>
|
|
</div>
|
|
<div class="stat-card warning">
|
|
<div class="stat-card-title">总回复数</div>
|
|
<div class="stat-card-value" id="stat-total-replies">-</div>
|
|
<div class="stat-card-trend">回复率: <span id="stat-reply-rate">-</span></div>
|
|
</div>
|
|
<div class="stat-card info">
|
|
<div class="stat-card-title">成功互动</div>
|
|
<div class="stat-card-value" id="stat-successful">-</div>
|
|
<div class="stat-card-trend">成功率: <span id="stat-success-rate">-</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 最近的站点 -->
|
|
<div class="content-card">
|
|
<div class="card-header">
|
|
<div class="card-title">最近的站点</div>
|
|
<div class="card-actions">
|
|
<button class="btn btn-primary" onclick="refreshData()">🔄 刷新</button>
|
|
</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>站点名称</th>
|
|
<th>URL</th>
|
|
<th>状态</th>
|
|
<th>点击数</th>
|
|
<th>回复数</th>
|
|
<th>创建时间</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="recent-sites-table">
|
|
<tr>
|
|
<td colspan="7" class="loading">
|
|
<div class="loading-spinner"></div>
|
|
<div>加载中...</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 站点管理视图 -->
|
|
<div id="sites-view" class="view-content" style="display: none;">
|
|
<div class="header">
|
|
<h1>站点管理</h1>
|
|
<p>管理所有MIP站点信息</p>
|
|
</div>
|
|
|
|
<div class="content-card">
|
|
<div class="card-header">
|
|
<div class="card-title">站点列表</div>
|
|
<div class="card-actions">
|
|
<button class="btn btn-primary" onclick="refreshSites()">🔄 刷新</button>
|
|
</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>站点名称</th>
|
|
<th>URL</th>
|
|
<th>维度</th>
|
|
<th>状态</th>
|
|
<th>点击/回复</th>
|
|
<th>频次</th>
|
|
<th>时间段</th>
|
|
<th>创建时间</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="sites-table">
|
|
<tr>
|
|
<td colspan="9" class="loading">
|
|
<div class="loading-spinner"></div>
|
|
<div>加载中...</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 点击记录视图 -->
|
|
<div id="clicks-view" class="view-content" style="display: none;">
|
|
<div class="header">
|
|
<h1>点击记录</h1>
|
|
<p>查看所有广告点击记录</p>
|
|
</div>
|
|
|
|
<div class="content-card">
|
|
<div class="card-header">
|
|
<div class="card-title">点击记录列表</div>
|
|
<div class="card-actions">
|
|
<button class="btn btn-primary" onclick="refreshClicks()">🔄 刷新</button>
|
|
</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>站点ID</th>
|
|
<th>站点URL</th>
|
|
<th>点击时间</th>
|
|
<th>用户IP</th>
|
|
<th>设备类型</th>
|
|
<th>任务ID</th>
|
|
<th>操作者</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="clicks-table">
|
|
<tr>
|
|
<td colspan="8" class="loading">
|
|
<div class="loading-spinner"></div>
|
|
<div>加载中...</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 互动记录视图 -->
|
|
<div id="interactions-view" class="view-content" style="display: none;">
|
|
<div class="header">
|
|
<h1>互动记录</h1>
|
|
<p>查看所有咨询互动记录</p>
|
|
</div>
|
|
|
|
<div class="content-card">
|
|
<div class="card-header">
|
|
<div class="card-title">互动记录列表</div>
|
|
<div class="card-actions">
|
|
<button class="btn btn-primary" onclick="refreshInteractions()">🔄 刷新</button>
|
|
</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>站点ID</th>
|
|
<th>点击ID</th>
|
|
<th>互动时间</th>
|
|
<th>互动类型</th>
|
|
<th>发送内容</th>
|
|
<th>收到回复</th>
|
|
<th>状态</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="interactions-table">
|
|
<tr>
|
|
<td colspan="8" class="loading">
|
|
<div class="loading-spinner"></div>
|
|
<div>加载中...</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast提示 -->
|
|
<div id="toast" class="toast"></div>
|
|
|
|
<script>
|
|
const API_BASE = 'http://localhost:5000';
|
|
|
|
// Toast提示
|
|
function showToast(message, type = 'info') {
|
|
const toast = document.getElementById('toast');
|
|
toast.textContent = message;
|
|
toast.className = `toast ${type}`;
|
|
toast.style.display = 'block';
|
|
|
|
setTimeout(() => {
|
|
toast.style.display = 'none';
|
|
}, 3000);
|
|
}
|
|
|
|
// 菜单切换
|
|
document.querySelectorAll('.menu-item').forEach(item => {
|
|
item.addEventListener('click', function() {
|
|
const view = this.dataset.view;
|
|
|
|
// 更新菜单激活状态
|
|
document.querySelectorAll('.menu-item').forEach(i => i.classList.remove('active'));
|
|
this.classList.add('active');
|
|
|
|
// 切换视图
|
|
document.querySelectorAll('.view-content').forEach(v => v.style.display = 'none');
|
|
document.getElementById(`${view}-view`).style.display = 'block';
|
|
|
|
// 加载对应数据
|
|
switch(view) {
|
|
case 'overview':
|
|
loadOverview();
|
|
break;
|
|
case 'sites':
|
|
loadSites();
|
|
break;
|
|
case 'clicks':
|
|
loadClicks();
|
|
break;
|
|
case 'interactions':
|
|
loadInteractions();
|
|
break;
|
|
}
|
|
});
|
|
});
|
|
|
|
// 加载概览数据
|
|
async function loadOverview() {
|
|
try {
|
|
// 加载统计数据
|
|
const statsRes = await fetch(`${API_BASE}/api/statistics`);
|
|
const statsData = await statsRes.json();
|
|
|
|
if (statsData.success) {
|
|
const stats = statsData.data;
|
|
document.getElementById('stat-total-sites').textContent = stats.total_sites || 0;
|
|
document.getElementById('stat-active-sites').textContent = stats.active_sites || 0;
|
|
document.getElementById('stat-total-clicks').textContent = stats.total_clicks || 0;
|
|
document.getElementById('stat-today-clicks').textContent = '-';
|
|
document.getElementById('stat-total-replies').textContent = stats.total_replies || 0;
|
|
document.getElementById('stat-reply-rate').textContent = stats.reply_rate || '0%';
|
|
document.getElementById('stat-successful').textContent = stats.successful_interactions || 0;
|
|
document.getElementById('stat-success-rate').textContent = stats.success_rate || '0%';
|
|
}
|
|
|
|
// 加载最近站点
|
|
const sitesRes = await fetch(`${API_BASE}/api/urls`);
|
|
const sitesData = await sitesRes.json();
|
|
|
|
const tbody = document.getElementById('recent-sites-table');
|
|
if (sitesData.success && sitesData.data && sitesData.data.length > 0) {
|
|
tbody.innerHTML = sitesData.data.slice(0, 10).map(site => `
|
|
<tr>
|
|
<td>${site.id}</td>
|
|
<td>${site.site_name || '-'}</td>
|
|
<td><span class="text-ellipsis" title="${site.site_url}">${site.site_url}</span></td>
|
|
<td><span class="status-badge status-${site.status === 'active' ? 'active' : 'inactive'}">${site.status === 'active' ? '活跃' : '未激活'}</span></td>
|
|
<td>${site.click_count || 0}</td>
|
|
<td>${site.reply_count || 0}</td>
|
|
<td>${site.created_at || '-'}</td>
|
|
</tr>
|
|
`).join('');
|
|
} else {
|
|
tbody.innerHTML = `
|
|
<tr>
|
|
<td colspan="7" class="empty-state">
|
|
<div class="empty-state-icon">📭</div>
|
|
<div>暂无数据</div>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
} catch (error) {
|
|
showToast('加载数据失败: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
// 加载站点数据
|
|
async function loadSites() {
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/urls`);
|
|
const data = await res.json();
|
|
|
|
const tbody = document.getElementById('sites-table');
|
|
if (data.success && data.data && data.data.length > 0) {
|
|
tbody.innerHTML = data.data.map(site => `
|
|
<tr>
|
|
<td>${site.id}</td>
|
|
<td>${site.site_name || '-'}</td>
|
|
<td><span class="text-ellipsis" title="${site.site_url}">${site.site_url}</span></td>
|
|
<td>${site.site_dimension || '-'}</td>
|
|
<td><span class="status-badge status-${site.status === 'active' ? 'active' : 'inactive'}">${site.status === 'active' ? '活跃' : '未激活'}</span></td>
|
|
<td>${site.click_count || 0} / ${site.reply_count || 0}</td>
|
|
<td>${site.frequency || '-'}</td>
|
|
<td>${site.time_start || '-'} ~ ${site.time_end || '-'}</td>
|
|
<td>${site.created_at || '-'}</td>
|
|
</tr>
|
|
`).join('');
|
|
} else {
|
|
tbody.innerHTML = `
|
|
<tr>
|
|
<td colspan="9" class="empty-state">
|
|
<div class="empty-state-icon">📭</div>
|
|
<div>暂无站点数据</div>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
} catch (error) {
|
|
showToast('加载站点数据失败: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
// 加载点击记录
|
|
async function loadClicks() {
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/clicks?limit=100`);
|
|
const data = await res.json();
|
|
|
|
const tbody = document.getElementById('clicks-table');
|
|
if (data.success && data.data && data.data.length > 0) {
|
|
tbody.innerHTML = data.data.map(click => `
|
|
<tr>
|
|
<td>${click.id}</td>
|
|
<td>${click.site_id || '-'}</td>
|
|
<td><span class="text-ellipsis" title="${click.site_url || ''}">${click.site_url || '-'}</span></td>
|
|
<td>${click.click_time || '-'}</td>
|
|
<td>${click.user_ip || '-'}</td>
|
|
<td>${click.device_type || '-'}</td>
|
|
<td>${click.task_id || '-'}</td>
|
|
<td>${click.operator || '-'}</td>
|
|
</tr>
|
|
`).join('');
|
|
} else {
|
|
tbody.innerHTML = `
|
|
<tr>
|
|
<td colspan="8" class="empty-state">
|
|
<div class="empty-state-icon">📭</div>
|
|
<div>暂无点击记录</div>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
} catch (error) {
|
|
const tbody = document.getElementById('clicks-table');
|
|
tbody.innerHTML = `
|
|
<tr>
|
|
<td colspan="8" class="empty-state">
|
|
<div class="empty-state-icon">❌</div>
|
|
<div>加载失败: ${error.message}</div>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
showToast('加载点击记录失败: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
// 加载互动记录
|
|
async function loadInteractions() {
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/interactions?limit=100`);
|
|
const data = await res.json();
|
|
|
|
const tbody = document.getElementById('interactions-table');
|
|
if (data.success && data.data && data.data.length > 0) {
|
|
tbody.innerHTML = data.data.map(interaction => `
|
|
<tr>
|
|
<td>${interaction.id}</td>
|
|
<td>${interaction.site_id || '-'}</td>
|
|
<td>${interaction.click_id || '-'}</td>
|
|
<td>${interaction.interaction_time || '-'}</td>
|
|
<td>${interaction.interaction_type || '-'}</td>
|
|
<td><span class="text-ellipsis" title="${interaction.reply_content || ''}">${interaction.reply_content || '-'}</span></td>
|
|
<td><span class="status-badge ${interaction.response_received ? 'status-success' : 'status-inactive'}">${interaction.response_received ? '是' : '否'}</span></td>
|
|
<td><span class="status-badge status-${interaction.interaction_status === 'success' ? 'success' : 'failed'}">${interaction.interaction_status || '-'}</span></td>
|
|
</tr>
|
|
`).join('');
|
|
} else {
|
|
tbody.innerHTML = `
|
|
<tr>
|
|
<td colspan="8" class="empty-state">
|
|
<div class="empty-state-icon">📭</div>
|
|
<div>暂无互动记录</div>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
} catch (error) {
|
|
const tbody = document.getElementById('interactions-table');
|
|
tbody.innerHTML = `
|
|
<tr>
|
|
<td colspan="8" class="empty-state">
|
|
<div class="empty-state-icon">❌</div>
|
|
<div>加载失败: ${error.message}</div>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
showToast('加载互动记录失败: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
// 刷新函数
|
|
function refreshData() {
|
|
showToast('正在刷新数据...', 'info');
|
|
loadOverview();
|
|
}
|
|
|
|
function refreshSites() {
|
|
showToast('正在刷新站点数据...', 'info');
|
|
loadSites();
|
|
}
|
|
|
|
function refreshClicks() {
|
|
showToast('正在刷新点击记录...', 'info');
|
|
loadClicks();
|
|
}
|
|
|
|
function refreshInteractions() {
|
|
showToast('正在刷新互动记录...', 'info');
|
|
loadInteractions();
|
|
}
|
|
|
|
// 页面加载时初始化
|
|
window.onload = function() {
|
|
loadOverview();
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|