From 74bdb76dcd9b1594d39617a854a0f0d06d8bde53 Mon Sep 17 00:00:00 2001 From: kjqwer <2990346238@qq.com> Date: Tue, 9 Sep 2025 13:30:34 +0800 Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E5=A2=9E=E5=8A=A0=E5=8E=9F?= =?UTF-8?q?=E6=96=87=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/artwork/ArtworkInfoPanel.vue | 115 +++++++++++++++++- ui/src/types/index.ts | 1 + ui/src/views/ArtworkView.vue | 22 +++- 3 files changed, 136 insertions(+), 2 deletions(-) diff --git a/ui/src/components/artwork/ArtworkInfoPanel.vue b/ui/src/components/artwork/ArtworkInfoPanel.vue index e197c1a..6c00be3 100644 --- a/ui/src/components/artwork/ArtworkInfoPanel.vue +++ b/ui/src/components/artwork/ArtworkInfoPanel.vue @@ -115,6 +115,19 @@
+ +
+
+

原文

+ +
+
+
+
+
@@ -162,9 +175,12 @@ interface Props { canNavigateNext: boolean; selectedTags: string[]; showRecommendations: boolean; + showCaption?: boolean; } -const props = defineProps(); +const props = withDefaults(defineProps(), { + showCaption: false +}); const emit = defineEmits<{ download: []; @@ -176,6 +192,7 @@ const emit = defineEmits<{ navigateNext: []; tagClick: [event: MouseEvent, tagName: string]; toggleRecommendations: [checked: boolean]; + toggleCaption: [checked: boolean]; }>(); // 使用统一的图片代理函数 @@ -220,6 +237,12 @@ const handleToggleChange = (event: Event) => { const target = event.target as HTMLInputElement; emit('toggleRecommendations', target.checked); }; + +// 处理 Caption 开关切换 +const handleCaptionToggleChange = (event: Event) => { + const target = event.target as HTMLInputElement; + emit('toggleCaption', target.checked); +}; \ No newline at end of file diff --git a/ui/src/types/index.ts b/ui/src/types/index.ts index 61cd13c..fd1fa33 100644 --- a/ui/src/types/index.ts +++ b/ui/src/types/index.ts @@ -34,6 +34,7 @@ export interface Artwork { id: number; title: string; description: string; + caption: string; user: User; image_urls: { square_medium: string; diff --git a/ui/src/views/ArtworkView.vue b/ui/src/views/ArtworkView.vue index a20c19a..cd14907 100644 --- a/ui/src/views/ArtworkView.vue +++ b/ui/src/views/ArtworkView.vue @@ -26,9 +26,10 @@ :current-task="currentTask" :loading="loading" :show-navigation="showNavigation" :previous-artwork="previousArtwork" :next-artwork="nextArtwork" :canNavigatePrevious="canNavigateToPrevious" :canNavigateNext="canNavigateToNext" :selected-tags="selectedTags" :show-recommendations="showRecommendations" + :show-caption="showCaption" @download="handleDownload" @bookmark="handleBookmark" @go-back="goBackToArtist" @navigate-previous="navigateToPrevious" @navigate-next="navigateToNext" @tag-click="handleTagClick" - @toggle-recommendations="showRecommendations = $event" /> + @toggle-recommendations="showRecommendations = $event" @toggle-caption="showCaption = $event" />
@@ -94,6 +95,9 @@ const isLoadingPrevious = ref(false); // 是否正在加载上一页 // 推荐作品开关状态 const showRecommendations = ref(true); +// Caption 显示开关状态 +const showCaption = ref(false); + // 初始化推荐开关状态（从localStorage读取） const initializeRecommendationsState = () => { const saved = localStorage.getItem('artwork-show-recommendations'); @@ -102,11 +106,24 @@ const initializeRecommendationsState = () => { } }; +// 初始化 Caption 开关状态（从localStorage读取） +const initializeCaptionState = () => { + const saved = localStorage.getItem('artwork-show-caption'); + if (saved !== null) { + showCaption.value = JSON.parse(saved); + } +}; + // 监听推荐开关状态变化并保存到localStorage watch(showRecommendations, (newValue) => { localStorage.setItem('artwork-show-recommendations', JSON.stringify(newValue)); }); +// 监听 Caption 开关状态变化并保存到localStorage +watch(showCaption, (newValue) => { + localStorage.setItem('artwork-show-caption', JSON.stringify(newValue)); +}); + // 导航相关计算属性 const showNavigation = computed(() => { return !!(route.query.artistId && route.query.artworkType); @@ -738,6 +755,9 @@ onMounted(() => { // 初始化推荐开关状态 initializeRecommendationsState(); + + // 初始化 Caption 开关状态 + initializeCaptionState(); }); // 组件卸载时移除事件监听