refactor(settings): implement macOS Settings style for settings modal

- Reorganize settings into 4 sections: General, Interface, Download, Advanced - Implement section switching instead of scrolling (macOS Settings style) - Remove collapsible/expandable sections and redundant 'SETTINGS' label - Add accent-colored underline for section headers - Update navigation with larger, more prominent active state - Add fade-in animation for section transitions - Update search to auto-switch to matching section - Refactor CSS: 800x600 fixed modal size, remove collapse styles - Refactor JS: simplify navigation logic, remove scroll spy and collapse code Refs: Phase 0 settings modal optimization
2026-03-23 22:22:11 -03:00 · 2026-02-24 07:19:32 +08:00
parent 3f0227ba9d
commit a221682a0d
5 changed files with 1112 additions and 1069 deletions
--- a/docs/ui-ux-optimization/settings-modal-optimization-proposal.md
+++ b/docs/ui-ux-optimization/settings-modal-optimization-proposal.md
@@ -1,176 +1,264 @@
 # Settings Modal UI/UX Optimization

 ## Overview
-随着Settings功能的不断增加，当前的单列表长页面设计已难以高效浏览和定位设置项。本方案旨在通过专业的UI/UX优化，在保持原有设计语言的前提下，大幅提升用户体验。
+当前Settings Modal采用单列表长页面设计，随着设置项不断增加，已难以高效浏览和定位。本方案采用 **macOS Settings 模式**（左侧导航 + 右侧单Section独占显示），在保持原有设计语言的前提下，重构信息架构，大幅提升用户体验。

 ## Goals
 1. **提升浏览效率**：用户能够快速定位和修改设置
 2. **保持设计一致性**：延续现有的颜色、间距、动画系统
-3. **渐进式增强**：分阶段实施，降低风险
-4. **向后兼容**：不影响现有功能逻辑
+3. **简化交互模型**：移除冗余元素（SETTINGS label、折叠功能）
+4. **清晰的视觉层次**：Section级导航，右侧独占显示
+5. **向后兼容**：不影响现有功能逻辑

 ## Design Principles
+- **macOS Settings模式**：点击左侧导航，右侧仅显示该Section内容
 - **贴近原有设计语言**：使用现有CSS变量和样式模式
 - **最小化风格改动**：在提升UX的同时保持视觉风格稳定
- **渐进增强**：优先核心功能，次要功能逐步添加
+- **简化优于复杂**：移除不必要的折叠/展开交互

 ---

-## Optimization Phases
+## New Design Architecture

-### Phase 0: 左侧导航栏 + 两栏布局 (P0)
-**Status**: In Progress
-
-#### Goals
- 解决核心痛点：设置项过多导致的浏览困难
- 建立清晰的视觉层次和信息架构
-
-#### Implementation Details
-
-##### Layout Changes
+### Layout Structure
 ```
 ┌─────────────────────────────────────────────────────────────┐
 │  Settings                                    [×]            │
 ├──────────────┬──────────────────────────────────────────────┤
 │  NAVIGATION  │  CONTENT                                     │
 │              │                                              │
-│  ▶ General   │  ┌─────────────────────────────────────────┐ │
-│    Interface │  │ Section: General                        │ │
-│    Download  │  │ ┌─────────────────────────────────────┐ │ │
-│    Advanced  │  │ │ Setting Item 1                      │ │ │
-│              │  │ └─────────────────────────────────────┘ │ │
-│              │  │ ┌─────────────────────────────────────┐ │ │
-│              │  │ │ Setting Item 2                      │ │ │
-│              │  │ └─────────────────────────────────────┘ │ │
+│  General   → │  ┌─────────────────────────────────────────┐ │
+│  Interface   │  │ General                                 │ │
+│  Download    │  │ ═══════════════════════════════════════ │ │
+│  Advanced    │  │                                           │ │
+│              │  │ ┌─────────────────────────────────────┐   │ │
+│              │  │ │ Civitai API Key                     │   │ │
+│              │  │ │ [                         ] [?]     │   │ │
+│              │  │ └─────────────────────────────────────┘   │ │
+│              │  │                                           │ │
+│              │  │ ┌─────────────────────────────────────┐   │ │
+│              │  │ │ Settings Location                   │   │ │
+│              │  │ │ [/path/to/settings]     [Browse]    │   │ │
+│              │  │ └─────────────────────────────────────┘   │ │
 │              │  └─────────────────────────────────────────┘ │
 │              │                                              │
-│              │  ┌─────────────────────────────────────────┐ │
-│              │  │ Section: Interface                      │ │
-│              │  │ ...                                     │ │
-│              │  └─────────────────────────────────────────┘ │
+│              │  [Cancel]                    [Save Changes]  │
 └──────────────┴──────────────────────────────────────────────┘
 ```

