Skip to content

视觉小调整:对齐边缘、去掉叠在一起的线和阴影、统一控件高度 - #474

Merged
PathGao merged 1 commit into
mainfrom
visual-tidy
Nov 14, 2026
Merged

PathGao merged 1 commit into
mainfrom
visual-tidy

Conversation

@PathGao

@PathGao PathGao commented Nov 14, 2026 •

Copy link
Copy Markdown
Owner

改了什么

一批视觉小调整,范围是侧边栏、设置页、弹窗、分拣台、摘读记录、关注、专注模式和 B站页面标记。每一条都拍了前后截图,由我逐条选定;没选的没动。

  • 对齐:侧边栏内容左右对到 12px。分拣台头部四行的右边缘、卡片底部「✎ 备注」的左边缘对齐。设置页右栏三种块的文字对到 24px。专注模式右上角按钮组的右边缘对齐字幕栏。
  • 少线少阴影:侧边栏回答里「复制」上面的分割线、历史对话每行的静止边框、只有错误时外面那层灰气泡。分拣台和摘读记录头部白卡的常驻阴影(DESIGN 写的是滚动后才出现)、当前卡片和关注卡片悬停的阴影。设置页指引灰块下面和页签条上面的线。关注普通提示的线框。弹窗「详情」的边框(字幕预览能滚动,边框留着)。
  • 统一尺寸:设置页控件都是 32px。专注模式圆按钮从 34×36 改成 36×36,设置面板控件 28px,勾选框外面不再套胶囊。分拣台内置播放框圆角和胶囊高度走 token。关注卡片间距同收藏夹。
  • 照 DESIGN 的颜色表:设置页目录当前项从蓝底蓝字改成粉线。视频页那一行和动态筛选条的紫线从 3px 圆角改成 2px 直线。
  • 信息层级:分拣台封面去掉 AI 判断角标,判断行的徽标和右边按钮的颜色已经在说同一个结论。专注模式字幕时间戳压轻。摘读记录状态行改成弹窗那一套(进行中转圈、失败红框、其余绿点加粗),AI 打标签的分批进度也算进行中。「删除 AI 对话」缩到和同一行的「查看 N 轮问答」一样大。
  • 设置页 Obsidian 的「测试连接」挪到 Key 输入框右边,结果写在 Key 名字下面,原来那一整行去掉。MCP 的「安装」「Agent 最近的修改」两行改成整宽,安装命令不再被挤窄。
  • 修一处残留:窗口窄于 899px 时,一条旧规则把分拣台封面图定成 96×54,填不满 128×80 的封面框,右边和下边露出底色。

DESIGN.md 同步写了定下来的尺寸和样子。

验证

  • node scripts/selftest.mjs:这个提交单独检出跑,50 个全过。
  • node scripts/smoke.mjs(无头 Chrome 装扩展):和 复制和下载的结果写在按钮上,其余一次性结果走会消失的提示 #475 叠在一起跑,通过。
  • 每条调整在演示页(?demo 假数据)上拍了前后截图逐条核对;专注模式的几条在真实 B站视频页上核对。
  • 没测到:专注模式按钮组右边缘对齐只在 B站看过,YouTube 没看。深色主题只靠 token 推断,没逐条看。

侧边栏、设置页、弹窗、分拣台、摘读记录、关注、专注模式和 B站页面标记的一批小调整,逐条由用户看过前后截图后选定。

- 对齐:侧边栏内容左右对到 12px;分拣台头部四行右边缘、卡片底部「✎ 备注」左边缘对齐;设置页右栏三种块的文字对到 24px;专注模式按钮组右边缘对齐字幕栏。
- 少线少阴影:侧边栏回答里「复制」上面的分割线、历史对话每行的静止边框、只有错误时外面那层灰气泡;分拣台和摘读记录头部白卡的常驻阴影、当前卡片的阴影;设置页指引灰块下面和页签条上面的线;关注普通提示的线框;弹窗「详情」的边框。
- 统一尺寸:设置页控件 32px;专注模式圆按钮 36×36、面板控件 28px;分拣台内置播放框圆角和胶囊高度走 token;关注卡片间距同收藏夹。
- 照 DESIGN 的颜色表:设置页目录当前项改粉线;视频页那一行和动态筛选条的紫线改 2px 直线。
- 信息层级:分拣台封面去掉 AI 判断角标(判断行和按钮已经在说);专注模式字幕时间戳压轻;摘读记录状态行改成弹窗那一套(绿点、转圈、红框),「删除 AI 对话」缩到和同行一样大。
- 设置页 Obsidian 的「测试连接」挪到 Key 输入框右边,结果写在 Key 名字下面;MCP 的「安装」「Agent 最近的修改」两行改整宽。
- 修一处残留:窗口窄于 899px 时分拣台封面图只有 96×54,填不满 128×80 的封面框。
@PathGao
PathGao merged commit 2aeed77 into main Nov 14, 2026
2 checks passed
@PathGao
PathGao deleted the visual-tidy branch November 14, 2026 10:30
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