kjqwdw/pixiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

文件移动和部分前端ui拆分重构

Browse Source
This commit is contained in:
kjqwer
2025-08-28 11:27:52 +08:00
parent dd16cfe7d0
commit 514a2ce1a1
19 changed files with 884 additions and 858 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/services/download.js
+1 -1
View File
@@ -345,7 +345,7 @@ class DownloadService {
}
// 有信息文件、有图片文件且数量匹配，认为已下载
console.log(`作品 ${artworkId} 已完整下载，有信息文件和 ${imageFiles.length}/${expectedImageCount} 个图片文件`);
// console.log(`作品 ${artworkId} 已完整下载，有信息文件和 ${imageFiles.length}/${expectedImageCount} 个图片文件`);
return true;
}
}
backend/services/repository.js
+1 -1
View File
@@ -491,7 +491,7 @@ class RepositoryService {
}
// 有信息文件、有图片文件且数量匹配，认为已下载
console.log(`作品 ${artworkId} 已完整下载: ${files.length}/${expectedImageCount} 个图片文件`)
// console.log(`作品 ${artworkId} 已完整下载: ${files.length}/${expectedImageCount} 个图片文件`)
return true
}
}
ui/src/components/artwork/ArtworkGallery.vue
+184
View File
@@ -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>
ui/src/components/artwork/ArtworkInfoPanel.vue
+518
View File
@@ -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>
ui/src/views/repository/ArtworkModal.vue → ui/src/components/repository/ArtworkModal.vue
+3 -11
View File
@@ -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>
@@ -187,4 +179,4 @@ import { formatFileSize, getPreviewUrl } from '@/utils/formatters'
.btn-secondary:hover {
background: #4b5563;
}
</style>
</style>
ui/src/views/repository/RepositoryBrowse.vue → ui/src/components/repository/RepositoryBrowse.vue
+15 -51
View File
@@ -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>('') // 添加当前查看的作者状态
// 图片查看器
@@ -256,4 +220,4 @@ watch(() => props.viewMode, (newMode) => {
color: #6b7280;
font-size: 0.875rem;
}
</style>
</style>
ui/src/views/repository/RepositoryConfig.vue → ui/src/components/repository/RepositoryConfig.vue
View File
ui/src/views/repository/RepositoryMigration.vue → ui/src/components/repository/RepositoryMigration.vue
+7 -20
View File
@@ -4,17 +4,13 @@
<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"
/>
<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>
@@ -241,4 +228,4 @@ const startMigration = () => {
color: #6b7280;
font-size: 0.875rem;
}
</style>
</style>
ui/src/views/repository/RepositoryStats.vue → ui/src/components/repository/RepositoryStats.vue
+8 -10
View File
@@ -3,23 +3,20 @@
<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>
</div>
</div>
<div class="stats-grid" v-if="stats">
<div class="stat-card">
<div class="stat-icon">📁</div>
@@ -129,6 +126,7 @@ import { formatFileSize } from '@/utils/formatters'
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
@@ -175,4 +173,4 @@ import { formatFileSize } from '@/utils/formatters'
margin-top: 0.25rem;
font-style: italic;
}
</style>
</style>
ui/src/views/repository/components/ArtistsView.vue → ui/src/components/repository/components/ArtistsView.vue
+4 -8
View File
@@ -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>
@@ -119,10 +115,10 @@ defineEmits<Emits>()
.artists-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.artist-card {
flex-direction: column;
text-align: center;
}
}
</style>
</style>
ui/src/views/repository/components/ArtworksView.vue → ui/src/components/repository/components/ArtworksView.vue
+4 -13
View File
@@ -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">
👁️ 查看大图
@@ -184,4 +175,4 @@ defineEmits<Emits>()
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
}
</style>
</style>
ui/src/views/repository/components/GalleryView.vue → ui/src/components/repository/components/GalleryView.vue
+8 -17
View File
@@ -22,22 +22,13 @@
</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 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>
@@ -301,14 +292,14 @@ const onImageError = (event: Event) => {
flex-direction: column;
gap: 1rem;
}
.zoom-controls,
.view-controls {
justify-content: center;
}
.gallery-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
}
</style>
</style>
ui/src/views/repository/components/ImageViewer.vue → ui/src/components/repository/components/ImageViewer.vue
+20 -31
View File
@@ -17,26 +17,23 @@
<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})` }"
/>
<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>
<div class="viewer-footer">
<div class="image-info">
<p>{{ currentImageName }}</p>
@@ -46,19 +43,11 @@
{{ 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 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>
@@ -392,40 +381,40 @@ onUnmounted(() => {
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>
</style>
ui/src/views/repository/components/Pagination.vue → ui/src/components/repository/components/Pagination.vue
+13 -33
View File
@@ -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>
@@ -63,15 +43,15 @@ const visiblePages = computed(() => {
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>
@@ -120,7 +100,7 @@ const visiblePages = computed(() => {
.pagination {
flex-wrap: wrap;
}
.page-numbers {
order: 3;
width: 100%;
@@ -128,4 +108,4 @@ const visiblePages = computed(() => {
margin-top: 0.5rem;
}
}
</style>
</style>
ui/src/views/repository/components/SearchPanel.vue → ui/src/components/repository/components/SearchPanel.vue
+8 -13
View File
@@ -2,25 +2,20 @@
<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>
</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>
@@ -148,17 +143,17 @@ watch(() => props.initialQuery, (newQuery) => {
flex-direction: column;
width: 100%;
}
.search-box {
max-width: none;
}
.filter-controls {
width: 100%;
}
.filter-select {
flex: 1;
}
}
</style>
</style>
ui/src/views/repository/components/ViewModeToggle.vue → ui/src/components/repository/components/ViewModeToggle.vue
+7 -16
View File
@@ -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>
@@ -76,4 +67,4 @@ defineEmits<Emits>()
justify-content: center;
}
}
</style>
</style>
ui/src/views/ArtworkView.vue
+34 -625
View File
@@ -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>
ui/src/views/RepositoryView.vue
+4 -4
View File
@@ -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()
ui/src/views/SearchView.vue
+45 -4
View File
@@ -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');
}
// 如果有标签，自动执行搜索
if (searchTags.value.length > 0) {
handleTagSearch();
// 对于单个标签，直接执行搜索而不更新URL
if (searchTags.value.length > 0) {
handleSingleTagSearch();
}
}
} else if (urlMode === 'keyword' && urlKeyword) {
// 如果是关键词搜索模式且有关键词，自动执行搜索