title: [ISSUE-0020] 设置页双滚动条 — v0.10.18 修不彻底（二次修复） description: "修复截图右侧两个滚动条的问题" tags: [issue, settings] created: 2026-05-26 updated: 2026-05-26 type: issue status: fixed severity: medium

[ISSUE-0020] 设置页双滚动条 — v0.10.18 修不彻底（二次修复）¶

相关源码：src/sections/settings/view/settings-view.tsx、src/sections/layout/main-layout.tsx

用户感知的现象¶

"修复截图右侧两个滚动条的问题"（用户第二次提到）

打开设置页，右侧仍能看到两个独立的滚动条——这是 ISSUE-0007 在 v0.10.18 已声称修复的问题，但实际没修到根。

根因分析¶

v0.10.18 的错误假设¶

v0.10.18 看代码只看到了 Card height = windowHeight + 自己的 CardContent overflow，没有去查父级容器是否已经在滚动。

真实数据流¶

main-layout.tsx:483
  <Box sx={{ flex: 1, minHeight: 0, overflow: 'auto' }}>  ← 父级已经是滚动容器！
    {renderPage()}  ← <SettingsView />
  </Box>

settings-view.tsx 又设：

<Card sx={{ height: windowHeight, display: 'flex', flexDirection: 'column' }}>
  <CardContent sx={{ overflowY: 'auto', flex: 1, minHeight: 0 }}>

Card height: windowHeight = 整个浏览器窗口高度（包括 sidebar / header / banner 占的空间）
父 Box 的实际高度 < windowHeight（被 sidebar 等占了）
→ Card 超出父 Box → 父 Box 出现滚动条
→ 同时 Card 内 CardContent 也 overflow: auto → 内部又一条
= 两个滚动条

v0.10.18 在错误的层级加 overflow，与父级形成嵌套滚动。

修复方案（v0.10.21）¶

让父级（main-layout 的 Box）独自负责滚动。settings-view 内部完全不要 overflow / 固定高度：

// 之前 v0.10.18
<Card sx={{ width: 1, height: windowHeight, display: 'flex', flexDirection: 'column' }}>
  <Box sx={{ p: 2.5, overflowY: 'auto', flex: 1, minHeight: 0 }}>...</Box>
  <CardContent sx={{ overflowY: 'auto', flex: 1, minHeight: 0, pt: 0 }}>...</CardContent>
</Card>

// v0.10.21 修复后
<Card sx={{ width: 1 }}>
  <Box sx={{ p: 2.5 }}>...</Box>
  <CardContent sx={{ pt: 0 }}>...</CardContent>
</Card>

Card 高度自适应内容；父 Box 已 overflow: auto，自然产生单条滚动条。

独立窗口路径（settings.html + EmptyLayout）：没有任何父级 overflow → 浏览器 body 自己滚动 → 同样单条。两种用法都对。

改动文件¶

文件	改了什么
`src/sections/settings/view/settings-view.tsx`	Card / Box / CardContent 移除所有 overflow + flex 高度控制

验证方式¶

打开主面板 → 数据 / 任务 → 切到「设置」tab
右侧应只有 1 个滚动条
滚动顺畅，所有 section 可达
切到「云端设置」tab 也只有 1 条
缩放浏览器窗口，单条滚动条始终唯一

如何避免再犯¶

修嵌套滚动 bug 前必须查父级链：每一层父级的 overflow / height 都要看清楚
「修了 bug」≠「修好了」（与 ISSUE-0013 同源教训）：写完 fix 必须实测，不能只看代码
「子组件不应假设自己是页面根」：在共用组件里设 overflow: auto + 绝对高度是反模式，可能与未来的父级冲突
首选「让父级负责滚动」：子组件高度自适应内容，比子组件硬撑高度 + 自己滚动更稳

与 ISSUE-0019 的关系¶

ISSUE-0019 是 form-provider 加 flex: 1 的潜在副作用。v0.10.21 修后 settings 不再需要 form 充满父级，form-provider 的 flex 在这个用例下成了多余但无害的属性（block-level form 不在 flex 容器里时 flex:1 被忽略）。ISSUE-0019 仍保持 ⚠️ 观察状态。