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

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

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

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

src/views/home.vue

@@ -13,17 +13,17 @@
         class="article-card"
         v-for="item in datas"
         :key="item.articleid"
-        @click="handleArticleClick(item.articleid)"
+        @click="handleArticleClick(item)"
       >
         <h2 class="article-title">{{ item.title }}</h2>
-        <div class="article-meta">
-          <!-- <span class="article-date">{{ formatDateDisplay(item.publishedAt || item.createTime) }}</span> -->
-          <span v-if="item.categoryName" class="article-category">{{ item.categoryName }}</span>
-          <span v-if="item.viewCount" class="article-views">{{ item.views }} 阅读</span>
-          <!-- <span v-if="item.content" class="article-comments">{{ item.commentCount }} 评论</span> -->
-        </div>
         <div v-if="item.mg" class="article-tag">mg</div>
         <p class="article-preview">{{ formatContentPreview(item.content, 150) }}</p>
+        <div class="article-meta">
+          <span class="article-date">{{ formatDateDisplay(item.createdAt || item.createTime) }}</span>
+          <span v-if="item.viewCount" class="article-views">{{ item.viewCount }} 阅读</span>
+          <span v-if="item.likes" class="article-likes">{{ item.likes }} 点赞</span>
+          <span v-if="item.messageCount" class="article-comments">{{ item.messageCount }} 评论</span>
+        </div>
       </div>
     </transition-group>
     
@@ -41,8 +41,8 @@ import { articleService } from '@/services'
 import { formatDate, formatRelativeTime } from '@/utils/dateUtils'
 import { formatContentPreview } from '@/utils/stringUtils'
 import { ElMessage } from 'element-plus'
+import { messageService } from '@/services'
 import { useGlobalStore } from '@/store/globalStore'
-
 const globalStore = useGlobalStore()
 // 路由实例
 const router = useRouter()
@@ -81,11 +81,23 @@ const fetchArticles = async () => {
       console.log('获取所有文章列表')
       res = await articleService.getAllArticles()
     }
-    
+    // 获取每个文章的留言数量
+    for (const item of res.data) {
+      try {
+        const msgRes = await messageService.getMessagesByArticleId(item.articleid)
+        if (msgRes && msgRes.data) {
+          item.messageCount = msgRes.data.length
+        } else {
+          item.messageCount = 0
+        }
+      } catch (err) {
+        console.error(`获取文章${item.articleid}留言数量失败:`, err)
+        item.messageCount = 0
+      }
+    }
     // 修复：使用正确的属性名data而不是date
-    console.log('获取文章列表成功:', res.data)
+    console.log(res.data)
     datas.value = res.data || []
-    console.log('文章数据已赋值:', datas.value)
   } catch (error) {
     console.error('获取文章列表失败:', error)
     ElMessage.error('获取文章列表失败，请稍后重试')
@@ -101,9 +113,13 @@ const fetchArticles = async () => {
  */
 const handleArticleClick = (article) => {
   console.log('文章点击:', article)
+  globalStore.setValue('articlebutn', {
+    id: article.articleid,
+    name: article.title || '未命名文章',
+  })
     router.push({
       path: '/article/:url',
-      query: { url: article }
+      query: { url: article.articleid }
     })
 }
 
@@ -114,7 +130,6 @@ const handleArticleClick = (article) => {
  */
 const formatDateDisplay = (dateString) => {
   if (!dateString) return ''
-  
   try {
     // 如果是今天或昨天的文章，显示相对时间
     const date = new Date(dateString)