fix: group settings navigation and align switches to the right

2026-09-30 23:33:25 +08:00
parent b6d24ada87
commit e4f7b8d993
9 changed files with 191 additions and 96 deletions
@@ -488,6 +488,7 @@ Switch 用于在两个持久状态之间立即切换，例如启用能力、开
 - Checkbox 保留原生 Checkbox 语义和方形勾选视觉，不得添加 `role="switch"`。多项分配、列表选择、确认声明和“保存时清除密钥”等一次性选择均属于 Checkbox。
 - 不创建页面专属 Switch 样式。需要紧凑布局时仍复用同一轨道、滑块、焦点环、禁用状态和动效，只调整共享组件支持的布局变体。
 - Switch 支持 Tab 聚焦和 Space 切换，键盘焦点至少显示 `2px` 高对比焦点环。可见标签应描述被控制的能力，不能只显示“开 / 关”。
+- 共享开关行统一为标签在左、Switch 靠右，说明放在标签下方；不因 JSX 中输入控件与文字的先后顺序改变视觉位置。窄窗口允许文字换行，开关保持固定尺寸。Checkbox 和 Radio 保留各自的选择布局。
 - 异步切换期间禁用重复操作并保留原状态。失败时恢复或保留最后确认状态，通过应用通知或就地可恢复错误说明原因。
 - 涉及联网、上传、电脑控制或其他外部影响的 Switch，附近必须持续说明数据去向、权限范围或风险，不能只靠设置名称表达影响。
 - 自动化测试应按 `switch` 角色查询二元开关，按 `checkbox` 角色查询多选或确认项，防止视觉迁移后语义回退。
@@ -825,10 +826,12 @@ GoodBuddy 是可调整窗口大小的桌面应用。响应式设计优先保证
 - 设置中心以整窗遮罩上的大 Modal 打开，保留底层工作区、会话草稿和助手工作栏，不切换一级页面。固定标题区和右上角关闭按钮，左侧分类与右侧内容各自滚动。关闭后返回原工作区并恢复入口焦点。
 - 新建项目与项目设置弹窗固定标题、关闭按钮和底部操作区，仅表单内容滚动；滚动条不进入标题区，关闭按钮保留至少 40 × 40px 的点击区域。
 - 项目弹窗通过 Portal 挂载到 `document.body`，避免侧栏内的弹窗与主窗口标题栏拖动区域重叠时，Electron 截获关闭按钮的鼠标输入。
- Modal 最大尺寸为 `1200px × 900px`，常规外边距为 `24px`；窗口宽度不超过 `1020px` 或高度不超过 `720px` 时接近全屏，保留 `16px` 外边距。左侧分类宽度依次为 `220px`、`180px`（宽度不超过 `1020px`）、`120px`（不超过 `720px`）；极窄窗口隐藏分类辅助说明，仍保留左右布局。内容区在可用空间内伸缩，最大宽度为 `960px`。
+- Modal 最大尺寸为 `1200px × 900px`，常规外边距为 `24px`；窗口宽度不超过 `1020px` 或高度不超过 `720px` 时接近全屏，保留 `16px` 外边距。左侧分类宽度依次为 `220px`、`180px`（宽度不超过 `1020px`）、`120px`（不超过 `720px`）；窄窗口仍保留左右布局，长分类名称可换行。内容区在可用空间内伸缩，最大宽度为 `960px`。
 - 设置 Modal 通过 Portal 挂载到 `document.body`，复用共享背景隔离与焦点恢复机制。打开后聚焦关闭按钮，Tab 在弹窗内循环；Escape 先交由嵌套弹窗处理，设置自身的 Escape 与关闭按钮共用未保存确认，确认出现后再按 Escape 返回编辑。点击遮罩不关闭；保存、测试和清理数据期间禁止关闭。每次打开重新挂载设置，模型和消息通道等直达入口使用本次指定分类，普通入口默认打开 Agent Runtime。
 - 设置中心不显示全局操作页脚，避免重复关闭入口和没有功能意义的整宽分隔线。
- 所有分类使用共享的 `SettingsCategoryHeader` 呈现分类标题、说明、错误与操作，不得在内容卡片内复制分类标题或创建页面专属操作栏。左侧分类名称与说明来自同一份分类定义，新增分类时不得分别维护导航和内容标题。
+- 所有分类使用共享的 `SettingsCategoryHeader` 呈现分类标题、说明、错误与操作，不得在内容卡片内复制分类标题或创建页面专属操作栏。左侧分类名称与右侧标题来自同一份分类定义，新增分类时不得分别维护导航和内容标题。
+- 左侧按“常规 / 模型与执行 / 功能与扩展 / 系统”分组，顺序与键盘导航一致。分类按钮最小高度 `40px`，只显示名称；分类说明集中在右侧页头，外层标题不再重复功能简介。组名使用辅助字号，普通项使用正文和中等字重，选中项使用强调底色与加粗文字。
+- 设置区块使用共享圆角、间距和表面令牌；标题为 `--font-section-title`，持久说明至少为 `--font-caption`。嵌套设置区块以顶部细分隔线和留白组织，不叠加卡片背景与四周边框。“能力与工具”的上级页签使用默认 `PageTabs` 外观，与 MCP 内部的分段页签区分。
 - 当前分类存在“保存”或“测试”等未提交配置操作时，统一放在分类页头右侧；主保存操作在最右侧，测试等次操作排列在其左侧。
 - 自动生效、仅执行即时命令或自行管理编辑流程的分类不显示全局保存操作。窄窗口下操作区可以换行，但保存入口必须保持清晰可见。
 - 智能心跳的单条配置不在设置中心重复管理。设置中心如需呈现平台级说明，只提供