fix: balance settings navigation highlights

The settings category list reserved scrollbar space only on its right edge, so selected rows appeared visibly offset. The navigation now reserves symmetric space and uses wider desktop and medium-width columns while preserving the horizontal narrow-window layout.

Release note: 修复设置中心左侧分类选中高亮左右不平衡的问题,并适当加宽分类导航以改善标题和说明的可读性。
This commit is contained in:
mesalogo
2026-08-17 00:35:15 +08:00
parent 792d80e67c
commit 2df8fb1364
3 changed files with 11 additions and 5 deletions
+1 -1
View File
@@ -526,7 +526,7 @@ GoodBuddy 是可调整窗口大小的桌面应用。响应式设计优先保证
### 13.7 设置中心
- 全页设置使用固定标题区、左侧分类导航和独立滚动的内容区。右上角关闭按钮是离开设置中心的稳定入口。
- 左侧分类标题使用正文级字号,分类说明使用辅助字号;右侧内容区在可用空间内流式伸缩,最大宽度使用 `standard` 壳层的 `960px`,不得以页面专属较窄宽度压缩表单。
- 左侧分类导航在宽屏使用 `220px`,中等窗口使用 `196px`,窄窗口转为横向滚动;纵向滚动条预留必须在两侧保持对称,不能让选中高亮偏向一侧。分类标题使用正文级字号,分类说明使用辅助字号;右侧内容区在可用空间内流式伸缩,最大宽度使用 `standard` 壳层的 `960px`,不得以页面专属较窄宽度压缩表单。
- 全页设置标题区依靠留白与内容区分层,不在标题下方绘制贯穿整个工作区的分隔线;模态设置可以保留标题边界。
- 设置中心不显示全局操作页脚,避免重复关闭入口和没有功能意义的整宽分隔线。
- 所有分类使用共享的 `SettingsCategoryHeader` 呈现分类标题、说明、错误与操作,不得在内容卡片内复制分类标题或创建页面专属操作栏。左侧分类名称与说明来自同一份分类定义,新增分类时不得分别维护导航和内容标题。
@@ -209,7 +209,13 @@ describe('WorkspacePrimitives', () => {
it('keeps full-page settings navigation readable and content fluid', () => {
expect(stylesheet).toMatch(
/\.settings-page \.settings-panel__body\s*\{[^}]*grid-template-columns:\s*190px minmax\(0,\s*1fr\);/u
/\.settings-page \.settings-panel__body\s*\{[^}]*grid-template-columns:\s*220px minmax\(0,\s*1fr\);/u
)
expect(stylesheet).toMatch(
/@media \(max-width: 1020px\)\s*\{[\s\S]*?\.settings-page \.settings-panel__body\s*\{[^}]*grid-template-columns:\s*196px minmax\(0,\s*1fr\);/u
)
expect(stylesheet).toMatch(
/\.settings-page \.settings-tabs\s*\{[^}]*scrollbar-gutter:\s*stable both-edges;/u
)
expect(stylesheet).toMatch(
/\.settings-page \.settings-panel__content\s*\{[^}]*width:\s*min\(100%,\s*var\(--content-standard\)\);/u
+3 -3
View File
@@ -5016,7 +5016,7 @@ button > svg {
padding: 24px 32px 32px;
overflow: hidden;
align-items: stretch;
grid-template-columns: 190px minmax(0, 1fr);
grid-template-columns: 220px minmax(0, 1fr);
justify-content: start;
gap: 28px;
}
@@ -5049,7 +5049,7 @@ button > svg {
align-self: stretch;
flex-direction: column;
grid-template-columns: none;
scrollbar-gutter: stable;
scrollbar-gutter: stable both-edges;
}
.settings-page .settings-panel__content {
@@ -11108,7 +11108,7 @@ details.settings-section > :not(summary) + :not(summary) {
padding: 20px;
overflow: hidden;
align-items: stretch;
grid-template-columns: 176px minmax(0, 1fr);
grid-template-columns: 196px minmax(0, 1fr);
justify-content: stretch;
gap: var(--space-4);
}