前后端登录注册连接成功
Change-Id: Ib5f9282fe7217b3363e542ce5c4e1c0d32619dcb
diff --git a/src/views/forum/ForumSectionView.vue b/src/views/forum/ForumSectionView.vue
index a8e7306..d0b42ec 100644
--- a/src/views/forum/ForumSectionView.vue
+++ b/src/views/forum/ForumSectionView.vue
@@ -1,1008 +1,1008 @@
-<template>
- <div class="section-page">
- <div class="page-container">
- <!-- 面包屑导航 -->
- <div class="breadcrumb">
- <el-breadcrumb separator="/">
- <el-breadcrumb-item :to="{ path: '/forum' }">论坛首页</el-breadcrumb-item>
- <el-breadcrumb-item>{{ sectionInfo.name }}</el-breadcrumb-item>
- </el-breadcrumb>
- </div>
-
- <!-- 版块信息 -->
- <div class="section-header">
- <div class="section-info">
- <div class="section-icon">
- <el-icon size="48" :color="sectionInfo.color">
- <component :is="sectionInfo.icon" />
- </el-icon>
- </div>
- <div class="section-details">
- <h1 class="section-name">{{ sectionInfo.name }}</h1>
- <p class="section-description">{{ sectionInfo.description }}</p>
- <div class="section-stats">
- <div class="stat-item">
- <el-icon><ChatDotRound /></el-icon>
- <span>{{ sectionInfo.topics }} 主题</span>
- </div>
- <div class="stat-item">
- <el-icon><Comment /></el-icon>
- <span>{{ sectionInfo.replies }} 回复</span>
- </div>
- <div class="stat-item">
- <el-icon><User /></el-icon>
- <span>{{ sectionInfo.members }} 成员</span>
- </div>
- </div>
- </div>
- </div>
-
- <div class="section-actions">
- <el-button type="primary" :icon="Edit" @click="showNewTopicDialog = true">
- 发布新主题
- </el-button>
- </div>
- </div>
-
- <!-- 筛选和搜索 -->
- <div class="filter-section">
- <div class="filter-left">
- <el-input
- v-model="searchQuery"
- placeholder="搜索主题..."
- :prefix-icon="Search"
- @keyup.enter="handleSearch"
- clearable
- style="width: 300px;"
- />
- <el-button type="primary" @click="handleSearch">搜索</el-button>
- </div>
-
- <div class="filter-right">
- <el-select v-model="sortBy" placeholder="排序方式" @change="handleFilter">
- <el-option label="最新回复" value="last_reply" />
- <el-option label="发布时间" value="create_time" />
- <el-option label="回复数量" value="replies" />
- <el-option label="浏览次数" value="views" />
- </el-select>
-
- <el-select v-model="filterType" placeholder="主题类型" @change="handleFilter">
- <el-option label="全部主题" value="" />
- <el-option label="置顶主题" value="pinned" />
- <el-option label="热门主题" value="hot" />
- <el-option label="精华主题" value="featured" />
- </el-select>
- </div>
- </div>
-
- <!-- 置顶主题 -->
- <div v-if="pinnedTopics.length > 0" class="pinned-topics">
- <h3 class="section-title">置顶主题</h3>
- <div class="topics-list">
- <div
- v-for="topic in pinnedTopics"
- :key="topic.id"
- class="topic-item pinned"
- @click="navigateToTopic(topic.id)"
- >
- <div class="topic-status">
- <el-icon class="pin-icon"><Top /></el-icon>
- </div>
-
- <div class="topic-content">
- <div class="topic-header">
- <h4 class="topic-title">{{ topic.title }}</h4>
- <div class="topic-tags">
- <el-tag type="warning" size="small">置顶</el-tag>
- <el-tag v-if="topic.hot" type="danger" size="small">热门</el-tag>
- <el-tag v-if="topic.featured" type="success" size="small">精华</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>
- <span class="create-time">{{ formatTime(topic.createTime) }}</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>
- </div>
- </div>
- </div>
-
- <div class="last-reply">
- <div v-if="topic.lastReply" class="reply-info">
- <div class="reply-author">{{ topic.lastReply.author }}</div>
- <div class="reply-time">{{ formatTime(topic.lastReply.time) }}</div>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <!-- 普通主题列表 -->
- <div class="normal-topics">
- <div class="section-header">
- <h3 class="section-title">主题列表</h3>
- <div class="results-info">
- 共 {{ totalTopics }} 个主题
- </div>
- </div>
-
- <div class="topics-list" v-loading="loading">
- <div
- v-for="topic in topics"
- :key="topic.id"
- class="topic-item"
- @click="navigateToTopic(topic.id)"
- >
- <div class="topic-status">
- <el-icon v-if="topic.hasNewReplies" class="new-icon" color="#f56c6c">
- <ChatDotRound />
- </el-icon>
- <el-icon v-else class="normal-icon" color="#909399">
- <ChatLineRound />
- </el-icon>
- </div>
-
- <div class="topic-content">
- <div class="topic-header">
- <h4 class="topic-title">{{ topic.title }}</h4>
- <div class="topic-tags">
- <el-tag v-if="topic.hot" type="danger" size="small">热门</el-tag>
- <el-tag v-if="topic.featured" type="success" size="small">精华</el-tag>
- <el-tag v-if="topic.closed" type="info" size="small">已关闭</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>
- <span class="create-time">{{ formatTime(topic.createTime) }}</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>
- </div>
- </div>
- </div>
-
- <div class="last-reply">
- <div v-if="topic.lastReply" class="reply-info">
- <div class="reply-author">{{ topic.lastReply.author }}</div>
- <div class="reply-time">{{ formatTime(topic.lastReply.time) }}</div>
- </div>
- <div v-else class="no-reply">暂无回复</div>
- </div>
- </div>
-
- <div v-if="topics.length === 0 && !loading" class="no-topics">
- 暂无主题，快来发布第一个主题吧！
- </div>
- </div>
-
- <!-- 分页 -->
- <div class="pagination-wrapper">
- <el-pagination
- v-model:current-page="currentPage"
- v-model:page-size="pageSize"
- :page-sizes="[20, 50, 100]"
- :total="totalTopics"
- layout="total, sizes, prev, pager, next, jumper"
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- />
- </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="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-item label="主题选项">
- <el-checkbox-group v-model="newTopic.options">
- <el-checkbox label="hot">申请热门</el-checkbox>
- <el-checkbox label="featured">申请精华</el-checkbox>
- </el-checkbox-group>
- </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 { useRoute, useRouter } from 'vue-router'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import {
- Edit,
- Search,
- ChatDotRound,
- Comment,
- User,
- View,
- Top,
- ChatLineRound,
- Film,
- Headphones,
- Monitor,
- GamePad,
- Bell,
- QuestionFilled
-} from '@element-plus/icons-vue'
-
-export default {
- name: 'ForumSectionView',
- setup() {
- const route = useRoute()
- const router = useRouter()
- const topicFormRef = ref(null)
- const tagInputRef = ref(null)
-
- const loading = ref(false)
- const showNewTopicDialog = ref(false)
- const submitting = ref(false)
- const tagInputVisible = ref(false)
- const tagInputValue = ref('')
-
- const searchQuery = ref('')
- const sortBy = ref('last_reply')
- const filterType = ref('')
- const currentPage = ref(1)
- const pageSize = ref(20)
- const totalTopics = ref(0)
-
- const sectionInfo = ref({
- id: 1,
- name: '电影讨论',
- description: '分享和讨论电影资源，交流观影心得',
- icon: 'Film',
- color: '#409eff',
- topics: 3256,
- replies: 18934,
- members: 1234
- })
-
- const newTopic = reactive({
- title: '',
- content: '',
- tags: [],
- options: []
- })
-
- const topicRules = {
- 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 pinnedTopics = ref([
- {
- id: 1,
- title: '【公告】本版块发帖规则和注意事项',
- author: 'Admin',
- createTime: '2025-05-01T10:00:00',
- views: 5678,
- replies: 23,
- hot: false,
- featured: true,
- lastReply: {
- author: 'User123',
- time: '2025-06-02T15:30:00'
- }
- }
- ])
-
- const topics = ref([
- {
- id: 2,
- title: '2024年度最佳科幻电影推荐榜单',
- author: 'SciFiFan',
- createTime: '2025-06-03T10:30:00',
- views: 1234,
- replies: 45,
- hot: true,
- featured: false,
- closed: false,
- hasNewReplies: true,
- lastReply: {
- author: 'MovieLover',
- time: '2025-06-03T14:25:00'
- }
- },
- {
- id: 3,
- title: '阿凡达2：水之道 观影感受分享',
- author: 'Avatar2Fan',
- createTime: '2025-06-02T16:45:00',
- views: 892,
- replies: 67,
- hot: false,
- featured: true,
- closed: false,
- hasNewReplies: false,
- lastReply: {
- author: 'CinemaExpert',
- time: '2025-06-03T12:10:00'
- }
- },
- {
- id: 4,
- title: '求推荐几部好看的悬疑电影',
- author: 'SuspenseLover',
- createTime: '2025-06-01T09:20:00',
- views: 456,
- replies: 23,
- hot: false,
- featured: false,
- closed: false,
- hasNewReplies: true,
- lastReply: {
- author: 'ThrillerFan',
- time: '2025-06-03T11:45:00'
- }
- }
- ])
-
- onMounted(() => {
- const sectionId = route.params.id
- fetchSectionData(sectionId)
- })
-
- const fetchSectionData = async (id) => {
- loading.value = true
- try {
- // 模拟API调用
- console.log('获取版块数据:', id)
-
- // 根据版块ID设置不同的版块信息
- const sections = {
- 1: { name: '电影讨论', description: '分享和讨论电影资源，交流观影心得', icon: 'Film', color: '#409eff' },
- 2: { name: '音乐分享', description: '音乐资源分享，音乐制作技术交流', icon: 'Headphones', color: '#67c23a' },
- 3: { name: '软件技术', description: '软件资源分享，技术问题讨论', icon: 'Monitor', color: '#e6a23c' },
- 4: { name: '游戏天地', description: '游戏资源分享，游戏攻略讨论', icon: 'GamePad', color: '#f56c6c' },
- 5: { name: '站务公告', description: '网站公告，规则说明，意见建议', icon: 'Bell', color: '#909399' },
- 6: { name: '新手求助', description: '新手问题解答，使用教程分享', icon: 'QuestionFilled', color: '#606266' }
- }
-
- const sectionData = sections[id] || sections[1]
- sectionInfo.value = {
- id: parseInt(id),
- ...sectionData,
- topics: 3256,
- replies: 18934,
- members: 1234
- }
-
- totalTopics.value = 156
-
- } catch (error) {
- ElMessage.error('获取版块数据失败')
- } finally {
- loading.value = false
- }
- }
-
- 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)
- if (days < 7) return `${days}天前`
-
- return date.toLocaleDateString('zh-CN', {
- month: '2-digit',
- day: '2-digit',
- hour: '2-digit',
- minute: '2-digit'
- })
- }
-
- const navigateToTopic = (topicId) => {
- router.push(`/forum/topic/${topicId}`)
- }
-
- const handleSearch = () => {
- currentPage.value = 1
- fetchTopics()
- }
-
- const handleFilter = () => {
- currentPage.value = 1
- fetchTopics()
- }
-
- const fetchTopics = async () => {
- loading.value = true
- try {
- // 模拟API调用
- await new Promise(resolve => setTimeout(resolve, 500))
- console.log('获取主题列表:', { searchQuery: searchQuery.value, sortBy: sortBy.value, filterType: filterType.value })
- } catch (error) {
- ElMessage.error('获取主题列表失败')
- } finally {
- loading.value = false
- }
- }
-
- const handleSizeChange = (size) => {
- pageSize.value = size
- currentPage.value = 1
- fetchTopics()
- }
-
- const handleCurrentChange = (page) => {
- currentPage.value = page
- fetchTopics()
- }
-
- 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
-
- // 刷新主题列表
- fetchTopics()
-
- } catch (error) {
- console.error('表单验证失败:', error)
- } finally {
- submitting.value = false
- }
- }
-
- const resetForm = () => {
- topicFormRef.value?.resetFields()
- newTopic.title = ''
- newTopic.content = ''
- newTopic.tags = []
- newTopic.options = []
- }
-
- return {
- loading,
- showNewTopicDialog,
- submitting,
- tagInputVisible,
- tagInputValue,
- searchQuery,
- sortBy,
- filterType,
- currentPage,
- pageSize,
- totalTopics,
- sectionInfo,
- pinnedTopics,
- topics,
- newTopic,
- topicRules,
- topicFormRef,
- tagInputRef,
- formatTime,
- navigateToTopic,
- handleSearch,
- handleFilter,
- handleSizeChange,
- handleCurrentChange,
- showTagInput,
- addTopicTag,
- removeTopicTag,
- handleCloseDialog,
- submitNewTopic,
- Edit,
- Search,
- ChatDotRound,
- Comment,
- User,
- View,
- Top,
- ChatLineRound,
- Film,
- Headphones,
- Monitor,
- GamePad,
- Bell,
- QuestionFilled
- }
- }
-}
-</script>
-
-<style lang="scss" scoped>
-.section-page {
- max-width: 1200px;
- margin: 0 auto;
- padding: 24px;
- background: #f5f5f5;
- min-height: 100vh;
-}
-
-.breadcrumb {
- margin-bottom: 16px;
-}
-
-.section-header {
- background: #fff;
- border-radius: 12px;
- padding: 32px;
- margin-bottom: 24px;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-
- display: flex;
- justify-content: space-between;
- align-items: center;
- gap: 24px;
-
- .section-info {
- display: flex;
- align-items: center;
- gap: 20px;
- flex: 1;
-
- .section-details {
- .section-name {
- font-size: 28px;
- font-weight: 600;
- color: #2c3e50;
- margin: 0 0 8px 0;
- }
-
- .section-description {
- font-size: 16px;
- color: #7f8c8d;
- margin: 0 0 16px 0;
- }
-
- .section-stats {
- display: flex;
- gap: 24px;
-
- .stat-item {
- display: flex;
- align-items: center;
- gap: 8px;
- font-size: 14px;
- color: #606266;
- }
- }
- }
- }
-
- .section-actions {
- flex-shrink: 0;
- }
-}
-
-.filter-section {
- background: #fff;
- border-radius: 12px;
- padding: 20px 24px;
- margin-bottom: 24px;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-
- display: flex;
- justify-content: space-between;
- align-items: center;
- gap: 20px;
-
- .filter-left {
- display: flex;
- align-items: center;
- gap: 12px;
- }
-
- .filter-right {
- display: flex;
- align-items: center;
- gap: 12px;
-
- .el-select {
- width: 120px;
- }
- }
-}
-
-.pinned-topics, .normal-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;
- background: none;
- padding: 0;
- box-shadow: none;
-
- .section-title {
- font-size: 18px;
- font-weight: 600;
- color: #2c3e50;
- margin: 0;
- }
-
- .results-info {
- font-size: 14px;
- color: #909399;
- }
- }
-}
-
-.topics-list {
- .topic-item {
- display: flex;
- align-items: center;
- gap: 16px;
- 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;
- transform: translateX(2px);
- }
-
- &.pinned {
- background: linear-gradient(90deg, #fff7e6 0%, #fff 100%);
- border-color: #e6a23c;
- }
-
- .topic-status {
- width: 32px;
- text-align: center;
-
- .pin-icon {
- color: #e6a23c;
- }
-
- .new-icon {
- animation: pulse 2s infinite;
- }
- }
-
- .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;
- flex: 1;
-
- &:hover {
- color: #409eff;
- }
- }
-
- .topic-tags {
- .el-tag {
- margin-left: 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;
- font-weight: 500;
- color: #606266;
- }
-
- .create-time {
- font-size: 12px;
- color: #909399;
- }
- }
-
- .topic-stats {
- display: flex;
- gap: 16px;
-
- .stat-item {
- display: flex;
- align-items: center;
- gap: 4px;
- font-size: 12px;
- color: #909399;
- }
- }
- }
- }
-
- .last-reply {
- width: 150px;
- text-align: right;
-
- .reply-info {
- .reply-author {
- font-size: 14px;
- font-weight: 500;
- color: #606266;
- margin-bottom: 4px;
- }
-
- .reply-time {
- font-size: 12px;
- color: #909399;
- }
- }
-
- .no-reply {
- font-size: 12px;
- color: #c0c4cc;
- }
- }
- }
-
- .no-topics {
- text-align: center;
- color: #909399;
- padding: 60px 0;
- font-size: 16px;
- }
-}
-
-.pagination-wrapper {
- margin-top: 24px;
- text-align: center;
-}
-
-.tags-input {
- display: flex;
- flex-wrap: wrap;
- gap: 8px;
- align-items: center;
-
- .el-tag {
- margin: 0;
- }
-}
-
-@keyframes pulse {
- 0% {
- transform: scale(1);
- }
- 50% {
- transform: scale(1.1);
- }
- 100% {
- transform: scale(1);
- }
-}
-
-@media (max-width: 768px) {
- .section-page {
- padding: 16px;
- }
-
- .section-header {
- flex-direction: column;
- align-items: flex-start;
- gap: 16px;
-
- .section-info {
- flex-direction: column;
- text-align: center;
-
- .section-stats {
- justify-content: center;
- }
- }
-
- .section-actions {
- width: 100%;
- text-align: center;
- }
- }
-
- .filter-section {
- flex-direction: column;
- gap: 16px;
-
- .filter-left, .filter-right {
- width: 100%;
- justify-content: center;
- }
-
- .filter-right {
- .el-select {
- width: 140px;
- }
- }
- }
-
- .topic-item {
- flex-direction: column;
- align-items: flex-start;
- gap: 12px;
-
- .topic-status {
- align-self: flex-start;
- }
-
- .topic-content {
- width: 100%;
-
- .topic-meta {
- flex-direction: column;
- align-items: flex-start;
- gap: 8px;
- }
- }
-
- .last-reply {
- width: 100%;
- text-align: left;
- }
- }
-}
+<template>
+ <div class="section-page">
+ <div class="page-container">
+ <!-- 面包屑导航 -->
+ <div class="breadcrumb">
+ <el-breadcrumb separator="/">
+ <el-breadcrumb-item :to="{ path: '/forum' }">论坛首页</el-breadcrumb-item>
+ <el-breadcrumb-item>{{ sectionInfo.name }}</el-breadcrumb-item>
+ </el-breadcrumb>
+ </div>
+
+ <!-- 版块信息 -->
+ <div class="section-header">
+ <div class="section-info">
+ <div class="section-icon">
+ <el-icon size="48" :color="sectionInfo.color">
+ <component :is="sectionInfo.icon" />
+ </el-icon>
+ </div>
+ <div class="section-details">
+ <h1 class="section-name">{{ sectionInfo.name }}</h1>
+ <p class="section-description">{{ sectionInfo.description }}</p>
+ <div class="section-stats">
+ <div class="stat-item">
+ <el-icon><ChatDotRound /></el-icon>
+ <span>{{ sectionInfo.topics }} 主题</span>
+ </div>
+ <div class="stat-item">
+ <el-icon><Comment /></el-icon>
+ <span>{{ sectionInfo.replies }} 回复</span>
+ </div>
+ <div class="stat-item">
+ <el-icon><User /></el-icon>
+ <span>{{ sectionInfo.members }} 成员</span>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="section-actions">
+ <el-button type="primary" :icon="Edit" @click="showNewTopicDialog = true">
+ 发布新主题
+ </el-button>
+ </div>
+ </div>
+
+ <!-- 筛选和搜索 -->
+ <div class="filter-section">
+ <div class="filter-left">
+ <el-input
+ v-model="searchQuery"
+ placeholder="搜索主题..."
+ :prefix-icon="Search"
+ @keyup.enter="handleSearch"
+ clearable
+ style="width: 300px;"
+ />
+ <el-button type="primary" @click="handleSearch">搜索</el-button>
+ </div>
+
+ <div class="filter-right">
+ <el-select v-model="sortBy" placeholder="排序方式" @change="handleFilter">
+ <el-option label="最新回复" value="last_reply" />
+ <el-option label="发布时间" value="create_time" />
+ <el-option label="回复数量" value="replies" />
+ <el-option label="浏览次数" value="views" />
+ </el-select>
+
+ <el-select v-model="filterType" placeholder="主题类型" @change="handleFilter">
+ <el-option label="全部主题" value="" />
+ <el-option label="置顶主题" value="pinned" />
+ <el-option label="热门主题" value="hot" />
+ <el-option label="精华主题" value="featured" />
+ </el-select>
+ </div>
+ </div>
+
+ <!-- 置顶主题 -->
+ <div v-if="pinnedTopics.length > 0" class="pinned-topics">
+ <h3 class="section-title">置顶主题</h3>
+ <div class="topics-list">
+ <div
+ v-for="topic in pinnedTopics"
+ :key="topic.id"
+ class="topic-item pinned"
+ @click="navigateToTopic(topic.id)"
+ >
+ <div class="topic-status">
+ <el-icon class="pin-icon"><Top /></el-icon>
+ </div>
+
+ <div class="topic-content">
+ <div class="topic-header">
+ <h4 class="topic-title">{{ topic.title }}</h4>
+ <div class="topic-tags">
+ <el-tag type="warning" size="small">置顶</el-tag>
+ <el-tag v-if="topic.hot" type="danger" size="small">热门</el-tag>
+ <el-tag v-if="topic.featured" type="success" size="small">精华</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>
+ <span class="create-time">{{ formatTime(topic.createTime) }}</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>
+ </div>
+ </div>
+ </div>
+
+ <div class="last-reply">
+ <div v-if="topic.lastReply" class="reply-info">
+ <div class="reply-author">{{ topic.lastReply.author }}</div>
+ <div class="reply-time">{{ formatTime(topic.lastReply.time) }}</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- 普通主题列表 -->
+ <div class="normal-topics">
+ <div class="section-header">
+ <h3 class="section-title">主题列表</h3>
+ <div class="results-info">
+ 共 {{ totalTopics }} 个主题
+ </div>
+ </div>
+
+ <div class="topics-list" v-loading="loading">
+ <div
+ v-for="topic in topics"
+ :key="topic.id"
+ class="topic-item"
+ @click="navigateToTopic(topic.id)"
+ >
+ <div class="topic-status">
+ <el-icon v-if="topic.hasNewReplies" class="new-icon" color="#f56c6c">
+ <ChatDotRound />
+ </el-icon>
+ <el-icon v-else class="normal-icon" color="#909399">
+ <ChatLineRound />
+ </el-icon>
+ </div>
+
+ <div class="topic-content">
+ <div class="topic-header">
+ <h4 class="topic-title">{{ topic.title }}</h4>
+ <div class="topic-tags">
+ <el-tag v-if="topic.hot" type="danger" size="small">热门</el-tag>
+ <el-tag v-if="topic.featured" type="success" size="small">精华</el-tag>
+ <el-tag v-if="topic.closed" type="info" size="small">已关闭</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>
+ <span class="create-time">{{ formatTime(topic.createTime) }}</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>
+ </div>
+ </div>
+ </div>
+
+ <div class="last-reply">
+ <div v-if="topic.lastReply" class="reply-info">
+ <div class="reply-author">{{ topic.lastReply.author }}</div>
+ <div class="reply-time">{{ formatTime(topic.lastReply.time) }}</div>
+ </div>
+ <div v-else class="no-reply">暂无回复</div>
+ </div>
+ </div>
+
+ <div v-if="topics.length === 0 && !loading" class="no-topics">
+ 暂无主题，快来发布第一个主题吧！
+ </div>
+ </div>
+
+ <!-- 分页 -->
+ <div class="pagination-wrapper">
+ <el-pagination
+ v-model:current-page="currentPage"
+ v-model:page-size="pageSize"
+ :page-sizes="[20, 50, 100]"
+ :total="totalTopics"
+ layout="total, sizes, prev, pager, next, jumper"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </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="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-item label="主题选项">
+ <el-checkbox-group v-model="newTopic.options">
+ <el-checkbox label="hot">申请热门</el-checkbox>
+ <el-checkbox label="featured">申请精华</el-checkbox>
+ </el-checkbox-group>
+ </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 { useRoute, useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import {
+ Edit,
+ Search,
+ ChatDotRound,
+ Comment,
+ User,
+ View,
+ Top,
+ ChatLineRound,
+ Film,
+ Headphones,
+ Monitor,
+ GamePad,
+ Bell,
+ QuestionFilled
+} from '@element-plus/icons-vue'
+
+export default {
+ name: 'ForumSectionView',
+ setup() {
+ const route = useRoute()
+ const router = useRouter()
+ const topicFormRef = ref(null)
+ const tagInputRef = ref(null)
+
+ const loading = ref(false)
+ const showNewTopicDialog = ref(false)
+ const submitting = ref(false)
+ const tagInputVisible = ref(false)
+ const tagInputValue = ref('')
+
+ const searchQuery = ref('')
+ const sortBy = ref('last_reply')
+ const filterType = ref('')
+ const currentPage = ref(1)
+ const pageSize = ref(20)
+ const totalTopics = ref(0)
+
+ const sectionInfo = ref({
+ id: 1,
+ name: '电影讨论',
+ description: '分享和讨论电影资源，交流观影心得',
+ icon: 'Film',
+ color: '#409eff',
+ topics: 3256,
+ replies: 18934,
+ members: 1234
+ })
+
+ const newTopic = reactive({
+ title: '',
+ content: '',
+ tags: [],
+ options: []
+ })
+
+ const topicRules = {
+ 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 pinnedTopics = ref([
+ {
+ id: 1,
+ title: '【公告】本版块发帖规则和注意事项',
+ author: 'Admin',
+ createTime: '2025-05-01T10:00:00',
+ views: 5678,
+ replies: 23,
+ hot: false,
+ featured: true,
+ lastReply: {
+ author: 'User123',
+ time: '2025-06-02T15:30:00'
+ }
+ }
+ ])
+
+ const topics = ref([
+ {
+ id: 2,
+ title: '2024年度最佳科幻电影推荐榜单',
+ author: 'SciFiFan',
+ createTime: '2025-06-03T10:30:00',
+ views: 1234,
+ replies: 45,
+ hot: true,
+ featured: false,
+ closed: false,
+ hasNewReplies: true,
+ lastReply: {
+ author: 'MovieLover',
+ time: '2025-06-03T14:25:00'
+ }
+ },
+ {
+ id: 3,
+ title: '阿凡达2：水之道 观影感受分享',
+ author: 'Avatar2Fan',
+ createTime: '2025-06-02T16:45:00',
+ views: 892,
+ replies: 67,
+ hot: false,
+ featured: true,
+ closed: false,
+ hasNewReplies: false,
+ lastReply: {
+ author: 'CinemaExpert',
+ time: '2025-06-03T12:10:00'
+ }
+ },
+ {
+ id: 4,
+ title: '求推荐几部好看的悬疑电影',
+ author: 'SuspenseLover',
+ createTime: '2025-06-01T09:20:00',
+ views: 456,
+ replies: 23,
+ hot: false,
+ featured: false,
+ closed: false,
+ hasNewReplies: true,
+ lastReply: {
+ author: 'ThrillerFan',
+ time: '2025-06-03T11:45:00'
+ }
+ }
+ ])
+
+ onMounted(() => {
+ const sectionId = route.params.id
+ fetchSectionData(sectionId)
+ })
+
+ const fetchSectionData = async (id) => {
+ loading.value = true
+ try {
+ // 模拟API调用
+ console.log('获取版块数据:', id)
+
+ // 根据版块ID设置不同的版块信息
+ const sections = {
+ 1: { name: '电影讨论', description: '分享和讨论电影资源，交流观影心得', icon: 'Film', color: '#409eff' },
+ 2: { name: '音乐分享', description: '音乐资源分享，音乐制作技术交流', icon: 'Headphones', color: '#67c23a' },
+ 3: { name: '软件技术', description: '软件资源分享，技术问题讨论', icon: 'Monitor', color: '#e6a23c' },
+ 4: { name: '游戏天地', description: '游戏资源分享，游戏攻略讨论', icon: 'GamePad', color: '#f56c6c' },
+ 5: { name: '站务公告', description: '网站公告，规则说明，意见建议', icon: 'Bell', color: '#909399' },
+ 6: { name: '新手求助', description: '新手问题解答，使用教程分享', icon: 'QuestionFilled', color: '#606266' }
+ }
+
+ const sectionData = sections[id] || sections[1]
+ sectionInfo.value = {
+ id: parseInt(id),
+ ...sectionData,
+ topics: 3256,
+ replies: 18934,
+ members: 1234
+ }
+
+ totalTopics.value = 156
+
+ } catch (error) {
+ ElMessage.error('获取版块数据失败')
+ } finally {
+ loading.value = false
+ }
+ }
+
+ 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)
+ if (days < 7) return `${days}天前`
+
+ return date.toLocaleDateString('zh-CN', {
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit'
+ })
+ }
+
+ const navigateToTopic = (topicId) => {
+ router.push(`/forum/topic/${topicId}`)
+ }
+
+ const handleSearch = () => {
+ currentPage.value = 1
+ fetchTopics()
+ }
+
+ const handleFilter = () => {
+ currentPage.value = 1
+ fetchTopics()
+ }
+
+ const fetchTopics = async () => {
+ loading.value = true
+ try {
+ // 模拟API调用
+ await new Promise(resolve => setTimeout(resolve, 500))
+ console.log('获取主题列表:', { searchQuery: searchQuery.value, sortBy: sortBy.value, filterType: filterType.value })
+ } catch (error) {
+ ElMessage.error('获取主题列表失败')
+ } finally {
+ loading.value = false
+ }
+ }
+
+ const handleSizeChange = (size) => {
+ pageSize.value = size
+ currentPage.value = 1
+ fetchTopics()
+ }
+
+ const handleCurrentChange = (page) => {
+ currentPage.value = page
+ fetchTopics()
+ }
+
+ 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
+
+ // 刷新主题列表
+ fetchTopics()
+
+ } catch (error) {
+ console.error('表单验证失败:', error)
+ } finally {
+ submitting.value = false
+ }
+ }
+
+ const resetForm = () => {
+ topicFormRef.value?.resetFields()
+ newTopic.title = ''
+ newTopic.content = ''
+ newTopic.tags = []
+ newTopic.options = []
+ }
+
+ return {
+ loading,
+ showNewTopicDialog,
+ submitting,
+ tagInputVisible,
+ tagInputValue,
+ searchQuery,
+ sortBy,
+ filterType,
+ currentPage,
+ pageSize,
+ totalTopics,
+ sectionInfo,
+ pinnedTopics,
+ topics,
+ newTopic,
+ topicRules,
+ topicFormRef,
+ tagInputRef,
+ formatTime,
+ navigateToTopic,
+ handleSearch,
+ handleFilter,
+ handleSizeChange,
+ handleCurrentChange,
+ showTagInput,
+ addTopicTag,
+ removeTopicTag,
+ handleCloseDialog,
+ submitNewTopic,
+ Edit,
+ Search,
+ ChatDotRound,
+ Comment,
+ User,
+ View,
+ Top,
+ ChatLineRound,
+ Film,
+ Headphones,
+ Monitor,
+ GamePad,
+ Bell,
+ QuestionFilled
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.section-page {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 24px;
+ background: #f5f5f5;
+ min-height: 100vh;
+}
+
+.breadcrumb {
+ margin-bottom: 16px;
+}
+
+.section-header {
+ background: #fff;
+ border-radius: 12px;
+ padding: 32px;
+ margin-bottom: 24px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 24px;
+
+ .section-info {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ flex: 1;
+
+ .section-details {
+ .section-name {
+ font-size: 28px;
+ font-weight: 600;
+ color: #2c3e50;
+ margin: 0 0 8px 0;
+ }
+
+ .section-description {
+ font-size: 16px;
+ color: #7f8c8d;
+ margin: 0 0 16px 0;
+ }
+
+ .section-stats {
+ display: flex;
+ gap: 24px;
+
+ .stat-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 14px;
+ color: #606266;
+ }
+ }
+ }
+ }
+
+ .section-actions {
+ flex-shrink: 0;
+ }
+}
+
+.filter-section {
+ background: #fff;
+ border-radius: 12px;
+ padding: 20px 24px;
+ margin-bottom: 24px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 20px;
+
+ .filter-left {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ }
+
+ .filter-right {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+
+ .el-select {
+ width: 120px;
+ }
+ }
+}
+
+.pinned-topics, .normal-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;
+ background: none;
+ padding: 0;
+ box-shadow: none;
+
+ .section-title {
+ font-size: 18px;
+ font-weight: 600;
+ color: #2c3e50;
+ margin: 0;
+ }
+
+ .results-info {
+ font-size: 14px;
+ color: #909399;
+ }
+ }
+}
+
+.topics-list {
+ .topic-item {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ 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;
+ transform: translateX(2px);
+ }
+
+ &.pinned {
+ background: linear-gradient(90deg, #fff7e6 0%, #fff 100%);
+ border-color: #e6a23c;
+ }
+
+ .topic-status {
+ width: 32px;
+ text-align: center;
+
+ .pin-icon {
+ color: #e6a23c;
+ }
+
+ .new-icon {
+ animation: pulse 2s infinite;
+ }
+ }
+
+ .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;
+ flex: 1;
+
+ &:hover {
+ color: #409eff;
+ }
+ }
+
+ .topic-tags {
+ .el-tag {
+ margin-left: 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;
+ font-weight: 500;
+ color: #606266;
+ }
+
+ .create-time {
+ font-size: 12px;
+ color: #909399;
+ }
+ }
+
+ .topic-stats {
+ display: flex;
+ gap: 16px;
+
+ .stat-item {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ font-size: 12px;
+ color: #909399;
+ }
+ }
+ }
+ }
+
+ .last-reply {
+ width: 150px;
+ text-align: right;
+
+ .reply-info {
+ .reply-author {
+ font-size: 14px;
+ font-weight: 500;
+ color: #606266;
+ margin-bottom: 4px;
+ }
+
+ .reply-time {
+ font-size: 12px;
+ color: #909399;
+ }
+ }
+
+ .no-reply {
+ font-size: 12px;
+ color: #c0c4cc;
+ }
+ }
+ }
+
+ .no-topics {
+ text-align: center;
+ color: #909399;
+ padding: 60px 0;
+ font-size: 16px;
+ }
+}
+
+.pagination-wrapper {
+ margin-top: 24px;
+ text-align: center;
+}
+
+.tags-input {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ align-items: center;
+
+ .el-tag {
+ margin: 0;
+ }
+}
+
+@keyframes pulse {
+ 0% {
+ transform: scale(1);
+ }
+ 50% {
+ transform: scale(1.1);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
+
+@media (max-width: 768px) {
+ .section-page {
+ padding: 16px;
+ }
+
+ .section-header {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 16px;
+
+ .section-info {
+ flex-direction: column;
+ text-align: center;
+
+ .section-stats {
+ justify-content: center;
+ }
+ }
+
+ .section-actions {
+ width: 100%;
+ text-align: center;
+ }
+ }
+
+ .filter-section {
+ flex-direction: column;
+ gap: 16px;
+
+ .filter-left, .filter-right {
+ width: 100%;
+ justify-content: center;
+ }
+
+ .filter-right {
+ .el-select {
+ width: 140px;
+ }
+ }
+ }
+
+ .topic-item {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+
+ .topic-status {
+ align-self: flex-start;
+ }
+
+ .topic-content {
+ width: 100%;
+
+ .topic-meta {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 8px;
+ }
+ }
+
+ .last-reply {
+ width: 100%;
+ text-align: left;
+ }
+ }
+}
</style>
\ No newline at end of file
diff --git a/src/views/forum/ForumTopicView.vue b/src/views/forum/ForumTopicView.vue
index 027083f..e65b297 100644
--- a/src/views/forum/ForumTopicView.vue
+++ b/src/views/forum/ForumTopicView.vue
@@ -1,933 +1,933 @@
-<template>
- <div class="topic-detail-page">
- <div class="page-container">
- <!-- 面包屑导航 -->
- <div class="breadcrumb">
- <el-breadcrumb separator="/">
- <el-breadcrumb-item :to="{ path: '/forum' }">论坛首页</el-breadcrumb-item>
- <el-breadcrumb-item :to="{ path: `/forum/section/${topic.sectionId}` }">
- {{ topic.sectionName }}
- </el-breadcrumb-item>
- <el-breadcrumb-item>{{ topic.title }}</el-breadcrumb-item>
- </el-breadcrumb>
- </div>
-
- <!-- 主题信息 -->
- <div class="topic-header">
- <div class="topic-info">
- <div class="topic-title-row">
- <h1 class="topic-title">{{ topic.title }}</h1>
- <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>
- <el-tag v-if="topic.closed" type="info" size="small">已关闭</el-tag>
- </div>
- </div>
-
- <div class="topic-tags">
- <el-tag
- v-for="tag in topic.tags"
- :key="tag"
- size="small"
- type="info"
- effect="plain"
- >
- {{ tag }}
- </el-tag>
- </div>
-
- <div class="topic-meta">
- <div class="author-info">
- <el-avatar :size="32">{{ topic.author.charAt(0) }}</el-avatar>
- <div class="author-details">
- <span class="author-name">{{ topic.author }}</span>
- <span class="post-time">发表于 {{ formatDateTime(topic.createTime) }}</span>
- </div>
- </div>
-
- <div class="topic-stats">
- <div class="stat-item">
- <el-icon><View /></el-icon>
- <span>{{ topic.views }} 浏览</span>
- </div>
- <div class="stat-item">
- <el-icon><Comment /></el-icon>
- <span>{{ topic.replies }} 回复</span>
- </div>
- </div>
- </div>
- </div>
-
- <div class="topic-actions">
- <el-button
- v-if="!topic.closed"
- type="primary"
- :icon="Edit"
- @click="showReplyDialog = true"
- >
- 回复主题
- </el-button>
- <el-dropdown @command="handleTopicAction">
- <el-button :icon="More">
- 更多 <el-icon class="el-icon--right"><ArrowDown /></el-icon>
- </el-button>
- <template #dropdown>
- <el-dropdown-menu>
- <el-dropdown-item command="favorite">
- {{ isFavorited ? '取消收藏' : '收藏主题' }}
- </el-dropdown-item>
- <el-dropdown-item command="share">分享主题</el-dropdown-item>
- <el-dropdown-item command="report" divided>举报主题</el-dropdown-item>
- </el-dropdown-menu>
- </template>
- </el-dropdown>
- </div>
- </div>
-
- <!-- 主题内容和回复列表 -->
- <div class="posts-container">
- <!-- 主楼 -->
- <div class="post-item main-post">
- <div class="post-header">
- <div class="floor-number">#1</div>
- <div class="post-author">
- <el-avatar :size="48">{{ topic.author.charAt(0) }}</el-avatar>
- <div class="author-info">
- <span class="author-name">{{ topic.author }}</span>
- <span class="author-title">{{ topic.authorTitle || '会员' }}</span>
- <div class="author-stats">
- <span>帖子: {{ topic.authorPosts || 0 }}</span>
- <span>声望: {{ topic.authorReputation || 0 }}</span>
- </div>
- </div>
- </div>
- <div class="post-time">
- {{ formatDateTime(topic.createTime) }}
- </div>
- </div>
-
- <div class="post-content">
- <div class="content-text" v-html="formatContent(topic.content)"></div>
- </div>
-
- <div class="post-actions">
- <el-button type="text" size="small" @click="likePost(topic.id)">
- <el-icon><Like /></el-icon>
- {{ topic.likes || 0 }}
- </el-button>
- <el-button type="text" size="small" @click="quotePost(topic)">
- <el-icon><ChatDotRound /></el-icon>
- 引用
- </el-button>
- <el-button type="text" size="small" @click="reportPost(topic.id)">
- <el-icon><Flag /></el-icon>
- 举报
- </el-button>
- </div>
- </div>
-
- <!-- 回复列表 -->
- <div
- v-for="(reply, index) in replies"
- :key="reply.id"
- class="post-item reply-post"
- >
- <div class="post-header">
- <div class="floor-number">#{{ index + 2 }}</div>
- <div class="post-author">
- <el-avatar :size="48">{{ reply.author.charAt(0) }}</el-avatar>
- <div class="author-info">
- <span class="author-name">{{ reply.author }}</span>
- <span class="author-title">{{ reply.authorTitle || '会员' }}</span>
- <div class="author-stats">
- <span>帖子: {{ reply.authorPosts || 0 }}</span>
- <span>声望: {{ reply.authorReputation || 0 }}</span>
- </div>
- </div>
- </div>
- <div class="post-time">
- {{ formatDateTime(reply.createTime) }}
- </div>
- </div>
-
- <div class="post-content">
- <div v-if="reply.quotedPost" class="quoted-content">
- <div class="quote-header">
- <el-icon><ChatDotRound /></el-icon>
- <span>{{ reply.quotedPost.author }} 发表于 {{ formatDateTime(reply.quotedPost.time) }}</span>
- </div>
- <div class="quote-text">{{ reply.quotedPost.content }}</div>
- </div>
- <div class="content-text" v-html="formatContent(reply.content)"></div>
- </div>
-
- <div class="post-actions">
- <el-button type="text" size="small" @click="likePost(reply.id)">
- <el-icon><Like /></el-icon>
- {{ reply.likes || 0 }}
- </el-button>
- <el-button type="text" size="small" @click="quotePost(reply)">
- <el-icon><ChatDotRound /></el-icon>
- 引用
- </el-button>
- <el-button type="text" size="small" @click="reportPost(reply.id)">
- <el-icon><Flag /></el-icon>
- 举报
- </el-button>
- </div>
- </div>
- </div>
-
- <!-- 分页 -->
- <div class="pagination-wrapper">
- <el-pagination
- v-model:current-page="currentPage"
- v-model:page-size="pageSize"
- :page-sizes="[10, 20, 50]"
- :total="totalReplies"
- layout="total, sizes, prev, pager, next, jumper"
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- />
- </div>
-
- <!-- 快速回复 -->
- <div v-if="!topic.closed" class="quick-reply">
- <h3>快速回复</h3>
- <el-input
- v-model="quickReplyContent"
- type="textarea"
- :rows="4"
- placeholder="输入你的回复..."
- maxlength="2000"
- show-word-limit
- />
- <div class="quick-reply-actions">
- <el-button @click="clearQuickReply">清空</el-button>
- <el-button type="primary" @click="submitQuickReply" :loading="submittingReply">
- 发表回复
- </el-button>
- </div>
- </div>
- </div>
-
- <!-- 回复对话框 -->
- <el-dialog
- v-model="showReplyDialog"
- title="回复主题"
- width="700px"
- :before-close="handleCloseReplyDialog"
- >
- <el-form
- ref="replyFormRef"
- :model="replyForm"
- :rules="replyRules"
- label-width="80px"
- >
- <el-form-item v-if="quotedContent" label="引用内容">
- <div class="quoted-preview">
- <div class="quote-header">
- <span>{{ quotedContent.author }}</span>
- </div>
- <div class="quote-content">{{ quotedContent.content }}</div>
- <el-button type="text" size="small" @click="clearQuote">
- 清除引用
- </el-button>
- </div>
- </el-form-item>
-
- <el-form-item label="回复内容" prop="content">
- <el-input
- v-model="replyForm.content"
- type="textarea"
- :rows="8"
- placeholder="请输入回复内容..."
- maxlength="5000"
- show-word-limit
- />
- </el-form-item>
- </el-form>
-
- <template #footer>
- <el-button @click="handleCloseReplyDialog">取消</el-button>
- <el-button type="primary" @click="submitReply" :loading="submittingReply">
- 发表回复
- </el-button>
- </template>
- </el-dialog>
- </div>
-</template>
-
-<script>
-import { ref, reactive, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import {
- Edit,
- More,
- View,
- Comment,
- Like,
- ChatDotRound,
- Flag,
- ArrowDown
-} from '@element-plus/icons-vue'
-
-export default {
- name: 'ForumTopicView',
- setup() {
- const route = useRoute()
- const router = useRouter()
- const replyFormRef = ref(null)
-
- const showReplyDialog = ref(false)
- const submittingReply = ref(false)
- const isFavorited = ref(false)
- const currentPage = ref(1)
- const pageSize = ref(20)
- const totalReplies = ref(0)
- const quickReplyContent = ref('')
- const quotedContent = ref(null)
-
- const topic = ref({
- id: 1,
- title: '2024年度最佳PT站点推荐与对比分析',
- sectionId: 1,
- sectionName: '站务讨论',
- author: 'PTExpert',
- authorTitle: '资深会员',
- authorPosts: 1256,
- authorReputation: 2890,
- createTime: '2025-06-01T10:30:00',
- content: `
- <p>大家好，作为一个使用PT站点多年的老用户，我想和大家分享一下2024年各大PT站点的使用体验和对比分析。</p>
-
- <h3>评测标准</h3>
- <ul>
- <li>资源丰富度：种子数量、更新速度、稀有资源</li>
- <li>用户体验：界面设计、功能完善度、响应速度</li>
- <li>社区氛围：用户活跃度、互帮互助程度</li>
- <li>规则友好性：考核难度、分享率要求、保种要求</li>
- </ul>
-
- <h3>推荐站点</h3>
- <p>经过综合评测，以下几个站点值得推荐：</p>
- <ol>
- <li><strong>站点A</strong>：资源最全，更新最快，适合影视爱好者</li>
- <li><strong>站点B</strong>：音乐资源丰富，无损居多，音质发烧友首选</li>
- <li><strong>站点C</strong>：软件资源全面，更新及时，开发者必备</li>
- </ol>
-
- <p>具体的详细评测报告我会在后续回复中逐一介绍，欢迎大家讨论和补充！</p>
- `,
- views: 2856,
- replies: 147,
- likes: 89,
- tags: ['PT站点', '推荐', '对比'],
- pinned: true,
- hot: true,
- closed: false
- })
-
- const replies = ref([
- {
- id: 2,
- author: 'MovieLover88',
- authorTitle: '影视达人',
- authorPosts: 567,
- authorReputation: 1234,
- createTime: '2025-06-01T11:15:00',
- content: '感谢楼主的详细分析！特别期待站点A的详细评测，最近正在寻找好的影视资源站点。',
- likes: 12
- },
- {
- id: 3,
- author: 'TechGuru',
- authorTitle: '技术专家',
- authorPosts: 890,
- authorReputation: 2156,
- createTime: '2025-06-01T12:30:00',
- content: '站点C确实不错，软件资源很全面。不过楼主能不能也评测一下游戏类的PT站点？',
- likes: 8,
- quotedPost: {
- author: 'PTExpert',
- time: '2025-06-01T10:30:00',
- content: '站点C：软件资源全面，更新及时，开发者必备'
- }
- }
- ])
-
- const replyForm = reactive({
- content: ''
- })
-
- const replyRules = {
- content: [
- { required: true, message: '请输入回复内容', trigger: 'blur' },
- { min: 5, max: 5000, message: '内容长度在 5 到 5000 个字符', trigger: 'blur' }
- ]
- }
-
- onMounted(() => {
- const topicId = route.params.id
- fetchTopicDetail(topicId)
- })
-
- const fetchTopicDetail = async (id) => {
- try {
- console.log('获取主题详情:', id)
- totalReplies.value = 147
- } catch (error) {
- ElMessage.error('获取主题详情失败')
- router.back()
- }
- }
-
- const formatDateTime = (dateString) => {
- const date = new Date(dateString)
- return date.toLocaleString('zh-CN', {
- year: 'numeric',
- month: '2-digit',
- day: '2-digit',
- hour: '2-digit',
- minute: '2-digit'
- })
- }
-
- const formatContent = (content) => {
- return content.replace(/\n/g, '<br>')
- }
-
- const handleTopicAction = (command) => {
- switch (command) {
- case 'favorite':
- isFavorited.value = !isFavorited.value
- ElMessage.success(isFavorited.value ? '已收藏' : '已取消收藏')
- break
- case 'share':
- navigator.clipboard.writeText(window.location.href)
- ElMessage.success('链接已复制到剪贴板')
- break
- case 'report':
- reportPost(topic.value.id)
- break
- }
- }
-
- const likePost = (postId) => {
- if (postId === topic.value.id) {
- topic.value.likes = (topic.value.likes || 0) + 1
- } else {
- const reply = replies.value.find(r => r.id === postId)
- if (reply) {
- reply.likes = (reply.likes || 0) + 1
- }
- }
- ElMessage.success('点赞成功')
- }
-
- const quotePost = (post) => {
- quotedContent.value = {
- author: post.author,
- content: post.content.replace(/<[^>]*>/g, '').substring(0, 100) + '...',
- time: post.createTime
- }
- showReplyDialog.value = true
- }
-
- const reportPost = async (postId) => {
- try {
- await ElMessageBox.prompt('请说明举报原因', '举报内容', {
- confirmButtonText: '提交举报',
- cancelButtonText: '取消',
- inputType: 'textarea',
- inputPlaceholder: '请详细说明举报原因...'
- })
-
- ElMessage.success('举报已提交，我们会尽快处理')
- } catch {
- // 用户取消
- }
- }
-
- const clearQuote = () => {
- quotedContent.value = null
- }
-
- const handleCloseReplyDialog = () => {
- if (replyForm.content) {
- ElMessageBox.confirm(
- '确定要关闭吗？未保存的内容将会丢失。',
- '提示',
- {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning'
- }
- ).then(() => {
- resetReplyForm()
- showReplyDialog.value = false
- }).catch(() => {
- // 用户取消
- })
- } else {
- resetReplyForm()
- showReplyDialog.value = false
- }
- }
-
- const submitReply = async () => {
- try {
- await replyFormRef.value?.validate()
-
- submittingReply.value = true
-
- await new Promise(resolve => setTimeout(resolve, 1500))
-
- const newReply = {
- id: Date.now(),
- author: localStorage.getItem('username') || '用户',
- authorTitle: '会员',
- authorPosts: 0,
- authorReputation: 0,
- createTime: new Date().toISOString(),
- content: replyForm.content,
- likes: 0,
- quotedPost: quotedContent.value
- }
-
- replies.value.push(newReply)
- topic.value.replies += 1
-
- ElMessage.success('回复发表成功！')
- resetReplyForm()
- showReplyDialog.value = false
-
- } catch (error) {
- console.error('表单验证失败:', error)
- } finally {
- submittingReply.value = false
- }
- }
-
- const submitQuickReply = async () => {
- if (!quickReplyContent.value.trim()) {
- ElMessage.warning('请输入回复内容')
- return
- }
-
- submittingReply.value = true
- try {
- await new Promise(resolve => setTimeout(resolve, 1000))
-
- const newReply = {
- id: Date.now(),
- author: localStorage.getItem('username') || '用户',
- authorTitle: '会员',
- authorPosts: 0,
- authorReputation: 0,
- createTime: new Date().toISOString(),
- content: quickReplyContent.value,
- likes: 0
- }
-
- replies.value.push(newReply)
- topic.value.replies += 1
- quickReplyContent.value = ''
-
- ElMessage.success('回复发表成功！')
- } catch (error) {
- ElMessage.error('发表回复失败')
- } finally {
- submittingReply.value = false
- }
- }
-
- const clearQuickReply = () => {
- quickReplyContent.value = ''
- }
-
- const resetReplyForm = () => {
- replyFormRef.value?.resetFields()
- replyForm.content = ''
- quotedContent.value = null
- }
-
- const handleSizeChange = (size) => {
- pageSize.value = size
- currentPage.value = 1
- }
-
- const handleCurrentChange = (page) => {
- currentPage.value = page
- }
-
- return {
- showReplyDialog,
- submittingReply,
- isFavorited,
- currentPage,
- pageSize,
- totalReplies,
- quickReplyContent,
- quotedContent,
- topic,
- replies,
- replyForm,
- replyRules,
- replyFormRef,
- formatDateTime,
- formatContent,
- handleTopicAction,
- likePost,
- quotePost,
- reportPost,
- clearQuote,
- handleCloseReplyDialog,
- submitReply,
- submitQuickReply,
- clearQuickReply,
- handleSizeChange,
- handleCurrentChange,
- Edit,
- More,
- View,
- Comment,
- Like,
- ChatDotRound,
- Flag,
- ArrowDown
- }
- }
-}
-</script>
-
-<style lang="scss" scoped>
-.topic-detail-page {
- max-width: 1000px;
- margin: 0 auto;
- padding: 24px;
- background: #f5f5f5;
- min-height: 100vh;
-}
-
-.breadcrumb {
- margin-bottom: 16px;
-}
-
-.topic-header {
- background: #fff;
- border-radius: 12px;
- padding: 24px;
- margin-bottom: 24px;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
- gap: 24px;
-
- .topic-info {
- flex: 1;
-
- .topic-title-row {
- display: flex;
- align-items: center;
- gap: 12px;
- margin-bottom: 12px;
-
- .topic-title {
- font-size: 24px;
- font-weight: 600;
- color: #2c3e50;
- margin: 0;
- flex: 1;
- }
-
- .topic-status {
- .el-tag {
- margin-left: 8px;
- }
- }
- }
-
- .topic-tags {
- margin-bottom: 16px;
-
- .el-tag {
- margin-right: 8px;
- }
- }
-
- .topic-meta {
- display: flex;
- justify-content: space-between;
- align-items: center;
-
- .author-info {
- display: flex;
- align-items: center;
- gap: 12px;
-
- .author-details {
- .author-name {
- display: block;
- font-weight: 600;
- color: #2c3e50;
- font-size: 14px;
- }
-
- .post-time {
- display: block;
- font-size: 12px;
- color: #909399;
- }
- }
- }
-
- .topic-stats {
- display: flex;
- gap: 16px;
-
- .stat-item {
- display: flex;
- align-items: center;
- gap: 4px;
- font-size: 14px;
- color: #7f8c8d;
- }
- }
- }
- }
-
- .topic-actions {
- display: flex;
- gap: 12px;
- flex-shrink: 0;
- }
-}
-
-.posts-container {
- .post-item {
- background: #fff;
- border-radius: 12px;
- margin-bottom: 16px;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
- overflow: hidden;
-
- &.main-post {
- border-left: 4px solid #409eff;
- }
-
- .post-header {
- background: #f8f9fa;
- padding: 16px 24px;
- display: flex;
- align-items: center;
- gap: 16px;
- border-bottom: 1px solid #f0f0f0;
-
- .floor-number {
- background: #409eff;
- color: white;
- padding: 4px 8px;
- border-radius: 4px;
- font-size: 12px;
- font-weight: 600;
- min-width: 32px;
- text-align: center;
- }
-
- .post-author {
- display: flex;
- align-items: center;
- gap: 12px;
- flex: 1;
-
- .author-info {
- .author-name {
- display: block;
- font-weight: 600;
- color: #2c3e50;
- font-size: 14px;
- }
-
- .author-title {
- display: block;
- font-size: 12px;
- color: #67c23a;
- margin-bottom: 4px;
- }
-
- .author-stats {
- font-size: 11px;
- color: #909399;
-
- span {
- margin-right: 12px;
- }
- }
- }
- }
-
- .post-time {
- font-size: 12px;
- color: #909399;
- }
- }
-
- .post-content {
- padding: 24px;
-
- .quoted-content {
- background: #f5f7fa;
- border-left: 4px solid #e4e7ed;
- padding: 12px 16px;
- margin-bottom: 16px;
- border-radius: 0 4px 4px 0;
-
- .quote-header {
- display: flex;
- align-items: center;
- gap: 8px;
- font-size: 12px;
- color: #909399;
- margin-bottom: 8px;
- }
-
- .quote-text {
- font-size: 14px;
- color: #606266;
- line-height: 1.5;
- }
- }
-
- .content-text {
- line-height: 1.6;
- color: #2c3e50;
-
- :deep(h3) {
- color: #2c3e50;
- font-size: 18px;
- font-weight: 600;
- margin: 20px 0 12px 0;
- }
-
- :deep(p) {
- margin-bottom: 12px;
- }
-
- :deep(ul), :deep(ol) {
- margin: 12px 0;
- padding-left: 20px;
-
- li {
- margin-bottom: 8px;
- }
- }
- }
- }
-
- .post-actions {
- padding: 12px 24px;
- border-top: 1px solid #f0f0f0;
- background: #fafafa;
-
- .el-button {
- margin-right: 16px;
-
- .el-icon {
- margin-right: 4px;
- }
- }
- }
- }
-}
-
-.pagination-wrapper {
- text-align: center;
- margin: 24px 0;
-}
-
-.quick-reply {
- background: #fff;
- border-radius: 12px;
- padding: 24px;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-
- h3 {
- font-size: 18px;
- font-weight: 600;
- color: #2c3e50;
- margin: 0 0 16px 0;
- }
-
- .quick-reply-actions {
- margin-top: 12px;
- text-align: right;
-
- .el-button {
- margin-left: 12px;
- }
- }
-}
-
-.quoted-preview {
- background: #f5f7fa;
- border: 1px solid #e4e7ed;
- border-radius: 4px;
- padding: 12px;
-
- .quote-header {
- font-size: 12px;
- color: #909399;
- margin-bottom: 8px;
- }
-
- .quote-content {
- font-size: 14px;
- color: #606266;
- margin-bottom: 8px;
- line-height: 1.5;
- }
-}
-
-@media (max-width: 768px) {
- .topic-detail-page {
- padding: 16px;
- }
-
- .topic-header {
- flex-direction: column;
- align-items: flex-start;
-
- .topic-actions {
- width: 100%;
- justify-content: flex-end;
- }
- }
-
- .post-header {
- flex-direction: column;
- align-items: flex-start;
- gap: 12px;
-
- .floor-number {
- align-self: flex-start;
- }
- }
-
- .post-content {
- padding: 16px;
- }
-
- .post-actions {
- padding: 12px 16px;
-
- .el-button {
- margin-right: 8px;
- margin-bottom: 8px;
- }
- }
-}
+<template>
+ <div class="topic-detail-page">
+ <div class="page-container">
+ <!-- 面包屑导航 -->
+ <div class="breadcrumb">
+ <el-breadcrumb separator="/">
+ <el-breadcrumb-item :to="{ path: '/forum' }">论坛首页</el-breadcrumb-item>
+ <el-breadcrumb-item :to="{ path: `/forum/section/${topic.sectionId}` }">
+ {{ topic.sectionName }}
+ </el-breadcrumb-item>
+ <el-breadcrumb-item>{{ topic.title }}</el-breadcrumb-item>
+ </el-breadcrumb>
+ </div>
+
+ <!-- 主题信息 -->
+ <div class="topic-header">
+ <div class="topic-info">
+ <div class="topic-title-row">
+ <h1 class="topic-title">{{ topic.title }}</h1>
+ <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>
+ <el-tag v-if="topic.closed" type="info" size="small">已关闭</el-tag>
+ </div>
+ </div>
+
+ <div class="topic-tags">
+ <el-tag
+ v-for="tag in topic.tags"
+ :key="tag"
+ size="small"
+ type="info"
+ effect="plain"
+ >
+ {{ tag }}
+ </el-tag>
+ </div>
+
+ <div class="topic-meta">
+ <div class="author-info">
+ <el-avatar :size="32">{{ topic.author.charAt(0) }}</el-avatar>
+ <div class="author-details">
+ <span class="author-name">{{ topic.author }}</span>
+ <span class="post-time">发表于 {{ formatDateTime(topic.createTime) }}</span>
+ </div>
+ </div>
+
+ <div class="topic-stats">
+ <div class="stat-item">
+ <el-icon><View /></el-icon>
+ <span>{{ topic.views }} 浏览</span>
+ </div>
+ <div class="stat-item">
+ <el-icon><Comment /></el-icon>
+ <span>{{ topic.replies }} 回复</span>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="topic-actions">
+ <el-button
+ v-if="!topic.closed"
+ type="primary"
+ :icon="Edit"
+ @click="showReplyDialog = true"
+ >
+ 回复主题
+ </el-button>
+ <el-dropdown @command="handleTopicAction">
+ <el-button :icon="More">
+ 更多 <el-icon class="el-icon--right"><ArrowDown /></el-icon>
+ </el-button>
+ <template #dropdown>
+ <el-dropdown-menu>
+ <el-dropdown-item command="favorite">
+ {{ isFavorited ? '取消收藏' : '收藏主题' }}
+ </el-dropdown-item>
+ <el-dropdown-item command="share">分享主题</el-dropdown-item>
+ <el-dropdown-item command="report" divided>举报主题</el-dropdown-item>
+ </el-dropdown-menu>
+ </template>
+ </el-dropdown>
+ </div>
+ </div>
+
+ <!-- 主题内容和回复列表 -->
+ <div class="posts-container">
+ <!-- 主楼 -->
+ <div class="post-item main-post">
+ <div class="post-header">
+ <div class="floor-number">#1</div>
+ <div class="post-author">
+ <el-avatar :size="48">{{ topic.author.charAt(0) }}</el-avatar>
+ <div class="author-info">
+ <span class="author-name">{{ topic.author }}</span>
+ <span class="author-title">{{ topic.authorTitle || '会员' }}</span>
+ <div class="author-stats">
+ <span>帖子: {{ topic.authorPosts || 0 }}</span>
+ <span>声望: {{ topic.authorReputation || 0 }}</span>
+ </div>
+ </div>
+ </div>
+ <div class="post-time">
+ {{ formatDateTime(topic.createTime) }}
+ </div>
+ </div>
+
+ <div class="post-content">
+ <div class="content-text" v-html="formatContent(topic.content)"></div>
+ </div>
+
+ <div class="post-actions">
+ <el-button type="text" size="small" @click="likePost(topic.id)">
+ <el-icon><Like /></el-icon>
+ {{ topic.likes || 0 }}
+ </el-button>
+ <el-button type="text" size="small" @click="quotePost(topic)">
+ <el-icon><ChatDotRound /></el-icon>
+ 引用
+ </el-button>
+ <el-button type="text" size="small" @click="reportPost(topic.id)">
+ <el-icon><Flag /></el-icon>
+ 举报
+ </el-button>
+ </div>
+ </div>
+
+ <!-- 回复列表 -->
+ <div
+ v-for="(reply, index) in replies"
+ :key="reply.id"
+ class="post-item reply-post"
+ >
+ <div class="post-header">
+ <div class="floor-number">#{{ index + 2 }}</div>
+ <div class="post-author">
+ <el-avatar :size="48">{{ reply.author.charAt(0) }}</el-avatar>
+ <div class="author-info">
+ <span class="author-name">{{ reply.author }}</span>
+ <span class="author-title">{{ reply.authorTitle || '会员' }}</span>
+ <div class="author-stats">
+ <span>帖子: {{ reply.authorPosts || 0 }}</span>
+ <span>声望: {{ reply.authorReputation || 0 }}</span>
+ </div>
+ </div>
+ </div>
+ <div class="post-time">
+ {{ formatDateTime(reply.createTime) }}
+ </div>
+ </div>
+
+ <div class="post-content">
+ <div v-if="reply.quotedPost" class="quoted-content">
+ <div class="quote-header">
+ <el-icon><ChatDotRound /></el-icon>
+ <span>{{ reply.quotedPost.author }} 发表于 {{ formatDateTime(reply.quotedPost.time) }}</span>
+ </div>
+ <div class="quote-text">{{ reply.quotedPost.content }}</div>
+ </div>
+ <div class="content-text" v-html="formatContent(reply.content)"></div>
+ </div>
+
+ <div class="post-actions">
+ <el-button type="text" size="small" @click="likePost(reply.id)">
+ <el-icon><Like /></el-icon>
+ {{ reply.likes || 0 }}
+ </el-button>
+ <el-button type="text" size="small" @click="quotePost(reply)">
+ <el-icon><ChatDotRound /></el-icon>
+ 引用
+ </el-button>
+ <el-button type="text" size="small" @click="reportPost(reply.id)">
+ <el-icon><Flag /></el-icon>
+ 举报
+ </el-button>
+ </div>
+ </div>
+ </div>
+
+ <!-- 分页 -->
+ <div class="pagination-wrapper">
+ <el-pagination
+ v-model:current-page="currentPage"
+ v-model:page-size="pageSize"
+ :page-sizes="[10, 20, 50]"
+ :total="totalReplies"
+ layout="total, sizes, prev, pager, next, jumper"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
+
+ <!-- 快速回复 -->
+ <div v-if="!topic.closed" class="quick-reply">
+ <h3>快速回复</h3>
+ <el-input
+ v-model="quickReplyContent"
+ type="textarea"
+ :rows="4"
+ placeholder="输入你的回复..."
+ maxlength="2000"
+ show-word-limit
+ />
+ <div class="quick-reply-actions">
+ <el-button @click="clearQuickReply">清空</el-button>
+ <el-button type="primary" @click="submitQuickReply" :loading="submittingReply">
+ 发表回复
+ </el-button>
+ </div>
+ </div>
+ </div>
+
+ <!-- 回复对话框 -->
+ <el-dialog
+ v-model="showReplyDialog"
+ title="回复主题"
+ width="700px"
+ :before-close="handleCloseReplyDialog"
+ >
+ <el-form
+ ref="replyFormRef"
+ :model="replyForm"
+ :rules="replyRules"
+ label-width="80px"
+ >
+ <el-form-item v-if="quotedContent" label="引用内容">
+ <div class="quoted-preview">
+ <div class="quote-header">
+ <span>{{ quotedContent.author }}</span>
+ </div>
+ <div class="quote-content">{{ quotedContent.content }}</div>
+ <el-button type="text" size="small" @click="clearQuote">
+ 清除引用
+ </el-button>
+ </div>
+ </el-form-item>
+
+ <el-form-item label="回复内容" prop="content">
+ <el-input
+ v-model="replyForm.content"
+ type="textarea"
+ :rows="8"
+ placeholder="请输入回复内容..."
+ maxlength="5000"
+ show-word-limit
+ />
+ </el-form-item>
+ </el-form>
+
+ <template #footer>
+ <el-button @click="handleCloseReplyDialog">取消</el-button>
+ <el-button type="primary" @click="submitReply" :loading="submittingReply">
+ 发表回复
+ </el-button>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+import { ref, reactive, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import {
+ Edit,
+ More,
+ View,
+ Comment,
+ Like,
+ ChatDotRound,
+ Flag,
+ ArrowDown
+} from '@element-plus/icons-vue'
+
+export default {
+ name: 'ForumTopicView',
+ setup() {
+ const route = useRoute()
+ const router = useRouter()
+ const replyFormRef = ref(null)
+
+ const showReplyDialog = ref(false)
+ const submittingReply = ref(false)
+ const isFavorited = ref(false)
+ const currentPage = ref(1)
+ const pageSize = ref(20)
+ const totalReplies = ref(0)
+ const quickReplyContent = ref('')
+ const quotedContent = ref(null)
+
+ const topic = ref({
+ id: 1,
+ title: '2024年度最佳PT站点推荐与对比分析',
+ sectionId: 1,
+ sectionName: '站务讨论',
+ author: 'PTExpert',
+ authorTitle: '资深会员',
+ authorPosts: 1256,
+ authorReputation: 2890,
+ createTime: '2025-06-01T10:30:00',
+ content: `
+ <p>大家好，作为一个使用PT站点多年的老用户，我想和大家分享一下2024年各大PT站点的使用体验和对比分析。</p>
+
+ <h3>评测标准</h3>
+ <ul>
+ <li>资源丰富度：种子数量、更新速度、稀有资源</li>
+ <li>用户体验：界面设计、功能完善度、响应速度</li>
+ <li>社区氛围：用户活跃度、互帮互助程度</li>
+ <li>规则友好性：考核难度、分享率要求、保种要求</li>
+ </ul>
+
+ <h3>推荐站点</h3>
+ <p>经过综合评测，以下几个站点值得推荐：</p>
+ <ol>
+ <li><strong>站点A</strong>：资源最全，更新最快，适合影视爱好者</li>
+ <li><strong>站点B</strong>：音乐资源丰富，无损居多，音质发烧友首选</li>
+ <li><strong>站点C</strong>：软件资源全面，更新及时，开发者必备</li>
+ </ol>
+
+ <p>具体的详细评测报告我会在后续回复中逐一介绍，欢迎大家讨论和补充！</p>
+ `,
+ views: 2856,
+ replies: 147,
+ likes: 89,
+ tags: ['PT站点', '推荐', '对比'],
+ pinned: true,
+ hot: true,
+ closed: false
+ })
+
+ const replies = ref([
+ {
+ id: 2,
+ author: 'MovieLover88',
+ authorTitle: '影视达人',
+ authorPosts: 567,
+ authorReputation: 1234,
+ createTime: '2025-06-01T11:15:00',
+ content: '感谢楼主的详细分析！特别期待站点A的详细评测，最近正在寻找好的影视资源站点。',
+ likes: 12
+ },
+ {
+ id: 3,
+ author: 'TechGuru',
+ authorTitle: '技术专家',
+ authorPosts: 890,
+ authorReputation: 2156,
+ createTime: '2025-06-01T12:30:00',
+ content: '站点C确实不错，软件资源很全面。不过楼主能不能也评测一下游戏类的PT站点？',
+ likes: 8,
+ quotedPost: {
+ author: 'PTExpert',
+ time: '2025-06-01T10:30:00',
+ content: '站点C：软件资源全面，更新及时，开发者必备'
+ }
+ }
+ ])
+
+ const replyForm = reactive({
+ content: ''
+ })
+
+ const replyRules = {
+ content: [
+ { required: true, message: '请输入回复内容', trigger: 'blur' },
+ { min: 5, max: 5000, message: '内容长度在 5 到 5000 个字符', trigger: 'blur' }
+ ]
+ }
+
+ onMounted(() => {
+ const topicId = route.params.id
+ fetchTopicDetail(topicId)
+ })
+
+ const fetchTopicDetail = async (id) => {
+ try {
+ console.log('获取主题详情:', id)
+ totalReplies.value = 147
+ } catch (error) {
+ ElMessage.error('获取主题详情失败')
+ router.back()
+ }
+ }
+
+ const formatDateTime = (dateString) => {
+ const date = new Date(dateString)
+ return date.toLocaleString('zh-CN', {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit'
+ })
+ }
+
+ const formatContent = (content) => {
+ return content.replace(/\n/g, '<br>')
+ }
+
+ const handleTopicAction = (command) => {
+ switch (command) {
+ case 'favorite':
+ isFavorited.value = !isFavorited.value
+ ElMessage.success(isFavorited.value ? '已收藏' : '已取消收藏')
+ break
+ case 'share':
+ navigator.clipboard.writeText(window.location.href)
+ ElMessage.success('链接已复制到剪贴板')
+ break
+ case 'report':
+ reportPost(topic.value.id)
+ break
+ }
+ }
+
+ const likePost = (postId) => {
+ if (postId === topic.value.id) {
+ topic.value.likes = (topic.value.likes || 0) + 1
+ } else {
+ const reply = replies.value.find(r => r.id === postId)
+ if (reply) {
+ reply.likes = (reply.likes || 0) + 1
+ }
+ }
+ ElMessage.success('点赞成功')
+ }
+
+ const quotePost = (post) => {
+ quotedContent.value = {
+ author: post.author,
+ content: post.content.replace(/<[^>]*>/g, '').substring(0, 100) + '...',
+ time: post.createTime
+ }
+ showReplyDialog.value = true
+ }
+
+ const reportPost = async (postId) => {
+ try {
+ await ElMessageBox.prompt('请说明举报原因', '举报内容', {
+ confirmButtonText: '提交举报',
+ cancelButtonText: '取消',
+ inputType: 'textarea',
+ inputPlaceholder: '请详细说明举报原因...'
+ })
+
+ ElMessage.success('举报已提交，我们会尽快处理')
+ } catch {
+ // 用户取消
+ }
+ }
+
+ const clearQuote = () => {
+ quotedContent.value = null
+ }
+
+ const handleCloseReplyDialog = () => {
+ if (replyForm.content) {
+ ElMessageBox.confirm(
+ '确定要关闭吗？未保存的内容将会丢失。',
+ '提示',
+ {
+ confirmButtonText: '确定',
+ cancelButtonText: '取消',
+ type: 'warning'
+ }
+ ).then(() => {
+ resetReplyForm()
+ showReplyDialog.value = false
+ }).catch(() => {
+ // 用户取消
+ })
+ } else {
+ resetReplyForm()
+ showReplyDialog.value = false
+ }
+ }
+
+ const submitReply = async () => {
+ try {
+ await replyFormRef.value?.validate()
+
+ submittingReply.value = true
+
+ await new Promise(resolve => setTimeout(resolve, 1500))
+
+ const newReply = {
+ id: Date.now(),
+ author: localStorage.getItem('username') || '用户',
+ authorTitle: '会员',
+ authorPosts: 0,
+ authorReputation: 0,
+ createTime: new Date().toISOString(),
+ content: replyForm.content,
+ likes: 0,
+ quotedPost: quotedContent.value
+ }
+
+ replies.value.push(newReply)
+ topic.value.replies += 1
+
+ ElMessage.success('回复发表成功！')
+ resetReplyForm()
+ showReplyDialog.value = false
+
+ } catch (error) {
+ console.error('表单验证失败:', error)
+ } finally {
+ submittingReply.value = false
+ }
+ }
+
+ const submitQuickReply = async () => {
+ if (!quickReplyContent.value.trim()) {
+ ElMessage.warning('请输入回复内容')
+ return
+ }
+
+ submittingReply.value = true
+ try {
+ await new Promise(resolve => setTimeout(resolve, 1000))
+
+ const newReply = {
+ id: Date.now(),
+ author: localStorage.getItem('username') || '用户',
+ authorTitle: '会员',
+ authorPosts: 0,
+ authorReputation: 0,
+ createTime: new Date().toISOString(),
+ content: quickReplyContent.value,
+ likes: 0
+ }
+
+ replies.value.push(newReply)
+ topic.value.replies += 1
+ quickReplyContent.value = ''
+
+ ElMessage.success('回复发表成功！')
+ } catch (error) {
+ ElMessage.error('发表回复失败')
+ } finally {
+ submittingReply.value = false
+ }
+ }
+
+ const clearQuickReply = () => {
+ quickReplyContent.value = ''
+ }
+
+ const resetReplyForm = () => {
+ replyFormRef.value?.resetFields()
+ replyForm.content = ''
+ quotedContent.value = null
+ }
+
+ const handleSizeChange = (size) => {
+ pageSize.value = size
+ currentPage.value = 1
+ }
+
+ const handleCurrentChange = (page) => {
+ currentPage.value = page
+ }
+
+ return {
+ showReplyDialog,
+ submittingReply,
+ isFavorited,
+ currentPage,
+ pageSize,
+ totalReplies,
+ quickReplyContent,
+ quotedContent,
+ topic,
+ replies,
+ replyForm,
+ replyRules,
+ replyFormRef,
+ formatDateTime,
+ formatContent,
+ handleTopicAction,
+ likePost,
+ quotePost,
+ reportPost,
+ clearQuote,
+ handleCloseReplyDialog,
+ submitReply,
+ submitQuickReply,
+ clearQuickReply,
+ handleSizeChange,
+ handleCurrentChange,
+ Edit,
+ More,
+ View,
+ Comment,
+ Like,
+ ChatDotRound,
+ Flag,
+ ArrowDown
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.topic-detail-page {
+ max-width: 1000px;
+ margin: 0 auto;
+ padding: 24px;
+ background: #f5f5f5;
+ min-height: 100vh;
+}
+
+.breadcrumb {
+ margin-bottom: 16px;
+}
+
+.topic-header {
+ background: #fff;
+ border-radius: 12px;
+ padding: 24px;
+ margin-bottom: 24px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ gap: 24px;
+
+ .topic-info {
+ flex: 1;
+
+ .topic-title-row {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ margin-bottom: 12px;
+
+ .topic-title {
+ font-size: 24px;
+ font-weight: 600;
+ color: #2c3e50;
+ margin: 0;
+ flex: 1;
+ }
+
+ .topic-status {
+ .el-tag {
+ margin-left: 8px;
+ }
+ }
+ }
+
+ .topic-tags {
+ margin-bottom: 16px;
+
+ .el-tag {
+ margin-right: 8px;
+ }
+ }
+
+ .topic-meta {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .author-info {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+
+ .author-details {
+ .author-name {
+ display: block;
+ font-weight: 600;
+ color: #2c3e50;
+ font-size: 14px;
+ }
+
+ .post-time {
+ display: block;
+ font-size: 12px;
+ color: #909399;
+ }
+ }
+ }
+
+ .topic-stats {
+ display: flex;
+ gap: 16px;
+
+ .stat-item {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ font-size: 14px;
+ color: #7f8c8d;
+ }
+ }
+ }
+ }
+
+ .topic-actions {
+ display: flex;
+ gap: 12px;
+ flex-shrink: 0;
+ }
+}
+
+.posts-container {
+ .post-item {
+ background: #fff;
+ border-radius: 12px;
+ margin-bottom: 16px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+ overflow: hidden;
+
+ &.main-post {
+ border-left: 4px solid #409eff;
+ }
+
+ .post-header {
+ background: #f8f9fa;
+ padding: 16px 24px;
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ border-bottom: 1px solid #f0f0f0;
+
+ .floor-number {
+ background: #409eff;
+ color: white;
+ padding: 4px 8px;
+ border-radius: 4px;
+ font-size: 12px;
+ font-weight: 600;
+ min-width: 32px;
+ text-align: center;
+ }
+
+ .post-author {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ flex: 1;
+
+ .author-info {
+ .author-name {
+ display: block;
+ font-weight: 600;
+ color: #2c3e50;
+ font-size: 14px;
+ }
+
+ .author-title {
+ display: block;
+ font-size: 12px;
+ color: #67c23a;
+ margin-bottom: 4px;
+ }
+
+ .author-stats {
+ font-size: 11px;
+ color: #909399;
+
+ span {
+ margin-right: 12px;
+ }
+ }
+ }
+ }
+
+ .post-time {
+ font-size: 12px;
+ color: #909399;
+ }
+ }
+
+ .post-content {
+ padding: 24px;
+
+ .quoted-content {
+ background: #f5f7fa;
+ border-left: 4px solid #e4e7ed;
+ padding: 12px 16px;
+ margin-bottom: 16px;
+ border-radius: 0 4px 4px 0;
+
+ .quote-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 12px;
+ color: #909399;
+ margin-bottom: 8px;
+ }
+
+ .quote-text {
+ font-size: 14px;
+ color: #606266;
+ line-height: 1.5;
+ }
+ }
+
+ .content-text {
+ line-height: 1.6;
+ color: #2c3e50;
+
+ :deep(h3) {
+ color: #2c3e50;
+ font-size: 18px;
+ font-weight: 600;
+ margin: 20px 0 12px 0;
+ }
+
+ :deep(p) {
+ margin-bottom: 12px;
+ }
+
+ :deep(ul), :deep(ol) {
+ margin: 12px 0;
+ padding-left: 20px;
+
+ li {
+ margin-bottom: 8px;
+ }
+ }
+ }
+ }
+
+ .post-actions {
+ padding: 12px 24px;
+ border-top: 1px solid #f0f0f0;
+ background: #fafafa;
+
+ .el-button {
+ margin-right: 16px;
+
+ .el-icon {
+ margin-right: 4px;
+ }
+ }
+ }
+ }
+}
+
+.pagination-wrapper {
+ text-align: center;
+ margin: 24px 0;
+}
+
+.quick-reply {
+ background: #fff;
+ border-radius: 12px;
+ padding: 24px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+
+ h3 {
+ font-size: 18px;
+ font-weight: 600;
+ color: #2c3e50;
+ margin: 0 0 16px 0;
+ }
+
+ .quick-reply-actions {
+ margin-top: 12px;
+ text-align: right;
+
+ .el-button {
+ margin-left: 12px;
+ }
+ }
+}
+
+.quoted-preview {
+ background: #f5f7fa;
+ border: 1px solid #e4e7ed;
+ border-radius: 4px;
+ padding: 12px;
+
+ .quote-header {
+ font-size: 12px;
+ color: #909399;
+ margin-bottom: 8px;
+ }
+
+ .quote-content {
+ font-size: 14px;
+ color: #606266;
+ margin-bottom: 8px;
+ line-height: 1.5;
+ }
+}
+
+@media (max-width: 768px) {
+ .topic-detail-page {
+ padding: 16px;
+ }
+
+ .topic-header {
+ flex-direction: column;
+ align-items: flex-start;
+
+ .topic-actions {
+ width: 100%;
+ justify-content: flex-end;
+ }
+ }
+
+ .post-header {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+
+ .floor-number {
+ align-self: flex-start;
+ }
+ }
+
+ .post-content {
+ padding: 16px;
+ }
+
+ .post-actions {
+ padding: 12px 16px;
+
+ .el-button {
+ margin-right: 8px;
+ margin-bottom: 8px;
+ }
+ }
+}
</style>
\ No newline at end of file
diff --git a/src/views/forum/ForumView.vue b/src/views/forum/ForumView.vue
index e4fa0f9..22345e6 100644
--- a/src/views/forum/ForumView.vue
+++ b/src/views/forum/ForumView.vue
@@ -1,978 +1,978 @@
-<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;
- }
- }
+<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;
+ }
+ }
}
\ No newline at end of file