优化注释功能

src/views/book/courseware/create/components/base/common/CorrectPinyin.vue

@@ -10,7 +10,7 @@
     <span class="tone-pinyin">{{ tonePinyin }}</span>
     <span class="content-text">{{ selectContent }}</span>
     <el-input v-model="numberPinyin" autocomplete="off" placeholder="请输入正确的拼音" @blur="convertTonePinyin" />
-    <span class="tips">一到四声分别用数字1-4表示，轻声用0表示。</span>
+    <span class="tips">一到四声分别用数字1-4表示，轻声用0表示,拼音间用空格隔开。</span>
     <template slot="footer">
       <el-button size="medium" @click="dialogClose">取消</el-button>
       <el-button type="primary" size="medium" @click="confirm">保存</el-button>

src/views/book/courseware/create/components/base/rich_text/RichText.vue

@@ -142,7 +142,6 @@ export default {
     },
     // 打开弹窗，接收子组件的值 { visible: true, noteId: start.id }
     viewExplanatoryNote(val) {
-      debugger;
       this.isViewExplanatoryNoteDialog = val.visible;
       let id = val.noteId;
       if (this.data.note_list.some((p) => p.id === id)) {

src/views/book/courseware/preview/components/rich_text/RichTextPreview.vue

@@ -3,19 +3,19 @@
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
 
     <div class="main">
-      <div :style="{ width: data.note_list.length > 0 ? '' : '100%' }">
+      <div ref="leftDiv" :style="{ width: data.note_list.length > 0 ? '' : '100%' }">
         <PinyinText
           v-if="isEnable(data.property.view_pinyin)"
           :paragraph-list="data.paragraph_list"
           :pinyin-position="data.property.pinyin_position"
           :is-preview="isPreview"
         />
-        <span v-else class="rich-text" v-html="sanitizeHTML(data.content)" @click="handleRichFillClick"></span>
+        <span v-else class="rich-text" @click="handleRichFillClick" v-html="sanitizeHTML(data.content)"></span>
       </div>
-      <div v-if="data.note_list.length > 0" class="note-list">
+      <div v-if="data.note_list.length > 0" ref="rightDiv" class="note-list" :style="{ height: divHeight + 'px' }">
         <span>注释</span>
         <ul>
-          <li v-for="note in data.note_list" :key="note.id">
+          <li v-for="note in data.note_list" :key="note.id" :ref="note.id">
             <p :style="{ 'background-color': selectedNoteId == note.id ? '#FFF2C9' : '#CCC' }">
               {{ note.selectText }}
             </p>
@@ -43,8 +43,19 @@ export default {
       data: getRichTextData(),
       selectedNoteId: '',
       isPreview: true,
+      divHeight: 'auto',
+      observer: null,
     };
   },
+  mounted() {
+    this.observer = new ResizeObserver(() => {
+      this.updateHeight();
+    });
+    this.observer.observe(this.$refs.leftDiv.closest('.describe-preview'));
+  },
+  beforeDestroy() {
+    this.observer.disconnect();
+  },
   methods: {
     handleRichFillClick(event) {
       // 检查点击的元素是否是 rich-fill 或者其子元素
@@ -52,11 +63,34 @@ export default {
       if (richFillElement) {
         // 处理点击事件
         this.selectedNoteId = richFillElement.dataset.annotationId;
-        // 这里可以添加你的业务逻辑
+
+        const sectionRef = this.$refs[`${this.selectedNoteId}`][0];
+        const rightDiv = this.$refs.rightDiv;
+
+        // 计算滚动位置
+        const rightDivTop = rightDiv.getBoundingClientRect().top;
+        const sectionTop = sectionRef.getBoundingClientRect().top;
+        const scrollPosition = sectionTop - rightDivTop + rightDiv.scrollTop;
+
+        // 平滑滚动
+        rightDiv.scrollTo({
+          top: scrollPosition,
+          behavior: 'smooth',
+        });
       } else {
         this.selectedNoteId = '';
       }
     },
+    updateHeight() {
+      this.$nextTick(() => {
+        const target = this.$refs.leftDiv;
+        const parent = target.closest('.describe-preview');
+        if (!parent) return;
+        setTimeout(() => {
+          this.divHeight = parent.offsetHeight - 16;
+        }, 800);
+      });
+    },
   },
 };
 </script>
@@ -76,6 +110,8 @@ export default {
       display: flex;
       flex-direction: column;
       width: 20%;
+      min-height: 150px;
+      overflow: auto;
 
       > span {
         font-weight: bold;