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

ui/src/views/ArtworkView.vue

@@ -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>