From 92654dec9fed6bda999eea5417a55bd3b21d82eb Mon Sep 17 00:00:00 2001
From: Sakurasan <26715255+Sakurasan@users.noreply.github.com>
Date: Wed, 30 Sep 2026 22:55:42 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B8=A6=E5=9B=BE=E7=9F=AD=E6=96=87=E6=A1=8C?=
 =?UTF-8?q?=E9=9D=A2=E7=AB=AF=E5=B7=A6=E5=8F=B3=E5=88=86=E6=A0=8F=EF=BC=9A?=
 =?UTF-8?q?=E6=96=87=E5=AD=97=202/5=E3=80=81=E5=9B=BE=203/5=EF=BC=8C?=
 =?UTF-8?q?=E5=9B=BE=E4=B8=8D=E5=86=8D=E5=85=A8=E5=AE=BD=E9=93=BA=E5=BC=80?=
 =?UTF-8?q?=E5=90=83=E9=AB=98=E5=BA=A6=EF=BC=9B=E7=AA=84=E5=B1=8F=E7=BB=B4?=
 =?UTF-8?q?=E6=8C=81=E5=A0=86=E5=8F=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/ui/yohaku/YohakuFeed.vue |  4 ++--
 frontend/src/ui/yohaku/home.css       | 17 +++++++++++++++++
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/frontend/src/ui/yohaku/YohakuFeed.vue b/frontend/src/ui/yohaku/YohakuFeed.vue
index 8ea5aa4..f1f6a57 100644
--- a/frontend/src/ui/yohaku/YohakuFeed.vue
+++ b/frontend/src/ui/yohaku/YohakuFeed.vue
@@ -54,8 +54,8 @@ const shortTitle = (p) => plain(p.content_html).slice(0, 40) + '…'
         </div>
       </RouterLink>
 
-      <!-- 短文：纸条，正文直接铺开 -->
-      <RouterLink v-else class="note" :to="`/post/${encodeURIComponent(p.slug)}`">
+      <!-- 短文：纸条，正文直接铺开；带图时桌面端左右分栏（.split，见 home.css） -->
+      <RouterLink v-else class="note" :class="{ split: p.images && p.images.length > 0 }" :to="`/post/${encodeURIComponent(p.slug)}`">
         <div class="body" v-html="thumbifyHtml(p.content_html)" />
         <!-- 短文配图：Twitter 式网格（快发盒上传）；点图开预览（不跳详情） -->
         <div
diff --git a/frontend/src/ui/yohaku/home.css b/frontend/src/ui/yohaku/home.css
index 374729c..c58d3e8 100644
--- a/frontend/src/ui/yohaku/home.css
+++ b/frontend/src/ui/yohaku/home.css
@@ -154,6 +154,23 @@ html[data-ui='vivid'] .note .imgs.n2 {grid-template-rows:minmax(0,1fr);}
 html[data-ui='vivid'] .note .imgs.n3,
 html[data-ui='vivid'] .note .imgs.n4 {grid-template-rows:minmax(0,1fr) minmax(0,1fr);}
 html[data-ui='vivid'] .note .imgs.n3 img:first-child {grid-row:span 2;}
+/* 桌面端带图短文：文字、图片各占一半，图片不再因全宽铺开而吃高度——
+   半宽下沿用各 n* 自己的 2:1 容器比例，高度自动减半。meta/标签铺整行垫在
+   卡片底部：若让图跨多行去对齐左列内容，grid 会把跨行项的富余高度摊到
+   各 auto 行里，左列出现行间空隙。n1 没有自己的容器比例，这里补 2:1。
+   窄屏退回上下堆叠（图紧跟正文），≤720px 不分栏。 */
+@media (min-width:721px) {
+  html[data-ui='vivid'] .note.split {display:grid;grid-template-columns:2fr 3fr;
+    column-gap:18px;row-gap:10px;}
+  html[data-ui='vivid'] .note.split .body {grid-column:1;grid-row:1;}
+  html[data-ui='vivid'] .note.split .imgs {grid-column:2;grid-row:1;
+    margin-top:0;align-self:start;}
+  html[data-ui='vivid'] .note.split .imgs.n1 {aspect-ratio:2/1;
+    grid-template-rows:minmax(0,1fr);}
+  html[data-ui='vivid'] .note.split .link-card,
+  html[data-ui='vivid'] .note.split .meta,
+  html[data-ui='vivid'] .note.split .tags {grid-column:1 / -1;margin-top:0;}
+}
 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;}