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

static/css/style.css

@@ -430,102 +430,117 @@ body {
     height: 320px;
 }
 
-/* ===== 读书排行 ===== */
+/* ===== 标签页切换 ===== */
-.top-books-section {
+.tab-panel {
-    padding: 60px 0;
+    display: none;
-    background: var(--accent-bg);
+    animation: fadeInTab 0.3s ease;
-    transition: background-color 0.3s ease;
 }
 
-.top-books-grid {
+.tab-panel.active {
-    display: grid;
+    display: block;
-    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-    gap: 20px;
 }
 
-.top-book-card {
+@keyframes fadeInTab {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* ===== 读书排行（竖向列表） ===== */
+.top-books-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.top-book-row {
+    display: flex;
+    align-items: center;
+    gap: 16px;
     background: var(--bg-card);
     border-radius: var(--radius);
-    overflow: hidden;
+    padding: 12px 16px;
     box-shadow: var(--shadow);
-    transition: transform 0.2s, box-shadow 0.3s, background-color 0.3s, border-color 0.3s;
     border: 1px solid var(--border);
     cursor: pointer;
+    transition: transform 0.2s, box-shadow 0.3s, background-color 0.3s, border-color 0.3s;
 }
 
-.top-book-card:hover {
+.top-book-row:hover {
-    transform: translateY(-4px);
+    transform: translateX(4px);
     box-shadow: var(--shadow-hover);
+    border-color: var(--accent);
 }
 
-.top-book-rank {
+.top-book-rank-num {
-    position: absolute;
+    flex-shrink: 0;
-    top: 8px;
+    width: 36px;
-    left: 8px;
+    height: 36px;
-    background: var(--rank-bg);
-    color: var(--rank-text);
-    width: 28px;
-    height: 28px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 14px;
+    font-size: 16px;
-    font-weight: 700;
+    font-weight: 800;
-    z-index: 5;
+    background: var(--accent-bg);
+    color: var(--accent-dark);
 }
 
-.top-book-cover-wrapper {
+.top-book-row:nth-child(1) .top-book-rank-num {
-    position: relative;
+    background: linear-gradient(135deg, #ffd700, #ffa500);
-    width: 100%;
+    color: #fff;
-    aspect-ratio: 3 / 4;
+}
-    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+
-    overflow: hidden;
+.top-book-row:nth-child(2) .top-book-rank-num {
+    background: linear-gradient(135deg, #c0c0c0, #a8a8a8);
+    color: #fff;
+}
+
+.top-book-row:nth-child(3) .top-book-rank-num {
+    background: linear-gradient(135deg, #cd7f32, #b87333);
+    color: #fff;
+}
+
+.top-book-mini-cover {
+    flex-shrink: 0;
+    width: 48px;
+    height: 64px;
+    border-radius: 6px;
+    object-fit: cover;
+    box-shadow: var(--shadow);
     background: var(--bg-primary);
 }
 
-.top-book-cover {
+.top-book-row-info {
-    width: 100%;
+    flex: 1;
-    height: 100%;
+    min-width: 0;
-    object-fit: cover;
-    transition: transform 0.3s;
 }
 
-.top-book-card:hover .top-book-cover {
+.top-book-row-title {
-    transform: scale(1.05);
+    font-size: 15px;
-}
-
-.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 {
+.top-book-row-meta {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-top: 4px;
     font-size: 12px;
     color: var(--text-light);
-    margin-bottom: 8px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
 }
 
-.top-book-time {
+.top-book-row-time {
     font-size: 13px;
     color: var(--accent);
     font-weight: 600;
+    flex-shrink: 0;
 }
 
-.top-book-tags {
+.top-book-row-tags {
-    margin-top: 6px;
     display: flex;
     gap: 4px;
     flex-wrap: wrap;
@@ -1354,6 +1369,324 @@ body {
     font-size: 14px;
 }
 
+/* ===== 想法详情独立页面 ===== */
+.thoughts-page {
+    min-height: 100vh;
+    background: var(--bg-primary);
+}
+
+.thoughts-page-header {
+    background: var(--bg-card);
+    border-bottom: 1px solid var(--border);
+    box-shadow: var(--shadow);
+    padding: 16px 0 20px;
+    position: sticky;
+    top: 60px;
+    z-index: 50;
+}
+
+.back-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 16px;
+    border: 1px solid var(--border);
+    border-radius: 20px;
+    background: var(--bg-card);
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    transition: all 0.2s;
+    margin-bottom: 16px;
+}
+
+.back-btn:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+    background: var(--accent-bg);
+}
+
+.thoughts-book-header {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+}
+
+.thoughts-book-cover {
+    width: 64px;
+    height: 85px;
+    border-radius: 8px;
+    object-fit: cover;
+    flex-shrink: 0;
+    box-shadow: var(--shadow);
+}
+
+.thoughts-book-title {
+    font-size: 20px;
+    font-weight: 700;
+    color: var(--text-primary);
+}
+
+.thoughts-book-author {
+    font-size: 13px;
+    color: var(--text-light);
+    margin-top: 4px;
+}
+
+.thoughts-book-stats {
+    display: flex;
+    gap: 16px;
+    margin-top: 8px;
+    font-size: 13px;
+    color: var(--text-secondary);
+}
+
+.thoughts-book-stats strong {
+    color: var(--accent-dark);
+}
+
+/* 想法页面分类筛选 */
+.thoughts-filters {
+    display: flex;
+    gap: 8px;
+    margin: 24px 0 20px;
+    flex-wrap: wrap;
+}
+
+.thought-filter-btn {
+    padding: 6px 18px;
+    border: 1px solid var(--border);
+    border-radius: 20px;
+    background: var(--bg-card);
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.thought-filter-btn .filter-count {
+    font-size: 12px;
+    background: var(--accent-bg);
+    color: var(--accent-dark);
+    padding: 1px 8px;
+    border-radius: 10px;
+}
+
+.thought-filter-btn.active {
+    background: var(--accent);
+    color: #fff;
+    border-color: var(--accent);
+}
+
+.thought-filter-btn.active .filter-count {
+    background: rgba(255,255,255,0.25);
+    color: #fff;
+}
+
+.thought-filter-btn:hover:not(.active) {
+    border-color: var(--accent);
+    color: var(--accent);
+}
+
+/* 分类区块标题 */
+.thoughts-section-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin: 28px 0 16px;
+    padding-bottom: 10px;
+    border-bottom: 2px solid var(--border);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.thoughts-section-title .section-badge {
+    font-size: 12px;
+    font-weight: 600;
+    padding: 2px 10px;
+    border-radius: 10px;
+}
+
+.badge-highlight {
+    background: var(--accent-bg-hover);
+    color: var(--accent-dark);
+}
+
+.badge-review {
+    background: var(--rating-bg);
+    color: var(--rating-color);
+}
+
+.badge-thought {
+    background: rgba(76, 175, 80, 0.12);
+    color: #4caf50;
+}
+
+[data-theme="dark"] .badge-thought {
+    background: rgba(76, 175, 80, 0.15);
+    color: #66bb6a;
+}
+
+/* 划线条目 */
+.thought-highlight-item {
+    padding: 14px 18px;
+    background: var(--chart-highlight-bg);
+    border-radius: var(--radius-sm);
+    margin-bottom: 10px;
+    font-size: 15px;
+    color: var(--text-primary);
+    line-height: 1.8;
+    border-left: 4px solid var(--accent-light);
+    transition: background-color 0.3s;
+}
+
+.thought-highlight-meta {
+    font-size: 12px;
+    color: var(--text-light);
+    margin-top: 8px;
+    display: flex;
+    gap: 12px;
+}
+
+/* 书评条目 */
+.thought-review-item {
+    padding: 16px 20px;
+    background: var(--chart-review-bg);
+    border-radius: var(--radius-sm);
+    margin-bottom: 10px;
+    font-size: 15px;
+    color: var(--text-primary);
+    line-height: 1.8;
+    border-left: 4px solid var(--rating-star);
+    transition: background-color 0.3s;
+}
+
+.thought-review-stars {
+    color: var(--rating-star);
+    font-size: 14px;
+    margin-bottom: 6px;
+}
+
+.thought-review-meta {
+    font-size: 12px;
+    color: var(--text-light);
+    margin-top: 8px;
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+/* 想法条目 */
+.thought-thought-item {
+    padding: 16px 20px;
+    background: var(--bg-card);
+    border-radius: var(--radius-sm);
+    margin-bottom: 10px;
+    border-left: 4px solid #4caf50;
+    transition: background-color 0.3s, border-color 0.3s;
+}
+
+[data-theme="dark"] .thought-thought-item {
+    border-left-color: #66bb6a;
+}
+
+.thought-thought-abstract {
+    font-size: 13px;
+    color: var(--text-light);
+    background: var(--bg-secondary);
+    padding: 8px 12px;
+    border-radius: 6px;
+    margin-bottom: 10px;
+    line-height: 1.6;
+    border-left: 3px solid var(--border);
+}
+
+.thought-thought-content {
+    font-size: 15px;
+    color: var(--text-primary);
+    line-height: 1.8;
+}
+
+.thought-thought-meta {
+    font-size: 12px;
+    color: var(--text-light);
+    margin-top: 8px;
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+.thoughts-empty {
+    text-align: center;
+    padding: 60px 0;
+    color: var(--text-light);
+    font-size: 15px;
+}
+
+/* 章节分组 */
+.thoughts-chapter-group {
+    margin-bottom: 24px;
+}
+
+.thoughts-chapter-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--accent-dark);
+    margin-bottom: 10px;
+    padding: 6px 0 6px 12px;
+    border-left: 4px solid var(--accent);
+}
+
+/* ===== 回到顶部按钮 ===== */
+.back-to-top {
+    position: fixed;
+    bottom: 32px;
+    right: 32px;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: var(--accent);
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    font-size: 22px;
+    line-height: 1;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+    z-index: 90;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(20px);
+    transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background-color 0.3s;
+}
+
+.back-to-top.visible {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.back-to-top:hover {
+    background: var(--accent-dark);
+    transform: translateY(-2px);
+}
+
+/* 书籍详情弹窗 - 查看想法按钮 */
+.detail-action-thoughts {
+    background: var(--bg-card);
+    border: 1px solid var(--accent);
+    color: var(--accent);
+}
+
+.detail-action-thoughts:hover {
+    background: var(--accent-bg);
+}
+
 /* ===== 响应式 ===== */
 @media (max-width: 768px) {
     .nav-links {
@@ -1378,10 +1711,40 @@ body {
         grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
         gap: 12px;
     }
-    .top-books-grid {
+    .top-books-list {
-        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+        gap: 8px;
+    }
+    .top-book-row {
+        padding: 8px 12px;
+        gap: 10px;
+    }
+    .top-book-mini-cover {
+        width: 36px;
+        height: 48px;
+    }
+    .top-book-rank-num {
+        width: 28px;
+        height: 28px;
+        font-size: 13px;
     }
     .nav-update {
         display: none;
     }
+    .back-to-top {
+        bottom: 20px;
+        right: 20px;
+        width: 40px;
+        height: 40px;
+        font-size: 18px;
+    }
+    .thoughts-page-header {
+        top: 0;
+    }
+    .thoughts-book-cover {
+        width: 48px;
+        height: 64px;
+    }
+    .thoughts-book-title {
+        font-size: 16px;
+    }
 }

static/js/app.js

@@ -4,18 +4,10 @@ const API_BASE = "";
 
 // ===== 主题管理 =====
 
-/**
- * 获取当前主题。
- * @returns {"light"|"dark"}
- */
 function getCurrentTheme() {
     return document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light";
 }
 
-/**
- * 切换明亮/黑暗主题。
- * 持久化到 localStorage，并触发图表重绘。
- */
 function toggleTheme() {
     const newTheme = getCurrentTheme() === "dark" ? "light" : "dark";
     document.documentElement.setAttribute("data-theme", newTheme);
@@ -23,9 +15,6 @@ function toggleTheme() {
     refreshChartsForTheme();
 }
 
-/**
- * 从 CSS 变量读取当前主题的颜色值，供 ECharts 使用。
- */
 function getChartColors() {
     const cs = getComputedStyle(document.documentElement);
     return {
@@ -45,13 +34,6 @@ function getChartColors() {
 
 // ===== 工具函数 =====
 
-/**
- * 升级微信读书封面图 URL 到高清晰度版本。
- * 微信读书 CDN 的封面图通过文件名前缀区分分辨率：
- *   t6_ = 低清缩略图（~150px，Retina 屏模糊）
- *   t8_ = 高清版（~500px，适合 2x/3x 屏幕）
- * 如果 URL 不含 t6_ 前缀或已是高清则原样返回。
- */
 function hdCover(url) {
     if (!url) return "";
     return url.replace("/t6_", "/t8_");
@@ -68,55 +50,47 @@ function formatHours(seconds) {
     return (seconds / 3600).toFixed(1);
 }
 
+function escapeHtml(text) {
+    if (!text) return "";
+    const div = document.createElement("div");
+    div.textContent = text;
+    return div.innerHTML;
+}
+
 // ===== 数据库健康检查 =====
 
-// 存储所有 ECharts 实例，用于主题切换时重绘
 const chartInstances = {};
+let chartsLoaded = false;
+let currentThoughtsData = null;
 
-/**
- * 主题切换后重绘所有 ECharts 图表。
- */
 function refreshChartsForTheme() {
+    if (!chartsLoaded) return;
     Object.values(chartInstances).forEach((chart) => {
-        if (chart && !chart.isDisposed()) {
+        if (chart && !chart.isDisposed()) chart.dispose();
-            chart.dispose();
-        }
     });
-    // 重新加载所有图表
     loadYearlyTrend();
     loadTimeDistribution();
     loadCategories();
     loadAuthors();
 }
 
-/**
- * 页面加载时检查 MySQL 数据库连接状态。
- * 如果连接失败，显示告警横幅并阻止后续数据加载。
- */
 async function checkDBHealth() {
     try {
         const resp = await fetch(API_BASE + "/api/health");
         const data = await resp.json();
         if (resp.ok && data.database === "connected") {
-            // 数据库连接正常，隐藏告警横幅
             document.getElementById("dbAlertBanner").style.display = "none";
             return true;
         } else {
-            // 数据库连接异常，显示告警横幅
             showDBAlert(data.message || "数据库连接失败");
             return false;
         }
     } catch (error) {
-        // 健康检查接口本身无法访问
         showDBAlert("无法连接到服务器，请检查后端服务是否运行。");
         return false;
     }
 }
 
-/**
- * 显示数据库连接告警横幅。
- * @param {string} message - 告警详情信息
- */
 function showDBAlert(message) {
     const banner = document.getElementById("dbAlertBanner");
     const detail = document.getElementById("dbAlertDetail");
@@ -124,61 +98,78 @@ function showDBAlert(message) {
     if (detail) detail.textContent = message;
 }
 
-// ===== 初始化 =====
+// ===== 标签页切换 =====
-document.addEventListener("DOMContentLoaded", async () => {
+
-    // 首先检查数据库连接状态
+function switchTab(tabName) {
-    const isHealthy = await checkDBHealth();
+    document.querySelectorAll(".tab-panel").forEach((panel) => {
-    if (!isHealthy) {
+        panel.classList.remove("active");
-        // 数据库连接失败，不加载后续数据
+    });
-        return;
+    document.querySelectorAll(".nav-link").forEach((link) => {
+        link.classList.toggle("active", link.dataset.tab === tabName);
+    });
+
+    const target = document.getElementById(`tab-${tabName}`);
+    if (target) {
+        target.classList.add("active");
     }
 
-    // 数据库连接正常，加载所有数据模块
+    window.scrollTo({ top: 0, behavior: "smooth" });
+
+    // 懒加载图表
+    if (tabName === "charts" && !chartsLoaded) {
+        chartsLoaded = true;
+        loadYearlyTrend();
+        loadTimeDistribution();
+        loadCategories();
+        loadAuthors();
+    }
+
+    // 切换到图表时重绘尺寸
+    if (tabName === "charts" && chartsLoaded) {
+        setTimeout(() => {
+            Object.values(chartInstances).forEach((chart) => {
+                if (chart && !chart.isDisposed()) chart.resize();
+            });
+        }, 100);
+    }
+}
+
+// ===== 回到顶部按钮 =====
+
+function initBackToTop() {
+    const btn = document.getElementById("backToTop");
+    window.addEventListener("scroll", () => {
+        btn.classList.toggle("visible", window.scrollY > 400);
+    });
+}
+
+function scrollToTop() {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+}
+
+// ===== 初始化 =====
+
+document.addEventListener("DOMContentLoaded", async () => {
+    const isHealthy = await checkDBHealth();
+    if (!isHealthy) return;
+
     loadOverview();
-    loadYearlyTrend();
-    loadTimeDistribution();
-    loadCategories();
-    loadAuthors();
     loadTopBooks();
     loadShelf(1);
     loadNotebooks();
     loadRecommend(0);
-    initNavScroll();
+    initBackToTop();
+
+    // 搜索和筛选事件
+    document.getElementById("shelfSearch").addEventListener("input", debounce(() => loadShelf(1), 300));
+    document.getElementById("finishedOnly").addEventListener("change", () => loadShelf(1));
 });
 
-// ===== 导航栏滚动高亮 =====
-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">
@@ -202,7 +193,6 @@ async function loadOverview() {
         document.getElementById("heroSubtitle").textContent =
             `自 ${data.regist_time} 加入微信读书，已陪伴你 ${data.read_days} 个阅读的日子`;
 
-        // 统计卡片
         const statsGrid = document.getElementById("statsGrid");
         statsGrid.innerHTML = `
             <div class="stat-card">
@@ -231,7 +221,6 @@ async function loadOverview() {
             </div>
         `;
 
-        // 更新时间
         const timeStr = `数据更新: ${data.fetch_time}`;
         document.getElementById("fetchTime").textContent = timeStr;
         document.getElementById("footerTime").textContent = data.fetch_time;
@@ -278,31 +267,20 @@ async function loadYearlyTrend() {
                 axisLabel: { color: c.axis },
                 splitLine: { lineStyle: { color: c.splitLine } },
             },
-            series: [
+            series: [{
-                {
+                data: hours,
-                    data: hours,
+                type: "bar",
-                    type: "bar",
+                barWidth: "50%",
-                    barWidth: "50%",
+                itemStyle: {
-                    itemStyle: {
+                    borderRadius: [8, 8, 0, 0],
-                        borderRadius: [8, 8, 0, 0],
+                    color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1,
-                        color: {
+                        colorStops: [
-                            type: "linear",
+                            { offset: 0, color: c.accentLight },
-                            x: 0, y: 0, x2: 0, y2: 1,
+                            { offset: 1, color: c.accent },
-                            colorStops: [
+                        ] },
-                                { offset: 0, color: c.accentLight },
-                                { offset: 1, color: c.accent },
-                            ],
-                        },
-                    },
-                    label: {
-                        show: true,
-                        position: "top",
-                        color: c.label,
-                        fontSize: 12,
-                        formatter: "{c}h",
-                    },
                 },
-            ],
+                label: { show: true, position: "top", color: c.label, fontSize: 12, formatter: "{c}h" },
+            }],
         });
         window.addEventListener("resize", () => chart.resize());
     } catch (e) {
@@ -338,11 +316,7 @@ async function loadTimeDistribution() {
             xAxis: {
                 type: "category",
                 data: hours,
-                axisLabel: {
+                axisLabel: { color: c.axis, fontSize: 10, interval: 2 },
-                    color: c.axis,
-                    fontSize: 10,
-                    interval: 2,
-                },
                 axisLine: { lineStyle: { color: c.axisLine } },
             },
             yAxis: {
@@ -352,27 +326,22 @@ async function loadTimeDistribution() {
                 axisLabel: { color: c.axis },
                 splitLine: { lineStyle: { color: c.splitLine } },
             },
-            series: [
+            series: [{
-                {
+                data: minutes,
-                    data: minutes,
+                type: "line",
-                    type: "line",
+                smooth: true,
-                    smooth: true,
+                symbol: "circle",
-                    symbol: "circle",
+                symbolSize: 4,
-                    symbolSize: 4,
+                lineStyle: { width: 2, color: c.accent },
-                    lineStyle: { width: 2, color: c.accent },
+                itemStyle: { color: c.accent },
-                    itemStyle: { color: c.accent },
+                areaStyle: {
-                    areaStyle: {
+                    color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1,
-                        color: {
+                        colorStops: [
-                            type: "linear",
+                            { offset: 0, color: c.accent + "4D" },
-                            x: 0, y: 0, x2: 0, y2: 1,
+                            { offset: 1, color: c.accent + "05" },
-                            colorStops: [
+                        ] },
-                                { offset: 0, color: c.accent + "4D" },
-                                { offset: 1, color: c.accent + "05" },
-                            ],
-                        },
-                    },
                 },
-            ],
+            }],
         });
         window.addEventListener("resize", () => chart.resize());
     } catch (e) {
@@ -414,33 +383,19 @@ async function loadCategories() {
                 bottom: 20,
                 textStyle: { color: c.label, fontSize: 11 },
             },
-            series: [
+            series: [{
-                {
+                type: "pie",
-                    type: "pie",
+                radius: ["40%", "70%"],
-                    radius: ["40%", "70%"],
+                center: ["35%", "50%"],
-                    center: ["35%", "50%"],
+                avoidLabelOverlap: false,
-                    avoidLabelOverlap: false,
+                itemStyle: { borderRadius: 6, borderColor: c.borderColor, borderWidth: 2 },
-                    itemStyle: {
+                label: { show: false },
-                        borderRadius: 6,
+                emphasis: {
-                        borderColor: c.borderColor,
+                    label: { show: true, fontSize: 14, fontWeight: "bold", color: c.tooltipText },
-                        borderWidth: 2,
-                    },
-                    label: { show: false },
-                    emphasis: {
-                        label: {
-                            show: true,
-                            fontSize: 14,
-                            fontWeight: "bold",
-                            color: c.tooltipText,
-                        },
-                    },
-                    data: items,
-                    color: [
-                        "#c17b4a", "#e8a87c", "#d4a574", "#b8860b",
-                        "#cd853f", "#daa520", "#bc8f8f", "#bdb76b",
-                    ],
                 },
-            ],
+                data: items,
+                color: ["#c17b4a", "#e8a87c", "#d4a574", "#b8860b", "#cd853f", "#daa520", "#bc8f8f", "#bdb76b"],
+            }],
         });
         window.addEventListener("resize", () => chart.resize());
     } catch (e) {
@@ -486,31 +441,20 @@ async function loadAuthors() {
                 axisLabel: { color: c.axis, fontSize: 12 },
                 axisLine: { lineStyle: { color: c.axisLine } },
             },
-            series: [
+            series: [{
-                {
+                type: "bar",
-                    type: "bar",
+                data: counts.reverse(),
-                    data: counts.reverse(),
+                barWidth: "50%",
-                    barWidth: "50%",
+                itemStyle: {
-                    itemStyle: {
+                    borderRadius: [0, 6, 6, 0],
-                        borderRadius: [0, 6, 6, 0],
+                    color: { type: "linear", x: 0, y: 0, x2: 1, y2: 0,
-                        color: {
+                        colorStops: [
-                            type: "linear",
+                            { offset: 0, color: c.accentLight },
-                            x: 0, y: 0, x2: 1, y2: 0,
+                            { offset: 1, color: c.accent },
-                            colorStops: [
+                        ] },
-                                { offset: 0, color: c.accentLight },
-                                { offset: 1, color: c.accent },
-                            ],
-                        },
-                    },
-                    label: {
-                        show: true,
-                        position: "right",
-                        color: c.label,
-                        fontSize: 12,
-                        formatter: "{c}本",
-                    },
                 },
-            ],
+                label: { show: true, position: "right", color: c.label, fontSize: 12, formatter: "{c}本" },
+            }],
         });
         window.addEventListener("resize", () => chart.resize());
     } catch (e) {
@@ -518,31 +462,31 @@ async function loadAuthors() {
     }
 }
 
-// ===== 读书排行 =====
+// ===== 读书排行（竖向列表） =====
 async function loadTopBooks() {
     try {
         const data = await fetchAPI("/api/top-books");
-        const grid = document.getElementById("topBooksGrid");
+        const list = document.getElementById("topBooksGrid");
 
-        grid.innerHTML = data
+        list.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 class="top-book-row" onclick="openBook('${book.book_id}')">
-                    <div class="top-book-cover-wrapper">
+                    <span class="top-book-rank-num">${i + 1}</span>
-                        <span class="top-book-rank">${i + 1}</span>
+                    <img class="top-book-mini-cover" src="${hdCover(book.cover)}" alt="${book.title}"
-                        <img class="top-book-cover" src="${hdCover(book.cover)}" alt="${book.title}"
+                         loading="lazy"
-                             loading="lazy"
+                         onerror="this.onerror=null;this.src='${book.cover}';this.onerror=function(){this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2264%22%3E%3Crect fill=%22%23e8e0d4%22 width=%2248%22 height=%2264%22/%3E%3C/svg%3E'}">
-                             onerror="this.onerror=null;this.src='${book.cover}';this.onerror=function(){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 class="top-book-row-info">
-                    </div>
+                        <div class="top-book-row-title">${book.title}</div>
-                    <div class="top-book-info">
+                        <div class="top-book-row-meta">
-                        <div class="top-book-title">${book.title}</div>
+                            <span>${book.author}</span>
-                        <div class="top-book-author">${book.author}</div>
+                            ${tagsHtml ? `<div class="top-book-row-tags">${tagsHtml}</div>` : ""}
-                        <div class="top-book-time">⏱ ${book.read_time_str}</div>
+                        </div>
-                        ${tagsHtml ? `<div class="top-book-tags">${tagsHtml}</div>` : ""}
                     </div>
+                    <div class="top-book-row-time">⏱ ${book.read_time_str}</div>
                 </div>`;
             })
             .join("");
@@ -558,12 +502,7 @@ async function loadShelf(page) {
     shelfCurrentPage = page;
     const search = document.getElementById("shelfSearch").value;
     const finished = document.getElementById("finishedOnly").checked ? "1" : "0";
-    const params = new URLSearchParams({
+    const params = new URLSearchParams({ page: page, per_page: 60, category: search, finished: finished });
-        page: page,
-        per_page: 60,
-        category: search,
-        finished: finished,
-    });
 
     try {
         const data = await fetchAPI(`/api/shelf?${params}`);
@@ -591,7 +530,6 @@ async function loadShelf(page) {
             })
             .join("");
 
-        // 分页
         renderPagination(page, data.total_pages);
     } catch (e) {
         console.error("加载书架失败:", e);
@@ -600,13 +538,9 @@ async function loadShelf(page) {
 
 function renderPagination(current, total) {
     const pag = document.getElementById("pagination");
-    if (total <= 1) {
+    if (total <= 1) { pag.innerHTML = ""; return; }
-        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);
@@ -616,31 +550,20 @@ function renderPagination(current, total) {
         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) => {
+    return (...args) => { clearTimeout(timer); timer = setTimeout(() => fn(...args), delay); };
-        clearTimeout(timer);
-        timer = setTimeout(() => fn(...args), delay);
-    };
 }
 
 // ===== 笔记概览 =====
@@ -677,7 +600,7 @@ async function loadNotebooks() {
             .map((nb) => {
                 const progress = nb.reading_progress || 0;
                 return `
-                <div class="notebook-card" onclick="openNotes('${nb.book_id}', '${nb.title.replace(/'/g, "\\'")}', '${(nb.author || '').replace(/'/g, "\\'")}', '${nb.cover}')" style="cursor:pointer">
+                <div class="notebook-card" onclick="openThoughtsPage('${nb.book_id}', '${nb.title.replace(/'/g, "\\'")}', '${(nb.author || '').replace(/'/g, "\\'")}', '${nb.cover}')" style="cursor:pointer">
                     <img class="notebook-cover" src="${hdCover(nb.cover)}" alt="${nb.title}"
                          loading="lazy"
                          onerror="this.onerror=null;this.src='${nb.cover}';this.onerror=function(){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'}">
@@ -701,7 +624,7 @@ async function loadNotebooks() {
     }
 }
 
-// ===== 打开书籍详情弹窗 =====
+// ===== 书籍详情弹窗 =====
 function openBook(bookId) {
     if (!bookId) return;
     showModal("bookDetailModal");
@@ -726,12 +649,12 @@ function openBook(bookId) {
                         <div class="detail-title">${data.title}</div>
                         <div class="detail-author">${data.author || ''}${data.translator ? ' / 译: ' + data.translator : ''}</div>
                         <div class="detail-tags">${tags.map(t => `<span class="detail-tag">${t}</span>`).join('')}</div>
-                        ${progress.is_start_reading ? `
+                        ${p.is_start_reading ? `
                         <div class="detail-progress-info">
                             <div style="font-size:13px;color:var(--text-secondary)">
-                                阅读进度: <strong>${progress.progress}%</strong>
+                                阅读进度: <strong>${p.progress}%</strong>
-                                ${progress.record_reading_time_str ? ' · 累计 ' + progress.record_reading_time_str : ''}
+                                ${p.record_reading_time_str ? ' · 累计 ' + p.record_reading_time_str : ''}
-                                ${progress.finish_time ? ' · 读完于 ' + progress.finish_time : ''}
+                                ${p.finish_time ? ' · 读完于 ' + p.finish_time : ''}
                             </div>
                             <div class="detail-progress-bar">
                                 <div class="detail-progress-fill" style="width:${progress}%"></div>
@@ -748,6 +671,7 @@ function openBook(bookId) {
                 </div>
                 <div class="detail-actions">
                     <button class="btn-primary" onclick="window.open('weread://reading?bId=${bookId}','_blank')">在微信读书中打开</button>
+                    <button class="btn-primary detail-action-thoughts" onclick="closeModal('bookDetailModal');openThoughtsPage('${bookId}', '${(data.title || '').replace(/'/g, "\\'")}', '${(data.author || '').replace(/'/g, "\\'")}', '${data.cover || ''}')">📖 查看想法</button>
                 </div>
             `;
         })
@@ -756,88 +680,180 @@ function openBook(bookId) {
         });
 }
 
-// ===== 打开笔记详情弹窗 =====
+// ===== 想法详情独立页面 =====
-function openNotes(bookId, title, author, cover) {
+
+function openThoughtsPage(bookId, title, author, cover) {
     if (!bookId) return;
-    showModal("notesDetailModal");
+
-    const body = document.getElementById("notesDetailBody");
+    // 隐藏主视图，显示想法页面
-    body.innerHTML = `
+    document.getElementById("mainView").style.display = "none";
-        <div class="notes-header">
+    document.getElementById("thoughtsPage").style.display = "block";
-            <img class="notes-cover" src="${hdCover(cover || '')}" alt="${title}"
+    window.scrollTo({ top: 0, behavior: "auto" });
-                 onerror="this.onerror=null;this.src='${cover || ''}';this.onerror=function(){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>
+    // 渲染头部
-                <div class="notes-title">${title}</div>
+    const header = document.getElementById("thoughtsBookHeader");
-                <div class="notes-author">${author || ''}</div>
+    header.innerHTML = `
-            </div>
+        <img class="thoughts-book-cover" src="${hdCover(cover || '')}" alt="${title}"
+             onerror="this.onerror=null;this.src='${cover || ''}';this.onerror=function(){this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2264%22 height=%2285%22%3E%3Crect fill=%22%23e8e0d4%22 width=%2264%22 height=%2285%22/%3E%3C/svg%3E'}">
+        <div>
+            <div class="thoughts-book-title">${title}</div>
+            <div class="thoughts-book-author">${author || ''}</div>
+            <div class="thoughts-book-stats" id="thoughtsBookStats">加载中...</div>
         </div>
-        <div class="loading"><div class="loading-spinner"></div></div>
     `;
 
+    const content = document.getElementById("thoughtsContent");
+    content.innerHTML = `<div class="loading"><div class="loading-spinner"></div></div>`;
+
     fetchAPI(`/api/book/notes?book_id=${bookId}`)
         .then((data) => {
-            let html = `
+            currentThoughtsData = data;
-                <div class="notes-header">
+            renderThoughtsPage(data);
-                    <img class="notes-cover" src="${hdCover(cover || '')}" alt="${title}"
+        })
-                         onerror="this.onerror=null;this.src='${cover || ''}';this.onerror=function(){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'}">
+        .catch((e) => {
-                    <div>
+            content.innerHTML = `<div class="thoughts-empty">加载失败: ${e.message}</div>`;
-                        <div class="notes-title">${title}</div>
+        });
-                        <div class="notes-author">${author || ''}</div>
+}
-                        <div class="notes-counts">
-                            <span>划线 <strong>${data.highlight_count}</strong></span>
-                            <span>想法/点评 <strong>${data.review_count}</strong></span>
-                        </div>
-                    </div>
-                </div>
-            `;
 
-            // 划线区
+function closeThoughtsPage() {
-            if (data.highlight_count > 0) {
+    document.getElementById("thoughtsPage").style.display = "none";
-                html += `<div class="notes-section-title">📌 划线 (${data.highlight_count})</div>`;
+    document.getElementById("mainView").style.display = "";
-                const grouped = data.grouped_highlights;
+    currentThoughtsData = null;
-                for (const [chTitle, items] of Object.entries(grouped)) {
+}
-                    html += `<div class="chapter-group">`;
+
-                    html += `<div class="chapter-title">${chTitle}</div>`;
+function renderThoughtsPage(data) {
-                    items.forEach((h) => {
+    // 更新统计
-                        html += `
+    const stats = document.getElementById("thoughtsBookStats");
-                            <div class="highlight-item">
+
-                                ${escapeHtml(h.mark_text)}
+    // 分类：划线 / 书评 / 想法
-                                <div class="highlight-date">${h.create_time || ''}</div>
+    const highlights = data.highlights || [];
-                            </div>
+    const bookReviews = (data.reviews || []).filter((r) => r.is_finish);
-                        `;
+    const thoughts = (data.reviews || []).filter((r) => !r.is_finish);
-                    });
+
-                    html += `</div>`;
+    stats.innerHTML = `
+        <span>划线 <strong>${highlights.length}</strong></span>
+        <span>书评 <strong>${bookReviews.length}</strong></span>
+        <span>想法 <strong>${thoughts.length}</strong></span>
+    `;
+
+    const content = document.getElementById("thoughtsContent");
+
+    if (highlights.length === 0 && bookReviews.length === 0 && thoughts.length === 0) {
+        content.innerHTML = `<div class="thoughts-empty">暂无笔记数据</div>`;
+        return;
+    }
+
+    let html = `
+        <div class="thoughts-filters">
+            <button class="thought-filter-btn active" onclick="filterThoughts('all')">全部</button>
+            <button class="thought-filter-btn" onclick="filterThoughts('highlight')">
+                📌 划线 <span class="filter-count">${highlights.length}</span>
+            </button>
+            <button class="thought-filter-btn" onclick="filterThoughts('review')">
+                ⭐ 书评 <span class="filter-count">${bookReviews.length}</span>
+            </button>
+            <button class="thought-filter-btn" onclick="filterThoughts('thought')">
+                💭 想法 <span class="filter-count">${thoughts.length}</span>
+            </button>
+        </div>
+        <div id="thoughtsList"></div>
+    `;
+
+    content.innerHTML = html;
+    renderThoughtsList("all");
+}
+
+function filterThoughts(category) {
+    document.querySelectorAll(".thought-filter-btn").forEach((btn) => {
+        btn.classList.remove("active");
+    });
+    event.target.closest(".thought-filter-btn").classList.add("active");
+    renderThoughtsList(category);
+}
+
+function renderThoughtsList(category) {
+    const data = currentThoughtsData;
+    if (!data) return;
+
+    const highlights = data.highlights || [];
+    const bookReviews = (data.reviews || []).filter((r) => r.is_finish);
+    const thoughts = (data.reviews || []).filter((r) => !r.is_finish);
+
+    const list = document.getElementById("thoughtsList");
+    let html = "";
+
+    // 划线区
+    if (category === "all" || category === "highlight") {
+        if (highlights.length > 0) {
+            html += `<div class="thoughts-section-title">📌 划线 <span class="section-badge badge-highlight">${highlights.length}</span></div>`;
+            const grouped = data.grouped_highlights || {};
+            for (const [chTitle, items] of Object.entries(grouped)) {
+                if (category === "highlight") {
+                    html += `<div class="thoughts-chapter-group">`;
+                    html += `<div class="thoughts-chapter-title">${chTitle}</div>`;
                 }
-            }
+                items.forEach((h) => {
-
-            // 想法/点评区
-            if (data.review_count > 0) {
-                html += `<div class="notes-section-title">💭 想法/点评 (${data.review_count})</div>`;
-                data.reviews.forEach((r) => {
-                    const starVal = Math.max(0, Math.min(5, parseInt(r.star) || 0));
-                    const stars = starVal > 0 ? `<span class="review-star">${"★".repeat(starVal)}${"☆".repeat(5 - starVal)}</span>` : "";
                     html += `
-                        <div class="review-item">
+                        <div class="thought-highlight-item">
-                            ${escapeHtml(r.content)}
+                            ${escapeHtml(h.mark_text)}
-                            <div class="review-meta">
+                            <div class="thought-highlight-meta">
-                                ${stars}
+                                ${h.chapter_title ? `<span>${h.chapter_title}</span>` : ""}
-                                ${r.chapter_name ? ' · ' + r.chapter_name : ''}
+                                ${h.create_time ? `<span>${h.create_time}</span>` : ""}
-                                ${r.is_finish ? ' · 书评' : ''}
-                                · ${r.create_time || ''}
                             </div>
                         </div>
                     `;
                 });
+                if (category === "highlight") html += `</div>`;
             }
+        }
+    }
 
-            if (data.highlight_count === 0 && data.review_count === 0) {
+    // 书评区
-                html += `<div class="empty-state">暂无笔记数据</div>`;
+    if (category === "all" || category === "review") {
-            }
+        if (bookReviews.length > 0) {
+            html += `<div class="thoughts-section-title">⭐ 书评 <span class="section-badge badge-review">${bookReviews.length}</span></div>`;
+            bookReviews.forEach((r) => {
+                const starVal = Math.max(0, Math.min(5, parseInt(r.star) || 0));
+                const stars = starVal > 0 ? `<div class="thought-review-stars">${"★".repeat(starVal)}${"☆".repeat(5 - starVal)}</div>` : "";
+                html += `
+                    <div class="thought-review-item">
+                        ${stars}
+                        ${escapeHtml(r.content)}
+                        <div class="thought-review-meta">
+                            ${r.chapter_name ? `<span>${r.chapter_name}</span>` : ""}
+                            <span>${r.create_time || ""}</span>
+                        </div>
+                    </div>
+                `;
+            });
+        }
+    }
 
-            body.innerHTML = html;
+    // 想法区
-        })
+    if (category === "all" || category === "thought") {
-        .catch((e) => {
+        if (thoughts.length > 0) {
-            body.innerHTML = `<div class="empty-state">加载失败: ${e.message}</div>`;
+            html += `<div class="thoughts-section-title">💭 想法 <span class="section-badge badge-thought">${thoughts.length}</span></div>`;
-        });
+            thoughts.forEach((r) => {
+                const abstract = r.abstract ? `<div class="thought-thought-abstract">${escapeHtml(r.abstract)}</div>` : "";
+                html += `
+                    <div class="thought-thought-item">
+                        ${abstract}
+                        <div class="thought-thought-content">${escapeHtml(r.content)}</div>
+                        <div class="thought-thought-meta">
+                            ${r.chapter_name ? `<span>${r.chapter_name}</span>` : ""}
+                            <span>${r.create_time || ""}</span>
+                        </div>
+                    </div>
+                `;
+            });
+        }
+    }
+
+    if (!html) {
+        html = `<div class="thoughts-empty">该分类暂无内容</div>`;
+    }
+
+    list.innerHTML = html;
 }
 
 // ===== 弹窗控制 =====
@@ -851,22 +867,15 @@ function closeModal(id) {
     document.body.style.overflow = "";
 }
 
-// ESC 关闭弹窗
 document.addEventListener("keydown", (e) => {
     if (e.key === "Escape") {
         closeModal("bookDetailModal");
-        closeModal("notesDetailModal");
+        if (document.getElementById("thoughtsPage").style.display !== "none") {
+            closeThoughtsPage();
+        }
     }
 });
 
-// ===== HTML 转义 =====
-function escapeHtml(text) {
-    if (!text) return "";
-    const div = document.createElement("div");
-    div.textContent = text;
-    return div.innerHTML;
-}
-
 // ===== 推荐发现 =====
 let recommendMaxIdx = 0;
 

templates/index.html

@@ -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 class="nav-link active" data-tab="overview" onclick="switchTab('overview')">总览</a>
-                <a href="#charts" class="nav-link">数据图表</a>
+                <a class="nav-link" data-tab="charts" onclick="switchTab('charts')">数据图表</a>
-                <a href="#top-books" class="nav-link">读书排行</a>
+                <a class="nav-link" data-tab="top-books" onclick="switchTab('top-books')">读书排行</a>
-                <a href="#shelf" class="nav-link">书架</a>
+                <a class="nav-link" data-tab="shelf" onclick="switchTab('shelf')">书架</a>
-                <a href="#notes" class="nav-link">笔记</a>
+                <a class="nav-link" data-tab="notes" onclick="switchTab('notes')">笔记</a>
-                <a href="#discover" class="nav-link">推荐</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">
+    <main id="mainView">
-        <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">
+        <section id="tab-overview" class="tab-panel active">
-        <div class="container">
+            <div class="hero-section">
-            <div class="stats-grid" id="statsGrid">
+                <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 class="stats-cards-section">
-    </section>
+                <div class="container">
+                    <div class="stats-grid" id="statsGrid"></div>
+                </div>
+            </section>
+        </section>
 
-    <!-- 图表区 -->
+        <!-- 数据图表标签页 -->
-    <section id="charts" class="charts-section">
+        <section id="tab-charts" class="tab-panel">
-        <div class="container">
+            <div class="container" style="padding-top:40px;padding-bottom:60px">
-            <h2 class="section-title">📊 阅读数据可视化</h2>
+                <h2 class="section-title">📊 阅读数据可视化</h2>
-            <div class="charts-grid">
+                <div class="charts-grid">
-                <div class="chart-card large">
+                    <div class="chart-card large">
-                    <h3 class="chart-title">年度阅读时长趋势</h3>
+                        <h3 class="chart-title">年度阅读时长趋势</h3>
-                    <div id="chart-yearly" class="chart-container"></div>
+                        <div id="chart-yearly" class="chart-container"></div>
-                </div>
+                    </div>
-                <div class="chart-card">
+                    <div class="chart-card">
-                    <h3 class="chart-title">24小时阅读时段分布</h3>
+                        <h3 class="chart-title">24小时阅读时段分布</h3>
-                    <div id="chart-hours" class="chart-container"></div>
+                        <div id="chart-hours" class="chart-container"></div>
-                </div>
+                    </div>
-                <div class="chart-card">
+                    <div class="chart-card">
-                    <h3 class="chart-title">偏好阅读分类</h3>
+                        <h3 class="chart-title">偏好阅读分类</h3>
-                    <div id="chart-categories" class="chart-container"></div>
+                        <div id="chart-categories" class="chart-container"></div>
-                </div>
+                    </div>
-                <div class="chart-card large">
+                    <div class="chart-card large">
-                    <h3 class="chart-title">偏好作者 TOP 10</h3>
+                        <h3 class="chart-title">偏好作者 TOP 10</h3>
-                    <div id="chart-authors" class="chart-container"></div>
+                        <div id="chart-authors" class="chart-container"></div>
+                    </div>
                 </div>
             </div>
-        </div>
+        </section>
-    </section>
 
-    <!-- 读书排行 -->
+        <!-- 读书排行标签页 -->
-    <section id="top-books" class="top-books-section">
+        <section id="tab-top-books" class="tab-panel">
-        <div class="container">
+            <div class="container" style="padding-top:40px;padding-bottom:60px">
-            <h2 class="section-title">🏆 阅读时长排行</h2>
+                <h2 class="section-title">🏆 阅读时长排行</h2>
-            <div class="top-books-grid" id="topBooksGrid">
+                <div class="top-books-list" id="topBooksGrid"></div>
-                <!-- 动态填充 -->
             </div>
-        </div>
+        </section>
-    </section>
 
-    <!-- 书架 -->
+        <!-- 书架标签页 -->
-    <section id="shelf" class="shelf-section">
+        <section id="tab-shelf" class="tab-panel">
-        <div class="container">
+            <div class="container" style="padding-top:40px;padding-bottom:60px">
-            <h2 class="section-title">📚 我的书架</h2>
+                <h2 class="section-title">📚 我的书架</h2>
-            <div class="shelf-controls">
+                <div class="shelf-controls">
-                <div class="shelf-filters">
+                    <div class="shelf-filters">
-                    <input type="text" id="shelfSearch" class="shelf-search" placeholder="搜索分类...">
+                        <input type="text" id="shelfSearch" class="shelf-search" placeholder="搜索分类...">
-                    <label class="filter-checkbox">
+                        <label class="filter-checkbox">
-                        <input type="checkbox" id="finishedOnly"> 仅看已读完
+                            <input type="checkbox" id="finishedOnly"> 仅看已读完
-                    </label>
+                        </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">
+        </section>
-                <!-- 动态填充 -->
-            </div>
-            <div class="pagination" id="pagination">
-                <!-- 动态填充 -->
-            </div>
-        </div>
-    </section>
 
-    <!-- 笔记 -->
+        <!-- 笔记标签页 -->
-    <section id="notes" class="notes-section">
+        <section id="tab-notes" class="tab-panel">
-        <div class="container">
+            <div class="container" style="padding-top:40px;padding-bottom:60px">
-            <h2 class="section-title">✍️ 笔记概览</h2>
+                <h2 class="section-title">✍️ 笔记概览</h2>
-            <div class="notes-summary" id="notesSummary">
+                <div class="notes-summary" id="notesSummary"></div>
-                <!-- 动态填充 -->
+                <div class="notebooks-grid" id="notebooksGrid"></div>
             </div>
-            <div class="notebooks-grid" id="notebooksGrid">
+        </section>
-                <!-- 动态填充 -->
-            </div>
-        </div>
-    </section>
 
-    <!-- 推荐发现 -->
+        <!-- 推荐标签页 -->
-    <section id="discover" class="discover-section">
+        <section id="tab-discover" class="tab-panel">
-        <div class="container">
+            <div class="container" style="padding-top:40px;padding-bottom:60px">
-            <h2 class="section-title">🔍 推荐发现</h2>
+                <h2 class="section-title">🔍 推荐发现</h2>
-            <div class="discover-tabs">
+                <div class="discover-tabs">
-                <button class="discover-tab active" id="tabRecommend" onclick="switchDiscoverTab('recommend')">为你推荐</button>
+                    <button class="discover-tab active" id="tabRecommend" onclick="switchDiscoverTab('recommend')">为你推荐</button>
-                <button class="discover-tab" id="tabSearch" onclick="switchDiscoverTab('search')">搜索书籍</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 id="recommendPanel" class="discover-panel">
-            </div>
+                    <div class="discover-controls">
-            <!-- 搜索区 -->
+                        <button class="btn-primary" onclick="loadRecommend(0)">刷新推荐</button>
-            <div id="searchPanel" class="discover-panel" style="display:none">
+                        <button class="btn-secondary" onclick="loadMoreRecommend()">换一批</button>
-                <div class="search-box">
+                    </div>
-                    <input type="text" id="searchInput" class="search-input" placeholder="输入书名、作者或关键词..." onkeydown="if(event.key==='Enter')doSearch()">
+                    <div class="discover-grid" id="recommendGrid"></div>
-                    <button class="btn-primary" onclick="doSearch()">搜索</button>
                 </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')">
+    <button id="backToTop" class="back-to-top" onclick="scrollToTop()" title="回到顶部" aria-label="回到顶部">↑</button>
-        <div class="modal-content notes-detail-modal" onclick="event.stopPropagation()">
-            <span class="modal-close" onclick="closeModal('notesDetailModal')">&times;</span>
-            <div id="notesDetailBody" class="modal-body"></div>
-        </div>
-    </div>
 
     <!-- 页脚 -->
     <footer class="footer">