fix: group settings navigation and align switches to the right

UI-DESIGN.md

@@ -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 内部的分段页签区分。
 - 当前分类存在“保存”或“测试”等未提交配置操作时，统一放在分类页头右侧；主保存操作在最右侧，测试等次操作排列在其左侧。
 - 自动生效、仅执行即时命令或自行管理编辑流程的分类不显示全局保存操作。窄窗口下操作区可以换行，但保存入口必须保持清晰可见。
 - 智能心跳的单条配置不在设置中心重复管理。设置中心如需呈现平台级说明，只提供

src/renderer/src/CapabilitiesAndToolsSettingsSection.tsx

@@ -58,7 +58,6 @@ export function CapabilitiesAndToolsSettingsSection({
                 }
               ]}
               value={activeTab}
-              variant="segmented"
             />
           </div>
         }

src/renderer/src/SettingsPanel.test.tsx

@@ -1163,7 +1163,7 @@ describe('SettingsPanel runtime files', () => {
     ).toBeInTheDocument()
     expect(
       screen.getByRole('tab', { name: '上下文控制' })
-    ).toHaveTextContent('直连模型的历史压缩与原文保留')
+    ).toHaveTextContent(/^上下文控制$/)
     const enabled = screen.getByRole('switch', {
       name: '自动压缩较早的对话'
     })
