diff --git a/src/api/torrent.js b/src/api/torrent.js
index eb10784..e49887e 100644
--- a/src/api/torrent.js
+++ b/src/api/torrent.js
@@ -128,4 +128,16 @@
     url: `/torrent/view/${infoHash}`,
     method: 'get'
   })
+}
+
+/**
+ * 下载种子
+ * @param {string} infoHash - 种子的info hash
+ * @returns {Promise}
+ */
+export function downloadTorrent(infoHash) {
+  return request({
+    url: `/torrent/download/${infoHash}`,
+    method: 'get'
+  })
 }
\ No newline at end of file
diff --git a/src/views/torrent/TorrentDetailView.vue b/src/views/torrent/TorrentDetailView.vue
index a79a528..1780d68 100644
--- a/src/views/torrent/TorrentDetailView.vue
+++ b/src/views/torrent/TorrentDetailView.vue
@@ -1,979 +1,1001 @@
-<template>
-  <div class="torrent-detail-page">
-    <div class="page-container">
-      <!-- 加载状态 -->
-      <div v-if="loading" class="loading-container">
-        <el-skeleton :rows="8" animated />
-      </div>
-
-      <!-- 详情内容 -->
-      <div v-else-if="torrentInfo">
-        <!-- 返回按钮 -->
-        <div class="back-button">
-          <el-button :icon="ArrowLeft" @click="$router.back()">
-            返回列表
-          </el-button>
-        </div>
-
-        <!-- 种子基本信息 -->
-        <div class="torrent-header">
-          <div class="header-content">
-            <div class="torrent-cover">
-              <el-image
-                :src="torrentInfo.coverImage || '/default-cover.jpg'"
-                :alt="torrentInfo.title"
-                fit="cover"
-                class="cover-image"
-              >
-                <template #error>
-                  <div class="image-placeholder">
-                    <el-icon size="48"><Picture /></el-icon>
-                    <span>暂无封面</span>
-                  </div>
-                </template>
-              </el-image>
-            </div>
-            
-            <div class="torrent-info">
-              <div class="category-tag">
-                <el-tag :type="getCategoryType(torrentInfo.category?.slug)" size="large">
-                  {{ torrentInfo.category?.name || '未分类' }}
-                </el-tag>
-                <el-tag v-if="torrentInfo.subTitle" type="info" size="small">
-                  {{ torrentInfo.subTitle }}
-                </el-tag>
-              </div>
-              
-              <h1 class="torrent-title">{{ torrentInfo.title }}</h1>
-              
-              <div class="torrent-tags" v-if="torrentInfo.tag && torrentInfo.tag.length > 0">
-                <el-tag
-                  v-for="(tag, index) in parsedTags"
-                  :key="index"
-                  size="small"
-                  effect="plain"
-                >
-                  {{ tag }}
-                </el-tag>
-              </div>
-              
-              <div class="torrent-meta">
-                <div class="meta-item">
-                  <el-icon><User /></el-icon>
-                  <span>上传者：{{ torrentInfo.user?.username || '未知' }}</span>
-                </div>
-                <div class="meta-item">
-                  <el-icon><Clock /></el-icon>
-                  <span>上传时间：{{ formatDateTime(torrentInfo.createdAt) }}</span>
-                </div>
-                <div class="meta-item">
-                  <el-icon><Document /></el-icon>
-                  <span>文件大小：{{ formatFileSize(torrentInfo.size) }}</span>
-                </div>
-                <div class="meta-item">
-                  <el-icon><Files /></el-icon>
-                  <span>完成次数：{{ torrentInfo.finishes }} 次</span>
-                </div>
-                <div class="meta-item">
-                  <el-icon><Star /></el-icon>
-                  <span>推广策略：{{ torrentInfo.promotionPolicy?.displayName || '默认' }}</span>
-                </div>
-              </div>
-              
-              <div class="torrent-stats">
-                <div class="stat-item seeders">
-                  <span class="stat-number">{{ peerStats.seeders }}</span>
-                  <span class="stat-label">做种</span>
-                </div>
-                <div class="stat-item leechers">
-                  <span class="stat-number">{{ peerStats.leechers }}</span>
-                  <span class="stat-label">下载</span>
-                </div>
-                <div class="stat-item downloads">
-                  <span class="stat-number">{{ torrentInfo.finishes }}</span>
-                  <span class="stat-label">完成</span>
-                </div>
-              </div>
-              
-              <div class="action-buttons">
-                <el-button 
-                  type="primary" 
-                  size="large" 
-                  :icon="Download"
-                  @click="handleDownload"
-                  :loading="downloading"
-                >
-                  {{ downloading ? '准备中...' : '下载种子' }}
-                </el-button>
-                <el-button 
-                  type="success" 
-                  size="large" 
-                  :icon="Star"
-                  @click="handleFavorite"
-                >
-                  {{ isFavorited ? '已收藏' : '收藏' }}
-                </el-button>
-                <el-button 
-                  type="warning" 
-                  size="large" 
-                  :icon="Flag"
-                  @click="handleReport"
-                >
-                  举报
-                </el-button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- 详细信息选项卡 -->
-        <div class="detail-tabs">
-          <el-tabs v-model="activeTab" type="border-card">
-            <!-- 种子描述 -->
-            <el-tab-pane label="详细描述" name="description">
-              <div class="description-content">
-                <div v-if="torrentInfo.description" v-html="formatDescription(torrentInfo.description)"></div>
-                <div v-else class="no-description">暂无详细描述</div>
-              </div>
-            </el-tab-pane>
-            
-            <!-- 文件列表 -->
-            <el-tab-pane label="文件列表" name="files" lazy>
-              <div class="files-list">
-                <div v-if="torrentFiles.length > 0">
-                  <el-table :data="torrentFiles" stripe>
-                    <el-table-column label="文件名" prop="name" min-width="400">
-                      <template #default="{ row }">
-                        <div class="file-name">
-                          <el-icon v-if="row.type === 'folder'"><Folder /></el-icon>
-                          <el-icon v-else><Document /></el-icon>
-                          <span>{{ row.name }}</span>
-                        </div>
-                      </template>
-                    </el-table-column>
-                    <el-table-column label="大小" prop="size" width="120" align="right" />
-                    <el-table-column label="路径" prop="path" min-width="300" />
-                  </el-table>
-                </div>
-                <div v-else class="no-files">
-                  <el-empty description="文件列表加载中..." />
-                </div>
-              </div>
-            </el-tab-pane>
-            
-            <!-- 用户活动 -->
-            <el-tab-pane label="用户活动" name="activity">
-              <div class="activity-section">
-                <div class="activity-stats">
-                  <div class="stats-grid">
-                    <div class="stat-card">
-                      <h3>做种用户</h3>
-                      <p class="stat-number">{{ peerStats.seeders }}</p>
-                    </div>
-                    <div class="stat-card">
-                      <h3>下载用户</h3>
-                      <p class="stat-number">{{ peerStats.leechers }}</p>
-                    </div>
-                    <div class="stat-card">
-                      <h3>完成用户</h3>
-                      <p class="stat-number">{{ torrentInfo.finishes }}</p>
-                    </div>
-                  </div>
-                </div>
-                
-                <div class="user-lists">
-                  <el-tabs v-model="activityTab" type="card">
-                    <el-tab-pane label="做种用户" name="seeders">
-                      <el-table :data="seedersList" max-height="400">
-                        <el-table-column label="用户" prop="username" />
-                        <el-table-column label="上传量" prop="uploaded" />
-                        <el-table-column label="下载量" prop="downloaded" />
-                        <el-table-column label="分享率" prop="ratio" />
-                        <el-table-column label="做种时间" prop="seedTime" />
-                      </el-table>
-                    </el-tab-pane>
-                    
-                    <el-tab-pane label="下载用户" name="leechers">
-                      <el-table :data="leechersList" max-height="400">
-                        <el-table-column label="用户" prop="username" />
-                        <el-table-column label="进度" prop="progress">
-                          <template #default="{ row }">
-                            <el-progress :percentage="row.progress" :stroke-width="6" />
-                          </template>
-                        </el-table-column>
-                        <el-table-column label="下载速度" prop="downloadSpeed" />
-                        <el-table-column label="剩余时间" prop="eta" />
-                      </el-table>
-                    </el-tab-pane>
-                  </el-tabs>
-                </div>
-              </div>
-            </el-tab-pane>
-            
-            <!-- 评论区 -->
-            <el-tab-pane label="评论" name="comments">
-              <div class="comments-section">
-                <!-- 发表评论 -->
-                <div class="comment-form">
-                  <el-input
-                    v-model="newComment"
-                    type="textarea"
-                    :rows="4"
-                    placeholder="发表你的评论..."
-                    maxlength="500"
-                    show-word-limit
-                  />
-                  <div class="comment-actions">
-                    <el-button type="primary" @click="submitComment" :loading="submittingComment">
-                      发表评论
-                    </el-button>
-                  </div>
-                </div>
-                
-                <!-- 评论列表 -->
-                <div class="comments-list">
-                  <div
-                    v-for="comment in comments"
-                    :key="comment.id"
-                    class="comment-item"
-                  >
-                    <div class="comment-avatar">
-                      <el-avatar :size="40">{{ comment.username.charAt(0) }}</el-avatar>
-                    </div>
-                    <div class="comment-content">
-                      <div class="comment-header">
-                        <span class="comment-username">{{ comment.username }}</span>
-                        <span class="comment-time">{{ formatDateTime(comment.time) }}</span>
-                      </div>
-                      <div class="comment-text">{{ comment.content }}</div>
-                      <div class="comment-actions">
-                        <el-button type="text" size="small" @click="likeComment(comment.id)">
-                          <el-icon><Like /></el-icon>
-                          {{ comment.likes || 0 }}
-                        </el-button>
-                        <el-button type="text" size="small" @click="replyComment(comment.id)">
-                          回复
-                        </el-button>
-                      </div>
-                    </div>
-                  </div>
-                  
-                  <div v-if="comments.length === 0" class="no-comments">
-                    暂无评论，快来发表第一条评论吧！
-                  </div>
-                </div>
-              </div>
-            </el-tab-pane>
-          </el-tabs>
-        </div>
-      </div>
-
-      <!-- 错误状态 -->
-      <div v-else class="error-container">
-        <el-empty description="种子信息加载失败">
-          <el-button type="primary" @click="retry">重试</el-button>
-        </el-empty>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { ref, onMounted, computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import {
-  ArrowLeft,
-  Download,
-  Star,
-  Flag,
-  User,
-  Clock,
-  Document,
-  Files,
-  Picture,
-  Folder,
-  Like
-} from '@element-plus/icons-vue'
-import axios from 'axios'
-
-export default {
-  name: 'TorrentDetailView',
-  components: {
-    ArrowLeft,
-    Download,
-    Star,
-    Flag,
-    User,
-    Clock,
-    Document,
-    Files,
-    Picture,
-    Folder,
-    Like
-  },
-  setup() {
-    const route = useRoute()
-    const router = useRouter()
-    
-    const loading = ref(true)
-    const activeTab = ref('description')
-    const activityTab = ref('seeders')
-    const downloading = ref(false)
-    const isFavorited = ref(false)
-    const submittingComment = ref(false)
-    const newComment = ref('')
-    
-    const torrentInfo = ref(null)
-    const torrentFiles = ref([])
-    const peerStats = ref({
-      seeders: 0,
-      leechers: 0
-    })
-    
-    const seedersList = ref([])
-    const leechersList = ref([])
-    const comments = ref([])
-    
-    // 解析标签
-    const parsedTags = computed(() => {
-      if (!torrentInfo.value?.tag || !Array.isArray(torrentInfo.value.tag)) {
-        return []
-      }
-      
-      const tags = []
-      torrentInfo.value.tag.forEach(tagString => {
-        try {
-          const parsed = JSON.parse(tagString)
-          if (Array.isArray(parsed)) {
-            tags.push(...parsed)
-          } else {
-            tags.push(parsed)
-          }
-        } catch (e) {
-          tags.push(tagString)
-        }
-      })
-      return tags
-    })
-    
-    onMounted(() => {
-      const infoHash = route.params.infoHash
-      if (infoHash) {
-        fetchTorrentDetail(infoHash)
-      } else {
-        ElMessage.error('缺少种子标识符')
-        router.back()
-      }
-    })
-    
-    const fetchTorrentDetail = async (infoHash) => {
-      try {
-        loading.value = true
-        
-        // 获取种子详情
-        const response = await axios.get(`/api/torrent/view/${infoHash}`)
-        
-        if (response.data.code === 0) {
-          torrentInfo.value = response.data
-          
-          // 获取文件列表（如果有相关API）
-          await fetchTorrentFiles(infoHash)
-          
-          // 获取用户活动数据（如果有相关API）
-          await fetchPeerStats(infoHash)
-          
-          // 获取评论（如果有相关API）
-          await fetchComments(infoHash)
-        } else {
-          throw new Error(response.data.message || '获取种子详情失败')
-        }
-      } catch (error) {
-        console.error('获取种子详情失败:', error)
-        ElMessage.error(error.message || '获取种子详情失败')
-        torrentInfo.value = null
-      } finally {
-        loading.value = false
-      }
-    }
-    
-    const fetchTorrentFiles = async (infoHash) => {
-      try {
-        // 这里应该调用获取文件列表的API
-        // const response = await axios.get(`http://localhost:8081/api/torrent/${infoHash}/files`)
-        // torrentFiles.value = response.data
-        
-        // 临时模拟数据
-        torrentFiles.value = [
-          { 
-            name: 'example_file.iso', 
-            type: 'file', 
-            size: formatFileSize(torrentInfo.value?.size || 0), 
-            path: '/' 
-          }
-        ]
-      } catch (error) {
-        console.error('获取文件列表失败:', error)
-      }
-    }
-    
-    const fetchPeerStats = async (infoHash) => {
-      try {
-        // 这里应该调用获取用户活动数据的API
-        // const response = await axios.get(`http://localhost:8081/api/torrent/${infoHash}/peers`)
-        // peerStats.value = response.data
-        
-        // 临时模拟数据
-        peerStats.value = {
-          seeders: Math.floor(Math.random() * 50) + 10,
-          leechers: Math.floor(Math.random() * 30) + 5
-        }
-        
-        // 模拟用户列表
-        seedersList.value = [
-          { username: 'SeedMaster', uploaded: '2.5 TB', downloaded: '850 GB', ratio: '3.02', seedTime: '15天' }
-        ]
-        
-        leechersList.value = [
-          { username: 'NewUser123', progress: 65, downloadSpeed: '15.2 MB/s', eta: '2小时15分' }
-        ]
-      } catch (error) {
-        console.error('获取用户活动数据失败:', error)
-      }
-    }
-    
-    const fetchComments = async (infoHash) => {
-      try {
-        // 这里应该调用获取评论的API
-        // const response = await axios.get(`http://localhost:8081/api/torrent/${infoHash}/comments`)
-        // comments.value = response.data
-        
-        // 临时模拟数据
-        comments.value = []
-      } catch (error) {
-        console.error('获取评论失败:', error)
-      }
-    }
-    
-    const formatDateTime = (timestamp) => {
-      if (!timestamp) return '未知'
-      const date = new Date(timestamp)
-      return date.toLocaleString('zh-CN', {
-        year: 'numeric',
-        month: '2-digit',
-        day: '2-digit',
-        hour: '2-digit',
-        minute: '2-digit'
-      })
-    }
-    
-    const formatFileSize = (bytes) => {
-      if (!bytes || bytes === 0) return '0 B'
-      
-      const k = 1024
-      const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
-      const i = Math.floor(Math.log(bytes) / Math.log(k))
-      
-      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
-    }
-    
-    const formatDescription = (description) => {
-      if (!description) return ''
-      return description.replace(/\n/g, '<br>')
-    }
-    
-    const getCategoryType = (categorySlug) => {
-      const types = {
-        'os': 'primary',
-        'movie': 'primary',
-        'tv': 'info',
-        'music': 'success',
-        'software': 'warning',
-        'game': 'danger'
-      }
-      return types[categorySlug] || 'default'
-    }
-    
-    const handleDownload = async () => {
-      if (!torrentInfo.value?.infoHash) return
-      
-      downloading.value = true
-      try {
-        // 调用下载种子文件的API
-        const response = await axios.get(
-          `/api/torrent/download/${torrentInfo.value.infoHash}`,
-          { responseType: 'blob' }
-        )
-        
-        // 创建下载链接
-        const url = window.URL.createObjectURL(new Blob([response.data]))
-        const link = document.createElement('a')
-        link.href = url
-        link.download = `${torrentInfo.value.title}.torrent`
-        document.body.appendChild(link)
-        link.click()
-        document.body.removeChild(link)
-        window.URL.revokeObjectURL(url)
-        
-        ElMessage.success('种子文件下载完成')
-      } catch (error) {
-        console.error('下载失败:', error)
-        ElMessage.error('下载失败，请稍后重试')
-      } finally {
-        downloading.value = false
-      }
-    }
-    
-    const handleFavorite = () => {
-      isFavorited.value = !isFavorited.value
-      ElMessage.success(isFavorited.value ? '已添加到收藏' : '已取消收藏')
-    }
-    
-    const handleReport = async () => {
-      try {
-        await ElMessageBox.prompt('请说明举报原因', '举报内容', {
-          confirmButtonText: '提交举报',
-          cancelButtonText: '取消',
-          inputType: 'textarea',
-          inputPlaceholder: '请详细说明举报原因...'
-        })
-        
-        ElMessage.success('举报已提交，我们会尽快处理')
-      } catch {
-        // 用户取消
-      }
-    }
-    
-    const submitComment = async () => {
-      if (!newComment.value.trim()) {
-        ElMessage.warning('请输入评论内容')
-        return
-      }
-      
-      submittingComment.value = true
-      try {
-        // 这里应该调用提交评论的API
-        // await axios.post(`http://localhost:8081/api/torrent/${torrentInfo.value.infoHash}/comments`, {
-        //   content: newComment.value
-        // })
-        
-        // 模拟提交
-        await new Promise(resolve => setTimeout(resolve, 1000))
-        
-        const comment = {
-          id: Date.now(),
-          username: localStorage.getItem('username') || '用户',
-          content: newComment.value,
-          time: new Date().toISOString(),
-          likes: 0
-        }
-        
-        comments.value.unshift(comment)
-        newComment.value = ''
-        
-        ElMessage.success('评论发表成功')
-      } catch (error) {
-        console.error('发表评论失败:', error)
-        ElMessage.error('发表评论失败')
-      } finally {
-        submittingComment.value = false
-      }
-    }
-    
-    const likeComment = (commentId) => {
-      const comment = comments.value.find(c => c.id === commentId)
-      if (comment) {
-        comment.likes = (comment.likes || 0) + 1
-        ElMessage.success('点赞成功')
-      }
-    }
-    
-    const replyComment = (commentId) => {
-      ElMessage.info('回复功能开发中...')
-    }
-    
-    const retry = () => {
-      const infoHash = route.params.infoHash
-      if (infoHash) {
-        fetchTorrentDetail(infoHash)
-      }
-    }
-    
-    return {
-      loading,
-      activeTab,
-      activityTab,
-      downloading,
-      isFavorited,
-      submittingComment,
-      newComment,
-      torrentInfo,
-      torrentFiles,
-      peerStats,
-      parsedTags,
-      seedersList,
-      leechersList,
-      comments,
-      formatDateTime,
-      formatFileSize,
-      formatDescription,
-      getCategoryType,
-      handleDownload,
-      handleFavorite,
-      handleReport,
-      submitComment,
-      likeComment,
-      replyComment,
-      retry,
-      ArrowLeft,
-      Download,
-      Star,
-      Flag,
-      User,
-      Clock,
-      Document,
-      Files,
-      Picture,
-      Folder,
-      Like
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.torrent-detail-page {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 24px;
-  background: #f5f5f5;
-  min-height: 100vh;
-}
-
-.loading-container, .error-container {
-  background: #fff;
-  border-radius: 12px;
-  padding: 40px;
-  text-align: center;
-}
-
-.back-button {
-  margin-bottom: 16px;
-}
-
-.torrent-header {
-  background: #fff;
-  border-radius: 12px;
-  padding: 32px;
-  margin-bottom: 24px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-  
-  .header-content {
-    display: flex;
-    gap: 32px;
-    
-    .torrent-cover {
-      flex-shrink: 0;
-      
-      .cover-image {
-        width: 200px;
-        height: 280px;
-        border-radius: 8px;
-        object-fit: cover;
-      }
-      
-      .image-placeholder {
-        width: 200px;
-        height: 280px;
-        background: #f5f5f5;
-        border-radius: 8px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        color: #999;
-        
-        span {
-          margin-top: 8px;
-          font-size: 14px;
-        }
-      }
-    }
-    
-    .torrent-info {
-      flex: 1;
-      
-      .category-tag {
-        margin-bottom: 16px;
-        
-        .el-tag {
-          margin-right: 8px;
-        }
-      }
-      
-      .torrent-title {
-        font-size: 28px;
-        font-weight: 600;
-        color: #2c3e50;
-        margin: 0 0 16px 0;
-        line-height: 1.3;
-      }
-      
-      .torrent-tags {
-        margin-bottom: 20px;
-        
-        .el-tag {
-          margin: 0 8px 8px 0;
-        }
-      }
-      
-      .torrent-meta {
-        margin-bottom: 20px;
-        
-        .meta-item {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          margin-bottom: 8px;
-          color: #7f8c8d;
-          font-size: 14px;
-          
-          .el-icon {
-            color: #909399;
-          }
-        }
-      }
-      
-      .torrent-stats {
-        display: flex;
-        gap: 32px;
-        margin-bottom: 24px;
-        
-        .stat-item {
-          text-align: center;
-          
-          .stat-number {
-            display: block;
-            font-size: 24px;
-            font-weight: 600;
-            margin-bottom: 4px;
-            color: #2c3e50;
-          }
-          
-          .stat-label {
-            font-size: 14px;
-            color: #909399;
-          }
-          
-          &.seeders .stat-number { color: #67c23a; }
-          &.leechers .stat-number { color: #f56c6c; }
-          &.downloads .stat-number { color: #409eff; }
-        }
-      }
-      
-      .action-buttons {
-        display: flex;
-        gap: 12px;
-        flex-wrap: wrap;
-      }
-    }
-  }
-}
-
-.detail-tabs {
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-  
-  :deep(.el-tabs__content) {
-    padding: 24px;
-  }
-  
-  .description-content {
-    line-height: 1.6;
-    
-    :deep(h3) {
-      color: #2c3e50;
-      font-size: 18px;
-      font-weight: 600;
-      margin: 24px 0 12px 0;
-      
-      &:first-child {
-        margin-top: 0;
-      }
-    }
-    
-    :deep(p) {
-      margin-bottom: 12px;
-      color: #5a6c7d;
-    }
-    
-    :deep(ul) {
-      margin: 12px 0;
-      padding-left: 20px;
-      
-      li {
-        margin-bottom: 8px;
-        color: #5a6c7d;
-      }
-    }
-    
-    .no-description {
-      text-align: center;
-      color: #909399;
-      padding: 40px 0;
-    }
-  }
-  
-  .files-list {
-    .file-name {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      
-      .el-icon {
-        color: #909399;
-      }
-    }
-    
-    .no-files {
-      padding: 40px 0;
-    }
-  }
-  
-  .activity-section {
-    .activity-stats {
-      margin-bottom: 24px;
-      
-      .stats-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-        gap: 16px;
-        
-        .stat-card {
-          background: #f8f9fa;
-          padding: 20px;
-          border-radius: 8px;
-          text-align: center;
-          
-          h3 {
-            font-size: 14px;
-            color: #909399;
-            margin: 0 0 8px 0;
-          }
-          
-          .stat-number {
-            font-size: 24px;
-            font-weight: 600;
-            color: #2c3e50;
-          }
-        }
-      }
-    }
-  }
-  
-  .comments-section {
-    .comment-form {
-      margin-bottom: 32px;
-      
-      .comment-actions {
-        margin-top: 12px;
-        text-align: right;
-      }
-    }
-    
-    .comments-list {
-      .comment-item {
-        display: flex;
-        gap: 16px;
-        margin-bottom: 24px;
-        padding-bottom: 24px;
-        border-bottom: 1px solid #f0f0f0;
-        
-        &:last-child {
-          border-bottom: none;
-          margin-bottom: 0;
-          padding-bottom: 0;
-        }
-        
-        .comment-content {
-          flex: 1;
-          
-          .comment-header {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            margin-bottom: 8px;
-            
-            .comment-username {
-              font-weight: 600;
-              color: #2c3e50;
-            }
-            
-            .comment-time {
-              font-size: 12px;
-              color: #909399;
-            }
-          }
-          
-          .comment-text {
-            color: #5a6c7d;
-            line-height: 1.5;
-            margin-bottom: 12px;
-          }
-          
-          .comment-actions {
-            .el-button {
-              padding: 0;
-              margin-right: 16px;
-              
-              .el-icon {
-                margin-right: 4px;
-              }
-            }
-          }
-        }
-      }
-      
-      .no-comments {
-        text-align: center;
-        color: #909399;
-        padding: 40px 0;
-      }
-    }
-  }
-}
-
-// 响应式设计
-@media (max-width: 768px) {
-  .torrent-detail-page {
-    padding: 16px;
-  }
-  
-  .torrent-header .header-content {
-    flex-direction: column;
-    text-align: center;
-    
-    .torrent-cover {
-      align-self: center;
-    }
-    
-    .torrent-stats {
-      justify-content: center;
-    }
-    
-    .action-buttons {
-      justify-content: center;
-    }
-  }
-  
-  .activity-section .stats-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  .comment-item {
-    flex-direction: column;
-    gap: 12px;
-  }
-}
-</style>
+<template>
+  <div class="torrent-detail-page">
+    <div class="page-container">
+      <!-- 加载状态 -->
+      <div v-if="loading" class="loading-container">
+        <el-skeleton :rows="8" animated />
+      </div>
+
+      <!-- 详情内容 -->
+      <div v-else-if="torrentInfo">
+        <!-- 返回按钮 -->
+        <div class="back-button">
+          <el-button :icon="ArrowLeft" @click="$router.back()">
+            返回列表
+          </el-button>
+        </div>
+
+        <!-- 种子基本信息 -->
+        <div class="torrent-header">
+          <div class="header-content">
+            <div class="torrent-cover">
+              <el-image
+                :src="torrentInfo.coverImage || '/default-cover.jpg'"
+                :alt="torrentInfo.title"
+                fit="cover"
+                class="cover-image"
+              >
+                <template #error>
+                  <div class="image-placeholder">
+                    <el-icon size="48"><Picture /></el-icon>
+                    <span>暂无封面</span>
+                  </div>
+                </template>
+              </el-image>
+            </div>
+            
+            <div class="torrent-info">
+              <div class="category-tag">
+                <el-tag :type="getCategoryType(torrentInfo.category?.slug)" size="large">
+                  {{ torrentInfo.category?.name || '未分类' }}
+                </el-tag>
+                <el-tag v-if="torrentInfo.subTitle" type="info" size="small">
+                  {{ torrentInfo.subTitle }}
+                </el-tag>
+              </div>
+              
+              <h1 class="torrent-title">{{ torrentInfo.title }}</h1>
+              
+              <div class="torrent-tags" v-if="torrentInfo.tag && torrentInfo.tag.length > 0">
+                <el-tag
+                  v-for="(tag, index) in parsedTags"
+                  :key="index"
+                  size="small"
+                  effect="plain"
+                >
+                  {{ tag }}
+                </el-tag>
+              </div>
+              
+              <div class="torrent-meta">
+                <div class="meta-item">
+                  <el-icon><User /></el-icon>
+                  <span>上传者：{{ torrentInfo.user?.username || '匿名用户' }}</span>
+                </div>
+                <div class="meta-item">
+                  <el-icon><Clock /></el-icon>
+                  <span>上传时间：{{ formatDateTime(torrentInfo.createdAt) }}</span>
+                </div>
+                <div class="meta-item">
+                  <el-icon><Document /></el-icon>
+                  <span>文件大小：{{ formatFileSize(torrentInfo.size) }}</span>
+                </div>
+                <div class="meta-item">
+                  <el-icon><Files /></el-icon>
+                  <span>完成次数：{{ torrentInfo.finishes }} 次</span>
+                </div>
+                <div class="meta-item">
+                  <el-icon><Star /></el-icon>
+                  <span>推广策略：{{ torrentInfo.promotionPolicy?.displayName || '默认' }}</span>
+                </div>
+              </div>
+              
+              <div class="torrent-stats">
+                <div class="stat-item seeders">
+                  <span class="stat-number">{{ peerStats.seeders }}</span>
+                  <span class="stat-label">做种</span>
+                </div>
+                <div class="stat-item leechers">
+                  <span class="stat-number">{{ peerStats.leechers }}</span>
+                  <span class="stat-label">下载</span>
+                </div>
+                <div class="stat-item downloads">
+                  <span class="stat-number">{{ torrentInfo.finishes }}</span>
+                  <span class="stat-label">完成</span>
+                </div>
+              </div>
+              
+              <div class="action-buttons">
+                <el-button 
+                  type="primary" 
+                  size="large" 
+                  :icon="Download"
+                  @click="handleDownload"
+                  :loading="downloading"
+                >
+                  {{ downloading ? '准备中...' : '下载种子' }}
+                </el-button>
+                <el-button 
+                  type="success" 
+                  size="large" 
+                  :icon="Star"
+                  @click="handleFavorite"
+                >
+                  {{ isFavorited ? '已收藏' : '收藏' }}
+                </el-button>
+                <el-button 
+                  type="warning" 
+                  size="large" 
+                  :icon="Flag"
+                  @click="handleReport"
+                >
+                  举报
+                </el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 详细信息选项卡 -->
+        <div class="detail-tabs">
+          <el-tabs v-model="activeTab" type="border-card">
+            <!-- 种子描述 -->
+            <el-tab-pane label="详细描述" name="description">
+              <div class="description-content">
+                <div v-if="torrentInfo.description" v-html="formatDescription(torrentInfo.description)"></div>
+                <div v-else class="no-description">暂无详细描述</div>
+              </div>
+            </el-tab-pane>
+            
+            <!-- 文件列表 -->
+            <el-tab-pane label="文件列表" name="files" lazy>
+              <div class="files-list">
+                <div v-if="torrentFiles.length > 0">
+                  <el-table :data="torrentFiles" stripe>
+                    <el-table-column label="文件名" prop="name" min-width="400">
+                      <template #default="{ row }">
+                        <div class="file-name">
+                          <el-icon v-if="row.type === 'folder'"><Folder /></el-icon>
+                          <el-icon v-else><Document /></el-icon>
+                          <span>{{ row.name }}</span>
+                        </div>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="大小" prop="size" width="120" align="right" />
+                    <el-table-column label="路径" prop="path" min-width="300" />
+                  </el-table>
+                </div>
+                <div v-else class="no-files">
+                  <el-empty description="文件列表加载中..." />
+                </div>
+              </div>
+            </el-tab-pane>
+            
+            <!-- 用户活动 -->
+            <el-tab-pane label="用户活动" name="activity">
+              <div class="activity-section">
+                <div class="activity-stats">
+                  <div class="stats-grid">
+                    <div class="stat-card">
+                      <h3>做种用户</h3>
+                      <p class="stat-number">{{ peerStats.seeders }}</p>
+                    </div>
+                    <div class="stat-card">
+                      <h3>下载用户</h3>
+                      <p class="stat-number">{{ peerStats.leechers }}</p>
+                    </div>
+                    <div class="stat-card">
+                      <h3>完成用户</h3>
+                      <p class="stat-number">{{ torrentInfo.finishes }}</p>
+                    </div>
+                  </div>
+                </div>
+                
+                <div class="user-lists">
+                  <el-tabs v-model="activityTab" type="card">
+                    <el-tab-pane label="做种用户" name="seeders">
+                      <el-table :data="seedersList" max-height="400">
+                        <el-table-column label="用户" prop="username" />
+                        <el-table-column label="上传量" prop="uploaded" />
+                        <el-table-column label="下载量" prop="downloaded" />
+                        <el-table-column label="分享率" prop="ratio" />
+                        <el-table-column label="做种时间" prop="seedTime" />
+                      </el-table>
+                    </el-tab-pane>
+                    
+                    <el-tab-pane label="下载用户" name="leechers">
+                      <el-table :data="leechersList" max-height="400">
+                        <el-table-column label="用户" prop="username" />
+                        <el-table-column label="进度" prop="progress">
+                          <template #default="{ row }">
+                            <el-progress :percentage="row.progress" :stroke-width="6" />
+                          </template>
+                        </el-table-column>
+                        <el-table-column label="下载速度" prop="downloadSpeed" />
+                        <el-table-column label="剩余时间" prop="eta" />
+                      </el-table>
+                    </el-tab-pane>
+                  </el-tabs>
+                </div>
+              </div>
+            </el-tab-pane>
+            
+            <!-- 评论区 -->
+            <el-tab-pane label="评论" name="comments">
+              <div class="comments-section">
+                <!-- 发表评论 -->
+                <div class="comment-form">
+                  <el-input
+                    v-model="newComment"
+                    type="textarea"
+                    :rows="4"
+                    placeholder="发表你的评论..."
+                    maxlength="500"
+                    show-word-limit
+                  />
+                  <div class="comment-actions">
+                    <el-button type="primary" @click="submitComment" :loading="submittingComment">
+                      发表评论
+                    </el-button>
+                  </div>
+                </div>
+                
+                <!-- 评论列表 -->
+                <div class="comments-list">
+                  <div
+                    v-for="comment in comments"
+                    :key="comment.id"
+                    class="comment-item"
+                  >
+                    <div class="comment-avatar">
+                      <el-avatar :size="40">{{ comment.username.charAt(0) }}</el-avatar>
+                    </div>
+                    <div class="comment-content">
+                      <div class="comment-header">
+                        <span class="comment-username">{{ comment.username }}</span>
+                        <span class="comment-time">{{ formatDateTime(comment.time) }}</span>
+                      </div>
+                      <div class="comment-text">{{ comment.content }}</div>
+                      <div class="comment-actions">
+                        <el-button type="text" size="small" @click="likeComment(comment.id)">
+                          <el-icon><Like /></el-icon>
+                          {{ comment.likes || 0 }}
+                        </el-button>
+                        <el-button type="text" size="small" @click="replyComment(comment.id)">
+                          回复
+                        </el-button>
+                      </div>
+                    </div>
+                  </div>
+                  
+                  <div v-if="comments.length === 0" class="no-comments">
+                    暂无评论，快来发表第一条评论吧！
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+
+      <!-- 错误状态 -->
+      <div v-else class="error-container">
+        <el-empty description="种子信息加载失败">
+          <el-button type="primary" @click="retry">重试</el-button>
+        </el-empty>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import {
+  ArrowLeft,
+  Download,
+  Star,
+  Flag,
+  User,
+  Clock,
+  Document,
+  Files,
+  Picture,
+  Folder,
+  Like
+} from '@element-plus/icons-vue'
+import axios from 'axios'
+
+export default {
+  name: 'TorrentDetailView',
+  components: {
+    ArrowLeft,
+    Download,
+    Star,
+    Flag,
+    User,
+    Clock,
+    Document,
+    Files,
+    Picture,
+    Folder,
+    Like
+  },
+  setup() {
+    const route = useRoute()
+    const router = useRouter()
+    
+    const loading = ref(true)
+    const activeTab = ref('description')
+    const activityTab = ref('seeders')
+    const downloading = ref(false)
+    const isFavorited = ref(false)
+    const submittingComment = ref(false)
+    const newComment = ref('')
+    
+    const torrentInfo = ref(null)
+    const torrentFiles = ref([])
+    const peerStats = ref({
+      seeders: 0,
+      leechers: 0
+    })
+    
+    const seedersList = ref([])
+    const leechersList = ref([])
+    const comments = ref([])
+    
+    // 解析标签
+    const parsedTags = computed(() => {
+      if (!torrentInfo.value?.tag || !Array.isArray(torrentInfo.value.tag)) {
+        return []
+      }
+      
+      const tags = []
+      torrentInfo.value.tag.forEach(tagString => {
+        try {
+          const parsed = JSON.parse(tagString)
+          if (Array.isArray(parsed)) {
+            tags.push(...parsed)
+          } else {
+            tags.push(parsed)
+          }
+        } catch (e) {
+          tags.push(tagString)
+        }
+      })
+      return tags
+    })
+    
+    onMounted(() => {
+      const infoHash = route.params.infoHash
+      if (infoHash) {
+        fetchTorrentDetail(infoHash)
+      } else {
+        ElMessage.error('缺少种子标识符')
+        router.back()
+      }
+    })
+    
+    const fetchTorrentDetail = async (infoHash) => {
+      try {
+        loading.value = true
+        
+        // 获取种子详情
+        const response = await axios.get(`/api/torrent/view/${infoHash}`)
+        
+        if (response.data.code === 0) {
+          torrentInfo.value = response.data
+          
+          // 获取文件列表（如果有相关API）
+          await fetchTorrentFiles(infoHash)
+          
+          // 获取用户活动数据（如果有相关API）
+          await fetchPeerStats(infoHash)
+          
+          // 获取评论（如果有相关API）
+          await fetchComments(infoHash)
+        } else {
+          throw new Error(response.data.message || '获取种子详情失败')
+        }
+      } catch (error) {
+        console.error('获取种子详情失败:', error)
+        ElMessage.error(error.message || '获取种子详情失败')
+        torrentInfo.value = null
+      } finally {
+        loading.value = false
+      }
+    }
+    
+    const fetchTorrentFiles = async (infoHash) => {
+      try {
+        if (torrentInfo.value?.fileList) {
+          // 将文件列表转换为所需的格式
+          torrentFiles.value = Object.entries(torrentInfo.value.fileList).map(([path, size]) => ({
+            name: path.split('/').pop() || path, // 获取文件名
+            type: 'file',
+            size: formatFileSize(size),
+            path: path.split('/').slice(0, -1).join('/') || '/' // 获取文件路径
+          }))
+        } else {
+          // 如果是单文件种子，使用种子标题作为文件名
+          torrentFiles.value = [
+            {
+              name: torrentInfo.value?.title || 'unknown',
+              type: 'file',
+              size: formatFileSize(torrentInfo.value?.size || 0),
+              path: '/'
+            }
+          ]
+        }
+      } catch (error) {
+        console.error('获取文件列表失败:', error)
+      }
+    }
+    
+    const fetchPeerStats = async (infoHash) => {
+      try {
+        // 这里应该调用获取用户活动数据的API
+        // const response = await axios.get(`http://localhost:8081/api/torrent/${infoHash}/peers`)
+        // peerStats.value = response.data
+        
+        // 临时模拟数据
+        peerStats.value = {
+          seeders: Math.floor(Math.random() * 50) + 10,
+          leechers: Math.floor(Math.random() * 30) + 5
+        }
+        
+        // 模拟用户列表
+        seedersList.value = [
+          { username: 'SeedMaster', uploaded: '2.5 TB', downloaded: '850 GB', ratio: '3.02', seedTime: '15天' }
+        ]
+        
+        leechersList.value = [
+          { username: 'NewUser123', progress: 65, downloadSpeed: '15.2 MB/s', eta: '2小时15分' }
+        ]
+      } catch (error) {
+        console.error('获取用户活动数据失败:', error)
+      }
+    }
+    
+    const fetchComments = async (infoHash) => {
+      try {
+        // 这里应该调用获取评论的API
+        // const response = await axios.get(`http://localhost:8081/api/torrent/${infoHash}/comments`)
+        // comments.value = response.data
+        
+        // 临时模拟数据
+        comments.value = []
+      } catch (error) {
+        console.error('获取评论失败:', error)
+      }
+    }
+    
+    const formatDateTime = (timestamp) => {
+      if (!timestamp) return '未知'
+      const date = new Date(timestamp)
+      return date.toLocaleString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit'
+      })
+    }
+    
+    const formatFileSize = (bytes) => {
+      if (!bytes || bytes === 0) return '0 B'
+      
+      const k = 1024
+      const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
+      const i = Math.floor(Math.log(bytes) / Math.log(k))
+      
+      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+    }
+    
+    const formatDescription = (description) => {
+      if (!description) return ''
+      return description.replace(/\n/g, '<br>')
+    }
+    
+    const getCategoryType = (categorySlug) => {
+      const types = {
+        'os': 'primary',
+        'movie': 'primary',
+        'tv': 'info',
+        'music': 'success',
+        'software': 'warning',
+        'game': 'danger'
+      }
+      return types[categorySlug] || 'default'
+    }
+    
+    const handleDownload = async () => {
+      if (!torrentInfo.value?.infoHash) return
+      
+      downloading.value = true
+      try {
+        // 调用下载种子文件的API
+        const response = await axios.get(
+          `/api/torrent/download/${torrentInfo.value.infoHash}`,
+          { 
+            responseType: 'blob',
+            // 如果需要传递passkey，可以在这里添加params
+            params: {
+              // passkey: userStore.passkey // 如果你有用户store存储passkey
+            }
+          }
+        )
+        
+        // 从响应头中获取文件名，如果没有则使用默认格式
+        let fileName = response.headers?.['content-disposition']?.split('filename=')[1]
+        if (!fileName) {
+          // 使用默认的文件名格式
+          fileName = `${torrentInfo.value.title}.torrent`
+        } else {
+          // 解码文件名
+          fileName = decodeURIComponent(fileName)
+        }
+        
+        // 创建下载链接
+        const url = window.URL.createObjectURL(new Blob([response.data], { type: 'application/x-bittorrent' }))
+        const link = document.createElement('a')
+        link.href = url
+        link.download = fileName
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+        window.URL.revokeObjectURL(url)
+        
+        ElMessage.success('种子文件下载完成')
+      } catch (error) {
+        console.error('下载失败:', error)
+        ElMessage.error(error.response?.data?.message || '下载失败，请稍后重试')
+      } finally {
+        downloading.value = false
+      }
+    }
+    
+    const handleFavorite = () => {
+      isFavorited.value = !isFavorited.value
+      ElMessage.success(isFavorited.value ? '已添加到收藏' : '已取消收藏')
+    }
+    
+    const handleReport = async () => {
+      try {
+        await ElMessageBox.prompt('请说明举报原因', '举报内容', {
+          confirmButtonText: '提交举报',
+          cancelButtonText: '取消',
+          inputType: 'textarea',
+          inputPlaceholder: '请详细说明举报原因...'
+        })
+        
+        ElMessage.success('举报已提交，我们会尽快处理')
+      } catch {
+        // 用户取消
+      }
+    }
+    
+    const submitComment = async () => {
+      if (!newComment.value.trim()) {
+        ElMessage.warning('请输入评论内容')
+        return
+      }
+      
+      submittingComment.value = true
+      try {
+        // 这里应该调用提交评论的API
+        // await axios.post(`http://localhost:8081/api/torrent/${torrentInfo.value.infoHash}/comments`, {
+        //   content: newComment.value
+        // })
+        
+        // 模拟提交
+        await new Promise(resolve => setTimeout(resolve, 1000))
+        
+        const comment = {
+          id: Date.now(),
+          username: localStorage.getItem('username') || '用户',
+          content: newComment.value,
+          time: new Date().toISOString(),
+          likes: 0
+        }
+        
+        comments.value.unshift(comment)
+        newComment.value = ''
+        
+        ElMessage.success('评论发表成功')
+      } catch (error) {
+        console.error('发表评论失败:', error)
+        ElMessage.error('发表评论失败')
+      } finally {
+        submittingComment.value = false
+      }
+    }
+    
+    const likeComment = (commentId) => {
+      const comment = comments.value.find(c => c.id === commentId)
+      if (comment) {
+        comment.likes = (comment.likes || 0) + 1
+        ElMessage.success('点赞成功')
+      }
+    }
+    
+    const replyComment = (commentId) => {
+      ElMessage.info('回复功能开发中...')
+    }
+    
+    const retry = () => {
+      const infoHash = route.params.infoHash
+      if (infoHash) {
+        fetchTorrentDetail(infoHash)
+      }
+    }
+    
+    return {
+      loading,
+      activeTab,
+      activityTab,
+      downloading,
+      isFavorited,
+      submittingComment,
+      newComment,
+      torrentInfo,
+      torrentFiles,
+      peerStats,
+      parsedTags,
+      seedersList,
+      leechersList,
+      comments,
+      formatDateTime,
+      formatFileSize,
+      formatDescription,
+      getCategoryType,
+      handleDownload,
+      handleFavorite,
+      handleReport,
+      submitComment,
+      likeComment,
+      replyComment,
+      retry,
+      ArrowLeft,
+      Download,
+      Star,
+      Flag,
+      User,
+      Clock,
+      Document,
+      Files,
+      Picture,
+      Folder,
+      Like
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.torrent-detail-page {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+  background: #f5f5f5;
+  min-height: 100vh;
+}
+
+.loading-container, .error-container {
+  background: #fff;
+  border-radius: 12px;
+  padding: 40px;
+  text-align: center;
+}
+
+.back-button {
+  margin-bottom: 16px;
+}
+
+.torrent-header {
+  background: #fff;
+  border-radius: 12px;
+  padding: 32px;
+  margin-bottom: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  
+  .header-content {
+    display: flex;
+    gap: 32px;
+    
+    .torrent-cover {
+      flex-shrink: 0;
+      
+      .cover-image {
+        width: 200px;
+        height: 280px;
+        border-radius: 8px;
+        object-fit: cover;
+      }
+      
+      .image-placeholder {
+        width: 200px;
+        height: 280px;
+        background: #f5f5f5;
+        border-radius: 8px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        color: #999;
+        
+        span {
+          margin-top: 8px;
+          font-size: 14px;
+        }
+      }
+    }
+    
+    .torrent-info {
+      flex: 1;
+      
+      .category-tag {
+        margin-bottom: 16px;
+        
+        .el-tag {
+          margin-right: 8px;
+        }
+      }
+      
+      .torrent-title {
+        font-size: 28px;
+        font-weight: 600;
+        color: #2c3e50;
+        margin: 0 0 16px 0;
+        line-height: 1.3;
+      }
+      
+      .torrent-tags {
+        margin-bottom: 20px;
+        
+        .el-tag {
+          margin: 0 8px 8px 0;
+        }
+      }
+      
+      .torrent-meta {
+        margin-bottom: 20px;
+        
+        .meta-item {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          margin-bottom: 8px;
+          color: #7f8c8d;
+          font-size: 14px;
+          
+          .el-icon {
+            color: #909399;
+          }
+        }
+      }
+      
+      .torrent-stats {
+        display: flex;
+        gap: 32px;
+        margin-bottom: 24px;
+        
+        .stat-item {
+          text-align: center;
+          
+          .stat-number {
+            display: block;
+            font-size: 24px;
+            font-weight: 600;
+            margin-bottom: 4px;
+            color: #2c3e50;
+          }
+          
+          .stat-label {
+            font-size: 14px;
+            color: #909399;
+          }
+          
+          &.seeders .stat-number { color: #67c23a; }
+          &.leechers .stat-number { color: #f56c6c; }
+          &.downloads .stat-number { color: #409eff; }
+        }
+      }
+      
+      .action-buttons {
+        display: flex;
+        gap: 12px;
+        flex-wrap: wrap;
+      }
+    }
+  }
+}
+
+.detail-tabs {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  
+  :deep(.el-tabs__content) {
+    padding: 24px;
+  }
+  
+  .description-content {
+    line-height: 1.6;
+    
+    :deep(h3) {
+      color: #2c3e50;
+      font-size: 18px;
+      font-weight: 600;
+      margin: 24px 0 12px 0;
+      
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+    
+    :deep(p) {
+      margin-bottom: 12px;
+      color: #5a6c7d;
+    }
+    
+    :deep(ul) {
+      margin: 12px 0;
+      padding-left: 20px;
+      
+      li {
+        margin-bottom: 8px;
+        color: #5a6c7d;
+      }
+    }
+    
+    .no-description {
+      text-align: center;
+      color: #909399;
+      padding: 40px 0;
+    }
+  }
+  
+  .files-list {
+    .file-name {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      
+      .el-icon {
+        color: #909399;
+      }
+    }
+    
+    .no-files {
+      padding: 40px 0;
+    }
+  }
+  
+  .activity-section {
+    .activity-stats {
+      margin-bottom: 24px;
+      
+      .stats-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+        gap: 16px;
+        
+        .stat-card {
+          background: #f8f9fa;
+          padding: 20px;
+          border-radius: 8px;
+          text-align: center;
+          
+          h3 {
+            font-size: 14px;
+            color: #909399;
+            margin: 0 0 8px 0;
+          }
+          
+          .stat-number {
+            font-size: 24px;
+            font-weight: 600;
+            color: #2c3e50;
+          }
+        }
+      }
+    }
+  }
+  
+  .comments-section {
+    .comment-form {
+      margin-bottom: 32px;
+      
+      .comment-actions {
+        margin-top: 12px;
+        text-align: right;
+      }
+    }
+    
+    .comments-list {
+      .comment-item {
+        display: flex;
+        gap: 16px;
+        margin-bottom: 24px;
+        padding-bottom: 24px;
+        border-bottom: 1px solid #f0f0f0;
+        
+        &:last-child {
+          border-bottom: none;
+          margin-bottom: 0;
+          padding-bottom: 0;
+        }
+        
+        .comment-content {
+          flex: 1;
+          
+          .comment-header {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 8px;
+            
+            .comment-username {
+              font-weight: 600;
+              color: #2c3e50;
+            }
+            
+            .comment-time {
+              font-size: 12px;
+              color: #909399;
+            }
+          }
+          
+          .comment-text {
+            color: #5a6c7d;
+            line-height: 1.5;
+            margin-bottom: 12px;
+          }
+          
+          .comment-actions {
+            .el-button {
+              padding: 0;
+              margin-right: 16px;
+              
+              .el-icon {
+                margin-right: 4px;
+              }
+            }
+          }
+        }
+      }
+      
+      .no-comments {
+        text-align: center;
+        color: #909399;
+        padding: 40px 0;
+      }
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .torrent-detail-page {
+    padding: 16px;
+  }
+  
+  .torrent-header .header-content {
+    flex-direction: column;
+    text-align: center;
+    
+    .torrent-cover {
+      align-self: center;
+    }
+    
+    .torrent-stats {
+      justify-content: center;
+    }
+    
+    .action-buttons {
+      justify-content: center;
+    }
+  }
+  
+  .activity-section .stats-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .comment-item {
+    flex-direction: column;
+    gap: 12px;
+  }
+}
+</style>