diff --git a/backend/routes/repository.js b/backend/routes/repository.js
index c66b60f..425aa2d 100644
--- a/backend/routes/repository.js
+++ b/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('搜索关键词不能为空'))
     }
diff --git a/backend/services/repository.js b/backend/services/repository.js
index 24a3989..b5d37b4 100644
--- a/backend/services/repository.js
+++ b/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 =>
diff --git a/ui/dist.zip b/ui/dist.zip
index 1ec9f7d..99b9f17 100644
Binary files a/ui/dist.zip and b/ui/dist.zip differ
diff --git a/ui/src/stores/repository.ts b/ui/src/stores/repository.ts
index ea6d18b..2845ca8 100644
--- a/ui/src/stores/repository.ts
+++ b/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,
diff --git a/ui/src/views/RepositoryView.vue b/ui/src/views/RepositoryView.vue
index c1f622b..8ae70f8 100644
--- a/ui/src/views/RepositoryView.vue
+++ b/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 {
-    // 使用搜索空字符串来获取所有作品
-    const result = await repositoryStore.searchArtworks('', 0, 1000)
+    currentArtist.value = '' // 加载所有作品时清除当前作者
+    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)
+  }
 }
 
 // 选择下载目录
diff --git a/ui/src/views/repository/RepositoryBrowse.vue b/ui/src/views/repository/RepositoryBrowse.vue
index 0df3db9..1b73255 100644
--- a/ui/src/views/repository/RepositoryBrowse.vue
+++ b/ui/src/views/repository/RepositoryBrowse.vue
@@ -1,64 +1,5 @@
 <template>
   <div class="browse-section">
-    <!-- 搜索和筛选区域 -->
-    <div class="browse-header">
-      <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 class="view-toggle">
-        <button 
-          class="view-btn" 
-          :class="{ active: viewMode === 'artists' }"
-          @click="switchToArtists"
-        >
-          <span class="btn-icon">👥</span>
-          按作者浏览
-        </button>
-        <button 
-          class="view-btn" 
-          :class="{ active: viewMode === 'artworks' }"
-          @click="switchToArtworks"
-        >
-          <span class="btn-icon">🖼️</span>
-          所有作品
-        </button>
-        <button 
-          class="view-btn" 
-          :class="{ active: viewMode === 'gallery' }"
-          @click="switchToGallery"
-        >
-          <span class="btn-icon">🎨</span>
-          画廊模式
-        </button>
-      </div>
-    </div>
-
     <!-- 面包屑导航 -->
     <div class="breadcrumb" v-if="breadcrumb.length > 0">
       <span 
@@ -72,257 +13,91 @@
       </span>
     </div>
 
+    <!-- 搜索面板 -->
+    <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"
+    />
+
     <!-- 统计信息 -->
     <div class="browse-stats">
       <span>共找到 {{ totalItems }} 个项目</span>
-      <span v-if="viewMode === 'artworks'">• 第 {{ startIndex + 1 }}-{{ endIndex }} 项</span>
+      <span v-if="viewMode !== 'artists' && totalPages > 1">
+        • 第 {{ startIndex + 1 }}-{{ endIndex }} 项
+      </span>
     </div>
 
-    <!-- 作者列表 -->
-    <div v-if="viewMode === 'artists'" class="artists-grid">
-      <div 
-        v-for="artist in paginatedArtists" 
-        :key="artist.name"
-        class="artist-card"
-        @click="selectArtist(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="viewArtistArtworks(artist.name)" class="action-btn">
-            查看作品
-          </button>
-        </div>
-      </div>
-    </div>
+    <!-- 作者视图 -->
+    <ArtistsView
+      v-if="viewMode === 'artists'"
+      :artists="artists"
+      @select-artist="handleSelectArtist"
+      @view-artist-works="handleViewArtistWorks"
+    />
 
