思维导图数据

src/components/RichText.vue

@@ -208,8 +208,8 @@ export default {
           'Arial=arial,helvetica,sans-serif;' +
           'Times New Roman=times new roman,times,serif;' +
           '拼音=League;',
-        // 字数限制
         fontsize_formats: '8pt 10pt 11pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 26pt 28pt 30pt 32pt 34pt 36pt',
+        // 字数限制
         ax_wordlimit_num: this.wordlimitNum,
         ax_wordlimit_callback(editor) {
           editor.execCommand('undo');
@@ -283,6 +283,56 @@ export default {
       }
     },
     /**
+     * 判断内容是否全部加粗
+     */
+    isAllBold() {
+      let editor = tinymce.get(this.id);
+      let body = editor.getBody();
+      function getTextNodes(node) {
+        let textNodes = [];
+        if (node.nodeType === 3 && node.nodeValue.trim() !== '') {
+          textNodes.push(node);
+        } else {
+          for (let child of node.childNodes) {
+            textNodes = textNodes.concat(getTextNodes(child));
+          }
+        }
+        return textNodes;
+      }
+      let textNodes = getTextNodes(body);
+      if (textNodes.length === 0) return false;
+      return textNodes.every((node) => {
+        let el = node.parentElement;
+        while (el && el !== body) {
+          const tag = el.tagName.toLowerCase();
+          const fontWeight = window.getComputedStyle(el).fontWeight;
+          if (tag === 'b' || tag === 'strong' || fontWeight === 'bold' || parseInt(fontWeight) >= 600) {
+            return true;
+          }
+          el = el.parentElement;
+        }
+        return false;
+      });
+    },
+    /**
+     * 设置整体富文本格式
+     * @param {string} text 格式名称
+     */
+    setRichFormat(text) {
+      let editor = tinymce.get(this.id);
+      editor.execCommand('SelectAll');
+      if (text === 'bold') {
+        if (this.isAllBold()) {
+          editor.formatter.remove('bold');
+        } else {
+          editor.formatter.apply('bold');
+        }
+      } else {
+        editor.formatter.toggle(text);
+      }
+      editor.selection.collapse(false);
+    },
+    /**
      * 图片上传自定义逻辑函数
      * @param {object} blobInfo 文件数据
      * @param {Function} success 成功回调函数
@@ -502,9 +552,7 @@ export default {
         .map((item) => {
           if (/<[^>]+>/g.test(item)) return item;
           return item
-            .map((li) =>
-              li.map(({ number, con }) => (number && con ? addTone(Number(number), con) : number || con || '')),
-            )
+            .map(({ number, con }) => (number && con ? addTone(Number(number), con) : number || con || ''))
             .flat();
         })
         // 如果是数组，将数组字符串每两个之间加一个空格
@@ -541,7 +589,7 @@ export default {
       this.isShow = true;
       this.contentmenu = {
         left: `${pixelsFromLeft + 14}px`,
-        top: `${pixelsFromTop - 18}px`,
+        top: `${pixelsFromTop + 22}px`,
       };
     },
 

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

@@ -61,6 +61,13 @@ const mixin = {
         );
       },
     );
+
+    // 初始化 mind_map.node_list[0].id
+    if (!this.data?.mind_map?.node_list?.[0]?.id) {
+      this.data.mind_map = this.data.mind_map ?? {};
+      this.data.mind_map.node_list = this.data.mind_map.node_list ?? [{}];
+      this.data.mind_map.node_list[0].id = this.id;
+    }
   },
   methods: {
     /**

src/views/book/courseware/create/components/question/fill/Fill.vue

@@ -5,6 +5,7 @@
       <div class="fill-wrapper">
         <RichText
           v-model="data.content"
+          :is-fill="true"
           toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
           :wordlimit-num="false"
         />
@@ -50,7 +51,7 @@ import ModuleMixin from '../../common/ModuleMixin';
 import SoundRecord from '@/views/book/courseware/create/components/question/fill/components/SoundRecord.vue';
 import UploadAudio from '@/views/book/courseware/create/components/question/fill/components/UploadAudio.vue';
 
-import { getFillData } from '@/views/book/courseware/data/fill';
+import { getFillData, arrangeTypeList, fillFontList } from '@/views/book/courseware/data/fill';
 import { addTone, handleToneValue } from '@/views/book/courseware/data/common';
 import { getRandomNumber } from '@/utils';
 import { GetStaticResources } from '@/api/app';
@@ -67,11 +68,16 @@ export default {
       data: getFillData(),
     };
   },
+  watch: {
+    'data.property.arrange_type': 'handleMindMap',
+    'data.property.fill_font': 'handleMindMap',
+  },
   methods: {
     // 识别文本
     identifyText() {
       this.data.model_essay = [];
       this.data.answer.answer_list = [];
+      console.log('识别文本', this.data.content);
 
       this.data.content
         .split(/<(p|div)[^>]*>(.*?)<\/(p|div)>/g)
@@ -154,6 +160,19 @@ export default {
         })
         .catch(() => {});
     },
+    /**
+     * @description 处理思维导图数据
+     */
+    handleMindMap() {
+      const { fill_font, arrange_type } = this.data.property;
+      const fontLabel = fillFontList.find((item) => item.value === fill_font)?.label || '';
+      const arrangeLabel = arrangeTypeList.find((item) => item.value === arrange_type)?.label || '';
+      this.data.mind_map.node_list = [
+        {
+          name: `${arrangeLabel}${fontLabel}填空组件`,
+        },
+      ];
+    },
   },
 };
 </script>

