feat: 回复增加标题

src/modules/viewer/components/work/chapterWorkCommentAndReply.vue

@@ -5,11 +5,19 @@
         <div v-html="data.comment"></div>
       </show-more>
     </div>
-    <div class="chapter-work-comment-and-reply" v-for="reply in data.details">
+    <div class="chapter-work-comment-and-reply-list">
+      <div
+        class="chapter-work-comment-and-reply"
+        :class="{ 'is-mine': studentId === reply.student_id, 'is-other': studentId !== reply.student_id }"
+        v-for="reply in data.details"
+      >
+        <p class="chapter-work-comment-and-reply-title" v-if="studentId === reply.student_id">我的回复：</p>
+        <p class="chapter-work-comment-and-reply-title" v-else>{{ title }}的回复：</p>
         <show-more :key="reply.id">
           <div v-html="reply.comment"></div>
         </show-more>
       </div>
+    </div>
     <div class="chapter-work-comment-and-reply-tools">
       <el-button size="small" @click="showComment = !showComment">评论</el-button>
       <template v-if="showComment">
@@ -29,7 +37,11 @@ import * as api from '../../api'
 
 export default {
   name: 'ChapterWorkCommentAndReply',
-  props: { data: { type: Object, default: () => ({}) }, showFirst: { type: Boolean, default: true } },
+  props: {
+    data: { type: Object, default: () => ({}) },
+    showFirst: { type: Boolean, default: true },
+    title: { type: String, default: '' }
+  },
   emits: ['update'],
   components: { VEditor, showMore },
   data() {
@@ -38,6 +50,11 @@ export default {
       comment: ''
     }
   },
+  computed: {
+    studentId() {
+      return window.G.UserInfo?.student_info?.id
+    }
+  },
   methods: {
     handleSubmit() {
       api.addChapterHomeworkCommentReply({ comment_id: this.data.id, comment: this.comment }).then((response) => {
@@ -63,6 +80,11 @@ export default {
     max-width: 100%;
   }
 }
+.chapter-work-comment-and-reply-title {
+  font-size: 14px;
+  margin-bottom: 10px;
+  color: #333;
+}
 .chapter-work-comment-and-reply-tools {
   display: flex;
   flex-direction: column;

src/modules/viewer/components/work/chapterWorkCommentItem.vue

 <template>
   <div>
-    <chapter-work-answer-item :data="data" :key="data.id" v-bind="$attrs">
+    <chapter-work-answer-item :data="data" :index="index" :key="data.id" v-bind="$attrs">
       <h3 class="comment-title">{{ $t('viewerWork.commentMyTitle') }}</h3>
       <v-editor v-model="data.comment" :disabled="disabled"></v-editor>
     </chapter-work-answer-item>
-    <chapter-work-comment-and-reply :data="data" v-on="$listeners" :show-first="false" />
+    <chapter-work-comment-and-reply :data="data" v-on="$listeners" :show-first="false" :title="nickname" />
   </div>
 </template>
 
@@ -15,10 +15,16 @@ import VEditor from '@/components/tinymce'
 import chapterWorkCommentAndReply from './chapterWorkCommentAndReply.vue'
 
 export default {
-  props: { data: { type: Object, default: () => ({}) }, disabled: { type: Boolean } },
+  props: { data: { type: Object, default: () => ({}) }, disabled: { type: Boolean }, index: { type: Number } },
   components: { ChapterWorkAnswerItem, VEditor, chapterWorkCommentAndReply },
   data() {
     return {}
+  },
+  computed: {
+    nickname() {
+      const name = this.data.personal_name
+      return name ? name + this.$t('viewerWork.student') : this.$t('viewerWork.student') + (this.index + 1)
+    }
   }
 }
 </script>

src/modules/viewer/components/work/chapterWorkCommentToMe.vue

@@ -4,7 +4,12 @@
       <div class="module-item" :key="index">
         <div class="module-item-hd">{{ $t('viewerWork.comment') }}{{ index + 1 }}:</div>
         <div class="module-item-bd">
-          <chapter-work-comment-and-reply :data="item" :key="item.id" @update="getList" />
+          <chapter-work-comment-and-reply
+            :data="item"
+            :title="$t('viewerWork.comment') + (index + 1)"
+            :key="item.id"
+            @update="getList"
+          />
         </div>
       </div>
     </template>