src/views/torrent/TorrentsView.vue

<template>
  <div class="torrents-page">
    <div class="page-header">
      <h1>种子资源</h1>
      <div class="header-actions">
        <el-button type="primary" :icon="Upload" @click="$router.push('/upload')">
          上传种子
        </el-button>
      </div>
    </div>

    <!-- 搜索和筛选 -->
    <div class="search-section">
      <div class="search-bar">
        <el-input
          v-model="searchQuery"
          placeholder="搜索种子..."
          :prefix-icon="Search"
          size="large"
          @keyup.enter="handleSearch"
          clearable
        />
        <el-button type="primary" size="large" @click="handleSearch">
          搜索
        </el-button>
      </div>
      
      <div class="filters">
        <el-select v-model="selectedCategory" placeholder="分类" @change="handleFilter">
          <el-option
            v-for="category in categoryOptions"
            :key="category.slug"
            :label="category.name"
            :value="category.slug"
          />
        </el-select>
      </div>
    </div>

    <!-- 种子列表 -->
    <div class="torrents-list">
      <div class="list-header">
        <span class="results-count">共找到 {{ totalCount }} 个种子</span>
      </div>
      
      <!-- <div style="background: yellow; padding: 10px; margin: 10px 0;">
        <p>调试信息:</p>
        <p>torrents长度: {{ torrents.length }}</p>
        <p>totalCount: {{ totalCount }}</p>
        <p>loading: {{ loading }}</p>
        <pre>{{ JSON.stringify(torrents[0], null, 2) }}</pre>
      </div> -->
      
      <el-table 
        :data="torrents" 
        v-loading="loading"
        @row-click="handleRowClick"
        stripe
        class="torrents-table"
      >
        <el-table-column label="分类" width="100">
          <template #default="{ row }">
            <el-tag 
              :type="getCategoryType(row.category)" 
              size="small"
            >
              {{ row.category?.name || '未分类' }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column label="种子信息" min-width="400">
          <template #default="{ row }">
            <div class="torrent-info">
              <h4 class="torrent-title">{{ row.title }}</h4>
              <div class="torrent-subtitle" v-if="row.subTitle">
                {{ row.subTitle }}
              </div>
              <div class="torrent-meta">
                <span class="uploader">
                  <el-icon><User /></el-icon>
                  {{ row.anonymous ? '匿名用户' : row.user?.username }}
                </span>
                <span class="upload-time">
                  <el-icon><Clock /></el-icon>
                  {{ formatTime(row.createdAt) }}
                </span>
                <span class="file-size">
                  <el-icon><Document /></el-icon>
                  {{ formatSize(row.size) }}
                </span>
              </div>
              <div class="torrent-tags" v-if="row.tag && row.tag.length > 0">
                <el-tag 
                  v-for="tag in row.tag" 
                  :key="tag" 
                  size="small" 
                  type="info"
                  class="tag-item"
                >
                  {{ tag }}
                </el-tag>
              </div>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column label="做种" width="80" align="center">
          <template #default="{ row }">
            <span class="seeders">{{ row.seeders || 0 }}</span>
          </template>
        </el-table-column>
        
        <el-table-column label="下载" width="80" align="center">
          <template #default="{ row }">
            <span class="leechers">{{ row.leechers || 0 }}</span>
          </template>
        </el-table-column>
        
        <el-table-column label="完成" width="80" align="center">
          <template #default="{ row }">
            <span>{{ row.downloads || 0 }}</span>
          </template>
        </el-table-column>
        
        <el-table-column label="操作" width="120" align="center">
          <template #default="{ row }">
            <el-button 
              type="primary" 
              size="small" 
              :icon="Download"
              @click.stop="handleDownload(row)"
            >
              下载
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10,20, 50, 100]"
          :total="totalCount"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, watch, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Search,
  Upload,
  Download,
  User,
  Clock,
  Document
} from '@element-plus/icons-vue'
import { searchTorrents, getCategories } from '@/api/torrent'

