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

@@ -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',
@@ -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: '主机与远程执行',
@@ -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
@@ -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;
  }