From 9f57923fe6f0fe36c1dade0774c21ea1c0b7422b Mon Sep 17 00:00:00 2001
From: shaohuzhang1 <shaohu.zhang@fit2cloud.com>
Date: Sat, 28 Feb 2026 11:28:57 +0800
Subject: [PATCH] feat: Support iframe rendering

---
 ui/src/components/markdown/IframeRender.vue |  78 ++++
 ui/src/components/markdown/MdRenderer.vue   | 393 ++++++++------------
 2 files changed, 243 insertions(+), 228 deletions(-)
 create mode 100644 ui/src/components/markdown/IframeRender.vue

diff --git a/ui/src/components/markdown/IframeRender.vue b/ui/src/components/markdown/IframeRender.vue
new file mode 100644
index 00000000000..280b2b1e06c
--- /dev/null
+++ b/ui/src/components/markdown/IframeRender.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="iframe-wrapper">
+    <iframe
+      v-show="visible"
+      ref="iframeRef"
+      class="iframe"
+      :srcdoc="finalSource"
+      @load="resize"
+      sandbox="allow-scripts allow-same-origin"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch, nextTick } from 'vue'
+const resize = async () => {
+  await nextTick()
+
+  const iframe = iframeRef.value
+  if (!iframe) return
+
+  const doc = iframe.contentDocument
+  if (!doc) return
+
+  const contentHeight = doc.documentElement.scrollHeight || doc.body.scrollHeight
+
+  const viewportHeight = window.innerHeight
+
+  const finalHeight = Math.min(contentHeight, viewportHeight)
+
+  iframe.style.height = finalHeight + 'px'
+
+  iframe.style.overflow = contentHeight > viewportHeight ? 'auto' : 'hidden'
+}
+const props = withDefaults(
+  defineProps<{
+    source?: string
+    script_exec?: boolean
+    visible?: boolean
+  }>(),
+  {
+    source: '',
+    script_exec: true,
+    visible: true,
+  },
+)
+
+const iframeRef = ref<HTMLIFrameElement>()
+
+// 如果不允许执行 script，就过滤掉
+const finalSource = computed(() => {
+  if (props.script_exec) return props.source
+
+  return props.source.replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, '')
+})
+
+// 如果 source 改变才刷新 iframe
+watch(
+  () => props.source,
+  () => {
+    if (iframeRef.value) {
+      iframeRef.value.srcdoc = finalSource.value
+    }
+  },
+)
+</script>
+
+<style scoped>
+.iframe-wrapper {
+  width: 100%;
+  height: 100%;
+}
+.iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+</style>
diff --git a/ui/src/components/markdown/MdRenderer.vue b/ui/src/components/markdown/MdRenderer.vue
index df609427dcb..759ca6cd7b2 100644
--- a/ui/src/components/markdown/MdRenderer.vue
+++ b/ui/src/components/markdown/MdRenderer.vue
@@ -1,80 +1,63 @@
 <template>
   <div>
-    <!-- 推理过程组件 -->
-    <ReasoningRander :content="reasoning_content" v-if="reasoning_content?.trim()" />
-    <template v-for="(item, index) in md_view_list" :key="index">
+    <!-- 推理过程 -->
+    <ReasoningRander v-if="reasoning_content?.trim()" :content="reasoning_content" />
+
+    <template v-for="(item, index) in mdViewList" :key="index">
+      <!-- 动态组件 -->
+      <component
+        v-if="componentMap[item.type]"
+        :is="componentMap[item.type]"
+        v-bind="getComponentProps(item)"
+      />
+
+      <!-- 快捷问题 -->
       <div
-        v-if="item.type === 'question'"
-        @click="
-          sendMessage && type !== 'log' ? sendMessage(item.content, 'new') : (content: string) => {}
-        "
+        v-else-if="item.type === 'question'"
         class="problem-button mt-4 mb-4"
         :class="sendMessage && type !== 'log' ? 'cursor' : 'disabled'"