export default {
  name: 'TorrentsView',
  setup() {
    const router = useRouter()
    const route = useRoute()
    
    const loading = ref(false)
    const searchQuery = ref('')
    const selectedCategory = ref('')
    const sortBy = ref('upload_time')
    const sortOrder = ref('desc')
    const currentPage = ref(1)
    const pageSize = ref(20)
    const totalCount = ref(0)
    const totalPages = ref(0)
    
    const torrents = ref([])
    const categories = ref([])
    
    onMounted(() => {
      // 从URL参数初始化搜索条件
      if (route.query.q) {
        searchQuery.value = route.query.q
      }
      if (route.query.category) {
        selectedCategory.value = route.query.category
      }
      if (route.query.page) {
        currentPage.value = parseInt(route.query.page)
      }
      
      fetchCategories()
      fetchTorrents()
    })
    
    const fetchTorrents = async () => {
      loading.value = true
      try {
        if (selectedCategory.value) {
          // 使用 GET 请求
          const response = await fetch(`/api/torrent/search?category=${selectedCategory.value}`)
        .then(res => res.json())

          torrents.value = response.torrents || []
          totalCount.value = response.totalElements || 0
          totalPages.value = response.totalPages || 1

        } else {
          // 使用 POST 请求（搜索）
          const searchParams = {
            keyword: searchQuery.value || '',
            page: currentPage.value - 1,
            entriesPerPage: pageSize.value
          }

          const response = await searchTorrents(searchParams)

          torrents.value = response.torrents || []
          totalCount.value = response.totalElements || 0
          totalPages.value = response.totalPages || 1
        }

      } catch (error) {
        console.error('获取种子列表失败:', error)
        ElMessage.error('获取种子列表失败')
        torrents.value = []
        totalCount.value = 0
      } finally {
        loading.value = false
      }
    }
    
    const fetchCategories = async () => {
      try {
        const response = await getCategories()
        console.log('分类列表响应:', response)
        
        if (response && Array.isArray(response)) {
          categories.value = response
          console.log('分类列表加载成功:', categories.value)
        } else {
          console.error('获取分类列表失败: 响应格式错误', response)
          ElMessage.warning('分类列表格式不正确')
        }
      } catch (error) {
        console.error('获取分类列表失败:', error)
        ElMessage.error('获取分类列表失败')
      }
    }
    
    const handleSearch = () => {
      currentPage.value = 1
      updateURL()
      fetchTorrents()
    }
    
    const handleFilter = () => {
      currentPage.value = 1
      updateURL()
      fetchTorrents()
    }
    
    const updateURL = () => {
      const query = {}
      if (searchQuery.value) query.q = searchQuery.value
      if (selectedCategory.value) query.category = selectedCategory.value
      if (currentPage.value > 1) query.page = currentPage.value
      
      router.replace({ query })
    }
    
    const handleRowClick = (row) => {
      router.push(`/torrent/${row.infoHash}`)
    }
    
    const handleDownload = (row) => {
      ElMessage.success(`开始下载: ${row.title || row.name}`)
      // 这里实现下载逻辑
    }
    
    const handleSizeChange = (size) => {
      pageSize.value = size
      currentPage.value = 1
      fetchTorrents()
    }
    
    const handleCurrentChange = (page) => {
      currentPage.value = page
      updateURL()
      fetchTorrents()
    }
    
    const formatTime = (timeString) => {
      if (!timeString) return '-'
      
      const date = new Date(timeString)
      const now = new Date()
      const diff = now - date
      const hours = Math.floor(diff / (1000 * 60 * 60))
      
      if (hours < 1) return '刚刚'
      if (hours < 24) return `${hours}小时前`
      const days = Math.floor(hours / 24)
      if (days < 30) return `${days}天前`
      
      return date.toLocaleDateString('zh-CN')
    }
    
    const formatSize = (sizeInBytes) => {
      if (!sizeInBytes) return '-'
      
      const units = ['B', 'KB', 'MB', 'GB', 'TB']
      let size = sizeInBytes
      let unitIndex = 0
      
      while (size >= 1024 && unitIndex < units.length - 1) {
        size /= 1024
        unitIndex++
      }
      
      return `${size.toFixed(1)} ${units[unitIndex]}`
    }
    
    const getCategoryType = (category) => {
      if (!category) return ''
      const types = {
        'os': 'primary',
        'movie': 'success',
        'db': 'info',
        'music': 'warning',
        'software': 'danger'
      }
      return types[category.slug] || ''
    }
    
    const categoryOptions = computed(() => {
      return [
        { id: '', name: '全部' },
        ...categories.value
      ]
    })
    
    return {
      loading,
      searchQuery,
      selectedCategory,
      sortBy,
      sortOrder,
      currentPage,
      pageSize,
      totalCount,
      torrents,
      categories,
      categoryOptions,
      handleSearch,
      handleFilter,
      handleRowClick,
      handleDownload,
      handleSizeChange,
      handleCurrentChange,
      formatTime,
      formatSize,
      getCategoryType,
      Search,
      Upload,
      Download,
      User,
      Clock,
      Document
    }
  }
}
</script>

<style lang="scss" scoped>
.torrents-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  
  h1 {
    font-size: 28px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
  }
}

.search-section {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  
  .search-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    
    .el-input {
      flex: 1;
    }
  }
  
  .filters {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    
    .el-select {
      width: 120px;
    }
  }
}

.torrents-list {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  
  .list-header {
    margin-bottom: 16px;
    
    .results-count {
      font-size: 14px;
      color: #909399;
    }
  }
  
  .torrents-table {
    .torrent-info {
      .torrent-title {
        font-size: 16px;
        font-weight: 500;
        color: #2c3e50;
        margin: 0 0 8px 0;
        line-height: 1.4;
        cursor: pointer;
        
        &:hover {
          color: #409eff;
        }
      }
      
      .torrent-meta {
        display: flex;
        gap: 16px;
        font-size: 12px;
        color: #909399;
        
        span {
          display: flex;
          align-items: center;
          gap: 4px;
        }
      }
    }
    
    .seeders {
      color: #67c23a;
      font-weight: 600;
    }
    
    .leechers {
      color: #f56c6c;
      font-weight: 600;
    }
  }
  
  .pagination-wrapper {
    margin-top: 24px;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .torrents-page {
    padding: 16px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .filters {
    flex-direction: column;
    align-items: flex-start;
    
    .el-select {
      width: 100%;
    }
  }
  
  .torrents-table {
    :deep(.el-table__header),
    :deep(.el-table__body) {
      font-size: 12px;
    }
  }
}
</style>