Skip to content

fix: 修复窗口缩小时界面溢出与原生滚动条 fixes #149 - #161

Open
K-Blaaaack wants to merge 1 commit into
SPlayer-Dev:devfrom
K-Blaaaack:fix/issue-149
Open

fix: 修复窗口缩小时界面溢出与原生滚动条 fixes #149#161
K-Blaaaack wants to merge 1 commit into
SPlayer-Dev:devfrom
K-Blaaaack:fix/issue-149

Conversation

@K-Blaaaack

@K-Blaaaack K-Blaaaack commented Aug 14, 2026

Copy link
Copy Markdown

改动类型

  • 新功能(feat)
  • 缺陷修复(fix)
  • 重构 / 优化(不改变对外行为)
  • 文档(docs)
  • 其他(请在「改动说明」中注明)

是否包含破坏性变更

  • 是(请在「改动说明」中详细描述)

改动说明

修复 #149:窗口缩小到较窄宽度时,顶栏文字与控件溢出、重叠,并出现浏览器原生的粗横向滚动条。

动机:窗口最小宽度为 800px,此时侧边栏占 240px,顶栏可用宽度仅剩约 560px。顶栏左侧按钮组、固定宽度搜索框(240px)与右侧按钮组(登录状态下含头像昵称与窗口控制按钮,可超过 300px)均为 shrink-0 不可收缩,固有宽度之和超过可用宽度,必然溢出。同时主界面根容器(h-screen flex)未设置 overflow-hidden,溢出一路传播到 document 层触发整页原生滚动条;滚动条样式只设置了 width 未设置 height,横向滚动条退化为未样式的粗条。

主要变更

  • NavHeader.vue:将固定宽度的搜索框从 shrink-0 左侧按钮组移出,放入独立的 flex-1 min-w-0 可收缩插槽。窄窗口下左右按钮组保持完整,搜索框优先压缩。
  • NavSearch.vue:搜索框触发样式由 w-60(固定 240px)改为 w-full max-w-60 min-w-0——空间充足时仍保持最多 240px,空间不足时自动收缩,不再溢出。
  • MainLayout.vue:主界面根容器增加 overflow-hidden,阻止内容溢出传播到 document 层,消除原生整页滚动条;内容滚动仍由内部 mainoverflow-y-auto 负责。
  • global.css::-webkit-scrollbar 补充 height: 6px,使横向滚动条与纵向统一为 6px 细样式(兜底)。

关联 Issue

#149

测试情况

  • pnpm typecheck 通过
  • 手动复现:默认布局下将窗口宽度逐渐拖窄至最小值(800px),顶栏不再溢出、无原生横向滚动条;搜索框正常收缩,按钮组完整可用

自查清单

  • 本 PR 只包含一个主要功能 / 修复,没有夹带无关改动
  • 已在本地完整测试通过;AI 生成的代码同样自行测试并审阅过,未做未经验证的提交
  • 已运行 pnpm format,并确认 pnpm typecheckpnpm lint 通过
  • 改动涉及原生模块时已 pnpm build:native 验证;未手写 native/*/index.d.ts
  • 已向 dev 分支提交

@PhantomPixel-0418

PhantomPixel-0418 commented Aug 15, 2026

Copy link
Copy Markdown
Contributor

其实 fix 要加在正文的(?
不然没效果

@MoYingJi

Copy link
Copy Markdown
Collaborator

其实 fix 要加在正文的(?
不然没效果

其实有效果,因为写在 commit 标题上了。如果不写 commit 标题只写 pr 标题我就不知道了(

你可以通过在拉取请求说明或提交消息中使用支持的关键字将拉取请求链接到问题。 拉取请求必须位于默认分支上。(source)

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.

3 participants