alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-21 21:22:11 -03:00
Code Issues Packages Projects Releases Wiki Activity
Files
528225ffbdfc7065c706de6f43f50e0e0f6681e4
ComfyUI-Lora-Manager/docs/ui-ux-optimization/settings-modal-optimization-proposal.md
Will Miao 528225ffbd feat(settings): add left navigation sidebar to settings modal 
Implement two-column layout for improved settings navigation:
- Add 200px fixed navigation sidebar with 4 groups (General, Interface, Download, Advanced)
- Implement scroll spy to highlight current section during scroll
- Add smooth scrolling when clicking navigation items
- Extend modal width from 700px to 950px for better content display
- Add responsive mobile layout (switches to stacked view below 768px)
- Add i18n keys for navigation group titles
- Create documentation for optimization phases and progress tracking

Files changed:
- settings-modal.css: Add sidebar, navigation, and responsive styles
- settings_modal.html: Restructure with two-column layout and section IDs
- SettingsManager.js: Add initializeNavigation() with scroll spy
- locales/*.json: Add settings.nav translations (en, zh-CN, zh-TW, ja, ru, de, fr, es, ko, he)
- docs/ui-ux-optimization/: Add proposal and progress tracker documentation
2026-02-23 21:12:15 +08:00

6.7 KiB
Raw Blame History

Settings Modal UI/UX Optimization

Overview

随着Settings功能的不断增加，当前的单列表长页面设计已难以高效浏览和定位设置项。本方案旨在通过专业的UI/UX优化，在保持原有设计语言的前提下，大幅提升用户体验。

Goals

  1. 提升浏览效率：用户能够快速定位和修改设置
  2. 保持设计一致性：延续现有的颜色、间距、动画系统
  3. 渐进式增强：分阶段实施，降低风险
  4. 向后兼容：不影响现有功能逻辑

Design Principles

  • 贴近原有设计语言：使用现有CSS变量和样式模式
  • 最小化风格改动：在提升UX的同时保持视觉风格稳定
  • 渐进增强：优先核心功能，次要功能逐步添加

Optimization Phases

Phase 0: 左侧导航栏 + 两栏布局 (P0)

Status: In Progress

Goals

  • 解决核心痛点：设置项过多导致的浏览困难
  • 建立清晰的视觉层次和信息架构

Implementation Details

Layout Changes
┌─────────────────────────────────────────────────────────────┐
│  Settings                                    [×]            │
├──────────────┬──────────────────────────────────────────────┤
│  NAVIGATION  │  CONTENT                                     │
│              │                                              │
│  ▶ General   │  ┌─────────────────────────────────────────┐ │
│    Interface │  │ Section: General                        │ │
│    Download  │  │ ┌─────────────────────────────────────┐ │ │
│    Advanced  │  │ │ Setting Item 1                      │ │ │
│              │  │ └─────────────────────────────────────┘ │ │
│              │  │ ┌─────────────────────────────────────┐ │ │
│              │  │ │ Setting Item 2                      │ │ │
│              │  │ └─────────────────────────────────────┘ │ │
│              │  └─────────────────────────────────────────┘ │
│              │                                              │
│              │  ┌─────────────────────────────────────────┐ │
│              │  │ Section: Interface                      │ │
│              │  │ ...                                     │ │
│              │  └─────────────────────────────────────────┘ │
└──────────────┴──────────────────────────────────────────────┘
Technical Specifications
  • Modal Width: 从700px扩展至950px
  • Left Sidebar: 200px固定宽度，独立滚动
  • Right Content: flex: 1，独立滚动
  • Height: 固定80vh，确保内容可见
  • Responsive: 移动端自动切换为单栏布局
Navigation Items

基于当前Settings结构，导航项分为4组：

  1. 通用 (General)

    • Language
    • Storage Location

  2. 界面 (Interface)

    • Layout Settings
    • Video Settings
    • Content Filtering

  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: 圆角系统

Phase 1: Section折叠/展开 (P1)

Status: Planned

Goals

  • 进一步减少视觉负担
  • 允许用户自定义信息密度

Implementation Details

  • 点击Section标题折叠/展开
  • 添加chevron图标旋转动画
  • 记忆用户折叠状态(localStorage)

Phase 2: 顶部搜索栏 (P1)

Status: Planned

Goals

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

Implementation Details

  • 实时过滤显示匹配项
  • 高亮匹配的关键词
  • 使用现有的text-input-wrapper样式

Phase 3: 视觉层次优化 (P2)

Status: Planned

Goals

  • 提升可读性
  • 强化Section的视觉区分

Implementation Details

  • Section标题左侧添加accent色边框
  • 设置项标签加粗处理
  • 增大Section间距

Phase 4: 快速操作按钮 (P3)

Status: Planned

Goals

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

Implementation Details

  • 重置为默认按钮
  • 导出配置按钮
  • 导入配置按钮

Files to Modify

Phase 0 Files

  1. static/css/components/modal/settings-modal.css

    • 新增两栏布局样式
    • 新增导航栏样式
    • 调整Modal尺寸

  2. templates/components/modals/settings_modal.html

    • 重构HTML结构为两栏布局
    • 添加导航列表
    • 为Section添加ID锚点

  3. static/js/managers/SettingsManager.js

    • 添加导航点击处理
    • 添加滚动监听高亮
    • 添加平滑滚动行为

Success Criteria

Phase 0

  • Modal显示为两栏布局
  • 左侧导航可点击跳转
  • 当前Section在导航中高亮
  • 滚动时高亮状态同步更新
  • 移动端响应式正常
  • 所有现有功能正常工作
  • 设计风格与原有UI一致

Timeline

Phase Estimated Time Status
P0 2-3 hours In Progress
P1 1-2 hours Planned
P2 1-2 hours Planned
P3 1 hour Planned

Notes

  • 所有修改优先使用现有CSS变量
  • 保持向后兼容，不破坏现有功能
  • 每次Phase完成后进行功能测试
  • 遵循现有代码风格和命名约定