feat: Add keyboard shortcuts for bulk operations and enhance shortcut key styling

This commit is contained in:
Will Miao
2025-07-22 19:14:36 +08:00
parent 6d3feb4bef
commit eccfa0ca54
4 changed files with 62 additions and 13 deletions

View File

@@ -70,6 +70,11 @@ html, body {
--border-radius-xs: 4px; --border-radius-xs: 4px;
--scrollbar-width: 8px; /* 添加滚动条宽度变量 */ --scrollbar-width: 8px; /* 添加滚动条宽度变量 */
/* Shortcut styles */
--shortcut-bg: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.12);
--shortcut-border: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.25);
--shortcut-text: var(--text-color);
} }
html[data-theme="dark"] { html[data-theme="dark"] {

View File

@@ -124,6 +124,43 @@
border-color: var(--lora-accent); border-color: var(--lora-accent);
} }
/* Keyboard shortcut indicator styling */
.shortcut-key {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 6px;
min-width: 16px;
height: 16px;
padding: 0 3px;
font-size: 11px;
font-weight: 600;
line-height: 1;
border-radius: var(--border-radius-xs);
background-color: var(--shortcut-bg);
border: 1px solid var(--shortcut-border);
color: var(--shortcut-text);
vertical-align: middle;
opacity: 0.8;
transition: all 0.2s ease;
}
.control-group button:hover .shortcut-key {
opacity: 1;
background-color: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.2);
}
[data-theme="dark"] .shortcut-key {
--shortcut-bg: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.15);
--shortcut-border: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.3);
}
/* Ensure correct vertical alignment for text+shortcut */
.control-group button span {
display: inline-flex;
align-items: center;
}
/* Select dropdown styling */ /* Select dropdown styling */
.control-group select { .control-group select {
min-width: 100px; min-width: 100px;

View File

@@ -34,18 +34,19 @@ export class BulkManager {
// Add global keyboard event listener for Ctrl+A // Add global keyboard event listener for Ctrl+A
document.addEventListener('keydown', (e) => { document.addEventListener('keydown', (e) => {
// Check if it's Ctrl+A (or Cmd+A on Mac) // First check if any modal is currently open - if so, don't handle Ctrl+A
if ((e.ctrlKey || e.metaKey) && e.key === 'a') { if (modalManager.isAnyModalOpen()) {
// First check if any modal is currently open - if so, don't handle Ctrl+A return; // Exit early - let the browser handle Ctrl+A within the modal
if (modalManager.isAnyModalOpen()) { }
return; // Exit early - let the browser handle Ctrl+A within the modal
}
// Check if search input is currently focused - if so, don't handle Ctrl+A // Check if search input is currently focused - if so, don't handle Ctrl+A
const searchInput = document.getElementById('searchInput'); const searchInput = document.getElementById('searchInput');
if (searchInput && document.activeElement === searchInput) { if (searchInput && document.activeElement === searchInput) {
return; // Exit early - let the browser handle Ctrl+A within the search input return; // Exit early - let the browser handle Ctrl+A within the search input
} }
// Check if it's Ctrl+A (or Cmd+A on Mac)
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'a') {
// Prevent default browser "Select All" behavior // Prevent default browser "Select All" behavior
e.preventDefault(); e.preventDefault();
@@ -58,6 +59,12 @@ export class BulkManager {
} else { } else {
this.selectAllVisibleLoras(); this.selectAllVisibleLoras();
} }
} else if (e.key === 'Escape' && state.bulkMode) {
// If in bulk mode, exit it on Escape
this.toggleBulkMode();
} else if (e.key.toLowerCase() === 'b') {
// If 'b' is pressed, toggle bulk mode
this.toggleBulkMode();
} }
}); });
} }

View File

@@ -41,8 +41,8 @@
<!-- Conditional buttons based on page --> <!-- Conditional buttons based on page -->
{% if request.path == '/loras' %} {% if request.path == '/loras' %}
<div class="control-group"> <div class="control-group">
<button id="bulkOperationsBtn" data-action="bulk" title="Bulk Operations"> <button id="bulkOperationsBtn" data-action="bulk" title="Bulk Operations (Press B)">
<i class="fas fa-th-large"></i> Bulk <i class="fas fa-th-large"></i> <span>Bulk <div class="shortcut-key">B</div></span>
</button> </button>
</div> </div>
{% endif %} {% endif %}