From eccfa0ca54a94e7f6bac85df678d2a7d40a3d9e0 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Tue, 22 Jul 2025 19:14:36 +0800
Subject: [PATCH] feat: Add keyboard shortcuts for bulk operations and enhance
 shortcut key styling

---
 static/css/base.css                |  5 ++++
 static/css/layout.css              | 37 ++++++++++++++++++++++++++++++
 static/js/managers/BulkManager.js  | 29 ++++++++++++++---------
 templates/components/controls.html |  4 ++--
 4 files changed, 62 insertions(+), 13 deletions(-)

diff --git a/static/css/base.css b/static/css/base.css
index 3619dd85..1f983dae 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -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"] {
diff --git a/static/css/layout.css b/static/css/layout.css
index 879a3249..b948a5f2 100644
--- a/static/css/layout.css
+++ b/static/css/layout.css
@@ -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;
diff --git a/static/js/managers/BulkManager.js b/static/js/managers/BulkManager.js
index 3c47d9fa..fe96d971 100644
--- a/static/js/managers/BulkManager.js
+++ b/static/js/managers/BulkManager.js
@@ -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();
             }
         });
     }
diff --git a/templates/components/controls.html b/templates/components/controls.html
index 15d712bf..65b53350 100644
--- a/templates/components/controls.html
+++ b/templates/components/controls.html
@@ -41,8 +41,8 @@
             <!-- Conditional buttons based on page -->
             {% if request.path == '/loras' %}
             <div class="control-group">
-                <button id="bulkOperationsBtn" data-action="bulk" title="Bulk Operations">
-                    <i class="fas fa-th-large"></i> Bulk
+                <button id="bulkOperationsBtn" data-action="bulk" title="Bulk Operations (Press B)">
+                    <i class="fas fa-th-large"></i> <span>Bulk <div class="shortcut-key">B</div></span>
                 </button>
             </div>
             {% endif %}