ComfyUI-Lora-Manager/settings-modal-optimization-proposal.md at main

mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-21 21:22:11 -03:00

Files

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

9.9 KiB

Raw Permalink Blame History

Overview

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

Goals

提升浏览效率：用户能够快速定位和修改设置
保持设计一致性：延续现有的颜色、间距、动画系统
简化交互模型：移除冗余元素（SETTINGS label、折叠功能）
清晰的视觉层次：Section级导航，右侧独占显示
向后兼容：不影响现有功能逻辑

Design Principles

macOS Settings模式：点击左侧导航，右侧仅显示该Section内容
贴近原有设计语言：使用现有CSS变量和样式模式
最小化风格改动：在提升UX的同时保持视觉风格稳定
简化优于复杂：移除不必要的折叠/展开交互

New Design Architecture

Layout Structure

┌─────────────────────────────────────────────────────────────┐
│  Settings                                    [×]            │
├──────────────┬──────────────────────────────────────────────┤
│  NAVIGATION  │  CONTENT                                     │
│              │                                              │
│  General   → │  ┌─────────────────────────────────────────┐ │
│  Interface   │  │ General                                 │ │
│  Download    │  │ ═══════════════════════════════════════ │ │
│  Advanced    │  │                                           │ │
│              │  │ ┌─────────────────────────────────────┐   │ │
│              │  │ │ Civitai API Key                     │   │ │
│              │  │ │ [                         ] [?]     │   │ │
│              │  │ └─────────────────────────────────────┘   │ │
│              │  │                                           │ │
│              │  │ ┌─────────────────────────────────────┐   │ │
│              │  │ │ Settings Location                   │   │ │
│              │  │ │ [/path/to/settings]     [Browse]    │   │ │
│              │  │ └─────────────────────────────────────┘   │ │
│              │  └─────────────────────────────────────────┘ │
│              │                                              │
│              │  [Cancel]                    [Save Changes]  │
└──────────────┴──────────────────────────────────────────────┘

Key Design Decisions

1. 移除冗余元素

❌ 删除 sidebar 中的 "SETTINGS" label
❌ 取消折叠/展开功能（增加交互成本，无实际收益）
❌ 不再在左侧导航显示具体设置项（减少认知负荷）

2. 导航简化

左侧仅显示 4个Section（General / Interface / Download / Advanced）
当前选中项用 accent 色 background highlight
无需滚动监听，点击即切换

3. 右侧单Section独占

点击左侧导航，右侧仅显示该Section的所有设置项
Section标题作为页面标题（大号字体 + accent色下划线）
所有设置项平铺展示，无需折叠

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)

Optimization Phases

Phase 0: macOS Settings模式重构 (P0)

Status: Ready for Development Priority: High

Goals

重构为两栏布局（左侧导航 + 右侧内容）
实现Section级导航切换
优化视觉层次和间距
移除冗余元素

Implementation Details

Layout Specifications

Element	Specification
Modal Width	800px (比原700px稍宽)
Modal Height	600px (固定高度)
Left Sidebar	200px 固定宽度
Right Content	flex: 1，自动填充
Content Padding	--space-3 (24px)

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

.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)

.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

.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

.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

static/css/components/modal/settings-modal.css
- 新增两栏布局样式
- 新增侧边栏导航样式
- 新增Section标题样式
- 调整设置项卡片样式
- 移除折叠相关的CSS
templates/components/modals/settings_modal.html
- 重构为两栏HTML结构
- 添加4个导航项
- 将Section改为独立内容区域
- 移除折叠按钮HTML
static/js/managers/SettingsManager.js
- 添加导航点击切换逻辑
- 添加Section显示/隐藏控制
- 移除折叠/展开相关代码
- 默认显示第一个Section

Phase 1: 搜索功能 (P1)

Status: Planned Priority: Medium

Goals

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

Implementation

搜索框保持在顶部右侧
实时过滤：显示匹配的Section和设置项
高亮匹配的关键词
无结果时显示友好提示

Phase 2: 操作按钮优化 (P2)

Status: Planned Priority: Low

Goals

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

Implementation

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

Migration Notes

Removed Features

Feature	Reason
Section折叠/展开	单Section独占显示后不再需要
滚动监听高亮	改为点击切换，无需监听滚动
长页面平滑滚动	内容不再超长，无需滚动
"SETTINGS" label	冗余信息，移除以简化UI

Preserved Features

所有设置项功能和逻辑
表单验证
设置项描述和提示
原有的CSS变量系统

Success Criteria

Phase 0

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

Phase 1

搜索框可输入关键词
实时过滤显示匹配项
高亮匹配的关键词

Phase 2

底部有固定操作按钮栏
Cancel和Save Changes按钮工作正常

Timeline

Phase	Estimated Time	Status
P0	3-4 hours	Ready for Development
P1	2-3 hours	Planned
P2	1-2 hours	Planned

Reference

Design Inspiration

macOS System Settings: 左侧导航 + 右侧单Section独占
VS Code Settings: 清晰的视觉层次和搜索体验
Linear: 简洁的两栏布局设计

CSS Variables Reference

/* 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

9.9 KiB Raw Permalink Blame History Unescape Escape

Settings Modal UI/UX Optimization

Overview

Goals

Design Principles

New Design Architecture

Layout Structure

Key Design Decisions

1. 移除冗余元素

2. 导航简化

3. 右侧单Section独占

4. 视觉层次

Optimization Phases

Phase 0: macOS Settings模式重构 (P0)

Goals

Implementation Details

Layout Specifications

Navigation Structure

CSS Style Guide

Files to Modify

Phase 1: 搜索功能 (P1)

Goals

Implementation

Phase 2: 操作按钮优化 (P2)

Goals

Implementation

Migration Notes

Removed Features

Preserved Features

Success Criteria

Phase 0

Phase 1

Phase 2

Timeline

Reference

Design Inspiration

CSS Variables Reference

9.9 KiB

Raw Permalink Blame History