From 5f82b6012f972c247e5dd98409d1fb12cee01fad Mon Sep 17 00:00:00 2001
From: Sakurasan <26715255+Sakurasan@users.noreply.github.com>
Date: Thu, 24 Sep 2026 00:09:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=99=E7=99=BD=EF=BC=9A=E6=89=8B=E6=9C=BA?=
 =?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?=E4=BF=A1=E6=81=AF=E6=B5=81=E5=85=83=E4=BF=A1=E6=81=AF=E4=B8=8B?=
 =?UTF-8?q?=E7=A7=BB=20+=20=E6=A0=87=E7=AD=BE=E7=BB=9F=E4=B8=80=E4=B8=BA?=
 =?UTF-8?q?=E7=BA=AF=E6=96=87=E6=9C=AC=20#=E6=A0=87=E7=AD=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

信息流（首页）
- 元信息（类型 / 日期 / 时长 / 字数）从标题上方挪到摘要之后，和标签同一块：
  卡片开头只留标题摘要，读完再看「什么时候、多长」
- 标签去掉 chip 样式，改为纯文本 #标签（# 走 ::before，链接的可读名仍是标签本身）；
  原来那排药丸看着能点，其实是卡片链接里的 span，点哪儿都进文章
- .card .tags / .note .tags 间距 6px -> 14px，配合纯文本

文章详情页
- 手机上不再套卡片：.article-layout 28px + .paper 22px + 卡片边框三层一共
  吃掉约 84px，390 屏上正文只剩 275px；平铺后 330px。同时关掉卡片右上角
  那团强调色渐晕（::before，卡片没了就只剩一块脏）。桌面 / 平板仍是卡片
- 底部标签跟信息流统一成纯文本 #标签，并去掉「标签」二字的小标
  （有 # 就是标签，再来两个字是重复）
- 详情页的标签是链接，补 padding:6px 0 —— 12.5px 裸文字按下去只有 ~18px 高，
  手机上不好点；不画背景不画边框，观感不变

标签样式只有 home.css 一处 .tg，信息流与详情页共用。

验证：headless Chromium 从站上量取计算样式 + 截图（390 / 1280）
- 详情页手机：paper bg=透明 border=0 radius=0 shadow=none padding=0，::before=none，
  正文 330px；桌面：bg=#fffefb border=1px radius=20px padding=48px，::before=block
- .end 子元素只剩 [A.tg, A.tg]；.tg 12.5px / padding 0 / ::before "#"；gap 14px
- 公网 138.2.17.73:8080 产物 md5 与磁盘一致；npm run build 无警告
---
 frontend/src/ui/yohaku/YohakuArticle.vue |  1 -
 frontend/src/ui/yohaku/YohakuFeed.vue    | 12 +++++++-----
 frontend/src/ui/yohaku/article.css       |  8 ++++++--
 frontend/src/ui/yohaku/home.css          | 21 ++++++++++-----------
 frontend/src/ui/yohaku/mobile.css        |  9 ++++++++-
 5 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/frontend/src/ui/yohaku/YohakuArticle.vue b/frontend/src/ui/yohaku/YohakuArticle.vue
