From 032b5601acee98fce6b392bc2160ace9a038ba02 Mon Sep 17 00:00:00 2001
From: nxxy335 <zhangjinyang2023@outlook.com>
Date: Sat, 26 Sep 2026 13:55:41 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=B9=A6=E6=9E=B6=E9=A1=B5=E6=A0=87?=
 =?UTF-8?q?=E9=A2=98=E4=B8=8E=E4=B8=BB=E9=A2=98=E7=BB=9F=E4=B8=80=EF=BC=8C?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=A1=B6=E9=83=A8=E7=A9=BA=E7=99=BD=E4=B8=8E?=
 =?UTF-8?q?=E6=9A=97=E9=BB=91=E4=B8=8B=E6=95=B0=E6=8D=AE=E7=9C=8B=E4=B8=8D?=
 =?UTF-8?q?=E6=B8=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

依据插件 WeReadShelfRenderer 的实际输出结构（.wr-shelf / .wr-head-title /
.wr-head-stats / .wr-year / .wr-grid）做针对性适配：

- 标题统一：恢复与订阅/图库/友链页面一致的居中标题区（标题+副标题+强调线），
  隐藏插件自带的 .wr-head-title，避免双标题且样式不统一
- 顶部空白：插件容器自带 clamp(40px,6vw,72px) 顶部内边距，叠加主题边距后
  形成大片空白；现收紧插件 padding-top 并将页面 padding 与其他页面对齐
- 暗黑适配：插件为苹果风格浅色配色（--wr-* 变量、#1d1d1f 墨色文字），深色
  背景下统计数字几乎不可见。现通过覆盖 --wr-* 变量 + :where() 零特异性
  文字兜底接管配色，不破坏插件自身显式样式；笔记弹窗浅色底同步处理
---
 settings.yaml          |  4 +--
 src/pages/weread.astro | 60 +++++++++++++++++++++++++++++++++++++-----
 2 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/settings.yaml b/settings.yaml
index 49f0c54..17d07da 100644
--- a/settings.yaml
+++ b/settings.yaml
@@ -652,9 +652,9 @@ spec:
       formSchema:
         - $formkit: text
           name: weread_page_title
-          label: 页面标题（浏览器标签）
+          label: 页面标题
           placeholder: "书架"
-          help: 仅用于浏览器标签页标题；页面内的标题由插件返回的书架内容自带
+          help: 页面顶部标题与浏览器标签页标题；插件自带的标题区会自动隐藏以避免重复
         - $formkit: text
           name: weread_page_subtitle
           label: 页面副标题
diff --git a/src/pages/weread.astro b/src/pages/weread.astro
index a4de8a9..b94152b 100644
--- a/src/pages/weread.astro
+++ b/src/pages/weread.astro
@@ -9,8 +9,13 @@ import Layout from "../layouts/Layout.astro";
 
   <section class="wi-weread">
     <div class="wi-container">
-      <!-- 标题由插件返回的书架内容自带，主题不再重复输出 -->
       <div class="wi-weread__header">
+        <h1
+          class="wi-weread__title"
+          th:text="${theme.config?.weread?.weread_page_title ?: '书架'}"
+        >
+          书架
+        </h1>
         <p
           class="wi-weread__subtitle"
           th:if="${theme.config?.weread?.weread_page_subtitle}"
@@ -18,6 +23,7 @@ import Layout from "../layouts/Layout.astro";
         >
           来自微信读书的同步藏书
         </p>
+        <span class="wi-page-accent"></span>
       </div>
 
       <th:block th:if="${pluginFinder.available('halo-weread-plugin')}">
@@ -80,19 +86,26 @@ import Layout from "../layouts/Layout.astro";
 </Layout>
 
 <style>
+  /* 头部结构与订阅/图库/友链等页面保持一致：居中标题 + 副标题 + 强调线 */
   .wi-weread {
-    padding-block: 2rem 3rem;
+    padding-block: 1rem 3rem;
   }
 
   .wi-weread__header {
     text-align: center;
-    margin-bottom: var(--space-2xl);
+    margin-bottom: var(--space-3xl);
+  }
+
+  .wi-weread__title {
+    font-size: var(--text-4xl);
+    margin-bottom: var(--space-xs);
   }
 
   .wi-weread__subtitle {
-    font-size: var(--text-base);
+    font-size: var(--text-sm);
     color: var(--ink-3);
-    line-height: var(--leading-relaxed);
+    letter-spacing: var(--tracking-wide);
+    margin-block-end: 0;
   }
 
   .wi-weread__shelf {
@@ -124,7 +137,18 @@ import Layout from "../layouts/Layout.astro";
     text-decoration: underline;
   }
 
-  /* 插件返回的书架内容：收敛为与主题一致的卡片观感 */
+  /* ===== 插件返回的书架内容（.wr-shelf）适配 ===== */
+
+  /* 插件自带的标题区与主题头部重复，隐藏后由主题统一呈现 */
+  .wi-weread__shelf :global(.wr-head-title) {
+    display: none;
+  }
+
+  /* 插件容器自带 clamp(40px,6vw,72px) 的顶部内边距，主题已提供边距，收紧以消除大片空白 */
+  .wi-weread__shelf :global(.wr-shelf) {
+    padding-top: 0;
+  }
+
   .wi-weread__shelf :global(img) {
     max-width: 100%;
     height: auto;
@@ -135,4 +159,28 @@ import Layout from "../layouts/Layout.astro";
     color: var(--accent);
   }
 
+  /* ===== 暗黑模式：插件内容为苹果风格浅色配色，深色下需要接管 ===== */
+
+  /* 覆盖插件内部变量（按其命名约定 --wr-*，未命中也无副作用） */
+  html.dark .wi-weread__shelf :global(.wr-shelf) {
+    --wr-ink: var(--ink);
+    --wr-muted: var(--ink-2);
+    --wr-bg: var(--bg-raised);
+    --wr-line: var(--rule);
+    --wr-fill: color-mix(in srgb, var(--ink) 8%, transparent);
+  }
+
+  /* :where() 零特异性兜底：只接管插件未显式着色的文字，不会破坏其自身样式 */
+  html.dark .wi-weread__shelf :global(:where(h2, h3, strong)) {
+    color: var(--ink);
+  }
+
+  html.dark .wi-weread__shelf :global(:where(p, span, small, i, em, li)) {
+    color: var(--ink-2);
+  }
+
+  /* 笔记弹窗浅色底在深色页面中过于突兀 */
+  html.dark .wi-weread__shelf :global(.wr-notes-modal) {
+    background: color-mix(in srgb, var(--bg) 94%, transparent);
+  }
 </style>