fix(TorrentTitleTd): 改用 CSS flex 布局由浏览器计算宽度,避免搜索结果页重排闪烁 (#1516) - #1517
Merged
Merged
Conversation
…1516) 移除 useElementSize 对 container/tags/social 的宽度测量与手算 width/max-width,主标题/副标题 flex-1-1-0 + min-width:0 占剩余空间截断,social/tags flex-0-0 内容宽,v-row flex-nowrap 单行。修复 v4 升级后搜索结果页整列重排闪烁。
Rhilip
force-pushed
the
fix/torrent-title-td-css-layout
branch
from
September 13, 2026 14:54
c091f59 to
cbb1f46
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #1516
问题
更新到 v0.0.6.1884(Vuetify v3→v4 升级 #1454)后,全站搜索时搜索结果页面出现整列闪烁。
根因:
TorrentTitleTd.vue用useElementSize(ResizeObserver)测量container/tags/social三个元素的宽度,再通过width: ${containerWidth - socialWidth - 8}px与max-width: ${containerWidth - tagsWidth}px在 JS 中手算并写回 style。首帧渲染时三个测量值均为
0,标题 span 宽度被写为-8px(负值被浏览器忽略 → 按全宽渲染);ResizeObserver 在下一帧回调后才写入真实宽度,每行都经历「先全宽 → 再截断」的一次重排。搜索结果页成百上千行同时触发这一过程,造成肉眼可见的整列闪烁。修改
src/entries/options/components/TorrentTitleTd.vue:改为纯 CSS flexbox 布局,让浏览器一次性计算出所有宽度,彻底移除 JS 测量与手算:useElementSize对container/tags/social的三处测量,以及相关useTemplateRef与@vueuse/core引入;flex-1-1-0(flex: 1 1 0)占满剩余空间,配合.text-truncate溢出省略;并在 scoped 样式中补min-width: 0(flex item 默认min-width: auto会阻止收缩,缺省时省略号不生效);social与tags区域改用flex-0-0(flex: 0 0 auto)保持内容宽度、不被压缩;v-row增加flex-nowrap,保证单行、布局确定,不依赖 wrap。其余两处
useElementSize(用户数据统计/时间线图表容器自适应)用途不同,未修改。验证
pnpm check(vue-tsc 严格类型检查)通过;pnpm build:dist完整生产构建通过。