增加周榜，月榜，日榜搜索和批量下载
This commit is contained in:
BIN
Binary file not shown.
@@ -30,6 +30,7 @@ onMounted(async () => {
|
||||
<div class="nav-menu">
|
||||
<RouterLink to="/" class="nav-link">首页</RouterLink>
|
||||
<RouterLink to="/search" class="nav-link" v-if="isLoggedIn">搜索</RouterLink>
|
||||
<RouterLink to="/ranking" class="nav-link" v-if="isLoggedIn">排行榜</RouterLink>
|
||||
<RouterLink to="/downloads" class="nav-link" v-if="isLoggedIn">下载管理</RouterLink>
|
||||
<RouterLink to="/artists" class="nav-link" v-if="isLoggedIn">作者管理</RouterLink>
|
||||
<RouterLink to="/repository" class="nav-link" v-if="isLoggedIn">仓库管理</RouterLink>
|
||||
|
||||
@@ -0,0 +1,337 @@
|
||||
<template>
|
||||
<div class="ranking-header">
|
||||
<div class="ranking-info">
|
||||
<div class="ranking-title">
|
||||
<h1 class="title">排行榜</h1>
|
||||
<p class="subtitle">发现最受欢迎的作品</p>
|
||||
</div>
|
||||
|
||||
<div class="ranking-controls">
|
||||
<!-- 时间模式切换 -->
|
||||
<div class="mode-selector">
|
||||
<label class="control-label">时间范围:</label>
|
||||
<div class="mode-buttons">
|
||||
<button
|
||||
@click="$emit('mode-change', 'day')"
|
||||
class="mode-btn"
|
||||
:class="{ active: currentMode === 'day' }"
|
||||
>
|
||||
日榜
|
||||
</button>
|
||||
<button
|
||||
@click="$emit('mode-change', 'week')"
|
||||
class="mode-btn"
|
||||
:class="{ active: currentMode === 'week' }"
|
||||
>
|
||||
周榜
|
||||
</button>
|
||||
<button
|
||||
@click="$emit('mode-change', 'month')"
|
||||
class="mode-btn"
|
||||
:class="{ active: currentMode === 'month' }"
|
||||
>
|
||||
月榜
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 作品类型筛选 -->
|
||||
<div class="type-selector">
|
||||
<label class="control-label">作品类型:</label>
|
||||
<select
|
||||
:value="currentType"
|
||||
@change="(e) => $emit('type-change', (e.target as HTMLSelectElement).value as 'art' | 'manga' | 'novel')"
|
||||
class="type-select"
|
||||
>
|
||||
<option value="art">插画</option>
|
||||
<option value="manga">漫画</option>
|
||||
<option value="novel">小说</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ranking-actions">
|
||||
<div class="download-section">
|
||||
<div class="download-input-group">
|
||||
<label for="downloadLimit">下载数量:</label>
|
||||
<input
|
||||
v-model="downloadLimit"
|
||||
type="number"
|
||||
id="downloadLimit"
|
||||
class="download-input"
|
||||
min="1"
|
||||
max="9999"
|
||||
placeholder="输入数量"
|
||||
/>
|
||||
</div>
|
||||
<button @click="handleDownloadAll" class="btn btn-secondary" :disabled="downloading">
|
||||
{{ downloading ? '下载中...' : '下载作品' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import downloadService from '@/services/download';
|
||||
|
||||
interface Props {
|
||||
currentMode: 'day' | 'week' | 'month';
|
||||
currentType: 'art' | 'manga' | 'novel';
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'mode-change', mode: 'day' | 'week' | 'month'): void;
|
||||
(e: 'type-change', type: 'art' | 'manga' | 'novel'): void;
|
||||
(e: 'download-success', message: string): void;
|
||||
(e: 'download-error', error: string): void;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
// 下载相关状态
|
||||
const downloadLimit = ref('50');
|
||||
const downloading = ref(false);
|
||||
|
||||
// 下载作品
|
||||
const handleDownloadAll = async () => {
|
||||
const limit = parseInt(downloadLimit.value);
|
||||
if (isNaN(limit) || limit < 1) {
|
||||
emit('download-error', '请输入有效的下载数量');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
downloading.value = true;
|
||||
const response = await downloadService.downloadRankingArtworks({
|
||||
mode: props.currentMode,
|
||||
type: props.currentType,
|
||||
limit: limit
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
console.log('下载任务已创建:', response.data);
|
||||
const limitText = limit >= 9999 ? '全部' : limit.toString();
|
||||
emit('download-success', `下载任务已创建，将下载 ${limitText} 个作品`);
|
||||
} else {
|
||||
throw new Error(response.error || '下载失败');
|
||||
}
|
||||
} catch (err) {
|
||||
emit('download-error', err instanceof Error ? err.message : '下载失败');
|
||||
console.error('下载失败:', err);
|
||||
} finally {
|
||||
downloading.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ranking-header {
|
||||
background: white;
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.ranking-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ranking-title {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #6b7280;
|
||||
font-size: 1.125rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ranking-controls {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mode-selector,
|
||||
.type-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.control-label {
|
||||
font-size: 0.875rem;
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mode-buttons {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.mode-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid #d1d5db;
|
||||
background: white;
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.mode-btn:first-child {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.mode-btn:last-child {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.mode-btn:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.mode-btn:hover {
|
||||
background: #f3f4f6;
|
||||
border-color: #9ca3af;
|
||||
}
|
||||
|
||||
.mode-btn.active {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.type-select {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
background: white;
|
||||
font-size: 0.875rem;
|
||||
color: #374151;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.ranking-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.download-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.download-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.download-input-group label {
|
||||
font-size: 0.875rem;
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.download-input {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
background: white;
|
||||
font-size: 0.875rem;
|
||||
color: #374151;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.download-input:focus {
|
||||
outline: none;
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
border: 1px solid #d1d5db;
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: #e5e7eb;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.ranking-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.ranking-controls {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.mode-selector,
|
||||
.type-selector {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.download-section {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.download-input-group {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div class="pagination">
|
||||
<button
|
||||
@click="$emit('page-change', currentPage - 1)"
|
||||
class="page-btn"
|
||||
:disabled="currentPage <= 1"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" class="page-icon">
|
||||
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
|
||||
</svg>
|
||||
上一页
|
||||
</button>
|
||||
|
||||
<div class="page-numbers">
|
||||
<button
|
||||
v-for="page in visiblePages"
|
||||
:key="page"
|
||||
@click="$emit('page-change', page)"
|
||||
class="page-number"
|
||||
:class="{ active: page === currentPage }"
|
||||
>
|
||||
{{ page }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click="$emit('page-change', currentPage + 1)"
|
||||
class="page-btn"
|
||||
:disabled="currentPage >= totalPages"
|
||||
>
|
||||
下一页
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" class="page-icon">
|
||||
<path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
visiblePages: number[];
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'page-change', page: number): void;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
defineEmits<Emits>();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.5rem;
|
||||
background: white;
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.page-btn:hover:not(:disabled) {
|
||||
background: #f3f4f6;
|
||||
border-color: #9ca3af;
|
||||
}
|
||||
|
||||
.page-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.page-icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.page-numbers {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.page-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.5rem;
|
||||
background: white;
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.page-number:hover {
|
||||
background: #f3f4f6;
|
||||
border-color: #9ca3af;
|
||||
}
|
||||
|
||||
.page-number.active {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.pagination {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.page-numbers {
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="ranking-stats">
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">{{ totalCount }}</div>
|
||||
<div class="stat-label">作品总数</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">{{ currentPage }}</div>
|
||||
<div class="stat-label">当前页面</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">{{ totalPages }}</div>
|
||||
<div class="stat-label">总页数</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
totalCount: number;
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ranking-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #3b82f6;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
@@ -21,6 +21,12 @@ const router = createRouter({
|
||||
component: () => import('@/views/SearchView.vue'),
|
||||
meta: { requiresAuth: true }
|
||||
},
|
||||
{
|
||||
path: '/ranking',
|
||||
name: 'ranking',
|
||||
component: () => import('@/views/RankingView.vue'),
|
||||
meta: { requiresAuth: true }
|
||||
},
|
||||
{
|
||||
path: '/artwork/:id',
|
||||
name: 'artwork',
|
||||
|
||||
@@ -91,6 +91,20 @@ class DownloadService {
|
||||
return apiService.post(`/api/download/artist/${artistId}`, options);
|
||||
}
|
||||
|
||||
/**
|
||||
* 下载排行榜作品
|
||||
*/
|
||||
async downloadRankingArtworks(options: {
|
||||
mode: 'day' | 'week' | 'month';
|
||||
type: 'art' | 'manga' | 'novel';
|
||||
limit?: number;
|
||||
size?: string;
|
||||
quality?: string;
|
||||
format?: string;
|
||||
}) {
|
||||
return apiService.post('/api/download/ranking', options);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取已下载的文件列表
|
||||
*/
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
import api from './api';
|
||||
|
||||
export interface RankingParams {
|
||||
mode: 'day' | 'week' | 'month';
|
||||
type: 'art' | 'manga' | 'novel';
|
||||
offset?: number;
|
||||
limit?: number;
|
||||
}
|
||||
|
||||
export interface RankingResponse {
|
||||
artworks: any[];
|
||||
next_url?: string;
|
||||
}
|
||||
|
||||
class RankingService {
|
||||
/**
|
||||
* 获取排行榜数据
|
||||
*/
|
||||
async getRanking(params: RankingParams) {
|
||||
try {
|
||||
const response = await api.get('/api/ranking', { params });
|
||||
return {
|
||||
success: true,
|
||||
data: response.data
|
||||
};
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: error.response?.data?.error || error.message || '获取排行榜失败'
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default new RankingService();
|
||||
@@ -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>
|
||||
+391
-420
@@ -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>
|
||||
Reference in New Issue
Block a user