feat: add dark/light theme toggle, fix cover display, refine overall style

- Add theme toggle button in navbar with sun/moon icons - Define [data-theme=dark] CSS variables (warm dark palette) - Persist theme preference in localStorage - Follow system prefers-color-scheme on first visit - Anti-flash inline script sets theme before render - ECharts charts re-render with theme-aware colors on toggle - Fix reading ranking covers: aspect-ratio 3/4 instead of fixed height - Fix discover covers: aspect-ratio 3/4 for proper portrait display - Replace purple hero gradient with warm brown/amber matching accent - All hardcoded colors replaced with CSS variables - Smooth 0.3s transitions on all theme-dependent elements - Update footer text from SQLite to MySQL
2026-11-03 18:24:58 +08:00 · 2026-07-17 11:13:11 +08:00
1 parent 9c32f69f71
commit ae40ed93d6
@@ -2,7 +2,61 @@

 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);
+    localStorage.setItem("theme", newTheme);
+    refreshChartsForTheme();
+}
+
+/**
+ * 从 CSS 变量读取当前主题的颜色值，供 ECharts 使用。
+ */
+function getChartColors() {
+    const cs = getComputedStyle(document.documentElement);
+    return {
+        axis: cs.getPropertyValue("--chart-axis").trim(),
+        axisLine: cs.getPropertyValue("--chart-axis-line").trim(),
+        splitLine: cs.getPropertyValue("--chart-split-line").trim(),
+        label: cs.getPropertyValue("--chart-label").trim(),
+        borderColor: cs.getPropertyValue("--chart-border-color").trim(),
+        tooltipBg: cs.getPropertyValue("--chart-tooltip-bg").trim(),
+        tooltipBorder: cs.getPropertyValue("--chart-tooltip-border").trim(),
+        tooltipText: cs.getPropertyValue("--chart-tooltip-text").trim(),
+        accent: cs.getPropertyValue("--accent").trim(),
+        accentLight: cs.getPropertyValue("--accent-light").trim(),
+        accentDark: cs.getPropertyValue("--accent-dark").trim(),
+    };
+}
+
 // ===== 工具函数 =====
