Repository navigation
播放条三枚读数收成网易云式缺口：图标右上角被咬掉一块，数字嵌在缺口里 - #739
Merged
Merged
Conversation
上一版（PR #736）的角标贴在图形右上外侧；本票改成网易云式——图形 右上角被一块底色圆角块「咬掉」，数字嵌进那个缺口里。 - 缺口块：Attach(TopRight→TopRight)，上沿探出 2、左缘收进图形右缘 6（只咬右上角那一口，不包住整个图形——宽字档「99k+」≈22 比图形 18 还宽，全包会把图标吃得只剩下半截），块的主体往右探进图形外 的空气里。宽按字量（MeasureText + 两侧 3），「+」结构上截不掉。 - 缺口色 = 按钮底下那块底（coverWash(t.Background)），调用方传进 countBadge；悬停/按下不用换色——flat.feel 的 DrawOver 画在一切 之上，缺口和四周同帧变深。 - 缺口块 PassThrough：底下的按钮照点，悬停照常。 - 三枚键共用同一份（赞键自己拼图形盒子也走 countBadge），键宽 仍是 32、带不带数字都一样。 - E2E 改成「缺口嵌字」判据：图形右上角那一口被咬成底色（以前是 字形笔画）、数字左缘收进图形右缘以内、主体探在图形右侧空气里。
|
| Status | Commit | Started (UTC) | Finished (UTC) |
|---|---|---|---|
✅ #a6041 Reviewed your PR |
87af0d7 |
Nov 03, 2026 · 02:14 | 02:23 |
Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
codeant-ai
Bot
added
the
size:L
PudMusic UI 截图截图测试已通过。
截图来自项目现有的 MyGo UI 测试渲染器，使用本地 fixture，不启动真实登录态。 |
|
|
视觉审查打回：数字和图标贴得太近——放大看「99k+」的字身几乎顶在 星形/拇指/气泡的笔画上，比网易云那种「豁口里留一圈白」挤。 缺口块的左右 padding 从对称 3 改成不对称：咬进图形的那一边留 8 （数字起笔和图形残笔之间有一眼能看到的缝），探在空气里的那一边 留 6。缺口块宽跟着两边一起长（textW + 8 + 6），不是字往右挤。 测试跟着新几何改：数字左缘钉在「缺口左缘 + PadL」那一带（PadL 大于 bite 时它探出图形右缘 PadL−bite——缝在数字左边）；右缘上限 换成最宽探出量 textW+PadL+PadR−bite。E2E 加一条「缝」判据：缺口 左端到数字起笔之间的那一带一个比底色深的像素都不该有。
1. MeasureText 回 0 时 textW=0 → notchW 只剩两侧 padding（≥最小宽、 兜底救不回），而 Text 的 MinWidth(0).MaxWidth(0) 把整串数字裁成 零宽——画面上剩一个空底色缺口。抽一支纯函数 badgeTextWidth：量 出来的值 ≤0 就退回上限档 playbarBadgeMaxW（缺口画宽一点，数字 一定画得出）。MeasureText 在 *ui.Context 上、mock 不掉，所以把 「量出来的值 → 兜底后的值」抽成纯函数，测试喂 0/负/正常宽三档。 2. 赞键长按三连的抖动 Translate(dx,0) 只作用在底色层和图标层，缺 口块挂在图形盒子上不吃同一个平移——按住 2.5s 全程是「图标在抖、 缺口原地不动」。给 countBadge 加一个 dx 参数：赞键传自己的 likeShakeDX，收藏/评论/测试传 0（不抖的那几枚就是恒等变换）。
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.
User description
做了什么
把播放条左边那三枚键（赞 / 收藏 / 评论）的读数从「图形右上外侧挂着的角标」改成网易云式缺口：图形的右上角被咬掉一块（露出播放条底色），数字嵌进那个缺口里——数字坐在图形的凹陷上，而不是悬在外面。
怎么实现的（矢量，不抠字形）
「挖空」用盖：在图形盒子（18×18）的右上角盖一块播放条底色的圆角块（
ui.Box+Radius(5)+Background(bg)），那一角的字形笔画就被盖成底色——视觉上图标缺了一角；数字居中画在这块底色上。Attach(AnchorTopRight, AnchorTopRight)+Top(-2)+Right(-(notchW-6))——缺口上沿探出图形上沿 2px，左缘只收进图形右缘 6px（咬的是右上角那一小块）；块的主体往右探进图形外的空气里。MeasureText量出字宽 + 两侧space.Px3——窄档缺口小、最宽档也容得下，「+」结构上截不掉（没有给截断发生的格子）。coverWash(t.Background)（封面取色染过的播放条底），三个调用点都在播放条那一列、传同一个值。悬停不用跟着换色——flat.feel的悬停淡底是DrawOver，画在一切（含缺口块和数字）之上，缺口和四周同帧变深，缝还是看不见。PassThrough()：缺口块不登记命中，底下的按钮照点、悬停照常。countBadge（赞键自己拼图形盒子、角标也走这里）；键宽仍是 32（角标不占布局）。测试
TestTheThreeCountsSitInsideANotchOnTheIconsTopRight：角标左缘收在图形右半部以内（骑在缺口上）、下缘在图形中线上方、右缘不探出缺口——外侧角标版 / 横排版 / 「包住整个图形」版都立刻红。internal/e2e/counts_test.go）改成「缺口嵌字」判据：图形右上角那一口被咬成底色（以前是星臂 / 拇指背 / 气泡弧的字形笔画）、数字墨迹骑在图形右缘上、主体探在图形右侧空气里。BIU_SHOT_DIR）：三枚图标各保住大半个形状，「99k+」从左收进缺口、往右排进空气里，缺口圆角读起来是「咬进去一口」不是「贴了块补丁」。已知边界
PassThrough，不挡邻居的命中）——网易云本来就是那个形状，而那一列的底色是均一的，缝看不见。go test ./internal/e2e/在menu_test.go有一处先于本票的编译错（seedSession未定义，origin/main上同样红），与本票无关。CodeAnt-AI Description
将播放条互动数嵌入图标右上角缺口
What Changed
Impact
✅ 播放条互动数与图标融为一体✅ 点击和悬停仍可正常使用✅ 大数显示保留「+」且不撑宽按钮💡 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:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
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:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
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.