文件移动和部分前端ui拆分重构
This commit is contained in:
@@ -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>
|
||||
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<div v-if="artwork" class="modal-overlay" @click="closeModal">
|
||||
<div class="modal-content" @click.stop>
|
||||
<div class="modal-header">
|
||||
<h3>{{ artwork.title }}</h3>
|
||||
<button @click="closeModal" class="modal-close">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="artwork-details">
|
||||
<p><strong>作者:</strong> {{ artwork.artist }}</p>
|
||||
<p><strong>作品ID:</strong> {{ artwork.id }}</p>
|
||||
<p><strong>文件大小:</strong> {{ formatFileSize(artwork.size) }}</p>
|
||||
<p><strong>文件数量:</strong> {{ artwork.files.length }}</p>
|
||||
</div>
|
||||
<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 class="file-info">
|
||||
<p>{{ file.name }}</p>
|
||||
<p>{{ formatFileSize(file.size) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button @click="deleteArtwork" class="btn btn-danger">
|
||||
删除作品
|
||||
</button>
|
||||
<button @click="closeModal" class="btn btn-secondary">
|
||||
关闭
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Artwork } from '@/stores/repository.ts'
|
||||
|
||||
interface Props {
|
||||
artwork: Artwork | null
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'close'): void
|
||||
(e: 'delete-artwork', artworkId: string): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// 关闭模态框
|
||||
const closeModal = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
// 删除作品
|
||||
const deleteArtwork = () => {
|
||||
if (props.artwork) {
|
||||
emit('delete-artwork', props.artwork.id)
|
||||
}
|
||||
}
|
||||
|
||||
import { formatFileSize, getPreviewUrl } from '@/utils/formatters'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: white;
|
||||
border-radius: 0.5rem;
|
||||
max-width: 800px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.artwork-details {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.artwork-details p {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.files-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 0.375rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.file-preview {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.file-info p {
|
||||
margin: 0.25rem 0;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 1.5rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 0.375rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #6b7280;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #4b5563;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<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)">
|
||||
{{ 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" />
|
||||
|
||||
<!-- 视图模式切换 -->
|
||||
<ViewModeToggle v-model="viewMode" @update:model-value="handleViewModeChange" />
|
||||
|
||||
<!-- 统计信息 -->
|
||||
<div class="browse-stats">
|
||||
<span>共找到 {{ totalItems }} 个项目</span>
|
||||
<span v-if="viewMode !== 'artists' && totalPages > 1">
|
||||
• 第 {{ startIndex + 1 }}-{{ endIndex }} 项
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 作者视图 -->
|
||||
<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" />
|
||||
|
||||
<!-- 画廊视图 -->
|
||||
<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" />
|
||||
|
||||
<!-- 图片查看器 -->
|
||||
<ImageViewer v-model:current-index="imageViewerIndex" :show="imageViewer.show" :artwork="imageViewer.artwork"
|
||||
@close="closeImageViewer" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted } from 'vue'
|
||||
import type { Artist, Artwork } from '@/stores/repository.ts'
|
||||
import SearchPanel from './components/SearchPanel.vue'
|
||||
import ViewModeToggle from './components/ViewModeToggle.vue'
|
||||
import ArtistsView from './components/ArtistsView.vue'
|
||||
import ArtworksView from './components/ArtworksView.vue'
|
||||
import GalleryView from './components/GalleryView.vue'
|
||||
import Pagination from './components/Pagination.vue'
|
||||
import ImageViewer from './components/ImageViewer.vue'
|
||||
|
||||
interface Props {
|
||||
artists: Artist[]
|
||||
artworks: Artwork[]
|
||||
currentPage: number
|
||||
pageSize: number
|
||||
totalItems: number
|
||||
viewMode: string
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:searchQuery', query: string): void
|
||||
(e: 'update:viewMode', mode: string): void
|
||||
(e: 'select-artist', artistName: string): void
|
||||
(e: 'view-artwork', artwork: Artwork): void
|
||||
(e: 'change-page', page: number, options?: { artist?: string }): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// 本地状态
|
||||
const searchQuery = ref('')
|
||||
const sortBy = ref('date')
|
||||
const filterBy = ref('all')
|
||||
const breadcrumb = ref<Array<{ name: string, type: string }>>([])
|
||||
const currentArtist = ref<string>('') // 添加当前查看的作者状态
|
||||
|
||||
// 图片查看器
|
||||
const imageViewer = ref({
|
||||
show: false,
|
||||
artwork: null as Artwork | null
|
||||
})
|
||||
const imageViewerIndex = ref(0)
|
||||
|
||||
// 计算属性
|
||||
const totalPages = computed(() => {
|
||||
if (props.viewMode === 'artists') {
|
||||
return Math.ceil(props.artists.length / props.pageSize)
|
||||
} else {
|
||||
return Math.ceil(props.totalItems / props.pageSize)
|
||||
}
|
||||
})
|
||||
|
||||
const startIndex = computed(() => (props.currentPage - 1) * props.pageSize)
|
||||
const endIndex = computed(() => {
|
||||
if (props.viewMode === 'artists') {
|
||||
return Math.min(startIndex.value + props.pageSize, props.artists.length)
|
||||
} else {
|
||||
return Math.min(startIndex.value + props.artworks.length, props.totalItems)
|
||||
}
|
||||
})
|
||||
|
||||
// 方法
|
||||
const handleSearch = (query: string) => {
|
||||
searchQuery.value = query
|
||||
currentArtist.value = '' // 搜索时清除当前作者
|
||||
emit('update:searchQuery', query)
|
||||
}
|
||||
|
||||
const handleSort = (sort: string) => {
|
||||
sortBy.value = sort
|
||||
// 这里可以添加排序逻辑
|
||||
}
|
||||
|
||||
const handleFilter = (filter: string) => {
|
||||
filterBy.value = filter
|
||||
// 这里可以添加过滤逻辑
|
||||
}
|
||||
|
||||
const handleClear = () => {
|
||||
searchQuery.value = ''
|
||||
emit('update:searchQuery', '')
|
||||
}
|
||||
|
||||
const handleViewModeChange = (mode: string) => {
|
||||
emit('update:viewMode', mode)
|
||||
}
|
||||
|
||||
const handleSelectArtist = (artistName: string) => {
|
||||
emit('select-artist', artistName)
|
||||
}
|
||||
|
||||
const handleViewArtistWorks = (artistName: string) => {
|
||||
breadcrumb.value = [{ name: '作者', type: 'root' }, { name: artistName, type: 'artist' }]
|
||||
currentArtist.value = artistName // 设置当前查看的作者
|
||||
emit('select-artist', artistName)
|
||||
}
|
||||
|
||||
const handleViewArtwork = (artwork: Artwork) => {
|
||||
emit('view-artwork', artwork)
|
||||
}
|
||||
|
||||
const handleOpenImageViewer = (artwork: Artwork, index: number = 0) => {
|
||||
imageViewer.value = {
|
||||
show: true,
|
||||
artwork
|
||||
}
|
||||
imageViewerIndex.value = index
|
||||
}
|
||||
|
||||
const closeImageViewer = () => {
|
||||
imageViewer.value.show = false
|
||||
}
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
// 根据当前状态决定如何分页
|
||||
if (currentArtist.value) {
|
||||
// 当前在查看特定作者的作品
|
||||
emit('change-page', page, { artist: currentArtist.value })
|
||||
} else {
|
||||
// 全局搜索或浏览
|
||||
emit('change-page', page)
|
||||
}
|
||||
}
|
||||
|
||||
const navigateBreadcrumb = (index: number) => {
|
||||
breadcrumb.value = breadcrumb.value.slice(0, index + 1)
|
||||
// 根据面包屑导航回到相应页面
|
||||
}
|
||||
|
||||
// 监听外部查询变化
|
||||
watch(() => props.viewMode, (newMode) => {
|
||||
// 当视图模式改变时，重置面包屑和当前作者
|
||||
if (newMode === 'artists') {
|
||||
breadcrumb.value = []
|
||||
currentArtist.value = ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.browse-section {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
background: #f9fafb;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
color: #3b82f6;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.breadcrumb-item:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.separator {
|
||||
color: #6b7280;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.browse-stats {
|
||||
margin-bottom: 1rem;
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,360 @@
|
||||
<template>
|
||||
<div class="config-section">
|
||||
<h3>仓库配置</h3>
|
||||
<div class="config-form">
|
||||
<div class="form-group">
|
||||
<label>下载目录</label>
|
||||
<div class="path-input-group">
|
||||
<input v-model="config.downloadDir" type="text" placeholder="设置下载目录路径，例如: ./downloads 或 D:\downloads"
|
||||
class="form-input" />
|
||||
<button type="button" @click="testDownloadDir" class="btn btn-outline">
|
||||
测试
|
||||
</button>
|
||||
</div>
|
||||
<small class="form-help">
|
||||
<strong>路径示例：</strong><br>
|
||||
• 相对路径：<code>./downloads</code>（相对于项目根目录）<br>
|
||||
• 绝对路径：<code>D:\downloads</code> 或 <code>/home/user/downloads</code><br>
|
||||
• 当前目录：<code>.</code> 或 <code>./</code>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<!-- 自动迁移选项 -->
|
||||
<div class="form-group">
|
||||
<label class="checkbox-label">
|
||||
<input v-model="config.autoMigration" type="checkbox" class="form-checkbox" />
|
||||
<span>自动迁移旧下载文件</span>
|
||||
</label>
|
||||
<small class="form-help">
|
||||
启用后，保存配置时会自动将旧下载目录中的文件移动到新目录
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<!-- 迁移进度显示 -->
|
||||
<div v-if="migrating" class="migration-progress">
|
||||
<div class="progress-header">
|
||||
<h4>正在迁移文件...</h4>
|
||||
<span class="progress-text">{{ migrationProgress }}</span>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" :style="{ width: migrationPercent + '%' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 迁移结果 -->
|
||||
<div v-if="migrationResult" class="migration-result">
|
||||
<h4>迁移完成</h4>
|
||||
<div class="result-stats">
|
||||
<p>✅ 成功迁移: {{ migrationResult.totalMigrated }} 个作品</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.slice(0, 10)" :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>
|
||||
</div>
|
||||
<div v-if="migrationResult.log.length > 10" class="log-more">
|
||||
还有 {{ migrationResult.log.length - 10 }} 个文件...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>文件结构</label>
|
||||
<select v-model="config.fileStructure" class="form-select">
|
||||
<option value="artist/artwork">作者/作品</option>
|
||||
<option value="artwork">仅作品</option>
|
||||
<option value="flat">扁平结构</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>命名模式</label>
|
||||
<input v-model="config.namingPattern" type="text" placeholder="{artist_name}/{artwork_id}_{title}"
|
||||
class="form-input" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>最大文件大小 (MB)</label>
|
||||
<input v-model.number="config.maxFileSize" type="number" placeholder="0表示无限制" class="form-input" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>允许的文件扩展名</label>
|
||||
<input :value="config.allowedExtensions.join(',')"
|
||||
@input="(e) => config.allowedExtensions = (e.target as HTMLInputElement).value.split(',').map(ext => ext.trim()).filter(ext => ext)"
|
||||
type="text" placeholder=".jpg,.png,.gif,.webp" class="form-input" />
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button @click="saveConfig" class="btn btn-primary" :disabled="saving">
|
||||
{{ saving ? '保存中...' : '保存配置' }}
|
||||
</button>
|
||||
<button @click="resetConfig" class="btn btn-outline" :disabled="saving">
|
||||
重置为默认
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import type { RepositoryConfig } from '@/stores/repository.ts'
|
||||
|
||||
interface Props {
|
||||
config: RepositoryConfig
|
||||
migrating: boolean
|
||||
migrationProgress: string
|
||||
migrationPercent: number
|
||||
migrationResult: any
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:config', config: RepositoryConfig): void
|
||||
(e: 'save-config'): void
|
||||
(e: 'reset-config'): void
|
||||
(e: 'test-download-dir'): void
|
||||
(e: 'config-saved'): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const saving = ref(false)
|
||||
|
||||
// 测试下载目录
|
||||
const testDownloadDir = () => {
|
||||
emit('test-download-dir')
|
||||
}
|
||||
|
||||
// 保存配置
|
||||
const saveConfig = async () => {
|
||||
saving.value = true
|
||||
try {
|
||||
emit('save-config')
|
||||
// 保存成功后触发刷新事件
|
||||
emit('config-saved')
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 重置配置
|
||||
const resetConfig = () => {
|
||||
emit('reset-config')
|
||||
// 重置后也触发刷新事件
|
||||
emit('config-saved')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.config-section h3 {
|
||||
margin: 0 0 1.5rem 0;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-select {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.form-input:focus,
|
||||
.form-select:focus {
|
||||
outline: none;
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.path-input-group {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.path-input-group .form-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.path-input-group .btn {
|
||||
white-space: nowrap;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.form-help {
|
||||
color: #6b7280;
|
||||
font-size: 0.75rem;
|
||||
margin-top: 0.25rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.form-help strong {
|
||||
color: #374151;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-help code {
|
||||
background: #f3f4f6;
|
||||
padding: 0.125rem 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.7rem;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.form-checkbox {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
accent-color: #3b82f6;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 0.375rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #6b7280;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #4b5563;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: white;
|
||||
color: #3b82f6;
|
||||
border: 1px solid #3b82f6;
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.migration-progress {
|
||||
margin-top: 1.5rem;
|
||||
padding: 1rem;
|
||||
background: #f9fafb;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.progress-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.progress-header h4 {
|
||||
margin: 0;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 8px;
|
||||
background: #e5e7eb;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: #3b82f6;
|
||||
border-radius: 4px;
|
||||
transition: width 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.migration-result {
|
||||
margin-top: 2rem;
|
||||
padding: 1.5rem;
|
||||
background: #f9fafb;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.result-stats {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.migration-log {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.log-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.log-status {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.log-reason {
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.log-more {
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<div class="migrate-section">
|
||||
<h3>数据迁移</h3>
|
||||
<p class="migrate-description">
|
||||
将旧项目中的作品文件迁移到当前仓库中。系统会自动识别作品ID并避免重复迁移。
|
||||
</p>
|
||||
|
||||
<div class="migrate-form">
|
||||
<div class="form-group">
|
||||
<label>源目录路径</label>
|
||||
<div class="path-input-group">
|
||||
<input v-model="migrateSourceDir" type="text" placeholder="选择要迁移的目录路径，例如: D:\old-downloads"
|
||||
class="form-input" />
|
||||
<button type="button" @click="selectMigrateDir" class="btn btn-secondary">
|
||||
选择目录
|
||||
</button>
|
||||
<button type="button" @click="testMigrateDir" class="btn btn-outline">
|
||||
测试
|
||||
</button>
|
||||
</div>
|
||||
<small class="form-help">
|
||||
<strong>迁移说明：</strong><br>
|
||||
• 选择要迁移的源目录，系统会将整个目录结构移动到目标位置<br>
|
||||
• 如果目标位置已存在同名目录，将跳过迁移<br>
|
||||
• 迁移完成后，源文件会被移动到新位置（移动操作）
|
||||
</small>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button @click="startMigration" class="btn btn-primary" :disabled="migrating">
|
||||
{{ migrating ? '迁移中...' : '开始迁移' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 迁移结果 -->
|
||||
<div v-if="migrationResult" class="migration-result">
|
||||
<h4>迁移结果</h4>
|
||||
<div class="result-stats">
|
||||
<p>成功迁移: {{ migrationResult.totalMigrated }} 个作品</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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
interface Props {
|
||||
migrating: boolean
|
||||
migrationResult: any
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:migrateSourceDir', dir: string): void
|
||||
(e: 'select-migrate-dir'): void
|
||||
(e: 'test-migrate-dir'): void
|
||||
(e: 'start-migration'): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const migrateSourceDir = ref('')
|
||||
|
||||
// 选择迁移目录
|
||||
const selectMigrateDir = () => {
|
||||
emit('select-migrate-dir')
|
||||
}
|
||||
|
||||
// 测试迁移目录
|
||||
const testMigrateDir = () => {
|
||||
emit('test-migrate-dir')
|
||||
}
|
||||
|
||||
// 开始迁移
|
||||
const startMigration = () => {
|
||||
emit('start-migration')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.migrate-section h3 {
|
||||
margin: 0 0 1.5rem 0;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.migrate-description {
|
||||
color: #6b7280;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.path-input-group {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.path-input-group .form-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.path-input-group .btn {
|
||||
white-space: nowrap;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.form-help {
|
||||
color: #6b7280;
|
||||
font-size: 0.75rem;
|
||||
margin-top: 0.25rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.form-help strong {
|
||||
color: #374151;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 0.375rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #6b7280;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #4b5563;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: white;
|
||||
color: #3b82f6;
|
||||
border: 1px solid #3b82f6;
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.migration-result {
|
||||
margin-top: 2rem;
|
||||
padding: 1.5rem;
|
||||
background: #f9fafb;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.result-stats {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.migration-log {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.log-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.log-status {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.log-reason {
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<div class="stats-container">
|
||||
<div class="stats-header">
|
||||
<h3>仓库统计</h3>
|
||||
<div class="stats-actions">
|
||||
<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" />
|
||||
</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" />
|
||||
</svg>
|
||||
刷新
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-grid" v-if="stats">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">📁</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value">{{ stats.totalArtworks }}</div>
|
||||
<div class="stat-label">总作品数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">👤</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value">{{ stats.totalArtists }}</div>
|
||||
<div class="stat-label">总作者数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">💾</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value">{{ formatFileSize(stats.totalSize) }}</div>
|
||||
<div class="stat-label">总存储大小</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">💿</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value">{{ stats.diskUsage.usagePercent }}%</div>
|
||||
<div class="stat-label">磁盘使用率</div>
|
||||
<div v-if="stats.diskUsage.note" class="stat-note">{{ stats.diskUsage.note }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import type { RepositoryStats } from '@/stores/repository.ts'
|
||||
import { useRepositoryStore } from '@/stores/repository'
|
||||
|
||||
interface Props {
|
||||
stats: RepositoryStats | null
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<{
|
||||
refresh: []
|
||||
}>()
|
||||
|
||||
const loading = ref(false)
|
||||
const repositoryStore = useRepositoryStore()
|
||||
|
||||
const refreshStats = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
await repositoryStore.getStats(true) // 强制刷新
|
||||
emit('refresh')
|
||||
} catch (error) {
|
||||
console.error('刷新统计数据失败:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
import { formatFileSize } from '@/utils/formatters'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.stats-container {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.stats-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.stats-header h3 {
|
||||
margin: 0;
|
||||
color: #1f2937;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stats-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.refresh-icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.refresh-icon.spinning {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.stat-note {
|
||||
color: #9ca3af;
|
||||
font-size: 0.75rem;
|
||||
margin-top: 0.25rem;
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,124 @@
|
||||
<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 class="artist-avatar">
|
||||
<span class="avatar-text">{{ artist.name.charAt(0).toUpperCase() }}</span>
|
||||
</div>
|
||||
<div class="artist-info">
|
||||
<h4>{{ artist.name }}</h4>
|
||||
<p>{{ artist.artworkCount }} 个作品</p>
|
||||
<p>{{ formatFileSize(artist.totalSize) }}</p>
|
||||
</div>
|
||||
<div class="artist-actions">
|
||||
<button @click.stop="$emit('view-artist-works', artist.name)" class="action-btn">
|
||||
查看作品
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Artist } from '@/stores/repository.ts'
|
||||
import { formatFileSize } from '@/utils/formatters'
|
||||
|
||||
interface Props {
|
||||
artists: Artist[]
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'select-artist', artistName: string): void
|
||||
(e: 'view-artist-works', artistName: string): void
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
defineEmits<Emits>()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.artists-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.artist-card {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.artist-card:hover {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.artist-avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #3b82f6;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.artist-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.artist-info h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.artist-info p {
|
||||
margin: 0.25rem 0;
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.artist-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid #d1d5db;
|
||||
background: white;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background: #f3f4f6;
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.artists-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
}
|
||||
|
||||
.artist-card {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,178 @@
|
||||
<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 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)" />
|
||||
<div class="artwork-overlay">
|
||||
<button @click.stop="$emit('open-image-viewer', artwork, 0)" class="view-btn-overlay">
|
||||
👁️ 查看大图
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="artwork-info">
|
||||
<h4>{{ artwork.title }}</h4>
|
||||
<p class="artist-name" @click.stop="$emit('select-artist', artwork.artist)">
|
||||
👤 {{ artwork.artist }}
|
||||
</p>
|
||||
<p>{{ formatFileSize(artwork.size) }}</p>
|
||||
<p class="file-count">{{ artwork.files.length }} 个文件</p>
|
||||
</div>
|
||||
<div class="artwork-actions">
|
||||
<button @click.stop="$emit('view-artwork', artwork)" class="action-btn">
|
||||
详情
|
||||
</button>
|
||||
<button @click.stop="$emit('open-image-viewer', artwork, 0)" class="action-btn">
|
||||
预览
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Artwork } from '@/stores/repository.ts'
|
||||
import { formatFileSize, getPreviewUrl } from '@/utils/formatters'
|
||||
|
||||
interface Props {
|
||||
artworks: Artwork[]
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'view-artwork', artwork: Artwork): void
|
||||
(e: 'select-artist', artistName: string): void
|
||||
(e: 'open-image-viewer', artwork: Artwork, index: number): void
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
defineEmits<Emits>()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.artworks-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.artwork-card {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.artwork-card:hover {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.artwork-preview {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.artwork-card:hover .preview-image {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.artwork-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.artwork-card:hover .artwork-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.view-btn-overlay {
|
||||
background: white;
|
||||
color: #1f2937;
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.artwork-info {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.artwork-info h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 0.875rem;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.artist-name {
|
||||
color: #3b82f6 !important;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.artist-name:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.artwork-info p {
|
||||
margin: 0.25rem 0;
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.file-count {
|
||||
font-weight: 500;
|
||||
color: #6b5563 !important;
|
||||
}
|
||||
|
||||
.artwork-actions {
|
||||
padding: 0 1rem 1rem;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #d1d5db;
|
||||
background: white;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background: #f3f4f6;
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.artworks-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<div class="gallery-view">
|
||||
<div class="gallery-controls">
|
||||
<div class="zoom-controls">
|
||||
<button @click="zoomOut" class="zoom-btn" :disabled="zoomLevel <= 0.5">
|
||||
🔍-
|
||||
</button>
|
||||
<span class="zoom-level">{{ Math.round(zoomLevel * 100) }}%</span>
|
||||
<button @click="zoomIn" class="zoom-btn" :disabled="zoomLevel >= 3">
|
||||
🔍+
|
||||
</button>
|
||||
</div>
|
||||
<div class="view-controls">
|
||||
<button @click="setGridSize('small')" :class="['size-btn', { active: gridSize === 'small' }]">
|
||||
小
|
||||
</button>
|
||||
<button @click="setGridSize('medium')" :class="['size-btn', { active: gridSize === 'medium' }]">
|
||||
中
|
||||
</button>
|
||||
<button @click="setGridSize('large')" :class="['size-btn', { active: gridSize === 'large' }]">
|
||||
大
|
||||
</button>
|
||||
</div>
|
||||
</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 class="gallery-image-container">
|
||||
<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>
|
||||
<p>{{ artwork.artist }}</p>
|
||||
<div class="overlay-actions">
|
||||
<button @click.stop="$emit('open-image-viewer', artwork, 0)" class="overlay-btn">
|
||||
👁️ 查看大图
|
||||
</button>
|
||||
<button @click.stop="$emit('view-artwork', artwork)" class="overlay-btn">
|
||||
📋 详情
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import type { Artwork } from '@/stores/repository.ts'
|
||||
import { getPreviewUrl } from '@/utils/formatters'
|
||||
|
||||
interface Props {
|
||||
artworks: Artwork[]
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'view-artwork', artwork: Artwork): void
|
||||
(e: 'open-image-viewer', artwork: Artwork, index: number): void
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
defineEmits<Emits>()
|
||||
|
||||
// 画廊模式相关
|
||||
const zoomLevel = ref(1)
|
||||
const gridSize = ref('medium')
|
||||
|
||||
// 画廊模式图片缩放
|
||||
const zoomIn = () => {
|
||||
zoomLevel.value = Math.min(zoomLevel.value + 0.1, 3)
|
||||
}
|
||||
|
||||
const zoomOut = () => {
|
||||
zoomLevel.value = Math.max(zoomLevel.value - 0.1, 0.5)
|
||||
}
|
||||
|
||||
// 画廊模式网格大小
|
||||
const setGridSize = (size: 'small' | 'medium' | 'large') => {
|
||||
gridSize.value = size
|
||||
}
|
||||
|
||||
// 画廊模式图片加载和错误处理
|
||||
const onImageLoad = () => {
|
||||
// 图片加载成功后可以进行一些操作，例如调整布局
|
||||
}
|
||||
|
||||
const onImageError = (event: Event) => {
|
||||
console.error('图片加载失败:', (event.target as HTMLImageElement).src)
|
||||
// 可以显示一个错误提示或替换图片
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gallery-view {
|
||||
position: relative;
|
||||
margin-top: 2rem;
|
||||
padding: 1rem;
|
||||
background: #f9fafb;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.gallery-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: white;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.zoom-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.zoom-btn {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.zoom-btn:hover:not(:disabled) {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.zoom-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.zoom-level {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.view-controls {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.size-btn {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.size-btn:hover:not(:disabled) {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.size-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.gallery-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.grid-small .gallery-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
}
|
||||
|
||||
.grid-medium .gallery-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
}
|
||||
|
||||
.grid-large .gallery-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
position: relative;
|
||||
height: 250px;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.gallery-item:hover {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.gallery-image-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f9fafb;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gallery-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
transition: transform 0.3s ease;
|
||||
transform: scale(v-bind(zoomLevel));
|
||||
}
|
||||
|
||||
.gallery-item:hover .gallery-image {
|
||||
transform: scale(v-bind(zoomLevel) * 1.05);
|
||||
}
|
||||
|
||||
.gallery-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.gallery-item:hover .gallery-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.overlay-content {
|
||||
text-align: center;
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.overlay-content h4 {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.overlay-content p {
|
||||
margin: 0;
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.overlay-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.overlay-btn {
|
||||
background: white;
|
||||
color: #1f2937;
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.overlay-btn:hover {
|
||||
background: #f3f4f6;
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.gallery-controls {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.zoom-controls,
|
||||
.view-controls {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gallery-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,420 @@
|
||||
<template>
|
||||
<div v-if="show" class="image-viewer-overlay" @click="close">
|
||||
<div class="image-viewer-content" @click.stop>
|
||||
<div class="viewer-header">
|
||||
<h3>{{ artwork?.title }}</h3>
|
||||
<div class="viewer-controls">
|
||||
<div class="viewer-zoom-controls">
|
||||
<button @click="zoomOut" class="zoom-btn" :disabled="zoomLevel <= 0.5">
|
||||
🔍-
|
||||
</button>
|
||||
<span class="zoom-level">{{ Math.round(zoomLevel * 100) }}%</span>
|
||||
<button @click="zoomIn" class="zoom-btn" :disabled="zoomLevel >= 3">
|
||||
🔍+
|
||||
</button>
|
||||
<button @click="resetZoom" class="reset-btn">重置</button>
|
||||
</div>
|
||||
<button @click="close" class="close-btn">×</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="viewer-main">
|
||||
<button @click="previousImage" class="nav-btn prev-btn" :disabled="currentIndex <= 0">
|
||||
‹
|
||||
</button>
|
||||
|
||||
<div class="image-container">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="viewer-footer">
|
||||
<div class="image-info">
|
||||
<p>{{ currentImageName }}</p>
|
||||
<p>{{ formatFileSize(currentImageSize) }}</p>
|
||||
</div>
|
||||
<div class="image-counter">
|
||||
{{ currentIndex + 1 }} / {{ artwork?.files?.length || 0 }}
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, onMounted, onUnmounted } from 'vue'
|
||||
import type { Artwork } from '@/stores/repository.ts'
|
||||
import { formatFileSize, getPreviewUrl } from '@/utils/formatters'
|
||||
|
||||
interface Props {
|
||||
show: boolean
|
||||
artwork: Artwork | null
|
||||
currentIndex: number
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'close'): void
|
||||
(e: 'update:currentIndex', index: number): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// 缩放相关
|
||||
const zoomLevel = ref(1)
|
||||
|
||||
const currentImagePath = computed(() => {
|
||||
if (!props.artwork || !props.artwork.files[props.currentIndex]) {
|
||||
return ''
|
||||
}
|
||||
return props.artwork.files[props.currentIndex].path
|
||||
})
|
||||
|
||||
const currentImageName = computed(() => {
|
||||
if (!props.artwork || !props.artwork.files[props.currentIndex]) {
|
||||
return ''
|
||||
}
|
||||
return props.artwork.files[props.currentIndex].name
|
||||
})
|
||||
|
||||
const currentImageSize = computed(() => {
|
||||
if (!props.artwork || !props.artwork.files[props.currentIndex]) {
|
||||
return 0
|
||||
}
|
||||
return props.artwork.files[props.currentIndex].size
|
||||
})
|
||||
|
||||
const close = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
const previousImage = () => {
|
||||
if (props.currentIndex > 0) {
|
||||
emit('update:currentIndex', props.currentIndex - 1)
|
||||
}
|
||||
}
|
||||
|
||||
const nextImage = () => {
|
||||
if (props.artwork && props.currentIndex < props.artwork.files.length - 1) {
|
||||
emit('update:currentIndex', props.currentIndex + 1)
|
||||
}
|
||||
}
|
||||
|
||||
const goToImage = (index: number) => {
|
||||
emit('update:currentIndex', index)
|
||||
}
|
||||
|
||||
// 缩放控制
|
||||
const zoomIn = () => {
|
||||
zoomLevel.value = Math.min(zoomLevel.value + 0.1, 3)
|
||||
}
|
||||
|
||||
const zoomOut = () => {
|
||||
zoomLevel.value = Math.max(zoomLevel.value - 0.1, 0.5)
|
||||
}
|
||||
|
||||
const resetZoom = () => {
|
||||
zoomLevel.value = 1
|
||||
}
|
||||
|
||||
// 键盘快捷键支持
|
||||
const handleKeydown = (event: KeyboardEvent) => {
|
||||
if (props.show) {
|
||||
switch (event.key) {
|
||||
case 'Escape':
|
||||
close()
|
||||
break
|
||||
case 'ArrowLeft':
|
||||
previousImage()
|
||||
break
|
||||
case 'ArrowRight':
|
||||
nextImage()
|
||||
break
|
||||
case '=':
|
||||
case '+':
|
||||
event.preventDefault()
|
||||
zoomIn()
|
||||
break
|
||||
case '-':
|
||||
event.preventDefault()
|
||||
zoomOut()
|
||||
break
|
||||
case '0':
|
||||
event.preventDefault()
|
||||
resetZoom()
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 监听键盘事件
|
||||
onMounted(() => {
|
||||
document.addEventListener('keydown', handleKeydown)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('keydown', handleKeydown)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.image-viewer-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.image-viewer-content {
|
||||
background: white;
|
||||
border-radius: 0.5rem;
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.viewer-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.viewer-header h3 {
|
||||
margin: 0;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.viewer-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.viewer-zoom-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: #6b7280;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
background: #6b7280;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.reset-btn:hover {
|
||||
background: #4b5563;
|
||||
}
|
||||
|
||||
.zoom-btn {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.zoom-btn:hover:not(:disabled) {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.zoom-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.zoom-level {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.viewer-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
flex: 1;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
border: none;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nav-btn:hover:not(:disabled) {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.nav-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-height: 70vh;
|
||||
overflow: auto;
|
||||
background: #f9fafb;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.viewer-image {
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
object-fit: contain;
|
||||
transition: transform 0.2s ease;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.viewer-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.image-info p {
|
||||
margin: 0.25rem 0;
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.image-counter {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.thumbnail-strip {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
background: #f9fafb;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.thumbnail.active {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.thumbnail:hover {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.thumbnail-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.image-viewer-content {
|
||||
width: 95%;
|
||||
max-height: 95vh;
|
||||
}
|
||||
|
||||
.viewer-header {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.viewer-controls {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.viewer-zoom-controls {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.viewer-main {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.thumbnail-strip {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
width: 60px;
|
||||
height: 45px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div class="pagination" v-if="totalPages > 1">
|
||||
<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>
|
||||
|
||||
<div class="page-numbers">
|
||||
<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>
|
||||
<button @click="$emit('change-page', totalPages)" :disabled="currentPage >= totalPages" class="page-btn">
|
||||
末页
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
interface Props {
|
||||
currentPage: number
|
||||
totalPages: number
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'change-page', page: number): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
defineEmits<Emits>()
|
||||
|
||||
const visiblePages = computed(() => {
|
||||
const pages = []
|
||||
const maxVisible = 5
|
||||
let start = Math.max(1, props.currentPage - Math.floor(maxVisible / 2))
|
||||
let end = Math.min(props.totalPages, start + maxVisible - 1)
|
||||
|
||||
if (end - start + 1 < maxVisible) {
|
||||
start = Math.max(1, end - maxVisible + 1)
|
||||
}
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
pages.push(i)
|
||||
}
|
||||
|
||||
return pages
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
background: white;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.page-btn:hover:not(:disabled) {
|
||||
background: #f3f4f6;
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.page-btn.active {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.page-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.page-numbers {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.pagination {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.page-numbers {
|
||||
order: 3;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="search-panel">
|
||||
<div class="search-filters">
|
||||
<div class="search-box">
|
||||
<input v-model="searchQuery" type="text" placeholder="搜索作品标题、作者名称..." class="search-input"
|
||||
@input="debounceSearch" />
|
||||
<button @click="clearSearch" class="clear-btn" v-if="searchQuery">
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="filter-controls">
|
||||
<select v-model="sortBy" @change="handleSortChange" class="filter-select">
|
||||
<option value="date">按日期排序</option>
|
||||
<option value="name">按名称排序</option>
|
||||
<option value="size">按大小排序</option>
|
||||
</select>
|
||||
|
||||
<select v-model="filterBy" @change="handleFilterChange" class="filter-select">
|
||||
<option value="all">全部</option>
|
||||
<option value="images">仅图片</option>
|
||||
<option value="videos">仅视频</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
interface Props {
|
||||
initialQuery?: string
|
||||
initialSort?: string
|
||||
initialFilter?: string
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'search', query: string): void
|
||||
(e: 'sort', sortBy: string): void
|
||||
(e: 'filter', filterBy: string): void
|
||||
(e: 'clear'): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
initialQuery: '',
|
||||
initialSort: 'date',
|
||||
initialFilter: 'all'
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// 响应式数据
|
||||
const searchQuery = ref(props.initialQuery)
|
||||
const sortBy = ref(props.initialSort)
|
||||
const filterBy = ref(props.initialFilter)
|
||||
|
||||
// 防抖搜索
|
||||
let searchTimeout: number
|
||||
const debounceSearch = () => {
|
||||
clearTimeout(searchTimeout)
|
||||
searchTimeout = setTimeout(() => {
|
||||
emit('search', searchQuery.value)
|
||||
}, 300)
|
||||
}
|
||||
|
||||
const clearSearch = () => {
|
||||
searchQuery.value = ''
|
||||
emit('clear')
|
||||
}
|
||||
|
||||
const handleSortChange = () => {
|
||||
emit('sort', sortBy.value)
|
||||
}
|
||||
|
||||
const handleFilterChange = () => {
|
||||
emit('filter', filterBy.value)
|
||||
}
|
||||
|
||||
// 监听外部查询变化
|
||||
watch(() => props.initialQuery, (newQuery) => {
|
||||
searchQuery.value = newQuery
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.search-panel {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.search-filters {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem 2.5rem 0.75rem 1rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
color: #6b7280;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.clear-btn:hover {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.filter-controls {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
background: white;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.search-filters {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.filter-controls {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div class="view-toggle">
|
||||
<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')">
|
||||
<span class="btn-icon">🖼️</span>
|
||||
所有作品
|
||||
</button>
|
||||
<button class="view-btn" :class="{ active: modelValue === 'gallery' }"
|
||||
@click="$emit('update:modelValue', 'gallery')">
|
||||
<span class="btn-icon">🎨</span>
|
||||
画廊模式
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
modelValue: string
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value: string): void
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
defineEmits<Emits>()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.view-toggle {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid #d1d5db;
|
||||
background: white;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.view-btn.active {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.view-toggle {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user