Skip to content

fix(TorrentTitleTd): 改用 CSS flex 布局由浏览器计算宽度,避免搜索结果页重排闪烁 (#1516) - #1517

Merged
Rhilip merged 1 commit into
pt-plugins:masterfrom
Rhilip:fix/torrent-title-td-css-layout
Sep 14, 2026
Merged

Rhilip merged 1 commit into
pt-plugins:masterfrom
Rhilip:fix/torrent-title-td-css-layout

Conversation

@Rhilip

@Rhilip Rhilip commented Sep 13, 2026

Copy link
Copy Markdown
Collaborator

Closes #1516

问题

更新到 v0.0.6.1884(Vuetify v3→v4 升级 #1454)后,全站搜索时搜索结果页面出现整列闪烁。

根因:TorrentTitleTd.vueuseElementSize(ResizeObserver)测量 container / tags / social 三个元素的宽度,再通过
width: ${containerWidth - socialWidth - 8}pxmax-width: ${containerWidth - tagsWidth}px 在 JS 中手算并写回 style。

首帧渲染时三个测量值均为 0,标题 span 宽度被写为 -8px(负值被浏览器忽略 → 按全宽渲染);ResizeObserver 在下一帧回调后才写入真实宽度,每行都经历「先全宽 → 再截断」的一次重排。搜索结果页成百上千行同时触发这一过程,造成肉眼可见的整列闪烁。

修改

src/entries/options/components/TorrentTitleTd.vue:改为纯 CSS flexbox 布局,让浏览器一次性计算出所有宽度,彻底移除 JS 测量与手算:

  • 删除 useElementSizecontainer / tags / social 的三处测量,以及相关 useTemplateRef@vueuse/core 引入;
  • 主标题、副标题(subTitle)改用 flex-1-1-0flex: 1 1 0)占满剩余空间,配合 .text-truncate 溢出省略;并在 scoped 样式中补 min-width: 0(flex item 默认 min-width: auto 会阻止收缩,缺省时省略号不生效);
  • socialtags 区域改用 flex-0-0flex: 0 0 auto)保持内容宽度、不被压缩;
  • 两处 v-row 增加 flex-nowrap,保证单行、布局确定,不依赖 wrap。

其余两处 useElementSize(用户数据统计/时间线图表容器自适应)用途不同,未修改。

验证

  • pnpm check(vue-tsc 严格类型检查)通过;
  • pnpm build:dist 完整生产构建通过。

…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
Rhilip force-pushed the fix/torrent-title-td-css-layout branch from c091f59 to cbb1f46 Compare September 13, 2026 14:54
@Rhilip
Rhilip merged commit 1832800 into pt-plugins:master Sep 14, 2026
1 check passed
@Rhilip
Rhilip deleted the fix/torrent-title-td-css-layout branch September 14, 2026 12:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

更新后搜索结果页面闪烁

1 participant