diff --git a/frontend/src/components/RightRail.vue b/frontend/src/components/RightRail.vue index fc8fb52..71d5a89 100644 --- a/frontend/src/components/RightRail.vue +++ b/frontend/src/components/RightRail.vue @@ -3,7 +3,7 @@ import { computed, onMounted, ref } from 'vue' import { publicApi } from '../api' import { site } from '../site' import { socialIcon } from '../socialIcons' -import { relativeDate } from '../utils' +import { relativeDate, stripTags, thumbURL } from '../utils' // vivid 是单栏布局,右栏整体不渲染(省掉 latest/tags 两次请求)。 const isVivid = computed(() => site.ui_id === 'vivid') @@ -27,6 +27,26 @@ const links = [ const latest = ref([]) const tags = ref([]) +// 短文没有标题,侧栏拿正文开头当标识(flomo/Twitter 的做法), +// 纯图片短文显示占位;有配图时右侧带一张小缩略图。 +const EXCERPT_LEN = 22 +function excerpt(p) { + if (p.kind !== 'short') return p.title || '无题' + // 先剥 :贴链接的短文开头是 URL 本身,摘出来没有信息量; + // 剥完没字了(纯链接贴)就退到链接卡片的标题 + const noLinks = (p.content_html || '').replace(/]*>[\s\S]*?<\/a>/gi, ' ') + const text = stripTags(noLinks).replace(/\s+/g, ' ').trim() + if (text) return text.length > EXCERPT_LEN ? text.slice(0, EXCERPT_LEN) + '…' : text + if (p.link_card && p.link_card.title) { + const t = p.link_card.title + return t.length > EXCERPT_LEN ? t.slice(0, EXCERPT_LEN) + '…' : t + } + return p.images && p.images.length ? '📷 图片' : '短文' +} +function thumbOf(p) { + return p.kind === 'short' && p.images && p.images.length ? thumbURL(p.images[0], 160) : '' +} + onMounted(async () => { if (isVivid.value) return try { @@ -52,12 +72,22 @@ onMounted(async () => {

最近更新

@@ -152,7 +182,9 @@ onMounted(async () => { } .row { - display: block; + display: flex; + align-items: center; + gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line-soft); } @@ -161,10 +193,27 @@ onMounted(async () => { border-bottom: 0; } +/* 文字列吃满剩余宽度,缩略图固定在右 */ +.row-main { + flex: 1; + min-width: 0; +} + .title { display: block; font-size: 14px; line-height: 1.7; + overflow-wrap: anywhere; +} + +.thumb { + flex: 0 0 auto; + width: 34px; + height: 34px; + object-fit: cover; + border-radius: 6px; + background: var(--card); + border: 1px solid var(--line-soft); } .badge {