fix: 修复窗口缩小时界面溢出与原生滚动条 fixes #149 - #161
Open
K-Blaaaack wants to merge 1 commit into
Open
Conversation
Contributor
|
其实 fix 要加在正文的(? |
Collaborator
其实有效果,因为写在 commit 标题上了。如果不写 commit 标题只写 pr 标题我就不知道了(
|
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.
改动类型
是否包含破坏性变更
改动说明
修复 #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 层,消除原生整页滚动条;内容滚动仍由内部main的overflow-y-auto负责。global.css:::-webkit-scrollbar补充height: 6px,使横向滚动条与纵向统一为 6px 细样式(兜底)。关联 Issue
#149
测试情况
pnpm typecheck通过自查清单
pnpm format,并确认pnpm typecheck、pnpm lint通过pnpm build:native验证;未手写native/*/index.d.tsdev分支提交