完成评论之间回复

my-project-backend/src/main/java/com/example/entity/vo/response/CommentVO.java

@@ -14,7 +14,7 @@ public class CommentVO {
 
     @Data
     public static class User {
-        Integer uid;
+        Integer id;
         String username;
         String avatar;
         boolean gender;

my-project-backend/src/main/java/com/example/service/impl/TopicServiceImpl.java

@@ -180,11 +180,16 @@ public class TopicServiceImpl extends ServiceImpl<TopicMapper, Topic> implements
             CommentVO vo = new CommentVO();
             BeanUtils.copyProperties(dto, vo);
             if(dto.getQuote() > 0) {
-                JSONObject object = JSONObject.parseObject(commentMapper.selectOne(Wrappers.<TopicComment>query()
+                TopicComment comment = commentMapper.selectOne(Wrappers.<TopicComment>query()
-                        .eq("id", dto.getQuote())).getContent());
+                        .eq("id", dto.getQuote()));
+                if(comment != null) {
+                    JSONObject object = JSONObject.parseObject(comment.getContent());
                     StringBuilder text = new StringBuilder();
                     this.shortContent(object.getJSONArray("ops"), text, ignore -> {});
                     vo.setQuote(text.toString());
+                } else {
+                    vo.setQuote("此评论已删除");
+                }
             }
             CommentVO.User user = new CommentVO.User();
             this.fillUserDetailsByPrivacy(user, dto.getUid());

my-project-frontend/src/components/TopicCommentEditor.vue

@@ -6,7 +6,7 @@ import {ref} from "vue";
 import {ElMessage} from "element-plus";
 
 const props = defineProps({
-    quote: Number,
+    quote: Object,
     show: Boolean,
     tid: String
 })
@@ -22,18 +22,28 @@ function submitComment() {
     post('/api/forum/add-comment', {
         tid: props.tid,
         content: JSON.stringify(content.value),
-        quote: props.quote
+        quote: props.quote == null ? -1 : props.quote.id
     }, () => {
         ElMessage.success('评论成功')
         emit('comment')
     })
 }
+
+function deltaToSimpleText(delta) {
+    let str = ''
+    for (let op of JSON.parse(delta).ops) {
+        str += op.insert
+    }
+    if(str.length > 35) str = str.substring(0, 35) + "..."
+    return str
+}
 </script>
 
 <template>
     <div>
         <el-drawer :model-value="show"
-                   title="发表回复" @open="init"
+                   :title="quote ? `发表对评论: ${deltaToSimpleText(quote.content)} 的回复` : '发表帖子回复'"
+                   @open="init"
                    :size="270" direction="btt"
                    @close="emit('close')"
                    :show-close="false">

my-project-frontend/src/views/forum/TopicDetail.vue

@@ -3,7 +3,7 @@ import {useRoute} from "vue-router";
 import {get, post} from "@/net";
 import {computed, reactive, ref} from "vue";
 import axios from "axios";
-import {ArrowLeft, CircleCheck, EditPen, Female, Male, Plus, Star} from "@element-plus/icons-vue";
+import {ArrowLeft, ChatSquare, CircleCheck, Delete, EditPen, Female, Male, Plus, Star} from "@element-plus/icons-vue";
 import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html';
 import {useStore} from "@/store";
 import Card from "@/components/Card.vue";
@@ -30,7 +30,7 @@ const edit = ref(false)
 const comment = reactive({
     show: false,
     text: '',
-    quote: -1
+    quote: null
 })
 
 function init() {
@@ -164,11 +164,20 @@ function loadComments(page){
                             <div class="desc">手机号: {{item.user.phone}}</div>
                         </div>
                     </div>
-                    <div class="topic-main-right">
+                    <div class="topic-main-right" style="display: flex;flex-direction: column">
                         <div style="font-size: 13px;color: grey">
                             <div>评论时间: {{new Date(item.time).toLocaleString()}}</div>
                         </div>
-                        <div class="topic-content" v-html="convertToHtml(item.content)"></div>
+                        <div v-if="item.quote" class="comment-quote">
+                            回复: {{item.quote}}
+                        </div>
+                        <div class="topic-content" style="flex: 1" v-html="convertToHtml(item.content)"></div>
+                        <div style="text-align: right">
+                            <el-link :icon="ChatSquare" @click="comment.show = true;comment.quote = item"
+                                     type="info">&nbsp;回复评论</el-link>
+                            <el-link :icon="Delete" type="danger" v-if="item.user.id === store.user.id"
+                                     style="margin-left: 20px">&nbsp;删除评论</el-link>
+                        </div>
                     </div>
                 </div>
                 <div style="width: fit-content;margin: 20px auto">
@@ -193,6 +202,15 @@ function loadComments(page){
 </template>
 
 <style scoped>
+.comment-quote {
+    font-size: 13px;
+    color: grey;
+    background-color: rgba(94, 94, 94, 0.2);
+    padding: 10px;
+    margin-top: 10px;
+    border-radius: 5px;
+}
+
 .add-comment {
     position: fixed;
     bottom: 20px;