mirror of
https://github.com/KingHWJ/WeReadBoard.git
synced 2026-11-03 18:24:58 +08:00
feat: add thoughts detail page, tab navigation, vertical ranking, back-to-top
1. Thoughts detail page: standalone full-page view replacing modal, classifies content into 3 categories (highlights/book reviews/thoughts) with filter tabs, visual badges, and chapter grouping 2. Tab navigation: sections converted from vertical scroll to horizontal tab switching with lazy-loaded charts 3. Reading ranking: changed from card grid to vertical list with smaller covers matching shelf size, gold/silver/bronze rank badges 4. Back-to-top button: floating button appears after scrolling 400px 5. Book detail modal: added 'View Thoughts' button to navigate to thoughts page
This commit is contained in:
admin committed
1 parent
4d8cc2a2d7
commit
7c918140b3
3 files changed
+840
-471
No files matched your search
+111
-114
@@ -29,17 +29,17 @@
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="nav-logo">
|
||||
<div class="nav-logo" onclick="switchTab('overview')" style="cursor:pointer">
|
||||
<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>
|
||||
<a href="#discover" class="nav-link">推荐</a>
|
||||
<a class="nav-link active" data-tab="overview" onclick="switchTab('overview')">总览</a>
|
||||
<a class="nav-link" data-tab="charts" onclick="switchTab('charts')">数据图表</a>
|
||||
<a class="nav-link" data-tab="top-books" onclick="switchTab('top-books')">读书排行</a>
|
||||
<a class="nav-link" data-tab="shelf" onclick="switchTab('shelf')">书架</a>
|
||||
<a class="nav-link" data-tab="notes" onclick="switchTab('notes')">笔记</a>
|
||||
<a class="nav-link" data-tab="discover" onclick="switchTab('discover')">推荐</a>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<span class="nav-update" id="fetchTime"></span>
|
||||
@@ -51,123 +51,125 @@
|
||||
</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>
|
||||
<!-- ===== 主视图（标签页切换） ===== -->
|
||||
<main id="mainView">
|
||||
|
||||
<!-- 核心数据卡片 -->
|
||||
<section class="stats-cards-section">
|
||||
<div class="container">
|
||||
<div class="stats-grid" id="statsGrid">
|
||||
<!-- 动态填充 -->
|
||||
<!-- 总览标签页 -->
|
||||
<section id="tab-overview" class="tab-panel active">
|
||||
<div 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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="stats-cards-section">
|
||||
<div class="container">
|
||||
<div class="stats-grid" id="statsGrid"></div>
|
||||
</div>
|
||||
</section>
|
||||
</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>
|
||||
<!-- 数据图表标签页 -->
|
||||
<section id="tab-charts" class="tab-panel">
|
||||
<div class="container" style="padding-top:40px;padding-bottom:60px">
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- 读书排行 -->
|
||||
<section id="top-books" class="top-books-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">🏆 阅读时长排行</h2>
|
||||
<div class="top-books-grid" id="topBooksGrid">
|
||||
<!-- 动态填充 -->
|
||||
<!-- 读书排行标签页 -->
|
||||
<section id="tab-top-books" class="tab-panel">
|
||||
<div class="container" style="padding-top:40px;padding-bottom:60px">
|
||||
<h2 class="section-title">🏆 阅读时长排行</h2>
|
||||
<div class="top-books-list" id="topBooksGrid"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</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>
|
||||
<!-- 书架标签页 -->
|
||||
<section id="tab-shelf" class="tab-panel">
|
||||
<div class="container" style="padding-top:40px;padding-bottom:60px">
|
||||
<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="shelf-info" id="shelfInfo"></div>
|
||||
<div class="book-grid" id="bookGrid"></div>
|
||||
<div class="pagination" id="pagination"></div>
|
||||
</div>
|
||||
<div class="book-grid" id="bookGrid">
|
||||
<!-- 动态填充 -->
|
||||
</div>
|
||||
<div class="pagination" id="pagination">
|
||||
<!-- 动态填充 -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- 笔记 -->
|
||||
<section id="notes" class="notes-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">✍️ 笔记概览</h2>
|
||||
<div class="notes-summary" id="notesSummary">
|
||||
<!-- 动态填充 -->
|
||||
<!-- 笔记标签页 -->
|
||||
<section id="tab-notes" class="tab-panel">
|
||||
<div class="container" style="padding-top:40px;padding-bottom:60px">
|
||||
<h2 class="section-title">✍️ 笔记概览</h2>
|
||||
<div class="notes-summary" id="notesSummary"></div>
|
||||
<div class="notebooks-grid" id="notebooksGrid"></div>
|
||||
</div>
|
||||
<div class="notebooks-grid" id="notebooksGrid">
|
||||
<!-- 动态填充 -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- 推荐发现 -->
|
||||
<section id="discover" class="discover-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">🔍 推荐发现</h2>
|
||||
<div class="discover-tabs">
|
||||
<button class="discover-tab active" id="tabRecommend" onclick="switchDiscoverTab('recommend')">为你推荐</button>
|
||||
<button class="discover-tab" id="tabSearch" onclick="switchDiscoverTab('search')">搜索书籍</button>
|
||||
</div>
|
||||
<!-- 推荐区 -->
|
||||
<div id="recommendPanel" class="discover-panel">
|
||||
<div class="discover-controls">
|
||||
<button class="btn-primary" onclick="loadRecommend(0)">刷新推荐</button>
|
||||
<button class="btn-secondary" onclick="loadMoreRecommend()">换一批</button>
|
||||
<!-- 推荐标签页 -->
|
||||
<section id="tab-discover" class="tab-panel">
|
||||
<div class="container" style="padding-top:40px;padding-bottom:60px">
|
||||
<h2 class="section-title">🔍 推荐发现</h2>
|
||||
<div class="discover-tabs">
|
||||
<button class="discover-tab active" id="tabRecommend" onclick="switchDiscoverTab('recommend')">为你推荐</button>
|
||||
<button class="discover-tab" id="tabSearch" onclick="switchDiscoverTab('search')">搜索书籍</button>
|
||||
</div>
|
||||
<div class="discover-grid" id="recommendGrid"></div>
|
||||
</div>
|
||||
<!-- 搜索区 -->
|
||||
<div id="searchPanel" class="discover-panel" style="display:none">
|
||||
<div class="search-box">
|
||||
<input type="text" id="searchInput" class="search-input" placeholder="输入书名、作者或关键词..." onkeydown="if(event.key==='Enter')doSearch()">
|
||||
<button class="btn-primary" onclick="doSearch()">搜索</button>
|
||||
<div id="recommendPanel" class="discover-panel">
|
||||
<div class="discover-controls">
|
||||
<button class="btn-primary" onclick="loadRecommend(0)">刷新推荐</button>
|
||||
<button class="btn-secondary" onclick="loadMoreRecommend()">换一批</button>
|
||||
</div>
|
||||
<div class="discover-grid" id="recommendGrid"></div>
|
||||
</div>
|
||||
<div class="discover-grid" id="searchGrid"></div>
|
||||
<div id="searchPanel" class="discover-panel" style="display:none">
|
||||
<div class="search-box">
|
||||
<input type="text" id="searchInput" class="search-input" placeholder="输入书名、作者或关键词..." onkeydown="if(event.key==='Enter')doSearch()">
|
||||
<button class="btn-primary" onclick="doSearch()">搜索</button>
|
||||
</div>
|
||||
<div class="discover-grid" id="searchGrid"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- ===== 想法详情独立页面 ===== -->
|
||||
<div id="thoughtsPage" class="thoughts-page" style="display:none">
|
||||
<div class="thoughts-page-header">
|
||||
<div class="container">
|
||||
<button class="back-btn" onclick="closeThoughtsPage()">← 返回</button>
|
||||
<div class="thoughts-book-header" id="thoughtsBookHeader"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="container thoughts-content" id="thoughtsContent">
|
||||
<div class="loading"><div class="loading-spinner"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 书籍详情弹窗 -->
|
||||
<div class="modal-overlay" id="bookDetailModal" onclick="closeModal('bookDetailModal')">
|
||||
@@ -177,13 +179,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 笔记详情弹窗 -->
|
||||
<div class="modal-overlay" id="notesDetailModal" onclick="closeModal('notesDetailModal')">
|
||||
<div class="modal-content notes-detail-modal" onclick="event.stopPropagation()">
|
||||
<span class="modal-close" onclick="closeModal('notesDetailModal')">×</span>
|
||||
<div id="notesDetailBody" class="modal-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 回到顶部按钮 -->
|
||||
<button id="backToTop" class="back-to-top" onclick="scrollToTop()" title="回到顶部" aria-label="回到顶部">↑</button>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="footer">
|
||||
|
||||
Reference in new issue
Block a user