初始化
This commit is contained in:
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@media (min-width: 1024px) {
|
||||
.about {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,490 @@
|
||||
<template>
|
||||
<div class="artist-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-else-if="artist" class="artist-content">
|
||||
<!-- 作者信息卡片 -->
|
||||
<div class="artist-header">
|
||||
<div class="artist-profile">
|
||||
<img
|
||||
:src="artist.profile_image_urls.medium"
|
||||
:alt="artist.name"
|
||||
class="artist-avatar"
|
||||
/>
|
||||
<div class="artist-info">
|
||||
<h1 class="artist-name">{{ artist.name }}</h1>
|
||||
<p class="artist-account">@{{ artist.account }}</p>
|
||||
<p v-if="artist.comment" class="artist-comment">{{ artist.comment }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="artist-actions">
|
||||
<button @click="handleFollow" class="btn btn-primary">
|
||||
{{ artist.is_followed ? '取消关注' : '关注' }}
|
||||
</button>
|
||||
<button @click="handleDownloadAll" class="btn btn-secondary" :disabled="downloading">
|
||||
{{ downloading ? '下载中...' : '下载所有作品' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 作者统计 -->
|
||||
<div class="artist-stats">
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">{{ artist.total_illusts }}</div>
|
||||
<div class="stat-label">插画</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">{{ artist.total_manga }}</div>
|
||||
<div class="stat-label">漫画</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">{{ artist.total_novels }}</div>
|
||||
<div class="stat-label">小说</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">{{ artist.total_followers }}</div>
|
||||
<div class="stat-label">粉丝</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">{{ artist.total_following }}</div>
|
||||
<div class="stat-label">关注</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 作品列表 -->
|
||||
<div class="artworks-section">
|
||||
<div class="section-header">
|
||||
<h2>作品列表</h2>
|
||||
<div class="artwork-filters">
|
||||
<select v-model="artworkType" @change="fetchArtworks" class="filter-select">
|
||||
<option value="art">插画</option>
|
||||
<option value="manga">漫画</option>
|
||||
<option value="novel">小说</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="artworksLoading" class="loading-section">
|
||||
<LoadingSpinner text="加载作品中..." />
|
||||
</div>
|
||||
|
||||
<div v-else-if="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>
|
||||
|
||||
<div v-if="hasMore" class="load-more">
|
||||
<button @click="loadMore" class="btn btn-secondary" :disabled="loadingMore">
|
||||
{{ loadingMore ? '加载中...' : '加载更多' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import artistService from '@/services/artist';
|
||||
import downloadService from '@/services/download';
|
||||
import type { Artist, Artwork } from '@/types';
|
||||
import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
|
||||
import ErrorMessage from '@/components/common/ErrorMessage.vue';
|
||||
import ArtworkCard from '@/components/artwork/ArtworkCard.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const authStore = useAuthStore();
|
||||
|
||||
// 状态
|
||||
const artist = ref<Artist | null>(null);
|
||||
const artworks = ref<Artwork[]>([]);
|
||||
const loading = ref(false);
|
||||
const artworksLoading = ref(false);
|
||||
const loadingMore = ref(false);
|
||||
const error = ref<string | null>(null);
|
||||
const downloading = ref(false);
|
||||
|
||||
// 筛选状态
|
||||
const artworkType = ref<'art' | 'manga' | 'novel'>('art');
|
||||
const offset = ref(0);
|
||||
const hasMore = ref(true);
|
||||
|
||||
// 获取作者信息
|
||||
const fetchArtistInfo = async () => {
|
||||
const artistId = parseInt(route.params.id as string);
|
||||
if (isNaN(artistId)) {
|
||||
error.value = '无效的作者ID';
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
|
||||
const response = await artistService.getArtistInfo(artistId);
|
||||
|
||||
if (response.success && response.data) {
|
||||
artist.value = response.data;
|
||||
} else {
|
||||
throw new Error(response.error || '获取作者信息失败');
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : '获取作者信息失败';
|
||||
console.error('获取作者信息失败:', err);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 获取作者作品
|
||||
const fetchArtworks = async (reset = true) => {
|
||||
if (!artist.value) return;
|
||||
|
||||
try {
|
||||
artworksLoading.value = true;
|
||||
if (reset) {
|
||||
offset.value = 0;
|
||||
artworks.value = [];
|
||||
}
|
||||
|
||||
const response = await artistService.getArtistArtworks(artist.value.id, {
|
||||
type: artworkType.value,
|
||||
offset: offset.value,
|
||||
limit: 30
|
||||
});
|
||||
|
||||
if (response.success && response.data) {
|
||||
if (reset) {
|
||||
artworks.value = response.data.artworks;
|
||||
} else {
|
||||
artworks.value.push(...response.data.artworks);
|
||||
}
|
||||
hasMore.value = response.data.artworks.length === 30;
|
||||
offset.value += response.data.artworks.length;
|
||||
} else {
|
||||
throw new Error(response.error || '获取作品列表失败');
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : '获取作品列表失败';
|
||||
console.error('获取作品列表失败:', err);
|
||||
} finally {
|
||||
artworksLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 加载更多
|
||||
const loadMore = async () => {
|
||||
if (loadingMore.value || !hasMore.value) return;
|
||||
|
||||
loadingMore.value = true;
|
||||
await fetchArtworks(false);
|
||||
loadingMore.value = false;
|
||||
};
|
||||
|
||||
// 关注/取消关注
|
||||
const handleFollow = async () => {
|
||||
if (!artist.value) return;
|
||||
|
||||
try {
|
||||
const action = artist.value.is_followed ? 'unfollow' : 'follow';
|
||||
const response = await artistService.followArtist(artist.value.id, action);
|
||||
|
||||
if (response.success) {
|
||||
artist.value.is_followed = !artist.value.is_followed;
|
||||
} else {
|
||||
throw new Error(response.error || '操作失败');
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : '操作失败';
|
||||
console.error('关注操作失败:', err);
|
||||
}
|
||||
};
|
||||
|
||||
// 下载所有作品
|
||||
const handleDownloadAll = async () => {
|
||||
if (!artist.value) return;
|
||||
|
||||
try {
|
||||
downloading.value = true;
|
||||
const response = await downloadService.downloadArtistArtworks(artist.value.id, {
|
||||
type: artworkType.value,
|
||||
limit: 50
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
console.log('下载任务已创建:', response.data);
|
||||
} else {
|
||||
throw new Error(response.error || '下载失败');
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : '下载失败';
|
||||
console.error('下载失败:', err);
|
||||
} finally {
|
||||
downloading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 点击作品
|
||||
const handleArtworkClick = (artwork: Artwork) => {
|
||||
router.push(`/artwork/${artwork.id}`);
|
||||
};
|
||||
|
||||
// 清除错误
|
||||
const clearError = () => {
|
||||
error.value = null;
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchArtistInfo();
|
||||
await fetchArtworks();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.artist-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;
|
||||
}
|
||||
|
||||
.artist-header {
|
||||
background: white;
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
margin-bottom: 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;
|
||||
}
|
||||
|
||||
.artist-profile {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.artist-avatar {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.artist-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.artist-name {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.artist-account {
|
||||
color: #6b7280;
|
||||
font-size: 1.125rem;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.artist-comment {
|
||||
color: #374151;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.artist-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.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-primary {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
border: 1px solid #d1d5db;
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: #e5e7eb;
|
||||
}
|
||||
|
||||
.artist-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.artworks-section {
|
||||
background: white;
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.artwork-filters {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
background: white;
|
||||
font-size: 0.875rem;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.load-more {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.artist-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.artist-profile {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.artist-actions {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.artworks-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,588 @@
|
||||
<template>
|
||||
<div class="artists-page">
|
||||
<div class="container">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">作者管理</h1>
|
||||
<div class="header-actions">
|
||||
<div class="search-box">
|
||||
<input
|
||||
v-model="searchKeyword"
|
||||
type="text"
|
||||
placeholder="搜索作者..."
|
||||
class="search-input"
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
<button @click="handleSearch" class="search-btn">
|
||||
<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"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 class="artists-content">
|
||||
<!-- 关注列表 -->
|
||||
<div class="section">
|
||||
<h2 class="section-title">关注的作者</h2>
|
||||
|
||||
<div v-if="followingArtists.length > 0" class="artists-grid">
|
||||
<div
|
||||
v-for="artist in followingArtists"
|
||||
:key="artist.id"
|
||||
class="artist-card"
|
||||
>
|
||||
<div class="artist-header">
|
||||
<img
|
||||
:src="artist.profile_image_urls.medium"
|
||||
:alt="artist.name"
|
||||
class="artist-avatar"
|
||||
/>
|
||||
<div class="artist-info">
|
||||
<h3 class="artist-name">{{ artist.name }}</h3>
|
||||
<p class="artist-account">@{{ artist.account }}</p>
|
||||
</div>
|
||||
<div class="artist-actions">
|
||||
<button @click="handleUnfollow(artist.id)" class="btn btn-danger btn-small">
|
||||
取消关注
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="artist-stats">
|
||||
<div class="stat">
|
||||
<span class="stat-number">{{ artist.total_illusts }}</span>
|
||||
<span class="stat-label">插画</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-number">{{ artist.total_manga }}</span>
|
||||
<span class="stat-label">漫画</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-number">{{ artist.total_followers }}</span>
|
||||
<span class="stat-label">粉丝</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="artist-actions-bottom">
|
||||
<router-link :to="`/artist/${artist.id}`" class="btn btn-primary btn-small">
|
||||
查看作品
|
||||
</router-link>
|
||||
<button @click="handleDownloadArtist(artist.id)" class="btn btn-secondary btn-small">
|
||||
下载作品
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="empty-section">
|
||||
<div class="empty-content">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" class="empty-icon">
|
||||
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
|
||||
</svg>
|
||||
<h3>暂无关注的作者</h3>
|
||||
<p>关注喜欢的作者，在这里管理他们</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索建议 -->
|
||||
<div v-if="searchResults.length > 0" class="section">
|
||||
<h2 class="section-title">搜索结果</h2>
|
||||
<div class="artists-grid">
|
||||
<div
|
||||
v-for="artist in searchResults"
|
||||
:key="artist.id"
|
||||
class="artist-card"
|
||||
>
|
||||
<div class="artist-header">
|
||||
<img
|
||||
:src="artist.profile_image_urls.medium"
|
||||
:alt="artist.name"
|
||||
class="artist-avatar"
|
||||
/>
|
||||
<div class="artist-info">
|
||||
<h3 class="artist-name">{{ artist.name }}</h3>
|
||||
<p class="artist-account">@{{ artist.account }}</p>
|
||||
</div>
|
||||
<div class="artist-actions">
|
||||
<button
|
||||
@click="handleFollow(artist.id)"
|
||||
class="btn btn-primary btn-small"
|
||||
:disabled="artist.is_followed"
|
||||
>
|
||||
{{ artist.is_followed ? '已关注' : '关注' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="artist-stats">
|
||||
<div class="stat">
|
||||
<span class="stat-number">{{ artist.total_illusts }}</span>
|
||||
<span class="stat-label">插画</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-number">{{ artist.total_manga }}</span>
|
||||
<span class="stat-label">漫画</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-number">{{ artist.total_followers }}</span>
|
||||
<span class="stat-label">粉丝</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="artist-actions-bottom">
|
||||
<router-link :to="`/artist/${artist.id}`" class="btn btn-primary btn-small">
|
||||
查看作品
|
||||
</router-link>
|
||||
<button @click="handleDownloadArtist(artist.id)" class="btn btn-secondary btn-small">
|
||||
下载作品
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import artistService from '@/services/artist';
|
||||
import downloadService from '@/services/download';
|
||||
import type { Artist } from '@/types';
|
||||
import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
|
||||
import ErrorMessage from '@/components/common/ErrorMessage.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const authStore = useAuthStore();
|
||||
|
||||
// 状态
|
||||
const followingArtists = ref<Artist[]>([]);
|
||||
const searchResults = ref<Artist[]>([]);
|
||||
const searchKeyword = ref('');
|
||||
const loading = ref(false);
|
||||
const error = ref<string | null>(null);
|
||||
|
||||
// 获取关注的作者
|
||||
const fetchFollowingArtists = async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
|
||||
// 这里需要根据实际API调整
|
||||
// const response = await artistService.getFollowingArtists();
|
||||
// if (response.success && response.data) {
|
||||
// followingArtists.value = response.data.artists;
|
||||
// }
|
||||
|
||||
// 暂时使用模拟数据
|
||||
followingArtists.value = [];
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : '获取关注列表失败';
|
||||
console.error('获取关注列表失败:', err);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 搜索作者
|
||||
const handleSearch = async () => {
|
||||
if (!searchKeyword.value.trim()) {
|
||||
searchResults.value = [];
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 这里需要根据实际API调整
|
||||
// const response = await artistService.searchArtists({ keyword: searchKeyword.value });
|
||||
// if (response.success && response.data) {
|
||||
// searchResults.value = response.data.artists;
|
||||
// }
|
||||
|
||||
// 暂时使用模拟数据
|
||||
searchResults.value = [];
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : '搜索失败';
|
||||
console.error('搜索失败:', err);
|
||||
}
|
||||
};
|
||||
|
||||
// 关注作者
|
||||
const handleFollow = async (artistId: number) => {
|
||||
try {
|
||||
const response = await artistService.followArtist(artistId, 'follow');
|
||||
|
||||
if (response.success) {
|
||||
// 更新搜索结果的关注状态
|
||||
const artist = searchResults.value.find(a => a.id === artistId);
|
||||
if (artist) {
|
||||
artist.is_followed = true;
|
||||
}
|
||||
|
||||
// 添加到关注列表
|
||||
const artistToAdd = searchResults.value.find(a => a.id === artistId);
|
||||
if (artistToAdd) {
|
||||
followingArtists.value.push(artistToAdd);
|
||||
}
|
||||
} else {
|
||||
throw new Error(response.error || '关注失败');
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : '关注失败';
|
||||
console.error('关注失败:', err);
|
||||
}
|
||||
};
|
||||
|
||||
// 取消关注
|
||||
const handleUnfollow = async (artistId: number) => {
|
||||
try {
|
||||
const response = await artistService.followArtist(artistId, 'unfollow');
|
||||
|
||||
if (response.success) {
|
||||
// 从关注列表中移除
|
||||
followingArtists.value = followingArtists.value.filter(a => a.id !== artistId);
|
||||
|
||||
// 更新搜索结果的关注状态
|
||||
const artist = searchResults.value.find(a => a.id === artistId);
|
||||
if (artist) {
|
||||
artist.is_followed = false;
|
||||
}
|
||||
} else {
|
||||
throw new Error(response.error || '取消关注失败');
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : '取消关注失败';
|
||||
console.error('取消关注失败:', err);
|
||||
}
|
||||
};
|
||||
|
||||
// 下载作者作品
|
||||
const handleDownloadArtist = async (artistId: number) => {
|
||||
try {
|
||||
const response = await downloadService.downloadArtistArtworks(artistId, {
|
||||
limit: 50
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
console.log('下载任务已创建:', response.data);
|
||||
router.push('/downloads');
|
||||
} else {
|
||||
throw new Error(response.error || '下载失败');
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : '下载失败';
|
||||
console.error('下载失败:', err);
|
||||
}
|
||||
};
|
||||
|
||||
// 清除错误
|
||||
const clearError = () => {
|
||||
error.value = null;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchFollowingArtists();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.artists-page {
|
||||
min-height: 100vh;
|
||||
background: #f8fafc;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: white;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
padding: 0.75rem 1rem;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 1rem;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
padding: 0.75rem;
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.search-btn:hover {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.search-btn svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.error-section,
|
||||
.loading-section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.loading-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin: 0 0 1.5rem 0;
|
||||
}
|
||||
|
||||
.artists-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.artist-card {
|
||||
background: white;
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.artist-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.artist-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.artist-avatar {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.artist-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.artist-name {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin: 0 0 0.25rem 0;
|
||||
}
|
||||
|
||||
.artist-account {
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.artist-actions {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.artist-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem 0;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.artist-actions-bottom {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
border: 1px solid #d1d5db;
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: #e5e7eb;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.empty-section {
|
||||
text-align: center;
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.empty-content {
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
color: #9ca3af;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.empty-content h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.empty-content p {
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
min-width: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.artists-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.artist-header {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.artist-actions-bottom {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,554 @@
|
||||
<template>
|
||||
<div class="artwork-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-else-if="artwork" class="artwork-content">
|
||||
<!-- 作品图片 -->
|
||||
<div class="artwork-gallery">
|
||||
<div class="main-image">
|
||||
<img
|
||||
:src="currentImageUrl"
|
||||
:alt="artwork.title"
|
||||
@load="imageLoaded = true"
|
||||
@error="imageError = true"
|
||||
:class="{ loaded: imageLoaded, error: imageError }"
|
||||
/>
|
||||
<div v-if="!imageLoaded && !imageError" class="image-placeholder">
|
||||
<LoadingSpinner text="加载中..." />
|
||||
</div>
|
||||
<div v-if="imageError" class="image-error">
|
||||
<span>图片加载失败</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 多页作品缩略图 -->
|
||||
<div v-if="artwork.page_count > 1" class="thumbnails">
|
||||
<button
|
||||
v-for="(page, index) in artwork.meta_pages"
|
||||
:key="index"
|
||||
@click="currentPage = index"
|
||||
class="thumbnail"
|
||||
:class="{ active: currentPage === index }"
|
||||
>
|
||||
<img :src="page.image_urls.square_medium" :alt="`第 ${index + 1} 页`" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 作品信息 -->
|
||||
<div class="artwork-info">
|
||||
<div class="artwork-header">
|
||||
<h1 class="artwork-title">{{ artwork.title }}</h1>
|
||||
<div class="artwork-actions">
|
||||
<button @click="handleDownload" class="btn btn-primary" :disabled="downloading">
|
||||
{{ downloading ? '下载中...' : '下载' }}
|
||||
</button>
|
||||
<button @click="handleBookmark" class="btn btn-secondary">
|
||||
{{ artwork.is_bookmarked ? '取消收藏' : '收藏' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 作者信息 -->
|
||||
<div class="artist-info">
|
||||
<img
|
||||
:src="artwork.user.profile_image_urls.medium"
|
||||
:alt="artwork.user.name"
|
||||
class="artist-avatar"
|
||||
/>
|
||||
<div class="artist-details">
|
||||
<h3 class="artist-name">{{ artwork.user.name }}</h3>
|
||||
<p class="artist-account">@{{ artwork.user.account }}</p>
|
||||
</div>
|
||||
<router-link :to="`/artist/${artwork.user.id}`" class="btn btn-text">
|
||||
查看作者
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<!-- 作品统计 -->
|
||||
<div class="artwork-stats">
|
||||
<div class="stat">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
||||
</svg>
|
||||
<span>{{ artwork.total_bookmarks }}</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
|
||||
</svg>
|
||||
<span>{{ artwork.total_view }}</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/>
|
||||
</svg>
|
||||
<span>{{ artwork.width }} × {{ artwork.height }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 标签 -->
|
||||
<div class="artwork-tags">
|
||||
<h3>标签</h3>
|
||||
<div class="tags-list">
|
||||
<span
|
||||
v-for="tag in artwork.tags"
|
||||
:key="tag.name"
|
||||
class="tag"
|
||||
>
|
||||
{{ tag.name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 描述 -->
|
||||
<div v-if="artwork.description" class="artwork-description">
|
||||
<h3>描述</h3>
|
||||
<div class="description-content" v-html="artwork.description"></div>
|
||||
</div>
|
||||
|
||||
<!-- 创建时间 -->
|
||||
<div class="artwork-meta">
|
||||
<p>创建时间: {{ formatDate(artwork.create_date) }}</p>
|
||||
<p v-if="artwork.update_date !== artwork.create_date">
|
||||
更新时间: {{ formatDate(artwork.update_date) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import artworkService from '@/services/artwork';
|
||||
import downloadService from '@/services/download';
|
||||
import type { Artwork } from '@/types';
|
||||
import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
|
||||
import ErrorMessage from '@/components/common/ErrorMessage.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const authStore = useAuthStore();
|
||||
|
||||
// 状态
|
||||
const artwork = ref<Artwork | null>(null);
|
||||
const loading = ref(false);
|
||||
const error = ref<string | null>(null);
|
||||
const currentPage = ref(0);
|
||||
const imageLoaded = ref(false);
|
||||
const imageError = ref(false);
|
||||
const downloading = ref(false);
|
||||
|
||||
// 计算属性
|
||||
const currentImageUrl = computed(() => {
|
||||
if (!artwork.value) return '';
|
||||
|
||||
if (artwork.value.page_count === 1) {
|
||||
return artwork.value.image_urls.large;
|
||||
} else if (artwork.value.meta_pages && artwork.value.meta_pages[currentPage.value]) {
|
||||
return artwork.value.meta_pages[currentPage.value].image_urls.large;
|
||||
}
|
||||
|
||||
return artwork.value.image_urls.large;
|
||||
});
|
||||
|
||||
// 获取作品详情
|
||||
const fetchArtworkDetail = async () => {
|
||||
const artworkId = parseInt(route.params.id as string);
|
||||
if (isNaN(artworkId)) {
|
||||
error.value = '无效的作品ID';
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
|
||||
const response = await artworkService.getArtworkDetail(artworkId);
|
||||
|
||||
if (response.success && response.data) {
|
||||
artwork.value = response.data;
|
||||
} else {
|
||||
throw new Error(response.error || '获取作品详情失败');
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : '获取作品详情失败';
|
||||
console.error('获取作品详情失败:', err);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 下载作品
|
||||
const handleDownload = async () => {
|
||||
if (!artwork.value) return;
|
||||
|
||||
try {
|
||||
downloading.value = true;
|
||||
const response = await downloadService.downloadArtwork(artwork.value.id);
|
||||
|
||||
if (response.success) {
|
||||
// 可以显示下载成功提示
|
||||
console.log('下载任务已创建:', response.data);
|
||||
} else {
|
||||
throw new Error(response.error || '下载失败');
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : '下载失败';
|
||||
console.error('下载失败:', err);
|
||||
} finally {
|
||||
downloading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 收藏/取消收藏
|
||||
const handleBookmark = () => {
|
||||
// 这里可以添加收藏功能
|
||||
console.log('收藏功能待实现');
|
||||
};
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('zh-CN');
|
||||
};
|
||||
|
||||
// 清除错误
|
||||
const clearError = () => {
|
||||
error.value = null;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchArtworkDetail();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.artwork-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;
|
||||
}
|
||||
|
||||
.artwork-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 400px;
|
||||
gap: 3rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.artwork-gallery {
|
||||
background: white;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.main-image {
|
||||
position: relative;
|
||||
aspect-ratio: 1;
|
||||
background: #f3f4f6;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.main-image img.loaded {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.main-image img.error {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.image-placeholder,
|
||||
.image-error {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.image-error {
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.thumbnails {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
flex-shrink: 0;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s;
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.thumbnail.active {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.thumbnail img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.artwork-info {
|
||||
background: white;
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.artwork-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.artwork-title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin: 0 0 1rem 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.artwork-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
border: 1px solid #d1d5db;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #e5e7eb;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
background: none;
|
||||
color: #3b82f6;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.btn-text:hover {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.artist-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem;
|
||||
background: #f8fafc;
|
||||
border-radius: 0.75rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.artist-avatar {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.artist-details {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.artist-name {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin: 0 0 0.25rem 0;
|
||||
}
|
||||
|
||||
.artist-account {
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.artwork-stats {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.stat {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.stat svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.artwork-tags {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.artwork-tags h3 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.tags-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.artwork-description {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.artwork-description h3 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.description-content {
|
||||
color: #374151;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.artwork-meta {
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.artwork-meta p {
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.artwork-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.artwork-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.artwork-stats {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.thumbnails {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,607 @@
|
||||
<template>
|
||||
<div class="downloads-page">
|
||||
<div class="container">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">下载管理</h1>
|
||||
<div class="header-actions">
|
||||
<button @click="refreshHistory" class="btn btn-secondary" :disabled="loading">
|
||||
{{ loading ? '刷新中...' : '刷新' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 class="downloads-content">
|
||||
<!-- 活跃任务 -->
|
||||
<div v-if="activeTasks.length > 0" class="section">
|
||||
<h2 class="section-title">活跃任务</h2>
|
||||
<div class="tasks-grid">
|
||||
<div
|
||||
v-for="task in activeTasks"
|
||||
:key="task.id"
|
||||
class="task-card active"
|
||||
>
|
||||
<div class="task-header">
|
||||
<div class="task-info">
|
||||
<h3 class="task-title">{{ getTaskTitle(task) }}</h3>
|
||||
<p class="task-type">{{ getTaskTypeLabel(task.type) }}</p>
|
||||
</div>
|
||||
<div class="task-status">
|
||||
<span class="status-badge downloading">下载中</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="task-progress">
|
||||
<div class="progress-bar">
|
||||
<div
|
||||
class="progress-fill"
|
||||
:style="{ width: `${task.progress}%` }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="progress-text">
|
||||
{{ task.completed }}/{{ task.total }} ({{ task.progress }}%)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="task-actions">
|
||||
<button @click="cancelTask(task.id)" class="btn btn-danger">
|
||||
取消
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 历史记录 -->
|
||||
<div class="section">
|
||||
<h2 class="section-title">下载历史</h2>
|
||||
|
||||
<div v-if="completedTasks.length > 0" class="tasks-grid">
|
||||
<div
|
||||
v-for="task in completedTasks"
|
||||
:key="task.id"
|
||||
class="task-card completed"
|
||||
>
|
||||
<div class="task-header">
|
||||
<div class="task-info">
|
||||
<h3 class="task-title">{{ getTaskTitle(task) }}</h3>
|
||||
<p class="task-type">{{ getTaskTypeLabel(task.type) }}</p>
|
||||
</div>
|
||||
<div class="task-status">
|
||||
<span class="status-badge" :class="task.status">
|
||||
{{ getStatusLabel(task.status) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="task-details">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">完成时间:</span>
|
||||
<span class="detail-value">{{ formatDate(task.end_time) }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">文件数量:</span>
|
||||
<span class="detail-value">{{ task.completed }}/{{ task.total }}</span>
|
||||
</div>
|
||||
<div v-if="task.failed > 0" class="detail-item">
|
||||
<span class="detail-label">失败数量:</span>
|
||||
<span class="detail-value error">{{ task.failed }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="task.files && task.files.length > 0" class="task-files">
|
||||
<h4>下载的文件:</h4>
|
||||
<div class="files-list">
|
||||
<div
|
||||
v-for="file in task.files.slice(0, 3)"
|
||||
:key="file.path"
|
||||
class="file-item"
|
||||
>
|
||||
<span class="file-name">{{ getFileName(file.path) }}</span>
|
||||
<span class="file-size">{{ file.size }}</span>
|
||||
</div>
|
||||
<div v-if="task.files.length > 3" class="file-more">
|
||||
还有 {{ task.files.length - 3 }} 个文件...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="empty-section">
|
||||
<div class="empty-content">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" class="empty-icon">
|
||||
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
|
||||
</svg>
|
||||
<h3>暂无下载记录</h3>
|
||||
<p>开始下载作品后，这里会显示下载历史</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import downloadService from '@/services/download';
|
||||
import type { DownloadTask } from '@/types';
|
||||
import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
|
||||
import ErrorMessage from '@/components/common/ErrorMessage.vue';
|
||||
|
||||
const authStore = useAuthStore();
|
||||
|
||||
// 状态
|
||||
const tasks = ref<DownloadTask[]>([]);
|
||||
const loading = ref(false);
|
||||
const error = ref<string | null>(null);
|
||||
|
||||
// 计算属性
|
||||
const activeTasks = computed(() =>
|
||||
tasks.value.filter(task => task.status === 'downloading')
|
||||
);
|
||||
|
||||
const completedTasks = computed(() =>
|
||||
tasks.value.filter(task =>
|
||||
task.status === 'completed' ||
|
||||
task.status === 'partial' ||
|
||||
task.status === 'failed' ||
|
||||
task.status === 'cancelled'
|
||||
).sort((a, b) => new Date(b.end_time || '').getTime() - new Date(a.end_time || '').getTime())
|
||||
);
|
||||
|
||||
// 获取下载历史
|
||||
const fetchDownloadHistory = async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
|
||||
const response = await downloadService.getDownloadHistory();
|
||||
|
||||
if (response.success && response.data) {
|
||||
tasks.value = response.data.tasks;
|
||||
} else {
|
||||
throw new Error(response.error || '获取下载历史失败');
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : '获取下载历史失败';
|
||||
console.error('获取下载历史失败:', err);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 取消任务
|
||||
const cancelTask = async (taskId: string) => {
|
||||
try {
|
||||
const response = await downloadService.cancelDownload(taskId);
|
||||
|
||||
if (response.success) {
|
||||
// 更新任务状态
|
||||
const task = tasks.value.find(t => t.id === taskId);
|
||||
if (task) {
|
||||
task.status = 'cancelled';
|
||||
task.end_time = new Date().toISOString();
|
||||
}
|
||||
} else {
|
||||
throw new Error(response.error || '取消任务失败');
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : '取消任务失败';
|
||||
console.error('取消任务失败:', err);
|
||||
}
|
||||
};
|
||||
|
||||
// 刷新历史
|
||||
const refreshHistory = async () => {
|
||||
await fetchDownloadHistory();
|
||||
};
|
||||
|
||||
// 获取任务标题
|
||||
const getTaskTitle = (task: DownloadTask) => {
|
||||
switch (task.type) {
|
||||
case 'artwork':
|
||||
return `作品 #${task.artwork_id}`;
|
||||
case 'artist':
|
||||
return `作者作品`;
|
||||
case 'batch':
|
||||
return `批量下载 (${task.total} 个作品)`;
|
||||
default:
|
||||
return '下载任务';
|
||||
}
|
||||
};
|
||||
|
||||
// 获取任务类型标签
|
||||
const getTaskTypeLabel = (type: string) => {
|
||||
switch (type) {
|
||||
case 'artwork':
|
||||
return '单个作品';
|
||||
case 'artist':
|
||||
return '作者作品';
|
||||
case 'batch':
|
||||
return '批量下载';
|
||||
default:
|
||||
return type;
|
||||
}
|
||||
};
|
||||
|
||||
// 获取状态标签
|
||||
const getStatusLabel = (status: string) => {
|
||||
switch (status) {
|
||||
case 'completed':
|
||||
return '已完成';
|
||||
case 'partial':
|
||||
return '部分完成';
|
||||
case 'failed':
|
||||
return '失败';
|
||||
case 'cancelled':
|
||||
return '已取消';
|
||||
default:
|
||||
return status;
|
||||
}
|
||||
};
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleString('zh-CN');
|
||||
};
|
||||
|
||||
// 获取文件名
|
||||
const getFileName = (filePath: string) => {
|
||||
return filePath.split('/').pop() || filePath;
|
||||
};
|
||||
|
||||
// 清除错误
|
||||
const clearError = () => {
|
||||
error.value = null;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchDownloadHistory();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.downloads-page {
|
||||
min-height: 100vh;
|
||||
background: #f8fafc;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
.error-section,
|
||||
.loading-section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.loading-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin: 0 0 1.5rem 0;
|
||||
}
|
||||
|
||||
.tasks-grid {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.task-card {
|
||||
background: white;
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
border-left: 4px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.task-card.active {
|
||||
border-left-color: #3b82f6;
|
||||
}
|
||||
|
||||
.task-card.completed {
|
||||
border-left-color: #10b981;
|
||||
}
|
||||
|
||||
.task-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.task-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.task-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin: 0 0 0.25rem 0;
|
||||
}
|
||||
|
||||
.task-type {
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.task-status {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-badge.downloading {
|
||||
background: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.status-badge.completed {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.status-badge.partial {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.status-badge.failed {
|
||||
background: #fee2e2;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.status-badge.cancelled {
|
||||
background: #f3f4f6;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.task-progress {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 0.5rem;
|
||||
background: #e5e7eb;
|
||||
border-radius: 0.25rem;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: #3b82f6;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.task-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.task-details {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: #374151;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.detail-value.error {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.task-files {
|
||||
border-top: 1px solid #e5e7eb;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.task-files h4 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin: 0 0 0.75rem 0;
|
||||
}
|
||||
|
||||
.files-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
background: #f9fafb;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: 0.875rem;
|
||||
color: #374151;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
flex-shrink: 0;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.file-more {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.empty-section {
|
||||
text-align: center;
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.empty-content {
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
color: #9ca3af;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.empty-content h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.empty-content p {
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.task-header {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.task-actions {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,365 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted } from 'vue';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
|
||||
const authStore = useAuthStore();
|
||||
|
||||
const isLoggedIn = computed(() => authStore.isLoggedIn);
|
||||
|
||||
onMounted(async () => {
|
||||
await authStore.fetchLoginStatus();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="home">
|
||||
<div class="hero-section">
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-title">Pixiv 作品管理器</h1>
|
||||
<p class="hero-subtitle">
|
||||
发现、收藏、下载你喜欢的 Pixiv 作品
|
||||
</p>
|
||||
|
||||
<div class="hero-actions">
|
||||
<router-link
|
||||
v-if="!isLoggedIn"
|
||||
to="/login"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
立即登录
|
||||
</router-link>
|
||||
<router-link
|
||||
v-else
|
||||
to="/search"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
开始搜索
|
||||
</router-link>
|
||||
|
||||
<router-link
|
||||
to="/downloads"
|
||||
class="btn btn-secondary"
|
||||
>
|
||||
下载管理
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="features-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">主要功能</h2>
|
||||
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<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"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="feature-title">作品搜索</h3>
|
||||
<p class="feature-description">
|
||||
通过关键词、标签、作者等多种方式搜索作品
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="feature-title">一键下载</h3>
|
||||
<p class="feature-description">
|
||||
支持单个作品、批量作品、作者作品下载
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="feature-title">作者管理</h3>
|
||||
<p class="feature-description">
|
||||
关注喜欢的作者，查看作品列表和统计信息
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/>
|
||||
<path d="M7 12h2v5H7zm4-3h2v8h-2zm4-3h2v11h-2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="feature-title">下载管理</h3>
|
||||
<p class="feature-description">
|
||||
实时查看下载进度，管理下载历史和任务
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isLoggedIn" class="quick-actions">
|
||||
<div class="container">
|
||||
<h2 class="section-title">快速操作</h2>
|
||||
|
||||
<div class="quick-actions-grid">
|
||||
<router-link to="/search" class="quick-action-card">
|
||||
<div class="quick-action-icon">
|
||||
<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"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span>搜索作品</span>
|
||||
</router-link>
|
||||
|
||||
<router-link to="/downloads" class="quick-action-card">
|
||||
<div class="quick-action-icon">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span>下载管理</span>
|
||||
</router-link>
|
||||
|
||||
<router-link to="/artists" class="quick-action-card">
|
||||
<div class="quick-action-icon">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span>作者管理</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.home {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 2rem;
|
||||
opacity: 0.9;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #2563eb;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.features-section {
|
||||
padding: 4rem 0;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 3rem;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 1rem;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin: 0 auto 1.5rem;
|
||||
background: #3b82f6;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.feature-icon svg {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.feature-description {
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.quick-actions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1.5rem;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.quick-action-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 2rem;
|
||||
background: white;
|
||||
border-radius: 1rem;
|
||||
text-decoration: none;
|
||||
color: #374151;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.quick-action-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.quick-action-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background: #f3f4f6;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #6b7280;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.quick-action-card:hover .quick-action-icon {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.quick-action-icon svg {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.quick-actions-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,337 @@
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<div class="login-header">
|
||||
<h1 class="login-title">登录 Pixiv</h1>
|
||||
<p class="login-subtitle">
|
||||
通过 Pixiv 账号登录以使用所有功能
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="error-section">
|
||||
<ErrorMessage
|
||||
:error="error"
|
||||
title="登录失败"
|
||||
dismissible
|
||||
@dismiss="clearError"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="login-status" v-if="isLoggedIn">
|
||||
<div class="status-success">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
||||
</svg>
|
||||
<div class="status-content">
|
||||
<h3>已登录</h3>
|
||||
<p>欢迎回来，{{ username }}！</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="login-actions">
|
||||
<router-link to="/" class="btn btn-primary">
|
||||
返回首页
|
||||
</router-link>
|
||||
<button @click="handleLogout" class="btn btn-secondary" :disabled="loading">
|
||||
{{ loading ? '登出中...' : '登出' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="login-form">
|
||||
<div class="login-info">
|
||||
<p>点击下方按钮将跳转到 Pixiv 官方登录页面</p>
|
||||
<ul class="login-features">
|
||||
<li>安全可靠的官方登录</li>
|
||||
<li>支持所有 Pixiv 功能</li>
|
||||
<li>自动保存登录状态</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="login-actions">
|
||||
<button
|
||||
@click="handleLogin"
|
||||
class="btn btn-primary btn-large"
|
||||
:disabled="loading"
|
||||
>
|
||||
<LoadingSpinner v-if="loading" text="获取登录链接..." />
|
||||
<span v-else>开始登录</span>
|
||||
</button>
|
||||
|
||||
<router-link to="/" class="btn btn-text">
|
||||
返回首页
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="login-footer">
|
||||
<p class="footer-text">
|
||||
登录即表示您同意我们的
|
||||
<a href="#" class="footer-link">服务条款</a>
|
||||
和
|
||||
<a href="#" class="footer-link">隐私政策</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
|
||||
import ErrorMessage from '@/components/common/ErrorMessage.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const authStore = useAuthStore();
|
||||
|
||||
const isLoggedIn = computed(() => authStore.isLoggedIn);
|
||||
const username = computed(() => authStore.username);
|
||||
const loading = computed(() => authStore.loading);
|
||||
const error = computed(() => authStore.error);
|
||||
|
||||
onMounted(async () => {
|
||||
await authStore.fetchLoginStatus();
|
||||
});
|
||||
|
||||
const handleLogin = async () => {
|
||||
try {
|
||||
const loginUrl = await authStore.getLoginUrl();
|
||||
window.open(loginUrl, '_blank');
|
||||
} catch (err) {
|
||||
console.error('获取登录URL失败:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
await authStore.logout();
|
||||
router.push('/');
|
||||
} catch (err) {
|
||||
console.error('登出失败:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const clearError = () => {
|
||||
authStore.clearError();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: white;
|
||||
border-radius: 1rem;
|
||||
padding: 2.5rem;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.error-section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.login-status {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-success {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
background: #f0fdf4;
|
||||
border: 1px solid #bbf7d0;
|
||||
color: #166534;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.status-success svg {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-content h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 0.25rem 0;
|
||||
}
|
||||
|
||||
.status-content p {
|
||||
margin: 0;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.login-info {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.login-info p {
|
||||
color: #6b7280;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.login-features {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.login-features li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: #374151;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.login-features li::before {
|
||||
content: "✓";
|
||||
color: #10b981;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.login-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.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-primary {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: #2563eb;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
border: 1px solid #d1d5db;
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: #e5e7eb;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
background: none;
|
||||
color: #6b7280;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.btn-text:hover {
|
||||
color: #374151;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.btn-large {
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1.125rem;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
text-align: center;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
color: #3b82f6;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.login-page {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.btn-large {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,408 @@
|
||||
<template>
|
||||
<div class="search-page">
|
||||
<div class="search-header">
|
||||
<div class="container">
|
||||
<h1 class="page-title">搜索作品</h1>
|
||||
|
||||
<div class="search-form">
|
||||
<div class="search-input-group">
|
||||
<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"/>
|
||||
</svg>
|
||||
</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>
|
||||
</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 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 || '搜索失败');
|
||||
}
|
||||
} 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 || '加载更多失败');
|
||||
}
|
||||
} 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}`);
|
||||
};
|
||||
|
||||
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-input-group {
|
||||
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-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 {
|
||||
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>
|
||||
Reference in New Issue
Block a user