短文配图：快发盒上传 + Twitter 式网格 + 全站 lightbox 预览；整卡点击进详情、时间线短文豁免首字

frontend/src/ui/yohaku/YohakuArticle.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { sanitizeHtml } from '../../utils'
+import { openLightbox } from '../../lightbox'
 import CommentSection from '../../components/comments/CommentSection.vue'
 
 // 余白文章页。对应设计稿 viewPost() 的三栏「纸」：
@@ -168,6 +169,23 @@ function onTocClick(e) {
 
         <div class="prose" :class="{ 'prose-note': isShort }" v-html="sanitizeHtml(props.contentHtml)" />
 
+        <!-- 短文配图：Twitter 式网格（快发盒上传）；点图开预览 -->
+        <div
+          v-if="isShort && props.post.images && props.post.images.length"
+          class="post-imgs"
+          :class="'n' + Math.min(props.post.images.length, 4)"
+        >
+          <img
+            v-for="(u, i) in props.post.images.slice(0, 4)"
+            :key="i"
+            :src="u"
+            alt=""
+            loading="lazy"
+            decoding="async"
+            @click="openLightbox(props.post.images, i)"
+          />
+        </div>
+
         <div class="end">
           <RouterLink v-for="t in props.post.tags || []" :key="t" class="tg" to="/tags">{{ t }}</RouterLink>
         </div>

frontend/src/ui/yohaku/YohakuFeed.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { RouterLink } from 'vue-router'
+import { openLightbox } from '../../lightbox'
 
 // 余白列表。对应设计稿的 <div class="feed">：长文是卡片（封面 + 标题 + 摘要 + 元信息 + 标签），
 // 短文是纸条（直接铺正文，元信息在正文后）。两种密度混在同一条时间线里，这是设计稿的主张。
@@ -54,6 +55,22 @@ 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" />
+        <!-- 短文配图：Twitter 式网格（快发盒上传）；点图开预览（不跳详情） -->
+        <div
+          v-if="p.images && p.images.length"
+          class="imgs"
+          :class="'n' + Math.min(p.images.length, 4)"
+        >
+          <img
+            v-for="(u, i) in p.images.slice(0, 4)"
+            :key="i"
+            :src="u"
+            alt=""
+            loading="lazy"
+            decoding="async"
+            @click.prevent.stop="openLightbox(p.images, i)"
+          />
+        </div>
         <div class="meta">
           <span class="badge short">SHORT</span>
           <time :datetime="p.published_at">{{ fmtDateTime(p.published_at) }}</time>

frontend/src/ui/yohaku/article.css

@@ -130,6 +130,11 @@ html[data-ui='vivid'] .paper > .end {margin-top:40px;padding-top:24px;border-top
   display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
 html[data-ui='vivid'] .paper > .end .tg {padding:6px 0}
 
+/* 短文配图：Twitter 式网格（快发盒上传，≤4 张；跟 prose 同宽，圆角跟 vivid 走） */
+html[data-ui='vivid'] .post-imgs {margin-top: 6px;
+  border-radius: var(--radius);}
+html[data-ui='vivid'] .post-imgs.n1 img {max-height: 520px;}
+
 /* ==========================================================================
    把 classic 的 .prose 挡回去
    --------------------------------------------------------------------------

frontend/src/ui/yohaku/home.css

@@ -128,6 +128,19 @@ 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)}
 }
+/* 短文配图：Twitter 式网格（快发盒上传，≤4 张） */
+html[data-ui='vivid'] .note .imgs {display:grid;gap:3px;margin-top:10px;
+  border-radius:var(--radius);overflow:hidden;}
+html[data-ui='vivid'] .note .imgs img {display:block;width:100%;height:100%;
+  object-fit:cover;cursor:zoom-in;}
+html[data-ui='vivid'] .note .imgs.n2,
+html[data-ui='vivid'] .note .imgs.n4 {grid-template-columns:1fr 1fr;}
+html[data-ui='vivid'] .note .imgs.n3 {grid-template-columns:1fr 1fr;}
+html[data-ui='vivid'] .note .imgs.n2 img,
+html[data-ui='vivid'] .note .imgs.n4 img {aspect-ratio:1;}
+html[data-ui='vivid'] .note .imgs.n3 img {aspect-ratio:1;}
+html[data-ui='vivid'] .note .imgs.n3 img:first-child {grid-row:span 2;
+  aspect-ratio:auto;height:100%;}
 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;}