多媒体阅卷：优化渲染函数

src/features/mark/MultiMediaMarkBody.vue

@@ -1,6 +1,30 @@
 <template>
-  <div>
-    <div ref="rendered" class="rich-text-question-container"></div>
+  <div class="rich-text-question-container">
+    <div v-for="(question, index) in questions" :key="index" class="question">
+      <div>
+        <span :id="'q-' + question.unionOrder">题号：</span>
+        <span>{{ question.unionOrder }}</span>
+      </div>
+      <div>
+        <div>题干：</div>
+        <div v-html="getDomByRichTextJSON(question.parentBody)?.innerHTML" />
+        <div v-html="getDomByRichTextJSON(question.body)?.innerHTML" />
+      </div>
+      <div>
+        <div>
+          考生答案：（字数统计：{{
+            getDomByRichTextJSON(question.studentAnswer)?.innerText.length ?? 0
+          }}）
+        </div>
+        <div v-html="getDomByRichTextJSON(question.studentAnswer)?.innerHTML" />
+      </div>
+      <div>
+        <div>标准答案：</div>
+        <div
+          v-html="getDomByRichTextJSON(question.standardAnswerr)?.innerHTML"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -11,84 +35,75 @@ import { ref, watch } from "vue";
 import { renderRichText } from "@/utils/renderJSON";
 import type { RichTextJSON } from "@/types";
 
+interface StudentAnswer {
+  mainNumber: number;
+  subNumber: string;
+  answer: Array<RichTextJSON> | null;
+}
+
+interface QuestionForRender {
+  unionOrder: string;
+  parentBody: RichTextJSON | null;
+  body: RichTextJSON;
+  studentAnswer: Array<RichTextJSON> | null;
+  standardAnswerr: Array<RichTextJSON> | null;
+}
+
 const rendered = ref(null as unknown as HTMLDivElement);
+const questions = ref([] as Array<QuestionForRender>);
 async function updateStudentAnswerJSON() {
   return getJSON(store.currentTask?.jsonUrl as string);
 }
 
+function getDomByRichTextJSON(rt: Array<RichTextJSON> | RichTextJSON | null) {
+  const node = document.createElement("div");
+  if (!rt) return node;
+  if (Array.isArray(rt)) {
+    for (const r of rt) {
+      node.appendChild(renderRichText(r));
+    }
+  } else {
+    node.appendChild(renderRichText(rt));
+  }
+  return node;
+}
+
 watch(
   () => store.currentTask,
   async () => {
     const res = await updateStudentAnswerJSON();
-    const questions = res.data; // TODO: add type
-    for (const q of questions) {
+    questions.value.splice(0);
+
+    const stuQuestions = res.data; // TODO: add type
+    for (const q of stuQuestions) {
       if (q.answer && !Array.isArray(q.answer)) {
         q.answer = [q.answer];
       }
     }
     // TODO: 最好变成有结构的v-for渲染
     for (const taskQuestion of store.currentTask?.questionList || []) {
-      const q = questions.find(
-        (v: any) =>
+      const questionForRender = {} as QuestionForRender;
+
+      const q: StudentAnswer = stuQuestions.find(
+        (v: StudentAnswer) =>
           v.mainNumber === taskQuestion.mainNumber &&
           v.subNumber == taskQuestion.subNumber
       ) || {
         mainNumber: taskQuestion.mainNumber,
         subNumber: taskQuestion.subNumber,
-        answer: [null],
+        answer: [],
       };
 
       const questionBody = store.setting.subject.questions.find(
         (ques) => ques.unionOrder === `${q.mainNumber}-${q.subNumber}`
       );
-      // const jsonContent = q.answer;
-      function appendRichText(rt: RichTextJSON) {
-        const richText = renderRichText(rt);
-        richText && rendered.value.appendChild(richText);
-        return richText;
-      }
-      const questionOrderNode = document.createElement("div");
-      questionOrderNode.innerHTML = `<span id="q-${questionBody?.unionOrder}">题号：${questionBody?.unionOrder}</span>`;
-      rendered.value.appendChild(questionOrderNode);
-
-      const questionBodyNode = document.createElement("div");
-      questionBodyNode.innerHTML = `题干：`;
-      rendered.value.appendChild(questionBodyNode);
-
-      questionBody?.parentBody && appendRichText(questionBody?.parentBody);
-      questionBody?.body && appendRichText(questionBody?.body);
-
-      const studentAnswerNode = document.createElement("div");
-      let tempNode = document.createElement("div");
-      for (const an of q.answer) {
-        // allAnswer += renderRichText(an);
-        tempNode.appendChild(renderRichText(an));
-      }
-      studentAnswerNode.innerHTML = `考生答案：(字数统计：${
-        tempNode?.innerText?.length ?? 0
-      }）${tempNode?.innerHTML}`;
-      rendered.value.appendChild(studentAnswerNode);
-
-      q.answer && appendRichText(q.answer);
-
-      const standardAnswerNode = document.createElement("div");
-      standardAnswerNode.innerHTML = `标准答案：`;
-      rendered.value.appendChild(standardAnswerNode);
-
-      // questionBody?.answer && appendRichText(questionBody.answer);
-      // console.log(questionBody.answer, renderRichText(questionBody.answer));
-      if (questionBody?.answer) {
-        // let allAnswer = "";
-        for (const an of questionBody?.answer) {
-          // allAnswer += renderRichText(an);
-          rendered.value.appendChild(renderRichText(an));
-        }
-      }
-
-      const questionSeperatorNode = document.createElement("hr");
-      questionSeperatorNode.style.margin = "20px";
-      rendered.value.appendChild(questionSeperatorNode);
-      // q.answer && appendRichText(q.answer);
+      if (!questionBody) continue;
+      questionForRender.unionOrder = questionBody.unionOrder;
+      questionForRender.parentBody = questionBody.parentBody;
+      questionForRender.body = questionBody.body;
+      questionForRender.standardAnswerr = questionBody.answer;
+      questionForRender.studentAnswer = q.answer;
+      questions.value.push(questionForRender);
     }
   },
   { immediate: true }
@@ -96,11 +111,12 @@ watch(
 </script>
 
 <style scoped>
-.rich-text-question-container {
+.question {
   background-color: white;
+  margin-bottom: 20px;
 }
-hr {
-  margin: 20px;
+.rich-text-question-container {
+  background-color: white;
 }
 </style>
 

src/utils/renderJSON.ts

@@ -108,8 +108,9 @@ function renderBlock(block: RichTextBlockJSON, inline: boolean) {
 
     // param
     if (block.param) {
-      node.style.width = block.param.width;
-      node.style.height = block.param.height;
+      const { width, height } = block.param;
+      width && (node.style.width = width + "px");
+      height && (node.style.height = height + "px");
     }
   } else if (block.type === "audio") {
     node = document.createElement("audio");