-    <!-- 作品列表 -->
-    <div v-if="viewMode === 'artworks'" class="artworks-grid">
-      <div 
-        v-for="artwork in paginatedArtworks" 
-        :key="artwork.id"
-        class="artwork-card"
-        @click="viewArtwork(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="openImageViewer(artwork, 0)"
-          />
-          <div class="artwork-overlay">
-            <button @click.stop="openImageViewer(artwork, 0)" class="view-btn-overlay">
-              👁️ 查看大图
-            </button>
-          </div>
-        </div>
-        <div class="artwork-info">
-          <h4>{{ artwork.title }}</h4>
-          <p class="artist-name" @click.stop="selectArtist(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="viewArtwork(artwork)" class="action-btn">
-            详情
-          </button>
-          <button @click.stop="openImageViewer(artwork, 0)" class="action-btn">
-            预览
-          </button>
-        </div>
-      </div>
-    </div>
+    <!-- 作品视图 -->
+    <ArtworksView
+      v-else-if="viewMode === 'artworks'"
+      :artworks="artworks"
+      @view-artwork="handleViewArtwork"
+      @select-artist="handleSelectArtist"
+      @open-image-viewer="handleOpenImageViewer"
+    />
 
-    <!-- 画廊模式 -->
-    <div v-if="viewMode === 'gallery'" class="gallery-container">
-      <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 paginatedArtworks" 
-          :key="artwork.id"
-          class="gallery-item"
-          @click="openImageViewer(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="openImageViewer(artwork, 0)" class="overlay-btn">
-                    👁️ 查看大图
-                  </button>
-                  <button @click.stop="viewArtwork(artwork)" class="overlay-btn">
-                    📋 详情
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <!-- 画廊视图 -->
+    <GalleryView
+      v-else-if="viewMode === 'gallery'"
+      :artworks="artworks"
+      @view-artwork="handleViewArtwork"
+      @open-image-viewer="handleOpenImageViewer"
+    />
 
     <!-- 分页控件 -->
-    <div class="pagination" v-if="totalPages > 1">
-      <button 
-        @click="changePage(1)" 
-        :disabled="currentPage <= 1"
-        class="page-btn"
-      >
-        首页
-      </button>
-      <button 
-        @click="changePage(currentPage - 1)" 
-        :disabled="currentPage <= 1"
-        class="page-btn"
-      >
-        上一页
-      </button>
-      
-      <div class="page-numbers">
-        <button 
-          v-for="page in visiblePages" 
-          :key="page"
-          @click="changePage(page)"
-          :class="['page-btn', { active: page === currentPage }]"
-        >
-          {{ page }}
-        </button>
-      </div>
-      
-      <button 
-        @click="changePage(currentPage + 1)" 
-        :disabled="currentPage >= totalPages"
-        class="page-btn"
-      >
-        下一页
-      </button>
-      <button 
-        @click="changePage(totalPages)" 
-        :disabled="currentPage >= totalPages"
-        class="page-btn"
-      >
-        末页
-      </button>
-    </div>
+    <Pagination
+      :current-page="currentPage"
+      :total-pages="totalPages"
+      @change-page="handlePageChange"
+    />
 