@@ -1796,15 +1796,22 @@ describe('SettingsPanel runtime files', () => {
     expect(content.parentElement).toBe(navigation.parentElement)
     expect(content).toHaveClass('settings-panel__content')
     expect(
-      screen.getByText('管理模型、Runtime、平台能力、消息通道与本地数据。')
-    ).toBeInTheDocument()
+      screen.queryByText('管理模型、Runtime、平台能力、消息通道与本地数据。')
+    ).not.toBeInTheDocument()
     const runtimeTab = screen.getByRole('tab', {
       name: 'Agent Runtime'
     })
-    expect(runtimeTab).toHaveTextContent('Agent Runtime')
-    expect(runtimeTab).toHaveTextContent(
-      '配置 Agent Runtime、默认工作区与原生能力'
-    )
+    expect(runtimeTab).toHaveTextContent(/^Agent Runtime$/)
+    expect(
+      Array.from(navigation.querySelectorAll('.settings-tabs__group-label'), node => node.textContent)
+    ).toEqual(['常规', '模型与执行', '功能与扩展', '系统'])
+    expect(within(navigation).getAllByRole('tab').map(tab => tab.id)).toEqual([
+      'settings-tab-appearance', 'settings-tab-platform-features',
+      'settings-tab-model', 'settings-tab-context-control', 'settings-tab-runtime',
+      'settings-tab-ssh-hosts',
+      'settings-tab-document-parsing', 'settings-tab-channels', 'settings-tab-roles',
+      'settings-tab-capabilities', 'settings-tab-security', 'settings-tab-about'
+    ])
   })
 
   it('omits the redundant close-only footer on passive settings pages', () => {

src/renderer/src/SettingsPanel.tsx

@@ -10,6 +10,7 @@ import {
   X
 } from 'lucide-react'
 import {
+  Fragment,
   useCallback,
   useEffect,
   useLayoutEffect,
@@ -2124,7 +2125,6 @@ export function SettingsPanel({
                   <X aria-hidden="true" size={19} />
                 </button>
               }
-              description={t('center.description')}
               headingId="settings-title"
               title={t('center.title')}
             />
@@ -2142,34 +2142,35 @@ export function SettingsPanel({
             className="settings-tabs"
             role="tablist"
           >
-            {visibleSettingsCategories.map((category) => (
-              <button
-                aria-controls={`settings-panel-${category.id}`}
-                aria-label={t(
-                  `categories.${category.translationKey}.label`
+            {visibleSettingsCategories.map((category, index) => (
+              <Fragment key={category.id}>
+                {visibleSettingsCategories[index - 1]?.group !== category.group && (
+                  <span className="settings-tabs__group-label" aria-hidden="true">
+                    {t(`categoryGroups.${category.group}`)}
+                  </span>
                 )}
-                aria-selected={activeTab === category.id}
-                id={`settings-tab-${category.id}`}
-                key={category.id}
-                onClick={(event) => {
-                  requestTabChange(category.id, event.currentTarget)
-                }}
-                onKeyDown={(event) =>
-                  handleTabKeyDown(event, category.id)
-                }
-                role="tab"
-                tabIndex={activeTab === category.id ? 0 : -1}
-                type="button"
-              >
-                <strong>
-                  {t(`categories.${category.translationKey}.label`)}
-                </strong>
-                <small>
-                  {t(
-                    `categories.${category.translationKey}.navigationDescription`
+                <button
+                  aria-controls={`settings-panel-${category.id}`}
+                  aria-label={t(
+                    `categories.${category.translationKey}.label`
                   )}
-                </small>
-              </button>
+                  aria-selected={activeTab === category.id}
+                  id={`settings-tab-${category.id}`}
+                  onClick={(event) => {
+                    requestTabChange(category.id, event.currentTarget)
+                  }}
+                  onKeyDown={(event) =>
+                    handleTabKeyDown(event, category.id)
+                  }
+                  role="tab"
+                  tabIndex={activeTab === category.id ? 0 : -1}
+                  type="button"
+                >
+                  <strong>
+                    {t(`categories.${category.translationKey}.label`)}
+                  </strong>
+                </button>
+              </Fragment>
             ))}
           </nav>
 

src/renderer/src/i18n/locales/en-US/settings.ts

@@ -21,6 +21,12 @@ export const settings = {
     close: 'Close settings',
     categoriesAriaLabel: 'Settings categories'
   },
+  categoryGroups: {
+    general: 'General',
+    execution: 'Models and execution',
+    extensions: 'Features and extensions',
+    system: 'System'
+  },
   categories: {
     appearance: {
       label: 'Appearance',
@@ -30,7 +36,7 @@ export const settings = {
     platformFeatures: {
       label: 'Platform features',
       navigationDescription: 'Workspace features and navigation',
-      description: 'Choose which features appear in your GoodBuddy workspace'
+      description: 'Manage shortcuts, conversations, notifications, the default workspace, and remote projects'
     },
     model: {
       label: 'Model connections',
@@ -56,7 +62,7 @@ export const settings = {
       navigationDescription:
         'Configure Agent Runtimes, the default workspace, and native capabilities',
       description:
-        'Configure Agent Runtimes, the default workspace, and native capabilities'
+        'Configure Agent Runtimes, model sources, and native capabilities'
     },
     sshHosts: {
       label: 'Hosts and remote execution',

src/renderer/src/i18n/locales/zh-CN/settings.ts

@@ -17,6 +17,12 @@ export const settings = {
     close: '关闭设置',
     categoriesAriaLabel: '设置分类'
   },
+  categoryGroups: {
+    general: '常规',
+    execution: '模型与执行',
+    extensions: '功能与扩展',
+    system: '系统'
+  },
   categories: {
     appearance: {
       label: '外观',
@@ -26,7 +32,7 @@ export const settings = {
     platformFeatures: {
       label: '平台功能',
       navigationDescription: '功能入口与工作区能力',
-      description: '控制 GoodBuddy 工作区中显示的功能入口'
+      description: '管理快捷键、会话与通知、默认工作目录和远程项目'
     },
     model: {
       label: '模型连接',
@@ -47,7 +53,7 @@ export const settings = {
     runtime: {
       label: 'Agent Runtime',
       navigationDescription: '配置 Agent Runtime、默认工作区与原生能力',
-      description: '配置 Agent Runtime、默认工作区与原生能力'
+      description: '配置 Agent Runtime、模型来源与原生能力'
     },
     sshHosts: {
       label: '主机与远程执行',

src/renderer/src/settings-categories.ts

@@ -3,50 +3,62 @@ import i18n from './i18n'
 export const settingsCategoryList = [
   {
     id: 'appearance',
+    group: 'general',
     translationKey: 'appearance'
   },
   {
     id: 'platform-features',
+    group: 'general',
     translationKey: 'platformFeatures'
   },
   {
     id: 'model',
+    group: 'execution',
     translationKey: 'model'
   },
   {
     id: 'context-control',
+    group: 'execution',
     translationKey: 'contextControl'
   },
-  {
-    id: 'document-parsing',
-    translationKey: 'documentParsing'
-  },
   {
     id: 'runtime',
+    group: 'execution',
     translationKey: 'runtime'
   },
   {
     id: 'ssh-hosts',
+    group: 'execution',
     translationKey: 'sshHosts'
   },
   {
-    id: 'security',
-    translationKey: 'security'
+    id: 'document-parsing',
+    group: 'extensions',
+    translationKey: 'documentParsing'
   },
   {
     id: 'channels',
+    group: 'extensions',
     translationKey: 'channels'
   },
   {
     id: 'roles',
+    group: 'extensions',
     translationKey: 'roles'
   },
   {
     id: 'capabilities',
+    group: 'extensions',
     translationKey: 'capabilities'
   },
+  {
+    id: 'security',
+    group: 'system',
+    translationKey: 'security'
+  },
   {
     id: 'about',
+    group: 'system',
     translationKey: 'about'
   }
 ] as const

src/renderer/src/styles.css

@@ -9021,9 +9021,10 @@ button > svg {
 }
 
 .settings-panel__description {
-  margin: 6px 0 0;
-  color: var(--text-muted);
-  font-size: 10px;
+  margin: var(--space-2) 0 0;
+  color: var(--text-secondary);
+  font-size: var(--font-caption);
+  line-height: 1.6;
 }
 
 .settings-panel__body {
@@ -9038,15 +9039,12 @@ button > svg {
   display: flex;
   min-width: 0;
   flex-direction: column;
-  gap: 18px;
+  gap: var(--space-6);
 }
 
 .settings-tabs {
-  display: grid;
-  padding: 3px;
-  border-radius: 9px;
-  background: var(--surface-muted);
-  grid-template-columns: repeat(10, 1fr);
+  border-radius: var(--radius-control);
+  background: var(--surface-subtle);
 }
 
 .settings-tabs button {
@@ -9055,23 +9053,31 @@ button > svg {
   justify-content: center;
   flex-direction: column;
   min-height: 34px;
-  border-radius: 7px;
+  border-radius: var(--radius-control);
   background: transparent;
   color: var(--text-secondary);
   cursor: pointer;
-  font-size: 11px;
-  font-weight: 650;
+  font-size: var(--font-body);
+  font-weight: 500;
 }
 
-.settings-tabs button strong {
-  font-size: 11px;
+.settings-tabs button:hover {
+  background: var(--surface-muted);
+  color: var(--text-primary);
 }
 
-.settings-tabs button small {
-  display: none;
+.settings-tabs__group-label {
+  flex: 0 0 auto;
+  margin-top: var(--space-3);
+  padding: var(--space-2) var(--space-3) var(--space-1);
   color: var(--text-muted);
-  font-size: 9px;
-  font-weight: 400;
+  font-size: var(--font-caption);
+  font-weight: 600;
+  line-height: 1.5;
+}
+
+.settings-tabs__group-label:first-child {
+  margin-top: 0;
 }
 
 .settings-page .settings-panel__body,
@@ -9288,7 +9294,7 @@ button > svg {
   display: flex;
   min-height: 0;
   max-height: 100%;
-  padding: 6px;
+  padding: var(--space-2);
   overflow-y: auto;
   align-self: stretch;
   flex-direction: column;
@@ -9371,8 +9377,8 @@ button > svg {
 .settings-page .settings-tabs button,
 .settings-backdrop .settings-tabs button {
   flex: 0 0 auto;
-  min-height: 58px;
-  padding: 10px 12px;
+  min-height: 40px;
+  padding: var(--space-2) var(--space-3);
   align-items: flex-start;
   justify-content: center;
   text-align: left;
@@ -9381,20 +9387,14 @@ button > svg {
 .settings-page .settings-tabs button strong,
 .settings-backdrop .settings-tabs button strong {
   font-size: var(--font-body);
-  line-height: 1.35;
-}
-
-.settings-page .settings-tabs button small,
-.settings-backdrop .settings-tabs button small {
-  display: block;
-  margin-top: 3px;
-  font-size: var(--font-caption);
+  font-weight: inherit;
   line-height: 1.35;
 }
 
 .settings-page .settings-tabs button[aria-selected='true'],
 .settings-backdrop .settings-tabs button[aria-selected='true'] {
   background: var(--accent-subtle);
+  font-weight: 650;
   box-shadow: none;
 }
 
@@ -9407,18 +9407,26 @@ button > svg {
 .settings-section {
   display: flex;
   flex-direction: column;
-  padding: 16px;
+  padding: var(--space-4);
   border: 1px solid var(--border-subtle);
-  border-radius: 8px;
-  background: var(--surface-subtle);
-  gap: 13px;
+  border-radius: var(--radius-card);
+  background: var(--surface-raised);
+  gap: var(--space-4);
+}
+
+.settings-panel .settings-section .settings-section {
+  padding: var(--space-4) 0 0;
+  border: 0;
+  border-top: 1px solid var(--border-subtle);
+  border-radius: 0;
+  background: transparent;
 }
 
 .settings-section__title {
   display: flex;
   align-items: center;
-  color: var(--accent);
-  gap: 9px;
+  color: var(--text-secondary);
+  gap: var(--space-2);
 }
 
 .settings-section__title > div {
@@ -9440,12 +9448,14 @@ button > svg {
 
 .settings-section__title strong {
   color: var(--text-primary);
-  font-size: 12px;
+  font-size: var(--font-section-title);
 }
 
 .settings-section__title small {
-  color: var(--text-muted);
-  font-size: 9px;
+  margin-top: var(--space-1);
+  color: var(--text-secondary);
+  font-size: var(--font-caption);
+  line-height: 1.5;
 }
 
 .ssh-hosts-settings {
@@ -13125,6 +13135,11 @@ textarea.field-control {
   gap: var(--space-3);
 }
 
+.toggle-row > input[role='switch'] {
+  order: 1;
+  margin-inline-start: auto;
+}
+
 .toggle-row input {
   position: relative;
   min-width: 38px;
@@ -17785,15 +17800,11 @@ textarea.field-control {
   }
 
   .settings-page .settings-tabs button {
-    min-height: 52px;
+    min-height: 40px;
     align-items: flex-start;
     text-align: left;
   }
 
-  .settings-page .settings-tabs button small {
-    display: block;
-  }
-
   .heartbeat-center__metrics {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -17841,10 +17852,6 @@ textarea.field-control {
     padding: var(--space-2);
   }
 
-  .settings-backdrop .settings-tabs button small {
-    display: none;
-  }
-
   .settings-backdrop .settings-panel__header {
     padding: var(--space-4);
   }
@@ -17905,7 +17912,7 @@ textarea.field-control {
     text-align: center;
   }
 
-  .settings-page .settings-tabs button small {
+  .settings-page .settings-tabs__group-label {
     display: none;
   }
 

tests/support/workbar-settings-layout-driver.mjs

@@ -108,11 +108,34 @@ app.whenReady().then(async () => {
         await win.loadURL(`${process.env.GB_LAYOUT_URL}?surface=settings&locale=${locale}&theme=${theme}`)
         await wait('!!document.querySelector(".model-connection-detail select")')
         await js('document.fonts.ready')
-        for (const [width, height, panelWidth] of [[680, 560], [720, 560], [721, 560], [740, 560], [960, 560], [1180, 760], [1180, 560, 740]]) {
+        const navigation = await js(`(() => {
+          const nav = document.querySelector('.settings-tabs');
+          return { ids: [...nav.querySelectorAll('[role=tab]')].map(e => e.id),
+            groups: nav.querySelectorAll('.settings-tabs__group-label').length,
+            descriptions: nav.querySelectorAll('small').length,
+            font: getComputedStyle(nav.querySelector('strong')).fontSize };
+        })()`)
+        assert.deepEqual(navigation.ids, ['appearance', 'platform-features', 'model', 'context-control', 'runtime',
+          'document-parsing', 'channels', 'roles', 'capabilities', 'security', 'about'].map(id => `settings-tab-${id}`))
+        assert.equal(navigation.groups, 4)
+        assert.equal(navigation.descriptions, 0)
+        assert.equal(navigation.font, '13px')
+        await js('document.querySelector("#settings-tab-model").focus()')
+        await key('Down')
+        await wait('document.activeElement.id === "settings-tab-context-control"')
+        await key('Up')
+        await wait('document.activeElement.id === "settings-tab-model" && !!document.querySelector(".model-connection-detail select")')
+        observations.push({ locale, theme, navigation })
+        for (const [width, height, panelWidth] of [[640, 420], [680, 560], [720, 640], [721, 560], [740, 560], [960, 720], [1280, 800], [1180, 560, 740]]) {
           win.setContentSize(width, height)
           await wait(`innerWidth === ${width} && innerHeight === ${height}`)
           await settle()
           await js(`document.querySelector('.settings-panel').style.width=${JSON.stringify(panelWidth ? `${panelWidth}px` : '')}`)
+          if (width === 1280 || width === 640) {
+            await js("document.querySelector('.settings-panel__content').scrollTop=0")
+            await settle()
+            await screenshot(`${locale}-${theme}-settings-overview-${width}`)
+          }
           await js("document.querySelector('.model-connection-detail select').scrollIntoView({block:'center'})")
           const result = await js(`(() => {
             const e=document.querySelector('.model-connection-detail select'),s=getComputedStyle(e),r=e.getBoundingClientRect();
@@ -136,6 +159,37 @@ app.whenReady().then(async () => {
           await wait('document.querySelector(".model-connection-detail select").value==="openai-chat-completions"')
           observations.push({ locale, theme, width, height, panelWidth, ...result })
           await screenshot(`${locale}-${theme}-settings-${width}${panelWidth ? '-narrow-container' : ''}`)
+          const switchSelector = '.model-connection-detail .toggle-row input[role="switch"]'
+          await js(`document.querySelector(${JSON.stringify(switchSelector)}).scrollIntoView({block:'center'})`)
+          await settle()
+          const switchLayout = await js(`(() => {
+            const input=document.querySelector(${JSON.stringify(switchSelector)}),row=input.closest('.toggle-row'),
+              control=input.getBoundingClientRect(),label=row.querySelector('span').getBoundingClientRect(),bounds=row.getBoundingClientRect();
+            return {labelBeforeSwitch:label.right<=control.left,rightAligned:Math.abs(control.right-bounds.right)<1,
+              width:control.width,height:control.height};
+          })()`)
+          assert.deepEqual(switchLayout, { labelBeforeSwitch: true, rightAligned: true, width: 38, height: 22 })
+          await click(`${switchSelector} + span`)
+          await wait(`document.querySelector(${JSON.stringify(switchSelector)}).checked`)
+          await js(`document.querySelector(${JSON.stringify(switchSelector)}).focus()`)
+          await key('Space')
+          await wait(`!document.querySelector(${JSON.stringify(switchSelector)}).checked`)
+          observations.push({ locale, theme, width, height, panelWidth, switchLayout })
+          if (width === 640 || width === 1280) await screenshot(`${locale}-${theme}-settings-switch-${width}`)
+          if (width === 1280 || width === 640) {
+            await js("document.querySelector('.model-connection-detail details.settings-section > summary').scrollIntoView({block:'center'})")
+            await click('.model-connection-detail details.settings-section > summary')
+            await wait('document.querySelector(".model-connection-detail details.settings-section").open')
+            const nested = await js(`(() => {
+              const e=document.querySelector('.model-connection-detail details.settings-section'),s=getComputedStyle(e);
+              return {borderLeft:s.borderLeftWidth,background:s.backgroundColor,radius:s.borderRadius,
+                overflow:e.scrollWidth>e.clientWidth+1};
+            })()`)
+            assert.deepEqual(nested, { borderLeft: '0px', background: 'rgba(0, 0, 0, 0)', radius: '0px', overflow: false })
+            await screenshot(`${locale}-${theme}-settings-nested-${width}`)
+            await click('.model-connection-detail details.settings-section > summary')
+            observations.push({ locale, theme, width, nested })
+          }
         }
       }
     }