index de1144a..fdb5a71 100644
--- a/frontend/src/ui/yohaku/YohakuArticle.vue
+++ b/frontend/src/ui/yohaku/YohakuArticle.vue
@@ -168,7 +168,6 @@ function onTocClick(e) {
         <div class="prose" v-html="sanitizeHtml(props.contentHtml)" />
 
         <div class="end">
-          <span class="lbl">标签</span>
           <RouterLink v-for="t in props.post.tags || []" :key="t" class="tg" to="/tags">{{ t }}</RouterLink>
         </div>
       </article>
diff --git a/frontend/src/ui/yohaku/YohakuFeed.vue b/frontend/src/ui/yohaku/YohakuFeed.vue
index 7be7714..c46f99f 100644
--- a/frontend/src/ui/yohaku/YohakuFeed.vue
+++ b/frontend/src/ui/yohaku/YohakuFeed.vue
@@ -1,8 +1,10 @@
 <script setup>
 import { RouterLink } from 'vue-router'
 
-// 余白列表。对应设计稿的 <div class="feed">：长文是卡片（封面 + 元信息 + 标题 + 摘要 + 标签），
-// 短文是纸条（直接铺正文）。两种密度混在同一条时间线里，这是设计稿的主张。
+// 余白列表。对应设计稿的 <div class="feed">：长文是卡片（封面 + 标题 + 摘要 + 元信息 + 标签），
+// 短文是纸条（直接铺正文，元信息在正文后）。两种密度混在同一条时间线里，这是设计稿的主张。
+// 元信息（类型/日期/时长/字数）从标题上方挪到了正文之后、和标签同一块：
+// 卡片开头只留标题摘要，读完再看「什么时候、多长」。
 
 const props = defineProps({
   items: { type: Array, default: () => [] }
@@ -35,14 +37,14 @@ const shortTitle = (p) => plain(p.content_html).slice(0, 40) + '…'
           <img :src="p.cover_url" alt="" loading="lazy">
         </div>
         <div class="body">
+          <h2>{{ p.title }}</h2>
+          <p class="sum">{{ p.summary }}</p>
           <div class="meta">
             <span class="badge long">LONG</span>
             <time :datetime="p.published_at">{{ fmtDate(p.published_at) }}</time>
             <span>· 约 {{ p.reading_minutes }} 分钟</span>
             <span>· {{ nf.format(p.content_len || 0) }} 字</span>
           </div>
-          <h2>{{ p.title }}</h2>
-          <p class="sum">{{ p.summary }}</p>
           <div class="tags">
             <span v-for="t in p.tags || []" :key="t" class="tg">{{ t }}</span>
           </div>
@@ -51,11 +53,11 @@ const shortTitle = (p) => plain(p.content_html).slice(0, 40) + '…'
 
       <!-- 短文：纸条，正文直接铺开 -->
       <RouterLink v-else class="note" :to="`/post/${encodeURIComponent(p.slug)}`">
+        <div class="body" v-html="p.content_html" />
         <div class="meta">
           <span class="badge short">SHORT</span>
           <time :datetime="p.published_at">{{ fmtDateTime(p.published_at) }}</time>
         </div>
-        <div class="body" v-html="p.content_html" />
         <div class="tags">
           <span v-for="t in p.tags || []" :key="t" class="tg">{{ t }}</span>
         </div>
diff --git a/frontend/src/ui/yohaku/article.css b/frontend/src/ui/yohaku/article.css
index 4b29eb8..7156aaf 100644
--- a/frontend/src/ui/yohaku/article.css
+++ b/frontend/src/ui/yohaku/article.css
@@ -69,9 +69,13 @@ html[data-ui='vivid'] .prose blockquote {margin:1.8em 0;padding:16px 20px;
 html[data-ui='vivid'] .prose ul {padding-left:1.3em}
 html[data-ui='vivid'] .prose li {margin-bottom:.55em}
 html[data-ui='vivid'] .prose hr {border:0;border-top:1px dashed var(--line-strong);margin:2.5em 0}
+/* 标签用 home.css 里那个共用的 .tg（纯文本 #标签），不加自己的一套。
+   「标签」二字的小标也去掉了：有 # 就是标签，再来两个字是重复。
+   这里只补一点纵向内边距 —— 详情页的标签是链接，12.5px 裸文字只有 ~18px 高，
+   手机上不好点；不画背景不画边框，观感不变。 */
 html[data-ui='vivid'] .paper .end {margin-top:40px;padding-top:24px;border-top:1px dashed var(--line-strong);
-  display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
-html[data-ui='vivid'] .paper .end .lbl {font-size:12px;color:var(--muted);font-weight:700;margin-right:4px}
+  display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
+html[data-ui='vivid'] .paper .end .tg {padding:6px 0}
 html[data-ui='vivid'] .back {display:inline-flex;align-items:center;gap:6px;
   font-size:13px;font-weight:700;color:var(--accent);
   margin-bottom:20px;padding:6px 0;
diff --git a/frontend/src/ui/yohaku/home.css b/frontend/src/ui/yohaku/home.css
index cf06d35..b495bc9 100644
--- a/frontend/src/ui/yohaku/home.css
+++ b/frontend/src/ui/yohaku/home.css
@@ -86,8 +86,9 @@ html[data-ui='vivid'] .card .cov img {width:100%;height:100%;object-fit:cover;tr
   html[data-ui='vivid'] .card:hover .cov img {transform:scale(1.04)}
 }
 html[data-ui='vivid'] .card .body {padding:22px 26px 24px}
+/* 元信息挪到摘要之后（原来在标题上方）：和标签一起收在卡片尾部 */
 html[data-ui='vivid'] .card .meta {display:flex;gap:10px;align-items:center;flex-wrap:wrap;
-  font-size:12px;color:var(--muted);font-weight:600;margin-bottom:10px;}
+  font-size:12px;color:var(--muted);font-weight:600;margin-top:16px;}
 html[data-ui='vivid'] .badge {font-size:10.5px;font-weight:800;letter-spacing:.06em;
   padding:3px 9px;border-radius:999px;}
 html[data-ui='vivid'] .badge.long {background:var(--accent-soft);color:var(--accent)}
@@ -100,14 +101,12 @@ html[data-ui='vivid'] .card h2 {margin:0 0 10px;font-size:clamp(19px,2.2vw,23px)
 }
 html[data-ui='vivid'] .card .sum {margin:0;font-size:14.5px;line-height:1.75;color:var(--soft);
   display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
-html[data-ui='vivid'] .card .tags {display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
-html[data-ui='vivid'] .tg {font-size:11.5px;font-weight:700;color:var(--soft);
-  padding:4px 11px;border-radius:999px;
-  background:color-mix(in srgb,var(--ink) 5%,transparent);
-  transition:background .35s var(--spring),color .35s var(--spring),transform .35s var(--spring);}
-@media (hover: hover) and (pointer: fine) {
-  html[data-ui='vivid'] .tg:hover {background:var(--accent-soft);color:var(--accent);transform:translateY(-2px)}
-}
+html[data-ui='vivid'] .card .tags {display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
+/* 标签（信息流卡片 + 详情页共用）：纯文本 #标签，比一排药丸安静。
+   # 走 ::before，不影响链接/朗读的名字。 */
+html[data-ui='vivid'] .tg {font-size:12.5px;font-weight:600;color:var(--muted);
+  transition:color .35s var(--ease);}
+html[data-ui='vivid'] .tg::before {content:"#"}
 html[data-ui='vivid'] .note {display:block;background:transparent;
   border-left:3px solid var(--accent);
   border-radius:0 var(--radius) var(--radius) 0;
@@ -121,7 +120,7 @@ html[data-ui='vivid'] .note {display:block;background:transparent;
   box-shadow:var(--shadow);}
 }
 html[data-ui='vivid'] .note .meta {display:flex;gap:10px;align-items:center;
-  font-size:12px;color:var(--muted);font-weight:600;margin-bottom:8px;}
+  font-size:12px;color:var(--muted);font-weight:600;margin-top:16px;}
 html[data-ui='vivid'] .note .body {margin:0;font-size:15.5px;line-height:1.8;color:var(--text);}
 html[data-ui='vivid'] .note .body a {color:var(--accent);font-weight:600;
   border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
@@ -129,7 +128,7 @@ html[data-ui='vivid'] .note .body a {color:var(--accent);font-weight:600;
 @media (hover: hover) and (pointer: fine) {
   html[data-ui='vivid'] .note .body a:hover {border-bottom-color:var(--accent)}
 }
-html[data-ui='vivid'] .note .tags {display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
+html[data-ui='vivid'] .note .tags {display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
 html[data-ui='vivid'] .pager {display:flex;gap:8px;align-items:center;justify-content:center;
   margin-top:36px;flex-wrap:wrap;}
 html[data-ui='vivid'] .pager button {font-size:13px;font-weight:700;padding:9px 16px;border-radius:999px;
diff --git a/frontend/src/ui/yohaku/mobile.css b/frontend/src/ui/yohaku/mobile.css
index b0ae4c7..e1f6d1e 100644
--- a/frontend/src/ui/yohaku/mobile.css
+++ b/frontend/src/ui/yohaku/mobile.css
@@ -14,7 +14,14 @@
   /* 左右 20px 对齐：hero 的标题和下面卡片列表的左边缘要在同一条竖线上 */
   html[data-ui='vivid'] .hero {padding:48px 20px 32px}
   html[data-ui='vivid'] .wrap {padding:8px 20px 36px}
-  html[data-ui='vivid'] .paper {padding:28px 22px 36px;border-radius:16px}
+  /* 文章详情页在手机上不再套卡片：卡片边框 + .article-layout 28px + .paper 22px
+     三层一共吃掉约 84px，390 屏上正文只剩 275px。平铺成正常阅读排版，
+     正文直接落在纸面上，实测正文宽度 275px -> 330px。桌面/平板保持卡片。 */
+  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'] .about-card {padding:32px 22px}
   /* showcase 的 .showcase 是 max-width + 自己的 padding（不带 .wrap 类），
      单独对齐；用 max() 保住横屏刘海侧的安全区 */