修复画廊分页bug

backend/routes/repository.js

@@ -72,7 +72,7 @@ router.get('/artists', async (req, res) => {
 router.get('/artists/:artistName/artworks', async (req, res) => {
   try {
     const { artistName } = req.params
-    const { offset = 0, limit = 20 } = req.query
+    const { offset = 0, limit = 50 } = req.query
     const artworks = await repositoryService.getArtworksByArtist(
       artistName, 
       parseInt(offset), 
@@ -84,10 +84,21 @@ router.get('/artists/:artistName/artworks', async (req, res) => {
   }
 })
 
+// 获取所有作品列表
+router.get('/artworks', async (req, res) => {
+  try {
+    const { offset = 0, limit = 50 } = req.query
+    const results = await repositoryService.searchArtworks('', parseInt(offset), parseInt(limit))
+    res.json(ResponseUtil.success(results))
+  } catch (error) {
+    res.status(500).json(ResponseUtil.error(error.message))
+  }
+})
+
 // 搜索作品
 router.get('/search', async (req, res) => {
   try {
-    const { q, offset = 0, limit = 20 } = req.query
+    const { q, offset = 0, limit = 50 } = req.query
     if (!q) {
       return res.status(400).json(ResponseUtil.error('搜索关键词不能为空'))
     }

backend/services/repository.js

@@ -238,12 +238,12 @@ class RepositoryService {
     }
   }
 
-  // 按作者浏览作品
+  // 获取作者作品
-  async getArtworksByArtist(artistName, offset = 0, limit = 20) {
+  async getArtworksByArtist(artistName, offset = 0, limit = 50) {
     try {
       const stats = await this.scanRepository()
       const artistArtworks = stats.artworks.filter(artwork => 
-        artwork.artist === artistName
+        artwork.artist.toLowerCase() === artistName.toLowerCase()
       )
       
       return {
@@ -327,7 +327,7 @@ class RepositoryService {
   }
 
   // 搜索作品
-  async searchArtworks(query, offset = 0, limit = 20) {
+  async searchArtworks(query, offset = 0, limit = 50) {
     try {
       const stats = await this.scanRepository()
       const filtered = stats.artworks.filter(artwork =>

ui/src/stores/repository.ts

@@ -138,12 +138,17 @@ export const useRepositoryStore = defineStore('repository', () => {
   }
 
   // 获取作者作品
-  const getArtworksByArtist = async (artistName: string, offset = 0, limit = 20) => {
+  const getArtworksByArtist = async (artistName: string, offset = 0, limit = 50) => {
     return await apiCall(`/artists/${encodeURIComponent(artistName)}/artworks?offset=${offset}&limit=${limit}`)
   }
 
+  // 获取所有作品
+  const getAllArtworks = async (offset = 0, limit = 50) => {
+    return await apiCall(`/artworks?offset=${offset}&limit=${limit}`)
+  }
+
   // 搜索作品
-  const searchArtworks = async (query: string, offset = 0, limit = 20) => {
+  const searchArtworks = async (query: string, offset = 0, limit = 50) => {
     return await apiCall(`/search?q=${encodeURIComponent(query)}&offset=${offset}&limit=${limit}`)
   }
 
@@ -206,6 +211,7 @@ export const useRepositoryStore = defineStore('repository', () => {
     getStats,
     getArtists,
     getArtworksByArtist,
+    getAllArtworks,
     searchArtworks,
     getArtwork,
     deleteArtwork,

ui/src/views/RepositoryView.vue

@@ -50,6 +50,8 @@
           :artworks="artworks"
           :current-page="currentPage"
           :page-size="pageSize"
+          :total-items="totalItems"
+          :view-mode="viewMode"
           @update:search-query="handleSearchQuery"
           @update:view-mode="handleViewMode"
           @select-artist="selectArtist"
@@ -93,10 +95,13 @@ const config = ref<RepositoryConfig>({
 
 // 浏览相关
 const searchQuery = ref('')
+const viewMode = ref('artworks') // 默认显示作品模式
 const artists = ref<Artist[]>([])
 const artworks = ref<Artwork[]>([])
 const currentPage = ref(1)
-const pageSize = 20
+const pageSize = 50 // 增加每页显示数量
+const totalItems = ref(0) // 添加总数状态
+const currentArtist = ref<string>('') // 添加当前查看的作者状态
 
 // 迁移相关
 const migrateSourceDir = ref('')
@@ -113,7 +118,7 @@ onMounted(async () => {
   await loadStats()
   await loadConfig()
   await loadArtists()
-  await loadAllArtworks() // 添加加载所有作品
+  await loadAllArtworks(1) // 加载第一页
 })
 
 // 加载统计信息
@@ -228,11 +233,14 @@ const loadArtists = async () => {
 }
 
 // 加载所有作品
-const loadAllArtworks = async () => {
+const loadAllArtworks = async (page = 1, limit = pageSize) => {
   try {
-    // 使用搜索空字符串来获取所有作品
+    currentArtist.value = '' // 加载所有作品时清除当前作者
-    const result = await repositoryStore.searchArtworks('', 0, 1000)
+    const offset = (page - 1) * limit
+    const result = await repositoryStore.getAllArtworks(offset, limit)
     artworks.value = result.artworks
+    totalItems.value = result.total // 更新总数
+    currentPage.value = page
   } catch (error: any) {
     console.error('加载所有作品失败:', error)
   }
@@ -241,10 +249,19 @@ const loadAllArtworks = async () => {
 // 选择作者
 const selectArtist = async (artistName: string) => {
   try {
-    const result = await repositoryStore.getArtworksByArtist(artistName)
+    // 重置搜索和分页
+    searchQuery.value = ''
+    currentPage.value = 1
+    currentArtist.value = artistName // 设置当前查看的作者
+    
+    // 获取作者作品
+    const result = await repositoryStore.getArtworksByArtist(artistName, 0, pageSize)
     artworks.value = result.artworks
+    totalItems.value = result.total || result.artworks.length
+    
+    // 切换到作品视图
+    viewMode.value = 'artworks'
     activeTab.value = 'browse'
-    currentPage.value = 1 // 重置到第一页
   } catch (error: any) {
     console.error('加载作者作品失败:', error)
   }
@@ -253,32 +270,45 @@ const selectArtist = async (artistName: string) => {
 // 处理搜索查询
 const handleSearchQuery = async (query: string) => {
   searchQuery.value = query
+  currentArtist.value = '' // 搜索时清除当前作者
+  
+  // 重置分页
+  currentPage.value = 1
+  
   if (query.trim()) {
     try {
-      const result = await repositoryStore.searchArtworks(query)
+      // 搜索作品
+      const result = await repositoryStore.searchArtworks(query, 0, pageSize)
       artworks.value = result.artworks
+      totalItems.value = result.total
+      
+      // 切换到作品视图
+      viewMode.value = 'artworks'
       activeTab.value = 'browse'
-      currentPage.value = 1 // 重置到第一页
     } catch (error: any) {
       console.error('搜索失败:', error)
     }
   } else {
-    await loadAllArtworks() // 清空搜索时加载所有作品
+    // 清空搜索，加载所有作品
+    await loadAllArtworks(1)
   }
 }
 
 // 处理视图模式
 const handleViewMode = (mode: string) => {
+  viewMode.value = mode
+  
   // 根据视图模式加载相应数据
   if (mode === 'artists') {
     // 作者模式，确保作者数据已加载
+    currentArtist.value = '' // 切换到作者模式时清除当前作者
     if (artists.value.length === 0) {
       loadArtists()
     }
   } else if (mode === 'artworks' || mode === 'gallery') {
     // 作品模式，确保作品数据已加载
     if (artworks.value.length === 0) {
-      loadAllArtworks()
+      loadAllArtworks(1)
     }
   }
 }
@@ -305,16 +335,46 @@ const deleteArtwork = async (artworkId: string) => {
     closeArtworkModal()
     await loadStats()
     await loadArtists()
-    await loadAllArtworks() // 重新加载作品列表
+    await loadAllArtworks(currentPage.value) // 重新加载当前页
   } catch (error: any) {
     console.error('删除作品失败:', error)
     alert('删除作品失败: ' + error.message)
   }
 }
 
-// 分页
+// 分页处理
-const changePage = (page: number) => {
+const changePage = async (page: number, options?: { artist?: string }) => {
   currentPage.value = page
+  
+  // 如果传入了作者信息，使用作者特定的分页
+  if (options?.artist) {
+    currentArtist.value = options.artist
+  }
+  
+  if (searchQuery.value.trim()) {
+    // 如果有搜索查询，重新搜索
+    try {
+      const offset = (page - 1) * pageSize
+      const result = await repositoryStore.searchArtworks(searchQuery.value, offset, pageSize)
+      artworks.value = result.artworks
+      totalItems.value = result.total
+    } catch (error: any) {
+      console.error('搜索失败:', error)
+    }
+  } else if (currentArtist.value) {
+    // 如果当前在查看特定作者的作品
+    try {
+      const offset = (page - 1) * pageSize
+      const result = await repositoryStore.getArtworksByArtist(currentArtist.value, offset, pageSize)
+      artworks.value = result.artworks
+      totalItems.value = result.total || result.artworks.length
+    } catch (error: any) {
+      console.error('加载作者作品失败:', error)
+    }
+  } else {
+    // 否则加载指定页面的所有作品
+    await loadAllArtworks(page)
+  }
 }
 
 // 选择下载目录

ui/src/views/repository/components/ArtistsView.vue

@@ -0,0 +1,128 @@
+<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 class="artist-avatar">
+          <span class="avatar-text">{{ artist.name.charAt(0).toUpperCase() }}</span>
+        </div>
+        <div class="artist-info">
+          <h4>{{ artist.name }}</h4>
+          <p>{{ artist.artworkCount }} 个作品</p>
+          <p>{{ formatFileSize(artist.totalSize) }}</p>
+        </div>
+        <div class="artist-actions">
+          <button @click.stop="$emit('view-artist-works', artist.name)" class="action-btn">
+            查看作品
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Artist } from '@/stores/repository.ts'
+import { formatFileSize } from '@/utils/formatters'
+
+interface Props {
+  artists: Artist[]
+}
+
+interface Emits {
+  (e: 'select-artist', artistName: string): void
+  (e: 'view-artist-works', artistName: string): void
+}
+
+defineProps<Props>()
+defineEmits<Emits>()
+</script>
+
+<style scoped>
+.artists-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.artist-card {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.artist-card:hover {
+  border-color: #3b82f6;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.artist-avatar {
+  width: 60px;
+  height: 60px;
+  background: #3b82f6;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.artist-info {
+  flex: 1;
+}
+
+.artist-info h4 {
+  margin: 0 0 0.5rem 0;
+  color: #1f2937;
+}
+
+.artist-info p {
+  margin: 0.25rem 0;
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+.artist-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.action-btn {
+  padding: 0.5rem 1rem;
+  border: 1px solid #d1d5db;
+  background: white;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: all 0.2s;
+}
+
+.action-btn:hover {
+  background: #f3f4f6;
+  border-color: #3b82f6;
+}
+
+@media (max-width: 768px) {
+  .artists-grid {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  }
+  
+  .artist-card {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+</style> 

ui/src/views/repository/components/ArtworksView.vue

@@ -0,0 +1,187 @@
+<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 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)"
+          />
+          <div class="artwork-overlay">
+            <button @click.stop="$emit('open-image-viewer', artwork, 0)" class="view-btn-overlay">
+              👁️ 查看大图
+            </button>
+          </div>
+        </div>
+        <div class="artwork-info">
+          <h4>{{ artwork.title }}</h4>
+          <p class="artist-name" @click.stop="$emit('select-artist', artwork.artist)">
+            👤 {{ artwork.artist }}
+          </p>
+          <p>{{ formatFileSize(artwork.size) }}</p>
+          <p class="file-count">{{ artwork.files.length }} 个文件</p>
+        </div>
+        <div class="artwork-actions">
+          <button @click.stop="$emit('view-artwork', artwork)" class="action-btn">
+            详情
+          </button>
+          <button @click.stop="$emit('open-image-viewer', artwork, 0)" class="action-btn">
+            预览
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Artwork } from '@/stores/repository.ts'
+import { formatFileSize, getPreviewUrl } from '@/utils/formatters'
+
+interface Props {
+  artworks: Artwork[]
+}
+
+interface Emits {
+  (e: 'view-artwork', artwork: Artwork): void
+  (e: 'select-artist', artistName: string): void
+  (e: 'open-image-viewer', artwork: Artwork, index: number): void
+}
+
+defineProps<Props>()
+defineEmits<Emits>()
+</script>
+
+<style scoped>
+.artworks-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.artwork-card {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.artwork-card:hover {
+  border-color: #3b82f6;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.artwork-preview {
+  position: relative;
+  height: 200px;
+  overflow: hidden;
+}
+
+.preview-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.2s;
+}
+
+.artwork-card:hover .preview-image {
+  transform: scale(1.05);
+}
+
+.artwork-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.artwork-card:hover .artwork-overlay {
+  opacity: 1;
+}
+
+.view-btn-overlay {
+  background: white;
+  color: #1f2937;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+}
+
+.artwork-info {
+  padding: 1rem;
+}
+
+.artwork-info h4 {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.875rem;
+  color: #1f2937;
+}
+
+.artist-name {
+  color: #3b82f6 !important;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.artist-name:hover {
+  text-decoration: underline;
+}
+
+.artwork-info p {
+  margin: 0.25rem 0;
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+
+.file-count {
+  font-weight: 500;
+  color: #6b5563 !important;
+}
+
+.artwork-actions {
+  padding: 0 1rem 1rem;
+  display: flex;
+  gap: 0.5rem;
+}
+
+.action-btn {
+  flex: 1;
+  padding: 0.5rem;
+  border: 1px solid #d1d5db;
+  background: white;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  font-size: 0.75rem;
+  transition: all 0.2s;
+}
+
+.action-btn:hover {
+  background: #f3f4f6;
+  border-color: #3b82f6;
+}
+
+@media (max-width: 768px) {
+  .artworks-grid {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  }
+}
+</style> 

ui/src/views/repository/components/GalleryView.vue

@@ -0,0 +1,314 @@
+<template>
+  <div class="gallery-view">
+    <div class="gallery-controls">
+      <div class="zoom-controls">
+        <button @click="zoomOut" class="zoom-btn" :disabled="zoomLevel <= 0.5">
+          🔍-
+        </button>
+        <span class="zoom-level">{{ Math.round(zoomLevel * 100) }}%</span>
+        <button @click="zoomIn" class="zoom-btn" :disabled="zoomLevel >= 3">
+          🔍+
+        </button>
+      </div>
+      <div class="view-controls">
+        <button @click="setGridSize('small')" :class="['size-btn', { active: gridSize === 'small' }]">
+          小
+        </button>
+        <button @click="setGridSize('medium')" :class="['size-btn', { active: gridSize === 'medium' }]">
+          中
+        </button>
+        <button @click="setGridSize('large')" :class="['size-btn', { active: gridSize === 'large' }]">
+          大
+        </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 class="gallery-image-container">
+          <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>
+              <p>{{ artwork.artist }}</p>
+              <div class="overlay-actions">
+                <button @click.stop="$emit('open-image-viewer', artwork, 0)" class="overlay-btn">
+                  👁️ 查看大图
+                </button>
+                <button @click.stop="$emit('view-artwork', artwork)" class="overlay-btn">
+                  📋 详情
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { Artwork } from '@/stores/repository.ts'
+import { getPreviewUrl } from '@/utils/formatters'
+
+interface Props {
+  artworks: Artwork[]
+}
+
+interface Emits {
+  (e: 'view-artwork', artwork: Artwork): void
+  (e: 'open-image-viewer', artwork: Artwork, index: number): void
+}
+
+defineProps<Props>()
+defineEmits<Emits>()
+
+// 画廊模式相关
+const zoomLevel = ref(1)
+const gridSize = ref('medium')
+
+// 画廊模式图片缩放
+const zoomIn = () => {
+  zoomLevel.value = Math.min(zoomLevel.value + 0.1, 3)
+}
+
+const zoomOut = () => {
+  zoomLevel.value = Math.max(zoomLevel.value - 0.1, 0.5)
+}
+
+// 画廊模式网格大小
+const setGridSize = (size: 'small' | 'medium' | 'large') => {
+  gridSize.value = size
+}
+
+// 画廊模式图片加载和错误处理
+const onImageLoad = () => {
+  // 图片加载成功后可以进行一些操作，例如调整布局
+}
+
+const onImageError = (event: Event) => {
+  console.error('图片加载失败:', (event.target as HTMLImageElement).src)
+  // 可以显示一个错误提示或替换图片
+}
+</script>
+
+<style scoped>
+.gallery-view {
+  position: relative;
+  margin-top: 2rem;
+  padding: 1rem;
+  background: #f9fafb;
+  border-radius: 0.5rem;
+  border: 1px solid #e5e7eb;
+}
+
+.gallery-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  padding: 0.5rem 1rem;
+  background: white;
+  border-radius: 0.375rem;
+  border: 1px solid #e5e7eb;
+}
+
+.zoom-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.zoom-btn {
+  background: #3b82f6;
+  color: white;
+  border: none;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: all 0.2s;
+}
+
+.zoom-btn:hover:not(:disabled) {
+  background: #2563eb;
+}
+
+.zoom-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.zoom-level {
+  font-size: 0.875rem;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.view-controls {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.size-btn {
+  background: #3b82f6;
+  color: white;
+  border: none;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: all 0.2s;
+}
+
+.size-btn:hover:not(:disabled) {
+  background: #2563eb;
+}
+
+.size-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.gallery-grid {
+  display: grid;
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.grid-small .gallery-grid {
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+}
+
+.grid-medium .gallery-grid {
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+.grid-large .gallery-grid {
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+}
+
+.gallery-item {
+  position: relative;
+  height: 250px;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  cursor: pointer;
+  background: white;
+  border: 1px solid #e5e7eb;
+  transition: all 0.2s;
+}
+
+.gallery-item:hover {
+  border-color: #3b82f6;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.gallery-image-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f9fafb;
+  overflow: hidden;
+}
+
+.gallery-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transition: transform 0.3s ease;
+  transform: scale(v-bind(zoomLevel));
+}
+
+.gallery-item:hover .gallery-image {
+  transform: scale(v-bind(zoomLevel) * 1.05);
+}
+
+.gallery-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.gallery-item:hover .gallery-overlay {
+  opacity: 1;
+}
+
+.overlay-content {
+  text-align: center;
+  color: white;
+  padding: 1rem;
+}
+
+.overlay-content h4 {
+  margin: 0 0 0.25rem 0;
+  font-size: 0.875rem;
+}
+
+.overlay-content p {
+  margin: 0;
+  font-size: 0.75rem;
+  opacity: 0.8;
+}
+
+.overlay-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.overlay-btn {
+  background: white;
+  color: #1f2937;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  font-size: 0.75rem;
+  transition: all 0.2s;
+}
+
+.overlay-btn:hover {
+  background: #f3f4f6;
+  color: #3b82f6;
+}
+
+@media (max-width: 768px) {
+  .gallery-controls {
+    flex-direction: column;
+    gap: 1rem;
+  }
+  
+  .zoom-controls,
+  .view-controls {
+    justify-content: center;
+  }
+  
+  .gallery-grid {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  }
+}
+</style> 

ui/src/views/repository/components/ImageViewer.vue

@@ -0,0 +1,431 @@
+<template>
+  <div v-if="show" class="image-viewer-overlay" @click="close">
+    <div class="image-viewer-content" @click.stop>
+      <div class="viewer-header">
+        <h3>{{ artwork?.title }}</h3>
+        <div class="viewer-controls">
+          <div class="viewer-zoom-controls">
+            <button @click="zoomOut" class="zoom-btn" :disabled="zoomLevel <= 0.5">
+              🔍-
+            </button>
+            <span class="zoom-level">{{ Math.round(zoomLevel * 100) }}%</span>
+            <button @click="zoomIn" class="zoom-btn" :disabled="zoomLevel >= 3">
+              🔍+
+            </button>
+            <button @click="resetZoom" class="reset-btn">重置</button>
+          </div>
+          <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})` }"
+          />
+        </div>
+        
+        <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>
+          <p>{{ formatFileSize(currentImageSize) }}</p>
+        </div>
+        <div class="image-counter">
+          {{ 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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted, onUnmounted } from 'vue'
+import type { Artwork } from '@/stores/repository.ts'
+import { formatFileSize, getPreviewUrl } from '@/utils/formatters'
+
+interface Props {
+  show: boolean
+  artwork: Artwork | null
+  currentIndex: number
+}
+
+interface Emits {
+  (e: 'close'): void
+  (e: 'update:currentIndex', index: number): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+// 缩放相关
+const zoomLevel = ref(1)
+
+const currentImagePath = computed(() => {
+  if (!props.artwork || !props.artwork.files[props.currentIndex]) {
+    return ''
+  }
+  return props.artwork.files[props.currentIndex].path
+})
+
+const currentImageName = computed(() => {
+  if (!props.artwork || !props.artwork.files[props.currentIndex]) {
+    return ''
+  }
+  return props.artwork.files[props.currentIndex].name
+})
+
+const currentImageSize = computed(() => {
+  if (!props.artwork || !props.artwork.files[props.currentIndex]) {
+    return 0
+  }
+  return props.artwork.files[props.currentIndex].size
+})
+
+const close = () => {
+  emit('close')
+}
+
+const previousImage = () => {
+  if (props.currentIndex > 0) {
+    emit('update:currentIndex', props.currentIndex - 1)
+  }
+}
+
+const nextImage = () => {
+  if (props.artwork && props.currentIndex < props.artwork.files.length - 1) {
+    emit('update:currentIndex', props.currentIndex + 1)
+  }
+}
+
+const goToImage = (index: number) => {
+  emit('update:currentIndex', index)
+}
+
+// 缩放控制
+const zoomIn = () => {
+  zoomLevel.value = Math.min(zoomLevel.value + 0.1, 3)
+}
+
+const zoomOut = () => {
+  zoomLevel.value = Math.max(zoomLevel.value - 0.1, 0.5)
+}
+
+const resetZoom = () => {
+  zoomLevel.value = 1
+}
+
+// 键盘快捷键支持
+const handleKeydown = (event: KeyboardEvent) => {
+  if (props.show) {
+    switch (event.key) {
+      case 'Escape':
+        close()
+        break
+      case 'ArrowLeft':
+        previousImage()
+        break
+      case 'ArrowRight':
+        nextImage()
+        break
+      case '=':
+      case '+':
+        event.preventDefault()
+        zoomIn()
+        break
+      case '-':
+        event.preventDefault()
+        zoomOut()
+        break
+      case '0':
+        event.preventDefault()
+        resetZoom()
+        break
+    }
+  }
+}
+
+// 监听键盘事件
+onMounted(() => {
+  document.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeydown)
+})
+</script>
+
+<style scoped>
+.image-viewer-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.image-viewer-content {
+  background: white;
+  border-radius: 0.5rem;
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.viewer-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.viewer-header h3 {
+  margin: 0;
+  color: #1f2937;
+}
+
+.viewer-controls {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.viewer-zoom-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: #6b7280;
+  padding: 0.25rem;
+}
+
+.reset-btn {
+  background: #6b7280;
+  color: white;
+  border: none;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  font-size: 0.75rem;
+  transition: all 0.2s;
+}
+
+.reset-btn:hover {
+  background: #4b5563;
+}
+
+.zoom-btn {
+  background: #3b82f6;
+  color: white;
+  border: none;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  font-size: 0.75rem;
+  transition: all 0.2s;
+}
+
+.zoom-btn:hover:not(:disabled) {
+  background: #2563eb;
+}
+
+.zoom-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.zoom-level {
+  font-size: 0.875rem;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.viewer-main {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  flex: 1;
+  min-height: 400px;
+}
+
+.nav-btn {
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  border: none;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.nav-btn:hover:not(:disabled) {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.nav-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.image-container {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-height: 70vh;
+  overflow: auto;
+  background: #f9fafb;
+  border-radius: 0.375rem;
+}
+
+.viewer-image {
+  max-width: none;
+  max-height: none;
+  object-fit: contain;
+  transition: transform 0.2s ease;
+  cursor: zoom-in;
+}
+
+.viewer-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  border-top: 1px solid #e5e7eb;
+  background: #f9fafb;
+}
+
+.image-info p {
+  margin: 0.25rem 0;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.image-counter {
+  font-size: 0.875rem;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.thumbnail-strip {
+  display: flex;
+  gap: 0.5rem;
+  padding: 1rem;
+  background: #f9fafb;
+  border-top: 1px solid #e5e7eb;
+  overflow-x: auto;
+}
+
+.thumbnail {
+  width: 80px;
+  height: 60px;
+  border: 2px solid transparent;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  overflow: hidden;
+  transition: all 0.2s;
+  flex-shrink: 0;
+}
+
+.thumbnail.active {
+  border-color: #3b82f6;
+}
+
+.thumbnail:hover {
+  border-color: #3b82f6;
+}
+
+.thumbnail-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+@media (max-width: 768px) {
+  .image-viewer-content {
+    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> 

ui/src/views/repository/components/Pagination.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="pagination" v-if="totalPages > 1">
+    <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>
+    
+    <div class="page-numbers">
+      <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>
+    <button 
+      @click="$emit('change-page', totalPages)" 
+      :disabled="currentPage >= totalPages"
+      class="page-btn"
+    >
+      末页
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  currentPage: number
+  totalPages: number
+}
+
+interface Emits {
+  (e: 'change-page', page: number): void
+}
+
+const props = defineProps<Props>()
+defineEmits<Emits>()
+
+const visiblePages = computed(() => {
+  const pages = []
+  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>
+
+<style scoped>
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 2rem;
+}
+
+.page-btn {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #d1d5db;
+  background: white;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: all 0.2s;
+}
+
+.page-btn:hover:not(:disabled) {
+  background: #f3f4f6;
+  border-color: #3b82f6;
+}
+
+.page-btn.active {
+  background: #3b82f6;
+  color: white;
+  border-color: #3b82f6;
+}
+
+.page-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.page-numbers {
+  display: flex;
+  gap: 0.25rem;
+}
+
+@media (max-width: 768px) {
+  .pagination {
+    flex-wrap: wrap;
+  }
+  
+  .page-numbers {
+    order: 3;
+    width: 100%;
+    justify-content: center;
+    margin-top: 0.5rem;
+  }
+}
+</style> 

ui/src/views/repository/components/SearchPanel.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="search-panel">
+    <div class="search-filters">
+      <div class="search-box">
+        <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>
+          <option value="videos">仅视频</option>
+        </select>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+interface Props {
+  initialQuery?: string
+  initialSort?: string
+  initialFilter?: string
+}
+
+interface Emits {
+  (e: 'search', query: string): void
+  (e: 'sort', sortBy: string): void
+  (e: 'filter', filterBy: string): void
+  (e: 'clear'): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  initialQuery: '',
+  initialSort: 'date',
+  initialFilter: 'all'
+})
+
+const emit = defineEmits<Emits>()
+
+// 响应式数据
+const searchQuery = ref(props.initialQuery)
+const sortBy = ref(props.initialSort)
+const filterBy = ref(props.initialFilter)
+
+// 防抖搜索
+let searchTimeout: number
+const debounceSearch = () => {
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    emit('search', searchQuery.value)
+  }, 300)
+}
+
+const clearSearch = () => {
+  searchQuery.value = ''
+  emit('clear')
+}
+
+const handleSortChange = () => {
+  emit('sort', sortBy.value)
+}
+
+const handleFilterChange = () => {
+  emit('filter', filterBy.value)
+}
+
+// 监听外部查询变化
+watch(() => props.initialQuery, (newQuery) => {
+  searchQuery.value = newQuery
+})
+</script>
+
+<style scoped>
+.search-panel {
+  margin-bottom: 2rem;
+}
+
+.search-filters {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.search-box {
+  position: relative;
+  flex: 1;
+  max-width: 400px;
+}
+
+.search-input {
+  width: 100%;
+  padding: 0.75rem 2.5rem 0.75rem 1rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+}
+
+.clear-btn {
+  position: absolute;
+  right: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: #6b7280;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+}
+
+.clear-btn:hover {
+  background: #f3f4f6;
+}
+
+.filter-controls {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.filter-select {
+  padding: 0.5rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  background: white;
+  font-size: 0.875rem;
+}
+
+@media (max-width: 768px) {
+  .search-filters {
+    flex-direction: column;
+    width: 100%;
+  }
+  
+  .search-box {
+    max-width: none;
+  }
+  
+  .filter-controls {
+    width: 100%;
+  }
+  
+  .filter-select {
+    flex: 1;
+  }
+}
+</style> 

ui/src/views/repository/components/ViewModeToggle.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="view-toggle">
+    <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')"
+    >
+      <span class="btn-icon">🖼️</span>
+      所有作品
+    </button>
+    <button 
+      class="view-btn" 
+      :class="{ active: modelValue === 'gallery' }"
+      @click="$emit('update:modelValue', 'gallery')"
+    >
+      <span class="btn-icon">🎨</span>
+      画廊模式
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  modelValue: string
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: string): void
+}
+
+defineProps<Props>()
+defineEmits<Emits>()
+</script>
+
+<style scoped>
+.view-toggle {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 2rem;
+}
+
+.view-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border: 1px solid #d1d5db;
+  background: white;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 0.875rem;
+}
+
+.view-btn.active {
+  background: #3b82f6;
+  color: white;
+  border-color: #3b82f6;
+}
+
+.btn-icon {
+  font-size: 1rem;
+}
+
+@media (max-width: 768px) {
+  .view-toggle {
+    width: 100%;
+    justify-content: center;
+  }
+}
+</style>