diff --git a/README.md b/README.md
index 8f1d8a1..4a08184 100644
--- a/README.md
+++ b/README.md
@@ -11,6 +11,9 @@ Pixiv 下载浏览管理器是一个基于 Web 的应用程序，提供以下功
 - 📥 作品下载管理
 - 👤 作者搜索
 - 🆔 作品ID搜索
+- 📁 本地仓库管理
+- 🖼️ 画廊模式浏览
+- 🔍 作品检索和分类
 
 ## 🚀 快速开始
 
@@ -72,11 +75,11 @@ Pixiv 下载浏览管理器是一个基于 Web 的应用程序，提供以下功
 
 ## 📱 功能展示
 
-### 主界面
+### 脚本启动
 ![脚本启动](./pic/脚本启动.png)
 
 ### 搜索功能
-- **作品搜索**
+- **作品搜索（下载过的会有提示）**
   ![搜索作品](./pic/搜索作品.png)
 
 - **作者搜索**
@@ -85,9 +88,22 @@ Pixiv 下载浏览管理器是一个基于 Web 的应用程序，提供以下功
 - **作品ID搜索**
   ![作品id搜索](./pic/作品id搜索.png)
 
+### 列表轮换
+- **通过作者搜索进入作品可以上下一个切换**
+- ![列表轮换](./pic/列表轮换.png)
+  
 ### 下载管理
 ![下载管理](./pic/下载管理.png)
 
+### 仓库管理
+![仓库管理](./pic/仓库管理.png)
+
+### 作品检索
+![作品检索](./pic/作品检索.png)
+
+### 画廊模式
+![画廊模式](./pic/画廊模式.png)
+
 ## 🛠️ 开发说明
 
 本项目刚刚建立，很多功能还不够完善，欢迎大家一起参与开发！
diff --git a/backend/routes/artist.js b/backend/routes/artist.js
index 6799e7d..3fc2d68 100644
--- a/backend/routes/artist.js
+++ b/backend/routes/artist.js
@@ -2,6 +2,62 @@ const express = require('express');
 const router = express.Router();
 const ArtistService = require('../services/artist');
 
+/**
+ * 搜索作者
+ * GET /api/artist/search
+ */
+router.get('/search', async (req, res) => {
+  try {
+    const { keyword, offset = 0, limit = 30 } = req.query;
+    
+    if (!keyword || keyword.trim() === '') {
+      return res.status(400).json({
+        success: false,
+        error: '搜索关键词不能为空'
+      });
+    }
+    
+    const artistService = new ArtistService(req.backend.getAuth());
+    const result = await artistService.searchArtists({
+      keyword: keyword.trim(),
+      offset: parseInt(offset),
+      limit: parseInt(limit)
+    });
+    
+    if (result.success) {
+      // 转换数据格式以匹配前端期望
+      const artists = (result.data.users || []).map(user => ({
+        id: user.user.id,
+        name: user.user.name,
+        account: user.user.account,
+        profile_image_urls: user.user.profile_image_urls,
+        total_illusts: 0,
+        total_manga: 0,
+        total_followers: 0,
+        is_followed: user.user.is_followed || false
+      }));
+
+      res.json({
+        success: true,
+        data: {
+          artists,
+          total: artists.length
+        }
+      });
+    } else {
+      res.status(404).json({
+        success: false,
+        error: result.error
+      });
+    }
+  } catch (error) {
+    res.status(500).json({
+      success: false,
+      error: error.message
+    });
+  }
+});
+
 /**
  * 获取当前用户关注的作者列表
  * GET /api/artist/following
diff --git a/pic/仓库管理.png b/pic/仓库管理.png
new file mode 100644
index 0000000..7ab86ef
Binary files /dev/null and b/pic/仓库管理.png differ
diff --git a/pic/作品id搜索.png b/pic/作品id搜索.png
index 3dff95c..ad7d05d 100644
Binary files a/pic/作品id搜索.png and b/pic/作品id搜索.png differ
diff --git a/pic/作品检索.png b/pic/作品检索.png
new file mode 100644
index 0000000..cb333c3
Binary files /dev/null and b/pic/作品检索.png differ
diff --git a/pic/列表轮换.png b/pic/列表轮换.png
new file mode 100644
index 0000000..40ea647
Binary files /dev/null and b/pic/列表轮换.png differ
diff --git a/pic/画廊模式.png b/pic/画廊模式.png
new file mode 100644
index 0000000..953faf8
Binary files /dev/null and b/pic/画廊模式.png differ
diff --git a/ui/dist.zip b/ui/dist.zip
index 4d35298..1780338 100644
Binary files a/ui/dist.zip and b/ui/dist.zip differ
diff --git a/ui/src/services/artist.ts b/ui/src/services/artist.ts
index 35b66c2..5e13c14 100644
--- a/ui/src/services/artist.ts
+++ b/ui/src/services/artist.ts
@@ -19,6 +19,12 @@ export interface ArtistFollowersOptions {
   limit?: number;
 }
 
+export interface SearchArtistsOptions {
+  keyword: string;
+  offset?: number;
+  limit?: number;
+}
+
 class ArtistService {
   /**
    * 获取作者信息
@@ -88,6 +94,20 @@ class ArtistService {
     const url = query ? `/api/artist/following?${query}` : '/api/artist/following';
     return apiService.get<{ artists: Artist[]; total: number }>(url);
   }
+
+  /**
+   * 搜索作者
+   */
+  async searchArtists(options: SearchArtistsOptions): Promise<ApiResponse<{ artists: Artist[]; total: number }>> {
+    const params = new URLSearchParams();
+    params.append('keyword', options.keyword);
+    if (options.offset !== undefined) params.append('offset', options.offset.toString());
+    if (options.limit !== undefined) params.append('limit', options.limit.toString());
+
+    const query = params.toString();
+    const url = `/api/artist/search?${query}`;
+    return apiService.get<{ artists: Artist[]; total: number }>(url);
+  }
 }
 
 export const artistService = new ArtistService();
