增加搜索推荐

ui/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "pixivdownload",
-  "version": "0.0.0",
+  "name": "pixivmanager",
+  "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"
-          @download="handleDownload" @bookmark="handleBookmark"
-          @go-back="goBackToArtist" @navigate-previous="navigateToPrevious" @navigate-next="navigateToNext"
-          @tag-click="handleTagClick" />
+          :canNavigateNext="canNavigateToNext" :selected-tags="selectedTags" @download="handleDownload"
+          @bookmark="handleBookmark" @go-back="goBackToArtist" @navigate-previous="navigateToPrevious"
+          @navigate-next="navigateToNext" @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);
@@ -95,12 +127,12 @@ const previousArtwork = computed(() => {
   if (currentArtworkIndex.value === 0 && hasPreviousPages.value) {
     return null; // 返回null，但hasPreviousPages会控制按钮状态
   }
-  
+
   // 如果当前作品不在第一个位置，返回前一个作品
   if (currentArtworkIndex.value > 0) {
     return artistArtworks.value[currentArtworkIndex.value - 1];
   }
-  
+
   return null;
 });
 
@@ -370,7 +402,7 @@ const fetchArtistArtworks = async (page = 1, append = false, prepend = false) =>
       hasMorePages.value = response.data.artworks.length === pageSize;
       // 检查是否还有上一页
       hasPreviousPages.value = page > 1;
-      
+
       // 更新当前导航页码
       if (!append && !prepend) {
         navigationCurrentPage.value = page;
@@ -412,7 +444,7 @@ const fetchArtistArtworks = async (page = 1, append = false, prepend = false) =>
 // 加载下一页作品
 const loadNextPage = async () => {
   if (!hasMorePages.value || isLoadingMore.value) return;
-  
+
   const nextPage = navigationCurrentPage.value + 1;
   await fetchArtistArtworks(nextPage, true, false);
   // 更新当前导航页码
@@ -422,7 +454,7 @@ const loadNextPage = async () => {
 // 加载上一页作品
 const loadPreviousPage = async () => {
   if (!hasPreviousPages.value || isLoadingPrevious.value) return;
-  
+
   const previousPage = navigationCurrentPage.value - 1;
   await fetchArtistArtworks(previousPage, false, true);
   // 更新当前导航页码
@@ -432,7 +464,7 @@ const loadPreviousPage = async () => {
 // 辅助函数：更新returnUrl中的页码
 const updateReturnUrlPage = (returnUrl: string, newPage: number): string => {
   if (!returnUrl) return returnUrl;
-  
+
   // 如果returnUrl包含页码，更新它
   if (returnUrl.includes('page=')) {
     return returnUrl.replace(/page=\d+/, `page=${newPage}`);
@@ -462,7 +494,7 @@ const navigateToNext = async () => {
       // 计算返回链接的页码和当前导航页码
       let returnPage = parseInt(route.query.page as string) || 1;
       let currentNavPage = navigationCurrentPage.value;
-      
+
       if (currentArtworkIndex.value === artistArtworks.value.length - 1) {
         // 如果跳转到下一页的作品，返回链接应该指向当前页，当前导航页码递增
         returnPage = currentNavPage; // 返回时应该在第x页
@@ -507,7 +539,7 @@ const navigateToPrevious = async () => {
       // 计算返回链接的页码和当前导航页码
       let returnPage = parseInt(route.query.page as string) || 1;
       let currentNavPage = navigationCurrentPage.value;
-      
+
       if (currentArtworkIndex.value === 0) {
         // 如果跳转到上一页的作品，返回链接应该指向当前页，当前导航页码递减
         returnPage = currentNavPage; // 返回时应该在第x页
@@ -537,18 +569,18 @@ const navigateToPrevious = async () => {
 const goBackToArtist = () => {
   const returnUrl = route.query.returnUrl as string;
   let targetPath = returnUrl || `/artist/${route.query.artistId}`;
-  
+
   // 如果返回链接不包含页码，添加当前页码
   if (targetPath && !targetPath.includes('page=')) {
     const separator = targetPath.includes('?') ? '&' : '?';
     targetPath += `${separator}page=${navigationCurrentPage.value}`;
   }
-  
+
   if (targetPath) {
     // 获取当前保存的滚动位置（如果有的话）
     const savedScrollKey = `scroll_${targetPath}`;
     const savedPosition = sessionStorage.getItem(savedScrollKey);
-    
+
     // 如果没有保存的滚动位置，设置一个默认位置（通常是之前访问时的位置）
     if (!savedPosition && route.query.scrollTop) {
       const scrollPosition = {
@@ -557,7 +589,7 @@ const goBackToArtist = () => {
       };
       saveScrollPositionForPath(targetPath, scrollPosition);
     }
-    
+
     router.push(targetPath);
   }
 };
@@ -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">
@@ -351,7 +351,7 @@ const goToPage = (page: number) => {
 const handleArtworkClick = (artwork: Artwork) => {
   // 保存当前页面的滚动位置
   saveScrollPosition(route.fullPath);
-  
+
   router.push({
     path: `/artwork/${artwork.id}`,
     query: {