增加搜索推荐

backend/README.md

@@ -51,6 +51,8 @@ backend/
 - `GET /api/artwork/:id/preview` - 获取作品预览
 - `GET /api/artwork/:id/images` - 获取作品图片URL
   - 参数: `size` (small/medium/large/original)
+- `GET /api/artwork/:id/related` - 获取相关推荐作品
+  - 参数: `offset`, `limit`
 
 ### 排行榜相关
 

backend/routes/artwork.js

@@ -266,4 +266,45 @@ router.post('/:id/bookmark', async (req, res) => {
   }
 });
 
+/**
+ * 获取相关推荐作品
+ * GET /api/artwork/:id/related
+ */
+router.get('/:id/related', async (req, res) => {
+  try {
+    const { id } = req.params;
+    const { offset = 0, limit = 30 } = req.query;
+    
+    if (!id || isNaN(parseInt(id))) {
+      return res.status(400).json({
+        success: false,
+        error: 'Invalid artwork ID'
+      });
+    }
+    
+    const artworkService = new ArtworkService(req.backend.getAuth());
+    const result = await artworkService.getRelatedArtworks(parseInt(id), {
+      offset: parseInt(offset),
+      limit: parseInt(limit)
+    });
+    
+    if (result.success) {
+      res.json({
+        success: true,
+        data: result.data
+      });
+    } else {
+      res.status(404).json({
+        success: false,
+        error: result.error
+      });
+    }
+  } catch (error) {
+    res.status(500).json({
+      success: false,
+      error: error.message
+    });
+  }
+});
+
 module.exports = router; 

backend/services/artwork.js

@@ -366,6 +366,48 @@ class ArtworkService {
     }
   }
 
+  /**
+   * 获取相关推荐作品
+   */
+  async getRelatedArtworks(artworkId, options = {}) {
+    try {
+      const { offset = 0, limit = 30 } = options;
+      
+      if (!artworkId || isNaN(parseInt(artworkId))) {
+        return {
+          success: false,
+          error: 'Invalid artwork ID'
+        };
+      }
+
+      const params = {
+        illust_id: parseInt(artworkId),
+        offset: parseInt(offset),
+        filter: 'for_ios'
+      };
+
+      const response = await this.makeRequest('GET', '/v2/illust/related', params);
+
+      return {
+        success: true,
+        data: {
+          artworks: response.illusts || [],
+          next_url: response.next_url,
+          total: response.illusts ? response.illusts.length : 0,
+          source_artwork_id: artworkId
+        }
+      };
+    } catch (error) {
+      logger.error('Get related artworks error:', error.message);
+      logger.error('Get related artworks error details:', error.response?.data);
+
+      return {
+        success: false,
+        error: error.message || 'Failed to get related artworks'
+      };
+    }
+  }
+
   /**
    * 发送API请求
    */

