修复下一页图标不显示问题，增加缓存前端配置页面

ui/src/App.vue

@@ -2,6 +2,7 @@
 import { RouterLink, RouterView } from 'vue-router'
 import { computed, onMounted } from 'vue'
 import { useAuthStore } from '@/stores/auth'
+import SettingsWidget from '@/components/common/SettingsWidget.vue'
 
 const authStore = useAuthStore()
 
@@ -68,6 +69,9 @@ onMounted(async () => {
         <p>&copy; 2025 Pixiv Manager. 仅供学习和个人使用。</p>
       </div>
     </footer>
+
+    <!-- 设置小组件 - 只在登录时显示 -->
+    <SettingsWidget v-if="isLoggedIn" />
   </div>
 </template>
 

ui/src/components/common/SettingsWidget.vue

@@ -0,0 +1,633 @@
+<template>
+  <div class="settings-widget">
+    <!-- 设置按钮 -->
+    <button @click="toggleSettings" class="settings-toggle" :class="{ active: isOpen }" title="设置">
+      <svg viewBox="0 0 24 24" fill="currentColor" class="settings-icon">
+        <path
+          d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z" />
+      </svg>
+    </button>
+
+    <!-- 设置面板 -->
+    <div v-if="isOpen" class="settings-panel">
+      <div class="settings-header">
+        <h3>设置</h3>
+        <button @click="toggleSettings" class="close-btn" title="关闭">
+          <svg viewBox="0 0 24 24" fill="currentColor" class="close-icon">
+            <path
+              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+          </svg>
+        </button>
+      </div>
+
+      <div class="settings-content">
+        <!-- 缓存设置 -->
+        <div class="settings-section">
+          <h4>缓存设置</h4>
+
+          <div v-if="loading" class="loading">
+            <LoadingSpinner text="加载中..." />
+          </div>
+
+          <div v-else-if="error" class="error">
+            <ErrorMessage :error="error" @dismiss="clearError" />
+          </div>
+
+          <!-- 成功提示 -->
+          <div v-if="successMessage" 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>{{ successMessage }}</span>
+            </div>
+          </div>
+
+          <div v-else class="cache-settings">
+            <!-- 缓存统计 -->
+            <div class="cache-stats">
+              <div class="stat-item">
+                <span class="stat-label">缓存文件数:</span>
+                <span class="stat-value">{{ stats?.fileCount || 0 }}</span>
+              </div>
+              <div class="stat-item">
+                <span class="stat-label">缓存大小:</span>
+                <span class="stat-value">{{ formatFileSize(stats?.totalSize || 0) }}</span>
+              </div>
+              <div class="stat-item">
+                <span class="stat-label">使用率:</span>
+                <span class="stat-value">{{ Math.round((stats?.usagePercentage || 0) * 100) }}%</span>
+              </div>
+            </div>
+
+            <!-- 缓存配置 -->
+            <div class="config-form">
+              <div class="form-group">
+                <label>
+                  <input type="checkbox" v-model="config.enabled" />
+                  启用缓存
+                </label>
+              </div>
+
+              <div class="form-group">
+                <label>最大缓存大小 (MB)</label>
+                <input type="number" v-model.number="maxSizeMB" min="10" max="10000" />
+              </div>
+
+              <div class="form-group">
+                <label>缓存过期时间 (小时)</label>
+                <input type="number" v-model.number="maxAgeHours" min="1" max="720" />
+              </div>
+
+              <div class="form-group">
+                <label>清理间隔 (小时)</label>
+                <input type="number" v-model.number="cleanupIntervalHours" min="1" max="24" />
+              </div>
+
+              <div class="form-group">
+                <label>
+                  <input type="checkbox" v-model="config.proxy.enabled" />
+                  启用代理
+                </label>
+              </div>
+
+              <div class="form-group">
+                <label>代理超时 (秒)</label>
+                <input type="number" v-model.number="timeoutSeconds" min="5" max="300" />
+              </div>
+
+              <div class="form-group">
+                <label>重试次数</label>
+                <input type="number" v-model.number="config.proxy.retryCount" min="0" max="10" />
+              </div>
+            </div>
+
+            <!-- 缓存操作 -->
+            <div class="cache-actions">
+              <button @click="saveConfig" class="btn btn-primary" :disabled="saving">
+                {{ saving ? '保存中...' : '保存配置' }}
+              </button>
+              <button @click="clearExpiredCache" class="btn btn-secondary" :disabled="clearing">
+                {{ clearing ? '清理中...' : '清理过期缓存' }}
+              </button>
+              <button @click="clearAllCache" class="btn btn-danger" :disabled="clearing">
+                {{ clearing ? '清理中...' : '清理所有缓存' }}
+              </button>
+              <button @click="resetConfig" class="btn btn-warning" :disabled="resetting">
+                {{ resetting ? '重置中...' : '重置配置' }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import cacheService, { type CacheConfig, type CacheStats } from '@/services/cache';
+import LoadingSpinner from './LoadingSpinner.vue';
+import ErrorMessage from './ErrorMessage.vue';
+
+// 状态
+const isOpen = ref(false);
+const loading = ref(false);
+const error = ref<string | null>(null);
+const clearing = ref(false);
+const resetting = ref(false);
+const saving = ref(false);
+const successMessage = ref<string | null>(null);
+
+// 数据
+const stats = ref<CacheStats | null>(null);
+const config = ref<CacheConfig>({
+  maxAge: 24 * 60 * 60 * 1000,
+  maxSize: 100 * 1024 * 1024,
+  cleanupInterval: 60 * 60 * 1000,
+  enabled: true,
+  proxy: {
+    enabled: true,
+    timeout: 30000,
+    retryCount: 3,
+    retryDelay: 1000,
+  },
+  allowedExtensions: ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.bmp'],
+  lastUpdated: new Date().toISOString()
+});
+
+// 计算属性 - 转换为用户友好的单位
+const maxSizeMB = computed({
+  get: () => Math.round(config.value.maxSize / (1024 * 1024)),
+  set: (value) => {
+    config.value.maxSize = value * 1024 * 1024;
+  }
+});
+
+const maxAgeHours = computed({
+  get: () => Math.round(config.value.maxAge / (1000 * 60 * 60)),
+  set: (value) => {
+    config.value.maxAge = value * 1000 * 60 * 60;
+  }
+});
+
+const cleanupIntervalHours = computed({
+  get: () => Math.round(config.value.cleanupInterval / (1000 * 60 * 60)),
+  set: (value) => {
+    config.value.cleanupInterval = value * 1000 * 60 * 60;
+  }
+});
+
+const timeoutSeconds = computed({
+  get: () => Math.round(config.value.proxy.timeout / 1000),
+  set: (value) => {
+    config.value.proxy.timeout = value * 1000;
+  }
+});
+
+// 方法
+const toggleSettings = () => {
+  isOpen.value = !isOpen.value;
+  if (isOpen.value) {
+    loadData();
+  }
+};
+
+const loadData = async () => {
+  try {
+    loading.value = true;
+    error.value = null;
+
+    // 并行加载配置和统计信息
+    const [configResponse, statsResponse] = await Promise.all([
+      cacheService.getCacheConfig(),
+      cacheService.getCacheStats()
+    ]);
+
+    if (configResponse.success && configResponse.data) {
+      config.value = configResponse.data;
+    }
+
+    if (statsResponse.success && statsResponse.data) {
+      stats.value = statsResponse.data;
+    }
+
+    // 标记初始加载完成
+    isInitialLoad.value = false;
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : '加载设置失败';
+    console.error('加载设置失败:', err);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const saveConfig = async () => {
+  try {
+    saving.value = true;
+    const response = await cacheService.updateCacheConfig(config.value);
+    if (response.success && response.data) {
+      config.value = response.data;
+      showSuccess('配置已保存');
+    }
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : '保存配置失败';
+    console.error('保存配置失败:', err);
+  } finally {
+    saving.value = false;
+  }
+};
+
+const clearExpiredCache = async () => {
+  try {
+    clearing.value = true;
+    const response = await cacheService.clearExpiredCache();
+    if (response.success) {
+      // 重新加载统计信息
+      await loadData();
+    }
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : '清理过期缓存失败';
+    console.error('清理过期缓存失败:', err);
+  } finally {
+    clearing.value = false;
+  }
+};
+
+const clearAllCache = async () => {
+  if (!confirm('确定要清理所有缓存吗？这将删除所有缓存的图片文件。')) {
+    return;
+  }
+
+  try {
+    clearing.value = true;
+    const response = await cacheService.clearAllCache();
+    if (response.success) {
+      // 重新加载统计信息
+      await loadData();
+    }
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : '清理所有缓存失败';
+    console.error('清理所有缓存失败:', err);
+  } finally {
+    clearing.value = false;
+  }
+};
+
+const resetConfig = async () => {
+  if (!confirm('确定要重置缓存配置为默认值吗？')) {
+    return;
+  }
+
+  try {
+    resetting.value = true;
+    const response = await cacheService.resetCacheConfig();
+    if (response.success && response.data) {
+      config.value = response.data;
+    }
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : '重置配置失败';
+    console.error('重置配置失败:', err);
+  } finally {
+    resetting.value = false;
+  }
+};
+
+const clearError = () => {
+  error.value = null;
+};
+
+const showSuccess = (message: string) => {
+  successMessage.value = message;
+  setTimeout(() => {
+    successMessage.value = null;
+  }, 3000);
+};
+
+const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return '0 B';
+
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+};
+
+// 是否正在加载初始数据
+const isInitialLoad = ref(true);
+
+onMounted(() => {
+  // 初始加载数据
+  loadData();
+});
+</script>
+
+<style scoped>
+.settings-widget {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  z-index: 1000;
+}
+
+.settings-toggle {
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 50%;
+  background: #3b82f6;
+  color: white;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.settings-toggle:hover {
+  background: #2563eb;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
+}
+
+.settings-toggle.active {
+  background: #1d4ed8;
+}
+
+.settings-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.settings-panel {
+  position: absolute;
+  bottom: 4rem;
+  right: 0;
+  width: 400px;
+  max-height: 600px;
+  background: white;
+  border-radius: 1rem;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+  border: 1px solid #e5e7eb;
+  overflow: hidden;
+  animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.settings-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem;
+  border-bottom: 1px solid #e5e7eb;
+  background: #f9fafb;
+}
+
+.settings-header h3 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 0.375rem;
+  color: #6b7280;
+  transition: all 0.2s;
+}
+
+.close-btn:hover {
+  background: #e5e7eb;
+  color: #374151;
+}
+
+.close-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.settings-content {
+  padding: 1.5rem;
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.settings-section {
+  margin-bottom: 2rem;
+}
+
+.settings-section h4 {
+  margin: 0 0 1rem 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.loading {
+  display: flex;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.error {
+  margin-bottom: 1rem;
+}
+
+.success-message {
+  background: #10b981;
+  color: white;
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  margin-bottom: 1rem;
+  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 {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.cache-stats {
+  background: #f9fafb;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+  border: 1px solid #e5e7eb;
+}
+
+.stat-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.stat-item:last-child {
+  margin-bottom: 0;
+}
+
+.stat-label {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+.stat-value {
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.config-form {
+  margin-bottom: 1.5rem;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: #374151;
+  font-size: 0.875rem;
+}
+
+.form-group input[type="number"],
+.form-group input[type="text"] {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  transition: border-color 0.2s;
+}
+
+.form-group input[type="number"]:focus,
+.form-group input[type="text"]:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.form-group input[type="checkbox"] {
+  margin-right: 0.5rem;
+}
+
+.cache-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.btn {
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: all 0.2s;
+  border: none;
+  cursor: pointer;
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: #3b82f6;
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #2563eb;
+}
+
+.btn-secondary {
+  background: #f3f4f6;
+  color: #374151;
+  border: 1px solid #d1d5db;
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: #e5e7eb;
+}
+
+.btn-danger {
+  background: #ef4444;
+  color: white;
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: #dc2626;
+}
+
+.btn-warning {
+  background: #f59e0b;
+  color: white;
+}
+
+.btn-warning:hover:not(:disabled) {
+  background: #d97706;
+}
+
+@media (max-width: 768px) {
+  .settings-widget {
+    bottom: 1rem;
+    right: 1rem;
+  }
+
+  .settings-panel {
+    width: calc(100vw - 2rem);
+    max-width: 400px;
+    bottom: 3.5rem;
+  }
+
+  .settings-content {
+    padding: 1rem;
+  }
+
+  .cache-actions {
+    flex-direction: column;
+  }
+}
+</style>

ui/src/router/index.ts

@@ -63,7 +63,24 @@ const router = createRouter({
       component: () => import('@/views/BookmarksView.vue'),
       meta: { requiresAuth: true }
     }
-  ]
+  ],
+  scrollBehavior(to, from, savedPosition) {
+    // 如果有保存的位置（浏览器前进/后退），则恢复到该位置
+    if (savedPosition) {
+      return savedPosition
+    }
+    
+    // 如果有锚点，则滚动到锚点位置
+    if (to.hash) {
+      return {
+        el: to.hash,
+        behavior: 'smooth'
+      }
+    }
+    
+    // 否则滚动到页面顶部
+    return { top: 0 }
+  }
 })
 
 // 路由守卫

ui/src/services/cache.ts

@@ -0,0 +1,72 @@
+import apiService from './api';
+import type { ApiResponse } from '@/types';
+
+export interface CacheConfig {
+  maxAge: number;
+  maxSize: number;
+  cleanupInterval: number;
+  enabled: boolean;
+  proxy: {
+    enabled: boolean;
+    timeout: number;
+    retryCount: number;
+    retryDelay: number;
+  };
+  allowedExtensions: string[];
+  lastUpdated: string;
+}
+
+export interface CacheStats {
+  fileCount: number;
+  totalSize: number;
+  maxSize: number;
+  maxAge: number;
+  usagePercentage: number;
+}
+
+class CacheService {
+  /**
+   * 获取缓存统计信息
+   */
+  async getCacheStats(): Promise<ApiResponse<CacheStats>> {
+    return apiService.get<CacheStats>('/api/proxy/cache/stats');
+  }
+
+  /**
+   * 获取缓存配置
+   */
+  async getCacheConfig(): Promise<ApiResponse<CacheConfig>> {
+    return apiService.get<CacheConfig>('/api/proxy/cache/config');
+  }
+
+  /**
+   * 更新缓存配置
+   */
+  async updateCacheConfig(config: Partial<CacheConfig>): Promise<ApiResponse<CacheConfig>> {
+    return apiService.put<CacheConfig>('/api/proxy/cache/config', config);
+  }
+
+  /**
+   * 重置缓存配置为默认值
+   */
+  async resetCacheConfig(): Promise<ApiResponse<CacheConfig>> {
+    return apiService.post<CacheConfig>('/api/proxy/cache/config/reset');
+  }
+
+  /**
+   * 清理所有缓存
+   */
+  async clearAllCache(): Promise<ApiResponse<{ message: string }>> {
+    return apiService.delete<{ message: string }>('/api/proxy/cache');
+  }
+
+  /**
+   * 清理过期缓存
+   */
+  async clearExpiredCache(): Promise<ApiResponse<{ message: string }>> {
+    return apiService.delete<{ message: string }>('/api/proxy/cache/expired');
+  }
+}
+
+export const cacheService = new CacheService();
+export default cacheService; 

ui/src/views/ArtistView.vue

@@ -100,7 +100,7 @@
             <button @click="goToPage(currentPage + 1)" class="page-btn" :disabled="currentPage >= totalPages">
               下一页
               <svg viewBox="0 0 24 24" fill="currentColor" class="page-icon">
-                <path d="8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" />
+                <path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" />
               </svg>
             </button>
           </div>

ui/src/views/ArtworkView.vue

@@ -253,8 +253,9 @@ const fetchArtworkDetail = async () => {
     loading.value = true;
     error.value = null;
 
-    // 清理之前的任务状态
+    // 立即清理所有下载相关状态
     currentTask.value = null;
+    downloading.value = false;
     stopTaskStreaming();
 
     const response = await artworkService.getArtworkDetail(artworkId);
@@ -307,7 +308,10 @@ const handleDownload = async () => {
   if (!artwork.value) return;
 
   try {
+    // 清理之前的任务状态
+    currentTask.value = null;
     downloading.value = true;
+
     // 如果已经下载过，则强制重新下载（跳过现有文件检查）
     const skipExisting = !isDownloaded.value;
     const response = await downloadService.downloadArtwork(artwork.value.id, {
@@ -383,9 +387,12 @@ const startTaskStreaming = (taskId: string) => {
 
         // 延迟检查下载状态，确保文件写入完成
         setTimeout(async () => {
-          await checkDownloadStatus(artwork.value!.id);
+          // 检查当前页面是否还是同一个作品，避免页面切换后的状态更新
+          if (artwork.value && artwork.value.id === task.artwork_id) {
+            await checkDownloadStatus(artwork.value.id);
             // 清理任务状态，显示下载完成状态
             currentTask.value = null;
+          }
         }, 1000);
       }
     },
@@ -404,6 +411,9 @@ const stopTaskStreaming = () => {
     sseConnection.value();
     sseConnection.value = null;
   }
+  // 确保清理任务状态
+  currentTask.value = null;
+  downloading.value = false;
 };
 
 // 更新任务状态
@@ -501,6 +511,11 @@ const fetchArtistArtworks = async () => {
 // 导航到上一个作品
 const navigateToPrevious = () => {
   if (previousArtwork.value && !loading.value) {
+    // 立即清理下载任务状态
+    currentTask.value = null;
+    downloading.value = false;
+    stopTaskStreaming();
+
     // 立即设置加载状态
     loading.value = true;
 
@@ -519,6 +534,11 @@ const navigateToPrevious = () => {
 // 导航到下一个作品
 const navigateToNext = () => {
   if (nextArtwork.value && !loading.value) {
+    // 立即清理下载任务状态
+    currentTask.value = null;
+    downloading.value = false;
+    stopTaskStreaming();
+
     // 立即设置加载状态
     loading.value = true;
 
@@ -630,8 +650,12 @@ watch(() => route.params.id, (newId, oldId) => {
   // 如果是同一个ID，不重复加载
   if (newId === oldId) return;
 
-  // 清理之前的任务状态
+  // 确保页面滚动到顶部
+  window.scrollTo(0, 0);
+
+  // 立即清理所有下载相关状态
   currentTask.value = null;
+  downloading.value = false;
   stopTaskStreaming();
 
   // 重新获取作品详情
@@ -660,6 +684,9 @@ const handleKeydown = (event: KeyboardEvent) => {
 };
 
 onMounted(() => {
+  // 确保页面滚动到顶部
+  window.scrollTo(0, 0);
+
   fetchArtworkDetail();
   if (showNavigation.value) {
     fetchArtistArtworks();

ui/src/views/RankingView.vue

@@ -46,6 +46,18 @@
           <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="jump-to-page">
+            <div class="jump-input-group">
+              <label for="jumpPage">跳转到:</label>
+              <input v-model="jumpPageInput" type="number" id="jumpPage" class="jump-input" :min="1" :max="totalPages"
+                placeholder="页码" @keyup.enter="handleJumpToPage" />
+              <button @click="handleJumpToPage" class="jump-btn" :disabled="!jumpPageInput || jumping">
+                {{ jumping ? '跳转中...' : '跳转' }}
+              </button>
+            </div>
+          </div>
+
           <!-- 页面信息 -->
           <div v-if="totalPages > 1 && artworks && artworks.length > 0" class="page-info">
             <span>第 {{ currentPage }} 页，共 {{ totalPages }} 页</span>
@@ -89,6 +101,10 @@ const pageSize = ref(30);
 const totalCount = ref(0);
 const totalPages = ref(0);
 
+// 跳转到指定页面相关
+const jumpPageInput = ref<string | number>('');
+const jumping = ref(false);
+
 // 缓存相关
 const cache = ref<Map<string, any>>(new Map());
 const cacheTimeout = ref<Map<string, number>>(new Map());
@@ -227,6 +243,16 @@ const fetchRankingData = async (page = 1) => {
 const handleModeChange = (mode: 'day' | 'week' | 'month') => {
   currentMode.value = mode;
   currentPage.value = 1;
+
+  // 更新URL参数
+  router.push({
+    query: {
+      mode: mode,
+      type: currentType.value,
+      page: undefined
+    }
+  });
+
   fetchRankingData(1);
 };
 
@@ -234,12 +260,32 @@ const handleModeChange = (mode: 'day' | 'week' | 'month') => {
 const handleTypeChange = (type: 'art' | 'manga' | 'novel') => {
   currentType.value = type;
   currentPage.value = 1;
+
+  // 更新URL参数
+  router.push({
+    query: {
+      mode: currentMode.value,
+      type: type,
+      page: undefined
+    }
+  });
+
   fetchRankingData(1);
 };
 
 // 跳转到指定页面
 const goToPage = (page: number) => {
   if (page < 1 || page > totalPages.value || page === currentPage.value) return;
+
+  // 更新URL参数
+  router.push({
+    query: {
+      mode: currentMode.value,
+      type: currentType.value,
+      page: page.toString()
+    }
+  });
+
   fetchRankingData(page);
 };
 
@@ -275,13 +321,64 @@ const handleDownloadError = (errorMessage: string) => {
   error.value = errorMessage;
 };
 
+// 跳转到指定页面
+const handleJumpToPage = async () => {
+  const page = parseInt(jumpPageInput.value as string);
+  if (isNaN(page) || page < 1) {
+    error.value = '请输入有效的页码';
+    return;
+  }
+
+  jumping.value = true;
+  jumpPageInput.value = ''; // 清空输入框
+
+  // 更新URL参数
+  router.push({
+    query: {
+      mode: currentMode.value,
+      type: currentType.value,
+      page: page.toString()
+    }
+  });
+
+  try {
+    await fetchRankingData(page);
+  } finally {
+    jumping.value = false;
+  }
+};
+
 // 监听路由变化
 watch(() => route.query, () => {
-  // 检查是否有返回的页面信息
+  // 恢复模式、类型和页码状态
-  const returnPage = parseInt(route.query.page as string);
+  const urlMode = route.query.mode as string;
-  if (returnPage && returnPage > 0) {
+  const urlType = route.query.type as string;
+  const urlPage = route.query.page as string;
+
+  let hasChanges = false;
+
+  // 恢复模式
+  if (urlMode && ['day', 'week', 'month'].includes(urlMode) && urlMode !== currentMode.value) {
+    currentMode.value = urlMode as 'day' | 'week' | 'month';
+    hasChanges = true;
+  }
+
+  // 恢复类型
+  if (urlType && ['art', 'manga', 'novel'].includes(urlType) && urlType !== currentType.value) {
+    currentType.value = urlType as 'art' | 'manga' | 'novel';
+    hasChanges = true;
+  }
+
+  // 恢复页码
+  const returnPage = parseInt(urlPage);
+  if (returnPage && returnPage > 0 && returnPage !== currentPage.value) {
     currentPage.value = returnPage;
-    fetchRankingData(returnPage);
+    hasChanges = true;
+  }
+
+  // 如果有变化，重新获取数据
+  if (hasChanges) {
+    fetchRankingData(currentPage.value);
   }
 });
 
@@ -291,7 +388,29 @@ onUnmounted(() => {
 });
 
 onMounted(async () => {
+  // 检查URL参数并恢复状态
+  const urlMode = route.query.mode as string;
+  const urlType = route.query.type as string;
+  const urlPage = route.query.page as string;
+
+  // 恢复模式
+  if (urlMode && ['day', 'week', 'month'].includes(urlMode)) {
+    currentMode.value = urlMode as 'day' | 'week' | 'month';
+  }
+
+  // 恢复类型
+  if (urlType && ['art', 'manga', 'novel'].includes(urlType)) {
+    currentType.value = urlType as 'art' | 'manga' | 'novel';
+  }
+
+  // 恢复页码
+  const returnPage = parseInt(urlPage);
+  if (returnPage && returnPage > 0) {
+    currentPage.value = returnPage;
+    await fetchRankingData(returnPage);
+  } else {
     await fetchRankingData(1);
+  }
 });
 </script>
 
@@ -387,6 +506,57 @@ onMounted(async () => {
   font-size: 0.875rem;
 }
 
+.jump-to-page {
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+}
+
+.jump-input-group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: #f3f4f6;
+  border: 1px solid #d1d5db;
+  border-radius: 0.5rem;
+  padding: 0.5rem 1rem;
+  width: fit-content;
+}
+
+.jump-input {
+  border: none;
+  background: transparent;
+  padding: 0.5rem 0.25rem;
+  font-size: 0.875rem;
+  width: 50px;
+  text-align: center;
+}
+
+.jump-input:focus {
+  outline: none;
+}
+
+.jump-btn {
+  background: #4f46e5;
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  border: none;
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: background-color 0.2s ease;
+}
+
+.jump-btn:hover:not(:disabled) {
+  background: #4338ca;
+}
+
+.jump-btn:disabled {
+  background: #9ca3af;
+  cursor: not-allowed;
+  color: #6b7280;
+}
+
 @media (max-width: 768px) {
   .container {
     padding: 0 1rem;
@@ -401,5 +571,23 @@ onMounted(async () => {
     gap: 0.5rem;
     text-align: center;
   }
+
+  .jump-to-page {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .jump-input-group {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .jump-input {
+    width: 100%;
+  }
+
+  .jump-btn {
+    width: 100%;
+  }
 }
 </style>