kjqwdw/pixiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加搜索推荐

Browse Source
This commit is contained in:
kjqwer
2025-09-04 12:55:17 +08:00
parent 2cc36fa8b9
commit 66e274e234
8 changed files with 532 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/README.md
+2
View File
@@ -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
+41
View File
@@ -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
+42
View File
@@ -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
+2 -2
View File
@@ -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
+317
View File
@@ -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
+12
View File
@@ -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
+102 -4
View File
@@ -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);
@@ -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
+1 -1
View File
@@ -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">