From 565b5be3d79d3efa5717855395a53f88062d42c6 Mon Sep 17 00:00:00 2001
From: Sakurasan <26715255+Sakurasan@users.noreply.github.com>
Date: Thu, 24 Sep 2026 00:30:15 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=99=E7=99=BD=EF=BC=9A=E6=A1=8C=E9=9D=A2?=
 =?UTF-8?q?=E7=AB=AF=E6=96=87=E7=AB=A0=E5=8E=BB=E5=8D=A1=E7=89=87=20+=20?=
 =?UTF-8?q?=E9=98=85=E8=AF=BB=E9=A1=B5=E5=AE=BD=E5=B1=8F=E4=B8=89=E6=A0=8F?=
 =?UTF-8?q?=E5=A4=96=E6=89=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

去卡片（桌面 + 手机统一）
- .paper 去掉底色 / 1px 边框 / 20px 圆角 / box-shadow，正文直接落在页面上；
  右上角那团强调色渐晕（::before）是卡片的角饰，一并删掉，position/overflow 随之不再需要
- 48px 横向内边距保留：它不是装饰，是「中列 776 - 96 = 680 = --measure」这半个算式，
  删了正文要么超出行宽、要么在列里右空 96px；手机上归零（那 48px 在 390 屏上是浪费）

宽屏三栏外扩（≥1200px）
- 1100 的画布上限在 1456 的屏上两侧各空 171px，同时中列只有 650px、正文 554px
  ——根本没到 --measure 的 680。所以「文章太窄」和「留白太大」是同一个原因
- 上限提到 1340，列改 180 / minmax(0,776) / 220 + space-between：
  中列 776 = 680(正文) + 48×2(.paper 内边距)，正文吃满 --measure 且列内不剩空；
  space-between 让时间线左缘 / 目录右缘正好落在 28px 内边距上