+
+/**
+ * 升级微信读书封面图 URL 到高清晰度版本。
+ * 微信读书 CDN 的封面图通过文件名前缀区分分辨率：
+ *   t6_ = 低清缩略图（~150px，Retina 屏模糊）
+ *   t8_ = 高清版（~500px，适合 2x/3x 屏幕）
+ * 如果 URL 不含 t6_ 前缀或已是高清则原样返回。
+ */
+function hdCover(url) {
+    if (!url) return "";
+    return url.replace("/t6_", "/t8_");
+}
+
 async function fetchAPI(path) {
    const resp = await fetch(API_BASE + path);
    if (!resp.ok) throw new Error(`API error: ${resp.status}`);
@@ -15,6 +69,26 @@ function formatHours(seconds) {
 }

 // ===== 数据库健康检查 =====
+
+// 存储所有 ECharts 实例，用于主题切换时重绘
+const chartInstances = {};
+
+/**
+ * 主题切换后重绘所有 ECharts 图表。
+ */
+function refreshChartsForTheme() {
+    Object.values(chartInstances).forEach((chart) => {
+        if (chart && !chart.isDisposed()) {
+            chart.dispose();
+        }
+    });
+    // 重新加载所有图表
+    loadYearlyTrend();
+    loadTimeDistribution();
+    loadCategories();
+    loadAuthors();
+}
+
 /**
 * 页面加载时检查 MySQL 数据库连接状态。
 * 如果连接失败，显示告警横幅并阻止后续数据加载。
@@ -170,14 +244,21 @@ async function loadOverview() {
 async function loadYearlyTrend() {
    try {
        const data = await fetchAPI("/api/yearly-trend");
-        const chart = echarts.init(document.getElementById("chart-yearly"));
+        const el = document.getElementById("chart-yearly");
+        if (chartInstances.yearly) chartInstances.yearly.dispose();
+        const chart = echarts.init(el);
+        chartInstances.yearly = chart;

+        const c = getChartColors();
        const years = data.map((d) => d.year);
        const hours = data.map((d) => d.hours);

        chart.setOption({
            tooltip: {
                trigger: "axis",
+                backgroundColor: c.tooltipBg,
+                borderColor: c.tooltipBorder,
+                textStyle: { color: c.tooltipText },
                formatter: (params) => {
                    const p = params[0];
                    return `${p.name}年<br/>阅读: <b>${p.value}</b> 小时`;
@@ -187,14 +268,15 @@ async function loadYearlyTrend() {
            xAxis: {
                type: "category",
                data: years,
-                axisLabel: { color: "#6b5d4f" },
-                axisLine: { lineStyle: { color: "#e8e0d4" } },
+                axisLabel: { color: c.axis },
+                axisLine: { lineStyle: { color: c.axisLine } },
            },
            yAxis: {
                type: "value",
                name: "小时",
-                axisLabel: { color: "#6b5d4f" },
-                splitLine: { lineStyle: { color: "#f0ebe3" } },
+                nameTextStyle: { color: c.axis },
+                axisLabel: { color: c.axis },
+                splitLine: { lineStyle: { color: c.splitLine } },
            },
            series: [
                {
@@ -207,15 +289,15 @@ async function loadYearlyTrend() {
                            type: "linear",
                            x: 0, y: 0, x2: 0, y2: 1,
                            colorStops: [
-                                { offset: 0, color: "#e8a87c" },
-                                { offset: 1, color: "#c17b4a" },
+                                { offset: 0, color: c.accentLight },
+                                { offset: 1, color: c.accent },
                            ],
                        },
                    },
                    label: {
                        show: true,
                        position: "top",
-                        color: "#6b5d4f",
+                        color: c.label,
                        fontSize: 12,
                        formatter: "{c}h",
                    },
@@ -232,14 +314,21 @@ async function loadYearlyTrend() {
 async function loadTimeDistribution() {
    try {
        const data = await fetchAPI("/api/time-distribution");
-        const chart = echarts.init(document.getElementById("chart-hours"));
+        const el = document.getElementById("chart-hours");
+        if (chartInstances.hours) chartInstances.hours.dispose();
+        const chart = echarts.init(el);
+        chartInstances.hours = chart;

+        const c = getChartColors();
        const hours = data.map((d) => `${d.hour}时`);
        const minutes = data.map((d) => d.duration_min);

        chart.setOption({
            tooltip: {
                trigger: "axis",
+                backgroundColor: c.tooltipBg,
+                borderColor: c.tooltipBorder,
+                textStyle: { color: c.tooltipText },
                formatter: (params) => {
                    const p = params[0];
                    return `${p.name}<br/>阅读: <b>${p.value}</b> 分钟`;
@@ -250,17 +339,18 @@ async function loadTimeDistribution() {
                type: "category",
                data: hours,
                axisLabel: {
-                    color: "#6b5d4f",
+                    color: c.axis,
                    fontSize: 10,
                    interval: 2,
                },
-                axisLine: { lineStyle: { color: "#e8e0d4" } },
+                axisLine: { lineStyle: { color: c.axisLine } },
            },
            yAxis: {
                type: "value",
                name: "分钟",
-                axisLabel: { color: "#6b5d4f" },
-                splitLine: { lineStyle: { color: "#f0ebe3" } },
+                nameTextStyle: { color: c.axis },
+                axisLabel: { color: c.axis },
+                splitLine: { lineStyle: { color: c.splitLine } },
            },
            series: [
                {
@@ -269,15 +359,15 @@ async function loadTimeDistribution() {
                    smooth: true,
                    symbol: "circle",
                    symbolSize: 4,
-                    lineStyle: { width: 2, color: "#c17b4a" },
-                    itemStyle: { color: "#c17b4a" },
+                    lineStyle: { width: 2, color: c.accent },
+                    itemStyle: { color: c.accent },
                    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)" },
+                                { offset: 0, color: c.accent + "4D" },
+                                { offset: 1, color: c.accent + "05" },
                            ],
                        },
                    },
@@ -294,8 +384,12 @@ async function loadTimeDistribution() {
 async function loadCategories() {
    try {
        const data = await fetchAPI("/api/categories");
-        const chart = echarts.init(document.getElementById("chart-categories"));
+        const el = document.getElementById("chart-categories");
+        if (chartInstances.categories) chartInstances.categories.dispose();
+        const chart = echarts.init(el);
+        chartInstances.categories = chart;

+        const c = getChartColors();
        const items = data.slice(0, 8).map((d) => ({
            name: d.category_title,
            value: d.reading_time,
@@ -304,6 +398,9 @@ async function loadCategories() {
        chart.setOption({
            tooltip: {
                trigger: "item",
+                backgroundColor: c.tooltipBg,
+                borderColor: c.tooltipBorder,
+                textStyle: { color: c.tooltipText },
                formatter: (p) => {
                    const hours = (p.value / 3600).toFixed(1);
                    return `${p.name}<br/>阅读: <b>${hours}</b> 小时 (${p.percent}%)`;
@@ -315,7 +412,7 @@ async function loadCategories() {
                right: 10,
                top: 20,
                bottom: 20,
-                textStyle: { color: "#6b5d4f", fontSize: 11 },
+                textStyle: { color: c.label, fontSize: 11 },
            },
            series: [
                {
@@ -325,7 +422,7 @@ async function loadCategories() {
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 6,
-                        borderColor: "#fff",
+                        borderColor: c.borderColor,
                        borderWidth: 2,
                    },
                    label: { show: false },
@@ -334,6 +431,7 @@ async function loadCategories() {
                            show: true,
                            fontSize: 14,
                            fontWeight: "bold",
+                            color: c.tooltipText,
                        },
                    },
                    data: items,
@@ -354,8 +452,12 @@ async function loadCategories() {
 async function loadAuthors() {
    try {
        const data = await fetchAPI("/api/authors");
-        const chart = echarts.init(document.getElementById("chart-authors"));
+        const el = document.getElementById("chart-authors");
+        if (chartInstances.authors) chartInstances.authors.dispose();
+        const chart = echarts.init(el);
+        chartInstances.authors = chart;

+        const c = getChartColors();
        const top10 = data.slice(0, 10);
        const names = top10.map((d) => d.name);
        const counts = top10.map((d) => d.count);
@@ -364,6 +466,9 @@ async function loadAuthors() {
            tooltip: {
                trigger: "axis",
                axisPointer: { type: "shadow" },
+                backgroundColor: c.tooltipBg,
+                borderColor: c.tooltipBorder,
+                textStyle: { color: c.tooltipText },
                formatter: (params) => {
                    const p = params[0];
                    return `${p.name}<br/>阅读: <b>${p.value}</b> 本`;
@@ -372,14 +477,14 @@ async function loadAuthors() {
            grid: { left: 100, right: 40, top: 20, bottom: 20 },
            xAxis: {
                type: "value",
-                axisLabel: { color: "#6b5d4f" },
-                splitLine: { lineStyle: { color: "#f0ebe3" } },
+                axisLabel: { color: c.axis },
+                splitLine: { lineStyle: { color: c.splitLine } },
            },
            yAxis: {
                type: "category",
                data: names.reverse(),
-                axisLabel: { color: "#6b5d4f", fontSize: 12 },
-                axisLine: { lineStyle: { color: "#e8e0d4" } },
+                axisLabel: { color: c.axis, fontSize: 12 },
+                axisLine: { lineStyle: { color: c.axisLine } },
            },
            series: [
                {
@@ -392,15 +497,15 @@ async function loadAuthors() {
                            type: "linear",
                            x: 0, y: 0, x2: 1, y2: 0,
                            colorStops: [
-                                { offset: 0, color: "#e8a87c" },
-                                { offset: 1, color: "#c17b4a" },
+                                { offset: 0, color: c.accentLight },
+                                { offset: 1, color: c.accent },
                            ],
                        },
                    },
                    label: {
                        show: true,
                        position: "right",
-                        color: "#6b5d4f",
+                        color: c.label,
                        fontSize: 12,
                        formatter: "{c}本",
                    },
@@ -426,10 +531,11 @@ async function loadTopBooks() {
                    .join("");
                return `
                <div class="top-book-card" onclick="openBook('${book.book_id}')">
-                    <div style="position:relative">
+                    <div class="top-book-cover-wrapper">
                        <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'">
+                        <img class="top-book-cover" src="${hdCover(book.cover)}" alt="${book.title}"
+                             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=%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>
@@ -474,8 +580,9 @@ async function loadShelf(page) {
                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'">
+                        <img class="book-cover-img" src="${hdCover(book.cover)}" alt="${book.title}"
+                             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=%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>
@@ -571,8 +678,9 @@ async function loadNotebooks() {
                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">
-                    <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'">
+                    <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'}">
                    <div class="notebook-info">
                        <div class="notebook-title">${nb.title}</div>
                        <div class="notebook-author">${nb.author}</div>
@@ -612,8 +720,8 @@ function openBook(bookId) {

            body.innerHTML = `
                <div class="detail-header">
-                    <img class="detail-cover" src="${data.cover || ''}" alt="${data.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%3C/svg%3E'">
+                    <img class="detail-cover" src="${hdCover(data.cover || '')}" alt="${data.title}"
+                         onerror="this.onerror=null;this.src='${data.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%3C/svg%3E'}">
                    <div class="detail-meta">
                        <div class="detail-title">${data.title}</div>
                        <div class="detail-author">${data.author || ''}${data.translator ? ' / 译: ' + data.translator : ''}</div>
@@ -655,8 +763,8 @@ function openNotes(bookId, title, author, cover) {
    const body = document.getElementById("notesDetailBody");
    body.innerHTML = `
        <div class="notes-header">
-            <img class="notes-cover" src="${cover || ''}" alt="${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'">
+            <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'}">
            <div>
                <div class="notes-title">${title}</div>
                <div class="notes-author">${author || ''}</div>
@@ -669,8 +777,8 @@ function openNotes(bookId, title, author, cover) {
        .then((data) => {
            let html = `
                <div class="notes-header">
-                    <img class="notes-cover" src="${cover || ''}" alt="${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'">
+                    <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'}">
                    <div>
                        <div class="notes-title">${title}</div>
                        <div class="notes-author">${author || ''}</div>
@@ -828,8 +936,9 @@ function renderDiscoverGrid(grid, books, showReason) {

            return `
                <div class="discover-card" onclick="openBook('${book.book_id}')">
-                    <img class="discover-cover" src="${book.cover || ''}" alt="${book.title}"
-                         onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22180%22%3E%3Crect fill=%22%23e8e0d4%22 width=%22200%22 height=%22180%22/%3E%3Ctext x=%22100%22 y=%2290%22 text-anchor=%22middle%22 fill=%22%239b8e80%22 font-size=%2214%22%3E无封面%3C/text%3E%3C/svg%3E'">
+                    <img class="discover-cover" src="${hdCover(book.cover || '')}" alt="${book.title}"
+                         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=%22200%22 height=%22180%22%3E%3Crect fill=%22%23e8e0d4%22 width=%22200%22 height=%22180%22/%3E%3Ctext x=%22100%22 y=%2290%22 text-anchor=%22middle%22 fill=%22%239b8e80%22 font-size=%2214%22%3E无封面%3C/text%3E%3C/svg%3E'}">
                    <div class="discover-info">
                        <div class="discover-title">${book.title}</div>
                        <div class="discover-author">${book.author || ''}</div>