填表题修改和题目序号在以括号结束时不加 .

src/views/exercise_questions/create/components/exercises/TableFillQuestion.vue

@@ -144,7 +144,6 @@
 import QuestionMixin from '../common/QuestionMixin.js';
 
 import { getRandomNumber } from '@/utils';
-import { isEnable } from '@/views/exercise_questions/data/common';
 import { getTableFillData, getOption } from '@/views/exercise_questions/data/tableFill.js';
 
 export default {
@@ -284,6 +283,12 @@ export default {
           answerIndex = -1;
         }
       }
+      if (newValue.text.length <= 0) {
+        this.$set(this.data.option_list[i][j], 'content_list', [
+          { type: 'empty_input', content: '', mark: getRandomNumber() },
+        ]);
+        return;
+      }
       let isStart = /^##/.test(arr[0]); // 是否以 ## 开头
       if (isStart) {
         this.handleSpecialCharacterStart(arr, answerIndex, newValue.mark, i, j);
@@ -320,7 +325,7 @@ export default {
       }
       let last = _str.slice(start);
       if (last) {
-        arr.push({ content: last, type: 'text' });
+        arr.push({ content: last, type: 'text', mark: '' });
       }
       let value_list = arr
         .filter(({ type }) => type === 'input')

src/views/exercise_questions/data/tableFill.js

@@ -2,7 +2,11 @@ import { getRandomNumber } from '@/utils';
 import { stemTypeList, questionNumberTypeList, scoreTypeList, switchOption, fontSizeList } from './common';
 
 export function getOption() {
-  return { mark: getRandomNumber(), text: '', content_list: [] };
+  return {
+    mark: getRandomNumber(),
+    text: '',
+    content_list: [{ type: 'empty_input', content: '', mark: getRandomNumber() }],
+  };
 }
 
 /**
@@ -18,10 +22,7 @@ export function getTableFillData() {
       { mark: getRandomNumber(), text: '', width: 50 },
       { mark: getRandomNumber(), text: '', width: 50 },
     ], // 选项头部
-    option_list: [
-      [getOption(), getOption()],
-      [getOption(), getOption()],
-    ], // 选项列表
+    option_list: [Array.from({ length: 2 }, () => getOption()), Array.from({ length: 2 }, () => getOption())], // 选项列表
     answer: {
       score: 1,
       score_type: scoreTypeList[0].value,

src/views/exercise_questions/preview/AnswerQuestionPreview.vue

@@ -3,7 +3,7 @@
   <div class="answerquestion-preview">
     <div class="stem">
       <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
-        {{ data.property.question_number }}.
+        {{ questionNumberEndIsBracket(data.property.question_number) }}
       </span>
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>

src/views/exercise_questions/preview/ChinesePreview.vue

@@ -3,7 +3,7 @@
   <div v-if="show_preview" class="chinese-preview">
     <div class="stem">
       <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
-        {{ data.property.question_number }}.
+        {{ questionNumberEndIsBracket(data.property.question_number) }}
       </span>
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>

src/views/exercise_questions/preview/ChooseTonePreview.vue

@@ -3,7 +3,7 @@
   <div v-if="show_preview" class="choosetone-preview">
     <div class="stem">
       <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
-        {{ data.property.question_number }}.
+        {{ questionNumberEndIsBracket(data.property.question_number) }}
       </span>
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>

src/views/exercise_questions/preview/DialoguePreview.vue

@@ -3,7 +3,7 @@
   <div class="dialogue-preview">
     <div class="stem">
       <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
-        {{ data.property.question_number }}.
+        {{ questionNumberEndIsBracket(data.property.question_number) }}
       </span>
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>

src/views/exercise_questions/preview/EssayQuestionPreview.vue

@@ -3,7 +3,7 @@
   <div v-if="show_preview" class="essayquestion-preview">
     <div class="stem">
       <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
-        {{ data.property.question_number }}.
+        {{ questionNumberEndIsBracket(data.property.question_number) }}
       </span>
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>

src/views/exercise_questions/preview/FillPreview.vue

@@ -3,7 +3,7 @@
   <div class="fill-preview">
     <div class="stem">
       <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
-        {{ data.property.question_number }}.
+        {{ questionNumberEndIsBracket(data.property.question_number) }}
       </span>
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>

src/views/exercise_questions/preview/JudgePreview.vue

@@ -3,7 +3,7 @@
   <div class="judge-preview">
     <div class="stem">
       <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
-        {{ data.property.question_number }}.
+        {{ questionNumberEndIsBracket(data.property.question_number) }}
       </span>
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>

src/views/exercise_questions/preview/ListenFillPreview.vue

@@ -3,7 +3,7 @@
   <div class="fill-preview">
     <div class="stem">
       <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
-        {{ data.property.question_number }}.
+        {{ questionNumberEndIsBracket(data.property.question_number) }}
       </span>
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>

src/views/exercise_questions/preview/ListenJudgePreview.vue

@@ -3,7 +3,7 @@
   <div class="judge-preview">
     <div class="stem">
       <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
-        {{ data.property.question_number }}.
+        {{ questionNumberEndIsBracket(data.property.question_number) }}
       </span>
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>

src/views/exercise_questions/preview/ListenSelectPreview.vue

@@ -3,7 +3,7 @@
   <div class="select-preview">
     <div class="stem">
       <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
-        {{ data.property.question_number }}.
+        {{ questionNumberEndIsBracket(data.property.question_number) }}
       </span>
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>

src/views/exercise_questions/preview/MatchingPreview.vue

@@ -3,7 +3,7 @@
   <div class="matching-preview">
     <div class="stem">
       <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
-        {{ data.property.question_number }}.
+        {{ questionNumberEndIsBracket(data.property.question_number) }}
       </span>
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>

src/views/exercise_questions/preview/ReadAloudPreview.vue

@@ -3,7 +3,7 @@
   <div class="readaloud-preview">
     <div class="stem">
       <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
-        {{ data.property.question_number }}.
+        {{ questionNumberEndIsBracket(data.property.question_number) }}
       </span>
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>

src/views/exercise_questions/preview/ReadPreview.vue

@@ -3,7 +3,7 @@
   <div class="read-preview">
     <div class="stem">
       <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
-        {{ data.property.question_number }}.
+        {{ questionNumberEndIsBracket(data.property.question_number) }}
       </span>
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>

src/views/exercise_questions/preview/RepeatPreview.vue

@@ -3,7 +3,7 @@
   <div class="repeat-preview">
     <div class="stem">
       <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
-        {{ data.property.question_number }}.
+        {{ questionNumberEndIsBracket(data.property.question_number) }}
       </span>
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>

src/views/exercise_questions/preview/ReplaceAnswerPreview.vue

@@ -3,7 +3,7 @@
   <div v-if="show_preview" class="replace-preview">
     <div class="stem">
       <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
-        {{ data.property.question_number }}.
+        {{ questionNumberEndIsBracket(data.property.question_number) }}
       </span>
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>

src/views/exercise_questions/preview/SelectPreview.vue

@@ -3,7 +3,7 @@
   <div class="select-preview">
     <div class="stem">
       <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
-        {{ data.property.question_number }}.
+        {{ questionNumberEndIsBracket(data.property.question_number) }}
       </span>
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>

src/views/exercise_questions/preview/ShortAnswerPreview.vue

@@ -3,7 +3,7 @@
   <div class="readaloud-preview">
     <div class="stem">
       <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
-        {{ data.property.question_number }}.
+        {{ questionNumberEndIsBracket(data.property.question_number) }}
       </span>
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>

src/views/exercise_questions/preview/SortPreview.vue

@@ -3,7 +3,7 @@
   <div class="sort-preview">
     <div class="stem">
       <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
-        {{ data.property.question_number }}.
+        {{ questionNumberEndIsBracket(data.property.question_number) }}
       </span>
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>

src/views/exercise_questions/preview/TableFillPreview.vue

@@ -3,7 +3,7 @@
   <div class="fill-form-preview">
     <div class="stem">
       <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
-        {{ data.property.question_number }}.
+        {{ questionNumberEndIsBracket(data.property.question_number) }}
       </span>
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>
@@ -17,12 +17,14 @@
       <div class="form" :style="{ width: `${data.property.form_width}px` }">
         <div class="form-header">
           <div
-            v-for="({ text, mark, width }, i) in data.option_header_list"
+            v-for="{ text, mark, width } in data.option_header_list"
             :key="mark"
-            :style="{ width: `${width}%` }"
+            :style="{
+              width: `${width}%`,
+              paddingLeft: isEnable(data.property.is_enable_number_column) ? '40px' : '0',
+            }"
             class="header-item"
           >
-            <span v-if="i === 0 && isEnable(data.property.is_enable_number_column)" class="serial-number">#</span>
             <span>{{ text }}</span>
           </div>
         </div>
@@ -36,8 +38,21 @@
             <span v-if="j === 0 && isEnable(data.property.is_enable_number_column)" class="serial-number">
               {{ i + 1 }}
             </span>
-            <template v-for="(li, k) in content_list">
-              <span v-if="li.type === 'text'" :key="k">{{ li.content }}</span>
+            <div v-for="(li, k) in content_list" :key="k" class="item-content">
+              <span v-if="li.type === 'text'">{{ li.content }}</span>
+              <template v-else-if="li.type === 'empty_input'">
+                <el-input
+                  :key="k"
+                  v-model="li.content"
+                  :disabled="disabled"
+                  :class="['fill']"
+                  placeholder="请输入"
+                  :style="[
+                    { cursor: disabled ? 'not-allowed' : 'pointer' },
+                    { width: Math.max(80, li.content.length * 16) + 'px' },
+                  ]"
+                />
+              </template>
               <template v-else-if="li.type === 'fill'">
                 <el-input
                   :key="k"
@@ -77,7 +92,7 @@
                   {{ computedAnswerText(mark, li.mark) }}
                 </span>
               </template>
-            </template>
+            </div>
           </div>
         </div>
       </div>
@@ -111,7 +126,7 @@ export default {
             let value_list = [];
             let answerIndex = this.answer.answer_list.findIndex((item) => item.mark === mark);
             content_list.forEach((li) => {
-              if (['fill', 'input'].includes(li.type) && li.content.length > 0) {
+              if (['fill', 'input', 'empty_input'].includes(li.type) && li.content.length > 0) {
                 value_list.push({
                   mark: li.mark,
                   value: li.content,
@@ -143,7 +158,7 @@ export default {
           .find((item) => item.find((li) => li.mark === mark))
           .forEach((item) => {
             item.content_list.forEach((li) => {
-              if (['fill', 'input'].includes(li.type)) {
+              if (['fill', 'input', 'empty_input'].includes(li.type)) {
                 let answer = value_list.find((item) => item.mark === li.mark);
                 if (!answer) return;
                 li.content = answer.value;
@@ -213,6 +228,8 @@ export default {
 <style lang="scss" scoped>
 @use '@/styles/mixin.scss' as *;
 
+$table-border: 1px solid #ebebeb;
+
 .fill-form-preview {
   @include preview;
 
@@ -229,7 +246,9 @@ export default {
         .header-item {
           display: flex;
           align-items: center;
+          min-height: 40px;
           padding: 8px 12px;
+          border-left: $table-border;
         }
       }
 
@@ -239,8 +258,13 @@ export default {
         .form-item {
           display: flex;
           align-items: center;
-          padding: 8px 12px;
-          border-bottom: 1px solid #eaeffb;
+          min-height: 48px;
+          border-bottom: $table-border;
+          border-left: $table-border;
+
+          .item-content {
+            padding: 8px 12px;
+          }
 
           %input,
           .el-input.fill {
@@ -300,10 +324,18 @@ export default {
             }
           }
         }
+
+        .form-item:last-child {
+          border-right: $table-border;
+        }
       }
 
       .serial-number {
-        padding-right: 16px;
+        display: flex;
+        align-items: center;
+        height: 100%;
+        padding: 8px 12px;
+        border-right: $table-border;
       }
     }
   }

src/views/exercise_questions/preview/TalkPictruePreview.vue

@@ -3,7 +3,7 @@
   <div class="talkpictrue-preview">
     <div class="stem">
       <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
-        {{ data.property.question_number }}.
+        {{ questionNumberEndIsBracket(data.property.question_number) }}
       </span>
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>

src/views/exercise_questions/preview/WordCardPreview.vue

@@ -3,7 +3,7 @@
   <div class="word-card-preview">
     <div class="stem">
       <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
-        {{ data.property.question_number }}.
+        {{ questionNumberEndIsBracket(data.property.question_number) }}
       </span>
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>

src/views/exercise_questions/preview/WordDictationPreview.vue

@@ -3,7 +3,7 @@
   <div v-if="show_preview" class="chinese-preview">
     <div class="stem">
       <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
-        {{ data.property.question_number }}.
+        {{ questionNumberEndIsBracket(data.property.question_number) }}
       </span>
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>

src/views/exercise_questions/preview/WritePictruePreview.vue

@@ -3,7 +3,7 @@
   <div v-if="show_preview" class="writepicture-preview">
     <div class="stem">
       <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
-        {{ data.property.question_number }}.
+        {{ questionNumberEndIsBracket(data.property.question_number) }}
       </span>
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>

src/views/exercise_questions/preview/WritePreview.vue

@@ -3,7 +3,7 @@
   <div class="write-preview">
     <div class="stem">
       <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
-        {{ data.property.question_number }}.
+        {{ questionNumberEndIsBracket(data.property.question_number) }}
       </span>
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>

src/views/exercise_questions/preview/components/PreviewMixin.js

@@ -54,9 +54,17 @@ const PreviewMixin = {
       if (userAnswer) this.answer = userAnswer;
     },
     /**
+     * 题目序号是否以括号结尾，如果不是则加上 '.'
+     * @param {string} question_number 题目序号
+     * @returns {string} 题目序号
+     */
+    questionNumberEndIsBracket(question_number) {
+      return `${question_number}${question_number.endsWith('）') || question_number.endsWith(')') ? '' : '.'}`;
+    },
+    /**
      * 过滤 html，防止 xss 攻击
-     * @param {String} html 需要过滤的html
-     * @returns {String} 过滤后的html
+     * @param {string} html 需要过滤的html
+     * @returns {string} 过滤后的html
      */
     sanitizeHTML(html) {
       return DOMPurify.sanitize(html);