From 514a2ce1a18078c765ea7f6eda742632e904d7ff Mon Sep 17 00:00:00 2001
From: kjqwer <2990346238@qq.com>
Date: Thu, 28 Aug 2025 11:27:52 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E4=BB=B6=E7=A7=BB=E5=8A=A8=E5=92=8C?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=E5=89=8D=E7=AB=AFui=E6=8B=86=E5=88=86?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/services/download.js                  |   2 +-
 backend/services/repository.js                |   2 +-
 ui/src/components/artwork/ArtworkGallery.vue  | 184 +++++
 .../components/artwork/ArtworkInfoPanel.vue   | 518 ++++++++++++++
 .../repository/ArtworkModal.vue               |  14 +-
 .../repository/RepositoryBrowse.vue           |  66 +-
 .../repository/RepositoryConfig.vue           |   0
 .../repository/RepositoryMigration.vue        |  27 +-
 .../repository/RepositoryStats.vue            |  18 +-
 .../repository/components/ArtistsView.vue     |  12 +-
 .../repository/components/ArtworksView.vue    |  17 +-
 .../repository/components/GalleryView.vue     |  25 +-
 .../repository/components/ImageViewer.vue     |  51 +-
 .../repository/components/Pagination.vue      |  46 +-
 .../repository/components/SearchPanel.vue     |  21 +-
 .../repository/components/ViewModeToggle.vue  |  23 +-
 ui/src/views/ArtworkView.vue                  | 659 +-----------------
 ui/src/views/RepositoryView.vue               |   8 +-
 ui/src/views/SearchView.vue                   |  49 +-
 19 files changed, 884 insertions(+), 858 deletions(-)
 create mode 100644 ui/src/components/artwork/ArtworkGallery.vue
 create mode 100644 ui/src/components/artwork/ArtworkInfoPanel.vue
 rename ui/src/{views => components}/repository/ArtworkModal.vue (91%)
 rename ui/src/{views => components}/repository/RepositoryBrowse.vue (77%)
 rename ui/src/{views => components}/repository/RepositoryConfig.vue (100%)
 rename ui/src/{views => components}/repository/RepositoryMigration.vue (87%)
 rename ui/src/{views => components}/repository/RepositoryStats.vue (84%)
 rename ui/src/{views => components}/repository/components/ArtistsView.vue (93%)
 rename ui/src/{views => components}/repository/components/ArtworksView.vue (91%)
 rename ui/src/{views => components}/repository/components/GalleryView.vue (93%)
 rename ui/src/{views => components}/repository/components/ImageViewer.vue (91%)
 rename ui/src/{views => components}/repository/components/Pagination.vue (69%)
 rename ui/src/{views => components}/repository/components/SearchPanel.vue (92%)
 rename ui/src/{views => components}/repository/components/ViewModeToggle.vue (69%)

diff --git a/backend/services/download.js b/backend/services/download.js
index 7ea8dd3..eb3293d 100644
--- a/backend/services/download.js
+++ b/backend/services/download.js
@@ -345,7 +345,7 @@ class DownloadService {
             }
 
             // 有信息文件、有图片文件且数量匹配，认为已下载
-            console.log(`作品 ${artworkId} 已完整下载，有信息文件和 ${imageFiles.length}/${expectedImageCount} 个图片文件`);
+            // console.log(`作品 ${artworkId} 已完整下载，有信息文件和 ${imageFiles.length}/${expectedImageCount} 个图片文件`);
             return true;
           }
         }
diff --git a/backend/services/repository.js b/backend/services/repository.js
index ce9e70e..f4d7891 100644
--- a/backend/services/repository.js
+++ b/backend/services/repository.js
@@ -491,7 +491,7 @@ class RepositoryService {
             }
             
             // 有信息文件、有图片文件且数量匹配，认为已下载
-            console.log(`作品 ${artworkId} 已完整下载: ${files.length}/${expectedImageCount} 个图片文件`)
+            // console.log(`作品 ${artworkId} 已完整下载: ${files.length}/${expectedImageCount} 个图片文件`)
             return true
           }
         }
