feat: 实现文章搜索功能并优化留言系统

- 添加文章标题搜索功能，支持通过路由参数搜索
- 重构留言板组件，优化留言嵌套结构和交互
- 新增评论演示页面展示嵌套留言功能
- 调整主布局样式和导航菜单路由
- 修复留言板样式问题和数据字段不一致问题

src/views/messageboard.vue

@@ -67,9 +67,9 @@
                                 <span class="article-title">{{ articleGroup.articleTitle }}</span>
                             </div>
                             <div class="article-message-content">
-                                <div v-for="mainMsg in articleGroup.messages" :key="mainMsg.id" class="message-tree">
+                                <div v-for="mainMsg in articleGroup.messages" :key="mainMsg.messageid" class="message-tree">
                                     <!-- 主留言 -->
-                                    <div class="message-item" @mouseenter="hoverId = mainMsg.id"
+                                    <div class="message-item" @mouseenter="hoverId = mainMsg.messageid"
                                         @mouseleave="hoverId = null">
                                         <div class="message-avatar-container">
                                             <img :src="getAvatar(mainMsg.email)" alt="头像" class="message-avatar" />
@@ -84,13 +84,13 @@
                                             <!-- 回复按钮 -->
                                             <div class="message-item-bottom">
                                                 <button class="reply-btn" @click="handleReply(mainMsg)"
-                                                    :class="{ visible: hoverId === mainMsg.id }">
+                                                    :class="{ visible: hoverId === mainMsg.messageid }">
                                                     回复
                                                 </button>
                                             </div>
                                             <!-- 回复列表 -->
                                             <div v-if="mainMsg.replies && mainMsg.replies.length" class="replies">
-                                                <div v-for="reply in mainMsg.replies" :key="reply.id"
+                                                <div v-for="reply in mainMsg.replies" :key="reply.messageid"
                                                     class="reply-item">
                                                     <div class="message-avatar-container">
                                                         <img :src="getAvatar(reply.email)" alt="头像"
@@ -257,11 +257,11 @@ const fetchMessages = async () => {
 // 处理回复
 const handleReply = (msg) => {
     replyingTo.value = {
-        id: msg.id,
+        id: msg.messageid,
         nickname: msg.nickname || '匿名用户',
         content: msg.content
     }
-    form.replyid = msg.id
+    form.parentid = msg.messageid
     form.content = `@${replyingTo.value.nickname} `
     // 滚动到输入框
     setTimeout(() => {
@@ -282,11 +282,10 @@ onMounted(() => {
 })
 
 const form = reactive({
-    replyid: null,
+    parentid: null,
     content: '',
     nickname: '',
     email: '',
-    captcha: ''
 })
 
 const onSubmit = async () => {
@@ -358,7 +357,6 @@ const post_comment_reply_cancel = () => {
 .message-board {
     max-width: 1000px;
     margin: 0 auto;
-    padding: 20px;
 }
 
 .message-list {
@@ -580,10 +578,6 @@ const post_comment_reply_cancel = () => {
     }
 }
 
-.message-board {
-    padding: 24px 0;
-}
-
 .message-list {
     margin-bottom: 24px;
     background: #f8fafd;