zsjz-ai/ai-electron/frontend/src/ai/components/BlockRenderer.vue

<template>
  <!-- markdown 正文 -->
  <MarkdownBlock v-if="block.kind === 'markdown'" :text="block.text" :streaming="streaming" />

  <!-- 普通代码块 -->
  <CodeBlock v-else-if="block.kind === 'code'" :text="block.text" :lang="block.lang" :pending="block.pending" />

  <!-- HTML 渲染 -->
  <HtmlBlock v-else-if="block.kind === 'html'" :html="block.text" :pending="block.pending" />

  <!-- ECharts 图表 -->
  <EChartsBlock
    v-else-if="block.kind === 'echarts'"
    :option="block.data"
    :pending="block.pending"
    :error="block.error"
  />

  <!--
    关系图谱不再渲染模型输出的 ```graph 围栏。
    图谱必须来自 get_case_graph 的后端全量 graph_data，挂在对应工具调用下面；
    模型生成的图数据不是原始接口数据，可能丢关系/连错端点，统一忽略。
  -->
  <div v-else-if="block.kind === 'graph'" class="ai-graph-ignored">
    该历史图谱来自模型输出，已停用；请重新查询关系图谱以使用后端原始数据。
  </div>

  <!-- AI 研判结构化产物（```insight 围栏） -->
  <InsightBlock
    v-else-if="block.kind === 'insight'"
    :data="block.data"
    :text="block.text"
    :pending="block.pending"
    :error="block.error"
  />

  <!-- 兜底：未知块按纯文本输出，避免内容丢失 -->
  <CodeBlock v-else :text="block.text" :lang="block.lang" />
</template>

<script lang="ts" setup>
  /**
   * 富内容块渲染分发器
   *
   * 输入是 scanner 解析出的 ContentBlock，按 kind 分发到具体块组件。
   * 每种块独立成组件，便于单独演进。
   */
  import type { ContentBlock } from '../utils/scanner';
  import MarkdownBlock from './blocks/MarkdownBlock.vue';
  import CodeBlock from './blocks/CodeBlock.vue';
  import HtmlBlock from './blocks/HtmlBlock.vue';
  import EChartsBlock from './blocks/EChartsBlock.vue';
  import InsightBlock from './blocks/InsightBlock.vue';

  withDefaults(
    defineProps<{
      block: ContentBlock;
      /** 所属消息是否仍在流式输出 */
      streaming?: boolean;
    }>(),
    { streaming: false },
  );
</script>

<style lang="less" scoped>
  .ai-graph-ignored {
    margin: var(--ai-sp-2) 0;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--ai-text-2);
    background: var(--ai-bg-subtle, #f7f8fa);
    border: 1px dashed var(--ai-border, #e5e7eb);
    border-radius: 6px;
  }
</style>