-##### Technical Specifications
- **Modal Width**: 从700px扩展至950px
- **Left Sidebar**: 200px固定宽度，独立滚动
- **Right Content**: flex: 1，独立滚动
- **Height**: 固定80vh，确保内容可见
- **Responsive**: 移动端自动切换为单栏布局
+### Key Design Decisions

-##### Navigation Items
-基于当前Settings结构，导航项分为4组：
+#### 1. 移除冗余元素
+- ❌ 删除 sidebar 中的 "SETTINGS" label
+- ❌ **取消折叠/展开功能**（增加交互成本，无实际收益）
+- ❌ 不再在左侧导航显示具体设置项（减少认知负荷）

-1. **通用** (General)
-   - Language
-   - Storage Location
+#### 2. 导航简化
+- 左侧仅显示 **4个Section**（General / Interface / Download / Advanced）
+- 当前选中项用 accent 色 background highlight
+- 无需滚动监听，点击即切换

-2. **界面** (Interface)
-   - Layout Settings
-   - Video Settings
-   - Content Filtering
+#### 3. 右侧单Section独占
+- 点击左侧导航，右侧仅显示该Section的所有设置项
+- Section标题作为页面标题（大号字体 + accent色下划线）
+- 所有设置项平铺展示，无需折叠

-3. **下载** (Download)
-   - Download Path Templates
-   - Example Images
-   - Update Flags
-
-4. **高级** (Advanced)
-   - Priority Tags
-   - Auto-organize
-   - Metadata Archive
-   - Proxy Settings
-   - Misc
-
-##### Interactive Features
- **点击导航**：平滑滚动到对应Section
- **当前高亮**：根据滚动位置高亮当前Section
- **平滑滚动**：使用scroll-behavior: smooth
-
-##### CSS Variables Usage
-延续使用现有变量系统：
- `--lora-accent`: 高亮色
- `--lora-border`: 边框色
- `--card-bg`: 卡片背景
- `--text-color`: 文字颜色
- `--space-1` to `--space-4`: 间距系统
- `--border-radius-xs/sm`: 圆角系统
+#### 4. 视觉层次
+```
+Section Header (20px, bold, accent underline)
+├── Setting Group (card container, subtle border)
+│   ├── Setting Label (14px, semibold)
+│   ├── Setting Description (12px, muted color)
+│   └── Setting Control (input/select/toggle)
+```

 ---

-### Phase 1: Section折叠/展开 (P1)
-**Status**: Planned
+## Optimization Phases
+
+### Phase 0: macOS Settings模式重构 (P0)
+**Status**: Ready for Development
+**Priority**: High

 #### Goals
- 进一步减少视觉负担
- 允许用户自定义信息密度
+- 重构为两栏布局（左侧导航 + 右侧内容）
+- 实现Section级导航切换
+- 优化视觉层次和间距
+- 移除冗余元素

 #### Implementation Details
