Skip to content

首页切 Tab 滑动中在两页接缝处画一条分割线,遮住被竖切的卡片右缘 - #738

Merged
ShellMonster merged 2 commits into
mainfrom
work/pager-seam
Nov 3, 2026
Merged

ShellMonster merged 2 commits into
mainfrom
work/pager-seam

Conversation

@ShellMonster

@ShellMonster ShellMonster commented Nov 3, 2026 •

Copy link
Copy Markdown
Owner

User description

根因

切 Tab 是横向滑动(票 #706):两页紧挨着平移(strip 用 Left(oldX) 整条挪),而容器是直角 Clip()。

「尖」是两件事叠出来的:

  • 两页顶部结构不同——榜单页有 112px 圆角 hero + 表头,普通页列表从顶起;
  • Clip() 把 hero 卡片拦腰竖切——被切的卡片右缘是一条硬竖边,下面直角内容直接露出,两页之间没有任何过渡。

修法

滑动中在两页之间画一条竖向分割线(网易云翻页那种缝隙感):盖住被竖切的卡片右缘、弱化左右顶对齐差。

  • 挂哪一层:挂在 Clip 容器上(不是 strip 里),Absolute 定位——它要的位置是「容器里的接缝 x」(oldX + width,即左页右缘)。塞进 strip 里会跟着平移、而且占一段宽度把右页挤歪。
  • 样式:1 DIP 宽(和框架的 ui.Divider 一致),色取主题的 Border(和侧栏右缘、队列抽屉头下那条线同一个 token,不硬编)。
  • 只在滑动中:静止时接缝不在画面上(ViewPager 的样子),分割线也就不建——它在 oldTab >= 0 那一支里建,不在稳态那一支里。
  • 双向:左滑右滑接缝都在 oldX + width 同一个位置,一条就盖住两个方向。

验证

  • TestThePagerDrawsASeamBetweenTheTwoPagesWhileSliding:断滑动中途接缝元素在(Label 「pager-seam」)、x 落在「容器左沿 + oldX + width」、宽 ≤ 8 DIP、高 > 0;静止时没有、走完之后收掉。
  • TestRenderPagerSeamShots(BIU_SHOT_DIR):静止 / 滑动中途 / 走完三张图——滑动中途 x≈641 处有一条 #dfdad4 竖线(Border 色),另两张同一位置没有。
  • e2e(BIU_RUN_MYGO_E2E=1):真窗口 capture,pager-seam 在树上且它的 bounds 里有墨(比底色深的一条竖带),走完之后从树里消失。

已知(与本票无关)

  • go vet -tags e2e ./internal/e2e/ 在 origin/main 上就红:menu_test.go:168 用了不在作用域里的 seedSession(它在 startRealAppWith 的参数里,用到的是 startRealAppWithArgs 里)。这一票没动它。
  • TestSwitchingBackRestoresThatTabsScrollPosition 在干净 main 上也红(同一报错),与本改动无关。

CodeAnt-AI Description

Add a divider at the page seam during home tab transitions

What Changed

  • A thin divider appears between the two pages while switching home tabs, covering the hard edge of cards clipped during the swipe.
  • The divider uses the theme’s border color and disappears when the transition ends.

Impact

✅ Covered card edges during tab swipes
✅ Clearer separation between pages
✅ No divider on settled pages

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

切 Tab 是横向滑动(票 #706):两页紧挨着平移,容器是直角 Clip()——
榜单页那张 112px 圆角 hero 被拦腰竖切,切出来的硬边和下一页直角
内容之间没有任何过渡,画面上是一道「尖」。

修法是在接缝处画一条竖向分割线(网易云翻页那种缝隙感):

- 挂在 Clip 容器上(不是 strip 里),Absolute 定位在 oldX+width
  ——即左页右缘,正好盖住被竖切的卡片右缘;
- 1 DIP 宽,取主题的 Border 色(和侧栏右缘、队列抽屉头下那条线
  同一个 token);
- 只在滑动中画:静止时接缝不在画面上,分割线也就不建;
- 双向都管:左滑右滑接缝都在同一个位置(oldX+width)。

验证:

- 新增 TestThePagerDrawsASeamBetweenTheTwoPagesWhileSliding:断滑动
  中途接缝元素在、x 落在容器左沿+oldX+width、静止时没有;
- 新增 TestRenderPagerSeamShots(BIU_SHOT_DIR):静止/滑动中途/
  走完三张图——滑动中途 x≈641 有一条竖线,另两张同一位置没有;
- 新增 e2e(BIU_RUN_MYGO_E2E=1):真窗口 capture,pager-seam 在
  树上且它的 bounds 里有墨,走完之后收掉。
@codeant-ai

codeant-ai Bot commented Nov 3, 2026 •

Copy link
Copy Markdown

CodeAnt  CodeAnt Review Status

✅  Review completed

Status Commit Started (UTC) Finished (UTC)
✅  #9cf9e Incremental review completed 3acd824 Nov 03, 2026 · 03:00 03:00
✅  #bc61f Reviewed your PR cb21d09 Nov 03, 2026 · 01:55 01:58

@codeant-ai

codeant-ai Bot commented Nov 3, 2026

Copy link
Copy Markdown

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

@codeant-ai codeant-ai Bot added the size:L This PR changes 100-499 lines, ignoring generated files label Nov 3, 2026
@github-actions

github-actions Bot commented Nov 3, 2026 •

Copy link
Copy Markdown

PudMusic UI 截图

截图测试已通过。

截图来自项目现有的 MyGo UI 测试渲染器,使用本地 fixture,不启动真实登录态。

@codeant-ai

codeant-ai Bot commented Nov 3, 2026

Copy link
Copy Markdown

CodeAnt  CodeAnt Nitpicks

1 code suggestion

1. If the animation ends before the capture and tree lookup, this branch logs the missed seam and returns successfully, so a missing seam passes the E2E test.

Logic error · internal/e2e/pager_seam_test.go:95-105

@codeant-ai

codeant-ai Bot commented Nov 3, 2026 •

Copy link
Copy Markdown

CodeAnt  CodeAnt PR Risk

🟢  Low Risk

  • The PR appears safe to merge; no actionable issues were identified in the review.

Assessed commit: 3acd8244f94f

@ShellMonster
ShellMonster merged commit 43557ff into main Nov 3, 2026
2 of 3 checks passed
@ShellMonster
ShellMonster deleted the work/pager-seam branch November 3, 2026 03:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:L This PR changes 100-499 lines, ignoring generated files

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant