688 lines
20 KiB
HTML
688 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>AntV Infographic Debug Test</title>
|
||
<style>
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||
padding: 20px;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.infographic-render-container {
|
||
height: 800px;
|
||
border: 1px dashed #ccc;
|
||
border-radius: 4px;
|
||
margin-top: 20px;
|
||
overflow: auto;
|
||
}
|
||
|
||
h1 {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.status {
|
||
margin-top: 10px;
|
||
padding: 10px;
|
||
background: #e0f2fe;
|
||
border-radius: 4px;
|
||
font-family: monospace;
|
||
white-space: pre-wrap;
|
||
/* 保留换行符 */
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container">
|
||
<h1>AntV Infographic 综合测试台</h1>
|
||
<div class="controls">
|
||
<label>选择测试用例：</label>
|
||
<select id="case-selector">
|
||
<option value="case-list-basic">Case A: List Basic (Standard)</option>
|
||
<option value="case-tree-vertical">Case B: Tree Vertical (Hierarchy)</option>
|
||
<option value="case-theme-extended">Case C: Theme Extended (Bg/Text Color)</option>
|
||
<option value="case-tree-horizontal">Case D: Tree Horizontal</option>
|
||
<option value="case-list-children">Case E: List with Children</option>
|
||
<option value="case-tree-indented">Case F: Indented Tree</option>
|
||
<option value="case-mindmap">Case G: Mindmap</option>
|
||
<option value="case-l">Case L: List Grid (MiniMax)</option>
|
||
<option value="case-list-vertical">Case H: List Vertical</option>
|
||
<option value="case-statistic-card">Case I: Statistic Card</option>
|
||
<option value="case-k">Case K: 柠檬霜 Controversy (Roadmap)</option>
|
||
<option value="case-l">Case L: List Grid (MiniMax)</option>
|
||
<option value="case-llm-list-grid">LLM: List Grid (Features)</option>
|
||
<option value="case-llm-tree-vertical">LLM: Tree Vertical (Hierarchy)</option>
|
||
<option value="case-llm-statistic-card">LLM: Statistic Card (Metrics)</option>
|
||
<option value="case-llm-mindmap">LLM: Mindmap (Brainstorming)</option>
|
||
<option value="case-chart-bar">Case M: Chart Bar</option>
|
||
<option value="case-compare-swot">Case N: Comparison SWOT</option>
|
||
<option value="case-relation-sankey">Case O: Relationship Sankey</option>
|
||
<option value="case-quadrant-quarter">Case P: Quadrant Analysis</option>
|
||
</select>
|
||
<button onclick="runTest()">运行测试</button>
|
||
</div>
|
||
|
||
<div class="status" id="status-log">准备就绪...</div>
|
||
<div id="infographic-container-test" class="infographic-render-container"></div>
|
||
</div>
|
||
|
||
<!-- Case A: 基础列表 -->
|
||
<script type="text/template" id="case-list-basic">
|
||
infographic list-row-simple-horizontal-arrow
|
||
data
|
||
title 基础列表测试
|
||
items
|
||
- label 步骤一
|
||
icon ref:search:one
|
||
- label 步骤二
|
||
icon ref:search:two
|
||
theme
|
||
colorPrimary #3b82f6
|
||
palette #3b82f6 #8b5cf6
|
||
</script>
|
||
|
||
<!-- Case B: 垂直树 (尝试添加 ID) -->
|
||
<script type="text/template" id="case-tree-vertical">
|
||
infographic tree-vertical
|
||
data
|
||
title 垂直树测试
|
||
items
|
||
- label 根节点
|
||
id root
|
||
icon ref:search:root
|
||
children
|
||
- label 子节点 A
|
||
id child-a
|
||
- label 子节点 B
|
||
id child-b
|
||
theme
|
||
colorPrimary #10b981
|
||
palette #10b981 #34d399
|
||
</script>
|
||
|
||
<!-- Case C: 扩展主题 (测试清理逻辑) -->
|
||
<script type="text/template" id="case-theme-extended">
|
||
infographic list-row-simple-horizontal-arrow
|
||
data
|
||
title 扩展主题测试
|
||
items
|
||
- label 暗色模式
|
||
icon ref:search:moon
|
||
theme
|
||
colorPrimary #6366f1
|
||
palette #6366f1 #8b5cf6
|
||
backgroundColor #1e293b
|
||
textColor #f8fafc
|
||
roughness 0.5
|
||
</script>
|
||
|
||
<!-- Case D: 水平树 -->
|
||
<script type="text/template" id="case-tree-horizontal">
|
||
infographic tree-horizontal
|
||
data
|
||
title 水平树测试
|
||
items
|
||
- label 根节点
|
||
id root-h
|
||
children
|
||
- label 子节点 1
|
||
id child-1
|
||
- label 子节点 2
|
||
id child-2
|
||
theme
|
||
colorPrimary #f59e0b
|
||
</script>
|
||
|
||
<!-- Case E: 列表带子节点 (测试兼容性) -->
|
||
<script type="text/template" id="case-list-children">
|
||
infographic list-row-simple-horizontal-arrow
|
||
data
|
||
title 列表带子节点
|
||
items
|
||
- label 父项 1
|
||
children
|
||
- label 子项 1.1
|
||
- label 父项 2
|
||
theme
|
||
colorPrimary #ec4899
|
||
</script>
|
||
|
||
<!-- Case F: Indented Tree (缩进树) -->
|
||
<script type="text/template" id="case-tree-indented">
|
||
infographic tree-indented
|
||
data
|
||
title 缩进树测试
|
||
items
|
||
- label 根节点
|
||
id root-i
|
||
children
|
||
- label 子节点 1
|
||
id child-i-1
|
||
- label 子节点 2
|
||
id child-i-2
|
||
theme
|
||
colorPrimary #8b5cf6
|
||
</script>
|
||
|
||
<!-- Case G: Mindmap -->
|
||
<script type="text/template" id="case-mindmap">
|
||
infographic mindmap
|
||
data
|
||
title 脑图测试
|
||
items
|
||
- label 中心主题
|
||
children
|
||
- label 主题 A
|
||
children
|
||
- label 子主题 A1
|
||
- label 子主题 A2
|
||
- label 主题 B
|
||
theme
|
||
colorPrimary #06b6d4
|
||
</script>
|
||
|
||
<!-- Case H: List Vertical (垂直列表) -->
|
||
<script type="text/template" id="case-list-vertical">
|
||
infographic list-vertical
|
||
data
|
||
title 垂直列表测试
|
||
items
|
||
- label 第一项
|
||
desc 描述文本 1
|
||
icon ref:search:one
|
||
- label 第二项
|
||
desc 描述文本 2
|
||
icon ref:search:two
|
||
theme
|
||
colorPrimary #8b5cf6
|
||
</script>
|
||
|
||
<!-- Case I: Statistic Card (统计卡片) -->
|
||
<script type="text/template" id="case-statistic-card">
|
||
infographic statistic-card
|
||
data
|
||
title 核心指标
|
||
items
|
||
- label 总用户数
|
||
value 1,234
|
||
icon ref:search:users
|
||
- label 日活
|
||
value 89%
|
||
icon ref:search:activity
|
||
theme
|
||
colorPrimary #10b981
|
||
</script>
|
||
|
||
<!-- Case J: Official Tree Example -->
|
||
<script type="text/template" id="case-official-tree">
|
||
infographic hierarchy-tree-tech-style-capsule-item
|
||
data
|
||
title 官方树形示例
|
||
items
|
||
- label 根节点
|
||
icon ref:search:root
|
||
children
|
||
- label 子节点 A
|
||
icon ref:search:a
|
||
children
|
||
- label 叶子 A1
|
||
- label 叶子 A2
|
||
- label 子节点 B
|
||
icon ref:search:b
|
||
theme
|
||
colorPrimary #1677ff
|
||
</script>
|
||
|
||
<!-- Case K: User Fail Case (Lemon Frost) -->
|
||
<script type="text/template" id="case-user-fail">
|
||
infographic list-vertical
|
||
data
|
||
title 柠檬霜豹纹守宫：美丽的诅咒
|
||
desc 揭露极端审美背后的遗传缺陷、伦理代价与商业真相
|
||
items
|
||
- label 审美霸权与病态追求
|
||
desc 追求极致黄色而筛选出致癌基因，让生命背负终身癌症风险，是伦理上的霸权行为。
|
||
icon mdi/eye-off-outline
|
||
- label 致命的基因多效性
|
||
desc 与“谜”品系不同，柠檬霜导致的是实体肿瘤溃烂。致癌机制与颜色性状不可剥离。
|
||
icon mdi/dna
|
||
- label 商业层面的误导欺诈
|
||
desc 所谓“低肿瘤率”或“改良版”多为营销谎言。只要表现出性状，就注定携带致癌机制。
|
||
icon mdi/alert-octagon
|
||
- label 科学研究与宠物价值
|
||
desc 其价值应仅限于作为黑色素瘤的医学研究模型，而非在宠物交易市场中流通。
|
||
icon mdi/microscope
|
||
- label 行动呼吁：坚决拒绝
|
||
desc 拒绝购买与繁育，将柠檬霜留在教科书中作为警示，而非留在饲养箱中承受痛苦。
|
||
icon mdi/cancel
|
||
theme
|
||
colorPrimary #FFD700
|
||
colorBg #1A1A1A
|
||
textColor #FFFFFF
|
||
palette #FFD700 #FF4D4F #E6E6E6
|
||
stylize rough
|
||
roughness 0.2
|
||
</script>
|
||
|
||
<!-- Case L: List Grid (MiniMax) -->
|
||
<script type="text/template" id="case-l">
|
||
list-grid
|
||
data
|
||
title MiniMax 2025 模型矩阵全解析
|
||
desc 以 abab 7 为核心的国产顶尖大模型
|
||
items
|
||
- label 极致 MoE 架构优化
|
||
desc 国内首批 MoE 路线坚定者。
|
||
icon mdi/cpu-64-bit
|
||
- label Video-01 视频生成
|
||
desc 杀手锏级多模态能力。
|
||
icon mdi/movie-filter
|
||
- label 情感陪伴与角色扮演
|
||
desc 源自星野基因。
|
||
icon mdi/emoticon-heart
|
||
- label 超长上下文与精准召回
|
||
desc 支持 128k+ 窗口。
|
||
icon mdi/database-search
|
||
theme
|
||
colorPrimary #6366f1
|
||
colorBg #ffffff
|
||
textColor #1f2937
|
||
</script>
|
||
|
||
<!-- LLM Generated Cases for Verification -->
|
||
<script type="text/template" id="case-llm-list-grid">
|
||
infographic list-grid
|
||
data
|
||
title MiniMax 2025 模型矩阵全解析
|
||
desc 极致架构与多模态能力的全面进阶
|
||
items
|
||
- label 极致 MoE 架构优化
|
||
desc 国内首批 MoE 路线坚定者，兼顾模型性能与推理效率
|
||
icon mdi/layers-triple
|
||
- label Video-01 视频生成
|
||
desc 杀手锏级多模态能力，支持高品质视频内容创作
|
||
icon mdi/video-vintage
|
||
- label 情感陪伴与角色扮演
|
||
desc 源自星野基因，提供深度的情感连接与人格化交互
|
||
icon mdi/robot-happy
|
||
- label 超长上下文与精准召回
|
||
desc 支持 128k+ 超长窗口，实现海量信息的精准处理
|
||
icon mdi/file-find
|
||
theme
|
||
colorPrimary #0052D9
|
||
colorBg #F2F3F5
|
||
palette #0052D9 #2BA471 #E37318 #D54941
|
||
stylize flat
|
||
</script>
|
||
|
||
<script type="text/template" id="case-llm-tree-vertical">
|
||
infographic tree-vertical
|
||
data
|
||
title 公司组织架构
|
||
desc 2025年度企业内部编制示意图
|
||
items
|
||
- label 研发部
|
||
icon mdi/xml
|
||
children
|
||
- label 后端组
|
||
icon mdi/server
|
||
- label 前端组
|
||
icon mdi/language-javascript
|
||
- label 市场部
|
||
icon mdi/chart-bell-curve
|
||
children
|
||
- label 销售组
|
||
icon mdi/account-cash
|
||
- label 推广组
|
||
icon mdi/bullhorn
|
||
</script>
|
||
|
||
<script type="text/template" id="case-llm-statistic-card">
|
||
infographic statistic-card
|
||
data
|
||
title 2024年Q4 核心指标
|
||
desc 统计日期：2024年第四季度
|
||
items
|
||
- label 总用户数
|
||
value 1,234,567
|
||
icon mdi/account-group
|
||
- label 日活跃用户
|
||
value 89%
|
||
icon mdi/chart-line
|
||
- label 营收增长
|
||
value +45%
|
||
icon mdi/trending-up
|
||
</script>
|
||
|
||
<script type="text/template" id="case-llm-mindmap">
|
||
infographic mindmap
|
||
data
|
||
title 人工智能应用领域
|
||
desc 核心应用场景分类与展示
|
||
items
|
||
- label 生成式 AI
|
||
icon mdi/brain
|
||
children
|
||
- label 文本生成
|
||
icon mdi/text-recognition
|
||
- label 图像生成
|
||
icon mdi/image-multiple
|
||
- label 视频生成
|
||
icon mdi/video-input-component
|
||
- label 预测性 AI
|
||
icon mdi/chart-line
|
||
children
|
||
- label 股市预测
|
||
icon mdi/finance
|
||
- label 天气预报
|
||
icon mdi/weather-partly-cloudy
|
||
- label 决策 AI
|
||
icon mdi/robot
|
||
children
|
||
- label 自动驾驶
|
||
icon mdi/car-autonomous
|
||
- label 游戏博弈
|
||
icon mdi/controller-classic
|
||
theme
|
||
colorPrimary #2F54EB
|
||
colorBg #FFFFFF
|
||
</script>
|
||
|
||
<!-- New Styles Test Cases -->
|
||
<script type="text/template" id="case-chart-bar">
|
||
infographic chart-bar
|
||
data
|
||
title 2023年季度营收分析
|
||
desc 单位：亿元
|
||
items
|
||
- label 第一季度
|
||
value 12.5
|
||
- label 第二季度
|
||
value 15.8
|
||
- label 第三季度
|
||
value 14.2
|
||
- label 第四季度
|
||
value 18.9
|
||
</script>
|
||
|
||
<script type="text/template" id="case-relation-circle">
|
||
infographic relation-circle
|
||
data
|
||
title 生态循环
|
||
items
|
||
- label 生产者
|
||
- label 消费者
|
||
- label 分解者
|
||
</script>
|
||
|
||
<script type="text/template" id="case-compare-swot">
|
||
infographic compare-swot
|
||
data
|
||
title 某初创咖啡品牌 SWOT 分析
|
||
items
|
||
- label 优势
|
||
children
|
||
- label 产品口味独特
|
||
- label 选址精准
|
||
- label 劣势
|
||
children
|
||
- label 品牌知名度低
|
||
- label 资金压力大
|
||
- label 机会
|
||
children
|
||
- label 线上外卖市场增长
|
||
- label 年轻人对精品咖啡需求增加
|
||
- label 威胁
|
||
children
|
||
- label 行业巨头价格战
|
||
- label 原材料成本上涨
|
||
</script>
|
||
|
||
<script type="text/template" id="case-relation-sankey">
|
||
infographic relation-sankey
|
||
data
|
||
title 家庭月度开支流向
|
||
desc 2025年12月家庭总收入 10000 元分配明细
|
||
items
|
||
- label 总收入
|
||
value 10000
|
||
children
|
||
- label 房贷
|
||
value 4000
|
||
- label 日常消费
|
||
value 3000
|
||
children
|
||
- label 餐饮
|
||
value 2000
|
||
- label 交通
|
||
value 1000
|
||
- label 教育培训
|
||
value 2000
|
||
- label 存入银行
|
||
value 1000
|
||
</script>
|
||
|
||
<script type="text/template" id="case-quadrant-quarter">
|
||
infographic quadrant-quarter
|
||
data
|
||
title 个人任务象限分析
|
||
desc 2025年12月28日 任务优先级管理
|
||
items
|
||
- label 修复线上紧急 Bug
|
||
desc 紧急且重要：立即优先处理
|
||
illus mdi/bug
|
||
- label 准备下午的客户会议
|
||
desc 紧急且重要：核心商务产出
|
||
illus mdi/account-group
|
||
- label 制定年度学习计划
|
||
desc 重要不紧急：长期价值积累
|
||
illus mdi/calendar-check
|
||
- label 健身锻炼
|
||
desc 重要不紧急：身体健康投资
|
||
illus mdi/dumbbell
|
||
- label 回复琐碎的邮件
|
||
desc 紧急不重要：低价值干扰
|
||
illus mdi/email-outline
|
||
- label 接听推销电话
|
||
desc 紧急不重要：时间黑洞
|
||
illus mdi/phone-cancel
|
||
- label 刷社交媒体
|
||
desc 不紧急不重要：消遣娱乐
|
||
illus mdi/instagram
|
||
- label 看无聊的综艺
|
||
desc 不紧急不重要：无谓消耗
|
||
illus mdi/television-classic
|
||
</script>
|
||
|
||
<script type="text/template" id="case-compare-binary">
|
||
infographic compare-binary
|
||
data
|
||
title IDE vs Open WebUI
|
||
desc 核心差异对比
|
||
items
|
||
- label IDE
|
||
desc 代码工程中心
|
||
children
|
||
- label 深度上下文
|
||
- label 实时补全
|
||
- label Open WebUI
|
||
desc 对话交互中心
|
||
children
|
||
- label 模型管理
|
||
- label 知识库 RAG
|
||
</script>
|
||
|
||
<script src="https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js"></script>
|
||
<script>
|
||
function log(msg) {
|
||
console.log(msg);
|
||
const el = document.getElementById('status-log');
|
||
el.textContent += '\n' + msg;
|
||
}
|
||
|
||
function logError(err) {
|
||
console.error('Detailed Error:', err);
|
||
let msg = `❌ 内部错误: ${err.message}`;
|
||
if (err.stack) msg += `\nStack: ${err.stack}`;
|
||
for (const key in err) {
|
||
if (key !== 'message' && key !== 'stack') {
|
||
msg += `\n${key}: ${JSON.stringify(err[key])}`;
|
||
}
|
||
}
|
||
log(msg);
|
||
}
|
||
|
||
function clearLog() {
|
||
document.getElementById('status-log').textContent = '准备就绪...';
|
||
}
|
||
|
||
window.listTemplates = () => {
|
||
clearLog();
|
||
log('[Explore] 正在获取模版列表...');
|
||
if (typeof AntVInfographic !== 'undefined') {
|
||
if (typeof AntVInfographic.getTemplates === 'function') {
|
||
const templates = AntVInfographic.getTemplates();
|
||
log(`[Explore] getTemplates() result (${templates.length}):\n${JSON.stringify(templates, null, 2)}`);
|
||
console.log(templates);
|
||
} else {
|
||
log('❌ AntVInfographic.getTemplates is not a function.');
|
||
log('Available keys: ' + Object.keys(AntVInfographic).join(', '));
|
||
}
|
||
} else {
|
||
log('❌ AntVInfographic is undefined.');
|
||
}
|
||
};
|
||
|
||
window.runTest = () => {
|
||
clearLog();
|
||
const selector = document.getElementById('case-selector');
|
||
const caseId = selector.value;
|
||
const sourceEl = document.getElementById(caseId);
|
||
const containerEl = document.getElementById('infographic-container-test');
|
||
|
||
if (!sourceEl) return log('❌ 未找到测试用例');
|
||
|
||
// 重置容器
|
||
containerEl.innerHTML = '';
|
||
containerEl.style = '';
|
||
|
||
let syntaxContent = sourceEl.textContent.trim();
|
||
log(`[Test] 运行用例: ${caseId} (${selector.options[selector.selectedIndex].text})`);
|
||
log(`[Step 1] 原始内容:\n${syntaxContent}`);
|
||
|
||
// --- 模拟插件的清理逻辑 ---
|
||
const bgMatch = syntaxContent.match(/backgroundColor\s+(#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3}|[a-zA-Z]+)/);
|
||
if (bgMatch && bgMatch[1]) {
|
||
containerEl.style.backgroundColor = bgMatch[1];
|
||
}
|
||
const textMatch = syntaxContent.match(/textColor\s+(#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3}|[a-zA-Z]+)/);
|
||
if (textMatch && textMatch[1]) {
|
||
containerEl.style.color = textMatch[1];
|
||
}
|
||
|
||
// 使用更强的正则：匹配 stylize 及其后续缩进的行
|
||
const nl = String.fromCharCode(10);
|
||
const cleanRegex = new RegExp('^\\s*(roughness|stylize|backgroundColor|textColor|colorBg).*(' + nl + '\\s+.*)*', 'gm');
|
||
if (cleanRegex.test(syntaxContent)) {
|
||
log('[Fix] 移除扩展 Theme 属性...');
|
||
syntaxContent = syntaxContent.replace(cleanRegex, '');
|
||
}
|
||
|
||
// 2. 模板映射配置
|
||
const TEMPLATE_MAPPING = {
|
||
// 列表与层级
|
||
'list-grid': 'list-grid-compact-card',
|
||
'list-vertical': 'list-column-simple-vertical-arrow',
|
||
'tree-vertical': 'hierarchy-tree-tech-style-capsule-item',
|
||
'tree-horizontal': 'hierarchy-tree-lr-tech-style-capsule-item',
|
||
'mindmap': 'hierarchy-mindmap-branch-gradient-capsule-item',
|
||
|
||
// 顺序与关系
|
||
'sequence-roadmap': 'sequence-roadmap-vertical-simple',
|
||
'sequence-zigzag': 'sequence-horizontal-zigzag-simple',
|
||
'sequence-horizontal': 'sequence-horizontal-zigzag-simple',
|
||
'relation-sankey': 'relation-sankey-simple', // 暂无直接对应，保留原值或需移除
|
||
'relation-circle': 'relation-circle-icon-badge',
|
||
|
||
// 对比与分析
|
||
'compare-binary': 'compare-binary-horizontal-simple-vs',
|
||
'compare-swot': 'compare-swot',
|
||
'compare-table': 'compare-table-simple', // 暂无直接对应
|
||
'quadrant-quarter': 'quadrant-quarter-simple-card',
|
||
|
||
// 图表与数据
|
||
'statistic-card': 'list-grid-compact-card',
|
||
'chart-bar': 'chart-bar-plain-text',
|
||
'chart-column': 'chart-column-simple',
|
||
'chart-line': 'chart-line-plain-text',
|
||
'chart-area': 'chart-area-simple', // 暂无直接对应
|
||
'chart-pie': 'chart-pie-plain-text',
|
||
'chart-doughnut': 'chart-pie-donut-plain-text'
|
||
};
|
||
|
||
// 3. 应用映射策略
|
||
for (const [key, value] of Object.entries(TEMPLATE_MAPPING)) {
|
||
const regex = new RegExp(`infographic\\s+${key}(?=\\s|$)`, 'i');
|
||
if (regex.test(syntaxContent)) {
|
||
log(`[Fix] 自动映射模板: ${key} -> ${value}`);
|
||
syntaxContent = syntaxContent.replace(regex, `infographic ${value}`);
|
||
break; // 找到一个匹配后即停止
|
||
}
|
||
}
|
||
|
||
// 兜底检查：确保以 infographic 开头
|
||
if (!syntaxContent.trim().toLowerCase().startsWith('infographic')) {
|
||
const firstWord = syntaxContent.trim().split(/\s+/)[0].toLowerCase();
|
||
if (!['data', 'theme', 'design', 'items'].includes(firstWord)) {
|
||
log('[Fix] 检测到缺失 infographic 前缀，自动补全');
|
||
syntaxContent = 'infographic ' + syntaxContent;
|
||
}
|
||
}
|
||
|
||
syntaxContent = syntaxContent.trim();
|
||
log(`[Step 2] 清理后内容:\n${syntaxContent}`);
|
||
|
||
try {
|
||
const { Infographic } = AntVInfographic;
|
||
const instance = new Infographic({
|
||
container: '#infographic-container-test',
|
||
padding: 24,
|
||
});
|
||
|
||
instance.on('error', (err) => {
|
||
logError(err);
|
||
});
|
||
|
||
instance.render(syntaxContent);
|
||
|
||
if (instance.node) {
|
||
log('✅ 渲染成功 (instance.node 存在)');
|
||
if (!containerEl.querySelector('svg')) {
|
||
log('⚠️ 自动挂载失败，手动挂载...');
|
||
containerEl.appendChild(instance.node);
|
||
}
|
||
} else {
|
||
log('❌ 渲染失败 (instance.node 为空)');
|
||
}
|
||
|
||
} catch (e) {
|
||
logError(e);
|
||
}
|
||
};
|
||
</script>
|
||
</body>
|
||
|
||
</html> |