src/views/forum/ForumView.vue

<template>
  <div class="forum-page">
    <Navbar />
    <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'
import {
  getAllTopics,
  getTopicsByForum,
  createTopic,
  searchTopics
} from '@/api/topic'
import {
  getAllForums,
  getForumById
} from '@/api/forum'
import Navbar from "@/components/Navbar.vue";

export default {
  name: 'ForumView',
  components: {Navbar},
  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: 0,
      totalReplies: 0,
      activeUsers: 0,
      todayPosts: 0
    })
    
    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([])
    
    const hotTopics = ref([])
    const recentReplies = ref([])
    
    const loadForumData = async () => {
      try {
        // 获取所有论坛
        const forums = await getAllForums()
        forumSections.value = forums.map(forum => ({
          id: forum.id,
          name: forum.name,
          description: forum.description,
          icon: getForumIcon(forum.name),
          color: getForumColor(forum.name),
          topics: forum.topicCount || 0,
          replies: forum.replyCount || 0,
          latestTopic: forum.latestTopic ? {
            title: forum.latestTopic.title,
            author: forum.latestTopic.user?.username || '匿名用户',
            time: forum.latestTopic.createTime
          } : null
        }))
        
        // 获取所有主题
        const topics = await getAllTopics()
        hotTopics.value = topics.slice(0, 3).map(topic => ({
          id: topic.id,
          title: topic.title,
          author: topic.user?.username || '匿名用户',
          views: topic.views || 0,
          replies: topic.replies || 0,
          lastReply: topic.lastReplyTime,
          tags: topic.tags || [],
          pinned: topic.pinned || false,
          hot: topic.views > 1000
        }))
        
        // 更新统计数据
        forumStats.totalTopics = topics.length
        forumStats.totalReplies = topics.reduce((sum, topic) => sum + (topic.replies || 0), 0)
        forumStats.activeUsers = new Set(topics.map(topic => topic.user?.id)).size
        forumStats.todayPosts = topics.filter(topic => {
          const topicDate = new Date(topic.createTime)
          const today = new Date()
          return topicDate.toDateString() === today.toDateString()
        }).length
        
      } catch (error) {
        console.error('加载论坛数据失败:', error)
        ElMessage.error('加载论坛数据失败')
      }
    }
    
    const getForumIcon = (name) => {
      const iconMap = {
        '电影讨论': 'Film',
        '音乐分享': 'Headphones',
        '软件技术': 'Monitor',
        '游戏天地': 'GamePad',
        '站务公告': 'Bell',
        '新手求助': 'QuestionFilled'
      }
      return iconMap[name] || 'ChatLineRound'
    }
    
    const getForumColor = (name) => {
      const colorMap = {
        '电影讨论': '#409eff',
        '音乐分享': '#67c23a',
        '软件技术': '#e6a23c',
        '游戏天地': '#f56c6c',
        '站务公告': '#909399',
        '新手求助': '#606266'
      }
      return colorMap[name] || '#409eff'
    }
    
    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
        
        const topicData = {
          title: newTopic.title,
          content: newTopic.content,
          forumId: newTopic.sectionId,
          tags: newTopic.tags
        }
        
        const response = await createTopic(topicData)
        
        ElMessage.success('主题发布成功！')
        resetForm()
        showNewTopicDialog.value = false
        
        // 刷新论坛数据
        await loadForumData()
        
        // 跳转到新创建的主题页面
        router.push(`/forum/topic/${response.id}`)
        
      } catch (error) {
        console.error('发布主题失败:', error)
        ElMessage.error('发布主题失败')
      } finally {
        submitting.value = false
      }
    }
    
    const resetForm = () => {
      topicFormRef.value?.resetFields()
      newTopic.sectionId = ''
      newTopic.title = ''
      newTopic.content = ''
      newTopic.tags = []
    }
    
    onMounted(() => {
      loadForumData()
    })
    
    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,
      loadForumData,
      getForumIcon,
      getForumColor
    }
  }
}
</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;
    }
  }
}