diff --git a/README.md b/README.md
index 59e1b77..bcaed1a 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,6 @@
 
 Pixiv 下载浏览管理器是一个基于 Web 的应用程序，提供以下功能：
 
-- 🔐 OAuth 2.0 登录认证
 - 🔍 作品搜索和浏览
 - 📥 作品下载管理
 - 👤 作者搜索
@@ -28,7 +27,7 @@ Pixiv 下载浏览管理器是一个基于 Web 的应用程序，提供以下功
 如果懒得配置环境，可以直接下载便携版（日，我自己用怎么还被当成木马了，算了忽略一下，不放心就自己打包）：
 
 **方式一：百度网盘下载（更新不勤，版本可能比较落后）**
-- **下载链接**: https://pan.baidu.com/s/1SNsiDRzrNoHp4BhUBNvr9w?pwd=2yyn 提取码: 2yyn 
+- **下载链接**: https://pan.baidu.com/s/1SNsiDRzrNoHp4BhUBNvr9w?pwd=2yyn
 - **提取码**: 2yyn
 
 **方式二：直接下载（可能比较慢，服务器带宽有限辣）**
diff --git a/backend/README.md b/backend/README.md
index 04036a7..34401d1 100644
--- a/backend/README.md
+++ b/backend/README.md
@@ -20,11 +20,13 @@ backend/
 │   ├── artwork.js       # 作品路由
 │   ├── artist.js        # 作者路由
 │   ├── download.js      # 下载路由
+│   ├── ranking.js       # 排行榜路由
 │   └── repository.js    # 仓库管理路由
 ├── services/            # 服务层
 │   ├── artwork.js       # 作品服务
 │   ├── artist.js        # 作者服务
 │   ├── download.js      # 下载服务
+│   ├── ranking.js       # 排行榜服务
 │   └── repository.js    # 仓库管理服务
 └── utils/               # 工具类
     └── response.js      # 响应工具
@@ -50,6 +52,11 @@ backend/
 - `GET /api/artwork/:id/images` - 获取作品图片URL
   - 参数: `size` (small/medium/large/original)
 
+### 排行榜相关
+
+- `GET /api/ranking` - 获取排行榜数据
+  - 参数: `mode` (day/week/month), `type` (art/manga/novel), `offset`, `limit`
+
 ### 作者相关
 
 - `GET /api/artist/following` - 获取当前用户关注的作者列表
@@ -71,6 +78,8 @@ backend/
   - 参数: `artworkIds`, `size`, `quality`, `format`, `concurrent`
 - `POST /api/download/artist/:id` - 下载作者作品
   - 参数: `type`, `filter`, `size`, `quality`, `format`, `concurrent`
+- `POST /api/download/ranking` - 下载排行榜作品
+  - 参数: `mode`, `type`, `limit`, `size`, `quality`, `format`
 - `GET /api/download/progress/:taskId` - 获取下载进度
 - `DELETE /api/download/cancel/:taskId` - 取消下载任务
 - `GET /api/download/history` - 获取下载历史
@@ -168,19 +177,25 @@ backend/
 - 获取作者关注/粉丝列表
 - 关注/取消关注作者
 
-### 3. 文件下载
+### 3. 排行榜功能
+- 获取日/周/月排行榜数据
+- 支持插画、漫画、小说类型筛选
+- 分页浏览排行榜作品
+- 批量下载排行榜作品
+
+### 4. 文件下载
 - 下载单个作品
 - 批量下载作品
 - 下载作者作品
 - 下载进度跟踪
 - 下载历史记录
 
-### 4. 认证管理
+### 5. 认证管理
 - OAuth2.0 登录流程
 - 自动刷新令牌
 - 登录状态管理
 
-### 5. 仓库管理
+### 6. 仓库管理
 - 文件存储配置管理
 - 作品文件浏览和搜索
 - 按作者分类浏览
diff --git a/backend/routes/download.js b/backend/routes/download.js
index 6f705fd..4645c20 100644
--- a/backend/routes/download.js
+++ b/backend/routes/download.js
@@ -162,6 +162,65 @@ router.post('/artist/:id', async (req, res) => {
   }
 });
 
