文件移动和部分前端ui拆分重构
This commit is contained in:
@@ -345,7 +345,7 @@ class DownloadService {
|
||||
}
|
||||
|
||||
// 有信息文件、有图片文件且数量匹配，认为已下载
|
||||
console.log(`作品 ${artworkId} 已完整下载，有信息文件和 ${imageFiles.length}/${expectedImageCount} 个图片文件`);
|
||||
// console.log(`作品 ${artworkId} 已完整下载，有信息文件和 ${imageFiles.length}/${expectedImageCount} 个图片文件`);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -491,7 +491,7 @@ class RepositoryService {
|
||||
}
|
||||
|
||||
// 有信息文件、有图片文件且数量匹配，认为已下载
|
||||
console.log(`作品 ${artworkId} 已完整下载: ${files.length}/${expectedImageCount} 个图片文件`)
|
||||
// console.log(`作品 ${artworkId} 已完整下载: ${files.length}/${expectedImageCount} 个图片文件`)
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div class="artwork-gallery">
|
||||
<div class="main-image">
|
||||
<img :src="getImageUrl(currentImageUrl)" :alt="artwork.title" @load="imageLoaded = true"
|
||||
@error="imageError = true" :class="{ loaded: imageLoaded, error: imageError }" crossorigin="anonymous" />
|
||||
<div v-if="!imageLoaded && !imageError" class="image-placeholder">
|
||||
<LoadingSpinner text="图片加载中..." />
|
||||
</div>
|
||||
<div v-if="imageError" class="image-error">
|
||||
<span>图片加载失败</span>
|
||||
</div>
|
||||
<!-- 页面切换时的遮罩层 -->
|
||||
<div v-if="loading" class="image-overlay">
|
||||
<LoadingSpinner text="切换中..." />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 多页作品缩略图 -->
|
||||
<div v-if="artwork.page_count > 1" class="thumbnails">
|
||||
<button v-for="(page, index) in artwork.meta_pages" :key="index" @click="$emit('pageChange', index)"
|
||||
class="thumbnail" :class="{ active: currentPage === index }">
|
||||
<img :src="getImageUrl(page.image_urls.square_medium)" :alt="`第 ${index + 1} 页`" crossorigin="anonymous" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { getImageProxyUrl } from '@/services/api';
|
||||
import type { Artwork } from '@/types';
|
||||
import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
|
||||
|
||||
interface Props {
|
||||
artwork: Artwork;
|
||||
currentPage: number;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
loading: false
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
pageChange: [page: number];
|
||||
}>();
|
||||
|
||||
// 图片加载状态
|
||||
const imageLoaded = ref(false);
|
||||
const imageError = ref(false);
|
||||
|
||||
// 计算当前图片URL
|
||||
const currentImageUrl = computed(() => {
|
||||
if (!props.artwork) return '';
|
||||
|
||||
if (props.artwork.page_count === 1) {
|
||||
return props.artwork.image_urls.large;
|
||||
} else if (props.artwork.meta_pages && props.artwork.meta_pages[props.currentPage]) {
|
||||
return props.artwork.meta_pages[props.currentPage].image_urls.large;
|
||||
}
|
||||
|
||||
return props.artwork.image_urls.large;
|
||||
});
|
||||
|
||||
// 使用统一的图片代理函数
|
||||
const getImageUrl = getImageProxyUrl;
|
||||
|
||||
// 监听页面变化，重置图片加载状态
|
||||
watch(() => props.currentPage, () => {
|
||||
imageLoaded.value = false;
|
||||
imageError.value = false;
|
||||
});
|
||||
|
||||
// 监听作品变化，重置图片加载状态
|
||||
watch(() => props.artwork.id, () => {
|
||||
imageLoaded.value = false;
|
||||
imageError.value = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.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;
|
||||
}
|
||||
|
||||
.image-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(2px);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.thumbnails {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,518 @@
|
||||
<template>
|
||||
<div class="artwork-info">
|
||||
<div class="artwork-header">
|
||||
<h1 class="artwork-title">{{ artwork.title }}</h1>
|
||||
<!-- 下载按钮 -->
|
||||
<div class="artwork-actions">
|
||||
<button @click="$emit('download')" :disabled="downloading || !artwork" class="btn btn-primary">
|
||||
<span v-if="downloading">下载中...</span>
|
||||
<span v-else-if="isDownloaded">重新下载</span>
|
||||
<span v-else>下载</span>
|
||||
</button>
|
||||
<button @click="$emit('bookmark')" class="btn btn-secondary">
|
||||
{{ artwork.is_bookmarked ? '取消收藏' : '收藏' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 下载状态和进度区域 -->
|
||||
<div class="download-section">
|
||||
<!-- 下载状态提示 -->
|
||||
<div v-if="isDownloaded && !currentTask" class="download-status">
|
||||
<div class="status-indicator">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" class="status-icon">
|
||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
|
||||
</svg>
|
||||
<span>已下载到本地</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 下载进度 -->
|
||||
<DownloadProgress v-if="currentTask" :task="currentTask" :loading="downloading"
|
||||
@update="$emit('updateTask', $event)" @remove="$emit('removeTask', $event)" />
|
||||
</div>
|
||||
|
||||
<!-- 作者信息 -->
|
||||
<div class="artist-info">
|
||||
<img :src="getImageUrl(artwork.user.profile_image_urls.medium)" :alt="artwork.user.name"
|
||||
class="artist-avatar" crossorigin="anonymous" />
|
||||
<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 v-if="showNavigation" class="artwork-navigation">
|
||||
<button @click="$emit('goBack')" class="nav-btn nav-back" title="返回作者页面">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
|
||||
</svg>
|
||||
<span>返回</span>
|
||||
</button>
|
||||
<button @click="$emit('navigatePrevious')" class="nav-btn nav-prev" :disabled="!previousArtwork || loading"
|
||||
:title="previousArtwork ? `上一个: ${previousArtwork.title}` : '没有上一个作品'">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
|
||||
</svg>
|
||||
<span>{{ loading ? '切换中...' : '上一个' }}</span>
|
||||
</button>
|
||||
<button @click="$emit('navigateNext')" class="nav-btn nav-next" :disabled="!nextArtwork || loading"
|
||||
:title="nextArtwork ? `下一个: ${nextArtwork.title}` : '没有下一个作品'">
|
||||
<span>{{ loading ? '切换中...' : '下一个' }}</span>
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" />
|
||||
</svg>
|
||||
</button>
|
||||
</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">
|
||||
<button v-for="tag in artwork.tags" :key="tag.name" @click="handleTagClick($event, tag.name)"
|
||||
class="tag tag-clickable" :class="{ 'tag-selected': selectedTags.includes(tag.name) }"
|
||||
:title="`搜索标签: ${tag.name} (在新标签页中打开，按住Ctrl键点击选择多个标签，松开Ctrl键搜索)`">
|
||||
{{ tag.name }}
|
||||
</button>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { getImageProxyUrl } from '@/services/api';
|
||||
import type { Artwork, DownloadTask } from '@/types';
|
||||
import DownloadProgress from '@/components/download/DownloadProgress.vue';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
interface Props {
|
||||
artwork: Artwork;
|
||||
downloading: boolean;
|
||||
isDownloaded: boolean;
|
||||
currentTask: DownloadTask | null;
|
||||
loading: boolean;
|
||||
showNavigation: boolean;
|
||||
previousArtwork: Artwork | null;
|
||||
nextArtwork: Artwork | null;
|
||||
selectedTags: string[];
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
download: [];
|
||||
bookmark: [];
|
||||
updateTask: [task: DownloadTask];
|
||||
removeTask: [taskId: string];
|
||||
goBack: [];
|
||||
navigatePrevious: [];
|
||||
navigateNext: [];
|
||||
tagClick: [event: MouseEvent, tagName: string];
|
||||
}>();
|
||||
|
||||
// 使用统一的图片代理函数
|
||||
const getImageUrl = getImageProxyUrl;
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('zh-CN');
|
||||
};
|
||||
|
||||
// 处理标签点击
|
||||
const handleTagClick = (event: MouseEvent, tagName: string) => {
|
||||
emit('tagClick', event, tagName);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.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: 1.5rem;
|
||||
}
|
||||
|
||||
.download-section {
|
||||
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: 1.5rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.tag-clickable {
|
||||
background: #e0f2fe;
|
||||
color: #0369a1;
|
||||
border: 1px solid #bae6fd;
|
||||
}
|
||||
|
||||
.tag-clickable:hover {
|
||||
background: #bae6fd;
|
||||
color: #075985;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.tag-selected {
|
||||
background: #3b82f6 !important;
|
||||
color: white !important;
|
||||
border-color: #2563eb !important;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.tag-selected:hover {
|
||||
background: #2563eb !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.artwork-navigation {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
padding: 1rem;
|
||||
background: #f8fafc;
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.nav-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;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-btn:hover:not(:disabled) {
|
||||
background: #f3f4f6;
|
||||
border-color: #9ca3af;
|
||||
}
|
||||
|
||||
.nav-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-btn:disabled::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 0.5rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.nav-btn svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
flex: 0 0 auto;
|
||||
min-width: 100px;
|
||||
justify-content: center;
|
||||
background: #f3f4f6;
|
||||
border-color: #9ca3af;
|
||||
}
|
||||
|
||||
.nav-back:hover {
|
||||
background: #e5e7eb;
|
||||
}
|
||||
|
||||
.nav-prev,
|
||||
.nav-next {
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.nav-prev {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.nav-next {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.download-status {
|
||||
padding: 1rem 1.25rem;
|
||||
background: #f0f9ff;
|
||||
border: 1px solid #bae6fd;
|
||||
border-radius: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: #0369a1;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.artwork-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.artwork-stats {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.artwork-navigation {
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
order: -1;
|
||||
align-self: flex-start;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.nav-prev,
|
||||
.nav-next {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+2
-10
@@ -15,16 +15,8 @@
|
||||
<div class="artwork-files">
|
||||
<h4>文件列表</h4>
|
||||
<div class="files-grid">
|
||||
<div
|
||||
v-for="file in artwork.files"
|
||||
:key="file.path"
|
||||
class="file-item"
|
||||
>
|
||||
<img
|
||||
:src="getPreviewUrl(file.path)"
|
||||
:alt="file.name"
|
||||
class="file-preview"
|
||||
/>
|
||||
<div v-for="file in artwork.files" :key="file.path" class="file-item">
|
||||
<img :src="getPreviewUrl(file.path)" :alt="file.name" class="file-preview" />
|
||||
<div class="file-info">
|
||||
<p>{{ file.name }}</p>
|
||||
<p>{{ formatFileSize(file.size) }}</p>
|
||||
+14
-50
@@ -2,33 +2,18 @@
|
||||
<div class="browse-section">
|
||||
<!-- 面包屑导航 -->
|
||||
<div class="breadcrumb" v-if="breadcrumb.length > 0">
|
||||
<span
|
||||
v-for="(item, index) in breadcrumb"
|
||||
:key="index"
|
||||
class="breadcrumb-item"
|
||||
@click="navigateBreadcrumb(index)"
|
||||
>
|
||||
<span v-for="(item, index) in breadcrumb" :key="index" class="breadcrumb-item" @click="navigateBreadcrumb(index)">
|
||||
{{ item.name }}
|
||||
<span v-if="index < breadcrumb.length - 1" class="separator">/</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 搜索面板 -->
|
||||
<SearchPanel
|
||||
:initial-query="searchQuery"
|
||||
:initial-sort="sortBy"
|
||||
:initial-filter="filterBy"
|
||||
@search="handleSearch"
|
||||
@sort="handleSort"
|
||||
@filter="handleFilter"
|
||||
@clear="handleClear"
|
||||
/>
|
||||
<SearchPanel :initial-query="searchQuery" :initial-sort="sortBy" :initial-filter="filterBy" @search="handleSearch"
|
||||
@sort="handleSort" @filter="handleFilter" @clear="handleClear" />
|
||||
|
||||
<!-- 视图模式切换 -->
|
||||
<ViewModeToggle
|
||||
v-model="viewMode"
|
||||
@update:model-value="handleViewModeChange"
|
||||
/>
|
||||
<ViewModeToggle v-model="viewMode" @update:model-value="handleViewModeChange" />
|
||||
|
||||
<!-- 统计信息 -->
|
||||
<div class="browse-stats">
|
||||
@@ -39,44 +24,23 @@
|
||||
</div>
|
||||
|
||||
<!-- 作者视图 -->
|
||||
<ArtistsView
|
||||
v-if="viewMode === 'artists'"
|
||||
:artists="artists"
|
||||
@select-artist="handleSelectArtist"
|
||||
@view-artist-works="handleViewArtistWorks"
|
||||
/>
|
||||
<ArtistsView v-if="viewMode === 'artists'" :artists="artists" @select-artist="handleSelectArtist"
|
||||
@view-artist-works="handleViewArtistWorks" />
|
||||
|
||||
<!-- 作品视图 -->
|
||||
<ArtworksView
|
||||
v-else-if="viewMode === 'artworks'"
|
||||
:artworks="artworks"
|
||||
@view-artwork="handleViewArtwork"
|
||||
@select-artist="handleSelectArtist"
|
||||
@open-image-viewer="handleOpenImageViewer"
|
||||
/>
|
||||
<ArtworksView v-else-if="viewMode === 'artworks'" :artworks="artworks" @view-artwork="handleViewArtwork"
|
||||
@select-artist="handleSelectArtist" @open-image-viewer="handleOpenImageViewer" />
|
||||
|
||||
<!-- 画廊视图 -->
|
||||
<GalleryView
|
||||
v-else-if="viewMode === 'gallery'"
|
||||
:artworks="artworks"
|
||||
@view-artwork="handleViewArtwork"
|
||||
@open-image-viewer="handleOpenImageViewer"
|
||||
/>
|
||||
<GalleryView v-else-if="viewMode === 'gallery'" :artworks="artworks" @view-artwork="handleViewArtwork"
|
||||
@open-image-viewer="handleOpenImageViewer" />
|
||||
|
||||
<!-- 分页控件 -->
|
||||
<Pagination
|
||||
:current-page="currentPage"
|
||||
:total-pages="totalPages"
|
||||
@change-page="handlePageChange"
|
||||
/>
|
||||
<Pagination :current-page="currentPage" :total-pages="totalPages" @change-page="handlePageChange" />
|
||||
|
||||
<!-- 图片查看器 -->
|
||||
<ImageViewer
|
||||
v-model:current-index="imageViewerIndex"
|
||||
:show="imageViewer.show"
|
||||
:artwork="imageViewer.artwork"
|
||||
@close="closeImageViewer"
|
||||
/>
|
||||
<ImageViewer v-model:current-index="imageViewerIndex" :show="imageViewer.show" :artwork="imageViewer.artwork"
|
||||
@close="closeImageViewer" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -115,7 +79,7 @@ const emit = defineEmits<Emits>()
|
||||
const searchQuery = ref('')
|
||||
const sortBy = ref('date')
|
||||
const filterBy = ref('all')
|
||||
const breadcrumb = ref<Array<{name: string, type: string}>>([])
|
||||
const breadcrumb = ref<Array<{ name: string, type: string }>>([])
|
||||
const currentArtist = ref<string>('') // 添加当前查看的作者状态
|
||||
|
||||
// 图片查看器
|
||||
+5
-18
@@ -9,12 +9,8 @@
|
||||
<div class="form-group">
|
||||
<label>源目录路径</label>
|
||||
<div class="path-input-group">
|
||||
<input
|
||||
v-model="migrateSourceDir"
|
||||
type="text"
|
||||
placeholder="选择要迁移的目录路径，例如: D:\old-downloads"
|
||||
class="form-input"
|
||||
/>
|
||||
<input v-model="migrateSourceDir" type="text" placeholder="选择要迁移的目录路径，例如: D:\old-downloads"
|
||||
class="form-input" />
|
||||
<button type="button" @click="selectMigrateDir" class="btn btn-secondary">
|
||||
选择目录
|
||||
</button>
|
||||
@@ -30,11 +26,7 @@
|
||||
</small>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button
|
||||
@click="startMigration"
|
||||
class="btn btn-primary"
|
||||
:disabled="migrating"
|
||||
>
|
||||
<button @click="startMigration" class="btn btn-primary" :disabled="migrating">
|
||||
{{ migrating ? '迁移中...' : '开始迁移' }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -45,16 +37,11 @@
|
||||
<h4>迁移结果</h4>
|
||||
<div class="result-stats">
|
||||
<p>成功迁移: {{ migrationResult.totalMigrated }} 个作品</p>
|
||||
<p>跳过: {{ migrationResult.log.filter((item: any) => item.status === 'skipped').length }} 个作品</p>
|
||||
<p>跳过: {{migrationResult.log.filter((item: any) => item.status === 'skipped').length}} 个作品</p>
|
||||
</div>
|
||||
<div class="migration-log">
|
||||
<h5>详细日志</h5>
|
||||
<div
|
||||
v-for="(item, index) in migrationResult.log"
|
||||
:key="index"
|
||||
class="log-item"
|
||||
:class="(item as any).status"
|
||||
>
|
||||
<div v-for="(item, index) in migrationResult.log" :key="index" class="log-item" :class="(item as any).status">
|
||||
<span class="log-status">{{ (item as any).status === 'success' ? '✅' : '⏭️' }}</span>
|
||||
<span class="log-text">{{ (item as any).title }} (ID: {{ (item as any).id }})</span>
|
||||
<span v-if="(item as any).reason" class="log-reason">{{ (item as any).reason }}</span>
|
||||
+6
-8
@@ -3,17 +3,14 @@
|
||||
<div class="stats-header">
|
||||
<h3>仓库统计</h3>
|
||||
<div class="stats-actions">
|
||||
<button
|
||||
@click="refreshStats"
|
||||
:disabled="loading"
|
||||
class="btn btn-secondary btn-sm"
|
||||
title="刷新统计数据"
|
||||
>
|
||||
<button @click="refreshStats" :disabled="loading" class="btn btn-secondary btn-sm" title="刷新统计数据">
|
||||
<svg v-if="loading" viewBox="0 0 24 24" fill="currentColor" class="refresh-icon spinning">
|
||||
<path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
|
||||
<path
|
||||
d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
|
||||
</svg>
|
||||
<svg v-else viewBox="0 0 24 24" fill="currentColor" class="refresh-icon">
|
||||
<path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
|
||||
<path
|
||||
d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
|
||||
</svg>
|
||||
刷新
|
||||
</button>
|
||||
@@ -129,6 +126,7 @@ import { formatFileSize } from '@/utils/formatters'
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
+2
-6
@@ -1,12 +1,8 @@
|
||||
<template>
|
||||
<div class="artists-view">
|
||||
<div class="artists-grid">
|
||||
<div
|
||||
v-for="artist in artists"
|
||||
:key="artist.name"
|
||||
class="artist-card"
|
||||
@click="$emit('select-artist', artist.name)"
|
||||
>
|
||||
<div v-for="artist in artists" :key="artist.name" class="artist-card"
|
||||
@click="$emit('select-artist', artist.name)">
|
||||
<div class="artist-avatar">
|
||||
<span class="avatar-text">{{ artist.name.charAt(0).toUpperCase() }}</span>
|
||||
</div>
|
||||
+3
-12
@@ -1,19 +1,10 @@
|
||||
<template>
|
||||
<div class="artworks-view">
|
||||
<div class="artworks-grid">
|
||||
<div
|
||||
v-for="artwork in artworks"
|
||||
:key="artwork.id"
|
||||
class="artwork-card"
|
||||
@click="$emit('view-artwork', artwork)"
|
||||
>
|
||||
<div v-for="artwork in artworks" :key="artwork.id" class="artwork-card" @click="$emit('view-artwork', artwork)">
|
||||
<div class="artwork-preview" v-if="artwork.files.length > 0">
|
||||
<img
|
||||
:src="getPreviewUrl(artwork.files[0].path)"
|
||||
:alt="artwork.title"
|
||||
class="preview-image"
|
||||
@click.stop="$emit('open-image-viewer', artwork, 0)"
|
||||
/>
|
||||
<img :src="getPreviewUrl(artwork.files[0].path)" :alt="artwork.title" class="preview-image"
|
||||
@click.stop="$emit('open-image-viewer', artwork, 0)" />
|
||||
<div class="artwork-overlay">
|
||||
<button @click.stop="$emit('open-image-viewer', artwork, 0)" class="view-btn-overlay">
|
||||
👁️ 查看大图
|
||||
+4
-13
@@ -24,20 +24,11 @@
|
||||
</div>
|
||||
|
||||
<div class="gallery-grid" :class="`grid-${gridSize}`">
|
||||
<div
|
||||
v-for="artwork in artworks"
|
||||
:key="artwork.id"
|
||||
class="gallery-item"
|
||||
@click="$emit('open-image-viewer', artwork, 0)"
|
||||
>
|
||||
<div v-for="artwork in artworks" :key="artwork.id" class="gallery-item"
|
||||
@click="$emit('open-image-viewer', artwork, 0)">
|
||||
<div class="gallery-image-container">
|
||||
<img
|
||||
:src="getPreviewUrl(artwork.files[0].path)"
|
||||
:alt="artwork.title"
|
||||
class="gallery-image"
|
||||
@load="onImageLoad"
|
||||
@error="onImageError"
|
||||
/>
|
||||
<img :src="getPreviewUrl(artwork.files[0].path)" :alt="artwork.title" class="gallery-image"
|
||||
@load="onImageLoad" @error="onImageError" />
|
||||
<div class="gallery-overlay">
|
||||
<div class="overlay-content">
|
||||
<h4>{{ artwork.title }}</h4>
|
||||
+7
-18
@@ -24,15 +24,12 @@
|
||||
</button>
|
||||
|
||||
<div class="image-container">
|
||||
<img
|
||||
:src="getPreviewUrl(currentImagePath)"
|
||||
:alt="currentImageName"
|
||||
class="viewer-image"
|
||||
:style="{ transform: `scale(${zoomLevel})` }"
|
||||
/>
|
||||
<img :src="getPreviewUrl(currentImagePath)" :alt="currentImageName" class="viewer-image"
|
||||
:style="{ transform: `scale(${zoomLevel})` }" />
|
||||
</div>
|
||||
|
||||
<button @click="nextImage" class="nav-btn next-btn" :disabled="currentIndex >= (artwork?.files?.length || 0) - 1">
|
||||
<button @click="nextImage" class="nav-btn next-btn"
|
||||
:disabled="currentIndex >= (artwork?.files?.length || 0) - 1">
|
||||
›
|
||||
</button>
|
||||
</div>
|
||||
@@ -48,17 +45,9 @@
|
||||
</div>
|
||||
|
||||
<div class="thumbnail-strip">
|
||||
<div
|
||||
v-for="(file, index) in (artwork?.files || [])"
|
||||
:key="index"
|
||||
:class="['thumbnail', { active: index === currentIndex }]"
|
||||
@click="goToImage(index)"
|
||||
>
|
||||
<img
|
||||
:src="getPreviewUrl(file.path)"
|
||||
:alt="file.name"
|
||||
class="thumbnail-img"
|
||||
/>
|
||||
<div v-for="(file, index) in (artwork?.files || [])" :key="index"
|
||||
:class="['thumbnail', { active: index === currentIndex }]" @click="goToImage(index)">
|
||||
<img :src="getPreviewUrl(file.path)" :alt="file.name" class="thumbnail-img" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
+6
-26
@@ -1,43 +1,23 @@
|
||||
<template>
|
||||
<div class="pagination" v-if="totalPages > 1">
|
||||
<button
|
||||
@click="$emit('change-page', 1)"
|
||||
:disabled="currentPage <= 1"
|
||||
class="page-btn"
|
||||
>
|
||||
<button @click="$emit('change-page', 1)" :disabled="currentPage <= 1" class="page-btn">
|
||||
首页
|
||||
</button>
|
||||
<button
|
||||
@click="$emit('change-page', currentPage - 1)"
|
||||
:disabled="currentPage <= 1"
|
||||
class="page-btn"
|
||||
>
|
||||
<button @click="$emit('change-page', currentPage - 1)" :disabled="currentPage <= 1" class="page-btn">
|
||||
上一页
|
||||
</button>
|
||||
|
||||
<div class="page-numbers">
|
||||
<button
|
||||
v-for="page in visiblePages"
|
||||
:key="page"
|
||||
@click="$emit('change-page', page)"
|
||||
:class="['page-btn', { active: page === currentPage }]"
|
||||
>
|
||||
<button v-for="page in visiblePages" :key="page" @click="$emit('change-page', page)"
|
||||
:class="['page-btn', { active: page === currentPage }]">
|
||||
{{ page }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click="$emit('change-page', currentPage + 1)"
|
||||
:disabled="currentPage >= totalPages"
|
||||
class="page-btn"
|
||||
>
|
||||
<button @click="$emit('change-page', currentPage + 1)" :disabled="currentPage >= totalPages" class="page-btn">
|
||||
下一页
|
||||
</button>
|
||||
<button
|
||||
@click="$emit('change-page', totalPages)"
|
||||
:disabled="currentPage >= totalPages"
|
||||
class="page-btn"
|
||||
>
|
||||
<button @click="$emit('change-page', totalPages)" :disabled="currentPage >= totalPages" class="page-btn">
|
||||
末页
|
||||
</button>
|
||||
</div>
|
||||
+2
-7
@@ -2,13 +2,8 @@
|
||||
<div class="search-panel">
|
||||
<div class="search-filters">
|
||||
<div class="search-box">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
placeholder="搜索作品标题、作者名称..."
|
||||
class="search-input"
|
||||
@input="debounceSearch"
|
||||
/>
|
||||
<input v-model="searchQuery" type="text" placeholder="搜索作品标题、作者名称..." class="search-input"
|
||||
@input="debounceSearch" />
|
||||
<button @click="clearSearch" class="clear-btn" v-if="searchQuery">
|
||||
✕
|
||||
</button>
|
||||
+6
-15
@@ -1,26 +1,17 @@
|
||||
<template>
|
||||
<div class="view-toggle">
|
||||
<button
|
||||
class="view-btn"
|
||||
:class="{ active: modelValue === 'artists' }"
|
||||
@click="$emit('update:modelValue', 'artists')"
|
||||
>
|
||||
<button class="view-btn" :class="{ active: modelValue === 'artists' }"
|
||||
@click="$emit('update:modelValue', 'artists')">
|
||||
<span class="btn-icon">👥</span>
|
||||
按作者浏览
|
||||
</button>
|
||||
<button
|
||||
class="view-btn"
|
||||
:class="{ active: modelValue === 'artworks' }"
|
||||
@click="$emit('update:modelValue', 'artworks')"
|
||||
>
|
||||
<button class="view-btn" :class="{ active: modelValue === 'artworks' }"
|
||||
@click="$emit('update:modelValue', 'artworks')">
|
||||
<span class="btn-icon">🖼️</span>
|
||||
所有作品
|
||||
</button>
|
||||
<button
|
||||
class="view-btn"
|
||||
:class="{ active: modelValue === 'gallery' }"
|
||||
@click="$emit('update:modelValue', 'gallery')"
|
||||
>
|
||||
<button class="view-btn" :class="{ active: modelValue === 'gallery' }"
|
||||
@click="$emit('update:modelValue', 'gallery')">
|
||||
<span class="btn-icon">🎨</span>
|
||||
画廊模式
|
||||
</button>
|
||||
+34
-625
@@ -17,155 +17,17 @@
|
||||
|
||||
<!-- 作品内容 -->
|
||||
<div v-if="artwork" class="artwork-content" :class="{ 'content-loading': loading }">
|
||||
<!-- 作品图片 -->
|
||||
<div class="artwork-gallery">
|
||||
<div class="main-image">
|
||||
<img :src="getImageUrl(currentImageUrl)" :alt="artwork.title" @load="imageLoaded = true"
|
||||
@error="imageError = true" :class="{ loaded: imageLoaded, error: imageError }" crossorigin="anonymous" />
|
||||
<div v-if="!imageLoaded && !imageError" class="image-placeholder">
|
||||
<LoadingSpinner text="图片加载中..." />
|
||||
</div>
|
||||
<div v-if="imageError" class="image-error">
|
||||
<span>图片加载失败</span>
|
||||
</div>
|
||||
<!-- 页面切换时的遮罩层 -->
|
||||
<div v-if="loading" class="image-overlay">
|
||||
<LoadingSpinner text="切换中..." />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 左侧图片组件 -->
|
||||
<ArtworkGallery :artwork="artwork" :current-page="currentPage" :loading="loading"
|
||||
@page-change="currentPage = $event" />
|
||||
|
||||
<!-- 多页作品缩略图 -->
|
||||
<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="getImageUrl(page.image_urls.square_medium)" :alt="`第 ${index + 1} 页`"
|
||||
crossorigin="anonymous" />
|
||||
</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" :disabled="downloading || !artwork" class="btn btn-primary">
|
||||
<span v-if="downloading">下载中...</span>
|
||||
<span v-else-if="isDownloaded">重新下载</span>
|
||||
<span v-else>下载</span>
|
||||
</button>
|
||||
<button @click="handleBookmark" class="btn btn-secondary">
|
||||
{{ artwork.is_bookmarked ? '取消收藏' : '收藏' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 下载状态和进度区域 -->
|
||||
<div class="download-section">
|
||||
<!-- 下载状态提示 -->
|
||||
<div v-if="isDownloaded && !currentTask" class="download-status">
|
||||
<div class="status-indicator">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" class="status-icon">
|
||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
|
||||
</svg>
|
||||
<span>已下载到本地</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 下载进度 -->
|
||||
<DownloadProgress v-if="currentTask" :task="currentTask" :loading="downloading" @update="updateTask"
|
||||
@remove="removeTask" />
|
||||
</div>
|
||||
|
||||
<!-- 作者信息 -->
|
||||
<div class="artist-info">
|
||||
<img :src="getImageUrl(artwork.user.profile_image_urls.medium)" :alt="artwork.user.name"
|
||||
class="artist-avatar" crossorigin="anonymous" />
|
||||
<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 v-if="showNavigation" class="artwork-navigation">
|
||||
<button @click="goBackToArtist" class="nav-btn nav-back" title="返回作者页面">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
|
||||
</svg>
|
||||
<span>返回</span>
|
||||
</button>
|
||||
<button @click="navigateToPrevious" class="nav-btn nav-prev" :disabled="!previousArtwork || loading"
|
||||
:title="previousArtwork ? `上一个: ${previousArtwork.title}` : '没有上一个作品'">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
|
||||
</svg>
|
||||
<span>{{ loading ? '切换中...' : '上一个' }}</span>
|
||||
</button>
|
||||
<button @click="navigateToNext" class="nav-btn nav-next" :disabled="!nextArtwork || loading"
|
||||
:title="nextArtwork ? `下一个: ${nextArtwork.title}` : '没有下一个作品'">
|
||||
<span>{{ loading ? '切换中...' : '下一个' }}</span>
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" />
|
||||
</svg>
|
||||
</button>
|
||||
</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">
|
||||
<button v-for="tag in artwork.tags" :key="tag.name" @click="handleTagClick($event, tag.name)"
|
||||
class="tag tag-clickable" :class="{ 'tag-selected': selectedTags.includes(tag.name) }"
|
||||
:title="`搜索标签: ${tag.name} (按住Ctrl键点击选择多个标签，松开Ctrl键搜索)`">
|
||||
{{ tag.name }}
|
||||
</button>
|
||||
</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>
|
||||
<!-- 右侧信息面板组件 -->
|
||||
<ArtworkInfoPanel :artwork="artwork" :downloading="downloading" :is-downloaded="isDownloaded"
|
||||
:current-task="currentTask" :loading="loading" :show-navigation="showNavigation"
|
||||
:previous-artwork="previousArtwork" :next-artwork="nextArtwork" :selected-tags="selectedTags"
|
||||
@download="handleDownload" @bookmark="handleBookmark" @update-task="updateTask" @remove-task="removeTask"
|
||||
@go-back="goBackToArtist" @navigate-previous="navigateToPrevious" @navigate-next="navigateToNext"
|
||||
@tag-click="handleTagClick" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -184,6 +46,8 @@ import type { Artwork, DownloadTask } from '@/types';
|
||||
import ErrorMessage from '@/components/common/ErrorMessage.vue';
|
||||
import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
|
||||
import DownloadProgress from '@/components/download/DownloadProgress.vue';
|
||||
import ArtworkGallery from '@/components/artwork/ArtworkGallery.vue';
|
||||
import ArtworkInfoPanel from '@/components/artwork/ArtworkInfoPanel.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
@@ -195,8 +59,6 @@ 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 isDownloaded = ref(false);
|
||||
|
||||
@@ -212,22 +74,9 @@ const artistArtworks = ref<Artwork[]>([]);
|
||||
const currentArtworkIndex = ref(-1);
|
||||
const navigationLoading = 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 showNavigation = computed(() => {
|
||||
return route.query.artistId && route.query.artworkType;
|
||||
return !!(route.query.artistId && route.query.artworkType);
|
||||
});
|
||||
|
||||
const previousArtwork = computed(() => {
|
||||
@@ -264,9 +113,7 @@ const fetchArtworkDetail = async () => {
|
||||
const response = await artworkService.getArtworkDetail(artworkId);
|
||||
|
||||
if (response.success && response.data) {
|
||||
// 重置图片加载状态
|
||||
imageLoaded.value = false;
|
||||
imageError.value = false;
|
||||
// 重置页面状态
|
||||
currentPage.value = 0;
|
||||
|
||||
// 更新作品数据
|
||||
@@ -490,13 +337,7 @@ const handleBookmark = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('zh-CN');
|
||||
};
|
||||
|
||||
// 使用统一的图片代理函数
|
||||
const getImageUrl = getImageProxyUrl;
|
||||
|
||||
// 清除错误
|
||||
const clearError = () => {
|
||||
@@ -600,6 +441,7 @@ const goBackToArtist = () => {
|
||||
// 选中的标签状态
|
||||
const selectedTags = ref<string[]>([]);
|
||||
const isCtrlPressed = ref(false);
|
||||
const isMultiSelecting = ref(false);
|
||||
|
||||
// 处理标签点击
|
||||
const handleTagClick = (event: MouseEvent, tagName: string) => {
|
||||
@@ -614,8 +456,9 @@ const handleTagClick = (event: MouseEvent, tagName: string) => {
|
||||
});
|
||||
|
||||
// 如果按住Ctrl键，则添加到选中状态（不跳转）
|
||||
if (event.ctrlKey || event.metaKey || isCtrlPressed.value) {
|
||||
if (event.ctrlKey || event.metaKey) {
|
||||
console.log('检测到Ctrl键，添加到选中状态');
|
||||
isMultiSelecting.value = true;
|
||||
|
||||
// 切换标签的选中状态
|
||||
const index = selectedTags.value.indexOf(tagName);
|
||||
@@ -627,25 +470,29 @@ const handleTagClick = (event: MouseEvent, tagName: string) => {
|
||||
selectedTags.value.push(tagName);
|
||||
}
|
||||
|
||||
console.log('当前选中的标签:', selectedTags.value);
|
||||
// console.log('当前选中的标签:', selectedTags.value);
|
||||
|
||||
// 保存到sessionStorage
|
||||
sessionStorage.setItem('currentSearchTags', JSON.stringify(selectedTags.value));
|
||||
|
||||
// 不跳转，只是更新选中状态
|
||||
} else {
|
||||
console.log('普通点击，执行单标签搜索');
|
||||
// console.log('普通点击，执行单标签搜索');
|
||||
// 普通点击，只搜索当前标签，清除之前的多标签选择
|
||||
selectedTags.value = [];
|
||||
sessionStorage.removeItem('currentSearchTags');
|
||||
isMultiSelecting.value = false;
|
||||
|
||||
router.push({
|
||||
// 在新标签页中打开搜索
|
||||
const searchUrl = router.resolve({
|
||||
path: '/search',
|
||||
query: {
|
||||
mode: 'tags',
|
||||
tag: tagName
|
||||
}
|
||||
});
|
||||
}).href;
|
||||
|
||||
window.open(searchUrl, '_blank');
|
||||
}
|
||||
};
|
||||
|
||||
@@ -660,21 +507,25 @@ const handleKeyUp = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Control' || event.key === 'Meta') {
|
||||
isCtrlPressed.value = false;
|
||||
|
||||
// 当松开Ctrl键时，如果有选中的标签，则跳转到搜索页面
|
||||
if (selectedTags.value.length > 0) {
|
||||
console.log('松开Ctrl键，跳转到搜索页面，标签:', selectedTags.value);
|
||||
// 当松开Ctrl键时，如果正在进行多选操作且有选中的标签，则在新标签页中打开搜索
|
||||
if (isMultiSelecting.value && selectedTags.value.length > 0) {
|
||||
console.log('松开Ctrl键，在新标签页中打开搜索，标签:', selectedTags.value);
|
||||
|
||||
router.push({
|
||||
// 在新标签页中打开搜索
|
||||
const searchUrl = router.resolve({
|
||||
path: '/search',
|
||||
query: {
|
||||
mode: 'tags',
|
||||
tags: selectedTags.value
|
||||
}
|
||||
});
|
||||
}).href;
|
||||
|
||||
window.open(searchUrl, '_blank');
|
||||
|
||||
// 清空选中状态
|
||||
selectedTags.value = [];
|
||||
sessionStorage.removeItem('currentSearchTags');
|
||||
isMultiSelecting.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -775,411 +626,7 @@ onUnmounted(() => {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.image-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(2px);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.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: 1.5rem;
|
||||
}
|
||||
|
||||
.download-section {
|
||||
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: 1.5rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.tag-clickable {
|
||||
background: #e0f2fe;
|
||||
color: #0369a1;
|
||||
border: 1px solid #bae6fd;
|
||||
}
|
||||
|
||||
.tag-clickable:hover {
|
||||
background: #bae6fd;
|
||||
color: #075985;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.tag-selected {
|
||||
background: #3b82f6 !important;
|
||||
color: white !important;
|
||||
border-color: #2563eb !important;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.tag-selected:hover {
|
||||
background: #2563eb !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.artwork-navigation {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
padding: 1rem;
|
||||
background: #f8fafc;
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.nav-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;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-btn:hover:not(:disabled) {
|
||||
background: #f3f4f6;
|
||||
border-color: #9ca3af;
|
||||
}
|
||||
|
||||
.nav-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-btn:disabled::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 0.5rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.nav-btn svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
flex: 0 0 auto;
|
||||
min-width: 100px;
|
||||
justify-content: center;
|
||||
background: #f3f4f6;
|
||||
border-color: #9ca3af;
|
||||
}
|
||||
|
||||
.nav-back:hover {
|
||||
background: #e5e7eb;
|
||||
}
|
||||
|
||||
.nav-prev,
|
||||
.nav-next {
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.nav-prev {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.nav-next {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.download-status {
|
||||
padding: 1rem 1.25rem;
|
||||
background: #f0f9ff;
|
||||
border: 1px solid #bae6fd;
|
||||
border-radius: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: #0369a1;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.artwork-content {
|
||||
@@ -1192,43 +639,5 @@ onUnmounted(() => {
|
||||
.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;
|
||||
}
|
||||
|
||||
.artwork-navigation {
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
order: -1;
|
||||
align-self: flex-start;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.nav-prev,
|
||||
.nav-next {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -45,10 +45,10 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRepositoryStore, type RepositoryStats, type RepositoryConfig, type Artist, type Artwork } from '@/stores/repository.ts'
|
||||
import RepositoryStatsComponent from './repository/RepositoryStats.vue'
|
||||
import RepositoryConfigComponent from './repository/RepositoryConfig.vue'
|
||||
import RepositoryBrowse from './repository/RepositoryBrowse.vue'
|
||||
import ArtworkModal from './repository/ArtworkModal.vue'
|
||||
import RepositoryStatsComponent from '@/components/repository/RepositoryStats.vue'
|
||||
import RepositoryConfigComponent from '@/components/repository/RepositoryConfig.vue'
|
||||
import RepositoryBrowse from '@/components/repository/RepositoryBrowse.vue'
|
||||
import ArtworkModal from '@/components/repository/ArtworkModal.vue'
|
||||
|
||||
const repositoryStore = useRepositoryStore()
|
||||
|
||||
|
||||
@@ -432,6 +432,42 @@ const handleSearchModeChange = (mode: 'keyword' | 'tags' | 'artwork' | 'artist')
|
||||
router.push({ query });
|
||||
};
|
||||
|
||||
const handleSingleTagSearch = async () => {
|
||||
if (searchTags.value.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
offset.value = 0;
|
||||
hasSearched.value = true;
|
||||
|
||||
const params: SearchParams = {
|
||||
tags: searchTags.value,
|
||||
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 handleTagSearch = async () => {
|
||||
if (searchTags.value.length === 0) {
|
||||
return;
|
||||
@@ -530,16 +566,21 @@ watch(() => route.query, () => {
|
||||
}
|
||||
// 保存到sessionStorage
|
||||
sessionStorage.setItem('currentSearchTags', JSON.stringify(searchTags.value));
|
||||
|
||||
// 如果有多个标签，自动执行搜索
|
||||
if (searchTags.value.length > 0) {
|
||||
handleTagSearch();
|
||||
}
|
||||
} else if (urlTag) {
|
||||
// 处理单个标签
|
||||
searchTags.value = [urlTag];
|
||||
// 清除sessionStorage中的多标签选择
|
||||
sessionStorage.removeItem('currentSearchTags');
|
||||
}
|
||||
|
||||
// 如果有标签，自动执行搜索
|
||||
// 对于单个标签，直接执行搜索而不更新URL
|
||||
if (searchTags.value.length > 0) {
|
||||
handleTagSearch();
|
||||
handleSingleTagSearch();
|
||||
}
|
||||
}
|
||||
} else if (urlMode === 'keyword' && urlKeyword) {
|
||||
// 如果是关键词搜索模式且有关键词，自动执行搜索
|
||||
|
||||
Reference in New Issue
Block a user