src/views/book/courseware/create/components/question/fill/FillSetting.vue

@@ -10,6 +10,13 @@
           </el-radio>
         </el-radio-group>
       </el-form-item>
+      <el-form-item label="填空方式">
+        <el-radio-group v-model="property.fill_type">
+          <el-radio v-for="{ value, label } in fillTypeList" :key="value" :label="value">
+            {{ label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
       <el-form-item label="音频位置">
         <el-radio-group v-model="property.audio_position">
           <el-radio v-for="{ value, label } in audioPositionList" :key="value" :label="value">
@@ -50,6 +57,7 @@ import {
   audioGenerationMethodList,
   fillFontList,
   switchOption,
+  fillTypeList,
 } from '@/views/book/courseware/data/fill';
 
 export default {
@@ -63,6 +71,7 @@ export default {
       audioGenerationMethodList,
       fillFontList,
       switchOption,
+      fillTypeList,
     };
   },
   methods: {},

src/views/book/courseware/create/components/question/input/Input.vue

@@ -15,7 +15,7 @@
 <script>
 import ModuleMixin from '../../common/ModuleMixin';
 
-import { getInputData } from '@/views/book/courseware/data/input';
+import { getInputData, modelList, inputStyleList } from '@/views/book/courseware/data/input';
 
 export default {
   name: 'InputPage',
@@ -25,7 +25,24 @@ export default {
       data: getInputData(),
     };
   },
-  methods: {},
+  watch: {
+    'data.property.model': 'handleMindMap',
+    'data.property.input_style': 'handleMindMap',
+  },
+  methods: {
+    /**
+     * @description 更新思维导图数据
+     */
+    handleMindMap() {
+      const modelLabel = modelList.find((item) => item.value === this.data.property.model)?.label || '';
+      const inputStyleLabel = this.data.property.input_style === inputStyleList[0].value ? '横线' : '';
+      this.data.mind_map.node_list = [
+        {
+          name: `${modelLabel}${inputStyleLabel}输入框组件`,
+        },
+      ];
+    },
+  },
 };
 </script>
 

src/views/book/courseware/create/components/question/judge/Judge.vue

@@ -61,6 +61,9 @@ export default {
       return [..._option_type_list.slice(0, 2), ..._option_type_list.slice(3)];
     },
   },
