From 73c334494fedcd394153421a2d6cdd512dd61fe7 Mon Sep 17 00:00:00 2001
From: tone <3341154833@qq.com>
Date: Sun, 1 Sep 2024 15:47:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=9A=E5=AE=A2=E8=AF=84=E8=AE=BA=E5=90=8E?=
 =?UTF-8?q?=E9=87=8D=E5=8A=A0=E8=BD=BD=E8=AF=84=E8=AE=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tonecn/src/components/Blog/BlogComment.vue        | 10 +++++++++-
 tonecn/src/components/Blog/BlogContentToolBar.vue |  4 +++-
 tonecn/src/views/BlogContent.vue                  |  7 ++++---
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/tonecn/src/components/Blog/BlogComment.vue b/tonecn/src/components/Blog/BlogComment.vue
index 93f94ee..c54bbc0 100644
--- a/tonecn/src/components/Blog/BlogComment.vue
+++ b/tonecn/src/components/Blog/BlogComment.vue
@@ -1,8 +1,9 @@
 <script setup>
 import { request } from '@/lib/request';
-import { computed, onMounted, reactive, ref } from 'vue';
+import { computed, onMounted, reactive, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { timestampToString } from '@/lib/timestampToString';
+const model = defineModel();
 const route = useRoute()
 const bloguuid = route.params.uuid;
 const blogCommentList = reactive([]);
@@ -26,6 +27,7 @@ const loadComment = async () => {
     try {
         let commentRes = await request.get(`/blogComment?bloguuid=${bloguuid}`);
         if (commentRes.code == 0) {
+            blogCommentList.splice(0, blogCommentList.length);
             blogCommentList.push(...commentRes.data);
             loadStatus.value = 1;
         } else {
@@ -36,6 +38,12 @@ const loadComment = async () => {
         loadStatus.value = -1;
     }
 }
+
+watch(model, (newValue, oldValue) => {
+    if (newValue) {
+        loadComment();
+    }
+})
 </script>
 <template>
     <el-divider></el-divider>
diff --git a/tonecn/src/components/Blog/BlogContentToolBar.vue b/tonecn/src/components/Blog/BlogContentToolBar.vue
index b794e0c..c4d299b 100644
--- a/tonecn/src/components/Blog/BlogContentToolBar.vue
+++ b/tonecn/src/components/Blog/BlogContentToolBar.vue
@@ -1,12 +1,13 @@
 <script setup>
 import { Star, Edit, StarFilled } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus';
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, defineEmits } from 'vue';
 import { useRoute } from 'vue-router';
 import { request } from '@/lib/request';
 import RotationVerification from '../Common/RotationVerification.vue';
 const route = useRoute()
 const bloguuid = route.params.uuid;
+const emit = defineEmits(['comment-success'])
 const inputComment = ref('')
 let inputCommentName = '';
 const toolBarVisible = ref(true);
@@ -71,6 +72,7 @@ const submitComment = async () => {
             name: inputCommentName.trim() == '' ? '匿名' : inputCommentName.trim()
         })
         if (commentRes.code == 0) {
+            emit('comment-success');
             return ElMessage.success('评论成功～');
         } else {
             throw new Error(commentRes.message);
diff --git a/tonecn/src/views/BlogContent.vue b/tonecn/src/views/BlogContent.vue
index 0c346d6..19e9135 100644
--- a/tonecn/src/views/BlogContent.vue
+++ b/tonecn/src/views/BlogContent.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { request } from '@/lib/request';
-import { onMounted, reactive, ref, nextTick } from 'vue';
+import { onMounted, ref } from 'vue';
 import { timestampToString } from '../lib/timestampToString'
 import { useRoute } from 'vue-router'
 import { Marked } from 'marked';
@@ -14,6 +14,7 @@ const loadStatus = ref(0);// 0加载中 -1加载失败 -2文章不存在或不
 const route = useRoute();
 const blogContent = ref('');
 const blogInfo = ref({});
+const blogCommentReload = ref(false);
 
 const marked = new Marked(
     markedHighlight({
@@ -66,9 +67,9 @@ onMounted(async () => {
             <div v-html="blogContent" id="blogContentContainer"></div>
         </div>
 
-        <BlogComment v-if="loadStatus == 1" />
+        <BlogComment v-if="loadStatus == 1" v-model="blogCommentReload"/>
     </div>
-    <BlogContentToolBar />
+    <BlogContentToolBar @comment-success="blogCommentReload = true;"/>
 </template>
 <style scoped>
 .bcc {