feat: Add bulk download missing LoRAs feature for recipes

- Add BulkMissingLoraDownloadManager.js for handling bulk LoRA downloads
- Add context menu item to bulk mode for downloading missing LoRAs
- Add confirmation modal with deduplicated LoRA list preview
- Implement sequential downloading with WebSocket progress updates
- Fix CSS class naming conflicts to avoid import-modal.css collision
- Update translations for 9 languages (en, zh-CN, zh-TW, ja, ko, ru, de, fr, es, he)
- Style modal without internal scrolling for better UX
This commit is contained in:
Will Miao
2026-03-26 17:46:53 +08:00
parent de3d0571f8
commit 95e5bc26d1
17 changed files with 662 additions and 12 deletions

View File

@@ -80,4 +80,32 @@
<button class="primary-btn" data-action="confirm-check-updates">{{ t('modals.checkUpdates.action') }}</button>
</div>
</div>
</div>
<!-- Bulk Download Missing LoRAs Confirmation Modal -->
<div id="bulkDownloadMissingLorasModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>{{ t('modals.bulkDownloadMissingLoras.title') }}</h2>
<span class="close" onclick="modalManager.closeModal('bulkDownloadMissingLorasModal')">&times;</span>
</div>
<div class="modal-body">
<p class="confirmation-message" id="bulkDownloadMissingLorasMessage"></p>
<div class="bulk-download-loras-preview" id="bulkDownloadMissingLorasPreview">
<p class="preview-title">{{ t('modals.bulkDownloadMissingLoras.previewTitle') }}</p>
<ul class="bulk-download-loras-list" id="bulkDownloadMissingLorasList"></ul>
</div>
<p class="confirmation-note">
<i class="fas fa-info-circle"></i>
{{ t('modals.bulkDownloadMissingLoras.note') }}
</p>
</div>
<div class="modal-actions">
<button class="secondary-btn" onclick="modalManager.closeModal('bulkDownloadMissingLorasModal')">{{ t('common.actions.cancel') }}</button>
<button class="primary-btn" id="bulkDownloadMissingLorasConfirmBtn" onclick="bulkMissingLoraDownloadManager.confirmDownload()">
<i class="fas fa-download"></i>
{{ t('modals.bulkDownloadMissingLoras.downloadButton') }}
</button>
</div>
</div>
</div>