格式修复，增加收藏页面

README.md

@@ -69,7 +69,7 @@ Pixiv 下载浏览管理器是一个基于 Web 的应用程序，提供以下功
    - 双击 `start.bat` 文件启动
 
 5. **访问应用**
-   - 打开浏览器访问：http://localhost:3000（默认端口，可修改）
+   - 打开浏览器访问：http://localhost:3000 （默认端口，可修改）
 
 ## 🌐 代理配置
 

backend/routes/artwork.js

@@ -65,6 +65,46 @@ router.get('/search', async (req, res) => {
   }
 });
 
+/**
+ * 获取用户收藏的作品列表
+ * GET /api/artwork/bookmarks
+ */
+router.get('/bookmarks', async (req, res) => {
+  try {
+    const { 
+      type = 'all',
+      offset = 0,
+      limit = 30
+    } = req.query;
+    
+    const artworkService = new ArtworkService(req.backend.getAuth());
+    const result = await artworkService.getBookmarks({
+      type,
+      offset: parseInt(offset),
+      limit: parseInt(limit)
+    });
+    
+    if (result.success) {
+      res.json({
+        success: true,
+        data: result.data
+      });
+    } else {
+      res.status(400).json({
+        success: false,
+        error: result.error
+      });
+    }
+  } catch (error) {
+    res.status(500).json({
+      success: false,
+      error: error.message
+    });
+  }
+});
+
+
+
 /**
  * 获取作品详情
  * GET /api/artwork/:id
@@ -181,4 +221,49 @@ router.get('/:id/images', async (req, res) => {
   }
 });
 
+/**
+ * 收藏/取消收藏作品
+ * POST /api/artwork/:id/bookmark
+ */
+router.post('/:id/bookmark', async (req, res) => {
+  try {
+    const { id } = req.params;
+    const { action = 'add' } = req.body; // 'add' 或 'remove'
+    
+    if (!id || isNaN(parseInt(id))) {
+      return res.status(400).json({
+        success: false,
+        error: 'Invalid artwork ID'
+      });
+    }
+    
+    if (!['add', 'remove'].includes(action)) {
+      return res.status(400).json({
+        success: false,
+        error: 'Invalid action. Must be "add" or "remove"'
+      });
+    }
+    
+    const artworkService = new ArtworkService(req.backend.getAuth());
+    const result = await artworkService.toggleBookmark(parseInt(id), action);
+    
+    if (result.success) {
+      res.json({
+        success: true,
+        data: result.data
+      });
+    } else {
+      res.status(400).json({
+        success: false,
+        error: result.error
+      });
+    }
+  } catch (error) {
+    res.status(500).json({
+      success: false,
+      error: error.message
+    });
+  }
+});
+
 module.exports = router; 

backend/services/artwork.js

@@ -277,6 +277,86 @@ class ArtworkService {
     }
   }
 
+  /**
+   * 收藏/取消收藏作品
+   */
+  /**
+   * 收藏/取消收藏作品
+   * TODO: Pixiv API 端点已更改，需要研究新的端点
+   * 当前端点 /v1/illust/bookmark/add 和 /v1/illust/bookmark/delete 已不可用
+   */
+  async toggleBookmark(artworkId, action = 'add') {
+    try {
+      // TODO: 需要研究新的 Pixiv API 端点
+      // 当前所有收藏相关的 API 端点都返回 404 错误
+      console.log(`尝试${action === 'add' ? '添加' : '删除'}收藏 ${artworkId}，但API端点不可用`);
+      
+      return {
+        success: false,
+        error: `收藏功能暂时不可用。请前往 Pixiv 官方网站进行${action === 'add' ? '收藏' : '取消收藏'}操作。`
+      };
+    } catch (error) {
+      return {
+        success: false,
+        error: error.message,
+      };
+    }
+  }
+
+    /**
+   * 获取用户收藏的作品列表
+   */
+  async getBookmarks(options = {}) {
+    try {
+      const { type = 'all', offset = 0, limit = 30 } = options;
+
+      // 从认证状态获取用户ID
+      const status = this.auth.getStatus();
+      if (!status.isLoggedIn || !this.auth.user || !this.auth.user.id) {
+        throw new Error('用户未登录或无法获取用户ID');
+      }
+
+      const userId = this.auth.user.id;
+
+      // 根据类型选择不同的API端点
+      let endpoint = '/v1/user/bookmarks/illust';
+      if (type === 'manga') {
+        endpoint = '/v1/user/bookmarks/novel';
+      } else if (type === 'novel') {
+        endpoint = '/v1/user/bookmarks/novel';
+      }
+
+      const params = {
+        user_id: userId,
+        restrict: 'public',
+        offset,
+        limit,
+      };
+
+      const response = await this.makeRequest('GET', `${endpoint}?${stringify(params)}`);
+
+      return {
+        success: true,
+        data: {
+          artworks: response.illusts || [],
+          next_url: response.next_url,
+          total: response.total || 0,
+        },
+      };
+    } catch (error) {
+      console.error('获取收藏列表失败:', {
+        message: error.message,
+        status: error.response?.status,
+        data: error.response?.data,
+        config: error.config
+      });
+      return {
+        success: false,
+        error: error.message,
+      };
+    }
+  }
+
   /**
    * 发送API请求
    */

