chore: initial commit - CloudSearch v0.0.2

2026-05-15 05:50:50 +08:00
commit d83225d736
102 changed files with 37926 additions and 0 deletions
--- a/packages/frontend/src/pages/HomePage.vue
+++ b/packages/frontend/src/pages/HomePage.vue
@@ -0,0 +1,363 @@
+<template>
+  <div class="home-page">
+    <div class="hero-section">
+      <template v-if="configLoaded">
+        <img v-if="siteLogo" :src="siteLogo" :alt="siteName || 'CloudSearch'" class="logo-img" @error="(e: any) => { (e.target as HTMLElement).style.display='none'; siteLogo='' }" />
+        <div v-else class="logo-text">{{ siteName || 'CloudSearch' }}</div>
+      </template>
+      <div class="search-box">
+        <el-input
+          v-model="query"
+          placeholder="搜索网盘资源，或粘贴视频/网盘链接..."
+          size="large"
+          clearable
+          @keyup.enter="handleSearch"
+        >
+          <template #prefix>
+            <el-icon><Search /></el-icon>
+          </template>
+        </el-input>
+        <el-button type="primary" size="large" @click="handleSearch" class="search-btn">
+          搜 索
+        </el-button>
+      </div>
+      <div class="quote-section" v-if="currentQuote">
+        <span class="quote-text">「 {{ currentQuote }} 」</span>
+        <span class="quote-author">---{{ quoteAuthor }}</span>
+      </div>
+    </div>
+
+    <div class="content-section">
+      <div v-if="categories.length > 0" class="rankings-grid">
+        <div
+          v-for="cat in categories"
+          :key="cat.category"
+          class="rank-panel"
+        >
+          <div class="panel-header">
+            <span class="panel-title">{{ getCategoryIcon(cat.category) }} {{ cat.label }}</span>
+            <div class="panel-tabs">
+              <span class="panel-tab" :class="{ active: activeTab[cat.category] === 'hot' }" @click="switchTab(cat.category, 'hot')">热榜</span>
+              <span class="panel-tab" :class="{ active: activeTab[cat.category] === 'newest' }" @click="switchTab(cat.category, 'newest')">最新</span>
+            </div>
+          </div>
+          <div class="panel-body">
+            <div
+              v-for="(item, idx) in visibleItems(cat)"
+              :key="cat.category + '-' + idx"
+              class="rank-item"
+              @click="searchTag(item.keyword)"
+            >
+              <span class="rank-idx" :class="{ 'top-three': idx < 3 }">{{ idx + 1 }}</span>
+              <span class="rank-name">{{ item.keyword }}</span>
+              <span class="rank-cnt">{{ formatCount(item) }}</span>
+            </div>
+            <!-- 展开按钮 -->
+            <div v-if="hasMoreItems(cat)" class="rank-expand" @click="expandCategory(cat.category)">
+              展开全部 ▼
+            </div>
+          </div>
+          <div class="panel-footer">
+            <span v-if="cat.category === 'hotsite'">基于本站搜索数据</span>
+            <span v-else-if="cat.category === 'donghua' || cat.category === 'global_anime'">数据来源：Bilibili</span>
+            <span v-else-if="cat.category === 'movie' || cat.category === 'tv'">数据来源：百度</span>
+            <span v-else>数据来源：TMDB</span>
+            <span class="footer-time">{{ fetchedAt }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="siteDisclaimer" class="site-footer">
+      <div class="footer-inner">{{ siteDisclaimer }}</div>
+      <div class="footer-actions">
+        <el-button class="footer-disclaimer-btn" size="small" @click="openDisclaimer">📜 免责声明</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { Search } from '@element-plus/icons-vue'
+import { getCategorizedRankings, getSiteConfig } from '../api'
+
+const router = useRouter()
+
+const query = ref('')
+const categories = ref<any[]>([])
+const expanded = reactive<Record<string, boolean>>({})
+const activeTab = reactive<Record<string, string>>({})
+const siteLogo = ref('')
+const siteName = ref('')
+const siteDisclaimer = ref('')
+const configLoaded = ref(false)
+const currentQuote = ref('')
+const quoteAuthor = ref('')
+const fetchedAt = ref('')
+
+const INITIAL_SHOW = 8
+
+const CATEGORY_ICONS: Record<string, string> = {
+  movie: '🎬', western_movie: '🎥', western_tv: '🌍',
+  donghua: '🐉', global_anime: '🌐',
+  tv: '📺',
+  niche: '💎', hotsite: '🏆',
+}
+
+function getCategoryIcon(cat: string): string {
+  return CATEGORY_ICONS[cat] || '📋'
+}
+
+function formatCount(item: any): string {
+  const parts: string[] = []
+  if (item.rating) {
+    parts.push(`⭐${item.rating}`)
+  }
+  if (item.searchCount > 0) {
+    const n = item.searchCount
+    if (n >= 100000000) {
+      parts.push(`${(n / 100000000).toFixed(1)}亿`)
+    } else if (n >= 10000) {
+      parts.push(`${(n / 10000).toFixed(0)}万`)
+    } else {
+      parts.push(String(n))
+    }
+  }
+  return parts.join(' ') || ''
+}
+
+function getItems(cat: any): any[] {
+  const tab = activeTab[cat.category] || 'hot'
+  return tab === 'hot' ? (cat.hot || []) : (cat.newest || [])
+}
+
+function visibleItems(cat: any): any[] {
+  const items = getItems(cat)
+  return expanded[cat.category] ? items : items.slice(0, INITIAL_SHOW)
+}
+
+function hasMoreItems(cat: any): boolean {
+  const items = getItems(cat)
+  return items.length > INITIAL_SHOW && !expanded[cat.category]
+}
+
+function expandCategory(category: string) {
+  expanded[category] = true
+}
+
+function switchTab(category: string, tab: string) {
+  activeTab[category] = tab
+  // 切换标签时收起展开
+  expanded[category] = false
+}
+
+function openDisclaimer() {
+  window.open('/disclaimer/', '_blank')
+}
+
+onMounted(async () => {
+  // 一言 API
+  try {
+    const res = await fetch('https://v1.hitokoto.cn/')
+    const data = await res.json()
+    currentQuote.value = data.hitokoto || ''
+    quoteAuthor.value = data.from_who || data.from || ''
+  } catch {
+    currentQuote.value = '学而时习之，不亦说乎。'
+    quoteAuthor.value = '孔子'
+  }
+
+  try {
+    const [catsData, siteCfg] = await Promise.all([
+      getCategorizedRankings(),
+      getSiteConfig(),
+    ])
+    // 新格式: { fetchedAt, categories }
+    if (catsData.fetchedAt) {
+      fetchedAt.value = catsData.fetchedAt
+      categories.value = catsData.categories || []
+    } else {
+      // 兼容旧格式
+      categories.value = Array.isArray(catsData) ? catsData : []
+    }
+    for (const cat of categories.value) {
+      activeTab[cat.category] = 'hot'
+      expanded[cat.category] = false
+    }
+    if (siteCfg.site_logo) {
+      siteLogo.value = siteCfg.site_logo
+    }
+    if (siteCfg.site_name) {
+      siteName.value = siteCfg.site_name
+    }
+    if (siteCfg.site_disclaimer) {
+      siteDisclaimer.value = siteCfg.site_disclaimer
+    }
+    configLoaded.value = true
+  } catch (e) {
+    console.error('加载首页数据失败', e)
+  }
+})
+
+function handleSearch() {
+  const q = query.value.trim()
+  if (q) router.push('/search?q=' + encodeURIComponent(q))
+}
+
+function searchTag(tag: string) {
+  router.push('/search?q=' + encodeURIComponent(tag))
+}
+</script>
+
+<style scoped>
+.home-page { min-height: 100vh; display: flex; flex-direction: column; }
+
+.hero-section {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  padding: 60px 24px 40px;
+}
+.logo-text { font-size: 64px; font-weight: 700; color: var(--primary-color); margin-bottom: 32px; letter-spacing: -2px; }
+.logo-img { max-width: 500px; max-height: 120px; width: auto; height: auto; object-fit: contain; margin-bottom: 32px; }
+.search-box {
+  display: flex;
+  align-items: center;
+  width: 100%; max-width: 640px;
+  border: 1px solid #dfe1e5;
+  border-radius: 24px;
+  background: #fff;
+  box-shadow: none;
+  transition: box-shadow .2s, border-color .2s;
+  overflow: hidden;
+}
+.search-box:focus-within {
+  box-shadow: 0 1px 6px rgba(32,33,36,.28);
+  border-color: rgba(223,225,229,0);
+}
+.search-box :deep(.el-input__wrapper) {
+  border: none; box-shadow: none; background: transparent;
+  padding: 4px 20px; border-radius: 0;
+}
+.search-box :deep(.el-input__inner) {
+  font-size: 15px;
+}
+.search-btn {
+  flex-shrink: 0;
+  border: none;
+  border-radius: 999px;
+  padding: 0 24px;
+  height: 38px;
+  line-height: 38px;
+  margin: 4px;
+  font-size: 14px; font-weight: 600;
+  background: var(--primary-color); color: #fff;
+  cursor: pointer; transition: all .2s;
+  letter-spacing: 1px;
+}
+.search-btn:hover {
+  background: #3a7be0;
+}
+.search-btn:active {
+  background: #2d6ccf;
+}
+
+.quote-section { margin-top: 18px; max-width: 640px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.quote-text { font-size: 14px; color: #aab0b8; font-style: italic; letter-spacing: 0.5px; }
+.quote-author { font-size: 12px; color: #c0c4cc; display: inline-block; margin-left: 4px; }
+
+.content-section { max-width: 1500px; width: 100%; margin: 0 auto; padding: 0 16px 60px; }
+
+.rankings-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 14px;
+  margin-top: 8px;
+}
+
+.rank-panel {
+  background: var(--bg-white,#fff);
+  border-radius: 12px; padding: 14px; border: 1px solid #ebeef5;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.04); display: flex; flex-direction: column;
+}
+
+.panel-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding-bottom: 10px; border-bottom: 2px solid #f0f0f0; margin-bottom: 4px;
+}
+.panel-title { font-size: 15px; font-weight: 700; color: #303133; white-space: nowrap; }
+.panel-tabs { display: flex; gap: 2px; background: #f0f2f5; border-radius: 6px; padding: 2px; }
+.panel-tab {
+  font-size: 11px; padding: 3px 10px; border-radius: 5px; cursor: pointer;
+  color: #909399; font-weight: 500; transition: all .2s; user-select: none;
+}
+.panel-tab.active { background: #fff; color: var(--primary-color); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
+
+.panel-body { flex: 1; display: flex; flex-direction: column; gap: 1px; }
+
+.rank-item {
+  display: flex; align-items: center; gap: 8px; padding: 5px 6px;
+  border-radius: 6px; cursor: pointer; transition: background .15s;
+}
+.rank-item:hover { background: #f0f5ff; }
+.rank-item:active { background: #e6f0ff; }
+
+.rank-idx {
+  width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center;
+  justify-content: center; font-size: 12px; font-weight: 700;
+  color: #909399; background: #f0f0f0; flex-shrink: 0;
+}
+.rank-idx.top-three { background: var(--primary-color); color: #fff; }
+.rank-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: #303133; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rank-cnt { font-size: 11px; color: #c0c4cc; white-space: nowrap; flex-shrink: 0; }
+
+.rank-expand {
+  text-align: center; padding: 6px; margin-top: 2px; font-size: 12px;
+  color: var(--primary-color); cursor: pointer; border-radius: 6px;
+  transition: background .15s; user-select: none;
+}
+.rank-expand:hover { background: #ecf5ff; }
+
+.panel-footer {
+  margin-top: 8px; padding-top: 8px; border-top: 1px solid #f0f0f0;
+  display: flex; align-items: center; justify-content: space-between;
+  font-size: 11px; color: #c0c4cc;
+}
+.footer-time { font-family: monospace; font-size: 10px; }
+
+@media (max-width: 900px) {
+  .hero-section { padding: 36px 16px 24px; }
+  .logo-text { font-size: 36px; margin-bottom: 20px; }
+  .logo-img { max-width: 360px; max-height: 100px; margin-bottom: 20px; }
+  .rankings-scroll { gap: 12px; }
+}
+
+.site-footer {
+  margin-top: auto;
+  padding: 20px 16px 32px;
+  background: #f9fafb;
+  border-top: 1px solid #ebeef5;
+}
+.footer-inner {
+  max-width: 800px;
+  margin: 0 auto;
+  font-size: 12px;
+  line-height: 1.8;
+  color: #909399;
+  text-align: center;
+  white-space: pre-line;
+}
+.footer-actions {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  margin-top: 12px;
+}
+.footer-disclaimer-btn {
+  font-size: 12px !important;
+  color: #909399 !important;
+}
+.footer-disclaimer-btn:hover {
+  color: #409eff !important;
+}
+</style>
--- a/packages/frontend/src/pages/ResultDetail.vue
+++ b/packages/frontend/src/pages/ResultDetail.vue
@@ -0,0 +1,350 @@
+<template>
+  <div class="result-detail-page">
+    <div class="detail-container">
+      <!-- 加载状态 -->
+      <div v-if="loading" class="loading-state">
+        <el-skeleton :rows="6" animated />
+      </div>
+
+      <!-- 网盘资源详情 -->
+      <div v-else-if="result" class="detail-card">
+        <div class="detail-header">
+          <div class="detail-cover">
+            <img :src="result.cover" :alt="result.title" />
+            <CloudBadge :cloud_type="result.cloud_type" />
+          </div>
+          <div class="detail-info">
+            <h1>{{ result.title }}</h1>
+            <div class="detail-meta">
+              <el-tag v-if="result.file_size">📦 {{ result.file_size }}</el-tag>
+              <el-tag v-if="result.update_time">🕐 {{ result.update_time }}</el-tag>
+              <el-tag v-if="result.source">📂 {{ result.source }}</el-tag>
+            </div>
+            <p v-if="result.description" class="detail-desc">{{ result.description }}</p>
+          </div>
+        </div>
+        <div class="detail-actions">
+          <el-button type="primary" size="large" @click="showSaveDialog">
+            📥 保存到网盘
+          </el-button>
+        </div>
+      </div>
+
+      <!-- 视频解析详情 -->
+      <div v-else-if="videoResult" class="detail-card">
+        <div class="detail-video">
+          <div class="video-preview">
+            <img :src="videoResult.cover" :alt="videoResult.title" />
+            <div class="play-overlay" @click="playVideo">
+              <div class="play-btn">▶ 播放</div>
+            </div>
+          </div>
+          <div class="video-info">
+            <h1>{{ videoResult.title }}</h1>
+            <p v-if="videoResult.author" class="video-author">👤 {{ videoResult.author }}</p>
+            <p class="video-platform">📺 {{ videoResult.platform }}</p>
+            <p v-if="videoResult.description" class="detail-desc">{{ videoResult.description }}</p>
+          </div>
+        </div>
+        <div class="detail-actions">
+          <el-button type="primary" size="large" @click="showSaveDialog">
+            📥 保存到云盘
+          </el-button>
+        </div>
+
+        <!-- 视频播放器 -->
+        <div v-if="showPlayer" class="video-player-wrapper">
+          <video :src="videoResult.video_url" controls autoplay class="video-player"></video>
+        </div>
+      </div>
+
+      <!-- 未找到 -->
+      <el-empty v-else description="未找到该资源" />
+    </div>
+
+    <!-- 保存弹窗 -->
+    <el-dialog v-model="saveDialogVisible" title="保存到网盘" width="420px">
+      <div class="save-dialog-content">
+        <p class="save-file-name">📄 {{ result?.title || videoResult?.title }}</p>
+        <CloudSelect @select="onCloudSelected" />
+      </div>
+      <template #footer>
+        <el-button @click="saveDialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="confirmSave">确认保存</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 保存结果弹窗 -->
+    <el-dialog v-model="resultDialogVisible" title="保存成功" width="420px">
+      <div class="result-dialog-content">
+        <el-alert type="success" :title="saveResult?.message || '保存成功'" show-icon :closable="false" />
+        <div class="share-link-box">
+          <p class="share-label">分享链接：</p>
+          <div class="share-link-row">
+            <el-input v-model="shareLink" readonly />
+            <el-button @click="copyShareLink">复制</el-button>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <el-button type="primary" @click="resultDialogVisible = false">关闭</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import CloudBadge from '../components/CloudBadge.vue'
+import CloudSelect from '../components/CloudSelect.vue'
+import { query, saveToCloud, saveVideoToCloud } from '../api'
+import { ElMessage } from 'element-plus'
+import type { SearchResult, VideoParseResult, SaveResult } from '../types'
+
+const route = useRoute()
+
+const loading = ref(false)
+const result = ref<SearchResult | null>(null)
+const videoResult = ref<VideoParseResult | null>(null)
+const showPlayer = ref(false)
+
+const saveDialogVisible = ref(false)
+const saving = ref(false)
+const selectedCloud = ref('')
+const isVideo = ref(false)
+
+const resultDialogVisible = ref(false)
+const saveResult = ref<SaveResult | null>(null)
+const shareLink = ref('')
+
+onMounted(async () => {
+  const id = route.params.id as string
+  if (!id) return
+
+  loading.value = true
+  try {
+    // 用 id 作为搜索词重新查询具体结果
+    const res = await query(id)
+    if (res.intent === 'SEARCH' && res.results.length > 0) {
+      result.value = (res.results as SearchResult[])[0]
+    } else if (res.intent === 'VIDEO_PARSE' && res.results.length > 0) {
+      videoResult.value = (res.results as VideoParseResult[])[0]
+    }
+  } catch (e) {
+    console.error('获取详情失败', e)
+  } finally {
+    loading.value = false
+  }
+})
+
+function showSaveDialog() {
+  isVideo.value = !!videoResult.value
+  saveDialogVisible.value = true
+}
+
+function playVideo() {
+  showPlayer.value = true
+}
+
+function onCloudSelected(cloudType: string) {
+  selectedCloud.value = cloudType
+}
+
+async function confirmSave() {
+  if (!selectedCloud.value) {
+    ElMessage.warning('请选择目标网盘')
+    return
+  }
+  saving.value = true
+  try {
+    let res: SaveResult
+    if (isVideo.value && videoResult.value) {
+      res = await saveVideoToCloud({
+        video_url: videoResult.value.video_url,
+        title: videoResult.value.title,
+        target_cloud: selectedCloud.value,
+      })
+    } else if (result.value) {
+      res = await saveToCloud({
+        type: 'search',
+        source: result.value,
+        target_cloud: selectedCloud.value,
+      })
+    } else {
+      return
+    }
+    saveResult.value = res
+    shareLink.value = res.share_url
+    saveDialogVisible.value = false
+    resultDialogVisible.value = true
+  } catch (e) {
+    console.error('保存失败', e)
+    ElMessage.error('保存失败')
+  } finally {
+    saving.value = false
+  }
+}
+
+async function copyShareLink() {
+  try {
+    await navigator.clipboard.writeText(shareLink.value)
+    ElMessage.success('链接已复制到剪贴板')
+  } catch {
+    ElMessage.warning('复制失败，请手动复制')
+  }
+}
+</script>
+
+<style scoped>
+.result-detail-page {
+  min-height: 100vh;
+  background: #f5f7fa;
+  padding: 40px 24px;
+}
+.detail-container {
+  max-width: 1080px;
+  margin: 0 auto;
+}
+.detail-card {
+  background: var(--bg-white);
+  border-radius: var(--radius-card);
+  box-shadow: var(--shadow-card);
+  padding: 32px;
+}
+.detail-header {
+  display: flex;
+  gap: 24px;
+  margin-bottom: 24px;
+}
+.detail-cover {
+  position: relative;
+  flex-shrink: 0;
+  width: 240px;
+  height: 180px;
+  border-radius: 12px;
+  overflow: hidden;
+}
+.detail-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.detail-info {
+  flex: 1;
+}
+.detail-info h1 {
+  font-size: 24px;
+  font-weight: 700;
+  color: #303133;
+  margin-bottom: 12px;
+  line-height: 1.4;
+}
+.detail-meta {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 16px;
+}
+.detail-desc {
+  font-size: 15px;
+  color: #606266;
+  line-height: 1.6;
+}
+.detail-actions {
+  border-top: 1px solid var(--border-color);
+  padding-top: 20px;
+}
+.detail-video {
+  margin-bottom: 24px;
+}
+.video-preview {
+  position: relative;
+  width: 100%;
+  border-radius: 12px;
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+.video-preview img {
+  width: 100%;
+  max-height: 400px;
+  object-fit: cover;
+  display: block;
+}
+.play-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+  transition: background 0.2s;
+}
+.play-overlay:hover {
+  background: rgba(0, 0, 0, 0.4);
+}
+.play-btn {
+  padding: 12px 32px;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 24px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+}
+.video-info h1 {
+  font-size: 24px;
+  font-weight: 700;
+  color: #303133;
+  margin-bottom: 12px;
+}
+.video-author,
+.video-platform {
+  font-size: 15px;
+  color: var(--text-secondary);
+  margin-bottom: 6px;
+}
+.video-player-wrapper {
+  margin-top: 24px;
+  border-top: 1px solid var(--border-color);
+  padding-top: 24px;
+}
+.video-player {
+  width: 100%;
+  border-radius: 8px;
+}
+.loading-state {
+  padding: 40px 0;
+}
+.save-dialog-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.save-file-name {
+  font-size: 15px;
+  font-weight: 500;
+  color: #303133;
+}
+.result-dialog-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.share-link-box {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.share-label {
+  font-size: 14px;
+  color: #606266;
+}
+.share-link-row {
+  display: flex;
+  gap: 8px;
+}
+</style>
--- a/packages/frontend/src/pages/SearchResult.vue
+++ b/packages/frontend/src/pages/SearchResult.vue
--- a/packages/frontend/src/pages/admin/AdminDashboard.vue
+++ b/packages/frontend/src/pages/admin/AdminDashboard.vue
--- a/packages/frontend/src/pages/admin/AdminLayout.vue
+++ b/packages/frontend/src/pages/admin/AdminLayout.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="admin-layout">
+    <el-menu
+      :default-active="activeMenu"
+      class="admin-menu"
+      @select="handleMenuSelect"
+    >
+      <div class="menu-header">
+        <h2>{{ siteName || 'CloudSearch' }}</h2>
+        <p>管理后台</p>
+      </div>
+      <el-menu-item index="dashboard">
+        <el-icon><DataBoard /></el-icon>
+        <span>仪表盘</span>
+      </el-menu-item>
+      <el-sub-menu index="cloud-configs">
+        <template #title>
+          <el-icon><Connection /></el-icon>
+          <span>网盘配置</span>
+        </template>
+        <el-menu-item index="cloud-configs-toggle">网盘设置及授权</el-menu-item>
+        <el-menu-item index="cloud-configs-cleanup">存储清理</el-menu-item>
+      </el-sub-menu>
+      <el-sub-menu index="system">
+        <template #title>
+          <el-icon><Setting /></el-icon>
+          <span>系统配置</span>
+        </template>
+        <el-menu-item index="sys-site">网站设置</el-menu-item>
+        <el-menu-item index="sys-services">外部服务和缓存</el-menu-item>
+        <el-menu-item index="sys-strategy">性能配置</el-menu-item>
+        <el-menu-item index="sys-password">修改管理员密码</el-menu-item>
+      </el-sub-menu>
+      <el-menu-item index="save-records">
+        <el-icon><DocumentCopy /></el-icon>
+        <span>转存日志</span>
+      </el-menu-item>
+      <div class="version-footer">T {{ appVersion }}</div>
+      <el-menu-item index="logout">
+        <el-icon><SwitchButton /></el-icon>
+        <span>退出登录</span>
+      </el-menu-item>
+    </el-menu>
+
+
+    <div class="admin-content">
+      <div class="content-header">
+        <h2>{{ pageTitle }}</h2>
+        <el-button text @click="goBackHome">返回前台</el-button>
+      </div>
+      <div class="content-body">
+        <router-view />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { DataBoard, Connection, Setting, SwitchButton, DocumentCopy } from '@element-plus/icons-vue'
+import { getSiteConfig } from '../../api'
+
+const router = useRouter()
+const route = useRoute()
+
+const siteName = ref('')
+const appVersion = ref('')
+
+const pageTitles: Record<string, string> = {
+  dashboard: '仪表盘',
+  'cloud-configs-toggle': '网盘设置及授权',
+  'cloud-configs-cleanup': '存储清理',
+  'sys-site': '网站设置',
+  'sys-services': '外部服务 & 缓存',
+  'sys-strategy': '性能配置',
+  'sys-password': '修改管理员密码',
+  'save-records': '转存日志',
+}
+
+const activeMenu = computed(() => {
+  const name = route.name as string
+  if (name === 'admin-cloud-configs') return 'cloud-configs-toggle'
+  if (name === 'admin-cleanup') return 'cloud-configs-cleanup'
+  if (name === 'admin-system') {
+    const sec = route.query.section as string
+    return sec || 'sys-site'
+  }
+  if (name === 'admin-save-records') return 'save-records'
+  return 'dashboard'
+})
+
+const pageTitle = computed(() => {
+  return pageTitles[activeMenu.value] || '仪表盘'
+})
+
+function handleMenuSelect(index: string) {
+  if (index === 'dashboard') {
+    router.push('/admin/dashboard')
+  } else if (index === 'cloud-configs-toggle') {
+    router.push('/admin/cloud-configs')
+  } else if (index === 'cloud-configs-cleanup') {
+    router.push('/admin/cleanup')
+  } else if (index.startsWith('sys-')) {
+    router.push({ path: '/admin/system', query: { section: index } })
+  } else if (index === 'save-records') {
+    router.push('/admin/save-records')
+  } else if (index === 'logout') {
+    localStorage.removeItem('admin_token')
+    router.push('/admin/login')
+  }
+}
+
+function goBackHome() {
+  router.push('/')
+}
+
+onMounted(async () => {
+  try {
+    const cfg = await getSiteConfig()
+    siteName.value = cfg.site_name || ''
+  } catch {}
+  try {
+    const h = await fetch('/health')
+    const hv = await h.json()
+    appVersion.value = hv.version
+  } catch {}
+})
+</script>
+
+<style scoped>
+.admin-menu .menu-header { padding: 16px 20px 8px; text-align: center; border-bottom: 1px solid var(--el-border-color-light); }
+.admin-menu .menu-header h2 { margin: 0; font-size: 16px; color: var(--el-color-primary); }
+.admin-menu .menu-header p { margin: 4px 0 0; font-size: 12px; color: var(--el-text-color-secondary); }
+.version-footer { padding: 8px; text-align: center; font-size: 11px; color: var(--el-text-color-placeholder); border-top: 1px solid var(--el-border-color-light); margin-top: auto; }
+.admin-layout { display: flex; height: 100vh; }
+.admin-menu { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; }
+.admin-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+.content-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; border-bottom: 1px solid var(--el-border-color-light); background: var(--el-bg-color); }
+.content-header h2 { margin: 0; font-size: 18px; }
+.content-body { flex: 1; overflow-y: auto; padding: 20px 24px; background: var(--el-bg-color-page); }
+</style>
--- a/packages/frontend/src/pages/admin/AdminLogin.vue
+++ b/packages/frontend/src/pages/admin/AdminLogin.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="admin-login-page">
+    <div class="login-card">
+      <h1 class="login-title">{{ siteName || 'CloudSearch' }} 管理后台</h1>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="0" size="large" @keyup.enter="handleLogin">
+        <el-form-item prop="username">
+          <el-input v-model="form.username" placeholder="用户名" prefix-icon="User" />
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input v-model="form.password" type="password" placeholder="密码" prefix-icon="Lock" show-password />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" :loading="loading" class="login-btn" @click="handleLogin">
+            登录
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <p v-if="errorMsg" class="error-msg">{{ errorMsg }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { User, Lock } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { getSiteConfig, adminLogin } from '../../api'
+import type { ElForm } from 'element-plus'
+
+const formRef = ref<InstanceType<typeof ElForm>>()
+const loading = ref(false)
+const errorMsg = ref('')
+const siteName = ref('')
+
+// 获取网站名称
+getSiteConfig().then(cfg => {
+  if (cfg.site_name) siteName.value = cfg.site_name
+}).catch(() => {})
+
+const form = reactive({
+  username: '',
+  password: '',
+})
+
+const rules = {
+  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+}
+
+async function handleLogin() {
+  const valid = await formRef.value?.validate().catch(() => false)
+  if (!valid) return
+
+  loading.value = true
+  errorMsg.value = ''
+  try {
+    const res = await adminLogin(form.username, form.password)
+    localStorage.setItem('admin_token', res.token)
+    ElMessage.success('登录成功')
+    window.location.href = '/admin'
+  } catch (e: any) {
+    errorMsg.value = e?.response?.data?.message || e?.message || '登录失败'
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.admin-login-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+.login-card {
+  width: 400px;
+  padding: 40px;
+  background: var(--bg-white);
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+}
+.login-title {
+  text-align: center;
+  font-size: 24px;
+  font-weight: 700;
+  color: #303133;
+  margin-bottom: 32px;
+}
+.login-btn {
+  width: 100%;
+}
+.error-msg {
+  text-align: center;
+  color: #f56c6c;
+  font-size: 14px;
+  margin-top: 12px;
+}
+</style>
--- a/packages/frontend/src/pages/admin/Cleanup.vue
+++ b/packages/frontend/src/pages/admin/Cleanup.vue
@@ -0,0 +1,194 @@
+<template>
+  <div class="cleanup-section">
+    <el-card class="config-card">
+      <template #header><span>🧹 存储清理</span></template>
+      <el-form label-width="160px" label-position="left" size="small">
+        <el-form-item label="启用自动清理">
+          <el-switch v-model="cleanupEnabled" active-text="启用" inactive-text="关闭" />
+          <div class="form-tip" style="margin-left: 8px;">
+            每天自动检查一次，将过期文件移入回收站、删除旧日志、清空回收站释放空间
+          </div>
+        </el-form-item>
+        <el-form-item label="云盘文件保留天数">
+          <el-input-number v-model="cleanupFileRetentionDays" :min="1" :max="365" style="width: 140px" />
+          <div class="form-tip" style="margin-left: 8px;">超过此天数的日期文件夹将被移入回收站</div>
+        </el-form-item>
+        <el-form-item label="转存日志保留天数">
+          <el-input-number v-model="cleanupLogRetentionDays" :min="1" :max="365" style="width: 140px" />
+          <div class="form-tip" style="margin-left: 8px;">超过此天数的转存记录将被删除</div>
+        </el-form-item>
+        <el-form-item label="清空回收站">
+          <el-switch v-model="cleanupEmptyTrash" active-text="启用" inactive-text="关闭" />
+          <div class="form-tip" style="margin-left: 8px;">移入回收站后自动清空，永久删除文件以释放存储空间</div>
+        </el-form-item>
+        <el-divider content-position="left">空间阈值自动清理</el-divider>
+        <el-form-item label="启用空间阈值清理">
+          <el-switch v-model="cleanupSpaceThresholdEnabled" active-text="启用" inactive-text="关闭" />
+          <div class="form-tip" style="margin-left: 8px;">已用空间超过阈值时，按比例删除最旧的转存文件（优先级高于保留天数）</div>
+        </el-form-item>
+        <el-form-item v-if="cleanupSpaceThresholdEnabled" label="使用阈值">
+          <el-slider v-model="cleanupSpaceThresholdPercent" :min="50" :max="99" style="width: 200px" show-input />
+          <div class="form-tip" style="margin-left: 8px;">已用空间超过此百分比时触发强制清理</div>
+        </el-form-item>
+        <el-form-item v-if="cleanupSpaceThresholdEnabled" label="删除比例">
+          <el-slider v-model="cleanupSpaceThresholdDeletePercent" :min="5" :max="50" :step="5" style="width: 200px" show-input />
+          <div class="form-tip" style="margin-left: 8px;">触发清理时释放总空间的百分比（如 10% 表示累计删除最旧文件直到达到总空间的 10%，6TB 总空间 → 释放 ~600GB）</div>
+        </el-form-item>
+        <el-divider content-position="left">分享链接复用</el-divider>
+        <el-form-item label="复用已有分享链接">
+          <el-switch v-model="saveReuseEnabled" active-text="启用" inactive-text="关闭" />
+          <div class="form-tip" style="margin-left: 8px;">相同原始链接不再重复转存，复用已有分享链接（会验证原链接有效性；60秒内重复请求直接返回已有链接）</div>
+        </el-form-item>
+      </el-form>
+      <el-divider content-position="left">手动操作</el-divider>
+      <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+        <el-button type="primary" size="small" :loading="cleanupSaving" @click="handleSaveCleanupConfigs">💾 保存清理配置</el-button>
+        <el-button type="danger" size="small" :loading="cleanupRunning" @click="handleRunCleanup">{{ cleanupRunning ? '清理中...' : '🗑️ 立即清理' }}</el-button>
+        <el-button type="warning" size="small" :loading="emptyTrashRunning" @click="handleEmptyTrash">{{ emptyTrashRunning ? '清空中...' : '🧹 立即清空回收站' }}</el-button>
+      </div>
+      <div v-if="lastCleanupTime" class="cleanup-info" style="margin-top: 10px;">
+        <span>⏰ 上次清理：{{ lastCleanupTime }}</span>
+        <span v-if="lastCleanupStats" style="margin-left: 16px;">📊 {{ lastCleanupStats }}</span>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, reactive, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { getSystemConfigs, updateSystemConfigs, runCleanup, emptyAllTrash } from '../../api'
+
+interface ConfigMap {
+  [key: string]: string | number
+}
+const sysConfigs = reactive<ConfigMap>({})
+
+const cleanupRunning = ref(false)
+const emptyTrashRunning = ref(false)
+const cleanupSaving = ref(false)
+
+const lastCleanupTime = computed(() => String(sysConfigs.cleanup_last_run || ''))
+const lastCleanupStats = computed(() => {
+  const raw = String(sysConfigs.cleanup_last_stats || '')
+  if (!raw) return ''
+  try {
+    const s = JSON.parse(raw)
+    const parts = []
+    if (s.filesTrashed > 0) parts.push(`移入回收站 ${s.filesTrashed} 个文件夹`)
+    if (s.logsDeleted > 0) parts.push(`删除 ${s.logsDeleted} 条日志`)
+    if (s.trashEmptied) parts.push(`已清空回收站`)
+    if (s.errors > 0) parts.push(`⚠️ ${s.errors} 个错误`)
+    return parts.join(' / ') || '无操作'
+  } catch { return '' }
+})
+
+const cleanupEnabled = computed({
+  get: () => String(sysConfigs.cleanup_enabled) === 'true',
+  set: (val: boolean) => { sysConfigs.cleanup_enabled = val ? 'true' : 'false' },
+})
+const cleanupEmptyTrash = computed({
+  get: () => String(sysConfigs.cleanup_empty_trash) !== 'false',
+  set: (val: boolean) => { sysConfigs.cleanup_empty_trash = val ? 'true' : 'false' },
+})
+const cleanupFileRetentionDays = computed({
+  get: () => Number(sysConfigs.cleanup_file_retention_days ?? 7),
+  set: (val: number) => { sysConfigs.cleanup_file_retention_days = val },
+})
+const cleanupLogRetentionDays = computed({
+  get: () => Number(sysConfigs.cleanup_log_retention_days ?? 30),
+  set: (val: number) => { sysConfigs.cleanup_log_retention_days = val },
+})
+const cleanupSpaceThresholdEnabled = computed({
+  get: () => String(sysConfigs.cleanup_space_threshold_enabled) === 'true',
+  set: (val: boolean) => { sysConfigs.cleanup_space_threshold_enabled = val ? 'true' : 'false' },
+})
+const cleanupSpaceThresholdPercent = computed({
+  get: () => Number(sysConfigs.cleanup_space_threshold_percent ?? 90),
+  set: (val: number) => { sysConfigs.cleanup_space_threshold_percent = val },
+})
+const cleanupSpaceThresholdDeletePercent = computed({
+  get: () => Number(sysConfigs.cleanup_space_threshold_delete_percent ?? 10),
+  set: (val: number) => { sysConfigs.cleanup_space_threshold_delete_percent = val },
+})
+const saveReuseEnabled = computed({
+  get: () => String(sysConfigs.save_reuse_enabled) !== 'false',
+  set: (val: boolean) => { sysConfigs.save_reuse_enabled = val ? 'true' : 'false' },
+})
+
+async function loadCleanupConfigs() {
+  try {
+    const raw = await getSystemConfigs()
+    for (const cfg of raw) {
+      sysConfigs[cfg.key] = cfg.value
+    }
+  } catch (e) {
+    console.error('加载清理配置失败', e)
+  }
+}
+
+async function handleSaveCleanupConfigs() {
+  cleanupSaving.value = true
+  try {
+    const keys = ['cleanup_enabled', 'cleanup_file_retention_days', 'cleanup_log_retention_days', 'cleanup_empty_trash', 'cleanup_space_threshold_enabled', 'cleanup_space_threshold_percent', 'cleanup_space_threshold_delete_percent', 'save_reuse_enabled']
+    const entries = keys.map(key => ({ key, value: String(sysConfigs[key] ?? '') }))
+    await updateSystemConfigs(entries)
+    ElMessage.success('清理配置已保存')
+  } catch (e: any) {
+    ElMessage.error(e.response?.data?.error || '保存失败')
+  } finally {
+    cleanupSaving.value = false
+  }
+}
+
+async function handleRunCleanup() {
+  cleanupRunning.value = true
+  try {
+    const result = await runCleanup()
+    if (result.success) {
+      ElMessage.success(result.message)
+    } else {
+      ElMessage.warning(result.message)
+    }
+    await loadCleanupConfigs()
+  } catch (e: any) {
+    ElMessage.error(e.response?.data?.error || '清理失败')
+  } finally {
+    cleanupRunning.value = false
+  }
+}
+
+async function handleEmptyTrash() {
+  emptyTrashRunning.value = true
+  try {
+    const result = await emptyAllTrash()
+    if (result.success) {
+      ElMessage.success(result.message)
+    } else {
+      ElMessage.warning(result.message)
+    }
+  } catch (e: any) {
+    ElMessage.error(e.response?.data?.error || '清空回收站失败')
+  } finally {
+    emptyTrashRunning.value = false
+  }
+}
+
+onMounted(() => {
+  loadCleanupConfigs()
+})
+</script>
+
+<style scoped>
+.cleanup-section .config-card {
+  max-width: 800px;
+}
+.form-tip {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+.cleanup-info {
+  font-size: 13px;
+  color: var(--el-text-color-secondary);
+}
+</style>
--- a/packages/frontend/src/pages/admin/CloudConfig.vue
+++ b/packages/frontend/src/pages/admin/CloudConfig.vue
@@ -0,0 +1,701 @@
+<template>
+  <div class="cloud-config">
+    <!-- 网盘类型开关 -->
+    <el-card class="toggle-card" style="margin-bottom: 20px;">
+      <template #header><span>📂 网盘设置及授权</span></template>
+      <div class="cloud-toggle-grid">
+        <div
+          v-for="ct in cloudTypes"
+          :key="ct.type"
+          class="cloud-toggle-chip"
+        >
+          <img :src="ct.icon" class="cloud-icon-img" />
+          <span class="cloud-label">{{ ct.label }}</span>
+          <el-tag v-if="ct.type === 'others'" size="small" type="info">关</el-tag>
+          <el-switch
+            :model-value="ct.enabled"
+            size="small"
+            @change="(val: boolean) => handleCloudToggle(ct.type, val)"
+          />
+        </div>
+      </div>
+      <div class="form-tip" style="margin-top: 12px;">
+        关闭的网盘类型在搜索结果中不会展示。修改后立即生效，无需点击保存。
+      </div>
+    </el-card>
+
+    <div class="toolbar">
+      <el-button type="primary" @click="openDialog(null)">新增配置</el-button>
+      <el-button @click="verifyAll">全部重新验证</el-button>
+    </div>
+
+    <el-table :data="configs" stripe style="width: 100%">
+      <el-table-column label="网盘类型" width="110">
+        <template #default="{ row }">
+          <CloudBadge :cloud_type="row.cloud_type" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="nickname" label="昵称" width="140">
+        <template #default="{ row }">
+          <span v-if="row.nickname" class="nickname-text">{{ row.nickname }}</span>
+          <el-text v-else type="info" size="small">未设置</el-text>
+        </template>
+      </el-table-column>
+      <el-table-column prop="promotion_account" label="推广账号" width="160">
+        <template #default="{ row }">
+          <span v-if="row.promotion_account" class="promotion-text">{{ row.promotion_account }}</span>
+          <el-text v-else type="info" size="small">-</el-text>
+        </template>
+      </el-table-column>
+      <el-table-column prop="cloud_type_uid" label="标识(__uid)" width="180">
+        <template #default="{ row }">
+          <span v-if="row.cloud_type_uid" class="uid-cell">{{ row.cloud_type_uid }}</span>
+          <el-text v-else type="info" size="small">-</el-text>
+        </template>
+      </el-table-column>
+      <el-table-column label="验证" width="80" align="center">
+        <template #default="{ row }">
+          <span v-if="row._verifying" class="verifying">
+            <el-icon class="is-loading"><Loading /></el-icon>
+          </span>
+          <el-tag v-else-if="row.verification_status === 'valid'" type="success" size="small">有效</el-tag>
+          <el-tag v-else-if="row.verification_status === 'invalid'" type="danger" size="small">无效</el-tag>
+          <el-tag v-else type="info" size="small">未验证</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="空间" width="200">
+        <template #default="{ row }">
+          <div v-if="row.storage_total && row.storage_total !== '-'" class="storage-cell">
+            <div class="storage-bar-wrap">
+              <div
+                class="storage-bar-fill"
+                :style="{ width: storagePercent(row) + '%' }"
+                :class="storageBarClass(row)"
+              ></div>
+            </div>
+            <div class="storage-text">
+              <span class="storage-used">{{ row.storage_used || '计算中...' }}</span>
+              <span class="storage-sep">/</span>
+              <span class="storage-total">{{ row.storage_total }}</span>
+              <span class="storage-free">(可用 {{ storageFree(row) }})</span>
+            </div>
+          </div>
+          <el-text v-else type="info" size="small">—</el-text>
+        </template>
+      </el-table-column>
+      <!-- 转存统计 -->
+      <el-table-column label="转存数" width="80" align="center">
+        <template #default="{ row }">
+          <span v-if="row.total_saves > 0" class="save-count">{{ row.total_saves }}次</span>
+          <el-text v-else type="info" size="small">-</el-text>
+        </template>
+      </el-table-column>
+      <el-table-column label="转存启用" width="80" align="center">
+        <template #default="{ row }">
+          <el-switch
+            :model-value="row.is_transfer_enabled !== 0"
+            size="small"
+            @change="(val: boolean) => handleToggleTransfer(row, val)"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="390" align="center">
+        <template #default="{ row }">
+          <el-button text type="primary" @click="openDialog(row)">编辑</el-button>
+          <el-button text type="primary" @click="verifyOne(row)">验证</el-button>
+          <el-popconfirm title="确定删除该配置？" @confirm="handleDelete(row)">
+            <template #reference>
+              <el-button text type="danger">删除</el-button>
+            </template>
+          </el-popconfirm>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 新增/编辑弹窗 -->
+    <el-dialog v-model="dialogVisible" :title="editingId ? '编辑配置' : '新增配置'" width="560px">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
+        <el-form-item label="网盘类型" prop="cloud_type">
+          <el-select v-model="form.cloud_type" style="width: 100%" :disabled="!!editingId" @change="onCloudTypeChange">
+            <el-option
+              v-for="[key, label] in cloudTypeOptions"
+              :key="key"
+              :label="label"
+              :value="key"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="推广平台及账号" prop="promotion_account" style="margin-bottom: 18px;">
+          <el-input
+            v-model="form.promotion_account"
+            placeholder="请填写您的推广平台及账号，例：蜂小推-13288889999"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="Cookie" prop="cookie">
+          <el-input
+            v-model="form.cookie"
+            type="textarea"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+            :placeholder="cookiePlaceholder"
+            input-style="font-family: monospace; font-size: 12px;"
+          />
+        </el-form-item>
+        <el-form-item label=" ">
+          <el-button type="primary" :loading="form._verifying" @click="verifyAndFillNickname" style="width: 100%">
+            {{ form._verifying ? '验证中...' : '🔍 自动获取（验证 Cookie 并回填信息）' }}
+          </el-button>
+        </el-form-item>
+        <!-- Cookie 获取教程（根据网盘类型切换） -->
+        <el-form-item label=" " v-if="form.cloud_type && form.cloud_type !== ''" class="cookie-tips-item">
+          <div class="cookie-tips" :class="`cookie-tips-${form.cloud_type}`">
+            <div class="cookie-tips-header">
+              <span class="cookie-tips-title">📖 {{ cloudTypeLabel }} Cookie 获取教程</span>
+            </div>
+            <ol class="cookie-tips-steps" v-html="cookieTutorialHtml"></ol>
+          </div>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="handleSave">保存</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
+import { Loading } from '@element-plus/icons-vue'
+import { CLOUD_LABELS } from '../../types'
+import type { CloudType, CloudConfig } from '../../types'
+import { ElMessage } from 'element-plus'
+import { getCloudConfigs, saveCloudConfig, updateCloudConfig, deleteCloudConfig, testCloudConnection, getCloudTypes, toggleCloudType } from '../../api'
+import CloudBadge from '../../components/CloudBadge.vue'
+import type { ElForm } from 'element-plus'
+
+interface CloudTypeInfo { type: string; label: string; icon: string; enabled: boolean }
+const cloudTypes = ref<CloudTypeInfo[]>([])
+
+const formRef = ref<InstanceType<typeof ElForm>>()
+const configs = ref<(CloudConfig & { _verifying?: boolean })[]>([])
+const dialogVisible = ref(false)
+const saving = ref(false)
+const editingId = ref<number | null>(null)
+
+const defaultForm = () => ({
+  cloud_type: '' as CloudType | '',
+  nickname: '',
+  promotion_account: '',
+  is_transfer_enabled: false,
+  cookie: '',
+  _verifying: false,
+  _storageUsed: '',
+  _storageTotal: '',
+})
+
+const form = reactive<{
+  cloud_type: CloudType | ''
+  nickname: string
+  promotion_account: string
+  is_transfer_enabled: boolean
+  cookie: string
+  _verifying: boolean
+  _storageUsed: string
+  _storageTotal: string
+}>(defaultForm())
+
+const rules = computed(() => ({
+  cloud_type: [{ required: true, message: '请选择网盘类型', trigger: 'change' }],
+  nickname: [{ required: false, message: '请填写昵称（区分多个同类型网盘）', trigger: 'blur' }],
+  promotion_account: [{ required: true, message: '请填写推广平台及账号', trigger: 'blur' }],
+}))
+
+const cloudTypeOptions = computed(() => {
+  return Object.entries(CLOUD_LABELS) as [CloudType, string][]
+})
+
+const cookiePlaceholder = computed(() => {
+  if (!form.cloud_type) return '请先选择网盘类型'
+  const t = form.cloud_type
+  if (t === 'quark' || t === 'baidu') return `请输入 ${CLOUD_LABELS[t] || t} 的完整 Cookie`
+  return editingId.value ? '留空则保持原有' : '输入完整 Cookie'
+})
+
+const cloudTypeLabel = computed(() => {
+  return CLOUD_LABELS[form.cloud_type as CloudType] || form.cloud_type || ''
+})
+
+/** Cookie 获取教程 HTML（根据不同网盘类型） */
+const cookieTutorialHtml = computed(() => {
+  const t = form.cloud_type
+  if (!t) return ''
+  const tutorials: Record<string, string> = {
+    quark: `<li>在电脑上打开 <a href="https://pan.quark.cn" target="_blank">pan.quark.cn</a> 并登录你的夸克账号</li>
+<li>按 <code>F12</code> 打开开发者工具 → 切换到 <strong>网络 (Network)</strong> 选项卡</li>
+<li>刷新页面，在请求列表中点击任意一个请求（如 <code>account/info</code>）</li>
+<li>在右侧 <strong>请求头 (Request Headers)</strong> 中找到 <code>Cookie</code> 字段</li>
+<li>复制整个 Cookie 值（<b>从开头到结束的完整内容</b>），粘贴到上方输入框</li>
+<li>点击「<b>自动获取</b>」按钮验证 Cookie 是否有效</li>
+<div class="cookie-tips-note">⚠️ 必须包含 <code>__st=s%...</code> 字段！请复制浏览器请求头的 <b>整个 Cookie</b>（F12 → Network → 请求头 → Cookie 项），不要只复制部分。</div>`,
+
+    baidu: `<li>在电脑上打开 <a href="https://pan.baidu.com" target="_blank">pan.baidu.com</a> 并登录你的百度账号</li>
+<li>按 <code>F12</code> 打开开发者工具 → 切换到 <strong>网络 (Network)</strong> 选项卡</li>
+<li>刷新页面，在请求列表中点击任意一个请求</li>
+<li>在右侧 <strong>请求头 (Request Headers)</strong> 中找到 <code>Cookie</code> 字段</li>
+<li>复制整个 Cookie 值，粘贴到上方输入框</li>
+<li>点击「<b>自动获取</b>」按钮验证 Cookie 是否有效</li>
+<div class="cookie-tips-note">💡 需要包含 <code>BDUSS</code> 和 <code>STOKEN</code></div>`,
+
+    aliyun: `<li>在电脑上打开 <a href="https://www.aliyundrive.com" target="_blank">aliyundrive.com</a> 并登录</li>
+<li>按 <code>F12</code> 打开开发者工具 → <strong>网络 (Network)</strong></li>
+<li>刷新页面，找到任意请求 → 复制 <code>Cookie</code></li>
+<li>粘贴到上方输入框，点击「自动获取」验证</li>
+<div class="cookie-tips-note">💡 需包含 <code>token</code> 等有效字段</div>`,
+
+    '115': `<li>在电脑上打开 <a href="https://115.com" target="_blank">115.com</a> 并登录</li>
+<li>按 <code>F12</code> 打开开发者工具 → <strong>网络 (Network)</strong></li>
+<li>刷新页面，找到任意请求 → 复制 <code>Cookie</code></li>
+<li>粘贴到上方输入框，点击「自动获取」验证</li>
+<div class="cookie-tips-note">💡 需包含 <code>UID</code>、<code>CID</code>、<code>SEID</code> 等字段</div>`,
+
+    tianyi: `<li>在电脑上打开 <a href="https://cloud.189.cn" target="_blank">cloud.189.cn</a> 并登录</li>
+<li>按 <code>F12</code> 打开开发者工具 → <strong>网络 (Network)</strong></li>
+<li>刷新页面，找到任意请求 → 复制 <code>Cookie</code></li>
+<li>粘贴到上方输入框，点击「自动获取」验证</li>
+<div class="cookie-tips-note">💡 需包含 <code>COOKIE_LOGIN_USER</code>、<code>SESSION</code> 等字段</div>`,
+
+    '123pan': `<li>在电脑上打开 <a href="https://www.123pan.com" target="_blank">123pan.com</a> 并登录</li>
+<li>按 <code>F12</code> 打开开发者工具 → <strong>网络 (Network)</strong></li>
+<li>刷新页面，找到任意请求 → 复制 <code>Cookie</code></li>
+<li>粘贴到上方输入框，点击「自动获取」验证</li>`,
+
+    uc: `<li>在电脑上打开 <a href="https://drive.uc.cn" target="_blank">drive.uc.cn</a> 并登录</li>
+<li>按 <code>F12</code> 打开开发者工具 → <strong>网络 (Network)</strong></li>
+<li>刷新页面，找到任意请求 → 复制 <code>Cookie</code></li>
+<li>粘贴到上方输入框，点击「自动获取」验证</li>`,
+
+    xunlei: `<li>在电脑上打开 <a href="https://pan.xunlei.com" target="_blank">pan.xunlei.com</a> 并登录</li>
+<li>按 <code>F12</code> 打开开发者工具 → <strong>网络 (Network)</strong></li>
+<li>刷新页面，找到任意请求 → 复制 <code>Cookie</code></li>
+<li>粘贴到上方输入框，点击「自动获取」验证</li>`,
+
+    pikpak: `<li>在电脑上打开 <a href="https://www.mypikpak.com" target="_blank">mypikpak.com</a> 并登录</li>
+<li>按 <code>F12</code> 打开开发者工具 → <strong>网络 (Network)</strong></li>
+<li>刷新页面，找到任意请求 → 复制 <code>Cookie</code></li>
+<li>粘贴到上方输入框，点击「自动获取」验证</li>`,
+  }
+  return tutorials[t] || `<li>在电脑上打开该网盘网站并登录</li>
+<li>按 <code>F12</code> 打开开发者工具 → <strong>网络 (Network)</strong></li>
+<li>刷新页面，复制任意请求的 <code>Cookie</code></li>
+<li>粘贴到上方输入框，点击「自动获取」验证</li>`
+})
+
+onMounted(async () => {
+  await loadConfigs()
+  await loadCloudTypes()
+})
+
+// 每30分钟自动验证一次
+let verifyTimer: ReturnType<typeof setInterval> | null = null
+onMounted(() => {
+  verifyTimer = setInterval(() => {
+    autoVerifyAll()
+  }, 30 * 60 * 1000)
+})
+onUnmounted(() => {
+  if (verifyTimer) clearInterval(verifyTimer)
+})
+
+async function loadCloudTypes() {
+  try {
+    const result = await getCloudTypes()
+    cloudTypes.value = result.types
+  } catch (e) { console.error('加载网盘类型失败', e) }
+}
+
+async function handleCloudToggle(type: string, enabled: boolean) {
+  const ct = cloudTypes.value.find(c => c.type === type)
+  if (!ct) return
+  try {
+    await toggleCloudType(type, enabled)
+    ct.enabled = enabled
+  } catch (e: any) { ElMessage.error(e.message || '切换失败'); ct.enabled = !enabled }
+}
+
+async function loadConfigs() {
+  try {
+    configs.value = await getCloudConfigs()
+  } catch (e) {
+    console.error('加载网盘配置失败', e)
+  }
+}
+
+async function handleToggleTransfer(row: CloudConfig, enabled: boolean) {
+  const newVal = enabled ? 1 : 0
+  try {
+    await updateCloudConfig({
+      id: row.id!,
+      cloud_type: row.cloud_type,
+      nickname: row.nickname || '',
+      promotion_account: row.promotion_account || '',
+      is_transfer_enabled: newVal,
+      is_active: row.is_active !== 0,
+      cookie: undefined, // don't send cookie on toggle-only
+    })
+    row.is_transfer_enabled = newVal
+    ElMessage.success(enabled ? '转存已开启' : '转存已关闭')
+  } catch (e: any) {
+    ElMessage.error(e.response?.data?.error || '操作失败')
+  }
+}
+
+async function autoVerifyAll() {
+  for (const cfg of configs.value) {
+    if (cfg.cookie_preview || cfg.nickname) {
+      await verifyOne(cfg, true)
+    }
+  }
+}
+
+async function verifyAll() {
+  for (const cfg of configs.value) {
+    if ((cfg.cookie_preview || cfg.nickname) && !cfg._verifying) {
+      await verifyOne(cfg, false)
+    }
+  }
+  ElMessage.success('全部验证完成')
+}
+
+async function verifyOne(row: CloudConfig & { _verifying?: boolean }, silent = false) {
+  if (!row.cookie_preview && !row.nickname) {
+    if (!silent) ElMessage.warning('该配置没有 Cookie，请先编辑保存后再验证')
+    return
+  }
+  row._verifying = true
+  try {
+    const result = await testCloudConnection(row.cloud_type, undefined, row.id)
+    row.verification_status = result.success ? 'valid' : 'invalid'
+    if (result.success) {
+      if (result.nickname && !row.nickname) row.nickname = result.nickname
+      if (result.storage_used) row.storage_used = result.storage_used
+      if (result.storage_total) row.storage_total = result.storage_total
+      if (!silent) ElMessage.success(`${CLOUD_LABELS[row.cloud_type]}：${result.message}`)
+    } else {
+      if (!silent) ElMessage.error(`${CLOUD_LABELS[row.cloud_type]}：${result.message}`)
+    }
+  } catch (e: any) {
+    row.verification_status = 'invalid'
+    if (!silent) ElMessage.error(`${CLOUD_LABELS[row.cloud_type]}：验证失败`)
+  } finally {
+    row._verifying = false
+  }
+}
+
+async function verifyAndFillNickname() {
+  if (!form.cookie) {
+    ElMessage.warning('请先输入 Cookie')
+    return
+  }
+  if (!form.cloud_type) {
+    ElMessage.warning('请先选择网盘类型')
+    return
+  }
+  form._verifying = true
+  try {
+    const result = await testCloudConnection(form.cloud_type as CloudType, form.cookie)
+    if (result.success) {
+      if (result.nickname) form.nickname = result.nickname
+      if (result.storage_used) form._storageUsed = result.storage_used
+      if (result.storage_total) form._storageTotal = result.storage_total
+      ElMessage.success(`昵称：${result.nickname || '获取成功'}`)
+    } else {
+      ElMessage.warning(result.message || '验证失败，请检查 Cookie')
+    }
+  } catch (e: any) {
+    ElMessage.error(e.response?.data?.error || '验证失败，请检查 Cookie')
+  } finally {
+    form._verifying = false
+  }
+}
+
+function openDialog(row: CloudConfig | null) {
+  if (row) {
+    editingId.value = row.id ?? null
+    form.cloud_type = row.cloud_type
+    form.nickname = row.nickname || ''
+    form.promotion_account = row.promotion_account || ''
+    form.is_transfer_enabled = row.is_transfer_enabled !== 0
+    form.cookie = row.cookie || ''
+    form._verifying = false
+    form._storageUsed = ''
+    form._storageTotal = ''
+  } else {
+    editingId.value = null
+    form.cloud_type = '' as CloudType | ''
+    form.nickname = ''
+    form.promotion_account = ''
+    form.is_transfer_enabled = false
+    form.cookie = ''
+    form._verifying = false
+    form._storageUsed = ''
+    form._storageTotal = ''
+  }
+  dialogVisible.value = true
+}
+
+function onCloudTypeChange() {
+  // Cookie 输入框提示会自动更新（computed）
+}
+
+async function handleSave() {
+  // 1. 表单校验（含推广账号必填）
+  const valid = await formRef.value?.validate().catch(() => false)
+  if (!valid) return
+
+  saving.value = true
+  try {
+    // 2. 如果有 Cookie，先验证 Cookie
+    if (form.cookie) {
+      try {
+        const verifyResult = await testCloudConnection(form.cloud_type as CloudType, form.cookie)
+        if (!verifyResult.success) {
+          ElMessage.error(`Cookie验证失败：${verifyResult.message}`)
+          saving.value = false
+          return
+        }
+        // 保存验证结果
+        if (verifyResult.nickname && !form.nickname) form.nickname = verifyResult.nickname
+        if (verifyResult.storage_used) form._storageUsed = verifyResult.storage_used
+        if (verifyResult.storage_total) form._storageTotal = verifyResult.storage_total
+      } catch (e: any) {
+        ElMessage.error(`Cookie验证失败：${e.response?.data?.error || '网络错误'}`)
+        saving.value = false
+        return
+      }
+    }
+
+    // 3. 保存配置
+    if (editingId.value) {
+      await updateCloudConfig({
+        id: editingId.value,
+        cloud_type: form.cloud_type as CloudType,
+        nickname: form.nickname,
+        promotion_account: form.promotion_account,
+        is_transfer_enabled: form.is_transfer_enabled,
+        cookie: form.cookie || undefined,
+        is_active: true,
+        storage_used: form._storageUsed || undefined,
+        storage_total: form._storageTotal || undefined,
+      })
+      ElMessage.success('配置更新成功')
+    } else {
+      const saved = await saveCloudConfig({
+        cloud_type: form.cloud_type as CloudType,
+        nickname: form.nickname,
+        promotion_account: form.promotion_account,
+        is_transfer_enabled: form.is_transfer_enabled,
+        cookie: form.cookie,
+        is_active: true,
+        storage_used: form._storageUsed || undefined,
+        storage_total: form._storageTotal || undefined,
+      })
+      ElMessage.success('配置保存成功')
+    }
+    dialogVisible.value = false
+    editingId.value = null
+    await loadConfigs()
+  } catch (e: any) {
+    ElMessage.error(e.response?.data?.error || '保存失败')
+  } finally {
+    saving.value = false
+  }
+}
+
+async function handleDelete(row: CloudConfig) {
+  try {
+    await deleteCloudConfig(row.id!)
+    ElMessage.success('删除成功')
+    await loadConfigs()
+  } catch (e) {
+    ElMessage.error('删除失败')
+  }
+}
+
+/** 解析字节数 → 数值 */
+function parseBytes(s: string): number {
+  const m = s.match(/^([\d.]+)\s*(B|KB|MB|GB|TB)$/i)
+  if (!m) return 0
+  const n = parseFloat(m[1])
+  const units: Record<string, number> = { B: 1, KB: 1024, MB: 1024**2, GB: 1024**3, TB: 1024**4 }
+  return n * (units[m[2].toUpperCase()] || 1)
+}
+
+function storagePercent(row: CloudConfig): number {
+  if (!row.storage_total || row.storage_total === '-' || !row.storage_used) return 0
+  const total = parseBytes(row.storage_total)
+  const used = parseBytes(row.storage_used)
+  if (total === 0) return 0
+  return Math.min(100, Math.round((used / total) * 100))
+}
+
+function storageBarClass(row: CloudConfig): string {
+  const pct = storagePercent(row)
+  if (pct >= 90) return 'bar-danger'
+  if (pct >= 70) return 'bar-warning'
+  return 'bar-normal'
+}
+
+function storageFree(row: CloudConfig): string {
+  if (!row.storage_total || row.storage_total === '-') return '?'
+  if (!row.storage_used) return '计算中...'
+  const total = parseBytes(row.storage_total)
+  const used = parseBytes(row.storage_used)
+  if (total === 0) return '?'
+  const free = total - used
+  if (free < 1024) return '小于 1 KB'
+  if (free < 1024 * 1024) return (free / 1024).toFixed(1) + ' KB'
+  if (free < 1024 * 1024 * 1024) return (free / (1024 * 1024)).toFixed(1) + ' MB'
+  if (free < 1024 * 1024 * 1024 * 1024) return (free / (1024 * 1024 * 1024)).toFixed(1) + ' GB'
+  return (free / (1024 * 1024 * 1024 * 1024)).toFixed(1) + ' TB'
+}
+</script>
+
+<style scoped>
+.cloud-config {
+  background: var(--bg-white);
+  border-radius: var(--radius-card);
+  padding: 24px;
+}
+.cloud-toggle-grid { display: flex; flex-wrap: wrap; gap: 12px; }
+.cloud-toggle-chip { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--el-border-color-light); border-radius: 8px; background: var(--el-bg-color); }
+.cloud-toggle-chip:hover { border-color: var(--el-color-primary-light-5); }
+.cloud-icon-img { width: 20px; height: 20px; object-fit: contain; }
+.cloud-label { font-size: 13px; font-weight: 500; }
+.form-tip { font-size: 12px; color: var(--el-text-color-secondary); }
+.toolbar {
+  margin-bottom: 16px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.sign-summary-tag {
+  margin-left: 4px;
+}
+.nickname-text {
+  font-weight: 600;
+  color: #303133;
+}
+.promotion-text {
+  font-size: 12px;
+  color: #606266;
+}
+.uid-cell {
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+  font-size: 11px;
+  color: #909399;
+  letter-spacing: 0.3px;
+}
+/* 空间进度条 */
+.storage-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 2px 0;
+}
+.storage-bar-wrap {
+  height: 4px;
+  background: #f0f2f5;
+  border-radius: 2px;
+  overflow: hidden;
+}
+.storage-bar-fill {
+  height: 100%;
+  border-radius: 2px;
+  transition: width 0.3s;
+}
+.storage-bar-fill.bar-normal { background: #67c23a; }
+.storage-bar-fill.bar-warning { background: #e6a23c; }
+.storage-bar-fill.bar-danger { background: #f56c6c; }
+.storage-text {
+  font-size: 11px;
+  color: #909399;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+.storage-used { color: #606266; font-weight: 600; }
+.storage-total { color: #303133; font-weight: 600; }
+.storage-free { color: #909399; }
+.save-count {
+  font-size: 12px;
+  color: #909399;
+}
+.verifying {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: #909399;
+}
+:deep(.el-input-group__append) {
+  padding: 0;
+}
+:deep(.el-input-group__append .el-button) {
+  border-radius: 0;
+}
+
+/* Cookie 教程卡片 */
+.cookie-tips-item :deep(.el-form-item__content) {
+  margin-left: 0 !important;
+}
+.cookie-tips {
+  background: #f8faff;
+  border: 1px solid #e8f0fe;
+  border-radius: 8px;
+  padding: 14px 16px;
+  font-size: 12px;
+  line-height: 1.8;
+  color: #606266;
+  width: 100%;
+  box-sizing: border-box;
+}
+.cookie-tips-header {
+  margin-bottom: 10px;
+}
+.cookie-tips-title {
+  font-weight: 700;
+  color: #409eff;
+  font-size: 13px;
+}
+.cookie-tips-steps {
+  margin: 0;
+  padding-left: 20px;
+}
+.cookie-tips-steps li {
+  margin-bottom: 4px;
+}
+.cookie-tips-steps code {
+  background: #ecf5ff;
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-size: 11px;
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+}
+.cookie-tips-note {
+  margin-top: 8px;
+  padding: 6px 10px;
+  background: #fffbe6;
+  border: 1px solid #fff3c4;
+  border-radius: 4px;
+  color: #8a6d3b;
+  font-size: 11px;
+  line-height: 1.5;
+}
+.cookie-tips-note code {
+  background: #f5f0e0;
+  font-size: 11px;
+}
+</style>
--- a/packages/frontend/src/pages/admin/SaveRecords.vue
+++ b/packages/frontend/src/pages/admin/SaveRecords.vue
@@ -0,0 +1,774 @@
+<template>
+  <div class="save-records">
+    <!-- ── Toolbar ── -->
+    <div class="toolbar">
+      <div class="toolbar-row">
+        <div class="filter-group">
+          <el-select v-model="statusFilter" placeholder="状态" clearable style="width: 100px" @change="loadRecords(1)">
+            <el-option label="全部状态" value="" />
+            <el-option label="✓ 成功" value="success" />
+            <el-option label="♻️ 复用" value="reused" />
+            <el-option label="✗ 失败" value="failed" />
+          </el-select>
+
+          <el-select v-model="cloudFilter" placeholder="网盘" clearable style="width: 100px" @change="loadRecords(1)">
+            <el-option label="全部网盘" value="" />
+            <el-option v-for="ct in cloudTypes" :key="ct" :label="cloudLabel(ct)" :value="ct">
+              <span :style="{ display: 'inline-flex', alignItems: 'center', gap: '6px' }">
+                <img :src="cloudIcon(ct)" style="width:16px;height:16px" />
+                {{ cloudLabel(ct) }}
+              </span>
+            </el-option>
+          </el-select>
+
+          <div class="time-btns">
+            <button
+              v-for="btn in timeButtons" :key="btn.key"
+              :class="['time-btn', { active: activeTimeBtn === btn.key }]"
+              @click="setTimeFilter(btn.key)"
+            >{{ btn.label }}</button>
+          </div>
+
+          <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="YYYY-MM-DD"
+            style="width: 220px"
+            @change="onDateRangeChange"
+          />
+
+          <el-input
+            v-model="searchKeyword"
+            placeholder="搜索资源名称…"
+            clearable
+            style="width: 180px"
+            @clear="loadRecords(1)"
+            @keyup.enter="loadRecords(1)"
+          >
+            <template #prefix>
+              <el-icon><Search /></el-icon>
+            </template>
+          </el-input>
+        </div>
+
+        <div class="toolbar-actions">
+          <el-button size="small" @click="resetFilters">重置筛选</el-button>
+          <span class="record-count">共 {{ total }} 条</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── 转存统计汇总 ── -->
+    <div v-if="summary" class="save-summary">
+      <span class="summary-item summary-all">📊 共 <strong>{{ summary.total }}</strong> 条</span>
+      <span class="summary-divider">|</span>
+      <span class="summary-item summary-success">✅ 成功 <strong>{{ summary.success }}</strong></span>
+      <span class="summary-item summary-reused">♻️ 复用 <strong>{{ summary.reused }}</strong></span>
+      <span class="summary-item summary-failed">❌ 失败 <strong>{{ summary.failed }}</strong></span>
+      <span class="summary-item summary-rate" v-if="summary.total > 0">
+        成功率 <strong>{{ ((summary.success + summary.reused) / summary.total * 100).toFixed(1) }}%</strong>
+      </span>
+    </div>
+
+    <!-- ── Table ── -->
+    <div class="el-table-wrap">
+    <el-table
+      :data="records" stripe style="width: 100%"
+      v-loading="loading"
+      empty-text="暂无转存记录"
+      @expand-change="onExpandChange"
+      :row-class-name="rowClassName"
+    >
+      <el-table-column type="expand" width="36">
+        <template #default="{ row }">
+          <div class="expand-detail">
+            <!-- Row 1: 原始链接 + 文件夹数量 + 文件数量 -->
+            <div class="detail-row">
+              <div class="detail-cell">
+                <span class="detail-label">原始链接</span>
+                <a :href="row.source_url" target="_blank" class="detail-link">{{ row.source_url }}</a>
+              </div>
+              <div class="detail-cell" v-if="row.original_folder_name">
+                <span class="detail-label">原始文件夹名</span>
+                <code class="detail-code">{{ row.original_folder_name }}</code>
+              </div>
+              <div class="detail-cell" v-if="row.status !== 'reused' && (row.folder_count > 0 || row.file_count > 0)">
+                <span class="detail-label">文件夹</span>
+                <span><strong>{{ row.folder_count || 0 }}</strong> 个</span>
+              </div>
+              <div class="detail-cell" v-if="row.status !== 'reused' && (row.folder_count > 0 || row.file_count > 0)">
+                <span class="detail-label">文件</span>
+                <span><strong>{{ row.file_count || 0 }}</strong> 个</span>
+              </div>
+              <div class="detail-cell" v-if="row.status === 'reused'">
+                <span class="detail-label">复用方式</span>
+                <span class="reuse-msg">♻️ 直接使用已有分享链接，无需实际转存</span>
+              </div>
+            </div>
+            <!-- Row 2: 分享链接 + 分享密码 + 转存文件夹 -->
+            <div class="detail-row">
+              <div class="detail-cell" v-if="row.share_url">
+                <span class="detail-label">分享链接</span>
+                <a :href="row.share_url" target="_blank" class="detail-link">{{ row.share_url }}</a>
+              </div>
+              <div class="detail-cell" v-if="row.share_pwd">
+                <span class="detail-label">分享密码</span>
+                <el-tag size="small" type="warning">{{ row.share_pwd }}</el-tag>
+              </div>
+              <div class="detail-cell" v-if="row.folder_name">
+                <span class="detail-label">转存文件夹</span>
+                <code class="detail-code">{{ row.folder_name }}</code>
+              </div>
+            </div>
+            <!-- Row 3: IP地址 + 归属地 -->
+            <div class="detail-row" v-if="row.ip_address">
+              <div class="detail-cell">
+                <span class="detail-label">IP 地址</span>
+                <code class="detail-code">{{ row.ip_address }}</code>
+              </div>
+              <div class="detail-cell" v-if="row.ip_location">
+                <span class="detail-label">归属地</span>
+                <code class="detail-code">{{ formatLocation(row.ip_location) }}</code>
+              </div>
+            </div>
+            <!-- Row 4: 错误信息（整行） -->
+            <div class="detail-row" v-if="row.status === 'failed' && row.error_message">
+              <div class="detail-cell detail-full">
+                <span class="detail-label">错误信息</span>
+                <pre class="detail-error">{{ row.error_message }}</pre>
+              </div>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="序号" width="68" align="center">
+        <template #default="{ $index }">
+          {{ (currentPage - 1) * pageSize + $index + 1 }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="时间" width="140">
+        <template #default="{ row }">
+          <span :title="row.created_at">{{ formatTime(row.created_at) }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="网盘" width="70" align="center">
+        <template #default="{ row }">
+          <el-tooltip :content="cloudLabel(row.source_type)" placement="top">
+            <img :src="cloudIcon(row.source_type)" style="width:22px;height:22px;cursor:default" />
+          </el-tooltip>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="状态" width="72" align="center">
+        <template #default="{ row }">
+          <el-tooltip :content="statusTip(row.status)" placement="top">
+            <span :class="['status-badge', statusClass(row.status)]">
+              {{ statusIcon(row.status) }}
+            </span>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="资源名称" min-width="160" show-overflow-tooltip>
+        <template #default="{ row }">
+          <span :title="row.source_title || ''">{{ row.source_title || '-' }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="耗时" width="85" align="center">
+        <template #default="{ row }">
+          <span :class="['duration', durationClass(row.duration_ms)]">
+            {{ formatDuration(row.duration_ms) }}
+          </span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="归属地" min-width="130" show-overflow-tooltip>
+        <template #default="{ row }">
+          <span v-if="row.ip_location" class="loc-badge">{{ formatLocation(row.ip_location) }}</span>
+          <span v-else class="no-data">-</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="备注" min-width="200" show-overflow-tooltip>
+        <template #default="{ row }">
+          <span v-if="row.status === 'failed' && row.error_message" class="err-msg" :title="row.error_message">
+            {{ truncateErr(row.error_message) }}
+          </span>
+          <span v-else-if="row.status === 'failed'" class="err-msg">失败</span>
+          <span v-else-if="row.status === 'reused'" class="reuse-msg">♻️ 复用已有链接</span>
+          <span v-else class="no-data">-</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="操作" width="80" fixed="right" align="center">
+        <template #default="{ row }">
+          <div class="action-cell">
+            <el-tooltip content="复制分享链接" placement="top">
+              <el-button size="small" circle text :disabled="!row.share_url" @click="copyText(row.share_url!)">
+                <el-icon><Link /></el-icon>
+              </el-button>
+            </el-tooltip>
+            <el-tooltip content="打开分享链接" placement="top">
+              <el-button size="small" circle text :disabled="!row.share_url" @click="windowOpen(row.share_url!)">
+                <el-icon><TopRight /></el-icon>
+              </el-button>
+            </el-tooltip>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    </div>
+
+    <!-- ── Pagination ── -->
+    <div class="pagination-wrap" v-if="total > 0">
+      <div class="pagination-info">
+        第 {{ (currentPage - 1) * pageSize + 1 }}-{{ Math.min(currentPage * pageSize, total) }} 条，共 {{ total }} 条
+      </div>
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :total="total"
+        :page-sizes="[15, 20, 30, 50, 100]"
+        layout="sizes, prev, pager, next, jumper"
+        @current-change="loadRecords"
+        @size-change="loadRecords(1)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { getSaveRecords, getCloudTypes } from '../../api'
+import type { SaveRecord } from '../../api'
+import { ElMessage } from 'element-plus'
+import { Search, CopyDocument, Link, TopRight } from '@element-plus/icons-vue'
+
+const records = ref<SaveRecord[]>([])
+const total = ref(0)
+const currentPage = ref(1)
+const pageSize = ref(20)
+const loading = ref(false)
+const statusFilter = ref('')
+const cloudFilter = ref('')
+const searchKeyword = ref('')
+const activeTimeBtn = ref('today')
+const timeStart = ref('')
+const timeEnd = ref('')
+const dateRange = ref<string[] | null>(null)
+const cloudTypes = ref<string[]>([])
+const summary = ref<{ total: number; success: number; failed: number; reused: number } | null>(null)
+
+const timeButtons = [
+  { key: 'today', label: '今日' },
+  { key: 'week', label: '本周' },
+  { key: 'month', label: '本月' },
+  { key: 'lastMonth', label: '上月' },
+]
+
+// ── Cloud type helpers — loaded from backend API ──
+const cloudTypeMap = ref<Record<string, { label: string; icon: string }>>({})
+const FALLBACK_ICON_SVG = '<svg viewBox="0 0 24 24" width="16" height="16"><rect rx="4" width="24" height="24" fill="#909399"/><text x="12" y="16" text-anchor="middle" fill="white" font-size="14" font-weight="bold" font-family="Arial">☁</text></svg>'
+
+async function loadCloudTypes() {
+  try {
+    const res = await getCloudTypes()
+    const map: Record<string, { label: string; icon: string }> = {}
+    for (const ct of res.types) {
+      map[ct.type] = { label: ct.label, icon: ct.icon }
+    }
+    cloudTypeMap.value = map
+  } catch {
+    // ignore
+  }
+}
+function cloudLabel(t: string): string { return cloudTypeMap.value[t]?.label || t }
+function cloudIcon(t: string): string  { return cloudTypeMap.value[t]?.icon || FALLBACK_ICON_SVG }
+
+function extractCloudTypes(data: SaveRecord[]) {
+  const set = new Set<string>()
+  data.forEach(r => { if (r.source_type) set.add(r.source_type) })
+  const existing = new Set(cloudTypes.value)
+  set.forEach(t => { if (!existing.has(t)) cloudTypes.value.push(t) })
+}
+
+// ── Formatting helpers ──
+function fmt(d: Date): string {
+  const y = d.getFullYear()
+  const M = String(d.getMonth() + 1).padStart(2, '0')
+  const D = String(d.getDate()).padStart(2, '0')
+  return `${y}-${M}-${D}`
+}
+
+function formatTime(t: string): string {
+  if (!t) return '-'
+  let ts = t
+  if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(ts)) ts = ts.replace(' ', 'T') + '+08:00'
+  const d = new Date(ts)
+  if (isNaN(d.getTime())) return t
+  const pad = (n: number) => String(n).padStart(2, '0')
+  return `${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
+}
+
+function formatDuration(ms: number): string {
+  if (!ms) return '-'
+  if (ms < 1000) return `${ms}ms`
+  return `${(ms / 1000).toFixed(1)}s`
+}
+
+function durationClass(ms: number): string {
+  if (!ms) return ''
+  if (ms > 30000) return 'dur-slow'
+  if (ms > 10000) return 'dur-warn'
+  return 'dur-fast'
+}
+
+function fileCountType(n: number): string {
+  if (n >= 50) return 'danger'
+  if (n >= 10) return 'warning'
+  return 'success'
+}
+
+function truncateErr(msg: string): string {
+  return msg.length > 50 ? msg.slice(0, 50) + '…' : msg
+}
+
+// ── Status helpers ──
+function statusTip(status: string): string {
+  if (status === 'success') return '转存成功'
+  if (status === 'reused') return '♻️ 复用已有分享链接'
+  return '转存失败'
+}
+function statusClass(status: string): string {
+  if (status === 'success') return 'status-ok'
+  if (status === 'reused') return 'status-reuse'
+  return 'status-fail'
+}
+function statusIcon(status: string): string {
+  if (status === 'success') return '✓'
+  if (status === 'reused') return '♻️'
+  return '✗'
+}
+
+/** 省份/城市中英文翻译（用于 api.ip.sb 返回的英语地名） */
+const CN_PLACES: Record<string, string> = {
+  // 省份/直辖市
+  'Anhui':'安徽','Beijing':'北京','Chongqing':'重庆','Fujian':'福建','Gansu':'甘肃','Guangdong':'广东',
+  'Guangxi':'广西','Guizhou':'贵州','Hainan':'海南','Hebei':'河北','Henan':'河南','Heilongjiang':'黑龙江',
+  'Hubei':'湖北','Hunan':'湖南','Inner Mongolia':'内蒙古','Jiangsu':'江苏','Jiangxi':'江西','Jilin':'吉林',
+  'Liaoning':'辽宁','Ningxia':'宁夏','Qinghai':'青海','Shaanxi':'陕西','Shandong':'山东','Shanghai':'上海',
+  'Shanxi':'山西','Sichuan':'四川','Tianjin':'天津','Tibet':'西藏','Xinjiang':'新疆','Yunnan':'云南','Zhejiang':'浙江',
+  'Hong Kong':'香港','Macau':'澳门','Taiwan':'台湾',
+  // 主要城市
+  'Changsha':'长沙','Hefei':'合肥','Fuzhou':'福州','Lanzhou':'兰州',
+  'Guangzhou':'广州','Nanning':'南宁','Guiyang':'贵阳','Haikou':'海口',
+  'Shijiazhuang':'石家庄','Zhengzhou':'郑州','Harbin':'哈尔滨','Wuhan':'武汉',
+  'Nanjing':'南京','Nanchang':'南昌','Changchun':'长春','Shenyang':'沈阳',
+  'Yinchuan':'银川','Xining':'西宁',"Xi'an":"西安",'Jinan':'济南',
+  'Taiyuan':'太原','Chengdu':'成都','Shenzhen':'深圳','Hangzhou':'杭州',
+  'Suzhou':'苏州','Wuxi':'无锡','Ningbo':'宁波','Dongguan':'东莞',
+  'Foshan':'佛山','Zhuhai':'珠海','Qingdao':'青岛','Dalian':'大连',
+  'Xiamen':'厦门','Kunming':'昆明','Lhasa':'拉萨','Urumqi':'乌鲁木齐',
+  'Linyi':'临沂','Wenzhou':'温州','Quanzhou':'泉州',
+};
+
+/** 常见英文ISP → 中文 */
+const CN_ISP: Record<string, string> = {
+  'China Telecom':'中国电信','China Mobile':'中国移动','China Unicom':'中国联通',
+  'Chinanet':'中国电信','ChinaNet':'中国电信','CMNET':'中国移动',
+  'CNC Group':'中国联通','unicom':'中国联通','telecom':'中国电信','mobile':'中国移动',
+  'China Education and Research Network':'教育网','CERNET':'教育网',
+  'China Networks':'中国网络','China163':'中国电信','CHINANET BACKBONE':'中国电信',
+  'Tencent Cloud':'腾讯云','Alibaba Cloud':'阿里云','Aliyun':'阿里云','Huawei Cloud':'华为云',
+  'Baidu':'百度','Beijing Baidu':'百度',
+};
+
+function formatLocation(loc: string): string {
+  // Remove "China" prefix
+  let s = loc.replace(/^(中国|China)\s*/i, '')
+  // Split into parts
+  const parts = s.split(/\s+/).filter(Boolean)
+  // Translate each part
+  return parts.map(p => CN_PLACES[p] || CN_ISP[p] || p).join(' ')
+}
+
+function rowClassName({ row }: { row: SaveRecord }) {
+  return row.status === 'failed' ? 'row-failed' : ''
+}
+
+// ── Actions ──
+async function copyText(text: string) {
+  try {
+    await navigator.clipboard.writeText(text)
+    ElMessage.success('已复制到剪贴板')
+  } catch {
+    // fallback
+    const ta = document.createElement('textarea')
+    ta.value = text
+    document.body.appendChild(ta)
+    ta.select()
+    document.execCommand('copy')
+    document.body.removeChild(ta)
+    ElMessage.success('已复制到剪贴板')
+  }
+}
+
+function windowOpen(url: string) {
+  window.open(url, '_blank')
+}
+
+function onExpandChange(row: SaveRecord, expanded: boolean[]) {
+  // just placeholder for potential future use
+}
+
+// ── Filter helpers ──
+function setTimeFilter(key: string) {
+  activeTimeBtn.value = key
+  dateRange.value = null
+  const now = new Date()
+  const y = now.getFullYear()
+  const m = now.getMonth()
+
+  let start: Date
+  let end: Date
+  switch (key) {
+    case 'today':
+      start = new Date(y, m, now.getDate())
+      end = start
+      break
+    case 'week': {
+      const dow = now.getDay()
+      start = new Date(y, m, now.getDate() + (dow === 0 ? -6 : 1 - dow))
+      end = now
+      break
+    }
+    case 'month':
+      start = new Date(y, m, 1)
+      end = now
+      break
+    case 'lastMonth':
+      start = new Date(y, m - 1, 1)
+      end = new Date(y, m, 0)
+      break
+    default:
+      start = new Date(y, m, now.getDate())
+      end = start
+  }
+  timeStart.value = fmt(start)
+  const nextDay = new Date(end.getFullYear(), end.getMonth(), end.getDate() + 1)
+  timeEnd.value = fmt(nextDay)
+  loadRecords(1)
+}
+
+function onDateRangeChange(val: string[] | null) {
+  if (val && val.length === 2) {
+    activeTimeBtn.value = ''
+    timeStart.value = val[0]
+    const next = new Date(val[1])
+    next.setDate(next.getDate() + 1)
+    timeEnd.value = fmt(next)
+    loadRecords(1)
+  } else {
+    setTimeFilter('today')
+  }
+}
+
+function resetFilters() {
+  statusFilter.value = ''
+  cloudFilter.value = ''
+  searchKeyword.value = ''
+  dateRange.value = null
+  setTimeFilter('today')
+}
+
+async function loadRecords(page = 1) {
+  loading.value = true
+  try {
+    currentPage.value = page
+    const s = statusFilter.value || undefined
+    const c = cloudFilter.value || undefined
+    const kw = searchKeyword.value || undefined
+    const res = await getSaveRecords(page, pageSize.value, timeStart.value, timeEnd.value, s, c, kw)
+    records.value = res.records
+    total.value = res.total
+    summary.value = res.summary || null
+    extractCloudTypes(res.records)
+  } catch (e) {
+    console.error('加载转存记录失败', e)
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  setTimeFilter('today')
+  loadCloudTypes()
+})
+</script>
+
+<style scoped>
+.save-records { padding: 0; }
+
+/* ── Toolbar ── */
+.toolbar-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  flex-wrap: wrap;
+  border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
+}
+.filter-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.record-count {
+  font-size: 13px;
+  color: var(--text-secondary, #909399);
+  white-space: nowrap;
+}
+
+/* ── Time buttons ── */
+.time-btns {
+  display: flex;
+  gap: 2px;
+  background: var(--el-fill-color-light, #f0f2f5);
+  border-radius: 8px;
+  padding: 3px;
+}
+.time-btn {
+  border: none;
+  background: transparent;
+  padding: 6px 14px;
+  border-radius: 6px;
+  font-size: 13px;
+  color: #606266;
+  cursor: pointer;
+  transition: all .25s ease;
+}
+.time-btn:hover {
+  color: var(--el-color-primary);
+  background: rgba(64,158,255,.06);
+}
+.time-btn.active {
+  background: linear-gradient(135deg, var(--el-color-primary), var(--el-color-primary-light-3, #79bbff));
+  color: #fff;
+  font-weight: 600;
+  box-shadow: 0 2px 6px rgba(64,158,255,.3);
+}
+
+/* ── Table ── */
+.save-records :deep(.el-table) {
+  border: 1px solid var(--el-border-color-light, #ebeef5);
+  border-radius: 8px;
+}
+.save-records .el-table-wrap {
+  overflow-x: auto;
+}
+.save-records :deep(.el-table th.el-table__cell) {
+  background-color: var(--el-fill-color-light, #f5f7fa);
+  font-weight: 600;
+  color: var(--el-text-color-primary, #303133);
+  white-space: nowrap;
+}
+.save-records :deep(.el-table .el-table__cell) {
+  padding: 8px 8px;
+  white-space: nowrap !important;
+}
+.save-records :deep(.el-table .el-table__cell .cell) {
+  white-space: nowrap !important;
+}
+
+/* ── Cell content: one-line with ellipsis ── */
+.cell-nowrap {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.save-records :deep(.el-table__row:hover > .el-table__cell) {
+  background-color: var(--el-color-primary-light-9, #ecf5ff);
+}
+
+/* Row highlight for failed */
+.save-records :deep(.row-failed > .el-table__cell) {
+  background-color: rgba(245,108,108,.04);
+}
+
+/* ── Status badge ── */
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  font-size: 13px;
+  font-weight: bold;
+}
+.status-ok {
+  background: rgba(103,194,58,.15);
+  color: #67c23a;
+}
+.status-reuse {
+  background: rgba(64,158,255,.15);
+  color: #409eff;
+}
+.status-fail {
+  background: rgba(245,108,108,.15);
+  color: #f56c6c;
+}
+
+/* ── Cell helpers ── */
+.ip-text {
+  font-family: monospace;
+  font-size: 12px;
+}
+.loc-badge {
+  display: inline-block;
+  background: linear-gradient(135deg, #e8f4ff, #f0f8ff);
+  color: #1a6ea0;
+  font-size: 12px;
+  padding: 2px 10px;
+  border-radius: 4px;
+  border: 1px solid #b8d9f0;
+  white-space: nowrap;
+}
+.err-msg {
+  color: var(--el-color-danger);
+  font-size: 12px;
+}
+.reuse-msg {
+  color: var(--el-color-primary);
+  font-size: 12px;
+}
+.no-data {
+  color: var(--text-secondary, #c0c4cc);
+}
+
+/* ── Duration color ── */
+.duration { font-size: 12px; font-family: monospace; }
+.dur-fast { color: #67c23a; }
+.dur-warn { color: #e6a23c; }
+.dur-slow { color: #f56c6c; font-weight: 600; }
+
+/* ── Expand detail (flex rows) ── */
+.expand-detail {
+  padding: 16px 24px;
+  background: var(--el-fill-color-lighter, #fafafa);
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.detail-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px 24px;
+  flex-wrap: wrap;
+}
+.detail-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: none;
+}
+.detail-cell.detail-full {
+  flex: 1 1 100%;
+}
+.detail-label {
+  font-size: 12px;
+  color: #909399;
+  font-weight: 500;
+}
+.detail-link {
+  color: var(--el-color-primary);
+  font-size: 13px;
+  word-break: break-all;
+  text-decoration: none;
+}
+.detail-link:hover { text-decoration: underline; }
+.detail-code {
+  font-size: 12px;
+  background: #f0f0f0;
+  padding: 4px 8px;
+  border-radius: 4px;
+  word-break: break-all;
+}
+.detail-error {
+  margin: 0;
+  font-size: 12px;
+  color: #f56c6c;
+  background: rgba(245,108,108,.08);
+  padding: 8px 12px;
+  border-radius: 4px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 120px;
+  overflow-y: auto;
+}
+
+/* ── Action cell ── */
+.action-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+}
+
+/* ── Pagination ── */
+.pagination-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 20px;
+  padding: 12px 16px;
+  background: var(--el-fill-color-light, #f5f7fa);
+  border-radius: 8px;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+.pagination-info {
+  font-size: 13px;
+  color: var(--text-secondary, #909399);
+  white-space: nowrap;
+}
+
+/* ── 转存统计汇总 ── */
+.save-summary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  margin-bottom: 8px;
+  background: var(--el-fill-color-light, #f5f7fa);
+  border-radius: 8px;
+  font-size: 13px;
+  flex-wrap: wrap;
+}
+.summary-item {
+  white-space: nowrap;
+}
+.summary-success strong { color: #67c23a; }
+.summary-failed strong { color: #f56c6c; }
+.summary-reused strong { color: #e6a23c; }
+.summary-rate { color: #909399; }
+.summary-rate strong { color: #409eff; }
+.summary-divider { color: #dcdfe6; font-size: 12px; user-select: none; }
+</style>
--- a/packages/frontend/src/pages/admin/StatsView.vue
+++ b/packages/frontend/src/pages/admin/StatsView.vue
@@ -0,0 +1,318 @@
+<template>
+  <div class="stats-view">
+    <!-- 概览卡片 -->
+    <div class="overview-cards">
+      <el-card class="overview-card" shadow="never">
+        <div class="overview-value primary">{{ stats.todaySearches }}</div>
+        <div class="overview-label">今日搜索</div>
+      </el-card>
+      <el-card class="overview-card" shadow="never">
+        <div class="overview-value success">{{ stats.todaySaves }}</div>
+        <div class="overview-label">今日保存</div>
+      </el-card>
+      <el-card class="overview-card" shadow="never">
+        <div class="overview-value primary">{{ stats.monthSearches }}</div>
+        <div class="overview-label">本月搜索</div>
+      </el-card>
+      <el-card class="overview-card" shadow="never">
+        <div class="overview-value success">{{ stats.monthSaves }}</div>
+        <div class="overview-label">本月保存</div>
+      </el-card>
+      <el-card class="overview-card" shadow="never">
+        <div class="overview-value info">{{ stats.totalSearches }}</div>
+        <div class="overview-label">总搜索量</div>
+      </el-card>
+      <el-card class="overview-card" shadow="never">
+        <div class="overview-value warning">{{ stats.totalSaves }}</div>
+        <div class="overview-label">总保存量</div>
+      </el-card>
+    </div>
+
+    <div class="stats-grid">
+      <!-- 近7天趋势 -->
+      <el-card class="stats-card" shadow="never">
+        <template #header>
+          <span>📈 近 7 天趋势</span>
+        </template>
+        <el-table :data="stats.trendTrend" stripe size="small" style="width: 100%">
+          <el-table-column label="日期" min-width="120">
+            <template #default="{ row }">
+              {{ formatDate(row.date) }}
+            </template>
+          </el-table-column>
+          <el-table-column label="搜索" width="100" align="center">
+            <template #default="{ row }">
+              <el-tag size="small" type="primary" effect="plain">{{ row.searches }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="保存" width="100" align="center">
+            <template #default="{ row }">
+              <el-tag size="small" type="success" effect="plain">{{ row.saves }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="趋势" min-width="150">
+            <template #default="{ row }">
+              <div class="trend-bar-wrap">
+                <div class="trend-bar" :style="{ width: trendBarWidth(row) + '%', background: trendBarColor(row) }"></div>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+
+      <!-- 热门搜索关键词 -->
+      <el-card class="stats-card" shadow="never">
+        <template #header>
+          <span>🔥 热门搜索关键词 Top 20</span>
+        </template>
+        <el-table :data="stats.hotKeywords" stripe size="small" style="width: 100%" :max-height="480">
+          <el-table-column type="index" label="排名" width="60" />
+          <el-table-column prop="keyword" label="关键词" min-width="200" />
+          <el-table-column prop="count" label="搜索次数" width="120" align="center">
+            <template #default="{ row }">
+              <el-tag>{{ row.count }}</el-tag>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-empty v-if="stats.hotKeywords.length === 0" description="暂无数据" :image-size="60" />
+      </el-card>
+
+      <!-- 网盘使用空间 -->
+      <el-card class="stats-card" shadow="never">
+        <template #header>
+          <span>💾 网盘使用空间</span>
+        </template>
+        <div v-for="item in stats.cloudUsage" :key="item.cloudType" class="storage-item">
+          <div class="storage-header">
+            <span class="storage-label">{{ item.nickname || item.cloudType }}</span>
+            <span class="storage-badge" :class="item.isActive ? 'active' : 'inactive'">{{ item.isActive ? '正常' : '停用' }}</span>
+          </div>
+          <div class="storage-detail">
+            <span class="storage-usage">{{ item.storageUsed || '未知' }} / {{ item.storageTotal || '未知' }}</span>
+            <span class="storage-pct">{{ storagePercent(item) }}%</span>
+          </div>
+          <el-progress :percentage="storagePercent(item)" :stroke-width="14" :color="storagePercent(item) > 80 ? '#f56c6c' : '#67c23a'" />
+        </div>
+        <el-empty v-if="stats.cloudUsage.length === 0" description="暂无网盘数据" :image-size="60" />
+      </el-card>
+
+      <!-- 保存操作来源 IP Top 10 -->
+      <el-card class="stats-card" shadow="never">
+        <template #header>
+          <span>🌐 保存操作来源 IP Top 10</span>
+        </template>
+        <el-table :data="stats.topIps" stripe size="small" style="width: 100%">
+          <el-table-column type="index" label="排名" width="60" />
+          <el-table-column prop="ip" label="IP" min-width="160">
+            <template #default="{ row }">
+              <span style="font-family: monospace; font-size: 12px">{{ row.ip }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="访问地址" min-width="160">
+            <template #default="{ row }">
+              <span v-if="row.ip_location" style="font-size: 12px">{{ formatLocation(row.ip_location) }}</span>
+              <span v-else class="no-data">-</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="count" label="操作次数" width="100" align="center">
+            <template #default="{ row }">
+              <el-tag type="warning" effect="plain">{{ row.count }}</el-tag>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-empty v-if="stats.topIps.length === 0" description="暂无数据" :image-size="60" />
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { getStats } from '../../api'
+import type { StatsData } from '../../types'
+
+const stats = ref<StatsData>({
+  todaySearches: 0,
+  todaySaves: 0,
+  monthSearches: 0,
+  monthSaves: 0,
+  totalSearches: 0,
+  totalSaves: 0,
+  hotKeywords: [],
+  trendTrend: [],
+  cloudUsage: [],
+  topIps: [],
+  provinceRankings: [],
+})
+
+onMounted(async () => {
+  try {
+    stats.value = await getStats()
+  } catch (e) {
+    console.error('加载统计数据失败', e)
+  }
+})
+
+function formatDate(d: string): string {
+  if (!d) return '-'
+  return d.split(' ')[0] || d
+}
+
+/** Strip "中国/China" prefix from location string for consistent display */
+function formatLocation(loc: string): string {
+  if (!loc) return ''
+  return loc.replace(/^(中国|China)\s*/i, '').trim()
+}
+
+function storagePercent(item: { storageUsed: string; storageTotal: string }): number {
+  if (!item.storageUsed || !item.storageTotal) return 0
+  const used = parseFloat(item.storageUsed)
+  const total = parseFloat(item.storageTotal)
+  if (total <= 0) return 0
+  return Math.round((used / total) * 100)
+}
+
+/// 趋势条宽度（基于当日搜索+保存之和）
+function trendBarWidth(row: { searches: number; saves: number }): number {
+  const max = Math.max(...stats.value.trendTrend.map(r => r.searches + r.saves), 1)
+  return ((row.searches + row.saves) / max) * 100
+}
+function trendBarColor(row: { searches: number; saves: number }): string {
+  const total = row.searches + row.saves
+  if (total === 0) return '#ebeef5'
+  // Color gradient: more saves → more green
+  const ratio = row.saves / Math.max(total, 1)
+  if (ratio > 0.5) return '#67c23a'
+  if (ratio > 0.2) return '#409eff'
+  return '#909399'
+}
+</script>
+
+<style scoped>
+.overview-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+/* --- 概览卡片：阴影 + 悬浮 + 渐变底色 --- */
+.overview-card {
+  border: none !important;
+  border-radius: 12px !important;
+  background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.overview-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+}
+.overview-card :deep(.el-card__body) {
+  text-align: center;
+  padding: 22px 16px;
+  background: transparent !important;
+}
+.overview-value {
+  font-size: 36px;
+  font-weight: 700;
+  margin-bottom: 6px;
+}
+.overview-value.primary { color: var(--el-color-primary); }
+.overview-value.success { color: var(--el-color-success); }
+.overview-value.info    { color: var(--el-color-info); }
+.overview-value.warning { color: var(--el-color-warning); }
+.overview-label {
+  font-size: 14px;
+  color: var(--el-text-color-secondary);
+}
+
+/* --- stats-card 美化阴影和圆角 --- */
+.stats-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.stats-card {
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  transition: box-shadow 0.3s ease;
+  border: 1px solid var(--el-border-color-light, #ebeef5);
+}
+.stats-card:hover {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.09);
+}
+.stats-card :deep(.el-card__header) {
+  padding: 12px 16px;
+  font-size: 15px;
+  font-weight: 600;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+  background: linear-gradient(90deg, #fafbfc 0%, #ffffff 100%);
+}
+
+/* --- 表格行 hover 高亮 --- */
+.stats-view :deep(.el-table__body tr:hover > td.el-table__cell) {
+  background-color: #ecf5ff !important;
+  cursor: default;
+}
+.stats-view :deep(.el-table__body tr) {
+  transition: background-color 0.2s ease;
+}
+
+/* --- 趋势条 --- */
+.trend-bar-wrap {
+  height: 16px;
+  background: #f0f2f5;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.trend-bar {
+  height: 100%;
+  border-radius: 8px;
+  transition: width .3s;
+  min-width: 4px;
+}
+
+/* --- 存储进度条更圆润 --- */
+.stats-view :deep(.el-progress-bar__outer) {
+  border-radius: 99px !important;
+  overflow: hidden;
+}
+.stats-view :deep(.el-progress-bar__inner) {
+  border-radius: 99px !important;
+}
+.storage-item {
+  padding: 12px 0;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+}
+.storage-item:last-child {
+  border-bottom: none;
+}
+.storage-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 4px;
+}
+.storage-label {
+  font-size: 14px;
+  font-weight: 500;
+}
+.storage-badge {
+  font-size: 11px;
+  padding: 1px 8px;
+  border-radius: 4px;
+}
+.storage-badge.active { background: #f0f9eb; color: #67c23a; }
+.storage-badge.inactive { background: #fef0f0; color: #f56c6c; }
+.storage-detail {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  margin-bottom: 6px;
+}
+.storage-pct {
+  font-weight: 600;
+}
+</style>
--- a/packages/frontend/src/pages/admin/SystemConfig.vue
+++ b/packages/frontend/src/pages/admin/SystemConfig.vue