src/views/forum/ForumView.vue

<template>
  <div class="forum-page">
    <div class="page-container">
      <!-- 论坛头部 -->
      <div class="forum-header">
        <div class="header-content">
          <h1>社区论坛</h1>
          <p class="header-description">与其他用户交流讨论，分享经验心得</p>
          <div class="header-actions">
            <el-button type="primary" :icon="Edit" @click="showNewTopicDialog = true">
              发布新帖
            </el-button>
          </div>
        </div>
      </div>

      <!-- 论坛统计 -->
      <div class="forum-stats">
        <div class="stats-grid">
          <div class="stat-item">
            <el-icon size="32" color="#409eff"><ChatDotRound /></el-icon>
            <div class="stat-info">
              <h3>{{ forumStats.totalTopics }}</h3>
              <p>主题总数</p>
            </div>
          </div>
          <div class="stat-item">
            <el-icon size="32" color="#67c23a"><Comment /></el-icon>
            <div class="stat-info">
              <h3>{{ forumStats.totalReplies }}</h3>
              <p>回复总数</p>
            </div>
          </div>
          <div class="stat-item">
            <el-icon size="32" color="#e6a23c"><User /></el-icon>
            <div class="stat-info">
              <h3>{{ forumStats.activeUsers }}</h3>
              <p>活跃用户</p>
            </div>
          </div>
          <div class="stat-item">
            <el-icon size="32" color="#f56c6c"><View /></el-icon>
            <div class="stat-info">
              <h3>{{ forumStats.todayPosts }}</h3>
              <p>今日发帖</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 版块列表 -->
      <div class="forum-sections">
        <h2 class="section-title">论坛版块</h2>
        <div class="sections-list">
          <div
            v-for="section in forumSections"
            :key="section.id"
            class="section-card"
            @click="navigateToSection(section.id)"
          >
            <div class="section-icon">
              <el-icon size="48" :color="section.color">
                <component :is="section.icon" />
              </el-icon>
            </div>
            <div class="section-info">
              <h3 class="section-name">{{ section.name }}</h3>
              <p class="section-description">{{ section.description }}</p>
              <div class="section-stats">
                <span class="stat">{{ section.topics }} 主题</span>
                <span class="stat">{{ section.replies }} 回复</span>
              </div>
            </div>
            <div class="section-latest">
              <div v-if="section.latestTopic" class="latest-topic">
                <p class="topic-title">{{ section.latestTopic.title }}</p>
                <div class="topic-meta">
                  <span class="author">{{ section.latestTopic.author }}</span>
                  <span class="time">{{ formatTime(section.latestTopic.time) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 热门主题 -->
      <div class="hot-topics">
        <div class="section-header">
          <h2 class="section-title">热门主题</h2>
          <el-button type="primary" text @click="$router.push('/forum/topics')">
            查看全部 <el-icon><ArrowRight /></el-icon>
          </el-button>
        </div>
        <div class="topics-list">
          <div
            v-for="topic in hotTopics"
            :key="topic.id"
            class="topic-item"
            @click="navigateToTopic(topic.id)"
          >
            <div class="topic-content">
              <div class="topic-header">
                <h4 class="topic-title">{{ topic.title }}</h4>
                <div class="topic-tags">
                  <el-tag
                    v-for="tag in topic.tags"
                    :key="tag"
                    size="small"
                    type="info"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
              </div>
              <div class="topic-meta">
                <div class="author-info">
                  <el-avatar :size="24">{{ topic.author.charAt(0) }}</el-avatar>
                  <span class="author-name">{{ topic.author }}</span>
                </div>
                <div class="topic-stats">
                  <span class="stat-item">
                    <el-icon><View /></el-icon>
                    {{ topic.views }}
                  </span>
                  <span class="stat-item">
                    <el-icon><Comment /></el-icon>
                    {{ topic.replies }}
                  </span>
                  <span class="time">{{ formatTime(topic.lastReply) }}</span>
                </div>
              </div>
            </div>
            <div class="topic-status">
              <el-tag v-if="topic.pinned" type="warning" size="small">置顶</el-tag>
              <el-tag v-if="topic.hot" type="danger" size="small">热门</el-tag>
            </div>
          </div>
        </div>
      </div>

      <!-- 最新回复 -->
      <div class="recent-replies">
        <h2 class="section-title">最新回复</h2>
        <div class="replies-list">
          <div
            v-for="reply in recentReplies"
            :key="reply.id"
            class="reply-item"
            @click="navigateToTopic(reply.topicId)"
          >
            <div class="reply-avatar">
              <el-avatar :size="40">{{ reply.author.charAt(0) }}</el-avatar>
            </div>
            <div class="reply-content">
              <div class="reply-header">
                <span class="reply-author">{{ reply.author }}</span>
                <span class="reply-action">回复了主题</span>
                <span class="topic-title">{{ reply.topicTitle }}</span>
              </div>
              <div class="reply-text">{{ reply.content }}</div>
              <div class="reply-time">{{ formatTime(reply.time) }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 发布新帖对话框 -->
    <el-dialog
      v-model="showNewTopicDialog"
      title="发布新主题"
      width="600px"
      :before-close="handleCloseDialog"
    >
      <el-form
        ref="topicFormRef"
        :model="newTopic"
        :rules="topicRules"
        label-width="80px"
      >
        <el-form-item label="版块" prop="sectionId">
          <el-select v-model="newTopic.sectionId" placeholder="选择版块">
            <el-option
              v-for="section in forumSections"
              :key="section.id"
              :label="section.name"
              :value="section.id"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="标题" prop="title">
          <el-input
            v-model="newTopic.title"
            placeholder="请输入主题标题"
            maxlength="100"
            show-word-limit
          />
        </el-form-item>
        
        <el-form-item label="标签">
          <div class="tags-input">
            <el-tag
              v-for="tag in newTopic.tags"
              :key="tag"
              closable
              @close="removeTopicTag(tag)"
            >
              {{ tag }}
            </el-tag>
            <el-input
              v-if="tagInputVisible"
              ref="tagInputRef"
              v-model="tagInputValue"
              size="small"
              @keyup.enter="addTopicTag"
              @blur="addTopicTag"
              style="width: 100px;"
            />
            <el-button
              v-else
              size="small"
              @click="showTagInput"
            >
              + 添加标签
            </el-button>
          </div>
        </el-form-item>
        
        <el-form-item label="内容" prop="content">
          <el-input
            v-model="newTopic.content"
            type="textarea"
            :rows="8"
            placeholder="请输入主题内容..."
            maxlength="5000"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="handleCloseDialog">取消</el-button>
        <el-button type="primary" @click="submitNewTopic" :loading="submitting">
          发布主题
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Edit,
  ChatDotRound,
  Comment,
  User,
  View,
  ArrowRight,
  Film,
  Headphones,
  Monitor,
  GamePad,
  ChatLineRound,
  QuestionFilled,
  Bell
} from '@element-plus/icons-vue'

export default {
  name: 'ForumView',
  setup() {
    const router = useRouter()
    const topicFormRef = ref(null)
    const tagInputRef = ref(null)
    
    const showNewTopicDialog = ref(false)
    const submitting = ref(false)
    const tagInputVisible = ref(false)
    const tagInputValue = ref('')
    
    const forumStats = reactive({
      totalTopics: '15,268',
      totalReplies: '89,456',
      activeUsers: '2,341',
      todayPosts: '156'
    })
    
    const newTopic = reactive({
      sectionId: '',
      title: '',
      content: '',
      tags: []
    })
    
    const topicRules = {
      sectionId: [
        { required: true, message: '请选择版块', trigger: 'change' }
      ],
      title: [
        { required: true, message: '请输入标题', trigger: 'blur' },
        { min: 5, max: 100, message: '标题长度在 5 到 100 个字符', trigger: 'blur' }
      ],
      content: [
        { required: true, message: '请输入内容', trigger: 'blur' },
        { min: 10, max: 5000, message: '内容长度在 10 到 5000 个字符', trigger: 'blur' }
      ]
    }
    
    const forumSections = ref([
      {
        id: 1,
        name: '电影讨论',
        description: '分享和讨论电影资源，交流观影心得',
        icon: 'Film',
        color: '#409eff',
        topics: 3256,
        replies: 18934,
        latestTopic: {
          title: '2024年最佳科幻电影推荐',
          author: 'MovieFan',
          time: '2025-06-03T14:30:00'
        }
      },
      {
        id: 2,
        name: '音乐分享',
        description: '音乐资源分享，音乐制作技术交流',
        icon: 'Headphones',
        color: '#67c23a',
        topics: 1892,
        replies: 9567,
        latestTopic: {
          title: '无损音乐格式对比分析',
          author: 'AudioExpert',
          time: '2025-06-03T13:45:00'
        }
      },
      {
        id: 3,
        name: '软件技术',
        description: '软件资源分享，技术问题讨论',
        icon: 'Monitor',
        color: '#e6a23c',
        topics: 2134,
        replies: 12456,
        latestTopic: {
          title: 'Adobe 2025 新功能体验分享',
          author: 'TechGuru',
          time: '2025-06-03T12:20:00'
        }
      },
      {
        id: 4,
        name: '游戏天地',
        description: '游戏资源分享，游戏攻略讨论',
        icon: 'GamePad',
        color: '#f56c6c',
        topics: 1567,
        replies: 8234,
        latestTopic: {
          title: '年度游戏大作盘点',
          author: 'GameMaster',
          time: '2025-06-03T11:50:00'
        }
      },
      {
        id: 5,
        name: '站务公告',
        description: '网站公告，规则说明，意见建议',
        icon: 'Bell',
        color: '#909399',
        topics: 234,
        replies: 1567,
        latestTopic: {
          title: '网站维护通知',
          author: 'Admin',
          time: '2025-06-03T10:00:00'
        }
      },
      {
        id: 6,
        name: '新手求助',
        description: '新手问题解答，使用教程分享',
        icon: 'QuestionFilled',
        color: '#606266',
        topics: 456,
        replies: 2890,
        latestTopic: {
          title: '新手如何提高分享率？',
          author: 'Newbie123',
          time: '2025-06-03T09:30:00'
        }
      }
    ])
    
    const hotTopics = ref([
      {
        id: 1,
        title: '2024年度最佳PT站点推荐与对比分析',
        author: 'PTExpert',
        views: 2856,
        replies: 147,
        lastReply: '2025-06-03T14:25:00',
        tags: ['PT站点', '推荐', '对比'],
        pinned: true,
        hot: true
      },
      {
        id: 2,
        title: '如何安全高效地使用BT下载工具',
        author: 'SafeDownloader',
        views: 1932,
        replies: 89,
        lastReply: '2025-06-03T13:50:00',
        tags: ['BT工具', '安全', '教程'],
        hot: true
      },
      {
        id: 3,
        title: '分享率提升技巧与经验总结',
        author: 'SeedMaster',
        views: 1654,
        replies: 76,
        lastReply: '2025-06-03T12:40:00',
        tags: ['分享率', '技巧', '经验']
      }
    ])
    
    const recentReplies = ref([
      {
        id: 1,
        author: 'MovieLover88',
        topicId: 1,
        topicTitle: '阿凡达2观影感受分享',
        content: '画面效果确实震撼，特别是水下的场景...',
        time: '2025-06-03T14:45:00'
      },
      {
        id: 2,
        author: 'TechEnthusiast',
        topicId: 2,
        topicTitle: '最新版Photoshop使用技巧',
        content: '新的AI功能确实很强大，大大提高了工作效率...',
        time: '2025-06-03T14:30:00'
      },
      {
        id: 3,
        author: 'GameFan2024',
        topicId: 3,
        topicTitle: '赛博朋克2077最新更新体验',
        content: '修复了很多bug，现在游戏体验好多了...',
        time: '2025-06-03T14:15:00'
      }
    ])
    
    onMounted(() => {
      // 初始化论坛数据
    })
    
    const formatTime = (timeString) => {
      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)
      return `${days}天前`
    }
    
    const navigateToSection = (sectionId) => {
      router.push(`/forum/section/${sectionId}`)
    }
    
    const navigateToTopic = (topicId) => {
      router.push(`/forum/topic/${topicId}`)
    }
    
    const showTagInput = () => {
      tagInputVisible.value = true
      nextTick(() => {
        tagInputRef.value?.focus()
      })
    }
    
    const addTopicTag = () => {
      const tag = tagInputValue.value.trim()
      if (tag && !newTopic.tags.includes(tag)) {
        newTopic.tags.push(tag)
      }
      tagInputVisible.value = false
      tagInputValue.value = ''
    }
    
    const removeTopicTag = (tag) => {
      const index = newTopic.tags.indexOf(tag)
      if (index > -1) {
        newTopic.tags.splice(index, 1)
      }
    }
    
    const handleCloseDialog = () => {
      if (newTopic.title || newTopic.content) {
        ElMessageBox.confirm(
          '确定要关闭吗？未保存的内容将会丢失。',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          resetForm()
          showNewTopicDialog.value = false
        }).catch(() => {
          // 用户取消
        })
      } else {
        resetForm()
        showNewTopicDialog.value = false
      }
    }
    
    const submitNewTopic = async () => {
      try {
        await topicFormRef.value?.validate()
        
        submitting.value = true
        
        // 模拟提交过程
        await new Promise(resolve => setTimeout(resolve, 1500))
        
        ElMessage.success('主题发布成功！')
        resetForm()
        showNewTopicDialog.value = false
        
        // 跳转到新创建的主题页面
        router.push('/forum/topic/new')
        
      } catch (error) {
        console.error('表单验证失败:', error)
      } finally {
        submitting.value = false
      }
    }
    
    const resetForm = () => {
      topicFormRef.value?.resetFields()
      newTopic.sectionId = ''
      newTopic.title = ''
      newTopic.content = ''
      newTopic.tags = []
    }
    
    return {
      showNewTopicDialog,
      submitting,
      tagInputVisible,
      tagInputValue,
      topicFormRef,
      tagInputRef,
      forumStats,
      forumSections,
      hotTopics,
      recentReplies,
      newTopic,
      topicRules,
      formatTime,
      navigateToSection,
      navigateToTopic,
      showTagInput,
      addTopicTag,
      removeTopicTag,
      handleCloseDialog,
      submitNewTopic,
      Edit,
      ChatDotRound,
      Comment,
      User,
      View,
      ArrowRight,
      Film,
      Headphones,
      Monitor,
      GamePad,
      Bell,
      QuestionFilled
    }
  }
}
</script>

