From e6e4bdc71cad380130060ab5ded6a5ff487534dc Mon Sep 17 00:00:00 2001 From: Sakurasan <26715255+Sakurasan@users.noreply.github.com> Date: Tue, 29 Sep 2026 12:01:11 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E4=B8=A4=E5=A5=97=20UI=20=E7=9A=84?= =?UTF-8?q?=E6=A8=AA=E5=90=91=E6=BA=A2=E5=87=BA=20+=20vivid=20=E9=A1=B5?= =?UTF-8?q?=E8=84=9A=E6=8A=8A=E6=BA=90=E7=A0=81=E5=85=A5=E5=8F=A3=E4=BB=8E?= =?UTF-8?q?=E7=A4=BE=E4=BA=A4=E6=8E=92=E9=87=8C=E5=88=86=E5=87=BA=E6=9D=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 溢出（两处，同一类成因）： - vivid 时间线：短文正文用的是 .note .body 而不是 .prose，所以 c6eb0bb 给 .prose 加的 overflow-wrap:anywhere 没覆盖到它，正文里的裸链接把列撑到 552px （视口 516）。补上 anywhere 而非 break-word——要参与 min-content 计算才压得住 - classic 时间线：.shell 的页边距在 640px 断点从 20px 收到 12px，而 .row-feed 的 负出血要到 520px 才跟着收到 -12px，521~640 这段出血比父容器内边距多 4px， 整页横向溢出。把出血断点对齐到 640px（桌面视觉不动） - LinkCard 的 .lc-site 同样补 anywhere：主机名是最典型的不可断行长 token vivid 页脚：源码仓库入口原先被 concat 进社交数组，和站主的 GitHub/X 排成同一行， 看起来像「又一个社交账号」。改成社交排只放账号（同 classic RightRail 的过滤）， 源码图标与版权单独成 .foot-meta 压在页脚最底；样式写在 .foot a 之后，靠同特指度 的后者压掉页脚链接默认的强调色 --- frontend/src/components/LinkCard.vue | 3 +++ frontend/src/components/PostCard.vue | 10 +++++++++- frontend/src/ui/yohaku/YohakuFoot.vue | 16 ++++++++++++---- frontend/src/ui/yohaku/chrome.css | 10 ++++++++++ frontend/src/ui/yohaku/home.css | 7 ++++++- 5 files changed, 40 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/LinkCard.vue b/frontend/src/components/LinkCard.vue index 41d0c57..c2db575 100644 --- a/frontend/src/components/LinkCard.vue +++ b/frontend/src/components/LinkCard.vue @@ -83,6 +83,9 @@ function open() { letter-spacing: 0.04em; text-transform: lowercase; color: var(--v-muted, var(--faint)); + /* 主机名是最典型的不可断行长 token（子域一长串），不给它 anywhere + 就会把卡片左列顶宽、整行溢出 */ + overflow-wrap: anywhere; } .lc-title { diff --git a/frontend/src/components/PostCard.vue b/frontend/src/components/PostCard.vue index bb9cc18..09a2dbd 100644 --- a/frontend/src/components/PostCard.vue +++ b/frontend/src/components/PostCard.vue @@ -274,11 +274,19 @@ const gridW = computed(() => (props.post.images && props.post.images.length === gap: 6px; } +/* 出血必须跟 .shell 的页边距同步：styles.css 里 .shell 在 640px 断点从 20px + 收到 12px，这里就得同时从 -16px 收到 -12px。之前写的是 520px，于是 + 521~640 这段（窄窗口 / 横屏手机）出血比父容器内边距多 4px，整页横向溢出。 */ +@media (max-width: 640px) { + .row-feed { + margin: 0 -12px; + } +} + @media (max-width: 520px) { .row-feed { grid-template-columns: 34px minmax(0, 1fr); padding: 16px 12px; - margin: 0 -12px; } .avatar { diff --git a/frontend/src/ui/yohaku/YohakuFoot.vue b/frontend/src/ui/yohaku/YohakuFoot.vue index e34c854..32ae14a 100644 --- a/frontend/src/ui/yohaku/YohakuFoot.vue +++ b/frontend/src/ui/yohaku/YohakuFoot.vue @@ -3,10 +3,11 @@ import { RouterLink } from 'vue-router' import { site } from '../../site' import { socialIcon } from '../../socialIcons' -// 社交按钮与 classic 页脚同源：后台「社交链接」+ 固定源码仓库入口 +// 社交排只放站主自己的账号；源码仓库是「项目信息」，和 classic 页脚一样单独 +// 成行挂在版权旁边（RightRail 的 .foot-meta）。混在一起会让人以为这是本站的 +// 社交身份之一，而它其实是代码仓库入口。 const PROJECT_REPO = 'https://git.gopher.ink/mirrors2/ONE' -const social = (site.social_links || []).concat([{ label: '源码', url: PROJECT_REPO }]) - .filter((s) => s && s.url) +const social = (site.social_links || []).filter((s) => s && s.url && s.url !== PROJECT_REPO) // 余白页脚。对应设计稿的