mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-03-21 21:22:11 -03:00
a221682a0d
- 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
192 lines
4.8 KiB
Markdown
192 lines
4.8 KiB
Markdown
# 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
|