+        @click="handleQuestionClick(item.content)"
       >
         <el-space :size="8" alignment="flex-start">
-          <AppIcon iconName="app-edit" class="color-primary" style="margin-top: 3px"></AppIcon>
+          <AppIcon iconName="app-edit" class="color-primary" style="margin-top: 3px" />
           {{ item.content }}
         </el-space>
       </div>
-      <HtmlRander v-else-if="item.type === 'html_rander'" :source="item.content"></HtmlRander>
-      <EchartsRander
-        v-else-if="item.type === 'echarts_rander'"
-        :option="item.content"
-      ></EchartsRander>
-      <FormRander
-        :chat_record_id="chat_record_id"
-        :runtime_node_id="runtime_node_id"
-        :child_node="child_node"
-        :disabled="disabled"
-        :send-message="sendMessage"
-        v-else-if="item.type === 'form_rander'"
-        :form_setting="item.content"
-      ></FormRander>
-      <MdPreview
-        v-else
-        ref="editorRef"
-        editorId="preview-only"
-        :modelValue="item.content"
-        :key="index"
-        class="maxkb-md"
-      />
+
+      <!-- Markdown -->
+      <MdPreview v-else editorId="preview-only" :modelValue="item.content" class="maxkb-md" />
     </template>
   </div>
 </template>
+
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { config } from 'md-editor-v3'
 import HtmlRander from './HtmlRander.vue'
 import EchartsRander from './EchartsRander.vue'
 import FormRander from './FormRander.vue'
 import ReasoningRander from './ReasoningRander.vue'
-import { nanoid } from 'nanoid'
+import IframeRender from './IframeRender.vue'
+
 config({
   markdownItConfig(md) {
-    md.renderer.rules.image = (tokens, idx, options, env, self) => {
+    md.renderer.rules.image = (tokens, idx, options) => {
       tokens[idx].attrSet('style', 'display:inline-block;min-height:33px;padding:0;margin:0')
-      if (tokens[idx].content) {
-        tokens[idx].attrSet('title', tokens[idx].content)
-      }
-      tokens[idx].attrSet(
-        'onerror',
-        `this.src="./assets/load_error.png";this.onerror=null;this.height="33px"`,
-      )
+      tokens[idx].attrSet('onerror', 'this.src="/load_error.png"')
       return md.renderer.renderToken(tokens, idx, options)
     }
-    md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
+
+    md.renderer.rules.link_open = (tokens, idx, options) => {
       tokens[idx].attrSet('target', '_blank')
       return md.renderer.renderToken(tokens, idx, options)
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    document.appendChild
   },
 })
+
 const props = withDefaults(
   defineProps<{
     source?: string
     reasoning_content?: string
-    inner_suffix?: boolean
     sendMessage?: (question: string, type: 'old' | 'new', other_params_data?: any) => void
     child_node?: any
     chat_record_id?: string
@@ -87,227 +70,181 @@ const props = withDefaults(
     disabled: false,
   },
 )
-const editorRef = ref()
-const md_view_list = computed(() => {
-  const temp_source = props.source
-  return split_form_rander(
-    split_echarts_rander(split_html_rander(split_quick_question([temp_source]))),
-  )
-})
 
-const split_quick_question = (result: Array<string>) => {
-  return result
-    .map((item) => split_quick_question_(item))
-    .reduce((x: any, y: any) => {
-      return [...x, ...y]
-    }, [])
+type RenderNode = {
+  type: string
+  content: string
 }
-const split_quick_question_ = (source: string) => {
-  const temp_md_quick_question_list = source.match(/<quick_question>[\d\D]*?<\/quick_question>/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(/<quick_question>[\d\D]*?<\/quick_question>/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: 'md', content: split_quick_question_value[Math.floor(index / 2)] }
-    } else {
-      return {
-        type: 'question',
-        content: md_quick_question_list[Math.floor(index / 2)]
-          .replace('<quick_question>', '')
-          .replace('</quick_question>', ''),
-      }
-    }
-  })
-  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]
-    }, [])
+
+interface TagPlugin {
+  tag: string
+  type: string
+  nested?: boolean
+  transform?: (content: string) => any
 }
 
