# 设置面板滚动修复

状态：已实现并验证

创建日期：2026-05-28

实现日期：2026-05-28

## 背景

设置面板已经承载认证状态、API key、环境变量、模型角色和 Skill 加载。内容高度超过部分屏幕时，弹窗本身没有限制高度，内容区也没有独立滚动，导致底部设置不可见。

## 目标

- 设置面板在普通桌面窗口和较矮窗口里都能看完整内容。
- 标题和关闭按钮始终保留在弹窗顶部。
- 设置项在弹窗内部滚动，不影响背后的工作台布局。
- 不改变设置项的数据逻辑，不新增依赖。

## 方案

采用“弹窗外框限高 + 内容区内部滚动”：

- 弹窗最高不超过屏幕高度，并保留上下边距。
- 弹窗分成顶部标题区和内容区。
- 内容区独立滚动，确保底部 Skill 加载设置可达。

暂不改成独立设置页，也暂不拆分设置标签。当前设置仍是辅助操作，用弹窗更符合工作台心智；等设置项继续增多后，再考虑拆成“认证 / 模型 / Skill”等页签。

## 验收标准

1. 打开设置后，底部 Skill 加载区可见或可通过滚动到达。
2. 设置内容滚动时，标题和关闭按钮仍在顶部。
3. 不影响 API key 输入、模型角色选择和 Skill 开关。
4. 前端检查和构建通过。

## 实施结果

已按本文方案实现：

- 设置弹窗增加屏幕高度上限。
- 弹窗内部采用标题区 + 可滚动内容区。
- 内容区增加最小高度保护，避免矮窗口下滚动区域被撑开。

验证结果：

- `npm run typecheck` 通过。
- `npm run build --workspace=@llm-wiki-agent/web` 通过。
- `npm run lint --workspace=@llm-wiki-agent/web` 通过。
- Chrome 中打开设置面板，确认底部 Skill 加载区可见，窗口不再遮挡底部内容。