- 点击Section标题折叠/展开
- 添加chevron图标旋转动画
- 记忆用户折叠状态(localStorage)
+
+##### Layout Specifications
+| Element | Specification |
+|---------|--------------|
+| Modal Width | 800px (比原700px稍宽) |
+| Modal Height | 600px (固定高度) |
+| Left Sidebar | 200px 固定宽度 |
+| Right Content | flex: 1，自动填充 |
+| Content Padding | --space-3 (24px) |
+
+##### Navigation Structure
+```
+General (通用)
+├── Language
+├── Civitai API Key
+└── Settings Location
+
+Interface (界面)
+├── Layout Settings
+├── Video Settings
+└── Content Filtering
+
+Download (下载)
+├── Folder Settings
+├── Download Path Templates
+├── Example Images
+└── Update Flags
+
+Advanced (高级)
+├── Priority Tags
+├── Auto-organize exclusions
+├── Metadata refresh skip paths
+├── Metadata Archive Database
+├── Proxy Settings
+└── Misc
+```
+
+##### CSS Style Guide
+
+**Section Header**
+```css
+.settings-section-header {
+  font-size: 20px;
+  font-weight: 600;
+  padding-bottom: var(--space-2);
+  border-bottom: 2px solid var(--lora-accent);
+  margin-bottom: var(--space-3);
+}
+```
+
+**Setting Group (Card)**
+```css
+.settings-group {
+  background: var(--card-bg);
+  border: 1px solid var(--lora-border);
+  border-radius: var(--border-radius-sm);
+  padding: var(--space-3);
+  margin-bottom: var(--space-3);
+}
+```
+
+**Setting Item**
+```css
+.setting-item {
+  margin-bottom: var(--space-3);
+}
+
+.setting-item:last-child {
+  margin-bottom: 0;
+}
+
+.setting-label {
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: var(--space-1);
+}
+
+.setting-description {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-bottom: var(--space-2);
+}
+```
+
+**Sidebar Navigation**
+```css
+.settings-nav-item {
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--border-radius-xs);
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.settings-nav-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.settings-nav-item.active {
+  background: var(--lora-accent);
+  color: white;
+}
+```
+
+#### Files to Modify
+
+1. **static/css/components/modal/settings-modal.css**
+   - [ ] 新增两栏布局样式
+   - [ ] 新增侧边栏导航样式
+   - [ ] 新增Section标题样式
+   - [ ] 调整设置项卡片样式
+   - [ ] 移除折叠相关的CSS
+
+2. **templates/components/modals/settings_modal.html**
+   - [ ] 重构为两栏HTML结构
+   - [ ] 添加4个导航项
+   - [ ] 将Section改为独立内容区域
+   - [ ] 移除折叠按钮HTML
+
+3. **static/js/managers/SettingsManager.js**
+   - [ ] 添加导航点击切换逻辑
+   - [ ] 添加Section显示/隐藏控制
+   - [ ] 移除折叠/展开相关代码
+   - [ ] 默认显示第一个Section

 ---

-### Phase 2: 顶部搜索栏 (P1)
+### Phase 1: 搜索功能 (P1)
 **Status**: Planned
+**Priority**: Medium

 #### Goals
 - 快速定位特定设置项
 - 支持关键词搜索设置标签和描述

-#### Implementation Details
- 实时过滤显示匹配项
+#### Implementation
+- 搜索框保持在顶部右侧
+- 实时过滤：显示匹配的Section和设置项
 - 高亮匹配的关键词
- 使用现有的text-input-wrapper样式
+- 无结果时显示友好提示

 ---

-### Phase 3: 视觉层次优化 (P2)
-**Status**: Planned
-
-#### Goals
- 提升可读性
- 强化Section的视觉区分
-
-#### Implementation Details
- Section标题左侧添加accent色边框
- 设置项标签加粗处理
- 增大Section间距
-
---
-
-### Phase 4: 快速操作按钮 (P3)
+### Phase 2: 操作按钮优化 (P2)
 **Status**: Planned
+**Priority**: Low

 #### Goals
 - 增强功能完整性
 - 提供批量操作能力