+  watch: {
+    'data.option_list': 'handleMindMap',
+  },
   methods: {
     // 将数字转换为小写字母
     convertNumberToLetter(number) {
@@ -92,6 +95,14 @@ export default {
     deleteOption(index) {
       this.data.option_list.splice(index, 1);
     },
+    handleMindMap() {
+      const optionCount = this.data.option_list.length;
+      this.data.mind_map.node_list = [
+        {
+          name: `${optionCount}选项判断组件`,
+        },
+      ];
+    },
   },
 };
 </script>

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

@@ -64,61 +64,76 @@ export default {
     },
   },
   watch: {
-    'data.property.column_num': {
-      handler(val) {
-        let optionNum = this.data.option_list[0].length;
-        if (val > optionNum) {
-          // 修改序号类型列表
-          this.data.property.serial_number_type_list.push(
-            serialNumberTypeList[val]?.value || serialNumberTypeList[0].value,
-          );
-          // 增加选项
-          for (let i = 0; i < this.data.option_list.length; i++) {
-            this.data.option_list[i].push(getOptionItem());
+    'data.property.column_num': [
+      {
+        handler(val) {
+          let optionNum = this.data.option_list[0].length;
+          if (val > optionNum) {
+            // 修改序号类型列表
+            this.data.property.serial_number_type_list.push(
+              serialNumberTypeList[val]?.value || serialNumberTypeList[0].value,
+            );
+            // 增加选项
+            for (let i = 0; i < this.data.option_list.length; i++) {
+              this.data.option_list[i].push(getOptionItem());
+            }
+            // 修改答案列表
+            this.data.answer.answer_list.forEach((li) => {
+              li.push({ mark: '' });
+            });
+            return;
           }
-          // 修改答案列表
-          this.data.answer.answer_list.forEach((li) => {
-            li.push({ mark: '' });
-          });
-          return;
-        }
-        if (val < optionNum) {
-          this.data.property.serial_number_type_list.splice(-1, 1);
-          this.data.option_list.forEach((li) => {
-            li.splice(-1, 1);
-          });
-          // 修改答案列表
-          this.data.answer.answer_list.forEach((li) => {
-            li.splice(-1, 1);
-          });
-        }
+          if (val < optionNum) {
+            this.data.property.serial_number_type_list.splice(-1, 1);
+            this.data.option_list.forEach((li) => {
+              li.splice(-1, 1);
+            });
+            // 修改答案列表
+            this.data.answer.answer_list.forEach((li) => {
+              li.splice(-1, 1);
+            });
+          }
+        },
       },
-    },
-    'data.property.row_num': {
-      handler(val) {
-        let optionNum = this.data.option_list.length;
-        if (val > optionNum) {
-          for (let i = 0; i < val - optionNum; i++) {
-            this.data.option_list.push(getOption(this.data.property.column_num));
+      'handlerMindMap',
+    ],
+    'data.property.row_num': [
+      {
+        handler(val) {
+          let optionNum = this.data.option_list.length;
+          if (val > optionNum) {
+            for (let i = 0; i < val - optionNum; i++) {
+              this.data.option_list.push(getOption(this.data.property.column_num));
+            }
+            // 增加答案列表
+            this.data.answer.answer_list.push(
+              Array.from({ length: this.data.property.column_num }, () => ({ mark: '' })),
+            );
+            // 将答案列表最后一项的第一个元素设置进答案列表第一项
+            this.data.answer.answer_list[this.data.answer.answer_list.length - 1][0] = {
+              mark: this.data.option_list[this.data.option_list.length - 1][0].mark,
+            };
+            return;
           }
-          // 增加答案列表
-          this.data.answer.answer_list.push(
-            Array.from({ length: this.data.property.column_num }, () => ({ mark: '' })),
-          );
-          // 将答案列表最后一项的第一个元素设置进答案列表第一项
-          this.data.answer.answer_list[this.data.answer.answer_list.length - 1][0] = {
-            mark: this.data.option_list[this.data.option_list.length - 1][0].mark,
-          };
-          return;
-        }
-        if (val < optionNum) {
-          this.data.option_list.splice(val);
-          this.data.answer.answer_list.splice(val);
-        }
+          if (val < optionNum) {
+            this.data.option_list.splice(val);
+            this.data.answer.answer_list.splice(val);
+          }
+        },
       },
+      'handlerMindMap',
+    ],
+  },
+  methods: {
+    /**
+     * @description 处理思维导图
+     */
+    handlerMindMap() {
+      this.data.mind_map.node_list = [
+        { name: `${this.data.property.row_num}行${this.data.property.column_num}列连线组件` },
+      ];
     },
   },
-  methods: {},
 };
 </script>
 

src/views/book/courseware/create/components/question/select/Select.vue

@@ -26,7 +26,7 @@
 <script>
 import ModuleMixin from '../../common/ModuleMixin';
 
-import { getSelectData, getOption } from '@/views/book/courseware/data/select';
+import { getSelectData, getOption, arrangeTypeList } from '@/views/book/courseware/data/select';
 
 export default {
   name: 'SelectPage',
@@ -36,6 +36,10 @@ export default {
       data: getSelectData(),
     };
   },
+  watch: {
+    'data.property.arrange_type': 'handlerMindMap',
+    'data.answer.answer_list': 'handlerMindMap',
+  },
   methods: {
     // 将数字转换为小写字母
     convertNumberToLetter(number) {
@@ -73,6 +77,11 @@ export default {
     deleteOption(index) {
       this.data.option_list.splice(index, 1);
     },
+    handlerMindMap() {
+      const direction = this.data.property.arrange_type === arrangeTypeList[0].value ? '横排' : '竖排';
+      const select = this.data.answer.answer_list.length > 1 ? '多选' : '单选';
+      this.data.mind_map.node_list = [{ name: `${direction}${select}选择题` }];
+    },
   },
 };
 </script>

src/views/book/courseware/create/components/question/sort/Sort.vue

@@ -38,7 +38,7 @@
 <script>
 import ModuleMixin from '../../common/ModuleMixin';
 
-import { arrangeTypeList, getSortData, getOption } from '@/views/book/courseware/data/sort';
+import { arrangeTypeList, getSortData, getOption, orderTypeList } from '@/views/book/courseware/data/sort';
 
 export default {
   name: 'SortPage',
@@ -57,19 +57,24 @@ export default {
     },
   },
   watch: {
-    'data.property.option_count': {
-      handler(val) {
-        if (val > this.data.option_list.length) {
-          for (let i = this.data.option_list.length; i < val; i++) {
-            this.data.option_list.push(getOption());
+    'data.property.option_count': [
+      {
+        handler(val) {
+          if (val > this.data.option_list.length) {
+            for (let i = this.data.option_list.length; i < val; i++) {
+              this.data.option_list.push(getOption());
+            }
+            return;
           }
-          return;
-        }
-        if (val < this.data.option_list.length) {
-          this.data.option_list = this.data.option_list.slice(0, val);
-        }
+          if (val < this.data.option_list.length) {
+            this.data.option_list = this.data.option_list.slice(0, val);
+          }
+        },
       },
-    },
+      'handleMindMap',
+    ],
+    'data.property.arrange_direction': 'handleMindMap',
+    'data.property.order_type': 'handleMindMap',
   },
   methods: {
     getSortWrapperStyle() {
@@ -107,6 +112,19 @@ export default {
     handleCustomSerialNumber(item) {
       item.custom_serial_number = item.custom_serial_number.replace(/[^0-9/]/g, '');
     },
+    /**
+     * @description 处理思维导图数据
+     */
+    handleMindMap() {
+      const { option_count, arrange_direction, order_type } = this.data.property;
+      const arrangeLabel = arrangeTypeList.find((item) => item.value === arrange_direction)?.label || '';
+      const orderLabel = orderTypeList.find((item) => item.value === order_type)?.label || '';
+      this.data.mind_map.node_list = [
+        {
+          name: `${option_count}选项${arrangeLabel}${orderLabel}排序组件`,
+        },
+      ];
+    },
   },
 };
 </script>

src/views/book/courseware/create/components/question/voice_matrix/VoiceMatrix.vue

@@ -1,11 +1,13 @@
 <template>
   <ModuleBase :type="data.type">
     <template #content>
+      <span class="link" @click="BatchSetFormat('bold')">批量设置粗体</span>
       <div class="option-list">
         <div v-for="(item, i) in data.option_list" :key="i" class="voice-matrix">
           <div v-for="li in item" :key="li.mark" class="matrix-item">
             <!-- eslint-disable max-len -->
             <RichText
+              ref="richText"
               v-model="li.content"
               :inline="true"
               toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
@@ -164,6 +166,11 @@ export default {
         };
       }
     },
+    BatchSetFormat(text) {
+      this.$refs.richText.forEach((richText) => {
+        richText.setRichFormat(text);
+      });
+    },
   },
 };
 </script>

src/views/book/courseware/create/components/question/voice_matrix/VoiceMatrixSetting.vue

@@ -9,6 +9,11 @@
       <el-form-item label="列数">
         <el-input-number v-model="property.column_count" :min="1" />
       </el-form-item>
+      <el-form-item label="对齐方式">
+        <el-radio-group v-model="property.align">
+          <el-radio v-for="{ value, label } in alignTypeList" :key="value" :label="value">{{ label }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
       <el-form-item label="按列播放">
         <el-radio-group v-model="property.is_enable_column_play">
           <el-radio v-for="{ value, label } in switchOption" :key="value" :label="value">{{ label }}</el-radio>
@@ -32,7 +37,7 @@
 <script>
 import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
 
-import { getVoiceMatrixProperty, switchOption } from '@/views/book/courseware/data/voiceMatrix';
+import { getVoiceMatrixProperty, switchOption, alignTypeList } from '@/views/book/courseware/data/voiceMatrix';
 
 export default {
   name: 'VoiceMatrixSetting',
@@ -41,6 +46,7 @@ export default {
     return {
       property: getVoiceMatrixProperty(),
       switchOption,
+      alignTypeList,
     };
   },
   methods: {},

src/views/book/courseware/data/fill.js

@@ -30,6 +30,12 @@ export const audioGenerationMethodList = [
   },
 ];
 
+// 填空方式
+export const fillTypeList = [
+  { value: 'handwriting', label: '手写' },
+  { value: 'voice', label: '语音' },
+];
+
 // 填空字体
 export const fillFontList = [
   { value: 'chinese', label: '中文', font: 'arial' },
@@ -41,6 +47,7 @@ export function getFillProperty() {
   return {
     serial_number: 1,
     sn_type: serialNumberTypeList[0].value,
+    fill_type: fillTypeList[0].value,
     sn_position: serialNumberPositionList[3].value,
     sn_display_mode: displayList[0].value,
     arrange_type: arrangeTypeList[0].value,
@@ -63,5 +70,8 @@ export function getFillData() {
     answer: {
       answer_list: [],
     },
+    mind_map: {
+      node_list: [{ name: '横排中文填空组件' }],
+    },
   };
 }

src/views/book/courseware/data/input.js

@@ -104,5 +104,12 @@ export function getInputData() {
       text: '', // 答案文本
     },
     content: '', // 文本内容
+    mind_map: {
+      node_list: [
+        {
+          name: '拼音横线输入框组件',
+        },
+      ],
+    },
   };
 }

src/views/book/courseware/data/judge.js

@@ -43,5 +43,8 @@ export function getJudgeData() {
     answer: {
       answer_list: [],
     },
+    mind_map: {
+      node_list: [{ name: '4选项判断组件' }],
+    },
   };
 }

src/views/book/courseware/data/matching.js

@@ -66,5 +66,8 @@ export function getMatchingData() {
     min_height: 120,
     min_width: 290,
     property: getMatchingProperty(),
+    mind_map: {
+      node_list: [{ name: '两行两列连线组件' }],
+    },
   };
 }

src/views/book/courseware/data/math.js

@@ -441,5 +441,8 @@ export function getMathData() {
     title: '公式',
     property: getMathProperty(),
     math: '$\n$', // 公式内容
+    mind_map: {
+      node_list: [{ name: '公式组件' }],
+    },
   };
 }

src/views/book/courseware/data/select.js

@@ -42,5 +42,8 @@ export function getSelectData() {
     min_height: 200,
     min_width: 280,
     property: getSelectProperty(),
+    mind_map: {
+      node_list: [{ name: '横排单选选择题' }],
+    },
   };
 }

src/views/book/courseware/data/sort.js

@@ -40,5 +40,8 @@ export function getSortData() {
     min_height: 80,
     min_width: 280,
     property: getSortProperty(),
+    mind_map: {
+      node_list: [{ name: '3选项横排设定显示排序组件' }],
+    },
   };
 }