<style lang="scss" scoped>
.forum-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  background: #f5f5f5;
  min-height: 100vh;
}

.forum-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 48px 32px;
  margin-bottom: 24px;
  color: white;
  text-align: center;
  
  h1 {
    font-size: 36px;
    font-weight: 600;
    margin: 0 0 12px 0;
  }
  
  .header-description {
    font-size: 18px;
    margin: 0 0 24px 0;
    opacity: 0.9;
  }
}

.forum-stats {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    
    .stat-item {
      display: flex;
      align-items: center;
      gap: 16px;
      
      .stat-info {
        h3 {
          font-size: 24px;
          font-weight: 600;
          color: #2c3e50;
          margin: 0 0 4px 0;
        }
        
        p {
          font-size: 14px;
          color: #7f8c8d;
          margin: 0;
        }
      }
    }
  }
}

.forum-sections {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  
  .section-title {
    font-size: 20px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 20px 0;
  }
  
  .sections-list {
    .section-card {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 20px;
      border: 1px solid #f0f0f0;
      border-radius: 8px;
      margin-bottom: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        background: #f8f9fa;
        border-color: #409eff;
        transform: translateX(4px);
      }
      
      .section-info {
        flex: 1;
        
        .section-name {
          font-size: 18px;
          font-weight: 600;
          color: #2c3e50;
          margin: 0 0 8px 0;
        }
        
        .section-description {
          font-size: 14px;
          color: #7f8c8d;
          margin: 0 0 12px 0;
        }
        
        .section-stats {
          display: flex;
          gap: 16px;
          
          .stat {
            font-size: 12px;
            color: #909399;
          }
        }
      }
      
      .section-latest {
        width: 200px;
        
        .latest-topic {
          .topic-title {
            font-size: 14px;
            color: #2c3e50;
            margin: 0 0 8px 0;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          
          .topic-meta {
            font-size: 12px;
            color: #909399;
            
            .author {
              margin-right: 8px;
            }
          }
        }
      }
    }
  }
}

