From b3a302585c6d0157753cb7ab7b7a195e40c1fe58 Mon Sep 17 00:00:00 2001
From: shaohuzhang1 <shaohu.zhang@fit2cloud.com>
Date: Thu, 12 Sep 2024 18:07:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E9=80=9A=E8=BF=87htm?=
 =?UTF-8?q?l=5Frander=E6=A0=87=E7=AD=BE=20=E5=AF=B9=E9=87=8C=E9=9D=A2?=
 =?UTF-8?q?=E7=9A=84html=E5=86=85=E5=AE=B9=E8=BF=9B=E8=A1=8C=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/markdown/MdRenderer.vue | 37 ++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/markdown/MdRenderer.vue b/ui/src/components/markdown/MdRenderer.vue
index 1aa998db0..b62469483 100644
--- a/ui/src/components/markdown/MdRenderer.vue
+++ b/ui/src/components/markdown/MdRenderer.vue
@@ -9,6 +9,7 @@
       <el-icon><EditPen /></el-icon>
       {{ item.content }}
     </div>
+    <div v-else-if="item.type === 'html_rander'" :innerHTML="item.content"></div>
     <MdPreview
       v-else
       noIconfont
@@ -60,7 +61,7 @@ const md_view_list = computed(() => {
       return md_img_list[Math.floor(index / 2)]
     }
   })
-  return split_quick_question(result)
+  return split_html_rander(split_quick_question(result))
 })
 const split_quick_question = (result: Array<string>) => {
   return result
@@ -95,6 +96,40 @@ const split_quick_question_ = (source: string) => {
   })
   return result
 }
+const split_html_rander = (result: Array<any>) => {
+  return result
+    .map((item) => split_html_rander_(item.content, item.type))
+    .reduce((x: any, y: any) => {
+      return [...x, ...y]
+    }, [])
+}
+
+const split_html_rander_ = (source: string, type: string) => {
+  const temp_md_quick_question_list = source.match(/<html_rander>[\d\D]*?<\/html_rander>/g)
+  const md_quick_question_list = temp_md_quick_question_list
+    ? temp_md_quick_question_list.filter((i) => i)
+    : []
+  const split_quick_question_value = source
+    .split(/<html_rander>[\d\D]*?<\/html_rander>/g)
+    .filter((item) => item !== undefined)
+    .filter((item) => !md_quick_question_list?.includes(item))
+  const result = Array.from(
+    { length: md_quick_question_list.length + split_quick_question_value.length },
+    (v, i) => i
+  ).map((index) => {
+    if (index % 2 == 0) {
+      return { type: type, content: split_quick_question_value[Math.floor(index / 2)] }
+    } else {
+      return {
+        type: 'html_rander',
+        content: md_quick_question_list[Math.floor(index / 2)]
+          .replace('<html_rander>', '')
+          .replace('</html_rander>', '')
+      }
+    }
+  })
+  return result
+}
 </script>
 <style lang="scss" scoped>
 .problem-button {