ui/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "pixivdownload",
+  "name": "pixivmanager",
-  "version": "0.0.0",
+  "version": "1.0.4",
   "private": true,
   "type": "module",
   "engines": {

ui/src/components/artwork/ArtworkRecommendations.vue

@@ -0,0 +1,317 @@
+<template>
+    <div class="artwork-recommendations">
+        <div class="recommendations-header">
+            <h3 class="recommendations-title">相关推荐</h3>
+            <div class="recommendations-info" v-if="totalCount > 0">
+                <span>共 {{ totalCount }} 个推荐作品</span>
+            </div>
+        </div>
+
+        <div v-if="loading && artworks.length === 0" class="loading-section">
+            <LoadingSpinner text="加载推荐中..." />
+        </div>
+
+        <div v-else-if="error && artworks.length === 0" class="error-section">
+            <ErrorMessage :error="error" @dismiss="clearError" />
+        </div>
+
+        <div v-else-if="artworks.length > 0" class="recommendations-content">
+            <div class="artworks-grid">
+                <ArtworkCard v-for="artwork in artworks" :key="artwork.id" :artwork="artwork"
+                    @click="handleArtworkClick" />
+            </div>
+
+            <!-- 加载更多按钮 -->
+            <div v-if="hasMore" class="load-more-section">
+                <button @click="loadMore" class="load-more-btn" :disabled="loadingMore">
+                    {{ loadingMore ? '加载中...' : '加载更多' }}
+                </button>
+            </div>
+
+            <!-- 没有更多内容提示 -->
+            <div v-else-if="artworks.length > 0" class="no-more-section">
+                <p>已加载全部推荐作品</p>
+            </div>
+        </div>
+
+        <div v-else class="empty-section">
+            <p>暂无相关推荐</p>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import artworkService from '@/services/artwork';
+import type { Artwork } from '@/types';
+import ArtworkCard from '@/components/artwork/ArtworkCard.vue';
+import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
+import ErrorMessage from '@/components/common/ErrorMessage.vue';
+
+interface Props {
+    artworkId: number;
+}
+
+const props = defineProps<Props>();
+const router = useRouter();
+
+// 状态
+const artworks = ref<Artwork[]>([]);
+const loading = ref(false);
+const loadingMore = ref(false);
+const error = ref<string | null>(null);
+const nextUrl = ref<string | null>(null);
+const hasMore = ref(false);
+const totalCount = ref(0);
+
+// 缓存相关
+const cache = ref<Map<string, any>>(new Map());
+const cacheTimeout = ref<Map<string, number>>(new Map());
+const CACHE_DURATION = 5 * 60 * 1000; // 5分钟缓存
+
+// 缓存键生成
+const getCacheKey = (artworkId: number, isFirstPage: boolean = true) => {
+    return `recommendations_${artworkId}_${isFirstPage ? 'first' : 'more'}`;
+};
+
+// 获取缓存
+const getCache = (key: string) => {
+    const cached = cache.value.get(key);
+    const timeout = cacheTimeout.value.get(key);
+
+    if (cached && timeout && Date.now() < timeout) {
+        return cached;
+    }
+
+    // 清除过期缓存
+    if (cached) {
+        cache.value.delete(key);
+        cacheTimeout.value.delete(key);
+    }
+
+    return null;
+};
+
+// 设置缓存
+const setCache = (key: string, data: any) => {
+    cache.value.set(key, data);
+    cacheTimeout.value.set(key, Date.now() + CACHE_DURATION);
+};
+
+// 清除缓存
+const clearCache = () => {
+    cache.value.clear();
+    cacheTimeout.value.clear();
+};
+
+// 获取推荐作品
+const fetchRecommendations = async (isLoadMore = false) => {
+    if (!props.artworkId) return;
+
+    // 检查缓存（仅第一页）
+    if (!isLoadMore) {
+        const cacheKey = getCacheKey(props.artworkId, true);
+        const cached = getCache(cacheKey);
+        if (cached) {
+            artworks.value = cached.artworks;
+            nextUrl.value = cached.nextUrl;
+            hasMore.value = cached.hasMore;
+            totalCount.value = cached.totalCount;
+            return;
+        }
+    }
+
+    try {
+        if (isLoadMore) {
+            loadingMore.value = true;
+        } else {
+            loading.value = true;
+            error.value = null;
+        }
+
+        const response = await artworkService.getRelatedArtworks(props.artworkId, {
+            offset: isLoadMore ? artworks.value.length : 0,
+            limit: 30
+        });
+
+        if (response.success && response.data) {
+            if (isLoadMore) {
+                // 追加到现有列表
+                artworks.value.push(...response.data.artworks);
+            } else {
+                // 替换列表
+                artworks.value = response.data.artworks;
+                totalCount.value = response.data.total || response.data.artworks.length;
+            }
+
+            nextUrl.value = response.data.next_url || null;
+            hasMore.value = !!response.data.next_url && response.data.artworks.length > 0;
+
+            // 缓存第一页结果
+            if (!isLoadMore) {
+                const cacheKey = getCacheKey(props.artworkId, true);
+                setCache(cacheKey, {
+                    artworks: response.data.artworks,
+                    nextUrl: nextUrl.value,
+                    hasMore: hasMore.value,
+                    totalCount: totalCount.value
+                });
+            }
+        } else {
+            throw new Error(response.error || '获取推荐作品失败');
+        }
+    } catch (err) {
+        error.value = err instanceof Error ? err.message : '获取推荐作品失败';
+        console.error('获取推荐作品失败:', err);
+    } finally {
+        if (isLoadMore) {
+            loadingMore.value = false;
+        } else {
+            loading.value = false;
+        }
+    }
+};
+
+// 加载更多
+const loadMore = async () => {
+    if (!hasMore.value || loadingMore.value) return;
+    await fetchRecommendations(true);
+};
+
+// 处理作品点击
+const handleArtworkClick = (artwork: Artwork) => {
+    // 在新标签页中打开
+    const url = router.resolve({
+        path: `/artwork/${artwork.id}`
+    });
+    window.open(url.href, '_blank');
+};
+
+// 清除错误
+const clearError = () => {
+    error.value = null;
+};
+
+// 监听作品ID变化
+watch(() => props.artworkId, (newId, oldId) => {
+    if (newId !== oldId) {
+        // 清除状态
+        artworks.value = [];
+        nextUrl.value = null;
+        hasMore.value = false;
+        totalCount.value = 0;
+        error.value = null;
+
+        // 获取新的推荐
+        if (newId) {
+            fetchRecommendations();
+        }
+    }
+});
+
+onMounted(() => {
+    if (props.artworkId) {
+        fetchRecommendations();
+    }
+});
+</script>
+
+<style scoped>
+.artwork-recommendations {
+    background: white;
+    border-radius: 1rem;
+    padding: 2rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.recommendations-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+}
+
+.recommendations-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #1f2937;
+    margin: 0;
+}
+
+.recommendations-info {
+    color: #6b7280;
+    font-size: 0.875rem;
+}
+
+.loading-section,
+.error-section,
+.empty-section {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 200px;
+    color: #6b7280;
+}
+
+.artworks-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 2rem;
+    margin-bottom: 2rem;
+}
+
+.load-more-section {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 1rem;
+}
+
+.load-more-btn {
+    padding: 0.75rem 2rem;
+    border: 1px solid #d1d5db;
+    border-radius: 0.5rem;
+    background: white;
+    color: #374151;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-size: 1rem;
+}
+
+.load-more-btn:hover:not(:disabled) {
+    background: #f3f4f6;
+    border-color: #9ca3af;
+    transform: translateY(-1px);
+}
+
+.load-more-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.no-more-section {
+    text-align: center;
+    padding: 2rem 0;
+    color: #6b7280;
+    font-size: 0.875rem;
+}
+
+@media (max-width: 768px) {
+    .artwork-recommendations {
+        padding: 1.5rem;
+    }
+
+    .recommendations-header {
+        flex-direction: column;
+        gap: 0.5rem;
+        align-items: flex-start;
+    }
+
+    .artworks-grid {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+    }
+}
+</style>

