WeReadBoard/templates/index.html

<!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>
    <!-- 防闪烁：在 CSS 加载后、页面渲染前设置主题 -->
    <script>
        (function() {
            var saved = localStorage.getItem('theme');
            if (saved) {
                document.documentElement.setAttribute('data-theme', saved);
            } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
                document.documentElement.setAttribute('data-theme', 'dark');
            }
        })();
    </script>
</head>
<body>
    <!-- 数据库连接告警横幅（MySQL 连接失败时显示） -->
    <div id="dbAlertBanner" class="db-alert-banner" style="display:none;">
        <span class="db-alert-icon">⚠️</span>
        <span class="db-alert-text">MySQL 数据库连接失败，数据可能无法正常加载。请检查 MySQL 服务是否已启动。</span>
        <span class="db-alert-detail" id="dbAlertDetail"></span>
    </div>

    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <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 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>
                <button class="theme-toggle" onclick="toggleTheme()" title="切换明亮/黑暗模式" aria-label="切换主题">
                    <span class="icon-sun">☀️</span>
                    <span class="icon-moon">🌙</span>
                </button>
            </div>
        </div>
    </nav>

    <!-- 顶部常驻搜索框 -->
    <div class="global-search-bar">
        <div class="container">
            <div class="global-search-wrapper">
                <span class="global-search-icon">🔍</span>
                <input type="text" id="globalSearchInput" class="global-search-input" placeholder="搜索图书..." onkeydown="if(event.key==='Enter')globalSearch()">
                <button class="global-search-btn" onclick="globalSearch()">搜索</button>
            </div>
        </div>
    </div>

    <!-- ===== 主视图（标签页切换） ===== -->
    <main id="mainView">

        <!-- 总览标签页 -->
        <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>
            <section class="stats-cards-section">
                <div class="container">
                    <div class="stats-grid" id="statsGrid"></div>
                </div>
            </section>
        </section>

        <!-- 数据图表标签页 -->
        <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>
        </section>

        <!-- 读书排行标签页 -->
        <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>
        </section>

        <!-- 书架标签页 -->
        <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-categories" id="shelfCategories"></div>
                <div class="book-grid" id="bookGrid"></div>
                <div class="pagination" id="pagination"></div>
            </div>
        </section>

        <!-- 笔记标签页 -->
        <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>
        </section>

        <!-- 推荐标签页 -->
        <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 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 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>
        <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')">
        <div class="modal-content book-detail-modal" onclick="event.stopPropagation()">
            <span class="modal-close" onclick="closeModal('bookDetailModal')">&times;</span>
            <div id="bookDetailBody" class="modal-body"></div>
        </div>
    </div>

    <!-- 回到顶部按钮 -->
    <button id="backToTop" class="back-to-top" onclick="scrollToTop()" title="回到顶部" aria-label="回到顶部">↑</button>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <p>数据来源：微信读书 · 数据存储：本地 MySQL · 更新时间：<span id="footerTime"></span></p>
            <p class="footer-hint">点击书籍封面可在微信读书 App 中打开</p>
        </div>
    </footer>

    <script src="/static/js/app.js"></script>
</body>
</html>