.hot-topics {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .section-title {
      font-size: 20px;
      font-weight: 600;
      color: #2c3e50;
      margin: 0;
    }
  }
  
  .topics-list {
    .topic-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      border: 1px solid #f0f0f0;
      border-radius: 8px;
      margin-bottom: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        background: #f8f9fa;
        border-color: #409eff;
      }
      
      .topic-content {
        flex: 1;
        
        .topic-header {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 8px;
          
          .topic-title {
            font-size: 16px;
            font-weight: 500;
            color: #2c3e50;
            margin: 0;
          }
          
          .topic-tags {
            .el-tag {
              margin-right: 4px;
            }
          }
        }
        
        .topic-meta {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .author-info {
            display: flex;
            align-items: center;
            gap: 8px;
            
            .author-name {
              font-size: 14px;
              color: #7f8c8d;
            }
          }
          
          .topic-stats {
            display: flex;
            align-items: center;
            gap: 16px;
            font-size: 12px;
            color: #909399;
            
            .stat-item {
              display: flex;
              align-items: center;
              gap: 4px;
            }
          }
        }
      }
      
      .topic-status {
        .el-tag {
          margin-left: 8px;
        }
      }
    }
  }
}

.recent-replies {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  
  .section-title {
    font-size: 20px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 20px 0;
  }
  
  .replies-list {
    .reply-item {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 16px;
      border: 1px solid #f0f0f0;
      border-radius: 8px;
      margin-bottom: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        background: #f8f9fa;
        border-color: #409eff;
      }
      
      .reply-content {
        flex: 1;
        
        .reply-header {
          font-size: 14px;
          margin-bottom: 8px;
          
          .reply-author {
            font-weight: 600;
            color: #2c3e50;
          }
          
          .reply-action {
            color: #7f8c8d;
            margin: 0 4px;
          }
          
          .topic-title {
            color: #409eff;
            font-weight: 500;
          }
        }
        
        .reply-text {
          font-size: 14px;
          color: #5a6c7d;
          margin-bottom: 8px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        
        .reply-time {
          font-size: 12px;
          color: #909399;
        }
      }
    }
  }
}
</style>

.tags-input {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  
  .el-tag {
    margin: 0;
  }
}

@media (max-width: 768px) {
  .forum-page {
    padding: 16px;
  }
  
  .forum-header {
    padding: 32px 24px;
    
    h1 {
      font-size: 28px;
    }
    
    .header-description {
      font-size: 16px;
    }
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .section-card {
    flex-direction: column;
    text-align: center;
    
    .section-latest {
      width: 100%;
      margin-top: 16px;
    }
  }
  
  .topic-item {
    flex-direction: column;
    align-items: flex-start;
    
    .topic-status {
      margin-top: 12px;
      align-self: flex-end;
    }
  }
}