alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-22 13:42:12 -03:00
Code Issues Packages Projects Releases Wiki Activity
Files
bde11b153f2e6c21a141cf3972f9eeff9d10af7b
ComfyUI-Lora-Manager/docs/ui-ux-optimization/settings-modal-progress.md
Will Miao a221682a0d 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-02-24 07:19:32 +08:00

4.8 KiB
Raw Blame History

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

  • Layout Styles

    • Modal固定尺寸 800x600px
    • 左侧 sidebar 固定宽度 200px
    • 右侧 content flex: 1 自动填充

  • Navigation Styles

    • .settings-nav 容器样式
    • .settings-nav-item 基础样式（更大字体，更醒目的active状态）
    • .settings-nav-item.active 高亮样式（accent背景）
    • .settings-nav-item:hover 悬停效果
    • 隐藏 "SETTINGS" label
    • 隐藏 group titles

  • Content Area Styles

    • .settings-section 默认隐藏（仅当前显示）
    • .settings-section.active 显示状态
    • .settings-section-header 标题样式（20px + accent下划线）
    • 添加 fadeIn 动画效果

  • Cleanup

    • 移除折叠相关样式
    • 移除 .settings-section-toggle 按钮样式
    • 移除展开/折叠动画样式

Status: ✅ Completed

2. HTML Structure Update ✅

File: templates/components/modals/settings_modal.html

  • Navigation Items

    • General (通用)
    • Interface (界面)
    • Download (下载)
    • Advanced (高级)
    • 移除 "SETTINGS" label
    • 移除 group titles

  • Content Sections

    • 重组为4个Section (general/interface/download/advanced)
    • 每个section添加 data-section 属性
    • 添加Section标题（带accent下划线）
    • 移除所有折叠按钮（chevron图标）
    • 平铺显示所有设置项

Status: ✅ Completed

3. JavaScript Logic Update ✅

File: static/js/managers/SettingsManager.js

  • Navigation Logic

    • initializeNavigation() 改为Section切换模式
    • 点击导航项显示对应Section
    • 更新导航高亮状态
    • 默认显示第一个Section

  • Remove Legacy Code

    • 移除 initializeSectionCollapse() 方法
    • 移除滚动监听相关代码
    • 移除 localStorage 折叠状态存储

  • Search Function

    • 更新搜索功能以适配新显示模式
    • 搜索时自动切换到匹配的Section
    • 高亮匹配的关键词

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