feat: 重构留言板功能并优化UI样式

重构留言板功能，移除嵌套留言Demo页面，优化留言数据结构。新增验证码功能防止垃圾留言，改进留言列表UI样式。添加留言回复功能，支持@用户显示。优化全局状态管理，增加localStorage持久化功能。

更新技术栈依赖，包括Element Plus图标和Undraw UI组件库。调整文章详情页布局，整合留言板到文章页。修复文章浏览量统计接口路径问题，统一使用viewCount字段。

优化移动端响应式布局，改进留言表单验证逻辑。新增留言相关文章显示功能，完善用户头像生成逻辑。调整首页文章卡片样式，增加阅读量、点赞数和评论数显示。

src/views/articlecontents.vue

@@ -5,19 +5,19 @@
       <el-skeleton :count="1" />
       <el-skeleton :count="3" />
     </div>
-    
+
     <!-- 错误状态 -->
     <div v-else-if="error" class="error-container">
       <el-alert :title="error" type="error" show-icon />
       <el-button type="primary" @click="fetchArticleDetail">重新加载</el-button>
     </div>
-    
+
     <!-- 文章详情 -->
     <div v-else-if="article && Object.keys(article).length > 0" class="article-wrapper">
       <!-- 文章头部 -->
       <div class="article-header">
         <h1 class="article-title">{{ article.title }}</h1>
-        
+
         <div class="article-meta">
           <span class="meta-item">
             <i class="el-icon-date"></i>
@@ -29,63 +29,55 @@
           </span>
           <span class="meta-item">
             <i class="el-icon-view"></i>
-            {{ article.views || 0 }} 阅读
+            {{ article.viewCount || 0 }} 阅读
           </span>
         </div>
       </div>
-      
+
       <!-- 文章内容 -->
       <div class="article-content">
         <div v-html="article.content"></div>
       </div>
-      
+
       <!-- 文章底部 -->
       <div class="article-footer">
         <div class="tag-list">
-          <span 
-            v-for="tag in article.tags || []" 
-            :key="tag" 
-            class="el-tag el-tag--primary"
-          >
+          <span v-for="tag in article.tags || []" :key="tag" class="el-tag el-tag--primary">
             {{ tag }}
           </span>
         </div>
-        
+
         <!-- 文章操作 -->
         <div class="article-actions">
-          <el-button 
-            type="primary" 
-            icon="el-icon-arrow-left" 
-            @click="goBack"
-            plain
-          >
+          <el-button type="primary" icon="el-icon-arrow-left" @click="goBack" plain>
             返回
           </el-button>
         </div>
       </div>
-      
       <!-- 相关文章 -->
       <div class="related-articles" v-if="relatedArticles.length > 0">
         <h3>相关文章</h3>
         <div class="related-articles-list">
-          <div 
-            v-for="item in relatedArticles" 
-            :key="item.id"
-            class="related-article-item"
-            @click="handleRelatedArticleClick(item.id)"
-          >
+          <div v-for="item in relatedArticles" :key="item.id" class="related-article-item"
+            @click="handleRelatedArticleClick(item.id)">
             <i class="el-icon-document"></i>
             <span>{{ item.title }}</span>
           </div>
         </div>
       </div>
     </div>
-    
+
     <!-- 空状态 -->
     <div v-else class="empty-container">
       <el-empty description="文章不存在" />
     </div>
+
+    <!-- 评论区 -->
+    <div>
+      <messageboard class="message-board" v-if="article && Object.keys(article).length > 0" v-model:comments="article.articleid" />
+    </div>
   </div>
+
 </template>
 
 <script setup lang="ts">
@@ -95,6 +87,7 @@ import { articleService } from '@/services'
 import { ElMessage } from 'element-plus'
 import type { Article } from '@/types'
 import { formatDate } from '@/utils/dateUtils'
+import messageboard from './messageboard.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -112,35 +105,35 @@ const fetchArticleDetail = async () => {
   try {
     loading.value = true
     error.value = ''
-    
+
     // 获取路由参数
     const articleId = route.query.url as string
     console.log('获取文章ID:', articleId)
     if (!articleId) {
       throw new Error('文章ID不存在')
     }
-    
+
     // 获取文章详情
     const res = await articleService.getArticleById(Number(articleId))
-    
+
     if (res.data) {
       article.value = res.data
-      
+
       // 增加文章浏览量
       try {
         await articleService.incrementArticleViews(Number(articleId))
         console.log('文章浏览量增加成功')
         // 更新前端显示的浏览量
-        if (article.value.views) {
-          article.value.views++
+        if (article.value.viewCount) {
+          article.value.viewCount++
         } else {
-          article.value.views = 1
+          article.value.viewCount = 1
         }
       } catch (err) {
         console.error('增加文章浏览量失败:', err)
         // 不阻止主流程
       }
-      
+
       // 获取相关文章（同属性下的其他文章）
       if (article.value.categoryId) {
         try {
@@ -168,7 +161,7 @@ const fetchArticleDetail = async () => {
     } else {
       throw new Error('文章不存在或已被删除')
     }
-    
+
     console.log('获取文章详情成功:', article.value)
   } catch (err) {
     error.value = err instanceof Error ? err.message : '获取文章详情失败，请稍后重试'
@@ -369,17 +362,18 @@ onMounted(() => {
   .article-wrapper {
     padding: 20px;
   }
-  
+
   .article-title {
     font-size: 1.6rem;
   }
-  
+
   .article-meta {
     flex-direction: column;
     align-items: flex-start;
     gap: 8px;
   }
 }
+
 /* 文章内容 */
 .article-content {
   font-size: 1.05rem;
@@ -464,13 +458,16 @@ onMounted(() => {
   border-radius: 12px;
   text-align: center;
 }
-
+/* 评论区 */
+.message-board {
+  margin-top: 32px;
+}
 /* 响应式设计 */
 @media (max-width: 768px) {
   #article-container {
     padding: 20px 0;
   }
-  
+
   .article-wrapper,
   .loading-container,
   .error-container,
@@ -478,16 +475,16 @@ onMounted(() => {
     padding: 20px;
     margin: 0 15px;
   }
-  
+
   .article-title {
     font-size: 1.5rem;
   }
-  
+
   .article-meta {
     gap: 15px;
     font-size: 0.9rem;
   }
-  
+
   .article-content {
     font-size: 1rem;
   }