feat: Add Extra Folder Paths feature with improved layout

- Add Extra Folder Paths section in Library settings for configuring
  additional model folders (LoRA, Checkpoint, Diffusion Model, Embedding)
- Implement dynamic path input rows with add/remove functionality
- Add dedicated CSS styles with flex-based layout for better UX
- Add translations for 10 languages (DE, EN, ES, FR, HE, JA, KO, RU, ZH-CN, ZH-TW)
- Integrate settings loading and saving via SettingsManager

Closes layout issues with single-input path rows
This commit is contained in:
Will Miao
2026-02-26 19:31:10 +08:00
parent 87b462192b
commit 9f15c1fc06
13 changed files with 447 additions and 10 deletions

View File

@@ -519,7 +519,90 @@
</div>
</div>
</div>
<!-- Extra Folder Paths -->
<div class="settings-subsection">
<div class="settings-subsection-header">
<h4>
{{ t('settings.extraFolderPaths.title') }}
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.extraFolderPaths.help') }}"></i>
</h4>
</div>
<div class="setting-item">
<div class="input-help">
{{ t('settings.extraFolderPaths.description') }}
</div>
</div>
<!-- LoRA Paths -->
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label>{{ t('settings.extraFolderPaths.modelTypes.lora') }}</label>
</div>
<div class="setting-control">
<button type="button" class="add-mapping-btn" onclick="settingsManager.addExtraFolderPathRow('loras')">
<i class="fas fa-plus"></i>
<span>{{ t('common.actions.add') }}</span>
</button>
</div>
</div>
<div class="extra-folder-paths-container" id="extraFolderPaths-loras">
</div>
</div>
<!-- Checkpoint Paths -->
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label>{{ t('settings.extraFolderPaths.modelTypes.checkpoint') }}</label>
</div>
<div class="setting-control">
<button type="button" class="add-mapping-btn" onclick="settingsManager.addExtraFolderPathRow('checkpoints')">
<i class="fas fa-plus"></i>
<span>{{ t('common.actions.add') }}</span>
</button>
</div>
</div>
<div class="extra-folder-paths-container" id="extraFolderPaths-checkpoints">
</div>
</div>
<!-- Diffusion Model (Unet) Paths -->
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label>{{ t('settings.extraFolderPaths.modelTypes.unet') }}</label>
</div>
<div class="setting-control">
<button type="button" class="add-mapping-btn" onclick="settingsManager.addExtraFolderPathRow('unet')">
<i class="fas fa-plus"></i>
<span>{{ t('common.actions.add') }}</span>
</button>
</div>
</div>
<div class="extra-folder-paths-container" id="extraFolderPaths-unet">
</div>
</div>
<!-- Embedding Paths -->
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label>{{ t('settings.extraFolderPaths.modelTypes.embedding') }}</label>
</div>
<div class="setting-control">
<button type="button" class="add-mapping-btn" onclick="settingsManager.addExtraFolderPathRow('embeddings')">
<i class="fas fa-plus"></i>
<span>{{ t('common.actions.add') }}</span>
</button>
</div>
</div>
<div class="extra-folder-paths-container" id="extraFolderPaths-embeddings">
</div>
</div>
</div>
<!-- Download Path Templates -->
<div class="settings-subsection">
<div class="settings-subsection-header">