预览优化

src/api/book.js

@@ -11,6 +11,14 @@ export function CrateParsedTextInfo_Pinyin(data) {
  * @description 得到教材章节结构
  * @param {object} data
  */
+export function PinyinBuild_OldFormat(data) {
+  return http.post(`${process.env.VUE_APP_EepServer}?MethodName=tool-PinyinBuild_OldFormat`, data);
+}
+
+/**
+ * @description 得到教材章节结构
+ * @param {object} data
+ */
 export function ChapterGetBookChapterStruct(data) {
   return http.post(`${process.env.VUE_APP_EepServer}?MethodName=book_chapter_manager-GetBookChapterStruct`, data);
 }

src/components/PinyinText.vue

@@ -71,15 +71,15 @@ export default {
     },
     fontFamily: {
       type: String,
-      required: false,
+      default: '',
     },
     fontSize: {
       type: String,
-      required: false,
+      default: '12pt',
     },
     pinyinSize: {
       type: String,
-      required: false,
+      default: '12pt',
     },
     pinyinOverallPosition: {
       type: String,
@@ -124,7 +124,7 @@ export default {
   },
   watch: {
     styleWatch: {
-      handler(newVal, oldVal) {
+      handler() {
         this.isAllSetting = true;
       },
       immediate: true,

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

@@ -123,7 +123,7 @@ export default {
         data.pinyin_proofread_word_list = [];
         return;
       }
-      data.text = text.replace(/<[^>]+>/g, '');
+      data.text = text.replace(/<[^>]+>/g, '').replace(/&nbsp;/g, ' ');
       data.is_first_sentence_first_hz_pinyin_first_char_upper_case =
         this.data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case;
       CrateParsedTextInfo_Pinyin(data).then(({ parsed_text }) => {

src/views/book/courseware/create/components/common/ModuleMixin.js

@@ -8,7 +8,7 @@ import { displayList, viewMethodList, isEnable } from '@/views/book/courseware/d
 import {
   ContentSaveCoursewareComponentContent,
   ContentGetCoursewareComponentContent,
-  CrateParsedTextInfo_Pinyin,
+  PinyinBuild_OldFormat,
 } from '@/api/book';
 
 const mixin = {
@@ -264,12 +264,13 @@ const mixin = {
         return;
       }
 
-      data.paragraph_list_parameter.text = text;
+      data.paragraph_list_parameter.text = text.replace(/ /g, ' ');
 
-      CrateParsedTextInfo_Pinyin({
+      PinyinBuild_OldFormat({
         ...data.paragraph_list_parameter,
         is_first_sentence_first_hz_pinyin_first_char_upper_case:
           this.data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case,
+        is_fill_space: 'true',
       }).then(({ parsed_text }) => {
         if (parsed_text) {
           // 合并 activeTextStyle

src/views/book/courseware/create/components/question/matching/Matching.vue

@@ -184,7 +184,7 @@ export default {
 
         this.data.option_list.forEach((item, i) => {
           item.forEach((option, j) => {
-            const text = option.content.replace(/<[^>]+>/g, '');
+            const text = option.content.replace(/<[^>]+>/g, '').replace(/&nbsp;/g, ' ');
             if (!text) return;
             option.paragraph_list_parameter.text = text;
             this.createParsedTextInfoPinyin(text, i, j);
@@ -218,7 +218,7 @@ export default {
       if (!this.isEnable(this.data.property.view_pinyin)) return;
       if (this.data.option_list?.length > 0 && this.data.option_list[0].paragraph_list?.length > 0) return;
       if (!text) return;
-      this.data.option_list[i][j].paragraph_list_parameter.text = text.replace(/<[^>]+>/g, '');
+      this.data.option_list[i][j].paragraph_list_parameter.text = text.replace(/<[^>]+>/g, '').replace(/&nbsp;/g, ' ');
       this.createParsedTextInfoPinyin(text, i, j);
     },
   },

src/views/book/courseware/preview/components/matching/MatchingPreview.vue

@@ -330,7 +330,7 @@ export default {
       let svg = document.createElementNS(svgNS, 'svg');
       svg.setAttribute(
         'style',
-        `position:absolute; width: 62px; height: ${Math.max(8, height)}px; top: ${top}px; left: ${left}px;`,
+        `position:absolute; width: 74px; height: ${Math.max(8, height)}px; top: ${top}px; left: ${left}px;overflow: visible;`,
       );
       svg.classList.add('connection-line', `svg-${mark}-${curMark}`); // 添加类名
       // 向SVG元素添加 path 元素
@@ -338,6 +338,20 @@ export default {
       path.setAttribute('d', `M ${size ? 0 : width} 0 L ${size ? width : 0} ${height}`); // 设置路径数据
       this.setPathAttr(path);
       svg.appendChild(path);
+      // 在 svg 元素中的 path 元素上两端添加圆形标记
+      let circleStart = document.createElementNS(svgNS, 'circle');
+      circleStart.setAttribute('cx', size ? '0' : width); // 设置圆心的 x 坐标
+      circleStart.setAttribute('cy', '0'); // 设置圆心的 y 坐标
+      circleStart.setAttribute('r', '4'); // 设置半径
+      const assistColor = this.data?.unified_attrib?.topic_color || '#306eff';
+      circleStart.setAttribute('fill', assistColor); // 设置填充颜色
+      svg.appendChild(circleStart);
+      let circleEnd = document.createElementNS(svgNS, 'circle');
+      circleEnd.setAttribute('cx', size ? width : '0'); // 设置圆心的 x 坐标
+      circleEnd.setAttribute('cy', height); // 设置圆心的 y 坐标
+      circleEnd.setAttribute('r', '4'); // 设置半径
+      circleEnd.setAttribute('fill', assistColor); // 设置填充颜色
+      svg.appendChild(circleEnd);
       this.$refs[isShowRightAnswer ? 'answerList' : 'list'].appendChild(svg); // 将SVG元素插入到文档中
 
       // 清除当前连线点
@@ -525,7 +539,7 @@ export default {
         border-radius: 4px;
 
         &:not(:last-child, .isMobile) {
-          margin-right: 52px;
+          margin-right: 64px;
         }
 
         &.focus {

src/views/book/courseware/preview/components/sort/SortPreview.vue

@@ -199,7 +199,7 @@ export default {
     .group {
       display: flex;
       flex-wrap: wrap;
-      gap: 8px;
+      gap: 16px;
 
       .drag-item {
         min-height: 40px;