mirror of
https://github.com/KingHWJ/WeReadBoard.git
synced 2026-11-03 18:24:58 +08:00
feat: init weread data dashboard
- 数据采集脚本 fetch_data.py：从微信读书 API 拉取书架、阅读统计、笔记数据存入 SQLite - Flask 后端 app.py：提供 8 个 API 接口（总览、年度趋势、读书排行、偏好分类、偏好作者、时段分布、书架、笔记） - 前端页面：ECharts 图表（年度趋势、时段分布、分类饼图、作者排行）、书架网格、笔记概览 - 数据规模：404 本书架、339 小时阅读、304 天阅读、1709 条笔记
This commit is contained in:
admin committed
commit
1e9c537b86
9 files changed
+2361
No files matched your search
@@ -0,0 +1,708 @@
|
||||
/* ===== 全局变量 ===== */
|
||||
:root {
|
||||
--bg-primary: #f8f5f0;
|
||||
--bg-card: #ffffff;
|
||||
--bg-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
--text-primary: #2c2416;
|
||||
--text-secondary: #6b5d4f;
|
||||
--text-light: #9b8e80;
|
||||
--accent: #c17b4a;
|
||||
--accent-light: #e8a87c;
|
||||
--accent-dark: #a05c2c;
|
||||
--border: #e8e0d4;
|
||||
--shadow: 0 2px 12px rgba(44, 36, 22, 0.08);
|
||||
--shadow-hover: 0 8px 24px rgba(44, 36, 22, 0.15);
|
||||
--radius: 12px;
|
||||
--radius-sm: 8px;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
|
||||
"Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
/* ===== 导航栏 ===== */
|
||||
.navbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
text-decoration: none;
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
padding: 6px 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--accent);
|
||||
background: rgba(193, 123, 74, 0.08);
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
color: var(--accent);
|
||||
background: rgba(193, 123, 74, 0.12);
|
||||
}
|
||||
|
||||
.nav-update {
|
||||
font-size: 12px;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
/* ===== Hero 区 ===== */
|
||||
.hero-section {
|
||||
position: relative;
|
||||
padding: 80px 0 60px;
|
||||
overflow: hidden;
|
||||
background: var(--bg-hero);
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M50 25 L55 40 L70 40 L58 50 L63 65 L50 55 L37 65 L42 50 L30 40 L45 40 Z'/%3E%3C/g%3E%3C/svg%3E");
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 16px;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 48px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hero-stat {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-stat-value {
|
||||
font-size: 42px;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.hero-stat-label {
|
||||
font-size: 14px;
|
||||
opacity: 0.85;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* ===== 统计卡片 ===== */
|
||||
.stats-cards-section {
|
||||
padding: 40px 0 20px;
|
||||
margin-top: -40px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius);
|
||||
padding: 24px;
|
||||
box-shadow: var(--shadow);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
text-align: center;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-hover);
|
||||
}
|
||||
|
||||
.stat-card-icon {
|
||||
font-size: 32px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.stat-card-value {
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
color: var(--accent-dark);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-card-label {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.stat-card-sub {
|
||||
font-size: 12px;
|
||||
color: var(--text-light);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* ===== Section 标题 ===== */
|
||||
.section-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 32px;
|
||||
color: var(--text-primary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ===== 图表区 ===== */
|
||||
.charts-section {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.charts-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius);
|
||||
padding: 24px;
|
||||
box-shadow: var(--shadow);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.chart-card.large {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
/* ===== 读书排行 ===== */
|
||||
.top-books-section {
|
||||
padding: 60px 0;
|
||||
background: rgba(193, 123, 74, 0.04);
|
||||
}
|
||||
|
||||
.top-books-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.top-book-card {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
border: 1px solid var(--border);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.top-book-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-hover);
|
||||
}
|
||||
|
||||
.top-book-rank {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: #ffd700;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.top-book-cover {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.top-book-info {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.top-book-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.top-book-author {
|
||||
font-size: 12px;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.top-book-time {
|
||||
font-size: 13px;
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.top-book-tags {
|
||||
margin-top: 6px;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.top-book-tag {
|
||||
font-size: 11px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
background: rgba(193, 123, 74, 0.12);
|
||||
color: var(--accent-dark);
|
||||
}
|
||||
|
||||
/* ===== 书架 ===== */
|
||||
.shelf-section {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.shelf-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.shelf-filters {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.shelf-search {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 14px;
|
||||
width: 200px;
|
||||
background: var(--bg-card);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.shelf-search:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(193, 123, 74, 0.15);
|
||||
}
|
||||
|
||||
.filter-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.shelf-info {
|
||||
font-size: 13px;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.book-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.book-card {
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.book-card:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.book-cover-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 4;
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow);
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.book-cover-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.book-card:hover .book-cover-img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.book-finished-badge {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
background: #4caf50;
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.book-top-badge {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
background: rgba(255, 215, 0, 0.9);
|
||||
color: #5d4037;
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.book-title {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
margin-top: 8px;
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.book-author {
|
||||
font-size: 11px;
|
||||
color: var(--text-light);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ===== 分页 ===== */
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
padding: 8px 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--bg-card);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.page-btn:hover:not(:disabled) {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.page-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.page-btn.active {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 13px;
|
||||
color: var(--text-light);
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
/* ===== 笔记区 ===== */
|
||||
.notes-section {
|
||||
padding: 60px 0;
|
||||
background: rgba(193, 123, 74, 0.04);
|
||||
}
|
||||
|
||||
.notes-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.note-stat {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius);
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.note-stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
color: var(--accent-dark);
|
||||
}
|
||||
|
||||
.note-stat-label {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.notebooks-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.notebook-card {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius);
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
box-shadow: var(--shadow);
|
||||
border: 1px solid var(--border);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.notebook-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-hover);
|
||||
}
|
||||
|
||||
.notebook-cover {
|
||||
width: 60px;
|
||||
height: 80px;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.notebook-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.notebook-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.notebook-author {
|
||||
font-size: 12px;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.notebook-stats {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.notebook-stat-item {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.notebook-stat-item strong {
|
||||
color: var(--accent-dark);
|
||||
}
|
||||
|
||||
.notebook-progress {
|
||||
margin-top: 8px;
|
||||
height: 4px;
|
||||
background: var(--border);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.notebook-progress-bar {
|
||||
height: 100%;
|
||||
background: var(--accent);
|
||||
border-radius: 2px;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
/* ===== 页脚 ===== */
|
||||
.footer {
|
||||
padding: 40px 0;
|
||||
text-align: center;
|
||||
color: var(--text-light);
|
||||
font-size: 13px;
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.footer-hint {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* ===== 加载动画 ===== */
|
||||
.loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid var(--border);
|
||||
border-top-color: var(--accent);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* ===== 响应式 ===== */
|
||||
@media (max-width: 768px) {
|
||||
.nav-links {
|
||||
display: none;
|
||||
}
|
||||
.hero-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
.hero-stats {
|
||||
gap: 24px;
|
||||
}
|
||||
.hero-stat-value {
|
||||
font-size: 32px;
|
||||
}
|
||||
.charts-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.chart-card.large {
|
||||
grid-column: auto;
|
||||
}
|
||||
.book-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
.top-books-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,556 @@
|
||||
/* ===== 微信读书数据展示 - 前端逻辑 ===== */
|
||||
|
||||
const API_BASE = "";
|
||||
|
||||
// ===== 工具函数 =====
|
||||
async function fetchAPI(path) {
|
||||
const resp = await fetch(API_BASE + path);
|
||||
if (!resp.ok) throw new Error(`API error: ${resp.status}`);
|
||||
return resp.json();
|
||||
}
|
||||
|
||||
function formatHours(seconds) {
|
||||
if (!seconds) return "0";
|
||||
return (seconds / 3600).toFixed(1);
|
||||
}
|
||||
|
||||
// ===== 初始化 =====
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
loadOverview();
|
||||
loadYearlyTrend();
|
||||
loadTimeDistribution();
|
||||
loadCategories();
|
||||
loadAuthors();
|
||||
loadTopBooks();
|
||||
loadShelf(1);
|
||||
loadNotebooks();
|
||||
initNavScroll();
|
||||
});
|
||||
|
||||
// ===== 导航栏滚动高亮 =====
|
||||
function initNavScroll() {
|
||||
const links = document.querySelectorAll(".nav-link");
|
||||
const sections = document.querySelectorAll("section[id]");
|
||||
|
||||
window.addEventListener("scroll", () => {
|
||||
let current = "";
|
||||
sections.forEach((sec) => {
|
||||
const top = sec.offsetTop - 100;
|
||||
if (window.scrollY >= top) current = sec.id;
|
||||
});
|
||||
links.forEach((link) => {
|
||||
link.classList.toggle("active", link.getAttribute("href") === `#${current}`);
|
||||
});
|
||||
});
|
||||
|
||||
links.forEach((link) => {
|
||||
link.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(link.getAttribute("href"));
|
||||
if (target) {
|
||||
window.scrollTo({ top: target.offsetTop - 60, behavior: "smooth" });
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ===== 总览数据 =====
|
||||
async function loadOverview() {
|
||||
try {
|
||||
const data = await fetchAPI("/api/overview");
|
||||
|
||||
// Hero 统计
|
||||
const heroStats = document.getElementById("heroStats");
|
||||
heroStats.innerHTML = `
|
||||
<div class="hero-stat">
|
||||
<div class="hero-stat-value">${formatHours(data.total_read_time)}</div>
|
||||
<div class="hero-stat-label">累计阅读 (小时)</div>
|
||||
</div>
|
||||
<div class="hero-stat">
|
||||
<div class="hero-stat-value">${data.read_days}</div>
|
||||
<div class="hero-stat-label">阅读天数</div>
|
||||
</div>
|
||||
<div class="hero-stat">
|
||||
<div class="hero-stat-value">${data.shelf_count}</div>
|
||||
<div class="hero-stat-label">书架藏书</div>
|
||||
</div>
|
||||
<div class="hero-stat">
|
||||
<div class="hero-stat-value">${data.total_notes}</div>
|
||||
<div class="hero-stat-label">读书笔记</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.getElementById("heroSubtitle").textContent =
|
||||
`自 ${data.regist_time} 加入微信读书，已陪伴你 ${data.read_days} 个阅读的日子`;
|
||||
|
||||
// 统计卡片
|
||||
const statsGrid = document.getElementById("statsGrid");
|
||||
statsGrid.innerHTML = `
|
||||
<div class="stat-card">
|
||||
<div class="stat-card-icon">⏱️</div>
|
||||
<div class="stat-card-value">${data.total_read_time_str}</div>
|
||||
<div class="stat-card-label">累计阅读时长</div>
|
||||
<div class="stat-card-sub">今年: ${data.year_read_time_str}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card-icon">📅</div>
|
||||
<div class="stat-card-value">${data.read_days}</div>
|
||||
<div class="stat-card-label">累计阅读天数</div>
|
||||
<div class="stat-card-sub">今年: ${data.year_read_days} 天</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card-icon">📚</div>
|
||||
<div class="stat-card-value">${data.shelf_count}</div>
|
||||
<div class="stat-card-label">书架书籍</div>
|
||||
<div class="stat-card-sub">已读完: ${data.finished_count} 本</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card-icon">✍️</div>
|
||||
<div class="stat-card-value">${data.total_notes}</div>
|
||||
<div class="stat-card-label">读书笔记</div>
|
||||
<div class="stat-card-sub">来自 ${data.notebook_count} 本书</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 更新时间
|
||||
const timeStr = `数据更新: ${data.fetch_time}`;
|
||||
document.getElementById("fetchTime").textContent = timeStr;
|
||||
document.getElementById("footerTime").textContent = data.fetch_time;
|
||||
} catch (e) {
|
||||
console.error("加载总览失败:", e);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 年度趋势图 =====
|
||||
async function loadYearlyTrend() {
|
||||
try {
|
||||
const data = await fetchAPI("/api/yearly-trend");
|
||||
const chart = echarts.init(document.getElementById("chart-yearly"));
|
||||
|
||||
const years = data.map((d) => d.year);
|
||||
const hours = data.map((d) => d.hours);
|
||||
|
||||
chart.setOption({
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
formatter: (params) => {
|
||||
const p = params[0];
|
||||
return `${p.name}年<br/>阅读: <b>${p.value}</b> 小时`;
|
||||
},
|
||||
},
|
||||
grid: { left: 50, right: 30, top: 30, bottom: 40 },
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: years,
|
||||
axisLabel: { color: "#6b5d4f" },
|
||||
axisLine: { lineStyle: { color: "#e8e0d4" } },
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "小时",
|
||||
axisLabel: { color: "#6b5d4f" },
|
||||
splitLine: { lineStyle: { color: "#f0ebe3" } },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: hours,
|
||||
type: "bar",
|
||||
barWidth: "50%",
|
||||
itemStyle: {
|
||||
borderRadius: [8, 8, 0, 0],
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#e8a87c" },
|
||||
{ offset: 1, color: "#c17b4a" },
|
||||
],
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#6b5d4f",
|
||||
fontSize: 12,
|
||||
formatter: "{c}h",
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
window.addEventListener("resize", () => chart.resize());
|
||||
} catch (e) {
|
||||
console.error("加载年度趋势失败:", e);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 24小时时段分布 =====
|
||||
async function loadTimeDistribution() {
|
||||
try {
|
||||
const data = await fetchAPI("/api/time-distribution");
|
||||
const chart = echarts.init(document.getElementById("chart-hours"));
|
||||
|
||||
const hours = data.map((d) => `${d.hour}时`);
|
||||
const minutes = data.map((d) => d.duration_min);
|
||||
|
||||
chart.setOption({
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
formatter: (params) => {
|
||||
const p = params[0];
|
||||
return `${p.name}<br/>阅读: <b>${p.value}</b> 分钟`;
|
||||
},
|
||||
},
|
||||
grid: { left: 50, right: 20, top: 20, bottom: 40 },
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: hours,
|
||||
axisLabel: {
|
||||
color: "#6b5d4f",
|
||||
fontSize: 10,
|
||||
interval: 2,
|
||||
},
|
||||
axisLine: { lineStyle: { color: "#e8e0d4" } },
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "分钟",
|
||||
axisLabel: { color: "#6b5d4f" },
|
||||
splitLine: { lineStyle: { color: "#f0ebe3" } },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: minutes,
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "circle",
|
||||
symbolSize: 4,
|
||||
lineStyle: { width: 2, color: "#c17b4a" },
|
||||
itemStyle: { color: "#c17b4a" },
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "rgba(193,123,74,0.3)" },
|
||||
{ offset: 1, color: "rgba(193,123,74,0.02)" },
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
window.addEventListener("resize", () => chart.resize());
|
||||
} catch (e) {
|
||||
console.error("加载时段分布失败:", e);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 偏好分类 =====
|
||||
async function loadCategories() {
|
||||
try {
|
||||
const data = await fetchAPI("/api/categories");
|
||||
const chart = echarts.init(document.getElementById("chart-categories"));
|
||||
|
||||
const items = data.slice(0, 8).map((d) => ({
|
||||
name: d.category_title,
|
||||
value: d.reading_time,
|
||||
}));
|
||||
|
||||
chart.setOption({
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: (p) => {
|
||||
const hours = (p.value / 3600).toFixed(1);
|
||||
return `${p.name}<br/>阅读: <b>${hours}</b> 小时 (${p.percent}%)`;
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
type: "scroll",
|
||||
orient: "vertical",
|
||||
right: 10,
|
||||
top: 20,
|
||||
bottom: 20,
|
||||
textStyle: { color: "#6b5d4f", fontSize: 11 },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["40%", "70%"],
|
||||
center: ["35%", "50%"],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 6,
|
||||
borderColor: "#fff",
|
||||
borderWidth: 2,
|
||||
},
|
||||
label: { show: false },
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 14,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
},
|
||||
data: items,
|
||||
color: [
|
||||
"#c17b4a", "#e8a87c", "#d4a574", "#b8860b",
|
||||
"#cd853f", "#daa520", "#bc8f8f", "#bdb76b",
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
window.addEventListener("resize", () => chart.resize());
|
||||
} catch (e) {
|
||||
console.error("加载分类失败:", e);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 偏好作者 =====
|
||||
async function loadAuthors() {
|
||||
try {
|
||||
const data = await fetchAPI("/api/authors");
|
||||
const chart = echarts.init(document.getElementById("chart-authors"));
|
||||
|
||||
const top10 = data.slice(0, 10);
|
||||
const names = top10.map((d) => d.name);
|
||||
const counts = top10.map((d) => d.count);
|
||||
|
||||
chart.setOption({
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: { type: "shadow" },
|
||||
formatter: (params) => {
|
||||
const p = params[0];
|
||||
return `${p.name}<br/>阅读: <b>${p.value}</b> 本`;
|
||||
},
|
||||
},
|
||||
grid: { left: 100, right: 40, top: 20, bottom: 20 },
|
||||
xAxis: {
|
||||
type: "value",
|
||||
axisLabel: { color: "#6b5d4f" },
|
||||
splitLine: { lineStyle: { color: "#f0ebe3" } },
|
||||
},
|
||||
yAxis: {
|
||||
type: "category",
|
||||
data: names.reverse(),
|
||||
axisLabel: { color: "#6b5d4f", fontSize: 12 },
|
||||
axisLine: { lineStyle: { color: "#e8e0d4" } },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
data: counts.reverse(),
|
||||
barWidth: "50%",
|
||||
itemStyle: {
|
||||
borderRadius: [0, 6, 6, 0],
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0, y: 0, x2: 1, y2: 0,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#e8a87c" },
|
||||
{ offset: 1, color: "#c17b4a" },
|
||||
],
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
color: "#6b5d4f",
|
||||
fontSize: 12,
|
||||
formatter: "{c}本",
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
window.addEventListener("resize", () => chart.resize());
|
||||
} catch (e) {
|
||||
console.error("加载作者失败:", e);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 读书排行 =====
|
||||
async function loadTopBooks() {
|
||||
try {
|
||||
const data = await fetchAPI("/api/top-books");
|
||||
const grid = document.getElementById("topBooksGrid");
|
||||
|
||||
grid.innerHTML = data
|
||||
.map((book, i) => {
|
||||
const tagsHtml = book.tags
|
||||
.map((t) => `<span class="top-book-tag">${t}</span>`)
|
||||
.join("");
|
||||
return `
|
||||
<div class="top-book-card" onclick="openBook('${book.book_id}')">
|
||||
<div style="position:relative">
|
||||
<span class="top-book-rank">${i + 1}</span>
|
||||
<img class="top-book-cover" src="${book.cover}" alt="${book.title}"
|
||||
onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22160%22%3E%3Crect fill=%22%23e8e0d4%22 width=%22120%22 height=%22160%22/%3E%3Ctext x=%2260%22 y=%2280%22 text-anchor=%22middle%22 fill=%22%239b8e80%22 font-size=%2214%22%3E无封面%3C/text%3E%3C/svg%3E'">
|
||||
</div>
|
||||
<div class="top-book-info">
|
||||
<div class="top-book-title">${book.title}</div>
|
||||
<div class="top-book-author">${book.author}</div>
|
||||
<div class="top-book-time">⏱ ${book.read_time_str}</div>
|
||||
${tagsHtml ? `<div class="top-book-tags">${tagsHtml}</div>` : ""}
|
||||
</div>
|
||||
</div>`;
|
||||
})
|
||||
.join("");
|
||||
} catch (e) {
|
||||
console.error("加载排行失败:", e);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 书架 =====
|
||||
let shelfCurrentPage = 1;
|
||||
|
||||
async function loadShelf(page) {
|
||||
shelfCurrentPage = page;
|
||||
const search = document.getElementById("shelfSearch").value;
|
||||
const finished = document.getElementById("finishedOnly").checked ? "1" : "0";
|
||||
const params = new URLSearchParams({
|
||||
page: page,
|
||||
per_page: 60,
|
||||
category: search,
|
||||
finished: finished,
|
||||
});
|
||||
|
||||
try {
|
||||
const data = await fetchAPI(`/api/shelf?${params}`);
|
||||
const grid = document.getElementById("bookGrid");
|
||||
|
||||
document.getElementById("shelfInfo").textContent =
|
||||
`共 ${data.total} 本 · 第 ${page}/${data.total_pages} 页`;
|
||||
|
||||
grid.innerHTML = data.books
|
||||
.map((book) => {
|
||||
const badges = [];
|
||||
if (book.is_top) badges.push(`<span class="book-top-badge">置顶</span>`);
|
||||
if (book.finish_reading) badges.push(`<span class="book-finished-badge">已读完</span>`);
|
||||
return `
|
||||
<div class="book-card" onclick="openBook('${book.book_id}')">
|
||||
<div class="book-cover-wrapper">
|
||||
<img class="book-cover-img" src="${book.cover}" alt="${book.title}"
|
||||
onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22160%22%3E%3Crect fill=%22%23e8e0d4%22 width=%22120%22 height=%22160%22/%3E%3Ctext x=%2260%22 y=%2280%22 text-anchor=%22middle%22 fill=%22%239b8e80%22 font-size=%2212%22%3E无封面%3C/text%3E%3C/svg%3E'">
|
||||
${badges.join("")}
|
||||
</div>
|
||||
<div class="book-title">${book.title}</div>
|
||||
<div class="book-author">${book.author}</div>
|
||||
</div>`;
|
||||
})
|
||||
.join("");
|
||||
|
||||
// 分页
|
||||
renderPagination(page, data.total_pages);
|
||||
} catch (e) {
|
||||
console.error("加载书架失败:", e);
|
||||
}
|
||||
}
|
||||
|
||||
function renderPagination(current, total) {
|
||||
const pag = document.getElementById("pagination");
|
||||
if (total <= 1) {
|
||||
pag.innerHTML = "";
|
||||
return;
|
||||
}
|
||||
|
||||
let html = `<button class="page-btn" ${current <= 1 ? "disabled" : ""} onclick="loadShelf(${current - 1})">上一页</button>`;
|
||||
|
||||
const maxButtons = 7;
|
||||
let start = Math.max(1, current - 3);
|
||||
let end = Math.min(total, start + maxButtons - 1);
|
||||
start = Math.max(1, end - maxButtons + 1);
|
||||
|
||||
if (start > 1) {
|
||||
html += `<button class="page-btn" onclick="loadShelf(1)">1</button>`;
|
||||
if (start > 2) html += `<span class="page-info">...</span>`;
|
||||
}
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
html += `<button class="page-btn ${i === current ? "active" : ""}" onclick="loadShelf(${i})">${i}</button>`;
|
||||
}
|
||||
|
||||
if (end < total) {
|
||||
if (end < total - 1) html += `<span class="page-info">...</span>`;
|
||||
html += `<button class="page-btn" onclick="loadShelf(${total})">${total}</button>`;
|
||||
}
|
||||
|
||||
html += `<button class="page-btn" ${current >= total ? "disabled" : ""} onclick="loadShelf(${current + 1})">下一页</button>`;
|
||||
|
||||
pag.innerHTML = html;
|
||||
}
|
||||
|
||||
// 搜索和筛选事件
|
||||
document.getElementById("shelfSearch").addEventListener("input", debounce(() => loadShelf(1), 300));
|
||||
document.getElementById("finishedOnly").addEventListener("change", () => loadShelf(1));
|
||||
|
||||
function debounce(fn, delay) {
|
||||
let timer;
|
||||
return (...args) => {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => fn(...args), delay);
|
||||
};
|
||||
}
|
||||
|
||||
// ===== 笔记概览 =====
|
||||
async function loadNotebooks() {
|
||||
try {
|
||||
const data = await fetchAPI("/api/notebooks");
|
||||
const summary = document.getElementById("notesSummary");
|
||||
|
||||
const totalHighlights = data.reduce((s, d) => s + d.note_count, 0);
|
||||
const totalReviews = data.reduce((s, d) => s + d.review_count, 0);
|
||||
const totalBookmarks = data.reduce((s, d) => s + d.bookmark_count, 0);
|
||||
|
||||
summary.innerHTML = `
|
||||
<div class="note-stat">
|
||||
<div class="note-stat-value">${data.length}</div>
|
||||
<div class="note-stat-label">有笔记的书</div>
|
||||
</div>
|
||||
<div class="note-stat">
|
||||
<div class="note-stat-value">${totalHighlights}</div>
|
||||
<div class="note-stat-label">划线</div>
|
||||
</div>
|
||||
<div class="note-stat">
|
||||
<div class="note-stat-value">${totalReviews}</div>
|
||||
<div class="note-stat-label">想法/点评</div>
|
||||
</div>
|
||||
<div class="note-stat">
|
||||
<div class="note-stat-value">${totalBookmarks}</div>
|
||||
<div class="note-stat-label">书签</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const grid = document.getElementById("notebooksGrid");
|
||||
grid.innerHTML = data
|
||||
.map((nb) => {
|
||||
const progress = nb.reading_progress || 0;
|
||||
return `
|
||||
<div class="notebook-card">
|
||||
<img class="notebook-cover" src="${nb.cover}" alt="${nb.title}"
|
||||
onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2280%22%3E%3Crect fill=%22%23e8e0d4%22 width=%2260%22 height=%2280%22/%3E%3C/svg%3E'">
|
||||
<div class="notebook-info">
|
||||
<div class="notebook-title">${nb.title}</div>
|
||||
<div class="notebook-author">${nb.author}</div>
|
||||
<div class="notebook-stats">
|
||||
<span class="notebook-stat-item">划线 <strong>${nb.note_count}</strong></span>
|
||||
<span class="notebook-stat-item">想法 <strong>${nb.review_count}</strong></span>
|
||||
<span class="notebook-stat-item">书签 <strong>${nb.bookmark_count}</strong></span>
|
||||
</div>
|
||||
<div class="notebook-progress">
|
||||
<div class="notebook-progress-bar" style="width: ${progress}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
})
|
||||
.join("");
|
||||
} catch (e) {
|
||||
console.error("加载笔记失败:", e);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 打开书籍 =====
|
||||
function openBook(bookId) {
|
||||
if (bookId) {
|
||||
window.open(`weread://reading?bId=${bookId}`, "_blank");
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user