51 lines
1.8 KiB
Markdown
51 lines
1.8 KiB
Markdown
# 设置面板滚动修复
|
|
|
|
状态：已实现并验证
|
|
|
|
创建日期：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 加载区可见，窗口不再遮挡底部内容。
|