文件迁移配置优化,在浏览界面增加识别已经下载过的作品

This commit is contained in:
2025-08-21 15:58:43 +08:00
parent 84b712246d
commit c6783febc1
10 changed files with 1031 additions and 164 deletions
+67 -1
View File
@@ -49,12 +49,21 @@
<h1 class="artwork-title">{{ artwork.title }}</h1>
<div class="artwork-actions">
<button @click="handleDownload" class="btn btn-primary" :disabled="downloading">
{{ downloading ? '下载中...' : '下载' }}
{{ downloading ? '下载中...' : (isDownloaded ? '重新下载' : '下载') }}
</button>
<button @click="handleBookmark" class="btn btn-secondary">
{{ artwork.is_bookmarked ? '取消收藏' : '收藏' }}
</button>
</div>
<!-- 下载状态提示 -->
<div v-if="isDownloaded" 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>
</div>
<!-- 作者信息 -->
@@ -162,6 +171,7 @@ import { useAuthStore } from '@/stores/auth';
import artworkService from '@/services/artwork';
import artistService from '@/services/artist';
import downloadService from '@/services/download';
import { useRepositoryStore } from '@/stores/repository';
import type { Artwork } from '@/types';
import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
import ErrorMessage from '@/components/common/ErrorMessage.vue';
@@ -169,6 +179,7 @@ import ErrorMessage from '@/components/common/ErrorMessage.vue';
const route = useRoute();
const router = useRouter();
const authStore = useAuthStore();
const repositoryStore = useRepositoryStore();
// 状态
const artwork = ref<Artwork | null>(null);
@@ -178,6 +189,8 @@ const currentPage = ref(0);
const imageLoaded = ref(false);
const imageError = ref(false);
const downloading = ref(false);
const isDownloaded = ref(false);
const checkingDownloadStatus = ref(false);
// 导航相关状态
const artistArtworks = ref<Artwork[]>([]);
@@ -236,6 +249,8 @@ const fetchArtworkDetail = async () => {
if (response.success && response.data) {
artwork.value = response.data;
// 检查下载状态
await checkDownloadStatus(artworkId);
} else {
throw new Error(response.error || '获取作品详情失败');
}
@@ -247,6 +262,27 @@ const fetchArtworkDetail = async () => {
}
};
// 检查下载状态
const checkDownloadStatus = async (artworkId: number) => {
try {
checkingDownloadStatus.value = true;
const response = await repositoryStore.checkArtworkDownloaded(artworkId);
console.log('下载状态检查响应:', response);
// repository store的apiCall返回的是data.data,所以response直接是数据对象
if (response && typeof response === 'object') {
isDownloaded.value = response.is_downloaded || false;
console.log('作品下载状态:', isDownloaded.value);
}
} catch (err) {
console.error('检查下载状态失败:', err);
isDownloaded.value = false;
} finally {
checkingDownloadStatus.value = false;
}
};
// 下载作品
const handleDownload = async () => {
if (!artwork.value) return;
@@ -258,6 +294,10 @@ const handleDownload = async () => {
if (response.success) {
// 可以显示下载成功提示
console.log('下载任务已创建:', response.data);
// 下载完成后重新检查下载状态
setTimeout(() => {
checkDownloadStatus(artwork.value!.id);
}, 2000); // 等待2秒让下载完成
} else {
throw new Error(response.error || '下载失败');
}
@@ -723,6 +763,32 @@ onUnmounted(() => {
justify-content: flex-end;
}
.download-status {
margin-top: 1rem;
padding: 0.75rem 1rem;
background: #f0f9ff;
border: 1px solid #bae6fd;
border-radius: 0.5rem;
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 {
grid-template-columns: 1fr;