183 lines
6.3 KiB
HTML
183 lines
6.3 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>当前问题调试</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
margin: 20px;
|
||
background: #f5f5f5;
|
||
}
|
||
.test-container {
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
margin-bottom: 20px;
|
||
}
|
||
.test-title {
|
||
color: #333;
|
||
border-bottom: 2px solid #007bff;
|
||
padding-bottom: 10px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* 模拟Mind Elixir的样式 */
|
||
.topic {
|
||
background: #fff;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
padding: 8px;
|
||
margin: 10px 0;
|
||
position: relative;
|
||
}
|
||
|
||
.topic-text {
|
||
font-weight: 500;
|
||
color: #333;
|
||
margin-bottom: 4px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* 我们的markdown样式 */
|
||
.topic .topic-text.markdown-content {
|
||
font-size: 12px;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.topic .topic-text.markdown-content table {
|
||
border-collapse: collapse !important;
|
||
width: 100% !important;
|
||
margin: 4px 0 !important;
|
||
font-size: 11px !important;
|
||
border: 1px solid #ddd !important;
|
||
display: table !important;
|
||
}
|
||
|
||
.topic .topic-text.markdown-content table th,
|
||
.topic .topic-text.markdown-content table td {
|
||
border: 1px solid #ddd !important;
|
||
padding: 2px 4px !important;
|
||
text-align: left !important;
|
||
vertical-align: top !important;
|
||
display: table-cell !important;
|
||
}
|
||
|
||
.topic .topic-text.markdown-content table th {
|
||
background-color: #f5f5f5 !important;
|
||
font-weight: 600 !important;
|
||
}
|
||
|
||
.topic .topic-text.markdown-content table tr {
|
||
display: table-row !important;
|
||
}
|
||
|
||
.topic .topic-text.markdown-content table tr:nth-child(even) {
|
||
background-color: #f9f9f9 !important;
|
||
}
|
||
|
||
.topic .topic-text.markdown-content table tr:hover {
|
||
background-color: #e9ecef !important;
|
||
}
|
||
|
||
.raw-content {
|
||
background: #f8f9fa;
|
||
padding: 10px;
|
||
border-radius: 4px;
|
||
font-family: monospace;
|
||
white-space: pre-wrap;
|
||
margin-bottom: 20px;
|
||
border: 1px solid #e9ecef;
|
||
}
|
||
|
||
.debug-info {
|
||
background: #e3f2fd;
|
||
padding: 10px;
|
||
border-radius: 4px;
|
||
margin: 10px 0;
|
||
border-left: 4px solid #2196f3;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="test-container">
|
||
<h1 class="test-title">当前问题调试 - 用户提供的表格</h1>
|
||
|
||
<h3>原始表格内容：</h3>
|
||
<div class="raw-content" id="raw-content"></div>
|
||
|
||
<h3>模拟Mind Elixir节点中的渲染：</h3>
|
||
<div class="topic">
|
||
<div class="topic-text markdown-content" id="mindelixir-render"></div>
|
||
</div>
|
||
|
||
<h3>普通渲染（对比）：</h3>
|
||
<div id="normal-render"></div>
|
||
|
||
<div class="debug-info" id="debug-info"></div>
|
||
</div>
|
||
|
||
<script>
|
||
// 配置marked
|
||
marked.setOptions({
|
||
breaks: true,
|
||
gfm: true,
|
||
tables: true,
|
||
sanitize: false
|
||
});
|
||
|
||
// 用户提供的表格内容
|
||
const tableContent = `| 数据类型 | 特点 | 适用场景 | 示例 |
|
||
|---------|------|---------|------|
|
||
| 数值型 | 可进行数学运算 | 统计分析、机器学习 | 年龄、收入、温度 |
|
||
| 分类型 | 表示类别属性 | 分类问题、特征工程 | 性别、职业、地区 |
|
||
| 时间序列 | 按时间顺序排列 | 趋势预测、周期性分析 | 股票价格、气温变化 |
|
||
| 文本型 | 非结构化自然语言 | NLP分析、情感识别 | 评论、文章、社交媒体内容 |`;
|
||
|
||
// 显示原始内容
|
||
document.getElementById('raw-content').textContent = tableContent;
|
||
|
||
// 渲染到Mind Elixir模拟节点
|
||
try {
|
||
const html = marked.parse(tableContent);
|
||
document.getElementById('mindelixir-render').innerHTML = html;
|
||
} catch (error) {
|
||
document.getElementById('mindelixir-render').innerHTML = `<div style="color: red;">渲染失败: ${error.message}</div>`;
|
||
}
|
||
|
||
// 普通渲染
|
||
try {
|
||
const html = marked.parse(tableContent);
|
||
document.getElementById('normal-render').innerHTML = html;
|
||
} catch (error) {
|
||
document.getElementById('normal-render').innerHTML = `<div style="color: red;">渲染失败: ${error.message}</div>`;
|
||
}
|
||
|
||
// 调试信息
|
||
const debugInfo = document.getElementById('debug-info');
|
||
const mindelixirElement = document.getElementById('mindelixir-render');
|
||
const table = mindelixirElement.querySelector('table');
|
||
|
||
if (table) {
|
||
const computedStyle = window.getComputedStyle(table);
|
||
debugInfo.innerHTML = `
|
||
<h4>表格样式检查：</h4>
|
||
<p><strong>display:</strong> ${computedStyle.display}</p>
|
||
<p><strong>border-collapse:</strong> ${computedStyle.borderCollapse}</p>
|
||
<p><strong>border:</strong> ${computedStyle.border}</p>
|
||
<p><strong>width:</strong> ${computedStyle.width}</p>
|
||
<p><strong>font-size:</strong> ${computedStyle.fontSize}</p>
|
||
<p><strong>margin:</strong> ${computedStyle.margin}</p>
|
||
<p><strong>表格行数:</strong> ${table.rows.length}</p>
|
||
<p><strong>表格列数:</strong> ${table.rows[0] ? table.rows[0].cells.length : 0}</p>
|
||
`;
|
||
} else {
|
||
debugInfo.innerHTML = '<h4>错误：</h4><p>没有找到表格元素</p>';
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|