对话题容错处理

src/views/exercise_questions/preview/DialoguePreview.vue

@@ -15,9 +15,9 @@
       <div v-for="(item, i) in optionList" :key="i" class="option-list">
         <span
           class="avatar"
-          :style="{ backgroundColor: data.property.role_list.find(({ mark }) => mark === item.role).color }"
+          :style="{ backgroundColor: data.property.role_list?.find(({ mark }) => mark === item.role).color }"
         >
-          {{ data.property.role_list.find(({ mark }) => mark === item.role).name }}
+          {{ data.property.role_list?.find(({ mark }) => mark === item.role).name }}
         </span>
 
         <div v-if="item.type === 'text' || item.type === 'input'" class="text-wrapper">
@@ -59,7 +59,7 @@
             :file-id="item.file_id"
             :show-slider="true"
             :show-progress="false"
-            :background-color="data.property.role_list.find(({ mark }) => mark === item.role).color"
+            :background-color="data.property.role_list?.find(({ mark }) => mark === item.role).color"
           />
         </div>
       </div>

src/views/exercise_questions/preview/MatchingPreview.vue

@@ -13,37 +13,26 @@
 
     <ul ref="list" class="option-list">
       <li v-for="(item, i) in optionList" :key="i" class="list-item">
-        <div v-for="({ content, mark }, j) in item" :key="mark" :class="['item-wrapper', computedAnswerClass(mark)]">
-          <span
-            v-if="j > 0 && j < item.length"
-            :class="['connection', `pre-line-${i}-${j}`]"
-            :style="{ cursor: disabled ? 'default' : 'pointer' }"
-            @mousedown="mousedown($event, i, j, 'pre', mark)"
-            @mouseup="mouseup($event, i, j, 'pre', mark)"
-            @click="handleClickConnection($event, i, j, 'pre', mark)"
-          ></span>
+        <div
+          v-for="({ content, mark }, j) in item"
+          :key="mark"
+          :class="['item-wrapper', `item-${mark}`, computedAnswerClass(mark)]"
+          :style="{ cursor: disabled ? 'default' : 'pointer' }"
+          @mousedown="mousedown($event, i, j, mark)"
+          @mouseup="mouseup($event, i, j, mark)"
+          @click="handleClickConnection($event, i, j, mark)"
+        >
           <span class="content rich-text" v-html="sanitizeHTML(content)"></span>
-          <span
-            v-if="j < item.length - 1"
-            :class="['connection', `next-line-${i}-${j}`]"
-            :style="{ cursor: disabled ? 'default' : 'pointer' }"
-            @mousedown="mousedown($event, i, j, 'next', mark)"
-            @mouseup="mouseup($event, i, j, 'next', mark)"
-            @click="handleClickConnection($event, i, j, 'next', mark)"
-          ></span>
         </div>
       </li>
     </ul>
 
     <div v-if="isShowRightAnswer" class="right-answer">
       <div class="title">正确答案</div>
-
       <ul ref="answer-list" class="option-list">
         <li v-for="(item, i) in optionList" :key="i" class="list-item">
-          <div v-for="({ content, mark }, j) in item" :key="mark" :class="'item-wrapper'">
-            <span v-if="j > 0 && j < item.length" :class="['connection', `answer-pre-line-${i}-${j}`]"></span>
+          <div v-for="{ content, mark } in item" :key="mark" :class="['item-wrapper', `answer-item-${mark}`]">
             <span class="content rich-text" v-html="sanitizeHTML(content)"></span>
-            <span v-if="j < item.length - 1" :class="['connection', `answer-next-line-${i}-${j}`]"></span>
           </div>
         </li>
       </ul>
