<template>
  <!-- rich-text 小程序原生组件(无子组件依赖,稳)。marked md→html → rich-text :nodes 渲染。
       alpha 根因已查实(uni-app 2026 alpha 致 tap 失效),rich-text 非元凶,降级后正常用。 -->
  <rich-text :nodes="html" :selectable="true" />
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { marked } from 'marked'
import { styleMarkdown } from '@/utils/mdRenderer'

defineOptions({ name: 'MdView' })

/**
 * Markdown 渲染气泡(miniapp,rich-text 原生方案)。
 *
 * 链路:marked.parse(md) → styleMarkdown 注入 inline style → rich-text :nodes(原生渲染 html 节点)。
 * - breaks:true 聊天换行(单换行转 <br>)
 * - P1-G:styleMarkdown 给代码块/链接/表格加 inline style(rich-text 不认 class)
 * - parse 失败回退原文
 * - 空内容返空(rich-text 不渲染)
 *
 * 流式:currentText 变化 → html computed 重算 → rich-text 重渲染。
 */
const props = defineProps<{ content: string }>()

const html = computed(() => {
  const src = props.content || ''
  if (!src) return ''
  try {
    return styleMarkdown(marked.parse(src, { breaks: true, async: false }) as string)
  } catch {
    return src
  }
})
</script>
