From 6e71ea3f55527a5df51f520ee473a8536ea1d6d4 Mon Sep 17 00:00:00 2001
From: kjqwer <2990346238@qq.com>
Date: Wed, 10 Sep 2025 14:11:46 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=B6=E4=BB=96=E9=A1=B5=E9=9D=A2=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E7=BF=BB=E9=A1=B5=E5=BF=AB=E6=8D=B7=E9=94=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/views/ArtistView.vue | 40 +++++++++++++++++++++++++++++++------
 ui/src/views/SearchView.vue | 38 ++++++++++++++++++++++++++++++++---
 2 files changed, 69 insertions(+), 9 deletions(-)

diff --git a/ui/src/views/ArtistView.vue b/ui/src/views/ArtistView.vue
index 3592ed8..62cf9c5 100644
--- a/ui/src/views/ArtistView.vue
+++ b/ui/src/views/ArtistView.vue
@@ -120,7 +120,8 @@
 
           <!-- 分页导航 -->
           <div v-if="totalPages > 1 && artworks.length > 0" class="pagination">
-            <button @click="goToPage(currentPage - 1)" class="page-btn" :disabled="currentPage <= 1">
+            <button @click="goToPage(currentPage - 1)" class="page-btn" :disabled="currentPage <= 1"
+              :title="`上一页(快捷键: ←)`">
               <svg viewBox="0 0 24 24" fill="currentColor" class="page-icon">
                 <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
               </svg>
@@ -134,7 +135,8 @@
               </button>
             </div>
 
-            <button @click="goToPage(currentPage + 1)" class="page-btn" :disabled="currentPage >= totalPages">
+            <button @click="goToPage(currentPage + 1)" class="page-btn" :disabled="currentPage >= totalPages"
+              :title="`下一页(快捷键: →)`">
               下一页
               <svg viewBox="0 0 24 24" fill="currentColor" class="page-icon">
                 <path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" />
@@ -599,7 +601,7 @@ const isProcessingPageChange = ref(false);
 // 统一的页面变化处理函数
 const handlePageChange = async (page: number, isJumpToPage = false) => {
   if (isProcessingPageChange.value || page === currentPage.value) return;
-  
+
   isProcessingPageChange.value = true;
   try {
     // 如果artist还没加载完成，等待加载完成
@@ -616,7 +618,7 @@ const handlePageChange = async (page: number, isJumpToPage = false) => {
       };
       await waitForArtist();
     }
-    
+
     if (artist.value) {
       currentPage.value = page;
       await fetchArtworks(page, isJumpToPage);
@@ -643,7 +645,7 @@ watch(() => artist.value?.id, (newArtistId, oldArtistId) => {
     artworks.value = [];
     currentPage.value = 1;
     totalPages.value = 0;
-    
+
     // 检查是否有页面参数
     const pageParam = route.query.page;
     if (pageParam) {
@@ -659,9 +661,32 @@ watch(() => artist.value?.id, (newArtistId, oldArtistId) => {
   }
 }, { immediate: false });
 
-// 组件卸载时清理缓存
+// 键盘事件处理
+const handleKeyDown = (event: KeyboardEvent) => {
+  // 检查是否在输入框中，如果是则不处理
+  const target = event.target as HTMLElement;
+  if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT')) {
+    return;
+  }
+
+  // 只有在有多页且有作品时才处理键盘事件
+  if (totalPages.value <= 1 || artworks.value.length === 0) {
+    return;
+  }
+
+  if (event.key === 'ArrowLeft' && currentPage.value > 1) {
+    event.preventDefault();
+    goToPage(currentPage.value - 1);
+  } else if (event.key === 'ArrowRight' && currentPage.value < totalPages.value) {
+    event.preventDefault();
+    goToPage(currentPage.value + 1);
+  }
+};
+
+// 组件卸载时清理缓存和事件监听器
 onUnmounted(() => {
   clearCache();
+  window.removeEventListener('keydown', handleKeyDown);
 });
 
 onMounted(async () => {
@@ -679,6 +704,9 @@ onMounted(async () => {
     }
   }
 
+  // 添加键盘事件监听器
+  window.addEventListener('keydown', handleKeyDown);
+
   // 恢复滚动位置（延迟执行确保页面内容完全加载）
   setTimeout(() => {
     restoreScrollPosition(route.fullPath);
diff --git a/ui/src/views/SearchView.vue b/ui/src/views/SearchView.vue
index 5fb831a..7463b03 100644
--- a/ui/src/views/SearchView.vue
+++ b/ui/src/views/SearchView.vue
@@ -139,7 +139,8 @@
             <!-- 分页导航 -->
             <div v-if="totalPages > 1" class="pagination-section">
               <div class="pagination">
-                <button @click="goToPage(currentPage - 1)" class="page-btn" :disabled="currentPage <= 1">
+                <button @click="goToPage(currentPage - 1)" class="page-btn" :disabled="currentPage <= 1"
+                  :title="`上一页(快捷键: ←)`">
                   上一页
                 </button>
 
@@ -148,7 +149,8 @@
                   {{ page }}
                 </button>
 
-                <button @click="goToPage(currentPage + 1)" class="page-btn" :disabled="currentPage >= totalPages">
+                <button @click="goToPage(currentPage + 1)" class="page-btn" :disabled="currentPage >= totalPages"
+                  :title="`下一页(快捷键: →)`">
                   下一页
                 </button>
               </div>
@@ -197,7 +199,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted } from 'vue';
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useAuthStore } from '@/stores/auth';
 import artworkService from '@/services/artwork';
@@ -751,12 +753,42 @@ watch(() => route.query, () => {
   if (urlDuration) searchDuration.value = urlDuration as 'all' | 'within_last_day' | 'within_last_week' | 'within_last_month';
 }, { immediate: true });
 
+// 键盘事件处理
+const handleKeyDown = (event: KeyboardEvent) => {
+  // 检查是否在输入框中，如果是则不处理
+  const target = event.target as HTMLElement;
+  if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT')) {
+    return;
+  }
+
+  // 只有在有搜索结果且有多页时才处理键盘事件
+  if (totalPages.value <= 1 || searchResults.value.length === 0 || searchMode.value === 'artist') {
+    return;
+  }
+
+  if (event.key === 'ArrowLeft' && currentPage.value > 1) {
+    event.preventDefault();
+    goToPage(currentPage.value - 1);
+  } else if (event.key === 'ArrowRight' && currentPage.value < totalPages.value) {
+    event.preventDefault();
+    goToPage(currentPage.value + 1);
+  }
+};
+
 // 组件挂载时恢复滚动位置
 onMounted(() => {
+  // 添加键盘事件监听器
+  window.addEventListener('keydown', handleKeyDown);
+
   setTimeout(() => {
     restoreScrollPosition(route.fullPath);
   }, 200);
 });
+
+// 组件卸载时移除事件监听器
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeyDown);
+});
 </script>
 
 <style scoped>