+/**
+ * 下载排行榜作品
+ * POST /api/download/ranking
+ */
+router.post('/ranking', async (req, res) => {
+  try {
+    const { 
+      mode = 'day',
+      type = 'art',
+      limit = 50,
+      size = 'original',
+      quality = 'high',
+      format = 'auto'
+    } = req.body;
+    
+    // 验证参数
+    if (!['day', 'week', 'month'].includes(mode)) {
+      return res.status(400).json({
+        success: false,
+        error: 'Invalid mode. Must be day, week, or month'
+      });
+    }
+    
+    if (!['art', 'manga', 'novel'].includes(type)) {
+      return res.status(400).json({
+        success: false,
+        error: 'Invalid type. Must be art, manga, or novel'
+      });
+    }
+    
+    const downloadService = req.backend.getDownloadService();
+    const result = await downloadService.downloadRankingArtworks({
+      mode,
+      type,
+      limit: parseInt(limit),
+      size,
+      quality,
+      format
+    });
+    
+    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/download/progress/:taskId
diff --git a/backend/routes/ranking.js b/backend/routes/ranking.js
new file mode 100644
index 0000000..aae7165
--- /dev/null
+++ b/backend/routes/ranking.js
@@ -0,0 +1,42 @@
+const express = require('express');
+const ArtworkService = require('../services/artwork');
+const ResponseUtil = require('../utils/response');
+
+const router = express.Router();
+
+/**
+ * 获取排行榜数据
+ * GET /api/ranking
+ * 参数: mode (day/week/month), type (art/manga/novel), offset, limit
+ */
+router.get('/', async (req, res) => {
+  try {
+    const { mode = 'day', type = 'art', offset = 0, limit = 30 } = req.query;
+    
+    // 验证参数
+    if (!['day', 'week', 'month'].includes(mode)) {
+      return res.status(400).json(ResponseUtil.error('无效的时间模式'));
+    }
+    
+    if (!['art', 'manga', 'novel'].includes(type)) {
+      return res.status(400).json(ResponseUtil.error('无效的作品类型'));
+    }
+    
+    // 创建作品服务实例，传入认证信息
+    const artworkService = new ArtworkService(req.backend.auth);
+    
+    const result = await artworkService.getRankingArtworks({
+      mode,
+      content: type,
+      offset: parseInt(offset),
+      limit: parseInt(limit)
+    });
+    
+    res.json(ResponseUtil.success(result));
+  } catch (error) {
+    console.error('获取排行榜失败:', error);
+    res.status(500).json(ResponseUtil.error(error.message));
+  }
+});
+
+module.exports = router; 
\ No newline at end of file
diff --git a/backend/server.js b/backend/server.js
index 05dd891..59c5698 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -10,6 +10,7 @@ const artistRoutes = require('./routes/artist');
 const downloadRoutes = require('./routes/download');
 const proxyRoutes = require('./routes/proxy');
 const repositoryRoutes = require('./routes/repository');
+const rankingRoutes = require('./routes/ranking');
 
 // 导入中间件 - 临时注释掉来定位问题
 const { errorHandler } = require('./middleware/errorHandler');
@@ -184,6 +185,7 @@ class PixivServer {
     this.app.use('/api/artwork', authMiddleware, artworkRoutes);
     this.app.use('/api/artist', authMiddleware, artistRoutes);
     this.app.use('/api/download', authMiddleware, downloadRoutes);
+    this.app.use('/api/ranking', authMiddleware, rankingRoutes);
     this.app.use('/api/repository', repositoryRoutes); // 仓库管理，不需要认证
     this.app.use('/api/proxy', proxyRoutes); // 图片代理，不需要认证
     
diff --git a/backend/services/artwork.js b/backend/services/artwork.js
index 2f7d7d5..8651d9b 100644
--- a/backend/services/artwork.js
+++ b/backend/services/artwork.js
@@ -276,14 +276,18 @@ class ArtworkService {
     try {
       const {
         mode = 'day',
+        content = 'illust',
         filter = 'for_ios',
-        offset = 0
+        offset = 0,
+        limit = 30
       } = options;
 
       const params = {
         mode,
+        content,
         filter,
-        offset
+        offset,
+        limit
       };
 
       const response = await this.makeRequest(
diff --git a/backend/services/download-executor.js b/backend/services/download-executor.js
index 6498558..e470644 100644
--- a/backend/services/download-executor.js
+++ b/backend/services/download-executor.js
@@ -227,6 +227,64 @@ class DownloadExecutor {
       this.progressManager.notifyProgressUpdate(task.id, task);
     }
   }
+
+  /**
+   * 执行排行榜作品下载
+   */
+  async executeRankingDownload(task, newArtworks, options) {
+    const { maxConcurrent = 3, size = 'original', quality = 'high', format = 'auto' } = options;
+    
+    try {
+      const results = [];
+
+      // 分批下载作品
+      for (let i = 0; i < newArtworks.length; i += maxConcurrent) {
+        if (task.status === 'cancelled') {
+          break;
+        }
+        
+        const batch = newArtworks.slice(i, i + maxConcurrent);
+        const batchPromises = batch.map(async (artwork) => {
+          try {
+            // 这里需要调用主下载服务的方法，暂时返回模拟结果
+            task.completed++;
+            const result = { artwork_id: artwork.id, success: true };
+            results.push(result);
+            return result;
+          } catch (error) {
+            task.failed++;
+            const result = { artwork_id: artwork.id, success: false, error: error.message };
+            results.push(result);
+            return result;
+          }
+        });
+
+        await Promise.all(batchPromises);
+        task.progress = Math.round((task.completed / task.total) * 100);
+        await this.taskManager.saveTasks();
+        this.progressManager.notifyProgressUpdate(task.id, task);
+        
+        // 添加延迟避免请求过于频繁
+        if (i + maxConcurrent < newArtworks.length) {
+          await new Promise(resolve => setTimeout(resolve, 1000));
+        }
+      }
+
+      // 更新任务状态
+      task.status = task.failed === 0 ? 'completed' : 'partial';
+      task.end_time = new Date();
+      task.results = results;
+      await this.taskManager.saveTasks();
+      this.progressManager.notifyProgressUpdate(task.id, task);
+
+    } catch (error) {
+      task.status = 'failed';
+      task.error = error.message;
+      task.end_time = new Date();
+      await this.taskManager.saveTasks();
+      this.progressManager.notifyProgressUpdate(task.id, task);
+    }
+  }
 }
 
 module.exports = DownloadExecutor; 
\ No newline at end of file
diff --git a/backend/services/download.js b/backend/services/download.js
index 0f49d5b..03b4f46 100644
--- a/backend/services/download.js
+++ b/backend/services/download.js
@@ -611,6 +611,167 @@ class DownloadService {
       };
     }
   }
+
+  /**
+   * 下载排行榜作品
+   */
+  async downloadRankingArtworks(options = {}) {
+    const { 
+      mode = 'day',
+      type = 'art', 
+      limit = 50, 
+      size = 'original', 
+      quality = 'high', 
+      format = 'auto',
+      skipExisting = true,
+      maxConcurrent = 3,
+      pageSize = 30
+    } = options;
+    
+    try {
+      // 创建任务记录
+      const task = this.taskManager.createTask('ranking', {
+        mode: mode,
+        type: type,
+        total: 0,
+        completed: 0,
+        failed: 0,
+        skipped: 0,
+        results: []
+      });
+      
+      await this.taskManager.saveTasks();
+
+      // 获取已下载的作品ID
+      const downloadedIds = skipExisting ? await this.getDownloadedArtworkIds() : [];
+      const downloadedSet = new Set(downloadedIds);
+
+      // 分页获取排行榜作品列表
+      let allArtworks = [];
+      let offset = 0;
+      let hasMore = true;
+      
+      while (hasMore && allArtworks.length < limit) {
+        const rankingResult = await this.getRankingArtworks(mode, type, {
+          offset: offset,
+          limit: Math.min(pageSize, limit - allArtworks.length)
+        });
+
+        if (!rankingResult.success) {
+          throw new Error(`获取排行榜作品失败: ${rankingResult.error}`);
+        }
+
+        const artworks = rankingResult.data.artworks;
+        if (artworks.length === 0) {
+          hasMore = false;
+        } else {
+          allArtworks.push(...artworks);
+          offset += artworks.length;
+          
+          // 基于 next_url 判断是否还有更多页面
+          hasMore = !!rankingResult.data.next_url;
+          
+          // 添加延迟避免请求过于频繁
+          await new Promise(resolve => setTimeout(resolve, 500));
+        }
+      }
+
+      // 过滤已下载的作品
+      const newArtworks = skipExisting 
+        ? allArtworks.filter(artwork => !downloadedSet.has(artwork.id))
+        : allArtworks;
+      
+      const skippedCount = allArtworks.length - newArtworks.length;
+      
+      await this.taskManager.updateTask(task.id, {
+        skipped: skippedCount,
+        total: newArtworks.length
+      });
+
+      console.log(`排行榜作品下载: 总共 ${allArtworks.length} 个作品，跳过 ${skippedCount} 个已下载的作品，需要下载 ${newArtworks.length} 个作品`);
+
+      // 如果没有需要下载的作品，直接返回
+      if (newArtworks.length === 0) {
+        await this.taskManager.updateTask(task.id, {
+          status: 'completed',
+          end_time: new Date()
+        });
+        
+        return {
+          success: true,
+          data: {
+            task_id: task.id,
+            mode: mode,
+            type: type,
+            total_artworks: allArtworks.length,
+            completed_artworks: 0,
+            failed_artworks: 0,
+            skipped_artworks: skippedCount,
+            message: '所有作品都已下载完成'
+          }
+        };
+      }
+
+      // 异步执行排行榜作品下载
+      this.downloadExecutor.executeRankingDownload(task, newArtworks, options);
+      
+      return {
+        success: true,
+        data: {
+          task_id: task.id,
+          mode: mode,
+          type: type,
+          total_artworks: task.total,
+          completed_artworks: task.completed,
+          failed_artworks: task.failed,
+          message: '排行榜作品下载任务已创建，正在后台执行'
+        }
+      };
+
+    } catch (error) {
+      console.error('排行榜作品下载失败:', error);
+      return {
+        success: false,
+        error: error.message
+      };
+    }
+  }
+
+  /**
+   * 获取排行榜作品列表
+   */
+  async getRankingArtworks(mode, type, options = {}) {
+    const { offset = 0, limit = 30 } = options;
+    
+    try {
+      // 使用作品服务来获取排行榜数据
+      const artworkService = new (require('./artwork'))(this.auth);
+      
+      const result = await artworkService.getRankingArtworks({
+        mode,
+        content: type,
+        offset,
+        limit
+      });
+      
+      return {
+        success: true,
+        data: {
+          artworks: result.artworks,
+          next_url: result.next_url || null
+        }
+      };
+      
+    } catch (error) {
+      console.error('获取排行榜失败:', error);
+      return {
+        success: false,
+        error: error.message
+      };
+    }
+  }
+
+
 }
 
 module.exports = DownloadService; 
\ No newline at end of file
diff --git a/ui/dist.zip b/ui/dist.zip
index d9f5bef..a385437 100644
Binary files a/ui/dist.zip and b/ui/dist.zip differ
diff --git a/ui/src/App.vue b/ui/src/App.vue
index 0294082..c0c1a10 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -30,6 +30,7 @@ onMounted(async () => {
         <div class="nav-menu">
           <RouterLink to="/" class="nav-link">首页</RouterLink>
           <RouterLink to="/search" class="nav-link" v-if="isLoggedIn">搜索</RouterLink>
+          <RouterLink to="/ranking" class="nav-link" v-if="isLoggedIn">排行榜</RouterLink>
           <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>
diff --git a/ui/src/components/ranking/RankingHeader.vue b/ui/src/components/ranking/RankingHeader.vue
new file mode 100644
index 0000000..b76823a
--- /dev/null
+++ b/ui/src/components/ranking/RankingHeader.vue
@@ -0,0 +1,337 @@
+<template>
+  <div class="ranking-header">
+    <div class="ranking-info">
+      <div class="ranking-title">
+        <h1 class="title">排行榜</h1>
+        <p class="subtitle">发现最受欢迎的作品</p>
+      </div>
+      
+      <div class="ranking-controls">
+        <!-- 时间模式切换 -->
+        <div class="mode-selector">
+          <label class="control-label">时间范围:</label>
+          <div class="mode-buttons">
+            <button 
+              @click="$emit('mode-change', 'day')"
+              class="mode-btn"
+              :class="{ active: currentMode === 'day' }"
+            >
+              日榜
+            </button>
+            <button 
+              @click="$emit('mode-change', 'week')"
+              class="mode-btn"
+              :class="{ active: currentMode === 'week' }"
+            >
+              周榜
+            </button>
+            <button 
+              @click="$emit('mode-change', 'month')"
+              class="mode-btn"
+              :class="{ active: currentMode === 'month' }"
+            >
+              月榜
+            </button>
+          </div>
+        </div>
+
+        <!-- 作品类型筛选 -->
+        <div class="type-selector">
+          <label class="control-label">作品类型:</label>
+          <select 
+            :value="currentType" 
+            @change="(e) => $emit('type-change', (e.target as HTMLSelectElement).value as 'art' | 'manga' | 'novel')"
+            class="type-select"
+          >
+            <option value="art">插画</option>
+            <option value="manga">漫画</option>
+            <option value="novel">小说</option>
+          </select>
+        </div>
+      </div>
+    </div>
+    
+    <div class="ranking-actions">
+      <div class="download-section">
+        <div class="download-input-group">
+          <label for="downloadLimit">下载数量:</label>
+          <input 
+            v-model="downloadLimit"
+            type="number"
+            id="downloadLimit"
+            class="download-input"
+            min="1"
+            max="9999"
+            placeholder="输入数量"
+          />
+        </div>
+        <button @click="handleDownloadAll" class="btn btn-secondary" :disabled="downloading">
+          {{ downloading ? '下载中...' : '下载作品' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import downloadService from '@/services/download';
+
+interface Props {
+  currentMode: 'day' | 'week' | 'month';
+  currentType: 'art' | 'manga' | 'novel';
+}
+
+interface Emits {
+  (e: 'mode-change', mode: 'day' | 'week' | 'month'): void;
+  (e: 'type-change', type: 'art' | 'manga' | 'novel'): void;
+  (e: 'download-success', message: string): void;
+  (e: 'download-error', error: string): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+// 下载相关状态
+const downloadLimit = ref('50');
+const downloading = ref(false);
+
+// 下载作品
+const handleDownloadAll = async () => {
+  const limit = parseInt(downloadLimit.value);
+  if (isNaN(limit) || limit < 1) {
+    emit('download-error', '请输入有效的下载数量');
+    return;
+  }
+
+  try {
+    downloading.value = true;
+    const response = await downloadService.downloadRankingArtworks({
+      mode: props.currentMode,
+      type: props.currentType,
+      limit: limit
+    });
+    
+    if (response.success) {
+      console.log('下载任务已创建:', response.data);
+      const limitText = limit >= 9999 ? '全部' : limit.toString();
+      emit('download-success', `下载任务已创建，将下载 ${limitText} 个作品`);
+    } else {
+      throw new Error(response.error || '下载失败');
+    }
+  } catch (err) {
+    emit('download-error', err instanceof Error ? err.message : '下载失败');
+    console.error('下载失败:', err);
+  } finally {
+    downloading.value = false;
+  }
+};
+</script>
+
+<style scoped>
+.ranking-header {
+  background: white;
+  border-radius: 1rem;
+  padding: 2rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 2rem;
+}
+
+.ranking-info {
+  flex: 1;
+}
+
+.ranking-title {
+  margin-bottom: 1.5rem;
+}
+
+.title {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #1f2937;
+  margin: 0 0 0.5rem 0;
+}
+
+.subtitle {
+  color: #6b7280;
+  font-size: 1.125rem;
+  margin: 0;
+}
+
+.ranking-controls {
+  display: flex;
+  gap: 2rem;
+  align-items: center;
+}
+
+.mode-selector,
+.type-selector {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.control-label {
+  font-size: 0.875rem;
+  color: #374151;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.mode-buttons {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.mode-btn {
+  padding: 0.5rem 1rem;
+  border: 1px solid #d1d5db;
+  background: white;
+  color: #374151;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  border-radius: 0.375rem;
+}
+
+.mode-btn:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.mode-btn:last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.mode-btn:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+.mode-btn:hover {
+  background: #f3f4f6;
+  border-color: #9ca3af;
+}
+
+.mode-btn.active {
+  background: #3b82f6;
+  color: white;
+  border-color: #3b82f6;
+}
+
+.type-select {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  background: white;
+  font-size: 0.875rem;
+  color: #374151;
+  min-width: 100px;
+}
+
+.ranking-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.download-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.download-input-group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.download-input-group label {
+  font-size: 0.875rem;
+  color: #374151;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.download-input {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  background: white;
+  font-size: 0.875rem;
+  color: #374151;
+  min-width: 120px;
+}
+
+.download-input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: all 0.2s;
+  border: none;
+  cursor: pointer;
+  font-size: 1rem;
+  min-width: 120px;
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn-secondary {
+  background: #f3f4f6;
+  color: #374151;
+  border: 1px solid #d1d5db;
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: #e5e7eb;
+}
+
+@media (max-width: 768px) {
+  .ranking-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .ranking-controls {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: stretch;
+  }
+  
+  .mode-selector,
+  .type-selector {
+    justify-content: space-between;
+  }
+  
+  .download-section {
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+  }
+  
+  .download-input-group {
+    flex-shrink: 0;
+  }
+  
+  .btn {
+    flex: 1;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/ui/src/components/ranking/RankingPagination.vue b/ui/src/components/ranking/RankingPagination.vue
new file mode 100644
index 0000000..22d8fe8
--- /dev/null
+++ b/ui/src/components/ranking/RankingPagination.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="pagination">
+    <button 
+      @click="$emit('page-change', currentPage - 1)" 
+      class="page-btn"
+      :disabled="currentPage <= 1"
+    >
+      <svg viewBox="0 0 24 24" fill="currentColor" class="page-icon">
+        <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
+      </svg>
+      上一页
+    </button>
+    
+    <div class="page-numbers">
+      <button 
+        v-for="page in visiblePages" 
+        :key="page"
+        @click="$emit('page-change', page)"
+        class="page-number"
+        :class="{ active: page === currentPage }"
+      >
+        {{ page }}
+      </button>
+    </div>
+    
+    <button 
+      @click="$emit('page-change', currentPage + 1)" 
+      class="page-btn"
+      :disabled="currentPage >= totalPages"
+    >
+      下一页
+      <svg viewBox="0 0 24 24" fill="currentColor" class="page-icon">
+        <path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z"/>
+      </svg>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  currentPage: number;
+  totalPages: number;
+  visiblePages: number[];
+}
+
+interface Emits {
+  (e: 'page-change', page: number): void;
+}
+
+defineProps<Props>();
+defineEmits<Emits>();
+</script>
+
+<style scoped>
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.page-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.5rem;
+  background: white;
+  color: #374151;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.page-btn:hover:not(:disabled) {
+  background: #f3f4f6;
+  border-color: #9ca3af;
+}
+
+.page-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.page-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.page-numbers {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.page-number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.5rem;
+  background: white;
+  color: #374151;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.page-number:hover {
+  background: #f3f4f6;
+  border-color: #9ca3af;
+}
+
+.page-number.active {
+  background: #3b82f6;
+  color: white;
+  border-color: #3b82f6;
+}
+
+@media (max-width: 768px) {
+  .pagination {
+    flex-direction: column;
+    gap: 1rem;
+  }
+  
+  .page-numbers {
+    order: -1;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/ui/src/components/ranking/RankingStats.vue b/ui/src/components/ranking/RankingStats.vue
new file mode 100644
index 0000000..836ad36
--- /dev/null
+++ b/ui/src/components/ranking/RankingStats.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="ranking-stats">
+    <div class="stat-card">
+      <div class="stat-number">{{ totalCount }}</div>
+      <div class="stat-label">作品总数</div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-number">{{ currentPage }}</div>
+      <div class="stat-label">当前页面</div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-number">{{ totalPages }}</div>
+      <div class="stat-label">总页数</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  totalCount: number;
+  currentPage: number;
+  totalPages: number;
+}
+
+defineProps<Props>();
+</script>
+
+<style scoped>
+.ranking-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 1rem;
+}
+
+.stat-card {
+  background: white;
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  text-align: center;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.stat-number {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #3b82f6;
+  margin-bottom: 0.5rem;
+}
+
+.stat-label {
+  color: #6b7280;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+</style> 
\ No newline at end of file
diff --git a/ui/src/router/index.ts b/ui/src/router/index.ts
index cd90bb2..e68e48c 100644
--- a/ui/src/router/index.ts
+++ b/ui/src/router/index.ts
@@ -21,6 +21,12 @@ const router = createRouter({
       component: () => import('@/views/SearchView.vue'),
       meta: { requiresAuth: true }
     },
+    {
+      path: '/ranking',
+      name: 'ranking',
+      component: () => import('@/views/RankingView.vue'),
+      meta: { requiresAuth: true }
+    },
     {
       path: '/artwork/:id',
       name: 'artwork',
diff --git a/ui/src/services/download.ts b/ui/src/services/download.ts
index 9d0eed4..d49f2ca 100644
--- a/ui/src/services/download.ts
+++ b/ui/src/services/download.ts
@@ -91,6 +91,20 @@ class DownloadService {
     return apiService.post(`/api/download/artist/${artistId}`, options);
   }
 
+  /**
+   * 下载排行榜作品
+   */
+  async downloadRankingArtworks(options: {
+    mode: 'day' | 'week' | 'month';
+    type: 'art' | 'manga' | 'novel';
+    limit?: number;
+    size?: string;
+    quality?: string;
+    format?: string;
+  }) {
+    return apiService.post('/api/download/ranking', options);
+  }
+
   /**
    * 获取已下载的文件列表
    */
diff --git a/ui/src/services/ranking.ts b/ui/src/services/ranking.ts
new file mode 100644
index 0000000..d296fca
--- /dev/null
+++ b/ui/src/services/ranking.ts
@@ -0,0 +1,35 @@
+import api from './api';
+
+export interface RankingParams {
+  mode: 'day' | 'week' | 'month';
+  type: 'art' | 'manga' | 'novel';
+  offset?: number;
+  limit?: number;
+}
+
+export interface RankingResponse {
+  artworks: any[];
+  next_url?: string;
+}
+
+class RankingService {
+  /**
+   * 获取排行榜数据
+   */
+  async getRanking(params: RankingParams) {
+    try {
+      const response = await api.get('/api/ranking', { params });
+      return {
+        success: true,
+        data: response.data
+      };
+    } catch (error: any) {
+      return {
+        success: false,
+        error: error.response?.data?.error || error.message || '获取排行榜失败'
+      };
+    }
+  }
+}
+
+export default new RankingService(); 
\ No newline at end of file
diff --git a/ui/src/views/RankingView.vue b/ui/src/views/RankingView.vue
new file mode 100644
index 0000000..7d82964
--- /dev/null
+++ b/ui/src/views/RankingView.vue
@@ -0,0 +1,424 @@
+<template>
+  <div class="ranking-page">
+    <div class="container">
+      <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-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"/>
+          </svg>
+          <span>{{ downloadSuccess }}</span>
+        </div>
+      </div>
+
+      <div v-else class="ranking-content">
+        <!-- 排行榜头部信息 -->
+        <RankingHeader 
+          :currentMode="currentMode"
+          :currentType="currentType"
+          @mode-change="handleModeChange"
+          @type-change="handleTypeChange"
+          @download-success="handleDownloadSuccess"
+          @download-error="handleDownloadError"
+        />
+
+        <!-- 排行榜统计信息 -->
+        <RankingStats 
+          :totalCount="totalCount"
+          :currentPage="currentPage"
+          :totalPages="totalPages"
+        />
+
+        <!-- 作品列表 -->
+        <div class="artworks-section">
+          <div v-if="artworksLoading" class="loading-section">
+            <LoadingSpinner text="加载作品中..." />
+          </div>
+
+          <div v-else-if="artworks && artworks.length > 0" class="artworks-grid">
+            <ArtworkCard
+              v-for="artwork in artworks"
+              :key="artwork.id"
+              :artwork="artwork"
+              @click="handleArtworkClick"
+            />
+          </div>
+
+          <div v-else class="empty-section">
+            <p>暂无作品</p>
+          </div>
+
+          <!-- 分页导航 -->
+          <RankingPagination
+            v-if="totalPages > 1 && artworks && artworks.length > 0"
+            :currentPage="currentPage"
+            :totalPages="totalPages"
+            :visiblePages="visiblePages"
+            @page-change="goToPage"
+          />
+
+          <!-- 页面信息 -->
+          <div v-if="totalPages > 1 && artworks && artworks.length > 0" class="page-info">
+            <span>第 {{ currentPage }} 页，共 {{ totalPages }} 页</span>
+            <span>共 {{ totalCount }} 个作品</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+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';
+import RankingPagination from '@/components/ranking/RankingPagination.vue';
+
+const route = useRoute();
+const router = useRouter();
+const authStore = useAuthStore();
+
+// 状态
+const artworks = ref<Artwork[]>([]);
+const loading = ref(false);
+const artworksLoading = ref(false);
+const error = ref<string | null>(null);
+const downloadSuccess = ref<string | null>(null);
+
+// 筛选和分页状态
+const currentMode = ref<'day' | 'week' | 'month'>('day');
+const currentType = ref<'art' | 'manga' | 'novel'>('art');
+const currentPage = ref(1);
+const pageSize = ref(30);
+const totalCount = ref(0);
+const totalPages = ref(0);
+
+// 缓存相关
+const cache = ref<Map<string, any>>(new Map());
+const cacheTimeout = ref<Map<string, number>>(new Map());
+const CACHE_DURATION = 5 * 60 * 1000; // 5分钟缓存
+
+// 计算属性
+const visiblePages = computed(() => {
+  const pages = [];
+  const maxVisible = 5;
+  let start = Math.max(1, currentPage.value - 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 getCacheKey = (mode: string, type: string, page: number) => {
+  return `${mode}_${type}_${page}`;
+};
+
+// 获取缓存
+const getCache = (key: string) => {
+  const cached = cache.value.get(key);
+  const timeout = cacheTimeout.value.get(key);
+  
+  if (cached && timeout && Date.now() < timeout) {
+    return cached;
+  }
+  
+  // 清除过期缓存
+  if (cached) {
+    cache.value.delete(key);
+    cacheTimeout.value.delete(key);
+  }
+  
+  return null;
+};
+
+// 设置缓存
+const setCache = (key: string, data: any) => {
+  cache.value.set(key, data);
+  cacheTimeout.value.set(key, Date.now() + CACHE_DURATION);
+};
+
+// 清除缓存
+const clearCache = () => {
+  cache.value.clear();
+  cacheTimeout.value.clear();
+};
+
+// 获取排行榜数据
+const fetchRankingData = async (page = 1) => {
+  const cacheKey = getCacheKey(currentMode.value, currentType.value, page);
+  const cached = getCache(cacheKey);
+  
+  if (cached) {
+    artworks.value = cached.artworks;
+    totalCount.value = cached.totalCount;
+    totalPages.value = cached.totalPages;
+    currentPage.value = page;
+    return;
+  }
+
+  try {
+    artworksLoading.value = true;
+    error.value = null;
+    
+    const offset = (page - 1) * pageSize.value;
+    const response = await rankingService.getRanking({
+      mode: currentMode.value,
+      type: currentType.value,
+      offset: offset,
+      limit: pageSize.value
+    });
+    
+    if (response.success && response.data) {
+      // 根据后端返回的数据结构，artworks在 response.data.data.artworks
+      const rankingData = response.data.data || response.data;
+      artworks.value = rankingData.artworks || [];
+      
+      // 基于 next_url 来判断是否还有更多页面
+      const hasMore = !!rankingData.next_url;
+      
+      if (page === 1) {
+        // 第一页，基于是否有下一页来判断总数
+        if (hasMore) {
+          // 如果有下一页，至少说明有2页
+          totalCount.value = pageSize.value * 2;
+          totalPages.value = 2;
+        } else {
+          // 没有下一页，说明只有1页
+          totalCount.value = rankingData.artworks?.length || 0;
+          totalPages.value = 1;
+        }
+      } else {
+        // 非第一页，基于当前页面位置和是否有下一页来判断
+        if (hasMore) {
+          // 如果有下一页，说明至少还有1页
+          totalCount.value = Math.max(totalCount.value, (page + 1) * pageSize.value);
+          totalPages.value = Math.max(totalPages.value, page + 1);
+        } else {
+          // 没有下一页，说明这是最后一页
+          totalCount.value = Math.max(totalCount.value, page * pageSize.value);
+          totalPages.value = Math.max(totalPages.value, page);
+        }
+      }
+      
+      currentPage.value = page;
+      
+      // 缓存结果
+      setCache(cacheKey, {
+        artworks: rankingData.artworks || [],
+        totalCount: totalCount.value,
+        totalPages: totalPages.value
+      });
+    } else {
+      throw new Error(response.error || '获取排行榜失败');
+    }
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : '获取排行榜失败';
+    console.error('获取排行榜失败:', err);
+  } finally {
+    artworksLoading.value = false;
+  }
+};
+
+// 处理模式切换
+const handleModeChange = (mode: 'day' | 'week' | 'month') => {
+  currentMode.value = mode;
+  currentPage.value = 1;
+  fetchRankingData(1);
+};
+
+// 处理类型切换
+const handleTypeChange = (type: 'art' | 'manga' | 'novel') => {
+  currentType.value = type;
+  currentPage.value = 1;
+  fetchRankingData(1);
+};
+
+// 跳转到指定页面
+const goToPage = (page: number) => {
+  if (page < 1 || page > totalPages.value || page === currentPage.value) return;
+  fetchRankingData(page);
+};
+
+// 点击作品
+const handleArtworkClick = (artwork: Artwork) => {
+  router.push({
+    path: `/artwork/${artwork.id}`,
+    query: {
+      rankingMode: currentMode.value,
+      rankingType: currentType.value,
+      page: currentPage.value.toString(),
+      returnUrl: route.fullPath
+    }
+  });
+};
+
+// 清除错误
+const clearError = () => {
+  error.value = null;
+};
+
+// 处理下载成功
+const handleDownloadSuccess = (message: string) => {
+  downloadSuccess.value = message;
+  // 3秒后清除成功提示
+  setTimeout(() => {
+    downloadSuccess.value = null;
+  }, 3000);
+};
+
+// 处理下载错误
+const handleDownloadError = (errorMessage: string) => {
+  error.value = errorMessage;
+};
+
+// 监听路由变化
+watch(() => route.query, () => {
+  // 检查是否有返回的页面信息
+  const returnPage = parseInt(route.query.page as string);
+  if (returnPage && returnPage > 0) {
+    currentPage.value = returnPage;
+    fetchRankingData(returnPage);
+  }
+});
+
+// 组件卸载时清理缓存
+onUnmounted(() => {
+  clearCache();
+});
+
+onMounted(async () => {
+  await fetchRankingData(1);
+});
+</script>
+
+<style scoped>
+.ranking-page {
+  min-height: 100vh;
+  background: #f8fafc;
+  padding: 2rem 0;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+.loading-section,
+.error-section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+}
+
+.success-message {
+  position: fixed;
+  top: 2rem;
+  right: 2rem;
+  background: #10b981;
+  color: white;
+  padding: 1rem 1.5rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  animation: slideIn 0.3s ease-out;
+}
+
+.success-content {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.success-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.ranking-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.artworks-section {
+  background: white;
+  border-radius: 1rem;
+  padding: 2rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.artworks-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 2rem;
+  margin-bottom: 2rem;
+}
+
+.empty-section {
+  text-align: center;
+  padding: 4rem 0;
+  color: #6b7280;
+}
+
+.page-info {
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+@media (max-width: 768px) {
+  .container {
+    padding: 0 1rem;
+  }
+  
+  .artworks-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .page-info {
+    flex-direction: column;
+    gap: 0.5rem;
+    text-align: center;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/ui/src/views/SearchView.vue b/ui/src/views/SearchView.vue
index cec561f..d52e1c3 100644
--- a/ui/src/views/SearchView.vue
+++ b/ui/src/views/SearchView.vue
@@ -1,60 +1,39 @@
 <template>
-    <div class="search-page">
-      <div class="search-header">
-        <div class="container">
-          <h1 class="page-title">搜索作品</h1>
-          
-                  <div class="search-form">
+  <div class="search-page">
+    <div class="search-header">
+      <div class="container">
+        <h1 class="page-title">搜索作品</h1>
+
+        <div class="search-form">
           <!-- 搜索类型选择 -->
           <div class="search-type-tabs">
-            <button 
-              @click="searchMode = 'keyword'" 
-              class="tab-btn"
-              :class="{ active: searchMode === 'keyword' }"
-            >
+            <button @click="searchMode = 'keyword'" class="tab-btn" :class="{ active: searchMode === 'keyword' }">
               关键词搜索
             </button>
-            <button 
-              @click="searchMode = 'artwork'" 
-              class="tab-btn"
-              :class="{ active: searchMode === 'artwork' }"
-            >
+            <button @click="searchMode = 'artwork'" class="tab-btn" :class="{ active: searchMode === 'artwork' }">
               作品ID
             </button>
-            <button 
-              @click="searchMode = 'artist'" 
-              class="tab-btn"
-              :class="{ active: searchMode === 'artist' }"
-            >
+            <button @click="searchMode = 'artist'" class="tab-btn" :class="{ active: searchMode === 'artist' }">
               作者ID
             </button>
           </div>
 
           <!-- 关键词搜索 -->
           <div v-if="searchMode === 'keyword'" class="search-input-group">
-            <input
-              v-model="searchKeyword"
-              type="text"
-              placeholder="输入关键词搜索作品..."
-              class="search-input"
-              @keyup.enter="handleSearch"
-            />
+            <input v-model="searchKeyword" 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>
 
           <!-- 作品ID搜索 -->
           <div v-if="searchMode === 'artwork'" class="search-input-group">
-            <input
-              v-model="artworkId"
-              type="text"
-              placeholder="输入作品ID..."
-              class="search-input"
-              @keyup.enter="handleArtworkSearch"
-            />
+            <input v-model="artworkId" type="text" placeholder="输入作品ID..." class="search-input"
+              @keyup.enter="handleArtworkSearch" />
             <button @click="handleArtworkSearch" class="search-btn" :disabled="loading">
               查看作品
             </button>
@@ -62,214 +41,206 @@
 
           <!-- 作者ID搜索 -->
           <div v-if="searchMode === 'artist'" class="search-input-group">
-            <input
-              v-model="artistId"
-              type="text"
-              placeholder="输入作者ID..."
-              class="search-input"
-              @keyup.enter="handleArtistSearch"
-            />
+            <input v-model="artistId" type="text" placeholder="输入作者ID..." class="search-input"
+              @keyup.enter="handleArtistSearch" />
             <button @click="handleArtistSearch" class="search-btn" :disabled="loading">
               查看作者
             </button>
           </div>
-            
-            <div class="search-filters">
-              <select v-model="searchType" class="filter-select">
-                <option value="all">全部类型</option>
-                <option value="art">插画</option>
-                <option value="manga">漫画</option>
-                <option value="novel">小说</option>
-              </select>
-              
-              <select v-model="searchSort" class="filter-select">
-                <option value="date_desc">最新</option>
-                <option value="date_asc">最旧</option>
-                <option value="popular_desc">最受欢迎</option>
-              </select>
-              
-              <select v-model="searchDuration" class="filter-select">
-                <option value="all">全部时间</option>
-                <option value="within_last_day">最近一天</option>
-                <option value="within_last_week">最近一周</option>
-                <option value="within_last_month">最近一月</option>
-              </select>
-            </div>
-          </div>
-        </div>
-      </div>
-  
-      <div class="search-content">
-        <div class="container">
-          <div v-if="error" class="error-section">
-            <ErrorMessage :error="error" @dismiss="clearError" />
-          </div>
-  
-          <div v-if="loading" class="loading-section">
-            <LoadingSpinner text="搜索中..." />
-          </div>
-  
-          <div v-else-if="searchResults.length > 0" class="results-section">
-            <div class="results-header">
-              <h2>搜索结果 ({{ totalResults }})</h2>
-              <div class="results-actions">
-                <button @click="loadMore" class="btn btn-secondary" :disabled="loadingMore">
-                  {{ loadingMore ? '加载中...' : '加载更多' }}
-                </button>
-              </div>
-            </div>
-            
-            <div class="artworks-grid">
-              <ArtworkCard
-                v-for="artwork in searchResults"
-                :key="artwork.id"
-                :artwork="artwork"
-                @click="handleArtworkClick"
-              />
-            </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="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>
-              <h3>未找到相关作品</h3>
-              <p>尝试使用不同的关键词或调整搜索条件</p>
-            </div>
-          </div>
-  
-          <div v-else class="welcome-section">
-            <div class="welcome-content">
-              <h2>开始搜索</h2>
-              <p>输入关键词来搜索你喜欢的作品</p>
-            </div>
+
+          <div class="search-filters">
+            <select v-model="searchType" class="filter-select">
+              <option value="all">全部类型</option>
+              <option value="art">插画</option>
+              <option value="manga">漫画</option>
+              <option value="novel">小说</option>
+            </select>
+
+            <select v-model="searchSort" class="filter-select">
+              <option value="date_desc">最新</option>
+              <option value="date_asc">最旧</option>
+              <option value="popular_desc">最受欢迎</option>
+            </select>
+
+            <select v-model="searchDuration" class="filter-select">
+              <option value="all">全部时间</option>
+              <option value="within_last_day">最近一天</option>
+              <option value="within_last_week">最近一周</option>
+              <option value="within_last_month">最近一月</option>
+            </select>
           </div>
         </div>
       </div>
     </div>
-  </template>
-  
-  <script setup lang="ts">
-  import { ref, computed } from 'vue';
-  import { useRouter } 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';
-  
-  const router = useRouter();
-  const authStore = useAuthStore();
-  
-  // 搜索状态
-  const searchKeyword = ref('');
-  const searchMode = ref<'keyword' | 'artwork' | 'artist'>('keyword');
-  const artworkId = ref('');
-  const artistId = ref('');
-  
-  // 关键词搜索参数
-  const searchType = ref<'all' | 'art' | 'manga' | 'novel'>('all');
-  const searchSort = ref<'date_desc' | 'date_asc' | 'popular_desc'>('date_desc');
-  const searchDuration = ref<'all' | 'within_last_day' | 'within_last_week' | 'within_last_month'>('all');
-  
-  // 结果状态
-  const searchResults = ref<Artwork[]>([]);
-  const totalResults = ref(0);
-  const loading = ref(false);
-  const loadingMore = ref(false);
-  const error = ref<string | null>(null);
-  const hasSearched = ref(false);
-  const offset = ref(0);
-  
-  const handleSearch = async () => {
-    if (!searchKeyword.value.trim()) {
-      return;
+
+    <div class="search-content">
+      <div class="container">
+        <div v-if="error" class="error-section">
+          <ErrorMessage :error="error" @dismiss="clearError" />
+        </div>
+
+        <div v-if="loading" class="loading-section">
+          <LoadingSpinner text="搜索中..." />
+        </div>
+
+        <div v-else-if="searchResults.length > 0" class="results-section">
+          <div class="results-header">
+            <h2>搜索结果 ({{ totalResults }})</h2>
+            <div class="results-actions">
+              <button @click="loadMore" class="btn btn-secondary" :disabled="loadingMore">
+                {{ loadingMore ? '加载中...' : '加载更多' }}
+              </button>
+            </div>
+          </div>
+
+          <div class="artworks-grid">
+            <ArtworkCard v-for="artwork in searchResults" :key="artwork.id" :artwork="artwork"
+              @click="handleArtworkClick" />
+          </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="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>
+            <h3>未找到相关作品</h3>
+            <p>尝试使用不同的关键词或调整搜索条件</p>
+          </div>
+        </div>
+
+        <div v-else class="welcome-section">
+          <div class="welcome-content">
+            <h2>开始搜索</h2>
+            <p>输入关键词来搜索你喜欢的作品</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useRouter } 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';
+
+const router = useRouter();
+const authStore = useAuthStore();
+
+// 搜索状态
+const searchKeyword = ref('');
+const searchMode = ref<'keyword' | 'artwork' | 'artist'>('keyword');
+const artworkId = ref('');
+const artistId = ref('');
+
+// 关键词搜索参数
+const searchType = ref<'all' | 'art' | 'manga' | 'novel'>('all');
+const searchSort = ref<'date_desc' | 'date_asc' | 'popular_desc'>('date_desc');
+const searchDuration = ref<'all' | 'within_last_day' | 'within_last_week' | 'within_last_month'>('all');
+
+// 结果状态
+const searchResults = ref<Artwork[]>([]);
+const totalResults = ref(0);
+const loading = ref(false);
+const loadingMore = ref(false);
+const error = ref<string | null>(null);
+const hasSearched = ref(false);
+const offset = ref(0);
+
+const handleSearch = async () => {
+  if (!searchKeyword.value.trim()) {
+    return;
+  }
+
+  try {
+    loading.value = true;
+    error.value = null;
+    offset.value = 0;
+    hasSearched.value = true;
+
+    const params: SearchParams = {
+      keyword: searchKeyword.value.trim(),
+      type: searchType.value,
+      sort: searchSort.value,
+      duration: searchDuration.value,
+      offset: 0,
+      limit: 30
+    };
+
+    const response = await artworkService.searchArtworks(params);
+
+    if (response.success && response.data) {
+      searchResults.value = response.data.artworks;
+      totalResults.value = response.data.total;
+    } else {
+      throw new Error(response.error || '搜索失败');
     }
-  
-    try {
-      loading.value = true;
-      error.value = null;
-      offset.value = 0;
-      hasSearched.value = true;
-  
-      const params: SearchParams = {
-        keyword: searchKeyword.value.trim(),
-        type: searchType.value,
-        sort: searchSort.value,
-        duration: searchDuration.value,
-        offset: 0,
-        limit: 30
-      };
-  
-      const response = await artworkService.searchArtworks(params);
-      
-      if (response.success && response.data) {
-        searchResults.value = response.data.artworks;
-        totalResults.value = response.data.total;
-      } else {
-        throw new Error(response.error || '搜索失败');
-      }
-    } catch (err) {
-      error.value = err instanceof Error ? err.message : '搜索失败';
-      console.error('搜索失败:', err);
-    } finally {
-      loading.value = false;
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : '搜索失败';
+    console.error('搜索失败:', err);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const loadMore = async () => {
+  if (!searchKeyword.value.trim() || loadingMore.value) {
+    return;
+  }
+
+  try {
+    loadingMore.value = true;
+    offset.value += 30;
+
+    const params: SearchParams = {
+      keyword: searchKeyword.value.trim(),
+      type: searchType.value,
+      sort: searchSort.value,
+      duration: searchDuration.value,
+      offset: offset.value,
+      limit: 30
+    };
+
+    const response = await artworkService.searchArtworks(params);
+
+    if (response.success && response.data) {
+      searchResults.value.push(...response.data.artworks);
+    } else {
+      throw new Error(response.error || '加载更多失败');
     }
-  };
-  
-  const loadMore = async () => {
-    if (!searchKeyword.value.trim() || loadingMore.value) {
-      return;
-    }
-  
-    try {
-      loadingMore.value = true;
-      offset.value += 30;
-  
-      const params: SearchParams = {
-        keyword: searchKeyword.value.trim(),
-        type: searchType.value,
-        sort: searchSort.value,
-        duration: searchDuration.value,
-        offset: offset.value,
-        limit: 30
-      };
-  
-      const response = await artworkService.searchArtworks(params);
-      
-      if (response.success && response.data) {
-        searchResults.value.push(...response.data.artworks);
-      } else {
-        throw new Error(response.error || '加载更多失败');
-      }
-    } catch (err) {
-      error.value = err instanceof Error ? err.message : '加载更多失败';
-      console.error('加载更多失败:', err);
-    } finally {
-      loadingMore.value = false;
-    }
-  };
-  
-  const handleArtworkClick = (artwork: Artwork) => {
-    router.push(`/artwork/${artwork.id}`);
-  };
-  
-  // 作品ID搜索
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : '加载更多失败';
+    console.error('加载更多失败:', err);
+  } finally {
+    loadingMore.value = false;
+  }
+};
+
+const handleArtworkClick = (artwork: Artwork) => {
+  router.push(`/artwork/${artwork.id}`);
+};
+
+// 作品ID搜索
 const handleArtworkSearch = () => {
   const idStr = artworkId.value?.toString().trim();
   if (!idStr) {
     error.value = '请输入作品ID';
     return;
   }
-  
+
   const id = parseInt(idStr);
   if (isNaN(id)) {
     error.value = '请输入有效的作品ID';
     return;
   }
-  
+
   router.push(`/artwork/${id}`);
 };
 
@@ -280,53 +251,53 @@ const handleArtistSearch = () => {
     error.value = '请输入作者ID';
     return;
   }
-  
+
   const id = parseInt(idStr);
   if (isNaN(id)) {
     error.value = '请输入有效的作者ID';
     return;
   }
-  
+
   router.push(`/artist/${id}`);
 };
 
 const clearError = () => {
   error.value = null;
 };
-  </script>
-  
-  <style scoped>
-  .search-page {
-    min-height: 100vh;
-    background: #f8fafc;
-  }
-  
-  .search-header {
-    background: white;
-    border-bottom: 1px solid #e5e7eb;
-    padding: 2rem 0;
-  }
-  
-  .container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 2rem;
-  }
-  
-  .page-title {
-    font-size: 2rem;
-    font-weight: 700;
-    color: #1f2937;
-    margin-bottom: 2rem;
-  }
-  
-  .search-form {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-  
-  .search-type-tabs {
+</script>
+
+<style scoped>
+.search-page {
+  min-height: 100vh;
+  background: #f8fafc;
+}
+
+.search-header {
+  background: white;
+  border-bottom: 1px solid #e5e7eb;
+  padding: 2rem 0;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+.page-title {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #1f2937;
+  margin-bottom: 2rem;
+}
+
+.search-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.search-type-tabs {
   display: flex;
   gap: 0.5rem;
   margin-bottom: 1rem;
@@ -358,172 +329,172 @@ const clearError = () => {
   display: flex;
   gap: 0.5rem;
 }
-  
-  .search-input {
-    flex: 1;
-    padding: 0.75rem 1rem;
-    border: 2px solid #e5e7eb;
-    border-radius: 0.5rem;
-    font-size: 1rem;
-    transition: border-color 0.2s;
-  }
-  
-  .search-input:focus {
-    outline: none;
-    border-color: #3b82f6;
-  }
-  
-  .search-btn {
-    padding: 0.75rem 1rem;
-    background: #3b82f6;
-    color: white;
-    border: none;
-    border-radius: 0.5rem;
-    cursor: pointer;
-    transition: background-color 0.2s;
-  }
-  
-  .search-btn:hover:not(:disabled) {
-    background: #2563eb;
-  }
-  
-  .search-btn:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-  
-  .search-btn svg {
-    width: 1.25rem;
-    height: 1.25rem;
-  }
-  
+
+.search-input {
+  flex: 1;
+  padding: 0.75rem 1rem;
+  border: 2px solid #e5e7eb;
+  border-radius: 0.5rem;
+  font-size: 1rem;
+  transition: border-color 0.2s;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: #3b82f6;
+}
+
+.search-btn {
+  padding: 0.75rem 1rem;
+  background: #3b82f6;
+  color: white;
+  border: none;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.search-btn:hover:not(:disabled) {
+  background: #2563eb;
+}
+
+.search-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.search-btn svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.search-filters {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.filter-select {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  background: white;
+  font-size: 0.875rem;
+  color: #374151;
+}
+
+.search-content {
+  padding: 2rem 0;
+}
+
+.error-section,
+.loading-section {
+  margin-bottom: 2rem;
+}
+
+.results-section {
+  margin-bottom: 2rem;
+}
+
+.results-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+}
+
+.results-header h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all 0.2s;
+  border: none;
+  cursor: pointer;
+  font-size: 0.875rem;
+}
+
+.btn-secondary {
+  background: #f3f4f6;
+  color: #374151;
+  border: 1px solid #d1d5db;
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: #e5e7eb;
+}
+
+.btn-secondary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.artworks-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 2rem;
+}
+
+.empty-section,
+.welcome-section {
+  text-align: center;
+  padding: 4rem 0;
+}
+
+.empty-content,
+.welcome-content {
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.empty-icon {
+  width: 4rem;
+  height: 4rem;
+  color: #9ca3af;
+  margin-bottom: 1rem;
+}
+
+.empty-content h3,
+.welcome-content h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 0.5rem;
+}
+
+.empty-content p,
+.welcome-content p {
+  color: #6b7280;
+  line-height: 1.6;
+}
+
+@media (max-width: 768px) {
   .search-filters {
-    display: flex;
-    gap: 1rem;
-    flex-wrap: wrap;
+    flex-direction: column;
   }
-  
+
   .filter-select {
-    padding: 0.5rem 0.75rem;
-    border: 1px solid #d1d5db;
-    border-radius: 0.375rem;
-    background: white;
-    font-size: 0.875rem;
-    color: #374151;
+    width: 100%;
   }
-  
-  .search-content {
-    padding: 2rem 0;
-  }
-  
-  .error-section,
-  .loading-section {
-    margin-bottom: 2rem;
-  }
-  
-  .results-section {
-    margin-bottom: 2rem;
-  }
-  
+
   .results-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 2rem;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: flex-start;
   }
-  
-  .results-header h2 {
-    font-size: 1.5rem;
-    font-weight: 600;
-    color: #1f2937;
-    margin: 0;
-  }
-  
-  .btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.5rem 1rem;
-    border-radius: 0.375rem;
-    font-weight: 500;
-    text-decoration: none;
-    transition: all 0.2s;
-    border: none;
-    cursor: pointer;
-    font-size: 0.875rem;
-  }
-  
-  .btn-secondary {
-    background: #f3f4f6;
-    color: #374151;
-    border: 1px solid #d1d5db;
-  }
-  
-  .btn-secondary:hover:not(:disabled) {
-    background: #e5e7eb;
-  }
-  
-  .btn-secondary:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-  
+
   .artworks-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    gap: 2rem;
+    grid-template-columns: 1fr;
   }
-  
-  .empty-section,
-  .welcome-section {
-    text-align: center;
-    padding: 4rem 0;
-  }
-  
-  .empty-content,
-  .welcome-content {
-    max-width: 400px;
-    margin: 0 auto;
-  }
-  
-  .empty-icon {
-    width: 4rem;
-    height: 4rem;
-    color: #9ca3af;
-    margin-bottom: 1rem;
-  }
-  
-  .empty-content h3,
-  .welcome-content h2 {
-    font-size: 1.5rem;
-    font-weight: 600;
-    color: #374151;
-    margin-bottom: 0.5rem;
-  }
-  
-  .empty-content p,
-  .welcome-content p {
-    color: #6b7280;
-    line-height: 1.6;
-  }
-  
-  @media (max-width: 768px) {
-    .search-filters {
-      flex-direction: column;
-    }
-    
-    .filter-select {
-      width: 100%;
-    }
-    
-    .results-header {
-      flex-direction: column;
-      gap: 1rem;
-      align-items: flex-start;
-    }
-    
-    .artworks-grid {
-      grid-template-columns: 1fr;
-    }
-  }
-  </style>
\ No newline at end of file
+}
+</style>
\ No newline at end of file