-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>', ''),
+const TAG_PLUGINS: TagPlugin[] = [
+  { tag: 'quick_question', type: 'question' },
+  { tag: 'html_rander', type: 'html_rander' },
+  { tag: 'iframe_render', type: 'iframe_render' },
+  {
+    tag: 'echarts_rander',
+    type: 'echarts_rander',
+    transform: (c) => {
+      try {
+        return JSON.parse(c)
+      } catch {
+        return c
       }
-    }
-  })
-  return result
-}
+    },
+  },
+  { tag: 'form_rander', type: 'form_rander', nested: true },
+]
 
-const split_echarts_rander = (result: Array<any>) => {
-  return result
-    .map((item) => split_echarts_rander_(item.content, item.type))
-    .reduce((x: any, y: any) => {
-      return [...x, ...y]
-    }, [])
-}
+function parseByPlugin(source: string, plugin: TagPlugin): RenderNode[] {
+  const startTag = `<${plugin.tag}>`
+  const endTag = `</${plugin.tag}>`
 
-const split_echarts_rander_ = (source: string, type: string) => {
-  const temp_md_quick_question_list = source.match(/<echarts_rander>[\d\D]*?<\/echarts_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(/<echarts_rander>[\d\D]*?<\/echarts_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: 'echarts_rander',
-        content: md_quick_question_list[Math.floor(index / 2)]
-          .replace('<echarts_rander>', '')
-          .replace('</echarts_rander>', ''),
-      }
+  if (!source.includes(startTag)) {
+    return [{ type: 'md', content: source }]
+  }
+
+  const result: RenderNode[] = []
+  let cursor = 0
+
+  while (cursor < source.length) {
+    const start = source.indexOf(startTag, cursor)
+
+    if (start === -1) {
+      result.push({
+        type: 'md',
+        content: source.slice(cursor),
+      })
+      break
     }
-  })
-  return result
-}
 
-const split_form_rander = (result: Array<any>) => {
-  return result
-    .map((item) => split_form_rander_(item.content, item.type))
-    .reduce((x: any, y: any) => {
-      return [...x, ...y]
-    }, [])
-}
-function extractFormRanderContent(html: string) {
-  const results = []
-  const startTag = '<form_rander>'
-  const endTag = '</form_rander>'
-
-  let startIndex = html.indexOf(startTag)
-
-  while (startIndex !== -1) {
-    let endIndex = html.indexOf(endTag, startIndex)
-    let depth = 1
-    let tempIndex = startIndex + startTag.length
-
-    // 查找匹配的结束标签
-    while (depth > 0 && tempIndex < html.length) {
-      const nextStart = html.indexOf(startTag, tempIndex)
-      const nextEnd = html.indexOf(endTag, tempIndex)
-
-      if (nextStart !== -1 && nextStart < nextEnd) {
-        depth++
-        tempIndex = nextStart + startTag.length
-      } else if (nextEnd !== -1) {
-        depth--
-        tempIndex = nextEnd + endTag.length
-        if (depth === 0) {
-          endIndex = nextEnd
+    if (start > cursor) {
+      result.push({
+        type: 'md',
+        content: source.slice(cursor, start),
+      })
+    }
+
+    let end = source.indexOf(endTag, start)
+    if (end === -1) break
+
+    // 处理嵌套
+    if (plugin.nested) {
+      let depth = 1
+      let tempIndex = start + startTag.length
+
+      while (depth > 0) {
+        const nextStart = source.indexOf(startTag, tempIndex)
+        const nextEnd = source.indexOf(endTag, tempIndex)
+
+        if (nextStart !== -1 && nextStart < nextEnd) {
+          depth++
+          tempIndex = nextStart + startTag.length
+        } else {
+          depth--
+          tempIndex = nextEnd + endTag.length
+          end = nextEnd
         }
-      } else {
-        break
       }
     }
 
-    if (endIndex !== -1) {
-      // 提取内容（去掉开始和结束标签）
-      const contentStart = startIndex + startTag.length
-      const content = html.substring(contentStart, endIndex)
-      results.push(content)
-      startIndex = html.indexOf(startTag, endIndex + endTag.length)
-    } else {
-      break
+    let content = source.slice(start + startTag.length, end)
+
+    if (plugin.transform) {
+      content = plugin.transform(content)
     }
+
+    result.push({
+      type: plugin.type,
+      content,
+    })
+
+    cursor = end + endTag.length
   }
 
-  return results
+  return result
 }
-const _split_form_rander = (source: string, form_rander_list: Array<string>) => {
-  const uuid = nanoid()
-  if (form_rander_list.length > 0) {
-    form_rander_list.forEach((item) => {
-      source = source.replace(`<form_rander>${item}</form_rander>`, uuid)
+
+function parseContent(source: string): RenderNode[] {
+  let nodes: RenderNode[] = [{ type: 'md', content: source }]
+
+  TAG_PLUGINS.forEach((plugin) => {
+    nodes = nodes.flatMap((node) => {
+      if (node.type !== 'md') return node
+      return parseByPlugin(node.content, plugin)
     })
-  }
-  return source
-    .split(uuid)
-    .filter((item) => item !== undefined)
-    .filter((item) => !form_rander_list?.includes(item))
+  })
+
+  return nodes
 }
-const split_form_rander_ = (source: string, type: string) => {
-  const temp_md_quick_question_list = extractFormRanderContent(source)
-  const md_quick_question_list = temp_md_quick_question_list
-    ? temp_md_quick_question_list.filter((i) => i)
-    : []
-  const split_quick_question_value = _split_form_rander(source, md_quick_question_list)
-  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 {
+
+const mdViewList = computed(() => {
+  return parseContent(props.source || '')
+})
+
+const componentMap: Record<string, any> = {
+  html_rander: HtmlRander,
+  echarts_rander: EchartsRander,
+  form_rander: FormRander,
+  iframe_render: IframeRender,
+}
+
+function getComponentProps(item: RenderNode) {
+  switch (item.type) {
+    case 'form_rander':
       return {
-        type: 'form_rander',
-        content: md_quick_question_list[Math.floor(index / 2)],
+        chat_record_id: props.chat_record_id,
+        runtime_node_id: props.runtime_node_id,
+        child_node: props.child_node,
+        disabled: props.disabled,
+        sendMessage: props.sendMessage,
+        form_setting: item.content,
       }
-    }
-  })
 
-  return result
+    case 'echarts_rander':
+      return { option: item.content }
+
+    case 'html_rander':
+      return { source: item.content }
+    case 'iframe_render':
+      return { source: item.content }
+
+    default:
+      return {}
+  }
+}
+
+function handleQuestionClick(content: string) {
+  if (!props.sendMessage) return
+  if (props.type === 'log') return
+  props.sendMessage(content, 'new')
 }
 </script>
-<style lang="scss" scoped>
+
+<style scoped lang="scss">
 .problem-button {
   width: 100%;
-  border: none;
   border-radius: 8px;
   background: var(--app-layout-bg-color);
   padding: 12px;
   box-sizing: border-box;
-  color: var(--el-text-color-regular);
   word-break: break-all;
 
   &:hover {
     background: var(--el-color-primary-light-9);
   }
 
-  &.disabled {
-    &:hover {
-      background: var(--app-layout-bg-color);
-    }
+  &.disabled:hover {
+    background: var(--app-layout-bg-color);
   }
+}
 
-  // :deep(.el-icon) {
-  //   color: var(--el-color-primary);
-  //   margin-top: 3px;
-  // }
+.cursor {
+  cursor: pointer;
 }
 </style>