-        <!-- 图片查看器 -->
-    <div v-if="imageViewer.show" class="image-viewer-overlay" @click="closeImageViewer">
-      <div class="image-viewer-content" @click.stop>
-        <div class="viewer-header">
-          <h3>{{ imageViewer.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="closeImageViewer" class="close-btn">×</button>
-          </div>
-        </div>
-        
-        <div class="viewer-main">
-          <button @click="previousImage" class="nav-btn prev-btn" :disabled="imageViewer.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="imageViewer.currentIndex >= (imageViewer.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">
-            {{ imageViewer.currentIndex + 1 }} / {{ imageViewer.artwork?.files?.length || 0 }}
-          </div>
-        </div>
-        
-        <div class="thumbnail-strip">
-          <div 
-            v-for="(file, index) in (imageViewer.artwork?.files || [])" 
-            :key="index"
-            :class="['thumbnail', { active: index === imageViewer.currentIndex }]"
-            @click="goToImage(index)"
-          >
-            <img 
-              :src="getPreviewUrl(file.path)" 
-              :alt="file.name"
-              class="thumbnail-img"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
+    <!-- 图片查看器 -->
+    <ImageViewer
+      v-model:current-index="imageViewerIndex"
+      :show="imageViewer.show"
+      :artwork="imageViewer.artwork"
+      @close="closeImageViewer"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+import { ref, computed, watch, onMounted } from 'vue'
 import type { Artist, Artwork } from '@/stores/repository.ts'
-import { formatFileSize, getPreviewUrl } from '@/utils/formatters'
+import SearchPanel from './components/SearchPanel.vue'
+import ViewModeToggle from './components/ViewModeToggle.vue'
+import ArtistsView from './components/ArtistsView.vue'
+import ArtworksView from './components/ArtworksView.vue'
+import GalleryView from './components/GalleryView.vue'
+import Pagination from './components/Pagination.vue'
+import ImageViewer from './components/ImageViewer.vue'
 
 interface Props {
   artists: Artist[]
   artworks: Artwork[]
   currentPage: number
   pageSize: number
+  totalItems: number
+  viewMode: string
 }
 
 interface Emits {
@@ -330,195 +105,103 @@ interface Emits {
   (e: 'update:viewMode', mode: string): void
   (e: 'select-artist', artistName: string): void
   (e: 'view-artwork', artwork: Artwork): void
-  (e: 'change-page', page: number): void
+  (e: 'change-page', page: number, options?: { artist?: string }): void
 }
 
 const props = defineProps<Props>()
 const emit = defineEmits<Emits>()
 
-// 响应式数据
+// 本地状态
 const searchQuery = ref('')
-const viewMode = ref('artists')
 const sortBy = ref('date')
 const filterBy = ref('all')
 const breadcrumb = ref<Array<{name: string, type: string}>>([])
+const currentArtist = ref<string>('') // 添加当前查看的作者状态
 
 // 图片查看器
 const imageViewer = ref({
   show: false,
-  artwork: null as Artwork | null,
-  currentIndex: 0
+  artwork: null as Artwork | null
 })
-
-// 画廊模式相关
-const zoomLevel = ref(1)
-const gridSize = ref('medium')
+const imageViewerIndex = ref(0)
 
 // 计算属性
-const filteredArtworks = computed(() => {
-  let filtered = props.artworks
-
-  // 搜索过滤
-  if (searchQuery.value.trim()) {
-    const query = searchQuery.value.toLowerCase()
-    filtered = filtered.filter(artwork => 
-      artwork.title.toLowerCase().includes(query) ||
-      artwork.artist.toLowerCase().includes(query)
-    )
+const totalPages = computed(() => {
+  if (props.viewMode === 'artists') {
+    return Math.ceil(props.artists.length / props.pageSize)
+  } else {
+    return Math.ceil(props.totalItems / props.pageSize)
   }
-
-  // 类型过滤
-  if (filterBy.value !== 'all') {
-    filtered = filtered.filter(artwork => {
-      const hasImages = artwork.files.some(file => 
-        /\.(jpg|jpeg|png|gif|webp)$/i.test(file.name)
-      )
-      const hasVideos = artwork.files.some(file => 
-        /\.(mp4|avi|mov|wmv|flv)$/i.test(file.name)
-      )
-      
-      if (filterBy.value === 'images') return hasImages
-      if (filterBy.value === 'videos') return hasVideos
-      return true
-    })
-  }
-
-  // 排序
-  filtered.sort((a, b) => {
-    switch (sortBy.value) {
-      case 'name':
-        return a.title.localeCompare(b.title)
-      case 'size':
-        return b.size - a.size
-      case 'date':
-      default:
-        return new Date(b.id).getTime() - new Date(a.id).getTime()
-    }
-  })
-
-  return filtered
 })
 
-const filteredArtists = computed(() => {
-  let filtered = props.artists
-
-  if (searchQuery.value.trim()) {
-    const query = searchQuery.value.toLowerCase()
-    filtered = filtered.filter(artist => 
-      artist.name.toLowerCase().includes(query)
-    )
-  }
-
-  return filtered
-})
-
-const totalItems = computed(() => {
-  return viewMode.value === 'artists' ? filteredArtists.value.length : filteredArtworks.value.length
-})
-
-const totalPages = computed(() => Math.ceil(totalItems.value / props.pageSize))
-
 const startIndex = computed(() => (props.currentPage - 1) * props.pageSize)
-const endIndex = computed(() => Math.min(startIndex.value + props.pageSize, totalItems.value))
-
-const paginatedArtworks = computed(() => {
-  return filteredArtworks.value.slice(startIndex.value, endIndex.value)
-})
-
-const paginatedArtists = computed(() => {
-  return filteredArtists.value.slice(startIndex.value, endIndex.value)
-})
-
-const visiblePages = computed(() => {
-  const pages = []
-  const maxVisible = 5
-  let start = Math.max(1, props.currentPage - Math.floor(maxVisible / 2))
-  let end = Math.min(totalPages.value, start + maxVisible - 1)
-  
-  if (end - start + 1 < maxVisible) {
-    start = Math.max(1, end - maxVisible + 1)
+const endIndex = computed(() => {
+  if (props.viewMode === 'artists') {
+    return Math.min(startIndex.value + props.pageSize, props.artists.length)
+  } else {
+    return Math.min(startIndex.value + props.artworks.length, props.totalItems)
   }
-  
-  for (let i = start; i <= end; i++) {
-    pages.push(i)
-  }
-  
-  return pages
-})
-
-const currentImagePath = computed(() => {
-  if (!imageViewer.value.artwork || !imageViewer.value.artwork.files[imageViewer.value.currentIndex]) {
-    return ''
-  }
-  return imageViewer.value.artwork.files[imageViewer.value.currentIndex].path
-})
-
-const currentImageName = computed(() => {
-  if (!imageViewer.value.artwork || !imageViewer.value.artwork.files[imageViewer.value.currentIndex]) {
-    return ''
-  }
-  return imageViewer.value.artwork.files[imageViewer.value.currentIndex].name
-})
-
-const currentImageSize = computed(() => {
-  if (!imageViewer.value.artwork || !imageViewer.value.artwork.files[imageViewer.value.currentIndex]) {
-    return 0
-  }
-  return imageViewer.value.artwork.files[imageViewer.value.currentIndex].size
 })
 
 // 方法
-let searchTimeout: number
-const debounceSearch = () => {
-  clearTimeout(searchTimeout)
-  searchTimeout = setTimeout(() => {
-    emit('update:searchQuery', searchQuery.value)
-  }, 300)
+const handleSearch = (query: string) => {
+  searchQuery.value = query
+  currentArtist.value = '' // 搜索时清除当前作者
+  emit('update:searchQuery', query)
 }
 
-const clearSearch = () => {
+const handleSort = (sort: string) => {
+  sortBy.value = sort
+  // 这里可以添加排序逻辑
+}
+
+const handleFilter = (filter: string) => {
+  filterBy.value = filter
+  // 这里可以添加过滤逻辑
+}
+
+const handleClear = () => {
   searchQuery.value = ''
   emit('update:searchQuery', '')
 }
 
-const handleSortChange = () => {
-  // 排序改变时重新计算
+const handleViewModeChange = (mode: string) => {
+  emit('update:viewMode', mode)
 }
 
-const handleFilterChange = () => {
-  // 过滤改变时重新计算
-}
-
-const switchToArtists = () => {
-  viewMode.value = 'artists'
-  emit('update:viewMode', 'artists')
-}
-
-const switchToArtworks = () => {
-  viewMode.value = 'artworks'
-  emit('update:viewMode', 'artworks')
-}
-
-const switchToGallery = () => {
-  viewMode.value = 'gallery'
-  emit('update:viewMode', 'gallery')
-}
-
-const selectArtist = (artistName: string) => {
+const handleSelectArtist = (artistName: string) => {
   emit('select-artist', artistName)
 }
 
-const viewArtistArtworks = (artistName: string) => {
+const handleViewArtistWorks = (artistName: string) => {
   breadcrumb.value = [{ name: '作者', type: 'root' }, { name: artistName, type: 'artist' }]
+  currentArtist.value = artistName // 设置当前查看的作者
   emit('select-artist', artistName)
 }
 
-const viewArtwork = (artwork: Artwork) => {
+const handleViewArtwork = (artwork: Artwork) => {
   emit('view-artwork', artwork)
 }
 
-const changePage = (page: number) => {
-  if (page >= 1 && page <= totalPages.value) {
+const handleOpenImageViewer = (artwork: Artwork, index: number = 0) => {
+  imageViewer.value = {
+    show: true,
+    artwork
+  }
+  imageViewerIndex.value = index
+}
+
+const closeImageViewer = () => {
+  imageViewer.value.show = false
+}
+
+const handlePageChange = (page: number) => {
+  // 根据当前状态决定如何分页
+  if (currentArtist.value) {
+    // 当前在查看特定作者的作品
+    emit('change-page', page, { artist: currentArtist.value })
+  } else {
+    // 全局搜索或浏览
     emit('change-page', page)
   }
 }
@@ -528,105 +211,13 @@ const navigateBreadcrumb = (index: number) => {
   // 根据面包屑导航回到相应页面
 }
 
-const openImageViewer = (artwork: Artwork, index: number = 0) => {
-  imageViewer.value = {
-    show: true,
-    artwork,
-    currentIndex: index
+// 监听外部查询变化
+watch(() => props.viewMode, (newMode) => {
+  // 当视图模式改变时，重置面包屑和当前作者
+  if (newMode === 'artists') {
+    breadcrumb.value = []
+    currentArtist.value = ''
   }
-}
-
-const closeImageViewer = () => {
-  imageViewer.value.show = false
-}
-
-const previousImage = () => {
-  if (imageViewer.value.currentIndex > 0) {
-    imageViewer.value.currentIndex--
-  }
-}
-
-const nextImage = () => {
-  if (imageViewer.value.artwork && imageViewer.value.currentIndex < imageViewer.value.artwork.files.length - 1) {
-    imageViewer.value.currentIndex++
-  }
-}
-
-const goToImage = (index: number) => {
-  imageViewer.value.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 setGridSize = (size: 'small' | 'medium' | 'large') => {
-  gridSize.value = size
-}
-
-// 重置缩放
-const resetZoom = () => {
-  zoomLevel.value = 1
-}
-
-// 画廊模式图片加载和错误处理
-const onImageLoad = () => {
-  // 图片加载成功后可以进行一些操作，例如调整布局
-}
-
-const onImageError = (event: Event) => {
-  console.error('图片加载失败:', (event.target as HTMLImageElement).src)
-  // 可以显示一个错误提示或替换图片
-}
-
-// 监听搜索变化
-watch(searchQuery, () => {
-  debounceSearch()
-})
-
-// 键盘快捷键支持
-const handleKeydown = (event: KeyboardEvent) => {
-  if (imageViewer.value.show) {
-    switch (event.key) {
-      case 'Escape':
-        closeImageViewer()
-        break
-      case 'ArrowLeft':
-        previousImage()
-        break
-      case 'ArrowRight':
-        nextImage()
-        break
-      case '=':
-      case '+':
-        event.preventDefault()
-        zoomIn()
-        break
-      case '-':
-        event.preventDefault()
-        zoomOut()
-        break
-      case '0':
-        event.preventDefault()
-        zoomLevel.value = 1
-        break
-    }
-  }
-}
-
-// 监听键盘事件
-onMounted(() => {
-  document.addEventListener('keydown', handleKeydown)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', handleKeydown)
 })
 </script>
 
@@ -635,93 +226,6 @@ onUnmounted(() => {
   position: relative;
 }
 
-.browse-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 2rem;
-  gap: 2rem;
-}
-
-.search-filters {
-  flex: 1;
-  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;
-}
-
-.view-toggle {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.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;
-}
-
 .breadcrumb {
   display: flex;
   align-items: center;
@@ -752,694 +256,4 @@ onUnmounted(() => {
   color: #6b7280;
   font-size: 0.875rem;
 }
-
-.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;
-}
-
-.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;
-}
-
-.gallery-container {
-  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-item:hover .gallery-image {
-  transform: scale(1.1);
-}
-
-.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;
-}
-
-.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;
-}
-
-.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;
-}
-
-.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) {
-  .browse-header {
-    flex-direction: column;
-    gap: 1rem;
-  }
-  
-  .search-filters {
-    flex-direction: column;
-    width: 100%;
-  }
-  
-  .search-box {
-    max-width: none;
-  }
-  
-  .filter-controls {
-    width: 100%;
-  }
-  
-  .filter-select {
-    flex: 1;
-  }
-  
-  .view-toggle {
-    width: 100%;
-    justify-content: center;
-  }
-  
-  .gallery-controls {
-    flex-direction: column;
-    gap: 1rem;
-  }
-  
-  .zoom-controls,
-  .view-controls {
-    justify-content: center;
-  }
-  
-  .artists-grid,
-  .artworks-grid,
-  .gallery-grid {
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-  }
-  
-  .artist-card {
-    flex-direction: column;
-    text-align: center;
-  }
-  
-  .pagination {
-    flex-wrap: wrap;
-  }
-  
-  .page-numbers {
-    order: 3;
-    width: 100%;
-    justify-content: center;
-    margin-top: 0.5rem;
-  }
-  
-  .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> 
\ No newline at end of file
diff --git a/ui/src/views/repository/components/ArtistsView.vue b/ui/src/views/repository/components/ArtistsView.vue
new file mode 100644
index 0000000..ef24dcd
--- /dev/null
+++ b/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> 
\ No newline at end of file
diff --git a/ui/src/views/repository/components/ArtworksView.vue b/ui/src/views/repository/components/ArtworksView.vue
new file mode 100644
index 0000000..414e3e2
--- /dev/null
+++ b/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> 
\ No newline at end of file
diff --git a/ui/src/views/repository/components/GalleryView.vue b/ui/src/views/repository/components/GalleryView.vue
new file mode 100644
index 0000000..f271859
--- /dev/null
+++ b/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> 
\ No newline at end of file
diff --git a/ui/src/views/repository/components/ImageViewer.vue b/ui/src/views/repository/components/ImageViewer.vue
new file mode 100644
index 0000000..43867ce
--- /dev/null
+++ b/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> 
\ No newline at end of file
diff --git a/ui/src/views/repository/components/Pagination.vue b/ui/src/views/repository/components/Pagination.vue
new file mode 100644
index 0000000..a08be81
--- /dev/null
+++ b/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> 
\ No newline at end of file
diff --git a/ui/src/views/repository/components/SearchPanel.vue b/ui/src/views/repository/components/SearchPanel.vue
new file mode 100644
index 0000000..ab4663c
--- /dev/null
+++ b/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> 
\ No newline at end of file
diff --git a/ui/src/views/repository/components/ViewModeToggle.vue b/ui/src/views/repository/components/ViewModeToggle.vue
new file mode 100644
index 0000000..37ed3ed
--- /dev/null
+++ b/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> 
\ No newline at end of file