ui/src/services/artwork.ts

@@ -97,6 +97,18 @@ class ArtworkService {
 
     return apiService.get<{ artworks: Artwork[]; next_url?: string; total: number }>(`/api/artwork/bookmarks?${queryParams.toString()}`);
   }
+
+  /**
+   * 获取相关推荐作品
+   */
+  async getRelatedArtworks(artworkId: number, params: { offset?: number; limit?: number } = {}): Promise<ApiResponse<{ artworks: Artwork[]; next_url?: string; total: number; source_artwork_id: number }>> {
+    const queryParams = new URLSearchParams();
+    
+    if (params.offset !== undefined) queryParams.append('offset', params.offset.toString());
+    if (params.limit !== undefined) queryParams.append('limit', params.limit.toString());
+
+    return apiService.get<{ artworks: Artwork[]; next_url?: string; total: number; source_artwork_id: number }>(`/api/artwork/${artworkId}/related?${queryParams.toString()}`);
+  }
 }
 
 export const artworkService = new ArtworkService();

ui/src/views/ArtworkView.vue

@@ -25,10 +25,25 @@
         <ArtworkInfoPanel :artwork="artwork" :downloading="downloading" :is-downloaded="isDownloaded"
           :current-task="currentTask" :loading="loading" :show-navigation="showNavigation"
           :previous-artwork="previousArtwork" :next-artwork="nextArtwork" :canNavigatePrevious="canNavigateToPrevious"