- 顶栏在阅读页同步放宽（YohakuTop 按 /post/* 加 .top-in.wide），否则品牌和主题键
  会比左右栏缩进一百多像素。首页仍 1100 —— 信息流卡片跟着放到 1340 只会把封面拉成条

实测（offsetWidth，.paper 有入场动画的 scale，getBoundingClientRect 会带上它）
- 1456：画布 1100 -> 1340，两侧空白 171 -> 51，中列 650 -> 776，正文 554 -> 678
- 1920：两侧空白 403 -> 283；1200 及以下不变；首页 top-in 仍 1100、卡片 1044
- 平铺后桌面 .paper：bg 透明 / border 0 / radius 0 / shadow none / ::before none，
  正文 680；手机正文 335（与上一版一致）

修一处自己引入的编译错误：顶栏那个 class 起初命名 wide，与组件里已有的
wide（721px matchMedia）撞名 —— Identifier 'wide' has already been declared，
:3000 直接 500、页面全白。已改名 mqWide。

公网 138.2.17.73:8080 产物 md5 与磁盘一致；npm run build 无警告。
---
 frontend/src/ui/yohaku/YohakuTop.vue | 14 +++++++++-----
 frontend/src/ui/yohaku/article.css   | 27 ++++++++++++++++-----------
 frontend/src/ui/yohaku/chrome.css    |  5 +++++
 frontend/src/ui/yohaku/mobile.css    | 13 +++++--------
 4 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/frontend/src/ui/yohaku/YohakuTop.vue b/frontend/src/ui/yohaku/YohakuTop.vue
index e54eb4c..2807272 100644
--- a/frontend/src/ui/yohaku/YohakuTop.vue
+++ b/frontend/src/ui/yohaku/YohakuTop.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
 import { site } from '../../site'
 
@@ -31,6 +31,10 @@ function isOn(l) {
   return l.to === '/' ? route.path === '/' : route.path.startsWith(l.to)
 }
 
+// 阅读页的三栏栅格在宽屏是 1340（见 article.css），顶栏跟着放宽才对齐。
+// 其余页面仍是 1100 —— 首页信息流卡片已经够宽，跟着放到 1340 只会让封面拉成条。
+const wide = computed(() => route.path.startsWith('/post/'))
+
 function onScroll() {
   scrolled.value = (window.scrollY || 0) > 8
 }
@@ -57,19 +61,19 @@ function onKey(e) {
 }
 
 // 窗口拉宽回桌面必须自己退场：v-if 是 JS 状态，CSS 媒体查询管不着它
-const wide = window.matchMedia('(min-width: 721px)')
+const mqWide = window.matchMedia('(min-width: 721px)')
 function onWide(e) { if (e.matches) menuOpen.value = false }
 
 onMounted(() => {
   window.addEventListener('scroll', onScroll, { passive: true })
   window.addEventListener('keydown', onKey)
-  wide.addEventListener('change', onWide)
+  mqWide.addEventListener('change', onWide)
   onScroll()
 })
 onBeforeUnmount(() => {
   window.removeEventListener('scroll', onScroll)
   window.removeEventListener('keydown', onKey)
-  wide.removeEventListener('change', onWide)
+  mqWide.removeEventListener('change', onWide)
   document.body.style.overflow = ''
   menuOpen.value = false
 })
@@ -85,7 +89,7 @@ function toggleTheme() {
 
 <template>
   <header class="top" :class="{ scrolled }">
-    <div class="top-in">
+    <div class="top-in" :class="{ wide }">
       <RouterLink class="brand" to="/">
         <span class="av">{{ initial() }}</span>
         <span>{{ title() }}</span>
diff --git a/frontend/src/ui/yohaku/article.css b/frontend/src/ui/yohaku/article.css
index 7156aaf..5425523 100644
--- a/frontend/src/ui/yohaku/article.css
+++ b/frontend/src/ui/yohaku/article.css
@@ -7,6 +7,17 @@ html[data-ui='vivid'] .article-layout {max-width:1100px;margin:0 auto;padding:36
   html[data-ui='vivid'] .side-l, html[data-ui='vivid'] .side-r {display:none}
   html[data-ui='vivid'] .progress-pct {display:none}
 }
+/* 宽屏：三栏往外扩。1100 的上限在 1456 的屏上两侧各空 171px，而且中间那列只有
+   650px（正文 554px，根本没到 --measure 的 680），所以「文章太窄」和「留白太大」
+   是同一个原因。这里把上限提到 1340，中列固定在 776 = 680(正文) + 48×2(.paper 内边距)，
+   正文正好吃满 --measure 而不留内空；侧栏 180/220 把多出来的宽度吸收掉，
+   space-between 让时间线左缘 / 目录右缘正好落在 28px 内边距上（和顶栏对齐）。
+   顶栏在阅读页同步放宽到 1340，见 chrome.css 的 .top-in.wide。 */
+@media (min-width:1200px) {
+  html[data-ui='vivid'] .article-layout {max-width:1340px;
+    grid-template-columns:180px minmax(0,776px) 220px;
+    justify-content:space-between;}
+}
 html[data-ui='vivid'] .side-l {position:sticky;top:80px;padding-top:8px}
 html[data-ui='vivid'] .tl {position:relative;padding-left:14px}
 html[data-ui='vivid'] .tl::before {content:"";position:absolute;left:3px;top:6px;bottom:6px;width:1.5px;
@@ -20,22 +31,16 @@ html[data-ui='vivid'] .tl-item.now::before {background:var(--accent);
   box-shadow:0 0 0 4px var(--accent-soft);}
 html[data-ui='vivid'] .tl-item b {display:block;color:var(--soft);font-weight:700;font-size:12px}
 html[data-ui='vivid'] .tl-item.now b {color:var(--accent)}
-html[data-ui='vivid'] .paper {background:var(--card);
-  border:1px solid var(--line);
-  border-radius:var(--radius-lg);
-  box-shadow:var(--shadow-lg);
-  padding:44px 48px 52px;
-  position:relative;
-  overflow:hidden;
+/* 纸张不再是卡片：去掉底色 / 边框 / 圆角 / 阴影，正文直接落在页面上（手机和桌面一致）。
+   48px 横向内边距留着 —— 现在它只是留白，但它决定了正文列在中列里的位置：
+   776(中列) - 96 = 680 = --measure，正好吃满，卡片里和列里都不会剩空。
+   右上角那团强调色渐晕是卡片的角饰，卡片没了也一并去掉。 */
+html[data-ui='vivid'] .paper {padding:44px 48px 52px;
   animation:paperIn .7s var(--spring) both;}
 @keyframes paperIn {
     from {opacity:0;transform:translateY(24px) scale(.985)}
   to {opacity:1;transform:none}
 }
-html[data-ui='vivid'] .paper::before {content:"";position:absolute;top:0;right:0;
-  width:120px;height:120px;
-  background:radial-gradient(circle at 100% 0,var(--accent-soft),transparent 70%);
-  pointer-events:none;}
 html[data-ui='vivid'] .paper .meta {display:flex;gap:12px;align-items:center;flex-wrap:wrap;
   font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:18px;}
 html[data-ui='vivid'] .paper h1 {margin:0 0 20px;font-size:clamp(28px,4vw,40px);font-weight:800;
diff --git a/frontend/src/ui/yohaku/chrome.css b/frontend/src/ui/yohaku/chrome.css
index ad676e7..44f3ec6 100644
--- a/frontend/src/ui/yohaku/chrome.css
+++ b/frontend/src/ui/yohaku/chrome.css
@@ -9,6 +9,11 @@ html[data-ui='vivid'] .top.scrolled {border-bottom-color:var(--line);
 html[data-ui='vivid'] .top-in {max-width:1100px;margin:0 auto;
   padding:0 28px;height:60px;
   display:flex;align-items:center;gap:20px;}
+/* 阅读页（/post/*）在宽屏用的是 1340 的三栏栅格（article.css），顶栏得跟着一起宽：
+   否则品牌和主题键会落在 1100 的边上，比左栏时间线 / 右栏目录缩进一百多像素。 */
+@media (min-width:1200px) {
+  html[data-ui='vivid'] .top-in.wide {max-width:1340px}
+}
 html[data-ui='vivid'] .brand {display:flex;align-items:center;gap:10px;
   font-weight:700;font-size:15px;letter-spacing:.02em;
   transition:transform .5s var(--spring);}
diff --git a/frontend/src/ui/yohaku/mobile.css b/frontend/src/ui/yohaku/mobile.css
index e1f6d1e..8c6a254 100644
--- a/frontend/src/ui/yohaku/mobile.css
+++ b/frontend/src/ui/yohaku/mobile.css
@@ -6,7 +6,7 @@
    home.css / article.css / pages.css 里，而它们都排在 chrome.css 之后。
    媒体查询不加特指度 —— 同特指度的规则永远是「后导入者赢」，
    所以这些覆盖只要写在 chrome.css（第 2 个 import）就会被全程压掉：
-   手机上左右留白一直是 28px 而不是 18px，卡片圆角/内边距也没换过。
+   手机上左右留白一直是 28px 而不是设计意图的 18px，内边距也没换过。
    放在最后一个 import，才拿得回顺序优势。
    ========================================================================== */
 
@@ -14,14 +14,11 @@
   /* 左右 20px 对齐：hero 的标题和下面卡片列表的左边缘要在同一条竖线上 */
   html[data-ui='vivid'] .hero {padding:48px 20px 32px}
   html[data-ui='vivid'] .wrap {padding:8px 20px 36px}
-  /* 文章详情页在手机上不再套卡片：卡片边框 + .article-layout 28px + .paper 22px
-     三层一共吃掉约 84px，390 屏上正文只剩 275px。平铺成正常阅读排版，
-     正文直接落在纸面上，实测正文宽度 275px -> 330px。桌面/平板保持卡片。 */
+  /* 阅读页在手机上只收回留白：.article-layout 走 20px 页边距，.paper 的内边距归零
+     （桌面那 48px 是为了给 776 的中列凑出 --measure 的 680，手机上只会浪费宽度）。
+     卡片样式本身已在 article.css 里去掉了，手机桌面一致。 */
   html[data-ui='vivid'] .article-layout {padding:24px 20px 48px}
-  html[data-ui='vivid'] .paper {background:none;border:0;border-radius:0;box-shadow:none;
-    padding:0;overflow:visible;}
-  /* 那团右上角的强调色渐晕是给卡片当角饰的，卡片没了就只剩一块脏 */
-  html[data-ui='vivid'] .paper::before {display:none}
+  html[data-ui='vivid'] .paper {padding:0}
   html[data-ui='vivid'] .about-card {padding:32px 22px}
   /* showcase 的 .showcase 是 max-width + 自己的 padding（不带 .wrap 类），
      单独对齐；用 max() 保住横屏刘海侧的安全区 */