diff --git a/ui/src/stores/artist.ts b/ui/src/stores/artist.ts
new file mode 100644
index 0000000..ab23fba
--- /dev/null
+++ b/ui/src/stores/artist.ts
@@ -0,0 +1,184 @@
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+import artistService from '@/services/artist';
+import type { Artist } from '@/types';
+
+export const useArtistStore = defineStore('artist', () => {
+  // 状态
+  const followingArtists = ref<Artist[]>([]);
+  const searchResults = ref<Artist[]>([]);
+  const loading = ref(false);
+  const error = ref<string | null>(null);
+  const lastFetchTime = ref<number>(0);
+  const cacheExpiry = 5 * 60 * 1000; // 5分钟缓存
+
+  // 计算属性
+  const isDataStale = computed(() => {
+    return Date.now() - lastFetchTime.value > cacheExpiry;
+  });
+
+  const hasFollowingArtists = computed(() => {
+    return followingArtists.value.length > 0;
+  });
+
+  const hasSearchResults = computed(() => {
+    return searchResults.value.length > 0;
+  });
+
+  // 获取关注的作者
+  const fetchFollowingArtists = async (forceRefresh = false) => {
+    // 如果数据不是过期的且不是强制刷新，直接返回缓存的数据
+    if (!forceRefresh && !isDataStale.value && hasFollowingArtists.value) {
+      return {
+        success: true,
+        data: { artists: followingArtists.value }
+      };
+    }
+
+    try {
+      loading.value = true;
+      error.value = null;
+      
+      const response = await artistService.getFollowingArtists();
+      if (response.success && response.data) {
+        followingArtists.value = response.data.artists;
+        lastFetchTime.value = Date.now();
+      } else {
+        throw new Error(response.error || '获取关注列表失败');
+      }
+      
+      return response;
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : '获取关注列表失败';
+      console.error('获取关注列表失败:', err);
+      throw err;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  // 搜索作者
+  const searchArtists = async (keyword: string) => {
+    if (!keyword.trim()) {
+      searchResults.value = [];
+      return { success: true, data: { artists: [] } };
+    }
+
+    try {
+      const response = await artistService.searchArtists({ keyword });
+      if (response.success && response.data) {
+        searchResults.value = response.data.artists;
+        return response;
+      } else {
+        throw new Error(response.error || '搜索失败');
+      }
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : '搜索失败';
+      console.error('搜索失败:', err);
+      throw err;
+    }
+  };
+
+  // 关注作者
+  const followArtist = async (artistId: number) => {
+    try {
+      const response = await artistService.followArtist(artistId, 'follow');
+      
+      if (response.success) {
+        // 更新搜索结果的关注状态
+        const artist = searchResults.value.find(a => a.id === artistId);
+        if (artist) {
+          artist.is_followed = true;
+        }
+        
+        // 添加到关注列表
+        const artistToAdd = searchResults.value.find(a => a.id === artistId);
+        if (artistToAdd && !followingArtists.value.find(a => a.id === artistId)) {
+          followingArtists.value.push(artistToAdd);
+        }
+      } else {
+        throw new Error(response.error || '关注失败');
+      }
+      
+      return response;
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : '关注失败';
+      console.error('关注失败:', err);
+      throw err;
+    }
+  };
+
+  // 取消关注
+  const unfollowArtist = async (artistId: number) => {
+    try {
+      const response = await artistService.followArtist(artistId, 'unfollow');
+      
+      if (response.success) {
+        // 从关注列表中移除
+        followingArtists.value = followingArtists.value.filter(a => a.id !== artistId);
+        
+        // 更新搜索结果的关注状态
+        const artist = searchResults.value.find(a => a.id === artistId);
+        if (artist) {
+          artist.is_followed = false;
+        }
+      } else {
+        throw new Error(response.error || '取消关注失败');
+      }
+      
+      return response;
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : '取消关注失败';
+      console.error('取消关注失败:', err);
+      throw err;
+    }
+  };
+
+  // 清除搜索结果
+  const clearSearchResults = () => {
+    searchResults.value = [];
+  };
+
+  // 清除错误
+  const clearError = () => {
+    error.value = null;
+  };
+
+  // 强制刷新数据
+  const refreshData = async () => {
+    return await fetchFollowingArtists(true);
+  };
+
+  // 重置状态
+  const reset = () => {
+    followingArtists.value = [];
+    searchResults.value = [];
+    loading.value = false;
+    error.value = null;
+    lastFetchTime.value = 0;
+  };
+
+  return {
+    // 状态
+    followingArtists,
+    searchResults,
+    loading,
+    error,
+    lastFetchTime,
+    
+    // 计算属性
+    isDataStale,
+    hasFollowingArtists,
+    hasSearchResults,
+    
+    // 方法
+    fetchFollowingArtists,
+    searchArtists,
+    followArtist,
+    unfollowArtist,
+    clearSearchResults,
+    clearError,
+    refreshData,
+    reset
+  };
+}); 
\ No newline at end of file
diff --git a/ui/src/utils/formatters.ts b/ui/src/utils/formatters.ts
new file mode 100644
index 0000000..4d89f2c
--- /dev/null
+++ b/ui/src/utils/formatters.ts
@@ -0,0 +1,21 @@
+/**
+ * 格式化文件大小
+ * @param bytes 字节数
+ * @returns 格式化后的文件大小字符串
+ */
+export const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+}
+
+/**
+ * 生成文件预览URL
+ * @param filePath 文件路径
+ * @returns 预览URL
+ */
+export const getPreviewUrl = (filePath: string): string => {
+  return `/api/repository/preview?path=${encodeURIComponent(filePath)}`
+} 
\ No newline at end of file
diff --git a/ui/src/views/ArtistsView.vue b/ui/src/views/ArtistsView.vue
index 2726f34..49d8402 100644
--- a/ui/src/views/ArtistsView.vue
+++ b/ui/src/views/ArtistsView.vue
@@ -18,25 +18,47 @@
               </svg>
             </button>
           </div>
+          <button @click="handleRefresh" class="btn btn-secondary" :disabled="artistStore.loading">
+            <svg viewBox="0 0 24 24" fill="currentColor" class="refresh-icon">
+              <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
+            </svg>
+            刷新
+          </button>
         </div>
       </div>
 
-      <div v-if="error" class="error-section">
-        <ErrorMessage :error="error" @dismiss="clearError" />
+      <div v-if="artistStore.error" class="error-section">
+        <ErrorMessage :error="artistStore.error" @dismiss="artistStore.clearError" />
       </div>
 
-      <div v-if="loading" class="loading-section">
-        <LoadingSpinner text="加载中..." />
+      <div v-if="artistStore.loading" class="loading-section">
+        <LoadingSpinner text="正在获取最新数据..." />
       </div>
 
       <div v-else class="artists-content">
         <!-- 关注列表 -->
         <div class="section">
-          <h2 class="section-title">关注的作者</h2>
+          <div class="section-header">
+            <h2 class="section-title">关注的作者</h2>
+            <div v-if="artistStore.hasFollowingArtists" class="cache-indicator">
+              <span v-if="artistStore.isDataStale" class="cache-status stale">
+                <svg viewBox="0 0 24 24" fill="currentColor" class="cache-icon">
+                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+                </svg>
+                数据已过期
+              </span>
+              <span v-else class="cache-status fresh">
+                <svg viewBox="0 0 24 24" fill="currentColor" class="cache-icon">
+                  <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+                </svg>
+                数据已缓存
+              </span>
+            </div>
+          </div>
           
-          <div v-if="followingArtists.length > 0" class="artists-grid">
+          <div v-if="artistStore.followingArtists.length > 0" class="artists-grid">
             <div 
-              v-for="artist in followingArtists" 
+              v-for="artist in artistStore.followingArtists" 
               :key="artist.id"
               class="artist-card"
             >
@@ -91,16 +113,19 @@
               </svg>
               <h3>暂无关注的作者</h3>
               <p>关注喜欢的作者，在这里管理他们</p>
+              <div v-if="!artistStore.loading && artistStore.hasFollowingArtists" class="cache-note">
+                <small>💡 提示：数据已缓存，点击刷新按钮获取最新数据</small>
+              </div>
             </div>
           </div>
         </div>
 
         <!-- 搜索建议 -->
-        <div v-if="searchResults.length > 0" class="section">
+        <div v-if="artistStore.searchResults.length > 0" class="section">
           <h2 class="section-title">搜索结果</h2>
           <div class="artists-grid">
             <div 
-              v-for="artist in searchResults" 
+              v-for="artist in artistStore.searchResults" 
               :key="artist.id"
               class="artist-card"
             >
@@ -158,63 +183,40 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, onUnmounted, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { useAuthStore } from '@/stores/auth';
-import artistService from '@/services/artist';
+import { useArtistStore } from '@/stores/artist';
 import downloadService from '@/services/download';
-import type { Artist } from '@/types';
 import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
 import ErrorMessage from '@/components/common/ErrorMessage.vue';
 
 const router = useRouter();
 const authStore = useAuthStore();
+const artistStore = useArtistStore();
 
-// 状态
-const followingArtists = ref<Artist[]>([]);
-const searchResults = ref<Artist[]>([]);
+// 本地状态
 const searchKeyword = ref('');
-const loading = ref(false);
-const error = ref<string | null>(null);
 
 // 获取关注的作者
 const fetchFollowingArtists = async () => {
   try {
-    loading.value = true;
-    error.value = null;
-    
-    const response = await artistService.getFollowingArtists();
-    if (response.success && response.data) {
-      followingArtists.value = response.data.artists;
-    } else {
-      throw new Error(response.error || '获取关注列表失败');
-    }
+    await artistStore.fetchFollowingArtists();
   } catch (err) {
-    error.value = err instanceof Error ? err.message : '获取关注列表失败';
     console.error('获取关注列表失败:', err);
-  } finally {
-    loading.value = false;
   }
 };
 
 // 搜索作者
 const handleSearch = async () => {
   if (!searchKeyword.value.trim()) {
-    searchResults.value = [];
+    artistStore.clearSearchResults();
     return;
   }
 
   try {
-    // 这里需要根据实际API调整
-    // const response = await artistService.searchArtists({ keyword: searchKeyword.value });
-    // if (response.success && response.data) {
-    //   searchResults.value = response.data.artists;
-    // }
-    
-    // 暂时使用模拟数据
-    searchResults.value = [];
+    await artistStore.searchArtists(searchKeyword.value);
   } catch (err) {
-    error.value = err instanceof Error ? err.message : '搜索失败';
     console.error('搜索失败:', err);
   }
 };
@@ -222,25 +224,8 @@ const handleSearch = async () => {
 // 关注作者
 const handleFollow = async (artistId: number) => {
   try {
-    const response = await artistService.followArtist(artistId, 'follow');
-    
-    if (response.success) {
-      // 更新搜索结果的关注状态
-      const artist = searchResults.value.find(a => a.id === artistId);
-      if (artist) {
-        artist.is_followed = true;
-      }
-      
-      // 添加到关注列表
-      const artistToAdd = searchResults.value.find(a => a.id === artistId);
-      if (artistToAdd) {
-        followingArtists.value.push(artistToAdd);
-      }
-    } else {
-      throw new Error(response.error || '关注失败');
-    }
+    await artistStore.followArtist(artistId);
   } catch (err) {
-    error.value = err instanceof Error ? err.message : '关注失败';
     console.error('关注失败:', err);
   }
 };
@@ -248,22 +233,8 @@ const handleFollow = async (artistId: number) => {
 // 取消关注
 const handleUnfollow = async (artistId: number) => {
   try {
-    const response = await artistService.followArtist(artistId, 'unfollow');
-    
-    if (response.success) {
-      // 从关注列表中移除
-      followingArtists.value = followingArtists.value.filter(a => a.id !== artistId);
-      
-      // 更新搜索结果的关注状态
-      const artist = searchResults.value.find(a => a.id === artistId);
-      if (artist) {
-        artist.is_followed = false;
-      }
-    } else {
-      throw new Error(response.error || '取消关注失败');
-    }
+    await artistStore.unfollowArtist(artistId);
   } catch (err) {
-    error.value = err instanceof Error ? err.message : '取消关注失败';
     console.error('取消关注失败:', err);
   }
 };
@@ -282,14 +253,18 @@ const handleDownloadArtist = async (artistId: number) => {
       throw new Error(response.error || '下载失败');
     }
   } catch (err) {
-    error.value = err instanceof Error ? err.message : '下载失败';
+    artistStore.error = err instanceof Error ? err.message : '下载失败';
     console.error('下载失败:', err);
   }
 };
 
-// 清除错误
-const clearError = () => {
-  error.value = null;
+// 刷新数据
+const handleRefresh = async () => {
+  try {
+    await artistStore.refreshData();
+  } catch (err) {
+    console.error('刷新失败:', err);
+  }
 };
 
 // 处理图片URL，通过后端代理
@@ -305,6 +280,14 @@ const getImageUrl = (originalUrl: string) => {
   return originalUrl;
 };
 
+// 监听数据过期状态，自动刷新
+watch(() => artistStore.isDataStale, (isStale) => {
+  if (isStale && artistStore.hasFollowingArtists) {
+    console.log('数据已过期，自动刷新...');
+    fetchFollowingArtists();
+  }
+});
+
 onMounted(() => {
   fetchFollowingArtists();
 });
@@ -377,6 +360,12 @@ onMounted(() => {
   height: 1.25rem;
 }
 
+.refresh-icon {
+  width: 1rem;
+  height: 1rem;
+  margin-right: 0.5rem;
+}
+
 .error-section,
 .loading-section {
   margin-bottom: 2rem;
@@ -393,11 +382,49 @@ onMounted(() => {
   margin-bottom: 3rem;
 }
 
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
 .section-title {
   font-size: 1.5rem;
   font-weight: 600;
   color: #1f2937;
-  margin: 0 0 1.5rem 0;
+  margin: 0;
+}
+
+.cache-indicator {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.cache-status {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  font-weight: 500;
+}
+
+.cache-status.fresh {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.cache-status.stale {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.cache-icon {
+  width: 0.875rem;
+  height: 0.875rem;
 }
 
 .artists-grid {
@@ -569,6 +596,19 @@ onMounted(() => {
   line-height: 1.6;
 }
 
+.cache-note {
+  margin-top: 1rem;
+  padding: 0.5rem;
+  background: #f3f4f6;
+  border-radius: 0.375rem;
+  text-align: center;
+}
+
+.cache-note small {
+  color: #6b7280;
+  font-size: 0.75rem;
+}
+
 @media (max-width: 768px) {
   .container {
     padding: 0 1rem;
diff --git a/ui/src/views/HomeView.vue b/ui/src/views/HomeView.vue
index 947450e..35736f4 100644
--- a/ui/src/views/HomeView.vue
+++ b/ui/src/views/HomeView.vue
@@ -99,6 +99,18 @@ onMounted(async () => {
               实时查看下载进度，管理下载历史和任务
             </p>
           </div>
+
+          <div class="feature-card">
+            <div class="feature-icon">
+              <svg viewBox="0 0 24 24" fill="currentColor">
+                <path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"/>
+              </svg>
+            </div>
+            <h3 class="feature-title">仓库管理</h3>
+            <p class="feature-description">
+              管理本地作品仓库，分类整理和快速检索
+            </p>
+          </div>
         </div>
       </div>
     </div>
@@ -134,6 +146,15 @@ onMounted(async () => {
             </div>
             <span>作者管理</span>
           </router-link>
+
+          <router-link to="/repository" class="quick-action-card">
+            <div class="quick-action-icon">
+              <svg viewBox="0 0 24 24" fill="currentColor">
+                <path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"/>
+              </svg>
+            </div>
+            <span>仓库管理</span>
+          </router-link>
         </div>
       </div>
     </div>
diff --git a/ui/src/views/RepositoryView.vue b/ui/src/views/RepositoryView.vue
index d2c0836..c1f622b 100644
--- a/ui/src/views/RepositoryView.vue
+++ b/ui/src/views/RepositoryView.vue
@@ -8,36 +8,7 @@
       </div>
 
       <!-- 统计信息卡片 -->
-      <div class="stats-grid" v-if="stats">
-        <div class="stat-card">
-          <div class="stat-icon">📁</div>
-          <div class="stat-content">
-            <div class="stat-value">{{ stats.totalArtworks }}</div>
-            <div class="stat-label">总作品数</div>
-          </div>
-        </div>
-        <div class="stat-card">
-          <div class="stat-icon">👤</div>
-          <div class="stat-content">
-            <div class="stat-value">{{ stats.totalArtists }}</div>
-            <div class="stat-label">总作者数</div>
-          </div>
-        </div>
-        <div class="stat-card">
-          <div class="stat-icon">💾</div>
-          <div class="stat-content">
-            <div class="stat-value">{{ formatFileSize(stats.totalSize) }}</div>
-            <div class="stat-label">总存储大小</div>
-          </div>
-        </div>
-        <div class="stat-card">
-          <div class="stat-icon">💿</div>
-          <div class="stat-content">
-            <div class="stat-value">{{ stats.diskUsage.usagePercent }}%</div>
-            <div class="stat-label">磁盘使用率</div>
-          </div>
-        </div>
-      </div>
+      <RepositoryStatsComponent :stats="stats" />
 
       <!-- 功能选项卡 -->
       <div class="tabs">
@@ -59,341 +30,51 @@
 
       <!-- 配置管理 -->
       <div v-if="activeTab === 'config'" class="tab-content">
-        <div class="config-section">
-          <h3>仓库配置</h3>
-          <div class="config-form">
-            <div class="form-group">
-              <label>下载目录</label>
-              <div class="path-input-group">
-                <input 
-                  v-model="config.downloadDir" 
-                  type="text" 
-                  placeholder="设置下载目录路径，例如: ./downloads 或 D:\downloads"
-                  class="form-input"
-                />
-                <button type="button" @click="selectDownloadDir" class="btn btn-secondary">
-                  选择目录
-                </button>
-                <button type="button" @click="testDownloadDir" class="btn btn-outline">
-                  测试
-                </button>
-              </div>
-              <small class="form-help">
-                <strong>路径示例：</strong><br>
-                • 相对路径：<code>./downloads</code>（相对于项目根目录）<br>
-                • 绝对路径：<code>D:\downloads</code> 或 <code>/home/user/downloads</code><br>
-                • 当前目录：<code>.</code> 或 <code>./</code>
-              </small>
-            </div>
-            
-            <!-- 自动迁移选项 -->
-            <div class="form-group">
-              <label class="checkbox-label">
-                <input 
-                  v-model="config.autoMigration" 
-                  type="checkbox" 
-                  class="form-checkbox"
-                />
-                <span>自动迁移旧下载文件</span>
-              </label>
-              <small class="form-help">
-                启用后，保存配置时会自动将旧下载目录中的文件移动到新目录
-              </small>
-            </div>
-            
-            <!-- 迁移进度显示 -->
-            <div v-if="migrating" class="migration-progress">
-              <div class="progress-header">
-                <h4>正在迁移文件...</h4>
-                <span class="progress-text">{{ migrationProgress }}</span>
-              </div>
-              <div class="progress-bar">
-                <div class="progress-fill" :style="{ width: migrationPercent + '%' }"></div>
-              </div>
-            </div>
-            
-            <!-- 迁移结果 -->
-            <div v-if="migrationResult" class="migration-result">
-              <h4>迁移完成</h4>
-              <div class="result-stats">
-                <p>✅ 成功迁移: {{ migrationResult.totalMigrated }} 个作品</p>
-                <p>⏭️ 跳过: {{ migrationResult.log.filter((item: any) => item.status === 'skipped').length }} 个作品</p>
-              </div>
-              <div class="migration-log">
-                <h5>详细日志</h5>
-                <div 
-                  v-for="(item, index) in migrationResult.log.slice(0, 10)" 
-                  :key="index"
-                  class="log-item"
-                  :class="(item as any).status"
-                >
-                  <span class="log-status">{{ (item as any).status === 'success' ? '✅' : '⏭️' }}</span>
-                  <span class="log-text">{{ (item as any).title }} (ID: {{ (item as any).id }})</span>
-                  <span v-if="(item as any).reason" class="log-reason">{{ (item as any).reason }}</span>
-                </div>
-                <div v-if="migrationResult.log.length > 10" class="log-more">
-                  还有 {{ migrationResult.log.length - 10 }} 个文件...
-                </div>
-              </div>
-            </div>
-            <div class="form-group">
-              <label>文件结构</label>
-              <select v-model="config.fileStructure" class="form-select">
-                <option value="artist/artwork">作者/作品</option>
-                <option value="artwork">仅作品</option>
-                <option value="flat">扁平结构</option>
-              </select>
-            </div>
-            <div class="form-group">
-              <label>命名模式</label>
-              <input 
-                v-model="config.namingPattern" 
-                type="text" 
-                placeholder="{artist_name}/{artwork_id}_{title}"
-                class="form-input"
-              />
-            </div>
-            <div class="form-group">
-              <label>最大文件大小 (MB)</label>
-              <input 
-                v-model.number="config.maxFileSize" 
-                type="number" 
-                placeholder="0表示无限制"
-                class="form-input"
-              />
-            </div>
-            <div class="form-group">
-              <label>允许的文件扩展名</label>
-              <input 
-                :value="config.allowedExtensions.join(',')" 
-                @input="(e) => config.allowedExtensions = (e.target as HTMLInputElement).value.split(',').map(ext => ext.trim()).filter(ext => ext)"
-                type="text" 
-                placeholder=".jpg,.png,.gif,.webp"
-                class="form-input"
-              />
-            </div>
-            <div class="form-actions">
-              <button @click="saveConfig" class="btn btn-primary" :disabled="saving">
-                {{ saving ? '保存中...' : '保存配置' }}
-              </button>
-              <button @click="resetConfig" class="btn btn-outline" :disabled="saving">
-                重置为默认
-              </button>
-            </div>
-          </div>
-        </div>
+        <RepositoryConfigComponent
+          :config="config"
+          :migrating="migrating"
+          :migration-progress="migrationProgress"
+          :migration-percent="migrationPercent"
+          :migration-result="migrationResult"
+          @save-config="saveConfig"
+          @reset-config="resetConfig"
+          @select-download-dir="selectDownloadDir"
+          @test-download-dir="testDownloadDir"
+        />
       </div>
 
       <!-- 文件浏览 -->
       <div v-if="activeTab === 'browse'" class="tab-content">
-        <div class="browse-section">
-          <div class="browse-header">
-            <div class="search-box">
-              <input 
-                v-model="searchQuery" 
-                type="text" 
-                placeholder="搜索作品或作者..."
-                class="search-input"
-                @input="debounceSearch"
-              />
-            </div>
-            <div class="view-toggle">
-              <button 
-                class="view-btn" 
-                :class="{ active: viewMode === 'artists' }"
-                @click="viewMode = 'artists'"
-              >
-                按作者浏览
-              </button>
-              <button 
-                class="view-btn" 
-                :class="{ active: viewMode === 'artworks' }"
-                @click="viewMode = 'artworks'"
-              >
-                所有作品
-              </button>
-            </div>
-          </div>
-
-          <!-- 作者列表 -->
-          <div v-if="viewMode === 'artists'" class="artists-grid">
-            <div 
-              v-for="artist in artists" 
-              :key="artist.name"
-              class="artist-card"
-              @click="selectArtist(artist.name)"
-            >
-              <div class="artist-info">
-                <h4>{{ artist.name }}</h4>
-                <p>{{ artist.artworkCount }} 个作品</p>
-                <p>{{ formatFileSize(artist.totalSize) }}</p>
-              </div>
-            </div>
-          </div>
-
-          <!-- 作品列表 -->
-          <div v-if="viewMode === 'artworks'" class="artworks-grid">
-            <div 
-              v-for="artwork in artworks" 
-              :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"
-                />
-              </div>
-              <div class="artwork-info">
-                <h4>{{ artwork.title }}</h4>
-                <p>{{ artwork.artist }}</p>
-                <p>{{ formatFileSize(artwork.size) }}</p>
-              </div>
-            </div>
-          </div>
-
-          <!-- 分页 -->
-          <div class="pagination" v-if="totalPages > 1">
-            <button 
-              @click="changePage(currentPage - 1)" 
-              :disabled="currentPage <= 1"
-              class="page-btn"
-            >
-              上一页
-            </button>
-            <span class="page-info">{{ currentPage }} / {{ totalPages }}</span>
-            <button 
-              @click="changePage(currentPage + 1)" 
-              :disabled="currentPage >= totalPages"
-              class="page-btn"
-            >
-              下一页
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <!-- 数据迁移 -->
-      <div v-if="activeTab === 'migrate'" class="tab-content">
-        <div class="migrate-section">
-          <h3>数据迁移</h3>
-          <p class="migrate-description">
-            将旧项目中的作品文件迁移到当前仓库中。系统会自动识别作品ID并避免重复迁移。
-          </p>
-          
-          <div class="migrate-form">
-            <div class="form-group">
-              <label>源目录路径</label>
-              <div class="path-input-group">
-                <input 
-                  v-model="migrateSourceDir" 
-                  type="text" 
-                  placeholder="选择要迁移的目录路径，例如: D:\old-downloads"
-                  class="form-input"
-                />
-                <button type="button" @click="selectMigrateDir" class="btn btn-secondary">
-                  选择目录
-                </button>
-                <button type="button" @click="testMigrateDir" class="btn btn-outline">
-                  测试
-                </button>
-              </div>
-              <small class="form-help">
-                <strong>迁移说明：</strong><br>
-                • 选择要迁移的源目录，系统会将整个目录结构移动到目标位置<br>
-                • 如果目标位置已存在同名目录，将跳过迁移<br>
-                • 迁移完成后，源文件会被移动到新位置（移动操作）
-              </small>
-            </div>
-            <div class="form-actions">
-              <button 
-                @click="startMigration" 
-                class="btn btn-primary" 
-                :disabled="migrating"
-              >
-                {{ migrating ? '迁移中...' : '开始迁移' }}
-              </button>
-            </div>
-          </div>
-
-          <!-- 迁移结果 -->
-          <div v-if="migrationResult" class="migration-result">
-            <h4>迁移结果</h4>
-            <div class="result-stats">
-              <p>成功迁移: {{ migrationResult.totalMigrated }} 个作品</p>
-              <p>跳过: {{ migrationResult.log.filter((item: any) => item.status === 'skipped').length }} 个作品</p>
-            </div>
-            <div class="migration-log">
-              <h5>详细日志</h5>
-                             <div 
-                 v-for="(item, index) in migrationResult.log" 
-                 :key="index"
-                 class="log-item"
-                 :class="(item as any).status"
-               >
-                                 <span class="log-status">{{ (item as any).status === 'success' ? '✅' : '⏭️' }}</span>
-                 <span class="log-text">{{ (item as any).title }} (ID: {{ (item as any).id }})</span>
-                 <span v-if="(item as any).reason" class="log-reason">{{ (item as any).reason }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
+        <RepositoryBrowse
+          :artists="artists"
+          :artworks="artworks"
+          :current-page="currentPage"
+          :page-size="pageSize"
+          @update:search-query="handleSearchQuery"
+          @update:view-mode="handleViewMode"
+          @select-artist="selectArtist"
+          @view-artwork="viewArtwork"
+          @change-page="changePage"
+        />
       </div>
     </div>
 
     <!-- 作品详情模态框 -->
-    <div v-if="selectedArtwork" class="modal-overlay" @click="closeArtworkModal">
-      <div class="modal-content" @click.stop>
-        <div class="modal-header">
-          <h3>{{ selectedArtwork.title }}</h3>
-          <button @click="closeArtworkModal" class="modal-close">×</button>
-        </div>
-        <div class="modal-body">
-          <div class="artwork-details">
-            <p><strong>作者:</strong> {{ selectedArtwork.artist }}</p>
-            <p><strong>作品ID:</strong> {{ selectedArtwork.id }}</p>
-            <p><strong>文件大小:</strong> {{ formatFileSize(selectedArtwork.size) }}</p>
-            <p><strong>文件数量:</strong> {{ selectedArtwork.files.length }}</p>
-          </div>
-          <div class="artwork-files">
-            <h4>文件列表</h4>
-            <div class="files-grid">
-              <div 
-                v-for="file in selectedArtwork.files" 
-                :key="file.path"
-                class="file-item"
-              >
-                <img 
-                  :src="getPreviewUrl(file.path)" 
-                  :alt="file.name"
-                  class="file-preview"
-                />
-                <div class="file-info">
-                  <p>{{ file.name }}</p>
-                  <p>{{ formatFileSize(file.size) }}</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="modal-footer">
-          <button @click="deleteArtwork(selectedArtwork.id)" class="btn btn-danger">
-            删除作品
-          </button>
-          <button @click="closeArtworkModal" class="btn btn-secondary">
-            关闭
-          </button>
-        </div>
-      </div>
-    </div>
+    <ArtworkModal
+      :artwork="selectedArtwork"
+      @close="closeArtworkModal"
+      @delete-artwork="deleteArtwork"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useRepositoryStore, type RepositoryStats, type RepositoryConfig, type Artist, type Artwork } from '@/stores/repository.ts'
+import RepositoryStatsComponent from './repository/RepositoryStats.vue'
+import RepositoryConfigComponent from './repository/RepositoryConfig.vue'
+import RepositoryBrowse from './repository/RepositoryBrowse.vue'
+import ArtworkModal from './repository/ArtworkModal.vue'
 
 const repositoryStore = useRepositoryStore()
 
@@ -411,13 +92,11 @@ const config = ref<RepositoryConfig>({
 })
 
 // 浏览相关
-const viewMode = ref('artists')
 const searchQuery = ref('')
 const artists = ref<Artist[]>([])
 const artworks = ref<Artwork[]>([])
 const currentPage = ref(1)
 const pageSize = 20
-const totalPages = computed(() => Math.ceil(artworks.value.length / pageSize))
 
 // 迁移相关
 const migrateSourceDir = ref('')
@@ -434,6 +113,7 @@ onMounted(async () => {
   await loadStats()
   await loadConfig()
   await loadArtists()
+  await loadAllArtworks() // 添加加载所有作品
 })
 
 // 加载统计信息
@@ -456,9 +136,7 @@ const loadConfig = async () => {
 }
 
 // 保存配置
-const saving = ref(false)
 const saveConfig = async () => {
-  saving.value = true
   try {
     // 处理扩展名字符串
     if (typeof config.value.allowedExtensions === 'string') {
@@ -484,8 +162,6 @@ const saveConfig = async () => {
   } catch (error: any) {
     console.error('保存配置失败:', error)
     alert('保存配置失败: ' + error.message)
-  } finally {
-    saving.value = false
   }
 }
 
@@ -495,7 +171,6 @@ const resetConfig = async () => {
     return
   }
   
-  saving.value = true
   try {
     await repositoryStore.resetConfig()
     // 重新加载配置
@@ -504,8 +179,6 @@ const resetConfig = async () => {
   } catch (error: any) {
     console.error('重置配置失败:', error)
     alert('重置配置失败: ' + error.message)
-  } finally {
-    saving.value = false
   }
 }
 
@@ -554,38 +227,64 @@ const loadArtists = async () => {
   }
 }
 
+// 加载所有作品
+const loadAllArtworks = async () => {
+  try {
+    // 使用搜索空字符串来获取所有作品
+    const result = await repositoryStore.searchArtworks('', 0, 1000)
+    artworks.value = result.artworks
+  } catch (error: any) {
+    console.error('加载所有作品失败:', error)
+  }
+}
+
 // 选择作者
 const selectArtist = async (artistName: string) => {
   try {
     const result = await repositoryStore.getArtworksByArtist(artistName)
     artworks.value = result.artworks
-    viewMode.value = 'artworks'
+    activeTab.value = 'browse'
+    currentPage.value = 1 // 重置到第一页
   } catch (error: any) {
     console.error('加载作者作品失败:', error)
   }
 }
 
-// 搜索作品
-let searchTimeout: number
-const debounceSearch = () => {
-  clearTimeout(searchTimeout)
-  searchTimeout = setTimeout(async () => {
-    if (searchQuery.value.trim()) {
-      try {
-        const result = await repositoryStore.searchArtworks(searchQuery.value)
-        artworks.value = result.artworks
-        viewMode.value = 'artworks'
-        } catch (error: any) {
-    console.error('搜索失败:', error)
-  }
-    } else {
-      await loadArtists()
+// 处理搜索查询
+const handleSearchQuery = async (query: string) => {
+  searchQuery.value = query
+  if (query.trim()) {
+    try {
+      const result = await repositoryStore.searchArtworks(query)
+      artworks.value = result.artworks
+      activeTab.value = 'browse'
+      currentPage.value = 1 // 重置到第一页
+    } catch (error: any) {
+      console.error('搜索失败:', error)
     }
-  }, 300)
+  } else {
+    await loadAllArtworks() // 清空搜索时加载所有作品
+  }
+}
+
+// 处理视图模式
+const handleViewMode = (mode: string) => {
+  // 根据视图模式加载相应数据
+  if (mode === 'artists') {
+    // 作者模式，确保作者数据已加载
+    if (artists.value.length === 0) {
+      loadArtists()
+    }
+  } else if (mode === 'artworks' || mode === 'gallery') {
+    // 作品模式，确保作品数据已加载
+    if (artworks.value.length === 0) {
+      loadAllArtworks()
+    }
+  }
 }
 
 // 查看作品详情
-const viewArtwork = (artwork: any) => {
+const viewArtwork = (artwork: Artwork) => {
   selectedArtwork.value = artwork
 }
 
@@ -606,62 +305,16 @@ const deleteArtwork = async (artworkId: string) => {
     closeArtworkModal()
     await loadStats()
     await loadArtists()
+    await loadAllArtworks() // 重新加载作品列表
   } catch (error: any) {
     console.error('删除作品失败:', error)
     alert('删除作品失败: ' + error.message)
   }
 }
 
-// 开始迁移
-const startMigration = async () => {
-  if (!migrateSourceDir.value.trim()) {
-    alert('请输入源目录路径')
-    return
-  }
-  
-  migrating.value = true
-  try {
-    console.log('开始手动迁移:', { sourceDir: migrateSourceDir.value })
-    
-    migrationResult.value = await repositoryStore.migrateOldProjects(migrateSourceDir.value)
-    
-    console.log('手动迁移完成:', migrationResult.value)
-    
-    if (migrationResult.value.totalMigrated > 0) {
-      alert(`迁移完成！成功移动 ${migrationResult.value.totalMigrated} 个目录`)
-    } else {
-      alert('迁移完成，但没有找到需要迁移的文件')
-    }
-    
-    await loadStats()
-    await loadArtists()
-  } catch (error: any) {
-    console.error('迁移失败:', error)
-    alert('迁移失败: ' + error.message)
-  } finally {
-    migrating.value = false
-  }
-}
-
-// 选择迁移目录
-const selectMigrateDir = async () => {
-  try {
-    // 使用简单的prompt方式，让用户输入完整路径
-    const dir = prompt('请输入要迁移的源目录完整路径:', migrateSourceDir.value || '')
-    if (dir && dir.trim()) {
-      migrateSourceDir.value = dir.trim()
-    }
-  } catch (error: any) {
-    console.error('选择目录失败:', error)
-    alert('选择目录失败，请手动输入路径')
-  }
-}
-
 // 分页
 const changePage = (page: number) => {
-  if (page >= 1 && page <= totalPages.value) {
-    currentPage.value = page
-  }
+  currentPage.value = page
 }
 
 // 选择下载目录
@@ -708,29 +361,6 @@ const testDownloadDir = async () => {
     alert('路径验证失败: ' + validation.message)
   }
 }
-
-// 测试迁移目录
-const testMigrateDir = async () => {
-  const validation = await validateDirectory(migrateSourceDir.value)
-  if (validation.valid) {
-    alert('路径格式正确！开始迁移时会验证目录是否存在。')
-  } else {
-    alert('路径验证失败: ' + validation.message)
-  }
-}
-
-// 工具函数
-const formatFileSize = (bytes: number) => {
-  if (bytes === 0) return '0 B'
-  const k = 1024
-  const sizes = ['B', 'KB', 'MB', 'GB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
-}
-
-const getPreviewUrl = (filePath: string) => {
-  return `/api/repository/preview?path=${encodeURIComponent(filePath)}`
-}
 </script>
 
 <style scoped>
@@ -760,38 +390,6 @@ const getPreviewUrl = (filePath: string) => {
   margin: 0;
 }
 
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1rem;
-  margin-bottom: 2rem;
-}
-
-.stat-card {
-  background: white;
-  border: 1px solid #e5e7eb;
-  border-radius: 0.5rem;
-  padding: 1.5rem;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.stat-icon {
-  font-size: 2rem;
-}
-
-.stat-value {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: #1f2937;
-}
-
-.stat-label {
-  color: #6b7280;
-  font-size: 0.875rem;
-}
-
 .tabs {
   display: flex;
   gap: 0.5rem;
@@ -826,459 +424,9 @@ const getPreviewUrl = (filePath: string) => {
   padding: 2rem;
 }
 
-.config-section h3,
-.browse-section h3,
-.migrate-section h3 {
-  margin: 0 0 1.5rem 0;
-  color: #1f2937;
-}
-
-.form-group {
-  margin-bottom: 1.5rem;
-}
-
-.form-group label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-  color: #374151;
-}
-
-.form-input,
-.form-select {
-  width: 100%;
-  padding: 0.75rem;
-  border: 1px solid #d1d5db;
-  border-radius: 0.375rem;
-  font-size: 0.875rem;
-}
-
-.form-input:focus,
-.form-select:focus {
-  outline: none;
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.path-input-group {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.path-input-group .form-input {
-  flex: 1;
-}
-
-.path-input-group .btn {
-  white-space: nowrap;
-  min-width: 80px;
-}
-
-.form-help {
-  color: #6b7280;
-  font-size: 0.75rem;
-  margin-top: 0.25rem;
-  line-height: 1.4;
-}
-
-.form-help strong {
-  color: #374151;
-  font-weight: 600;
-}
-
-.form-help code {
-  background: #f3f4f6;
-  padding: 0.125rem 0.25rem;
-  border-radius: 0.25rem;
-  font-family: 'Courier New', monospace;
-  font-size: 0.7rem;
-  color: #1f2937;
-}
-
-.checkbox-label {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-  font-weight: 500;
-  color: #374151;
-}
-
-.form-checkbox {
-  width: 1rem;
-  height: 1rem;
-  accent-color: #3b82f6;
-}
-
-.form-actions {
-  margin-top: 2rem;
-}
-
-.btn {
-  padding: 0.75rem 1.5rem;
-  border: none;
-  border-radius: 0.375rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.btn-primary {
-  background: #3b82f6;
-  color: white;
-}
-
-.btn-primary:hover:not(:disabled) {
-  background: #2563eb;
-}
-
-.btn-secondary {
-  background: #6b7280;
-  color: white;
-}
-
-.btn-secondary:hover {
-  background: #4b5563;
-}
-
-.btn-outline {
-  background: white;
-  color: #3b82f6;
-  border: 1px solid #3b82f6;
-}
-
-.btn-outline:hover {
-  background: #3b82f6;
-  color: white;
-}
-
-.btn-danger {
-  background: #ef4444;
-  color: white;
-}
-
-.btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.browse-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 2rem;
-}
-
-.search-box {
-  flex: 1;
-  max-width: 400px;
-}
-
-.search-input {
-  width: 100%;
-  padding: 0.75rem;
-  border: 1px solid #d1d5db;
-  border-radius: 0.375rem;
-}
-
-.view-toggle {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.view-btn {
-  padding: 0.5rem 1rem;
-  border: 1px solid #d1d5db;
-  background: white;
-  border-radius: 0.375rem;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.view-btn.active {
-  background: #3b82f6;
-  color: white;
-  border-color: #3b82f6;
-}
-
-.artists-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  gap: 1rem;
-}
-
-.artist-card {
-  background: #f9fafb;
-  border: 1px solid #e5e7eb;
-  border-radius: 0.5rem;
-  padding: 1.5rem;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.artist-card:hover {
-  background: #f3f4f6;
-  border-color: #3b82f6;
-}
-
-.artworks-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 1rem;
-}
-
-.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 {
-  height: 150px;
-  overflow: hidden;
-}
-
-.preview-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.artwork-info {
-  padding: 1rem;
-}
-
-.artwork-info h4 {
-  margin: 0 0 0.5rem 0;
-  font-size: 0.875rem;
-  color: #1f2937;
-}
-
-.artwork-info p {
-  margin: 0.25rem 0;
-  font-size: 0.75rem;
-  color: #6b7280;
-}
-
-.pagination {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 1rem;
-  margin-top: 2rem;
-}
-
-.page-btn {
-  padding: 0.5rem 1rem;
-  border: 1px solid #d1d5db;
-  background: white;
-  border-radius: 0.375rem;
-  cursor: pointer;
-}
-
-.page-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.page-info {
-  color: #6b7280;
-}
-
-.migrate-description {
-  color: #6b7280;
-  margin-bottom: 2rem;
-}
-
-.migration-progress {
-  margin-top: 1.5rem;
-  padding: 1rem;
-  background: #f9fafb;
-  border-radius: 0.5rem;
-  border: 1px solid #e5e7eb;
-}
-
-.progress-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.5rem;
-}
-
-.progress-header h4 {
-  margin: 0;
-  color: #1f2937;
-}
-
-.progress-text {
-  font-size: 0.875rem;
-  color: #6b7280;
-}
-
-.progress-bar {
-  height: 8px;
-  background: #e5e7eb;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.progress-fill {
-  height: 100%;
-  background: #3b82f6;
-  border-radius: 4px;
-  transition: width 0.3s ease-in-out;
-}
-
-.migration-result {
-  margin-top: 2rem;
-  padding: 1.5rem;
-  background: #f9fafb;
-  border-radius: 0.5rem;
-}
-
-.result-stats {
-  margin-bottom: 1rem;
-}
-
-.migration-log {
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.log-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-.log-status {
-  font-size: 1.2rem;
-}
-
-.log-reason {
-  color: #6b7280;
-  font-size: 0.875rem;
-}
-
-.log-more {
-  font-size: 0.75rem;
-  color: #6b7280;
-  margin-top: 0.5rem;
-}
-
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.modal-content {
-  background: white;
-  border-radius: 0.5rem;
-  max-width: 800px;
-  max-height: 90vh;
-  overflow-y: auto;
-  width: 90%;
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1.5rem;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-.modal-close {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  cursor: pointer;
-  color: #6b7280;
-}
-
-.modal-body {
-  padding: 1.5rem;
-}
-
-.artwork-details {
-  margin-bottom: 2rem;
-}
-
-.artwork-details p {
-  margin: 0.5rem 0;
-}
-
-.files-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-  gap: 1rem;
-}
-
-.file-item {
-  border: 1px solid #e5e7eb;
-  border-radius: 0.375rem;
-  overflow: hidden;
-}
-
-.file-preview {
-  width: 100%;
-  height: 100px;
-  object-fit: cover;
-}
-
-.file-info {
-  padding: 0.5rem;
-}
-
-.file-info p {
-  margin: 0.25rem 0;
-  font-size: 0.75rem;
-}
-
-.modal-footer {
-  padding: 1.5rem;
-  border-top: 1px solid #e5e7eb;
-  display: flex;
-  gap: 1rem;
-  justify-content: flex-end;
-}
-
 @media (max-width: 768px) {
   .container {
     padding: 0 1rem;
   }
-  
-  .browse-header {
-    flex-direction: column;
-    gap: 1rem;
-    align-items: stretch;
-  }
-  
-  .search-box {
-    max-width: none;
-  }
-  
-  .artists-grid,
-  .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/ArtworkModal.vue b/ui/src/views/repository/ArtworkModal.vue
new file mode 100644
index 0000000..0521746
--- /dev/null
+++ b/ui/src/views/repository/ArtworkModal.vue
@@ -0,0 +1,190 @@
+<template>
+  <div v-if="artwork" class="modal-overlay" @click="closeModal">
+    <div class="modal-content" @click.stop>
+      <div class="modal-header">
+        <h3>{{ artwork.title }}</h3>
+        <button @click="closeModal" class="modal-close">×</button>
+      </div>
+      <div class="modal-body">
+        <div class="artwork-details">
+          <p><strong>作者:</strong> {{ artwork.artist }}</p>
+          <p><strong>作品ID:</strong> {{ artwork.id }}</p>
+          <p><strong>文件大小:</strong> {{ formatFileSize(artwork.size) }}</p>
+          <p><strong>文件数量:</strong> {{ artwork.files.length }}</p>
+        </div>
+        <div class="artwork-files">
+          <h4>文件列表</h4>
+          <div class="files-grid">
+            <div 
+              v-for="file in artwork.files" 
+              :key="file.path"
+              class="file-item"
+            >
+              <img 
+                :src="getPreviewUrl(file.path)" 
+                :alt="file.name"
+                class="file-preview"
+              />
+              <div class="file-info">
+                <p>{{ file.name }}</p>
+                <p>{{ formatFileSize(file.size) }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button @click="deleteArtwork" class="btn btn-danger">
+          删除作品
+        </button>
+        <button @click="closeModal" class="btn btn-secondary">
+          关闭
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Artwork } from '@/stores/repository.ts'
+
+interface Props {
+  artwork: Artwork | null
+}
+
+interface Emits {
+  (e: 'close'): void
+  (e: 'delete-artwork', artworkId: string): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+// 关闭模态框
+const closeModal = () => {
+  emit('close')
+}
+
+// 删除作品
+const deleteArtwork = () => {
+  if (props.artwork) {
+    emit('delete-artwork', props.artwork.id)
+  }
+}
+
+import { formatFileSize, getPreviewUrl } from '@/utils/formatters'
+</script>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 0.5rem;
+  max-width: 800px;
+  max-height: 90vh;
+  overflow-y: auto;
+  width: 90%;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.modal-close {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: #6b7280;
+}
+
+.modal-body {
+  padding: 1.5rem;
+}
+
+.artwork-details {
+  margin-bottom: 2rem;
+}
+
+.artwork-details p {
+  margin: 0.5rem 0;
+}
+
+.files-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 1rem;
+}
+
+.file-item {
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+  overflow: hidden;
+}
+
+.file-preview {
+  width: 100%;
+  height: 100px;
+  object-fit: cover;
+}
+
+.file-info {
+  padding: 0.5rem;
+}
+
+.file-info p {
+  margin: 0.25rem 0;
+  font-size: 0.75rem;
+}
+
+.modal-footer {
+  padding: 1.5rem;
+  border-top: 1px solid #e5e7eb;
+  display: flex;
+  gap: 1rem;
+  justify-content: flex-end;
+}
+
+.btn {
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-danger {
+  background: #ef4444;
+  color: white;
+}
+
+.btn-danger:hover {
+  background: #dc2626;
+}
+
+.btn-secondary {
+  background: #6b7280;
+  color: white;
+}
+
+.btn-secondary:hover {
+  background: #4b5563;
+}
+</style> 
\ No newline at end of file
diff --git a/ui/src/views/repository/RepositoryBrowse.vue b/ui/src/views/repository/RepositoryBrowse.vue
new file mode 100644
index 0000000..0df3db9
--- /dev/null
+++ b/ui/src/views/repository/RepositoryBrowse.vue
@@ -0,0 +1,1445 @@
+<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 
+        v-for="(item, index) in breadcrumb" 
+        :key="index"
+        class="breadcrumb-item"
+        @click="navigateBreadcrumb(index)"
+      >
+        {{ item.name }}
+        <span v-if="index < breadcrumb.length - 1" class="separator">/</span>
+      </span>
+    </div>
+
+    <!-- 统计信息 -->
+    <div class="browse-stats">
+      <span>共找到 {{ totalItems }} 个项目</span>
+      <span v-if="viewMode === 'artworks'">• 第 {{ 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>
+
+    <!-- 作品列表 -->
+    <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>
+
+    <!-- 画廊模式 -->
+    <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>
+
+    <!-- 分页控件 -->
+    <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>
+
+        <!-- 图片查看器 -->
+    <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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+import type { Artist, Artwork } from '@/stores/repository.ts'
+import { formatFileSize, getPreviewUrl } from '@/utils/formatters'
+
+interface Props {
+  artists: Artist[]
+  artworks: Artwork[]
+  currentPage: number
+  pageSize: number
+}
+
+interface Emits {
+  (e: 'update:searchQuery', query: string): void
+  (e: 'update:viewMode', mode: string): void
+  (e: 'select-artist', artistName: string): void
+  (e: 'view-artwork', artwork: Artwork): void
+  (e: 'change-page', page: number): 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 imageViewer = ref({
+  show: false,
+  artwork: null as Artwork | null,
+  currentIndex: 0
+})
+
+// 画廊模式相关
+const zoomLevel = ref(1)
+const gridSize = ref('medium')
+
+// 计算属性
+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)
+    )
+  }
+
+  // 类型过滤
+  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)
+  }
+  
+  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 clearSearch = () => {
+  searchQuery.value = ''
+  emit('update:searchQuery', '')
+}
+
+const handleSortChange = () => {
+  // 排序改变时重新计算
+}
+
+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) => {
+  emit('select-artist', artistName)
+}
+
+const viewArtistArtworks = (artistName: string) => {
+  breadcrumb.value = [{ name: '作者', type: 'root' }, { name: artistName, type: 'artist' }]
+  emit('select-artist', artistName)
+}
+
+const viewArtwork = (artwork: Artwork) => {
+  emit('view-artwork', artwork)
+}
+
+const changePage = (page: number) => {
+  if (page >= 1 && page <= totalPages.value) {
+    emit('change-page', page)
+  }
+}
+
+const navigateBreadcrumb = (index: number) => {
+  breadcrumb.value = breadcrumb.value.slice(0, index + 1)
+  // 根据面包屑导航回到相应页面
+}
+
+const openImageViewer = (artwork: Artwork, index: number = 0) => {
+  imageViewer.value = {
+    show: true,
+    artwork,
+    currentIndex: index
+  }
+}
+
+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>
+
+<style scoped>
+.browse-section {
+  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;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  background: #f9fafb;
+  border-radius: 0.375rem;
+}
+
+.breadcrumb-item {
+  color: #3b82f6;
+  cursor: pointer;
+  font-size: 0.875rem;
+}
+
+.breadcrumb-item:hover {
+  text-decoration: underline;
+}
+
+.separator {
+  color: #6b7280;
+  margin-left: 0.5rem;
+}
+
+.browse-stats {
+  margin-bottom: 1rem;
+  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/RepositoryConfig.vue b/ui/src/views/repository/RepositoryConfig.vue
new file mode 100644
index 0000000..f54d7b2
--- /dev/null
+++ b/ui/src/views/repository/RepositoryConfig.vue
@@ -0,0 +1,389 @@
+<template>
+  <div class="config-section">
+    <h3>仓库配置</h3>
+    <div class="config-form">
+      <div class="form-group">
+        <label>下载目录</label>
+        <div class="path-input-group">
+          <input 
+            v-model="config.downloadDir" 
+            type="text" 
+            placeholder="设置下载目录路径，例如: ./downloads 或 D:\downloads"
+            class="form-input"
+          />
+          <button type="button" @click="selectDownloadDir" class="btn btn-secondary">
+            选择目录
+          </button>
+          <button type="button" @click="testDownloadDir" class="btn btn-outline">
+            测试
+          </button>
+        </div>
+        <small class="form-help">
+          <strong>路径示例：</strong><br>
+          • 相对路径：<code>./downloads</code>（相对于项目根目录）<br>
+          • 绝对路径：<code>D:\downloads</code> 或 <code>/home/user/downloads</code><br>
+          • 当前目录：<code>.</code> 或 <code>./</code>
+        </small>
+      </div>
+      
+      <!-- 自动迁移选项 -->
+      <div class="form-group">
+        <label class="checkbox-label">
+          <input 
+            v-model="config.autoMigration" 
+            type="checkbox" 
+            class="form-checkbox"
+          />
+          <span>自动迁移旧下载文件</span>
+        </label>
+        <small class="form-help">
+          启用后，保存配置时会自动将旧下载目录中的文件移动到新目录
+        </small>
+      </div>
+      
+      <!-- 迁移进度显示 -->
+      <div v-if="migrating" class="migration-progress">
+        <div class="progress-header">
+          <h4>正在迁移文件...</h4>
+          <span class="progress-text">{{ migrationProgress }}</span>
+        </div>
+        <div class="progress-bar">
+          <div class="progress-fill" :style="{ width: migrationPercent + '%' }"></div>
+        </div>
+      </div>
+      
+      <!-- 迁移结果 -->
+      <div v-if="migrationResult" class="migration-result">
+        <h4>迁移完成</h4>
+        <div class="result-stats">
+          <p>✅ 成功迁移: {{ migrationResult.totalMigrated }} 个作品</p>
+          <p>⏭️ 跳过: {{ migrationResult.log.filter((item: any) => item.status === 'skipped').length }} 个作品</p>
+        </div>
+        <div class="migration-log">
+          <h5>详细日志</h5>
+          <div 
+            v-for="(item, index) in migrationResult.log.slice(0, 10)" 
+            :key="index"
+            class="log-item"
+            :class="(item as any).status"
+          >
+            <span class="log-status">{{ (item as any).status === 'success' ? '✅' : '⏭️' }}</span>
+            <span class="log-text">{{ (item as any).title }} (ID: {{ (item as any).id }})</span>
+            <span v-if="(item as any).reason" class="log-reason">{{ (item as any).reason }}</span>
+          </div>
+          <div v-if="migrationResult.log.length > 10" class="log-more">
+            还有 {{ migrationResult.log.length - 10 }} 个文件...
+          </div>
+        </div>
+      </div>
+      
+      <div class="form-group">
+        <label>文件结构</label>
+        <select v-model="config.fileStructure" class="form-select">
+          <option value="artist/artwork">作者/作品</option>
+          <option value="artwork">仅作品</option>
+          <option value="flat">扁平结构</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <label>命名模式</label>
+        <input 
+          v-model="config.namingPattern" 
+          type="text" 
+          placeholder="{artist_name}/{artwork_id}_{title}"
+          class="form-input"
+        />
+      </div>
+      <div class="form-group">
+        <label>最大文件大小 (MB)</label>
+        <input 
+          v-model.number="config.maxFileSize" 
+          type="number" 
+          placeholder="0表示无限制"
+          class="form-input"
+        />
+      </div>
+      <div class="form-group">
+        <label>允许的文件扩展名</label>
+        <input 
+          :value="config.allowedExtensions.join(',')" 
+          @input="(e) => config.allowedExtensions = (e.target as HTMLInputElement).value.split(',').map(ext => ext.trim()).filter(ext => ext)"
+          type="text" 
+          placeholder=".jpg,.png,.gif,.webp"
+          class="form-input"
+        />
+      </div>
+      <div class="form-actions">
+        <button @click="saveConfig" class="btn btn-primary" :disabled="saving">
+          {{ saving ? '保存中...' : '保存配置' }}
+        </button>
+        <button @click="resetConfig" class="btn btn-outline" :disabled="saving">
+          重置为默认
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { RepositoryConfig } from '@/stores/repository.ts'
+
+interface Props {
+  config: RepositoryConfig
+  migrating: boolean
+  migrationProgress: string
+  migrationPercent: number
+  migrationResult: any
+}
+
+interface Emits {
+  (e: 'update:config', config: RepositoryConfig): void
+  (e: 'save-config'): void
+  (e: 'reset-config'): void
+  (e: 'select-download-dir'): void
+  (e: 'test-download-dir'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const saving = ref(false)
+
+// 选择下载目录
+const selectDownloadDir = () => {
+  emit('select-download-dir')
+}
+
+// 测试下载目录
+const testDownloadDir = () => {
+  emit('test-download-dir')
+}
+
+// 保存配置
+const saveConfig = async () => {
+  saving.value = true
+  try {
+    emit('save-config')
+  } finally {
+    saving.value = false
+  }
+}
+
+// 重置配置
+const resetConfig = () => {
+  emit('reset-config')
+}
+</script>
+
+<style scoped>
+.config-section h3 {
+  margin: 0 0 1.5rem 0;
+  color: #1f2937;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: #374151;
+}
+
+.form-input,
+.form-select {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+}
+
+.form-input:focus,
+.form-select:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.path-input-group {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.path-input-group .form-input {
+  flex: 1;
+}
+
+.path-input-group .btn {
+  white-space: nowrap;
+  min-width: 80px;
+}
+
+.form-help {
+  color: #6b7280;
+  font-size: 0.75rem;
+  margin-top: 0.25rem;
+  line-height: 1.4;
+}
+
+.form-help strong {
+  color: #374151;
+  font-weight: 600;
+}
+
+.form-help code {
+  background: #f3f4f6;
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.25rem;
+  font-family: 'Courier New', monospace;
+  font-size: 0.7rem;
+  color: #1f2937;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-weight: 500;
+  color: #374151;
+}
+
+.form-checkbox {
+  width: 1rem;
+  height: 1rem;
+  accent-color: #3b82f6;
+}
+
+.form-actions {
+  margin-top: 2rem;
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.btn {
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-primary {
+  background: #3b82f6;
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #2563eb;
+}
+
+.btn-secondary {
+  background: #6b7280;
+  color: white;
+}
+
+.btn-secondary:hover {
+  background: #4b5563;
+}
+
+.btn-outline {
+  background: white;
+  color: #3b82f6;
+  border: 1px solid #3b82f6;
+}
+
+.btn-outline:hover {
+  background: #3b82f6;
+  color: white;
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.migration-progress {
+  margin-top: 1.5rem;
+  padding: 1rem;
+  background: #f9fafb;
+  border-radius: 0.5rem;
+  border: 1px solid #e5e7eb;
+}
+
+.progress-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.progress-header h4 {
+  margin: 0;
+  color: #1f2937;
+}
+
+.progress-text {
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.progress-bar {
+  height: 8px;
+  background: #e5e7eb;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: #3b82f6;
+  border-radius: 4px;
+  transition: width 0.3s ease-in-out;
+}
+
+.migration-result {
+  margin-top: 2rem;
+  padding: 1.5rem;
+  background: #f9fafb;
+  border-radius: 0.5rem;
+}
+
+.result-stats {
+  margin-bottom: 1rem;
+}
+
+.migration-log {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.log-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.log-status {
+  font-size: 1.2rem;
+}
+
+.log-reason {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+.log-more {
+  font-size: 0.75rem;
+  color: #6b7280;
+  margin-top: 0.5rem;
+}
+</style> 
\ No newline at end of file
diff --git a/ui/src/views/repository/RepositoryMigration.vue b/ui/src/views/repository/RepositoryMigration.vue
new file mode 100644
index 0000000..a7384a7
--- /dev/null
+++ b/ui/src/views/repository/RepositoryMigration.vue
@@ -0,0 +1,244 @@
+<template>
+  <div class="migrate-section">
+    <h3>数据迁移</h3>
+    <p class="migrate-description">
+      将旧项目中的作品文件迁移到当前仓库中。系统会自动识别作品ID并避免重复迁移。
+    </p>
+    
+    <div class="migrate-form">
+      <div class="form-group">
+        <label>源目录路径</label>
+        <div class="path-input-group">
+          <input 
+            v-model="migrateSourceDir" 
+            type="text" 
+            placeholder="选择要迁移的目录路径，例如: D:\old-downloads"
+            class="form-input"
+          />
+          <button type="button" @click="selectMigrateDir" class="btn btn-secondary">
+            选择目录
+          </button>
+          <button type="button" @click="testMigrateDir" class="btn btn-outline">
+            测试
+          </button>
+        </div>
+        <small class="form-help">
+          <strong>迁移说明：</strong><br>
+          • 选择要迁移的源目录，系统会将整个目录结构移动到目标位置<br>
+          • 如果目标位置已存在同名目录，将跳过迁移<br>
+          • 迁移完成后，源文件会被移动到新位置（移动操作）
+        </small>
+      </div>
+      <div class="form-actions">
+        <button 
+          @click="startMigration" 
+          class="btn btn-primary" 
+          :disabled="migrating"
+        >
+          {{ migrating ? '迁移中...' : '开始迁移' }}
+        </button>
+      </div>
+    </div>
+
+    <!-- 迁移结果 -->
+    <div v-if="migrationResult" class="migration-result">
+      <h4>迁移结果</h4>
+      <div class="result-stats">
+        <p>成功迁移: {{ migrationResult.totalMigrated }} 个作品</p>
+        <p>跳过: {{ migrationResult.log.filter((item: any) => item.status === 'skipped').length }} 个作品</p>
+      </div>
+      <div class="migration-log">
+        <h5>详细日志</h5>
+        <div 
+          v-for="(item, index) in migrationResult.log" 
+          :key="index"
+          class="log-item"
+          :class="(item as any).status"
+        >
+          <span class="log-status">{{ (item as any).status === 'success' ? '✅' : '⏭️' }}</span>
+          <span class="log-text">{{ (item as any).title }} (ID: {{ (item as any).id }})</span>
+          <span v-if="(item as any).reason" class="log-reason">{{ (item as any).reason }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Props {
+  migrating: boolean
+  migrationResult: any
+}
+
+interface Emits {
+  (e: 'update:migrateSourceDir', dir: string): void
+  (e: 'select-migrate-dir'): void
+  (e: 'test-migrate-dir'): void
+  (e: 'start-migration'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const migrateSourceDir = ref('')
+
+// 选择迁移目录
+const selectMigrateDir = () => {
+  emit('select-migrate-dir')
+}
+
+// 测试迁移目录
+const testMigrateDir = () => {
+  emit('test-migrate-dir')
+}
+
+// 开始迁移
+const startMigration = () => {
+  emit('start-migration')
+}
+</script>
+
+<style scoped>
+.migrate-section h3 {
+  margin: 0 0 1.5rem 0;
+  color: #1f2937;
+}
+
+.migrate-description {
+  color: #6b7280;
+  margin-bottom: 2rem;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: #374151;
+}
+
+.form-input {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.path-input-group {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.path-input-group .form-input {
+  flex: 1;
+}
+
+.path-input-group .btn {
+  white-space: nowrap;
+  min-width: 80px;
+}
+
+.form-help {
+  color: #6b7280;
+  font-size: 0.75rem;
+  margin-top: 0.25rem;
+  line-height: 1.4;
+}
+
+.form-help strong {
+  color: #374151;
+  font-weight: 600;
+}
+
+.form-actions {
+  margin-top: 2rem;
+}
+
+.btn {
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-primary {
+  background: #3b82f6;
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #2563eb;
+}
+
+.btn-secondary {
+  background: #6b7280;
+  color: white;
+}
+
+.btn-secondary:hover {
+  background: #4b5563;
+}
+
+.btn-outline {
+  background: white;
+  color: #3b82f6;
+  border: 1px solid #3b82f6;
+}
+
+.btn-outline:hover {
+  background: #3b82f6;
+  color: white;
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.migration-result {
+  margin-top: 2rem;
+  padding: 1.5rem;
+  background: #f9fafb;
+  border-radius: 0.5rem;
+}
+
+.result-stats {
+  margin-bottom: 1rem;
+}
+
+.migration-log {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.log-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.log-status {
+  font-size: 1.2rem;
+}
+
+.log-reason {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+</style> 
\ No newline at end of file
diff --git a/ui/src/views/repository/RepositoryStats.vue b/ui/src/views/repository/RepositoryStats.vue
new file mode 100644
index 0000000..d3a8f1b
--- /dev/null
+++ b/ui/src/views/repository/RepositoryStats.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="stats-grid" v-if="stats">
+    <div class="stat-card">
+      <div class="stat-icon">📁</div>
+      <div class="stat-content">
+        <div class="stat-value">{{ stats.totalArtworks }}</div>
+        <div class="stat-label">总作品数</div>
+      </div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-icon">👤</div>
+      <div class="stat-content">
+        <div class="stat-value">{{ stats.totalArtists }}</div>
+        <div class="stat-label">总作者数</div>
+      </div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-icon">💾</div>
+      <div class="stat-content">
+        <div class="stat-value">{{ formatFileSize(stats.totalSize) }}</div>
+        <div class="stat-label">总存储大小</div>
+      </div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-icon">💿</div>
+      <div class="stat-content">
+        <div class="stat-value">{{ stats.diskUsage.usagePercent }}%</div>
+        <div class="stat-label">磁盘使用率</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { RepositoryStats } from '@/stores/repository.ts'
+
+interface Props {
+  stats: RepositoryStats | null
+}
+
+defineProps<Props>()
+
+import { formatFileSize } from '@/utils/formatters'
+</script>
+
+<style scoped>
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.stat-card {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.stat-icon {
+  font-size: 2rem;
+}
+
+.stat-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #1f2937;
+}
+
+.stat-label {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+</style> 
\ No newline at end of file