From 6268406a118d92d91b991ddd2ea70e75fd67b6d7 Mon Sep 17 00:00:00 2001
From: kjqwer <2990346238@qq.com>
Date: Sun, 7 Sep 2025 17:37:29 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=B8=8B=E8=BD=BD=E5=BF=AB?=
 =?UTF-8?q?=E6=8D=B7=E9=94=AE=E5=92=8C=E5=BF=AB=E6=8D=B7=E9=94=AE=E8=AF=B4?=
 =?UTF-8?q?=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/artwork/ArtworkInfoPanel.vue   | 35 +++++++----
 ui/src/views/ArtworkView.vue                  | 59 ++++++++++---------
 2 files changed, 54 insertions(+), 40 deletions(-)

diff --git a/ui/src/components/artwork/ArtworkInfoPanel.vue b/ui/src/components/artwork/ArtworkInfoPanel.vue
index 2ab2c42..26c2164 100644
--- a/ui/src/components/artwork/ArtworkInfoPanel.vue
+++ b/ui/src/components/artwork/ArtworkInfoPanel.vue
@@ -4,12 +4,14 @@
             <h1 class="artwork-title">{{ artwork.title }}</h1>
             <!-- 下载按钮 -->
             <div class="artwork-actions">
-                <button @click="$emit('download')" :disabled="downloading || !artwork" class="btn btn-primary">
+                <button @click="$emit('download')" :disabled="downloading || !artwork" class="btn btn-primary"
+                    :title="downloading ? '正在下载中...' : (isDownloaded ? '重新下载作品 (快捷键: ↓)' : '下载作品到本地 (快捷键: ↓)')">
                     <span v-if="downloading">下载中...</span>
                     <span v-else-if="isDownloaded">重新下载</span>
                     <span v-else>下载</span>
                 </button>
-                <button @click="$emit('bookmark')" class="btn btn-secondary">
+                <button @click="$emit('bookmark')" class="btn btn-secondary"
+                    :title="artwork.is_bookmarked ? '取消收藏此作品' : '收藏此作品'">
                     {{ artwork.is_bookmarked ? '取消收藏' : '收藏' }}
                 </button>
             </div>
@@ -51,18 +53,19 @@
                 <svg viewBox="0 0 24 24" fill="currentColor">
                     <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
                 </svg>
-                <span>返回</span>
+                <span>返回 <span class="keyboard-hint">(Esc)</span></span>
             </button>
-            <button @click="$emit('navigatePrevious')" class="nav-btn nav-prev" :disabled="!canNavigatePrevious || loading"
-                :title="canNavigatePrevious ? (previousArtwork ? `上一个: ${previousArtwork.title}` : '加载上一页') : '没有上一个作品'">
+            <button @click="$emit('navigatePrevious')" class="nav-btn nav-prev"
+                :disabled="!canNavigatePrevious || loading"
+                :title="canNavigatePrevious ? (previousArtwork ? `上一个(快捷键: ←): ${previousArtwork.title}` : '加载上一页') : '没有上一个作品'">
                 <svg viewBox="0 0 24 24" fill="currentColor">
                     <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
                 </svg>
-                <span>{{ loading ? '切换中...' : '上一个' }}</span>
+                <span>{{ loading ? '切换中...' : '上一个' }} </span>
             </button>
             <button @click="$emit('navigateNext')" class="nav-btn nav-next" :disabled="!canNavigateNext || loading"
-                :title="canNavigateNext ? (nextArtwork ? `下一个: ${nextArtwork.title}` : '加载下一页') : '没有下一个作品'">
-                <span>{{ loading ? '切换中...' : '下一个' }}</span>
+                :title="canNavigateNext ? (nextArtwork ? `下一个(快捷键: →): ${nextArtwork.title}` : '加载下一页') : '没有下一个作品'">
+                <span>{{ loading ? '切换中...' : '下一个' }} </span>
                 <svg viewBox="0 0 24 24" fill="currentColor">
                     <path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" />
                 </svg>
@@ -124,7 +127,7 @@
                     <span class="meta-value">{{ formatDate(artwork.update_date) }}</span>
                 </div>
             </div>
-            
+
             <!-- 推荐作品开关 -->
             <div class="toggle-container">
                 <span class="toggle-label">相关推荐</span>
@@ -621,18 +624,26 @@ const handleToggleChange = (event: Event) => {
     transition: .3s;
 }
 