src/views/book/courseware/data/voiceMatrix.js

@@ -7,12 +7,20 @@ import {
 import { getRandomNumber } from '@/utils';
 export { switchOption };
 
+export const alignTypeList = [
+  { value: 'left', label: '左对齐' },
+  { value: 'center', label: '居中对齐' },
+  { value: 'right', label: '右对齐' },
+  { value: 'justify', label: '两端对齐' },
+];
+
 export function getVoiceMatrixProperty() {
   return {
     serial_number: 1,
     sn_type: serialNumberTypeList[0].value,
     sn_position: serialNumberPositionList[3].value,
     sn_display_mode: displayList[0].value,
+    align: alignTypeList[0].value, // 对齐方式
     is_enable_row_play: switchOption[0].value, // 是否开启行播放
     is_enable_column_play: switchOption[0].value, // 是否开启列播放
     is_enable_record: switchOption[0].value, // 是否开启录音
@@ -54,5 +62,8 @@ export function getVoiceMatrixData() {
     min_height: 100,
     min_width: 300,
     property: getVoiceMatrixProperty(),
+    mind_map: {
+      node_list: [{ name: '语音矩阵' }],
+    },
   };
 }

src/views/book/courseware/preview/components/fill/FillPreview.vue

@@ -155,8 +155,10 @@ export default {
       if (!selectOption) return '';
       let selectValue = selectOption.value;
       let answerValue = answerOption.value;
+      let answerType = answerOption.type;
       let classList = [];
-      let isRight = selectValue === answerValue;
+      let isRight =
+        answerType === 'only_one' ? selectValue === answerValue : answerValue.split('/').includes(selectValue);
       if (this.isJudgingRightWrong) {
         isRight ? classList.push('right') : classList.push('wrong');
       }

src/views/book/courseware/preview/components/voice_matrix/VoiceMatrixPreview.vue

@@ -133,7 +133,11 @@
                   ]"
                   @click="matrixCellClick(i, j)"
                 >
-                  <span class="content rich-text" v-html="sanitizeHTML(column.content)"></span>
+                  <span
+                    class="content rich-text"
+                    :style="{ textAlign: data.property.align }"
+                    v-html="sanitizeHTML(column.content)"
+                  ></span>
                 </div>
               </div>
             </template>
@@ -721,6 +725,7 @@ $border-color: #e6e6e6;
 
             > span {
               display: inline-block;
+              width: 100%;
               padding: 4px 12px;
               line-height: 24px;
             }