hz4th_coder
e689fed71e
功能特性: - 前端文章展示 (Markdown渲染、代码高亮) - 后台管理系统 (文章、分类、标签、作者管理) - 图片上传 (点击、拖拽、粘贴) - 网站设置 (Logo、底部宣传图片上传) - 访问统计 (IP记录、趋势图表) - 参考来源、附件支持 - 单端口部署 (16012) 技术栈: - Flask 3.0 + SQLAlchemy - SQLite数据库 - marked.js + highlight.js (Markdown渲染) - Chart.js (统计图表)
158 lines
4.2 KiB
HTML
158 lines
4.2 KiB
HTML
{% extends 'admin/base.html' %}
|
|
|
|
{% block title %}访问统计{% endblock %}
|
|
{% block page_title %}访问统计{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="stats-overview">
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-icon">👁️</div>
|
|
<div class="stat-info">
|
|
<div class="stat-value">{{ stats.total_visits }}</div>
|
|
<div class="stat-label">总访问量</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-icon">📅</div>
|
|
<div class="stat-info">
|
|
<div class="stat-value">{{ stats.today_visits }}</div>
|
|
<div class="stat-label">今日访问</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-icon">🌐</div>
|
|
<div class="stat-info">
|
|
<div class="stat-value">{{ stats.unique_ips }}</div>
|
|
<div class="stat-label">独立访客</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats-tabs">
|
|
<a href="{{ url_for('admin.stats') }}" class="tab active">概览</a>
|
|
<a href="{{ url_for('admin.stats_charts') }}" class="tab">趋势图表</a>
|
|
<a href="{{ url_for('admin.stats_logs') }}" class="tab">访问日志</a>
|
|
</div>
|
|
|
|
<div class="stats-sections">
|
|
<!-- 热门IP -->
|
|
<div class="stats-section">
|
|
<h3>🔥 访问最多的IP (Top 10)</h3>
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>IP地址</th>
|
|
<th>访问次数</th>
|
|
<th>首次访问</th>
|
|
<th>最近访问</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for ip, count, first, last in top_ips %}
|
|
<tr>
|
|
<td>{{ ip }}</td>
|
|
<td>{{ count }}</td>
|
|
<td>{{ first|datetime_format('%Y-%m-%d %H:%M') }}</td>
|
|
<td>{{ last|datetime_format('%Y-%m-%d %H:%M') }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 热门文章 -->
|
|
<div class="stats-section">
|
|
<h3>📊 热门文章 (最近7天)</h3>
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>文章标题</th>
|
|
<th>浏览次数</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for article, views in top_articles %}
|
|
<tr>
|
|
<td>
|
|
<a href="{{ url_for('admin.article_edit', article_id=article.id) }}">
|
|
{{ article.title }}
|
|
</a>
|
|
</td>
|
|
<td>{{ views }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 热门路径 -->
|
|
<div class="stats-section">
|
|
<h3>📍 访问最多的路径</h3>
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>路径</th>
|
|
<th>访问次数</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for path, count in top_paths %}
|
|
<tr>
|
|
<td>{{ path }}</td>
|
|
<td>{{ count }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.stats-tabs {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.tab {
|
|
padding: 10px 20px;
|
|
background: var(--admin-card-bg);
|
|
border-radius: 5px;
|
|
color: var(--admin-text);
|
|
border: 1px solid var(--admin-border);
|
|
}
|
|
|
|
.tab:hover {
|
|
text-decoration: none;
|
|
background: var(--admin-primary);
|
|
color: #fff;
|
|
}
|
|
|
|
.tab.active {
|
|
background: var(--admin-primary);
|
|
color: #fff;
|
|
border-color: var(--admin-primary);
|
|
}
|
|
|
|
.stats-sections {
|
|
display: grid;
|
|
gap: 20px;
|
|
}
|
|
|
|
.stats-section {
|
|
background: var(--admin-card-bg);
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
box-shadow: var(--admin-shadow);
|
|
}
|
|
|
|
.stats-section h3 {
|
|
margin-bottom: 15px;
|
|
color: var(--admin-text);
|
|
}
|
|
</style>
|
|
{% endblock %} |