/** * 根据 Markdown 文本生成思维导图的静态 HTML 预览(虚影效果)。 * * 主要功能与实现逻辑: * 1. 解析 Markdown 为树结构(parseTree): * - 按行分割 Markdown 文本。 * - 识别 #、##、### 标题,构建多级节点树。 * - 返回包含 text 和 children 的树状对象。 * 2. 递归渲染树节点(renderNode): * - 根据层级渲染不同样式的节点(背景色、圆点、字体等)。 * - 通过绝对定位和缩进实现层级视觉。 * - 递归渲染所有子节点。 * 3. 入口与返回: * - 先 parseTree,再 renderNode。 * - 若无内容,返回"暂无结构化内容"。 * * @param {string} md - Markdown 格式的思维导图文本。 * @returns {string} 生成的思维导图预览 HTML 字符串。 */ function renderMindmapShadowInternal(md) { /** * 解析 Markdown 文本为树结构。 * * @param {string} md - Markdown 文本。 * @returns {object} 树结构对象。 */ function parseTree(md) { const lines = md.split(/\r?\n/).filter(l => l.trim()); const root = { text: '', children: [] }; let last1 = null, last2 = null; lines.forEach(line => { let m1 = line.match(/^# (.+)/); let m2 = line.match(/^## (.+)/); let m3 = line.match(/^### (.+)/); if (m1) { last1 = { text: m1[1], children: [] }; root.children.push(last1); last2 = null; } else if (m2 && last1) { last2 = { text: m2[1], children: [] }; last1.children.push(last2); } else if (m3 && last2) { last2.children.push({ text: m3[1], children: [] }); } }); return root; } /** * 递归渲染树节点为 HTML。 * * @param {object} node - 当前节点。 * @param {number} level - 当前层级。 * @param {boolean} isLast - 是否为同级最后一个节点。 * @returns {string} HTML 字符串。 */ function renderNode(node, level = 0, isLast = true) { if (!node.text && node.children.length === 0) return ''; if (!node.text) { // 根节点 return `
${node.children.map((c,i,a)=>renderNode(c,0,i===a.length-1)).join('')}
`; } // 节点样式定义 const colors = [ 'rgba(59,130,246,0.13)', // 主节点 'rgba(59,130,246,0.09)', // 二级 'rgba(59,130,246,0.06)' // 三级 ]; const dotColors = [ 'rgba(59,130,246,0.35)', 'rgba(59,130,246,0.22)', 'rgba(59,130,246,0.15)' ]; let html = `
`; // 圆点 html += ``; // 连接线(非根节点且非最后一个兄弟) if (level > 0) { html += ``; } html += `${window.ChatbotUtils.escapeHtml(node.text)}`; if (node.children && node.children.length > 0) { html += `
${node.children.map((c,i,a)=>renderNode(c,level+1,i===a.length-1)).join('')}
`; } html += '
'; return html; } // 入口:解析并渲染 const tree = parseTree(md); const html = renderNode(tree); return html || '
暂无结构化内容
'; } // 挂载到全局命名空间 if (typeof window.ChatbotRenderingUtils === 'undefined') { window.ChatbotRenderingUtils = {}; } window.ChatbotRenderingUtils.renderMindmapShadow = renderMindmapShadowInternal;