feat: 回复评论 路由切换时刷新globalheader

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <GlobalHeader v-if="this.$route.path!=='/auth'"/>
+  <GlobalHeader v-if="this.$route.path!=='/auth'" ref="globalHeader"/>
   <router-view/>
   <GlobalFooter v-if="this.$route.path!=='/auth'"/>
 </template>
@@ -23,5 +23,10 @@ export default {
       return null;
     };
   },
+  watch:{
+    $route(to, from){
+      this.$refs.globalHeader.fetchMessages();
+    }
+  },
 };
 </script>

src/views/CoursePage/CourseDetail.vue

@@ -190,12 +190,14 @@
             </el-row>
             <el-divider/>
             <div class="comment">
-              <div v-for="comments in commentTree" :key="comments.id" class="comment-body">
+              <div v-for="(comments,index) in commentTree" :key="comments.id" class="comment-body">
                 <div class="comment-main">
                   <el-row>
                     <div
                       style="color: white;background: #619dc9;border-radius: 50%;padding: 10px;width: 20px;height: 20px;display: flex;justify-content: center;align-items: center; margin: 10px 10px 0 0">
-                      <span style="color: white; font-weight: bold;font-size: 24px;">{{ comments.mainMessage.sender.name.substring(0, 1) }}</span>
+                      <span style="color: white; font-weight: bold;font-size: 24px;">{{
+                          comments.mainMessage.sender.name.substring(0, 1)
+                        }}</span>
                     </div>
                     <div>
                       <el-row style="font-weight: bold;">
@@ -205,7 +207,8 @@
                         {{ comments.mainMessage.createdAt.substring(0, 16).replace("T", " ") }}
                       </el-row>
                       <el-row>
-                        {{ comments.mainMessage.content }}<span @click="handleReplyClick(comments.mainMessage)" class="reply-button">回复</span>
+                        {{ comments.mainMessage.content }}<span @click="handleReplyClick(comments.mainMessage)"
+                                                                class="reply-button">回复</span>
                       </el-row>
                     </div>
                   </el-row>
@@ -214,7 +217,9 @@
                   <el-row>
                     <div
                       style="color: white;background: #619dc9;border-radius: 50%;padding: 10px;width: 20px;height: 20px;display: flex;justify-content: center;align-items: center; margin: 10px 10px 0 0">
-                      <span style="color: white; font-weight: bold;font-size: 24px;">{{ child.sender.name.substring(0, 1) }}</span>
+                      <span style="color: white; font-weight: bold;font-size: 24px;">{{
+                          child.sender.name.substring(0, 1)
+                        }}</span>
                     </div>
                     <div>
                       <el-row style="font-weight: bold; margin-bottom: 6px">
@@ -224,8 +229,10 @@
                         {{ child.createdAt.substring(0, 16).replace("T", " ") }}
                       </el-row>
                       <el-row>
-                        <span style="color: black;">{{ child.targetId === null ? "" : `@${comments.children[child.targetId].sender.name}: ` }}</span>{{ child.content }}<span
-                        @click="handleReplyClick(child)" class="reply-button">回复</span>
+                        <span style="color: black;">{{
+                            child.targetId === null ? "" : `@${comments.children[child.targetId].sender.name}: `
+                          }}</span>{{ child.content }}<span
+                        @click="handleReplyClick(child,index)" class="reply-button">回复</span>
                       </el-row>
                     </div>
                   </el-row>
@@ -267,7 +274,7 @@
 <script>
 import NoticeItem from "./components/NoticeItem";
 import FileEntry from "./components/FileEntry";
-import { ElMessageBox, ElMessage } from "element-plus";
+import {ElMessageBox, ElMessage} from "element-plus";
 import variables from "@/utils/variables";
 
 export default {
@@ -323,11 +330,11 @@ export default {
         color: "",
       },
       noticeTypeMap: {
-        announce: { type: "公告", title: "发布公告", color: themeColor.orange },
-        homework: { type: "作业", title: "发布作业", color: themeColor.blue },
-        exam: { type: "考试", title: "发布考试", color: themeColor.red },
+        announce: {type: "公告", title: "发布公告", color: themeColor.orange},
+        homework: {type: "作业", title: "发布作业", color: themeColor.blue},
+        exam: {type: "考试", title: "发布考试", color: themeColor.red},
       },
-      newNoticeInfo: { noticeDescription: "", priority: "1", fileList: [] },
+      newNoticeInfo: {noticeDescription: "", priority: "1", fileList: []},
       postNoticeInfo: {},
       fileEntryList: [{
         id: 1,
@@ -547,7 +554,7 @@ export default {
 
       function createAnnouncement() {
         let announcementVO = {
-          sender: { id: _this.$store.state.user.id, },
+          sender: {id: _this.$store.state.user.id,},
           courseId: _this.courseInfo.id,
           title: _this.announcementForm.title,
           content: _this.announcementForm.content,
@@ -635,7 +642,7 @@ export default {
         confirmButtonText: "立即选课",
         cancelButtonText: "我再想想",
       })
-        .then(({ value }) => {
+        .then(({value}) => {
           if (value !== this.courseInfo.invitationCode) {
             ElMessage.error("选课码错误");
           } else {
@@ -727,13 +734,38 @@ export default {
           createdAt: new Date(),
         })
           .then(res => {
-            this.commentTree.push({ mainMessage: res.data.data, children: [] });
+            this.commentTree.push({mainMessage: res.data.data, children: []});
             this.commentContent = "";
           });
       }
     },
-    handleReplyClick(target) {
-      alert(target);
+    handleReplyClick(target, index) {
+      ElMessageBox.prompt("请输入评论内容", "回复", {
+        confirmButtonText: "OK",
+        cancelButtonText: "Cancel",
+      })
+        .then(({value}) => {
+          if (value === "") {
+            ElMessage.error("无法发表空评论");
+          } else {
+            this.$apis.createMessage({
+              sender: {
+                id: this.$store.state.user.id,
+              },
+              actionType: "COMMENT",
+              targetType: "COMMENT",
+              targetId: target.id,
+              mntId: target.targetType === "COURSE" ? target.id : target.mntId,
+              content: value,
+              createdAt: new Date(),
+            })
+              .then(res => {
+                const msg = res.data.data;
+                this.commentTree[index].children[msg.id] = msg;
+                this.commentContent = "";
+              });
+          }
+        });
     },
   },
 };

src/views/CoursePage/components/NoticeItem.vue

@@ -120,12 +120,12 @@ export default {
 .mode {
   position: relative;
   border-radius: 18px;
-  border: v-bind(color) 2px solid;
+  /*border: v-bind(color) 2px solid;*/
   box-sizing: border-box;
   padding: 2px 4px;
   color: v-bind(color);
   margin-right: 16px;
-  font-size: 14px;
+  font-size: 18px;
 }
 
 .avatar {