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;
--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"] {

View File

@@ -124,6 +124,43 @@
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 */
.control-group select {
min-width: 100px;

View File

@@ -34,18 +34,19 @@ export class BulkManager {
// Add global keyboard event listener for Ctrl+A
document.addEventListener('keydown', (e) => {
// Check if it's Ctrl+A (or Cmd+A on Mac)
if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
// First check if any modal is currently open - if so, don't handle Ctrl+A
if (modalManager.isAnyModalOpen()) {
return; // Exit early - let the browser handle Ctrl+A within the modal
}
// First check if any modal is currently open - if so, don't handle Ctrl+A
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
const searchInput = document.getElementById('searchInput');
if (searchInput && document.activeElement === searchInput) {
return; // Exit early - let the browser handle Ctrl+A within the search input
}
// Check if search input is currently focused - if so, don't handle Ctrl+A
const searchInput = document.getElementById('searchInput');
if (searchInput && document.activeElement === searchInput) {
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
e.preventDefault();
@@ -58,6 +59,12 @@ export class BulkManager {
} else {
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();
}
});
}