commit
This commit is contained in:
sjk
875
static/app.html
Normal file
875
static/app.html
Normal file
@@ -0,0 +1,875 @@
|
||||
<!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>
|
||||
<!-- Element UI CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||
<!-- Vue -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
|
||||
<!-- Element UI JS -->
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
<!-- Axios -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
|
||||
<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;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 顶部导航栏 */
|
||||
.top-header {
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: rgba(255,255,255,0.2);
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #52c41a;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
/* 主容器 */
|
||||
.main-container {
|
||||
display: flex;
|
||||
height: calc(100vh - 60px);
|
||||
}
|
||||
|
||||
/* 左侧菜单 */
|
||||
.sidebar {
|
||||
width: 200px;
|
||||
background: #001529;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 右侧内容区 */
|
||||
.content-area {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
background: #f0f2f5;
|
||||
}
|
||||
|
||||
/* 统计卡片 */
|
||||
.stats-row {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
padding: 24px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.stat-card.primary .stat-value { color: #1890ff; }
|
||||
.stat-card.success .stat-value { color: #52c41a; }
|
||||
.stat-card.warning .stat-value { color: #faad14; }
|
||||
.stat-card.danger .stat-value { color: #f5222d; }
|
||||
|
||||
/* 内容卡片 */
|
||||
.content-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
/* 表格样式优化 */
|
||||
.el-table {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.el-table th {
|
||||
background: #fafafa;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* URL链接 */
|
||||
.url-link {
|
||||
color: #1890ff;
|
||||
text-decoration: none;
|
||||
max-width: 400px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.url-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
.form-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 64px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
/* 数据库标签页 */
|
||||
.db-tabs {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-header">
|
||||
<div class="logo-section">
|
||||
<div class="logo-icon">📊</div>
|
||||
<div class="logo-text">MIP广告自动化管理系统</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="status-badge">
|
||||
<div class="status-dot"></div>
|
||||
<span>{{ schedulerStatus }}</span>
|
||||
</div>
|
||||
<el-button type="text" style="color: white;">
|
||||
<i class="el-icon-user"></i> 管理员
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主容器 -->
|
||||
<div class="main-container">
|
||||
<!-- 左侧菜单 -->
|
||||
<div class="sidebar">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
class="el-menu-vertical"
|
||||
background-color="#001529"
|
||||
text-color="#fff"
|
||||
active-text-color="#1890ff"
|
||||
@select="handleMenuSelect">
|
||||
<el-menu-item index="dashboard">
|
||||
<i class="el-icon-data-line"></i>
|
||||
<span slot="title">数据概览</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="scheduler">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span slot="title">调度器管理</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="urls">
|
||||
<i class="el-icon-link"></i>
|
||||
<span slot="title">链接管理</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="database">
|
||||
<i class="el-icon-coin"></i>
|
||||
<span slot="title">数据库管理</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="browser">
|
||||
<i class="el-icon-monitor"></i>
|
||||
<span slot="title">浏览器测试</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
|
||||
<!-- 右侧内容区 -->
|
||||
<div class="content-area">
|
||||
<!-- 数据概览 -->
|
||||
<div v-show="activeMenu === 'dashboard'">
|
||||
<el-row :gutter="24" class="stats-row">
|
||||
<el-col :span="6">
|
||||
<div class="stat-card primary">
|
||||
<div class="stat-label">总链接数</div>
|
||||
<div class="stat-value">{{ stats.totalUrls }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="stat-card success">
|
||||
<div class="stat-label">总点击次数</div>
|
||||
<div class="stat-value">{{ stats.totalClicks }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="stat-card warning">
|
||||
<div class="stat-label">获得回复</div>
|
||||
<div class="stat-value">{{ stats.totalReplies }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="stat-card danger">
|
||||
<div class="stat-label">回复率</div>
|
||||
<div class="stat-value">{{ stats.replyRate }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="content-card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">链接列表</div>
|
||||
<el-button type="primary" size="small" icon="el-icon-refresh" @click="loadUrlList">刷新</el-button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<el-table :data="urlList" style="width: 100%" v-loading="loading">
|
||||
<el-table-column prop="site_url" label="链接地址" min-width="300">
|
||||
<template slot-scope="scope">
|
||||
<a :href="scope.row.site_url" target="_blank" class="url-link" :title="scope.row.site_url">
|
||||
{{ scope.row.site_url }}
|
||||
</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="click_count" label="点击次数" width="120" align="center"></el-table-column>
|
||||
<el-table-column prop="reply_count" label="回复次数" width="120" align="center"></el-table-column>
|
||||
<el-table-column prop="last_click_time" label="上次点击时间" width="180"></el-table-column>
|
||||
<el-table-column label="操作" width="180" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="warning" @click="resetUrl(scope.row.site_url)">重置</el-button>
|
||||
<el-button size="mini" type="danger" @click="deleteUrl(scope.row.site_url)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 调度器管理 -->
|
||||
<div v-show="activeMenu === 'scheduler'">
|
||||
<div class="content-card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">调度器控制</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<el-button type="success" icon="el-icon-video-play" @click="startScheduler">启动调度器</el-button>
|
||||
<el-button type="danger" icon="el-icon-video-pause" @click="stopScheduler">停止调度器</el-button>
|
||||
|
||||
<el-alert
|
||||
title="调度规则说明"
|
||||
type="info"
|
||||
:closable="false"
|
||||
style="margin-top: 24px;">
|
||||
<ul style="padding-left: 20px; line-height: 2;">
|
||||
<li>每30分钟点击一次添加的链接</li>
|
||||
<li>仅在09:00-21:00时间段执行</li>
|
||||
<li>每个链接随机点击1-10次</li>
|
||||
<li>等待最多30秒查看回复</li>
|
||||
</ul>
|
||||
</el-alert>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 链接管理 -->
|
||||
<div v-show="activeMenu === 'urls'">
|
||||
<div class="content-card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">添加单个链接</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<el-input
|
||||
v-model="singleUrl"
|
||||
placeholder="请输入MIP页面链接"
|
||||
clearable>
|
||||
</el-input>
|
||||
<el-button type="primary" style="margin-top: 16px;" @click="addSingleUrl">添加链接</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">批量添加链接</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="batchUrls"
|
||||
:rows="8"
|
||||
placeholder="每行输入一个链接，支持批量添加">
|
||||
</el-input>
|
||||
<el-button type="primary" style="margin-top: 16px;" @click="addBatchUrls">批量添加</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据库管理 -->
|
||||
<div v-show="activeMenu === 'database'">
|
||||
<el-row :gutter="24" class="stats-row">
|
||||
<el-col :span="6">
|
||||
<div class="stat-card primary">
|
||||
<div class="stat-label">总站点数</div>
|
||||
<div class="stat-value">{{ dbStats.totalSites }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="stat-card success">
|
||||
<div class="stat-label">总点击数</div>
|
||||
<div class="stat-value">{{ dbStats.totalClicks }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="stat-card warning">
|
||||
<div class="stat-label">总回复数</div>
|
||||
<div class="stat-value">{{ dbStats.totalReplies }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="stat-card danger">
|
||||
<div class="stat-label">成功互动</div>
|
||||
<div class="stat-value">{{ dbStats.successful }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="content-card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">数据库记录</div>
|
||||
<el-button type="primary" size="small" icon="el-icon-refresh" @click="loadDatabaseData">刷新</el-button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<el-tabs v-model="dbActiveTab" @tab-click="handleDbTabClick">
|
||||
<el-tab-pane label="站点列表" name="sites">
|
||||
<el-table :data="dbSites" style="width: 100%" v-loading="dbLoading">
|
||||
<el-table-column prop="id" label="ID" width="60"></el-table-column>
|
||||
<el-table-column prop="site_name" label="站点名称" width="150"></el-table-column>
|
||||
<el-table-column prop="site_url" label="URL" min-width="250">
|
||||
<template slot-scope="scope">
|
||||
<a :href="scope.row.site_url" target="_blank" class="url-link" :title="scope.row.site_url">
|
||||
{{ scope.row.site_url }}
|
||||
</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="100" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status === 'active' ? 'success' : 'info'" size="small">
|
||||
{{ scope.row.status === 'active' ? '活跃' : '未激活' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="click_count" label="点击数" width="100" align="center"></el-table-column>
|
||||
<el-table-column prop="reply_count" label="回复数" width="100" align="center"></el-table-column>
|
||||
<el-table-column prop="created_at" label="创建时间" width="180"></el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="点击记录" name="clicks">
|
||||
<el-table :data="dbClicks" style="width: 100%" v-loading="dbLoading">
|
||||
<el-table-column prop="id" label="ID" width="60"></el-table-column>
|
||||
<el-table-column prop="site_id" label="站点ID" width="100"></el-table-column>
|
||||
<el-table-column prop="site_url" label="URL" min-width="300">
|
||||
<template slot-scope="scope">
|
||||
<span :title="scope.row.site_url">{{ scope.row.site_url }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="click_time" label="点击时间" width="180"></el-table-column>
|
||||
<el-table-column prop="device_type" label="设备类型" width="100" align="center"></el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="互动记录" name="interactions">
|
||||
<el-table :data="dbInteractions" style="width: 100%" v-loading="dbLoading">
|
||||
<el-table-column prop="id" label="ID" width="60"></el-table-column>
|
||||
<el-table-column prop="site_id" label="站点ID" width="100"></el-table-column>
|
||||
<el-table-column prop="interaction_time" label="互动时间" width="180"></el-table-column>
|
||||
<el-table-column prop="reply_content" label="发送内容" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip :content="scope.row.reply_content" placement="top">
|
||||
<span>{{ scope.row.reply_content ? scope.row.reply_content.substring(0, 30) + '...' : '-' }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="response_received" label="收到回复" width="100" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.response_received ? 'success' : 'info'" size="small">
|
||||
{{ scope.row.response_received ? '是' : '否' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="interaction_status" label="状态" width="100" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.interaction_status === 'success' ? 'success' : 'danger'" size="small">
|
||||
{{ scope.row.interaction_status || '-' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 浏览器测试 -->
|
||||
<div v-show="activeMenu === 'browser'">
|
||||
<div class="content-card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">AdsPower浏览器测试</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<el-alert
|
||||
title="此功能用于测试AdsPower浏览器连接是否正常"
|
||||
type="info"
|
||||
:closable="false"
|
||||
style="margin-bottom: 24px;">
|
||||
</el-alert>
|
||||
|
||||
<el-button type="primary" @click="testBrowser(false)">测试浏览器（不使用代理）</el-button>
|
||||
<el-button type="warning" @click="testBrowser(true)">测试浏览器（使用代理）</el-button>
|
||||
|
||||
<div v-if="browserTestResult" style="margin-top: 24px;">
|
||||
<el-alert :title="browserTestResult" type="info" :closable="false"></el-alert>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data() {
|
||||
return {
|
||||
activeMenu: 'dashboard',
|
||||
schedulerStatus: '系统运行中',
|
||||
loading: false,
|
||||
dbLoading: false,
|
||||
|
||||
// 统计数据
|
||||
stats: {
|
||||
totalUrls: 0,
|
||||
totalClicks: 0,
|
||||
totalReplies: 0,
|
||||
replyRate: '0%'
|
||||
},
|
||||
|
||||
// URL列表
|
||||
urlList: [],
|
||||
|
||||
// 表单
|
||||
singleUrl: '',
|
||||
batchUrls: '',
|
||||
|
||||
// 数据库统计
|
||||
dbStats: {
|
||||
totalSites: 0,
|
||||
totalClicks: 0,
|
||||
totalReplies: 0,
|
||||
successful: 0
|
||||
},
|
||||
|
||||
// 数据库数据
|
||||
dbActiveTab: 'sites',
|
||||
dbSites: [],
|
||||
dbClicks: [],
|
||||
dbInteractions: [],
|
||||
|
||||
// 浏览器测试
|
||||
browserTestResult: '',
|
||||
|
||||
// API地址
|
||||
apiBase: 'http://127.0.0.1:5000'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
await this.getSchedulerStatus();
|
||||
await this.getStatistics();
|
||||
await this.loadUrlList();
|
||||
|
||||
// 定时刷新
|
||||
setInterval(() => {
|
||||
this.getSchedulerStatus();
|
||||
this.getStatistics();
|
||||
if (this.activeMenu === 'dashboard') {
|
||||
this.loadUrlList();
|
||||
}
|
||||
}, 5000);
|
||||
},
|
||||
|
||||
handleMenuSelect(index) {
|
||||
this.activeMenu = index;
|
||||
if (index === 'database') {
|
||||
this.loadDatabaseData();
|
||||
}
|
||||
},
|
||||
|
||||
// 获取调度器状态
|
||||
async getSchedulerStatus() {
|
||||
try {
|
||||
const { data } = await axios.get(`${this.apiBase}/api/scheduler/status`);
|
||||
if (data.success) {
|
||||
this.schedulerStatus = data.data.status === 'running' ? '调度器运行中' : '调度器已停止';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取调度器状态失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 获取统计数据
|
||||
async getStatistics() {
|
||||
try {
|
||||
const { data } = await axios.get(`${this.apiBase}/api/statistics`);
|
||||
if (data.success) {
|
||||
this.stats = {
|
||||
totalUrls: data.data.total_sites || 0,
|
||||
totalClicks: data.data.total_clicks || 0,
|
||||
totalReplies: data.data.total_replies || 0,
|
||||
replyRate: data.data.reply_rate || '0%'
|
||||
};
|
||||
|
||||
this.dbStats = {
|
||||
totalSites: data.data.total_sites || 0,
|
||||
totalClicks: data.data.total_clicks || 0,
|
||||
totalReplies: data.data.total_replies || 0,
|
||||
successful: data.data.successful_interactions || 0
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取统计数据失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 加载URL列表
|
||||
async loadUrlList() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const { data } = await axios.get(`${this.apiBase}/api/urls`);
|
||||
if (data.success) {
|
||||
this.urlList = data.data || [];
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error('加载URL列表失败');
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 启动调度器
|
||||
async startScheduler() {
|
||||
try {
|
||||
const { data } = await axios.post(`${this.apiBase}/api/scheduler/start`);
|
||||
if (data.success) {
|
||||
this.$message.success('调度器已启动');
|
||||
this.getSchedulerStatus();
|
||||
} else {
|
||||
this.$message.error(data.message || '启动失败');
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error('启动失败: ' + error.message);
|
||||
}
|
||||
},
|
||||
|
||||
// 停止调度器
|
||||
async stopScheduler() {
|
||||
try {
|
||||
const { data } = await axios.post(`${this.apiBase}/api/scheduler/stop`);
|
||||
if (data.success) {
|
||||
this.$message.success('调度器已停止');
|
||||
this.getSchedulerStatus();
|
||||
} else {
|
||||
this.$message.error(data.message || '停止失败');
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error('停止失败: ' + error.message);
|
||||
}
|
||||
},
|
||||
|
||||
// 添加单个URL
|
||||
async addSingleUrl() {
|
||||
if (!this.singleUrl.trim()) {
|
||||
this.$message.warning('请输入链接');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const { data } = await axios.post(`${this.apiBase}/api/urls`, {
|
||||
url: this.singleUrl
|
||||
});
|
||||
|
||||
if (data.success) {
|
||||
this.$message.success('添加成功');
|
||||
this.singleUrl = '';
|
||||
this.loadUrlList();
|
||||
this.getStatistics();
|
||||
} else {
|
||||
this.$message.error(data.message || '添加失败');
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error('添加失败: ' + error.message);
|
||||
}
|
||||
},
|
||||
|
||||
// 批量添加URL
|
||||
async addBatchUrls() {
|
||||
if (!this.batchUrls.trim()) {
|
||||
this.$message.warning('请输入链接');
|
||||
return;
|
||||
}
|
||||
|
||||
const urls = this.batchUrls.split('\n').map(u => u.trim()).filter(u => u);
|
||||
if (urls.length === 0) {
|
||||
this.$message.warning('请输入有效链接');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const { data } = await axios.post(`${this.apiBase}/api/urls`, { urls });
|
||||
|
||||
if (data.success) {
|
||||
this.$message.success(`成功添加 ${data.added_count}/${data.total_count} 个链接`);
|
||||
this.batchUrls = '';
|
||||
this.loadUrlList();
|
||||
this.getStatistics();
|
||||
} else {
|
||||
this.$message.error(data.message || '添加失败');
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error('添加失败: ' + error.message);
|
||||
}
|
||||
},
|
||||
|
||||
// 重置URL
|
||||
async resetUrl(url) {
|
||||
try {
|
||||
await this.$confirm('确定要重置该链接吗？', '提示', {
|
||||
type: 'warning'
|
||||
});
|
||||
|
||||
const { data } = await axios.post(`${this.apiBase}/api/urls/${encodeURIComponent(url)}/reset`);
|
||||
|
||||
if (data.success) {
|
||||
this.$message.success('重置成功');
|
||||
this.loadUrlList();
|
||||
this.getStatistics();
|
||||
} else {
|
||||
this.$message.error(data.message || '重置失败');
|
||||
}
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
this.$message.error('重置失败');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 删除URL
|
||||
async deleteUrl(url) {
|
||||
try {
|
||||
await this.$confirm('确定要删除该链接吗？', '提示', {
|
||||
type: 'warning'
|
||||
});
|
||||
|
||||
const { data } = await axios.delete(`${this.apiBase}/api/urls/${encodeURIComponent(url)}`);
|
||||
|
||||
if (data.success) {
|
||||
this.$message.success('删除成功');
|
||||
this.loadUrlList();
|
||||
this.getStatistics();
|
||||
} else {
|
||||
this.$message.error(data.message || '删除失败');
|
||||
}
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
this.$message.error('删除失败');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 加载数据库数据
|
||||
async loadDatabaseData() {
|
||||
this.dbLoading = true;
|
||||
try {
|
||||
await Promise.all([
|
||||
this.loadDbSites(),
|
||||
this.loadDbClicks(),
|
||||
this.loadDbInteractions()
|
||||
]);
|
||||
} finally {
|
||||
this.dbLoading = false;
|
||||
}
|
||||
},
|
||||
|
||||
async loadDbSites() {
|
||||
try {
|
||||
const { data } = await axios.get(`${this.apiBase}/api/urls`);
|
||||
if (data.success) {
|
||||
this.dbSites = data.data || [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载站点数据失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
async loadDbClicks() {
|
||||
try {
|
||||
const { data } = await axios.get(`${this.apiBase}/api/clicks?limit=100`);
|
||||
if (data.success) {
|
||||
this.dbClicks = data.data || [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载点击记录失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
async loadDbInteractions() {
|
||||
try {
|
||||
const { data } = await axios.get(`${this.apiBase}/api/interactions?limit=100`);
|
||||
if (data.success) {
|
||||
this.dbInteractions = data.data || [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载互动记录失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
handleDbTabClick() {
|
||||
// 标签页切换时可以重新加载数据
|
||||
},
|
||||
|
||||
// 浏览器测试
|
||||
testBrowser(useProxy) {
|
||||
this.browserTestResult = '浏览器测试功能待开发，请使用命令行运行: python test_adspower_playwright.py';
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -24,6 +24,10 @@
|
||||
<span class="menu-icon">🔗</span>
|
||||
<span>链接管理</span>
|
||||
</div>
|
||||
<div class="menu-item" onclick="location.href='database.html'">
|
||||
<span class="menu-icon">💾</span>
|
||||
<span>数据库管理</span>
|
||||
</div>
|
||||
<div class="menu-item active" onclick="location.href='browser.html'">
|
||||
<span class="menu-icon">🌐</span>
|
||||
<span>浏览器测试</span>
|
||||
|
||||
@@ -24,6 +24,10 @@
|
||||
<span class="menu-icon">🔗</span>
|
||||
<span>链接管理</span>
|
||||
</div>
|
||||
<div class="menu-item" onclick="location.href='database.html'">
|
||||
<span class="menu-icon">💾</span>
|
||||
<span>数据库管理</span>
|
||||
</div>
|
||||
<div class="menu-item" onclick="location.href='browser.html'">
|
||||
<span class="menu-icon">🌐</span>
|
||||
<span>浏览器测试</span>
|
||||
|
||||
909
static/database.html
Normal file
909
static/database.html
Normal file
@@ -0,0 +1,909 @@
|
||||
<!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>
|
||||
@@ -414,6 +414,10 @@
|
||||
<span class="menu-icon">🔗</span>
|
||||
<span>链接管理</span>
|
||||
</div>
|
||||
<div class="menu-item" onclick="switchPage('database')">
|
||||
<span class="menu-icon">💾</span>
|
||||
<span>数据库管理</span>
|
||||
</div>
|
||||
<div class="menu-item" onclick="switchPage('browser')">
|
||||
<span class="menu-icon">🌐</span>
|
||||
<span>浏览器测试</span>
|
||||
@@ -543,6 +547,111 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据库管理页面 -->
|
||||
<div id="database" class="page-content">
|
||||
<!-- 统计卡片 -->
|
||||
<div class="stats-grid" style="margin-bottom: 24px;">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">总站点数</div>
|
||||
<div class="stat-value" id="dbTotalSites">-</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">总点击数</div>
|
||||
<div class="stat-value" id="dbTotalClicks">-</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">总回复数</div>
|
||||
<div class="stat-value" id="dbTotalReplies">-</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">成功互动</div>
|
||||
<div class="stat-value" id="dbSuccessful">-</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据表切换 -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div style="display: flex; gap: 12px;">
|
||||
<button class="btn btn-primary" id="btnShowSites" onclick="showDatabaseView('sites')">站点列表</button>
|
||||
<button class="btn" id="btnShowClicks" onclick="showDatabaseView('clicks')">点击记录</button>
|
||||
<button class="btn" id="btnShowInteractions" onclick="showDatabaseView('interactions')">互动记录</button>
|
||||
<button class="btn btn-success" onclick="refreshDatabaseData()" style="margin-left: auto;">🔄 刷新</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- 站点列表 -->
|
||||
<div id="dbSitesView" class="db-view">
|
||||
<div class="table-container">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>站点名称</th>
|
||||
<th>URL</th>
|
||||
<th>状态</th>
|
||||
<th>点击数</th>
|
||||
<th>回复数</th>
|
||||
<th>创建时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dbSitesTableBody">
|
||||
<tr>
|
||||
<td colspan="7" class="empty-state">加载中...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 点击记录 -->
|
||||
<div id="dbClicksView" class="db-view" style="display: none;">
|
||||
<div class="table-container">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>站点ID</th>
|
||||
<th>URL</th>
|
||||
<th>点击时间</th>
|
||||
<th>设备类型</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dbClicksTableBody">
|
||||
<tr>
|
||||
<td colspan="5" class="empty-state">加载中...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 互动记录 -->
|
||||
<div id="dbInteractionsView" class="db-view" style="display: none;">
|
||||
<div class="table-container">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>站点ID</th>
|
||||
<th>互动时间</th>
|
||||
<th>发送内容</th>
|
||||
<th>收到回复</th>
|
||||
<th>状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dbInteractionsTableBody">
|
||||
<tr>
|
||||
<td colspan="6" class="empty-state">加载中...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -565,9 +674,15 @@
|
||||
'dashboard': '数据概览',
|
||||
'scheduler': '调度器管理',
|
||||
'urls': '链接管理',
|
||||
'database': '数据库管理',
|
||||
'browser': '浏览器测试'
|
||||
};
|
||||
document.getElementById('breadcrumb').textContent = breadcrumbMap[page];
|
||||
|
||||
// 如果切换到数据库页面，加载数据
|
||||
if (page === 'database') {
|
||||
loadDatabaseData();
|
||||
}
|
||||
}
|
||||
|
||||
// 显示Toast提示
|
||||
@@ -822,6 +937,130 @@
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// ==================== 数据库管理相关函数 ====================
|
||||
|
||||
// 切换数据库视图
|
||||
function showDatabaseView(view) {
|
||||
// 隐藏所有视图
|
||||
document.querySelectorAll('.db-view').forEach(v => v.style.display = 'none');
|
||||
|
||||
// 显示目标视图
|
||||
document.getElementById(`db${view.charAt(0).toUpperCase() + view.slice(1)}View`).style.display = 'block';
|
||||
|
||||
// 更新按钮状态
|
||||
document.getElementById('btnShowSites').className = view === 'sites' ? 'btn btn-primary' : 'btn';
|
||||
document.getElementById('btnShowClicks').className = view === 'clicks' ? 'btn btn-primary' : 'btn';
|
||||
document.getElementById('btnShowInteractions').className = view === 'interactions' ? 'btn btn-primary' : 'btn';
|
||||
}
|
||||
|
||||
// 加载数据库数据
|
||||
async function loadDatabaseData() {
|
||||
try {
|
||||
// 加载统计数据
|
||||
const statsRes = await fetch(`${API_BASE}/api/statistics`);
|
||||
const statsData = await statsRes.json();
|
||||
|
||||
if (statsData.success) {
|
||||
const stats = statsData.data;
|
||||
document.getElementById('dbTotalSites').textContent = stats.total_sites || 0;
|
||||
document.getElementById('dbTotalClicks').textContent = stats.total_clicks || 0;
|
||||
document.getElementById('dbTotalReplies').textContent = stats.total_replies || 0;
|
||||
document.getElementById('dbSuccessful').textContent = stats.successful_interactions || 0;
|
||||
}
|
||||
|
||||
// 加载站点数据
|
||||
await loadDatabaseSites();
|
||||
await loadDatabaseClicks();
|
||||
await loadDatabaseInteractions();
|
||||
} catch (error) {
|
||||
showToast('加载数据库数据失败: ' + error.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// 加载站点列表
|
||||
async function loadDatabaseSites() {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/urls`);
|
||||
const data = await res.json();
|
||||
|
||||
const tbody = document.getElementById('dbSitesTableBody');
|
||||
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><a href="${site.site_url}" target="_blank" class="table-url" title="${site.site_url}">${site.site_url}</a></td>
|
||||
<td><span class="tag ${site.status === 'active' ? 'tag-success' : 'tag-error'}">${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">暂无站点数据</td></tr>';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载站点数据失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 加载点击记录
|
||||
async function loadDatabaseClicks() {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/clicks?limit=100`);
|
||||
const data = await res.json();
|
||||
|
||||
const tbody = document.getElementById('dbClicksTableBody');
|
||||
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="table-url" title="${click.site_url || ''}">${(click.site_url || '-').substring(0, 50)}...</span></td>
|
||||
<td>${click.click_time || '-'}</td>
|
||||
<td>${click.device_type || '-'}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
} else {
|
||||
tbody.innerHTML = '<tr><td colspan="5" class="empty-state">暂无点击记录</td></tr>';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载点击记录失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 加载互动记录
|
||||
async function loadDatabaseInteractions() {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/interactions?limit=100`);
|
||||
const data = await res.json();
|
||||
|
||||
const tbody = document.getElementById('dbInteractionsTableBody');
|
||||
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.interaction_time || '-'}</td>
|
||||
<td><span class="table-url" title="${interaction.reply_content || ''}">${(interaction.reply_content || '-').substring(0, 30)}...</span></td>
|
||||
<td><span class="tag ${interaction.response_received ? 'tag-success' : 'tag-error'}">${interaction.response_received ? '是' : '否'}</span></td>
|
||||
<td><span class="tag ${interaction.interaction_status === 'success' ? 'tag-success' : 'tag-error'}">${interaction.interaction_status || '-'}</span></td>
|
||||
</tr>
|
||||
`).join('');
|
||||
} else {
|
||||
tbody.innerHTML = '<tr><td colspan="6" class="empty-state">暂无互动记录</td></tr>';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载互动记录失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 刷新数据库数据
|
||||
function refreshDatabaseData() {
|
||||
showToast('正在刷新数据...', 'info');
|
||||
loadDatabaseData();
|
||||
}
|
||||
|
||||
// 初始化
|
||||
function init() {
|
||||
getSchedulerStatus();
|
||||
|
||||
@@ -24,6 +24,10 @@
|
||||
<span class="menu-icon">🔗</span>
|
||||
<span>链接管理</span>
|
||||
</div>
|
||||
<div class="menu-item" onclick="location.href='database.html'">
|
||||
<span class="menu-icon">💾</span>
|
||||
<span>数据库管理</span>
|
||||
</div>
|
||||
<div class="menu-item" onclick="location.href='browser.html'">
|
||||
<span class="menu-icon">🌐</span>
|
||||
<span>浏览器测试</span>
|
||||
|
||||
@@ -24,6 +24,10 @@
|
||||
<span class="menu-icon">🔗</span>
|
||||
<span>链接管理</span>
|
||||
</div>
|
||||
<div class="menu-item" onclick="location.href='database.html'">
|
||||
<span class="menu-icon">💾</span>
|
||||
<span>数据库管理</span>
|
||||
</div>
|
||||
<div class="menu-item" onclick="location.href='browser.html'">
|
||||
<span class="menu-icon">🌐</span>
|
||||
<span>浏览器测试</span>
|
||||
|
||||
Reference in New Issue
Block a user