// ===== showcase/src/examples/components/markdown_viewer.ts ===== import {  RenderButton,  RenderMarkdownViewer,  RenderPageHeader,  RenderStackPanel,  RenderText,  RenderWrapPanel,} from 'ds-ui' const markdown = `# 患者过敏史核对指南 本文用于演示 Canvas 内的 **MarkdownViewer** 阅读、目录、搜索和代码块能力。 ## 核对步骤 1. 核对患者身份与腕带信息。2. 询问药物、食物与造影剂过敏史。3. 将结果写入结构化字段并保存。 > 重要：过敏史属于必须展示的业务信息，不能只放在 Tooltip 中。 ## 状态表 | 状态 | 含义 | 后续动作 || --- | --- | --- || 已确认 | 患者完成核对 | 可以进入处方审核 || 待确认 | 信息尚不完整 | 阻止高风险用药 || 不详 | 患者无法提供 | 标记并安排复核 | ## 接入代码 \`\`\`tsconst viewer = new RenderMarkdownViewer({  markdown: guide,  onLinkClick: event => openExternal(event.href),})\`\`\` ## 相关说明 - 支持 GFM 表格、任务列表和删除线。- 支持标题目录、全文搜索和选区复制。- HTML 只按文本展示，不执行脚本。` export function createMarkdownViewerExample(): RenderStackPanel {  const viewer = new RenderMarkdownViewer({ markdown, padding: 18, minHeight: 420 })  viewer.height = 500  const status = new RenderText('文档已加载：4 个二级标题。', { role: 'secondary' })  const actions = new RenderWrapPanel({ spacing: 8, runSpacing: 8 })  actions.addChild(new RenderButton({    label: '搜索“过敏”',    onClick: () => {      viewer.searchQuery = '过敏'      const results = viewer.getSearchResults()      if (results.length) viewer.scrollToSearchResult(0)      status.text = `找到 ${results.length} 个“过敏”匹配项。`    },  }))  actions.addChild(new RenderButton({    label: '跳到状态表',    variant: 'primary',    onClick: () => {      viewer.scrollToHeading('状态表')      status.text = '已跳转到“状态表”。'    },  }))  actions.addChild(new RenderButton({    label: '返回顶部',    onClick: () => {      viewer.scrollToTop()      viewer.searchQuery = ''      status.text = '已返回文档顶部并清除搜索。'    },  }))   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 10, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({    title: 'MarkdownViewer 开发与业务文档',    description: '在 Canvas 内完成 Markdown 排版、滚动、目录跳转、全文搜索、表格、代码块和复制。',  }))  panel.addChild(actions)  panel.addChild(status)  panel.addChild(viewer, 1)  panel.padding = 14  return panel}