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-08-23 15:04:24 +08:00
parent 46e46e6410
commit 20b336cf31
18 changed files with 1743 additions and 427 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/views/RankingView.vue
+424
View File
@@ -0,0 +1,424 @@
<template>
<div class="ranking-page">
<div class="container">
<div v-if="loading" class="loading-section">
<LoadingSpinner text="加载中..." />
</div>
<div v-else-if="error" class="error-section">
<ErrorMessage :error="error" @dismiss="clearError" />
</div>
<!-- 下载成功提示 -->
<div v-if="downloadSuccess" class="success-message">
<div class="success-content">
<svg viewBox="0 0 24 24" fill="currentColor" class="success-icon">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
</svg>
<span>{{ downloadSuccess }}</span>
</div>
</div>
<div v-else class="ranking-content">
<!-- 排行榜头部信息 -->
<RankingHeader
:currentMode="currentMode"
:currentType="currentType"
@mode-change="handleModeChange"
@type-change="handleTypeChange"
@download-success="handleDownloadSuccess"
@download-error="handleDownloadError"
/>
<!-- 排行榜统计信息 -->
<RankingStats
:totalCount="totalCount"
:currentPage="currentPage"
:totalPages="totalPages"
/>
<!-- 作品列表 -->
<div class="artworks-section">
<div v-if="artworksLoading" class="loading-section">
<LoadingSpinner text="加载作品中..." />
</div>
<div v-else-if="artworks && artworks.length > 0" class="artworks-grid">
<ArtworkCard
v-for="artwork in artworks"
:key="artwork.id"
:artwork="artwork"
@click="handleArtworkClick"
/>
</div>
<div v-else class="empty-section">
<p>暂无作品</p>
</div>
<!-- 分页导航 -->
<RankingPagination
v-if="totalPages > 1 && artworks && artworks.length > 0"
:currentPage="currentPage"
:totalPages="totalPages"
:visiblePages="visiblePages"
@page-change="goToPage"
/>
<!-- 页面信息 -->
<div v-if="totalPages > 1 && artworks && artworks.length > 0" class="page-info">
<span>第 {{ currentPage }} 页，共 {{ totalPages }} 页</span>
<span>共 {{ totalCount }} 个作品</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
import rankingService from '@/services/ranking';
import downloadService from '@/services/download';
import type { Artwork } from '@/types';
import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
import ErrorMessage from '@/components/common/ErrorMessage.vue';
import ArtworkCard from '@/components/artwork/ArtworkCard.vue';
import RankingHeader from '@/components/ranking/RankingHeader.vue';
import RankingStats from '@/components/ranking/RankingStats.vue';
import RankingPagination from '@/components/ranking/RankingPagination.vue';
const route = useRoute();
const router = useRouter();
const authStore = useAuthStore();
// 状态
const artworks = ref<Artwork[]>([]);
const loading = ref(false);
const artworksLoading = ref(false);
const error = ref<string | null>(null);
const downloadSuccess = ref<string | null>(null);
// 筛选和分页状态
const currentMode = ref<'day' | 'week' | 'month'>('day');
const currentType = ref<'art' | 'manga' | 'novel'>('art');
const currentPage = ref(1);
const pageSize = ref(30);
const totalCount = ref(0);
const totalPages = 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 visiblePages = computed(() => {
const pages = [];
const maxVisible = 5;
let start = Math.max(1, currentPage.value - Math.floor(maxVisible / 2));
let end = Math.min(totalPages.value, start + maxVisible - 1);
if (end - start + 1 < maxVisible) {
start = Math.max(1, end - maxVisible + 1);
}
for (let i = start; i <= end; i++) {
pages.push(i);
}
return pages;
});
// 缓存键生成
const getCacheKey = (mode: string, type: string, page: number) => {
return `${mode}_${type}_${page}`;
};
// 获取缓存
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 fetchRankingData = async (page = 1) => {
const cacheKey = getCacheKey(currentMode.value, currentType.value, page);
const cached = getCache(cacheKey);
if (cached) {
artworks.value = cached.artworks;
totalCount.value = cached.totalCount;
totalPages.value = cached.totalPages;
currentPage.value = page;
return;
}
try {
artworksLoading.value = true;
error.value = null;
const offset = (page - 1) * pageSize.value;
const response = await rankingService.getRanking({
mode: currentMode.value,
type: currentType.value,
offset: offset,
limit: pageSize.value
});
if (response.success && response.data) {
// 根据后端返回的数据结构，artworks在 response.data.data.artworks
const rankingData = response.data.data || response.data;
artworks.value = rankingData.artworks || [];
// 基于 next_url 来判断是否还有更多页面
const hasMore = !!rankingData.next_url;
if (page === 1) {
// 第一页，基于是否有下一页来判断总数
if (hasMore) {
// 如果有下一页，至少说明有2页
totalCount.value = pageSize.value * 2;
totalPages.value = 2;
} else {
// 没有下一页，说明只有1页
totalCount.value = rankingData.artworks?.length || 0;
totalPages.value = 1;
}
} else {
// 非第一页，基于当前页面位置和是否有下一页来判断
if (hasMore) {
// 如果有下一页，说明至少还有1页
totalCount.value = Math.max(totalCount.value, (page + 1) * pageSize.value);
totalPages.value = Math.max(totalPages.value, page + 1);
} else {
// 没有下一页，说明这是最后一页
totalCount.value = Math.max(totalCount.value, page * pageSize.value);
totalPages.value = Math.max(totalPages.value, page);
}
}
currentPage.value = page;
// 缓存结果
setCache(cacheKey, {
artworks: rankingData.artworks || [],
totalCount: totalCount.value,
totalPages: totalPages.value
});
} else {
throw new Error(response.error || '获取排行榜失败');
}
} catch (err) {
error.value = err instanceof Error ? err.message : '获取排行榜失败';
console.error('获取排行榜失败:', err);
} finally {
artworksLoading.value = false;
}
};
// 处理模式切换
const handleModeChange = (mode: 'day' | 'week' | 'month') => {
currentMode.value = mode;
currentPage.value = 1;
fetchRankingData(1);
};
// 处理类型切换
const handleTypeChange = (type: 'art' | 'manga' | 'novel') => {
currentType.value = type;
currentPage.value = 1;
fetchRankingData(1);
};
// 跳转到指定页面
const goToPage = (page: number) => {
if (page < 1 || page > totalPages.value || page === currentPage.value) return;
fetchRankingData(page);
};
// 点击作品
const handleArtworkClick = (artwork: Artwork) => {
router.push({
path: `/artwork/${artwork.id}`,
query: {
rankingMode: currentMode.value,
rankingType: currentType.value,
page: currentPage.value.toString(),
returnUrl: route.fullPath
}
});
};
// 清除错误
const clearError = () => {
error.value = null;
};
// 处理下载成功
const handleDownloadSuccess = (message: string) => {
downloadSuccess.value = message;
// 3秒后清除成功提示
setTimeout(() => {
downloadSuccess.value = null;
}, 3000);
};
// 处理下载错误
const handleDownloadError = (errorMessage: string) => {
error.value = errorMessage;
};
// 监听路由变化
watch(() => route.query, () => {
// 检查是否有返回的页面信息
const returnPage = parseInt(route.query.page as string);
if (returnPage && returnPage > 0) {
currentPage.value = returnPage;
fetchRankingData(returnPage);
}
});
// 组件卸载时清理缓存
onUnmounted(() => {
clearCache();
});
onMounted(async () => {
await fetchRankingData(1);
});
</script>
<style scoped>
.ranking-page {
min-height: 100vh;
background: #f8fafc;
padding: 2rem 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.loading-section,
.error-section {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
}
.success-message {
position: fixed;
top: 2rem;
right: 2rem;
background: #10b981;
color: white;
padding: 1rem 1.5rem;
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
z-index: 1000;
animation: slideIn 0.3s ease-out;
}
.success-content {
display: flex;
align-items: center;
gap: 0.5rem;
}
.success-icon {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.ranking-content {
display: flex;
flex-direction: column;
gap: 2rem;
}
.artworks-section {
background: white;
border-radius: 1rem;
padding: 2rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.artworks-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.empty-section {
text-align: center;
padding: 4rem 0;
color: #6b7280;
}
.page-info {
display: flex;
justify-content: center;
gap: 2rem;
color: #6b7280;
font-size: 0.875rem;
}
@media (max-width: 768px) {
.container {
padding: 0 1rem;
}
.artworks-grid {
grid-template-columns: 1fr;
}
.page-info {
flex-direction: column;
gap: 0.5rem;
text-align: center;
}
}
</style>
ui/src/views/SearchView.vue
+391 -420
View File
@@ -1,60 +1,39 @@
<template>
<div class="search-page">
<div class="search-header">
<div class="container">
<h1 class="page-title">搜索作品</h1>
<div class="search-form">
<div class="search-page">
<div class="search-header">
<div class="container">
<h1 class="page-title">搜索作品</h1>
<div class="search-form">
<!-- 搜索类型选择 -->
<div class="search-type-tabs">
<button
@click="searchMode = 'keyword'"
class="tab-btn"
:class="{ active: searchMode === 'keyword' }"
>
<button @click="searchMode = 'keyword'" class="tab-btn" :class="{ active: searchMode === 'keyword' }">
关键词搜索
</button>
<button
@click="searchMode = 'artwork'"
class="tab-btn"
:class="{ active: searchMode === 'artwork' }"
>
<button @click="searchMode = 'artwork'" class="tab-btn" :class="{ active: searchMode === 'artwork' }">
作品ID
</button>
<button
@click="searchMode = 'artist'"
class="tab-btn"
:class="{ active: searchMode === 'artist' }"
>
<button @click="searchMode = 'artist'" class="tab-btn" :class="{ active: searchMode === 'artist' }">
作者ID
</button>
</div>
<!-- 关键词搜索 -->
<div v-if="searchMode === 'keyword'" class="search-input-group">
<input
v-model="searchKeyword"
type="text"
placeholder="输入关键词搜索作品..."
class="search-input"
@keyup.enter="handleSearch"
/>
<input v-model="searchKeyword" type="text" placeholder="输入关键词搜索作品..." class="search-input"
@keyup.enter="handleSearch" />
<button @click="handleSearch" class="search-btn" :disabled="loading">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
<path
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
</svg>
</button>
</div>
<!-- 作品ID搜索 -->
<div v-if="searchMode === 'artwork'" class="search-input-group">
<input
v-model="artworkId"
type="text"
placeholder="输入作品ID..."
class="search-input"
@keyup.enter="handleArtworkSearch"
/>
<input v-model="artworkId" type="text" placeholder="输入作品ID..." class="search-input"
@keyup.enter="handleArtworkSearch" />
<button @click="handleArtworkSearch" class="search-btn" :disabled="loading">
查看作品
</button>
@@ -62,214 +41,206 @@
<!-- 作者ID搜索 -->
<div v-if="searchMode === 'artist'" class="search-input-group">
<input
v-model="artistId"
type="text"
placeholder="输入作者ID..."
class="search-input"
@keyup.enter="handleArtistSearch"
/>
<input v-model="artistId" type="text" placeholder="输入作者ID..." class="search-input"
@keyup.enter="handleArtistSearch" />
<button @click="handleArtistSearch" class="search-btn" :disabled="loading">
查看作者
</button>
</div>
<div class="search-filters">
<select v-model="searchType" class="filter-select">
<option value="all">全部类型</option>
<option value="art">插画</option>
<option value="manga">漫画</option>
<option value="novel">小说</option>
</select>
<select v-model="searchSort" class="filter-select">
<option value="date_desc">最新</option>
<option value="date_asc">最旧</option>
<option value="popular_desc">最受欢迎</option>
</select>
<select v-model="searchDuration" class="filter-select">
<option value="all">全部时间</option>
<option value="within_last_day">最近一天</option>
<option value="within_last_week">最近一周</option>
<option value="within_last_month">最近一月</option>
</select>
</div>
</div>
</div>
</div>
<div class="search-content">
<div class="container">
<div v-if="error" class="error-section">
<ErrorMessage :error="error" @dismiss="clearError" />
</div>
<div v-if="loading" class="loading-section">
<LoadingSpinner text="搜索中..." />
</div>
<div v-else-if="searchResults.length > 0" class="results-section">
<div class="results-header">
<h2>搜索结果 ({{ totalResults }})</h2>
<div class="results-actions">
<button @click="loadMore" class="btn btn-secondary" :disabled="loadingMore">
{{ loadingMore ? '加载中...' : '加载更多' }}
</button>
</div>
</div>
<div class="artworks-grid">
<ArtworkCard
v-for="artwork in searchResults"
:key="artwork.id"
:artwork="artwork"
@click="handleArtworkClick"
/>
</div>
</div>
<div v-else-if="hasSearched" class="empty-section">
<div class="empty-content">
<svg viewBox="0 0 24 24" fill="currentColor" class="empty-icon">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</svg>
<h3>未找到相关作品</h3>
<p>尝试使用不同的关键词或调整搜索条件</p>
</div>
</div>
<div v-else class="welcome-section">
<div class="welcome-content">
<h2>开始搜索</h2>
<p>输入关键词来搜索你喜欢的作品</p>
</div>
<div class="search-filters">
<select v-model="searchType" class="filter-select">
<option value="all">全部类型</option>
<option value="art">插画</option>
<option value="manga">漫画</option>
<option value="novel">小说</option>
</select>
<select v-model="searchSort" class="filter-select">
<option value="date_desc">最新</option>
<option value="date_asc">最旧</option>
<option value="popular_desc">最受欢迎</option>
</select>
<select v-model="searchDuration" class="filter-select">
<option value="all">全部时间</option>
<option value="within_last_day">最近一天</option>
<option value="within_last_week">最近一周</option>
<option value="within_last_month">最近一月</option>
</select>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
import artworkService from '@/services/artwork';
import type { Artwork, SearchParams } from '@/types';
import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
import ErrorMessage from '@/components/common/ErrorMessage.vue';
import ArtworkCard from '@/components/artwork/ArtworkCard.vue';
const router = useRouter();
const authStore = useAuthStore();
// 搜索状态
const searchKeyword = ref('');
const searchMode = ref<'keyword' | 'artwork' | 'artist'>('keyword');
const artworkId = ref('');
const artistId = ref('');
// 关键词搜索参数
const searchType = ref<'all' | 'art' | 'manga' | 'novel'>('all');
const searchSort = ref<'date_desc' | 'date_asc' | 'popular_desc'>('date_desc');
const searchDuration = ref<'all' | 'within_last_day' | 'within_last_week' | 'within_last_month'>('all');
// 结果状态
const searchResults = ref<Artwork[]>([]);
const totalResults = ref(0);
const loading = ref(false);
const loadingMore = ref(false);
const error = ref<string | null>(null);
const hasSearched = ref(false);
const offset = ref(0);
const handleSearch = async () => {
if (!searchKeyword.value.trim()) {
return;
<div class="search-content">
<div class="container">
<div v-if="error" class="error-section">
<ErrorMessage :error="error" @dismiss="clearError" />
</div>
<div v-if="loading" class="loading-section">
<LoadingSpinner text="搜索中..." />
</div>
<div v-else-if="searchResults.length > 0" class="results-section">
<div class="results-header">
<h2>搜索结果 ({{ totalResults }})</h2>
<div class="results-actions">
<button @click="loadMore" class="btn btn-secondary" :disabled="loadingMore">
{{ loadingMore ? '加载中...' : '加载更多' }}
</button>
</div>
</div>
<div class="artworks-grid">
<ArtworkCard v-for="artwork in searchResults" :key="artwork.id" :artwork="artwork"
@click="handleArtworkClick" />
</div>
</div>
<div v-else-if="hasSearched" class="empty-section">
<div class="empty-content">
<svg viewBox="0 0 24 24" fill="currentColor" class="empty-icon">
<path
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
</svg>
<h3>未找到相关作品</h3>
<p>尝试使用不同的关键词或调整搜索条件</p>
</div>
</div>
<div v-else class="welcome-section">
<div class="welcome-content">
<h2>开始搜索</h2>
<p>输入关键词来搜索你喜欢的作品</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
import artworkService from '@/services/artwork';
import type { Artwork, SearchParams } from '@/types';
import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
import ErrorMessage from '@/components/common/ErrorMessage.vue';
import ArtworkCard from '@/components/artwork/ArtworkCard.vue';
const router = useRouter();
const authStore = useAuthStore();
// 搜索状态
const searchKeyword = ref('');
const searchMode = ref<'keyword' | 'artwork' | 'artist'>('keyword');
const artworkId = ref('');
const artistId = ref('');
// 关键词搜索参数
const searchType = ref<'all' | 'art' | 'manga' | 'novel'>('all');
const searchSort = ref<'date_desc' | 'date_asc' | 'popular_desc'>('date_desc');
const searchDuration = ref<'all' | 'within_last_day' | 'within_last_week' | 'within_last_month'>('all');
// 结果状态
const searchResults = ref<Artwork[]>([]);
const totalResults = ref(0);
const loading = ref(false);
const loadingMore = ref(false);
const error = ref<string | null>(null);
const hasSearched = ref(false);
const offset = ref(0);
const handleSearch = async () => {
if (!searchKeyword.value.trim()) {
return;
}
try {
loading.value = true;
error.value = null;
offset.value = 0;
hasSearched.value = true;
const params: SearchParams = {
keyword: searchKeyword.value.trim(),
type: searchType.value,
sort: searchSort.value,
duration: searchDuration.value,
offset: 0,
limit: 30
};
const response = await artworkService.searchArtworks(params);
if (response.success && response.data) {
searchResults.value = response.data.artworks;
totalResults.value = response.data.total;
} else {
throw new Error(response.error || '搜索失败');
}
try {
loading.value = true;
error.value = null;
offset.value = 0;
hasSearched.value = true;
const params: SearchParams = {
keyword: searchKeyword.value.trim(),
type: searchType.value,
sort: searchSort.value,
duration: searchDuration.value,
offset: 0,
limit: 30
};
const response = await artworkService.searchArtworks(params);
if (response.success && response.data) {
searchResults.value = response.data.artworks;
totalResults.value = response.data.total;
} else {
throw new Error(response.error || '搜索失败');
}
} catch (err) {
error.value = err instanceof Error ? err.message : '搜索失败';
console.error('搜索失败:', err);
} finally {
loading.value = false;
} catch (err) {
error.value = err instanceof Error ? err.message : '搜索失败';
console.error('搜索失败:', err);
} finally {
loading.value = false;
}
};
const loadMore = async () => {
if (!searchKeyword.value.trim() || loadingMore.value) {
return;
}
try {
loadingMore.value = true;
offset.value += 30;
const params: SearchParams = {
keyword: searchKeyword.value.trim(),
type: searchType.value,
sort: searchSort.value,
duration: searchDuration.value,
offset: offset.value,
limit: 30
};
const response = await artworkService.searchArtworks(params);
if (response.success && response.data) {
searchResults.value.push(...response.data.artworks);
} else {
throw new Error(response.error || '加载更多失败');
}
};
const loadMore = async () => {
if (!searchKeyword.value.trim() || loadingMore.value) {
return;
}
try {
loadingMore.value = true;
offset.value += 30;
const params: SearchParams = {
keyword: searchKeyword.value.trim(),
type: searchType.value,
sort: searchSort.value,
duration: searchDuration.value,
offset: offset.value,
limit: 30
};
const response = await artworkService.searchArtworks(params);
if (response.success && response.data) {
searchResults.value.push(...response.data.artworks);
} else {
throw new Error(response.error || '加载更多失败');
}
} catch (err) {
error.value = err instanceof Error ? err.message : '加载更多失败';
console.error('加载更多失败:', err);
} finally {
loadingMore.value = false;
}
};
const handleArtworkClick = (artwork: Artwork) => {
router.push(`/artwork/${artwork.id}`);
};
// 作品ID搜索
} catch (err) {
error.value = err instanceof Error ? err.message : '加载更多失败';
console.error('加载更多失败:', err);
} finally {
loadingMore.value = false;
}
};
const handleArtworkClick = (artwork: Artwork) => {
router.push(`/artwork/${artwork.id}`);
};
// 作品ID搜索
const handleArtworkSearch = () => {
const idStr = artworkId.value?.toString().trim();
if (!idStr) {
error.value = '请输入作品ID';
return;
}
const id = parseInt(idStr);
if (isNaN(id)) {
error.value = '请输入有效的作品ID';
return;
}
router.push(`/artwork/${id}`);
};
@@ -280,53 +251,53 @@ const handleArtistSearch = () => {
error.value = '请输入作者ID';
return;
}
const id = parseInt(idStr);
if (isNaN(id)) {
error.value = '请输入有效的作者ID';
return;
}
router.push(`/artist/${id}`);
};
const clearError = () => {
error.value = null;
};
</script>
<style scoped>
.search-page {
min-height: 100vh;
background: #f8fafc;
}
.search-header {
background: white;
border-bottom: 1px solid #e5e7eb;
padding: 2rem 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.page-title {
font-size: 2rem;
font-weight: 700;
color: #1f2937;
margin-bottom: 2rem;
}
.search-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.search-type-tabs {
</script>
<style scoped>
.search-page {
min-height: 100vh;
background: #f8fafc;
}
.search-header {
background: white;
border-bottom: 1px solid #e5e7eb;
padding: 2rem 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.page-title {
font-size: 2rem;
font-weight: 700;
color: #1f2937;
margin-bottom: 2rem;
}
.search-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.search-type-tabs {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
@@ -358,172 +329,172 @@ const clearError = () => {
display: flex;
gap: 0.5rem;
}
.search-input {
flex: 1;
padding: 0.75rem 1rem;
border: 2px solid #e5e7eb;
border-radius: 0.5rem;
font-size: 1rem;
transition: border-color 0.2s;
}
.search-input:focus {
outline: none;
border-color: #3b82f6;
}
.search-btn {
padding: 0.75rem 1rem;
background: #3b82f6;
color: white;
border: none;
border-radius: 0.5rem;
cursor: pointer;
transition: background-color 0.2s;
}
.search-btn:hover:not(:disabled) {
background: #2563eb;
}
.search-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.search-btn svg {
width: 1.25rem;
height: 1.25rem;
}
.search-input {
flex: 1;
padding: 0.75rem 1rem;
border: 2px solid #e5e7eb;
border-radius: 0.5rem;
font-size: 1rem;
transition: border-color 0.2s;
}
.search-input:focus {
outline: none;
border-color: #3b82f6;
}
.search-btn {
padding: 0.75rem 1rem;
background: #3b82f6;
color: white;
border: none;
border-radius: 0.5rem;
cursor: pointer;
transition: background-color 0.2s;
}
.search-btn:hover:not(:disabled) {
background: #2563eb;
}
.search-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.search-btn svg {
width: 1.25rem;
height: 1.25rem;
}
.search-filters {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.filter-select {
padding: 0.5rem 0.75rem;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
background: white;
font-size: 0.875rem;
color: #374151;
}
.search-content {
padding: 2rem 0;
}
.error-section,
.loading-section {
margin-bottom: 2rem;
}
.results-section {
margin-bottom: 2rem;
}
.results-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.results-header h2 {
font-size: 1.5rem;
font-weight: 600;
color: #1f2937;
margin: 0;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem;
border-radius: 0.375rem;
font-weight: 500;
text-decoration: none;
transition: all 0.2s;
border: none;
cursor: pointer;
font-size: 0.875rem;
}
.btn-secondary {
background: #f3f4f6;
color: #374151;
border: 1px solid #d1d5db;
}
.btn-secondary:hover:not(:disabled) {
background: #e5e7eb;
}
.btn-secondary:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.artworks-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem;
}
.empty-section,
.welcome-section {
text-align: center;
padding: 4rem 0;
}
.empty-content,
.welcome-content {
max-width: 400px;
margin: 0 auto;
}
.empty-icon {
width: 4rem;
height: 4rem;
color: #9ca3af;
margin-bottom: 1rem;
}
.empty-content h3,
.welcome-content h2 {
font-size: 1.5rem;
font-weight: 600;
color: #374151;
margin-bottom: 0.5rem;
}
.empty-content p,
.welcome-content p {
color: #6b7280;
line-height: 1.6;
}
@media (max-width: 768px) {
.search-filters {
display: flex;
gap: 1rem;
flex-wrap: wrap;
flex-direction: column;
}
.filter-select {
padding: 0.5rem 0.75rem;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
background: white;
font-size: 0.875rem;
color: #374151;
width: 100%;
}
.search-content {
padding: 2rem 0;
}
.error-section,
.loading-section {
margin-bottom: 2rem;
}
.results-section {
margin-bottom: 2rem;
}
.results-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}
.results-header h2 {
font-size: 1.5rem;
font-weight: 600;
color: #1f2937;
margin: 0;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem;
border-radius: 0.375rem;
font-weight: 500;
text-decoration: none;
transition: all 0.2s;
border: none;
cursor: pointer;
font-size: 0.875rem;
}
.btn-secondary {
background: #f3f4f6;
color: #374151;
border: 1px solid #d1d5db;
}
.btn-secondary:hover:not(:disabled) {
background: #e5e7eb;
}
.btn-secondary:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.artworks-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem;
grid-template-columns: 1fr;
}
.empty-section,
.welcome-section {
text-align: center;
padding: 4rem 0;
}
.empty-content,
.welcome-content {
max-width: 400px;
margin: 0 auto;
}
.empty-icon {
width: 4rem;
height: 4rem;
color: #9ca3af;
margin-bottom: 1rem;
}
.empty-content h3,
.welcome-content h2 {
font-size: 1.5rem;
font-weight: 600;
color: #374151;
margin-bottom: 0.5rem;
}
.empty-content p,
.welcome-content p {
color: #6b7280;
line-height: 1.6;
}
@media (max-width: 768px) {
.search-filters {
flex-direction: column;
}
.filter-select {
width: 100%;
}
.results-header {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}
.artworks-grid {
grid-template-columns: 1fr;
}
}
</style>
}
</style>