diff --git a/ui/src/components/artwork/ArtworkGallery.vue b/ui/src/components/artwork/ArtworkGallery.vue
new file mode 100644
index 0000000..a5247aa
--- /dev/null
+++ b/ui/src/components/artwork/ArtworkGallery.vue
@@ -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>
\ No newline at end of file
diff --git a/ui/src/components/artwork/ArtworkInfoPanel.vue b/ui/src/components/artwork/ArtworkInfoPanel.vue
new file mode 100644
index 0000000..5a061e3
--- /dev/null
+++ b/ui/src/components/artwork/ArtworkInfoPanel.vue
@@ -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>
\ No newline at end of file
diff --git a/ui/src/views/repository/ArtworkModal.vue b/ui/src/components/repository/ArtworkModal.vue
similarity index 91%
rename from ui/src/views/repository/ArtworkModal.vue
rename to ui/src/components/repository/ArtworkModal.vue
index 0521746..0bd2984 100644
--- a/ui/src/views/repository/ArtworkModal.vue
+++ b/ui/src/components/repository/ArtworkModal.vue
@@ -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> 
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/ui/src/views/repository/RepositoryBrowse.vue b/ui/src/components/repository/RepositoryBrowse.vue
similarity index 77%
rename from ui/src/views/repository/RepositoryBrowse.vue
rename to ui/src/components/repository/RepositoryBrowse.vue
index 1b73255..b425470 100644
--- a/ui/src/views/repository/RepositoryBrowse.vue
+++ b/ui/src/components/repository/RepositoryBrowse.vue
@@ -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> 
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/ui/src/views/repository/RepositoryConfig.vue b/ui/src/components/repository/RepositoryConfig.vue
similarity index 100%
rename from ui/src/views/repository/RepositoryConfig.vue
rename to ui/src/components/repository/RepositoryConfig.vue
diff --git a/ui/src/views/repository/RepositoryMigration.vue b/ui/src/components/repository/RepositoryMigration.vue
similarity index 87%
rename from ui/src/views/repository/RepositoryMigration.vue
rename to ui/src/components/repository/RepositoryMigration.vue
index a7384a7..478e390 100644
--- a/ui/src/views/repository/RepositoryMigration.vue
+++ b/ui/src/components/repository/RepositoryMigration.vue
@@ -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> 
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/ui/src/views/repository/RepositoryStats.vue b/ui/src/components/repository/RepositoryStats.vue
similarity index 84%
rename from ui/src/views/repository/RepositoryStats.vue
rename to ui/src/components/repository/RepositoryStats.vue
index f41a77b..eb6c0e0 100644
--- a/ui/src/views/repository/RepositoryStats.vue
+++ b/ui/src/components/repository/RepositoryStats.vue
@@ -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> 
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/ui/src/views/repository/components/ArtistsView.vue b/ui/src/components/repository/components/ArtistsView.vue
similarity index 93%
rename from ui/src/views/repository/components/ArtistsView.vue
rename to ui/src/components/repository/components/ArtistsView.vue
index ef24dcd..635f527 100644
--- a/ui/src/views/repository/components/ArtistsView.vue
+++ b/ui/src/components/repository/components/ArtistsView.vue
@@ -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> 
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/ui/src/views/repository/components/ArtworksView.vue b/ui/src/components/repository/components/ArtworksView.vue
similarity index 91%
rename from ui/src/views/repository/components/ArtworksView.vue
rename to ui/src/components/repository/components/ArtworksView.vue
index 414e3e2..8ed5916 100644
--- a/ui/src/views/repository/components/ArtworksView.vue
+++ b/ui/src/components/repository/components/ArtworksView.vue
@@ -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> 
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/ui/src/views/repository/components/GalleryView.vue b/ui/src/components/repository/components/GalleryView.vue
similarity index 93%
rename from ui/src/views/repository/components/GalleryView.vue
rename to ui/src/components/repository/components/GalleryView.vue
index f271859..6652359 100644
--- a/ui/src/views/repository/components/GalleryView.vue
+++ b/ui/src/components/repository/components/GalleryView.vue
@@ -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> 
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/ui/src/views/repository/components/ImageViewer.vue b/ui/src/components/repository/components/ImageViewer.vue
similarity index 91%
rename from ui/src/views/repository/components/ImageViewer.vue
rename to ui/src/components/repository/components/ImageViewer.vue
index 43867ce..30e892e 100644
--- a/ui/src/views/repository/components/ImageViewer.vue
+++ b/ui/src/components/repository/components/ImageViewer.vue
@@ -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> 
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/ui/src/views/repository/components/Pagination.vue b/ui/src/components/repository/components/Pagination.vue
similarity index 69%
rename from ui/src/views/repository/components/Pagination.vue
rename to ui/src/components/repository/components/Pagination.vue
index a08be81..8243fa3 100644
--- a/ui/src/views/repository/components/Pagination.vue
+++ b/ui/src/components/repository/components/Pagination.vue
@@ -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> 
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/ui/src/views/repository/components/SearchPanel.vue b/ui/src/components/repository/components/SearchPanel.vue
similarity index 92%
rename from ui/src/views/repository/components/SearchPanel.vue
rename to ui/src/components/repository/components/SearchPanel.vue
index ab4663c..15bcba1 100644
--- a/ui/src/views/repository/components/SearchPanel.vue
+++ b/ui/src/components/repository/components/SearchPanel.vue
@@ -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> 
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/ui/src/views/repository/components/ViewModeToggle.vue b/ui/src/components/repository/components/ViewModeToggle.vue
similarity index 69%
rename from ui/src/views/repository/components/ViewModeToggle.vue
rename to ui/src/components/repository/components/ViewModeToggle.vue
index 37ed3ed..c2e5663 100644
--- a/ui/src/views/repository/components/ViewModeToggle.vue
+++ b/ui/src/components/repository/components/ViewModeToggle.vue
@@ -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> 
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/ui/src/views/ArtworkView.vue b/ui/src/views/ArtworkView.vue
index efd19c4..3d48689 100644
--- a/ui/src/views/ArtworkView.vue
+++ b/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>
\ No newline at end of file
diff --git a/ui/src/views/RepositoryView.vue b/ui/src/views/RepositoryView.vue
index 871900d..eec5870 100644
--- a/ui/src/views/RepositoryView.vue
+++ b/ui/src/views/RepositoryView.vue
@@ -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()
 
diff --git a/ui/src/views/SearchView.vue b/ui/src/views/SearchView.vue
index 03c6d3b..cf0293a 100644
--- a/ui/src/views/SearchView.vue
+++ b/ui/src/views/SearchView.vue
@@ -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) {
     // 如果是关键词搜索模式且有关键词，自动执行搜索