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

docs/ui-ux-optimization/settings-modal-progress.md

@@ -0,0 +1,191 @@
+# Settings Modal Optimization Progress
+
+**Project**: Settings Modal UI/UX Optimization  
+**Status**: Phase 0 - Ready for Development  
+**Last Updated**: 2025-02-24
+
+---
+
+## Phase 0: macOS Settings模式重构
+
+### Overview
+重构Settings Modal为macOS Settings模式：左侧Section导航 + 右侧单Section独占显示。移除冗余元素，优化视觉层次。
+
+### Tasks
+
+#### 1. CSS Updates ✅
+**File**: `static/css/components/modal/settings-modal.css`
+
+- [x] **Layout Styles**
+  - [x] Modal固定尺寸 800x600px
+  - [x] 左侧 sidebar 固定宽度 200px
+  - [x] 右侧 content flex: 1 自动填充
+
+- [x] **Navigation Styles**
+  - [x] `.settings-nav` 容器样式
+  - [x] `.settings-nav-item` 基础样式（更大字体，更醒目的active状态）
+  - [x] `.settings-nav-item.active` 高亮样式（accent背景）
+  - [x] `.settings-nav-item:hover` 悬停效果
+  - [x] 隐藏 "SETTINGS" label
+  - [x] 隐藏 group titles
+
+- [x] **Content Area Styles**
+  - [x] `.settings-section` 默认隐藏（仅当前显示）
+  - [x] `.settings-section.active` 显示状态
+  - [x] `.settings-section-header` 标题样式（20px + accent下划线）
+  - [x] 添加 fadeIn 动画效果
+
+- [x] **Cleanup**
+  - [x] 移除折叠相关样式
+  - [x] 移除 `.settings-section-toggle` 按钮样式
+  - [x] 移除展开/折叠动画样式
+
+**Status**: ✅ Completed
+
+---
+
+#### 2. HTML Structure Update ✅
+**File**: `templates/components/modals/settings_modal.html`
+
+- [x] **Navigation Items**
+  - [x] General (通用)
+  - [x] Interface (界面)
+  - [x] Download (下载)
+  - [x] Advanced (高级)
+  - [x] 移除 "SETTINGS" label
+  - [x] 移除 group titles
+
+- [x] **Content Sections**
+  - [x] 重组为4个Section (general/interface/download/advanced)
+  - [x] 每个section添加 `data-section` 属性
+  - [x] 添加Section标题（带accent下划线）
+  - [x] 移除所有折叠按钮（chevron图标）
+  - [x] 平铺显示所有设置项
+
+**Status**: ✅ Completed
+
+---
+
+#### 3. JavaScript Logic Update ✅
+**File**: `static/js/managers/SettingsManager.js`
+
+- [x] **Navigation Logic**
+  - [x] `initializeNavigation()` 改为Section切换模式
+  - [x] 点击导航项显示对应Section
+  - [x] 更新导航高亮状态
+  - [x] 默认显示第一个Section
+
+- [x] **Remove Legacy Code**
+  - [x] 移除 `initializeSectionCollapse()` 方法
+  - [x] 移除滚动监听相关代码
+  - [x] 移除 `localStorage` 折叠状态存储
+
+- [x] **Search Function**
+  - [x] 更新搜索功能以适配新显示模式
+  - [x] 搜索时自动切换到匹配的Section
+  - [x] 高亮匹配的关键词
+
+**Status**: ✅ Completed
+
+---
+
+### Testing Checklist
+
+#### Visual Testing
+- [ ] 两栏布局正确显示
+- [ ] 左侧导航4个Section正确显示
+- [ ] 点击导航切换右侧内容
+- [ ] 当前导航项高亮显示（accent背景）
+- [ ] Section标题有accent色下划线
+- [ ] 设置项以卡片形式分组
+- [ ] 无"SETTINGS" label
+- [ ] 无折叠/展开按钮
+
+#### Functional Testing
+- [ ] 所有设置项可正常编辑
+- [ ] 设置保存功能正常
+- [ ] 设置加载功能正常
+- [ ] 表单验证正常工作
+- [ ] 帮助提示（tooltip）正常显示
+
+#### Responsive Testing
+- [ ] 桌面端（>768px）两栏布局
+- [ ] 移动端（<768px）单栏堆叠
+- [ ] 移动端导航可正常切换
+
+#### Cross-Browser Testing
+- [ ] Chrome/Edge
+- [ ] Firefox
+- [ ] Safari（如适用）
+
+---
+
+## Phase 1: 搜索功能
+
+### Tasks
+- [ ] 搜索框UI更新
+- [ ] 搜索逻辑实现
+- [ ] 实时过滤显示
+- [ ] 关键词高亮
+
+**Estimated Time**: 2-3 hours  
+**Status**: 📋 Planned
+
+---
+
+## Phase 2: 操作按钮优化
+
+### Tasks
+- [ ] 底部操作栏样式
+- [ ] 固定定位（sticky）
+- [ ] Cancel/Save按钮功能
+- [ ] 可选：Reset/Export/Import
+
+**Estimated Time**: 1-2 hours  
+**Status**: 📋 Planned
+
+---
+
+## Progress Summary
+
+| Phase | Progress | Status |
+|-------|----------|--------|
+| Phase 0 | 100% | ✅ Completed |
+| Phase 1 | 0% | 📋 Planned |
+| Phase 2 | 0% | 📋 Planned |
+
+**Overall Progress**: 100% (Phase 0)
+
+---
+
+## Development Log
+
+### 2025-02-24
+- ✅ 创建优化提案文档（macOS Settings模式）
+- ✅ 创建进度追踪文档
+- ✅ Phase 0 开发完成
+  - ✅ CSS重构完成：新增macOS Settings样式，移除折叠相关样式
+  - ✅ HTML重构完成：重组为4个Section，移除所有折叠按钮
+  - ✅ JavaScript重构完成：实现Section切换逻辑，更新搜索功能
+
+---
+
+## Notes
+
+### Design Decisions
+- 采用macOS Settings模式而非长页面滚动模式
+- 左侧仅显示4个Section，不显示具体设置项
+- 移除折叠/展开功能，简化交互
+- Section标题使用accent色下划线强调
+
+### Technical Notes
+- 优先使用现有CSS变量
+- 保持向后兼容，不破坏现有设置存储逻辑
+- 移动端响应式：小屏幕单栏堆叠
+
+### Blockers
+None
+
+---
+
+**Next Action**: Start Phase 0 - CSS Updates