-input:checked + .slider {
+input:checked+.slider {
     background-color: #3b82f6;
 }
 
-input:focus + .slider {
+input:focus+.slider {
     box-shadow: 0 0 1px #3b82f6;
 }
 
-input:checked + .slider:before {
+input:checked+.slider:before {
     transform: translateX(14px);
 }
 
+.keyboard-hint {
+    font-size: 0.75rem;
+    color: #9ca3af;
+    font-weight: 400;
+    margin-left: 0.25rem;
+    opacity: 0.8;
+}
+
 @media (max-width: 768px) {
     .artwork-actions {
         flex-direction: column;
diff --git a/ui/src/views/ArtworkView.vue b/ui/src/views/ArtworkView.vue
index c4a559e..70f0209 100644
--- a/ui/src/views/ArtworkView.vue
+++ b/ui/src/views/ArtworkView.vue
@@ -136,24 +136,24 @@ const nextArtwork = computed(() => {
 // 新增计算属性：是否可以导航到上一个作品
 const canNavigateToPrevious = computed(() => {
   const result = previousArtwork.value !== null || hasPreviousPages.value;
-  console.log('canNavigateToPrevious:', {
-    previousArtwork: previousArtwork.value,
-    hasPreviousPages: hasPreviousPages.value,
-    currentArtworkIndex: currentArtworkIndex.value,
-    result
-  });
+  // console.log('canNavigateToPrevious:', {
+  //   previousArtwork: previousArtwork.value,
+  //   hasPreviousPages: hasPreviousPages.value,
+  //   currentArtworkIndex: currentArtworkIndex.value,
+  //   result
+  // });
   return result;
 });
 
 // 新增计算属性：是否可以导航到下一个作品
 const canNavigateToNext = computed(() => {
   const result = nextArtwork.value !== null || hasMorePages.value;
-  console.log('canNavigateToNext:', {
-    nextArtwork: nextArtwork.value,
-    hasMorePages: hasMorePages.value,
-    currentArtworkIndex: currentArtworkIndex.value,
-    result
-  });
+  // console.log('canNavigateToNext:', {
+  //   nextArtwork: nextArtwork.value,
+  //   hasMorePages: hasMorePages.value,
+  //   currentArtworkIndex: currentArtworkIndex.value,
+  //   result
+  // });
   return result;
 });
 
@@ -402,21 +402,21 @@ const fetchArtistArtworks = async (page = 1, append = false, prepend = false) =>
       const currentId = parseInt(route.params.id as string);
       currentArtworkIndex.value = artistArtworks.value.findIndex(art => art.id === currentId);
 
-      console.log('fetchArtistArtworks 完成:', {
-        page,
-        append,
-        prepend,
-        artworksCount: response.data.artworks.length,
-        hasMorePages: hasMorePages.value,
-        hasPreviousPages: hasPreviousPages.value,
-        navigationCurrentPage: navigationCurrentPage.value,
-        currentArtworkIndex: currentArtworkIndex.value,
-        currentId,
-        currentArtworkId: artwork.value?.id,
-        firstArtworkId: artistArtworks.value[0]?.id,
-        lastArtworkId: artistArtworks.value[artistArtworks.value.length - 1]?.id,
-        allArtworkIds: artistArtworks.value.map(art => art.id)
-      });
+      // console.log('fetchArtistArtworks 完成:', {
+      //   page,
+      //   append,
+      //   prepend,
+      //   artworksCount: response.data.artworks.length,
+      //   hasMorePages: hasMorePages.value,
+      //   hasPreviousPages: hasPreviousPages.value,
+      //   navigationCurrentPage: navigationCurrentPage.value,
+      //   currentArtworkIndex: currentArtworkIndex.value,
+      //   currentId,
+      //   currentArtworkId: artwork.value?.id,
+      //   firstArtworkId: artistArtworks.value[0]?.id,
+      //   lastArtworkId: artistArtworks.value[artistArtworks.value.length - 1]?.id,
+      //   allArtworkIds: artistArtworks.value.map(art => art.id)
+      // });
     }
   } catch (err) {
     console.error('获取作者作品列表失败:', err);
@@ -714,6 +714,9 @@ const handleKeydown = (event: KeyboardEvent) => {
   } else if (event.key === 'Escape') {
     event.preventDefault();
     goBackToArtist();
+  } else if (event.key === 'ArrowDown') {
+    event.preventDefault();
+    handleDownload();
   }
 };
 
@@ -768,7 +771,7 @@ onUnmounted(() => {
 
 .artwork-content {
   display: grid;
-  grid-template-columns: 1fr 460px;
+  grid-template-columns: 1fr 480px;
   gap: 3rem;
   align-items: start;
   transition: opacity 0.3s ease;