ai-read-over-pro 0.0.14 → 0.0.16

package/components/demo/src/read-over.vue

@@ -6,13 +6,13 @@
                 <div class="question-container">
                     <div class="question-stem-content">题干</div>
                     <div class="question-detail">
-                        <p v-html="exercisesData.question"></p>
+                        <p v-html="renderFormulas(exercisesData.question)"></p>
                         <div class="question-score">{{ exercisesData.score }}分</div>
                     </div>
                 </div>
                 <div class="question-container answer-container">
                     <div class="question-stem-content answer-stem-content">回答</div>
-                    <div class="question-detail answer-detail" v-html="exercisesData.answer" v-if="exercisesData.answer"></div>
+                    <div class="question-detail answer-detail" v-html="renderFormulas(exercisesData.answer)" v-if="exercisesData.answer"></div>
                     <div class="question-detail answer-detail" v-else>
                         暂无作答
                     </div>
@@ -30,7 +30,7 @@
                 <div class="exercises-read-over-content">
                     <div class="list" v-for="item in analyzeData.jsonContent">
                         <p class="title" v-if="item.title">{{ item.title }}</p>
-                        <p class="content" v-html="item.analysis"></p>
+                        <p class="content" v-html="renderFormulas(item.analysis)"></p>
                     </div>
                     <chat-tools type="error"
                                 v-if="analyzeData"
@@ -43,6 +43,8 @@
 </template>
 <script>
 import ChatTools from "./chat-tools.vue";
+import katex from 'katex';
+import 'katex/dist/katex.min.css';
 export default {
     name: 'ReadOver',
     components: {
@@ -69,7 +71,55 @@ export default {
         },
         notyApply() {
             this.$emit('on-noty-apply', this.analyzeData, this.exercisesData);
-        }
+        },
+        renderFormulas(text) {
+          if (!text) return '';
+
+          // 如果不是字符串，转字符串
+          if (typeof text === 'number') {
+              return text;
+          }
+          const {renderToString} = katex;
+          return text
+              .replace(/\$\$(.*?)\$\$/gs, (match) => {
+                try {
+                  // 渲染块级公式
+                  return renderToString(match.slice(2, -2), {displayMode: false});
+                } catch (error) {
+                  console.error('Error rendering block formula:', error);
+                  return match;
+                }
+              })
+              .replace(/\$.*?\$/g, (match) => {
+                match = match.replace(/<br>/g, '');
+                try {
+                  // 渲染行内公式
+                  return renderToString(match.slice(1, -1), {displayMode: false});
+                } catch (error) {
+                  console.error('Error rendering inline formula:', error);
+                  return match;
+                }
+              })
+              .replace(/\\\(.*?\\\)/g, (match) => {
+                try {
+                  // 渲染行内公式
+                  return renderToString(match.slice(2, -2), {displayMode: false});
+                } catch (error) {
+                  console.error('Error rendering inline formula:', error);
+                  return match;
+                }
+              })
+              .replace(/\\\[[\s\S]*?\\\]/g, (match) => {
+                match = match.replace(/<br>/g, '');
+                try {
+                  // 渲染块级公式
+                  return renderToString(match.slice(2, -2), {displayMode: false});
+                } catch (error) {
+                  console.error('Error rendering block formula:', error);
+                  return match;
+                }
+              });
+        },
     },
 }
 </script>
@@ -162,7 +212,7 @@ export default {
 }
 :deep(.question-detail) {
     img {
-        width: 100% !important;
+        max-width: 100% !important;
     }
 }
 .answer-container {