ui/src/App.vue

@@ -21,7 +21,8 @@ onMounted(async () => {
         <div class="nav-brand">
           <RouterLink to="/" class="brand-link">
             <svg viewBox="0 0 24 24" fill="currentColor" class="brand-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"/>
+              <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 class="brand-text">Pixiv Manager</span>
           </RouterLink>
@@ -34,6 +35,7 @@ onMounted(async () => {
           <RouterLink to="/downloads" class="nav-link" v-if="isLoggedIn">下载管理</RouterLink>
           <RouterLink to="/artists" class="nav-link" v-if="isLoggedIn">作者管理</RouterLink>
           <RouterLink to="/repository" class="nav-link" v-if="isLoggedIn">仓库管理</RouterLink>
+          <RouterLink to="/bookmarks" class="nav-link" v-if="isLoggedIn">我的收藏</RouterLink>
         </div>
 
         <div class="nav-auth">
@@ -44,15 +46,11 @@ onMounted(async () => {
           <RouterLink v-else to="/login" class="btn btn-primary">登录</RouterLink>
 
           <!-- GitHub 链接 -->
-          <a 
+          <a href="https://github.com/kjqwer/pixiv-D" target="_blank" rel="noopener noreferrer" class="github-link"
-            href="https://github.com/kjqwer/pixiv-D" 
+            title="查看项目源码">
-            target="_blank" 
-            rel="noopener noreferrer" 
-            class="github-link"
-            title="查看项目源码"
-          >
             <svg viewBox="0 0 24 24" fill="currentColor" class="github-icon">
-              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+              <path
+                d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
             </svg>
           </a>
         </div>

ui/src/components/artwork/ArtworkCard.vue

@@ -55,7 +55,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
+
 import { getImageProxyUrl } from '@/services/api';
 import type { Artwork } from '@/types';
 

ui/src/components/search/ArtistSearch.vue

@@ -3,16 +3,12 @@
     <!-- 搜索表单 -->
     <div class="search-form">
       <div class="search-input-group">
-        <input 
+        <input v-model="searchKeyword" type="text" placeholder="输入作者名称或账号搜索..." class="search-input"
-          v-model="searchKeyword" 
+          @keyup.enter="handleSearch" />
-          type="text" 
-          placeholder="输入作者名称或账号搜索..." 
-          class="search-input"
-          @keyup.enter="handleSearch"
-        />
         <button @click="handleSearch" class="search-btn" :disabled="loading">
           <svg viewBox="0 0 24 24" fill="currentColor">
-            <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+            <path
+              d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
           </svg>
         </button>
       </div>
@@ -20,11 +16,7 @@
       <!-- 搜索选项 -->
       <div class="search-options">
         <label class="checkbox-label">
-          <input 
+          <input v-model="hideFollowedArtists" type="checkbox" class="form-checkbox" />
-            v-model="hideFollowedArtists" 
-            type="checkbox" 
-            class="form-checkbox"
-          />
           <span>隐藏已关注的作者</span>
         </label>
       </div>
@@ -48,22 +40,16 @@
       </div>
 
       <div class="artists-grid">
-        <ArtistCard
+        <ArtistCard v-for="artist in filteredResults" :key="artist.id" :artist="artist" :show-follow-button="true"
-          v-for="artist in filteredResults" 
+          :show-unfollow-button="false" @follow="handleFollow" @download="handleDownload" />
-          :key="artist.id"
-          :artist="artist"
-          :show-follow-button="true"
-          :show-unfollow-button="false"
-          @follow="handleFollow"
-          @download="handleDownload"
-        />
       </div>
     </div>
 
     <div v-else-if="hasSearched" class="empty-section">
       <div class="empty-content">
         <svg viewBox="0 0 24 24" fill="currentColor" class="empty-icon">
-          <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+          <path
+            d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
         </svg>
         <h3>未找到相关作者</h3>
         <p>尝试使用不同的关键词搜索</p>
@@ -83,8 +69,7 @@
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useArtistStore } from '@/stores/artist'
-import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
+
-import ErrorMessage from '@/components/common/ErrorMessage.vue'
 import ArtistCard from '@/components/artist/ArtistCard.vue'
 
 const router = useRouter()

ui/src/main.ts

@@ -6,8 +6,16 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 
+// 导入全局组件
+import ErrorMessage from '@/components/common/ErrorMessage.vue'
+import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
+
 const app = createApp(App)
 
+// 注册全局组件
+app.component('ErrorMessage', ErrorMessage)
+app.component('LoadingSpinner', LoadingSpinner)
+
 app.use(createPinia())
 app.use(router)
 

ui/src/router/index.ts

@@ -56,6 +56,12 @@ const router = createRouter({
       name: 'repository',
       component: () => import('@/views/RepositoryView.vue'),
       meta: { requiresAuth: true }
+    },
+    {
+      path: '/bookmarks',
+      name: 'bookmarks',
+      component: () => import('@/views/BookmarksView.vue'),
+      meta: { requiresAuth: true }
     }
   ]
 })

ui/src/services/artwork.ts

@@ -77,6 +77,26 @@ class ArtworkService {
 
     return apiService.get<{ artworks: Artwork[]; next_url?: string; total: number }>(`/api/artwork/search?${queryParams.toString()}`);
   }
+
+  /**
+   * 收藏/取消收藏作品
+   */
+  async toggleBookmark(artworkId: number, action: 'add' | 'remove'): Promise<ApiResponse<{ artwork_id: number; is_bookmarked: boolean; message: string }>> {
+    return apiService.post<{ artwork_id: number; is_bookmarked: boolean; message: string }>(`/api/artwork/${artworkId}/bookmark`, { action });
+  }
+
+  /**
+   * 获取用户收藏的作品列表
+   */
+  async getBookmarks(params: { type?: string; offset?: number; limit?: number } = {}): Promise<ApiResponse<{ artworks: Artwork[]; next_url?: string; total: number }>> {
+    const queryParams = new URLSearchParams();
+    
+    if (params.type) queryParams.append('type', params.type);
+    if (params.offset !== undefined) queryParams.append('offset', params.offset.toString());
+    if (params.limit !== undefined) queryParams.append('limit', params.limit.toString());
+
+    return apiService.get<{ artworks: Artwork[]; next_url?: string; total: number }>(`/api/artwork/bookmarks?${queryParams.toString()}`);
+  }
 }
 
 export const artworkService = new ArtworkService();

ui/src/views/ArtistView.vue

@@ -126,8 +126,7 @@ import artistService from '@/services/artist';
 import downloadService from '@/services/download';
 import { getImageProxyUrl } from '@/services/api';
 import type { Artist, Artwork } from '@/types';
-import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
+
-import ErrorMessage from '@/components/common/ErrorMessage.vue';
 import ArtworkCard from '@/components/artwork/ArtworkCard.vue';
 
 const route = useRoute();

ui/src/views/ArtistsView.vue

@@ -135,8 +135,7 @@ import { useRouter } from 'vue-router';
 import { useAuthStore } from '@/stores/auth';
 import { useArtistStore } from '@/stores/artist';
 import downloadService from '@/services/download';
-import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
+
-import ErrorMessage from '@/components/common/ErrorMessage.vue';
 import ArtistCard from '@/components/artist/ArtistCard.vue';
 
 const router = useRouter();

ui/src/views/ArtworkView.vue

@@ -9,6 +9,11 @@
         <ErrorMessage :error="error" @dismiss="clearError" />
       </div>
 
+      <!-- 收藏错误提示 -->
+      <div v-if="bookmarkError" class="error-section">
+        <ErrorMessage :error="bookmarkError" title="警告" type="warning" dismissible @dismiss="clearBookmarkError" />
+      </div>
+
       <div v-else-if="artwork" class="artwork-content">
         <!-- 作品图片 -->
         <div class="artwork-gallery">
@@ -167,8 +172,7 @@ import downloadService from '@/services/download';
 import { useRepositoryStore } from '@/stores/repository';
 import { getImageProxyUrl } from '@/services/api';
 import type { Artwork, DownloadTask } from '@/types';
-import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
+
-import ErrorMessage from '@/components/common/ErrorMessage.vue';
 import DownloadProgress from '@/components/download/DownloadProgress.vue';
 
 const route = useRoute();
@@ -191,6 +195,9 @@ const checkingDownloadStatus = ref(false);
 const currentTask = ref<DownloadTask | null>(null);
 const sseConnection = ref<(() => void) | null>(null);
 
+// 收藏错误状态
+const bookmarkError = ref<string | null>(null);
+
 // 导航相关状态
 const artistArtworks = ref<Artwork[]>([]);
 const currentArtworkIndex = ref(-1);
@@ -404,9 +411,30 @@ const removeTask = (taskId: string) => {
 };
 
 // 收藏/取消收藏
-const handleBookmark = () => {
+const handleBookmark = async () => {
-  // 这里可以添加收藏功能
+  if (!artwork.value) return;
-  console.log('收藏功能待实现');
+
+  try {
+    const action = artwork.value.is_bookmarked ? 'remove' : 'add';
+    const response = await artworkService.toggleBookmark(artwork.value.id, action);
+
+    if (response.success && response.data) {
+      // 更新作品状态
+      artwork.value.is_bookmarked = response.data.is_bookmarked;
+      artwork.value.total_bookmarks += artwork.value.is_bookmarked ? 1 : -1;
+
+      // 显示成功消息
+      console.log(response.data.message);
+    } else {
+      // 显示错误提示给用户
+      bookmarkError.value = response.error || '收藏操作失败';
+      console.error('收藏操作失败:', response.error);
+    }
+  } catch (err) {
+    // 显示错误提示给用户
+    bookmarkError.value = '藏暂时不可用，请去官方收藏或者取消收藏';
+    console.error('收藏操作失败:', err);
+  }
 };
 
 // 格式化日期
@@ -422,6 +450,11 @@ const clearError = () => {
   error.value = null;
 };
 
+// 清除收藏错误
+const clearBookmarkError = () => {
+  bookmarkError.value = null;
+};
+
 // 获取作者作品列表用于导航
 const fetchArtistArtworks = async () => {
   const artistId = route.query.artistId;

ui/src/views/BookmarksView.vue

@@ -0,0 +1,258 @@
+<template>
+    <div class="bookmarks-page">
+        <div class="container">
+            <div class="page-header">
+                <h1 class="page-title">我的收藏</h1>
+                <div class="page-actions">
+                    <select v-model="selectedType" @change="handleTypeChange" class="type-select">
+                        <option value="all">全部类型</option>
+                        <option value="illust">插画</option>
+                        <option value="manga">漫画</option>
+                        <option value="novel">小说</option>
+                    </select>
+                </div>
+            </div>
+
+            <div v-if="loading" class="loading-section">
+                <LoadingSpinner text="加载中..." />
+            </div>
+
+            <div v-else-if="error" class="error-section">
+                <ErrorMessage :error="error" @dismiss="clearError" />
+            </div>
+
+            <div v-else-if="artworks.length === 0" class="empty-section">
+                <div class="empty-content">
+                    <svg viewBox="0 0 24 24" fill="currentColor" class="empty-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>
+                    <h3>暂无收藏作品</h3>
+                    <p>你还没有收藏任何作品</p>
+                    <router-link to="/search" class="btn btn-primary">
+                        去搜索作品
+                    </router-link>
+                </div>
+            </div>
+
+            <div v-else class="artworks-grid">
+                <div v-for="artwork in artworks" :key="artwork.id" class="artwork-card-wrapper">
+                    <ArtworkCard :artwork="artwork" @click="handleArtworkClick" />
+                </div>
+            </div>
+
+            <!-- 加载更多 -->
+            <div v-if="hasMore && !loading" class="load-more">
+                <button @click="loadMore" class="btn btn-secondary">
+                    加载更多
+                </button>
+            </div>
+
+            <div v-if="loadingMore" class="loading-more">
+                <LoadingSpinner text="加载更多..." />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { artworkService } from '@/services/artwork';
+import { getImageProxyUrl } from '@/services/api';
+import type { Artwork } from '@/types';
+
+import ArtworkCard from '@/components/artwork/ArtworkCard.vue';
+
+const router = useRouter();
+
+// 响应式数据
+const artworks = ref<(Artwork & { loaded?: boolean; error?: boolean })[]>([]);
+const loading = ref(false);
+const loadingMore = ref(false);
+const error = ref<string | null>(null);
+const selectedType = ref('all');
+const offset = ref(0);
+const limit = 30;
+const hasMore = ref(true);
+
+// 计算属性
+const getImageUrl = getImageProxyUrl;
+
+// 获取收藏列表
+const fetchBookmarks = async (isLoadMore = false) => {
+    try {
+        if (isLoadMore) {
+            loadingMore.value = true;
+        } else {
+            loading.value = true;
+            error.value = null;
+        }
+
+        const response = await artworkService.getBookmarks({
+            type: selectedType.value === 'all' ? undefined : selectedType.value,
+            offset: isLoadMore ? offset.value : 0,
+            limit
+        });
+
+        if (response.success && response.data) {
+            const newArtworks = response.data.artworks.map(artwork => ({
+                ...artwork,
+                loaded: false,
+                error: false
+            }));
+
+            if (isLoadMore) {
+                artworks.value.push(...newArtworks);
+            } else {
+                artworks.value = newArtworks;
+            }
+
+            offset.value = isLoadMore ? offset.value + limit : limit;
+            hasMore.value = !!response.data.next_url;
+        } else {
+            error.value = response.error || '获取收藏列表失败';
+        }
+    } catch (err) {
+        error.value = err instanceof Error ? err.message : '获取收藏列表失败';
+        console.error('获取收藏列表失败:', err);
+    } finally {
+        loading.value = false;
+        loadingMore.value = false;
+    }
+};
+
+// 类型切换
+const handleTypeChange = () => {
+    offset.value = 0;
+    hasMore.value = true;
+    fetchBookmarks();
+};
+
+// 加载更多
+const loadMore = () => {
+    if (!loadingMore.value && hasMore.value) {
+        fetchBookmarks(true);
+    }
+};
+
+// 处理作品点击
+const handleArtworkClick = (artwork: Artwork) => {
+    router.push(`/artwork/${artwork.id}`);
+};
+
+// 清除错误
+const clearError = () => {
+    error.value = null;
+};
+
+// 页面加载时获取数据
+onMounted(() => {
+    fetchBookmarks();
+});
+</script>
+
+<style scoped>
+.bookmarks-page {
+    padding: 2rem 0;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+}
+
+.page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+}
+
+.page-title {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #1f2937;
+    margin: 0;
+}
+
+.page-actions {
+    display: flex;
+    gap: 1rem;
+}
+
+.type-select {
+    padding: 0.5rem 1rem;
+    border: 1px solid #d1d5db;
+    border-radius: 0.5rem;
+    background: white;
+    font-size: 1rem;
+    color: #374151;
+}
+
+.loading-section,
+.error-section,
+.empty-section {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 400px;
+}
+
+.empty-content {
+    text-align: center;
+    color: #6b7280;
+}
+
+.empty-icon {
+    width: 4rem;
+    height: 4rem;
+    margin-bottom: 1rem;
+    color: #d1d5db;
+}
+
+.empty-content h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    color: #374151;
+}
+
+.empty-content p {
+    margin-bottom: 1.5rem;
+}
+
+.artworks-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+}
+
+.artwork-card-wrapper {
+    position: relative;
+}
+
+.load-more,
+.loading-more {
+    display: flex;
+    justify-content: center;
+    margin-top: 2rem;
+}
+
+@media (max-width: 768px) {
+    .page-header {
+        flex-direction: column;
+        gap: 1rem;
+        align-items: stretch;
+    }
+
+    .artworks-grid {
+        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+        gap: 1rem;
+    }
+
+
+}
+</style>

ui/src/views/DownloadsView.vue

@@ -6,7 +6,8 @@
         <div class="header-actions">
           <button @click="refreshData" class="btn btn-secondary" :disabled="loading">
             <svg viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
-              <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
+              <path
+                d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
             </svg>
             刷新
           </button>
@@ -19,25 +20,13 @@
 
       <!-- 标签页 -->
       <div class="tabs">
-        <button 
+        <button @click="activeTab = 'tasks'" class="tab-btn" :class="{ active: activeTab === 'tasks' }">
-          @click="activeTab = 'tasks'" 
-          class="tab-btn"
-          :class="{ active: activeTab === 'tasks' }"
-        >
           下载任务
         </button>
-        <button 
+        <button @click="activeTab = 'history'" class="tab-btn" :class="{ active: activeTab === 'history' }">
-          @click="activeTab = 'history'" 
-          class="tab-btn"
-          :class="{ active: activeTab === 'history' }"
-        >
           下载历史
         </button>
-        <button 
+        <button @click="activeTab = 'files'" class="tab-btn" :class="{ active: activeTab === 'files' }">
-          @click="activeTab = 'files'" 
-          class="tab-btn"
-          :class="{ active: activeTab === 'files' }"
-        >
           文件管理
         </button>
       </div>
@@ -51,7 +40,8 @@
         <div v-else-if="tasks.length === 0" class="empty-section">
           <div class="empty-content">
             <svg viewBox="0 0 24 24" fill="currentColor" class="empty-icon">
-              <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
+              <path
+                d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" />
             </svg>
             <h3>暂无下载任务</h3>
             <p>开始下载作品后，任务将显示在这里</p>
@@ -59,11 +49,7 @@
         </div>
 
         <div v-else class="tasks-list">
-          <div 
+          <div v-for="task in tasks" :key="task.id" class="task-card">
-            v-for="task in tasks" 
-            :key="task.id"
-            class="task-card"
-          >
             <div class="task-header">
               <div class="task-info">
                 <h3 class="task-title">
@@ -74,11 +60,7 @@
                 </span>
               </div>
               <div class="task-actions">
-                <button 
+                <button v-if="task.status === 'downloading'" @click="cancelTask(task.id)" class="btn btn-danger btn-sm">
-                  v-if="task.status === 'downloading'"
-                  @click="cancelTask(task.id)"
-                  class="btn btn-danger btn-sm"
-                >
                   取消
                 </button>
               </div>
@@ -86,10 +68,7 @@
 
             <div class="task-progress">
               <div class="progress-bar">
-                <div 
+                <div class="progress-fill" :style="{ width: `${task.progress}%` }"></div>
-                  class="progress-fill"
-                  :style="{ width: `${task.progress}%` }"
-                ></div>
               </div>
               <div class="progress-text">
                 {{ task.completed_files }}/{{ task.total_files }} ({{ task.progress }}%)
@@ -127,7 +106,8 @@
         <div v-else-if="history.length === 0" class="empty-section">
           <div class="empty-content">
             <svg viewBox="0 0 24 24" fill="currentColor" class="empty-icon">
-              <path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/>
+              <path
+                d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" />
             </svg>
             <h3>暂无下载历史</h3>
             <p>下载完成后，历史记录将显示在这里</p>
@@ -135,11 +115,7 @@
         </div>
 
         <div v-else class="history-list">
-          <div 
+          <div v-for="item in history" :key="item.id" class="history-card">
-            v-for="item in history" 
-            :key="item.id"
-            class="history-card"
-          >
             <div class="history-header">
               <div class="history-info">
                 <h3 class="history-title">
@@ -150,10 +126,7 @@
                 </span>
               </div>
               <div class="history-actions">
-                <button 
+                <button @click="openFolder(item.download_path)" class="btn btn-text btn-sm">
-                  @click="openFolder(item.download_path)"
-                  class="btn btn-text btn-sm"
-                >
                   打开文件夹
                 </button>
               </div>
@@ -190,7 +163,8 @@
         <div v-else-if="files.length === 0" class="empty-section">
           <div class="empty-content">
             <svg viewBox="0 0 24 24" fill="currentColor" class="empty-icon">
-              <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"/>
+              <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>
             <h3>暂无下载文件</h3>
             <p>下载完成后，文件将显示在这里</p>
@@ -198,27 +172,17 @@
         </div>
 
         <div v-else class="files-list">
-          <div 
+          <div v-for="file in files" :key="`${file.artist}_${file.artwork}`" class="file-card">
-            v-for="file in files" 
-            :key="`${file.artist}_${file.artwork}`"
-            class="file-card"
-          >
             <div class="file-header">
               <div class="file-info">
                 <h3 class="file-title">{{ file.artwork }}</h3>
                 <p class="file-artist">{{ file.artist }}</p>
               </div>
               <div class="file-actions">
-                <button 
+                <button @click="openFolder(file.path)" class="btn btn-text btn-sm">
-                  @click="openFolder(file.path)"
-                  class="btn btn-text btn-sm"
-                >
                   打开
                 </button>
-                <button 
+                <button @click="deleteFile(file.artist, file.artwork)" class="btn btn-danger btn-sm">
-                  @click="deleteFile(file.artist, file.artwork)"
-                  class="btn btn-danger btn-sm"
-                >
                   删除
                 </button>
               </div>
@@ -250,8 +214,7 @@ import { ref, onMounted, onUnmounted } from 'vue';
 import { useAuthStore } from '@/stores/auth';
 import downloadService from '@/services/download';
 import type { DownloadTask } from '@/types';
-import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
+
-import ErrorMessage from '@/components/common/ErrorMessage.vue';
 
 const authStore = useAuthStore();
 

ui/src/views/HomeView.vue

@@ -21,25 +21,14 @@ onMounted(async () => {
         </p>
 
         <div class="hero-actions">
-          <router-link 
+          <router-link v-if="!isLoggedIn" to="/login" class="btn btn-primary">
-            v-if="!isLoggedIn" 
-            to="/login" 
-            class="btn btn-primary"
-          >
             立即登录
           </router-link>
-          <router-link 
+          <router-link v-else to="/search" class="btn btn-primary">
-            v-else 
-            to="/search" 
-            class="btn btn-primary"
-          >
             开始搜索
           </router-link>
 
-          <router-link 
+          <router-link to="/downloads" class="btn btn-secondary">
-            to="/downloads" 
-            class="btn btn-secondary"
-          >
             下载管理
           </router-link>
         </div>
@@ -54,7 +43,8 @@ onMounted(async () => {
           <div class="feature-card">
             <div class="feature-icon">
               <svg viewBox="0 0 24 24" fill="currentColor">
-                <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+                <path
+                  d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
               </svg>
             </div>
             <h3 class="feature-title">作品搜索</h3>
@@ -66,7 +56,21 @@ onMounted(async () => {
           <div class="feature-card">
             <div class="feature-icon">
               <svg viewBox="0 0 24 24" fill="currentColor">
-                <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"/>
+                <path
+                  d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" />
+              </svg>
+            </div>
+            <h3 class="feature-title">热门榜单</h3>
+            <p class="feature-description">
+              查看日榜、周榜、月榜热门作品，一键批量下载
+            </p>
+          </div>
+
+          <div class="feature-card">
+            <div class="feature-icon">
+              <svg viewBox="0 0 24 24" fill="currentColor">
+                <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>
             </div>
             <h3 class="feature-title">一键下载</h3>
@@ -78,7 +82,8 @@ onMounted(async () => {
           <div class="feature-card">
             <div class="feature-icon">
               <svg viewBox="0 0 24 24" fill="currentColor">
-                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+                <path
+                  d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
               </svg>
             </div>
             <h3 class="feature-title">作者管理</h3>
@@ -90,8 +95,9 @@ onMounted(async () => {
           <div class="feature-card">
             <div class="feature-icon">
               <svg viewBox="0 0 24 24" fill="currentColor">
-                <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/>
+                <path
-                <path d="M7 12h2v5H7zm4-3h2v8h-2zm4-3h2v11h-2z"/>
+                  d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z" />
+                <path d="M7 12h2v5H7zm4-3h2v8h-2zm4-3h2v11h-2z" />
               </svg>
             </div>
             <h3 class="feature-title">下载管理</h3>
@@ -103,7 +109,8 @@ onMounted(async () => {
           <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"/>
+                <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>
@@ -111,53 +118,12 @@ onMounted(async () => {
               管理本地作品仓库，分类整理和快速检索
             </p>
           </div>
+
         </div>
       </div>
     </div>
 
-    <div v-if="isLoggedIn" class="quick-actions">
-      <div class="container">
-        <h2 class="section-title">快速操作</h2>
 
-        <div class="quick-actions-grid">
-          <router-link to="/search" class="quick-action-card">
-            <div class="quick-action-icon">
-              <svg viewBox="0 0 24 24" fill="currentColor">
-                <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
-              </svg>
-            </div>
-            <span>搜索作品</span>
-          </router-link>
-
-          <router-link to="/downloads" class="quick-action-card">
-            <div class="quick-action-icon">
-              <svg viewBox="0 0 24 24" fill="currentColor">
-                <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
-              </svg>
-            </div>
-            <span>下载管理</span>
-          </router-link>
-
-          <router-link to="/artists" class="quick-action-card">
-            <div class="quick-action-icon">
-              <svg viewBox="0 0 24 24" fill="currentColor">
-                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
-              </svg>
-            </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>
   </div>
 </template>
 
@@ -302,59 +268,7 @@ onMounted(async () => {
   line-height: 1.6;
 }
 
-.quick-actions {
-  padding: 4rem 0;
-}
 
-.quick-actions-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1.5rem;
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-.quick-action-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-  padding: 2rem;
-  background: white;
-  border-radius: 1rem;
-  text-decoration: none;
-  color: #374151;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  transition: all 0.2s;
-}
-
-.quick-action-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-  color: #3b82f6;
-}
-
-.quick-action-icon {
-  width: 3rem;
-  height: 3rem;
-  background: #f3f4f6;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #6b7280;
-  transition: all 0.2s;
-}
-
-.quick-action-card:hover .quick-action-icon {
-  background: #3b82f6;
-  color: white;
-}
-
-.quick-action-icon svg {
-  width: 1.5rem;
-  height: 1.5rem;
-}
 
 @media (max-width: 768px) {
   .hero-title {
@@ -379,8 +293,6 @@ onMounted(async () => {
     grid-template-columns: 1fr;
   }
 
-  .quick-actions-grid {
+
-    grid-template-columns: 1fr;
-  }
 }
 </style>

ui/src/views/LoginView.vue

@@ -10,18 +10,14 @@
         </div>
 
         <div v-if="error" class="error-section">
-          <ErrorMessage 
+          <ErrorMessage :error="error" title="登录失败" dismissible @dismiss="clearError" />
-            :error="error" 
-            title="登录失败"
-            dismissible
-            @dismiss="clearError"
-          />
         </div>
 
         <div class="login-status" v-if="isLoggedIn">
           <div class="status-success">
             <svg viewBox="0 0 24 24" fill="currentColor">
-              <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"/>
+              <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>
             <div class="status-content">
               <h3>已登录</h3>
@@ -58,31 +54,18 @@
           <div class="code-input-section">
             <div class="input-group">
               <label for="authCode" class="input-label">授权码</label>
-              <input
+              <input id="authCode" v-model="authCode" type="text" placeholder="粘贴授权码..." class="code-input"
-                id="authCode"
+                :disabled="loading" />
-                v-model="authCode"
-                type="text"
-                placeholder="粘贴授权码..."
-                class="code-input"
-                :disabled="loading"
-              />
             </div>
 
             <div class="login-actions">
-              <button 
+              <button @click="handleLogin" class="btn btn-secondary" :disabled="loading">
-                @click="handleLogin" 
-                class="btn btn-secondary"
-                :disabled="loading"
-              >
                 <LoadingSpinner v-if="loading" text="获取登录链接..." />
                 <span v-else>获取登录链接</span>
               </button>
 
-              <button 
+              <button @click="handleManualLogin" class="btn btn-primary btn-large"
-                @click="handleManualLogin" 
+                :disabled="!authCode.trim() || loading">
-                class="btn btn-primary btn-large"
-                :disabled="!authCode.trim() || loading"
-              >
                 <LoadingSpinner v-if="loading" text="登录中..." />
                 <span v-else>完成登录</span>
               </button>
@@ -113,8 +96,7 @@
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useAuthStore } from '@/stores/auth';
-import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
+
-import ErrorMessage from '@/components/common/ErrorMessage.vue';
 
 const router = useRouter();
 const authStore = useAuthStore();

ui/src/views/RankingView.vue

@@ -13,7 +13,7 @@
       <div v-if="downloadSuccess" class="success-message">
         <div class="success-content">
           <svg viewBox="0 0 24 24" fill="currentColor" class="success-icon">
-            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
           </svg>
           <span>{{ downloadSuccess }}</span>
         </div>
@@ -21,21 +21,12 @@
 
       <div v-else class="ranking-content">
         <!-- 排行榜头部信息 -->
-        <RankingHeader 
+        <RankingHeader :currentMode="currentMode" :currentType="currentType" @mode-change="handleModeChange"
-          :currentMode="currentMode"
+          @type-change="handleTypeChange" @download-success="handleDownloadSuccess"
-          :currentType="currentType"
+          @download-error="handleDownloadError" />
-          @mode-change="handleModeChange"
-          @type-change="handleTypeChange"
-          @download-success="handleDownloadSuccess"
-          @download-error="handleDownloadError"
-        />
 
         <!-- 排行榜统计信息 -->
-        <RankingStats 
+        <RankingStats :totalCount="totalCount" :currentPage="currentPage" :totalPages="totalPages" />
-          :totalCount="totalCount"
-          :currentPage="currentPage"
-          :totalPages="totalPages"
-        />
 
         <!-- 作品列表 -->
         <div class="artworks-section">
@@ -44,12 +35,7 @@
           </div>
 
           <div v-else-if="artworks && artworks.length > 0" class="artworks-grid">
-            <ArtworkCard
+            <ArtworkCard v-for="artwork in artworks" :key="artwork.id" :artwork="artwork" @click="handleArtworkClick" />
-              v-for="artwork in artworks"
-              :key="artwork.id"
-              :artwork="artwork"
-              @click="handleArtworkClick"
-            />
           </div>
 
           <div v-else class="empty-section">
@@ -57,13 +43,8 @@
           </div>
 
           <!-- 分页导航 -->
-          <RankingPagination
+          <RankingPagination v-if="totalPages > 1 && artworks && artworks.length > 0" :currentPage="currentPage"
-            v-if="totalPages > 1 && artworks && artworks.length > 0"
+            :totalPages="totalPages" :visiblePages="visiblePages" @page-change="goToPage" />
-            :currentPage="currentPage"
-            :totalPages="totalPages"
-            :visiblePages="visiblePages"
-            @page-change="goToPage"
-          />
 
           <!-- 页面信息 -->
           <div v-if="totalPages > 1 && artworks && artworks.length > 0" class="page-info">
@@ -83,8 +64,7 @@ import { useAuthStore } from '@/stores/auth';
 import rankingService from '@/services/ranking';
 import downloadService from '@/services/download';
 import type { Artwork } from '@/types';
-import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
+
-import ErrorMessage from '@/components/common/ErrorMessage.vue';
 import ArtworkCard from '@/components/artwork/ArtworkCard.vue';
 import RankingHeader from '@/components/ranking/RankingHeader.vue';
 import RankingStats from '@/components/ranking/RankingStats.vue';
@@ -366,6 +346,7 @@ onMounted(async () => {
     transform: translateX(100%);
     opacity: 0;
   }
+
   to {
     transform: translateX(0);
     opacity: 1;

ui/src/views/SearchView.vue

@@ -167,8 +167,7 @@ import { useRouter, useRoute } from 'vue-router';
 import { useAuthStore } from '@/stores/auth';
 import artworkService from '@/services/artwork';
 import type { Artwork, SearchParams } from '@/types';
-import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
+
-import ErrorMessage from '@/components/common/ErrorMessage.vue';
 import ArtworkCard from '@/components/artwork/ArtworkCard.vue';
 import ArtistSearch from '@/components/search/ArtistSearch.vue';