-#### Implementation Details
- 重置为默认按钮
- 导出配置按钮
- 导入配置按钮
+#### Implementation
+- 底部固定操作栏（position: sticky）
+- [Cancel] 和 [Save Changes] 按钮
+- 可选：重置为默认、导出配置、导入配置

 ---

-## Files to Modify
+## Migration Notes

-### Phase 0 Files
-1. `static/css/components/modal/settings-modal.css`
-   - 新增两栏布局样式
-   - 新增导航栏样式
-   - 调整Modal尺寸
+### Removed Features
+| Feature | Reason |
+|---------|--------|
+| Section折叠/展开 | 单Section独占显示后不再需要 |
+| 滚动监听高亮 | 改为点击切换，无需监听滚动 |
+| 长页面平滑滚动 | 内容不再超长，无需滚动 |
+| "SETTINGS" label | 冗余信息，移除以简化UI |

-2. `templates/components/modals/settings_modal.html`
-   - 重构HTML结构为两栏布局
-   - 添加导航列表
-   - 为Section添加ID锚点
-
-3. `static/js/managers/SettingsManager.js`
-   - 添加导航点击处理
-   - 添加滚动监听高亮
-   - 添加平滑滚动行为
+### Preserved Features
+- 所有设置项功能和逻辑
+- 表单验证
+- 设置项描述和提示
+- 原有的CSS变量系统

 ---

@@ -178,28 +266,66 @@

 ### Phase 0
 - [ ] Modal显示为两栏布局
- [ ] 左侧导航可点击跳转
- [ ] 当前Section在导航中高亮
- [ ] 滚动时高亮状态同步更新
- [ ] 移动端响应式正常
- [ ] 所有现有功能正常工作
+- [ ] 左侧显示4个Section导航
+- [ ] 点击导航切换右侧显示的Section
+- [ ] 当前选中导航项高亮显示
+- [ ] Section标题有accent色下划线
+- [ ] 设置项以卡片形式分组展示
+- [ ] 移除所有折叠/展开功能
+- [ ] 移动端响应式正常（单栏堆叠）
+- [ ] 所有现有设置功能正常工作
 - [ ] 设计风格与原有UI一致

+### Phase 1
+- [ ] 搜索框可输入关键词
+- [ ] 实时过滤显示匹配项
+- [ ] 高亮匹配的关键词
+
+### Phase 2
+- [ ] 底部有固定操作按钮栏
+- [ ] Cancel和Save Changes按钮工作正常
+
 ---

 ## Timeline

 | Phase | Estimated Time | Status |
 |-------|---------------|--------|
-| P0    | 2-3 hours     | In Progress |
-| P1    | 1-2 hours     | Planned |
+| P0    | 3-4 hours     | Ready for Development |
+| P1    | 2-3 hours     | Planned |
 | P2    | 1-2 hours     | Planned |
-| P3    | 1 hour        | Planned |

 ---

-## Notes
- 所有修改优先使用现有CSS变量
- 保持向后兼容，不破坏现有功能
- 每次Phase完成后进行功能测试
- 遵循现有代码风格和命名约定
+## Reference
+
+### Design Inspiration
+- **macOS System Settings**: 左侧导航 + 右侧单Section独占
+- **VS Code Settings**: 清晰的视觉层次和搜索体验
+- **Linear**: 简洁的两栏布局设计
+
+### CSS Variables Reference
+```css
+/* Colors */
+--lora-accent: #007AFF;
+--lora-border: rgba(255, 255, 255, 0.1);
+--card-bg: rgba(255, 255, 255, 0.05);
+--text-color: #ffffff;
+--text-muted: rgba(255, 255, 255, 0.6);
+
+/* Spacing */
+--space-1: 8px;
+--space-2: 12px;
+--space-3: 16px;
+--space-4: 24px;
+
+/* Border Radius */
+--border-radius-xs: 4px;
+--border-radius-sm: 8px;
+```
+
+---
+
+**Last Updated**: 2025-02-24
+**Author**: AI Assistant
+**Status**: Ready for Implementation