-          :canNavigateNext="canNavigateToNext" :selected-tags="selectedTags"
+          :canNavigateNext="canNavigateToNext" :selected-tags="selectedTags" @download="handleDownload"
-          @download="handleDownload" @bookmark="handleBookmark"
+          @bookmark="handleBookmark" @go-back="goBackToArtist" @navigate-previous="navigateToPrevious"
-          @go-back="goBackToArtist" @navigate-previous="navigateToPrevious" @navigate-next="navigateToNext"
+          @navigate-next="navigateToNext" @tag-click="handleTagClick" />
-          @tag-click="handleTagClick" />
+      </div>
+
+      <!-- 推荐作品开关和组件 -->
+      <div v-if="artwork" class="recommendations-section">
+        <div class="recommendations-toggle">
+          <label class="toggle-label">
+            <input type="checkbox" v-model="showRecommendations" class="toggle-checkbox" />
+            <span class="toggle-switch"></span>
+            <span class="toggle-text">显示相关推荐</span>
+          </label>
+        </div>
+
+        <!-- 推荐作品组件 -->
+        <div v-if="showRecommendations" class="recommendations-container">
+          <ArtworkRecommendations :artwork-id="artwork.id" />
+        </div>
       </div>
     </div>
   </div>
@@ -51,6 +66,7 @@ import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
 import DownloadProgress from '@/components/download/DownloadProgress.vue';
 import ArtworkGallery from '@/components/artwork/ArtworkGallery.vue';
 import ArtworkInfoPanel from '@/components/artwork/ArtworkInfoPanel.vue';
+import ArtworkRecommendations from '@/components/artwork/ArtworkRecommendations.vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -85,6 +101,22 @@ const hasPreviousPages = ref(false); // 是否还有上一页
 const isLoadingMore = ref(false); // 是否正在加载更多页面
 const isLoadingPrevious = ref(false); // 是否正在加载上一页
 
+// 推荐作品开关状态
+const showRecommendations = ref(true);
+
+// 初始化推荐开关状态（从localStorage读取）
+const initializeRecommendationsState = () => {
+  const saved = localStorage.getItem('artwork-show-recommendations');
+  if (saved !== null) {
+    showRecommendations.value = JSON.parse(saved);
+  }
+};
+
+// 监听推荐开关状态变化并保存到localStorage
+watch(showRecommendations, (newValue) => {
+  localStorage.setItem('artwork-show-recommendations', JSON.stringify(newValue));
+});
+
 // 导航相关计算属性
 const showNavigation = computed(() => {
   return !!(route.query.artistId && route.query.artworkType);
@@ -710,6 +742,9 @@ onMounted(() => {
   document.addEventListener('keydown', handleKeydown);
   document.addEventListener('keydown', handleKeyDown);
   document.addEventListener('keyup', handleKeyUp);
+
+  // 初始化推荐开关状态
+  initializeRecommendationsState();
 });
 
 // 组件卸载时移除事件监听
@@ -754,7 +789,70 @@ onUnmounted(() => {
   pointer-events: none;
 }
 
+.recommendations-section {
+  margin-top: 3rem;
+  padding: 2rem;
+  background-color: #f0f2f5;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
 
+.recommendations-toggle {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  padding-left: 0.5rem;
+}
+
+.toggle-label {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 0.9rem;
+  color: #333;
+}
+
+.toggle-checkbox {
+  display: none;
+  /* Hide the default checkbox */
+}
+
+.toggle-switch {
+  position: relative;
+  width: 40px;
+  height: 20px;
+  background-color: #ccc;
+  border-radius: 10px;
+  margin: 0 10px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.toggle-switch::before {
+  content: "";
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: white;
+  top: 2px;
+  left: 2px;
+  transition: transform 0.3s ease;
+}
+
+.toggle-checkbox:checked+.toggle-switch {
+  background-color: #4caf50;
+  /* Green color for checked */
+}
+
+.toggle-checkbox:checked+.toggle-switch::before {
+  transform: translateX(20px);
+}
+
+.toggle-text {
+  font-size: 0.9rem;
+  color: #333;
+}
 
 @media (max-width: 1024px) {
   .artwork-content {

ui/src/views/SearchView.vue

@@ -95,7 +95,7 @@
             <select v-model="searchSort" @change="updateFiltersInUrl" class="filter-select">
               <option value="date_desc">最新</option>
               <option value="date_asc">最旧</option>
-              <option value="popular_desc">最受欢迎</option>
+              <option value="popular_desc">最受欢迎（会员专属，这里不生效）</option>
             </select>
 
             <select v-model="searchDuration" @change="updateFiltersInUrl" class="filter-select">