@@ -62,16 +51,21 @@ export default {
   data() {
     return {
       answerList: [], // 答案列表
-      curConnectionPoint: { i: -1, j: -1, position: 'pre', mark: '' }, // 当前连线点
+      curConnectionPoint: { i: -1, j: -1, mark: '' }, // 当前连线点
       // 拖拽相关
       drag: false,
-      mousePointer: { i: -1, j: -1, position: 'pre', mark: '' },
+      mouseEvent: {
+        clientX: 0,
+        clientY: 0,
+      },
+      mousePointer: { i: -1, j: -1, mark: '' },
     };
   },
   computed: {
     optionList() {
       // 生成一个与选项列表相同的二维数组，但没有内容
       let arr = Array.from(Array(this.data.option_list.length), () => Array(this.data.option_list[0].length).fill({}));
+      // 遍历选项列表，将选项随机添加到二维数组中
       for (let i = 0; i < this.data.property.column_number; i++) {
         let rowNumList = Array.from(Array(this.data.option_list.length).keys()); // 行数列表
         for (let j = 0; j < this.data.option_list.length; j++) {
@@ -186,23 +180,31 @@ export default {
       if (this.disabled) return;
       // 使用 svg 绘制跟随鼠标移动的连接线
       let svg = document.querySelector('.move-connection');
-      if (!svg) {
+      let list = this.$refs.list.getBoundingClientRect(); // 列表的位置
+      let { clientX, clientY } = e;
+      let isLeft = clientX < this.mouseEvent.clientX; // 鼠标是否向左移动
+      // 计算 svg 的宽度，宽度不能超过列表的宽度
+      let width = Math.min(list.width, isLeft ? list.width - clientX + list.left - 1 : clientX - list.left - 1);
+      if (svg) {
+        svg.setAttribute(
+          'style',
+          `position: absolute; ${isLeft ? 'right: 0;' : 'left: 0;'} width: ${width}px; height: 100%;`,
+        );
+      } else {
         svg = document.createElementNS(svgNS, 'svg');
         svg.classList.add('move-connection');
-        svg.setAttribute('style', `position: absolute; width: 100%; height: 100%;`);
+        svg.setAttribute('style', `position: absolute; width: ${width}px; height: 100%;`);
         let path = document.createElementNS(svgNS, 'path');
         this.setPathAttr(path);
         svg.appendChild(path);
         this.$refs.list.appendChild(svg);
       }
-      let { clientX, clientY } = e;
-      let { i, j, position } = this.mousePointer;
-      let dom = document.getElementsByClassName(`${position}-line-${i}-${j}`)[0].getBoundingClientRect(); // 连线点的位置
-      let list = this.$refs.list.getBoundingClientRect(); // 列表的位置
-      let top = dom.top - list.top + 5; // 连线点距离列表顶部的距离 + 5 是为了让线条在连线点的中间
-      let left = dom.left - list.left + 5; // 连线点距离列表左边的距离 + 5 是为了让线条在连线点的中间
-      let mouseX = clientX - list.left; // 鼠标距离列表左边的距离
-      let mouseY = clientY - list.top; // 鼠标距离列表顶部的距离
+      let top = this.mouseEvent.clientY - list.top;
+      let left = isLeft
+        ? this.mouseEvent.clientX - list.left - Math.abs(width - list.width)
+        : this.mouseEvent.clientX - list.left;
+      let mouseX = isLeft ? clientX - list.left - Math.abs(width - list.width) : clientX - list.left;
+      let mouseY = clientY - list.top;
       let path = svg.querySelector('path');
       path.setAttribute('d', `M ${left} ${top} L ${mouseX} ${mouseY}`);
     },
@@ -211,40 +213,56 @@ export default {
       this.drag = false;
       document.querySelector('.move-connection')?.remove();
       document.body.style.userSelect = 'auto'; // 允许选中文本
-      this.mousePointer = { i: -1, j: -1, position: 'pre', mark: '' };
+      this.mousePointer = { i: -1, j: -1, mark: '' };
+      this.mouseEvent = { clientX: 0, clientY: 0 };
     },
-    mousedown(e, i, j, position, mark) {
+    /**
+     * 鼠标按下事件，设置当前连线点
+     * @param {PointerEvent} e 事件对象
+     * @param {number} i 选项列表索引
+     * @param {number} j 选项索引
+     * @param {string} mark 选项标识
+     */
+    mousedown(e, i, j, mark) {
       this.drag = true;
       document.body.style.userSelect = 'none'; // 禁止选中文本
-      this.mousePointer = { i, j, position, mark };
+      this.mouseEvent = { clientX: e.clientX, clientY: e.clientY };
+      this.mousePointer = { i, j, mark };
     },
     /**
      * 鼠标抬起事件，如果是一个合适的连接点，则创建连接线
      * @param {PointerEvent} e 事件对象
      * @param {Number} i 选项列表索引
      * @param {Number} j 选项索引
-     * @param {'pre'|'next'} position 连线点位置
      * @param {String} mark 选项标识
      */
-    mouseup(e, i, j, position, mark) {
-      let { i: curI, j: curJ, position: curPosition, mark: curMark } = this.mousePointer;
+    mouseup(e, i, j, mark) {
+      let { i: curI, j: curJ, mark: curMark } = this.mousePointer;
       if (curI === -1 && curJ === -1) return;
-      if (Math.abs(curJ - j) > 1 || position === curPosition || mark === curMark) return;
-      this.changeConnectionList(mark, position, true);
-      this.createLine(i, j, position, mark, true);
+      if (Math.abs(curJ - j) > 1 || mark === curMark) return;
+      this.changeConnectionList(mark, j, true);
+      this.createLine(mark, true);
     },
     /* 用 mouse 事件模拟拖拽 结束 */
 
+    // 重置当前连线点
     resetCurConnectionPoint() {
-      this.curConnectionPoint = { i: -1, j: -1, position: 'pre', mark: '' };
+      this.curConnectionPoint = { i: -1, j: -1, mark: '' };
     },
     /**
      * 当点击的不是连线点时，清除所有连线点的选中状态
      * @param {PointerEvent} e
      */
     handleEventConnection(e) {
-      if (e.target.classList.contains('connection')) return;
-      Array.from(document.getElementsByClassName('connection')).forEach((item) => {
+      let currentNode = e.target;
+      while (currentNode !== null) {
+        if (currentNode.classList && currentNode.classList.contains('item-wrapper')) {
+          break;
+        }
+        currentNode = currentNode.parentNode;
+      }
+      if (currentNode) return;
+      Array.from(document.getElementsByClassName('item-wrapper')).forEach((item) => {
         item.classList.remove('focus');
       });
       this.resetCurConnectionPoint();
@@ -255,31 +273,38 @@ export default {
      * @param {PointerEvent} e 事件对象
      * @param {Number} i 选项列表索引
      * @param {Number} j 选项索引
-     * @param {'pre'|'next'} position
      * @param {String} mark 选项标识
      */
-    handleClickConnection(e, i, j, position, mark) {
+    handleClickConnection(e, i, j, mark) {
       if (this.disabled) return;
-      let { i: curI, j: curJ, position: curPosition, mark: curMark } = this.curConnectionPoint;
-      // 如果当前连线点不存在，则设置当前连线点
-      if (curI === -1 && curJ === -1) {
-        this.curConnectionPoint = { i, j, mark, position };
-        e.target.classList.add('focus');
+      let { i: curI, j: curJ, mark: curMark } = this.curConnectionPoint;
+      // 获取 item-wrapper 元素
+      let currentNode = e.target;
+      while (currentNode !== null) {
+        if (currentNode.classList && currentNode.classList.contains('item-wrapper')) {
+          break;
+        }
+        currentNode = currentNode.parentNode;
+      }
+      // 如果当前连线点不存在或就是当前连线点，则设置当前连线点
+      if ((curI === -1 && curJ === -1) || mark === curMark) {
+        this.curConnectionPoint = { i, j, mark };
+        currentNode.classList.add('focus');
         return;
       }
       // 如果当前连线点存在，清除所有连线点的选中状态
-      Array.from(document.getElementsByClassName('connection')).forEach((item) => {
+      Array.from(this.$refs.list.getElementsByClassName('item-wrapper')).forEach((item) => {
         item.classList.remove('focus');
       });
       // 如果当前连线点与上一个连线点不在相邻的位置，则设置点击的连接点为当前连线点
-      if (Math.abs(curJ - j) > 1 || position === curPosition || mark === curMark) {
-        this.curConnectionPoint = { i, j, mark, position };
-        e.target.classList.add('focus');
+      if (Math.abs(curJ - j) > 1 || mark === curMark || (curJ === j && curI !== i)) {
+        this.curConnectionPoint = { i, j, mark };
+        currentNode.classList.add('focus');
         return;
       }
-      this.changeConnectionList(mark, position);
+      this.changeConnectionList(mark, j);
       // 如果当前连线点与上一个连线点在相邻的位置，则创建连接线
-      this.createLine(i, j, position, mark);
+      this.createLine(mark);
     },
 
     // 循环答案列表
@@ -298,45 +323,40 @@ export default {
               }
             });
           });
-          let next = { i: -1, j: -1 }; // 下一个连线点
-          this.answerList.findIndex((_item, i) => {
-            let itemJ = _item.findIndex((li) => li.mark === item[j + 1]);
-            if (itemJ !== -1) {
-              next = { i, j: itemJ };
-              return true;
-            }
-          });
-          this.curConnectionPoint = { i: cur.i, j: cur.j, position: 'next', mark };
-          this.createLine(next.i, next.j, 'pre', item[j + 1], false, isShowRightAnswer);
+          this.curConnectionPoint = { i: cur.i, j: cur.j, mark };
+          this.createLine(item[j + 1], false, isShowRightAnswer);
         });
       });
     },
 
     /**
      * 创建连接线
-     * @param {Number} i 选项列表索引
-     * @param {Number} j 选项索引
-     * @param {'pre'|'next'} position
      * @param {String} mark 选项标识
      * @param {Boolean} isDrag 是否是拖拽
      * @param {Boolean} isShowRightAnswer 是否是显示正确答案
      */
-    createLine(i, j, position, mark, isDrag = false, isShowRightAnswer = false) {
-      let { offsetLeft, offsetTop } = document.getElementsByClassName(
-        `${isShowRightAnswer ? 'answer-' : ''}${position}-line-${i}-${j}`,
+    createLine(mark, isDrag = false, isShowRightAnswer = false) {
+      let { offsetWidth, offsetLeft, offsetTop, offsetHeight } = document.getElementsByClassName(
+        `${isShowRightAnswer ? 'answer-' : ''}item-${mark}`,
       )[0];
-      const { curOffsetLeft, curOffsetTop, curMark } = this.computedCurConnectionPoint(isDrag, isShowRightAnswer);
-      let top = Math.min(offsetTop, curOffsetTop) + 5;
-      let left = Math.min(offsetLeft, curOffsetLeft) + 5;
-      let width = Math.abs(offsetLeft - curOffsetLeft);
+      const { curOffsetWidth, curOffsetLeft, curOffsetTop, curMark } = this.computedCurConnectionPoint(
+        isDrag,
+        isShowRightAnswer,
+      );
+      let top = Math.min(offsetTop + offsetHeight / 2, curOffsetTop + offsetHeight / 2);
+      let left = Math.min(offsetLeft + offsetWidth, curOffsetLeft + curOffsetWidth);
+      let width = Math.abs(
+        offsetLeft > curOffsetLeft
+          ? curOffsetLeft - offsetLeft + offsetWidth
+          : offsetLeft - curOffsetLeft + curOffsetWidth,
+      );
       let height = Math.abs(offsetTop - curOffsetTop);
-      let size = offsetLeft > curOffsetLeft ? offsetTop > curOffsetTop : offsetTop < curOffsetTop;
-
+      let size = offsetLeft > curOffsetLeft ? offsetTop > curOffsetTop : offsetTop < curOffsetTop; // 判断是左上还是右下
       // 创建一个空的SVG元素
       let svg = document.createElementNS(svgNS, 'svg');
       svg.setAttribute(
         'style',
-        `position:absolute; width: 128px; height: ${Math.max(8, height) + 4}px; top: ${top}px; left: ${left}px;`,
+        `position:absolute; width: 62px; height: ${Math.max(8, height)}px; top: ${top}px; left: ${left}px;`,
       );
       svg.classList.add('connection-line', `svg-${mark}-${curMark}`); // 添加类名
       // 向SVG元素添加 path 元素
@@ -362,9 +382,15 @@ export default {
      * @param {Boolean} isShowRightAnswer 是否是显示正确答案
      */
     computedCurConnectionPoint(isDrag = false, isShowRightAnswer = false) {
-      const { i, j, position, mark } = isDrag ? this.mousePointer : this.curConnectionPoint;
-      let dom = document.getElementsByClassName(`${isShowRightAnswer ? 'answer-' : ''}${position}-line-${i}-${j}`)[0];
-      return { curOffsetLeft: dom.offsetLeft, curOffsetTop: dom.offsetTop, curMark: mark };
+      const { mark } = isDrag ? this.mousePointer : this.curConnectionPoint;
+      let dom = document.getElementsByClassName(`${isShowRightAnswer ? 'answer-' : ''}item-${mark}`)[0];
+      return {
+        curOffsetWidth: dom.offsetWidth,
+        curOffsetLeft: dom.offsetLeft,
+        curOffsetTop: dom.offsetTop,
+        curOffsetHeight: dom.offsetHeight / 2,
+        curMark: mark,
+      };
     },
 
     // 清除所有连接线
@@ -377,27 +403,25 @@ export default {
     /**
      * 修改连接列表
      * @param {String} mark 选项标识
-     * @param {'pre'|'next'} position
      * @param {Boolean} isDrag 是否是拖拽
      */
-    changeConnectionList(mark, position, isDrag = false) {
-      const { mark: curMark, position: curPosition } = isDrag ? this.mousePointer : this.curConnectionPoint;
-      this.changeAnswerList(curMark, mark, position);
-      this.changeAnswerList(mark, curMark, curPosition);
+    changeConnectionList(mark, j, isDrag = false) {
+      const { mark: curMark, j: curJ } = isDrag ? this.mousePointer : this.curConnectionPoint;
+      this.changeAnswerList(curMark, mark, curJ < j);
+      this.changeAnswerList(mark, curMark, curJ > j);
     },
     /**
      * 改变答案列表
      * @param {String} curMark 当前选项标识
      * @param {String} mark 选项标识
-     * @param {'pre'|'next'} position
      */
-    changeAnswerList(curMark, mark, position) {
+    changeAnswerList(curMark, mark, isPre) {
       let oldPointer = { mark: '', position: '' };
       // 找到当前选项，修改 preMark 或 nextMark
       this.answerList.find((item) =>
         item.find((li) => {
           if (li.mark === curMark) {
-            if (position === 'pre') {
+            if (isPre) {
               if (li.nextMark) {
                 oldPointer = { mark: li.nextMark, position: 'next' };
               }
@@ -505,9 +529,13 @@ export default {
         align-items: center;
         min-height: 48px;
         padding: 12px 24px;
-        background-color: $fill-color;
+        background-color: $content-color;
         border-radius: 40px;
 
+        &.focus {
+          background-color: #dcdbdd;
+        }
+
         &.right {
           background-color: $right-bc-color;
         }
@@ -519,21 +547,6 @@ export default {
         .content {
           flex: 1;
         }
-
-        .connection {
-          z-index: 1;
-          width: 14px;
-          height: 14px;
-          cursor: pointer;
-          border: 4px solid $light-main-color;
-          border-radius: 50%;
-
-          &.focus {
-            background-color: $light-main-color;
-            border-color: #fff;
-            outline: 2px solid $light-main-color;
-          }
-        }
       }
     }
   }
@@ -542,12 +555,6 @@ export default {
     .title {
       margin-bottom: 24px;
     }
-
-    .option-list {
-      .connection {
-        cursor: default !important;
-      }
-    }
   }
 }
 </style>