web/WeReadBoard
1
0 Fork 0
mirror of https://github.com/KingHWJ/WeReadBoard.git synced 2026-11-03 18:24:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: init weread data dashboard

Browse Source 
- 数据采集脚本 fetch_data.py：从微信读书 API 拉取书架、阅读统计、笔记数据存入 SQLite
- Flask 后端 app.py：提供 8 个 API 接口（总览、年度趋势、读书排行、偏好分类、偏好作者、时段分布、书架、笔记）
- 前端页面：ECharts 图表（年度趋势、时段分布、分类饼图、作者排行）、书架网格、笔记概览
- 数据规模：404 本书架、339 小时阅读、304 天阅读、1709 条笔记
This commit is contained in:
admin committed 2026-07-17 09:59:37 +08:00
commit 1e9c537b86
9 files changed
+2361
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

templates/index.html
+130
View File
@@ -0,0 +1,130 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的读书数据</title>
<link rel="stylesheet" href="/static/css/style.css">
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<div class="nav-container">
<div class="nav-logo">
<span class="logo-icon">📖</span>
<span class="logo-text">我的读书数据</span>
</div>
<div class="nav-links">
<a href="#overview" class="nav-link active">总览</a>
<a href="#charts" class="nav-link">数据图表</a>
<a href="#top-books" class="nav-link">读书排行</a>
<a href="#shelf" class="nav-link">书架</a>
<a href="#notes" class="nav-link">笔记</a>
</div>
<div class="nav-update" id="fetchTime"></div>
</div>
</nav>
<!-- Hero 总览区 -->
<section id="overview" class="hero-section">
<div class="hero-bg"></div>
<div class="hero-content">
<h1 class="hero-title">阅读，是一场漫长的旅行</h1>
<p class="hero-subtitle" id="heroSubtitle">正在加载数据...</p>
<div class="hero-stats" id="heroStats">
<!-- 动态填充 -->
</div>
</div>
</section>
<!-- 核心数据卡片 -->
<section class="stats-cards-section">
<div class="container">
<div class="stats-grid" id="statsGrid">
<!-- 动态填充 -->
</div>
</div>
</section>
<!-- 图表区 -->
<section id="charts" class="charts-section">
<div class="container">
<h2 class="section-title">📊 阅读数据可视化</h2>
<div class="charts-grid">
<div class="chart-card large">
<h3 class="chart-title">年度阅读时长趋势</h3>
<div id="chart-yearly" class="chart-container"></div>
</div>
<div class="chart-card">
<h3 class="chart-title">24小时阅读时段分布</h3>
<div id="chart-hours" class="chart-container"></div>
</div>
<div class="chart-card">
<h3 class="chart-title">偏好阅读分类</h3>
<div id="chart-categories" class="chart-container"></div>
</div>
<div class="chart-card large">
<h3 class="chart-title">偏好作者 TOP 10</h3>
<div id="chart-authors" class="chart-container"></div>
</div>
</div>
</div>
</section>
<!-- 读书排行 -->
<section id="top-books" class="top-books-section">
<div class="container">
<h2 class="section-title">🏆 阅读时长排行</h2>
<div class="top-books-grid" id="topBooksGrid">
<!-- 动态填充 -->
</div>
</div>
</section>
<!-- 书架 -->
<section id="shelf" class="shelf-section">
<div class="container">
<h2 class="section-title">📚 我的书架</h2>
<div class="shelf-controls">
<div class="shelf-filters">
<input type="text" id="shelfSearch" class="shelf-search" placeholder="搜索分类...">
<label class="filter-checkbox">
<input type="checkbox" id="finishedOnly"> 仅看已读完
</label>
</div>
<div class="shelf-info" id="shelfInfo"></div>
</div>
<div class="book-grid" id="bookGrid">
<!-- 动态填充 -->
</div>
<div class="pagination" id="pagination">
<!-- 动态填充 -->
</div>
</div>
</section>
<!-- 笔记 -->
<section id="notes" class="notes-section">
<div class="container">
<h2 class="section-title">✍️ 笔记概览</h2>
<div class="notes-summary" id="notesSummary">
<!-- 动态填充 -->
</div>
<div class="notebooks-grid" id="notebooksGrid">
<!-- 动态填充 -->
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<p>数据来源：微信读书 · 数据存储：本地 SQLite · 更新时间：<span id="footerTime"></span></p>
<p class="footer-hint">点击书籍封面可在微信读书 App 中打开</p>
</div>
</footer>
<script src="/static/js/app.js"></script>
</body>
</html>